/* ════════════════════════════════════════════════
   NEXT PLAY — base.css
   Tokens, reset, tipografía editorial, nav, footer,
   botones, ticker, reveal.
   ✏️ Colores: edita :root
   ════════════════════════════════════════════════ */

:root {
  --carbon:   #0b0b0c;   /* negro carbón */
  --carbon-2: #111113;
  --paper:    #f2efe9;   /* blanco roto */
  --paper-2:  #e9e5dc;
  --ink:      #101012;   /* texto sobre claro */
  --white:    #f6f4ef;
  --grey:     #8b8b90;
  --grey-d:   #55555c;
  --lime:     #c6f13f;
  --lime-d:   #a7d61e;
  --red:      #d33a48;   /* acento editorial, solo en detalles */
  --hair-d:   rgba(255,255,255,.12);
  --hair-l:   rgba(16,16,18,.15);

  --f-head: 'Anton', sans-serif;
  --f-body: 'Inter', sans-serif;

  --wrap: 1240px;
  /* Alto que ocupan los botones flotantes (WhatsApp y Asistente) en la
     esquina inferior. Cualquier contenido que termine abajo debe dejar
     este hueco, o quedará tapado. */
  --zona-flotantes: 92px;
  --gut: clamp(20px, 4.5vw, 56px);
  --ease: cubic-bezier(.19,.8,.26,1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body {
  background: var(--carbon); color: var(--white);
  font-family: var(--f-body); line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* `clip` y no `hidden`: con `overflow-x: hidden` el body se convierte en
     un contenedor de scroll propio, y eso descoloca el scroll programático,
     el anclaje de ScrollTrigger y los elementos `position: fixed`. `clip`
     recorta igual el desbordamiento lateral sin crear ese contenedor. */
  overflow-x: clip;
  /* Red de seguridad para textos corridos: una URL o un email muy largo
     no debe romper la maquetación. Solo actúa cuando una palabra no cabe
     de ninguna manera en su línea. */
  overflow-wrap: break-word;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
[hidden] { display: none !important; }
::selection { background: var(--lime); color: var(--carbon); }
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--carbon); }
::-webkit-scrollbar-thumb { background: #2a2a30; border-radius: 4px; }

h1, h2, h3 { font-family: var(--f-head); font-weight: 800; line-height: .98; letter-spacing: -.02em; }

/* ── La tipografía grande NUNCA se parte por la mitad ──
   En texto corrido, cortar una palabra larga es preferible a romper la
   maquetación. En un titular o en la portada de un mockup es justo al
   revés: leer "Tu empres / a" hace que la web parezca rota.

   Estas reglas solo prohíben el corte. Que la palabra QUEPA es
   responsabilidad del tamaño de letra de cada pieza (ver sections.css:
   `.m-line.accent` y `.sv-dossier b` calculan su
   cuerpo para que la palabra más larga entre siempre). Si añades un
   texto nuevo aquí, compruébalo con la palabra más larga que pueda
   tener, no con la que tiene hoy. */
h1, h2, h3, .mega-l, .m-line, .jr-c h2, .sv-dossier b,
.play-head h2, .local-copy h2, .hbc-list {
  overflow-wrap: normal;
  word-break: keep-all;
  hyphens: none;
}
h2 { font-size: clamp(34px, 5.2vw, 72px); }
h2 em, h1 em { font-style: normal; color: var(--lime); }

.wrap { max-width: var(--wrap); margin: 0 auto; padding-left: var(--gut); padding-right: var(--gut); }
.kicker {
  font-size: 12px; font-weight: 600; letter-spacing: .28em; text-transform: uppercase;
  color: var(--grey); margin-bottom: 22px; display: flex; align-items: center; gap: 14px;
}
.kicker::before { content: ''; width: 34px; height: 1px; background: currentColor; }
.kicker.lime { color: var(--lime); }

/* ── Botones ── */
.btn-solid {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--white); color: var(--carbon);
  font-weight: 600; font-size: 15px; padding: 16px 32px; border-radius: 999px;
  transition: transform .3s var(--ease), background .3s;
}
.btn-solid:hover { transform: translateY(-2px) scale(1.02); background: var(--lime); }
.btn-solid.lime { background: var(--lime); }
.btn-solid.lime:hover { background: var(--white); }
.btn-solid.full { width: 100%; justify-content: center; }
.btn-line {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 600; font-size: 15px; padding: 10px 2px;
  border-bottom: 1px solid currentColor;
  transition: gap .3s var(--ease), color .2s;
}
.btn-line:hover { gap: 18px; color: var(--lime); }
.btn-line.sm { font-size: 13.5px; }
.btn-line i { font-style: normal; }

/* ── Reveal (solo con JS activo) ── */
.js .reveal { opacity: 0; transform: translateY(34px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }
.js .reveal.d1 { transition-delay: .08s; }
.js .reveal.d2 { transition-delay: .16s; }
.js .reveal.d3 { transition-delay: .24s; }
.js .reveal.d4 { transition-delay: .34s; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  * { animation-duration: .01s !important; }
}

/* ── Nav ── */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 300;
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px var(--gut);
  transition: background .35s, padding .35s, box-shadow .35s;
}
.nav.scrolled { background: rgba(11,11,12,.85); backdrop-filter: blur(14px); padding: 13px var(--gut); box-shadow: 0 1px 0 var(--hair-d); }

/* Arriba del todo la nav flota sobre el hero de papel: tinta oscura.
   Al hacer scroll vuelve al modo oscuro de siempre (regla de arriba). */
.nav:not(.scrolled) .logo { color: var(--ink); }
.nav:not(.scrolled) .logo span { color: var(--red); }
.nav:not(.scrolled) .nav-links a { color: #6b665e; }
.nav:not(.scrolled) .nav-links a:hover { color: var(--ink); }
.nav:not(.scrolled) .nav-links .nav-contact { color: var(--ink); border-bottom-color: var(--red); }
.nav:not(.scrolled) .nav-links .nav-contact:hover { color: var(--red); }
.nav:not(.scrolled) .burger span { background: var(--ink); }
.logo { font-family: var(--f-head); font-weight: 800; font-size: 18px; letter-spacing: .02em; display: inline-flex; align-items: center; gap: 9px; }
.logo span { color: var(--lime); font-size: 11px; vertical-align: super; }
.logo-ico { width: 24px; height: 24px; border-radius: 7px; }
.nav-links { display: flex; gap: 34px; align-items: center; }
.nav-links a { font-size: 14px; font-weight: 500; color: var(--grey); transition: color .2s; }
.nav-links a:hover { color: var(--white); }
.nav-links .nav-contact { color: var(--white); border-bottom: 1px solid var(--lime); padding-bottom: 3px; }
.nav-links .nav-contact:hover { color: var(--lime); }
.burger { display: none; flex-direction: column; gap: 6px; padding: 8px; }
.burger span { width: 26px; height: 2px; background: var(--white); transition: transform .3s var(--ease); }
.burger.open span:first-child { transform: translateY(4px) rotate(45deg); }
.burger.open span:last-child { transform: translateY(-4px) rotate(-45deg); }
.mobile-menu {
  position: fixed; inset: 0; z-index: 290; background: var(--carbon);
  display: none; flex-direction: column; justify-content: center; gap: 8px;
  padding: 0 var(--gut);
}
.mobile-menu.open { display: flex; }
.mobile-menu a {
  font-family: var(--f-head); font-weight: 800; font-size: clamp(34px, 9vw, 56px);
  padding: 10px 0; border-bottom: 1px solid var(--hair-d); color: var(--white);
}
.mobile-menu a:last-child { color: var(--lime); }

/* ── Ticker ── */
.ticker { overflow: hidden; border-top: 1px solid var(--hair-d); padding: 16px 0; }
.ticker-track {
  display: flex; gap: 34px; align-items: center; width: max-content;
  animation: tick 30s linear infinite;
  font-family: var(--f-head); font-weight: 700; font-size: 14px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--grey); white-space: nowrap;
}
.ticker-track i { color: var(--lime); font-style: normal; font-size: 9px; }
.ticker-track.big { font-size: clamp(48px, 7vw, 100px); color: rgba(246,244,239,.05); gap: 60px; animation-duration: 46s; }
.ticker-track.big i { color: rgba(198,241,63,.12); font-size: .5em; }
@keyframes tick { to { transform: translateX(-50%); } }

/* ── Trust strip — logos reales en movimiento ── */
/* Sigue al hero de papel: mismo fondo crema para que no haya corte */
.trust-strip {
  background: var(--paper); border-top: 1px solid rgba(16,16,18,.14);
  border-bottom: 1px solid rgba(16,16,18,.14);
  padding: 26px 0; overflow: hidden; position: relative;
}
.trust-strip::before, .trust-strip::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 90px; z-index: 2; pointer-events: none;
}
.trust-strip::before { left: 0; background: linear-gradient(90deg, var(--paper), transparent); }
.trust-strip::after { right: 0; background: linear-gradient(-90deg, var(--paper), transparent); }
.trust-track {
  display: flex; align-items: center; gap: clamp(48px, 6vw, 88px); width: max-content;
  animation: tick 32s linear infinite;
}
.trust-item { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
/* Sobre papel: los escudos se leen en gris oscuro y recuperan color al pasar */
.trust-item img {
  height: 46px; width: auto; display: block;
  filter: grayscale(1) contrast(1.05) brightness(.55); opacity: .5;
  transition: filter .4s var(--ease), opacity .4s var(--ease);
}
.trust-item:hover img { filter: none; opacity: 1; }
.trust-item span { font-size: 13px; font-weight: 600; color: #6b665e; white-space: nowrap; }
/* Logotipo real del torneo, en su archivo propio (1000×280).
   Antes se recortaba por CSS una zona de 151×25 px del cartel original:
   se veía blando al ampliarlo y cualquier ajuste descuadraba el encuadre. */
.torneo-logo {
  display: block; width: 148px; height: 41px; flex-shrink: 0;
  background: url('../img/torneo-logo.png') center / contain no-repeat;
  border-radius: 3px;
  opacity: .9; transition: opacity .4s var(--ease);
}
.trust-item.trust-wide:hover .torneo-logo { opacity: 1; }

/* ── Footer ── */
.footer { background: #070708; border-top: 1px solid var(--hair-d); padding: 64px 0 0; }
.foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1.2fr; gap: 40px; padding-bottom: 48px; }
.foot-grid > div { min-width: 0; }
.foot-grid p { color: var(--grey); font-size: 14px; margin-top: 14px; line-height: 1.7; }
.foot-grid a { display: block; color: var(--grey); font-size: 14px; padding: 5px 0; transition: color .2s; width: fit-content; }
.foot-grid a:hover { color: var(--white); }
.foot-grid a.logo { color: var(--white); font-size: 18px; }
.foot-legal {
  border-top: 1px solid var(--hair-d); padding-top: 22px; padding-bottom: 26px;
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--grey-d);
}
.foot-links a { color: var(--grey); text-decoration: underline; text-underline-offset: 2px; }
.foot-links a:hover { color: var(--lime); }

/* ── WhatsApp float ── */
.wa-float {
  position: fixed; bottom: 22px; left: 22px; z-index: 250;
  width: 54px; height: 54px; border-radius: 50%;
  background: #22c15e; color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 30px rgba(34,193,94,.35);
  transition: transform .25s var(--ease);
}
.wa-float:hover { transform: scale(1.1); }

/* ── Responsive base ── */
@media (max-width: 860px) {
  .nav-links { display: none; }
  .burger { display: flex; }
  .foot-grid { grid-template-columns: 1fr; gap: 28px; padding-bottom: 96px; }
}