/* ============================================================
   LIPOSSER — sistema de diseño
   Una sola hoja para las ~30 páginas del sitio. Si algo se ve
   distinto entre dos páginas, es que alguien escribió CSS suelto
   en vez de usar una clase de aquí. No lo hagas.
   ============================================================ */

:root{
  /* la paleta es la de Hostess, calibrada para clínica: tinta, crema,
     arena y el ámbar de marca. Nada de azules quirúrgicos ni verdes
     de hospital — abaratan una marca premium. */
  --ink:#141A23;
  --ink-2:#1E2530;
  --slate:#3B4654;
  --mute:#6E7785;
  --crema:#FBF9F5;
  --arena:#F2EDE4;
  --arena-2:#E9E2D7;
  --linea:#E2E6EA;
  --ambar:#C9854D;
  --ambar-lt:#E0AE7E;
  --ambar-dk:#9C6335;
  --rojo:#A8402F;
  --verde:#2F6B4F;

  --ancho:1240px;
  --nav-h:74px;
  --r-s:12px;
  --r-m:18px;
  --r-l:26px;
  --r-xl:34px;

  --ease:cubic-bezier(.22,.65,.2,1);
  --sombra-s:0 2px 10px rgba(20,26,35,.05);
  --sombra-m:0 14px 40px rgba(20,26,35,.09);
  --sombra-l:0 30px 80px rgba(20,26,35,.14);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  font-family:'Manrope',system-ui,-apple-system,sans-serif;
  color:var(--ink);
  background:var(--crema);
  font-size:16px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}

img,video{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
::selection{ background:var(--ambar); color:#fff; }

h1,h2,h3,h4{ font-family:'Fraunces',Georgia,serif; font-weight:900; line-height:1.05; margin:0; letter-spacing:-.015em; }
h1{ font-size:clamp(2.15rem,5.6vw,4.35rem); }
h2{ font-size:clamp(1.85rem,4vw,3.15rem); }
h3{ font-size:clamp(1.25rem,2.2vw,1.75rem); line-height:1.16; }
h4{ font-size:1.05rem; line-height:1.3; font-weight:600; }
p{ margin:0; }

.serif{ font-family:'Fraunces',Georgia,serif; }
.tabular{ font-variant-numeric:tabular-nums; }

/* ---------- utilidades de composición ---------- */
.wrap{ width:100%; max-width:var(--ancho); margin-inline:auto; padding-inline:20px; }
@media (min-width:768px){ .wrap{ padding-inline:34px; } }
.wrap-sm{ max-width:840px; }
.wrap-xs{ max-width:660px; }

.sec{ padding-block:clamp(56px,8vw,116px); }
.sec-sm{ padding-block:clamp(40px,5vw,72px); }

.oscuro{ background:var(--ink); color:var(--crema); }
.oscuro h1,.oscuro h2,.oscuro h3{ color:#fff; }
.oscuro .sub{ color:rgba(251,249,245,.62); }
.arena{ background:var(--arena); }

.rotulo{
  font-size:11px; font-weight:800; text-transform:uppercase;
  letter-spacing:.24em; color:var(--ambar-dk); margin-bottom:14px;
  /* en teléfono estos rótulos, con tanto espaciado entre letras, dejaban una
     palabra sola colgando en el segundo renglón. Balanceado los reparte.
     (De Alex, rescatado: venía en el mismo commit que se llevó por delante
     media hoja de estilos.) */
  text-wrap:balance;
}
.oscuro .rotulo{ color:var(--ambar-lt); }

.sub{ color:var(--slate); font-size:clamp(15px,1.5vw,17.5px); line-height:1.68; }
.mini{ font-size:13.5px; line-height:1.55; color:var(--mute); }

.grid{ display:grid; gap:22px; }
/* una tabla ancha dentro de una celda ya no empuja la columna: se desliza dentro de su marco */
.grid > *, .sino > *{ min-width:0; }

.g2{ grid-template-columns:1fr; }
.g3{ grid-template-columns:1fr; }
.g4{ grid-template-columns:repeat(2,1fr); }
@media (min-width:700px){ .g2{ grid-template-columns:repeat(2,1fr); } .g3{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px){ .g3{ grid-template-columns:repeat(3,1fr); } .g4{ grid-template-columns:repeat(4,1fr); } }

/* ---------- aparición al hacer scroll ----------
   BLINDAJE, y no es paranoia: esconder en el CSS base costó una página EN
   BLANCO en una captura real dentro de un iframe. Este sitio se presenta
   embebido (/liposser/plan), así que un observador que no dispara no es un
   detalle de animación: es la junta perdida.
   Por eso todo nace VISIBLE aquí. Es el JS quien pone .js-rev en <html> y
   entonces —y solo entonces— esconde. Sin JS, la página se ve completa. */
.rev{ transition:opacity .62s var(--ease), transform .62s var(--ease); }
.js-rev .rev{ opacity:0; transform:translateY(22px); }
.js-rev .rev.vis{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .js-rev .rev{ opacity:1!important; transform:none!important; } }

/* ============================================================
   BOTONES — el piso de toque es 48px, no 44. En una clínica el
   visitante llega con una mano y con prisa.
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:50px; padding:14px 28px; border-radius:999px;
  font-size:13px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  text-decoration:none; border:1.5px solid transparent; cursor:pointer;
  transition:background .25s, color .25s, border-color .25s, transform .2s, box-shadow .25s;
  white-space:nowrap; font-family:inherit;
}
.btn:active{ transform:translateY(1px); }
/* En telefono un boton largo ("Traer estas preguntas a la valoracion" = 390px)
   desborda la pantalla de 375. Ahi si se parte en dos renglones, centrado. */
@media (max-width:560px){
  .btn{ white-space:normal; text-align:center; line-height:1.35; }
}
.btn-1{ background:var(--ambar); color:#fff; box-shadow:0 6px 22px rgba(201,133,77,.32); }
.btn-1:hover{ background:var(--ambar-dk); box-shadow:0 10px 30px rgba(201,133,77,.4); }
.btn-2{ background:transparent; color:var(--ink); border-color:rgba(20,26,35,.22); }
.btn-2:hover{ background:var(--ink); color:var(--crema); border-color:var(--ink); }
.oscuro .btn-2,.sobre-foto .btn-2{ color:#fff; border-color:rgba(255,255,255,.34); }
.oscuro .btn-2:hover,.sobre-foto .btn-2:hover{ background:#fff; color:var(--ink); border-color:#fff; }
.btn-3{ background:var(--ink); color:var(--crema); }
.btn-3:hover{ background:var(--ink-2); }
.btn-wa{ background:#1f8a4c; color:#fff; }
.btn-wa:hover{ background:#186c3b; }
.btn-blk{ display:flex; width:100%; }

.enlace{
  display:inline-flex; align-items:center; gap:7px; min-height:44px;
  font-weight:800; font-size:13.5px; color:var(--ambar-dk); text-decoration:none;
  border-bottom:1.5px solid rgba(201,133,77,.34); transition:color .2s, border-color .2s;
}
.enlace:hover{ color:var(--ambar); border-color:var(--ambar); }
.oscuro .enlace{ color:var(--ambar-lt); border-color:rgba(224,174,126,.4); }

/* ---------- píldoras y etiquetas ---------- */
.pill{
  display:inline-flex; align-items:center; gap:7px;
  font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.13em;
  padding:7px 15px; border-radius:999px; background:var(--arena); color:var(--ambar-dk);
}
.pill-ok{ background:rgba(47,107,79,.11); color:var(--verde); }
.pill-al{ background:rgba(168,64,47,.1); color:var(--rojo); }
.pill-ink{ background:rgba(20,26,35,.07); color:var(--slate); }
.oscuro .pill{ background:rgba(224,174,126,.14); color:var(--ambar-lt); }

/* ============================================================
   NAVEGACIÓN
   ============================================================ */
.nav{
  position:fixed; inset-inline:0; top:0; z-index:200;
  transition:background .4s var(--ease), box-shadow .4s, backdrop-filter .4s;
}
.nav.solida{ background:rgba(251,249,245,.94); backdrop-filter:blur(14px); box-shadow:0 1px 0 rgba(20,26,35,.08); }
.nav-in{
  max-width:var(--ancho); margin-inline:auto; padding-inline:20px;
  height:var(--nav-h); display:flex; align-items:center; justify-content:space-between; gap:16px;
}
@media (min-width:768px){ .nav-in{ padding-inline:34px; } }

.marca{ display:flex; align-items:center; gap:11px; text-decoration:none; flex:none; }
.marca-txt{
  font-family:'Fraunces',serif; font-weight:900; font-size:19px;
  letter-spacing:.2em; color:#fff; transition:color .35s;
}
.nav.solida .marca-txt{ color:var(--ink); }
.marca-sub{ display:none; font-size:9.5px; font-weight:800; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.55); transition:color .35s; }
.nav.solida .marca-sub{ color:var(--mute); }
@media (min-width:1520px){ .marca-sub{ display:block; } }

.menu{ display:none; align-items:center; gap:4px; }
@media (min-width:1140px){ .menu{ display:flex; } }
.menu a{
  padding:10px 13px; border-radius:999px; text-decoration:none;
  font-size:13.5px; font-weight:600; color:rgba(255,255,255,.86);
  transition:background .2s, color .3s; white-space:nowrap;
}
.menu a:hover{ background:rgba(255,255,255,.13); color:#fff; }
.nav.solida .menu a{ color:var(--slate); }
.nav.solida .menu a:hover{ background:rgba(20,26,35,.06); color:var(--ink); }
.menu a.act{ color:var(--ambar-lt); }
.nav.solida .menu a.act{ color:var(--ambar-dk); }

.nav-der{ display:flex; align-items:center; gap:10px; }
.nav .btn{ min-height:44px; padding:11px 20px; font-size:11.5px; }

/* Siete enlaces + idioma + botón no caben en los 1240px del contenedor: a
   1440 el "Agendar valoración" —el botón que paga la página— quedaba cortado
   contra el borde derecho. En la franja donde el menú ya salió pero la
   pantalla todavía no da, la barra se aprieta. Arriba de 1520 vuelve a
   respirar y reaparece el bajo-logo. */
@media (min-width:1140px) and (max-width:1519px){
  .menu{ gap:0; }
  .menu a{ padding:10px 9px; font-size:12.8px; }
  .nav-der{ gap:7px; }
  .nav .btn{ padding:11px 15px; font-size:11px; }
  .idioma{ min-width:40px; font-size:11px; }
}
.nav-cta{ display:none; }
@media (min-width:640px){ .nav-cta{ display:inline-flex; } }

.idioma{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:44px; min-height:44px; border-radius:999px; text-decoration:none;
  font-size:11.5px; font-weight:800; letter-spacing:.08em;
  color:rgba(255,255,255,.8); border:1.5px solid rgba(255,255,255,.26); transition:all .3s;
}
.idioma:hover{ background:rgba(255,255,255,.15); color:#fff; }
.nav.solida .idioma{ color:var(--slate); border-color:rgba(20,26,35,.18); }
.nav.solida .idioma:hover{ background:rgba(20,26,35,.06); color:var(--ink); }

.hamb{
  display:inline-flex; align-items:center; justify-content:center;
  width:46px; height:46px; border-radius:999px; border:1.5px solid rgba(255,255,255,.26);
  background:transparent; cursor:pointer; transition:all .3s; padding:0;
}
@media (min-width:1140px){ .hamb{ display:none; } }
.nav.solida .hamb{ border-color:rgba(20,26,35,.18); }
.hamb span{ display:block; width:17px; height:1.8px; background:#fff; border-radius:2px; transition:background .3s, transform .3s, opacity .2s; }
.hamb span + span{ margin-top:4.5px; }
.nav.solida .hamb span{ background:var(--ink); }

/* cajón móvil */
.cajon{
  position:fixed; inset:0; z-index:210; background:var(--ink); color:var(--crema);
  transform:translateY(-100%); transition:transform .45s var(--ease);
  overflow-y:auto; padding:22px 20px 44px;
}
.cajon.open{ transform:none; }
.cajon-top{ display:flex; align-items:center; justify-content:space-between; height:52px; margin-bottom:26px; }
.cajon-x{ width:46px; height:46px; border-radius:999px; border:1.5px solid rgba(255,255,255,.24); background:transparent; color:#fff; font-size:21px; cursor:pointer; line-height:1; }
.cajon nav{ display:flex; flex-direction:column; }
.cajon nav a{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 2px; min-height:56px; text-decoration:none; color:#fff;
  font-family:'Fraunces',serif; font-weight:600; font-size:20px;
  border-bottom:1px solid rgba(255,255,255,.09);
}
.cajon nav a span{ font-family:'Manrope',sans-serif; font-size:12px; color:rgba(251,249,245,.4); font-weight:600; }
.cajon .btn{ margin-top:26px; }

/* ============================================================
   PORTADAS
   ============================================================ */
/* En COLUMNA, no en fila. Estaba como `display:flex` a secas y .hero-cont y
   .hero-datos son hermanos: se repartían el ancho como dos columnas. A 375px
   el titular quedaba estrujado en 261px y la franja de datos se salía del
   recuadro; el overflow:hidden se la comía. La franja de datos siempre fue un
   pie de ancho completo — lleva borde superior y su propia retícula. */
.hero{ position:relative; min-height:88svh; display:flex; flex-direction:column; justify-content:flex-end; align-items:stretch; overflow:hidden; background:var(--ink); }
.hero-sm{ min-height:62svh; }
.hero-media{ position:absolute; inset:0; }
.hero-media img,.hero-media video{ width:100%; height:100%; object-fit:cover; }
/* el velo es tinta, NUNCA el ámbar de marca: un velo del color de marca
   sobre foto se ve barato y ya nos lo tumbaron una vez. */
.hero-velo{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(20,26,35,.66) 0%, rgba(20,26,35,.28) 34%, rgba(20,26,35,.52) 68%, rgba(20,26,35,.9) 100%);
}
.hero-cont{ position:relative; z-index:3; width:100%; padding-block:120px 60px; }
@media (min-width:768px){ .hero-cont{ padding-block:150px 80px; } }
.hero h1{ color:#fff; max-width:16ch; text-wrap:balance; }
.hero .sub{ color:rgba(255,255,255,.76); max-width:56ch; margin-top:22px; }
.hero-btns{ display:flex; flex-wrap:wrap; gap:12px; margin-top:34px; }

.hero-datos{
  position:relative; z-index:3; border-top:1px solid rgba(255,255,255,.14);
  display:grid; grid-template-columns:repeat(2,1fr);
}
@media (min-width:820px){ .hero-datos{ grid-template-columns:repeat(4,1fr); } }
.hero-datos div{ padding:20px 20px 22px; border-right:1px solid rgba(255,255,255,.11); }
.hero-datos div:last-child{ border-right:none; }
.hero-datos b{ display:block; font-family:'Fraunces',serif; font-size:clamp(1.4rem,2.6vw,2.1rem); color:var(--ambar-lt); font-weight:900; line-height:1; }
.hero-datos span{ display:block; font-size:12px; color:rgba(255,255,255,.56); line-height:1.42; margin-top:7px; }

/* ============================================================
   TARJETAS
   ============================================================ */
.card{
  background:#fff; border:1px solid rgba(20,26,35,.08); border-radius:var(--r-l);
  overflow:hidden; display:flex; flex-direction:column;
  transition:transform .3s var(--ease), box-shadow .3s, border-color .3s;
  text-decoration:none; color:inherit;
}
a.card:hover{ transform:translateY(-4px); box-shadow:var(--sombra-m); border-color:rgba(201,133,77,.35); }
.card-foto{ position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--arena); flex:none; }
.card-foto img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
a.card:hover .card-foto img{ transform:scale(1.045); }
.card-foto .pill{ position:absolute; left:14px; top:14px; background:rgba(251,249,245,.94); backdrop-filter:blur(6px); }
.card-cuerpo{ padding:24px 24px 26px; display:flex; flex-direction:column; gap:10px; flex:1; }
.card-cuerpo h3{ font-size:1.3rem; }
.card-cuerpo p{ font-size:14.5px; color:var(--slate); line-height:1.6; }
.card-pie{ margin-top:auto; padding-top:14px; display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:12.5px; font-weight:800; color:var(--ambar-dk); text-transform:uppercase; letter-spacing:.09em; }

/* Una sección con un solo procedimiento —Busto, Glúteos— quedaba como una fila
   de tres a la que le faltan dos tarjetas: dos tercios de blanco. Aquí la
   tarjeta única se abre a lo ancho, foto grande a un lado y texto al otro.
   Cambia el pulso de la página y deja de leerse como un hueco. */
.grid-solo{ display:grid; grid-template-columns:1fr; gap:22px; }
@media (min-width:820px){
  .grid-solo .card{ display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,1fr); align-items:stretch; }
  .grid-solo .card-foto{ aspect-ratio:auto; height:100%; min-height:360px; }
  .grid-solo .card-cuerpo{ justify-content:center; padding:48px 46px; gap:14px; }
  .grid-solo .card-cuerpo h3{ font-size:1.75rem; }
  .grid-solo .card-cuerpo p{ font-size:15.5px; max-width:46ch; }
  /* sin el auto, el pie se queda pegado al texto y el bloque centra de verdad */
  .grid-solo .card-pie{ margin-top:20px; }
}

/* Cuatro tarjetas en una retícula de tres dejan dos huecos en la segunda fila:
   el mismo arroz blanco, en chico. La última se abre a lo ancho —foto de un
   lado, texto del otro— y de paso rompe la simetría de la sección, que es
   justo lo que la casa quiere: desarrollo, no cuadrícula pareja. */
@media (min-width:1000px){
  .g3.ultima-ancha > :last-child{
    grid-column:span 2;
    display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); align-items:stretch;
  }
  .g3.ultima-ancha > :last-child .card-foto{ aspect-ratio:auto; height:100%; min-height:300px; }
  .g3.ultima-ancha > :last-child .card-cuerpo{ justify-content:center; padding:40px 42px; gap:13px; }
  .g3.ultima-ancha > :last-child .card-cuerpo h3{ font-size:1.6rem; }
  .g3.ultima-ancha > :last-child .card-cuerpo p{ font-size:15px; max-width:44ch; }
  .g3.ultima-ancha > :last-child .card-pie{ margin-top:18px; }
}

.caja{ background:#fff; border:1px solid rgba(20,26,35,.09); border-radius:var(--r-m); padding:26px; }
.oscuro .caja{ background:rgba(255,255,255,.045); border-color:rgba(255,255,255,.11); }
.caja-arena{ background:var(--arena); border-color:transparent; }

/* ============================================================
   EL ATLAS — la firma del sitio. La paciente toca una zona de su
   cuerpo, no un nombre médico que no conoce.
   ============================================================ */
.atlas{ display:grid; gap:34px; align-items:center; }
@media (min-width:940px){ .atlas{ grid-template-columns:minmax(0,420px) minmax(0,1fr); gap:56px; } }
.atlas-fig{ position:relative; margin-inline:auto; width:100%; max-width:360px; }
.atlas-fig svg{ width:100%; height:auto; display:block; }
.zona-hit{ cursor:pointer; fill:transparent; stroke:none; transition:fill .3s; }
.zona-hit:hover,.zona-hit.act{ fill:rgba(201,133,77,.34); }
.silueta-linea{ fill:none; stroke:rgba(20,26,35,.3); stroke-width:1.6; stroke-linejoin:round; stroke-linecap:round; }
.oscuro .silueta-linea{ stroke:rgba(251,249,245,.36); }
.silueta-relleno{ fill:rgba(20,26,35,.045); }
.oscuro .silueta-relleno{ fill:rgba(251,249,245,.06); }
.zona-pt{ fill:var(--ambar); transition:r .3s, opacity .3s; }
.atlas-lista{ display:grid; grid-template-columns:repeat(2,1fr); gap:9px; }
@media (min-width:620px){ .atlas-lista{ grid-template-columns:repeat(3,1fr); } }
.atlas-lista a{
  display:flex; flex-direction:column; gap:2px; justify-content:center;
  min-height:66px; padding:12px 15px; border-radius:var(--r-s);
  border:1.5px solid rgba(20,26,35,.11); background:#fff; text-decoration:none;
  transition:border-color .25s, background .25s, transform .25s;
}
.atlas-lista a:hover,.atlas-lista a.act{ border-color:var(--ambar); background:#fff; transform:translateY(-2px); box-shadow:var(--sombra-s); }
.atlas-lista b{ font-size:14.5px; font-weight:800; color:var(--ink); }
.atlas-lista span{ font-size:11.5px; color:var(--mute); line-height:1.35; }
.oscuro .atlas-lista a{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.12); }
.oscuro .atlas-lista b{ color:#fff; }
.oscuro .atlas-lista span{ color:rgba(251,249,245,.5); }

/* ============================================================
   CALENDARIO DE RECUPERACIÓN
   ============================================================ */
.recu{ display:grid; gap:2px; background:rgba(20,26,35,.08); border-radius:var(--r-m); overflow:hidden; }
@media (min-width:760px){ .recu{ grid-template-columns:repeat(5,1fr); } }
.recu div{ background:#fff; padding:20px 18px 22px; }
.recu b{ display:block; font-family:'Fraunces',serif; font-size:1.28rem; font-weight:900; color:var(--ambar-dk); }
.recu strong{ display:block; font-size:13.5px; font-weight:800; margin:7px 0 4px; }
.recu p{ font-size:13px; color:var(--slate); line-height:1.5; }

/* ---------- listas de sí / no ---------- */
.sino{ display:grid; gap:20px; }
@media (min-width:760px){ .sino{ grid-template-columns:repeat(2,1fr); } }
.lista-check{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
/* La palomita va absoluta, no como ítem flex. Con display:flex en el <li>,
   TODO hijo del <li> se volvía ítem flex —incluido un <b> suelto— y entre el
   negrita y el texto que le sigue no puede romper renglón. En español la frase
   cabía de milagro; en inglés no, y la ficha de agendar empujaba la página a
   380px dentro de un teléfono de 375. Ahora el renglón fluye como texto. */
.lista-check li{ position:relative; padding-left:31px; font-size:14.5px; line-height:1.55; color:var(--slate); }
.lista-check li::before{
  content:''; position:absolute; left:0; top:2px; width:20px; height:20px; border-radius:999px;
  background:rgba(47,107,79,.13) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232F6B4F' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/12px no-repeat;
}
.lista-x li::before{
  background:rgba(168,64,47,.11) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A8402F' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center/11px no-repeat;
}

/* ---------- acordeón de preguntas ---------- */
.faq{ border-top:1px solid var(--linea); }
.faq details{ border-bottom:1px solid var(--linea); }
.faq summary{
  display:flex; align-items:flex-start; justify-content:space-between; gap:18px;
  padding:20px 2px; min-height:60px; cursor:pointer; list-style:none;
  font-family:'Fraunces',serif; font-size:1.06rem; font-weight:600; line-height:1.36;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:'+'; flex:none; font-family:'Manrope',sans-serif; font-size:22px; font-weight:400;
  color:var(--ambar); line-height:1; transition:transform .3s var(--ease);
}
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq details > div{ padding:0 2px 22px; font-size:14.7px; line-height:1.68; color:var(--slate); max-width:70ch; }

/* ---------- tablas ---------- */
.tabla-env{ overflow-x:auto; min-width:0; max-width:100%; -webkit-overflow-scrolling:touch; border-radius:var(--r-m); border:1px solid rgba(20,26,35,.1); background:#fff; }
table.t{ width:100%; border-collapse:collapse; font-size:14px; min-width:560px; }
table.t th{
  text-align:left; padding:14px 18px; background:var(--ink); color:var(--crema);
  font-size:10.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; white-space:nowrap;
}
table.t td{ padding:14px 18px; border-bottom:1px solid rgba(20,26,35,.07); color:var(--slate); vertical-align:top; }
table.t tr:last-child td{ border-bottom:none; }
table.t tbody tr:nth-child(even){ background:rgba(242,237,228,.42); }
table.t td:first-child{ font-weight:700; color:var(--ink); }

/* ---------- formularios ---------- */
.campo{ display:flex; flex-direction:column; gap:7px; }
.campo label{ font-size:12px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--slate); }
.campo label .req{ color:var(--rojo); }
.campo input,.campo select,.campo textarea{
  /* min-width:0 para que un select con opciones largas obedezca a su columna
     y no ensanche la rejilla del formulario */
  min-width:0;
  width:100%; font-family:inherit; font-size:16px; /* 16px o iOS hace zoom al enfocar */
  color:var(--ink); background:#fff; border:1.5px solid rgba(20,26,35,.15);
  border-radius:var(--r-s); padding:14px 16px; min-height:52px; transition:border-color .2s, box-shadow .2s;
}
.campo textarea{ min-height:120px; resize:vertical; line-height:1.6; }
.campo select{ appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E7785' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 15px center; background-size:17px; padding-right:44px; }
.campo input:focus,.campo select:focus,.campo textarea:focus{ outline:none; border-color:var(--ambar); box-shadow:0 0 0 3px rgba(201,133,77,.16); }
.campo .err{ font-size:12.5px; color:var(--rojo); font-weight:700; display:none; }
.campo.malo input,.campo.malo select,.campo.malo textarea{ border-color:var(--rojo); background:#FDF6F4; }
.campo.malo .err{ display:block; }
.campo .ayuda{ font-size:12.5px; color:var(--mute); }
.form-grid{ display:grid; gap:18px; }
@media (min-width:640px){ .form-grid-2{ grid-template-columns:repeat(2,1fr); } .col-2{ grid-column:span 2; } }

.chips{ display:flex; flex-wrap:wrap; gap:9px; }
.chip-sel{
  display:inline-flex; align-items:center; min-height:44px; padding:10px 17px;
  border-radius:999px; border:1.5px solid rgba(20,26,35,.15); background:#fff;
  font-size:13.5px; font-weight:700; cursor:pointer; transition:all .2s; user-select:none;
}
.chip-sel:hover{ border-color:var(--ambar); }
.chip-sel.on{ background:var(--ink); color:var(--crema); border-color:var(--ink); }
.chip-sel input{ position:absolute; left:0; top:0; width:1px; height:1px;
  opacity:0; pointer-events:none; }

/* ---------- avisos ---------- */
.aviso{ display:flex; gap:13px; border-radius:var(--r-m); padding:18px 20px; font-size:13.6px; line-height:1.58; }
.aviso-legal{ background:var(--arena); color:var(--slate); border:1px solid rgba(20,26,35,.07); }
.aviso-al{ background:#FDF4F2; color:#7d4034; border:1px solid rgba(168,64,47,.16); }
.aviso-ok{ background:#F1F7F3; color:#2a5c45; border:1px solid rgba(47,107,79,.16); }
.aviso b{ color:inherit; }

/* ---------- cita / testimonio ---------- */
.cita{ font-family:'Fraunces',serif; font-size:clamp(1.35rem,2.7vw,2.1rem); line-height:1.32; font-weight:500; font-style:italic; text-wrap:balance; }
.cita-pie{ display:flex; align-items:center; gap:12px; margin-top:22px; font-size:13px; color:var(--mute); }
.cita-pie b{ color:var(--ink); font-weight:800; }
.oscuro .cita-pie b{ color:#fff; }

/* ---------- video ---------- */
.yt{
  position:relative; aspect-ratio:16/9; border-radius:var(--r-m); overflow:hidden;
  background:var(--ink); cursor:pointer; display:block; border:none; padding:0; width:100%;
}
.yt img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease), opacity .3s; }
.yt:hover img{ transform:scale(1.04); opacity:.86; }
.yt::after{
  content:''; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:64px; height:64px; border-radius:999px; background:rgba(251,249,245,.94);
  box-shadow:0 8px 30px rgba(0,0,0,.34); transition:transform .3s var(--ease);
}
.yt::before{
  content:''; position:absolute; left:50%; top:50%; z-index:2;
  transform:translate(-42%,-50%); border-style:solid; border-width:11px 0 11px 18px;
  border-color:transparent transparent transparent var(--ink);
}
.yt:hover::after{ transform:translate(-50%,-50%) scale(1.09); }
.yt iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.yt.playing::after,.yt.playing::before{ display:none; }
.yt-tit{ font-size:14px; font-weight:700; line-height:1.4; margin-top:12px; }

/* ---------- migas ---------- */
.migas{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:12.5px; color:var(--mute); }
.migas a{ text-decoration:none; color:var(--mute); border-bottom:1px solid transparent; }
.migas a:hover{ color:var(--ambar-dk); border-color:rgba(201,133,77,.4); }
.migas span{ opacity:.45; }

/* ---------- banda de confianza ---------- */
.banda{ display:flex; flex-wrap:wrap; gap:12px 30px; align-items:center; justify-content:center; }
.banda div{ display:flex; align-items:center; gap:9px; font-size:12.5px; font-weight:700; color:var(--slate); }
.banda svg{ flex:none; color:var(--ambar); }

/* ============================================================
   PIE
   ============================================================ */
.pie{ background:var(--ink); color:rgba(251,249,245,.62); padding-block:64px 34px; font-size:14px; }
.pie a{ color:rgba(251,249,245,.62); text-decoration:none; transition:color .2s; }
.pie a:hover{ color:var(--ambar-lt); }
.pie-grid{ display:grid; gap:36px; }
@media (min-width:760px){ .pie-grid{ grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; } }
.pie h4{ font-family:'Manrope',sans-serif; font-size:10.5px; font-weight:800; letter-spacing:.2em; text-transform:uppercase; color:var(--ambar-lt); margin-bottom:16px; }
.pie ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
/* 44 px, no 40: es el mínimo del pulgar y estaba cuatro píxeles corto. */
.pie ul a{ display:flex; align-items:center; padding:7px 0; min-height:44px; }
/* En la dirección, el teléfono y el enlace al mapa van dentro del texto: se
   les da cuerpo para poder tocarlos sin apuntar. */
.pie-dir a{ display:inline-block; min-height:44px; line-height:44px; }
/* La marca de la barra daba 31 px de alto tocable. */
.marca{ min-height:44px; }
.pie-legal{ margin-top:48px; padding-top:26px; border-top:1px solid rgba(255,255,255,.1); font-size:12px; line-height:1.7; color:rgba(251,249,245,.42); display:flex; flex-wrap:wrap; gap:14px 26px; justify-content:space-between; }

/* ---------- barra fija de móvil ---------- */
.barra-mov{
  position:fixed; inset-inline:0; bottom:0; z-index:190; display:flex; gap:10px;
  padding:11px 14px calc(11px + env(safe-area-inset-bottom));
  background:rgba(20,26,35,.97); backdrop-filter:blur(12px); box-shadow:0 -8px 34px rgba(0,0,0,.26);
  transform:translateY(110%); transition:transform .4s var(--ease);
}
.barra-mov.vis{ transform:none; }
@media (min-width:900px){ .barra-mov{ display:none!important; } }
.barra-mov .btn{ flex:1; min-height:48px; padding:12px 14px; font-size:11.5px; }
body.con-barra{ padding-bottom:78px; }
@media (min-width:900px){ body.con-barra{ padding-bottom:0; } }

/* ---------- volver a la propuesta (solo cuando se entra desde ella) ---------- */
.volver{
  position:fixed; left:50%; transform:translateX(-50%) translateY(-140%); top:0; z-index:230;
  display:flex; align-items:center; gap:12px;
  background:var(--ink); color:var(--crema); border-radius:0 0 var(--r-m) var(--r-m);
  padding:11px 14px 11px 18px; box-shadow:0 10px 34px rgba(0,0,0,.3);
  font-size:12.5px; font-weight:700; transition:transform .45s var(--ease); max-width:calc(100% - 24px);
}
.volver.vis{ transform:translateX(-50%) translateY(0); }
.volver a{
  display:inline-flex; align-items:center; gap:7px; min-height:40px; padding:8px 16px;
  border-radius:999px; background:var(--ambar); color:#fff; text-decoration:none;
  font-size:11.5px; font-weight:800; text-transform:uppercase; letter-spacing:.07em; white-space:nowrap;
}
.volver a:hover{ background:var(--ambar-dk); }
.volver .et{ display:none; }
@media (min-width:560px){ .volver .et{ display:block; color:rgba(251,249,245,.66); } }
body.con-volver .nav{ top:58px; }

/* ============================================================
   CORRECCIONES DE CONTRASTE — se descubrieron al armar la portada.
   No borrar: cada una tapa un caso en el que un texto quedaba
   invisible sobre su propio fondo.
   ============================================================ */

/* una tarjeta BLANCA dentro de una sección oscura seguía heredando
   el `color:#fff` de los títulos: título blanco sobre tarjeta blanca. */
.oscuro .card{ background:#fff; color:var(--ink); }
.oscuro .card h2,.oscuro .card h3,.oscuro .card h4{ color:var(--ink); }
.oscuro .card p{ color:var(--slate); }
.oscuro .card .pill{ background:var(--arena); color:var(--ambar-dk); }

/* el rótulo sobre foto o sobre tinta va en ámbar claro; el oscuro
   se pierde contra el velo. */
.hero .rotulo,.sobre-foto .rotulo{ color:var(--ambar-lt); }

/* en móvil la rejilla de datos es de 2 columnas: quitar la línea de
   la derecha de cada segunda celda, no solo de la última. */
@media (max-width:819px){
  .hero-datos div:nth-child(2n){ border-right:none; }
  .hero-datos div:nth-child(-n+2){ border-bottom:1px solid rgba(255,255,255,.11); }
}

/* la caja arena dentro de sección oscura mantiene su texto oscuro */
.oscuro .caja-arena{ background:var(--arena); color:var(--slate); }
.oscuro .caja-arena b,.oscuro .caja-arena strong{ color:var(--ink); }

/* ---------- misc ---------- */
.oculto{ display:none!important; }
.solo-lector{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
hr.linea{ border:none; border-top:1px solid var(--linea); margin-block:40px; }
.oscuro hr.linea{ border-color:rgba(255,255,255,.11); }

/* ==========================================================================
   HUECOS CERRADOS 4-AGO — los detectó la auditoría al construir las páginas.
   Cada uno se estaba rodeando con parches en la página; aquí se resuelve una
   sola vez para las ~45.
   ========================================================================== */

/* 1 · Migas sobre fondo oscuro o sobre foto: en gris (--mute) eran ilegibles,
      así que se estaban sacando del hero. Ahora sí pueden vivir adentro. */
.oscuro .migas,.sobre-foto .migas{ color:rgba(251,249,245,.66); }
.oscuro .migas a,.sobre-foto .migas a{ color:rgba(251,249,245,.78); }
.oscuro .migas a:hover,.sobre-foto .migas a:hover{ color:var(--ambar-lt); border-color:rgba(224,174,126,.5); }
.oscuro .migas span,.sobre-foto .migas span{ opacity:.4; color:#fff; }

/* 2 · .lista-x sola no tenía retícula: obligaba a escribir siempre las dos
      clases juntas y una omisión rompía la lista sin avisar. */
.lista-x{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
.lista-x li{ display:flex; gap:11px; font-size:14.5px; line-height:1.55; color:var(--slate); }
.lista-x li::before{ content:''; flex:none; width:20px; height:20px; border-radius:999px; margin-top:2px; }
.oscuro .lista-check li,.oscuro .lista-x li{ color:rgba(251,249,245,.8); }
/* ...pero NO dentro de un recuadro claro que vive en una sección oscura: ahí
   sería crema sobre crema, invisible, y el navegador no avisa. */
.oscuro .caja-arena .lista-check li,.oscuro .caja-arena .lista-x li,
.oscuro .arena .lista-check li,.oscuro .arena .lista-x li{ color:var(--slate); }

/* 3 · .g4 en teléfono daba 2 columnas: una tarjeta con lista adentro quedaba
      en ~160px y el texto se partía letra por letra. */
@media (max-width:539px){ .g4{ grid-template-columns:1fr; } }

/* 4 · Tabla ancha: se deslizaba pero nada lo decía. Sombra en el borde que
      desaparece al llegar al final, y un aviso solo en teléfono. */
.tabla-env{
  background:
    linear-gradient(90deg,#fff 30%,rgba(255,255,255,0)) left center/34px 100% no-repeat,
    linear-gradient(90deg,rgba(255,255,255,0),#fff 70%) right center/34px 100% no-repeat,
    radial-gradient(farthest-side at 0 50%,rgba(20,26,35,.14),rgba(20,26,35,0)) left center/13px 100% no-repeat,
    radial-gradient(farthest-side at 100% 50%,rgba(20,26,35,.14),rgba(20,26,35,0)) right center/13px 100% no-repeat,
    #fff;
  background-attachment:local,local,scroll,scroll,local;
}
.tabla-nota{ display:none; font-size:12px; color:var(--mute); font-weight:700; margin-top:9px; }
@media (max-width:739px){ .tabla-nota{ display:block; } }
.oscuro .tabla-nota{ color:rgba(251,249,245,.6); }

/* 5 · .sino en una sola columna cuando el bloque va en una barra lateral. */
.sino-1{ grid-template-columns:1fr!important; }

/* 6 · .mini sobre fondo oscuro: en --mute daba ~3.5:1 contra --ink, abajo del
      mínimo legible para 13.5px. Se estaba esquivando usando otra clase. */
.oscuro .mini,.sobre-foto .mini{ color:rgba(251,249,245,.7); }
.oscuro .caja-arena .mini,.oscuro .arena .mini{ color:var(--mute); }

/* ==========================================================================
   UBICACIÓN — 5-ago. La fuga medida: en sus 80 páginas actuales no aparece
   la dirección ni un mapa, y /contacto/ daba 404. Aquí vive el mapa de la
   casa (MapLibre + teselas libres, sin llaves ni costo por vista) y la
   dirección verificada contra la ficha de Google.
   ========================================================================== */
.mapa-env{
  position:relative; border-radius:var(--r-l); overflow:hidden;
  border:1px solid var(--linea); background:var(--arena);
  min-height:320px; height:100%;
}
#mapa{ position:absolute; inset:0; }
/* El teléfono no tiene "hover": el mapa se lleva alto fijo y el scroll de la
   página NUNCA se lo queda (cooperativeGestures). */
@media (max-width:859px){ .mapa-env{ height:300px; min-height:300px; } }
.mapa-env .maplibregl-ctrl-attrib{ font-size:10px; }
.mapa-env .maplibregl-ctrl-bottom-right{ z-index:2; }
/* El pin: se dibuja en una capa del mapa, no con un nodo del DOM, para que no
   se desalinee al hacer zoom ni pese en cada cuadro de la animación. */

/* Dirección en el pie canónico de las 36 páginas */
.pie-dir{ margin-top:18px; font-style:normal; line-height:1.75; }
.pie-dir a{ color:#fff; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.28); }
.pie-dir a:hover{ color:var(--ambar-lt); border-color:var(--ambar-lt); }
.pie-dir .pie-dir-t{ display:block; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.5); margin-bottom:6px; font-weight:700; }

/* Ficha de dirección en /contacto/ */
.dir-lista{ list-style:none; margin:18px 0 0; padding:0; display:flex; flex-direction:column; gap:14px; }
.dir-lista li{ display:flex; gap:12px; align-items:flex-start; font-size:14.5px; line-height:1.6; color:var(--slate); }
.dir-lista svg{ flex:none; margin-top:2px; color:var(--ambar-dk); }
.dir-lista b{ color:var(--ink); }

/* 7 · La barra se desbordaba entre 1060 y ~1360 px. Medido en 1280 (la laptop
      más común): marca 302 + menú 754 + botón 240 = 1296 contra 1240 de ancho
      útil, y "Agendar valoración" se salía de la pantalla cortado. El menú
      completo ahora entra a partir de 1140, la bajada de la marca a partir de
      1360, y en medio el menú va apretado. */
@media (min-width:1140px) and (max-width:1359px){
  .menu{ gap:2px; }
  .menu a{ padding-inline:9px; }
}

/* 8 · Los botones de zoom que trae MapLibre miden 29 px: por debajo del piso
      táctil de 44. En teléfono se agrandan; en escritorio no hace falta. */
@media (max-width:859px){
  .mapa-env .maplibregl-ctrl-group button{ width:44px; height:44px; }
  .mapa-env .maplibregl-ctrl-group button span{ transform:scale(1.25); }
}

/* ==========================================================================
   PORTADA V4 — el escenario oscuro
   Pablo rechazó la foto del vestíbulo: clara, de showroom y con el logotipo
   de la clínica compitiendo dentro del cuadro. La portada es ahora un plano
   cinematográfico sobre el Dr. Leal en quirófano, tratado hasta comportarse
   como cine y no como foto de clínica.
   Sin JS: solo la foto, el velo y el encuadre — así sobrevive a cualquier
   reescritura del comportamiento.
   ========================================================================== */
.hero-v4{ background:#0A0E14; }
/* El scale de base es la holgura que consume el parallax del scroll: sin él,
   al desplazarse asomaría el borde de la imagen. El JS la mide, no la adivina.
   (Esto y las reglas de <video> se habían perdido en una reescritura masiva de
   la hoja; la portada llevaba días con el CSS a medias y el comportamiento
   entero borrado.) */
.hero-v4 .hero-media{
  transform:scale(1.12);
  transform-origin:50% 45%;
  will-change:transform;
}
/* <picture> no debe existir para el diseño: solo elige el archivo. */
.hero-v4 .hero-media picture{ display:contents; }
.hero-v4 .hero-media img{
  /* el encuadre corre al doctor a la derecha para dejar limpia la columna
     del titular: el bordado dorado del gorro y el texto no se pisan. */
  object-position:32% 38%;
  filter:brightness(.52) contrast(1.14) saturate(.72);
  /* ---- LA IMAGEN RESPIRA ----
     El encargo era «concepto mp4»: que se mueva de verdad, sin ser un video.
     Empieza aquí. Zoom lentísimo de ida y vuelta —92 s el ciclo completo—, y
     de ida y vuelta a propósito: un bucle que reinicia da un brinco, y el
     brinco delata el truco. Va sobre el img, no sobre .hero-media, porque
     ahí vive el parallax del scroll y se pisarían. */
  animation:hv-respira 46s cubic-bezier(.45,0,.55,1) infinite alternate;
  will-change:transform;
  transition:opacity .9s var(--ease);
}
.hero-v4 .hero-media video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity 1.1s var(--ease);
}
/* cuando el video ya puede correr, se cruza con la foto en vez de saltar */
.hero-v4 .hero-media.con-video video{ opacity:1; }
.hero-v4 .hero-media.con-video img{ opacity:0; }
@keyframes hv-respira{
  from{ transform:scale(1) translate3d(0,0,0); }
  to  { transform:scale(1.048) translate3d(-1.1%,-.8%,0); }
}
/* Dos capas con trabajos distintos: la vertical asienta la franja de datos;
   la horizontal sostiene la lectura y llega alta hasta el 62%, que es donde
   termina la columna de texto. */
.hero-v4 .hero-velo{
  background:
    linear-gradient(180deg, rgba(10,14,20,.82) 0%, rgba(10,14,20,.30) 26%, rgba(10,14,20,.46) 62%, rgba(10,14,20,.94) 100%),
    linear-gradient(90deg,  rgba(10,14,20,.92) 0%, rgba(10,14,20,.80) 34%, rgba(10,14,20,.34) 62%, rgba(10,14,20,.12) 100%);
}
.hero-v4 h1{ max-width:24ch; text-shadow:0 2px 34px rgba(10,14,20,.5); }
.hero-v4 .sub{ color:rgba(255,255,255,.82); max-width:52ch; }
/* en teléfono no hay columna: el texto cruza todo el ancho, manda un velo
   vertical parejo, el recorte vertical propio y algo más de luz. */
@media (max-width:820px){
  .hero-v4 .hero-velo{
    background:linear-gradient(180deg, rgba(10,14,20,.80) 0%, rgba(10,14,20,.40) 32%, rgba(10,14,20,.62) 66%, rgba(10,14,20,.95) 100%);
  }
  /* En teléfono no hay parallax, así que el scale de holgura sobra: dejarlo
     solo acercaba la foto de gratis. Sin él, y con el recorte vertical que
     sirve <picture>, se ve el gorro y el rostro completos. */
  .hero-v4 .hero-media{ transform:none; }
  .hero-v4 .hero-media img{ object-position:center 32%; filter:brightness(.62) contrast(1.1) saturate(.78); }
  .hero-v4 h1 br{ display:none; }
  .hero-v4 h1{ max-width:none; }
}

/* ---- la luz que sigue al cursor ----
   Es la lámpara del quirófano, no un puntero: se mueve con retardo (el
   suavizado va en el JS) y es blanca-azul, nunca del ámbar de marca. */
.hero-v4 .hero-luz{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  opacity:0; transition:opacity .7s var(--ease);
  background:radial-gradient(38vmax 38vmax at var(--lx,50%) var(--ly,42%),
    rgba(196,224,255,.16) 0%, rgba(196,224,255,.07) 34%, rgba(196,224,255,0) 68%);
  mix-blend-mode:screen;
}
.hero-v4.luz-on .hero-luz{ opacity:1; }

/* ---- grano ----
   Un degradado oscuro tan largo se bandea en pantallas de 8 bits. El grano lo
   rompe y de paso le da cuerpo de película. Muy bajo: si se nota, sobra. */
.hero-v4 .hero-grano{
  position:absolute; inset:0; z-index:2; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  /* y además se mueve a saltos, como una película de verdad. Un grano quieto
     es una textura; un grano que baila es una toma. Solo background-position:
     no repinta nada, es la misma imagen corrida. */
  animation:hv-grano .8s steps(1) infinite;
}
@keyframes hv-grano{
  0%   { background-position:0 0; }        12.5%{ background-position:-38px 22px; }
  25%  { background-position:27px -41px; } 37.5%{ background-position:-44px -19px; }
  50%  { background-position:19px 36px; }  62.5%{ background-position:-25px 14px; }
  75%  { background-position:41px -28px; } 87.5%{ background-position:-14px -35px; }
}

/* ---- la atmósfera ----
   Dos manchas de luz que se cruzan a distinta velocidad, como el aire de un
   quirófano cuando la lámpara está encendida y algo se mueve delante de ella.
   La grande es fría —es la misma lámpara, no el ámbar de marca, que sobre una
   escena así se ve barato—. La chica sí es cálida y muy baja, y cae donde cae
   el bordado dorado del gorro: no inventa un color, subraya el que ya está en
   la foto del doctor. */
.hero-v4 .hero-atmo{
  position:absolute; inset:-22%; z-index:1; pointer-events:none;
  mix-blend-mode:screen;
  background:radial-gradient(40% 38% at 58% 40%, rgba(178,212,246,.20), rgba(178,212,246,0) 68%);
  animation:hv-ronda 37s ease-in-out infinite alternate;
}
.hero-v4 .hero-atmo::after{
  content:''; position:absolute; inset:0;
  background:radial-gradient(26% 24% at 72% 34%, rgba(224,174,126,.16), transparent 64%);
  animation:hv-ronda2 53s ease-in-out infinite alternate;
}
@keyframes hv-ronda { from{ transform:translate3d(-5%,3%,0) scale(1); }    to{ transform:translate3d(7%,-4%,0) scale(1.26); } }
@keyframes hv-ronda2{ from{ transform:translate3d(4%,-2%,0) scale(1.14); } to{ transform:translate3d(-6%,4%,0) scale(.94); } }

/* ---- polvo suspendido ----
   Casi subliminal: si se nota, está mal calibrado. Va por ENCIMA del velo
   porque es aire, no está dentro de la foto, y es la segunda capa de
   profundidad — se mueve más que la imagen cuando el puntero se mueve. */
.hero-v4 .hero-polvo{
  position:absolute; inset:0; z-index:5; pointer-events:none; overflow:hidden;
  transform:translate3d(calc(var(--px,0) * 20px), calc(var(--py,0) * 14px), 0);
}
.hero-v4 .hero-polvo i{
  position:absolute; display:block; border-radius:50%;
  background:rgba(226,236,248,.7); filter:blur(.5px);
  animation:hv-flota linear infinite;
}
@keyframes hv-flota{
  0%  { transform:translate3d(0,0,0);        opacity:0; }
  14% { opacity:.8; }
  86% { opacity:.55; }
  100%{ transform:translate3d(22px,-230px,0); opacity:0; }
}

/* ---- el titular entra renglón por renglón ----
   Los <span> los crea el JS partiendo por los <br> que ya trae el texto
   escrito. Es decoración de renglones, no reescritura: no se toca ni una
   palabra. Y como el estado escondido solo existe si esos <span> existen, sin
   JS el titular simplemente está ahí, completo. */
.hero-v4 h1 .lin{ display:block; overflow:hidden; padding-bottom:.06em; }
.hero-v4 h1 .lin i{
  display:block; font-style:inherit;
  transform:translateY(108%); opacity:0;
  transition:transform 1.05s var(--ease), opacity .85s var(--ease);
}
.hero-v4 h1.dicho .lin i{ transform:none; opacity:1; }

@media (max-width:820px){
  /* en el teléfono no hay puntero que seguir: el peso lo carga el zoom
     perpetuo, y se alarga para que no maree en una pantalla chica */
  .hero-v4 .hero-media img{ animation-duration:60s; }
  .hero-v4 .hero-atmo{ animation-duration:46s; }
  .hero-v4 .hero-grano{ opacity:.045; }
}

/* ---- el contenido ----
   La entrada es más lenta que en el resto del sitio (1.1s contra .8s) porque
   es lo primero que se ve y el escalonado se tiene que sentir. El retardo por
   hermano lo pone el JS; aquí solo se alarga la duración. */
.hero-v4 .hero-cont{ will-change:opacity; }
.hero-v4 .rev{ transition-duration:1.1s; }
/* el titular trae sus propios saltos de línea escritos a mano; con el tope de
   16ch del sistema no le alcanzaba el renglón y "por" caía solo. Se le da el
   ancho justo para que los cortes del texto sean los que se escribieron. */
.hero-v4 h1{ max-width:24ch; text-shadow:0 2px 34px rgba(10,14,20,.5); }
.hero-v4 .sub{ color:rgba(255,255,255,.82); max-width:52ch; }
.hero-v4 .hero-datos{ border-top-color:rgba(255,255,255,.16); background:rgba(10,14,20,.32); }
.hero-v4 .hero-datos span{ color:rgba(255,255,255,.62); }

/* quien pide menos movimiento se queda con la portada quieta y completa:
   sin parallax, sin luz, sin video — la foto y el texto, legibles. */
@media (prefers-reduced-motion:reduce){
  .hero-v4 .hero-media{ transform:none; }
  .hero-v4 .hero-luz{ display:none; }
  .hero-v4 .hero-media video{ display:none; }
  .hero-v4 .hero-media img{ opacity:1!important; }
  .hero-v4 .hero-media img,
  .hero-v4 .hero-atmo, .hero-v4 .hero-atmo::after,
  .hero-v4 .hero-grano, .hero-v4 .hero-polvo i{ animation:none!important; transform:none!important; }
  .hero-v4 .hero-polvo{ display:none; }
  .hero-v4 h1 .lin i{ transform:none!important; opacity:1!important; transition:none; }
}

/* ==========================================================================
   LA BARRA NO CABÍA — medido al montar la portada V4, pero venía de antes y
   afectaba a las ~45 páginas.

   El menú completo se prendía en 1060px, y entre 1060px y ~1400px el botón de
   "Agendar valoración" se salía de la pantalla: a 1280px (el MacBook de 13")
   se cortaba 94px. Sumado: marca 302 + menú 754 + derecha 240 + huecos 32 =
   1328px de contenido dentro de un contenedor topado en 1240px. No era un
   ajuste fino, es que nunca cupo.

   Se arregla por los dos lados: el menú ahora espera a 1200px, y a partir de
   ahí la bajada de la marca se guarda (es lo único prescindible: el nombre
   sigue ahí) y los enlaces respiran un poco menos. Debajo de 1200px manda el
   cajón, que siempre funcionó.
   ========================================================================== */
@media (min-width:1060px) and (max-width:1199.98px){
  .menu{ display:none; }
  .hamb{ display:grid; }
}
@media (min-width:1200px){
  .menu{ display:flex; }
  .hamb{ display:none; }
  /* la bajada y el menú completo no caben juntos en 1240px: gana el menú,
     que es navegación; la bajada es adorno y vuelve en el cajón y en el pie. */
  .marca-sub{ display:none; }
  .menu a{ padding-inline:8px; }
}
@media (min-width:1340px){
  .menu a{ padding-inline:11px; }
}

/* ==========================================================================
   EL MANIQUÍ — mapa corporal de doce zonas, con selección múltiple
   --------------------------------------------------------------------------
   Vive en dos páginas ("Su cuerpo" y "Agendar valoración") con el mismo
   marcado y el mismo estado. Tres piezas:
     .maniqui        el contenedor; lleva data-maniqui para que el JS lo tome
     .maniqui-fig    la silueta en SVG, dibujada a línea fina
     .maniqui-panel  las tarjetas de zona a un lado
   La variante compacta (.maniqui-mini) es la que va dentro del formulario.

   Regla de oro del dibujo: TODO se ve sin JavaScript. El JS solo agrega
   estado (.on) y sincroniza; si no carga, queda un diagrama impreso que se
   entiende — nunca un hueco.
   ========================================================================== */
.maniqui{
  display:grid;
  gap:30px;
  align-items:start;
}
@media (min-width:940px){
  /* La columna de la figura mide lo que mide la figura, no una fracción del
     ancho: un cuerpo entero es angosto y alto, y darle media pantalla es lo
     que dejaba ese mar de vacío alrededor. El tablero se queda con el resto. */
  .maniqui{ grid-template-columns:minmax(0,392px) minmax(0,1fr); gap:44px; align-items:center; }
}

/* ---------- la figura ---------- */
.maniqui-fig{
  position:relative;
  display:flex;
  justify-content:center;
  border-radius:var(--r-l);
  background:
    radial-gradient(120% 78% at 50% 12%, rgba(201,133,77,.09), transparent 62%),
    linear-gradient(180deg, rgba(242,237,228,.66), rgba(242,237,228,0) 74%);
  padding:18px 8px 22px;
}
.maniqui-fig svg{
  width:100%;
  height:auto;
  max-height:min(74vh,620px);
  display:block;
  overflow:visible;
  touch-action:manipulation;
}
.oscuro .maniqui-fig{
  background:
    radial-gradient(120% 78% at 50% 12%, rgba(201,133,77,.13), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.05), transparent 74%);
}

/* trazo de la silueta: fino y continuo, como el logotipo */
.mq-linea{
  fill:none;
  stroke:var(--ink);
  stroke-opacity:.5;
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}
.mq-detalle{
  fill:none;
  stroke:var(--ink);
  stroke-opacity:.24;
  stroke-width:1.1;
  stroke-linecap:round;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}
.mq-piso{
  fill:none;
  stroke:var(--ink);
  stroke-opacity:.12;
  stroke-width:1;
  stroke-dasharray:2 6;
  stroke-linecap:round;
  vector-effect:non-scaling-stroke;
}
.oscuro .mq-linea{ stroke:var(--crema); stroke-opacity:.62; }
.oscuro .mq-detalle{ stroke:var(--crema); stroke-opacity:.3; }
.oscuro .mq-piso{ stroke:var(--crema); stroke-opacity:.16; }

/* ---------- las doce zonas ---------- */
.mq-zona{ cursor:pointer; outline:none; }

/* línea guía punto → etiqueta, estilo diagrama editorial */
.mq-guia{
  fill:none;
  stroke:var(--ink);
  stroke-opacity:.2;
  stroke-width:1;
  vector-effect:non-scaling-stroke;
  transition:stroke-opacity .3s var(--ease);
}
.mq-txt{
  font-family:'Manrope',system-ui,sans-serif;
  font-size:11.6px;
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
  fill:var(--ink);
  fill-opacity:.5;
  transition:fill-opacity .3s var(--ease), fill .3s var(--ease);
  pointer-events:none;
}
.oscuro .mq-guia{ stroke:var(--crema); stroke-opacity:.26; }
.oscuro .mq-txt{ fill:var(--crema); fill-opacity:.55; }

/* el punto: aro fino en reposo */
.mq-pt{
  fill:var(--crema);
  stroke:var(--ambar);
  stroke-width:1.6;
  vector-effect:non-scaling-stroke;
  transition:r .28s var(--ease), fill .28s var(--ease), stroke-width .28s var(--ease);
}
.oscuro .mq-pt{ fill:var(--ink); }

/* el halo: dormido hasta que la zona se elige */
.mq-halo{
  fill:var(--ambar);
  opacity:0;
  transform-box:fill-box;
  transform-origin:center;
  transform:scale(.4);
  transition:opacity .34s var(--ease), transform .34s var(--ease);
  pointer-events:none;
}

/* área de toque invisible y generosa: el punto puede ser fino, el dedo no */
.mq-hit{ fill:transparent; stroke:none; }

/* estado 2 · el dedo o el cursor están cerca */
.mq-zona:hover .mq-pt,
.mq-zona:focus-visible .mq-pt{ r:7; stroke-width:2.2; }
.mq-zona:hover .mq-txt,
.mq-zona:focus-visible .mq-txt{ fill-opacity:1; fill:var(--ambar-dk); }
.mq-zona:hover .mq-guia,
.mq-zona:focus-visible .mq-guia{ stroke-opacity:.5; }
.oscuro .mq-zona:hover .mq-txt{ fill:var(--ambar-lt); }
.mq-zona:focus-visible .mq-halo{ opacity:.16; transform:scale(.8); }

/* estado 3 · elegida — se queda encendida */
.mq-zona.on .mq-pt{ r:7.4; fill:var(--ambar); stroke:var(--ambar); stroke-width:2.4; }
.mq-zona.on .mq-halo{ opacity:.2; transform:scale(1); }
.mq-zona.on .mq-guia{ stroke:var(--ambar); stroke-opacity:.62; }
.mq-zona.on .mq-txt{ fill:var(--ambar-dk); fill-opacity:1; }
.oscuro .mq-zona.on .mq-txt{ fill:var(--ambar-lt); }

@media (prefers-reduced-motion:reduce){
  .mq-pt,.mq-halo,.mq-guia,.mq-txt{ transition:none; }
}

/* ---------- el tablero de tarjetas ---------- */
.maniqui-panel{ display:grid; gap:14px; }
.mq-cards{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px;
}
@media (min-width:620px){ .mq-cards{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (min-width:940px){ .mq-cards{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1140px){ .mq-cards{ grid-template-columns:repeat(3,minmax(0,1fr)); } }

.mq-card{
  position:relative;
  display:flex;
  flex-direction:column;
  border:1px solid var(--linea);
  border-radius:var(--r-s);
  background:#fff;
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease);
}
.mq-card:hover{ border-color:var(--ambar); box-shadow:var(--sombra-s); transform:translateY(-2px); }
.mq-card.on{ border-color:var(--ambar); background:rgba(201,133,77,.07); box-shadow:var(--sombra-s); }
.oscuro .mq-card{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.13); }
.oscuro .mq-card.on{ background:rgba(201,133,77,.16); border-color:var(--ambar-lt); }

.mq-card-sel{
  flex:1;
  display:flex;
  align-items:flex-start;
  gap:9px;
  min-height:56px;
  padding:11px 11px 10px;
  border:0;
  background:none;
  font:inherit;
  color:inherit;
  text-align:left;
  cursor:pointer;
  border-radius:var(--r-s);
}
.mq-card-sel:focus-visible{ outline:2px solid var(--ambar); outline-offset:2px; }

/* la palomita: un aro que se llena, sin colores de alarma */
.mq-tic{
  flex:none;
  width:17px; height:17px;
  margin-top:2px;
  border-radius:999px;
  border:1.6px solid var(--linea);
  display:grid;
  place-items:center;
  transition:border-color .22s var(--ease), background .22s var(--ease);
}
.mq-tic svg{ width:10px; height:10px; opacity:0; transform:scale(.5); transition:opacity .2s var(--ease), transform .2s var(--ease); }
.mq-card:hover .mq-tic{ border-color:var(--ambar); }
.mq-card.on .mq-tic{ border-color:var(--ambar); background:var(--ambar); }
.mq-card.on .mq-tic svg{ opacity:1; transform:scale(1); stroke:#fff; }
.oscuro .mq-tic{ border-color:rgba(255,255,255,.24); }

.mq-card-txt{ display:block; min-width:0; }
.mq-card-txt b{ display:block; font-size:14px; font-weight:800; line-height:1.3; color:var(--ink); }
.mq-card-txt span{ display:block; font-size:11.4px; color:var(--mute); line-height:1.34; margin-top:1px; }
.oscuro .mq-card-txt b{ color:#fff; }
.oscuro .mq-card-txt span{ color:rgba(251,249,245,.55); }

/* el enlace a la página del procedimiento, separado del área de selección */
.mq-card-ir{
  display:flex;
  align-items:center;
  gap:5px;
  min-height:34px;
  padding:0 11px 9px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--mute);
  text-decoration:none;
  transition:color .2s var(--ease);
}
.mq-card-ir:hover{ color:var(--ambar-dk); }
.mq-card-ir svg{ width:12px; height:12px; }
.oscuro .mq-card-ir{ color:rgba(251,249,245,.5); }
.oscuro .mq-card-ir:hover{ color:var(--ambar-lt); }

/* ---------- el resumen de lo elegido ---------- */
.mq-resumen{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px 14px;
  padding:13px 16px;
  border-radius:var(--r-s);
  background:var(--arena);
  font-size:13.4px;
  line-height:1.5;
}
.oscuro .mq-resumen{ background:rgba(255,255,255,.06); }
.mq-resumen b{ font-weight:800; }
/* El contador dice la frase entera ("3 zonas elegidas"), no un número suelto:
   un 3 en un círculo obliga a adivinar de qué es. Por eso es píldora de
   texto y no un globo redondo. */
.mq-resumen .mq-cuenta{
  flex:none;
  display:inline-flex;
  align-items:center;
  min-height:26px;
  padding:0 11px;
  border-radius:999px;
  background:var(--ambar);
  color:#fff;
  font-size:12.2px;
  font-weight:800;
  letter-spacing:.01em;
  white-space:nowrap;
}
.mq-resumen .mq-lista{ flex:1 1 190px; min-width:0; }
.mq-limpiar{
  flex:none;
  min-height:34px;
  padding:0 12px;
  border:1px solid var(--linea);
  border-radius:999px;
  background:#fff;
  font:inherit;
  font-size:12px;
  font-weight:700;
  color:var(--slate);
  cursor:pointer;
  transition:border-color .2s var(--ease), color .2s var(--ease);
}
.mq-limpiar:hover{ border-color:var(--ambar); color:var(--ambar-dk); }
.oscuro .mq-limpiar{ background:transparent; border-color:rgba(255,255,255,.2); color:rgba(251,249,245,.75); }

/* ---------- el pie: el contador pegado a la acción ---------- */
.mq-pie{ display:flex; flex-direction:column; gap:14px; margin-top:16px; }
.mq-cta{ align-self:flex-start; }
@media (max-width:559.98px){
  .mq-cta{ align-self:stretch; text-align:center; justify-content:center; }
}

/* ---------- variante compacta, la del formulario ----------
   Aquí el cuerpo va sin rótulos a propósito: en una columna de 190px las
   etiquetas caerían a menos de 5px de alto, ilegibles. Los nombres los ponen
   las tarjetas, que en el formulario están al lado y son el control principal.
   El JS le deja además el encuadre angosto siempre, no solo en teléfono. */
.maniqui-mini{ gap:22px; }
@media (min-width:760px){
  .maniqui-mini{ grid-template-columns:minmax(0,190px) minmax(0,1fr); gap:26px; align-items:center; }
}
.maniqui-mini .mq-guia,.maniqui-mini .mq-txt{ display:none; }
.maniqui-mini .maniqui-fig{ padding:10px 4px 12px; }
.maniqui-mini .maniqui-fig svg{ max-height:min(52vh,400px); }
.maniqui-mini .mq-cards{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
@media (min-width:520px){ .maniqui-mini .mq-cards{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.maniqui-mini .mq-card-sel{ min-height:48px; padding:9px 10px; }
.maniqui-mini .mq-card-txt b{ font-size:13px; }
.maniqui-mini .mq-card-txt span{ display:none; }

/* ==========================================================================
   MÓVIL — a 375px la figura manda por alto, no por ancho.
   Las etiquetas y sus guías se retiran (no caben legibles) y su trabajo lo
   hacen las tarjetas, que abajo van a ancho completo. El JS recorta el
   viewBox para que la silueta no quede nadando en el margen que dejaron.
   ========================================================================== */
@media (max-width:759.98px){
  .mq-guia,.mq-txt{ display:none; }
  .maniqui-fig svg{ height:min(70vh,560px); width:auto; max-width:100%; max-height:none; }
  .maniqui-mini .maniqui-fig svg{ height:min(52vh,400px); }
  /* el punto crece con la figura chica para que siga siendo tocable, y el
     área invisible crece más: medido a 375px, r:23 daba 42px de toque y el
     mínimo del pulgar es 44 */
  .mq-hit{ r:29; }
  .mq-pt{ r:7.2; }
  .mq-zona.on .mq-pt{ r:9.6; }
  .mq-halo{ r:19; }
  .mq-card-sel{ min-height:60px; }
  .mq-card-ir{ min-height:38px; }
}

/* ==========================================================================
   DICTADO — el formulario que se llena hablando

   Por qué existe: la mitad de quien entra a agendar lo hace desde el teléfono,
   con una mano, y llenar seis campos con el pulgar es exactamente donde se
   abandona una solicitud. Hablar cuesta veinte segundos.

   El panel tiene que verse como parte de la ficha, no como un widget pegado:
   misma arena, mismo ámbar, misma tipografía. Y tiene que dejar claras tres
   cosas de un vistazo — que está escuchando, qué anotó, y que la voz no se
   guarda. Lo último no es letra chica: va del mismo tamaño que lo demás.
   ========================================================================== */
.voz{
  margin:22px 0 6px;
  padding:18px;
  border:1px solid rgba(20,26,35,.12);
  border-radius:16px;
  background:linear-gradient(180deg, var(--arena) 0%, rgba(242,237,228,.45) 100%);
  transition:border-color .3s ease, box-shadow .3s ease;
}
.voz.voz-on{
  border-color:rgba(201,133,77,.55);
  box-shadow:0 0 0 4px rgba(201,133,77,.10);
}
.voz-cab{ display:flex; align-items:center; gap:14px; }
.voz-txt{ min-width:0; }
.voz-tit{
  font-family:'Fraunces',Georgia,serif; font-size:1.06rem; line-height:1.25;
  color:var(--ink); margin:0 0 3px;
}
.voz-est{
  margin:0; font-size:.9rem; line-height:1.45; color:var(--mute);
  min-height:1.45em;                       /* que no salte el panel al cambiar */
}
.voz-on .voz-est{ color:var(--ambar-dk); }

/* El micrófono: 56px de blanco tocable, muy por encima del mínimo del pulgar.
   Mientras escucha late — despacio, y se detiene solo cuando ella termina. */
.voz-mic{
  flex:0 0 auto; width:56px; height:56px; border-radius:50%;
  display:grid; place-items:center; cursor:pointer;
  border:1px solid var(--ambar-dk);
  background:var(--ambar); color:#fff;
  transition:background .25s ease, transform .18s ease, box-shadow .25s ease;
}
.voz-mic:hover{ background:var(--ambar-dk); }
.voz-mic:active{ transform:scale(.95); }
.voz-mic:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }
.voz-on .voz-mic{
  background:var(--rojo); border-color:var(--rojo);
  animation:voz-late 1.9s ease-in-out infinite;
}
@keyframes voz-late{
  0%,100%{ box-shadow:0 0 0 0 rgba(168,64,47,.36); }
  55%    { box-shadow:0 0 0 12px rgba(168,64,47,0); }
}

/* Lo que va oyendo, escrito. Sirve para dos cosas: se ve que la cosa funciona,
   y si el reconocimiento entendió mal, ella lo ve ahí y lo corrige arriba. */
.voz-trans{
  margin-top:14px; padding:12px 14px;
  border-left:2px solid var(--ambar);
  background:rgba(255,255,255,.7);
  border-radius:0 10px 10px 0;
  max-height:132px; overflow-y:auto;
}
.voz-trans p{
  margin:0; font-size:.92rem; line-height:1.6; color:var(--slate);
  font-style:italic;
}

.voz-zonas{ margin-top:14px; }
.voz-zt{
  margin:0 0 8px; font-size:.74rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--mute);
}
.voz-pills{ display:flex; flex-wrap:wrap; gap:8px; }
.voz-pill{
  display:inline-flex; align-items:center; gap:8px;
  min-height:36px; padding:0 12px; border-radius:999px; cursor:pointer;
  border:1px solid var(--ambar); background:rgba(201,133,77,.12);
  color:var(--ambar-dk); font-size:.88rem;
  transition:background .2s ease;
  animation:voz-entra .34s ease both;
}
.voz-pill:hover{ background:rgba(201,133,77,.22); }
.voz-pill i{ font-style:normal; font-size:1.1rem; line-height:1; opacity:.7; }
@keyframes voz-entra{
  from{ opacity:0; transform:translateY(5px); }
  to  { opacity:1; transform:none; }
}

.voz-nota{
  margin:14px 0 0; font-size:.84rem; line-height:1.55; color:var(--mute);
}

/* El destello del campo que se acaba de llenar. Sin esto el formulario cambia
   a espaldas de la persona y no se entiende de dónde salió el texto. */
.campo.voz-lleno input,
.campo.voz-lleno textarea{ animation:voz-destello 1.5s ease both; }
@keyframes voz-destello{
  0%  { background:rgba(201,133,77,.30); border-color:var(--ambar); }
  100%{ background:#fff; border-color:rgba(20,26,35,.15); }
}

/* Variante chica: un micrófono al lado de un campo, sin título ni marco. */
.voz.voz-min{
  margin:10px 0 0; padding:0; border:0; background:none; box-shadow:none;
}
.voz.voz-min .voz-mic{ width:46px; height:46px; }
.voz.voz-min .voz-mic svg{ width:22px; height:22px; }
.voz.voz-min .voz-nota{ font-size:.79rem; margin-top:10px; }

/* Teléfono: el panel no puede tapar los campos ni empujarlos fuera de vista,
   así que se aprieta y la transcripción se queda corta a propósito. */
@media (max-width:560px){
  .voz{ padding:15px; border-radius:14px; }
  .voz-cab{ gap:12px; }
  .voz-mic{ width:52px; height:52px; }
  .voz-tit{ font-size:1rem; }
  .voz-est{ font-size:.86rem; }
  .voz-trans{ max-height:96px; }
  .voz-nota{ font-size:.8rem; }
}

@media (prefers-reduced-motion:reduce){
  .voz-on .voz-mic{ animation:none; box-shadow:0 0 0 4px rgba(168,64,47,.22); }
  .voz-pill{ animation:none; }
  .campo.voz-lleno input,
  .campo.voz-lleno textarea{ animation:none; }
}

.oscuro .voz{
  background:rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.13);
}
.oscuro .voz-tit{ color:#fff; }
.oscuro .voz-est{ color:rgba(251,249,245,.62); }
.oscuro .voz-on .voz-est{ color:var(--ambar-lt); }
.oscuro .voz-trans{ background:rgba(255,255,255,.06); }
.oscuro .voz-trans p{ color:rgba(251,249,245,.8); }
.oscuro .voz-nota{ color:rgba(251,249,245,.55); }

/* ==========================================================================
   EL ESCANEO — la foto del rostro, tomada dentro del navegador
   El encargo del doctor: que al enviar la solicitud aparezca un escaneo con
   líneas blancas que molden la cara —nariz, mandíbula, ojos— y que se vea que
   se quedan pegadas al rostro. Aquí está, y con dos reglas encima:

     · la solicitud NUNCA depende de la foto — «Enviar sin foto» está a la
       vista en los tres pasos, no escondido detrás de un enlace chico;
     · la imagen no sale del teléfono: la detección corre en el navegador y
       la foto se queda aquí hasta que la paciente decide.

   El lenguaje visual es de instrumento, no de filtro de red social: fondo
   tinta, una sola línea blanca de 1px, esquinas de encuadre y ámbar solo
   cuando el rostro queda dentro. Cero colores, cero máscaras.
   ========================================================================== */
.esc{
  position:fixed; inset:0; z-index:900;
  display:none; flex-direction:column; align-items:center;
  background:#0A0E14; color:#fff;
  padding:max(18px,env(safe-area-inset-top)) 18px max(18px,env(safe-area-inset-bottom));
  overflow-y:auto; overscroll-behavior:contain;
}
.esc.on{ display:flex; }
body.esc-abierto{ overflow:hidden; }

/* El armado es de columna elástica y no de alturas fijas por una razón muy
   concreta: «Enviar sin foto» tiene que estar A LA VISTA, sin que ella tenga
   que desplazar la pantalla para encontrarlo. Así que el marco de la cámara
   es lo único que cede espacio, y los textos y los botones se quedan
   completos en cualquier teléfono. */
.esc-in{
  width:100%; max-width:430px; margin:auto;
  display:flex; flex-direction:column; gap:16px;
  flex:1 1 auto; min-height:0;
}

.esc-tapa{ display:flex; align-items:center; justify-content:space-between; gap:14px; }
.esc-marca{ font-family:'Fraunces',serif; font-weight:900; font-size:14px; letter-spacing:.22em; color:rgba(255,255,255,.72); }
.esc-x{
  appearance:none; border:1.5px solid rgba(255,255,255,.24); background:transparent; color:#fff;
  width:44px; height:44px; border-radius:999px; cursor:pointer; font-size:19px; line-height:1;
  display:grid; place-items:center; transition:border-color .2s, background .2s;
}
.esc-x:hover{ border-color:rgba(255,255,255,.5); background:rgba(255,255,255,.07); }

/* ---------- el marco de la cámara ---------- */
.esc-marco{
  position:relative; width:100%; border-radius:26px; overflow:hidden;
  background:#0D1219; border:1px solid rgba(255,255,255,.13);
  /* cede altura antes que cualquier otra cosa, y nunca baja de lo que hace
     falta para encuadrar una cara */
  flex:1 1 auto; min-height:200px; max-height:min(58vh,520px);
}
.esc-video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
  /* espejo: la paciente se ve como en un espejo, que es lo que el cuerpo
     espera al alinearse. La foto guardada va sin espejo — eso lo hace el
     lienzo, que copia el cuadro original del video. */
  transform:scaleX(-1);
}
.esc-toma{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:none; }
.esc.paso-revisar .esc-toma{ display:block; }
.esc.paso-revisar .esc-video,.esc.paso-revisar .esc-retic,.esc.paso-consent .esc-video{ display:none; }

.esc-retic{ position:absolute; inset:0; width:100%; height:100%; transform:scaleX(-1); pointer-events:none; }
.esc-retic path,.esc-retic ellipse,.esc-retic polyline{
  fill:none; stroke:rgba(255,255,255,.8); stroke-width:1;
  stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke;
}
.esc-retic .guia{ stroke:rgba(255,255,255,.3); stroke-dasharray:5 9; }
.esc.dentro .esc-retic .guia{ stroke:rgba(201,133,77,.55); stroke-dasharray:none; }

/* las esquinas de encuadre: cuatro escuadras, nada más */
.esc-esq{ position:absolute; inset:16px; pointer-events:none; }
.esc-esq i{ position:absolute; width:26px; height:26px; border:1.5px solid rgba(255,255,255,.55); transition:border-color .35s; }
.esc-esq i:nth-child(1){ top:0; left:0; border-right:0; border-bottom:0; border-top-left-radius:8px; }
.esc-esq i:nth-child(2){ top:0; right:0; border-left:0; border-bottom:0; border-top-right-radius:8px; }
.esc-esq i:nth-child(3){ bottom:0; left:0; border-right:0; border-top:0; border-bottom-left-radius:8px; }
.esc-esq i:nth-child(4){ bottom:0; right:0; border-left:0; border-top:0; border-bottom-right-radius:8px; }
.esc.dentro .esc-esq i{ border-color:var(--ambar-lt); }

/* el barrido: una línea que recorre el marco mientras busca el rostro */
.esc-barrido{
  position:absolute; inset-inline:0; height:2px; top:0; opacity:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);
}
.esc.paso-camara .esc-barrido{ opacity:1; animation:esc-barre 3.4s var(--ease) infinite; }
/* se anima `top`, no `transform`: el translate de un elemento de 2px de alto
   se mide contra esos 2px y el barrido se quedaría pegado al borde. */
@keyframes esc-barre{ 0%{ top:0; } 50%{ top:calc(100% - 2px); } 100%{ top:0; } }
@media (prefers-reduced-motion:reduce){ .esc.paso-camara .esc-barrido{ animation:none; opacity:.25; } }

/* la cuenta regresiva, en el centro del marco */
.esc-cuenta{
  position:absolute; inset:0; display:none; place-items:center;
  font-family:'Fraunces',serif; font-weight:900; font-size:88px; line-height:1;
  color:#fff; text-shadow:0 4px 40px rgba(10,14,20,.8); pointer-events:none;
}
.esc-cuenta.on{ display:grid; }

/* ---------- el texto y los botones ---------- */
.esc-titulo{ font-family:'Fraunces',Georgia,serif; font-weight:900; font-size:clamp(1.35rem,5vw,1.75rem); line-height:1.12; }
.esc-linea{ font-size:13.5px; line-height:1.6; color:rgba(255,255,255,.66); }
.esc-linea b{ color:rgba(255,255,255,.9); font-weight:800; }

.esc-estado{
  display:inline-flex; align-items:center; gap:9px; align-self:flex-start;
  font-size:12px; font-weight:800; letter-spacing:.13em; text-transform:uppercase;
  color:rgba(255,255,255,.6); min-height:24px;
}
.esc-estado::before{
  content:''; width:8px; height:8px; border-radius:999px;
  background:rgba(255,255,255,.35); transition:background .3s, box-shadow .3s;
}
.esc.dentro .esc-estado{ color:var(--ambar-lt); }
.esc.dentro .esc-estado::before{ background:var(--ambar); box-shadow:0 0 0 5px rgba(201,133,77,.2); }

.esc-btns{ display:flex; flex-direction:column; gap:11px; }
.esc-btns .btn{ width:100%; }
/* «Enviar sin foto» es un botón de verdad, del mismo alto que el otro: la
   salida sin foto no se esconde en letra chica. */
.esc-sin{
  appearance:none; background:transparent; border:1.5px solid rgba(255,255,255,.28);
  color:#fff; min-height:50px; border-radius:999px; cursor:pointer; font-family:inherit;
  font-size:13px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  transition:background .2s, border-color .2s;
}
.esc-sin:hover{ background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.5); }

/* la nota de consentimiento vive aquí, en el punto de captura, y en ningún
   otro sitio del cuerpo de la página */
.esc-nota{ font-size:11.5px; line-height:1.55; color:rgba(255,255,255,.42); }

/* pasos: cada uno enciende lo suyo */
.esc [data-paso]{ display:none; flex-direction:column; gap:14px; }
.esc.paso-consent [data-paso="consent"],
.esc.paso-camara  [data-paso="camara"],
.esc.paso-revisar [data-paso="revisar"]{ display:flex; }

/* en pantalla ancha el marco no se estira hasta perder la proporción */
@media (min-width:600px) and (min-height:720px){
  .esc-in{ max-width:460px; }
}
/* teléfono acostado: hay poquísima altura, así que se aprieta todo */
@media (max-height:600px){
  .esc-in{ gap:11px; }
  .esc-marco{ min-height:150px; max-height:40vh; }
  .esc-nota{ display:none; }
  .esc-titulo{ font-size:1.15rem; }
}
/* Teléfono acostado de verdad —ancho y bajito—: apretar la columna ya no
   alcanza y «Enviar sin foto» se sale por abajo. En esa forma de pantalla lo
   natural es girar el armado: la cámara toma la izquierda y los textos con sus
   botones se van a la derecha. Así el botón de escape sigue a la vista sin que
   ella tenga que desplazar nada, que es la regla que no cede. */
@media (max-height:560px) and (min-width:620px){
  .esc-in{
    max-width:none; gap:0;
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(270px,350px);
    grid-template-rows:auto minmax(0,1fr);
    column-gap:20px; row-gap:10px;
  }
  .esc-tapa{ grid-column:1 / -1; grid-row:1; }
  .esc-marco{ grid-column:1; grid-row:2; min-height:0; max-height:none; height:100%; }
  .esc [data-paso]{
    grid-column:2; grid-row:2;
    justify-content:center; gap:11px; min-height:0; overflow-y:auto;
  }
}

/* ---------- la foto ya guardada, en el aviso de éxito ---------- */
.esc-guardada{ display:flex; align-items:center; gap:14px; margin-top:12px; }
.esc-guardada img{ width:56px; height:74px; object-fit:cover; border-radius:10px; border:1px solid var(--linea); }

/* ==========================================================================
   EL CONSULTOR — donde estaba la tabla
   ==========================================================================
   Una tabla de seis columnas es un mueble de escritorio: en un teléfono se
   desliza a los lados y se lee de reojo. Aquí el orden se invierte. Ella
   escribe una frase —la que diría en voz alta— y sale UNA tarjeta.

   Tres decisiones de forma que sostienen el fondo:

   · El campo es el protagonista. Fraunces, grande, sin borde de formulario
     agresivo: parece un renglón de cuaderno, no un input de trámite.
   · La respuesta tiene acento por familia. Ámbar para la radiofrecuencia,
     un azul de la misma temperatura para la luz. Es el único lugar del sitio
     donde entra otro color, y entra para orientar, no para adornar.
   · Nada rebota. La tarjeta sube 14px y se abre en 420ms. Con
     prefers-reduced-motion, aparece y ya.
   ========================================================================== */
.cns{
  border:1px solid var(--linea);
  border-radius:var(--r-xl);
  background:linear-gradient(180deg,#fff 0%, var(--crema) 100%);
  padding:26px 22px 24px;
  box-shadow:0 24px 60px -46px rgba(20,26,35,.5);
}
.cns-rotulo{
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ambar-dk); font-weight:700; margin:0 0 10px;
}
.cns-pide{
  font-family:'Fraunces',Georgia,serif; font-size:1.35rem; line-height:1.25;
  color:var(--ink); margin:0 0 6px; letter-spacing:-.01em;
}
.cns-ayuda{ margin:0 0 16px; font-size:.95rem; line-height:1.6; color:var(--mute); }

/* ---------- el campo, que es lo primero que ella ve ---------- */
.cns-caja{
  border:1px solid var(--linea); border-radius:var(--r-m); background:#fff;
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.cns-caja:focus-within{
  border-color:rgba(201,133,77,.6);
  box-shadow:0 0 0 4px rgba(201,133,77,.10);
}
.cns-caja textarea{
  display:block; width:100%; border:0; background:transparent; resize:none;
  padding:18px 18px 8px;
  font-family:'Fraunces',Georgia,serif; font-size:1.18rem; line-height:1.5;
  color:var(--ink); min-height:104px;
}
.cns-caja textarea::placeholder{ color:#A9B1BB; font-style:italic; }
.cns-caja textarea:focus{ outline:none; }
.cns-barra{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:0 12px 12px; flex-wrap:wrap;
}
/* El micrófono del dictado vive aquí dentro: mismo motor que el de agendar,
   sin caja propia para que no compita con el campo. */
.cns-barra .voz{
  margin:0; padding:6px 0 0; border:0; background:none; flex:1 1 210px; min-width:0;
}
.cns-barra .voz.voz-on{ box-shadow:none; }
.cns-barra .voz-nota{ font-size:.78rem; }

/* ---------- sugerencias tocables ---------- */
.cns-sug{ margin:18px 0 0; }
.cns-sug-t{ margin:0 0 10px; font-size:.86rem; color:var(--mute); }
.cns-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.cns-chip{
  border:1px solid var(--linea); background:var(--arena); color:var(--slate);
  border-radius:999px; padding:11px 15px; min-height:44px;
  font:inherit; font-size:.87rem; line-height:1.2; cursor:pointer; text-align:left;
  transition:border-color .22s var(--ease), background .22s var(--ease), color .22s var(--ease);
}
.cns-chip:hover, .cns-chip:focus-visible{
  border-color:var(--ambar); background:#fff; color:var(--ink);
}

/* ---------- la respuesta ---------- */
.cns-salida{ margin-top:20px; }
.cns-card{
  --ac:var(--ambar); --ac-dk:var(--ambar-dk); --ac-w:rgba(201,133,77,.09);
  position:relative; overflow:hidden;
  border:1px solid var(--linea); border-radius:var(--r-l); background:#fff;
  padding:24px 22px;
  box-shadow:0 30px 70px -52px rgba(20,26,35,.65);
}
/* La familia de luz cambia el acento. Mismo peso, otra temperatura. */
.cns-card[data-fam="luz"]{ --ac:#3B6E8F; --ac-dk:#2C5570; --ac-w:rgba(59,110,143,.09); }
.cns-card::before{
  content:''; position:absolute; inset:0 0 auto; height:3px; background:var(--ac);
}
.cns-cab{ display:flex; gap:16px; align-items:flex-start; }
.cns-glifo{
  flex:0 0 auto; width:56px; height:56px; border-radius:16px;
  display:grid; place-items:center; color:var(--ac-dk); background:var(--ac-w);
}
.cns-glifo svg{ width:32px; height:32px; }
.cns-glifo-sm{ width:40px; height:40px; border-radius:12px; }
.cns-glifo-sm svg{ width:22px; height:22px; }
.cns-cab-txt{ min-width:0; }
.cns-eco{
  margin:0 0 4px; font-size:.8rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--mute); font-weight:600;
}
.cns-dijo{
  margin:2px 0 8px; font-family:'Fraunces',Georgia,serif; font-style:italic;
  font-size:1.02rem; line-height:1.3; color:var(--ac-dk);
}
.cns-tec{
  font-family:'Fraunces',Georgia,serif; font-weight:600;
  font-size:clamp(1.6rem, 6.4vw, 2.15rem); line-height:1.08; letter-spacing:-.02em;
  color:var(--ink); margin:0;
}
.cns-mas{ font-size:.62em; color:var(--mute); font-weight:400; }
.cns-fam{ margin:6px 0 0; font-size:.85rem; color:var(--mute); }
.cns-porque{
  margin:18px 0 0; font-size:1rem; line-height:1.72; color:var(--slate);
}

.cns-meta{ margin:20px 0 0; display:grid; gap:1px; background:var(--linea);
  border:1px solid var(--linea); border-radius:var(--r-s); overflow:hidden; }
.cns-dato{ background:#fff; padding:14px 16px; }
.cns-dato dt{
  font-size:.72rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--mute); font-weight:700; margin-bottom:5px;
}
.cns-dato dd{ margin:0; font-size:.95rem; line-height:1.6; color:var(--ink); }

.cns-rot{
  font-size:.72rem; letter-spacing:.13em; text-transform:uppercase;
  font-weight:700; color:var(--ac-dk); margin:0 0 6px;
}
.cns-nunca{
  margin-top:18px; padding:15px 16px; border-radius:var(--r-s);
  background:var(--arena); border:1px solid var(--arena-2);
}
.cns-nunca p{ margin:0; font-size:.93rem; line-height:1.65; color:var(--slate); }
.cns-nunca p + p{ margin-top:6px; }

/* La puerta al quirófano. No es una advertencia: es el procedimiento que sí
   corresponde, con su nombre y su enlace. */
.cns-puerta{
  margin-top:18px; padding:16px; border-radius:var(--r-s);
  border:1px solid var(--linea); background:var(--crema);
}
.cns-rot-ico{ display:flex; align-items:center; gap:11px; margin-bottom:9px; }
.cns-puerta p{ margin:0; font-size:.93rem; line-height:1.65; color:var(--slate); }
.cns-puerta .enlace{ margin-top:9px; display:inline-flex; }

.cns-segunda{ margin-top:16px; padding-top:15px; border-top:1px solid var(--linea); }
.cns-segunda p{ margin:0; font-size:.9rem; line-height:1.6; color:var(--mute); }
.cns-segunda b{ color:var(--ink); }

.cns-pie{
  margin-top:22px; padding-top:18px; border-top:1px solid var(--linea);
  display:flex; align-items:center; gap:16px 20px; flex-wrap:wrap;
}
.cns-disc{ margin:16px 2px 0; font-size:.82rem; line-height:1.6; color:var(--mute); }

/* El cuadro completo no se pierde: se guarda y se abre a quien lo pida. */
.cns-cuadro{ margin-top:26px; }
.cns-cuadro > summary{
  cursor:pointer; list-style:none; padding:14px 2px; min-height:44px;
  display:flex; align-items:center; gap:9px;
  font-size:.93rem; font-weight:600; color:var(--ambar-dk);
}
.cns-cuadro > summary::-webkit-details-marker{ display:none; }
.cns-cuadro > summary::after{
  content:'+'; margin-left:auto; font-size:1.15rem; color:var(--mute); font-weight:400;
}
.cns-cuadro[open] > summary::after{ content:'–'; }
.cns-cuadro[open] > summary{ border-bottom:1px solid var(--linea); }

/* ---------- entrada ---------- */
@keyframes cns-entra{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
@keyframes cns-glifo-entra{ from{ opacity:0; transform:scale(.86); } to{ opacity:1; transform:none; } }
.cns-entra{ animation:cns-entra .42s var(--ease) both; }
.cns-entra .cns-glifo{ animation:cns-glifo-entra .5s var(--ease) both .08s; }
.cns-entra .cns-meta{ animation:cns-entra .42s var(--ease) both .1s; }
.cns-entra .cns-puerta, .cns-entra .cns-nunca, .cns-entra .cns-pie{
  animation:cns-entra .42s var(--ease) both .16s;
}

/* ---------- teléfono ---------- */
@media (max-width:560px){
  .cns{ padding:20px 16px 20px; border-radius:var(--r-l); }
  .cns-pide{ font-size:1.2rem; }
  .cns-caja textarea{ font-size:1.08rem; padding:16px 15px 6px; min-height:96px; }
  .cns-barra{ padding:0 10px 10px; }
  .cns-card{ padding:20px 16px; border-radius:var(--r-m); }
  .cns-cab{ gap:13px; }
  .cns-glifo{ width:48px; height:48px; border-radius:14px; }
  .cns-glifo svg{ width:27px; height:27px; }
  .cns-porque{ font-size:.96rem; }
  .cns-pie{ gap:14px; }
  .cns-pie .btn{ width:100%; justify-content:center; }
  .cns-puerta{ padding:14px; gap:12px; }
}
@media (prefers-reduced-motion:reduce){
  .cns-entra, .cns-entra .cns-glifo, .cns-entra .cns-meta,
  .cns-entra .cns-puerta, .cns-entra .cns-nunca, .cns-entra .cns-pie{ animation:none!important; }
}

/* ---------- sobre fondo oscuro ---------- */
.oscuro .cns{
  background:rgba(255,255,255,.045); border-color:rgba(255,255,255,.14);
  box-shadow:none;
}
.oscuro .cns-pide{ color:#fff; }
.oscuro .cns-ayuda, .oscuro .cns-sug-t{ color:rgba(255,255,255,.62); }
.oscuro .cns-rotulo{ color:var(--ambar-lt); }
.oscuro .cns-caja{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.16); }
.oscuro .cns-caja textarea{ color:#fff; }
.oscuro .cns-caja textarea::placeholder{ color:rgba(255,255,255,.42); }
.oscuro .cns-chip{
  background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.16); color:rgba(255,255,255,.82);
}
.oscuro .cns-chip:hover, .oscuro .cns-chip:focus-visible{
  background:rgba(255,255,255,.12); border-color:var(--ambar-lt); color:#fff;
}
.oscuro .cns-disc{ color:rgba(255,255,255,.55); }
.oscuro .cns-cuadro > summary{ color:var(--ambar-lt); }
.cns-chip[hidden]{ display:none; }
.cns-chip-abre{ background:transparent; border-style:dashed; color:var(--ambar-dk); font-weight:600; }
.oscuro .cns-chip-abre{ background:transparent; color:var(--ambar-lt); }

/* ============================================================
   PRECIOS — el alma, el primer factor, el desbloqueo y la letra chica

   Tres decisiones de forma:
   1. El alma se lee más grande que el resto de la página y en serif. Es el
      único bloque de la página que no informa: convence de por qué el número
      llega al final.
   2. El factor 01 va solo, ancho completo, con el número en grande al lado.
      Es la variable que más mueve el total y tiene que verse así.
   3. El desbloqueo es una escalera de cuatro peldaños. El cuarto —el que se
      abre— es el único con acento ámbar; los tres anteriores están en gris.
      Nada rebota: el candado se abre una vez, en 520 ms, y se queda quieto.
   ============================================================ */

.alma-p{
  font-family:'Fraunces',Georgia,serif;
  font-size:clamp(1.08rem,3.6vw,1.34rem);
  line-height:1.62; color:var(--slate); margin:0 0 18px;
  max-width:62ch;
}
.alma-p:last-of-type{ margin-bottom:0; }
.oscuro .alma-p{ color:rgba(255,255,255,.8); }

.factor-uno{ display:flex; gap:22px; align-items:flex-start; }
.factor-uno .factor-n{
  font-size:clamp(2.4rem,9vw,3.4rem); color:var(--ambar-dk);
  line-height:.9; flex:none; opacity:.9;
}
.factor-uno h3{ font-size:clamp(1.18rem,4.6vw,1.5rem); line-height:1.24; }
@media (max-width:640px){
  .factor-uno{ flex-direction:column; gap:10px; }
}

/* --- el desbloqueo --- */
.desb{
  list-style:none; margin:44px 0 0; padding:0;
  display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(232px,1fr));
  counter-reset:none;
}
.desb-paso{
  position:relative; padding:24px 22px 26px;
  border:1px solid rgba(255,255,255,.13); border-radius:var(--r-m);
  background:rgba(255,255,255,.035);
}
.desb-paso h3{ font-size:1.06rem; margin-top:14px; color:#fff; }
.desb-paso p{ font-size:14.6px; line-height:1.62; color:rgba(255,255,255,.66); margin-top:9px; }
.desb-n{
  font-family:'Manrope',system-ui,sans-serif; font-size:12px; font-weight:700;
  letter-spacing:.16em; color:rgba(255,255,255,.42); display:block;
}
.desb-ico{
  display:grid; place-items:center; width:46px; height:46px; margin-top:16px;
  border-radius:13px; border:1px solid rgba(255,255,255,.14);
  color:rgba(255,255,255,.6); background:rgba(255,255,255,.03);
}
.desb-ico svg{ width:26px; height:26px; }
/* El último peldaño es el único que abre: acento ámbar y nada más. */
.desb-abierto{ border-color:rgba(201,133,77,.5); background:rgba(201,133,77,.09); }
.desb-abierto .desb-n{ color:var(--ambar-lt); }
.desb-abierto .desb-ico{
  border-color:rgba(201,133,77,.45); color:var(--ambar-lt);
  background:rgba(201,133,77,.12);
}
.js-rev .desb.vis .desb-abierto .desb-ico svg{ animation:desb-abre .52s var(--ease) .34s both; }
@keyframes desb-abre{
  from{ transform:rotate(-7deg) scale(.94); opacity:.5 }
  to  { transform:none; opacity:1 }
}
.desb-pie{
  display:flex; flex-wrap:wrap; gap:26px 40px; align-items:flex-start;
  justify-content:space-between; margin-top:34px;
  padding-top:28px; border-top:1px solid rgba(255,255,255,.12);
}
.desb-pie > *{ flex:1 1 300px; }
.desb-pie .mini{ color:rgba(255,255,255,.5); }
.desb-pie .sub{ color:rgba(255,255,255,.62); }
@media (max-width:560px){
  .desb-pie .btn{ width:100%; justify-content:center; }
}

/* --- la letra chica: información de trámite, a su tamaño real --- */
.chica{ border-top:1px solid var(--linea); padding-top:20px; }
.chica > summary{
  cursor:pointer; list-style:none; display:flex; align-items:center; gap:10px;
  min-height:44px; font-size:14px; font-weight:600; color:var(--mute);
  letter-spacing:.01em;
}
.chica > summary::-webkit-details-marker{ display:none; }
.chica > summary::before{
  content:'+'; display:grid; place-items:center; width:22px; height:22px;
  border:1px solid var(--linea); border-radius:7px; font-size:14px; flex:none;
}
.chica[open] > summary::before{ content:'–'; }
.chica > div{ padding:6px 0 4px; max-width:70ch; }
.chica p, .chica li{ font-size:13.6px; line-height:1.66; color:var(--mute); }
.chica p{ margin:10px 0; }
.chica ul{ margin:12px 0; padding-left:18px; }
.chica li{ margin:5px 0; }
@media (prefers-reduced-motion:reduce){
  .js-rev .desb.vis .desb-abierto .desb-ico svg{ animation:none; }
}

/* ============================================================
   REGLA DE PULGAR — el unico control del sitio que quedaba por
   debajo del minimo tactil. "Empezar de nuevo" del maniqui medía
   34px de alto: en un telefono eso se falla a la primera. Se sube
   solo en pantallas chicas para no cambiar el escritorio, y se
   deja aqui abajo en vez de tocar la declaracion original, que la
   escribe otra sesion.
   ============================================================ */
@media (max-width:640px){
  .mq-limpiar{ min-height:44px; padding-inline:16px; }
}