/* Noticias y artículos (22-oct-2026). Hoja aparte: solo se publica si hay artículos o novedades aprobados, así que sin ellos sitio.css y todas las páginas quedan como estaban.
   Usa las variables de sitio.css (día y noche). */

/* Menú con una opción más (Noticias): entre 901 y 1100 px las ocho opciones tienen que caber en una línea */
@media (min-width: 901px) and (max-width: 1100px) { .menu { gap: 14px; font-size: 14.5px; } .cabecera.fija .menu { gap: 12px; } }

/* Índice: tarjetas */
.rejilla-notas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.tarjeta-nota { position: relative; display: flex; flex-direction: column; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; color: var(--tinta); }
.tarjeta-nota.sin-foto { border-top: 4px solid var(--celeste); }
.foto-nota { aspect-ratio: 16 / 9; background: var(--suave); overflow: hidden; }
.foto-nota img { width: 100%; height: 100%; object-fit: cover; }
.cuerpo-nota { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 20px; flex: 1; }
.meta-nota { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin: 0; font-size: 13.5px; color: var(--gris); }
.tipo-nota { font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--azul); }
.titulo-nota { font-size: 20px; line-height: 1.25; }
.titulo-nota a { color: var(--azul); text-decoration: none; }
.titulo-nota a::after { content: ""; position: absolute; inset: 0; z-index: 1; }   /* el enlace del titular cubre toda la tarjeta */
.titulo-nota a:focus-visible { outline: none; }
.tarjeta-nota:has(.titulo-nota a:focus-visible) { outline: 3px solid var(--celeste); outline-offset: 3px; }
.bajada-nota { margin: 0; font-size: 15.5px; line-height: 1.5; color: var(--gris); }
.credito-nota { margin: 0; font-size: 12.5px; color: var(--gris); }
.credito-nota a { position: relative; z-index: 2; color: inherit; text-decoration: underline; }   /* por encima del enlace que cubre la tarjeta */
.leer-nota { margin-top: auto; padding-top: 8px; display: inline-flex; align-items: center; gap: 6px; font-size: 14.5px; font-weight: 500; color: var(--azul); }
.leer-nota .ico { width: 16px; height: 16px; }
@media (prefers-reduced-motion: no-preference) {
  .tarjeta-nota { transition: transform .35s var(--curva), box-shadow .35s var(--curva); }
  .tarjeta-nota .foto-nota img { transition: transform .6s var(--curva); }
}
@media (hover: hover) {
  .tarjeta-nota:hover { transform: translateY(-4px); box-shadow: var(--sombra-alzada); }
  .tarjeta-nota:hover .foto-nota img { transform: scale(1.04); }
}
@media (max-width: 1080px) { .rejilla-notas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .rejilla-notas { grid-template-columns: minmax(0, 1fr); gap: 16px; } .cuerpo-nota { padding: 16px 16px 18px; } .titulo-nota { font-size: 19px; } }

/* Artículo */
.articulo-cabeza h1 { max-width: 30ch; font-size: clamp(27px, 3.3vw, 44px); }
.articulo-cabeza .lead { max-width: 70ch; margin-bottom: 18px; }
.articulo-meta { margin: 0; font-size: 15px; color: var(--gris); }
.articulo-meta strong { color: var(--tinta); }
:root[data-tema="oscuro"] .articulo-meta strong { color: #FFFFFF; }
.articulo-seccion { padding: 44px 0 72px; }
.articulo { max-width: 760px; margin-inline: auto; }
.articulo section { padding: 0; }
.articulo-foto { margin: 0 0 32px; }
.articulo-foto img { width: auto; max-width: 100%; height: auto; border-radius: var(--radio); background: var(--suave); }   /* a su tamaño: una foto de 600 px no se agranda (usa los width y height del HTML) */
.articulo-foto figcaption { margin-top: 8px; font-size: 13.5px; color: var(--gris); }
.articulo-foto figcaption a { color: inherit; }
.articulo-cuerpo { font-size: 18px; line-height: 1.7; color: var(--tinta); overflow-wrap: break-word; }
.articulo-cuerpo p { margin: 0 0 1.15em; }
.articulo h2 { font-size: clamp(23px, 2.3vw, 29px); color: var(--azul); margin: 1.7em 0 .6em; }
.articulo-cuerpo ul { padding-left: 1.3em; margin: 0 0 1.15em; }
.articulo-cuerpo li { margin-bottom: .4em; }
.articulo-cuerpo a, .fuentes-articulo a { color: var(--azul); }
a.ref { font-size: .78em; font-weight: 700; line-height: 0; vertical-align: super; text-decoration: none; padding: 0 1px; }
a.ref:hover { text-decoration: underline; }
.articulo blockquote { margin: 1.6em 0; padding: 2px 0 2px 20px; border-left: 4px solid var(--celeste); font-size: 19px; line-height: 1.55; }
.articulo blockquote p { margin: 0 0 .5em; }
.articulo blockquote footer { font-size: 14.5px; color: var(--gris); }
.articulo blockquote footer a { color: inherit; }
.nota-honduras { margin: 2.2em 0; padding: 22px 26px; background: var(--realce); border-left: 4px solid var(--celeste); border-radius: 0 var(--radio) var(--radio) 0; font-size: 18px; line-height: 1.7; }
.nota-honduras h2 { margin-top: 0; }
.nota-honduras p:last-child { margin-bottom: 0; }
.nota-honduras a { color: var(--azul); }
.fuentes-articulo { margin-top: 2.4em; padding-top: 1.4em; border-top: 1px solid var(--linea); }
.fuentes-articulo h2 { margin-top: 0; }
.fuentes-articulo ol { padding-left: 1.7em; margin: 0; font-size: 15.5px; line-height: 1.5; }
.fuentes-articulo li { margin-bottom: .85em; padding-left: .2em; overflow-wrap: anywhere; }
.fuentes-articulo li:target { background: var(--realce); outline: 2px solid var(--celeste); outline-offset: 4px; border-radius: 4px; }
.detalle-fuente { display: block; font-size: 14px; color: var(--gris); }
.rejilla-tarjetas-marca + .rejilla-fichas { margin-top: 28px; }
.marcas-texto { margin: 20px 0 0; color: var(--gris); }
@media (max-width: 640px) {
  .articulo-seccion { padding: 28px 0 52px; }
  .articulo-cuerpo, .nota-honduras { font-size: 17px; }
  .nota-honduras { padding: 18px 18px; }
  .articulo blockquote { font-size: 18px; padding-left: 16px; }
}