/* ============================================================
   BASE — variables, reset, tipografía
   PALETA DE MARCA: blanco y negro, con amarillo de apoyo.
   ============================================================ */

:root {
  /* ---------- PALETA DEFINITIVA ----------
     PRINCIPALES: blanco y negro.
     SECUNDARIO:  amarillo, solo para lo que hay que destacar.
     No hay ningún otro color en la web.                        */

  --black: #0a0a0a;
  --white: #f6f6f4;
  --gray: #9a9a96;      /* texto secundario */
  --line: #2a2a2a;      /* bordes y separadores */

  /* Superficies: tarjetas, paneles y fondos intermedios.
     Son negros a distintos niveles, sin ningún tinte de color. */
  --surface: #0d0d0d;
  --surface-hover: #151515;
  --surface-2: #141414;
  --surface-deep: #111111;

  /* Blanco a media intensidad: bordes de estados, etiquetas de
     género y filos. Es lo que hace de "segundo color". */
  --white-line: rgba(246, 246, 244, .30);

  /* AMARILLO = conversión y señales puntuales: comprar,
     reservar, enviar y foco accesible. Nunca es color de superficie. */
  --accent: #ffd400;
  --accent-ink: #0a0a0a;              /* texto que va ENCIMA del amarillo */
  --accent-dim: rgba(255, 212, 0, .14);
  --accent-line: rgba(255, 212, 0, .40);

  --font-display: "Anton", "Arial Narrow", Impact, sans-serif;
  --font-body: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --max-w: 1400px;
  --pad: clamp(16px, 4vw, 48px);
  --header-h: 72px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
  overflow-x: hidden;
  overflow-x: clip;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  background: var(--black);
  color: var(--white);
  font-family: var(--font-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-x: clip;
}

img, video { max-width: 100%; display: block; }

a { color: inherit; }

button { font-family: inherit; cursor: pointer; }

/* Tipografía display gigante */
h1, h2, .display {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  line-height: .92;
  letter-spacing: .01em;
}

/* Accesibilidad: enlace para saltar al contenido */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 500;
  background: var(--accent);
  color: var(--accent-ink);
  padding: 12px 20px;
  font-weight: 700;
  text-decoration: none;
}
.skip-link:focus { left: 0; }

/* Foco visible */
a:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

/* Utilidades */
.wrap { max-width: var(--max-w); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }

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

/* Iconos en línea (js/icons.js) */
.icon {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  display: block;
}

/* ---------- BLOQUE MONOCROMO INVERTIDO ----------
   Secciones completas en blanco para crear contraste sin convertir
   el amarillo de marca en una superficie decorativa. */
.section-accent {
  background: var(--white);
  color: var(--black);
}
.section-accent .section-title {
  color: var(--black);
  -webkit-text-stroke: 0;
}
.section-accent .section-kicker,
.section-accent .section-intro { color: rgba(10, 10, 10, .72); }
.section-accent a:focus-visible,
.section-accent button:focus-visible { outline-color: var(--black); }