/* Teisters.pe · votación del turrón. Mismo sistema que la web de guías (src/app/globals.css y
   DESIGN.md): fuego sobre carbón, tipografía «Cartel». Si cambia allí, se cambia aquí. */
:root {
  color-scheme: dark;
  --superficie: #1f1e22;
  --superficie-hundida: #141316;
  --superficie-alzada: #2a292e;
  --tinta: #f3efec;
  --tinta-2: #b9b7c0;
  --linea: #403e45;
  --acento: #ff7c0e;
  --degradado: linear-gradient(90deg, #ff7c0e, #f6560a 50%, #d94122);
  --degradado-boton: linear-gradient(90deg, #ff7c0e, #f6560a);
  --sobre-degradado: #0f0f0f;

  --cartel: "Anton", "Impact", "Haettenschweiler", "Arial Narrow", sans-serif;
  --titulos: "Barlow Condensed", "Arial Narrow", sans-serif;
  --texto: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;

  --t-xs: 0.8125rem;
  --t-s: 0.9375rem;
  --t-m: 1.0625rem;
  --t-l: clamp(1.25rem, 1.05rem + 0.9vw, 1.5rem);
  --t-xl: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem);
  --t-xxl: clamp(2.5rem, 1.3rem + 5vw, 4.75rem);

  --e-1: 0.5rem;
  --e-2: 1rem;
  --e-3: 1.5rem;
  --e-4: 2.5rem;
  --e-5: 4rem;
  --e-6: clamp(5rem, 3rem + 8vw, 10rem);
  --margen: clamp(1.25rem, 0.5rem + 3.6vw, 4rem);
  --ancho: 78rem;
  --borde-pagina: max(var(--margen), calc((100% - var(--ancho)) / 2 + var(--margen)));

  --z-fija: 10;
  --z-menu: 20;
  --z-salto: 30;
  --salida: cubic-bezier(0.16, 1, 0.3, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--superficie); scroll-behavior: smooth; }
body { margin: 0; background: var(--superficie); color: var(--tinta); font-family: var(--texto); font-size: var(--t-m); line-height: 1.6; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { margin: 0; font-family: var(--cartel); font-weight: 400; text-transform: uppercase; line-height: 1.04; letter-spacing: 0.005em; text-wrap: balance; }
h1 { font-size: var(--t-xxl); }
h2 { font-size: var(--t-xl); }
h3 { font-family: var(--titulos); font-size: var(--t-l); font-weight: 700; line-height: 1.15; letter-spacing: 0.06em; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; text-underline-offset: 0.22em; text-decoration-thickness: 1px; }
:focus-visible { outline: 3px solid var(--acento); outline-offset: 3px; }
::selection { background: var(--acento); color: var(--sobre-degradado); }
body { display: flex; flex-direction: column; min-height: 100vh; }
main { flex: 1; }

.salto { position: absolute; left: var(--margen); top: -6rem; z-index: var(--z-salto); padding: var(--e-1) var(--e-2); background: var(--tinta); color: var(--superficie); }
.salto:focus { top: var(--e-1); }

.antetitulo { display: flex; flex-wrap: wrap; gap: 0.6em; align-items: center; font-family: var(--titulos); font-size: var(--t-s); font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--acento); }
.antetitulo svg { flex: none; }
.prosa { max-width: 62ch; font-size: var(--t-l); line-height: 1.55; }
.nota { font-size: var(--t-s); color: var(--tinta-2); }

.boton { display: inline-flex; align-items: center; justify-content: center; min-height: 3.25rem; padding: 0.35em 2em 0.15em; border: 0; border-radius: 0; background: var(--degradado-boton); color: var(--sobre-degradado); font-family: var(--titulos); font-size: var(--t-s); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; white-space: nowrap; cursor: pointer; transition: filter 0.2s var(--salida), transform 0.12s var(--salida); }
.boton:hover { filter: brightness(1.1); }
.boton:active { transform: translateY(1px); }
.boton--linea { background: none; color: var(--tinta); box-shadow: inset 0 0 0 1.5px var(--tinta); transition: background-color 0.2s var(--salida), color 0.2s var(--salida), transform 0.12s var(--salida); }
.boton--linea:hover { filter: none; background: var(--tinta); color: var(--superficie); }

.campo { width: 100%; min-height: 3.25rem; padding: 0 var(--e-2); border: 1.5px solid var(--tinta-2); border-radius: 0; background: var(--superficie-hundida); color: var(--tinta); font: inherit; transition: border-color 0.2s var(--salida); }
.campo::placeholder { color: var(--tinta-2); }
.campo:hover { border-color: var(--tinta); }
.campo:focus-visible { outline-offset: 0; border-color: var(--acento); }
.formulario { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--e-1) var(--e-2); align-items: end; }
.aviso { padding: var(--e-2); background: var(--superficie-alzada); box-shadow: inset 0 0 0 1px var(--acento); font-size: var(--t-s); }

/* Marco naranja desplazado, como las fotos de la portada de la web */
.marco { position: relative; margin: 0.9rem 0 0 0.9rem; }
.marco::before { content: ""; position: absolute; inset: -0.9rem 0.9rem 0.9rem -0.9rem; border: 2px solid var(--acento); pointer-events: none; }
.marco > * { position: relative; }

/* ───────── Cabecera ───────── */
.cabecera { position: sticky; top: 0; z-index: var(--z-fija); background: var(--superficie); border-bottom: 1px solid var(--linea); }
.cabecera__fila { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); max-width: var(--ancho); min-height: 4.5rem; margin: 0 auto; padding: 0 var(--margen); }
.cabecera__logo { display: flex; align-items: center; gap: 0.75rem; flex-shrink: 0; min-height: 2.75rem; }
.cabecera__logo img:first-child { width: auto; height: 2.75rem; }
.cabecera__logo img:last-child { width: auto; height: 1.75rem; }
.cabecera__nav { display: flex; gap: var(--e-3); }
.cabecera nav a { display: inline-flex; align-items: center; min-height: 2.75rem; font-family: var(--titulos); font-size: var(--t-s); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; transition: color 0.2s var(--salida); }
.cabecera nav a:hover, .cabecera nav a[aria-current="page"] { color: var(--acento); }
.cabecera__movil { display: none; }
.cabecera__movil summary { display: inline-flex; align-items: center; min-height: 2.75rem; font-family: var(--titulos); font-size: var(--t-s); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; list-style: none; cursor: pointer; }
.cabecera__movil summary::-webkit-details-marker { display: none; }
.cabecera__movil[open] summary { color: var(--acento); }
.cabecera__movil nav { position: absolute; inset: 100% 0 auto; z-index: var(--z-menu); display: grid; padding: 0 var(--margen) var(--e-3); background: var(--superficie); border-bottom: 1px solid var(--linea); }
.cabecera__movil nav a { min-height: 3.5rem; border-top: 1px solid var(--linea); }

/* ───────── Votación en vivo ───────── */
.vivo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); grid-template-areas: "cabeza tabla" "intro tabla"; gap: var(--e-4) var(--e-5); align-items: start; padding: var(--e-5) var(--borde-pagina) var(--e-6); background: linear-gradient(180deg, var(--superficie-hundida), rgb(20 19 22 / 0.85) 30%, rgb(20 19 22 / 0.2)) center bottom / max(100%, 75rem) calc(max(100vw, 75rem) / 3) no-repeat, url("brand/chispas.webp") center bottom / max(100%, 75rem) auto no-repeat, var(--superficie-hundida); }
/* Las chispas no se estiran a lo alto de la sección: con «cover» se ampliaban hasta 2,5 veces
   y se pixelaban. Van a su ancho, abajo, y nunca por encima de su tamaño real (2400 px). */
.vivo__cabeza { grid-area: cabeza; display: grid; gap: var(--e-3); }
.vivo__cabeza h1 em { font-style: normal; color: var(--acento); }
.vivo__intro { grid-area: intro; display: grid; gap: var(--e-4); justify-items: start; }
.vivo__tabla { grid-area: tabla; display: grid; gap: var(--e-3); }

.lider { display: flex; align-items: center; gap: 0.5em; font-family: var(--titulos); font-size: var(--t-l); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--acento); }
.sin-votos { font-family: var(--titulos); font-size: var(--t-l); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tinta-2); }

#leaderboard { display: grid; border-top: 1px solid var(--linea); }
.fila-voto { display: grid; grid-template-columns: 2rem minmax(0, 1fr) 2.5rem auto; gap: var(--e-2); align-items: center; padding: 0.85rem 0; border-bottom: 1px solid var(--linea); }
.fila-voto__puesto { font-family: var(--cartel); font-size: var(--t-l); color: var(--tinta-2); text-align: right; }
.fila-voto:first-child .fila-voto__puesto { color: var(--acento); }
.fila-voto__medio { display: grid; gap: 0.45rem; min-width: 0; }
.fila-voto__nombre { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5em; font-family: var(--titulos); font-size: 1.25rem; font-weight: 700; letter-spacing: 0.04em; line-height: 1.1; text-transform: uppercase; }
.corona { display: inline-flex; align-items: center; gap: 0.25em; font-size: var(--t-xs); letter-spacing: 0.14em; color: var(--acento); }
.barra { height: 0.5rem; background: var(--superficie-alzada); }
.barra__relleno { height: 100%; background: var(--linea); transition: width 0.4s var(--salida); }
.barra__relleno--lider { background: var(--degradado); }
.fila-voto__cuenta { font-family: var(--cartel); font-size: var(--t-l); text-align: right; }
.votar { min-height: 2.75rem; padding: 0.3em 1.1em 0.1em; font-size: var(--t-xs); }
.votar:disabled { cursor: default; filter: none; }
.votar--hecho { background: none; color: var(--tinta-2); box-shadow: inset 0 0 0 1px var(--linea); }
.votar--mio { background: var(--degradado-boton); color: var(--sobre-degradado); }

.propuesta { display: grid; gap: var(--e-2); padding: var(--e-3); background: var(--superficie-alzada); box-shadow: inset 0 0 0 1px var(--linea); }

.cerrada { display: grid; gap: var(--e-3); justify-items: start; padding: var(--e-4) 0; }
.cerrada__signo { display: grid; place-items: center; width: 6rem; height: 6rem; box-shadow: inset 0 0 0 2px var(--acento); font-family: var(--cartel); font-size: 3.5rem; line-height: 1; color: var(--acento); }
.cerrada img { width: auto; height: 3.25rem; }

.video { position: relative; display: block; width: 100%; overflow: hidden; background: var(--superficie-hundida); }
.video img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--salida); }
.video:hover img { transform: scale(1.03); }
.video__play { position: absolute; inset: 0; display: grid; place-items: center; background: rgb(15 15 15 / 0.25); }
.video__play span { display: grid; place-items: center; width: 3.75rem; height: 3.75rem; background: var(--degradado-boton); }
.video--vertical { aspect-ratio: 9 / 16; }
.vivo .marco { width: min(100%, 22rem); }

/* ───────── Daniel & Oscar ───────── */
.autores { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--e-5); align-items: center; padding: var(--e-6) var(--borde-pagina); }
.autores__texto { display: grid; gap: var(--e-3); }
.autores__texto h2 { font-size: var(--t-xxl); }
.autores__fotos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; }
.autores__fotos img { width: 100%; aspect-ratio: 1; object-fit: cover; }

/* ───────── Ganador 2025 ───────── */
.ganador { display: grid; gap: var(--e-4); padding: var(--e-6) var(--borde-pagina); background: var(--superficie-hundida); border-block: 1px solid var(--linea); }
.ganador__cabeza { display: grid; gap: var(--e-3); }
.ganador__cabeza h1 { font-size: clamp(3rem, 1.5rem + 7vw, 7rem); }
.ganador__medios { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-4); }
.ganador__medios img, .ganador__medios .video { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* ───────── Reto 2026 ───────── */
.reto { display: grid; gap: var(--e-4); padding: var(--e-6) var(--borde-pagina); }
.reto__cabeza { display: grid; gap: var(--e-3); }
.reto-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--e-4) var(--e-3); }
.turron { display: grid; gap: 0.6rem; align-content: start; }
.turron img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.turron__nombre { font-family: var(--titulos); font-size: 1.25rem; font-weight: 700; letter-spacing: 0.04em; line-height: 1.1; text-transform: uppercase; }
.turron__etiqueta { font-family: var(--titulos); font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tinta-2); }
.turron__etiqueta--campeon { color: var(--acento); }

/* ───────── Recomienda ───────── */
.recomienda { display: grid; gap: var(--e-3); justify-items: start; padding: var(--e-6) var(--borde-pagina); background: var(--superficie-hundida); border-block: 1px solid var(--linea); }
.recomienda > * { max-width: 46rem; width: 100%; }

/* ───────── Redes y vídeos ───────── */
.redes { display: grid; gap: var(--e-5); padding: var(--e-6) var(--borde-pagina); }
.redes__cabeza { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-3); }
.redes__enlaces { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.redes__enlaces .boton { gap: 0.7em; padding-inline: 1.5em; text-transform: none; letter-spacing: 0.04em; font-size: var(--t-m); }
.redes h2 { font-family: var(--cartel); font-size: var(--t-xl); font-weight: 400; letter-spacing: 0.005em; }
.videos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e-3); margin-top: var(--e-3); }
.videos a { display: grid; gap: var(--e-2); align-content: start; text-decoration: none; }
.videos a:hover .video__titulo { color: var(--acento); }
.video__titulo { font-family: var(--titulos); font-size: 1.125rem; font-weight: 600; letter-spacing: 0.03em; line-height: 1.2; transition: color 0.2s var(--salida); }
.videos .video__play span { width: 2.75rem; height: 2.75rem; }

/* ───────── Pie ───────── */
.pie { background: var(--superficie-hundida); border-top: 1px solid var(--linea); }
.pie__fila { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--e-3); max-width: var(--ancho); margin: 0 auto; padding: var(--e-5) var(--margen) var(--e-4); }
.pie__logo { width: clamp(6rem, 12vw, 8.5rem); }

@media (max-width: 63.99rem) {
  .reto-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 47.99rem) {
  .cabecera__nav { display: none; }
  .cabecera__movil { display: block; }
  .cabecera__logo img:first-child { height: 2.5rem; }
  .cabecera__logo img:last-child { height: 1.5rem; }
  .vivo { grid-template-columns: minmax(0, 1fr); grid-template-areas: "cabeza" "tabla" "intro"; }
  .vivo__cabeza h1 { font-size: clamp(2.75rem, 1rem + 11vw, 4.5rem); }
  .fila-voto { grid-template-columns: 1.5rem minmax(0, 1fr) 2rem auto; gap: 0.75rem; }
  .formulario { grid-template-columns: minmax(0, 1fr); }
  .formulario .boton { width: 100%; }
  .autores { grid-template-columns: minmax(0, 1fr); }
  .ganador__medios { grid-template-columns: minmax(0, 1fr); }
  .reto-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .videos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}