/* ==========================================================================
   Match Horse — Web pública
   Design system portado desde los mockups de Google Stitch
   (proyecto "Match Horse Exchange Landing Page").
   Sin dependencias: un único CSS, sin framework ni build step.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* --- Canales RGB de la paleta ----------------------------------------
     Los colores se declaran una sola vez aquí, en canales sueltos, para
     poder usarlos con transparencia (rgb(var(--x-rgb) / 0.5)) sin repetir
     el valor. Retocar el tono del sitio = tocar sólo este bloque. */

  /* Superficies: negro neutro (la paleta original de Stitch era marrón cálido) */
  --background-rgb: 13 13 14;
  --surface-container-lowest-rgb: 7 7 8;
  --surface-container-low-rgb: 19 19 21;
  --surface-container-rgb: 25 26 27;
  --surface-container-high-rgb: 32 33 35;
  --surface-container-highest-rgb: 39 40 42;
  --surface-bright-rgb: 46 47 49;
  --surface-variant-rgb: 38 39 41;

  /* Contenido: grises neutros */
  --on-surface-rgb: 235 235 236;
  --on-surface-variant-rgb: 182 182 184;
  --outline-rgb: 138 138 141;
  --outline-variant-rgb: 58 59 61;

  /* Marca: el dorado se mantiene */
  --primary-rgb: 249 189 64;
  --primary-container-rgb: 200 146 17;
  --secondary-rgb: 255 184 110;
  --secondary-container-rgb: 242 146 0;

  /* Mercado */
  --market-back-rgb: 119 168 226;
  --market-lay-rgb: 214 144 159;

  /* --- Colores sólidos --------------------------------------------------- */

  /* Superficies */
  --background: rgb(var(--background-rgb));
  --surface: var(--background);
  --surface-dim: var(--background);
  --surface-container-lowest: rgb(var(--surface-container-lowest-rgb));
  --surface-container-low: rgb(var(--surface-container-low-rgb));
  --surface-container: rgb(var(--surface-container-rgb));
  --surface-container-high: rgb(var(--surface-container-high-rgb));
  --surface-container-highest: rgb(var(--surface-container-highest-rgb));
  --surface-bright: rgb(var(--surface-bright-rgb));
  --surface-variant: rgb(var(--surface-variant-rgb));

  /* Contenido */
  --on-surface: rgb(var(--on-surface-rgb));
  --on-surface-variant: rgb(var(--on-surface-variant-rgb));
  --inverse-surface: var(--on-surface);
  --outline: rgb(var(--outline-rgb));
  --outline-variant: rgb(var(--outline-variant-rgb));

  /* Marca */
  --primary: rgb(var(--primary-rgb));
  --primary-container: rgb(var(--primary-container-rgb));
  --secondary: rgb(var(--secondary-rgb));
  --secondary-container: rgb(var(--secondary-container-rgb));

  /* Texto sobre los colores de marca (near-black, no marrón) */
  --on-primary: #14140f;
  --on-primary-fixed: #14140f;
  --on-primary-container: #14140f;
  --on-secondary-container: #14140f;

  /* Mercado */
  --market-back: rgb(var(--market-back-rgb));
  --market-lay: rgb(var(--market-lay-rgb));
  --market-back-ink: #000000;
  --market-lay-ink: #000000;
  /* Tinta apagada de "Crear Apuesta". La app usa #354f6d / #68434b, que sobre
     sus celdas dan 3.4:1; se oscurecieron para llegar a 4.5:1 (WCAG AA). */
  --market-back-ink-muted: #26394e;
  --market-lay-ink-muted: #492f34;

  /* Dorsales (colores de gualdrapa por número) */
  --saddle-1: #ea3a29;
  --saddle-1-ink: #ffffff;
  --saddle-2: #fcfdfc;
  --saddle-2-ink: #14140f;
  --saddle-3: #345bba;
  --saddle-3-ink: #ffffff;
  --saddle-4: #d8cf3c;
  --saddle-4-ink: #14140f;
  --status-live: #bf4526;
  --status-live-text: #d95a38; /* variante clara: #bf4526 sobre fondo oscuro da 3.6:1 */
  --error: #ffb4ab;

  /* Hairlines doradas */
  --line-faint: rgb(var(--primary-rgb) / 0.1);
  --line-soft: rgb(var(--primary-rgb) / 0.2);
  --line: rgb(var(--primary-rgb) / 0.3);
  --line-strong: rgb(var(--primary-rgb) / 0.4);

  /* Tipografías */
  --font-headline: "Saira Condensed", "Arial Narrow", Arial, sans-serif;
  --font-body: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-data: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Escala de espaciado */
  --unit: 4px;
  --gutter: 16px;
  --stack-md: 24px;
  --stack-lg: 40px;
  --stack-xl: 64px;
  --margin: 16px;

  /* Layout */
  --content-width: 1200px;
  --header-height: 72px;

  /* Radios (el sistema es casi todo esquina viva) */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
}

@media (min-width: 768px) {
  :root {
    --margin: 32px;
    --header-height: 80px;
  }
}

/* --------------------------------------------------------------------------
   2. Reset y base
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* [hidden] tiene que ganarle al display de las clases (.faq-group es flex,
   .site-nav es flex): sin esto, ocultar por JS no surte efecto. */
[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + 24px);
}

body {
  margin: 0;
  background-color: var(--background);
  color: var(--on-surface);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body::selection,
::selection {
  background: var(--secondary-container);
  color: var(--on-secondary-container);
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-family: var(--font-headline);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--inverse-surface);
}

p {
  margin: 0;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

input {
  font: inherit;
}

:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.hide-scrollbar {
  scrollbar-width: none;
}

.hide-scrollbar::-webkit-scrollbar {
  display: none;
}

/* --------------------------------------------------------------------------
   3. Escala tipográfica
   -------------------------------------------------------------------------- */

.headline-xl {
  font-family: var(--font-headline);
  font-size: 40px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.headline-lg {
  font-family: var(--font-headline);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.headline-md {
  font-family: var(--font-headline);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
  text-transform: uppercase;
}

.body-lg {
  font-size: 17px;
  line-height: 1.6;
}

.body-md {
  font-size: 16px;
  line-height: 1.5;
}

.body-sm {
  font-size: 14px;
  line-height: 1.4;
}

.data-lg {
  font-family: var(--font-data);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
}

.data-sm {
  font-family: var(--font-data);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
}

@media (min-width: 768px) {
  .headline-xl {
    font-size: 48px;
  }

  .headline-lg {
    font-size: 32px;
  }

  .headline-md {
    font-size: 24px;
  }

  .body-lg {
    font-size: 18px;
  }
}

.text-primary {
  color: var(--primary);
}

.text-muted {
  color: var(--on-surface-variant);
}

/* --------------------------------------------------------------------------
   4. Layout
   -------------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--content-width);
  margin-inline: auto;
  padding-inline: var(--margin);
}

.section {
  padding-block: var(--stack-xl);
}

.section--tint {
  background-color: var(--surface-container);
  border-block: 1px solid var(--line-faint);
}

.section-heading {
  padding-bottom: var(--gutter);
  margin-bottom: var(--stack-lg);
  border-bottom: 1px solid var(--line-soft);
}

.section-heading h2 {
  letter-spacing: 0.05em;
}

/* --------------------------------------------------------------------------
   5. Botones
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  font-family: var(--font-headline);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border: 1px solid transparent;
  border-radius: 0;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.btn--primary {
  background-color: var(--primary);
  color: var(--on-primary-fixed);
}

.btn--primary:hover {
  background-color: var(--secondary-container);
  color: var(--on-secondary-container);
}

.btn--outline {
  border-color: var(--primary);
  color: var(--primary);
}

.btn--outline:hover {
  border-color: var(--secondary-container);
  color: var(--secondary-container);
  background-color: rgb(var(--secondary-container-rgb) / 0.1);
}

.btn--ghost {
  padding-inline: 0;
  padding-block: 0 6px;
  border-bottom: 1px solid var(--primary);
  color: var(--primary);
  letter-spacing: 0.05em;
}

.btn--ghost:hover {
  color: var(--secondary-container);
  border-bottom-color: var(--secondary-container);
}

.btn--sm {
  padding: 10px 20px;
  font-size: 16px;
  letter-spacing: 0.06em;
}

.btn__icon {
  width: 20px;
  height: 20px;
  transition: transform 0.2s;
}

.btn:hover .btn__icon {
  transform: translateX(3px);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gutter);
}

/* --------------------------------------------------------------------------
   6. Header y navegación
   -------------------------------------------------------------------------- */

.site-header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 50;
  background-color: var(--background);
  border-bottom: 1px solid var(--line);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gutter);
  height: var(--header-height);
  padding-inline: var(--margin);
}

.brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.brand img {
  height: 44px;
  width: auto;
  object-fit: contain;
}

@media (min-width: 768px) {
  .brand img {
    height: 56px;
  }
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--stack-md);
}

.site-nav a {
  font-family: var(--font-headline);
  font-size: 20px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--on-surface-variant);
  transition: color 0.2s;
}

.site-nav a:hover {
  color: var(--secondary-container);
}

.site-nav a[aria-current="page"] {
  color: var(--primary);
}

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-inline-end: -10px;
  color: var(--primary);
  border: 1px solid var(--line);
}

.nav-toggle svg {
  width: 22px;
  height: 22px;
}

.nav-toggle__close {
  display: none;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__open {
  display: none;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__close {
  display: block;
}

@media (max-width: 899px) {
  .nav-toggle {
    display: inline-flex;
  }

  .site-nav {
    position: absolute;
    inset-block-start: 100%;
    inset-inline: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--unit) var(--margin) var(--gutter);
    background-color: var(--background);
    border-bottom: 1px solid var(--line);
  }

  .site-nav[hidden] {
    display: none;
  }

  .site-nav a {
    padding-block: 14px;
    border-bottom: 1px solid var(--line-faint);
  }

  .site-nav a:last-child {
    border-bottom: none;
  }
}

.site-main {
  padding-top: var(--header-height);
}

/* --------------------------------------------------------------------------
   7. Hero (index)
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  /* 88vh manda en pantallas altas; 52vw impone un alto mínimo en pantallas
     anchas y bajas. Sin ese piso, `cover` recorta tanto por arriba que se
     lleva por delante las cabezas de los jinetes. */
  min-height: max(88vh, 52vw);
  margin-top: calc(var(--header-height) * -1);
  padding-top: var(--header-height);
  background-image: url("../img/hero.jpg");
  background-size: cover;
  /* La cabeza del ejemplar está cerca del borde superior y las patas ya salen
     de cuadro abajo: anclando arriba, el recorte de `cover` se come sólo la
     parte inferior. */
  background-position: center top;
  background-color: var(--surface-container-low);
}

@media (max-width: 767px) {
  /* El encuadre horizontal no se toca: `center` ya deja la cabeza del ejemplar
     a la derecha del titular. Sólo cambia el velo, sin la parte lateral. */
  .hero::before {
    background: linear-gradient(
      to top,
      var(--background) 0%,
      rgb(var(--background-rgb) / 0.72) 30%,
      rgb(var(--background-rgb) / 0.4) 65%,
      rgb(var(--background-rgb) / 0.55) 100%
    );
  }
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  /* Dos velos: uno vertical que asienta la foto sobre el fondo y otro
     horizontal que oscurece sólo la mitad izquierda, donde va el titular.
     Así los caballos (mitad derecha) quedan a la vista de cuerpo entero. */
  background:
    linear-gradient(
      to top,
      var(--background) 0%,
      rgb(var(--background-rgb) / 0.45) 24%,
      rgb(var(--background-rgb) / 0.12) 60%,
      rgb(var(--background-rgb) / 0.35) 100%
    ),
    linear-gradient(
      to right,
      rgb(var(--background-rgb) / 0.92) 0%,
      rgb(var(--background-rgb) / 0.78) 30%,
      rgb(var(--background-rgb) / 0.25) 58%,
      rgb(var(--background-rgb) / 0) 78%
    );
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--stack-lg);
  padding-block: var(--stack-xl);
}

.hero__title {
  max-width: 18ch;
  font-size: clamp(40px, 8vw, 88px);
  line-height: 0.92;
  letter-spacing: -0.02em;
}

.hero__title span {
  display: block;
}

.hero__title .is-underlined {
  display: inline;
  border-bottom: 2px solid var(--primary);
}

.hero__lead {
  max-width: 42rem;
  color: var(--on-surface-variant);
  font-size: clamp(16px, 2.2vw, 20px);
  line-height: 1.6;
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gutter);
  color: rgb(var(--on-surface-variant-rgb) / 0.8);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.hero__meta .dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: rgb(var(--primary-rgb) / 0.5);
}

/* Cinta de mercados activos */
.ticker {
  position: relative;
  z-index: 1;
  background-color: rgb(var(--surface-container-high-rgb) / 0.9);
  border-block: 1px solid var(--line-soft);
  backdrop-filter: blur(4px);
  overflow: hidden;
}

.ticker__track:focus-visible {
  outline-offset: -3px;
}

.ticker__track {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px var(--margin);
  overflow-x: auto;
  white-space: nowrap;
}

.ticker__label {
  flex-shrink: 0;
  margin-inline-end: var(--gutter);
  font-family: var(--font-headline);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--on-surface-variant);
}

.ticker__chips {
  display: flex;
  flex-shrink: 0;
  gap: 8px;
}

.ticker__chip {
  flex-shrink: 0;
  padding: 4px 12px;
  font-family: var(--font-data);
  font-size: 13px;
  font-weight: 500;
  color: var(--primary);
  background-color: var(--surface-container);
  border: 1px solid var(--line);
  transition: color 0.2s, border-color 0.2s, background-color 0.2s;
}

.ticker__chip:hover {
  color: var(--secondary-container);
  border-color: var(--secondary-container);
  background-color: rgb(var(--secondary-container-rgb) / 0.15);
}

/* --------------------------------------------------------------------------
   8. Pasos "Un mercado, no una casa"
   -------------------------------------------------------------------------- */

.steps {
  display: grid;
  gap: var(--stack-md) var(--gutter);
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .steps {
    grid-template-columns: repeat(3, 1fr);
  }
}

.step {
  display: flex;
  flex-direction: column;
  gap: var(--gutter);
}

.step__number {
  font-family: var(--font-data);
  font-size: 40px;
  font-weight: 600;
  line-height: 1;
  color: rgb(var(--primary-rgb) / 0.4);
  transition: color 0.2s;
}

.step:hover .step__number {
  color: var(--secondary-container);
}

.step p {
  color: var(--on-surface-variant);
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   9. Panel de mercado (index)
   Reproduce el lenguaje visual del panel real de juego: celdas redondeadas
   azules para "Jugar" y rosadas para "Banquear", tres niveles de profundidad
   por lado y dorsales con el color de gualdrapa según el número.
   -------------------------------------------------------------------------- */

.market-split {
  display: flex;
  flex-direction: column;
  gap: var(--stack-lg);
  align-items: center;
}

@media (min-width: 1024px) {
  .market-split {
    flex-direction: row;
  }

  .market-split__copy {
    width: 33%;
    flex-shrink: 0;
  }

  .market-split__panel {
    width: 67%;
  }
}

.market-split__copy {
  display: flex;
  flex-direction: column;
  gap: var(--gutter);
  align-items: flex-start;
}

.market-split__copy h2 {
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.1;
  letter-spacing: 0.04em;
}

.market-split__copy p {
  color: var(--on-surface-variant);
}

.market-split__panel {
  width: 100%;
  min-width: 0;
}

/* --- Contenedor --- */

.board {
  --cell-w: 70px;
  --cell-h: 46px;
  --cell-gap: 2px;
  --group-gap: 8px;

  margin: 0;
  background-color: var(--surface-container-lowest);
  border: 1px solid var(--line-soft);
}

.board__header {
  padding: var(--gutter);
  border-bottom: 1px solid var(--line-faint);
}

.board__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

/* --- Rejilla --- */

.board__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: var(--cell-gap) var(--group-gap);
  align-items: center;
  padding: var(--gutter);
  overflow-x: auto;
}

.board__group {
  padding-bottom: 6px;
  text-align: center;
  color: var(--on-surface);
  font-size: 15px;
}

.board__cells {
  display: grid;
  grid-template-columns: repeat(3, var(--cell-w));
  gap: var(--cell-gap);
}

.cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  height: var(--cell-h);
  padding-inline: 2px;
  border-radius: 6px;
  line-height: 1.15;
  text-align: center;
}

/* Cada celda es una oferta abierta: arriba el tipo de jugada, abajo el monto. */
.cell__code,
.cell__amount {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
}

.cell--cta {
  font-size: 12px;
}

.cell--back.cell--cta {
  color: var(--market-back-ink-muted);
}

.cell--lay.cell--cta {
  color: var(--market-lay-ink-muted);
}

.cell--back {
  background-color: var(--market-back);
  color: var(--market-back-ink);
}

.cell--lay {
  background-color: var(--market-lay);
  color: var(--market-lay-ink);
}

.cell--void {
  background-color: var(--surface-container);
}



/* --- Ejemplar --- */

.runner {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding-right: var(--gutter);
}

.runner__saddle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 3px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
}

.runner__saddle[data-saddle="1"] {
  background-color: var(--saddle-1);
  color: var(--saddle-1-ink);
}

.runner__saddle[data-saddle="2"] {
  background-color: var(--saddle-2);
  color: var(--saddle-2-ink);
}

.runner__saddle[data-saddle="3"] {
  background-color: var(--saddle-3);
  color: var(--saddle-3-ink);
}

.runner__saddle[data-saddle="4"] {
  background-color: var(--saddle-4);
  color: var(--saddle-4-ink);
}

.runner__name {
  font-size: 18px;
  line-height: 1.2;
  color: var(--on-surface);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.runner--out .runner__saddle {
  opacity: 0.55;
}

.runner--out .runner__name {
  color: rgb(var(--on-surface-variant-rgb) / 0.75);
}

.runner__flag {
  flex-shrink: 0;
  padding: 2px 8px;
  border-radius: 4px;
  background-color: #6d2a25;
  color: #ffc6bf;
  font-size: 13px;
  font-weight: 600;
}

@media (max-width: 767px) {
  /* Seis celdas no entran al lado del nombre. Se mantiene una fila por
     ejemplar y se ocultan las columnas de afuera: queda la oferta contigua al
     centro de cada lado. */
  .board {
    --cell-w: 60px;
    --group-gap: 6px;
  }

  .board__cells {
    grid-template-columns: var(--cell-w);
  }

  .board__cells--back .cell:nth-child(-n + 2),
  .board__cells--lay .cell:nth-child(n + 2) {
    display: none;
  }

  .runner {
    padding-right: 8px;
  }

  .runner__name {
    font-size: 16px;
  }
}

/* --------------------------------------------------------------------------
   10. Cierre (index)
   -------------------------------------------------------------------------- */

.closing {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--stack-md);
  max-width: 800px;
  margin-inline: auto;
  text-align: center;
}

.closing .btn-row,
.prefooter .btn-row {
  justify-content: center;
}

.closing__rule {
  width: 64px;
  height: 4px;
  margin-bottom: var(--gutter);
  background-color: var(--secondary-container);
}

.closing h2 {
  letter-spacing: 0.1em;
}

.closing p {
  max-width: 36rem;
  color: var(--on-surface-variant);
}

/* --------------------------------------------------------------------------
   11. Cabecera de página interna
   -------------------------------------------------------------------------- */

.page-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-block: var(--stack-xl);
  text-align: center;
  border-bottom: 1px solid var(--outline-variant);
}

.page-header h1 {
  max-width: 16ch;
  margin-bottom: var(--gutter);
  font-size: clamp(38px, 7vw, 80px);
  line-height: 0.92;
}

.page-header p {
  max-width: 42rem;
  color: rgb(var(--on-surface-rgb) / 0.7);
}

.page-header--tinted {
  background: linear-gradient(
    to bottom,
    rgb(var(--surface-container-high-rgb) / 0.5),
    transparent
  );
  border-bottom: none;
}

.page-header--tinted h1 {
  max-width: none;
  letter-spacing: 0.1em;
  margin-bottom: var(--stack-md);
}

/* --------------------------------------------------------------------------
   12. Tipos de apuesta
   -------------------------------------------------------------------------- */

.markets-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gutter);
  margin-top: var(--stack-md);
}

@media (min-width: 1024px) {
  .markets-layout {
    grid-template-columns: 3fr 9fr;
  }
}

.markets-aside {
  display: none;
}

@media (min-width: 1024px) {
  .markets-aside {
    display: block;
  }
}

.markets-aside__nav {
  position: sticky;
  top: calc(var(--header-height) + 32px);
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-left: 1px solid var(--outline-variant);
}

.markets-aside__nav a {
  padding: 10px 0 10px 24px;
  font-family: var(--font-headline);
  font-size: 22px;
  font-weight: 600;
  text-transform: uppercase;
  color: rgb(var(--on-surface-rgb) / 0.6);
  border-left: 2px solid transparent;
  margin-left: -1px;
  transition: color 0.2s, border-color 0.2s;
}

.markets-aside__nav a:hover {
  color: var(--secondary);
}

.markets-aside__nav a.is-active {
  color: var(--secondary);
  border-left-color: var(--secondary);
  box-shadow: -1px 0 8px rgb(var(--secondary-rgb) / 0.35);
}

.market-block {
  display: flex;
  flex-direction: column-reverse;
  gap: var(--stack-lg);
  align-items: center;
  padding-block: var(--stack-xl);
  border-bottom: 1px solid var(--outline-variant);
  scroll-margin-top: calc(var(--header-height) + 48px);
}

.market-block:last-child {
  border-bottom: none;
}

@media (min-width: 768px) {
  .market-block {
    flex-direction: row;
  }

  .market-block--reverse {
    flex-direction: row-reverse;
  }
}

.market-block__body {
  display: flex;
  flex-direction: column;
  gap: var(--gutter);
  flex-grow: 1;
  min-width: 0;
}

.market-block__eyebrow {
  font-family: var(--font-data);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--primary-container);
}

.market-block__body h2 {
  font-size: clamp(38px, 6vw, 56px);
  line-height: 1;
}

.market-block__body > p {
  color: rgb(var(--on-surface-rgb) / 0.8);
  font-size: 18px;
  line-height: 1.6;
}

.market-rules li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding-block: 4px;
  color: rgb(var(--on-surface-rgb) / 0.8);
}

.market-rules li::before {
  content: "—";
  flex-shrink: 0;
  font-weight: 700;
  color: var(--secondary-container);
}

.market-rules strong {
  color: var(--on-surface);
}

.market-rules .is-alert {
  color: var(--status-live-text);
}

.market-block .btn {
  align-self: flex-start;
  margin-top: 8px;
  border-radius: var(--radius-md);
  border-color: var(--secondary-container);
  color: var(--secondary-container);
}

.market-block .btn:hover {
  background-color: var(--secondary-container);
  color: var(--surface-container-lowest);
  border-color: var(--secondary-container);
}

/* Tarjeta de tutorial en video */
.video-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .video-card {
    width: 340px;
  }
}

.video-card__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  background-color: var(--surface-container-low);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg);
}

.video-card__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-color: #000;
}

.video-card.is-playing .video-card__tag,
.video-card.is-playing .video-card__duration,
.video-card.is-playing .video-card__center {
  display: none;
}

.video-card__tag {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 4px 8px;
  font-family: var(--font-data);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--primary-container);
  background-color: rgb(var(--surface-container-rgb) / 0.8);
  border: 1px solid var(--primary-container);
  border-radius: var(--radius-sm);
  backdrop-filter: blur(4px);
}

/* El overlay sólo existe si hay JS; sin él el <video> lleva sus controles. */
.video-card__center {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
}

.js .video-card__center {
  display: flex;
}

.video-card__play {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  color: var(--secondary-container);
  background-color: rgb(var(--secondary-container-rgb) / 0.2);
  border: 1px solid var(--secondary-container);
  border-radius: 50%;
  transition: background-color 0.2s, transform 0.2s;
}

.video-card__play svg {
  width: 28px;
  height: 28px;
  margin-left: 3px;
}

.video-card__play:hover {
  background-color: rgb(var(--secondary-container-rgb) / 0.4);
  transform: scale(1.06);
}

.video-card__duration {
  position: absolute;
  right: 12px;
  bottom: 12px;
  padding: 4px 8px;
  font-family: var(--font-data);
  font-size: 11px;
  color: var(--on-surface);
  background-color: rgb(var(--surface-container-rgb) / 0.8);
  border-radius: var(--radius-sm);
  backdrop-filter: blur(4px);
}

.video-card figcaption {
  font-size: 13px;
  font-style: italic;
  color: rgb(var(--on-surface-rgb) / 0.6); /* 0.5 en el mockup: no llegaba a 4.5:1 */
}

/* --- Modal de reglas -------------------------------------------------------
   Sin JavaScript el <dialog> se muestra como una sección normal al final de la
   página y el botón de cada mercado funciona como ancla. Con JavaScript se
   abre como modal (showModal), con foco atrapado y Escape por el navegador. */

.rules {
  display: block;
  width: 100%;
  max-width: var(--content-width);
  margin: 0 auto var(--stack-lg);
  padding-inline: var(--margin);
  border: 0;
  background: transparent;
  color: var(--on-surface);
  scroll-margin-top: calc(var(--header-height) + 24px);
}

.rules::backdrop {
  background-color: rgb(0 0 0 / 0.75);
}

.js .rules {
  display: none;
}

/* Navegador sin <dialog>: se vuelve al degradado en línea. */
.js.no-dialog .rules {
  display: block;
}

.js.no-dialog .rules__close {
  display: none;
}

.js .rules[open] {
  display: flex;
  position: fixed;
  inset: 0;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: var(--margin);
  overflow: hidden;
}

.rules__panel {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 760px;
  margin-inline: auto;
  background-color: var(--surface-container-low);
  border: 1px solid var(--line);
}

.js .rules[open] .rules__panel {
  max-height: 100%;
}

.rules__header {
  position: relative;
  flex-shrink: 0;
  padding: var(--stack-md) var(--stack-md) var(--gutter);
  border-bottom: 1px solid var(--line-faint);
}

.rules__eyebrow {
  margin-bottom: 4px;
  font-family: var(--font-data);
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--primary-container);
}

.rules__close {
  display: none;
  position: absolute;
  top: var(--gutter);
  right: var(--gutter);
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--on-surface-variant);
  border: 1px solid var(--line-faint);
  transition: color 0.2s, border-color 0.2s;
}

.rules__close svg {
  width: 20px;
  height: 20px;
}

.rules__close:hover {
  color: var(--primary);
  border-color: var(--line);
}

.js .rules__close {
  display: flex;
}

/* tabindex="0" en el HTML: la zona scrollea y tiene que alcanzarse con teclado. */
.rules__body {
  padding: var(--stack-md);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.rules__body:focus-visible {
  outline-offset: -3px;
}

.rules__body h3 {
  margin-top: var(--stack-md);
  font-family: var(--font-headline);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--primary);
}

.rules__body > h3:first-child {
  margin-top: 0;
}

.rules__body p {
  margin-top: 12px;
  color: var(--on-surface-variant);
  line-height: 1.65;
}

.rules__body strong {
  color: var(--on-surface);
}

.rules__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: var(--gutter);
}

.rules__list li {
  display: flex;
  gap: 12px;
  color: var(--on-surface-variant);
  line-height: 1.6;
}

.rules__list li::before {
  content: "—";
  flex-shrink: 0;
  font-weight: 700;
  color: var(--secondary-container);
}

.rules__examples {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: var(--gutter);
  padding: 12px 0 12px var(--gutter);
  border-left: 2px solid var(--line);
}

.rules__examples li {
  color: rgb(var(--on-surface-variant-rgb) / 0.9);
  font-size: 15px;
  font-style: italic;
  line-height: 1.6;
}

.rules__examples li::before {
  content: "Ejemplo:";
  margin-right: 6px;
  font-style: normal;
  font-weight: 600;
  color: var(--secondary-container);
}

/* Marca los datos legales que sólo puede aportar el negocio. Deliberadamente
   llamativa: el sitio no debería publicarse con ninguna a la vista.
   Ver scripts/legal.py. */
.legal-todo {
  display: inline-block;
  padding: 3px 10px;
  margin-block: 2px;
  background-color: rgb(var(--primary-rgb) / 0.14);
  color: var(--primary);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-sm);
  font-family: var(--font-data);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
}

body.has-modal {
  overflow: hidden;
}

/* Pre-footer */
.prefooter {
  display: flex;
  flex-direction: column;
  gap: var(--stack-md);
  align-items: center;
  justify-content: space-between;
  text-align: center;
}

@media (min-width: 768px) {
  .prefooter {
    flex-direction: row;
    text-align: left;
  }
}

.prefooter h2 {
  font-size: clamp(28px, 4vw, 40px);
}

.prefooter p {
  color: rgb(var(--on-surface-rgb) / 0.7);
}

.section--low {
  background-color: var(--surface-container-low);
  border-top: 1px solid var(--outline-variant);
}

/* --------------------------------------------------------------------------
   13. Preguntas frecuentes
   -------------------------------------------------------------------------- */

.faq-search {
  position: relative;
  width: 100%;
  max-width: 640px;
}

.faq-search svg {
  position: absolute;
  top: 50%;
  left: 16px;
  width: 22px;
  height: 22px;
  transform: translateY(-50%);
  color: var(--primary);
  pointer-events: none;
}

.faq-search input {
  width: 100%;
  padding: 16px 16px 16px 48px;
  color: var(--on-surface);
  background-color: var(--surface-bright);
  border: 1px solid var(--line-strong);
  border-radius: 0;
  transition: border-color 0.2s;
}

.faq-search input::placeholder {
  color: rgb(var(--on-surface-variant-rgb) / 0.85); /* 0.5 en el mockup: no llegaba a 4.5:1 */
  opacity: 1;
}

.faq-search input:focus {
  outline: none;
  border-color: var(--primary);
}

.faq-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gutter);
  justify-content: center;
  padding-block: var(--stack-md);
}

.chip {
  padding: 8px 24px;
  font-family: var(--font-headline);
  font-size: 18px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--on-surface);
  border: 1px solid var(--line-strong);
  transition: background-color 0.2s, color 0.2s;
}

.chip:hover {
  background-color: rgb(var(--primary-rgb) / 0.1);
}

.chip[aria-pressed="true"] {
  color: var(--on-primary);
  background-color: var(--primary);
  border-color: var(--primary);
}

.faq-layout {
  display: flex;
  flex-direction: column;
  gap: var(--stack-lg);
  align-items: flex-start;
}

@media (min-width: 1024px) {
  .faq-layout {
    flex-direction: row;
  }

  .faq-layout__main {
    flex: 1;
    min-width: 0;
  }
}

.faq-layout__main {
  display: flex;
  flex-direction: column;
  gap: var(--stack-lg);
  width: 100%;
}

.faq-group {
  display: flex;
  flex-direction: column;
  gap: var(--gutter);
  scroll-margin-top: calc(var(--header-height) + 32px);
}

.faq-group__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding-bottom: var(--gutter);
  border-bottom: 1px solid var(--line);
}

.faq-group__head h2 {
  color: var(--primary);
  letter-spacing: 0.04em;
}

.faq-group__head span {
  font-family: var(--font-data);
  font-size: 16px;
  font-weight: 600;
  color: rgb(var(--on-surface-variant-rgb) / 0.66); /* 0.5 en el mockup: no llegaba a 4.5:1 */
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.faq-item {
  background-color: var(--surface-container);
}

.faq-item__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gutter);
  width: 100%;
  padding: var(--stack-md);
  text-align: left;
  font-weight: 600;
  transition: color 0.2s;
}

.faq-item__trigger:hover {
  color: var(--primary);
}

.faq-item__icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  color: var(--primary);
}

.faq-item__icon .minus {
  display: none;
}

.faq-item__trigger[aria-expanded="true"] .plus {
  display: none;
}

.faq-item__trigger[aria-expanded="true"] .minus {
  display: block;
}

.faq-item__panel {
  padding: 0 var(--stack-md) var(--stack-md);
  color: var(--on-surface-variant);
}

.faq-item__panel[hidden] {
  display: none;
}

.faq-item__panel p + p {
  margin-top: 12px;
}

.token {
  padding: 1px 5px;
  font-family: var(--font-data);
  font-size: 13px;
  font-weight: 500;
  color: var(--on-surface);
  background-color: var(--surface-variant);
}

.faq-item__panel .is-back {
  font-weight: 700;
  color: var(--market-back);
}

.faq-item__panel .is-lay {
  font-weight: 700;
  color: var(--market-lay);
}

.faq-empty {
  padding: var(--stack-lg);
  text-align: center;
  color: var(--on-surface-variant);
  background-color: var(--surface-container);
  border: 1px solid var(--line-faint);
}

.faq-empty[hidden] {
  display: none;
}

.faq-side {
  display: flex;
  flex-direction: column;
  gap: var(--stack-md);
  width: 100%;
  padding: var(--stack-md);
  background-color: var(--surface-bright);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

@media (min-width: 1024px) {
  .faq-side {
    position: sticky;
    top: calc(var(--header-height) + 32px);
    width: 360px;
    flex-shrink: 0;
    padding: var(--stack-md) var(--stack-md) var(--stack-lg);
  }
}

.faq-side h2 {
  color: var(--primary);
  letter-spacing: 0.04em;
}

.faq-side__links {
  display: flex;
  flex-direction: column;
  gap: var(--gutter);
}

.faq-side__links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gutter);
  font-weight: 600;
  transition: color 0.2s;
}

.faq-side__links a:hover {
  color: var(--primary);
}

.faq-side__links svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  transition: transform 0.2s;
}

.faq-side__links a:hover svg {
  transform: translateX(3px);
}

.faq-side__hours {
  padding-top: var(--stack-md);
  border-top: 1px solid var(--line);
}

.faq-side__hours dt {
  margin-bottom: 8px;
  font-family: var(--font-data);
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--on-surface-variant);
}

.faq-side__hours dd {
  margin: 0;
  font-family: var(--font-data);
  font-size: 16px;
  font-weight: 600;
  color: var(--on-surface);
}

.band {
  padding-block: var(--stack-xl);
  margin-top: var(--stack-lg);
  text-align: center;
  background-color: var(--surface-container);
  border-block: 1px solid var(--line);
}

.band h2 {
  margin-bottom: var(--stack-md);
  letter-spacing: 0.04em;
}

.band .btn-row {
  justify-content: center;
}

/* --------------------------------------------------------------------------
   14. Footer
   -------------------------------------------------------------------------- */

.site-footer {
  background-color: var(--surface-container-lowest);
  border-top: 1px solid var(--line);
  margin-top: var(--stack-xl);
}

.site-footer__inner {
  padding-block: var(--stack-lg) var(--stack-md);
}

/* Logo a la izquierda, menús a la derecha. */
.site-footer__top {
  display: flex;
  flex-direction: column;
  gap: var(--stack-lg);
  margin-bottom: var(--stack-xl);
}

@media (min-width: 768px) {
  .site-footer__top {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--stack-xl);
  }
}

.site-footer__brand {
  display: inline-flex;
  flex-shrink: 0;
  justify-content: center;
}

.site-footer__brand img {
  width: auto;
  height: 125px;
  max-width: 100%;
  object-fit: contain;
}

.site-footer__columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--stack-md) var(--gutter);
}

@media (min-width: 768px) {
  .site-footer__columns {
    grid-template-columns: repeat(2, minmax(0, 200px));
    gap: var(--stack-lg);
  }
}

.site-footer__columns h2 {
  margin-bottom: var(--gutter);
  color: var(--primary);
}

.site-footer__columns ul {
  display: flex;
  flex-direction: column;
  gap: var(--unit);
}

.site-footer__columns a {
  font-size: 14px;
  color: var(--on-surface-variant);
  transition: color 0.2s;
}

.site-footer__columns a:hover {
  color: var(--secondary-container);
}

.site-footer__base {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gutter);
  padding-top: var(--stack-md);
  border-top: 1px solid rgb(var(--outline-variant-rgb) / 0.3);
}

@media (min-width: 768px) {
  .site-footer__base {
    flex-direction: row;
    align-items: center;
  }
}

/* El wordmark de texto que había acá se quitó: el logo del footer ya lleva la
   marca y repetirla debajo era redundante. Queda sólo el 18+. */
.age-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--primary);
  border: 1px solid var(--primary);
  border-radius: 50%;
}

.site-footer__legal {
  max-width: 72ch;
  font-size: 14px;
  line-height: 1.4;
  color: var(--on-surface-variant);
  text-align: center;
}

@media (min-width: 768px) {
  .site-footer__legal {
    text-align: left;
  }
}

/* --------------------------------------------------------------------------
   15. Preferencias del usuario
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}