/* ==========================================================
NOTA SOBRE LOS ":hover" DE ESTE ARCHIVO
----------------------------------------------------------
Van envueltos en "@media (hover:hover)". En un movil no existe
pasar por encima: el navegador finge un hover al tocar y lo
deja PUESTO hasta que toques otra cosa. Resultado: pulsas un
boton, te lleva a otro sitio, vuelves y el boton sigue
iluminado como si tuvieras el dedo encima.
La envoltura va rule a rule y en su sitio, no agrupada al
final: una media query no cambia la especificidad ni el orden,
asi que la cascada queda exactamente igual que antes en un
ordenador, y en el movil esas reglas sencillamente no existen.
========================================================== */
/* ==========================================================
EL BOTÓN DE EFECTO MARIPOSA — UN SOLO FICHERO, UN SOLO BOTÓN
----------------------------------------------------------
Aquí vivía el filo especular: un canto de cristal con un brillo
que seguía al cursor, portado del SpecularButton de React Bits.
Se ha ido entero — el filo, el resplandor y el JavaScript que
lo movía.
Lo que queda es el botón de "Ver método" y el "Reserva" del
pie: relleno del color del texto, esquina de 12 px, y nada más.
El motivo de cambiar es el de siempre: había DIECISIETE botones
con un efecto que solo se entiende de cerca y con ratón, en una
web que se mira sobre todo con el dedo. Un botón relleno se
entiende de un vistazo y a cualquier tamaño.
Y como el relleno sale de --texto y el texto de --fondo, el
mismo botón funciona sobre negro y sobre blanco sin escribir
dos versiones: en la portada es blanco sobre negro y en las
páginas de dentro negro sobre blanco. Se invierte solo.
========================================================== */
.esp,
.boton-relleno{
position:relative;
display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
margin:0; border:0;
padding:0 1.5rem; height:44px;
border-radius:12px;
background:var(--texto, #0e0d0b);
color:var(--fondo, #fdfdfd);
font-family:var(--sans, inherit);
font-size:.76rem; font-weight:700;
letter-spacing:.09em; text-transform:uppercase;
line-height:1; white-space:nowrap; text-decoration:none;
cursor:pointer; outline:none;
transition:transform .18s var(--ease-out, ease-out),
opacity .2s linear;
}
.esp:active,
.boton-relleno:active{ transform:scale(.97) }
.esp:focus-visible,
.boton-relleno:focus-visible{ outline:2px solid var(--texto, #0e0d0b); outline-offset:3px }
@media (hover: hover) and (pointer: fine){
@media (hover:hover){.esp:hover, .boton-relleno:hover{ opacity:.86 }}
}
/* Los de solo icono: el mismo relleno y la misma esquina, en
cuadrado. Redondos serían una familia distinta de botones para
decir lo mismo. */
.esp--icono{ width:44px; height:44px; padding:0 }
/* Los secundarios —"volver al inicio", las flechas, el cerrar del
menú— van sin relleno y con un filo de un píxel. Hace falta
distinguirlos: si todo va relleno, todo pesa igual y ya no hay
una acción principal en ninguna pantalla. */
.esp--fantasma,
.cierra-menu,
.esp.flecha,
.esp.fam__pag{
background:transparent;
color:var(--texto, #0e0d0b);
border:1px solid var(--velo-borde, rgba(14,13,11,.16));
}
@media (hover: hover) and (pointer: fine){
@media (hover:hover){.esp--fantasma:hover, .esp.flecha:hover, .esp.fam__pag:hover{ background:var(--velo, rgba(0,0,0,.05)); opacity:1 }}
}
.esp svg,
.boton-relleno svg{
display:block; flex:0 0 auto; color:inherit;
transition:transform .3s var(--ease-out, ease-out);
}
/* Los de palabra llevan algo más de aire que los de icono. */
.esp.pie__sitio, .esp.boton-relleno, .esp.cta, .esp.pie__cta, .esp.reserva{ padding:0 1.7rem }
.esp.fam__modo-btn{ width:auto; height:38px; padding:0 1rem }
/* ==========================================================
EL BOTÓN DEL PIE — negro sobre negro
----------------------------------------------------------
"Parque del Retiro, Madrid" no se veía en ninguna de las diez
páginas: medido, contraste 1,08 sobre uno. Texto casi negro
sobre el negro del pie.
La causa es un empate. ".pie__sitio" le da color claro y
".esp--fantasma" le da var(--texto), que en las páginas
interiores es casi negro. Las dos reglas pesan lo mismo —una
clase cada una— así que gana la que se cargue después, y
boton-em.css va detrás de pie-em.css.
Se arregla con DOS clases en el mismo selector, que pesa más que
cualquiera de las dos y no depende del orden de los . Es
la misma solución que ya se usó aquí para las otras formas: si
dependes del orden de carga, dependes de algo que se rompe al
mover una línea.
========================================================== */
.esp.pie__sitio{
color:rgba(255,255,255,.62);
border-color:rgba(255,255,255,.28);
background:transparent;
}
@media (hover: hover) and (pointer: fine){
@media (hover:hover){.esp.pie__sitio:hover{
color:var(--paper, #f6f4ef);
border-color:var(--paper, #f6f4ef);
background:transparent; opacity:1;
}}
}
.esp .rollo{ font:inherit; letter-spacing:inherit }
/* El resplandor que llevaba el filo. Se queda la regla vacía a
propósito NO: se borra. Lo que no se usa no se comenta, se
quita — un ".esp__halo" sin estilo es un invisible en
diecisiete botones esperando a que alguien pregunte qué hace. */
.esp__halo{ display:none }
/* ==========================================================
EL RODILLO DE LA ETIQUETA Y LA FLECHA
----------------------------------------------------------
Esto sí se queda: la etiqueta sube y sale por arriba mientras
una copia idéntica entra por abajo. No es un fundido ni un
cambio de color — es la misma palabra rodando, y funciona igual
con el dedo que con el ratón porque lo que se ve es el estado
final, no el recorrido.
========================================================== */
.rollo{
display:inline-block; position:relative; overflow:hidden;
height:1.15em; line-height:1.15em; vertical-align:bottom;
}
.rollo__par{
display:block;
transition:transform .42s cubic-bezier(.16,1,.3,1);
will-change:transform;
}
.rollo__par > span{
display:block; white-space:nowrap;
height:1.15em; line-height:1.15em;
}
@media (hover: hover) and (pointer: fine){
.con-rollo:focus-visible .rollo__par{ transform:translateY(-50%) }
@media (hover:hover){.con-rollo:hover .rollo__par{ transform:translateY(-50%) }}
/* La flecha acompaña: gira 45° y se va un poco. Da igual si es
una flecha diagonal, una recta o un signo: todas llevan la
clase y todas hacen lo mismo. */
.con-rollo:hover .flecha-boton, .con-rollo:focus-visible .flecha-boton{ transform:translateX(3px) rotate(45deg) }
}
.flecha-boton{ display:inline-grid; place-items:center; transition:transform .42s cubic-bezier(.16,1,.3,1) }
@media (prefers-reduced-motion: reduce){
.rollo__par, .flecha-boton{ transition:none }
}
/* ==========================================================
LOS QUE TRAÍAN FORMA PROPIA
----------------------------------------------------------
styles.css les da a estos su propio radio, alto y relleno: la
pastilla de 999 px, el "content" de un ::before que dibujaba un
resplandor, alturas de 49,6 px salidas del padding en rem.
Medido, había CUATRO formas y CUATRO alturas distintas en la
misma página.
Cada selector de aquí lleva DOS clases —".esp" más la suya— así
que gana a las de una sola sin depender del orden de los
, que es lo que ya falló una vez.
No es una lista que haya que mantener a mano: sale de buscar en
styles.css qué reglas ponen border-radius, height o padding a un
botón. Si mañana aparece otra, el test de botones la caza —
mide las formas y los altos de todos y avisa si hay más de dos.
========================================================== */
.esp.cta,
.esp.cta--dark,
.esp.cta--ghost,
.esp.cta--hero,
.esp.cta--big,
.esp.pie__cta,
.esp.mega-foot__cta,
.esp.red-boton,
.esp.form__submit,
.esp.rsv__enviar,
.esp.waiver__cta,
.esp.confirmar__boton,
.esp.fam__cta,
.esp.pie__sitio{
height:44px;
padding:0 1.7rem;
border-radius:12px;
}
.esp.esp--icono{ width:44px; height:44px; padding:0; border-radius:12px }
/* "min-height" gana a "height" aunque se declare antes, así que
ponerle 44 px de alto no bastaba: styles.css les daba un mínimo
de 49,6 px que salía de un padding en rem. Se anula aquí, que es
donde se decide cuánto mide un botón. */
.esp{ min-height:0 }
.esp.esp--icono{ min-width:44px }
/* Las flechas de la portada eran círculos de 32 px: su propia
familia de botones para hacer lo mismo que los demás. Pasan a la
forma común. La hoja de la portada va antes que esta, así que
basta con las dos clases. */
.esp.flecha{ width:44px; height:44px; border-radius:12px }
/* El resplandor del ".cta" era un ::before a pantalla completa
detrás del botón. Sin filo especular no acompaña a nada. */
.esp.cta::before,
.esp.cta::after{ content:none }
.esp .cta__glow{ display:none }
/* El ensanche al pasar por encima —el relleno crecía de 1,7 a
2 rem— movía la etiqueta y peleaba con el rodillo, que es
justo lo contrario: la etiqueta tiene que quedarse quieta
mientras rueda. */
@media (hover: hover) and (pointer: fine){
.esp.cta:hover, .esp.cta:focus-visible{ padding-left:1.7rem; padding-right:1.7rem }
}
/* ==========================================================
EL DEDO NO ES UN RATÓN
----------------------------------------------------------
Medido en la web publicada, a 390 px de ancho: el botón del
menú ocupa 31×36, los cuatro iconos del pie 34×34, y los
enlaces legales 21 px de alto. Un dedo cubre unos 44 px, así
que todo eso se pulsa apuntando — y apuntar en un móvil es
fallar y volver a intentarlo.
No se agrandan los dibujos: a la vista están bien, y hacerlos
más gordos sería resolver un problema del dedo estropeando lo
que ve el ojo. Se agranda la ZONA que responde, con un
rectángulo transparente centrado en cada uno. El botón se ve
igual y se acierta a la primera.
Sólo donde se toca —"pointer: coarse"—; con ratón no hace
falta y ensancharlo dejaría zonas que reaccionan donde no se
ve nada. */
@media (pointer: coarse){
/* SOLO SE POSICIONA LO QUE NO ESTABA POSICIONADO.
Aquí figuraban también las flechas del método, y fue un error:
ya iban en "absolute", pegadas a los dos lados de la tarjeta, y
ponerles "relative" las devolvió al flujo — las dos cayeron en
mitad del texto, una encima de otra. Medido: pasaron de estar
en x=93 y x=1299 a x=187 y x=167.
Los iconos del pie y los ".esp" ya son "relative" de por sí,
así que tampoco hace falta nombrarlos. El único que estaba
suelto era el botón del menú. */
.abre-menu, #abreMenu, #menuOpen{ position:relative }
.abre-menu::after, #abreMenu::after, #menuOpen::after,
.pie .pie__redes a::after,
.esp--icono::after,
.method-hero__nav-arrow::after{
content:"";
position:absolute;
top:50%; left:50%;
width:max(100%, 44px); height:max(100%, 44px);
transform:translate(-50%, -50%);
/* Sólo recoge el toque: ni pinta ni tapa nada de lo que hay
debajo, y va detrás del contenido del propio botón. */
background:none; border:0; z-index:0;
}
/* Los enlaces del pie son una línea de texto: ahí no cabe un
rectángulo por encima sin pisar al de al lado, así que lo que
se agranda es el propio hueco, con aire arriba y abajo. */
.pie__lista a, .pie__sitio{ padding-block:.5rem }
}
/* ==========================================================
EL ESTADO "CERCA" — LO QUE EL DEDO NO PUEDE HACER
----------------------------------------------------------
En un móvil no hay ratón, así que no hay "pasar por encima".
La web resolvía eso encendiendo el botón cuando cruza la franja
central de la pantalla: el JavaScript le pone ".es-cerca".
La idea es buena. Lo que hacía, no. Ese estado venía de la web
anterior, que era negra, y allí "encender" un botón oscuro era
volverlo BLANCO. En las páginas de dentro, que son blancas, eso
deja un botón blanco sobre fondo blanco: medido en "Tu perfil",
el botón principal —"Enviarme el enlace"— quedaba invisible,
solo reconocible por una sombra de nueve píxeles alrededor. Y
además se ampliaba un 3,5 %, así que se salía cinco píxeles por
cada lado de su propia tarjeta.
El botón de hoy ya se invierte solo —el relleno sale de
--texto y la letra de --fondo—, así que no hay nada que voltear:
sobre negro es blanco y sobre blanco es negro, y en los dos
casos ENCENDIDO significa lo mismo. Lo que se conserva es el
gesto: la etiqueta rueda al entrar en la franja de lectura,
igual que rueda al pasar el ratón por encima. Un lenguaje, dos
maneras de llegar a él.
Dos clases en cada selector para ganarle a ".cta--dark.es-cerca"
sin depender de qué hoja se cargue antes. */
@media (hover: none){
.esp.es-cerca{
background:var(--texto, #0e0d0b);
color:var(--fondo, #fdfdfd);
padding-left:1.7rem; padding-right:1.7rem;
letter-spacing:.09em;
/* Sin ampliar: un botón que ocupa todo el ancho de su caja no
tiene a dónde crecer, y creciendo se sale. */
transform:none;
box-shadow:0 6px 18px rgba(0,0,0,.16);
}
/* Los secundarios siguen siendo secundarios también encendidos:
si al cruzar la pantalla se rellenaran, habría dos acciones
principales a la vez y ninguna sería la principal. */
.esp.esp--fantasma.es-cerca,
.esp.pie__sitio.es-cerca,
.esp.flecha.es-cerca,
.esp.fam__pag.es-cerca,
.esp.cta--ghost.es-cerca{
background:transparent;
color:var(--texto, #0e0d0b);
box-shadow:none;
}
.esp.pie__sitio.es-cerca{ color:rgba(255,255,255,.62) }
/* El gesto que sí se conserva. */
.con-rollo.es-cerca .rollo__par{ transform:translateY(-50%) }
}
/* ==========================================================
LA CABECERA DEL MÉTODO, EN VERTICAL
----------------------------------------------------------
Es una fila de tres cosas: el número del paso, una pastilla que
dice de qué va y cuánto dura, y el título. En un ordenador caben
de sobra. En un móvil de 390 px no: medido, la pastilla se
partía en dos renglones —"BIENVENIDA ·" arriba y "5 MIN"
abajo— y el título quedaba empujado contra el borde derecho,
a punto de salirse.
Se había intentado arreglar prohibiendo el salto de línea
("flex-wrap: nowrap"), y eso no da espacio: solo obliga a que
los tres se aprieten hasta que uno se rompe por dentro, que es
justo lo que pasaba.
Aquí se acepta que no caben en una línea y se ponen en dos: el
número y la pastilla arriba —van juntos, los dos dicen "qué
paso es este"— y el título entero debajo, con su tamaño. Es la
misma información en el orden en que se lee.
Va en este fichero porque styles.css es la hoja de la web
anterior y se toca lo menos posible; con dos clases en el
selector, gana sin depender del orden de carga. */
@media (max-width:560px){
.method-hero .method-hero__title-row{
display:grid;
grid-template-columns:auto 1fr;
align-items:center;
gap:.55rem .7rem;
margin-bottom:.9rem;
}
.method-hero .method-hero__step-num{ grid-column:1; grid-row:1 }
.method-hero .method-hero__step-badge{
grid-column:2; grid-row:1;
justify-self:start;
white-space:nowrap; /* ya cabe: tiene la línea para ella sola */
}
.method-hero .method-hero__step-title{
grid-column:1 / -1; grid-row:2;
margin:0;
/* Sin el número y la pastilla al lado, el título recupera el
ancho entero y puede volver a su cuerpo. */
font-size:clamp(1.7rem, 8.5vw, 2.4rem);
line-height:1.05;
}
}
/* ==========================================================
LO MISMO PARA LAS ENTRADAS DE LAS SUBPÁGINAS
----------------------------------------------------------
El mismo problema del pie: escalonados pensados para una
pantalla ancha, sufridos en uno estrecho. Aquí se recortan los
de las piezas que entran y los de los textos que surgen.
========================================================== */
@media (max-width:820px){
.surge,
.entra-arriba, .entra-abajo, .entra-izq, .entra-der, .entra-zoom{
transition-delay:calc(var(--d, 0s) * .45);
}
}
/* ==========================================================
EL MÉTODO: EL TEXTO PASABA POR DEBAJO DE LAS FLECHAS
----------------------------------------------------------
Las dos flechas van pegadas a los lados de la tarjeta, a media
altura, y el texto del paso ocupa el ancho entero centrado. En un
ordenador sobra sitio a los lados y no se tocan. En un móvil no:
medido a 390 px, la flecha izquierda ocupa de x=45 a x=81, la
derecha de x=309 a x=345, y el texto va de x=42 a x=348. O sea
que la primera y la última palabra de las líneas del medio
quedan DEBAJO de las flechas.
Eso es lo que se ve como dos textos superpuestos: no hay dos
textos, hay uno pasando por debajo de dos botones.
Se les hace sitio: las flechas se pegan al borde y el texto
arranca donde ellas acaban. Cada cosa en su carril. */
/* Y la misma esquina que el resto de la familia: eran las dos
únicas de toda la web con el canto redondo de 999 px. */
.method-hero .method-hero__nav-arrow{ border-radius:12px }
@media (max-width:560px){
.method-hero .method-hero__nav-arrow{ width:34px; height:34px }
.method-hero .method-hero__nav-arrow--prev{ left:3px }
.method-hero .method-hero__nav-arrow--next{ right:3px }
.method-hero .method-hero__stage{
padding-left:46px;
padding-right:46px;
}
}
/* ==========================================================
LA PUERTA DE RESERVA, EN LAS DOCE PÁGINAS
----------------------------------------------------------
"entrar-em.js" crea la puerta —"¿Quién eres?" y el correo— en
TODAS las páginas: se pulsa Reserva en cualquier sitio y ahí
está. Pero sus estilos vivían en reserva-em.css, que solo carga
la portada. Medido, en las otras once: la separación entre el
campo y el botón era de 0 px —pegados, literalmente— y el botón
salía de 137 px pegado a la izquierda en vez de ocupar el ancho.
Dos puertas distintas para la misma acción, y la mala era la que
se ve desde diez de las doce páginas.
Las reglas se mudan aquí, que es un fichero que cargan todas.
Donde de verdad vive un estilo es donde vive el elemento, y este
elemento vive en todas partes. */
.puerta__pie{
display:flex;
justify-content:flex-end;
/* Aire entre escribir y confirmar: son dos gestos distintos y
tienen que verse como dos. */
margin-top:1.75rem;
}
.puerta__pie .esp{ width:100% }
@media (min-width:520px){ .puerta__pie .esp{ width:auto } }
/* Y el color: estas tarjetas son siempre claras, aunque floten
sobre la portada, que es negra. Sin esto el botón sale del color
del texto de la página de debajo —blanco— sobre una tarjeta
blanca, y desaparece. */
.waiver-overlay, .popup-overlay, .rsv{
--texto:#0a0a0a;
--fondo:#ffffff;
}
/* Y EL COLOR DEL TEXTO, ESCRITO. NO BASTABA CON LA VARIABLE.
----------------------------------------------------------
Arriba se cambia "--texto" a casi negro, y eso arregla los
botones, que la usan. Pero el texto de dentro de estas tarjetas
no la usa: hereda su color del , y el body de la portada lo
tiene BLANCO porque la pagina es negra. El color se hereda ya
resuelto, asi que cambiar la variable en un antepasado no lo
toca: llega blanco igual.
Resultado medido: fondo blanco, letra blanca. Las tres tarjetas
—"¿Quien eres?", "Antes de continuar" y "Elige tu sesion"— eran
texto invisible sobre papel. Se veia algo solo por las sombras.
Con "color" escrito de verdad, todo lo de dentro nace oscuro y lo
que quiera ser mas claro lo pide aparte. */
.waiver-overlay, .popup-overlay, .rsv{
color:#0a0a0a;
}
.waiver-overlay *, .popup-overlay *, .rsv *{
-webkit-text-fill-color:currentColor;
}
/* Los secundarios, mas claros pero legibles: 4,6:1 sobre blanco. */
.waiver__lead, .rsv__nota, .rsv__pie, .popup__lead{ color:#5b5b5b }
/* LAS TRES, LA MISMA TARJETA.
Medido: una tenia 20 px de radio y sombra, y otra 0 y ninguna.
Son el mismo objeto —una tarjeta clara que flota sobre la
pagina— y tienen que verse igual en las tres. */
.waiver, .popup, .rsv__panel{
background:#ffffff;
border-radius:20px;
box-shadow:0 1px 0 rgba(255,255,255,.9) inset,
0 2px 6px rgba(14,13,11,.06),
0 28px 70px rgba(14,13,11,.22);
}
/* El autoajuste de texto de Safari, apagado en todas las páginas.
Lo explica largo la portada: Safari le da un cuerpo propio a cada
"inline-block" metido en un párrafo, y eso hacía que el nombre de
la marca en el manifiesto saliera al 58 % del tamaño de la línea
en la que está. El apagador estaba solo en styles.css —la hoja
antigua— y la portada no la carga. Aquí lo cargan las doce. */
html{
-webkit-text-size-adjust:100%;
text-size-adjust:100%;
}
/* ==========================================================
EL MÉTODO: DOS PASOS A LA VEZ EN PANTALLA
----------------------------------------------------------
Los seis textos del método comparten la MISMA celda de la
rejilla —todos en "grid-area: 1/1"— y lo único que distingue al
activo es la opacidad. El cambio de uno a otro es un fundido
cruzado de 450 ms, así que durante casi medio segundo los dos
están pintados encima del otro.
En un ordenador el texto ocupa dos o tres líneas y el cruce
apenas se nota. En un móvil ocupa seis o siete, y como la rejilla
los centra, dos textos de distinto número de líneas quedan
desplazados uno respecto al otro: las líneas se intercalan y lo
que se lee es una sopa. Es exactamente lo que se ve en la
captura del paso 3 — no son dos textos superpuestos por error,
es el fundido.
Se corta el cruce: el que sale desaparece en el acto y el que
entra sigue apareciendo con su fundido. Se pierde el cruce, que
a este tamaño no se apreciaba; se gana que nunca haya dos textos
en pantalla. "visibility" además saca al que no toca del alcance
del lector de pantalla, que antes leía los seis seguidos.
Dos clases en el selector para ganarle a styles.css sin depender
del orden de carga. */
.method-hero .method-hero__slide{
visibility:hidden;
opacity:0;
transition:none;
}
.method-hero .method-hero__slide.is-active{
visibility:visible;
opacity:1;
transition:opacity 320ms var(--ease-out, cubic-bezier(.16,1,.3,1));
}
/* ==========================================================
LA TARJETA DE RESERVA SALÍA GRIS EN EL MÓVIL
----------------------------------------------------------
La tarjeta es blanca —medido: rgb(255,255,255)— y aun así en el
iPhone se ve gris, con el texto encima como apagado.
La capa que hay detrás lleva "backdrop-filter: blur(10px)", que
desenfoca la página. En Safari, ese desenfoque arrastra a los
hijos: la tarjeta acaba compuesta DENTRO de la capa desenfocada
en vez de encima, así que se mezcla con el negro de debajo y sale
a medio tono. En un ordenador se compone bien y por eso allí es
blanca.
En el móvil se cambia el desenfoque por un velo opaco. Se ve
prácticamente igual —lo que hay detrás está tapado de todas
formas— la tarjeta vuelve a ser blanca, y de paso desaparece un
desenfoque a pantalla completa, que es de lo más caro que se le
puede pedir a un teléfono en cada fotograma. */
@media (pointer: coarse){
.waiver-overlay,
.popup-overlay{
-webkit-backdrop-filter:none;
backdrop-filter:none;
background:rgba(8,8,8,.82);
}
/* Y por si acaso, la tarjeta en su propia capa: así nunca puede
acabar mezclada con lo que tiene detrás. */
.waiver, .popup, .rsv__panel{ isolation:isolate; transform:translateZ(0) }
}
/* ==========================================================
LOS DOS "RESERVA" DE LA PORTADA
----------------------------------------------------------
El de la barra de arriba era una pastilla blanca maciza sobre el
vídeo: pesaba mas que el propio titular. Pasa a transparente,
como el del pie.
Y el del pie ya era transparente, pero SIN filo: letra clara
sobre fondo negro y nada mas. Medido: fondo transparente, borde
de 0 px. Un boton sin borde y sin fondo no se lee como un boton,
se lee como un enlace suelto — que es justo lo que se noto.
Los dos llevan ahora el mismo filo que la pastilla de "Parque del
Retiro, Madrid", que esta a dos dedos en el mismo pie y ya
resolvia este problema: un hilo blanco al 28 %. Asi los tres
elementos del pie hablan el mismo idioma.
========================================================== */
.barra .reserva,
.pie__cta{
background:transparent !important;
border:1px solid rgba(255,255,255,.28) !important;
color:#f5f5f5 !important;
transition:border-color .22s var(--ease, cubic-bezier(.22,.61,.36,1)),
color .22s var(--ease, cubic-bezier(.22,.61,.36,1));
}
@media (hover:hover){.barra .reserva:hover, .pie__cta:hover{
border-color:var(--paper, #f6f4ef) !important;
color:#ffffff !important;
}}
/* El halo interior del boton relleno sobra cuando no hay relleno. */
.barra .reserva .esp__halo,
.pie__cta .esp__halo{ display:none }
/* ==========================================================
SALTAR AL CONTENIDO
----------------------------------------------------------
Invisible hasta que se enfoca con el tabulador. No se esconde
con "display:none" ni con "visibility:hidden" a proposito: eso
lo sacaria del recorrido del teclado y dejaria de existir para
quien lo necesita. Se saca de la pantalla y vuelve al enfocarlo.
========================================================== */
.saltar{
position:fixed;
top:0; left:50%;
transform:translate(-50%, -120%);
z-index:9999;
padding:.75rem 1.4rem;
background:#0e0d0b;
color:#f6f4ef;
border:1px solid rgba(255,255,255,.3);
border-radius:0 0 12px 12px;
font-family:var(--sans, system-ui, sans-serif);
font-size:.82rem;
font-weight:600;
letter-spacing:.04em;
text-decoration:none;
transition:transform .2s var(--ease-out, cubic-bezier(.16,1,.3,1));
}
.saltar:focus{
transform:translate(-50%, 0);
outline:2px solid #f6f4ef;
outline-offset:-4px;
}
/* Y el destino no se marca con un filo al llegar: molesta y no
aporta, porque ya se sabe que has saltado. */
[id="contenido"]:focus, #escena:focus{ outline:none }