:root {
  --ocre: #E6A52F;
  --oro: #F2BC4B;
  --tinta: #0B0907;
  --marfil: #F6EBD2;
  --duelo: #B5301F;
  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans: 'Jost', system-ui, sans-serif;
  --margen: clamp(20px, 3vw, 40px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--marfil);
  color: var(--tinta);
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.42;
  overflow-x: hidden;
}
h1, h2, h3, p, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; }
img { display: block; max-width: none; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }

.saltar { position: absolute; left: -9999px; top: 0; background: var(--tinta); color: var(--oro); padding: 14px 20px; z-index: 10; font-family: var(--sans); font-size: 1rem; }
.saltar:focus { left: 0; }

.ancho { max-width: 1320px; margin: 0 auto; padding-left: var(--margen); padding-right: var(--margen); }
.seccion { padding: clamp(56px, 7vw, 96px) 0; }
.etiqueta { font-family: var(--sans); font-size: 0.94rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; line-height: 1.5; }
.cursiva { font-style: italic; }
.derecha { text-align: right; }
.titular { font-size: clamp(2.6rem, 6.4vw, 6rem); font-weight: 400; line-height: 1; letter-spacing: -0.02em; margin-top: 12px; text-wrap: balance; }

/* Portada */
.portada { background: var(--ocre); }
.nav { padding: 10px var(--margen); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 28px; font-family: var(--sans); font-size: 0.875rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; }
.nav a { text-decoration: none; padding: 15px 0; display: inline-block; }
.nav a:hover { text-decoration: underline; text-underline-offset: 6px; }
.nav-enlaces { display: flex; flex-wrap: wrap; gap: 0 clamp(18px, 3vw, 32px); }
.portada-centro { padding: 20px 20px clamp(48px, 6vw, 72px); display: flex; flex-direction: column; align-items: center; text-align: center; }
.autor { font-size: 1.25rem; font-weight: 600; letter-spacing: 0.36em; text-transform: uppercase; margin-right: -0.36em; }
.titulo { font-size: clamp(5.2rem, 26.5vw, 32rem); font-weight: 300; line-height: 0.9; letter-spacing: -0.04em; white-space: nowrap; }
.proxima { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 14px; margin-top: 28px; font-size: 1.7rem; font-weight: 600; line-height: 1.2; }
.subtitulo { margin-top: 24px; font-size: 2rem; font-style: italic; }
.proxima:not([hidden]) + .subtitulo { display: none; }
.botones { display: flex; flex-direction: column; align-items: center; margin-top: 36px; }
.botones .boton-tinta { margin-left: clamp(32px, 8vw, 96px); }
.botones .boton-oro { margin-right: clamp(32px, 8vw, 96px); }

.boton { display: inline-flex; align-items: center; gap: 16px; padding: 18px clamp(22px, 3vw, 34px); min-height: 56px; font-family: var(--sans); font-size: 1rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; text-decoration: none; line-height: 1.2; transition: transform 0.15s ease; }
.boton:hover { transform: translateY(-2px); }
.boton-tinta { background: var(--tinta); color: var(--oro); }
.boton-oro { background: var(--oro); color: var(--tinta); }

/* Bloque partido */
.partido { display: flex; flex-wrap: wrap; }
.partido-siluetas { flex: 1 1 360px; min-height: clamp(320px, 34vw, 480px); background: var(--tinta); position: relative; overflow: hidden; }
.partido-siluetas img { position: absolute; width: 114%; left: -5%; top: 12%; }
.partido-texto { flex: 1 1 360px; min-width: 0; background: var(--duelo); color: var(--marfil); padding: 56px var(--margen); display: flex; flex-direction: column; justify-content: center; gap: 18px; }
.partido-texto .cursiva { font-size: 1.7rem; }
.palabra { font-size: clamp(3rem, 7.4vw, 8rem); font-weight: 400; line-height: 0.95; letter-spacing: 0.02em; }
.enlace-icono { align-self: flex-start; display: inline-flex; align-items: center; gap: 12px; font-size: 1.5rem; font-weight: 600; padding: 10px 0; }

/* Oso */
.oso-palabra { font-size: clamp(7rem, 23vw, 21rem); font-weight: 500; line-height: 0.9; letter-spacing: -0.035em; margin-top: 8px; }
.oso-definicion { margin-top: clamp(24px, 3vw, 40px); border-top: 2px solid var(--tinta); border-bottom: 2px solid var(--tinta); padding: 20px 0; font-size: clamp(1.7rem, 3vw, 2.6rem); line-height: 1.15; }
.oso-definicion i { font-weight: 500; }
.oso-definicion b { font-weight: 700; }
.columnas { display: flex; flex-wrap: wrap; gap: 32px 56px; margin-top: 40px; }
.columnas > div { flex: 1 1 280px; min-width: 0; }
.columnas .etiqueta { font-weight: 600; margin-bottom: 10px; }

/* Votación */
.quien { background: var(--tinta); color: var(--oro); }
.quien-cabeza { padding: clamp(48px, 6vw, 72px) var(--margen) clamp(32px, 4vw, 48px); text-align: center; }
.quien-pregunta { font-size: clamp(3rem, 9vw, 8.5rem); font-weight: 400; font-style: italic; line-height: 0.98; letter-spacing: -0.02em; margin-top: 12px; }
.quien-opciones { display: flex; flex-wrap: wrap; }
.opcion { flex: 1 1 320px; min-height: clamp(220px, 24vw, 320px); border: 0; border-top: 2px solid var(--oro); border-bottom: 2px solid var(--oro); margin: 0; padding: 36px 24px; cursor: pointer; font-family: var(--serif); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; transition: filter 0.15s ease; }
.opcion-ella { background: var(--ocre); color: var(--tinta); }
.opcion-el { background: var(--tinta); color: var(--oro); }
.opcion:hover:not(:disabled) { filter: brightness(1.12); }
.opcion:disabled { cursor: default; }
.opcion:disabled:not([aria-pressed="true"]) .opcion-nombre,
.opcion:disabled:not([aria-pressed="true"]) .etiqueta { opacity: 0.45; }
.opcion-nombre { font-size: clamp(4.5rem, 11vw, 10rem); font-weight: 300; line-height: 0.95; letter-spacing: -0.03em; }
.tu-voto { margin-top: 12px; padding: 8px 16px; font-family: var(--sans); font-size: 0.875rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; }
.opcion-ella .tu-voto { background: var(--tinta); color: var(--oro); }
.opcion-el .tu-voto { background: var(--oro); color: var(--tinta); }
.quien-mensaje { padding: 28px var(--margen) 40px; text-align: center; font-size: 1.6rem; font-style: italic; line-height: 1.3; }
.resultados { padding-bottom: clamp(48px, 6vw, 72px); }
.resultados-cabeza { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 32px; border-top: 2px solid var(--oro); padding-top: 20px; }
.resultados-cifras { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-top: 16px; }
.cifra { font-size: clamp(3.4rem, 8vw, 7rem); font-weight: 300; line-height: 0.95; letter-spacing: -0.03em; font-variant-numeric: lining-nums; }
.resultados-cifras .etiqueta { margin-top: 6px; }
.barra { display: flex; height: 28px; margin-top: 20px; border: 2px solid var(--oro); }
.barra-ella { flex: 1 1 0; min-width: 0; background: var(--ocre); transition: flex-grow 0.6s ease; }
.barra-el { flex: 1 1 0; min-width: 0; background: var(--tinta); transition: flex-grow 0.6s ease; }

/* Mientras empieza */
.espera { background: var(--duelo); color: var(--marfil); }
.datos { display: flex; flex-wrap: wrap; gap: 32px 56px; margin-top: clamp(32px, 4vw, 48px); }
.datos li { flex: 1 1 280px; min-width: 0; border-top: 2px solid var(--marfil); padding-top: 12px; }
.dato-numero { display: block; font-size: 5rem; font-weight: 300; line-height: 1; }
.datos p { margin-top: 8px; font-size: 1.5rem; line-height: 1.35; }
.espera-cierre { margin-top: clamp(32px, 4vw, 48px); font-size: 1.7rem; }

/* Videos y fotos */
.videos { background: var(--tinta); color: var(--oro); }
.videos-lista { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 480px), 1fr)); gap: 32px; margin-top: 32px; }
.video iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; background: #000; }
.video p { margin-top: 10px; font-size: 1.4rem; font-style: italic; }
.fotos-lista { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 16px; margin-top: 32px; }
.fotos-lista img { width: 100%; max-width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: var(--tinta); }

/* Reparto */
.reparto { background: var(--ocre); }
.nombres { margin-top: 20px; border-top: 2px solid var(--tinta); }
.nombres li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 32px; padding: 16px 0; border-bottom: 2px solid var(--tinta); }
.nombre { font-size: clamp(2.5rem, 6.4vw, 6rem); font-weight: 400; line-height: 1; letter-spacing: -0.02em; }

/* Funciones */
.funciones-cabeza { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 48px; }
.funciones-lugar { font-size: 1.5rem; line-height: 1.3; }
.fechas { margin-top: 32px; border-top: 2px solid var(--tinta); }
.fechas:empty { display: none; }
.fechas li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 32px; padding: 18px 0; border-bottom: 1px solid var(--tinta); }
.fecha-dia { font-size: clamp(1.8rem, 3.4vw, 2.4rem); line-height: 1.1; }
.fecha-dia::first-letter { text-transform: uppercase; }
.funciones-vacio { margin-top: 28px; font-size: 1.7rem; font-style: italic; }
.funciones-boton { margin-top: 32px; }

/* Pie */
.pie { background: var(--tinta); color: var(--oro); padding: 44px var(--margen); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 48px; }
.pie-marca { display: flex; align-items: center; gap: 22px; }
.pie-titulo { font-size: 1.9rem; letter-spacing: 0.26em; line-height: 1.2; }
.pie-marca .cursiva { font-size: 1.15rem; }
.pie-datos { line-height: 1.9; }
.camafeo { width: 60px; height: 77px; border-radius: 50%; background: var(--ocre); overflow: hidden; position: relative; flex: 0 0 auto; }
.camafeo img { position: absolute; width: 69px; left: -3px; top: 14px; }

@media (max-width: 560px) {
  .nav { justify-content: center; font-size: 0.75rem; letter-spacing: 0.14em; padding-top: 4px; padding-bottom: 0; }
  .nav > a { display: none; }
  .nav-enlaces { gap: 0 18px; flex-wrap: nowrap; }
  .autor { font-size: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .boton, .opcion, .barra-ella, .barra-el { transition: none; }
}