/* ============================================================
   AI-Gen · Design System v2 — "Tech-Editorial B2B Premium"
   McKinsey (autoridad) · Linear (precisión) · Stripe (claridad)
   Acento único: teal #0F766E · firma de color: logo a todo color
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root {
  /* Base */
  --ink:        #111827;   /* texto principal */
  --slate:      #1F2937;   /* texto secundario oscuro */
  --muted:      #667085;   /* texto auxiliar */
  --muted-2:    #98A2B3;   /* terciario / metadata */
  --navy:       #0B1F3A;   /* fondos premium / hero / footer */
  --navy-2:     #081628;   /* footer profundo */
  --navy-panel: #08172B;   /* paneles de producto sobre navy */
  --alabaster:  #F7F4ED;   /* fondo cálido principal */
  --paper:      #FFFFFF;   /* cards y bloques limpios */
  --line:       #D8DEE6;   /* bordes finos */
  --line-soft:  #E7EAF0;   /* separadores ligeros */

  /* Aliases usados por el sistema base */
  --paper-tint: var(--paper);

  /* Acento único — teal */
  --accent:       #0F766E;
  --accent-dark:  #115E59;   /* hover / texto sobre claro */
  --accent-soft:  #DDF5F1;   /* fondos de badge positivo */
  --accent-ink:   #0E6A62;   /* texto de acento sobre claro */
  --accent-line:  rgba(15,118,110,0.22);
  --accent-bright:#5FC9BD;   /* acento sobre navy */
  --accent-on-navy:#8FD8CF;  /* texto de acento sobre navy */

  /* Estados (muy sobrios) */
  --warning-soft: #F8E8C8;
  --warning-ink:  #8A6D2F;
  --risk-soft:    #F4D7D7;
  --risk-ink:     #9B3B3B;
  --neutral-soft: #EEF2F6;
  --neutral-ink:  #5A636E;

  /* Sobre navy */
  --on-navy:        #E7EEF6;
  --on-navy-muted:  #94A3B8;
  --on-navy-line:   rgba(255,255,255,0.10);
  --on-navy-line-2: rgba(255,255,255,0.06);
  --on-navy-card:   rgba(255,255,255,0.04);

  /* Logo (CUARENTENA — sólo firma de marca, nunca en UI) */
  --brand-blue:#1A73E8; --brand-yellow:#F4B000; --brand-green:#34A853; --brand-magenta:#D22960;

  /* Tipografía */
  --font-display: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-sans:    "Geist", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "Geist Mono", "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Espaciado (sistema 8px) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s6:24px; --s8:32px;
  --s12:48px; --s16:64px; --s24:96px; --s32:128px;

  /* Layout */
  --maxw: 1200px;
  --gut: clamp(16px, 4.5vw, 24px);
  --pad: clamp(16px, 5vw, 40px);

  /* Radios / sombra */
  --radius:    14px;
  --radius-sm: 10px;
  --radius-pill: 999px;
  --shadow:    0 10px 30px rgba(15,23,42,0.06);
  --shadow-lg: 0 24px 60px -28px rgba(11,31,58,0.32);
}

/* Variantes de acento (Tweaks) */
:root[data-accent="brand"]{ --accent:#1A73E8; --accent-dark:#145FC4; --accent-soft:#E1ECFD; --accent-ink:#145FC4; --accent-line:rgba(26,115,232,0.24); --accent-bright:#6AA6F2; --accent-on-navy:#A9CBF7; }
:root[data-accent="cobalt"]{ --accent:#2F4FE0; --accent-dark:#2740BC; --accent-soft:#E4E8FC; --accent-ink:#2740BC; --accent-line:rgba(47,79,224,0.24); --accent-bright:#7E91EF; --accent-on-navy:#AEB9F6; }

/* Variante tipográfica de titulares */
:root{ --font-h: var(--font-display); }
:root[data-headings="grotesk"]{ --font-h: var(--font-sans); }

/* ---------- 2. Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--alabaster); color:var(--ink);
  font-family:var(--font-sans); font-size:16px; line-height:1.65; font-weight:400;
  letter-spacing:-0.003em; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; cursor:pointer; }
::selection{ background:var(--accent-soft); color:var(--accent-dark); }

/* ---------- 3. Layout helpers ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }
.section{ padding-block:clamp(64px,11vw,128px); }
.section--tight{ padding-block:clamp(56px,8vw,96px); }
.band{ background:var(--paper); }
.navy{ background:var(--navy); color:var(--on-navy); }
.navy h1,.navy h2,.navy h3{ color:var(--on-navy); }
.divider{ border:0; border-top:1px solid var(--line); margin:0; }

/* ---------- 4. Tipografía ---------- */
h1,h2,h3,h4{ margin:0; font-weight:600; letter-spacing:-0.02em; color:var(--ink); }
.display{ font-family:var(--font-h); font-weight:500; font-size:clamp(2.75rem,5.6vw,4.5rem); line-height:1.0; letter-spacing:-0.03em; }
:root[data-headings="grotesk"] .display{ font-weight:640; letter-spacing:-0.04em; }
.h2{ font-family:var(--font-h); font-weight:500; font-size:clamp(2.0rem,3.6vw,3.5rem); line-height:1.06; letter-spacing:-0.03em; }
:root[data-headings="grotesk"] .h2{ font-weight:620; letter-spacing:-0.038em; }
.h3{ font-family:var(--font-h); font-weight:500; font-size:clamp(1.5rem,2.4vw,2.25rem); line-height:1.12; letter-spacing:-0.025em; }
:root[data-headings="grotesk"] .h3{ font-weight:600; }
.h-card{ font-size:1.3rem; font-weight:600; line-height:1.25; letter-spacing:-0.02em; font-family:var(--font-sans); }
.lead{ font-size:clamp(1.12rem,1.6vw,1.32rem); line-height:1.55; color:var(--muted); font-weight:400; max-width:44ch; }
.navy .lead{ color:var(--on-navy-muted); }
.prose{ max-width:64ch; color:var(--muted); }
.prose strong{ color:var(--ink); font-weight:600; }
.navy .prose{ color:var(--on-navy-muted); }
.navy .prose strong{ color:var(--on-navy); }

.eyebrow{ font-family:var(--font-mono); font-size:0.74rem; font-weight:500; letter-spacing:0.18em; text-transform:uppercase; color:var(--accent-ink); display:inline-flex; align-items:center; gap:0.7em; }
.navy .eyebrow{ color:var(--accent-on-navy); }
.eyebrow::before{ content:""; width:22px; height:1px; background:currentColor; opacity:0.55; }
.eyebrow--plain::before{ display:none; }
.idxnum{ font-family:var(--font-mono); font-size:0.82rem; color:var(--muted-2); letter-spacing:0.02em; }

.sec-head{ max-width:780px; }
.sec-head .h2{ margin-top:18px; }
.sec-head .lead{ margin-top:20px; }

/* ---------- 5. Botones ---------- */
.btn{ display:inline-flex; align-items:center; gap:0.5em; font-family:var(--font-sans); font-weight:600; font-size:0.95rem; letter-spacing:-0.005em; padding:0 1.35em; height:48px; border-radius:var(--radius-pill); border:1px solid transparent; transition:background .18s, border-color .18s, color .18s, transform .18s; }
.btn .ar{ transition:transform .2s; }
.btn:hover .ar{ transform:translateX(3px); }
.btn-primary{ background:var(--accent); color:#fff; border-color:var(--accent); }
.btn-primary:hover{ background:var(--accent-dark); border-color:var(--accent-dark); }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn-ghost:hover{ background:#F1F5F9; border-color:var(--line); }
.navy .btn-ghost{ color:var(--on-navy); border-color:var(--on-navy-line); }
.navy .btn-ghost:hover{ background:var(--on-navy-card); }
.btn-sm{ height:40px; font-size:0.88rem; padding:0 1.1em; }
.btn-lg{ height:52px; font-size:1rem; padding:0 1.6em; }
.link-arrow{ display:inline-flex; align-items:center; gap:0.5em; font-weight:600; color:var(--accent-ink); font-size:0.94rem; }
.link-arrow .ar{ transition:transform .2s; }
.link-arrow:hover .ar{ transform:translateX(3px); }
.navy .link-arrow{ color:var(--accent-on-navy); }

/* ---------- 6. Header ---------- */
.site-head{ position:sticky; top:0; z-index:50; background:color-mix(in srgb, var(--alabaster) 85%, transparent); backdrop-filter:saturate(140%) blur(12px); border-bottom:1px solid transparent; transition:border-color .2s, background .2s; }
.site-head.scrolled{ border-bottom-color:var(--line); }
.head-row{ display:flex; align-items:center; gap:26px; height:74px; }
.brand{ display:flex; align-items:center; gap:10px; }
.brand img{ width:34px; height:auto; }
.brand .bk{ display:flex; flex-direction:column; line-height:1; }
.brand .wm{ font-weight:700; font-size:1.12rem; letter-spacing:-0.03em; color:var(--ink); }
.brand .tag{ font-family:var(--font-mono); font-size:0.56rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--muted-2); margin-top:3px; }
.nav{ display:flex; align-items:center; gap:28px; margin-left:14px; }
.nav a{ font-size:0.93rem; color:var(--muted); font-weight:500; letter-spacing:-0.005em; transition:color .15s; position:relative; padding-block:6px; white-space:nowrap; }
.nav a:hover,.nav a.active{ color:var(--ink); }
.nav a.active::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--accent); border-radius:2px; }
.head-cta{ margin-left:auto; display:flex; align-items:center; gap:12px; }
.menu-btn{ display:none; background:none; border:0; padding:8px; }

/* ---------- 7. Footer ---------- */
.site-foot{ background:var(--navy-2); color:var(--on-navy); padding-block:72px 36px; }
.foot-grid{ display:grid; grid-template-columns:1.7fr 1fr 1fr 1.3fr; gap:48px; }
.foot-brand .wm{ font-weight:700; font-size:1.18rem; letter-spacing:-0.03em; }
.foot-brand .tagline{ font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.12em; color:var(--on-navy-muted); text-transform:uppercase; margin-top:8px; }
.foot-col h4{ font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--on-navy-muted); font-weight:500; margin-bottom:16px; }
.foot-col a{ display:block; color:var(--on-navy); opacity:0.82; font-size:0.93rem; padding-block:6px; transition:opacity .15s; }
.foot-col a:hover{ opacity:1; }
.foot-bottom{ display:flex; flex-wrap:wrap; gap:16px 28px; align-items:center; justify-content:space-between; margin-top:56px; padding-top:26px; border-top:1px solid var(--on-navy-line-2); }
.foot-bottom small,.foot-bottom a{ color:var(--on-navy-muted); font-size:0.82rem; }
.foot-bottom .legal{ display:flex; gap:22px; flex-wrap:wrap; }

/* ---------- 8. Cards ---------- */
.card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:30px; transition:border-color .2s, transform .2s, box-shadow .2s; }
.card:hover{ border-color:#C7D0DA; transform:translateY(-2px); box-shadow:var(--shadow); }
.navy .card{ background:var(--on-navy-card); border-color:var(--on-navy-line); }
.navy .card:hover{ border-color:var(--on-navy); }

/* ---------- 9. Bullets ---------- */
.bullets{ list-style:none; margin:0; padding:0; }
.bullets li{ display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:start; padding:13px 0; border-top:1px solid var(--line-soft); }
.bullets li:last-child{ border-bottom:1px solid var(--line-soft); }
.navy .bullets li{ border-color:var(--on-navy-line-2); }
.navy .bullets li:last-child{ border-bottom-color:var(--on-navy-line-2); }
.bullets .mk{ color:var(--accent); flex:none; margin-top:3px; }
.navy .bullets .mk{ color:var(--accent-on-navy); }
.bullets b{ font-weight:600; color:var(--ink); }
.navy .bullets b{ color:var(--on-navy); }
.bullets.compact li{ padding:9px 0; font-size:0.95rem; color:var(--muted); }
.navy .bullets.compact li{ color:var(--on-navy-muted); }

/* check bullets */
.checks{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }
.checks li{ display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:start; padding:10px 0; color:var(--muted); font-size:0.96rem; }
.checks .ck{ color:var(--accent); flex:none; margin-top:2px; }
.navy .checks{ } .navy .checks li{ color:var(--on-navy-muted); }
.navy .checks .ck{ color:var(--accent-on-navy); }

/* ---------- 10. Badges ---------- */
.badge{ display:inline-flex; align-items:center; gap:7px; font-family:var(--font-mono); font-size:0.7rem; letter-spacing:0.06em; text-transform:uppercase; padding:5px 10px; border-radius:var(--radius-pill); border:1px solid var(--accent-line); background:var(--accent-soft); color:var(--accent-dark); white-space:nowrap; }
.badge .dot{ width:6px; height:6px; border-radius:50%; background:var(--accent); }
.badge--review{ background:var(--neutral-soft); color:var(--neutral-ink); border-color:rgba(90,99,110,0.18); }
.badge--pending{ background:var(--neutral-soft); color:var(--muted-2); border-color:var(--line); }
.badge--risk{ background:var(--risk-soft); color:var(--risk-ink); border-color:rgba(155,59,59,0.18); }
.badge--warning{ background:var(--warning-soft); color:var(--warning-ink); border-color:rgba(138,109,47,0.2); }
.badge--pilot .dot{ background:#1AAE6F; box-shadow:0 0 0 0 rgba(26,174,111,0.5); animation:pulse 2.4s infinite; }
.navy .badge{ background:rgba(15,118,110,0.16); border-color:rgba(15,118,110,0.35); color:var(--accent-on-navy); }
.navy .badge--review{ background:var(--on-navy-card); border-color:var(--on-navy-line); color:var(--on-navy-muted); }
.navy .badge--pending{ background:rgba(255,255,255,0.05); border-color:var(--on-navy-line); color:var(--on-navy-muted); }
@keyframes pulse{ 0%{box-shadow:0 0 0 0 rgba(26,174,111,0.45);} 70%{box-shadow:0 0 0 7px rgba(26,174,111,0);} 100%{box-shadow:0 0 0 0 rgba(26,174,111,0);} }

/* ---------- 11. Iso cube motif ---------- */
.iso path,.iso line,.iso polygon{ fill:none; stroke:currentColor; stroke-width:1.4; vector-effect:non-scaling-stroke; }

/* ---------- 12. Image placeholder ---------- */
.ph{ position:relative; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:repeating-linear-gradient(135deg, transparent 0 11px, rgba(17,24,39,0.035) 11px 12px), var(--alabaster); display:flex; align-items:flex-end; padding:16px; }
.ph .ph-tag{ font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.04em; color:var(--muted-2); }

/* ---------- 13. Stat ---------- */
.stat .n{ font-family:var(--font-h); font-weight:500; font-size:clamp(2.2rem,3.6vw,3.2rem); line-height:1; letter-spacing:-0.03em; color:var(--ink); }
.stat .n .u{ color:var(--accent); }
.stat .l{ margin-top:8px; color:var(--muted); font-size:0.92rem; }
.navy .stat .n{ color:var(--on-navy); } .navy .stat .n .u{ color:var(--accent-on-navy); }
.navy .stat .l{ color:var(--on-navy-muted); }

/* ---------- 14. Step flow ---------- */
.flow{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.flow .step{ background:var(--paper); padding:24px 22px; }
.flow .step .k{ font-family:var(--font-mono); font-size:0.78rem; color:var(--accent-ink); letter-spacing:0.06em; }
.flow .step b{ display:block; margin:12px 0 6px; font-size:1.04rem; font-weight:600; letter-spacing:-0.01em; }
.flow .step p{ margin:0; color:var(--muted); font-size:0.9rem; }
.navy .flow{ background:var(--on-navy-line); border-color:var(--on-navy-line); }
.navy .flow .step{ background:var(--navy); }
.navy .flow .step .k{ color:var(--accent-on-navy); }
.navy .flow .step p{ color:var(--on-navy-muted); }

/* ---------- 15. Forms ---------- */
.field{ display:flex; flex-direction:column; gap:7px; }
.field label{ font-size:0.86rem; font-weight:600; color:var(--ink); }
.input,select.input,textarea.input{ font:inherit; font-size:0.97rem; padding:0.72em 0.85em; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-sm); color:var(--ink); transition:border-color .15s, box-shadow .15s; width:100%; }
.input:focus,select.input:focus,textarea.input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.input::placeholder{ color:var(--muted-2); }
.navy .input,.navy select.input{ background:rgba(255,255,255,0.05); border-color:var(--on-navy-line); color:var(--on-navy); }
.navy .input::placeholder{ color:var(--on-navy-muted); }
.form-done{ color:var(--accent-dark); font-size:0.95rem; margin:6px 0 0; font-weight:500; }
.navy .form-done{ color:var(--accent-on-navy); }

/* ---------- 16. Reveal ---------- */
@media (prefers-reduced-motion: no-preference){
  .reveal{ opacity:0; transform:translateY(16px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
  .reveal.in{ opacity:1; transform:none; }
}

/* ---------- 17. Grids ---------- */
.grid{ display:grid; gap:24px; }
.g-2{ grid-template-columns:repeat(2,1fr); }
.g-3{ grid-template-columns:repeat(3,1fr); }
.g-4{ grid-template-columns:repeat(4,1fr); }
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,6vw,80px); align-items:center; }
.split--top{ align-items:start; }

/* ---------- 18. Responsive ---------- */
@media (max-width: 960px){
  .foot-grid{ grid-template-columns:1fr 1fr; gap:36px; }
  .g-3,.g-4{ grid-template-columns:repeat(2,1fr); }
  .split{ grid-template-columns:1fr; }
  .nav,.head-cta .btn:not(.menu-btn){ display:none; }
  .menu-btn{ display:inline-flex; margin-left:auto; }
  .head-cta{ margin-left:0; }
}
@media (max-width: 600px){
  .g-2,.g-3,.g-4{ grid-template-columns:1fr; }
  .foot-grid{ grid-template-columns:1fr; }
}

/* ---------- 19. Mobile nav ---------- */
.mnav{ position:fixed; inset:0; z-index:60; background:var(--alabaster); display:none; flex-direction:column; padding:24px var(--pad); }
.mnav.open{ display:flex; }
.mnav .top{ display:flex; align-items:center; justify-content:space-between; height:50px; }
.mnav nav{ display:flex; flex-direction:column; gap:2px; margin-top:24px; }
.mnav nav a{ font-family:var(--font-h); font-size:1.7rem; padding:12px 0; border-bottom:1px solid var(--line); letter-spacing:-0.02em; }
.mnav .btn{ margin-top:28px; }

/* ---------- 20. Tweaks panel ---------- */
.tweaks{ position:fixed; right:18px; bottom:18px; z-index:80; font-family:var(--font-sans); }
.tweaks[hidden]{ display:none; }
.tweaks-toggle{ display:inline-flex; align-items:center; gap:8px; height:44px; padding:0 16px; border-radius:var(--radius-pill); background:var(--ink); color:#fff; border:0; font-size:0.86rem; font-weight:600; box-shadow:var(--shadow-lg); }
.tweaks-panel{ position:absolute; right:0; bottom:54px; width:260px; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-lg); padding:18px; display:none; }
.tweaks.open .tweaks-panel{ display:block; }
.tweaks-panel h5{ font-family:var(--font-mono); font-size:0.68rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--muted-2); margin:0 0 10px; font-weight:500; }
.tw-group{ margin-bottom:18px; }
.tw-row{ display:flex; gap:8px; }
.tw-opt{ flex:1; height:38px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--paper); font-size:0.82rem; font-weight:600; color:var(--muted); display:inline-flex; align-items:center; justify-content:center; gap:6px; transition:border-color .15s, color .15s; }
.tw-opt[aria-pressed="true"]{ border-color:var(--accent); color:var(--ink); box-shadow:0 0 0 3px var(--accent-soft); }
.tw-sw{ width:13px; height:13px; border-radius:50%; }