/*
Theme Name: GQ Child Theme
Version: 2.0
Description: Basic Child Theme by Guadrón Quijano S.A.S. de C.V.
Author: Luis Guadrón
Template: Divi
Author URL: https://guadronquijano.com
*/
 
/*------- Theme Customizations------- */

/* --------- Declaración de @font-face --------- */
@font-face {
    font-family: "Sansation";
    font-display: swap;
    src: url("https://virtueally.co/wp-content/uploads/et-fonts/Sansation_Regular.ttf") format("truetype");
    font-weight: 400; /* Regular */
    font-style: normal;
}

@font-face {
    font-family: "Sansation";
    font-display: swap;
    src: url("https://virtueally.co/wp-content/uploads/et-fonts/Sansation_Bold.ttf") format("truetype");
    font-weight: 700; /* Bold */
    font-style: normal;
}

@font-face {
    font-family: "Sansation";
    font-display: swap;
    src: url("https://virtueally.co/wp-content/uploads/et-fonts/Sansation_Light.ttf") format("truetype");
    font-weight: 300; /* Light */
    font-style: normal;
}


/* --------- Estilos para el texto --------- */

/* Estilo para párrafos: Regular */
p {
    font-family: "Sansation", sans-serif;
    font-weight: 400; /* Regular */
    font-size: 1rem; /* Tamaño base */
    line-height: 1.6;
    color: #222222;
}

/* Encabezados: Bold */
h1, h2, h3, h4, h5, h6 {
    font-family: "Sansation", sans-serif;
    font-weight: 700; /* Bold */
    color: #222222; /* Color del texto */
}

/* Tamaños específicos para encabezados */
h1 { font-size: 3.815rem; line-height: 1.3; }
h2 { font-size: 3.052rem; line-height: 1.3; }
h3 { font-size: 2.441rem; line-height: 1.3; }
h4 { font-size: 1.953rem; line-height: 1.3; }
h5 { font-size: 1.563rem; line-height: 1.3; }
h6 { font-size: 1.25rem; line-height: 1.3; }

/* Descripciones y texto pequeño: Light */
.info-description, small {
    font-family: "Sansation", sans-serif;
    font-weight: 300; /* Light */
    font-size: 1.1rem;
    color: #1F1B18; /* Color casi negro */
    line-height: 1.6;
}

/* Texto más pequeño */
small span {
    font-size: 0.64rem;
    font-weight: 300;
    color: #222222;
}







/* Gradiente animado para el fondo */
.animated-background {
    background: linear-gradient(90deg, #2F1640, #7249E8, #2F1640, #7249E8); /* Gradiente cíclico */
    background-size: 400% 400%; /* Tamaño más amplio para una animación fluida */
    animation: gradientAnimation 18s linear infinite; /* Animación infinita con velocidad ajustada */
}

/* Animación del gradiente */
@keyframes gradientAnimation {
    0% {
        background-position: 0% 50%;
    }
    25% {
        background-position: 50% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    75% {
        background-position: 50% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}



















.logo {
    display: inline-block !important; /* Asegura que sea visible */
    width: 120px !important; /* Ajusta el ancho del logo */
    height: 22.5px !important; /* Proporción ajustada al SVG */
    background-image: url('https://virtueally.co/wp-content/uploads/2024/11/VA-Wht.svg') !important;
    background-size: contain !important; /* Ajusta el logo dentro del contenedor */
    background-repeat: no-repeat !important;
    background-position: center !important;
    text-decoration: none !important; /* Elimina subrayado si el navegador lo agrega al enlace */
}





.logo-getstarted {
    display: inline-block; /* Muestra como elemento en línea */
    width: 120px; /* Ajusta el ancho */
    height: 22.5px; /* Ajusta la altura */
    background-image: url('https://virtueally.co/wp-content/uploads/2024/11/VA-Wht.svg'); /* Ruta de la imagen */
    background-size: contain; /* Escala la imagen dentro del contenedor */
    background-repeat: no-repeat; /* Evita repeticiones */
    background-position: center; /* Centra la imagen */
    text-decoration: none; /* Remueve el subrayado del enlace */
}









/* Estilos para los botones sin mega menú */
.menu-item-nmm .menu-button {
    background: none;
    border: none;
    font-family: 'Sansation_Regular', sans-serif;
    font-size: 16px;
    color: #F4F3F7; /* Blanco */
    cursor: pointer;
    padding: 10px 20px;
    transition: color 0.3s ease, transform 0.2s ease;
}

.menu-item-nmm .menu-button:hover {
    color: #7249E8; /* Morado claro al pasar el mouse */
    transform: scale(1.05); /* Pequeño efecto de zoom */
}

/* Ocultar botones en dispositivos móviles y tablet */
@media (max-width: 1024px) { /* Ocultar en dispositivos tablet y móviles */
    .menu-item-nmm .menu-button {
        display: none;
    }
}






/* Estilo básico del botón "Get Started" */
.menu-button-get-started {
    background-color: #D6FE15; /* Fondo verde */
    color: #2F1640; /* Texto morado oscuro */
    border: none;
    border-radius: 8px;
    font-family: 'Sansation_Bold', sans-serif;
    font-size: 16px;
    padding: 10px 20px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    display: inline-block; /* Asegura que se renderice como botón */
    text-align: center;
    text-decoration: none; /* Remueve subrayado en caso de ser un enlace */
    line-height: 1.5; /* Asegura que el texto esté centrado */
}

/* Hover para "Get Started" */
.menu-button-get-started:hover {
    background-color: #b6e513; /* Verde más oscuro al pasar el mouse */
    transform: scale(1.05); /* Efecto de zoom */
}

/* Ajustes específicos para dispositivos móviles */
@media (max-width: 768px) {
    .menu-button-get-started {
        font-size: 14px; /* Ajusta el tamaño de fuente para pantallas más pequeñas */
        padding: 8px 16px; /* Reduce el padding para adaptarse mejor al espacio */
        line-height: normal; /* Mantén el texto alineado correctamente */
    }
}










/* Contenedor del mega menú */
.mega-menu {
    display: none; /* Oculto por defecto */
    position: absolute;
    top: 100%; /* Aparece justo debajo del botón */
    left: 50%; /* Centrado horizontalmente */
    transform: translateX(-50%);
    background-color: #FFFFFF; /* Fondo blanco */
    width: 450px !important;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    padding: 10px 20px;
    flex-direction: row;
    gap: 20px;
    justify-content: space-between;
    align-items: flex-start;
}

/* Ajuste puntual para alinear el mega menú de "About Us" */
.menu-item-nmm .mega-menu {
    margin-top: 6px; /* Corrige el desfase visual */
}

/* Contenedor del contenido */
.mega-menu-content {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

/* Lista del mega menú */
.mega-menu-list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 1;
}

.mega-menu-list li {
    margin-bottom: 5px;
}

.mega-menu-list li:last-child {
    margin-bottom: 0;
}

.mega-menu-list li a {
    font-family: 'Sansation_Regular', sans-serif;
    font-size: 14px;
    color: #2F1640;
    text-decoration: none;
    display: block;
    transition: color 0.3s ease;
}

.mega-menu-list li a:hover {
    color: #7249E8;
}

/* Imagen en el mega menú */
.mega-menu-image {
    flex: 1;
    max-width: 200px;
    height: 200px;
    background-size: cover;
    background-position: center;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin: 0;
}

/* Mostrar el mega menú al pasar el mouse */
.menu-item:hover .mega-menu,
.menu-item-nmm:hover .mega-menu {
    display: flex;
}

/* Botones del menú (Solutions y About Us) */
.menu-button {
    background: none;
    border: none;
    font-family: 'Sansation_Regular', sans-serif;
    font-size: 16px;
    color: #F4F3F7;
    cursor: pointer;
    padding: 10px 20px;
    transition: color 0.3s ease, transform 0.2s ease;
    text-align: center;
}

.menu-button:hover {
    color: #7249E8;
    transform: scale(1.05);
}

/* Estructura contenedora de botones */
.menu-item,
.menu-item-nmm {
    position: relative;
    display: inline-block;
}

/* Ajustes para alineación y comportamiento visual */
.menu-item .menu-button,
.menu-item-nmm .menu-button {
    display: inline-block;
    text-align: center;
    vertical-align: middle;
}

/* Ocultar botones en tablet y móviles */
@media (max-width: 1024px) {
    .menu-item .menu-button,
    .menu-item-nmm .menu-button {
        display: none;
    }
}




















/* Estilo para el botón de hamburguesa */
.menu-button-hamburger {
    background: none;
    border: none;
    font-size: 24px;
    color: #F4F3F7; /* Blanco */
    cursor: pointer;
    display: none; /* Oculto por defecto, se muestra solo en móvil y tablet */
    padding: 0; /* Eliminar padding extra */
    margin: 0; /* Eliminar márgenes adicionales */
    transition: color 0.3s ease, transform 0.2s ease;
    z-index: 2000; /* Asegura que esté encima */
    position: absolute; /* Mantiene posición fija */
    top: 50%; /* Centrar verticalmente */
    right: 20px; /* Ajusta la distancia desde el borde derecho */
    transform: translateY(-50%); /* Centrado vertical */
}

/* Efecto hover en el botón */
.menu-button-hamburger:hover {
    color: #7249E8; /* Morado claro */
    transform: translateY(-50%) scale(1.1); /* Efecto de zoom sin afectar posición */
}

/* Mostrar el botón en dispositivos tablet y móviles */
@media (max-width: 1024px) {
    .menu-button-hamburger {
        display: block; /* Visible solo en pantallas pequeñas */
    }
}






/* Fondo del menú */
#fullscreen-menu {
    background-color: #2F1640; /* Morado oscuro */
    color: #D6FE15; /* Verde por defecto */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    display: none; /* Oculto por defecto */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    overflow-y: auto; /* Permite scroll interno si es necesario */
}

/* Mostrar el menú cuando está activo */
#fullscreen-menu.active {
    display: flex; /* Mostrar con flexbox */
}

/* Botón de cerrar */
.close-menu {
    font-size: 28px;
    background: none;
    border: none;
    color: #F4F3F7; /* Blanco */
    position: absolute;
    top: 20px;
    right: 20px;
    cursor: pointer;
    transition: color 0.3s ease;
}

.close-menu:hover {
    color: #7249E8; /* Morado claro */
}

/* Menú principal */
.menu-links {
    list-style: none !important; /* Eliminamos los bullets */
    margin: 0;
    padding: 0;
    text-align: center; /* Centrar horizontalmente */
    width: 100%;
}

.menu-links li {
    margin-bottom: 20px; /* Espaciado entre opciones */
}

.menu-links li a {
    font-size: 24px;
    color: #D6FE15; /* Verde */
    text-decoration: none;
    transition: color 0.3s ease, transform 0.2s ease;
}

.menu-links li a:hover {
    color: #F4F3F7; /* Blanco al hacer hover */
    transform: scale(1.05);
}

/* Submenú dentro de "Solutions" */
.menu-links li ul {
    list-style: none; /* Eliminamos los bullets del submenú */
    margin-top: 5px;
    padding-left: 0; /* Eliminar indentación */
}

.menu-links li ul li {
    margin-bottom: 0px;
}

.menu-links li ul li a {
    font-size: 18px; /* Tamaño más pequeño para submenú */
    color: #F4F3F7; /* blanco */
    text-decoration: none;
    transition: color 0.3s ease, transform 0.2s ease;
}

.menu-links li ul li a:hover {
    color: #F4F3F7; /* Blanco */
    transform: scale(1.05);
}

/* Redes sociales */
.social-links {
    display: flex;
    justify-content: left;
    margin-top: 40px;
    gap: 20px; /* Espacio entre iconos */
}

.social-links a {
    font-size: 20px;
    color: #F4F3F7; /* Verde */
    transition: color 0.3s ease, transform 0.2s ease;
}

.social-links a:hover {
    color: #F4F3F7; /* Blanco */
    transform: scale(1.1);
}

/* Evitar el scroll al abrir el menú */
body.no-scroll {
    overflow: hidden; /* Bloquea el scroll en la página */
}





/* Contenedor de iconos sociales */
.social-icons-desktop {
    display: flex;
    gap: 15px; /* Espaciado entre los iconos */
    align-items: center; /* Centrado vertical */
    justify-content: center; /* Centrado horizontal */
}

/* Estilos de los enlaces */
.social-icons-desktop a {
    font-size: 18px; /* Tamaño de los iconos */
    color: #F4F3F7; /* Blanco */
    text-decoration: none; /* Sin subrayado */
    transition: color 0.3s ease, transform 0.2s ease; /* Transiciones suaves */
}

/* Hover en los iconos */
.social-icons-desktop a:hover {
    color: #7249E8; /* Morado claro */
    transform: scale(1.1); /* Efecto de zoom */
}

/* Media query: ocultar en tablet y móvil */
@media (max-width: 1024px) {
    .social-icons-desktop {
        display: none; /* Ocultar los iconos en dispositivos más pequeños */
    }
}




/*----------------------------------------------HOME----------------------------------------------------------*>


/* Estilo del contenedor */
.hero-section {
    text-align: left;
    font-family: 'Sansation_Bold', sans-serif; /* Asegúrate de que la fuente esté cargada */
}

/* Estilo para el H1 */
.hero-section h1 {
    font-size: 3rem; /* Tamaño del título */
    line-height: 1.2;
    margin: 0 auto;
    color: #FFFFFF; /* Blanco para el texto principal */
}

/* Estilo para el texto no animado */
.non-animated-text {
    color: #FFFFFF; /* Blanco para el texto normal */
}

/* Estilo para el texto animado */
.animated-gradient {
    background: linear-gradient(45deg, #7249E8, #D6FE15, #7FB2D1, #F4F3F7);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradientAnimation 20s infinite alternate; /* Animación más lenta */
    font-weight: bold;
}

/* Animación del gradiente */
@keyframes gradientAnimation {
    0% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 100% 50%;
    }
}










.tilt-container {
    perspective: 1000px; /* Agrega profundidad */
    display: flex; /* Cambiado para centrar */
    justify-content: center; /* Centra horizontalmente */
    align-items: center; /* Centra verticalmente, opcional */
    max-width: 500px; /* Controla el tamaño */
    margin: auto; /* Asegura que se mantenga centrado */
}

.tilt-image {
    width: 100%;
    display: block;
    transition: transform 0.2s ease-out;
    transform-style: preserve-3d; /* Mantiene el efecto 3D */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); /* Agrega profundidad */
    border-radius: 10px; /* Opcional: esquinas redondeadas */
}








/* General styles for the section */
.info-section {
    text-align: center;
    padding: 10px 20px;
    color: #2F1640; /* Dark purple text color */
}

/* Title */
.info-title {
    font-family: 'Sansation_Bold', sans-serif;
    font-weight: bold;
    color: #7249E8; /* Purple color */
    margin-bottom: 15px;
    line-height: 1.2;
}

/* Responsive font sizes for the title */
.info-title {
    font-size: 3rem; /* Desktop (H1) */
}

@media (max-width: 1024px) { /* Tablet (H3) */
    .info-title {
        font-size: 2rem;
    }
}

@media (max-width: 768px) { /* Mobile (H4) */
    .info-title {
        font-size: 1.6rem;
		padding: 0px;
    }
}

/* Description */
.info-description {
    font-family: 'Sansation_Regular', sans-serif;
    font-size: 1.1rem;
    color: #1F1B18; /* Almost black */
    line-height: 1.6;
    margin-bottom: 25px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* Button */
.info-button {
    display: inline-block;
    background-color: #7249E8; /* Purple background */
    color: #FFFFFF; /* White text */
    font-family: 'Sansation_Bold', sans-serif;
    font-size: 1rem;
    padding: 12px 24px;
    text-decoration: none;
    border-radius: 8px;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.info-button:hover {
    background-color: #2F1640; /* Dark purple on hover */
    transform: scale(1.05);
}






/* Contenedor padre que agrupa todos los botones en una fila */
.menu-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    justify-content: flex-end; /* Cambiar a center o start según preferencia */
}

/* Comportamiento de los bloques de botón */
.menu-item,
.menu-item-nmm {
    display: inline-flex;
    align-items: center;
    position: relative;
}