/*
 * Archivo CSS para el plugin "MIW Header Scroll Effect".
 * Contiene los estilos para el header de Elementor con efecto de blur y transparencia.
 */

/* ========================================================= */
/* --- Reglas para el header en el estado inicial y con scroll --- */
/* ========================================================= */

/* Estilos de la cabecera para escritorio */
.elementor-657 .elementor-element-5ee2352c {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 9999 !important;
    transition: all 0.3s ease !important;
    backdrop-filter: blur(4px) !important;
    background: rgba(0, 0, 0, 0.1) !important;
}

/* Estilos al hacer scroll */
.elementor-657 .elementor-element-5ee2352c.scrolled {
    background: rgba(0, 0, 0, 0.7) !important;
    backdrop-filter: blur(10px) !important;
}

/* ========================================================= */
/* --- Reglas responsive para dispositivos móviles y tablets --- */
/* ========================================================= */
@media (max-width: 1024px) {
    /* Oculta los elementos de escritorio en móviles y tablets */
    .elementor-657 .elementor-element-5ee2352c {
        display: none !important;
    }
    
    /* Nueva regla para el contenedor del menú responsive */
    #page-content > div > div > div.elementor-element.elementor-element-c832e28.e-con-full.e-flex.e-con.e-child {
        max-width: min-content !important;
        top:24px;
    }

    /* Contenedor del header móvil, siempre visible y encima de todo */
    #page-content > div > div[data-id="4edd6e30"] {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        z-index: 10001 !important;
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        backdrop-filter: blur(8px) !important;
        background: rgba(0, 0, 0, 0.5) !important;
        padding: 10px 20px !important;
    }

    /* Oculta el ícono de hamburguesa cuando el menú está abierto */
    .elementor-element-d174614.is-open ~ .elementor-element-6a7724e0 {
        display: none !important;
    }
    
    /* Contenedor del ícono de menú y del menú en un grupo */
    .elementor-element-1ea2530 {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        width: auto !important;
    }

    /* Menú de navegación móvil con blur y lista vertical */
    .elementor-element-d174614 {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100vh !important;
        background-color: rgba(0, 0, 0, 0.9) !important;
        backdrop-filter: blur(10px) !important;
        display: none;
        padding-top: 80px;
        padding-left: 20px;
        padding-right: 20px;
        z-index: 10000 !important;
        overflow-y: auto !important;
    }

    /* Muestra el menú cuando tiene la clase is-open */
    .elementor-element-d174614.is-open {
        display: flex !important;
        flex-direction: column !important;
    }

    /* Estilos para los enlaces dentro del menú desplegable */
    .elementor-element-d174614 ul.gva-nav-menu {
        display: flex !important;
        flex-direction: column !important;
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .elementor-element-d174614 ul.gva-nav-menu a {
        color: #fff !important;
        font-size: 20px !important;
        padding: 10px 0 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
    }
    
    /* Estilos para el ícono de cierre */
    .close-icon {
        position: absolute !important;
        top: 20px !important;
        left: 20px !important;
        z-index: 10002 !important;
        display: none !important;
        color: #fff !important;
        font-size: 30px !important;
        cursor: pointer !important;
    }
    
    /* Muestra el ícono de cierre cuando el menú está abierto */
    .elementor-element-d174614.is-open ~ .close-icon {
        display: block !important;
    }

    /* Ajusta el logo y el botón para que se alineen correctamente */
    .elementor-element-7bbbe0de {
        position: static !important;
        flex-grow: 1 !important;
        text-align: center !important;
        width: auto !important;
    }
    
    .elementor-element-7c385ca8,
    .elementor-element-6a7724e0 {
        width: auto !important;
    }
}

/* ========================================================= */
/* --- Estilos para enlaces de escritorio --- */
/* ========================================================= */
.elementor-657 .elementor-element-5ee2352c .elementor-widget-text-editor a {
    font-size: 20px !important;
    color: #ffffff !important;
    text-decoration: none !important;
    display: inline-block;
    transition: color 0.3s ease-in-out, transform 0.3s ease-in-out;
}
.elementor-657 .elementor-element-5ee2352c .elementor-widget-text-editor a:hover {
    color: #c5d2e1 !important;
    transform: scale(1.05);
}

/* ========================================================= */
/* --- Animación para el botón "UNIRME AHORA" --- */
/* ========================================================= */
@keyframes pulse-color-scale {
  0% {
    background-color: #ffbd59 !important;
    color: #2c517e !important;
    transform: scale(1);
  }
  50% {
    background-color: #2c517e !important;
    color: #ffffff !important;
    transform: scale(1.05);
  }
  100% {
    background-color: #ffbd59 !important;
    color: #2c517e !important;
    transform: scale(1);
  }
}
/* Aplica la animación al botón de escritorio */
.elementor-657 .elementor-element-5ee2352c .elementor-widget-button a , .button-one{
    animation: pulse-color-scale 3s infinite ease-in-out;
    border-radius: 5px;
}
/* Aplica la animación al botón de móvil */
#page-content > div > div[data-id="4edd6e30"] .elementor-widget-button a {
    animation: pulse-color-scale 3s infinite ease-in-out;
    border-radius: 5px;
}

/* ========================================================= */
/* --- Reglas adicionales --- */
/* ========================================================= */
.elementor-657 p, .elementor-657 .elementor-widget-text-editor p {
    font-size: small !important;
}
.elementor-657 i.las.la-envelope {
    font-size: large !important;
}
.elementor-657 .bg-row-theme-second {
    background: transparent !important;
}


/* ========================================================= */
/* ---Estilos para los textos del slider --- */
/* ========================================================= */
/* .flex_caption .sub-title
 {
  color: #ffffff; /* Texto en color blanco */
  /* font-weight: bold; */
  /* La siguiente línea crea un contorno sólido de color azul */
  /* text-shadow:
    -1px -1px 0 #ffffff,  
    1px -1px 0 #ffffff,
    -1px 1px 0 #ffffff,
    1px 1px 0 #ffffff;
} */

/* .flex_caption .title {
      color: #ffbd59; /* Texto en color blanco */
    /* text-shadow:
    -1px -1px 0 #2c517e,  
    1px -1px 0 #2c517e,
    -1px 1px 0 #2c517e,
    1px 1px 0 #2c517e; 
} */


/*
 * Estilos para el slider en dispositivos móviles y tablets
 */
@media (max-width: 1024px) {
  /* ... (código anterior para el header) ... */

  /* Anula el margin-top negativo en el slider para que el texto no se suba */
  .item-slide .flex_caption {
    margin-top: 0 !important;
  }
  
  /* Usa Flexbox para centrar el contenido del slider verticalmente (opcional pero recomendado) */
  .flexslider .item-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
 #page-content > div > section.elementor-section.elementor-top-section.elementor-element.elementor-element-19d45524.elementor-section-full_width.elementor-section-height-default.elementor-section-height-default.row-top {
    margin-top: 18vh;
  }

  #page-content > div > section.elementor-section.elementor-top-section.elementor-element.elementor-element-19d45524.elementor-section-full_width.elementor-section-height-default.elementor-section-height-default.row-top > div > div > div > div > div > div > ol {
    rotate: 90deg;
    bottom: -70px;
  }

  #quienes-somos {
  background-image: none !important; 
      padding-top: 40px !important;
}
 /* Centra el contenido dentro de las columnas para móviles y tablets */
    .elementor-inner-section .ekit-wid-con {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
    }

        /* Centra el icono y el texto para que estén alineados */
    .elementor-inner-section .elementskit-infobox {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
    }

    #quienes-somos > div > div.elementor-column.elementor-col-50.elementor-top-column.elementor-element.elementor-element-14d71e6e.column-style-top > div > section.elementor-section.elementor-inner-section.elementor-element.elementor-element-2ace2649.elementor-section-full_width.elementor-section-height-default.elementor-section-height-default.row-top > div > div.elementor-column.elementor-col-50.elementor-inner-column.elementor-element.elementor-element-3f937e4b.column-style-top > div > div {
        padding: 0px 0px 14px 30px;
    }

    #quienes-somos > div > div.elementor-column.elementor-col-50.elementor-top-column.elementor-element.elementor-element-14d71e6e.column-style-top > div > section.elementor-section.elementor-inner-section.elementor-element.elementor-element-27549d8.elementor-section-full_width.elementor-section-height-default.elementor-section-height-default.row-top > div > div.elementor-column.elementor-col-50.elementor-inner-column.elementor-element.elementor-element-50e6d1c.column-style-top > div > div > div {
        padding: 0px 0px 0px 30px;
    }


}

#page-content > div > section.elementor-section.elementor-top-section.elementor-element.elementor-element-19d45524.elementor-section-full_width.elementor-section-height-default.elementor-section-height-default.row-top > div > div > div > div > div > div > ol {
    rotate: 90deg;
    bottom: -10px;
    left: calc(50%);
}


/* ========================================================= */
/* ---Estilos para section quienes somos --- */
/* ========================================================= */

section#quienes-somos {
    padding-top: 40vh;
}

#page-content > div > div.elementor-element.elementor-element-b489fa8.e-flex.e-con-boxed.e-con.e-parent.e-lazyloaded > div {
    margin-top: -110px !important; 
}

#academia > div.elementor-container.elementor-column-gap-default {
    top: -48px;
}
#servicios > div > div.elementor-column.elementor-col-50.elementor-top-column.elementor-element.elementor-element-375614a7.column-style-top.animated.fadeInDown > div > div.elementor-element.elementor-element-b14229e.button-one.elementor-widget.elementor-widget-button {
    margin-left: -185px;
    margin-top: 60px;
}


@media (max-width: 1024px) {
    #page-content > div > div.elementor-element.elementor-element-b489fa8.e-flex.e-con-boxed.e-con.e-parent.e-lazyloaded > div {
     margin-top: -102px !important; 
    }
    #academia > div.elementor-container.elementor-column-gap-default {
    top: 0px;
    }
    #academia {
        padding-bottom: 120px;
    }
    #academia > div.elementor-container.elementor-column-gap-default > div.elementor-column.elementor-col-50.elementor-top-column.elementor-element.elementor-element-289619bb.column-style-top > div > div.elementor-element.elementor-element-62961722.elementor-widget.elementor-widget-heading.animated.fadeInUp {
        padding: 20px 0px;
    }
    #page-content > div > section.elementor-section.elementor-top-section.elementor-element.elementor-element-19d45524.elementor-section-full_width.elementor-section-height-default.elementor-section-height-default.row-top > div > div > div > div > div > div > ol {
        bottom: -50px;
    }
    #servicios > div > div.elementor-column.elementor-col-50.elementor-top-column.elementor-element.elementor-element-375614a7.column-style-top.animated.fadeInDown > div > div.elementor-element.elementor-element-b14229e.button-one.elementor-widget.elementor-widget-button {
        margin-inline: auto;
        text-align: center;
        margin-top: 60px;
    }
    /* Reglas para la sección de 4 columnas (el footer) */

.elementor-inner-section[data-id="6f4aff80"] .elementor-inner-column {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }

    /* Centra el contenido del widget wrap dentro de cada columna */
    .elementor-inner-section[data-id="6f4aff80"] .elementor-widget-wrap {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }

    /* Centra la lista de íconos y el logo */
    .elementor-inner-section[data-id="6f4aff80"] .elementor-widget-image,
    .elementor-inner-section[data-id="6f4aff80"] .elementor-icon-list-items,
    .elementor-inner-section[data-id="6f4aff80"] .elementor-social-icons-wrapper {
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        width: 100% !important; /* Asegura que ocupen todo el ancho para centrar */
    }
    /* Regla específica para las listas de íconos dentro del footer para forzar el centrado */
    .elementor-inner-section[data-id="6f4aff80"] .elementor-icon-list-items {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        padding-left: 0 !important; /* Elimina el padding de la lista para centrar mejor */
    }

}


@media (max-width: 768px) {
  .elementskit-infobox {
    margin-bottom: 25px; 
  }
  .elementskit-info-box-title {
    font-size: 16px; /* más cómodo en móvil */
    line-height: 1.6;
  }
  .elementskit-info-box-title {
    text-align: left;
    line-height: 1.6;
    margin-bottom: 20px;
    font-size: 16px;
  }
  /* Ajusta el padding o margin top del contenedor */
  #page-content > div > section.elementor-section.elementor-top-section.elementor-element-c370a8f.row-top > div.elementor-container {
    margin-top: -200px !important;       /* si también hay margin */
}
#gallery-3 .gallery-item {
  width: 40% !important;  /* 2 imágenes por fila */
  float: left;
}
#page-content > div > section.elementor-section.elementor-top-section.elementor-element.elementor-element-c370a8f.elementor-section-boxed.elementor-section-height-default.elementor-section-height-default.row-top > div > div.elementor-column.elementor-col-50.elementor-top-column.elementor-element.elementor-element-c8e44b5.column-style-top > div > div.elementor-element.elementor-element-e00bcbd.elementor-widget.elementor-widget-heading.animated.fadeInUp > h2 {
    margin-top: 10px;
}
}