/* ════════════════════════════════════════════════════════════════════
   Dra. Sandra Alarcón — sistema visual

   Dirección: el header y las píldoras vienen de Hyer Aviation; el aire,
   la serif editorial y la jerarquía, de Wealthsimple. Los seis colores
   son los aprobados por el cliente y se mapean uno a uno sobre los
   papeles de Hyer: blanco es el lienzo, negro es el texto y las bandas,
   el azul gris son los filetes, el grafito el texto secundario y el oro
   es el único acento — un solo bloque dorado por página.

   Dos reglas duras salen de medir el contraste, no del gusto:
     · el oro sobre blanco da 1,9:1 — nunca es texto sobre claro,
       solo relleno con texto negro encima;
     · el azul gris da lo mismo — solo filetes y contornos.

   Dos temas automáticos: prefers-color-scheme y nada más. No hay
   conmutador, así que el tema es correcto desde el primer píxel y sin
   JavaScript. Los componentes NUNCA leen un valor crudo: solo tokens.

   Paleta:  ./scripts/check-colors.sh
   Rejilla: python3 scripts/check-grid.py mockup/assets/styles.css
   ════════════════════════════════════════════════════════════════════ */
/* ── Los siete valores crudos ───────────────────────────────────
     El acento es un azul: el del uniforme de la doctora, un punto más
     profundo. Da 6,67:1 sobre la porcelana, así que sirve como texto, y
     6,67:1 con texto blanco encima, así que sirve como botón. En el tema
     oscuro se aclara mezclándolo con la porcelana. No hay oro.
     ──────────────────────────────────────────────────────────── */
:root{
  --porcelana:#F7F6F3;   /* el lienzo. Blanco cálido, no papel frío */
  --hueso:#EDE9E3;       /* la franja hundida */
  --filete:#D6D0C8;      /* filetes y contornos. Nunca texto */
  --pizarra:#5A5751;     /* texto secundario. 6,66:1 */
  --tinta:#16161A;       /* titulares, cuerpo y bandas oscuras */
  --azul:#1B55A8;        /* el acento: enlaces, rótulos, botones. 6,67:1 */

  /* ── Tokens semánticos · tema claro ───────────────────────────── */
  --bg:var(--porcelana);
  --surface:var(--hueso);
  --text:var(--tinta);
  --text-2:var(--pizarra);
  --accent:var(--azul);
  --accent-dec:var(--azul);
  --line:var(--filete);
  --btn-bg:var(--azul);
  --btn-fg:var(--porcelana);
  --shade:rgba(22,22,26,.05);
  --on-accent-dec:var(--porcelana);

  --band-bg:var(--tinta);
  --band-fg:var(--porcelana);
  --band-fg-2:color-mix(in srgb,var(--porcelana) 72%,var(--tinta));
  --band-line:rgba(247,246,243,.2);
  --band-accent:var(--porcelana);   /* sin oro en claro, tampoco en las bandas */

  /* ── Espaciado. Menos aire muerto que antes ──────────────────── */
  --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:16px; --sp-5:22px;
  --sp-6:30px; --sp-7:44px; --sp-8:60px; --sp-9:80px; --sp-10:100px;

  /* Una sola familia. Grotesca de carácter, en la línea de la
     referencia: la jerarquía sale del tamaño y del tracking, no de
     meter una segunda tipografía. */
  --sans:"Schibsted Grotesk","Helvetica Neue",-apple-system,
         BlinkMacSystemFont,"Segoe UI",sans-serif;
  --serif:var(--sans);

  --pill:999px;
  color-scheme:light dark;
  --gut:20px; --sec:56px;
  --e:cubic-bezier(.22,1,.36,1);
}
@media(min-width:768px){:root{--gut:36px;--sec:var(--sp-10)}}
@media(min-width:1100px){:root{--gut:52px}}

@media(prefers-color-scheme:dark){
  :root{
    --bg:var(--tinta);
    --surface:color-mix(in srgb,var(--tinta) 88%,var(--porcelana));
    --text:var(--porcelana);
    --text-2:color-mix(in srgb,var(--porcelana) 72%,var(--tinta));
    /* Sobre la tinta el azul se aclara con porcelana: 8,70:1. */
    --accent:color-mix(in srgb,var(--azul) 40%,var(--porcelana));
    --accent-dec:color-mix(in srgb,var(--azul) 40%,var(--porcelana));
    --line:color-mix(in srgb,var(--porcelana) 20%,var(--tinta));
    --btn-bg:var(--porcelana);
    --btn-fg:var(--tinta);
    --shade:rgba(247,246,243,.07);
    --on-accent-dec:var(--tinta);
    --band-bg:color-mix(in srgb,var(--tinta) 84%,var(--porcelana));
    --band-fg:var(--porcelana);
    --band-fg-2:color-mix(in srgb,var(--porcelana) 70%,var(--tinta));
    --band-line:rgba(247,246,243,.18);
    --band-accent:color-mix(in srgb,var(--azul) 40%,var(--porcelana));
  }
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--bg);color:var(--text-2);
  font-family:var(--sans);font-size:1.1875rem;line-height:1.55;font-weight:400;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
img{display:block;max-width:100%;height:auto}
picture{display:contents}
:focus-visible{outline:2px solid var(--text);outline-offset:3px}

/* Superficies que el navegador pinta por su cuenta si no se las reclama. */
::selection{background:var(--accent);color:var(--btn-fg)}
:root{scrollbar-color:var(--line) var(--bg);scrollbar-width:thin;
  accent-color:var(--text);caret-color:var(--text)}
a{text-underline-offset:.2em;text-decoration-thickness:from-font}

/* Cifras de la serif, tabulares: alinean en columna y tienen carácter. */
.num{font-family:var(--serif);font-variant-numeric:tabular-nums lining-nums;
  font-feature-settings:"tnum" 1,"lnum" 1}

.skip{position:absolute;left:var(--gut);top:-999px;z-index:100;
  background:var(--btn-bg);color:var(--btn-fg);padding:14px 24px;
  border-radius:var(--pill);font-size:.95rem;font-weight:600;
  text-decoration:none;min-height:48px;display:inline-flex;align-items:center}
.skip:focus{top:12px}

:target{scroll-margin-top:var(--sp-5)}
html{scroll-padding-top:var(--sp-5)}

/* ── Rejilla de 12 ─────────────────────────────────────────────────── */
.wrap{max-width:1200px;margin-inline:auto;padding-inline:var(--gut);width:100%}
.g{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-5)}
@media(min-width:768px){.g{grid-template-columns:repeat(8,minmax(0,1fr));gap:var(--sp-6)}}
@media(min-width:1100px){.g{grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--sp-6) var(--sp-7)}}
.g>*{min-width:0}
.sec{padding-block:var(--sec)}

/* ── Tipografía ────────────────────────────────────────────────────
   Serif editorial para el display, sans para todo lo demás. El tracking
   se cierra a medida que crece el tamaño: es lo que hace que un titular
   grande se lea como una pieza y no como texto agrandado.
   ──────────────────────────────────────────────────────────────── */
h1,h2,h3{margin:0;font-family:var(--serif);font-weight:600;color:var(--text)}
h1{font-size:clamp(2.7rem,7vw,4.8rem);line-height:1.02;letter-spacing:-.034em}
h2{font-size:clamp(2.15rem,4.8vw,3.5rem);line-height:1.06;letter-spacing:-.028em}
h3{font-size:1.6rem;line-height:1.14;letter-spacing:-.02em}
h4{margin:0;font-family:var(--sans);font-size:1.1875rem;font-weight:600;
  line-height:1.35;color:var(--text)}
p{margin:0}
.lead{font-size:clamp(1.3rem,2.1vw,1.75rem);line-height:1.34;color:var(--text);
  max-width:34ch;font-weight:400;letter-spacing:-.012em}
.body{font-size:1.1875rem;line-height:1.55;color:var(--text-2);max-width:50ch}
.small{font-size:1.0625rem;line-height:1.5;color:var(--text-2);max-width:54ch}
.note{font-size:1rem;line-height:1.55;color:var(--text-2);max-width:58ch;
  background:var(--surface);padding:var(--sp-5) var(--sp-6)}

/* ── Controles · todo es píldora ───────────────────────────────────
   La píldora oscura es la acción dominante del sistema y siempre debe
   ser el botón más fuerte de su superficie. Nunca hay sombra.
   ──────────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  background:var(--btn-bg);color:var(--btn-fg);border:1px solid var(--btn-bg);
  border-radius:var(--pill);font:inherit;font-size:1rem;font-weight:500;
  letter-spacing:.025em;padding:15px 26px;min-height:52px;
  text-decoration:none;cursor:pointer;
  transition:opacity .2s var(--e),background-color .2s var(--e),
             border-color .2s var(--e),color .2s var(--e);
}
.btn:hover{opacity:.84}
.btn--big{font-size:1.06rem;padding:18px 34px;min-height:58px}
/* Contorno: vive junto a la píldora llena, nunca sola en una sección. */
.btn--2{background:transparent;color:var(--text);border-color:var(--text-2)}
.btn--2:hover{opacity:1;border-color:var(--text);background:var(--shade)}
.btns{display:flex;flex-wrap:wrap;gap:var(--sp-3)}
.tlink{color:var(--text);text-decoration:none;
  box-shadow:inset 0 -1px 0 var(--text);padding-bottom:2px}
.tlink:hover{box-shadow:inset 0 -2px 0 var(--text)}

/* ── Cabecera ──────────────────────────────────────────────────────
   Una sola fila, sin filete y sin sombra, sobre el propio lienzo. El
   nombre grande no vive aquí: vive en la portada. Aquí solo queda la
   marca pequeña, cuatro enlaces y la píldora.
   ──────────────────────────────────────────────────────────────── */
.hd{background:var(--bg);position:relative;z-index:60}
.hd__in{display:flex;align-items:flex-start;justify-content:space-between;
  gap:var(--sp-5);padding-top:var(--sp-5);padding-bottom:var(--sp-5)}
.logo{text-decoration:none;display:block;line-height:.82;flex:0 1 auto;
  min-width:0}
/* El símbolo del letrero del consultorio, a la altura de las mayúsculas. */
.logo__m{display:inline-block;height:clamp(1.4rem,4.1vw,3.05rem);width:auto;
  fill:var(--accent);vertical-align:baseline;margin-right:.32em;
  transform:translateY(.04em)}
.logo b{font-family:var(--serif);font-weight:600;color:var(--text);
  font-size:clamp(1.9rem,5.6vw,4.2rem);letter-spacing:-.038em;
  display:inline;white-space:nowrap}
/* La abreviatura va volada, como el símbolo de marca registrada del modelo. */
.logo i{font-style:normal;font-family:var(--sans);font-weight:500;
  font-size:clamp(.72rem,1.1vw,.95rem);letter-spacing:.06em;
  color:var(--text-2);vertical-align:super;margin-left:.35em;
  white-space:nowrap}
.hd__end{display:flex;align-items:center;gap:var(--sp-5);flex:none;
  padding-top:var(--sp-2)}
.hd nav ul{display:none;list-style:none;margin:0;padding:0;
  gap:var(--sp-6);align-items:center}
.hd nav a{font-size:1.0625rem;color:var(--text);text-decoration:none;
  padding-block:6px;transition:opacity .2s var(--e)}
.hd nav a:hover{opacity:.62}
@media(min-width:1100px){.hd nav ul{display:flex}}

/* ── Menú ──────────────────────────────────────────────────────────
   Una píldora con la palabra y dos rayas, que al abrir pasa a «Cerrar»
   con las rayas en cruz. Despliega un panel azul a pantalla completa con
   los destinos en grande, que entran uno detrás de otro.

   Es un <details> nativo: abre sin JavaScript y con teclado. El JS solo
   cierra con Escape y al elegir destino, y bloquea el scroll de detrás.
   La píldora queda por encima del panel para poder cerrarlo.
   ──────────────────────────────────────────────────────────────── */
.menu{display:block;position:static}
.burger{position:relative;z-index:2;display:inline-flex;align-items:center;
  gap:var(--sp-3);min-height:48px;padding:0 var(--sp-4) 0 var(--sp-5);
  border:1px solid var(--text);border-radius:var(--pill);cursor:pointer;
  list-style:none;font:inherit;font-size:1rem;font-weight:600;
  color:var(--text);background:var(--bg);
  transition:background-color .25s var(--e),color .25s var(--e),border-color .25s var(--e)}
.burger:hover{background:var(--text);color:var(--bg)}
.burger::-webkit-details-marker{display:none}
.burger__x{display:none}
.menu[open] .burger__t{display:none}
.menu[open] .burger__x{display:inline}
.burger__box{position:relative;width:20px;height:10px;flex:none}
.burger__box span{position:absolute;left:0;right:0;height:1.5px;
  background:currentColor;transition:transform 300ms var(--e),top 300ms var(--e)}
.burger__box span:nth-child(1){top:0}
.burger__box span:nth-child(2){top:8.5px}
.menu[open] .burger__box span{top:4.25px}
.menu[open] .burger__box span:nth-child(1){transform:rotate(45deg)}
.menu[open] .burger__box span:nth-child(2){transform:rotate(-45deg)}
.menu[open] .burger{background:transparent;color:var(--porcelana);
  border-color:rgba(247,246,243,.55)}
.menu[open] .burger:hover{background:var(--porcelana);color:var(--azul)}

.panel{position:fixed;inset:0;z-index:1;background:var(--azul);
  color:var(--porcelana);overflow-y:auto}
.panel__in{min-height:100%;display:flex;flex-direction:column;
  justify-content:center;gap:var(--sp-8);
  padding-block:calc(var(--sp-9) + var(--sp-5)) var(--sp-8)}
.panel__nav{list-style:none;margin:0;padding:0;display:flex;
  flex-direction:column;gap:var(--sp-2)}
.panel__nav a{display:inline-flex;align-items:center;min-height:48px;
  text-decoration:none;color:var(--porcelana);
  font-size:clamp(2.1rem,7vw,4.2rem);font-weight:600;letter-spacing:-.03em;
  line-height:1.05;opacity:.72;transition:opacity .2s var(--e)}
.panel__nav a:hover,.panel__nav a:focus-visible,
.panel__nav a[aria-current="page"]{opacity:1}
.panel__nav a:focus-visible{outline-color:var(--porcelana)}
.panel__pie{margin:0;display:flex;flex-wrap:wrap;gap:var(--sp-3) var(--sp-7);
  padding-top:var(--sp-5);border-top:1px solid rgba(247,246,243,.25)}
.panel__pie a{color:var(--porcelana);text-decoration:none;font-size:1.0625rem;
  min-height:44px;display:inline-flex;align-items:center;opacity:.85}
.panel__pie a:hover{opacity:1}
/* Entrada del panel y de cada destino, escalonada. */
.menu[open] .panel{animation:panelIn 420ms var(--e) both}
.menu[open] .panel__nav li{animation:menuIn 560ms var(--e) both;
  animation-delay:calc(120ms + var(--i) * 55ms)}
@keyframes panelIn{from{opacity:0}to{opacity:1}}
@keyframes menuIn{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
html.menu-abierto{overflow:hidden}

/* ── Portada ───────────────────────────────────────────────────────
   La foto ocupa toda la sección, nítida entera, y el texto va a la
   izquierda sobre un velo del color del fondo que se desvanece antes de
   llegar a la doctora (en la foto 1 ella empieza en el 50 % del ancho).
   Antes había un panel desenfocado; con esta foto se leía como una foto
   borrosa, así que se quitó.

   El velo sale del token de fondo y sus opacidades cambian con el tema:
   en oscuro es más denso porque el texto claro necesita más contraste
   sobre una foto clara.

   En el celular no se superpone nada: la imagen va arriba, baja, y el
   texto debajo sobre fondo sólido.
   ──────────────────────────────────────────────────────────────── */
.hero{position:relative;isolation:isolate;overflow:hidden;background:var(--bg);
  --v1:92%;--v2:84%;--v3:0%}
@media(prefers-color-scheme:dark){
  .hero{--v1:97%;--v2:95%;--v3:0%}
}
.hero__bg{width:100%;height:min(42svh,100vw);object-fit:cover;
  object-position:58% 30%;display:block}
.hero__in{padding-block:var(--sp-6) var(--sp-7)}
.hero__copy{display:flex;flex-direction:column;gap:var(--sp-4);
  align-items:flex-start;max-width:34rem}
.hero .btn--2{background:var(--bg);border-color:var(--text);color:var(--text)}
.hero h1{max-width:13ch;font-size:clamp(2.4rem,4.6vw,4rem)}
.hero .lead{max-width:32ch;font-size:clamp(1.15rem,1.5vw,1.35rem)}

@media(min-width:900px){
  .hero{display:grid}
  .hero__bg{position:absolute;inset:0;z-index:0;width:100%;height:100%;
    aspect-ratio:auto;object-position:50% 38%}
  .hero::after{content:"";position:absolute;inset:0;z-index:1;
    pointer-events:none;
    background:linear-gradient(90deg,
      color-mix(in srgb,var(--bg) var(--v1),transparent) 0%,
      color-mix(in srgb,var(--bg) var(--v2),transparent) 40%,
      color-mix(in srgb,var(--bg) var(--v3),transparent) 50%)}
  .hero__in{position:relative;z-index:2;
    min-height:min(64svh,38rem);display:flex;align-items:center;
    padding-block:var(--sp-8)}
  .hero__copy{max-width:min(40%,31rem)}
}
@media(min-width:1400px){
  .hero__in{min-height:min(68svh,42rem)}
}

/* ── Imagen a sangre ───────────────────────────────────────────────
   Sale por los dos bordes de la ventana. El cálculo parte del ancho
   real, así que funciona con el envoltorio centrado y pegado a los
   bordes por igual.
   ──────────────────────────────────────────────────────────────── */
.bleed{grid-column:1/-1;margin:0;
  margin-inline:calc((100vw - min(100vw,1200px)) / -2 - var(--gut))}
.bleed img{width:100%;aspect-ratio:21/9;max-height:46svh;object-fit:cover}
.bleed--top img{object-position:50% 16%}
@media(max-width:699px){.bleed img{aspect-ratio:3/2}}
.bleed figcaption{max-width:1200px;margin-inline:auto;width:100%;
  padding:var(--sp-3) var(--gut) 0;font-size:.95rem;color:var(--text-2)}
.sec--bleed{overflow-x:clip}

/* ── Cabecera de página interior ───────────────────────────────────── */
.ph{padding-block:var(--sp-6) var(--sp-6)}
@media(min-width:768px){.ph{padding-block:var(--sp-7) var(--sp-8)}}
.ph__in{grid-column:1/-1;display:flex;flex-direction:column;gap:var(--sp-5)}
@media(min-width:900px){.ph__in{grid-column:1/7}}
@media(min-width:1100px){.ph__in{grid-column:1/10}}
.crumb{font-size:.95rem;color:var(--text-2)}
.crumb a{text-decoration:none}
.crumb a:hover{color:var(--text)}
.crumb [aria-current]{color:var(--text)}

/* ── Bloques ───────────────────────────────────────────────────────── */
.head{grid-column:1/-1;display:flex;flex-direction:column;gap:var(--sp-4);
  margin-bottom:var(--sp-7);max-width:42ch}
.two__a{grid-column:1/-1}
.two__b{grid-column:1/-1;display:flex;flex-direction:column;gap:var(--sp-5)}
@media(min-width:768px){.two__a{grid-column:1/4}.two__b{grid-column:4/-1}}
@media(min-width:1100px){.two__a{grid-column:1/6}.two__b{grid-column:7/-1}}
.two__a img{width:100%}
/* Dos fotos juntas: la grande arriba y la segunda más estrecha y corrida
   a la derecha, para que no formen una columna de cuadros iguales. */
.duo{display:flex;flex-direction:column;gap:var(--sp-5)}
.duo figure{margin:0}
.duo img{width:100%;aspect-ratio:4/3;object-fit:cover}
/* Con dos columnas, las fotos se reparten a lo alto de los cuatro pasos:
   una frente a los primeros y otra frente a los últimos. */
@media(min-width:768px){.duo{height:100%;justify-content:space-between}}

/* ── Cabecera a dos columnas ───────────────────────────────────────
   Titular a la izquierda, línea de apoyo arriba a la derecha. En el
   celular se apilan, con el apoyo debajo.
   ──────────────────────────────────────────────────────────────── */
.headrow{grid-column:1/-1;display:grid;grid-template-columns:1fr;
  gap:var(--sp-4);margin-bottom:var(--sp-8);align-items:start}
.headrow h2{max-width:16ch}
.headrow__sub{font-size:1.1875rem;line-height:1.45;color:var(--text);
  max-width:34ch;margin:0}
@media(min-width:900px){
  .headrow{grid-template-columns:minmax(0,7fr) minmax(0,5fr);
    gap:var(--sp-7);align-items:start}
  .headrow__sub{justify-self:end;text-align:left}
}

/* ── Cuadrícula de servicios ───────────────────────────────────────
   Imagen cuadrada, número ordinal, nombre y una línea. Sin recuadro y
   sin sombra: la imagen es el borde. La separación es estrecha a
   propósito, para que las cuatro se lean como una tira.
   ──────────────────────────────────────────────────────────────── */
.serv{grid-column:1/-1;list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-6) var(--sp-3)}
@media(min-width:560px){.serv{gap:var(--sp-7) var(--sp-4)}}
@media(max-width:559px){
  .serv__fig{margin-bottom:var(--sp-3)}
  .serv__n{margin-bottom:var(--sp-1);font-size:.9rem}
  .serv__t{font-size:1.0625rem;margin-bottom:var(--sp-2)}
  .serv__d{font-size:.95rem}
}
@media(min-width:1000px){.serv{grid-template-columns:repeat(4,1fr);gap:var(--sp-6) var(--sp-4)}}
.serv a{display:flex;flex-direction:column;height:100%;
  text-decoration:none;color:inherit}
.serv__fig{margin:0 0 var(--sp-5);overflow:hidden;background:var(--surface)}
.serv__fig img{width:100%;aspect-ratio:1;object-fit:cover;display:block;
  transition:transform 600ms var(--e)}
.serv a:hover .serv__fig img,
.serv a:focus-visible .serv__fig img{transform:scale(1.04)}
.serv__n{display:block;font-size:1rem;color:var(--text-2);
  margin-bottom:var(--sp-3);font-variant-numeric:tabular-nums lining-nums}
.serv__t{font-size:1.1875rem;font-weight:700;letter-spacing:-.01em;
  line-height:1.3;color:var(--text);margin:0 0 var(--sp-3)}
.serv__d{font-size:1.0625rem;color:var(--text-2);line-height:1.5;margin:0}
.serv a:hover .serv__t{text-decoration:underline;text-underline-offset:.18em}

/* El enlace al listado completo, debajo de la tira. */
.servmas{grid-column:1/-1;margin:var(--sp-8) 0 0}
@media(min-width:900px){.servmas{display:flex;justify-content:center}}

/* ── Franja de especialidades ──────────────────────────────────────
   Cinta azul bajo la portada que se desliza con el scroll: se mueve
   cuando la persona baja y se queda quieta cuando no. No hay bucle
   automático, que robaría atención y exigiría un botón de pausa
   (WCAG 2.2.2). El desplazamiento lo pone site.js, solo con transform;
   sin JavaScript o con movimiento reducido la cinta se queda quieta.
   ──────────────────────────────────────────────────────────────── */
.franja{background:var(--azul);color:var(--porcelana);overflow:hidden;
  padding-block:var(--sp-5)}
.franja__pista{display:flex;width:max-content;will-change:transform}
.franja ul{list-style:none;margin:0;padding:0;display:flex;flex:none}
.franja li{display:flex;align-items:center;white-space:nowrap;
  font-size:clamp(1.5rem,3.4vw,2.6rem);font-weight:600;letter-spacing:-.025em;
  line-height:1}
.franja li::after{content:"";width:.28em;height:.28em;border-radius:50%;
  background:currentColor;opacity:.5;margin-inline:.9em}

/* ── Cierre sobre azul: foto a un lado, texto y WhatsApp al otro ───── */
.cierre{background:var(--azul);color:var(--porcelana);
  --text:var(--porcelana);
  --text-2:var(--porcelana);
  --btn-bg:var(--porcelana);--btn-fg:var(--azul);
  --line:rgba(247,246,243,.35)}
.cierre h2,.cierre .lead{color:var(--porcelana)}
.cierre__fig{grid-column:1/-1;margin:0}
.cierre__fig img{width:100%;aspect-ratio:5/4;object-fit:cover;
  object-position:55% 25%}
.cierre__txt{grid-column:1/-1;display:flex;flex-direction:column;
  gap:var(--sp-5);align-items:flex-start;align-self:center}
.cierre__txt h2{max-width:14ch}
@media(min-width:900px){
  .cierre__fig{grid-column:1/5}
  .cierre__txt{grid-column:5/-1}
}
@media(min-width:1100px){
  .cierre__fig{grid-column:1/7}
  .cierre__txt{grid-column:8/-1}
}
/* Sobre el azul, la cortina es clara para que se vea retirarse. */
.js .cierre .rv-photo::after{background:var(--porcelana)}

/* ── La banda oscura ───────────────────────────────────────────────
   La página oscila entre lienzo claro y banda oscura. No hay filetes
   entre secciones: el cambio de fondo es la separación.
   ──────────────────────────────────────────────────────────────── */
.band{background:var(--band-bg);color:var(--band-fg-2)}
.band h2,.band h3,.band h4,.band .lead,.band .addr,.band .dl dd{color:var(--band-fg)}
.band .body,.band .small,.band .dl dt,.band p{color:var(--band-fg-2)}
.band .dl>div{border-color:var(--band-line)}
.band .btn{background:var(--band-fg);border-color:var(--band-fg);color:var(--band-bg)}
.band .btn--2{background:transparent;border-color:var(--band-line);color:var(--band-fg)}
.band .btn--2:hover{border-color:var(--band-fg);background:rgba(255,255,255,.08)}
.band .tlink{color:var(--band-fg);box-shadow:inset 0 -1px 0 var(--band-fg)}

/* ── Columnas con filete superior ──────────────────────────────────
   El filete de arriba es el único adorno del bloque: ni fondo, ni
   recuadro, ni sombra.
   ──────────────────────────────────────────────────────────────── */
.tiers{grid-column:1/-1;display:grid;grid-template-columns:1fr;gap:var(--sp-6)}
@media(min-width:900px){.tiers{grid-template-columns:repeat(3,1fr);gap:var(--sp-7)}}
.tier{padding-top:var(--sp-5);border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:var(--sp-3)}
.tier__k{font-family:var(--serif);font-size:1.45rem;font-weight:600;
  color:var(--text);line-height:1.1}
.tier p{font-size:1.0625rem;color:var(--text-2);line-height:1.5}
.band .tier{border-color:var(--band-line)}

/* ── Resina o cerámica ─────────────────────────────────────────────
   Una tabla de verdad: dos columnas que se comparan fila a fila. En el
   celular la primera columna se estrecha y el texto baja de tamaño, pero
   sigue siendo una tabla, que es lo que el lector espera al comparar.
   ──────────────────────────────────────────────────────────────── */
.compara{grid-column:1/-1;margin-top:var(--sp-8);display:flex;
  flex-direction:column;gap:var(--sp-5)}
.compara table{width:100%;border-collapse:collapse;table-layout:fixed}
.compara th,.compara td{text-align:left;vertical-align:top;
  padding:var(--sp-4) var(--sp-4) var(--sp-4) 0;border-top:1px solid var(--line);
  font-size:1.0625rem;line-height:1.5}
.compara thead th{font-size:1.2rem;font-weight:600;border-top:0;color:var(--text)}
.compara thead td{border-top:0}
.compara tbody th{font-weight:600;color:var(--text);width:24%}
.compara th,.compara td{overflow-wrap:break-word;hyphens:auto}
.compara tbody td{color:var(--text-2)}
@media(max-width:599px){
  .compara th,.compara td{font-size:.95rem;padding-right:var(--sp-3)}
  .compara tbody th{width:28%}
}

/* Caso de resina junto a la tabla: en computador, foto a la izquierda y
   tabla a la derecha; en el celular, la foto encima. */
.caso-resina{grid-column:1/-1;margin:var(--sp-8) 0 0;display:flex;
  flex-direction:column;gap:var(--sp-3)}
.caso-resina img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover}
.caso-resina figcaption{font-size:.95rem;color:var(--text-2);line-height:1.5}
@media(min-width:900px){
  .caso-resina{grid-column:1/6}
  .caso-resina+.compara{grid-column:7/-1;margin-top:var(--sp-8);align-self:center}
}

/* ── Ortodoncia invisible Smartee ──────────────────────────────────
   Una sola sección con foto a un lado y texto al otro, sobre el azul del
   sitio para que la hoja verde de la foto no compita con otro fondo claro.
   ──────────────────────────────────────────────────────────────── */
.smartee{background:var(--azul);color:var(--porcelana);
  --text:var(--porcelana);--text-2:var(--porcelana);
  --btn-bg:var(--porcelana);--btn-fg:var(--azul);--line:rgba(247,246,243,.35)}
.smartee h2,.smartee .lead,.smartee .note{color:var(--porcelana)}
.smartee .note{background:none;padding:0;opacity:.9}
.smartee__fig{grid-column:1/-1;margin:0}
.smartee__fig img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover}
.smartee__txt{grid-column:1/-1;display:flex;flex-direction:column;
  gap:var(--sp-5);align-items:flex-start;align-self:center;margin-top:var(--sp-6)}
.smartee__txt h2{max-width:14ch}
.smartee__lista{margin:0;padding:0;list-style:none;display:flex;
  flex-direction:column;gap:var(--sp-3)}
.smartee__lista li{font-size:1.0625rem;line-height:1.5;padding-left:1.1em;position:relative}
.smartee__lista li::before{content:"";position:absolute;left:0;top:.62em;
  width:.4em;height:.4em;border-radius:50%;background:currentColor;opacity:.7}
@media(min-width:900px){
  .smartee__fig{grid-column:1/6}
  .smartee__txt{grid-column:7/-1;margin-top:0}
}
.js .smartee .rv-photo::after{background:var(--porcelana)}
/* Las dos ortodoncias, una al lado de la otra desde tableta. */
.orto{display:grid;grid-template-columns:1fr;gap:var(--sp-5);width:100%}
@media(min-width:600px){.orto{grid-template-columns:1fr 1fr}}
.orto__op{display:flex;flex-direction:column;gap:var(--sp-3);
  padding-top:var(--sp-4);border-top:1px solid var(--line)}
.orto__op h3{font-size:1.2rem;line-height:1.25}
/* En la portada va sobre el lienzo claro: justo encima está la cinta azul
   y dos bloques azules seguidos se leerían como uno solo. */
.smartee--claro{background:var(--bg);color:var(--text);
  --text:var(--tinta);--text-2:var(--pizarra);
  --btn-bg:var(--azul);--btn-fg:var(--porcelana);--line:var(--filete)}
.smartee--claro h2,.smartee--claro .lead{color:var(--text)}
.smartee--claro .smartee__lista li{color:var(--text-2)}
.smartee--claro .smartee__lista li::before{background:var(--azul);opacity:1}
.js .smartee--claro .rv-photo::after{background:var(--azul)}
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .smartee--claro{--text:var(--porcelana);--text-2:color-mix(in srgb,var(--porcelana) 78%,transparent);--line:var(--band-line)}
}

/* Foto de introducción: entera, en su proporción original, sin recorte. */
.intro__fig{margin:0}
.intro__fig img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
@media(min-width:768px){.intro__fig+.two__b{align-self:center}}
/* En las páginas de tratamiento la imagen es cuadrada y la tabla va sola. */
.intro__fig--cuadro img{aspect-ratio:1/1}
.compara--solo{margin-top:0}

.steps{grid-column:1/-1;display:grid;grid-template-columns:1fr;gap:var(--sp-6)}
@media(min-width:640px){.steps{grid-template-columns:1fr 1fr;gap:var(--sp-7)}}
@media(min-width:1100px){.steps{grid-template-columns:repeat(4,1fr)}}
/* Cuando los pasos comparten sección con una imagen, van en una columna. */

@media(min-width:640px){.steps--col{grid-template-columns:1fr}}
@media(min-width:1100px){.steps--col{grid-template-columns:1fr}}
.step{display:flex;flex-direction:column;gap:var(--sp-3);
  padding-top:var(--sp-5);border-top:1px solid var(--line)}
.step__n{font-family:var(--serif);font-size:1.45rem;font-weight:600;
  color:var(--text);line-height:1}
.step p{font-size:1.0625rem;color:var(--text-2);line-height:1.5}
.band .step{border-color:var(--band-line)}

/* ── Trayectoria ───────────────────────────────────────────────────── */
.cv__a{grid-column:1/-1}
.cv__b{grid-column:1/-1;margin-top:var(--sp-8)}
@media(min-width:900px){.cv__a{grid-column:1/5}.cv__b{grid-column:5/-1;margin-top:0}}
@media(min-width:1100px){.cv__a{grid-column:1/6}.cv__b{grid-column:7/-1}}
.cv{display:flex;flex-direction:column;margin-top:var(--sp-5)}
.item{display:grid;grid-template-columns:1fr;gap:var(--sp-1);
  padding:var(--sp-5) 0;border-top:1px solid var(--line)}
@media(min-width:560px){.item{grid-template-columns:8rem 1fr;gap:var(--sp-5)}}
.item__y{font-size:1rem;font-weight:500;color:var(--text);
  font-variant-numeric:tabular-nums lining-nums}
.item p{font-size:1rem;color:var(--text-2);line-height:1.55;margin-top:4px}
.band .item{border-color:var(--band-line)}

/* ── Formulario ────────────────────────────────────────────────────
   El formulario no envía nada: compone un mensaje de WhatsApp y te lo
   enseña antes de abrirlo. Por eso la vista previa se dibuja como la
   burbuja que vas a mandar — es literal, no decorativa, y es lo que
   convierte un formulario plano en algo que se entiende de un vistazo.
   ──────────────────────────────────────────────────────────────── */
.ct__a{grid-column:1/-1;display:flex;flex-direction:column;gap:var(--sp-5)}
.ct__b{grid-column:1/-1}
@media(min-width:900px){.ct__a{grid-column:1/5}.ct__b{grid-column:5/-1}}
@media(min-width:1100px){.ct__a{grid-column:1/5}.ct__b{grid-column:6/-1}}
.dl{margin:0;display:flex;flex-direction:column}
.dl>div{padding:var(--sp-5) 0;border-top:1px solid var(--line)}
.dl dt{font-size:.95rem;font-weight:500;color:var(--accent);margin-bottom:6px;
  letter-spacing:.03em;text-transform:none}
.dl dd{margin:0;font-size:1.6rem;font-weight:600;letter-spacing:-.022em;
  color:var(--text)}

/* La tarjeta del formulario: superficie propia, no texto suelto. */
.formcard{background:var(--surface);border:1px solid var(--line);
  border-radius:26px;padding:var(--sp-6)}
@media(min-width:560px){.formcard{padding:var(--sp-7)}}
.formcard>h3{margin-bottom:var(--sp-2)}
.formcard>.small{margin-bottom:var(--sp-6)}

.form{display:grid;grid-template-columns:1fr;gap:var(--sp-5)}
@media(min-width:560px){
  .form{grid-template-columns:1fr 1fr}
  .form .field--wide,.form .check,.form .field__err,.form .btns{grid-column:1/-1}
}
.field{display:flex;flex-direction:column;gap:8px;min-width:0}
.field label{font-size:.98rem;font-weight:600;color:var(--text);
  letter-spacing:.005em}
.field input,.field select,.field textarea{
  font:inherit;font-size:1.0625rem;color:var(--text);background:var(--bg);
  border:1px solid var(--line);border-radius:var(--pill);
  padding:16px 20px;width:100%;
  transition:border-color .18s var(--e),box-shadow .18s var(--e)}
.field textarea{min-height:120px;resize:vertical;border-radius:20px}
/* La flecha del desplegable, dibujada: el control nativo se ve barato. */
.field select{appearance:none;-webkit-appearance:none;padding-right:46px;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
                   linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 24px) 52%,calc(100% - 18px) 52%;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat}
.field input::placeholder,.field textarea::placeholder{color:var(--text-2);opacity:.75}
/* El foco se ve de lejos: filete del acento más un halo suave. */
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}

.check{display:flex;gap:var(--sp-3);align-items:flex-start;font-size:1rem;
  color:var(--text-2);line-height:1.5;background:var(--bg);
  border:1px solid var(--line);border-radius:18px;padding:var(--sp-4) var(--sp-5)}
.check input{margin-top:3px;width:20px;height:20px;flex:none}
.field__err{font-size:1rem;color:var(--btn-fg);background:var(--btn-bg);
  padding:13px 22px;border-radius:var(--pill);font-weight:600}
.field__note{font-size:1rem;color:var(--text-2);line-height:1.5}

/* ── La burbuja de vista previa ────────────────────────────────── */
.preview{background:var(--bg);border:1px solid var(--line);border-radius:22px;
  padding:var(--sp-5);margin-top:var(--sp-5)}
.preview__k{display:flex;align-items:center;gap:var(--sp-2);font-size:.92rem;
  font-weight:600;color:var(--accent);margin-bottom:var(--sp-4);
  letter-spacing:.03em}
.preview__k::before{content:"";width:9px;height:9px;border-radius:50%;
  background:var(--accent);flex:none}
.preview__t{position:relative;font-size:1.0625rem;line-height:1.5;
  color:var(--text);white-space:pre-wrap;background:var(--surface);
  border-radius:18px 18px 18px 4px;padding:var(--sp-4) var(--sp-5);
  margin:0}
.formcard .preview{background:var(--bg)}
.formcard .preview__t{background:var(--surface)}

.band .formcard{background:rgba(247,246,243,.06);border-color:var(--band-line)}
.band .field input,.band .field select,.band .field textarea,
.band .check,.band .preview{background:transparent;color:var(--band-fg);
  border-color:var(--band-line)}
.band .field label,.band .preview__t{color:var(--band-fg)}
.band .preview__t{background:rgba(247,246,243,.08)}
.band .dl dt,.band .preview__k{color:var(--band-accent)}
.band .preview__k::before{background:var(--band-accent)}

/* ── Contacto ──────────────────────────────────────────────────────── */
.info__a{grid-column:1/-1;display:flex;flex-direction:column;gap:var(--sp-5)}
.info__b{grid-column:1/-1}
@media(min-width:900px){.info__a{grid-column:1/5}.info__b{grid-column:5/-1}}
@media(min-width:1100px){.info__a{grid-column:1/6}.info__b{grid-column:7/-1}}
.addr{font-family:var(--serif);font-size:clamp(1.6rem,2.8vw,2.2rem);
  font-weight:600;line-height:1.15;letter-spacing:-.022em;color:var(--text)}
/* ── Mapa con ficha flotante ───────────────────────────────────────
   El mapa ocupa la banda entera y la ficha se apoya encima, con el
   nombre y el desplegable «Cómo llegar». Las tres opciones son enlaces
   normales: funcionan sin JavaScript y cada sistema abre su aplicación
   si la tiene instalada.
   ──────────────────────────────────────────────────────────────── */
.mapa{position:relative;background:var(--surface);min-width:0;width:100%;
  aspect-ratio:16/11;min-height:22rem;overflow:hidden}
@media(min-width:900px){.mapa{aspect-ratio:16/9}}
.mapa__lienzo{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.mapa__aviso{margin-top:var(--sp-4);font-size:1rem;line-height:1.5;
  color:var(--text-2)}

/* «Cómo llegar» va bajo la dirección, no encima del mapa. Es un
   <details> nativo: abre sin JavaScript y con teclado. El disparador es
   una píldora para que se lea como botón, no como un enlace suelto. */
.dirs{margin-top:var(--sp-5)}
.dirs__open{display:inline-flex;align-items:center;gap:var(--sp-2);cursor:pointer;
  list-style:none;min-height:52px;padding:0 var(--sp-5);font-size:1rem;
  font-weight:600;color:var(--text);border:1px solid var(--text-2);
  border-radius:var(--pill);transition:border-color 200ms var(--e)}
.dirs__open:hover{border-color:var(--text)}
.dirs__open::-webkit-details-marker{display:none}
.dirs__open::after{content:"";width:8px;height:8px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-2px);transition:transform 220ms var(--e)}
.dirs[open] .dirs__open::after{transform:rotate(-135deg) translateY(-2px)}
.dirs__list{list-style:none;margin:var(--sp-3) 0 0;padding:0;
  display:grid;grid-template-columns:1fr;gap:var(--sp-2);max-width:22rem}
.dirs__list a{display:flex;align-items:center;gap:var(--sp-3);min-height:52px;
  padding:0 var(--sp-5);border:1px solid var(--line);border-radius:var(--pill);
  text-decoration:none;color:var(--text);font-size:1rem;font-weight:500;
  transition:border-color 200ms var(--e),background-color 200ms var(--e)}
.dirs__list a:hover{border-color:var(--text);background:var(--shade)}
.dirs__i{flex:none;color:var(--accent)}
.band .dirs__open{color:var(--band-fg);border-color:var(--band-fg-2)}
.band .dirs__open:hover{border-color:var(--band-fg)}
.band .dirs__list a{color:var(--band-fg);border-color:var(--band-line)}
.band .dirs__list a:hover{border-color:var(--band-fg);background:rgba(247,246,243,.08)}
.band .dirs__i{color:var(--band-fg-2)}
.band .mapa__aviso{color:var(--band-fg-2)}

/* ── Preguntas ─────────────────────────────────────────────────────── */
.faq__a{grid-column:1/-1}
.faq__b{grid-column:1/-1;margin-top:var(--sp-7);display:flex;
  flex-direction:column}
@media(min-width:1100px){.faq__a{grid-column:1/5}.faq__b{grid-column:6/-1}}
summary{list-style:none}
summary::-webkit-details-marker{display:none}
summary::marker{content:""}
.faq__b details{border-top:1px solid var(--line)}
.faq__b summary{cursor:pointer;padding:var(--sp-5) var(--sp-7) var(--sp-5) 0;
  font-family:var(--serif);font-size:1.3rem;font-weight:600;
  letter-spacing:-.016em;color:var(--text);position:relative;min-height:56px;
  display:flex;align-items:center}
.faq__b summary::after{content:"";position:absolute;right:6px;top:calc(50% - 5px);
  width:9px;height:9px;border-right:1.5px solid var(--text);
  border-bottom:1.5px solid var(--text);transform:rotate(45deg);
  transition:transform 240ms var(--e)}
.faq__b details[open] summary::after{transform:rotate(-135deg);top:calc(50% - 2px)}
.faq__b details p{padding:0 var(--sp-7) var(--sp-6) 0;font-size:1.0625rem;
  color:var(--text-2);max-width:58ch;line-height:1.6}
.band .faq__b details{border-color:var(--band-line)}
.band .faq__b summary,.band .faq__b summary::after{color:var(--band-fg);
  border-color:var(--band-fg)}

/* ── Ilustración educativa ─────────────────────────────────────────
   Dos tintas heredadas del tema: el trazo usa currentColor y el acento
   --accent-dec. Los rótulos viven en HTML, no dentro del SVG.
   ──────────────────────────────────────────────────────────────── */
.edu{grid-column:1/-1;margin:0;background:var(--surface);padding:var(--sp-6)}
.edu__svg{display:block;width:100%;height:auto;max-width:26rem;
  margin-inline:auto;color:var(--text)}
.edu__cap{display:flex;flex-direction:column;gap:var(--sp-3);
  margin-bottom:var(--sp-6)}
.edu__tag{align-self:flex-start;font-size:.9rem;font-weight:500;
  letter-spacing:.025em;color:var(--on-accent-dec);background:var(--accent-dec);
  border-radius:var(--pill);padding:7px 16px}
.edu__t{font-family:var(--serif);font-size:1.3rem;font-weight:600;
  color:var(--text);line-height:1.2}
.edu__legend{grid-column:1/-1;display:flex;flex-direction:column;
  gap:var(--sp-5);margin-top:var(--sp-7)}
.edu__legend ol{list-style:none;margin:0;padding:0;display:flex;
  flex-direction:column;gap:var(--sp-6)}
.edu__legend li{display:grid;grid-template-columns:auto 1fr;gap:var(--sp-4);
  align-items:start}
.edu__legend b{display:block;font-family:var(--serif);font-size:1.2rem;
  font-weight:600;color:var(--text);margin-bottom:6px}
.edu__legend span:not(.edu__n){font-size:1.0625rem;color:var(--text-2);
  line-height:1.6}
.edu__n{display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;background:var(--accent-dec);
  color:var(--on-accent-dec);font-size:1rem;font-weight:600;flex:none;
  font-variant-numeric:tabular-nums lining-nums}
@media(min-width:900px){
  .edu{grid-column:1/5}
  .edu__legend{grid-column:5/-1;margin-top:0;align-self:center}
}
@media(min-width:1100px){
  .edu{grid-column:1/6}
  .edu__legend{grid-column:7/-1}
}

.back{max-width:1200px;margin-inline:auto;padding:var(--sp-6) var(--gut) 0;
  width:100%;font-size:1rem}
.back a{display:inline-flex;align-items:center;min-height:48px}

/* ── Casos ─────────────────────────────────────────────────────────
   Fotografía clínica real: se muestra sin recortes creativos ni filtros
   que alteren lo que se ve, y a tamaño grande, que es donde se aprecia.
   ──────────────────────────────────────────────────────────────── */
.casos{grid-column:1/-1;display:grid;grid-template-columns:1fr;gap:var(--sp-8)}
@media(min-width:900px){.casos{grid-template-columns:1fr 1fr;gap:var(--sp-8) var(--sp-7)}}
.caso{margin:0;display:flex;flex-direction:column;gap:var(--sp-4)}
.caso img{width:100%;height:auto}
.caso__hold{aspect-ratio:4/3;background:var(--surface);display:flex;
  flex-direction:column;justify-content:center;gap:var(--sp-2);padding:var(--sp-6)}
.caso__hold b{font-size:1rem;font-weight:600;color:var(--text)}
.caso__hold span{font-size:1rem;color:var(--text-2);line-height:1.5}
.caso figcaption{display:flex;flex-direction:column;gap:6px;
  padding-top:var(--sp-4);border-top:1px solid var(--line)}
.caso__n{font-size:.95rem;font-weight:500;color:var(--text);letter-spacing:.02em}
.caso__t{font-size:1rem;color:var(--text-2);line-height:1.5}
.band .caso figcaption{border-color:var(--band-line)}

/* ── Pie ───────────────────────────────────────────────────────────
   Banda oscura terminal, con el nombre grande.
   ──────────────────────────────────────────────────────────────── */
.ft{background:var(--band-bg);color:var(--band-fg-2);
  padding-block:var(--sp-9) var(--sp-6)}
.ft h2{font-family:var(--sans);font-size:.95rem;font-weight:500;
  color:var(--band-fg-2);margin-bottom:var(--sp-5);letter-spacing:.025em}
.ft__c{grid-column:1/-1;margin-bottom:var(--sp-7)}
@media(min-width:600px){.ft__c{grid-column:span 4;margin-bottom:0}}
@media(min-width:1100px){.ft__c{grid-column:span 3}}
.ft ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;
  gap:var(--sp-2)}
.ft a{font-size:1.0625rem;color:var(--band-fg-2);text-decoration:none;
  display:inline-flex;align-items:center;min-height:48px}
.ft a:hover{color:var(--band-fg)}
.ft__brand b{display:block;font-family:var(--serif);
  font-size:clamp(1.9rem,3.4vw,2.6rem);font-weight:600;letter-spacing:-.026em;
  line-height:1.04;color:var(--band-fg);margin-bottom:var(--sp-4)}
.ft__brand p{font-size:1.0625rem;color:var(--band-fg-2);line-height:1.6}
.ft__legal{grid-column:1/-1;margin-top:var(--sp-9);padding-top:var(--sp-5);
  border-top:1px solid var(--band-line);display:flex;flex-wrap:wrap;
  gap:var(--sp-3) var(--sp-7);justify-content:space-between}
.ft__legal p{font-size:.95rem;color:var(--band-fg-2);max-width:66ch;line-height:1.6}
.ft .small,.ft li{color:var(--band-fg-2);font-size:1rem}

/* ── WhatsApp flotante ─────────────────────────────────────────────
   Un botón redondo en la esquina en vez de una barra a todo lo ancho:
   ocupa lo mismo que un pulgar y no tapa el contenido. Tiene nombre
   accesible aunque solo muestre el icono.
   ──────────────────────────────────────────────────────────────── */
.wa-flot{position:fixed;right:max(var(--sp-4),env(safe-area-inset-right));
  bottom:max(var(--sp-4),env(safe-area-inset-bottom));z-index:59;
  width:58px;height:58px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;background:var(--btn-bg);color:var(--btn-fg);
  box-shadow:0 6px 20px rgba(22,22,26,.18);
  transition:transform .25s var(--e)}
.wa-flot:hover{transform:translateY(-2px)}
@media(min-width:1024px){.wa-flot{right:var(--sp-6);bottom:var(--sp-6)}}
html.menu-abierto .wa-flot{display:none}

/* ══════════════════════════════════════════════════════════════════
   MOVIMIENTO
   Cada componente tiene su propia entrada. No hay una clase genérica
   aplicada a todo. El contenido NUNCA depende del JavaScript: sin la
   clase `js` en <html> todo queda visible y en su sitio.
   ══════════════════════════════════════════════════════════════════ */
/* Fotos: una cortina azul se retira hacia la derecha y la foto se
   asienta desde un poco más grande. Es la única entrada con color de la
   página, y es solo para fotos. */
.js .rv-photo{position:relative;overflow:hidden}
.js .rv-photo::after{content:"";position:absolute;inset:0;z-index:1;
  background:var(--azul);transform:scaleX(1);transform-origin:right;
  transition:transform 950ms cubic-bezier(.77,0,.18,1)}
.js .rv-photo.in::after{transform:scaleX(0)}
.js .rv-photo img{transform:scale(1.12);
  transition:transform 1400ms var(--e)}
.js .rv-photo.in img{transform:none}

.js .rv-lede>*{opacity:0;transform:translateY(18px);
  transition:opacity 520ms var(--e),transform 520ms var(--e)}
.js .rv-lede.in>*{opacity:1;transform:none}
.js .rv-lede.in>*:nth-child(2){transition-delay:80ms}
.js .rv-lede.in>*:nth-child(3){transition-delay:160ms}
.js .rv-lede.in>*:nth-child(4){transition-delay:240ms}

/* Cada paso del proceso entra cuando llega a la vista, igual que las
   fotos de al lado; no hay un retardo en cadena que obligue a esperar. */
.js .rv-item{opacity:0;transform:translateY(22px);
  transition:opacity 560ms var(--e),transform 560ms var(--e)}
.js .rv-item.in{opacity:1;transform:none}
/* Las tarjetas de tratamiento, en cascada dentro de su fila. */
.js .serv .rv-item{transition-delay:calc(var(--i,0) * 90ms)}

@media(prefers-reduced-motion:reduce){
  .js .rv-photo::after{display:none}
  .franja__pista{transform:none!important}
  .js .rv-item,
  .js .rv-photo img,.js .rv-lede>*{
    opacity:1!important;transform:none!important;transition:none!important}
  *,*::before,*::after{transition:none!important;animation:none!important}
}

/* ══════════════════════════════════════════════════════════════════
   MICROINTERACCIONES
   ══════════════════════════════════════════════════════════════════ */
.hd nav a{position:relative}
.hd nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;
  background:var(--text);transform:scaleX(0);transform-origin:right;
  transition:transform 240ms var(--e)}
.hd nav a:hover::after,.hd nav a:focus-visible::after{transform:scaleX(1);
  transform-origin:left}
.hd nav a[aria-current="page"]::after{transform:scaleX(1)}

.btn i{font-style:normal;display:inline-block;transition:transform 220ms var(--e)}
.btn:hover i,.btn:focus-visible i{transform:translateX(4px)}
.btn:active{transform:translateY(1px)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.45;pointer-events:none}

/* ══════════════════════════════════════════════════════════════════
   CIERRE
   ══════════════════════════════════════════════════════════════════ */
.close{grid-column:1/-1;display:grid;grid-template-columns:1fr;
  gap:var(--sp-7);align-items:center}
@media(min-width:900px){.close{grid-template-columns:minmax(0,6fr) minmax(0,5fr);
  gap:var(--sp-8)}}
.close__media img{width:100%;height:100%;object-fit:cover}
.close__copy{display:flex;flex-direction:column;gap:var(--sp-5);
  align-items:flex-start}

.closing{grid-column:1/-1;display:flex;flex-direction:column;gap:var(--sp-5);
  align-items:flex-start}
.closing>h2{max-width:15ch}
.closing>.body,.closing>.lead{max-width:50ch}
.closing .btns{width:100%}

@media(min-width:900px){.closing>h2{max-width:20ch}}

/* Pie de foto */
.figcap{margin-top:var(--sp-4);padding-top:var(--sp-4);
  border-top:1px solid var(--line);display:flex;flex-wrap:wrap;
  gap:4px var(--sp-4);font-size:.95rem;color:var(--text-2)}
.figcap b{font-weight:500;color:var(--text)}

.band .figcap{border-color:var(--band-line);color:var(--band-fg-2)}
.band .figcap b{color:var(--band-fg)}


/* ══════════════════════════════════════════════════════════════════
   CELULAR
   Ajustes medidos en 390 × 844 con el navegador, no supuestos.
   ══════════════════════════════════════════════════════════════════ */
@media(max-width:599px){
  /* Cabecera: el nombre y la píldora del menú chocaban y tapaban el
     «Dra.». Nombre un punto más pequeño y píldora más compacta. */
  .hd__in{padding-block:var(--sp-4);gap:var(--sp-3);align-items:center}
  .logo b{font-size:1.5rem}
  .logo i{font-size:.7rem;margin-left:.25em}
  .logo{white-space:nowrap}
  .logo__m{height:1.1rem;margin-right:.28em}
  .hd__end{padding-top:0}
  .burger{min-height:44px;padding:0 var(--sp-3) 0 var(--sp-4);gap:var(--sp-2);font-size:.95rem}

  /* Portada: los dos botones en una fila. El secundario pasa a enlace
     para caber junto a WhatsApp sin ocupar otra línea entera. */
  .hero__copy{gap:var(--sp-4)}
  .hero .btns{align-items:center;gap:var(--sp-2) var(--sp-4)}
  .hero .btn--2{background:none;border-color:transparent;padding-inline:0;
    text-decoration:underline;text-underline-offset:.25em;min-height:44px}
  .hero .small{font-size:.95rem}
  .btn{padding:13px 20px;min-height:48px;font-size:.98rem}

  /* El retrato vertical ocupaba casi una pantalla: se recorta a 4:5
     sobre la cara y el cuerpo. */
  .two__a--retrato img{aspect-ratio:4/5;object-fit:cover;object-position:50% 14%}

  .head{margin-bottom:var(--sp-6)}
  .headrow{margin-bottom:var(--sp-6)}
  .servmas{margin-top:var(--sp-6)}

  /* Pie: dos columnas para los enlaces en vez de una lista larguísima,
     y aire abajo para que el botón flotante no tape el último texto. */
  .ft{padding-block:var(--sp-8) calc(var(--sp-7) + 64px)}
  .ft .g{row-gap:var(--sp-6)}
  .ft__c{margin-bottom:0}
  /* Dos columnas desiguales: la de contacto lleva el teléfono entero. */
  .ft .g{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr)}
  .ft__c,.ft__legal{grid-column:1/-1}
  .ft__c:nth-child(2){grid-column:1/2}
  .ft__c:nth-child(3){grid-column:2/3}
  .ft ul{gap:0}
  .ft a{min-height:44px;font-size:1rem}
  .ft__legal{margin-top:var(--sp-7)}

  /* El mapa, cuadrado y sin altura mínima: la altura mínima era la que
     le transfería un ancho mínimo de 512 px. */
  .mapa{aspect-ratio:1/1;min-height:0}
}


/* ── Textos legales ────────────────────────────────────────────────
   Lectura larga: una columna de unos 68 caracteres, títulos discretos y
   listas con aire. Un dato que falta sale en cursiva para que se vea
   antes de publicar.
   ──────────────────────────────────────────────────────────────── */
.legal{grid-column:1/-1;max-width:68ch;display:flex;flex-direction:column;gap:var(--sp-4)}
.legal h2{font-size:clamp(1.3rem,2.2vw,1.6rem);margin-top:var(--sp-6);line-height:1.2}
.legal p,.legal li{font-size:1.0625rem;line-height:1.65;color:var(--text-2)}
.legal strong{color:var(--text);font-weight:600}
.legal ul,.legal ol{margin:0;padding-left:1.3em;display:flex;flex-direction:column;gap:var(--sp-2)}
.legal__tabla{overflow-x:auto;margin-block:var(--sp-2)}
.legal__tabla table{width:100%;border-collapse:collapse;min-width:30rem}
.legal__tabla th,.legal__tabla td{text-align:left;vertical-align:top;padding:var(--sp-3) var(--sp-3) var(--sp-3) 0;
  border-top:1px solid var(--line);font-size:1rem;line-height:1.5;color:var(--text-2)}
.legal__tabla th{color:var(--text);font-weight:600;border-top:0}
.legal__fecha{margin-top:var(--sp-6);font-size:.95rem}
.pend{font-style:italic;color:var(--accent)}
@media(min-width:1100px){.legal{grid-column:2/-2}}