/* ============================================================
   GAMO SOLAR — Header (Fase 1)
   Barra superior de contacto + barra principal fija con encogido.
   ============================================================ */

/* Ocultar el header nativo de Kadence (lo reemplaza .gs-header) */
#masthead.site-header { display:none !important; }

/* ---- Contenedor del header ---- */
.gs-header{
  position:sticky; top:0; z-index:999;
  font-family:"Inter",-apple-system,system-ui,sans-serif;
  background:#fff;
}
body.admin-bar .gs-header{ top:32px; }

.gs-header-row{
  max-width:1240px; margin:0 auto; padding:0 1.5rem;
  display:flex; align-items:center;
}

/* ---- Barra superior ---- */
.gs-header-top{
  background:var(--gs-blue-d,#00264D);
  max-height:48px; overflow:hidden;
  transition:max-height .3s ease;
}
.gs-header-row--top{
  height:40px; gap:1.75rem; justify-content:flex-end;
  font-size:.82rem; color:rgba(255,255,255,.82);
}
.gs-ht-link,.gs-ht-zone{
  display:inline-flex; align-items:center; gap:.45rem;
  color:rgba(255,255,255,.82); text-decoration:none;
}
.gs-ht-link:hover{ color:#fff; }
.gs-ht-link svg,.gs-ht-zone svg{
  width:15px; height:15px; fill:none;
  stroke:var(--gs-yellow,#FFC107); stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round;
}
.gs-ht-zone{ color:#fff; font-weight:600; }

/* ---- Barra principal ---- */
.gs-header-main{
  background:#fff;
  border-bottom:1px solid var(--gs-border,#E2E8F0);
  transition:box-shadow .25s ease;
}
.gs-header-row--main{ height:78px; gap:1.5rem; transition:height .25s ease; }
.gs-header-logo{ display:flex; align-items:center; flex-shrink:0; }
.gs-header-logo-img{ height:48px; width:auto; display:block; transition:height .25s ease; }

/* Navegación */
.gs-header-nav{ margin-left:auto; }
.gs-header-nav ul{ display:flex; gap:.35rem; list-style:none; margin:0; padding:0; }
.gs-header-nav a{
  position:relative; display:block; padding:.6rem .95rem;
  color:var(--gs-blue,#003D7A); font-weight:600; font-size:.98rem;
  text-decoration:none; border-radius:8px; transition:color .2s;
}
.gs-header-nav a::after{
  content:""; position:absolute; left:.95rem; right:.95rem; bottom:.34rem;
  height:2px; background:var(--gs-yellow,#FFC107);
  transform:scaleX(0); transform-origin:left; transition:transform .22s ease;
}
.gs-header-nav a:hover{ color:var(--gs-blue-l,#0A56A8); }
.gs-header-nav a:hover::after,
.gs-header-nav a.is-active::after{ transform:scaleX(1); }

/* CTA */
.gs-header-cta{
  flex-shrink:0; display:inline-flex; align-items:center; justify-content:center;
  padding:.72rem 1.45rem; border-radius:10px;
  background:linear-gradient(135deg,var(--gs-yellow,#FFC107) 0%,var(--gs-yellow-l,#FFD54F) 100%);
  color:var(--gs-blue,#003D7A); font-weight:700; font-size:.95rem;
  text-decoration:none; box-shadow:0 6px 18px rgba(255,193,7,.32);
  transition:transform .2s, box-shadow .2s;
}
.gs-header-cta:hover{
  transform:translateY(-2px); box-shadow:0 10px 24px rgba(255,193,7,.42);
  color:var(--gs-blue,#003D7A);
}

/* ---- Estado fijo / encogido ---- */
.gs-header.is-stuck .gs-header-top{ max-height:0; }
.gs-header.is-stuck .gs-header-main{ box-shadow:0 6px 22px rgba(15,23,42,.10); }
.gs-header.is-stuck .gs-header-row--main{ height:62px; }
.gs-header.is-stuck .gs-header-logo-img{ height:38px; }

/* ---- Botón hamburguesa (oculto en escritorio) ---- */
.gs-burger{ display:none; }

/* ---- Menú móvil (oculto en escritorio) ---- */
.gs-mobile-nav{ display:none; }

/* ---- Enlace de salto (accesibilidad) ---- */
.gs-skip-link{
  position:absolute; left:-9999px; top:0; z-index:1000;
  background:var(--gs-blue,#003D7A); color:#fff; padding:.6rem 1rem; border-radius:0 0 8px 0;
}
.gs-skip-link:focus{ left:0; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:900px){
  /* La barra superior (tel/email/zona) es redundante en móvil: el menú
     hamburguesa ya incluye teléfono, email y WhatsApp. Se oculta para
     ganar ~40px de alto del header fijo. */
  .gs-header-top{ display:none; }
  .gs-header-nav{ display:none; }
  .gs-header-row--main{ gap:.6rem; }
  .gs-header-cta{ padding:.6rem 1rem; font-size:.88rem; margin-left:auto; }

  .gs-burger{
    display:flex; flex-direction:column; justify-content:center; gap:5px;
    width:44px; height:44px; padding:0;
    background:transparent; border:0; cursor:pointer;
  }
  .gs-burger span{
    display:block; width:24px; height:2px; margin:0 auto;
    background:var(--gs-blue,#003D7A); border-radius:2px;
    transition:transform .25s ease, opacity .2s ease;
  }
  .gs-burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .gs-burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
  .gs-burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

  .gs-mobile-nav{
    display:block; position:absolute; left:0; right:0; top:100%;
    background:#fff; border-bottom:1px solid var(--gs-border,#E2E8F0);
    box-shadow:0 14px 26px rgba(15,23,42,.12);
    padding:.5rem 1.5rem 1.5rem;
  }
  .gs-mobile-nav[hidden]{ display:none; }
  .gs-mobile-nav ul{ list-style:none; margin:0 0 1rem; padding:0; }
  .gs-mobile-nav li + li{ border-top:1px solid var(--gs-border,#E2E8F0); }
  .gs-mobile-nav ul a{
    display:block; padding:.95rem .25rem;
    color:var(--gs-blue,#003D7A); font-weight:600; text-decoration:none;
  }
  .gs-header-cta--block{ display:flex; width:100%; }
  .gs-mobile-contact{ display:flex; flex-direction:column; gap:.45rem; margin-top:1.1rem; }
  .gs-mobile-contact a{ color:var(--gs-text-soft,#475569); font-size:.9rem; text-decoration:none; }
}
@media (max-width:560px){
  .gs-ht-email{ display:none; }
  .gs-header-row--top{ gap:1.1rem; font-size:.78rem; justify-content:center; }
  .gs-header-logo-img{ height:40px; }
}

/* ============================================================
   MENÚ EN UNA SOLA LÍNEA (2026-08-07)
   Al añadir «Certificado energético» el menú pasó a nueve entradas
   de primer nivel y las etiquetas largas («Certificado energético»,
   «Comparador de tarifas», «Sobre nosotros», «Casos de éxito»)
   partían en dos líneas: los <li> son flex-items que encogen y el
   texto rompía dentro del enlace.
   Se impide el salto y se compensa con menos padding, menos hueco y
   un cuerpo algo más pequeño, en tres tramos, para que las nueve
   entradas MÁS el logo y el botón «Contáctanos» quepan sin desbordar.
   El inset del subrayado ::after acompaña al padding en cada tramo.
   Por debajo de 901 px no aplica: ahí manda el menú hamburguesa.
   ============================================================ */
@media (min-width:901px){
  .gs-header-nav ul{ flex-wrap:nowrap; gap:.15rem; }
  .gs-header-nav a{ white-space:nowrap; padding:.6rem .55rem; font-size:.9rem; }
  .gs-header-nav a::after{ left:.55rem; right:.55rem; }
}
@media (min-width:1051px) and (max-width:1200px){
  .gs-header-nav a{ padding:.6rem .4rem; font-size:.82rem; letter-spacing:-.01em; }
  .gs-header-nav a::after{ left:.4rem; right:.4rem; }
}
@media (min-width:901px) and (max-width:1050px){
  .gs-header-nav ul{ gap:.08rem; }
  .gs-header-nav a{ padding:.6rem .28rem; font-size:.76rem; letter-spacing:-.015em; }
  .gs-header-nav a::after{ left:.28rem; right:.28rem; }
}


/* ============================================================
   CABECERA SIN DESBORDE LATERAL (2026-10-03)
   Con nueve entradas («Certificados CEE y CAE», «Comparador de
   tarifas»...) los tres tramos de 2026-08-07 ya no cabían: el <ul>
   es nowrap y el <nav> no encoge por debajo de su contenido, así que
   logo + menú + «Contáctanos» medían más que la fila y el botón se
   salía por la derecha (scroll lateral). Con Inter, la que carga la
   portada, la fila pedía ~1038 px en el tramo 901-1050, ~1138 px en
   1051-1200 y ~1263 px desde 1201 (24 px más que el contenedor de
   1240); con Segoe UI (fallback en Windows) ~8 % menos.
   · 901-1099 px: menú hamburguesa, igual que por debajo de 901,
     pero se conserva la barra superior y el botón sigue a la vista.
     Ahí no hay tamaño legible con el que quepan las nueve entradas
     más el botón.
   · 1100-1259 px: menú compacto (cuerpo .8rem, menos aire entre
     entradas, hueco de fila 1rem y el botón compacto del móvil).
   · Desde 1260 px: el aspecto de siempre con 2-3 px menos de aire
     por entrada y un botón algo más estrecho, para que todo quepa
     en los 1240 px del contenedor.
   Holgura mínima medida con Inter: ~30 px, también con barra de
   desplazamiento clásica de 17 px. No se toca ningún bloque anterior.
   ============================================================ */
@media (min-width:900.02px) and (max-width:1099.98px){
  .gs-header-nav{ display:none; }
  .gs-header-row--main{ gap:.6rem; }
  .gs-header-cta{ padding:.6rem 1rem; font-size:.88rem; margin-left:auto; }

  .gs-burger{
    display:flex; flex-direction:column; justify-content:center; gap:5px;
    width:44px; height:44px; padding:0;
    background:transparent; border:0; cursor:pointer;
  }
  .gs-burger span{
    display:block; width:24px; height:2px; margin:0 auto;
    background:var(--gs-blue,#003D7A); border-radius:2px;
    transition:transform .25s ease, opacity .2s ease;
  }
  .gs-burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .gs-burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
  .gs-burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

  .gs-mobile-nav{
    display:block; position:absolute; left:0; right:0; top:100%;
    background:#fff; border-bottom:1px solid var(--gs-border,#E2E8F0);
    box-shadow:0 14px 26px rgba(15,23,42,.12);
    padding:.5rem 1.5rem 1.5rem;
  }
  .gs-mobile-nav[hidden]{ display:none; }
  .gs-mobile-nav ul{ list-style:none; margin:0 0 1rem; padding:0; }
  .gs-mobile-nav li + li{ border-top:1px solid var(--gs-border,#E2E8F0); }
  .gs-mobile-nav ul a{
    display:block; padding:.95rem .25rem;
    color:var(--gs-blue,#003D7A); font-weight:600; text-decoration:none;
  }
  .gs-header-cta--block{ display:flex; width:100%; }
  .gs-mobile-contact{ display:flex; flex-direction:column; gap:.45rem; margin-top:1.1rem; }
  .gs-mobile-contact a{ color:var(--gs-text-soft,#475569); font-size:.9rem; text-decoration:none; }
}
@media (min-width:1100px) and (max-width:1259.98px){
  .gs-header-row--main{ gap:1rem; }
  .gs-header-nav ul{ gap:.08rem; }
  .gs-header-nav a{ padding:.6rem .32rem; font-size:.8rem; letter-spacing:-.01em; }
  .gs-header-nav a::after{ left:.32rem; right:.32rem; }
  .gs-header-cta{ padding:.6rem 1rem; font-size:.88rem; }
}
@media (min-width:1260px){
  .gs-header-row--main{ gap:1.25rem; }
  .gs-header-nav a{ padding:.6rem .42rem; }
  .gs-header-nav a::after{ left:.42rem; right:.42rem; }
  .gs-header-cta{ padding:.72rem 1.2rem; }
}