.elementor-1001 .elementor-element.elementor-element-0e14599{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1001 .elementor-element.elementor-element-34b777d > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}:root{--page-title-display:none;}.elementor-widget .tippy-tooltip .tippy-content{text-align:center;}/* Start custom CSS for html, class: .elementor-element-34b777d *//* Sección Hero con fondo verde */
.hero {
  background-color: #3B584D;
  padding: 50px 0 80px 0; /* Reducido padding superior y aumentado el inferior */
  text-align: center;
  position: relative;
  overflow: hidden; /* Evita que se muestren elementos fuera del módulo */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}
/* Menú centrado en columna */
.hero-menu {
  display: inline-flex;
  flex-direction: column;
  gap: 16px; /* Sin cambios en desktop */
  position: relative;
  z-index: 10;
  margin-bottom: 40px; /* Añadido margen inferior */
}
/* Estilo base de los enlaces */
.hero-link {
  position: relative; /* Crea un contexto de posicionamiento para el pseudo-elemento */
  display: inline-block;
  font-family: spn, sans-serif;
  font-size: 48px; /* Sin cambios en desktop */
  color: rgb(225, 224, 207);
  text-decoration: none;
  padding: 8px 18px; /* Sin cambios en desktop */
  z-index: 0; /* Base para establecer la jerarquía de elementos */
  letter-spacing: -1.5px; /* Añadido para juntar más las letras */
}
/* El texto se envuelve en un span para que siempre aparezca por encima */
.hero-link span {
  position: relative;
  z-index: 3;
}
/* Pseudo-elemento para el efecto hover (imagen de fondo) */
.hero-link::before {
  content: "";
  position: absolute;
  top: 70%;
  left: 50%;
  width: 0;
  height: 0;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.7s ease, width 0.7s ease, height 0.7s ease; /* Solo modificada la transición para que sea más suave */
  pointer-events: none; /* Evita interferir en la interacción con otros enlaces */
  z-index: -1; /* Siempre detrás del contenido (texto) */
}
/* Estado hover: se expande el pseudo-elemento */
.hero-link:hover::before {
  width: 500px;
  height: 700px;
  opacity: 1;
}
/* Regla para mantener el color blanco del texto en hover */
.hero-link:hover span {
  color: rgb(225, 224, 207);
}
/* Imagen para "Luna de miel" */
.hero-link.luna::before {
  background-image: url('https://theroutebook.com/wp-content/uploads/2025/04/2.png');
}
/* Imagen para "Safaris" */
.hero-link.safaris::before {
  background-image: url('https://theroutebook.com/wp-content/uploads/2025/04/Untitleddesign1.png');
}
/* Imagen para "Exóticos" */
.hero-link.exoticos::before {
  background-image: url('https://theroutebook.com/wp-content/uploads/2025/04/tajmahal-scaled.jpg');
}
/* Imagen para "Aventura" */
.hero-link.aventura::before {
  background-image: url('https://theroutebook.com/wp-content/uploads/2025/04/Untitleddesign2.png');
}
/* Imagen para "Aventura" */
.hero-link.familia::before {
  background-image: url('https://theroutebook.com/wp-content/uploads/2025/04/3.png');
}
/* Reposicionamiento para el primer enlace */
.hero-menu .hero-link:first-child::before {
  top: 50%;
  transform: translate(-50%, -50%);
}
/* Reposicionamiento para el último enlace */
.hero-menu .hero-link:last-child::before {
  top: auto;
  bottom: 50%;
  transform: translate(-50%, 35%);
}
/* ===== RESPONSIVE ===== */
/* Para pantallas grandes (mínimo 1920px) */
@media screen and (min-width: 1920px) {
  .hero-link {
    font-size: 53px; /* Sin cambios */
    letter-spacing: -1.8px; /* Ajustado para mantener las letras juntas */
  }
  .hero-link:hover::before {
    width: 600px; /* Aumentado proporcionalmente */
    height: 800px; /* Aumentado proporcionalmente */
  }
}
/* Para portátiles y tablets (máximo 1024px) */
@media screen and (max-width: 1024px) {
  .hero {
    padding: 0 0 60px 0; /* Añadido padding inferior de 60px */
    min-height: 100vh; /* Asegurar que ocupa toda la altura de la pantalla */
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .hero-menu {
    gap: 6px; /* Reducido a 6px para menos espacio entre enlaces */
    margin: 0; /* Eliminar cualquier margen horizontal */
    margin-bottom: 40px; /* Añadir margen inferior */
  }
  .hero-link {
    font-size: 40px; /* Aumentado aún más el tamaño para tablet */
    padding: 5px 12px; /* Reducido para hacer el menú más compacto */
    letter-spacing: -1.2px; /* Añadido para juntar más las letras */
    transition: transform 0.3s ease; /* Transición más suave */
  }
  .hero-link:hover::before {
    width: 300px; /* Reducido */
    height: 420px; /* Reducido */
  }
}
/* Para tablet (máximo 768px) */
@media screen and (max-width: 768px) {
  .hero {
    padding: 0 0 50px 0; /* Ajustado el padding inferior */
  }
  .hero-menu {
    gap: 5px; /* Reducido para menos espacio */
    margin-bottom: 30px; /* Margen inferior */
  }
  .hero-link {
    font-size: 36px; /* Aumentado más que antes */
    padding: 4px 10px; /* Reducido para hacerlo más compacto */
    letter-spacing: -1px; /* Añadido para juntar más las letras */
  }
  .hero-link:hover::before {
    width: 280px; /* Reducido */
    height: 400px; /* Reducido */
  }
}
/* Para móvil (máximo 480px) */
@media screen and (max-width: 480px) {
  .hero {
    padding: 0 0 150px 0; /* Ajustado el padding inferior */
  }
  .hero-menu {
    gap: 12px; /* Sin cambios */
    margin-bottom: 35px; /* Margen inferior */
  }
  .hero-link {
    font-size: 35px; /* Sin cambios */
    padding: 5px 10px; /* Sin cambios */
    letter-spacing: -1px; /* Sin cambios */
  }
  .hero-link:hover::before {
    width: 220px; /* Sin cambios */
    height: 330px; /* Sin cambios */
  }
}/* End custom CSS */