/* ============================================================
   ARENA FESTIVAL · Capa de marca blanca (v1.2)
   ------------------------------------------------------------
   TODO el tema vive aquí. Derivado del sitio real www.arena.mx
   (verificado 2026-07-24: fondo negro, logo dorado centrado,
   announce blanco arriba, nav Anton uppercase con tracking,
   CTA píldora blanca con texto negro) y del arte oficial
   "Hotel Packages" (tarjetas metálicas Silver/Gold/Diamond,
   en _ref/Arena/Hotel Packages .PNG).

   Fuentes reales del sitio (Google Fonts OFL, servidas EN LOCAL):
   Anton 400 (display) · Epilogue variable (cuerpo).
   Logo oficial 15th Anniversary en assets/img/arena-15th.png
   (recorte del PNG con alpha entregado en _ref/Arena).
   ============================================================ */

@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/anton-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/anton-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0;
}
@font-face {
  font-family: 'Epilogue';
  font-style: normal;
  font-weight: 100 900;              /* fuente variable: un solo fichero */
  font-display: swap;
  src: url('../fonts/epilogue-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: 'Epilogue';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/epilogue-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0;
}

:root {
  /* --- Identidad ------------------------------------------- */
  --brand-name: 'Arena Festival';

  /* --- Color (tema oscuro real de arena.mx) ------------------ */
  --brand-primary: #d4a437;        /* oro — acciones, énfasis */
  --brand-primary-deep: #a97f24;   /* oro profundo — active */
  --brand-primary-ink: #16130a;    /* texto sobre oro */
  --brand-accent: #f1c85c;         /* oro claro — brillos, hover */
  --brand-accent-deep: #8a6a1f;    /* oro apagado */
  --brand-accent-soft: #241d0e;    /* oro lavado sobre negro — fondos suaves */

  --brand-announce-bg: #ffffff;    /* announce real: blanco con texto negro */
  --brand-announce-ink: #0a0a0a;
  --brand-header-solid: #050505;   /* header al hacer scroll */

  --brand-ink: #f4f2ec;            /* texto principal (sobre negro) */
  --brand-ink-soft: #b9b4a6;       /* texto secundario, arena clara */
  --brand-ink-faint: #7d7a6f;      /* metadatos, placeholders */

  --brand-paper: #0a0a0b;          /* fondo general, negro real */
  --brand-paper-warm: #141210;     /* banda cálida oscura */
  --brand-surface: #131316;        /* tarjetas, paneles */
  --brand-line: #26262b;           /* bordes, separadores */
  --brand-line-strong: #3a3a41;

  --brand-danger: #e4574f;         /* errores sobre oscuro (accesible) */
  --brand-ok: #7fbf7a;             /* confirmaciones sobre oscuro */

  /* --- Metales (arte oficial Hotel Packages) ----------------- */
  --metal-silver-hi: #f4f5f7;  --metal-silver-mid: #c9cdd4;  --metal-silver-lo: #9aa0ab;
  --metal-gold-hi: #f6dd8f;    --metal-gold-mid: #d9ad4b;    --metal-gold-lo: #a97e22;
  --metal-diamond-hi: #ffffff; --metal-diamond-mid: #dfe5ee; --metal-diamond-lo: #aeb9cb;
  --metal-ink: #1c1a14;            /* texto sobre metal */
  --metal-ink-soft: #4c483c;

  /* --- Tipografía (reales del sitio) ------------------------- */
  --brand-font-sans: 'Epilogue', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --brand-font-accent: 'Anton', 'Arial Narrow', sans-serif;

  --brand-font-display: var(--brand-font-accent);
  --brand-display-case: uppercase;
  --brand-display-track: 0.04em;   /* Anton respira con algo de tracking */

  /* Botones arena.mx: Anton uppercase con tracking amplio */
  --brand-btn-font: var(--brand-font-accent);
  --brand-btn-case: uppercase;
  --brand-btn-fs: 0.9375rem;
  --brand-btn-track: 0.14em;

  --brand-fs-hero: clamp(2.75rem, 7vw, 4.5rem);
  --brand-fs-h1: clamp(2rem, 4.5vw, 3rem);
  --brand-fs-h2: clamp(1.5rem, 3vw, 2.125rem);
  --brand-fs-h3: 1.25rem;
  --brand-fs-body: 1rem;
  --brand-fs-small: 0.875rem;
  --brand-fs-micro: 0.8125rem;

  /* --- Forma ------------------------------------------------ */
  --brand-radius-pill: 999px;      /* CTA píldora del sitio real */
  --brand-radius-card: 10px;
  --brand-radius-field: 8px;
  --brand-radius-chip: 999px;

  /* --- Sombra (sobre negro: halos suaves) -------------------- */
  --brand-shadow-card: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 10px 30px rgba(0, 0, 0, 0.55);
  --brand-shadow-lift: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 18px 50px rgba(0, 0, 0, 0.7);
  --brand-shadow-panel: 0 24px 70px rgba(0, 0, 0, 0.8);

  /* --- Ritmo ------------------------------------------------ */
  --brand-space-1: 0.25rem;
  --brand-space-2: 0.5rem;
  --brand-space-3: 0.75rem;
  --brand-space-4: 1rem;
  --brand-space-5: 1.5rem;
  --brand-space-6: 2rem;
  --brand-space-7: 3rem;
  --brand-space-8: 4.5rem;
  --brand-space-9: 7rem;

  --brand-container: 74rem;
  --brand-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --brand-t-fast: 180ms;
  --brand-t-med: 320ms;
  --brand-t-slow: 560ms;
}