@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap');

:root {
    --primary: #3a0ca3; 
    --purple-dark: #1e0a4d;
    --secondary: #4361ee;
    --white: #ffffff;
    --soft-blue: #eef2ff; 
    --text-muted: #64748b;
    --glass: rgba(255, 255, 255, 0.85); 
    --border-thin: 1px solid rgba(58, 12, 163, 0.15);
}

/* --- ESTILOS BASE --- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: 'Inter', sans-serif; background: var(--white); color: #0f172a; line-height: 1.6; overflow-x: hidden; }
.container { max-width: 1050px; margin: 0 auto; padding: 0 20px; }

/* --- HERO --- */
.hero {
    background: linear-gradient(135deg, var(--purple-dark) 0%, var(--primary) 100%);
    color: white;
    padding: 80px 0 140px 0;
    text-align: center;
    clip-path: ellipse(150% 100% at 50% 0%);
}

@keyframes logoPulse {
    0% { transform: scale(1); filter: drop-shadow(0 0 0px rgba(255,255,255,0)); }
    50% { transform: scale(1.08); filter: drop-shadow(0 0 15px rgba(255,255,255,0.4)); }
    100% { transform: scale(1); filter: drop-shadow(0 0 0px rgba(255,255,255,0)); }
}

.logo {
    width: 55px;
    animation: logoPulse 3s ease-in-out infinite;
}

.header-content { display: flex; justify-content: center; align-items: center; gap: 12px; margin-bottom: 15px; }
h1 { font-size: 3rem; font-weight: 800; }
.hero p { font-size: 1.1rem; opacity: 0.85; max-width: 550px; margin: 0 auto; padding: 0 10px; }

/* --- DESCRIPCIÓN CRISTAL --- */
.descripcion {
    margin: -70px auto 80px auto;
    background: var(--glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 40px 30px;
    border-radius: 25px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.1);
    text-align: center;
    max-width: 900px;
    border: 1px solid rgba(255, 255, 255, 0.4); 
}
.descripcion h2 { color: var(--primary); font-size: 2.2rem; margin-bottom: 15px; font-weight: 800; }
.descripcion p { font-size: 1.05rem; color: #334155; line-height: 1.7; }

/* --- BENEFICIOS --- */
.beneficios-section {
    padding: 70px 0;
    background-color: var(--soft-blue);
    border-top: 1px solid #e0e7ff;
    border-bottom: 1px solid #e0e7ff;
}
.section-title { text-align: center; font-size: 2.2rem; color: var(--primary); margin-bottom: 50px; font-weight: 800; }

.beneficios-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
}

.beneficio-card {
    background: rgba(255, 255, 255, 0.9);
    padding: 30px 20px;
    border-radius: 18px;
    text-align: center;
    border: var(--border-thin);
    transition: all 0.4s ease;
}

.beneficio-icon { 
    font-size: 40px; 
    color: var(--primary); 
    margin-bottom: 15px; 
    display: inline-block;
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.beneficio-card:hover {
    transform: translateY(-8px);
    background: white;
    box-shadow: 0 12px 25px rgba(58, 12, 163, 0.08);
}

.beneficio-card:hover .beneficio-icon {
    transform: scale(1.3) rotate(8deg);
    color: var(--secondary);
}

/* --- MÓDULOS --- */
.modulos-section { padding: 80px 0; background-color: #fdfeff; }
.modulo-item { display: flex; align-items: center; gap: 50px; margin-bottom: 80px; }
.modulo-item.reverse { flex-direction: row-reverse; }

.modulo-image { flex: 1; text-align: center; }
.modulo-image img {
    width: 100%; max-width: 380px; border-radius: 20px;
    filter: drop-shadow(0 15px 30px rgba(0,0,0,0.1));
    transition: transform 0.5s ease;
}
.modulo-item:hover .modulo-image img { transform: scale(1.05); }

.modulo-text-card {
    flex: 1; background-color: rgba(238, 242, 255, 0.85); 
    padding: 40px; border-radius: 30px; border: var(--border-thin);
    backdrop-filter: blur(5px);
}
.modulo-text-card h3 { font-size: 1.7rem; color: var(--primary); margin-bottom: 12px; font-weight: 800; }
.modulo-text-card p { color: var(--text-muted); font-size: 1rem; line-height: 1.6; }

/* --- FOOTER Y BOTÓN VOLVER ARRIBA --- */
.main-footer {
    background-color: var(--purple-dark);
    color: white; padding: 50px 0; text-align: center;
    border-top: 4px solid var(--primary);
}

.back-to-top {
    position: fixed; bottom: 25px; right: 25px;
    background: var(--primary); color: white;
    width: 45px; height: 45px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    text-decoration: none; transition: all 0.3s ease;
    opacity: 0; visibility: hidden; z-index: 1000;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.back-to-top.show { opacity: 1; visibility: visible; }
.back-to-top:hover { background: var(--secondary); transform: translateY(-5px); }

/* --- RESPONSIVE (CELULARES) --- */
@media (max-width: 900px) {
    h1 { font-size: 2.2rem; }
    .hero { padding: 60px 0 100px 0; }
    
    .descripcion {
        margin: -50px 10px 60px 10px;
        padding: 30px 20px;
    }
    
    .descripcion h2 { font-size: 1.8rem; }
    
    .modulo-item, .modulo-item.reverse { 
        flex-direction: column !important; 
        text-align: center; 
        gap: 25px; 
        margin-bottom: 60px;
    }
    
    .modulo-image img { max-width: 300px; }
    
    .modulo-text-card { 
        padding: 30px 20px; 
        border-radius: 20px;
    }

    .section-title { font-size: 1.8rem; margin-bottom: 30px; }
    
    .beneficios-grid { grid-template-columns: 1fr; } /* Una sola columna en móvil */
}