/**
 * Beneficios Option 02 — Foto + lista (DESKTOP)
 * Migrado desde assets/css/beneficios-option02.css (reglas base, sin el
 * bloque @media que ahora es mobile/beneficios-option02-mobile.css).
 */
.beneficios-option02 { background: var(--bg-surface); padding-block: clamp(64px, 9vw, 130px); }

.b02-grid {
    display: grid;
    grid-template-columns: 0.9fr 1fr;
    gap: clamp(32px, 5vw, 72px);
    align-items: center;
}

.b02-media .media { box-shadow: var(--elevation-2); }
.b02-content h2 { margin: 14px 0 28px; }

.b02-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.b02-list li { display: flex; align-items: center; gap: 14px; font-size: var(--text-base); color: var(--text-primary); }

.b02-check {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--accent-contrast);
    display: flex;
    align-items: center;
    justify-content: center;
}