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

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

.p02-media .media { box-shadow: var(--elevation-2); }

.p02-content h2 { margin: 14px 0 28px; }

.p02-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }

.p02-list li {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: var(--text-base);
    color: var(--text-primary);
}

.p02-mark {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent-2, #dc3545) 15%, transparent);
    color: var(--accent-2, #dc3545);
    font-weight: 700;
    font-size: var(--text-sm);
    display: flex;
    align-items: center;
    justify-content: center;
}