/* 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, h3, .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; white-space: nowrap; }
  .text-link:hover { color: var(--gold); }

  .btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; font-weight: 700; font-size: 0.92rem; border: 1.5px solid var(--line); cursor: pointer; background: none; color: var(--ink); }
  .btn-ghost:hover { border-color: var(--gold-deep); color: var(--gold-deep); }

  .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; }

  .hub-hero { position: relative; min-height: 32vh; overflow: hidden; isolation: isolate; }
  .hub-hero-media { position: absolute; inset: -10% 0 -10% 0; background: radial-gradient(ellipse at 70% 20%, rgba(214,172,102,0.3), transparent 55%), linear-gradient(155deg, #232c3a 0%, #141922 55%, #0b0e13 100%); }
  .hub-hero-scrim { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10,12,16,0.85) 0%, rgba(10,12,16,0.25) 65%, rgba(10,12,16,0.05) 100%); }
  .hub-hero-content { position: absolute; left: 0; right: 0; bottom: 0; color: #f3f1ea; padding: 40px 28px 36px; }
  .hub-hero .eyebrow { color: var(--gold-bright); }
  .hub-hero h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); color: #fff; line-height: 1.1; margin: 4px 0 12px; }
  .hub-hero-lead { max-width: 620px; color: #d8d4c8; font-size: 1rem; margin: 0; }

  .hub-section { padding: 44px 0 88px; }

  .hub-filters { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; padding-bottom: 20px; border-bottom: 1px solid var(--line); margin-bottom: 20px; }
  .hub-filter-chips { display: flex; flex-wrap: wrap; gap: 8px; }
  .hub-chip { border: 1.5px solid var(--line); background: var(--panel); color: var(--ink-soft); font-size: 0.86rem; font-weight: 600; padding: 8px 16px; border-radius: 999px; cursor: pointer; transition: border-color 0.15s, color 0.15s, background 0.15s; }
  .hub-chip:hover { border-color: var(--gold-deep); color: var(--gold-deep); }
  .hub-chip.is-active { background: var(--gold-deep); border-color: var(--gold-deep); color: var(--panel); }
  .hub-selects { display: flex; gap: 20px; flex-wrap: wrap; }
  .hub-select-wrap { display: flex; align-items: center; gap: 8px; font-size: 0.86rem; color: var(--ink-soft); font-weight: 600; }
  .hub-select-wrap select { font: inherit; color: var(--ink); background: var(--panel); border: 1.5px solid var(--line); padding: 8px 12px; cursor: pointer; }

  .hub-count { margin: 0 0 20px; font-size: 0.84rem; color: var(--ink-soft); }

  .hub-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
  .noticia-card { background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow); display: flex; flex-direction: column; transition: box-shadow 0.15s, transform 0.15s; }
  .noticia-card:hover { box-shadow: 0 12px 30px rgba(20,24,20,0.14); transform: translateY(-2px); }
  .noticia-card:hover h3 { color: var(--gold-deep); }
  .noticia-media { aspect-ratio: 16/10; background: linear-gradient(140deg, #2a3140, #171b22); position: relative; }
  .noticia-media::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle at 70% 30%, rgba(214,172,102,0.3), transparent 60%); }
  .noticia-media--2 { background: linear-gradient(140deg, #33291f, #191510); }
  .noticia-media--3 { background: linear-gradient(140deg, #232c26, #12160f); }
  .noticia-media--4 { background: linear-gradient(140deg, #2c2333, #150f18); }
  .noticia-body { padding: 22px; display: flex; flex-direction: column; gap: 10px; }
  .noticia-meta { display: flex; gap: 10px; align-items: center; margin: 0; font-size: 0.76rem; }
  .noticia-meta span { color: var(--gold-deep); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
  .noticia-meta time { color: var(--ink-soft); font-variant-numeric: tabular-nums; }
  .noticia-body h3 { font-size: 1.1rem; line-height: 1.3; }
  .noticia-body p { margin: 0; color: var(--ink-soft); font-size: 0.9rem; }

  .hub-empty { text-align: center; padding: 40px 0; color: var(--ink-soft); }

  .hub-more { display: flex; justify-content: center; margin-top: 44px; }

  .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: 980px) {
    .hub-grid { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 860px) {
    .main-nav { display: none; }
    .nav-toggle { display: flex; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 640px) {
    .hub-grid { grid-template-columns: 1fr; }
    .hub-filters { flex-direction: column; align-items: flex-start; }
  }
  @media (max-width: 520px) {
    .footer-grid { grid-template-columns: 1fr; }
  }
  .logo-real { background-image: url("/img/maqueta-hub-noticias-1.png"); background-size: contain; background-repeat: no-repeat; background-position: center; }