/* ==========================================================================
   Noticia (/noticias/<noticia>/) — funcionamiento del blog BMW con la marca MINI
   Contenedor de 1200 px; columna de lectura de ~900 px; imágenes del cuerpo a 1100 px.
   ========================================================================== */

/* Barra de progreso de lectura, discreta, bajo la cabecera */
.progreso-lectura { position: fixed; z-index: calc(var(--z-cabecera) + 1); top: var(--alto-cabecera); left: 0; right: 0; height: 3px; pointer-events: none; }
.progreso-lectura__barra { display: block; height: 100%; background: var(--color-acento); transform: scaleX(0); transform-origin: 0 50%; }

.articulo { width: min(100% - 32px, var(--ancho-max)); margin-inline: auto; padding-block: 24px 64px; }

/* «← Volver a Noticias» */
.articulo__volver {
  display: inline-flex; align-items: center; gap: 6px; min-height: var(--tactil-min); margin-bottom: 24px;
  font-family: var(--fuente-ui); font-size: .9375rem; color: var(--color-negro); text-decoration: none;
}
.articulo__volver .icono { width: 18px; height: 18px; transition: transform var(--transicion); }
.articulo__volver:hover { text-decoration: underline; text-underline-offset: 4px; }
.articulo__volver:hover .icono { transform: translateX(-3px); }

/* Imagen principal: 4:3 (móvil) · 16:10 (tablet) · 16:7 (escritorio) */
.articulo__imagen {
  position: relative; width: 100%; aspect-ratio: 4 / 3; min-height: 220px; max-height: 320px; margin-bottom: 48px;
  overflow: hidden; background: var(--gris-fondo);
}
.articulo__imagen picture, .articulo__imagen img { position: absolute; inset: 0; width: 100%; height: 100%; }
.articulo__imagen img { object-fit: cover; }

/* Columna de lectura (~900 px) */
.articulo__cabecera, .articulo__etiquetas, .compartir, .articulo__pie { max-width: 56.25rem; margin-inline: auto; }
.articulo__cabecera { margin-bottom: 48px; }
.articulo__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0 0 16px; font-family: var(--fuente-ui); font-size: .9375rem; color: var(--color-texto-secundario); }
.articulo__titulo { margin: 0 0 20px; font-size: clamp(1.75rem, 3.6vw, 3rem); line-height: 1.08; text-transform: uppercase; overflow-wrap: break-word; }
.articulo__bajada { margin: 0; font-size: clamp(1.125rem, 1.6vw, 1.375rem); line-height: 1.5; }

/* Cuerpo */
.articulo__cuerpo { font-size: clamp(1.0625rem, .4vw + .95rem, 1.1875rem); line-height: 1.7; overflow-wrap: break-word; }
.articulo__cuerpo > :not(figure) { max-width: 56.25rem; margin-inline: auto; }
.articulo__cuerpo p { margin: 0 auto 1.25em; }
.articulo__cuerpo h2, .articulo__cuerpo h3, .articulo__cuerpo h4 { margin-top: 1.8em; margin-bottom: .6em; line-height: 1.15; }
.articulo__cuerpo h2 { font-size: 1.5em; text-transform: uppercase; }
.articulo__cuerpo h3 { font-size: 1.25em; }
.articulo__cuerpo h4 { font-size: 1.05em; }
.articulo__cuerpo a { color: var(--color-negro); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; overflow-wrap: anywhere; }
.articulo__cuerpo a:hover { text-decoration-thickness: 2px; }
.articulo__cuerpo ul, .articulo__cuerpo ol { margin-bottom: 1.25em; padding-left: 1.35em; }
.articulo__cuerpo li { margin-bottom: .45em; }
.articulo__cuerpo li::marker { color: var(--color-texto-secundario); }
.articulo__cuerpo blockquote {
  margin-top: 1.6em; margin-bottom: 1.6em; padding: 4px 0 4px 24px; border-left: 4px solid var(--color-negro);
  font-style: italic; font-size: 1.25em; line-height: 1.45;
}
.articulo__cuerpo blockquote p:last-child { margin-bottom: 0; }
.articulo__cuerpo hr { margin-top: 2.4em; margin-bottom: 2.4em; border: 0; border-top: 1px solid var(--gris-linea); }
.articulo__cuerpo strong, .articulo__cuerpo b { font-weight: var(--peso-bold); }

/* Figuras del cuerpo: 1 imagen en la columna ancha (1100 px, proporción natural); 2 en columnas 4:3 desde 992 px */
.articulo__media { display: grid; gap: 24px; max-width: 68.75rem; margin: 40px auto 64px; }
.articulo__marco { position: relative; overflow: hidden; background: var(--gris-fondo); }
.articulo__marco img { display: block; width: 100%; height: auto; }
.articulo__media--doble .articulo__marco { aspect-ratio: 4 / 3; }
.articulo__media--doble .articulo__marco picture,
.articulo__media--doble .articulo__marco img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.articulo__media figcaption { grid-column: 1 / -1; max-width: 56.25rem; font-family: var(--fuente-ui); font-size: .8125rem; color: var(--color-texto-secundario); }

/* Etiquetas (hashtags) */
.articulo__etiquetas {
  display: flex; flex-wrap: wrap; gap: 10px 16px; margin-top: 48px; padding: 32px 0 0; list-style: none;
  border-top: 1px solid var(--gris-linea); font-family: var(--fuente-ui); font-size: .9375rem;
}

/* Compartir */
.compartir { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--gris-linea); }
.compartir__titulo { margin: 0 0 12px; font-family: var(--fuente-ui); font-size: .875rem; text-transform: uppercase; }
.compartir__acciones { display: flex; flex-wrap: wrap; gap: 10px; }
.compartir__boton .icono { width: 20px; height: 20px; }
.compartir__estado { min-height: 1.5em; margin: 10px 0 0; font-family: var(--fuente-ui); font-size: .875rem; }

/* Navegación al pie */
.articulo__pie { margin-top: 32px; }
.articulo__volver--pie { margin-bottom: 0; }

/* Noticias relacionadas */
.relacionadas { padding: 56px 0 80px; border-top: 1px solid var(--gris-linea); }
.relacionadas__titulo { font-size: clamp(1.5rem, 2.4vw, 2rem); margin: 0 0 28px; }
.relacionadas__rejilla { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 28px; }

@media (min-width: 576px) {
  .articulo__imagen { aspect-ratio: 16 / 10; max-height: 420px; }
}
@media (min-width: 992px) {
  .articulo__imagen { aspect-ratio: 16 / 7; max-height: 560px; }
  .articulo__media--doble { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 991px) { .relacionadas__rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) {
  .articulo__imagen { margin-bottom: 32px; }
  .articulo__cabecera { margin-bottom: 32px; }
  .relacionadas__rejilla { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .articulo__volver:hover .icono { transform: none; }
}
@media print {
  .progreso-lectura, .compartir, .relacionadas, .articulo__volver { display: none; }
}

/* ---------- Esquinas redondeadas del original ---------- */
.articulo__imagen, .articulo__imagen img { border-radius: var(--radio-imagen); }
.articulo__marco, .articulo__marco img { border-radius: var(--radio-tarjeta); }
.articulo__imagen, .articulo__marco { overflow: hidden; }