/* ============================= FOOTER ============================= */

footer{
  display:block;
  width:100%;
  margin:0;
  padding:80px 5vw 35px;
  box-sizing:border-box;

  background:var(--black);
  border-top:1px solid rgba(216,216,216,.12);
}

.footer-top{
  width:100%;
  max-width:1320px;

  margin:0 auto;
  padding:0;

  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:60px;

  box-sizing:border-box;
}

footer .logo{
  flex:0 0 auto;
  margin:0;
  padding:0;

  font-size:15px;
  line-height:1.1;
  font-weight:800;
  letter-spacing:.02em;
}

footer .logo span{
  display:block;
  margin-top:3px;

  font-family:var(--mono);
  font-size:9px;
  font-weight:500;
  letter-spacing:.2em;
  opacity:.6;
}

.footer-links{
  display:flex;
  justify-content:flex-end;
  gap:80px;
  flex-wrap:wrap;

  margin:0;
  padding:0;
}

.footer-col{
  min-width:140px;
  margin:0;
  padding:0;
}

.footer-col h4{
  margin:0 0 14px;

  font-family:var(--mono);
  font-size:10.5px;
  line-height:1.2;
  font-weight:500;
  letter-spacing:.1em;
  text-transform:uppercase;

  color:var(--grey-light);
  opacity:.55;
}

.footer-col a{
  display:block;
  width:max-content;
  max-width:100%;

  margin:0;
  padding:5px 0;

  font-family:var(--sans);
  font-size:14px;
  line-height:1.4;

  color:var(--white);
  opacity:.85;
}

.footer-bottom{
  width:100%;
  max-width:1320px;

  margin:70px auto 0;
  padding:24px 0 0;

  border-top:1px solid rgba(216,216,216,.08);

  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;

  box-sizing:border-box;

  font-family:var(--mono);
  font-size:10px;
  line-height:1.5;
  color:var(--grey-light);
  opacity:.5;
}

@media(max-width:860px){

  footer{
    padding:70px 5vw 30px;
  }

  .footer-top{
    gap:50px;
  }

  .footer-links{
    gap:50px;
  }

}

@media(max-width:600px){

  footer{
    padding:60px 6vw 28px;
  }

  .footer-top{
    flex-direction:column;
    align-items:flex-start;
    gap:50px;
  }

  .footer-links{
    width:100%;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:40px 30px;
  }

  .footer-col{
    min-width:0;
  }

  .footer-col a{
    width:auto;
  }

  .footer-bottom{
    margin-top:55px;
    padding-top:20px;

    flex-direction:column;
    align-items:flex-start;
    gap:10px;
  }

}

@media(max-width:380px){

  .footer-links{
    grid-template-columns:1fr;
    gap:30px;
  }

}

/* ============================= REDUCED MOTION ============================= */

@media (prefers-reduced-motion: reduce){

  *{
    animation-duration:.01ms !important;
    transition-duration:.01ms !important;
  }

}

body.no-motion .hero-headline,
body.no-motion .diff-item,
body.no-motion .testi-card,
body.no-motion .p-step{
  opacity:1 !important;
  transform:none !important;
}



/* =============================
   FOOTER — CORREÇÃO DE LARGURA
   ============================= */

footer{
  width:100%;
  overflow:hidden;
  box-sizing:border-box;
}

.footer-top,
.footer-bottom{
  width:90%;
  max-width:1320px;
  margin-left:auto;
  margin-right:auto;
}

@media(max-width:600px){

  .footer-top,
  .footer-bottom{
    width:88%;
  }

}


/* =====================================================
   CORREÇÃO FOOTER — DESKTOP
   ===================================================== */

@media (min-width: 861px){

  footer{
    width:100% !important;
    margin:0 !important;
    padding:80px 5vw 35px !important;
    box-sizing:border-box !important;
  }

  footer .footer-top{
    width:100% !important;
    max-width:1320px !important;

    margin:0 auto !important;
    padding:0 !important;

    display:flex !important;
    justify-content:space-between !important;
    align-items:flex-start !important;

    box-sizing:border-box !important;
  }

  footer .footer-bottom{
    width:100% !important;
    max-width:1320px !important;

    margin:70px auto 0 !important;
    padding-top:24px !important;

    box-sizing:border-box !important;
  }

}


/* ============================= TOKENS ============================= */
:root{
  --black:#080808;
  --graphite:#171717;
  --grey-dark:#2A2A2A;
  --grey-light:#D8D8D8;
  --white:#F4F4F4;
    --accent-blue:#0096FF;
  --accent-green:#F00000;
  --sans:'Roboto',-apple-system,'Segoe UI',sans-serif;
  --display:'Big Shoulders Display','Arial Narrow',Arial,sans-serif;
--mono:'JetBrains Mono','Courier New',monospace;
--ease-out:cubic-bezier(.16,.84,.44,1);
  --ease-inout:cubic-bezier(.65,0,.35,1);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{background:var(--black);}
body{
  background:var(--black);color:var(--white);font-family:var(--sans);
  overflow-x:hidden;line-height:1.5;-webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;background:none;border:none;color:inherit;cursor:pointer;}
ul{list-style:none;}
.mono{font-family:var(--mono);}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;}
.skip-link{
  position:fixed;top:-60px;left:16px;background:var(--white);color:var(--black);
  padding:10px 18px;z-index:999;font-weight:700;transition:top .2s;font-size:13px;
}
.skip-link:focus{top:16px;}
:focus-visible{outline:2px solid var(--white);outline-offset:3px;}

/* section scaffolding */
section{position:relative;width:100%;}
.eyebrow{
  font-family:var(--mono);font-size:14px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--grey-light);opacity:.65;margin-bottom:18px;display:flex;align-items:center;gap:10px;
}
.eyebrow::before{content:'';width:20px;height:1px;background:var(--grey-light);opacity:.5;}
h1,h2,h3,h4,h5,h6{
  font-family:var(--display);
  font-weight:800;
  letter-spacing:-.015em;
  line-height:.98;
}
.wrap{max-width:1320px;margin:0 auto;padding:0 5vw;}
.label{font-family:var(--mono);font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey-light);opacity:.7;}

/* buttons */
.btn{
  display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12px;
  letter-spacing:.1em;text-transform:uppercase;padding:16px 26px;border:1px solid var(--grey-light);
  position:relative;overflow:hidden;transition:transform .3s var(--ease-out),background .3s;
}
.btn.primary{background:var(--white);color:var(--black);border-color:var(--white);}
.btn.primary:hover{transform:translateY(-2px);background:var(--grey-light);}
.btn.ghost{color:var(--white);}
.btn.ghost:hover{transform:translateY(-2px);background:rgba(244,244,244,.06);}
.btn-row{display:flex;gap:16px;flex-wrap:wrap;}

.underline-link{position:relative;padding-bottom:2px;}
.underline-link::after{
  content:'';position:absolute;left:0;bottom:0;width:100%;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease-out);
}
.underline-link:hover::after{transform:scaleX(1);}

/* ============================= HEADER ============================= */
header.site-header{
  position:fixed;top:0;left:0;width:100%;z-index:100;
  padding:22px 5vw;display:flex;justify-content:space-between;align-items:center;
  transition:background .4s,padding .4s,backdrop-filter .4s;
}
header.site-header.scrolled{
  background:rgba(8,8,8,.72);backdrop-filter:blur(10px);padding:14px 5vw;
  border-bottom:1px solid rgba(216,216,216,.08);
}
.logo{font-weight:800;font-size:15px;letter-spacing:.02em;line-height:1.1;}
.logo span{display:block;font-family:var(--mono);font-size:13px;letter-spacing:.2em;opacity:.6;font-weight:500;margin-top:2px;}
nav.main-nav{display:flex;gap:34px;}
nav.main-nav a{font-family:var(--mono);font-size:13px;letter-spacing:.1em;text-transform:uppercase;opacity:.85;}
.header-cta{display:flex;align-items:center;gap:24px;}
.header-cta .btn{padding:11px 20px;font-size:13px;}
.menu-toggle{display:none;flex-direction:column;gap:5px;width:26px;}
.menu-toggle span{height:1.5px;background:var(--white);width:100%;}
@media(max-width:860px){
  nav.main-nav{display:none;}
  .menu-toggle{display:flex;}
}

/* ============================= HERO ============================= */
.hero-pin-wrap{
  position:relative;
  height:500vh;
}
.hero-stage{
  position:sticky;
  top:0;
  height:100vh;
  width:100%;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  background:radial-gradient(
    ellipse at 50% 40%,
    #141414 0%,
    #080808 68%
  );
}
.hero-bg-grid{
  position:absolute;inset:0;opacity:.35;
  background-image:linear-gradient(to right,rgba(216,216,216,.06) 1px,transparent 1px),
                    linear-gradient(to bottom,rgba(216,216,216,.06) 1px,transparent 1px);
  background-size:60px 60px;
}
.hero-car{
  position:absolute;width:min(78vw,900px);left:50%;top:56%;transform:translate(-50%,-50%) scale(1);
  filter:drop-shadow(0 40px 80px rgba(0,0,0,.7));
}
.hero-car svg{width:100%;height:auto;}
.hero-content{position:relative;z-index:2;text-align:center;padding:0 20px;}
.hero-content .eyebrow{justify-content:center;}
.hero-headline{
  font-size:clamp(34px,7vw,84px);text-transform:uppercase;
}
.hero-headline .line2{color:var(--grey-light);}
.hero-sub{
  margin:22px auto 0;max-width:560px;color:var(--grey-light);font-size:15px;font-weight:400;line-height:1.6;
}
.hero-content .btn-row{justify-content:center;margin-top:34px;}
.hero-labels{position:absolute;inset:0;pointer-events:none;z-index:2;}
.hero-tag{
  position:absolute;font-family:var(--mono);font-size:14px;letter-spacing:.1em;color:var(--accent-green);
  opacity:0;border:1px solid rgba(95,163,123,.35);padding:6px 12px;
}
.hero-tag.t1{top:30%;left:14%;}
.hero-tag.t2{top:60%;left:10%;}
.hero-tag.t3{top:24%;right:14%;}
.hero-tag.t4{top:68%;right:12%;}
.hero-final{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:var(--black);opacity:0;z-index:5;
}
.hero-final h2{font-size:clamp(28px,5vw,54px);text-align:center;text-transform:uppercase;letter-spacing:-.01em;}

/* ============================= SCENE (dark full-bleed helper) ============================= */
.scene{
  min-height:100vh;display:flex;flex-direction:column;justify-content:center;
  padding:120px 5vw;background:var(--black);
}
.scene.alt{background:var(--graphite);}
.scene-title{font-size:clamp(30px,5.4vw,64px);text-transform:uppercase;max-width:900px;}
.scene-title .fade-word{display:inline-block;}
.scene-body{margin-top:26px;max-width:560px;color:var(--grey-light);font-size:16px;font-weight:400;}

/* ============================= PROVOCAÇÃO ============================= */
.provoke{height:220vh;position:relative;}
.provoke-stage{
  position:sticky;top:0;height:100vh;display:flex;align-items:center;justify-content:center;flex-direction:column;overflow:hidden;
}
.provoke-line{
  font-size:clamp(36px,8.4vw,110px);text-transform:uppercase;text-align:center;line-height:.96;
}
.provoke-line .out-word{color:var(--accent-blue);display:inline-block;}
.provoke-line2{
  font-size:clamp(36px,8.4vw,110px);text-transform:uppercase;text-align:center;position:absolute;opacity:0;color:var(--accent-green);
}
.ecu-ghost{
  position:absolute;inset:0;opacity:.05;background-size:cover;background-position:center;
  background:repeating-linear-gradient(90deg,#222 0 2px,transparent 2px 40px),
             repeating-linear-gradient(0deg,#222 0 2px,transparent 2px 40px);
}

/* ============================= DIAGNÓSTICO ============================= */
.diag-pin-wrap{height:260vh;position:relative;}
.diag-stage{position:sticky;top:0;height:100vh; width: 100vw;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;padding:0 1vw;}
.diag-stage h2{position:absolute;top:20px;text-align:center;font-size:clamp(24px,3.6vw,40px);text-transform:uppercase;z-index:3;}
.diag-car{position:relative;width:min(30vw,620px);}
.diag-car-svg {
  display: block;
  width: 500px;
  height: auto;
  max-width: 50%;
  margin: 0 auto;
}
.scan-line{position:absolute;left:0;width:100%;height:2px;background:var(--accent-green);top:0;box-shadow:0 0 18px rgba(95,163,123,.7);opacity:0;}
.diag-tag{
  position:absolute;font-family:var(--mono);font-size:14px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--white);opacity:0;display:flex;align-items:center;gap:8px;
}
.diag-tag::before{content:'';width:5px;height:5px;background:var(--accent-green);border-radius:50%;}
.diag-final{position:absolute;bottom:70px;text-align:center;font-family:var(--mono);font-size:16px;letter-spacing:.05em;color:var(--grey-light);opacity:0;max-width:520px;padding:0 20px;}

/* ============================= ECU ============================= */

.ecu-pin-wrap{
  height:260vh;
  position:relative;
}

.ecu-stage{
  position:sticky;
  top:0;
  height:90vh;

  display:flex;
  align-items:center;
  justify-content:center;

  overflow:hidden;
}

.ecu-board{
  width:min(55vw,720px);
  height:auto;

  display:flex;
  align-items:center;
  justify-content:center;

  transform:scale(.8);
  transform-origin:center center;

  margin:0 auto;
}

.ecu-board svg{
  display:block;
  width:100%;
  height:auto;

  max-width:720px;
}

.ecu-headline{
  position:absolute;
  bottom:90px;
  left:0;
  width:100%;

  text-align:center;
  font-size:clamp(22px,3.4vw,38px);
  text-transform:uppercase;

  opacity:0;
  padding:0 20px;
}

.ecu-readout{
  position:absolute;

  font-family:var(--mono);
  font-size:14px;
  color:var(--accent-green);

  opacity:0;
  letter-spacing:.05em;
}


.ecu-copy {
  position: absolute;
  bottom: 8%;
  left: 50%;
  transform: translateX(-50%);

  width: min(760px, 80vw);

  text-align: center;

  z-index: 10;

  display: flex;
  flex-direction: column;
  align-items: center;
}

.ecu-headline {
  position: static;
  margin: 0 0 18px 0;
  width: 100%;
}

.diag-final {
  position: static;
  margin: 0;
  width: min(680px, 100%);

  line-height: 1.6;
}
/* =============================
   ESTÁGIOS / PREPARAÇÃO
   ============================= */

.results-pin-wrap {
  height: 420vh;
  position: relative;
}

.results-stage {
  position: sticky;
  top: 0;

  height: 100vh;
  width: 100%;

  overflow: hidden;

  display: flex;
  flex-direction: column;

  justify-content: flex-start;
}


/* =============================
   TÍTULO — FAIXA PRÓPRIA
   ============================= */

.results-heading {
  position: relative;

  flex: 0 0 auto;

  width: 100%;
  box-sizing: border-box;

  padding: 70px 5vw 35px;

  z-index: 10;
}

.results-heading .eyebrow {
  margin-bottom: 10px;
}

.results-heading .scene-title {
  margin: 0;
  max-width: 850px;
}


/* =============================
   GALERIA HORIZONTAL
   ============================= */

.results-track {
  display: flex;

  flex: 1;

  height: auto;

  min-height: 0;

  will-change: transform;

  align-items: stretch;
}


/* =============================
   CARDS
   ============================= */

.result-card {

  flex: 0 0 68vw;

  max-width: 760px;

  height: calc(80vh - 210px);

  margin-right: 5vw;

  position: relative;

  box-sizing: border-box;

  background: linear-gradient(
    160deg,
    #1d1d1d,
    #0c0c0c
  );

  border: 1px solid rgba(216,216,216,.1);

  display: flex;
  flex-direction: column;
  justify-content: flex-end;

  padding: 36px;

  overflow: hidden;
}

.result-card:first-child {
  margin-left: 5vw;
}


/* =============================
   ARTE
   ============================= */

.result-car-art {
  position: absolute;

  top: 10%;
  left: 10%;
  right: 10%;

  opacity: .9;
}

.result-car-art svg {
  width: 100%;
}


/* =============================
   TÍTULOS
   ============================= */

.result-model {
  font-size: 26px;
  font-weight: 800;

  text-transform: uppercase;

  position: relative;
  z-index: 2;
}

.result-meta {
  font-family: var(--mono);

  font-size: 14px;

  color: var(--grey-light);

  opacity: .7;

  margin-top: 4px;

  position: relative;
  z-index: 2;
}


/* =============================
   NÚMEROS
   ============================= */

.result-figures {
  display: flex;

  gap: 28px;

  margin-top: 22px;

  position: relative;
  z-index: 2;
}

.result-figures div .k {
  font-family: var(--mono);

  font-size: 9.5px;

  letter-spacing: .08em;

  text-transform: uppercase;

  color: var(--grey-light);

  opacity: .6;
}

.result-figures div .v {
  font-size: 20px;

  font-weight: 800;

  margin-top: 4px;
}

.result-figures div .v.up {
  color: var(--accent-green);
}


/* =============================
   LISTA TÉCNICA DOS STAGES
   ============================= */

.result-specs {
  position: relative;

  z-index: 3;

  margin-top: 22px;

  padding-top: 18px;

  border-top: 1px solid rgba(216,216,216,.12);

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 9px 24px;
}

.result-spec {
  font-size: 12px;

  line-height: 1.4;

  color: #bdbdbd;
}

.result-spec::before {
  content: "—";

  color: var(--accent-green);

  margin-right: 8px;
}


/* =============================
   MOBILE
   ============================= */

@media(max-width:760px) {

  .results-pin-wrap {
    height: auto;
  }

  .results-stage {
    position: relative;

    height: auto;

    overflow: visible;

    padding: 0 0 60px;
  }

  .results-heading {
    padding: 100px 6vw 40px;
  }

  .results-track {
    display: flex;

    flex-direction: column;

    height: auto;

    transform: none !important;

    gap: 24px;
  }

  .result-card {
    flex: none;

    width: 90vw;

    max-width: none;

    height: auto;

    min-height: 540px;

    margin: 0 auto;
  }

  .result-card:first-child {
    margin-left: auto;
  }

  .result-specs {
    grid-template-columns: 1fr;
  }
}


/* =========================================================
   RESPONSIVIDADE MOBILE — CORREÇÃO FINAL
   13/08/2026
   ========================================================= */

@media (max-width: 760px) {

  /* =======================================================
     01 — HEADER
     Esconde apenas o CTA.
     Mantém o menu.
     ======================================================= */

  header.site-header .header-cta .btn {
    display: none !important;
  }

  header.site-header .header-cta {
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
  }

  header.site-header .menu-toggle {
    display: flex !important;
  }


  /* =======================================================
     02 — PROVOCAÇÃO
     
     Desktop:
       220vh

     Mobile:
       100vh

     A cena inteira ocupa exatamente uma tela.
     ======================================================= */

  body .provoke {
    height: 100vh !important;
    min-height: 100vh !important;
    max-height: 100vh !important;
  }

  body .provoke-stage {
    position: sticky !important;
    top: 0 !important;

    width: 100% !important;
    height: 100vh !important;
    min-height: 100vh !important;

    overflow: hidden !important;
  }

  body .provoke-line,
  body .provoke-line2 {
    width: 92vw !important;
    max-width: 92vw !important;

    font-size: clamp(32px, 10vw, 52px) !important;
    line-height: .95 !important;

    text-align: center !important;
  }


  /* =======================================================
     03 — DIAGNÓSTICO
     
     Desktop:
       260vh

     Mobile:
       100vh
     ======================================================= */

  body .diag-pin-wrap {
    height: 100vh !important;
    min-height: 100vh !important;
    max-height: 100vh !important;
  }

  body .diag-stage {
    position: sticky !important;
    top: 0 !important;

    width: 100% !important;
    height: 100vh !important;
    min-height: 100vh !important;

    padding: 0 !important;

    overflow: hidden !important;

    box-sizing: border-box !important;
  }

  body .diag-stage h2 {
    top: 55px !important;

    width: 90vw !important;
    max-width: 90vw !important;

    margin: 0 auto !important;

    font-size: clamp(22px, 7vw, 34px) !important;
    line-height: .98 !important;

    text-align: center !important;
  }


  /* =======================================================
     04 — CARRO DO DIAGNÓSTICO
     ======================================================= */

  body .diag-car {
    width: 82vw !important;
    max-width: 82vw !important;

    margin: 0 auto !important;
  }

  body .diag-car-svg {
    width: 82vw !important;
    max-width: 82vw !important;
    height: auto !important;

    margin: 0 auto !important;
  }


  /* =======================================================
     05 — BULLET POINTS / TAGS DO DIAGNÓSTICO
     
     Aqui está uma das correções importantes.

     Em vez de deixar o posicionamento horizontal
     original empurrar os textos para fora da tela,
     criamos duas colunas reais.

     ÍMPARES → esquerda
     PARES   → direita
     ======================================================= */

  body .diag-stage .diag-tag {
    width: 42vw !important;
    max-width: 42vw !important;

    font-size: 8px !important;
    line-height: 1.25 !important;

    letter-spacing: .04em !important;

    gap: 5px !important;

    white-space: normal !important;

    box-sizing: border-box !important;
  }

  body .diag-stage .diag-tag:nth-of-type(odd) {
    left: 4vw !important;
    right: auto !important;

    text-align: left !important;
    justify-content: flex-start !important;
  }

  body .diag-stage .diag-tag:nth-of-type(even) {
    left: auto !important;
    right: 4vw !important;

    text-align: right !important;
    justify-content: flex-end !important;
  }


  /* Caso os elementos sejam identificados por dtag1...dtag6.
     Isso vence qualquer left/right inline anterior. */

  body .diag-stage #dtag1,
  body .diag-stage #dtag3,
  body .diag-stage #dtag5 {
    left: 4vw !important;
    right: auto !important;
  }

  body .diag-stage #dtag2,
  body .diag-stage #dtag4,
  body .diag-stage #dtag6 {
    left: auto !important;
    right: 4vw !important;
  }


  /* =======================================================
     06 — TEXTO FINAL DO DIAGNÓSTICO
     ======================================================= */

  body .diag-stage .diag-final {
    width: 88vw !important;
    max-width: 88vw !important;

    padding: 0 !important;
    margin: 0 auto !important;

    font-size: 11px !important;
    line-height: 1.5 !important;

    box-sizing: border-box !important;
  }


  /* =======================================================
     07 — ÁREA POR ONDE O CARRO PASSA
     
     Reservamos uma faixa na esquerda.

     Não usamos .scene[aria-label] porque essa estrutura
     NÃO existe no seu código atual.
     ======================================================= */

  body #porQueDeliveryMap .wrap {
    padding-right: 5vw !important;
  }


  /* PROCESSO */

  body .process-scene .wrap {
    padding-left: 22vw !important;
    padding-right: 5vw !important;
  }

  body .process-scene .process-list {
    padding-left: 36px !important;
  }


  /* DIFERENCIAIS */

  body .diff-list {
    margin-left: 0 !important;
    padding-left: 0 !important;
  }

  body .diff-item {
    margin-left: 0 !important;
    padding-left: 0 !important;
  }


/* DEPOIMENTOS
   Volta ao posicionamento original.
   O carro já saiu desta área. */
body .testi-scene {
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}

body .testi-scene .testi-track {
  width: 100% !important;
}

  /* FAQ */

  body .faq-scene {
    padding-left: 22vw !important;
    padding-right: 5vw !important;

    box-sizing: border-box !important;
  }

  body .faq-list {
    width: 100% !important;
    max-width: none !important;

    margin-left: 0 !important;
  }


  /* =======================================================
     08 — CARRO DA ROTA
     
     O carro NÃO deve ficar no centro da tela no mobile.

     A trajetória já joga o carro para a esquerda usando
     valores em vw. Deixamos uma faixa lateral consistente
     para ele atravessar sem cobrir o conteúdo.
     ======================================================= */

  body #routeCar {
    width: 72px !important;
    left: 50% !important;
    top: 80%  !important;
    z-index: 40 !important;
    pointer-events: none !important;
  }


  /* =======================================================
     09 — O CONTEÚDO NÃO PODE FICAR POR BAIXO DO CARRO
     ======================================================= */

  body #porQueDeliveryMap .scene-title,
  body #porQueDeliveryMap .scene-body,
  body .process-scene .scene-title,
  body .process-scene .scene-body,
  body .diff-list,
  body .faq-list {
    position: relative !important;
    z-index: 2 !important;
  }


  /* =======================================================
     10 — TÍTULOS MOBILE
     ======================================================= */

  body .scene {
    padding-top: 90px;
    padding-bottom: 90px;
  }

}
/* =========================================================
   PROVA — GALERIA DE PROJETOS
   ========================================================= */

.proof-section{
  position:relative;
  width:100%;
  padding:120px 0 100px;
  background:var(--black);
  overflow:hidden;
}


/* ---------- Cabeçalho ---------- */

.proof-heading{
  width:min(1100px,90vw);
  margin:0 auto 55px;
}

.proof-heading .eyebrow{
  margin-bottom:22px;
}

.proof-heading .scene-title{
  max-width:800px;
}

.proof-intro{
  max-width:680px;
  margin-top:28px;
  color:var(--grey-light);
  font-size:15px;
  line-height:1.6;
}


/* =========================================================
   TRACK HORIZONTAL
   ========================================================= */

.proof-track{
  display:flex;
  gap:2px;

  width:100%;

  overflow-x:auto;
  overflow-y:hidden;

  padding:0 5vw 12px;

  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;

  scrollbar-width:thin;
  scrollbar-color:rgba(216,216,216,.2) transparent;
}

.proof-track::-webkit-scrollbar{
  height:4px;
}

.proof-track::-webkit-scrollbar-track{
  background:transparent;
}

.proof-track::-webkit-scrollbar-thumb{
  background:rgba(216,216,216,.2);
}


/* =========================================================
   CARD
   ========================================================= */

.proof-card{
  position:relative;

  flex:0 0 min(420px,72vw);

  scroll-snap-align:start;

  color:var(--white);

  text-decoration:none;

  background:#0c0c0c;

  transition:
    transform .45s var(--ease-out),
    opacity .45s var(--ease-out);
}


/* ---------- Imagem ---------- */

.proof-media{
  position:relative;

  width:100%;
  aspect-ratio:4 / 5;

  overflow:hidden;

  background:#111;
}

.proof-media img{
  width:100%;
  height:100%;

  object-fit:cover;

  display:block;

  transition:
    transform .7s var(--ease-out),
    filter .7s var(--ease-out);
}


/* ---------- Overlay ---------- */

.proof-media::after{
  content:"";

  position:absolute;
  inset:0;

  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,.02) 40%,
      rgba(0,0,0,.65) 100%
    );

  pointer-events:none;
}


/* ---------- Play ---------- */

.proof-play{
  position:absolute;

  left:50%;
  top:50%;

  transform:translate(-50%,-50%);

  width:72px;
  height:72px;

  display:flex;
  align-items:center;
  justify-content:center;

  border:1px solid rgba(255,255,255,.65);
  border-radius:50%;

  font-size:19px;
  line-height:1;

  padding-left:4px;

  color:var(--white);

  background:rgba(0,0,0,.18);

  backdrop-filter:blur(5px);

  z-index:2;

  transition:
    transform .35s var(--ease-out),
    background .35s var(--ease-out);
}


/* ---------- Instagram label ---------- */

.proof-instagram{
  position:absolute;

  left:24px;
  bottom:20px;

  z-index:3;

  font-family:var(--mono);
  font-size:9px;

  text-transform:uppercase;
  letter-spacing:.12em;

  color:var(--white);

  opacity:.65;
}


/* ---------- Informações ---------- */

.proof-info{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;

  gap:20px;

  padding:20px 4px 26px;
}

.proof-info > div{
  display:flex;
  flex-direction:column;
}

.proof-number{
  margin-bottom:7px;

  font-size:9px;
  letter-spacing:.1em;

  color:var(--grey-light);

  opacity:.5;
}

.proof-info h3{
  margin:0;

  font-size:19px;
  line-height:1.2;

  font-weight:600;
}

.proof-type{
  margin-top:3px;

  font-size:9px;
  letter-spacing:.1em;

  color:var(--grey-light);

  opacity:.55;
}


/* =========================================================
   HOVER
   ========================================================= */

@media (hover:hover){

  .proof-card:hover{
    transform:translateY(-5px);
  }

  .proof-card:hover .proof-media img{
    transform:scale(1.035);
    filter:brightness(1.08);
  }

  .proof-card:hover .proof-play{
    transform:translate(-50%,-50%) scale(1.08);
    background:rgba(255,255,255,.12);
  }

}


/* =========================================================
   RODAPÉ DA PROVA
   ========================================================= */

.proof-footer{
  width:min(1100px,90vw);

  margin:35px auto 0;

  padding-top:25px;

  border-top:1px solid rgba(216,216,216,.1);

  display:flex;
  justify-content:space-between;
  align-items:center;

  gap:30px;
}

.proof-footer-label{
  font-size:9px;
  letter-spacing:.12em;
  color:var(--grey-light);
  opacity:.45;
}

.proof-footer .underline-link{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase;
}


/* =========================================================
   TABLET
   ========================================================= */

@media(max-width:860px){

  .proof-section{
    padding:100px 0 80px;
  }

  .proof-heading{
    margin-bottom:45px;
  }

  .proof-card{
    flex-basis:min(390px,78vw);
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:600px){

  .proof-section{
    padding:90px 0 70px;
  }

  .proof-heading{
    width:88vw;
    margin-bottom:40px;
  }

  .proof-intro{
    font-size:14px;
    margin-top:22px;
  }

  .proof-track{
    padding-left:6vw;
    padding-right:6vw;
  }

  .proof-card{
    flex-basis:82vw;
  }

  .proof-play{
    width:60px;
    height:60px;
    font-size:16px;
  }

  .proof-info{
    padding:17px 3px 23px;
  }

  .proof-info h3{
    font-size:17px;
  }

  .proof-footer{
    width:88vw;

    margin-top:30px;

    flex-direction:column;
    align-items:flex-start;

    gap:18px;
  }

}


/* =========================================================
   MOBILE PEQUENO
   ========================================================= */

@media(max-width:380px){

  .proof-card{
    flex-basis:86vw;
  }

}

/* ============================= PROCESSO ============================= */
.process-scene{padding:140px 5vw;}
.process-list{margin-top:60px;max-width:760px;position:relative;padding-left:36px;}
.process-line{position:absolute;left:0;top:6px;bottom:6px;width:1px;background:rgba(216,216,216,.15);}
.process-line-fill{position:absolute;left:0;top:0;width:1px;background:var(--accent-green);height:0%;}
.p-step{position:relative;padding:34px 0;opacity:.35;transition:opacity .4s;}
.p-step.active{opacity:1;}
.p-step .pnum{font-family:var(--mono);font-size:14px;color:var(--accent-green);position:absolute;left:-36px;top:38px;}
.p-step .pnum::before{content:'';position:absolute;left:-4px;top:-24px;width:9px;height:9px;border-radius:50%;background:var(--grey-dark);}
.p-step.active .pnum::before{background:var(--accent-green);box-shadow:0 0 10px rgba(95,163,123,.6);}
.p-step h3{font-size:26px;text-transform:uppercase;}
.p-step p{color:var(--grey-light);font-size:14.5px;margin-top:8px;max-width:480px;font-weight:400;}

/* ============================= DIFERENCIAIS ============================= */
.diff-list{margin-top:56px;}
.diff-item{
  display:grid;grid-template-columns:80px 1fr;gap:24px;padding:34px 0;border-top:1px solid rgba(216,216,216,.1);
  opacity:0;transform:translateY(24px);
}
.diff-item:last-child{border-bottom:1px solid rgba(216,216,216,.1);}
.diff-item .dn{font-family:var(--mono);font-size:14px;color:var(--grey-light);opacity:.5;padding-top:4px;}
.diff-item h3{font-size:24px;text-transform:uppercase;}
.diff-item p{color:var(--grey-light);font-size:14px;font-weight:400;margin-top:6px;max-width:520px;}

/* ============================= MITOS ============================= */
.myths-pin-wrap{height:600vh;position:relative;background:var(--black);}
.myths-stage{position:sticky;top:0;height:100vh;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.myths-progress{position:absolute;top:40px;left:0;width:100%;text-align:center;font-family:var(--mono);font-size:14px;color:var(--grey-light);opacity:.5;z-index:3;}
.myth-panel{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:0;padding:0 8vw;text-align:center;}
.myth-lie{font-size:clamp(26px,5.2vw,58px);text-transform:uppercase;color:var(--grey-dark);}
.myth-truth{font-size:clamp(26px,5.2vw,58px);text-transform:uppercase;color:var(--white);margin-top:14px;}
.myth-truth span{color:var(--accent-green);}

<style>
/* =========================================================
   DEPOIMENTOS — CORREÇÃO COM TAG IMG
   ========================================================= */

.testi-track {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
  overflow: hidden !important;
}

/* CARD */
.testi-card {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: 520px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  flex: none !important;
  text-decoration: none !important;
  color: inherit;
  background-color: #111 !important;
}

/* CONTAINER DA IMAGEM E VÍDEO */
.testi-card .testi-media {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  z-index: 1 !important;
}

/* IMAGEM FÍSICA */
.testi-card .testi-media img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  
  /* Faz a imagem preencher o espaço sem distorcer (igual background cover) */
  object-fit: cover !important;
  object-position: center !important;
  z-index: 1 !important;
}

/* DEGRADÊ ESCURO POR CIMA DA IMAGEM */
.testi-card .testi-media:after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.05) 20%,
    rgba(0,0,0,0.10) 45%,
    rgba(0,0,0,0.92) 100%
  ) !important;
  z-index: 2 !important;
  pointer-events: none !important;
}

/* BOTÃO PLAY */
.testi-card .testi-play {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  z-index: 5 !important;
  transform: translate(-50%, -50%) !important;
  color: #fff !important;
}

/* VER REEL */
.testi-card .testi-reel {
  position: absolute !important;
  top: 24px !important;
  right: 24px !important;
  z-index: 5 !important;
  color: #fff !important;
}

/* TEXTO SOBRE A IMAGEM */
.testi-card .testi-overlay {
  position: absolute !important;
  top: auto !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 30px !important;
  box-sizing: border-box !important;
  z-index: 10 !important;
  color: #fff !important;
}

/* =========================================================
   TABLET E CELULAR
   ========================================================= */
@media (max-width: 900px) {
  .testi-track {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 600px) {
  .testi-track {
    grid-template-columns: 1fr !important;
  }
  .testi-card {
    height: 480px !important;
  }
}


/* =========================================================
   DEPOIMENTOS — CORREÇÃO FINAL DE PREENCHIMENTO DE IMAGEM
   ========================================================= */

/* Força o container do card testi-card a ter altura fixa e overflow hidden */
.testi-scene .testi-track .testi-card {
  position: relative !important;
  display: block !important;
  overflow: hidden !important;
  height: 520px !important; /* Altura fixa para o card */
  box-sizing: border-box !important;
}

/* Container absoluto da imagem que preenche o card INTEIRO */
.testi-scene .testi-track .testi-card .testi-media {
  position: absolute !important;
  inset: 0 !important; /* Preenche todo o card, de canto a canto */
  width: 100% !important;
  height: 100% !important;
  z-index: 1 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* A imagem física dentro do container, forçando o preenchimento de fundo */
.testi-scene .testi-track .testi-card .testi-media img {
  position: absolute !important;
  inset: 0 !important; /* Preenche todo o container testi-media */
  width: 100% !important;
  height: 100% !important;
  
  /* Mantém a proporção e preenche, cortando se necessário (igual background cover) */
  object-fit: cover !important; 
  object-position: center !important; /* Centraliza o corte */
  
  z-index: 1 !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  max-width: none !important; /* Evita compactação por max-width padrão */
  max-height: none !important;
}

/* Degradê de sobreposição (escurecimento) para legibilidade */
.testi-scene .testi-track .testi-card .testi-media:after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.05) 20%,
    rgba(0,0,0,0.10) 45%,
    rgba(0,0,0,0.92) 100%
  ) !important;
  z-index: 2 !important;
  pointer-events: none !important;
}

/* Garante que os elementos de texto e botão fiquem ACIMA da imagem */
.testi-scene .testi-track .testi-card .testi-play {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 5 !important;
  color: #fff !important;
}

.testi-scene .testi-track .testi-card .testi-reel {
  position: absolute !important;
  top: 24px !important;
  right: 24px !important;
  z-index: 5 !important;
  color: #fff !important;
}

.testi-scene .testi-track .testi-card .testi-overlay {
  position: absolute !important;
  bottom: 0 !important;
  width: 100% !important;
  padding: 30px !important;
  box-sizing: border-box !important;
  z-index: 10 !important;
  color: #fff !important;
}

/* ============================= FAQ ============================= */
.faq-scene{padding:140px 5vw;}
.faq-list{margin-top:56px;max-width:820px;border-top:1px solid rgba(216,216,216,.12);}
.faq-item{border-bottom:1px solid rgba(216,216,216,.12);}
.faq-q{
  width:100%;text-align:left;display:flex;justify-content:space-between;align-items:center;
  padding:26px 4px;font-size:17px;font-weight:600;
}
.faq-q .plus{font-family:var(--mono);font-size:18px;color:var(--grey-light);transition:transform .3s;}
.faq-item.open .plus{transform:rotate(45deg);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .4s var(--ease-inout);}
.faq-a p{padding:0 4px 26px;color:var(--grey-light);font-size:14.5px;max-width:640px;font-weight:400;}
/* ============================= CTA FINAL ============================= */

.cta-final{
  display:flex;
  align-items:flex-end;
  position:relative;
  overflow:hidden;

  background:
    linear-gradient(
      0deg,
      rgba(8,8,8,.95) 0%,
      rgba(8,8,8,.4) 45%,
      rgba(8,8,8,.85) 100%
    ),
    radial-gradient(
      ellipse at 30% 60%,
      rgba(60,60,60,.4),
      transparent 55%
    ),
    linear-gradient(
      180deg,
      #0c0c0c,
      #050505
    );

  padding:100px 5vw 90px;
}

.cta-final .wet-street{
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  height:60%;

  background:
    linear-gradient(
      0deg,
      rgba(255,255,255,.03),
      transparent
    );
}

.cta-final-content{
  position:relative;
  z-index:2;
  max-width:680px;
}

.cta-final h2{
  font-size:clamp(32px,5.6vw,64px);
  text-transform:uppercase;
}

.cta-final .btn-row{
  margin-top:32px;
}


/* ============================= CARRO ============================= */

.cta-car{
  position:absolute;
  right:5vw;
  bottom:0;

  width:420px;
  height:auto;

  opacity:.5;

  pointer-events:none;

  z-index:1;
}

.cta-car svg{
  display:block;
  width:100%;
  height:auto;

  overflow:visible;
}
/* =========================================================
   HERO — SCROLL LONGO
   ========================================================= */

body .hero-pin-wrap {
  position: relative !important;
  width: 100% !important;

  /* duração total da cena */
  height: 500vh !important;
  min-height: 500vh !important;
}


/* =========================================================
   PALCO FIXO NA TELA
   ========================================================= */

body .hero-pin-wrap .hero-stage {
  position: sticky !important;
  top: 0 !important;

  width: 100% !important;
  height: 100vh !important;
  min-height: 100vh !important;

  overflow: hidden !important;

  display: flex;
  align-items: center;
  justify-content: center;
}


/* =========================================================
   PAINEL
   ========================================================= */

body .hero-pin-wrap .performance-dashboard {
  position: absolute !important;

  inset: 0 !important;

  width: 100% !important;
  height: 100% !important;

  display: flex;
  align-items: center;
  justify-content: center;

  pointer-events: none;
}


body .hero-pin-wrap #performance-dashboard-svg {
  display: block;

  width: min(92vw, 800px) !important;
  height: auto !important;

  max-width: none;
}


/* =========================================================
   PAINEL
   ========================================================= */

.performance-dashboard {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  display: flex;
  align-items: center;
  justify-content: center;

  pointer-events: none;
}

#performance-dashboard-svg {
  width: min(92vw, 800px);
  height: auto;

  display: block;
}



/* ==============================
   CARRO — CTA FINAL
   ============================== */
.cta-car{
  position:absolute;
  right:5vw;
  bottom:60px;
  width:250px;
  height:100px;
  opacity:1;
  visibility:visible;
  display:block;
  pointer-events:none;
  z-index:10;
}

.cta-car svg{
  display:block;
  width:100%;
  height:100%;
  overflow:visible;
}

/* =========================================================
   CARRO — ROTA MITOS → FAQ
   ========================================================= */

#routeCar{
  position:fixed;
  left:50%;
  top:60%;
  width:130px;
  z-index:40;
  pointer-events:none;
  opacity:1;
  visibility:visible;
  transform:translate(-50%,-50%);
  will-change:transform;
  filter:drop-shadow(0 20px 30px rgba(0,0,0,.5));
}

#routeCar svg{
  display:block;
  width:100%;
  height:auto;
}

@media(max-width:760px){
  body #routeCar{
    width:85px !important;
    top:60%) !important;
  }
}

/* A próxima seção passa por cima do carro */
.testi-scene{
  position:relative;
  z-index:100;
}