/* MarcaScroll — componentes, copiados de components/bundle.css del design system. */
/* MarcaScroll: dos registros. Portal (crema, rojo, tinta, Anton, entradas) y Diario (papel, rojo, gris, PT Sans Narrow), este solo dentro de Pantallazo y Titular. */

body { margin: 0; font-family: var(--font-texto); background: var(--crema); color: var(--tinta); -webkit-font-smoothing: antialiased; }

.ms-icono { flex: none; display: inline-block; vertical-align: middle; }
.ms-rombo path { fill: var(--sec, var(--rojo)); stroke: var(--tinta); stroke-width: 1.5; }

/* Foco: anillo tinta con hueco crema, legible sobre todos los fondos claros. Sobre tinta se invierte. */
:where([class*="ms-"]) :is(a, button):focus-visible,
:is(a, button)[class*="ms-"]:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; box-shadow: 0 0 0 2px var(--crema); }
:where(.ms-ed, .ms-pie, .ms-ticker) :is(a, button):focus-visible { outline-color: var(--crema); box-shadow: 0 0 0 2px var(--tinta); }

/* Colores de sección: marcan navegación (rombos, Tags), no rellenan bloques */
[data-seccion="pantallazos"] { --sec: var(--papel); }
[data-seccion="noticias"] { --sec: var(--rojo); }
[data-seccion="scroll-test"] { --sec: var(--amarillo); }
[data-seccion="jornada"] { --sec: var(--cielo); }
[data-seccion="editorial"] { --sec: var(--tinta); }
[data-seccion="abono"] { --sec: var(--rosa); }

/* Tonos de bloque: ritmo, nunca dos iguales seguidos */
[data-tono="rojo"] { --fondo: var(--rojo); --sobre: var(--on-rojo); }
[data-tono="amarillo"] { --fondo: var(--amarillo); }
[data-tono="cielo"] { --fondo: var(--cielo); }
[data-tono="rosa"] { --fondo: var(--rosa); }
[data-tono="crema"] { --fondo: var(--crema-hondo); }

/* ---------- Button ---------- */
.ms-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--esp-2); box-sizing: border-box; height: 44px; padding: 0 var(--esp-5); border: 2px solid var(--tinta); border-radius: var(--radio-pill); background: transparent; color: var(--tinta); font: 600 15px/1 var(--font-texto); letter-spacing: .01em; text-decoration: none; white-space: nowrap; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease; }
.ms-btn--s { height: 36px; padding: 0 var(--esp-4); font-size: 13px; }
.ms-btn--primario { background: var(--rojo); color: var(--on-rojo); }
.ms-btn--primario:hover { background: var(--rojo-hondo); }
.ms-btn--tinta { background: var(--tinta); color: var(--crema); }
.ms-btn--crema { background: var(--crema); border-color: var(--crema); }
.ms-btn:hover { transform: translate(-2px, -2px); box-shadow: var(--sombra-sello); }
.ms-btn--crema:hover { box-shadow: 4px 4px 0 0 var(--rojo); }
.ms-btn:active { transform: none; box-shadow: none; }
.ms-btn:disabled, .ms-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }

/* ---------- Tag ---------- */
.ms-tag { display: inline-flex; align-items: center; gap: 7px; box-sizing: border-box; height: 26px; padding: 0 10px; border: 1.5px solid var(--tinta); border-radius: var(--radio-pill); background: var(--papel); color: var(--tinta); font: 600 11px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; white-space: nowrap; }
.ms-tag::before { content: ""; width: 7px; height: 7px; transform: rotate(45deg); background: var(--sec, var(--tinta)); box-shadow: 0 0 0 1px var(--tinta); }
a.ms-tag:hover { background: var(--crema-hondo); }

/* ---------- Masthead ---------- */
.ms-mast { container: mast / inline-size; background: var(--crema); border-bottom: 2px solid var(--tinta); }
.ms-mast__top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--esp-4); max-width: var(--ancho-max); margin: 0 auto; padding: var(--esp-4) var(--esp-6) var(--esp-3); box-sizing: border-box; }
.ms-mast__fecha { margin: 0; font: 500 12px/16px var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--tinta-suave); }
.ms-mast__logo { justify-self: center; color: var(--tinta); text-decoration: none; }
.ms-mast__nombre { display: block; font: 400 64px/.9 var(--font-display); text-transform: uppercase; letter-spacing: .005em; }
.ms-mast__acciones { display: flex; justify-content: flex-end; align-items: center; gap: var(--esp-2); }
.ms-mast__icono { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: var(--radio-pill); background: none; color: var(--tinta); cursor: pointer; }
.ms-mast__icono:hover { background: var(--crema-hondo); }
.ms-mast__nav { border-top: 1px solid var(--tinta); }
.ms-mast__nav ul { list-style: none; display: flex; justify-content: center; gap: var(--esp-1); max-width: var(--ancho-max); margin: 0 auto; padding: 0 var(--esp-6); box-sizing: border-box; }
.ms-mast__nav a { display: flex; align-items: center; gap: var(--esp-2); height: 46px; padding: 0 var(--esp-4); color: var(--tinta); font: 600 14px/1 var(--font-texto); text-decoration: none; white-space: nowrap; }
.ms-mast__nav a::before { content: ""; width: 8px; height: 8px; transform: rotate(45deg); background: var(--sec); box-shadow: 0 0 0 1px var(--tinta); }
.ms-mast__nav a:hover { background: var(--crema-hondo); }
.ms-mast__nav a[aria-current="page"] { box-shadow: inset 0 -4px 0 var(--tinta); }
@container mast (max-width: 1199px) {
  .ms-mast__top { padding-inline: var(--esp-5); }
  .ms-mast__nombre { font-size: 52px; }
  .ms-mast__nav ul { justify-content: flex-start; overflow-x: auto; padding-inline: var(--esp-3); scrollbar-width: none; }
}
@container mast (max-width: 767px) {
  .ms-mast__top { grid-template-columns: 1fr auto; padding: var(--esp-3) var(--esp-4); }
  .ms-mast__fecha { display: none; }
  .ms-mast__logo { justify-self: start; }
  .ms-mast__nombre { font-size: 34px; }
  .ms-mast__buscar { display: none; }
  .ms-mast__nav a { height: 42px; padding: 0 var(--esp-3); font-size: 13px; }
}

/* ---------- Ticker ---------- */
.ms-ticker { display: flex; align-items: stretch; height: 44px; overflow: hidden; background: var(--tinta); color: var(--crema); }
.ms-ticker__etiqueta { flex: none; display: flex; align-items: center; margin: 0; padding: 0 var(--esp-4); background: var(--rojo); color: var(--on-rojo); font: 600 11px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.ms-ticker__pista { flex: 1; min-width: 0; display: flex; align-items: center; overflow: hidden; }
.ms-ticker__cinta { display: flex; width: max-content; }
.ms-ticker__cinta.is-animado { animation: ms-cinta 70s linear infinite; }
.ms-ticker:hover .ms-ticker__cinta { animation-play-state: paused; }
.ms-ticker__fila { display: flex; list-style: none; margin: 0; padding: 0; }
.ms-ticker__fila li { display: flex; align-items: center; gap: var(--esp-3); padding-left: var(--esp-5); font: 400 18px/1 var(--font-display); letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; }
.ms-ticker__fila .ms-icono path { fill: var(--rojo); stroke: none; }
@keyframes ms-cinta { to { transform: translateX(-50%); } }

/* ---------- SectionHeader ---------- */
.ms-sh { display: grid; gap: var(--esp-3); padding-top: var(--esp-4); border-top: 3px solid var(--tinta); }
.ms-sh__titulo { margin: 0; font: 400 clamp(2.25rem, 4.4vw, 3.5rem)/.95 var(--font-display); letter-spacing: .005em; text-transform: uppercase; text-wrap: balance; }
.ms-sh__cuenta { position: relative; top: .35em; margin-left: 6px; font: 500 14px/1 var(--font-mono); vertical-align: top; }
.ms-sh__regla { display: flex; align-items: center; gap: var(--esp-3); min-width: 0; }
.ms-sh__rotulo { min-width: 0; font: 500 12px/16px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.ms-sh__puntos { flex: 1; min-width: 24px; height: 4px; background: radial-gradient(circle, var(--tinta) 1px, transparent 1.5px) 0 50% / 8px 4px repeat-x; }
.ms-sh__enlace { display: inline-flex; align-items: center; gap: 6px; padding: var(--esp-2) 0; color: var(--tinta); font: 600 14px/1 var(--font-texto); text-decoration: none; white-space: nowrap; }
.ms-sh__enlace:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Pantallazo ---------- */
.ms-pz { display: grid; gap: var(--esp-3); min-width: 0; }
.ms-pz__marco { display: block; overflow: hidden; background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio-s); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.ms-pz__marco img { display: block; width: 100%; height: auto; aspect-ratio: 1080 / 566; object-fit: contain; background: var(--papel); }
.ms-pz__marco:hover { transform: translate(-3px, -3px); border-color: var(--tinta); box-shadow: var(--sombra-sello); }
.ms-pz__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2) var(--esp-3); color: var(--tinta-suave); font: 500 12px/16px var(--font-mono); letter-spacing: .02em; text-transform: uppercase; }
.ms-pz__num { color: var(--tinta); font-weight: 600; font-variant-numeric: tabular-nums; }
.ms-pz__acc { display: flex; gap: var(--esp-1); margin-left: auto; }
.ms-pz__acc button { display: inline-flex; align-items: center; gap: 6px; height: 40px; min-width: 40px; padding: 0 10px; border: 0; border-radius: var(--radio-pill); background: none; color: var(--tinta); font: inherit; cursor: pointer; justify-content: center; }
.ms-pz__acc button:hover { background: var(--crema-hondo); }
.ms-pz__sello { justify-self: start; margin: 0; padding: 5px 10px; background: var(--rojo); color: var(--on-rojo); font: 600 11px/16px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
/* Destacado: marcas de recorte en las cuatro esquinas, como una captura */
.ms-pz--destacado .ms-pz__recorte { --c: var(--tinta); padding: var(--esp-4); background:
  linear-gradient(var(--c), var(--c)) 0 0 / 22px 2px, linear-gradient(var(--c), var(--c)) 0 0 / 2px 22px,
  linear-gradient(var(--c), var(--c)) 100% 0 / 22px 2px, linear-gradient(var(--c), var(--c)) 100% 0 / 2px 22px,
  linear-gradient(var(--c), var(--c)) 0 100% / 22px 2px, linear-gradient(var(--c), var(--c)) 0 100% / 2px 22px,
  linear-gradient(var(--c), var(--c)) 100% 100% / 22px 2px, linear-gradient(var(--c), var(--c)) 100% 100% / 2px 22px;
  background-repeat: no-repeat; }
.ms-pz--destacado .ms-pz__meta { font-size: 13px; padding-inline: var(--esp-4); }

/* ---------- Titular (registro Diario) ---------- */
.ms-tit { display: grid; gap: var(--esp-4); padding: var(--esp-6); background: var(--papel); border-radius: var(--radio-s); }
.ms-tit__kicker { margin: 0; color: var(--diario-rojo); font: 500 24px/1.1 var(--font-diario-rotulo); text-transform: uppercase; }
.ms-tit__titular { margin: 0; max-width: 22ch; color: var(--diario-gris); font: 700 52px/1.12 var(--font-diario-titular); text-wrap: balance; }
.ms-tit__firma { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0; font: 500 24px/1 var(--font-diario-rotulo); text-transform: uppercase; }
.ms-tit__autor { color: var(--diario-rojo); }
.ms-tit__ciudad { color: var(--diario-gris-claro); }
.ms-tit__coment { display: inline-flex; align-items: center; gap: 8px; color: var(--diario-azul); font-family: var(--font-texto); font-weight: 500; }
.ms-burbuja .l { stroke: var(--papel); }
.ms-tit--m { gap: var(--esp-3); padding: var(--esp-5); }
.ms-tit--m .ms-tit__kicker, .ms-tit--m .ms-tit__firma { font-size: 18px; }
.ms-tit--m .ms-tit__titular { font-size: 32px; }
@media (max-width: 767px) {
  .ms-tit { padding: var(--esp-4); gap: var(--esp-3); }
  .ms-tit__kicker, .ms-tit__firma { font-size: 18px; }
  .ms-tit__titular { font-size: 34px; }
}

/* ---------- NoticiaCard ---------- */
.ms-nc { position: relative; display: grid; gap: var(--esp-5); padding: var(--esp-6); background: var(--fondo, var(--rojo)); color: var(--sobre, var(--tinta)); border-radius: var(--radio-l); transition: transform .15s ease; }
.ms-nc--img { grid-template-columns: minmax(0, 1fr) minmax(0, 220px); align-items: center; }
.ms-nc__cuerpo { display: grid; gap: var(--esp-3); justify-items: start; min-width: 0; }
.ms-nc__meta { display: flex; align-items: center; gap: var(--esp-2); margin: 0; font: 600 11px/16px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.ms-nc__punto { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.ms-nc__titulo { margin: 0; font: 400 clamp(1.75rem, 3vw, 2.5rem)/1 var(--font-display); text-transform: uppercase; text-wrap: balance; }
.ms-nc__titulo a { color: inherit; text-decoration: none; }
.ms-nc__titulo a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.ms-nc__titulo a:focus-visible { outline: none; box-shadow: none; }
.ms-nc:has(a:focus-visible) { outline: 3px solid var(--tinta); outline-offset: 3px; }
.ms-nc__entradilla { margin: 0; max-width: 60ch; font: 400 16px/24px var(--font-texto); }
.ms-nc .ms-btn { margin-top: var(--esp-2); border-color: currentColor; color: inherit; }
.ms-nc:hover .ms-btn { background: var(--tinta); color: var(--crema); }
.ms-nc__img img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radio-pill); }
@media (max-width: 767px) { .ms-nc { padding: var(--esp-5); } .ms-nc--img { grid-template-columns: 1fr; } .ms-nc__img { max-width: 200px; } }

/* ---------- ScrollTest ---------- */
.ms-st { display: grid; gap: var(--esp-5); padding: var(--esp-6); background: var(--amarillo); color: var(--tinta); border-radius: var(--radio-l); counter-reset: p; }
.ms-st__cab { display: flex; justify-content: space-between; align-items: baseline; gap: var(--esp-3); padding-bottom: var(--esp-3); border-bottom: 2px solid var(--tinta); }
.ms-st__marca { margin: 0; font: 400 44px/.9 var(--font-display); text-transform: uppercase; }
.ms-st__num { margin: 0; font: 600 13px/1 var(--font-mono); font-variant-numeric: tabular-nums; }
.ms-st__ficha, .ms-st__datos { display: grid; gap: 4px; }
.ms-st__ficha.con-foto { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--esp-4); }
.ms-st__foto { display: block; width: 96px; aspect-ratio: 1; object-fit: cover; object-position: 50% 30%; border: 2px solid var(--tinta); border-radius: var(--radio-m); box-shadow: var(--sombra-sello); }
.ms-post--st .ms-st__foto { width: clamp(112px, 18vw, 168px); }
.ms-st__nombre { margin: 0; font: 700 28px/1.1 var(--font-texto); letter-spacing: -.01em; }
.ms-st__cargo { margin: 0; font: 500 12px/16px var(--font-mono); letter-spacing: .04em; text-transform: uppercase; }
.ms-st__lista { display: grid; list-style: none; margin: 0; padding: 0; }
.ms-st__lista li { counter-increment: p; display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: var(--esp-3); row-gap: 2px; padding: var(--esp-3) 0; border-top: 1px dashed var(--tinta); }
.ms-st__lista li::before { content: "P." counter(p, decimal-leading-zero); grid-row: span 2; font: 600 12px/20px var(--font-mono); }
.ms-st__p { margin: 0; font: 500 15px/20px var(--font-texto); }
.ms-st__r { margin: 0; font: 400 24px/1.05 var(--font-display); text-transform: uppercase; }
.ms-st__mas { justify-self: start; display: inline-flex; align-items: center; gap: 6px; color: var(--tinta); font: 600 14px/1 var(--font-texto); text-decoration: underline; text-underline-offset: 3px; padding: var(--esp-2) 0; }
@media (max-width: 767px) { .ms-st { padding: var(--esp-5); } .ms-st__marca { font-size: 36px; } }

/* ---------- Entrada (base de JornadaTicket y AbonoCard) ---------- */
.ms-entrada { --talon: 84px; position: relative; display: flex; flex-direction: column; min-width: 0; background: var(--fondo, var(--cielo)); color: var(--tinta); border-radius: var(--radio-m);
  -webkit-mask: radial-gradient(circle var(--muesca) at 0 calc(100% - var(--talon) - 2px), #0000 98%, #000) 0 0 / 51% 100% no-repeat, radial-gradient(circle var(--muesca) at 100% calc(100% - var(--talon) - 2px), #0000 98%, #000) 100% 0 / 51% 100% no-repeat;
  mask: radial-gradient(circle var(--muesca) at 0 calc(100% - var(--talon) - 2px), #0000 98%, #000) 0 0 / 51% 100% no-repeat, radial-gradient(circle var(--muesca) at 100% calc(100% - var(--talon) - 2px), #0000 98%, #000) 100% 0 / 51% 100% no-repeat; }
.ms-entrada__perfo { flex: none; height: 4px; margin: 0 calc(var(--muesca) + 6px); background: radial-gradient(circle, var(--tinta) 1.2px, transparent 1.7px) 0 50% / 8px 4px repeat-x; }
.ms-entrada__talon { flex: none; box-sizing: border-box; height: var(--talon); display: flex; align-items: center; justify-content: space-between; gap: var(--esp-4); padding: 0 var(--esp-5); }
.ms-entrada__barras { flex: none; width: 88px; height: 34px; background: repeating-linear-gradient(90deg, var(--tinta) 0 2px, transparent 2px 4px, var(--tinta) 4px 5px, transparent 5px 7px, var(--tinta) 7px 10px, transparent 10px 11px, var(--tinta) 11px 12px, transparent 12px 15px); }

/* ---------- JornadaTicket ---------- */
.ms-jt__cab { display: flex; justify-content: space-between; padding: var(--esp-4) var(--esp-5) 0; font: 600 11px/16px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.ms-jt__marcador { display: grid; gap: 2px; padding: var(--esp-3) var(--esp-5) 0; }
.ms-jt__eq { display: flex; justify-content: space-between; align-items: baseline; gap: var(--esp-3); margin: 0; font: 400 34px/1 var(--font-display); text-transform: uppercase; }
.ms-jt__nombre { min-width: 0; overflow-wrap: anywhere; }
.ms-jt__goles { font-variant-numeric: tabular-nums; }
.ms-jt__cronica { flex: 1; margin: 0; padding: var(--esp-4) var(--esp-5) var(--esp-5); font: 500 15px/22px var(--font-texto); }
.ms-jt__datos { display: flex; gap: var(--esp-5); margin: 0; }
.ms-jt__datos dt { font: 600 10px/14px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.ms-jt__datos dd { margin: 0; font: 400 20px/1.1 var(--font-display); text-transform: uppercase; }

/* ---------- Editorial ---------- */
.ms-ed { display: grid; gap: var(--esp-5); justify-items: start; padding: var(--esp-8) var(--esp-7); background: var(--tinta); color: var(--crema); border-radius: var(--radio-l); }
.ms-ed__rotulo { display: flex; align-items: center; gap: var(--esp-2); margin: 0; font: 600 12px/16px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.ms-ed__rotulo .ms-icono path { fill: var(--rojo); stroke: none; }
.ms-ed__titulo { margin: 0; max-width: 16ch; font: 400 clamp(2.75rem, 6.5vw, 5.5rem)/.92 var(--font-display); text-transform: uppercase; text-wrap: balance; }
.ms-ed__texto { margin: 0; max-width: 58ch; font: 400 19px/29px var(--font-texto); }
.ms-ed__firma { display: flex; flex-wrap: wrap; gap: var(--esp-3); margin: 0; color: var(--crema-hondo); font: 500 12px/16px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.ms-ed__firma span { color: var(--amarillo); }
@media (max-width: 767px) { .ms-ed { padding: var(--esp-7) var(--esp-5); } .ms-ed__texto { font-size: 17px; line-height: 27px; } }

/* ---------- AbonoCard ---------- */
.ms-ab { --talon: 56px; --fondo: var(--rosa); max-width: 420px; }
.ms-ab__in { display: grid; gap: var(--esp-4); justify-items: start; padding: var(--esp-5) var(--esp-5) var(--esp-4); }
.ms-ab__cab { justify-self: stretch; display: flex; justify-content: space-between; font: 600 11px/16px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.ms-ab__titulo { margin: 0; font: 400 44px/.92 var(--font-display); text-transform: uppercase; text-wrap: balance; }
.ms-ab__precio { display: flex; align-items: baseline; gap: var(--esp-2); margin: 0; }
.ms-ab__cifra { font: 400 72px/.9 var(--font-display); font-variant-numeric: tabular-nums; }
.ms-ab__per { font: 600 12px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.ms-ab__ventajas { display: grid; gap: var(--esp-2); list-style: none; margin: 0; padding: 0; font: 500 15px/22px var(--font-texto); }
.ms-ab__ventajas li { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: var(--esp-2); }
.ms-ab__ventajas li::before { content: ""; width: 7px; height: 7px; margin-top: 8px; transform: rotate(45deg); background: var(--tinta); }
.ms-ab__letra { margin: 0; font: 400 13px/18px var(--font-texto); }
.ms-ab__talon { font: 600 11px/16px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.ms-ab__talon .ms-entrada__barras { width: 72px; height: 26px; }
.ms-ab--muro { max-width: 640px; }

/* ---------- Pie ---------- */
.ms-pie { background: var(--tinta); color: var(--crema); }
.ms-pie__in { display: grid; gap: var(--esp-6); max-width: var(--ancho-max); margin: 0 auto; padding: var(--esp-7) var(--esp-5); box-sizing: border-box; }
.ms-pie__nombre { margin: 0; font: 400 48px/.9 var(--font-display); text-transform: uppercase; }
.ms-pie ul { display: flex; flex-wrap: wrap; gap: var(--esp-2) var(--esp-5); list-style: none; margin: 0; padding: 0; }
.ms-pie a { color: var(--crema); font: 600 14px/20px var(--font-texto); text-decoration: none; }
.ms-pie a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ms-pie__aviso { margin: 0; max-width: 72ch; padding-top: var(--esp-4); border-top: 1px solid var(--tinta-suave); color: var(--crema-hondo); font: 500 12px/18px var(--font-mono); }

/* ---------- Portada (página completa, responde a su propio ancho) ---------- */
.ms-portada { container: portada / inline-size; min-width: 0; background: var(--crema); color: var(--tinta); }
.ms-portada__main { --med: var(--esp-4); display: grid; gap: var(--esp-8); max-width: var(--ancho-max); margin: 0 auto; padding: var(--esp-5) var(--med) var(--esp-8); box-sizing: border-box; }
.ms-portada__hero { display: grid; gap: var(--esp-6); }
.ms-portada__bloque, .ms-portada__col { display: grid; gap: var(--esp-5); align-content: start; min-width: 0; }
.ms-portada__duo { display: grid; gap: var(--esp-8); }
.ms-ranking { display: grid; gap: var(--esp-2); align-content: start; }
.ms-ranking__tit { margin: 0; padding-top: var(--esp-3); border-top: 3px solid var(--tinta); font: 400 28px/1 var(--font-display); text-transform: uppercase; }
.ms-ranking ol { list-style: none; margin: 0; padding: 0; counter-reset: r; }
.ms-ranking li { counter-increment: r; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--esp-3); align-items: start; padding: var(--esp-3) 0; border-bottom: 1px solid var(--linea); break-inside: avoid; }
.ms-ranking li::before { content: counter(r); color: var(--rojo); font: 400 40px/.9 var(--font-display); }
.ms-ranking a { color: var(--tinta); font: 600 16px/22px var(--font-texto); text-decoration: none; }
.ms-ranking a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ms-rejilla-pz { display: grid; grid-template-columns: 1fr; gap: var(--esp-6) var(--esp-5); }
.ms-pila { display: grid; gap: var(--esp-4); }
.ms-carril { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(270px, 84%); gap: var(--esp-4); overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(-1 * var(--med)); padding: 0 var(--med) var(--esp-2); scrollbar-width: thin; }
.ms-carril > * { scroll-snap-align: start; }
.ms-banda-abono { display: grid; gap: var(--esp-6); align-items: center; padding: var(--esp-6) var(--esp-5); background: var(--crema-hondo); border-radius: var(--radio-l); }
.ms-banda-abono__lema { margin: 0; font: 400 clamp(2.5rem, 6vw, 5rem)/.92 var(--font-display); text-transform: uppercase; text-wrap: balance; }
.ms-banda-abono__texto { margin: var(--esp-4) 0 0; max-width: 46ch; font: 400 17px/26px var(--font-texto); }
@container portada (max-width: 767px) {
  /* En móvil los pantallazos van a sangre: cada píxel cuenta para leer el titular */
  .ms-rejilla-pz .ms-pz__marco { margin-inline: calc(-1 * var(--med)); border-inline: 0; border-radius: 0; }
  .ms-portada__hero .ms-pz__recorte { margin-inline: calc(-1 * var(--med)); padding: var(--esp-3); }
  .ms-portada__hero .ms-pz__marco { border-radius: 0; }
}
@container portada (min-width: 768px) {
  .ms-portada__main { --med: var(--esp-5); gap: var(--esp-9); padding-top: var(--esp-6); }
  .ms-rejilla-pz { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ms-pila { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ms-carril { grid-auto-columns: minmax(300px, 46%); }
  .ms-ranking ol { columns: 2; column-gap: var(--esp-6); }
  .ms-banda-abono { grid-template-columns: minmax(0, 1fr) minmax(0, 380px); padding: var(--esp-7); }
}
@container portada (min-width: 1200px) {
  .ms-portada__hero { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); align-items: start; }
  .ms-ranking ol { columns: 1; }
  .ms-rejilla-pz { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ms-portada__duo { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--esp-6); }
  .ms-pila { grid-template-columns: 1fr; }
  .ms-carril { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; margin-inline: 0; padding: 0; }
  .ms-banda-abono { grid-template-columns: minmax(0, 1fr) 400px; padding: var(--esp-8); }
}

@media (prefers-reduced-motion: reduce) {
  .ms-btn, .ms-pz__marco, .ms-nc { transition: none; }
  .ms-btn:hover, .ms-pz__marco:hover { transform: none; }
  .ms-ticker__cinta.is-animado { animation: none; }
}