/* =========================================================
   Rdetail Estética Automotiva — Home
   Paleta: preto · vermelho · branco · cinza (identidade do Instagram)
   Tipografia: Saira (títulos, combina com o wordmark DETAiL) + Barlow (texto)
   ========================================================= */

:root {
  --black: #0a0a0b;
  --ink: #101113;
  --graphite: #17181b;
  --steel: #23252a;
  --line: #2c2f35;
  --gray: #8d9199;
  --silver: #c7cad0;
  --white: #f4f5f6;
  --red: #e1121b;
  --red-hot: #ff2a33;
  --red-deep: #9e0c12;
  /* vermelho fosco para superfícies grandes: o vivo fica só nos acentos */
  --red-matte: #6e1519;
  --red-matte-dark: #4a0d10;
  --petrol: #1d93a3;
  --petrol-dark: #0e5f6b;
  --yellow: #f2b51c;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  --font-display: "Saira", system-ui, sans-serif;
  --font-body: "Barlow", system-ui, sans-serif;

  --container: 1240px;
  --gutter: clamp(16px, 4vw, 40px);
  --radius: 4px;
  --header-h: 76px;
  --cut: clamp(28px, 4vw, 64px);   /* altura dos cortes diagonais entre seções */
  --ease: cubic-bezier(.2, .7, .1, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) - 4px); -webkit-text-size-adjust: 100%; overflow-x: clip; background: var(--black); color-scheme: dark; }
body {
  margin: 0;
  background: var(--black);
  color: var(--silver);
  font: 400 17px/1.6 var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-x: clip; /* nada estoura a largura da tela (ticker inclinado é 104%) */
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4 { font-family: var(--font-display); color: var(--white); margin: 0; line-height: 1.04; }
p { margin: 0 0 1em; }
strong { color: var(--white); font-weight: 600; }
:focus-visible { outline: 2px solid var(--red-hot); outline-offset: 3px; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 max(var(--gutter), env(safe-area-inset-right)) 0 max(var(--gutter), env(safe-area-inset-left)); }

.ico { width: 1.15em; height: 1.15em; flex: none; fill: currentColor; vertical-align: -0.18em; }
.ico-lg { width: 28px; height: 28px; }

/* ---------- Tipografia de seção ---------- */
.kicker {
  display: inline-flex; align-items: center; gap: 12px;
  font: 700 13px/1 var(--font-display); letter-spacing: .3em; text-transform: uppercase;
  color: var(--red-hot); margin-bottom: 18px;
}
.kicker::before { content: ""; width: 30px; height: 3px; background: currentColor; transform: skewX(-40deg); box-shadow: 8px 0 0 -0px transparent; }
.kicker--light { color: var(--white); }
.kicker--light::before { background: var(--red); }
.cta-band .kicker--light::before { background: #fff; }

.h2 { font-size: clamp(32px, 4.4vw, 56px); font-weight: 800; letter-spacing: -.01em; text-wrap: balance; text-transform: uppercase; }
.h2 em, .hero-title em, .cta-band h2 em, .contact-title em {
  font-style: italic; font-weight: 900; color: transparent;
  background: linear-gradient(100deg, var(--white) 0%, var(--silver) 45%, var(--red-hot) 46%, var(--red) 100%);
  background-size: 220% 100%; background-position: 0 0;
  -webkit-background-clip: text; background-clip: text;
  transition: background-position 1.4s var(--ease);
  padding-right: .06em;
}
.reveal.is-in .h2 em, .h2.is-in em, .hero-title.is-in em { background-position: 100% 0; }

.section { position: relative; padding: clamp(80px, 11vw, 140px) 0; overflow: hidden; }
.section-head { position: relative; isolation: isolate; max-width: 760px; margin-bottom: clamp(40px, 6vw, 64px); }
.section-head--row { max-width: none; display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.section-head--center { margin-inline: auto; text-align: center; }
.section-sub { margin-top: 18px; color: var(--gray); font-size: 18px; }

/* Tipografia fantasma gigante atrás dos títulos (inspiração BMW / DriveX) */
[data-ghost]::before {
  content: attr(data-ghost);
  position: absolute; z-index: -1; left: -.04em; top: -.42em;
  font: italic 900 clamp(84px, 14vw, 210px)/1 var(--font-display); letter-spacing: -.02em; text-transform: uppercase;
  color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.055);
  white-space: nowrap; pointer-events: none;
}
.section-head--center[data-ghost]::before { left: 50%; transform: translateX(-50%); }

/* ---------- Botões (paralelogramo, como nas faixas da marca) ---------- */
.btn {
  --bg: transparent; --bd: transparent;
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 28px; border: 0; background: none; isolation: isolate;
  font: 700 14px/1 var(--font-display); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
  transition: transform .3s var(--ease), color .3s, filter .3s;
}
.btn::before { /* fundo inclinado + reflexo que atravessa no hover */
  content: ""; position: absolute; inset: 0; z-index: -1;
  transform: skewX(-14deg); border: 1px solid var(--bd); border-radius: 2px;
  background:
    linear-gradient(115deg, transparent 40%, rgba(255,255,255,.38) 50%, transparent 60%) no-repeat,
    var(--bg);
  background-size: 260% 100%, 100% 100%; background-position: 160% 0, 0 0;
  transition: background-position .9s var(--ease), background-color .3s, border-color .3s, box-shadow .3s;
}
.btn:hover::before { background-position: -60% 0, 0 0; }
.btn:hover { transform: translateY(-2px); }
.btn-sm { padding: 12px 20px; font-size: 12px; }
.btn-lg { padding: 19px 34px; font-size: 15px; }
.btn-red { --bg: var(--red); color: #fff; }
.btn-red::before { box-shadow: 0 10px 26px -12px rgba(225,18,27,.6), inset 0 1px 0 rgba(255,255,255,.14); }
.btn-red:hover::before { --bg: #f01d26; box-shadow: 0 12px 30px -10px rgba(225,18,27,.7); }
.btn-red::after { /* ponta em seta (inspiração Kumho) */
  content: ""; width: 9px; height: 9px; border-top: 2px solid currentColor; border-right: 2px solid currentColor;
  transform: rotate(45deg); margin-left: 4px; transition: transform .3s var(--ease);
}
.btn-red:hover::after { transform: translateX(4px) rotate(45deg); }
.btn-ghost { --bg: rgba(255,255,255,.04); --bd: rgba(255,255,255,.3); color: var(--white); }
.btn-ghost:hover::before { --bd: var(--white); --bg: rgba(255,255,255,.08); }
.btn-white { --bg: var(--white); color: var(--black); }
.btn-white:hover::before { --bg: #fff; }

/* ---------- Detalhes geométricos ---------- */
.corner { position: absolute; width: 34px; height: 34px; pointer-events: none; z-index: 3; }
.corner::before, .corner::after { content: ""; position: absolute; background: var(--red); }
.corner::before { width: 100%; height: 2px; }
.corner::after { width: 2px; height: 100%; }
.corner-tl { top: 22px; left: 22px; }
.corner-br { bottom: 22px; right: 22px; transform: rotate(180deg); }

.sq { display: inline-block; width: 8px; height: 8px; background: var(--red); vertical-align: 1px; box-shadow: 14px 0 0 rgba(225,18,27,.45), 28px 0 0 rgba(225,18,27,.18); margin-right: 42px; transform: skewX(-20deg); }

.deco-diag {
  position: absolute; top: 0; right: -6%; width: 34%; height: 100%;
  background: repeating-linear-gradient(-58deg, transparent 0 22px, rgba(225,18,27,.06) 22px 24px);
  pointer-events: none;
}
.deco-grid {
  position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse at 80% 0%, #000 0%, transparent 60%);
  -webkit-mask-image: radial-gradient(ellipse at 80% 0%, #000 0%, transparent 60%);
}

/* Faixas vermelhas de velocidade (inspiração Talon) */
.speed { position: absolute; pointer-events: none; display: grid; gap: 14px; }
.speed i { display: block; height: 100%; background: linear-gradient(90deg, rgba(225,18,27,0), var(--red) 70%); transform: skewX(-32deg); transform-origin: right; }

/* Cortes diagonais entre seções (inspiração BMW) */
.cut-top { clip-path: polygon(0 var(--cut), 100% 0, 100% 100%, 0 100%); margin-top: calc(var(--cut) * -1); padding-top: calc(clamp(80px, 11vw, 140px) + var(--cut)); }
.cut-top-r { clip-path: polygon(0 0, 100% var(--cut), 100% 100%, 0 100%); margin-top: calc(var(--cut) * -1); padding-top: calc(clamp(80px, 11vw, 140px) + var(--cut)); }

/* ---------- Barra de progresso ---------- */
.scroll-progress { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 120; pointer-events: none; }
.scroll-progress span { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--red-deep), var(--red-hot)); transform-origin: 0 50%; transform: scaleX(0); }

/* ============ HEADER ============ */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--header-h);
  transition: background-color .4s, border-color .4s, height .4s var(--ease), backdrop-filter .4s;
  border-bottom: 1px solid transparent;
}
.site-header.is-solid {
  background: rgba(10,10,11,.95);
  border-color: rgba(255,255,255,.06); --header-h: 66px; height: 66px;
}
.site-header.is-solid::after { /* filete vermelho inclinado sob o header */
  content: ""; position: absolute; left: 0; bottom: -1px; width: 220px; height: 2px; background: var(--red);
  clip-path: polygon(0 0, 100% 0, calc(100% - 4px) 100%, 0 100%);
}
.header-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }

.brand { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 12px; color: var(--white); }
.brand-mark { width: 32px; height: 34px; color: var(--white); flex: none; }
.brand-word { width: 104px; height: 12px; color: var(--white); flex: none; }
.brand:hover .brand-mark { animation: markPulse .9s var(--ease); }
@keyframes markPulse { 40% { transform: scale(1.08) rotate(-4deg); filter: drop-shadow(0 0 10px rgba(255,255,255,.5)); } }
.brand--stack { flex-direction: column; align-items: flex-start; gap: 14px; }
.brand--stack .brand-mark { width: 58px; height: 62px; }
.brand--stack .brand-word { width: 150px; height: 17px; }
.brand-sub { font: 600 10px/1 var(--font-display); letter-spacing: .26em; text-transform: uppercase; color: var(--gray); }

.main-nav { display: flex; align-items: center; gap: 28px; }
.main-nav ul { display: flex; gap: 4px; }
.main-nav ul a {
  position: relative; display: block; padding: 10px 12px;
  font: 600 13px/1 var(--font-display); letter-spacing: .08em; text-transform: uppercase; color: var(--silver);
  transition: color .25s;
}
.main-nav ul a::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 2px;
  background: var(--red); transform: scaleX(0) skewX(-30deg); transform-origin: left; transition: transform .35s var(--ease);
}
.main-nav ul a:hover, .main-nav ul a.is-active { color: var(--white); }
.main-nav ul a:hover::after, .main-nav ul a.is-active::after { transform: scaleX(1) skewX(-30deg); }

.nav-toggle { display: none; width: 44px; height: 44px; background: none; border: 1px solid var(--line); border-radius: var(--radius); position: relative; }
.nav-toggle span { position: absolute; left: 11px; right: 11px; height: 2px; background: var(--white); transition: transform .35s var(--ease), opacity .2s; }
.nav-toggle span:nth-child(1) { top: 14px; }
.nav-toggle span:nth-child(2) { top: 21px; right: 17px; background: var(--red); }
.nav-toggle span:nth-child(3) { top: 28px; }
.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============ HERO ============ */
.hero {
  --panel: min(54vw, 860px);
  position: relative; min-height: 100vh; min-height: 100svh;
  display: flex; align-items: center; overflow: hidden; isolation: isolate;
  padding: calc(var(--header-h) + 40px) 0 120px;
  background:
    radial-gradient(ellipse 60% 70% at 70% 45%, rgba(225,18,27,.10), transparent 70%),
    linear-gradient(180deg, #0d0d0f, var(--black));
}

/* painel inclinado com a foto (inspiração DriveX) */
.hero-media {
  position: absolute; top: 0; bottom: 0; right: 0; width: var(--panel); z-index: -2; overflow: hidden;
  clip-path: polygon(22% 0, 100% 0, 100% 100%, 0 100%);
  background: #050506;
}
.hero-media img {
  width: 100%; height: 112%; object-fit: cover; object-position: 50% 62%;
  transform: translate3d(0, 0, 0) scale(1.04);
  animation: lightsOn 2.6s .2s both;
  will-change: transform;
}
/* faróis "acendendo" ao carregar */
@keyframes lightsOn {
  0%   { opacity: 0; filter: brightness(.08) saturate(.4); }
  18%  { opacity: 1; filter: brightness(.18) saturate(.5); }
  24%  { filter: brightness(1.15) saturate(1); }
  28%  { filter: brightness(.3) saturate(.6); }
  34%  { filter: brightness(1.1) saturate(1); }
  38%  { filter: brightness(.55); }
  50%, 100% { opacity: 1; filter: brightness(1) saturate(1); }
}
.hero-glow { /* halo do farol */
  position: absolute; left: 6%; right: 2%; top: 42%; height: 26%;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(200,225,255,.22), rgba(160,200,255,.05) 45%, transparent 70%);
  pointer-events: none; opacity: 0; will-change: opacity;
  animation: glowOn 2.6s .2s forwards, glowBreath 5s 3s ease-in-out infinite;
}
@keyframes glowOn { 0%, 22% { opacity: 0; } 24% { opacity: 1; } 28% { opacity: .1; } 34%, 100% { opacity: .8; } }
@keyframes glowBreath { 0%, 100% { opacity: .8; } 50% { opacity: .45; } }
.hero-sweep { /* reflexo de luz que percorre a pintura (posição controlada pela rolagem) */
  position: absolute; inset: 0 -60%;
  background: linear-gradient(105deg, transparent 42%, rgba(255,255,255,.08) 49%, rgba(255,255,255,.02) 52%, transparent 56%);
  transform: translate3d(-60%, 0, 0); will-change: transform; pointer-events: none;
  animation: sweepIn 1.6s 1s ease both;
}
@keyframes sweepIn { from { opacity: 0; } to { opacity: 1; } }
.hero-edge { /* aresta vermelha na diagonal do painel */
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, var(--red-hot), var(--red-deep));
  clip-path: polygon(22% 0, calc(22% + 5px) 0, 5px 100%, 0 100%);
  filter: drop-shadow(0 0 12px var(--red));
  animation: edgeIn 1.2s .3s var(--ease) both;
}
@keyframes edgeIn { from { clip-path: polygon(22% 0, calc(22% + 5px) 0, calc(22% + 5px) 0, 22% 0); } }

.hero-shade {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(90deg, var(--black) 0%, rgba(10,10,11,.92) 38%, rgba(10,10,11,.2) 62%, transparent 75%),
    linear-gradient(0deg, var(--black) 0%, transparent 22%),
    linear-gradient(180deg, rgba(10,10,11,.75) 0%, transparent 18%);
}
.hero-grid-tex {
  position: absolute; inset: 0; z-index: -3; pointer-events: none;
  background: repeating-linear-gradient(-58deg, transparent 0 34px, rgba(225,18,27,.07) 34px 36px);
  clip-path: polygon(0 0, 22% 0, 8% 100%, 0 100%);
}
.hero-speed { right: calc(var(--panel) * .5); bottom: 7%; width: 21vw; height: 120px; z-index: -1; grid-template-rows: 1fr .7fr .45fr; }
.hero-speed i:nth-child(2) { width: 80%; margin-left: auto; opacity: .7; }
.hero-speed i:nth-child(3) { width: 55%; margin-left: auto; opacity: .45; }
.hero-speed i { animation: speedIn 1.1s var(--ease) both; }
.hero-speed i:nth-child(2) { animation-delay: .12s; } .hero-speed i:nth-child(3) { animation-delay: .24s; }
@keyframes speedIn { from { transform: skewX(-32deg) scaleX(0); } }
.hero-ghost { /* marca gigante translúcida ao fundo */
  position: absolute; left: -1vw; bottom: -3.2vw; z-index: -2; pointer-events: none;
  font: italic 900 21vw/1 var(--font-display); letter-spacing: -.03em; text-transform: uppercase; white-space: nowrap;
  color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.06);
  background: linear-gradient(90deg, rgba(255,255,255,.05), transparent 70%); -webkit-background-clip: text; background-clip: text;
}

.hero-content { position: relative; }
.hero-h1 { margin: 0; font-size: inherit; line-height: inherit; }
.hero-h1 .eyebrow, .hero-h1 .hero-title { display: block; }
.eyebrow { font: 600 13px/1.4 var(--font-display); letter-spacing: .26em; text-transform: uppercase; color: var(--silver); margin-bottom: 26px; }
.hero-title {
  font-size: clamp(44px, 6.6vw, 92px); font-weight: 900; letter-spacing: -.015em; line-height: .94;
  max-width: 13ch; margin-bottom: 28px; text-transform: uppercase;
  text-shadow: 0 10px 40px rgba(0,0,0,.6);
}
.hero-lead { max-width: 520px; font-size: clamp(17px, 1.4vw, 19px); color: #b9bcc2; margin-bottom: 38px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 18px; margin-bottom: 52px; padding-left: 6px; }

.hero-tags { display: flex; flex-wrap: wrap; gap: 8px 0; }
.hero-tags li {
  font: 600 12px/1 var(--font-display); letter-spacing: .22em; text-transform: uppercase; color: var(--gray);
  padding: 0 18px; border-left: 2px solid var(--line); transform: skewX(-12deg);
}
.hero-tags li:first-child { padding-left: 0; border-left: 0; }

.scroll-cue { position: absolute; left: 50%; bottom: 34px; width: 26px; height: 42px; margin-left: -13px; border: 2px solid rgba(255,255,255,.35); border-radius: 14px; }
.scroll-cue span { position: absolute; left: 50%; top: 8px; width: 3px; height: 8px; margin-left: -1.5px; background: var(--red); border-radius: 2px; animation: cue 1.8s infinite; }
@keyframes cue { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(14px); } }

/* ============ TICKER ============ */
.ticker {
  background: var(--grain), linear-gradient(180deg, var(--red-matte), var(--red-matte-dark));
  color: rgba(244,245,246,.82); overflow: hidden; transform: rotate(-1.6deg); width: 104%; margin: -16px 0 0 -2%; position: relative; z-index: 2;
  box-shadow: 0 18px 40px -22px rgba(0,0,0,.9); border-top: 1px solid rgba(255,255,255,.07); border-bottom: 1px solid rgba(0,0,0,.5);
}
.ticker::after { content: ""; position: absolute; inset: auto 0 0 0; height: 4px; background: var(--black); clip-path: polygon(0 0, 30% 0, 31% 100%, 0 100%, 0 0, 60% 0, 61% 100%, 100% 100%, 100% 0); opacity: .35; }
.ticker-track { display: flex; align-items: center; gap: 30px; width: max-content; padding: 15px 0; animation: ticker 60s linear infinite; will-change: transform; }
.ticker span { font: italic 800 15px/1 var(--font-display); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.ticker i { width: 16px; height: 4px; background: rgba(244,245,246,.35); transform: skewX(-30deg); flex: none; }
@keyframes ticker { to { transform: translateX(-50%); } }

/* ============ QUEM SOMOS ============ */
.about-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(40px, 7vw, 100px); align-items: center; }
.about-media { position: relative; margin: 0; }
.about-media img {
  width: 100%; aspect-ratio: 4/5; object-fit: cover; position: relative; z-index: 1;
  clip-path: polygon(0 0, 100% 0, 100% 88%, 86% 100%, 0 100%);
}
.about-media .frame { position: absolute; inset: 22px -22px -22px 22px; border: 1px solid var(--line); z-index: 0; clip-path: polygon(0 0, 100% 0, 100% 88%, 86% 100%, 0 100%); }
/* quadrado vermelho do canto: pulsa e brilha */
.frame-sq { position: absolute; right: -1px; top: -1px; width: 14px; height: 14px; background: var(--red); }
.frame-sq::after { content: ""; position: absolute; inset: 0; background: var(--red); opacity: .7; animation: sqPulse 2.4s infinite; }
@keyframes sqPulse { 0% { transform: scale(1); opacity: .7; } 70%, 100% { transform: scale(3.2); opacity: 0; } }
/* cantoneira vermelha que se desenha ao entrar na tela */
.about-corner { position: absolute; z-index: 3; top: -12px; left: -12px; width: 70px; height: 70px; pointer-events: none; }
.about-corner::before, .about-corner::after { content: ""; position: absolute; left: 0; top: 0; background: var(--red); transition: transform 1s .4s var(--ease); }
.about-corner::before { width: 100%; height: 3px; transform: scaleX(0); transform-origin: left; }
.about-corner::after { width: 3px; height: 100%; transform: scaleY(0); transform-origin: top; }
.about-media.is-in .about-corner::before { transform: scaleX(1); }
.about-media.is-in .about-corner::after { transform: scaleY(1); }
/* tag "padrão Rdetail": flutua, brilho atravessando, barra vermelha que cresce */
.about-badge {
  position: absolute; z-index: 2; left: -26px; bottom: 40px; overflow: hidden;
  display: flex; align-items: center; gap: 14px; padding: 17px 24px 17px 22px;
  background: rgba(10,10,11,.95); border: 1px solid var(--line);
  font: 600 12px/1.35 var(--font-display); letter-spacing: .1em; text-transform: uppercase; color: var(--gray);
  box-shadow: 0 24px 50px -12px rgba(0,0,0,.85);
  clip-path: polygon(0 0, 100% 0, 100% 70%, calc(100% - 14px) 100%, 0 100%);
  animation: badgeFloat 5s ease-in-out infinite; will-change: transform;
}
.about-badge::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--red); transform: scaleY(0); transform-origin: bottom; transition: transform .8s .6s var(--ease); }
.about-media.is-in .about-badge::before { transform: scaleY(1); }
.about-badge svg { width: 30px; height: 32px; color: var(--white); flex: none; }
.about-badge b { color: var(--white); font-weight: 800; }
.badge-shine { position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.16) 50%, transparent 65%); transform: translateX(-120%); animation: shine 4.5s 1.5s infinite; pointer-events: none; }
@keyframes shine { 0% { transform: translateX(-120%); } 35%, 100% { transform: translateX(120%); } }
@keyframes badgeFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
/* etiqueta vermelha inclinada no topo da foto */
.about-tag {
  position: absolute; z-index: 3; right: 18px; top: 22px;
  display: inline-flex; align-items: center; gap: 9px; padding: 9px 16px 9px 14px;
  font: 800 11px/1 var(--font-display); letter-spacing: .18em; text-transform: uppercase; color: #fff;
  isolation: isolate; opacity: 0; transform: translateX(30px); transition: opacity .7s .9s var(--ease), transform .7s .9s var(--ease);
}
.about-tag::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--red); transform: skewX(-16deg); box-shadow: 0 10px 26px -8px rgba(225,18,27,.9); }
.about-tag i { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: blink 1.4s infinite; }
@keyframes blink { 50% { opacity: .2; } }
.about-media.is-in .about-tag { opacity: 1; transform: none; }

.about-text > p:not(.kicker) { color: #a9adb4; font-size: 18px; }
.about-text .h2 { margin-bottom: 28px; }

.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 40px; background: var(--line); border: 1px solid var(--line); overflow: hidden; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%); }
.pillars li { background: var(--ink); padding: 22px 20px; display: flex; flex-direction: column; gap: 6px; position: relative; }
.pillars li::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--red); transition: width .5s var(--ease); }
.pillars li:hover::after { width: 100%; }
.pillars b { font: italic 900 13px/1 var(--font-display); color: var(--red); letter-spacing: .1em; }
.pillars span { font: 800 19px/1.2 var(--font-display); color: var(--white); text-transform: uppercase; }
.pillars small { font-size: 14px; color: var(--gray); line-height: 1.5; }

/* ============ SERVIÇOS ============ */
.services { background: linear-gradient(180deg, var(--ink), #0c0d0f 70%, var(--black)); }
.services::after { /* 3 faixas de velocidade no canto, mesma inclinação das do hero */
  content: ""; position: absolute; right: -24px; top: calc(var(--cut) + 56px); width: 280px; height: 44px; pointer-events: none;
  background:
    linear-gradient(var(--red), var(--red)) right 0 top 0 / 100% 8px no-repeat,
    linear-gradient(rgba(225,18,27,.5), rgba(225,18,27,.5)) right 0 top 18px / 72% 8px no-repeat,
    linear-gradient(rgba(225,18,27,.2), rgba(225,18,27,.2)) right 0 top 36px / 48% 8px no-repeat;
  transform: skewX(-32deg);
}
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.svc-card {
  --mx: 50%; --my: 0%;
  position: relative; padding: 36px 30px 34px;
  background:
    radial-gradient(420px circle at var(--mx) var(--my), rgba(255,255,255,.07), transparent 45%),
    linear-gradient(160deg, var(--graphite), #0e0f11);
  border: 1px solid var(--line); overflow: hidden;
  clip-path: polygon(0 0, calc(100% - 34px) 0, 100% 34px, 100% 100%, 0 100%);
  transition: border-color .35s, transform .45s var(--ease);
}
.svc-card::before { content: ""; position: absolute; left: 0; top: 0; width: 3px; height: 0; background: var(--red); transition: height .5s var(--ease); }
.svc-card::after { content: ""; position: absolute; right: 0; top: 0; width: 48px; height: 48px; background: linear-gradient(225deg, var(--steel) 50%, transparent 50%); transition: background .35s; }
.svc-card:hover { border-color: #3a3d44; transform: translateY(-4px); }
.svc-card:hover::before { height: 100%; }
.svc-card:hover::after { background: linear-gradient(225deg, var(--red) 50%, transparent 50%); }
.svc-num { position: absolute; right: 58px; top: 28px; font: italic 900 15px/1 var(--font-display); color: #3d4047; letter-spacing: .08em; transition: color .3s; }
.svc-card:hover .svc-num { color: var(--red); }
.svc-ico {
  position: relative; display: grid; place-items: center; width: 68px; height: 68px; margin-bottom: 26px;
  color: var(--red-hot);
  background: linear-gradient(145deg, rgba(225,18,27,.2), rgba(225,18,27,.03) 70%);
  border: 1px solid rgba(225,18,27,.35);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
  transition: background .4s, color .4s, box-shadow .4s, transform .5s var(--ease);
}
.svc-ico svg { width: 36px; height: 36px; fill: currentColor; filter: drop-shadow(0 0 8px rgba(255,42,51,.35)); }
.svc-card:hover .svc-ico { background: var(--red); color: #fff; transform: translateY(-3px); }
.svc-card:hover .svc-ico svg { filter: drop-shadow(0 0 6px rgba(255,255,255,.5)); }
.svc-card h3 { font-size: 23px; font-weight: 800; margin-bottom: 12px; text-transform: uppercase; letter-spacing: .01em; }
.svc-card p { color: var(--gray); font-size: 16px; margin: 0; }
.svc-more {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; padding-bottom: 6px;
  font: 700 13px/1 var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--white);
  border-bottom: 2px solid var(--red); transition: gap .3s, color .3s;
}
.svc-more::after { content: ""; width: 7px; height: 7px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); }
.svc-more:hover { color: var(--red-hot); gap: 14px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ============ MARCAS ============ */
.brands { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: clamp(24px, 5vw, 64px); margin-top: clamp(56px, 7vw, 88px); padding-top: 36px; border-top: 1px solid var(--line); }
.brands-label { font: 700 12px/1.5 var(--font-display); letter-spacing: .26em; text-transform: uppercase; color: var(--gray); max-width: 22ch; margin: 0; }
.brands-marquee { overflow: hidden; min-width: 0; padding: 6px 0;
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.brands-list { display: flex; align-items: center; width: max-content; animation: brands 32s linear infinite; }
.brands-list li { flex: none; margin-right: clamp(48px, 6vw, 88px); }
.brands-marquee:hover .brands-list { animation-play-state: paused; }
@keyframes brands { to { transform: translateX(-50%); } }
.brands-list img { width: auto; height: var(--h, 26px); opacity: .42; transition: opacity .35s; }
.brands-list li:hover img { opacity: .9; }

/* ============ CARROS & MOTOS ============ */
.switch { position: relative; display: inline-flex; padding: 5px; border: 1px solid var(--line); background: var(--ink); transform: skewX(-12deg); }
.switch button {
  position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 26px; border: 0; background: none;
  font: 700 14px/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--gray);
  transition: color .3s;
}
.switch button > * , .switch button { }
.switch button svg { width: 34px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.switch button span, .switch button svg { transform: skewX(12deg); }
.switch button.is-on { color: #fff; }
.switch-pill { position: absolute; top: 5px; bottom: 5px; left: 5px; width: var(--pw, 50%); transform: translateX(var(--px, 0)); background: var(--red); transition: transform .5s var(--ease), width .5s var(--ease); box-shadow: 0 8px 24px -8px rgba(225,18,27,.9); }

.v-panel { animation: panelIn .7s var(--ease) both; }
.v-panel[hidden] { display: none; }
@keyframes panelIn { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
.v-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.v-card {
  position: relative; overflow: hidden; background: var(--graphite); border: 1px solid var(--line); display: flex; flex-direction: column;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 26px), calc(100% - 26px) 100%, 0 100%);
  transition: transform .45s var(--ease), border-color .3s;
}
.v-card::after { content: ""; position: absolute; right: 0; bottom: 0; width: 26px; height: 26px; background: linear-gradient(315deg, var(--red) 50%, transparent 50%); opacity: 0; transition: opacity .3s; }
.v-card:hover { border-color: #3a3d44; }
.v-card:hover::after { opacity: 1; }
.v-img { position: relative; aspect-ratio: 4/3; overflow: hidden; }
.v-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease), filter .6s; filter: saturate(.92); }
.v-img::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.28) 50%, transparent 65%);
  transform: translateX(-110%); transition: transform 1s var(--ease);
}
.v-img::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, rgba(10,10,11,.75), transparent 55%); }
.v-card:hover .v-img img { transform: scale(1.06); filter: saturate(1.05); }
.v-card:hover .v-img::after { transform: translateX(110%); }
.v-body { padding: 22px 24px 28px; position: relative; }
.v-tag { position: absolute; top: -15px; left: 28px; z-index: 2; padding: 8px 12px; color: #fff; font: 800 11px/1 var(--font-display); letter-spacing: .2em; text-transform: uppercase; isolation: isolate; }
.v-tag::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--red); transform: skewX(-16deg); }
.v-body h3 { font-size: 22px; font-weight: 800; margin: 6px 0 8px; text-transform: uppercase; }
.v-body p { margin: 0; color: var(--gray); font-size: 16px; }

.v-card--cta {
  justify-content: center; padding: 36px 30px; min-height: 100%;
  background: linear-gradient(150deg, var(--red-deep), #3a0507 70%, var(--black));
  border-color: rgba(225,18,27,.5);
}
.v-card--cta::before { content: ""; position: absolute; right: -40px; top: 0; bottom: 0; width: 160px; background: repeating-linear-gradient(-58deg, transparent 0 14px, rgba(0,0,0,.18) 14px 16px); }
.v-card--cta h3 { font-size: 26px; font-weight: 900; margin: 18px 0 10px; text-transform: uppercase; font-style: italic; position: relative; }
.v-card--cta p { color: #f0c9cb; font-size: 16px; margin-bottom: 24px; position: relative; }
.v-card--cta .btn { align-self: flex-start; --bg: #fff; color: var(--black); margin-left: 6px; }
.v-card--cta .btn::before { box-shadow: none; }
.cta-mark { width: 46px; height: 49px; color: #fff; position: relative; }

/* ============ ANTES E DEPOIS ============ */
.ba { background: var(--ink); }
.ba > .container { max-width: 1400px; }
.ba::before { content: ""; position: absolute; left: 0; top: 0; width: 42%; height: 100%; background: repeating-linear-gradient(-58deg, transparent 0 22px, rgba(255,255,255,.02) 22px 24px); pointer-events: none; }
.ba-speed { left: 0; bottom: 5%; width: 18vw; height: 70px; grid-template-rows: 1fr .6fr; }
.ba-speed i { background: linear-gradient(90deg, var(--red), rgba(225,18,27,0)); transform-origin: left; }
.ba-speed i:nth-child(2) { width: 70%; opacity: .5; }
.ba-grid { display: grid; grid-template-columns: .56fr 1.44fr; gap: clamp(32px, 5vw, 70px); align-items: center; position: relative; }
.ba-text > p:not(.kicker) { color: #a9adb4; font-size: 18px; margin-top: 20px; }
.ba-tabs { display: grid; gap: 10px; margin-top: 32px; }
.ba-tabs button {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left;
  padding: 18px 22px; background: var(--graphite); border: 1px solid var(--line); border-left: 4px solid var(--line);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
  transition: border-color .3s, background-color .3s;
}
.ba-tabs b { font: 800 19px/1.2 var(--font-display); color: var(--white); text-transform: uppercase; }
.ba-tabs small { font-size: 14px; color: var(--gray); }
.ba-tabs button:hover { border-color: #3a3d44; }
.ba-tabs button.is-on { border-left-color: var(--red); background: var(--steel); }

.ba-stage { position: relative; }
.ba-stage::before { /* moldura deslocada */
  content: ""; position: absolute; inset: 18px -18px -18px 18px; border: 1px solid var(--line); pointer-events: none;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
.compare {
  position: relative; width: 100%; max-height: 86vh; overflow: hidden;
  user-select: none; touch-action: pan-y; background: #000; cursor: ew-resize;
  box-shadow: 0 40px 80px -30px rgba(0,0,0,.9), 0 0 0 1px var(--line);
  margin-inline: auto; transition: aspect-ratio .5s var(--ease);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 30px), calc(100% - 30px) 100%, 0 100%);
}
.compare img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.compare-before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.compare-handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px; margin-left: -1.5px; background: #fff; box-shadow: 0 0 18px rgba(255,255,255,.8), 0 0 40px rgba(225,18,27,.6); pointer-events: none; }
.compare-handle span {
  position: absolute; top: 50%; left: 50%; width: 58px; height: 58px; transform: translate(-50%, -50%);
  display: grid; place-items: center; background: var(--red); border: 3px solid #fff; border-radius: 50%;
  box-shadow: 0 8px 26px rgba(0,0,0,.6), 0 0 0 6px rgba(225,18,27,.25);
}
.compare-handle svg { width: 24px; height: 24px; fill: none; stroke: #fff; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.compare-label { position: absolute; top: 20px; padding: 9px 16px; font: 800 12px/1 var(--font-display); letter-spacing: .22em; text-transform: uppercase; color: #fff; pointer-events: none; isolation: isolate; }
.compare-label::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(10,10,11,.8); transform: skewX(-16deg); }
.compare-label--before { left: 22px; }
.compare-label--after { right: 22px; }
.compare-label--after::before { background: var(--red); }
.compare-range { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; }
.compare:focus-within { box-shadow: 0 0 0 2px var(--red-hot), 0 40px 80px -30px rgba(0,0,0,.9); }
.compare.is-swap img { animation: fadeImg .6s var(--ease); }
@keyframes fadeImg { from { opacity: 0; } to { opacity: 1; } }
.ba-caption { margin: 18px 0 0; font-size: 14px; color: var(--gray); letter-spacing: .04em; }
.ba-caption::before { content: ""; display: inline-block; width: 14px; height: 6px; background: var(--red); margin-right: 10px; transform: skewX(-30deg); }

/* ============ VÍDEOS ============ */
.videos { background: linear-gradient(180deg, var(--black), #0c0c0e); padding-bottom: clamp(70px, 9vw, 110px); }
.videos .deco-grid { mask-image: radial-gradient(ellipse at 50% 40%, #000 0%, transparent 65%); -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 0%, transparent 65%); }
.vreel { --cw: 270px; position: relative; }
.vreel-viewport { overflow: hidden; padding: 56px 0 64px; touch-action: pan-y; cursor: grab; }
.vreel-viewport:active { cursor: grabbing; }
.vreel-track { display: flex; gap: 34px; width: max-content; transform: translateX(var(--x, 0)); transition: transform .8s var(--ease); }
.vcard {
  position: relative; flex: none; width: var(--cw); aspect-ratio: 9/16; overflow: hidden; background: #000;
  border-radius: 14px; isolation: isolate;
  transform: scale(.86); opacity: .38; filter: grayscale(.7) brightness(.8);
  transition: transform .8s var(--ease), opacity .6s, filter .6s, box-shadow .6s;
}
.vcard.is-active {
  transform: scale(1.14); opacity: 1; filter: none; z-index: 2;
  box-shadow: 0 40px 80px -20px rgba(0,0,0,.9);
}
/* moldura do vídeo em foco: azul-petróleo fosco (textura do ticker). Ao trocar de vídeo ela se
   desenha em volta do card com um brilho ciano na ponta. Só anima 2 custom properties num pseudo-elemento. */
@property --sweep { syntax: '<angle>'; inherits: false; initial-value: 360deg; }
@property --head { syntax: '<color>'; inherits: false; initial-value: #1d93a3; }
.vcard::before {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit; padding: 4px;
  --sweep: 360deg; --head: var(--petrol);
  background: var(--grain), conic-gradient(from 200deg, var(--petrol-dark), var(--petrol) calc(var(--sweep) - 50deg), var(--head) var(--sweep), var(--petrol-dark) 0);
  -webkit-mask: conic-gradient(from 200deg, #000 var(--sweep), #0000 0), linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: source-in, xor;
  mask: conic-gradient(from 200deg, #000 var(--sweep), #0000 0), linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: intersect, exclude;
  opacity: 0; transition: opacity .45s;
}
.vcard.is-active::before { opacity: 1; animation: frameDraw 1s cubic-bezier(.65, 0, .25, 1) .15s backwards; }
@keyframes frameDraw {
  0%   { --sweep: 0deg;   --head: #9be8f0; }
  80%  { --head: #9be8f0; }
  100% { --sweep: 360deg; --head: var(--petrol); }
}
.vcard-media, .vcard-media img, .vcard-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vcard-media video { opacity: 0; transition: opacity .4s; }
.vcard.is-playing .vcard-media video { opacity: 1; }
.vcard::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(0deg, rgba(0,0,0,.85) 0%, transparent 38%, transparent 75%, rgba(0,0,0,.45) 100%); }
.vcard-tag {
  position: absolute; z-index: 2; left: 14px; top: 14px; padding: 7px 12px;
  font: 700 11px/1 var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: #fff;
  background: rgba(30,31,35,.78); border-radius: 999px;
}
.vcard.is-active .vcard-tag { background: var(--red); }
.vcard-play {
  position: absolute; z-index: 2; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px;
  display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(255,255,255,.4);
  background: rgba(30,31,35,.6); color: #fff;
  transition: transform .4s var(--ease), background-color .3s, opacity .3s;
}
.vcard-play svg { width: 26px; height: 26px; fill: currentColor; margin-left: 3px; }
.vcard.is-active .vcard-play { background: rgba(225,18,27,.9); border-color: transparent; box-shadow: 0 0 0 8px rgba(225,18,27,.22); }
.vcard-play:hover { transform: scale(1.1); }
.vcard.is-playing .vcard-play { opacity: 0; }
.vcard.is-playing:hover .vcard-play { opacity: 1; }
.vcard-info { position: absolute; z-index: 2; left: 16px; right: 16px; bottom: 44px; display: grid; gap: 2px; }
.vcard-info b { font: 800 18px/1.15 var(--font-display); color: #fff; text-transform: uppercase; }
.vcard-info small { font-size: 13px; color: #c9ccd1; }
.vcard-bar { position: absolute; z-index: 2; left: 16px; right: 12px; bottom: 14px; display: flex; align-items: center; gap: 8px; }
.vcard-track { flex: 1; height: 3px; background: rgba(255,255,255,.25); border-radius: 2px; overflow: hidden; }
.vcard-progress { display: block; height: 100%; width: 0; background: var(--red-hot); }
.vcard-mute, .vcard-full { width: 26px; height: 26px; display: grid; place-items: center; background: none; border: 0; color: #fff; opacity: .85; padding: 0; }
.vcard-mute svg, .vcard-full svg { width: 18px; height: 18px; fill: currentColor; }
.vcard:not(.is-active) .vcard-bar { opacity: 0; }
.vreel-nav { display: flex; align-items: center; justify-content: center; gap: 22px; }
.vreel-btn { width: 54px; height: 54px; display: grid; place-items: center; background: none; border: 0; position: relative; color: var(--white); isolation: isolate; }
.vreel-btn::before { content: ""; position: absolute; inset: 0; z-index: -1; border: 1px solid var(--line); background: var(--graphite); transform: skewX(-14deg); transition: background-color .3s, border-color .3s; }
.vreel-btn:hover::before { background: var(--red); border-color: var(--red); }
.vreel-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.vreel-count { font: 600 14px/1 var(--font-display); letter-spacing: .2em; color: var(--gray); min-width: 80px; text-align: center; }
.vreel-count b { color: var(--white); font-weight: 800; }

/* ============ CTA BAND ============ */
.cta-band { position: relative; background: var(--red); overflow: hidden; clip-path: polygon(0 0, 100% 18px, 100% 100%, 0 calc(100% - 18px)); }
.cta-band::before {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(-58deg, transparent 0 26px, rgba(0,0,0,.1) 26px 28px);
  clip-path: polygon(62% 0, 100% 0, 100% 100%, 50% 100%);
}
.cta-band::after { content: ""; position: absolute; left: -2%; top: 0; bottom: 0; width: 26%; background: rgba(0,0,0,.14); transform: skewX(-30deg); }
.cta-inner { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 32px; padding-top: 64px; padding-bottom: 64px; flex-wrap: wrap; }
.cta-band h2 { font-size: clamp(28px, 3.4vw, 44px); font-weight: 900; text-transform: uppercase; max-width: 22ch; }
.cta-band h2 em { background: none; color: #160203; -webkit-text-fill-color: #160203; }

/* ============ GALERIA ============ */
.g-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(5, 200px); gap: 12px; }
.g-item { position: relative; overflow: hidden; background: var(--graphite); }
/* mosaico fechado 4×5: 8 verticais + 4 quadradas */
.g-item:nth-child(1)  { grid-area: 1 / 1 / 3 / 2; }
.g-item:nth-child(2)  { grid-area: 1 / 2 / 2 / 3; }
.g-item:nth-child(3)  { grid-area: 3 / 3 / 4 / 4; }
.g-item:nth-child(4)  { grid-area: 1 / 3 / 3 / 4; }
.g-item:nth-child(5)  { grid-area: 2 / 2 / 4 / 3; }
.g-item:nth-child(6)  { grid-area: 5 / 4 / 6 / 5; }
.g-item:nth-child(7)  { grid-area: 3 / 1 / 5 / 2; }
.g-item:nth-child(8)  { grid-area: 1 / 4 / 3 / 5; }
.g-item:nth-child(9)  { grid-area: 5 / 1 / 6 / 2; }
.g-item:nth-child(10) { grid-area: 4 / 2 / 6 / 3; }
.g-item:nth-child(11) { grid-area: 4 / 3 / 6 / 4; }
.g-item:nth-child(12) { grid-area: 3 / 4 / 5 / 5; }
.g-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease), filter .5s; }
.g-item::after {
  content: "+"; position: absolute; right: 14px; bottom: 14px; width: 38px; height: 38px; display: grid; place-items: center;
  font: 400 26px/1 var(--font-display); color: #fff; background: var(--red);
  clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
  opacity: 0; transform: translateY(8px); transition: opacity .35s, transform .35s var(--ease);
}
.g-item::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, rgba(10,10,11,.5), transparent 50%); opacity: 0; transition: opacity .4s; pointer-events: none; box-shadow: inset 0 0 0 2px var(--red); }
.g-item:hover img { transform: scale(1.06); }
.g-item:hover::after { opacity: 1; transform: none; z-index: 2; }
.g-item:hover::before { opacity: 1; }

.link-arrow { display: inline-flex; align-items: center; gap: 10px; font: 700 14px/1 var(--font-display); letter-spacing: .1em; text-transform: uppercase; color: var(--white); padding-bottom: 8px; border-bottom: 2px solid var(--red); transition: gap .3s, color .3s; }
.link-arrow:hover { color: var(--red-hot); gap: 14px; }

/* Lightbox */
.lightbox { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: rgba(5,5,6,.94); backdrop-filter: blur(8px); padding: 60px 70px; }
.lightbox[hidden] { display: none; }
.lightbox img { max-width: 100%; max-height: 86vh; box-shadow: 0 30px 80px rgba(0,0,0,.8); animation: fadeImg .4s var(--ease); }
.lb-close, .lb-nav { position: absolute; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.15); color: #fff; width: 48px; height: 48px; border-radius: 50%; font-size: 26px; line-height: 1; display: grid; place-items: center; transition: background .3s; }
.lb-close:hover, .lb-nav:hover { background: var(--red); border-color: var(--red); }
.lb-close { top: 18px; right: 18px; }
.lb-prev { left: 14px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 14px; top: 50%; transform: translateY(-50%); }

/* ============ LOCALIZAÇÃO ============ */
.location { background: linear-gradient(180deg, var(--ink), var(--black)); }
.loc-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 24px; align-items: stretch; }
.loc-card { padding: clamp(32px, 4vw, 52px); background: var(--graphite); border: 1px solid var(--line); position: relative; overflow: hidden; isolation: isolate; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 28px), calc(100% - 28px) 100%, 0 100%); }
.loc-card::after { content: ""; position: absolute; right: -40px; bottom: -40px; width: 160px; height: 160px; z-index: -1; background: repeating-linear-gradient(-58deg, transparent 0 12px, rgba(225,18,27,.14) 12px 14px); }
.loc-card .h2 { margin-bottom: 30px; }
.loc-card address { display: flex; gap: 16px; font-style: normal; font: 600 19px/1.55 var(--font-display); color: var(--white); margin-bottom: 18px; }
.loc-card address .ico { color: var(--red); margin-top: 2px; }
.loc-note { color: var(--gray); font-size: 16px; margin-bottom: 30px; }
.loc-actions { display: flex; flex-wrap: wrap; gap: 16px; padding-left: 6px; }
.loc-map { position: relative; min-height: 440px; overflow: hidden; border: 1px solid var(--line); background: var(--graphite); clip-path: polygon(28px 0, 100% 0, 100% 100%, 0 100%, 0 28px); }
.map-placeholder { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px; color: var(--gray); font: 600 13px/1 var(--font-display); letter-spacing: .16em; text-transform: uppercase;
  background: linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px) 0 0 / 40px 40px, linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px) 0 0 / 40px 40px, var(--graphite); }
.map-placeholder .ico { width: 34px; height: 34px; color: var(--red); }
.loc-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(1) invert(.92) contrast(.9) brightness(.95); }
/* pin amarelo próprio sobre o pin do Google (o iframe é cinza por filtro e não dá pra recolorir o marcador).
   A ponta fica exatamente no centro, onde o Google põe o endereço; some quando o visitante mexe no mapa. */
.map-pin { position: absolute; left: 50%; top: 50%; z-index: 2; width: 34px; height: 47px; transform: translate(-50%, calc(-100% + 5px)); pointer-events: none; opacity: 0; transition: opacity .4s, transform .4s var(--ease); }
.map-pin svg { display: block; width: 100%; height: 100%; filter: drop-shadow(0 6px 8px rgba(0,0,0,.55)); }
.map-pin path { fill: var(--yellow); stroke: #0a0a0b; stroke-width: 1.5; }
.map-pin circle { fill: #0a0a0b; }
.map-pin::after { /* pulso na base */
  content: ""; position: absolute; left: 50%; bottom: -6px; width: 26px; height: 12px; margin-left: -13px; border-radius: 50%;
  border: 2px solid var(--yellow); opacity: 0; animation: pinPulse 2.4s ease-out infinite; z-index: -1;
}
@keyframes pinPulse { 0% { transform: scale(.4); opacity: .9; } 100% { transform: scale(2.2); opacity: 0; } }
.loc-map.is-loaded .map-pin { opacity: 1; }
.loc-map.is-touched .map-pin { opacity: 0; transform: translate(-50%, -120%); }
.loc-map .corner-tl { top: 14px; left: 14px; }
.loc-map .corner-br { bottom: 14px; right: 14px; }

/* ============ CONTATO ============ */
.contact { position: relative; padding: clamp(110px, 14vw, 190px) 0; overflow: hidden; isolation: isolate; text-align: center; }
.contact-bg { position: absolute; inset: 0; z-index: -1; }
.contact-bg img { width: 100%; height: 120%; object-fit: cover; object-position: 50% 70%; transform: translate3d(0, 0, 0); will-change: transform; filter: grayscale(.4) brightness(.45); }
.contact-bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(10,10,11,.55), rgba(10,10,11,.95) 75%), linear-gradient(180deg, var(--black), transparent 25%, transparent 75%, var(--black)); }
.contact-speed { left: 0; top: 50%; width: 16vw; height: 80px; grid-template-rows: 1fr .5fr; transform: translateY(-50%); }
.contact-speed i { background: linear-gradient(90deg, var(--red), rgba(225,18,27,0)); transform-origin: left; }
.contact-speed--r { left: auto; right: 0; }
.contact-speed--r i { background: linear-gradient(270deg, var(--red), rgba(225,18,27,0)); margin-left: auto; }
.contact-speed i:nth-child(2) { width: 60%; opacity: .5; }
.contact-inner { max-width: 780px; }
.contact-title { font-size: clamp(36px, 5.6vw, 74px); font-weight: 900; text-transform: uppercase; letter-spacing: -.01em; margin-bottom: 22px; }
.contact-title em { background-position: 100% 0; }
.contact p { color: #b9bcc2; font-size: 18px; max-width: 560px; margin: 0 auto 38px; }
.contact-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 18px; }

/* ============ FOOTER ============ */
.site-footer { position: relative; background: #070708; border-top: 1px solid var(--line); padding-top: 84px; overflow: hidden; isolation: isolate; }
.footer-stripe { position: absolute; top: -1px; left: 0; height: 4px; width: 34%; background: var(--red); clip-path: polygon(0 0, 100% 0, calc(100% - 6px) 100%, 0 100%); }
.footer-ghost {
  position: absolute; z-index: -1; right: -2vw; bottom: 40px; pointer-events: none;
  font: italic 900 17vw/1 var(--font-display); letter-spacing: -.03em; color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.045);
}
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 48px; padding-bottom: 60px; }
.f-brand p { color: var(--gray); font-size: 15px; max-width: 320px; margin: 24px 0; }
.socials { display: flex; gap: 12px; }
.socials a { width: 44px; height: 44px; display: grid; place-items: center; color: var(--silver); position: relative; isolation: isolate; transition: color .3s; }
.socials a::before { content: ""; position: absolute; inset: 0; z-index: -1; border: 1px solid var(--line); transform: skewX(-12deg); transition: background-color .3s, border-color .3s; }
.socials a:hover { color: #fff; }
.socials a:hover::before { background: var(--red); border-color: var(--red); }
.f-col h4 { font: 800 13px/1 var(--font-display); letter-spacing: .24em; text-transform: uppercase; color: var(--white); margin-bottom: 22px; display: flex; align-items: center; gap: 10px; }
.f-col h4::before { content: ""; width: 12px; height: 4px; background: var(--red); transform: skewX(-30deg); }
.f-col li { margin-bottom: 12px; }
.f-col a, .f-col span { color: var(--gray); font-size: 15px; transition: color .25s, transform .25s; display: inline-flex; gap: 10px; align-items: flex-start; line-height: 1.5; }
.f-col a:hover { color: var(--white); transform: translateX(4px); }
.f-contact .ico { color: var(--red); margin-top: 2px; }
.footer-bottom { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding-top: 24px; padding-bottom: 28px; border-top: 1px solid #1a1b1e; font-size: 14px; color: #61656c; }
.footer-bottom p { margin: 0; }
.to-top:hover { color: var(--white); }

/* WhatsApp flutuante */
.wa-float {
  position: fixed; right: calc(20px + env(safe-area-inset-right)); bottom: calc(20px + env(safe-area-inset-bottom)); z-index: 90; width: 58px; height: 58px; border-radius: 50%;
  display: grid; place-items: center; background: #25d366; color: #fff; font-size: 28px;
  box-shadow: 0 12px 30px -6px rgba(37,211,102,.55);
  transform: translateY(120px); transition: transform .5s var(--ease);
}
.wa-float.is-in { transform: none; }
.wa-float::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #25d366; animation: ping 2.4s infinite; }
@keyframes ping { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(1.6); opacity: 0; } }

/* ============ REVEAL ============ */
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: var(--d, 0s); }
.js .reveal.is-in { opacity: 1; transform: none; }
.js .v-card { opacity: 0; transform: translateY(30px); transition: opacity .8s var(--ease), transform .8s var(--ease), border-color .3s; transition-delay: var(--d, 0s); }
.js .v-card.is-in { opacity: 1; transform: none; }
.js .v-card.is-in:hover { transform: translateY(-6px); }
.js .g-item { opacity: 0; transform: translateY(40px) scale(.97); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: var(--d, 0s); }
.js .g-item.is-in { opacity: 1; transform: none; }
.js .speed i { transform: skewX(-32deg) scaleX(0); transition: transform 1.1s var(--ease); }
.js .is-in .speed i, .js .speed.is-in i, .js .hero-speed i { transform: skewX(-32deg) scaleX(1); }

/* ============ RESPONSIVO ============ */
@media (max-width: 1080px) {
  .main-nav ul a { padding: 10px 8px; font-size: 12px; }
  .main-nav { gap: 14px; }
}

@media (max-width: 960px) {
  :root { --header-h: 66px; }
  .nav-toggle { display: block; z-index: 2; }
  .main-nav {
    position: fixed; inset: 0; z-index: 1; flex-direction: column; justify-content: center; align-items: stretch; gap: 32px;
    padding: 90px 28px 40px; background: var(--black);
    clip-path: circle(0 at calc(100% - 42px) 33px); transition: clip-path .6s var(--ease); visibility: hidden;
  }
  .main-nav::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(-58deg, transparent 0 30px, rgba(225,18,27,.05) 30px 32px); pointer-events: none; }
  .nav-open .main-nav { clip-path: circle(150% at calc(100% - 42px) 33px); visibility: visible; }
  .main-nav ul { flex-direction: column; gap: 0; position: relative; }
  .main-nav ul a { font-size: 28px; font-weight: 800; padding: 14px 0; border-bottom: 1px solid var(--line); }
  .main-nav ul a::after { display: none; }
  .main-nav ul a.is-active { color: var(--red-hot); }
  .nav-cta { align-self: flex-start; position: relative; margin-left: 6px; }
  .nav-open { overflow: hidden; }
  .nav-open .site-header { background: transparent; backdrop-filter: none; }

  .hero { --panel: 62vw; }
  .hero-speed { display: none; }
  .about-grid, .ba-grid, .loc-grid { grid-template-columns: 1fr; }
  .about-media { max-width: 560px; }
  .svc-grid, .v-grid { grid-template-columns: repeat(2, 1fr); }
  .g-grid { grid-template-columns: repeat(3, 1fr); grid-template-rows: none; grid-auto-rows: auto; }
  .g-grid .g-item { grid-area: auto; aspect-ratio: 4/5; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .f-brand { grid-column: 1 / -1; }
  .ba-tabs { grid-template-columns: 1fr 1fr; }
  .ba-stage::before { display: none; }
  .services::after { display: none; }
  .scroll-progress { display: none; }
  .brands { grid-template-columns: 1fr; gap: 24px; }
  .brands-label { max-width: none; }
}

@media (max-width: 640px) {
  .hero { align-items: flex-end; padding-top: 54vh; padding-bottom: 72px; }
  .hero > .corner, .ba-speed { display: none; }
  .hero-media { width: 100%; bottom: auto; height: 74%; clip-path: polygon(0 0, 100% 0, 100% 86%, 0 100%); }
  .hero-media img { height: 112%; object-position: 50% 60%; }
  .hero-edge { clip-path: polygon(0 calc(100% - 5px), 100% calc(86% - 5px), 100% 86%, 0 100%); }
  @keyframes edgeIn { from { clip-path: polygon(0 calc(100% - 5px), 0 calc(100% - 5px), 0 100%, 0 100%); } }
  .hero-glow { left: 0; right: 0; top: 46%; }
  .hero-shade { background: linear-gradient(0deg, var(--black) 36%, rgba(10,10,11,.85) 48%, rgba(10,10,11,0) 66%, rgba(10,10,11,.1) 88%, rgba(10,10,11,.7) 100%); }
  .hero-ghost { font-size: 30vw; bottom: 30%; left: -3vw; }
  .hero-title { font-size: clamp(36px, 10.5vw, 46px); margin-bottom: 20px; }
  .hero-lead { margin-bottom: 28px; }
  .hero-actions { margin-bottom: 30px; }
  .hero-tags { display: none; }
  .hero-grid-tex { clip-path: polygon(0 0, 30% 0, 0 40%); }
  .hero-actions .btn { flex: 1 1 100%; }
  .scroll-cue { display: none; }
  .corner-tl { top: 14px; left: 14px; } .corner-br { bottom: 14px; right: 14px; }
  .sq { margin-right: 36px; }
  .eyebrow { font-size: 11px; letter-spacing: .18em; }
  [data-ghost]::before { font-size: 22vw; top: -.3em; }

  .pillars { grid-template-columns: 1fr; }
  .about-badge { left: 10px; bottom: 18px; }
  .about-corner { top: -8px; left: -8px; width: 50px; height: 50px; }
  .about-media .frame { inset: 14px -10px -14px 10px; }
  .svc-grid, .v-grid { grid-template-columns: 1fr; }
  .switch { width: calc(100% - 12px); margin-left: 6px; }
  .switch button { flex: 1; justify-content: center; padding: 12px 10px; }
  .g-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .ba-tabs { grid-template-columns: 1fr 1fr; }
  .ba-tabs button { padding: 14px 16px; }
  .compare-handle span { width: 46px; height: 46px; }
  .vreel { --cw: 210px; }
  .vreel-track { gap: 18px; }
  .vreel-viewport { padding: 40px 0 46px; }
  .loc-map { min-height: 320px; }
  .footer-grid { grid-template-columns: 1fr; gap: 36px; text-align: center; }
  .brand--stack { align-items: center; }
  .f-brand p { margin-inline: auto; }
  .socials { justify-content: center; }
  .f-col h4 { justify-content: center; }
  .f-col a, .f-col span { justify-content: center; }
  .f-col a:hover { transform: none; }
  .footer-bottom { flex-direction: column; align-items: center; text-align: center; gap: 10px; }
  .footer-ghost { font-size: 28vw; bottom: 90px; }
  .cta-inner .btn { width: calc(100% - 12px); margin-left: 6px; }
  .contact-speed { display: none; }
  .lightbox { padding: 60px 12px; }
  .lb-nav { top: auto; bottom: 18px; transform: none; }
  .lb-prev { left: calc(50% - 60px); } .lb-next { right: calc(50% - 60px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
  .js .reveal, .js .v-card { opacity: 1; transform: none; }
  .js .g-item { opacity: 1; transform: none; }
}

/* hosts dos títulos fantasmas fora de .section-head */
.about-text, .ba-text { position: relative; isolation: isolate; }
.switch button span { display: inline-block; }

/* ============ DESEMPENHO ============ */
/* animações infinitas ficam pausadas quando a seção está fora da tela */
.anim-off, .anim-off * { animation-play-state: paused !important; }

/* crédito do desenvolvedor, discreto */
.footer-credit { padding-bottom: calc(22px + env(safe-area-inset-bottom)); text-align: center; }
.footer-credit a { font-size: 12px; letter-spacing: .06em; color: #45484e; transition: color .25s; }
.footer-credit a:hover { color: var(--gray); }
@media (max-width: 640px) { .footer-credit { padding-bottom: calc(92px + env(safe-area-inset-bottom)); } }