/* ========================================
   Ubicación: plugins/divexa-core/public/css/core.css
   DIVEXA CORE — FINTECH VERSION PRO ESTABLE
======================================== */


/* ========================================
   VARIABLES GLOBALES CONTROL HOME
======================================== */

:root {

    /* 🔄 Dirección layout */
    --divexa-home-direction: row-reverse;

    /* 🎯 CONTROL HOME */
    --divexa-home-lateral-offset: 230px;
    --divexa-home-lateral-width: 400px;
    --divexa-home-lateral-height: 600px;

    --divexa-home-main-width: 540px;
    --divexa-home-gap: 60px;

    /* 🎯 CONTROL LOGIN */
    --divexa-login-spacing-top: 80px;
}


/* ========================================
   HEADER
======================================== */

.divexa-header {
    background: #0f172a;
    padding: 18px 60px;
}

.divexa-header-container {
    max-width: 1320px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.divexa-header-logo img {
    height: 42px;
}

.divexa-header-actions {
    display: flex;
    align-items: center;
    gap: 28px;
}

.divexa-link {
    color: #ffffff;
    text-decoration: none;
    font-weight: 500;
    font-size: 15px;
}

.divexa-btn-primary-header {
    background: #16a34a;
    color: #ffffff;
    padding: 10px 22px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 14px;
    transition: all .2s ease;
}

.divexa-btn-primary-header:hover {
    background: #15803d;
    transform: translateY(-1px);
}


/* ========================================
   CORE WRAPPER
======================================== */

.divexa-core-wrapper {
    margin: 0;
    padding: 0;
}


/* ========================================
   BANNER SUPERIOR (PRO VERSION SIN FLICKER)
======================================== */

.divexa-home-banners {
    position: relative;
    width: 100%;
    max-width: 1320px;
    margin: 30px auto 30px auto;
    overflow: hidden;
    border-radius: 16px;
}

/* 🔥 SISTEMA PROFESIONAL */
.divexa-home-slide {
    display: none;
    width: 100%;
}

/* 🔥 EL PRIMER SLIDE SIEMPRE VISIBLE POR DEFECTO */
.divexa-home-slide.active {
    display: block;
}

/* 🔥 SLIDE ACTIVO */
.divexa-home-slide.active {
    display: block;
}

.divexa-home-slide img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 16px;
}


/* ========================================
   HOME LAYOUT PRINCIPAL
======================================== */

.divexa-home-container {
    max-width: 1320px;
    margin: 0 auto 60px auto;
    display: flex;
    flex-direction: var(--divexa-home-direction);
    gap: var(--divexa-home-gap);
    align-items: flex-start;
    justify-content: center;
}


/* ========================================
   LATERAL (BANNER)
======================================== */

.divexa-home-lateral {
    flex: 0 0 var(--divexa-home-lateral-width);
    height: var(--divexa-home-lateral-height);
    position: sticky;
    top: calc(120px + var(--divexa-home-lateral-offset));
}

.divexa-home-lateral img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 16px;
    box-shadow: 0 25px 45px rgba(0,0,0,0.25);
}


/* ========================================
   MAIN (CALCULADORA)
======================================== */

.divexa-home-main {
    flex: 0 0 var(--divexa-home-main-width);
    display: flex;
    justify-content: center;
}


/* ========================================
   LOGIN – CONTROL REAL H1
======================================== */

body.divexa-auth-page .divexa-login-wrapper {
    min-height: auto;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    margin-top: var(--divexa-login-spacing-top);
    padding-bottom: 60px;
}


/* ========================================
   RESPONSIVE
======================================== */

@media (max-width: 1100px) {

    .divexa-home-container {
        flex-direction: column;
        align-items: center;
    }

    .divexa-home-lateral {
        position: relative;
        top: auto;
        width: 100%;
        height: auto;
        max-width: 500px;
    }

    .divexa-home-main {
        width: 100%;
    }
}

@media (max-width: 768px) {

    .divexa-header {
        padding: 16px 20px;
    }

    .divexa-home-banners {
        margin: 20px auto 30px auto;
    }

    .divexa-home-container {
        padding: 0 20px;
    }
}