/*
Theme Name: Theme Unikemia
Theme URI: #
Description: Tema Unikemia
Author: stalker-shinta
Author URI: #
Template: hello-elementor
Version: 1.0.1
Text Domain: theme-unikemia-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
*/

/*Efecto glow en header*/
/* Preparamos el contenedor principal */
.sh-header-glow {
    background-color: rgba(255, 255, 255, 0.70) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
}

/* El motor del Resplandor (Ahora cubriendo todo el ancho) */
.sh-header-glow::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0; /* Anclado a la izquierda */
    width: 100%; /* Cubre el 100% del contenedor */
    height: 100%;
    
    /* Degradado elíptico expansivo: Nace en el centro superior y se expande hacia los lados y abajo */
    background: radial-gradient(ellipse 100% 100% at 50% 0%, rgba(201, 0, 64, 0.12) 0%, rgba(201, 0, 64, 0) 80%);
    
    /* El desenfoque para mantener la suavidad */
    filter: blur(20px); 
    
    /* CRÍTICO: Envía la luz al fondo */
    z-index: 0;
    pointer-events: none; 
}

/* Aseguramos que el contenido quede por encima (Se mantiene igual) */
.sh-header-glow > * {
    position: relative;
    z-index: 1;
}

/*Ajusta posision timeline movil Page: Universidad corporativa*/
.jet-timeline__line{
    left: 20px !important;
}

/* 1. Definimos la matemática de la animación (Los fotogramas clave) */
@keyframes shGiroInfinito {
    from {
        transform: rotate(0deg); /* Empieza en 0 grados */
    }
    to {
        transform: rotate(360deg); /* Termina en 360 grados */
    }
}

/* 2. Definimos la regla CSS que aplicaremos al elemento */
.sh-rotacion-infinita {
    /* Llamamos a la animación definida arriba */
    animation-name: shGiroInfinito;
    
    /* Duración: Tiempo que tarda en dar UNA vuelta completa */
    animation-duration: 20s; /* Ajusta este valor: menor tiempo = más rápido */
    
    /* Repetición: Que no pare nunca */
    animation-iteration-count: infinite;
    
    /* Curva de velocidad: Lineal (velocidad constante y suave sin paradas) */
    animation-timing-function: linear;
    
    /* CRÍTICO: Asegura que el punto de giro sea el centro exacto */
    transform-origin: center center;
    
    /* Optimización para navegadores modernos */
    will-change: transform;
}

/*Sombras - Pagina home -> seccion el conocimiento existe -> iconos */
.sh-box-icon-02 {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

/* ==============================================================
   ESTRUCTURA GLOBAL (Aplica a TODOS los elementos del acordeón home)
   ============================================================== */
.sh-acordeon .jet-toggle__control {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
}

/* Forzamos a que el bloque de texto se vaya a la izquierda */
.sh-acordeon .jet-toggle__label-text {
    order: 1;
}

/* Forzamos a que la flecha nativa de JetEngine se vaya a la derecha */
.sh-acordeon .jet-toggle__label-icon {
    order: 2;
    margin-left: auto; /* Empuja el icono al extremo derecho */
}

/* Apilamos los textos en vertical y hacemos espacio para el cuadrado */
.sh-acordeon .jet-toggle__label-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    text-align: left;
    
    position: relative;
    padding-left: 100px;     /* Espacio para el cuadrado de 80px */
    min-height: 80px; 
}

/* Ocultamos los saltos de línea (<br>) en todos los items */
.sh-acordeon .jet-toggle__label-text br {
    display: none !important;
}

/* Construimos el cuadrado base (tamaño, color, bordes) para todos */
.sh-acordeon .jet-toggle__label-text::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    
    /* Diseño del contenedor cuadrado */
    width: 80px;
    height: 80px;
    border-radius: 14px;
    background-color: color-mix(in oklab, var(--color-white, #ffffff) 20%, transparent);
    
    /* Propiedades de la imagen interna (centrada y de 40px) */
    background-repeat: no-repeat;
    background-position: center;
    background-size: 40px; 
}

/* ==============================================================
   IMÁGENES ESPECÍFICAS
   ============================================================== */

/* Imagen para el Item 01 */
#sh-acordeon-01 .jet-toggle__label-text::before {
    background-image: url('https://unikemia.com/wp-content/uploads/2026/06/Plataforma-ULX_blanco.svg');
}

/* Fondo para el Item 02 */
.sh-acordeon .jet-accordion__item:has(#sh-acordeon-02) {
    background-color: var(--e-global-color-6ba6ed2); 
}
/* Border color para el Item 02 */
div#jet-toggle-content-2102{
    border-color: var(--e-global-color-6ba6ed2);
}
/* Imagen para el Item 02 */
#sh-acordeon-02 .jet-toggle__label-text::before {
    background-image: url('https://unikemia.com/wp-content/uploads/2026/06/Managed-learning-service_blanco.svg');
}

/* Fondo para el Item 03 */
.sh-acordeon .jet-accordion__item:has(#sh-acordeon-03) {
    background-color: var(--e-global-color-01e30a8); 
}
/* Border color para el Item 03 */
div#jet-toggle-content-2103{
    border-color: var(--e-global-color-01e30a8);
}
/* Imagen para el Item 03 */
#sh-acordeon-03 .jet-toggle__label-text::before {
    background-image: url('https://unikemia.com/wp-content/uploads/2026/06/Comunidades-de-conocimiento_blanco.svg');
}

/* Fondo para el Item 04 */
.sh-acordeon .jet-accordion__item:has(#sh-acordeon-04) {
    background-color: var(--e-global-color-8efa502); 
}
/* Border color para el Item 04 */
div#jet-toggle-content-2104{
    border-color: var(--e-global-color-8efa502);
}
/* Imagen para el Item 04 */
#sh-acordeon-04 .jet-toggle__label-text::before {
    background-image: url('https://unikemia.com/wp-content/uploads/2026/06/Academia_blanco.svg');
}

/* Anulamos el Grid de Elementor y forzamos un Flexbox centrado */
.sh-capaciades-claves {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 3rem !important; /* Mantiene la separación exacta que ya tenías */
}

/* Forzamos matemáticamente a los hijos a ocupar 1/3 del espacio Al sobrar las tarjetas 4 y 5, el código de arriba las centrará solas */
.sh-capaciades-claves > .e-con.e-child {
    /* 33.33% = 3 columnas. Le restamos 2rem para descontar el gap y que quepan perfecto */
    width: calc(33.333% - 2rem) !important; 
    max-width: calc(33.333% - 2rem) !important;
}

/* Regla de seguridad para Tablet y Móvil (todo en 1 sola columna) */
@media (max-width: 1024px) {
    .sh-capaciades-claves > .e-con.e-child {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* Sombra en los iconos seccion visibilidad */
.sh-icon-visibilidad .elementor-icon {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1) !important;
}


.sh_chageDivisa{
	border: none;
    color: #565151;
    font-size: 12px;
    font-family: 'Jakarta', Open sans-serif;
    padding: 1px;
    border-radius: 5px;
}

/* Estilos para el mega menu*/
.jet-mega-menu .jet-mega-menu-item--mega {
    position: static !important;
}

.jet-mega-menu .jet-mega-menu-mega-container {
    position: fixed !important; 
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    transform: none !important;
    z-index: 9999 !important;
}

.jet-mega-menu .jet-mega-menu-mega-container__inner {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    transform: none !important;
}

/*Centrar listing profesores*/
#sh-profesores-expertos .jet-listing-grid__items{
    justify-content: center !important;
}

/*Centrar listing Que aprenderas*/
#sh-que-aprenderas .jet-listing-grid__items{
    justify-content: center !important;
}

/* Centrar elementos huérfanos en contenedor Elementor (Inyección Flexbox) */
@media (min-width: 1025px) {
    .sh-center-last-row { /* Asegúrate de que esta sea la clase exacta que pusiste en Elementor */
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 2rem !important; /* Respeta tu espacio original */
    }
    
    .sh-center-last-row > * {
        /* Fuerza matemáticamente el tamaño de 3 columnas: 
           100% del ancho, menos 4rem (los dos huecos), dividido entre 3 elementos */
        width: calc((100% - 4rem) / 3) !important;
        max-width: calc((100% - 4rem) / 3) !important;
        flex: 0 0 auto !important;
    }
}