/* ELHAC Trivia — identidad de ELHAC Consultorías y Comunicaciones */
@font-face { font-family: 'Montserrat'; font-weight: 100 900; font-display: swap; src: url('/fonts/montserrat-latin-wght-normal.woff2') format('woff2-variations'); }
@font-face { font-family: 'Montserrat'; font-style: italic; font-weight: 100 900; font-display: swap; src: url('/fonts/montserrat-latin-wght-italic.woff2') format('woff2-variations'); }
@font-face { font-family: 'Raleway'; font-weight: 100 900; font-display: swap; src: url('/fonts/raleway-latin-wght-normal.woff2') format('woff2-variations'); }
@font-face { font-family: 'Antonio'; font-weight: 100 700; font-display: swap; src: url('/fonts/antonio-latin-wght-normal.woff2') format('woff2-variations'); }

:root {
  --navy: #222B55;
  --navy-deep: #1A2147;
  --coral: #EF7D61;
  --coral-ink: #B5472C;
  --cyan: #00A7CB;
  --cyan-ink: #007A94;
  --amber: #F2B33D;
  --soft: #F2F5F8;
  --line: #E6EAF0;
  --muted: #5E6682;
  --ok: #1E9E6A;
  --bad: #C4452B;
  --f-title: 'Montserrat', system-ui, sans-serif;
  --f-display: 'Antonio', 'Arial Narrow', sans-serif;
  --f-body: 'Raleway', system-ui, sans-serif;
  /* Colores de las 4 opciones (con figura para no depender solo del color) */
  --o0: var(--navy); --o0-ink: #fff;
  --o1: var(--coral); --o1-ink: var(--navy);
  --o2: var(--cyan); --o2-ink: var(--navy);
  --o3: var(--amber); --o3-ink: var(--navy);
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font-family: var(--f-body); color: var(--navy); background: #fff; -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-family: var(--f-title); font-weight: 800; margin: 0; }
p { margin: 0; }
button { font: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Botones */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 14px 30px;
  border: 0; border-radius: 999px; font-family: var(--f-title); font-weight: 700; font-size: 15px; letter-spacing: .06em;
  text-transform: uppercase; text-decoration: none; transition: transform .15s, background .2s, color .2s, opacity .2s;
}
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn--coral { background: var(--coral); color: var(--navy); }
.btn--coral:hover:not(:disabled) { background: var(--navy); color: #fff; }
.btn--navy { background: var(--navy); color: #fff; }
.btn--navy:hover:not(:disabled) { background: var(--coral); color: var(--navy); }
.btn--ghost { background: transparent; color: var(--navy); box-shadow: inset 0 0 0 1.5px var(--navy); text-transform: none; letter-spacing: 0; }
.btn--ghost:hover { background: var(--navy); color: #fff; }
.btn--ghost-light { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .7); text-transform: none; letter-spacing: 0; }
.btn--ghost-light:hover { background: #fff; color: var(--navy); }
.btn--lg { min-height: 64px; padding: 18px 40px; font-size: 18px; }

.kicker { display: inline-flex; align-items: center; gap: 12px; font-family: var(--f-display); font-size: 16px; letter-spacing: .18em; text-transform: uppercase; color: var(--coral-ink); }
.kicker::before { content: ''; width: 30px; height: 2px; background: var(--coral); }
.on-dark .kicker { color: var(--coral); }

/* Figuras de las opciones */
.shape { width: 1em; height: 1em; flex: none; fill: currentColor; }

/* Fondo de ondas de marca (video con blanco fundido) */
.ondas { position: fixed; inset: auto 0 0 0; width: 100%; height: 70vh; object-fit: cover; object-position: center 70%; mix-blend-mode: multiply; opacity: .45; pointer-events: none; z-index: 0; }
@media (prefers-reduced-motion: reduce) { .ondas { display: none; } }

/* Marca de agua «C» */
.c-mark { position: fixed; right: -6vw; bottom: -12vh; width: min(60vw, 720px); aspect-ratio: 1; opacity: .05; pointer-events: none; z-index: 0; }

/* Confeti (final) */
.confeti { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 5; }
.confeti i { position: absolute; top: -20px; width: 10px; height: 16px; border-radius: 2px; animation: caer linear forwards; }
@keyframes caer { to { transform: translateY(110vh) rotate(720deg); } }
@media (prefers-reduced-motion: reduce) { .confeti { display: none; } }

/* Aviso de conexión */
.conexion { position: fixed; left: 50%; top: 16px; transform: translateX(-50%); z-index: 50; background: var(--navy); color: #fff; padding: 10px 18px; border-radius: 999px; font-size: 14px; font-weight: 600; box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .4); }