.bg-blue {
    background-color: #9DBF21;
}

.bg-yellow {
    background-color: #2182BF;
}

.btn.bg-yellow {
    color: #fff;
}

.btn.bg-yellow:hover,
.btn.bg-yellow:focus-visible {
    filter: brightness(1.05);
    outline: 2px solid #ffffff66;
}

.bg-gray {
    background-color: rgb(247, 247, 247);
}

.bg-pink {
    /* Pastel teal que armoniza con #9DBF21 y #2182BF, similar luminosidad a #EED8F2 */
    background-color: #E0F2F1;
}

.corner {
    position: relative;
    padding: 30px 0px;
    width: 100%;
    height: 100%;
    border-radius: 60px 0px;
}

.corner-gray {
    background-color: rgb(247, 247, 247);
}

.corner-green {
    /* Pastel green que armoniza con #9DBF21 (primario) y #2182BF (secundario) */
    background-color: #E7F3C6;
}

article circle {
    fill: rgb(213, 237, 247);
}

.corner-green article circle {
    fill: rgb(247, 247, 247);
}

.pink-round {
    border-radius: 60px;
}

/* Asegura que el ancla #contact no quede oculto bajo el header sticky */
#contact {
    scroll-margin-top: 96px;
}

/* Mejora de accesibilidad: foco visible en enlaces y botones */
a:focus-visible,
button:focus-visible,
.btn:focus-visible {
    outline: 2px solid #0d6efd80;
    outline-offset: 2px;
}

/* Optimización de imágenes diferidas */
img[loading="lazy"] {
    content-visibility: auto;
}

/* UI de layout reestructurado */
.feature-pill {
    background: rgba(0,0,0,0.15);
    border-radius: 999px;
    padding: 6px 12px;
}

.step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: #9DBF21;
    color: #fff;
    font-weight: 700;
    margin-bottom: 12px;
}

.card-icon svg {
    display: block;
}

.benefit-card {
    transition: transform .15s ease, box-shadow .15s ease;
}

.benefit-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,.15);
}