:root {
    --navy: #182642;
    --green: #3a9b3a;
    --yellow: #f2c94c;
    --whatsapp: #25d366;
}

/* Colores base */
.bg-navy {
    background-color: var(--navy) !important;
}
.bg-green {
    background-color: var(--green) !important;
}
.bg-yellow {
    background-color: var(--yellow) !important;
}
.text-navy {
    color: var(--navy) !important;
}

/* HERO */
.hero-section {
    position: relative;
}
.hero-title {
    font-size: 2.4rem;
    font-weight: 700;
}
.hero-highlight {
    font-size: 1.1rem;
}
.hero-badge {
    background-color: var(--yellow);
    color: var(--navy);
    font-weight: 700;
    padding: 2px 6px;
}
.hero-image-wrapper {
    border-radius: 24px;
    overflow: hidden;
}
.hero-img-main {
    display: block;
    width: 50;
    height: 500px;
}
.hero-logo {
    width: 150px;
    height: 150px;
}

/* Beneficios */
.beneficios-card {
    background-color: #fddc6c;
    border-radius: 16px;
}
.beneficios-list {
    list-style: none;
    padding-left: 0;
    color: #FFFFFF;
    font-size: 20px;
}
.beneficios-list li::before {
    content: "*  ";
    color: #ffffff;
    margin-right: 4px;
}
.beneficio-img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Botón WhatsApp */
.btn-whatsapp {
    background-color: var(--whatsapp);
    color: #ffffff;
    font-weight: 700;
    border-radius: 999px;
}
.btn-whatsapp:hover {
    background-color: #1eb857;
    color: #ffffff;
}

/* Contacto */
.contacto-card {
    border: 0;
}

/* Aviso privacidad */
.aviso-privacidad p {
    text-align: justify;
}

/* Navbar */
.navbar-brand span {
    font-size: 1.1rem;
}

/* Responsivo */
@media (max-width: 767.98px) {
    .hero-title {
        font-size: 2rem;
        text-align: center;
    }
}

/* Ajustes extra para pantallas chicas (móvil) */
@media (max-width: 575.98px) {

    /* Hero: que no se vea tan “gigante” y quede centrado */
    .hero-image-wrapper {
        max-width: 320px;
        margin: 0 auto 1rem auto;
        border-radius: 16px;
    }

    .hero-img-main {
        border-radius: 16px;
    }

    /* En beneficios, que las imágenes no ocupen TODO el ancho */
    .beneficio-img {
        max-width: 260px;
        margin-left: auto;
        margin-right: auto;
        border-radius: 16px;
    }

    /* Un poco de respiro en los lados */
    #beneficios .container,
    #nosotros .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}