:root {
    --primary-color: #031d05;
    --secondary-color: #E8F5E9;
    --accent-color: #0F172A;
    --text-dark: #0F172A;
    --text-light: #ffffff;
}

body {
    font-family: 'Inter', sans-serif;
    color: var(--text-dark);
    background-color: #f8fafc;
}

/* Typography & Utilities */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 700;
    color: var(--primary-color);
}

.text-primary-custom {
    color: var(--primary-color) !important;
}

.bg-primary-custom {
    background-color: var(--primary-color) !important;
    color: var(--text-light);
}

.bg-secondary-custom {
    background-color: var(--secondary-color) !important;
    color: var(--primary-color);
}

/* Buttons */
.btn-primary-custom {
    background-color: var(--primary-color);
    color: var(--text-light);
    font-weight: 600;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.btn-primary-custom:hover {
    background-color: #144418;
    color: var(--text-light);
    transform: translateY(-2px);
}

.btn-outline-custom {
    border: 2px solid var(--text-light);
    color: var(--text-light);
    font-weight: 600;
    padding: 12px 24px;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.btn-outline-custom:hover {
    background-color: var(--text-light);
    color: var(--primary-color);
}

/* Hero Section */
.hero-section {
    background-color: var(--secondary-color);
    /* Light green bg for Previdenciario Hero maybe? Instructions say Green Dark prim, Light green sec. Usually hero is primary or image. Let's stick to Primary for Hero logic or image overlay. But let's follow standard "colored hero" for now or use image. */
    background: linear-gradient(135deg, var(--primary-color) 0%, #2e7d32 100%);
    color: var(--text-light);
    padding: 80px 0;
}

.hero-section h1 {
    color: var(--text-light);
}

/* Cards */
.card-custom {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background-color: #ffffff;
    padding: 1.5rem;
    transition: all 0.3s ease;
}

.card-custom:hover {
    border-color: var(--primary-color);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.icon-box {
    color: var(--primary-color);
    font-size: 2rem;
    margin-bottom: 1rem;
}

/* Floating WhatsApp */
.whatsapp-float {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background-color: #25d366;
    color: #fff;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    transition: all 0.3s ease;
}

.whatsapp-float:hover {
    background-color: #128c7e;
    transform: scale(1.1);
    color: #fff;
}