/* ====== GOV.MX – Navbar/Footer aislados (prefijo gm-) ====== */

:root {
  --gm-offset: 56px;
  --imss-offset: 40px;
  --top-offset: 0px;
  --sticky-gap: 10px;
}

/* Barra gob.mx fija arriba */

.gm-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1200;
}

/* NO empujamos el documento para permitir scroll natural */

body {
  padding-top: 0;
}

/* Franja dorada: top-header en su posición normal (no fija) */

.top-header {
  position: relative;
  z-index: 1140;
}

/* IMSS subnav: sticky debajo de gob.mx */

#menuimssc {
  position: sticky;
  top: var(--gm-offset);
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1180;
  transition: box-shadow .2s ease;
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
  background-color: var(--bs-danger-text-emphasis);
}

/* Asegura que los dropdowns del menú IMSS aparezcan sobre todo el contenido */

#menuimssc .dropdown-menu {
  position: absolute;
  z-index: 9999;
}

/* Asegura que los togglers permanezcan clicables sobre el contenido expandido */

.gm-navbar .navbar-toggler, #menuimssc .navbar-toggler {
  position: relative;
  z-index: 10000;
}

/* Tu header principal: sticky debajo de gob.mx + IMSS */

#main-header {
  position: sticky;
  top: calc(var(--gm-offset) + var(--imss-offset) + var(--top-offset));
  z-index: 1150;
  transition: top .15s ease, box-shadow .2s ease;
}

#main-header.is-stuck {
  top: calc(var(--gm-offset) + var(--imss-offset));
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
}

/* Evita interferencias de reglas antiguas (si las tenías) */

.top-navbar, .top-subnavbar, .search-fixed, .main-content {
  top: auto !important;
  margin-top: 0 !important;
}

/* Colores base (ajústalos a tu paleta si quieres) */

:root {
  --gm-bg: #0a0a0a;
  --gm-text: #ffffff;
  --gm-link: #ffffff;
  --gm-link-hover: #d9d9d9;
  --gm-border: rgba(255, 255, 255, .15);
}

/* NAVBAR */

.gm-navbar {
  background: var(--bs-danger-text-emphasis);
  min-height: 56px;
}

.gm-brand {
  display: flex;
  align-items: center;
}

.gm-logo {
  height: 46px;
  width: auto;
  display: block;
}

.gm-toggler {
  border: 1px solid var(--gm-border);
}

.gm-toggler-icon {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(255,255,255,.85)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}

.gm-nav {
  gap: .5rem;
}

.gm-link {
  color: var(--gm-link) !important;
  padding: .5rem .75rem;
  border-radius: .25rem;
  text-decoration: none;
}

.gm-link:hover {
  color: var(--gm-link-hover) !important;
  background: rgba(255, 255, 255, .08);
}

.gm-icon-search {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  background: currentColor;
  -webkit-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="%23000" viewBox="0 0 16 16"><path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85zm-5.242.656a5 5 0 1 1 0-10 5 5 0 0 1 0 10z"/></svg>') no-repeat center / contain;
  mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="%23000" viewBox="0 0 16 16"><path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85zm-5.242.656a5 5 0 1 1 0-10 5 5 0 0 1 0 10z"/></svg>') no-repeat center / contain;
}

/* FOOTER */

.gm-footer {
  background: var(--bs-danger-text-emphasis);
  color: var(--gm-text);
  margin-top: 0px;
}

.gm-footer a {
  color: var(--gm-link);
  text-decoration: none;
}

.gm-footer a:hover {
  color: var(--gm-link-hover);
  text-decoration: underline;
}

.gm-footer-logo {
  max-width: 50%;
  height: auto;
}

.gm-foot-title {
  color: var(--gm-text);
  font-weight: 600;
  margin-bottom: .75rem;
}

.gm-foot-text {
  color: var(--gm-text);
  opacity: .85;
}

.gm-foot-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.gm-foot-list li {
  margin-bottom: .25rem;
}

.gm-foot-sub {
  display: block;
  margin: .5rem 0;
  opacity: .85;
}

.gm-social {
  display: flex;
  gap: .5rem;
  list-style: none;
  padding: 0;
  margin: .25rem 0 1rem;
}

.gm-social img {
  display: block;
  width: 24px;
  height: 24px;
}

.gm-079 img {
  height: 40px;
  width: auto;
  display: block;
}

/* Ajustes responsivos finos (opcional) */

@media (max-width: 767.98px) {
  .gm-footer-logo {
    max-width: 70%;
  }
}

/* fallback; se actualiza por JS */

/* 1) La de gobierno SIEMPRE fija arriba */

.gm-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  /*z-index: 1200;*/
  padding-top: 0px;
  padding-bottom: 0px;
}

/* 2) Empuja el documento para que no quede debajo de gm */

body {
  padding-top: var(--gm-offset);
}

/* 3) Top-header NO pegada (comportamiento normal) */

.top-header {
  position: relative;
  z-index: 1100;
  background: #a57f2c;
}

/* 4) Menú del tema: sticky debajo de gm-header */

#main-header {
  position: sticky;
  top: var(--gm-offset);
  z-index: 1150;
  transition: box-shadow .2s ease, transform .2s ease;
  will-change: transform;
  padding-bottom: 6px;
  padding-top: 6px;
}

/* Sombra/efecto solo cuando está pegado */

#main-header.is-stuck {
  box-shadow: 0 0 10px rgba(4, 34, 40, .1);
}

/* SOLUCIÓN: Z-index súper alto para el menú móvil */

/* Capa oscura del menú móvil - MUY ALTO */

.cdx-layer.menu-layer {
  z-index: 9998 !important;
}

.cdx-layer.menu-layer.active {
  z-index: 9998 !important;
}

/* Lista del menú móvil - EL MÁS ALTO */

.menu-list {
  z-index: 9999 !important;
}

.menu-list.open {
  z-index: 9999 !important;
}

/* Botón hamburguesa - POR ENCIMA DE TODO */

.menu-action {
  position: relative;
  z-index: 10000 !important;
}

/* Elevar todo el header cuando el menú esté abierto */

#main-header:has(.menu-list.open) {
  z-index: 9997 !important;
}

/* Fallback para navegadores que no soportan :has() */

@media screen and (max-width: 1199px) {
  body.overflow-hidden #main-header {
    z-index: 9997 !important;
  }
}

@media screen and (max-width: 1199px) {
  body.overflow-hidden .cdx-layer.menu-layer, body.overflow-hidden .menu-list {
    z-index: 9999 !important;
  }
}

@media screen and (max-width: 1199px) {
  body.overflow-hidden .menu-action {
    z-index: 10000 !important;
  }
}

/* EXTRA: Asegurar que hero-intro no interfiera */

.hero-intro {
  position: relative;
  z-index: 1;
}

.hero-intro.intro-three {
  z-index: 1;
}

/* SOLUCIÓN ESPECÍFICA PARA EL MENÚ MÓVIL DEL TEMA */

/* Asegurar que el menú móvil tenga el z-index más alto */

/* Capa oscura del menú móvil */

@media screen and (max-width: 1199px) {
  .cdx-layer.menu-layer {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: rgba(4, 34, 40, 0.8) !important;
    z-index: 99999 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: all 0.5s ease !important;
  }
}

@media screen and (max-width: 1199px) {
  .cdx-layer.menu-layer.active {
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 99999 !important;
  }
}

/* Lista del menú móvil - MANTENER POSICIÓN ORIGINAL */

@media screen and (max-width: 1199px) {
  .menu-list {
    position: fixed !important;
    top: var(--gm-offset, 60px) !important;
    right: -100% !important;
    width: 80% !important;
    max-width: 350px !important;
    height: calc(100vh - var(--gm-offset, 60px)) !important;
    background-color: var(--bs-body-bg) !important;
    z-index: 100000 !important;
    transition: all 0.5s ease !important;
    overflow-y: visible !important;
    padding: 20px !important;
    box-shadow: -2px 0 10px rgba(0,0,0,0.1) !important;
  }
}

@media screen and (max-width: 1199px) {
  .menu-list.open {
    right: 0 !important;
    z-index: 100000 !important;
  }
}

/* Botón hamburguesa */

@media screen and (max-width: 1199px) {
  .menu-action {
    position: relative !important;
    z-index: 100001 !important;
    display: block !important;
  }
}

/* Mostrar el botón hamburguesa en móvil */

@media screen and (max-width: 1199px) {
  header .menu-action {
    display: block !important;
  }
}

/* Ocultar el menú horizontal en móvil */

@media screen and (max-width: 1199px) {
  .menu-list {
    display: none !important;
  }
}

@media screen and (max-width: 1199px) {
  .menu-list.open {
    display: block !important;
  }
}

/* SOLUCIÓN CORREGIDA PARA EL MENÚ MÓVIL */

/* Capa oscura del menú móvil - EMPEZAR DESPUÉS DEL MAIN-HEADER Y CUBRIR TODO */

@media screen and (max-width: 1199px) {
  .cdx-layer.menu-layer {
    position: fixed !important;
    top: calc(var(--gm-offset, 60px) + var(--imss-offset, 40px) + var(--top-offset, 0px) + 60px) !important;
    left: 0 !important;
    width: 100% !important;
    height: calc(100vh - var(--gm-offset, 60px) - var(--imss-offset, 40px) - var(--top-offset, 0px) - 60px) !important;
    background-color: rgba(4, 34, 40, 0.8) !important;
    z-index: 99999 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: all 0.5s ease !important;
  }
}

@media screen and (max-width: 1199px) {
  .cdx-layer.menu-layer.active {
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 99999 !important;
  }
}

/* Lista del menú móvil - TAMBIÉN EMPEZAR DESPUÉS DEL MAIN-HEADER */

@media screen and (max-width: 1199px) {
  .menu-list {
    position: fixed !important;
    top: calc(var(--gm-offset, 60px) + var(--imss-offset, 40px) + var(--top-offset, 0px) + 60px) !important;
    right: -100% !important;
    width: 80% !important;
    max-width: 350px !important;
    height: calc(100vh - var(--gm-offset, 60px) - var(--imss-offset, 40px) - var(--top-offset, 0px) - 60px) !important;
    background-color: var(--bs-body-bg) !important;
    z-index: 100000 !important;
    transition: all 0.5s ease !important;
    overflow-y: visible !important;
    padding: 20px !important;
    box-shadow: -2px 0 10px rgba(0,0,0,0.1) !important;
  }
}

@media screen and (max-width: 1199px) {
  .menu-list.open {
    right: 0 !important;
    z-index: 100000 !important;
  }
}

/* Botón hamburguesa */

@media screen and (max-width: 1199px) {
  .menu-action {
    position: relative !important;
    z-index: 100001 !important;
    display: block !important;
  }
}

/* Asegurar que el main-header esté siempre visible */

@media screen and (max-width: 1199px) {
  #main-header {
    position: sticky !important;
    z-index: 100002 !important;
  }
}

/* Cuando el menú esté abierto, asegurar visibilidad del header */

@media screen and (max-width: 1199px) {
  body.overflow-hidden #main-header {
    z-index: 100002 !important;
  }
}

/* Cálculo dinámico de la altura real del main-header */

/* Variables CSS para altura dinámica */

@media screen and (max-width: 1199px) {
  :root {
    --main-header-height: 60px;
  }
}

/* Actualizar cálculos con altura más precisa */

@media screen and (max-width: 1199px) {
  .cdx-layer.menu-layer {
    top: calc(var(--gm-offset, 60px) + var(--imss-offset, 40px) + var(--top-offset, 0px) + var(--main-header-height, 60px)) !important;
    height: calc(100vh - var(--gm-offset, 60px) - var(--imss-offset, 40px) - var(--top-offset, 0px) - var(--main-header-height, 60px)) !important;
  }
}

@media screen and (max-width: 1199px) {
  .menu-list {
    top: calc(var(--gm-offset, 60px) + var(--imss-offset, 40px) + var(--top-offset, 0px) + var(--main-header-height, 60px)) !important;
    height: calc(100vh - var(--gm-offset, 60px) - var(--imss-offset, 40px) - var(--top-offset, 0px) - var(--main-header-height, 60px)) !important;
  }
}

/* Ajuste simple de posición - VALOR EXACTO */

@media screen and (max-width: 1199px) {
  .cdx-layer.menu-layer.active {
    top: 170px !important;
    height: calc(100vh - 170px) !important;
  }
}

@media screen and (max-width: 1199px) {
  .menu-list.open {
    top: 170px !important;
    height: calc(100vh - 170px) !important;
  }
}

/* POSICIÓN FINAL PERFECTA DEL MENÚ MÓVIL - 70px */

@media screen and (max-width: 1199px) {
  .cdx-layer.menu-layer.active {
    top: 70px !important;
    height: calc(100vh - 70px) !important;
  }
}

@media screen and (max-width: 1199px) {
  .menu-list.open {
    top: 70px !important;
    height: calc(100vh - 70px) !important;
  }
}

/* También aplicar a los estados no activos para consistencia */

@media screen and (max-width: 1199px) {
  .cdx-layer.menu-layer {
    top: 70px !important;
    height: calc(100vh - 70px) !important;
  }
}

@media screen and (max-width: 1199px) {
  .menu-list {
    top: 70px !important;
    height: calc(100vh - 70px) !important;
  }
}

/* ====== ESTILOS PARA FORMULARIO DE BÚSQUEDA EDRO ====== */

/* Estilos específicos para el formulario de búsqueda en hero */
.hero-intro.intro-three .hero-contain .input-group .input-group-text .dropdown-action {
  background-color: transparent;
  border: none;
  outline: none;
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
  padding: 0 30px;
  height: 100%;
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 0;
  text-transform: none;
}

.hero-intro.intro-three .hero-contain .input-group .input-group-text .dropdown-action i {
  margin-right: 8px;
  font-size: 14px;
}

.hero-intro.intro-three .hero-contain .input-group .input-group-text .dropdown-action:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

/* Asegurar que el dropdownmenu tenga el estilo correcto */
.hero-intro.intro-three .hero-contain .input-group .dropdownmenu {
  background-color: #004437;
  border-color: #004437;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  padding: 0;
}

/* ====== MEJORAS PARA BOTONES DE SWIPER ====== */

/* Alternativa con FontAwesome que sabemos que funciona */
.arrow-style1 .swiper-button-next:empty:after,
.arrow-style1 .swiper-button-prev:empty:after {
  font-family: "Font Awesome 5 Free", "FontAwesome", sans-serif !important;
  font-weight: 900 !important;
  display: inline-block !important;
}

/* Forzar la visibilidad en caso de problemas */
.arrow-style1 .swiper-button-next,
.arrow-style1 .swiper-button-prev {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 10 !important;
}

/* Mejorar contraste y visibilidad */
.arrow-style1 .swiper-button-next:hover,
.arrow-style1 .swiper-button-prev:hover {
  background-color: #004437 !important;
  transform: translateY(-50%) scale(1.1) !important;
}

