/**
 * paginas/inicio.css
 * Estilos específicos para la página de inicio
 * (La mayoría ya está en secciones.css, este es para ajustes finos)
 */

/* ===== AJUSTES ESPECÍFICOS DE LA PÁGINA DE INICIO ===== */
body.inicio {
    background: var(--fondo-profundo);
}

/* Hero con gradiente radial */
.seccion-portada {
    position: relative;
}

.seccion-portada::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at 30% 30%, rgba(139, 92, 246, 0.1) 0%, transparent 50%),
                radial-gradient(circle at 70% 70%, rgba(6, 182, 212, 0.05) 0%, transparent 50%);
    animation: rotar 30s linear infinite;
    z-index: -1;
}

/* Ajuste de espaciado entre secciones */
.seccion {
    position: relative;
}

.seccion + .seccion {
    margin-top: -2px; /* Evita solapamientos por bordes */
}

/* Efecto de separación entre secciones */
.seccion:nth-child(even) {
    background: linear-gradient(180deg, transparent, rgba(139, 92, 246, 0.02), transparent);
}

/* ===== ANIMACIONES ESPECÍFICAS ===== */
@keyframes aparecer {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.aparecer {
    animation: aparecer 1s ease forwards;
}

/* ===== HOVER EFECTS ESPECIALES ===== */
.caracteristica-card:hover .caracteristica-icono {
    transform: scale(1.1) rotate(5deg);
}

.plan-card:hover .plan-precio {
    transform: scale(1.05);
}

.testimonio-card:hover .testimonio-contenido {
    transform: translateX(5px);
}

/* ===== RESPONSIVE FINO ===== */
@media (max-width: 768px) {
    .seccion {
        scroll-margin-top: 70px;
    }
}

@media (max-width: 480px) {
    .seccion-titulo h2 {
        font-size: var(--texto-2xl);
    }
    
    .seccion-titulo p {
        font-size: var(--texto-base);
    }
}