/* ═══════════════════════════════════════════════════════════
   Dr. José Alberto — Otorrinolaringología

   TODO el color pasa por token. Ninguna regla de este archivo
   escribe un hexadecimal: las escalas viven en :root, los
   componentes llaman solo a los tokens semánticos del bloque
   «Tokens semánticos». Si necesita un tono que no existe,
   pídalo — no lo invente aquí.
   ═══════════════════════════════════════════════════════════ */

:root{
  /* ── Escala azul · color de marca ────────────────────────
     --blue-600 es el azul exacto del sitio anterior del
     doctor. Todo lo demás se deriva de él.               */
  --blue-50:#F0F8FC;
  --blue-100:#DCEFF8;
  --blue-200:#B9DFF0;
  --blue-300:#8CC9E4;
  --blue-400:#5BB0D6;
  --blue-500:#2E93C2;
  --blue-600:#1478A8;
  --blue-700:#10618A;
  --blue-800:#0C4A6B;
  --blue-900:#08344B;

  /* ── Escala aqua · acento ────────────────────────────────
     --aqua-400 es el aqua del menú activo y de las palomitas
     del sitio anterior.                                   */
  --aqua-50:#F0FAF7;
  --aqua-100:#DBF2EC;
  --aqua-200:#B6E4D9;
  --aqua-300:#8FD2C3;
  --aqua-400:#6CBFAF;
  --aqua-500:#4CA495;
  --aqua-600:#3A8579;
  --aqua-700:#2C665C;
  --aqua-800:#1E4740;
  --aqua-900:#123029;

  /* ── Escala neutra · gris verdoso, no gris frío ──────────
     --neutral-600 es el gris del texto de cuerpo del sitio
     anterior y --neutral-100 el de los fondos de sección.
     El matiz verdoso es parte de la identidad: no sustituir
     por grises fríos.                                     */
  --neutral-50:#F7F8F8;
  --neutral-100:#EDEDED;
  --neutral-200:#DDE2E2;
  --neutral-300:#C0C8C8;
  --neutral-400:#97A3A3;
  --neutral-500:#7A8888;
  --neutral-600:#5F7373;
  --neutral-700:#4A5A5A;
  --neutral-800:#364242;
  --neutral-900:#232B2B;

  /* ── Tokens semánticos ───────────────────────────────────
     Lo único que deben usar los componentes.              */
  --brand:              var(--blue-600);
  --brand-hover:        var(--blue-700);
  --brand-active:       var(--blue-800);
  --brand-light:        var(--blue-400);
  --brand-lighter:      var(--blue-300);

  --accent:             var(--aqua-400);
  --accent-hover:       var(--aqua-500);

  --surface:            #FFFFFF;
  --surface-alt:        var(--neutral-50);
  --surface-brand:      var(--blue-50);
  --surface-brand-soft: var(--blue-100);
  --surface-accent:     var(--aqua-50);
  --surface-deep:       var(--blue-800);

  --text-primary:       var(--neutral-900);
  --text-secondary:     var(--neutral-600);
  --text-muted:         var(--neutral-500);
  --text-on-brand:      #FFFFFF;
  --text-on-deep:       var(--blue-50);
  --text-on-accent:     var(--aqua-900);

  --border:             var(--neutral-200);
  --border-strong:      var(--neutral-300);
  --border-brand:       var(--blue-200);

  --focus-ring:         var(--blue-500);

  /* ── Tokens añadidos ─────────────────────────────────────
     Necesarios para piezas que la especificación no nombra.
     Todos salen de las tres escalas de arriba; ninguno
     introduce un tono nuevo.                              */
  --surface-brand-strong: var(--blue-200);   /* chip de icono dentro de botón secundario */
  --surface-muted:        var(--neutral-200);/* chip de icono dentro de botón de texto */
  --text-on-brand-soft:   var(--blue-800);   /* texto sobre --surface-brand-soft */
  --link-on-deep:         var(--blue-200);   /* enlaces sobre --surface-deep */
  --text-on-deep-muted:   var(--blue-300);   /* texto secundario sobre --surface-deep */

  /* Tripletas RGB de las escalas, para sombras y tramas con
     alfa. Son los mismos tonos, solo con transparencia. */
  --rgb-brand:  20,120,168;   /* --blue-600 */
  --rgb-deep:   12,74,107;    /* --blue-800 */
  --rgb-ink:    35,43,43;     /* --neutral-900 */
  --rgb-accent: 108,191,175;  /* --aqua-400 */
  --rgb-white:  255,255,255;

  --shadow-sm:    0 12px 30px rgba(var(--rgb-ink),.10);
  --shadow-md:    0 22px 48px rgba(var(--rgb-ink),.14);
  --shadow-lg:    0 22px 54px rgba(var(--rgb-ink),.12);
  --shadow-xl:    0 30px 70px rgba(var(--rgb-deep),.30);
  --shadow-brand: 0 12px 30px rgba(var(--rgb-brand),.28);
  --shadow-brand-hover: 0 18px 38px rgba(var(--rgb-brand),.34);

  --overlay-on-brand: rgba(var(--rgb-white),.24); /* chip de icono sobre botón principal */
  --overlay-line-deep: rgba(var(--rgb-white),.14);/* filete sobre --surface-deep */

  /* ── WhatsApp ────────────────────────────────────────────
     Marca de un tercero, fuera de las escalas. Se conserva
     por decisión del cliente: es lo que hace reconocible el
     canal, y no es ni rojo ni rosa.                       */
  --wa:#25D366;
  --wa-ink:#0B3D21;
  --rgb-wa:37,211,102;

  --jakarta:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
  --outfit:'Outfit',system-ui,-apple-system,sans-serif;
  --helv:'Helvetica Neue',Helvetica,'Plus Jakarta Sans',sans-serif;

  --ancho:1160px;
  --hdr:78px;
  --pad:clamp(20px,3vw,24px);
  --ease:cubic-bezier(.2,.75,.25,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px}
body{
  margin:0;background:var(--surface);color:var(--text-primary);
  font-family:var(--jakarta);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:var(--brand);text-decoration:none;transition:color .15s ease}
a:hover{color:var(--brand-hover)}
button{font-family:inherit}

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--surface-deep);color:var(--text-on-deep);padding:12px 20px;border-radius:0 0 8px 0}
.skip:focus{left:0;color:var(--text-on-deep)}

/* El anillo de foco es visible en todo elemento interactivo. No eliminar. */
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;border-radius:4px}

@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* ── Marcadores de foto ──────────────────────────────────
   Cada marcador declara su propio par de tonos en --slot-*;
   las reglas genéricas de abajo solo leen esas variables. */
.photo-slot{
  --slot-a:var(--blue-200);
  --slot-b:var(--blue-50);
  --slot-rgb:var(--rgb-deep);
  --slot-ink:var(--text-muted);
  position:relative;margin:0;overflow:hidden;
  background:linear-gradient(180deg,var(--slot-a) 0%,var(--surface-brand-soft) 46%,var(--slot-b) 100%);
}
.photo-slot::before{
  content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(135deg,rgba(var(--slot-rgb),.07) 0 6px,rgba(var(--slot-rgb),0) 6px 14px);
}
.photo-slot::after{
  content:attr(data-caption);position:absolute;left:50%;bottom:22px;transform:translateX(-50%);
  font-family:ui-monospace,Menlo,monospace;font-size:11px;letter-spacing:.06em;
  color:var(--slot-ink);white-space:nowrap;pointer-events:none;
}
.photo-slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2}
/* con foto real: se apagan la textura y la etiqueta del marcador */
.photo-slot--llena{background:var(--surface-brand)}
.photo-slot--llena::before,.photo-slot--llena::after{content:none}
.photo-slot--dark{
  --slot-a:var(--blue-700);
  --slot-b:var(--blue-900);
  --slot-ink:var(--text-on-deep-muted);
  background:linear-gradient(150deg,var(--slot-a),var(--slot-b));
}
.photo-slot--dark::before{background:repeating-linear-gradient(135deg,rgba(var(--rgb-accent),.18) 0 6px,rgba(var(--rgb-accent),0) 6px 14px)}
.photo-slot--dark::after{font-size:9px;left:12px;bottom:8px;transform:none}

/* ═══════════ HEADER ═══════════ */
.hdr{position:sticky;top:0;z-index:60;background:var(--surface);border-bottom:1px solid var(--border)}
.hdr__in{
  max-width:var(--ancho);margin:0 auto;padding:0 var(--pad);min-height:78px;
  display:flex;align-items:center;gap:clamp(16px,3vw,40px);
}
.brand{display:flex;align-items:center;gap:10px;flex:none;color:var(--text-primary)}
.brand:hover{color:var(--text-primary)}
.brand__mark{position:relative;display:block;width:44px;height:44px;flex:none}
.brand__mark span{position:absolute;border-radius:11px}
.brand__mark span:nth-child(1){left:0;top:11px;width:33px;height:22px;background:var(--brand)}
.brand__mark span:nth-child(2){left:11px;top:0;width:22px;height:33px;background:var(--brand)}
.brand__mark span:nth-child(3){left:11px;top:11px;width:33px;height:22px;background:var(--accent);mix-blend-mode:multiply}
.brand__mark span:nth-child(4){left:22px;top:11px;width:22px;height:33px;background:var(--accent);mix-blend-mode:multiply}
.brand__name{font-size:17px;font-weight:800;letter-spacing:-.01em;line-height:1.15;white-space:nowrap}
.brand__name small{display:block;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--brand)}

.nav{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(14px,2.6vw,36px);margin-left:clamp(8px,2vw,32px)}
.nav a{font-size:clamp(14px,1.5vw,17px);font-weight:500;color:var(--text-primary);white-space:nowrap}
.nav a:hover{color:var(--brand)}

/* Botón secundario: fondo transparente, borde de marca.
   En hover el texto sube a --brand-hover porque --brand
   sobre --surface-brand-soft se queda en 4.14:1.        */
.btn-ghost{
  margin-left:auto;flex:none;display:flex;align-items:center;gap:16px;height:58px;
  padding:0 8px 0 28px;border:1.5px solid var(--border-brand);border-radius:999px;
  background:transparent;color:var(--brand);font-size:17px;font-weight:700;
  transition:background-color .25s,border-color .25s,color .25s,transform .2s cubic-bezier(.2,.8,.2,1);
}
.btn-ghost:hover{background:var(--surface-brand-soft);border-color:var(--brand);color:var(--brand-hover)}
.btn-ghost:active{transform:scale(.97);transition-duration:.12s}
.btn-ghost__ico{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--surface-brand-strong);flex:none}

.hdr__burger{display:none;margin-left:auto;width:44px;height:44px;border:0;background:none;cursor:pointer;padding:10px}
.hdr__burger span{display:block;height:2px;border-radius:2px;background:var(--text-primary);transition:transform .3s,opacity .2s}
.hdr__burger span+span{margin-top:5px}
.hdr__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hdr__burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.hdr__burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ═══════════ 01 HERO ═══════════ */
.hero{background:var(--surface);overflow:hidden}
.hero__in{
  max-width:var(--ancho);margin:0 auto;
  padding:clamp(48px,6vw,84px) var(--pad) 0;
  display:flex;flex-wrap:wrap;align-items:flex-start;gap:clamp(32px,4vw,48px);
}
.hero__copy{flex:1 1 520px;min-width:min(100%,420px);padding-top:clamp(8px,3vw,42px)}
.hero__h1{
  /* el titular nuevo es largo y "Otorrinolaringólogo" es una sola palabra:
     escala menor que la del prototipo para que no se desborde */
  margin:0;font-size:clamp(30px,4.4vw,56px);line-height:1.06;font-weight:800;
  letter-spacing:-.024em;color:var(--text-primary);max-width:690px;
  overflow-wrap:break-word;
  animation:fadeUp .65s var(--ease) both;
}
.mark{position:relative;display:inline-block}
.mark::after{
  content:'';position:absolute;left:-1%;right:-3%;bottom:-.02em;height:.14em;background:var(--accent);
  clip-path:polygon(0% 38%,100% 0%,100% 62%,0% 100%);
}
.hero__sub{
  margin:clamp(18px,2vw,26px) 0 0;font-size:clamp(16px,1.5vw,19px);line-height:1.45;
  font-weight:700;color:var(--brand);letter-spacing:-.005em;
  animation:fadeUp .6s .05s var(--ease) both;
}
.hero__p{
  margin:clamp(14px,1.6vw,20px) 0 0;max-width:660px;
  font-size:clamp(17px,1.6vw,21px);line-height:1.62;color:var(--text-secondary);
  animation:fadeUp .6s .08s var(--ease) both;
}
.hero__ctas{
  display:flex;flex-wrap:wrap;align-items:center;gap:clamp(28px,5vw,68px);
  margin-top:clamp(34px,4vw,52px);animation:fadeUp .6s .15s var(--ease) both;
}
.cta-wrap{position:relative;flex:none}
.cta-hatch{
  position:absolute;left:58%;top:-16px;width:112px;height:88px;border-radius:999px;
  background:repeating-linear-gradient(48deg,var(--accent) 0 2px,rgba(var(--rgb-accent),0) 2px 9px);
  pointer-events:none;
}
/* Botón principal */
.btn-solid{
  position:relative;display:flex;align-items:center;gap:18px;height:56px;padding:0 13px 0 32px;
  border-radius:999px;background:var(--brand);color:var(--text-on-brand);font-size:17px;font-weight:700;
  box-shadow:var(--shadow-brand);
  transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s,background-color .25s;
}
.btn-solid:hover{background:var(--brand-hover);color:var(--text-on-brand);transform:translateY(-2px);box-shadow:var(--shadow-brand-hover)}
.btn-solid:active{background:var(--brand-active);transform:scale(.97);transition-duration:.12s}
.btn-solid__ico{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--overlay-on-brand);flex:none}
.btn-text{display:flex;align-items:center;gap:14px;color:var(--text-primary);font-size:17px;font-weight:700}
.btn-text:hover{color:var(--brand)}
.btn-text__ico{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--surface-muted);flex:none}

.hero__media{flex:1 1 420px;min-width:min(100%,320px);position:relative;animation:fadeUp .7s .12s var(--ease) both}
.hero__photo{
  position:relative;width:100%;max-width:444px;margin:0 clamp(0px,6.6vw,88px) 0 auto;
  height:clamp(380px,44vw,618px);border-radius:999px 999px 0 0;
}
/* foto vertical: el doctor posa de frente junto al microscopio; la cabeza queda
   arriba a la izquierda, así que anclamos el encuadre en el tercio superior */
.hero__photo img{object-position:46% 14%}
.hero__card{
  position:absolute;right:0;bottom:clamp(10px,3vw,34px);width:clamp(200px,20vw,224px);
  padding:18px;border-radius:14px;background:var(--surface);box-shadow:var(--shadow-md);z-index:3;
}
.hero__card-t{margin:0;font-size:17px;font-weight:700;color:var(--text-primary);letter-spacing:-.01em}
.hero__card-list{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:14px}
.hero__card-list a{display:flex;align-items:center;gap:12px;font-size:15px;font-weight:600;color:var(--text-primary)}
.hero__card-list a:hover{color:var(--brand)}
/* Un mosaico por área clínica. Los mismos tres pares están en
   .panel__media--0/1/2 y en el tema de la sección 04.        */
.tile{width:38px;height:38px;border-radius:8px;flex:none;
  background-image:repeating-linear-gradient(135deg,rgba(var(--rgb-white),.22) 0 3px,rgba(var(--rgb-white),0) 3px 7px),linear-gradient(150deg,var(--tile-a),var(--tile-b));
}
.tile--azul{--tile-a:var(--blue-700);--tile-b:var(--blue-400)}
.tile--aqua{--tile-a:var(--aqua-600);--tile-b:var(--aqua-300)}
.tile--neutro{--tile-a:var(--neutral-600);--tile-b:var(--neutral-300)}

/* ═══════════ 02 BARRA DE CONFIANZA ═══════════ */
.stats{background:var(--surface)}
.stats__in{
  max-width:1240px;margin:0 auto;
  padding:clamp(70px,9vw,124px) var(--pad) clamp(76px,10vw,132px);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:clamp(36px,4vw,48px) 16px;font-family:var(--helv);text-align:center;
}
/* La escala anterior —clamp(52px,7.4vw,104px)— estaba hecha para cifras de
   dos caracteres («25+», «9»). Los bloques ahora llevan frase completa, así
   que baja a escala de titular y la interlínea se abre para poder envolver. */
.stat__n{font-size:clamp(24px,2.6vw,34px);font-weight:300;line-height:1.2;letter-spacing:-.02em;color:var(--brand);text-wrap:balance}
/* El «+» NO puede ir en --brand-light: da 2.43:1 sobre blanco y no
   llega ni al 3:1 de texto grande. En --brand-hover da 6.78:1 y
   conserva el número a dos tonos.                              */
.stat__n span{font-size:.46em;color:var(--brand-hover);letter-spacing:0}
.stat__l{margin-top:14px;font-size:clamp(16px,1.5vw,19px);color:var(--text-secondary)}

/* ═══════════ 03 ¿LE ESTÁ PASANDO ESTO? ═══════════
   Antes era un bloque azul oscuro a pantalla completa. Pasa a
   fondo claro para que las etiquetas de síntomas puedan ir en
   --surface-brand-soft, y la tarjeta oscura queda como único
   anclaje profundo de la sección.                            */
.pain{
  position:relative;background:var(--surface-brand);overflow:hidden;
  font-family:var(--outfit);min-height:clamp(640px,56vw,712px);
}
.pain__ring{
  position:absolute;left:-190px;top:210px;width:540px;height:540px;
  border-radius:50%;border:104px solid var(--surface-brand-soft);pointer-events:none;
}
.pain__in{
  position:relative;max-width:var(--ancho);margin:0 auto;
  padding:clamp(64px,7vw,96px) var(--pad) clamp(80px,8vw,110px);text-align:center;
}
.pain__h2{
  /* el texto nuevo es una frase larga, no las 4 palabras del original:
     baja de escala para que no se encime con las tarjetas flotantes */
  margin:0;font-size:clamp(28px,4.6vw,58px);line-height:1.1;font-weight:700;
  letter-spacing:-.015em;color:var(--brand);
}
.pain__p{
  margin:clamp(28px,3.4vw,44px) auto 0;max-width:660px;
  font-size:clamp(17px,1.6vw,20px);line-height:1.5;font-weight:500;color:var(--text-secondary);
}
/* Etiquetas de síntomas */
.chips{
  list-style:none;margin:clamp(26px,3vw,38px) auto 0;padding:0;max-width:820px;
  display:flex;flex-wrap:wrap;justify-content:center;gap:10px;
}
.chips li{
  padding:9px 16px;border-radius:999px;
  background:var(--surface-brand-soft);border:1px solid var(--border-brand);
  font-size:14px;font-weight:500;color:var(--text-on-brand-soft);
}
/* CTA de la sección: mismo botón principal del sitio.
   No puede ir en aqua: blanco sobre --accent da 2.16:1. */
.btn-aqua{
  display:inline-block;margin-top:clamp(30px,3.4vw,44px);padding:15px 34px;border-radius:8px;
  background:var(--brand);color:var(--text-on-brand);font-size:16px;font-weight:700;
  box-shadow:var(--shadow-brand);
  transition:transform .25s cubic-bezier(.2,.8,.2,1),background-color .25s,box-shadow .25s;
}
.btn-aqua:hover{color:var(--text-on-brand);background:var(--brand-hover);transform:translateY(-2px);box-shadow:var(--shadow-brand-hover)}
.btn-aqua:active{background:var(--brand-active);transform:scale(.97);transition-duration:.12s}

/* Tarjeta «Estudios en el consultorio» */
.pain__card{
  position:absolute;right:clamp(-30px,1vw,26px);top:clamp(170px,24vw,244px);
  width:clamp(186px,19.5vw,250px);transform:rotate(-4deg);
  background:var(--surface-deep);border-radius:22px;padding:10px 10px 22px;
  box-shadow:var(--shadow-xl);
}
.pain__card-media{height:clamp(126px,13vw,172px);border-radius:14px}
.pain__card-body{padding:16px 8px 0;color:var(--text-on-deep)}
.pain__card-big{margin:0;font-size:clamp(24px,2.7vw,33px);line-height:1.04;font-weight:700;letter-spacing:-.01em}
.pain__card-sub{margin:clamp(16px,2vw,24px) 0 0;font-size:clamp(18px,2vw,24px);line-height:1.05;font-weight:700}
.pain__card-foot{margin:10px 0 0;font-size:13px;font-weight:500;color:var(--link-on-deep)}

/* Posición espejada: mismo tamaño/forma que .pain__card, del otro lado.
   Solo cambia dónde va la tarjeta, no cuál tarjeta lleva esta clase —
   así cualquiera de las dos puede ir a la izquierda sin heredar el
   aspecto de la otra. */
.pain__card--left{
  left:clamp(-30px,1vw,26px);right:auto;
  top:clamp(140px,19vw,208px);
  transform:rotate(4deg);
}

/* Tarjeta de solo foto, sin cuerpo de texto: azul en vez del fondo oscuro */
.pain__card--photo{
  background:var(--brand);padding:10px;
  box-shadow:var(--shadow-brand-hover);
}
.pain__card--photo .pain__card-media{height:clamp(220px,22vw,300px)}

/* ═══════════ 04 PADECIMIENTOS Y PROCEDIMIENTOS ═══════════
   El fondo de la sección cambia con la pestaña activa. Antes
   lo pintaba app.js con hexadecimales; ahora app.js solo pone
   data-tema y el color vive aquí.
     0 · oído = --surface-brand
     1 · nariz = --surface-accent
     2 · garganta = --surface-alt                            */
.areas{
  background:var(--area-bg,var(--surface-brand));
  transition:background-color .5s cubic-bezier(.4,0,.2,1);
  font-family:var(--outfit);overflow:hidden;
}
.areas[data-tema="0"]{--area-bg:var(--surface-brand)}
.areas[data-tema="1"]{--area-bg:var(--surface-accent)}
.areas[data-tema="2"]{--area-bg:var(--surface-alt)}
.areas__in{max-width:var(--ancho);margin:0 auto;padding:clamp(64px,7vw,92px) var(--pad) clamp(78px,8vw,110px)}
.areas__h2{
  margin:0;text-align:center;font-size:clamp(34px,5.2vw,58px);line-height:1.1;
  font-weight:700;letter-spacing:-.02em;color:var(--brand);
}
.areas__grid{display:flex;flex-wrap:wrap;gap:clamp(28px,4vw,52px);margin-top:clamp(44px,5vw,72px)}
.tabs{flex:1 1 240px;min-width:min(100%,220px);display:flex;flex-direction:column;padding-top:6px}
.tab{
  appearance:none;border:0;background:none;text-align:left;padding:14px 0 13px;cursor:pointer;
  font-size:15px;font-weight:600;color:var(--text-secondary);
  transition:color .5s;
}
.tab:first-child{padding-top:0}
.tab[aria-selected="true"]{color:var(--brand)}
.tab__rail{display:block;position:relative;margin-top:13px;height:1.5px;background:var(--border-strong)}
.tab__bar{position:absolute;left:0;top:0;bottom:0;width:0;background:currentColor}

.panels{flex:2 1 600px;min-width:min(100%,300px);position:relative;min-height:clamp(380px,38vw,432px)}
.panel{
  position:absolute;inset:0;display:flex;flex-wrap:wrap;gap:clamp(24px,3vw,40px);
  opacity:0;pointer-events:none;transition:opacity .55s cubic-bezier(.4,0,.2,1);
}
.panel.is-on{opacity:1;pointer-events:auto}
.panel__media{flex:0 1 348px;min-width:min(100%,240px);aspect-ratio:.82;border-radius:16px}
.panel__text{flex:1 1 280px;min-width:min(100%,240px)}
.panel__eyebrow{margin:0;font-size:13px;font-weight:600;color:var(--brand)}
.panel__h3{margin:14px 0 0;font-size:clamp(22px,2.5vw,29px);line-height:1.18;font-weight:700;letter-spacing:-.01em;color:var(--text-primary)}
.panel__p{margin:18px 0 0;font-size:clamp(15px,1.35vw,16px);line-height:1.5;font-weight:500;color:var(--text-secondary)}
.panel__list{margin:20px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px}
.panel__list li{position:relative;padding-left:20px;font-size:15px;font-weight:600;color:var(--text-primary)}
.panel__list li::before{content:'';position:absolute;left:0;top:.5em;width:8px;height:8px;border-radius:50%;background:var(--accent)}

/* Marcadores de foto de cada panel: un par de tonos por área.
   0 · oído = azul   1 · nariz = aqua   2 · garganta = neutro */
.panel__media--0{--slot-a:var(--blue-200);--slot-b:var(--blue-50);--slot-rgb:var(--rgb-deep);--slot-ink:var(--blue-700)}
.panel__media--1{--slot-a:var(--aqua-200);--slot-b:var(--aqua-50);--slot-rgb:var(--rgb-accent);--slot-ink:var(--aqua-700)}
.panel__media--2{--slot-a:var(--neutral-200);--slot-b:var(--neutral-50);--slot-rgb:var(--rgb-ink);--slot-ink:var(--text-secondary)}
.panel__media--0,.panel__media--1,.panel__media--2{
  background-image:repeating-linear-gradient(135deg,rgba(var(--slot-rgb),.12) 0 6px,rgba(var(--slot-rgb),0) 6px 14px),linear-gradient(150deg,var(--slot-a),var(--slot-b));
}
.panel__media--0::before,.panel__media--1::before,.panel__media--2::before{background:none}
.panel__media--0::after,.panel__media--1::after,.panel__media--2::after{font-size:10px;left:14px;bottom:12px;transform:none}

/* ── Cirugías que realiza ──────────────────────────────────
   Vive dentro de .areas, cuyo fondo cambia de color con la
   pestaña activa. Los tres fondos son claros, así que el
   texto usa los tokens de siempre.                          */
.cirus{margin-top:clamp(52px,6vw,84px);padding-top:clamp(40px,5vw,56px);border-top:1px solid var(--border-brand)}
.cirus__h3{margin:0;font-size:clamp(19px,2.1vw,24px);line-height:1.2;font-weight:700;letter-spacing:-.01em;color:var(--text-primary)}
.cirus__grid{display:flex;flex-wrap:wrap;gap:clamp(24px,3vw,44px);margin-top:clamp(22px,2.6vw,32px)}
.cirus__col{flex:1 1 260px;min-width:min(100%,240px)}
.cirus__col h4{margin:0 0 14px;font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--brand)}
.cirus__list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px}
.cirus__list li{position:relative;padding-left:20px;font-size:15px;line-height:1.45;font-weight:500;color:var(--text-primary)}
.cirus__list li::before{content:'';position:absolute;left:0;top:.55em;width:7px;height:7px;border-radius:50%;background:var(--accent)}
.cirus__foot{margin:clamp(26px,3vw,38px) 0 0;font-size:14px;line-height:1.55;font-weight:500;color:var(--text-secondary)}

/* ═══════════ 05a ENTRADA A LOS ESTUDIOS ═══════════ */
.sintro{background:var(--surface);font-family:var(--outfit)}
.sintro__in{max-width:var(--ancho);margin:0 auto;padding:clamp(60px,7vw,96px) var(--pad) clamp(44px,5vw,68px);text-align:center}
.sintro__h2{margin:0 auto;max-width:900px;font-size:clamp(31px,4.6vw,54px);line-height:1.1;font-weight:700;letter-spacing:-.02em;color:var(--brand)}
.sintro__p{margin:clamp(22px,2.6vw,30px) auto 0;max-width:680px;font-size:clamp(16px,1.5vw,19px);line-height:1.6;font-weight:500;color:var(--text-secondary)}
.sintro__p--strong{font-weight:700;color:var(--brand)}

/* ═══════════ 05 ESTUDIOS EN CONSULTORIO ═══════════ */
.studies{position:relative;height:340vh;background:var(--surface-deep);font-family:var(--outfit)}
.studies__stage{position:sticky;top:0;height:100vh;overflow:hidden}
.studies__bg{position:absolute;inset:0}
.photo-slot--bleed{
  --slot-a:var(--blue-900);
  --slot-mid:var(--blue-600);
  --slot-b:var(--blue-300);
  --slot-ink:var(--text-on-deep);
  background-image:repeating-linear-gradient(135deg,rgba(var(--rgb-white),.06) 0 8px,rgba(var(--rgb-white),0) 8px 18px),linear-gradient(150deg,var(--slot-a),var(--slot-mid) 55%,var(--slot-b));
}
.photo-slot--bleed::before{background:none}
.photo-slot--bleed::after{bottom:26px}

/* Carrusel de estudios: cada tarjeta declara su terna de
   tonos y las reglas genéricas las leen.                 */
.scard{
  position:absolute;left:4%;right:4%;top:calc(var(--hdr) + 16px);height:calc(100% - var(--hdr) - 48px);border-radius:24px;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:clamp(28px,5vw,64px);text-align:center;will-change:transform;
  background:var(--card-bg);color:var(--card-ink);
}
.scard--1{z-index:1;--card-bg:var(--blue-50);--card-ink:var(--blue-900);--card-num:var(--blue-200)}       /* 01 Endoscopia nasal */
.scard--2{z-index:2;--card-bg:var(--aqua-50);--card-ink:var(--aqua-900);--card-num:var(--aqua-200)}       /* 02 Nasofaringolaringoscopia */
.scard--3{z-index:3;--card-bg:var(--blue-100);--card-ink:var(--blue-900);--card-num:var(--blue-300)}      /* 03 Microscopía de oído */
.scard--4{z-index:4;--card-bg:var(--aqua-100);--card-ink:var(--aqua-900);--card-num:var(--aqua-300)}      /* 04 Timpanometría */
.scard--5{z-index:5;--card-bg:var(--neutral-100);--card-ink:var(--neutral-900);--card-num:var(--neutral-300)} /* 05 Polisomnografía */
.scard__num{
  position:absolute;right:15%;top:-6%;font-size:min(62vh,520px);font-weight:700;line-height:1;
  color:var(--card-num);pointer-events:none;
}
.scard__body{position:relative;max-width:760px}
.scard h3{margin:0;font-size:clamp(32px,5.2vw,62px);line-height:1.04;font-weight:700;letter-spacing:-.02em}
.scard__row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:clamp(14px,2vw,26px);margin-top:clamp(18px,2.4vw,30px)}
.scard__stat{font-size:clamp(34px,4.6vw,54px);font-weight:700;line-height:1}
.scard__row p{margin:0;flex:0 1 420px;text-align:left;font-size:clamp(17px,2vw,25px);line-height:1.28;font-weight:600}
.scard__lead{margin:clamp(16px,2vw,26px) auto 0;max-width:620px;font-size:clamp(18px,2.2vw,29px);line-height:1.2;font-weight:700}
.scard__sub{margin:clamp(14px,1.8vw,22px) auto 0;max-width:520px;font-size:clamp(16px,1.7vw,20px);line-height:1.35;font-weight:600}

/* ═══════════ 06 EL DOCTOR ═══════════ */
.doc{background:var(--surface-brand);font-family:var(--outfit)}
.doc__in{max-width:var(--ancho);margin:0 auto;padding:clamp(62px,7vw,96px) var(--pad) clamp(70px,7vw,100px)}
.doc__head{max-width:780px}
.doc__h2{margin:0;font-size:clamp(30px,4.2vw,50px);line-height:1.08;font-weight:700;letter-spacing:-.02em;color:var(--brand)}
.doc__sub{margin:14px 0 0;font-size:clamp(15px,1.5vw,18px);line-height:1.45;font-weight:600;color:var(--text-secondary)}
.doc__grid{display:flex;flex-wrap:wrap;gap:clamp(28px,4vw,56px);margin-top:clamp(32px,4vw,50px)}
.doc__bio{flex:1 1 380px;min-width:min(100%,300px)}
.doc__portrait{position:relative;max-width:360px;margin:0 0 clamp(26px,3vw,34px)}
.doc__portrait-hatch{
  position:absolute;left:-26px;bottom:-26px;width:132px;height:132px;border-radius:16px;
  background:repeating-linear-gradient(48deg,var(--accent) 0 2px,rgba(var(--rgb-accent),0) 2px 9px);
  pointer-events:none;
}
.doc__photo{
  position:relative;aspect-ratio:4/5;border-radius:18px;
  box-shadow:var(--shadow-md);
}
.doc__photo img{object-position:56% 16%}
.doc__bio p{margin:0 0 18px;font-size:clamp(16px,1.5vw,18px);line-height:1.62;font-weight:500;color:var(--text-primary)}
.doc__bio p:last-child{margin-bottom:0}
.doc__cols{flex:1 1 420px;min-width:min(100%,300px);display:flex;flex-direction:column;gap:clamp(26px,3vw,36px)}
.doc__block h3{margin:0 0 15px;font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--brand)}
.doc__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.doc__list li{display:flex;flex-wrap:wrap;gap:2px 16px;padding-left:16px;border-left:2px solid var(--border-brand)}
.doc__list b{flex:0 0 92px;font-size:14px;font-weight:700;line-height:1.5;color:var(--brand)}
.doc__list span{flex:1 1 220px;font-size:15px;line-height:1.5;font-weight:500;color:var(--text-primary)}
.doc__foot{
  margin:clamp(34px,4vw,48px) 0 0;padding-top:22px;
  border-top:1px solid var(--border-brand);
  font-size:14px;line-height:1.6;color:var(--text-secondary);
}

/* ═══════════ 06b OPINIONES DE PACIENTES ═══════════
   Marcado estático en index.html. Fondo --surface-alt para que
   no se funda ni con el --surface-brand de «El doctor» (arriba)
   ni con el blanco de las preguntas frecuentes (abajo). */
.ops{background:var(--surface-alt);font-family:var(--outfit);border-top:1px solid var(--border)}
.ops__in{max-width:var(--ancho);margin:0 auto;padding:clamp(62px,7vw,96px) var(--pad) clamp(70px,7vw,100px)}
.ops__h2{margin:0;max-width:760px;font-size:clamp(30px,4.2vw,50px);line-height:1.08;font-weight:700;letter-spacing:-.02em;color:var(--brand)}
.ops__contexto{
  margin:18px 0 0;max-width:640px;
  font-size:16px;line-height:1.6;font-weight:500;color:var(--text-secondary);
}
.ops__grid{
  margin-top:clamp(28px,3.4vw,42px);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));
  gap:clamp(16px,2vw,24px);
}
.ops__card{
  display:flex;flex-direction:column;gap:18px;
  background:var(--surface);border:1px solid var(--border);border-radius:20px;
  padding:clamp(22px,2.6vw,30px);box-shadow:var(--shadow-sm);
}
/* Insignia de Doctoralia. Es la señal de confianza más fuerte del
   bloque: la plataforma confirmó que hubo consulta. Discreta a
   propósito — informa, no grita. */
.ops__verif{
  display:inline-flex;align-items:center;gap:6px;align-self:flex-start;margin:0;
  padding:5px 10px;border-radius:999px;
  background:var(--surface-accent);color:var(--text-on-accent);
  font-size:12px;font-weight:700;letter-spacing:.01em;
}
.ops__verif svg{flex:none}
.ops__texto{margin:0;font-size:15px;line-height:1.65;font-weight:500;color:var(--text-secondary);overflow-wrap:anywhere}
.ops__pie{margin-top:auto;padding-top:16px;border-top:1px solid var(--border)}
.ops__nombre{margin:0;font-size:15px;font-weight:700;color:var(--text-primary)}
.ops__meta{margin:4px 0 0;font-size:13px;line-height:1.5;color:var(--text-muted)}
.ops__todas{margin:clamp(28px,3.2vw,40px) 0 0;font-size:15px;font-weight:600}

/* ═══════════ 06c PREGUNTAS FRECUENTES ═══════════ */
.faq{background:var(--surface);font-family:var(--outfit)}
.faq__in{max-width:var(--ancho);margin:0 auto;padding:clamp(62px,7vw,96px) var(--pad) clamp(70px,7vw,100px)}
.faq__h2{margin:0;max-width:760px;font-size:clamp(30px,4.2vw,50px);line-height:1.08;font-weight:700;letter-spacing:-.02em;color:var(--brand)}
.faq__list{margin-top:clamp(32px,4vw,48px);border-top:1px solid var(--border-brand)}
.faq__item{border-bottom:1px solid var(--border-brand)}
.faq__q{margin:0}
.faq__btn{
  display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%;
  padding:clamp(20px,2.4vw,26px) 2px;border:0;background:none;cursor:pointer;text-align:left;
  font-family:inherit;font-size:clamp(16px,1.7vw,19px);font-weight:700;color:var(--text-primary);
  -webkit-tap-highlight-color:transparent;
}
.faq__btn:hover{color:var(--brand)}
/* Ícono +/− hecho de dos barras en CSS: nada de SVG nuevo para un gesto tan simple */
.faq__ico{position:relative;flex:none;width:22px;height:22px}
.faq__ico::before,.faq__ico::after{
  content:'';position:absolute;left:50%;top:50%;background:var(--brand);
  transform:translate(-50%,-50%);transition:transform .3s var(--ease),opacity .2s;
}
.faq__ico::before{width:14px;height:2px;border-radius:1px}
.faq__ico::after{width:2px;height:14px;border-radius:1px}
.faq__btn[aria-expanded="true"] .faq__ico::after{opacity:0;transform:translate(-50%,-50%) rotate(90deg)}
.faq__a{max-width:760px;padding:0 2px clamp(20px,2.4vw,26px)}
.faq__a p{margin:0;font-size:15px;line-height:1.6;font-weight:500;color:var(--text-secondary)}
.faq__a a{font-weight:600}
/* Lista de precios dentro de una respuesta del FAQ */
.faq__a p.faq__precios-t{margin:0 0 12px;font-weight:700;color:var(--text-primary)}
.faq__precios{list-style:none;margin:0 0 16px;padding:0;max-width:460px;border-top:1px solid var(--border)}
.faq__precios li{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:11px 0;border-bottom:1px solid var(--border);
  font-size:15px;line-height:1.5;font-weight:500;color:var(--text-secondary);
}
.faq__precio{flex:none;font-weight:700;color:var(--brand)}

/* ═══════════ 07 AGENDAR CITA ═══════════ */
.cita{background:var(--surface-alt);border-top:1px solid var(--border)}
.cita__in{
  max-width:var(--ancho);margin:0 auto;padding:clamp(64px,7vw,104px) var(--pad);
  display:flex;flex-wrap:wrap;gap:clamp(36px,5vw,72px);align-items:flex-start;
}
.cita__copy{flex:1 1 380px;min-width:min(100%,320px)}
.cita__eyebrow{margin:0;font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--brand)}
.cita__h2{margin:16px 0 0;font-size:clamp(30px,3.8vw,46px);line-height:1.12;font-weight:800;letter-spacing:-.02em;color:var(--text-primary)}
.cita__p{margin:20px 0 0;font-size:17px;line-height:1.6;color:var(--text-secondary)}
.cita__facts{list-style:none;margin:32px 0 0;padding:0;display:flex;flex-direction:column;gap:18px}
.cita__facts li{display:flex;flex-direction:column;gap:4px;padding-left:16px;border-left:2px solid var(--border-brand)}
.cita__facts span{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-secondary)}
.cita__facts b{font-size:16px;font-weight:600;color:var(--text-primary)}

.cita__facts p{margin:2px 0 0;font-size:15px;line-height:1.55;color:var(--text-secondary)}

.cita__vias{flex:1 1 400px;min-width:min(100%,300px);display:flex;flex-direction:column;gap:20px}
.via{background:var(--surface);border-radius:20px;padding:clamp(24px,2.8vw,32px);box-shadow:var(--shadow-lg)}
.via__label{margin:0;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-secondary)}
.via__big{display:inline-block;margin-top:8px;font-size:clamp(26px,3.2vw,36px);line-height:1.1;font-weight:800;letter-spacing:-.02em;color:var(--brand)}
.via__big:hover{color:var(--brand-hover)}
.via__note{margin:12px 0 0;font-size:15px;line-height:1.55;color:var(--text-secondary)}

/* Verde de WhatsApp: marca de un tercero, fuera de las escalas. */
.btn-wa{
  display:flex;align-items:center;justify-content:center;gap:12px;margin-top:20px;
  height:58px;border:0;border-radius:999px;cursor:pointer;
  background:var(--wa);color:var(--wa-ink);font-size:17px;font-weight:800;
  box-shadow:0 12px 30px rgba(var(--rgb-wa),.3);
  transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s;
}
.btn-wa:hover{color:var(--wa-ink);transform:translateY(-2px);box-shadow:0 18px 38px rgba(var(--rgb-wa),.36)}
.btn-wa:active{transform:scale(.97);transition-duration:.12s}

/* ═══════════ FOOTER ═══════════ */
.ftr{background:var(--surface-deep);color:var(--text-on-deep)}
.ftr__in{
  max-width:var(--ancho);margin:0 auto;padding:clamp(52px,6vw,80px) var(--pad) clamp(32px,4vw,48px);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:clamp(28px,4vw,48px);
}
.brand--ftr{align-items:flex-start;color:var(--text-on-deep)}
.brand--ftr .brand__name{color:var(--text-on-brand);white-space:normal}/* el nombre completo no cabe en una línea */
.brand--ftr .brand__name small{color:var(--link-on-deep)}
.brand--ftr:hover{color:var(--text-on-brand)}
.ftr__ced{margin:14px 0 0;font-size:13px;line-height:1.6;color:var(--link-on-deep)}
.ftr__ced b{color:var(--text-on-deep);font-weight:600}
.ftr__col h4{margin:0 0 14px;font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--text-on-brand)}
.ftr__col p{margin:0 0 10px;font-size:15px;line-height:1.55}
.ftr__col a{color:var(--link-on-deep)}
.ftr__col a:hover{color:var(--text-on-brand)}
.ftr__legal{
  max-width:var(--ancho);margin:0 auto;padding:24px var(--pad) 40px;
  border-top:1px solid var(--overlay-line-deep);
  display:flex;flex-wrap:wrap;gap:12px 32px;justify-content:space-between;
  font-size:13px;line-height:1.6;color:var(--link-on-deep);
}
.ftr__legal p{margin:0;max-width:640px}
.ftr__legal a{color:var(--link-on-deep)}
.ftr__legal a:hover{color:var(--text-on-brand)}
.ftr__legal-r{text-align:right}

/* ═══════════ CRÉDITO ═══════════
   Cierra el pie en un azul aún más oscuro que --surface-deep, y usa
   el aqua de acento — la misma familia que resalta el menú activo y
   las palomitas — para que «Blixtor» destaque sin salirse de la
   paleta del sitio. */
.credit{background:var(--blue-900);padding:28px var(--pad) 32px;text-align:center}
.credit__text{
  margin:0;font-family:var(--outfit);font-size:13px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--text-on-deep-muted);
}
.credit__link{
  display:inline-flex;align-items:center;gap:6px;margin-left:2px;
  font-weight:700;color:var(--aqua-300);padding-bottom:3px;
  border-bottom:1px solid rgba(var(--rgb-accent),.45);
  transition:color .25s,border-color .25s;
}
.credit__link:hover{color:var(--aqua-200);border-color:rgba(var(--rgb-accent),.7)}
.credit__ico{flex:none}

/* ═══════════ BOTÓN FLOTANTE WHATSAPP ═══════════ */
.wa-float{
  position:fixed;right:20px;bottom:20px;z-index:80;
  display:grid;place-items:center;width:56px;height:56px;border-radius:50%;
  background:var(--wa);color:var(--text-on-brand);box-shadow:0 12px 30px rgba(var(--rgb-wa),.4);
  transition:transform .25s cubic-bezier(.2,.8,.2,1);
}
.wa-float:hover{color:var(--text-on-brand);transform:scale(1.07)}
.wa-float:active{transform:scale(.95);transition-duration:.12s}

/* ═══════════ RESPONSIVE ═══════════ */
@media (max-width:1040px){
  .nav{gap:20px}
  .btn-ghost{height:50px;padding:0 6px 0 20px;font-size:15px;gap:12px}
}
@media (max-width:900px){
  :root{--hdr:70px}
  .hdr__in{min-height:70px;flex-wrap:wrap;padding-top:8px;padding-bottom:8px}
  .hdr__burger{display:block}
  .nav{
    order:3;flex-basis:100%;margin:0;flex-direction:column;align-items:stretch;gap:0;
    max-height:0;overflow:hidden;transition:max-height .35s var(--ease);
  }
  .nav.is-open{max-height:340px}
  .nav a{padding:14px 0;border-top:1px solid var(--border);font-size:16px}
  .hdr .btn-ghost{order:4;flex-basis:100%;margin:12px 0 10px;justify-content:space-between;display:none}
  .nav.is-open ~ .btn-ghost{display:flex}

  .hero__card{position:static;width:100%;max-width:444px;margin:20px auto 0}
  .hero__photo{margin-inline:auto;border-radius:999px 999px 0 0}

  .pain__card,.pain__card--left{position:static;width:min(280px,86%);margin:44px auto 0;transform:rotate(-3deg)}
  .pain{min-height:0;padding-bottom:64px}

  /* Padecimientos: en escritorio los paneles se superponen con opacity
     para el cruce animado entre pestañas. En móvil eso desborda —imagen
     y texto apilados miden más que el min-height fijo— y el sobrante se
     pinta encima de «Cirugía de oído, nariz y garganta». Aquí cada panel
     vuelve al flujo normal y se muestra/oculta con display, no opacity. */
  .panels{min-height:0}
  .panel{position:static;opacity:1;pointer-events:auto;display:none}
  .panel.is-on{display:flex}

  .studies{height:300vh}
  .doc__list b{flex:0 0 100%}
  /* el retrato ya casi toca el borde: la trama se encoge para no cortarse */
  .doc__portrait-hatch{left:-12px;bottom:-12px;width:100px;height:100px}
}
@media (max-width:640px){
  html{scroll-padding-top:78px}
  /* el nombre completo no cabe en una línea en pantallas chicas */
  .hdr .brand__name{font-size:15px;white-space:normal;max-width:210px}
  .stats__in{grid-template-columns:1fr}
  .scard{left:3%;right:3%;border-radius:18px}
  .scard__row p{text-align:center;flex:1 1 100%}
  .doc__portrait{margin-inline:auto}
  .ftr__legal{flex-direction:column}
  .ftr__legal-r{text-align:left}
  .wa-float{width:52px;height:52px;right:14px;bottom:14px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-delay:0ms!important;transition-duration:.001ms!important}
  .studies{height:auto}
  .studies__stage{position:static;height:auto;display:block;padding:48px 0}
  .scard{position:static;height:auto;transform:none!important;opacity:1!important;margin:0 auto 20px;max-width:900px}
}

/* ═══════════ PÁGINAS LEGALES (aviso de privacidad · términos) ═══════════ */
.legal-hero{background:var(--surface-brand);font-family:var(--outfit)}
.legal-hero__in{max-width:var(--ancho);margin:0 auto;padding:clamp(48px,6vw,76px) var(--pad) clamp(36px,4vw,52px)}
.legal-hero__eyebrow{margin:0;font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--brand)}
.legal-hero__h1{margin:12px 0 0;font-size:clamp(30px,4.2vw,48px);line-height:1.1;font-weight:700;letter-spacing:-.02em;color:var(--text-primary);max-width:760px}
.legal-hero__meta{margin:16px 0 0;font-size:14px;color:var(--text-secondary)}

.legal{background:var(--surface)}
.legal__wrap{
  max-width:var(--ancho);margin:0 auto;padding:clamp(48px,6vw,76px) var(--pad) clamp(64px,7vw,100px);
  display:grid;grid-template-columns:240px 1fr;gap:clamp(32px,4vw,56px);align-items:start;
}
.legal__toc{position:sticky;top:calc(var(--hdr) + 24px)}
.legal__toc p{margin:0 0 12px;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted)}
.legal__toc ol{list-style:none;margin:0;padding:0;counter-reset:legaltoc}
.legal__toc li{counter-increment:legaltoc}
.legal__toc a{
  display:block;padding:7px 0 7px 14px;border-left:2px solid var(--border);
  font-size:14px;line-height:1.4;color:var(--text-secondary);
}
.legal__toc a::before{content:counter(legaltoc)'. '}
.legal__toc a:hover{color:var(--brand);border-left-color:var(--brand-light)}

.legal__content h2{
  margin:52px 0 16px;font-family:var(--outfit);font-size:clamp(20px,2.2vw,26px);line-height:1.25;
  font-weight:700;letter-spacing:-.01em;color:var(--brand);scroll-margin-top:calc(var(--hdr) + 20px);
}
.legal__content > h2:first-child{margin-top:0}
.legal__content h3{margin:26px 0 10px;font-family:var(--outfit);font-size:17px;font-weight:700;color:var(--text-primary)}
.legal__content p{margin:0 0 14px;font-size:16px;line-height:1.7;color:var(--text-secondary)}
.legal__content ul,.legal__content ol{margin:0 0 14px;padding-left:22px}
.legal__content li{margin:0 0 8px;font-size:16px;line-height:1.65;color:var(--text-secondary)}
.legal__content strong{color:var(--text-primary);font-weight:700}
.legal__content a{text-decoration:underline;text-underline-offset:2px}

.legal__note{
  margin:0 0 16px;padding:14px 18px;border-radius:12px;
  background:var(--surface-alt);border:1px solid var(--border);
  font-size:14px;line-height:1.6;color:var(--text-secondary);
}
.legal__pending{
  margin:0 0 16px;padding:12px 18px;border-radius:10px;border-left:4px solid var(--brand);
  background:var(--surface-brand-soft);font-size:14px;line-height:1.6;font-weight:700;color:var(--brand-hover);
}
.legal__table{width:100%;border-collapse:collapse;margin:0 0 20px;font-size:15px}
.legal__table th,.legal__table td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--border);color:var(--text-secondary)}
.legal__table th{color:var(--text-primary);font-weight:700}

.legal__insurers{
  margin:0 0 16px;padding:18px 22px;border-radius:12px;
  background:var(--surface-alt);border:1px solid var(--border);
}
.legal__insurers ul{columns:3 180px;column-gap:24px;margin:0;padding:0;list-style:none}
.legal__insurers li{margin:0 0 6px;font-size:13.5px;line-height:1.5;color:var(--text-secondary);break-inside:avoid}

@media (max-width:900px){
  .legal__wrap{grid-template-columns:1fr}
  .legal__toc{position:static;order:-1;padding-bottom:28px;margin-bottom:28px;border-bottom:1px solid var(--border)}
  .legal__toc ol{display:flex;flex-wrap:wrap;gap:4px 18px}
  .legal__toc li{flex:0 0 auto}
  .legal__toc a{border-left:0;padding:4px 0}
}