/* Diseño «10/10»: la letra de los vídeos (Inter + Instrument Serif), cabecera oscura, iconos propios y detalles de acabado. */

@font-face { font-family: 'QP Inter'; src: url(fuentes/inter-400.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'QP Inter'; src: url(fuentes/inter-600.woff2) format('woff2'); font-weight: 500 600; font-display: swap; }
@font-face { font-family: 'QP Inter'; src: url(fuentes/inter-800.woff2) format('woff2'); font-weight: 700 800; font-display: swap; }
@font-face { font-family: 'QP Inter'; src: url(fuentes/inter-900.woff2) format('woff2'); font-weight: 900; font-display: swap; }
@font-face { font-family: 'QP Instrument'; src: url(fuentes/instrument-400.woff2) format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'QP Instrument'; src: url(fuentes/instrument-400-italic.woff2) format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }

:root {
  --sans: 'QP Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --serif: 'QP Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --cursiva: 'QP Instrument', Georgia, serif;
  --noche: #0e0d0b;
  --oro: #c9a063;
  --oro2: #f2d8a2;
  --oro-osc: #7d5c2c;
  --sombra: 0 1px 0 rgba(0,0,0,.03), 0 8px 22px -14px rgba(0,0,0,.22);
}
@media (prefers-color-scheme: dark) { :root { --oro-osc: #e2c08a; } }

body { font-family: var(--sans); font-size: 16.5px; letter-spacing: -.006em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
h1, h2, h3 { font-weight: 800; letter-spacing: -.028em; line-height: 1.1; }
strong, b { font-weight: 700; }

/* Transiciones suaves entre páginas (navegadores que lo admiten) */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .22s; }

/* ---------- Cabecera oscura en la portada ---------- */
body:has(.m-hero) .top { background: var(--noche); border-bottom-color: transparent; box-shadow: none; }
body:has(.m-hero) .top .logo { color: #fff; }
.m-hero { background: var(--noche); color: #fff; margin: 0 -16px; padding: 16px 16px 22px; border-radius: 0 0 30px 30px; overflow: hidden; }
.m-hero .v-fondo { inset: -60px -40px -40px; }
.m-hero .v-fondo i { opacity: .5; filter: blur(56px); }
.m-hero .v-fondo i:nth-child(1) { background: #8a6630; }
.m-hero .v-fondo i:nth-child(2) { background: #c9a063; opacity: .28; }
.m-hero .v-fondo i:nth-child(3) { background: #5a4320; }
.m-hero .m-fecha { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.13); color: rgba(255,255,255,.72); backdrop-filter: blur(6px); }
.m-hero .m-fecha strong { color: #fff; }
.m-hero .m-punto { background: var(--oro); }
.m-hero h1 { color: #fff; font-weight: 900; font-size: clamp(2.1rem, 9.4vw, 3.8rem); line-height: 1.02; letter-spacing: -.04em; margin: 2px 0 8px; }
.m-hero .v-rota { height: 1.32em; margin-top: -.02em; }
.m-hero .v-rota a { display: inline-block; font-family: var(--cursiva); font-style: italic; font-weight: 400; font-size: 1.24em; line-height: 1.05; letter-spacing: -.015em; padding-right: .12em; background: linear-gradient(92deg, var(--oro2), var(--oro) 70%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.m-hero .v-rota a::after { bottom: .08em; height: .055em; background: linear-gradient(90deg, var(--oro), transparent); }
.m-hero .lead { color: rgba(255,255,255,.68); font-size: 1rem; }
.m-hero .v-historias { margin-top: 18px; }
.m-hero .v-historias button { color: rgba(255,255,255,.88); font-family: var(--sans); font-weight: 600; }
.m-hero .v-aro span { background: #1d1b17; border-color: var(--noche); color: var(--oro2); }
.m-hero .v-aro svg { width: 26px; height: 26px; }
.m-hero .v-historias .visto .v-aro::before { background: rgba(255,255,255,.2); }

/* ---------- Tarjetas ---------- */
.m-sec > h2, .m-cab h2 { font-size: 1.5rem; font-weight: 800; letter-spacing: -.03em; }
.m-cab a { font-weight: 600; text-decoration: none; color: var(--oro-osc); }
.m-ico { color: var(--oro-osc); background: color-mix(in srgb, var(--kraft) 14%, var(--superficie)); }
.m-ico svg { width: 22px; height: 22px; }
.m-accion.principal { background: linear-gradient(135deg, #e3bf7e 0%, #b88d4f 55%, #8f6a33 100%); color: #1b1408; border: 0; box-shadow: 0 16px 30px -14px rgba(143,106,51,.85); }
.m-accion.principal strong { font-size: 1.2rem; font-weight: 800; letter-spacing: -.02em; }
.m-accion.principal small, .m-accion.principal .m-flecha { color: rgba(27,20,8,.72); }
.m-accion.principal .m-ico { background: rgba(255,255,255,.3); color: #1b1408; }
.m-accion.principal::after { background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent); }
.m-mini, .m-descubre a, .m-grid a, .m-noticias, .m-tema, .m-datos, .m-accion, .m-buscar, .m-plegable, .m-mas a { border-radius: 18px; box-shadow: var(--sombra); }
.m-mini strong { font-weight: 800; letter-spacing: -.015em; }
.m-descubre a span { width: 44px; height: 44px; color: var(--oro-osc); background: color-mix(in srgb, var(--kraft) 14%, var(--superficie)); }
.m-descubre a span svg { width: 22px; height: 22px; }
.m-descubre a { font-weight: 700; letter-spacing: -.01em; }
.m-grid a { font-weight: 800; letter-spacing: -.01em; }
.m-noticias span { font-weight: 700; letter-spacing: -.01em; }
.m-mas a > span:first-child { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; color: var(--oro-osc); background: color-mix(in srgb, var(--kraft) 14%, var(--superficie)); }
.m-mas a > span:first-child svg { width: 21px; height: 21px; }
.m-mas h2 { font-size: 1.1rem; letter-spacing: -.02em; }

/* ---------- Juego e historias con la letra de los vídeos ---------- */
.v-frase { font-family: var(--cursiva); font-weight: 400; font-size: 1.9rem; line-height: 1.1; letter-spacing: -.01em; }
.v-cara { border-radius: 22px; }
.v-grande { font-weight: 900; letter-spacing: -.04em; }
.v-texto { font-family: var(--sans); }
.v-racha { font-family: var(--sans); }

/* ---------- Ficha de partido ---------- */
.m-ficha { position: relative; isolation: isolate; }
.m-ficha::before { content: ''; position: absolute; z-index: -1; left: -16px; right: -16px; top: -60px; height: 220px; background: radial-gradient(70% 100% at 15% 0%, color-mix(in srgb, var(--c) 20%, transparent), transparent 70%); pointer-events: none; }
.m-ficha-tit h1 { font-weight: 900; font-size: 2.3rem; letter-spacing: -.04em; }
.p-barra { flex: 1 1 auto; max-width: 84px; height: 6px; margin-left: auto; border-radius: 6px; background: linear-gradient(90deg, var(--kraft) calc(var(--n) * 100%), var(--resalte) 0); }
.p-barra + .m-num { margin-left: 10px; }
.m-tabs a { font-weight: 700; }

/* Nuevas candidaturas: «Lidera» y «Se presenta en» en línea, y el resumen recortado */
.grid-h .nueva .nota strong { display: inline; font: inherit; font-weight: 700; margin: 0; color: var(--tinta); }
.nueva h3 { font-weight: 800; letter-spacing: -.02em; }
.p-recorta { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.p-recorta.abierto { display: block; }
.p-leer { margin: -4px 0 10px; padding: 0; border: 0; background: none; color: var(--oro-osc); font: 700 .92rem var(--sans); cursor: pointer; }

/* ---------- Barra de abajo: el test, en el centro y destacado ---------- */
.menu2 a { font-family: var(--sans); font-weight: 600; }
@media (max-width: 760px) {
  .menu2 a[href$="index.html#partidos"] { order: 1; }
  .menu2 a[href$="noticias.html"] { order: 2; }
  .menu2 a[href$="test.html"] { order: 3; }
  .menu2 a[href$="comparar.html"] { order: 4; }
  .menu2 a[href$="mas.html"] { order: 5; }
  .menu2 a[href$="test.html"] svg { width: 24px; height: 24px; padding: 11px; box-sizing: content-box; margin-top: -24px; border-radius: 50%; color: #1b1408; background: linear-gradient(135deg, #e3bf7e, #a8814a); border: 4px solid var(--superficie); box-shadow: 0 10px 20px -8px rgba(143,106,51,.9); }
  .menu2 a[href$="test.html"] { color: var(--tinta); font-weight: 700; }
}
@media (min-width: 761px) {
  body:has(.m-hero) .top .menu2 a { color: rgba(255,255,255,.72); }
  body:has(.m-hero) .top .menu2 a:hover, body:has(.m-hero) .top .menu2 a[aria-current="page"] { background: rgba(255,255,255,.1); color: #fff; }
  .m-hero { margin: 12px 0 0; padding: 34px 36px 30px; border-radius: 30px; }
}

/* ---------- Pie oscuro ---------- */
.pie { background: var(--noche); color: rgba(255,255,255,.66); border-top: 0; margin-top: 56px; padding: 34px 0 110px; }
.pie a { color: #fff; }
.pie strong { color: #fff; }
.pie .boletin { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); color: #fff; }
.pie .boletin input[type=email] { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); color: #fff; }
.pie .boletin button { background: linear-gradient(135deg, #e3bf7e, #a8814a); color: #1b1408; }
.pie .legal, .pie .enlaces-pie { color: rgba(255,255,255,.5); }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* Desplegables de la ficha con la misma flecha que los temas */
.m-plegable summary { display: flex; align-items: center; gap: 10px; list-style: none; }
.m-plegable summary::-webkit-details-marker { display: none; }
.m-plegable summary::after { content: ''; width: 8px; height: 8px; margin-left: auto; border-right: 2px solid var(--suave); border-bottom: 2px solid var(--suave); transform: rotate(45deg) translateY(-2px); transition: transform .2s; flex: none; }
.m-plegable[open] summary::after { transform: rotate(-135deg) translateY(-2px); }

/* Botón de volver arriba visible también sobre el pie oscuro */
.arriba { background: var(--superficie); color: var(--tinta); border: 1px solid var(--linea); box-shadow: 0 10px 24px -10px rgba(0,0,0,.35); }

/* «Qué propone» de las candidaturas nuevas, con la misma flecha */
.nueva .faq summary { display: flex; align-items: center; list-style: none; font-weight: 700; }
.nueva .faq summary::-webkit-details-marker { display: none; }
.nueva .faq summary::after { content: ''; width: 8px; height: 8px; margin-left: auto; border-right: 2px solid var(--suave); border-bottom: 2px solid var(--suave); transform: rotate(45deg) translateY(-2px); transition: transform .2s; }
.nueva .faq[open] summary::after { transform: rotate(-135deg) translateY(-2px); }