@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

:root {
    --dif-pink: #E35BD0;
    --dif-violet: #7122D9;
    --dif-accent: #00D429;
}

body { 
    font-family: 'Plus Jakarta Sans', sans-serif; 
    background-color: #fdfdfd; 
    color: #1a1a1a;
}


.dynamic-bg-section {
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.dynamic-bg-section::before {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background-size: cover;
    background-position: center;
    opacity: 0.05;
    transition: all 0.7s cubic-bezier(0.23, 1, 0.32, 1);
    z-index: -1;
}


.executive-card:hover::before { opacity: 0.12; transform: scale(1.05); }
.commitment-card:hover::before { opacity: 0.08; transform: scale(1.02); }


.bg-que-es::before { background-image: url('../img/introduccion/que_es.PNG'); }
.bg-ingresos::before { background-image: url('../img/introduccion/ingresos.PNG'); }
.bg-egresos::before { background-image: url('../img/introduccion/egresos.PNG'); }
.bg-ruta::before { background-image: url('../img/introduccion/ruta_critica.PNG'); }
.bg-vinculacion::before { background-image: url('../img/introduccion/vinculacion.PNG'); }
.bg-glosario::before { background-image: url('../img/introduccion/glosario.PNG'); }
.bg-compromiso::before { background-image: url('../img/introduccion/compromiso.PNG'); }

.executive-card {
    background: #ffffff;
    border: 1px solid #f1f5f9;
    transition: all 0.5s ease;
}

.executive-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 40px 80px -15px rgba(113, 34, 217, 0.12);
    border-color: rgba(227, 91, 208, 0.3);
}

.card-icon-container {
    transition: all 0.4s ease;
    background: rgb(255, 255, 255);
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
}

.executive-card:hover .card-icon-container {
    transform: scale(1.1) rotate(5deg);
}

.text-gradient-beautiful {
    background: linear-gradient(135deg, var(--dif-pink) 30%, var(--dif-violet) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.btn-beautiful {
    background: linear-gradient(135deg, var(--dif-pink) 0%, var(--dif-violet) 100%);
    color: white;
    transition: all 0.3s ease;
}