/* MarcaScroll — A fondo: scrolls desarrollados.
   Bloque rojo con texto blanco, como el Scroll Test en amarillo. Parodia de la web de diario de hace 15 años:
   texto justificado en Times, anuncios que se montan encima, "Últimas noticias" de clickbait y banners.
   Las tarjetas HTML del contenido (snippets en ghost-theme/snippets/af-*.html) las coloca tema.js. */
.ms-post--af { max-width: 1040px; width: 100%; margin: 0 auto; }
.ms-af { display: grid; gap: var(--esp-5); padding: var(--esp-6); background: var(--rojo); color: #fff; border-radius: var(--radio-l); }
.ms-af__cab { display: flex; justify-content: space-between; align-items: baseline; gap: var(--esp-3); padding-bottom: var(--esp-3); border-bottom: 2px solid #fff; }
.ms-af__marca { margin: 0; font: 400 44px/.9 var(--font-display); text-transform: uppercase; }
.ms-af__fecha { margin: 0; font: 600 13px/1 var(--font-mono); }
.ms-af__escena { position: relative; }

/* El scroll de cabecera: la caja gris del pantallazo */
.ms-afs { display: grid; background: #e6e6eb; color: #141414; box-shadow: 0 1px 0 #c4c4cc; }
.ms-afs.con-img { grid-template-columns: minmax(0, 1fr) clamp(110px, 34%, 230px); }
.ms-afs__txt { display: grid; align-content: space-between; gap: var(--esp-3); padding: var(--esp-4) var(--esp-5); }
.ms-afs__ante { margin: 0; color: #ef4778; font: 800 20px/1 var(--font-texto); letter-spacing: -.02em; text-transform: uppercase; }
.ms-afs__titular { margin: 0; font: 700 clamp(22px, 2.6vw, 30px)/1.12 var(--font-diario-titular); color: #141414; }
.ms-afs__titular a { color: inherit; text-decoration: none; }
.ms-afs__titular a:hover { text-decoration: underline; }
.ms-afs__firma { margin: 0; color: #8b90b5; font: 500 17px/1.1 var(--font-diario-rotulo); text-transform: uppercase; }
.ms-afs__firma :is(b, strong) { color: #ef4778; font-weight: 500; }
/* El número de comentarios va en cursiva en el pie de la imagen y sale con su bocadillo */
.ms-afs__firma :is(em, i) { font-style: normal; font-weight: 600; color: #1767b3; white-space: nowrap; }
.ms-afs__firma :is(em, i)::before { content: ""; display: inline-block; width: 1.3em; height: .9em; margin: 0 .3em 0 .5em; vertical-align: -.05em; background: #1767b3; clip-path: polygon(0 0, 100% 0, 100% 78%, 34% 78%, 12% 100%, 14% 78%, 0 78%); }
.ms-afs__img { display: block; width: 100%; height: 100%; aspect-ratio: 1; box-sizing: border-box; padding: var(--esp-3) var(--esp-3) var(--esp-3) 0; object-fit: cover; object-position: 50% 20%; }
.ms-af__escena > .ms-afs { max-width: 640px; }

/* Anuncio superpuesto (snippets af-anuncio-*): se monta encima del scroll */
.ms-af-pop { position: relative; float: right; width: 260px; box-sizing: border-box; margin: 22px 0 var(--esp-4) var(--esp-5); padding: var(--esp-4) var(--esp-4) 38px; background: #fff; color: #333; border: 1px solid #c6c6c6; box-shadow: 0 2px 0 #b3b3b3, 7px 9px 0 rgba(0, 0, 0, .32); font: 400 15px/1.35 Verdana, Geneva, sans-serif; text-align: left; }
.ms-af-pop::before { content: "▷"; position: absolute; top: 3px; right: 6px; color: #19a0e6; font: 12px/1 Arial, sans-serif; }
.ms-af-pop::after { content: "◁×"; position: absolute; right: 10px; bottom: 9px; padding: 3px 5px; border-radius: 4px; background: #c4c4c4; color: #fff; font: 700 11px/1 Arial, sans-serif; }
.ms-af-pop__cerrar { position: absolute; top: -22px; right: -1px; padding: 4px 7px 3px; border: 1px solid #c6c6c6; border-bottom: 0; background: #fff; color: #333; font: 600 10px/1 Arial, sans-serif; letter-spacing: .03em; cursor: pointer; }
.ms-af-pop__cerrar::before { content: "▷ "; color: #19a0e6; }
.ms-af-pop__tit { margin: 0 0 var(--esp-2); color: #fbe1e1; font: 400 34px/1 var(--font-display); white-space: nowrap; -webkit-text-stroke: 1.5px #2a2a2a; paint-order: stroke fill; text-transform: uppercase; }
.ms-af-pop p { margin: 0; }
.ms-af-pop img { display: block; width: 100%; height: auto; }
/* Anuncio de imagen: la imagen ya trae sus iconos */
.ms-af-pop.con-img { padding: 4px; }
.ms-af-pop.con-img::before, .ms-af-pop.con-img::after { content: none; }
/* Montado sobre la esquina de abajo a la derecha del scroll (que mide como mucho 640px) */
.ms-af__escena > .ms-af-pop { position: absolute; z-index: 2; left: min(540px, calc(100% - 270px)); top: 42%; float: none; margin: 0; transform: rotate(1.2deg); }
/* Al cerrarlo vuelve a salir, más torcido y en otro sitio */
.ms-af__escena > .ms-af-pop.is-vuelve { left: min(380px, calc(100% - 290px)); top: 18%; transform: rotate(-3deg); }
.ms-af__escena > .ms-af-pop[hidden] { display: none; }

/* Cuerpo: texto a la izquierda, "Últimas noticias" y la cita a la derecha */
.ms-af__cuerpo { display: grid; gap: var(--esp-6); }
/* La foto + cita queda abajo del todo, a la altura del banner */
.ms-af__lado { display: grid; gap: var(--esp-6); align-content: space-between; }
.ms-af__lado:empty { display: none; }
.ms-af__texto > p { max-width: 62ch; margin: 0 0 1.1em; font: 400 20px/1.42 Georgia, "Times New Roman", serif; text-align: justify; }
/* Primer párrafo todo en negrita = firma ("RAMIRO CARRASCO - MADRID") */
.ms-af__texto > p:first-of-type:has(> strong:only-child) { font: 600 16px/1.2 var(--font-diario-rotulo); letter-spacing: .02em; text-align: left; text-transform: uppercase; }
.ms-af__texto > p a { color: #fff; }

/* Comentarios de lectores (snippet af-comentarios) */
.ms-af-coment { display: grid; gap: var(--esp-4); max-width: 62ch; margin: var(--esp-6) 0; padding: var(--esp-5); background: #ececf1; color: #7a7a7a; }
.ms-af-coment p { position: relative; margin: 0; padding-left: 52px; font: 400 17px/1.35 Georgia, "Times New Roman", serif; }
.ms-af-coment p::before { content: ""; position: absolute; left: 0; top: 2px; width: 38px; height: 34px; background: #0f5fa6; clip-path: polygon(0 0, 100% 0, 100% 72%, 30% 72%, 4% 100%, 6% 72%, 0 72%); }
.ms-af-coment strong { display: block; color: #0f5fa6; font: 800 18px/1.3 var(--font-texto); }

/* Banner: una imagen suelta en el texto */
.ms-af__texto > figure.kg-image-card:not(:has(+ blockquote)) { max-width: 62ch; margin: var(--esp-6) 0; }
.ms-af__texto > figure.kg-image-card:not(:has(+ blockquote))::before { content: "Publicidad"; display: block; margin-bottom: 4px; font: 500 10px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; opacity: .75; }
.ms-af__texto figure img { display: block; width: 100%; height: auto; }
.ms-af__texto figcaption { color: #fff; opacity: .8; }

/* Últimas noticias (snippet af-ultimas) */
.ms-af-ultimas { display: grid; }
.ms-af-ultimas__tit { margin: 0 0 var(--esp-3); font: 600 24px/1 var(--font-diario-rotulo); text-transform: uppercase; }
.ms-af-ultimas__tit::before { content: "/ "; color: var(--amarillo); }
.ms-af-ultimas__tit::after { content: " /"; color: var(--amarillo); }
.ms-af-ultimas__item { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: var(--esp-3); align-items: center; margin: 0; padding: var(--esp-3) 0; border-top: 1px solid rgba(255, 255, 255, .35); font: 600 18px/1.2 var(--font-diario-rotulo); }
.ms-af-ultimas__item img { display: block; width: 80px; height: 80px; object-fit: cover; }

/* Foto + cita final (imagen seguida de cita): "La previsión de Niño", "Webó valora"… La negrita es el rótulo */
.ms-af-sentencia { position: relative; display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: var(--esp-3); align-items: end; padding-top: var(--esp-9); }
.ms-af-sentencia figure { margin: 0; }
.ms-af-sentencia img { display: block; width: 140px; height: 140px; object-fit: cover; object-position: 60% 25%; border: 2px solid #fff; border-radius: 50%; }
.ms-af-sentencia figcaption { display: none; }
.ms-af-sentencia blockquote { margin: 0; padding: 0; border: 0; font: 600 24px/1.15 var(--font-diario-rotulo); }
.ms-af-sentencia blockquote strong { position: absolute; z-index: 1; top: 44px; left: -10px; width: 280px; color: #f7b500; font: 400 34px/.92 var(--font-display); -webkit-text-stroke: 1.2px var(--tinta); paint-order: stroke fill; text-transform: uppercase; transform: rotate(-14deg); transform-origin: left bottom; }

@media (min-width: 900px) {
  .ms-af__cuerpo { grid-template-columns: minmax(0, 1fr) 300px; }
  /* El anuncio cuelga del scroll: la columna derecha empieza debajo */
  .ms-af:has(.ms-af__escena > .ms-af-pop) .ms-af__lado { padding-top: 150px; }
}
/* En pantallas estrechas el anuncio solo pisa el borde de abajo del scroll, para no tapar el titular */
@media (max-width: 899px) {
  .ms-af__escena > .ms-af-pop { position: relative; left: auto; top: auto; width: 230px; margin: -32px -8px 0 auto; font-size: 13px; }
  .ms-af__escena > .ms-af-pop.is-vuelve { left: auto; top: auto; margin-right: 40px; }
  .ms-af-pop__tit { font-size: 30px; }
}
@media (max-width: 767px) {
  .ms-af { padding: var(--esp-5); }
  .ms-af__marca { font-size: 36px; }
  .ms-af__texto > p { font-size: 18px; text-align: left; }
  .ms-afs__txt { padding: var(--esp-3) var(--esp-4); }
  .ms-afs__ante { font-size: 16px; }
  .ms-afs__titular { font-size: 20px; }
  .ms-afs__firma { font-size: 14px; }
}

/* Tarjeta de A fondo en listados: el scroll y "Leer a fondo" */
/* Las tarjetas de una fila miden lo mismo: el scroll ocupa el alto sobrante, la firma va al pie y "Leer a fondo" queda alineado */
.ms-afc { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: var(--esp-2); }
.ms-afc .ms-afs__txt { align-content: start; grid-template-rows: auto auto 1fr; }
.ms-afc .ms-afs__firma { align-self: end; }
.ms-afc .ms-afs__img { height: auto; align-self: start; }
.ms-afc .ms-afs__titular { font-size: 26px; }
.ms-afc .ms-afs__ante { font-size: 17px; }
.ms-afc .ms-afs__firma { font-size: 16px; }
.ms-afc__mas { justify-self: start; display: inline-flex; align-items: center; gap: 6px; color: var(--tinta); font: 600 15px/1 var(--font-texto); text-decoration: underline; text-underline-offset: 3px; padding: var(--esp-2) 0; }
.ms-rejilla-af, .ms-pila-af { display: grid; gap: var(--esp-5); }
@container portada (min-width: 768px) { .ms-rejilla-af { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container portada (min-width: 1200px) { .ms-rejilla-af { grid-template-columns: repeat(3, minmax(0, 1fr)); } }