/* ===========================================================
   Associació NextGen — Motor de Retos Continuos
   Estilos del landing · blanco + la paleta azul de la marca (esnextgen.com)
   Sistema de diseño heredado de ProofVideo: mismos tokens,
   mismos nombres de clase, mismas sombras y radios.
   =========================================================== */

:root{
  /* Paleta real de la marca, muestreada del logotipo y de esnextgen.com */
  --blue:#0067FF;
  --blue-2:#3B8CFF;
  --blue-700:#0046AF;
  --blue-900:#00255D;
  --sky:#5EB9F1;
  --navy:#080D34;
  --navy-soft:#141C4A;
  --gray:#364151;
  --gray-2:#6B7280;
  --muted:#9AA7BD;

  --bg:#FFFFFF;
  --bg-soft:#F4FAFF;
  --bg-blue:#E7F6FF;
  --line:rgba(8,13,52,.08);
  --line-2:rgba(8,13,52,.14);

  --ok:#15A24A;
  --ok-bg:#E9F8EF;
  --ok-line:#B7E6C7;
  --bad:#DC2626;
  --bad-bg:#FDF1F1;
  --bad-line:#F4C7C7;
  --warn:#B45309;
  --warn-bg:#FFFBEB;
  --warn-line:#FDE68A;

  /* --- NextGen: acento del lado "talento joven" ---
     Es el celeste de la propia marca (#0170B9 / #5EB9F1, muestreados de esnextgen.com),
     no un violeta. Los nombres de token se conservan por compatibilidad con las clases
     .btn-violet / .eyebrow--violet / --grad-violet que ya usa el marcado. */
  --violet:#0170B9; --violet-2:#5EB9F1; --violet-700:#075B93;
  --violet-bg:#E6F4FD; --violet-line:rgba(1,112,185,.20);
  --grad-violet:linear-gradient(135deg,#5EB9F1 0%,#0170B9 58%,#075B93 100%);
  --shadow-violet:0 22px 44px -18px rgba(1,112,185,.45);

  /* niveles de credencial */
  --oro:#B7791F; --oro-bg:#FEF6E4; --oro-line:#F0D9A8;
  --plata:#64748B; --plata-bg:#F1F5F9; --plata-line:#CBD5E1;
  --bronce:#9A5B34; --bronce-bg:#FBF1EA; --bronce-line:#E7CBB6;

  --r-xs:10px; --r-sm:14px; --r:18px; --r-md:22px; --r-lg:28px; --r-xl:34px;

  --shadow-sm:0 1px 2px rgba(8,13,52,.06), 0 2px 8px -4px rgba(8,13,52,.08);
  --shadow:0 14px 34px -16px rgba(8,13,52,.22), 0 4px 12px -8px rgba(8,13,52,.12);
  --shadow-lg:0 36px 70px -26px rgba(8,13,52,.32), 0 12px 26px -14px rgba(8,13,52,.16);
  --shadow-blue:0 22px 44px -18px rgba(0,103,255,.5);
  /* Anillo de foco. Opaco a propósito: al 18 % de opacidad el contraste con el
     blanco era 1,29:1 y WCAG 2.2 (SC 1.4.11 / 2.4.11) exige 3:1. El primer
     anillo blanco separa el azul del borde del propio control. */
  --ring:0 0 0 2px #fff, 0 0 0 5px var(--blue);

  --maxw:1180px;
  --header-h:74px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --grad-blue:linear-gradient(135deg,#3B8CFF 0%,#0067FF 58%,#0046AF 100%);
  --grad-deep:linear-gradient(150deg,#0046AF 0%,#00255D 55%,#080D34 100%);
  --grad-soft:linear-gradient(180deg,#FFFFFF 0%,#F4FAFF 100%);

  --font:'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --mono:ui-monospace, 'SFMono-Regular', 'JetBrains Mono', Menlo, Consolas, monospace;
}

/* ---------- Reset / base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--font);
  color:var(--navy);
  background:var(--bg);
  line-height:1.6;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
h1,h2,h3,h4{ margin:0; line-height:1.14; letter-spacing:-.02em; color:var(--navy); font-weight:800; }
p{ margin:0; }
a{ color:inherit; text-decoration:none; }
ul,ol{ margin:0; padding:0; list-style:none; }
img,svg{ display:block; max-width:100%; }
button{ font-family:inherit; cursor:pointer; }
fieldset{ margin:0; padding:0; border:0; }
/* El foco se dibuja con outline, NO con box-shadow: los botones sólidos
   (.btn-primary, .btn-white, .page-tabs a.is-active) redeclaran box-shadow más
   abajo y ganaban por cascada, así que el anillo no llegaba a pintarse nunca.
   El outline sigue el border-radius del propio elemento, de modo que no hace
   falta forzar ninguno aquí. */
:focus-visible{ outline:3px solid var(--blue); outline-offset:2px; }
.btn-ghost-white:focus-visible,.cta-band :focus-visible{ outline-color:#fff; }

.mono{ font-family:var(--mono); letter-spacing:-.01em; }
.small{ font-size:.82rem; }
.is-hidden{ display:none !important; }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.skip-link{
  position:fixed; top:-60px; left:16px; z-index:200;
  background:var(--blue); color:#fff; padding:10px 16px; border-radius:10px;
  transition:top .2s var(--ease); font-weight:600;
}
.skip-link:focus{ top:12px; }

/* ---------- Layout ---------- */
.container{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 24px; }
.section{ padding:88px 0; position:relative; }
section[id]{ scroll-margin-top:calc(var(--header-h) + 16px); }

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.78rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  /* --blue-700 y no --blue: a 12,5 px el rótulo no es «texto grande», así que
     el umbral AA es 4,5:1 y #0067FF sobre #E7F6FF solo daba 4,34:1. */
  color:var(--blue-700); background:var(--bg-blue);
  padding:7px 14px; border-radius:999px; border:1px solid rgba(0,103,255,.14);
}
.eyebrow .icon{ width:15px; height:15px; }
/* Variante celeste para los bloques del lado "talento joven" */
.eyebrow--violet{ color:var(--violet-700); background:var(--violet-bg); border-color:var(--violet-line); }
.section-head{ max-width:720px; margin:0 auto 48px; text-align:center; }
.section-title{ font-size:clamp(1.7rem,3.4vw,2.5rem); margin-top:18px; }
.section-lead{ color:var(--gray); font-size:1.06rem; margin-top:14px; }

/* Rejillas genéricas de apoyo */
.duo-grid,.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:22px; align-items:start; }
.trio-grid,.three-col{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; align-items:start; }

/* ---------- Iconos ---------- */
.icon{
  width:22px; height:22px; flex:none;
  fill:none; stroke:currentColor; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round;
}

/* ---------- Botones ---------- */
.btn{
  --b:var(--blue);
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-weight:700; font-size:.95rem; line-height:1;
  padding:13px 20px; border-radius:13px; border:1.5px solid transparent;
  transition:transform .18s var(--ease), box-shadow .22s var(--ease), background .2s, color .2s, border-color .2s;
  white-space:nowrap; -webkit-tap-highlight-color:transparent;
}
.btn .icon{ width:18px; height:18px; }
.btn-lg{ padding:16px 26px; font-size:1rem; border-radius:14px; }
.btn-block{ width:100%; }
.btn-pill{ border-radius:999px; }
.btn-sm{ padding:7px 13px; font-size:.8rem; }

.btn-primary{ background:var(--grad-blue); color:#fff; box-shadow:var(--shadow-blue); }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 26px 50px -18px rgba(0,103,255,.62); }
.btn-primary:active{ transform:translateY(0); }

/* Variante profunda: llamada dirigida a jóvenes (azul oscuro de marca) */
.btn-violet{ background:var(--grad-deep); color:#fff; box-shadow:0 22px 44px -18px rgba(0,37,93,.55); }
.btn-violet:hover{ transform:translateY(-2px); box-shadow:0 26px 50px -18px rgba(0,37,93,.66); }
.btn-violet:active{ transform:translateY(0); }

.btn-outline{ background:#fff; color:var(--blue); border-color:rgba(0,103,255,.28); box-shadow:var(--shadow-sm); }
.btn-outline:hover{ border-color:var(--blue); background:var(--bg-blue); transform:translateY(-2px); }

.btn-ghost{ background:transparent; color:var(--navy); border-color:var(--line-2); }
.btn-ghost:hover{ background:var(--bg-soft); border-color:var(--blue); color:var(--blue); }

.btn-danger-soft{ background:var(--bad-bg); color:var(--bad); border-color:var(--bad-line); }
.btn-danger-soft:hover{ background:#fce4e4; transform:translateY(-2px); }

.btn-white{ background:#fff; color:var(--blue); box-shadow:var(--shadow); }
.btn-white:hover{ transform:translateY(-2px); box-shadow:var(--shadow-lg); }
.btn-ghost-white{ background:rgba(255,255,255,.1); color:#fff; border-color:rgba(255,255,255,.55); }
.btn-ghost-white:hover{ background:rgba(255,255,255,.2); }

.btn[disabled]{ opacity:.75; cursor:progress; }
.spin{
  width:16px; height:16px; border-radius:50%;
  border:2px solid rgba(255,255,255,.45); border-top-color:#fff;
  display:inline-block; animation:spin .7s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ---------- Tarjetas y filas ---------- */
.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow); padding:26px;
}
.card > h3{ font-size:1.1rem; }
.rows{ display:grid; }
.rows > div{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:11px 0; border-bottom:1px dashed var(--line);
}
.rows > div:last-child{ border-bottom:0; }
.rows dt{ color:var(--gray); font-size:.86rem; font-weight:500; }
.rows dd{ font-weight:700; color:var(--navy); text-align:right; }

/* Listas con marca de verificación */
.check-list{ display:grid; gap:14px; }
.check-list li{ display:flex; align-items:flex-start; gap:11px; color:var(--gray); font-size:.95rem; }
.check-list li strong{ display:block; color:var(--navy); }
.check-list .icon{ width:19px; height:19px; color:var(--ok); stroke-width:2; flex:none; margin-top:2px; }
.check-list--violet .icon{ color:var(--violet); }
.check-list--blue .icon{ color:var(--blue); }

/* ---------- Badges ---------- */
.badge{
  display:inline-flex; align-items:center; gap:6px;
  font-size:.8rem; font-weight:700; padding:5px 11px; border-radius:999px;
  border:1px solid transparent; white-space:nowrap;
}
.badge .icon{ width:15px; height:15px; stroke-width:2; }
.badge-ok{ color:var(--ok); background:var(--ok-bg); border-color:var(--ok-line); }
.badge-bad{ color:var(--bad); background:var(--bad-bg); border-color:var(--bad-line); }
.badge-warn{ color:var(--warn); background:var(--warn-bg); border-color:var(--warn-line); }
/* Niveles de credencial (también los usa el panel) */
.badge-oro{ color:var(--oro); background:var(--oro-bg); border-color:var(--oro-line); }
.badge-plata{ color:var(--plata); background:var(--plata-bg); border-color:var(--plata-line); }
.badge-bronce{ color:var(--bronce); background:var(--bronce-bg); border-color:var(--bronce-line); }

/* ---------- Formularios ---------- */
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field{ display:flex; flex-direction:column; gap:7px; }
.field-full{ grid-column:1 / -1; }
.field label{ font-size:.85rem; font-weight:600; color:var(--navy); }
.input{
  width:100%; font-family:inherit; font-size:.95rem; color:var(--navy);
  padding:12px 14px; border-radius:12px; border:1.5px solid var(--line-2); background:#fff;
  transition:border-color .18s, box-shadow .18s; resize:vertical;
}
.input::placeholder{ color:var(--muted); }
.input:focus{ outline:none; border-color:var(--blue); box-shadow:var(--ring); }

.seg{ display:block; margin-bottom:10px; cursor:pointer; }
.seg input{ position:absolute; opacity:0; pointer-events:none; }
.seg-body{
  display:block; padding:13px 16px 13px 44px; position:relative;
  border:1.5px solid var(--line-2); border-radius:13px; transition:.18s; background:#fff;
}
.seg-body::before{
  content:""; position:absolute; left:16px; top:50%; transform:translateY(-50%);
  width:18px; height:18px; border-radius:50%; border:2px solid var(--line-2); transition:.18s;
}
.seg-body strong{ display:block; font-size:.93rem; color:var(--navy); }
.seg-body small{ color:var(--gray-2); font-size:.82rem; }
.seg:hover .seg-body{ border-color:rgba(0,103,255,.4); }
.seg input:checked + .seg-body{ border-color:var(--blue); background:var(--bg-blue); box-shadow:0 0 0 3px rgba(0,103,255,.1); }
.seg input:checked + .seg-body::before{ border-color:var(--blue); background:radial-gradient(circle, var(--blue) 0 38%, #fff 46%); }
.seg input:focus-visible + .seg-body{ box-shadow:var(--ring); }

.check{ display:inline-flex; align-items:center; gap:9px; cursor:pointer; font-size:.88rem; color:var(--gray); font-weight:500; }
.check input{ width:18px; height:18px; accent-color:var(--blue); cursor:pointer; flex:none; }

.form-note{ display:flex; align-items:flex-start; gap:8px; margin-top:14px; font-size:.82rem; color:var(--gray-2); line-height:1.5; }
.form-note .icon{ width:16px; height:16px; color:var(--blue); flex:none; margin-top:2px; }

/* ---------- Avisos: nota legal y rótulo de demo ---------- */
.legal-note{
  display:flex; align-items:flex-start; gap:11px;
  padding:14px 16px; border-radius:var(--r-sm);
  background:var(--bg-soft); border:1px solid var(--line);
  color:var(--gray); font-size:.85rem; line-height:1.55;
}
.legal-note .icon{ width:17px; height:17px; color:var(--blue); flex:none; margin-top:2px; }
.legal-note strong{ color:var(--navy); }
.legal-note--center{ justify-content:center; text-align:left; max-width:760px; margin:0 auto; }

.demo-banner{
  display:flex; align-items:flex-start; gap:11px;
  padding:12px 16px; border-radius:var(--r-sm);
  background:var(--warn-bg); border:1px solid var(--warn-line);
  color:var(--warn); font-size:.85rem; font-weight:600; line-height:1.5;
}
.demo-banner .icon{ width:17px; height:17px; flex:none; margin-top:2px; }

/* ===========================================================
   HEADER
   =========================================================== */
.site-header{
  position:sticky; top:0; z-index:80;
  background:rgba(255,255,255,.72);
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid transparent;
  transition:background .25s, border-color .25s, box-shadow .25s;
}
.site-header.is-scrolled{ background:rgba(255,255,255,.88); border-bottom-color:var(--line); box-shadow:var(--shadow-sm); }
.header-inner{ min-height:var(--header-h); display:flex; align-items:center; gap:18px; }

.brand{ display:flex; align-items:center; gap:11px; }
.brand-mark{
  width:38px; height:38px; border-radius:11px; display:grid; place-items:center;
  background:var(--grad-blue); color:#fff; box-shadow:var(--shadow-blue);
}
.brand-mark .icon{ width:21px; height:21px; stroke-width:1.9; }
.brand-mark.sm{ width:34px; height:34px; border-radius:10px; }
.brand-text{ display:flex; flex-direction:column; line-height:1; }

/* El logotipo es el wordmark en minúsculas, monocromo y sin subtítulo.
   Sobre fondo claro va dentro de su placa navy (.brand-logo); sobre
   fondos ya oscuros se usa suelto y en blanco. */
.brand-next{
  font-weight:800; font-size:1.18rem; letter-spacing:-.035em;
  text-transform:lowercase; color:var(--navy); line-height:1;
}
.brand-logo{
  display:inline-flex; align-items:center; justify-content:center;
  height:34px; padding:0 12px; border-radius:10px;
  background:var(--navy); box-shadow:none;
}
.brand-logo .brand-next{ color:#fff; font-size:1.02rem; }
.brand-logo.lg{ height:38px; padding:0 13px; border-radius:11px; }
.brand-logo.lg .brand-next{ font-size:1.05rem; }
.nav{ display:flex; align-items:center; gap:4px; margin-left:auto; }
/* `flex:none` + `nowrap`: por defecto los hijos de un flex encogen, y las
   entradas de dos palabras («Cómo funciona», «Ser socio») se partían en dos
   líneas y descuadraban la altura de la cabecera. */
.nav-link{
  position:relative; font-size:.92rem; font-weight:600; color:var(--gray);
  padding:9px 13px; border-radius:9px; transition:color .18s, background .18s;
  flex:none; white-space:nowrap;
}
.nav-link:hover{ color:var(--navy); background:var(--bg-soft); }
.nav-link.is-active{ color:var(--blue); }
.nav-link.is-active::after{
  content:""; position:absolute; left:13px; right:13px; bottom:3px; height:2px;
  background:var(--blue); border-radius:2px;
}
.nav-link--accent{ color:var(--blue); font-weight:700; }
.nav-cta{ display:none; }

.header-actions{ display:flex; align-items:center; gap:10px; margin-left:8px; }
.header-login{ padding-top:10px; padding-bottom:10px; }
.nav-toggle{
  display:none; width:42px; height:42px; border-radius:11px;
  border:1px solid var(--line-2); background:#fff; color:var(--navy);
  align-items:center; justify-content:center;
}
.nav-toggle .icon{ width:22px; height:22px; }
.icon-close{ display:none; }

/* ===========================================================
   1 · HERO (#inicio)
   =========================================================== */
.hero{ padding:72px 0 96px; }
.hero-bg{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(720px 480px at 88% -6%, rgba(94,185,241,.24), transparent 60%),
    radial-gradient(560px 420px at -6% 8%, rgba(0,103,255,.12), transparent 58%),
    var(--grad-soft);
}
.hero-inner{ display:grid; grid-template-columns:1.05fr .95fr; gap:54px; align-items:center; }
.hero-title{ font-size:clamp(2.2rem,4.6vw,3.5rem); margin:0; }
.hero-title .hl{
  background:linear-gradient(120deg,var(--blue-2),var(--blue));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-lead{ color:var(--gray); font-size:1.12rem; margin-top:20px; max-width:540px; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:30px; }
.hero-points{ display:flex; flex-wrap:wrap; gap:18px 26px; margin-top:30px; }
.hero-points li{ display:flex; align-items:center; gap:9px; color:var(--navy); font-weight:600; font-size:.92rem; }
.hero-points .icon{ width:19px; height:19px; color:var(--ok); stroke-width:2; }

/* Visual del hero: red de nodos + credencial flotante */
.hero-visual{ position:relative; display:grid; place-items:center; min-height:430px; }
.hero-net{ position:absolute; inset:0; width:100%; height:100%; opacity:.9; }
.hero-net .net-lines line{ stroke:rgba(0,103,255,.22); stroke-width:1.4; }
.hero-net .net-dots circle{ fill:#fff; stroke:var(--blue); stroke-width:2; }
.hero-net .net-dots circle:nth-child(2){ fill:var(--violet); stroke:var(--violet); }

/* Tarjeta de credencial flotante (.cred-card; .cert-card se acepta como alias) */
.cred-card,.cert-card{
  position:relative; z-index:2; width:min(420px,100%);
  background:rgba(255,255,255,.92); backdrop-filter:blur(6px);
  border:1px solid var(--line); border-radius:var(--r-xl);
  box-shadow:var(--shadow-lg); padding:24px;
}
.cred-card-top,.cert-card-top{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding-bottom:16px; border-bottom:1px solid var(--line);
}
.cred-card-title,.cert-card-title{ display:flex; align-items:center; gap:12px; }
.cred-logo,.cert-logo{
  width:42px; height:42px; border-radius:12px; display:grid; place-items:center;
  background:var(--violet-bg); color:var(--violet); flex:none;
}
.cred-card-title strong,.cert-card-title strong{ display:block; font-size:1rem; color:var(--navy); }
.cred-card-title span,.cert-card-title span{ font-size:.8rem; color:var(--gray-2); }
.seal{
  display:inline-flex; align-items:center; gap:6px;
  font-size:.74rem; font-weight:700; color:var(--violet-700);
  background:var(--violet-bg); border:1px solid var(--violet-line);
  padding:6px 11px; border-radius:999px; white-space:nowrap;
}
.seal .icon{ width:15px; height:15px; }
.seal.is-ok{ color:var(--ok); background:var(--ok-bg); border-color:var(--ok-line); }
.cred-rows,.cert-rows{ margin:8px 0 16px; }
.cred-rows dd,.cert-rows dd{ font-size:.9rem; }
.cred-card-foot,.cert-card-foot{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding-top:14px; border-top:1px solid var(--line); color:var(--gray);
  font-size:.8rem; font-weight:600;
}
.cred-card-foot span:first-child,.cert-card-foot span:first-child{ display:inline-flex; align-items:center; gap:7px; }
.cred-card-foot .icon,.cert-card-foot .icon{ width:16px; height:16px; color:var(--violet); }

.chip{
  position:absolute; z-index:3; display:inline-flex; align-items:center; gap:7px;
  background:#fff; border:1px solid var(--line); border-radius:12px;
  padding:9px 13px; font-size:.78rem; font-weight:700; color:var(--navy);
  box-shadow:var(--shadow); animation:float 5s ease-in-out infinite;
}
.chip .icon{ width:17px; height:17px; color:var(--blue); }
.chip-1{ top:6%; left:-2%; }
.chip-2{ bottom:14%; left:-5%; animation-delay:1.4s; }
.chip-3{ bottom:2%; right:-2%; animation-delay:.7s; }
.chip-2 .icon,.chip-3 .icon{ color:var(--violet); }
@keyframes float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-9px); } }

/* ===========================================================
   2 · CIFRAS (#cifras) — .stat-band
   =========================================================== */
#cifras{ background:var(--bg-soft); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:56px 0; }
/* Funciona tanto si .stat-band es la sección como si es el propio .container */
.stat-band{ display:grid; grid-template-columns:repeat(4,1fr); }
.stat-band > .container{ grid-column:1 / -1; display:grid; grid-template-columns:repeat(4,1fr); }
.stat-item{ text-align:center; padding:10px 22px; border-left:1px solid var(--line); }
.stat-item:first-child{ border-left:0; }
.stat-num{
  display:block; font-size:clamp(2rem,4.4vw,2.9rem); font-weight:800;
  letter-spacing:-.03em; line-height:1.05;
  background:linear-gradient(120deg,var(--blue-2),var(--blue));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  font-variant-numeric:tabular-nums;
}
.stat-item:nth-child(2) .stat-num,.stat-band > .container .stat-item:nth-child(2) .stat-num{
  background:linear-gradient(120deg,var(--violet-2),var(--violet)); -webkit-background-clip:text; background-clip:text;
}
.stat-cap{ display:block; margin-top:12px; color:var(--navy); font-size:.94rem; font-weight:700; line-height:1.4; }
.stat-item small,.stat-src{ display:block; margin-top:7px; font-size:.76rem; color:var(--gray-2); font-weight:500; line-height:1.45; }

/* ===========================================================
   3 · LA ESCALERA ROTA (#problema) — .gap-grid
   =========================================================== */
#problema{ background:#fff; }
.gap-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.gap-card{
  display:flex; flex-direction:column; gap:12px; padding:26px 24px;
  transition:transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s;
}
.gap-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-lg); border-color:rgba(0,103,255,.18); }
.gap-card h3{ font-size:1.06rem; }
.gap-card p{ color:var(--gray); font-size:.94rem; }
.gap-card strong{ color:var(--navy); }
.gap-card cite,.gap-src{
  display:block; margin-top:auto; padding-top:12px; border-top:1px dashed var(--line);
  font-style:normal; font-size:.78rem; color:var(--gray-2); font-weight:600;
}
.gap-tag{
  display:inline-flex; align-items:center; gap:7px; align-self:flex-start;
  font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--blue); background:var(--bg-blue); border:1px solid rgba(0,103,255,.16);
  padding:5px 11px; border-radius:999px;
}
.gap-tag .icon{ width:14px; height:14px; }
.gap-tag--joven{ color:var(--violet-700); background:var(--violet-bg); border-color:var(--violet-line); }
.gap-tag--org{ color:var(--blue); background:var(--bg-blue); border-color:rgba(0,103,255,.16); }
.gap-card:has(.gap-tag--joven):hover{ border-color:var(--violet-line); }

/* ===========================================================
   4 · CÓMO FUNCIONA (#como) — .flow
   =========================================================== */
#como{ background:var(--bg-soft); }
.flow{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.flow-step{ position:relative; padding:28px 24px; text-align:center; }
.flow-step::after{
  content:""; position:absolute; top:50%; right:-17px; width:11px; height:11px;
  border-top:2px solid var(--line-2); border-right:2px solid var(--line-2);
  transform:translateY(-50%) rotate(45deg);
}
.flow-step:last-child::after{ display:none; }
.flow-num{
  width:56px; height:56px; border-radius:18px; display:grid; place-items:center;
  margin:0 auto 16px; background:var(--grad-blue); color:#fff;
  font-weight:800; font-size:1.15rem; box-shadow:var(--shadow-blue);
}
.flow-num .icon{ width:26px; height:26px; }
.flow-step h3{ font-size:1.05rem; }
.flow-step p{ color:var(--gray); margin-top:10px; font-size:.93rem; }

/* ===========================================================
   5 · ELIGE TU LADO (#para-ti) — .audience
   Conmutador de audiencia. Sin JS se ven los dos paneles: solo
   la clase .js del <html> activa el modo pestañas, de modo que
   el contenido nunca queda inaccesible.
   =========================================================== */
.audience{ background:var(--bg-soft); }

.aud-switch{
  display:grid; grid-template-columns:1fr 1fr; gap:10px;
  max-width:720px; margin:0 auto 38px; padding:7px;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-md);
  box-shadow:var(--shadow-sm);
}
.aud-tab{
  display:flex; align-items:center; gap:12px; text-align:left;
  padding:14px 16px; border:1.5px solid transparent; border-radius:var(--r-sm);
  background:transparent; color:var(--gray); font-family:inherit;
  transition:background .18s var(--ease), color .18s, border-color .18s, box-shadow .18s;
}
.aud-tab .icon{ width:22px; height:22px; flex:none; color:var(--muted); transition:color .18s; }
.aud-tab-text{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.aud-tab-text strong{ font-size:.98rem; font-weight:700; color:var(--navy); letter-spacing:-.01em; }
.aud-tab-text small{ font-size:.82rem; color:var(--gray-2); line-height:1.35; }
.aud-tab:hover{ background:var(--bg-soft); }
.aud-tab:hover .icon{ color:var(--blue); }
.aud-tab.is-active{ background:var(--bg-blue); border-color:rgba(0,103,255,.22); box-shadow:0 0 0 3px rgba(0,103,255,.08); }
.aud-tab.is-active .icon{ color:var(--blue); }
.aud-tab.is-active .aud-tab-text strong{ color:var(--blue-700); }
/* La pestaña de jóvenes usa el acento celeste */
.aud-tab[data-aud="joven"].is-active{ background:var(--violet-bg); border-color:var(--violet-line); box-shadow:0 0 0 3px rgba(1,112,185,.08); }
.aud-tab[data-aud="joven"].is-active .icon,
.aud-tab[data-aud="joven"].is-active .aud-tab-text strong{ color:var(--violet-700); }

/* Solo con JS se ocultan los paneles inactivos */
.js .aud-panel[hidden]{ display:none; }
.aud-panel[hidden]{ display:block; }        /* sin JS: todo visible */
.aud-panel:focus{ outline:none; }
.aud-panel.is-active{ animation:audIn .32s var(--ease); }
@keyframes audIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }

.aud-panel-head{ text-align:center; max-width:640px; margin:0 auto 28px; }
.aud-panel-head h3{ font-size:clamp(1.35rem,2.6vw,1.85rem); letter-spacing:-.02em; }
.aud-panel-head p{ color:var(--gray); margin-top:12px; font-size:1.02rem; }
.aud-panel .card-lead{ color:var(--gray); font-size:.95rem; margin-bottom:14px; }

/* ---------- Mensaje persuasivo ---------- */
.aud-pitch{
  display:grid; grid-template-columns:1.55fr .95fr; gap:34px; align-items:center;
  margin-top:26px; padding:38px 40px; border-radius:var(--r-lg);
  background:var(--grad-deep); color:#fff; box-shadow:var(--shadow-lg);
  position:relative; overflow:hidden;
}
.aud-pitch::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(520px 340px at 96% -20%, rgba(94,185,241,.34), transparent 62%);
}
.aud-pitch.is-org{ background:var(--grad-blue); box-shadow:var(--shadow-blue); }
.aud-pitch > *{ position:relative; z-index:1; }
.aud-pitch-ic{
  width:52px; height:52px; border-radius:15px; display:grid; place-items:center;
  background:rgba(255,255,255,.16); margin-bottom:18px;
}
.aud-pitch-ic .icon{ width:26px; height:26px; color:#fff; }
.aud-pitch h3{ color:#fff; font-size:clamp(1.3rem,2.5vw,1.75rem); }
.aud-pitch p{ color:rgba(255,255,255,.9); font-size:1rem; margin-top:14px; line-height:1.65; }
.aud-pitch strong{ color:#fff; font-weight:800; }
.aud-pitch-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }
.aud-pitch-actions .btn-violet,
.aud-pitch-actions .btn-primary{ background:#fff; color:var(--blue-700); box-shadow:var(--shadow); }
.aud-pitch-actions .btn-violet:hover,
.aud-pitch-actions .btn-primary:hover{ background:#fff; box-shadow:var(--shadow-lg); }
.aud-pitch-actions .btn-ghost,
.aud-pitch-actions .btn-outline{ background:rgba(255,255,255,.1); color:#fff; border-color:rgba(255,255,255,.5); }
.aud-pitch-actions .btn-ghost:hover,
.aud-pitch-actions .btn-outline:hover{ background:rgba(255,255,255,.2); border-color:#fff; color:#fff; }
.aud-pitch-fine{ font-size:.85rem !important; color:rgba(255,255,255,.66) !important; margin-top:16px !important; }

.aud-pitch-side{ display:grid; gap:12px; }
.aud-pitch-side li{
  display:flex; align-items:center; gap:13px;
  padding:13px 16px; border-radius:var(--r-sm);
  background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.22);
  color:#fff; font-weight:600; font-size:.92rem; line-height:1.35;
}
.aud-num{
  width:26px; height:26px; border-radius:8px; flex:none; display:grid; place-items:center;
  background:rgba(255,255,255,.2); font-size:.78rem; font-weight:800;
}
/* El degradado del panel de organizaciones es más claro que el de jóvenes:
   ahí las cajas llevan un velo oscuro para que el texto blanco mantenga
   holgura de contraste en cualquier punto del degradado, no solo en el
   extremo oscuro. */
.aud-pitch.is-org .aud-pitch-side li{
  background:rgba(8,13,52,.26); border-color:rgba(255,255,255,.28);
}
.aud-pitch.is-org .aud-num{ background:rgba(255,255,255,.26); }

@media (max-width:900px){
  .aud-pitch{ grid-template-columns:1fr; gap:26px; padding:30px 26px; }
}
@media (max-width:640px){
  .aud-switch{ grid-template-columns:1fr; }
  .aud-tab{ padding:12px 14px; }
  .aud-pitch-actions .btn{ width:100%; }
}

/* ===========================================================
   4bis · LOS TRES PILARES (#pilares) — .pillars
   Idea. Asume. Emprende. — el trío de la marca.
   =========================================================== */
#pilares{ background:var(--bg-blue); }
.pillars{ margin-bottom:26px; }
.pillar-card{
  padding:30px 26px; position:relative; overflow:hidden;
  transition:transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s;
}
.pillar-card::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px;
  background:var(--grad-blue);
}
.pillar-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-lg); border-color:rgba(0,103,255,.18); }
.pillar-card .side-ic{
  width:52px; height:52px; border-radius:15px; display:grid; place-items:center;
  background:var(--bg-blue); color:var(--blue); margin-bottom:18px;
}
.pillar-card .side-ic .icon{ width:26px; height:26px; }
.pillar-word{
  font-size:1.45rem; letter-spacing:-.03em; color:var(--navy);
}
.pillar-card p{ color:var(--gray); margin-top:10px; font-size:.95rem; }

/* ===========================================================
   5 · DOS LADOS (#dos-lados) — .sides
   =========================================================== */
#dos-lados{ background:#fff; }
.sides{ display:grid; grid-template-columns:1fr auto 1fr; gap:22px; align-items:stretch; }
.side-card{ position:relative; overflow:hidden; padding:30px 28px; }
.side-card::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:5px; background:var(--grad-blue); }
.side-card h3{ font-size:1.18rem; }
.side-card > p{ color:var(--gray); margin-top:10px; font-size:.95rem; }
.side-card ul{ margin-top:20px; display:grid; gap:13px; }
.side-card li{ display:flex; align-items:flex-start; gap:11px; color:var(--gray); font-size:.93rem; }
.side-card li .icon{ width:18px; height:18px; flex:none; margin-top:3px; stroke-width:2; }
.side-card--joven{ border-color:var(--violet-line); }
.side-card--joven::before{ background:var(--grad-violet); }
.side-card--joven .side-ic{ background:var(--violet-bg); color:var(--violet); }
.side-card--joven li .icon{ color:var(--violet); }
.side-card--org::before{ background:var(--grad-blue); }
.side-card--org .side-ic{ background:var(--bg-blue); color:var(--blue); }
.side-card--org li .icon{ color:var(--blue); }
.side-ic{
  width:50px; height:50px; border-radius:15px; display:grid; place-items:center;
  background:var(--bg-blue); color:var(--blue); margin-bottom:16px;
}
.side-ic .icon{ width:25px; height:25px; }
.side-arrows{
  display:grid; place-items:center; align-content:center; gap:10px;
  padding:0 6px; color:var(--muted); text-align:center; min-width:130px;
}
.side-arrows .icon{ width:26px; height:26px; color:var(--blue); }
.side-arrows .icon:last-of-type{ transform:rotate(180deg); color:var(--violet); }
.side-arrows strong{
  display:block; font-size:.78rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--navy);
}
.side-arrows span{ font-size:.8rem; color:var(--gray-2); }
.sides + .legal-note,.sides + .side-note{ margin-top:24px; }

/* ===========================================================
   6 · LISTAS DE LOS PANELES DE AUDIENCIA
   Ojo: #organizaciones y #jovenes ya no son secciones, son los
   paneles de #para-ti. Estas reglas van acotadas a .card a
   propósito: sin ese ámbito alcanzaban también a la lista de
   pasos del bloque persuasivo (.aud-pitch-side), y como llevan
   un #id ganaban en especificidad y la pintaban en gris oscuro
   sobre fondo azul oscuro, dejándola ilegible.
   =========================================================== */
#organizaciones .card ul:not(.check-list):not(.rows) li{
  display:flex; align-items:flex-start; gap:11px; color:var(--gray);
  font-size:.95rem; padding:10px 0; border-bottom:1px dashed var(--line);
}
#organizaciones .card ul:not(.check-list):not(.rows) li:last-child{ border-bottom:0; }
#organizaciones .card ul:not(.check-list):not(.rows) li .icon{ width:19px; height:19px; color:var(--blue); flex:none; margin-top:2px; }
#organizaciones .card ul li strong{ color:var(--navy); }

.highlight-card{
  display:flex; align-items:center; gap:20px; margin-top:24px;
  background:var(--grad-blue); color:#fff; border:0; box-shadow:var(--shadow-blue);
}
.highlight-card h3{ color:#fff; }
.highlight-card .hl-icon{
  width:58px; height:58px; border-radius:16px; display:grid; place-items:center;
  background:rgba(255,255,255,.16); flex:none;
}
.highlight-card .hl-icon .icon{ width:30px; height:30px; color:#fff; }
.highlight-card p{ font-size:1.08rem; font-weight:600; line-height:1.5; }
.highlight-card strong{ font-weight:800; }

#jovenes .card ul:not(.check-list):not(.rows) li{
  display:flex; align-items:flex-start; gap:11px; color:var(--gray);
  font-size:.95rem; padding:10px 0; border-bottom:1px dashed var(--line);
}
#jovenes .card ul:not(.check-list):not(.rows) li:last-child{ border-bottom:0; }
#jovenes .card ul:not(.check-list):not(.rows) li .icon{ width:19px; height:19px; color:var(--violet); flex:none; margin-top:2px; }
#jovenes .card ul li strong{ color:var(--navy); }
#jovenes .card{ border-color:var(--violet-line); }

/* ===========================================================
   9 · PANORAMA COMPETITIVO (#competencia) — .compet-list
   =========================================================== */
#competencia{ background:#fff; }
.compet-list{ display:grid; gap:12px; max-width:880px; margin:0 auto; }
.compet-row{
  display:flex; align-items:center; flex-wrap:wrap; gap:12px 20px;
  padding:16px 20px;
}
.compet-row strong{ flex:0 0 210px; font-size:.98rem; color:var(--navy); }
.compet-row p,.compet-row span.compet-note{ flex:1 1 200px; color:var(--gray-2); font-size:.86rem; }
.threat-track{
  flex:1 1 180px; max-width:300px; height:8px; border-radius:999px;
  background:rgba(8,13,52,.08); overflow:hidden;
}
.threat-bar{
  display:block; height:8px; width:0; border-radius:999px;
  background:linear-gradient(90deg,var(--warn-line),var(--bad));
  transition:width .8s var(--ease);
}
.threat-val{
  font-weight:800; color:var(--navy); font-variant-numeric:tabular-nums;
  min-width:56px; text-align:right; flex:none;
}
.compet-list + p,.compet-list + .legal-note,.compet-list + .highlight-card{ margin-top:24px; }
.compet-gap{
  max-width:880px; margin:24px auto 0; color:var(--gray); font-size:.98rem;
  padding:18px 22px; background:var(--bg-soft); border:1px solid var(--line); border-radius:var(--r-md);
}
.compet-gap strong{ color:var(--navy); }

/* ---- Cifras en vivo (transparencia.html) ---- */
.vivas{ grid-template-columns:repeat(4,1fr); }
@media (max-width:1024px){ .vivas{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .vivas{ grid-template-columns:1fr; } }
.vivas .card{ text-align:center; }
.viva-n{
  display:block; font-size:clamp(2rem,4.5vw,2.9rem); font-weight:800;
  letter-spacing:-.03em; color:var(--blue-700); font-variant-numeric:tabular-nums;
}
.viva-t{ display:block; margin-top:8px; font-size:.92rem; color:var(--gray); }

/* ---- Panel del socio (panel-socio.html) ---- */

/* Línea de hitos. El punto de cada hito lleva su propio color según el
   estado, y el hito clave rompe la escala para que se vea que es el que
   importa. */
.hitos{ list-style:none; margin:0; padding:0; display:grid; gap:0; }
.hito{ display:flex; gap:18px; padding:0 0 26px; position:relative; }
.hito:not(:last-child)::before{
  content:""; position:absolute; left:17px; top:38px; bottom:0;
  width:2px; background:var(--line-2);
}
.hito-pt{
  width:36px; height:36px; flex:none; border-radius:50%; display:grid; place-items:center;
  background:#fff; border:2px solid var(--line-2); color:var(--gray); position:relative; z-index:1;
}
.hito-pt .icon{ width:17px; height:17px; }
.hito.is-hecho .hito-pt{ background:var(--ok-bg); border-color:var(--ok-line); color:#15803D; }
.hito.is-curso .hito-pt{ background:var(--warn-bg); border-color:var(--warn-line); color:var(--warn); }
.hito.is-clave .hito-pt{ background:var(--grad-blue); border-color:transparent; color:#fff; box-shadow:var(--shadow-blue); }
/* Solo el TÍTULO del hito va en bloque. Sin acotar el selector, un <strong>
   dentro del párrafo también se volvía display:block y partía la frase. */
.hito > div > strong:first-child{ display:block; font-size:1.04rem; color:var(--navy); }
.hito p strong{ font-weight:700; color:var(--navy); }
.hito-f{ display:block; font-size:.85rem; font-weight:700; color:var(--blue-700); margin-top:2px; }
.hito p{ color:var(--gray); font-size:.94rem; margin-top:8px; }

/* Cuenta atrás. El número se escribe desde JS; en el HTML solo queda la fecha
   límite como texto de reserva, para que nunca se publique una CIFRA de días
   que ya no es cierta y para que sin JS el bloque siga diciendo algo. */
.cuenta{ margin-top:10px; display:grid; gap:18px; }
@media (min-width:820px){ .cuenta{ grid-template-columns:minmax(0,auto) minmax(0,1fr); align-items:center; gap:28px; } }
.cuenta-rot{ display:block; font-size:.76rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--gray); }
.cuenta-txt strong{ display:block; font-size:clamp(1.5rem,3.4vw,2.1rem); letter-spacing:-.02em; color:var(--blue-700); margin-top:8px; }
.cuenta-nota{ display:block; font-size:.9rem; color:var(--gray); margin-top:6px; }
.cuenta[data-estado="vence"] .cuenta-txt strong{ color:var(--warn); }
.cuenta[data-estado="vencido"] .cuenta-txt strong{ color:var(--bad); }
/* Sin JS el bloque enseña el texto de reserva del HTML, que es una fecha larga
   y no un número: se baja el cuerpo para que no desborde. */
html:not(.js) .cuenta-txt strong{ font-size:1.2rem; }
.cuenta-avi{ display:flex; gap:11px; align-items:flex-start; font-size:.92rem; color:var(--gray); }
.cuenta-avi .icon{ width:18px; height:18px; color:var(--warn); flex:none; margin-top:2px; }
.cuenta-avi strong{ color:var(--navy); }

/* Fichas de derecho: el botón y el artículo se anclan abajo para que las
   tarjetas de una misma fila terminen alineadas aunque el texto varíe. */
.derechos-grid{ grid-template-columns:repeat(2,1fr); }
@media (max-width:820px){ .derechos-grid{ grid-template-columns:1fr; } }
.derecho{ display:flex; flex-direction:column; gap:12px; }
.derecho h3{ font-size:1.06rem; }
.derecho p{ color:var(--gray); font-size:.94rem; flex:1; }
.derecho .btn{ align-self:flex-start; }
.derecho .socio-art{ padding-top:4px; }

/* ---- Ser socio (ser-socio.html) ----
   Dos columnas y no las tres que hereda de .gap-grid: son cuatro tarjetas y
   en tres columnas la cuarta se quedaba huérfana en una fila para ella sola.
   El sello del artículo se ancla abajo con margin-top:auto para que las
   cuatro lo alineen aunque los textos midan distinto. */
.socio-grid{ grid-template-columns:repeat(2,1fr); }
.socio-grid .gap-card{ display:flex; flex-direction:column; }
.socio-ic{
  width:48px; height:48px; border-radius:14px; display:grid; place-items:center;
  background:var(--bg-blue); color:var(--blue); margin-bottom:4px;
}
.socio-ic .icon{ width:24px; height:24px; }
.socio-art{
  margin-top:auto; align-self:flex-start; padding-top:16px;
  font-size:.72rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:var(--blue-700);
}

/* ===========================================================
   10 · SEGMENTOS (.aud-seg) — .seg-grid
   Vive dentro del panel de organizaciones de #para-ti, no como
   sección propia: la cabecera fija tapa el destino del ancla, de
   ahí el scroll-margin-top.
   =========================================================== */
.aud-seg{ margin-top:40px; padding-top:34px; border-top:1px solid var(--line); scroll-margin-top:96px; }
.aud-seg-head{ text-align:center; max-width:660px; margin:0 auto 26px; }
.aud-seg-head h3{ font-size:clamp(1.3rem,2.4vw,1.7rem); letter-spacing:-.02em; margin-top:12px; }
.aud-seg-head p{ color:var(--gray); margin-top:10px; font-size:1rem; }
.seg-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.seg-card{
  display:flex; flex-direction:column; gap:11px; padding:26px 24px;
  transition:transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s;
}
.seg-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-lg); border-color:rgba(0,103,255,.18); }
.seg-card h4{ font-size:1.05rem; }
.seg-card p{ color:var(--gray); font-size:.93rem; }
.seg-card .seg-ic{
  width:48px; height:48px; border-radius:14px; display:grid; place-items:center;
  background:var(--bg-blue); color:var(--blue); margin-bottom:4px;
}
.seg-card .seg-ic .icon{ width:24px; height:24px; }
.seg-prio{
  display:inline-flex; align-items:center; gap:7px; align-self:flex-start;
  font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  padding:5px 11px; border-radius:999px;
  color:var(--gray); background:var(--bg-soft); border:1px solid var(--line-2);
}
.seg-prio--p1{ color:#fff; background:var(--grad-blue); border-color:transparent; box-shadow:var(--shadow-blue); }
.seg-prio--p2{ color:var(--violet-700); background:var(--violet-bg); border-color:var(--violet-line); }
.seg-prio--p3{ color:var(--blue); background:var(--bg-blue); border-color:rgba(0,103,255,.16); }
.seg-prio--mision{ color:var(--ok); background:var(--ok-bg); border-color:var(--ok-line); }
.seg-prio--futuro{ color:var(--warn); background:var(--warn-bg); border-color:var(--warn-line); }

/* ===========================================================
   11 · IMPACTO (#impacto) — .sdg-row
   =========================================================== */
#impacto{ background:#fff; }
.sdg-row{ display:flex; flex-wrap:wrap; gap:18px; justify-content:center; }
.sdg-chip{
  display:flex; align-items:center; gap:15px; flex:1 1 280px; max-width:360px;
  padding:20px 22px; border-radius:var(--r-md);
  background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-sm);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease);
}
.sdg-chip:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.sdg-num{
  width:50px; height:50px; border-radius:15px; display:grid; place-items:center; flex:none;
  background:var(--grad-blue); color:#fff; font-weight:800; font-size:1.15rem;
}
.sdg-chip strong{ display:block; color:var(--navy); font-size:.98rem; }
.sdg-chip span{ display:block; color:var(--gray-2); font-size:.85rem; margin-top:2px; }
.sdg-row + .legal-note,.sdg-row + .highlight-card{ margin-top:26px; }

/* ===========================================================
   PÁGINAS INSTITUCIONALES (gobernanza.html, transparencia.html)
   =========================================================== */
.page-hero{ position:relative; padding:64px 0 46px; border-bottom:1px solid var(--line); }
.page-hero-bg{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(760px 460px at 88% -20%, rgba(94,185,241,.26), transparent 62%),
    radial-gradient(560px 400px at -6% 10%, rgba(0,103,255,.10), transparent 58%),
    var(--grad-soft);
}
.page-hero h1{ font-size:clamp(1.9rem,4vw,2.9rem); margin-top:18px; max-width:20ch; }
.page-hero-lead{ color:var(--gray); font-size:1.08rem; margin-top:16px; max-width:64ch; }

.page-tabs{ display:flex; flex-wrap:wrap; gap:8px; margin-top:30px; }
.page-tabs a{
  padding:10px 20px; border-radius:999px; font-weight:700; font-size:.92rem;
  color:var(--gray); background:#fff; border:1.5px solid var(--line-2);
  transition:color .16s, border-color .16s, background .16s, box-shadow .16s;
}
.page-tabs a:hover{ color:var(--blue); border-color:var(--blue); }
.page-tabs a.is-active{
  color:#fff; background:var(--grad-blue); border-color:transparent; box-shadow:var(--shadow-blue);
}

/* ===========================================================
   MAPA DEL SISTEMA (.sysmap) — el diagrama de gobernanza
   =========================================================== */
.gov-page{ background:var(--grad-soft); padding-bottom:0; }
.sysmap-head{ max-width:660px; margin:0 auto 34px; text-align:center; }
.sysmap-head h2{ font-size:clamp(1.5rem,3vw,2.1rem); }
.sysmap-head p{ color:var(--gray); margin-top:12px; font-size:1.02rem; }

.sysmap-canvas{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-xl);
  box-shadow:var(--shadow-lg); padding:26px; overflow-x:auto;
}
.sysmap-svg{ width:100%; min-width:640px; height:auto; display:block; }

/* Perímetro de la Junta Directiva */
.sysmap-junta rect{ fill:none; stroke:var(--line-2); stroke-width:2; stroke-dasharray:8 7; }
.sysmap-junta-tab rect{ fill:var(--bg-soft); stroke:none; }
.sysmap-junta-tab text{
  font-size:12.5px; font-weight:800; letter-spacing:.1em; fill:var(--gray-2);
  font-family:var(--font);
}
.sysmap-junta{ cursor:pointer; }
.sysmap-junta:hover rect:first-child,
.sysmap-junta.is-sel rect:first-child{ stroke:var(--blue); }
.sysmap-junta:hover .sysmap-junta-tab text,
.sysmap-junta.is-sel .sysmap-junta-tab text{ fill:var(--blue); }

/* Radios al núcleo */
.sysmap-spokes line{ stroke:var(--line-2); stroke-width:2; stroke-dasharray:5 6; }

/* Relaciones */
.sysmap-links .lnk{
  fill:none; stroke:var(--muted); stroke-width:2.4; color:var(--muted);
  transition:stroke .2s var(--ease), color .2s, stroke-width .2s;
}
.sysmap-links .lnk.is-on{ stroke:var(--blue); color:var(--blue); stroke-width:3.4; }
.sysmap-lbl text{
  font-size:13px; font-weight:700; fill:var(--gray-2); font-family:var(--font);
}

/* Núcleo */
.sysmap-core{ cursor:pointer; }
.sysmap-core circle{ fill:url(#gCentro); transition:filter .2s; }
.sysmap-core:hover circle,.sysmap-core.is-sel circle{ filter:drop-shadow(0 10px 22px rgba(0,103,255,.45)); }
.sysmap-core-n{ font-size:27px; font-weight:800; fill:#fff; text-anchor:middle; font-family:var(--font); letter-spacing:-.02em; }
.sysmap-core-t{ font-size:12.5px; font-weight:600; fill:rgba(255,255,255,.82); text-anchor:middle; font-family:var(--font); }

/* Órganos */
.sysmap-node{ cursor:pointer; }
.sysmap-node rect{ transition:filter .2s var(--ease), transform .2s var(--ease); }
.sysmap-node:hover rect,.sysmap-node.is-sel rect{ filter:drop-shadow(0 12px 24px rgba(8,13,52,.28)); }
.sysmap-node .n-tag{
  font-size:10.5px; font-weight:800; letter-spacing:.11em; fill:rgba(255,255,255,.78);
  text-anchor:middle; font-family:var(--font);
}
.sysmap-node .n-tit{
  font-size:18px; font-weight:800; fill:#fff; text-anchor:middle;
  font-family:var(--font); letter-spacing:-.02em;
}
.sysmap-asam rect{ fill:var(--navy); }
.sysmap-node:focus-visible rect{ stroke:var(--blue); stroke-width:3; }
.sysmap-junta:focus-visible rect:first-child,.sysmap-core:focus-visible circle{ stroke:var(--blue); stroke-width:3; }

/* Panel de detalle */
.sysmap-detail{ margin-top:22px; }
.sysmap-detail-inner{
  background:#fff; border:1px solid var(--line); border-left:4px solid var(--blue);
  border-radius:var(--r-md); padding:24px 26px; box-shadow:var(--shadow-sm);
  animation:audIn .28s var(--ease);
}
.sysmap-detail-tag{
  display:inline-block; font-size:.72rem; font-weight:800; letter-spacing:.1em;
  text-transform:uppercase; color:var(--blue); background:var(--bg-blue);
  padding:5px 11px; border-radius:999px; border:1px solid rgba(0,103,255,.16);
}
.sysmap-detail-inner h3{ font-size:1.24rem; margin-top:12px; }
.sysmap-detail-quien{
  display:inline-flex; align-items:center; gap:8px; margin-top:8px !important;
  font-weight:700 !important; color:var(--blue) !important; font-size:.95rem !important;
}
.sysmap-detail-quien::before{
  content:""; width:7px; height:7px; border-radius:50%; background:var(--blue); flex:none;
}
.sysmap-detail-inner p{ color:var(--gray); margin-top:12px; font-size:.98rem; line-height:1.7; }
/* Composición nombrada dentro del panel del diagrama */
.sysmap-detail-equipo{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:8px; margin-top:16px;
}
.sysmap-detail-equipo li{
  display:flex; flex-direction:column; gap:2px;
  padding:10px 13px; border-radius:11px;
  background:var(--bg-blue); border:1px solid rgba(0,103,255,.12);
}
.sysmap-detail-equipo strong{ color:var(--navy); font-size:.89rem; font-weight:700; line-height:1.25; }
.sysmap-detail-equipo span{ color:var(--gray); font-size:.79rem; line-height:1.3; }

.sysmap-detail-no{
  display:flex; align-items:flex-start; gap:10px;
  margin-top:16px !important; padding-top:14px; border-top:1px dashed var(--line);
  color:var(--gray-2) !important; font-size:.9rem !important;
}
.sysmap-detail-no .icon{ width:18px; height:18px; color:var(--bad); flex:none; margin-top:2px; }
.sysmap-detail-inner.is-lim{ border-left-color:var(--warn); }

@media (max-width:760px){
  .sysmap-canvas{ padding:16px; }
  .sysmap-detail-inner{ padding:20px; }
}

/* ===========================================================
   12 · GOBERNANZA (#gobernanza) — .gov
   =========================================================== */
.gov{ background:var(--bg-soft); }

.gov-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }
.gov-card{ display:flex; flex-direction:column; position:relative; overflow:hidden; padding-top:30px; }
.gov-card::before{ content:""; position:absolute; left:0; top:0; right:0; height:4px; background:var(--acento,var(--blue)); }
.gov-card h3{ font-size:1.14rem; margin-top:12px; }
.gov-card > p{ color:var(--gray); margin-top:10px; font-size:.95rem; }
.gov-tag{
  display:inline-flex; align-items:center; align-self:flex-start;
  font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  padding:5px 11px; border-radius:999px;
  color:var(--acento,var(--blue)); background:var(--acento-bg,var(--bg-blue));
  border:1px solid var(--acento-line,rgba(0,103,255,.16));
}
.gov-tag--dem{ --acento:var(--blue); --acento-bg:var(--bg-blue); --acento-line:rgba(0,103,255,.18); }
.gov-tag--tec{ --acento:var(--violet-700); --acento-bg:var(--violet-bg); --acento-line:var(--violet-line); }
.gov-tag--inst{ --acento:var(--blue-900); --acento-bg:#E4ECFA; --acento-line:rgba(0,37,93,.18); }
.gov-tag--sup{ --acento:var(--gray); --acento-bg:#EEF1F6; --acento-line:rgba(54,65,81,.16); }
.gov-card:has(.gov-tag--dem){ --acento:var(--blue); }
.gov-card:has(.gov-tag--tec){ --acento:var(--violet); }
.gov-card:has(.gov-tag--inst){ --acento:var(--blue-900); }
.gov-card:has(.gov-tag--sup){ --acento:var(--gray-2); }

.gov-rows{ margin:16px 0 0; }
.gov-rows dt{ font-size:.82rem; }
.gov-rows dd{ font-size:.86rem; }
.gov-limit{
  display:flex; align-items:flex-start; gap:9px; margin-top:auto; padding-top:16px;
  color:var(--gray-2); font-size:.86rem; line-height:1.5;
}
.gov-limit .icon{ width:17px; height:17px; color:var(--bad); flex:none; margin-top:1px; }

/* ---------- Equilibrio de poderes ---------- */
.gov-balance{ margin-top:22px; padding:32px; }
.gov-balance-head{ display:flex; align-items:flex-start; gap:16px; margin-bottom:24px; }
.gov-balance-ic{
  width:52px; height:52px; border-radius:15px; flex:none; display:grid; place-items:center;
  background:var(--grad-blue); color:#fff; box-shadow:var(--shadow-blue);
}
.gov-balance-ic .icon{ width:26px; height:26px; }
.gov-balance-head h3{ font-size:1.2rem; }
.gov-balance-head p{ color:var(--gray); margin-top:8px; font-size:.96rem; }
.gov-rules{ display:grid; gap:16px; }
.gov-rules li{ display:flex; align-items:flex-start; gap:14px; }
.gov-rule-n{
  width:30px; height:30px; border-radius:10px; flex:none; display:grid; place-items:center;
  background:var(--bg-blue); color:var(--blue); font-weight:800; font-size:.85rem;
}
.gov-rules strong{ display:block; color:var(--navy); font-size:.98rem; }
.gov-rules p{ color:var(--gray); font-size:.93rem; margin-top:5px; line-height:1.6; }

/* ---------- Teoría de juegos ---------- */
.gov-game{ margin-top:22px; }
.gov-game h3{ color:#fff; font-size:1.18rem; }
.gov-game p{ margin-top:10px; font-size:1rem; font-weight:500; }
.gov-game-grid{ margin-top:18px; }
.gov-game-grid h3{ font-size:1.02rem; }
.gov-game-grid p{ color:var(--gray); margin-top:10px; font-size:.93rem; }

/* ---------- Advisors y puerta abierta ---------- */
.gov-duo{ margin-top:22px; }
.gov-duo h3{ display:flex; align-items:center; gap:10px; font-size:1.1rem; }
.gov-h-ic{ width:20px; height:20px; color:var(--blue); flex:none; }
.gov-duo > .card > p{ color:var(--gray); margin-top:12px; font-size:.95rem; }
.gov-duo ul{ margin-top:14px; display:grid; gap:11px; }
.gov-duo li{ display:flex; align-items:flex-start; gap:11px; color:var(--gray); font-size:.94rem; line-height:1.55; }
.gov-duo li .icon{ width:18px; height:18px; color:var(--ok); flex:none; margin-top:3px; }
.gov-duo li strong{ color:var(--navy); }

.gov-note{
  display:flex; align-items:flex-start; gap:12px; margin-top:18px;
  padding:15px 17px; border-radius:var(--r-sm);
  background:var(--bg-blue); border:1px solid rgba(0,103,255,.14);
}
.gov-note .icon{ width:19px; height:19px; color:var(--blue); flex:none; margin-top:2px; }
.gov-note p{ color:var(--navy); font-size:.9rem; line-height:1.6; }

/* ---------- Composición provisional ---------- */
.gov-junta{ margin-top:22px; border-color:var(--warn-line); }
.gov-junta-head{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.gov-junta-head h3{ font-size:1.12rem; }
.badge-warn{ color:var(--warn); background:var(--warn-bg); border-color:var(--warn-line); }
.gov-junta > p{ color:var(--gray); margin-top:12px; font-size:.95rem; }
.gov-junta-list{ display:grid; gap:2px; margin-top:18px; }
.gov-junta-list li{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding:12px 0; border-bottom:1px dashed var(--line);
}
.gov-junta-list li:last-child{ border-bottom:0; }
.gov-junta-list span{ font-weight:700; color:var(--navy); font-size:.95rem; }
.gov-junta-list em{ font-style:normal; color:var(--gray-2); font-size:.87rem; text-align:right; }
/* ===========================================================
   BANDA DE APOYO (antes del pie)
   =========================================================== */
/* Va entre las preguntas frecuentes (blanco) y el CTA final (azul). Se separa
   con el fondo suave en vez de con una línea: dos zonas blancas con un filete
   en medio parecen una costura, no un cambio de bloque. */
.support-band{ background:var(--bg-soft); padding:42px 0; }
.support-inner{
  display:flex; flex-direction:column; align-items:center; gap:18px; text-align:center;
}
.support-lbl{
  font-size:.74rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gray-2);
}
.support-logo{
  display:inline-block; line-height:0;
  opacity:.72; filter:grayscale(1);
  transition:opacity .2s var(--ease), filter .2s var(--ease);
}
.support-logo:hover,.support-logo:focus-visible{ opacity:1; filter:none; }
.support-logo img{ width:auto; height:52px; max-width:100%; }
@media (max-width:560px){
  .support-logo img{ height:42px; }
}

/* Enlace a la fuente de un dato */
.src-link{
  display:inline; color:var(--gray-2); font-weight:600;
  border-bottom:1px dotted var(--line-2); text-decoration:none;
  transition:color .16s, border-color .16s;
}
.src-link .icon{
  width:11px; height:11px; display:inline-block; vertical-align:-1px;
  margin-left:3px; stroke-width:2.2;
}
.src-link:hover{ color:var(--blue); border-bottom-color:var(--blue); }
.src-link:focus-visible{ color:var(--blue); }

/* Enlace al perfil profesional */
.li-link{
  display:inline-grid; place-items:center; vertical-align:-3px;
  width:22px; height:22px; border-radius:6px; flex:none;
  color:var(--gray-2); background:transparent;
  transition:color .16s, background .16s;
}
.li-link .icon{ width:15px; height:15px; }
.li-link:hover{ color:#fff; background:#0A66C2; }
.li-link:focus-visible{ color:#fff; background:#0A66C2; }
.li-inline{ vertical-align:-4px; }

/* Miembros de la Junta Directiva */
.gov-team{ margin-top:20px; padding-top:18px; border-top:1px dashed var(--line); }
.gov-team-lbl{
  display:block; font-size:.72rem; font-weight:800; letter-spacing:.12em;
  text-transform:uppercase; color:var(--gray-2); margin-bottom:14px;
}
.gov-team-list{ display:grid; grid-template-columns:repeat(auto-fit,minmax(272px,1fr)); gap:12px; }
.gov-team-list li{
  display:flex; align-items:center; gap:13px;
  padding:13px 16px; border-radius:var(--r-sm);
  background:var(--bg-blue); border:1px solid rgba(0,103,255,.14);
  transition:border-color .18s, box-shadow .18s;
}
.gov-team-list li:hover{ border-color:rgba(0,103,255,.3); box-shadow:var(--shadow-sm); }
.gov-team-ini{
  width:38px; height:38px; border-radius:12px; flex:none; display:grid; place-items:center;
  background:var(--grad-blue); color:#fff; font-size:.82rem; font-weight:800; letter-spacing:.02em;
}
.gov-team-txt{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.gov-team-txt strong{ color:var(--navy); font-size:.94rem; font-weight:700; line-height:1.25; }
.gov-team-txt small{ color:var(--gray); font-size:.82rem; line-height:1.35; }
/* Quien todavía no tiene área asignada se marca sin estridencias */
.gov-team-list li.is-pend{ background:var(--bg-soft); border-style:dashed; }
.gov-team-list li.is-pend .gov-team-ini{ background:var(--muted); }
.gov-team-list li.is-pend .gov-team-txt small{ color:var(--gray-2); font-style:italic; }

.gov-junta-foot{ display:flex; align-items:center; gap:9px; margin-top:18px; color:var(--blue); font-weight:600; font-size:.9rem; }
.gov-junta-foot .icon{ width:17px; height:17px; flex:none; }

/* ===========================================================
   13 · TRANSPARENCIA (#transparencia) — .transp
   =========================================================== */
.transp{ background:#fff; }
.transp-grid .card{ display:flex; flex-direction:column; }
.transp-ic{
  width:50px; height:50px; border-radius:15px; display:grid; place-items:center;
  background:var(--bg-blue); color:var(--blue); margin-bottom:16px;
}
.transp-ic .icon{ width:25px; height:25px; }
.transp-grid h3{ font-size:1.06rem; }
.transp-grid ul{ margin-top:14px; display:grid; gap:11px; }
.transp-grid li{ display:flex; align-items:flex-start; gap:10px; color:var(--gray); font-size:.92rem; line-height:1.55; }
.transp-grid li .icon{ width:17px; height:17px; color:var(--ok); flex:none; margin-top:3px; }
.transp-grid li strong{ color:var(--navy); }
.transp-estado{ margin-top:26px; background:var(--warn-bg); border-color:var(--warn-line); }
.transp-estado .icon{ color:var(--warn); }
.transp-estado p{ color:#7C4A0B; }

/* ---------- Los estatutos ---------- */
.statutes{ margin-top:34px; }
.statutes-title{ font-size:1.2rem; }
.statutes-lead{ color:var(--gray); margin:10px 0 20px; font-size:.96rem; }
.statutes .faq-item{ margin-bottom:10px; }
.statutes .faq-body p + p{ margin-top:12px; }

@media (max-width:900px){
  .gov-grid{ grid-template-columns:1fr; }
  .gov-duo{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  .gov-balance{ padding:24px 20px; }
  .gov-balance-head{ flex-direction:column; gap:14px; }
  .gov-junta-list li{ flex-direction:column; gap:4px; }
  .gov-junta-list em{ text-align:left; }
}

/* ===========================================================
   14 · REGISTRO (#registro) — .reg-choice
   =========================================================== */
#registro{ background:var(--bg-soft); }
.reg-choice{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.reg-choice-card{
  display:flex; flex-direction:column; align-items:flex-start; gap:12px;
  width:100%; text-align:left; font:inherit; color:inherit; cursor:pointer;
  padding:28px 26px; border-radius:var(--r-lg);
  background:#fff; border:1.5px solid var(--line); box-shadow:var(--shadow-sm);
  transition:transform .22s var(--ease), box-shadow .22s var(--ease), border-color .2s, background .2s;
}
.reg-choice-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-lg); border-color:rgba(0,103,255,.32); }
.reg-choice-card h3{ font-size:1.15rem; }
.reg-choice-card p{ color:var(--gray); font-size:.94rem; }
.reg-choice-card .reg-ic{
  width:52px; height:52px; border-radius:15px; display:grid; place-items:center;
  background:var(--bg-blue); color:var(--blue);
}
.reg-choice-card .reg-ic .icon{ width:26px; height:26px; }
.reg-choice-card .btn{ margin-top:6px; }
.reg-choice-card--joven{ border-color:var(--violet-line); }
.reg-choice-card--joven:hover{ border-color:var(--violet); }
.reg-choice-card--joven .reg-ic{ background:var(--violet-bg); color:var(--violet); }
.reg-choice-card--org:hover{ border-color:var(--blue); }
.reg-form{ margin-top:26px; max-width:820px; margin-inline:auto; }
.reg-form .form-grid{ margin-top:18px; }
.reg-form .btn{ margin-top:18px; }
.reg-form .legal-note{ margin-top:16px; }

/* ===========================================================
   13 · PREGUNTAS FRECUENTES (#faq) — .faq
   =========================================================== */
#faq{ background:#fff; }
.faq{ display:grid; gap:12px; max-width:820px; margin:0 auto; }
.faq-item{
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow-sm); overflow:hidden;
  transition:box-shadow .2s, border-color .2s;
}
.faq-item[open]{ border-color:rgba(0,103,255,.22); box-shadow:var(--shadow); }
.faq-item summary{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:18px 22px; cursor:pointer; list-style:none;
  font-weight:700; font-size:.98rem; color:var(--navy);
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary:hover{ color:var(--blue); }
.faq-item summary:focus-visible{ box-shadow:var(--ring); border-radius:var(--r); }
/* Chevron propio solo si el markup no trae icono del sprite */
.faq-item summary:not(:has(.icon))::after{
  content:""; flex:none; width:10px; height:10px;
  border-right:2px solid var(--gray-2); border-bottom:2px solid var(--gray-2);
  transform:rotate(45deg) translateY(-2px); transition:transform .2s var(--ease);
}
.faq-item[open] summary:not(:has(.icon))::after{ transform:rotate(-135deg) translateY(-2px); }
.faq-item summary .icon{ color:var(--gray-2); transition:transform .2s var(--ease); }
.faq-item[open] summary .icon{ transform:rotate(180deg); color:var(--blue); }
.faq-item > p,.faq-item .faq-body{ padding:0 22px 20px; color:var(--gray); font-size:.95rem; line-height:1.6; }
.faq-item .faq-body p + p{ margin-top:10px; }
.faq-item strong{ color:var(--navy); }
.faq + .legal-note{ margin-top:24px; max-width:820px; margin-inline:auto; }

/* ===========================================================
   14 · CTA FINAL
   =========================================================== */
.cta-band{ background:var(--grad-blue); color:#fff; position:relative; overflow:hidden; }
.cta-band::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(560px 360px at 12% 120%, rgba(255,255,255,.18), transparent 60%),
    radial-gradient(520px 340px at 92% -20%, rgba(94,185,241,.42), transparent 62%);
}
.cta-inner{ max-width:760px; margin:0 auto; text-align:center; position:relative; }
.cta-inner h2{ color:#fff; font-size:clamp(1.8rem,3.6vw,2.6rem); }
.cta-inner p{ color:rgba(255,255,255,.9); font-size:1.1rem; margin-top:16px; }
.cta-actions{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:30px; }
.cta-tags,.hashtags{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:28px; }
.cta-tags span,.hashtag{
  font-size:.82rem; font-weight:700; color:#fff;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.4);
  padding:7px 14px; border-radius:999px;
}

/* ===========================================================
   15 · FOOTER (#contacto)
   =========================================================== */
.site-footer{ background:var(--navy); color:rgba(255,255,255,.72); padding:62px 0 28px; }
.site-footer .brand-next{ color:#fff; }
.footer-inner{ display:grid; grid-template-columns:1.2fr 1.8fr; gap:40px; }
.footer-brand p{ margin-top:18px; max-width:340px; font-size:.95rem; }
.footer-mail{ display:inline-flex; align-items:center; gap:8px; margin-top:16px; color:#fff; font-weight:600; font-size:.9rem; }
.footer-mail .icon{ width:16px; height:16px; color:var(--blue-2); }
.footer-mail:hover{ color:var(--blue-2); }
.footer-cols{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.f-col h3,.f-col h4{ color:#fff; font-size:.95rem; margin-bottom:14px; }
.f-col li{ margin-bottom:10px; }
.f-col a{ color:rgba(255,255,255,.66); font-size:.92rem; transition:color .18s; }
.f-col a:hover{ color:#fff; }
.site-footer .legal-note,.site-footer .demo-banner{
  background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.14); color:rgba(255,255,255,.7);
}
.site-footer .legal-note .icon,.site-footer .demo-banner .icon{ color:var(--blue-2); }
.site-footer .legal-note strong,.site-footer .demo-banner strong{ color:#fff; }
.footer-bottom{
  display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between;
  margin-top:30px; padding-top:22px; border-top:1px solid rgba(255,255,255,.12);
  font-size:.84rem; color:rgba(255,255,255,.55);
}
.footer-mini{ color:rgba(255,255,255,.55); }

/* ===========================================================
   TOAST
   =========================================================== */
.toast{
  position:fixed; z-index:120; right:24px; bottom:24px;
  display:flex; align-items:center; gap:12px;
  background:var(--navy); color:#fff; padding:14px 18px; border-radius:14px;
  box-shadow:var(--shadow-lg); max-width:min(380px, calc(100vw - 32px));
  opacity:0; transform:translateY(16px) scale(.97); pointer-events:none;
  transition:opacity .28s var(--ease), transform .28s var(--ease);
}
.toast.is-visible{ opacity:1; transform:none; }
.toast-icon{ width:32px; height:32px; border-radius:9px; display:grid; place-items:center; flex:none; background:rgba(255,255,255,.12); }
.toast-icon .icon{ width:19px; height:19px; }
.toast-msg{ font-size:.92rem; font-weight:600; line-height:1.4; }
.toast--success .toast-icon{ background:rgba(34,197,94,.22); color:#86efac; }
.toast--error .toast-icon{ background:rgba(220,38,38,.22); color:#fca5a5; }
.toast--info .toast-icon{ background:rgba(59,140,255,.26); color:#93c5fd; }

/* ===========================================================
   REVEAL
   =========================================================== */
.js .reveal{ opacity:0; transform:translateY(20px); transition:opacity .6s var(--ease), transform .6s var(--ease); transition-delay:var(--d,0ms); }
.js .reveal.in-view{ opacity:1; transform:none; }

/* ===========================================================
   RESPONSIVE
   =========================================================== */
@media (max-width:1024px){
  .hero-inner{ grid-template-columns:1fr; gap:48px; }
  .hero-visual{ min-height:380px; }
  .gap-grid,.seg-grid{ grid-template-columns:repeat(2,1fr); }
  .flow{ grid-template-columns:repeat(2,1fr); row-gap:34px; }
  .flow-step:nth-child(2)::after{ display:none; }
  .trio-grid,.three-col{ grid-template-columns:1fr; }
  .compet-row strong{ flex:0 0 170px; }
}

@media (max-width:960px){
  .nav{
    position:fixed; top:var(--header-h); left:0; right:0;
    flex-direction:column; align-items:stretch; gap:6px;
    background:#fff; padding:18px 20px 24px; margin:0;
    border-bottom:1px solid var(--line); box-shadow:var(--shadow);
    transform:translateY(-14px); opacity:0; pointer-events:none;
    transition:transform .26s var(--ease), opacity .26s var(--ease);
    max-height:calc(100vh - var(--header-h)); overflow:auto;
  }
  .site-header.is-open .nav{ transform:none; opacity:1; pointer-events:auto; }
  .nav-link{ padding:13px 14px; font-size:1rem; }
  .nav-link.is-active::after{ display:none; }
  .nav-cta{ display:flex; margin-top:10px; }
  .header-actions .btn-pill{ display:none; }
  .nav-toggle{ display:inline-flex; }
  .header-inner{ justify-content:space-between; }
  .nav{ margin-left:0; }
  .site-header.is-open .icon-open{ display:none; }
  .site-header.is-open .icon-close{ display:block; }
  .sides{ grid-template-columns:1fr; }
  .side-arrows{ flex-direction:row; grid-auto-flow:column; padding:6px 0; }
  .side-arrows .icon{ transform:rotate(90deg); }
  .side-arrows .icon:last-of-type{ transform:rotate(-90deg); }
  .duo-grid,.two-col{ grid-template-columns:1fr; }
}

@media (max-width:768px){
  .section{ padding:64px 0; }
  .section-head{ margin-bottom:36px; }
  .stat-band,.stat-band > .container{ grid-template-columns:repeat(2,1fr); row-gap:26px; }
  .stat-item{ border-left:0; }
  .footer-inner{ grid-template-columns:1fr; gap:32px; }
  .footer-cols{ grid-template-columns:repeat(2,1fr); gap:28px 24px; }
  .highlight-card{ flex-direction:column; text-align:center; }
  .reg-choice{ grid-template-columns:1fr; }
  .idea-score{ text-align:left; min-width:0; }
  .compet-row strong{ flex:1 1 100%; }
  .threat-track{ max-width:none; }
  .sdg-chip{ max-width:none; }
}

@media (max-width:560px){
  .container{ padding:0 18px; }
  .gap-grid,.seg-grid,.flow{ grid-template-columns:1fr; }
  .flow-step::after{ display:none; }
  .form-grid{ grid-template-columns:1fr; }
  .hero-actions .btn,.cta-actions .btn{ width:100%; }
  .hero-actions,.cta-actions{ flex-direction:column; }
  .card{ padding:22px; }
  .chip-1,.chip-2,.chip-3{ display:none; }
  .toast{ right:16px; left:16px; bottom:16px; max-width:none; }
  .stat-band,.stat-band > .container{ grid-template-columns:1fr; }
  .compet-row{ padding:16px 18px; }
  .footer-bottom{ flex-direction:column; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; }
  html{ scroll-behavior:auto; }
  .js .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
  .threat-bar{ transition:none !important; }
}