/* ==========================================================================
   TelcoPyme · Tokens de diseño web · v1.1 · 2026-10-04 (cabecera oscura, botón contenido)
   Fuente de verdad: brand book (marcas/vamosss/07-brand-book.md) y
   «Identidad final aprobada» (06-identidad-visual/identidad-visual.md).
   Ratios calculados con 04-diseno/herramientas/contraste.js (WCAG 2.x).
   Todo color que no está en la identidad aprobada va marcado PROPUESTO.
   ========================================================================== */

/* Golos Text autoalojada (OFL). Un solo woff2 variable, subconjunto latino
   (cubre español: á é í ó ú ü ñ ¿ ¡ € «»). Pesos 400–700. */
@font-face {
  font-family: "Golos Text";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/golos-text-latin-var.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;
}

:root {
  /* ---------- Paleta de marca (pigmentos; no usar directamente en componentes) */
  --marca-lavanda-claro: #78A0E0; /* gráfico; texto solo grande sobre Marino (6,27:1) */
  --marca-lavanda:       #5070B8; /* fondo de botón con texto blanco ≥ 19 px 700 (4,83:1) */
  --marca-tinta:         #202038; /* texto, enlaces, foco sobre claro (15,85:1) */
  --marca-pizarra:       #384860; /* texto secundario (9,28:1), bordes de control */
  --marca-marino:        #161D35; /* fondos oscuros */
  --marca-punto:         #69D7F0; /* SOLO decorativo sobre claro; texto/foco sobre oscuro (9,97:1) */
  --marca-blanco:        #FFFFFF;
  --marca-niebla:        #F3F6FC;
  --web-lavanda:         #3A5596; /* PROPUESTO para web (aprobado por el usuario en la revisión de la maqueta): Lavanda oscurecido; blanco encima 7,19:1 = AAA a cualquier tamaño */
  --marca-degradado:     linear-gradient(135deg, #78A0E0 0%, #5070B8 100%); /* el del símbolo; solo gráfico */

  /* ---------- Roles de color */
  --color-fondo:              var(--marca-blanco);
  --color-superficie:         var(--marca-niebla);
  --color-texto:              var(--marca-tinta);    /* 15,85:1 Blanco · 14,64:1 Niebla · AAA */
  --color-texto-suave:        var(--marca-pizarra);  /*  9,28:1 Blanco ·  8,57:1 Niebla · AAA */
  --color-enlace:             var(--marca-tinta);    /* siempre subrayado sobre claro · AAA */
  /* Botón principal sobre fondos claros: Lavanda Web + blanco (16 px 600 = texto normal, AAA) */
  --color-primario:           var(--web-lavanda);    /* blanco encima 7,19:1 · contorno vs Blanco 7,19 / Niebla 6,64 */
  --color-primario-contraste: var(--marca-blanco);
  --color-primario-hover:     var(--marca-tinta);    /* blanco sobre Tinta 15,85:1 */
  --color-primario-activo:    var(--marca-marino);   /* blanco sobre Marino 16,65:1 */
  /* Botón principal sobre fondo oscuro (cabecera Marino): Blanco + Marino */
  --color-primario-oscuro:          var(--marca-blanco);  /* texto Marino 16,65:1 */
  --color-primario-oscuro-texto:    var(--marca-marino);
  --color-primario-oscuro-hover:    var(--marca-punto);   /* texto Marino 9,97:1 */
  --color-primario-oscuro-activo:   var(--marca-niebla);  /* texto Marino 15,38:1 */
  /* Cabecera */
  --color-cabecera:           var(--marca-marino);
  --color-cabecera-texto:     var(--marca-blanco);   /* 16,65:1 */
  --color-cabecera-suave:     var(--marca-niebla);   /* 15,38:1 */
  --color-cabecera-hover:     rgb(255 255 255 / 0.08); /* ≈ #292F45: blanco encima 13,23:1, foco Punto 7,93:1 */
  --color-cabecera-filete:    rgb(243 246 252 / 0.14);
  --color-acento:             var(--marca-punto);    /* decorativo (≤ 3 % de superficie) */
  --color-acento-grafico:     var(--marca-lavanda);  /* iconos y cifras grandes · 4,83:1 */
  --color-borde:              rgb(56 72 96 / 0.18);  /* Pizarra al 18 %: separador decorativo, no informativo */
  --color-borde-filete:       rgb(56 72 96 / 0.3);   /* Pizarra al 30 %: filete decorativo del co-marcado */
  --color-borde-control:      var(--marca-pizarra);  /* campos de formulario · 9,28:1 (≥ 3:1) */
  --color-oscuro:             var(--marca-marino);
  --color-oscuro-texto:       var(--marca-blanco);   /* 16,65:1 */
  --color-oscuro-texto-suave: var(--marca-niebla);   /* 15,38:1 */
  --color-oscuro-destacado:   var(--marca-punto);    /*  9,97:1 */
  --color-foco:               var(--marca-tinta);    /* anillo sobre claro 15,85:1 / Niebla 14,64:1 */
  --color-foco-oscuro:        var(--marca-punto);    /* anillo sobre Marino 9,97:1 */

  /* Colores de estado · PROPUESTOS (no están en la identidad; validar) */
  --color-error:  #A11D2B; /* PROPUESTO · 7,70:1 Blanco · 7,12:1 Niebla · AAA */
  --color-exito:  #175A38; /* PROPUESTO · 8,22:1 Blanco · 7,59:1 Niebla · AAA */
  --color-aviso:  #7A4A00; /* PROPUESTO · 7,48:1 Blanco · AAA */

  /* ---------- Tipografía */
  --font-base: "Golos Text", "Segoe UI", "Helvetica Neue", Arial, system-ui, sans-serif;
  --fw-regular: 400;
  --fw-medio: 500;
  --fw-semi: 600;
  --fw-negrita: 700;

  /* Escala modular ~1,25, fluida entre 390 y 1440 px de ancho */
  --fs-100: 0.9375rem;                                     /* 15 px · legales, metadatos */
  --fs-200: 1.0625rem;                                     /* 17 px · cuerpo */
  --fs-300: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);   /* 17→19 · entradilla */
  --fs-400: clamp(1.1875rem, 1.1rem + 0.35vw, 1.4375rem); /* 19→23 · H3, subtítulo del H1 */
  --fs-500: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem);     /* 22→28 */
  --fs-600: clamp(1.75rem, 1.4rem + 1.1vw, 2.375rem);     /* 28→38 · H2 */
  --fs-700: clamp(2.125rem, 1.7rem + 1.7vw, 3rem);        /* 34→48 */
  --fs-800: clamp(2.375rem, 1.8rem + 2.6vw, 4rem);        /* 38→64 · eslogan del H1 */
  --fs-900: clamp(2.5rem, 1.9rem + 3vw, 4.5rem);

  --lh-titular: 1.1;
  --lh-texto: 1.6;
  --ls-titular: -0.02em;
  --medida-texto: 66ch; /* AAA 1.4.8: ≤ 80 caracteres por línea */

  /* ---------- Espaciado (base 4/8 px) */
  --sp-1: 0.25rem;  /*   4 */
  --sp-2: 0.5rem;   /*   8 */
  --sp-3: 0.75rem;  /*  12 */
  --sp-4: 1rem;     /*  16 */
  --sp-5: 1.5rem;   /*  24 */
  --sp-6: 2rem;     /*  32 */
  --sp-7: 3rem;     /*  48 */
  --sp-8: 4rem;     /*  64 */
  --sp-9: 6rem;     /*  96 */
  --sp-10: 8rem;    /* 128 */
  --sp-seccion: clamp(4rem, 2.5rem + 6vw, 8rem);

  /* ---------- Forma (terminales redondeados, como el símbolo) */
  --radio-s: 8px;
  --radio-m: 16px;
  --radio-l: 28px;
  --radio-pildora: 999px;
  --trazo: 2px;              /* iconos y bordes de control */
  --trazo-marca: 12px;       /* «el trazo»: filete grueso de terminales redondos */
  --sombra-1: 0 1px 2px rgb(22 29 53 / 0.06), 0 2px 8px rgb(22 29 53 / 0.06);
  --sombra-2: 0 4px 12px rgb(22 29 53 / 0.08), 0 16px 40px rgb(22 29 53 / 0.10);

  /* ---------- Interacción y accesibilidad */
  --objetivo-min: 44px;      /* WCAG 2.5.5 AAA */
  --btn-alto: 48px;          /* botón estándar; 44 px en cabecera y barra móvil */
  --btn-fs: 1rem;            /* 16 px */
  --btn-fw: 600;
  --foco-ancho: 3px;
  --foco-separacion: 3px;
  --transicion: 160ms ease;

  /* ---------- Layout */
  --ancho-max: 1200px;
  --gutter: clamp(16px, 4vw, 32px);
  --alto-logo-cabecera: 30px;  /* decisión del usuario: 30 px de alto (≈160 px de ancho); mínimo de marca sin descriptor: 90 px */
  --alto-logo-aire: 15px; /* 50 % del logo de cabecera en escritorio */
}

@media (max-width: 899px) {
  :root { --alto-logo-cabecera: 22px; --alto-logo-aire: 11px; }   /* 22 px de alto */

}

@media (prefers-reduced-motion: reduce) {
  :root { --transicion: 0ms; }
}