/* ============================================================
   Aury Dental Clinic — estilos compartidos
   El crítico del hero (tokens, base, botones, slots de imagen, nav, hero,
   franja, movimiento y su responsive) va inline en cada página. Aquí vive
   todo lo que está por debajo del primer viewport.
   Los tokens los define el bloque inline: esta hoja los consume.
   ============================================================ */

/* ============================================================
   SECCIONES
   ============================================================ */
.sec{padding-block:clamp(4rem,8vw,7.5rem)}
.sec--light{background:var(--chalk)}
.sec--paper{background:var(--paper);border-block:1px solid var(--line)}
.sec__head{display:flex;justify-content:space-between;align-items:flex-end;gap:2.5rem;flex-wrap:wrap;margin-bottom:clamp(2.5rem,5vw,4rem)}
.sec__head h2{max-width:15ch;text-wrap:balance}
.sec__aside{font-size:.98rem;color:var(--muted);max-width:34ch}

/* ---------- EL CRUCE (sección firma) ---------- */
.cross{background:var(--jade-900);color:#EAF1EE;padding-block:clamp(4rem,8vw,7rem)}
.cross__eyebrow{font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:#7FB3A6}
.cross h2{color:#fff;max-width:16ch;text-wrap:balance;margin:.9rem 0 1.2rem}
.cross__intro{color:#B9D2CB;max-width:52ch}
.cross__grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(2rem,5vw,5rem);margin-top:clamp(3rem,6vw,4.5rem);align-items:start}
.map{position:sticky;top:110px;border:1px solid var(--line-dk);border-radius:2px;padding:1.25rem;background:rgba(255,255,255,.02)}
.map svg{width:100%;height:auto}
/* el <symbol> vive en un sprite de tamaño cero */
.sprite{position:absolute;width:0;height:0;overflow:hidden}
/* los nodos nunca son naranja: el acento queda para la ruta y para el
   marcador del paso activo. encendido = relleno chalk.
   el estado no puede venir de una clase ni de un selector descendente:
   ninguno de los dos cruza la frontera del shadow tree del <use>, y una
   clase puesta sobre el original se vería en las cinco instancias a la vez.
   viene de una custom property, que sí se hereda, y que cada instancia
   define en su propio <use>: los tramos en el marcado, el de escritorio
   desde JS */
.node{fill:var(--jade-900);stroke:#EAF1EE;stroke-width:2;transition:fill .2s var(--ease-out)}
.n0{fill:var(--nodo-0,var(--jade-900))}
.n1{fill:var(--nodo-1,var(--jade-900))}
.n2{fill:var(--nodo-2,var(--jade-900))}
.n3{fill:var(--nodo-3,var(--jade-900))}
/* los tramos por paso solo existen en móvil */
.tramo{display:none}
/* excepcion nombrada a la regla de transform/opacity — ver CLAUDE.md.
   offset en reposo = 1: nada dibujado, igual que el estado inicial de JS */
/* stroke-dashoffset NO se declara aquí a propósito: es justo lo que cada
   <use> hereda y lo único que distingue al mapa de escritorio de los cuatro
   tramos. Declararlo aquí ganaría por cascada y los igualaría todos */
.route{stroke:var(--signal);stroke-width:2.5;fill:none;stroke-dasharray:1;transition:stroke-dashoffset .34s var(--ease-out)}
/* el <ol> necesita su propio reset: el de ul no lo alcanza y el navegador
   pintaba su numeracion decimal encima de la nuestra */
/* el padding-bottom es funcional, no estético: alarga el bloque contenedor
   del sticky para que el mapa siga pegado mientras se lee el paso 04.
   sin él la caja se agotaba y el mapa se metía bajo el nav a media lectura.
   se anula a 1080px o menos, donde el mapa ya no es sticky */
.steps{margin:0;padding:0 0 var(--steps-runway,9rem);list-style:none}
/* el paso activo se marca con borde y cifra, nunca atenuando el cuerpo:
   los cuatro pasos tienen que leerse siempre */
.step{padding:clamp(1.8rem,3.4vw,2.8rem) 0 clamp(1.8rem,3.4vw,2.8rem) 1.4rem;border-left:2px solid transparent;border-bottom:1px solid var(--line-dk);transition:border-left-color .2s var(--ease-out)}
.step:last-child{border-bottom:0}
.step.is-active{border-left-color:var(--signal)}
.step__n{font-size:.8rem;letter-spacing:.14em;color:#7FB3A6;transition:color .2s var(--ease-out)}
.step.is-active .step__n{color:var(--signal)}
.step h3{color:#fff;font-size:1.5rem;margin:.55rem 0 .6rem}
.step p{color:#B9D2CB;max-width:46ch}
.cross__out{display:flex;flex-wrap:wrap;gap:1rem;margin-top:3rem}

/* ---------- TRATAMIENTOS ---------- */
.treats{display:grid;grid-template-columns:repeat(2,1fr);gap:1.75rem}
/* sin overflow:hidden — recortaria la sombra del ::after. el recorte de la
   imagen lo hace el propio .shot, que ya tiene el suyo */
.treat{position:relative;background:var(--paper);border-radius:2px;box-shadow:var(--e1);display:flex;flex-direction:column;transition:transform .14s var(--ease-hover)}
/* las dos elevaciones se cruzan por opacidad: ambas capas ya estan pintadas,
   asi no se anima un blur de 72px en cuatro tarjetas a la vez */
.treat::after{content:"";position:absolute;inset:0;border-radius:2px;box-shadow:var(--e2);opacity:0;transition:opacity .14s var(--ease-hover);pointer-events:none}
.treat:hover{transform:translateY(-3px);transition-duration:.18s}
.treat:hover::after{opacity:1;transition-duration:.18s}
.treat .shot{aspect-ratio:16/8;border-radius:2px 2px 0 0}
.treat__body{padding:1.9rem 2rem 2.1rem;display:flex;flex-direction:column;gap:.7rem;flex:1}
.treat__body p{font-size:.98rem;color:var(--muted)}
.treat__more{margin-top:auto;padding-top:1.2rem;font-size:.9rem;font-weight:600;color:var(--jade-700);align-self:flex-start;border-bottom:1px solid transparent;transition:border-color .18s var(--ease-hover)}
.treat:hover .treat__more,.treat:focus-visible .treat__more{border-color:var(--jade-700)}
.treats__tail{margin-top:2rem;font-size:.98rem;color:var(--muted);max-width:70ch}

/* ---------- EQUIPO ---------- */
.team{display:grid;grid-template-columns:repeat(4,1fr);gap:1.75rem}
.doc .shot{aspect-ratio:4/5;margin-bottom:1.2rem}
.doc h3{font-size:1.25rem}
.doc__role{font-size:.92rem;color:var(--muted);margin-top:.35rem}
.doc__cred{font-size:.8rem;line-height:1.55;color:#8A948F;margin-top:.7rem}

/* ---------- RESEÑAS ---------- */
.rev{background:var(--jade-700);color:#fff;padding-block:clamp(3rem,6vw,4.5rem)}
.rev__in{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(2rem,5vw,4.5rem);align-items:center}
.rev__n{font-family:"Bricolage Grotesque",sans-serif;font-size:4.6rem;font-weight:700;letter-spacing:-.045em;line-height:1}
.rev__meta{color:#B9D2CB;font-size:.9rem;margin-top:.5rem}
.quotes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem;border-left:1px solid rgba(255,255,255,.16);padding-left:clamp(2rem,4vw,3.5rem)}
/* el reset de base no alcanza a blockquote y el navegador le metia su
   margin:1em 40px por defecto: 80px perdidos en cada una de las tres
   columnas. por eso la rejilla no llenaba y las citas caian a cuatro lineas */
.quotes blockquote{margin:0}
.quotes p{font-size:1rem;line-height:1.65;color:#EAF1EE;max-width:none}
.quotes cite{display:block;font-style:normal;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:#9FC4BA;margin-top:.9rem}

/* ---------- VISITA ---------- */
.visit__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,5vw,5rem)}
.facts{margin:2.5rem 0 0}
.facts div{display:grid;grid-template-columns:9rem 1fr;gap:1rem;padding-block:1.1rem;border-bottom:1px solid var(--line)}
.facts dt{font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:#8A948F;padding-top:.2rem}
.facts dd{margin:0}
.facts a{border-bottom:1px solid var(--line)}
.facts a:hover{border-color:var(--ink)}
.hours span{display:flex;justify-content:space-between;max-width:19rem}

form{background:var(--paper);border-radius:2px;padding:clamp(1.75rem,3.5vw,2.6rem);box-shadow:var(--e1)}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.field{margin-bottom:1.15rem}
.field label{display:block;font-size:.82rem;color:var(--muted);margin-bottom:.45rem}
.field input,.field select,.field textarea{
  width:100%;padding:.85rem .95rem;font:inherit;font-size:.98rem;color:var(--ink);
  background:var(--chalk);border:1px solid var(--line);border-radius:2px;
  transition:border-color .18s var(--ease-hover);
}
.field textarea{resize:vertical;min-height:96px}
/* outline real y fuera de la transition: el anillo de foco no se anima */
.field :is(input,select,textarea):focus{border-color:var(--jade-700);outline:2px solid var(--signal);outline-offset:2px}
.form__note{font-size:.84rem;color:var(--muted);margin-top:1rem}
/* el display de .f__msg NO está aquí: vive en el crítico inline de cada
   página, porque esta hoja llega diferida y los dos mensajes se verían a la
   vez mientras tanto. Aquí solo el aspecto */
.f__msg{margin:0 0 1.6rem;padding:1rem 1.2rem;border-left:2px solid var(--jade-700);background:var(--paper);font-size:.95rem;line-height:1.6;color:var(--ink)}
.f__msg--err{border-left-color:var(--signal)}
.f__msg a{color:var(--jade-700);font-weight:600;border-bottom:1px solid transparent;transition:border-color .18s var(--ease-hover)}
.f__msg a:hover{border-color:var(--jade-700)}

/* ---------- FOOTER ---------- */
footer{background:var(--ink);color:#C3CCC8;padding-block:4rem 2rem;font-size:.92rem}
.f__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:2.5rem}
footer h4{color:#fff;font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;margin:0 0 1.1rem;font-family:"Instrument Sans",sans-serif;font-weight:600}
footer li{margin-bottom:.55rem}
footer li a{color:#8A948F;transition:color .18s var(--ease-hover)}
footer li a:hover{color:#fff}
.f__brand{display:flex;align-items:center;gap:.62rem;font-family:"Bricolage Grotesque",sans-serif;color:#fff;font-size:1.3rem;font-weight:700;letter-spacing:-.02em}
/* variante blanca sobre --ink: 16.84:1 de contraste medio, 0% invisible.
   38px de caja por lo mismo que en el nav: el viewBox del SVG trae aire */
.f__mark{height:38px;width:auto;display:block;flex:none}
.f__bottom{display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;margin-top:3rem;padding-top:1.5rem;border-top:1px solid #2A3A35;font-size:.82rem;color:#6F7C77}
.f__by{color:#8A948F;transition:color .18s var(--ease-hover)}
.f__by:hover{color:var(--signal)}

/* ============================================================
   PÁGINAS DE TRATAMIENTO
   El hero y la miga van en el crítico inline de cada página.
   Aquí vive todo lo que queda por debajo del primer viewport.
   ============================================================ */

/* ---------- QUÉ ES / A QUIÉN LE SIRVE ---------- */
.prose{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(2rem,5vw,4.5rem);align-items:start}
.prose__body p{margin-bottom:1.15rem;color:var(--muted)}
.prose__body p:first-child{color:var(--ink);font-size:1.15rem;line-height:1.6;max-width:56ch}
.prose__body p:last-child{margin-bottom:0}
/* el filo es jade y no naranja: el acento se guarda para los CTA y para el
   estado activo, y aquí basta con marcar que el bloque es de otra clase */
.fits{background:var(--chalk);border-left:2px solid var(--jade-700);border-radius:0 2px 2px 0;padding:clamp(1.6rem,3vw,2.2rem)}
.fits h3{font-size:1.08rem}
.fits ul{margin-top:1.1rem;display:grid;gap:.75rem}
.fits li{position:relative;padding-left:1.35rem;font-size:.98rem;line-height:1.55;color:var(--muted)}
.fits li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:1px;background:var(--jade-700)}
.fits__foot{margin-top:1.4rem;padding-top:1.1rem;border-top:1px solid var(--line);font-size:.92rem;color:var(--muted)}
/* mismo tratamiento que el enlace de .how: jade, peso y filete al hover */
.fits__foot a{color:var(--jade-700);font-weight:600;border-bottom:1px solid transparent;transition:border-color .18s var(--ease-hover)}
.fits__foot a:hover{border-color:var(--jade-700)}

/* ---------- CÓMO SE HACE AQUÍ ---------- */
.how{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.75rem,3.5vw,3rem)}
/* cuatro pasos en tres columnas dejan uno solo en la segunda fila, y una fila
   con hueco se lee como una tarjeta que falta: dos por dos. Solo por encima
   de 1080, que por debajo el bloque RESPONSIVE ya los pone a dos y a uno */
@media (min-width:1081px){.how.how--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* filo negro y grueso arriba: es el contraste de luminancia que pide la
   dirección visual, y separa los tres bloques sin cajas ni sombras */
.how__item{border-top:2px solid var(--ink);padding-top:1.35rem}
.how__n{font-size:.8rem;letter-spacing:.14em;color:var(--muted)}
.how h3{margin:.7rem 0 .6rem;font-size:1.22rem}
.how p{font-size:.99rem;color:var(--muted)}
.how a{color:var(--jade-700);font-weight:600;border-bottom:1px solid transparent;transition:border-color .18s var(--ease-hover)}
.how a:hover{border-color:var(--jade-700)}
/* remate del bloque: la línea que manda al seguimiento de /about/. Va fuera
   de .how porque .how es la rejilla y una cuarta celda rompería las tres */
.how__note{margin:clamp(1.7rem,3vw,2.4rem) 0 0;font-size:.95rem;line-height:1.7;color:var(--muted);max-width:70ch}
.how__note a{color:var(--jade-700);font-weight:600;border-bottom:1px solid transparent;transition:border-color .18s var(--ease-hover)}
.how__note a:hover{border-color:var(--jade-700)}

/* ---------- QUIÉN LO HACE ---------- */
/* dos doctores en vez de cuatro: la tarjeta gira a horizontal en vez de
   estirar un retrato 4/5 a media pantalla */
.team.team--2{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.75rem,4vw,3rem)}
/* un solo doctor: la tarjeta no se estira a todo el ancho, se corta en 620px.
   media pantalla vacía al lado se leería como una segunda tarjeta que falta */
.team.team--1{grid-template-columns:minmax(0,620px)}
.team.team--1 .doc,.team.team--2 .doc{display:grid;grid-template-columns:minmax(0,148px) minmax(0,1fr);gap:1.5rem;align-items:start}
.team.team--1 .doc .shot,.team.team--2 .doc .shot{margin-bottom:0}
/* ---------- EL EQUIPO, SOBRE OSCURO ----------
   Las secciones de equipo de la home, el hub y /about/ van sobre --ink para
   que el negro del retrato no se recorte contra el fondo. El token no se
   eligió a ojo: el fondo real de las cinco fotos, medido sobre las bandas
   laterales de cada recorte, promedia #191819, y contra él

     --ink      #101A17   Δ luminancia relativa 0.0002   contraste 1.003:1
     --night    #0B1210   Δ 0.0039                       el retrato se vería
                                                         como un rectángulo
                                                         más claro
     --jade-900 #0A3B32   Δ -0.0249                      ni de lejos

   La dispersión entre fotos —el Dr. Fernández es el más oscuro, el Dr.
   Moroni el más claro— llega a 1.04:1, y eso es lo que termina de borrar la
   máscara del retrato. */
.sec--ink{background:var(--ink);color:#D8E2DE}
.sec--ink .sec__head h2{color:#fff}
.sec--ink .sec__aside{color:#93A29C}

/* (0,2,0) a propósito: el bloque RESPONSIVE lleva .team{repeat(2,1fr)} con
   (0,1,0) y va después en el archivo, así que empatar sería perder */
.team.team--lead{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.5rem,3.2vw,2.4rem)}
.team.team--rest{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.5rem,3.2vw,2.4rem);margin-top:clamp(1.5rem,3.2vw,2.4rem)}

/* ---------- EL RETRATO ----------
   2:3 a medio cuerpo, ENTERO Y NÍTIDO, con el canto definido. Hasta el
   2026-10-12 llevaba una máscara radial que borraba los bordes y una placa
   a --ink que subía hasta la boca; las dos resolvían "fondo negro sobre
   sección negra" a costa de la foto, y se quitaron.

   La profundidad la pone el contexto:
   - la sección es --sand (.sec--sand), que contra el #191819 medio del fondo
     de las fotos da 13,4:1. El retrato se lee como objeto sobre una
     superficie, no como un agujero en ella. Y no es --chalk ni --paper
     porque esas son las vecinas del equipo en la home, el hub y /about/:
     con cualquiera de las dos, la sección se fundía con la de al lado.
   - elevación --e1, la de las tarjetas: dos capas, contacto corta y dura
     más ambiental amplia. Sobre --ink no se veía; sobre arena sí.
   - el nombre va DEBAJO de la foto. Encima habría que volver a oscurecer el
     pie, y medido, cualquier placa que lo haga legible empieza por debajo
     de la boca y se come barbilla y hombros. */
.sec--sand{background:var(--sand)}
.portrait{position:relative;margin:0}
/* el archivo es 2:3 y la caja 4:5, así que se ve el 83,3% de arriba.
   object-position arriba, para que lo que se pierda sea siempre el pie y
   nunca la cabeza. El fondo de la caja es el de las fotos, para que no
   asome otro color mientras carga. */
.portrait picture{display:block;aspect-ratio:4/5;overflow:hidden;border-radius:2px;background:#191819;box-shadow:var(--e1)}
.portrait img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 0;
  transition:filter .2s var(--ease-hover)}
.portrait__cap{padding-top:clamp(.8rem,1.4vw,1rem)}
.portrait .portrait__cap h3{color:var(--ink);letter-spacing:-.02em;line-height:1.14;font-size:clamp(1.02rem,1.35vw,1.28rem);max-width:none}
/* --jade-700 sobre --sand: 6,0:1 */
.portrait__role{margin:.3rem 0 0;color:var(--jade-700);font-size:.88rem;line-height:1.4}
/* hover: solo luminosidad. Nunca scale — desplaza el layout */
.doc:hover .portrait img,.bio:hover .portrait img{filter:brightness(1.1)}
.team--lead .doc__cred,.team--rest .doc__cred{margin-top:.9rem}
/* título con cédula y especialidades son dos líneas de la misma credencial:
   la segunda va pegada a la primera. (0,3,0) para ganarle a la de arriba */
.doc .doc__cred+.doc__cred{margin-top:.3rem}

/* ---------- CASOS: ANTES Y DESPUÉS ----------
   La sección vive comentada en las páginas hasta que lleguen las fotos con su
   consentimiento. El CSS se adelanta a propósito: así descomentarla es un solo
   paso y no dos. */
.cases{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.75rem,3.5vw,2.75rem)}
.case{margin:0}
.case .shot{aspect-ratio:3/2;border-radius:2px}
.case figcaption{margin-top:.9rem;font-size:.95rem;line-height:1.55;color:var(--muted);max-width:46ch}

/* ---------- EL CRUCE, VERSIÓN CORTA ---------- */
/* el mapa y los cuatro pasos son de la home y de la guía del cruce. aquí
   basta con el recordatorio y la salida hacia la guía */
.cross--short{padding-block:clamp(3.25rem,6vw,5rem)}

/* ---------- EL CRUCE, VERSIÓN RESUMEN (las dos homes) ----------
   El mapa y los cuatro pasos con su texto viven en la guía del cruce. Aquí
   solo quedan los cuatro titulares, en fila, como resumen del recorrido: sin
   mapa, sin tramos y sin cuerpo. .cross--brief lleva la clase doblada con
   .step porque el .step base define borde izquierdo, borde inferior y un
   padding que aquí no valen, y empatarían en especificidad. */
.cross--brief .steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(1.4rem,3vw,2.4rem);margin-top:clamp(2.4rem,5vw,3.4rem);padding-bottom:0}
.cross--brief .step{padding:1.3rem 0 0;border-left:0;border-bottom:0;border-top:2px solid rgba(255,255,255,.24)}
.cross--brief .step h3{font-size:1.1rem;margin:.55rem 0 0}

/* ---------- LO QUE CAMBIA: el teléfono como remate ---------- */
.ask__call{background:var(--jade-900);color:#fff;border-radius:2px;padding:clamp(1.8rem,3.4vw,2.4rem)}
.ask__eyebrow{font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:#7FB3A6}
.ask__tel{display:inline-block;margin:.8rem 0 1rem;font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:clamp(1.7rem,3.2vw,2.3rem);letter-spacing:-.03em;line-height:1;border-bottom:2px solid transparent;transition:border-color .18s var(--ease-hover)}
.ask__tel:hover{border-color:var(--signal)}
.ask__hours{font-size:.92rem;color:#B9D2CB;line-height:1.75}
.ask__hours span{display:block}
.cross--short .cross__out{margin-top:2.2rem}

/* ---------- RESEÑAS SIN CITAS ---------- */
/* ninguna de las tres reseñas de la home habla de implantes: bajo este H1 se
   leerían como testimonios de implantes que nadie dio */
.rev--bare .rev__in{align-items:center}
.rev__aside{color:#B9D2CB;max-width:40ch}
.rev__aside a{color:#fff;border-bottom:1px solid rgba(255,255,255,.4);padding-bottom:1px;transition:border-color .18s var(--ease-hover)}
.rev__aside a:hover{border-color:#fff}

/* ---------- OTROS TRATAMIENTOS ---------- */
.treats--3{grid-template-columns:repeat(3,minmax(0,1fr))}
/* el stagger base está calculado para dos columnas. hacen falta (0,5,0) para
   ganarle: el crítico inline va DESPUÉS de esta hoja en el documento y se
   lleva los empates de especificidad */
.js .treats.treats--3 .reveal:nth-child(3n+2){transition-delay:.06s}
.js .treats.treats--3 .reveal:nth-child(3n+3){transition-delay:.12s}

@media (max-width:1080px){
  .cross--brief .steps{grid-template-columns:1fr 1fr}
  .prose{grid-template-columns:1fr}
  .how{grid-template-columns:1fr 1fr}
  .team.team--2{grid-template-columns:1fr}
  .team.team--1{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  .cross--brief .steps{grid-template-columns:1fr;gap:0}
  .cross--brief .step{padding:1.1rem 0}
  .how{grid-template-columns:1fr}
  .treats--3{grid-template-columns:1fr}
  .team.team--1 .doc,.team.team--2 .doc{grid-template-columns:minmax(0,104px) minmax(0,1fr);gap:1.1rem}
  /* la fila de dos cae a una columna; la de tres a dos, y el tercero se
     centra ocupando lo mismo que los otros: una fila con hueco a la derecha
     se lee como una tarjeta que falta */
  .team.team--lead{grid-template-columns:minmax(0,1fr)}
  .team.team--rest{grid-template-columns:repeat(2,minmax(0,1fr))}
  .team.team--rest .doc:last-child{grid-column:1 / -1;justify-self:center;width:calc(50% - .75rem)}
  .cases{grid-template-columns:1fr}
  /* una sola columna: cada bloque entra solo y el stagger sobra */
  .js .treats.treats--3 .reveal:nth-child(n){transition-delay:0s}
}

/* ---------- BOTÓN FLOTANTE DE LLAMADA ----------
   Solo por encima de 760px: por debajo vive .callbar con el mismo número. El
   z-index lo pone entre la barra fija (50) y el panel del menú (60), que es
   justo lo que pide: por encima del contenido, por debajo del menú.
   [hidden] pierde contra cualquier display declarado en una clase, así que el
   display:none se escribe y no se confía al atributo. */
.callfloat[hidden]{display:none}
.callfloat{
  position:fixed;right:clamp(20px,3vw,40px);bottom:clamp(20px,3vw,36px);z-index:var(--z-float);
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.85em 1.25em;border-radius:2px;
  background:var(--signal);color:#fff;font-weight:600;font-size:.98rem;white-space:nowrap;
  box-shadow:0 2px 6px rgba(8,18,15,.34),0 18px 40px -12px rgba(226,84,47,.5);
  /* entrada 200ms con --ease-out, salida 150ms con --ease-in: el 75% de
     rigor. solo opacity y transform; el color va por su cuenta con la curva
     de micro-interacción */
  opacity:0;transform:translateY(12px);
  transition:opacity .15s var(--ease-in),transform .15s var(--ease-in),background-color .15s var(--ease-hover);
}
.callfloat.is-in{
  opacity:1;transform:none;
  transition:opacity .2s var(--ease-out),transform .2s var(--ease-out),background-color .15s var(--ease-hover);
}
.callfloat svg{flex:none}
.callfloat:hover{background:var(--signal-dk)}
/* el press vence al transform de la entrada por especificidad, (0,3,0) */
.callfloat.is-in:active{transform:translateY(1px)}
/* el mismo anillo de dos tonos del CTA, y por el mismo motivo: este botón
   flota sobre el hero oscuro y sobre las secciones claras. el blanco pegado
   al botón da 3.79:1 contra el naranja, el contorno --ink da 17.8:1 sobre
   blanco, y siempre queda un borde de alto contraste. no entra en ninguna
   transition: el anillo de foco no se anima */
.callfloat:focus-visible{outline:2px solid #fff;outline-offset:0;box-shadow:0 0 0 4px var(--ink),0 18px 40px -12px rgba(226,84,47,.5)}

/* ============================================================
   HUB DE TRATAMIENTOS
   ============================================================ */

/* ---------- EMPIECE POR LO QUE LE PASA ----------
   Tres columnas: el síntoma en voz de titular, la glosa en cuerpo, y el
   destino. La primera columna es lo que el paciente sí sabe; la tercera, lo
   que viene a buscar sin saber cómo se llama. */
.routes{margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.route__row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) minmax(0,.75fr);gap:clamp(1.2rem,3vw,2.5rem);align-items:start;padding-block:clamp(1.4rem,2.6vw,2rem);border-bottom:1px solid var(--line)}
.route__q{margin:0;font-family:"Bricolage Grotesque",sans-serif;font-weight:600;font-size:1.18rem;letter-spacing:-.015em;line-height:1.25}
.route__a{margin:0;font-size:.99rem;color:var(--muted)}
/* gap generoso en vez de un separador: al envolver, un "·" se queda colgando
   al final de la primera línea y se lee como una errata */
.route__go{margin:0;display:flex;flex-wrap:wrap;gap:.35rem 1.15rem;align-items:baseline;font-size:.98rem}
.route__go a{color:var(--jade-700);font-weight:600;border-bottom:1px solid transparent;transition:border-color .18s var(--ease-hover)}
.route__go a:hover{border-color:var(--jade-700)}

/* ---------- TODO LO DEMÁS ----------
   Deliberadamente NO tiene forma de tarjeta: ni sombra, ni radio, ni flecha,
   ni hover. No lleva a ningún sitio y no debe parecer que sí. */
.rest{margin:0;border-top:1px solid var(--line)}
.rest div{display:grid;grid-template-columns:minmax(0,16rem) minmax(0,1fr);gap:clamp(1rem,3vw,2.5rem);padding-block:clamp(1.1rem,2.2vw,1.5rem);border-bottom:1px solid var(--line)}
.rest dt{font-family:"Bricolage Grotesque",sans-serif;font-weight:600;font-size:1.1rem;letter-spacing:-.015em;line-height:1.3}
.rest dd{margin:0;font-size:.99rem;color:var(--muted);line-height:1.65;max-width:62ch}

/* ---------- LAS OCHO CATEGORÍAS ----------
   Nombres y orden salen del flyer oficial de la clínica. El rótulo de la
   categoría es una etiqueta, no un título: versalita pequeña y espaciada,
   para que no compita con el nombre del tratamiento, que es lo que se busca
   al recorrer la lista. */
.cats{display:grid;gap:clamp(2.4rem,5vw,3.6rem)}
.cat__name{margin:0 0 1rem;font-family:"Instrument Sans",sans-serif;font-weight:600;font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--jade-700)}
/* los tres con página propia llevan enlace en vez de glosa */
.rest dd a{color:var(--jade-700);border-bottom:1px solid transparent;transition:border-color .18s var(--ease-hover)}
.rest dd a:hover{border-color:var(--jade-700)}

/* ============================================================
   RESPONSIVE
   el hero, la nav, la barra de llamada y el stagger van en el crítico inline
   ============================================================ */
@media (max-width:1080px){
  /* el hub pierde la tercera columna: el destino pasa debajo, a todo el ancho */
  .route__row{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:.5rem 2rem}
  .route__go{grid-column:1 / -1;margin-top:.4rem}
  .cross__grid,.visit__grid,.rev__in{grid-template-columns:1fr}
  /* el mapa sticky y su observer son de escritorio. aquí cada paso lleva su
     propio tramo, ya dibujado, sin JavaScript de por medio */
  .map{display:none}
  .steps{--steps-runway:0px}
  .tramo{display:block;width:100%;height:auto;margin:1.2rem 0 .1rem;border:1px solid var(--line-dk);border-radius:2px;background:rgba(255,255,255,.02)}
  .quotes{grid-template-columns:1fr 1fr;border-left:0;padding-left:0;border-top:1px solid rgba(255,255,255,.16);padding-top:2rem}
  .team{grid-template-columns:repeat(2,1fr)}
  .f__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  /* el hub, en una columna: el término del glosario encima de su descripción */
  .route__row,.rest div{grid-template-columns:1fr;gap:.45rem}
  .route__go{margin-top:.55rem}
  /* debajo de 760 manda .callbar: el flotante no existe */
  .callfloat{display:none}
  .treats{grid-template-columns:1fr}
  .quotes{grid-template-columns:1fr}
  .f2{grid-template-columns:1fr}
  .facts div{grid-template-columns:1fr;gap:.2rem}
  .f__grid{grid-template-columns:1fr}
}

/* ============================================================
   LA CLÍNICA — /about/ y /es/la-clinica/
   Este bloque va al final del archivo por cascada, no por orden de lectura:
   sus reglas base tienen que ganar por posición a los @media de arriba, y
   sus propios @media van detrás de ellas. Meterlas en el primer @media que
   aparece es el fallo que costó el desbordamiento del glosario del hub.
   ============================================================ */

/* ---------- DÓNDE ESTÁ ---------- */
.place{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(2rem,5vw,4.5rem);align-items:start}
.place__shot{aspect-ratio:4/3}
.place__fig{margin:0}
.place__cap{margin-top:.7rem;font-size:.88rem;line-height:1.5;color:var(--muted)}
.place__body p{margin-bottom:1.15rem;color:var(--muted)}
.place__body p:first-child{color:var(--ink);font-size:1.15rem;line-height:1.6}
.place__body p:last-of-type{margin-bottom:0}
.place__body a{color:var(--jade-700);font-weight:600;border-bottom:1px solid transparent;transition:border-color .18s var(--ease-hover)}
.place__body a:hover{border-color:var(--jade-700)}
/* las coordenadas son el único dato de la ficha que no está ya en el bloque
   de visita que baja a todas las páginas: por eso tienen sitio propio */
.place__geo{margin:2.2rem 0 0;padding-top:1.4rem;border-top:1px solid var(--line)}
.place__geo dl{margin:0}
.place__geo dt{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.place__geo dd{margin:.55rem 0 0;font-family:"Bricolage Grotesque",sans-serif;font-weight:600;font-size:1.2rem;letter-spacing:-.01em}
.place__geo p{margin:.6rem 0 0;font-size:.92rem;color:var(--muted)}

/* ---------- LOS CUATRO DOCTORES ----------
   No reutilizan el .doc de la home y del hub, y es deliberado: allí son el
   apoyo de otra sección y caben cuatro en fila; aquí son el asunto de la
   página. Cada uno ocupa una banda entera, con el retrato al tamaño en que
   se le ve la cara y sitio para decir qué es su especialidad. */
.bios{border-top:1px solid var(--line)}
.bio{display:grid;grid-template-columns:minmax(0,17rem) minmax(0,1fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:start;padding-block:clamp(2rem,4vw,3rem);border-bottom:1px solid var(--line)}
/* la primera banda es más alta que las otras tres: es la única doctora con
   tres especialidades declaradas, y el ritmo de la página lo pide */
.bio.bio--lead{grid-template-columns:minmax(0,26rem) minmax(0,1fr)}
.bio__shot{aspect-ratio:4/5}
/* los tres cirujanos dentistas comparten título y comparten fila: de ellos se
   publica exactamente lo mismo, y una banda entera por cabeza dejaba media
   página vacía a la derecha. El borde inferior lo lleva la fila, no cada uno.
   De ellos no hay glosa ni credencial, así que la banda es el retrato y nada
   más: nombre y rol van en el pie de la foto, como en los otros dos. */
.bios__pair{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.5rem,3vw,2.5rem);border-bottom:1px solid var(--line)}
.bio.bio--pair{display:block;border-bottom:0}

/* sobre oscuro: las líneas de la página son claras y desaparecerían */
.sec--sand .bios,.sec--sand .bio,.sec--sand .bios__pair{border-color:rgba(16,26,23,.16)}
/* el nombre vive al pie del retrato, así que la columna de texto se alinea
   abajo y no arriba: con align-items:start la glosa empezaba tres párrafos
   por encima del nombre de quien habla */
/* el nombre va al pie de la columna de la foto: el texto se alinea abajo con él */
.sec--sand .bio{align-items:end}
/* #8A948F sobre arena da 2,4:1. --muted da 4,9:1 */
.sec--sand .bio__cred,.sec--sand .doc__cred{color:var(--muted)}
.bio--pair .bio__name{font-size:clamp(1.18rem,1.8vw,1.4rem)}
.bio--pair .bio__role{margin-top:.5rem;font-size:.98rem}
.bio__name{font-size:clamp(1.45rem,2.5vw,2rem);letter-spacing:-.025em;line-height:1.1}
.bio__role{margin:.75rem 0 0;font-size:1.05rem;font-weight:600;color:var(--jade-700)}
.bio__cred{margin:.5rem 0 0;font-size:.86rem;line-height:1.6;color:#8A948F}
.bio__gloss{margin:1.35rem 0 0;color:var(--muted);max-width:62ch}
.bios__note{margin:1.7rem 0 0;font-size:.95rem;line-height:1.7;color:var(--muted);max-width:70ch}

/* ---------- CÓMO ALCANZARLA DESDE TEXAS ----------
   No repite la ficha del bloque de visita, que ya baja a todas las páginas:
   la columna de la derecha dice para qué sirve cada vía, no vuelve a dar el
   dato. */
.reach{margin:0;border-top:1px solid var(--line)}
.reach__row{display:grid;grid-template-columns:minmax(0,22rem) minmax(0,1fr);gap:clamp(1rem,3vw,2.5rem);align-items:baseline;padding-block:clamp(1.1rem,2.2vw,1.5rem);border-bottom:1px solid var(--line)}
.reach dt{font-family:"Bricolage Grotesque",sans-serif;font-weight:600;font-size:1.1rem;letter-spacing:-.015em;line-height:1.35}
.reach dd{margin:0;font-size:.99rem;line-height:1.65;color:var(--muted);max-width:62ch}
.reach a{color:var(--jade-700);border-bottom:1px solid transparent;transition:border-color .18s var(--ease-hover)}
.reach a:hover{border-color:var(--jade-700)}

@media (max-width:1080px){
  .place{grid-template-columns:1fr}
  .place__shot{max-width:30rem}
  .bio,.bio.bio--lead{grid-template-columns:minmax(0,15rem) minmax(0,1fr)}
}
@media (max-width:760px){
  /* la fila de tres se deshace: en una columna cada uno vuelve a ser una
     banda, y el borde pasa de la fila a cada ficha */
  .bios__pair{grid-template-columns:1fr;gap:0;border-bottom:0}
  .bio,.bio.bio--lead{grid-template-columns:1fr;gap:1.1rem}
  .bio.bio--pair{border-bottom:1px solid var(--line);padding-block:clamp(2rem,4vw,3rem)}
  .sec--sand .bios .bio.bio--pair{border-bottom-color:rgba(16,26,23,.16)}
  /* el retrato a 2:3 y a todo el ancho del móvil sería una columna de imagen
     de 560px de alto por cabeza, cinco veces seguidas */
  .bio .portrait{max-width:20rem}
  .reach__row{grid-template-columns:1fr;gap:.4rem}
}

/* ============================================================
   UN CASO, ANTES Y DESPUÉS
   .cases es una rejilla de dos columnas pensada para cuatro casos. Con uno
   solo dejaba una tarjeta a media página y un hueco gris al lado, que es
   justo lo que no queremos enseñar. Aquí el caso ES la sección: las dos
   fotos ocupan el ancho de contenido, al mismo tamaño y una junto a otra,
   porque compararlas de un vistazo es todo el trabajo que hacen.
   Al final del archivo, como el resto: las bases tienen que ganar por
   posición a los @media de arriba.
   ============================================================ */
.case--pair{margin:0}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,2.5vw,2rem);align-items:start}
.pair__label{margin:0 0 .75rem;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
/* (0,3,0) a propósito: .case .shot vale (0,2,0) y empataría. CLAUDE.md lo
   dice — cualquier override necesita especificidad estrictamente mayor */
.case--pair .pair .shot{aspect-ratio:4/3;border-radius:2px}
/* las dos fotos son del mismo encuadre: una hairline las separa del fondo
   sin meter una sombra que sugiera tarjeta */
.case--pair .pair .shot{box-shadow:var(--e1)}

@media (max-width:760px){
  /* apiladas, no reducidas: media foto de cara no se compara con nada */
  .pair{grid-template-columns:1fr;gap:1.75rem}
}

/* ============================================================
   VISOR 3D DEL IMPLANTE — solo /services/dental-implants/ y su espejo
   No es cromo. El iframe NO está en el marcado: lo inserta el módulo de esa
   página al pulsar el botón. Hasta entonces esto es un póster de 47 KB.
   ============================================================ */

/* la altura es un clamp y no un valor fijo: 720px en un teléfono se come la
   pantalla entera. El mínimo no baja de 520 en escritorio ni de 460 en
   móvil porque son los min-height que el propio visor declara: por debajo,
   el iframe le saca barra de scroll a su propio documento */
.v3d{position:relative;height:clamp(460px,58vh,680px);overflow:hidden;border-radius:2px;
  background:var(--chalk);box-shadow:var(--e1)}
.v3d__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* velo con peso abajo, donde está el botón, y transparente arriba. Antes
   oscurecía la lámina entera: con el visor oscuro daba igual, con el visor
   claro ensuciaba el modelo y el salto al abrirlo era brusco */
.v3d__veil{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,18,16,0) 38%,rgba(11,18,16,.34) 100%)}
/* rejilla centrada en vez de translate(-50%,-50%) sobre el botón: .btn:active
   lleva su propio transform y un press mandaría el botón a una esquina */
/* abajo y no al centro: centrado, el botón caía justo encima del pilar, que
   es la pieza que el texto acaba de nombrar */
.v3d__act{position:absolute;inset:0;display:grid;place-items:end center;
  padding-bottom:clamp(1.25rem,5vh,2.75rem);pointer-events:none}
.v3d__act .btn{pointer-events:auto}
.v3d__frame{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.v3d.is-on .v3d__poster,.v3d.is-on .v3d__veil,.v3d.is-on .v3d__act{display:none}

.v3d__lede{max-width:62ch;margin:0 0 clamp(1.5rem,3vw,2.25rem);color:var(--muted)}
/* el aviso va en el texto de la página, no solo dentro del iframe: quien no
   abre el visor tiene que leerlo igual */
.v3d__note{margin:1rem 0 0;font-size:.88rem;line-height:1.6;color:var(--muted);max-width:62ch}

@media (max-width:760px){
  /* el suelo son los 460px de min-height que el visor declara por debajo de
     760: con menos, el iframe le saca barra de scroll a su propio documento */
  .v3d{height:clamp(460px,56vh,540px)}
}