/* =========================================================================
   Audio G.R. — Tokens de diseño
   Todos los colores de fondos, superficies, bordes, sombras y degradados
   están aquí. Para aclarar u oscurecer el sitio, cambia solo este archivo.
   ========================================================================= */
:root {
  /* ---------- Marca (no modificar) ---------- */
  --rojo: #FF0000;            /* solo logo y acentos gráficos */
  --rojo-ui: #D90000;         /* rojo para insignias pequeñas */
  --whatsapp: #25D366;        /* solo botones de WhatsApp */
  --whatsapp-hover: #1FB958;
  --whatsapp-texto: #0B2A17;
  --estado-apartado: #E0A100; /* punto de color "Apartado" en usados */

  /* ---------- Fondos ---------- */
  --fondo-pagina: #E4E8EE;    /* fondo principal */
  --fondo-alterno: #DEE3EA;   /* secciones alternas (ajustado desde #D5DBE4 para que --tenue cumpla AA) */

  /* ---------- Superficies (tarjetas, menús, campos) ---------- */
  --superficie: #EEF1F5;          /* un tono por encima del fondo */
  --superficie-rgb: 238, 241, 245;
  --superficie-clara: #F4F6F9;    /* hover de botones claros */
  --superficie-hundida: #E3E7ED;  /* chips y filas dentro de una superficie */

  /* ---------- Azul marino (fondos oscuros) ---------- */
  --marino: #060E22;
  --marino-rgb: 6, 14, 34;
  --marino-brillo: #0E2452;       /* resplandor sutil en cabeceras */

  /* ---------- Azul de acción ---------- */
  --azul: #003A8A;
  --azul-hover: #002F70;
  --azul-rgb: 0, 58, 138;
  --azul-tenue: #CCD8EB;          /* fondo de íconos y hover de botón secundario */

  /* ---------- Bordes ---------- */
  --borde: #B3BCC9;
  --borde-suave: #CBD2DC;
  --borde-fuerte: #8C96A6;        /* hover de campos */
  --linea-clara: rgba(255, 255, 255, 0.12);   /* líneas sobre fondos oscuros */
  --resplandor: rgba(255, 255, 255, 0.10);    /* brillo sutil en la llamada final */

  /* ---------- Sombras ---------- */
  --sombra-1: 0 1px 2px rgba(var(--marino-rgb), 0.08);
  --sombra-2: 0 12px 32px rgba(var(--marino-rgb), 0.18);
  --sombra-nav: 0 1px 0 rgba(var(--marino-rgb), 0.10), 0 8px 24px rgba(var(--marino-rgb), 0.08);
  --sombra-boton: 0 8px 20px rgba(var(--azul-rgb), 0.28);
  --sombra-flotante: 0 10px 28px rgba(var(--marino-rgb), 0.26), 0 2px 6px rgba(var(--marino-rgb), 0.14);
  --sombra-flotante-hover: 0 16px 36px rgba(var(--marino-rgb), 0.30);

  /* ---------- Degradados sobre fotografías ---------- */
  --velo-hero: linear-gradient(90deg, rgba(var(--marino-rgb), .96) 0%, rgba(var(--marino-rgb), .88) 38%, rgba(var(--marino-rgb), .52) 100%),
               linear-gradient(0deg, rgba(var(--marino-rgb), .68) 0%, rgba(var(--marino-rgb), 0) 32%);
  --velo-hero-movil: linear-gradient(180deg, rgba(var(--marino-rgb), .64) 0%, rgba(var(--marino-rgb), .87) 55%, rgba(var(--marino-rgb), .97) 100%);
  --velo-cabecera: linear-gradient(90deg, rgba(var(--marino-rgb), .96) 0%, rgba(var(--marino-rgb), .88) 45%, rgba(var(--marino-rgb), .55) 100%);
  --velo-cabecera-movil: linear-gradient(180deg, rgba(var(--marino-rgb), .80), rgba(var(--marino-rgb), .96));
  --velo-banda: linear-gradient(90deg, rgba(var(--marino-rgb), 1) 0%, rgba(var(--marino-rgb), .5) 30%, rgba(var(--marino-rgb), .12) 60%);
  --velo-banda-movil: linear-gradient(180deg, rgba(var(--marino-rgb), .95) 0%, rgba(var(--marino-rgb), .2) 35%, rgba(var(--marino-rgb), .2) 100%);
  --velo-panel: linear-gradient(180deg, rgba(var(--marino-rgb), 0) 35%, rgba(var(--marino-rgb), .92));
  --fondo-cabecera: radial-gradient(120% 140% at 100% 0%, var(--marino-brillo) 0%, rgba(14, 36, 82, 0) 55%), var(--marino);

  /* ---------- Textos (sin cambios) ---------- */
  --texto: #0B1220;
  --parrafo: #3A4558;
  --tenue: #5B6577;
  --blanco: #FFFFFF;          /* texto sobre fondos oscuros */
  --sobre-oscuro: rgba(255, 255, 255, 0.78);

  /* ---------- Tipografía ---------- */
  --f-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --f-stencil: "Stardos Stencil", "Stencil", Impact, serif;

  /* ---------- Forma ---------- */
  --r-btn: 12px;
  --r-card: 20px;
  --r-chip: 999px;

  /* ---------- Espacio (rejilla de 8 px) ---------- */
  --contenedor: 1280px;
  --margen: 20px;
  --seccion: 64px;
  --nav-alto: 72px;
  --nav-alto-compacto: 64px;

  /* ---------- Movimiento ---------- */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --t-rapida: 200ms;
  --t-media: 300ms;
}

@media (min-width: 640px) {
  :root { --margen: 40px; }
}
@media (min-width: 1024px) {
  :root { --margen: 64px; --seccion: 96px; --nav-alto: 80px; }
}