/*
 * Tema «Walkout» · playersmanagers.com — Players Managers: Fair Play, No pay to win
 * Boletín de protesta de mánagers de Online Soccer Manager (2020): tipografía de pancarta (Anybody estrecha y negra),
 * texto de lectura en Piazzolla, verde de césped, tarjeta amarilla y tarjeta roja. Paleta, escala y espacios en :root.
 */
:root {
  --papel: #f5f4ee;
  --papel-2: #e9e8df;
  --blanco: #fffffa;
  --tinta: #111412;
  --tinta-2: #2a2f2b;
  --tenue: #565c57;
  --filete: #d3d1c6;
  --cesped: #0b6b3a;
  --cesped-oscuro: #075230;
  --noche: #0b1c14;
  --noche-2: #13291e;
  --tiza: #eaf2ec;
  --tiza-tenue: #a9bdb1;
  --amarilla: #ffd23f;
  --roja: #c81d34;
  --roja-clara: #ff8090;

  --f-pancarta: "Anybody", "Arial Narrow", "Roboto Condensed", Impact, sans-serif;
  --f-texto: "Piazzolla", Georgia, "Times New Roman", serif;

  --t-s: .9375rem;
  --t-m: 1.125rem;
  --t-l: 1.3125rem;
  --t-xl: clamp(1.375rem, 2.4vw, 1.75rem);
  --t-2xl: clamp(2rem, 4.4vw, 3.25rem);
  --t-3xl: clamp(2.5rem, 6vw, 4.75rem);
  --t-4xl: clamp(3.75rem, 9.4vw, 8.25rem);

  --e-1: .5rem;
  --e-2: 1rem;
  --e-3: 1.5rem;
  --e-4: 2rem;
  --e-5: 3rem;
  --e-6: 4rem;
  --e-7: 6rem;

  --ancho: 78rem;
  --cabecera: 4.5rem;

  --ancho-texto: 42rem;
  --ancho-amplio: 78rem;
  --radio: 4px;
  --color-texto: var(--tinta);
  --color-fondo: var(--papel);
  --color-suave: var(--papel-2);
  --color-borde: var(--filete);
  --color-acento: var(--cesped);
  --color-acento-texto: #fff;
  --color-tenue: var(--tenue);
  --fuente-texto: var(--f-texto);
  --fuente-titulos: var(--f-pancarta);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scrollbar-color: var(--cesped) var(--papel-2); accent-color: var(--cesped); }
html.menu-abierto { overflow: hidden; }
body { margin: 0; background: var(--papel); color: var(--tinta); font-family: var(--f-texto); font-size: var(--t-m); line-height: 1.65; font-optical-sizing: auto; }
::selection { background: var(--amarilla); color: var(--tinta); }
img { max-width: 100%; height: auto; }
a { color: var(--cesped); text-decoration-thickness: 1.5px; text-underline-offset: .2em; transition: color .15s ease, background-color .15s ease, border-color .15s ease; }
a:hover { color: var(--cesped-oscuro); text-decoration-thickness: 3px; }
:focus-visible { outline: 3px solid var(--amarilla); outline-offset: 2px; box-shadow: 0 0 0 6px var(--tinta); border-radius: 2px; }
h1, h2, h3, h4 { font-family: var(--f-pancarta); font-weight: 850; font-stretch: 62%; line-height: .95; text-transform: uppercase; letter-spacing: 0; text-wrap: balance; margin: 0; }
p { text-wrap: pretty; }
main:focus { outline: none; }
mark { background: var(--amarilla); color: var(--tinta); padding: 0 .08em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
s { text-decoration: line-through; text-decoration-color: var(--roja); text-decoration-thickness: .11em; }
.envoltorio { width: min(100% - 2.5rem, var(--ancho)); margin-inline: auto; }
.saltar { position: absolute; left: 1rem; top: -4rem; z-index: 100; background: var(--amarilla); color: var(--tinta); padding: .75rem 1.25rem; font-family: var(--f-pancarta); font-weight: 800; text-decoration: none; transition: top .15s ease; }
.saltar:focus { top: 1rem; }
.icono { width: 1.25rem; height: 1.25rem; flex: none; }

/* ---------------------------------------------------------------- componentes */
.antetitulo { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .9rem; margin: 0 0 var(--e-2); font-family: var(--f-pancarta); font-size: var(--t-s); font-weight: 750; font-stretch: 100%; letter-spacing: .06em; text-transform: uppercase; color: var(--cesped); }
.antetitulo a { color: inherit; }
.antetitulo .icono { width: 1.1rem; height: 1.1rem; }
.antetitulo-claro { color: var(--amarilla); }
.antetitulo-silbato { width: 1.6rem; height: 3px; background: currentColor; }
.titular { font-size: var(--t-3xl); }
.titular-pequeno { font-size: var(--t-2xl); margin-bottom: var(--e-4); }
.bloque { padding-block: var(--e-7); }
.bloque-gris { background: var(--papel-2); }
.bloque-cabecera { margin-bottom: var(--e-5); max-width: 52rem; }
.bloque-cabecera-fila { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--e-3); max-width: none; }
.bloque-entradilla { margin: var(--e-3) 0 0; font-size: var(--t-l); max-width: 40rem; }

.boton { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 3rem; padding: .7rem 1.4rem; border: 2px solid var(--tinta); border-radius: var(--radio); background: var(--tinta); color: var(--papel); font-family: var(--f-pancarta); font-size: 1rem; font-weight: 800; font-stretch: 90%; letter-spacing: .04em; text-transform: uppercase; line-height: 1.1; text-decoration: none; cursor: pointer; box-shadow: 4px 4px 0 var(--cesped); transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease; }
.boton:hover { color: var(--papel); transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--cesped); }
.boton:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--cesped); }
.boton .icono { width: 1.15rem; height: 1.15rem; }
.boton-linea { background: transparent; color: var(--tinta); box-shadow: none; }
.boton-linea:hover { background: var(--tinta); color: var(--papel); box-shadow: 4px 4px 0 var(--amarilla); }
.boton-amarillo { background: var(--amarilla); border-color: var(--amarilla); color: var(--tinta); box-shadow: 4px 4px 0 rgba(0, 0, 0, .35); }
.boton-amarillo:hover { color: var(--tinta); box-shadow: 6px 6px 0 rgba(0, 0, 0, .35); }
.boton-pequeno { min-height: 2.75rem; padding: .5rem 1rem; font-size: .9375rem; }
.botones-fila { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-top: var(--e-4); }
.enlace-flecha { display: inline-flex; align-items: center; gap: .45rem; min-height: 2.75rem; font-family: var(--f-pancarta); font-weight: 800; font-stretch: 90%; letter-spacing: .04em; text-transform: uppercase; text-decoration: none; }
.enlace-flecha .icono { transition: transform .15s ease; }
.enlace-flecha:hover .icono { transform: translateX(4px); }

/* tarjeta de árbitro: idioma, país */
.idioma, .pais { display: inline-grid; place-items: center; min-width: 1.9rem; height: 1.6rem; padding: 0 .35rem; border-radius: 3px; background: var(--amarilla); color: var(--tinta); font-family: var(--f-pancarta); font-size: .8125rem; font-weight: 850; font-stretch: 100%; letter-spacing: .05em; line-height: 1; transform: rotate(-6deg); box-shadow: 1px 2px 0 rgba(0, 0, 0, .25); text-transform: uppercase; }
.idioma-pt { background: var(--cesped); color: #fff; }
.idioma-de { background: var(--tinta); color: #fff; }
.idioma-roja { background: var(--roja); color: #fff; min-width: 3.2rem; height: 2rem; font-size: 1rem; }
.firma { display: flex; align-items: center; gap: .6rem; margin: var(--e-2) 0 0; font-family: var(--f-pancarta); font-weight: 800; font-stretch: 90%; letter-spacing: .03em; text-transform: uppercase; }

/* ---------------------------------------------------------------- cabecera */
.cabecera { position: sticky; top: 0; z-index: 20; background: var(--noche); color: var(--tiza); border-bottom: 4px solid var(--cesped); }
.cabecera-fila { display: flex; align-items: center; gap: var(--e-3); min-height: var(--cabecera); }
.marca { display: flex; align-items: center; gap: .7rem; margin-right: auto; min-height: 2.75rem; color: var(--tiza); text-decoration: none; }
.marca:hover { color: #fff; }
.marca-escudo { display: block; width: 3rem; height: 3rem; border-radius: 50%; overflow: hidden; background: #fff; box-shadow: 0 0 0 2px var(--amarilla); flex: none; }
.marca-logo { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.35); }
.marca-nombre { font-family: var(--f-pancarta); font-size: 1.6rem; font-weight: 900; font-stretch: 68%; letter-spacing: .01em; text-transform: uppercase; line-height: 1; }
.navegacion { display: flex; align-items: center; gap: var(--e-3); }
.navegacion .menu { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--e-3); }
.navegacion a { position: relative; display: inline-flex; align-items: center; gap: .4rem; min-height: 2.75rem; color: var(--tiza); font-family: var(--f-pancarta); font-size: 1rem; font-weight: 750; font-stretch: 100%; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; }
.navegacion a::after { content: ""; position: absolute; left: 0; right: 0; bottom: .45rem; height: 3px; background: var(--amarilla); transform: scaleX(0); transform-origin: left; transition: transform .2s ease; }
.navegacion a:hover { color: #fff; }
.navegacion a:hover::after, .navegacion a[aria-current="page"]::after { transform: scaleX(1); }
.navegacion-buscar .icono { width: 1.1rem; height: 1.1rem; }
.navegacion-lema { display: none; }
.menu-boton { display: none; }

@media (max-width: 63.99rem) {
  :root { --cabecera: 3.75rem; }
  .marca-escudo { width: 2.6rem; height: 2.6rem; }
  .marca-nombre { font-size: 1.4rem; }
  .menu-boton { display: inline-flex; align-items: center; gap: .55rem; height: 2.75rem; padding: 0 .9rem; border: 2px solid var(--tiza); border-radius: var(--radio); background: transparent; color: var(--tiza); font-family: var(--f-pancarta); font-size: .9375rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
  .menu-boton[aria-expanded="true"] { background: var(--amarilla); border-color: var(--amarilla); color: var(--tinta); }
  .menu-boton-rayas, .menu-boton-rayas::before, .menu-boton-rayas::after { display: block; width: 1rem; height: 2px; background: currentColor; transition: transform .2s ease, background-color .2s ease; }
  .menu-boton-rayas { position: relative; }
  .menu-boton-rayas::before, .menu-boton-rayas::after { content: ""; position: absolute; left: 0; }
  .menu-boton-rayas::before { top: -5px; }
  .menu-boton-rayas::after { top: 5px; }
  .menu-boton[aria-expanded="true"] .menu-boton-rayas { background: transparent; }
  .menu-boton[aria-expanded="true"] .menu-boton-rayas::before { transform: translateY(5px) rotate(45deg); }
  .menu-boton[aria-expanded="true"] .menu-boton-rayas::after { transform: translateY(-5px) rotate(-45deg); }
  .navegacion { position: fixed; inset: calc(var(--cabecera) + 4px) 0 0; z-index: 30; display: none; flex-direction: column; align-items: stretch; gap: var(--e-2); padding: var(--e-3) 1.25rem calc(var(--e-4) + env(safe-area-inset-bottom)); background: var(--noche); overflow-y: auto; overscroll-behavior: contain; }
  .navegacion.abierto { display: flex; }
  .navegacion .menu { flex-direction: column; gap: 0; }
  .navegacion .menu li { border-bottom: 1px solid rgba(234, 242, 236, .15); }
  .navegacion .menu a { width: 100%; min-height: 3.75rem; font-size: 2.5rem; font-weight: 900; font-stretch: 62%; letter-spacing: 0; }
  .navegacion a::after { bottom: .6rem; right: auto; width: 3rem; }
  .navegacion-buscar { font-size: 1.125rem !important; }
  .navegacion-lema { display: block; margin: auto 0 0; padding-top: var(--e-3); font-family: var(--f-pancarta); font-size: 1.75rem; font-weight: 850; font-stretch: 62%; text-transform: uppercase; color: var(--tiza); line-height: 1; }
}

/* ---------------------------------------------------------------- portada */
.portada { padding-top: var(--e-6); background: var(--papel); overflow: hidden; }
.portada-rejilla { display: grid; gap: var(--e-5); align-items: center; padding-bottom: var(--e-6); }
.portada-titular { font-size: var(--t-4xl); line-height: .86; letter-spacing: -.005em; }
.portada-titular s { text-decoration-thickness: .09em; }
.portada-entradilla { margin: var(--e-4) 0 0; font-size: clamp(1.25rem, 2vw, 1.5rem); line-height: 1.45; max-width: 36rem; color: var(--tinta-2); }
.portada-escudo { position: relative; justify-self: center; width: min(22rem, 72vw); aspect-ratio: 1; display: grid; place-items: center; }
.portada-logo-marco { display: block; width: 74%; height: 74%; border-radius: 50%; overflow: hidden; background: #fff; box-shadow: 0 0 0 6px var(--tinta), 0 0 0 12px var(--amarilla), 0 30px 60px -30px rgba(0, 0, 0, .6); }
.portada-logo { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.5); }
.anillo { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.anillo text { font-family: var(--f-pancarta); font-size: 15px; font-weight: 800; font-stretch: 72%; letter-spacing: .08em; text-transform: uppercase; fill: var(--cesped); }
@media (min-width: 56rem) { .portada-rejilla { grid-template-columns: 1.35fr .65fr; gap: var(--e-6); } }
@media (prefers-reduced-motion: no-preference) {
  .anillo { animation: girar 60s linear infinite; }
  @keyframes girar { to { transform: rotate(360deg); } }
}

.estadio { position: relative; background: var(--noche); color: var(--tiza); }
.estadio picture { position: relative; display: block; overflow: hidden; }
.estadio picture::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 107, 58, .55), rgba(11, 28, 20, .85)); mix-blend-mode: multiply; }
.estadio-foto { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; filter: grayscale(1) contrast(1.15); }
@media (min-width: 48rem) { .estadio-foto { aspect-ratio: 1920 / 499; } }
.cifras { list-style: none; margin: 0; padding: var(--e-4) 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--e-3) var(--e-3); }
.cifras li { display: flex; flex-direction: column; gap: .3rem; border-left: 3px solid var(--amarilla); padding-left: var(--e-2); }
.cifra { font-family: var(--f-pancarta); font-size: clamp(2.75rem, 6vw, 4.5rem); font-weight: 900; font-stretch: 62%; line-height: .9; color: #fff; font-variant-numeric: tabular-nums; }
.cifra-texto { font-family: var(--f-pancarta); font-size: var(--t-s); font-weight: 700; font-stretch: 100%; letter-spacing: .04em; text-transform: uppercase; color: var(--tiza-tenue); line-height: 1.3; }
@media (min-width: 48rem) {
  .cifras { grid-template-columns: repeat(4, 1fr); position: relative; margin-top: -5.5rem; padding-bottom: var(--e-5); }
}

/* manifiesto */
.manifiesto-rejilla { display: grid; gap: var(--e-5); }
.manifiesto-cita { margin: 0 0 var(--e-3); font-family: var(--f-texto); font-style: italic; font-size: clamp(1.75rem, 3.6vw, 2.75rem); line-height: 1.15; color: var(--roja); }
.manifiesto-titulo { font-size: var(--t-2xl); }
.manifiesto-titulo a { color: var(--tinta); text-decoration: none; }
.manifiesto-titulo a:hover { color: var(--cesped); }
.firma-linea { margin: var(--e-2) 0 0; font-family: var(--f-pancarta); font-size: var(--t-s); font-weight: 700; font-stretch: 100%; letter-spacing: .04em; text-transform: uppercase; color: var(--tenue); }
.manifiesto-foto { margin: var(--e-4) 0 0; max-width: 355px; }
.manifiesto-foto img { display: block; width: 100%; border: 3px solid var(--tinta); }
.manifiesto-texto { font-size: 1.1875rem; line-height: 1.7; }
.manifiesto-texto p { margin: 0 0 1em; }
.capitular::first-letter, .capitular > p:first-of-type::first-letter, .capitular > .version:first-child > p:first-of-type::first-letter { float: left; margin: .02em .12em 0 0; font-family: var(--f-pancarta); font-size: 4.4em; font-weight: 900; font-stretch: 62%; line-height: .8; color: var(--cesped); }
@media (min-width: 60rem) {
  .manifiesto-rejilla { grid-template-columns: .8fr 1.2fr; gap: var(--e-6); }
  .manifiesto-texto { column-count: 2; column-gap: var(--e-5); column-rule: 1px solid var(--filete); }
  .manifiesto-texto .enlace-flecha { break-before: avoid; }
}

/* reivindicaciones: tarjetas rojas */
.demandas { background: var(--noche); color: var(--tiza); }
.demandas .titular { color: #fff; }
.demandas .bloque-entradilla { color: var(--tiza-tenue); }
.demandas a { color: var(--amarilla); }
.tarjetas-rojas { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.tarjeta-roja { position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: 18rem; padding: var(--e-4) var(--e-3); border-radius: 12px; background: var(--roja); color: #fff; box-shadow: 0 30px 50px -30px rgba(0, 0, 0, .8); transform: rotate(-2.5deg); transition: transform .25s ease; }
.tarjeta-roja:nth-child(2) { transform: rotate(1.8deg) translateY(.75rem); }
.tarjeta-roja:nth-child(3) { transform: rotate(-1deg); }
.tarjeta-roja:hover { transform: rotate(0) translateY(-.5rem); }
.tarjeta-roja-numero { font-family: var(--f-pancarta); font-size: 1rem; font-weight: 850; letter-spacing: .1em; opacity: .85; }
.tarjeta-roja h3 { font-size: clamp(2.5rem, 4.6vw, 3.75rem); line-height: .9; }
.tarjeta-roja p { margin: var(--e-2) 0 0; }
.demandas-fuente { margin: var(--e-5) 0 0; }

/* muro de grupos */
.muro { background: var(--cesped); color: var(--tiza); }
.muro .titular { color: #fff; }
.muro-cifra { color: var(--amarilla); }
.muro mark { background: var(--amarilla); }
.muro-nombres { margin: 0; font-family: var(--f-pancarta); font-size: clamp(1.125rem, 1.9vw, 1.5rem); font-weight: 800; font-stretch: 68%; text-transform: uppercase; line-height: 1.35; color: var(--tiza); overflow-wrap: anywhere; }
.muro-nombres span { white-space: nowrap; }
.muro-nombres span::after { content: " ●"; color: var(--amarilla); font-size: .55em; vertical-align: .25em; margin-right: .1em; }
.muro-nombres span:nth-child(5n + 1) { color: #fff; }
@media (max-width: 40rem) { .muro-nombres span { white-space: normal; } }

/* voces */
.voces { background: var(--papel-2); }
.voces-rejilla { display: grid; gap: var(--e-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); grid-auto-flow: dense; }
.voz blockquote { flex: 1; }
.voz { position: relative; display: flex; flex-direction: column; margin: 0; padding: var(--e-4) var(--e-3) var(--e-3); background: var(--blanco); border-top: 5px solid var(--tinta); box-shadow: 0 1px 0 var(--filete); }
.voz-grande { background: var(--tinta); color: var(--tiza); border-top-color: var(--amarilla); }
@media (min-width: 48rem) { .voz-grande { grid-column: span 2; } }
.voz-comillas { display: block; color: var(--cesped); margin-bottom: var(--e-1); }
.voz-comillas .icono { width: 2.25rem; height: 2.25rem; }
.voz-grande .voz-comillas { color: var(--amarilla); }
.voz blockquote { margin: 0; }
.voz blockquote p { margin: 0; font-style: italic; font-size: 1.125rem; line-height: 1.55; }
.voz-grande blockquote p { font-size: clamp(1.375rem, 2.4vw, 1.875rem); line-height: 1.4; }
.voz figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin-top: var(--e-3); }
.voz-firma { font-family: var(--f-pancarta); font-weight: 850; font-stretch: 80%; font-size: 1.125rem; text-transform: uppercase; letter-spacing: .02em; }
.voz-enlace { margin-left: auto; display: inline-flex; align-items: center; min-height: 2.75rem; font-family: var(--f-pancarta); font-size: .9375rem; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
.voz-grande .voz-enlace { color: var(--amarilla); }

/* crónica */
.cronica-rejilla { display: grid; gap: var(--e-5); align-items: start; }
@media (min-width: 60rem) { .cronica-rejilla { grid-template-columns: .7fr 1.3fr; gap: var(--e-6); } .cronica-rejilla > .bloque-cabecera { position: sticky; top: calc(var(--cabecera) + var(--e-3)); } }
.cronica-rejilla .boton { margin-top: var(--e-4); }
.cronica-mes + .cronica-mes { margin-top: var(--e-5); }
.cronica-mes-titulo { display: flex; align-items: baseline; gap: .6rem; margin: 0 0 var(--e-2); padding-bottom: .5rem; border-bottom: 4px solid var(--tinta); font-family: var(--f-pancarta); font-size: 1.25rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--tenue); }
.cronica-mes-titulo span { font-size: 2.25rem; font-weight: 900; font-stretch: 62%; letter-spacing: 0; color: var(--tinta); }
.cronica-mes ol { list-style: none; margin: 0; padding: 0; }
.cronica-item { display: grid; grid-template-columns: 3.75rem 1fr; gap: var(--e-2); padding-block: var(--e-2); border-bottom: 1px solid var(--filete); }
.cronica-dia { font-family: var(--f-pancarta); font-size: 2.5rem; font-weight: 900; font-stretch: 62%; line-height: .9; color: var(--cesped); font-variant-numeric: tabular-nums; }
.cronica-titulo { font-family: var(--f-texto); font-size: var(--t-xl); font-weight: 600; font-stretch: 100%; text-transform: none; line-height: 1.2; }
.cronica-titulo a { color: var(--tinta); text-decoration: none; }
.cronica-titulo a:hover { color: var(--cesped); text-decoration: underline; }
.cronica-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .9rem; margin: .5rem 0 0; font-family: var(--f-pancarta); font-size: var(--t-s); font-weight: 650; font-stretch: 100%; letter-spacing: .03em; text-transform: uppercase; color: var(--tenue); }

/* destacado (Riaho Super League) */
.destacado { background: var(--noche); color: var(--tiza); }
.destacado .titular { color: #fff; }
.destacado-rejilla { display: grid; gap: var(--e-5); align-items: center; }
@media (min-width: 56rem) { .destacado-rejilla { grid-template-columns: minmax(0, 26rem) 1fr; gap: var(--e-7); } }
.destacado-foto { margin: 0; max-width: 26rem; }
.destacado-foto img { display: block; width: 100%; border-radius: 12px; transform: rotate(-2deg); box-shadow: 0 0 0 6px var(--amarilla), 0 30px 60px -30px rgba(0, 0, 0, .8); }
.destacado-texto { font-size: var(--t-l); color: var(--tiza-tenue); max-width: 38rem; }
.reglas { list-style: none; margin: var(--e-3) 0 var(--e-4); padding: 0; display: grid; gap: .5rem; }
.reglas li { display: flex; align-items: center; gap: .75rem; font-family: var(--f-pancarta); font-size: 1.375rem; font-weight: 850; font-stretch: 75%; text-transform: uppercase; letter-spacing: .01em; }
.reglas li::before { content: ""; flex: none; width: 1.1rem; height: 1.5rem; border-radius: 2px; background: var(--roja); transform: rotate(-8deg); }

/* llamada final */
.cta { background: var(--amarilla); color: var(--tinta); padding-block: var(--e-6); }
.cta-caja { display: grid; gap: var(--e-3); align-items: center; }
.cta-titulo { font-size: var(--t-3xl); }
.cta-titulo mark { background: var(--tinta); color: var(--amarilla); }
.cta p { margin: 0; font-size: var(--t-l); max-width: 34rem; }
.cta .boton { justify-self: start; box-shadow: 4px 4px 0 var(--cesped); }
@media (min-width: 56rem) { .cta-caja { grid-template-columns: 1fr 1fr auto; gap: var(--e-5); } }

/* tarjetas */
.tarjetas { display: grid; gap: var(--e-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); }
.tarjeta { position: relative; display: flex; flex-direction: column; padding: var(--e-3); background: var(--blanco); border-top: 5px solid var(--cesped); box-shadow: 0 1px 0 var(--filete); transition: transform .15s ease, box-shadow .15s ease; }
.tarjeta:hover { transform: translateY(-3px); box-shadow: 0 18px 30px -22px rgba(0, 0, 0, .5); }
.tarjeta-foto { margin: calc(var(--e-3) * -1) calc(var(--e-3) * -1) var(--e-3); }
.tarjeta-foto img { display: block; width: 100%; aspect-ratio: 2 / 1; object-fit: cover; }
.tarjeta-meta { display: flex; align-items: center; gap: .8rem; margin: 0 0 var(--e-2); font-family: var(--f-pancarta); font-size: var(--t-s); font-weight: 700; font-stretch: 100%; letter-spacing: .04em; text-transform: uppercase; color: var(--tenue); }
.tarjeta-titulo { font-family: var(--f-texto); font-size: var(--t-xl); font-weight: 700; font-stretch: 100%; text-transform: none; line-height: 1.2; }
.tarjeta-titulo a { color: var(--tinta); text-decoration: none; }
.tarjeta-titulo a::after { content: ""; position: absolute; inset: 0; }
.tarjeta:has(a:focus-visible) { outline: 3px solid var(--amarilla); outline-offset: 2px; }
.tarjeta-titulo a:focus-visible { outline: none; box-shadow: none; }
.tarjeta-resumen { margin: var(--e-2) 0 0; color: var(--tinta-2); font-size: 1rem; line-height: 1.55; flex: 1; }
.tarjeta-autor { margin: var(--e-2) 0 0; font-family: var(--f-pancarta); font-size: var(--t-s); font-weight: 750; letter-spacing: .04em; text-transform: uppercase; color: var(--cesped); }

/* ---------------------------------------------------------------- páginas interiores */
.pagina-cabecera { padding-block: var(--e-5) var(--e-5); background: var(--papel); border-bottom: 4px solid var(--tinta); }
.pagina-titular { font-size: var(--t-3xl); max-width: 20ch; line-height: .9; }
.pagina-entradilla { margin: var(--e-3) 0 0; font-size: var(--t-l); max-width: 40rem; color: var(--tinta-2); }
.migas ol { list-style: none; margin: 0 0 var(--e-3); padding: 0; display: flex; flex-wrap: wrap; gap: .3rem; font-family: var(--f-pancarta); font-size: var(--t-s); font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--tenue); }
.migas li:not(:last-child)::after { content: "/"; margin-left: .4rem; color: var(--filete); }
.migas a { color: var(--tenue); display: inline-flex; align-items: center; min-height: 1.5rem; }
.pagina-cuerpo { padding-block: var(--e-5) var(--e-6); }
.sin-resultados { font-size: var(--t-l); color: var(--tenue); }
.listado-total { margin: var(--e-2) 0 0; font-family: var(--f-pancarta); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--tenue); }

/* artículo */
.articulo-rejilla { display: grid; gap: var(--e-4); align-items: start; }
.articulo-cuerpo { min-width: 0; max-width: 44rem; }
.articulo-contenido { font-size: 1.1875rem; line-height: 1.72; }
.articulo-contenido > *, .articulo-contenido .version > * { margin-left: 0; margin-right: 0; max-width: none; }
.articulo-contenido h2 { font-size: var(--t-2xl); margin-top: 1.4em; }
.articulo-contenido .version + .version { margin-top: var(--e-5); padding-top: var(--e-4); border-top: 4px solid var(--tinta); scroll-margin-top: calc(var(--cabecera) + 1rem); }
.articulo-contenido .version h2:first-child { margin-top: 0; }
.articulo-contenido blockquote { margin-left: 0; border-left: 6px solid var(--cesped); padding: .2em 0 .2em 1.25em; font-style: italic; font-size: 1.2em; line-height: 1.5; }
.articulo-contenido ol { padding-left: 1.4em; }
.articulo-foto { margin: 0 0 var(--e-4); max-width: 355px; }
.articulo-foto img { display: block; width: 100%; border: 3px solid var(--tinta); }
.articulo-lateral { display: grid; gap: var(--e-3); align-content: start; }
.autor-caja { padding: var(--e-3); background: var(--blanco); border-top: 5px solid var(--tinta); }
.autor-etiqueta { margin: 0; font-family: var(--f-pancarta); font-size: var(--t-s); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tenue); }
.autor-nombre { margin: .25rem 0 0; font-family: var(--f-pancarta); font-size: 2rem; font-weight: 900; font-stretch: 65%; text-transform: uppercase; line-height: 1; }
.autor-nombre a { color: var(--tinta); text-decoration: none; }
.autor-nombre a:hover { color: var(--cesped); }
.autor-bio { margin: var(--e-2) 0 0; font-size: 1rem; line-height: 1.55; color: var(--tinta-2); }
.articulo-posicion { margin: 0; font-family: var(--f-pancarta); font-weight: 750; font-size: var(--t-s); letter-spacing: .04em; text-transform: uppercase; color: var(--tenue); }
.articulo-posicion span { font-size: 2.5rem; font-weight: 900; font-stretch: 62%; color: var(--cesped); letter-spacing: 0; }
@media (min-width: 60rem) {
  .articulo-rejilla { grid-template-columns: 16rem minmax(0, 44rem); gap: var(--e-6); }
  .articulo-lateral { position: sticky; top: calc(var(--cabecera) + var(--e-3)); }
}
.pagina-cabecera .antetitulo time, .pagina-cabecera .antetitulo span:not(.idioma):not(.x-oculto), .pagina-cabecera .antetitulo a { color: var(--tenue); }
.etiquetas { display: flex; flex-wrap: wrap; gap: .5rem; margin: var(--e-4) 0 0; }
.etiquetas a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: .25rem .8rem; background: var(--papel-2); color: var(--tinta); font-family: var(--f-pancarta); font-weight: 750; letter-spacing: .03em; text-decoration: none; }
.etiquetas a:hover { background: var(--amarilla); }

/* comentarios */
.comentarios { margin-top: var(--e-6); }
.comentarios-titulo { font-size: var(--t-2xl); margin-bottom: var(--e-3); padding-bottom: .5rem; border-bottom: 4px solid var(--tinta); }
.comentarios-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-2); }
.comentarios-lista .comentarios-lista { margin: var(--e-2) 0 0 var(--e-4); }
.comentario article { padding: var(--e-3); background: var(--blanco); box-shadow: 0 1px 0 var(--filete); }
.comentario:target article { box-shadow: 0 0 0 3px var(--amarilla); }
.comentario { scroll-margin-top: calc(var(--cabecera) + 1rem); }
.comentario-cita article { border-left: 6px solid var(--amarilla); }
.comentario-cabecera { display: flex; align-items: center; gap: .75rem; margin-bottom: .75rem; }
.comentario-cabecera p { margin: 0; line-height: 1.3; }
.comentario-cabecera time { font-size: var(--t-s); color: var(--tenue); }
.comentario-inicial { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; flex: none; border-radius: 50%; background: var(--cesped); color: #fff; font-family: var(--f-pancarta); font-weight: 900; font-size: 1.25rem; }
.comentario-tipo { display: inline-block; margin-left: .4rem; padding: .05rem .45rem; background: var(--amarilla); font-family: var(--f-pancarta); font-size: .8125rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.comentario-texto { overflow-wrap: anywhere; }
.comentario-texto p { margin: 0 0 .6em; }
.comentario-texto p:last-child { margin-bottom: 0; }
.comentario-texto blockquote { margin: 0; font-style: italic; font-size: 1.125rem; }

/* anterior / siguiente */
.vecinos { display: grid; gap: var(--e-2); padding-block: 0 var(--e-6); }
.vecino { display: flex; flex-direction: column; gap: .35rem; padding: var(--e-3); background: var(--blanco); border-top: 5px solid var(--tinta); color: var(--tinta); text-decoration: none; }
.vecino span { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--f-pancarta); font-size: var(--t-s); font-weight: 750; letter-spacing: .05em; text-transform: uppercase; color: var(--cesped); }
.vecino strong { font-size: var(--t-xl); line-height: 1.2; }
.vecino:hover { border-top-color: var(--amarilla); color: var(--tinta); }
@media (min-width: 48rem) { .vecinos { grid-template-columns: 1fr 1fr; } .vecino-sig { text-align: right; align-items: flex-end; } }

/* lista de honor */
.lista-honor-cabecera { display: grid; gap: var(--e-3); margin-bottom: var(--e-5); }
@media (min-width: 56rem) { .lista-honor-cabecera { grid-template-columns: auto 1fr; gap: var(--e-6); align-items: start; } .filtro-crews { grid-column: 2; } }
.lista-honor-cifra { margin: 0; font-family: var(--f-pancarta); font-size: 1.5rem; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; line-height: 1; color: var(--tenue); }
.lista-honor-cifra span { display: block; font-size: clamp(6rem, 16vw, 11rem); font-weight: 900; font-stretch: 62%; color: var(--cesped); letter-spacing: -.01em; }
.lista-honor-intro { font-size: var(--t-l); }
.lista-honor-intro > * { margin-left: 0; }
.filtro-crews { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin: 0; }
.filtro-crews label { font-family: var(--f-pancarta); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.filtro-crews input { flex: 1 1 14rem; min-height: 3rem; padding: .6rem .9rem; font: inherit; font-size: 1.0625rem; border: 2px solid var(--tinta); border-radius: var(--radio); background: var(--blanco); }
.filtro-cuenta { font-family: var(--f-pancarta); font-weight: 700; color: var(--tenue); text-transform: uppercase; }
.crews { list-style: none; margin: 0; padding: var(--e-4) 0 0; border-top: 4px solid var(--tinta); columns: 4 14rem; column-gap: var(--e-4); }
.crews li { display: flex; gap: .6rem; break-inside: avoid; padding: .4rem 0; border-bottom: 1px solid var(--filete); font-family: var(--f-pancarta); font-size: 1.125rem; font-weight: 750; font-stretch: 80%; text-transform: uppercase; line-height: 1.25; overflow-wrap: anywhere; }
.crews li[hidden] { display: none; }
.crew-numero { flex: none; min-width: 2.4rem; color: var(--cesped); font-variant-numeric: tabular-nums; }

/* archivo */
.archivo-rejilla { display: grid; gap: var(--e-5); align-items: start; }
@media (min-width: 60rem) { .archivo-rejilla { grid-template-columns: 16rem 1fr; gap: var(--e-6); } .archivo-lateral { position: sticky; top: calc(var(--cabecera) + var(--e-3)); } }
.archivo-lateral { display: grid; gap: var(--e-3); }
.anios { display: flex; flex-wrap: wrap; gap: .5rem; }
.anios a { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; padding: .3rem .9rem; border: 2px solid var(--tinta); color: var(--tinta); font-family: var(--f-pancarta); font-weight: 850; text-decoration: none; }
.anios a[aria-current="page"], .anios a:hover { background: var(--tinta); color: var(--papel); }
.anios span { font-weight: 600; opacity: .7; }

/* contacto */
.contacto-rejilla { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-5); align-items: start; }
.contacto-rejilla > * { min-width: 0; }
@media (min-width: 60rem) { .contacto-rejilla { grid-template-columns: .8fr 1.2fr; gap: var(--e-7); } }
.contacto-cita { margin: 0; font-style: italic; font-size: clamp(1.375rem, 2.6vw, 2rem); line-height: 1.35; }
.texto-largo { font-size: 1.125rem; line-height: 1.7; }
.texto-largo > * { margin-left: 0; }
.formulario { padding: var(--e-4) var(--e-3); background: var(--blanco); border-top: 6px solid var(--cesped); box-shadow: 0 1px 0 var(--filete); }
@media (min-width: 40rem) { .formulario { padding: var(--e-5) var(--e-4); } }
.x-contacto label { font-family: var(--f-pancarta); font-size: var(--t-s); font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
.x-contacto label span { text-transform: none; letter-spacing: 0; }
.x-contacto input:not([type=checkbox]), .x-contacto textarea, .x-buscador input { font: inherit; font-size: 1.0625rem; min-height: 3rem; padding: .7rem .9rem; border: 2px solid var(--tinta); border-radius: var(--radio); background: var(--papel); color: var(--tinta); }
.x-contacto input:focus, .x-contacto textarea:focus, .x-buscador input:focus { outline: 3px solid var(--amarilla); outline-offset: 0; }
.x-contacto .x-acepto label { font-family: var(--f-texto); font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 1rem; line-height: 1.5; }
.x-contacto .x-acepto input { width: 1.25rem; height: 1.25rem; flex: none; }
.x-contacto .boton, .x-buscador button { min-height: 3rem; border: 2px solid var(--tinta); border-radius: var(--radio); background: var(--tinta); color: var(--papel); font-family: var(--f-pancarta); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding-inline: 1.25rem; box-shadow: none; }
.x-contacto .boton { width: 100%; justify-content: center; box-shadow: 4px 4px 0 var(--cesped); }
.x-buscador { margin-top: var(--e-3); max-width: 36rem; }
.archivo-lateral .x-buscador { margin-top: 0; flex-direction: column; }
.paginacion a, .paginacion span[aria-current] { min-width: 2.75rem; min-height: 2.75rem; display: inline-grid; place-items: center; border-radius: 0; border: 2px solid var(--tinta); font-family: var(--f-pancarta); font-weight: 800; }
.paginacion span[aria-current] { background: var(--tinta); color: var(--papel); }

/* ---------------------------------------------------------------- pie */
.pie { background: var(--noche); color: var(--tiza-tenue); border-top: 6px solid var(--amarilla); }
.pie a { color: var(--tiza); text-decoration-color: rgba(234, 242, 236, .35); }
.pie a:hover { color: #fff; }
.pie-rejilla { display: grid; gap: var(--e-5); padding-block: var(--e-6) var(--e-5); }
@media (min-width: 56rem) { .pie-rejilla { grid-template-columns: 1.6fr 1fr 1fr; gap: var(--e-6); } }
.pie-nombre { display: flex; align-items: center; gap: .9rem; margin: 0; font-family: var(--f-pancarta); font-size: clamp(2.5rem, 5vw, 3.75rem); font-weight: 900; font-stretch: 62%; text-transform: uppercase; line-height: .9; color: #fff; }
.marca-escudo-pie { width: 4.5rem; height: 4.5rem; }
.pie-lema { margin: var(--e-2) 0 0; font-family: var(--f-pancarta); font-size: 1.5rem; font-weight: 850; font-stretch: 70%; text-transform: uppercase; color: var(--amarilla); }
.pie-lema s { text-decoration-color: var(--roja-clara); }
.pie-texto { margin: var(--e-2) 0 0; max-width: 28rem; font-style: italic; font-size: 1.125rem; }
.pie-grupo h2 { font-size: 1rem; font-weight: 800; font-stretch: 100%; letter-spacing: .08em; color: var(--amarilla); margin-bottom: var(--e-2); }
.pie-grupo ul { list-style: none; margin: 0; padding: 0; }
.pie-grupo a { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.75rem; text-decoration: none; }
.pie-grupo a:hover { text-decoration: underline; }
.pie-grupo .icono { width: 1rem; height: 1rem; }
.pie-final { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--e-2); padding-block: var(--e-2) calc(var(--e-2) + env(safe-area-inset-bottom)); border-top: 1px solid rgba(234, 242, 236, .14); font-size: var(--t-s); }
.pie-final p { margin: 0; }
.pie-final a { display: inline-flex; align-items: center; min-height: 2.75rem; }

/* ---------------------------------------------------------------- móvil */
@media (max-width: 47.99rem) {
  .bloque { padding-block: var(--e-6); }
  .portada { padding-top: var(--e-4); }
  .portada-rejilla { padding-bottom: var(--e-5); }
  .portada-escudo { width: min(16rem, 70vw); }
  .botones-fila .boton { flex: 1 1 100%; }
  .tarjeta-roja { min-height: 0; flex-direction: row; align-items: center; justify-content: flex-start; gap: var(--e-3); padding: var(--e-3); transform: none !important; }
  .tarjeta-roja h3 { font-size: 2.25rem; }
  .tarjetas-rojas { gap: var(--e-2); }
  .voz-enlace { margin-left: 0; }
  .cronica-item { grid-template-columns: 2.75rem 1fr; }
  .cronica-dia { font-size: 2rem; }
  .crews { columns: 1; }
  .comentarios-lista .comentarios-lista { margin-left: var(--e-2); }
}

/* ---------------------------------------------------------------- movimiento e impresión */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
@media print {
  .cabecera, .pie, .cta, .botones-fila, .vecinos, .saltar, .x-buscador, .filtro-crews, .articulo-lateral { display: none !important; }
  body { background: #fff; font-size: 11pt; }
  .demandas, .muro, .destacado, .estadio, .voz-grande { background: none !important; color: #000 !important; }
  .demandas *, .muro *, .destacado *, .estadio * { color: #000 !important; }
  .crews { columns: 3; }
}

/* móvil: portada más breve (el muro se recorta, el manifiesto deja un párrafo, las voces se deslizan) */
@media (max-width: 47.99rem) {
  .muro-nombres { max-height: 24rem; overflow: hidden; -webkit-mask-image: linear-gradient(#000 65%, transparent); mask-image: linear-gradient(#000 65%, transparent); }
  .manifiesto-texto p + p { display: none; }
  .voces-rejilla { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 86%; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; padding-bottom: var(--e-2); margin-inline: -1.25rem; padding-inline: 1.25rem; scroll-padding-inline: 1.25rem; }
  .voz { scroll-snap-align: start; }
}