body.layout-institucional { --radius: 22px; }
.layout-institucional .hero { width: min(1440px, 100%); min-height: 690px; margin: 0 auto; position: relative; display: grid; grid-template-columns: minmax(360px, 42%) 1fr; align-items: center; }
.layout-institucional .hero-copy { z-index: 4; padding: 78px clamp(30px, 5vw, 82px); }
.layout-institucional .hero h1 { max-width: 620px; margin: 21px 0; font-size: clamp(54px, 5.2vw, 80px); line-height: .98; letter-spacing: -.065em; }
.layout-institucional .hero-copy > p { max-width: 510px; margin: 0; color: var(--muted); font-size: clamp(18px, 1.6vw, 23px); line-height: 1.5; }
.layout-institucional .hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.layout-institucional .hero-visual { position: absolute; inset: 22px 0 0 41%; overflow: hidden; border-radius: 0 0 0 76px; background: var(--primary-soft); }
.layout-institucional .hero-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255,255,255,.25), transparent 30%); pointer-events: none; }
.layout-institucional .hero-visual img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform .65s ease; }
.layout-institucional .hero-visual:hover img { transform: scale(1.018); }
.layout-institucional .impact-card { z-index: 6; position: absolute; right: clamp(26px, 5vw, 78px); bottom: 24px; min-width: min(610px, 49vw); display: grid; grid-template-columns: 1fr 1fr; padding: 22px; border: 1px solid rgba(255,255,255,.7); border-radius: 18px; background: rgba(255,255,255,.94); box-shadow: var(--shadow); backdrop-filter: blur(12px); }
.layout-institucional .impact-card > div { display: flex; align-items: center; gap: 14px; padding: 4px 22px; }
.layout-institucional .impact-card > div + div { border-left: 1px solid var(--line); }
.layout-institucional .impact-icon { width: 56px; height: 56px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; color: var(--primary); background: var(--primary-soft); font-size: 29px; }
.layout-institucional .impact-card p { margin: 0; display: grid; }
.layout-institucional .impact-card strong { font-size: 30px; letter-spacing: -.04em; }
.layout-institucional .impact-card p span { color: var(--muted); font-size: 13px; }

@media (max-width: 1100px) {
    .layout-institucional .hero { min-height: 630px; grid-template-columns: 48% 52%; }
    .layout-institucional .hero-copy { padding: 48px 28px; }
    .layout-institucional .impact-card { min-width: 500px; }
}

@media (max-width: 780px) {
    .layout-institucional .hero { width: calc(100% - 36px); min-height: auto; display: flex; flex-direction: column; align-items: stretch; }
    .layout-institucional .hero-copy { order: 1; padding: 52px 0 32px; }
    .layout-institucional .hero h1 { font-size: clamp(48px, 15vw, 70px); }
    .layout-institucional .hero-copy > p { font-size: 18px; }
    .layout-institucional .hero-actions { display: grid; }
    .layout-institucional .hero-visual { order: 2; position: relative; inset: auto; width: 100%; height: 410px; border-radius: 30px; }
    .layout-institucional .impact-card { order: 3; position: relative; inset: auto; min-width: 0; width: 100%; margin: -32px auto 0; padding: 11px; }
    .layout-institucional .impact-card > div { padding: 8px 11px; gap: 9px; }
    .layout-institucional .impact-icon { width: 42px; height: 42px; font-size: 22px; }
    .layout-institucional .impact-card strong { font-size: 23px; }
    .layout-institucional .impact-card p span { font-size: 10px; }
}