/* ==========================================================================
   Home v2 - componentes nuevos (CRO blueprint 2026-07-06)
   Depende de css/site-2026.css (tokens :root, nav, hero, buttons, trust,
   shead, bento, metrics, excl, final, footer, reveal). Aquí solo lo nuevo.
   ========================================================================== */

/* --- Zone-checker (hero + exclusividad): micro-captura de escasez --- */
.zone{background:linear-gradient(180deg,var(--ink-3),var(--ink-2));border:1px solid var(--line);
  border-radius:6px;padding:1.5rem;position:relative;overflow:hidden;
  box-shadow:0 40px 80px -30px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.04)}
.zone::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.5}
.zone__eyebrow{font-family:var(--font-display);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);display:flex;align-items:center;gap:.5rem}
.zone__eyebrow i{width:7px;height:7px;border-radius:50%;background:var(--jade);box-shadow:0 0 8px var(--jade);animation:pulse 1.8s ease-in-out infinite}
.zone h3{font-family:var(--font-display);font-weight:640;font-size:clamp(1.2rem,2vw,1.5rem);letter-spacing:-.02em;margin:1rem 0 .4rem}
.zone__hint{color:var(--taupe);font-size:.9rem;margin-bottom:1.2rem}
.zone__form{display:flex;flex-direction:column;gap:.7rem}
.zone__form input{width:100%;background:var(--ink);border:1px solid var(--line);border-radius:3px;
  padding:.85rem 1rem;color:var(--ivory);font-family:var(--font-body);font-size:.95rem;transition:border-color .2s}
.zone__form input::placeholder{color:var(--taupe-dim)}
.zone__form input:focus-visible{outline:none;border-color:var(--gold)}
.zone__form button{width:100%;justify-content:center}
.zone__legal{font-family:var(--font-display);font-size:.6rem;letter-spacing:.06em;text-transform:uppercase;color:var(--taupe-dim);margin-top:.3rem}
.zone__ok{display:none;text-align:center;padding:1.4rem 0}
.zone__ok svg{width:44px;height:44px;color:var(--jade);margin:0 auto .8rem}
.zone__ok b{font-family:var(--font-display);font-weight:620;font-size:1.15rem;color:var(--ivory);display:block;margin-bottom:.4rem}
.zone__ok span{color:var(--taupe);font-size:.9rem}
.zone.sent .zone__form,.zone.sent .zone__hint,.zone.sent .zone__legal{display:none}
.zone.sent .zone__ok{display:block}
/* muestra de zonas dentro del checker */
.zone__sample{margin-top:1.2rem;padding-top:1.1rem;border-top:1px solid var(--line-2)}
.zslot{display:flex;align-items:center;justify-content:space-between;padding:.5rem 0;font-size:.85rem}
.zslot__p{color:var(--ivory)}
.zslot__s{font-family:var(--font-display);font-size:.64rem;letter-spacing:.08em;text-transform:uppercase}
.zslot__s.taken{color:var(--taupe-dim)}.zslot__s.open{color:var(--jade)}
.zslot__s .sq{display:inline-block;width:6px;height:6px;margin-right:.4rem;border-radius:1px;vertical-align:middle}
.zslot__s.taken .sq{background:var(--taupe-dim)}.zslot__s.open .sq{background:var(--jade);box-shadow:0 0 8px var(--jade)}
.zone__samplelbl{display:block;font-family:var(--font-display);font-weight:600;font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--taupe-dim);margin-bottom:.45rem}
.zone__cities{font-family:var(--font-display);font-weight:500;font-size:.9rem;line-height:1.5;color:var(--taupe)}
.zone__cities b{color:var(--ivory)}
.zone.sent .zone__sample{display:none}


/* --- Problema: dolores en primera persona --- */
.pains{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line-2);border:1px solid var(--line-2);border-radius:6px;overflow:hidden}
@media(min-width:720px){.pains{grid-template-columns:1fr 1fr}}
.pain{background:var(--ink);padding:clamp(1.3rem,2.4vw,1.8rem);display:flex;gap:.9rem;align-items:flex-start}
.pain svg{width:20px;height:20px;color:var(--gold);flex:none;margin-top:.15rem;opacity:.85}
.pain p{color:var(--ivory);font-size:1rem;line-height:1.5}
.pain p b{color:var(--gold);font-weight:600}

/* --- Agitación / stakes --- */
.stakes{background:linear-gradient(180deg,var(--ink-2),var(--ink));border-block:1px solid var(--line-2)}
.stakes__lead{font-family:var(--font-display);font-weight:600;font-size:clamp(1.6rem,3.6vw,2.6rem);line-height:1.14;letter-spacing:-.02em;color:var(--ivory);max-width:24ch}
.stakes__lead .m{color:var(--gold)}
.costs{display:grid;grid-template-columns:1fr;gap:1.2rem;margin-top:clamp(2rem,4vw,3rem)}
@media(min-width:720px){.costs{grid-template-columns:repeat(3,1fr)}}
.cost{padding-left:1.2rem;border-left:2px solid var(--gold)}
.cost b{font-family:var(--font-display);color:var(--ivory);font-weight:600;font-size:1.05rem;display:block;margin-bottom:.35rem}
.cost span{color:var(--taupe);font-size:.92rem}

/* --- Value stack: checklist "qué instalamos" --- */
.stack{display:grid;grid-template-columns:1fr;gap:.1rem}
@media(min-width:720px){.stack{grid-template-columns:1fr 1fr;column-gap:2.5rem}}
.stack__i{display:flex;gap:.8rem;align-items:flex-start;padding:.85rem 0;border-bottom:1px solid var(--line-2)}
.stack__i svg{width:20px;height:20px;color:var(--gold);flex:none;margin-top:.15rem}
.stack__i p{color:var(--ivory);font-size:.98rem;line-height:1.45}
.stack__i .bonus{font-family:var(--font-display);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:var(--jade);border:1px solid rgba(143,203,166,.3);border-radius:2px;padding:.1rem .4rem;margin-left:.4rem;white-space:nowrap}
.stack__note{margin-top:2rem;padding:1.3rem 1.5rem;background:var(--ink-2);border:1px solid var(--line);border-radius:6px}
.stack__note b{color:var(--ivory);font-family:var(--font-display);font-weight:600}
.stack__note p{color:var(--taupe);font-size:.92rem;margin-top:.4rem}

/* --- Timeline: cómo lo implementamos --- */
.steps{display:grid;grid-template-columns:1fr;gap:1.5rem;counter-reset:step}
@media(min-width:760px){.steps{grid-template-columns:repeat(3,1fr);gap:2rem}}
.step{position:relative;padding-top:3.2rem}
.step::before{counter-increment:step;content:counter(step);position:absolute;top:0;left:0;
  width:2.4rem;height:2.4rem;display:grid;place-items:center;border-radius:50%;
  background:var(--gold);color:#1a1204;font-family:var(--font-display);font-weight:680;font-size:1.1rem}
.step h3{font-family:var(--font-display);font-weight:620;font-size:1.2rem;margin-bottom:.5rem}
.step p{color:var(--taupe);font-size:.95rem}
.step p b{color:var(--gold);font-weight:600}

/* --- Antes / Después --- */
.ba{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line-2);border:1px solid var(--line-2);border-radius:6px;overflow:hidden}
@media(min-width:760px){.ba{grid-template-columns:1fr 1fr}}
.ba__col{padding:clamp(1.6rem,3vw,2.4rem)}
.ba__col--before{background:var(--ink)}
.ba__col--after{background:linear-gradient(180deg,var(--ink-2),var(--ink-3))}
.ba__tag{font-family:var(--font-display);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:1.2rem;display:block}
.ba__col--before .ba__tag{color:var(--taupe-dim)}
.ba__col--after .ba__tag{color:var(--gold)}
.ba__col li{display:flex;gap:.7rem;align-items:flex-start;padding:.6rem 0;font-size:.96rem;line-height:1.45}
.ba__col--before li{color:var(--taupe)}
.ba__col--after li{color:var(--ivory)}
.ba__col li svg{width:17px;height:17px;flex:none;margin-top:.2rem}
.ba__col--before li svg{color:var(--taupe-dim)}
.ba__col--after li svg{color:var(--jade)}

/* --- Comparación vs alternativas --- */
.cmp{overflow-x:auto;border:1px solid var(--line-2);border-radius:6px}
.cmp table{width:100%;border-collapse:collapse;min-width:640px;font-size:.9rem}
.cmp th,.cmp td{padding:.9rem 1rem;text-align:left;border-bottom:1px solid var(--line-2)}
.cmp thead th{font-family:var(--font-display);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--taupe);font-weight:500;background:var(--ink-2)}
.cmp thead th:first-child{color:var(--gold)}
.cmp tbody td:first-child{color:var(--ivory);font-weight:500}
.cmp td.mdi{color:var(--jade);font-weight:600;background:rgba(253,173,0,.04)}
.cmp td.mid{color:var(--taupe)}
.cmp td.no{color:var(--taupe-dim)}
.cmp tr.star td:first-child{color:var(--gold)}
.cmp tr.star td.mdi{background:rgba(253,173,0,.09)}
.cmp .colhead-mdi{color:#1a1204 !important;background:var(--gold) !important}

/* --- Para quién sí / no --- */
.fit{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line-2);border:1px solid var(--line-2);border-radius:6px;overflow:hidden}
@media(min-width:760px){.fit{grid-template-columns:1fr 1fr}}
.fit__col{padding:clamp(1.6rem,3vw,2.4rem);background:var(--ink)}
.fit__tag{font-family:var(--font-display);font-weight:620;font-size:1.15rem;margin-bottom:1.2rem;display:flex;align-items:center;gap:.6rem}
.fit__col--yes .fit__tag{color:var(--jade)}
.fit__col--no .fit__tag{color:var(--taupe)}
.fit__col li{display:flex;gap:.7rem;align-items:flex-start;padding:.55rem 0;font-size:.96rem;color:var(--ivory);line-height:1.45}
.fit__col--no li{color:var(--taupe)}
.fit__col li svg{width:18px;height:18px;flex:none;margin-top:.15rem}
.fit__col--yes li svg{color:var(--jade)}
.fit__col--no li svg{color:var(--taupe-dim)}

/* --- Garantía / reversión de riesgo --- */
.guar{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line-2);border:1px solid var(--line-2);border-radius:6px;overflow:hidden;margin-top:clamp(2rem,4vw,3rem)}
@media(min-width:760px){.guar{grid-template-columns:repeat(3,1fr)}}
.guar__c{background:var(--ink);padding:clamp(1.5rem,2.6vw,2.1rem)}
.guar__c svg{width:26px;height:26px;color:var(--gold);margin-bottom:1rem}
.guar__c h3{font-family:var(--font-display);font-weight:620;font-size:1.15rem;margin-bottom:.5rem}
.guar__c p{color:var(--taupe);font-size:.93rem;line-height:1.5}

/* --- FAQ accordion --- */
.faq{max-width:820px}
.faq details{border-bottom:1px solid var(--line-2)}
.faq summary{list-style:none;cursor:pointer;padding:1.3rem 0;display:flex;justify-content:space-between;align-items:center;gap:1rem;
  font-family:var(--font-display);font-weight:600;font-size:clamp(1.05rem,1.6vw,1.2rem);color:var(--ivory);transition:color .2s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--gold)}
.faq summary .ico{flex:none;width:22px;height:22px;position:relative;transition:transform .3s}
.faq summary .ico::before,.faq summary .ico::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--gold)}
.faq summary .ico::before{width:14px;height:2px}
.faq summary .ico::after{width:2px;height:14px;transition:transform .3s}
.faq details[open] summary .ico::after{transform:translate(-50%,-50%) scaleY(0)}
.faq details p{color:var(--taupe);font-size:.98rem;line-height:1.6;padding:0 0 1.4rem;max-width:70ch}
.faq details p b{color:var(--ivory);font-weight:600}

/* --- Lead magnet band (captura secundaria, subordinada) --- */
.magnet{background:var(--ink-2);border:1px dashed var(--line);border-radius:6px;padding:clamp(1.8rem,3.5vw,2.6rem);
  display:grid;grid-template-columns:1fr;gap:1.5rem;align-items:center}
@media(min-width:820px){.magnet{grid-template-columns:1.3fr .7fr}}
.magnet__eyebrow{font-family:var(--font-display);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--taupe-dim);margin-bottom:.7rem}
.magnet h3{font-family:var(--font-display);font-weight:620;font-size:clamp(1.3rem,2.4vw,1.7rem);letter-spacing:-.02em;margin-bottom:.5rem}
.magnet p{color:var(--taupe);font-size:.95rem;max-width:44ch}
.magnet__form{display:flex;flex-direction:column;gap:.7rem}
.magnet__form input{background:var(--ink);border:1px solid var(--line);border-radius:3px;padding:.8rem 1rem;color:var(--ivory);font-family:var(--font-body);font-size:.92rem}
.magnet__form input:focus-visible{outline:none;border-color:var(--gold)}
.magnet__ok{display:none;color:var(--jade);font-size:.92rem;font-family:var(--font-display);letter-spacing:.04em}
.magnet.sent .magnet__form{display:none}.magnet.sent .magnet__ok{display:block}

/* --- Autoridad --- */
.auth{max-width:60ch}
.auth h2 .m{color:var(--gold)}
.auth p{color:var(--taupe);font-size:clamp(1rem,1.35vw,1.15rem);line-height:1.65;margin-top:1.2rem}
.auth p b{color:var(--ivory);font-weight:600}

/* --- Autoridad con cara (design critique 2026-07-09) --- */
.authgrid{display:grid;grid-template-columns:1fr;gap:clamp(2.2rem,4.5vw,4rem);align-items:center}
@media(min-width:900px){.authgrid{grid-template-columns:1.15fr .85fr}}
.auth__more{display:inline-block;margin-top:1.4rem;font-family:var(--font-display);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);transition:color .2s}
.auth__more:hover{color:var(--gold-hi)}
.auth__ph{margin:0;justify-self:center;text-align:center}
@media(min-width:900px){.auth__ph{justify-self:end}}
.auth__ph img{width:min(300px,72vw);height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:50%;border:1px solid var(--line);
  background:var(--ink-2);box-shadow:0 28px 64px -30px rgba(32,26,17,.25)}
.auth__ph figcaption{margin-top:.9rem;font-family:var(--font-display);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--taupe-dim)}

/* --- Trust v3: reseña Google + nombres (design critique 2026-07-10) --- */
.tq{display:grid;grid-template-columns:1fr;gap:1.8rem;align-items:center}
@media(min-width:860px){.tq{grid-template-columns:1.2fr .8fr}}
.tq__quote p{font-family:var(--font-display);font-weight:600;font-size:clamp(1.25rem,2.2vw,1.7rem);line-height:1.3;letter-spacing:-.015em;color:var(--ivory)}
.tq__quote p .m{color:var(--gold)}
.tq__src{margin-top:.9rem;color:var(--taupe-dim)}
.tq__stars{color:var(--gold);letter-spacing:.15em}
.tq__names{justify-self:start}
@media(min-width:860px){.tq .tq__names{justify-self:end;text-align:right}}
.tq__label{display:block;margin-bottom:.8rem;color:var(--taupe-dim)}
.tq__list{font-family:var(--font-display);font-weight:640;font-size:1.15rem;color:var(--ivory);line-height:1.7}

/* --- Tweak 2026-07-07: hero title más pequeño (feedback Jesús) --- */
.hero h1{font-size:clamp(2.05rem,4.2vw,3.8rem);line-height:1.02;letter-spacing:-.03em}

/* ====== GRÁFICO 1 · Terminal del hero (home) — panel dark "instrumento" ====== */
.term{background:linear-gradient(180deg,#1B1610,#13100A);border:1px solid rgba(244,236,221,.10);border-radius:10px;
  box-shadow:0 40px 80px -30px rgba(32,26,17,.4),inset 0 1px 0 rgba(255,255,255,.04);overflow:hidden;position:relative}
.term::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,#FDAD00,transparent);opacity:.5}
.term__bar{display:flex;align-items:center;gap:.55rem;padding:.85rem 1.1rem;border-bottom:1px solid rgba(244,236,221,.06)}
.term__dot{width:11px;height:11px;border-radius:50%}
.term__dot.r{background:#ED6A5E}.term__dot.y{background:#F5C14E}.term__dot.g{background:#61C554}
.term__title{margin-left:.5rem;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.08em;color:#7C7362}
.term__live{margin-left:auto;display:inline-flex;align-items:center;gap:.4rem;font-family:var(--font-mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:#8FCBA6}
.term__live i{width:6px;height:6px;border-radius:50%;background:#8FCBA6;box-shadow:0 0 8px #8FCBA6;animation:pulse 1.8s ease-in-out infinite}
.term__body{padding:1.3rem 1.3rem 1.5rem;font-family:var(--font-mono);font-size:.84rem;line-height:1.9}
/* El terminal no debe ensanchar la página NI mostrar barra: se limita al ancho y en móvil
   la fuente escala (clamp) para que las líneas quepan; overflow:hidden garantiza cero scrollbar. */
.term{max-width:100%;overflow:hidden}
@media(max-width:600px){
  .term__body{font-size:clamp(.55rem,2.75vw,.82rem);padding:1.1rem 1rem 1.25rem;line-height:1.75}
  .term__body .ms{padding-left:.5rem}
}
.term__body .tl{display:flex;gap:.6rem;white-space:nowrap;opacity:0;transform:translateY(4px);animation:tlin .35s ease forwards}
.term__body .pr{color:#FDAD00}.term__body .ck{color:#8FCBA6}.term__body .tx{color:#F4ECDD}
.term__body .ms{color:#FFCB57;margin-left:auto;padding-left:1.2rem}
.term__body .tl.hl{margin-top:.5rem;align-items:flex-start}.term__body .tl.hl .tx,.term__body .tl.hl .pr{color:#FFCB57;font-weight:600}
.term__body .tl.dim{margin-top:.6rem}.term__body .tl.dim .tx,.term__body .tl.dim .pr{color:#7C7362}
.term__body .tl.st .tx{color:#8FCBA6;font-weight:600}
.term__body .tl:nth-child(1){animation-delay:.15s}.term__body .tl:nth-child(2){animation-delay:.55s}
.term__body .tl:nth-child(3){animation-delay:.95s}.term__body .tl:nth-child(4){animation-delay:1.35s}
.term__body .tl:nth-child(5){animation-delay:1.75s}.term__body .tl:nth-child(6){animation-delay:2.15s}
.term__body .tl:nth-child(7){animation-delay:2.55s}.term__body .tl:nth-child(8){animation-delay:3.1s}
.term__body .tl:nth-child(9){animation-delay:3.4s}
@keyframes tlin{to{opacity:1;transform:none}}
.term__foot{padding:.7rem 1.3rem;border-top:1px solid rgba(244,236,221,.06);font-family:var(--font-mono);font-size:.6rem;letter-spacing:.06em;text-transform:uppercase;color:#7C7362}
@media(prefers-reduced-motion:reduce){.term__body .tl{opacity:1;transform:none;animation:none}}

/* ====== GRÁFICO 2 · Flujo horizontal (inmosystem, "Cómo funciona") ====== */
.flow{display:flex;align-items:flex-start;gap:0;overflow-x:auto;padding-bottom:1rem;margin-top:1rem}
.fnode{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;text-align:center;width:120px}
.fnode__c{width:66px;height:66px;border-radius:50%;display:grid;place-items:center;background:var(--ink-3);
  border:2px solid var(--gold);box-shadow:0 12px 30px -14px rgba(173,123,0,.5);transition:transform .3s}
.fnode__c svg{width:28px;height:28px;color:var(--gold);stroke-width:1.7}
.fnode.wa .fnode__c{border-color:var(--jade);box-shadow:0 12px 30px -14px rgba(33,122,80,.5)}
.fnode.wa .fnode__c svg{color:var(--jade)}
.fnode.end .fnode__c{background:#FDAD00;border-color:#FDAD00;box-shadow:0 14px 34px -12px rgba(253,173,0,.6)}
.fnode.end .fnode__c svg{color:#231a0a}
.fnode__l{margin-top:.9rem;font-family:var(--font-display);font-weight:620;font-size:.92rem;color:var(--ivory);line-height:1.2}
.fnode__s{margin-top:.2rem;font-family:var(--font-display);font-weight:600;font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:var(--taupe-dim)}
.fnode.end .fnode__l{color:var(--gold)}
.farrow{flex:1 1 auto;min-width:30px;height:66px;display:flex;align-items:center}
.farrow::before{content:'';flex:1;height:0;border-top:2px dashed var(--gold);opacity:.5}
.farrow::after{content:'';width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:7px solid var(--gold);opacity:.7;margin-left:-1px}
@media(max-width:720px){
  .flow{flex-direction:column;align-items:center;overflow:visible}
  .fnode{width:auto}
  .farrow{width:auto;min-width:0;height:auto;flex-direction:column;justify-content:center;gap:5px;padding:.4rem 0}
  .farrow::before{flex:0 0 auto;width:0;height:20px;border-top:0;border-left:2px dashed var(--gold)}
  .farrow::after{transform:rotate(90deg);margin-left:0}
}

/* Consent RGPD en formularios (compartido; también existe en pages-2026.css) */
.check{display:flex;gap:.65rem;align-items:flex-start;font-size:.82rem;color:var(--taupe);line-height:1.45}
.check input{width:16px;height:16px;margin-top:.2rem;accent-color:var(--gold);flex:none}
.check a{color:var(--gold);text-decoration:underline;text-underline-offset:2px}