/* Propuesta del CPI (7-oct-2026) — hoja «nav». Usa los tokens de cpi.css (:root).
   R05 menú y pie · R13 foco visible y favicon · R14 suscripción visible · R18 Seminarios CPI.

   Contenedor: la observación de Luis (1-oct) pedía --maxw: 1440px. cpi.css ya
   lo tiene en 1440px, así que aquí NO se redefine (una sola fuente de verdad). */

/* ── Franja superior: acceso compacto al Informativo diario (R14) ───────── */
.topbar__acciones { display: flex; align-items: center; gap: var(--s-3); }
.topbar__cta {
  display: inline-flex; align-items: center; gap: .4em;
  padding: .2rem .65rem; border: 1px solid rgba(255,255,255,.28); border-radius: 99px;
  font-weight: 600; line-height: 1.4; white-space: nowrap;
}
.topbar__cta:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.5); }
.topbar__cta svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
/* El botón de modo oscuro llevaba el tamaño y el color en línea. */
.topbar__tema { width: 34px; height: 34px; color: #E2ECF5; }
.topbar__tema:hover { background: rgba(255,255,255,.1); }

/* En pantallas sin franja superior, el acceso baja a un icono de la cabecera. */
.header__suscribir { color: var(--cpi-azul-700); }
@media (min-width: 900px) { .header__suscribir { display: none; } }
/* Con tres iconos (suscribir, buscar, menú) la cabecera no cabía en 360 px:
   se acortan un poco los botones en pantallas muy estrechas (siguen ≥ 40 px). */
@media (max-width: 419px) {
  .header__acciones { gap: 0; }
  .header__acciones .icon-btn { width: 40px; }
}

/* ── Barra de escritorio (R05) ──────────────────────────────────────────── */
/* Seis entradas en vez de ocho: en pantalla ancha ya caben a un tamaño legible
   (cpi.css las encogía con clamp() para que cupieran las ocho de antes). */
@media (min-width: 1060px) {
  .nav__link { font-size: .8125rem; padding-inline: .5rem; }
}
@media (min-width: 1280px) {
  .nav__link { font-size: var(--t-sm); padding-inline: .75rem; }
}

/* «Otro sitio»: InfraChile y el Foro se abren en la misma pestaña (R18). */
.nav-ext {
  display: inline-block; flex: 0 0 auto; width: .72em; height: .72em;
  margin-inline-start: .3em; vertical-align: baseline; opacity: .75;
}
/* Las dos últimas secciones quedan pegadas al borde derecho: su caja y su
   cascada se abren hacia dentro en vez de salirse de la pantalla. */
.nav__item:last-child > .submenu { left: auto; right: 0; }
.nav__item:nth-last-child(-n+2) .submenu--hijo { left: auto; right: 100%; transform: translateX(4px); }

/* Con teclado la caja tiene que estar visible YA cuando llega el foco: si la
   visibilidad entra con transición, un Tab rápido se salta las opciones. */
.nav__item:focus-within > .submenu,
.submenu__item:focus-within > .submenu--hijo { transition-property: opacity, transform; }

/* Escape cierra el desplegable aunque el foco siga en la sección (cpi.js). */
.nav__item.is-cerrado > .submenu,
.nav__item.is-cerrado .submenu--hijo { opacity: 0; visibility: hidden; transform: translateY(6px); }

/* Foco visible dentro de las cajas: el contorno global se recortaba contra el
   borde redondeado de la caja; se mete hacia dentro. */
.submenu a:focus-visible { outline-offset: -3px; background: var(--bg-alt); color: var(--link); }

/* ── Buscador: foco visible (R13) ──────────────────────────────────────── */
/* El campo no tiene borde propio (outline: 0 en cpi.css): se marca la fila. */
.buscar__form:focus-within { box-shadow: inset 0 -3px 0 var(--focus); }
.buscar__item a:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }

/* ── Menú móvil (R05) ───────────────────────────────────────────────────── */
.drawer__titulo { font-family: var(--font-titulo); }
.drawer__suscribir { margin-top: var(--s-5); }
.drawer__nav { display: block; }
.mnav { list-style: none; margin: 0; padding: 0; }
.mnav--n1 > .mnav__item { border-bottom: 1px solid var(--border-soft); }
.mnav__fila { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); }
.mnav__link {
  display: flex; align-items: center; flex: 1 1 auto; min-height: 44px; padding-block: .5rem;
  color: var(--text); text-decoration: none;
}
.mnav--n1 > .mnav__item > .mnav__fila > .mnav__link,
.mnav--n1 > .mnav__item > .mnav__link { min-height: 52px; font-weight: 700; font-size: var(--t-md); }
.mnav--n2 .mnav__link { color: var(--text-muted); font-size: var(--t-base); }
.mnav--n3 .mnav__link { font-size: var(--t-sm); }
.mnav__link:hover, .mnav__link[aria-current="page"] { color: var(--link); }
.mnav__abrir {
  display: inline-grid; place-items: center; flex: 0 0 auto; width: 44px; height: 44px;
  border: 1px solid transparent; border-radius: var(--radius); background: transparent;
  color: var(--cpi-azul); cursor: pointer;
}
.mnav__abrir:hover { background: var(--bg-alt); }
.mnav__abrir svg { width: 14px; height: 14px; transition: transform .18s var(--ease); }
.mnav__abrir[aria-expanded="true"] svg { transform: rotate(180deg); }
.mnav__sub { padding: 0 0 var(--s-2) var(--s-4); border-inline-start: 2px solid var(--border-soft); margin-inline-start: var(--s-1); }

/* ── Pie: replica la estructura del menú (R05/R18) ─────────────────────── */
.footer--compartir { padding-bottom: 72px; }   /* deja sitio a la barra de compartir en móvil */
.footer__lema { font-size: var(--t-sm); max-width: 34ch; }
.footer__social { margin-top: var(--s-5); }
.footer__legal-nav { display: flex; gap: var(--s-4); flex-wrap: wrap; }
.footer__col h3 a { color: #fff; }
.footer__col h3 a:hover { color: #BFE0FF; }
.footer__mapa { display: grid; gap: var(--s-6) var(--s-5); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.footer__grid--mapa > .footer__mapa { display: grid; }   /* cpi.css pone flex a los hijos en móvil */
.footer__grid--mapa { grid-template-areas: "marca" "mapa" "contacto"; }
.footer__marca    { grid-area: marca; }
.footer__mapa     { grid-area: mapa; }
.footer__contacto { grid-area: contacto; }
@media (min-width: 640px) {
  .footer__grid--mapa { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "marca contacto" "mapa mapa"; }
  .footer__mapa { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .footer__grid--mapa { grid-template-columns: minmax(14rem, 1.1fr) 3.4fr minmax(12rem, 1fr); grid-template-areas: "marca mapa contacto"; }
}
@media (max-width: 639px) {
  .footer__mapa { text-align: start; }
}

/* ── Página Seminarios CPI (R18) ───────────────────────────────────────── */
.seminarios__intro { padding-bottom: var(--s-6); }
.marcas {
  display: grid; gap: var(--s-6); grid-template-columns: minmax(0, 1fr);
  padding-bottom: clamp(var(--s-8), 6vw, var(--s-11));
}
@media (min-width: 760px) { .marcas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.marca {
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: var(--shadow-sm);
}
/* Los logos oficiales van sobre blanco también en modo oscuro: están hechos
   para fondo claro y no se recolorean (R18: conservar la identidad). */
.marca__media {
  display: grid; place-items: center; height: clamp(10rem, 16vw, 13rem);
  background: var(--n-0); border-bottom: 1px solid var(--border-soft); padding: var(--s-4);
}
/* Misma altura para las dos marcas (R18: igual jerarquía), sin deformar el logo. */
.marca__media { overflow: hidden; }
/* La altura se fija aquí (un % no sirve dentro de una fila de rejilla de alto automático: el logo se salía sobre el título). */
.marca__logo { width: 100%; height: calc(clamp(10rem, 16vw, 13rem) - 2 * var(--s-4)); object-fit: contain; }
.marca__sin-logo { font-family: var(--font-titulo); font-size: var(--t-xl); font-weight: 700; color: var(--cpi-navy); text-align: center; }
.marca__cuerpo { display: flex; flex-direction: column; gap: var(--s-4); padding: var(--s-5) var(--s-5) var(--s-6); flex: 1 1 auto; }
.marca__t { font-size: var(--t-xl); }
.marca__d { color: var(--text-muted); line-height: 1.6; }
.marca__accion { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); }
.marca__dominio { font-size: var(--t-xs); color: var(--text-muted); }
.marca__sub {
  font-family: var(--font-texto); font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: var(--cpi-azul-700);
  padding-top: var(--s-4); border-top: 1px solid var(--border-soft); margin-top: auto;
}
:root[data-theme="dark"] .marca__sub { color: var(--link); }
.marca__rel { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); font-size: var(--t-sm); }
.marca__rel a { color: var(--link); font-weight: 600; }
.marca__n { color: var(--text-muted); }

/* R04/R14: casilla de consentimiento del formulario de suscripción (desmarcada al cargar) */
.form__campo--check{ flex-direction:row; align-items:flex-start; gap:.6rem; }
.form__campo--check input{ width:1.15rem; height:1.15rem; flex:none; margin-top:.15rem; padding:0; }
.form__campo--check label{ font-weight:400; letter-spacing:0; color:var(--text); line-height:1.45; }