/* ==========================================================================
   AlzoMX — core.css
   Sistema de diseño: tokens, base, layout y componentes compartidos.
   Las clases de formularios, reveal, lightbox y header conservan los nombres
   que consume public/js/index.js.
   ========================================================================== */

:root{
  /* Superficies — negro más denso */
  --bg:#000000;
  --bg-soft:#070707;
  --surface:#0c0c0c;
  --surface-2:#141414;
  --surface-3:#1c1c1c;
  --line:#262626;
  --line-strong:#3a3a3a;

  /* Texto */
  --text:#f2f2f2;
  --text-muted:#9a9a9a;
  --text-dim:#6a6a6a;

  /* Marca AlzoMX: gris oscuro (no verde) */
  --brand:#2e2e2e;
  --brand-strong:#e8e8e8;
  --brand-soft:rgba(255,255,255,.07);
  --brand-line:rgba(255,255,255,.16);
  --ink:#ffffff;
  --alert:#e11d48;
  --alert-soft:rgba(225,29,72,.16);

  /* Intensidades de la app */
  --sev-1:#22c55e;
  --sev-2:#f59e0b;
  --sev-3:#ef4444;
  --sev-4:#ec4899;
  --sev-0:#6b7480;

  --font-ui:"Plus Jakarta Sans",Montserrat,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --font-brand:"Montserrat",system-ui,sans-serif;

  --step--1:clamp(.78rem,.76rem + .1vw,.83rem);
  --step-0:clamp(.94rem,.92rem + .12vw,1rem);
  --step-1:clamp(1.06rem,1rem + .3vw,1.19rem);
  --step-2:clamp(1.22rem,1.12rem + .5vw,1.5rem);
  --step-3:clamp(1.5rem,1.3rem + .95vw,2.05rem);
  --step-4:clamp(1.85rem,1.4rem + 1.9vw,2.85rem);
  --step-5:clamp(2.2rem,1.45rem + 3.2vw,3.7rem);

  --container:1180px;
  --container-narrow:720px;
  --gutter:clamp(18px,4vw,36px);
  --section-y:clamp(56px,8vw,104px);
  --gap:clamp(14px,1.8vw,20px);

  --r-xs:8px;
  --r-sm:12px;
  --r-md:20px;
  --r-lg:28px;
  --r-full:999px;

  --shadow-1:0 1px 0 rgba(255,255,255,.04);
  --shadow-2:0 12px 32px rgba(0,0,0,.35);
  --shadow-3:0 24px 50px rgba(0,0,0,.5);

  --ease:cubic-bezier(.2,0,0,1);
  --t-fast:160ms var(--ease);
  --t:240ms var(--ease);

  --header-h:72px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--bg);color-scheme:dark;overflow-x:clip}
html:focus-within{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-ui);
  font-size:var(--step-0);
  line-height:1.6;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  overflow-x:clip;
}
img,svg,video{max-width:100%;display:block}
img{height:auto}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
:where(h1,h2,h3,h4){
  font-weight:650;
  line-height:1.16;
  letter-spacing:-.018em;
  text-wrap:balance;
}
h1{font-size:var(--step-4)}
h2{font-size:var(--step-3)}
h3{font-size:var(--step-1)}
p{text-wrap:pretty}
strong{font-weight:650;color:var(--text)}
::selection{background:#3a3a3a;color:#fff}
.hl{color:#fff}
:target{scroll-margin-top:calc(var(--header-h) + 24px)}

:focus-visible{
  outline:2px solid var(--brand-strong);
  outline-offset:3px;
  border-radius:var(--r-xs);
}

/* ---------- Utilidades ---------- */
.visually-hidden{
  position:absolute !important;
  width:1px;height:1px;
  margin:-1px;padding:0;border:0;
  clip-path:inset(50%);
  overflow:hidden;white-space:nowrap;
}
.skip{
  position:absolute;
  top:-100%;left:16px;
  z-index:2000;
  padding:12px 18px;
  border-radius:var(--r-sm);
  background:var(--text);
  color:#000;
  font-weight:650;
}
.skip:focus{top:12px}
.num{font-variant-numeric:tabular-nums}

/* ---------- Layout ---------- */
.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.container--narrow{max-width:var(--container-narrow)}
.section{padding-block:var(--section-y)}
.section--tight{padding-block:clamp(36px,5vw,64px)}
.section + .section{padding-top:0}
.section--near-head{padding-top:clamp(12px,2vw,24px)}

.section-head{
  max-width:64ch;
  margin-bottom:clamp(24px,3.5vw,40px);
}
.section-head h2{position:relative}
.section-head--center{margin-inline:auto;text-align:center}
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:14px;
  font-size:var(--step--1);
  font-weight:650;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--text-muted);
}
.eyebrow::before{
  content:"";
  width:18px;height:1px;
  background:var(--brand-strong);
}
.eyebrow--plain::before{display:none}
.chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 12px;
  border:1px solid var(--line);
  border-radius:var(--r-full);
  background:var(--surface-2);
  font-size:var(--step--1);
  font-weight:650;
  color:var(--text-muted);
}
.lead{
  margin-top:14px;
  font-size:var(--step-1);
  line-height:1.6;
  color:var(--text-muted);
}
.muted{color:var(--text-muted)}
.note{
  font-size:var(--step--1);
  line-height:1.55;
  color:var(--text-dim);
}

.grid{display:grid;gap:var(--gap)}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr))}
.grid--4{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.stack{display:flex;flex-direction:column;gap:var(--gap)}

/* ---------- Botones ---------- */
.btn{
  --btn-bg:var(--surface-2);
  --btn-fg:var(--text);
  --btn-line:var(--line-strong);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  min-height:44px;
  padding:10px 22px;
  border:1px solid var(--btn-line);
  border-radius:var(--r-full);
  background:var(--btn-bg);
  color:var(--btn-fg);
  font-size:.95rem;
  font-weight:700;
  letter-spacing:-.01em;
  cursor:pointer;
  transition:background var(--t-fast),border-color var(--t-fast),color var(--t-fast),transform var(--t-fast);
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn svg{flex:none}
.btn--primary,.btn.btn-primary{position:relative}
.btn--primary:hover,.btn.btn-primary:hover{--btn-bg:#e8e8e8;--btn-line:#e8e8e8;--btn-fg:#000}
.btn.btn-primary,.btn-primary{--btn-bg:#fff;--btn-fg:#000;--btn-line:#fff}
.btn.btn-ghost,.btn-ghost{--btn-bg:transparent}
.btn--brand{--btn-bg:#2e2e2e;--btn-fg:#fff;--btn-line:#3a3a3a}
.btn--brand:hover{--btn-bg:#3a3a3a}
.btn--ghost{--btn-bg:transparent}
.btn--ghost:hover,.btn.btn-ghost:hover{--btn-bg:var(--surface-3)}
.btn--sm{min-height:40px;padding:8px 15px;font-size:var(--step--1)}
.btn--block{width:100%}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

.link-arrow{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-weight:600;
  color:var(--text);
  border-bottom:1px solid var(--line-strong);
  padding-bottom:2px;
  transition:border-color var(--t-fast),color var(--t-fast),gap var(--t-fast);
}
.link-arrow::after{content:"→";transition:transform var(--t-fast)}
.link-arrow:hover{border-color:var(--brand);color:var(--brand-strong)}
.link-arrow:hover::after{transform:translateX(3px)}

.store-badge{
  display:inline-flex;
  align-items:center;
  height:52px;
  border-radius:var(--r-sm);
  transition:transform var(--t-fast),opacity var(--t-fast);
}
.store-badge img{height:100%;width:auto}
.store-badge:hover{transform:translateY(-2px)}
.store-badge--soon{opacity:.42;cursor:default}
.store-badge--soon:hover{transform:none}

/* ---------- Etiquetas y píldoras ---------- */
.tag{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:5px 11px;
  border:1px solid var(--line);
  border-radius:var(--r-full);
  background:var(--surface-2);
  font-size:var(--step--1);
  font-weight:600;
  letter-spacing:.02em;
  color:var(--text-muted);
}
.tag--brand{border-color:var(--brand-line);background:var(--brand-soft);color:var(--brand-strong)}
.tag--official{border-color:rgba(96,165,250,.35);background:rgba(59,130,246,.14);color:#93c5fd}

.live{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:6px 13px 6px 11px;
  border:1px solid var(--brand-line);
  border-radius:var(--r-full);
  background:var(--brand-soft);
  font-size:var(--step--1);
  font-weight:650;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--brand-strong);
}
.live-dot{
  position:relative;
  width:8px;height:8px;
  border-radius:50%;
  background:#fff;
  flex:none;
}
.live-dot::after{
  content:"";
  position:absolute;
  inset:-5px;
  border-radius:50%;
  border:1px solid #fff;
  opacity:.55;
  animation:pulse 2.2s var(--ease) infinite;
}
@keyframes pulse{
  0%{transform:scale(.6);opacity:.7}
  70%,100%{transform:scale(1.35);opacity:0}
}
@keyframes rise{
  from{opacity:0;transform:translateY(18px)}
  to{opacity:1;transform:none}
}

/* ---------- Tarjetas ---------- */
.card{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:clamp(20px,2.4vw,26px);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:var(--surface);
  transition:border-color var(--t-fast),background var(--t-fast);
}
a.card:hover,.card--link:hover,.card:hover{
  border-color:var(--line-strong);
  background:var(--surface-2);
}
.card__icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:42px;height:42px;
  margin-bottom:4px;
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  background:var(--surface-2);
  color:var(--brand-strong);
}
.card__icon svg{width:20px;height:20px}
.card__title{font-size:var(--step-1);font-weight:650}
.card__text{color:var(--text-muted);font-size:var(--step-0)}
.card__cta{
  margin-top:auto;
  padding-top:6px;
  font-size:var(--step--1);
  font-weight:650;
  color:var(--text);
}
.card__cta::after{content:" →"}
a.card:hover,.card--link:hover{
  border-color:var(--line-strong);
  background:var(--surface-2);
}
.card--flat{background:transparent}
.card--brand{border-color:var(--brand-line);background:linear-gradient(180deg,var(--brand-soft),transparent 70%)}

/* ---------- Métricas ---------- */
.stat{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:clamp(16px,2vw,22px);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:var(--surface);
}
.stat__value{
  font-size:var(--step-3);
  font-weight:700;
  letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
}
.stat__label{font-size:var(--step--1);font-weight:600;color:var(--text)}
.stat__desc{font-size:var(--step--1);color:var(--text-muted);line-height:1.5}

/* ---------- Pasos ---------- */
.steps{counter-reset:step;display:grid;gap:var(--gap)}
.step{
  position:relative;
  padding:clamp(18px,2.2vw,24px);
  padding-left:clamp(58px,6vw,68px);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:var(--surface);
  box-shadow:var(--shadow-1);
}
.step:last-child{border-bottom:1px solid var(--line)}
.step::before{
  counter-increment:step;
  content:counter(step);
  position:absolute;
  top:clamp(18px,2.2vw,24px);
  left:clamp(18px,2.2vw,24px);
  display:grid;
  place-items:center;
  width:28px;height:28px;
  border:1px solid var(--brand-line);
  border-radius:var(--r-full);
  background:var(--brand-soft);
  color:var(--brand-strong);
  font-size:var(--step--1);
  font-weight:700;
  font-variant-numeric:tabular-nums;
}
.step__title{font-size:var(--step-1);font-weight:650;margin-bottom:6px}
.step__text{color:var(--text-muted)}

/* ---------- Avisos ---------- */
.callout{
  display:flex;
  gap:14px;
  padding:clamp(16px,2vw,20px);
  border:1px solid var(--line);
  border-left:3px solid var(--text-dim);
  border-radius:var(--r-sm);
  background:var(--surface);
}
.callout__icon{flex:none;color:var(--text-muted);margin-top:2px}
.callout__icon svg{width:20px;height:20px}
.callout__title{font-weight:650;margin-bottom:4px}
.callout__text{color:var(--text-muted);font-size:var(--step-0)}
.callout--official{border-left-color:#60a5fa}
.callout--official .callout__icon{color:#8cc0ff}
.callout--warn{border-left-color:var(--sev-2)}
.callout--warn .callout__icon{color:var(--sev-2)}
.callout--brand{border-left-color:var(--brand)}
.callout--brand .callout__icon{color:var(--brand-strong)}

/* ---------- Escala de intensidad ---------- */
.scale{display:grid;gap:10px}
.scale__row{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:14px;
  align-items:start;
  padding:14px 16px;
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  background:var(--surface);
}
.scale__chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-width:124px;
  font-size:var(--step--1);
  font-weight:700;
  letter-spacing:.02em;
}
.scale__chip::before{
  content:"";
  width:10px;height:10px;
  border-radius:3px;
  background:var(--chip,var(--sev-0));
}
.scale__row[data-level="0"]{--chip:var(--sev-0)}
.scale__row[data-level="1"]{--chip:var(--sev-1)}
.scale__row[data-level="2"]{--chip:var(--sev-2)}
.scale__row[data-level="3"]{--chip:var(--sev-3)}
.scale__row[data-level="4"]{--chip:var(--sev-4)}
.scale__text{color:var(--text-muted);font-size:var(--step-0)}

/* ---------- Tablas ---------- */
.table-wrap{
  overflow-x:auto;
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:var(--surface);
  -webkit-overflow-scrolling:touch;
}
table.data{width:100%;border-collapse:collapse;min-width:520px}
table.data caption{
  padding:14px 16px;
  text-align:left;
  font-size:var(--step--1);
  color:var(--text-muted);
  border-bottom:1px solid var(--line);
}
table.data th,table.data td{
  padding:13px 16px;
  text-align:left;
  font-size:var(--step-0);
  border-bottom:1px solid var(--line);
  vertical-align:top;
}
table.data th{
  font-size:var(--step--1);
  font-weight:650;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--text-muted);
  background:var(--surface-2);
}
table.data tbody tr:last-child td{border-bottom:0}
table.data td .num{font-variant-numeric:tabular-nums}

/* ---------- FAQ (sin JS) ---------- */
.faq{display:grid;gap:10px;border:0}
.faq__item{
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:var(--surface);
  overflow:hidden;
  transition:border-color var(--t-fast),background var(--t-fast);
}
.faq__item:hover{border-color:var(--line-strong)}
.faq__item[open]{border-color:var(--line-strong);background:var(--surface-2)}
.faq__q{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  min-height:56px;
  padding:15px 18px;
  font-size:var(--step-0);
  font-weight:650;
  cursor:pointer;
  list-style:none;
}
.faq__q::-webkit-details-marker{display:none}
.faq__q::after{
  content:"";
  flex:none;
  width:10px;height:10px;
  border-right:2px solid var(--text-muted);
  border-bottom:2px solid var(--text-muted);
  transform:rotate(45deg) translateY(-2px);
  transition:transform var(--t-fast);
}
.faq__item[open] .faq__q::after{transform:rotate(-135deg) translateY(-2px)}
.faq__q:hover{color:var(--brand-strong)}
.faq__a{padding:0 18px 18px;color:var(--text-muted)}
.faq__a p + p{margin-top:10px}
.faq__list{display:grid;gap:6px;margin:10px 0;padding-left:20px;list-style:disc}
.faq__list strong{color:var(--text);font-weight:600}

/* ---------- Breadcrumb ---------- */
.breadcrumb{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  font-size:var(--step--1);
  color:var(--text-dim);
}
.breadcrumb a{color:var(--text-muted);transition:color var(--t-fast)}
.breadcrumb a:hover{color:var(--text)}
.breadcrumb [aria-current]{color:var(--text)}
.breadcrumb__sep{color:var(--text-dim)}

/* ---------- Encabezado de página ---------- */
.page-head{
  padding-top:clamp(28px,5vw,52px);
  padding-bottom:clamp(8px,2vw,16px);
}
.page-head h1{margin-top:16px;max-width:22ch;animation:rise .7s var(--ease) .06s both}
.page-head .eyebrow{animation:rise .55s var(--ease) both}
.page-head .lead{max-width:60ch;animation:rise .75s var(--ease) .12s both}
.page-head .breadcrumb{animation:rise .5s var(--ease) both}
.page-head__meta{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:20px;
}

/* ==========================================================================
   Header
   IDs/clases requeridos por index.js: #siteHeader, #navToggle, #primaryNav,
   .nav-open, .scrolled, .hide, body.nav-locked
   ========================================================================== */
.site-header{
  position:sticky;
  top:0;
  z-index:1000;
  background:rgba(0,0,0,.82);
  border-bottom:1px solid var(--line);
  transition:background var(--t),transform var(--t),box-shadow var(--t);
}
@supports (backdrop-filter:blur(1px)){
  .site-header{backdrop-filter:blur(18px)}
}
.site-header.scrolled{background:rgba(0,0,0,.94)}
.site-header.hide{transform:translateY(-100%)}
.site-header.nav-open{transform:none;background:#000}

.nav-wrap{
  display:flex;
  align-items:center;
  gap:16px;
  min-height:var(--header-h);
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.logo{
  display:inline-flex;
  align-items:center;
  gap:10px;
  flex:none;
  padding:6px 0;
}
.logo-mark{width:36px;height:36px;border-radius:50%}
.logo-word{
  font-family:var(--font-brand);
  font-size:1.55rem;
  font-weight:500;
  line-height:1;
  letter-spacing:-.03em;
}
.nav{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:2px;
  min-width:0;
}
.nav > a,
.nav-trigger{
  padding:10px 14px;
  border-radius:var(--r-full);
  font-size:.94rem;
  font-weight:600;
  color:var(--text-muted);
  background:transparent;
  border:0;
  cursor:pointer;
  font-family:inherit;
  line-height:1.2;
  transition:color var(--t-fast),background var(--t-fast);
}
.nav > a:hover,
.nav-trigger:hover{
  color:var(--text);
  background:var(--surface-3);
}
.nav > a[aria-current="page"],
.nav-item.is-active > .nav-trigger{
  color:var(--text);
  background:var(--surface-3);
  font-weight:700;
}
.nav-item{position:relative}
.nav-trigger{
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.nav-trigger__chev{
  opacity:.7;
  transition:transform var(--t-fast);
}
.nav-item.is-open > .nav-trigger .nav-trigger__chev,
.nav-item:hover > .nav-trigger .nav-trigger__chev{transform:rotate(180deg)}
.nav-dropdown{
  position:absolute;
  top:calc(100% + 6px);
  left:0;
  min-width:180px;
  padding:8px;
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:#0c0c0c;
  box-shadow:var(--shadow-2);
  display:grid;
  gap:2px;
  opacity:0;
  visibility:hidden;
  transform:translateY(6px);
  transition:opacity var(--t-fast),transform var(--t-fast),visibility var(--t-fast);
  z-index:30;
}
.nav-dropdown a{
  display:block;
  padding:10px 12px;
  border-radius:var(--r-sm);
  font-size:.92rem;
  font-weight:600;
  color:var(--text-muted);
  white-space:nowrap;
  transition:color var(--t-fast),background var(--t-fast);
}
.nav-dropdown a:hover,
.nav-dropdown a[aria-current="page"]{
  color:var(--text);
  background:var(--surface-3);
}
@media (hover:hover) and (pointer:fine){
  .nav-item--dropdown:hover > .nav-dropdown,
  .nav-item--dropdown:focus-within > .nav-dropdown{
    opacity:1;
    visibility:visible;
    transform:none;
  }
}
.nav-item.is-open > .nav-dropdown{
  opacity:1;
  visibility:visible;
  transform:none;
}
.nav-end{
  display:flex;
  align-items:center;
  gap:2px;
  margin-left:auto;
  flex:none;
}
.nav-end__link{
  padding:10px 14px;
  border-radius:var(--r-full);
  font-size:.94rem;
  font-weight:600;
  color:var(--text-muted);
  transition:color var(--t-fast),background var(--t-fast);
}
.nav-end__link:hover{color:var(--text);background:var(--surface-3)}
.nav-end__link[aria-current="page"]{color:var(--text);background:var(--surface-3);font-weight:700}
.nav-mobile-only{display:none}
.nav__cta{
  margin-left:0;
  flex:none;
  padding:10px 18px !important;
  border:1px solid #fff !important;
  border-radius:var(--r-full) !important;
  background:#fff !important;
  color:#000 !important;
  font-size:.94rem;
  font-weight:800 !important;
  transition:background var(--t-fast),border-color var(--t-fast),color var(--t-fast);
}
.nav__cta:hover{background:#e8e8e8 !important;border-color:#e8e8e8 !important;color:#000 !important}
.nav-heart{color:var(--sev-3)}

.burger{
  display:none;
  flex:none;
  width:44px;height:44px;
  padding:0;
  border:1px solid var(--line-strong);
  border-radius:var(--r-sm);
  background:var(--surface);
  cursor:pointer;
}
.burger-line{
  display:block;
  width:18px;height:1.5px;
  margin:3.5px auto;
  background:var(--text);
  border-radius:2px;
  transition:transform var(--t),opacity var(--t-fast);
}
.site-header.nav-open .burger-line:nth-child(1){transform:translateY(5px) rotate(45deg)}
.site-header.nav-open .burger-line:nth-child(2){opacity:0}
.site-header.nav-open .burger-line:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

@media (max-width:900px){
  .burger{display:block}
  .nav-end{margin-left:auto}
  .nav-end__link{display:none}
  .nav-mobile-only{display:flex !important}
  .nav__cta{margin-left:0}
  .nav{
    position:fixed;
    inset:var(--header-h) 0 auto;
    display:grid;
    gap:4px;
    margin:0;
    padding:14px var(--gutter) calc(24px + env(safe-area-inset-bottom,0px));
    background:var(--bg);
    border-bottom:1px solid var(--line);
    max-height:calc(100dvh - var(--header-h));
    overflow-y:auto;
    opacity:0;
    visibility:hidden;
    transform:translateY(-8px);
    transition:opacity var(--t),transform var(--t),visibility var(--t);
    z-index:999;
  }
  .site-header.nav-open .nav{opacity:1;visibility:visible;transform:none}
  .nav > a,
  .nav-trigger{
    min-height:50px;
    display:flex;
    align-items:center;
    width:100%;
    padding:12px 14px;
    border:1px solid transparent;
    border-radius:var(--r-md);
    justify-content:flex-start;
    font-size:1rem;
  }
  .nav > a:hover,
  .nav > a[aria-current="page"],
  .nav-trigger:hover,
  .nav-item.is-active > .nav-trigger{border-color:var(--line)}
  .nav-item--dropdown{display:grid}
  .nav-dropdown{
    position:static;
    min-width:0;
    margin:0 0 4px;
    padding:4px 0 4px 10px;
    border:0;
    border-left:1px solid var(--line);
    border-radius:0;
    background:transparent;
    box-shadow:none;
    display:none;
    opacity:1;
    visibility:visible;
    transform:none;
  }
  .nav-item.is-open > .nav-dropdown{display:grid}
  .nav-dropdown a{
    min-height:44px;
    display:flex;
    align-items:center;
    white-space:normal;
  }
}
body.nav-locked{overflow:hidden}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{
  margin-top:clamp(48px,7vw,88px);
  border-top:1px solid var(--line);
  background:var(--bg-soft);
}
.footer-inner{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding:clamp(40px,5vw,64px) var(--gutter) clamp(24px,3vw,32px);
  display:flex;
  flex-direction:column;
  gap:clamp(32px,4vw,44px);
}
.footer-top{
  display:grid;
  grid-template-columns:minmax(240px,1fr) minmax(0,1.7fr);
  gap:clamp(28px,4vw,48px);
  align-items:start;
}
.footer-brand-col{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.footer-brand{display:inline-flex;align-items:center;gap:11px}
.footer-brand img{width:38px;height:38px;border-radius:9px}
.footer-brand-word{font-family:var(--font-brand);font-size:1.5rem;line-height:1}
.footer-tagline{max-width:30ch;font-size:var(--step--1);color:var(--text-muted)}
.footer-store{height:48px}
.footer-sitemap{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:clamp(20px,3vw,32px);
}
.footer-col-title{
  margin-bottom:12px;
  font-size:var(--step--1);
  font-weight:650;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--text);
}
.footer-col-links{display:grid;gap:9px}
.footer-col-links a{
  font-size:var(--step--1);
  color:var(--text-muted);
  transition:color var(--t-fast);
}
.footer-col-links a:hover{color:var(--text)}
.footer-col-links a[aria-current="page"]{color:var(--text);font-weight:600}
.footer-bottom{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding-top:clamp(20px,2.5vw,26px);
  border-top:1px solid var(--line);
}
.footer-legal{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  font-size:var(--step--1);
  color:var(--text-dim);
}
.footer-legal a{color:var(--text-muted)}
.footer-legal a:hover{color:var(--text)}
.footer-legal-sep{color:var(--text-dim)}
.footer-social{display:flex;gap:8px}
.footer-social-link{
  display:grid;
  place-items:center;
  width:40px;height:40px;
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  color:var(--text-muted);
  transition:color var(--t-fast),border-color var(--t-fast),background var(--t-fast);
}
.footer-social-link:hover{color:var(--text);border-color:var(--line-strong);background:var(--surface-2)}
.footer-social-link svg{width:18px;height:18px}
.footer-disclaimer{
  max-width:88ch;
  font-size:var(--step--1);
  line-height:1.55;
  color:var(--text-dim);
}
@media (max-width:780px){
  .footer-top{grid-template-columns:1fr}
}

/* ==========================================================================
   Formularios (contratos de index.js)
   ========================================================================== */
.form-card{
  padding:clamp(20px,3vw,32px);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:var(--surface);
  transition:opacity .55s var(--ease),transform .55s var(--ease),border-color var(--t-fast);
}
.form-card:focus-within{border-color:var(--line-strong)}
.contact-form-head{margin-bottom:22px}
.contact-form-heading{font-size:var(--step-2);font-weight:650}
.contact-form-note{margin-top:6px;font-size:var(--step--1);color:var(--text-muted)}

.form-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}
.col-6{grid-column:span 1}
.col-12{grid-column:1 / -1}
@media (max-width:640px){
  .form-grid{grid-template-columns:1fr}
  .col-6{grid-column:1 / -1}
}

.field{display:flex;flex-direction:column;gap:7px;min-width:0}
.field-label{
  font-size:var(--step--1);
  font-weight:650;
  color:var(--text);
}
.field-optional{font-weight:500;color:var(--text-dim)}
.req{color:var(--sev-3)}
.field input,.field textarea,.field select,.monitor-input{
  width:100%;
  min-height:48px;
  padding:12px 14px;
  border:1px solid var(--line-strong);
  border-radius:var(--r-sm);
  background:var(--bg-soft);
  color:var(--text);
  font-size:var(--step-0);
  transition:border-color var(--t-fast),background var(--t-fast),box-shadow var(--t-fast);
}
.field textarea{min-height:140px;resize:vertical;line-height:1.55}
.field input::placeholder,.field textarea::placeholder{color:var(--text-dim)}
.field input:focus-visible,.field textarea:focus-visible{
  outline:none;
  border-color:var(--brand);
  background:var(--surface);
  box-shadow:0 0 0 3px var(--brand-soft);
}
.field.is-invalid input,.field.is-invalid textarea{
  border-color:var(--sev-3);
  box-shadow:0 0 0 3px rgba(239,68,68,.14);
}
.field-error{
  font-size:var(--step--1);
  color:#fca5a5;
  opacity:0;
  transform:translateY(-2px);
  transition:opacity var(--t-fast),transform var(--t-fast);
}
.field-error.is-visible{opacity:1;transform:none}
.field-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.counter{
  font-size:var(--step--1);
  font-variant-numeric:tabular-nums;
  color:var(--text-dim);
  margin-left:auto;
}
.counter.is-warn{color:var(--sev-2)}
.counter.is-limit{color:var(--sev-3)}

.phone-field{display:flex;gap:8px;align-items:stretch}
.phone-prefix{
  display:inline-flex;
  align-items:center;
  gap:7px;
  flex:none;
  padding:0 12px;
  border:1px solid var(--line-strong);
  border-radius:var(--r-sm);
  background:var(--surface-2);
  font-size:var(--step--1);
  font-weight:600;
  color:var(--text-muted);
}
.phone-flag-svg{border-radius:2px}

.check-label{
  display:flex;
  align-items:flex-start;
  gap:11px;
  font-size:var(--step-0);
  color:var(--text-muted);
  cursor:pointer;
}
.check-label input[type="checkbox"]{
  flex:none;
  width:20px;height:20px;
  margin-top:2px;
  accent-color:var(--brand-strong);
  cursor:pointer;
}
.field-check{gap:8px}

.form-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
  margin-top:4px;
}
.form-submit{
  position:relative;
  overflow:hidden;
  min-height:48px;
  padding:12px 24px;
  border:1px solid #fff;
  border-radius:var(--r-sm);
  background:#fff;
  color:#000;
  font-weight:650;
}
.form-submit:not(:disabled):hover{background:#e8e8e8}
.form-submit-spinner{
  display:none;
  width:16px;height:16px;
  border:2px solid rgba(0,0,0,.2);
  border-top-color:#000;
  border-radius:50%;
}
.form-submit.is-loading .form-submit-spinner{display:block;animation:spin .7s linear infinite}
.form-submit-progress{
  position:absolute;
  left:0;bottom:0;
  height:2px;width:0;
  background:var(--brand);
}
.form-submit.is-loading .form-submit-progress{animation:progress 1.6s var(--ease) forwards}
.form-submit.is-sending-done .form-submit-progress{width:100%}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes progress{0%{width:0}100%{width:88%}}

.form-feedback{
  flex-basis:100%;
  font-size:var(--step--1);
  color:var(--text-muted);
  opacity:0;
  transition:opacity var(--t-fast);
}
.form-feedback.is-visible{opacity:1}
.form-feedback.is-error{color:#fca5a5}
.form-feedback.is-info{color:var(--text-muted)}

.shake{animation:shake .32s var(--ease)}
@keyframes shake{
  0%,100%{transform:translateX(0)}
  25%{transform:translateX(-4px)}
  75%{transform:translateX(4px)}
}

.form-sent{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  padding:clamp(28px,4vw,44px) 20px;
  text-align:center;
}
.form-sent-mark{color:var(--brand-strong)}
.form-sent-ring{
  stroke:var(--brand);
  stroke-width:2;
  stroke-dasharray:151;
  stroke-dashoffset:151;
  animation:draw .5s var(--ease) forwards;
}
.form-sent-check{
  stroke:var(--brand);
  stroke-width:3;
  stroke-linecap:round;
  stroke-dasharray:40;
  stroke-dashoffset:40;
  animation:draw .35s var(--ease) .32s forwards;
}
@keyframes draw{to{stroke-dashoffset:0}}
.form-sent-title{font-size:var(--step-2);font-weight:650}
.form-sent-copy{max-width:46ch;color:var(--text-muted)}
.form-sent-again{
  margin-top:8px;
  padding:10px 18px;
  border:1px solid var(--line-strong);
  border-radius:var(--r-sm);
  background:transparent;
  font-size:var(--step--1);
  font-weight:600;
  cursor:pointer;
  transition:background var(--t-fast);
}
.form-sent-again:hover{background:var(--surface-2)}
.form-sent[hidden]{display:none !important}
.contact-form.is-sent .contact-form-head,
.contact-form.is-sent #contactFormFields,
.early-access-form.is-sent .early-form-heading,
.early-access-form.is-sent #earlyAccessFields{display:none}
.error{color:#fca5a5}

/* ==========================================================================
   Prosa (legal, artículos, guías)
   ========================================================================== */
.prose{max-width:72ch;color:var(--text-muted);font-size:var(--step-0)}
.prose > * + *{margin-top:1.1em}
.prose h2{
  margin-top:2em;
  font-size:var(--step-2);
  color:var(--text);
  scroll-margin-top:calc(var(--header-h) + 20px);
}
.prose h3{margin-top:1.6em;font-size:var(--step-1);color:var(--text)}
.prose p{line-height:1.72}
.prose a{
  color:var(--text);
  border-bottom:1px solid var(--brand-line);
  transition:border-color var(--t-fast),color var(--t-fast);
}
.prose a:hover{border-color:var(--brand);color:var(--brand-strong)}
.prose ul,.prose ol{display:grid;gap:.6em;padding-left:1.35em}
.prose ul li{list-style:disc}
.prose ol li{list-style:decimal}
.prose li::marker{color:var(--text-dim)}
.prose strong{color:var(--text)}
.prose blockquote{
  padding:14px 18px;
  border-left:3px solid var(--brand);
  border-radius:0 var(--r-sm) var(--r-sm) 0;
  background:var(--surface);
  color:var(--text-muted);
}
.prose figure{margin-block:1.6em}
.prose img{border-radius:var(--r-md);border:1px solid var(--line)}
.prose figcaption{margin-top:8px;font-size:var(--step--1);color:var(--text-dim)}
.prose code{
  padding:2px 6px;
  border-radius:var(--r-xs);
  background:var(--surface-2);
  font-size:.92em;
}
.prose hr{margin-block:2em;border:0;border-top:1px solid var(--line)}
.prose time{color:var(--text-dim)}

/* ==========================================================================
   Animaciones de entrada (index.js añade .in-view)
   ========================================================================== */
.reveal{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .7s var(--ease),transform .7s var(--ease);
}
.reveal.in-view{opacity:1;transform:none}
.card,.service,.kpi,.plan,.portfolio-card,.why-choose-card,.hub-card,.press-item,.metrics__item,.source-card,.download-link,.faq__item,.step,.coverage-chip,.timeline__item{
  transition:opacity .55s var(--ease),transform .55s var(--ease),border-color var(--t-fast),background var(--t-fast);
}
.reveal .card,.reveal .service,.reveal .kpi,.reveal .plan,
.reveal .portfolio-card,.reveal .why-choose-card,.reveal .hub-card,.reveal .press-item,
.reveal .metrics__item,.reveal .source-card,.reveal .download-link,.reveal .faq__item,.reveal .step,
.reveal .coverage-chip,.reveal .timeline__item{
  opacity:0;
  transform:translateY(18px);
}
.reveal .card.in-view,.reveal .service.in-view,.reveal .kpi.in-view,.reveal .plan.in-view,
.reveal .portfolio-card.in-view,.reveal .why-choose-card.in-view,.reveal .hub-card.in-view,
.reveal .press-item.in-view,.reveal .metrics__item.in-view,.reveal .source-card.in-view,
.reveal .download-link.in-view,.reveal .faq__item.in-view,.reveal .step.in-view,
.reveal .coverage-chip.in-view,.reveal .timeline__item.in-view{
  opacity:1;
  transform:none;
}
.reveal .card:nth-child(1),.reveal .metrics__item:nth-child(1),.reveal .step:nth-child(1),
.reveal .why-choose-card:nth-child(1),.reveal .hub-card:nth-child(1),.reveal .faq__item:nth-child(1),
.reveal .download-link:nth-child(1),.reveal .source-card:nth-child(1),.reveal .coverage-chip:nth-child(1){transition-delay:.02s}
.reveal .card:nth-child(2),.reveal .metrics__item:nth-child(2),.reveal .step:nth-child(2),
.reveal .why-choose-card:nth-child(2),.reveal .hub-card:nth-child(2),.reveal .faq__item:nth-child(2),
.reveal .download-link:nth-child(2),.reveal .source-card:nth-child(2),.reveal .coverage-chip:nth-child(2){transition-delay:.08s}
.reveal .card:nth-child(3),.reveal .metrics__item:nth-child(3),.reveal .step:nth-child(3),
.reveal .why-choose-card:nth-child(3),.reveal .hub-card:nth-child(3),.reveal .faq__item:nth-child(3),
.reveal .download-link:nth-child(3),.reveal .source-card:nth-child(3),.reveal .coverage-chip:nth-child(3){transition-delay:.14s}
.reveal .card:nth-child(4),.reveal .why-choose-card:nth-child(4),.reveal .faq__item:nth-child(4),
.reveal .metrics__item:nth-child(4),.reveal .source-card:nth-child(4),.reveal .coverage-chip:nth-child(4){transition-delay:.2s}
.reveal .why-choose-card:nth-child(5),.reveal .coverage-chip:nth-child(5),.reveal .faq__item:nth-child(5){transition-delay:.26s}
.reveal .ahead-row,.reveal .contact-form{
  opacity:0;
  transform:translateY(18px);
}
.reveal .ahead-row.in-view,.reveal .contact-form.in-view{
  opacity:1;
  transform:none;
}

@media (prefers-reduced-motion:reduce){
  html:focus-within{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .reveal,.reveal > *{opacity:1 !important;transform:none !important}
  .page-head h1,.page-head .lead,.page-head .eyebrow,.page-head .breadcrumb{animation:none !important}
  .btn--primary::after,.btn.btn-primary::after{display:none}
}

/* ==========================================================================
   Lightbox (prensa)
   ========================================================================== */
.lightbox{
  position:fixed;
  inset:0;
  z-index:1500;
  display:none;
  place-items:center;
  padding:var(--gutter);
  background:rgba(4,5,7,.9);
}
@supports (backdrop-filter:blur(1px)){
  .lightbox{backdrop-filter:blur(6px)}
}
.lightbox.is-open{display:grid}
.lightbox-dialog{
  position:relative;
  max-width:min(980px,100%);
  display:flex;
  flex-direction:column;
  gap:12px;
}
.lightbox-dialog img{
  max-height:78vh;
  width:auto;
  margin-inline:auto;
  border:1px solid var(--line);
  border-radius:var(--r-md);
}
.lightbox-caption{text-align:center;font-size:var(--step--1);color:var(--text-muted)}
.lightbox-close{
  position:absolute;
  top:-52px;right:0;
  width:44px;height:44px;
  border:1px solid var(--line-strong);
  border-radius:var(--r-sm);
  background:var(--surface);
  font-size:1.4rem;
  line-height:1;
  cursor:pointer;
}
.lightbox-close:hover{background:var(--surface-2)}

/* ==========================================================================
   WhatsApp flotante
   ========================================================================== */
.wa-fab{
  position:fixed;
  right:clamp(14px,3vw,24px);
  bottom:calc(clamp(14px,3vw,24px) + env(safe-area-inset-bottom,0px));
  z-index:900;
  display:inline-flex;
  align-items:center;
  gap:11px;
  padding:10px 16px 10px 12px;
  border:1px solid var(--line-strong);
  border-radius:var(--r-full);
  background:var(--surface);
  box-shadow:var(--shadow-2);
  transition:transform var(--t-fast),border-color var(--t-fast);
}
@supports (backdrop-filter:blur(1px)){
  .wa-fab{backdrop-filter:blur(10px)}
}
.wa-fab:hover{transform:translateY(-2px);border-color:var(--brand-line)}
.wa-icon{display:grid;place-items:center;flex:none;color:var(--brand-strong)}
.wa-content{display:flex;flex-direction:column;line-height:1.25}
.wa-title{font-size:var(--step--1);font-weight:650}
.wa-subtitle{font-size:.72rem;color:var(--text-muted)}
@media (max-width:560px){
  .wa-fab{padding:12px;border-radius:50%}
  .wa-content{display:none}
}