/* ============================================================
   Sulco Gestão — site v3 (manual de marca 2026)
   Tokens do Design System + layout estilo "product page".
   Tema: <html data-theme="light|dark">
   ============================================================ */

@font-face{font-family:"Archivo";src:url(fonts/Archivo-Bold.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Archivo";src:url(fonts/Archivo-ExtraBold.woff2) format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url(fonts/IBMPlexSans-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url(fonts/IBMPlexSans-Medium.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url(fonts/IBMPlexSans-SemiBold.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(fonts/IBMPlexMono-Medium.woff2) format("woff2");font-weight:500;font-display:swap}

:root,[data-theme="light"]{
  --bg:#F5F7F8;--bg-2:#FFFFFF;--surface:#FFFFFF;--surface-2:#EEF1F2;--line:#E6EAEC;--line-2:#D5DBDD;
  --txt:#0F1A1E;--muted:#5A6A70;--dim:#8A969C;
  --accent:#12A36A;--accent-strong:#0B5A38;--on-accent:#FFFFFF;--action:#0B5A38;--on-action:#FFFFFF;
  --sulco-green:#0B5A38;--sulco-yellow:#F5B301;
  --sinal-verde:#12A36A;--on-sinal-verde:#0F1A1E;--sinal-amarelo:#F5B301;--on-sinal-amarelo:#0F1A1E;--sinal-vermelho:#C0392B;--on-sinal-vermelho:#FFFFFF;
  --ok:#0B5A38;--warn:#B7791F;--danger:#C0392B;--accent-2:#7C3AED;
  --nav-bg:rgba(245,247,248,.72);
  --shadow:0 8px 28px rgba(16,24,28,.10);--elev:0 1px 2px rgba(16,24,28,.05);
  color-scheme:light;
}
[data-theme="dark"]{
  --bg:#0E1512;--bg-2:#121A16;--surface:#16201C;--surface-2:#101713;--line:#24332C;--line-2:#33453B;
  --txt:#E7ECEA;--muted:#8FA39A;--dim:#6E827A;
  --accent:#2BC48A;--accent-strong:#6FE0B4;--on-accent:#06231A;--action:#2BC48A;--on-action:#06231A;
  --sulco-green:#15412F;--sulco-yellow:#F5B301;
  --sinal-verde:#2BC48A;--on-sinal-verde:#06231A;--sinal-amarelo:#F5B301;--on-sinal-amarelo:#0F1A1E;--sinal-vermelho:#FF6B6B;--on-sinal-vermelho:#06231A;
  --ok:#2BC48A;--warn:#E0A52E;--danger:#FF6B6B;--accent-2:#A78BFA;
  --nav-bg:rgba(14,21,18,.72);
  --shadow:0 24px 60px rgba(0,0,0,.5);--elev:0 1px 2px rgba(0,0,0,.35);
  color-scheme:dark;
}
:root{
  --font-display:"Archivo","Arial Narrow",system-ui,sans-serif;
  --font-sans:"IBM Plex Sans",system-ui,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,monospace;
  --radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:28px;--radius-pill:999px;
  --wrap:1120px;--gutter:clamp(16px,4vw,32px);
  --ease:cubic-bezier(.2,.7,.2,1);
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--txt);font-family:var(--font-sans);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,h4,p{margin:0}
h1,h2,h3{font-family:var(--font-display);font-weight:800;letter-spacing:-.02em;line-height:1.02}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.skip-link{position:absolute;left:-999px;top:8px;background:var(--action);color:var(--on-action);padding:8px 14px;border-radius:var(--radius-sm);z-index:200}
.skip-link:focus{left:8px}
:focus-visible{outline:2px solid var(--accent-strong);outline-offset:2px;border-radius:4px}
[data-theme="dark"] :focus-visible{outline-color:var(--accent)}

.overline{font-family:var(--font-display);font-weight:700;font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-strong)}
.soft{color:var(--muted)}
.mono{font-family:var(--font-mono);font-weight:500}

/* ---------- logo inline ---------- */
.sg-logo{height:34px;width:auto;color:var(--txt)}
.sg-logo .i,.sg-logo .w{fill:currentColor;stroke:currentColor}
.sg-logo .w{stroke:none}
.sg-logo .s{fill:var(--accent-strong)}
.sg-logo .gv{fill:var(--sinal-verde)}.sg-logo .ga{fill:var(--sinal-amarelo)}.sg-logo .gr{fill:var(--sinal-vermelho)}

/* ---------- botões ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:46px;padding:0 24px;border-radius:var(--radius-pill);border:1px solid transparent;background:var(--action);color:var(--on-action);font:600 15px/1 var(--font-sans);text-decoration:none;cursor:pointer;transition:transform .2s var(--ease),filter .2s}
.btn:hover{filter:brightness(1.08)}
.btn:active{transform:scale(.98)}
.btn.lg{height:54px;padding:0 30px;font-size:16px}
.btn.sm{height:36px;padding:0 16px;font-size:14px}
.btn.ghost{background:transparent;color:var(--txt);border-color:var(--line-2)}
.link-cta{display:inline-flex;align-items:center;gap:6px;color:var(--accent-strong);font-weight:600;text-decoration:none}
.link-cta:hover{text-decoration:underline;text-underline-offset:4px}
.cta-row{display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center;justify-content:center;margin-top:32px}

/* ---------- navegação (translúcida, fina) ---------- */
.site-header{position:sticky;top:0;z-index:100;background:var(--nav-bg);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid transparent;transition:border-color .3s}
.site-header.scrolled{border-bottom-color:var(--line)}
.nav-bar{display:flex;align-items:center;justify-content:space-between;height:60px;gap:16px}
.nav-bar>a{display:flex;text-decoration:none}
.nav-links{display:flex;gap:28px;font-size:14px}
.nav-links a{text-decoration:none;color:var(--muted);transition:color .2s}
.nav-links a:hover,.nav-links a.active{color:var(--txt)}
.nav-right{display:flex;align-items:center;gap:10px}
.icon-btn{width:36px;height:36px;border-radius:var(--radius-pill);border:1px solid var(--line-2);background:transparent;color:var(--txt);cursor:pointer;font-size:15px;display:grid;place-items:center}
.menu-btn{display:none}
@media(max-width:860px){
  .menu-btn{display:grid}
  .hide-mobile{display:none}
  .nav-links{position:absolute;left:0;right:0;top:60px;flex-direction:column;gap:0;background:var(--bg);border-bottom:1px solid var(--line);padding:8px var(--gutter) 16px;display:none}
  .nav-links.open{display:flex}
  .nav-links a{padding:14px 0;font-size:17px;color:var(--txt);border-bottom:1px solid var(--line)}
}

/* ---------- seções ---------- */
section{position:relative}
.sec{padding:clamp(88px,12vw,160px) 0}
.sec-head{text-align:center;max-width:1040px;margin:0 auto clamp(40px,6vw,72px)}
.sec-head h2{font-size:clamp(38px,6vw,76px);margin-top:14px}
.sec-head p.lead{font-size:clamp(18px,2vw,22px);color:var(--muted);margin-top:20px;line-height:1.45}
.sec--white{background:var(--bg-2)}
.sec--dark{--bg:#0E1512;--bg-2:#121A16;--surface:#16201C;--surface-2:#101713;--line:#24332C;--line-2:#33453B;--txt:#E7ECEA;--muted:#8FA39A;--accent:#2BC48A;--accent-strong:#6FE0B4;--action:#2BC48A;--on-action:#06231A;--sinal-verde:#2BC48A;--sinal-vermelho:#FF6B6B;--on-sinal-verde:#06231A;--on-sinal-vermelho:#06231A;background:var(--bg);color:var(--txt)}

/* ---------- sinal (semáforo) ---------- */
.sinal{display:inline-flex;align-items:center;gap:8px;height:28px;padding:0 12px 0 9px;border-radius:var(--radius-pill);font:600 12.5px/1 var(--font-sans);white-space:nowrap;justify-self:start}
.sinal::before{content:"";width:5px;height:13px;border-radius:var(--radius-pill);background:currentColor;opacity:.8}
.sinal.verde{background:var(--sinal-verde);color:var(--on-sinal-verde)}
.sinal.amarelo{background:var(--sinal-amarelo);color:var(--on-sinal-amarelo)}
.sinal.vermelho{background:var(--sinal-vermelho);color:var(--on-sinal-vermelho)}

/* ---------- footer ---------- */
.site-footer{background:var(--bg-2);border-top:1px solid var(--line);padding:56px 0 32px;font-size:14px;color:var(--muted)}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:32px}
.foot-grid h4{font:700 12px/1 var(--font-display);letter-spacing:.16em;text-transform:uppercase;color:var(--txt);margin:0 0 14px}
.foot-grid a{display:block;text-decoration:none;margin-bottom:9px}
.foot-grid p a{display:inline}
.foot-grid a:hover{color:var(--txt)}
.foot-brand p{margin-top:16px;max-width:340px}
.foot-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid var(--line);margin-top:40px;padding-top:22px}
@media(max-width:860px){.foot-grid{grid-template-columns:1fr 1fr}.foot-brand{grid-column:1/-1}}

/* ---------- cookie ---------- */
#cookie-aviso{position:fixed;left:16px;right:16px;bottom:16px;z-index:120;max-width:560px;margin:0 auto;background:#0F1A1E;color:#E7ECEA;border-radius:var(--radius-lg);padding:14px 18px;box-shadow:0 10px 40px rgba(0,0,0,.28);display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;font-size:13.5px;line-height:1.5}
#cookie-aviso[hidden]{display:none}
#cookie-aviso p{margin:0;flex:1 1 240px}
#cookie-aviso a{color:#6FE0B4}
#cookie-aviso .cookie-acoes{display:flex;gap:12px;align-items:center;margin-left:auto}
#cookie-aviso .cookie-ok{background:#2BC48A;color:#06231A;border:0;border-radius:var(--radius-pill);padding:9px 18px;font-weight:700;cursor:pointer}

/* por que sulco: rolagem com medidor fixo */
.why{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,96px)}
.why-sticky{position:sticky;top:96px;height:calc(100vh - 140px);min-height:480px;display:flex;align-items:center;justify-content:center}
.gauge{position:relative;width:min(380px,100%);aspect-ratio:1/1.08}
.gauge svg{width:100%;height:100%}
.gauge .blk{fill:var(--txt);transition:opacity .5s var(--ease)}
.gauge .groove{fill:var(--surface-2)}
.gauge .lamp{fill:var(--line-2);transition:fill .45s var(--ease)}
.gauge[data-step="0"] .l0{fill:var(--sinal-verde)}
.gauge[data-step="1"] .l1{fill:var(--sinal-amarelo)}
.gauge[data-step="2"] .l2{fill:var(--sinal-vermelho)}
.gauge[data-step="3"] .l0{fill:var(--sinal-verde)}
.gauge[data-step="3"] .l1{fill:var(--sinal-amarelo)}
.gauge[data-step="3"] .l2{fill:var(--sinal-vermelho)}
.gauge-label{position:absolute;left:0;right:0;bottom:-36px;text-align:center}
.why-steps{padding:8vh 0}
.why-step{min-height:78vh;display:flex;flex-direction:column;justify-content:center;opacity:.28;transition:opacity .5s var(--ease)}
.why-step.on{opacity:1}
.why-step .overline{margin-bottom:14px}
.why-step h3{font-size:clamp(34px,4.4vw,56px);margin-bottom:22px}
.why-step p{font-size:clamp(17px,1.6vw,20px);color:var(--muted);max-width:520px;line-height:1.55}
.why-step p b{color:var(--txt);font-weight:600}
.why-step .sinal{margin-top:24px}
@media(max-width:860px){
  .why{grid-template-columns:1fr}
  .why-sticky{top:60px;height:auto;min-height:0;padding:20px 0;background:var(--bg);z-index:5;border-bottom:1px solid var(--line)}
  .gauge{width:150px}
  .gauge-label{display:none}
  .why-step{min-height:62vh}
}

.why-step .sinal{align-self:flex-start}

/* ============================================================
   CAMADA EDITORIAL — v4 (sem caixas: foto sangrando, tipografia
   grande, listas com fio, grid assimétrico)
   ============================================================ */
:root{--wrap:1280px}
.sec-head{text-align:left;max-width:none;margin:0 0 clamp(48px,6vw,88px)}
.sec-head h2{font-size:clamp(40px,6.2vw,92px);line-height:.98;max-width:14ch}
.sec-head .lead{font-size:clamp(18px,1.7vw,22px);color:var(--muted);max-width:44ch;margin-top:24px;line-height:1.5}
.split-head{display:grid;grid-template-columns:1.3fr 1fr;gap:32px;align-items:end;margin-bottom:clamp(48px,6vw,96px)}
.split-head h2{font-size:clamp(40px,6.2vw,92px);line-height:.98;margin-top:16px}
.split-head>p{font-size:clamp(17px,1.5vw,20px);color:var(--muted);max-width:40ch;justify-self:end}
@media(max-width:860px){.split-head{grid-template-columns:1fr}.split-head>p{justify-self:start}}
.rule{border:0;border-top:1px solid var(--line-2);margin:0}
.eyebrow-num{font:500 13px/1 var(--font-mono);color:var(--muted);letter-spacing:.04em}

/* ---------- navegação sobre a foto ---------- */
.site-header.on-photo:not(.scrolled){background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;color:#fff}
.site-header.on-photo:not(.scrolled) .sg-logo{color:#fff}
.site-header.on-photo:not(.scrolled) .sg-logo .s{fill:#6FE0B4}
.site-header.on-photo:not(.scrolled) .nav-links a{color:rgba(255,255,255,.78)}
.site-header.on-photo:not(.scrolled) .nav-links a:hover,.site-header.on-photo:not(.scrolled) .nav-links a.active{color:#fff}
.site-header.on-photo:not(.scrolled) .icon-btn{color:#fff;border-color:rgba(255,255,255,.35)}
.site-header.on-photo:not(.scrolled) .btn{background:#fff;color:#0B5A38}
@media(max-width:860px){.site-header.on-photo:not(.scrolled) .nav-links.open a{color:var(--txt)}}
body.has-photo-hero .site-header{position:fixed;left:0;right:0}

/* Fundo do pneu acompanha a leitura até a faixa da estrada. A camada sticky
   fica contida em .tire-run, evitando background-attachment:fixed no iOS. */
.tire-run{position:relative;isolation:isolate;overflow:clip;background:#0B0F0D}
.tire-backdrop{position:sticky;top:0;z-index:0;height:100svh;margin-bottom:-100svh;background:#0B0F0D url("img/hero-banda.webp") 70% 50%/cover no-repeat;pointer-events:none}
.tire-backdrop::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,12,10,.88),rgba(8,12,10,.40) 55%,rgba(8,12,10,.18)),linear-gradient(0deg,rgba(8,12,10,.52),rgba(8,12,10,.08) 48%)}
.tire-run>section{position:relative;z-index:1}
.tire-run .statement,.tire-run #segmentos,.tire-run #plataforma{background:rgba(245,247,248,.78);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.tire-run #bellasync{background:rgba(255,255,255,.86);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
[data-theme="dark"] .tire-run .statement,[data-theme="dark"] .tire-run #segmentos,[data-theme="dark"] .tire-run #plataforma{background:rgba(14,21,18,.70)}
[data-theme="dark"] .tire-run #bellasync{background:rgba(18,26,22,.82)}
@media(max-width:860px){.tire-backdrop{background-image:url("img/hero-banda-m.webp");background-position:70% 50%}}

/* ---------- HERO com foto ---------- */
.hero-photo{position:relative;min-height:min(100svh,980px);display:flex;align-items:flex-end;color:#fff;background:#0B0F0D;overflow:hidden}
.hero-photo picture,.hero-photo img.bg{position:absolute;inset:0;width:100%;height:100%}
.hero-photo img.bg{object-fit:cover;object-position:70% 50%;transform:scale(1.06);transform-origin:70% 50%;will-change:transform}
.hero-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,12,10,.92) 0%,rgba(8,12,10,.72) 38%,rgba(8,12,10,.12) 75%),linear-gradient(0deg,rgba(8,12,10,.7),rgba(8,12,10,0) 45%)}
.hero-photo .wrap{position:relative;z-index:1;padding-top:160px;padding-bottom:clamp(56px,8vw,112px)}
.hero-photo .overline{color:#6FE0B4}
.hero-photo h1{font-size:clamp(52px,8.4vw,132px);line-height:.92;letter-spacing:-.035em;margin-top:22px;max-width:12ch}
.hero-photo h1 span{display:block;color:#6FE0B4}
.hero-photo .lead{font-size:clamp(18px,1.8vw,22px);color:rgba(255,255,255,.78);max-width:40ch;margin-top:30px;line-height:1.5}
.hero-photo .cta-row{justify-content:flex-start;margin-top:36px}
.hero-photo .btn{background:#fff;color:#0B5A38}
.hero-photo .link-cta{color:#fff}
.hero-meta{display:flex;gap:28px;flex-wrap:wrap;margin-top:clamp(48px,7vw,96px);padding-top:22px;border-top:1px solid rgba(255,255,255,.22);font:500 13px/1.4 var(--font-mono);color:rgba(255,255,255,.7)}
.hero-meta b{color:#fff;font-weight:500}

/* ---------- declaração + produto ---------- */
.statement{padding:clamp(96px,13vw,200px) 0 0}
.statement p.big{font:800 clamp(34px,5.2vw,76px)/1.02 var(--font-display);letter-spacing:-.03em;max-width:17ch}
.statement p.big span{color:var(--muted)}
.statement .sub{margin-top:28px;font-size:clamp(17px,1.5vw,20px);color:var(--muted);max-width:46ch}
.stage{margin:clamp(64px,8vw,120px) auto 0;max-width:1120px;perspective:1600px}
.stage-inner{transform-origin:50% 0;will-change:transform}
.stage-caption{text-align:left;color:var(--muted);font-size:14px;margin:24px 0 0;font-family:var(--font-mono)}
.window{background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:0 40px 120px -30px rgba(16,24,28,.35);overflow:hidden;display:grid;grid-template-columns:210px 1fr;text-align:left;font-size:14px}
[data-theme="dark"] .window{box-shadow:0 40px 120px -30px rgba(0,0,0,.8)}
.win-side{background:var(--surface-2);border-right:1px solid var(--line);padding:22px 16px;display:flex;flex-direction:column;gap:4px}
.win-side .brand{display:flex;align-items:center;gap:8px;margin-bottom:18px;font:800 15px/1 var(--font-display)}
.win-side .brand img{width:26px;height:26px}
.win-side span.it{display:flex;gap:10px;align-items:center;padding:9px 10px;border-radius:var(--radius-sm);color:var(--muted)}
.win-side span.it.on{background:var(--surface);color:var(--txt);font-weight:600;box-shadow:var(--elev)}
.win-side .foot{margin-top:auto;padding:14px 10px 0;color:var(--muted);font-size:13px;line-height:1.4}
.win-main{padding:22px 26px 26px;min-width:0}
.win-top{display:flex;justify-content:space-between;color:var(--muted);font-size:12px;margin-bottom:18px;gap:12px}
.win-top .tag{border:1px solid var(--line-2);border-radius:var(--radius-pill);padding:3px 10px;white-space:nowrap}
.win-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.win-head small{font:700 11px/1 var(--font-display);letter-spacing:.16em;color:var(--muted)}
.win-head h2{font-size:26px;margin-top:6px;letter-spacing:-.01em}
.avatar{width:38px;height:38px;border-radius:50%;background:var(--sulco-green);color:#fff;display:grid;place-items:center;font:700 13px/1 var(--font-display)}
.tabs{display:inline-flex;gap:4px;padding:4px;border-radius:var(--radius-pill);background:var(--surface-2);margin-bottom:18px;flex-wrap:wrap}
.tabs button{border:0;background:transparent;color:var(--muted);font:600 13px/1 var(--font-sans);padding:9px 14px;border-radius:var(--radius-pill);cursor:pointer}
.tabs button[aria-selected="true"]{background:var(--surface);color:var(--txt);box-shadow:var(--elev)}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-bottom:16px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.kpis div{padding:14px 16px 14px 0}
.kpis div+div{padding-left:16px;border-left:1px solid var(--line)}
.kpis span{display:block;color:var(--muted);font-size:12px}
.kpis strong{display:block;font:500 28px/1.1 var(--font-mono);letter-spacing:-.02em;margin-top:6px}
.kpis small{display:block;font:400 12px/1.3 var(--font-sans);color:var(--muted);margin-top:4px}
.tbl{border-top:1px solid var(--line)}
.tr{display:grid;grid-template-columns:1.6fr 1fr 1.2fr;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.tr.th{font:700 11px/1 var(--font-display);letter-spacing:.14em;color:var(--muted)}
.tr b{font-weight:600}
.cli{display:flex;align-items:center;gap:10px;min-width:0}
.cli i{flex:none;width:30px;height:30px;border-radius:50%;background:var(--surface-2);display:grid;place-items:center;font:700 11px/1 var(--font-display);font-style:normal;color:var(--muted)}
.chart{display:flex;align-items:flex-end;gap:14px;height:170px;padding:18px 0 12px;border-bottom:1px solid var(--line)}
.chart div{flex:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:8px}
.chart i{display:block;width:100%;height:var(--bar);background:var(--accent);border-radius:4px 4px 0 0;opacity:.5}
.chart div:last-child i{opacity:1}
.chart span{font-size:12px;color:var(--muted)}
.cat{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;border-top:1px solid var(--line);padding-top:16px}
.cat .g{font-size:20px;color:var(--accent)}
.cat small{display:block;font:700 10px/1 var(--font-display);letter-spacing:.16em;color:var(--muted);margin-top:10px}
.cat h3{font-size:17px;margin:6px 0;letter-spacing:-.01em}
.cat p{color:var(--muted);font-size:13px;line-height:1.45}
@media(max-width:760px){
  .window{grid-template-columns:1fr;border-radius:14px}
  .win-side{display:none}
  .win-main{padding:18px}
  .kpis strong{font-size:20px}.kpis small{display:none}.kpis div+div{padding-left:10px}
  .tr{grid-template-columns:1.5fr 1fr;font-size:13px}.tr>:nth-child(2){display:none}
  .cat{grid-template-columns:1fr}
}

/* ---------- segmentos: linhas foto + texto alternadas ---------- */
.feature{display:grid;grid-template-columns:repeat(12,1fr);gap:0 clamp(20px,3vw,40px);align-items:center}
.feature+.feature{margin-top:clamp(80px,11vw,168px)}
.feature figure{margin:0;grid-column:1 / span 7;overflow:hidden;border-radius:4px}
.feature figure img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;transition:transform 1.2s var(--ease)}
.feature:hover figure img{transform:scale(1.03)}
.feature .copy{grid-column:9 / span 4}
.feature.flip figure{grid-column:6 / span 7;grid-row:1}
.feature.flip .copy{grid-column:1 / span 4;grid-row:1}
.feature .num{font:500 13px/1 var(--font-mono);color:var(--accent-strong)}
.feature h3{font-size:clamp(32px,3.6vw,54px);line-height:1;margin:20px 0 22px}
.feature p{color:var(--muted);font-size:clamp(16px,1.3vw,18px)}
.feature .det{display:block;margin-top:28px;padding-top:16px;border-top:1px solid var(--line-2);font-size:14px;font-weight:600}
@media(max-width:860px){
  .feature figure,.feature.flip figure,.feature .copy,.feature.flip .copy{grid-column:1 / -1;grid-row:auto}
  .feature .copy{margin-top:28px}
}

/* ---------- faixa de foto em tela cheia ---------- */
.band{position:relative;height:clamp(420px,62vw,760px);overflow:hidden;background:#0B0F0D;color:#fff}
.band img{position:absolute;inset:-8% 0;width:100%;height:116%;object-fit:cover;will-change:transform}
.band::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--bg) 0,rgba(8,12,10,0) 18%,rgba(8,12,10,0) 66%,var(--bg) 100%),linear-gradient(0deg,rgba(8,12,10,.72),rgba(8,12,10,0) 62%)}
.band .wrap{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:clamp(40px,6vw,80px)}
.band h2{font-size:clamp(40px,6.4vw,100px);line-height:.95;max-width:12ch}
.band h2 span{color:rgba(255,255,255,.62);display:block}
.band p{color:rgba(255,255,255,.78);max-width:42ch;margin-top:18px;font-size:clamp(16px,1.4vw,19px)}
.band .overline{color:#6FE0B4;margin-bottom:16px}

/* ---------- módulos: lista com fio ---------- */
.modules{border-top:1px solid var(--line-2)}
.mod{display:grid;grid-template-columns:minmax(160px,1fr) 2.2fr 1.4fr 48px;gap:24px;align-items:center;padding:clamp(28px,3.4vw,44px) 0;border-bottom:1px solid var(--line-2);text-decoration:none;color:var(--txt);transition:padding .4s var(--ease)}
.mod .k{font:700 12px/1.3 var(--font-display);letter-spacing:.16em;color:var(--accent-strong)}
.mod h3{font-size:clamp(28px,3.4vw,52px);line-height:1}
.mod p{color:var(--muted);font-size:16px}
.mod .rel{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.mod .go{width:48px;height:48px;border-radius:50%;border:1px solid var(--line-2);display:grid;place-items:center;font-size:18px;transition:background .3s,color .3s,transform .4s var(--ease)}
.mod:hover .go{background:var(--action);color:var(--on-action);border-color:transparent;transform:rotate(45deg)}
.mod:hover{padding-left:12px}
@media(max-width:860px){.mod{grid-template-columns:1fr 48px;gap:10px 16px}.mod .k,.mod h3,.mod>div,.mod p{grid-column:1}.mod .go{grid-column:2;grid-row:1 / span 3;align-self:start}}
.all-link{margin-top:40px}

/* ---------- BellaSync ---------- */
.bella2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,96px);align-items:end}
.bella2 .bella-brand{display:flex;align-items:flex-end;gap:clamp(14px,2vw,24px);margin-top:28px}
.bella2 .bella-mark{font:500 clamp(48px,7vw,92px)/.8 var(--font-sans);letter-spacing:-.13em;color:#7A2E4D;position:relative}
.bella2 .bella-mark::after{content:"";position:absolute;width:.13em;height:.13em;border-radius:50%;background:#96703E;right:-.08em;bottom:.02em}
.bella2 .word{font:500 clamp(48px,8vw,112px)/.82 var(--font-sans);letter-spacing:-.055em;color:#7A2E4D}
.bella2 .word span{color:#96703E}
.bella2 .bella-tag{display:block;margin-top:14px;font:700 10px/1.3 var(--font-display);letter-spacing:.3em;text-transform:uppercase;color:#3E1526}
[data-theme="dark"] .bella2 .bella-mark,[data-theme="dark"] .bella2 .word{color:#D9BC8C}
[data-theme="dark"] .bella2 .word span,[data-theme="dark"] .bella2 .bella-tag{color:#F7EDF1}
.bella2 h2{font-size:clamp(30px,3.4vw,48px);line-height:1.02;margin:26px 0 18px}
.bella2 .lead{font-size:clamp(17px,1.5vw,20px)}
.bella2 .soft{margin-top:14px}
.bella2 ul{list-style:none;padding:0;margin:0;border-top:1px solid var(--line-2)}
.bella2 li{display:flex;justify-content:space-between;gap:16px;padding:16px 0;border-bottom:1px solid var(--line-2);font-weight:500}
.bella2 li span{color:var(--muted);font:500 13px/1.6 var(--font-mono)}
@media(max-width:860px){.bella2{grid-template-columns:1fr}}

/* ---------- contato ---------- */
.contact2{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(40px,7vw,120px);align-items:start}
.contact2 h2{font-size:clamp(44px,6vw,92px);line-height:.95;margin-top:16px}
.contact2 h2 span{display:block;color:var(--muted)}
.contact2 .lead{font-size:clamp(17px,1.5vw,20px);color:var(--muted);margin-top:22px;max-width:36ch}
.contact2 .cta-row{justify-content:flex-start}
.methods2{margin-top:48px;border-top:1px solid var(--line-2)}
.methods2 a{display:flex;justify-content:space-between;gap:16px;padding:18px 0;border-bottom:1px solid var(--line-2);text-decoration:none}
.methods2 small{font:700 11px/1.6 var(--font-display);letter-spacing:.16em;color:var(--muted)}
.methods2 span{font:500 16px/1.4 var(--font-mono);text-align:right;word-break:break-all}
.sg-form{margin:0;background:none;border:0;border-radius:0;padding:0;box-shadow:none;max-width:none}
.sg-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 32px}
.sg-form label{display:flex;flex-direction:column;gap:2px;font:700 11px/1.4 var(--font-display);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding-top:14px}
.sg-form label em{font-style:normal;color:var(--danger)}
.sg-form .sg-col-2{grid-column:1/-1}
.sg-form input,.sg-form textarea{font:400 18px/1.4 var(--font-sans);letter-spacing:0;text-transform:none;padding:10px 0 12px;border:0;border-bottom:1px solid var(--line-2);border-radius:0;background:transparent;color:var(--txt);width:100%}
.sg-form textarea{resize:vertical}
.sg-form input:focus,.sg-form textarea:focus{outline:0;border-bottom:2px solid var(--accent-strong);padding-bottom:11px}
.sg-form input::placeholder,.sg-form textarea::placeholder{color:var(--muted);opacity:.7}
.sg-form button{margin-top:32px;width:auto}
.sg-form-note{margin-top:16px;font-size:13px;color:var(--muted);text-align:left}
@media(max-width:860px){.contact2{grid-template-columns:1fr}.sg-form-grid{grid-template-columns:1fr}}

/* ============ SOBRE (editorial) ============ */
.about-hero{padding:clamp(96px,12vw,170px) 0 clamp(64px,8vw,120px);text-align:left}
.about-hero h1{font-size:clamp(40px,6vw,96px);line-height:.96;max-width:20ch;margin:22px 0 0}
.about-hero .lead{font-size:clamp(18px,1.7vw,22px);color:var(--muted);max-width:46ch;margin:32px 0 0}
.why-intro{padding-top:clamp(80px,10vw,140px)}
.story2{display:grid;grid-template-columns:repeat(12,1fr);gap:0 clamp(20px,3vw,40px)}
.story2 .txt{grid-column:1 / span 6}
.story2 .txt h2{font-size:clamp(34px,4.2vw,64px);line-height:1;margin-bottom:28px}
.story2 .txt p{color:var(--muted);margin-bottom:18px;font-size:clamp(16px,1.3vw,18px)}
.story2 .tl-wrap{grid-column:8 / span 5}
.story2 .tl-wrap h3{font:700 12px/1 var(--font-display);letter-spacing:.16em;color:var(--muted);text-transform:uppercase;margin-bottom:18px}
.tl{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;padding:18px 0;border-top:1px solid var(--line-2)}
.tl:last-child{border-bottom:1px solid var(--line-2)}
.tl strong{display:block;font-weight:600}
.tl span{color:var(--muted);font-size:14px}
.tl .sinal.roxo{background:var(--accent-2);color:#fff}
@media(max-width:860px){.story2 .txt,.story2 .tl-wrap{grid-column:1 / -1}.story2 .tl-wrap{margin-top:40px}}
.founder2{display:grid;grid-template-columns:repeat(12,1fr);gap:0 clamp(20px,3vw,40px);align-items:end}
.founder2 picture{grid-column:1 / span 5}
.founder2 img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:4px;background:var(--surface-2)}
.founder2 .txt{grid-column:7 / span 6}
.founder2 blockquote{margin:0 0 36px;font:800 clamp(30px,3.6vw,56px)/1.04 var(--font-display);letter-spacing:-.025em}
.founder2 h2{font-size:clamp(22px,2vw,28px);margin:14px 0 14px}
.founder2 p{color:var(--muted);max-width:48ch}
@media(max-width:860px){.founder2 picture,.founder2 .txt{grid-column:1 / -1}.founder2 .txt{margin-top:36px}}
.plist{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(32px,5vw,80px)}
.plist article{padding:28px 0 32px;border-top:1px solid var(--line-2);display:grid;grid-template-columns:1fr 1.3fr;gap:24px}
.plist h3{font-size:clamp(22px,2vw,28px);line-height:1.08}
.plist p{color:var(--muted);font-size:16px}
@media(max-width:860px){.plist{grid-template-columns:1fr}.plist article{grid-template-columns:1fr;gap:10px}}
.links2{border-top:1px solid var(--line-2)}
.links2 a{display:grid;grid-template-columns:220px 1fr 1.2fr 48px;gap:24px;align-items:center;padding:30px 0;border-bottom:1px solid var(--line-2);text-decoration:none;transition:padding .4s var(--ease)}
.links2 a:hover{padding-left:12px}
.links2 .k{font:700 12px/1.3 var(--font-display);letter-spacing:.16em;color:var(--accent-strong)}
.links2 h3{font-size:clamp(26px,2.8vw,40px)}
.links2 p{color:var(--muted)}
.links2 .go{width:48px;height:48px;border-radius:50%;border:1px solid var(--line-2);display:grid;place-items:center;transition:background .3s,color .3s}
.links2 a:hover .go{background:var(--action);color:var(--on-action);border-color:transparent}
@media(max-width:860px){.links2 a{grid-template-columns:1fr 48px;gap:8px 16px}.links2 .k,.links2 h3,.links2 p{grid-column:1}.links2 .go{grid-column:2;grid-row:1 / span 3}}
.cta-full{background:var(--sulco-green);color:#fff;position:relative;overflow:hidden}
.cta-full::before{content:"";position:absolute;inset:0 0 auto;height:clamp(90px,12vw,170px);background:linear-gradient(180deg,var(--bg-2),rgba(11,90,56,0));pointer-events:none}
[data-theme="dark"] .cta-full{background:#15412F}
.cta-full .wrap{padding-top:clamp(96px,12vw,180px);padding-bottom:clamp(96px,12vw,180px)}
.cta-full h2{font-size:clamp(44px,7vw,112px);line-height:.94;max-width:12ch}
.cta-full p{color:#CFE9DC;font-size:clamp(17px,1.5vw,20px);margin-top:22px;max-width:44ch}
.cta-full .cta-row{justify-content:flex-start}
.cta-full .btn{background:#fff;color:#0B5A38}
.cta-full .btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.cta-full svg.tread{position:absolute;right:-60px;top:50%;transform:translateY(-50%);width:min(420px,40vw);opacity:.14}
.cta-full svg.tread path{fill:#2BC48A}

/* ---------- entrada ao rolar ---------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}
.no-js .reveal{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .stage-inner,.hero-photo img.bg,.band img{transform:none!important}
  .feature:hover figure img{transform:none}
}
