/* ==========================================================================
   3. BOTONES Y ANIMACIONES GLOBALES
   ========================================================================== */

/* --- Botón Maestro Global (Diseño Píldora Elegante Original) --- */
.btn-pildora {
    display: inline-block; 
    padding: 16px 40px; 
    background-color: var(--color-negro); /* Tu color oscuro elegante */
    color: #FFFFFF !important; 
    font-family: var(--font-main);
    font-size: 0.9rem; 
    font-weight: 700; 
    text-transform: uppercase;
    letter-spacing: 2px; 
    border-radius: 50px; /* Vuelven los bordes completamente redondeados */
    border: none; 
    box-shadow: 0 10px 20px #ff99cc; /* Sombra suave lila */
    transition: var(--transition);
    text-align: center;
    cursor: pointer;
}

/* Efecto suave al pasar el ratón */
.btn-pildora:hover { 
    transform: translateY(-3px); 
    background-color: #e9e9e9; /* Un lila más vibrante al hacer hover */
    box-shadow: 0 15px 25px #ff99cc;
    color: #000000 !important;  
}

/* ==========================================================================
   ANIMACIONES DE ENTRADA (Al hacer scroll)
   ========================================================================== */
@keyframes fadeInUp {
    0% { opacity: 0; transform: translateY(40px); }
    100% { opacity: 1; transform: translateY(0); }
}

.hero-content-studio, 
.section-header-centered, 
.producto-card-premium, 
.pilar-item {
    opacity: 0; 
    animation: fadeInUp 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

.pilar-item:nth-child(1) { animation-delay: 0.2s; }
.pilar-item:nth-child(2) { animation-delay: 0.4s; }
.pilar-item:nth-child(3) { animation-delay: 0.6s; }