/* Modo oscuro fijo para todos los visitantes: no sigue la preferencia
     de sistema del navegador, una sola paleta. */
  /* Las variables de color (--paper, --ink, --gold, etc.) NO se definen acá:
     viven una sola vez en maqueta-home-imae.html. En el sitio real llegan
     heredadas desde estilos.css, que siempre carga antes que la hoja propia
     de esta página (ver layout.js, pagina()). Si esta maqueta se abre sola
     (fuera del generador, ej. publicada como Artifact), se va a ver sin
     colores: es la maqueta de home la que hay que abrir para eso. */
  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body { margin: 0; background: var(--paper); color: var(--ink); font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; line-height: 1.6; overflow-x: hidden; }
  h1, h2, .brand-word strong { font-family: Cambria, Constantia, Georgia, "Times New Roman", serif; text-wrap: balance; margin: 0; }
  .wrap { max-width: 1180px; margin: 0 auto; padding: 0 28px; }
  a { color: inherit; text-decoration: none; }
  .section-eyebrow, .eyebrow, .footer-heading { font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-deep); font-weight: 700; margin: 0 0 10px; }
  .text-link { color: var(--gold-deep); font-weight: 600; font-size: 0.92rem; }
  .text-link:hover { color: var(--gold); }

  .site-header { position: sticky; top: 0; z-index: 50; background: var(--panel); border-bottom: 1px solid var(--line); }
  .llamados-bar { background: var(--gold); color: var(--navy-deep); }
  .llamados-inner { display: flex; align-items: center; gap: 12px; padding: 9px 28px; font-size: 0.86rem; flex-wrap: wrap; }
  .llamados-tag { font-weight: 800; letter-spacing: 0.02em; }
  .llamados-detail { opacity: 0.85; }
  .llamados-link { margin-left: auto; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
  .header-inner { display: flex; align-items: center; gap: 24px; padding: 18px 28px; transition: padding 0.25s ease; }
  .site-header.is-scrolled .header-inner { padding: 12px 28px; }
  .brand { display: flex; align-items: center; gap: 14px; }
  .brand-mark { width: 46px; height: 46px; flex: none; transition: width 0.25s ease, height 0.25s ease; }
  .site-header.is-scrolled .brand-mark { width: 34px; height: 34px; }
  .brand-word { display: flex; flex-direction: column; line-height: 1.2; }
  .brand-word strong { font-size: 1.2rem; letter-spacing: 0.02em; transition: font-size 0.25s ease; }
  .brand-word em { font-style: normal; font-size: 0.7rem; color: var(--ink-soft); max-width: 260px; transition: font-size 0.25s ease, max-width 0.25s ease; }
  .site-header.is-scrolled .brand-word strong { font-size: 1.04rem; }
  .site-header.is-scrolled .brand-word em { font-size: 0.62rem; max-width: 220px; }
  .main-nav { display: flex; gap: 4px; margin-left: auto; }
  .main-nav a { padding: 8px 14px; font-size: 0.92rem; font-weight: 600; border-radius: 2px; color: var(--ink-soft); transition: font-size 0.25s ease; }
  .main-nav a:hover { color: var(--ink); }
  .main-nav a.active { color: var(--ink); box-shadow: inset 0 -2px var(--gold); }
  .site-header.is-scrolled .main-nav a { font-size: 0.85rem; }
  .nav-toggle { display: none; flex-direction: column; gap: 4px; background: none; border: 0; padding: 8px; cursor: pointer; margin-left: auto; }
  .nav-toggle span { width: 22px; height: 2px; background: var(--ink); display: block; }

  .breadcrumb { border-bottom: 1px solid var(--line); }
  .breadcrumb-inner { display: flex; gap: 8px; align-items: center; padding: 14px 28px; font-size: 0.82rem; color: var(--ink-soft); }
  .breadcrumb-inner a:hover { color: var(--gold-deep); }
  .breadcrumb-inner span[aria-current] { color: var(--ink); font-weight: 600; }

  .noticia-hero { position: relative; width: 100%; min-width: 100%; max-width: 100%; min-height: 46vh; overflow: hidden; isolation: isolate; box-sizing: border-box; }
  /* Fotos "contain" (panorámicas o chicas, ver noticias.js heroBanner()): el
     alto real llega inline por foto vía "height: clamp(piso, %vw, techo)"
     (heroBanner()), no la propiedad aspect-ratio: se probó con aspect-ratio +
     max-height compitiendo entre sí, y en pantallas bajas (ej. 1366x768) el
     resultado real deformaba la caja, dejando franjas vacías a los costados
     de la foto en vez de arriba/abajo ("background-size: contain" ya no
     encajaba con la forma real de la caja). height:clamp() con vw fija el
     alto proporcional al ancho de la página directamente, sin esa pelea.
     min-height acá es piso propio para el caso sin JS/foto (nunca debería
     pasar, pero por las dudas). width/min-width/max-width al 100%: incluso
     con esto, se vio un caso real donde el navegador angostaba la caja por
     debajo del contenedor a pesar de "width: 100%" solo. */
  .noticia-hero--contain { min-height: 180px; width: 100%; min-width: 100%; max-width: 100%; box-sizing: border-box; }
  .noticia-hero-media {
    position: absolute; inset: 0;
    background-size: cover; background-position: center 30%;
  }
  .noticia-hero-scrim { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10,12,16,0.92) 0%, rgba(10,12,16,0.35) 60%, rgba(10,12,16,0.05) 100%); }
  .noticia-hero-content { position: absolute; left: 0; right: 0; bottom: 0; color: #f3f1ea; padding: 32px 28px 24px; }
  .noticia-hero-content h1 { max-width: 1080px; }
  .noticia-hero .eyebrow { color: var(--gold-bright); }
  .noticia-hero h1 { font-size: clamp(1.35rem, 3.6vw, 2.6rem); color: #fff; line-height: 1.22; margin: 6px 0 0; }
  /* Franja propia para la fecha, aparte del overlay categoría+título sobre la
     foto: mismo fondo sólido que antes quedaba como espacio de sobra sin usar
     debajo de la foto, ahora con un propósito real en vez de verse como un
     hueco. */
  .noticia-hero-date { background: var(--navy-deep); }
  .noticia-hero-date .wrap { padding: 8px 28px; }
  .noticia-hero-date time { color: #d8d4c8; font-size: 0.92rem; font-variant-numeric: tabular-nums; }

  .n-section { padding: 32px 0 80px; }
  .n-wrap { }
  .n-body { max-width: 1040px; display: flex; flex-direction: column; gap: 16px; margin-bottom: 56px; }
  .n-body p { margin: 0; color: var(--ink-soft); }
  .n-gallery-head { margin-bottom: 24px; }
  .n-gallery-head h2 { font-size: 1.5rem; }

  .n-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px; }
  .n-thumb { position: relative; aspect-ratio: 4/3; border: 0; padding: 0; cursor: pointer; overflow: hidden; }
  .n-thumb-media { position: absolute; inset: 0; display: block; transition: transform 0.3s ease; }
  .n-thumb:hover .n-thumb-media { transform: scale(1.06); }
  .n-thumb-media--1 { background: linear-gradient(140deg, #2a3140, #171b22); }
  .n-thumb-media--2 { background: linear-gradient(140deg, #33291f, #191510); }
  .n-thumb-media--3 { background: linear-gradient(140deg, #232c26, #12160f); }
  .n-thumb-media--4 { background: linear-gradient(140deg, #2c2333, #150f18); }
  .n-thumb-media::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle at 65% 30%, rgba(214,172,102,0.28), transparent 55%); }
  .n-gallery-count { margin: 16px 0 0; font-size: 0.82rem; color: var(--ink-soft); }

  .n-video-head { margin: 56px 0 24px; }
  .n-video-head h2 { font-size: 1.5rem; }
  .n-video-main { position: relative; aspect-ratio: 16/9; overflow: hidden; margin-bottom: 4px; }
  .n-video-play-btn { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: none; border: 0; padding: 0; cursor: pointer; }
  .n-video-play-icon { width: 76px; height: 76px; border-radius: 50%; background: rgba(10,12,16,0.55); border: 2px solid rgba(255,255,255,0.85); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; padding-left: 5px; transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease; }
  .n-video-play-btn:hover .n-video-play-icon { background: var(--gold); border-color: var(--gold); color: var(--navy-deep); transform: scale(1.06); }
  .n-video-list { display: flex; gap: 4px; overflow-x: auto; }
  .n-video-thumb { position: relative; flex: 0 0 200px; aspect-ratio: 16/9; border: 0; padding: 0; cursor: pointer; overflow: hidden; }
  .n-video-thumb.is-active { box-shadow: inset 0 0 0 2px var(--gold); }
  .n-video-thumb-media { position: absolute; inset: 0; display: block; }
  .n-video-thumb-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1rem; background: linear-gradient(0deg, rgba(0,0,0,0.4), transparent 55%); }
  .n-video-thumb-label { position: absolute; left: 8px; right: 8px; bottom: 6px; font-size: 0.72rem; font-weight: 600; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.7); }

  .eyebrow-link { display: inline-block; }
  .eyebrow-link:hover { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }

  .n-related { padding: 0 0 76px; }
  .n-related-panel { border: 1px solid var(--line); background: var(--panel); }
  .n-related-row { display: flex; align-items: center; gap: 20px; padding: 14px 20px; }
  .n-related-row + .n-related-row { border-top: 1px solid var(--line); }
  .n-related-label { flex: none; font-size: 0.76rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); font-weight: 700; padding-right: 20px; border-right: 1px solid var(--line); }
  .n-marquee { flex: 1; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
  .n-marquee-track { display: flex; width: max-content; animation: n-marquee 24s linear infinite; }
  .n-marquee:hover .n-marquee-track, .n-marquee:focus-within .n-marquee-track { animation-play-state: paused; }
  .n-marquee-track a { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; font-size: 0.88rem; font-weight: 600; margin-right: 44px; }
  .n-marquee-track a:hover { color: var(--gold-deep); }
  .n-marquee-track time { font-size: 0.76rem; font-weight: 400; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
  @keyframes n-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

  .lightbox { position: fixed; inset: 0; background: rgba(8,10,13,0.96); display: none; align-items: center; justify-content: center; z-index: 100; }
  .lightbox.open { display: flex; }
  .lightbox-media { width: min(84vw, 1100px); aspect-ratio: 16/10; position: relative; box-shadow: var(--shadow); }
  .lightbox-media-fill--1 { background: linear-gradient(140deg, #2a3140, #171b22); }
  .lightbox-media-fill--2 { background: linear-gradient(140deg, #33291f, #191510); }
  .lightbox-media-fill--3 { background: linear-gradient(140deg, #232c26, #12160f); }
  .lightbox-media-fill--4 { background: linear-gradient(140deg, #2c2333, #150f18); }
  .lightbox-media::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle at 65% 30%, rgba(214,172,102,0.3), transparent 55%); }
  .lightbox-close { position: absolute; top: 24px; right: 28px; background: none; border: 0; color: #f3f1ea; font-size: 1.6rem; cursor: pointer; line-height: 1; }
  .lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); background: none; border: 0; color: #f3f1ea; font-size: 2rem; cursor: pointer; padding: 12px; opacity: 0.8; }
  .lightbox-nav:hover { opacity: 1; }
  .lightbox-prev { left: 12px; }
  .lightbox-next { right: 12px; }
  .lightbox-count { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); color: #d8d4c8; font-size: 0.85rem; font-variant-numeric: tabular-nums; margin: 0; }

  .site-footer { background: var(--navy-deep); color: #cfd3d6; padding-top: 60px; }
  .footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.1fr; gap: 40px; padding-bottom: 44px; border-bottom: 1px solid rgba(255,255,255,0.1); }
  .footer-col { display: flex; flex-direction: column; gap: 9px; font-size: 0.9rem; }
  .footer-col a { color: #cfd3d6; }
  .footer-col a:hover { color: var(--gold-bright); }
  .footer-col p { margin: 0; color: #9099a1; }
  .footer-heading { color: var(--gold-bright); }
  .footer-col--brand p { color: #cfd3d6; font-family: Cambria, Georgia, serif; font-size: 1rem; margin-top: 14px; }
  .map-placeholder { position: relative; height: 130px; background: #1b212b; border: 1px solid rgba(255,255,255,0.12); overflow: hidden; }
  .map-placeholder iframe { width: 100%; height: 100%; border: 0; filter: grayscale(0.3) invert(0.92) contrast(0.9); }
  .footer-bottom { padding: 20px 28px 26px; font-size: 0.78rem; color: #7a828a; }

  @media (max-width: 860px) {
    .main-nav { display: none; }
    .nav-toggle { display: flex; }
    .n-related-label { display: none; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    /* El título completo de la noticia como "página actual" del breadcrumb es
       redundante en mobile: el mismo texto aparece de nuevo, grande, en el
       h1 apenas abajo. Se recorta a una sola línea en vez de repetirlo entero. */
    .breadcrumb-inner { padding: 12px 28px; flex-wrap: nowrap; }
    .breadcrumb-inner span[aria-current] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; }
    /* En mobile el título superpuesto sobre la foto no tiene lugar para
       respirar (título largo + foto chica = tapa todo). Se pasa al patrón de
       noticia convencional: foto arriba, texto abajo en flujo normal, en vez
       de superpuesto. */
    /* height: clamp(...) va inline por foto (heroBanner() en noticias.js,
       para las fotos "contain") y un estilo inline le gana a cualquier regla
       de acá aunque sea más específica: sin este !important, la altura de la
       foto en mobile seguía viniendo de ese cálculo en vez de los 220px de
       abajo, aplastándola casi a la nada. */
    .noticia-hero, .noticia-hero--contain { display: block; min-height: 0; height: auto !important; max-height: none; overflow: visible; }
    .noticia-hero-media { position: static; width: 100%; height: 220px; }
    .noticia-hero-scrim { display: none; }
    .noticia-hero-content { position: static; background: var(--navy-deep); padding: 20px 28px 24px; }
  }
  @media (max-width: 520px) {
    .footer-grid { grid-template-columns: 1fr; }
    .lightbox-nav { font-size: 1.5rem; padding: 8px; }
  }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .n-thumb-media { transition: none; } .n-marquee-track { animation: none; } .n-marquee { overflow-x: auto; } }
  .logo-real { background-image: url("/img/maqueta-noticia-1.png"); background-size: contain; background-repeat: no-repeat; background-position: center; }
  .noticia-hero-media { background-image: url("/img/maqueta-noticia-2.jpg"); }