/* ========================================================== 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. ========================================================== */ /* ========================================================== LAS PÁGINAS DE DENTRO — CON EL LENGUAJE DE LA PORTADA ---------------------------------------------------------- Esta hoja la comparten las seis páginas de dentro que ya han pasado al lenguaje nuevo. Se enciende poniéndole a la página la clase "es-interior" en su ; la que no la lleve, se queda como estaba. Así se van pasando de una en una y se puede ver cada una antes de seguir. LA PORTADA NO CARGA NADA DE ESTO. Ni esta hoja ni fondo-em.css: tiene su paleta dentro y su rampa propia. Lo que se toque aquí no puede llegarle. Va DESPUÉS de styles.css y de las comunes en el : a igualdad de especificidad manda la última, y esta tiene que mandar sobre las dos. ========================================================== */ /* ---------- Fuera el marco ---------- La página era una tarjeta blanca flotando sobre hueso, con borde redondeado y un margen alrededor. La portada no tiene marco: el contenido se apoya directamente en el fondo, y es la columna de texto —no una caja— la que lo mantiene en su sitio. El marco tenía sentido cuando el fondo era plano; con un fondo que se mueve y respira por detrás, un rectángulo blanco encima lo tapa justo donde más se vería. */ body.page-inner.es-interior .page{ background:transparent; padding:0; min-height:auto; } body.page-inner.es-interior .page__wrap{ background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none; border:0; box-shadow:none; border-radius:0; max-width:none; padding:calc(var(--borde, 1.6rem) + env(safe-area-inset-top)) var(--borde, 1.6rem) clamp(4rem, 10vh, 8rem); } /* La columna: la misma medida que ya tenía (820 px), que es la que hace que una respuesta larga no se lea en líneas de un palmo. Lo que cambia es que ahora la sostiene el propio texto y no una caja pintada. */ body.es-interior .page__body{ max-width:820px; margin:0 auto; width:100%; padding-top:clamp(3rem, 9vh, 7rem); } /* ---------- El titular ---------- Mismo cuerpo, mismo aprete y misma cursiva serif que los cinco titulares de la portada. Son la misma voz diciendo cosas distintas; si el de aquí fuera de otro tamaño, esto parecería otra web. */ body.es-interior .page__title{ font-family:var(--sans); font-size:clamp(2rem, 4vw, 3.6rem); line-height:1; font-weight:700; letter-spacing:-.04em; color:var(--texto); text-wrap:balance; margin:0 0 .6rem; } body.es-interior .page__title em{ font-family:var(--serif); font-style:italic; font-weight:400; font-size:var(--serif-cuerpo, 1.04em); letter-spacing:-.01em; } body.es-interior .page__lead{ color:var(--texto-2); max-width:52ch; margin:0 0 clamp(2.2rem, 5vh, 3.4rem); } /* ---------- Cada pregunta, una caja de vidrio ---------- Antes eran filas separadas por una línea de un píxel. Sobre un fondo plano se leen bien; sobre uno que se mueve, una línea suelta no separa nada y las preguntas se convierten en un bloque de texto. La caja sí separa, y además hace algo que la línea no podía: deja ver el fondo por detrás desenfocado, así que la pregunta se apoya en la página en vez de estar pegada encima. */ body.es-interior .faq{ border:0; padding:0; margin:0 0 .7rem; background:var(--velo); border:1px solid var(--velo-borde); border-radius:var(--r-rect); backdrop-filter:blur(18px) saturate(0); -webkit-backdrop-filter:blur(18px) saturate(0); overflow:hidden; transition:border-color .3s var(--ease, ease), background-color .3s var(--ease, ease); } @media (hover: hover) and (pointer: fine){ @media (hover:hover){body.es-interior .faq:hover{ border-color:var(--texto-2) }} } body.es-interior .faq[open]{ border-color:var(--texto-2) } body.es-interior .faq summary{ padding:clamp(1rem, 2.2vw, 1.35rem) clamp(1.1rem, 2.6vw, 1.6rem); color:var(--texto); font-size:clamp(1rem, 1.5vw, 1.18rem); letter-spacing:-.015em; } /* La flecha toma el color del texto, que viaja con la rampa. Con un color fijo se perdería en cuanto el fondo se aclarase. */ body.es-interior .faq summary::after{ border-right-color:var(--texto); border-bottom-color:var(--texto); } body.es-interior .faq[open] summary::after{ transform:rotate(-135deg) } body.es-interior .faq__answer{ padding:0 clamp(1.1rem, 2.6vw, 1.6rem) clamp(1.1rem, 2.4vw, 1.5rem); color:var(--texto-2); max-width:66ch; } body.es-interior .faq__answer em{ font-family:var(--serif); font-style:italic; font-size:var(--serif-cuerpo, 1.04em); color:var(--texto); } body.es-interior .faq__lista{ margin:.7rem 0 0; padding-left:1.1rem; display:flex; flex-direction:column; gap:.35rem; } body.es-interior .faq__lista li{ color:var(--texto-2) } /* La cabecera se queda como estaba: el cazamariposas y la mariposa son dibujos negros y el fondo es claro, así que se ven. La regla de invertirlos era de cuando esto iba a ser oscuro; se va entera en vez de dejarla en cero, que es una regla que no hace nada esperando a confundir a alguien. */ body.es-interior .page__nav{ position:relative; z-index:12 } body.es-interior .page__menu{ color:var(--texto) } /* ========================================================== LAS CAJAS DEL RESTO DE LAS PÁGINAS ---------------------------------------------------------- Perfil, gracias, registro y mensaje-recibido tienen sus propias cajas —los pasos, el detalle de la reserva, las cifras— y todas eran blanco macizo sobre hueso. Aquí pasan al mismo vidrio que las preguntas de FAQs. Y con ellas el CALENDARIO y el MODAL DE CONSENTIMIENTO, que no viven en una página sino que se abren encima de cualquiera: si se quedaran con el material viejo, bastaría con pulsar "Reserva" para volver al diseño anterior en medio de la web nueva. Son las dos piezas que más se ven y las últimas que quedaban sin pasar. ========================================================== */ body.es-interior .perfil__paso, body.es-interior .reg__paso, body.es-interior .gracias__detalle, body.es-interior .gracias__pasos, body.es-interior .gracias__cuenta, body.es-interior .perfil__cifra, body.es-interior .perfil__ok, body.es-interior .tienda-info, .es-interior .rsv__panel, .es-interior .waiver{ background:var(--velo); border:1px solid var(--velo-borde); border-radius:var(--r-rect); backdrop-filter:blur(18px) saturate(0); -webkit-backdrop-filter:blur(18px) saturate(0); box-shadow:0 20px 60px -30px rgba(14,13,11,.35); color:var(--texto); /* EL RELLENO, QUE FALTABA. ---------------------------------------------------------- A estos bloques se les dio aspecto de tarjeta —fondo, filo, esquina redonda y sombra— pero no el relleno que una tarjeta necesita. El resultado: el título "Tu perfil" nacía pegado al borde izquierdo, sin un milímetro de aire, y el texto parecía desencajado sin que se supiera por qué. Una caja con filo y sin relleno no se lee como una tarjeta: se lee como un error. El aire de dentro es lo que convierte un rectángulo dibujado en algo que contiene. */ padding:clamp(1.2rem, 3vw, 2.2rem); } /* Los campos del formulario NO se hacen de vidrio: un campo tiene que decir "aquí se escribe", y para eso necesita un fondo firme que lo separe de lo que hay detrás. Lo que sí toman es el color del texto, que si no se quedaría fijo. */ body.es-interior .form input, body.es-interior .form textarea{ background:rgba(255,255,255,.86); border-color:var(--velo-borde); color:var(--texto); } /* Las horas del calendario: pastillas con el borde del tema, para que la seleccionada se distinga por relleno y no por color. */ .es-interior .rsv__hora{ border-color:var(--velo-borde); color:var(--texto); } .es-interior .rsv__dia{ border-top-color:var(--velo-borde) } /* Los titulares de estas cuatro, al mismo cuerpo que los demás. Sus

venían de .page__section, que es medio palmo más pequeño: al lado del titular grande se leían como notas al pie. */ body.es-interior .perfil__paso > h2, body.es-interior .reg__paso > h2{ font-family:var(--sans); font-size:clamp(1.15rem, 1.9vw, 1.5rem); font-weight:700; letter-spacing:-.02em; color:var(--texto); } /* Método pintaba su propio hueso (--paper) en tres capas, así que por debajo se veía 243 donde el pie vale 252: nueve tonos, el doble de costura que las demás. Se le quitan las tres y manda la capa del fondo, igual que en el resto. */ /* "background-color" no bastaba: lo que pintaba era una background-IMAGE. Es el degradado que styles.css le puso a estas páginas cuando el tratamiento claro se hacía ahí; ahora esa capa la pone .fondo, y el degradado de debajo solo servía para ensuciar el blanco justo antes del pie (243 contra 252, el doble de costura que las demás). Con "background:none" se va el color Y la imagen. Poner solo el color es de los arreglos que parecen hechos y no lo están. */ body.es-interior .method-hero, body.es-interior .method-hero__stage, body.es-interior .method-hero__wrap{ background:none } body.es-interior .method-hero__wrap{ background:var(--velo); border:1px solid var(--velo-borde); } /* El aviso del formulario de contacto: lo escribe contacto-em.js cuando el envío falla. Sin él, un fallo era silencio. */ /* ========================================================== LA PÁGINA DE GRUPOS ---------------------------------------------------------- Cuatro datos antes del formulario. Van en lista y no en un párrafo porque son cuatro respuestas a cuatro preguntas distintas —cuántos, cuánto dura, qué llevo, qué cuesta— y en prosa hay que leerlas todas para encontrar la tuya. ========================================================== */ .grupo__datos{ list-style:none; margin:clamp(1.4rem, 3vw, 2rem) 0 clamp(1.6rem, 3.5vw, 2.4rem); padding:0; display:flex; flex-direction:column; gap:.75rem; max-width:640px; } .grupo__datos li{ position:relative; padding-left:1.5rem; font-family:var(--sans); font-size:1rem; line-height:1.5; color:var(--ink-soft, #4a4a4a); } /* El punto, dibujado y no un carácter: un "·" cambia de tamaño y de posición con cada tipografía instalada. */ .grupo__datos li::before{ content:""; position:absolute; left:.25rem; top:.62em; width:6px; height:6px; border-radius:50%; background:var(--ink, #0e0d0b); } .grupo__datos b{ color:var(--ink, #0e0d0b); font-weight:700 } /* La parte blanda de una etiqueta: lo que explica, al lado de lo que pregunta. En minúscula, sin interletrado y en gris, para que se lea como una aclaración y no como un segundo campo. */ .form__suave{ font-weight:400; font-size:.92em; letter-spacing:0; text-transform:none; color:var(--mute); } /* EL BOTÓN DE "PROPONED VUESTRA ZONA". ---------------------------------------------------------- Una pastilla con filo y sin relleno. No puede parecerse al botón de ENVIAR —que es macizo y en mayúsculas— porque no compiten: uno abre un campo y el otro manda el formulario. Si los dos pesaran igual, habría que pararse a decidir cuál es cuál. Va pegado a la lista de datos, no al formulario, porque contesta a la línea del Retiro que tiene justo encima. */ .grupo__otra{ display:inline-flex; align-items:center; gap:.5rem; margin:-.6rem 0 clamp(1.6rem, 3.5vw, 2.4rem); padding:.7rem 1.1rem; border:1px solid var(--line); border-radius:999px; background:var(--white); font-family:var(--sans); font-size:.86rem; font-weight:600; letter-spacing:-.01em; color:var(--ink); cursor:pointer; -webkit-tap-highlight-color:transparent; /* En un móvil estrecho la frase no cabe en una línea: se parte dentro de la pastilla en vez de desbordarla. */ text-align:left; transition:border-color .2s var(--ease), background .2s var(--ease), transform .13s var(--ease); } .grupo__otra svg{ flex:0 0 auto; opacity:.6 } .grupo__otra:active{ transform:scale(.98) } @media (hover:hover) and (pointer:fine){ .grupo__otra:hover{ border-color:var(--ink); background:var(--paper, #faf9f6) } .grupo__otra:hover svg{ opacity:1 } } .grupo__otra:focus-visible{ outline:2px solid var(--ink); outline-offset:2px } @media (prefers-reduced-motion: reduce){ .grupo__otra{ transition:none } .grupo__otra:active{ transform:none } } /* LOS DESPLEGABLES DEL FORMULARIO. ---------------------------------------------------------- El CSS del formulario vestía "input" y "textarea" y nada más, porque hasta ahora no había ningún desplegable en toda la web. Sin esto, los dos de esta página salen con el estilo de fábrica del sistema —gris, cuadrado, otra letra— al lado de campos redondeados. Se ven como un trozo pegado de otra página. "appearance:none" quita el dibujo del sistema, y la flecha se repone como imagen de fondo para que siga habiendo una: sin ella, un desplegable no parece un desplegable. */ .form select{ width:100%; padding:1.15rem 3rem 1.15rem 1.4rem; /* sitio a la derecha para la flecha */ border-radius:999px; border:1px solid var(--line); background-color:var(--white); font-family:var(--sans); font-size:1rem; color:var(--ink); cursor:pointer; -webkit-appearance:none; appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%230e0d0b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 1.4rem center; transition:border-color 240ms var(--ease); } .form select:focus{ outline:none; border-color:var(--ink) } .form select:focus-visible{ outline:2px solid var(--ink); outline-offset:2px } /* Mientras no se ha elegido nada, en gris: se distingue de un campo ya contestado de un vistazo. */ .form select:invalid{ color:var(--mute) } .form__aviso{ margin:.2rem 0 0; font-size:.92rem; line-height:1.5; color:var(--texto-2); } .form__aviso.es-error{ color:var(--texto); font-weight:600 } /* ========================================================== LAS LISTAS DE LAS RESPUESTAS, CON GUION ---------------------------------------------------------- Eran viñetas redondas con la sangría por defecto del navegador. Dos problemas: el punto es un signo que no está en ninguna otra parte de la web, y la sangría automática no se alinea con nada —el texto de la respuesta empieza en un sitio y la lista en otro, tres píxeles más allá, lo justo para que se note sin que se sepa por qué. El guion es el signo de esta web: es el que separa "Activación — respiración y movilidad" dentro de las propias respuestas. Y con la sangría escrita a mano, el texto de la lista cae exactamente bajo el del párrafo. ========================================================== */ body.es-interior .faq__lista{ list-style:none; margin:.8rem 0 0; padding:0; display:flex; flex-direction:column; gap:.45rem; } body.es-interior .faq__lista li{ /* El "list-style:none" va también AQUÍ y no solo en el