/*
 * Sistema visual v2 (claro con secciones oscuras, acento lima) — variables CSS.
 * Fuente de verdad: tokens.json. Si cambias un valor, cámbialo en ambos.
 *
 * Fuentes: archivos en ./fuentes (alójalos en el sitio) o Google Fonts:
 * <link href="https://fonts.googleapis.com/css2?family=Archivo:wght@600;700;800&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
 */

:root {
  /* Secciones claras (por defecto) */
  --color-claro-fondo: #FFFFFF;
  --color-claro-suave: #F4F6F2;
  --color-claro-tarjeta: #FFFFFF;
  --color-claro-borde: #E2E7DF;
  --color-claro-borde-fuerte: #C9D1C4;
  --color-claro-tinta: #0A0F0D;
  --color-claro-tinta-2: #47524B;
  --color-claro-tinta-3: #5F6A63;

  /* Secciones oscuras (header, hero, cabecera del catálogo, footer) */
  --color-oscuro-fondo: #0A0F0D;
  --color-oscuro-elevado: #111814;
  --color-oscuro-superficie: #18211C;
  --color-oscuro-borde: #26302A;
  --color-oscuro-tinta: #F2F5F0;
  --color-oscuro-tinta-2: #AAB4AD;
  --color-oscuro-tinta-3: #8C978F;

  /* Acentos */
  --color-lima: #D9F21E;          /* fondos de botones/franjas y texto SOLO sobre oscuro */
  --color-lima-hover: #E4F75C;
  --color-lima-texto: #556400;    /* texto de acento sobre claro */
  --color-lima-suave: rgba(217, 242, 30, 0.14);
  --color-cian: #22E4FF;          /* sobre oscuro */
  --color-cian-texto: #00707F;    /* sobre claro */
  --color-sobre-acento: #0A0F0D;

  /* Estados, marca y terceros */
  --color-error-claro: #C2183C;
  --color-error-oscuro: #FF5C7A;
  --color-marca-oliva: #B9B44C;
  --color-whatsapp: #25D366;

  /* Gradientes */
  --gradiente-hero:
    radial-gradient(900px 600px at 85% 20%, rgba(217, 242, 30, 0.16), transparent 60%),
    radial-gradient(700px 500px at 10% 100%, rgba(34, 228, 255, 0.06), transparent 60%),
    #0A0F0D;
  --gradiente-tarjeta-oscura: linear-gradient(160deg, #141C17 0%, #0D1310 100%);
  --gradiente-tarjeta-destacada: linear-gradient(160deg, rgba(217, 242, 30, 0.12) 0%, rgba(217, 242, 30, 0) 60%), #111814;

  /* Tipografía */
  --fuente-display: 'Archivo', 'Segoe UI', system-ui, sans-serif;
  --fuente-texto: 'Inter', 'Segoe UI', system-ui, sans-serif;

  --texto-xs: 0.75rem;
  --texto-sm: 0.875rem;
  --texto-base: 1rem;
  --texto-lg: 1.125rem;
  --texto-xl: 1.375rem;
  --texto-2xl: 1.75rem;
  --texto-3xl: clamp(2rem, 1.4rem + 2.4vw, 2.75rem);
  --texto-hero: clamp(2.5rem, 1.6rem + 4vw, 4.25rem);

  --peso-regular: 400;
  --peso-medio: 500;
  --peso-seminegrita: 600;
  --peso-negrita: 700;
  --peso-extra: 800;

  --interlineado-ajustado: 1.05;
  --interlineado-titulo: 1.15;
  --interlineado-texto: 1.6;

  --espaciado-display: -0.02em;
  --espaciado-mayusculas: 0.12em;

  /* Espaciado */
  --espacio-1: 0.25rem;
  --espacio-2: 0.5rem;
  --espacio-3: 0.75rem;
  --espacio-4: 1rem;
  --espacio-5: 1.5rem;
  --espacio-6: 2rem;
  --espacio-7: 3rem;
  --espacio-8: 4rem;
  --espacio-9: 6rem;
  --espacio-10: 8rem;

  /* Radios */
  --radio-sm: 8px;
  --radio-md: 12px;
  --radio-lg: 16px;
  --radio-xl: 24px;
  --radio-pill: 999px;

  /* Sombras */
  --sombra-sm: 0 1px 2px rgba(10, 15, 13, 0.06);
  --sombra-md: 0 8px 24px rgba(10, 15, 13, 0.08);
  --sombra-lg: 0 20px 48px rgba(10, 15, 13, 0.14);
  --sombra-oscura: 0 20px 48px rgba(0, 0, 0, 0.45);

  /* Glow */
  --glow-lima: 0 0 0 1px rgba(217, 242, 30, 0.7), 0 0 24px rgba(217, 242, 30, 0.25);
  --glow-lima-claro: 0 0 0 1px #D9F21E, 0 12px 32px rgba(85, 100, 0, 0.12);
  --glow-cian: 0 0 0 1px rgba(34, 228, 255, 0.6), 0 0 18px rgba(34, 228, 255, 0.25);

  /* Movimiento */
  --duracion-rapida: 150ms;
  --duracion-media: 250ms;
  --duracion-lenta: 450ms;
  --duracion-pulso: 2.4s;
  --curva-estandar: cubic-bezier(0.2, 0, 0, 1);
  --curva-rebote: cubic-bezier(0.34, 1.56, 0.64, 1);
  --elevacion-hover: -4px;

  /* Capas */
  --capa-base: 0;
  --capa-header: 100;
  --capa-flotante: 200;
  --capa-overlay: 300;
  --capa-modal: 400;

  /* Layout */
  --ancho-maximo: 1200px;
  --margen-lateral: clamp(1rem, 4vw, 2rem);
  --proporcion-imagen-producto: 4 / 3;
}

/* Pulso suave para el botón flotante de WhatsApp */
@keyframes pulso {
  0%, 100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.45); }
  50%      { box-shadow: 0 0 0 10px rgba(37, 211, 102, 0); }
}
.efecto-pulso { animation: pulso var(--duracion-pulso) ease-in-out infinite; }

/* Foco visible accesible: se ve sobre claro y sobre oscuro */
:focus-visible {
  outline: 2px solid var(--color-cian-texto);
  outline-offset: 3px;
}
.oscuro :focus-visible,
.oscuro:focus-visible { outline-color: var(--color-lima); }

@media (prefers-reduced-motion: reduce) {
  .efecto-pulso { animation: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}