/*#region POR DEFECTO*/

:root {
    --color-rosa: #D34588;
    --color-azulBackground: rgba(0, 129, 187, 0.1);
    --color-azul: rgba(0, 129, 187, 0.1);
    --color-azul: #0081BB;
    --color-morado: #2C1E4A;
    --color-blancoNoDestello: #F5F5DC
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: Orbitron;
    background-color: var(--color-morado);
    margin: 0;
    padding: 0;
}

/*#endregion*/

/*#region FOOTER*/

footer {
    color: var(--color-rosa);
    position: absolute;
    width: 100%;
    height: 4rem;
    margin: 0px auto;
    text-align: center;
    border-top: 2px solid var(--color-rosa);
    background-color: white;
}

.textoFooter {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/*#endregion*/

/*#region OVERLAY*/

#overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    display: none;
}

/*#endregion*/

/*#region MENU*/

.navbar-end {
    justify-content: flex-end;
}

.navbar-item {
    color: var(--color-rosa) !important;
    font-weight: bold;
    font-family: Orbitron;
}

/*#endregion*/

/*#region COMUNES*/

.tituloSeccion {
    color: white;
    font-size: 3vw;
    font-family: Orbitron;
    margin-bottom: 2vw;
}

/*#endregion*/

/*#region SECCION INICIO*/

/* Estilos para la sección hero */
.hero {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh; /* Altura mínima igual al alto de la ventana */
    overflow: hidden;
    position: relative;
}

/* Estilos para el video en la sección hero */
.hero-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

    .hero-video video {
        width: 100%;
        height: 100%;
        object-fit: cover; /* Ajusta el tamaño del video para cubrir completamente */
    }

/* Estilos para el contenido centrado */
.container.has-text-centered {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%; /* Ocupa todo el espacio vertical disponible */
}

.logo-image {
    max-width: 80%; /* Establece el ancho máximo del logo */
    height: auto; /* Altura automática para mantener la proporción */
}

.tituloWeb {
    color: white;
    font-size: 3vw; /* Tamaño del título relativo al ancho de la pantalla */
    font-family: Orbitron;
    margin-top: 20px; /* Espacio superior para separar del logo */
}

@media screen and (max-width: 768px) {
    .hero-video {
        display: block !important;
    }
}

/*#endregion*/

/*#region SECCION QUIENES*/

/* Estilos para el contenido superpuesto */
.hero-body {
    position: relative;
    z-index: 1; /* Asegurar que el contenido esté por encima del video */
}

#contenidoQuienes {
    padding: 20px;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.textoQuienes {
    color: white;
    font-size: 1.5vw;
    font-family: 'Anonymous Pro';
}

/* Ocultar el video en dispositivos móviles solo en la sección "Quiénes" */
@media screen and (max-width: 768px) {
    #quienes .hero-video video {
        display: none; /* Ocultar el video solo en la sección "Quiénes" en dispositivos móviles */
    }

    #contenidoQuienes {
        width: 100%; /* Ancho completo en dispositivos móviles */
        padding: 10px; /* Reducir el padding en dispositivos móviles */
    }
}

/*#endregion*/

/*#region SECCION PRODUCTOS*/

/* Estilos adicionales para la sección de productos */

.contenedorElemento {
    height: 100%; /* Asegura que todos los elementos ocupen la misma altura */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 2px solid var(--color-rosa);
    background-color: #f2f2f2;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.imgProductos {
    width: 100%; /* Ocupa todo el ancho disponible dentro de su contenedor */
    height: auto; /* Altura automática para mantener la proporción */
    max-width: 100%; /* Ajusta el ancho máximo de la imagen al tamaño de su contenedor */
    margin-bottom: 15px;
}

.tituloProductos {
    font-size: 1.5vw;
    font-weight: bold;
    color: var(--color-rosa);
    text-align: center;
    margin-bottom: auto; /* Empujar el contenido hacia arriba */
}

.textoProductos {
    font-size: 1vw;
    color: var(--color-morado);
    flex: 1; /* Ocupar todo el espacio vertical restante */
    overflow: auto; /* Habilitar el desplazamiento si el texto es demasiado largo */
    margin: 1vw;
}

/* Ocultar el video en dispositivos móviles solo en la sección "Quiénes" */
@media screen and (max-width: 768px) {
    #imgProductos {
        width: 20% !important;
    }

    .textoProductos {
        text-align: center;
    }
}

/*#endregion*/

/*#region SECCION SERVICIOS*/

/* Estilos para la sección de servicios */

#contenidoServicios {
    padding: 20px; /* Ajusta el espaciado interno */
    /*background-color: rgba(255, 255, 255, 0.8);*/ /* Fondo semi-transparente para el contenido */
    border-radius: 10px; /* Bordes redondeados */
}

.containerServicios {
    background-color: white;
    padding: 1vw;
    border: 2px solid var(--color-rosa);
}

.tituloServicios {
    font-family: Orbitron !important;
    color: var(--color-rosa);
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 20px;
}

.containerServicios {
    margin-bottom: 30px;
}


.textoServicios {
    font-size: 1rem;
    color: var(--color-morado);
    font-family: 'Anonymous Pro'
}

/*#endregion*/

/*#region SECCION DESCARGAS*/

#contenedorDescargas {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.contenido-seccion h2 {
    font-size: 1vw;
}

#descargaArchivo {
    cursor: pointer;
}

    #descargaArchivo:hover {
        text-decoration: underline;
    }

.contenedor {
    display: flex;
    flex-direction: column;
    text-align: center;
    color: var(--color-rosa);
}

.secciones {
    position: relative;
}

.contenido-seccion {
    padding: 10px;
    border: 2px solid var(--color-rosa);
    margin: 20px;
    text-align: center;
}

.tituloContenidoSeccion {
    font-size: 1.5vw;
}

.div-adicional {
    color: black;
    display: none;
    position: absolute;
    top: 0;
    left: 100%;
    width: 40vw;
    padding: 10px;
    border: 2px solid var(--color-rosa);
    background-color: white;
}

.secciones:hover .div-adicional {
    display: block;
}

.textoSeccion {
    font-family: 'Anonymous Pro';
    font-size: 1vw;
}

.descargaArchivo {
    display: flex;
    flex-direction: row;
    flex: 1;
    align-items: center;
    justify-content: center;
    margin: 15px;
    color: var(--color-rosa);
    font-size: 1vw;
}

.listaArchivos {
    display: flex;
    flex-direction: row;
}

/*#endregion*/

/*#region SECCION CONTACTO*/
/* Estilos adicionales para la sección de contacto */
#contenidoContacto {
    margin-top: 20px; /* Espacio superior */
}

/* Estilos para cada bloque de contacto */
.bloqueContacto {
    text-align: center;
    padding: 20px;
    margin-bottom: 20px;
}

    .bloqueContacto h1 {
        color: white;
        font-size: 1.5vw;
        font-family: Orbitron;
        padding-bottom: 1vw;
    }

    .bloqueContacto p {
        color: var(--color-rosa);
        font-size: 1.5vw;
        font-family: 'Anonymous Pro';
    }

    .bloqueContacto a {
        color: var(--color-rosa);
        font-size: 1.5vw;
        font-family: 'Anonymous Pro';
        text-decoration: underline;
    }

#botonContactar {
    cursor: pointer;
    background-color: var(--color-rosa);
    font-family: Orbitron;
    font-weight: bold;
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    display: inline-block;
    transition: background-color 0.3s ease;
    border: 2px solid var(--color-rosa);
}

    #botonContactar:hover {
        background-color: white;
        border: 2px solid var(--color-rosa);
        color: var(--color-rosa);
    }


/*#endregion*/

/*#region ENVIOEMAIL*/

#tituloFormularioEmail {
    color: white;
    font-size: 32px;
    font-family: Orbitron;
    margin: 15PX;
}

#contenedorFormulario {
    display: flex; /* Utilizar flexbox */
    flex-direction: row; /* Orientación de los elementos hijos */
}

#formularioIzqd, #formularioDrch {
    flex: 1; /* Hace que cada elemento ocupe la misma cantidad de espacio disponible */
    padding: 10px; /* Espacio interno para los elementos hijos */
    box-sizing: border-box; /* Incluye el padding en el ancho total */
}

.labelEstilos {
    font-weight: bold;
    font-family: Orbitron;
}

.partesFormulario {
    margin: 15px;
}

    .partesFormulario label {
        color: white;
        font-size: 20px;
        margin-bottom: 10px;
    }

    .partesFormulario input {
        height: 30px;
    }

.error {
    font-family: Arial;
    font-size: 15px;
    font-weight: bold;
}

#contenedorEnvioEmail {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}

.campoFormularioEstilo {
    display: flex;
    flex-direction: column;
    font-family: 'Anonymous Pro';
    margin-bottom: 10px;
}

    .campoFormularioEstilo span {
        color: red;
    }

    .campoFormularioEstilo i {
        color: seagreen;
        height: 10px;
        width: 10px;
    }

.contactoBox {
    height: 150px;
    resize: none;
}

.textBoxEstilos {
    height: 20px;
    width: 90%;
    border: 2px solid var(--color-rosa);
    background-color: var(--color-morado);
    color: white;
    font-family: 'Anonymous Pro';
    font-size: 18px
}

.contactoBox {
    height: 350px;
    resize: none;
}

.botonConfirm {
    width: 150px;
    border: 2px solid var(--color-rosa) !important;
    font-family: Orbitron !important;
    font-size: 14px !important;
    font-weight: bold !important;
}

.botonEnviar:hover {
    background-color: var(--color-rosa) !important;
    color: white !important;
}

.botonEnviar {
    background-color: white !important;
    color: var(--color-rosa) !important;
}

.botonCancelar {
    background-color: var(--color-rosa) !important;
    color: white !important;
}

    .botonCancelar:hover {
        background-color: white !important;
        color: var(--color-rosa) !important;
    }

/*#endregion*/

/*#region JCONFIRM*/
.jconfirm.jconfirm-white .jconfirm-box, .jconfirm.jconfirm-light .jconfirm-box {
    background-color: var(--color-morado) !important;
    border: 2px solid var(--color-rosa);
    box-shadow: 5px 5px 15px 5px rgba(0,0,0,0.5) !important;
}

#tituloConfirm {
    color: white;
    font-family: Orbitron;
}

#mensajeConfirm {
    color: var(--color-rosa);
    text-align: center;
}
/*#endregion*/


.custom-contenedor-carrusel {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 90%; /* Ajusta según el diseño */
    margin: 0 auto; /* Centra el carrusel */
}

.custom-carrusel {
    display: flex;
    overflow: hidden;
    width: 100%; /* Ajusta el tamaño del carrusel */
    padding: 10px;
    box-sizing: border-box;
    background-color: var(--color-blanco);
    position: relative;
}

.custom-carrusel-content {
    display: flex;
    transition: transform 0.5s ease;
    will-change: transform;
}

.custom-archivo {
    flex: 0 0 auto;
    width: 200px; /* Tamaño del contenedor de los elementos */
    height: 200px;
    margin: 0 15px; /* Espacio entre los elementos */
    text-align: center;
    position: relative;
    background-color: var(--color-morado);
    cursor: pointer; /* Cambia el cursor a una mano */
    perspective: 1000px; /* Añadido para mejorar el efecto 3D */
    border: 2px solid var(--color-rosa); /* Borde morado */
    border-radius: 10px; /* Bordes redondeados */
}

.custom-archivo-inner {
    width: 100%;
    height: 100%;
    transition: transform 1s; /* Cambia la duración del giro */
    transform-style: preserve-3d;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.custom-archivo-inner-no-imagen {
    width: 100%;
    height: 100%;
    transform: none; /* Sin giro */
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.custom-archivo:hover .custom-archivo-inner:not(.no-imagen) {
    transform: rotateY(180deg); /* Aplica el giro solo si hay imagen */
}

.custom-archivo-imagen, .custom-descripcion-imagen {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    backface-visibility: hidden; /* Oculta el lado opuesto */
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    box-sizing: border-box;
    text-align: center;
}

.custom-archivo-imagen {
    object-fit: cover;
    background-color: var(--color-morado);
}

.custom-descripcion-imagen {
    color: var(--color-blanco);
    background-color: var(--color-morado);
    transform: rotateY(180deg); /* Solo rota el texto cuando hay una imagen */
}

.custom-archivo.no-imagen .custom-descripcion-imagen {
    transform: none; /* Sin giro */
    display: flex; /* Mostrar la descripción sin giro */
}

.custom-flecha {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 2rem;
    color: var(--color-blanco);
    cursor: pointer;
    padding: 12px;
    z-index: 2;
    background-color: rgba(0, 0, 0, 0.5); /* Fondo semi-transparente para mejorar la visibilidad */
    border-radius: 10%; /* Bordes redondeados para las flechas */
}

    .custom-flecha.izquierda {
        left: -2rem;
    }

    .custom-flecha.derecha {
        right: -4rem;
    }

.loaderCustom {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url('/img/loading.gif') 50% 50% no-repeat rgb(249,249,249);
    opacity: 0.8;
    visibility: hidden;
}