/* SOSTAK Transporte e Frete - estilos
   Cores e medidas principais ficam em :root, logo abaixo. */

/* ---------- fontes (hospedadas no próprio site: sem chamadas ao Google) ---------- */
@font-face{
  font-family:'Archivo';
  font-style:normal;
  font-weight:400 800;
  font-stretch:100% 110%;
  font-display:swap;
  src:url("../assets/fonts/archivo-var.woff2") format("woff2");
}
@font-face{
  font-family:'Kaushan Script';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("../assets/fonts/kaushan-script.woff2") format("woff2");
}

:root{
  --bg:#000;
  --panel:#0f0f0f;
  --panel-2:#181818;
  --field:#0a0a0a;
  --line:rgba(255,255,255,.14);
  --text:#fff;
  --muted:#bdbdbd;
  --yellow:#ffc20e;
  --yellow-soft:rgba(255,194,14,.14);
  --ink:#000;
  --danger:#ff8a75;
  --wa:#25d366;
  --radius:14px;
  --maxw:1180px;
  --gutter:clamp(16px,4.6vw,40px);
  --header-h:70px;
  --font:'Archivo','Arial Narrow',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --script:'Kaushan Script','Brush Script MT','Segoe Script',cursive;
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:var(--header-h)}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-size:1.0625rem;line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeSpeed}
img,svg{max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a,button,summary{-webkit-tap-highlight-color:transparent}
:focus-visible{outline:3px solid var(--yellow);outline-offset:3px;border-radius:6px}
section[id]{scroll-margin-top:calc(var(--header-h) + 8px)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.wrap{width:min(100% - (var(--gutter) * 2),var(--maxw));margin-inline:auto}
.about,.bau,.quote,.why,.faq,.steps,.cards,.hero .wrap,.foot .grid,.form,.form .row,.contact{grid-template-columns:minmax(0,1fr)}
.form>*,.form .row>*,.quote>*,.contact>*,.bau>*,.about>*{min-width:0}
.skip{position:absolute;left:12px;top:-60px;background:var(--yellow);color:var(--ink);padding:10px 16px;border-radius:8px;font-weight:700;z-index:100}
.skip:focus{top:12px}

/* ---------- ícones ---------- */
.i{width:1.5em;height:1.5em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.i.solid{fill:currentColor;stroke:none}

/* ---------- tipografia ---------- */
.eyebrow{color:var(--yellow);font-size:.82rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;margin-bottom:14px}
h2.title{font-size:clamp(1.75rem,4.4vw,3rem);line-height:1.1;font-weight:800;font-stretch:106%;letter-spacing:-.015em;text-wrap:balance;overflow-wrap:break-word}
h2.title em,h1 em{font-style:normal;color:var(--yellow)}
.lead{color:var(--muted);max-width:60ch}
.script{font-family:var(--script);color:var(--yellow);line-height:1.25}

/* ---------- botões ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:10px 26px;border-radius:999px;font-weight:700;font-size:1rem;border:2px solid transparent;transition:background .2s,color .2s,border-color .2s,transform .2s;white-space:normal;text-align:center;line-height:1.25}
.btn .i{width:1.25em;height:1.25em}
.btn-primary{background:var(--yellow);color:var(--ink)}
.btn-primary:hover{background:#ffd23f}
.btn-ghost{border-color:rgba(255,255,255,.55);color:var(--text)}
.btn-ghost:hover{border-color:var(--yellow);color:var(--yellow)}
.btn-wa{background:var(--wa);color:#062b14;border-color:var(--wa)}
.btn-wa:hover{filter:brightness(1.08)}
.btn-sm{min-height:44px;padding:0 20px;font-size:.92rem}
.btn:active{transform:translateY(1px)}

/* ---------- cabeçalho ---------- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(0,0,0,.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:var(--header-h)}
.brand{display:block;flex:none}
.brand img{display:block;width:150px;height:auto}
.nav{display:none}
.nav a{font-size:.95rem;font-weight:500;padding:8px 2px;color:#e6e6e6;border-bottom:2px solid transparent;white-space:nowrap}
.nav a:hover{color:var(--yellow)}
.nav a.on{color:var(--text);border-bottom-color:var(--yellow)}
.bar-cta{display:none}
.menu-btn{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;background:none;border:1px solid var(--line);border-radius:12px}
.menu-btn .i{width:24px;height:24px}
.menu-btn .x{display:none}
.menu-btn[aria-expanded="true"] .x{display:block}
.menu-btn[aria-expanded="true"] .m{display:none}
.drawer{display:none;border-top:1px solid var(--line);padding:10px 0 22px;max-height:calc(100vh - var(--header-h));max-height:calc(100dvh - var(--header-h));overflow-y:auto;overscroll-behavior:contain}
.drawer.open{display:block}
.drawer a{display:block;padding:13px 4px;font-weight:600;border-bottom:1px solid var(--line)}
.drawer .btn{margin-top:18px;width:100%;border-bottom:2px solid transparent}
@media (min-width:1040px){
  .brand img{width:180px}
  .nav{display:flex;gap:clamp(18px,2.2vw,30px)}
  .bar-cta{display:inline-flex}
  .menu-btn,.drawer{display:none!important}
}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;padding:clamp(32px,6vw,70px) 0 clamp(32px,5vw,64px)}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 70% at 78% 45%,rgba(255,194,14,.18),transparent 70%);pointer-events:none}
.hero .wrap{position:relative;display:grid;gap:12px;grid-template-columns:1fr}
.hero-tag{font-weight:600;font-size:.9rem;color:#e9e9e9;margin-bottom:14px}
h1{font-size:clamp(2.15rem,7.4vw,3.7rem);line-height:1.04;font-weight:800;font-stretch:108%;letter-spacing:-.025em;text-wrap:balance;overflow-wrap:break-word}
.hero-sub{font-size:clamp(1.1rem,2vw,1.4rem);font-weight:700;line-height:1.3;margin:20px 0 14px;max-width:34ch;text-wrap:balance}
.hero-text{color:var(--muted);max-width:52ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}
.hero-cta .btn{flex:1 1 230px}
.hero-art{position:relative;margin-inline:calc(var(--gutter) * -.5)}
.hero-art img{display:block;width:100%;height:auto}
@media (min-width:600px){.hero-cta .btn{flex:0 0 auto}}
@media (min-width:980px){
  .hero .wrap{grid-template-columns:minmax(0,5.4fr) minmax(0,6fr);align-items:center;gap:0}
  .hero-art{margin-right:-3%;margin-left:0}
}
@media (min-width:1280px){.hero-art{margin-right:-6%}}
@media (prefers-reduced-motion:no-preference){
  .hero-copy>*{animation:rise .6s cubic-bezier(.2,.7,.2,1) both}
  .hero-copy>*:nth-child(2){animation-delay:.06s}
  .hero-copy>*:nth-child(3){animation-delay:.12s}
  .hero-copy>*:nth-child(4){animation-delay:.18s}
  .hero-copy>*:nth-child(5){animation-delay:.24s}
  .hero-art img{animation:drive-in .9s cubic-bezier(.16,.8,.24,1) both}
}
/* só movimento (sem começar transparente) para não atrasar a exibição do conteúdo principal */
@keyframes rise{from{transform:translateY(12px)}}
@keyframes drive-in{from{transform:translateX(9%)}}

/* faixa de estrada: marca visual do site */
.road{position:relative;height:16px;background:var(--panel-2)}
.road::after{content:"";position:absolute;left:0;right:0;top:50%;height:3px;transform:translateY(-50%);background:repeating-linear-gradient(90deg,var(--yellow) 0 38px,transparent 38px 76px)}

.strip{background:var(--panel);border-bottom:1px solid var(--line)}
.strip ul{display:grid;grid-template-columns:repeat(2,1fr)}
.strip li{display:flex;align-items:center;gap:12px;padding:18px 14px;font-weight:600;font-size:.95rem;line-height:1.25;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.strip li:nth-child(2n){border-right:0}
.strip li:last-child{grid-column:1/-1;border-bottom:0;border-right:0}
.strip .i{color:var(--yellow);width:2.1em;height:2.1em;stroke-width:1.5}
@media (max-width:359px){
  .strip ul{grid-template-columns:1fr}
  .strip li,.strip li:nth-child(2n){border-right:0}
}
@media (min-width:900px){
  .strip ul{grid-template-columns:repeat(5,1fr)}
  .strip li,.strip li:nth-child(2n){border-bottom:0;border-right:1px solid var(--line);justify-content:center;padding:24px 14px}
  .strip li:last-child{grid-column:auto;border-right:0}
}

/* ---------- seções ---------- */
.sec{padding:clamp(52px,9vw,112px) 0}
.sec.alt{background:var(--panel);border-block:1px solid var(--line)}

/* sobre */
.about{display:grid;gap:32px}
.slant{position:relative;width:100%;max-width:500px;aspect-ratio:592/678;margin-inline:auto}
.slant .ph{position:absolute;inset:0;clip-path:polygon(0 0,calc(100% - 26px) 0,calc(100% - 58px) 100%,0 100%)}
.slant .ph img{display:block;width:100%;height:100%;object-fit:cover}
.slant::before{content:"";position:absolute;inset:0;background:var(--yellow);clip-path:polygon(calc(100% - 26px) 0,100% 0,calc(100% - 32px) 100%,calc(100% - 58px) 100%)}
.about-body p+p{margin-top:16px}
.about-body .lead{margin-top:20px}
.about .script{font-size:clamp(1.4rem,3vw,2rem);margin-top:28px;transform:rotate(-2deg);transform-origin:left}
@media (min-width:720px){
  .about{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);align-items:center;gap:40px}
  .slant{margin-inline:0}
}
@media (min-width:900px){
  .about{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px}
  .slant .ph{clip-path:polygon(0 0,calc(100% - 44px) 0,calc(100% - 96px) 100%,0 100%)}
  .slant::before{clip-path:polygon(calc(100% - 44px) 0,100% 0,calc(100% - 52px) 100%,calc(100% - 96px) 100%)}
}

.why{margin-top:clamp(40px,6vw,72px);display:grid;gap:24px;border:1px solid var(--line);border-radius:var(--radius);padding:clamp(20px,4vw,44px);background:var(--panel)}
.why h3{font-size:clamp(1.35rem,3vw,2.1rem);line-height:1.15;font-weight:800;font-stretch:104%;letter-spacing:-.01em;text-wrap:balance}
.checks{display:grid;gap:14px}
.checks li{display:flex;gap:12px;align-items:flex-start;font-weight:500}
.checks .i{color:var(--ink);background:var(--yellow);border-radius:50%;padding:4px;width:1.45em;height:1.45em;stroke-width:2.6;margin-top:1px}
@media (min-width:760px){
  .why{grid-template-columns:minmax(0,4fr) minmax(0,6fr);align-items:center;gap:48px}
  .checks{grid-template-columns:1fr 1fr;gap:16px 28px}
}

/* serviços */
.sec-head{max-width:720px;margin-bottom:clamp(28px,5vw,52px)}
.cards{display:grid;gap:16px;grid-template-columns:1fr}
.card{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:24px 22px 22px;transition:border-color .2s}
.card:hover{border-color:rgba(255,194,14,.6)}
.card .ic{display:grid;place-items:center;width:58px;height:58px;border-radius:14px;background:var(--yellow-soft);color:var(--yellow);margin-bottom:20px}
.card .ic .i{width:30px;height:30px;stroke-width:1.6}
.card h3{font-size:1.2rem;font-weight:700;line-height:1.25;margin-bottom:10px}
.card p{color:var(--muted);font-size:.98rem;flex:1}
.card a{display:inline-flex;align-items:center;gap:8px;margin-top:20px;padding-top:16px;min-height:48px;border-top:1px solid var(--line);font-weight:700;font-size:.95rem}
.card a .i{width:1.1em;height:1.1em;color:var(--yellow);transition:transform .2s}
.card a:hover .i{transform:translateX(4px)}
@media (min-width:640px){.cards{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1040px){.cards{grid-template-columns:repeat(4,1fr)}}

/* baú */
.bau{display:grid;gap:32px}
.bau-photo{position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);aspect-ratio:960/668;background:var(--panel)}
.bau-photo img{display:block;width:100%;height:100%;object-fit:cover}
.bau .lead{margin-top:16px}
.dims{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:24px 0;container-type:inline-size}
.dim{border:1px solid var(--line);border-radius:12px;padding:16px 6px;background:var(--bg);text-align:center}
.dim .i{color:var(--yellow);width:1.3em;height:1.3em;margin-bottom:6px}
.dim b{display:block;white-space:nowrap;font-size:clamp(1.05rem,5.4vw,2.4rem);line-height:1.05;font-weight:800;font-stretch:104%;color:var(--yellow);font-variant-numeric:tabular-nums}
@supports (font-size:1cqw){.dim b{font-size:clamp(1rem,7cqw,2.4rem)}}
.dim span{display:block;font-size:.82rem;color:var(--muted);margin-top:6px}
.fit-cta{display:grid;gap:12px;border:1px solid var(--line);border-radius:var(--radius);padding:22px;background:var(--bg)}
.fit-cta h3{font-size:1.15rem;font-weight:700;line-height:1.25}
.fit-cta p{color:var(--muted);font-size:.97rem}
.fit-cta .btn{margin-top:6px;width:100%}
@media (min-width:900px){
  .bau{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:56px}
}

/* campos */
.in{width:100%;min-height:50px;background:var(--field);border:1px solid var(--line);border-radius:10px;padding:12px 14px;transition:border-color .2s;font-size:1rem}
textarea.in{min-height:104px;resize:vertical;line-height:1.5}
input[type=date].in{display:block;min-width:0;-webkit-appearance:none;appearance:none;text-align:left}
input[type=date].in::-webkit-date-and-time-value{text-align:left}
.in::placeholder{color:#7d7d7d}
.in:hover{border-color:rgba(255,255,255,.3)}
.in:focus-visible{outline:none;border-color:var(--yellow);box-shadow:0 0 0 3px rgba(255,194,14,.28)}
select.in{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23ffc20e' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;padding-right:42px}

/* como funciona */
.steps{display:grid;gap:18px;counter-reset:s}
.step{position:relative;display:grid;grid-template-columns:auto 1fr;gap:6px 18px;align-items:start;padding-bottom:6px}
.step .n{grid-row:span 2;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--yellow);color:var(--ink);font-weight:800;font-size:1.1rem}
.step h3{font-size:1.12rem;font-weight:700;line-height:1.25;padding-top:2px}
.step p{color:var(--muted);font-size:.97rem}
.step:not(:last-child)::after{content:"";position:absolute;left:22px;top:52px;bottom:-16px;border-left:2px dashed rgba(255,194,14,.45)}
@media (min-width:900px){
  .steps{grid-template-columns:repeat(4,1fr);gap:28px}
  .step{grid-template-columns:auto auto;grid-template-rows:auto;gap:16px 14px;align-content:start}
  .step .n{grid-row:auto}
  .step h3{grid-column:1/-1;padding-top:0}
  .step p{grid-column:1/-1;margin-top:-8px}
  .step:not(:last-child)::after{left:64px;right:-14px;top:22px;bottom:auto;border-left:0;border-top:2px dashed rgba(255,194,14,.45)}
}

/* faq */
.faq{display:grid;gap:12px;align-items:start}
details{background:var(--panel);border:1px solid var(--line);border-radius:12px;transition:border-color .2s}
details[open]{border-color:rgba(255,194,14,.55)}
summary{display:flex;align-items:center;gap:14px;list-style:none;cursor:pointer;padding:16px 16px;font-weight:600;line-height:1.35;min-height:60px}
summary::-webkit-details-marker{display:none}
summary .q{color:var(--yellow)}
summary .pl{margin-left:auto;color:var(--yellow);transition:transform .25s}
details[open] summary .pl{transform:rotate(45deg)}
details p{padding:0 18px 20px 18px;color:var(--muted);font-size:.98rem}
details p a{color:var(--yellow);text-decoration:underline;text-underline-offset:3px;font-weight:600}
@media (min-width:480px){details p{padding-left:58px}}
@media (min-width:900px){.faq{grid-template-columns:1fr 1fr;gap:14px 18px}}

/* orçamento */
.quote{display:grid;gap:32px}
.form{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(18px,4vw,36px);display:grid;gap:16px}
.form .row{display:grid;gap:16px}
.field label{display:block;font-size:.85rem;font-weight:600;color:var(--muted);margin-bottom:7px}
.field .msg{display:none;color:var(--danger);font-size:.85rem;margin-top:6px;font-weight:600}
.field.err .msg{display:block}
.field.err .in{border-color:var(--danger)}
.form .btn{width:100%;min-height:56px}
.status{min-height:1.4em;font-size:.95rem;color:var(--muted)}
.status a{color:var(--yellow);text-decoration:underline;text-underline-offset:3px;font-weight:700}
.contact{display:grid;gap:14px;align-content:start}
.contact a.line{display:flex;align-items:center;gap:16px;padding:16px 18px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.contact a.line:hover{border-color:var(--yellow)}
.contact .line .i{color:var(--yellow);width:1.7em;height:1.7em}
.contact .line small{display:block;color:var(--muted);font-size:.82rem;line-height:1.2;margin-bottom:3px}
.contact .line b{font-weight:700;font-size:1.05rem}
.contact .area{color:var(--muted);font-size:.95rem;padding:2px 4px}
.contact .script{font-size:clamp(1.5rem,3.4vw,2.2rem);margin-top:12px;text-align:right;transform:rotate(-3deg)}
@media (min-width:700px){.form .row{grid-template-columns:1fr 1fr}}
@media (min-width:960px){.quote{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px;align-items:start}}

/* nas seções de fundo cinza, formulário e contatos ficam pretos para destacar */
.sec.alt .form,.sec.alt .contact a.line{background:var(--bg)}

/* rodapé */
.foot{border-top:0;padding:44px 0 calc(96px + env(safe-area-inset-bottom));background:var(--bg)}
@media (min-width:900px){.foot{padding-bottom:40px}}
.foot .grid{display:grid;gap:28px}
.foot img{width:170px;height:auto;display:block;margin-bottom:12px}
.foot p{color:var(--muted);font-size:.95rem;max-width:36ch}
.foot nav{display:flex;flex-wrap:wrap;gap:4px 20px}
.foot nav a{font-size:.95rem;padding:10px 0}
.foot nav a:hover{color:var(--yellow)}
.foot .who{display:grid;gap:8px;font-size:.98rem;font-style:normal}
.foot .who a{display:flex;align-items:center;gap:10px;font-weight:600;min-height:44px}
.foot .who a:hover{color:var(--yellow)}
.foot .who span{display:flex;align-items:center;gap:10px;font-weight:600;min-height:44px}
.foot .who .i{color:var(--yellow);width:1.2em;height:1.2em}
.copy{margin-top:34px;padding-top:20px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;color:#9a9a9a;font-size:.85rem}
@media (min-width:900px){.foot .grid{grid-template-columns:1fr 1.7fr 1fr;align-items:start}}

/* whatsapp flutuante */
.fab{position:fixed;right:max(18px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));z-index:60;display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:var(--wa);color:#fff;box-shadow:0 8px 24px rgba(0,0,0,.55)}
.fab .i{width:30px;height:30px;stroke-width:0;fill:currentColor}
.fab:hover{filter:brightness(1.08)}

/* telas muito pequenas */
@media (max-width:359px){
  body{font-size:1rem}
  .btn{padding-inline:18px}
  .brand img{width:128px}
}

/* telas grandes */
@media (min-width:1600px){
  :root{--maxw:1280px}
  body{font-size:1.125rem}
}

/* celular deitado: cabeçalho não ocupa tanto espaço */
@media (max-height:480px) and (orientation:landscape){
  :root{--header-h:58px}
  .bar{min-height:var(--header-h)}
}

/* impressão */
@media print{
  .site-header,.fab,.road{display:none!important}
  body{background:#fff;color:#000}
}

/* utilitários */
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.sec-head .lead{margin-top:16px}