:root{--black:#050505;--black2:#090909;--red:#e1251b;--red-dark:#8a0e0e;--cream:#f8f5ef;--cream2:#fffaf3;--line:rgba(255,255,255,.12);--text:#fff;--muted:rgba(255,255,255,.68);--ink:#090909;--ink-muted:#596070}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--black);color:var(--text);font-family:'Plus Jakarta Sans',Arial,sans-serif;overflow-x:hidden}img{max-width:100%;display:block}a{text-decoration:none;color:inherit}.container{width:min(1180px,calc(100% - 40px));margin-inline:auto}.narrow{width:min(860px,calc(100% - 40px));margin-inline:auto}h1,h2,h3{font-family:'Bebas Neue',Arial,sans-serif;letter-spacing:.045em;text-transform:uppercase;margin:0}h1{font-size:clamp(4.2rem,8.2vw,8.2rem);line-height:.93}h2{font-size:clamp(3rem,5.2vw,5.6rem);line-height:.98}h3{font-size:clamp(1.8rem,2.5vw,2.7rem)}p{line-height:1.72}.site-header{position:sticky;top:0;z-index:20;background:rgba(5,5,5,.88);backdrop-filter:blur(16px);border-bottom:1px solid rgba(255,255,255,.1)}.header-inner{height:86px;display:flex;align-items:center;justify-content:space-between;gap:28px}.brand img{height:50px;width:auto;object-fit:contain}.nav{display:flex;gap:34px;align-items:center;font-weight:800;text-transform:uppercase;letter-spacing:.12em;font-size:.88rem}.nav a{opacity:.9}.nav a:hover{color:var(--red)}.btn{display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:0 28px;border-radius:12px;font-weight:800;letter-spacing:.02em;transition:.22s ease}.btn:hover{transform:translateY(-2px)}.btn-primary{background:var(--red);color:white;box-shadow:0 16px 36px rgba(225,37,27,.24)}.btn-primary:hover{background:#b91712}.btn-outline{border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.04)}.btn-white{background:white;color:var(--red-dark)}.section-dark{background:var(--black);color:white}.hero{position:relative;min-height:calc(100vh - 86px);display:flex;align-items:center;overflow:hidden;background:radial-gradient(circle at 78% 30%,rgba(225,37,27,.25),transparent 36%),linear-gradient(90deg,#050505 0%,#050505 45%,#120606 100%)}.hero:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:48px 48px;opacity:.35}.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1.03fr;gap:44px;align-items:center;padding:78px 0}.zago-logo{height:72px;width:auto;margin-bottom:42px}.pill{display:inline-flex;align-items:center;padding:10px 16px;border:1px solid rgba(225,37,27,.45);border-radius:999px;color:white;background:rgba(225,37,27,.1);font-weight:900;text-transform:uppercase;letter-spacing:.16em;font-size:.82rem;margin-bottom:28px}h1 span{color:var(--red);display:block}.hero-copy p{font-size:clamp(1.05rem,1.5vw,1.32rem);color:rgba(255,255,255,.78);max-width:650px}.hero-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:34px 0}.hero-metrics div{border:1px solid rgba(255,255,255,.12);background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.035));border-radius:16px;padding:16px 18px}.hero-metrics strong{display:block;font-family:'Bebas Neue';letter-spacing:.06em;font-size:1.45rem}.hero-metrics small{color:rgba(255,255,255,.6)}.hero-actions{display:flex;gap:18px;flex-wrap:wrap}.hero-image{position:relative;display:flex;align-items:center;justify-content:center;min-height:560px}.hero-glow{position:absolute;width:88%;height:62%;border-radius:50%;background:rgba(225,37,27,.23);filter:blur(110px)}.hero-image img{position:relative;z-index:2;width:128%;max-width:880px;filter:drop-shadow(0 42px 62px rgba(0,0,0,.78));transform:translateX(28px)}.marquee{overflow:hidden;border-block:1px solid rgba(255,255,255,.1);height:58px;display:flex;align-items:center}.marquee-red{background:var(--red);color:white}.marquee-track{display:flex;gap:42px;white-space:nowrap;min-width:max-content;animation:marquee 28s linear infinite;text-transform:uppercase;font-family:'Bebas Neue';letter-spacing:.16em;font-size:1.35rem}.marquee b{opacity:.75}@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-45%)}}.section-light{background:var(--cream);color:var(--ink);padding:110px 0}.split{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}.manifesto-card,.tire-frame,.application-img{background:white;border:1px solid #e6dfd4;border-radius:32px;box-shadow:0 24px 54px rgba(70,43,23,.13);overflow:hidden}.manifesto-card{padding:44px}.manifesto-card img{height:74px;margin-bottom:34px}.mini-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.mini-grid span,.tag-grid span{background:var(--cream2);border:1px solid #e6dfd4;border-radius:16px;padding:16px 18px;font-weight:800}.eyebrow{color:var(--red);text-transform:uppercase;font-weight:900;letter-spacing:.24em;font-size:.82rem;margin:0 0 18px}.eyebrow.light{color:white}.lead{font-size:1.08rem;color:var(--ink-muted);max-width:650px}.three-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:34px}.three-cards div{background:white;border:1px solid #e6dfd4;border-radius:18px;padding:22px;font-weight:900;box-shadow:0 12px 26px rgba(70,43,23,.08)}.section-title.center{text-align:center;max-width:820px;margin:0 auto 56px}.section-title p:not(.eyebrow){color:rgba(255,255,255,.64)}.section-light .section-title p:not(.eyebrow){color:var(--ink-muted)}.models,.compare,.applications{padding:110px 0;border-block:1px solid rgba(255,255,255,.1)}.model-grid,.compare-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:34px}.model-card{position:relative;min-height:520px;border:1px solid rgba(255,255,255,.1);border-radius:30px;background:radial-gradient(circle at center,rgba(225,37,27,.18),transparent 42%),#080808;display:flex;align-items:center;justify-content:center;overflow:hidden;box-shadow:0 24px 54px rgba(0,0,0,.48)}.model-card:before{content:"";position:absolute;inset:28px;border:1px solid rgba(255,255,255,.08);border-radius:24px}.model-badge{display:inline-flex;background:var(--red);color:white;border-radius:10px;padding:12px 18px;font-weight:900;text-transform:uppercase;letter-spacing:.06em}.model-card .model-badge{position:absolute;top:28px;left:28px;z-index:3}.model-card img{position:relative;z-index:2;max-width:430px;max-height:440px;filter:drop-shadow(0 30px 48px rgba(0,0,0,.72))}.model-card img.z722{max-width:440px}.compare-card{border:1px solid rgba(255,255,255,.1);border-radius:24px;background:rgba(255,255,255,.045);padding:34px}.compare-card h3{margin:24px 0;color:white}.compare-card ul{list-style:none;padding:0;margin:0;display:grid;gap:12px}.compare-card li{background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:14px 16px;color:rgba(255,255,255,.78)}.mission .tire-frame img{width:100%;height:100%;object-fit:cover;max-height:620px}.timeline{margin-top:42px;display:grid;gap:28px;border-left:1px solid #d8d0c4}.timeline div{position:relative;padding-left:34px}.timeline div:before{content:"";position:absolute;left:-5px;top:10px;width:10px;height:10px;background:var(--red);border-radius:50%}.timeline strong{font-family:'Bebas Neue';font-size:1.7rem;letter-spacing:.05em}.timeline p{color:var(--ink-muted);margin:.4rem 0 0}.presence{background:white}.application-img img{width:100%;height:560px;object-fit:cover}.tag-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:28px 0 34px}.app-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}.app-grid div{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.1);border-radius:22px;padding:28px}.app-grid strong{font-family:'Bebas Neue';font-size:1.7rem;letter-spacing:.05em}.app-grid p{color:rgba(255,255,255,.62);font-size:.95rem}.specs{background:white}.spec-table{border:1px solid #e6dfd4;border-radius:24px;overflow:hidden;background:var(--cream2);box-shadow:0 18px 36px rgba(70,43,23,.08)}.spec-table div{display:flex;justify-content:space-between;gap:20px;padding:22px 26px;border-bottom:1px solid #e6dfd4}.spec-table div:last-child{border-bottom:0}.spec-table span{font-family:'Bebas Neue';font-size:1.2rem;color:#657082;letter-spacing:.07em}.spec-table strong{text-align:right;color:var(--ink);font-size:1.05rem}.cta-section{background:linear-gradient(135deg,#741015,#e1251b 54%,#8a0e0e);padding:110px 0;color:white}.cta-box{text-align:center;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.1);border-radius:32px;padding:64px 42px;box-shadow:0 28px 60px rgba(0,0,0,.22)}.cta-box p{color:rgba(255,255,255,.86);font-size:1.1rem}.final-strip{border-top:0}.footer{background:#050505;color:white;border-top:1px solid rgba(255,255,255,.1);padding:42px 0}.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:28px}.footer img{height:54px;width:auto;max-width:300px;object-fit:contain}.footer p{color:rgba(255,255,255,.64);font-size:.92rem;text-align:right}@media(max-width:980px){.nav{display:none}.header-inner{height:76px}.brand img{height:42px}.header-cta{display:none}.hero{min-height:auto}.hero-grid,.split{grid-template-columns:1fr;gap:42px}.hero-grid{padding:54px 0 72px}.zago-logo{height:52px;margin-bottom:28px}.hero-image{min-height:340px;order:-1}.hero-image img{width:115%;transform:none}.hero-metrics,.three-cards,.tag-grid,.app-grid,.model-grid,.compare-grid{grid-template-columns:1fr}.model-card{min-height:420px}.model-card img,.model-card img.z722{max-width:360px}.section-light,.models,.compare,.applications,.cta-section{padding:78px 0}.application-img img{height:380px}.footer-inner{flex-direction:column;text-align:center}.footer p{text-align:center}.spec-table div{flex-direction:column}.spec-table strong{text-align:left}.marquee-track{font-size:1.12rem;gap:28px}.reverse-mobile .tire-frame{order:-1}}@media(max-width:560px){.container,.narrow{width:min(100% - 28px,1180px)}h1{font-size:3.9rem}h2{font-size:3rem}.hero-copy p{font-size:1rem}.hero-metrics{gap:10px}.hero-actions .btn{width:100%}.model-card{min-height:360px}.model-card img,.model-card img.z722{max-width:300px}.manifesto-card{padding:28px}.mini-grid{grid-template-columns:1fr}.cta-box{padding:42px 22px}.footer img{height:46px}.hero-image{min-height:280px}}


/* Ajustes finais Maicon: logo normal, vídeo Vimeo, gorila 3D e mobile refinado */
.brand img{height:48px;max-width:210px;object-fit:contain}.footer img{height:60px;max-width:280px;object-fit:contain}.hero h1{font-size:clamp(3.85rem,7.6vw,7.65rem)}.hero-copy p{max-width:620px}.gorilla-section{position:relative;overflow:hidden;background:radial-gradient(circle at 24% 42%,rgba(225,37,27,.08),transparent 34%),var(--cream)}.gorilla-stage{position:relative;min-height:520px;display:flex;align-items:center;justify-content:center;border-radius:34px;background:linear-gradient(145deg,#ffffff 0%,#f6efe5 100%);border:1px solid #e6dfd4;box-shadow:0 28px 62px rgba(70,43,23,.15);overflow:hidden}.gorilla-stage:before{content:"ROBUSTEZ";position:absolute;left:28px;bottom:22px;font-family:'Bebas Neue';font-size:clamp(4rem,8vw,8rem);letter-spacing:.08em;color:rgba(0,0,0,.045);line-height:.8}.gorilla-stage img{position:relative;z-index:2;width:min(86%,520px);filter:drop-shadow(0 34px 42px rgba(0,0,0,.34));animation:floatGorilla 5.8s ease-in-out infinite}.gorilla-orbit{position:absolute;width:78%;height:78%;border-radius:50%;background:radial-gradient(circle,rgba(225,37,27,.16),transparent 60%);filter:blur(12px)}@keyframes floatGorilla{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-14px) rotate(1deg)}}.video-frame{position:relative;aspect-ratio:16/9;border-radius:28px;overflow:hidden;background:#050505;border:1px solid #e6dfd4;box-shadow:0 28px 60px rgba(70,43,23,.18)}.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}.mission .split{align-items:center}.mission .lead{max-width:610px}.footer{background:#050505!important}.footer-inner img{background:transparent!important}.footer p{color:rgba(255,255,255,.70)!important}@media(max-width:980px){.hero-image{order:0;min-height:300px}.hero-image img{width:min(100%,560px);max-width:560px;transform:none}.hero-grid{gap:24px}.hero h1{font-size:clamp(3.35rem,13vw,5rem)}.gorilla-stage{min-height:380px}.gorilla-stage img{width:min(78%,390px)}.video-frame{aspect-ratio:16/10}.brand img{height:42px;max-width:178px}.footer img{height:48px;max-width:230px}.reverse-mobile .video-frame{order:0}}@media(max-width:560px){.hero-image{min-height:220px}.hero-image img{width:min(92%,380px)}.hero h1{font-size:3.45rem}.gorilla-stage{min-height:320px;border-radius:26px}.gorilla-stage img{width:min(82%,310px)}.three-cards{grid-template-columns:1fr}.video-frame{border-radius:22px;aspect-ratio:9/10}.brand img{height:38px;max-width:158px}.footer img{height:42px;max-width:210px}}

/* AJUSTES FINAIS SOLICITADOS - 29/04 - V2 */
:root{--red:#e1251b;--red-dark:#8a0e0e;}
.brand{background:transparent!important;border:none!important;box-shadow:none!important;padding:0!important;}
.brand img{height:54px!important;max-width:235px!important;width:auto!important;object-fit:contain!important;}
.footer img{height:68px!important;max-width:330px!important;width:auto!important;object-fit:contain!important;}
.hero h1{font-size:clamp(3.45rem,6.15vw,6.15rem)!important;line-height:.96!important;max-width:720px;}
.hero-copy p{font-size:clamp(1rem,1.18vw,1.18rem)!important;max-width:600px!important;}
.hero-image img{width:132%!important;max-width:980px!important;transform:translateX(0)!important;}
.gorilla-section .three-cards.light-cards div,.gorilla-section .three-cards div{background:#050505!important;color:var(--cream)!important;border:1px solid rgba(225,37,27,.32)!important;box-shadow:0 18px 34px rgba(0,0,0,.18)!important;text-transform:uppercase;letter-spacing:.04em;}
.gorilla-section h2{max-width:640px;}
.gorilla-section .lead{max-width:620px;}
.mission .split{grid-template-columns:.9fr 1.18fr!important;gap:64px!important;}
.mission h2{font-size:clamp(3.2rem,4.3vw,5.15rem)!important;line-height:1!important;}
.mission .lead{max-width:560px!important;font-size:1.02rem!important;}
.mission .timeline{margin-top:34px!important;gap:22px!important;}
.mission .timeline strong{font-size:1.45rem!important;}
.mission .timeline p{font-size:.96rem!important;}
.video-frame{width:100%!important;min-height:500px!important;aspect-ratio:16/10!important;border-radius:30px!important;background:#050505!important;}
.video-frame iframe{width:130%!important;height:130%!important;left:-15%!important;top:-15%!important;max-width:none!important;max-height:none!important;}
@media(max-width:980px){.brand img{height:46px!important;max-width:205px!important;}.hero h1{font-size:clamp(3.1rem,11vw,4.65rem)!important;}.hero-copy p{font-size:1rem!important;}.hero-image img{width:min(94%,500px)!important;transform:none!important;}.mission .split{grid-template-columns:1fr!important;gap:34px!important;}.video-frame{min-height:360px!important;aspect-ratio:16/9!important;}.video-frame iframe{width:126%!important;height:126%!important;left:-13%!important;top:-13%!important;}.footer img{height:54px!important;max-width:260px!important;}}
@media(max-width:560px){.brand img{height:40px!important;max-width:180px!important;}.hero h1{font-size:3.15rem!important;line-height:.98!important;}.hero-image{min-height:210px!important;}.hero-image img{width:min(86%,340px)!important;}.mission h2{font-size:2.8rem!important;}.video-frame{min-height:300px!important;aspect-ratio:4/5!important;border-radius:22px!important;}.video-frame iframe{width:145%!important;height:145%!important;left:-22.5%!important;top:-22.5%!important;}.footer img{height:46px!important;max-width:230px!important;}}


/* FORÇA FINAL - CARDS GORILLA */
.gorilla-section .three-cards div,
.gorilla-section .three-cards.light-cards div,
.gorilla-section .three-cards div *,
.gorilla-section .three-cards.light-cards div * {
  color: #f8f5ef !important;
}

.gorilla-section .three-cards div,
.gorilla-section .three-cards.light-cards div {
  background: #050505 !important;
  border: 1px solid rgba(225, 37, 27, .32) !important;
}

/* Seleção de texto personalizada */
::selection {
  background: #e1251b;
  color: #ffffff;
}


::-moz-selection {
  background: #e1251b;
  color: #ffffff;
}



/* Cursor premium leve */
@media (min-width: 981px) {
  body {
    cursor: none;
  }

  .custom-cursor-dot,
  .custom-cursor-ring {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 99999;
    transform: translate(-50%, -50%);
    will-change: transform;
  }

  .custom-cursor-dot {
    width: 7px;
    height: 7px;
    background: #e1251b;
    border-radius: 999px;
    box-shadow: 0 0 14px rgba(225, 37, 27, .55);
  }

  .custom-cursor-ring {
    width: 34px;
    height: 34px;
    border: 1px solid rgba(225, 37, 27, .75);
    border-radius: 999px;
    transition: width .14s ease, height .14s ease, border-color .14s ease, background .14s ease;
  }

  body.cursor-hover .custom-cursor-ring {
    width: 48px;
    height: 48px;
    background: rgba(225, 37, 27, .08);
    border-color: rgba(255, 255, 255, .65);
  }

  body.cursor-hover .custom-cursor-dot {
    background: #ffffff;
  }
}


/* HOVER VERMELHO EM CONTAINERS ESCUROS */
.model-card,
.compare-card,
.app-grid div,
.gorilla-section .three-cards div,
.hero-metrics div,
.video-frame,
.cta-box {
  transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}

.model-card:hover,
.compare-card:hover,
.app-grid div:hover,
.gorilla-section .three-cards div:hover,
.hero-metrics div:hover,
.video-frame:hover,
.cta-box:hover {
  border-color: rgba(225, 37, 27, .78) !important;
  box-shadow: 0 22px 48px rgba(225, 37, 27, .14), 0 24px 54px rgba(0,0,0,.35) !important;
}

/* HOVER MAIS LEVE PARA CARDS PEQUENOS */
.hero-metrics div:hover,
.gorilla-section .three-cards div:hover,
.app-grid div:hover {
  transform: translateY(-3px);
}

/* HOVER DOS CARDS GRANDES */
.model-card:hover,
.compare-card:hover,
.video-frame:hover {
  transform: translateY(-4px);
}

/* FUNDO ELEGANTE ENQUANTO O VÍDEO CARREGA */
.video-frame {
  background:
    radial-gradient(circle at center, rgba(225,37,27,.18), transparent 42%),
    linear-gradient(135deg, #050505 0%, #160707 100%) !important;
}

.video-frame::before {
  content: "CARREGANDO PERFORMANCE";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Bebas Neue', Arial, sans-serif;
  letter-spacing: .12em;
  font-size: clamp(1.2rem, 2vw, 2rem);
  color: rgba(255,255,255,.16);
  z-index: 0;
  pointer-events: none !important;
}

.video-frame iframe {
  z-index: 2;
}

/* CURSOR MINIMALISTA DUAL CONTRAST */
@media (min-width: 981px) {
  body {
    cursor: none;
  }

  .custom-cursor-core,
  .custom-cursor-ring {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 99999;
    transform: translate(-50%, -50%);
    will-change: transform;
  }

  .custom-cursor-core {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: #ffffff;
    mix-blend-mode: difference;
    box-shadow: 0 0 10px rgba(255,255,255,.45);
  }

  .custom-cursor-ring {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    border: 1.5px solid #ffffff;
    mix-blend-mode: difference;
    background: transparent;
    transition:
      width .13s ease,
      height .13s ease,
      border-width .13s ease,
      opacity .13s ease;
  }

  body.cursor-hover .custom-cursor-ring {
    width: 46px;
    height: 46px;
    border-width: 2px;
  }

  body.cursor-hover .custom-cursor-core {
    width: 7px;
    height: 7px;
  }

  .video-frame iframe {
    pointer-events: none !important;
  }
}

/* FORÇAR CURSOR CUSTOMIZADO EM TODO O SITE */
@media (min-width: 981px) {
  html,
  body,
  body *,
  a,
  button,
  .btn,
  [role="button"],
  input,
  textarea,
  select,
  iframe {
    cursor: none !important;
  }

  .custom-cursor-core,
  .custom-cursor-ring {
    pointer-events: none !important;
  }

  .video-frame iframe {
    pointer-events: none !important;
  }
}
/* ===== AJUSTES FINAIS: TRANSIÇÕES PREMIUM + HERO PNEUS UM POUCO MAIORES ===== */
@media (min-width: 981px) {
  .hero-image img {
    width: 122% !important;
    max-width: 855px !important;
    transform: translateX(22px) !important;
  }
}

.site-header,
.btn,
.model-card,
.compare-card,
.app-grid div,
.gorilla-stage,
.video-frame,
.application-img,
.spec-table,
.cta-box,
.hero-metrics div,
.tag-grid span,
.three-cards div {
  transition: transform .34s ease, border-color .28s ease, box-shadow .34s ease, background .28s ease, opacity .34s ease, filter .34s ease;
}

.site-loaded .hero-copy { animation: heroTextIn .82s cubic-bezier(.16,1,.3,1) both; }
.site-loaded .hero-image { animation: heroImageIn .95s cubic-bezier(.16,1,.3,1) .08s both; }
.site-loaded .site-header { animation: headerDrop .62s cubic-bezier(.16,1,.3,1) both; }

@keyframes headerDrop { from { opacity: 0; transform: translateY(-18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes heroTextIn { from { opacity: 0; transform: translateY(34px); filter: blur(8px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } }
@keyframes heroImageIn { from { opacity: 0; transform: translateX(44px) scale(.97); filter: blur(8px); } to { opacity: 1; transform: translateX(0) scale(1); filter: blur(0); } }

.reveal-on-scroll {
  opacity: 0;
  transform: translateY(34px);
  filter: blur(5px);
  transition: opacity .74s cubic-bezier(.16,1,.3,1), transform .74s cubic-bezier(.16,1,.3,1), filter .74s cubic-bezier(.16,1,.3,1);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal-on-scroll.is-visible { opacity: 1; transform: translateY(0); filter: blur(0); }
.reveal-left { transform: translateX(-38px); }
.reveal-right { transform: translateX(38px); }
.reveal-left.is-visible, .reveal-right.is-visible { transform: translateX(0); }

.model-card:hover,
.compare-card:hover,
.app-grid div:hover,
.gorilla-section .three-cards div:hover,
.hero-metrics div:hover,
.video-frame:hover,
.cta-box:hover {
  border-color: rgba(225,37,27,.78) !important;
  box-shadow: 0 22px 48px rgba(225,37,27,.12), 0 24px 54px rgba(0,0,0,.32) !important;
}
.model-card:hover, .compare-card:hover, .video-frame:hover, .gorilla-stage:hover { transform: translateY(-5px); }
.hero-metrics div:hover, .gorilla-section .three-cards div:hover, .app-grid div:hover, .tag-grid span:hover { transform: translateY(-3px); }
.model-card img, .hero-image img, .application-img img { transition: transform .55s cubic-bezier(.16,1,.3,1), filter .55s ease; }
.model-card:hover img { transform: scale(1.035); }
.application-img:hover img { transform: scale(1.025); }


@media (max-width: 980px) {
  .reveal-on-scroll, .reveal-left, .reveal-right { transform: translateY(24px); filter: blur(3px); }
  .reveal-on-scroll.is-visible, .reveal-left.is-visible, .reveal-right.is-visible { transform: translateY(0); filter: blur(0); }
}


/* CORREÇÃO FINAL DO RODAPÉ */
.footer {
  position: relative !important;
  z-index: 5 !important;
  display: block !important;
  background: #050505 !important;
  padding: 64px 0 58px !important;
  min-height: 170px !important;
  overflow: visible !important;
  opacity: 1 !important;
  transform: none !important;
}

.footer-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 32px !important;
  min-height: 70px !important;
  opacity: 1 !important;
  transform: none !important;
}

.footer img {
  display: block !important;
  height: 62px !important;
  max-width: 300px !important;
  width: auto !important;
  object-fit: contain !important;
  opacity: 1 !important;
  transform: none !important;
}

.footer p {
  display: block !important;
  color: rgba(255,255,255,.72) !important;
  font-size: .92rem !important;
  text-align: right !important;
  margin: 0 !important;
  opacity: 1 !important;
  transform: none !important;
}

/* GARANTE RESPIRO ENTRE A FAIXA FINAL E O RODAPÉ */
.final-strip {
  position: relative !important;
  z-index: 4 !important;
  margin-bottom: 0 !important;
}

/* MOBILE */
@media (max-width: 980px) {
  .footer {
    padding: 48px 0 46px !important;
    min-height: 180px !important;
  }

  .footer-inner {
    flex-direction: column !important;
    text-align: center !important;
    justify-content: center !important;
  }

  .footer p {
    text-align: center !important;
  }

  .footer img {
    height: 52px !important;
    max-width: 250px !important;
  }
}


/* BOTÃO VOLTAR AO TOPO */
.back-to-top {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 9999;
  width: 54px;
  height: 54px;
  border-radius: 999px;
  border: 2px solid #ffffff;
  background: #e1251b;
  color: #ffffff;
  font-size: 28px;
  font-weight: 900;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 14px 32px rgba(225, 37, 27, .35),
    0 0 0 4px rgba(5, 5, 5, .45);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(.92);
  transition:
    opacity .22s ease,
    visibility .22s ease,
    transform .22s ease,
    background .22s ease,
    border-color .22s ease,
    color .22s ease;
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.back-to-top:hover {
  background: #050505;
  color: #e1251b;
  border-color: #e1251b;
  box-shadow:
    0 16px 36px rgba(0, 0, 0, .38),
    0 0 0 4px rgba(225, 37, 27, .18);
}

.back-to-top:active {
  transform: translateY(1px) scale(.96);
}

@media (max-width: 560px) {
  .back-to-top {
    right: 18px;
    bottom: 18px;
    width: 48px;
    height: 48px;
    font-size: 25px;
  }
}

/* FORÇAR TRANSIÇÕES E FAIXAS ANIMADAS */
.marquee-track {
  animation: marquee 26s linear infinite !important;
}

.gorilla-stage img {
  animation: floatGorilla 5.8s ease-in-out infinite !important;
}

.site-loaded .hero-copy {
  animation: heroTextIn .82s cubic-bezier(.16,1,.3,1) both !important;
}

.site-loaded .hero-image {
  animation: heroImageIn .95s cubic-bezier(.16,1,.3,1) .08s both !important;
}

.site-loaded .site-header {
  animation: headerDrop .62s cubic-bezier(.16,1,.3,1) both !important;
}

.reveal-on-scroll {
  opacity: 0;
  transform: translateY(34px);
  filter: blur(5px);
  transition:
    opacity .74s cubic-bezier(.16,1,.3,1),
    transform .74s cubic-bezier(.16,1,.3,1),
    filter .74s cubic-bezier(.16,1,.3,1) !important;
  transition-delay: var(--reveal-delay, 0ms);
}

.reveal-on-scroll.is-visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
  filter: blur(0) !important;
}

.reveal-left {
  transform: translateX(-38px);
}

.reveal-right {
  transform: translateX(38px);
}

.reveal-left.is-visible,
.reveal-right.is-visible {
  transform: translateX(0) !important;
}

/* SUBSTITUIÇÃO DO GORILLA POR IMAGEM DO CAMINHÃO/ZAGO */
.caminhao-stage,
.gorilla-stage.caminhao-stage {
  background: #ffffff !important;
  padding: 0 !important;
  min-height: 520px !important;
  border-radius: 34px !important;
  border: 1px solid #e6dfd4 !important;
  box-shadow: 0 28px 62px rgba(70,43,23,.15) !important;
  overflow: hidden !important;
  position: relative !important;
}

.caminhao-stage::before,
.caminhao-stage .gorilla-orbit,
.gorilla-stage.caminhao-stage::before,
.gorilla-stage.caminhao-stage .gorilla-orbit {
  display: none !important;
}

.caminhao-stage img,
.gorilla-stage.caminhao-stage img {
  width: 100% !important;
  height: 100% !important;
  min-height: 520px !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: center center !important;
  filter: none !important;
  animation: none !important;
  transform: none !important;
  display: block !important;
}

.caminhao-stage:hover img,
.gorilla-stage.caminhao-stage:hover img {
  transform: scale(1.025) !important;
  transition: transform .55s cubic-bezier(.16,1,.3,1) !important;
}

@media (max-width: 980px) {
  .caminhao-stage,
  .gorilla-stage.caminhao-stage {
    min-height: 340px !important;
  }

  .caminhao-stage img,
  .gorilla-stage.caminhao-stage img {
    min-height: 340px !important;
    object-position: center top !important;
  }
}

@media (max-width: 560px) {
  .caminhao-stage,
  .gorilla-stage.caminhao-stage {
    min-height: 330px !important;
    border-radius: 26px !important;
  }

  .caminhao-stage img,
  .gorilla-stage.caminhao-stage img {
    min-height: 330px !important;
    object-position: center top !important;
  }
}
/* AJUSTE FINAL - FOCO ZAGO TYRES NO TOPO */
.brand .brand-logo-zago {
  height: 58px !important;
  max-width: 260px !important;
  width: auto !important;
  object-fit: contain !important;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.35));
}

.hero .zago-logo {
  height: 82px !important;
  max-width: 420px !important;
  width: auto !important;
  object-fit: contain !important;
  margin-bottom: 38px !important;
  filter: drop-shadow(0 14px 28px rgba(0,0,0,.45));
}

.hero h1 {
  max-width: 760px !important;
}

@media (max-width: 980px) {
  .brand .brand-logo-zago {
    height: 48px !important;
    max-width: 220px !important;
  }

  .hero .zago-logo {
    height: 62px !important;
    max-width: 320px !important;
    margin-bottom: 28px !important;
  }
}

@media (max-width: 560px) {
  .brand .brand-logo-zago {
    height: 42px !important;
    max-width: 190px !important;
  }

  .hero .zago-logo {
    height: 54px !important;
    max-width: 280px !important;
  }
}


/* ===== AJUSTES 04/05 - SEÇÃO UNIFICADA, WHATSAPP E VÍDEO SEM CORTE ===== */
.models-unified {
  padding-bottom: 122px !important;
}

.models-unified .model-grid {
  margin-bottom: 42px !important;
}

.models-unified .model-details-grid {
  margin-top: 0 !important;
}

.models-unified .compare-card {
  min-height: 255px !important;
  padding: 34px 34px 36px !important;
}

.models-unified .compare-card h3 {
  font-size: clamp(2rem, 3.1vw, 3.1rem) !important;
  margin: 28px 0 28px !important;
}

.models-unified .compare-card li {
  min-height: 50px !important;
  display: flex !important;
  align-items: center !important;
}

.mission .split {
  grid-template-columns: 1fr 1fr !important;
  gap: 64px !important;
  align-items: stretch !important;
}

.mission .split > div:first-child {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

.video-frame {
  width: 100% !important;
  height: 100% !important;
  min-height: 560px !important;
  aspect-ratio: auto !important;
  border-radius: 30px !important;
  background: #ffffff !important;
  border: 1px solid #e6dfd4 !important;
  box-shadow: 0 28px 60px rgba(70,43,23,.18) !important;
  overflow: hidden !important;
}

.video-frame::before {
  display: none !important;
}

.video-frame iframe {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 94% !important;
  height: 94% !important;
  transform: translate(-50%, -50%) !important;
  border: 0 !important;
  background: #ffffff !important;
  max-width: none !important;
  max-height: none !important;
}

@media (max-width: 980px) {
  .models-unified .model-grid {
    margin-bottom: 28px !important;
  }

  .mission .split {
    grid-template-columns: 1fr !important;
    gap: 34px !important;
    align-items: center !important;
  }

  .video-frame {
    min-height: 430px !important;
    aspect-ratio: 16 / 10 !important;
  }

  .video-frame iframe {
    width: 96% !important;
    height: 96% !important;
  }
}

@media (max-width: 560px) {
  .models-unified {
    padding-bottom: 78px !important;
  }

  .models-unified .compare-card {
    min-height: auto !important;
    padding: 28px 22px !important;
  }

  .video-frame {
    min-height: 330px !important;
    aspect-ratio: 4 / 5 !important;
    border-radius: 22px !important;
  }

  .video-frame iframe {
    width: 98% !important;
    height: 98% !important;
  }
}


/* =========================================================
   AJUSTES FINAIS ZAGO TYRES - 07/05
   - imagens locais
   - cards por produto sem badges vermelhos Z601/Z722
   - hero mais harmônico
   - cursor customizado mantido sem cursor nativo
   ========================================================= */

@media (min-width: 981px) {
  html,
  body,
  body *,
  a,
  button,
  .btn,
  [role="button"],
  input,
  textarea,
  select,
  iframe {
    cursor: none !important;
  }

  .custom-cursor-core,
  .custom-cursor-ring {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    pointer-events: none !important;
    z-index: 999999 !important;
    transform: translate(-50%, -50%);
    will-change: transform;
    display: block !important;
  }

  .custom-cursor-core {
    width: 6px !important;
    height: 6px !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    mix-blend-mode: difference;
  }

  .custom-cursor-ring {
    width: 32px !important;
    height: 32px !important;
    border-radius: 999px !important;
    border: 1.5px solid #ffffff !important;
    background: transparent !important;
    mix-blend-mode: difference;
    transition: width .18s ease, height .18s ease, border-width .18s ease, opacity .18s ease !important;
  }

  body.cursor-hover .custom-cursor-ring {
    width: 46px !important;
    height: 46px !important;
    border-width: 2px !important;
  }
}

/* vídeo é demonstrativo: evita cursor nativo dentro do iframe */
.video-frame iframe {
  pointer-events: none !important;
}

.hero .zago-logo {
  height: 110px !important;
  max-width: 440px !important;
  width: auto !important;
  object-fit: contain !important;
  margin-bottom: 52px !important;
  filter: drop-shadow(0 18px 34px rgba(0,0,0,.58)) !important;
}

.brand .brand-logo-zago,
.brand img {
  height: 64px !important;
  max-width: 300px !important;
  width: auto !important;
  object-fit: contain !important;
}

.hero-grid {
  grid-template-columns: .92fr 1.08fr !important;
  gap: 34px !important;
}

.hero h1 {
  font-size: clamp(4.1rem, 6.75vw, 7.15rem) !important;
  line-height: .95 !important;
  max-width: 790px !important;
}

.hero h1 span {
  display: block !important;
  white-space: nowrap !important;
}

.hero-copy p {
  max-width: 620px !important;
}

.hero-image {
  min-height: 540px !important;
}

.hero-image img {
  width: 108% !important;
  max-width: 810px !important;
  height: auto !important;
  object-fit: contain !important;
  transform: translateX(8px) !important;
  filter: drop-shadow(0 42px 62px rgba(0,0,0,.78)) !important;
}

/* remove destaque amarelo da seção engenharia */
.mission h2,
.mission h2 span,
.mission h2 mark {
  background: transparent !important;
  box-shadow: none !important;
}

.mission h2::before,
.mission h2::after {
  display: none !important;
}

/* Cards unificados dos produtos */
.models-product-blocks {
  padding: 112px 0 122px !important;
  border-block: 1px solid rgba(255,255,255,.1);
}

.models-product-blocks .section-title.center {
  margin-bottom: 62px !important;
}

.product-blocks-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 28px !important;
}

/* Placeholder do card enquanto a imagem real do modelo não é enviada */
.product-image-area img.is-placeholder {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
}

.product-block-card {
  background: rgba(255,255,255,.045) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 30px !important;
  overflow: hidden !important;
  box-shadow: 0 24px 54px rgba(0,0,0,.45) !important;
}

.product-image-area {
  position: relative !important;
  min-height: 455px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: radial-gradient(circle at center, rgba(225,37,27,.17), transparent 45%), #080808 !important;
  border-bottom: 1px solid rgba(255,255,255,.1) !important;
  overflow: hidden !important;
}

.product-image-area::before {
  content: "" !important;
  position: absolute !important;
  inset: 28px !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 24px !important;
  pointer-events: none !important;
}

.product-image-area img {
  position: relative !important;
  z-index: 2 !important;
  width: auto !important;
  max-width: 86% !important;
  max-height: 340px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 30px 48px rgba(0,0,0,.72)) !important;
}

.product-image-area img.z722,
.product-image-area img.z612 {
  max-width: 86% !important;
  max-height: 340px !important;
}

.product-info-area {
  padding: 34px !important;
}

.product-kicker {
  margin: 0 0 12px !important;
  color: rgba(255,255,255,.72) !important;
  font-size: .92rem !important;
  font-weight: 700 !important;
  letter-spacing: .02em !important;
}

.product-info-area h3 {
  color: #ffffff !important;
  margin: 0 0 26px !important;
  font-size: clamp(2.15rem, 3vw, 3.25rem) !important;
}

.product-checklist {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: grid !important;
  gap: 14px !important;
}

.product-checklist li {
  position: relative !important;
  padding: 14px 16px 14px 46px !important;
  color: rgba(255,255,255,.82) !important;
  background: transparent !important;
  border: 1px solid rgba(255,255,255,.11) !important;
  border-radius: 14px !important;
}

.product-checklist li::before {
  content: "✓" !important;
  position: absolute !important;
  left: 16px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: #e1251b !important;
  font-weight: 900 !important;
  font-size: 1rem !important;
}

/* remove badges vermelhos somente dos cards dos produtos, caso algum estilo antigo tente renderizar */
.product-block-card .model-badge,
.product-image-area .model-badge,
.product-info-area .model-badge {
  display: none !important;
}

/* elementos informativos não parecem clicáveis */
.hero-metrics div,
.three-cards div,
.tag-grid span,
.app-grid div,
.product-block-card,
.product-image-area,
.product-info-area,
.product-checklist li {
  transform: none !important;
}

@media (max-width: 980px) {
  .brand .brand-logo-zago,
  .brand img {
    height: 50px !important;
    max-width: 230px !important;
  }

  .hero .zago-logo {
    height: 78px !important;
    max-width: 360px !important;
    margin-bottom: 32px !important;
  }

  .hero-grid,
  .split {
    grid-template-columns: 1fr !important;
  }

  .hero h1 {
    font-size: clamp(3.2rem, 11vw, 4.8rem) !important;
  }

  .hero h1 span {
    white-space: normal !important;
  }

  .hero-image {
    min-height: 320px !important;
  }

  .hero-image img {
    width: min(94%, 540px) !important;
    transform: none !important;
  }

  .product-blocks-grid {
    grid-template-columns: 1fr !important;
  }

  .product-image-area {
    min-height: 380px !important;
  }

  .product-image-area img,
  .product-image-area img.z722 {
    max-width: 370px !important;
    max-height: 340px !important;
  }
}

@media (max-width: 560px) {
  .brand .brand-logo-zago,
  .brand img {
    height: 42px !important;
    max-width: 190px !important;
  }

  .hero .zago-logo {
    height: 64px !important;
    max-width: 300px !important;
  }

  .hero h1 {
    font-size: 3.28rem !important;
    line-height: .98 !important;
  }

  .hero-image {
    min-height: 235px !important;
  }

  .hero-image img {
    width: min(92%, 380px) !important;
  }

  .product-image-area {
    min-height: 300px !important;
  }

  .product-image-area img,
  .product-image-area img.z722 {
    max-width: 300px !important;
    max-height: 280px !important;
  }

  .product-info-area {
    padding: 28px 22px !important;
  }
}


/* =========================================================
   CORREÇÃO DEFINITIVA - SEÇÃO ENGENHARIA DE PERFORMANCE
   - fundo branco puro #FFFFFF
   - remoção da faixa/retângulo amarelado do título
   ========================================================= */

:root {
  --cream: #ffffff !important;
  --cream2: #ffffff !important;
}

section#estrutura,
section#estrutura.section-light,
section#estrutura.mission,
section#estrutura.section-light.mission,
#estrutura.mission,
.mission.section-light {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
}

#estrutura::before,
#estrutura::after,
.mission::before,
.mission::after {
  content: none !important;
  display: none !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

#estrutura h2,
#estrutura h2::first-line,
#estrutura h2 span,
#estrutura h2 mark,
#estrutura h2 strong,
#estrutura h2 em,
.mission h2,
.mission h2::first-line,
.mission h2 span,
.mission h2 mark,
.mission h2 strong,
.mission h2 em {
  display: block !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  -webkit-box-decoration-break: initial !important;
  box-decoration-break: initial !important;
}

#estrutura h2::before,
#estrutura h2::after,
#estrutura h2 span::before,
#estrutura h2 span::after,
#estrutura h2 mark::before,
#estrutura h2 mark::after,
.mission h2::before,
.mission h2::after,
.mission h2 span::before,
.mission h2 span::after,
.mission h2 mark::before,
.mission h2 mark::after {
  content: none !important;
  display: none !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

#estrutura .video-frame,
#estrutura .tire-frame,
#estrutura .mission-media,
.mission .video-frame,
.mission .tire-frame,
.mission .mission-media {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
}

/* ===== AJUSTE UX - VÍDEO SEM MOLDURA / FUNDO TRANSPARENTE ===== */
#estrutura .video-frame,
.mission .video-frame {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
  transform: none !important;
  transition: none !important;
}

#estrutura .video-frame:hover,
.mission .video-frame:hover {
  transform: none !important;
  box-shadow: none !important;
  border: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
}

#estrutura .video-frame::before,
#estrutura .video-frame::after,
.mission .video-frame::before,
.mission .video-frame::after {
  content: none !important;
  display: none !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

#estrutura .video-frame iframe,
.mission .video-frame iframe {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* =========================================================
   AJUSTE FINAL 07/05 - BRANCO CORRETO + TÍTULOS MAIS PESADOS
   - sessões claras em #fdfdfb
   - vídeo sem caixa visual
   - títulos com peso visual mais forte
   ========================================================= */

:root {
  --cream: #fdfdfb !important;
  --cream2: #fdfdfb !important;
}

.section-light,
section.section-light,
section#estrutura,
section#estrutura.section-light,
section#estrutura.mission,
section#estrutura.section-light.mission,
#estrutura.mission,
.mission.section-light,
.gorilla-section,
.manifesto,
.presence,
.specs {
  background: #fdfdfb !important;
  background-color: #fdfdfb !important;
}

/* Mantém o vídeo integrado ao fundo, sem moldura/sombra/hover */
#estrutura .video-frame,
.mission .video-frame {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
  transform: none !important;
  transition: none !important;
}

#estrutura .video-frame:hover,
.mission .video-frame:hover {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

#estrutura .video-frame::before,
#estrutura .video-frame::after,
.mission .video-frame::before,
.mission .video-frame::after {
  content: none !important;
  display: none !important;
}

/* Remove definitivamente o marca-texto/retângulo amarelado do título */
#estrutura h2,
#estrutura h2::first-line,
#estrutura h2 span,
#estrutura h2 mark,
.mission h2,
.mission h2::first-line,
.mission h2 span,
.mission h2 mark {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  -webkit-box-decoration-break: initial !important;
  box-decoration-break: initial !important;
}

#estrutura h2::before,
#estrutura h2::after,
#estrutura h2 span::before,
#estrutura h2 span::after,
#estrutura h2 mark::before,
#estrutura h2 mark::after,
.mission h2::before,
.mission h2::after,
.mission h2 span::before,
.mission h2 span::after,
.mission h2 mark::before,
.mission h2 mark::after {
  content: none !important;
  display: none !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* H1/H2 mais fortes, com presença visual próxima ao layout anterior */
h1, h2, h3,
.hero h1,
.section-title h2,
.mission h2,
.product-info-area h3,
.timeline strong,
.app-grid strong,
.hero-metrics strong {
  font-weight: 900 !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

.hero h1 {
  font-size: clamp(4.35rem, 7.25vw, 7.85rem) !important;
  line-height: .93 !important;
  letter-spacing: .05em !important;
}

.hero h1 span {
  display: block !important;
  white-space: nowrap !important;
}

.mission h2,
.section-title h2 {
  letter-spacing: .052em !important;
}

@media (max-width: 980px) {
  .hero h1 {
    font-size: clamp(3.35rem, 11vw, 5rem) !important;
  }
  .hero h1 span {
    white-space: normal !important;
  }
}

@media (max-width: 560px) {
  .hero h1 {
    font-size: 3.45rem !important;
    line-height: .96 !important;
  }
}

/* =========================================================
   AJUSTE FINAL - SEÇÃO PRESENÇA FORTE EM FUNDO PRETO
   - Mantém vermelho da marca
   - Inverte textos pretos para branco
   - Preserva fundo das demais seções claras em #fdfdfb
   ========================================================= */
.presence,
section.presence,
section.section-light.presence {
  background: #050505 !important;
  background-color: #050505 !important;
  background-image:
    radial-gradient(circle at 78% 26%, rgba(225, 37, 27, .18), transparent 34%),
    linear-gradient(180deg, #050505 0%, #080808 100%) !important;
  color: #ffffff !important;
  border-top: 1px solid rgba(255,255,255,.08) !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
}

.presence h2,
.presence h3,
.presence strong,
.presence .lead,
.presence p {
  color: #ffffff !important;
}

.presence .lead,
.presence p {
  color: rgba(255,255,255,.74) !important;
}

.presence .model-badge {
  background: var(--red) !important;
  color: #ffffff !important;
}

.presence .application-img {
  background: #0b0b0b !important;
  border-color: rgba(255,255,255,.12) !important;
  box-shadow: 0 26px 58px rgba(0,0,0,.42) !important;
}

.presence .tag-grid span {
  background: rgba(255,255,255,.045) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

.presence .btn-primary {
  background: var(--red) !important;
  color: #ffffff !important;
  box-shadow: 0 18px 42px rgba(225,37,27,.22) !important;
}

.presence .btn-primary:hover {
  background: #b91712 !important;
}

/* =========================================================
   AJUSTE UX - REMOVER TRAÇADO VERMELHO E SOMBRA EM HOVER
   Mantém hover apenas em elementos realmente clicáveis: botões e links.
   ========================================================= */
.model-card:hover,
.compare-card:hover,
.app-grid div:hover,
.gorilla-section .three-cards div:hover,
.hero-metrics div:hover,
.tag-grid span:hover,
.cta-box:hover,
.application-img:hover,
.gorilla-stage:hover,
.caminhao-stage:hover,
.manifesto-card:hover,
.tire-frame:hover,
.product-block-card:hover,
.spec-table:hover,
.presence .application-img:hover,
.presence .tag-grid span:hover {
  border-color: inherit !important;
  box-shadow: inherit !important;
  transform: none !important;
}

.model-card:hover img,
.application-img:hover img,
.caminhao-stage:hover img,
.gorilla-stage.caminhao-stage:hover img,
.product-block-card:hover .product-image-area img {
  transform: none !important;
  filter: inherit !important;
}

/* Garante que os cards da seção "Para quem é" não recebam borda vermelha/sombra no hover */
.app-grid div,
.app-grid div:hover {
  border-color: rgba(255,255,255,.1) !important;
  box-shadow: none !important;
}

/* Mantém os cards informativos neutros em todas as seções */
.hero-metrics div,
.hero-metrics div:hover,
.compare-card,
.compare-card:hover,
.model-card,
.model-card:hover,
.tag-grid span,
.tag-grid span:hover,
.gorilla-section .three-cards div,
.gorilla-section .three-cards div:hover {
  transition: none !important;
}

/* Botões continuam com microinteração, porque são elementos clicáveis */
.btn:hover,
a:hover,
button:hover,
.back-to-top:hover {
  cursor: none !important;
}

/* =========================================================
   AJUSTE FINAL UX - SOMENTE BOTÕES/LINKS TÊM INTERAÇÃO
   Remove hover, traçado vermelho, borda de destaque e sombra
   de todos os cards/blocos informativos.
   ========================================================= */
@media (pointer:fine) {
  html,
  body,
  body *,
  a,
  button,
  iframe,
  input,
  textarea,
  select,
  label {
    cursor: none !important;
  }
}

/* Elementos informativos: sem hover visual */
.hero-metrics div,
.model-card,
.compare-card,
.app-grid div,
.gorilla-section .three-cards div,
.three-cards div,
.tag-grid span,
.mini-grid span,
.spec-table,
.spec-table div,
.manifesto-card,
.tire-frame,
.application-img,
.gorilla-stage,
.caminhao-stage,
.video-frame,
.product-block-card,
.product-image-area,
.product-info-area,
.cta-box,
.timeline div,
.presence .tag-grid span {
  transition: none !important;
}

.hero-metrics div:hover {
  border-color: rgba(255,255,255,.12) !important;
  box-shadow: none !important;
  transform: none !important;
}

.model-card:hover {
  border-color: rgba(255,255,255,.10) !important;
  box-shadow: 0 24px 54px rgba(0,0,0,.48) !important;
  transform: none !important;
}

.compare-card:hover,
.app-grid div:hover,
.gorilla-section .three-cards div:hover,
.three-cards div:hover,
.tag-grid span:hover,
.mini-grid span:hover,
.spec-table:hover,
.spec-table div:hover,
.manifesto-card:hover,
.tire-frame:hover,
.application-img:hover,
.gorilla-stage:hover,
.caminhao-stage:hover,
.product-block-card:hover,
.product-image-area:hover,
.product-info-area:hover,
.timeline div:hover,
.presence .tag-grid span:hover {
  border-color: inherit !important;
  box-shadow: none !important;
  transform: none !important;
  outline: none !important;
}

/* A seção do vídeo deve continuar sem moldura/efeito */
.video-frame,
.video-frame:hover,
#estrutura .video-frame,
#estrutura .video-frame:hover,
.mission .video-frame,
.mission .video-frame:hover {
  border: 0 !important;
  border-color: transparent !important;
  box-shadow: none !important;
  background: transparent !important;
  transform: none !important;
  outline: none !important;
}

/* Imagens demonstrativas não aumentam no hover */
.model-card:hover img,
.application-img:hover img,
.caminhao-stage:hover img,
.gorilla-stage:hover img,
.gorilla-stage.caminhao-stage:hover img,
.product-block-card:hover img,
.product-block-card:hover .product-image-area img,
.hero-image:hover img {
  transform: none !important;
}

/* Cursor customizado muda apenas nos clicáveis reais */
a:hover,
button:hover,
.btn:hover,
.back-to-top:hover,
[role="button"]:hover,
input:hover,
textarea:hover,
select:hover {
  cursor: none !important;
}

/* =========================================================
   CORREÇÃO DEFINITIVA UX - SEM HOVER EM ELEMENTOS NÃO CLICÁVEIS
   Somente botões e links devem reagir visualmente ao mouse.
   ========================================================= */
@media (hover: hover) and (pointer: fine) {
  .hero-metrics div,
  .hero-metrics div:hover,
  .model-card,
  .model-card:hover,
  .compare-card,
  .compare-card:hover,
  .app-grid div,
  .app-grid div:hover,
  .gorilla-section .three-cards div,
  .gorilla-section .three-cards div:hover,
  .three-cards div,
  .three-cards div:hover,
  .tag-grid span,
  .tag-grid span:hover,
  .mini-grid span,
  .mini-grid span:hover,
  .spec-table,
  .spec-table:hover,
  .spec-table div,
  .spec-table div:hover,
  .manifesto-card,
  .manifesto-card:hover,
  .tire-frame,
  .tire-frame:hover,
  .application-img,
  .application-img:hover,
  .gorilla-stage,
  .gorilla-stage:hover,
  .caminhao-stage,
  .caminhao-stage:hover,
  .product-block-card,
  .product-block-card:hover,
  .product-image-area,
  .product-image-area:hover,
  .product-info-area,
  .product-info-area:hover,
  .timeline div,
  .timeline div:hover,
  .cta-box,
  .cta-box:hover {
    transition: none !important;
    transform: none !important;
    box-shadow: none !important;
    outline: 0 !important;
    cursor: none !important;
  }

  .hero-metrics div,
  .hero-metrics div:hover {
    border-color: rgba(255,255,255,.12) !important;
  }

  .model-card,
  .model-card:hover,
  .compare-card,
  .compare-card:hover,
  .app-grid div,
  .app-grid div:hover,
  .product-block-card,
  .product-block-card:hover,
  .product-image-area,
  .product-image-area:hover,
  .product-info-area,
  .product-info-area:hover {
    border-color: rgba(255,255,255,.10) !important;
  }

  .tag-grid span,
  .tag-grid span:hover,
  .presence .tag-grid span,
  .presence .tag-grid span:hover {
    border-color: rgba(255,255,255,.14) !important;
    background: rgba(255,255,255,.045) !important;
  }

  .mini-grid span,
  .mini-grid span:hover,
  .three-cards div,
  .three-cards div:hover,
  .gorilla-section .three-cards div,
  .gorilla-section .three-cards div:hover {
    border-color: rgba(255,255,255,.12) !important;
  }

  .spec-table,
  .spec-table:hover {
    border-color: #111111 !important;
    box-shadow: none !important;
  }

  .spec-table div,
  .spec-table div:hover {
    border-color: #e6dfd4 !important;
  }

  .application-img,
  .application-img:hover,
  .manifesto-card,
  .manifesto-card:hover,
  .tire-frame,
  .tire-frame:hover {
    border-color: transparent !important;
  }

  .cta-box,
  .cta-box:hover {
    border-color: rgba(255,255,255,.18) !important;
    box-shadow: none !important;
  }

  .model-card:hover img,
  .hero-image:hover img,
  .application-img:hover img,
  .caminhao-stage:hover img,
  .gorilla-stage:hover img,
  .product-block-card:hover img,
  .product-block-card:hover .product-image-area img {
    transform: none !important;
    filter: inherit !important;
  }
}

/* Botões e links continuam sendo os únicos elementos com microinteração */
a:hover,
button:hover,
.btn:hover,
.back-to-top:hover,
[role="button"]:hover {
  cursor: none !important;
}

/* =========================================================
   AJUSTE FINAL 07-05 - HERO HARMÔNICO E SEM HOVER EM PNEUS
   - A imagem do hero não reage ao mouse.
   - Cards/blocos informativos não ganham traçado/sombra no hover.
   - Somente botões e links mantêm comportamento clicável.
   ========================================================= */

.hero-grid {
  grid-template-columns: .88fr 1.22fr !important;
  gap: 28px !important;
  align-items: center !important;
}

.hero-copy {
  max-width: 760px !important;
}

.hero h1 {
  font-size: clamp(4.15rem, 6.55vw, 7.25rem) !important;
  line-height: .94 !important;
  max-width: 780px !important;
}

.hero h1 span {
  display: block !important;
  white-space: nowrap !important;
}

.hero-image {
  min-height: 640px !important;
  pointer-events: none !important;
}

.hero-image *,
.hero-image img,
.hero-glow {
  pointer-events: none !important;
}

.hero-image img,
.hero-image:hover img,
.site-loaded .hero-image:hover img {
  width: 132% !important;
  max-width: 1040px !important;
  height: auto !important;
  object-fit: contain !important;
  transform: translateX(14px) !important;
  transition: none !important;
  filter: drop-shadow(0 42px 62px rgba(0,0,0,.78)) !important;
}

/* Blocos informativos: sem reação visual no mouse */
.hero-metrics div,
.hero-metrics div:hover,
.model-card,
.model-card:hover,
.compare-card,
.compare-card:hover,
.app-grid div,
.app-grid div:hover,
.tag-grid span,
.tag-grid span:hover,
.presence .tag-grid span,
.presence .tag-grid span:hover,
.mini-grid span,
.mini-grid span:hover,
.three-cards div,
.three-cards div:hover,
.spec-table,
.spec-table:hover,
.spec-table div,
.spec-table div:hover,
.product-block-card,
.product-block-card:hover,
.product-image-area,
.product-image-area:hover,
.product-info-area,
.product-info-area:hover,
.application-img,
.application-img:hover,
.manifesto-card,
.manifesto-card:hover,
.tire-frame,
.tire-frame:hover,
.gorilla-stage,
.gorilla-stage:hover,
.caminhao-stage,
.caminhao-stage:hover,
.timeline div,
.timeline div:hover,
.cta-box,
.cta-box:hover {
  transform: none !important;
  transition: none !important;
  box-shadow: none !important;
  outline: none !important;
}

.hero-metrics div,
.hero-metrics div:hover {
  border: 1px solid rgba(255,255,255,.12) !important;
  background: linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.035)) !important;
}

.presence .tag-grid span,
.presence .tag-grid span:hover {
  border: 1px solid rgba(255,255,255,.16) !important;
  background: rgba(255,255,255,.045) !important;
  color: #ffffff !important;
}

.app-grid div,
.app-grid div:hover,
.compare-card,
.compare-card:hover,
.product-block-card,
.product-block-card:hover,
.model-card,
.model-card:hover {
  border-color: rgba(255,255,255,.10) !important;
}

.spec-table,
.spec-table:hover {
  border: 1px solid #111111 !important;
  box-shadow: none !important;
}

.spec-table div,
.spec-table div:hover {
  border-bottom-color: #e6dfd4 !important;
}

.cta-box,
.cta-box:hover {
  border: 1px solid rgba(255,255,255,.18) !important;
  background: rgba(255,255,255,.10) !important;
  box-shadow: none !important;
}

/* Imagens demonstrativas não aumentam, não flutuam e não recebem hover */
.model-card img,
.model-card:hover img,
.application-img img,
.application-img:hover img,
.caminhao-stage img,
.caminhao-stage:hover img,
.gorilla-stage img,
.gorilla-stage:hover img,
.product-block-card img,
.product-block-card:hover img,
.product-block-card:hover .product-image-area img {
  transition: none !important;
  transform: none !important;
}

/* Elementos não clicáveis não devem parecer clicáveis */
.hero-metrics div,
.model-card,
.compare-card,
.app-grid div,
.tag-grid span,
.spec-table,
.spec-table div,
.product-block-card,
.product-image-area,
.product-info-area,
.application-img,
.manifesto-card,
.tire-frame,
.gorilla-stage,
.caminhao-stage,
.timeline div {
  cursor: none !important;
}

/* Apenas botões e links seguem com microinteração */
a,
button,
.btn,
.back-to-top,
[role="button"] {
  pointer-events: auto !important;
  cursor: none !important;
}

@media (max-width: 980px) {
  .hero-grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  .hero h1 {
    font-size: clamp(3.35rem, 11vw, 5rem) !important;
  }

  .hero h1 span {
    white-space: normal !important;
  }

  .hero-image {
    min-height: 360px !important;
  }

  .hero-image img,
  .hero-image:hover img {
    width: min(96%, 620px) !important;
    max-width: 620px !important;
    transform: none !important;
  }
}

@media (max-width: 560px) {
  .hero h1 {
    font-size: 3.4rem !important;
    line-height: .96 !important;
  }

  .hero-image {
    min-height: 260px !important;
  }

  .hero-image img,
  .hero-image:hover img {
    width: min(94%, 390px) !important;
    max-width: 390px !important;
  }
}


/* =========================================================
   AJUSTE FINAL 07/05 - HERO MAIS HARMÔNICO
   - Texto alterado para: O futuro tem assinatura brasileira.
   - Logo Zago maior no hero.
   - Pneus maiores, porém sem invadir o bloco do texto.
   - Sem hover na imagem dos pneus.
========================================================= */

.hero-grid {
  grid-template-columns: minmax(460px, .92fr) minmax(520px, 1.08fr) !important;
  gap: clamp(64px, 7vw, 112px) !important;
  align-items: center !important;
}

.hero-copy {
  position: relative !important;
  z-index: 3 !important;
  max-width: 640px !important;
}

.hero .zago-logo {
  height: clamp(96px, 8.2vw, 138px) !important;
  max-width: 430px !important;
  width: auto !important;
  object-fit: contain !important;
  margin-bottom: clamp(42px, 4.8vw, 70px) !important;
  filter: drop-shadow(0 18px 34px rgba(0,0,0,.66)) !important;
}

.hero h1 {
  font-size: clamp(4.3rem, 6.35vw, 7.05rem) !important;
  line-height: .94 !important;
  max-width: 660px !important;
  letter-spacing: .045em !important;
}

.hero h1 span {
  color: var(--red) !important;
  display: block !important;
  white-space: nowrap !important;
}

.hero-copy p {
  max-width: 610px !important;
}

.hero-image {
  position: relative !important;
  z-index: 2 !important;
  min-height: clamp(560px, 48vw, 700px) !important;
  justify-content: center !important;
  overflow: visible !important;
  pointer-events: none !important;
}

.hero-image img,
.hero-image:hover img,
.site-loaded .hero-image:hover img {
  width: min(108%, 860px) !important;
  max-width: 860px !important;
  transform: translateX(8px) !important;
  transition: none !important;
  pointer-events: none !important;
  filter: drop-shadow(0 44px 66px rgba(0,0,0,.78)) !important;
}

.hero-glow {
  width: 82% !important;
  height: 56% !important;
  pointer-events: none !important;
}

/* Remove qualquer reação visual da imagem no mouse */
.hero-image *,
.hero-image img:hover {
  cursor: none !important;
  transform-origin: center center !important;
}

@media (max-width: 1180px) {
  .hero-grid {
    grid-template-columns: .98fr 1.02fr !important;
    gap: 46px !important;
  }

  .hero .zago-logo {
    height: clamp(82px, 7.5vw, 112px) !important;
    max-width: 360px !important;
  }

  .hero h1 {
    font-size: clamp(3.8rem, 6vw, 5.75rem) !important;
    max-width: 590px !important;
  }

  .hero-image img,
  .hero-image:hover img,
  .site-loaded .hero-image:hover img {
    width: min(106%, 720px) !important;
    transform: translateX(0) !important;
  }
}

@media (max-width: 980px) {
  .hero-grid {
    grid-template-columns: 1fr !important;
    gap: 34px !important;
  }

  .hero-copy {
    max-width: 100% !important;
  }

  .hero .zago-logo {
    height: 78px !important;
    max-width: 300px !important;
    margin-bottom: 34px !important;
  }

  .hero h1 {
    font-size: clamp(3.35rem, 11vw, 5rem) !important;
    max-width: 100% !important;
  }

  .hero-image {
    min-height: 340px !important;
    order: 0 !important;
  }

  .hero-image img,
  .hero-image:hover img,
  .site-loaded .hero-image:hover img {
    width: min(92%, 560px) !important;
    max-width: 560px !important;
    transform: none !important;
  }
}

@media (max-width: 560px) {
  .hero .zago-logo {
    height: 60px !important;
    max-width: 235px !important;
  }

  .hero h1 {
    font-size: 3rem !important;
    line-height: .98 !important;
  }

  .hero h1 span {
    white-space: normal !important;
  }

  .hero-image {
    min-height: 250px !important;
  }

  .hero-image img,
  .hero-image:hover img,
  .site-loaded .hero-image:hover img {
    width: min(88%, 380px) !important;
  }
}


/* =========================================================
   AJUSTE 07/05 - PALAVRA "BRASILEIRA" COM CORES DO BRASIL
   Amarelo, azul e verde aplicados somente no destaque do H1.
========================================================= */
.hero h1 span {
  color: transparent !important;
  background: linear-gradient(90deg, #FFDF00 0%, #FFDF00 28%, #002776 42%, #002776 62%, #009739 76%, #009739 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: none !important;
}


/* =========================================================
   AJUSTE 07/05 - HERO SEM MÉTRICAS E MAIS HARMÔNICO
   - Remove cards informativos do hero no HTML.
   - Reequilibra texto, logo e pneus sem sobreposição.
   - Mantém cursor customizado e remove hover da imagem.
========================================================= */

.hero-grid {
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr) !important;
  gap: clamp(86px, 8.6vw, 142px) !important;
  align-items: center !important;
}

.hero-copy {
  max-width: 620px !important;
  z-index: 4 !important;
}

.hero .zago-logo {
  height: clamp(122px, 9.4vw, 168px) !important;
  max-width: 520px !important;
  margin-bottom: clamp(34px, 4.2vw, 58px) !important;
}

.hero h1 {
  font-size: clamp(4.25rem, 6.1vw, 6.85rem) !important;
  line-height: .94 !important;
  max-width: 620px !important;
}

.hero h1 span {
  display: block !important;
  white-space: nowrap !important;
}

.hero-copy p {
  max-width: 585px !important;
  margin-top: 30px !important;
}

.hero-actions {
  margin-top: 38px !important;
}

.hero-image {
  min-height: clamp(540px, 45vw, 680px) !important;
  overflow: visible !important;
  pointer-events: none !important;
}

.hero-image img,
.hero-image:hover img,
.site-loaded .hero-image:hover img {
  width: min(100%, 790px) !important;
  max-width: 790px !important;
  transform: translateX(0) !important;
  transition: none !important;
  pointer-events: none !important;
}

.hero-image *,
.hero-image img:hover {
  cursor: none !important;
}

@media (max-width: 1180px) {
  .hero-grid {
    grid-template-columns: minmax(0, .96fr) minmax(0, 1.04fr) !important;
    gap: 58px !important;
  }

  .hero .zago-logo {
    height: clamp(92px, 8.2vw, 126px) !important;
    max-width: 410px !important;
  }

  .hero h1 {
    font-size: clamp(3.75rem, 6vw, 5.9rem) !important;
    max-width: 560px !important;
  }

  .hero-image img,
  .hero-image:hover img,
  .site-loaded .hero-image:hover img {
    width: min(98%, 680px) !important;
    max-width: 680px !important;
  }
}

@media (max-width: 980px) {
  .hero-grid {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }

  .hero .zago-logo {
    height: 86px !important;
    max-width: 320px !important;
    margin-bottom: 32px !important;
  }

  .hero h1 {
    font-size: clamp(3.2rem, 11vw, 5rem) !important;
    max-width: 100% !important;
  }

  .hero-copy p {
    max-width: 100% !important;
  }

  .hero-image {
    min-height: 340px !important;
  }

  .hero-image img,
  .hero-image:hover img,
  .site-loaded .hero-image:hover img {
    width: min(92%, 560px) !important;
    max-width: 560px !important;
  }
}

@media (max-width: 560px) {
  .hero .zago-logo {
    height: 64px !important;
    max-width: 245px !important;
  }

  .hero h1 {
    font-size: 3rem !important;
  }

  .hero h1 span {
    white-space: normal !important;
  }

  .hero-actions {
    margin-top: 28px !important;
  }
}


/* =========================================================
   AJUSTE FINAL 07/05 - HERO BRASILEIRA BRANCO + ÍCONE BRASIL
   - Remove degradê amarelo/azul/verde da palavra brasileira.
   - Mantém somente um CTA.
   - Harmoniza bloco de texto e imagem do pneu para equilíbrio visual.
========================================================= */
.hero h1 .hero-title-line,
.hero h1 span.hero-title-line {
  color: #ffffff !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: 0 18px 44px rgba(0,0,0,.34) !important;
  display: flex !important;
  align-items: center !important;
  gap: clamp(12px, 1.2vw, 20px) !important;
  white-space: nowrap !important;
}

.brasil-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  width: clamp(48px, 4.1vw, 70px) !important;
  height: clamp(48px, 4.1vw, 70px) !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.10) !important;
  border: 1px solid rgba(255,255,255,.20) !important;
  box-shadow: 0 18px 42px rgba(0,0,0,.34), inset 0 0 0 1px rgba(255,255,255,.04) !important;
  font-family: 'Plus Jakarta Sans', Arial, sans-serif !important;
  font-size: clamp(1.65rem, 2.4vw, 2.35rem) !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  transform: translateY(-.04em) !important;
  -webkit-text-fill-color: initial !important;
}

.hero-grid {
  grid-template-columns: minmax(0, .98fr) minmax(0, 1.02fr) !important;
  gap: clamp(54px, 6.2vw, 104px) !important;
  min-height: calc(100vh - 86px) !important;
}

.hero-copy {
  max-width: 660px !important;
  align-self: center !important;
}

.hero .zago-logo {
  height: clamp(120px, 8.7vw, 156px) !important;
  max-width: 500px !important;
  margin-bottom: clamp(28px, 3.4vw, 46px) !important;
}

.hero .pill {
  margin-bottom: clamp(22px, 2.2vw, 30px) !important;
}

.hero h1 {
  font-size: clamp(4.05rem, 5.75vw, 6.45rem) !important;
  line-height: .96 !important;
  max-width: 665px !important;
}

.hero-copy p {
  max-width: 625px !important;
  margin-top: clamp(22px, 2.2vw, 30px) !important;
  font-size: clamp(1.02rem, 1.08vw, 1.16rem) !important;
}

.hero-actions {
  margin-top: clamp(30px, 3vw, 42px) !important;
}

.hero-actions .btn-hero-specialist {
  min-width: min(100%, 300px) !important;
  min-height: 58px !important;
  padding-inline: 34px !important;
  white-space: nowrap !important;
}

.hero-image {
  min-height: clamp(560px, 45vw, 690px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.hero-image img,
.hero-image:hover img,
.site-loaded .hero-image:hover img {
  width: min(108%, 830px) !important;
  max-width: 830px !important;
  transform: translateX(-6px) !important;
  filter: drop-shadow(0 44px 68px rgba(0,0,0,.78)) !important;
}

@media (max-width: 1180px) {
  .hero-grid {
    grid-template-columns: minmax(0, .98fr) minmax(0, 1.02fr) !important;
    gap: 44px !important;
  }

  .hero .zago-logo {
    height: clamp(88px, 7.8vw, 118px) !important;
    max-width: 390px !important;
  }

  .hero h1 {
    font-size: clamp(3.45rem, 5.55vw, 5.35rem) !important;
    max-width: 565px !important;
  }

  .hero-image img,
  .hero-image:hover img,
  .site-loaded .hero-image:hover img {
    width: min(104%, 700px) !important;
    max-width: 700px !important;
    transform: translateX(-2px) !important;
  }
}

@media (max-width: 980px) {
  .hero-grid {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
    gap: 32px !important;
    padding-top: 58px !important;
    padding-bottom: 58px !important;
  }

  .hero-copy {
    max-width: 100% !important;
  }

  .hero .zago-logo {
    height: 82px !important;
    max-width: 315px !important;
    margin-bottom: 28px !important;
  }

  .hero h1 {
    font-size: clamp(3.25rem, 10.6vw, 5rem) !important;
    max-width: 100% !important;
  }

  .hero h1 .hero-title-line,
  .hero h1 span.hero-title-line {
    justify-content: flex-start !important;
  }

  .hero-image {
    min-height: 350px !important;
  }

  .hero-image img,
  .hero-image:hover img,
  .site-loaded .hero-image:hover img {
    width: min(94%, 575px) !important;
    max-width: 575px !important;
    transform: none !important;
  }
}

@media (max-width: 560px) {
  .hero .zago-logo {
    height: 62px !important;
    max-width: 240px !important;
  }

  .hero h1 {
    font-size: 2.92rem !important;
    line-height: .99 !important;
  }

  .hero h1 .hero-title-line,
  .hero h1 span.hero-title-line {
    white-space: nowrap !important;
    gap: 10px !important;
  }

  .brasil-icon {
    width: 42px !important;
    height: 42px !important;
    font-size: 1.45rem !important;
  }

  .hero-actions .btn-hero-specialist {
    width: 100% !important;
  }

  .hero-image {
    min-height: 255px !important;
  }

  .hero-image img,
  .hero-image:hover img,
  .site-loaded .hero-image:hover img {
    width: min(92%, 395px) !important;
  }
}


/* =========================================================
   AJUSTE 07/05 - ÍCONE OFICIAL DO BRASIL + PNEU MAIS PROPORCIONAL
   - Substitui emoji/texto por SVG dentro do círculo.
   - Aumenta o pneu no desktop sem invadir a coluna de texto.
   - Mantém o H1 branco e o CTA único.
========================================================= */
.hero h1 .hero-title-line,
.hero h1 span.hero-title-line {
  color: #ffffff !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: #ffffff !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: clamp(14px, 1.15vw, 20px) !important;
  white-space: nowrap !important;
}

.brasil-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  width: clamp(54px, 4.35vw, 76px) !important;
  height: clamp(54px, 4.35vw, 76px) !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.24) !important;
  box-shadow: 0 20px 46px rgba(0,0,0,.38), inset 0 0 0 1px rgba(255,255,255,.05) !important;
  overflow: hidden !important;
  transform: translateY(-.03em) !important;
  padding: 10px !important;
  -webkit-text-fill-color: initial !important;
}

.brasil-icon img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block !important;
  border-radius: 0 !important;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.28)) !important;
}

.hero-grid {
  grid-template-columns: minmax(0, .96fr) minmax(0, 1.04fr) !important;
  gap: clamp(54px, 5.8vw, 96px) !important;
}

.hero h1 {
  max-width: 690px !important;
}

.hero-image {
  min-height: clamp(600px, 48vw, 740px) !important;
}

.hero-image img,
.hero-image:hover img,
.site-loaded .hero-image:hover img {
  width: min(116%, 930px) !important;
  max-width: 930px !important;
  transform: translateX(-12px) !important;
}

@media (max-width: 1180px) {
  .hero-grid {
    gap: 38px !important;
  }

  .hero h1 {
    max-width: 590px !important;
  }

  .hero-image {
    min-height: clamp(500px, 45vw, 620px) !important;
  }

  .hero-image img,
  .hero-image:hover img,
  .site-loaded .hero-image:hover img {
    width: min(108%, 760px) !important;
    max-width: 760px !important;
    transform: translateX(-6px) !important;
  }
}

@media (max-width: 980px) {
  .hero h1 .hero-title-line,
  .hero h1 span.hero-title-line {
    display: flex !important;
    justify-content: flex-start !important;
  }

  .hero-image {
    min-height: 365px !important;
  }

  .hero-image img,
  .hero-image:hover img,
  .site-loaded .hero-image:hover img {
    width: min(96%, 610px) !important;
    max-width: 610px !important;
    transform: none !important;
  }
}

@media (max-width: 560px) {
  .hero h1 .hero-title-line,
  .hero h1 span.hero-title-line {
    gap: 9px !important;
  }

  .brasil-icon {
    width: 40px !important;
    height: 40px !important;
    padding: 7px !important;
  }

  .hero-image {
    min-height: 270px !important;
  }

  .hero-image img,
  .hero-image:hover img,
  .site-loaded .hero-image:hover img {
    width: min(94%, 420px) !important;
  }
}

/* =========================================================
   AJUSTE 07/05 - REMOVER CÍRCULO/TRAÇADO DO ÍCONE DO BRASIL
   Mantém o ícone no mesmo posicionamento, sem borda, fundo ou sombra externa.
========================================================= */
.hero h1 .brasil-icon,
.hero h1 span.brasil-icon,
.brasil-icon {
  border: none !important;
  outline: none !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

.hero h1 .brasil-icon::before,
.hero h1 .brasil-icon::after,
.hero h1 span.brasil-icon::before,
.hero h1 span.brasil-icon::after,
.brasil-icon::before,
.brasil-icon::after {
  content: none !important;
  display: none !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

.brasil-icon img {
  border: none !important;
  outline: none !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.28)) !important;
}

/* =========================================================
   AJUSTE 07/05 - BANDEIRA DO BRASIL NO CANTINHO INFERIOR DO PNEU
   - Remove a bandeira do H1.
   - Posiciona a bandeira próxima à base do pneu, como assinatura visual.
========================================================= */
.hero h1 .hero-title-line,
.hero h1 span.hero-title-line {
  display: block !important;
  color: #ffffff !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: #ffffff !important;
  white-space: normal !important;
}

.hero-image .hero-tire-img,
.hero-image:hover .hero-tire-img,
.site-loaded .hero-image:hover .hero-tire-img {
  position: relative !important;
  z-index: 2 !important;
}

.hero-brazil-flag-corner {
  position: absolute !important;
  z-index: 4 !important;
  right: clamp(18px, 3.2vw, 54px) !important;
  bottom: clamp(34px, 5.2vw, 82px) !important;
  width: clamp(58px, 5.4vw, 92px) !important;
  height: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: none !important;
  outline: none !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  pointer-events: none !important;
}

.hero-brazil-flag-corner img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  object-fit: contain !important;
  border: none !important;
  outline: none !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  filter: drop-shadow(0 12px 18px rgba(0,0,0,.42)) !important;
}

@media (max-width: 980px) {
  .hero-brazil-flag-corner {
    right: clamp(28px, 18vw, 150px) !important;
    bottom: 28px !important;
    width: clamp(50px, 11vw, 74px) !important;
  }
}

@media (max-width: 560px) {
  .hero-brazil-flag-corner {
    right: 28px !important;
    bottom: 22px !important;
    width: 48px !important;
  }
}


/* =========================================================
   AJUSTE 07/05 - BANDEIRA NO PONTO SUPERIOR DO PNEU + ALINHAMENTO HERO
   - Reposiciona a bandeira do Brasil para o ponto indicado no pneu.
   - Reequilibra a imagem para ficar na mesma leitura vertical do bloco de texto.
========================================================= */
.hero-grid {
  align-items: center !important;
}

.hero-image {
  min-height: clamp(560px, 44vw, 680px) !important;
  align-self: center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
}

.hero-image .hero-tire-img,
.hero-image:hover .hero-tire-img,
.site-loaded .hero-image:hover .hero-tire-img {
  width: min(112%, 900px) !important;
  max-width: 900px !important;
  transform: translate(-8px, 10px) !important;
  position: relative !important;
  z-index: 2 !important;
}

.hero-brazil-flag-corner {
  position: absolute !important;
  z-index: 5 !important;
  top: clamp(94px, 15.6vw, 126px) !important;
  left: clamp(236px, 31vw, 338px) !important;
  right: auto !important;
  bottom: auto !important;
  width: clamp(42px, 3.8vw, 58px) !important;
  height: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: none !important;
  outline: none !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  pointer-events: none !important;
}

.hero-brazil-flag-corner img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  object-fit: contain !important;
  border: none !important;
  outline: none !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  filter: drop-shadow(0 10px 16px rgba(0,0,0,.44)) !important;
}

@media (max-width: 1180px) {
  .hero-image .hero-tire-img,
  .hero-image:hover .hero-tire-img,
  .site-loaded .hero-image:hover .hero-tire-img {
    width: min(106%, 740px) !important;
    max-width: 740px !important;
    transform: translate(-2px, 8px) !important;
  }

  .hero-brazil-flag-corner {
    top: clamp(84px, 13.8vw, 110px) !important;
    left: clamp(196px, 28.5vw, 280px) !important;
    width: clamp(38px, 3.9vw, 50px) !important;
  }
}

@media (max-width: 980px) {
  .hero-image {
    min-height: 360px !important;
  }

  .hero-image .hero-tire-img,
  .hero-image:hover .hero-tire-img,
  .site-loaded .hero-image:hover .hero-tire-img {
    width: min(94%, 590px) !important;
    max-width: 590px !important;
    transform: translate(0, 4px) !important;
  }

  .hero-brazil-flag-corner {
    top: clamp(56px, 11vw, 78px) !important;
    left: calc(50% - 56px) !important;
    width: clamp(34px, 7.5vw, 46px) !important;
  }
}

@media (max-width: 560px) {
  .hero-image {
    min-height: 260px !important;
  }

  .hero-image .hero-tire-img,
  .hero-image:hover .hero-tire-img,
  .site-loaded .hero-image:hover .hero-tire-img {
    width: min(93%, 410px) !important;
    transform: translate(0, 2px) !important;
  }

  .hero-brazil-flag-corner {
    top: 48px !important;
    left: calc(50% - 44px) !important;
    width: 34px !important;
  }
}


/* =========================================================
   AJUSTE 07/05 - H1 SEM PONTO + TEXTO CORRELACIONADO + ASSINATURA CALIGRÁFICA
   - Remove qualquer herança visual do ponto final no H1.
   - Adiciona "Zago Tyres" grande atrás dos pneus como detalhe premium.
   - Reposiciona a bandeira com respiro para não encostar no pneu.
========================================================= */
.hero h1 .hero-title-line,
.hero h1 span.hero-title-line {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

.hero-copy > p {
  max-width: 560px !important;
  font-size: clamp(1rem, 1.28vw, 1.18rem) !important;
  line-height: 1.62 !important;
  letter-spacing: -0.015em !important;
}

.hero-image {
  position: relative !important;
  isolation: isolate !important;
}

.hero-image::after {
  content: "Zago Tyres" !important;
  position: absolute !important;
  z-index: 1 !important;
  left: 48% !important;
  top: 48% !important;
  transform: translate(-50%, -50%) rotate(-8deg) !important;
  font-family: "Brush Script MT", "Segoe Script", "Lucida Handwriting", cursive !important;
  font-size: clamp(6.8rem, 12.8vw, 13.8rem) !important;
  font-weight: 400 !important;
  line-height: .82 !important;
  white-space: nowrap !important;
  color: rgba(255, 255, 255, .065) !important;
  text-shadow: 0 22px 60px rgba(255, 255, 255, .045) !important;
  pointer-events: none !important;
  user-select: none !important;
}

.hero-image .hero-glow {
  z-index: 0 !important;
}

.hero-image .hero-tire-img,
.hero-image:hover .hero-tire-img,
.site-loaded .hero-image:hover .hero-tire-img {
  z-index: 3 !important;
}

.hero-brazil-flag-corner {
  z-index: 5 !important;
  top: clamp(70px, 11.6vw, 96px) !important;
  left: clamp(176px, 25.2vw, 260px) !important;
  width: clamp(38px, 3.35vw, 52px) !important;
  transform: translate(-10px, -12px) !important;
}

@media (max-width: 1180px) {
  .hero-image::after {
    font-size: clamp(5.8rem, 11.2vw, 10.6rem) !important;
    left: 50% !important;
    top: 48% !important;
  }

  .hero-brazil-flag-corner {
    top: clamp(62px, 10.8vw, 82px) !important;
    left: clamp(156px, 24vw, 220px) !important;
    width: clamp(34px, 3.55vw, 44px) !important;
    transform: translate(-12px, -10px) !important;
  }
}

@media (max-width: 980px) {
  .hero-image::after {
    font-size: clamp(4.2rem, 18vw, 7.4rem) !important;
    top: 50% !important;
    opacity: .72 !important;
  }

  .hero-brazil-flag-corner {
    top: clamp(42px, 9.5vw, 62px) !important;
    left: calc(50% - 86px) !important;
    width: clamp(32px, 7vw, 42px) !important;
    transform: translate(-8px, -8px) !important;
  }
}

@media (max-width: 560px) {
  .hero-image::after {
    font-size: clamp(3.4rem, 20vw, 5rem) !important;
  }

  .hero-brazil-flag-corner {
    top: 36px !important;
    left: calc(50% - 66px) !important;
    width: 30px !important;
    transform: translate(-7px, -7px) !important;
  }
}


/* =========================================================
   AJUSTE 07/05 - ASSINATURA EM EFEITO DE ESCRITA + BANDEIRA NO CANTO INFERIOR DO PNEU
   - A assinatura "Zago Tyres" ganhou fonte mais fina e elegante, estilo photography/signature.
   - O texto atrás do pneu entra com efeito de escrita/revelação.
   - A bandeira do Brasil foi para baixo do pneu, no canto, com respiro para não encostar na borracha.
========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap');

.hero-image::after {
  content: "Zago Tyres" !important;
  z-index: 1 !important;
  left: 50% !important;
  top: 47% !important;
  transform: translate(-50%, -50%) rotate(-7deg) !important;
  font-family: "Photography", "Photograph Signature", "Great Vibes", "Segoe Script", "Brush Script MT", cursive !important;
  font-size: clamp(8.4rem, 15.2vw, 17rem) !important;
  font-weight: 400 !important;
  letter-spacing: .01em !important;
  line-height: .72 !important;
  color: rgba(255,255,255,.075) !important;
  text-shadow: 0 20px 64px rgba(255,255,255,.08) !important;
  opacity: .96 !important;
  max-width: 0 !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  animation: zagoSignatureWrite 2.45s cubic-bezier(.16,1,.3,1) .55s forwards !important;
  will-change: max-width, opacity, filter !important;
}

@keyframes zagoSignatureWrite {
  0% {
    max-width: 0;
    opacity: 0;
    filter: blur(1.5px);
  }
  18% {
    opacity: .95;
  }
  100% {
    max-width: 980px;
    opacity: .96;
    filter: blur(0);
  }
}

.hero-brazil-flag-corner {
  top: auto !important;
  left: auto !important;
  right: clamp(70px, 7.2vw, 118px) !important;
  bottom: clamp(44px, 5vw, 82px) !important;
  width: clamp(42px, 4.1vw, 62px) !important;
  transform: none !important;
  z-index: 6 !important;
}

.hero-brazil-flag-corner img {
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.48)) !important;
}

@media (max-width: 1180px) {
  .hero-image::after {
    font-size: clamp(6.6rem, 13.6vw, 12rem) !important;
    top: 47% !important;
  }

  .hero-brazil-flag-corner {
    right: clamp(50px, 6.4vw, 84px) !important;
    bottom: clamp(42px, 5vw, 64px) !important;
    width: clamp(38px, 4.1vw, 52px) !important;
  }
}

@media (max-width: 980px) {
  .hero-image::after {
    font-size: clamp(4.9rem, 19vw, 8.6rem) !important;
    top: 50% !important;
  }

  .hero-brazil-flag-corner {
    right: calc(50% - 190px) !important;
    bottom: 24px !important;
    width: clamp(34px, 7vw, 44px) !important;
  }
}

@media (max-width: 560px) {
  .hero-image::after {
    font-size: clamp(4rem, 21vw, 5.8rem) !important;
    top: 50% !important;
  }

  .hero-brazil-flag-corner {
    right: calc(50% - 126px) !important;
    bottom: 18px !important;
    width: 32px !important;
  }
}


/* =========================================================
   CORREÇÃO DEFINITIVA 07/05 - ASSINATURA VISÍVEL + ÍCONE BRASIL EM DIAGONAL
   - Corrige conflito onde qualquer img dentro do hero recebia tamanho de pneu.
   - Deixa a assinatura atrás do pneu com mais presença e efeito de escrita.
   - Posiciona o ícone do Brasil na diagonal inferior direita, com respiro.
========================================================= */
.hero-image {
  position: relative !important;
  isolation: isolate !important;
  overflow: visible !important;
}

.hero-image::after {
  content: "Zago Tyres" !important;
  position: absolute !important;
  z-index: 1 !important;
  left: 49% !important;
  top: 48% !important;
  width: max-content !important;
  max-width: 0 !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  transform: translate(-50%, -50%) rotate(-8deg) !important;
  font-family: "Great Vibes", "Segoe Script", "Brush Script MT", cursive !important;
  font-size: clamp(9rem, 16.8vw, 18.8rem) !important;
  font-weight: 400 !important;
  line-height: .72 !important;
  letter-spacing: .01em !important;
  color: rgba(255,255,255,.155) !important;
  text-shadow: 0 18px 52px rgba(225,37,27,.18), 0 26px 70px rgba(255,255,255,.10) !important;
  pointer-events: none !important;
  user-select: none !important;
  animation: zagoSignatureWriteFinal 2.25s cubic-bezier(.16,1,.3,1) .35s forwards !important;
  will-change: max-width, opacity, filter !important;
}

@keyframes zagoSignatureWriteFinal {
  0% { max-width: 0; opacity: 0; filter: blur(2px); }
  22% { opacity: .82; }
  100% { max-width: 1150px; opacity: 1; filter: blur(0); }
}

.hero-image .hero-glow {
  z-index: 0 !important;
}

.hero-image .hero-tire-img,
.hero-image:hover .hero-tire-img,
.site-loaded .hero-image:hover .hero-tire-img {
  position: relative !important;
  z-index: 3 !important;
  width: min(110%, 870px) !important;
  max-width: 870px !important;
  height: auto !important;
  object-fit: contain !important;
  transform: translateX(-4px) !important;
  transition: none !important;
}

.hero-brazil-flag-corner {
  position: absolute !important;
  z-index: 6 !important;
  top: auto !important;
  left: auto !important;
  right: clamp(18px, 3.1vw, 46px) !important;
  bottom: clamp(78px, 8.4vw, 132px) !important;
  width: clamp(44px, 4vw, 60px) !important;
  height: auto !important;
  transform: rotate(-8deg) !important;
  pointer-events: none !important;
}

.hero-brazil-flag-corner img,
.hero-image .hero-brazil-flag-corner img,
.hero-image:hover .hero-brazil-flag-corner img,
.site-loaded .hero-image:hover .hero-brazil-flag-corner img {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  transform: none !important;
  transition: none !important;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.55)) !important;
}

@media (max-width: 1180px) {
  .hero-image::after {
    left: 50% !important;
    top: 49% !important;
    font-size: clamp(7rem, 15vw, 13rem) !important;
  }

  .hero-brazil-flag-corner {
    right: clamp(14px, 2.4vw, 34px) !important;
    bottom: clamp(70px, 7.2vw, 104px) !important;
    width: clamp(40px, 4vw, 54px) !important;
  }
}

@media (max-width: 980px) {
  .hero-image::after {
    font-size: clamp(5.2rem, 20vw, 9rem) !important;
    top: 50% !important;
  }

  .hero-image .hero-tire-img,
  .hero-image:hover .hero-tire-img,
  .site-loaded .hero-image:hover .hero-tire-img {
    width: min(92%, 500px) !important;
    max-width: 500px !important;
    transform: translateX(0) !important;
  }

  .hero-brazil-flag-corner {
    right: calc(50% - 230px) !important;
    bottom: 44px !important;
    width: clamp(34px, 6vw, 44px) !important;
  }
}

@media (max-width: 560px) {
  .hero-image::after {
    font-size: clamp(4.2rem, 22vw, 6rem) !important;
  }

  .hero-image .hero-tire-img,
  .hero-image:hover .hero-tire-img,
  .site-loaded .hero-image:hover .hero-tire-img {
    width: min(90%, 350px) !important;
    max-width: 350px !important;
  }

  .hero-brazil-flag-corner {
    right: calc(50% - 162px) !important;
    bottom: 34px !important;
    width: 32px !important;
  }
}


/* =========================================================
   AJUSTE FINAL SOLICITADO - ASSINATURA ATRÁS DO PNEU + BRASIL NA SETA
   07/05 v12
========================================================= */
.hero-image {
  position: relative !important;
  isolation: isolate !important;
  overflow: visible !important;
}

/* Desativa a assinatura antiga em pseudo-elemento para evitar conflito */
.hero-image::after {
  content: none !important;
  display: none !important;
}

.hero-signature-back {
  position: absolute !important;
  z-index: 2 !important;
  left: 47% !important;
  top: 49% !important;
  width: max-content !important;
  max-width: 0 !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  transform: translate(-50%, -50%) rotate(-9deg) !important;
  font-family: "Great Vibes", "Segoe Script", "Brush Script MT", cursive !important;
  font-size: clamp(10.5rem, 17.8vw, 20.5rem) !important;
  font-weight: 400 !important;
  line-height: .72 !important;
  letter-spacing: .01em !important;
  color: rgba(255, 255, 255, .24) !important;
  text-shadow:
    0 12px 36px rgba(225, 37, 27, .32),
    0 26px 82px rgba(255, 255, 255, .22) !important;
  pointer-events: none !important;
  user-select: none !important;
  opacity: 1 !important;
  animation: zagoSignatureWriteUserFinal 2.45s cubic-bezier(.16,1,.3,1) .25s forwards !important;
  will-change: max-width, filter !important;
}

@keyframes zagoSignatureWriteUserFinal {
  0% { max-width: 0; filter: blur(2px); }
  100% { max-width: 1280px; filter: blur(0); }
}

.hero-image .hero-glow {
  z-index: 1 !important;
}

.hero-image .hero-tire-img,
.hero-image:hover .hero-tire-img,
.site-loaded .hero-image:hover .hero-tire-img {
  position: relative !important;
  z-index: 3 !important;
  width: min(112%, 890px) !important;
  max-width: 890px !important;
  height: auto !important;
  object-fit: contain !important;
  transform: translateX(-4px) !important;
  transition: none !important;
}

/* Ícone do Brasil no ponto indicado pela seta: abaixo do pneu, em diagonal, sem tocar */
.hero-brazil-flag-corner {
  position: absolute !important;
  z-index: 6 !important;
  top: auto !important;
  left: auto !important;
  right: clamp(86px, 8.2vw, 132px) !important;
  bottom: clamp(-58px, -4.2vw, -30px) !important;
  width: clamp(52px, 4.5vw, 68px) !important;
  height: auto !important;
  transform: rotate(-8deg) !important;
  pointer-events: none !important;
}

.hero-brazil-flag-corner img,
.hero-image .hero-brazil-flag-corner img,
.hero-image:hover .hero-brazil-flag-corner img,
.site-loaded .hero-image:hover .hero-brazil-flag-corner img {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  transform: none !important;
  transition: none !important;
  filter: drop-shadow(0 12px 20px rgba(0,0,0,.62)) !important;
}

@media (max-width: 1180px) {
  .hero-signature-back {
    left: 48% !important;
    top: 49% !important;
    font-size: clamp(8rem, 16vw, 14rem) !important;
  }

  .hero-brazil-flag-corner {
    right: clamp(64px, 7vw, 96px) !important;
    bottom: -32px !important;
    width: clamp(46px, 4.6vw, 58px) !important;
  }
}

@media (max-width: 980px) {
  .hero-signature-back {
    left: 50% !important;
    top: 50% !important;
    font-size: clamp(5.8rem, 20vw, 9.5rem) !important;
  }

  .hero-image .hero-tire-img,
  .hero-image:hover .hero-tire-img,
  .site-loaded .hero-image:hover .hero-tire-img {
    width: min(92%, 520px) !important;
    max-width: 520px !important;
    transform: translateX(0) !important;
  }

  .hero-brazil-flag-corner {
    right: calc(50% - 210px) !important;
    bottom: 18px !important;
    width: 42px !important;
  }
}

@media (max-width: 560px) {
  .hero-signature-back {
    font-size: clamp(4.3rem, 22vw, 6.3rem) !important;
  }

  .hero-image .hero-tire-img,
  .hero-image:hover .hero-tire-img,
  .site-loaded .hero-image:hover .hero-tire-img {
    width: min(90%, 360px) !important;
    max-width: 360px !important;
  }

  .hero-brazil-flag-corner {
    right: calc(50% - 150px) !important;
    bottom: 18px !important;
    width: 32px !important;
  }
}

/* =========================================================
   AJUSTE FINAL 07/05 v13 - ASSINATURA EM IMAGEM + BANDEIRA RETA
   - Assinatura agora é PNG real, atrás do pneu, para não sumir por conflito de pseudo-elemento.
   - A assinatura fica maior que o pneu, com baixa opacidade, sem avançar para o H1.
   - Bandeira do Brasil foi deslocada mais à direita, reta, abaixo do pneu.
========================================================= */
.hero-image {
  position: relative !important;
  isolation: isolate !important;
  overflow: visible !important;
}

.hero-image::after {
  content: none !important;
  display: none !important;
}

.hero-image .hero-glow {
  position: absolute !important;
  z-index: 1 !important;
}

.hero-image .hero-signature-back,
.hero-image:hover .hero-signature-back,
.site-loaded .hero-image:hover .hero-signature-back {
  position: absolute !important;
  z-index: 2 !important;
  left: 52% !important;
  top: 54% !important;
  width: min(126%, 1040px) !important;
  max-width: 1040px !important;
  height: auto !important;
  object-fit: contain !important;
  transform: translate(-50%, -50%) rotate(-5deg) !important;
  opacity: .28 !important;
  filter: drop-shadow(0 20px 60px rgba(225,37,27,.25)) !important;
  pointer-events: none !important;
  user-select: none !important;
  transition: none !important;
  animation: zagoSignatureImageWriteV13 2.1s cubic-bezier(.16,1,.3,1) .25s both !important;
  clip-path: inset(0 0 0 0) !important;
}

@keyframes zagoSignatureImageWriteV13 {
  0% { opacity: 0; clip-path: inset(0 100% 0 0); filter: blur(2px) drop-shadow(0 20px 60px rgba(225,37,27,.22)); }
  35% { opacity: .26; }
  100% { opacity: .28; clip-path: inset(0 0 0 0); filter: blur(0) drop-shadow(0 20px 60px rgba(225,37,27,.25)); }
}

.hero-image .hero-tire-img,
.hero-image:hover .hero-tire-img,
.site-loaded .hero-image:hover .hero-tire-img {
  position: relative !important;
  z-index: 4 !important;
  width: min(120%, 980px) !important;
  max-width: 980px !important;
  height: auto !important;
  object-fit: contain !important;
  transform: translateX(-4px) !important;
  transition: none !important;
}

.hero-brazil-flag-corner {
  position: absolute !important;
  z-index: 7 !important;
  top: auto !important;
  left: auto !important;
  right: clamp(34px, 4.2vw, 72px) !important;
  bottom: clamp(0px, 1.8vw, 28px) !important;
  width: clamp(54px, 4.7vw, 74px) !important;
  height: auto !important;
  transform: none !important;
  rotate: 0deg !important;
  pointer-events: none !important;
}

.hero-brazil-flag-corner img,
.hero-image .hero-brazil-flag-corner img,
.hero-image:hover .hero-brazil-flag-corner img,
.site-loaded .hero-image:hover .hero-brazil-flag-corner img {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  transform: none !important;
  rotate: 0deg !important;
  transition: none !important;
  border: none !important;
  outline: none !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  filter: drop-shadow(0 12px 20px rgba(0,0,0,.58)) !important;
}

@media (max-width: 1180px) {
  .hero-image .hero-signature-back,
  .hero-image:hover .hero-signature-back,
  .site-loaded .hero-image:hover .hero-signature-back {
    left: 52% !important;
    top: 54% !important;
    width: min(120%, 820px) !important;
    max-width: 820px !important;
    opacity: .27 !important;
  }

  .hero-brazil-flag-corner {
    right: clamp(28px, 3.8vw, 54px) !important;
    bottom: clamp(6px, 1.8vw, 22px) !important;
    width: clamp(48px, 4.6vw, 62px) !important;
  }
}

@media (max-width: 980px) {
  .hero-image .hero-signature-back,
  .hero-image:hover .hero-signature-back,
  .site-loaded .hero-image:hover .hero-signature-back {
    left: 50% !important;
    top: 54% !important;
    width: min(112%, 560px) !important;
    max-width: 560px !important;
    opacity: .25 !important;
  }

  .hero-image .hero-tire-img,
  .hero-image:hover .hero-tire-img,
  .site-loaded .hero-image:hover .hero-tire-img {
    width: min(92%, 520px) !important;
    max-width: 520px !important;
    transform: translateX(0) !important;
  }

  .hero-brazil-flag-corner {
    right: calc(50% - 240px) !important;
    bottom: 10px !important;
    width: 44px !important;
  }
}

@media (max-width: 560px) {
  .hero-image .hero-signature-back,
  .hero-image:hover .hero-signature-back,
  .site-loaded .hero-image:hover .hero-signature-back {
    width: min(112%, 380px) !important;
    max-width: 380px !important;
    opacity: .24 !important;
  }

  .hero-image .hero-tire-img,
  .hero-image:hover .hero-tire-img,
  .site-loaded .hero-image:hover .hero-tire-img {
    width: min(90%, 360px) !important;
    max-width: 360px !important;
  }

  .hero-brazil-flag-corner {
    right: calc(50% - 168px) !important;
    bottom: 10px !important;
    width: 34px !important;
  }
}


/* =========================================================
   AJUSTE FINAL 07/05 v14 - ASSINATURA NOVA + BANDEIRA MAIS BAIXA
   - Assinatura PNG criada a partir da fonte enviada, como detalhe atrás do pneu.
   - Assinatura maior que o conjunto de pneus, baixa opacidade e sem tocar o H1.
   - Ícone do Brasil reto e mais baixo, saindo da área do pneu.
========================================================= */
.hero-image {
  position: relative !important;
  isolation: isolate !important;
  overflow: visible !important;
}

.hero-image::after {
  content: none !important;
  display: none !important;
}

.hero-image .hero-glow {
  position: absolute !important;
  z-index: 1 !important;
}

.hero-image .hero-signature-back,
.hero-image:hover .hero-signature-back,
.site-loaded .hero-image:hover .hero-signature-back {
  position: absolute !important;
  z-index: 2 !important;
  left: 52% !important;
  top: 57% !important;
  width: min(134%, 1120px) !important;
  max-width: 1120px !important;
  height: auto !important;
  object-fit: contain !important;
  transform: translate(-50%, -50%) rotate(-4deg) !important;
  opacity: .18 !important;
  filter: drop-shadow(0 18px 52px rgba(225,37,27,.18)) !important;
  pointer-events: none !important;
  user-select: none !important;
  transition: none !important;
  animation: zagoSignatureImageWriteV14 2.15s cubic-bezier(.16,1,.3,1) .25s both !important;
  clip-path: inset(0 0 0 0) !important;
}

@keyframes zagoSignatureImageWriteV14 {
  0% { opacity: 0; clip-path: inset(0 100% 0 0); filter: blur(2px) drop-shadow(0 18px 52px rgba(225,37,27,.14)); }
  45% { opacity: .16; }
  100% { opacity: .18; clip-path: inset(0 0 0 0); filter: blur(0) drop-shadow(0 18px 52px rgba(225,37,27,.18)); }
}

.hero-image .hero-tire-img,
.hero-image:hover .hero-tire-img,
.site-loaded .hero-image:hover .hero-tire-img {
  position: relative !important;
  z-index: 4 !important;
  width: min(120%, 980px) !important;
  max-width: 980px !important;
  height: auto !important;
  object-fit: contain !important;
  transform: translateX(-4px) !important;
  transition: none !important;
}

.hero-brazil-flag-corner {
  position: absolute !important;
  z-index: 7 !important;
  top: auto !important;
  left: auto !important;
  right: clamp(20px, 3.2vw, 52px) !important;
  bottom: clamp(-78px, -5.4vw, -42px) !important;
  width: clamp(54px, 4.7vw, 72px) !important;
  height: auto !important;
  transform: none !important;
  rotate: 0deg !important;
  pointer-events: none !important;
}

.hero-brazil-flag-corner img,
.hero-image .hero-brazil-flag-corner img,
.hero-image:hover .hero-brazil-flag-corner img,
.site-loaded .hero-image:hover .hero-brazil-flag-corner img {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  transform: none !important;
  rotate: 0deg !important;
  transition: none !important;
  border: none !important;
  outline: none !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  filter: drop-shadow(0 12px 20px rgba(0,0,0,.58)) !important;
}

@media (max-width: 1180px) {
  .hero-image .hero-signature-back,
  .hero-image:hover .hero-signature-back,
  .site-loaded .hero-image:hover .hero-signature-back {
    left: 52% !important;
    top: 57% !important;
    width: min(128%, 880px) !important;
    max-width: 880px !important;
    opacity: .17 !important;
  }

  .hero-brazil-flag-corner {
    right: clamp(16px, 3vw, 42px) !important;
    bottom: clamp(-58px, -4.8vw, -34px) !important;
    width: clamp(48px, 4.6vw, 62px) !important;
  }
}

@media (max-width: 980px) {
  .hero-image .hero-signature-back,
  .hero-image:hover .hero-signature-back,
  .site-loaded .hero-image:hover .hero-signature-back {
    left: 50% !important;
    top: 56% !important;
    width: min(116%, 600px) !important;
    max-width: 600px !important;
    opacity: .16 !important;
  }

  .hero-image .hero-tire-img,
  .hero-image:hover .hero-tire-img,
  .site-loaded .hero-image:hover .hero-tire-img {
    width: min(92%, 520px) !important;
    max-width: 520px !important;
    transform: translateX(0) !important;
  }

  .hero-brazil-flag-corner {
    right: calc(50% - 255px) !important;
    bottom: -26px !important;
    width: 44px !important;
  }
}

@media (max-width: 560px) {
  .hero-image .hero-signature-back,
  .hero-image:hover .hero-signature-back,
  .site-loaded .hero-image:hover .hero-signature-back {
    width: min(118%, 400px) !important;
    max-width: 400px !important;
    opacity: .15 !important;
  }

  .hero-image .hero-tire-img,
  .hero-image:hover .hero-tire-img,
  .site-loaded .hero-image:hover .hero-tire-img {
    width: min(90%, 360px) !important;
    max-width: 360px !important;
  }

  .hero-brazil-flag-corner {
    right: calc(50% - 178px) !important;
    bottom: -18px !important;
    width: 34px !important;
  }
}


/* =========================================================
   AJUSTE FINAL 07/05 v15 - ASSINATURA LIMPA + BANDEIRA ABAIXO
   - Substitui a assinatura por PNG transparente real, sem retângulo/fundo.
   - Mantém a assinatura como detalhe atrás do pneu, grande e discreta.
   - Bandeira do Brasil reta, mais para baixo e sem ficar em cima do pneu.
========================================================= */
.hero-image {
  position: relative !important;
  isolation: isolate !important;
  overflow: visible !important;
}

.hero-image .hero-signature-back,
.hero-image:hover .hero-signature-back,
.site-loaded .hero-image:hover .hero-signature-back {
  position: absolute !important;
  z-index: 2 !important;
  left: 54% !important;
  top: 57% !important;
  width: min(132%, 1060px) !important;
  max-width: 1060px !important;
  height: auto !important;
  object-fit: contain !important;
  transform: translate(-50%, -50%) rotate(-3deg) !important;
  opacity: .24 !important;
  filter: drop-shadow(0 20px 42px rgba(225,37,27,.10)) !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  pointer-events: none !important;
  user-select: none !important;
  transition: none !important;
  animation: zagoSignatureImageWriteV15 2.1s cubic-bezier(.16,1,.3,1) .25s both !important;
  clip-path: inset(0 0 0 0) !important;
}

@keyframes zagoSignatureImageWriteV15 {
  0% { opacity: 0; clip-path: inset(0 100% 0 0); filter: blur(2px) drop-shadow(0 20px 42px rgba(225,37,27,.08)); }
  45% { opacity: .20; }
  100% { opacity: .24; clip-path: inset(0 0 0 0); filter: blur(0) drop-shadow(0 20px 42px rgba(225,37,27,.10)); }
}

.hero-image .hero-tire-img,
.hero-image:hover .hero-tire-img,
.site-loaded .hero-image:hover .hero-tire-img {
  position: relative !important;
  z-index: 4 !important;
  width: min(120%, 980px) !important;
  max-width: 980px !important;
  height: auto !important;
  object-fit: contain !important;
  transform: translateX(-4px) !important;
  transition: none !important;
}

.hero-brazil-flag-corner {
  position: absolute !important;
  z-index: 7 !important;
  top: auto !important;
  left: auto !important;
  right: clamp(-16px, -1.2vw, -6px) !important;
  bottom: clamp(0px, .8vw, 14px) !important;
  width: clamp(54px, 4.6vw, 70px) !important;
  height: auto !important;
  transform: none !important;
  rotate: 0deg !important;
  pointer-events: none !important;
}

.hero-brazil-flag-corner img,
.hero-image .hero-brazil-flag-corner img,
.hero-image:hover .hero-brazil-flag-corner img,
.site-loaded .hero-image:hover .hero-brazil-flag-corner img {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  transform: none !important;
  rotate: 0deg !important;
  transition: none !important;
  border: none !important;
  outline: none !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  filter: drop-shadow(0 12px 20px rgba(0,0,0,.58)) !important;
}

@media (max-width: 1180px) {
  .hero-image .hero-signature-back,
  .hero-image:hover .hero-signature-back,
  .site-loaded .hero-image:hover .hero-signature-back {
    left: 53% !important;
    top: 57% !important;
    width: min(126%, 860px) !important;
    max-width: 860px !important;
    opacity: .22 !important;
  }

  .hero-brazil-flag-corner {
    right: clamp(-12px, -1vw, -4px) !important;
    bottom: clamp(0px, .7vw, 10px) !important;
    width: clamp(48px, 4.4vw, 62px) !important;
  }
}

@media (max-width: 980px) {
  .hero-image .hero-signature-back,
  .hero-image:hover .hero-signature-back,
  .site-loaded .hero-image:hover .hero-signature-back {
    left: 50% !important;
    top: 56% !important;
    width: min(116%, 600px) !important;
    max-width: 600px !important;
    opacity: .19 !important;
  }

  .hero-image .hero-tire-img,
  .hero-image:hover .hero-tire-img,
  .site-loaded .hero-image:hover .hero-tire-img {
    width: min(92%, 520px) !important;
    max-width: 520px !important;
    transform: translateX(0) !important;
  }

  .hero-brazil-flag-corner {
    right: calc(50% - 270px) !important;
    bottom: 0px !important;
    width: 44px !important;
  }
}

@media (max-width: 560px) {
  .hero-image .hero-signature-back,
  .hero-image:hover .hero-signature-back,
  .site-loaded .hero-image:hover .hero-signature-back {
    width: min(118%, 400px) !important;
    max-width: 400px !important;
    opacity: .18 !important;
  }

  .hero-image .hero-tire-img,
  .hero-image:hover .hero-tire-img,
  .site-loaded .hero-image:hover .hero-tire-img {
    width: min(90%, 360px) !important;
    max-width: 360px !important;
  }

  .hero-brazil-flag-corner {
    right: calc(50% - 188px) !important;
    bottom: 0px !important;
    width: 34px !important;
  }
}

/* =========================================================
   AJUSTE FINAL 07/05 v16 - ASSINATURA MAIOR ATRÁS DO PNEU
   - Usa a assinatura enviada pelo cliente, tratada como PNG transparente.
   - Assinatura maior que o conjunto de pneus, atrás da imagem e com baixa opacidade.
   - Mantém o ícone do Brasil mais abaixo e reto.
========================================================= */
.hero-image {
  position: relative !important;
  isolation: isolate !important;
  overflow: visible !important;
}

.hero-image .hero-signature-back,
.hero-image:hover .hero-signature-back,
.site-loaded .hero-image:hover .hero-signature-back {
  position: absolute !important;
  z-index: 2 !important;
  left: 51% !important;
  top: 58% !important;
  width: min(142%, 1160px) !important;
  max-width: 1160px !important;
  height: auto !important;
  object-fit: contain !important;
  transform: translate(-50%, -50%) rotate(-2deg) !important;
  opacity: .20 !important;
  filter: drop-shadow(0 18px 34px rgba(225,37,27,.10)) !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  pointer-events: none !important;
  user-select: none !important;
  transition: none !important;
  animation: zagoSignatureImageWriteV16 2.1s cubic-bezier(.16,1,.3,1) .25s both !important;
  clip-path: inset(0 0 0 0) !important;
}

@keyframes zagoSignatureImageWriteV16 {
  0% { opacity: 0; clip-path: inset(0 100% 0 0); filter: blur(2px) drop-shadow(0 18px 34px rgba(225,37,27,.08)); }
  45% { opacity: .16; }
  100% { opacity: .20; clip-path: inset(0 0 0 0); filter: blur(0) drop-shadow(0 18px 34px rgba(225,37,27,.10)); }
}

.hero-image .hero-tire-img,
.hero-image:hover .hero-tire-img,
.site-loaded .hero-image:hover .hero-tire-img {
  position: relative !important;
  z-index: 4 !important;
}

.hero-brazil-flag-corner {
  position: absolute !important;
  z-index: 7 !important;
  top: auto !important;
  left: auto !important;
  right: clamp(-20px, -1.5vw, -8px) !important;
  bottom: clamp(-22px, -1.4vw, -10px) !important;
  width: clamp(54px, 4.6vw, 70px) !important;
  height: auto !important;
  transform: none !important;
  rotate: 0deg !important;
  pointer-events: none !important;
}

.hero-brazil-flag-corner img,
.hero-image .hero-brazil-flag-corner img,
.hero-image:hover .hero-brazil-flag-corner img,
.site-loaded .hero-image:hover .hero-brazil-flag-corner img {
  transform: none !important;
  rotate: 0deg !important;
}

@media (max-width: 1180px) {
  .hero-image .hero-signature-back,
  .hero-image:hover .hero-signature-back,
  .site-loaded .hero-image:hover .hero-signature-back {
    left: 51% !important;
    top: 58% !important;
    width: min(138%, 940px) !important;
    max-width: 940px !important;
    opacity: .19 !important;
  }

  .hero-brazil-flag-corner {
    right: clamp(-16px, -1.2vw, -6px) !important;
    bottom: clamp(-20px, -1.2vw, -8px) !important;
  }
}

@media (max-width: 980px) {
  .hero-image .hero-signature-back,
  .hero-image:hover .hero-signature-back,
  .site-loaded .hero-image:hover .hero-signature-back {
    left: 50% !important;
    top: 57% !important;
    width: min(126%, 640px) !important;
    max-width: 640px !important;
    opacity: .18 !important;
  }

  .hero-brazil-flag-corner {
    right: calc(50% - 272px) !important;
    bottom: -12px !important;
    width: 44px !important;
  }
}

@media (max-width: 560px) {
  .hero-image .hero-signature-back,
  .hero-image:hover .hero-signature-back,
  .site-loaded .hero-image:hover .hero-signature-back {
    width: min(124%, 430px) !important;
    max-width: 430px !important;
    opacity: .17 !important;
  }

  .hero-brazil-flag-corner {
    right: calc(50% - 188px) !important;
    bottom: -8px !important;
    width: 34px !important;
  }
}


/* =========================================================
   AJUSTE FINAL 07/05 v17 - ASSINATURA PEQUENA EM CIMA DO PNEU
   - A assinatura deixa de ser detalhe grande atrás do pneu.
   - Agora fica pequena sobre o conjunto de pneus, como assinatura discreta.
   - Mantém o ícone do Brasil reto e baixo.
========================================================= */
.hero-image .hero-signature-back,
.hero-image:hover .hero-signature-back,
.site-loaded .hero-image:hover .hero-signature-back {
  position: absolute !important;
  z-index: 6 !important;
  left: auto !important;
  right: clamp(72px, 8vw, 128px) !important;
  top: clamp(122px, 17vw, 188px) !important;
  width: clamp(118px, 15vw, 205px) !important;
  max-width: 205px !important;
  height: auto !important;
  object-fit: contain !important;
  transform: none !important;
  rotate: 0deg !important;
  opacity: .52 !important;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,.72)) !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  pointer-events: none !important;
  user-select: none !important;
  transition: none !important;
  animation: none !important;
  clip-path: none !important;
}

.hero-image .hero-tire-img,
.hero-image:hover .hero-tire-img,
.site-loaded .hero-image:hover .hero-tire-img {
  position: relative !important;
  z-index: 4 !important;
}

.hero-brazil-flag-corner {
  position: absolute !important;
  z-index: 7 !important;
  top: auto !important;
  left: auto !important;
  right: clamp(-20px, -1.5vw, -8px) !important;
  bottom: clamp(-22px, -1.4vw, -10px) !important;
  width: clamp(54px, 4.6vw, 70px) !important;
  height: auto !important;
  transform: none !important;
  rotate: 0deg !important;
}

@media (max-width: 1180px) {
  .hero-image .hero-signature-back,
  .hero-image:hover .hero-signature-back,
  .site-loaded .hero-image:hover .hero-signature-back {
    right: clamp(56px, 7vw, 104px) !important;
    top: clamp(118px, 18vw, 172px) !important;
    width: clamp(104px, 15vw, 176px) !important;
    max-width: 176px !important;
    opacity: .50 !important;
  }
}

@media (max-width: 980px) {
  .hero-image .hero-signature-back,
  .hero-image:hover .hero-signature-back,
  .site-loaded .hero-image:hover .hero-signature-back {
    right: calc(50% - 210px) !important;
    top: 118px !important;
    width: 120px !important;
    max-width: 120px !important;
    opacity: .48 !important;
  }
}

@media (max-width: 560px) {
  .hero-image .hero-signature-back,
  .hero-image:hover .hero-signature-back,
  .site-loaded .hero-image:hover .hero-signature-back {
    right: calc(50% - 145px) !important;
    top: 92px !important;
    width: 82px !important;
    max-width: 82px !important;
    opacity: .46 !important;
  }
}


/* =========================================================
   AJUSTE FINAL 07/05 v18 - ASSINATURA NA ÁREA DA SETA
   - Move a assinatura pequena para o topo direito do conjunto de pneus.
   - Fica acima do pneu, como detalhe premium, sem invadir o H1.
   - Mantém a bandeira do Brasil reta e baixa.
========================================================= */
.hero-image .hero-signature-back,
.hero-image:hover .hero-signature-back,
.site-loaded .hero-image:hover .hero-signature-back {
  position: absolute !important;
  z-index: 6 !important;
  left: auto !important;
  right: clamp(22px, 3.6vw, 56px) !important;
  top: clamp(44px, 7vw, 76px) !important;
  width: clamp(120px, 13vw, 182px) !important;
  max-width: 182px !important;
  height: auto !important;
  object-fit: contain !important;
  transform: none !important;
  rotate: 0deg !important;
  opacity: .50 !important;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.72)) !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  pointer-events: none !important;
  user-select: none !important;
  transition: none !important;
  animation: none !important;
  clip-path: none !important;
}

.hero-image .hero-tire-img,
.hero-image:hover .hero-tire-img,
.site-loaded .hero-image:hover .hero-tire-img {
  position: relative !important;
  z-index: 4 !important;
}

.hero-brazil-flag-corner {
  position: absolute !important;
  z-index: 7 !important;
  top: auto !important;
  left: auto !important;
  right: clamp(-20px, -1.5vw, -8px) !important;
  bottom: clamp(-22px, -1.4vw, -10px) !important;
  width: clamp(54px, 4.6vw, 70px) !important;
  height: auto !important;
  transform: none !important;
  rotate: 0deg !important;
}

.hero-brazil-flag-corner img,
.hero-image .hero-brazil-flag-corner img,
.hero-image:hover .hero-brazil-flag-corner img,
.site-loaded .hero-image:hover .hero-brazil-flag-corner img {
  transform: none !important;
  rotate: 0deg !important;
}

@media (max-width: 1180px) {
  .hero-image .hero-signature-back,
  .hero-image:hover .hero-signature-back,
  .site-loaded .hero-image:hover .hero-signature-back {
    right: clamp(18px, 3vw, 42px) !important;
    top: clamp(42px, 7.5vw, 68px) !important;
    width: clamp(108px, 13vw, 158px) !important;
    max-width: 158px !important;
    opacity: .49 !important;
  }
}

@media (max-width: 980px) {
  .hero-image .hero-signature-back,
  .hero-image:hover .hero-signature-back,
  .site-loaded .hero-image:hover .hero-signature-back {
    right: calc(50% - 238px) !important;
    top: 48px !important;
    width: 116px !important;
    max-width: 116px !important;
    opacity: .48 !important;
  }
}

@media (max-width: 560px) {
  .hero-image .hero-signature-back,
  .hero-image:hover .hero-signature-back,
  .site-loaded .hero-image:hover .hero-signature-back {
    right: calc(50% - 166px) !important;
    top: 44px !important;
    width: 78px !important;
    max-width: 78px !important;
    opacity: .46 !important;
  }
}


/* =========================================================
   AJUSTE FINAL 07/05 v19 - ASSINATURA ACIMA DO PNEU / FORA DO PNEU
   - A assinatura sai do miolo/container visual do pneu.
   - Posição alinhada à seta: acima do pneu, no espaço vermelho livre.
   - Mantém a assinatura pequena, premium e sem interferir no H1.
========================================================= */
.hero-image .hero-signature-back,
.hero-image:hover .hero-signature-back,
.site-loaded .hero-image:hover .hero-signature-back {
  position: absolute !important;
  z-index: 7 !important;
  left: auto !important;
  right: clamp(96px, 10vw, 152px) !important;
  top: clamp(14px, 2vw, 34px) !important;
  width: clamp(122px, 12vw, 170px) !important;
  max-width: 170px !important;
  height: auto !important;
  object-fit: contain !important;
  transform: none !important;
  rotate: 0deg !important;
  opacity: .58 !important;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.72)) !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  pointer-events: none !important;
  user-select: none !important;
  transition: none !important;
  animation: none !important;
  clip-path: none !important;
}

.hero-image .hero-tire-img,
.hero-image:hover .hero-tire-img,
.site-loaded .hero-image:hover .hero-tire-img {
  position: relative !important;
  z-index: 4 !important;
}

@media (max-width: 1180px) {
  .hero-image .hero-signature-back,
  .hero-image:hover .hero-signature-back,
  .site-loaded .hero-image:hover .hero-signature-back {
    right: clamp(84px, 9vw, 130px) !important;
    top: clamp(12px, 1.8vw, 28px) !important;
    width: clamp(112px, 11.5vw, 148px) !important;
    max-width: 148px !important;
  }
}

@media (max-width: 980px) {
  .hero-image .hero-signature-back,
  .hero-image:hover .hero-signature-back,
  .site-loaded .hero-image:hover .hero-signature-back {
    right: calc(50% - 210px) !important;
    top: -10px !important;
    width: 112px !important;
    max-width: 112px !important;
  }
}

@media (max-width: 560px) {
  .hero-image .hero-signature-back,
  .hero-image:hover .hero-signature-back,
  .site-loaded .hero-image:hover .hero-signature-back {
    right: calc(50% - 146px) !important;
    top: -4px !important;
    width: 74px !important;
    max-width: 74px !important;
    opacity: .55 !important;
  }
}

/* SEÇÃO FEITO PARA QUEM RODA COM EXIGÊNCIA - imagem cinematográfica */
.applications-demand {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 76% 42%, rgba(225, 37, 27, .20), transparent 34%),
    linear-gradient(135deg, #050505 0%, #080202 48%, #130606 100%) !important;
}

.applications-demand::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 48px 48px;
  opacity: .28;
  pointer-events: none;
}

.applications-demand-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: .92fr 1.08fr;
  gap: 54px;
  align-items: center;
}

.applications-demand-copy {
  min-width: 0;
}

.demand-title {
  max-width: 620px;
  margin: 0 0 34px !important;
  text-align: left !important;
}

.demand-title h2 {
  max-width: 610px;
  font-size: clamp(3.15rem, 4.9vw, 5.35rem) !important;
  line-height: .98 !important;
}

.demand-title p:not(.eyebrow) {
  max-width: 590px;
  color: rgba(255,255,255,.70) !important;
  font-size: clamp(1rem, 1.08vw, 1.1rem);
}

.demand-cards {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
}

.demand-cards div {
  min-height: 150px;
  background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.035)) !important;
  border: 1px solid rgba(255,255,255,.11) !important;
}

.demand-image-card {
  position: relative;
  margin: 0;
  min-height: 610px;
  border-radius: 34px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.13);
  box-shadow: 0 34px 72px rgba(0,0,0,.52);
  background: #080808;
}

.demand-image-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(90deg, rgba(5,5,5,.30) 0%, transparent 38%),
    linear-gradient(180deg, transparent 42%, rgba(5,5,5,.36) 100%);
  pointer-events: none;
}

.demand-image-card::after {
  content: "ROTA DE PERFORMANCE";
  position: absolute;
  left: 26px;
  bottom: 22px;
  z-index: 3;
  font-family: 'Bebas Neue', Arial, sans-serif;
  letter-spacing: .14em;
  font-size: clamp(1.25rem, 2vw, 2rem);
  color: rgba(255,255,255,.78);
  text-shadow: 0 10px 22px rgba(0,0,0,.65);
}

.demand-image-card img {
  width: 100%;
  height: 100%;
  min-height: 610px;
  object-fit: cover;
  object-position: 50% 50%;
  transform: scale(1.015);
}

@media (max-width: 980px) {
  .applications-demand-grid {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .demand-title {
    max-width: 780px;
    text-align: center !important;
    margin: 0 auto 30px !important;
  }

  .demand-title h2,
  .demand-title p:not(.eyebrow) {
    max-width: 780px;
    margin-left: auto;
    margin-right: auto;
  }

  .demand-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .demand-image-card,
  .demand-image-card img {
    min-height: 420px;
  }
}

@media (max-width: 620px) {
  .demand-title {
    text-align: left !important;
  }

  .demand-cards {
    grid-template-columns: 1fr !important;
  }

  .demand-image-card {
    border-radius: 24px;
  }

  .demand-image-card,
  .demand-image-card img {
    min-height: 360px;
  }

  .demand-image-card::after {
    left: 18px;
    bottom: 16px;
    font-size: 1.25rem;
  }
}

/* =========================================================
   AJUSTE SOLICITADO - HOVER SOMENTE EM BOTÕES + SEÇÃO EXIGÊNCIA
   - Remove traçados, bordas animadas, sombras e zoom em blocos/imagens.
   - Mantém microinteração apenas em botões/links clicáveis.
   - Reequilibra texto/cards/imagem na seção "Feito para quem roda com exigência".
   ========================================================= */

/* Cursor customizado restaurado: o anel/core permanece ativo; hover visual segue restrito aos botões. */

/* Blocos informativos e imagens não têm hover visual */
.model-card,
.compare-card,
.app-grid div,
.demand-cards div,
.gorilla-section .three-cards div,
.three-cards div,
.hero-metrics div,
.tag-grid span,
.mini-grid span,
.spec-table,
.spec-table div,
.manifesto-card,
.tire-frame,
.application-img,
.gorilla-stage,
.caminhao-stage,
.product-block-card,
.product-image-area,
.product-info-area,
.timeline div,
.cta-box,
.video-frame,
.demand-image-card {
  transition: none !important;
}

.model-card:hover,
.compare-card:hover,
.app-grid div:hover,
.demand-cards div:hover,
.gorilla-section .three-cards div:hover,
.three-cards div:hover,
.hero-metrics div:hover,
.tag-grid span:hover,
.mini-grid span:hover,
.spec-table:hover,
.spec-table div:hover,
.manifesto-card:hover,
.tire-frame:hover,
.application-img:hover,
.gorilla-stage:hover,
.caminhao-stage:hover,
.product-block-card:hover,
.product-image-area:hover,
.product-info-area:hover,
.timeline div:hover,
.cta-box:hover,
.video-frame:hover,
.demand-image-card:hover {
  transform: none !important;
  box-shadow: inherit !important;
  outline: 0 !important;
  filter: none !important;
}

/* Preserva a borda original, sem acender traçado no hover */
.application-img,
.application-img:hover,
.demand-image-card,
.demand-image-card:hover {
  border-color: rgba(255,255,255,.13) !important;
}

.model-card:hover img,
.compare-card:hover img,
.application-img:hover img,
.gorilla-stage:hover img,
.caminhao-stage:hover img,
.product-block-card:hover img,
.product-block-card:hover .product-image-area img,
.demand-image-card:hover img,
.hero-image:hover img {
  transform: none !important;
  filter: inherit !important;
}

/* Botões continuam com microinteração elegante */
.btn,
button,
a.btn,
.back-to-top {
  transition: transform .22s ease, background .22s ease, box-shadow .22s ease, border-color .22s ease !important;
}

.btn:hover,
button:hover,
a.btn:hover,
.back-to-top:hover {
  transform: translateY(-2px) !important;
}

/* Seção "Feito para quem roda com exigência" mais proporcional */
.applications-demand-grid {
  grid-template-columns: minmax(0, .98fr) minmax(0, 1.02fr) !important;
  gap: 46px !important;
  align-items: stretch !important;
}

.applications-demand-copy {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  height: 100% !important;
}

.demand-title {
  max-width: 560px !important;
  margin: 0 0 26px !important;
}

.demand-title h2 {
  max-width: 560px !important;
  font-size: clamp(2.85rem, 4.35vw, 4.85rem) !important;
  line-height: .96 !important;
}

.demand-title p:not(.eyebrow) {
  max-width: 540px !important;
  font-size: clamp(.98rem, 1vw, 1.05rem) !important;
  line-height: 1.62 !important;
}

.demand-cards {
  gap: 14px !important;
}

.demand-cards div {
  min-height: 128px !important;
  padding: 26px 26px !important;
}

.demand-cards strong {
  font-size: clamp(1.38rem, 1.8vw, 1.8rem) !important;
  line-height: 1 !important;
}

.demand-cards p {
  font-size: .98rem !important;
  line-height: 1.55 !important;
  margin-bottom: 0 !important;
}

.demand-image-card {
  position: relative !important;
  align-self: stretch !important;
  height: auto !important;
  min-height: 0 !important;
  border-radius: 32px !important;
  overflow: hidden !important;
  box-shadow: 0 30px 64px rgba(0,0,0,.42) !important;
}

.demand-image-card::after {
  content: none !important;
  display: none !important;
}

/* Imagem fora do fluxo: a altura da coluna passa a ser definida
   pelo texto + cards à esquerda, e a imagem apenas preenche esse espaço. */
.demand-image-card img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  object-fit: cover !important;
  object-position: center center !important;
  transform: none !important;
}

@media (max-width: 980px) {
  .applications-demand-grid {
    grid-template-columns: 1fr !important;
    gap: 34px !important;
    align-items: start !important;
  }

  .applications-demand-copy {
    display: block !important;
  }

  .demand-title,
  .demand-title h2,
  .demand-title p:not(.eyebrow) {
    max-width: 780px !important;
  }

  .demand-image-card,
  .demand-image-card img {
    min-height: 420px !important;
  }
}

@media (max-width: 620px) {
  .demand-title h2 {
    font-size: clamp(2.65rem, 13vw, 3.4rem) !important;
  }

  .demand-cards div {
    min-height: 118px !important;
    padding: 22px !important;
  }

  .demand-image-card,
  .demand-image-card img {
    min-height: 340px !important;
    border-radius: 24px !important;
  }
}

/* =========================================================
   AJUSTE 13/05 - SEÇÃO CADA CAMADA COM DOIS VÍDEOS
   Vídeo Z601 à esquerda + texto centralizado + vídeo Z722 à direita
   ========================================================= */
#estrutura.mission-dual-video {
  padding: 96px 0 !important;
  overflow: hidden !important;
}

#estrutura .mission-three-grid {
  width: min(1500px, calc(100% - 40px)) !important;
  margin-inline: auto !important;
  display: grid !important;
  grid-template-columns: minmax(240px, .88fr) minmax(420px, 1.12fr) minmax(240px, .88fr) !important;
  gap: clamp(24px, 3vw, 56px) !important;
  align-items: center !important;
}

#estrutura .mission-content-center {
  position: relative !important;
  z-index: 2 !important;
  text-align: left !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

#estrutura .mission-content-center .lead {
  max-width: 620px !important;
}

#estrutura .mission-video,
#estrutura .mission-video:hover {
  position: relative !important;
  width: 100% !important;
  min-height: clamp(330px, 30vw, 500px) !important;
  aspect-ratio: 1 / 1.12 !important;
  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  transform: none !important;
}

#estrutura .mission-video iframe {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 132% !important;
  height: 132% !important;
  transform: translate(-50%, -50%) !important;
  border: 0 !important;
  pointer-events: none !important;
  background: transparent !important;
}

#estrutura .mission-video-left iframe {
  transform: translate(-50%, -50%) scaleX(-1) !important;
}

#estrutura .mission-video::before,
#estrutura .mission-video::after {
  content: none !important;
  display: none !important;
}

@media (max-width: 1180px) {
  #estrutura .mission-three-grid {
    grid-template-columns: minmax(190px, .78fr) minmax(390px, 1.2fr) minmax(190px, .78fr) !important;
    gap: 22px !important;
  }

  #estrutura .mission-video,
  #estrutura .mission-video:hover {
    min-height: 340px !important;
  }

  #estrutura .mission-video iframe {
    width: 140% !important;
    height: 140% !important;
  }
}

@media (max-width: 980px) {
  #estrutura.mission-dual-video {
    padding: 78px 0 !important;
  }

  #estrutura .mission-three-grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  #estrutura .mission-content-center {
    order: 1 !important;
    text-align: center !important;
    align-items: center !important;
  }

  #estrutura .mission-content-center .lead {
    margin-inline: auto !important;
  }

  #estrutura .mission-content-center .timeline {
    width: min(620px, 100%) !important;
    text-align: left !important;
  }

  #estrutura .mission-video-left {
    order: 2 !important;
  }

  #estrutura .mission-video-right {
    order: 3 !important;
  }

  #estrutura .mission-video,
  #estrutura .mission-video:hover {
    width: min(420px, 100%) !important;
    min-height: 320px !important;
    margin-inline: auto !important;
    aspect-ratio: 1 / 1 !important;
  }

  #estrutura .mission-video iframe {
    width: 132% !important;
    height: 132% !important;
  }
}

@media (max-width: 560px) {
  #estrutura .mission-three-grid {
    width: min(100% - 28px, 1180px) !important;
  }

  #estrutura .mission-video,
  #estrutura .mission-video:hover {
    min-height: 260px !important;
    width: min(300px, 100%) !important;
  }

  #estrutura .mission-video iframe {
    width: 140% !important;
    height: 140% !important;
  }
}

/* =========================================================
   AJUSTE 13/05 - CORREÇÃO ORIENTAÇÃO VÍDEO Z601
   - Espelha somente o vídeo esquerdo do Z601.
   - Mantém o Z722 exatamente como está.
========================================================= */
.mission-video-left iframe {
  transform: translate(-50%, -50%) scaleX(-1) !important;
}


/* =========================================================
   HOTFIX 13/05 - HOVER NEUTRO EM CONTAINERS NÃO CLICÁVEIS
   Mantém interação apenas em botões e links.
   ========================================================= */
.model-card:hover,
.compare-card:hover,
.app-grid div:hover,
.gorilla-section .three-cards div:hover,
.hero-metrics div:hover,
.video-frame:hover,
.cta-box:hover,
.application-img:hover,
.gorilla-stage:hover,
.caminhao-stage:hover,
.manifesto-card:hover,
.tire-frame:hover,
.product-block-card:hover,
.spec-table:hover,
.product-image-area:hover,
.presence .application-img:hover,
.presence .tag-grid span:hover,
.tag-grid span:hover {
  border-color: inherit !important;
  outline: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

.model-card:hover::before,
.compare-card:hover::before,
.app-grid div:hover::before,
.gorilla-section .three-cards div:hover::before,
.hero-metrics div:hover::before,
.video-frame:hover::before,
.cta-box:hover::before,
.application-img:hover::before,
.gorilla-stage:hover::before,
.caminhao-stage:hover::before,
.manifesto-card:hover::before,
.tire-frame:hover::before,
.product-block-card:hover::before,
.spec-table:hover::before,
.product-image-area:hover::before,
.presence .application-img:hover::before,
.presence .tag-grid span:hover::before,
.tag-grid span:hover::before,
.model-card:hover::after,
.compare-card:hover::after,
.app-grid div:hover::after,
.gorilla-section .three-cards div:hover::after,
.hero-metrics div:hover::after,
.video-frame:hover::after,
.cta-box:hover::after,
.application-img:hover::after,
.gorilla-stage:hover::after,
.caminhao-stage:hover::after,
.manifesto-card:hover::after,
.tire-frame:hover::after,
.product-block-card:hover::after,
.spec-table:hover::after,
.product-image-area:hover::after,
.presence .application-img:hover::after,
.presence .tag-grid span:hover::after,
.tag-grid span:hover::after {
  box-shadow: none !important;
  border-color: inherit !important;
}

.model-card:hover img,
.application-img:hover img,
.caminhao-stage:hover img,
.gorilla-stage.caminhao-stage:hover img,
.product-block-card:hover .product-image-area img,
.product-image-area:hover img {
  transform: none !important;
}

/* =========================================================
   HOTFIX FINAL 13/05 - MOBILE + MENU + HOVER NEUTRO
   Escopo: remove traçados de hover dos containers e ajusta responsivo.
========================================================= */

/* Hover neutro em containers/cards/blocos não clicáveis */
.model-card,
.compare-card,
.app-grid div,
.gorilla-section .three-cards div,
.hero-metrics div,
.video-frame,
.cta-box,
.application-img,
.gorilla-stage,
.caminhao-stage,
.manifesto-card,
.tire-frame,
.product-block-card,
.product-image-area,
.spec-table,
.presence .tag-grid span,
.tag-grid span {
  transition: none !important;
}

.model-card:hover,
.compare-card:hover,
.app-grid div:hover,
.gorilla-section .three-cards div:hover,
.hero-metrics div:hover,
.video-frame:hover,
.cta-box:hover,
.application-img:hover,
.gorilla-stage:hover,
.caminhao-stage:hover,
.manifesto-card:hover,
.tire-frame:hover,
.product-block-card:hover,
.product-image-area:hover,
.spec-table:hover,
.presence .tag-grid span:hover,
.tag-grid span:hover {
  outline: none !important;
  transform: none !important;
  border-color: currentColor !important;
  box-shadow: none !important;
}

.product-block-card:hover,
.model-card:hover,
.compare-card:hover,
.video-frame:hover,
.cta-box:hover,
.gorilla-section .three-cards div:hover,
.app-grid div:hover,
.tag-grid span:hover {
  border-color: rgba(255,255,255,.1) !important;
}

.gorilla-section .three-cards div:hover {
  border-color: rgba(225, 37, 27, .32) !important;
}

.manifesto-card:hover,
.tire-frame:hover,
.application-img:hover,
.spec-table:hover,
.product-image-area:hover {
  border-color: #e6dfd4 !important;
}

.model-card:hover::before,
.compare-card:hover::before,
.app-grid div:hover::before,
.gorilla-section .three-cards div:hover::before,
.hero-metrics div:hover::before,
.video-frame:hover::before,
.cta-box:hover::before,
.application-img:hover::before,
.gorilla-stage:hover::before,
.caminhao-stage:hover::before,
.manifesto-card:hover::before,
.tire-frame:hover::before,
.product-block-card:hover::before,
.product-image-area:hover::before,
.spec-table:hover::before,
.presence .tag-grid span:hover::before,
.tag-grid span:hover::before,
.model-card:hover::after,
.compare-card:hover::after,
.app-grid div:hover::after,
.gorilla-section .three-cards div:hover::after,
.hero-metrics div:hover::after,
.video-frame:hover::after,
.cta-box:hover::after,
.application-img:hover::after,
.gorilla-stage:hover::after,
.caminhao-stage:hover::after,
.manifesto-card:hover::after,
.tire-frame:hover::after,
.product-block-card:hover::after,
.product-image-area:hover::after,
.spec-table:hover::after,
.presence .tag-grid span:hover::after,
.tag-grid span:hover::after {
  box-shadow: none !important;
}

.model-card:hover img,
.application-img:hover img,
.caminhao-stage:hover img,
.gorilla-stage.caminhao-stage:hover img,
.product-block-card:hover .product-image-area img,
.product-image-area:hover img,
.hero-image:hover img {
  transform: none !important;
}

/* Menu mobile */
.mobile-menu-toggle,
.mobile-nav {
  display: none;
}

.mobile-menu-toggle {
  width: 46px;
  height: 46px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 14px;
  background: rgba(255,255,255,.06);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  padding: 0;
  color: #fff;
}

.mobile-menu-toggle span {
  width: 20px;
  height: 2px;
  border-radius: 999px;
  background: #fff;
  transition: transform .2s ease, opacity .2s ease;
}

.mobile-menu-open .mobile-menu-toggle span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.mobile-menu-open .mobile-menu-toggle span:nth-child(2) {
  opacity: 0;
}

.mobile-menu-open .mobile-menu-toggle span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.mobile-nav {
  border-top: 1px solid rgba(255,255,255,.1);
  background: rgba(5,5,5,.98);
  backdrop-filter: blur(16px);
  padding: 12px 20px 18px;
}

.mobile-nav a {
  display: block;
  padding: 16px 4px;
  color: #fff;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .13em;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.mobile-nav a:last-child {
  border-bottom: 0;
}

@media (max-width: 980px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
  }

  .site-header {
    z-index: 999;
  }

  .header-inner {
    width: calc(100% - 28px) !important;
    height: 76px !important;
  }

  .brand img,
  .brand-logo-zago {
    height: 42px !important;
    max-width: 180px !important;
  }

  .nav,
  .header-cta {
    display: none !important;
  }

  .mobile-menu-toggle {
    display: inline-flex !important;
  }

  .mobile-menu-open .mobile-nav {
    display: block !important;
  }

  .container,
  .narrow {
    width: calc(100% - 32px) !important;
    max-width: 100% !important;
  }

  .section-light,
  .models,
  .compare,
  .applications,
  .cta-section {
    padding: 64px 0 !important;
  }

  .hero {
    min-height: auto !important;
    overflow: hidden !important;
  }

  .hero-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 26px !important;
    padding: 42px 0 56px !important;
  }

  /* No mobile/tablet (telas verticais tipo 1080x1920) o hero fica centralizado.
     No desktop permanece alinhado à esquerda (padrão definido fora deste media query). */
  .hero-copy {
    width: 100% !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  .hero-copy .pill,
  .hero-copy .zago-logo,
  .hero-copy h1,
  .hero-copy p {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .hero-actions {
    justify-content: center !important;
  }

  .zago-logo {
    height: 56px !important;
    max-width: 230px !important;
    margin-bottom: 26px !important;
  }

  .pill {
    font-size: .72rem !important;
    letter-spacing: .13em !important;
    padding: 9px 14px !important;
    margin-bottom: 22px !important;
  }

  .hero h1 {
    font-size: clamp(3.45rem, 16vw, 4.85rem) !important;
    line-height: .96 !important;
    max-width: 100% !important;
  }

  .hero-copy p {
    font-size: 1rem !important;
    line-height: 1.65 !important;
    max-width: 100% !important;
  }

  .hero-actions,
  .hero-actions .btn {
    width: 100% !important;
  }

  .hero-image {
    order: 2 !important;
    width: 100% !important;
    min-height: 230px !important;
    margin-top: 6px !important;
    overflow: visible !important;
  }

  .hero-image .hero-tire-img {
    width: min(88vw, 380px) !important;
    max-width: 380px !important;
    transform: none !important;
    margin-inline: auto !important;
  }

  /* Assinatura manuscrita "Zago" visível em tablet/mobile:
     pequena, no canto superior direito do conjunto de pneus. */
  .hero-signature-back,
  .hero-image .hero-signature-back,
  .hero-image:hover .hero-signature-back,
  .site-loaded .hero-image:hover .hero-signature-back {
    display: block !important;
    position: absolute !important;
    z-index: 6 !important;
    left: auto !important;
    right: calc(50% - 168px) !important;
    top: 12px !important;
    bottom: auto !important;
    width: min(34vw, 124px) !important;
    max-width: 124px !important;
    height: auto !important;
    object-fit: contain !important;
    transform: rotate(-5deg) !important;
    rotate: 0deg !important;
    opacity: .62 !important;
    filter: drop-shadow(0 6px 14px rgba(0,0,0,.6)) !important;
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    pointer-events: none !important;
    user-select: none !important;
    animation: none !important;
    clip-path: none !important;
  }

  .hero-brazil-flag-corner {
    right: 8px !important;
    bottom: 4px !important;
    transform: none !important;
  }

  .hero-brazil-flag-corner img {
    width: 76px !important;
    max-width: 76px !important;
  }

  .marquee {
    width: 100% !important;
    overflow: hidden !important;
  }

  .marquee-track {
    font-size: 1rem !important;
    gap: 28px !important;
  }

  .split,
  .product-blocks-grid,
  .app-grid,
  .tag-grid,
  .three-cards {
    grid-template-columns: 1fr !important;
  }

  .caminhao-stage,
  .application-img,
  .demand-image-card,
  .product-block-card,
  .spec-table,
  .cta-box {
    width: 100% !important;
    max-width: 100% !important;
  }

  .caminhao-stage img,
  .application-img img,
  .demand-image-card img {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: cover !important;
  }

  .section-title.center {
    margin-bottom: 34px !important;
  }

  h2,
  .section-title h2,
  .manifesto h2,
  .presence h2,
  .applications h2,
  .specs h2,
  .cta-section h2 {
    font-size: clamp(2.7rem, 13vw, 4rem) !important;
    line-height: .98 !important;
  }

  .lead,
  .section-title p:not(.eyebrow) {
    font-size: 1rem !important;
    line-height: 1.65 !important;
  }

  .three-cards div,
  .app-grid div,
  .tag-grid span {
    padding: 22px !important;
  }

  .product-block-card {
    border-radius: 26px !important;
    overflow: hidden !important;
  }

  .product-image-area {
    min-height: 300px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .product-image-area img,
  .product-image-area img.z722 {
    width: min(78vw, 330px) !important;
    max-width: 330px !important;
    height: auto !important;
    object-fit: contain !important;
  }

  .product-info-area {
    padding: 26px 22px !important;
  }

  .product-info-area h3 {
    font-size: clamp(2.2rem, 11vw, 3.4rem) !important;
    line-height: .98 !important;
  }

  .product-checklist li {
    font-size: .98rem !important;
    line-height: 1.45 !important;
  }

  #estrutura.mission-dual-video {
    padding: 64px 0 !important;
  }

  #estrutura .mission-three-grid {
    width: calc(100% - 32px) !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 26px !important;
  }

  #estrutura .mission-content-center {
    order: 1 !important;
    text-align: center !important;
    align-items: center !important;
  }

  #estrutura .mission-content-center h2 {
    font-size: clamp(2.8rem, 13vw, 4.1rem) !important;
    line-height: .98 !important;
  }

  #estrutura .timeline {
    width: 100% !important;
    margin-top: 32px !important;
    text-align: left !important;
  }

  #estrutura .timeline div {
    padding-left: 26px !important;
  }

  #estrutura .timeline strong {
    font-size: 1.5rem !important;
  }

  #estrutura .mission-video-left {
    order: 2 !important;
  }

  #estrutura .mission-video-right {
    order: 3 !important;
  }

  #estrutura .mission-video,
  #estrutura .mission-video:hover {
    width: min(340px, 88vw) !important;
    min-height: 260px !important;
    aspect-ratio: 1 / 1 !important;
    margin-inline: auto !important;
    overflow: hidden !important;
  }

  #estrutura .mission-video iframe {
    width: 138% !important;
    height: 138% !important;
  }

  .spec-table div {
    padding: 18px 20px !important;
  }

  .cta-box {
    padding: 42px 22px !important;
    border-radius: 26px !important;
  }

  .footer-inner {
    width: calc(100% - 32px) !important;
  }

  /* =========================================================
     MOBILE: todo o conteúdo alinhado ao centro.
     (No desktop o padrão à esquerda é mantido fora deste media query.)
  ========================================================= */
  .split,
  .section-title,
  .section-title.center,
  .demand-title,
  .manifesto .container,
  .applications-demand-grid,
  .model-features .container,
  .model-features .container > div,
  .heritage .container,
  .specs .container,
  .cta-box {
    text-align: center !important;
  }

  .eyebrow,
  .lead,
  .manifesto p,
  .heritage p,
  .model-features p,
  .specs p,
  .cta-section p,
  h2,
  .section-title h2,
  .section-title h3,
  .product-info-area h3 {
    text-align: center !important;
  }

  /* Retângulos (cards/tags) em coluna alinhada e de largura uniforme.
     O texto fica centralizado, mas os blocos NÃO encolhem pelo conteúdo
     (evita o efeito "zigue-zague" de larguras diferentes no mobile). */
  .three-cards,
  .app-grid,
  .demand-cards,
  .tag-grid {
    justify-items: stretch !important;
    justify-content: stretch !important;
  }

  .three-cards div,
  .app-grid div,
  .demand-cards div,
  .tag-grid span,
  .product-checklist li {
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
  }

  .product-checklist {
    align-items: center !important;
  }

  /* Botões/CTAs centralizados */
  .cta-actions,
  .hero-actions,
  .btn-row {
    justify-content: center !important;
  }
}

@media (max-width: 560px) {
  .container,
  .narrow,
  #estrutura .mission-three-grid {
    width: calc(100% - 28px) !important;
  }

  .header-inner {
    width: calc(100% - 28px) !important;
  }

  .brand img,
  .brand-logo-zago {
    height: 38px !important;
    max-width: 165px !important;
  }

  .mobile-menu-toggle {
    width: 42px !important;
    height: 42px !important;
  }

  .hero-grid {
    padding-top: 34px !important;
  }

  .zago-logo {
    height: 48px !important;
    max-width: 205px !important;
  }

  .hero h1 {
    font-size: clamp(3.05rem, 17vw, 4.25rem) !important;
  }

  .hero-image {
    min-height: 210px !important;
  }

  .hero-image .hero-tire-img {
    width: min(86vw, 330px) !important;
  }

  .hero-image .hero-signature-back,
  .hero-image:hover .hero-signature-back,
  .site-loaded .hero-image:hover .hero-signature-back {
    right: calc(50% - 146px) !important;
    top: 8px !important;
    width: min(32vw, 104px) !important;
    max-width: 104px !important;
    opacity: .6 !important;
  }

  .btn {
    min-height: 52px !important;
    padding: 0 22px !important;
    font-size: .95rem !important;
  }

  .section-light,
  .models,
  .compare,
  .applications,
  .cta-section {
    padding: 56px 0 !important;
  }

  .eyebrow {
    font-size: .72rem !important;
    letter-spacing: .22em !important;
  }

  h2,
  .section-title h2,
  .manifesto h2,
  .presence h2,
  .applications h2,
  .specs h2,
  .cta-section h2 {
    font-size: clamp(2.45rem, 14vw, 3.45rem) !important;
  }

  .product-image-area {
    min-height: 250px !important;
  }

  .product-image-area img,
  .product-image-area img.z722 {
    width: min(76vw, 290px) !important;
  }

  #estrutura .mission-video,
  #estrutura .mission-video:hover {
    width: min(310px, 86vw) !important;
    min-height: 240px !important;
  }
}

/* =========================================================
   HOTFIX DEFINITIVO - REMOVER TODOS OS TRAÇADOS DE HOVER
   Base: zagotyres.com.br (3).zip
   Observação: alguns "traçados" não eram hover, eram bordas/pseudo-elementos
   permanentes em cards e áreas de imagem. Por isso, removidos aqui também.
   ========================================================= */

/* Nenhum bloco informativo deve criar traçado, sombra ou movimento ao passar o mouse */
.hero-metrics div,
.hero-metrics div:hover,
.model-card,
.model-card:hover,
.compare-card,
.compare-card:hover,
.app-grid div,
.app-grid div:hover,
.gorilla-section .three-cards div,
.gorilla-section .three-cards div:hover,
.three-cards div,
.three-cards div:hover,
.tag-grid span,
.tag-grid span:hover,
.mini-grid span,
.mini-grid span:hover,
.manifesto-card,
.manifesto-card:hover,
.tire-frame,
.tire-frame:hover,
.application-img,
.application-img:hover,
.gorilla-stage,
.gorilla-stage:hover,
.caminhao-stage,
.caminhao-stage:hover,
.product-block-card,
.product-block-card:hover,
.product-image-area,
.product-image-area:hover,
.product-info-area,
.product-info-area:hover,
.video-frame,
.video-frame:hover,
.mission-video,
.mission-video:hover,
.cta-box,
.cta-box:hover,
.spec-table,
.spec-table:hover,
.spec-table div,
.spec-table div:hover,
.timeline div,
.timeline div:hover,
.demand-image-card,
.demand-image-card:hover,
.application-img,
.application-img:hover,
.presence .application-img,
.presence .application-img:hover,
.presence .tag-grid span,
.presence .tag-grid span:hover {
  outline: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  transition: none !important;
  filter: none !important;
}

/* Remove bordas/molduras dos containers que estavam aparecendo como traçado */
.model-card,
.model-card:hover,
.compare-card,
.compare-card:hover,
.app-grid div,
.app-grid div:hover,
.product-block-card,
.product-block-card:hover,
.product-image-area,
.product-image-area:hover,
.product-info-area,
.product-info-area:hover,
.video-frame,
.video-frame:hover,
.mission-video,
.mission-video:hover,
.application-img,
.application-img:hover,
.gorilla-stage,
.gorilla-stage:hover,
.caminhao-stage,
.caminhao-stage:hover,
.manifesto-card,
.manifesto-card:hover,
.tire-frame,
.tire-frame:hover,
.demand-image-card,
.demand-image-card:hover,
.presence .application-img,
.presence .application-img:hover {
  border: 0 !important;
  border-color: transparent !important;
}

/* Remove os traçados internos criados por ::before/::after */
.model-card::before,
.model-card::after,
.compare-card::before,
.compare-card::after,
.app-grid div::before,
.app-grid div::after,
.product-block-card::before,
.product-block-card::after,
.product-image-area::before,
.product-image-area::after,
.video-frame::before,
.video-frame::after,
.mission-video::before,
.mission-video::after,
.application-img::before,
.application-img::after,
.gorilla-stage::before,
.gorilla-stage::after,
.caminhao-stage::before,
.caminhao-stage::after,
.manifesto-card::before,
.manifesto-card::after,
.tire-frame::before,
.tire-frame::after,
.demand-image-card::before,
.demand-image-card::after,
.spec-table::before,
.spec-table::after,
.cta-box::before,
.cta-box::after,
.hero-metrics div::before,
.hero-metrics div::after,
.tag-grid span::before,
.tag-grid span::after,
.three-cards div::before,
.three-cards div::after {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Imagens não aumentam, não escalam e não mudam no hover */
.model-card img,
.model-card:hover img,
.application-img img,
.application-img:hover img,
.caminhao-stage img,
.caminhao-stage:hover img,
.gorilla-stage img,
.gorilla-stage:hover img,
.product-block-card img,
.product-block-card:hover img,
.product-block-card:hover .product-image-area img,
.demand-image-card img,
.demand-image-card:hover img,
.hero-image img,
.hero-image:hover img {
  transition: none !important;
  transform: none !important;
}

/* Mantém somente botões e links com comportamento de interação */
a,
a:hover,
button,
button:hover,
.btn,
.btn:hover,
.mobile-menu-toggle,
.mobile-menu-toggle:hover,
.back-to-top,
.back-to-top:hover {
  transition: .22s ease !important;
}

/* ============================================================
   Tabela comparativa dos 3 modelos (Z601 / Z722 / Z612)
   Componente isolado — não herda regras de .spec-table
   ============================================================ */
.spec-compare-scroll {
  width: min(1040px, 100%);
  margin: 48px auto 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 18px;
  border: 1px solid #ece6da;
  background: #fff;
  box-shadow: 0 24px 54px rgba(0, 0, 0, .07);
}

.spec-compare {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  color: #14110f;
}

.spec-compare th,
.spec-compare td {
  padding: 16px 18px;
  text-align: center;
  border-bottom: 1px solid #efeae0;
  font-size: .98rem;
}

.spec-compare thead th {
  background: #111;
  color: #fff;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.5rem;
  letter-spacing: .04em;
  padding: 14px 18px;
}

.spec-compare thead th:first-child {
  background: #e1251b;
  text-align: left;
}

.spec-compare tbody th[scope="row"] {
  text-align: left;
  font-weight: 600;
  color: #3a342f;
  background: #faf8f3;
  white-space: nowrap;
}

.spec-compare tbody tr:nth-child(even) td,
.spec-compare tbody tr:nth-child(even) th[scope="row"] {
  background: #fbfaf6;
}

.spec-compare tbody tr:last-child th,
.spec-compare tbody tr:last-child td {
  border-bottom: 0;
}

.spec-compare td {
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

@media (max-width: 560px) {
  .spec-compare th,
  .spec-compare td {
    padding: 12px 13px;
    font-size: .9rem;
  }
  .spec-compare thead th {
    font-size: 1.25rem;
  }
}

/* Alinha o início dos checklists dos 3 cards de modelo,
   independente do título quebrar em 1 ou 2 linhas */
.product-info-area h3 {
  min-height: 2.15em;
}

/* ============================================================
   Seção "Cada modelo, sua estrada" — 3 blocos imagem+texto
   (Z601 / Z612 / Z722, cada um com seu caminhão) — fundo escuro
   ============================================================ */
.model-features {
  padding: 110px 0;
  border-top: 1px solid rgba(255, 255, 255, .1);
  background:
    radial-gradient(circle at 82% 2%, rgba(225, 37, 27, .10), transparent 46%),
    var(--black);
}

/* Selo do modelo: rótulo editorial com barra vermelha (não botão) */
.model-feature .model-badge {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: transparent;
  color: #fff;
  border-radius: 0;
  padding: 0;
  font-family: 'Bebas Neue', Arial, sans-serif;
  font-weight: 400;
  font-size: 1.85rem;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.model-feature .model-badge::before {
  content: "";
  width: 38px;
  height: 4px;
  background: var(--red);
  border-radius: 2px;
}

.model-features .tag-grid span {
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .12);
  color: rgba(255, 255, 255, .82);
}

.model-feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.model-feature + .model-feature {
  margin-top: 88px;
}

.model-feature.reverse .model-feature-img {
  order: 2;
}

.model-feature-img {
  margin: 0;
  border-radius: 32px;
  overflow: hidden;
  background: #0c0c0c;
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 28px 60px rgba(0, 0, 0, .5);
}

.model-feature-img img {
  width: 100%;
  height: 470px;
  object-fit: cover;
  display: block;
  transition: transform .6s ease;
}

.model-feature-img:hover img {
  transform: scale(1.035);
}

.model-feature-copy .model-badge {
  margin-bottom: 22px;
}

.model-feature-copy h3 {
  color: #fff;
  margin-bottom: 18px;
  font-size: clamp(2rem, 3vw, 3rem);
}

.model-feature-copy .lead {
  color: rgba(255, 255, 255, .72);
  margin-bottom: 26px;
}

.model-feature-copy .tag-grid {
  margin: 0 0 30px;
}

@media (max-width: 980px) {
  .model-features {
    padding: 78px 0;
  }
  .model-feature {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .model-feature + .model-feature {
    margin-top: 58px;
  }
  .model-feature.reverse .model-feature-img {
    order: 0;
  }
  .model-feature-img img {
    height: 300px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .model-feature-img img {
    transition: none;
  }
  .model-feature-img:hover img {
    transform: none;
  }
}

/* ============================================================
   Acessibilidade e navegação (auditoria jun/2026)
   ============================================================ */

/* Âncoras não ficam escondidas atrás do header fixo */
#topo,
#manifesto,
#linhas,
#comparativo,
#estrutura,
#aplicacoes,
#modelos,
#ficha-tecnica,
#cotacao {
  scroll-margin-top: 104px;
}

/* Foco visível para navegação por teclado (vermelho da marca,
   visível tanto no creme quanto no preto) */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.mobile-menu-toggle:focus-visible,
.back-to-top:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 3px;
  border-radius: 10px;
}

/* Em fundo/elemento vermelho, o contorno fica escuro para contrastar */
.btn-primary:focus-visible,
.btn-white:focus-visible,
.cta-section a:focus-visible {
  outline-color: #0a0a0a;
}

/* Quando navegando por teclado, mostrar o cursor do sistema */
body:has(a:focus-visible),
body:has(button:focus-visible) {
  cursor: auto;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* Link "pular para o conteúdo" — aparece só ao focar via teclado */
.skip-link {
  position: fixed;
  left: 16px;
  top: -80px;
  z-index: 10000;
  background: var(--red);
  color: #fff;
  padding: 12px 22px;
  border-radius: 12px;
  font-weight: 800;
  letter-spacing: .02em;
  box-shadow: 0 16px 36px rgba(0, 0, 0, .4);
  transition: top .2s ease;
}

.skip-link:focus {
  top: 16px;
}

/* Item ativo do menu conforme a rolagem (scroll-spy) */
.nav a.active,
.mobile-nav a.active {
  color: var(--red);
}

/* ============================================================
   Seção institucional "18 anos movendo o Brasil" (do panfleto)
   ============================================================ */
.heritage {
  padding: 110px 0;
  border-block: 1px solid rgba(255, 255, 255, .1);
}

.heritage-head {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 30px 60px;
  align-items: end;
  margin-bottom: 40px;
}

.heritage-head h2 {
  margin: 0;
}

.heritage-head .lead {
  color: rgba(255, 255, 255, .74);
  max-width: 560px;
  margin: 0;
}

.heritage-media {
  margin: 0 0 52px;
  border-radius: 30px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 30px 64px rgba(0, 0, 0, .55);
}

.heritage-media img {
  width: 100%;
  height: clamp(260px, 32vw, 440px);
  object-fit: cover;
  object-position: center;
  display: block;
}

.ficha-download {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

.ficha-download .btn-ficha {
  min-height: 56px;
  padding-inline: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
}

.ficha-download .btn-ficha-icon {
  flex: 0 0 auto;
}

@media (max-width: 480px) {
  .ficha-download .btn-ficha {
    width: 100%;
    max-width: 360px;
    padding-inline: 20px;
  }
}

.heritage-stats {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 48px;
  justify-content: start;
  margin-bottom: 52px;
}

.heritage-stats strong {
  display: block;
  font-family: 'Bebas Neue', Arial, sans-serif;
  font-size: clamp(2.4rem, 4vw, 3.4rem);
  letter-spacing: .03em;
  color: #ffffff;
  line-height: 1;
}

.heritage-stats span {
  color: rgba(255, 255, 255, .66);
  font-size: .92rem;
}

.heritage-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.heritage-grid div {
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 20px;
  padding: 26px;
  transition: border-color .22s ease, transform .22s ease;
}

.heritage-grid div:hover {
  border-color: rgba(225, 37, 27, .45);
  transform: translateY(-3px);
}

.heritage-grid strong {
  display: block;
  font-family: 'Bebas Neue', Arial, sans-serif;
  font-size: 1.5rem;
  letter-spacing: .04em;
  margin-bottom: 10px;
}

.heritage-grid p {
  color: rgba(255, 255, 255, .64);
  font-size: .95rem;
  margin: 0;
}

@media (max-width: 980px) {
  .heritage {
    padding: 78px 0;
  }
  .heritage-head {
    grid-template-columns: 1fr;
    gap: 18px;
    margin-bottom: 30px;
  }
  .heritage-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 560px) {
  .heritage-grid {
    grid-template-columns: 1fr;
  }
  .heritage-stats {
    gap: 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .heritage-grid div:hover {
    transform: none;
  }
}

/* ============================================================
   Rodapé com contatos e redes (do panfleto)
   ============================================================ */
.footer-inner {
  display: grid !important;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 26px 48px;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.footer-tagline {
  margin: 0 !important;
  color: rgba(255, 255, 255, .62) !important;
  font-size: .92rem !important;
  text-align: left !important;
}

.footer-contact {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 9px;
}

.footer-contact a {
  color: rgba(255, 255, 255, .8);
  font-size: .92rem;
  font-weight: 600;
  transition: color .2s ease;
}

.footer-contact a:hover {
  color: var(--red);
}

.footer-copy {
  grid-column: 1 / -1;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 6px 0 0 !important;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  color: rgba(255, 255, 255, .58) !important;
  font-size: .88rem !important;
  text-align: left !important;
}

/* Logo Zago no rodapé, em tamanho normal (como antes) */
.footer .footer-brand img.footer-logo {
  display: block !important;
  height: 62px !important;
  max-width: 300px !important;
  width: auto !important;
  margin: 0 !important;
  opacity: 1 !important;
  object-fit: contain !important;
}

@media (max-width: 980px) {
  .footer .footer-brand img.footer-logo {
    height: 52px !important;
    max-width: 250px !important;
  }
}

@media (max-width: 680px) {
  .footer-inner {
    grid-template-columns: 1fr;
    text-align: center;
    justify-items: center;
  }
  .footer-brand {
    align-items: center;
  }
  .footer-tagline {
    text-align: center !important;
  }
  .footer-contact {
    align-items: center;
  }
  .footer-copy {
    justify-content: center !important;
    text-align: center !important;
  }
}

/* Stat "Brasil" em verde da bandeira (seção institucional) */
.heritage-stats .stat-br strong {
  color: #16a64e;
}

/* ============================================================
   Seção "Cada camada tem uma missão" — 3 vídeos de rotação
   ============================================================ */
.mission-videos-section {
  padding: 110px 0;
}

.mission-videos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  margin: 0 0 52px;
}

.mission-vid {
  position: relative;
  margin: 0;
  aspect-ratio: 1 / 1;
  border-radius: 26px;
  overflow: hidden;
  background: #f1ece3;
  border: 1px solid #e6dfd4;
  box-shadow: 0 24px 54px rgba(70, 43, 23, .16);
}

.mission-vid video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mission-vid figcaption {
  position: absolute;
  left: 16px;
  bottom: 14px;
  z-index: 2;
  font-family: 'Bebas Neue', Arial, sans-serif;
  font-size: 1.35rem;
  letter-spacing: .12em;
  color: #14110f;
  background: rgba(255, 255, 255, .82);
  padding: 3px 14px;
  border-radius: 8px;
  backdrop-filter: blur(4px);
}

.mission-layers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.mission-layers > div {
  position: relative;
  padding-top: 20px;
  border-top: 2px solid #e2dacb;
}

.mission-layers > div::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  width: 42px;
  height: 2px;
  background: var(--red);
}

.mission-layers strong {
  display: block;
  font-family: 'Bebas Neue', Arial, sans-serif;
  font-size: 1.7rem;
  letter-spacing: .05em;
  color: var(--ink);
  margin-bottom: 6px;
}

.mission-layers p {
  color: var(--ink-muted);
  font-size: .98rem;
  margin: 0;
}

@media (max-width: 880px) {
  .mission-videos-section {
    padding: 78px 0;
  }
  .mission-videos {
    gap: 16px;
  }
  .mission-layers {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

@media (max-width: 560px) {
  .mission-videos {
    grid-template-columns: 1fr;
    gap: 18px;
    max-width: 420px;
    margin-inline: auto;
    margin-bottom: 44px;
  }
}

/* Navegação com mais itens — reduz o espaçamento para caber 7 links */
.nav {
  gap: 24px;
}

@media (max-width: 1120px) and (min-width: 981px) {
  .nav {
    gap: 15px;
    font-size: .8rem;
    letter-spacing: .08em;
  }
}

/* ============================================================
   Harmonização do hero (v19): bandeira junto ao conjunto de pneus
   ============================================================ */
.hero-brazil-flag-corner {
  right: clamp(10px, 2.4vw, 52px) !important;
  bottom: clamp(30px, 5vw, 74px) !important;
  width: clamp(50px, 4.2vw, 64px) !important;
}

@media (max-width: 980px) {
  .hero-brazil-flag-corner {
    right: calc(50% - 150px) !important;
    bottom: 8px !important;
    width: 42px !important;
  }
}

/* ============================================================
   Ajustes da rodada de aprovação (jun/2026)
   ============================================================ */

/* Seção "18 anos movendo o Brasil": título + logo Imppar
   centralizados, texto abaixo da imagem e tópicos ao lado */
.heritage-head-centered {
  display: block;
  text-align: center;
  margin-bottom: 40px;
}

.heritage-head-centered .eyebrow {
  justify-content: center;
}

.heritage-imppar-logo {
  display: block;
  height: clamp(44px, 6vw, 74px);
  width: auto;
  margin: 16px auto 18px;
}

.heritage-head-centered h2 {
  margin: 0 auto;
}

/* Abaixo da imagem: texto da Zago à esquerda, números à direita.
   Os 4 retângulos seguem em faixa cheia logo abaixo (como antes). */
.heritage-body {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 30px 48px;
  align-items: center;
  margin-bottom: 52px;
}

.heritage-body .lead {
  color: rgba(255, 255, 255, .76);
  max-width: none;
  margin: 0;
}

.heritage-body .heritage-stats {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: baseline;
  gap: 18px 40px;
  margin: 0;
  text-align: left;
}

.heritage-body .heritage-stats strong {
  font-size: clamp(2rem, 2.6vw, 2.7rem);
}

@media (max-width: 980px) {
  .heritage-body {
    grid-template-columns: 1fr;
    gap: 26px;
  }
  .heritage-body .heritage-stats {
    justify-content: center;
    gap: 22px 44px;
    text-align: center;
  }
  .heritage-body .heritage-stats > div {
    flex: 0 0 calc(50% - 44px);
  }
  .heritage-body .heritage-stats .stat-br {
    flex-basis: 100%;
  }
}

/* Nota abaixo dos cards de público — não limitar segmento/CNPJ */
.demand-note {
  margin: 22px 0 0;
  font-size: .9rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, .62);
}

.demand-note-star {
  color: var(--red);
  font-weight: 700;
}

/* Card Z612 (operação mista): imagem recortada e centralizada no caminhão,
   com o mesmo nível de zoom dos cards Z722/Z601 (centralização simétrica) */
#modelos .model-feature:nth-of-type(3) .model-feature-img img {
  object-position: center;
  transform: scale(1.18);
  transform-origin: center;
}

#modelos .model-feature:nth-of-type(3) .model-feature-img:hover img {
  transform: scale(1.24);
}

/* "Cada camada tem uma missão": o traço superior dava sensação de
   barra de carregando/carrossel — vira só um marcador vermelho curto */
.mission-layers > div {
  border-top: 0;
  padding-top: 0;
}

.mission-layers > div::before {
  position: static;
  display: block;
  width: 34px;
  height: 4px;
  border-radius: 4px;
  margin-bottom: 16px;
}

/* CTAs "Falar com especialista" sempre em uma linha só */
.header-cta,
.btn-hero-specialist,
.cta-section .btn-white {
  white-space: nowrap;
}

/* Caminhões dos blocos de modelo: mais centralizados e com zoom
   (aproximar a imagem para o caminhão ganhar destaque) */
.model-feature-img img {
  object-position: center 55%;
  transform: scale(1.2);
  transform-origin: center 55%;
}

.model-feature-img:hover img {
  transform: scale(1.27);
}

@media (prefers-reduced-motion: reduce) {
  .model-feature-img:hover img {
    transform: scale(1.2);
  }
}

/* Ajuste de enquadramento por modelo (jun/2026):
   Z722 estava com o caminhão muito distante -> aproxima mais (zoom);
   Z601 mantém; Z612 estava colado -> afasta um pouco. */
#modelos .model-feature:nth-of-type(1) .model-feature-img img {
  transform: scale(1.5);
  transform-origin: center 55%;
}
#modelos .model-feature:nth-of-type(1) .model-feature-img:hover img {
  transform: scale(1.57);
}

#modelos .model-feature:nth-of-type(3) .model-feature-img img {
  transform: scale(1.06);
}
#modelos .model-feature:nth-of-type(3) .model-feature-img:hover img {
  transform: scale(1.12);
}

@media (prefers-reduced-motion: reduce) {
  #modelos .model-feature:nth-of-type(1) .model-feature-img:hover img {
    transform: scale(1.5);
  }
  #modelos .model-feature:nth-of-type(3) .model-feature-img:hover img {
    transform: scale(1.06);
  }
}

/* Enquadramento unificado dos 3 caminhões do #modelos (jun/2026):
   mesmo zoom para todos, centralizados e um pouco mais aproximados.
   Z722/Z601/Z612 -> scale(1.32), foco central. Este bloco vem por
   último e vence os ajustes por-modelo acima. */
.model-feature-img img,
#modelos .model-feature:nth-of-type(1) .model-feature-img img,
#modelos .model-feature:nth-of-type(2) .model-feature-img img,
#modelos .model-feature:nth-of-type(3) .model-feature-img img {
  object-position: center;
  transform: scale(1.32);
  transform-origin: center;
}

.model-feature-img:hover img,
#modelos .model-feature:nth-of-type(1) .model-feature-img:hover img,
#modelos .model-feature:nth-of-type(2) .model-feature-img:hover img,
#modelos .model-feature:nth-of-type(3) .model-feature-img:hover img {
  transform: scale(1.38);
}

@media (prefers-reduced-motion: reduce) {
  .model-feature-img:hover img,
  #modelos .model-feature:nth-of-type(1) .model-feature-img:hover img,
  #modelos .model-feature:nth-of-type(2) .model-feature-img:hover img,
  #modelos .model-feature:nth-of-type(3) .model-feature-img:hover img {
    transform: scale(1.32);
  }
}

/* ============================================================
   Rodapé centralizado + logo Imppar Pneus (print 15:56)
   ============================================================ */
.footer-inner.footer-centered {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 18px;
}

.footer-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 22px 30px;
}

.footer-centered .footer-logos img.footer-logo {
  display: block !important;
  height: 54px !important;
  max-width: 280px !important;
  width: auto !important;
  margin: 0 !important;
  opacity: 1 !important;
  object-fit: contain !important;
}

.footer-centered .footer-logos img.footer-logo-imppar {
  height: 54px !important;
}

.footer-logo-divider {
  width: 1px;
  height: 36px;
  background: rgba(255, 255, 255, .18);
}

.footer-centered .footer-tagline {
  text-align: center !important;
  margin: 0 !important;
}

.footer-centered .footer-copy {
  grid-column: auto;
  justify-content: center !important;
  text-align: center !important;
  width: 100%;
  margin: 4px 0 0 !important;
}

@media (max-width: 560px) {
  .footer-logo-divider {
    display: none;
  }
}

/* Aviso de que banda/carcaça/composto valem para TODOS os modelos
   (evita parecer diferencial individual por estar abaixo de cada vídeo) */
.mission-layers-head {
  max-width: 760px;
  margin: 0 auto 34px;
  text-align: center;
}

.mission-layers-eyebrow {
  display: inline-block;
  font-family: 'Bebas Neue', Arial, sans-serif;
  letter-spacing: .14em;
  font-size: 1.05rem;
  color: var(--red);
  margin-bottom: 10px;
}

.mission-layers-head p {
  color: var(--ink-muted);
  font-size: 1rem;
  margin: 0;
}

.mission-layers-head strong {
  color: var(--ink);
  font-weight: 700;
}