/* ==========================================================================
   Borgeslog · main.css
   Estrutura, componentes e movimento: design system ZENITH_SYS (zenith.css).
   Identidade: tokens.css. Nada de cor, fonte, easing ou duração escrito aqui.
   ========================================================================== */

/* --- fontes (self-hosted, SIL OFL) --------------------------------------- */
@font-face{font-family:'Teko';font-style:normal;font-weight:600;font-display:swap;src:url(../assets/fonts/teko-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Teko';font-style:normal;font-weight:600;font-display:swap;src:url(../assets/fonts/teko-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Titillium Web';font-style:normal;font-weight:400;font-display:swap;src:url(../assets/fonts/titillium-web-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Titillium Web';font-style:normal;font-weight:400;font-display:swap;src:url(../assets/fonts/titillium-web-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Titillium Web';font-style:normal;font-weight:600;font-display:swap;src:url(../assets/fonts/titillium-web-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Titillium Web';font-style:normal;font-weight:600;font-display:swap;src:url(../assets/fonts/titillium-web-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* --- base ----------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ background:var(--fundo); -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + var(--rolagem-folga)); }
body{ margin:0; min-height:100vh; display:flex; flex-direction:column; font-family:var(--fonte-texto); font-weight:var(--peso-texto); color:var(--texto-corpo); background:var(--fundo); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:hidden; }
img,svg,canvas{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,p,ul,ol,dl,dd{ margin:0; padding:0; }
ul,ol{ list-style:none; }
b{ font-weight:var(--peso-rotulo); }
[hidden]{ display:none !important; }
::selection{ background:var(--acao); color:var(--acao-texto); }
.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; }
/* foco (estado Focus do DS: anel 1px + afastamento 2px + halo 3px) */
:focus{ outline:none; }
:focus-visible{ outline:1px solid var(--foco); outline-offset:2px; box-shadow:0 0 0 6px rgb(var(--rgb-vermelho) / .12); }

/* link de pulo: primeiro elemento focável, aparece só com o foco e leva ao conteúdo (D7 da Dobra 06) */
.pular{ position:fixed; left:var(--toast-margem-sm); top:var(--toast-margem-sm); z-index:100; display:inline-flex; align-items:center; min-height:var(--alvo); padding:0 16px; border:1px solid var(--foco); background:var(--fundo); color:var(--texto-titulo);
  font-size:var(--fs-rotulo); font-weight:var(--peso-rotulo); letter-spacing:var(--tr-widest); text-transform:uppercase; transform:translateY(calc(-100% - 2 * var(--toast-margem-sm))); transition:transform var(--dur-std) var(--ease-std); }
.pular:focus{ transform:none; }
#conteudo:focus, #conteudo:focus-visible{ outline:none; box-shadow:none; }

/* ícones Lucide inline: traço 2, grade 24, pontas arredondadas, currentColor */
.ico{ width:24px; height:24px; flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.ico--14{ width:14px; height:14px; } .ico--16{ width:16px; height:16px; } .ico--18{ width:18px; height:18px; } .ico--20{ width:20px; height:20px; }
.ico--marca{ color:var(--acao); }
/* seta da marca (02_Elementos/borgeslog_seta): Teko e Titillium não têm o caractere → */
.seta{ display:inline-block; width:.62em; height:.62em; vertical-align:.02em; margin:0 .06em; }
.seta svg{ width:100%; height:100%; fill:currentColor; }
/* ping (animate-ping do DS) */
.ping{ position:relative; display:inline-flex; width:6px; height:6px; flex:none; }
.ping--8{ width:8px; height:8px; }
.ping i{ position:absolute; inset:0; border-radius:50%; background:var(--online); }
.ping i:first-child{ opacity:.75; animation:ping var(--dur-ping) var(--ease-ping) infinite; }

/* --- camadas fixas -------------------------------------------------------- */
#prism-container{ position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.34; mix-blend-mode:screen; }
#prism-container canvas{ position:absolute; inset:0; width:100%; height:100%; }
.bg-grid-fixed{ position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.03; background-size:40px 40px; background-image:linear-gradient(to right,var(--linha) 1px,transparent 1px),linear-gradient(to bottom,var(--linha) 1px,transparent 1px); }
#vignette{ position:fixed; inset:0; z-index:5; pointer-events:none; background:radial-gradient(125% 95% at 50% 42%, transparent 40%, rgb(var(--rgb-sombra) / .55) 100%); }
#grain{ position:fixed; inset:-1px; z-index:70; pointer-events:none; opacity:.055; mix-blend-mode:overlay; background-repeat:repeat; background-size:180px 180px; }
.fx-grain #grain{ background-image:url(../assets/fx/grain.png); }
.cur-dot{ position:fixed; z-index:90; top:0; left:0; width:26px; height:26px; margin:-13px 0 0 -13px; border:1px solid rgb(var(--rgb-branco) / .42); border-radius:50%; pointer-events:none; opacity:0; mix-blend-mode:difference;
  transition:width var(--dur-cursor) var(--ease-out), height var(--dur-cursor) var(--ease-out), margin var(--dur-cursor) var(--ease-out), background-color var(--dur-cursor) var(--ease-css), border-color var(--dur-cursor) var(--ease-css), opacity var(--dur-cursor-fade) var(--ease-css); }
.cur-dot.act{ width:52px; height:52px; margin:-26px 0 0 -26px; background:rgb(var(--rgb-branco) / .07); border-color:rgb(var(--rgb-branco) / .6); }
@media (hover:hover) and (pointer:fine){ .cur-dot.is-on{ opacity:1; } }

/* --- header ----------------------------------------------------------------- */
.site-header{ position:sticky; top:0; z-index:50; height:var(--header-h); display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--linha); background:rgb(var(--rgb-asfalto) / .9); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); transition:box-shadow var(--dur-header-sombra) var(--ease-std); }
.site-header.is-stuck{ box-shadow:0 10px 40px -20px rgb(var(--rgb-sombra) / .9); }
/* área de proteção do logo: X = altura do "B" (16px com o logo a 200px) em todos os lados */
.hdr-brand{ display:flex; align-items:center; height:100%; padding:0 16px 0 20px; border-right:1px solid var(--linha); background:var(--fundo); }
.hdr-logo{ display:block; flex:none; }
.hdr-logo img{ width:var(--logo-w); height:auto; }
.hdr-status{ display:none; align-items:center; gap:8px; margin-left:24px; padding:5px 12px; border:1px solid var(--linha); background:rgb(var(--rgb-grafite) / .3); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); border-radius:var(--raio-sm); }
.hdr-status__br{ font-size:var(--fs-rotulo); line-height:1; color:var(--texto-meta); }
.hdr-status__tx{ font-size:var(--fs-rotulo); font-weight:var(--peso-rotulo); line-height:1; letter-spacing:var(--tr-widest); text-transform:uppercase; color:var(--texto-meta); white-space:nowrap; }
.hdr-actions{ display:none; align-items:center; height:100%; border-left:1px solid var(--linha); background:var(--fundo); }
.hdr-cta{ position:relative; overflow:hidden; height:100%; display:flex; align-items:center; gap:8px; padding:0 24px; background:var(--acao); color:var(--acao-texto); font-size:var(--fs-rotulo); font-weight:var(--peso-rotulo); letter-spacing:var(--tr-widest); text-transform:uppercase; white-space:nowrap; box-shadow:inset 0 0 20px rgb(var(--rgb-sombra) / .2); transition:background-color var(--dur-std) var(--ease-std), box-shadow var(--dur-std) var(--ease-std); }
.hdr-cta:hover{ background:var(--acao-hover); box-shadow:inset 0 0 20px rgb(var(--rgb-sombra) / .2), 0 0 24px rgb(var(--rgb-vermelho-500) / .35); }
.hdr-cta:active{ background:var(--acao-active); }
.hdr-cta > span:not(.shimmer-hover), .hdr-cta svg{ position:relative; z-index:1; }
.hdr-cta__ico{ transition:transform var(--dur-std) var(--ease-std); }
.hdr-cta:hover .hdr-cta__ico{ transform:translateX(4px); }
.hdr-cta:focus-visible{ outline-offset:-4px; }
/* mobile: WhatsApp compacto (slot escuro do DS, ícone em Vermelho) ao lado do hambúrguer; abaixo de 640px fica só o ícone */
.hdr-wa{ display:flex; flex:1; justify-content:center; align-items:center; gap:8px; min-width:var(--alvo); height:100%; padding:0 12px; border-left:1px solid var(--linha); background:var(--fundo); color:var(--texto-titulo); font-size:var(--fs-rotulo); font-weight:var(--peso-rotulo); letter-spacing:var(--tr-widest); text-transform:uppercase; transition:background-color var(--dur-std) var(--ease-std); }
.hdr-wa .ico{ color:var(--acao); }
.hdr-wa__tx{ display:none; }
.hdr-wa:hover{ background:var(--painel); }
.hdr-wa:focus-visible{ outline-offset:-4px; }
/* navegação de seções (DS: .hdr-link com sublinhado scaleX) */
.hdr-nav{ display:none; flex:1; align-self:stretch; justify-content:center; min-width:0; }
.hdr-nav::before, .hdr-nav::after{ content:''; width:1px; background:var(--linha-suave); }
.hdr-link{ position:relative; display:flex; align-items:center; padding:0 20px; color:var(--texto-corpo); font-size:var(--fs-rotulo); font-weight:var(--peso-rotulo); letter-spacing:var(--tr-widest); text-transform:uppercase; white-space:nowrap; transition:color var(--dur-hover-cor) var(--ease-std), background-color var(--dur-hover-cor) var(--ease-std); }
.hdr-link + .hdr-link{ border-left:1px solid var(--linha-suave); }
.hdr-link:hover{ color:var(--texto-titulo); background:rgb(var(--rgb-grafite) / .5); }
.hdr-link.on{ color:var(--texto-titulo); }
.hdr-link:focus-visible{ outline-offset:-4px; }
.hdr-link .ul{ position:absolute; left:0; bottom:0; width:100%; height:2px; background:var(--acao); transform:scaleX(0); transform-origin:left center; transition:transform var(--dur-sublinhado) var(--ease-out); }
.hdr-link:hover .ul, .hdr-link.on .ul{ transform:scaleX(1); }
/* hambúrguer (DS .nav-burger), com os traços animados só por transform */
.hdr-menu{ display:flex; align-items:center; justify-content:center; flex:none; width:var(--menu-btn-w); height:100%; padding:0; border:0; border-left:1px solid var(--linha); background:var(--fundo); color:var(--texto-corpo); cursor:pointer; }
.hdr-menu:focus-visible{ outline-offset:-4px; }
.nav-burger{ position:relative; display:block; width:var(--burger-w); height:var(--burger-h); }
.nav-burger i{ position:absolute; left:0; right:0; height:var(--burger-traco); background:var(--cor-branco); transition:transform var(--dur-burger) var(--ease-out); }
.nav-burger i:nth-child(1){ top:var(--burger-y1); }
.nav-burger i:nth-child(2){ top:var(--burger-y2); transform:translateX(var(--burger-x-curto)) scaleX(var(--burger-curto)); }
@media (hover:hover) and (pointer:fine){
  .hdr-menu:hover .nav-burger i:nth-child(1){ transform:translateX(var(--burger-x-curto)) scaleX(var(--burger-curto)); }
  .hdr-menu:hover .nav-burger i:nth-child(2){ transform:none; }
}
.hdr-menu[aria-expanded="true"] .nav-burger i:nth-child(1){ transform:translate(var(--burger-x-x), var(--burger-dy)) rotate(45deg) scaleX(var(--burger-x)); }
.hdr-menu[aria-expanded="true"] .nav-burger i:nth-child(2){ transform:translate(var(--burger-x-x), calc(-1 * var(--burger-dy))) rotate(-45deg) scaleX(var(--burger-x)); }
/* menu do celular: estado fechado pronto na primeira pintura (o resto do estilo está em dobras.css) */
.menu-cel{ position:fixed; left:0; right:0; top:var(--header-h); bottom:0; z-index:40; overflow-y:auto; overscroll-behavior:contain; border-top:1px solid var(--linha); background:var(--menu-fundo); transform:translateX(100%); visibility:hidden;
  transition:transform var(--dur-menu) var(--ease-std), visibility 0s linear var(--dur-menu); }
.menu-cel.is-open{ transform:none; visibility:visible; transition:transform var(--dur-menu) var(--ease-std), visibility 0s; }
/* rail de progresso (kage .rail): traços animados por transform no lugar de width */
.rail{ display:none; position:fixed; right:var(--rail-x); top:50%; z-index:45; flex-direction:column; align-items:flex-end; transform:translateY(-50%); }
.rail button{ display:flex; align-items:center; justify-content:flex-end; width:var(--rail-alvo); height:var(--rail-passo); padding:0; border:0; background:none; cursor:pointer; }
.rail i{ display:block; width:var(--rail-w); height:1px; background:rgb(var(--rgb-branco) / .26); transform:scaleX(var(--rail-recuo)); transform-origin:right center; transition:transform var(--dur-rail) var(--ease-out), background-color var(--dur-rail) var(--ease-out); }
.rail button.on i{ transform:none; background:var(--cor-branco); }
.rail button:hover i{ transform:none; background:var(--texto-corpo); }
/* abaixo da Hero: sidebar numérica como coluna ao lado das seções (o estilo dela está em dobras.css) */
.lateral{ display:none; }
.secoes{ min-width:0; }
/* brilho que atravessa o botão no hover (shimmer do DS) */
.shimmer-hover{ position:absolute; inset:0; z-index:0; pointer-events:none; background:linear-gradient(to right, transparent, rgb(var(--rgb-branco) / .3), transparent); transform:translateX(-100%); }
.shimmer-hover--strong{ background:linear-gradient(to right, transparent, rgb(var(--rgb-branco) / .4), transparent); }
.hdr-cta:hover .shimmer-hover, .cta-primary:hover .shimmer-hover{ animation:shimmer var(--dur-shimmer-hover) var(--ease-css) infinite; }

/* --- hero: moldura -------------------------------------------------------- */
main{ position:relative; z-index:10; flex:1; display:flex; flex-direction:column; }
.hero{ position:relative; overflow:hidden; width:100%; background:var(--fundo); border-bottom:1px solid var(--linha); perspective:2000px; }
.hero-bg{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.hero-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.45; mix-blend-mode:screen; pointer-events:none; transform:scale(1.05); }
.hero-scrim{ position:absolute; inset:0; z-index:10; }
.hero-scrim--x{ background:linear-gradient(to right, var(--fundo), rgb(var(--rgb-asfalto) / .55), rgb(var(--rgb-asfalto) / .7)); }
.hero-scrim--y{ background:linear-gradient(to bottom, rgb(var(--rgb-asfalto) / .4), rgb(var(--rgb-asfalto) / .1), var(--fundo)); }
.bg-grid-mask{ position:absolute; inset:-60px; z-index:10; opacity:.7; background-size:60px 60px; background-image:linear-gradient(to right, rgb(var(--rgb-branco) / .045) 1px, transparent 1px), linear-gradient(to bottom, rgb(var(--rgb-branco) / .045) 1px, transparent 1px);
  -webkit-mask-image:radial-gradient(ellipse 60% 60% at 50% 50%, var(--mascara) 10%, transparent 75%); mask-image:radial-gradient(ellipse 60% 60% at 50% 50%, var(--mascara) 10%, transparent 75%); animation:grid-drift var(--dur-grid) var(--ease-linear) infinite; }
.aura{ position:absolute; z-index:10; width:min(70vw,900px); aspect-ratio:1; border-radius:50%; background:radial-gradient(closest-side, rgb(var(--rgb-vermelho) / .16), rgb(var(--rgb-vermelho) / .05) 50%, transparent 75%); filter:blur(30px); animation:aura-drift var(--dur-aura) var(--ease-io) infinite alternate; }
.aura.is-white{ background:radial-gradient(closest-side, rgb(var(--rgb-branco) / .07), transparent 70%); animation-duration:var(--dur-aura-2); animation-direction:alternate-reverse; }
.aura--1{ left:10%; top:-20%; }
.aura--2{ right:-10%; bottom:-30%; }
.hero-spot{ position:absolute; inset:0; z-index:10; opacity:0; mix-blend-mode:screen; transition:opacity var(--dur-hover-cor) var(--ease-std); }
.hero-spot--core{ mix-blend-mode:overlay; }
.hero-shimmer{ position:absolute; top:0; left:0; z-index:20; width:100%; height:1px; background:linear-gradient(to right, transparent, rgb(var(--rgb-vermelho) / .8), transparent); transform:translateX(-100%); animation:shimmer var(--dur-shimmer) var(--ease-css) infinite; }
#hero-particles{ position:absolute; inset:0; z-index:2; width:100%; height:100%; pointer-events:none; }
.hero-inner{ position:relative; z-index:20; display:flex; flex-direction:column; min-height:calc(100svh - var(--header-h)); }

/* --- barra superior ----------------------------------------------------------- */
.hero-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:24px; padding:32px var(--pad-x) 0; }
.hero-top__l{ display:flex; align-items:center; gap:12px; min-width:0; }
.hero-top__tx{ font-size:var(--fs-rotulo); font-weight:var(--peso-rotulo); line-height:1.4; letter-spacing:var(--tr-widest); text-transform:uppercase; color:var(--texto-corpo); cursor:crosshair; transition:color var(--dur-std) var(--ease-std); }
.hero-top__tx:hover{ color:var(--texto-marca); }
.hero-top__tx .sep{ color:var(--texto-meta); margin:0 8px; }
.hero-top__r{ display:none; align-items:center; gap:12px; flex:none; font-size:var(--fs-rotulo); font-weight:var(--peso-rotulo); line-height:1.4; letter-spacing:var(--tr-widest); text-transform:uppercase; color:var(--texto-meta); white-space:nowrap; }
.hero-top__r b{ color:var(--texto-destaque); }

/* --- palco ------------------------------------------------------------------ */
.hero-band{ position:relative; flex:1 1 auto; min-height:clamp(280px, 40vh, 480px); }
/* rede lenta: o navegador pode pintar antes de o HTML do .hero-base chegar; sem ele, o palco não ocupa o espaço que é do texto (evita o salto) */
.hero-inner:not(:has(.hero-base)) .hero-band{ flex-grow:0; }
.hero-lettering{ position:absolute; left:0; right:0; top:50%; z-index:1; display:flex; justify-content:center; pointer-events:none; transform:translateY(-52.4%); }
.lt-par{ transition:transform var(--dur-parallax) var(--ease-css-out); will-change:transform; }
/* lettering translúcido: Teko 600; os pontos do degradê caem sobre a versal do Teko como caíam sobre a do Inter */
.lt{ font-family:var(--fonte-display); font-weight:var(--peso-display); font-size:var(--fs-lettering); line-height:var(--lh-lettering); letter-spacing:var(--tr-lettering); text-transform:uppercase; white-space:nowrap; }
.lt-stack{ position:relative; display:inline-block; }
.hero-lettering .lt-stack{ width:var(--lt-largura); }
.lt-stack > span{ display:block; }
.lt-stack > span + span{ position:absolute; inset:0; }
.lt-ghost{ color:transparent; background-image:linear-gradient(180deg, rgb(var(--rgb-branco) / .74) 0%, rgb(var(--rgb-branco) / .24) 39%, rgb(var(--rgb-branco) / 0) 75%); -webkit-background-clip:text; background-clip:text; }
.lt-outline{ color:transparent; -webkit-text-stroke:1px rgb(var(--rgb-branco) / .2); }
.lt-sheen{ color:transparent; background-image:linear-gradient(105deg, transparent 42%, rgb(var(--rgb-branco) / .7) 50%, transparent 58%); background-size:260% 100%; background-position:130% 0; -webkit-background-clip:text; background-clip:text; animation:lt-sheen var(--dur-sheen) var(--ease-io) infinite; }
/* preenchimento: mesma varredura do DS (esq.→dir. e some), feita com translate em vez de clip-path */
.lt-fill{ overflow:hidden; transform:translateX(-101%); }
.lt-fill > span{ display:block; color:var(--cor-branco); transform:translateX(101%); }
.lt-fill.is-go{ animation:lt-fill-wrap var(--dur-fill) var(--ease-io) forwards; }
.lt-fill.is-go > span{ animation:lt-fill-in var(--dur-fill) var(--ease-io) forwards; }
.lt-spot{ color:var(--cor-branco); opacity:0; filter:drop-shadow(0 0 26px rgb(var(--rgb-vermelho) / .55)); transition:opacity var(--dur-spot) var(--ease);
  -webkit-mask-image:radial-gradient(circle var(--spot-r,260px) at var(--mx,-999px) var(--my,-999px), var(--mascara) 0%, rgb(var(--rgb-sombra) / .5) 36%, transparent 72%);
  mask-image:radial-gradient(circle var(--spot-r,260px) at var(--mx,-999px) var(--my,-999px), var(--mascara) 0%, rgb(var(--rgb-sombra) / .5) 36%, transparent 72%); }
.is-lit .lt-spot{ opacity:1; }

/* palco do objeto central: o mapa de rota ocupa o lugar do drone (mesmo quadro 2:1) */
.stage-wrap{ position:absolute; left:50%; top:50%; z-index:3; width:min(46vw,760px); transform:translate(-50%,-26%); perspective:1400px; }
.stage{ position:relative; width:100%; aspect-ratio:2/1; transform-style:preserve-3d; transition:transform var(--dur-tilt) var(--ease-css-out); }
.mapa{ position:absolute; top:0; bottom:0; left:25.5%; width:49%; z-index:3; pointer-events:none; filter:drop-shadow(0 40px 50px rgb(var(--rgb-sombra) / .85)) drop-shadow(0 0 1px rgb(var(--rgb-branco) / .25)); }
.mapa > svg, .mapa__ufs, .mapa__ufs img{ position:absolute; inset:0; width:100%; height:100%; }
.mapa__rota{ overflow:visible; }
.rota-pontos{ fill:none; stroke:var(--rota); stroke-width:9.47; stroke-linecap:round; stroke-dasharray:.09 20.84; }
.rota-ponta{ fill:var(--rota); }
.draw-svg mask path{ fill:none; stroke:var(--mascara-visivel); stroke-width:56; stroke-linecap:round; }
.origem-anel{ fill:var(--acao); opacity:.35; }
.origem-ponto{ fill:var(--cor-branco); stroke:var(--acao); stroke-width:10.3; }
/* draw-svg do DS (2,2s ease-io): a máscara desenha o pontilhado e a ponta da seta */
.js .draw-svg mask path{ stroke-dasharray:var(--len,600); stroke-dashoffset:var(--len,600); }
.js .draw-svg.is-drawn mask path{ stroke-dashoffset:0; transition:stroke-dashoffset var(--dur-draw) var(--ease-io) calc(var(--ord, 0) * var(--passo-traco)); }
/* halo e sombra do drone → brilho vermelho suave sob a origem (São José do Rio Preto) */
.origem-halo{ position:absolute; left:55.7%; top:65.4%; z-index:4; width:26%; aspect-ratio:1; translate:-50% -50%; border-radius:50%; pointer-events:none; background:radial-gradient(closest-side, rgb(var(--rgb-vermelho) / .12), rgb(var(--rgb-vermelho) / .03) 55%, transparent 75%); filter:blur(8px); }
.origem-glow{ position:absolute; left:55.7%; top:65.4%; z-index:4; width:24%; height:16%; translate:-50% -50%; border-radius:50%; pointer-events:none; mix-blend-mode:screen; background:radial-gradient(closest-side, rgb(var(--rgb-vermelho) / .55), rgb(var(--rgb-vermelho) / .12) 55%, transparent 75%); filter:blur(14px);
  animation:glow-swell var(--dur-glow-swell) var(--ease-io) infinite alternate, glow-pulse var(--dur-glow-pulse) var(--ease-io) infinite; }
/* retícula centrada na origem */
.reticle{ position:absolute; left:55.7%; top:65.4%; z-index:4; width:22%; aspect-ratio:1; translate:-50% -50%; pointer-events:none; }
.reticle > i{ position:absolute; inset:0; border-radius:50%; }
.reticle .r1{ border:1px dashed rgb(var(--rgb-branco) / .14); animation:spin var(--dur-reticle-1) var(--ease-linear) infinite; }
.reticle .r2{ inset:9%; border:1px solid transparent; border-top-color:rgb(var(--rgb-vermelho) / .55); border-bottom-color:rgb(var(--rgb-vermelho) / .2); animation:spin var(--dur-reticle-2) var(--ease-linear) infinite reverse; }
.reticle .r3{ inset:-8%; border:1px solid rgb(var(--rgb-branco) / .05); }
.reticle .tick{ position:absolute; background:rgb(var(--rgb-branco) / .4); }
.reticle .tick.t{ top:-10%; left:50%; width:1px; height:5%; } .reticle .tick.b{ bottom:-10%; left:50%; width:1px; height:5%; }
.reticle .tick.l{ left:-10%; top:50%; height:1px; width:5%; } .reticle .tick.r{ right:-10%; top:50%; height:1px; width:5%; }
/* varredura do rastreamento (scan-vertical do DS, com translate em vez de top) */
.stage-scan{ position:absolute; left:14%; right:14%; top:0; bottom:0; z-index:4; pointer-events:none; animation:scan-move var(--dur-scan) var(--ease-scan) infinite; }
.stage-scan i{ display:block; height:1px; background:linear-gradient(90deg, transparent, rgb(var(--rgb-vermelho-500) / .9), transparent); box-shadow:0 0 18px rgb(var(--rgb-vermelho) / .9); mix-blend-mode:screen; }
/* callouts */
.callouts{ display:none; position:absolute; inset:0; z-index:5; overflow:visible; pointer-events:none; width:100%; height:100%; }
.callouts path{ fill:none; stroke:rgb(var(--rgb-branco) / .45); stroke-width:1.5; }
.js .callouts path{ stroke-dasharray:var(--len,600); stroke-dashoffset:var(--len,600); transition:stroke-dashoffset var(--dur-callout) var(--ease-io); }
.js .is-booted .callouts path{ stroke-dashoffset:0; }
.c-dot{ display:none; position:absolute; z-index:6; width:8px; height:8px; margin:-4px 0 0 -4px; border-radius:50%; background:var(--cor-branco); box-shadow:0 0 10px rgb(var(--rgb-branco) / .9); cursor:crosshair; }
.c-dot i{ position:absolute; inset:-6px; border-radius:50%; border:1px solid rgb(var(--rgb-vermelho) / .8); animation:c-ping var(--dur-c-ping) var(--ease-out) infinite; }
.c-label{ display:none; position:absolute; z-index:6; font-size:var(--fs-rotulo); font-weight:var(--peso-rotulo); line-height:1.3; letter-spacing:var(--tr-callout); text-transform:uppercase; color:var(--texto-destaque); white-space:nowrap; }
.c-label b{ display:block; margin-bottom:3px; color:var(--texto-titulo); }
/* os rótulos passam sobre o lettering claro: texto em Mist (--texto-destaque) + halo de Asfalto colado às letras mantêm 4,5:1 */
.c-label{ text-shadow:var(--halo-callout); }
.c-label.r{ text-align:right; }
.js .c-label{ opacity:0; transform:translateY(6px); transition:opacity var(--dur-label) var(--ease-out) var(--delay,0s), transform var(--dur-label) var(--ease-out) var(--delay,0s); }
.js .is-booted .c-label{ opacity:1; transform:none; }
/* tooltips do DS */
[data-tip]::after{ content:attr(data-tip); position:absolute; z-index:40; left:50%; bottom:calc(100% + 10px); transform:translate(-50%,6px); white-space:nowrap; pointer-events:none;
  font-family:var(--fonte-texto); font-size:var(--fs-rotulo); font-weight:var(--peso-rotulo); letter-spacing:.12em; text-transform:uppercase; color:var(--texto-titulo); background:var(--fundo); border:1px solid var(--linha-forte); padding:6px 9px; box-shadow:0 10px 30px -10px rgb(var(--rgb-sombra) / .9);
  opacity:0; transition:opacity var(--dur-tip) var(--ease-out) var(--dur-tip-delay), transform var(--dur-tip-move) var(--ease-out) var(--dur-tip-delay); }
[data-tip]::before{ content:''; position:absolute; z-index:41; left:50%; bottom:calc(100% + 5px); width:7px; height:7px; background:var(--fundo); border-right:1px solid var(--linha-forte); border-bottom:1px solid var(--linha-forte); transform:translate(-50%,6px) rotate(45deg); opacity:0; pointer-events:none;
  transition:opacity var(--dur-tip) var(--ease-out) var(--dur-tip-delay), transform var(--dur-tip-move) var(--ease-out) var(--dur-tip-delay); }
[data-tip]:hover::after, [data-tip]:focus-visible::after{ opacity:1; transform:translate(-50%,0); }
[data-tip]:hover::before, [data-tip]:focus-visible::before{ opacity:1; transform:translate(-50%,0) rotate(45deg); }
[data-tip-accent]::after{ border-color:rgb(var(--rgb-vermelho) / .6); color:var(--texto-marca); box-shadow:0 0 22px -4px rgb(var(--rgb-vermelho) / .45); }
[data-tip-accent]::before{ border-color:rgb(var(--rgb-vermelho) / .6); }
[data-tip-pos="right"]::after{ left:calc(100% + 10px); bottom:auto; top:50%; transform:translate(-6px,-50%); }
[data-tip-pos="right"]::before{ left:calc(100% + 5px); bottom:auto; top:50%; transform:translate(-6px,-50%) rotate(135deg); }
[data-tip-pos="right"]:hover::after, [data-tip-pos="right"]:focus-visible::after{ transform:translate(0,-50%); }
[data-tip-pos="right"]:hover::before, [data-tip-pos="right"]:focus-visible::before{ transform:translate(0,-50%) rotate(135deg); }

/* faixa veloz: um feixe, canto inferior direito do palco, sangrando a borda; nunca atrás de texto */
.faixa-wrap{ position:absolute; z-index:2; right:calc(-1 * var(--faixa-sangria-sm)); bottom:0; width:var(--faixa-w-sm); pointer-events:none; }
.faixa img{ width:100%; height:auto; }

/* cartões de telemetria (lg+) */
.telemetry{ display:none; position:absolute; inset:0; z-index:4; pointer-events:none; }
.tc-pos{ position:absolute; }
.tc-pos--tl{ left:3%; top:8%; } .tc-pos--bl{ left:6%; bottom:4%; } .tc-pos--tr{ right:3%; top:6%; } .tc-pos--br{ right:7%; bottom:8%; }
.telemetry-card{ position:relative; pointer-events:auto; border:1px solid var(--linha); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); box-shadow:0 20px 50px -12px rgb(var(--rgb-sombra) / .5);
  transition:transform var(--dur-card) var(--ease-css-out), border-color var(--dur-borda) var(--ease-css), box-shadow var(--dur-borda) var(--ease-css); }
.telemetry-card:hover{ border-color:rgb(var(--rgb-vermelho) / .5); }
.tc--tl{ width:260px; padding:20px; background:rgb(var(--rgb-grafite) / var(--card-alfa)); border-left:2px solid var(--acao); }
.tc--bl{ width:264px; padding:16px; background:rgb(var(--rgb-grafite) / var(--card-alfa)); }
.tc--tr{ width:288px; padding:24px; background:rgb(var(--rgb-grafite) / var(--card-alfa-forte)); }
.tc--tr:hover{ box-shadow:0 20px 50px -12px rgb(var(--rgb-sombra) / .5), 0 0 30px rgb(var(--rgb-vermelho) / .15); }
.tc--br{ width:260px; padding:16px; background:rgb(var(--rgb-grafite) / var(--card-alfa)); }
.tc-head{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:12px; }
.tc-head--rule{ padding-bottom:8px; border-bottom:1px solid var(--linha); }
.tc-head--top{ align-items:flex-start; margin-bottom:20px; }
.tc-label{ font-size:var(--fs-rotulo); font-weight:var(--peso-rotulo); line-height:1.3; letter-spacing:var(--tr-widest); text-transform:uppercase; color:var(--texto-corpo); }
.tc-label--mb{ margin-bottom:6px; }
.ico--pulse{ color:var(--acao); animation:pulse var(--dur-pulse) var(--ease-pulse) infinite; }
.tc-rows{ display:grid; gap:8px; }
.tc-rows > div{ display:flex; justify-content:space-between; gap:12px; font-size:var(--fs-rotulo); font-weight:var(--peso-rotulo); line-height:1.3; text-transform:uppercase; }
.tc-rows dt{ color:var(--texto-corpo); }
.tc-rows dd{ color:var(--texto-titulo); text-align:right; }
.tc-num{ font-family:var(--fonte-display); font-weight:var(--peso-display); font-size:var(--fs-num-card); line-height:.8; letter-spacing:var(--tr-titulo); color:var(--texto-titulo); font-variant-numeric:tabular-nums; }
.tc-canvas{ position:relative; height:clamp(48px, calc(40vh - 280px), 96px); margin:0 -8px; } /* 96px (DS) em telas altas; encolhe para os cartões da esquerda não se sobreporem */
.tc-canvas canvas{ position:absolute; inset:0; width:100%; height:100%; }
.tc-line{ font-size:var(--fs-rotulo); font-weight:var(--peso-rotulo); line-height:1.3; letter-spacing:var(--tr-widest); text-transform:uppercase; color:var(--texto-corpo); }
.tc-accent{ position:absolute; left:-1px; top:24px; bottom:24px; width:2px; background:var(--acao); }
.tc-icobox{ display:flex; align-items:center; justify-content:center; width:32px; height:32px; flex:none; border-radius:var(--raio-sm); background:rgb(var(--rgb-vermelho) / .1); border:1px solid rgb(var(--rgb-vermelho) / .2); color:var(--acao); }
.tc-meta{ font-size:var(--fs-rotulo); font-weight:var(--peso-rotulo); line-height:1.3; letter-spacing:var(--tr-widest); text-transform:uppercase; color:var(--texto-corpo); }
.tc--tr .tc-meta{ margin-bottom:6px; }
.tc-track{ position:relative; width:100%; height:4px; background:var(--painel); }
.tc-bar{ height:100%; background:var(--acao); transform-origin:left center; }
.tc-tip{ position:absolute; inset:0; pointer-events:none; }
.tc-tip i{ position:absolute; right:0; top:50%; width:4px; height:8px; margin-top:-4px; background:var(--cor-branco); animation:pulse var(--dur-pulse) var(--ease-pulse) infinite; }
.tc-split{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; }
.tc--br .tc-split{ flex-direction:column; align-items:flex-start; gap:6px; }  /* "Acidente e roubo" + "Fairfax e Akad" não cabem lado a lado nos 228px do cartão: empilha, cada um numa linha */
.tc-strong{ font-size:var(--fs-rotulo); font-weight:var(--peso-rotulo); line-height:1.3; letter-spacing:var(--tr-widest); text-transform:uppercase; color:var(--texto-titulo); }

/* --- base: título, texto, ações ------------------------------------------- */
.hero-base{ display:grid; grid-template-columns:minmax(0,1fr); gap:40px; align-items:end; padding:8px var(--pad-x) 32px; }
.hero-base__l{ max-width:672px; min-width:0; }
.hero-base__r{ display:flex; flex-direction:column; gap:32px; min-width:0; }
.hero-title{ margin-bottom:20px; font-family:var(--fonte-display); font-weight:var(--peso-display); font-size:var(--fs-h1-sm); line-height:var(--lh-h1); letter-spacing:var(--tr-titulo); text-transform:uppercase; color:var(--texto-titulo); cursor:default; }
.mask-line{ display:block; overflow:hidden; padding:.12em 0 .04em; margin-top:-.12em; }
.mask-line > span{ display:block; transition:transform var(--dur-mask) var(--ease-out); }
.js .mask-line > span{ transform:translate3d(0,110%,0); }
.js .rv-in .mask-line > span{ transform:none; }
.mask-line > .hero-title__l1{ transition:transform var(--dur-mask) var(--ease-out), color var(--dur-hover-cor) var(--ease-std); }
.hero-title__l1:hover{ color:var(--texto-destaque); }
/* última linha: Vermelho-400 sólido (contraste 6,3:1); o glitch roda numa cópia por cima */
.glitch-line{ position:relative; display:inline-block; white-space:nowrap; color:var(--texto-marca); }
.glitch-line.is-decoding{ color:transparent; }
.glitch-ov{ position:absolute; left:0; top:0; white-space:nowrap; color:var(--texto-marca); pointer-events:none; }
.hero-lead{ max-width:576px; margin-bottom:28px; padding-left:16px; border-left:2px solid var(--acao); font-size:var(--fs-lead-sm); line-height:var(--lh-lead); color:var(--texto-corpo); }
.hero-actions{ display:flex; flex-direction:column; gap:16px; }
.cta-primary{ position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; gap:12px; padding:16px 32px; background:var(--acao); color:var(--acao-texto); text-align:center;
  font-size:var(--fs-rotulo); font-weight:var(--peso-rotulo); line-height:1.35; letter-spacing:var(--tr-widest); text-transform:uppercase; box-shadow:0 0 20px rgb(var(--rgb-vermelho) / .3);
  transition:transform var(--dur-mag) var(--ease-out), background-color var(--dur-hover-cor) var(--ease-std), box-shadow var(--dur-hover-cor) var(--ease-std), scale var(--dur-std) var(--ease-std); }
.cta-primary:hover{ background:var(--acao-hover); box-shadow:0 0 40px rgb(var(--rgb-vermelho-500) / .6); }
.cta-primary:active{ background:var(--acao-active); scale:.97; }
button.cta-primary{ border:0; font-family:inherit; cursor:pointer; }
/* disabled (DS: opacidade .4, sem brilho) */
.cta-primary:is(:disabled, [aria-disabled="true"]){ opacity:.4; cursor:not-allowed; box-shadow:none; background:var(--acao); scale:1; }
.cta-primary:is(:disabled, [aria-disabled="true"]) .shimmer-hover{ animation:none; }
.cta-primary__tx, .cta-primary__ico{ position:relative; z-index:1; }
.cta-primary__tx{ text-wrap:balance; }   /* < 390px o texto quebra: "WhatsApp" não fica sozinho na 2ª linha */
.cta-primary__ico{ transition:transform var(--dur-std) var(--ease-std); }
.cta-primary:hover .cta-primary__ico{ transform:translate(4px,-4px); }
.cta-primary--interno:hover .cta-primary__ico{ transform:translateY(4px); }   /* leva a uma seção da página: a seta desce */
/* secundário (radian .btn-icon-*): "Ver serviços", leva a #servicos */
.btn-icon-link{ position:relative; display:inline-flex; align-items:center; color:var(--fundo); line-height:1.2; font-size:var(--fs-btn-pill); }
.btn-icon-content{ position:relative; overflow:hidden; display:flex; align-items:center; gap:.75em; min-height:44px; padding:.62em .7em .62em 1.25em; border-radius:50vw; background:var(--cor-branco); color:var(--fundo); transition:box-shadow var(--d-3) var(--ease), background-color var(--d-3) var(--ease), scale var(--dur-std) var(--ease-std); }
.btn-icon-link:hover .btn-icon-content{ box-shadow:0 0 0 4px rgb(var(--rgb-branco) / .06), 0 12px 40px -10px rgb(var(--rgb-branco) / .35); }
.btn-icon-content__mask{ position:relative; z-index:1; display:flex; align-items:center; overflow:hidden; flex:none; }
.btn-icon-content__text{ --text-duplicate-distance:1.5em; display:block; white-space:nowrap; font-weight:var(--peso-rotulo); letter-spacing:var(--tr-btn); text-transform:uppercase; text-shadow:0 var(--text-duplicate-distance) currentColor; }
.btn-icon-link:active .btn-icon-content{ scale:.97; }
.btn-icon-link.is-outline{ color:var(--texto-titulo); }
.btn-icon-link.is-outline .btn-icon-content{ background:transparent; color:var(--texto-titulo); box-shadow:inset 0 0 0 1px rgb(var(--rgb-branco) / .35); }
.btn-icon-link.is-outline:hover .btn-icon-content{ box-shadow:inset 0 0 0 1px var(--cor-branco), 0 0 30px -6px rgb(var(--rgb-branco) / .3); }
.btn-icon-icon{ position:relative; z-index:1; flex:none; width:2em; height:2em; display:flex; align-items:center; justify-content:center; border:1px solid currentColor; border-radius:50vw; opacity:.9; }
.btn-icon-icon__wrap{ position:relative; display:flex; justify-content:flex-end; align-items:center; width:100%; height:100%; overflow:hidden; border-radius:50vw; }
.btn-icon-icon__list{ display:flex; align-items:center; height:100%; flex:none; }
.btn-icon-icon__arrow{ flex:none; width:2em; height:1em; }
[data-button-anim-target]{ transition:transform var(--d-3) var(--ease-snap); }
@media (hover:hover) and (pointer:fine){
  .btn-icon-link:hover .btn-icon-content__text{ transform:translate(0, calc(-1 * var(--text-duplicate-distance))); }
  .btn-icon-link:hover .btn-icon-icon__arrow{ transform:translate(100%,0); }
}

/* selos da marca (mobile, < lg): aba vermelha com ícone, título Teko, apoio */
.selos{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:24px; }
.selo{ display:flex; align-items:stretch; min-height:64px; overflow:hidden; border:1px solid var(--linha); border-radius:var(--raio-selo); background:var(--fundo); }
.selo__aba{ display:flex; align-items:center; flex:0 0 46px; padding-left:10px; background:var(--acao); color:var(--cor-branco); clip-path:polygon(0 0, 100% 0, 74% 100%, 0 100%); }
.selo__tx{ display:flex; flex-direction:column; justify-content:center; gap:4px; min-width:0; padding:10px 10px 10px 4px; }
.selo__tx b{ font-family:var(--fonte-display); font-weight:var(--peso-display); font-size:var(--fs-selo); line-height:.9; letter-spacing:var(--tr-titulo); text-transform:uppercase; color:var(--texto-titulo); padding-top:.1em; }
.selo__tx small{ font-size:var(--fs-rotulo); font-weight:var(--peso-rotulo); line-height:1.25; letter-spacing:.06em; text-transform:uppercase; color:var(--texto-corpo); }

/* serviços (chips do DS): cada um leva ao seu card em #servicos, com hover e foco */
.chips{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:32px; row-gap:24px; }
.chips > li:first-child{ grid-column:1 / -1; }   /* 3 serviços: o 01 (nome mais longo) em linha inteira, 02 e 03 lado a lado */
.chip{ display:flex; gap:14px; align-items:flex-start; color:inherit; cursor:pointer; }
.chip .num{ flex:0 0 auto; font-family:var(--fonte-display); font-weight:var(--peso-display); font-size:var(--fs-num-chip); line-height:.8; letter-spacing:var(--tr-titulo); color:var(--texto-titulo); font-variant-numeric:tabular-nums; padding-top:2px; transition:color var(--dur-chip-cor) var(--ease-css), transform var(--dur-chip-move) var(--ease-out); }
.chip .tx{ min-width:0; padding-top:1px; }
.chip b{ display:block; margin-bottom:6px; font-size:var(--fs-rotulo); line-height:1.3; letter-spacing:var(--tr-chip); text-transform:uppercase; color:var(--texto-corpo); }
.chip .p{ display:block; max-width:22ch; font-size:var(--fs-rotulo); line-height:1.5; color:var(--texto-meta); transition:color var(--dur-chip-cor) var(--ease-css); }
.chip b{ transition:color var(--dur-chip-cor) var(--ease-css); }
.chip:hover .num, .chip:focus-visible .num{ color:var(--cor-vermelho-500); transform:translate3d(0,-2px,0); }   /* Ember do DS */
.chip:hover b, .chip:focus-visible b{ color:var(--texto-titulo); }
.chip:hover .p, .chip:focus-visible .p{ color:var(--texto-corpo); }
.hero-cue{ display:flex; align-items:center; gap:12px; font-size:var(--fs-rotulo); letter-spacing:.3em; text-transform:uppercase; color:var(--texto-corpo); }
.hero-cue .track{ position:relative; width:54px; height:1px; overflow:hidden; background:var(--hair-3); }
.hero-cue .track i{ position:absolute; inset:0; background:var(--cor-branco); transform-origin:left; animation:cue var(--dur-cue) var(--ease-io) infinite; }

/* marquee (metric) */
.hero-marquee{ position:relative; height:48px; display:flex; align-items:center; overflow:hidden; border-top:1px solid var(--linha); background:rgb(var(--rgb-asfalto) / .7); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  -webkit-mask-image:linear-gradient(90deg, transparent, var(--mascara) 8%, var(--mascara) 92%, transparent); mask-image:linear-gradient(90deg, transparent, var(--mascara) 8%, var(--mascara) 92%, transparent); }
.hero-marquee__in{ display:flex; }
.mq-list{ display:flex; flex:none; animation:marquee var(--dur-marquee) var(--ease-linear) infinite; }
.hero-marquee:hover .mq-list{ animation-play-state:paused; }
.mq-item{ display:flex; align-items:center; gap:10px; padding:0 26px; white-space:nowrap; font-size:var(--fs-rotulo); font-weight:var(--peso-rotulo); letter-spacing:var(--tr-chip); text-transform:uppercase; color:var(--texto-meta); }
.mq-item i{ display:inline-block; flex:none; width:4px; height:4px; background:var(--acao); box-shadow:0 0 8px var(--acao); }
.no-case{ text-transform:none; }
.nw{ white-space:nowrap; }


/* --- dobras abaixo da Hero: o estilo completo está em css/dobras.css (carregado sem bloquear a primeira tela);
       aqui só a moldura da seção, que precisa valer desde o início */
.ds-section{ position:relative; overflow-x:clip; border-bottom:1px solid var(--linha); background:var(--secao-fundo); content-visibility:auto; contain-intrinsic-size:auto var(--secao-altura-estimada); }   /* só monta perto da tela */
/* overflow-x: clip — nenhuma entrada (halos, deslizes de 24–34px) pode alargar a página: no celular, o navegador afastaria o zoom
   e as âncoras parariam fora do lugar. Clip não cria rolagem própria, então o sticky continua funcionando */
/* rodapé: fica fora das seções, mas também só é montado perto da tela (a mesma economia do .ds-section) */
.rodape{ content-visibility:auto; contain-intrinsic-size:auto var(--rodape-altura-estimada); }
/* cotação sem JS (ou com o main.js falhando): o formulário some e fica o link do WhatsApp; com JS, o aviso some desde a primeira pintura */
.js .cot-semjs{ display:none; }

/* --- revelações (só com JS ligado; sem JS tudo aparece) ------------------- */
.js [data-rv]{ opacity:0; }
.js [data-rv].rv-in{ opacity:1; transition:opacity var(--dur-rv) var(--ease-out), transform var(--dur-mask) var(--ease-out); }
@media (prefers-reduced-motion:no-preference){
  .js .sys-reveal{ opacity:0; transform:translateY(20px); transition:opacity var(--d-7) var(--ease-out), transform var(--d-7) var(--ease-out); will-change:opacity,transform; }
  .js .sys-rise{ transform:translateY(34px); }
  .js .sys-slide-l{ transform:translateX(-34px); }
  .js .sys-slide-r{ transform:translateX(34px); }
  .js .sys-scale{ transform:scale(.94); }
  .js .faixa.sys-reveal{ transform:translate(-31.3px, 13.3px); } /* 34px ao longo do eixo de 23° */
  .js .sys-reveal.sys-active{ opacity:1; transform:translate(0) scale(1); }
  .sys-delay-100{ transition-delay:var(--delay-100); } .sys-delay-200{ transition-delay:var(--delay-200); } .sys-delay-300{ transition-delay:var(--delay-300); }
  .sys-delay-400{ transition-delay:var(--delay-400); } .sys-delay-500{ transition-delay:var(--delay-500); } .sys-delay-600{ transition-delay:var(--delay-600); }
}
/* desfoque do reveal do DS: só com ponteiro fino (no toque, só transform e opacity) */
@media (prefers-reduced-motion:no-preference) and (hover:hover) and (pointer:fine) and (min-width:1024px){
  .js .sys-reveal{ filter:blur(4px); transition:opacity var(--d-7) var(--ease-out), transform var(--d-7) var(--ease-out), filter var(--d-7) var(--ease-css-out); }
  .js .sys-reveal.sys-active{ filter:blur(0); }
}
/* laços decorativos param quando a Hero sai da tela */
.hero.is-off :is(.lt-sheen, .aura, .bg-grid-mask, .hero-shimmer, .reticle i, .origem-glow, .stage-scan, .c-dot i, .ping i, .mq-list, .tc-tip i, .ico--pulse, .hero-cue .track i){ animation-play-state:paused !important; }

/* --- keyframes ---------------------------------------------------------------- */
@keyframes ping{ 75%,100%{ transform:scale(2); opacity:0; } }
@keyframes pulse{ 50%{ opacity:.5; } }
@keyframes spin{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }
@keyframes shimmer{ 0%{ transform:translateX(-100%); } 100%{ transform:translateX(100%); } }
@keyframes scan-move{ 0%{ transform:translateY(0); opacity:0; } 15%{ opacity:1; } 85%{ opacity:1; } 100%{ transform:translateY(100%); opacity:0; } }
@keyframes grid-drift{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(60px,60px,0); } }
@keyframes aura-drift{ 0%{ transform:translate3d(-8%,-4%,0) scale(.92); } 50%{ transform:translate3d(6%,8%,0) scale(1.06); } 100%{ transform:translate3d(12%,-6%,0) scale(.98); } }
@keyframes glow-swell{ from{ transform:scale(.93); } to{ transform:scale(1.07); } }
@keyframes glow-pulse{ from{ opacity:.78; } 50%{ opacity:1; } to{ opacity:.78; } }
@keyframes lt-sheen{ 0%{ background-position:130% 0; } 55%,100%{ background-position:-30% 0; } }
@keyframes lt-fill-wrap{ 0%{ transform:translateX(-101%); opacity:1; } 55%{ transform:translateX(0); opacity:1; } 100%{ transform:translateX(0); opacity:0; } }
@keyframes lt-fill-in{ 0%{ transform:translateX(101%); } 55%,100%{ transform:translateX(0); } }
@keyframes c-ping{ 0%{ transform:scale(.4); opacity:1; } 100%{ transform:scale(2.2); opacity:0; } }
@keyframes cue{ 0%{ transform:scaleX(0); } 42%{ transform:scaleX(1); } 100%{ transform:scaleX(1) translateX(100%); } }
@keyframes marquee{ 0%{ transform:translateX(0%); } 100%{ transform:translateX(-100%); } }
@keyframes ghost-drift{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(-50%,0,0); } }

/* --- responsivo --------------------------------------------------------------- */
/* celular: palco menor para H1, texto e CTA caberem na primeira tela */
/* < 360px (ex.: 320px): logo de 200px + WhatsApp + menu não cabiam e o botão cobria o fim do logo.
   Os dois botões ficam no mínimo de toque e a margem até a borda da tela encolhe; o logo e a proteção do lado dos botões ficam iguais */
@media (max-width:359px){
  .hdr-brand{ flex:none; padding:0 var(--logo-protecao) 0 var(--hdr-margem-sm); }
  .hdr-wa{ padding:0; }
  .hdr-menu{ width:var(--alvo); }
}
@media (max-width:767px){
  .hero-band{ min-height:max(clamp(190px, 27vh, 300px), calc(46vw + 24px)); }
  .stage-wrap{ top:auto; bottom:0; width:min(92vw,640px); transform:translateX(-50%); }
  .hero-lettering{ transform:translateY(-78%); }
}
@media (min-width:640px){
  .hero-actions{ flex-direction:row; align-items:center; gap:20px; }
  .cta-primary{ white-space:nowrap; }
  .hdr-wa{ flex:none; margin-left:auto; }
  .hdr-wa__tx{ display:inline; }
}
@media (min-width:768px){
  .hdr-brand{ padding-right:32px; }
  .hdr-actions{ display:flex; }
  .hdr-wa, .hdr-menu{ display:none; }
  .menu-cel{ display:none; }
  .trilho{ display:flex; }
  .lateral{ display:block; flex:none; position:relative; z-index:40; width:var(--lateral-w); border-right:1px solid var(--linha); background:var(--lateral-fundo); }
  .secoes{ flex:1; }
  .hero-top{ padding-top:40px; }
  .hero-top__r{ display:flex; }
  .hero-title{ font-size:var(--fs-h1-md); }
  .hero-lead{ font-size:var(--fs-lead); }
  .callouts, .c-dot, .c-label{ display:block; }
}
@media (min-width:768px) and (max-width:1023px){
  .stage-wrap{ width:min(92vw,640px); transform:translate(-50%,-36%); }
  .hero-lettering{ transform:translateY(-60.4%); }
}
/* celular deitado: a tela tem ~310px abaixo do header; o palco encolhe para o H1 entrar na 1ª tela.
   Mapa e lettering mantêm a proporção do retrato; o H1 usa o tamanho do celular, sem callouts */
@media (orientation:landscape) and (max-height:500px) and (max-width:1023px){
  .hero-top{ padding-top:16px; }
  .hero-band{ min-height:var(--palco-deitado); }
  .stage-wrap{ top:auto; bottom:0; width:calc(2 * var(--palco-deitado)); transform:translateX(-50%); }
  .hero-lettering{ --fs-lettering:var(--palco-deitado); transform:translateY(-62%); }
  .hero-title{ font-size:var(--fs-h1-sm); }
  .callouts, .c-dot, .c-label{ display:none; }  /* como no retrato: com o mapa pequeno, os rótulos cobririam o mapa */
}
@media (min-width:1024px){
  .hdr-nav{ display:flex; }
  .hero-inner{ min-height:max(calc(100svh - var(--header-h)), 780px); }
  .hero-top{ padding-left:var(--pad-x-lg); padding-right:var(--pad-x-lg); }
  .telemetry{ display:block; }
  .hero-base{ grid-template-columns:repeat(12,minmax(0,1fr)); gap:32px; padding-left:var(--pad-x-lg); padding-right:var(--pad-x-lg); }
  .hero-base__l{ grid-column:span 7; }
  .hero-base__r{ grid-column:span 5; align-items:flex-end; }
  .chips{ max-width:560px; }
  .selos{ display:none; }
  .faixa-wrap{ top:calc(92% + 12px); bottom:auto; right:calc(-1 * var(--faixa-sangria)); width:var(--faixa-w); }
}
@media (min-width:1024px) and (max-width:1279px){
  .tc--tl, .tc--bl, .tc--br{ width:240px; }  /* larguras do DS nessa faixa: evita encostar nos rótulos do mapa */
  .tc--tr{ width:248px; padding:20px; }
}
@media (min-width:1280px){
  .hdr-cta{ padding:0 32px; }
  .hero-title{ font-size:var(--fs-h1-xl); }
  .hero-base__l{ grid-column:span 6; }
  .hero-base__r{ grid-column:span 6; }
}

/* selo "Frota 100% rastreada" e o respiro do DS nos links (24px) só a partir de 1440px: com 4 links (Dobra 05),
   em 1280 o selo encostaria no primeiro link (D1). Até 1439px os links ficam com 20px */
@media (min-width:1440px){
  .hdr-status{ display:flex; }
  .hdr-link{ padding:0 24px; }
}
/* rail: só com mouse, a partir de 1280px e com tela de 720px ou mais (abaixo disso ele cruzaria o cartão de telemetria da Hero) */
@media (min-width:1280px) and (min-height:720px) and (hover:hover) and (pointer:fine){
  .rail{ display:flex; }
}

/* --- movimento reduzido ------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{ animation-duration:var(--delay-reduzido) !important; animation-iteration-count:1 !important; transition-duration:var(--delay-reduzido) !important; scroll-behavior:auto !important; }
  html{ scroll-behavior:auto; }
  .js [data-rv], .js .mask-line > span, .js .word-reveal .word{ opacity:1 !important; transform:none !important; }
  .js .sec-head .rule{ transform:none !important; }
  .mq-list, .ghost-track{ animation:none !important; }
}