/* ---------------------------------------------------------------------------
   Landing de Energía en Ruta (módulo G). Diseño de la agencia:
   ARTES JUEGO MASTERLUB.pdf, págs. 38–40 (escritorio 1440, laptop 1024,
   celular 390). Colores y fuentes tomados del juego (game/src/style.css).
   Móvil primero; a partir de 700 px se abre a la versión de escritorio.
   Sin estilos en línea en el HTML (la política de seguridad los prohíbe);
   GSAP y los pines usan el CSSOM, que sí está permitido.
--------------------------------------------------------------------------- */

@font-face { font-family: "TerpelSans"; font-weight: 400; src: url(../art/fuentes/TerpelSans-Regular.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "TerpelSans"; font-weight: 500; src: url(../art/fuentes/TerpelSans-Medium.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "TerpelSans"; font-weight: 700; src: url(../art/fuentes/TerpelSans-Bold.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "TerpelSans"; font-weight: 900; src: url(../art/fuentes/TerpelSans-Black.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "TerpelSans Condensed"; font-weight: 900; src: url(../art/fuentes/TerpelSans-Black-Condensed.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "TerpelSans Display"; font-weight: 400; src: url(../art/fuentes/TerpelSans-Display.woff2) format("woff2"); font-display: swap; }

:root {
  --rojo: #E62A10;
  --rojo-oscuro: #C31F0A;
  --amarillo: #FFE500;
  --naranja: #FF8A00;
  --gris: #6B6B6B;
  --linea: #EDEDED;
  --fondo: #FFFFFF;
  --tinta: #1B1B1B;
  --texto: "TerpelSans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  /* Como en el diseño de la agencia: Display (redondeada) para Ranking, Ganadores, tablas y menú;
     Black Condensed para ASÍ DE FÁCIL PARTICIPAS y PARTICIPANTES; Black para las mayúsculas de los pasos. */
  --display: "TerpelSans Display", "TerpelSans", Arial, sans-serif;
  --condensada: "TerpelSans Condensed", "TerpelSans", "Arial Narrow", Arial, sans-serif;
  --titulo: "TerpelSans", "Arial Black", Arial, sans-serif;
  --ancho: 1100px;
  --nav-alto: 60px;
  --sombra: 0 8px 24px rgba(0, 0, 0, 0.14);
  --radio: 16px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fondo); color: var(--tinta); font-family: var(--texto); font-size: 16px; line-height: 1.4; }
body.sin-scroll { overflow: hidden; }
img { max-width: 100%; height: auto; }
a { color: var(--rojo); }
button { font-family: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--amarillo); outline-offset: 3px; }

.contenedor { max-width: var(--ancho); margin: 0 auto; padding: 0 16px; }
.seccion { padding: 44px 0; scroll-margin-top: calc(var(--nav-alto) + 8px); }
.seccion--sin-arriba { padding-top: 8px; }
.seccion--roja { background: var(--rojo); color: #fff; }
.reveal { will-change: opacity, transform; }

.titulo {
  margin: 0 0 8px; text-align: center; color: var(--rojo);
  font-family: var(--display); font-weight: 400; font-size: clamp(28px, 5.2vw, 42px); line-height: 1.05;
}
.titulo--condensada { font-family: var(--condensada); font-weight: 900; font-size: clamp(30px, 5.6vw, 46px); letter-spacing: 0.005em; }
.titulo--blanco { color: #fff; }
.titulo__sub { display: block; font-size: 0.72em; margin-top: 2px; }
.subtitulo { margin: 0 0 20px; text-align: center; color: var(--gris); font-size: 15px; }
.subtitulo--blanco { color: rgba(255, 255, 255, 0.9); }

/* --- Barra y menú ------------------------------------------------------ */
.nav {
  position: sticky; top: 0; z-index: 40; background: var(--rojo);
  padding-top: env(safe-area-inset-top, 0px);
  transition: box-shadow 0.25s, background-color 0.25s;
}
.nav.is-scroll { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18); }
.nav__fila { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: var(--nav-alto); }
.nav__logo { display: inline-flex; line-height: 0; flex: 0 0 auto; }
.nav__logo img { height: 34px; width: auto; max-width: none; }
.nav__logo-rojo { display: none; }
.nav__links { display: none; }

.hamburguesa {
  width: 44px; height: 44px; margin-right: -8px; border: 0; background: transparent; border-radius: 12px;
  display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; cursor: pointer;
}
.hamburguesa span { display: block; width: 24px; height: 3px; border-radius: 3px; background: #fff; transition: transform 0.3s, opacity 0.2s; }
.hamburguesa.is-abierto span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.hamburguesa.is-abierto span:nth-child(2) { opacity: 0; transform: scaleX(0.2); }
.hamburguesa.is-abierto span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.menu-fondo { position: fixed; inset: 0; z-index: 45; background: rgba(0, 0, 0, 0.45); }
.menu {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 50; width: min(82vw, 340px);
  background: var(--rojo); color: #fff; padding: calc(env(safe-area-inset-top, 0px) + 72px) 28px 28px;
  display: flex; flex-direction: column; gap: 6px; box-shadow: -8px 0 30px rgba(0, 0, 0, 0.3);
}
.menu a { color: #fff; text-decoration: none; font-family: var(--display); font-weight: 400; font-size: 24px; padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.18); }
.menu a:active { opacity: 0.7; }

@media (min-width: 700px) {
  .nav { background: #fff; }
  .nav.is-scroll { box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12); }
  .nav__logo-rojo { display: inline; }
  .nav__logo-blanco { display: none; }
  .nav__links { display: flex; gap: 6px; }
  .nav__links a { color: var(--rojo); text-decoration: none; font-family: var(--display); font-weight: 400; font-size: 17px; padding: 8px 12px; border-radius: 10px; position: relative; transition: background-color 0.2s; }
  .nav__links a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 5px; height: 2px; background: var(--rojo); transform: scaleX(0); transform-origin: left; transition: transform 0.25s; }
  .nav__links a:hover::after, .nav__links a:focus-visible::after { transform: scaleX(1); }
  .hamburguesa, .menu, .menu-fondo { display: none !important; }
}

/* --- Cabezote ---------------------------------------------------------- */
.hero { position: relative; background: var(--rojo); text-align: center; max-width: 1920px; margin: 0 auto; }
.hero picture, .hero img { display: block; width: 100%; }
.hero img { aspect-ratio: 390 / 640; object-fit: cover; }
.btn-ver {
  display: inline-block; margin: -26px auto 0; position: relative; z-index: 2;
  padding: 13px 36px; border-radius: 999px; text-decoration: none;
  background: linear-gradient(180deg, #FFB000, var(--naranja)); color: #fff;
  font-family: var(--condensada); font-weight: 900; font-size: 22px; letter-spacing: 0.02em;
  box-shadow: 0 6px 0 #C86A00, 0 12px 22px rgba(0, 0, 0, 0.28); text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
  transition: box-shadow 0.15s, transform 0.15s;
}
.btn-ver:hover { filter: brightness(1.05); }
.btn-ver:active { transform: translateY(4px) !important; box-shadow: 0 2px 0 #C86A00, 0 6px 12px rgba(0, 0, 0, 0.25); }
.hero::after { content: ""; display: block; height: 24px; }

@media (min-width: 640px) {
  .hero { background: #fff; }
  .hero img { aspect-ratio: 1024 / 520; }
  .btn-ver { position: absolute; left: 4%; bottom: 9%; margin: 0; }
  .hero::after { display: none; }
}
@media (min-width: 1100px) {
  .hero img { aspect-ratio: 1440 / 680; }
}

/* --- Pasos ------------------------------------------------------------- */
.pasos { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 28px; }
.paso { text-align: center; }
.paso img { width: 100px; height: 100px; display: inline-block; filter: drop-shadow(0 6px 10px rgba(230, 42, 16, 0.25)); }
.paso p { margin: 10px auto 0; max-width: 260px; font-size: 15px; line-height: 1.35; }
.paso strong { display: block; font-weight: 900; color: var(--tinta); }
@media (min-width: 700px) {
  .pasos { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .paso img { width: 124px; height: 124px; }
}

/* --- Mapa y pines ------------------------------------------------------ */
.mapa { position: relative; margin: 0 auto; max-width: 640px; border-radius: 22px; overflow: hidden; box-shadow: var(--sombra); background: #8fc36a; }
.mapa img { display: block; width: 100%; }
.mapa__pines { position: absolute; inset: 0; }
.pin {
  position: absolute; transform: translate(-50%, -50%);
  width: 18%; height: 6%; border-radius: 999px; border: 0; padding: 0;
  background: transparent; cursor: pointer; color: transparent; font-size: 0;
  transition: box-shadow 0.15s;
}
.pin::before {
  content: ""; position: absolute; inset: -4px; border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.85); opacity: 0;
  animation: pin-late 2.6s ease-out infinite;
}
.pin:nth-child(2n)::before { animation-delay: 0.8s; }
.pin:nth-child(3n)::before { animation-delay: 1.5s; }
@keyframes pin-late { 0% { transform: scale(0.9); opacity: 0.9; } 70% { transform: scale(1.25); opacity: 0; } 100% { opacity: 0; } }
.pin:hover, .pin:focus-visible { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.9), 0 0 0 6px var(--rojo); outline: none; }
.pin.is-activa { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--amarillo), 0 0 20px 8px rgba(255, 229, 0, 0.75); }
.pin.is-activa::before { animation: none; }

/* Las once ciudades y los puntos de la ciudad elegida.
   El ancho se limita al del mapa que acompañan: en un monitor ancho, sin ese
   tope, las once entraban casi todas en una sola fila y Sabanalarga quedaba
   sola en la de abajo, como si sobrara (20 sep, Camilo). Con el tope se
   reparten en filas parejas y además quedan alineadas con el mapa. */
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 18px; max-width: 640px; margin-inline: auto; }
.chip {
  border: 2px solid var(--rojo); background: #fff; color: var(--rojo); border-radius: 999px;
  min-height: 40px; padding: 8px 16px; font-family: var(--display); font-weight: 400; font-size: 15px; cursor: pointer; line-height: 1.1;
  transition: transform 0.12s;
}
.chip:hover { background: rgba(230, 42, 16, 0.08); }
.chip:active { transform: scale(0.96); }
.chip.is-activa { background: var(--rojo); color: #fff; }
.chips--puntos .chip { text-transform: capitalize; }

.puntos { margin-top: 24px; }
.puntos__titulo { margin: 0; text-align: center; font-family: var(--display); font-size: 19px; font-weight: 400; color: var(--tinta); }
.puntos__titulo span { color: var(--rojo); text-transform: capitalize; }

/* --- Tablas ------------------------------------------------------------ */
.tabla-caja { background: #fff; border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra); }
.tabla-caja--borde { box-shadow: none; border: 2px solid var(--rojo); }
.tabla { width: 100%; border-collapse: collapse; color: var(--tinta); }
.tabla th { text-align: left; padding: 12px 14px; color: var(--rojo); font-family: var(--display); font-weight: 400; font-size: 17px; border-bottom: 2px solid var(--rojo); }
.tabla td { padding: 12px 14px; border-bottom: 1px solid var(--linea); font-size: 15px; vertical-align: middle; }
.tabla tr:last-child td { border-bottom: 0; }
.tabla .col-pos { width: 90px; }
.tabla .col-num, .tabla td.num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 900; }
.tabla td.pos { font-weight: 900; color: var(--rojo); }
.tabla tr.top td { background: #FFF7D6; }
.tabla tr.vacia td { text-align: center; color: var(--gris); padding: 28px 14px; }
.tabla small { display: block; color: var(--gris); font-size: 12px; font-weight: 400; text-transform: capitalize; }
.tabla .cat { margin-left: 8px; color: var(--rojo); vertical-align: -2px; }
.nota { margin: 12px 0 0; text-align: center; color: var(--gris); font-size: 13px; min-height: 1em; }
.nota--blanca { color: rgba(255, 255, 255, 0.9); }

/* Campo de búsqueda del ranking (sobre rojo) y resaltado de coincidencias. */
.buscar { display: flex; justify-content: center; margin: 0 0 14px; }
.buscar input {
  width: 100%; max-width: 420px; min-height: 44px; padding: 9px 16px; border: 2px solid #fff; border-radius: 999px;
  background: #fff; font-family: var(--texto); font-size: 15px; color: var(--tinta);
}
.buscar input::placeholder { color: #9a9a9a; }
.buscar--rojo input:focus-visible { outline-color: var(--amarillo); }
mark { background: var(--amarillo); color: var(--tinta); padding: 0 2px; border-radius: 3px; }

/* Esqueleto mientras carga: la tabla ya tiene su forma, nada "salta". */
.tabla tr.esqueleto td { padding: 14px; }
.tabla tr.esqueleto td > span {
  display: block; height: 14px; border-radius: 7px;
  background: linear-gradient(90deg, #eee 25%, #f7f7f7 50%, #eee 75%); background-size: 200% 100%;
  animation: brillo 1.2s linear infinite;
}
.tabla tr.esqueleto td.num > span { margin-left: auto; width: 46px; }
.tabla tr.esqueleto td.pos > span { width: 22px; }
@keyframes brillo { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* En celular, la tabla de ganadores se vuelve tarjetas. */
@media (max-width: 599px) {
  .tabla--tarjetas thead { display: none; }
  .tabla--tarjetas tr { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 12px 14px; border-bottom: 1px solid var(--linea); }
  .tabla--tarjetas tr:last-child { border-bottom: 0; }
  .tabla--tarjetas td { display: block; padding: 0; border: 0; }
  .tabla--tarjetas td:nth-child(1) { grid-column: 1; font-weight: 900; color: var(--rojo); }
  .tabla--tarjetas td:nth-child(2) { grid-column: 1; }
  .tabla--tarjetas td:nth-child(3) { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 20px; }
  .tabla--tarjetas tr.vacia, .tabla--tarjetas tr.esqueleto { display: table-row; }
  .tabla--tarjetas tr.vacia td, .tabla--tarjetas tr.esqueleto td { display: table-cell; padding: 14px; }
}

/* Íconos de carro y moto de la agencia como máscara: toman el color del texto (blanco en rojo, rojo en blanco). */
.ico { display: inline-block; width: 30px; height: 15px; background: currentColor; vertical-align: middle; -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat; }
.ico--carro { -webkit-mask-image: url(../art/icono-carro.png); mask-image: url(../art/icono-carro.png); }
.ico--moto { -webkit-mask-image: url(../art/icono-moto.png); mask-image: url(../art/icono-moto.png); width: 26px; height: 17px; }
.tab .ico { margin-right: 8px; }
.tabla .ico { width: 24px; height: 12px; }
.tabla .ico--moto { width: 20px; height: 13px; }

.tabs { display: flex; justify-content: center; gap: 8px; margin-bottom: 14px; }
.tab { display: inline-flex; align-items: center; border: 2px solid #fff; background: transparent; color: #fff; border-radius: 999px; min-height: 40px; padding: 7px 22px; font-family: var(--display); font-weight: 400; font-size: 17px; cursor: pointer; }
.tab.is-activa { background: #fff; color: var(--rojo); }

/* --- Selector de semana ------------------------------------------------- */
.selector { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; margin: 6px 0 18px; }
.selector label { font-family: var(--display); font-weight: 400; color: var(--rojo); font-size: 18px; }
.selector select {
  min-width: 230px; min-height: 42px; padding: 8px 12px; border: 2px solid var(--rojo); border-radius: 10px; background: #fff;
  font-family: var(--texto); font-size: 15px; color: var(--tinta);
}
.selector input {
  min-width: 210px; min-height: 42px; padding: 8px 12px; border: 2px solid var(--rojo); border-radius: 10px; background: #fff;
  font-family: var(--texto); font-size: 15px; color: var(--tinta);
}
.selector input::placeholder { color: #9a9a9a; }
@media (max-width: 599px) { .selector select, .selector input { flex: 1 1 100%; min-width: 0; } }

.btn { border: 0; border-radius: 10px; min-height: 42px; padding: 10px 22px; background: var(--rojo); color: #fff; font-family: var(--display); font-weight: 400; font-size: 17px; cursor: pointer; transition: transform 0.12s; }
.btn:hover { background: var(--rojo-oscuro); }
.btn:active { transform: scale(0.97); }

/* --- Pie ---------------------------------------------------------------- */
.pie { background: var(--rojo); color: #fff; padding: 36px 0 calc(28px + env(safe-area-inset-bottom, 0px)); text-align: center; }
.pie__titulo { margin: 0 0 22px; font-family: var(--display); font-weight: 400; font-size: 28px; }
.pie__titulo a { color: #fff; text-decoration: none; }
.pie__titulo a:hover { text-decoration: underline; }
/* Tres logos en UNA fila con una rayita entre cada uno, como en el diseño (celular y escritorio). */
.pie__logos { display: flex; justify-content: center; align-items: center; flex-wrap: nowrap; }
.pie__logo { display: inline-flex; align-items: center; padding: 0 12px; flex: 0 0 auto; }
.pie__logo + .pie__logo { border-left: 1px solid rgba(255, 255, 255, 0.75); }
.pie__logo img { width: auto; height: 22px; max-width: none; }
.pie__logo img[alt="Mobil"] { height: 18px; }
@media (min-width: 700px) {
  .pie__logo { padding: 0 26px; }
  .pie__logo img { height: 30px; }
  .pie__logo img[alt="Mobil"] { height: 24px; }
}

/* --- Botón arriba y aviso ------------------------------------------------ */
.arriba {
  display: inline-flex; align-items: center; justify-content: center;
  position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 30;
  width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--rojo); color: #fff;
  font-size: 22px; font-weight: 900; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28); cursor: pointer; opacity: 0;
}
.aviso {
  position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 35;
  max-width: calc(100% - 32px); padding: 10px 16px; border-radius: 10px;
  background: var(--tinta); color: #fff; font-size: 14px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
}

/* --- Términos ------------------------------------------------------------ */
.legal { max-width: 820px; padding-top: 24px; padding-bottom: 48px; }
.legal h1 { color: var(--rojo); font-family: var(--display); font-weight: 400; font-size: clamp(26px, 5vw, 36px); margin: 0 0 6px; }
.legal h2 { color: var(--rojo); font-family: var(--display); font-weight: 400; font-size: 21px; margin: 26px 0 6px; }
.legal p, .legal li { font-size: 15px; line-height: 1.5; }
.legal .pendiente { border: 2px dashed var(--naranja); background: #FFF7E0; padding: 12px 14px; border-radius: 10px; margin: 16px 0; }
.legal .pendiente strong { color: #9A5A00; }

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

  /* EXCEPCIÓN a propósito: el latido de los pines sigue andando.
     Es lo único que dice que las ciudades del mapa se pueden tocar, y sin él
     el mapa parece un dibujo cualquiera: pasó en un Windows con los efectos
     visuales reducidos, donde el mapa se veía muerto mientras en el celular
     latía (20 sep, decisión de Camilo). Se deja el latido, no el resto: es un
     anillo pequeño y lento, sin desplazamiento ni parpadeo. */
  .pin::before { animation: pin-late 2.6s ease-out infinite !important; }
}