.elementor-2 .elementor-element.elementor-element-bfc6f5d{--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;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2 .elementor-element.elementor-element-6e946b1{--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;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2 .elementor-element.elementor-element-0e410b5{--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;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2 .elementor-element.elementor-element-979632d{--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;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2 .elementor-element.elementor-element-5cc339a{--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;}:root{--page-title-display:none;}/* Start custom CSS for container, class: .elementor-element-bfc6f5d *//* ====== ESTILOS DE LA SECCIÓN HERO (CORRECCIÓN FINAL) ====== */

.hero {
    position: relative;
    height: 100vh;
    width: 100%; 
    color: #FFFFFF;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; /* Muy importante para ocultar el exceso del video */
}

/* El video de fondo */
#hero-video {
    position: absolute;
    top: 50%;
    left: 50%;
    /* NUEVO: Hacemos el video ligeramente más grande que el contenedor */
    min-width: 101%;
    min-height: 101%;
    width: auto;
    height: auto;
    z-index: -1;
    transform: translateX(-50%) translateY(-50%);
    object-fit: cover;
}

/* Contenedor del texto y botones */
.hero-content { 
    position: relative; 
    z-index: 1;
}

/* Estilo específico para el H1 del hero */
.hero-content h1 { 
    color: #C51F1F;
    text-shadow: none;
    position: relative;
    display: inline-block;
    padding: 0.1em 0.3em;
}

/* Efecto de fondo amarillo inclinado para el H1 */
.hero-content h1::before {
    content: '';
    position: absolute;
    left: -5%;
    top: 0;
    width: 110%;
    height: 100%;
    background-color: #FACF2B;
    transform: skew(-15deg);
    z-index: -1;
    border-radius: 8px;
}

/* Párrafo del hero */
.hero-content p { 
    font-size: calc(1em + 0.4vw); 
    margin: 0 auto 2em; 
    line-height: 1.6;
    color: #FFFFFF;
    text-shadow: 0 2px 8px rgba(0,0,0,0.8);
    max-width: none;
}

/* Contenedor de los botones */
.hero-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap; 
}

/* ====== ESTILOS DE ANIMACIÓN (necesarios para el hero) ====== */
.animate-on-scroll {
    opacity: 0;
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.animate-fade-in {
    transform: translateY(50px);
}
.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translate(0, 0);
}


/* ====== MEDIA QUERIES PARA BOTONES DEL HERO EN MÓVIL ====== */
@media (max-width: 767px) {
    .hero-buttons {
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }
    .hero-buttons .btn {
        width: 80%;
        max-width: 300px;
    }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6e946b1 *//* ====== ESTILOS DE LA SECCIÓN HERO (CORRECCIÓN FINAL) ====== */

.hero {
    position: relative;
    height: 100vh;
    width: 100%; 
    color: #FFFFFF;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; /* Muy importante para ocultar el exceso del video */
}

/* El video de fondo */
#hero-video {
    position: absolute;
    top: 50%;
    left: 50%;
    /* NUEVO: Hacemos el video ligeramente más grande que el contenedor */
    min-width: 101%;
    min-height: 101%;
    width: auto;
    height: auto;
    z-index: -1;
    transform: translateX(-50%) translateY(-50%);
    object-fit: cover;
}

/* Contenedor del texto y botones */
.hero-content { 
    position: relative; 
    z-index: 1;
}

/* Estilo específico para el H1 del hero */
.hero-content h1 { 
    color: #C51F1F;
    text-shadow: none;
    position: relative;
    display: inline-block;
    padding: 0.1em 0.3em;
}

/* Efecto de fondo amarillo inclinado para el H1 */
.hero-content h1::before {
    content: '';
    position: absolute;
    left: -5%;
    top: 0;
    width: 110%;
    height: 100%;
    background-color: #FACF2B;
    transform: skew(-15deg);
    z-index: -1;
    border-radius: 8px;
}

/* Párrafo del hero */
.hero-content p { 
    font-size: calc(1em + 0.4vw); 
    margin: 0 auto 2em; 
    line-height: 1.6;
    color: #FFFFFF;
    text-shadow: 0 2px 8px rgba(0,0,0,0.8);
    max-width: none;
}

/* Contenedor de los botones */
.hero-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap; 
}

/* ====== ESTILOS DE ANIMACIÓN (necesarios para el hero) ====== */
.animate-on-scroll {
    opacity: 0;
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.animate-fade-in {
    transform: translateY(50px);
}
.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translate(0, 0);
}


/* ====== MEDIA QUERIES PARA BOTONES DEL HERO EN MÓVIL ====== */
@media (max-width: 767px) {
    .hero-buttons {
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }
    .hero-buttons .btn {
        width: 80%;
        max-width: 300px;
    }
}/* End custom CSS */