/* Go Green APU — un solo header. * * Antes: el contenedor del menú (elementor-element-e36cfa3) llevaba el sticky de * Elementor Pro. Al bajar, ese módulo CLONA el contenedor (.elementor-sticky__spacer) * y pone el original en position:fixed sobre el header: de ahí el "menú duplicado". * * Ahora: el sticky de Elementor está desactivado en el HTML y es el

* completo el que queda pegado arriba con position:sticky. Al ser sticky (y no * fixed) sigue ocupando su sitio en el flujo, así que no se superpone a nada. * Al bajar se le añade la clase gg-header-compact al y el header se * encoge: la barra de contacto se recoge, el sello desaparece, el logo baja de * tamaño y el menú pasa a la misma fila. */ header.elementor-location-header { position: sticky; top: 0; z-index: 100; background-color: var(--e-global-color-87e5bb2, #ffffff); transition: box-shadow .25s ease; } body.gg-header-compact header.elementor-location-header { box-shadow: 0 6px 20px -12px rgba(0, 0, 0, .45); } /* --- barra de contacto (teléfono, correo, selector de idioma) --------------- */ /* --gg-top-h lo mide gg-header.js (la altura real de la barra, que cambia con el ancho): así la animación sale suave sin recortar nada. Si el JS no llega a ejecutarse, max-height cae en `none` y la barra se ve entera. */ .gg-header__top { overflow: hidden; max-height: var(--gg-top-h, none); transition: max-height .28s ease, opacity .2s ease; } body.gg-header-compact .gg-header__top { max-height: 0; opacity: 0; pointer-events: none; } /* Redes e idiomas comparten el extremo derecho de la barra superior. En escritorio se muestran solo los íconos sociales, sin texto adicional. */ .gg-header__top .elementor-shortcode { display: flex; align-items: center; justify-content: flex-end; gap: 14px; } .gg-header__social { display: flex; align-items: center; gap: 8px; padding-inline-end: 14px; border-inline-end: 1px solid rgba(255, 255, 255, .42); } .gg-header__social a { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 1px solid rgba(255, 255, 255, .75); border-radius: 50%; color: #fff; text-decoration: none !important; transition: background-color .16s ease, color .16s ease, transform .16s ease; } .gg-header__social a:hover, .gg-header__social a:focus-visible { transform: translateY(-1px); background: #fff; color: #17633f; } .gg-header__social svg { width: 17px; height: 17px; fill: currentColor; } .gg-header__top .gtranslate_wrapper { display: flex !important; align-items: center; gap: 10px !important; } .gg-header__top .glink { display: inline-flex !important; align-items: center; justify-content: center; gap: 5px; min-height: 30px; padding: 4px 7px !important; border: 1px solid rgba(255, 255, 255, .38); border-radius: 6px; color: #fff !important; line-height: 1; text-decoration: none !important; } .gg-header__top .glink:hover, .gg-header__top .glink:focus-visible, .gg-header__top .glink.gt-current-lang { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .8); } .gg-header__top .glink img { margin: 0 !important; } .gg-header__top .gg-header__lang-label { color: #fff !important; font-size: 12px; font-weight: 700; } /* --- fila del logo + menú --------------------------------------------------- */ .gg-header__bar { transition: padding .25s ease; } /* Los !important son necesarios: las reglas que genera Elementor para este contenedor (.elementor-103 .elementor-element.elementor-element-e36cfa3, tres clases) pesan más que cualquier selector razonable desde fuera. */ body.gg-header-compact .gg-header__bar { --padding-top: 6px !important; --padding-bottom: 6px !important; } /* el sello de la izquierda solo cabe en el header grande */ body.gg-header-compact .gg-header__bar .elementor-element-54b66be { display: none; } /* ebe2c4a es el logo de escritorio y 6c26600 el de móvil (Elementor esconde uno u otro según el ancho): los dos se reducen en compacto. */ .gg-header__bar .elementor-element-ebe2c4a img, .gg-header__bar .elementor-element-6c26600 img { transition: max-width .25s ease; } body.gg-header-compact .gg-header__bar .elementor-element-ebe2c4a img { max-width: 260px !important; } body.gg-header-compact .gg-header__bar .elementor-element-6c26600 img { max-width: 190px !important; } .gg-header__lang { display: none; } /* En escritorio el header compacto es una sola fila: logo a la izquierda, menú a la derecha. Por debajo de 1025px el menú ya se apila o pasa a hamburguesa, así que solo tocamos tamaños. */ @media (min-width: 1025px) { body.gg-header-compact .gg-header__bar { --flex-wrap: nowrap !important; --align-items: center !important; --gap: 0px 24px !important; --column-gap: 24px !important; --row-gap: 0px !important; } body.gg-header-compact .gg-header__bar .elementor-element-ceb3740 { flex: 1 1 auto; min-width: 0; } body.gg-header-compact .gg-header__bar .elementor-nav-menu--main .elementor-nav-menu { justify-content: flex-end !important; flex-wrap: wrap; } /* Los 9 enlaces a 18px con 20px de padding lateral suman ~1320px: no caben al lado del logo (queda algo menos de 960px). A 14px con 9px de padding suman ~920px y entran en una sola fila incluso en portátiles de 1265px. Si aun así no cupieran, el ul reparte en dos líneas en vez de desbordar. */ body.gg-header-compact .gg-header__bar .elementor-nav-menu--main .elementor-item { font-size: 14px !important; padding: 9px 9px !important; } } /* Tablet (768–1024px): el menú sigue siendo horizontal y no cabe al lado del logo, así que se queda en su fila; solo se aprieta. */ @media (min-width: 768px) and (max-width: 1024px) { body.gg-header-compact .gg-header__bar .elementor-nav-menu--main .elementor-item { font-size: 15px !important; padding: 8px 10px !important; } } /* GTranslate puede insertar una barra propia arriba del sitio cuando el idioma activo es español. Algunos navegadores la dejan visible como un segundo menú sobre el header, tanto en móvil como en escritorio. Se oculta solo esa interfaz; la traducción y los botones EN/ES siguen funcionando. */ iframe.goog-te-banner-frame, iframe.skiptranslate.VIpgJd-ZVi9od-ORHb-OEVmcd, .goog-te-banner-frame, .VIpgJd-ZVi9od-ORHb { display: none !important; width: 0 !important; height: 0 !important; border: 0 !important; } html, body, body.translated-ltr, body.translated-rtl { top: 0 !important; margin-top: 0 !important; } /* Móvil (≤767px): el menú es hamburguesa, así que logo y botón caben en una sola fila. */ @media (max-width: 767px) { .gg-header__social { display: none !important; } /* Las migas "Home / página" no son otro menú móvil. Se conservan en escritorio, pero se ocultan en móvil para que nada aparezca sobre o bajo el header antes del contenido principal. */ .gopoint-breadcrumbs { display: none !important; } /* En móvil el header nace compacto. Antes medía ~400 px y al primer scroll bajaba a 56 px; ese cambio de altura movía la página y podía hacer que el estado entrara y saliera, que se percibía como un parpadeo. */ header.elementor-location-header { box-shadow: 0 6px 20px -12px rgba(0, 0, 0, .45); transition: none; } .gg-header__top { display: none !important; } .gg-header__bar { --padding-top: 6px !important; --padding-bottom: 6px !important; --flex-wrap: nowrap !important; --flex-wrap-mobile: nowrap !important; --align-items: center !important; transition: none; } .gg-header__bar .elementor-element-54b66be { display: none !important; } .gg-header__bar .elementor-element-6c26600 img { max-width: 190px !important; transition: none; } body.gg-header-compact .gg-header__bar .elementor-element-6c26600 img { width: 100%; max-width: 100% !important; } .gg-header__bar .elementor-element-6c26600 { flex: 0 1 190px; min-width: 0; } .gg-header__home-link { display: block; } .gg-header__lang { display: flex; flex: 0 0 auto; align-items: center; margin-inline-start: auto; } .gg-header__lang .gtranslate_wrapper { display: flex !important; align-items: center; gap: 4px; } .gg-header__lang .glink { display: inline-flex !important; align-items: center; justify-content: center; width: 34px; min-width: 34px !important; height: 34px; min-height: 34px !important; padding: 0 !important; color: #17633f !important; background: #fff; border: 1px solid #b8cfc2; border-radius: 7px; font-size: 11px; font-weight: 800; line-height: 1; text-decoration: none !important; } .gg-header__lang-label { color: #17633f !important; } .gg-header__lang .glink.gt-current-lang { background: #17633f; border-color: #17633f; } .gg-header__lang .glink.gt-current-lang .gg-header__lang-label { color: #fff !important; } .gg-header__lang .glink img, .gg-header__lang #google_translate_element2 { display: none !important; } /* En móvil solo existe la navegación de la hamburguesa. La versión de escritorio y cualquier dropdown cerrado quedan fuera del render. */ .gg-header__bar .elementor-nav-menu--main, .gg-header__bar nav.elementor-nav-menu--dropdown[aria-hidden="true"] { display: none !important; } header.elementor-location-header .elementor-sticky__spacer, header.elementor-location-header .elementor-sticky--active { display: none !important; } body.gg-header-compact .gg-header__bar { --flex-wrap: nowrap !important; --flex-wrap-mobile: nowrap !important; --align-items: center !important; } body.gg-header-compact .gg-header__bar .elementor-element-ceb3740 { flex: 1 1 auto; min-width: 0; } body.gg-header-compact .gg-header__bar .elementor-menu-toggle { margin-inline: 6px 0 !important; } } @media (max-width: 370px) { .gg-header__bar .elementor-element-6c26600, .gg-header__bar .elementor-element-6c26600 img { max-width: 168px !important; } } /* Los enlaces #ancla y el "Skip to content" no deben acabar tapados por el header pegado. */ html { scroll-padding-top: 150px; } @media (max-width: 767px) { html { scroll-padding-top: 90px; } } @media (prefers-reduced-motion: reduce) { header.elementor-location-header, .gg-header__top, .gg-header__bar, .gg-header__bar .elementor-element-ebe2c4a img { transition: none; } }