/* =====================================================
   FPUC — Header
   -----------------------------------------------------
   Utility bar, nav principal, submenús y las variantes montada (--overlay) y sobre banda (--band). Compartido por las 8 páginas: cambiarlo las afecta a todas.

   Sólo var(--fpuc-*): ni un hex ni un tamaño literal.
   ===================================================== */


.fpuc-skip-link {
  position: absolute;
  left: -9999px;
  z-index: 100;
  padding: var(--fpuc-space-3) var(--fpuc-space-5);
  background: var(--fpuc-navy);
  color: var(--fpuc-text-on-dark);
}
.fpuc-skip-link:focus { left: var(--fpuc-space-3); top: var(--fpuc-space-3); }

.fpuc-siteheader { position: relative; z-index: 30; }

/* En la Home y en las internas de banda el header se monta sobre el hero: el
   diseño no deja franja blanca entre la utility bar y el color. */
.fpuc-siteheader--overlay { position: absolute; inset-inline: 0; top: 0; }
.fpuc-siteheader--overlay .fpuc-nav { background: transparent; }
.fpuc-siteheader--overlay .fpuc-menu > li > a,
.fpuc-siteheader--overlay .fpuc-nav__toggle { color: var(--fpuc-text-on-dark); }
/* Mismo caso que en el footer: logo oscuro sobre la foto del hero. */
.fpuc-siteheader--overlay .fpuc-nav__logo img { filter: brightness(0) invert(1); }
/* Montado, el logo va grande (y91→y204) y el nav más aireado para que el menú
   quede a su altura (y150). */
.fpuc-siteheader--overlay .fpuc-nav__inner { padding-block: var(--fpuc-nav-pad); }
.fpuc-siteheader--overlay .fpuc-nav__logo img { height: var(--fpuc-nav-logo); }
/* Sobre la banda de color de las internas el botón "Dona" es azul, no coral
   (equipo.pdf y120, 103×42). En la Home sigue coral. */
.fpuc-siteheader--band .fpuc-btn--donate {
  background: var(--fpuc-action-alt);
  border-color: var(--fpuc-action-alt);
}

/* Al hacer scroll el header se vuelve sólido y compacto, y el logo recupera
   su color y su tamaño de barra. */
.fpuc-siteheader--overlay.is-scrolled {
  position: fixed;
  background: var(--fpuc-surface);
  box-shadow: var(--fpuc-shadow-md);
}
.fpuc-siteheader--overlay.is-scrolled .fpuc-utility { display: none; }
.fpuc-siteheader--overlay.is-scrolled .fpuc-menu > li > a,
.fpuc-siteheader--overlay.is-scrolled .fpuc-nav__toggle { color: var(--fpuc-text); }
.fpuc-siteheader--overlay.is-scrolled .fpuc-nav__logo img { filter: none; height: var(--fpuc-nav-logo-bar); }
.fpuc-siteheader--overlay.is-scrolled .fpuc-nav__inner { padding-block: var(--fpuc-space-3); }
/* Borde incluido: en las internas de banda venía azul y quedaba como recuadro. */
.fpuc-siteheader--overlay.is-scrolled .fpuc-btn--donate {
  background: var(--fpuc-action-donate);
  border-color: var(--fpuc-action-donate);
}

/* --- Utility bar (y0, alto 39px) --- */
.fpuc-utility {
  background: var(--fpuc-surface-utility);
  color: var(--fpuc-text-on-dark);
  font-size: var(--fpuc-text-meta);
}
.fpuc-utility__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--fpuc-space-4);
  max-width: var(--fpuc-container);
  min-height: var(--fpuc-utility-height);
  margin-inline: auto;
  padding-inline: var(--fpuc-space-5);
}
.fpuc-utility a {
  color: inherit;
  text-decoration: none;
  opacity: 0.9;
}
.fpuc-utility a:hover { opacity: 1; }
.fpuc-utility__tools { display: flex; flex-wrap: wrap; gap: var(--fpuc-space-5); }
/* Icono y texto alineados, con el icono de ancho fijo para que todos
   (también el sobre del correo) midan lo mismo. */
.fpuc-utility a { display: inline-flex; align-items: center; gap: 0.4em; }
.fpuc-utility a > i { width: 1.15em; text-align: center; }

/* --- Nav principal --- */
.fpuc-nav { background: var(--fpuc-surface); }
.fpuc-nav__inner {
  display: flex;
  align-items: center;
  gap: var(--fpuc-space-5);
  max-width: var(--fpuc-container);
  margin-inline: auto;
  padding: var(--fpuc-space-3) var(--fpuc-space-5);
}
.fpuc-nav__logo { display: inline-flex; margin-right: auto; }
.fpuc-nav__logo img { height: var(--fpuc-nav-logo-bar); width: auto; display: block; }
/* Logo claro (Ajustes FPUC): sólo montado sobre la foto y sin scroll. Ya es
   blanco, así que no lleva el filtro. Sin él, el normal invertido. */
.fpuc-nav__logo .fpuc-nav__logo-claro { display: none; }
.fpuc-siteheader--overlay .fpuc-nav__logo.has-logo-claro .fpuc-nav__logo-img { display: none; }
.fpuc-siteheader--overlay .fpuc-nav__logo.has-logo-claro .fpuc-nav__logo-claro { display: block; filter: none; }
.fpuc-siteheader--overlay.is-scrolled .fpuc-nav__logo.has-logo-claro .fpuc-nav__logo-img { display: block; }
.fpuc-siteheader--overlay.is-scrolled .fpuc-nav__logo.has-logo-claro .fpuc-nav__logo-claro { display: none; }

.fpuc-menu {
  display: flex;
  align-items: center;
  gap: var(--fpuc-space-6);
  padding: 0;
  margin: 0;
  list-style: none;
}
.fpuc-menu > li { position: relative; }
.fpuc-menu > li > a {
  display: inline-block;
  padding-block: var(--fpuc-space-2);
  font-family: var(--fpuc-font-body);
  font-size: var(--fpuc-text-nav);
  color: var(--fpuc-text);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.fpuc-menu > li > a:hover,
.fpuc-menu > .current-menu-item > a,
.fpuc-menu > .current_page_item > a,
.fpuc-menu > .current-menu-ancestor > a { border-bottom-color: currentColor; }

/* Indicador de submenú: la flechita que en el diseño llevan Nosotros y
   Proyectos. `has-submenu` la pone el walker; `menu-item-has-children`, WP. */
.fpuc-menu .has-submenu > a::after,
.fpuc-menu .menu-item-has-children > a::after {
  content: "";
  display: inline-block;
  width: .4em;
  height: .4em;
  margin-left: .45em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}

/* Submenú */
.fpuc-menu .submenu,
.fpuc-menu .sub-menu {
  position: absolute;
  left: 0;
  top: 100%;
  min-width: 220px;
  padding: var(--fpuc-space-3) 0;
  margin: 0;
  list-style: none;
  background: var(--fpuc-surface);
  box-shadow: var(--fpuc-shadow-md);
  border-radius: var(--fpuc-radius-sm);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--fpuc-transition);
}
.fpuc-menu li:hover > .submenu,
.fpuc-menu li:hover > .sub-menu,
.fpuc-menu li:focus-within > .submenu,
.fpuc-menu li:focus-within > .sub-menu { opacity: 1; visibility: visible; }
.fpuc-menu .submenu a,
.fpuc-menu .sub-menu a {
  display: block;
  padding: var(--fpuc-space-2) var(--fpuc-space-5);
  font-size: var(--fpuc-text-small);
  color: var(--fpuc-text);
  text-decoration: none;
}
.fpuc-menu .submenu a:hover,
.fpuc-menu .sub-menu a:hover { background: var(--fpuc-surface-alt); }

.fpuc-nav__toggle {
  display: none;
  padding: var(--fpuc-space-2);
  border: 0;
  background: none;
  color: var(--fpuc-text);
  font-size: var(--fpuc-text-eyebrow);
  cursor: pointer;
}

@media (max-width: 1000px) {
  .fpuc-nav__toggle { display: block; order: 3; }
  .fpuc-nav__menu {
    order: 4;
    flex-basis: 100%;
    display: none;
  }
  .fpuc-nav__menu.is-open { display: block; }
  .fpuc-menu { flex-direction: column; align-items: flex-start; gap: var(--fpuc-space-3); }
  .fpuc-menu .submenu,
  .fpuc-menu .sub-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    box-shadow: none;
    padding-left: var(--fpuc-space-4);
  }
  .fpuc-siteheader--overlay { position: static; }
  .fpuc-siteheader--overlay .fpuc-nav { background: var(--fpuc-surface); }
  .fpuc-siteheader--overlay .fpuc-menu > li > a,
  .fpuc-siteheader--overlay .fpuc-nav__toggle { color: var(--fpuc-text); }
  /* Al dejar de estar montado, el logo vuelve a su tamaño de barra y el hero
     pierde el hueco que le reservaba. */
  .fpuc-siteheader--overlay .fpuc-nav__inner { padding-block: var(--fpuc-space-3); }
  .fpuc-siteheader--overlay .fpuc-nav__logo img { height: var(--fpuc-nav-logo-bar); filter: none; }
  .fpuc-siteheader--overlay .fpuc-nav__logo.has-logo-claro .fpuc-nav__logo-img { display: block; }
  .fpuc-siteheader--overlay .fpuc-nav__logo.has-logo-claro .fpuc-nav__logo-claro { display: none; }
  .fpuc-siteheader--band .fpuc-btn--donate {
    background: var(--fpuc-action-donate);
    border-color: var(--fpuc-action-donate);
  }
  .fpuc-utility__tools { gap: var(--fpuc-space-3); }
}

/* Piezas del panel móvil: fuera de él no se ven. */
.fpuc-menu__sub-toggle,
.fpuc-nav__close,
.fpuc-nav__backdrop { display: none; }

/* Menú móvil: panel que entra por la derecha, a todo el alto, sobre un fondo
   oscuro. Sólo el panel hace scroll; la página queda quieta. Cada entrada a
   lo ancho, con separador; los submenús, sangrados y más chicos. */
@media (max-width: 1000px) {
  .fpuc-menu-open,
  .fpuc-menu-open body { overflow: hidden; }
  /* Sobre la barra de redes y el "volver arriba" (z-index 40). */
  .fpuc-menu-open .fpuc-siteheader { z-index: 50; }

  .fpuc-nav__menu {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    width: min(85vw, calc(var(--fpuc-space-9) * 4));
    padding: var(--fpuc-space-8) var(--fpuc-space-5) var(--fpuc-space-7);
    background: var(--fpuc-surface);
    box-shadow: var(--fpuc-shadow-lg);
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform var(--fpuc-transition), visibility var(--fpuc-transition);
  }
  .fpuc-nav__menu.is-open { display: block; transform: none; visibility: visible; }

  .fpuc-nav__backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1;
    background: var(--fpuc-overlay);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--fpuc-transition), visibility var(--fpuc-transition);
  }
  .fpuc-nav__backdrop.is-open { opacity: var(--fpuc-overlay-alpha); visibility: visible; }

  .fpuc-nav__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: var(--fpuc-space-3);
    right: var(--fpuc-space-3);
    width: var(--fpuc-space-7);
    height: var(--fpuc-space-7);
    padding: 0;
    border: 0;
    background: none;
    color: var(--fpuc-text);
    font-size: var(--fpuc-text-body-lg);
    cursor: pointer;
  }

  .fpuc-menu > li:first-child { border-top: 1px solid var(--fpuc-border); }
  .fpuc-menu { align-items: stretch; gap: 0; }
  .fpuc-menu > li { border-bottom: 1px solid var(--fpuc-border); }
  .fpuc-menu > li > a {
    display: block;
    padding-block: var(--fpuc-space-4);
    border-bottom: 0;
    font-size: var(--fpuc-text-body-lg);
  }
  .fpuc-menu > .current-menu-item > a,
  .fpuc-menu > .current_page_item > a,
  .fpuc-menu > .current-menu-ancestor > a {
    color: var(--fpuc-text-accent);
    font-weight: var(--fpuc-weight-bold);
  }
  .fpuc-menu .submenu,
  .fpuc-menu .sub-menu {
    min-width: 0;
    padding: 0 0 var(--fpuc-space-3) var(--fpuc-space-4);
    background: none;
  }
  .fpuc-menu .submenu a,
  .fpuc-menu .sub-menu a { padding: var(--fpuc-space-2) 0; color: var(--fpuc-text-muted); }
  .fpuc-menu .submenu a:hover,
  .fpuc-menu .sub-menu a:hover { background: none; color: var(--fpuc-text-accent); }

  /* Submenús cerrados; la flecha (botón que mete base.js) los abre. La
     flecha del enlace se quita para no tener dos. */
  .fpuc-menu > li.has-submenu,
  .fpuc-menu > li.menu-item-has-children { display: flex; flex-wrap: wrap; align-items: center; }
  .fpuc-menu > li.has-submenu > a,
  .fpuc-menu > li.menu-item-has-children > a { flex: 1; }
  .fpuc-menu .has-submenu > a::after,
  .fpuc-menu .menu-item-has-children > a::after { content: none; }
  .fpuc-menu .has-submenu > .submenu,
  .fpuc-menu .menu-item-has-children > .sub-menu { display: none; flex-basis: 100%; }
  .fpuc-menu .is-sub-open > .submenu,
  .fpuc-menu .is-sub-open > .sub-menu { display: block; }
  .fpuc-menu__sub-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--fpuc-space-7);
    height: var(--fpuc-space-7);
    padding: 0;
    border: 0;
    background: none;
    color: var(--fpuc-text);
    cursor: pointer;
  }
  .fpuc-menu__sub-toggle::before {
    content: "";
    width: .55em;
    height: .55em;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-25%) rotate(45deg);
    transition: transform var(--fpuc-transition);
  }
  .fpuc-menu .is-sub-open > .fpuc-menu__sub-toggle::before { transform: translateY(25%) rotate(-135deg); }
}

/* Correo y herramientas dentro del menú: sólo en móvil, donde la utility bar
   no cabe y se esconde. */
.fpuc-nav__extra { display: none; }
@media (max-width: 700px) {
  .fpuc-utility { display: none; }
  .fpuc-nav__extra {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--fpuc-space-3);
    margin-top: var(--fpuc-space-5);
    font-size: var(--fpuc-text-small);
  }
  .fpuc-nav__extra a {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    color: var(--fpuc-text);
    text-decoration: none;
  }
  .fpuc-nav__extra a > i { width: 1.15em; text-align: center; color: var(--fpuc-text-accent); }
}