/* ==========================================================================
   header.css
   --------------------------------------------------------------------------
   Menú de navegación de la cabecera.

   El marcado (<nav id="menu"> … <ul class="header-menu">) lo genera el tema
   padre en template-parts/menu/content-menu.php. Aquí NO se toca el padre:
   todo se resuelve sobrescribiendo su CSS desde el hijo.

   Se carga DESPUÉS de components.css y ANTES de hero.css.

   --------------------------------------------------------------------------
   DOS EXCEPCIONES A NUESTRAS NORMAS, ambas impuestas por el padre:

   1. SELECTORES CON ID. El padre estiliza con #menu > ul > li, que tiene
      especificidad (1,0,1). Una clase nuestra (0,1,0) nunca ganaría. Para no
      llenar esto de !important —que es peor— se replica el mismo peso usando
      #menu. Es el único módulo del proyecto donde ocurre.

   2. BREAKPOINT 1050px, no 1024px. El padre cambia a menú hamburguesa en
      max-width: 1050px. Si usáramos nuestro 1024px, entre 1024 y 1050 se
      aplicarían los estilos de escritorio sobre el panel lateral móvil.
      El breakpoint del menú lo manda quien controla el interruptor.
   ========================================================================== */


/* --------------------------------------------------------------------------
   Común a los dos modos
   -------------------------------------------------------------------------- */

#menu .header-menu a {
  font-family: var(--font-primary);
  transition: color 0.2s ease, background-color 0.2s ease;
}

/* Foco de teclado visible. El padre no lo define en ningún sitio: hoy quien
   navega con tabulador no ve dónde está. */
#menu .header-menu a:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 2px;
}


/* ==========================================================================
   ESCRITORIO — a partir de 1050px
   ========================================================================== */

@media (min-width: 1050px) {

  /* ------------------------------------------------------------------------
     Fila de enlaces.
     El padre separa con margin-left: 30px y luego lo anula en :first-child.
     Con flex + gap la separación es una sola declaración y no hay excepción
     que mantener.
     ---------------------------------------------------------------------- */
  #menu > ul.header-menu {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 4px 30px;
  }

  #menu > ul.header-menu > li {
    /* Se sustituye el line-height: 60px del padre por line-height normal más
       padding: el alto total queda casi igual (~59px, así la cabecera no se
       mueve), pero ahora el área pulsable es el enlace entero y no una caja
       de texto con 40px de aire muerto alrededor. */
    line-height: 1.2;
    margin: 0;
    display: flex;
    align-items: center;
  }

  #menu > ul.header-menu > li > a {
    position: relative;
    display: inline-block;
    padding-block: 20px;

    font-size: 0.9375rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: var(--color-text);
  }

  /* ------------------------------------------------------------------------
     Subrayado animado.
     Se dibuja con un pseudoelemento y se anima con scaleX, no con width: el
     navegador lo resuelve en la GPU y no recalcula la maquetación en cada
     fotograma.
     ---------------------------------------------------------------------- */
  #menu > ul.header-menu > li > a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 16px;

    height: 2px;
    background-color: var(--color-accent);

    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.25s cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  #menu > ul.header-menu > li > a:hover,
  #menu > ul.header-menu > li > a:focus-visible {
    color: var(--color-primary);
  }

  #menu > ul.header-menu > li > a:hover::after,
  #menu > ul.header-menu > li > a:focus-visible::after {
    transform: scaleX(1);
  }

  /* ------------------------------------------------------------------------
     Página actual.
     WordPress marca el <li> con estas clases. El padre no las usa para nada,
     así que ahora mismo no hay forma de saber en qué sección estás.
     ---------------------------------------------------------------------- */
  #menu > ul.header-menu > li.current-menu-item > a,
  #menu > ul.header-menu > li.current_page_item > a,
  #menu > ul.header-menu > li.current-menu-ancestor > a {
    color: var(--color-primary);
    font-weight: 600;
  }

  #menu > ul.header-menu > li.current-menu-item > a::after,
  #menu > ul.header-menu > li.current_page_item > a::after,
  #menu > ul.header-menu > li.current-menu-ancestor > a::after {
    transform: scaleX(1);
  }

  /* ------------------------------------------------------------------------
     .gt-menu-cta — "Contacto" como llamada a la acción.
     La clase la pone un filtro en functions.php sobre el último elemento del
     menú; también puede asignarse a mano desde Apariencia → Menús.

     Es el único elemento del menú en color de acento: si hubiera más, dejaría
     de destacar. Y no lleva el subrayado animado del resto, porque ya no es un
     enlace de navegación sino un botón.
     ---------------------------------------------------------------------- */
  #menu > ul.header-menu > li.gt-menu-cta > a {
    padding: 11px 26px;

    background-color: var(--color-accent);
    color: var(--color-bg);
    border-radius: 3px;

    font-weight: 600;
    letter-spacing: 0.02em;

    box-shadow: 0 2px 8px rgba(201, 70, 68, 0.28);

    transition:
      background-color 0.25s ease,
      box-shadow 0.25s ease,
      transform 0.25s cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  /* Sin barra inferior: aquí sobra */
  #menu > ul.header-menu > li.gt-menu-cta > a::after {
    content: none;
  }

  #menu > ul.header-menu > li.gt-menu-cta > a:hover,
  #menu > ul.header-menu > li.gt-menu-cta > a:focus-visible {
    /* Tono derivado del propio token: si cambia la paleta, el hover cambia
       solo. Sin color-mix (Safari < 16.2) se queda el color base, que sigue
       siendo correcto. */
    background-color: color-mix(in srgb, var(--color-accent) 86%, #000);
    color: var(--color-bg);

    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(201, 70, 68, 0.38);
  }

  #menu > ul.header-menu > li.gt-menu-cta > a:active {
    transform: translateY(0);
  }

  #menu > ul.header-menu > li.gt-menu-cta > a:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 3px;
  }

  /* La página actual no debe repintar el botón con los estilos genéricos */
  #menu > ul.header-menu > li.gt-menu-cta.current-menu-item > a {
    color: var(--color-bg);
  }

}


/* ==========================================================================
   MÓVIL Y TABLET — hasta 1049.98px
   El menú es un panel que entra desde la izquierda. Los enlaces heredaban el
   line-height: 60px de escritorio y quedaban como texto suelto, sin área
   pulsable clara ni separación entre ellos.
   ========================================================================== */

@media (max-width: 1049.98px) {

  #menu > ul.header-menu > li {
    line-height: 1.3;
    margin: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  }

  #menu > ul.header-menu > li > a {
    display: block;

    /* 16px arriba y abajo sobre un texto de ~21px deja una fila de ~53px:
       por encima del mínimo cómodo para el dedo. */
    padding: 16px 20px;

    font-size: 1rem;
    font-weight: 500;

    /* MARCADO, Y NO POR GUSTO. Dentro del panel de móvil el padre pinta TODOS los
       enlaces del menú con `header #menu a { color: #222 !important }`. Sin
       contestarle con otra marca, el color del sitio no llega a verse en ninguna
       fila del panel. */
    color: var(--color-text) !important;
  }

  #menu > ul.header-menu > li > a:hover,
  #menu > ul.header-menu > li > a:focus-visible {
    background-color: rgba(37, 73, 97, 0.06);   /* --color-primary al 6% */
    color: var(--color-primary);
  }

  /* Página actual: marca lateral en color de acento, que en una lista vertical
     se localiza de un vistazo mejor que un subrayado. */
  #menu > ul.header-menu > li.current-menu-item > a,
  #menu > ul.header-menu > li.current_page_item > a,
  #menu > ul.header-menu > li.current-menu-ancestor > a {
    box-shadow: inset 3px 0 0 var(--color-accent);
    color: var(--color-primary);
    font-weight: 600;
  }

  /* ------------------------------------------------------------------------
     .gt-menu-cta en el panel lateral.
     Dentro de una lista vertical, un botón a ancho completo al final del menú
     se lee mejor que una fila más pintada de rojo.
     ---------------------------------------------------------------------- */
  #menu > ul.header-menu > li.gt-menu-cta {
    border-bottom: 0;
    padding: 16px 20px 8px;
  }

  /* EL BLANCO VA MARCADO, Y AQUÍ NO ERA COSMÉTICO. El `color: #222 !important`
     del padre también alcanzaba a este botón: «Contacto» salía en gris oscuro
     sobre el rojo de la marca, un contraste de 3,1 a 1 —por debajo del mínimo
     legible— y llevaba así desde que existe el panel. Solo se ve abriendo el menú
     en un teléfono, que es justo donde nadie mira. Con el blanco de vuelta son
     4,7 a 1. */
  #menu > ul.header-menu > li.gt-menu-cta > a {
    padding: 14px 20px;

    background-color: var(--color-accent);
    color: var(--color-bg) !important;
    border-radius: 3px;

    font-weight: 600;
    letter-spacing: 0.02em;
    text-align: center;

    box-shadow: 0 2px 8px rgba(201, 70, 68, 0.28);
  }

  #menu > ul.header-menu > li.gt-menu-cta > a:hover,
  #menu > ul.header-menu > li.gt-menu-cta > a:focus-visible {
    background-color: color-mix(in srgb, var(--color-accent) 86%, #000);
    color: var(--color-bg);
  }

  #menu > ul.header-menu > li.gt-menu-cta.current-menu-item > a {
    box-shadow: 0 2px 8px rgba(201, 70, 68, 0.28);
    color: var(--color-bg);
  }

}


/* --------------------------------------------------------------------------
   Accesibilidad — movimiento reducido
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

  #menu .header-menu a,
  #menu > ul.header-menu > li > a::after {
    transition: none;
  }

  #menu > ul.header-menu > li.gt-menu-cta > a:hover,
  #menu > ul.header-menu > li.gt-menu-cta > a:focus-visible {
    transform: none;
  }

}


/* ==========================================================================
   SUBMENÚS
   ==========================================================================
   El padre trae CSS para los submenús —posición absoluta, sombra, 16rem— pero
   los deja en `display: none` y no enciende ninguno. Aquí se rehace el panel con
   el aspecto del sitio y se abre con la clase que pone assets/js/menu.js.

   LOS SELECTORES LLEVAN #menu POR OBLIGACIÓN, no por gusto: el padre estiliza el
   menú con ID —`#menu ul>li ul`, especificidad 1-0-1— y una clase no le gana.
   Es la excepción del proyecto, la misma que ya está documentada arriba.
   ========================================================================== */

/* LOS GALONES DEL PADRE SE APAGAN, y son DOS, no uno. El tema padre dibuja el
   mismo cuadradito girado 45 grados desde dos sitios distintos:

     #menu ul .menu-item-has-children::after      → el del escritorio
     #menu ul > .menu-item-has-children::before   → el del panel de móvil

   Apagando solo el primero, en el escritorio quedaba un galón —el nuestro— y en
   el teléfono dos, uno mirando arriba y otro abajo A LA VEZ, como si el elemento
   estuviera abierto y cerrado al mismo tiempo. Se ve solo en móvil y solo con el
   panel desplegado, que es por donde se había colado.

   Ninguno de los dos es pulsable ni anuncia nada: son adorno. El de aquí es un
   <button> de verdad, con su estado y su nombre accesible, y dos galones seguidos
   serían dos promesas para una sola acción. */
#menu ul .menu-item-has-children::after,
#menu ul .menu-item-has-children::before,
#menu ul > .menu-item-has-children::after,
#menu ul > .menu-item-has-children::before {
  content: none;
}

/* El galón que anuncia que hay más dentro. Lo añade el script, así que quien
   edita el menú en el escritorio no tiene que saber nada de esto.

   EL GALÓN ES PARTE DE LA PALABRA, no un botón al lado. Entre la «a» de
   Compañía y el dibujo había 19,5px de aire —más de lo que separa dos letras de
   dos palabras distintas—, y a esa distancia el ojo lo lee como un icono suelto
   que no se sabe de quién es. Esos 19,5px eran tres cosas sumadas: 8px de
   relleno que el padre le pone al enlace, 4px de hueco entre los dos y 7,5px de
   relleno propio del botón, que medía 26px para un dibujo de 11. Se quitan las
   tres —el relleno del padre y el hueco abajo, en el bloque de escritorio— y
   quedan 5px, que es un espacio de palabra.

   MÁS APAGADO QUE EL TEXTO. Un galón del mismo negro que la palabra pesa lo
   mismo que ella y compite por la mirada; en gris azulado se lee como lo que es,
   una marca de que ahí dentro hay más. */
#menu .gt-menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 24px;                 /* WCAG 2.5.8: mínimo 24×24 */
  height: 26px;
  padding: 0;

  background: none;
  border: 0;
  color: #7f909b;
  color: color-mix(in srgb, var(--color-primary) 55%, var(--color-bg));
  cursor: pointer;

  transition: transform 0.2s ease, color 0.2s ease;
}

#menu .gt-menu-toggle svg {
  width: 10px;
  height: 7px;
}

/* Al abrir el submenú —y al pasar por encima del elemento— el galón toma el
   color del texto: deja de ser un adorno y pasa a ser parte de la palabra que
   está abierta. */
#menu .menu-item-has-children:hover > .gt-menu-toggle,
#menu .gt-menu-open > .gt-menu-toggle {
  color: var(--color-primary);
}

/* Abierto, el galón mira hacia arriba: es la única señal que queda cuando el
   panel se sale de la vista al hacer scroll. */
#menu .gt-menu-open > .gt-menu-toggle {
  transform: rotate(180deg);
}

#menu .gt-menu-toggle:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 3px;
}

/* El texto del padre, cuando abre el submenú, es un control y no un enlace: el
   cursor tiene que decirlo. */
#menu .menu-item-has-children > a[role="button"] {
  cursor: pointer;
}


@media (min-width: 1050px) {

  /* El elemento padre y su galón, en la misma línea y SIN HUECO ENTRE LOS DOS:
     el aire que necesitan ya lo pone el propio botón, que es más ancho que su
     dibujo. Sumar aquí otro hueco era contar dos veces el mismo espacio. */
  #menu > ul.header-menu > li.menu-item-has-children {
    display: flex;
    align-items: center;
    gap: 0;
  }

  /* LOS QUE NO DESPLIEGAN RESERVAN EL SITIO DEL GALÓN.
     ------------------------------------------------------------------------
     El galón mide 20px y vive dentro del <li>, así que «Servicios» ocupa 20px
     más que su palabra y «Noticias» exactamente lo que mide la suya. Con el
     hueco de la lista fijo en 30px, el aire real entre pestañas era de 30px
     después de las que despliegan y de 30px después de las que no… pero medido
     desde sitios distintos: el ojo veía las dos últimas más juntas.

     Reservando los mismos 20px, las seis pestañas se separan igual.

     CONTACTO QUEDA FUERA: es el botón rojo y tiene su propio relleno de 26px;
     añadirle 20 más lo dejaría descentrado dentro de su propia caja. */
  /* EL HUECO VA EN EL <li>, NO EN EL <a>. Puesto en el enlace, el subrayado
     rojo —que es un ::after del <a> con left:0 right:0— se estiraba también
     sobre esos 20px y quedaba más largo que la palabra. En el <li> el enlace
     conserva el ancho de su texto y la raya vuelve a medir lo que mide la
     palabra, igual que en las pestañas que despliegan. */
  #menu > ul.header-menu > li:not(.menu-item-has-children):not(.gt-menu-cta) {
    padding-right: 20px;
  }

  /* EL RELLENO DEL PADRE, FUERA. `#menu ul .menu-item-has-children a` le pone
     medio rem a la derecha para dejar sitio a SU galón —el cuadradito girado que
     aquí arriba se apaga—. Como ese galón ya no está, ese medio rem no separaba
     nada: solo alejaba el nuestro. */
  #menu > ul.header-menu > li.menu-item-has-children > a {
    padding-right: 0;
  }

  /* EL PANEL. Se sobrescribe entero lo del padre: allí es blanco, de 16rem y
     alineado al borde DERECHO del elemento; aquí cuelga del izquierdo, debajo de
     la palabra que lo abre, que es donde el ojo lo busca.

     CUELGA DE LA CABECERA, NO DE LA PALABRA. Estaba ocho píxeles más arriba,
     metido dentro de la barra: la caja blanca se comía el filo inferior de la
     cabecera y las dos piezas se pegaban en una sola mancha. Arrancando justo
     donde acaba la cabecera se lee lo que es —algo que se ha desplegado DESDE la
     barra— y el menú de arriba sigue entero.

     SIN FILO ROJO. Lo llevó, de tres píxeles, y no funcionaba: un panel blanco
     con una raya roja encima no parece un menú, parece un aviso. El rojo en este
     sitio señala una acción o marca dónde se está; aquí no hacía ni lo uno ni lo
     otro, solo decoraba. Lo que ata el panel a la cabecera es la sombra.

     EN COLUMNA FLEXIBLE Y NO EN BLOQUE. Con `display: block` la fila se quedaba
     en 90px —el ancho de su palabra más larga— y «Trabaja con nosotros» salía
     partido en cuatro renglones. En una columna flexible las filas se estiran
     solas, sin tener que averiguar quién le estaba fijando el ancho al <li>.

     Y EL PANEL MIDE LO QUE MIDE SU CONTENIDO: con un mínimo de 15rem, un submenú
     de una sola entrada era una caja de 288px medio vacía, como si faltara algo
     por cargar.

     `left` Y `right` LLEVAN !important porque el script del padre los escribe EN
     LÍNEA —`style="left: initial; right: 0px"`— y a una declaración en línea solo
     se le gana con una marcada.

     `display` y `visibility` van los dos porque el padre pone los dos: dejar uno
     sin contestar deja el panel invisible ocupando sitio, o al revés. */
  #menu > ul.header-menu > li > ul.sub-menu {
    display: flex;
    flex-direction: column;
    visibility: hidden;
    opacity: 0;
    z-index: 20;

    position: absolute;
    top: calc(100% + 1px);

    /* MENOS VEINTIÚN PÍXELES, que no es un número al azar: son 1 píxel de
       filo, los 6 de relleno del panel y los 14 de la fila. Con el panel a cero,
       el texto de dentro arrancaba a la derecha de la palabra que lo abre y las
       dos columnas no se veían emparentadas. Descontándolos, «Trabaja con nosotros»
       cae exactamente bajo la «C» de «Compañía». */
    left: -21px !important;
    right: auto !important;

    /* SE AJUSTA AL TEXTO, Y HAY QUE PELEARLO CON !important.
       El padre declara `#menu ul > li ul { width: 36rem !important }` —576px—,
       así que nuestro `width: auto` a secas no llegaba a aplicarse nunca: el
       panel medía 576 y solo lo frenaba el max-width de abajo, que lo dejaba
       clavado en 352px SIEMPRE, tuviera tres palabras o siete. Por eso parecía
       que `max-content` no funcionaba: no es que no funcionara, es que perdía.

       Con max-content cada panel mide lo que mide su entrada más larga: el de
       Servicios ronda los 160px y el de Compañía, con «Trabaja con nosotros»,
       los 200. El mínimo evita que un submenú de dos palabras quede como una
       pastilla suelta; el máximo, que uno largo cruce media pantalla. */
    width: max-content !important;
    min-width: 10rem;

    /* 22rem, y el número sale de medir. Estaba en 16rem —256px— de cuando el
       único submenú era «Trabaja con nosotros». Con Almacenaje a siete entradas,
       «Depósito Fiscal de Hidrocarburos» pide 292px, y como las filas iban en
       `nowrap` el texto NO se ajustaba: se salía del panel y se leía encima de la
       foto del hero. A 22rem (352px) caben las siete con holgura. */
    max-width: 22rem;
    margin: 0;
    padding: 6px;

    background-color: var(--color-bg);
    border: 1px solid #e3e8ec;
    border: 1px solid color-mix(in srgb, var(--color-primary) 10%, transparent);
    border-radius: 4px;

    /* DOS SOMBRAS Y NO UNA. La corta y cerrada despega el panel del contenido; la
       larga y muy abierta le da el peso de algo que flota por encima. Una sola
       sombra tiene que elegir entre las dos cosas y siempre parece sucia. */
    box-shadow:
      0 2px 4px rgba(37, 73, 97, 0.06),
      0 12px 28px -8px rgba(37, 73, 97, 0.22);

    /* Entra bajando cuatro píxeles: el gesto dice de dónde sale. */
    transform: translateY(-4px);
    transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s ease;
  }
  #menu > ul.header-menu > li.gt-menu-open > ul.sub-menu {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
  }

  /* La fila del panel: entera pulsable, no solo la palabra.

     EL !important ES OBLIGADO. El padre monta sus submenús a TRES COLUMNAS:
     `#menu > ul > li ul > li { width: 33.333333% !important }`. Con una sola
     entrada, esa fila medía 90px dentro de un panel de 288 y «Trabaja con
     nosotros» salía partido en cuatro renglones de una palabra. A una
     declaración marcada solo se le gana con otra marcada: no hay selector, por
     largo que sea, que la tumbe.

     `float: none` por lo mismo, aunque ahí baste la especificidad: el padre las
     flota a la izquierda para formar esas columnas. */
  #menu > ul.header-menu > li > ul.sub-menu > li {
    display: block;
    float: none;

    /* `auto` y no `100%`: en una columna flexible los hijos se estiran solos, y el
       100% impedía además que el panel pudiera medirse por su contenido —se iba
       siempre al máximo—. El !important sigue haciendo falta: el padre fuerza
       `width: 33.333%` para repartir sus submenús a tres columnas. */
    width: auto !important;
    background: none;
  }

  /* NUNCA MÁS GORDAS QUE EL MENÚ DE ARRIBA. Estaban en 600 cuando los elementos
     de la cabecera están en 500: el submenú gritaba más que el menú del que
     cuelga, y lo primero que se leía de toda la barra era su interior. Al mismo
     peso, cada cosa pesa lo que le toca. */
  #menu > ul.header-menu > li > ul.sub-menu > li > a {
    display: block;
    padding: 9px 14px;

    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.35;
    color: var(--color-primary);

    /* SIN `nowrap`. Lo llevaba para que un nombre corto no se partiera en dos
       cuando el panel medía lo mínimo, y el remedio salió peor que la enfermedad:
       una entrada más larga que el tope del panel no se ajustaba, se salía por el
       lado derecho y quedaba escrita sobre el contenido de la página.

       Con el ancho automático, el panel ya crece hasta la entrada más larga y
       nada se parte por gusto; esto solo entra en juego cuando alguien añada al
       menú un nombre más largo de 22rem, y entonces lo correcto es que baje de
       renglón y no que se derrame. */
    overflow-wrap: break-word;

    border-radius: 3px;
    transition: background-color 0.15s ease, color 0.15s ease;
  }

  /* EL COLOR LLEVA !important, Y NO HAY MANERA DE EVITARLO. El padre trae
     `.site-header .sub-menu a { color: #222 !important }`: un gris casi negro
     marcado, que a lo largo de este archivo se llevaba por delante el azul de
     estas filas y —peor— el rojo al pasar el ratón, que sencillamente no llegaba
     a verse. A una declaración marcada solo se le gana con otra marcada: no hay
     selector, por largo que sea, que la tumbe.

     Van en reglas aparte y no en las de arriba para que se vea de un vistazo qué
     está marcado y por qué. Lo demás —tamaño, peso, relleno— no lo está. */
  #menu > ul.header-menu > li > ul.sub-menu > li > a {
    color: var(--color-primary) !important;
  }

  /* EL FONDO SE TIÑE DE AZUL Y EL TEXTO SE PONE ROJO. Antes se teñía de rojo,
     y un rectángulo rosa detrás de un texto negro no dice «esto es lo que vas a
     pulsar»: dice que ese renglón está marcado por algo. El que responde tiene
     que ser el texto, que es lo que se pulsa; el fondo solo acompaña. */
  #menu > ul.header-menu > li > ul.sub-menu > li > a:hover,
  #menu > ul.header-menu > li > ul.sub-menu > li > a:focus-visible {
    background-color: #f2f5f7;
    background-color: color-mix(in srgb, var(--color-primary) 6%, var(--color-bg));
    color: #a03836 !important;
    color: color-mix(in srgb, var(--color-accent) 86%, #000) !important;
  }

  /* La página en la que ya se está, marcada como en el resto del menú. */
  #menu > ul.header-menu > li > ul.sub-menu > li.current-menu-item > a {
    color: #a03836 !important;
    color: color-mix(in srgb, var(--color-accent) 86%, #000) !important;
    font-weight: 600;
  }

}


@media (max-width: 1049.98px) {

  /* EN EL PANEL LATERAL NO HAY SITIO PARA UN DESPLEGABLE FLOTANTE: el submenú se
     abre en línea, empujando lo de abajo, como un acordeón. Es lo que se espera
     de un menú de teléfono y no tapa lo que el visitante estaba mirando. */
  #menu > ul.header-menu > li.menu-item-has-children {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
  }

  /* AQUÍ NO SE ABRE CON `display`, SE ABRE CON `max-height`, y no es un capricho:
     es que en móvil el submenú ya lo maneja el tema padre. Su script le pone
     `style="display: block"` EN LÍNEA al cargar la página, y una declaración en
     línea gana a cualquier hoja de estilos que no lleve !important. Pelearse con
     eso a base de marcas sería empezar una guerra que se pierde en la siguiente
     actualización del padre.

     Lo que el padre usa para plegar es `max-height: 0` con `overflow: hidden`, y
     lo abre con `max-height: 800px` en su clase `.show`. Así que se le sigue el
     juego con la clase de aquí: mismo mecanismo, nuestro estado.

     Y AQUÍ VAN DOS !important, que no son pereza. El script del padre no se
     limita al CSS: al pulsar escribe `style="max-height: 0px"` DIRECTAMENTE en el
     elemento, y una declaración en línea gana a cualquier hoja que no lleve
     marca. Con el submenú abierto, su cero en línea lo dejaba plegado y el
     visitante veía el galón girar sin que apareciera nada. Marcados los dos
     estados, el único que manda es el de aquí, abra quien abra.

     El tope al abrir es 70vh y no los 800px del padre: en una pantalla de 667px
     de alto, 800 dejarían el último enlace fuera sin poder llegar a él. */
  #menu > ul.header-menu > li > ul.sub-menu {
    grid-column: 1 / -1;

    max-height: 0 !important;
    overflow: hidden;

    position: static;
    width: auto;
    margin: 0;
    padding: 0 0 0 14px;

    background: none;
    border: 0;
    border-left: 2px solid #dde3e8;
    border-left: 2px solid color-mix(in srgb, var(--color-primary) 16%, transparent);
    box-shadow: none;

    transition: max-height 0.25s ease;
  }

  #menu > ul.header-menu > li.gt-menu-open > ul.sub-menu {
    max-height: 70vh !important;
    overflow-y: auto;
    visibility: visible;
    opacity: 1;

    margin-bottom: 8px;
  }

  #menu > ul.header-menu > li > ul.sub-menu > li {
    background: none;
  }

  /* 44px de alto: el mínimo para acertar con el pulgar sin apuntar. */
  /* Marcado por lo mismo que en escritorio: `.site-header .sub-menu a` del padre
     lleva !important y sin contestarle estas filas salen en gris. */
  #menu > ul.header-menu > li > ul.sub-menu > li > a {
    display: block;
    padding: 11px 0;

    font-size: 0.9375rem;
    line-height: 1.35;
    color: var(--color-primary) !important;
  }

  /* El galón, más grande: aquí se pulsa con el dedo. */
  #menu .gt-menu-toggle {
    width: 44px;
    height: 44px;
  }

}


@media (prefers-reduced-motion: reduce) {

  #menu .gt-menu-toggle,
  #menu > ul.header-menu > li > ul.sub-menu {
    transition: none;
  }

}

/* ==========================================================================
   .gt-topbar — franja de contacto por encima de la cabecera
   ==========================================================================
   SOLO DE 1024px ARRIBA. En móvil sería una franja más sobre una pantalla que
   ya va justa, y el contacto está en el pie y en el menú. Se oculta con
   display: none, no con visibility: los enlaces tampoco deben ser tabulables
   donde no se ven.

   Va ANTES de la cabecera en el marcado, así que se va con el scroll y la
   cabecera —sticky— se queda pegada arriba cuando la alcanza. Es lo que se
   espera de una barra de utilidades: acompaña al principio y no vuelve.

   GRIS, no azul: la barra es un dato de servicio, no una pieza de marca. Sobre
   el gris el texto va en azul corporativo —7:1 de contraste— y al pasar el ratón
   se oscurece hasta el negro del texto.

   EL HOVER NO ES ROJO. El rojo sobre este gris se queda en 4,4:1, justo por
   debajo del 4,5:1 que pide la norma para texto pequeño; y en este sitio el rojo
   señala acciones, no escribe.
   ========================================================================== */
.gt-topbar {
  display: none;
  background-color: var(--color-bg-alt);
}

.gt-topbar a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color 0.2s ease;
}

.gt-topbar a:hover,
.gt-topbar a:focus-visible {
  color: var(--color-text);
}

@media (min-width: 1024px) {

  .gt-topbar { display: block; }

  .gt-topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;

    min-height: 38px;
  }

  .gt-topbar__contact,
  .gt-topbar__social {
    display: flex;
    align-items: center;

    margin: 0;
    padding: 0;
    list-style: none;
  }

  .gt-topbar__contact { gap: 28px; }
  .gt-topbar__social  { gap: 14px; }

  .gt-topbar__contact a {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    font-family: var(--font-primary);
    font-size: 0.8125rem;
    line-height: 1.2;
  }

  /* El icono acompaña al dato, no lo anuncia: 15px, el alto de la línea. */
  .gt-topbar__icon svg {
    display: block;
    width: 15px;
    height: 15px;
  }

  .gt-topbar__social a {
    display: block;
    padding: 4px;   /* área de pulsación, sin agrandar el dibujo */
  }

  .gt-topbar__social svg {
    display: block;
    width: 15px;
    height: 15px;
  }

}


/* ==========================================================================
   .lang-item — el selector de idioma de Polylang en el menú
   ==========================================================================
   Polylang inyecta un <li> por idioma con la clase .lang-item, y el del idioma
   activo además .current-lang. Aquí se muestran los CÓDIGOS —es · en · it— y no
   los nombres: con «Español English Italiano» y sus banderas, la barra medía
   380px de más y Contacto caía a una segunda línea.

   Los tres van juntos y separados del resto: son una unidad, no tres pestañas
   más. El hueco de 30px de la lista se reduce a 2px entre ellos y se recupera
   por delante del grupo.
   ========================================================================== */
@media (min-width: 1050px) {

  #menu > ul.header-menu > li.lang-item {
    padding-right: 0;
  }

  /* EL AIRE Y EL FILETE VAN DELANTE DEL PRIMERO DE LOS TRES.
     Sin separación, «es en it» se leía como tres pestañas más del menú. El
     filete —1px al 12% del azul, la misma línea que usan las tarjetas— dice que
     lo de la derecha es de otra clase: una utilidad, no una sección.

     Es un borde y no un pseudoelemento porque el <li> ya está en el flujo y no
     hay que posicionar nada; y va con padding, no con margin, para que la línea
     quede a media distancia entre Blog y el grupo. */
  #menu > ul.header-menu > li.lang-item-first {
    /* LAS CUENTAS DEL CENTRADO. A la izquierda del filete se suman TRES cosas y
       no una: los 20px que «Blog» reserva para el galón que no tiene, los 30px
       de hueco de la lista y este margen. Con 16px de margen quedaba 66px a la
       izquierda contra 17 a la derecha: el filete parecía pegado a los idiomas.

       Con -20px se anula la reserva del galón, quedan los 30 del hueco, y con
       30 de relleno a la derecha el filete cae justo en medio. Entre «Blog» y
       «es» hay 60px, el doble que entre pestañas, que es lo que separa un grupo
       de otro. */
    /* SIN el -20px de antes. Aquel margen compensaba los 20px que reservan para
       el galón los elementos SIN desplegable, y el vecino de la izquierda era
       «Blog». Ahora es «Actualidad», que sí despliega y lleva su galón dentro
       del <li>, así que no hay nada que compensar: con margen cero y 30px de
       relleno, el filete queda a 30 de cada lado. */
    padding-left: 30px;
    border-left: 1px solid color-mix(in srgb, var(--color-primary) 12%, transparent);
  }

  #menu > ul.header-menu > li.lang-item + li.lang-item {
    margin-left: -20px;   /* absorbe el gap de 30px de la lista y deja 10 */
  }

  #menu > ul.header-menu > li.lang-item > a {
    display: inline-block;
    min-width: 24px;             /* WCAG 2.5.8 */
    text-align: center;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;

    /* Un punto más apagado que las pestañas: es navegación de servicio. */
    color: color-mix(in srgb, var(--color-text) 55%, var(--color-bg));
  }

  #menu > ul.header-menu > li.lang-item.current-lang > a {
    color: var(--color-primary);
  }

  #menu > ul.header-menu > li.lang-item > a:hover {
    color: var(--color-primary);
  }

}


/* --------------------------------------------------------------------------
   El selector en el menú desplegable de móvil
   --------------------------------------------------------------------------
   LOS TRES EN UNA FILA, no en tres. Cada elemento del menú de móvil es una fila
   de 54px; los tres idiomas ocupaban 162px —tanto como Servicios, Calidad y
   Compañía juntos— y se leían como tres secciones más.

   inline-block y no flex: la lista es un <ul> en bloque y los <li> son
   inline-table por el padre; pasándolos a inline-block se colocan solos en la
   misma línea sin tocar el resto de la lista.

   El borde inferior se queda SOLO en el último de los tres: si lo llevaran los
   tres, se verían tres rayas cortas seguidas en la misma línea.
   -------------------------------------------------------------------------- */
@media (max-width: 1049.98px) {

  #menu > ul.header-menu > li.lang-item {
    display: inline-block;
    width: auto;
    border-bottom: 0;
  }

  #menu > ul.header-menu > li.lang-item-first {
    padding-left: 4px;
  }

  #menu > ul.header-menu > li.lang-item > a {
    padding: 16px 12px;

    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--color-text) 55%, var(--color-bg));
  }

  #menu > ul.header-menu > li.lang-item.current-lang > a {
    color: var(--color-primary);
  }

  /* NO SE INTENTA CERRAR LA TIRA CON UNA RAYA. Se probó con
     .lang-item:last-of-type y no hace nada: :last-of-type mira el TIPO —li—, y
     el último <li> de la lista es Contacto, no «it». La tira queda abierta y se
     lee bien igual, porque debajo va el botón con su propio aire. */

}


/* Un idioma todavía sin traducir: se ve, pero no lleva a ninguna parte. El
   cursor por defecto —y no el de mano— es lo que avisa de que ahí no hay clic;
   el color lo deja igual que los demás idiomas inactivos, porque el día que se
   traduzca solo cambia el href. */
.gt-lang--pendiente {
  cursor: default;
}