:root {
    --bg-color: #e8eef6;
    --primary-grab: #0B1F3B;
    --silver-grab: #8A939E;
    /* Claymorphism Variables */
    --clay-bg: #f0f4f9;
    --clay-shadow-out: 10px 10px 20px #c5d0e0, -10px -10px 20px #ffffff;
    --clay-shadow-in: inset 3px 3px 6px rgba(255, 255, 255, 0.9), inset -4px -4px 8px rgba(11, 31, 59, 0.08);
}

body {
    background-color: var(--bg-color);
    font-family: 'Inter', sans-serif;
    color: #333;
    overflow-x: hidden;
}

.text-primary-grab { color: var(--primary-grab); }

/* Clay Cards */
.clay-card {
    background-color: var(--clay-bg);
    border-radius: 35px;
    box-shadow: var(--clay-shadow-out), var(--clay-shadow-in);
    border: 2px solid rgba(255, 255, 255, 0.5);
    transition: transform 0.3s ease;
}
.clay-card:hover {
    transform: translateY(-5px);
}

/* Navbar */
.clay-navbar {
    background-color: rgba(240, 244, 249, 0.85);
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 20px rgba(197, 208, 224, 0.5);
    border-bottom: 2px solid rgba(255, 255, 255, 0.6);
}

/* Clay Buttons */
.clay-btn, .clay-btn-lg, .clay-btn-whatsapp {
    background-color: var(--primary-grab);
    color: white;
    border-radius: 20px;
    border: none;
    font-weight: 600;
    padding: 10px 25px;
    box-shadow: 6px 6px 12px #c5d0e0, -6px -6px 12px #ffffff, inset 2px 2px 5px rgba(255, 255, 255, 0.3), inset -3px -3px 6px rgba(0, 0, 0, 0.4);
    transition: all 0.2s ease-in-out;
}
.clay-btn-lg {
    padding: 15px 35px;
    font-size: 1.1rem;
    border-radius: 25px;
}
.clay-btn-whatsapp {
    background-color: #25D366; /* Verde WhatsApp */
    box-shadow: 6px 6px 12px #c5d0e0, -6px -6px 12px #ffffff, inset 2px 2px 5px rgba(255, 255, 255, 0.4), inset -3px -3px 6px rgba(0, 100, 0, 0.3);
}
.clay-btn:hover, .clay-btn-lg:hover, .clay-btn-whatsapp:hover {
    color: #f0f4f9;
    transform: scale(0.98);
    box-shadow: inset 4px 4px 8px rgba(0, 0, 0, 0.3), inset -4px -4px 8px rgba(255, 255, 255, 0.2);
}

/* Inputs & Modals */
.clay-modal {
    background-color: var(--clay-bg);
    border-radius: 40px;
    box-shadow: var(--clay-shadow-out), var(--clay-shadow-in);
    border: 3px solid rgba(255, 255, 255, 0.8);
    padding: 15px;
}
.clay-input {
    background-color: #e8eef6;
    border: none;
    border-radius: 15px;
    box-shadow: inset 5px 5px 10px #c5d0e0, inset -5px -5px 10px #ffffff;
    padding: 12px 20px;
    color: var(--primary-grab);
}
.clay-input:focus {
    background-color: #e8eef6;
    box-shadow: inset 7px 7px 14px #b8c4d6, inset -7px -7px 14px #ffffff;
    outline: none;
    color: var(--primary-grab);
}

/* Images */
.clay-image {
    border-radius: 25px;
    box-shadow: 8px 8px 16px #c5d0e0, -8px -8px 16px #ffffff;
    border: 4px solid #f0f4f9;
}

.clay-footer {
    background-color: var(--clay-bg);
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
    box-shadow: 0 -10px 20px rgba(197, 208, 224, 0.5), inset 0 5px 10px rgba(255,255,255,0.8);
}