/* ==========================================================================
   TOKENS DE DISEÑO · Cool Digital Marketing
   Este es el ÚNICO archivo donde se definen colores, tipografías, espacios
   y sombras. Para cambiar la marca o el modo oscuro, edite solo este archivo.
   Colores y tipografías: Brand Kit CDM 2026 (docs/context/marca/).
   Contraste AA y botones naranja con texto navy: ADR 0021.
   ========================================================================== */

/* Fuentes del Brand Kit servidas desde el propio sitio (M9, AUD-09): sin Google Fonts, la página
   no envía la IP del visitante a nadie antes de su permiso. Archivos latinos de @fontsource 5.2.8,
   licencia OFL en public/fonts/. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/inter-latin-400-normal.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: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/inter-latin-500-normal.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: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/inter-latin-600-normal.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: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/inter-latin-700-normal.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: "Montserrat";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/montserrat-latin-600-normal.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: "Montserrat";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/montserrat-latin-700-normal.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: "Montserrat";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/montserrat-latin-800-normal.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;
}

/* Fuentes de respaldo con las medidas de Montserrat e Inter: mientras llegan las del sitio,
   el texto ocupa casi lo mismo y la página no salta al cambiar de fuente. */
@font-face {
  font-family: "Montserrat respaldo";
  src: local("Arial"), local("Helvetica Neue"), local("Liberation Sans");
  size-adjust: 113.5%;
  ascent-override: 85.3%;
  descent-override: 22.1%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Inter respaldo";
  src: local("Arial"), local("Helvetica Neue"), local("Liberation Sans");
  size-adjust: 107.1%;
  ascent-override: 90.4%;
  descent-override: 22.5%;
  line-gap-override: 0%;
}

:root {
  /* --- Colores de marca (Brand Kit CDM 2026) --- */
  --marca: #0D1B35;           /* Navy CDM: color principal */
  --marca-profunda: #0D1B35;  /* pie, franjas oscuras */
  --naranja: #F47B20;         /* Orange CDM: botones, acentos, íconos. NO para texto sobre claro (2,7:1) */
  --naranja-profundo: #D96B15; /* Deep Orange: hover y estados activos (navy encima: 4,9:1) */
  --naranja-texto: #A84E0E;   /* naranja oscurecido para enlaces y textos de acento (5,2:1 sobre Light) */
  --acento-base: #F47B20;     /* acentos, líneas, iconos */
  --acento-texto: #A84E0E;    /* textos de acento sobre fondo claro */
  --acento-claro: #F47B20;    /* acento sobre fondos navy (6,3:1) */
  --estrellas: var(--naranja-profundo); /* estrellas de los testimonios (3:1 o más sobre blanco) */

  /* --- Colores de interfaz (modo claro) --- */
  --fondo: #FFFFFF;
  --fondo-alterno: #F5F7FA;   /* Light: secciones alternas */
  --superficie: #FFFFFF;      /* tarjetas */
  --texto: #0D1B35;           /* Navy (17,1:1) */
  --texto-suave: #6B7280;     /* Copy Gray (4,8:1 sobre blanco, 4,5:1 sobre Light) */
  --borde: #E5E7EB;           /* Border */
  --primario: var(--naranja);           /* fondo de los botones principales */
  --primario-hover: var(--naranja-profundo);
  --sobre-primario: #0D1B35;  /* texto navy sobre naranja (6,3:1); el blanco no pasa AA */
  --enlace: var(--naranja-texto);
  --enlace-hover: #0D1B35;
  --acento: var(--acento-base);
  --franja: var(--marca-profunda);   /* fondo de franjas oscuras */
  --sobre-franja: #F5F7FA;
  --whatsapp: #168043;         /* verde WhatsApp oscurecido para AA con texto blanco */
  --whatsapp-hover: #11663A;
  --whatsapp-texto: #168043;   /* enlaces de WhatsApp como texto */
  --foco: var(--naranja-texto); /* contorno del foco del teclado (3:1 o más sobre el fondo) */
  --borde-campo: #727B8B;      /* borde de los campos de formulario (3:1 sobre blanco y Light) */

  /* --- Colores fijos (no cambian en modo oscuro) --- */
  --blanco: #FFFFFF;
  --negro: #0D1B35;           /* texto sobre naranja o blanco, en ambos modos */
  --me-gusta-activo: #C0392B; /* corazón del me gusta marcado */
  --error: #B3261E; /* errores de formulario (contraste AA sobre el fondo) */
  --error-sobre-franja: #F4AFA7; /* errores de formulario sobre la franja navy del pie, en ambos modos */
  --ejemplo-fondo: #FFF3CD;   /* etiqueta "Ejemplo" (contenido de muestra) */
  --ejemplo-texto: #6B5100;
  --google-azul: #4285F4;     /* logo "G" del botón Continuar con Google, colores oficiales */
  --google-rojo: #EA4335;
  --google-amarillo: #FBBC05;
  --google-verde: #34A853;

  /* --- Transparencias sobre fondos oscuros (franjas, fotos, pie) --- */
  --blanco-05: rgba(255, 255, 255, .05);
  --blanco-06: rgba(255, 255, 255, .06);
  --blanco-12: rgba(255, 255, 255, .12);
  --blanco-20: rgba(255, 255, 255, .2);
  --blanco-60: rgba(255, 255, 255, .6);
  --blanco-85: rgba(255, 255, 255, .85);
  --blanco-86: rgba(255, 255, 255, .86);
  --blanco-94: rgba(255, 255, 255, .94);
  --negro-35: rgba(0, 0, 0, .35);
  --crema-75: rgba(245, 247, 250, .75); /* texto legal del pie (AA sobre navy) */
  --crema-80: rgba(245, 247, 250, .8);
  --velo-hero-1: rgba(13, 27, 53, .9);  /* degradado navy sobre la foto de portada */
  --velo-hero-2: rgba(13, 27, 53, .65);
  --velo-hero-3: rgba(13, 27, 53, .25);
  --visor-fondo: rgba(6, 12, 24, .96);  /* fondo del visor de fotos, igual en claro y oscuro */

  /* --- Fondos de muestra mientras no hay fotos reales --- */
  --foto-a: linear-gradient(135deg, #1E3358 0%, #0D1B35 60%, #081226 100%);
  --foto-b: linear-gradient(160deg, #F7A462 0%, #F47B20 55%, #D96B15 100%);
  --foto-c: linear-gradient(140deg, #4A5A78 0%, #1E3358 60%, #0D1B35 100%);
  --foto-d: linear-gradient(150deg, #E5E7EB 0%, #9AA3B2 55%, #6B7280 100%);
  --foto-e: linear-gradient(130deg, #2A4170 0%, #16284A 50%, #0D1B35 100%);
  --foto-hero: radial-gradient(120% 90% at 85% 30%, #2A4170 0%, #16284A 35%, #0D1B35 70%, #081226 100%);

  /* --- Tipografía (Brand Kit: Montserrat para titulares, navegación y botones; Inter para el texto) --- */
  --fuente-titulos: "Montserrat", "Montserrat respaldo", "Helvetica Neue", Arial, sans-serif;
  --fuente-texto: "Inter", "Inter respaldo", "Helvetica Neue", Arial, sans-serif;
  --fuente-botones: var(--fuente-titulos);
  --fuente-menu: var(--fuente-titulos);
  --fuente-codigo: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --peso-titulos: 800;    /* h1 a h4, títulos de guía y de tarjeta */
  --peso-destacado: 800;  /* título de portada y cifras */
  --peso-botones: 700;
  --peso-menu: 700;
  --t-xs: 0.75rem;
  --t-sm: 0.875rem;
  --t-base: 1rem;
  --t-lg: 1.125rem;
  --t-xl: 1.5rem;
  --t-2xl: 2rem;
  --t-3xl: clamp(2rem, 4vw, 2.75rem);
  --t-hero: clamp(2.25rem, 5.5vw, 4rem);
  --espaciado-mayus: 0.18em;  /* tracking para textos en mayúsculas */

  /* --- Espacios y forma --- */
  --e-1: 0.25rem; --e-2: 0.5rem; --e-3: 0.75rem; --e-4: 1rem;
  --e-6: 1.5rem;  --e-8: 2rem;   --e-12: 3rem;   --e-16: 4rem; --e-24: 6rem;
  --ancho-max: 1200px;
  --radio: 10px;
  --radio-sm: 6px;
  --sombra: 0 1px 2px rgba(13, 27, 53, .06), 0 8px 24px rgba(13, 27, 53, .08);
  --sombra-fuerte: 0 12px 40px rgba(13, 27, 53, .18);
  --sombra-whatsapp: 0 8px 24px rgba(22, 128, 67, .4);
  --transicion: 180ms ease;
}

/* --- Modo oscuro: automático según el sistema, salvo que el usuario elija claro --- */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --fondo: #0D1B35;
    --fondo-alterno: #12233F;
    --superficie: #162A4A;
    --texto: #F5F7FA;
    --texto-suave: #A9B1BE;
    --borde: #26395A;
    --primario: var(--naranja);
    --primario-hover: #F89A55;
    --sobre-primario: #0D1B35;
    --enlace: #F89A55;
    --enlace-hover: #FFFFFF;
    --acento: var(--acento-claro);
    --acento-texto: #F89A55;
    --estrellas: var(--naranja);
    --franja: #081226;
    --whatsapp-texto: #2FB36A;
    --foco: #F89A55;
    --borde-campo: #7C8BA3;
    --error: #F2A49B;
    --me-gusta-activo: #EF7B6E;
    --sombra: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .35);
  }
}
/* --- Modo oscuro elegido manualmente con el botón --- */
:root[data-tema="oscuro"] {
  --fondo: #0D1B35;
  --fondo-alterno: #12233F;
  --superficie: #162A4A;
  --texto: #F5F7FA;
  --texto-suave: #A9B1BE;
  --borde: #26395A;
  --primario: var(--naranja);
  --primario-hover: #F89A55;
  --sobre-primario: #0D1B35;
  --enlace: #F89A55;
  --enlace-hover: #FFFFFF;
  --acento: var(--acento-claro);
  --acento-texto: #F89A55;
  --estrellas: var(--naranja);
  --franja: #081226;
  --whatsapp-texto: #2FB36A;
  --foco: #F89A55;
  --borde-campo: #7C8BA3;
  --error: #F2A49B;
  --me-gusta-activo: #EF7B6E;
  --sombra: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .35);
}