/* =========================================================
   LUBE DISTRIBUIDORA — PAINEL DE SISTEMAS
   Sistema visual: "Cinematic Noir" com identidade Lube
   ========================================================= */

:root{
  /* --- Identidade Lube --- */
  --blue:        #1E2B8C;
  --blue-bright: #2C3FC4;
  --blue-deep:   #060B29;
  --blue-ink:    #030616;
  --blue-soft:   #0C1547;
  --red:         #EE1B24;
  --red-deep:    #B0121A;
  --cyan:        #00A0E9;

  /* --- Neutros --- */
  --white:  #FFFFFF;
  --ghost:  #FAFAFA;
  --off:    #E7EAF4;
  --muted:  #8A93AB;
  --muted-d:#5C6480;
  --line:   rgba(255,255,255,.14);
  --line-d: rgba(6,11,41,.12);

  /* --- Motion --- */
  --ease: cubic-bezier(.16,1,.3,1);
  --ease-io: cubic-bezier(.65,.05,.36,1);

  --pad: clamp(1.25rem, 4vw, 4rem);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--blue-ink);
  color:var(--off);
  font-family:'Archivo',-apple-system,'Segoe UI',sans-serif;
  font-weight:400;
  letter-spacing:-.01em;
  overflow-x:hidden;
}
body.is-loading{ overflow:hidden; height:100vh; }
body.menu-open{ overflow:hidden; }

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

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,p,blockquote,figure{ margin:0; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }

.mono{
  font-family:'JetBrains Mono','Consolas',monospace;
  font-size:.75rem; letter-spacing:.16em; text-transform:uppercase; font-weight:500;
}
.ital{ font-style:italic; font-weight:100; }

/* ---------- Máscaras de texto ---------- */
.mask{ display:block; overflow:hidden; position:relative; }
.mask > span{
  display:inline-block;
  transform:translateY(110%);
  transition:transform 1.15s var(--ease);
}
.mask > span.in{ transform:translateY(0); }

/* ---------- Reveal genérico ---------- */
[data-reveal]{
  opacity:0; transform:translateY(28px);
  transition:opacity .9s var(--ease), transform 1.05s var(--ease);
}
[data-reveal].in{ opacity:1; transform:none; }
.mask > [data-reveal]{ opacity:1; transform:translateY(110%); }
.mask > [data-reveal].in{ transform:translateY(0); }

/* =========================================================
   GRAIN
   ========================================================= */
.grain{
  position:fixed; inset:-150%; z-index:9000; pointer-events:none;
  opacity:.15; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1.1s steps(4) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)} 25%{transform:translate(-2%,1%)}
  50%{transform:translate(1%,-2%)} 75%{transform:translate(-1%,2%)}
  100%{transform:translate(0,0)}
}

/* =========================================================
   CORTINA DE ENTRADA
   ========================================================= */
.curtain{
  position:fixed; inset:0; z-index:8000;
  background:var(--blue-ink);
  display:grid; place-items:center;
  transition:transform 1.2s var(--ease);
}
.curtain::after{
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse at center, rgba(30,43,140,.55) 0%, rgba(6,11,41,.85) 55%, rgba(3,6,22,.98) 100%);
}
.curtain__inner{
  position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:center; gap:1.9rem;
  padding:0 var(--pad);
}

/* ---- logotipo completo, em movimento ---- */
.curtain__logo{
  position:relative; overflow:hidden;
  display:flex; align-items:center; gap:clamp(.8rem,1.6vw,1.3rem);
  padding:.4rem .6rem;
  animation:logoFloat 2.8s var(--ease-io) infinite alternate;
}
@keyframes logoFloat{
  from{ transform:translateY(5px) }
  to  { transform:translateY(-5px) }
}

.curtain__mark{
  width:clamp(52px,8vw,88px); display:block; flex:none;
  animation:markBeat 2.1s var(--ease) infinite;
  transform-origin:60% 60%;
}
@keyframes markBeat{
  0%  { transform:scale(1)    rotate(0deg) }
  35% { transform:scale(1.07) rotate(-4deg) }
  70% { transform:scale(.99)  rotate(1.5deg) }
  100%{ transform:scale(1)    rotate(0deg) }
}

.curtain__word{ display:flex; flex-direction:column; line-height:1; }
.curtain__word strong{
  font-size:clamp(2.1rem,5.2vw,3.6rem); font-weight:900; letter-spacing:-.04em;
  color:#fff;
  animation:wordIn 1s var(--ease) both;
}
.curtain__word em{
  font-style:normal; font-weight:300;
  font-size:clamp(.6rem,1.15vw,.82rem); letter-spacing:.42em; text-transform:uppercase;
  color:rgba(255,255,255,.62); margin-top:.5rem;
  animation:wordIn 1s var(--ease) .12s both;
}
@keyframes wordIn{
  from{ opacity:0; transform:translateY(16px) }
  to  { opacity:1; transform:none }
}

/* brilho que atravessa o logotipo */
.curtain__shine{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(105deg,
    transparent 35%, rgba(255,255,255,.34) 48%, rgba(255,255,255,.06) 56%, transparent 66%);
  transform:translateX(-120%);
  animation:shine 2.6s var(--ease-io) infinite;
}
@keyframes shine{
  0%  { transform:translateX(-120%) }
  55% { transform:translateX(120%) }
  100%{ transform:translateX(120%) }
}

/* ---- progresso ---- */
.curtain__bar{
  width:min(260px,52vw); height:2px; background:rgba(255,255,255,.14); overflow:hidden;
}
.curtain__bar i{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg, var(--blue-bright), var(--red));
  transition:width .25s linear;
}
.curtain__count{
  font-size:.72rem; color:var(--muted); letter-spacing:.3em;
}

body.loaded .curtain{ transform:translateY(-101%); }

/* =========================================================
   NAVBAR — marca centralizada
   ========================================================= */
.nav{
  position:fixed; top:0; left:0; width:100%; z-index:100;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  padding:1.5rem var(--pad);
  color:#fff;
  pointer-events:none;              /* permite ler a superfície de fundo */
}
.nav a,.nav button{ pointer-events:auto; }
.nav__side{ display:flex; align-items:center; }
.nav__side--r{ justify-content:flex-end; }

.nav__side--l,.nav__brand,.nav__side--r{ transition:color .5s var(--ease); }
.nav.is-light-l .nav__side--l{ color:var(--blue-ink); }
.nav.is-light-c .nav__brand{ color:var(--blue-ink); }
.nav.is-light-r .nav__side--r{ color:var(--blue-ink); }

.nav__status{ display:flex; align-items:center; gap:.55rem; font-size:.66rem; opacity:.72; }
.nav__status i{
  width:6px; height:6px; background:#25D07A; display:block; border-radius:50%;
  animation:pulse 2.4s var(--ease-io) infinite;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(37,208,122,.55) }
  70%{ box-shadow:0 0 0 9px rgba(37,208,122,0) }
  100%{ box-shadow:0 0 0 0 rgba(37,208,122,0) }
}

.nav__brand{ display:flex; align-items:center; gap:.8rem; justify-self:center; }
.nav__mark{ width:34px; display:block; position:relative; flex:none; }
.nav__mark .mark{ display:block; transition:opacity .45s var(--ease); }
.nav__mark .mark--dark{ position:absolute; inset:0; opacity:0; }
.nav.is-light-c .nav__mark .mark--light{ opacity:0; }
.nav.is-light-c .nav__mark .mark--dark{ opacity:1; }
.nav__brandtext{
  font-weight:900; font-size:1.12rem; letter-spacing:-.03em; line-height:1;
  display:flex; flex-direction:column;
}
.nav__brandtext em{
  font-style:normal; font-weight:300; font-size:.58rem;
  letter-spacing:.22em; text-transform:uppercase; opacity:.75; margin-top:3px;
}

.nav__links{ display:flex; gap:2.5rem; }
.nav__links a{
  position:relative; font-size:.98rem; font-weight:500; letter-spacing:-.02em;
  padding-bottom:2px;
}
.nav__links a::after{
  content:''; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:currentColor; transform:scaleX(0); transform-origin:right;
  transition:transform .6s var(--ease);
}
.nav__links a:hover::after{ transform:scaleX(1); transform-origin:left; }

.nav__burger{ display:none; width:30px; height:18px; position:relative; }
.nav__burger span{
  position:absolute; left:0; width:100%; height:2px; background:currentColor;
  transition:transform .5s var(--ease), opacity .3s;
}
.nav__burger span:first-child{ top:2px; }
.nav__burger span:last-child{ bottom:2px; }
.nav__burger[aria-expanded="true"] span:first-child{ transform:translateY(6px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:last-child{ transform:translateY(-6px) rotate(-45deg); }

.menu{
  position:fixed; inset:0; z-index:99; background:var(--blue-ink);
  display:flex; flex-direction:column; justify-content:center; gap:1rem;
  padding:0 var(--pad);
  clip-path:inset(0 0 100% 0);
  transition:clip-path .9s var(--ease);
  pointer-events:none;
}
.menu.open{ clip-path:inset(0 0 0 0); pointer-events:auto; }
.menu a{
  font-size:13vw; font-weight:900; letter-spacing:-.04em; line-height:.95;
  text-transform:uppercase; color:#fff;
  opacity:0; transform:translateY(30px);
  transition:opacity .6s var(--ease), transform .8s var(--ease), color .3s;
}
.menu.open a{ opacity:1; transform:none; }
.menu.open a:nth-child(1){ transition-delay:.12s }
.menu.open a:nth-child(2){ transition-delay:.2s }
.menu.open a:nth-child(3){ transition-delay:.28s }
.menu a:active{ color:var(--red); }

/* =========================================================
   TELA DE ACESSO (gate)
   ========================================================= */
body:not(.autenticado){ overflow:hidden; height:100vh; }
body:not(.autenticado) main,
body:not(.autenticado) .foot,
body:not(.autenticado) .nav{ display:none; }

.gate{
  position:fixed; inset:0; z-index:7000;
  display:none; place-items:center;
  padding:calc(var(--pad) + 1rem) var(--pad);
  overflow-y:auto;
}
.gate.is-on{ display:grid; }
.gate__bg{
  position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(ellipse at 50% 35%, rgba(44,63,196,.42) 0%, rgba(10,17,64,.9) 55%, rgba(3,6,22,.99) 100%),
    var(--blue-ink);
}
.gate__bg::after{
  content:''; position:absolute; inset:0; opacity:.35;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:clamp(60px,8vw,120px) clamp(60px,8vw,120px);
  mask-image:radial-gradient(ellipse at center, #000 20%, transparent 78%);
}

.gate__box{
  width:min(100%,430px);
  display:flex; flex-direction:column;
  animation:gateIn 1s var(--ease) both;
}
@keyframes gateIn{ from{ opacity:0; transform:translateY(24px) } to{ opacity:1; transform:none } }

.gate__logo{ display:flex; align-items:center; gap:.9rem; margin-bottom:2.25rem; }
.gate__mark{ width:44px; display:block; flex:none; }
.gate__word{ display:flex; flex-direction:column; line-height:1; }
.gate__word strong{ font-size:1.5rem; font-weight:900; letter-spacing:-.04em; color:#fff; }
.gate__word em{
  font-style:normal; font-weight:300; font-size:.55rem; letter-spacing:.26em;
  text-transform:uppercase; color:rgba(255,255,255,.6); margin-top:4px;
}

.gate__title{
  font-size:clamp(2.1rem,6vw,3.1rem); font-weight:900; line-height:.9;
  letter-spacing:-.04em; text-transform:uppercase; color:#EDEFF7;
}
.gate__title span{ font-weight:200; color:#B9C0DA; }
.gate__lead{
  margin:1rem 0 2.25rem; font-size:.95rem; font-weight:300; line-height:1.55;
  color:rgba(255,255,255,.6);
}

/* alternador entrar / primeiro acesso */
.gate__modos{
  position:relative; display:flex; gap:.35rem; margin-bottom:1.75rem;
  border-bottom:1px solid rgba(255,255,255,.14);
}
.gate__modo{
  flex:1; padding:.85rem .5rem; font-size:.92rem; font-weight:600;
  letter-spacing:-.01em; color:rgba(255,255,255,.45);
  transition:color .4s var(--ease);
}
.gate__modo.is-on{ color:#fff; }
.gate__modo:hover{ color:rgba(255,255,255,.8); }
.gate__modo-barra{
  position:absolute; bottom:-1px; left:0; height:2px; width:50%;
  background:var(--red);
  transition:transform .55s var(--ease);
}
.gate__modos.no-segundo .gate__modo-barra{ transform:translateX(100%); }

/* formularios */
.gate__form{ display:none; }
.gate__form.is-on{ display:block; animation:formIn .5s var(--ease) both; }
@keyframes formIn{ from{ opacity:0; transform:translateY(12px) } to{ opacity:1; transform:none } }

/* cadastro enviado */
.gate__ok{ display:none; text-align:center; padding:1rem 0 .5rem; }
.gate__ok.is-on{ display:block; animation:formIn .6s var(--ease) both; }
.gate__ok-icone{
  display:grid; place-items:center; width:56px; height:56px; margin:0 auto 1.25rem;
  border:2px solid #25D07A; color:#25D07A; border-radius:50%;
}
.gate__ok-icone svg{ width:26px; height:26px; }
.gate__ok h2{
  font-size:1.5rem; font-weight:900; letter-spacing:-.03em;
  text-transform:uppercase; color:#fff; margin-bottom:.75rem;
}
.gate__ok p{ color:rgba(255,255,255,.66); font-weight:300; line-height:1.6; font-size:.95rem; }
.gate__voltar{
  margin-top:1.75rem; font-family:'JetBrains Mono','Consolas',monospace;
  font-size:.66rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--red); padding-bottom:2px; position:relative;
}
.gate__voltar::after{
  content:''; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:right;
  transition:transform .5s var(--ease);
}
.gate__voltar:hover::after{ transform:scaleX(1); transform-origin:left; }

.gate__field{ display:block; margin-bottom:1.25rem; }
.gate__field > .mono{ display:block; color:var(--muted); margin-bottom:.6rem; font-size:.66rem; }
.gate .search__field{
  background:rgba(255,255,255,.04);
  border-color:rgba(255,255,255,.16);
  padding:.95rem 1.1rem;
}
.gate .search__field:focus-within{
  border-color:rgba(255,255,255,.3);
  box-shadow:0 22px 55px -28px rgba(44,63,196,.9);
}
.gate .search__field input{
  flex:1; min-width:0; border:0; outline:0; background:none; padding:0;
  font-family:inherit; font-size:1rem; font-weight:500; letter-spacing:-.01em; color:#fff;
}
.gate .search__field input::placeholder{ color:rgba(255,255,255,.32); font-weight:300; }
.gate__suffix{
  flex:none; color:rgba(255,255,255,.38); font-size:.66rem;
  transition:opacity .3s var(--ease), max-width .4s var(--ease);
  overflow:hidden; white-space:nowrap; max-width:8rem;
}
.gate__suffix.is-off{ opacity:0; max-width:0; }
.gate__eye{
  flex:none; width:26px; height:26px; display:grid; place-items:center;
  color:rgba(255,255,255,.42); transition:color .3s;
}
.gate__eye svg{ width:18px; height:18px; }
.gate__eye:hover,.gate__eye.is-on{ color:var(--red); }

.gate__erro{
  min-height:0; max-height:0; overflow:hidden; opacity:0;
  color:#FF7B82; font-size:.88rem; line-height:1.4;
  transition:max-height .4s var(--ease), opacity .35s var(--ease), margin .4s var(--ease);
}
.gate__erro.is-on{ max-height:5rem; opacity:1; margin:.25rem 0 .75rem; }

.gate__submit{
  margin-top:1.5rem; width:100%; justify-content:space-between;
  background:var(--red); border-color:var(--red); color:#fff;
  font-size:1.05rem; font-weight:700; padding:1.15rem 1.5rem;
  box-shadow:0 16px 36px -14px rgba(238,27,36,.75);
  transition:color .4s var(--ease), border-color .4s var(--ease),
             box-shadow .45s var(--ease), transform .45s var(--ease);
}
.gate__submit::before{ background:#FF3B43; }
.gate__submit:hover{
  border-color:#FF3B43; color:#fff;
  box-shadow:0 22px 48px -14px rgba(238,27,36,.95);
  transform:translateY(-2px);
}
.gate__submit:active{ transform:translateY(0); }
.gate__submit.is-loading{ opacity:.6; pointer-events:none; }
.gate__submit.is-loading .btn__label::after{
  content:''; display:inline-block; width:1em; text-align:left;
  animation:dots 1.2s steps(4) infinite;
}
@keyframes dots{ 0%{content:''} 25%{content:'.'} 50%{content:'..'} 75%{content:'...'} }

.gate__rodape{ margin-top:2rem; color:var(--muted-d); font-size:.62rem; line-height:1.9; }

/* ---------- barra da conta na navbar ---------- */
.conta{ display:flex; align-items:center; gap:1rem; font-size:.66rem; }
.conta__nome{ opacity:.75; letter-spacing:.14em; text-transform:uppercase; }
.conta__admin,.conta__sair{
  position:relative; font-family:inherit; font-size:.66rem; letter-spacing:.14em;
  text-transform:uppercase; padding-bottom:2px; color:inherit;
}
.conta__admin{ color:var(--red); font-weight:600; }
.conta__admin::after,.conta__sair::after{
  content:''; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:right;
  transition:transform .5s var(--ease);
}
.conta__admin:hover::after,.conta__sair:hover::after{ transform:scaleX(1); transform-origin:left; }
@media (max-width:820px){ .conta__nome{ display:none; } }

/* =========================================================
   HERO — apenas o título, centralizado
   ========================================================= */
.hero{
  position:relative; min-height:var(--app-h,100vh);
  display:grid; place-items:center;
  padding:9rem var(--pad) 13rem;
  overflow:hidden;
  isolation:isolate;
  text-align:center;
}
.hero__bg{
  position:absolute; inset:-10%; z-index:-1;
  will-change:transform; transform-style:preserve-3d;
  background:
    radial-gradient(ellipse at 50% 45%, rgba(44,63,196,.45) 0%, rgba(10,17,64,.85) 55%, rgba(3,6,22,.98) 100%),
    var(--blue-ink);
}
.hero__glow{
  position:absolute; left:50%; top:52%; width:min(120vw,1500px); aspect-ratio:1;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(238,27,36,.18) 0%, rgba(238,27,36,0) 62%);
  filter:blur(30px);
}
.hero__grid{
  position:absolute; inset:0; opacity:.4;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:clamp(60px,8vw,120px) clamp(60px,8vw,120px);
  mask-image:radial-gradient(ellipse at center, #000 20%, transparent 78%);
}

.hero__content{ position:relative; width:100%; will-change:transform; transform-style:preserve-3d; }
.hero__title{
  font-size:clamp(2.35rem, 11.5vw, 15rem);
  line-height:.86; letter-spacing:-.035em; font-weight:900;
  color:#EDEFF7; text-transform:uppercase;
}
.hero__title--alt > span{ font-weight:200; color:#B9C0DA; }

.hero__foot{
  position:absolute; left:0; bottom:clamp(1.75rem,4vh,3.25rem); width:100%;
  padding:0 var(--pad);
  display:flex; flex-direction:column; align-items:center; gap:clamp(1.25rem,3vh,2.25rem);
}
.hero__cue{ display:block; width:1px; height:clamp(34px,6vh,60px); background:var(--line); overflow:hidden; }
.hero__cue i{
  display:block; width:100%; height:100%; background:var(--red);
  transform:translateY(-100%); animation:cue 2.6s var(--ease-io) infinite;
}
@keyframes cue{ 0%{transform:translateY(-100%)} 55%{transform:translateY(0)} 100%{transform:translateY(100%)} }

.hero__meta{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:clamp(1.75rem,6vw,5.5rem);
  padding-top:1.5rem; border-top:1px solid var(--line);
  width:min(100%,900px);
}
.hero__meta div{ display:flex; flex-direction:column; align-items:center; gap:.35rem; }
.hero__meta span{ font-size:1.15rem; color:#fff; letter-spacing:.08em; }
.hero__meta small{ font-size:.72rem; color:var(--muted); letter-spacing:.05em; }

/* entrada escalonada */
[data-rise]{ opacity:0; transform:translateY(34px); }
body.loaded [data-rise]{
  opacity:1; transform:none;
  transition:opacity 1s var(--ease), transform 1.2s var(--ease);
}
body.loaded [data-rise="2"]{ transition-delay:.2s }
body.loaded [data-rise="3"]{ transition-delay:.32s }
body.loaded [data-rise="5"]{ transition-delay:.55s }
body.loaded [data-rise="6"]{ transition-delay:.66s }

/* =========================================================
   TRANSIÇÃO — CAMINHÃO
   ========================================================= */
.haul{ position:relative; height:240vh; background:var(--blue-ink); }
.haul__stage{
  position:sticky; top:0; height:var(--app-h,100vh);
  overflow:hidden; isolation:isolate;
}
.haul__dark,.haul__light{
  position:absolute; inset:0; display:grid; place-items:center;
}
.haul__dark{
  background:
    radial-gradient(ellipse at 50% 55%, rgba(30,43,140,.45) 0%, rgba(3,6,22,1) 72%),
    var(--blue-ink);
}
.haul__light{
  background:var(--white);
  clip-path:inset(0 0 100% 0);
  will-change:clip-path;
}

/* Tipografia grande da transição. As duas camadas usam exatamente a mesma
   posição: quando o caminhão desce, ele troca uma frase pela outra. */
.haul__type{
  text-align:center; line-height:.84;
  font-size:clamp(2.6rem, 10.5vw, 11rem);
  letter-spacing:-.045em; text-transform:uppercase; font-weight:900;
  color:#EDEFF7;
  will-change:transform;
  padding:0 var(--pad);
}
.haul__type span{ display:block; }
.haul__type em{
  display:block; font-style:italic; font-weight:200; text-transform:lowercase;
  letter-spacing:-.03em; color:#98A2CE;
}
.haul__type--dark{ color:var(--blue-ink); }
.haul__type--dark em{ color:var(--blue); }

.haul__road{
  position:absolute; left:0; width:100%; top:50%; height:2px;
  background:rgba(255,255,255,.1); overflow:hidden; z-index:3;
}
.haul__road i{
  position:absolute; inset:0;
  background:repeating-linear-gradient(to right, var(--red) 0 42px, transparent 42px 90px);
  transform-origin:left; transform:scaleX(0);
  will-change:transform;
}
.haul__truck{
  position:absolute; top:50%; left:0; z-index:4;
  width:clamp(320px, 42vw, 720px);
  transform:translate3d(-50vw,-50%,0);
  will-change:transform;
}
.haul__vehicle{ position:relative; animation:bob 1.1s ease-in-out infinite alternate; }
@keyframes bob{ from{transform:translateY(0)} to{transform:translateY(-4px)} }

.haul__speed{
  position:absolute; right:100%; top:38%; width:40vw; height:40%;
  display:flex; flex-direction:column; justify-content:space-around;
  padding-right:1.5rem; opacity:.85;
}
.haul__speed i{
  display:block; height:2px; background:linear-gradient(to left, rgba(238,27,36,.9), transparent);
  animation:dash 1s linear infinite;
}
.haul__speed i:nth-child(1){ width:70%; animation-delay:0s }
.haul__speed i:nth-child(2){ width:100%; animation-delay:.15s }
.haul__speed i:nth-child(3){ width:55%; animation-delay:.3s }
.haul__speed i:nth-child(4){ width:85%; animation-delay:.45s }
@keyframes dash{ 0%{transform:translateX(0); opacity:.2} 50%{opacity:1} 100%{transform:translateX(-40px); opacity:.1} }

/* =========================================================
   SISTEMAS
   ========================================================= */
.works{
  position:relative; z-index:2;
  background:var(--white); color:var(--blue-ink);
  padding:clamp(4rem,9vw,9rem) var(--pad) clamp(3.5rem,7vw,7rem);
}
.works__head{ max-width:1600px; margin:0 auto clamp(2.5rem,5vw,4.5rem); }
.works__bar{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:clamp(1.5rem,4vw,4rem); flex-wrap:wrap;
}
.works__title{
  font-size:clamp(2.8rem,8vw,10rem); line-height:.88; letter-spacing:-.04em;
  font-weight:900; text-transform:uppercase; color:var(--blue-ink);
}
.works__title .ital{ text-transform:lowercase; color:var(--blue); letter-spacing:-.03em; }

/* ---------- Painel de busca com linhas circulando a borda ---------- */
.search{ flex:1 1 340px; max-width:520px; padding-bottom:.5rem; }

.search__field{
  position:relative;
  display:flex; align-items:center; gap:.9rem;
  padding:1.15rem 1.25rem;
  cursor:text;
  background:var(--white);
  border:1px solid rgba(6,11,41,.16);
  transition:border-color .5s var(--ease), box-shadow .55s var(--ease);
}
.search__field:hover{ box-shadow:0 18px 45px -26px rgba(30,43,140,.6); }
.search__field:focus-within{
  border-color:rgba(6,11,41,.28);
  box-shadow:0 22px 55px -24px rgba(30,43,140,.75);
}

/* quatro feixes percorrendo as bordas: azul no topo/base, vermelho nas laterais */
.search__frame{ position:absolute; inset:-1px; overflow:hidden; pointer-events:none; }
.search__frame i{ position:absolute; display:block; will-change:transform; }

.search__frame i:nth-child(1),
.search__frame i:nth-child(3){
  left:0; height:2px; width:42%;
  background:linear-gradient(90deg, transparent, var(--blue) 45%, #5B6BE8 55%, transparent);
}
.search__frame i:nth-child(1){ top:0;    animation:beamR 5s linear infinite; }
.search__frame i:nth-child(3){ bottom:0; animation:beamL 5s linear infinite 2.5s; }

.search__frame i:nth-child(2),
.search__frame i:nth-child(4){
  top:0; width:2px; height:64%;
  background:linear-gradient(180deg, transparent, var(--red) 45%, #FF6068 55%, transparent);
}
.search__frame i:nth-child(2){ right:0; animation:beamD 5s linear infinite 1.25s; }
.search__frame i:nth-child(4){ left:0;  animation:beamU 5s linear infinite 3.75s; }

@keyframes beamR{ from{ transform:translateX(-100%) } to{ transform:translateX(238%) } }
@keyframes beamL{ from{ transform:translateX(238%) }  to{ transform:translateX(-100%) } }
@keyframes beamD{ from{ transform:translateY(-100%) } to{ transform:translateY(156%) } }
@keyframes beamU{ from{ transform:translateY(156%) }  to{ transform:translateY(-100%) } }

/* acelera quando o campo recebe atenção */
.search__field:hover .search__frame i{ animation-duration:3s; }
.search__field:focus-within .search__frame i,
.search.has-value .search__frame i{ animation-duration:1.9s; }

.search__icon{
  display:grid; place-items:center; width:22px; height:22px; flex:none;
  color:var(--blue);
  transition:color .45s var(--ease), transform .6s var(--ease);
}
.search__icon svg{ width:20px; height:20px; }
.search__field:focus-within .search__icon{ color:var(--red); transform:rotate(-12deg) scale(1.1); }

.search input{
  flex:1; min-width:0; border:0; outline:0; background:none;
  font-family:inherit; font-size:clamp(1rem,1.15vw,1.15rem); font-weight:500;
  letter-spacing:-.02em; color:var(--blue-ink);
  padding:0;
}
.search input::placeholder{
  color:#8E96AE; font-weight:300;
  transition:opacity .4s var(--ease), transform .5s var(--ease);
}
.search__field:focus-within input::placeholder{ opacity:.45; transform:translateX(6px); }
.search input::-webkit-search-cancel-button{ display:none; }

.search__clear{
  flex:none; width:26px; height:26px; display:grid; place-items:center;
  color:var(--muted-d);
  opacity:0; transform:scale(.6) rotate(-90deg); pointer-events:none;
  transition:opacity .35s var(--ease), transform .45s var(--ease), color .3s;
}
.search__clear svg{ width:15px; height:15px; }
.search.has-value .search__clear{ opacity:1; transform:none; pointer-events:auto; }
.search__clear:hover{ color:var(--red); }


/* ---------- Carrossel ---------- */
.rail{ position:relative; max-width:1600px; margin:0 auto; }
.rail__track{
  display:flex; gap:1.5rem;
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory;
  padding:6px 0 1.5rem;
  scrollbar-width:none; -ms-overflow-style:none;
  outline:none;
}
.rail__track::-webkit-scrollbar{ display:none; }
.rail__track.is-dragging{ scroll-snap-type:none; cursor:grabbing; }

.rail__empty{
  padding:3.5rem 0 2rem; max-width:46ch;
  font-size:1.05rem; font-weight:300; line-height:1.7; color:#454C63;
}
.rail__empty .mono{
  display:block; color:var(--blue-ink); font-weight:500; margin-bottom:.6rem;
  font-size:.85rem;
}
.rail__empty button{
  color:var(--blue); font-weight:600; border-bottom:1px solid rgba(30,43,140,.35);
  transition:color .3s, border-color .3s;
}
.rail__empty button:hover{ color:var(--red); border-color:var(--red); }

/* entrada escalonada dos cartões */
[data-stagger] .card{ opacity:0; transform:translateY(30px); }
[data-stagger].in .card{ opacity:1; transform:none; }
[data-stagger].in .card:nth-child(1){ transition-delay:.05s }
[data-stagger].in .card:nth-child(2){ transition-delay:.15s }
[data-stagger].in .card:nth-child(3){ transition-delay:.25s }
[data-stagger].in .card:nth-child(4){ transition-delay:.35s }

/* ---------- Cartão ---------- */
.card{
  position:relative; display:flex; flex-direction:column;
  flex:0 0 min(82vw, 520px);
  scroll-snap-align:start;
  background:#080E28; color:#fff;
  overflow:hidden; isolation:isolate;
  transition:transform .8s var(--ease), opacity .6s var(--ease);
}
@media (min-width:901px){ .card{ flex:0 0 clamp(380px, 40%, 620px); } }
.card.is-hidden{ display:none; }
.card.is-new{ animation:cardIn .8s var(--ease) both; }
@keyframes cardIn{ from{ opacity:0; transform:translateY(24px) scale(.97) } to{ opacity:1; transform:none } }

.card__visual{
  position:relative; aspect-ratio:16/10; overflow:hidden;
  display:grid; place-items:center;
  background:
    radial-gradient(ellipse at 50% 35%, rgba(44,63,196,.55) 0%, rgba(6,11,41,.95) 65%),
    #080E28;
}
.card__pattern{
  position:absolute; inset:0; opacity:.5;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(ellipse at center, #000 10%, transparent 75%);
  transition:transform 1.2s var(--ease);
}
.card__badge{
  position:relative; z-index:1; display:block;
  width:clamp(140px,38%,220px);
  transition:transform 1s var(--ease);
  will-change:transform;
  filter:drop-shadow(0 24px 50px rgba(0,0,0,.45));
}
.card__num{
  position:absolute; top:1.25rem; left:1.25rem; z-index:2;
  color:rgba(255,255,255,.35); font-size:.7rem;
}
.card:hover .card__badge{ transform:scale(1.07) translateY(-6px); }
.card:hover .card__pattern{ transform:scale(1.12); }

.card__info{
  position:relative; flex:1;
  padding:1.75rem clamp(1.25rem,2vw,2rem) 2rem;
  background:#080E28;
  display:flex; flex-direction:column;
}
.card__info::before{
  content:''; position:absolute; top:0; left:0; height:2px; width:100%;
  background:var(--red); transform:scaleX(0); transform-origin:left;
  transition:transform .9s var(--ease);
}
.card:hover .card__info::before{ transform:scaleX(1); }
.card__cat{ color:var(--red); margin-bottom:.9rem; font-size:.66rem; }
.card__title{
  font-size:clamp(1.35rem,1.9vw,2.1rem); font-weight:900; letter-spacing:-.035em;
  line-height:1.02; text-transform:uppercase;
}
.card__bottom{
  display:flex; align-items:flex-end; justify-content:space-between; gap:1.5rem;
  margin-top:auto; padding-top:1.25rem;
}
.card__desc{
  max-width:34ch; font-size:.92rem; font-weight:300; line-height:1.5;
  color:rgba(255,255,255,.55);
  transform:translateY(6px);
  transition:transform .7s var(--ease), color .5s;
}
.card:hover .card__desc{ transform:translateY(0); color:rgba(255,255,255,.8); }
.card__go{
  flex:none; width:50px; height:50px; border-radius:50%;
  background:#fff; color:var(--blue-ink);
  display:grid; place-items:center;
  opacity:0; transform:translate(8px,8px) scale(.85);
  transition:opacity .35s var(--ease), transform .55s var(--ease), background .35s;
}
.card__go svg{ width:19px; height:19px; }
.card:hover .card__go{ opacity:1; transform:none; }
.card__go:hover{ background:var(--red); }
.card:focus-visible{ outline:2px solid var(--red); outline-offset:4px; }

/* ---------- Controles do carrossel ---------- */
.rail__ctrl{
  max-width:1600px; margin:1.5rem auto 0;
  display:flex; align-items:center; gap:2rem;
}
.rail__bar{ flex:1; height:2px; background:var(--line-d); overflow:hidden; }
.rail__bar i{
  display:block; height:100%; width:35%; background:var(--blue);
  transform:translateX(0); transition:transform .25s linear, width .4s var(--ease);
}
.rail__btns{ display:flex; gap:.75rem; }
.cbtn{
  position:relative; width:54px; height:54px; border:1px solid var(--line-d);
  display:grid; place-items:center; color:var(--blue-ink);
  overflow:hidden; isolation:isolate;
  transition:color .4s var(--ease), border-color .4s var(--ease), opacity .4s;
}
.cbtn::before{
  content:''; position:absolute; inset:0; z-index:-1; background:var(--blue);
  transform:translateY(101%); transition:transform .5s var(--ease);
}
.cbtn:hover:not(:disabled){ color:#fff; border-color:var(--blue); }
.cbtn:hover:not(:disabled)::before{ transform:translateY(0); }
.cbtn svg{ width:20px; height:20px; transition:transform .45s var(--ease); }
.cbtn[data-next]:hover:not(:disabled) svg{ transform:translateX(4px); }
.cbtn[data-prev]:hover:not(:disabled) svg{ transform:translateX(-4px); }
.cbtn:disabled{ opacity:.25; cursor:default; }
.cbtn:focus-visible{ outline:2px solid var(--red); outline-offset:3px; }

/* =========================================================
   MANIFESTO
   ========================================================= */
.manifesto{
  position:relative; min-height:var(--app-h,100vh);
  background:var(--blue-deep);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:6rem var(--pad);
  overflow:hidden;
}
.manifesto::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse at 50% 50%, rgba(30,43,140,.5) 0%, rgba(6,11,41,0) 65%);
}
.manifesto > *{ position:relative; }
.manifesto__text{
  font-size:clamp(1.9rem,5.4vw,5.5rem); font-weight:500; line-height:1.06;
  letter-spacing:-.035em; color:#fff; max-width:20ch;
}
.manifesto__text em{ font-style:italic; font-weight:100; color:#9FA9D6; }
.manifesto__line{ width:min(320px,60vw); height:1px; background:rgba(255,255,255,.18); margin:3rem 0 2rem; }
.manifesto__line i{
  display:block; height:100%; width:100%; background:var(--red);
  transform:scaleX(0); transform-origin:left;
  transition:transform 1.4s var(--ease) .2s;
}
.manifesto__line.in i{ transform:scaleX(1); }
.manifesto__sign{ color:var(--muted-d); }

/* =========================================================
   RODAPÉ
   ========================================================= */
.foot{ background:var(--ghost); color:var(--blue-ink); padding:clamp(3rem,6vw,6rem) var(--pad) 3rem; }
.foot__hero{ border-bottom:1px solid var(--line-d); padding-bottom:2rem; margin-bottom:clamp(3rem,6vw,6rem); }
.foot__big{
  font-size:clamp(2.4rem,9.5vw,11rem); line-height:.88; letter-spacing:-.045em;
  font-weight:900; text-transform:uppercase; max-width:14ch;
}

/* ---------- Botão animado ---------- */
.btn{
  position:relative; display:inline-flex; align-items:center; gap:1rem;
  margin-top:2rem; padding:1.05rem 1.6rem;
  border:1px solid var(--blue-ink); color:var(--blue-ink);
  font-weight:600; font-size:1rem; letter-spacing:-.01em;
  overflow:hidden; isolation:isolate;
  transition:color .5s var(--ease), border-color .5s var(--ease);
}
.btn::before{
  content:''; position:absolute; inset:0; z-index:-1; background:var(--blue);
  transform:translateY(101%); transition:transform .6s var(--ease);
}
.btn:hover{ color:#fff; border-color:var(--blue); }
.btn:hover::before{ transform:translateY(0); }
.btn__icon{ display:grid; place-items:center; width:22px; height:22px; overflow:hidden; }
.btn__icon svg{ width:20px; height:20px; transition:transform .55s var(--ease); }
.btn:hover .btn__icon svg{ animation:arrowGo .6s var(--ease); }
@keyframes arrowGo{
  0%{ transform:translateX(0) } 45%{ transform:translateX(120%) }
  46%{ transform:translateX(-120%) } 100%{ transform:translateX(0) }
}
.btn:focus-visible{ outline:2px solid var(--red); outline-offset:3px; }

/* ---------- Contatos do TI (abre no clique) ---------- */
.contact{ position:relative; }

/* o ícone do botão vira seta para baixo quando aberto */
.contact.is-open .btn__icon svg{ transform:rotate(90deg); }
.contact.is-open .btn{ color:#fff; border-color:var(--blue); }
.contact.is-open .btn::before{ transform:translateY(0); }
.contact.is-open .btn:hover .btn__icon svg{ animation:none; transform:rotate(90deg); }

.contact__list{
  display:grid; grid-template-rows:0fr; opacity:0;
  transition:grid-template-rows .65s var(--ease), opacity .45s var(--ease);
}
.contact.is-open .contact__list{ grid-template-rows:1fr; opacity:1; }

.contact__inner{
  overflow:hidden; min-height:0;
  visibility:hidden; transition:visibility 0s linear .65s;
}
.contact.is-open .contact__inner{ visibility:visible; transition-delay:0s; }

.contact__hint{
  color:var(--muted-d); padding-top:1.5rem; margin-bottom:.85rem;
}

.contact__item{
  position:relative; z-index:0;
  display:flex; align-items:center; gap:1rem;
  width:min(100%,430px); padding:.95rem 1.15rem;
  border:1px solid var(--line-d); color:var(--blue-ink);
  overflow:hidden; isolation:isolate;
  opacity:0; transform:translateY(14px);
  transition:color .4s var(--ease), border-color .4s var(--ease),
             opacity .55s var(--ease), transform .65s var(--ease);
}
.contact__item + .contact__item{ margin-top:.6rem; }
.contact.is-open .contact__item{ opacity:1; transform:none; }
.contact.is-open .contact__item:nth-of-type(1){ transition-delay:.1s; }
.contact.is-open .contact__item:nth-of-type(2){ transition-delay:.2s; }

.contact__item::before{
  content:''; position:absolute; inset:0; z-index:-1; background:var(--blue);
  transform:translateY(101%); transition:transform .5s var(--ease);
}
.contact__item:hover{ color:#fff; border-color:var(--blue); }
.contact__item:hover::before{ transform:translateY(0); }
.contact__item:focus-visible{ outline:2px solid var(--red); outline-offset:3px; }

.contact__ico{ flex:none; width:24px; height:24px; display:grid; place-items:center; color:#25D366; }
.contact__item:hover .contact__ico{ color:#fff; }
.contact__ico svg{ width:22px; height:22px; transition:color .4s var(--ease); }

.contact__txt{ display:flex; flex-direction:column; gap:.15rem; flex:1; min-width:0; }
.contact__txt strong{ font-size:1.05rem; font-weight:700; letter-spacing:-.02em; }
.contact__txt em{
  font-style:normal; font-family:'JetBrains Mono','Consolas',monospace;
  font-size:.74rem; letter-spacing:.06em; opacity:.62;
}

.contact__go{ flex:none; width:20px; height:20px; display:grid; place-items:center; }
.contact__go svg{ width:18px; height:18px; transition:transform .45s var(--ease); }
.contact__item:hover .contact__go svg{ transform:translateX(4px); }

.foot__cols{
  max-width:1600px; margin:0 auto;
  display:grid; grid-template-columns:1fr 1fr 1fr; gap:3rem;
}
@media (max-width:900px){ .foot__cols{ grid-template-columns:1fr; gap:2.5rem; } }
.foot__col{ display:flex; flex-direction:column; gap:.6rem; align-items:flex-start; }
.foot__label{ color:var(--muted-d); margin-bottom:.75rem; }
.foot__col a{ font-size:1.05rem; font-weight:500; letter-spacing:-.02em; }

.wavy{ position:relative; padding-bottom:3px; }
.wavy::after{
  content:''; position:absolute; left:0; bottom:0; width:100%; height:4px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='4'%3E%3Cpath d='M0 2 Q5 0 10 2 T20 2' stroke='%23EE1B24' fill='none' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat:repeat-x;
  opacity:0; transform:translateY(4px);
  transition:opacity .35s var(--ease), transform .45s var(--ease);
}
.wavy:hover::after{ opacity:1; transform:none; }

.foot__mail{
  font-size:clamp(1.3rem,2.6vw,2rem) !important; font-weight:900 !important;
  letter-spacing:-.035em; color:var(--blue);
  border-bottom:2px solid transparent; transition:border-color .4s var(--ease), color .4s;
}
.foot__mail:hover{ border-color:var(--red); color:var(--red); }

.foot__col--end{ align-items:flex-start; }
@media (min-width:901px){ .foot__col--end{ align-items:flex-end; text-align:right; } }
.foot__mark{ width:56px; display:block; margin-bottom:1rem; }
.foot__rights{ color:var(--muted-d); line-height:1.8; font-size:.68rem; }

/* =========================================================
   RESPONSIVO
   ========================================================= */
@media (max-width:820px){
  .nav{ padding:1.1rem var(--pad); }
  .nav__status{ display:none; }
  .nav__links{ display:none; }
  .nav__burger{ display:block; }
  .nav__brandtext{ font-size:.95rem; }
  .nav__mark{ width:28px; }
  .hero{ padding:7rem var(--pad) 12rem; }
  .haul{ height:210vh; }
  .haul__truck{ width:min(92vw,460px); }
  .works__bar{ flex-direction:column; align-items:stretch; }
  .search{ flex:0 0 auto; width:100%; max-width:none; }
  .rail__ctrl{ gap:1.25rem; }
  .cbtn{ width:48px; height:48px; }
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; }
  .mask > span,[data-reveal],[data-rise]{ opacity:1 !important; transform:none !important; }
  .curtain{ display:none; }
}