/* ═══════════════════════════════════════════════════════════════════════
   style-landing.css — hoja ÚNICA de la landing BIG (/big.html).
   NO se carga junto a style.css: la landing usa layouts/landing.njk, que
   deliberadamente no trae el chrome del sitio. Por eso este archivo
   redeclara los tokens en vez de heredarlos — es autónomo a propósito.
   Los valores son los mismos que en web/style.css: si cambias la paleta
   allí, cámbiala aquí.
   Ojo: aquí html{font-size:16px}, no el 62.5% del sitio. Los rem de este
   archivo NO son intercambiables con los del resto de la web.
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══════════ TOKENS ═══════════ */
:root{
  --bg-base:#F7F8FA; --bg-surface:#FFFFFF; --bg-subtle:#EEF0F4;
  --text-primary:#111318; --text-secondary:#2D3240; --text-muted:#5B6375;
  --accent:#B8391C; --accent-hover:#9C2F16; --accent-teal:#D4622A; --accent-light:#FAECEA;
  --border:#DDE1E9;
  --font-display:'DM Serif Display',Georgia,serif;
  --font-body:'Inter',system-ui,-apple-system,sans-serif;
  --container-max:1240px; --pad:clamp(1.25rem,5vw,2.5rem);
  --radius-sm:4px; --radius-md:8px;
  --shadow-sm:0 1px 4px rgba(0,0,0,.06); --shadow-md:0 4px 16px rgba(0,0,0,.08);
  --shadow-lg:0 12px 40px rgba(0,0,0,.12);
  --ease:cubic-bezier(.4,0,.2,1);
  /* tipografía AMPLIADA para este landing */
  --type-mega:clamp(3.2rem,11vw,9rem);
  --type-statement:clamp(2.2rem,6.5vw,5rem);
  --type-h2:clamp(2rem,4.5vw,3.4rem);
  --type-lead:clamp(1.15rem,2.2vw,1.65rem);
  --type-body:clamp(1.05rem,1.5vw,1.25rem);
}
:root[data-theme="dark"]{
  --bg-base:#1a1a1a; --bg-surface:#2d2d2d; --bg-subtle:#333;
  --text-primary:#f5f5f5; --text-secondary:#e0e0e0; --text-muted:#b0b0b0;
  --accent-light:#2a1410; --border:#444;
  --shadow-sm:0 1px 4px rgba(0,0,0,.25); --shadow-md:0 4px 16px rgba(0,0,0,.35);
  --shadow-lg:0 12px 40px rgba(0,0,0,.5);
}
*{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth}
body{
  font-family:var(--font-body); background:var(--bg-base); color:var(--text-primary);
  line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden;
  padding-bottom:84px; /* hueco para la barra fija */
}
.container{max-width:var(--container-max);margin-inline:auto;padding-inline:var(--pad)}
.narrow{max-width:880px}

/* ═══════════ LOGO: BIG grande / lobster susurro ═══════════ */
.logo{display:inline-flex;align-items:baseline;gap:.5rem;text-decoration:none;color:inherit;line-height:1}
.logo__big{font-family:var(--font-display);font-size:1em;letter-spacing:-.03em;color:var(--text-primary)}
.logo--stack{flex-direction:column;align-items:center;gap:.06em}
/* letter-spacing mete un hueco al final: text-indent igual lo recentra */
.logo--stack .logo__small{transform:none;font-size:.2em;letter-spacing:.52em;text-indent:.52em;opacity:.5}
.logo__small{
  font-family:var(--font-body);font-size:.17em;font-weight:600;
  letter-spacing:.42em;text-transform:uppercase;color:var(--text-muted);opacity:.55;
  transform:translateY(-.15em)
}

/* ═══════════ NAV mínima ═══════════ */
.nav{
  position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--bg-base) 88%,transparent);
  backdrop-filter:blur(12px);border-bottom:1px solid transparent;transition:border-color .3s var(--ease)
}
.nav.is-stuck{border-bottom-color:var(--border)}
.nav__in{display:flex;align-items:center;justify-content:space-between;padding-block:1.1rem}
.nav__logo{display:inline-flex;align-items:center;color:var(--text-primary);text-decoration:none;transition:opacity .2s var(--ease)}
.nav__logo:hover{opacity:.65}
.nav__wa{
  display:inline-flex;align-items:center;gap:.5rem;background:#25D366;color:#fff;
  text-decoration:none;font-weight:600;font-size:1rem;padding:.7rem 1.3rem;border-radius:999px;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease)
}
.nav__wa:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(37,211,102,.35)}

/* ═══════════ HERO ═══════════ */
.hero{padding-block:clamp(4rem,12vh,9rem) clamp(3rem,8vh,6rem);text-align:center;position:relative}
.hero__mark{font-size:var(--type-mega);margin-bottom:2.5rem;display:inline-flex}
.hero h1{
  font-family:var(--font-display);font-size:var(--type-statement);line-height:1.05;
  letter-spacing:-.02em;max-width:16ch;margin-inline:auto;margin-bottom:1.8rem
}
.hero__sub{
  font-size:var(--type-lead);color:var(--text-secondary);max-width:30ch;
  margin-inline:auto;line-height:1.55
}
.hero__cta{margin-top:3rem;display:flex;flex-wrap:wrap;gap:1rem;justify-content:center}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  font-weight:600;font-size:1.15rem;padding:1.15rem 2.4rem;border-radius:999px;
  text-decoration:none;border:2px solid transparent;cursor:pointer;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),background .2s var(--ease)
}
.btn--primary{background:var(--accent);color:#fff}
.btn--primary:hover{background:var(--accent-hover);transform:translateY(-2px);box-shadow:0 10px 28px rgba(184,57,28,.32)}
.btn--ghost{border-color:var(--border);color:var(--text-primary);background:transparent}
.btn--ghost:hover{border-color:var(--accent);color:var(--accent)}
.btn--lg{font-size:1.3rem;padding:1.35rem 3rem;width:100%;max-width:420px}

/* ═══════════ SECCIONES DE RELATO ═══════════ */
.act{padding-block:clamp(5rem,14vh,10rem)}
.act--alt{background:var(--bg-subtle)}
.act--dark{background:var(--text-primary);color:#fff}
.act--dark .kicker{color:rgba(255,255,255,.55)}
.kicker{
  font-size:0.9rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent);margin-bottom:1.6rem
}
.statement{
  font-family:var(--font-display);font-size:var(--type-statement);line-height:1.08;
  letter-spacing:-.02em;max-width:18ch
}
.statement em{font-style:italic;color:var(--accent)}
.act--dark .statement em{color:var(--accent-teal)}
.lead{font-size:var(--type-lead);color:var(--text-secondary);max-width:44ch;margin-top:2rem;line-height:1.6}
.act--dark .lead{color:rgba(255,255,255,.75)}

/* lista de dolores */
.pains{list-style:none;margin-top:3.5rem;display:grid;gap:0}
.pains li{
  font-family:var(--font-display);font-size:clamp(1.6rem,4vw,3rem);line-height:1.25;
  padding-block:1.6rem;border-top:1px solid var(--border);display:flex;align-items:baseline;gap:1.2rem
}
.pains li:last-child{border-bottom:1px solid var(--border)}
.pains span{
  font-family:var(--font-body);font-size:0.9rem;font-weight:700;color:var(--accent);
  letter-spacing:.1em;flex:0 0 auto
}

/* tres verdades */
.truths{display:grid;gap:2.5rem;margin-top:4rem}
@media(min-width:768px){.truths{grid-template-columns:repeat(3,1fr);gap:3rem}}
.truth__icon{font-size:2.8rem;line-height:1;margin-bottom:1.2rem;display:block}
.truth h3{font-family:var(--font-display);font-size:clamp(1.5rem,2.5vw,2rem);font-weight:400;margin-bottom:.7rem;line-height:1.2}
.truth p{font-size:var(--type-body);color:rgba(255,255,255,.7);line-height:1.6}

/* ═══════════ SELECTOR DE AGENTES ═══════════ */
.agents{display:grid;gap:1.6rem;margin-top:3.5rem}
@media(min-width:900px){.agents{grid-template-columns:repeat(2,1fr)}}
.agent{
  position:relative;background:var(--bg-surface);border:2px solid var(--border);
  border-radius:16px;padding:2.2rem 2rem;cursor:pointer;text-align:left;width:100%;
  font-family:inherit;color:inherit;display:block;
  transition:border-color .2s var(--ease),transform .2s var(--ease),box-shadow .2s var(--ease)
}
.agent:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--text-muted)}
.agent[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-light);box-shadow:var(--shadow-md)}
.agent__top{display:flex;align-items:flex-start;gap:1.2rem;margin-bottom:1rem}
.agent__icon{font-size:2.6rem;line-height:1;flex:0 0 auto}
.agent__job{
  font-family:var(--font-display);font-size:clamp(1.45rem,2.6vw,2rem);line-height:1.15;
  letter-spacing:-.01em;margin-bottom:.35rem
}
.agent__code{font-size:0.9rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted)}
.agent__desc{font-size:1.05rem;color:var(--text-secondary);line-height:1.6;margin-bottom:1.5rem}
.agent__foot{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.agent__price{font-family:var(--font-display);font-size:clamp(1.6rem,3vw,2.2rem);color:var(--accent);line-height:1}
.agent__price small{font-family:var(--font-body);font-size:.95rem;font-weight:500;color:var(--text-muted)}
.agent__pick{
  display:inline-flex;align-items:center;gap:.5rem;font-weight:600;font-size:1rem;
  border:2px solid var(--border);border-radius:999px;padding:.6rem 1.4rem;color:var(--text-secondary);
  transition:all .2s var(--ease)
}
.agent[aria-pressed="true"] .agent__pick{background:var(--accent);border-color:var(--accent);color:#fff}
.agent__check{
  position:absolute;top:1.2rem;right:1.2rem;width:30px;height:30px;border-radius:50%;
  background:var(--accent);color:#fff;display:none;align-items:center;justify-content:center;
  font-size:1rem;font-weight:700
}
.agent[aria-pressed="true"] .agent__check{display:flex}

.agents__sep{grid-column:1/-1;margin-top:1.8rem;padding-top:2.4rem;border-top:2px solid var(--border);text-align:center}
.agents__sep h3{font-family:var(--font-display);font-size:clamp(1.6rem,3.4vw,2.4rem);line-height:1.15;margin-bottom:.5rem}
.agents__sep p{font-size:1.05rem;color:var(--text-muted)}
.agents__sep + .agent{grid-column:1/-1;max-width:600px;margin-inline:auto;width:100%}
.note{
  margin-top:2.8rem;padding:1.5rem 1.8rem;background:var(--bg-surface);
  border-left:4px solid var(--accent);border-radius:var(--radius-md);
  font-size:1.05rem;color:var(--text-secondary);line-height:1.65;max-width:60ch
}

/* ═══════════ BARRA FIJA ═══════════ */
.bar{
  position:fixed;left:0;right:0;bottom:0;z-index:80;
  background:var(--bg-surface);border-top:1px solid var(--border);
  box-shadow:0 -6px 28px rgba(0,0,0,.10);
  transform:translateY(110%);transition:transform .35s var(--ease)
}
.bar.is-open{transform:translateY(0)}
.bar__in{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding-block:1.1rem}
.bar__sum{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.bar__label{font-size:0.9rem;color:var(--text-muted);font-weight:500}
.bar__total{font-family:var(--font-display);font-size:clamp(1.5rem,3vw,2.1rem);line-height:1.1;color:var(--text-primary)}
.bar__total small{font-family:var(--font-body);font-size:.9rem;font-weight:500;color:var(--text-muted)}
.bar .btn{padding:.95rem 2rem;font-size:1.05rem;flex:0 0 auto}
@media(max-width:560px){
  .bar__total{font-size:1.35rem}
  .bar .btn{padding:.9rem 1.4rem;font-size:1rem}
}

/* ═══════════ FORMULARIO ═══════════ */
.form{max-width:620px;margin-top:3rem}
.field{margin-bottom:1.6rem}
.field label{display:block;font-weight:600;font-size:1.05rem;margin-bottom:.6rem}
.field input,.field textarea{
  width:100%;font-family:inherit;font-size:1.15rem;padding:1.1rem 1.3rem;
  border:2px solid var(--border);border-radius:12px;background:var(--bg-surface);color:var(--text-primary)
}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--accent)}
.recap{
  background:var(--accent-light);border-radius:12px;padding:1.6rem 1.8rem;margin-bottom:2rem;
  border:1px solid var(--accent)
}
.recap h3{font-size:1rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);margin-bottom:1rem}
.recap ul{list-style:none;display:grid;gap:.6rem}
.recap li{display:flex;justify-content:space-between;gap:1rem;font-size:1.05rem;color:var(--text-secondary)}
.recap li b{color:var(--text-primary);font-weight:600}
.recap__empty{font-size:1.05rem;color:var(--text-muted)}
.recap__total{margin-top:1.2rem;padding-top:1.2rem;border-top:1px solid var(--accent);display:flex;justify-content:space-between;align-items:baseline}
.recap__total b{font-family:var(--font-display);font-size:1.8rem;color:var(--accent)}

/* ═══════════ MÁS INFO ═══════════ */
.more{padding-block:clamp(3.5rem,7vh,5.5rem);text-align:center;border-top:1px solid var(--border)}
.more a{
  font-family:var(--font-display);font-size:clamp(1.4rem,3vw,2.2rem);color:var(--text-primary);
  text-decoration:none;border-bottom:2px solid var(--accent);padding-bottom:.25rem;
  transition:color .2s var(--ease)
}
.more a:hover{color:var(--accent)}
.more p{color:var(--text-muted);font-size:1.05rem;margin-top:1.2rem}

/* ═══════════ FOOTER ═══════════ */
.footer{background:var(--text-primary);color:#fff;padding-block:clamp(3.5rem,8vh,6rem)}
.footer__grid{display:grid;gap:3rem;align-items:center;justify-items:center;text-align:center}
@media(min-width:780px){.footer__grid{grid-template-columns:auto 1fr;justify-items:start;text-align:left;gap:4rem}}
.footer__qr{background:transparent;padding:0;border-radius:14px;line-height:0;overflow:hidden;box-shadow:0 8px 28px rgba(37,211,102,.28)}
.footer__qr svg{width:164px;height:164px;display:block}
.footer__qrcap{font-size:0.9rem;color:rgba(255,255,255,.6);margin-top:.9rem;text-align:center;display:block}
.footer .logo{font-size:3.4rem;margin-bottom:1.8rem}
.footer .logo__big{color:#fff}
.footer .logo__small{color:rgba(255,255,255,.55)}
.footer__links{display:flex;flex-direction:column;gap:1rem;align-items:center}
@media(min-width:780px){.footer__links{align-items:flex-start}}
.footer__link{
  display:inline-flex;align-items:center;gap:.7rem;color:#fff;text-decoration:none;
  font-size:1.3rem;font-weight:600;transition:color .2s var(--ease)
}
.footer__link:hover{color:var(--accent-teal)}
.footer__link span:first-child{font-size:1.6rem}
.footer__legal{
  margin-top:3.5rem;padding-top:1.8rem;border-top:1px solid rgba(255,255,255,.14);
  display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;justify-content:center;
  font-size:0.9rem;color:rgba(255,255,255,.45)
}
.footer__legal a{color:rgba(255,255,255,.45);text-decoration:none}
.footer__legal a:hover{color:rgba(255,255,255,.8);text-decoration:underline}

/* ═══════════ REVEAL ═══════════ */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.is-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}

/* ═══════════ FORMULARIO: estados añadidos al portar ═══════════ */
.field__opt{font-weight:400;color:var(--text-muted);font-size:.92em}
.field-hint{font-size:.95rem;color:var(--text-muted);margin-top:.5rem;line-height:1.5}
.field-error{font-size:.95rem;color:var(--accent);margin-top:.5rem;min-height:1.2em;font-weight:500}
.field input.invalid{border-color:var(--accent)}
.cf-turnstile{margin-bottom:1.6rem}
.form-success{
  background:var(--accent-light);border:2px solid var(--accent);border-radius:12px;
  padding:2rem;text-align:center
}
.form-success h3{font-family:var(--font-display);font-size:1.8rem;margin-bottom:.6rem;line-height:1.2}
.form-success p{font-size:1.05rem;color:var(--text-secondary);line-height:1.6}
.btn[disabled]{opacity:.6;cursor:progress}

/* Enlace de salto: obligatorio, la landing no hereda el del layout base */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:100;background:var(--accent);color:#fff;
  padding:1rem 1.6rem;border-radius:0 0 var(--radius-md) 0;font-weight:600;text-decoration:none
}
.skip-link:focus{left:0}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}