/* ============================================================================
   DRIMERS — Sistema de diseño compartido (funnel público: página madre, Motor,
   Canal, onboarding). NO se carga desde ningún archivo del OS interno/admin —
   ver public/legacy/*.html, esas páginas tienen su propio sistema y quedan
   completamente aparte a propósito.

   Principios (misión de rediseño 2026-07-29): una idea dominante por sección,
   dos familias tipográficas + mono solo para precios/datos/pasos, contenedores
   1120-1240px, menos cards/chips/pills, más espacio y jerarquía editorial,
   timelines en vez de grids de cards idénticas, prueba real sin recortar.
   ============================================================================ */

:root{
  /* ---- color: paleta simplificada (una sola fuente de verdad de aquí en más) ---- */
  --ink:#15181c;           /* texto principal, fondo de secciones oscuras */
  --ink-soft:#3d444b;      /* cuerpo de texto sobre fondo claro */
  --carbon:#1a1e23;        /* fondo de secciones oscuras (mas suave que --ink puro) */
  --carbon-line:#2b3138;   /* bordes sobre fondo oscuro */
  --on-carbon:#c7cdd3;     /* texto de cuerpo sobre fondo oscuro */
  --on-carbon-dim:#8b9199; /* texto secundario sobre fondo oscuro */
  --paper:#faf9f6;         /* fondo claro principal */
  --paper-alt:#f1efe9;     /* fondo claro alterno, para dar ritmo entre secciones */
  --card:#ffffff;          /* fondo de tarjetas sobre paper */
  --line:#e4e1d8;          /* bordes sobre fondo claro */
  --gray:#6b7280;          /* gris neutro unico (reemplaza --slate/--muted/--slate2) */
  --gold:#f5b301;
  --gold-deep:#b97e00;     /* dorado con contraste suficiente para texto sobre blanco */
  --gold-ink:#2e2200;      /* texto sobre fondo dorado */
  --gold-soft:#fbeecb;
  --green:#1a8f4c;
  --green-soft:#e3f3e9;

  /* ---- tipografia: 2 familias + mono acotado ---- */
  --font-display:'Archivo', system-ui, sans-serif;
  --font-body:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:'JetBrains Mono', ui-monospace, monospace; /* SOLO precios/datos/numeros de paso */

  /* ---- espaciado (8pt) ---- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px;

  /* ---- contenedor y medida ---- */
  --maxw:1180px;
  --measure:66ch;
  --pad:20px;
  --sec:clamp(64px, 11vw, 128px);
  --radius:10px;
  --radius-sm:6px;
}

/* ============================================================================
   RESET Y BASE
   ============================================================================ */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html,body{overflow-x:hidden;max-width:100%}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.6;
  color:var(--ink-soft);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
}
img,video{max-width:100%;display:block}
b,strong{color:var(--ink);font-weight:700}
a{color:var(--gold-deep);text-decoration:none}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important;animation:none!important}}

/* ---- tipografia ---- */
h1,h2,h3{
  font-family:var(--font-display);
  color:var(--ink);
  margin:0;
  letter-spacing:-.02em;
  text-wrap:balance;
  font-weight:800;
}
h1{font-size:clamp(34px, 6.4vw, 60px);line-height:1.04;font-weight:900;letter-spacing:-.03em;max-width:20ch}
h2{font-size:clamp(26px, 4.6vw, 42px);line-height:1.1;max-width:22ch}
h3{font-size:clamp(19px, 3vw, 23px);line-height:1.25}
p{margin:0;color:var(--gray)}
.lead{font-size:clamp(17.5px, 2.2vw, 20px);line-height:1.6;color:var(--ink-soft);max-width:var(--measure)}
.muted{color:var(--gray);font-size:14.5px;line-height:1.55}

/* Label editorial: reemplaza el eyebrow monoespaciado por defecto — mayuscula,
   tracking, peso, SIN fuente mono. Mono queda reservado para datos/precios. */
.label{
  font-family:var(--font-body);
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:12.5px;
  color:var(--gold-deep);
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.label::before{content:'';width:26px;height:2px;background:var(--gold);flex:0 0 auto}
section.ink .label{color:var(--gold)}

/* Uso de mono: SOLO estas clases lo usan. */
.num{font-family:var(--font-mono)} /* precios, cifras, pasos */

/* ============================================================================
   LAYOUT
   ============================================================================ */
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
section{padding-top:var(--sec);padding-bottom:var(--sec);position:relative}
section.alt{background:var(--paper-alt)}
section.ink{background:var(--carbon);color:var(--on-carbon)}
section.ink h1,section.ink h2,section.ink h3{color:#fff}
section.ink .lead{color:var(--on-carbon)}
section.ink p{color:var(--on-carbon-dim)}
section+section{border-top:1px solid var(--line)}
section.ink+section.ink{border-top-color:var(--carbon-line)}
.head{margin-bottom:var(--s7);max-width:46ch}
.head h2{margin-top:var(--s3)}
.head .lead{margin-top:var(--s4)}
.center{text-align:center;margin-left:auto;margin-right:auto}

/* ---- nav ---- */
.nav{position:sticky;top:0;z-index:50;background:rgba(250,249,246,.88);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;min-height:64px;gap:var(--s4)}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:900;font-size:20px;color:var(--ink);letter-spacing:-.02em}
.logo .gem{width:14px;height:14px;background:var(--gold);transform:rotate(45deg);border-radius:2px}
.nav .link{display:none}
.nav .spacer{margin-left:auto}

/* ============================================================================
   BOTONES — un primario dominante, uno secundario discreto
   ============================================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:0 clamp(24px,5vw,32px);border-radius:var(--radius-sm);border:none;cursor:pointer;
  font-family:var(--font-display);font-weight:800;font-size:16.5px;line-height:1;text-align:center;
  transition:transform .14s ease,box-shadow .14s ease,background .14s ease;letter-spacing:-.005em;
}
.btn:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.btn.primary{background:var(--gold);color:var(--gold-ink);box-shadow:0 1px 0 var(--gold-deep), 0 6px 16px rgba(185,126,0,.22)}
.btn.primary:hover{transform:translateY(-1px);box-shadow:0 2px 0 var(--gold-deep), 0 10px 22px rgba(185,126,0,.28)}
.btn.primary:active{transform:translateY(0);box-shadow:0 1px 0 var(--gold-deep)}
.btn.dark{background:var(--ink);color:#fff}
.btn.dark:hover{transform:translateY(-1px);background:#000}
.btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line)}
.btn.ghost:hover{border-color:var(--ink)}
.btn[disabled]{opacity:.5;pointer-events:none}
.btn.block{display:flex;width:100%}
.btn.lg{min-height:58px;font-size:17.5px}
.nav .btn{min-height:42px;padding:0 18px;font-size:14px}
.cta-note{color:var(--gray);font-size:13.5px;line-height:1.5}

/* ============================================================================
   TIMELINE — reemplaza grids de 6 cards identicas para procesos/mecanismos
   ============================================================================ */
.timeline{margin-top:var(--s6);max-width:calc(var(--measure) + 60px)}
.timeline .step{display:flex;gap:var(--s5);padding:var(--s5) 0;border-top:1px solid var(--line)}
.timeline .step:first-child{border-top:none;padding-top:0}
section.ink .timeline .step{border-top-color:var(--carbon-line)}
.timeline .step .n{
  flex:0 0 auto;font-family:var(--font-mono);font-size:13px;font-weight:700;color:var(--gold-deep);
  padding-top:3px;min-width:28px;
}
section.ink .timeline .step .n{color:var(--gold)}
.timeline .step .body b{display:block;font-family:var(--font-display);font-size:19px;font-weight:800;color:var(--ink);margin-bottom:6px}
section.ink .timeline .step .body b{color:#fff}
.timeline .step .body span{color:var(--gray);font-size:15.5px;line-height:1.55;display:block;max-width:58ch}
section.ink .timeline .step .body span{color:var(--on-carbon-dim)}

/* ============================================================================
   CHECKLIST — para responsabilidades / que hace cada parte
   ============================================================================ */
.checklist{list-style:none;margin:var(--s4) 0 0;padding:0}
.checklist li{display:flex;gap:var(--s3);align-items:flex-start;margin:var(--s3) 0;font-size:15.5px;line-height:1.5;color:var(--ink-soft)}
.checklist li::before{content:'';flex:0 0 7px;height:7px;border-radius:50%;background:var(--gold-deep);margin-top:8px}
.checklist.no li::before{background:var(--gray)}
section.ink .checklist li{color:var(--on-carbon)}

/* ============================================================================
   TARJETAS — reservadas para unidades reales (pricing, comparaciones), no para
   cada frase suelta.
   ============================================================================ */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(22px,4vw,28px)}
.card.on-carbon{background:#20252b;border-color:var(--carbon-line)}

/* ============================================================================
   MURO DE PRUEBA — carrusel horizontal en mobile (SIN recortar), grid en
   desktop (SIN recortar: column-count respeta proporcion real).
   ============================================================================ */
.proofcap{color:var(--on-carbon-dim);font-size:13px;margin-top:var(--s2)}
.wall{
  display:flex;gap:var(--s3);margin-top:var(--s6);overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:var(--s3);-webkit-overflow-scrolling:touch;scrollbar-width:thin;
}
.wall::-webkit-scrollbar{height:6px}
.wall::-webkit-scrollbar-thumb{background:var(--carbon-line);border-radius:3px}
.wall > *{
  scroll-snap-align:start;flex:0 0 auto;height:260px;width:auto;border-radius:8px;
  border:1px solid var(--carbon-line);background:#101316;
}
.wall img,.wall video{height:260px;width:auto;max-width:none;object-fit:contain;border-radius:8px}
@media(min-width:820px){
  .wall{display:block;column-count:3;column-gap:var(--s3);overflow:visible}
  .wall > *{height:auto;width:100%;margin:0 0 var(--s3);break-inside:avoid;display:block}
  .wall img,.wall video{height:auto;width:100%;object-fit:initial}
}
.campslab{margin-top:var(--s6);color:var(--on-carbon-dim);font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:12.5px}
.camps{display:flex;gap:var(--s3);margin-top:var(--s3);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:var(--s3);-webkit-overflow-scrolling:touch}
.camps > *{scroll-snap-align:start;flex:0 0 auto;height:220px;width:auto;border-radius:8px;border:1px solid var(--carbon-line)}
.camps img{height:220px;width:auto;max-width:none;object-fit:contain;border-radius:8px}
@media(min-width:820px){
  .camps{display:block;column-count:4;column-gap:var(--s3);overflow:visible}
  .camps > *{height:auto;width:100%;margin:0 0 var(--s3);break-inside:avoid;display:block}
  .camps img{height:auto;width:100%}
}
.statline{margin-top:var(--s6);display:flex;flex-wrap:wrap;gap:var(--s5)}
.statline .st{flex:1;min-width:150px}
.statline .st b{display:block;font-family:var(--font-mono);font-size:clamp(24px,5vw,32px);font-weight:700;color:#fff;letter-spacing:-.01em}
.statline .st span{color:var(--on-carbon-dim);font-size:13.5px}
.honest{margin-top:var(--s5);color:var(--on-carbon-dim);font-size:13.5px;line-height:1.55;max-width:64ch}

/* Video del muro: solo reproduce cuando esta en viewport (ver script compartido) */
.wall video{background:#101316}

/* ============================================================================
   FAQ
   ============================================================================ */
.faq{margin-top:var(--s5);max-width:74ch}
.faq details{border-bottom:1px solid var(--line);padding:var(--s4) 0}
.faq details:first-child{padding-top:0}
.faq summary{
  font-family:var(--font-display);font-weight:700;color:var(--ink);cursor:pointer;font-size:16.5px;
  list-style:none;display:flex;justify-content:space-between;gap:var(--s3);align-items:center;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';color:var(--gold-deep);font-size:22px;font-weight:400;line-height:1}
.faq details[open] summary::after{content:'\2212'}
.faq p{padding-top:var(--s3);font-size:15.5px;line-height:1.62;color:var(--gray)}

/* ============================================================================
   FOOTER
   ============================================================================ */
.foot{background:var(--carbon);color:var(--on-carbon-dim);padding:var(--s8) 0;text-align:center}
.foot .brandline{color:#fff;font-family:var(--font-display);font-weight:800;font-size:clamp(18px,3vw,22px);line-height:1.35;display:block;margin:0 auto var(--s3);max-width:32ch}
.foot .fmuted{font-size:12.5px;color:var(--on-carbon-dim);letter-spacing:.05em}

/* ============================================================================
   STICKY CTA (mobile)
   ============================================================================ */
.sticky{position:fixed;left:0;right:0;bottom:0;z-index:60;background:rgba(21,24,28,.97);
  backdrop-filter:blur(8px);padding:calc(var(--s3) + env(safe-area-inset-bottom,0)) var(--s4) var(--s3);
  transform:translateY(130%);transition:transform .3s ease;box-shadow:0 -6px 20px rgba(0,0,0,.25)}
.sticky.show{transform:translateY(0)}
.sticky .wrap{display:flex;align-items:center;gap:var(--s4);padding:0}
.sticky .t{display:none;color:#cbd2d9;font-size:13.5px;font-weight:600}
.sticky .btn{flex:1}
@media(min-width:640px){.sticky .t{display:block;flex:1}.sticky .btn{flex:0 0 auto}}

/* ============================================================================
   FORMULARIOS Y FIT CHECK — inputs con 16px+ para evitar zoom iOS, targets 48px+
   ============================================================================ */
.fc-shell{max-width:700px;margin:0 auto}
.fc-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(22px,6vw,36px);box-shadow:0 20px 44px rgba(21,24,28,.08)}
.fc-progress{height:6px;background:var(--paper-alt);border-radius:100px;overflow:hidden;margin-bottom:var(--s2)}
.fc-progress i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--green));width:0;transition:width .4s ease}
.fc-meta{display:flex;justify-content:space-between;font-family:var(--font-mono);color:var(--gray);font-size:12px;margin-bottom:var(--s6);gap:var(--s3)}
.fc-q{font-family:var(--font-display);font-size:clamp(21px,4.2vw,27px);font-weight:800;color:var(--ink);line-height:1.18;margin-bottom:var(--s2)}
.fc-hint{color:var(--gray);font-size:15px;line-height:1.5;margin-bottom:var(--s5)}
.fc-opts{display:flex;flex-direction:column;gap:10px}
.fc-opt{display:flex;align-items:center;gap:var(--s3);min-height:54px;border:1.5px solid var(--line);border-radius:var(--radius-sm);
  padding:14px 18px;font-size:16px;font-weight:600;color:var(--ink);cursor:pointer;background:var(--card);transition:border-color .12s,background .12s}
.fc-opt:hover{border-color:var(--gold)}
.fc-opt.sel{border-color:var(--green);background:var(--green-soft)}
.fc-opt .box{flex:0 0 22px;height:22px;border-radius:6px;border:1.5px solid var(--line);display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;font-weight:900}
.fc-opt.sel .box{background:var(--green);border-color:var(--green)}
.fc-input{width:100%;border:1.5px solid var(--line);border-radius:var(--radius-sm);padding:14px 16px;font-size:16px;font-family:inherit;margin-bottom:10px;background:var(--card);color:var(--ink)}
.fc-input:focus{outline:none;border-color:var(--gold)}
.fc-nav{display:flex;align-items:center;gap:var(--s3);margin-top:var(--s6)}
.fc-back{background:none;border:none;color:var(--gray);font-weight:700;font-size:15px;cursor:pointer;min-height:48px;padding:0 12px}
.fc-err{color:#b3261e;font-size:14px;font-weight:600;margin-top:var(--s3);display:none}
.fc-result{display:none}
.badge{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-body);font-weight:700;font-size:13px;letter-spacing:.02em;padding:7px 14px;border-radius:100px;margin-bottom:var(--s4)}
.badge.g{background:var(--green-soft);color:#15803d}.badge.y{background:var(--gold-soft);color:#8a5a0a}.badge.r{background:var(--paper-alt);color:var(--gray)}
.summary{background:var(--paper-alt);border-radius:var(--radius-sm);padding:20px;margin:var(--s5) 0}
.summary .row{display:flex;justify-content:space-between;gap:var(--s4);padding:10px 0;border-bottom:1px dashed var(--line);font-size:15px}
.summary .row:last-child{border-bottom:none}
.summary .row span{color:var(--gray)}.summary .row b{color:var(--ink);text-align:right;font-family:var(--font-mono);font-weight:600;font-size:14.5px}

/* ============================================================================
   PRICING — tarjetas para activacion/mensual/publicidad (unidad real, cards ok)
   ============================================================================ */
.prices{display:grid;gap:var(--s4);grid-template-columns:1fr;margin-top:var(--s6)}
.price{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:var(--s5)}
.price.lead{border:1.5px solid var(--gold)}
.price .lab{font-weight:700;font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--gray)}
.price .val{font-family:var(--font-mono);font-size:clamp(26px,5vw,32px);font-weight:700;color:var(--ink);margin:var(--s2) 0 var(--s1);letter-spacing:-.01em}
.price .val small{font-family:var(--font-body);font-size:14px;color:var(--gray);font-weight:500}
.price.lead .val{color:var(--gold-deep)}
.price .desc{color:var(--gray);font-size:14.5px;line-height:1.55}
.noline{margin-top:var(--s6);background:var(--ink);color:#fff;border-radius:var(--radius);padding:var(--s5) var(--s6);font-family:var(--font-display);font-weight:700;font-size:clamp(16px,2.2vw,18.5px);line-height:1.5}
.noline b{color:var(--gold)}
@media(min-width:640px){.prices{grid-template-columns:repeat(3,1fr)}}

/* ---- resultado del Fit Check: plan cards ---- */
.plan-cards{display:grid;gap:var(--s3);grid-template-columns:1fr;margin:var(--s4) 0}
.pc{background:var(--paper-alt);border:1px solid var(--line);border-radius:var(--radius-sm);padding:var(--s4)}
.pc .l{color:var(--gray);font-size:12px;font-weight:700;letter-spacing:.03em;text-transform:uppercase}
.pc .v{font-family:var(--font-display);color:var(--ink);font-size:18.5px;font-weight:800;margin-top:4px;line-height:1.2}
.pc .v.gold{color:var(--gold-deep)}
.plan-sec{margin-top:var(--s5)}
.plan-sec h3{font-size:16px;margin-bottom:var(--s2)}
.disclaim{color:var(--gray);font-size:13px;line-height:1.5;margin-top:var(--s3)}
@media(min-width:560px){.plan-cards{grid-template-columns:1fr 1fr}}

/* ---- para quien si / no ---- */
.fit{display:grid;gap:var(--s4);grid-template-columns:1fr;margin-top:var(--s5)}
.fitcol{padding-top:var(--s2)}
.fitcol h3{font-size:17px;margin-bottom:var(--s4)}
.fitcol.yes h3{color:var(--green)}.fitcol.no h3{color:var(--gray)}
.fitrow{display:flex;gap:12px;align-items:flex-start;margin:12px 0}
.fitrow .mk{flex:0 0 22px;height:22px;border-radius:5px;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:12.5px;margin-top:1px}
.fitrow.yes .mk{background:var(--green-soft);color:var(--green)}.fitrow.no .mk{background:var(--paper-alt);color:var(--gray)}
.fitrow span:last-child{color:var(--ink-soft);font-size:15.5px;line-height:1.45}
@media(min-width:640px){.fit{grid-template-columns:1fr 1fr}}

/* ---- proteccion/comparacion: lista compacta, no 6 cajas identicas ---- */
.protlist{margin-top:var(--s5);border-top:1px solid var(--line)}
.protlist .p{display:flex;gap:var(--s4);padding:var(--s4) 0;border-bottom:1px solid var(--line)}
.protlist .p b{flex:0 0 auto;min-width:11ch;color:var(--ink);font-family:var(--font-display);font-size:15px}
.protlist .p span{color:var(--gray);font-size:15px;line-height:1.5}
section.ink .protlist{border-top-color:var(--carbon-line)}
section.ink .protlist .p{border-bottom-color:var(--carbon-line)}
section.ink .protlist .p b{color:#fff}
section.ink .protlist .p span{color:var(--on-carbon-dim)}

/* ============================================================================
   BREAKPOINTS
   ============================================================================ */
@media(min-width:640px){
  :root{--pad:28px}
  .sticky .t{display:block}
}
@media(min-width:900px){
  .nav .link{display:inline;color:var(--ink-soft);font-weight:600;font-size:15px}
}