/* Soares Embalagens — estilos do site */

/* Base */
html{-webkit-text-size-adjust:100%}body{margin:0}[hidden]{display:none!important}

/* Layout: claro e minimalista, coluna-guia de 1180px em todas as páginas. A abertura é a única área teal,
   como a peça "BIG BAGS" do rebrand; o resto alterna fundo branco quente, faixas creme e verde-claro. */
:root{
  --brand:#01393d; --green:#3d876d; --cream:#f7f0e7; --wa:#25d366;
  --bg:#fbf9f5; --surface:#ffffff; --white:#fefefe; --soft:#f3efe8; --tint:#e8f1ec;
  --field-bg:#ffffff; --field-line:#c6d1cf; --field-hover:#8ea4a0;
  --ink:#0e2f32; --muted:#5d7173; --faint:#8a9a9b; --line:rgba(1,57,61,.09);
  --accent:#2f6f58; --btn-bg:#01393d; --btn-fg:#f7f0e7;
  --ill-front:#ffffff; --ill-side:#ebe5da; --ill-top:#f5f1ea; --ill-line:#01393d; --ill-strap:#faf8f4; --ill-shadow:rgba(1,57,61,.08); --ill-grid:rgba(1,57,61,.05);
  --ok:#2f7a5c; --err:#b3402f;
  --f-sans:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  --gut:clamp(18px,4vw,40px); --r:20px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --field-bg:#0c1f22; --field-line:rgba(247,240,231,.24); --field-hover:rgba(247,240,231,.45);
  --bg:#0c1f22; --surface:#122a2d; --white:#0f2528; --soft:#14292c; --tint:#173a35;
  --ink:#f1ebe1; --muted:#a6b8b5; --faint:#7d9290; --line:rgba(247,240,231,.1);
  --accent:#7cc8a8; --btn-bg:#f7f0e7; --btn-fg:#01393d;
  --ill-front:#1d3d41; --ill-side:#15302f; --ill-top:#24474a; --ill-line:#d3e7df; --ill-strap:#2c5256; --ill-shadow:rgba(0,0,0,.25); --ill-grid:rgba(247,240,231,.04);
  --ok:#7cc8a8; --err:#f08a76; color-scheme:dark}}
:root[data-theme="dark"]{
  --field-bg:#0c1f22; --field-line:rgba(247,240,231,.24); --field-hover:rgba(247,240,231,.45);
  --bg:#0c1f22; --surface:#122a2d; --white:#0f2528; --soft:#14292c; --tint:#173a35;
  --ink:#f1ebe1; --muted:#a6b8b5; --faint:#7d9290; --line:rgba(247,240,231,.1);
  --accent:#7cc8a8; --btn-bg:#f7f0e7; --btn-fg:#01393d;
  --ill-front:#1d3d41; --ill-side:#15302f; --ill-top:#24474a; --ill-line:#d3e7df; --ill-strap:#2c5256; --ill-shadow:rgba(0,0,0,.25); --ill-grid:rgba(247,240,231,.04);
  --ok:#7cc8a8; --err:#f08a76; color-scheme:dark}

*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font:400 16px/1.6 var(--f-sans);overflow-x:clip;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--f-sans);line-height:1.1;margin:0;text-wrap:balance;letter-spacing:-.025em}
p{margin:0}
a{color:inherit}
img{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:8px}
.wrap{max-width:1180px;margin-inline:auto;padding-inline:var(--gut)}
.label{display:inline-flex;align-items:center;gap:10px;font:600 13px/1 var(--f-sans);letter-spacing:.04em;color:var(--accent)}
.label::before{content:"";width:16px;height:7px;border-radius:99px;background:currentColor;opacity:.85}
.lede{font-size:clamp(16px,1.4vw,18px);color:var(--muted);max-width:52ch}

/* Botões */
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 24px;border-radius:99px;border:0;font:600 15px/1 var(--f-sans);text-decoration:none;cursor:pointer;transition:transform .25s,background .25s;white-space:nowrap}
.btn svg{width:16px;height:16px;transition:transform .25s}
.btn:hover{transform:translateY(-2px)}
.btn:hover svg{transform:translateX(3px)}
.btn-primary{background:var(--btn-bg);color:var(--btn-fg)}
.btn-soft{background:var(--tint);color:var(--ink)}
.btn-cream{background:var(--cream);color:var(--brand)}
.btn-sm{padding:11px 18px;font-size:14px}
.link{display:inline-flex;align-items:center;gap:8px;font:600 15px var(--f-sans);color:var(--accent);text-decoration:none;background:none;border:0;padding:0;cursor:pointer}
.link svg{width:16px;height:16px;transition:transform .25s}
.link:hover svg{transform:translateX(4px)}

/* Cabeçalho */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);transition:box-shadow .3s}
.top.scrolled{box-shadow:0 1px 0 var(--line)}
.top .wrap{display:flex;align-items:center;gap:18px;height:76px}
.brand{color:var(--brand);display:flex;flex-shrink:0}
:root[data-theme="dark"] .brand{color:var(--cream)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .brand{color:var(--cream)}}
.brand svg{height:30px;width:auto}
.brand .bb{height:44px;--logo-b:var(--green)}
.foot .brand .stack{height:86px;width:auto}
.nav{display:flex;gap:2px;margin-left:auto}
.nav a{padding:9px 13px;border-radius:99px;text-decoration:none;font:500 15px var(--f-sans);color:var(--muted);transition:color .2s,background .2s}
.nav a:hover{color:var(--ink)}
.nav a[aria-current="page"]{color:var(--ink);background:var(--soft)}
.phone{display:inline-flex;align-items:center;gap:8px;font:600 14px var(--f-sans);text-decoration:none;color:var(--ink);white-space:nowrap}
.phone svg{width:18px;height:18px;color:var(--wa)}
.menu-btn{display:none;width:46px;height:46px;border-radius:99px;border:0;background:var(--soft);cursor:pointer;align-items:center;justify-content:center}
.menu-btn span,.menu-btn span::before,.menu-btn span::after{display:block;width:18px;height:2px;background:var(--ink);transition:transform .3s,background .3s}
.menu-btn span{position:relative}
.menu-btn span::before,.menu-btn span::after{content:"";position:absolute;left:0}
.menu-btn span::before{top:-6px}.menu-btn span::after{top:6px}
.menu-open .menu-btn span{background:transparent}
.menu-open .menu-btn span::before{transform:translateY(6px) rotate(45deg)}
.menu-open .menu-btn span::after{transform:translateY(-6px) rotate(-45deg)}
/* Alternar tema claro/escuro */
.theme-sw{position:fixed;z-index:55;right:calc(20px + env(safe-area-inset-right,0px));bottom:calc(20px + env(safe-area-inset-bottom,0px));width:64px;height:34px;border-radius:99px;border:0;padding:0;cursor:pointer;background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--field-line),0 10px 30px -8px rgba(1,57,61,.45);transition:background .35s,transform .25s}
.theme-sw:hover{transform:translateY(-2px)}
.theme-sw .knob{position:absolute;top:4px;left:4px;width:26px;height:26px;border-radius:50%;background:var(--tint);color:var(--accent);display:grid;place-items:center;box-shadow:0 2px 8px rgba(1,57,61,.25);transition:transform .35s cubic-bezier(.3,1.4,.5,1),background .35s,color .35s}
.theme-sw svg{width:15px;height:15px;grid-area:1/1;transition:opacity .25s,transform .35s}
.theme-sw .moon{opacity:0;transform:rotate(-60deg) scale(.6)}
.theme-sw[aria-checked="true"]{background:var(--brand);box-shadow:inset 0 0 0 1.5px rgba(247,240,231,.25),0 10px 30px -8px rgba(0,0,0,.6)}
.theme-sw[aria-checked="true"] .knob{transform:translateX(28px);background:var(--cream);color:var(--brand)}
.theme-sw[aria-checked="true"] .sun{opacity:0;transform:rotate(60deg) scale(.6)}
.theme-sw[aria-checked="true"] .moon{opacity:1;transform:none}
html.theme-anim,html.theme-anim *{transition:background-color .35s,color .35s,border-color .35s,box-shadow .35s!important}
.nav .nav-cta{display:none}
@media (max-width:960px){
  .nav,.top .btn-desk{display:none}
  .menu-btn{display:inline-flex;margin-left:auto}
  .menu-open .nav{display:flex;position:fixed;inset:76px 0 auto 0;flex-direction:column;padding:12px var(--gut) 28px;background:var(--bg);box-shadow:0 20px 40px -20px rgba(1,57,61,.25);margin:0;animation:drop .3s ease both}
  .menu-open .nav a{font-size:19px;padding:14px 18px}
  .menu-open .nav .nav-cta{display:block;margin-top:10px;background:var(--btn-bg);color:var(--btn-fg);text-align:center;font-weight:600}
}
@keyframes drop{from{opacity:0;transform:translateY(-8px)}}

/* Páginas */
.page{animation:pageIn .55s cubic-bezier(.2,.7,.2,1) both}
@keyframes pageIn{from{opacity:.001;transform:translateY(12px)}}
.stagger>*{animation:rise .7s cubic-bezier(.2,.7,.2,1) both}
.stagger>*:nth-child(2){animation-delay:.07s}.stagger>*:nth-child(3){animation-delay:.14s}.stagger>*:nth-child(4){animation-delay:.21s}
@keyframes rise{from{opacity:.001;transform:translateY(18px)}}
.sec{padding-block:clamp(56px,7vw,96px)}
.band-soft{background:var(--soft)}
.band-tint{background:var(--tint)}
.band-white{background:var(--white)}
.band-white .ucard,.band-white form.card{background:var(--soft);box-shadow:none}

/* Tradição (empresa) */
.legacy{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(24px,5vw,72px);align-items:center}
.legacy .num{font:800 clamp(96px,16vw,210px)/.8 var(--f-sans);letter-spacing:-.06em;color:var(--brand);display:flex;align-items:flex-start}
.legacy .num sup{font-size:.38em;color:var(--green);margin-left:.04em;line-height:1}
:root[data-theme="dark"] .legacy .num{color:var(--cream)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .legacy .num{color:var(--cream)}}
.legacy blockquote{margin:0;font:700 clamp(26px,3.4vw,44px)/1.15 var(--f-sans);letter-spacing:-.03em;text-wrap:balance;max-width:22ch}
.legacy blockquote em{font-style:normal;color:var(--green)}
.legacy p{color:var(--muted);margin-top:18px;max-width:48ch}
@media (max-width:700px){.legacy{grid-template-columns:1fr}}

/* Seletores personalizados */
.native{position:absolute!important;opacity:0;pointer-events:none;width:1px;height:1px}
.dd{position:relative}
.dd-btn{width:100%;display:flex;align-items:center;gap:12px;text-align:left;background:var(--field-bg);color:var(--ink);border:1.5px solid var(--field-line);border-radius:14px;padding:10px 44px 10px 14px;min-height:52px;cursor:pointer;position:relative;transition:border-color .2s,box-shadow .2s}
.dd-btn::after{content:"";position:absolute;right:18px;top:50%;width:8px;height:8px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:translateY(-70%) rotate(45deg);transition:transform .25s}
.dd-btn[aria-expanded="true"]::after{transform:translateY(-30%) rotate(-135deg)}
.dd-btn:hover{border-color:var(--field-hover)}
.dd-btn:focus,.dd-btn[aria-expanded="true"]{outline:none;border-color:var(--green);box-shadow:0 0 0 4px rgba(61,135,109,.16)}
.dd-btn .ph{color:var(--faint)}
.field.bad .dd-btn{border-color:var(--err)}
.dd-list{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:30;background:var(--surface);border-radius:18px;box-shadow:0 24px 60px -20px rgba(1,57,61,.35),0 0 0 1px var(--line);padding:6px;max-height:340px;overflow-y:auto;animation:drop .22s ease both}
.dd-group{font:600 12px/1 var(--f-sans);color:var(--faint);letter-spacing:.04em;padding:12px 12px 6px}
.dd-opt{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:12px;cursor:pointer;transition:background .15s}
.dd-opt:hover,.dd-opt.active{background:var(--soft)}
.dd-opt[aria-selected="true"]{background:var(--tint)}
.dd-opt[aria-selected="true"]::after{content:"";margin-left:auto;flex:none;width:6px;height:11px;border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(45deg) translate(-2px,-2px)}
.dd-txt{display:grid;min-width:0}
.dd-txt b{font-weight:600;font-size:15px;line-height:1.3}
.dd-txt small{font:500 12px/1.4 var(--f-sans);color:var(--muted)}
.dd-thumb{flex:none;width:46px;height:40px;border-radius:10px;background:var(--bg);display:grid;place-items:center}
.dd-thumb svg{width:40px;height:35px}
.dd-btn .dd-thumb{width:40px;height:34px;background:var(--surface)}
.dd-btn .dd-thumb svg{width:34px;height:30px}
.sec-head{display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap;margin-bottom:clamp(26px,3.5vw,40px)}
.sec-head h2{font-size:clamp(26px,3vw,38px);font-weight:700;margin-top:14px;max-width:20ch}

/* Cabeçalho padrão das páginas internas (faixa creme) */
.phead{background:var(--soft);padding-block:clamp(48px,6vw,80px) clamp(40px,5vw,64px);position:relative;overflow:hidden;isolation:isolate}
.phead h1{font-size:clamp(34px,4.6vw,58px);font-weight:800;letter-spacing:-.035em;margin-top:16px;max-width:18ch}
.phead .lede{margin-top:16px}
.phead .mark{position:absolute;right:max(var(--gut),calc((100vw - 1180px)/2 + 40px));top:50%;width:clamp(90px,14vw,190px);transform:translateY(-50%) rotate(-8deg);color:var(--green);opacity:.12;z-index:-1}
@media (max-width:700px){.phead .mark{display:none}}

/* Abertura (teal, como a peça BIG BAGS da marca) */
.hero{background:var(--brand);color:var(--cream);position:relative;overflow:hidden;isolation:isolate}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(16px,3vw,40px);align-items:center;padding-block:clamp(40px,6vw,80px)}
.hero .label{color:#8fd3b6}
.hero h1{font-size:clamp(38px,5.2vw,68px);font-weight:800;letter-spacing:-.04em;max-width:13ch;margin-top:18px}
.hero h1 em{font-style:normal;color:#8fd3b6}
.hero .lede{margin-top:20px;max-width:40ch;color:rgba(247,240,231,.78)}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:32px}
.hero-ctas .link{color:var(--cream);margin-left:10px}
.hero-bg{position:absolute;right:-2%;bottom:-4%;width:min(64%,820px);color:var(--green);opacity:.55;z-index:-1;pointer-events:none}
@media (max-width:860px){.hero .wrap{grid-template-columns:1fr}.hero-bg{width:110%;right:-20%;bottom:-2%}}
.stage{position:relative;aspect-ratio:1/1;width:100%;max-width:560px;justify-self:center;touch-action:pan-y}
.stage canvas{width:100%!important;height:100%!important;display:block;cursor:grab}
.stage canvas:active{cursor:grabbing}
.stage .fallback{position:absolute;inset:12%;--ill-front:#fbf8f2;--ill-side:#dcd4c6;--ill-top:#ece5d9;--ill-line:#01393d;--ill-strap:#f4efe7;--ill-shadow:rgba(0,0,0,.25);--ill-grid:transparent}
.tag{position:absolute;display:inline-flex;align-items:center;gap:8px;font:600 13px/1 var(--f-sans);padding:10px 15px;border-radius:99px;border:1.5px solid rgba(247,240,231,.5);color:var(--cream);background:rgba(1,57,61,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);white-space:nowrap;animation:float 6s ease-in-out infinite;pointer-events:none}
.tag::before{content:"";width:12px;height:6px;border-radius:99px;background:#8fd3b6}
.tag.t1{top:10%;left:4%}
.tag.t2{top:30%;right:0;animation-delay:-1.5s}
.tag.t3{bottom:24%;left:0;animation-delay:-3s}
.tag.t4{bottom:6%;right:8%;animation-delay:-4.5s}
@keyframes float{50%{transform:translateY(-8px)}}
@media (max-width:560px){.tag{font-size:12px;padding:8px 12px}}

/* Faixa em movimento */
.ticker{overflow:hidden;background:var(--tint);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.ticker-track{display:flex;width:max-content;animation:tick 40s linear infinite}
.ticker-track span{font:600 clamp(17px,1.8vw,22px)/1 var(--f-sans);color:var(--accent);padding:20px 0;display:inline-flex;align-items:center;white-space:nowrap}
.ticker-track span::after{content:"";width:14px;height:6px;border-radius:99px;background:var(--green);opacity:.45;margin-inline:28px}
@keyframes tick{to{transform:translateX(-50%)}}

/* Sobre (início) */
.intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:center}
.intro h2{font-size:clamp(26px,3vw,38px);font-weight:700;margin-block:14px 16px}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-block:32px 28px}
.stat b{display:block;font:800 clamp(26px,2.6vw,34px)/1 var(--f-sans);letter-spacing:-.03em;color:var(--brand);font-variant-numeric:tabular-nums}
:root[data-theme="dark"] .stat b{color:var(--cream)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .stat b{color:var(--cream)}}
.stat span{display:block;font-size:14px;color:var(--muted);margin-top:8px;line-height:1.35}
.photo{border-radius:24px;overflow:hidden;aspect-ratio:4/3;background:var(--soft)}
.photo img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.photo:hover img{transform:scale(1.04)}
@media (max-width:860px){.intro{grid-template-columns:1fr}}

/* Cartões de produto */
.grid-products{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
@media (max-width:980px){.grid-products{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.grid-products{grid-template-columns:1fr}}
.pcard{display:flex;flex-direction:column;background:var(--surface);border-radius:var(--r);overflow:hidden;box-shadow:0 1px 2px rgba(1,57,61,.05);transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
.pcard:hover{transform:translateY(-4px);box-shadow:0 22px 44px -26px rgba(1,57,61,.35)}
.pcard .ill{position:relative;aspect-ratio:7/6;background-color:var(--soft);background-image:linear-gradient(var(--ill-grid) 1px,transparent 1px),linear-gradient(90deg,var(--ill-grid) 1px,transparent 1px);background-size:20px 20px;cursor:pointer;border:0;width:100%;padding:0;display:block}
.band-soft .pcard .ill{background-color:var(--bg)}
.pcard .ill svg{position:absolute;inset:7% 7% 4%;width:86%;height:89%;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.pcard:hover .ill svg{transform:translateY(-6px) scale(1.03)}
.pcard .cat{position:absolute;top:14px;left:14px;font:600 12px/1 var(--f-sans);color:var(--accent);background:var(--surface);border-radius:99px;padding:8px 12px}
.pcard .body{padding:20px 22px 22px;display:flex;flex-direction:column;gap:10px;flex:1}
.pcard h3{font-size:20px;font-weight:700}
.pcard p{color:var(--muted);font-size:15px}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.chip{font:500 12px/1 var(--f-mono);padding:7px 10px;border-radius:99px;background:var(--tint);color:var(--ink);white-space:nowrap}
.pcard .acts{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:auto;padding-top:10px}

/* Unidades */
.units{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
@media (max-width:760px){.units{grid-template-columns:1fr}}
.unit{position:relative;border-radius:var(--r);overflow:hidden;min-height:320px;display:flex;align-items:flex-end;color:#f7f0e7;isolation:isolate;text-decoration:none}
.unit img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.unit:hover img{transform:scale(1.05)}
.unit::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(1,57,61,0) 40%,rgba(1,40,43,.85));z-index:-1}
.unit .in{padding:24px;display:grid;gap:4px}
.unit small{font:600 13px var(--f-sans);opacity:.85}
.unit h3{font-size:clamp(24px,2.6vw,32px);font-weight:700}

/* Chamada */
.cta{background:var(--tint);border-radius:28px;padding:clamp(28px,5vw,56px);display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;position:relative;overflow:hidden;isolation:isolate}
.cta h2{font-size:clamp(24px,2.8vw,34px);font-weight:700;max-width:22ch}
.cta p{color:var(--muted);margin-top:10px;max-width:46ch}
.cta .mark{position:absolute;right:-30px;bottom:-40px;width:180px;color:var(--green);opacity:.1;z-index:-1;transform:rotate(-10deg)}

/* Empresa */
.ucards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
@media (max-width:760px){.ucards{grid-template-columns:1fr}}
.ucard{background:var(--surface);border-radius:var(--r);overflow:hidden}
.ucard .pic{aspect-ratio:16/10;overflow:hidden}
.ucard .pic img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s}
.ucard:hover .pic img{transform:scale(1.04)}
.ucard .txt{padding:24px 26px 26px;display:grid;gap:10px}
.ucard h3{font-size:26px;font-weight:700}
.ucard p{color:var(--muted);font-size:15px}
.ucard address{font-style:normal;font-size:15px;color:var(--ink);margin-top:4px}
.mvv{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,48px)}
@media (max-width:860px){.mvv{grid-template-columns:1fr}}
.mv{display:grid;gap:10px;align-content:start}
.mv h3{font-size:22px;font-weight:700}
.mv-ic{width:56px;height:56px;border-radius:50%;background:var(--surface);color:var(--accent);display:grid;place-items:center;margin-bottom:6px;box-shadow:0 8px 24px -14px rgba(1,57,61,.35)}
.mv-ic svg{width:26px;height:26px}
.mv p{color:var(--muted)}
.gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:190px;gap:12px}
.gallery figure{margin:0;border-radius:16px;overflow:hidden;background:var(--soft)}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform 1s}
.gallery figure:hover img{transform:scale(1.05)}
.gallery .wide{grid-column:span 2;grid-row:span 2}
@media (max-width:760px){.gallery{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:140px}}

/* Catálogo */
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px}
.filters button{border:0;background:var(--soft);border-radius:99px;padding:10px 16px;font:500 14px var(--f-sans);cursor:pointer;transition:background .2s,color .2s;color:var(--ink)}
.filters button:hover{background:var(--tint)}
.filters button[aria-pressed="true"]{background:var(--btn-bg);color:var(--btn-fg)}
.custom{margin-top:20px}

/* Detalhe do produto */
.sheet-bg{position:fixed;inset:0;background:rgba(1,30,33,.4);backdrop-filter:blur(4px);z-index:60;display:flex;justify-content:flex-end;animation:fade .3s both}
@keyframes fade{from{opacity:0}}
.sheet{width:min(640px,100%);height:100%;background:var(--bg);overflow-y:auto;animation:slide .45s cubic-bezier(.2,.7,.2,1) both;padding-bottom:env(safe-area-inset-bottom,0px)}
@keyframes slide{from{transform:translateX(40px);opacity:.3}}
.sheet .ill{position:relative;aspect-ratio:16/11;background-color:var(--soft);background-image:linear-gradient(var(--ill-grid) 1px,transparent 1px),linear-gradient(90deg,var(--ill-grid) 1px,transparent 1px);background-size:24px 24px}
.sheet .ill svg{position:absolute;inset:8% 16%;width:68%;height:84%}
.sheet .close{position:absolute;top:calc(16px + env(safe-area-inset-top,0px));right:16px;width:44px;height:44px;border-radius:99px;border:0;background:var(--surface);cursor:pointer;display:grid;place-items:center;box-shadow:0 6px 20px -8px rgba(1,57,61,.3)}
.sheet .close svg{width:16px;height:16px}
.sheet .in{padding:clamp(24px,4vw,40px);display:grid;gap:18px}
.sheet h2{font-size:clamp(28px,3.6vw,38px);font-weight:800}
.sheet .desc{color:var(--muted)}
.spec{width:100%;border-collapse:collapse;font-size:15px}
.spec th,.spec td{text-align:left;padding:12px 0;border-bottom:1px solid var(--line);vertical-align:top}
.spec th{font-weight:500;color:var(--muted);width:42%;padding-right:16px}
.spec td{font-weight:600}
.sheet .acts{display:flex;gap:16px;flex-wrap:wrap;align-items:center;padding-top:4px}
.note{font-size:13px;color:var(--muted)}

/* Formulários */
.form-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:start}
@media (max-width:900px){.form-grid{grid-template-columns:1fr}}
form.card{background:var(--surface);border-radius:24px;padding:clamp(22px,3.5vw,40px);display:grid;gap:18px;box-shadow:0 1px 2px rgba(1,57,61,.05)}
.row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media (max-width:620px){.row{grid-template-columns:1fr}}
.field{display:grid;gap:7px;min-width:0}
.field label,.field .lbl{font:600 14px var(--f-sans);color:var(--ink)}
.field label i{font-style:normal;font-weight:400;color:var(--muted)}
.field input,.field select,.field textarea{width:100%;background:var(--field-bg);color:var(--ink);border:1.5px solid var(--field-line);border-radius:14px;padding:13px 15px;transition:border-color .2s,box-shadow .2s;min-width:0}
.field input::placeholder,.field textarea::placeholder{color:var(--faint);opacity:1}
.field input:hover,.field textarea:hover{border-color:var(--field-hover)}
.field textarea{min-height:120px;resize:none}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 4px rgba(61,135,109,.16)}
.send-err{color:var(--err);font-size:14px;width:100%}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0}
.field .err{color:var(--err);font-size:13px;display:none}
.field.bad input,.field.bad select,.field.bad textarea{border-color:var(--err)}
.field.bad .err{display:block}
.check{display:flex;gap:12px;align-items:flex-start;font-size:14px;color:var(--muted)}
.check input{width:20px;height:20px;accent-color:var(--green);flex:none;margin-top:1px}
.drop{background:var(--field-bg);border:1.5px dashed var(--field-line);border-radius:16px;padding:22px;text-align:center;cursor:pointer;transition:border-color .2s,background .2s;display:grid;gap:4px;justify-items:center}
.drop:hover,.drop.over{border-color:var(--green);background:var(--tint)}
.drop input{position:absolute;opacity:0;width:1px;height:1px}
.drop strong{font-weight:600}
.drop span{font-size:13px;color:var(--muted)}
.drop .file{font:500 13px var(--f-mono);color:var(--ink);background:var(--surface);padding:6px 10px;border-radius:99px}
.field.bad .drop{border-color:var(--err)}
.form-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding-top:6px}
.form-foot small{color:var(--faint);font-size:13px;max-width:40ch}
.success{background:var(--surface);border-radius:24px;padding:clamp(24px,4vw,44px);display:grid;gap:12px;animation:rise .5s both}
.success .ok{width:56px;height:32px;border-radius:99px;background:var(--tint);color:var(--ok);display:grid;place-items:center}
.success .ok svg{width:18px;height:18px}
.success h3{font-size:26px}
.success p{color:var(--muted)}
.success .proto{font:500 14px var(--f-mono);color:var(--ink)}
.aside{position:sticky;top:100px;display:grid;gap:16px}
@media (max-width:900px){.aside{position:static}}
.panel{background:var(--tint);border-radius:24px;padding:26px;display:grid;gap:14px}
.panel h4{font-size:16px;font-weight:700}
.panel p{color:var(--muted);font-size:15px}
.sum-item{display:grid;grid-template-columns:76px minmax(0,1fr);gap:14px;align-items:center}
.sum-item svg{width:76px;height:66px}
.sum-item b{font-weight:700;display:block}
.sum-item span{font:500 12px var(--f-mono);color:var(--muted)}
.sum-list{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0;font-size:14px}
.sum-list dt{color:var(--muted)}
.sum-list dd{margin:0;font-weight:600;overflow-wrap:anywhere}

/* Contato */
.channels{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:clamp(36px,5vw,56px)}
@media (max-width:760px){.channels{grid-template-columns:1fr}}
.ch{background:var(--surface);border-radius:var(--r);padding:22px 24px;display:grid;grid-template-columns:44px minmax(0,1fr);gap:4px 16px;align-items:start;box-shadow:0 1px 2px rgba(1,57,61,.05)}
.ch .ic{grid-row:span 3;width:44px;height:44px;border-radius:50%;background:var(--tint);color:var(--accent);display:grid;place-items:center}
.ch .ic svg{width:19px;height:19px}
.ch small{color:var(--faint);font-size:13px;font-weight:500}
.ch .val{font-weight:700;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch .acts{display:flex;gap:16px;margin-top:6px;flex-wrap:wrap}
.copy{border:0;background:none;padding:0;font:600 14px var(--f-sans);color:var(--accent);cursor:pointer}

/* Vagas */
.jobs{display:grid;gap:12px}
.job{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:center;padding:22px 26px;border-radius:var(--r);background:var(--surface);transition:transform .3s,box-shadow .3s;box-shadow:0 1px 2px rgba(1,57,61,.05)}
.job:hover{transform:translateX(4px);box-shadow:0 16px 36px -26px rgba(1,57,61,.35)}
.job.talent{background:var(--tint);box-shadow:none}
.job h3{font-size:19px;font-weight:700}
.job .meta{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:6px;font-size:14px;color:var(--muted)}
.job .meta span+span::before{content:"";display:inline-block;width:4px;height:4px;border-radius:50%;background:var(--faint);margin-right:12px;vertical-align:middle}
.job p{color:var(--muted);font-size:15px;margin-top:8px;max-width:64ch}
@media (max-width:700px){.job{grid-template-columns:1fr}}

/* Rodapé */
.foot{background:var(--soft);padding-bottom:env(safe-area-inset-bottom,0px)}
.foot .wrap{padding-block:clamp(44px,6vw,64px) 28px}
.foot-top{display:grid;grid-template-columns:minmax(0,1.2fr) repeat(3,minmax(0,1fr));gap:32px}
.foot .brand svg{height:34px}
.foot p,.foot address{color:var(--muted);font-size:14px;font-style:normal;line-height:1.7}
.foot address b{color:var(--ink);font-weight:600;display:block;margin-bottom:4px}
.foot h4{font-size:14px;font-weight:700;margin-bottom:12px}
.foot ul{list-style:none;padding:0;margin:0;display:grid;gap:6px;font-size:14px}
.foot a{text-decoration:none;color:var(--muted)}
.foot a:hover{color:var(--ink)}
.social{display:flex;gap:8px;margin-top:18px}
.social a{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--ink);display:grid;place-items:center;color:var(--ink);transition:transform .25s,background .25s,color .25s}
.social a:hover{transform:translateY(-2px);background:var(--ink);color:var(--bg)}
.social svg{width:19px;height:19px}
.nowrap{white-space:nowrap}
.foot-bot{margin-top:40px;padding-top:20px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;font-size:13px;color:var(--faint)}
.foot-bot a{color:var(--accent);font-weight:600}
.foot-bot a:hover{text-decoration:underline}
@media (max-width:900px){.foot-top{grid-template-columns:repeat(2,minmax(0,1fr))}.foot-top>:first-child{grid-column:1/-1}}
@media (max-width:520px){.foot-top{grid-template-columns:1fr}}

.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--btn-bg);color:var(--btn-fg);padding:12px 18px;border-radius:99px;font-weight:500;font-size:14px;z-index:80;animation:rise .3s both}

/* Ilustrações */
svg .i-front{fill:var(--ill-front);stroke:var(--ill-line);stroke-width:1.5;stroke-linejoin:round}
svg .i-side{fill:var(--ill-side);stroke:var(--ill-line);stroke-width:1.5;stroke-linejoin:round}
svg .i-top{fill:var(--ill-top);stroke:var(--ill-line);stroke-width:1.5;stroke-linejoin:round}
svg .i-strap{fill:none;stroke:var(--ill-line);stroke-width:7;stroke-linecap:round}
svg .i-strap2{fill:none;stroke:var(--ill-strap);stroke-width:4;stroke-linecap:round}
svg .i-stitch{fill:none;stroke:var(--ill-line);stroke-width:1.1;stroke-dasharray:3 3;opacity:.5}
svg .i-ln{fill:none;stroke:var(--ill-line);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
svg .i-thin{fill:none;stroke:var(--ill-line);stroke-width:1;opacity:.3}
svg .i-dash{fill:none;stroke:var(--ill-line);stroke-width:1.3;stroke-dasharray:4 4;opacity:.55}
svg .i-dark{fill:var(--ill-line)}
svg .i-shadow{fill:var(--ill-shadow)}
svg .i-logo{color:var(--ill-line)}
svg .i-accent{fill:#3d876d}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}