/* =============================================================================
   DRINKOLOGY ACADEMIA — Sistema de diseño (marca.css)
   Una sola fuente de verdad para colores, tipografías, espaciados, radios,
   sombras y botones. La usan la web, la tienda y (en el futuro) el campus y
   la app Bar Control. Documentación: marca/MARCA.md
   ============================================================================= */

/* ---------- Tipografías autoalojadas (assets/fonts, woff2) ---------- */
@font-face { font-family: "Sora"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../assets/fonts/sora-500.woff2") format("woff2"); }
@font-face { font-family: "Sora"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../assets/fonts/sora-600.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../assets/fonts/inter-400.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../assets/fonts/inter-500.woff2") format("woff2"); }

:root {
  /* ---------- Paleta (regla 90 / 8 / 2) ---------- */
  --bg:         #0A0A0B;               /* negro obsidiana — fondo principal */
  --bg-2:       #111214;               /* grafito — secciones alternas */
  --surface:    rgba(255,255,255,0.04);/* cristal oscuro — tarjetas */
  --surface-2:  rgba(255,255,255,0.07);
  --line:       rgba(255,255,255,0.08);/* bordes y divisores de 1 px */
  --line-2:     rgba(255,255,255,0.14);
  --ink:        #F4F3EF;               /* blanco hueso — texto principal */
  --ink-soft:   #9A9CA3;               /* gris plata — texto secundario */
  --gold:       #A8823C;               /* dorado del logo — lo que vende */
  --gold-light: #C9A45C;               /* hover y brillos del dorado */
  --gold-line:  rgba(168,130,60,0.55); /* líneas finas doradas */
  --ice:        #9FE6F0;               /* azul hielo — máx. 2 %: brillos, foco, estados */
  --light-bg:   #F4F3EF;               /* única sección clara opcional */
  --on-light:   #0A0A0B;
  --on-light-soft: #4A4B50;
  --on-gold:    #0A0A0B;               /* texto sobre botón dorado (contraste 5.6:1) */

  /* ---------- Tipografía ---------- */
  --font-display: "Sora", "Space Grotesk", "Inter", system-ui, sans-serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --fs-hero:  clamp(3rem, 11vw, 7.5rem);     /* 48 → 120 px */
  --fs-h2:    clamp(2.25rem, 6vw, 4.5rem);   /* 36 → 72 px */
  --fs-h3:    clamp(1.375rem, 2.4vw, 1.75rem);
  --fs-lead:  clamp(1.0625rem, 1.6vw, 1.25rem);
  --fs-body:  1rem;
  --fs-small: 0.875rem;
  --fs-label: 0.75rem;                       /* etiquetas / datos en mayúsculas */
  --tracking-label: 0.18em;
  --tracking-tight: -0.035em;

  /* ---------- Espaciado (sistema de 8 px) ---------- */
  --s-1: 8px;  --s-2: 16px; --s-3: 24px; --s-4: 32px; --s-5: 40px;
  --s-6: 48px; --s-8: 64px; --s-10: 80px; --s-12: 96px; --s-16: 128px; --s-20: 160px;
  --gutter: 16px;                            /* celular */
  --section-y: var(--s-8);                   /* 64 px en celular, 96+ en escritorio */
  --maxw: 1280px;

  /* ---------- Radios, sombras, movimiento ---------- */
  --r-sm: 8px; --r-md: 16px; --r-lg: 24px; --r-xl: 32px; --r-pill: 999px;
  --shadow-soft: 0 24px 60px -30px rgba(0,0,0,0.6);
  --glow-gold: 0 0 0 1px rgba(201,164,92,0.35), 0 10px 40px -8px rgba(201,164,92,0.45);
  --glow-ice: 0 0 0 3px rgba(159,230,240,0.55);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --t-fast: 200ms; --t-med: 300ms; --t-slow: 400ms;
}

@media (min-width: 720px)  { :root { --gutter: 32px; } }
@media (min-width: 960px)  { :root { --section-y: var(--s-12); --gutter: 48px; } }
@media (min-width: 1280px) { :root { --section-y: var(--s-16); } }

/* ---------- Botones ---------- */
.btn {
  --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--line-2);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 26px;
  border-radius: var(--r-pill);
  border: 1px solid var(--btn-bd);
  background: var(--btn-bg); color: var(--btn-fg);
  font: 500 0.9375rem/1 var(--font-body); letter-spacing: 0.01em;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color var(--t-med) var(--ease-out), border-color var(--t-med) var(--ease-out),
              box-shadow var(--t-slow) var(--ease-out), transform var(--t-med) var(--ease-out), color var(--t-med);
  -webkit-tap-highlight-color: transparent;
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn:active { transform: translateY(1px) scale(0.99); }

.btn--gold { --btn-bg: var(--gold); --btn-fg: var(--on-gold); --btn-bd: var(--gold); }
@media (hover: hover) {
  .btn--gold:hover { --btn-bg: var(--gold-light); --btn-bd: var(--gold-light); box-shadow: var(--glow-gold); }
  .btn--ghost:hover { --btn-bd: rgba(244,243,239,0.4); --btn-bg: rgba(255,255,255,0.04); }
  .btn--line:hover { --btn-bd: var(--gold-light); --btn-fg: var(--gold-light); }
}
.btn--ghost { --btn-bg: rgba(255,255,255,0.02); }
.btn--line  { --btn-bd: var(--gold-line); }
.btn--sm { min-height: 44px; padding: 0 18px; font-size: 0.875rem; }
.btn--block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }

/* ---------- Etiquetas / datos ---------- */
.label {
  font: 500 var(--fs-label)/1.3 var(--font-body);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  font-variant-numeric: tabular-nums; color: var(--ink-soft);
}
.label--gold { color: var(--gold-light); }
.num { font-variant-numeric: tabular-nums; }

/* ---------- Punto de estado (En vivo / Próximamente) ---------- */
.status-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--ice); box-shadow: 0 0 0 4px rgba(159,230,240,0.12), 0 0 14px rgba(159,230,240,0.6);
}

/* ---------- Tarjeta de cristal oscuro ---------- */
.glass {
  position: relative; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-lg);
}
.glass::before {  /* reflejo muy leve en la esquina superior */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(120% 60% at 0% 0%, rgba(255,255,255,0.06), transparent 45%);
}

/* ---------- Foco del teclado (hielo) ---------- */
:focus-visible { outline: 2px solid var(--ice); outline-offset: 3px; border-radius: 6px; }