/* ============================================================
   Grupo Zeppelin — tokens.css
   Compartido por hub + 4 satélites (6.10 del MASTER). Fuentes
   autoalojadas, subset latino, variables — ver 6.1.
============================================================ */

@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('../fonts/inter-latin-variable.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Newsreader';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('../fonts/newsreader-latin-normal-variable.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Newsreader';
  font-style:italic;
  font-weight:400 700;
  font-display:swap;
  src:url('../fonts/newsreader-latin-italic-variable.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root{
  /* Base neutra — tinte cálido, no grises puros (6.4) */
  --bg:#FAF9FC;
  --surface:#FFFFFF;
  --bg-alt:#F3EDFA;
  --cream:#F5F3EE;

  /* Morado de marca — el mismo de VigIA, es el único color de marca
     existente en el ecosistema (6.4). Construir sobre él, no inventar otro. */
  --purple-deep:#3D2C4A;
  --purple-deep-2:#4A2E5C;
  --purple-mid:#7C4F9E;
  --purple-mid-hover:#6B4384;
  --purple-soft:#EFE6F7;

  /* Acento cálido — heredado de VigIA. AUDITADO (v2.5): 4.91:1 sobre
     --purple-deep (pasa AA), pero solo 2.46:1 sobre --bg claro (falla
     incluso texto grande). Regla: nunca usar --accent-warm como texto
     u overlay sobre superficies claras — solo sobre --purple-deep/-2,
     para iconos, cifras de autoridad y badges (igual que ya hace VigIA). */
  --accent-warm:#C79A46;
  --accent-warm-hover:#B78C3D;
  --on-accent-warm:#2A2430;

  /* CTA de alto contraste para superficies claras — el propio morado
     de marca con texto claro (11.4:1), no el dorado. Esto es lo que
     6.4 pedía como "acento de alto contraste para CTAs" en la práctica:
     ya lo teníamos, solo había que no usar el dorado donde no pasa. */
  --cta-bg:var(--purple-deep);
  --cta-bg-hover:var(--purple-deep-2);
  --cta-text:var(--cream);

  /* Texto */
  --text-1:#2A2430;
  --text-2:#5B5568;
  --text-3:#6E6479;

  /* Semánticos — estados de formulario */
  --success:#1F7A4D;
  --success-soft:#E6F4EC;
  --error:#B3455C;
  --error-soft:#FBEAED;

  /* Bordes */
  --border:#E4DEEC;
  --border-soft:#F1ECF7;
  --border-input:#CBBEDB;

  /* Tipografía — mismo par que VigIA (Newsreader + Inter), para que
     los cinco sitios se vean como la misma casa (6.4). */
  --serif:'Newsreader', Georgia, 'Times New Roman', serif;
  --sans:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Layout — contenedor 1280px máx, columna de texto 68ch máx (6.2) */
  --max:1280px;
  --measure:68ch;
  --r:16px;
  --r-sm:10px;
  --r-pill:999px;
  --header-h:68px;

  /* Sombras */
  --shadow-sm: 0 1px 2px rgba(61,44,74,.06), 0 1px 1px rgba(61,44,74,.04);
  --shadow-md: 0 8px 24px rgba(61,44,74,.10);
  --shadow-lg: 0 16px 40px rgba(61,44,74,.16);
}

html{
  font-size:16px;
  scroll-behavior:smooth;
  scroll-padding-top: calc(var(--header-h) + 14px);
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
}

body{
  background:var(--bg);
  color:var(--text-1);
  font-family:var(--sans);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

img, svg { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
button { font:inherit; cursor:pointer; background:none; border:none; color:inherit; }
ul, ol { list-style:none; }
h1,h2,h3,h4 { font-weight:600; line-height:1.2; }

:focus-visible{
  outline:3px solid var(--purple-mid);
  outline-offset:2px;
  border-radius:4px;
}

.skip-link{
  position:absolute;
  left:12px; top:-60px;
  background:var(--purple-deep);
  color:#fff;
  padding:10px 18px;
  border-radius:var(--r-sm);
  z-index:1000;
  transition:top .15s ease;
  font-weight:600;
  font-size:.9rem;
}
.skip-link:focus{ top:12px; }

/* Reveal en scroll — igual que VigIA: si JS no corre o
   prefers-reduced-motion está activo, el contenido igual se ve. */
.reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .5s ease-out, transform .5s ease-out;
}
.reveal.is-visible{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}
.no-js .reveal{ opacity:1; transform:none; }