/*
Theme Name: Hello Elementor Child
Template: hello-elementor
Author: Tu Nombre
Version: 1.0.0
Description: Tema hijo de Hello Elementor
*/
/* --- 1. Variables Globales (Centro de Control del Diseño) --- */
:root {
    --color-light: #FFFFFF;
    --color-dark: #111827;
    --color-brand-orange: #F58D3D;
    --color-background-scrolled: rgba(0, 141, 151, 0.18); /* #008D9730 */
    --header-top-margin: 20px;
    --transition-smooth: 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

p{ margin-bottom: 0 !important; }
/* --- 2. Keyframes para el Efecto de Movimiento del Fondo --- */
@keyframes aurora-teal-glow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
/* --- 3. ESTRUCTURA Y POSICIONAMIENTO INICIAL --- */
header#mainHeader {
    /* No establecemos un top aquí, dejamos que Elementor lo maneje */
    transition: all var(--transition-smooth);
    background: none !important;
}
header#mainHeader > .e-con-inner,
header#mainHeader .e-con-inner {
    background: transparent !important;
}

/* --- 4. BARRAS EN ESTADO INICIAL --- */
header#mainHeader .header__top-bar {
    height: 40px; /* Altura explícita */
    transform: translateY(0);
    opacity: 1;
    transition: transform var(--transition-smooth), opacity var(--transition-smooth), height 0.3s ease-out;
}
header#mainHeader .header__main-bar {
    height: 90px;
    background: transparent !important;
    transition: all var(--transition-smooth);
}
/* ! Ocultamos el botón del header por defecto */
header#mainHeader .elementor-element-a18a76d {
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
    transition: all var(--transition-smooth);
}

/* --- 5. ESTILOS DE TEXTO Y LOGO INICIALES --- */
header#mainHeader .elementor-widget-theme-site-logo img {
    height: 50px; /* Logo grande */
    width: auto;
    transition: height var(--transition-smooth);
}
header#mainHeader .header__top-bar .elementor-icon-list-text,
header#mainHeader .header__main-bar .elementor-nav-menu a {
    color: var(--color-light) !important;
    text-shadow: 0 1px 4px rgba(0,0,0,0.5);
    font-weight: 600;
}

/* --- 6. ESTADO CON SCROLL (LA TRANSFORMACIÓN) --- */
/* ! Cuando aparece la clase de efectos de Elementor */
header#mainHeader.elementor-sticky--effects {
    /* La posición la controla Elementor, nosotros solo cambiamos los estilos */
}
/* ! Ocultamos la barra superior Y COLAPSAMOS SU ALTURA */
header#mainHeader.elementor-sticky--effects .header__top-bar {
    height: 0px !important;
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
}
/* La barra principal se compacta */
header#mainHeader.elementor-sticky--effects .header__main-bar {
    height: 70px;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1);
    background: linear-gradient(110deg, var(--color-background-scrolled), rgba(0, 141, 151, 0.1), var(--color-background-scrolled)) !important;
    background-size: 200% 200%;
    animation: aurora-teal-glow 12s ease-in-out infinite;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}
/* ! Mostramos el botón del header */
header#mainHeader.elementor-sticky--effects .elementor-element-a18a76d {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
/* El logo se encoge */
header#mainHeader.elementor-sticky--effects .elementor-widget-theme-site-logo img {
    height: 42px;
}
/* El texto cambia de color */
header#mainHeader.elementor-sticky--effects .elementor-nav-menu a {
    color: var(--color-dark) !important;
    text-shadow: none;
}