.company-hero { position:relative; min-height:760px; overflow:hidden; background:var(--green-deep); }
.company-hero-media { position:absolute; inset:0; background:linear-gradient(90deg,rgba(0,44,26,.88) 0,rgba(0,44,26,.58) 45%,rgba(0,44,26,.1) 76%),url('../img/banners/hero-maquinas-sul-limpa.webp') 64% center/cover; }
.company-hero-layout { position:relative; min-height:760px; display:flex; align-items:center; }
.company-hero-card { max-width:850px; padding:5rem 0; color:#fff; }
.company-hero .eyebrow { color:var(--yellow); }
.company-hero h1 { max-width:820px; margin-bottom:1.6rem; color:#fff; font-size:clamp(4rem,6.2vw,7.3rem); line-height:.9; }
.company-hero-card > p:not(.eyebrow) { max-width:650px; color:#e1ebe4; font-size:1.08rem; }
.company-hero .button { margin-top:1.3rem; color:var(--black); background:var(--yellow); }
.company-hero .button:hover { color:#fff; background:var(--black); }
.company-signals { background:var(--yellow); }
.company-signals-grid { display:grid; grid-template-columns:repeat(3,1fr); }
.company-signals-grid div { display:flex; align-items:baseline; justify-content:center; gap:.7rem; padding:1.35rem 1rem; border-right:1px solid rgba(17,17,14,.18); }
.company-signals strong { color:var(--green-deep); font-size:1.25rem; }
.company-signals span { font-size:.76rem; font-weight:600; }
.company-intro-grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(4rem,9vw,11rem); }
.company-intro-heading { position:relative; }
.company-intro-heading::after { width:5rem; height:.35rem; display:block; margin-top:2.5rem; background:var(--yellow); content:""; }
.company-intro-copy p { color:var(--muted); }
.company-intro-copy .lead { color:var(--green-deep); font-size:1.35rem; font-weight:600; line-height:1.5; }
.company-capabilities { background:var(--surface); }
.capabilities-heading { display:grid; grid-template-columns:1.1fr .9fr; align-items:end; gap:4rem; margin-bottom:3rem; }
.capabilities-heading > p { color:var(--muted); }
.capabilities-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.capabilities-grid a { min-height:340px; display:flex; flex-direction:column; padding:1.7rem; background:#fff; text-decoration:none; transition:background-color .35s ease, transform .35s ease; }
.capabilities-grid a:hover { z-index:1; background:var(--green-deep); transform:translateY(-.35rem); }
.capabilities-grid span { color:var(--green); font-size:.72rem; font-weight:700; }
.capabilities-grid h3 { margin:4.5rem 0 .8rem; color:var(--green); font-size:1.45rem; }
.capabilities-grid p { color:var(--muted); font-size:.88rem; }
.capabilities-grid b { margin-top:auto; color:var(--green); font-size:.72rem; text-transform:uppercase; }
.capabilities-grid a:hover span,.capabilities-grid a:hover h3,.capabilities-grid a:hover b { color:var(--yellow); }
.capabilities-grid a:hover p { color:#dce8e0; }
.company-field { background:#fff; }
.company-field-grid { display:grid; grid-template-columns:1.15fr .85fr; align-items:center; gap:clamp(3rem,7vw,8rem); }
.company-field-gallery { min-height:720px; display:grid; grid-template-columns:1.2fr .8fr; grid-template-rows:1fr 1fr; gap:.75rem; }
.company-field-gallery figure { position:relative; margin:0; overflow:hidden; }
.company-field-gallery .field-main { grid-row:1 / 3; }
.company-field-gallery img { width:100%; height:100%; display:block; object-fit:cover; transition:transform .65s ease; }
.company-field-gallery figure:hover img { transform:scale(1.04); }
.company-field-gallery figcaption { position:absolute; right:0; bottom:0; left:0; padding:3rem 1rem 1rem; color:#fff; background:linear-gradient(transparent,rgba(0,33,20,.95)); font-size:.72rem; font-weight:600; }
.company-field-copy > p { color:var(--muted); }
.field-principles { display:grid; gap:.2rem; margin-top:2rem; }
.field-principles article { display:grid; grid-template-columns:2.5rem 1fr; gap:1rem; padding:1rem 0; border-top:1px solid var(--line); }
.field-principles span { color:var(--green); font-size:.72rem; font-weight:700; }
.field-principles h3 { margin-bottom:.25rem; color:var(--green-deep); font-size:1rem; }
.field-principles p { margin:0; color:var(--muted); font-size:.86rem; }
.company-commitment { color:#fff; background:var(--black); }
.commitment-grid { display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(4rem,9vw,11rem); }
.company-commitment h2 { color:#fff; }
.company-commitment .eyebrow { color:var(--yellow); }
.commitment-list { display:grid; grid-template-columns:1fr 1fr; gap:2rem 3rem; }
.commitment-list article { padding-top:1rem; border-top:1px solid #494944; }
.commitment-list span { color:var(--yellow); font-size:.78rem; font-weight:700; text-transform:uppercase; }
.commitment-list p { margin-top:.8rem; color:#c9d0c9; font-size:.9rem; }
.company-region { background:var(--yellow); }
.company-region-grid { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:5rem; }
.company-region h2 { color:var(--black); }
.region-copy > p:not(.eyebrow) { max-width:620px; color:#3c3d37; }
.button-dark { margin-top:1rem; background:var(--black); }
.button-dark:hover { background:var(--green-deep); }
.region-graphic { position:relative; min-height:380px; overflow:hidden; border:1px solid rgba(17,17,14,.28); background:#143b4d; }
.region-map-live { position:absolute; inset:0; z-index:1; background:#143b4d url('../img/mapa-regiao-metropolitana-porta-alegre.jpg') center/cover no-repeat; }
.region-radar { position:absolute; z-index:2; top:47%; left:39.5%; width:1.15rem; height:1.15rem; transform:translate(-50%,-50%); }
.region-radar i { position:absolute; inset:0; border:1px solid #fbc400; border-radius:50%; opacity:0; animation:region-radar 2.8s ease-out infinite; }
.region-radar i:nth-child(2) { animation-delay:.9s; }
.region-radar i:nth-child(3) { animation-delay:1.8s; }
.region-radar b { position:absolute; inset:0; border:3px solid #fff; border-radius:50%; background:#fbc400; box-shadow:0 0 0 .35rem rgba(251,196,0,.18); }
.region-map-label { position:absolute; z-index:3; top:1.5rem; right:1.5rem; display:flex; flex-direction:column; align-items:flex-end; color:#fff; text-align:right; text-shadow:0 1px 4px rgba(0,0,0,.72); pointer-events:none; }
.region-map-label strong { font-size:1.1rem; letter-spacing:-.04em; }
.region-map-label span { font-size:.66rem; font-weight:900; letter-spacing:.1em; text-transform:uppercase; }
.region-map-credit { position:absolute; z-index:3; right:.55rem; bottom:.35rem; color:rgba(255,255,255,.74); font-size:.55rem; letter-spacing:.02em; pointer-events:none; }
@keyframes region-radar { 0% { opacity:.85; transform:scale(1); } 100% { opacity:0; transform:scale(10); } }
.company-cta { color:#fff; background:var(--green-deep); }
.company-cta-grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(3rem,8vw,9rem); }
.company-cta h2 { color:#fff; }
.company-cta .eyebrow { color:var(--yellow); }
.company-cta p { color:#dce8e0; }
.button-yellow { margin-top:1rem; color:var(--black); background:var(--yellow); }
.button-yellow:hover { color:#fff; background:var(--black); }
@media (max-width:1000px) { .capabilities-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:760px) { .company-hero,.company-hero-layout { min-height:680px; } .company-hero-media { background-position:68% center; } .company-hero h1 { font-size:3.7rem; } .company-signals-grid,.company-intro-grid,.capabilities-heading,.company-field-grid,.commitment-grid,.company-region-grid,.company-cta-grid { grid-template-columns:1fr; } .company-signals-grid div { justify-content:flex-start; border-right:0; border-bottom:1px solid rgba(17,17,14,.18); } .capabilities-grid { grid-template-columns:1fr; } .company-field-gallery { min-height:600px; grid-template-columns:1fr 1fr; } .commitment-list { grid-template-columns:1fr; } .region-graphic { min-height:280px; } .region-map-label { top:auto; right:1rem; bottom:1rem; } }
