/* =========================================================================
Clínica Rivero · hoja principal
Todo el CSS salvo el crítico, que va en línea en el porque pinta la
primera pantalla. Sin dependencias, sin preprocesador, sin paso de compilado.
Idea única de la página: EL ARCO. La arcada dental y el arco plantar son la
misma curva. El héroe la enseña, el divisor la repite, y en la banda oscura
el visitante la cierra con sus propias manos.
========================================================================= */
/* ---------- 1 · Tipografías autoalojadas -------------------------------- */
@font-face{font-family:'Fraunces';font-style:normal;font-weight:300 700;font-display:swap;src:url('../fonts/fraunces-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:300 700;font-display:swap;src:url('../fonts/fraunces-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:300 700;font-display:swap;src:url('../fonts/fraunces-italic-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:300 700;font-display:swap;src:url('../fonts/fraunces-italic-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url('../fonts/instrument-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url('../fonts/instrument-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* ---------- 2 · Fichas del sistema que no entran en el CSS crítico ------ */
:root{
--pad-normal:clamp(96px,11vw,148px);
--pad-open:clamp(140px,17vw,232px);
--max:1180px;
--linea:rgba(30,42,37,.13);
--linea-fuerte:rgba(30,42,37,.3);
}
/* ---------- 2 bis · Base común a TODAS las páginas ----------------------
La portada lleva todo esto en línea, en su CSS crítico, porque pinta la
primera pantalla. Las páginas de disciplina no tienen héroe cinemático y
no lo necesitan en línea, así que la hoja tiene que bastarse sola: fichas
del sistema, reinicio, elementos base, barra y botones. Es la MISMA
declaración, copiada carácter a carácter; si se toca una, se tocan las dos.
-------------------------------------------------------------------- */
:root{
/* Paleta de la marca. No se deriva del metraje: el metraje se generó para
encajar aquí. El lienzo nunca es blanco puro. */
--canvas:#F8F6F1; --panel:#FCFBF8; --charcoal:#1E2A25; --slate:#3D4F47;
--warm-gray:#5A6B63; --mint:#8BBFA0; --mint-light:#C4DFCF; --mint-dark:#46785A;
--mint-deep:#3E6B52; --gold:#D4A853; --gold-ink:#795C1E; --white:#fff;
/* El escenario del héroe es claro, con un punto más de calidez que la página. */
--cine-fondo:#EFEAE1; --cine-texto:#1E2A25; --cine-sombra:#3D4F47;
--mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
--gutter:clamp(20px,5vw,56px);
--fs-mega:clamp(3.4rem,8.6vw,6.6rem); --fs-display:clamp(2.1rem,5vw,3.6rem);
--fs-h3:clamp(1.15rem,1.6vw,1.4rem); --fs-lead:clamp(1.02rem,1.3vw,1.16rem);
--fs-caption:.7rem; --fs-small:.875rem;
--sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px;
--r-xs:6px; --r-md:10px; --r-btn:9px;
--pad-dense:clamp(72px,8vw,104px);
--ease-out:cubic-bezier(.22,1,.36,1); --ease-soft:cubic-bezier(.4,.14,.3,1);
--dur-mid:340ms; --dur-slow:620ms;
/* Héroe claro: el texto es tinta oscura y la sombra se convierte en halo claro.
Tres capas: filo, brillo medio y caída ancha, todas del color del lienzo. */
--tshadow:0 1px 2px rgba(248,246,241,.95),0 2px 10px rgba(248,246,241,.86),0 8px 34px rgba(248,246,241,.76);
}
*,*::before,*::after{box-sizing:border-box}*{margin:0;padding:0}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:84px;-webkit-text-size-adjust:100%;overflow-x:hidden;overflow-x:clip}
body{font-family:'Instrument Sans','Instrument Fallback',system-ui,sans-serif;font-size:1rem;line-height:1.62;color:var(--charcoal);background:var(--canvas);-webkit-font-smoothing:antialiased;overflow-x:hidden;overflow-x:clip}
h1,h2,h3,h4{font-family:'Fraunces','Fraunces Fallback',Georgia,serif;font-weight:450;letter-spacing:-.015em;line-height:1.1;text-wrap:balance}
img,svg{display:block;max-width:100%}img{height:auto}a{color:inherit}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:50%;top:0;transform:translate(-50%,-140%);z-index:1400;background:var(--charcoal);color:var(--canvas);padding:14px 26px;border-radius:0 0 8px 8px;font-weight:600;text-decoration:none;transition:transform .18s var(--ease-out)}
.skip-link:focus{transform:translate(-50%,0)}
:focus-visible{outline:3px solid var(--mint-deep);outline-offset:3px;border-radius:4px}
/* Barra de navegación */
/* Barra limpia a todo el ancho, no una píldora flotante: la píldora era el
gesto de plantilla más visible de la página. Transparente arriba, crema en
cuanto se hace scroll. */
.navbar{position:fixed;top:0;left:0;right:0;z-index:1000;height:68px;padding-inline:max(var(--gutter),calc((100% - 1180px)/2));display:flex;align-items:center;justify-content:space-between;background:transparent;border-bottom:1px solid transparent}
.nav-logo{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--charcoal)}
.nav-logo img{height:40px;width:40px;object-fit:contain}
.nav-logo-text{font-family:'Fraunces','Fraunces Fallback',Georgia,serif;font-size:1.12rem;font-weight:550;letter-spacing:-.01em}
.nav-links{display:flex;gap:24px;align-items:center;list-style:none}
.nav-links a{text-decoration:none;color:var(--slate);font-size:.88rem;font-weight:500}
.nav-cta{background:var(--charcoal);color:var(--canvas)!important;padding:11px 20px;border-radius:var(--r-btn);font-weight:600!important}
.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none;padding:12px;border-radius:8px}
.hamburger span{width:22px;height:2px;border-radius:2px;background:var(--charcoal)}
/* Botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:15px 28px;border:1px solid transparent;border-radius:var(--r-btn);font-weight:600;font-size:.95rem;text-decoration:none;cursor:pointer;font-family:inherit}
.btn-primary{background:var(--charcoal);color:var(--canvas)}
.btn-wa{background:#198644;color:#fff}
.btn-ghost{background:transparent;color:var(--charcoal);border-color:rgba(30,42,37,.16)}
@media(max-width:900px){.hamburger{display:flex}.nav-links{position:fixed;inset:0;flex-direction:column;justify-content:center;gap:var(--sp-6);background:var(--canvas);transform:translateX(105%);padding:96px var(--gutter);visibility:hidden}.nav-links.abierto{transform:none;visibility:visible}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* Un solo entorno: capa fija con una deriva de 96 s, para que bajar por la
página se sienta como moverse por un sitio y no como pasar bloques. */
.entorno{position:fixed;inset:0;z-index:-1;pointer-events:none;
background:
radial-gradient(ellipse 60% 50% at 18% 12%,rgba(196,223,207,.28),transparent 62%),
radial-gradient(ellipse 50% 44% at 86% 74%,rgba(212,168,83,.14),transparent 64%),
var(--canvas);
animation:deriva 96s var(--ease-soft) infinite;animation-delay:-31s}
@keyframes deriva{
0%,100%{transform:translate3d(0,0,0) scale(1.04)}
33%{transform:translate3d(-1.6%,1.4%,0) scale(1.08)}
66%{transform:translate3d(1.4%,-1.2%,0) scale(1.05)}
}
.container{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.pad-dense{padding-block:var(--pad-dense)}
.pad-normal{padding-block:var(--pad-normal)}
.pad-open{padding-block:var(--pad-open)}
section{position:relative}
h2{font-size:var(--fs-display)}
h3{font-size:var(--fs-h3)}
p{text-wrap:pretty}
.caption{font-size:var(--fs-caption);letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--warm-gray);font-family:var(--mono)}
.caption--mint{color:var(--mint)}
.accent-i{font-style:italic;font-weight:400;color:var(--mint-dark)}
.measure-narrow{max-width:44ch;color:var(--warm-gray)}
.mono{font-family:var(--mono)}
.link{color:var(--mint-deep);font-weight:600;text-decoration:none;border-bottom:1px solid rgba(62,107,82,.35);padding-bottom:1px;transition:border-color var(--dur-mid) var(--ease-out),color var(--dur-mid) var(--ease-out)}
.link:hover{color:var(--charcoal);border-color:var(--charcoal)}
.aviso-nojs{background:var(--charcoal);color:var(--canvas);padding:18px var(--gutter);text-align:center;font-size:.9rem;line-height:1.6}
.aviso-nojs a{color:var(--mint-light)}
/* ---------- 3 · Sistema de movimiento ----------------------------------- */
/* Nada aparece de golpe. Las entradas son coreografía: el contenedor recibe
.in y los hijos llegan escalonados. Cuando la entrada termina se RETIRAN
los retardos con !important, o los hover de los hermanos posteriores
arrastran el escalonado para siempre. */
.reveal{opacity:0;transform:translateY(24px);
transition:opacity var(--dur-slow) var(--ease-out),transform var(--dur-slow) var(--ease-out);
transition-delay:var(--d,0s)}
.reveal.in{opacity:1;transform:none}
.reveal.listo{transition-delay:0s!important}
.btn{transition:transform var(--dur-mid) var(--ease-out),background var(--dur-mid) var(--ease-out),border-color var(--dur-mid) var(--ease-out),box-shadow var(--dur-mid) var(--ease-out)}
.btn:hover{transform:translateY(-2px)}
.btn-primary:hover{background:#2A3A33}
.btn-wa:hover{background:#15753a}
.btn-ghost:hover{border-color:var(--linea-fuerte);background:rgba(255,255,255,.5)}
.btn-light{background:var(--canvas);color:var(--charcoal);margin-top:var(--sp-5)}
.btn-light:hover{background:#fff}
.btn-ghost--oscuro{color:var(--canvas);border-color:rgba(248,246,241,.34)}
.btn-ghost--oscuro:hover{border-color:rgba(248,246,241,.7);background:rgba(248,246,241,.08)}
@media(pointer:coarse){.btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}}
.nav-links a{transition:color var(--dur-mid) var(--ease-out)}
.nav-links a:not(.nav-cta):hover{color:var(--mint-deep)}
.navbar{transition:background var(--dur-slow) var(--ease-out),border-color var(--dur-slow) var(--ease-out)}
/* Arriba la barra es transparente y su texto cae directamente sobre el
metraje, que allí baja a 4,98:1. Un velo suave por debajo lo sube sin
devolver la caja opaca, y se retira en cuanto la barra se vuelve crema. */
.navbar::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
background:linear-gradient(180deg,rgba(248,246,241,.82) 0%,rgba(248,246,241,.42) 58%,rgba(248,246,241,0) 100%);
transition:opacity var(--dur-slow) var(--ease-out)}
.navbar.pegada::before{opacity:0}
/* En cuanto se hace scroll la barra se vuelve crema casi opaca: sobre el
telón oscuro del final el cristal translúcido bajaba de 7,10:1 a 4,93:1. */
.navbar.pegada{background:rgba(248,246,241,.94);border-bottom-color:rgba(30,42,37,.1);
backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4)}
/* ---------- 4 · Héroe cinemático: partes que no van en el CSS crítico ---- */
/* ORDEN DE PINTADO, y no es obvio. El velo de cada banda es un ::before en
position:absolute, así que pinta en la capa de los elementos posicionados,
por encima del contenido estático. En las bandas 1 y 2 no se notaba porque
su texto lleva opacity animada, y eso crea contexto de apilamiento y lo
sube a esa misma capa, más tarde en el DOM. El rótulo y la guía de la banda
3 no llevan opacity, así que quedaban DEBAJO de su propio velo: invisibles.
Se deja explícito para las tres y deja de depender de un accidente. */
.cine-banda::before{z-index:0}
.cine-banda > *{position:relative;z-index:1}
/* La apertura del logo, en la hoja completa por si el CSS crítico cambia. */
.cine-intro{display:none;position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(ellipse 58% 52% at 50% 44%,rgba(248,246,241,.88) 0%,rgba(248,246,241,.70) 38%,rgba(248,246,241,.36) 66%,rgba(248,246,241,.09) 86%,rgba(248,246,241,0) 100%)}
.cine-logo{position:absolute;left:50%;top:46%;z-index:3;transform:translate(-50%,-50%);
width:min(72vw,300px);display:none;justify-items:center;will-change:transform,opacity}
/* El logo va SOBRE la película, no sobre un panel aparte. El velo general
aclara el centro del plano, y este halo local aclara solo lo que hay
detrás del texto, que es donde el contraste se jugaba: el pie pasaba de
3,97:1 a 4,76:1 sin tocar la marca ni oscurecer la foto. */
.cine-logo::before{content:'';position:absolute;z-index:-1;inset:-46% -82%;pointer-events:none;background:radial-gradient(closest-side at 50% 50%,rgba(250,249,245,.92) 0%,rgba(250,249,245,.76) 40%,rgba(250,249,245,.40) 68%,rgba(250,249,245,.12) 86%,rgba(250,249,245,0) 100%)}
.cine-logo img{width:min(100%,250px);height:auto}
.cine-logo-pie{font-family:var(--mono);font-size:var(--fs-caption);letter-spacing:.16em;
text-transform:uppercase;color:var(--mint-deep);margin-top:var(--sp-4);text-align:center;line-height:1.7}
/* La flecha respira despacio: es la única pista de que hay que bajar. */
.cine-logo-cue{display:block;width:22px;height:22px;color:var(--mint-dark);opacity:.5;
margin-top:var(--sp-5);animation:baja 2.8s var(--ease-soft) infinite;animation-delay:-.9s}
@keyframes baja{0%,100%{transform:translateY(0);opacity:.38}50%{transform:translateY(6px);opacity:.72}}
/* Con movimiento reducido no hay disolución: el logo se queda donde está y la
película no se le echa encima. */
@media(prefers-reduced-motion:reduce){.cine-intro,.cine-logo{opacity:1!important;transform:translate(-50%,-50%)!important}}
/* A 11 px el peso 400 leía flojo aunque el contraste pasara: 600 lo asienta. */
.cine-rotulo{font-weight:600}
/* El anillo de carga se retira cuando el vídeo ya está. Un círculo completo
clavado en la esquina para siempre es peor que no tener anillo. */
.cine-anillo{transition:opacity .5s var(--ease-out)}
.cine.video-listo .cine-anillo{opacity:0;pointer-events:none}
/* Y si el vídeo no llega, el elemento muerto se retira sobre el póster. */
.cine.sin-video .cine-video{display:none}
/* Banda 1 · tres llegadas en una banda: titular, subtítulo, botones. */
.cine-subir .cine-w{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.6,1);
opacity:var(--kc);transform:translateY(calc((1 - var(--kc)) * 30px))}
.cine-banda--abre .cine-rotulo{opacity:clamp(0,var(--k,0)*3.4,1)}
.cine-banda--abre .cine-sub{--ks:clamp(0,(var(--k,0) - .62)*4,1);
opacity:var(--ks);transform:translateY(calc((1 - var(--ks)) * 16px))}
.cine-banda--abre .cine-acciones{--kb:clamp(0,(var(--k,0) - .76)*5,1);
opacity:var(--kb);transform:translateY(calc((1 - var(--kb)) * 16px))}
/* El elemento vivo del héroe. Sobre metraje claro las partículas leerían como
suciedad, así que la vida es luz: un halo cálido que respira en ciclo largo
y con retardo negativo, para que ya esté a media respiración al pintar. */
.cine-halo{animation:respira-halo 11s var(--ease-soft) infinite;animation-delay:-3.6s}
@keyframes respira-halo{0%,100%{opacity:.55}50%{opacity:1}}
/* La portada del héroe estático: el fotograma final a su proporción real,
nunca recortado a vertical, porque el recorte le corta las dos puntas al
arco. En escritorio es display:none, así que el navegador ni la descarga. */
.cine-portada{display:none}
/* Cuando el vídeo no llega, el anillo se convierte en una flecha honesta. */
.cine-cue{position:absolute;right:var(--gutter);bottom:calc(var(--gutter) + 8px);
width:34px;height:34px;color:var(--mint-dark);opacity:.85;
animation:cue 2.8s var(--ease-soft) infinite}
@keyframes cue{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(6px);opacity:.95}}
/* ---------- 5 · La elección: dos mundos a sangre completa ----------------
El arco se posa y la pantalla se parte en dos. A la izquierda el diente, a
la derecha la zapatilla, fotografiados en el mismo estudio que la película,
así que el fondo de la foto ES el fondo de la pantalla: sin recuadros, sin
recortes, sin esquinas que delaten un montaje.
Las fotos NO se oscurecen. Oscurecer una foto buena para poder escribir
encima es estropear las dos cosas: el texto vive en su propia placa clara y
la imagen se queda como se generó. Y nada de verdes encendidos: el acento
es el verde oscuro de la marca sobre crema, que es donde se lee. */
.cine-banda--elegir{padding:0;display:block}
.elegir-mitades{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr}
.mitad{position:relative;overflow:hidden;display:grid;align-content:end;
text-decoration:none;color:var(--charcoal);isolation:isolate}
.mitad + .mitad{box-shadow:inset 1px 0 0 rgba(30,42,37,.12)}
.mitad-foto{position:absolute;inset:0;z-index:0}
.mitad-foto img{width:100%;height:100%;object-fit:cover;
transform:scale(1.03);transition:transform 1.2s var(--ease-out)}
.mitad:hover .mitad-foto img,.mitad:focus-visible .mitad-foto img{transform:scale(1.06)}
/* En reposo las dos están a plena luz: nada de velo permanente sobre la foto,
que eso ya se probó y afeaba. Un aclarado muy leve abajo, para asentar la
placa, y nada más. */
.mitad-velo{position:absolute;inset:0;z-index:1;pointer-events:none;
transition:opacity var(--dur-slow) var(--ease-out);
background:linear-gradient(180deg,rgba(248,246,241,0) 52%,rgba(248,246,241,.34) 100%)}
.mitad-pie{display:none}
.mitad-foto img{filter:saturate(.92);
transition:transform 1.2s var(--ease-out),filter var(--dur-slow) var(--ease-out)}
/* EL GESTO. Al señalar una mitad no crece: se apaga la OTRA. Es un contraste
que solo existe mientras el puntero está encima y se deshace al salir, no
un velo pegado a la foto. Se apaga la foto y se recoge un punto la placa,
nunca hasta el punto de no poder leerla: la de la mitad apagada mantiene
4,82:1 en su peor línea, medida sobre la página compuesta.
No se ensancha la mitad señalada, que era lo que hacía antes. Ensanchar
mueve las dos placas de sitio mientras estás apuntando a un botón, y eso
se paga; apagar la otra dice lo mismo sin mover nada.
Si el navegador no entiende :has(), las dos se quedan a plena luz y no pasa
nada: la elección se sigue pudiendo hacer igual. */
.elegir-mitades:has(.mitad:hover) .mitad:not(:hover) .mitad-foto img,
.elegir-mitades:has(.mitad:focus-visible) .mitad:not(:focus-visible) .mitad-foto img{
filter:saturate(.3) brightness(.52)}
.elegir-mitades:has(.mitad:hover) .mitad:not(:hover) .mitad-velo,
.elegir-mitades:has(.mitad:focus-visible) .mitad:not(:focus-visible) .mitad-velo{opacity:0}
/* OJO con la placa de la mitad apagada. El primer intento le bajaba la
opacidad al elemento entero: al ser translúcida, la foto ya oscurecida se
colaba por detrás y el texto caía por debajo del suelo. Se recoge sin
volverse transparente: fondo opaco, un punto menos de blanco y sin sombra.
El texto conserva su contraste intacto. */
.elegir-mitades:has(.mitad:hover) .mitad:not(:hover) .mitad-texto,
.elegir-mitades:has(.mitad:focus-visible) .mitad:not(:focus-visible) .mitad-texto{
background:#EFEDE6;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;
border-color:rgba(255,255,255,.4)}
.mitad:hover .mitad-foto img,.mitad:focus-visible .mitad-foto img{filter:saturate(1) brightness(1.02)}
/* La placa: crema translúcida con desenfoque y tinta oscura. Se lee siempre,
con la foto clara o con la foto a plena luz, y no le quita nada a la
imagen. */
.mitad-texto{position:relative;z-index:3;display:grid;justify-items:center;gap:3px;
text-align:center;justify-self:center;width:min(86%,400px);
margin-bottom:clamp(34px,6vh,64px);
padding:clamp(20px,2.6vh,28px) clamp(20px,2.6vw,30px) clamp(18px,2.4vh,24px);
border-radius:10px;background:rgba(252,251,248,.9);
border:1px solid rgba(255,255,255,.7);
box-shadow:0 2px 6px rgba(30,42,37,.1),0 18px 44px rgba(30,42,37,.16);
backdrop-filter:blur(16px) saturate(1.1);-webkit-backdrop-filter:blur(16px) saturate(1.1);
transition:transform var(--dur-slow) var(--ease-out),box-shadow var(--dur-slow) var(--ease-out),
background var(--dur-slow) var(--ease-out),opacity var(--dur-slow) var(--ease-out)}
.mitad:hover .mitad-texto,.mitad:focus-visible .mitad-texto{transform:translateY(-6px);
background:rgba(255,255,255,.95);box-shadow:0 3px 8px rgba(30,42,37,.12),0 26px 60px rgba(30,42,37,.2)}
.mitad-indice{font-family:var(--mono);font-size:var(--fs-caption);letter-spacing:.16em;color:var(--warm-gray)}
.mitad .caption{color:var(--mint-deep)}
.mitad h3{font-size:clamp(1.3rem,2.2vw,1.85rem);margin-top:4px;color:var(--charcoal)}
.mitad-quien{font-size:var(--fs-small);color:var(--warm-gray)}
.mitad-quien strong{color:var(--slate)}
.mitad-cta{display:inline-flex;align-items:center;gap:9px;margin-top:var(--sp-4);
font-weight:600;font-size:.92rem;color:var(--charcoal);
padding:11px 22px;border:1px solid rgba(30,42,37,.28);border-radius:6px;
transition:background var(--dur-mid) var(--ease-out),border-color var(--dur-mid) var(--ease-out),
color var(--dur-mid) var(--ease-out)}
.mitad:hover .mitad-cta,.mitad:focus-visible .mitad-cta{background:var(--charcoal);
border-color:var(--charcoal);color:var(--canvas)}
.puerta-flecha{width:16px;height:16px;transition:transform var(--dur-mid) var(--ease-out)}
.mitad:hover .puerta-flecha{transform:translateX(5px)}
/* El retrato real del hermano, encima de su placa, al señalar la mitad. */
.mitad-cara{width:70px;height:70px;border-radius:50%;overflow:hidden;
border:3px solid #fff;box-shadow:0 10px 24px rgba(30,42,37,.28);
margin:0 0 var(--sp-3);
transform:translateY(12px) scale(.6);opacity:0;
transition:transform var(--dur-slow) var(--ease-out),opacity var(--dur-mid) var(--ease-out)}
.mitad-cara img{width:100%;height:100%;object-fit:cover}
.mitad:hover .mitad-cara,.mitad:focus-visible .mitad-cara{opacity:1;transform:none}
/* El encabezado flota sobre la costura, en una placa igual que las de abajo:
crema y tinta, no un recuadro oscuro sobre una foto clara. */
.elegir-encabezado{position:absolute;left:50%;transform:translateX(-50%);
top:clamp(96px,13vh,138px);z-index:4;display:grid;justify-items:center;text-align:center;
gap:6px;width:max-content;max-width:calc(100% - var(--gutter)*2);
padding:clamp(14px,1.8vh,20px) clamp(22px,3vw,32px);border-radius:10px;
background:rgba(252,251,248,.88);border:1px solid rgba(255,255,255,.7);
box-shadow:0 2px 6px rgba(30,42,37,.08),0 16px 40px rgba(30,42,37,.14);
backdrop-filter:blur(16px) saturate(1.1);-webkit-backdrop-filter:blur(16px) saturate(1.1);
pointer-events:none}
.cine-rotulo--elegir{color:var(--mint-deep);background:none;border:0;padding:0;margin:0}
.cine-elegir-guia{font-size:var(--fs-small);color:var(--warm-gray);max-width:42ch;margin:0;
text-shadow:none}
/* ---------- 6 · Servicios · lista editorial numerada --------------------- */
/* Sin cajas, sin sombras, sin rejilla. La cifra manda: es la mayor de la
página. El índice lo lleva un contador CSS, así que al filtrar se
renumera solo desde 01 sin tocar el HTML. */
.servicios-cabecera{display:grid;grid-template-columns:minmax(0,1fr);
gap:var(--sp-6);align-items:end;margin-bottom:var(--sp-7)}
.servicios-cabecera h2{margin:0 0 var(--sp-4)}
/* Las dos disciplinas. Eran una lista de doce con tres pestañas encima:
quince opciones compitiendo y ninguna decisión tomada. Ahora la sección
hace la pregunta que el visitante ya tenía —dientes o pies— y cada grupo
se presenta con su objeto, su persona y su puerta a la página entera.
Las portadas se alternan de lado: dos bloques idénticos uno encima de
otro serían dos fichas, y las fichas son el contenedor perezoso. */
.disciplina + .disciplina{margin-top:clamp(64px,8vw,120px)}
.disciplina-portada{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1fr);
gap:clamp(24px,4vw,56px);align-items:center;margin-bottom:var(--sp-7)}
.disciplina--invertida .disciplina-portada{grid-template-columns:minmax(0,1fr) minmax(0,.82fr)}
.disciplina--invertida .disciplina-foto{order:2}
.disciplina-foto{margin:0;border-radius:var(--r-md);overflow:hidden;background:var(--cine-fondo)}
.disciplina-foto img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover}
.disciplina-nombre{font-family:'Fraunces','Fraunces Fallback',Georgia,serif;
font-size:clamp(1.8rem,3.2vw,2.6rem);font-weight:400;line-height:1.1;letter-spacing:-.015em}
.disciplina-desc{margin-top:var(--sp-4);max-width:42ch;color:var(--warm-gray);font-size:var(--fs-lead)}
.disciplina-enlace{margin-top:var(--sp-5);display:inline-flex;align-items:center;gap:8px}
.disciplina-enlace svg{width:16px;height:16px;flex:none;
transition:transform var(--dur-mid) var(--ease-out)}
.disciplina-enlace:hover svg{transform:translateX(4px)}
.servicios-lista{}
/* La otra consulta. Un solo enlace ancho entre dos filetes: ni ficha ni
banner, solo una pregunta y la puerta de al lado. */
.cruce{padding:clamp(40px,5vw,64px) 0}
.cruce-enlace{display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,1fr);
gap:clamp(20px,3vw,44px);align-items:center;text-decoration:none;color:inherit;
border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);
padding:clamp(24px,3vw,40px) 0}
.cruce-foto{margin:0;border-radius:var(--r-md);overflow:hidden;background:var(--cine-fondo)}
.cruce-foto img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
transition:transform var(--dur-slow) var(--ease-out)}
.cruce-enlace:hover .cruce-foto img{transform:scale(1.03)}
.cruce-texto h2{font-size:clamp(1.5rem,2.6vw,2.1rem)}
.cruce-texto p{margin-top:var(--sp-3);color:var(--warm-gray);max-width:46ch}
.cruce-cta{display:inline-flex;align-items:center;gap:8px;margin-top:var(--sp-4);
color:var(--mint-deep);font-weight:600}
.cruce-cta svg{width:16px;height:16px;flex:none;
transition:transform var(--dur-mid) var(--ease-out)}
.cruce-enlace:hover .cruce-cta{text-decoration:underline;text-underline-offset:4px}
.cruce-enlace:hover .cruce-cta svg{transform:translateX(4px)}
@media(prefers-reduced-motion:reduce){
.cruce-foto img,.cruce-cta svg,.disciplina-enlace svg{transition:none}
.cruce-enlace:hover .cruce-foto img{transform:none}
}
.servicios-lista:focus-visible{outline-offset:8px}
.servicio{position:relative;display:grid;
grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);
gap:var(--sp-4) var(--sp-6);align-items:start;
padding:clamp(22px,2.8vw,32px) 0;border-top:1px solid var(--linea)}
.servicio:last-child{border-bottom:1px solid var(--linea)}
.servicio-nombre{font-size:clamp(1.25rem,2vw,1.6rem);font-weight:400}
.servicio-desc{max-width:44ch;color:var(--warm-gray);grid-column:2}
.servicio-cta{grid-column:2;justify-self:start;font-size:var(--fs-small)}
.servicio-foto{grid-column:2;justify-self:end;width:104px;border-radius:var(--r-md);
overflow:hidden;margin-top:calc(var(--sp-4) * -1)}
.servicio-foto img{width:100%;aspect-ratio:4/5;object-fit:cover}
/* Filas ilustradas. Solo seis de las doce las llevan: la imagen entra donde
explica algo que el texto no puede —cómo se ancla un implante, qué hace una
plantilla impresa en cada zona— y se queda fuera donde sería decoración.
Doce filas con foto serían doce fichas iguales. Las etiquetas son texto real
colocado sobre la imagen, no texto quemado en el pixel: se lee, se traduce y
no se deforma al escalar. */
.servicio--ilustrado{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
/* La figura es más alta que el texto. Con filas elásticas arriba Y abajo,
el sobrante se reparte por igual y el texto queda centrado contra la
imagen, en vez de dejar un agujero debajo del enlace. */
grid-template-rows:1fr auto auto auto 1fr;
gap:var(--sp-4) clamp(28px,4vw,56px);padding:clamp(30px,3.6vw,46px) 0}
.servicio--ilustrado .servicio-titulo{grid-column:1;grid-row:2}
.servicio--ilustrado .servicio-desc{grid-column:1;grid-row:3}
.servicio--ilustrado .servicio-cta{grid-column:1;grid-row:4}
/* La fila de prótesis ya traía el retrato real de la Dra. Julia. Una foto de
una persona de la casa vale más que cualquier render, así que se queda:
baja a la columna del texto en vez de pelearse con la ilustración. */
.servicio--ilustrado .servicio-foto{grid-column:1;grid-row:5;justify-self:start;align-self:start;margin-top:var(--sp-5)}
.servicio-ilustracion{grid-column:2;grid-row:1/span 5;align-self:center;margin:0}
/* `1/-1` no abarca filas implícitas: la figura se quedaba en la fila 1, la
estiraba a su altura y abría un hueco de 400 px entre el título y su
descripción. `span 3` cuenta las tres filas reales. */
/* Las marcas se sitúan en % del MARCO, no de la figura: si midieran contra la
figura, el pie de foto entraría en el cálculo y los números bailarían. */
.ilustracion-marco{position:relative;display:block}
.servicio-ilustracion img{display:block;width:100%;height:auto;aspect-ratio:4/3;
object-fit:cover;border-radius:var(--r-md);background:var(--cine-fondo)}
/* Marcas numeradas sobre la imagen y su leyenda debajo. Se probó con
etiquetas de texto flotando encima y se descartó: el texto largo se sale
del encuadre o tapa justo la pieza que señala, y aquí no hay forma de
comprobarlo a ojo. Un número cabe siempre, y la palabra vive abajo, donde
se puede traducir y donde la lee un lector de pantalla. */
.ilustracion-marca{position:absolute;left:var(--x);top:var(--y);
transform:translate(-50%,-50%);width:23px;height:23px;border-radius:50%;
display:grid;place-items:center;background:rgba(252,251,248,.95);
box-shadow:0 1px 5px rgba(30,42,37,.20);font-family:var(--mono);
font-size:.72rem;font-weight:600;color:var(--mint-deep);
font-variant-numeric:tabular-nums;pointer-events:none}
.ilustracion-pie{margin-top:var(--sp-4);display:flex;flex-wrap:wrap;
gap:8px var(--sp-5);font-size:var(--fs-small);color:var(--warm-gray)}
.ilustracion-pie span{display:inline-flex;align-items:center}
.ilustracion-pie b{display:inline-grid;place-items:center;width:19px;height:19px;
flex:none;border-radius:50%;background:var(--mint-deep);color:var(--canvas);
font-family:var(--mono);font-size:.72rem;font-weight:600;margin-right:8px}
.servicio[hidden]{display:none}
/* El arco, uso 1 de 3: divisor que se dibuja solo al entrar en pantalla. */
.arco-divisor{margin-block:clamp(28px,5vw,64px);color:var(--mint-dark);opacity:.55}
.arco-divisor svg{width:100%;height:clamp(52px,7vw,104px)}
.arco-trazo{stroke-dasharray:var(--largo,1400);stroke-dashoffset:var(--largo,1400);
transition:stroke-dashoffset 1.6s var(--ease-out)}
.dibujado .arco-trazo,.arco-trazo.dibujado{stroke-dashoffset:0}
.arco-filete{margin:var(--sp-5) 0 var(--sp-7);color:var(--mint-dark);opacity:.5}
.arco-filete svg{width:100%;height:34px}
/* ---------- 7 · Equipo · jerarquía asimétrica + fila escalonada ---------- */
.hermanos{display:grid;grid-template-columns:5fr 7fr;gap:clamp(28px,5vw,72px);
align-items:center;margin-bottom:var(--pad-dense)}
.hermanos-foto{position:relative;border-radius:var(--r-md);overflow:hidden}
.hermanos-foto img{width:100%;aspect-ratio:4/5;object-fit:cover}
/* El texto desborda el borde de la imagen: quiebra la simetría de rejilla. */
.hermanos-texto{margin-left:clamp(0px,-4vw,0px)}
.hermanos-texto h2{margin:var(--sp-3) 0 var(--sp-4)}
.hermanos-lede{color:var(--warm-gray);max-width:52ch;margin-bottom:var(--sp-6)}
.hermano-fichas{display:grid;gap:var(--sp-6)}
.hermano-ficha{padding-left:var(--sp-5);border-left:2px solid var(--mint-light)}
.hermano-ficha h3{font-size:1.3rem}
.hermano-ficha .rol{font-family:var(--mono);font-size:var(--fs-caption);letter-spacing:.16em;
text-transform:uppercase;color:var(--mint-deep);margin:4px 0 10px}
.hermano-ficha p{color:var(--warm-gray);max-width:62ch}
.hermano-ficha ul{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin-top:var(--sp-4)}
.hermano-ficha li{font-size:.78rem;font-weight:600;color:var(--mint-deep);
background:rgba(196,223,207,.36);padding:6px 13px;border-radius:var(--r-btn)}
.equipo-cabecera{max-width:56ch;margin-bottom:var(--sp-7)}
.equipo-cabecera p{color:var(--warm-gray);margin-top:var(--sp-4)}
.equipo-fila{display:grid;grid-template-columns:repeat(var(--cols,6),1fr);gap:var(--sp-5);align-items:start}
/* Fila escalonada: desplazamiento vertical alterno, para que la fila no lea
como una rejilla más. */
.equipo-fila .miembro:nth-child(even){margin-top:clamp(20px,3.4vw,48px)}
.equipo-fila .miembro:nth-child(2){--d:.06s}
.equipo-fila .miembro:nth-child(3){--d:.12s}
.equipo-fila .miembro:nth-child(4){--d:.18s}
.equipo-fila .miembro:nth-child(5){--d:.24s}
.equipo-fila .miembro:nth-child(6){--d:.30s}
.equipo-fila .miembro.listo{--d:0s!important}
.miembro-boton{display:block;width:100%;text-align:left;background:none;border:none;
padding:0;cursor:pointer;font:inherit;color:inherit}
.miembro-foto{display:block;border-radius:var(--r-md);overflow:hidden;margin-bottom:var(--sp-4)}
.miembro-foto img{width:100%;aspect-ratio:4/5;object-fit:cover;
transition:transform var(--dur-slow) var(--ease-out),filter var(--dur-slow) var(--ease-out);
filter:saturate(.92)}
.miembro-boton:hover .miembro-foto img{transform:scale(1.035);filter:saturate(1)}
.miembro h3{font-size:1.06rem}
.miembro .rol{display:block;font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;
text-transform:uppercase;color:var(--warm-gray);margin-top:4px}
.miembro-mas{display:inline-flex;align-items:center;gap:5px;margin-top:10px;
font-size:.76rem;font-weight:600;color:var(--mint-deep)}
.miembro-mas svg{width:13px;height:13px;transition:transform var(--dur-mid) var(--ease-out)}
.miembro-boton[aria-expanded="true"] .miembro-mas svg{transform:rotate(180deg)}
.miembro-cita{display:grid;grid-template-rows:0fr;
transition:grid-template-rows var(--dur-slow) var(--ease-out)}
.miembro-boton[aria-expanded="true"] + .miembro-cita{grid-template-rows:1fr}
.miembro-cita > div{overflow:hidden}
.miembro-cita blockquote{font-size:.86rem;line-height:1.62;color:var(--warm-gray);
padding-top:var(--sp-4);font-style:italic}
/* ---------- 8 · Por qué elegirnos · banda oscura + EL ARCO --------------- */
.banda-oscura{background:var(--charcoal);color:var(--canvas);overflow:hidden}
/* Ancla local: la curva de cumbre de la Caldera de Taburiente al 3 %. Un solo
uso en toda la página: dos motivos lineales compitiendo se anulan. */
.banda-oscura::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.03;
background:url('../img/contorno-lapalma.svg') center bottom / 160% auto no-repeat}
.banda-oscura h2{margin:var(--sp-3) 0 var(--sp-4);max-width:18ch}
.banda-lede{color:rgba(248,246,241,.72);max-width:38ch}
/* El momento interactivo. Uno solo en todo el sitio, y enacta la idea de la
marca: el visitante no lee que cada cosa vuelve a su sitio, lo hace. */
.arco-juego{position:relative;margin-top:clamp(44px,6vw,76px);display:grid}
.arco-lienzo{width:100%;height:clamp(64px,7.5vw,110px);color:var(--mint);margin-bottom:var(--sp-5)}
.arco-mando{display:grid;justify-items:center;gap:var(--sp-4);margin-top:clamp(34px,4.5vw,56px)}
.arco-guia{opacity:.2}
.arco-vivo{stroke-dasharray:var(--largo,1400);
stroke-dashoffset:calc(var(--largo,1400) * (1 - var(--p,0)));
filter:drop-shadow(0 0 10px rgba(139,191,160,.4))}
.arco-boton{position:relative;font:inherit;font-weight:600;font-size:.9rem;
color:var(--charcoal);background:none;border:none;cursor:pointer;
padding:14px 30px;border-radius:var(--r-btn);overflow:hidden;
min-height:44px;display:inline-flex;align-items:center;justify-content:center;
touch-action:none;-webkit-user-select:none;user-select:none}
.arco-boton-fondo{position:absolute;inset:0;background:var(--mint-light);
border-radius:inherit;z-index:0}
.arco-boton-fondo::after{content:"";position:absolute;inset:0;background:var(--mint);
border-radius:inherit;transform:scaleX(var(--p,0));transform-origin:left center}
.arco-boton-txt{position:relative;z-index:1}
.arco-boton:hover .arco-boton-fondo{background:#d5e9dd}
.arco-pista{font-size:var(--fs-small);color:rgba(248,246,241,.62);text-align:center}
.arco-juego.completo .arco-vivo{filter:drop-shadow(0 0 18px rgba(139,191,160,.72))}
.banda-linea{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
/* Cuatro afirmaciones sobre una sola línea base, separadas por filetes de 1px.
Sin cajas, sin iconos, sin chips. */
/* En reposo estaban al 34 %: 2,88:1 el titular y 2,06:1 el número, o sea
texto que no se puede leer hasta que alguien mantiene pulsado. La
atenuación se queda —el encendido sigue siendo el premio del gesto— pero
partiendo de un suelo que ya se lee. */
.banda-punto{padding:0 clamp(16px,2.4vw,32px);border-left:1px solid rgba(248,246,241,.16);
opacity:.68;transition:opacity var(--dur-slow) var(--ease-out),transform var(--dur-slow) var(--ease-out);
transform:translateY(8px)}
.banda-punto:first-child{border-left:0;padding-left:0}
/* En las páginas de disciplina los cuatro motivos se leen y ya: el juego
de mantener pulsado es el momento de la portada y repetirlo lo gasta. */
.banda-linea--fija .banda-punto{opacity:1;transform:none}
/* Y sin puntero fino tampoco hay juego: mantener pulsado en una pantalla
táctil compite con el scroll y con el menú contextual, así que en móvil y
tableta los cuatro motivos salen encendidos y el mando desaparece. */
@media(hover:none),(pointer:coarse){
.banda-punto{opacity:1;transform:none}
.arco-mando{display:none}
.arco-juego .arco-lienzo{opacity:.5}
}
.banda-punto.encendido{opacity:1;transform:none}
/* El número iba en --mint y, atenuado, se quedaba en 4,10:1. Con el tono
claro pasa a 5,67:1 atenuado y a 10,48:1 encendido. */
.banda-punto .caption{color:var(--mint-light);display:block;margin-bottom:10px}
.banda-punto h3{margin-bottom:8px}
.banda-punto p{font-size:var(--fs-small);color:rgba(248,246,241,.7)}
/* ---------- 9 · La clínica · raíl horizontal ----------------------------- */
.clinica-cabecera{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--sp-6);
align-items:end;margin-bottom:var(--sp-6)}
.clinica-cabecera h2{margin:var(--sp-3) 0 var(--sp-4)}
.clinica-cabecera p{color:var(--warm-gray);max-width:46ch}
.rail-controles{display:flex;gap:8px}
.rail-controles button{width:46px;height:46px;border-radius:50%;border:1px solid var(--linea-fuerte);
background:rgba(255,255,255,.6);color:var(--charcoal);display:grid;place-items:center;cursor:pointer;
transition:background var(--dur-mid) var(--ease-out),transform var(--dur-mid) var(--ease-out)}
.rail-controles button:hover{background:var(--charcoal);color:var(--canvas);transform:translateY(-2px)}
.nota-pendiente{display:flex;gap:var(--sp-4);align-items:flex-start;max-width:72ch;
padding:var(--sp-5);margin-bottom:var(--sp-6);border:1px dashed rgba(62,107,82,.4);
border-radius:var(--r-md);background:rgba(196,223,207,.18)}
.nota-pendiente svg{width:22px;height:22px;flex:0 0 22px;color:var(--mint-deep);margin-top:2px}
.nota-pendiente p{font-size:var(--fs-small);color:var(--slate)}
.nota-pendiente code{font-family:var(--mono);font-size:.8em;background:rgba(30,42,37,.07);
padding:2px 6px;border-radius:5px}
/* Único eje de lectura horizontal de la página, y se sale por la derecha a
sangre, justo después de una banda rígidamente vertical. */
.rail-wrap{margin-right:calc(var(--gutter) * -1)}
.rail{display:flex;gap:var(--sp-5);overflow-x:auto;scroll-snap-type:x mandatory;
padding-bottom:var(--sp-5);scrollbar-width:thin}
.rail::-webkit-scrollbar{height:6px}
.rail::-webkit-scrollbar-thumb{background:var(--linea-fuerte);border-radius:4px}
.rail-item{flex:0 0 clamp(228px,27vw,320px);scroll-snap-align:start;background:none;
border:none;padding:0;cursor:pointer;font:inherit;color:inherit;text-align:left}
.rail-foto{display:block;border-radius:var(--r-md);overflow:hidden;background:var(--panel)}
.rail-foto img{width:100%;aspect-ratio:4/5;object-fit:cover;
transition:transform var(--dur-slow) var(--ease-out)}
.rail-item:hover .rail-foto img{transform:scale(1.04)}
.rail-item figcaption{font-size:var(--fs-small);color:var(--warm-gray);margin-top:10px}
.rail-item figcaption em{font-style:italic;color:var(--mint-deep)}
/* Los huecos son huecos honestos, y se diseñan para parecer deliberados. */
.foto-pendiente{display:grid;place-content:center;gap:8px;aspect-ratio:4/5;text-align:center;
background:repeating-linear-gradient(135deg,rgba(196,223,207,.3) 0 12px,rgba(196,223,207,.13) 12px 24px);
color:var(--mint-deep)}
.foto-pendiente .mono{font-family:var(--mono);font-size:1.5rem;letter-spacing:.06em}
.foto-pendiente span:last-child{font-size:var(--fs-small);font-weight:600}
.lightbox{border:none;padding:0;max-width:100vw;max-height:100vh;width:100vw;height:100vh;
background:rgba(20,28,24,.94);color:var(--canvas);display:none}
.lightbox[open]{display:grid;place-items:center}
.lightbox::backdrop{background:rgba(20,28,24,.8)}
.lb-figura{max-width:min(92vw,880px);max-height:80vh;display:grid;gap:var(--sp-4)}
.lb-figura img{max-height:70vh;width:auto;margin-inline:auto;border-radius:var(--r-md)}
.lb-figura figcaption{text-align:center;font-size:var(--fs-small);color:rgba(248,246,241,.78)}
.lb-cerrar,.lb-nav{position:absolute;background:rgba(248,246,241,.1);border:1px solid rgba(248,246,241,.2);
color:var(--canvas);width:46px;height:46px;border-radius:50%;display:grid;place-items:center;cursor:pointer}
.lb-cerrar{top:22px;right:22px}
.lb-nav{top:50%;transform:translateY(-50%)}
.lb-nav.prev{left:18px}.lb-nav.next{right:18px}
.lb-cerrar:hover,.lb-nav:hover{background:rgba(248,246,241,.22)}
.lb-contador{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);
font-family:var(--mono);font-size:var(--fs-caption);letter-spacing:.14em;color:rgba(248,246,241,.7)}
.lb-hueco{display:grid;place-content:center;gap:10px;width:min(80vw,520px);aspect-ratio:4/5;
border-radius:var(--r-md);text-align:center;
background:repeating-linear-gradient(135deg,rgba(196,223,207,.16) 0 14px,rgba(196,223,207,.06) 14px 28px);
color:var(--mint-light)}
/* ---------- 10 · Opiniones · el momento más tranquilo -------------------- */
/* Deliberadamente el bloque más vacío de la página, justo después del más
denso. Respiración denso → denso → abierto. */
.opiniones{text-align:center}
/* Cinta de reseñas. Entran por la derecha, salen por la izquierda y no paran.
El desenfoque de los bordes es una máscara, no un degradado pintado encima:
así funciona sobre cualquier fondo sin tener que recalcular el color. */
.marquesina{position:relative;margin-top:var(--sp-7);overflow:hidden;
-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);
mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%)}
.marquesina-pista{display:flex;width:max-content;animation:desliza 108s linear infinite}
/* Al pasar el puntero o al llegar con el teclado se detiene: una reseña que
huye mientras intentas leerla es peor que no tenerla. */
.marquesina:hover .marquesina-pista,
.marquesina:focus-within .marquesina-pista{animation-play-state:paused}
.marquesina-grupo{display:flex;list-style:none;margin:0;padding:0}
.opinion{flex:0 0 clamp(250px,25vw,330px);display:grid;align-content:start;
gap:var(--sp-3);text-align:left;padding:var(--sp-3) clamp(20px,2.4vw,34px);
border-left:1px solid var(--linea)}
.opinion-estrellas{display:flex;gap:3px;color:var(--gold)}
/* Doradas, como en Google. El contraste del dorado sobre crema es bajo
(2:1), pero la puntuación no depende de las estrellas: va también en el
aria-label de cada tarjeta y escrita en el lede de la sección. */
.opinion-estrellas svg{width:14px;height:14px;flex:none}
.opinion blockquote{margin:0;font-family:'Fraunces','Fraunces Fallback',Georgia,serif;
font-size:1.05rem;line-height:1.52;color:var(--cine-texto)}
.opinion-quien{font-family:var(--mono);font-size:var(--fs-small);color:var(--warm-gray)}
@keyframes desliza{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* Sin movimiento: la cinta se para y se convierte en una fila que se arrastra
a mano. La copia duplicada sobra ahí y se retira. */
@media(prefers-reduced-motion:reduce){
.marquesina{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
.marquesina-pista{animation:none;width:auto}
.marquesina-grupo[aria-hidden="true"]{display:none}
}
.opiniones .container{max-width:640px}
.opiniones h2{margin:var(--sp-3) 0 var(--sp-6)}
.opiniones .nota-pendiente{text-align:left;margin-inline:auto}
.opinion-ejemplo{margin:var(--sp-7) 0}
.opinion-ejemplo blockquote{font-family:'Fraunces','Fraunces Fallback',Georgia,serif;
font-size:clamp(1.15rem,2vw,1.5rem);line-height:1.44;color:var(--warm-gray);
font-style:italic;margin-bottom:var(--sp-4)}
.opiniones-enlace{margin-top:var(--sp-6)}
/* ---------- 11 · Ubicación · split asimétrico ---------------------------- */
.ubicacion h2{margin:var(--sp-3) 0 0}
.ubicacion-grid{display:grid;grid-template-columns:5fr 7fr;gap:clamp(28px,4vw,64px);align-items:start}
.datos{display:grid;gap:var(--sp-5)}
.dato{display:flex;gap:var(--sp-4);align-items:flex-start}
.dato-icono{flex:0 0 40px;width:40px;height:40px;border-radius:8px;display:grid;place-items:center;
background:rgba(196,223,207,.34);color:var(--mint-deep)}
.dato-icono svg{width:20px;height:20px}
.datos dt{font-family:var(--mono);font-size:var(--fs-caption);letter-spacing:.16em;
text-transform:uppercase;color:var(--warm-gray);margin-bottom:4px}
.datos dd{color:var(--charcoal);line-height:1.66}
.datos dd a{text-decoration:none;font-weight:600}
.datos dd a:hover{color:var(--mint-deep)}
.como-llegar{margin-top:var(--sp-7);padding-top:var(--sp-6);border-top:1px solid var(--linea)}
.como-llegar h3{margin-bottom:var(--sp-4)}
.como-llegar ul{list-style:none;display:grid;gap:var(--sp-4);margin-bottom:var(--sp-5)}
.como-llegar li{display:flex;gap:var(--sp-3);align-items:flex-start;font-size:var(--fs-small);color:var(--warm-gray)}
.como-llegar li svg{width:18px;height:18px;flex:0 0 18px;color:var(--mint-deep);margin-top:3px}
.mapa-caja{border-radius:var(--r-md);overflow:hidden;background:var(--panel);
border:1px solid var(--linea);min-height:clamp(320px,44vw,460px);display:grid}
.mapa-caja iframe{width:100%;height:100%;min-height:clamp(320px,44vw,460px);border:0;display:block}
.mapa-placeholder{display:grid;place-items:center;gap:var(--sp-4);padding:var(--sp-6);text-align:center}
.mapa-placeholder svg{width:34px;height:34px;color:var(--mint-deep)}
.mapa-placeholder p{font-size:var(--fs-small);color:var(--warm-gray);max-width:40ch}
.mapa-alt{font-size:.75rem}
/* ---------- 12 · FAQ · dos columnas, encabezado pegajoso ----------------- */
/* El eje se invierte respecto a Ubicación: allí el peso está a la izquierda,
aquí a la derecha. Y es el único bloque con un elemento pegajoso. */
.faq-grid{display:grid;grid-template-columns:5fr 7fr;gap:clamp(28px,4vw,72px);align-items:start}
.faq-cabecera{position:sticky;top:120px}
.faq-cabecera h2{margin:var(--sp-3) 0 var(--sp-4)}
.faq-cabecera p{color:var(--warm-gray);max-width:36ch}
.faq-item{border-top:1px solid var(--linea)}
.faq-item:last-child{border-bottom:1px solid var(--linea)}
.faq-pregunta{width:100%;display:flex;justify-content:space-between;align-items:center;gap:var(--sp-4);
background:none;border:none;cursor:pointer;font:inherit;font-weight:600;text-align:left;
color:var(--charcoal);padding:var(--sp-5) 0;transition:color var(--dur-mid) var(--ease-out)}
.faq-pregunta:hover{color:var(--mint-deep)}
.faq-mas{position:relative;flex:0 0 18px;width:18px;height:18px}
.faq-mas::before,.faq-mas::after{content:"";position:absolute;background:currentColor;
border-radius:2px;transition:transform var(--dur-mid) var(--ease-out),opacity var(--dur-mid) var(--ease-out)}
.faq-mas::before{left:0;top:8px;width:18px;height:2px}
.faq-mas::after{left:8px;top:0;width:2px;height:18px}
.faq-pregunta[aria-expanded="true"] .faq-mas::after{transform:rotate(90deg);opacity:0}
.faq-respuesta{display:grid;grid-template-rows:0fr;
transition:grid-template-rows var(--dur-slow) var(--ease-out)}
.faq-pregunta[aria-expanded="true"] + .faq-respuesta{grid-template-rows:1fr}
.faq-respuesta > div{overflow:hidden}
.faq-respuesta p{color:var(--warm-gray);padding-bottom:var(--sp-5);max-width:60ch}
/* ---------- 13 · Pedir cita · formulario + contacto directo -------------- */
.cita{background:var(--charcoal);color:var(--canvas)}
.cita h2{margin:var(--sp-3) 0 var(--sp-4)}
.cita-lede{color:rgba(248,246,241,.72);max-width:52ch;margin-bottom:var(--sp-7)}
.cita-grid{display:grid;grid-template-columns:7fr 5fr;gap:clamp(28px,4vw,64px);align-items:start}
.form-campos{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4) var(--sp-5)}
.campo--ancho{grid-column:1 / -1}
.campo label{display:block;font-size:var(--fs-small);font-weight:600;margin-bottom:7px;
color:rgba(248,246,241,.86)}
.req{color:var(--mint)}
.campo input,.campo select,.campo textarea{width:100%;font:inherit;font-size:.95rem;
color:var(--canvas);background:rgba(248,246,241,.07);border:1px solid rgba(248,246,241,.2);
border-radius:8px;padding:13px 15px;
transition:border-color var(--dur-mid) var(--ease-out),background var(--dur-mid) var(--ease-out)}
.campo textarea{resize:vertical;min-height:104px}
.campo input:focus,.campo select:focus,.campo textarea:focus{border-color:var(--mint);
background:rgba(248,246,241,.11);outline:none}
.campo input:focus-visible,.campo select:focus-visible,.campo textarea:focus-visible{outline:3px solid var(--mint);outline-offset:2px}
.campo select option{color:var(--charcoal)}
.campo input::placeholder,.campo textarea::placeholder{color:rgba(248,246,241,.42)}
.campo-error{font-size:.78rem;color:#F2B8A2;margin-top:5px;min-height:1em}
.campo [aria-invalid="true"],.campo input[aria-invalid="true"],.campo select[aria-invalid="true"]{border-color:#F2B8A2}
.consent{display:flex;gap:var(--sp-3);align-items:flex-start}
.consent input{width:20px;height:20px;flex:0 0 20px;margin-top:3px;accent-color:var(--mint-dark)}
.consent label{font-size:.82rem;font-weight:400;color:rgba(248,246,241,.78);margin:0}
.consent label a{color:var(--mint-light)}
.trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-estado{margin-top:var(--sp-4);font-size:var(--fs-small);min-height:1.4em;color:var(--mint-light)}
.form-estado.ok{color:var(--mint-light)}
.form-estado.error{color:#F2B8A2}
.cita-directo{background:rgba(248,246,241,.06);border:1px solid rgba(248,246,241,.14);
border-radius:var(--r-md);padding:clamp(24px,3vw,36px);display:grid;gap:var(--sp-4);align-content:start}
.cita-directo h3{font-size:1.24rem}
.cita-directo p{font-size:var(--fs-small);color:rgba(248,246,241,.72)}
.cita-nota{font-size:.76rem!important;color:rgba(248,246,241,.55)!important}
/* Única sección que termina en una afirmación a tamaño display en lugar de en
un párrafo. Segundo y último uso de la cursiva menta en toda la página. */
.cierre{margin-top:var(--pad-dense);padding-top:var(--sp-7);border-top:1px solid rgba(248,246,241,.14);
text-align:center}
.cierre p{font-family:'Fraunces','Fraunces Fallback',Georgia,serif;font-size:var(--fs-display);
line-height:1.16}
.cierre .accent-i{color:var(--mint)}
/* ---------- 14 · Pie ----------------------------------------------------- */
footer{background:#18221E;color:rgba(248,246,241,.7);padding-block:var(--pad-dense) var(--sp-6)}
.footer-grid{display:grid;grid-template-columns:2.2fr 1fr 1fr 1fr;gap:var(--sp-6);
padding-bottom:var(--sp-7);border-bottom:1px solid rgba(248,246,241,.1)}
.footer-marca img{width:56px;height:56px;object-fit:contain;margin-bottom:var(--sp-4)}
.footer-marca h3{color:var(--canvas);font-size:1.2rem;margin-bottom:10px}
.footer-marca p{font-size:var(--fs-small);max-width:44ch}
.footer-col{display:grid;gap:10px;align-content:start}
.footer-col h4{color:var(--canvas);font-size:.95rem;margin-bottom:4px}
.footer-col a{font-size:var(--fs-small);text-decoration:none;
transition:color var(--dur-mid) var(--ease-out)}
.footer-col a:hover{color:var(--mint-light)}
.footer-bottom{display:flex;flex-wrap:wrap;gap:var(--sp-4) var(--sp-6);justify-content:space-between;
align-items:baseline;padding-top:var(--sp-5);font-size:.78rem}
.footer-legal{width:100%}
/* ---------- 15 · Acciones flotantes ------------------------------------- */
.barra-movil{position:fixed;left:12px;right:12px;bottom:12px;z-index:900;display:none;gap:10px;
transform:translateY(140%);transition:transform var(--dur-slow) var(--ease-out)}
.barra-movil.visible{transform:none}
.barra-movil .btn{flex:1;padding:14px 18px}
.wa-flotante{position:fixed;right:20px;bottom:20px;z-index:880;width:56px;height:56px;
border-radius:50%;background:#198644;color:#fff;display:grid;place-items:center;
box-shadow:0 12px 30px rgba(25,134,68,.32);
transition:transform var(--dur-mid) var(--ease-out);opacity:0;pointer-events:none}
.wa-flotante.visible{opacity:1;pointer-events:auto}
.wa-flotante:hover{transform:scale(1.07)}
.wa-flotante svg{width:27px;height:27px}
/* ---------- 16 · Banner de consentimiento ------------------------------- */
.consent-banner{position:fixed;left:16px;bottom:16px;z-index:1200;width:min(440px,calc(100% - 32px));
background:var(--panel);border:1px solid var(--linea);border-radius:var(--r-md);
padding:var(--sp-5);box-shadow:0 22px 60px rgba(30,42,37,.2);display:grid;gap:var(--sp-4)}
.consent-banner[hidden]{display:none}
.consent-banner h2{font-size:1.06rem}
.consent-banner p{font-size:var(--fs-small);color:var(--warm-gray)}
.consent-detalle{display:none;gap:var(--sp-4);padding:var(--sp-4);border-radius:8px;
background:rgba(196,223,207,.18)}
.consent-detalle.abierto{display:grid}
.consent-fila{display:flex;gap:var(--sp-3);align-items:flex-start}
.consent-fila input{width:19px;height:19px;flex:0 0 19px;margin-top:3px;accent-color:var(--mint-dark)}
.consent-fila strong{display:block;font-size:.85rem}
.consent-fila span{font-size:.76rem;color:var(--warm-gray)}
.consent-acciones{display:flex;flex-wrap:wrap;gap:8px}
.consent-acciones .btn{padding:11px 18px;font-size:.85rem;flex:1 1 auto}
#consentRechazar{background:transparent;color:var(--charcoal);border-color:var(--linea-fuerte)}
#consentRechazar:hover{background:rgba(30,42,37,.06)}
/* ---------- 17 · Un elemento vivo por sección --------------------------- */
/* Susurro, nunca ruido. Ciclos de 4 s o más, retardos negativos para que ya
estén a media vuelta al pintar, y solo corren mientras la sección se ve. */
.vivo::after{content:"";position:absolute;pointer-events:none;border-radius:50%;
opacity:0;transition:opacity 1.2s linear}
.vivo.en-pantalla::after{opacity:1;animation:pulso 9s var(--ease-soft) infinite}
@keyframes pulso{0%,100%{transform:scale(1);opacity:.34}50%{transform:scale(1.14);opacity:.72}}
#servicios.vivo::after{top:8%;right:-6%;width:min(30vw,340px);aspect-ratio:1;
background:radial-gradient(circle,rgba(196,223,207,.4),transparent 68%);animation-delay:-2.1s}
#equipo.vivo::after{bottom:6%;left:-8%;width:min(34vw,380px);aspect-ratio:1;
background:radial-gradient(circle,rgba(212,168,83,.16),transparent 68%);animation-delay:-5.4s}
#clinica.vivo::after{top:14%;left:-7%;width:min(26vw,300px);aspect-ratio:1;
background:radial-gradient(circle,rgba(196,223,207,.34),transparent 70%);animation-delay:-3.7s}
.opiniones.vivo::after{top:20%;left:50%;width:min(40vw,440px);aspect-ratio:1;
transform-origin:center;margin-left:min(-20vw,-220px);
background:radial-gradient(circle,rgba(196,223,207,.28),transparent 66%);animation-delay:-7.2s}
.ubicacion.vivo::after{bottom:10%;right:-5%;width:min(24vw,280px);aspect-ratio:1;
background:radial-gradient(circle,rgba(212,168,83,.14),transparent 70%);animation-delay:-1.4s}
#faq.vivo::after{top:26%;right:-6%;width:min(26vw,300px);aspect-ratio:1;
background:radial-gradient(circle,rgba(196,223,207,.3),transparent 70%);animation-delay:-6.1s}
/* Las decoraciones no chocan nunca con el contenido: en pantallas bajas se
retiran, y el desbordamiento lo recorta la sección. */
/* clip y no hidden: hidden crea contenedor de scroll y mataría el
position:sticky del encabezado del FAQ. */
section.vivo{overflow:clip}
@media(max-height:560px){.vivo::after{display:none}}
/* La pestaña oculta lo para todo. animation-play-state no se hereda, así que
hay que alcanzar cada elemento y cada pseudoelemento directamente. */
body.pausado *,body.pausado *::before,body.pausado *::after{animation-play-state:paused!important}
/* El menú móvil se esconde de verdad. La navbar tiene transform, así que es el
bloque contenedor del menú en position:fixed y este medía 351px, no 375: con
translateX(100%) asomaba 12px por la derecha. visibility además saca sus
enlaces del orden de tabulación mientras está cerrado. */
@media(max-width:900px){
.nav-links{transform:translateX(105%);visibility:hidden;
transition:transform var(--dur-slow) var(--ease-out),visibility 0s linear var(--dur-slow)}
.nav-links.abierto{transform:none;visibility:visible;
transition:transform var(--dur-slow) var(--ease-out),visibility 0s}
.nav-links a{font-size:1.3rem;font-family:'Fraunces','Fraunces Fallback',Georgia,serif}
.nav-links .nav-cta{font-size:1rem;font-family:'Instrument Sans','Instrument Fallback',system-ui,sans-serif}
}
/* ---------- 18 · Adaptación a pantallas --------------------------------- */
@media(max-width:1080px){
.servicio{grid-template-columns:minmax(0,1fr);gap:var(--sp-3) var(--sp-5)}
/* En una sola columna hay que deshacer TAMBIÉN las filas del centrado de
escritorio. Sin esto quedaban `1fr auto auto auto 1fr`: las dos filas
elásticas se quedaban 267 px cada una —534 px de vacío por fila de
servicio— y encima la figura, que abarca las cinco, se montaba sobre el
texto. Era el hueco enorme entre imagen y descripción. */
.servicio--ilustrado{grid-template-columns:minmax(0,1fr);grid-template-rows:auto}
.servicio--ilustrado .servicio-titulo,
.servicio--ilustrado .servicio-desc,
.servicio--ilustrado .servicio-cta{grid-column:1;grid-row:auto}
.servicio-ilustracion{grid-column:1;grid-row:auto;align-self:start;margin-top:var(--sp-4)}
.servicio-desc,.servicio-cta,.servicio-foto{grid-column:1}
.disciplina-portada,.disciplina--invertida .disciplina-portada{grid-template-columns:minmax(0,.9fr) minmax(0,1fr)}
.equipo-fila{grid-template-columns:repeat(3,1fr);gap:var(--sp-5) var(--sp-4)}
.equipo-fila .miembro:nth-child(even){margin-top:0}
.equipo-fila .miembro:nth-child(3n+2){margin-top:clamp(16px,3vw,36px)}
.banda-linea{grid-template-columns:repeat(2,1fr);gap:var(--sp-6) 0}
.banda-punto:nth-child(3){border-left:0;padding-left:0}
.footer-grid{grid-template-columns:1fr 1fr;gap:var(--sp-6) var(--sp-5)}
.footer-marca{grid-column:1 / -1}
}
@media(max-width:900px){
.hermanos{grid-template-columns:1fr;gap:var(--sp-6)}
.hermanos-foto img{aspect-ratio:3/2}
.ubicacion-grid,.faq-grid,.cita-grid{grid-template-columns:1fr}
.faq-cabecera{position:static}
/* Las dos mitades se apilan, y la costura pasa de vertical a horizontal. */
/* Ventana de escritorio estrecha (721-900 px, apaisada): ahí sí se apilan,
porque el héroe sigue siendo la película dentro de una pantalla fija.
Sin !important: bloqueaba el split de dos columnas del móvil, que se
declara más abajo y debe ganar por orden. */
.elegir-mitades{grid-template-columns:1fr;grid-template-rows:1fr 1fr}
.mitad + .mitad{border-top:0;border-left:1px solid rgba(248,246,241,.18)}
.servicios-cabecera,.clinica-cabecera{grid-template-columns:1fr;align-items:start}
}
@media(max-width:720px){
.barra-movil{display:flex}
/* La barra fija tapaba de forma permanente el final de la página: el pie
quedaba debajo y no había forma de leerlo. */
body{padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))}
.wa-flotante{display:none}
.equipo-fila{grid-template-columns:repeat(2,1fr)}
.equipo-fila .miembro:nth-child(3n+2){margin-top:0}
.form-campos{grid-template-columns:1fr}
.servicio{grid-template-columns:1fr;gap:var(--sp-3)}
.servicio-desc,.servicio-cta,.servicio-foto{grid-column:1}
.disciplina-portada,.disciplina--invertida .disciplina-portada{grid-template-columns:1fr;gap:var(--sp-5)}
.cruce-enlace{grid-template-columns:1fr;gap:var(--sp-5)}
.disciplina--invertida .disciplina-foto{order:0}
.disciplina-foto img{aspect-ratio:4/3}
.servicio-foto{justify-self:start;margin-top:var(--sp-4)}
.banda-linea{grid-template-columns:1fr;gap:var(--sp-6)}
.banda-punto{border-left:0;padding-left:0}
.footer-grid{grid-template-columns:1fr}
.consent-banner{left:10px;right:10px;bottom:10px;width:auto}
.lb-nav.prev{left:8px}.lb-nav.next{right:8px}
}
/* Pantallas bajas pero con puntero fino: se conserva el scrub y se retiran
los adornos que no caben. */
@media(max-height:560px){.cine-anillo,.cine-cue{display:none}}
/* ---------- 19 · Las cinco puertas del héroe estático -------------------- */
/* Idénticas carácter a carácter a las del CSS crítico y a las del JS. Si una
sola difiere, un lado carga lo que el otro esconde. */
@media(max-width:720px),(orientation:portrait) and (max-width:1024px),(orientation:portrait) and (pointer:coarse),(orientation:landscape) and (pointer:coarse) and (max-height:560px),(prefers-reduced-motion:reduce){
/* La crema (#EFEAE1) es cálida y las fotos del estudio son gris verdoso
frío (~#ACAEA1): al quitar el póster, el salto de temperatura quedaba a
la vista. Este tono es el mismo estudio, subido a casi blanco. */
.cine{height:auto;background:#F2F3EF}
.cine-escenario{position:static;height:auto;min-height:0;display:block;background:#F2F3EF}
/* `.cine-cue` era un selector muerto: el elemento se llama `.cine-logo-cue`
y la flecha seguía saliendo, apuntando a nada en una página apilada. */
.cine-poster,.cine-video,.cine-anillo,.cine-halo,.cine-cue,.cine-logo-cue,.cine-intro,.cine-logo::before{display:none!important}
/* El héroe estático abría con el logo flotando sobre crema vacía: sin
película, el móvil no veía NADA de lo que hace especial a la portada.
Aquí el logo se convierte en un panel con el primer fotograma debajo —el
mismo que ve quien entra por escritorio— y un lavado crema encima para
que la marca y la tinta se lean. */
.cine-logo{display:none;position:static;transform:none!important;opacity:1!important;
margin:0;width:auto;justify-items:center;align-content:center;
/* Era min(52vh,420px): en un iPhone SE se comía 347 de 667 px antes de
la primera palabra, y empujaba los botones fuera de la pantalla. Es el
mismo fallo que se corrigió en escritorio; el móvil se había quedado. */
min-height:min(30vh,240px);
padding:calc(72px + var(--sp-4)) var(--gutter) var(--sp-4);
background:
radial-gradient(ellipse 72% 52% at 50% 50%,rgba(248,246,241,.86) 0%,
rgba(248,246,241,.52) 54%,rgba(248,246,241,.18) 80%,rgba(248,246,241,0) 100%),
url('../img/hero-cine-poster.jpg') center 46% / cover no-repeat,
var(--cine-fondo)}
/* La marca a 190 px era la que fijaba la altura del panel, no el
min-height. A 128 el titular y los dos botones caben holgados. */
.cine-logo img{width:min(34vw,128px)}
/* El pie repite palabra por palabra el rótulo que va sobre el titular, y en
el móvil se ven los dos casi seguidos. Se queda el de arriba. */
.cine-logo-pie{display:none}
.cine-banda{position:static;opacity:1!important;--k:1!important;pointer-events:auto;
text-shadow:none;display:grid}
.cine-banda::before{display:none!important}
/* Los 84 px de arriba compensaban la barra fija cuando el titular era lo
primero. Ahora lo primero es el panel del logo, que ya los lleva. */
/* --- HÉROE ------------------------------------------------------------
Texto a la izquierda y los dos objetos entrando por la derecha. La foto
va de pseudo-elemento con una máscara que la desvanece hacia la
izquierda: así no se ve el borde del rectángulo contra el fondo. */
.cine-banda--abre{position:relative;isolation:isolate;
padding:calc(84px + var(--sp-5)) var(--gutter) var(--sp-7);
align-content:start;justify-items:start;text-align:left}
/* Una sola foto que dice las dos cosas: la sonrisa y las zapatillas. El
fotograma de la película era un plano ancho de cine y al recortarlo en
una esquina se comía la zapatilla y escondía el diente detrás del texto.
Ruta ABSOLUTA a propósito: esta hoja vive en assets/css/, así que una
relativa apuntaría a assets/css/assets/img/ y da 404; la misma regla se
copia al CSS crítico del , donde la base es otra. */
.cine-banda--abre::after{content:"";position:absolute;z-index:-1;pointer-events:none;
right:-6%;top:70px;width:70%;height:352px;
background:url('/assets/img/hero-movil.jpg') right bottom / cover no-repeat;
/* Dos degradados cruzados: uno funde el borde izquierdo contra el texto y
el otro el borde superior, que si no deja una línea recta bajo la barra. */
-webkit-mask-image:linear-gradient(to right,transparent 0,rgba(0,0,0,.5) 26%,#000 58%),
linear-gradient(to bottom,transparent 0,#000 14%,#000 84%,transparent 100%);
-webkit-mask-composite:source-in;
mask-image:linear-gradient(to right,transparent 0,rgba(0,0,0,.5) 26%,#000 58%),
linear-gradient(to bottom,transparent 0,#000 14%,#000 84%,transparent 100%);
mask-composite:intersect}
.cine-banda--abre .cine-linea{font-size:var(--fs-display);max-width:7ch;text-align:left}
.cine-banda--abre .cine-sub{max-width:24ch;margin-top:var(--sp-4);text-align:left}
/* La segunda frase sobra aquí: al lado de una figura no hay ancho para un
párrafo de cuatro líneas sin que el texto se le suba encima a la cara. */
.cine-sub-extra{display:none}
.cine-acciones{justify-content:flex-start;width:100%;margin-top:var(--sp-5)}
.cine-acciones .btn{flex:1 1 100%}
/* --- ELECCIÓN ---------------------------------------------------------
Dos fichas horizontales sobre fondo claro: rótulo grande, una línea de
qué es, y un botón con contorno para que se vea que se puede pulsar.
Fuera la banda verde oscura a pantalla completa. */
.cine-banda--elegir{background:none;color:var(--charcoal);
padding:0 0 var(--sp-7);display:block;min-height:0}
.elegir-encabezado{position:static;transform:none;width:auto;max-width:none;
background:none;border:0;border-radius:0;box-shadow:none;backdrop-filter:none;
-webkit-backdrop-filter:none;pointer-events:auto;
padding:var(--sp-6) var(--gutter) var(--sp-4);text-align:left}
.cine-rotulo--elegir{color:var(--charcoal);font-family:'Fraunces','Fraunces Fallback',Georgia,serif;
font-size:clamp(1.5rem,6vw,1.9rem);font-weight:400;text-transform:none;
letter-spacing:-.01em;background:none;border:0;padding:0;border-radius:0}
.cine-elegir-guia{color:var(--warm-gray);margin-top:4px}
.elegir-mitades{position:static;grid-template-columns:1fr;grid-template-rows:none;
gap:12px;padding:0 var(--gutter)}
.mitad{display:grid;grid-template-columns:minmax(0,1fr) 40%;align-items:center;
min-height:0;height:auto;overflow:hidden;border-radius:16px;
border:1px solid var(--linea);color:var(--charcoal)}
.mitad--dental{background:linear-gradient(105deg,#F7F6F2 0%,#EFF1EC 100%)}
.mitad--podo{background:linear-gradient(105deg,#F3F6F1 0%,#E7EEE6 100%)}
.mitad + .mitad{border-top:1px solid var(--linea);border-left:1px solid var(--linea)}
.mitad-foto{grid-column:2;grid-row:1;position:relative;inset:auto;
width:100%;height:100%;min-height:132px;aspect-ratio:auto;
-webkit-mask-image:linear-gradient(to right,transparent 0,#000 42%);
mask-image:linear-gradient(to right,transparent 0,#000 42%)}
.mitad-foto img{width:100%;height:100%;object-fit:cover}
/* En móvil la ficha dental enseña una cara, no un diente: el objeto de
estudio funciona a pantalla completa en escritorio, pero en una ficha de
140 px pierde toda la calidez. Se cambia por CSS —fondo en el contenedor,
![]()
oculto— para no tocar el HTML y dejar las puertas de escritorio
exactamente como están. El ![]()
ya es aria-hidden y alt="", así que no
se pierde nada para un lector de pantalla. */
/* Un hombre aquí, porque en el héroe hay una mujer: la misma cara dos
veces seguidas en la misma pantalla se nota. */
.mitad--dental .mitad-foto{background:url('/assets/img/cara-odontologia-movil.jpg') center 30% / cover no-repeat}
.mitad--dental .mitad-foto img{visibility:hidden}
.mitad-velo{display:none}
.mitad-indice,.mitad-quien,.mitad-cara{display:none}
.mitad-texto{grid-column:1;grid-row:1;position:static;display:flex;
flex-direction:column;align-items:flex-start;text-align:left;
justify-self:stretch;width:auto;margin:0;padding:18px 4px 18px 16px;
border:0;border-radius:0;background:none;box-shadow:none;
backdrop-filter:none;-webkit-backdrop-filter:none;gap:2px}
/* El rótulo pequeño pasa a ser el titular de la ficha, y la frase larga
queda debajo como descripción. */
.mitad .caption{font-family:'Fraunces','Fraunces Fallback',Georgia,serif;
font-size:1.3rem;line-height:1.1;letter-spacing:-.01em;text-transform:none;
color:var(--charcoal);margin:0}
.mitad h3{font-family:inherit;font-size:.86rem;font-weight:400;line-height:1.35;
margin-top:3px;color:var(--warm-gray)}
.mitad-cta{margin-top:13px;display:inline-flex;align-items:center;gap:7px;
padding:9px 15px;border:1px solid rgba(30,42,37,.22);border-radius:999px;
background:rgba(255,255,255,.66);font-size:.76rem;font-weight:600;
color:var(--charcoal);text-decoration:none}
.mitad-cta::after{display:none}
/* Sin puntero no hay hover: la foto se queda a plena luz y la placa hace
todo el trabajo de legibilidad. */
.mitad-foto img{filter:none}
.cine-subir .cine-w{opacity:1!important;transform:none!important}
/* La portada del final se retira: enseñaba el diente y la zapatilla JUNTOS
justo después de las dos puertas, que ya los enseñan por separado. Era la
tercera vez que se veía la misma foto. El primer fotograma ya está arriba,
debajo del logo. */
.cine-portada{display:none}
}
/* ---------- 20 · Movimiento reducido ------------------------------------ */
/* Se honra por completo: sin animaciones ni transiciones en elementos ni en
pseudoelementos, sin retardos, y todo lo coreografiado en su estado final.
Los transform de posición se vuelven a aplicar donde hacían falta. */
@media(prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
transition-duration:.001ms!important;transition-delay:0s!important}
.reveal{opacity:1!important;transform:none!important}
.entorno{animation:none!important;transform:none!important}
.arco-trazo{stroke-dashoffset:0!important}
.arco-vivo{stroke-dashoffset:0!important}
.banda-punto{opacity:1!important;transform:none!important}
.arco-boton{display:none}
.arco-pista{color:rgba(248,246,241,.62)}
.equipo-fila .miembro:nth-child(even),.equipo-fila .miembro:nth-child(3n+2){margin-top:0}
}
/* Movimiento reducido activado en caliente: el JS clava los estados finales
con esta clase, sin esperar a una recarga. */
.clavado .arco-trazo,.clavado .arco-vivo{stroke-dashoffset:0!important}
.clavado .reveal{opacity:1!important;transform:none!important}
.clavado .banda-punto{opacity:1!important;transform:none!important}
/* ---------- 21 · PÁGINAS DE DISCIPLINA ----------------------------------
Odontología y podología. Nada de repetir el héroe cinemático: aquí manda
la fotografía del objeto que el visitante acaba de pulsar, y el titular a
su lado. El traspaso se nota porque la foto es literalmente la misma. */
.disc-heroe{position:relative;padding-top:calc(84px + clamp(28px,5vw,64px));
padding-bottom:clamp(40px,6vw,84px);overflow:clip}
.disc-heroe-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
gap:clamp(24px,4vw,64px);align-items:center}
.disc-heroe-texto{max-width:34rem}
/* La miga de pan es texto, no un adorno: dice de dónde vienes y deja volver. */
.disc-miga{display:flex;flex-wrap:wrap;align-items:center;gap:8px;
font-family:var(--mono);font-size:var(--fs-caption);letter-spacing:.14em;
text-transform:uppercase;color:var(--warm-gray);margin-bottom:var(--sp-5)}
.disc-miga a{color:var(--mint-deep);text-decoration:none;border-bottom:1px solid rgba(62,107,82,.3)}
.disc-miga a:hover{border-bottom-color:var(--mint-deep)}
.disc-miga span[aria-current]{color:var(--charcoal)}
.disc-heroe h1{font-size:clamp(2.5rem,6vw,4.4rem);line-height:1;letter-spacing:-.025em;
margin:var(--sp-4) 0 var(--sp-5)}
.disc-lede{font-size:var(--fs-lead);color:var(--warm-gray);max-width:46ch}
.disc-firma{display:flex;align-items:center;gap:var(--sp-4);margin-top:var(--sp-6);
padding-top:var(--sp-5);border-top:1px solid var(--linea)}
.disc-firma img{width:52px;height:52px;border-radius:50%;object-fit:cover;flex:none}
.disc-firma p{font-size:var(--fs-small);color:var(--warm-gray);line-height:1.5}
.disc-firma strong{display:block;color:var(--charcoal);font-size:1rem;font-weight:600}
.disc-acciones{display:flex;flex-wrap:wrap;gap:var(--sp-4);margin-top:var(--sp-6)}
/* La foto sale del contenedor y se va hasta el borde de la ventana. Sin
tarjeta, sin sombra y sin esquinas: es una fotografía, no un widget. */
.disc-heroe-foto{position:relative;height:min(64vh,580px);background:var(--cine-fondo);
/* Hasta el borde de la ventana, salga el contenedor donde salga: el hueco
que hay a la derecha es el margen centrado (0 si la ventana es estrecha)
más el gutter. */
margin-right:calc(-1 * (max(0px, (100vw - var(--max)) / 2) + var(--gutter)))}
.disc-heroe-foto img{width:100%;height:100%;object-fit:cover;object-position:50% 46%}
/* Encabezado de sección reutilizable, alineado a la izquierda y estrecho:
una columna de texto que se lee de un vistazo. */
.disc-cab{max-width:52ch;margin-bottom:clamp(32px,4vw,56px)}
.disc-cab h2{margin:var(--sp-3) 0 var(--sp-4)}
.disc-cab p{color:var(--warm-gray)}
/* Los profesionales: dos bloques alternados, no dos tarjetas iguales. */
.pros{display:grid;gap:clamp(36px,5vw,64px)}
.pro{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);
gap:clamp(22px,3.6vw,52px);align-items:start;
padding-top:clamp(28px,4vw,44px);border-top:1px solid var(--linea)}
.pro:first-child{padding-top:0;border-top:0}
/* El segundo profesional va espejado. No basta con reordenar: hay que dar
la vuelta también a las columnas, o el retrato se queda con el hueco
ancho y el texto con el estrecho. */
.pro--vuelta{grid-template-columns:minmax(0,1fr) minmax(0,300px)}
.pro--vuelta .pro-retrato{order:2}
.pro-retrato{position:relative;overflow:hidden;border-radius:var(--r-md);background:var(--cine-fondo)}
.pro-retrato img{width:100%;aspect-ratio:4/5;object-fit:cover}
.pro-nombre{font-size:clamp(1.5rem,2.6vw,2rem);font-weight:400}
.pro-rol{font-family:var(--mono);font-size:var(--fs-caption);letter-spacing:.16em;
text-transform:uppercase;color:var(--mint-deep);font-weight:600;margin-top:6px}
.pro-texto > p{color:var(--warm-gray);max-width:62ch;margin-top:var(--sp-4)}
.pro-cita{margin-top:var(--sp-5);padding-left:var(--sp-5);border-left:2px solid var(--mint-light)}
.pro-cita blockquote{font-family:'Fraunces','Fraunces Fallback',Georgia,serif;
font-size:clamp(1.02rem,1.5vw,1.22rem);font-style:italic;font-weight:400;
line-height:1.5;color:var(--slate);max-width:56ch}
.pro-etiquetas{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin-top:var(--sp-5)}
.pro-etiquetas li{font-size:.78rem;font-weight:600;color:var(--mint-deep);
border:1px solid rgba(62,107,82,.26);border-radius:100px;padding:5px 13px}
/* El puente a la otra consulta. Es el héroe de esta página dado la vuelta:
misma foto de objeto, mismo tamaño, al otro lado. Se cerró así, en dos
columnas, porque con la foto de fondo y la placa encima no había recorte
que dejase ver el objeto entero: la foto es vertical y la franja apaisada. */
.puente{display:block;text-decoration:none;color:var(--charcoal);background:var(--panel);
border-top:1px solid var(--linea);border-bottom:1px solid var(--linea)}
.puente-grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
gap:clamp(24px,4vw,64px);align-items:center}
.puente-foto{position:relative;overflow:hidden;height:min(46vh,420px);background:var(--cine-fondo);
margin-left:calc(-1 * (max(0px, (100vw - var(--max)) / 2) + var(--gutter)))}
.puente-foto img{width:100%;height:100%;object-fit:cover;object-position:50% 60%;
filter:saturate(.88);transition:transform 1.2s var(--ease-out),filter var(--dur-slow) var(--ease-out)}
.puente:hover .puente-foto img,.puente:focus-visible .puente-foto img{transform:scale(1.05);filter:saturate(1)}
.puente-texto{padding-block:clamp(40px,5.5vw,72px);max-width:42ch}
.puente-texto h2{font-size:clamp(1.6rem,3vw,2.3rem);margin:var(--sp-3) 0 var(--sp-4)}
.puente-texto p{color:var(--warm-gray);font-size:var(--fs-small)}
.puente-ir{display:inline-flex;align-items:center;gap:9px;margin-top:var(--sp-5);
font-weight:600;font-size:.92rem;color:var(--charcoal);
padding:12px 24px;border:1px solid rgba(30,42,37,.28);border-radius:var(--r-btn);
transition:background var(--dur-mid) var(--ease-out),color var(--dur-mid) var(--ease-out),
border-color var(--dur-mid) var(--ease-out)}
.puente:hover .puente-ir,.puente:focus-visible .puente-ir{background:var(--charcoal);
border-color:var(--charcoal);color:var(--canvas)}
.puente-ir svg{width:16px;height:16px}
/* Espejo: la foto se va al borde derecho y el texto se queda a la izquierda. */
.puente--der .puente-grid{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr)}
.puente--der .puente-foto{order:2;margin-left:0;
margin-right:calc(-1 * (max(0px, (100vw - var(--max)) / 2) + var(--gutter)))}
.puente--der .puente-texto{justify-self:start}
/* La fila de equipo lleva seis en la portada; aquí son menos y la rejilla
tiene que saberlo. Se cuentan con una variable para no duplicar la regla. */
.equipo-fila--corta{--cols:3}
@media(max-width:900px){
.disc-heroe{padding-top:calc(84px + var(--sp-6))}
.disc-heroe-grid{grid-template-columns:1fr;gap:var(--sp-6)}
.disc-heroe-foto{order:-1;height:min(52vh,380px);
margin-inline:calc(var(--gutter) * -1)}
.pro{grid-template-columns:1fr;gap:var(--sp-5)}
.pro--vuelta .pro-retrato{order:0}
.pro-retrato{width:min(64%,260px)}
.puente-grid,.puente--der .puente-grid{grid-template-columns:1fr;gap:0}
.puente-foto,.puente--der .puente-foto{order:-1;height:min(38vh,300px);
margin-inline:calc(var(--gutter) * -1)}
.puente-texto{padding-block:var(--sp-6) var(--pad-dense);max-width:none}
}