/* ==========================================================================
   PUROMÁNCORA — TOKENS
   Fuente de verdad: Handoff Diseño & Desarrollo v0.4 (paleta B).
   Ninguna página inventa valores. Si algo no está acá, no se usa.
   ========================================================================== */

:root{

  /* ---------- COLOR ------------------------------------------------------
     Paleta B — "Atardecer contenido".
     Regla: UN solo acento visible por card/bloque. Atardecer es el acento
     de marca (CTA + estado activo). Pacífico es acento secundario puntual
     y NUNCA aparece junto a Atardecer en el mismo componente.
  */
  --arena:        #F7EFDD;  /* fondo general de página */
  --paper:        #FFFDF8;  /* fondo de cards y superficies elevadas */
  --ink:          #1C2B2A;  /* texto principal, bordes fuertes, bloques oscuros */
  --atardecer:    #F4B740;  /* acento único: CTA, estado activo, eyebrow */
  --arena-oscura: #8B7355;  /* neutro secundario: iconos en reposo y bordes sutiles */

  /* Misma familia, un paso más oscura, SOLO para texto chico (captions, labels):
     #8B7355 sobre paper da 4.41:1 y no llega a AA en 12–13px. Esta sí (5.5:1).
     Para iconos y bordes se sigue usando --arena-oscura tal cual lo fija el handoff. */
  --arena-oscura-texto: #7C6446;
  --pacifico:     #0A6C74;  /* acento secundario puntual (nunca junto al dorado) */

  /* Gradiente "atardecer real" — set-2026, a pedido de Emi de subir la
     energía visual del sitio. Antes "Atardecer" solo aparecía como un punto
     sólido; esto lo lleva al extremo contrario del color wheel (mostaza →
     coral → violeta noche), literalmente el degradé de un atardecer en
     Máncora. Uso deliberadamente ACOTADO: hero, CTA principal y una franja
     divisoria puntual — nunca en texto de cuerpo ni en cards de negocio, para
     no romper la regla de "un acento por bloque" del resto del sistema. */
  --sunset-desde:  #F7C24A;
  --sunset-medio:  #F0793D;
  --sunset-hasta:  #A84C86;
  --sunset:        linear-gradient(100deg, var(--sunset-desde) 0%, var(--sunset-medio) 52%, var(--sunset-hasta) 100%);
  --sunset-glow:   0 8px 28px rgba(240,121,61,.35);

  /* Derivados — se calculan una vez acá, no en cada componente. */
  --ink-80:       rgba(28,43,42,.80);
  --ink-64:       rgba(28,43,42,.70);  /* .64 no llegaba a AA sobre arena */
  --ink-40:       rgba(28,43,42,.40);
  --ink-12:       rgba(28,43,42,.12);
  --ink-08:       rgba(28,43,42,.08);
  --arena-borde:  rgba(139,115,85,.28);  /* borde sutil de card en reposo */
  --atardecer-24: rgba(244,183,64,.24);
  --paper-90:     rgba(255,253,248,.90);
  --paper-72:     rgba(255,253,248,.72);
  --arena-72:     rgba(247,239,221,.72);

  /* Texto sobre fondo oscuro (bloques ink) */
  --sobre-ink:      #F7EFDD;
  --sobre-ink-mute: rgba(247,239,221,.62);

  /* ---------- TIPOGRAFÍA --------------------------------------------------
     Máximo 2 familias en todo el producto.
     Fraunces: display (H1, H2, nombre de negocio, nombre de categoría).
     DM Sans: body, UI, labels, botones.
  */
  --display: 'Fraunces', ui-serif, Georgia, 'Times New Roman', serif;
  --body:    'DM Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Escala tipográfica (no inventar tamaños intermedios) */
  --t-hero:    clamp(40px, 7.2vw, 92px);
  --t-h1:      clamp(32px, 4.6vw, 52px);
  --t-h2:      clamp(24px, 3vw, 34px);
  --t-h3:      20px;
  --t-lead:    17px;
  --t-body:    15.5px;
  --t-small:   13.5px;
  --t-caption: 12px;

  --lh-titulo: 1.12;   /* 1.08–1.15 */
  --lh-body:   1.5;    /* 1.45–1.55 */
  --ls-titulo: -0.025em;
  --ls-label:  0.09em; /* labels en mayúscula */

  /* ---------- ESPACIO -----------------------------------------------------
     Escala única. Sin valores intermedios.
  */
  --e-1:  4px;
  --e-2:  8px;
  --e-3:  12px;
  --e-4:  16px;
  --e-5:  24px;
  --e-6:  32px;
  --e-7:  48px;
  --e-8:  64px;
  --e-9:  96px;

  --ancho-max:   1180px;  /* contenedor general */
  --ancho-texto: 62ch;    /* medida de lectura */
  --gutter:      var(--e-6);

  /* ---------- RADIOS ------------------------------------------------------ */
  --r-card:    16px;
  --r-chico:   14px;
  --r-bloque:  24px;   /* secciones grandes / cápsulas */
  --r-pill:    999px;

  /* ---------- ELEVACIÓN ---------------------------------------------------
     Sombras bajas y frías-neutras. Nada de cajas negras pesadas.
  */
  --sombra-1: 0 1px 2px rgba(28,43,42,.05), 0 8px 20px rgba(28,43,42,.06);
  --sombra-2: 0 2px 4px rgba(28,43,42,.06), 0 18px 40px rgba(28,43,42,.12);
  --sombra-hero: 0 10px 34px rgba(12,26,30,.28);

  /* ---------- MOTION ------------------------------------------------------
     Una sola curva global en todo el producto.
  */
  --curva:       cubic-bezier(0.22, 1, 0.36, 1);
  --v-rapida:    .18s;
  --v-normal:    .32s;
  --v-lenta:     .6s;
  --stagger:     70ms;   /* 60–80ms entre categorías del hero */
  --hover-y:     -10px;  /* -8 a -12 */
  --hover-scale: 1.06;   /* 1.06 a 1.1 */

  /* ---------- ICONOS ------------------------------------------------------ */
  --icono-stroke: 2;     /* 1.8–2.2 */
  --icono-card:   26px;  /* iconos de categoría en hero */
  --icono-ui:     20px;
}

/* prefers-reduced-motion: se neutralizan los tokens de movimiento de una vez,
   así ningún componente tiene que acordarse. */
@media (prefers-reduced-motion: reduce){
  :root{
    --v-rapida: .01ms;
    --v-normal: .01ms;
    --v-lenta:  .01ms;
    --stagger:  0ms;
    --hover-y:  0px;
    --hover-scale: 1;
  }
}