/**
 * common/header — Cabecera global.
 * Handle: pf_pfuture_component_header
 *
 * Bloques: __main (logo, nav, acciones), __submenu (desplegable y mega-menú),
 * __cta («Hablemos», una copia por cara), __search (buscador plegable, apagado por
 * defecto), __burger y __backdrop (cajón móvil), __noscript con
 * __nav-open y __nav-close (apertura y cierre del cajón por `:target` cuando el
 * navegador no ejecuta script, issue #120).
 *
 * UNA SOLA BARRA sobre `--pf-color-surface` con `border-bottom` de 1 px, texto navy
 * y el botón «Hablemos» en navy (dirección «Expediente», docs/DISENO-EXPEDIENTE.md,
 * issue #112). La barra superior de contacto y redes de Elementor ya no existe.
 *
 * Tokens: solo los canónicos de style.css (issue #60), sin literales de respaldo.
 * Los `--pf-header-*` son de componente y REMAPEAN la paleta: como cuelgan de
 * `surface`, `brand` y `text`, la hoja cambia sola de modo y no necesita ningún
 * bloque de modo oscuro para sus superficies. El único `@media` de modo que
 * queda es el intercambio del logo doble, que no es un color: con dos logos
 * configurados hay que decidir cuál se ve, y esa decisión sigue la misma doble vía
 * que la paleta (preferencia del sistema y `data-pf-theme`).
 *
 * Sombras: solo las capas que FLOTAN sobre el contenido —submenú y cajón móvil— y
 * solo con `--pf-shadow-lg`. La barra no lleva sombra al hacer
 * scroll: la separa el borde. El panel del buscador tampoco: lo cierra un borde.
 *
 * Alturas: `--pf-header-main-height` es la altura de la barra CON su borde de 1 px
 * (72 px en escritorio, 64 px hasta 1024 px); es lo que publica script.js en
 * `--pf-header-height` para toc y cta-box (DEC-027).
 */

.pf-header {
  --pf-header-bg: var(--pf-color-surface);
  --pf-header-border: var(--pf-color-border);
  --pf-header-text: var(--pf-color-brand);
  --pf-header-text-hover: var(--pf-color-brand-strong);
  --pf-header-panel-bg: var(--pf-color-surface);
  --pf-header-panel-text: var(--pf-color-text);
  --pf-header-panel-link: var(--pf-color-text);
  --pf-header-cta-bg: var(--pf-color-brand);
  --pf-header-cta-bg-hover: var(--pf-color-brand-strong);
  --pf-header-cta-text: var(--pf-color-text-invert);
  --pf-header-logo-height: 40px;
  --pf-header-main-height: 72px;
  --pf-header-drawer-width: min(24rem, 100%);

  position: relative;
  z-index: var(--pf-z-header);
  width: 100%;
  border-bottom: 1px solid var(--pf-header-border);
  background: var(--pf-header-bg);
  color: var(--pf-header-text);
  font-family: var(--pf-font-sans);
}

.pf-header--sticky {
  position: sticky;
  top: 0;
}

.pf-header__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pf-space-md);
  width: 100%;
  max-width: var(--pf-container);
  margin-inline: auto;
  padding-inline: var(--pf-gutter);
}

.pf-header .pf-icon {
  display: block;
  width: 1.25rem;
  height: 1.25rem;
  flex: 0 0 auto;
}

/* Listas del componente: sin viñetas ni margenes. */
.pf-header__menu {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* El atributo [hidden] tiene que ganar a los `display` del componente: la regla del
 * navegador es menos especifica que cualquier clase, asi que sin esto un panel
 * marcado como oculto en el HTML se pinta abierto. Le paso al selector de idioma en
 * la tanda 02 (un <ul> con display:flex) y al conmutador de modo del pie en la 14:
 * la regla se queda porque el buscador plegable sigue sirviendose con [hidden]. */
.pf-header [hidden] {
  display: none !important;
}

/* -------------------------------------------------------------------------
 * Zona principal: logo, menu y acciones.
 * ---------------------------------------------------------------------- */

.pf-header__main {
  position: relative;
  width: 100%;
}

/* La altura del token incluye el borde inferior de `.pf-header`, asi que la caja
 * interior mide 1 px menos y la barra entera —lo que publica script.js— da los
 * 72 px exactos de la direccion. */
.pf-header__main > .pf-header__inner {
  min-height: calc(var(--pf-header-main-height) - 1px);
}

.pf-header__branding {
  flex: 0 0 auto;
}

.pf-header__logo {
  display: inline-flex;
  align-items: center;
  color: inherit;
  text-decoration: none;
}

.pf-header__logo-img {
  display: block;
  width: auto;
  height: var(--pf-header-logo-height);
}

.pf-header__logo-text {
  font-size: var(--pf-text-lg);
  font-weight: var(--pf-weight-bold);
}

/* Logo por modo: con dos logos configurados se muestra uno u otro; con uno solo,
 * siempre el mismo. Es el unico `@media` de modo de la hoja, y se queda: la barra
 * ahora es clara en modo claro y oscura en modo oscuro, asi que un logo con la
 * palabra en blanco (el 1667 de produccion, hecho para navy) pierde el texto en
 * claro y uno con la palabra en navy lo perderia en oscuro. Dos logos es la unica
 * salida, y cual se ve no es un color que se pueda remapear con un token. */
.pf-header__logo-img--dark {
  display: none;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-pf-theme="light"]) .pf-header--dual-logo .pf-header__logo-img--light {
    display: none;
  }

  :root:not([data-pf-theme="light"]) .pf-header--dual-logo .pf-header__logo-img--dark {
    display: block;
  }
}

:root[data-pf-theme="dark"] .pf-header--dual-logo .pf-header__logo-img--light {
  display: none;
}

:root[data-pf-theme="dark"] .pf-header--dual-logo .pf-header__logo-img--dark {
  display: block;
}

/* Navegacion. */
.pf-header__nav {
  flex: 1 1 auto;
  min-width: 0;
}

.pf-header__menu--depth-0 {
  justify-content: flex-end;
  align-items: center;
  gap: var(--pf-space-2xs);
}

.pf-header__item {
  position: relative;
}

.pf-header__entry {
  display: flex;
  align-items: center;
}

.pf-header__link {
  display: inline-flex;
  align-items: center;
  padding: var(--pf-space-xs) var(--pf-space-sm);
  border-radius: var(--pf-radius-sm);
  color: inherit;
  font-size: var(--pf-text-sm);
  font-weight: var(--pf-weight-regular);
  line-height: var(--pf-leading-snug);
  text-decoration: none;
  transition: color var(--pf-transition), background-color var(--pf-transition);
}

.pf-header__link:hover,
.pf-header__link:focus-visible {
  color: var(--pf-header-text-hover);
}

/* El item actual y su ancestro se subrayan con SU color (`currentColor`), nunca
 * con el acento: el naranja tiene un solo papel en el sitio, el boton primario de
 * conversion (regla de uso 120 de DISENO-EXPEDIENTE.md). */
.pf-header__item--depth-0.is-current > .pf-header__entry > .pf-header__link,
.pf-header__item--depth-0.is-ancestor > .pf-header__entry > .pf-header__link {
  font-weight: var(--pf-weight-medium);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.35em;
  text-decoration-color: currentColor;
}

.pf-header__toggle-sub {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  margin-inline-start: calc(-1 * var(--pf-space-2xs));
  padding: 0;
  border: 0;
  border-radius: var(--pf-radius-sm);
  background: none;
  color: inherit;
}

.pf-header__toggle-sub .pf-icon {
  width: 1rem;
  height: 1rem;
  transition: transform var(--pf-transition);
}

.pf-header__toggle-sub[aria-expanded="true"] .pf-icon {
  transform: rotate(180deg);
}

/* Panel desplegable (escritorio). */
.pf-header__submenu {
  background: var(--pf-header-panel-bg);
  color: var(--pf-header-panel-text);
}

.pf-header__submenu .pf-header__link {
  color: var(--pf-header-panel-link);
}

.pf-header__submenu .pf-header__link:hover,
.pf-header__submenu .pf-header__link:focus-visible {
  color: var(--pf-color-brand);
  background: var(--pf-color-brand-soft);
}

.pf-header__submenu .pf-header__item.is-current > .pf-header__entry > .pf-header__link {
  color: var(--pf-color-brand);
  font-weight: var(--pf-weight-medium);
}

/* Enlace con linea de doce anios (issue #136; dentro del <a> desde la tanda 17, issue
 * #181): el item entero es la zona pulsable. Titulo y linea se apilan; la linea es
 * texto de apoyo, un escalon por debajo en tamanio y en color. El hover y el foco
 * pintan el fondo del enlace COMPLETO (la regla de `.pf-header__submenu .pf-header__link`
 * de arriba), y la linea sube a la tinta del panel para que no quede apagada sobre el
 * fondo `brand-soft`. */
.pf-header__link--with-line {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--pf-space-3xs);
  width: 100%;
}

.pf-header__link-title {
  display: block;
}

.pf-header__line {
  display: block;
  margin: 0;
  color: var(--pf-color-text-muted);
  font-size: var(--pf-text-xs);
  font-weight: var(--pf-weight-regular);
  line-height: var(--pf-leading-snug);
}

.pf-header__link:hover .pf-header__line,
.pf-header__link:focus-visible .pf-header__line {
  color: inherit;
}

/* Titulo de grupo del cajon movil: texto pequeño y apagado, sin versalitas. */
.pf-header__group-title {
  margin: 0 0 var(--pf-space-2xs);
  padding-inline: var(--pf-space-sm);
  color: var(--pf-color-text-muted);
  font-size: var(--pf-text-xs);
  font-weight: var(--pf-weight-medium);
}

.pf-header__menu--depth-1,
.pf-header__menu--depth-2,
.pf-header__menu--depth-3 {
  flex-direction: column;
  gap: 0;
}

.pf-header__menu--depth-2 .pf-header__link,
.pf-header__menu--depth-3 .pf-header__link {
  padding-block: var(--pf-space-2xs);
  color: var(--pf-color-text-soft);
}

/* -------------------------------------------------------------------------
 * Acciones: «Hablemos» y buscador (si esta activo).
 * ---------------------------------------------------------------------- */

.pf-header__actions {
  display: flex;
  align-items: center;
  gap: var(--pf-space-2xs);
  flex: 0 0 auto;
}

.pf-header__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--pf-space-3xs);
  min-width: 2.5rem;
  height: 2.5rem;
  padding-inline: var(--pf-space-2xs);
  border: 0;
  border-radius: var(--pf-radius-sm);
  background: none;
  color: inherit;
  font-size: var(--pf-text-sm);
  transition: color var(--pf-transition), background-color var(--pf-transition);
}

.pf-header__action:hover,
.pf-header__action:focus-visible,
.pf-header__action[aria-expanded="true"] {
  color: var(--pf-header-text-hover);
}

/* «Hablemos»: boton primario NAVY, nunca naranja. El naranja es solo del CTA del
 * hero de portada y del envio del formulario de contacto (correcciones del
 * orquestador en #112). Borde de 2 px transparente, como todo boton del tema, para
 * que mida lo mismo que un secundario si un dia lo hay al lado. */
.pf-header__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5rem;
  margin-inline-start: var(--pf-space-2xs);
  padding: 0 var(--pf-space-md);
  border: 2px solid transparent;
  border-radius: var(--pf-radius-control);
  background: var(--pf-header-cta-bg);
  color: var(--pf-header-cta-text);
  font-size: var(--pf-text-sm);
  font-weight: var(--pf-weight-bold);
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--pf-transition), color var(--pf-transition);
}

.pf-header__cta:hover,
.pf-header__cta:focus-visible {
  background: var(--pf-header-cta-bg-hover);
  color: var(--pf-header-cta-text);
}

/* Una copia por cara: la del cajon solo existe en movil (ver el @media de abajo). */
.pf-header__cta--drawer {
  display: none;
}

.pf-header__search {
  position: absolute;
  inset-inline: 0;
  top: 100%;
  padding-block: var(--pf-space-sm);
  border-bottom: 1px solid var(--pf-color-border);
  background: var(--pf-header-panel-bg);
  color: var(--pf-header-panel-text);
}

/* Boton de menu movil: oculto en escritorio. Sus dos iconos se alternan por estado. */
.pf-header__burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: var(--pf-radius-sm);
  background: none;
  color: inherit;
}

.pf-header__burger .pf-icon {
  width: 1.5rem;
  height: 1.5rem;
}

.pf-header__burger .pf-icon--close,
.pf-header__burger[aria-expanded="true"] .pf-icon--menu {
  display: none;
}

.pf-header__burger[aria-expanded="true"] .pf-icon--close {
  display: block;
}

.pf-header__backdrop {
  display: none;
}

.pf-header__nav-footer {
  display: none;
}

/* Controles del cajon sin JavaScript (issue #120): solo existen en el DOM cuando el
 * navegador no ejecuta script (van en <noscript>) y solo pintan en movil. En
 * escritorio el menu esta en flujo y no hay cajon que abrir. Se apagan el
 * envoltorio Y los enlaces: el `display` computado de un hijo no hereda el
 * `none` del padre, y el criterio se mide sobre el enlace. */
.pf-header__noscript,
.pf-header__nav-open,
.pf-header__nav-close {
  display: none;
}

/* -------------------------------------------------------------------------
 * Escritorio: menu horizontal, paneles al vuelo (hover, foco o boton) y mega-menu.
 * ---------------------------------------------------------------------- */

@media (min-width: 1025px) {
  .pf-header__item--depth-0 > .pf-header__submenu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 2;
    /* 20rem y no 16: desde la tanda 13 cada entrada del panel lleva debajo su línea de
     * doce años, y a 16rem las tres se partían en tres renglones (medido a 1440). */
    min-width: 20rem;
    padding: var(--pf-space-2xs);
    border: 1px solid var(--pf-color-border);
    border-top: 0;
    border-radius: 0 0 var(--pf-radius-md) var(--pf-radius-md);
    box-shadow: var(--pf-shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(var(--pf-space-2xs));
    transition: opacity var(--pf-transition), transform var(--pf-transition), visibility 0s linear 180ms;
  }

  .pf-header__item--depth-0:hover > .pf-header__submenu,
  .pf-header__item--depth-0:focus-within > .pf-header__submenu,
  .pf-header__item--depth-0.is-open > .pf-header__submenu {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
  }

  /* Mega-menu: el panel se ancla al contenedor de la cabecera, no al elemento. */
  .pf-header__item--mega {
    position: static;
  }

  .pf-header__item--mega > .pf-header__submenu {
    right: 0;
    left: 0;
    min-width: 0;
    padding: var(--pf-space-md) var(--pf-gutter);
  }

  /* `auto-fill` y nunca `auto-fit` (DEC-037). `auto-fit` colapsa las pistas
   * vacias, asi que un mega-menu con un solo grupo estiraria su columna a todo
   * el ancho de la cabecera: es el mismo sintoma del #70. Con `auto-fill` el
   * grupo conserva sus 14rem tanto si hay uno como si hay cuatro. */
  .pf-header__menu--mega {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    gap: var(--pf-space-md);
  }

  .pf-header__menu--mega > .pf-header__item--has-children > .pf-header__entry {
    margin-bottom: var(--pf-space-2xs);
    padding-bottom: var(--pf-space-2xs);
    border-bottom: 1px solid var(--pf-color-border);
  }

  .pf-header__menu--mega > .pf-header__item--has-children > .pf-header__entry > .pf-header__link {
    font-weight: var(--pf-weight-bold);
    color: var(--pf-color-heading);
  }

  .pf-header__menu--mega > .pf-header__item > .pf-header__entry > .pf-header__toggle-sub,
  .pf-header__menu--mega .pf-header__group-title {
    display: none;
  }

  /* Dentro del mega-menu los subniveles siempre estan visibles. */
  .pf-header__menu--mega .pf-header__submenu {
    display: block;
  }

  .pf-header__menu--depth-1:not(.pf-header__menu--mega) .pf-header__submenu {
    padding-inline-start: var(--pf-space-sm);
  }
}

/* -------------------------------------------------------------------------
 * Movil y tableta: cajon lateral con el menu y «Hablemos» al pie.
 * ---------------------------------------------------------------------- */

@media (max-width: 1024px) {
  .pf-header {
    --pf-header-main-height: 64px;
    --pf-header-logo-height: 32px;
  }

  .pf-header__main > .pf-header__inner {
    gap: var(--pf-space-2xs);
  }

  .pf-header__burger {
    display: inline-flex;
    order: 3;
  }

  .pf-header__actions {
    order: 2;
    margin-inline-start: auto;
  }

  /* En la barra quedan logo y hamburguesa: «Hablemos» baja al cajon. */
  .pf-header__cta--bar {
    display: none;
  }

  .pf-header__nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: var(--pf-z-modal);
    width: var(--pf-header-drawer-width);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--pf-header-panel-bg);
    color: var(--pf-header-panel-text);
    box-shadow: var(--pf-shadow-lg);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform var(--pf-transition), visibility 0s linear 180ms;
  }

  .pf-header.is-nav-open .pf-header__nav {
    transform: none;
    visibility: visible;
    transition-delay: 0s;
  }

  /* -- Camino sin JavaScript (issue #120) ---------------------------------
   * El aparcado de arriba NO lleva guarda `.has-js` a proposito: el estado previo
   * al script tiene que ser identico al estado sin script con el cajon cerrado,
   * o cada carga movil pintaria todas las entradas del menu en flujo bajo la barra
   * hasta que el script del pie anadiera la clase. Lo que abre el cajon sin script es
   * `:target`, con el enlace de <noscript> a `#pf-header-nav`; la guarda
   * `:not(.has-js)` esta en ESTA regla para que, con JavaScript, una URL que
   * traiga ese fragmento no abra el cajon por detras del estado del script (sin
   * `is-nav-open`, sin `aria-expanded`, sin atrapado de foco). */
  .pf-header:not(.has-js) .pf-header__nav:target {
    transform: none;
    visibility: visible;
    transition-delay: 0s;
  }

  /* El enlace de apertura se superpone en absoluto sobre la caja de la hamburguesa
   * (misma caja de 2.75rem, mismo borde derecho, mismo centro vertical): el
   * <noscript> va detras del <button> en el DOM y esta posicionado, asi que pinta
   * encima y recibe el clic aunque el boton siga visible. */
  .pf-header__noscript--open {
    display: block;
    position: absolute;
    top: 50%;
    right: var(--pf-gutter);
    transform: translateY(-50%);
  }

  /* El <button> inerte no puede ser parada de tabulador sin script ni quedar como
   * segundo icono al lado del enlace. Se oculta SOLO cuando el enlace de <noscript>
   * existe en el DOM, que es la unica senal de que el navegador no ejecuta script:
   * con `:not(.has-js)` a secas el boton desapareceria en cada carga con
   * JavaScript hasta que corriera el script del pie, un parpadeo en las 150 URLs.
   * `visibility` y no `display`: conserva la caja de 2.75rem y el flujo. Sin
   * soporte de `:has()` la regla se ignora y queda un boton visible e inerte
   * debajo del enlace, que sigue recibiendo el clic. */
  .pf-header__inner:has(> .pf-header__noscript--open > .pf-header__nav-open) .pf-header__burger {
    visibility: hidden;
  }

  .pf-header__nav-open,
  .pf-header__nav-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--pf-radius-sm);
    color: inherit;
    text-decoration: none;
  }

  .pf-header__nav-open .pf-icon,
  .pf-header__nav-close .pf-icon {
    width: 1.5rem;
    height: 1.5rem;
  }

  /* Cierre sin script: en la franja superior del cajon que deja libre el
   * `padding-top` de `__nav-inner`, en la misma posicion de pantalla que la
   * hamburguesa cuando el cajon ocupa todo el ancho. */
  .pf-header__noscript--close {
    display: block;
    position: absolute;
    top: calc((var(--pf-header-main-height) - 2.75rem) / 2);
    right: var(--pf-gutter);
  }

  .pf-header__nav-close {
    color: var(--pf-header-panel-link);
  }
  /* -- fin del camino sin JavaScript --------------------------------------- */

  .pf-header__nav-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--pf-space-lg);
    min-height: 100%;
    padding: calc(var(--pf-header-main-height) + var(--pf-space-sm)) var(--pf-gutter) var(--pf-space-lg);
  }

  .pf-header__menu--depth-0 {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .pf-header__item + .pf-header__item {
    border-top: 1px solid var(--pf-color-border);
  }

  .pf-header__entry {
    justify-content: space-between;
  }

  .pf-header__link {
    flex: 1 1 auto;
    padding-block: var(--pf-space-xs);
    color: var(--pf-header-panel-link);
    font-size: var(--pf-text-base);
  }

  .pf-header__link:hover,
  .pf-header__link:focus-visible {
    color: var(--pf-color-brand);
  }

  .pf-header__item--depth-0.is-current > .pf-header__entry > .pf-header__link,
  .pf-header__item--depth-0.is-ancestor > .pf-header__entry > .pf-header__link {
    text-decoration: none;
    color: var(--pf-color-brand);
  }

  .pf-header__toggle-sub {
    width: 2.75rem;
    height: 2.75rem;
    margin: 0;
    color: var(--pf-header-panel-link);
  }

  .pf-header__submenu {
    padding: 0 0 var(--pf-space-2xs) var(--pf-space-sm);
    background: none;
  }

  /* Con JavaScript los submenus arrancan plegados y el boton los abre. Sin
   * JavaScript (sin la clase has-js) se pintan abiertos y todo sigue accesible. */
  .pf-header.has-js .pf-header__item--has-children:not(.is-open) > .pf-header__submenu {
    display: none;
  }

  .pf-header__submenu .pf-header__item + .pf-header__item {
    border-top: 0;
  }

  /* Pie del cajon: solo «Hablemos», a todo el ancho. */
  .pf-header__nav-footer {
    display: flex;
    flex-direction: column;
    gap: var(--pf-space-sm);
    margin-top: auto;
    padding-top: var(--pf-space-md);
    border-top: 1px solid var(--pf-color-border);
  }

  .pf-header__cta--drawer {
    display: inline-flex;
    width: 100%;
    margin: 0;
    min-height: 3rem;
    font-size: var(--pf-text-base);
  }

  /* Velo tras el cajon: SIEMPRE oscuro, en los dos modos. Cuelga de `bg-ink` y no
   * de `ink`, que en modo oscuro es una tinta CLARA y dejaba un velo blanquecino
   * sobre la pagina oscura (mismo defecto que los overlays del hero, issue #112). */
  .pf-header__backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: var(--pf-z-overlay);
    background: color-mix(in srgb, var(--pf-color-bg-ink) 55%, transparent);
    opacity: 0;
    transition: opacity var(--pf-transition);
  }

  .pf-header.is-nav-open .pf-header__backdrop {
    opacity: 1;
  }

  /* El boton de cerrar del cajon: la hamburguesa se queda por encima del panel. */
  .pf-header.is-nav-open .pf-header__burger {
    position: relative;
    z-index: calc(var(--pf-z-modal) + 1);
    color: var(--pf-header-panel-link);
  }
}

/* Mientras el cajon esta abierto el documento no se desplaza detras. */
body.pf-nav-open {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .pf-header__nav,
  .pf-header__backdrop,
  .pf-header__submenu,
  .pf-header__toggle-sub .pf-icon {
    transition: none;
  }
}