/* ==========================================================================
   Menú de cabecera — panel desplegable de «Servicios»
   El panel blanco se confundía con el fondo claro del contenido a partir de
   la mitad de la lista: Astra no le pone borde y su sombra es mínima. Se
   resuelve con BORDE en todo el contorno, que es el recurso del sistema
   (tarjetas y fichas usan borde fino, no sombra — la sombra sería el patrón
   «SaaS» que se descartó a propósito).
   ========================================================================== */
.main-header-menu .sub-menu,
.main-navigation .sub-menu,
.ast-desktop .main-header-menu .sub-menu{
  border:1px solid rgba(16,22,26,.50);   /* ≥3:1 contra el panel y contra el fondo claro: es el límite de un componente de interfaz (WCAG 1.4.11) */
  /* Canto superior de marca: ancla el panel al elemento que lo abre y es el
     mismo guiño que el canto izquierdo de las tarjetas. */
  border-top:3px solid var(--gi-verde);
  border-radius:0 0 2px 2px;
  background:#fff;
}
/* Y SIN sombra. La pone Astra con su opción «sombra del menú» (clase
   .ast-menu-shadow en el <ul>, regla en main.min.css). El arreglo del 21/09
   añadió el borde pero no la anuló, y siguió saliendo en todos los
   desplegables hasta el 23/09. Mismo selector que Astra: carga después y gana. */
.ast-desktop .main-header-menu.ast-menu-shadow .sub-menu{box-shadow:none}

/* Separadores internos coherentes con el borde exterior, sin dobles líneas */
.main-header-menu .sub-menu li + li > a{border-top:1px solid rgba(16,22,26,.10)}
.main-header-menu .sub-menu li > a{border-bottom:0}

/* ==========================================================================
   Menú MÓVIL
   ========================================================================== */
@media (max-width:921px){

  /* --- Desenfoque del contenido de detrás -------------------------------
     El menú móvil de Astra va en el flujo (position:static) y EMPUJA el
     contenido: un backdrop-filter sobre el propio menú no tendría nada
     detrás que difuminar, sería una regla inerte. El desenfoque se hace con
     un velo fijo que cubre la página por debajo de la cabecera, así que el
     menú no se toca y no hay riesgo de romper el encabezado. */
  body.ast-main-header-nav-open::after{
    content:"";position:fixed;inset:0;z-index:5;pointer-events:none;
    background:rgba(232,238,244,.55);
    backdrop-filter:blur(7px) saturate(1.1);
    -webkit-backdrop-filter:blur(7px) saturate(1.1);
  }
  /* La cabecera (y el menú que cuelga de ella) por encima del velo. Solo
     z-index: ya es sticky (abajo), y pasarla a relative la haría saltar al
     abrir el menú con la página desplazada. */
  body.ast-main-header-nav-open .site-header{z-index:10}

  /* --- Panel del menú: opaco, nunca translúcido -------------------------- */
  .ast-header-break-point .main-header-bar-navigation{
    background:#fff;
    border-top:1px solid rgba(16,22,26,.14);
  }

  /* --- Aire a la izquierda: los ítems iban pegados al borde --------------
     Se copia el selector de Astra (`.main-navigation ul .menu-item
     .menu-link`, que fija `padding:20px`) en vez de inventar uno más largo:
     con menos especificidad la regla no ganaba. Solo se toca el horizontal;
     el vertical de Astra se respeta. */
  .ast-header-break-point .main-navigation ul .menu-item .menu-link{
    padding-left:28px;padding-right:28px;
  }
  /* El submenú, un escalón más adentro para que se lea la jerarquía */
  .ast-header-break-point .main-navigation ul .sub-menu .menu-item .menu-link{
    padding-left:46px;
  }

  /* --- Submenú desplegado: fondo sólido + canto de marca -----------------
     El selector largo replica el de Astra
     (`.ast-builder-menu-mobile .main-navigation .main-header-menu .sub-menu`,
     4 clases): con menos especificidad el fondo se quedaba en blanco. */
  .ast-builder-menu-mobile .main-navigation .main-header-menu .sub-menu,
  .ast-header-break-point .main-header-menu .sub-menu{
    background-color:#F4F7FA;           /* opaco y distinto del panel blanco */
    border:0;border-left:3px solid var(--gi-verde);
    box-shadow:none;
  }
  .ast-header-break-point .main-header-menu .sub-menu li + li > a{
    border-top:1px solid rgba(16,22,26,.08);
  }
}

/* ==========================================================================
   Desplegable de Servicios en dos columnas (inc/menu-servicios.php)
   Instalaciones a la izquierda, servicios a la derecha y, bajo la columna
   corta, «Solicitar estudio →» rellenando el hueco. Mantiene el BORDE medido
   de arriba y NO lleva sombra (criterio del 21/09, reafirmado el 23/09).
   Los títulos de columna y el CTA no existen en WordPress: los añade el PHP.
   ========================================================================== */

/* --- Común a escritorio y móvil ------------------------------------------ */
.gi-menu--servicios .sub-menu .menu-link,
/* En móvil Astra pone inline-block con `.ast-header-break-point .main-navigation
   ul .menu-item .menu-link` (4 clases): sin replicarlo, el icono se pegaba al
   texto. */
.ast-header-break-point .main-navigation ul .gi-menu--servicios .sub-menu .menu-item .menu-link{
  display:flex;align-items:center;gap:.65em;
}
.gi-menu__icono{
  width:18px;height:18px;flex:none;
  fill:none;stroke:var(--gi-verde);stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;
}
.gi-menu__icono *{vector-effect:non-scaling-stroke}
/* La flechita que Astra antepone a cada entrada de 2.º nivel sobra: el glifo
   hace ya de viñeta. En móvil Astra la muestra con
   `.ast-header-break-point .main-navigation ul .sub-menu .menu-item:not(.menu-item-has-children) .menu-link .icon-arrow:first-of-type`
   (8 clases): se copia ENTERO y se le añade .gi-menu--servicios. La primera
   versión (7 clases) perdía y la flecha seguía saliendo (23/09). */
.ast-header-break-point .main-navigation ul .gi-menu--servicios .sub-menu .menu-item:not(.menu-item-has-children) .menu-link .icon-arrow:first-of-type,
.gi-menu--servicios .sub-menu .menu-link .icon-arrow{display:none}

/* Títulos de columna: rótulo, no enlace (el <a> sale sin href). */
.main-header-menu .gi-menu--servicios .sub-menu .gi-menu__titulo > .menu-link{
  font-family:var(--gi-titular);font-size:var(--gi-t-xs);font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--gi-texto-suave);cursor:default;
  padding-bottom:.35em;
}
.main-header-menu .gi-menu--servicios .sub-menu .gi-menu__titulo > .menu-link:hover{
  color:var(--gi-texto-suave);background:none;
}
/* Sin separador encima del título ni de la primera entrada bajo él */
.main-header-menu .gi-menu--servicios .sub-menu .gi-menu__titulo > a,
.main-header-menu .gi-menu--servicios .sub-menu .gi-menu__titulo + li > a{border-top:0}

.main-header-menu .gi-menu--servicios .sub-menu .gi-menu__cta > .menu-link{
  font-family:var(--gi-titular);font-weight:600;color:var(--gi-verde-oscuro);
}
.main-header-menu .gi-menu--servicios .sub-menu .gi-menu__cta > .menu-link:hover{
  color:var(--gi-verde-oscuro);text-decoration:underline;text-underline-offset:.2em;
}

/* --- Escritorio: rejilla de dos columnas --------------------------------- */
@media (min-width:922px){
  .ast-desktop .main-header-menu .gi-menu--servicios > .sub-menu{
    display:grid;
    grid-template-columns:minmax(15.5rem,max-content) minmax(15.5rem,max-content);
    /* dense: cada entrada vuelve a la primera fila libre de SU columna; sin él,
       los servicios empezarían a la altura de la última instalación. */
    grid-auto-flow:row dense;
    width:max-content;
  }
  .ast-desktop .gi-menu--servicios > .sub-menu > .gi-menu__titulo--instalacion,
  .ast-desktop .gi-menu--servicios > .sub-menu > .gi-menu__cat--instalacion{grid-column:1}
  .ast-desktop .gi-menu--servicios > .sub-menu > .gi-menu__titulo--servicio,
  .ast-desktop .gi-menu--servicios > .sub-menu > .gi-menu__cat--servicio,
  .ast-desktop .gi-menu--servicios > .sub-menu > .gi-menu__cta{
    grid-column:2;border-left:1px solid rgba(16,22,26,.10);
  }
  /* El CTA ocupa las filas que le faltan a la columna corta (--gi-filas lo
     pone el PHP: instalaciones − servicios) y deja el enlace abajo. */
  .ast-desktop .gi-menu--servicios > .sub-menu > .gi-menu__cta{
    grid-row:span var(--gi-filas,1);
    display:flex;align-items:flex-end;
    background:var(--gi-verde-claro);
  }
  .ast-desktop .main-header-menu .gi-menu--servicios .sub-menu .gi-menu__cta > .menu-link{
    width:100%;border-top:0;
  }
}

/* --- Móvil: una columna, en el orden del DOM ----------------------------- */
@media (max-width:921px){
  .ast-header-break-point .main-navigation ul .gi-menu--servicios .sub-menu .gi-menu__titulo > .menu-link{
    padding-top:18px;
  }
  .ast-header-break-point .main-header-menu .gi-menu--servicios .sub-menu .gi-menu__cta > .menu-link{
    background:var(--gi-verde-claro);
  }
}

/* ==========================================================================
   Cabecera FIJA + logo (inc/cabecera.php, assets/js/cabecera.js)
   Sticky y no fixed: sigue ocupando su sitio en el flujo, así que no hace
   falta compensar con padding-top ni se descuadra si cambia de alto.

   Dos estados en las páginas con hero (body.gi-con-hero, y solo con JS):
     TRANSPARENTE sobre el hero: sin fondo, sin borde, sin sombra, enlaces y
       logo en blanco; el vídeo se ve de lado a lado por detrás.
     SÓLIDA (.gi-cabecera--solida, la pone cabecera.js al pasar el 80 % del
       hero): fondo blanco, logo verde y la sombra de 1px.
   Con el menú móvil abierto, siempre sólida (el panel es blanco).
   En el resto de páginas, siempre sólida.

   La sombra es la ÚNICA del sistema (NOTAS-DISENO, 23/09): 1px, un valor, y
   solo con la cabecera sólida y la página fuera de arriba del todo.
   ========================================================================== */
:root{--gi-alto-cabecera:101px}   /* reservas: cabecera.js pone el alto medido */
@media (max-width:921px){ :root{--gi-alto-cabecera:80px} }

#masthead.site-header{position:sticky;top:0;z-index:100}
#masthead.gi-cabecera--pegada{box-shadow:0 1px 3px rgba(16,22,26,.12)}

/* --- Transparente sobre el hero -------------------------------------------
   El hero sube por detrás de la cabecera exactamente su alto, y recupera ese
   alto como padding para que el titular no quede debajo. Más 120px de aire:
   con 3rem (~48px) la cabecera se volvía sólida a los 24px de scroll en
   pantallas bajas (1338x683), el primer golpe de rueda, y el cambio se leía
   como un salto aunque el fundido fuera el mismo. Con 120px la transparencia
   dura ~100px de scroll (decidido con JAE el 23/09). En px, no rem: el rem
   raíz del tema no es 16px. */
.gi-js body.gi-con-hero #content{margin-top:calc(-1 * var(--gi-alto-cabecera))}
.gi-js body.gi-con-hero .gi-hero{
  padding-top:calc(env(safe-area-inset-top,0px) + var(--gi-alto-cabecera) + 120px);
}
/* En móvil, la mitad: 120px empujaban demasiado el bloque de texto en una
   pantalla de teléfono (JAE, 23/09). */
@media (max-width:921px){
  .gi-js body.gi-con-hero .gi-hero{
    padding-top:calc(env(safe-area-inset-top,0px) + var(--gi-alto-cabecera) + 60px);
  }
}
.gi-js body.gi-con-hero:not(.ast-main-header-nav-open) #masthead:not(.gi-cabecera--solida){box-shadow:none}
.gi-js body.gi-con-hero:not(.ast-main-header-nav-open) #masthead:not(.gi-cabecera--solida) .ast-primary-header-bar{
  background-color:transparent;border-bottom-color:transparent;
}
/* Velo de legibilidad bajo la cabecera transparente: degradado de oscuro a
   nada, más alto que la barra para que no deje un canto. Sin él, los enlaces
   blancos medían 1,56:1 contra el punto más claro del vídeo (arriba a la
   derecha el velo del hero apenas actúa). Va en un ::before para poder
   fundirlo por opacidad (un degradado no se anima). */
#masthead::before{
  content:"";position:absolute;left:0;right:0;top:0;z-index:-1;pointer-events:none;
  height:calc(var(--gi-alto-cabecera) * 1.6);
  background:linear-gradient(180deg, rgba(7,11,13,var(--gi-velo-cabecera,.6)) 0%, rgba(7,11,13,var(--gi-velo-cabecera,.6)) 45%, rgba(7,11,13,0) 100%);
  opacity:0;
}
.gi-js body.gi-con-hero:not(.ast-main-header-nav-open) #masthead:not(.gi-cabecera--solida)::before{opacity:1}
#masthead.gi-cabecera--lista::before{transition:opacity var(--gi-fundido) ease}

/* Solo el primer nivel: el desplegable sigue siendo un panel blanco con su
   texto oscuro. El #masthead da la especificidad para ganar a las reglas
   en línea de Astra (color actual y :hover incluidos). */
.gi-js body.gi-con-hero:not(.ast-main-header-nav-open) #masthead:not(.gi-cabecera--solida) .main-header-menu > .menu-item > .menu-link,
.gi-js body.gi-con-hero:not(.ast-main-header-nav-open) #masthead:not(.gi-cabecera--solida) .main-header-menu > .menu-item > .ast-menu-toggle{
  color:#fff;
}
.gi-js body.gi-con-hero:not(.ast-main-header-nav-open) #masthead:not(.gi-cabecera--solida) .main-header-menu > .menu-item > .menu-link:hover,
.gi-js body.gi-con-hero:not(.ast-main-header-nav-open) #masthead:not(.gi-cabecera--solida) .main-header-menu > .menu-item:hover > .menu-link,
.gi-js body.gi-con-hero:not(.ast-main-header-nav-open) #masthead:not(.gi-cabecera--solida) .main-header-menu > .current-menu-item > .menu-link{
  color:var(--gi-verde);
}
/* Hamburguesa (y su aspa): verde de marca en LOS DOS estados. Es un icono de
   interfaz, así que su mínimo es 3:1 (WCAG 1.4.11). Medido el 23/09, peor
   píxel bajo el icono en 8 instantes: transparente 5,57-5,80:1 en teléfonos
   (póster), 5,79 a 768px y 3,49 a 900px (vídeo, el caso justo); sólido, verde
   sobre blanco, 3,08:1. El #masthead gana a la regla en línea de Astra
   ([data-section] .ast-button-wrap .mobile-menu-toggle-icon .ast-mobile-svg). */
#masthead .ast-mobile-svg{fill:var(--gi-verde)}

/* --- Fundido, solo DESPUÉS del primer pintado (.gi-cabecera--lista): al
   cargar la página no hay fundido de blanco a transparente.
   Duración en --gi-fundido: 900ms, elegida por JAE en el staging (23/09):
   con 180ms se percibía como un salto; con 450ms funcionaba y pidió el
   doble.
   Se mantiene también con «reducir movimiento»: aquí nada se DESPLAZA, solo
   se funden color y opacidad, que no es el movimiento que esa preferencia
   pide evitar. Antes se anulaba con transition:none y, en un equipo con esa
   opción activa, el cambio era instantáneo (medido: de transparente a
   blanco entre dos muestras de 40ms). */
#masthead{--gi-fundido:900ms}
#masthead.gi-cabecera--lista,
#masthead.gi-cabecera--lista .ast-primary-header-bar,
#masthead.gi-cabecera--lista .main-header-menu > .menu-item > .menu-link,
#masthead.gi-cabecera--lista .gi-marca__logo{
  transition:background-color var(--gi-fundido) ease,border-color var(--gi-fundido) ease,
    box-shadow var(--gi-fundido) ease,color var(--gi-fundido) ease,opacity var(--gi-fundido) ease;
}
#masthead.gi-cabecera--lista .ast-mobile-svg{transition:fill var(--gi-fundido) ease}

/* Anclas internas (#wired-…): que el destino no quede debajo de la cabecera.
   En px: el rem raíz del tema no es 16px y 6rem se quedaba corto. */
html{scroll-padding-top:calc(var(--gi-alto-cabecera) + 12px)}

/* --- Logo: los dos, superpuestos; se funden por opacidad -------------------- */
.gi-marca{display:block;line-height:0}
.gi-marca__enlace{display:inline-grid;line-height:0}
.gi-marca__logo{grid-area:1/1;display:block;width:150px;height:auto}
.gi-marca__logo--blanco{opacity:0}
.gi-js body.gi-con-hero:not(.ast-main-header-nav-open) #masthead:not(.gi-cabecera--solida) .gi-marca__logo--blanco{opacity:1}
.gi-js body.gi-con-hero:not(.ast-main-header-nav-open) #masthead:not(.gi-cabecera--solida) .gi-marca__logo--color{opacity:0}
.gi-marca__enlace:focus-visible{outline:3px solid var(--gi-verde);outline-offset:4px;border-radius:2px}
@media (max-width:921px){
  .gi-marca__logo{width:112px}

  /* Con la cabecera fija, un menú móvil más alto que la pantalla no se
     podría recorrer: el final quedaría siempre por debajo del borde. Se le da
     su propio scroll, hasta el alto de pantalla que deja la cabecera. */
  #ast-mobile-header .ast-mobile-header-content{
    max-height:calc(100dvh - var(--gi-alto-cabecera));
    overflow-y:auto;overscroll-behavior:contain;
  }
}

/* Escritorio estrecho (922-1100px): con el padding de Astra, «Legal» bajaba a
   una segunda línea entre 928 y 970px y la cabecera fija pasaba de 101 a
   161px. Se estrecha solo el aire lateral del primer nivel. */
@media (min-width:922px) and (max-width:1100px){
  .ast-desktop #ast-hf-menu-1 > .menu-item > .menu-link{padding-left:.65em;padding-right:.65em}
}