/* ============================================================
   iQ EQUILIBRIO PATRIMONIAL · Diagnóstico de Exposición Inmobiliaria
   Hoja única. Orden: tokens → base → primitivas → fondo → revelados
   → cabecera → secciones 1–13 → pie → responsive → movimiento → impresión.
   NOTA DE MANTENIMIENTO: en esta hoja el ORDEN manda. Una regla genérica
   escrita más abajo gana a una específica escrita más arriba con la misma
   especificidad. Si algo "no aplica", revisa la posición antes que el valor.
   ============================================================ */

/* ---------- 1 · TOKENS ---------- */
:root{
  /* División Familiar (Holística) — verde salvia, tonos arena, blanco hueso.
     Es la paleta que el dossier asigna al pilar «Entorno» (casa habitación).
     Contraste medido sobre el fondo: titulares 12.83:1 · texto 8.51:1 ·
     apagado 6.84:1 · letra fina 5.96:1 · salvia 5.40:1 · hueso sobre salvia 5.40:1.
     Si tocas un color, vuelve a medirlo — el mínimo es 4.5:1. */
  --ink:#F7F4ED;        /* fondo — blanco hueso */
  --navy:#EFE8DA;       /* arena clara — superficie de imagen */
  --navy-2:#E0D6C4;     /* arena media */
  --bone:#232E26;       /* titulares — verde pizarra */
  --text:#3D4A3E;
  --muted:#4B584A;
  --gold:#4F6B4C;       /* acento — verde salvia */
  --gold-lt:#3C5439;    /* salvia profunda — énfasis y foco */
  --alert:#8C4A32;      /* arcilla — sólo para avisos de campo */
  --fine:#55614F;       /* letra fina de fuentes y legales */
  --on-photo:#F7F4ED;   /* texto que va encima de una fotografía */
  --line:rgba(79,107,76,.30);
  --hair:rgba(35,46,38,.13);
  --surface:rgba(255,255,255,.55);
  --display:'Jost',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --shell:1180px;
  --pad:clamp(20px,5vw,56px);
  --sec:clamp(76px,12vh,158px);
  --ease:cubic-bezier(.16,.8,.3,1);
  --hdr:74px;
}

/* ---------- 2 · BASE ---------- */
*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:auto;              /* scroll nativo: sin librerías */
}
/* Suavizado nativo del navegador — no hay librería de scroll detrás. */
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
}
/* Ninguna ancla debe quedar debajo de la cabecera fija. */
main[id],
section[id]{scroll-margin-top:calc(var(--hdr) + 26px)}
body{
  margin:0;
  background:var(--ink);
  color:var(--text);
  font-family:var(--body);
  font-weight:400;          /* 300 es peso de titular; para leer hace falta 400 */
  font-size:17px;
  line-height:1.72;
  overflow-x:hidden;                 /* red de seguridad, no sustituto del diseño */
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
button,input{font:inherit;color:inherit}
::selection{background:rgba(79,107,76,.22);color:var(--bone)}

h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:400;
  letter-spacing:-.02em;
  color:var(--bone);
  margin:0;
  text-wrap:balance;
}
h1{font-size:clamp(2.4rem,6.4vw,4.9rem);line-height:1.05}
h2{font-size:clamp(1.95rem,4.4vw,3.3rem);line-height:1.1}
h3{font-size:clamp(1.22rem,2.1vw,1.5rem);line-height:1.28;letter-spacing:-.01em;font-weight:500}
p{margin:0}

.skip{
  position:absolute;left:-9999px;top:0;z-index:999;
  background:var(--gold);color:var(--ink);padding:12px 20px;border-radius:2px;
}
.skip:focus{left:16px;top:16px}

:where(a,button,input,summary):focus-visible{
  outline:2px solid var(--gold-lt);
  outline-offset:3px;
}

/* ---------- 3 · PRIMITIVAS DE COMPOSICIÓN ---------- */
.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--pad)}
.sec{padding-block:var(--sec);position:relative}
.sec--tight{padding-block:calc(var(--sec) * .68)}
.sec + .sec{border-top:1px solid var(--hair)}

.eyebrow{
  font-family:var(--display);
  font-weight:500;
  font-size:.8rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--gold);
  margin:0 0 clamp(18px,2.4vw,28px);
  line-height:1.5;
}
.lead{
  max-width:64ch;
  font-size:clamp(1.14rem,1.5vw,1.3rem);
  line-height:1.72;
  color:var(--text);
}
.p{max-width:66ch;color:var(--text);margin-top:1.15em}
.p--wide{max-width:74ch}
b,strong,.strong{color:var(--bone);font-weight:600}
.lead b,.p b,.wear__close b{color:var(--bone);font-weight:600}
.gold{color:var(--gold)}
.head-gap{margin-top:clamp(24px,3.4vw,40px)}
.hr{height:1px;background:var(--hair);border:0;margin:clamp(40px,6vw,72px) 0}
.note{
  font-size:.96rem;line-height:1.7;color:var(--muted);max-width:72ch;
}
.src{
  font-size:.85rem;line-height:1.7;color:var(--fine);max-width:82ch;
  margin-top:clamp(30px,4vw,48px);letter-spacing:.005em;
}

/* Marco base de tarjeta: bordes de 1px, radios de 2px. Nada redondeado. */
.card{
  --cp:clamp(22px,2.6vw,32px);
  background:var(--surface);
  border:1px solid var(--hair);
  border-radius:2px;
  padding:var(--cp);
}
.card--gold{border-color:var(--line)}

/* Banda ancha de imagen. La proporción va en un separador, no en la caja,
   igual que en la galería: así la foto nunca empuja el texto de al lado. */
.band{margin:clamp(40px,5vw,60px) 0 0}
.band__frame{
  position:relative;overflow:hidden;
  border:1px solid var(--hair);border-radius:2px;background:var(--navy);
}
.band__frame::before{content:"";display:block;padding-top:42.857%}
.band__frame img{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;display:block;
}
.band__cap{
  margin-top:14px;max-width:66ch;
  font-size:.93rem;line-height:1.65;color:var(--muted);
}
.edge{border-left:1px solid var(--gold);padding-left:clamp(18px,2.2vw,26px)}

/* ---------- 4 · FONDO Y PARALLAX ---------- */
.bg{
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:var(--ink);overflow:hidden;
}
.bg__wash{
  position:absolute;inset:-30% -10%;
  background:
    radial-gradient(52% 40% at 18% 8%, rgba(216,205,182,.62), transparent 62%),
    radial-gradient(46% 38% at 88% 26%, rgba(196,210,192,.50), transparent 66%),
    radial-gradient(64% 46% at 52% 104%, rgba(222,211,188,.58), transparent 64%);
  will-change:transform;
}
.bg__rings{
  position:absolute;inset:-40% -20%;
  /* Radar sísmico: anillos concéntricos + radios, como una traza de
     estación. Los radios son lo que lo vuelve reconocible; sin ellos
     eran sólo círculos. */
  background:
    repeating-conic-gradient(from 0deg at 50% 38%,
      rgba(79,107,76,.11) 0deg 0.18deg, transparent 0.18deg 15deg),
    repeating-radial-gradient(circle at 50% 38%,
      rgba(79,107,76,0) 0 54px,
      rgba(79,107,76,.17) 54px 55px);
  -webkit-mask-image:radial-gradient(circle at 50% 38%, #000 5%, rgba(0,0,0,.62) 36%, transparent 68%);
  mask-image:radial-gradient(circle at 50% 38%, #000 5%, rgba(0,0,0,.62) 36%, transparent 68%);
  will-change:transform;
}
.bg__grain{
  position:absolute;inset:0;
  background-image:radial-gradient(rgba(35,46,38,.038) 1px, transparent 1px);
  background-size:3px 3px;
}

/* ---------- 5 · REVELADOS ---------- */
/* Sin JS no existe .js en <html>: todo nace visible. */
.js .reveal{
  opacity:0;
  transform:translateY(20px);
  transition:opacity .85s var(--ease), transform .85s var(--ease);
}
.js .reveal.is-in{opacity:1;transform:none}
/* Si actúa la red de seguridad, los retardos escalonados dejan de
   tener sentido: sólo retrasarían que el contenido esté visible. */
html.reveal-now .reveal{transition-delay:0s !important}
.js .d1{transition-delay:.10s}
.js .d2{transition-delay:.20s}
.js .d3{transition-delay:.30s}
.js .d4{transition-delay:.40s}
.js .d5{transition-delay:.50s}

/* ---------- 6 · CABECERA ---------- */
.hdr{
  position:fixed;top:0;left:0;right:0;z-index:50;
  height:var(--hdr);
  display:flex;align-items:center;
  background:rgba(247,244,237,.75);
  border-bottom:1px solid transparent;
  transition:background .4s var(--ease),border-color .4s var(--ease);
}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .hdr{-webkit-backdrop-filter:saturate(140%) blur(14px);backdrop-filter:saturate(140%) blur(14px)}
}
.hdr.is-stuck{background:rgba(247,244,237,.93);border-bottom-color:var(--hair)}
.hdr__in{
  width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--pad);
  display:flex;align-items:center;gap:24px;
}
.brand{display:flex;align-items:baseline;gap:10px;text-decoration:none;flex:0 0 auto}
.brand__mark{
  font-family:var(--display);font-weight:500;font-size:1.06rem;
  letter-spacing:.02em;color:var(--bone);
}
.brand__mark em{font-style:normal;color:var(--gold)}
.brand__sub{
  font-family:var(--display);font-size:.72rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--muted);
}
.nav{margin-left:auto;display:flex;align-items:center;gap:clamp(18px,2.4vw,34px)}
.nav a{
  font-size:.90rem;letter-spacing:.04em;color:var(--muted);
  text-decoration:none;transition:color .3s var(--ease);white-space:nowrap;
}
.nav a:hover{color:var(--bone)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--display);font-weight:600;
  font-size:.88rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink);background:var(--gold);
  border:1px solid var(--gold);border-radius:2px;
  padding:14px 26px;text-decoration:none;cursor:pointer;
  transition:background .35s var(--ease),border-color .35s var(--ease),color .35s var(--ease);
}
.btn:hover{background:var(--gold-lt);border-color:var(--gold-lt)}
.btn--ghost{
  background:transparent;color:var(--gold);border-color:var(--line);
}
.btn--ghost:hover{background:transparent;color:var(--gold-lt);border-color:var(--gold)}
.btn--sm{padding:11px 18px;font-size:.76rem;letter-spacing:.14em}
.btn--block{width:100%;padding:18px 24px;font-size:.92rem}
.btn--lg{padding:19px 38px;font-size:.92rem}

/* ============================================================
   SECCIÓN 1 · HERO
   ============================================================ */
.hero{
  padding-top:calc(var(--hdr) + clamp(56px,10vh,124px));
  padding-bottom:var(--sec);
  position:relative;
}
.hero__grid{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(34px,5vw,72px);
  align-items:start;
}
/* El titular ocupa el ancho completo de la caja: en tres líneas, como se pidió.
   Encerrado en una columna de rejilla se partía en cinco. */
.hero h1{margin-bottom:clamp(38px,4.6vw,58px)}
.hero h1 span{display:block}
.hero__lead{max-width:50ch}
.hero__cta{
  margin-top:clamp(34px,4.4vw,52px);
  display:flex;flex-direction:column;align-items:flex-start;gap:14px;
}
.hero__micro{
  font-family:var(--display);font-size:.75rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);
}

/* Medidor de progreso — el módulo que falta */
.gauge{
  border-left:1px solid var(--gold);
  background:var(--surface);
  border-top:1px solid var(--hair);
  border-right:1px solid var(--hair);
  border-bottom:1px solid var(--hair);
  border-radius:2px;
  padding:clamp(24px,2.8vw,32px);
}
.gauge__top{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  flex-wrap:wrap;
}
.gauge__title{
  font-family:var(--display);font-size:.78rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--bone);line-height:1.6;
}
.gauge__count{
  font-family:var(--display);font-size:.78rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold);white-space:nowrap;
}
.gauge__track{
  position:relative;height:2px;background:rgba(35,46,38,.14);
  margin:20px 0 22px;border-radius:0;overflow:hidden;
}
.gauge__fill{
  position:absolute;inset:0 auto 0 0;width:66%;
  background:linear-gradient(90deg,var(--gold),var(--gold-lt));
}
.js .gauge__fill{width:0;transition:width 1.4s var(--ease) .25s}
.js .is-in .gauge__fill{width:66%}
.gauge__list{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.gauge__list li{
  display:flex;align-items:center;gap:12px;
  font-size:.96rem;color:var(--muted);line-height:1.5;
}
.gauge__list i{
  font-style:normal;width:18px;flex:0 0 18px;text-align:center;
  font-size:.92rem;
}
.gauge__list .ok i{color:var(--gold)}
.gauge__list .ok{color:var(--text)}
.gauge__list .pend i{color:var(--bone)}
.gauge__list .pend{color:var(--bone)}

/* ============================================================
   SECCIÓN 2 · EL DESGASTE EMOCIONAL
   ============================================================ */
.wear__grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(26px,3.4vw,48px);
  margin-top:clamp(40px,5vw,64px);
}
.wear__it{border-left:1px solid var(--gold);padding-left:clamp(18px,2.2vw,26px)}
.wear__it h3{margin-bottom:.6em}
.wear__it p{color:var(--muted);max-width:46ch}
.wear__close{
  margin-top:clamp(44px,5.4vw,72px);
  max-width:70ch;
  font-size:clamp(1.02rem,1.3vw,1.13rem);
  line-height:1.75;color:var(--text);
}

/* ============================================================
   SECCIÓN 3 · REGISTRO SÍSMICO RECIENTE
   ============================================================ */
.quake__grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(16px,1.8vw,24px);
  margin-top:clamp(34px,4.4vw,52px);
}
.quake{
  background:var(--surface);border:1px solid var(--hair);border-radius:2px;
  padding:clamp(22px,2.4vw,30px);display:flex;flex-direction:column;gap:14px;
}
.quake__date{
  font-family:var(--display);font-size:.76rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold);
}
.quake__place{
  font-family:var(--display);font-weight:300;font-size:1.05rem;
  color:var(--bone);letter-spacing:.01em;line-height:1.3;
}
.quake__mag{
  font-family:var(--display);font-weight:400;
  font-size:clamp(2.1rem,3.6vw,2.9rem);
  line-height:1;color:var(--bone);letter-spacing:-.03em;
  margin-top:auto;padding-top:10px;
}
.quake__note{font-size:.95rem;color:var(--muted);line-height:1.6}
.quake--home{border-color:var(--line)}
.honesty{
  margin-top:clamp(30px,3.6vw,44px);
  border-left:1px solid var(--gold);
  padding-left:clamp(18px,2.2vw,26px);
  max-width:74ch;color:var(--muted);font-size:1.04rem;line-height:1.75;
}

/* ============================================================
   SECCIÓN 4 · POR QUÉ EL SUELO DECIDE
   ============================================================ */
.soil__box{
  margin-top:clamp(8px,1.6vw,16px);
  background:var(--surface);border:1px solid var(--line);border-radius:2px;
  padding:clamp(28px,4vw,58px);
}
.tag{
  display:inline-block;
  font-family:var(--display);font-size:.74rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold);
  border:1px solid var(--line);border-radius:2px;
  padding:7px 14px;margin-bottom:clamp(20px,2.6vw,28px);
}
.soil__box h2{max-width:18ch}
.soil__box .p{max-width:70ch}
.soil__last{
  margin-top:clamp(26px,3vw,38px);
  font-family:var(--display);font-weight:300;
  font-size:clamp(1.2rem,2.1vw,1.6rem);
  line-height:1.4;color:var(--bone);letter-spacing:-.01em;max-width:26ch;
}

/* ============================================================
   SECCIÓN 5 · LAS CUATRO RAZONES (4U)
   ============================================================ */
.four{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(20px,2.4vw,34px);
  margin-top:clamp(34px,4.4vw,52px);
}
.four__it{display:flex;flex-direction:column;gap:14px}
.pill{
  align-self:flex-start;
  font-family:var(--display);font-size:.73rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold);
  border:1px solid var(--line);border-radius:999px;
  padding:6px 15px;
}
.four__it h3{font-size:clamp(1.05rem,1.6vw,1.24rem)}
.four__it p{color:var(--muted);font-size:1.03rem;max-width:34ch}

/* ============================================================
   SECCIÓN 6 · EL AUDITOR (formulario)
   ============================================================ */
.aud{scroll-margin-top:calc(var(--hdr) + 26px)}
.aud__grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(34px,5vw,72px);align-items:start;
}
.aud__promises{list-style:none;margin:clamp(28px,3.4vw,40px) 0 0;padding:0;display:grid;gap:12px}
.aud__promises li{
  position:relative;padding-left:26px;color:var(--muted);font-size:1.03rem;
}
.aud__promises li::before{
  content:"";position:absolute;left:0;top:.72em;
  width:13px;height:1px;background:var(--gold);
}
.form-card{
  background:var(--surface);
  border:1px solid var(--hair);
  border-top:2px solid var(--gold);
  border-radius:2px;
  padding:clamp(26px,3.2vw,40px);
}
.field{margin-bottom:clamp(20px,2.4vw,26px)}
.field:last-of-type{margin-bottom:clamp(26px,3vw,32px)}
.field label{
  display:block;
  font-family:var(--display);font-size:.74rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);margin-bottom:9px;
}
.field input{
  width:100%;display:block;
  background:transparent;border:0;border-bottom:1px solid rgba(35,46,38,.22);
  border-radius:0;padding:9px 0 11px;
  font-family:var(--body);font-weight:400;font-size:1.1rem;color:var(--bone);
  transition:border-color .35s var(--ease);
  -webkit-appearance:none;appearance:none;
}
.field input::placeholder{color:#8A9488;opacity:1}
.field input:focus{outline:none;border-bottom-color:var(--gold)}
.field input:focus-visible{outline:none}
.row2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,24px)}
.err{
  display:block;min-height:0;
  font-size:.86rem;color:var(--alert);margin-top:7px;line-height:1.5;
}
.field.is-bad input{border-bottom-color:var(--alert)}
.form-foot{
  margin-top:18px;font-size:.92rem;line-height:1.65;color:var(--muted);
}
.done{
  border-left:1px solid var(--gold);padding-left:clamp(18px,2.2vw,26px);
}
.done h3{margin-bottom:.7em}
.done p{color:var(--muted);margin-top:1em;max-width:46ch}
.done__data{
  list-style:none;margin:18px 0 0;padding:0;display:grid;gap:9px;
  font-size:.96rem;color:var(--text);
}
.done__data span{
  font-family:var(--display);font-size:.73rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);margin-right:10px;
}
[hidden]{display:none !important}

/* ============================================================
   SECCIÓN 7 · LA BRECHA INMOBILIARIA
   ============================================================ */
.gap__bars{margin-top:clamp(40px,5vw,64px);display:grid;gap:clamp(22px,2.6vw,32px)}
.bar__head{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  margin-bottom:12px;flex-wrap:wrap;
}
.bar__label{
  font-family:var(--display);font-size:.75rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold);
}
.bar__say{font-size:.96rem;color:var(--muted)}
.bar__track{height:10px;background:rgba(35,46,38,.09);border-radius:2px;overflow:hidden}
.bar__fill{
  display:block;height:100%;border-radius:2px;
  background:linear-gradient(90deg,rgba(79,107,76,.35),rgba(79,107,76,.72));
  width:var(--w,100%);
}
.bar--calc .bar__fill{background:linear-gradient(90deg,var(--gold),var(--gold-lt))}
.js .bar__fill{width:0;transition:width 1.5s var(--ease) .2s}
.js .is-in .bar__fill{width:var(--w,100%)}
.gap__cards{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(16px,1.8vw,24px);margin-top:clamp(40px,5vw,60px);
}
.numcard{
  background:var(--surface);border:1px solid var(--hair);border-radius:2px;
  padding:clamp(22px,2.4vw,30px);
}
.numcard__n{
  font-family:var(--display);font-weight:400;font-size:1.6rem;line-height:1;
  color:var(--gold);letter-spacing:-.02em;display:block;margin-bottom:16px;
}
.numcard h3{font-size:1.06rem;margin-bottom:.6em}
.numcard p{font-size:.99rem;color:var(--muted)}

/* ============================================================
   SECCIÓN 8 · PRUEBA DE AUTORIDAD · ZONAS SÍSMICAS
   ============================================================ */
.gap-block{
  margin-top:clamp(40px,5vw,64px);
  background:var(--surface);border:1px solid var(--line);border-radius:2px;
  padding:clamp(28px,4vw,58px);
  display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,.58fr);
  gap:clamp(28px,4vw,58px);align-items:start;
}
.gap-block__k{border-right:1px solid var(--hair);padding-right:clamp(20px,3vw,40px)}
.figure-xl{
  font-family:var(--display);font-weight:400;
  font-size:clamp(4.2rem,11vw,8.2rem);
  line-height:.86;letter-spacing:-.045em;color:var(--gold);
  display:block;
}
.figure-cap{
  display:block;margin-top:16px;max-width:24ch;
  font-size:.94rem;line-height:1.6;color:var(--muted);
}
.gap-block__t h3{
  font-family:var(--display);font-weight:300;
  font-size:clamp(1.3rem,2.2vw,1.72rem);letter-spacing:-.015em;margin-bottom:.75em;
}
.gap-block__t p{color:var(--muted);max-width:60ch}
.gap-block__t p + p{margin-top:1.15em}

.zones{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(16px,2vw,24px);margin-top:clamp(40px,5vw,64px);
}
.zone{
  background:var(--surface);border:1px solid var(--hair);border-radius:2px;
  padding:clamp(22px,2.6vw,32px);
  display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:clamp(18px,2.2vw,26px);align-items:start;
}
.zone__k{
  width:54px;height:54px;flex:0 0 54px;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:300;font-size:1.5rem;
  border:1px solid var(--line);border-radius:2px;
  color:var(--gold);background:rgba(79,107,76,.08);
}
.zone__t{
  font-family:var(--display);font-size:.76rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold);display:block;margin-bottom:10px;
}
.zone h3{font-size:1.08rem;margin-bottom:.55em}
.zone p{font-size:.99rem;color:var(--muted)}
.zone__where{
  margin-top:16px;padding-top:14px;border-top:1px solid var(--hair);
  font-size:.92rem;line-height:1.6;color:var(--muted);
}
.zone__where b{color:var(--text);font-weight:400}
.warn{
  margin-top:clamp(30px,3.6vw,44px);
  border-left:1px solid var(--gold);padding-left:clamp(18px,2.2vw,26px);
  max-width:74ch;color:var(--muted);font-size:1.04rem;line-height:1.75;
}
.soils{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(16px,1.8vw,24px);margin-top:clamp(30px,3.6vw,44px);
}
.soil__img{
  margin:calc(var(--cp) * -1) calc(var(--cp) * -1) var(--cp);
  position:relative;overflow:hidden;
  background:var(--navy);border-bottom:1px solid var(--hair);
}
.soil__img::before{content:"";display:block;padding-top:75%}
.soil__img img{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;display:block;
}
.soil h3{font-size:1.04rem;margin-bottom:.6em}
.soil p{font-size:.99rem;color:var(--muted)}
.soil__k{
  font-family:var(--display);font-size:.75rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold);display:block;margin-bottom:14px;
}

/* ============================================================
   SECCIÓN 9 · ACTIVIDAD VOLCÁNICA
   ============================================================ */
.volc__top{
  display:grid;grid-template-columns:minmax(0,.58fr) minmax(0,.42fr);
  gap:clamp(28px,4vw,64px);align-items:start;
  margin-top:clamp(30px,3.6vw,44px);
}
.volc__fig{
  border-left:1px solid var(--gold);padding-left:clamp(20px,2.6vw,30px);
}
.volcs{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(14px,1.6vw,20px);margin-top:clamp(40px,5vw,60px);
}
.volc{
  background:var(--surface);border:1px solid var(--hair);border-radius:2px;
  padding:clamp(20px,2.2vw,26px);
}
.volc h3{font-size:1.02rem;margin-bottom:.5em}
.volc p{font-size:.94rem;color:var(--muted);line-height:1.6}
.ash{margin-top:clamp(40px,5vw,60px);max-width:70ch}
.good{
  margin-top:clamp(30px,3.6vw,44px);
  background:rgba(79,107,76,.07);
  border:1px solid var(--line);border-radius:2px;
  padding:clamp(24px,3vw,38px);
}
.good p{max-width:72ch;color:var(--text);line-height:1.75}

/* ============================================================
   SECCIÓN 10 · GALERÍA
   ============================================================ */
.gal{
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
  gap:clamp(10px,1.2vw,16px);margin-top:clamp(40px,5vw,60px);
}
.gal__it{
  position:relative;overflow:hidden;
  border:1px solid var(--hair);border-radius:2px;background:var(--navy);
  margin:0;
}
/* La proporción va en un separador, no en la caja: así cada pieza
   conserva su mínimo y a la vez se estira hasta la altura de su fila.
   Con aspect-ratio en la caja, la fila la marcaba la pieza más alta y
   la de al lado quedaba corta — un escalón de 17 px que se leía como error. */
.gal__it::before{content:"";display:block;padding-top:var(--ar,62.5%)}
.gal__it img{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;display:block;
}
.gal__a{grid-column:span 4;--ar:62.5%}
.gal__b{grid-column:span 2;--ar:133.333%}
.gal__c{grid-column:span 2;--ar:100%}
.gal__d{grid-column:span 4;--ar:43.75%}
.gal__cap{
  position:absolute;left:0;right:0;bottom:0;
  padding:clamp(30px,4vw,44px) clamp(14px,1.6vw,20px) clamp(12px,1.4vw,16px);
  background:linear-gradient(to top,rgba(24,32,26,.90) 12%,rgba(24,32,26,.48) 52%,transparent 100%);
  font-family:var(--display);font-size:.73rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--on-photo);
}
.gal__foot{margin-top:clamp(20px,2.4vw,28px)}

/* ============================================================
   SECCIÓN 11 · EL DATO INCÓMODO
   ============================================================ */
.stats{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(18px,2.2vw,30px);margin-top:clamp(40px,5vw,60px);
}
.stat{border-top:1px solid var(--hair);padding-top:clamp(18px,2.2vw,26px)}
.stat__n{
  font-family:var(--display);font-weight:400;
  font-size:clamp(2.9rem,6.2vw,4.6rem);
  line-height:.9;letter-spacing:-.045em;color:var(--bone);display:block;
  margin-bottom:16px;
}
.stat p{font-size:.98rem;color:var(--muted);line-height:1.6;max-width:26ch}
.stat--hi{border-top-color:var(--gold)}
.stat--hi .stat__n{color:var(--gold)}
.stat--hi p{color:var(--text)}
.reread{margin-top:clamp(40px,5vw,60px);max-width:72ch}
.kicker{
  margin-top:clamp(38px,4.6vw,58px);
  font-family:var(--display);font-weight:300;
  font-size:clamp(1.5rem,3.2vw,2.4rem);
  line-height:1.28;letter-spacing:-.02em;color:var(--bone);max-width:22ch;
}

/* ============================================================
   SECCIÓN 12 · LA PROPORCIÓN
   ============================================================ */
.prop{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(34px,5vw,72px);margin-top:clamp(40px,5vw,60px);
}
.prop__col{border-top:1px solid var(--hair);padding-top:clamp(22px,2.6vw,32px)}
.prop__col--r{border-top-color:var(--gold)}
.prop__k{
  font-family:var(--display);font-size:.75rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold);display:block;margin-bottom:clamp(18px,2.2vw,26px);
}
.prop__fig{
  font-family:var(--display);font-weight:400;
  font-size:clamp(2.6rem,5.6vw,4.2rem);
  line-height:.95;letter-spacing:-.04em;color:var(--bone);display:block;
}
.prop__col--r .prop__fig{color:var(--gold)}
.prop__figcap{
  display:block;margin-top:14px;font-size:.93rem;color:var(--muted);max-width:28ch;
}
.prop__col p{color:var(--muted);margin-top:1.15em;max-width:44ch}
.prop__last{
  margin-top:clamp(26px,3vw,36px);
  font-family:var(--display);font-weight:300;
  font-size:clamp(1.12rem,1.9vw,1.42rem);line-height:1.45;
  color:var(--bone);letter-spacing:-.01em;max-width:30ch;
}
.example{
  margin-top:clamp(26px,3vw,36px);padding-top:clamp(20px,2.4vw,26px);
  border-top:1px solid var(--hair);
}
.example dl{margin:0;display:grid;gap:12px}
.example .kv{display:flex;justify-content:space-between;gap:16px;align-items:baseline}
.example dt{font-size:.93rem;color:var(--muted)}
.example dd{
  margin:0;font-family:var(--display);font-size:1rem;color:var(--bone);
  letter-spacing:.01em;white-space:nowrap;
}
.example .kv--hi dd{color:var(--gold)}
.caveat{margin-top:18px;font-size:.92rem;line-height:1.65;color:var(--muted)}

.single{margin-top:clamp(56px,7vw,96px)}
.ten{
  margin-top:clamp(30px,3.6vw,44px);
  background:rgba(79,107,76,.07);
  border:1px solid var(--line);border-radius:2px;
  padding:clamp(24px,3vw,40px);
}
.ten__k{
  font-family:var(--display);font-size:.75rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold);display:block;
  margin-bottom:clamp(22px,2.6vw,30px);
}
.ten__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(22px,3vw,44px)}
.ten__n{
  font-family:var(--display);font-weight:400;
  font-size:clamp(1.9rem,3.8vw,2.9rem);
  line-height:1;letter-spacing:-.03em;color:var(--bone);display:block;margin-bottom:12px;
}
.ten__grid p{font-size:.99rem;color:var(--muted);max-width:34ch}
.ten__close{
  margin-top:clamp(24px,3vw,34px);padding-top:clamp(20px,2.4vw,26px);
  border-top:1px solid var(--line);color:var(--text);max-width:66ch;
}
.hook{
  margin-top:clamp(30px,3.6vw,44px);
  border-left:1px solid var(--gold);padding-left:clamp(18px,2.2vw,26px);
  max-width:72ch;color:var(--muted);line-height:1.75;
}
.hook b{color:var(--bone);font-weight:400}

.pair{
  display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  gap:clamp(14px,2vw,26px);align-items:center;
  margin-top:clamp(46px,5.6vw,72px);
}
.pair__c{
  background:var(--surface);border:1px solid var(--hair);border-radius:2px;
  padding:clamp(24px,3vw,36px);text-align:center;
}
.pair__c--gold{border-color:var(--line)}
.pair__k{
  font-family:var(--display);font-size:.73rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);display:block;margin-bottom:16px;
}
.pair__v{
  font-family:var(--display);font-weight:400;
  font-size:clamp(1.5rem,3.2vw,2.3rem);
  line-height:1;letter-spacing:-.03em;color:var(--bone);display:block;
}
.pair__c--gold .pair__v{color:var(--gold)}
.pair__arrow{
  color:var(--gold);font-size:1.35rem;line-height:1;
  font-family:var(--display);
}

/* ============================================================
   SECCIÓN 13 · CITA, CIERRE Y PIE
   ============================================================ */
.quote{
  text-align:center;max-width:24ch;margin-inline:auto;
  font-family:var(--display);font-weight:300;
  font-size:clamp(1.7rem,4.2vw,3rem);
  line-height:1.28;letter-spacing:-.025em;color:var(--bone);
}
.close{
  text-align:center;margin-top:clamp(56px,7vw,104px);
  display:flex;flex-direction:column;align-items:center;
}
.close h2{max-width:16ch}
.close p{
  margin-top:clamp(20px,2.4vw,28px);max-width:52ch;color:var(--muted);
}
.close .btn{margin-top:clamp(30px,3.6vw,42px)}

.foot{
  border-top:1px solid var(--hair);
  padding-block:clamp(40px,5vw,64px);
}
.foot__in{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(26px,3.4vw,48px);align-items:start;
}
.foot__brand .brand__mark{font-size:1.16rem}
.foot__tag{margin-top:12px;font-size:.94rem;color:var(--muted);max-width:34ch}
.foot__r{text-align:right}
.foot__inst{font-size:.96rem;color:var(--text)}
.foot__legal{margin-top:14px;font-size:.85rem;line-height:1.7;color:var(--fine);max-width:46ch;margin-left:auto}

/* ============================================================
   COMPONENTES DE LA REESTRUCTURA COMERCIAL
   promesa · trío · entregables · pantalla de resultado
   ============================================================ */

/* Promesa cuantificable del hero */
.promise{
  margin-top:clamp(26px,3vw,36px);
  border-left:1px solid var(--gold);
  padding-left:clamp(18px,2.2vw,26px);
  max-width:52ch;
  font-size:clamp(1.02rem,1.35vw,1.15rem);
  line-height:1.7;color:var(--text);
}
.promise b{color:var(--gold);font-weight:400}

/* Subtítulo de bloque dentro de una sección larga */
.sub{
  font-family:var(--display);font-weight:300;
  font-size:clamp(1.5rem,3vw,2.2rem);
  line-height:1.15;letter-spacing:-.02em;color:var(--bone);
  margin-bottom:clamp(24px,3vw,36px);
}
.soil__box .soil__h{
  font-size:clamp(1.5rem,3vw,2.2rem);font-weight:300;
  max-width:20ch;margin-bottom:.55em;
}

/* Trío de tarjetas: qué es / qué no es / para qué sirve */
.trio{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(16px,1.8vw,24px);margin-top:clamp(34px,4.4vw,52px);
}
.trio h3{font-size:1.06rem;margin-bottom:.6em}
.trio p{font-size:1rem;color:var(--muted)}

/* Las tres promesas, en línea bajo las cuatro razones */
.promises--row{
  margin-top:clamp(34px,4.4vw,52px);
  grid-template-columns:repeat(3,minmax(0,1fr));
  padding-top:clamp(22px,2.6vw,30px);
  border-top:1px solid var(--hair);
}

/* Lo que te llevas: cinco entregables. La numeración es real —
   es el orden en que salen, no un adorno. */
.outs{list-style:none;margin:clamp(40px,5vw,60px) 0 0;padding:0}
.out{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:clamp(20px,2.6vw,34px);
  padding:clamp(24px,3vw,34px) 0;
  border-top:1px solid var(--hair);
}
.out:last-child{border-bottom:1px solid var(--hair)}
.out__n{
  font-family:var(--display);font-weight:400;font-size:1.5rem;
  line-height:1;color:var(--gold);letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;padding-top:.35em;
}
.out__when{
  display:inline-block;
  font-family:var(--display);font-size:.72rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);
  border:1px solid var(--hair);border-radius:999px;
  padding:5px 13px;margin-bottom:14px;
}
.out__when--now{color:var(--gold);border-color:var(--line)}
.out h3{font-size:clamp(1.08rem,1.7vw,1.3rem);margin-bottom:.5em}
.out p{font-size:1.03rem;color:var(--muted);max-width:64ch}

/* ---------- PANTALLA DE RESULTADO ----------
   Sustituye al formulario en el sitio, sin recargar: el impulso no
   se rompe con una navegación. */
.result{
  border-top:2px solid var(--gold);
  padding-top:clamp(28px,3.4vw,44px);
  scroll-margin-top:calc(var(--hdr) + 26px);
}
.result:focus{outline:none}
.result__h{margin-bottom:clamp(30px,3.8vw,46px)}
.result__k{
  font-family:var(--display);font-size:.75rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold);display:block;margin-bottom:18px;
}
.result__panel{
  background:rgba(79,107,76,.07);
  border:1px solid var(--line);border-radius:2px;
  padding:clamp(26px,3.4vw,44px);
}
.result__range{
  font-family:var(--display);font-weight:400;
  font-size:clamp(2rem,5.2vw,4rem);
  line-height:1.02;letter-spacing:-.035em;color:var(--bone);
}
.result__cap{
  margin-top:18px;max-width:62ch;
  font-size:1rem;color:var(--muted);line-height:1.7;
}
.result__cap b{color:var(--text);font-weight:400}
.result__flag{
  margin-top:18px;padding-left:16px;border-left:1px solid var(--gold);
  font-size:.98rem;color:var(--text);line-height:1.65;max-width:62ch;
}
.result__gap,
.result__pending{
  margin-top:clamp(22px,2.6vw,32px);
  background:var(--surface);
  border:1px solid var(--hair);border-radius:2px;
  padding:clamp(24px,3vw,38px);
}
.result__ask{
  font-size:1.02rem;color:var(--muted);max-width:62ch;
  line-height:1.7;margin-bottom:clamp(20px,2.4vw,26px);
}
.gapform{
  display:grid;grid-template-columns:minmax(0,340px) auto;
  justify-content:start;
  gap:clamp(16px,2vw,24px);align-items:end;
}
.gapform .field,
.gapform .field:last-of-type{margin-bottom:0}
.gapout{
  margin-top:clamp(22px,2.6vw,30px);
  padding-top:clamp(20px,2.4vw,26px);
  border-top:1px solid var(--line);
}
.gapout__v{
  font-family:var(--display);font-weight:400;
  font-size:clamp(1.65rem,3.8vw,2.8rem);
  line-height:1.05;letter-spacing:-.03em;color:var(--gold);
}
.gapout__v{color:var(--st-gap)}
.gapout--ok .gapout__v{color:var(--st-ok)}
.gapout__t{
  margin-top:14px;max-width:62ch;
  font-size:1.02rem;color:var(--text);line-height:1.7;
}
.result__pending p{
  font-size:1.02rem;color:var(--muted);max-width:66ch;line-height:1.7;
}
.result__pending b{color:var(--text);font-weight:400}
.result__cta{margin-top:clamp(28px,3.4vw,40px)}
.result__legal{
  margin-top:20px;max-width:76ch;
  font-size:.84rem;line-height:1.65;color:var(--fine);
}

/* ============================================================
   ESCALA DE DATOS
   Rampa secuencial de severidad — un solo tono (55° en OKLCH),
   luminosidad monótona de claro a oscuro. Codifica AMPLIFICACIÓN:
   se usa igual en las zonas A–D y en los suelos I–III, porque miden
   lo mismo. Validada: tono 4° de dispersión, saltos de L ≥ 0.06,
   extremo claro 2.19:1 sobre el fondo.

   Estado — reservado, nunca reutilizado como color de serie, y
   siempre acompañado de etiqueta. Validado contra la rampa bajo
   protanopía y deuteranopía (ΔE 11.3 y 15.2).
   ============================================================ */
:root{
  --viz-1:#D39B75;   /* A · sismicidad muy baja  */
  --viz-2:#BB7949;   /* B · baja                 */
  --viz-3:#A35612;   /* C · alta                 */
  --viz-4:#7C3900;   /* D · muy alta             */
  --viz-track:#F0E0D2;         /* paso claro de la misma rampa */
  --viz-on-light:#232E26;      /* texto sobre los pasos claros */
  --viz-on-dark:#F7F4ED;       /* texto sobre los pasos oscuros */
  --st-ok:#0C6944;             /* la póliza cubre el rango   */
  --st-gap:#9F3422;            /* hay brecha                 */
}

/* ---------- Cuadro de zona sísmica: la rampa hace el trabajo ---------- */
.zone__k{
  background:var(--viz-1);border-color:transparent;color:var(--viz-on-light);
}
.zone--b .zone__k{background:var(--viz-2);color:var(--viz-on-light)}
.zone--c .zone__k{background:var(--viz-3);color:var(--viz-on-dark)}
.zone--d .zone__k{background:var(--viz-4);color:var(--viz-on-dark)}

/* Leyenda de la rampa: la identidad nunca queda sólo en el color */
.ramp{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;
  margin-top:clamp(24px,3vw,32px);
  padding-top:clamp(18px,2.2vw,24px);border-top:1px solid var(--hair);
}
.ramp__t{
  font-family:var(--display);font-size:.73rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);margin-right:4px;
}
.ramp__i{display:flex;align-items:center;gap:8px;font-size:.90rem;color:var(--text)}
.ramp__s{width:14px;height:14px;border-radius:2px;flex:0 0 14px}

/* ---------- Chip de amplificación en los tres suelos ---------- */
.soil__amp{
  display:flex;align-items:center;gap:9px;
  margin-bottom:14px;
  font-family:var(--display);font-size:.72rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);
}
.soil__amp i{
  font-style:normal;width:12px;height:12px;border-radius:2px;flex:0 0 12px;
}

/* ---------- Medidor de proporción bajo cada cifra ---------- */
.stat__meter{
  height:8px;background:var(--viz-track);border-radius:2px;
  margin:16px 0 14px;overflow:hidden;
}
.stat__meter span{
  display:block;height:100%;background:var(--viz-2);
  border-radius:0 4px 4px 0;width:var(--w,0%);
}
.js .stat__meter span{width:0;transition:width 1.3s var(--ease) .15s}
.js .is-in .stat__meter span{width:var(--w,0%)}
.stat--hi .stat__meter span{background:var(--viz-4)}

/* ---------- Barras de la Brecha Inmobiliaria ---------- */
.bar--ref .bar__fill{background:var(--viz-1)}
.bar--calc .bar__fill{background:var(--viz-3)}

/* ---------- Gráfico de rango y póliza (pantalla de resultado) ----------
   Un solo eje. Dos filas rotuladas con su valor: nada queda escondido
   detrás de un hover, así que no hace falta uno. */
.rchart{margin-top:clamp(26px,3.2vw,36px)}
.rchart__row{margin-bottom:clamp(18px,2.2vw,24px)}
.rchart__head{
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:9px;
}
.rchart__key{
  width:11px;height:11px;border-radius:2px;flex:0 0 11px;
  transform:translateY(1px);
}
.rchart__lab{
  font-family:var(--display);font-size:.73rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);
}
.rchart__num{
  margin-left:auto;font-size:1rem;color:var(--text);white-space:nowrap;
}
.rchart__track{
  position:relative;height:20px;background:var(--viz-track);border-radius:2px;
}
.rchart__band{
  position:absolute;top:0;bottom:0;border-radius:4px;background:var(--viz-3);
  left:var(--x0,0%);right:var(--x1,0%);
}
.rchart__bar{
  position:absolute;top:0;bottom:0;left:0;width:var(--w,0%);
  border-radius:0 4px 4px 0;background:var(--st-gap);
}
.rchart__bar.is-ok{background:var(--st-ok)}
.js .rchart__bar{transition:width 1s var(--ease)}
.rchart__axis{
  display:flex;justify-content:space-between;
  margin-top:12px;padding-top:9px;border-top:1px solid var(--hair);
  font-size:.80rem;color:var(--muted);
  font-variant-numeric:tabular-nums;
}

/* ============================================================
   EL RADAR, DENTRO DE LOS BLOQUES
   El mismo patrón del fondo, traído a las tres cajas donde dice
   algo: dónde estás parado y hasta dónde llega el movimiento.
   No se reparte por toda la página — pierde sentido y ensucia.
   ============================================================ */
.radar{position:relative;overflow:hidden}
.radar::before{
  content:"";position:absolute;z-index:0;pointer-events:none;
  width:min(720px,150%);aspect-ratio:1;
  right:-16%;top:50%;transform:translateY(-50%);
  background:
    repeating-conic-gradient(from 0deg at 50% 50%,
      rgba(79,107,76,.13) 0deg 0.2deg, transparent 0.2deg 15deg),
    repeating-radial-gradient(circle at 50% 50%,
      rgba(79,107,76,0) 0 38px,
      rgba(79,107,76,.19) 38px 39px);
  -webkit-mask-image:radial-gradient(circle at 50% 50%, #000 6%, rgba(0,0,0,.5) 44%, transparent 72%);
  mask-image:radial-gradient(circle at 50% 50%, #000 6%, rgba(0,0,0,.5) 44%, transparent 72%);
}
/* El contenido va por encima del motivo, siempre. */
.radar > *{position:relative;z-index:1}

/* ============================================================
   CONVERSIÓN · promesas, CTA intermedios y dictamen
   ============================================================ */

/* Las tres marcas bajo la promesa del hero */
.ticks{
  list-style:none;margin:clamp(20px,2.4vw,26px) 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:10px 22px;
}
.ticks li{
  display:flex;align-items:center;gap:9px;
  font-size:.96rem;color:var(--text);
}
.ticks li::before{
  content:"";width:15px;height:9px;flex:0 0 15px;
  border-left:1.5px solid var(--gold);border-bottom:1.5px solid var(--gold);
  transform:rotate(-45deg) translateY(-2px);
}
.proof{
  margin-top:clamp(22px,2.6vw,30px);max-width:58ch;
  font-size:.90rem;line-height:1.7;color:var(--fine);
}
.proof b{color:var(--muted);font-weight:400}

/* «No es… no es… no es…» — lo que el número NO es */
.nots{
  list-style:none;margin:clamp(28px,3.4vw,40px) 0 0;padding:0;
  display:grid;gap:0;max-width:46ch;
}
.nots li{
  padding:14px 0;border-bottom:1px solid var(--hair);
  font-family:var(--display);font-weight:300;
  font-size:clamp(1.05rem,1.8vw,1.3rem);color:var(--muted);
  letter-spacing:-.01em;
}
.nots li:first-child{border-top:1px solid var(--hair)}
.numero__is{margin-top:clamp(28px,3.4vw,40px)}

/* Llamada intermedia */
.midcta{
  margin-top:clamp(34px,4.4vw,52px);
  background:rgba(79,107,76,.07);
  border:1px solid var(--line);border-radius:2px;
  padding:clamp(24px,3vw,38px);
  display:flex;flex-direction:column;align-items:flex-start;gap:20px;
}
.midcta--wide{
  flex-direction:row;align-items:center;justify-content:space-between;
  gap:clamp(24px,4vw,56px);margin-top:0;
}
.midcta__k{
  font-family:var(--display);font-size:.73rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold);margin-bottom:12px;
}
.midcta__t{max-width:56ch;color:var(--text);line-height:1.7}
.midcta .btn{flex:0 0 auto}

/* ---------- EL DICTAMEN ----------
   Cada renglón: qué es, la cifra, y qué significa. La cifra sola no
   vende nada; la cifra con su lectura, sí. */
.verdict{
  margin-top:clamp(22px,2.6vw,32px);
  border-top:1px solid var(--hair);
}
.verdict__row{
  display:grid;
  grid-template-columns:minmax(0,190px) minmax(0,1fr);
  gap:6px clamp(24px,3.4vw,44px);
  padding:clamp(22px,2.6vw,30px) 0;
  border-bottom:1px solid var(--hair);
  align-items:baseline;
}
.verdict__k{
  font-family:var(--display);font-size:.73rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);
}
.verdict__v{
  font-family:var(--display);font-weight:400;
  font-size:clamp(1.6rem,3.4vw,2.5rem);
  line-height:1.02;letter-spacing:-.03em;color:var(--bone);
  grid-column:2;
}
#v-brecha{color:var(--st-gap)}
.verdict__n{
  grid-column:2;max-width:60ch;margin-top:10px;
  font-size:1rem;line-height:1.7;color:var(--muted);
}
.verdict__chip{
  grid-column:2;justify-self:start;
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--display);font-size:.84rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--viz-on-dark);
  background:var(--st-gap);border-radius:2px;padding:8px 15px;
}
.verdict__chip.is-ok{background:var(--st-ok)}
.verdict__chip::before{
  content:"";width:8px;height:8px;border-radius:50%;
  background:currentColor;flex:0 0 8px;
}

/* La recomendación: el puente entre saber y actuar */
.reco{
  margin-top:clamp(26px,3.2vw,38px);
  background:rgba(79,107,76,.07);
  border:1px solid var(--line);border-radius:2px;
  padding:clamp(26px,3.2vw,40px);
}
.reco__t{
  max-width:66ch;color:var(--text);line-height:1.75;
  font-size:clamp(1rem,1.3vw,1.1rem);
}
.reco .btn{margin-top:clamp(22px,2.6vw,30px)}

/* El expediente: la única captura de contacto */
.handoff{
  margin-top:clamp(22px,2.6vw,32px);
  background:var(--surface);
  border:1px solid var(--hair);border-radius:2px;
  padding:clamp(24px,3vw,38px);
}
.handoff__t{
  font-size:1.02rem;color:var(--muted);max-width:64ch;
  line-height:1.7;margin-bottom:clamp(20px,2.4vw,26px);
}
.handoff__ok--mal{border-left-color:var(--st-gap)}
.handoff__wa{margin-top:clamp(22px,2.6vw,30px);padding-top:clamp(20px,2.4vw,26px);border-top:1px solid var(--hair)}
.handoff__o{
  margin-bottom:14px;font-family:var(--display);font-weight:500;
  font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
}
.handoff__ok{
  margin-top:clamp(20px,2.4vw,26px);
  padding-left:16px;border-left:1px solid var(--st-ok);
  font-size:1rem;line-height:1.7;color:var(--text);max-width:60ch;
}

/* ============================================================
   LEGIBILIDAD Y VOLUMEN
   Viñetas para lo que era una lista disfrazada de párrafo, y un
   desplegable para la profundidad que no todo el mundo quiere leer.
   ============================================================ */
.bullets{
  list-style:none;margin:clamp(24px,3vw,34px) 0 0;padding:0;
  display:grid;gap:clamp(14px,1.8vw,20px);max-width:70ch;
}
.bullets li{
  position:relative;padding-left:30px;
  color:var(--text);line-height:1.68;
}
.bullets li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:16px;height:2px;background:var(--gold);
}
.bullets b{color:var(--bone);font-weight:600}
.bullets--lg li{font-size:clamp(1.04rem,1.35vw,1.16rem)}

/* Desplegable nativo: funciona sin JavaScript */
.more{
  margin-top:clamp(30px,3.6vw,44px);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.more__s{
  list-style:none;cursor:pointer;
  padding:clamp(20px,2.4vw,26px) 0;
  display:flex;align-items:center;gap:16px;
  font-family:var(--display);font-weight:500;
  font-size:.92rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold);
}
.more__s::-webkit-details-marker{display:none}
.more__s::marker{content:""}
.more__s::after{
  content:"+";margin-left:auto;
  font-family:var(--display);font-weight:300;font-size:1.6rem;line-height:1;
  color:var(--gold);
}
.more[open] .more__s::after{content:"–"}
.more__s:hover{color:var(--gold-lt)}
.more__b{padding-bottom:clamp(24px,3vw,40px)}
.more__b .single:first-child{margin-top:0}

/* ============================================================
   BARRA FIJA EN MÓVIL
   En una pantalla de 844 px el CTA del hero cae por debajo del
   pliegue. Esto lo pone siempre al alcance, y se aparta solo
   cuando el formulario ya está en pantalla.
   ============================================================ */
.stickycta{display:none}
@media (max-width:768px){
  .stickycta{
    position:fixed;left:0;right:0;bottom:0;z-index:60;
    display:flex;align-items:center;justify-content:center;
    padding:17px 20px calc(17px + env(safe-area-inset-bottom,0px));
    font-family:var(--display);font-weight:600;
    font-size:.86rem;letter-spacing:.12em;text-transform:uppercase;
    color:var(--ink);background:var(--gold);
    text-decoration:none;border-top:1px solid var(--gold-lt);
    transform:translateY(110%);
    transition:transform .35s var(--ease);
  }
  .stickycta.is-on{transform:none}
}

/* ============================================================
   DIAGRAMA · TERRENO FRENTE A CONSTRUCCIÓN
   Es el concepto central de la página y ninguna fotografía lo
   explica. Se construye con texto real, no con una imagen: así
   escala con el tamaño de letra del lector y se puede leer en voz
   alta. El bloque fantasma —el terreno que no se vuelve a pagar—
   es la idea entera en una sola forma.
   ============================================================ */
.split{
  margin:clamp(34px,4.4vw,52px) 0 0;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  gap:clamp(16px,2.4vw,34px);
  align-items:end;
}
.split__col{display:flex;flex-direction:column;gap:14px}
.split__k{
  font-family:var(--display);font-weight:500;
  font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);line-height:1.5;
}
.split__stack{
  display:flex;flex-direction:column;gap:2px;   /* 2px de aire, no bordes */
  height:clamp(230px,30vw,320px);
}
.split__b{
  height:var(--h,33%);
  border-radius:2px;
  display:flex;align-items:center;
  padding:0 clamp(12px,1.6vw,18px);
  font-size:.9rem;line-height:1.35;font-weight:500;
}
.split__b--ter{background:var(--navy-2);color:var(--bone)}
.split__b--con{background:var(--viz-3);color:var(--viz-on-dark)}
.split__b--dem{background:var(--viz-4);color:var(--viz-on-dark);font-size:.8rem}
.split__b--ghost{
  background:transparent;color:var(--muted);
  border:1px dashed var(--line);
  font-size:.82rem;
}
.split__arrow{
  color:var(--gold);font-family:var(--display);font-size:1.5rem;line-height:1;
  padding-bottom:clamp(96px,13vw,140px);
}
.split__cap{
  grid-column:1 / -1;
  margin-top:clamp(16px,2vw,22px);
  font-size:.86rem;line-height:1.65;color:var(--muted);max-width:66ch;
}

/* ============================================================
   ASISTENTE DE SOPORTE
   Sólo aparece con JavaScript: un botón de chat que no puede
   abrirse sería peor que no tener botón.
   ============================================================ */
.chat{position:fixed;right:clamp(16px,2.4vw,28px);bottom:clamp(16px,2.4vw,28px);z-index:70}

.chat__launch{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 20px;cursor:pointer;
  background:var(--gold);color:var(--ink);
  border:1px solid var(--gold);border-radius:2px;
  font-family:var(--display);font-weight:600;
  font-size:.84rem;letter-spacing:.1em;text-transform:uppercase;
  box-shadow:0 6px 24px rgba(35,46,38,.16);
  transition:background .3s var(--ease);
}
.chat__launch:hover{background:var(--gold-lt)}
.chat__ico{display:inline-flex}
.chat.is-open .chat__launch{display:none}

.chat__panel{
  width:min(392px,calc(100vw - 32px));
  height:min(560px,calc(100vh - 120px));
  display:flex;flex-direction:column;
  background:var(--ink);
  border:1px solid var(--line);border-radius:2px;
  box-shadow:0 18px 60px rgba(35,46,38,.22);
  overflow:hidden;
}
.chat__head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding:18px 20px;border-bottom:1px solid var(--hair);
  background:var(--surface);
}
.chat__k{
  font-family:var(--display);font-weight:500;
  font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);
}
.chat__t{margin-top:5px;font-size:.96rem;color:var(--bone);font-weight:500}
.chat__x{
  background:none;border:0;cursor:pointer;line-height:1;
  font-size:1.7rem;color:var(--muted);padding:0 2px;
}
.chat__x:hover{color:var(--bone)}

.chat__log{
  flex:1;overflow-y:auto;padding:20px;
  display:flex;flex-direction:column;gap:14px;
  overscroll-behavior:contain;
}
.chat__msg{
  max-width:88%;padding:13px 15px;border-radius:2px;
  font-size:.96rem;line-height:1.62;
}
.chat__msg p + p{margin-top:.7em}
.chat__msg--bot{
  align-self:flex-start;background:var(--surface);
  border:1px solid var(--hair);border-left:1px solid var(--gold);
  color:var(--text);
}
.chat__msg--yo{
  align-self:flex-end;background:rgba(79,107,76,.13);
  border:1px solid var(--line);color:var(--bone);
}
.chat__msg--mal{
  align-self:flex-start;background:rgba(159,52,34,.08);
  border:1px solid rgba(159,52,34,.3);border-left:1px solid var(--st-gap);
  color:var(--text);
}

.chat__chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}
.chat__chip{
  cursor:pointer;background:transparent;color:var(--gold);
  border:1px solid var(--line);border-radius:999px;
  padding:8px 14px;font-size:.84rem;line-height:1.3;text-align:left;
  transition:background .25s var(--ease);
}
.chat__chip:hover{background:rgba(79,107,76,.09)}

/* Puntos de "escribiendo" */
.chat__dots{display:inline-flex;gap:5px;align-items:center;height:1.2em}
.chat__dots i{
  width:6px;height:6px;border-radius:50%;background:var(--muted);
  animation:chatlat 1.1s infinite ease-in-out;
}
.chat__dots i:nth-child(2){animation-delay:.16s}
.chat__dots i:nth-child(3){animation-delay:.32s}
@keyframes chatlat{0%,80%,100%{opacity:.25}40%{opacity:1}}

.chat__lento{margin-top:8px;font-size:.84rem;color:var(--muted);font-style:normal}
.chat__form{padding:16px 20px 18px;border-top:1px solid var(--hair);background:var(--surface)}
.chat__lbl{
  display:block;margin-bottom:8px;
  font-family:var(--display);font-weight:500;
  font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
}
.chat__row{display:flex;gap:10px;align-items:flex-end}
.chat__row input{
  flex:1;min-width:0;background:transparent;
  border:0;border-bottom:1px solid rgba(35,46,38,.22);border-radius:0;
  padding:8px 0 10px;font-family:var(--body);font-size:1rem;color:var(--bone);
}
.chat__row input:focus{outline:none;border-bottom-color:var(--gold)}
.chat__row input::placeholder{color:#8A9488}
.chat__send{
  flex:0 0 auto;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;background:var(--gold);color:var(--ink);
  border:1px solid var(--gold);border-radius:2px;
  transition:background .3s var(--ease);
}
.chat__send:hover{background:var(--gold-lt)}
.chat__send[disabled]{opacity:.45;cursor:default}
.chat__legal{margin-top:12px;font-size:.74rem;line-height:1.6;color:var(--fine)}

/* En móvil el panel ocupa casi todo, y el lanzador se sube por encima
   de la barra fija del CTA para no pisarla. */
@media (max-width:768px){
  .chat{right:14px;bottom:14px;left:14px}
  .chat__launch{width:100%;justify-content:center}
  .chat__launch-t{font-size:.8rem}
  .chat__panel{width:100%;height:min(76vh,560px)}
  .chat.is-lifted .chat__launch{margin-bottom:60px}
}
@media (max-width:400px){
  .chat__msg{max-width:94%}
}
@media print{ .chat{display:none !important} }

/* ============================================================
   SIMULADOR DE IMPACTO SÍSMICO
   La aritmética la hace el navegador con la mecánica de las
   Condiciones Generales. Ningún número sale de un modelo.
   ============================================================ */
.sim{
  margin-top:clamp(22px,2.6vw,32px);
  background:var(--surface);
  border:1px solid var(--hair);border-top:2px solid var(--gold);
  border-radius:2px;padding:clamp(24px,3vw,38px);
}
.sim__h{font-size:clamp(1.3rem,2.4vw,1.8rem);margin-bottom:.5em}
.sim__intro{color:var(--muted);max-width:62ch;line-height:1.7;font-size:.98rem}

.sim__ctrls{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(22px,2.8vw,34px);margin-top:clamp(26px,3.2vw,36px);
}
.sim__c label,.sim__lbl{
  display:block;margin-bottom:12px;
  font-family:var(--display);font-weight:500;
  font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
}
.sim__c label b{color:var(--gold);font-weight:600;letter-spacing:.06em}
.sim__hint{margin-top:10px;font-size:.86rem;line-height:1.6;color:var(--fine)}

.sim__c input[type=range]{
  width:100%;-webkit-appearance:none;appearance:none;
  background:transparent;cursor:pointer;height:22px;
}
.sim__c input[type=range]::-webkit-slider-runnable-track{
  height:6px;border-radius:2px;background:var(--viz-track);
}
.sim__c input[type=range]::-moz-range-track{
  height:6px;border-radius:2px;background:var(--viz-track);
}
.sim__c input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:22px;height:22px;margin-top:-8px;border-radius:50%;
  background:var(--gold);border:2px solid var(--ink);
}
.sim__c input[type=range]::-moz-range-thumb{
  width:22px;height:22px;border-radius:50%;
  background:var(--gold);border:2px solid var(--ink);
}
.sim__c input[type=text]{
  width:100%;background:transparent;
  border:0;border-bottom:1px solid rgba(35,46,38,.22);border-radius:0;
  padding:6px 0 9px;font-family:var(--body);font-size:1.05rem;color:var(--bone);
}
.sim__c input[type=text]:focus{outline:none;border-bottom-color:var(--gold)}
.sim__c input[type=text]::placeholder{color:#8A9488}

.sim__opts{display:flex;gap:8px;flex-wrap:wrap}
.sim__opts button{
  cursor:pointer;background:transparent;color:var(--muted);
  border:1px solid var(--hair);border-radius:2px;
  padding:9px 16px;font-family:var(--display);font-weight:500;font-size:.86rem;
  transition:background .25s var(--ease),color .25s var(--ease);
}
.sim__opts button.is-on{background:var(--gold);border-color:var(--gold);color:var(--ink)}

.sim__out{margin-top:clamp(28px,3.4vw,40px);padding-top:clamp(24px,3vw,32px);border-top:1px solid var(--hair)}
.sim__bar{display:flex;gap:2px;height:24px;margin-bottom:12px}
.sim__seg{height:100%;border-radius:2px;transition:width .35s var(--ease)}
.sim__seg--pagan{background:var(--st-ok)}
.sim__seg--pones{background:var(--st-gap)}
.sim__leg{display:flex;gap:22px;flex-wrap:wrap;font-size:.86rem;color:var(--muted)}
.sim__leg span{display:inline-flex;align-items:center;gap:8px}
.sim__k{width:11px;height:11px;border-radius:2px;display:inline-block}
.sim__k--pagan{background:var(--st-ok)}
.sim__k--pones{background:var(--st-gap)}

.sim__rows{margin:clamp(24px,3vw,32px) 0 0;display:grid;gap:0}
.sim__rows > div{
  display:flex;justify-content:space-between;align-items:baseline;gap:18px;
  padding:13px 0;border-bottom:1px solid var(--hair);
}
.sim__rows dt{font-size:.94rem;color:var(--muted)}
.sim__rows dd{
  margin:0;font-family:var(--display);font-weight:500;font-size:1.06rem;
  color:var(--text);white-space:nowrap;font-variant-numeric:tabular-nums;
}
.sim__row--ok dt,.sim__row--gap dt{color:var(--text)}
.sim__row--ok dd{color:var(--st-ok)}
.sim__row--gap{border-bottom:0}
.sim__row--gap dt{font-weight:500}
.sim__row--gap dd{
  font-family:var(--display);font-weight:400;
  font-size:clamp(1.5rem,3.2vw,2.2rem);color:var(--st-gap);letter-spacing:-.02em;
}
.sim__lectura{
  margin-top:clamp(22px,2.6vw,30px);padding-left:16px;
  border-left:1px solid var(--gold);
  font-size:.98rem;line-height:1.72;color:var(--text);max-width:64ch;
}
.sim__nota{margin-top:clamp(20px,2.4vw,26px);font-size:.8rem;line-height:1.65;color:var(--fine);max-width:74ch}

@media (max-width:700px){
  .sim__ctrls{grid-template-columns:minmax(0,1fr)}
  .sim__rows > div{flex-direction:column;align-items:flex-start;gap:4px}
}
@media print{ .sim__ctrls{display:none} .sim{break-inside:avoid} }

/* ============================================================
   CONTACTO DIRECTO
   Está en el HTML, no lo pinta el JavaScript: si algo falla, el
   teléfono y el correo siguen ahí. Es lo último que debe romperse.
   ============================================================ */

/* Cabecera */
.hdr__wa{
  display:inline-flex;align-items:center;gap:8px;
  margin-left:auto;padding:9px 14px;
  color:var(--gold);text-decoration:none;
  border:1px solid var(--line);border-radius:2px;
  font-family:var(--display);font-weight:600;
  font-size:.82rem;letter-spacing:.04em;white-space:nowrap;
  transition:background .25s var(--ease),color .25s var(--ease);
}
.hdr__wa:hover{background:rgba(79,107,76,.09);color:var(--gold-lt)}
.nav + .hdr__wa{margin-left:clamp(14px,2vw,26px)}
.hdr__wa + .btn{margin-left:12px}

/* Cierre */
.close__o{
  margin-top:clamp(26px,3vw,34px);
  font-family:var(--display);font-weight:500;
  font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
}
.close__wa{
  display:inline-flex;align-items:center;gap:11px;
  margin-top:14px;padding:15px 26px;
  color:var(--gold);text-decoration:none;
  border:1px solid var(--line);border-radius:2px;
  font-family:var(--display);font-weight:600;
  font-size:.86rem;letter-spacing:.08em;
  transition:background .25s var(--ease);
}
.close__wa:hover{background:rgba(79,107,76,.09)}

/* Pie */
.foot__contacto{
  margin-top:clamp(24px,3vw,32px);
  padding-top:clamp(20px,2.4vw,26px);
  border-top:1px solid var(--hair);
  display:flex;flex-direction:column;align-items:flex-start;gap:12px;
}
.foot__quien{font-size:.94rem;color:var(--muted)}
.foot__quien b{color:var(--bone);font-weight:600}
.foot__enl{
  display:inline-flex;align-items:center;gap:10px;
  color:var(--gold);text-decoration:none;font-size:.96rem;font-weight:500;
  transition:color .25s var(--ease);
}
.foot__enl:hover{color:var(--gold-lt);text-decoration:underline}
.foot__enl svg{flex:0 0 auto}
/* El correo es largo: en pantallas estrechas tiene que poder partirse
   o desborda la página entera. */
.foot__enl span{min-width:0;overflow-wrap:anywhere}

/* Dentro del asistente */
.chat__persona{
  display:flex;align-items:center;gap:10px;
  margin-top:14px;padding-top:14px;border-top:1px solid var(--hair);
  color:var(--gold);text-decoration:none;font-size:.9rem;font-weight:500;
}
.chat__persona:hover{color:var(--gold-lt);text-decoration:underline}

@media (max-width:900px){
  /* Con la navegación oculta, el WhatsApp se queda: es más importante. */
  .hdr__wa{margin-left:auto}
}
@media (max-width:600px){
  .hdr__wa span{display:none}      /* sólo el icono, para que quepa */
  .hdr__wa{padding:9px 11px}
}
@media print{
  .hdr__wa,.chat__persona{display:none !important}
  .close__wa,.foot__enl{color:#3C5439 !important}
}

/* ============================================================
   RESPONSIVE
   Regla de rejilla: nunca dejar 3+1 ni 5+1 con un hueco.
   Se baja de 4→2→1 y de 3→1 (nunca 3→2 si el total es 3).
   Va al final a propósito: aquí el orden es la especificidad.
   ============================================================ */
@media (max-width:1080px){
  .nav a:nth-child(n+4){display:none}
}
@media (max-width:980px){
  .hero__grid{grid-template-columns:minmax(0,1fr);gap:clamp(40px,6vw,56px);align-items:start}
  .four{grid-template-columns:repeat(2,minmax(0,1fr))}
  .volcs{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .nav{display:none}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:880px){
  .aud__grid,
  .prop,
  .volc__top,
  .gap-block{grid-template-columns:minmax(0,1fr)}
  .gap-block__k{
    border-right:0;border-bottom:1px solid var(--hair);
    padding-right:0;padding-bottom:clamp(22px,3vw,30px);
  }
  .volc__fig{border-left:0;border-top:1px solid var(--gold);padding-left:0;padding-top:24px}
}
@media (max-width:820px){
  .wear__grid,
  .zones{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:768px){
  .midcta--wide{flex-direction:column;align-items:flex-start}
  .trio{grid-template-columns:minmax(0,1fr)}
  .quake__grid,
  .gap__cards,
  .soils{grid-template-columns:minmax(0,1fr)}
  .gal{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gal__a,.gal__d{grid-column:span 2}
  .gal__b,.gal__c{grid-column:span 1}
  .gal__b,.gal__c{--ar:133.333%}
}
@media (max-width:700px){
  /* 21:9 en un móvil deja una rendija de 150 px: la foto deja de leerse.
     Se abre la proporción — el recorte lo absorbe object-fit. */
  .band__frame::before{padding-top:62.5%}
  .split{grid-template-columns:minmax(0,1fr);gap:26px}
  .split__arrow{transform:rotate(90deg);justify-self:center;padding:0}
  .split__stack{height:clamp(200px,52vw,260px)}
  .promises--row{grid-template-columns:minmax(0,1fr);gap:12px}
  .verdict__row{grid-template-columns:minmax(0,1fr);gap:8px}
  .verdict__v,.verdict__n,.verdict__chip{grid-column:1}
  .out{grid-template-columns:minmax(0,1fr);gap:10px}
  .out__n{padding-top:0}
  .pair{grid-template-columns:minmax(0,1fr);gap:16px}
  .pair__arrow{transform:rotate(90deg);justify-self:center}
  .foot__in{grid-template-columns:minmax(0,1fr)}
  .foot__r{text-align:left}
  .foot__legal{margin-left:0}
}
@media (max-width:600px){
  :root{--hdr:64px}
  .hero{padding-top:calc(var(--hdr) + 40px)}
  .hero h1{font-size:clamp(2.05rem,7.4vw,4.9rem)}
  .hero h1 span{line-height:1.12}
  .brand__sub{display:none}
  .four,
  .volcs,
  .ten__grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:520px){
  .gapform{grid-template-columns:minmax(0,1fr);align-items:stretch}
  .stats{grid-template-columns:minmax(0,1fr)}
  .stat p{max-width:38ch}
  .quote{max-width:18ch}
}
@media (max-width:400px){
  /* En pantallas muy estrechas no caben marca + WhatsApp + botón.
     El botón se va: la barra fija de abajo ya ofrece esa acción, y
     tener el teléfono a la vista importa más. */
  .hdr .btn--sm{display:none}
  .brand__mark{font-size:.94rem}
  .row2{grid-template-columns:minmax(0,1fr)}
  .btn{padding:14px 20px;font-size:.78rem;letter-spacing:.12em}
  .btn--block{padding:17px 18px;font-size:.84rem}
  .gauge__top{gap:8px}
}

/* ============================================================
   MOVIMIENTO REDUCIDO
   Sólo se apaga el parallax. Los revelados SIGUEN mostrando el
   contenido: Windows trae esta preferencia activada de fábrica y
   ocultar los bloques dejaría la página en blanco para mucha gente.
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .bg__wash,
  .bg__rings{transform:none !important;transition:none}
  html{scroll-behavior:auto}
}

/* ============================================================
   IMPRESIÓN · la página debe salir a PDF sin tarjetas partidas
   y sin la cabecera fija repitiéndose en cada hoja.
   ============================================================ */
@media print{
  :root{--sec:26px;--pad:0}
  html,body{background:#fff !important;color:#111 !important}
  .bg,.hdr,.skip,.nav,.btn,.gal__cap,.stickycta{display:none !important}
  main{padding-top:0 !important}
  .hero{padding-top:0}
  .sec{padding-block:26px;break-inside:auto}
  .sec + .sec{border-top:1px solid #ccc}
  h1,h2,h3,h4,.figure-xl,.stat__n,.prop__fig,.ten__n,.kicker,.quote,
  .pair__v,.quake__mag,.soil__last,.prop__last{color:#111 !important}
  .eyebrow,.tag,.pill,.zone__t,.prop__k,.ten__k,.bar__label,.gold,
  .numcard__n,.gauge__count,.soil__k,.pair__k{color:#3C5439 !important}
  p,li,.p,.lead,.note,.src,.stat p,.zone p,.volc p{color:#333 !important}
  .band__cap,.result__legal,.result__ask{color:#555 !important}
  .result__range,.gapout__v,.out__n,.result__k,.out__when--now{color:#3C5439 !important}
  .result__panel,.result__gap,.result__pending,.out{break-inside:avoid;page-break-inside:avoid}
  .result{border-top-color:#3C5439 !important}
  .more[open] .more__b,.more__b{display:block !important}
  .more__s{color:#3C5439 !important}
  .bullets b{color:#111 !important}
  .verdict__row,.reco,.midcta,.handoff,.split{break-inside:avoid;page-break-inside:avoid}
  .split__b--con{background:#A35612 !important;color:#fff !important}
  .split__b--dem{background:#7C3900 !important;color:#fff !important}
  .split__b--ter{background:#E0D6C4 !important;color:#111 !important}
  .verdict__chip{color:#fff !important}
  .handoff{display:none !important}
  .rchart,.stat__meter,.ramp{break-inside:avoid;page-break-inside:avoid}
  .rchart__lab,.ramp__t,.soil__amp{color:#555 !important}
  .rchart__num,.ramp__i{color:#222 !important}
  .card,.quake,.numcard,.zone,.volc,.gauge,.form-card,.soil__box,
  .gap-block,.good,.ten,.pair__c,.gal__it,.stat,.four__it,.wear__it,.band{
    break-inside:avoid;page-break-inside:avoid;
    background:#fff !important;border-color:#d5d5d5 !important;
  }
  .gal{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gal__it{break-inside:avoid}
  .js .reveal{opacity:1 !important;transform:none !important}
  a[href^="#"]{text-decoration:none}
  .foot{border-top:1px solid #ccc}
}