/* Página de noticia: diseño de revista web. Hero con foto, columna de lectura centrada y tarjetas. */
.na-hero { position: relative; color: #fff; background: linear-gradient(160deg, #0a1628 0%, #0d2b5e 60%, #1565c0 100%); padding: 120px 0 56px; overflow: hidden; }
.na-hero.con-foto { background-size: cover; background-position: center; }
.na-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(7,20,40,.96) 0%, rgba(7,20,40,.55) 55%, rgba(7,20,40,.35) 100%); }
.na-hero .na-contenedor { position: relative; z-index: 1; }
.na-contenedor { max-width: 760px; margin: 0 auto; padding: 0 20px; }
.na-miga { font-size: 13px; color: rgba(255,255,255,.7); margin-bottom: 18px; font-family: 'Open Sans', sans-serif; }
.na-miga a { color: rgba(255,255,255,.85); text-decoration: none; }
.na-pill { display: inline-block; background: #4fc3f7; color: #0a1628; font: 700 12px/1 'Montserrat', sans-serif; letter-spacing: .08em; text-transform: uppercase; padding: 7px 12px; border-radius: 999px; margin-bottom: 16px; }
.na-hero h1 { font: 800 clamp(1.9rem, 4.6vw, 3rem)/1.15 'Montserrat', sans-serif; margin: 0 0 16px; overflow-wrap: anywhere; }
.na-bajada { font: 400 clamp(1.02rem, 2vw, 1.2rem)/1.6 'Open Sans', sans-serif; color: rgba(255,255,255,.88); margin: 0 0 24px; }
.na-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font: 500 14px 'Open Sans', sans-serif; color: rgba(255,255,255,.78); }
.na-avatar { width: 40px; height: 40px; border-radius: 50%; background: #4fc3f7; color: #0a1628; display: grid; place-items: center; font: 800 16px 'Montserrat', sans-serif; flex: none; }

.na-articulo { background: #fff; padding: 44px 0 20px; }
.na-cuerpo { font: 400 1.07rem/1.8 'Open Sans', sans-serif; color: #1e293b; overflow-wrap: anywhere; }
.na-cuerpo > * + * { margin-top: 1.1em; }
.na-cuerpo p { margin: 0; }
.na-cuerpo h2, .na-cuerpo h3, .na-cuerpo h4 { font: 700 1.35rem/1.3 'Montserrat', sans-serif; color: #0d2b5e; margin-top: 1.8em; }
.na-cuerpo h2 { font-size: 1.6rem; }
.na-cuerpo strong, .na-cuerpo b { color: #0a1628; }
.na-cuerpo a { color: #1565c0; font-weight: 600; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.na-cuerpo ul, .na-cuerpo ol { padding-left: 1.3em; margin: 0; }
.na-cuerpo li { margin-bottom: .4em; }
.na-cuerpo blockquote { margin: 0; background: #eaf6ff; border-left: 6px solid #4fc3f7; border-radius: 12px; padding: 20px 24px; font: 600 1.2rem/1.5 'Montserrat', sans-serif; color: #0d2b5e; }
.na-cuerpo hr { border: 0; height: 1px; background: #dbe4ef; margin: 2em 0; }
.na-cuerpo figure { margin: 0; }
.na-cuerpo figure img { width: 100%; height: auto; display: block; border-radius: 16px; box-shadow: 0 10px 30px rgba(13,43,94,.12); }
.na-cuerpo figcaption { font-size: 14px; color: #64748b; text-align: center; margin-top: 10px; line-height: 1.5; }
.na-cuerpo .video-embed iframe, .na-cuerpo .video-archivo video { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: 16px; background: #000; display: block; }
.na-cuerpo .audio-archivo { background: linear-gradient(135deg, #0d2b5e, #1565c0); border-radius: 16px; padding: 20px; }
.na-cuerpo .audio-archivo audio { width: 100%; display: block; }
.na-cuerpo .audio-archivo figcaption { color: #e0f2fe; font-weight: 700; margin-top: 12px; }

.na-compartir { margin-top: 40px; padding-top: 24px; border-top: 1px solid #e2e8f0; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font: 700 14px 'Montserrat', sans-serif; color: #0d2b5e; }
.na-compartir a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; color: #fff; text-decoration: none; font-size: 14px; }
.na-compartir .fb { background: #1877f2; } .na-compartir .wa { background: #25d366; } .na-compartir .x { background: #0a1628; }
.na-autor { margin-top: 28px; background: #f4f8fc; border-radius: 16px; padding: 20px; display: flex; gap: 14px; align-items: center; }
.na-autor strong { font: 700 15px 'Montserrat', sans-serif; color: #0d2b5e; display: block; }
.na-autor span { font-size: 14px; color: #475569; }
.na-volver { display: inline-block; margin-top: 24px; font: 700 14px 'Montserrat', sans-serif; color: #0d2b5e; text-decoration: none; min-height: 44px; line-height: 44px; }

.na-relacionadas { background: #f4f8fc; padding: 56px 0 64px; }
.na-relacionadas h2 { font: 800 1.4rem 'Montserrat', sans-serif; color: #0d2b5e; margin: 0 0 22px; }
.na-tarjetas { max-width: 1040px; margin: 0 auto; padding: 0 20px; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 22px; }
.na-tarjeta { background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 6px 20px rgba(13,43,94,.08); text-decoration: none; color: inherit; display: flex; flex-direction: column; }
.na-tarjeta .na-tarjeta-img { aspect-ratio: 16 / 9; background: linear-gradient(135deg, #0d2b5e, #1565c0); }
.na-tarjeta .na-tarjeta-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.na-tarjeta .na-tarjeta-txt { padding: 16px 18px 20px; }
.na-tarjeta .na-tcat { font: 700 11px 'Montserrat', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #1565c0; }
.na-tarjeta h3 { font: 700 1.02rem/1.35 'Montserrat', sans-serif; color: #0a1628; margin: 6px 0 8px; }
.na-tarjeta p { font-size: 14px; color: #475569; margin: 0; line-height: 1.5; }

@media (max-width: 600px) {
  .na-hero { padding: 96px 0 40px; }
  .na-articulo { padding-top: 30px; }
  .na-cuerpo { font-size: 1.02rem; }
  .na-cuerpo blockquote { font-size: 1.05rem; padding: 16px 18px; }
}