/* ==========================================================================
   TOKENS DE DISEÑO · MartinezVilloria
   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.
   ========================================================================== */

/* Fuentes de respaldo con las medidas de Cormorant Garamond y Montserrat (AUD-52): mientras
   llegan las de Google, el texto ocupa casi lo mismo y la página no salta al cambiar de fuente. */
@font-face {
  font-family: "Cormorant respaldo";
  src: local("Georgia"), local("Times New Roman"), local("Liberation Serif");
  size-adjust: 86%;
  ascent-override: 107%;
  descent-override: 33%;
  line-gap-override: 0%;
}
@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%;
}

:root {
  /* --- Colores de marca --- */
  --verde-mv: #35897F;        /* verde original de la marca */
  --verde-boton: #2A6E66;     /* botones y enlaces (contraste AA con blanco) */
  --verde-profundo: #1F524C;  /* pie, franjas oscuras, logo */
  --dorado: #C49419;          /* acentos, líneas, iconos */
  --dorado-texto: #8C6A10;     /* textos dorados sobre fondo claro (AA: 4.7 sobre crema) */
  --dorado-claro: #E0B84F;     /* dorado sobre fondos oscuros (AA: 4.7 sobre verde profundo) */

  /* --- Colores de interfaz (modo claro) --- */
  --fondo: #FFFFFF;
  --fondo-alterno: #FAF7F0;   /* crema: secciones alternas */
  --superficie: #FFFFFF;      /* tarjetas */
  --texto: #1A1A1A;
  --texto-suave: #5C5C5C;
  --borde: #E6E1D6;
  --primario: var(--verde-boton);
  --primario-hover: var(--verde-profundo);
  --sobre-primario: #FFFFFF;
  --acento: var(--dorado);
  --franja: var(--verde-profundo);   /* fondo de franjas oscuras */
  --sobre-franja: #F4EFE6;
  --whatsapp: #168043;         /* verde WhatsApp oscurecido para AA con texto blanco */
  --whatsapp-hover: #11663A;
  --whatsapp-texto: #168043;   /* enlaces de WhatsApp como texto */
  --foco: var(--dorado-texto);  /* contorno del foco del teclado (3:1 o más sobre el fondo) */
  --borde-campo: #8A8478;      /* borde de los campos de formulario (3:1 sobre blanco y crema) */

  /* --- Colores fijos (no cambian en modo oscuro) --- */
  --blanco: #FFFFFF;
  --negro: #1A1A1A;           /* texto sobre dorado o blanco, en ambos modos */
  --favorito-activo: #C0392B; /* corazón de favorito marcado */
  --favorito-pagina: var(--favorito-activo); /* corazón marcado sobre el fondo de la página (ficha) */
  --error: #B3261E; /* errores de formulario (contraste AA sobre el fondo) */
  --error-sobre-franja: #F4AFA7; /* errores de formulario sobre la franja oscura del pie, en ambos modos (4.8:1) */
  --ejemplo-fondo: #FFF3CD;   /* etiqueta "Ejemplo" (contenido de muestra) */
  --ejemplo-texto: #6B5100;
  --google-azul: #4285F4;     /* logo "G" del botón Continuar con Google (v4 M1), colores oficiales */
  --google-rojo: #EA4335;
  --google-amarillo: #FBBC05;
  --google-verde: #34A853;
  /* Dorados que solo usan los SVG del logo sobre fondo oscuro (ADR 0004, AUD-97). Un SVG en <img>
     no puede leer este archivo: si se cambian aquí, hay que cambiarlos también en public/img/. */
  --logo-dorado-oscuro: #D9AE3E;
  --logo-dorado-brillo: #E2B84A;

  /* --- 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(244, 239, 230, .75); /* texto legal del pie (AA) */
  --crema-80: rgba(244, 239, 230, .8);
  --velo-hero-1: rgba(15, 40, 37, .88);  /* degradado sobre la foto de portada */
  --velo-hero-2: rgba(15, 40, 37, .62);
  --velo-hero-3: rgba(15, 40, 37, .25);
  --velo-region: rgba(10, 25, 23, .82);  /* oscurece la foto de cada región */
  --visor-fondo: rgba(8, 14, 13, .96);  /* fondo del visor de fotos, igual en claro y oscuro */

  /* --- Fondos de muestra mientras no hay fotos reales --- */
  --foto-a: linear-gradient(135deg, #2E6F66 0%, #1F524C 55%, #163B37 100%);
  --foto-b: linear-gradient(160deg, #C9B48A 0%, #9C8456 60%, #6F5C38 100%);
  --foto-c: linear-gradient(140deg, #6C8F8A 0%, #3F6A65 60%, #24423E 100%);
  --foto-d: linear-gradient(150deg, #B7A27A 0%, #7E8F67 55%, #4F6A4C 100%);
  --foto-e: linear-gradient(130deg, #88A7A1 0%, #4E7A73 50%, #2A4A46 100%);
  --foto-hero: radial-gradient(120% 90% at 85% 30%, #4E8F86 0%, #2A6E66 30%, #163B37 70%, #0E2624 100%);

  /* --- Tipografía --- */
  --fuente-titulos: "Cormorant Garamond", "Cormorant respaldo", Georgia, "Times New Roman", serif;
  --fuente-texto: "Montserrat", "Montserrat respaldo", "Helvetica Neue", Arial, sans-serif;
  --fuente-codigo: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --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(2.25rem, 4vw, 3rem);
  --t-hero: clamp(2.5rem, 6vw, 4.5rem);
  --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(20, 30, 28, .06), 0 8px 24px rgba(20, 30, 28, .08);
  --sombra-fuerte: 0 12px 40px rgba(20, 30, 28, .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: #0F1716;
    --fondo-alterno: #142120;
    --superficie: #182624;
    --texto: #EDE9E1;
    --texto-suave: #A9B3B0;
    --borde: #2A3A37;
    --primario: #3E9A8F;
    --primario-hover: #4FB0A4;
    --sobre-primario: #0F1716;
    --acento: var(--dorado-claro);
    --dorado-texto: var(--dorado-claro);
    --franja: #0B1312;
    --whatsapp-texto: #2FB36A;
    --borde-campo: #6B7F7B;
    --error: #F2A49B;
    --favorito-pagina: #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: #0F1716;
  --fondo-alterno: #142120;
  --superficie: #182624;
  --texto: #EDE9E1;
  --texto-suave: #A9B3B0;
  --borde: #2A3A37;
  --primario: #3E9A8F;
  --primario-hover: #4FB0A4;
  --sobre-primario: #0F1716;
  --acento: var(--dorado-claro);
  --dorado-texto: var(--dorado-claro);
  --franja: #0B1312;
  --whatsapp-texto: #2FB36A;
  --borde-campo: #6B7F7B;
  --error: #F2A49B;
  --favorito-pagina: #EF7B6E;
  --sombra: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .35);
}