/* Importar fuentes */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Source+Sans+Pro:wght@400;600&display=swap');

/* Utilidades generales */
.container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

.section-padding {
    padding: var(--spacing-2xl) 0;
}

.text-gradient {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Botones */
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--radius-md);
    font-weight: 500;
    transition: var(--transition-default);
}

.button-primary {
    background: var(--gradient-primary);
    color: var(--white);
    box-shadow: 0 4px 15px rgba(222,42,180,0.3);
}

.button-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(222,42,180,0.4);
}

.button-secondary {
    background: var(--white);
    color: var(--primary-blue);
    border: 2px solid var(--primary-blue);
}

.button-secondary:hover {
    background: var(--gray-100);
    transform: translateY(-2px);
}

.button-primary-solid {
    background-color: var(--primary-blue);
    color: var(--white);
    box-shadow: 0 6px 20px rgba(131, 131, 255, 0.4);
}

.button-primary-solid:hover {
    background-color: #1a489f;
    box-shadow: 0 6px 20px #1515c066;
}

.button-secondary-solid {
    background-color: var(--secondary-pink);
    color: var(--white);
    box-shadow: 0 6px 20px #f977db85;
}

.button-secondary-solid:hover {
    background-color: #d61cab;
    box-shadow: 0 6px 20px #f558d185;
}

.button-tertiary-solid {
    background-color: var(--innovation-purple);
    color: var(--white);
    box-shadow: 0 6px 20px #714fc0cd;
}

.button-tertiary-solid:hover {
    background-color: #d61cab;
    box-shadow: 0 6px 20px #f558d185;
}
/* Animaciones */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        transform: translateY(20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Media Queries */
@media (max-width: 1024px) {
    :root {
        --container-padding: 1.5rem;
    }
}

@media (max-width: 768px) {
    :root {
        --container-padding: 1rem;
    }
}


/* Ajustes para scroll */
html {
    scroll-padding-top: 80px; /* Altura del header + un pequeño padding extra */
    scroll-behavior: smooth;
}