/* Sistema de diseño IDEAS: tokens comunes y por sub-marca.
   Uso: <html lang="es" data-marca="it|data|financial|legal|ti">. Sin data-marca se usa la marca madre.
   Apariencia: sin atributo manda el sistema; data-apariencia="claro|oscuro" la fija (ver apariencia.js).
   Los contrastes de los tokens de texto están verificados (WCAG AA, 4.5:1 en texto normal). */

@font-face {
  font-family: "Montserrat";
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  src: url("fonts/Montserrat-VF.woff2") format("woff2");
}

:root {
  color-scheme: light;

  /* Neutros compartidos (manual, sección 06) */
  --marino: #10243a;
  --gris: #68727d;
  --gris-claro: #eef2f5;
  --blanco: #ffffff;

  /* Marca madre / ideasit: azul */
  --marca: #0066ff;          /* rellenos, bordes, foco, detalles gráficos */
  --marca-claro: #00a3ff;    /* degradados del isotipo, fondos suaves */
  --marca-profundo: #0a3fa8; /* hover, degradados */
  --marca-oscuro: #3d8bff;   /* la marca sobre fondo marino */
  --texto-acento-claro: #0066ff;  /* acento como TEXTO sobre blanco */
  --boton-texto-claro: #ffffff;   /* texto sobre --boton-fondo en tema claro */
  --boton-fondo-claro: #0066ff;

  /* Tema claro */
  --fondo: var(--blanco);
  --superficie: var(--gris-claro);
  --texto: var(--marino);
  --texto-2: var(--gris);            /* 4.9:1 sobre blanco, 4.3:1 sobre gris claro: solo texto >= 16px ahí */
  --linea: #d9e0e6;

  /* Tipografía (manual, sección 07). Escala fluida entre móvil y escritorio */
  --fuente: "Montserrat", "Avenir Next", system-ui, sans-serif;
  --t-display: clamp(2.5rem, 1.6rem + 3.6vw, 4.25rem); /* solo portada, Bold */
  --t-h1: clamp(2.25rem, 1.8rem + 1.6vw, 3.25rem);     /* Bold 40–52 */
  --t-h2: clamp(1.75rem, 1.5rem + 0.9vw, 2.25rem);     /* SemiBold 28–36 */
  --t-h3: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);     /* SemiBold 20–24 */
  --t-cuerpo: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);  /* Regular 16–18 */
  --t-pequeno: 0.875rem;                               /* Regular 12–14 */
  --t-etiqueta: 0.8125rem;                             /* Regular, +0.3em, minúsculas */

  /* Espacio: base 8, secciones generosas (minimalismo = aire, no vacío) */
  --e-1: 0.5rem; --e-2: 1rem; --e-3: 1.5rem; --e-4: 2rem; --e-6: 3rem; --e-8: 4rem;
  --e-seccion: clamp(4rem, 2.5rem + 6vw, 8rem);
  --ancho: 72rem;
  --ancho-texto: 38rem;

  /* Forma: la cápsula del isotipo (remates semicirculares) */
  --radio-capsula: 999px;
  --radio: 0.75rem;
}

/* Tokens derivados: se recalculan en cada elemento con data-marca, así una sección o el pie
   pueden llevar otra sub-marca distinta a la de la página */
:root, [data-marca] {
  --acento: var(--texto-acento-claro);
  --boton-fondo: var(--boton-fondo-claro);
  --boton-texto: var(--boton-texto-claro);
  --boton-fondo-hover: var(--marca-profundo);
}

/* Sub-marcas. --texto-acento-claro y --boton-* compensan los colores sin contraste sobre blanco */
[data-marca="data"] {
  --marca: #00b26b; --marca-claro: #63d99e; --marca-profundo: #00703f; --marca-oscuro: #2fcb8a;
  --texto-acento-claro: #00703f;              /* el verde base da 2.8:1 */
  --boton-fondo-claro: #00b26b; --boton-texto-claro: var(--marino); /* 5.7:1 */
}
[data-marca="financial"] {
  --marca: #f5a623; --marca-claro: #ffd166; --marca-profundo: #d9780f; --marca-oscuro: #ffb938;
  --texto-acento-claro: var(--marino);        /* el amarillo nunca es texto sobre blanco (2.0:1) */
  --boton-fondo-claro: #f5a623; --boton-texto-claro: var(--marino); /* 7.8:1 */
}
[data-marca="legal"] {
  --marca: #6a3fc4; --marca-claro: #b695f6; --marca-profundo: #3f1f8a; --marca-oscuro: #9d7bef;
  --texto-acento-claro: #6a3fc4;              /* 6.7:1 */
  --boton-fondo-claro: #6a3fc4; --boton-texto-claro: #ffffff;
}
[data-marca="ti"] {
  --marca: #e53935; --marca-claro: #ff8a80; --marca-profundo: #a81c1c; --marca-oscuro: #ff5a52;
  --texto-acento-claro: #a81c1c;              /* el rojo base da 4.2:1, solo texto grande */
  --boton-fondo-claro: #a81c1c; --boton-texto-claro: #ffffff; /* 7.4:1 */
}
[data-marca="financial"][data-marca], [data-marca="data"][data-marca] { --boton-fondo-hover: var(--marca-claro); }
[data-marca="ti"][data-marca] { --boton-fondo-hover: var(--marino); } /* su fondo normal ya es el profundo */

/* Tema oscuro: fondo marino, la marca en su variante on_dark; botones con texto marino (>= 4.7:1) */
@media (prefers-color-scheme: dark) {
  :root:not([data-apariencia="claro"]) {
    color-scheme: dark;
    --fondo: var(--marino);
    --superficie: #172f49;
    --texto: #f4f7fa;
    --texto-2: #a9b4bf;   /* 7.5:1 sobre marino */
    --linea: #24405e;
  }
}
:root[data-apariencia="oscuro"] {
  color-scheme: dark;
  --fondo: var(--marino);
  --superficie: #172f49;
  --texto: #f4f7fa;
  --texto-2: #a9b4bf;
  --linea: #24405e;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-apariencia="claro"]), :root:not([data-apariencia="claro"]) [data-marca] {
    --acento: var(--marca-oscuro);
    --boton-fondo: var(--marca-oscuro);
    --boton-texto: var(--marino);
    --boton-fondo-hover: var(--marca-claro);
  }
}
:root[data-apariencia="oscuro"], :root[data-apariencia="oscuro"] [data-marca] {
  --acento: var(--marca-oscuro);
  --boton-fondo: var(--marca-oscuro);
  --boton-texto: var(--marino);
  --boton-fondo-hover: var(--marca-claro);
}

/* Logos: poner las dos versiones y dejar que el tema elija */
.logo-oscuro { display: none; }
:root[data-apariencia="oscuro"] .logo-claro { display: none; }
:root[data-apariencia="oscuro"] .logo-oscuro { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-apariencia="claro"]) .logo-claro { display: none; }
  :root:not([data-apariencia="claro"]) .logo-oscuro { display: block; }
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font: 400 var(--t-cuerpo)/1.6 var(--fuente);
  font-feature-settings: "kern", "liga";
  text-rendering: optimizeLegibility;
}
h1, h2, h3 { line-height: 1.12; letter-spacing: -0.02em; margin: 0 0 var(--e-3); text-wrap: balance; }
h1 { font-size: var(--t-h1); font-weight: 700; }
h2 { font-size: var(--t-h2); font-weight: 600; }
h3 { font-size: var(--t-h3); font-weight: 600; letter-spacing: -0.01em; }
p { margin: 0 0 var(--e-2); max-width: var(--ancho-texto); text-wrap: pretty; }
a { color: var(--acento); text-underline-offset: 0.2em; }
:focus-visible { outline: 3px solid var(--marca); outline-offset: 3px; border-radius: 4px; }
.etiqueta { font-size: var(--t-etiqueta); letter-spacing: 0.3em; text-transform: lowercase; color: var(--texto-2); }

.boton {
  display: inline-flex; align-items: center; gap: 0.6em;
  padding: 0.85em 1.6em; border-radius: var(--radio-capsula);
  background: var(--boton-fondo); color: var(--boton-texto);
  font: 600 1rem/1 var(--fuente); text-decoration: none; border: 0; cursor: pointer;
  transition: background-color .2s ease, transform .2s ease;
}
.boton:hover { background: var(--boton-fondo-hover); }
.boton:active { transform: translateY(1px); }
.boton--linea { background: transparent; color: var(--texto); box-shadow: inset 0 0 0 1.5px var(--linea); }
.boton--linea:hover { background: var(--superficie); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}