/* ============================================================
   CAJEVA — Design tokens
   Fuente: Brand Book "Identidad Visual Cajeva" (jul 2026)
   Paleta CAJEVA Guadalajara (principal del sitio) +
   acento terracota de CAJEVA Vallarta.
   Tipografía única de marca: Montserrat (interletrado amplio
   en titulares/uppercase, regular en textos largos).
   ============================================================ */

:root {
  /* — Paleta Guadalajara — */
  --olive-900: #3D3F22;   /* principal oscuro */
  --olive-700: #535931;   /* principal */
  --sage-500:  #7C8268;   /* secundario */
  --greige-300: #C1BBB0;  /* acento neutro (color que une ambas marcas) */
  --bone-200:  #DBD7CE;   /* acento claro */

  /* — Acento Vallarta (usado con moderación: ofertas, momentos cálidos) — */
  --terra-600: #9E401B;
  --tan-400:   #B0855E;
  --sand-300:  #D6BDA2;

  /* — Verde oficial de WhatsApp (solo en los botones de WhatsApp) — */
  --wa:      #25D366;
  --wa-dark: #1DA851;

  /* — Neutros derivados (no de marca, soporte UI) — */
  --ink:       #24261A;
  --paper:     #F6F4EF;
  --card:      #EFECE5;
  --white:     #FFFFFF;
  --line:      rgba(61, 63, 34, .14);

  /* — Semánticos — */
  --bg: var(--paper);
  --text: var(--ink);
  --text-soft: rgba(36, 38, 26, .64);
  --primary: var(--olive-700);
  --primary-dark: var(--olive-900);
  --accent: var(--terra-600);

  /* — Tipografía — */
  --font: 'Montserrat', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --track-wide: .22em;   /* "interletrado 200" del brand book */
  --track-mid: .12em;

  /* — Forma — */
  --r-card: 28px;   /* marcos redondeados estilo referencia */
  --r-pill: 999px;
  --r-sm: 12px;

  /* — Sombra — */
  --shadow-soft: 0 10px 30px rgba(61, 63, 34, .10);
  --shadow-lift: 0 18px 44px rgba(61, 63, 34, .16);

  /* — Layout — */
  --maxw: 1240px;
  --header-h: 74px;
}

/* ============================================================
   Splash de carga (tienda y admin)
   El markup va inline como primer hijo de <body> y este archivo
   es el primer CSS (render-blocking): el fondo pinta antes de
   que corra ningún script. El logo y el anillo aparecen hasta
   los 250 ms — en cargas instantáneas (localStorage) nunca se
   ven; cuando llegue la base de datos real, sí.
   ============================================================ */
.splash {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-content: center; justify-items: center;
  background: var(--paper); color: var(--olive-700);
  transition: opacity .35s ease;
}
.splash.out { opacity: 0; pointer-events: none; }
.splash-mark {
  position: relative; width: 96px; height: 96px;
  display: grid; place-items: center;
  opacity: 0; animation: splash-in .5s ease .25s forwards;
}
.splash-mark svg { width: 46px; height: 46px; fill: currentColor; }
.splash-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid rgba(83, 89, 49, .16);
  border-top-color: var(--terra-600);
  animation: splash-spin .9s linear infinite;
}
.splash-word {
  margin-top: 20px; font-family: var(--font);
  font-size: 13px; font-weight: 600; text-transform: uppercase;
  letter-spacing: var(--track-wide); text-indent: var(--track-wide); /* compensa el tracking para centrar */
  color: var(--olive-900);
  opacity: 0; animation: splash-in .5s ease .4s forwards;
}
/* Variante oscura (admin) */
/* Variante oscura (admin) — el logo NO espera.
   En la tienda el retraso tiene sentido: el fondo es el mismo color del
   papel, así que una carga instantánea no se nota. En el panel el fondo es
   verde oscuro sobre una pantalla clara, y con el retraso se veía un
   rectángulo negro vacío entre pantalla y pantalla. Si va a aparecer, que
   se vea que es una pantalla de carga. */
.splash--dark { background: var(--olive-900); color: var(--bone-200); }
.splash--dark .splash-ring { border-color: rgba(219, 215, 206, .18); border-top-color: var(--sand-300); }
.splash--dark .splash-word { color: var(--bone-200); }
.splash--dark .splash-mark,
.splash--dark .splash-word { animation-delay: 0s; animation-duration: .18s; }
@keyframes splash-spin { to { transform: rotate(360deg); } }
@keyframes splash-in { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .splash-mark, .splash-word { animation-duration: .01s; animation-delay: 0s; }
  .splash-ring { animation-duration: 2.5s; }
}