/* ====================================
   GRADIENTS.CSS - Fondos y degradados
   IESJ Futurista Tropical
   ==================================== */

/* === SECCIONES CON FONDO GRADIENTE === */

/* Sección oscura (navy → deep navy) */
body.iesj-modern .avia-section.dark,
body.iesj-modern .avia-section[data-section-bg="dark"],
body.iesj-modern section.av-special-heading.dark {
    background: var(--grad-dark) !important;
}

/* Sección futurista hero */
body.iesj-modern .avia-section.av-section-color-blue,
body.iesj-modern .hero-section-iesj {
    background: var(--grad-hero) !important;
    position: relative;
    overflow: hidden;
}

/* Sección dorada */
body.iesj-modern .avia-section.av-section-color-yellow,
body.iesj-modern .gold-section-iesj {
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%) !important;
}

/* Fondo de sección alternada */
body.iesj-modern .avia-section:nth-child(even):not(.dark):not(.av_default_container_wrap) {
    background: linear-gradient(180deg, #FFFFFF 0%, var(--bg-light) 100%);
}

/* === EFECTO AURORA BOREALIS en FONDOS === */
body.iesj-modern .avia-section.dark::before,
body.iesj-modern .av_default_container_wrap.fullwidth::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(
        ellipse at 20% 50%,
        rgba(0,217,255,0.06) 0%,
        transparent 50%
    ),
    radial-gradient(
        ellipse at 80% 20%,
        rgba(255,215,0,0.04) 0%,
        transparent 50%
    ),
    radial-gradient(
        ellipse at 60% 80%,
        rgba(196,30,36,0.03) 0%,
        transparent 50%
    );
    pointer-events: none;
    z-index: 0;
    animation: auroraShift 12s ease-in-out infinite alternate;
}

@keyframes auroraShift {
    0%   { transform: translate(0, 0) rotate(0deg); }
    25%  { transform: translate(2%, 1%) rotate(0.5deg); }
    50%  { transform: translate(-1%, 2%) rotate(-0.3deg); }
    75%  { transform: translate(1%, -1%) rotate(0.4deg); }
    100% { transform: translate(-2%, 1%) rotate(-0.5deg); }
}

body.iesj-modern .avia-section.dark > *,
body.iesj-modern .av_default_container_wrap.fullwidth > * {
    position: relative;
    z-index: 1;
}

/* === FONDO ANIMADO DE PARTÍCULAS (via CSS) === */
body.iesj-modern .avia-section.dark {
    overflow: hidden;
}

/* Partícula flotante 1 */
body.iesj-modern .avia-section.dark::after {
    content: '';
    position: absolute;
    top: 20%;
    right: 10%;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0,217,255,0.08) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
    animation: particleFloat 8s ease-in-out infinite;
}

@keyframes particleFloat {
    0%, 100% { transform: translateY(0) scale(1); opacity: 0.6; }
    33%       { transform: translateY(-20px) scale(1.1); opacity: 0.8; }
    66%       { transform: translateY(10px) scale(0.9); opacity: 0.5; }
}

/* === GRADIENTES EN BLOQUES DE COLOR ENFOLD === */

/* Bloques de color primario */
body.iesj-modern .av_one_full.avia-builder-el,
body.iesj-modern .av-special-heading-tag {
    transition: background var(--transition-smooth);
}

/* === BARRA SUPERIOR DEGRADADA === */
body.iesj-modern #header_main_alternate {
    background: linear-gradient(90deg,
        var(--iesj-navy-deep) 0%,
        var(--iesj-navy) 50%,
        var(--iesj-navy-dark) 100%
    ) !important;
}

/* === FONDOS DE PÁGINA INTERNA === */
body.iesj-modern .av-layout-slider .avia-slide-wrap {
    background: var(--grad-hero) !important;
}

/* === BANNER DE TÍTULO DE PÁGINA === */
body.iesj-modern .av-page-title-bar,
body.iesj-modern .av-title-bar {
    background: linear-gradient(135deg, var(--iesj-navy-deep) 0%, var(--iesj-navy) 60%, rgba(0,217,255,0.2) 100%) !important;
    border-bottom: 3px solid var(--iesj-gold) !important;
    padding: 40px 0 !important;
}

body.iesj-modern .av-page-title-bar h1,
body.iesj-modern .av-title-bar h1 {
    color: var(--text-light) !important;
    text-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
}

body.iesj-modern .av-page-title-bar .breadcrumb,
body.iesj-modern .av-title-bar .breadcrumb {
    color: rgba(255,255,255,0.7) !important;
}

body.iesj-modern .av-page-title-bar .breadcrumb a,
body.iesj-modern .av-title-bar .breadcrumb a {
    color: var(--iesj-gold) !important;
}

/* === SEPARADORES CON GRADIENTE === */
body.iesj-modern .hr-inner-style {
    background: linear-gradient(90deg, transparent, var(--iesj-gold), var(--iesj-cyan), transparent) !important;
    height: 2px !important;
    border: none !important;
}

/* === DESTACADOS Y CALLOUTS === */
body.iesj-modern .av-callout,
body.iesj-modern .callout-section {
    background: linear-gradient(135deg, var(--iesj-navy) 0%, var(--iesj-navy-dark) 100%) !important;
    border-left: 4px solid var(--iesj-gold) !important;
    color: var(--text-light) !important;
    border-radius: var(--radius-md) !important;
    padding: var(--space-xl) !important;
}

/* === FONDOS DE BLOQUES DE COLOR ENFOLD (clases del builder) === */
body.iesj-modern .avia-section[style*="background-color: #104a92"],
body.iesj-modern .avia-section[style*="background-color:#104a92"] {
    background: var(--grad-hero) !important;
}