/* ==========================================================================
   CPI · Consejo de Políticas de Infraestructura
   Sistema de diseño · cpichile.org
   Autor: Mario Bravo · 2026
   Mobile-first · WCAG 2.2 AA · CSS Grid · sin dependencias JS
   ========================================================================== */

/* ---------- 1. TOKENS ---------------------------------------------------- */
:root {
  /* Marca (muestreados del logo y piezas actuales del CPI) */
  --cpi-azul:        #1C71B8;
  --cpi-azul-600:    #17619F;
  --cpi-azul-700:    #115085;
  --cpi-navy:        #05263F;
  --cpi-navy-800:    #063A63;
  --cpi-teal:        #12A0AC;   /* acento: "Sabías qué", datos */
  --cpi-verde:       #1F9C87;   /* Cuadernos */
  --cpi-ambar:       #D97706;   /* alertas / agenda */
  --cpi-rojo:        #C2410C;

  /* Neutros */
  --n-0:   #FFFFFF;
  --n-25:  #FAFBFC;
  --n-50:  #F4F6F8;
  --n-100: #E9EDF1;
  --n-200: #D7DEE5;
  --n-300: #B9C4CE;
  --n-400: #8B99A6;
  --n-500: #63707C;
  --n-600: #48545F;
  --n-700: #333D46;
  --n-800: #1F272E;
  --n-900: #121820;

  /* Roles semánticos (light) */
  --bg:            var(--n-0);
  --bg-alt:        var(--n-50);
  --bg-inset:      var(--n-25);
  --surface:       var(--n-0);
  --border:        var(--n-200);
  --border-soft:   var(--n-100);
  --text:          var(--n-800);
  --text-muted:    var(--n-500);
  --text-invert:   var(--n-0);
  --link:          var(--cpi-azul-700);
  --accent:        var(--cpi-azul);
  --accent-contrast:#FFFFFF;
  --focus:         #FFA726;

  /* Tipografía */
  --font-titulo: "Gelasio", Georgia, "Times New Roman", serif;
  --font-texto:  "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-ui:     var(--font-texto);

  /* Escala fluida (min 360px → max 1440px) */
  --t-xs:   0.8125rem;                                   /* 13px  */
  --t-sm:   0.875rem;                                    /* 14px  */
  --t-base: 1.0625rem;                                   /* 17px  */
  --t-md:   clamp(1.125rem, 0.35vw + 1.05rem, 1.25rem);
  --t-lg:   clamp(1.25rem,  0.6vw  + 1.1rem,  1.5rem);
  --t-xl:   clamp(1.5rem,   1.1vw  + 1.2rem,  2rem);
  --t-2xl:  clamp(1.875rem, 1.9vw  + 1.35rem, 2.75rem);
  --t-3xl:  clamp(2.25rem,  3vw    + 1.5rem,  3.5rem);

  /* Espaciado (escala 4) */
  --s-1: 0.25rem; --s-2: 0.5rem;  --s-3: 0.75rem; --s-4: 1rem;
  --s-5: 1.5rem;  --s-6: 2rem;    --s-7: 2.5rem;  --s-8: 3rem;
  --s-9: 4rem;    --s-10: 5rem;   --s-11: 6rem;

  /* Layout */
  --maxw: 1240px;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --header-h: 60px;

  --radius: 6px;
  --radius-lg: 12px;
  --shadow-sm: 0 1px 2px rgba(5,38,63,.06), 0 1px 3px rgba(5,38,63,.08);
  --shadow-md: 0 4px 12px rgba(5,38,63,.08), 0 2px 4px rgba(5,38,63,.06);
  --shadow-lg: 0 12px 32px rgba(5,38,63,.12);
  --ease: cubic-bezier(.22,.61,.36,1);
}

@media (min-width: 900px) { :root { --header-h: 72px; } }

/* Modo oscuro (opcional, activable con data-theme="dark") */
:root[data-theme="dark"] {
  --bg:          var(--n-900);
  --bg-alt:      #171E26;
  --bg-inset:    #1A222B;
  --surface:     #1B232C;
  --border:      #2E3A45;
  --border-soft: #232C35;
  --text:        #E7ECF1;
  --text-muted:  #9AA7B4;
  --link:        #74B6EE;
  --accent:      #3D91D6;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.5);
  --shadow-md: 0 4px 12px rgba(0,0,0,.45);
  --shadow-lg: 0 12px 32px rgba(0,0,0,.55);
}

/* ---------- 2. RESET / BASE --------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 1rem); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-texto);
  font-size: var(--t-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, picture, video, svg { display: block; max-width: 100%; height: auto; }
/* Los enlaces de titular no se subrayan: el subrayado se reserva para los
   enlaces dentro del texto corrido, donde sí cumple una función. */
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 2px; }
.sec-head__link, .nav__link, .submenu a, .drawer a, .topbar a, .ticker__list a,
.footer a, .card__title a, .tit-item h3 a, .nota-item h3 a, .pub__t a,
.agenda-item__t a, .breadcrumb a, .logo, .tag { text-decoration: none; }
.sec-head__link:hover, .breadcrumb a:hover { color: var(--accent); }
button, input, select, textarea { font: inherit; color: inherit; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 3px;
}

h1, h2, h3, h4 { font-family: var(--font-titulo); font-weight: 700; line-height: 1.18; text-wrap: balance; }
p { text-wrap: pretty; }

.skip-link {
  position: absolute; left: var(--s-4); top: -100px; z-index: 999;
  background: var(--cpi-navy); color: #fff; padding: var(--s-3) var(--s-5);
  border-radius: 0 0 var(--radius) var(--radius); font-weight: 600;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 0; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- 3. LAYOUT ---------------------------------------------------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--ancho { max-width: 1440px; }

.seccion { padding-block: var(--s-8); }
.seccion--alt { background: var(--bg-alt); }
.seccion--tight { padding-block: var(--s-7); }
@media (min-width: 900px) { .seccion { padding-block: var(--s-9); } }

.grid { display: grid; gap: var(--s-5); }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
.grid--4 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 760px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .grid--4 { grid-template-columns: repeat(4, 1fr); } }

/* ---------- 4. CABECERA DE SECCIÓN --------------------------------------- */
.sec-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s-4); flex-wrap: wrap;
  margin-bottom: var(--s-5);
  padding-bottom: var(--s-3);
  border-bottom: 2px solid var(--cpi-azul);
}
.sec-head__t {
  font-family: var(--font-texto);
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--cpi-azul-700);
  display: flex; align-items: center; gap: var(--s-2);
}
.sec-head__t::before {
  content: ""; width: 4px; height: 1.1em; background: var(--cpi-azul); border-radius: 2px;
}
:root[data-theme="dark"] .sec-head__t { color: #7EBBEC; }
.sec-head__link { font-size: var(--t-sm); font-weight: 600; white-space: nowrap; }

/* ---------- 5. ETIQUETAS / BADGES ---------------------------------------- */
.kicker {
  display: inline-block;
  font-family: var(--font-texto);
  font-size: 0.75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--cpi-azul-700);
}
.tag {
  display: inline-flex; align-items: center; gap: .35em;
  background: var(--cpi-azul); color: #fff;
  font-size: 0.6875rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  padding: .3em .6em; border-radius: 3px; text-decoration: none;
}
.tag:hover { background: var(--cpi-azul-700); color: #fff; }
.tag--teal  { background: var(--cpi-teal); }
.tag--verde { background: var(--cpi-verde); }
.tag--navy  { background: var(--cpi-navy); }
.tag--ambar { background: var(--cpi-ambar); }
.tag--ghost { background: transparent; color: var(--cpi-azul-700); border: 1px solid var(--border); }

/* ---------- 6. BOTONES --------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 44px; padding: .6em 1.25em;
  font-family: var(--font-texto); font-size: var(--t-sm); font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; text-decoration: none;
  border: 1px solid transparent; border-radius: var(--radius); cursor: pointer;
  transition: background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.btn--pri { background: var(--cpi-azul); color: #fff; }
.btn--pri:hover { background: var(--cpi-azul-700); color: #fff; }
.btn--sec { background: transparent; color: var(--link); border-color: var(--border); }
.btn--sec:hover { border-color: var(--cpi-azul); background: rgba(28,113,184,.06); }
.btn--navy { background: var(--cpi-navy); color: #fff; }
.btn--navy:hover { background: var(--cpi-navy-800); color: #fff; }
.btn--block { width: 100%; }

/* ---------- 7. HEADER ---------------------------------------------------- */
.topbar {
  display: none;
  background: var(--cpi-navy); color: #C7D6E3;
  font-size: var(--t-xs);
}
@media (min-width: 900px) {
  .topbar { display: block; }
  .topbar__in { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: 36px; }
}
.topbar a { color: #E2ECF5; text-decoration: none; }
.topbar a:hover { color: #FFFFFF; }
.topbar__nav { display: flex; gap: var(--s-4); align-items: center; }

.header {
  position: sticky; top: 0; z-index: 100;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  transition: box-shadow .2s var(--ease);
}
.header.is-stuck { box-shadow: var(--shadow-md); }
.header__in {
  display: flex; align-items: center; gap: var(--s-4);
  min-height: var(--header-h);
}
.logo { display: flex; align-items: center; gap: .6rem; text-decoration: none; flex: 0 0 auto; }
.logo img { height: 28px; width: auto; max-width: 200px; }
@media (min-width: 420px) { .logo img { height: 32px; } }
@media (min-width: 900px) { .logo img { height: 34px; max-width: 210px; } }
@media (min-width: 1300px) {
  .logo img { height: 38px; max-width: 240px; }
  .nav { gap: var(--s-1); margin-inline-start: var(--s-5); }
  .nav__link { padding-inline: .7rem; }
}

.nav { display: none; }
@media (min-width: 1060px) {
  .nav { display: flex; align-items: center; gap: 0; margin-inline-start: var(--s-4); flex: 1 1 auto; min-width: 0; }
}
.nav__item { position: relative; }
.nav__link {
  display: inline-flex; align-items: center; gap: .3em;
  padding: .8rem .55rem; min-height: 44px;
  font-size: var(--t-sm); font-weight: 600; letter-spacing: .01em;
  color: var(--text); text-decoration: none; border-radius: var(--radius);
  white-space: nowrap;
}
.nav__link:hover, .nav__item:focus-within > .nav__link { background: var(--bg-alt); color: var(--link); }
.nav__link[aria-current="page"] { color: var(--cpi-azul-700); box-shadow: inset 0 -3px 0 var(--cpi-azul); border-radius: 0; }
.nav__caret { width: 10px; height: 10px; fill: currentColor; opacity: .6; }

.submenu {
  position: absolute; top: 100%; left: 0; min-width: 250px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: var(--s-2);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .16s var(--ease), transform .16s var(--ease), visibility .16s;
}
.nav__item:hover > .submenu, .nav__item:focus-within > .submenu { opacity: 1; visibility: visible; transform: none; }
.submenu a {
  display: block; padding: .6rem .75rem; font-size: var(--t-sm); color: var(--text);
  text-decoration: none; border-radius: 4px;
}
.submenu a:hover { background: var(--bg-alt); color: var(--link); }

.header__acciones { margin-inline-start: auto; display: flex; align-items: center; gap: var(--s-2); }
.icon-btn {
  display: inline-grid; place-items: center; width: 44px; height: 44px;
  background: transparent; border: 1px solid transparent; border-radius: var(--radius);
  cursor: pointer; color: var(--text);
}
.icon-btn:hover { background: var(--bg-alt); }
.icon-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.header__cta { display: none; }
@media (min-width: 760px) { .header__cta { display: inline-flex; } }
@media (min-width: 1060px) { .nav-toggle { display: none; } }

/* Buscador desplegable */
.buscador { display: none; border-top: 1px solid var(--border-soft); background: var(--bg-alt); }
.buscador[data-open="true"] { display: block; }
.buscador__form { display: flex; gap: var(--s-2); padding-block: var(--s-4); }
.buscador input[type="search"] {
  flex: 1; min-height: 48px; padding: 0 var(--s-4);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  font-size: var(--t-base);
}
.buscador input:focus { border-color: var(--cpi-azul); }

/* Menú móvil */
.drawer {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(5,38,63,.55); backdrop-filter: blur(2px);
  opacity: 0; visibility: hidden; transition: opacity .22s var(--ease), visibility .22s;
}
.drawer[data-open="true"] { opacity: 1; visibility: visible; }
.drawer__panel {
  position: absolute; inset-block: 0; inset-inline-end: 0;
  width: min(88vw, 380px); background: var(--surface);
  padding: var(--s-4) var(--s-5) var(--s-8);
  overflow-y: auto; transform: translateX(100%); transition: transform .26s var(--ease);
  display: flex; flex-direction: column; gap: var(--s-3);
}
.drawer[data-open="true"] .drawer__panel { transform: none; }
.drawer__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s-2); }
.drawer details { border-bottom: 1px solid var(--border-soft); }
.drawer summary {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 52px; padding-block: .5rem; cursor: pointer; list-style: none;
  font-weight: 700; font-size: var(--t-md);
}
.drawer summary::-webkit-details-marker { display: none; }
.drawer summary::after { content: "＋"; color: var(--cpi-azul); font-weight: 400; }
.drawer details[open] summary::after { content: "－"; }
.drawer details a { display: block; min-height: 44px; padding: .6rem 0 .6rem var(--s-4); color: var(--text-muted); text-decoration: none; }
.drawer details a:hover { color: var(--link); }
.drawer__solo { display: flex; align-items: center; min-height: 52px; font-weight: 700; font-size: var(--t-md); color: var(--text); text-decoration: none; border-bottom: 1px solid var(--border-soft); }

/* ---------- 8. TICKER ---------------------------------------------------- */
.ticker {
  background: var(--cpi-navy); color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.ticker__in { display: flex; align-items: stretch; gap: 0; min-height: 46px; }
.ticker__label {
  display: flex; align-items: center; gap: .5em;
  background: var(--cpi-azul); color: #fff; padding-inline: var(--s-3);
  font-size: 0.6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  white-space: nowrap; flex: 0 0 auto;
}
.ticker__label .dot { width: 7px; height: 7px; border-radius: 50%; background: #7FE3A1; animation: pulse 2s infinite; }
@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .35 } }
.ticker__viewport { flex: 1 1 auto; overflow: hidden; display: flex; align-items: center; }
.ticker__list { display: flex; gap: var(--s-6); padding-inline: var(--s-4); animation: slide 45s linear infinite; }
.ticker:hover .ticker__list, .ticker:focus-within .ticker__list { animation-play-state: paused; }
@keyframes slide { from { transform: translateX(0) } to { transform: translateX(-50%) } }
.ticker__list a { color: #fff; text-decoration: none; font-size: var(--t-sm); white-space: nowrap; }
.ticker__list a:hover { color: #BFE0FF; }
@media (prefers-reduced-motion: reduce) {
  .ticker__list { animation: none; overflow-x: auto; }
  .ticker__label .dot { animation: none; }
}

/* ---------- 9. TARJETAS (componente único, 4 variantes) ------------------ */
.card { display: flex; flex-direction: column; gap: var(--s-3); }
.card__media {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--radius); background: var(--n-100);
  aspect-ratio: 16 / 10;              /* evita CLS */
}
:root[data-theme="dark"] .card__media { background: #232C35; }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.card:hover .card__media img { transform: scale(1.04); }
.card__media > .tag { position: absolute; left: var(--s-3); bottom: var(--s-3); z-index: 2; }
.card__body { display: flex; flex-direction: column; gap: var(--s-2); }
.card__title { font-size: var(--t-md); line-height: 1.25; }
.card__title a { color: var(--text); text-decoration: none; }
.card__title a:hover { color: var(--link); }
.card__excerpt { font-size: var(--t-sm); color: var(--text-muted); line-height: 1.55; }
.card__meta {
  display: flex; align-items: center; gap: .5em; flex-wrap: wrap;
  font-size: var(--t-xs); color: var(--text-muted);
}
.card__meta .fuente { font-weight: 700; color: var(--cpi-azul-700); letter-spacing: .04em; }
:root[data-theme="dark"] .card__meta .fuente { color: #7EBBEC; }

/* variante horizontal (listas compactas) */
.card--row { flex-direction: row; align-items: flex-start; gap: var(--s-4); }
.card--row .card__media { flex: 0 0 104px; aspect-ratio: 4 / 3; }
.card--row .card__title { font-size: var(--t-base); }
@media (min-width: 640px) { .card--row .card__media { flex-basis: 132px; } }


/* Variantes de tamaño de titular de tarjeta (sustituyen a los style= sueltos) */
.card__title--sm { font-size: var(--t-base); }
.card__title--lg { font-size: var(--t-lg); }
.card--text-first { border-top: 0; padding-top: 0; }

/* variante sin foto */
.card--text { border-top: 1px solid var(--border-soft); padding-top: var(--s-4); }

/* variante overlay: SIEMPRE con degradado de protección.
   Nota: nunca se envuelve la tarjeta completa en un <a> (los anchors anidados
   son inválidos y rompen el DOM). Se usa el patrón "stretched link". */
.card--overlay { position: relative; }
.card--overlay .card__media { aspect-ratio: 4 / 3; }
.stretched::after { content: ""; position: absolute; inset: 0; z-index: 3; }
.card--overlay .card__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(5,38,63,.92) 0%, rgba(5,38,63,.62) 38%, rgba(5,38,63,0) 72%);
}
.card--overlay .card__body {
  position: absolute; inset-inline: 0; bottom: 0; z-index: 2;
  padding: var(--s-4); color: #fff;
}
.card--overlay .card__title a { color: #fff; }
.card--overlay .card__title a:hover { color: #C9E4FA; }
.card--overlay .card__meta { color: rgba(255,255,255,.82); }
.card--overlay .card__meta .fuente { color: #9CCDF5; }

/* ---------- 10. PORTADA: retícula editorial ------------------------------
   Tres zonas con líneas de separación verticales y fondos alineados.
   El truco contra los bajos desparejos: cada columna es un flex vertical y
   su último elemento (CTA) empuja con margin-top:auto.
   ------------------------------------------------------------------------- */
.portada-bar {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s-4); flex-wrap: wrap;
  padding-bottom: var(--s-3); margin-bottom: var(--s-6);
  border-bottom: 2px solid var(--cpi-navy);
}
:root[data-theme="dark"] .portada-bar { border-bottom-color: var(--border); }
.portada-bar__t {
  font-family: var(--font-titulo); font-size: var(--t-lg); font-weight: 700; letter-spacing: -.01em;
}
.portada-bar__meta { font-size: var(--t-sm); color: var(--text-muted); }

.portada {
  display: grid; gap: var(--s-6); align-items: stretch;
  grid-template-columns: minmax(0, 1fr);   /* evita que el contenido desborde en móvil */
  grid-template-areas: "a" "b" "c";
}
.p-apertura   { grid-area: a; display: flex; flex-direction: column; min-width: 0; }
.p-titulares  { grid-area: b; display: flex; flex-direction: column; min-width: 0; }
.p-destacados { grid-area: c; display: flex; flex-direction: column; min-width: 0; gap: var(--s-5); }

/* Tablet en horizontal: dos columnas reales. En vertical (≤899 px) se mantiene
   una sola columna legible, en vez de comprimir tres como hace el sitio actual. */
@media (min-width: 900px) {
  .portada { grid-template-columns: minmax(0,1.58fr) minmax(0,1fr); grid-template-areas: "a b" "c c"; }
  .p-titulares { border-left: 1px solid var(--border); padding-left: var(--s-6); }
  .p-destacados {
    border-top: 1px solid var(--border); padding-top: var(--s-6);
  }
  .p-destacados > .push { margin-top: var(--s-5); padding-top: 0; }
}
@media (min-width: 1160px) {
  .portada { grid-template-columns: minmax(0,1.8fr) minmax(0,1.02fr) minmax(0,.92fr); grid-template-areas: "a b c"; }
  .p-destacados {
    display: flex; border-top: 0; padding-top: 0;
    border-left: 1px solid var(--border); padding-left: var(--s-6);
  }
}

/* Apertura */
.hero .card__media { aspect-ratio: 16 / 9; }
.hero .card__title { font-size: clamp(1.75rem, 2.6vw, 2.5rem); line-height: 1.1; }
.hero .card__excerpt { font-size: var(--t-md); color: var(--text); }

/* Tres notas de apoyo: lista con miniatura, alturas parejas por construcción */
.notas {
  display: flex; flex-direction: column;
  margin-top: var(--s-6); border-top: 1px solid var(--border);
}
.nota-item {
  display: flex; gap: var(--s-4); align-items: flex-start;
  padding-block: var(--s-4); border-bottom: 1px solid var(--border-soft);
}
.nota-item:last-child { border-bottom: 0; padding-bottom: 0; }
.nota-item .card__media { flex: 0 0 116px; aspect-ratio: 4 / 3; }
@media (min-width: 620px) { .nota-item .card__media { flex-basis: 148px; } }
.nota-item h3 { font-size: var(--t-base); line-height: 1.3; margin-top: .15em; }
.nota-item h3 a { color: var(--text); text-decoration: none; }
.nota-item h3 a:hover { color: var(--link); }
.nota-item .card__meta { margin-top: .4em; }

/* Rail de destacados */
.dest-lista { display: flex; flex-direction: column; gap: var(--s-5); }
@media (min-width: 900px) and (max-width: 1159px) {
  .dest-lista { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); }
}
.p-destacados .card__media { aspect-ratio: 4 / 3; }
.p-destacados .card__title { font-size: var(--t-base); line-height: 1.3; }
.dest-pub { display: flex; gap: var(--s-4); align-items: flex-start; }
.dest-pub__cover {
  flex: 0 0 86px; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 3px;
  box-shadow: var(--shadow-sm); background: var(--n-100);
}
.dest-pub__cover img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- 11. TITULARES DEL DÍA (lista densa) -------------------------- */
.tit-lista { display: flex; flex-direction: column; }
.tit-item { padding-block: var(--s-4); border-bottom: 1px solid var(--border-soft); }
.tit-item:first-child { padding-top: 0; }
.tit-item h3 { font-size: 1.0625rem; line-height: 1.32; }
.tit-item h3 a { color: var(--text); text-decoration: none; }
.tit-item h3 a:hover { color: var(--link); }
.tit-item p { font-size: var(--t-sm); color: var(--text-muted); margin-top: .35em; line-height: 1.5; }
.tit-item__meta {
  display: flex; align-items: center; gap: .5em; margin-top: .5em;
  font-size: var(--t-xs); color: var(--text-muted);
}
.tit-item__meta .fuente { font-weight: 700; color: var(--cpi-azul-700); letter-spacing: .04em; }
:root[data-theme="dark"] .tit-item__meta .fuente { color: #7EBBEC; }
.tit-item__meta .hora { font-variant-numeric: tabular-nums; }

/* ---------- 12. AGENDA / ACTIVIDADES ------------------------------------- */
.tabs { display: flex; gap: var(--s-1); flex-wrap: wrap; margin-bottom: var(--s-5); }
.tab {
  min-height: 40px; padding: .5em 1em; border-radius: 999px;
  background: var(--bg-alt); border: 1px solid var(--border);
  font-size: var(--t-sm); font-weight: 600; color: var(--text-muted); cursor: pointer;
}
.tab[aria-selected="true"] { background: var(--cpi-azul); border-color: var(--cpi-azul); color: #fff; }

.agenda-item {
  display: grid; grid-template-columns: 68px 1fr; gap: var(--s-4);
  padding: var(--s-4); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius);
}
.agenda-item__fecha {
  display: grid; place-content: center; text-align: center;
  background: var(--cpi-navy); color: #fff; border-radius: var(--radius); padding: var(--s-2);
}
.agenda-item__fecha .d { font-family: var(--font-titulo); font-size: 1.6rem; line-height: 1; font-weight: 700; }
.agenda-item__fecha .m { font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; opacity: .85; }
.agenda-item__t { font-size: var(--t-base); line-height: 1.3; }
.agenda-item__t a { color: var(--text); text-decoration: none; }
.agenda-item__t a:hover { color: var(--link); }

/* ---------- 13. PUBLICACIONES (portadas) --------------------------------- */
.pubs { display: grid; gap: var(--s-5); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 700px) { .pubs { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .pubs { grid-template-columns: repeat(5, 1fr); } }
.pub__cover {
  display: block; aspect-ratio: 3 / 4; overflow: hidden;
  border-radius: var(--radius); box-shadow: var(--shadow-md); background: var(--n-100);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.pub__cover img { width: 100%; height: 100%; object-fit: cover; }
.pub:hover .pub__cover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.pub__t { font-size: var(--t-sm); line-height: 1.35; margin-top: var(--s-3); font-family: var(--font-texto); font-weight: 600; }
.pub__t a { color: var(--text); text-decoration: none; }
.pub__t a:hover { color: var(--link); }

/* ---------- 14. DATOS / CIFRAS (banda, no tarjetas) ---------------------- */
.cifras {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  background: var(--border); border-block: 1px solid var(--border);
}
@media (min-width: 820px) { .cifras { grid-template-columns: repeat(4, 1fr); } }
.cifra { background: var(--bg-alt); padding: var(--s-5) var(--s-4); }
.cifra__n {
  font-family: var(--font-titulo); font-weight: 700; line-height: 1.05;
  font-size: clamp(1.3rem, 2.3vw, 1.9rem); letter-spacing: -.01em;
  color: var(--cpi-navy); white-space: nowrap; font-variant-numeric: tabular-nums;
}
:root[data-theme="dark"] .cifra__n { color: #9CD9E1; }
.cifra__l { font-size: var(--t-sm); color: var(--text-muted); margin-top: var(--s-2); line-height: 1.45; }

/* ---------- 15. SOCIOS: carrusel de logos --------------------------------
   Dos decisiones deliberadas:
   1) Cada logo se recorta a su marca real y se escala por ÁREA óptica, no por
      altura fija. Un logotipo horizontal largo y uno compacto pesan igual en
      la página; con altura fija el primero se ve el triple de grande.
      La altura de cada archivo viaja en la variable --h del propio <img>.
   2) Con 28 socios, la cuadrícula obliga a una mancha enorme. El desfile
      continuo muestra a todos en el alto de una fila y se detiene al pasar
      el cursor o al llegar con el teclado.
   ------------------------------------------------------------------------- */
.hoja-logos {
  --logo-gap: clamp(2rem, 4vw, 3.5rem);
  --logo-escala: .8;
  background: #FFFFFF;
  border: 1px solid var(--border);
  padding: var(--s-6) 0;
}
@media (min-width: 700px) { .hoja-logos { --logo-escala: 1; } }
:root[data-theme="dark"] .hoja-logos { border-color: #2E3A45; }

.logos-grupo + .logos-grupo { margin-top: var(--s-6); padding-top: var(--s-6); border-top: 1px solid #EDF1F4; }
.logos-grupo__t {
  font-family: var(--font-texto); font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; color: #7D8B98;
  margin-bottom: var(--s-5); text-align: center;
}

.marquesina {
  position: relative; 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);
}
.marquesina__pista {
  display: flex; width: max-content;
  animation: desfile var(--dur, 60s) linear infinite;
}
.marquesina--rev .marquesina__pista { animation-direction: reverse; }
.marquesina:hover .marquesina__pista,
.marquesina:focus-within .marquesina__pista { animation-play-state: paused; }
@keyframes desfile { to { transform: translateX(-50%); } }

.marquesina__set, .logos-fila {
  display: flex; align-items: center; gap: var(--logo-gap);
  list-style: none; margin: 0; padding: 0 calc(var(--logo-gap) / 2);
}
/* Grupos con pocos socios: fila estática centrada; un desfile solo repetiría
   los mismos tres logos y se leería como un error. */
.logos-fila { flex-wrap: wrap; justify-content: center; row-gap: var(--s-5); }
.logo a {
  display: grid; place-items: center; min-height: 60px;
  transition: opacity .2s var(--ease);
}
.logo a:hover { opacity: .62; }
.logo img {
  height: calc(var(--h) * var(--logo-escala)); width: auto;
  mix-blend-mode: multiply;   /* neutraliza el fondo blanco de los archivos */
}

@media (prefers-reduced-motion: reduce) {
  .marquesina { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .marquesina__pista { animation: none; }
  .marquesina__set[aria-hidden="true"] { display: none; }
}

/* ---------- 16. NEWSLETTER ----------------------------------------------- */
.newsletter {
  background: linear-gradient(135deg, var(--cpi-navy) 0%, #0B4D80 100%);
  color: #fff; border-radius: var(--radius-lg); padding: var(--s-7) var(--s-5);
}
@media (min-width: 900px) { .newsletter { padding: var(--s-8); } }
.newsletter__grid { display: grid; gap: var(--s-5); align-items: center; }
@media (min-width: 900px) { .newsletter__grid { grid-template-columns: 1fr 1fr; gap: var(--s-8); } }
.newsletter h2 { font-size: var(--t-xl); color: #fff; }
.newsletter p { color: #C7DCEC; margin-top: var(--s-2); }
.newsletter__form { display: grid; gap: var(--s-3); grid-template-columns: 1fr; }
@media (min-width: 560px) { .newsletter__form { grid-template-columns: 1fr auto; } }
.newsletter input[type="email"] {
  min-height: 52px; padding: 0 var(--s-4); border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.1); color: #fff;
  font-size: var(--t-base);
}
.newsletter input::placeholder { color: rgba(255,255,255,.6); }
.newsletter input:focus { background: rgba(255,255,255,.18); border-color: #fff; }
.newsletter__legal { grid-column: 1 / -1; font-size: var(--t-xs); color: #A9C6DC; display: flex; gap: .5em; align-items: flex-start; }
.newsletter__legal a { color: #fff; }

/* ---------- 17. FOOTER --------------------------------------------------- */
.footer { background: var(--cpi-navy); color: #B9CCDC; margin-top: var(--s-9); }
.footer a { color: #DCE9F3; text-decoration: none; }
.footer a:hover { color: #FFFFFF; }
.footer__grid {
  display: grid; gap: var(--s-6); padding-block: var(--s-8);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--s-7); } }
.footer h3 {
  font-family: var(--font-texto); font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: #fff; margin-bottom: var(--s-4);
}
.footer ul { list-style: none; padding: 0; display: grid; gap: var(--s-2); font-size: var(--t-sm); }
.footer__logo { height: 40px; width: auto; margin-bottom: var(--s-4); }
.footer__legal {
  border-top: 1px solid rgba(255,255,255,.12); padding-block: var(--s-4);
  display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5);
  align-items: center; justify-content: space-between; font-size: var(--t-xs);
}
.social { display: flex; gap: var(--s-2); }

@media (max-width: 639px) {
  .footer__grid { text-align: center; }
  .footer__grid > * { display: flex; flex-direction: column; align-items: center; }
  .footer__logo { margin-inline: auto; }
  .footer h3 { width: 100%; }
  .footer ul { width: 100%; }
  .social { justify-content: center; }
  .footer__legal { flex-direction: column; text-align: center; gap: var(--s-3); }
  .footer__legal nav { justify-content: center; }
}
.social a {
  display: grid; place-items: center; width: 44px; height: 44px;
  border: 1px solid rgba(255,255,255,.22); border-radius: var(--radius);
}
.social a:hover { background: rgba(255,255,255,.12); }
.social svg { width: 18px; height: 18px; fill: currentColor; }

/* ---------- 18. ARTÍCULO ------------------------------------------------- */
.art-layout { display: grid; gap: var(--s-7); }
@media (min-width: 1000px) {
  .art-layout { grid-template-columns: minmax(0, 1fr) 320px; gap: var(--s-8); align-items: start; }
}
@media (min-width: 1240px) {
  .art-layout { grid-template-columns: 64px minmax(0, 1fr) 320px; }
}

.breadcrumb { font-size: var(--t-xs); color: var(--text-muted); padding-block: var(--s-4); }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4em; padding: 0; }
.breadcrumb li + li::before { content: "/"; margin-inline-end: .4em; color: var(--n-300); }

.art-head { max-width: 44rem; }
.art-head h1 { font-size: var(--t-2xl); line-height: 1.13; margin-block: var(--s-3) var(--s-4); }
.art-head__bajada {
  font-size: var(--t-md); line-height: 1.5; color: var(--text-muted);
  font-family: var(--font-texto);
}
.art-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4);
  margin-top: var(--s-5); padding-block: var(--s-3);
  border-block: 1px solid var(--border-soft);
  font-size: var(--t-sm); color: var(--text-muted);
}
.art-meta .autor { color: var(--text); font-weight: 600; }

.art-figura { margin-block: var(--s-6); }
.art-figura img { width: 100%; border-radius: var(--radius-lg); }
.art-figura figcaption { font-size: var(--t-sm); color: var(--text-muted); margin-top: var(--s-3); line-height: 1.45; }

/* Cuerpo: medida óptima 65–72 caracteres */
.art-cuerpo { max-width: 39rem; font-size: 1.125rem; line-height: 1.72; }
.art-cuerpo > * + * { margin-top: var(--s-5); }
.art-cuerpo p { color: var(--text); }
.art-cuerpo h2 { font-size: var(--t-lg); margin-top: var(--s-7); }
.art-cuerpo h3 { font-size: var(--t-md); margin-top: var(--s-6); font-family: var(--font-texto); text-transform: uppercase; letter-spacing: .05em; color: var(--cpi-azul-700); font-size: var(--t-sm); }
.art-cuerpo a { color: var(--link); }
.art-cuerpo ul, .art-cuerpo ol { padding-inline-start: 1.4em; display: grid; gap: var(--s-2); }
.art-cuerpo blockquote {
  border-inline-start: 4px solid var(--cpi-azul); padding-inline-start: var(--s-5);
  font-family: var(--font-titulo); font-size: var(--t-lg); line-height: 1.35; color: var(--cpi-navy);
}
:root[data-theme="dark"] .art-cuerpo blockquote { color: #CFE3F3; }
.art-cuerpo blockquote cite { display: block; font-family: var(--font-texto); font-size: var(--t-sm); font-style: normal; color: var(--text-muted); margin-top: var(--s-3); }

.destacado-box {
  background: var(--bg-alt); border: 1px solid var(--border);
  border-inline-start: 4px solid var(--cpi-teal);
  border-radius: var(--radius); padding: var(--s-5);
}
.destacado-box h2 {
  font-family: var(--font-texto); font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--cpi-teal); margin: 0 0 var(--s-3);
}
.destacado-box ul { margin: 0; padding-inline-start: 1.2em; font-size: var(--t-base); display: grid; gap: var(--s-2); }

/* Compartir: barra fija abajo en móvil, columna sticky en desktop */
.compartir { display: flex; gap: var(--s-2); }
.compartir a, .compartir button {
  display: grid; place-items: center; width: 44px; height: 44px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); color: var(--text-muted); cursor: pointer;
}
.compartir a:hover, .compartir button:hover { border-color: var(--cpi-azul); color: var(--cpi-azul); }
.compartir svg { width: 18px; height: 18px; fill: currentColor; }
.compartir--rail { display: none; }
@media (min-width: 1240px) {
  .compartir--rail { display: flex; flex-direction: column; position: sticky; top: calc(var(--header-h) + 24px); }
}
.compartir--movil {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 90;
  display: flex; justify-content: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-4) calc(var(--s-3) + env(safe-area-inset-bottom));
  background: var(--surface); border-top: 1px solid var(--border); box-shadow: 0 -2px 12px rgba(5,38,63,.08);
}
@media (min-width: 1240px) { .compartir--movil { display: none; } }

/* Barra de progreso de lectura */
.progreso {
  position: fixed; inset-inline: 0; top: 0; height: 3px; z-index: 150;
  background: var(--cpi-teal); transform-origin: 0 50%; transform: scaleX(0);
}

.art-aside { display: grid; gap: var(--s-6); }
@media (min-width: 1000px) { .art-aside { position: sticky; top: calc(var(--header-h) + 24px); } }

.art-tags { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-6); }
.art-fuente { font-size: var(--t-sm); color: var(--text-muted); font-style: italic; margin-top: var(--s-6); padding-top: var(--s-4); border-top: 1px solid var(--border-soft); }

.autor-box {
  display: flex; gap: var(--s-4); align-items: flex-start;
  background: var(--bg-alt); border-radius: var(--radius-lg); padding: var(--s-5); margin-top: var(--s-6);
}
.autor-box img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.autor-box h3 { font-family: var(--font-texto); font-size: var(--t-base); margin-bottom: var(--s-1); }
.autor-box p { font-size: var(--t-sm); color: var(--text-muted); }

.prev-next { display: grid; gap: var(--s-4); margin-top: var(--s-7); }
@media (min-width: 700px) { .prev-next { grid-template-columns: 1fr 1fr; } }
.prev-next a {
  display: block; padding: var(--s-5); border: 1px solid var(--border);
  border-radius: var(--radius); text-decoration: none; background: var(--surface);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.prev-next a:hover { border-color: var(--cpi-azul); box-shadow: var(--shadow-sm); }
.prev-next .k { font-size: var(--t-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.prev-next .t { font-family: var(--font-titulo); font-weight: 700; color: var(--text); margin-top: var(--s-2); display: block; line-height: 1.3; }
.prev-next .sig { text-align: right; }

/* ---------- 19. AJUSTES DE MÓVIL ----------------------------------------
   Los bloques secundarios pasan de "columna infinita" a carrusel con
   scroll-snap. Es lo que más recorta el largo de la portada en móvil.
   ------------------------------------------------------------------------- */
@media (max-width: 719px) {
  .scroller-m {
    display: flex !important;
    grid-template-columns: none !important;
    gap: var(--s-4);
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x mandatory;
    margin-inline: calc(var(--gutter) * -1);
    padding: 0 var(--gutter) var(--s-3);
    scrollbar-width: thin;
  }
  .scroller-m > * { flex: 0 0 78%; scroll-snap-align: start; }
  .scroller-m--sm > * { flex-basis: 46%; }

  .seccion { padding-block: var(--s-7); }

  /* Bajadas recortadas: en móvil el resumen no compite con el titular */
  .hero .card__excerpt { -webkit-line-clamp: 4; }
  .tit-item p { -webkit-line-clamp: 2; }
  .hero .card__excerpt, .tit-item p {
    display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;
  }
  .hero .card__title { font-size: clamp(1.75rem, 5vw, 2rem); }
}

/* ---------- 20. UTILIDADES DE COMPOSICIÓN --------------------------------- */
/* Recorte de líneas: iguala alturas sin recurrir a alturas fijas */
.clamp-2, .clamp-3, .clamp-4 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.clamp-2 { -webkit-line-clamp: 2; }
.clamp-3 { -webkit-line-clamp: 3; }
.clamp-4 { -webkit-line-clamp: 4; }

/* Columna que empuja su último elemento al pie: mata los bajos desparejos */
.col-eq { display: flex; flex-direction: column; min-width: 0; }
.push { margin-top: auto; padding-top: var(--s-5); }

/* Dos columnas con línea divisoria */
.duo { display: grid; gap: var(--s-6); align-items: stretch; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 820px) {
  .duo { grid-template-columns: 1fr 1fr; gap: clamp(2rem, 4vw, 3rem); }
  .duo > * + * { border-left: 1px solid var(--border); padding-left: clamp(2rem, 4vw, 3rem); }
}

/* ---------- 21. UTILIDADES ----------------------------------------------- */
.stack-4 > * + * { margin-top: var(--s-4); }
.stack-5 > * + * { margin-top: var(--s-5); }
.text-center { text-align: center; }
.muted { color: var(--text-muted); }
.divider { border: 0; border-top: 1px solid var(--border); margin-block: var(--s-7); }
.aviso {
  background: #FFF7E6; border: 1px dashed var(--cpi-ambar); color: #7A4A02;
  padding: var(--s-3) var(--s-4); border-radius: var(--radius); font-size: var(--t-sm);
}
:root[data-theme="dark"] .aviso { background: #2A2214; color: #F0C77E; }

/* ── Socios: grilla agrupada ──────────────────────────────────────────
   Sustituye al carrusel. Con el carrusel cada grupo mostraba solo los
   logos que cabían en el viewport, así que las filas quedaban desiguales
   (Asociaciones gremiales mostraba 3 y Empresas 7). La grilla muestra los
   35 socios siempre, y las filas se reparten solas.                     */

.logos-grid{
  list-style:none; margin:0; padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(11rem, 1fr));
  gap:.25rem;
  align-items:stretch;
}

.hoja-logos .logos-grid .logo{
  display:grid; place-items:center;
  min-height:6.4rem;
  padding:.9rem .8rem;
  border-radius:4px;
  transition:background-color .18s ease;
}
.hoja-logos .logos-grid .logo:hover{ background:rgba(0,0,0,.03); }

/* escalado por area optica: un logotipo horizontal largo y uno compacto
   ocupan el mismo peso visual, en vez de igualar solo la altura */
.hoja-logos .logos-grid .logo img{
  display:block;
  max-width:100%;
  max-height:3.4rem;
  width:auto; height:auto;
  object-fit:contain;
  transition:transform .18s ease;
}
.hoja-logos .logos-grid .logo:hover img{ transform:scale(1.06); }

.logos-grupo + .logos-grupo{ margin-top:1.75rem; padding-top:1.5rem; border-top:1px solid var(--linea, #e3e8ee); }

.logos-grupo__n{
  display:inline-block; margin-left:.5rem;
  font-size:.7em; font-weight:600; letter-spacing:.04em;
  color:var(--gris-medio, #6b7785);
  font-variant-numeric:tabular-nums;
}

@media (max-width:40rem){
  .logos-grid{ grid-template-columns:repeat(auto-fill, minmax(7rem, 1fr)); }
  .hoja-logos .logos-grid .logo{ min-height:4.5rem; padding:.7rem .5rem; }
  .hoja-logos .logos-grid .logo img{ max-height:2.1rem; }
}

@media (prefers-reduced-motion: reduce){
  .logos-grid .logo, .hoja-logos .logos-grid .logo img{ transition:none; }
}


/* ═══ Plantillas de archivo, página y utilidades ═══════════════════════ */

.pag-titulo{ font-family:var(--font-titulo); font-size:clamp(1.9rem,5vw,2.9rem); line-height:1.1; margin:0 0 .5rem; letter-spacing:-.01em; }
.pag-bajada{ font-size:1.0625rem; color:var(--text-muted); max-width:44rem; margin:0 0 .6rem; }
.pag-conteo{ font-size:.8125rem; letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted); margin:0; font-variant-numeric:tabular-nums; }
.pag-conteo strong{ color:var(--cpi-navy); }

.breadcrumb__sep{ color:var(--text-muted); margin:0 .1rem; }

.filtros{ border-bottom:1px solid var(--border); }
.filtros__lista{ list-style:none; margin:0; padding:0; display:flex; gap:.35rem; overflow-x:auto; scrollbar-width:none; }
.filtros__lista::-webkit-scrollbar{ display:none; }
.filtro{ display:inline-block; padding:.85rem .9rem; font-size:.875rem; font-weight:500; color:var(--text-muted); text-decoration:none; white-space:nowrap; border-bottom:2px solid transparent; }
.filtro:hover{ color:var(--cpi-navy); }
.filtro--on{ color:var(--cpi-navy); border-bottom-color:var(--link); font-weight:600; }

.paginacion{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:2.5rem; padding-top:1.5rem; border-top:1px solid var(--border); flex-wrap:wrap; }
.paginacion__n{ list-style:none; display:flex; gap:.25rem; margin:0; padding:0; align-items:center; }
.paginacion__p{ display:grid; place-items:center; min-width:2.25rem; height:2.25rem; padding:0 .5rem; border-radius:3px; font-size:.9375rem; text-decoration:none; color:var(--text-muted); font-variant-numeric:tabular-nums; }
.paginacion__p:hover{ background:var(--bg-alt); color:var(--cpi-navy); }
.paginacion__p--on{ background:var(--cpi-navy); color:var(--surface); font-weight:600; }
.paginacion__gap{ color:var(--text-muted); padding:0 .25rem; }
.paginacion__b{ font-size:.9375rem; font-weight:500; text-decoration:none; color:var(--cpi-navy); }
.paginacion__b--off{ color:var(--text-muted); cursor:default; }

.prosa{ max-width:42rem; font-size:1.0625rem; line-height:1.75; }
.prosa h2{ font-family:var(--font-titulo); font-size:1.5rem; margin:2.2rem 0 .7rem; letter-spacing:-.005em; }
.prosa h3{ font-size:1.125rem; margin:1.8rem 0 .5rem; }
.prosa p{ margin:0 0 1.1rem; }
.prosa ul,.prosa ol{ margin:0 0 1.2rem; padding-left:1.3rem; }
.prosa li{ margin-bottom:.45rem; }
.prosa blockquote{ margin:1.6rem 0; padding:.2rem 0 .2rem 1.2rem; border-left:3px solid var(--link); font-size:1.125rem; color:var(--text-muted); }
.prosa figure{ margin:1.8rem 0; }
.prosa figcaption{ font-size:.8125rem; color:var(--text-muted); margin-top:.5rem; }

/* fichas de personas (Consejeros) */
.personas{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(13rem,1fr)); gap:1.6rem 1.2rem; }
.persona__foto{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:50%; background:var(--bg-alt); max-width:7.5rem; }
.persona__n{ font-size:.9375rem; font-weight:600; margin:.7rem 0 .15rem; line-height:1.3; }
.persona__c{ font-size:.8125rem; color:var(--text-muted); line-height:1.4; margin:0; }

/* documentos descargables (Cuadernos, Ediciones, Memorias) */
.docs{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(12rem,1fr)); gap:1.5rem 1.2rem; }
.doc__portada{ display:block; width:100%; aspect-ratio:3/4; object-fit:cover; background:var(--bg-alt); border:1px solid var(--border); border-radius:2px; }
.doc__n{ font-size:.75rem; letter-spacing:.07em; text-transform:uppercase; color:var(--link); font-weight:600; margin:.7rem 0 .2rem; }
.doc__t{ font-size:.9375rem; font-weight:600; line-height:1.35; margin:0 0 .35rem; }
.doc__t a{ color:inherit; text-decoration:none; }
.doc__t a:hover{ color:var(--link); }
.doc__m{ font-size:.75rem; color:var(--text-muted); margin:0; font-variant-numeric:tabular-nums; }

/* titulares del dia */
.titulares{ list-style:none; margin:0; padding:0; border-top:1px solid var(--border); }
.titular{ display:grid; grid-template-columns:5.5rem 1fr; gap:1rem; padding:.9rem 0; border-bottom:1px solid var(--border); align-items:baseline; }
.titular__f{ font-size:.75rem; letter-spacing:.05em; text-transform:uppercase; color:var(--text-muted); font-variant-numeric:tabular-nums; }
.titular__t{ font-size:1rem; line-height:1.4; margin:0; }
.titular__t a{ color:inherit; text-decoration:none; }
.titular__t a:hover{ color:var(--link); text-decoration:underline; }
.titular__o{ font-size:.75rem; color:var(--text-muted); margin:.25rem 0 0; }

/* buscador */
.busca{ display:flex; gap:.5rem; max-width:34rem; margin:0 0 .8rem; }
.busca__i{ flex:1; padding:.7rem .9rem; font:inherit; font-size:1rem; border:1px solid var(--border); border-radius:3px; background:var(--surface); color:var(--text); }
.busca__i:focus{ outline:2px solid var(--link); outline-offset:1px; border-color:transparent; }

/* estado vacio / 404 */
.vacio{ text-align:center; padding:4rem 1rem; max-width:34rem; margin:0 auto; }
.vacio__c{ font-family:var(--font-titulo); font-size:clamp(3.5rem,14vw,6rem); line-height:1; color:var(--link); margin:0 0 .4rem; letter-spacing:-.03em; }
.vacio__t{ font-family:var(--font-titulo); font-size:1.5rem; margin:0 0 .7rem; }
.vacio__d{ color:var(--text-muted); margin:0 0 1.6rem; }

@media (max-width:40rem){
  .titular{ grid-template-columns:1fr; gap:.15rem; }
  .personas{ grid-template-columns:repeat(auto-fill,minmax(9rem,1fr)); }
  .docs{ grid-template-columns:repeat(auto-fill,minmax(9rem,1fr)); }
}

/* ═══ Debes leer · Sabías qué · Síguenos ═══════════════════════════════ */

.lecturas{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(17rem,1fr)); gap:1.6rem 2rem; counter-reset:l; }
.lectura{ display:grid; grid-template-columns:2.1rem 1fr; gap:.9rem; align-items:start; }
.lectura__n{ font-family:var(--font-titulo); font-size:1.6rem; line-height:1; color:var(--link); opacity:.4; font-variant-numeric:tabular-nums; padding-top:.1rem; }
.lectura__k{ font-size:.7rem; letter-spacing:.09em; text-transform:uppercase; color:var(--text-muted); font-weight:600; margin:0 0 .25rem; }
.lectura__t{ font-size:1rem; line-height:1.35; margin:0 0 .3rem; font-weight:600; }
.lectura__t a{ color:inherit; text-decoration:none; }
.lectura__t a:hover{ color:var(--link); }
.lectura__f{ font-size:.75rem; color:var(--text-muted); margin:0; }

.curiosidades{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); gap:.8rem; }
.curiosidad__a{ display:grid; grid-template-columns:2.5rem 1fr; gap:.9rem; align-items:center; height:100%; padding:1rem 1.1rem; border:1px solid var(--border); border-radius:4px; text-decoration:none; color:inherit; background:var(--surface); transition:border-color .18s ease, transform .18s ease; }
.curiosidad__a:hover{ border-color:var(--link); transform:translateY(-2px); }
.curiosidad__i{ display:grid; place-items:center; width:2.5rem; height:2.5rem; border-radius:50%; background:var(--link); color:var(--surface); font-family:var(--font-titulo); font-size:1.3rem; line-height:1; }
.curiosidad__t{ font-size:.9375rem; line-height:1.35; font-weight:500; }

.redes{ display:flex; align-items:center; gap:1.4rem; flex-wrap:wrap; padding:1.2rem 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.redes__t{ font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; font-weight:600; color:var(--text-muted); margin:0; }
.redes__l{ list-style:none; display:flex; gap:.4rem; margin:0; padding:0; flex-wrap:wrap; }
.red{ display:inline-flex; align-items:center; gap:.5rem; padding:.5rem .85rem; border-radius:3px; font-size:.875rem; font-weight:500; text-decoration:none; color:var(--cpi-navy); transition:background-color .18s ease; }
.red:hover{ background:var(--bg-alt); }
.red svg{ flex:0 0 auto; }

@media (max-width:40rem){
  .lecturas{ gap:1.2rem; }
  .redes{ gap:.8rem; }
  .red span{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
  .red{ padding:.6rem; }
}

/* ═══ Formularios y popup ══════════════════════════════════════════════ */

.form{ max-width:34rem; }
.form__campo{ display:flex; flex-direction:column; gap:.35rem; margin:0 0 1rem; }
.form__campo label{ font-size:.8125rem; font-weight:600; letter-spacing:.02em; color:var(--text-muted); }
.form__campo input, .form__campo textarea{
  font:inherit; font-size:1rem; padding:.7rem .9rem; border:1px solid var(--border);
  border-radius:3px; background:var(--surface); color:var(--text); width:100%;
}
.form__campo input:focus, .form__campo textarea:focus{ outline:2px solid var(--link); outline-offset:1px; border-color:transparent; }
.form__campo textarea{ resize:vertical; min-height:7rem; }
.form__pie{ display:flex; align-items:center; gap:1rem; flex-wrap:wrap; margin:0; }
.form__nota{ font-size:.75rem; color:var(--text-muted); }
.form__ok{ padding:.8rem 1rem; border-left:3px solid #0c6157; background:#dceeea; color:#0a4f47; font-size:.9375rem; margin:0 0 1rem; border-radius:0 3px 3px 0; }
.form__error{ padding:.8rem 1rem; border-left:3px solid #8c2f39; background:#f7e4e6; color:#7a2831; font-size:.9375rem; margin:0 0 1rem; border-radius:0 3px 3px 0; }
/* honeypot: fuera de pantalla, no display:none */
.form__trampa{
  /* fuera de la vista sin salirse del documento: left:-9999px ensancha el
     scroll en algunos navegadores. clip-path lo oculta sin ocupar espacio. */
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap; border:0; padding:0; margin:-1px;
}

.popup[hidden]{ display:none !important; }
.popup{ position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:1rem; }
.popup__fondo{ position:absolute; inset:0; background:rgba(5,38,63,.55); opacity:0; transition:opacity .2s ease; }
.popup__caja{
  position:relative; background:var(--surface); border-radius:5px; padding:2rem 1.9rem 1.9rem;
  max-width:27rem; width:100%; box-shadow:0 20px 60px -20px rgba(5,38,63,.5);
  transform:translateY(8px); opacity:0; transition:transform .2s ease, opacity .2s ease;
 color:var(--text);}
.popup--visible .popup__fondo{ opacity:1; }
.popup--visible .popup__caja{ transform:none; opacity:1; }
.popup__x{ position:absolute; top:.6rem; right:.6rem; display:grid; place-items:center; width:2.2rem; height:2.2rem; border:0; background:transparent; color:var(--text-muted); cursor:pointer; border-radius:3px; }
.popup__x:hover{ background:var(--bg-alt); color:var(--cpi-navy); }
.popup__k{ font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; font-weight:600; color:var(--link); margin:0 0 .4rem; }
.popup__t{ font-family:var(--font-titulo); font-size:1.35rem; line-height:1.2; margin:0 0 .5rem; }
.popup__d{ font-size:.9375rem; color:var(--text-muted); margin:0 0 1.2rem; }
.popup .form{ max-width:none; }

@media (prefers-reduced-motion: reduce){
  .popup__fondo, .popup__caja{ transition:none; }
}

/* ═══ Contenido heredado (se retira al rediseñar las 31 páginas) ═══════ */
.prosa .sep{ border:0; border-top:1px solid var(--border); margin:1.8rem 0; }
.prosa .esp{ height:1.4rem; }
.fig-legado{ margin:1.6rem 0; }
.fig-legado img{ max-width:100%; height:auto; border-radius:3px; }
.caja-legado{ margin:1.4rem 0; padding:1.1rem 1.2rem; border:1px solid var(--border); border-radius:4px; }
.caja-legado img{ max-width:100%; height:auto; margin-bottom:.7rem; }
.caja-legado p{ margin:0; font-weight:600; font-size:.9375rem; }
.video-legado{ margin:1.6rem 0; }
.video-legado iframe{ max-width:100%; aspect-ratio:16/9; height:auto; }
.doc-legado__t{ font-size:1rem; font-weight:600; line-height:1.35; margin:.6rem 0 .3rem; }
.doc-legado__t a{ color:inherit; text-decoration:none; }
.doc-legado__t a:hover{ color:var(--link); text-decoration:underline; }
.caja-legado__t{ font-weight:600; font-size:.9375rem; margin:.6rem 0 .2rem; }
.caja-legado__d{ font-size:.875rem; color:var(--text-muted); }
.txt-legado{ margin:1rem 0; }

/* ═══ QA visual: el contenido real no tiene el largo ideal del prototipo ═══
   Los titulares del CPI llegan a 350 caracteres —son bajadas completas, no
   títulos cortos—. Sin acotar, el hero empuja media portada hacia abajo.     */

.card.hero .card__title{
  display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical;
  overflow:hidden; font-size:clamp(1.35rem, 2.4vw, 1.9rem); line-height:1.2;
}
.card.hero .card__excerpt{ -webkit-line-clamp:3; }

/* tarjetas sin imagen: que no queden con un hueco donde iba la foto */
.card:not(:has(.card__media)) .card__body{ padding-top:0; }
.dest-pub:not(:has(.dest-pub__cover)){ grid-template-columns:1fr; }

/* títulos largos en tarjetas normales */
.card__title{ overflow-wrap:anywhere; }
.card__title:not([class*="clamp"]){
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.card__title--sm:not([class*="clamp"]){ -webkit-line-clamp:2; }


/* ═══ QA visual · correcciones sobre contenido real ══════════════════ */

/* .pub se desbordaba en 390 px: las portadas tienen ancho fijo en el
   prototipo y con títulos reales la fila no cabe. */
@media (max-width:30rem){
  .pub{ grid-template-columns:64px minmax(0,1fr); gap:.7rem; }
  .pub__cover{ width:64px; }
  .pub__cover img{ width:100%; height:auto; }
  .pub .card__title, .pub__t{ min-width:0; overflow-wrap:anywhere; }
}

/* los filtros ya hacen scroll horizontal propio; que no arrastren la página */
.filtros{ max-width:100%; overflow:hidden; }
.filtros__lista{ scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; }
.filtros__lista > li{ scroll-snap-align:start; flex:0 0 auto; }

/* Ninguna imagen supera su caja. OJO: height:auto NO puede aplicarse a las
   portadas, que dependen de height:100% para llenar su proporción; si se pisa,
   la foto queda arriba y deja un bloque blanco debajo. */
.card img, .pub img, .dest-pub img, .prosa img, .caja-legado img{ max-width:100%; }
.prosa img, .caja-legado img{ height:auto; }
/* height:auto aquí anulaba el object-fit:cover del prototipo */
.card__media img{ max-width:100%; }

/* contenedores de imagen sin foto: no deben dejar hueco ni marco */
/* :empty no sirve: el contenedor tiene saltos de línea dentro y eso ya cuenta
   como nodo. Se usa :not(:has(img)), que mira si hay imagen de verdad. */
.card__media:not(:has(img)),
.dest-pub__cover:not(:has(img)),
.pub__cover:not(:has(img)){ display:none; }

/* la tarjeta superpuesta sin foto pasa a tarjeta de texto */
.card--overlay:not(:has(img)){ background:transparent; min-height:0; }
.card--overlay:not(:has(img)) .card__body{
  position:static; color:inherit; padding:var(--s-3) 0 0;
  background:none; text-shadow:none;
}
.card--overlay:not(:has(img)) .card__title a{ color:var(--text); }

/* ═══ QA · cabecera y portadas de publicación ═════════════════════════ */


/* Las portadas de publicación reservan proporción vertical; si la imagen no la
   llena queda un bloque blanco bajo la foto. Que cubra su caja. */
.pub__cover, .dest-pub__cover{ overflow:hidden; }
.pub__cover img, .dest-pub__cover img{
  display:block; width:100%; height:100%; object-fit:cover; object-position:center top;
}
.doc__portada{ object-fit:cover; object-position:center top; }




/* ═══ Cabecera ════════════════════════════════════════════════════════
   Seis grupos de menú, logo y botón en una sola fila. El nav tenía
   flex:1 1 auto SIN min-width:0, así que nunca bajaba del ancho de su
   contenido y lo pintaba encima del botón. Pasaba en cualquier pantalla.

   No se resuelve con overflow —el submenú tiene que poder salirse— sino
   haciendo que el contenido QUEPA: el tamaño y el espaciado del nav se
   adaptan al ancho real con clamp(), y logo y acciones no se comprimen.   */

.header__in{ display:flex; align-items:center; gap:clamp(.5rem,1.2vw,1.25rem); flex-wrap:nowrap; }
.logo{ flex:0 0 auto; }
.header__acciones{ flex:0 0 auto; margin-inline-start:auto; }
.nav{ flex:0 1 auto; min-width:0; }

@media (min-width:1060px){
  .nav{ gap:0; }
  .nav__link{
    padding-inline:clamp(.2rem, .55vw, .65rem);
    font-size:clamp(.68rem, .78vw, .8125rem);
    letter-spacing:0;
    white-space:nowrap;
  }
  .nav__caret{ width:8px; height:8px; }
}
@media (min-width:1060px) and (max-width:1279px){
  .logo img{ height:28px; max-width:158px; }
  .header__cta{ padding-inline:.7rem; font-size:.78rem; }
}

/* "Debes leer" trae 4 entradas: en una grilla de 3 el cuarto queda solo con un
   hueco enorme al lado. Cuatro columnas en pantalla ancha, dos en tableta. */
@media (min-width:62rem){ .lecturas{ grid-template-columns:repeat(4, minmax(0,1fr)); } }
@media (min-width:40rem) and (max-width:61.99rem){ .lecturas{ grid-template-columns:repeat(2, minmax(0,1fr)); } }


/* Una tarjeta superpuesta sin foto NO se oculta: se convierte en tarjeta de
   texto. Ocultarla dejaba filas de 3 donde el diseño pide 6, con huecos. */
.card--overlay:not(:has(img)){
  background:var(--surface); min-height:0; border:1px solid var(--border);
  border-radius:var(--radius); padding:var(--s-4); display:block;
}
.card--overlay:not(:has(img)) .card__media{ display:none; }
.card--overlay:not(:has(img)) .card__body{
  position:static; inset:auto; padding:0; background:none; color:var(--text);
}
.card--overlay:not(:has(img)) .card__title a{ color:var(--text); }
.card--overlay:not(:has(img)) .card__title a:hover{ color:var(--link); }
.card--overlay:not(:has(img)) .tag{ background:var(--bg-alt); color:var(--link); }


/* .cifras usaba repeat(2,1fr) y .cifra__n lleva white-space:nowrap, así que a
   360 px la columna no bajaba de su min-content y empujaba la página. */
.cifras{ grid-template-columns:repeat(auto-fit, minmax(0, 1fr)); }
@media (max-width:30rem){
  .cifras{ grid-template-columns:1fr; }
  .cifra__n{ white-space:normal; overflow-wrap:anywhere; }
}
/* figuras del contenido migrado con width en píxeles incrustado */
.prosa figure, .prosa .wp-caption{ max-width:100% !important; width:auto !important; }
.prosa figure img, .prosa .wp-caption img{ max-width:100%; height:auto; }

/* Una tarjeta cuyo pozo se agotó queda con el título vacío. Antes se rellenaba
   repitiendo la primera entrada, lo que mostraba el mismo titular tres veces
   seguidas. Ahora queda vacía y se oculta. */
.card:not(:has(.card__title a:not(:empty))),
.nota-item:not(:has(a:not(:empty))),
.tit-item:not(:has(a:not(:empty))),
.pub:not(:has(.pub__t a:not(:empty))),
.dest-pub:not(:has(.card__title a:not(:empty))),
.agenda-item:not(:has(.agenda-item__t a:not(:empty))),
.lectura:not(:has(.lectura__t a:not(:empty))),
.curiosidad:not(:has(.curiosidad__t:not(:empty))){ display:none; }


/* ---------- PÁGINAS CORPORATIVAS ---------------------------------------- */
/* La columna de lectura va centrada. Alineada a la izquierda dentro de un
   contenedor de 1.400 px dejaba media pantalla vacía a la derecha y la página
   parecía a medio maquetar. */
.prosa--centro { margin-inline: auto; }

/* El contenido heredado trae el texto justificado en el atributo de estilo.
   Sin partición de palabras abre ríos entre las palabras; el prototipo alinea
   a la izquierda. */
.prosa--centro [style*="justify"],
.prosa--centro p[style*="text-align: justify"] { text-align: left !important; }

/* Imágenes pequeñas seguidas —las insignias de «El origen»— se leen como una
   fila, no como una columna de tres. */
.prosa--centro p:has(> img.alignnone:only-child) { display: inline-block; margin-right: var(--s-4); vertical-align: top; }

/* La cabecera de un listado y su primera sección sumaban los dos rellenos y
   dejaban una franja vacía entre el conteo y las tarjetas. */
main > header.seccion--tight + section.seccion,
main > header.seccion--tight + nav.filtros + section.seccion { padding-top: 0; }

/* El título de una página corporativa se alinea con su columna de lectura.
   Pegado al borde izquierdo mientras el texto iba centrado, parecían dos
   maquetados distintos en la misma página. */
.pag-cab { max-width: 42rem; margin-inline: auto; }

/* ---------- OCULTAR DE VERDAD ------------------------------------------- */
/* El atributo hidden lo aplica la hoja del navegador con display:none, que
   pierde contra cualquier regla propia con selector de clase. Las tarjetas
   llevan display:flex y display:grid, así que al filtrar el panorama regional
   quedaban marcadas como ocultas y se seguían viendo: se pulsaba «Norte» y no
   pasaba nada. */
[hidden] { display: none !important; }

/* ---------- PLAN NACIONAL DE INFRAESTRUCTURA 2055 ------------------------ */
/* Destacado a dos columnas y rejilla de regiones. Las regiones son enlaces a
   artículos concretos, no filtros: el Consejo eligió uno por región. */
.plan__dest { display: grid; gap: var(--s-5); align-items: start; }
.plan__dest .card__media { aspect-ratio: 3/2; border-radius: 3px; overflow: hidden; }
.plan__dest .card__title { font-size: 1.375rem; line-height: 1.2; }
.plan__sub {
  margin: var(--s-7) 0 var(--s-4);
  font-family: var(--font-titulo); font-size: 1.0625rem; font-weight: 600;
}
.plan__regiones { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); grid-template-columns: 1fr; }
.plan__reg {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 46px; padding: .55rem .9rem;
  background: var(--cpi-azul); color: #fff; text-decoration: none;
  font-size: var(--t-sm); font-weight: 600; line-height: 1.25;
  border-radius: 2px; transition: background .16s var(--ease);
}
.plan__reg:hover, .plan__reg:focus-visible { background: var(--cpi-azul-700); color: #fff; }
/* Sin artículo todavía: se muestra la región, apagada y sin enlace. */
.plan__reg--sin { background: var(--border); color: var(--text-muted); cursor: default; }

@media (min-width: 700px)  { .plan__regiones { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) {
  .plan__dest { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-6); }
  .plan__regiones { grid-template-columns: repeat(4, 1fr); }
}
/* El número de una cifra enlaza a la entrada que la respalda. */
.cifra__n a { color: inherit; text-decoration: none; }
.cifra__n a:hover, .cifra__n a:focus-visible { color: var(--link); text-decoration: underline; }
/* El logo del socio enlaza a su sitio; el enlace ocupa la celda entera.
   Acotado al muro: «.logo» a secas es también el logotipo de la cabecera, y
   sin acotar le imponía ancho y alto del contenedor. */
.hoja-logos .logos-grid .logo a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }

/* ---------- COMUNIDAD Y GEOMOP ------------------------------------------ */
/* Las tres celdas de comunidad del sitio actual, con la marca del prototipo. */
.comunidad { list-style: none; margin: var(--s-5) 0 0; padding: 0; display: grid; gap: var(--s-3); grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 460px; }
.comunidad__c a { display: flex; flex-direction: column; gap: .1rem; padding: .7rem .8rem; color: #fff; text-decoration: none; border-radius: 2px; }
.comunidad__c--linkedin  a { background: #0A66C2; }
.comunidad__c--instagram a { background: #3C6E9B; }
.comunidad__c--youtube   a { background: #C4302B; }
.comunidad__c a:hover { filter: brightness(1.08); color: #fff; }
.comunidad__n { font-family: var(--font-titulo); font-size: 1.35rem; line-height: 1; }
.comunidad__l { font-size: var(--t-xs); opacity: .9; }

.geomop { display: block; max-width: 420px; }
.geomop img { width: 100%; height: auto; border: 1px solid var(--border); border-radius: 3px; }

/* El banner mide 400x154: no se estira. La franja se ajusta a él en vez de
   dejarlo suelto en medio de un hueco en blanco. */
#geomop { padding-block: var(--s-5); }
#geomop .wrap { display: flex; justify-content: center; }