/* MarcaScroll — estilos propios del tema de Ghost: páginas, artículo, cards del editor y piezas de Ghost.
   Los componentes vienen de componentes.css; aquí solo lo que el design system no cubre. */

html { scroll-padding-top: var(--esp-5); }
body { min-height: 100vh; display: flex; flex-direction: column; }
.ms-portada { flex: 1; }

.ms-saltar { position: absolute; left: var(--esp-4); top: -60px; z-index: 10; padding: var(--esp-2) var(--esp-4); background: var(--tinta); color: var(--crema); font: 600 14px/1.4 var(--font-texto); border-radius: var(--radio-pill); }
.ms-saltar:focus { top: var(--esp-2); }
.ms-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ms-vacio { margin: 0; padding: var(--esp-6); border: 2px dashed var(--linea); border-radius: var(--radio-l); color: var(--tinta-suave); font: 400 16px/24px var(--font-texto); }

/* Cabecera y cinta */
.ms-mast__img { display: block; max-height: 64px; width: auto; }
@container mast (max-width: 767px) { .ms-mast__img { max-height: 40px; } }
.ms-ticker a { color: inherit; text-decoration: none; }
.ms-ticker a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Pantallazo sin imagen: se ve el titular, nunca un hueco */
.ms-pz__sin { display: flex; align-items: center; aspect-ratio: 1080 / 566; padding: var(--esp-5); box-sizing: border-box; color: var(--diario-gris); font: 700 28px/1.15 var(--font-diario-titular); }
.ms-pz__acc button[data-copiado] { background: var(--tinta); color: var(--crema); }
div.ms-pz__marco:hover { transform: none; box-shadow: none; border-color: var(--linea); }

/* Enlaces de titulares dentro de componentes */
.ms-ed__titulo a, .ms-st__nombre a, .ms-jornada__titulo a { color: inherit; text-decoration: none; }
.ms-ed__titulo a:hover, .ms-st__nombre a:hover, .ms-jornada__titulo a:hover { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; }
.ms-ed .ms-btn { margin-top: var(--esp-2); }

/* Scroll Test: el contenido del editor (H3 = pregunta, párrafo = respuesta) */
.ms-st__contenido { counter-reset: p; }
.ms-st__contenido > h2, .ms-st__contenido > h3 { counter-increment: p; position: relative; margin: 0; padding: var(--esp-3) 0 0 56px; border-top: 1px dashed var(--tinta); font: 500 15px/20px var(--font-texto); }
.ms-st__contenido > h2::before, .ms-st__contenido > h3::before { content: "P." counter(p, decimal-leading-zero); position: absolute; left: 0; top: var(--esp-3); font: 600 12px/20px var(--font-mono); }
.ms-st__contenido > p { margin: 2px 0 var(--esp-3) 56px; font: 500 22px/1.25 Oswald, var(--font-display); }
/* Párrafos antes de la primera pregunta = presentación del personaje; cita = la "síntesis" final */
.ms-st__contenido > p:not(h2 + p, h3 + p) { max-width: 65ch; margin: 0 0 var(--esp-4); font: 400 18px/29px var(--font-texto); text-transform: none; }
.ms-st__contenido > blockquote { margin: var(--esp-5) 0 0; padding: var(--esp-2) 0 var(--esp-2) var(--esp-5); border-left: 4px solid var(--rojo); font: italic 400 17px/1.55 var(--font-texto); }
/* Una imagen justo antes de la cita = la foto de quien la firma, en círculo */
.ms-st__contenido > figure.kg-image-card:has(+ blockquote) { margin: var(--esp-6) 0 calc(-1 * var(--esp-3)); }
.ms-st__contenido > figure.kg-image-card:has(+ blockquote) img { display: block; width: 112px; height: 112px; object-fit: cover; border: 2px solid var(--tinta); border-radius: 50%; }
.ms-st__contenido > figure.kg-image-card:has(+ blockquote) figcaption { display: none; }
.ms-st__contenido > :not(h2, h3, p, blockquote, figure.kg-image-card:has(+ blockquote)) { display: none; }
.ms-st__contenido.is-resumen > p:not(h2 + p, h3 + p), .ms-st__contenido.is-resumen > blockquote, .ms-st__contenido.is-resumen > figure { display: none; }
.ms-st__contenido.is-resumen > h3:nth-of-type(n+5), .ms-st__contenido.is-resumen > h3:nth-of-type(n+5) ~ * { display: none; }
.ms-rejilla-st { display: grid; gap: var(--esp-5); }

/* Jornada: el contenido son tarjetas HTML de partido (snippet "Partido") */
.ms-carril > :not(.ms-jt) { display: none; }
.ms-jornada__titulo { margin: 0; font: 400 32px/1 var(--font-display); text-transform: uppercase; }
.ms-jornada { display: grid; gap: var(--esp-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); margin-top: var(--esp-5); }
.ms-jornada > :not(.ms-jt) { grid-column: 1 / -1; max-width: 65ch; margin: 0; font: 400 18px/29px var(--font-texto); }

/* Rejillas de listados */
.ms-rejilla-nc, .ms-rejilla-mixta { display: grid; gap: var(--esp-5); grid-template-columns: 1fr; align-items: start; }
.ms-rejilla-nc > .ms-nc:nth-child(3n+1), .ms-pila > .ms-nc:nth-child(3n+1) { --fondo: var(--rojo); --sobre: var(--on-rojo); }
.ms-rejilla-nc > .ms-nc:nth-child(3n+2), .ms-pila > .ms-nc:nth-child(3n+2) { --fondo: var(--rosa); }
.ms-rejilla-nc > .ms-nc:nth-child(3n), .ms-pila > .ms-nc:nth-child(3n) { --fondo: var(--cielo); }
.ms-rejilla-mixta > .ms-nc { --fondo: var(--crema-hondo); }
.ms-pila-ed { display: grid; gap: var(--esp-5); }
@container portada (min-width: 768px) {
  .ms-rejilla-nc, .ms-rejilla-mixta, .ms-rejilla-st { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container portada (min-width: 1200px) {
  .ms-rejilla-nc, .ms-rejilla-mixta, .ms-rejilla-st { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Paginación */
.ms-paginacion { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--esp-4); padding-top: var(--esp-5); border-top: 1px solid var(--linea); }
.ms-paginacion__num { font: 500 12px/16px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-suave); }

/* Artículo */
.ms-post { display: grid; gap: var(--esp-6); min-width: 0; }
.ms-post--noticia .ms-tit, .ms-post--pagina > .ms-sh { max-width: 1100px; }
.ms-post--pz { max-width: 960px; width: 100%; margin: 0 auto; }
.ms-post--st { max-width: 720px; width: 100%; margin: 0 auto; }
.ms-post--st .ms-st__nombre { font-size: clamp(2rem, 4vw, 2.75rem); }
.ms-entradilla { margin: 0; max-width: 65ch; font: 500 20px/30px var(--font-texto); }
.ms-post__img { margin: 0; }
.ms-post__img img { display: block; width: 100%; height: auto; border-radius: var(--radio-l); }
.ms-post__img figcaption, .gh-content figcaption { margin-top: var(--esp-2); color: var(--tinta-suave); font: 500 12px/18px var(--font-mono); }
.ms-tit__coment { text-decoration: none; }

/* Cuerpo de texto que escribe el editor de Ghost */
.ms-cuerpo { --ancho: 680px; display: grid; grid-template-columns: [full-start] minmax(0, 1fr) [wide-start] minmax(0, 160px) [main-start] min(var(--ancho), 100%) [main-end] minmax(0, 160px) [wide-end] minmax(0, 1fr) [full-end]; row-gap: var(--esp-5); font: 400 18px/29px var(--font-texto); color: var(--tinta); }
.ms-cuerpo > * { grid-column: main; margin: 0; min-width: 0; }
.ms-cuerpo > .kg-width-wide { grid-column: wide; }
.ms-cuerpo > .kg-width-full { grid-column: full; }
.ms-cuerpo > .kg-width-full img { border-radius: 0; }
.ms-cuerpo h2 { margin-top: var(--esp-5); font: 400 clamp(1.75rem, 3vw, 2.25rem)/1 var(--font-display); text-transform: uppercase; text-wrap: balance; }
.ms-cuerpo h3 { margin-top: var(--esp-3); font: 700 22px/1.25 var(--font-texto); }
.ms-cuerpo a { color: var(--rojo); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.ms-cuerpo a:hover { color: var(--tinta); }
.ms-cuerpo strong { font-weight: 700; }
.ms-cuerpo blockquote { padding: var(--esp-2) 0 var(--esp-2) var(--esp-5); border-left: 4px solid var(--rojo); font: 400 26px/1.15 var(--font-display); text-transform: uppercase; }
.ms-cuerpo blockquote.kg-blockquote-alt { padding: 0; border: 0; text-align: center; font-size: 34px; }
.ms-cuerpo ul, .ms-cuerpo ol { padding-left: 1.3em; }
.ms-cuerpo li + li { margin-top: var(--esp-2); }
.ms-cuerpo hr { width: 100%; height: 4px; border: 0; background: radial-gradient(circle, var(--tinta) 1px, transparent 1.5px) 0 50% / 8px 4px repeat-x; }
.ms-cuerpo figure { margin: 0; }
.ms-cuerpo img { max-width: 100%; height: auto; border-radius: var(--radio-s); }
.ms-cuerpo .kg-image-card img { display: block; margin: 0 auto; }
.ms-cuerpo pre { overflow-x: auto; padding: var(--esp-4); background: var(--tinta); color: var(--crema); border-radius: var(--radio-s); font: 400 14px/1.5 var(--font-mono); }
.ms-cuerpo code { font-family: var(--font-mono); font-size: .9em; }
.ms-cuerpo .kg-callout-card { border-radius: var(--radio-l); }
.ms-cuerpo .kg-bookmark-card a { color: var(--tinta); text-decoration: none; }

/* Comentarios y muro */
.ms-comentarios { max-width: 680px; width: 100%; margin: 0 auto; }
.gh-post-upgrade-cta { display: none; }
.ms-post .ms-ab--muro { justify-self: center; width: 100%; }
.ms-ab__anual { margin: -8px 0 0; font: 600 12px/16px var(--font-mono); letter-spacing: .04em; text-transform: uppercase; }
.ms-ab__entrar { color: var(--tinta); font: 600 14px/1 var(--font-texto); text-decoration: underline; text-underline-offset: 3px; }
.ms-banda-abono--pagina .ms-banda-abono__lema { font-size: clamp(2.75rem, 7vw, 6rem); }

/* Pie: enlaces secundarios de Ghost */
.ms-pie .nav { display: flex; flex-wrap: wrap; gap: var(--esp-2) var(--esp-5); list-style: none; margin: 0; padding: 0; }
.ms-pie .nav a { color: var(--crema-hondo); font-weight: 500; }

/* Error */
.ms-error { flex: 1; display: grid; gap: var(--esp-5); align-content: center; justify-items: start; max-width: 900px; margin: 0 auto; padding: var(--esp-8) max(16px, env(safe-area-inset-left, 0px)); }
.ms-error__codigo { margin: 0; color: var(--rojo); font: 400 clamp(6rem, 20vw, 12rem)/.8 var(--font-display); }
.ms-error__titulo { margin: 0; font: 400 clamp(2rem, 5vw, 3.5rem)/.95 var(--font-display); text-transform: uppercase; text-wrap: balance; }

/* Filtros del archivo de pantallazos */
.ms-filtros { display: grid; gap: var(--esp-4); padding: var(--esp-5); background: var(--crema-hondo); border-radius: var(--radio-l); }
.ms-filtros__grupo { display: grid; gap: var(--esp-2); min-width: 0; }
.ms-filtros__rotulo { margin: 0; font: 600 11px/16px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.ms-filtros ul { display: flex; flex-wrap: wrap; gap: var(--esp-2); list-style: none; margin: 0; padding: 0; }
.ms-filtro { white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; border: 1.5px solid var(--tinta); border-radius: var(--radio-pill); background: var(--papel); color: var(--tinta); font: 600 13px/1 var(--font-texto); text-decoration: none; }
.ms-filtro:hover { background: var(--crema); }
.ms-filtro[aria-current="page"] { background: var(--tinta); color: var(--crema); }
.ms-filtro--serie { background: var(--amarillo); }
.ms-filtro__n { font: 500 11px/1 var(--font-mono); opacity: .75; }
.ms-filtros__mas summary { cursor: pointer; width: max-content; color: var(--tinta); font: 600 13px/1.4 var(--font-texto); text-decoration: underline; text-underline-offset: 3px; }
.ms-filtros__mas[open] summary { margin-bottom: var(--esp-2); }
.ms-filtros__mas:not(:has(li)) { display: none; }
@container portada (max-width: 767px) {
  /* En móvil cada grupo es una tira deslizable para no ocupar media pantalla */
  .ms-filtros { padding: var(--esp-4); margin-inline: calc(-1 * var(--med)); border-radius: 0; }
  .ms-filtros__grupo > ul { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .ms-filtro { flex: none; }
}
.ms-filtros__mas-grupos > summary { cursor: pointer; width: fit-content; max-width: 100%; padding: var(--esp-2) var(--esp-4); border: 1.5px solid var(--tinta); border-radius: var(--radio-pill); background: var(--crema); font: 600 13px/1.4 var(--font-texto); }
.ms-filtros__mas-grupos[open] > summary { margin-bottom: var(--esp-4); background: var(--tinta); color: var(--crema); }
.ms-filtros__grupos { display: grid; gap: var(--esp-4); }