/* Sosiego · consulta de psicología
   Bandas de color a sangre que se turnan, dos voces tipográficas y una tira que corre sola. */

:root{
  --tinta:#0f3d1c;
  --noche:#0b2e15;
  --crema:#eeede4;
  --crema-claro:#fefefb;
  --lavanda:#9fb0dd;
  --salvia:#c4d6b0;
  --terracota:#994636;
  --papel:#fefefb;

  --s1:8px; --s2:12px; --s3:24px; --s4:36px; --s5:48px; --s6:96px;
  --r1:12px; --r2:18px; --r3:200px;

  --t1:68px; --t2:51px; --t3:38px; --t4:29px; --t5:21px; --t6:16px; --t7:14px;

  --ancho:1232px;
  --margen:24px;
}

*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:'Geist',system-ui,sans-serif;
  font-size:var(--t6);
  font-weight:300;
  line-height:1.45;
  color:var(--tinta);
  background:var(--crema-claro);
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
li{list-style:none}

.envoltura{max-width:calc(var(--ancho) + var(--margen) * 2);margin:0 auto;padding:0 var(--margen)}

/* ── dos voces ───────────────────────────────────────────── */
.cursiva{font-family:'Newsreader',Georgia,serif;font-style:italic;font-weight:300;letter-spacing:-0.01em}
.pct{font-size:.5em;vertical-align:baseline;margin-left:1px}
.sello{
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:var(--r3);flex:0 0 auto;
  background:var(--lavanda);color:var(--tinta);
}
.dato{font-family:'Geist',sans-serif;font-weight:300;font-variant-numeric:tabular-nums}

h1,h2,h3,h4{font-weight:200;letter-spacing:-0.02em;line-height:1.1}
h1{font-size:var(--t1)}
h2{font-size:var(--t2)}
h3{font-size:var(--t4);line-height:1.15}
h4{font-size:var(--t6);font-weight:500;letter-spacing:0}
p{font-size:var(--t6);line-height:1.55}

.antetitulo{
  font-size:13px;font-weight:400;letter-spacing:0.08em;text-transform:uppercase;
  color:var(--tinta);text-align:center;margin-bottom:var(--s3);
}

/* ── botones ─────────────────────────────────────────────── */
.boton{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s1);
  align-self:flex-start;width:auto;
  height:42px;padding:0 var(--s3);
  border-radius:var(--r3);border:1px solid var(--tinta);
  background:var(--tinta);color:var(--crema-claro);
  font-size:var(--t7);font-weight:400;letter-spacing:0.01em;white-space:nowrap;
  transition:background .22s ease,color .22s ease,border-color .22s ease;
}
.boton .flecha{flex:0 0 auto;transition:transform .22s ease}
.boton:hover{background:var(--terracota);border-color:var(--terracota)}
.boton:hover .flecha{transform:translateX(4px)}
.boton.claro{background:var(--crema-claro);color:var(--tinta);border-color:var(--crema-claro)}
.boton.claro:hover{background:var(--salvia);border-color:var(--salvia);color:var(--tinta)}

/* ── barra de navegación · se va con el contenido ────────── */
.barra{
  background:var(--noche);color:var(--crema-claro);
  height:91px;display:flex;align-items:center;
}
.barra .envoltura{display:flex;align-items:center;gap:var(--s5);width:100%}
.marca{display:flex;align-items:center;gap:var(--s1);font-size:var(--t5);font-weight:300;letter-spacing:-0.01em}
.menu{display:flex;align-items:center;gap:var(--s3);margin-left:auto;font-size:var(--t7);color:rgba(254,254,251,.95)}
.menu a{padding:var(--s1) 0;border-bottom:1px solid transparent;transition:border-color .2s ease}
.menu a:hover{border-color:var(--salvia)}
.barra .boton{margin-left:var(--s3)}
.hamburguesa{
  display:none;margin-left:var(--s3);width:40px;height:40px;padding:0;
  background:none;border:0;cursor:pointer;
  flex-direction:column;justify-content:center;gap:6px;
}
.hamburguesa span{display:block;height:1.5px;width:24px;background:var(--crema-claro);transition:transform .2s ease,opacity .2s ease}
.hamburguesa[aria-expanded="true"] span:first-child{transform:translateY(3.75px) rotate(45deg)}
.hamburguesa[aria-expanded="true"] span:last-child{transform:translateY(-3.75px) rotate(-45deg)}
.menu-movil{
  display:none;flex-direction:column;gap:var(--s3);
  padding:var(--s3) var(--margen) var(--s5);
  background:var(--noche);color:var(--crema-claro);
  border-top:1px solid rgba(254,254,251,.14);
}
.menu-movil a{font-size:var(--t5);font-weight:300}
.menu-movil .boton{align-self:flex-start;margin-top:var(--s2)}

/* ── 0 · portada ─────────────────────────────────────────── */
.portada{background:var(--noche);color:var(--crema-claro);padding:140px 0 0;overflow:hidden}
.portada h1{text-align:center;max-width:900px;margin:0 auto}
.portada h1 .cursiva{display:block}

.tira{margin:var(--s5) 0;width:100%;overflow:hidden}
.tira-pista{display:flex;gap:10px;width:max-content;animation:correr 46s linear infinite}
.tira figure{flex:0 0 380px;height:420px;border-radius:var(--r1);overflow:hidden;background:#123a1c}
.tira img{height:420px;width:380px;object-fit:cover}
@keyframes correr{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@media (prefers-reduced-motion:reduce){.tira-pista{animation:none}}

.portada-pie{text-align:center;padding-bottom:var(--s6);display:flex;flex-direction:column;align-items:center;gap:var(--s3)}
.portada-pie p{max-width:44ch;font-size:17px;line-height:1.5;color:rgba(254,254,251,.9)}
.portada-pie .boton{align-self:center}
.valoracion{display:flex;align-items:center;gap:var(--s1);font-size:13px;color:rgba(254,254,251,.88)}
.valoracion .nota{font-size:var(--t6);font-weight:600}
.cierre .valoracion{color:var(--tinta)}

/* ── 1 · servicios ───────────────────────────────────────── */
.servicios{background:var(--crema-claro);padding:var(--s6) 0 145px}
.servicios h2{text-align:center;max-width:820px;margin:0 auto var(--s6)}
.rejilla-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3)}
.tarjeta-servicio{
  display:block;background:var(--crema);border:1px solid rgba(15,61,28,.14);
  border-radius:var(--r2);overflow:hidden;padding-bottom:var(--s3);
  transition:background .25s ease,box-shadow .25s ease;
}
.tarjeta-servicio img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:0}
.tarjeta-servicio .pie-tarjeta{
  display:block;text-align:center;
  margin-top:var(--s3);font-size:var(--t5);font-weight:400;color:var(--tinta);
}
.tarjeta-servicio:hover{background:#e6e4d8;box-shadow:0 2px 0 rgba(15,61,28,.12)}

/* ── 2 · guía y cifras ───────────────────────────────────── */
.guia{background:var(--lavanda);padding:var(--s6) 0}
.guia h2{max-width:640px;margin-bottom:72px}
.pildoras{display:flex;flex-wrap:wrap;gap:var(--s2);max-width:62%;margin-bottom:72px}
.pildora{
  border:1px solid var(--tinta);border-radius:var(--r3);
  padding:12px 28px;font-size:18px;font-weight:400;line-height:1.5;color:var(--tinta);
  transition:background .2s ease,border-color .2s ease;
}
.pildora:hover{background:rgba(254,254,251,.5);border-color:var(--tinta)}
.cifras{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3)}
.cifra{display:flex;align-items:flex-start;gap:var(--s3)}
.cifra .numero{font-size:var(--t2);font-weight:300;letter-spacing:-0.03em;line-height:1}
.cifra p{font-size:var(--t6);font-weight:500;line-height:1.45;max-width:230px;color:var(--tinta)}

/* ── 3 · método ──────────────────────────────────────────── */
.metodo{background:var(--crema-claro);padding:var(--s6) 0}
.metodo h2{text-align:center;max-width:820px;margin:0 auto 140px}
.dos{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);align-items:start}
.bloque-texto{display:flex;flex-direction:column;align-items:flex-start}
.bloque-texto h3{font-size:24px;font-weight:400;margin-bottom:40px}
.punto{margin-bottom:28px;max-width:420px}
.punto h4{margin-bottom:var(--s1);font-size:15px;font-weight:600}
.punto p{font-size:var(--t6);line-height:1.5;color:rgba(15,61,28,.82)}
.bloque-texto .boton{margin-top:var(--s1)}

.dos .bloque-texto{padding-left:100px}
.collage{position:relative;height:470px}
.collage::before{
  content:'';position:absolute;right:0;top:0;bottom:0;width:385px;
  background:var(--lavanda);border-radius:var(--r2);
}
.collage .principal{
  position:absolute;top:var(--s4);left:calc(100% - 385px - 170px);
  width:315px;height:420px;object-fit:cover;border-radius:var(--r1);
}
.collage .asomada{
  position:absolute;right:var(--s4);bottom:var(--s4);
  width:210px;height:150px;object-fit:cover;border-radius:var(--r1);
}

.cita{margin-top:180px;display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);align-items:center}
/* Tres capas, como se lee sin ambigüedad en la captura de móvil:
   panel de fondo, foto metida sobre él, y la cita solapando el pie de la foto. */
.cita-panel{
  position:relative;max-width:470px;
  background:var(--terracota);border-radius:var(--r2);
  padding:var(--s4) 0 var(--s5) var(--s4);
}
.cita-foto{width:280px;height:340px;object-fit:cover;object-position:center 20%;border-radius:var(--r1)}
.cita-tarjeta{
  position:relative;z-index:2;
  margin:-110px calc(var(--s4) * -1) 0 var(--s6);
  background:#b0604c;color:var(--crema-claro);border-radius:var(--r2);
}
.cita-tarjeta .dicho{padding:var(--s4)}
.cita-tarjeta blockquote{font-size:var(--t5);font-weight:300;line-height:1.4}
.cita-tarjeta .firma{margin-top:var(--s3);font-size:var(--t6);color:rgba(254,254,251,.88)}
.cita-texto{display:flex;flex-direction:column;align-items:flex-start}
.cita-texto h3{margin-bottom:var(--s3)}
.cita-texto h4{margin-bottom:var(--s1);font-size:15px;font-weight:600}
.cita-texto p{font-size:var(--t6);line-height:1.5;color:rgba(15,61,28,.82);max-width:440px;margin-bottom:var(--s4)}
.cita-texto .pildoras{margin-bottom:var(--s4)}

/* ── 4 · pasos ───────────────────────────────────────────── */
.pasos{background:var(--crema);padding:var(--s6) 0}
.pasos h2{max-width:640px;margin-bottom:180px}
.rejilla-pasos{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3)}
.paso{border-left:1px solid rgba(15,61,28,.22);padding-left:var(--s3)}
.paso .marca-paso{
  width:28px;height:28px;border-radius:var(--r3);
  background:var(--tinta);color:var(--crema-claro);
  display:flex;align-items:center;justify-content:center;
  font-size:var(--t7);font-weight:500;margin-bottom:var(--s3);
}
.paso h4{margin-bottom:var(--s2);font-size:var(--t5)}
.paso p{font-size:var(--t6);line-height:1.5;color:rgba(15,61,28,.82);max-width:320px}
.pasos .boton{margin-top:var(--s5)}

/* ── 5 · cierre ──────────────────────────────────────────── */
.cierre{background:var(--salvia);padding:64px 0;overflow:hidden}
.cierre h2{max-width:900px;margin-bottom:40px}
.cierre-fila{display:flex;align-items:stretch;justify-content:space-between;gap:var(--s5)}
.cierre-acciones{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:var(--s3);padding-bottom:0}
.marco-cierre{background:#d3e0c3;border-radius:var(--r2);padding:var(--s4);width:48%;display:flex;justify-content:center}
.cierre img{width:315px;height:420px;object-fit:cover;border-radius:var(--r1)}

/* ── 6 · pie ─────────────────────────────────────────────── */
.pie{background:var(--noche);color:var(--crema-claro);padding:var(--s6) 0 var(--s5)}
.pie-columnas{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3);width:83%;padding-bottom:var(--s6)}
.pie-columnas h5{font-size:var(--t7);font-weight:600;margin-bottom:20px;color:var(--crema-claro)}
.pie-columnas li{margin-bottom:var(--s2)}
.pie-columnas a{font-size:var(--t7);color:rgba(254,254,251,.85);border-bottom:1px solid transparent;transition:border-color .2s ease}
.pie-columnas a:hover{border-color:var(--salvia)}

.pie-cierre{display:grid;grid-template-columns:38% 1fr;gap:var(--s3);align-items:center;padding:var(--s6) 0 var(--s5);border-top:1px solid rgba(254,254,251,.14)}
.pie-cierre h2 .cursiva{display:block}
.boletin{
  background:#1c5b2c;border:1px solid rgba(254,254,251,.22);border-radius:var(--r2);
  padding:var(--s4);position:relative;overflow:hidden;
  display:grid;grid-template-columns:1fr 191px;gap:var(--s3);align-items:center;
}
.boletin .texto{position:relative;z-index:1}
.boletin p{font-size:15px;margin-bottom:var(--s3);color:var(--crema-claro)}
.boletin form{display:flex;gap:var(--s1)}
.boletin input[type=email]{
  flex:1;min-width:0;height:42px;padding:0 var(--s3);border-radius:var(--r3);
  border:1px solid var(--crema-claro);background:var(--crema-claro);color:var(--tinta);
  font-family:inherit;font-size:var(--t7);
}
.boletin input[type=email]::placeholder{color:rgba(15,61,28,.6)}
.boletin input[type=email]:focus{outline:2px solid var(--salvia);outline-offset:2px}
/* La acción no puede ir del mismo color que el campo: el original pone
   aquí el botón en verde oscuro sobre la tarjeta clara. */
.boletin .boton{background:var(--tinta);border-color:var(--tinta);color:var(--crema-claro);font-weight:500}
.boletin .boton:hover{background:var(--noche);border-color:var(--noche)}
.boletin .nota{margin-top:var(--s3);font-size:13px;color:rgba(254,254,251,.75);margin-bottom:0}
.boletin .hoja{
  position:absolute;top:0;right:0;bottom:0;width:191px;height:100%;
  object-fit:cover;border-radius:0 var(--r2) var(--r2) 0;
}
.pie-legal{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);font-size:var(--t7);color:rgba(254,254,251,.6)}
.descargo{margin-top:var(--s5);font-size:12px;color:rgba(254,254,251,.7);line-height:1.6;max-width:720px}

/* ── movimiento ──────────────────────────────────────────── */
/* Entradas largas que disparan una vez y se quedan puestas. */
.entra{opacity:0;transform:translateY(40px);transition:opacity .22s ease-out,transform .22s ease-out}
.entra.puesto{opacity:1;transform:none}
/* La única atada al scroll, y reversible, como se midió en el original. */
.atado{will-change:transform}
@media (prefers-reduced-motion:reduce){
  .entra{opacity:1;transform:none;transition:none}
  .atado{transform:none !important}
}

@media (max-width:960px){
  :root{--t1:48px;--t2:38px;--t3:29px;--t4:26px}
  .rejilla-3,.cifras,.rejilla-pasos,.dos,.cita,.pie-cierre,.boletin{grid-template-columns:1fr}
  .pie-columnas{grid-template-columns:repeat(2,1fr);width:100%}
  .cierre-fila{flex-direction:column;align-items:flex-start}
  .dos .bloque-texto{padding-left:0}
  .boletin .hoja{display:none}
}

/* ── MÓVIL ────────────────────────────────────────────────
   Medido sobre el original a 390 px: la barra se queda en logotipo y
   hamburguesa, la tira del héroe baja a 185, las cifras se apilan y el
   pie reparte sus enlaces en dos columnas. No es escritorio estrechado. */
@media (max-width:560px){
  :root{
    --t1:38px; --t2:29px; --t3:24px; --t4:20px; --t5:18px; --t6:14px; --t7:12px;
    --s3:20px; --s5:48px; --s6:72px;
    --r1:8px; --r2:12px;
    --margen:21px;
  }

  /* barra */
  .barra{height:72px}
  .barra .envoltura{gap:0}
  .menu,.barra-cta{display:none}
  .hamburguesa{display:flex;margin-left:auto}
  .menu-movil[data-abierto]{display:flex}
  .marca{font-size:var(--t5)}

  /* 0 · portada */
  .portada{padding-top:var(--s6)}
  .portada h1{font-size:var(--t1)}
  .tira{margin:var(--s4) 0}
  .tira-pista{gap:8px;animation-duration:34s}
  .tira figure{flex:0 0 170px;height:185px;border-radius:10px}
  .tira img{height:185px;width:170px}
  .portada-pie{gap:var(--s3);padding-bottom:var(--s6)}
  .portada-pie p{font-size:var(--t6);max-width:34ch}
  .valoracion{justify-content:center;flex-wrap:wrap;text-align:center}

  /* 1 · servicios */
  .servicios{padding:var(--s5) 0 72px}
  .servicios h2{margin-bottom:var(--s5)}
  .antetitulo{margin-bottom:var(--s2)}
  /* En móvil las tarjetas no van a ancho completo: el original las estrecha
     a unos 260 y las centra, con unos 65 px de aire a cada lado. */
  .tarjeta-servicio .pie-tarjeta{font-size:var(--t5)}

  /* 2 · guía y cifras: titular a bandera, píldoras de tres en tres, cifras apiladas */
  .guia{padding:72px 0}
  .guia h2{max-width:none;margin-bottom:var(--s5)}
  .pildoras{max-width:none;gap:10px;margin-bottom:72px}
  .pildora{font-size:var(--t6);padding:var(--s1) 16px}
  .guia .pildora{font-weight:500}
  .cifras{gap:var(--s4)}
  .cifra{flex-direction:column;align-items:flex-start;gap:var(--s2)}
  .cifra .numero{font-size:46px}
  .cifra p{font-size:var(--t7);max-width:none}

  /* 3 · método */
  .metodo{padding:var(--s4) 0 var(--s5)}
  .metodo h2{margin-bottom:var(--s5)}
  .bloque-texto h3{font-size:var(--t2);line-height:1.15;margin-bottom:var(--s4)}
  .punto{max-width:none;margin-bottom:var(--s4)}
  .punto h4{font-size:var(--t6)}
  .punto p{font-size:var(--t6)}
  .dos{gap:var(--s5)}
  /* El original NO apila las dos fotos en móvil: mantiene el mismo solape
     sobre el panel lavanda, sólo que a menor escala. */
  .collage{height:362px;background:var(--lavanda);border-radius:var(--r2)}
  .collage::before{display:none}
  .collage .principal{top:10px;left:11px;width:56%;height:266px}
  .collage .asomada{right:9px;bottom:8px;width:57%;height:202px}

  .cita{margin-top:var(--s5);gap:var(--s4)}
  .cita-panel{max-width:none;margin-right:32px;padding:var(--s3) 0 var(--s4) var(--s3)}
  .cita-foto{width:78%;height:300px}
  .cita-tarjeta{margin:-90px -32px 0 var(--s5)}
  .cita-tarjeta .dicho{padding:var(--s3)}
  .cita-tarjeta blockquote{font-size:var(--t6);line-height:1.45}
  .cita-texto h3{font-size:var(--t2)}
  .cita-texto p{max-width:none}

  /* 4 · pasos: un solo filete para toda la columna */
  .pasos{padding:72px 0}
  .pasos h2{max-width:none;margin-bottom:var(--s6)}
  .rejilla-pasos{gap:0;border-left:1px solid rgba(15,61,28,.22);padding-left:var(--s3)}
  .paso{border-left:0;padding-left:0;padding-bottom:64px}
  .paso:last-child{padding-bottom:0}
  .paso p{max-width:none;font-size:var(--t6)}
  .pasos .boton{margin-top:var(--s5)}

  /* 5 · cierre */
  .cierre{padding:var(--s5) 0}
  .cierre h2{max-width:none;margin-bottom:var(--s4)}
  .cierre-fila{gap:var(--s4)}
  .cierre-acciones{padding-bottom:0;gap:var(--s3)}
  .marco-cierre{width:100%;padding:var(--s3)}
  .cierre img{width:100%;height:360px}

  /* 6 · pie */
  .pie{padding:var(--s6) 0 var(--s6)}
  .pie-columnas{gap:var(--s5) var(--s3);padding-bottom:var(--s6)}
  .pie-cierre{padding:var(--s6) 0;gap:var(--s6)}
  .boletin{padding:var(--s3);gap:var(--s3)}
  .boletin form{flex-direction:column}
  .boletin input[type=email],.boletin .boton{flex:0 0 42px;width:100%;height:42px}
  .boletin p{font-size:var(--t6)}
  .pie-legal{flex-direction:column;align-items:flex-start;gap:var(--s2)}
  .descargo{margin-top:var(--s5);max-width:none}

  /* ── correcciones medidas contra el original a 390 ────────
     1 · El bloque de método va imagen primero y texto después, igual que
         la pareja de abajo. En escritorio son dos columnas y el orden del
         marcado no se ve; al apilar, sí.
     2 · El pie pone la caja de correo justo tras el filete, y el rótulo
         grande después.
     3 · La tarjeta del cierre es APAISADA con la foto en el 56 % izquierdo
         y la columna derecha libre, no una foto a sangre.
     4 · Los discos de paso miden unos 48, no 28.
     5 · La ilustración va inscrita en la tarjeta, no a sangre.
     6 · Las píldoras de la columna de planes son más pequeñas que las de
         la banda lavanda y llenan el ancho a 4, 3 y 3. */
  .dos .collage{order:-1}
  .pie-cierre .boletin{order:-1}

  .marco-cierre{width:100%;padding:18px;display:block}
  .cierre img{width:56%;height:250px}

  .paso .marca-paso{width:48px;height:48px;font-size:var(--t5);margin-bottom:var(--s3)}

  .tarjeta-servicio{max-width:260px;margin:0 auto;padding:14px}
  .tarjeta-servicio img{border-radius:var(--r1)}
  .tarjeta-servicio .pie-tarjeta{margin-top:var(--s2)}

  .cita-texto .pildora{font-size:13px;padding:6px 12px}
  .cita-texto .pildoras{gap:8px}
}

/* ═══════════════════════════════════════════════════════════
   CAPA DE MOVIMIENTO · GSAP + ScrollTrigger + Lenis
   El criterio: es una consulta de psicología, no una agencia. El movimiento
   acompaña la lectura y nunca la interrumpe. Nada rebota, nada gira, nada
   aparece dos veces. Todo va en la misma curva lenta y todo se apaga entero
   con prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════ */

/* Si el guion no llega a cargar, la página se lee entera igual. */
html:not(.js) .entra{opacity:1 !important;transform:none !important}
.js .entra{opacity:0;transform:translateY(34px);transition:none}
.js .parte{visibility:hidden}          /* reserva su alto: no hay salto de maqueta */
html.quieto .parte{visibility:visible}
html.quieto .entra{opacity:1;transform:none}

/* Lenis pide esto para no pelearse con el scroll nativo. */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}

/* ── barra que se aparta al bajar y vuelve al subir ───────── */
.barra{position:sticky;top:0;z-index:60;will-change:transform;transition:height .3s ease}
.barra.compacta{height:72px;border-bottom:1px solid rgba(254,254,251,.12)}

/* ── ventanas de recorte: la foto escala por dentro ───────── */
.ventana{display:block;position:relative;overflow:hidden}
.ventana img{width:100%;height:100%;object-fit:cover;display:block;will-change:transform}
.ventana-cita{width:280px;height:340px;border-radius:var(--r1)}
.ventana-cita img{object-position:center 20%}
.ventana-cierre{width:315px;height:420px;border-radius:var(--r1)}
.ventana-tarjeta{width:100%;aspect-ratio:1/1}

/* La tira del héroe ya no la mueve un @keyframes: la lleva GSAP, que sabe
   frenar cuando la pestaña se va al fondo y acelerar un punto con el scroll. */
.js .tira-pista{animation:none}

/* ── filete de los pasos, que se dibuja al bajar ──────────── */
.paso{position:relative;border-left:0;padding-left:var(--s3)}
.filete{
  position:absolute;left:0;top:0;width:1px;height:100%;
  background:rgba(15,61,28,.22);transform-origin:top center;
}
.js .filete{transform:scaleY(0)}
.paso .marca-paso{position:relative;z-index:1}

/* Las tarjetas de servicio se levantan con el puntero; el CSS deja de mover
   la sombra para que no compita con la subida que hace GSAP. */
.tarjeta-servicio{will-change:transform}
.tarjeta-servicio:hover{box-shadow:0 10px 24px rgba(15,61,28,.10)}

@media (max-width:560px){
  .ventana-cita{width:78%;height:300px}
  .ventana-cierre{width:56%;height:250px}
  .ventana-tarjeta{border-radius:var(--r1)}
  .barra.compacta{height:64px}
  /* El filete pasa a las piezas: apiladas y sin hueco, la línea sigue seguida. */
  .rejilla-pasos{border-left:0;padding-left:0}
  .paso{padding-left:var(--s3)}
}

/* Con el movimiento reducido no queda ni rastro: sin lenis, sin entradas,
   sin tira corriendo y sin filete a medio dibujar. */
@media (prefers-reduced-motion:reduce){
  .js .entra{opacity:1;transform:none}
  .js .parte{visibility:visible}
  .js .tira-pista{animation:none}
  .js .filete{transform:none}
  .barra{position:static}
}

/* ── la barra, recompuesta ────────────────────────────────
   Al volverse pegajosa quedó a la vista un fallo que antes no se veía:
   .barra era un flex y el panel de móvil, al abrirse, entraba como SEGUNDA
   pieza de esa fila, no debajo. Los enlaces salían desparramados sobre el
   héroe. Ahora el flex vive en la envoltura y el panel se descuelga del
   borde inferior sin empujar la página. */
.barra{display:block;height:auto}
.barra > .envoltura{
  display:flex;align-items:center;gap:var(--s5);width:100%;
  height:91px;transition:height .3s ease;
}
.barra.compacta > .envoltura{height:72px}
.barra.compacta{height:auto}
.menu-movil{
  position:absolute;left:0;right:0;top:100%;
  max-height:calc(100vh - 72px);overflow-y:auto;
  box-shadow:0 18px 40px rgba(11,46,21,.35);
}
@media (max-width:560px){
  .barra{height:auto}
  .barra > .envoltura{height:72px;gap:0}
  .barra.compacta > .envoltura{height:64px}
}
/* Los enlaces del panel se tocan con el pulgar: 26 px de alto no es un
   objetivo, es una diana. Se les da cuerpo sin cambiar el ritmo vertical. */
.menu-movil{gap:var(--s1)}
.menu-movil a:not(.boton){display:block;padding:9px 0;min-height:44px}

/* ── remates de la crítica ────────────────────────────────
   1 · La máscara de las líneas cortaba los descendentes a media entrada: la
       "p" de "prioridad" salía rebanada. La caja de la máscara gana aire por
       abajo y la línea entra desde algo más lejos para que no asome antes.
   2 · El puntero levanta la tarjeta, y ya. La sombra que le puse era el único
       elemento con sombra de toda la página y se leía como una caja que crece. */
.linea-mask{padding-bottom:0.18em;margin-bottom:-0.18em}
.tarjeta-servicio:hover{box-shadow:none}
.tira{cursor:default}
.rejilla-pasos{position:relative}
.filete-largo{display:none}
@media (max-width:560px){
  .paso > .filete{display:none}
  .filete-largo{display:block;left:0;top:0;height:100%}
}

/* El foco de teclado tiene que verse. La tarjeta ya se levanta al recibirlo,
   pero un levantamiento sin anillo no le dice nada a quien navega tabulando. */
a:focus-visible,button:focus-visible,input:focus-visible{
  outline:2px solid var(--terracota);outline-offset:3px;
}
.barra a:focus-visible,.menu-movil a:focus-visible,.pie a:focus-visible{outline-color:var(--salvia)}
.tarjeta-servicio:focus-visible{outline-offset:4px}

/* ═══ segunda ronda de crítica ══════════════════════════════ */

/* El hilo tiene que atravesar sus nudos. En móvil el filete pasaba 43 px a la
   izquierda de los discos numerados y no tocaba ninguno: un hilo de progreso
   que no enhebra nada se lee como un borde suelto. Ahora el filete va por el
   centro de los discos y el texto se aparta para dejarlo pasar. */
@media (max-width:560px){
  .rejilla-pasos{padding-left:0}
  .paso{padding-left:0;padding-bottom:56px}
  .paso .marca-paso{width:44px;height:44px;font-size:var(--t6);margin-left:0}
  .filete-largo{left:22px}
  .paso h4,.paso p{padding-left:60px}

  /* Los tres botones de conversión medían 42 px de alto. Un pulgar pide 48. */
  .boton{height:48px;font-size:var(--t6)}
  .boletin input[type=email]{height:48px}
  .boletin .boton{flex:0 0 48px;height:48px}
  .boletin input[type=email]{flex:0 0 48px}
  /* Y la hamburguesa, que es el único control de navegación, un área de 44. */
  .hamburguesa{width:44px;height:44px;margin-right:-10px}
}

/* Los cantos de la tira cortaban las caras a hueso. Un fundido de 48 px
   convierte el corte en sangrado. */
.tira{
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 48px,#000 calc(100% - 48px),transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 48px,#000 calc(100% - 48px),transparent 100%);
}

/* Con el menú abierto, lo de debajo no se toca. */
.velo{
  position:fixed;inset:0;background:rgba(2,14,6,.72);
  z-index:55;opacity:0;pointer-events:none;
}
.velo[data-abierto]{pointer-events:auto}

/* ═══ tercera ronda ════════════════════════════════════════ */

/* El cajón del menú necesita canto: acababa contra un fondo de su mismo verde
   y los enlaces parecían flotar sobre la portada en vez de estar dentro de algo.
   Y el botón se salía del carril 20 px, heredados del margen de la barra ancha. */
.menu-movil{border-bottom:1px solid rgba(254,254,251,.20)}
.menu-movil .boton{margin-left:0}

@media (max-width:560px){
  /* Cuarenta enlaces de pie a 17 px de alto no se tocan con el pulgar. Con
     este paso quedan en 39, que no es el ideal de 44 pero es lo que admite un
     pie de este largo sin convertirse en una pantalla entera de enlaces. */
  .pie-columnas li{margin-bottom:0}
  .pie-columnas a{display:inline-block;padding:11px 0}
}

/* Regresión propia, cazada midiendo: al pasar el flex de la barra a la
   envoltura, ésta pasó a medir los 91 px enteros, y el `align-self:flex-start`
   que traen todos los botones clavó el de "Pedir cita" al filo de la ventana,
   24 px por encima del logotipo. En la barra el botón va centrado. */
.barra > .envoltura > .boton{align-self:center}
.menu-movil .boton{align-self:flex-start}

/* ═══ cuarta ronda ═════════════════════════════════════════ */

/* El panel del menú era exactamente el mismo verde que la sección que tapaba:
   sin canto, sin sombra y sin cambio de valor, no se leía como una capa puesta
   encima sino como una página partida por la mitad. Ahora tiene su propio
   verde, un filete y sombra. */
.menu-movil{
  background:#1c5b2c;                       /* el verde de la tarjeta del boletín */
  border-bottom:1px solid rgba(254,254,251,.45);
  box-shadow:0 24px 48px rgba(2,14,6,.7);
}

/* La marca visible de la hamburguesa medía 24 x 9. El área de toque ya son 44,
   pero uno apunta a lo que ve. */
.hamburguesa span{width:26px;height:2px}
.hamburguesa[aria-expanded="true"] span{width:30px}
.hamburguesa[aria-expanded="true"] span:first-child{transform:translateY(4px) rotate(45deg)}
.hamburguesa[aria-expanded="true"] span:last-child{transform:translateY(-4px) rotate(-45deg)}

@media (max-width:560px){
  .pie-columnas a{padding:14px 0}
}

/* ═══ quinta ronda ═════════════════════════════════════════ */

/* El trazo se dibujaba en el mismo gris verdoso del filete original, (188,198,184)
   sobre crema (238,237,228): a distancia de escritorio, invisible. La única
   animación atada al scroll de la página no se veía. Ahora hay pista y hay
   trazo: la pista es el filete de siempre, y lo que se dibuja encima va en
   tinta, que sí se lee. */
.paso{position:relative}
.paso::before{
  content:'';position:absolute;left:0;top:0;width:1.5px;height:100%;
  background:rgba(15,61,28,.18);
}
.filete{background:rgba(15,61,28,.62);width:1.5px}
.filete-pista{background:rgba(15,61,28,.18);transform:none !important}
@media (max-width:560px){
  .paso::before{display:none}
  .filete-largo,.filete-pista{left:22px}
}

/* ── Distintivo de Clínicas: el camino de vuelta al portafolio ────────────────
   Lo añade scripts/publicar-piezas.mjs al publicar. NO está en la fuente de la pieza, y no debe:
   el vídeo del portafolio se graba de la fuente y ahí este sello sobra. */
.ct-firma{position:fixed;left:14px;bottom:14px;z-index:2147483000;display:inline-flex;align-items:center;gap:.35em;
  padding:.55em .85em;border-radius:999px;background:rgba(17,17,17,.84);color:#fff;
  font:500 12px/1 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  letter-spacing:.01em;text-decoration:none;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  box-shadow:0 1px 4px rgba(0,0,0,.22);opacity:.6;transition:opacity .18s ease}
.ct-firma:hover,.ct-firma:focus-visible{opacity:1;color:#fff;text-decoration:none}
.ct-firma b{font-weight:700}
@media (max-width:520px){.ct-firma{left:10px;bottom:10px;font-size:11px;padding:.5em .75em}}
@media (prefers-reduced-motion:reduce){.ct-firma{transition:none}}
@media print{.ct-firma{display:none}}