/**
 * Solución Option 05 — Foto + puntos con badge de tiempo (DESKTOP)
 * Migrado desde assets/css/solucion-option05.css (reglas base, sin el
 * bloque @media que ahora es mobile/solucion-option05-mobile.css).
 */
.solucion-option05 { background: var(--bg-surface); padding-block: clamp(64px, 9vw, 130px); }

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

.s05-media { position: relative; }
.s05-media .media { box-shadow: var(--elevation-2); }

.s05-badge {
    position: absolute;
    top: 24px;
    left: -20px;
    padding: 16px 20px;
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.s05-content h2 { margin: 14px 0 14px; }
.s05-content .text-lead { margin-bottom: 28px; }

.s05-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.s05-points li { padding-left: 24px; position: relative; color: var(--text-primary); font-weight: 500; }
.s05-points li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--accent);
}