

:root{

  --tinta:#08223a;
  --tinta-2:#0a2c4b;
  --azul:#0b3c66;
  --azul-claro:#1170b8;
  --azul-vivo:#2f97e8;
  --acento:#00c07a;
  --acento-escuro:#009a61;
  --acento-claro:#57e0ac;
  --alerta:#d4761a;
  --perigo:#c0392b;

  --texto:#12212e;
  --suave:#51677a;
  --tenue:#7c93a8;
  --borda:#e2eaf2;
  --borda-forte:#cfdcea;
  --fundo:#ffffff;
  --fundo-alt:#f4f8fc;
  --superficie:#ffffff;
  --superficie-2:#f7fafd;

  --fundo-app:
    radial-gradient(1200px 620px at 12% -8%, rgba(17,112,184,.07), transparent 60%),
    radial-gradient(900px 520px at 92% 4%, rgba(0,192,122,.06), transparent 62%),
    #f4f8fc;

  --sombra-1:0 1px 2px rgba(8,34,58,.05), 0 1px 3px rgba(8,34,58,.06);
  --sombra-2:0 2px 4px -1px rgba(8,34,58,.06), 0 6px 14px -3px rgba(8,34,58,.09);
  --sombra-3:0 4px 8px -2px rgba(8,34,58,.07), 0 14px 30px -6px rgba(8,34,58,.13);
  --sombra-4:0 8px 16px -4px rgba(8,34,58,.09), 0 28px 56px -12px rgba(8,34,58,.20);
  --sombra-verde:0 6px 18px -5px rgba(0,192,122,.45), 0 2px 6px -2px rgba(0,154,97,.35);
  --sombra-azul:0 6px 18px -5px rgba(17,112,184,.40), 0 2px 6px -2px rgba(11,60,102,.30);

  --raio-sm:10px;
  --raio:16px;
  --raio-lg:22px;
  --raio-xl:28px;

  --mola:cubic-bezier(.22,1,.36,1);
  --rapido:.16s;
  --medio:.3s;
  --lento:.55s;

  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}

@media (prefers-color-scheme: dark){
  :root{
    --texto:#e7eef7;
    --suave:#a2b6ca;
    --tenue:#7f95aa;
    --borda:#1e3247;
    --borda-forte:#2b4562;
    --fundo:#0a1420;
    --fundo-alt:#0d1a29;
    --superficie:#101f30;
    --superficie-2:#152639;
    --azul-claro:#4fa9ec;
    --acento:#1fd192;
    --acento-escuro:#00b880;

    --fundo-app:
      radial-gradient(1200px 620px at 12% -8%, rgba(47,151,232,.10), transparent 60%),
      radial-gradient(900px 520px at 92% 4%, rgba(0,192,122,.08), transparent 62%),
      #0a1420;

    --sombra-1:0 1px 2px rgba(0,0,0,.34), 0 1px 3px rgba(0,0,0,.28);
    --sombra-2:0 2px 4px -1px rgba(0,0,0,.36), 0 6px 14px -3px rgba(0,0,0,.42);
    --sombra-3:0 4px 8px -2px rgba(0,0,0,.40), 0 14px 30px -6px rgba(0,0,0,.50);
    --sombra-4:0 8px 16px -4px rgba(0,0,0,.44), 0 28px 56px -12px rgba(0,0,0,.62);
  }
  html{color-scheme:dark}
}

html{
  scroll-behavior:smooth;

  scroll-padding-top:86px;
  -webkit-text-size-adjust:100%;

  overflow-x:clip;
}

body{
  font-family:var(--sans);
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

[hidden]{display:none !important}

h1,h2,h3,.titulo,.marca{text-wrap:balance}
p,li,.lead,.sub{text-wrap:pretty}

.preco,.valor,.numero b,td.num,.tabular{font-variant-numeric:tabular-nums}

::selection{background:rgba(0,192,122,.26);color:inherit}

:focus-visible{
  outline:2px solid var(--azul-claro);
  outline-offset:2px;
  border-radius:8px;
  box-shadow:0 0 0 4px rgba(17,112,184,.18);
}
.topo :focus-visible,.barra :focus-visible,.hero :focus-visible{
  outline-color:var(--acento-claro);
  box-shadow:0 0 0 4px rgba(0,192,122,.24);
}

@supports (scrollbar-width: thin){
  html{scrollbar-width:thin;scrollbar-color:var(--borda-forte) transparent}
}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{
  background:var(--borda-forte);border-radius:99px;
  border:3px solid transparent;background-clip:content-box;
}
::-webkit-scrollbar-thumb:hover{background:var(--tenue);background-clip:content-box}

.rev{
  opacity:0;
  transform:translateY(16px);
  transition:
    opacity var(--lento) var(--mola) calc(var(--i, 0) * 60ms),
    transform var(--lento) var(--mola) calc(var(--i, 0) * 60ms);
  will-change:opacity,transform;
}
.rev.visivel{opacity:1;transform:none;will-change:auto}

body::before{
  content:"";position:fixed;inset:0;z-index:40;
  background:rgba(4,16,28,.55);
  opacity:0;pointer-events:none;
  transition:opacity var(--medio) var(--mola);
}
body.menu-aberto::before{opacity:1}

.aurora{position:relative;isolation:isolate}
.aurora::before{
  content:"";position:absolute;inset:-30% -10%;z-index:0;pointer-events:none;
  background:
    radial-gradient(38% 42% at 20% 26%, rgba(17,112,184,.40), transparent 68%),
    radial-gradient(34% 40% at 82% 18%, rgba(0,192,122,.22), transparent 66%),
    radial-gradient(40% 46% at 62% 88%, rgba(47,151,232,.20), transparent 70%);
  filter:blur(18px);
  animation:respirar 22s ease-in-out infinite alternate;
}
@keyframes respirar{
  0%  {transform:translate3d(0,0,0) scale(1)}
  50% {transform:translate3d(-2%,2%,0) scale(1.07)}
  100%{transform:translate3d(2%,-1%,0) scale(1.03)}
}

.malha{position:relative}
.malha::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(120% 100% at 50% 0%, #000 8%, transparent 72%);
          mask-image:radial-gradient(120% 100% at 50% 0%, #000 8%, transparent 72%);
}

.brilho{position:relative;overflow:hidden}
.brilho::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;z-index:2;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.85),transparent);
  opacity:0;transition:opacity var(--medio) var(--mola);
}
.brilho:hover::before{opacity:.6}

.varre{position:relative;overflow:hidden;isolation:isolate}
.varre::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.34) 50%,transparent 62%);
  transform:translateX(-120%);
}
.varre:hover::after{transition:transform .7s var(--mola);transform:translateX(120%)}

.confianca{
  display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;
  font-size:13.5px;font-weight:600;color:var(--suave);
}
.confianca span{display:inline-flex;align-items:center;gap:7px}
.confianca svg{width:15px;height:15px;flex:none;color:var(--acento-escuro)}

.esqueleto{
  background:linear-gradient(90deg,
    var(--superficie-2) 25%, var(--borda) 37%, var(--superficie-2) 63%);
  background-size:400% 100%;
  animation:varrer 1.4s ease infinite;
  border-radius:8px;color:transparent;user-select:none;
}
@keyframes varrer{from{background-position:100% 0}to{background-position:0 0}}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .rev{opacity:1;transform:none}
  .aurora::before{animation:none}
  .varre::after{display:none}
}
