/* =====================================================================
   sustentabilidade-v0.css — Página Sustentabilidade (estilo v0 Apple-like).
   Scoped sob .sust-v0 (não vaza). Header/footer globais do site. Tokens
   próprios + override do modern.css (Manrope !important). Instrument Serif + Geist.
   ===================================================================== */
.sust-v0{
  --background:#fbfbfa;--foreground:#1a1b1e;--card:#fff;--primary:#3ea22b;
  --muted-fg:#6f7079;--border:#e7e7ea;--secondary:#f1f2f0;--accent:#e6f1e2;--accent-fg:#285c1c;
  --serif:'Instrument Serif',Georgia,serif;--sans:'Geist',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:var(--background);color:var(--foreground);font-family:var(--sans);line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.sust-v0 *{box-sizing:border-box}
.sust-v0 h1,.sust-v0 h2,.sust-v0 h3,.sust-v0 p{margin:0}
.sust-v0 img{display:block;max-width:100%}
.sust-v0 a{text-decoration:none;color:inherit}
/* override modern.css */
.sust-v0,.sust-v0 p,.sust-v0 a,.sust-v0 span,.sust-v0 li{font-family:var(--sans) !important}
.sust-v0 .serif,.sust-v0 h1,.sust-v0 h2,.sust-v0 h3{font-family:var(--serif) !important;font-weight:400}

.sust-v0 .wrap{max-width:1400px;margin:0 auto;padding:0 24px}
@media(min-width:768px){.sust-v0 .wrap{padding:0 48px}}
.sust-v0 .eyebrow{font-size:12px;font-weight:600;letter-spacing:.25em;text-transform:uppercase;color:var(--muted-fg)}

/* hero */
.sust-hero{max-width:1400px;margin:0 auto;padding:72px 24px 0}
@media(min-width:768px){.sust-hero{padding:88px 48px 0}}
.sust-hero .eyebrow{margin-bottom:22px}
.sust-hero h1{font-size:clamp(46px,7vw,84px);line-height:1.05;letter-spacing:-.01em;max-width:18ch}
.sust-hero h1 .mut{color:var(--muted-fg)}
.sust-hero h1 .dot{color:var(--primary)}
.sust-hero .lead{margin-top:28px;max-width:42rem;font-size:clamp(18px,2vw,21px);color:var(--muted-fg)}

/* foto */
.sust-photo{max-width:1400px;margin:60px auto 0;padding:0 24px}
@media(min-width:768px){.sust-photo{padding:0 48px}}
.sust-photo .fig{overflow:hidden;border-radius:32px}
.sust-photo img{width:100%;aspect-ratio:16/9;object-fit:cover}

/* pilares */
.sust-sec{max-width:1400px;margin:0 auto;padding:96px 24px}
@media(min-width:768px){.sust-sec{padding:120px 48px}}
.sust-sec .eyebrow{margin-bottom:44px}
.sust-grid{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:640px){.sust-grid{grid-template-columns:repeat(2,1fr)}}
.sust-card{display:flex;flex-direction:column;gap:18px;border:1px solid var(--border);border-radius:24px;background:var(--card);padding:32px}
@media(min-width:768px){.sust-card{padding:40px}}
.sust-card .ic{display:flex;width:48px;height:48px;align-items:center;justify-content:center;border-radius:999px;background:var(--accent);color:var(--primary)}
.sust-card .ic svg{width:22px;height:22px}
.sust-card h3{font-size:23px;color:var(--foreground)}
.sust-card p{color:var(--muted-fg);font-size:15.5px}

/* visão */
.sust-vis{max-width:1400px;margin:0 auto;padding:0 24px 96px}
@media(min-width:768px){.sust-vis{padding:0 48px 120px}}
/* card full-bleed (réplica EXATA do v0): a CARD (.inner) é o grid com overflow:hidden +
   rounded + bg e SEM padding; o texto leva o padding; a imagem é absolute inset-0 e
   encosta às bordas do card (clipada pelos cantos). Sem gap → sem cinza à direita. */
.sust-vis .box{max-width:1000px;margin:0 auto}
.sust-vis .inner{display:grid;grid-template-columns:1fr;align-items:stretch;overflow:hidden;border-radius:24px;background:var(--secondary)}
@media(min-width:768px){.sust-vis .inner{grid-template-columns:1fr 1fr}}
.sust-vis .vtext{padding:64px 32px}
@media(min-width:768px){.sust-vis .vtext{padding:80px 56px}}
.sust-vis .eyebrow{margin-bottom:30px}
.sust-vis .statement{font-family:var(--serif) !important;font-size:clamp(28px,3.4vw,38px);line-height:1.2;letter-spacing:-.01em;color:var(--foreground)}
.sust-vis .vis-img{position:relative;min-height:320px}
.sust-vis .vis-img img{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;object-position:center}
.sust-vis .body{margin-top:38px;max-width:48rem;display:flex;flex-direction:column;gap:18px;color:var(--muted-fg);font-size:clamp(16px,1.6vw,18px)}
.sust-vis .body .strong{color:var(--foreground);font-weight:500}
.sust-cta{margin-top:38px;display:inline-flex;align-items:center;gap:10px;border-radius:999px;background:var(--primary);color:#fff;padding:14px 28px;font-size:14px;font-weight:500;line-height:1.4;transition:opacity .2s}
.sust-cta:hover{opacity:.9;color:#fff}
.sust-cta svg{width:16px;height:16px;flex:0 0 auto}