/* ===========================================================
   e-Punto · variants.css
   Tres direcciones visuales — todas con paleta + tipos de marca.
   Se activan con body[data-v="..."]
     infra      → Infraestructura sobria (navy dominante, mucho aire)
     editorial  → Editorial energético (alto contraste, display enorme)
     producto   → Producto/SaaS limpio (fondos cemento/blanco)
   El acento se ajusta con body[data-accent] (teal | sky | lime)
   El hero claro/oscuro con body[data-hero]
   =========================================================== */

/* ===== ACENTOS (misma L/C, distinta H) ===== */
body[data-accent="teal"]{ --accent:#16C7D1; --accent-ink:#04222a; }
body[data-accent="sky"] { --accent:oklch(0.74 0.13 235); --accent-ink:#041627; }
body[data-accent="lime"]{ --accent:oklch(0.80 0.15 155); --accent-ink:#04220f; }

/* =====================================================
   DIRECCIÓN 1 · INFRA — navy dominante, sobrio, técnico
   ===================================================== */
body[data-v="infra"]{
  --page-bg:#0A1F3C;
  --page-fg:#EAF1F8;
  --page-fg-dim:rgba(234,241,248,.6);
  --surface:rgba(255,255,255,.045);
  --surface-fg:#EAF1F8;
  --surface-dim:rgba(234,241,248,.58);
  --border:rgba(255,255,255,.12);
  --hairline:rgba(255,255,255,.09);
  --radius:14px; --radius-lg:20px;
  --shadow:none;
  --display-weight:700; --display-tracking:-.02em; --display-leading:1.04;
  --section-py:clamp(80px,9vw,150px);
}
body[data-v="infra"] .nav{ background:rgba(10,31,60,.82); }
body[data-v="infra"] .band-item{ background:#0A1F3C; }
body[data-v="infra"] .field input,
body[data-v="infra"] .field select{ background:#08172d; }
/* sutil grid técnico de fondo en hero */
body[data-v="infra"] .hero::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background:
    linear-gradient(rgba(22,199,209,.05) 1px,transparent 1px) 0 0/100% 64px,
    radial-gradient(900px 500px at 75% 12%, rgba(22,199,209,.10), transparent 70%);
  mask:linear-gradient(180deg,#000 0%,#000 55%,transparent 100%);
}

/* =====================================================
   DIRECCIÓN 2 · EDITORIAL — alto contraste, titulares enormes
   ===================================================== */
body[data-v="editorial"]{
  --page-bg:#061123;          /* navy más profundo */
  --page-fg:#F4F8FC;
  --page-fg-dim:rgba(244,248,252,.6);
  --surface:rgba(255,255,255,.03);
  --surface-fg:#F4F8FC;
  --surface-dim:rgba(244,248,252,.55);
  --border:rgba(255,255,255,.14);
  --hairline:rgba(255,255,255,.1);
  --radius:4px; --radius-lg:6px;        /* esquinas casi rectas, editorial */
  --shadow:none;
  --display-weight:900; --display-tracking:-.035em; --display-leading:.95;
  --section-py:clamp(84px,10vw,168px);
  --maxw:1280px;
}
body[data-v="editorial"] h1.display{ font-size:clamp(3rem,8vw,7rem); text-transform:none; }
body[data-v="editorial"] h2.display{ font-size:clamp(2.4rem,5.6vw,4.6rem); }
body[data-v="editorial"] .eyebrow{ font-size:.7rem; letter-spacing:.32em; }
body[data-v="editorial"] .nav{ background:rgba(6,17,35,.84); border-bottom-color:rgba(255,255,255,.1); }
body[data-v="editorial"] .btn{ border-radius:2px; }
body[data-v="editorial"] .band-inner{ border-radius:0; border-left:0; border-right:0; gap:0; background:transparent; }
body[data-v="editorial"] .band-item{ background:transparent; border-right:1px solid var(--hairline); }
body[data-v="editorial"] .band-item:last-child{ border-right:0; }
body[data-v="editorial"] .band-item .stat-num{ font-size:clamp(2.4rem,4.4vw,3.6rem); }
/* bloque teal de impacto para B2C en editorial */
body[data-v="editorial"] .feature .fico{ border-radius:3px; }
body[data-v="editorial"] .seg,
body[data-v="editorial"] .seg button,
body[data-v="editorial"] .zero{ border-radius:2px; }
body[data-v="editorial"] .field input,
body[data-v="editorial"] .field select{ background:#040c1a; border-radius:3px; }
body[data-v="editorial"] .hero::before{
  content:""; position:absolute; right:0; top:0; width:46%; height:100%; pointer-events:none;
  background:radial-gradient(700px 600px at 80% 20%, rgba(22,199,209,.14), transparent 70%);
}
/* número gigante decorativo permitido en editorial */
body[data-v="editorial"] .step .num{ border-radius:3px; }

/* =====================================================
   DIRECCIÓN 3 · PRODUCTO — claro, cards, SaaS
   ===================================================== */
body[data-v="producto"]{
  --page-bg:#F4F7FB;
  --page-fg:#0A1F3C;
  --page-fg-dim:#5A6B82;
  --surface:#FFFFFF;
  --surface-fg:#0A1F3C;
  --surface-dim:#5A6B82;
  --border:#E2E8F0;
  --hairline:#E6ECF3;
  --radius:14px; --radius-lg:22px;
  --shadow:0 1px 2px rgba(10,31,60,.04), 0 12px 32px -16px rgba(10,31,60,.16);
  --display-weight:700; --display-tracking:-.02em; --display-leading:1.05;
  --section-py:clamp(76px,8.5vw,140px);
}
body[data-v="producto"] .nav{ background:rgba(10,31,60,.92); border-bottom-color:rgba(255,255,255,.1); backdrop-filter:saturate(120%) blur(6px); }
body[data-v="producto"] .nav-logo .wm{ color:#EAF1F8; }
body[data-v="producto"] .nav-links a{ color:rgba(234,241,248,.68); }
body[data-v="producto"] .nav-links a:hover{ color:var(--accent); }
body[data-v="producto"] .btn-ghost{ background:#fff; border-color:rgba(255,255,255,.25); color:#EAF1F8; }
body[data-v="producto"] .nav-burger span,
body[data-v="producto"] .nav-burger span::before,
body[data-v="producto"] .nav-burger span::after{ background:#EAF1F8; }
body[data-v="producto"] .nav-burger{ border-color:rgba(255,255,255,.2); }
/* reducir padding hero en variante producto */
body[data-v="producto"] .hero{ padding-top:clamp(32px,4.5vw,60px); padding-bottom:clamp(24px,3vw,40px); }
/* nav móvil: fondo oscuro sobre variante clara */
body[data-v="producto"].nav-open .nav-links{ background:rgba(10,31,60,.97) !important; border-bottom-color:rgba(255,255,255,.1) !important; }
body[data-v="producto"].nav-open .nav-links a{ color:rgba(234,241,248,.75) !important; }
/* hero: botón ghost legible sobre fondo claro */
body[data-v="producto"] .hero .btn-ghost{ background:#fff; border-color:rgba(10,31,60,.2); color:#0A1F3C; border-width:1.5px; }
body[data-v="producto"] .hero .btn-ghost:hover{ border-color:var(--accent); color:var(--accent); background:#fff; }
body[data-v="producto"] .band-inner{ background:#E2E8F0; border-color:#E2E8F0; }
body[data-v="producto"] .band-item{ background:#FFFFFF; }
body[data-v="producto"] .btn-ghost{ background:#fff; }
body[data-v="producto"] .ph{
  background:
    repeating-linear-gradient(135deg, rgba(10,31,60,.05) 0 12px, transparent 12px 24px),
    #EEF3F9;
  border-color:#D4DEEA;
}
body[data-v="producto"] .field input,
body[data-v="producto"] .field select{ background:#fff; }
/* sección oscura de contraste (B2B) en variante clara */
body[data-v="producto"] .section--dark{
  --page-bg:#0A1F3C; --page-fg:#EAF1F8; --page-fg-dim:rgba(234,241,248,.6);
  --surface:rgba(255,255,255,.05); --surface-fg:#EAF1F8; --surface-dim:rgba(234,241,248,.58);
  --border:rgba(255,255,255,.12); --hairline:rgba(255,255,255,.1); --shadow:none;
  background:var(--page-bg); color:var(--page-fg);
}
body[data-v="producto"] .section--dark .ph{
  background:repeating-linear-gradient(135deg, rgba(22,199,209,.1) 0 12px, transparent 12px 24px), rgba(255,255,255,.04);
  border-color:rgba(255,255,255,.12);
}

/* En infra/editorial, .section--dark no hace nada extra (ya son oscuras) */
body:not([data-v="producto"]) .section--alt{ background:rgba(255,255,255,.018); }
body[data-v="producto"] .section--alt{ background:#FFFFFF; }

/* ===== HERO claro forzado (Tweak) — solo afecta el hero ===== */
body[data-hero="light"] .hero{
  --page-bg:#F4F7FB; --page-fg:#0A1F3C; --page-fg-dim:#5A6B82;
  --surface:#fff; --surface-fg:#0A1F3C; --surface-dim:#5A6B82;
  --border:#E2E8F0; --hairline:#E6ECF3;
  background:#F4F7FB; color:#0A1F3C;
}
body[data-hero="light"] .hero .ph{
  background:repeating-linear-gradient(135deg, rgba(10,31,60,.05) 0 12px, transparent 12px 24px), #EEF3F9;
  border-color:#D4DEEA;
}
body[data-hero="light"] .nav{ background:rgba(244,247,251,.85); border-bottom-color:#E2E8F0; }
body[data-hero="light"] .nav-logo .wm{ color:#0A1F3C; }
body[data-hero="dark"] .hero{
  --page-bg:#0A1F3C; --page-fg:#EAF1F8; --page-fg-dim:rgba(234,241,248,.6);
  --surface:rgba(255,255,255,.045); --surface-fg:#EAF1F8; --surface-dim:rgba(234,241,248,.58);
  --border:rgba(255,255,255,.12); --hairline:rgba(255,255,255,.09);
  background:#0A1F3C; color:#EAF1F8;
}
body[data-hero="dark"] .hero .ph{
  background:repeating-linear-gradient(135deg, rgba(22,199,209,.1) 0 12px, transparent 12px 24px), rgba(255,255,255,.04);
  border-color:rgba(255,255,255,.12);
}