/* ===== Home · Antes / Después (transformación) ===== */
.at-sec { }
.at-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0; max-width: 980px; margin: clamp(2rem,4vw,3rem) auto 0; background: var(--opogc-white); border: 1px solid var(--opogc-border); border-radius: var(--opogc-radius); box-shadow: var(--opogc-shadow-md); overflow: hidden; }
@media (max-width: 760px) { .at-grid { grid-template-columns: 1fr; } }
.at-col { padding: clamp(1.5rem,3vw,2.2rem); }
.at-col__head { display: flex; align-items: center; gap: 10px; margin-bottom: 1.2rem; }
.at-col__ic { width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.at-col__ic svg { width: 20px; height: 20px; fill: none; stroke-width: 2.2; }
.at-col__label { font-family: var(--opogc-font-title); font-weight: 800; font-size: 1rem; }
.at-row { display: flex; align-items: flex-start; gap: 10px; padding: 11px 0; font-size: .94rem; line-height: 1.45; border-top: 1px solid var(--opogc-border); }
.at-row:first-of-type { border-top: none; }
.at-row svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; fill: none; stroke-width: 2.4; }

/* Columna ANTES (apagada/roja) */
.at-col--antes { background: #fbf7f7; }
.at-col--antes .at-col__ic { background: #fbeef0; }
.at-col--antes .at-col__ic svg { stroke: #c2575c; }
.at-col--antes .at-col__label { color: #a23a40; }
.at-col--antes .at-row { color: var(--opogc-text-muted); }
.at-col--antes .at-row svg { stroke: #d98a8e; }

/* Columna DESPUÉS (verde, fuerte) */
.at-col--despues { background: var(--opogc-green-soft); }
.at-col--despues .at-col__ic { background: var(--opogc-green-pastel); }
.at-col--despues .at-col__ic svg { stroke: #fff; }
.at-col--despues .at-col__label { color: var(--opogc-green-deep); }
.at-col--despues .at-row { color: var(--opogc-text); font-weight: 500; }
.at-col--despues .at-row svg { stroke: var(--opogc-green-pastel); }

/* Divisoria con flecha */
.at-divider { display: flex; align-items: center; justify-content: center; background: linear-gradient(to right, #fbf7f7, var(--opogc-green-soft)); position: relative; }
.at-divider__arrow { width: 48px; height: 48px; border-radius: 50%; background: var(--opogc-white); border: 1px solid var(--opogc-border); box-shadow: var(--opogc-shadow-sm); display: flex; align-items: center; justify-content: center; }
.at-divider__arrow svg { width: 22px; height: 22px; stroke: var(--opogc-green-deep); fill: none; stroke-width: 2.4; }
@media (max-width: 760px) {
    .at-divider { padding: 8px 0; background: var(--opogc-green-soft); }
    .at-divider__arrow svg { transform: rotate(90deg); }
}
.at-cta { text-align: center; margin-top: clamp(1.5rem,3vw,2.2rem); }