/*!
Theme Name: Trek Divers
Theme URI: https://www.kadencewp.com/kadence-theme/
Template: kadence
Author: DMP
Author URI: https://divemarketingpro.com/
Description: Theme for Trek Divers
Version: 1.0.0
License: GNU General Public License v3.0 (or later)
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: kadence-child
*/

/* Añadir estilos personalizados aquí 
-------------------------------------------------------------- */

/*
 * ----------------------------------------
 * animaciones 
 * ----------------------------------------
 */

.text-focus-in {
	-webkit-animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) 0.2s both;
	        animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) 0.2s both;
}

@-webkit-keyframes text-focus-in {
  0% {
    -webkit-filter: blur(12px);
            filter: blur(12px);
    opacity: 0;
  }
  100% {
    -webkit-filter: blur(0px);
            filter: blur(0px);
    opacity: 1;
  }
}
@keyframes text-focus-in {
  0% {
    -webkit-filter: blur(12px);
            filter: blur(12px);
    opacity: 0;
  }
  100% {
    -webkit-filter: blur(0px);
            filter: blur(0px);
    opacity: 1;
  }
}


 /*
 * ----------------------------------------
 * fin animaciones 
 * ----------------------------------------
 */


.elemento-muy-centrado {
    max-width: 60% !important;
    margin-right: auto !important;
    margin-left: auto !important;
}
/* span.button-style-secondary span.kt-btn-inner-text {
    text-decoration: underline;
} */

span.button-style-secondary,
a.button-style-secondary {
    border-bottom: 2px solid var(--global-palette1) !important;
}
span.button-style-secondary:hover,
a.button-style-secondary:hover {
    border-bottom: 2px solid var(--global-palette2) !important;
}

h3.kt-title-text {
    color: inherit !important;
    font-size: inherit !important;
}
a.kt-tab-title span.kb-svg-icon-wrap {
  margin-top: -8px !important;
}
figure.wp-block-video video  {
  border-radius: 16px;
}

/* Estilos para el modal personalizado */

.custom-modal {
  position: fixed;
  inset: 0;
  background: rgba(3, 50, 78, 0.8);
  z-index: 9999;

  display: flex;
  align-items: center;
  justify-content: center;

  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.custom-modal.active {
  opacity: 1;
  visibility: visible;
}

.modal-box {
  background: #ffffff;
  max-width: 80%;
  height: auto;
  max-height: 95vh;
  overflow-y: auto;
  width: 80%;
  padding: 2rem;
  border-radius: 8px;
  position: relative;
  box-shadow: 0px 14px 32px rgba(0,0,0,0.3);
  transform: translateY(30px) scale(0.95);
  transition: transform 0.3s ease;
}

.custom-modal.active .modal-box {
  transform: translateY(0) scale(1);
}

.open-modal {
  cursor: pointer;
  transition: transform 0.2s ease;
}

.open-modal:hover {
  transform: scale(1.2);
}

/* Estilos para el botón de cierre del modal */

.close-modal {
  position: absolute;
  top: 1rem;
  right: 1rem;

  font-size: 2rem;
  font-weight: 300;

  cursor: pointer;
  line-height: 1;

  color: #12384d;
  transition: transform 0.2s ease, color 0.2s ease;
}


 /* Estilos para el menu pricipal en vertical */

#site-navigation .menu {
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: flex-end;
}

/* estilo del panel del menú cuando lo fijamos */
ul#primary-menu {
  position: absolute;       /* lo fijamos en pantalla para poder colocarlo junto al hero */
  right: 0;
  top: 0;                /* se ajustará por JS */
  width: 235px;          /* ancho del panel; ajustar según diseño */
  padding: 20px 5px 20px 5px;  /* espacio interno */
  background-color: rgba(0,0,0,0.4);
  overflow-y: visible !important;  /* permite que el contenido se desplace si es necesario */
  box-sizing: border-box;
  z-index: 9999;
}

/* enlaces clicables */
ul#primary-menu li a {
  pointer-events: auto;
  display: inline-block;
}

.header-navigation .menu {
  justify-content: start !important;
}

#primary-menu .sub-menu {
  position: relative !important;
  top: 10px !important;
}


/* Solo cuando la cabecera está en modo sticky (después de hacer scroll) */
.kadence-sticky-header.item-is-fixed.item-is-stuck ul#primary-menu {
  position: static !important;
  width: auto !important;
  height: auto !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  padding: 0 !important;
  background-color: transparent !important;
  overflow: visible !important;
  z-index: auto !important;
}

.kadence-sticky-header.item-is-fixed.item-is-stuck ul#primary-menu .sub-menu {
  position: absolute !important;
  top: initial !important;
}
.kadence-sticky-header.item-is-fixed.item-at-start ul#primary-menu .sub-menu {
  background: var(--global-palette7) !important;
  border-radius: 8px;
}
.kadence-sticky-header.item-is-fixed.item-at-start ul#primary-menu .sub-menu li {
  border-bottom: 1px solid rgba(0,0,0,0.2);
}
.kadence-sticky-header.item-is-fixed.item-at-start ul#primary-menu .sub-menu li a {
  color: var(--global-palette1) !important;
}
.kadence-sticky-header.item-is-fixed.item-at-start ul#primary-menu .sub-menu li.menu-item.current-menu-item a {
  background: var(--global-palette7) !important;
}
.kadence-sticky-header.item-is-fixed.item-at-start ul#primary-menu .sub-menu li a:hover {
  background: var(--global-palette7) !important;
  color: var(--global-palette2) !important;
}
.kadence-sticky-header.item-is-fixed.item-is-stuck #site-navigation .menu {
  flex-direction: row !important;
  gap: var(--kadence-header-menu-gap, 20px) !important;
  align-items: center !important;
  justify-content: flex-end !important;
}
/* ================================
   TRANSICIÓN SUAVE SUBMENÚ
   ================================ */

/* Estado inicial: submenú cerrado */
#primary-menu .sub-menu {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(-10px);
  transition:
    max-height 0.35s ease,
    opacity 0.35s ease,
    transform 0.35s ease;
}

/* Estado abierto: cuando Kadence activa el submenú */
#primary-menu li.menu-item--open > .sub-menu,
#primary-menu li.menu-item-has-children > button[aria-expanded="true"] + .sub-menu {
  max-height: 500px;
  opacity: 1;
  transform: translateY(0);
}

/* fin estilos para el menu pricipal en vertical */

/* 
********************************
***********Responsive***********
******************************** 
*/



@media (max-width: 768px) {
    .elemento-muy-centrado {
        max-width: 95% !important;
    }
    div.seccion-texto-hero-general {
        padding: 20px;
        background: rgba(0,0,0,0.6);
        border-radius: 16px;
    }
    .modal-box {
        max-width: 95%;
        width: 95%;
    }
  }