/* ============================================================================
   Jose y Diana — tokens de marca (fuente única de verdad del diseño).
   Copiados del sistema de diseño del proyecto. Cárgalo ANTES del CSS de cada
   página. Las fuentes (Bricolage Grotesque + Inter) se cargan por Google Fonts
   con fallback a system-ui (clave para el modo local/offline sin internet).
   ============================================================================ */
:root {
  --bg: #0c0c10;
  --bg2: #14141b;
  --surface: #1b1b23;
  --surface2: #26262f;
  --line: rgba(255, 255, 255, 0.1);
  --text: #f4f2f5;
  --muted: #9c9caa;

  --amber: #ff1a1a; /* rojo de marca */
  --corte: #ff1a1a; /* golpe / corte */
  --tap: #ff6fa5; /* punteo (pisos 4 y 8) */
  --one: #ffcb45; /* el "1" / OverTime (dorado) */
  --qz: #c9c9d4;

  --intro: #5b8cff;
  --derecho: #f4a93b;
  --majao: #ff6b5c;
  --mambo: #36d6c3;
  --puente: #b98ae8;
  --outro: #e07bb8;

  --display: "Bricolage Grotesque", system-ui, sans-serif;
  --body: "Inter", system-ui, sans-serif;

  --radius-card: 16px;
  --radius-panel: 24px;
  --radius-pill: 999px;
}

* {
  box-sizing: border-box;
}

/* El atributo `hidden` debe ganar SIEMPRE: si no, reglas de autor como
   `.pdf-stage{display:flex}` lo anulan y dejan contenedores tapando la vista. */
[hidden] {
  display: none !important;
}

body {
  margin: 0;
  /* fondo de marca: base oscura + halo rojo arriba a la derecha */
  background: radial-gradient(1100px 560px at 72% -12%, rgba(255, 26, 26, 0.13) 0%, var(--bg) 60%) fixed,
    var(--bg);
  color: var(--text);
  font-family: var(--body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
.display {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* Wordmark CSS (cuando no usamos el PNG): JOSE Y DIANA con la Y roja */
.wordmark {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -0.02em;
}
.wordmark .y {
  color: var(--amber);
}

/* Logo PNG de marca */
.brand-logo {
  display: block;
  height: auto;
  width: min(440px, 72vw);
  margin: 0 auto;
}
.brand-logo--sm {
  width: 150px;
}

/* Botón / pill base de marca */
.btn {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  border-radius: var(--radius-pill);
  padding: 12px 26px;
  border: 1.5px solid transparent;
  transition: filter 0.12s, background 0.12s, border-color 0.12s;
}
.btn-primary {
  background: var(--amber);
  color: #fff;
}
.btn-primary:hover {
  filter: brightness(1.08);
}
.btn-ghost {
  background: transparent;
  color: var(--text);
  border-color: rgba(255, 255, 255, 0.3);
}
.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.08);
}

.pill {
  font-size: 0.78rem;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: var(--surface2);
  color: var(--muted);
  border: 1px solid var(--line);
  display: inline-block;
}

.eyebrow {
  font-size: 0.78rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--amber);
  font-weight: 600;
}