/* Utilidades para Claymorphism */
.clay-btn {
    background: var(--color-caramelo);
    color: var(--color-crema);
    border: none;
    border-radius: 24px;
    padding: 12px 28px;
    font-family: var(--font-principal);
    font-weight: 500;
    font-size: 1rem;
    cursor: pointer;
    transition: var(--transition-suave);
    
    /* Efecto Clay (sombras suaves interiores y exteriores) */
    box-shadow: 
        inset 4px 4px 8px rgba(255, 255, 255, 0.3),
        inset -4px -4px 8px rgba(0, 0, 0, 0.15),
        4px 4px 10px rgba(200, 122, 56, 0.4);
}

.clay-btn:hover {
    transform: scale(1.03);
}

.clay-btn:active {
    transform: scale(0.97);
    box-shadow: 
        inset 4px 4px 8px rgba(0, 0, 0, 0.15),
        inset -4px -4px 8px rgba(255, 255, 255, 0.3),
        2px 2px 5px rgba(200, 122, 56, 0.4);
}

.clay-card {
    background: var(--color-blanco);
    border-radius: 24px;
    /* Efecto suave tipo arcilla */
    box-shadow: 
        8px 8px 16px rgba(43, 24, 18, 0.04),
        -8px -8px 16px rgba(255, 255, 255, 1),
        inset 2px 2px 4px rgba(255, 255, 255, 0.5);
}