/* =============================================================
   Zucoloto Transportes · Highway Editorial
   Conceito: layout editorial assimétrico, tipografia mega,
   vermelho da marca + preto + paper white quente, motion sutil.
   ============================================================= */

:root{
  --red:        #E11D2A;
  --red-deep:   #B0151E;
  --red-glow:   rgba(225,29,42,.35);
  --black:      #111114;
  --black-2:    #1a1a1f;
  --paper:      #f2f2f2;
  --paper-2:    #e9e9e9;
  --line:       #e0e0e0;
  --gray:       #6b6b70;
  --gray-2:     #9a9aa0;
  --white:      #ffffff;
  --ease:       cubic-bezier(.2,.7,.2,1);
  --ease-out:   cubic-bezier(.25,.46,.45,.94);
  --container:  1280px;
}

*,*::before,*::after{box-sizing:border-box}
html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}
body{
  margin:0;
  font-family:'Manrope', system-ui, -apple-system, Segoe UI, sans-serif;
  font-size:17px;line-height:1.55;
  color:var(--black);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* Em mobile: contenção horizontal mais agressiva (Safari iOS exige) */
@media (max-width:880px){
  html{overflow-x:hidden;width:100%;max-width:100vw}
  body{width:100%;max-width:100vw;position:relative}
  main{width:100%;max-width:100vw;overflow-x:hidden}
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;border:0;background:none;cursor:pointer;color:inherit}
input,select,textarea{font:inherit}

/* ---------- Selection ---------- */
::selection{background:var(--red);color:#fff}

/* ---------- Helpers ---------- */
.tag{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.7rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--red);
  padding-bottom:6px;
}
.tag::before{
  content:"";width:20px;height:1px;background:var(--red);
}
.tag--light{color:var(--paper)}
.tag--light::before{background:var(--paper)}

em{font-style:normal;color:var(--red);font-weight:inherit}

h1,h2,h3,h4{
  font-family:'Manrope',sans-serif;
  letter-spacing:-.02em;line-height:1.05;
  margin:0 0 .5em;font-weight:600;
}
h2{font-size:clamp(1.7rem, 3.4vw, 2.6rem);font-weight:600}
h3{font-size:1.1rem;font-weight:600;letter-spacing:-.01em;line-height:1.25}

p{margin:0 0 1em;color:var(--gray)}
strong{color:var(--black);font-weight:600}

/* =============================================================
   CUSTOM CURSOR (desktop only)
   ============================================================= */
.cursor{display:none}
@media (hover:hover) and (pointer:fine){
  .cursor{
    display:block;position:fixed;top:0;left:0;
    width:32px;height:32px;border-radius:50%;
    border:1.5px solid var(--red);
    pointer-events:none;z-index:999;
    transform:translate(-50%,-50%);
    transition:width .25s var(--ease), height .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease);
    mix-blend-mode:difference;
  }
  .cursor span{
    position:absolute;inset:0;margin:auto;
    width:5px;height:5px;border-radius:50%;
    background:var(--red);
    transition:transform .25s var(--ease);
  }
  .cursor.is-link{width:54px;height:54px;background:var(--red);border-color:var(--red)}
  .cursor.is-link span{transform:scale(0)}
  body.has-custom-cursor a, body.has-custom-cursor button{cursor:none}
  body.has-custom-cursor{cursor:none}
}

/* =============================================================
   TOP BAR
   ============================================================= */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:50;
  background:rgba(244,241,234,.0);
  transition:background .35s var(--ease), border-color .35s var(--ease);
  border-bottom:1px solid transparent;
}
.topbar.is-scrolled, .topbar--solid{
  background:rgba(242,242,242,.92);
  backdrop-filter:saturate(160%) blur(16px);
  -webkit-backdrop-filter:saturate(160%) blur(16px);
  border-bottom-color:var(--line);
}
.topbar__inner{
  max-width:var(--container);margin:0 auto;
  padding:14px 28px;
  display:flex;align-items:center;gap:24px;
  height:64px;
}
.logo{display:flex;align-items:center;height:36px}
.logo img{
  height:100%;width:auto;display:block;
  transition:filter .35s var(--ease);
}

/* Modo "topo do hero escuro" — inverte logo + texto pra branco */
.topbar:not(.is-scrolled):not(.is-open) .logo img{
  filter:brightness(0) invert(1);
}
.topbar:not(.is-scrolled):not(.is-open) .topnav a{color:#fff}
.topbar:not(.is-scrolled):not(.is-open) .topnav a:hover{color:#fff}
.topbar:not(.is-scrolled):not(.is-open) .topnav a::after{background:#fff}
.topbar:not(.is-scrolled):not(.is-open) .live__txt{color:rgba(255,255,255,.65)}
.topbar:not(.is-scrolled):not(.is-open) .burger span{background:#fff}

.live{display:flex;align-items:center;gap:8px;margin-left:14px}
.live__dot{
  width:8px;height:8px;border-radius:50%;background:#1ec27a;
  position:relative;
}
.live__dot::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:#1ec27a;
  animation:pulse 1.8s var(--ease) infinite;
}
.live__txt{
  font-size:.68rem;font-weight:700;letter-spacing:.18em;
  color:var(--gray);
}
@keyframes pulse{
  0%{transform:scale(1);opacity:.6}
  70%{transform:scale(2.5);opacity:0}
  100%{transform:scale(2.5);opacity:0}
}

.topnav{display:flex;gap:26px;margin-left:auto}
.topnav a{
  font-size:.88rem;font-weight:500;color:var(--black);
  position:relative;padding:6px 0;
  transition:color .15s var(--ease);
}
.topnav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;
  height:1.5px;background:var(--red);
  transform:scaleX(0);transform-origin:right;
  transition:transform .3s var(--ease);
}
.topnav a:hover::after, .topnav a.is-current::after{
  transform:scaleX(1);transform-origin:left;
}
.topnav a.is-current{color:var(--red)}

.mini-cta{
  display:inline-flex;align-items:center;gap:6px;
  padding:9px 16px;border-radius:999px;
  background:var(--red);color:#fff;
  font-size:.8rem;font-weight:700;letter-spacing:.04em;
  transition:transform .2s var(--ease), background .2s var(--ease);
}
.mini-cta:hover{background:var(--red-deep);transform:translateY(-1px)}

.burger{
  display:none;width:36px;height:36px;
  flex-direction:column;justify-content:center;align-items:center;gap:5px;
  margin-left:auto;
}
.burger span{display:block;width:22px;height:2px;background:var(--black);transition:transform .25s var(--ease), opacity .2s var(--ease)}

@media (max-width:980px){
  .topnav, .mini-cta, .live{display:none}
  .burger{display:flex}
  .topbar.is-open{
    background:var(--paper);border-bottom-color:var(--line);
  }
  .topbar.is-open .topnav{
    display:flex;flex-direction:column;gap:0;
    position:absolute;left:0;right:0;top:64px;
    padding:8px 28px 18px;
    background:var(--paper);
    border-bottom:1px solid var(--line);
  }
  .topbar.is-open .topnav a{padding:14px 0;border-bottom:1px solid var(--line);font-size:.95rem}
  .topbar.is-open .topnav a:last-child{border-bottom:0}
  .topbar.is-open .mini-cta{display:inline-flex;margin:0 28px 18px;align-self:flex-start}
  .topbar.is-open .burger span:nth-child(1){transform:translateY(3px) rotate(45deg)}
  .topbar.is-open .burger span:nth-child(2){transform:translateY(-3px) rotate(-45deg)}
}

/* =============================================================
   SIDE INDEX RAIL (desktop only)
   ============================================================= */
.rail{
  position:fixed;right:24px;top:50%;transform:translateY(-50%);
  z-index:40;
  display:none;
}
@media (min-width:1180px){.rail{display:block}}
.rail ol{
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:14px;
}
.rail li{
  display:flex;align-items:center;gap:10px;
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gray-2);font-weight:600;
  cursor:pointer;
  transition:color .25s var(--ease), transform .25s var(--ease);
}
.rail li:hover{color:var(--black);transform:translateX(-4px)}
.rail__num{
  display:inline-block;width:34px;text-align:right;
  font-variant-numeric:tabular-nums;
}
.rail__lbl{
  display:inline-block;width:0;overflow:hidden;white-space:nowrap;
  transition:width .35s var(--ease), opacity .25s var(--ease);
  opacity:0;
}
.rail li.is-active{color:var(--red)}
.rail li.is-active .rail__lbl{width:80px;opacity:1}
.rail li.is-active::after{
  content:"";display:inline-block;width:18px;height:1px;background:var(--red);
}

/* =============================================================
   01 · HERO · Vídeo full-bleed cinematográfico
   ============================================================= */
.hero{
  position:relative;
  min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;justify-content:flex-end;
  background:var(--black);
  color:#fff;
  overflow:hidden;
  isolation:isolate;
  width:100%;max-width:100vw;
}
.hero__video,
.hero__poster{
  position:absolute;inset:0;z-index:-2;
  width:100%;height:100%;
  object-fit:cover;
  object-position:center;
  pointer-events:none;
}
.hero__poster{display:none}

/* Em mobile: imagem estática, vídeo escondido (não decodifica) */
@media (max-width:880px){
  .hero__video{display:none}
  .hero__poster{display:block}
}
.hero__overlay{
  position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(circle at 80% 20%, rgba(225,29,42,.35) 0%, transparent 55%),
    linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.35) 40%, rgba(0,0,0,.85) 100%);
  pointer-events:none;
}
.hero__inner{
  flex:1;
  max-width:var(--container);width:100%;
  margin:0 auto;
  padding:140px 28px 56px;
  display:flex;flex-direction:column;justify-content:flex-end;
  position:relative;z-index:1;
}
.hero .tag--light{color:#fff;opacity:.9}
.hero .display{
  color:#fff;
  text-shadow:0 2px 32px rgba(0,0,0,.5);
}
.hero .display em{color:var(--red)}
.hero__sub{
  font-size:clamp(1rem, 1.3vw, 1.12rem);
  color:rgba(255,255,255,.86);max-width:54ch;margin:0 0 28px;line-height:1.55;
  text-shadow:0 1px 12px rgba(0,0,0,.4);
}
.hero__sub strong, .hero strong{color:#fff !important;font-weight:600}
.hero__cta{display:flex;gap:14px;flex-wrap:wrap}
.btn--ghost-light{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.45);padding:15px 26px;border-radius:999px;font-weight:600;font-size:.95rem;display:inline-flex;align-items:center;gap:10px;transition:background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease)}
.btn--ghost-light:hover{background:#fff;color:var(--black);border-color:#fff}

.hero__bar{
  position:relative;z-index:1;
  background:rgba(0,0,0,.45);
  backdrop-filter:saturate(160%) blur(10px);
  -webkit-backdrop-filter:saturate(160%) blur(10px);
  border-top:1px solid rgba(255,255,255,.08);
}
.hero__bar-inner{
  max-width:var(--container);margin:0 auto;
  display:flex;align-items:center;gap:24px;flex-wrap:wrap;
  padding:18px 28px;
}
.hero__bar-lbl{
  font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.55);font-weight:600;
}
.hero__bar-val{
  font-size:1.3rem;font-weight:600;color:var(--red);
  font-variant-numeric:tabular-nums;letter-spacing:.04em;
}
.hero__bar-live{
  display:inline-flex;align-items:center;gap:8px;margin-left:auto;
  font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.65);font-weight:600;
}
.hero__bar-live .live__dot{
  width:7px;height:7px;border-radius:50%;background:#1ec27a;
  box-shadow:0 0 0 0 rgba(30,194,122,.6);
  animation:pulse 1.8s var(--ease) infinite;
}

.display{
  font-size:clamp(2.2rem, 5.6vw, 4.8rem);
  font-weight:600;letter-spacing:-.025em;line-height:1.1;
  margin:20px 0 24px;
  color:var(--black);
}
.display__line{display:block;padding:.04em 0}
.display__line em{
  font-style:normal;color:var(--red);font-weight:600;
  position:relative;display:inline-block;
}
.hero__sub{
  font-size:clamp(1rem, 1.3vw, 1.12rem);
  color:var(--gray);max-width:48ch;margin:0 0 28px;line-height:1.55;
}
.hero__sub strong{color:var(--black);font-weight:600}

.hero__cta{display:flex;gap:14px;flex-wrap:wrap}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 26px;border-radius:999px;
  font-weight:700;font-size:.95rem;
  transition:transform .2s var(--ease), background .2s var(--ease), color .2s var(--ease), box-shadow .25s var(--ease);
  white-space:nowrap;
}
.btn svg{width:16px;height:16px;transition:transform .25s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.btn--red{background:var(--red);color:#fff;box-shadow:0 0 0 0 var(--red-glow)}
.btn--red:hover{background:var(--red-deep);box-shadow:0 16px 40px var(--red-glow);transform:translateY(-2px)}
.btn--ghost{background:transparent;color:var(--black);border:1.5px solid var(--black)}
.btn--ghost:hover{background:var(--black);color:var(--paper)}
.btn--lg{padding:18px 32px;font-size:1.02rem}
.btn--full{width:100%}


/* Marquee */
.marquee{
  background:var(--red);color:#fff;
  overflow:hidden;
  border-top:1px solid var(--red-deep);border-bottom:1px solid var(--red-deep);
  width:100%;max-width:100vw;
}
.marquee__track{
  display:flex;align-items:center;gap:28px;padding:14px 0;
  width:max-content;
  animation:scroll 42s linear infinite;
  font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:.86rem;
  transform:translate3d(0,0,0);
}
.marquee__track i{font-style:normal;opacity:.6;font-size:.8rem}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

@media (max-width:880px){
  .hero__inner{padding:110px 22px 40px}
  .hero__bar-inner{padding:14px 22px;gap:14px}
  .hero__bar-lbl{display:none}
  .hero__bar-val{font-size:1rem;flex:1}
  .hero__bar-live{margin-left:0;font-size:.62rem}
  .display{margin:14px 0 18px}
  .hero__sub{margin-bottom:22px;font-size:.96rem}
}
@media (max-width:480px){
  .hero__cta{flex-direction:column;align-items:stretch}
  .hero__cta .btn, .hero__cta .btn--ghost-light{width:100%;justify-content:center}
}

/* =============================================================
   02 · MANIFESTO
   ============================================================= */
.manifesto{
  background:var(--paper);
  padding:96px 28px;
}
.manifesto__grid{
  max-width:var(--container);margin:0 auto;
  display:grid;grid-template-columns:.9fr 1.4fr;gap:64px;
  align-items:start;
}
.manifesto__img{
  margin:0;border-radius:8px;overflow:hidden;
  position:sticky;top:90px;
  aspect-ratio:3/4;background:var(--black-2);
}
.manifesto__img img{width:100%;height:100%;object-fit:cover}
.manifesto__copy{padding-top:8px}
.manifesto__lead{
  font-size:clamp(1.2rem, 1.9vw, 1.6rem);
  font-weight:400;line-height:1.4;letter-spacing:-.012em;
  color:var(--black);
  margin:14px 0 24px;
}
.manifesto__lead em{font-weight:400;font-style:normal;color:var(--red)}
.dropcap{
  float:left;font-size:3.4rem;font-weight:600;line-height:.9;
  margin:4px 12px 0 -2px;color:var(--red);letter-spacing:-.02em;
}
.manifesto__copy p{font-size:1.04rem;color:var(--gray)}
.manifesto__pillars{
  list-style:none;margin:32px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
.manifesto__pillars li{
  background:var(--paper);
  padding:24px;display:flex;flex-direction:column;gap:10px;
}
.manifesto__pillars span{
  font-size:.74rem;letter-spacing:.2em;color:var(--red);font-weight:700;
}
.manifesto__pillars p{margin:0;color:var(--black);font-weight:500;font-size:.98rem;line-height:1.4}

@media (max-width:880px){
  .manifesto{padding:72px 22px}
  .manifesto__grid{grid-template-columns:1fr;gap:32px}
  .manifesto__img{position:static;aspect-ratio:16/10}
  .manifesto__pillars{grid-template-columns:1fr}
}

/* =============================================================
   03 · NÚMEROS
   ============================================================= */
.numbers{
  background:var(--black);color:var(--paper);
  padding:96px 28px;
  position:relative;overflow:hidden;
}
.numbers::before{
  content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size:60px 60px;
  pointer-events:none;
  mask-image:radial-gradient(ellipse at 30% 20%, #000 0%, transparent 75%);
}
.numbers__head{
  max-width:var(--container);margin:0 auto 48px;
  position:relative;
}
.numbers__head h2{color:var(--paper);max-width:22ch}
.numbers__head h2 em{color:var(--red)}

.numbers__grid{
  max-width:var(--container);margin:0 auto;
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.08);
  position:relative;
}
.ncard{
  background:var(--black);
  padding:36px 28px;display:flex;flex-direction:column;gap:14px;
  min-height:260px;justify-content:space-between;
  transition:background .3s var(--ease);
}
.ncard:hover{background:var(--black-2)}
.ncard__lbl{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gray-2);font-weight:600}
.ncard__num{
  font-size:clamp(2.4rem, 4.5vw, 4rem);
  font-weight:600;letter-spacing:-.03em;line-height:1;
  color:var(--paper);
  font-variant-numeric:tabular-nums;
}
.ncard--2 .ncard__num, .ncard--4 .ncard__num{color:var(--red)}
.ncard__suf{font-size:.84rem;color:var(--gray-2);font-weight:400}

@media (max-width:880px){
  .numbers{padding:72px 22px}
  .numbers__grid{grid-template-columns:repeat(2,1fr)}
  .ncard{min-height:200px;padding:24px 20px}
}
@media (max-width:480px){
  .numbers__grid{grid-template-columns:1fr}
}

/* =============================================================
   04 · COBERTURA · enxuta, focada em "vocês atendem minha rota?"
   ============================================================= */
.reach{
  background:var(--paper);
  padding:96px 28px;
  border-top:1px solid var(--line);
}
.reach__inner{
  max-width:var(--container);margin:0 auto;
  display:grid;grid-template-columns:.85fr 1.15fr;gap:64px;align-items:center;
}
.reach__copy h2{max-width:18ch;margin-bottom:20px}
.reach__lead{
  font-size:1rem;color:var(--gray);max-width:46ch;margin-bottom:24px;line-height:1.6;
}
.link-arrow{
  display:inline-flex;align-items:center;gap:10px;
  color:var(--black);font-weight:600;font-size:.95rem;
  border-bottom:1px solid var(--black);padding-bottom:3px;
  transition:color .15s var(--ease), border-color .15s var(--ease), gap .25s var(--ease);
}
.link-arrow svg{width:14px;height:14px;transition:transform .25s var(--ease)}
.link-arrow:hover{color:var(--red);border-color:var(--red);gap:14px}
.link-arrow:hover svg{transform:translateX(2px)}

.reach__list{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);
  border-radius:8px;overflow:hidden;
}
.reach__item{
  background:#fff;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:18px 20px;
  transition:background .2s var(--ease);
}
.reach__item:hover{background:var(--paper)}
.reach__city{
  font-size:1rem;font-weight:600;color:var(--black);letter-spacing:-.01em;
}
.reach__city em{
  font-style:normal;color:var(--gray);font-weight:400;font-size:.9em;
}
.reach__role{
  font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gray);font-weight:600;
}
.reach__item--main{background:var(--black);color:#fff}
.reach__item--main:hover{background:var(--black-2)}
.reach__item--main .reach__city{color:#fff}
.reach__item--main .reach__city em{color:rgba(255,255,255,.6)}
.reach__item--main .reach__role{
  background:var(--red);color:#fff;padding:4px 10px;border-radius:999px;
  letter-spacing:.16em;
}

@media (max-width:880px){
  .reach{padding:64px 22px}
  .reach__inner{grid-template-columns:1fr;gap:32px}
  .reach__list{grid-template-columns:1fr}
}


/* =============================================================
   05 · SERVIÇOS (editorial linha-a-linha)
   ============================================================= */
.services{
  background:var(--white);
  padding:96px 28px;
  border-top:1px solid var(--line);
}
.services__head{max-width:var(--container);margin:0 auto 48px}
.services__head h2 em{color:var(--red)}
.services__lead{
  font-size:1rem;color:var(--gray);max-width:54ch;margin:8px 0 0;line-height:1.55;
}

.srv{
  list-style:none;margin:0 auto;padding:0;
  max-width:var(--container);
  border-top:1px solid var(--line);
}
.srv__item{
  border-bottom:1px solid var(--line);
  position:relative;
}
.srv__head{
  display:grid;grid-template-columns:80px 1fr 48px;gap:32px;
  width:100%;text-align:left;
  padding:30px 8px;align-items:center;
  position:relative;overflow:hidden;
  transition:padding .35s var(--ease);
  cursor:pointer;
}
.srv__head::before{
  content:"";position:absolute;inset:0;
  background:var(--red);
  transform:translateX(-101%);
  transition:transform .5s var(--ease);
  z-index:0;
}
.srv__head:hover::before{transform:translateX(0)}
.srv__head:hover{padding-left:24px;padding-right:24px;color:#fff}
.srv__head:hover .srv__num,
.srv__head:hover .srv__plus,
.srv__head:hover h3,
.srv__head:hover p{color:#fff}
.srv__num,.srv__core,.srv__plus{position:relative;z-index:1;transition:color .35s var(--ease)}
.srv__num{
  font-size:.86rem;letter-spacing:.18em;color:var(--gray);font-weight:700;
}
.srv__core h3{font-size:clamp(1.2rem, 2vw, 1.7rem);margin:0 0 6px;font-weight:700;color:var(--black)}
.srv__core p{margin:0;font-size:.96rem;color:var(--gray);max-width:64ch}
.srv__plus{
  font-size:1.8rem;font-weight:300;color:var(--red);
  display:grid;place-items:center;line-height:1;
  transition:transform .4s var(--ease), color .35s var(--ease);
}
.srv__item.is-open .srv__plus{transform:rotate(45deg)}
.srv__item.is-open .srv__head::before{transform:translateX(0)}
.srv__item.is-open .srv__head{color:#fff;padding-left:24px;padding-right:24px}
.srv__item.is-open .srv__head .srv__num,
.srv__item.is-open .srv__head .srv__plus,
.srv__item.is-open .srv__head h3,
.srv__item.is-open .srv__head p{color:#fff}

.srv__body{
  max-height:0;overflow:hidden;
  transition:max-height .5s var(--ease);
}
.srv__item.is-open .srv__body{max-height:400px}
.srv__body-inner{
  padding:8px 8px 36px 88px;
  display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap;
  background:var(--paper);
  border-top:1px solid var(--line);
}
.srv__bullets{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 32px;
  flex:1;min-width:280px;
}
.srv__bullets li{
  display:flex;align-items:flex-start;gap:10px;
  font-size:.94rem;color:var(--black);font-weight:500;
}
.srv__bullets li::before{
  content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--red);margin-top:8px;flex-shrink:0;
}
.btn--sm{padding:11px 18px;font-size:.84rem}

@media (max-width:780px){
  .services{padding:72px 22px}
  .srv__head{grid-template-columns:50px 1fr 36px;gap:14px;padding:22px 6px}
  .srv__head:hover{padding-left:14px;padding-right:14px}
  .srv__body-inner{padding:8px 6px 28px 64px;flex-direction:column;align-items:flex-start}
  .srv__bullets{grid-template-columns:1fr}
  .srv__item.is-open .srv__head{padding-left:14px;padding-right:14px}
}

/* =============================================================
   06 · MOTORISTAS / RECRUIT BOX
   ============================================================= */
.recruit{
  position:relative;overflow:hidden;
  padding:96px 28px;
  color:#fff;
  isolation:isolate;
}
.recruit__media{
  position:absolute;inset:0;z-index:-2;
}
.recruit__media img{
  width:100%;height:100%;object-fit:cover;
  filter:grayscale(.3) brightness(.55);
}
.recruit::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(135deg, rgba(225,29,42,.85) 0%, rgba(225,29,42,.45) 60%, rgba(0,0,0,.85) 100%);
}
.recruit__inner{
  max-width:var(--container);margin:0 auto;
  display:flex;flex-direction:column;gap:18px;
}
.recruit__title{
  font-size:clamp(1.8rem, 4vw, 3rem);
  font-weight:600;letter-spacing:-.025em;line-height:1.05;
  color:#fff;margin:8px 0 10px;
}
.recruit__title span{display:block}
.recruit__title-em{color:#fff;opacity:.85}
.recruit__sub{
  font-size:1.1rem;color:rgba(255,255,255,.85);max-width:54ch;margin:0 0 16px;
}
.recruit__sub strong{color:#fff}
.recruit__cta{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.recruit__cta .btn--red{background:#000;color:#fff}
.recruit__cta .btn--red:hover{background:#fff;color:#000;box-shadow:0 16px 40px rgba(0,0,0,.4)}
.recruit__hint{font-size:.86rem;color:rgba(255,255,255,.75);font-style:italic}

@media (max-width:780px){.recruit{padding:72px 22px}}

/* =============================================================
   GALERIA HORIZONTAL
   ============================================================= */
.gallery{
  background:var(--paper);
  padding:96px 0 72px;
  overflow:hidden;
  width:100%;max-width:100vw;
}
.gallery__head{
  max-width:var(--container);margin:0 auto 40px;
  padding:0 28px;
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px;
}
.gallery__head h2{margin:0;flex:1;min-width:280px}
.gallery__cue{font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gray);font-weight:700}

.gallery__strip{
  display:flex;gap:18px;
  padding:0 28px;
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.gallery__strip::-webkit-scrollbar{display:none}
.gallery__strip figure{
  margin:0;flex:0 0 auto;
  width:clamp(260px, 34vw, 460px);aspect-ratio:3/4;
  position:relative;border-radius:6px;overflow:hidden;
  scroll-snap-align:start;
  background:var(--black-2);
}
.gallery__strip img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .8s var(--ease);
}
.gallery__strip figure:hover img{transform:scale(1.06)}
.gallery__strip figcaption{
  position:absolute;left:14px;bottom:14px;right:14px;
  font-size:.78rem;color:#fff;font-weight:600;letter-spacing:.04em;
  text-shadow:0 2px 12px rgba(0,0,0,.6);
}

@media (max-width:780px){.gallery{padding:72px 0 60px}}

/* =============================================================
   07 · CONTATO
   ============================================================= */
.contact{
  background:var(--paper);
  padding:96px 28px;
  border-top:1px solid var(--line);
}
.contact__grid{
  max-width:var(--container);margin:0 auto;
  display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start;
}
.contact__copy h2{font-size:clamp(2rem, 4.5vw, 3.4rem)}
.contact__lead{font-size:1.08rem;color:var(--gray);max-width:48ch;margin-bottom:32px}
.contact__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:22px}
.contact__list li{display:flex;flex-direction:column;gap:6px;padding-bottom:22px;border-bottom:1px solid var(--line)}
.contact__list li:last-child{border-bottom:0}
.contact__lbl{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gray);font-weight:700}
.contact__list a{color:var(--black);font-weight:600;font-size:1.05rem;border-bottom:1px solid transparent;align-self:flex-start;transition:color .15s var(--ease), border-color .15s var(--ease)}
.contact__list a:hover{color:var(--red);border-bottom-color:var(--red)}

/* Form */
.form{
  background:var(--black);color:var(--paper);
  padding:36px;border-radius:8px;
  display:flex;flex-direction:column;gap:14px;
}
.form h3{margin:0 0 8px;color:#fff;font-size:1.4rem}
.form label{display:flex;flex-direction:column;gap:6px;font-size:.78rem;letter-spacing:.08em;font-weight:600;color:var(--gray-2);text-transform:uppercase}
.form input,.form textarea,.form select{
  font:inherit;font-size:.98rem;font-weight:500;letter-spacing:0;text-transform:none;
  color:#fff;background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.12);
  padding:13px 14px;border-radius:6px;
  transition:border-color .15s var(--ease), background .15s var(--ease);
}
.form input::placeholder,.form textarea::placeholder{color:rgba(255,255,255,.3)}
.form input:focus,.form textarea:focus,.form select:focus{
  outline:0;border-color:var(--red);background:rgba(225,29,42,.06);
}
.form textarea{resize:vertical;min-height:80px;font-family:inherit}
.form select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:16px;padding-right:36px}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:520px){.form__row{grid-template-columns:1fr}}
.form__note{margin:6px 0 0;font-size:.78rem;color:var(--gray-2);text-align:center;letter-spacing:0;text-transform:none}

@media (max-width:880px){
  .contact{padding:72px 22px}
  .contact__grid{grid-template-columns:1fr;gap:40px}
}

/* =============================================================
   FOOTER
   ============================================================= */
.foot{
  background:var(--black);color:var(--paper);
  padding:64px 28px 32px;
}
.foot__top{
  max-width:var(--container);margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap;
  padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.08);
}
.foot__logo{display:flex;align-items:center;height:36px}
.foot__logo img{height:100%;width:auto}
.foot__nav{display:flex;gap:28px;flex-wrap:wrap}
.foot__nav a{font-size:.92rem;color:rgba(255,255,255,.78);font-weight:500;transition:color .15s var(--ease)}
.foot__nav a:hover{color:var(--red)}
.foot__base{
  max-width:var(--container);margin:0 auto;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:24px;
  color:rgba(255,255,255,.4);font-size:.78rem;
}
.foot__signoff{
  max-width:var(--container);margin:24px auto 0;
  padding-top:20px;border-top:1px solid rgba(255,255,255,.06);
  text-align:center;
  font-size:.8rem;color:rgba(255,255,255,.55);letter-spacing:.04em;
}
.foot__signoff a{
  color:#fff;font-weight:700;
  border-bottom:1px solid var(--red);
  padding-bottom:1px;
  transition:color .15s var(--ease), border-color .15s var(--ease);
}
.foot__signoff a:hover{color:var(--red);border-color:#fff}
.foot__signoff .heart{
  color:var(--red);display:inline-block;
  animation:heartbeat 1.6s ease-in-out infinite;
  margin:0 2px;
}
@keyframes heartbeat{
  0%,40%,100%{transform:scale(1)}
  20%{transform:scale(1.25)}
  60%{transform:scale(1.1)}
}

/* =============================================================
   WHATSAPP FLOAT
   ============================================================= */
.wa{
  position:fixed;right:22px;bottom:22px;z-index:60;
  width:58px;height:58px;border-radius:50%;
  background:#25D366;color:#fff;
  display:grid;place-items:center;
  box-shadow:0 12px 28px rgba(37,211,102,.4);
  transition:transform .2s var(--ease);
}
.wa:hover{transform:translateY(-2px) scale(1.04)}
.wa svg{width:28px;height:28px}

/* =============================================================
   PÁGINA TRABALHE CONOSCO
   ============================================================= */
.page-trab{background:var(--paper)}

.trab-hero{
  position:relative;overflow:hidden;
  min-height:88vh;min-height:88svh;
  display:flex;align-items:center;
  padding:120px 28px 80px;
  isolation:isolate;
}
.trab-hero__bg{position:absolute;inset:0;z-index:-2}
.trab-hero__bg img{width:100%;height:100%;object-fit:cover;filter:grayscale(.4) brightness(.5)}
.trab-hero::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg, rgba(0,0,0,.4) 0%, rgba(225,29,42,.3) 50%, rgba(10,10,10,.95) 100%);
}
.trab-hero__inner{
  max-width:var(--container);width:100%;margin:0 auto;
  color:#fff;
}
.trab-hero__inner .display{color:#fff;margin:24px 0 28px}
.trab-hero__sub{font-size:1.15rem;color:rgba(255,255,255,.85);max-width:54ch;margin:0 0 32px}
.trab-hero__sub strong{color:#fff}

/* WHY */
.why{padding:120px 28px;background:var(--paper)}
.why__head{max-width:var(--container);margin:0 auto 48px}
.why__head h2 em{color:var(--red)}
.why__grid{
  list-style:none;margin:0 auto;padding:0;
  max-width:var(--container);
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);
}
.why__grid li{
  background:var(--paper);padding:32px 24px;
  display:flex;flex-direction:column;gap:12px;min-height:240px;
  transition:background .3s var(--ease);
}
.why__grid li:hover{background:#fff}
.why__num{font-size:.78rem;letter-spacing:.2em;color:var(--red);font-weight:700}
.why__grid h3{margin:0 0 6px;font-size:1.08rem}
.why__grid p{margin:0;font-size:.94rem;color:var(--gray)}

@media (max-width:980px){.why__grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.why__grid{grid-template-columns:1fr}}

/* JOBS */
.jobs{padding:120px 28px;background:var(--paper-2)}
.jobs__head{max-width:var(--container);margin:0 auto 48px}
.jobs__list{
  list-style:none;margin:0 auto;padding:0;
  max-width:var(--container);
  border-top:1px solid var(--line);
}
.job{
  display:grid;grid-template-columns:80px 1fr auto;gap:32px;
  padding:28px 8px;align-items:center;
  border-bottom:1px solid var(--line);
  transition:padding .3s var(--ease), background .3s var(--ease);
}
.job:hover{padding-left:20px;background:#fff}
.job__num{font-size:.86rem;letter-spacing:.18em;color:var(--gray);font-weight:700}
.job:hover .job__num{color:var(--red)}
.job__core h3{margin:0 0 4px;font-size:1.2rem}
.job__core p{margin:0;color:var(--gray);font-size:.94rem}
.job__locs{
  font-size:.74rem;letter-spacing:.1em;color:var(--red);font-weight:700;
  text-transform:uppercase;
}

@media (max-width:780px){
  .jobs{padding:72px 22px}
  .job{grid-template-columns:50px 1fr;gap:14px}
  .job__locs{grid-column:2;color:var(--gray);font-size:.7rem}
}

/* PERKS */
.perks{
  background:var(--red);color:#fff;
  padding:48px 28px;
}
.perks ul{
  list-style:none;margin:0 auto;padding:0;
  max-width:var(--container);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:24px;
}
.perks li{display:flex;flex-direction:column;gap:4px;flex:1;min-width:160px}
.perks strong{font-size:1.04rem;font-weight:700}
.perks span{font-size:.82rem;color:rgba(255,255,255,.75);font-weight:500}

/* APPLY */
.apply{padding:120px 28px;background:var(--paper)}
.apply__grid{
  max-width:var(--container);margin:0 auto;
  display:grid;grid-template-columns:.8fr 1.2fr;gap:80px;align-items:start;
}
.apply__copy{position:sticky;top:90px}
.apply__copy h2{font-size:clamp(2rem, 4vw, 3rem)}
.apply__copy h2 em{color:var(--red);font-style:italic;font-weight:800}
.apply__steps{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-direction:column;gap:14px}
.apply__steps li{display:flex;gap:14px;align-items:flex-start;color:var(--black);font-size:.96rem}
.apply__steps span{
  display:inline-grid;place-items:center;
  width:28px;height:28px;flex-shrink:0;
  background:var(--red);color:#fff;border-radius:50%;
  font-size:.82rem;font-weight:800;
}

.form--apply{padding:40px;gap:16px}
.form--apply h3{font-size:1.5rem;margin-bottom:10px}

.file__field{
  position:relative;display:flex;align-items:center;gap:12px;
  border:1px dashed rgba(255,255,255,.25);
  background:rgba(255,255,255,.03);
  padding:14px;border-radius:6px;
  transition:border-color .2s var(--ease), background .2s var(--ease);
  cursor:pointer;
}
.file__field:hover{border-color:var(--red);background:rgba(225,29,42,.06)}
.file__field input{
  position:absolute;inset:0;opacity:0;cursor:pointer;
}
.file__placeholder{flex:1;color:rgba(255,255,255,.5);font-size:.94rem;font-weight:500;text-transform:none;letter-spacing:0}
.file__field.has-file .file__placeholder{color:#fff}
.file__btn{
  background:var(--red);color:#fff;
  padding:9px 16px;border-radius:999px;
  font-size:.78rem;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;
}

.check{
  flex-direction:row !important;align-items:flex-start;gap:10px !important;
  font-size:.84rem;color:var(--gray-2);text-transform:none;letter-spacing:0;font-weight:400;
  line-height:1.5;
}
.check input{
  flex-shrink:0;margin-top:3px;
  width:16px;height:16px;
  accent-color:var(--red);
}

@media (max-width:980px){
  .apply__grid{grid-template-columns:1fr;gap:40px}
  .apply__copy{position:static}
  .apply{padding:72px 22px}
  .form--apply{padding:28px}
}

/* FAQ */
.faq{padding:120px 28px;background:var(--paper-2)}
.faq__head{max-width:var(--container);margin:0 auto 48px}
.faq__list{
  list-style:none;margin:0 auto;padding:0;
  max-width:var(--container);
}
.faq__list li{border-bottom:1px solid var(--line)}
.faq__list details{padding:24px 0}
.faq__list summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  font-weight:700;font-size:1.05rem;color:var(--black);
  transition:color .15s var(--ease);
}
.faq__list summary::-webkit-details-marker{display:none}
.faq__list summary::after{
  content:"+";font-size:1.6rem;font-weight:300;color:var(--red);
  transition:transform .25s var(--ease);
}
.faq__list details[open] summary{color:var(--red)}
.faq__list details[open] summary::after{transform:rotate(45deg)}
.faq__list details p{margin:14px 0 0;color:var(--gray);max-width:80ch}

@media (max-width:780px){.faq{padding:72px 22px}}

/* =============================================================
   REVEAL ANIMATION
   ============================================================= */
[data-section]{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease), transform .8s var(--ease)}
[data-section].is-visible{opacity:1;transform:none}

/* =============================================================
   MOBILE OVERRIDES — carrosséis e enxuga textos
   ============================================================= */
@media (max-width:780px){

  /* Hero — mais enxuto */
  .hero .tag{font-size:.62rem;letter-spacing:.16em}
  .display__line em{display:inline}

  /* Manifesto — texto + pilares como carrossel */
  .manifesto{padding:64px 0}
  .manifesto__grid{padding:0 22px;gap:24px}
  .manifesto__lead{font-size:1.3rem;margin:14px 0 20px}
  .manifesto__copy p{font-size:.96rem}
  .dropcap{font-size:3.6rem;margin:4px 10px 0 -2px}

  .manifesto__pillars{
    display:flex !important;
    overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    gap:12px;
    border:0;background:transparent;
    margin:24px -22px 0;
    padding:0 22px 4px;
  }
  .manifesto__pillars::-webkit-scrollbar{display:none}
  .manifesto__pillars li{
    flex:0 0 70%;scroll-snap-align:start;
    border:1px solid var(--line);border-radius:10px;
    background:#fff;padding:20px;min-height:140px;
  }
  .manifesto__pillars::after{content:""}

  /* Serviços — accordion mais compacto, sem descrição no head */
  .srv__head .srv__core p{display:none}
  .srv__head{padding:18px 6px}
  .srv__head:hover{padding-left:14px;padding-right:14px}
  .srv__core h3{font-size:1.05rem;margin:0;line-height:1.2}
  .srv__num{font-size:.74rem}
  .srv__plus{font-size:1.4rem}
  .srv__item.is-open .srv__head{padding:18px 14px}
  .srv__body-inner{
    padding:10px 14px 22px;background:#fff;
    border-top:1px solid var(--line);
  }
  .srv__bullets{grid-template-columns:1fr;gap:6px}
  .srv__bullets li{font-size:.88rem}

  /* Números — cards mais compactos */
  .ncard{min-height:160px;padding:20px 18px;gap:8px}
  .ncard__num{font-size:3.4rem}
  .ncard__lbl{font-size:.62rem}
  .ncard__suf{font-size:.78rem}

  /* Recruit box — mais enxuto */
  .recruit__title{font-size:2.2rem}
  .recruit__sub{font-size:.98rem;margin-bottom:12px}

  /* Galeria — fotos menores */
  .gallery{padding:64px 0 48px}
  .gallery__head{padding:0 22px;margin-bottom:22px}
  .gallery__strip figure{width:74vw;aspect-ratio:4/5}
  .gallery__strip{padding:0 22px}

  /* Contato — form mais enxuto */
  .form{padding:24px}
  .form h3{font-size:1.2rem}
  .contact__lead{font-size:.98rem}

  /* Footer — mais compacto */
  .foot{padding:48px 22px 24px}
  .foot__top{gap:24px;padding-bottom:24px}
  .foot__nav{gap:16px}
  .foot__nav a{font-size:.86rem}
  .foot__base small{font-size:.7rem}

  /* ============== TRABALHE CONOSCO ============== */

  /* Hero da carreira — mais enxuto */
  .trab-hero{padding:96px 22px 56px;min-height:72vh}
  .trab-hero__sub{font-size:.98rem;margin-bottom:22px}

  /* Por que — carrossel */
  .why{padding:64px 0}
  .why__head{padding:0 22px;margin-bottom:24px}
  .why__grid{
    display:flex !important;
    overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    gap:12px;
    border:0;background:transparent;
    margin:0 -22px;
    padding:4px 22px 8px;
  }
  .why__grid::-webkit-scrollbar{display:none}
  .why__grid li{
    flex:0 0 76%;scroll-snap-align:start;
    border:1px solid var(--line);border-radius:10px;
    background:#fff;min-height:200px;padding:22px 20px;
  }
  .why::after{
    content:"deslize lateralmente →";
    display:block;text-align:center;
    font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;
    color:var(--gray);font-weight:700;
    margin:14px 22px 0;opacity:.7;
  }
  .why__grid h3{font-size:1rem}
  .why__grid p{font-size:.88rem}

  /* Vagas — mais compactas */
  .jobs{padding:64px 22px}
  .job{padding:18px 6px;gap:10px}
  .job__core h3{font-size:1rem}
  .job__core p{font-size:.86rem}
  .job__num{font-size:.74rem}

  /* Perks — wrap mais apertado */
  .perks{padding:32px 22px}
  .perks ul{gap:14px}
  .perks li{min-width:130px;flex:1 0 40%}
  .perks strong{font-size:.94rem}
  .perks span{font-size:.74rem}

  /* Apply form */
  .apply{padding:64px 22px}
  .apply__copy h2{font-size:2rem}
  .apply__copy p{font-size:.94rem}
  .form--apply{padding:22px}
  .form--apply h3{font-size:1.2rem}

  /* FAQ */
  .faq{padding:64px 22px}
  .faq__list summary{font-size:.96rem}
  .faq__list details p{font-size:.9rem}
}

/* Mobile: simplificar tudo que tem custo de paint/composite em scroll */
@media (max-width:880px){
  /* Sem backdrop-filter (caro em iOS Safari) */
  .topbar.is-scrolled,
  .topbar--solid{
    background:rgba(242,242,242,.98);
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
  .hero__bar{
    background:rgba(0,0,0,.85);
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
  /* Sem text-shadow (custa paint a cada frame de scroll) */
  .hero .display,
  .hero__sub{text-shadow:none}
  /* Sem transition de filter na logo (composite pesado) */
  .logo img{transition:none}
  /* Sem reveal animation (transform/opacity em cada seção causa jank) */
  [data-section]{opacity:1 !important;transform:none !important;transition:none !important}
  /* Reduz peso de fixed elements */
  .topbar{contain:layout style}
}

/* Telas muito pequenas */
@media (max-width:420px){
  .display{font-size:2.4rem}
  .recruit__title{font-size:1.9rem}
  .board__row{flex:0 0 86%}
  .why__grid li{flex:0 0 84%}
  .manifesto__pillars li{flex:0 0 80%}
  .gallery__strip figure{width:82vw}
}

/* =============================================================
   REDUCED MOTION
   ============================================================= */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  [data-section]{opacity:1;transform:none}
  .cursor{display:none !important}
}