:root {

  --bg: #04070c;
  --blue: #078eff;
  --cyan: #14c9ff;
  --green: #82ef00;

  --gradient:
    linear-gradient(
      90deg,
      #078eff,
      #11c7ff,
      #82ef00
    );

}


* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


html {
  scroll-behavior: smooth;
}


body {

  font-family:
    Inter,
    Arial,
    Helvetica,
    sans-serif;

  background: var(--bg);

  color: white;

  line-height: 1.6;

  overflow-x: hidden;

}


a {
  color: inherit;
  text-decoration: none;
}


button {
  font-family: inherit;
}


.container {

  width:
    min(
      1180px,
      calc(100% - 40px)
    );

  margin: auto;

}



/* =====================================================
   CURSOR
===================================================== */

.cursor-glow {

  position: fixed;

  width: 440px;
  height: 440px;

  left: 0;
  top: 0;

  z-index: 9999;

  pointer-events: none;

  border-radius: 50%;

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

  background:
    radial-gradient(
      circle,
      rgba(0,145,255,.055),
      rgba(84,220,40,.018) 40%,
      transparent 70%
    );

  opacity: 0;

}



/* =====================================================
   GRADIENTE TEXTO
===================================================== */

.texto-gradiente {

  background:
    linear-gradient(
      90deg,
      #0797ff,
      #23c6ec 40%,
      #82ef00 90%
    );

  background-size:
    200% auto;

  -webkit-background-clip: text;

  background-clip: text;

  color: transparent;

  animation:
    gradientMove
    10s linear infinite;

}



/* =====================================================
   HEADER
===================================================== */

.topo {

  position: fixed;

  top: 0;
  left: 0;

  width: 100%;

  z-index: 1000;

  background:
    rgba(3,8,14,.76);

  backdrop-filter:
    blur(24px);

  border-bottom:
    1px solid
    rgba(255,255,255,.055);

}


.topo::after {

  content: "";

  position: absolute;

  left: 0;
  right: 0;
  bottom: -1px;

  height: 1px;

  opacity: .22;

  background:
    linear-gradient(
      90deg,
      transparent,
      #078eff,
      #82ef00,
      transparent
    );

}


.topo-scroll {

  background:
    rgba(3,7,12,.96);

  box-shadow:
    0 15px 50px
    rgba(0,0,0,.30);

}


.topo-container {

  height: 82px;

  display: flex;

  align-items: center;

  justify-content:
    space-between;

}



/* MARCA */

.marca {

  display: flex;

  align-items: center;

  gap: 14px;

}


.logo {

  width: 125px;
  height: 62px;

  object-fit: contain;

}


.marca-divisor {

  width: 1px;
  height: 35px;

  background:
    linear-gradient(
      transparent,
      rgba(20,201,255,.55),
      rgba(130,239,0,.45),
      transparent
    );

  box-shadow: 0 0 12px rgba(20,201,255,.12);

}


.marca-slogan {

  position: relative;
  display: inline-block;

  font-size: 9px;
  font-weight: 800;
  line-height: 1.55;
  letter-spacing: 1.9px;

  background: linear-gradient(90deg, #dcecff 0%, #58c8ff 48%, #82ef00 100%);
  background-size: 180% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  filter: drop-shadow(0 0 10px rgba(20,201,255,.10));
  animation: sloganGlow 8s ease-in-out infinite;

}



/* MENU */

.menu {

  display: flex;

  align-items: center;

  gap: 30px;

}


.menu-link {

  position: relative;

  padding:
    28px 0;

  color: #c9d4e2;

  font-size: 14px;

}


.menu-link::after {

  content: "";

  position: absolute;

  bottom: 17px;
  left: 50%;

  width: 0;
  height: 2px;

  transform:
    translateX(-50%);

  background:
    var(--gradient);

  transition:
    width .3s;

}


.menu-link:hover::after,
.menu-link.ativo::after {
  width: 22px;
}



/* =====================================================
   HERO
===================================================== */

.hero {

  min-height: 100vh;

  display: flex;

  align-items: center;

  position: relative;

  overflow: hidden;

  padding:
    125px 0 75px;

  background:

    radial-gradient(
      circle at 78% 30%,
      rgba(0,134,255,.17),
      transparent 30%
    ),

    radial-gradient(
      circle at 90% 75%,
      rgba(125,238,0,.09),
      transparent 30%
    ),

    #04070c;

}


.hero-grid-background {

  position: absolute;

  inset: 0;

  opacity: .19;

  background-image:

    linear-gradient(
      rgba(255,255,255,.04)
      1px,
      transparent 1px
    ),

    linear-gradient(
      90deg,
      rgba(255,255,255,.04)
      1px,
      transparent 1px
    );

  background-size:
    55px 55px;

  mask-image:
    radial-gradient(
      circle at 75% 50%,
      black,
      transparent 55%
    );

}


.hero-orb {

  position: absolute;

  border-radius: 50%;

  filter: blur(90px);

}


.hero-orb-1 {

  width: 320px;
  height: 320px;

  right: 18%;
  top: 20%;

  background:
    rgba(0,140,255,.10);

  animation:
    orbFloat
    14s ease-in-out infinite;

}


.hero-orb-2 {

  width: 280px;
  height: 280px;

  right: -50px;
  bottom: 0;

  background:
    rgba(130,239,0,.055);

  animation:
    orbFloat2
    17s ease-in-out infinite;

}


.hero-container {

  display: grid;

  grid-template-columns:
    .95fr 1.25fr;

  gap: 60px;

  align-items: center;

  position: relative;

  z-index: 2;

}


.hero-tag {

  display: inline-flex;

  align-items: center;

  gap: 9px;

  color: var(--green);

  font-size: 12px;

  font-weight: 700;

  letter-spacing: 1.8px;

}


.hero-tag-dot {

  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: var(--green);

  animation:
    statusPulse
    2.8s infinite;

}


.hero h1 {

  margin:
    18px 0 26px;

  font-size:
    clamp(
      50px,
      5.5vw,
      76px
    );

  letter-spacing:
    -3.5px;

  line-height: 1.01;

}


.hero h1 span {

  background:
    linear-gradient(
      90deg,
      #008cff,
      #1eb5e8,
      #82ef00
    );

  background-size:
    220% auto;

  -webkit-background-clip: text;

  background-clip: text;

  color: transparent;

  animation:
    gradientMove
    10s linear infinite;

}


.hero-texto p {

  max-width: 600px;

  color: #b1bfce;

  font-size: 17px;

}


.botoes {

  display: flex;

  gap: 13px;

  margin-top: 30px;

}



/* BOTÕES */

.botao-principal {

  min-height: 52px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 10px;

  padding:
    0 23px;

  border-radius: 13px;

  background:
    var(--gradient);

  background-size:
    180% 100%;

  color: white;

  font-weight: 700;

  animation:
    buttonGradient
    8s ease infinite;

  transition:
    transform .3s,
    box-shadow .3s;

}


.botao-principal:hover {

  transform:
    translateY(-3px);

  box-shadow:
    0 18px 45px
    rgba(77,222,35,.20);

}


.botao-secundario {

  min-height: 52px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  padding:
    0 23px;

  border:
    1px solid
    rgba(255,255,255,.15);

  border-radius: 13px;

  background:
    rgba(255,255,255,.015);

  color: white;

}


.botao-secundario:hover {

  color: var(--green);

  border-color:
    rgba(130,239,0,.60);

}



/* BENEFÍCIOS */

.hero-beneficios {

  margin-top: 25px;

  display: flex;

  flex-wrap: wrap;

  gap: 17px;

  color: #778a9f;

  font-size: 11px;

}


.hero-beneficios div {

  display: flex;

  align-items: center;

  gap: 6px;

}


.hero-beneficios i {
  color: var(--green);
}



/* =====================================================
   DASHBOARD HOME
===================================================== */

.hero-painel {

  perspective:
    1200px;

  transition:
    transform .18s ease-out;

}


.painel-premium {

  position: relative;

  overflow: hidden;

  padding: 19px;

  border-radius: 24px;

  background:

    radial-gradient(
      circle at 80% 5%,
      rgba(0,139,255,.08),
      transparent 30%
    ),

    linear-gradient(
      145deg,
      rgba(14,30,49,.97),
      rgba(5,15,26,.98)
    );

  border:
    1px solid
    rgba(138,190,230,.16);

  box-shadow:
    0 35px 100px
    rgba(0,0,0,.50);

  animation:
    dashboardFloat
    9s ease-in-out infinite;

}


/* BORDA LUMINOSA */

.painel-premium::after {

  content: "";

  position: absolute;

  inset: 0;

  padding: 1px;

  border-radius: inherit;

  pointer-events: none;

  background:
    linear-gradient(
      115deg,
      transparent 15%,
      rgba(0,153,255,.55),
      transparent 34%,
      transparent 65%,
      rgba(130,239,0,.40),
      transparent 85%
    );

  background-size:
    220% 220%;

  animation:
    borderTravel
    8s linear infinite;

  mask:
    linear-gradient(#fff 0 0)
    content-box,
    linear-gradient(#fff 0 0);

  mask-composite:
    exclude;

}


/* GLOW */

.painel-glow {

  position: absolute;

  width: 250px;
  height: 250px;

  right: -120px;
  top: -120px;

  border-radius: 50%;

  background:
    rgba(0,145,255,.10);

  filter: blur(60px);

}


/* PONTOS DIGITAIS */

.painel-dots {

  position: absolute;

  right: 0;
  bottom: 0;

  width: 58%;
  height: 50%;

  opacity: .12;

  pointer-events: none;

  background-image:
    radial-gradient(
      rgba(130,239,0,.8) 1px,
      transparent 1px
    );

  background-size:
    17px 17px;

  mask-image:
    linear-gradient(
      135deg,
      transparent 10%,
      black 75%
    );

}


/* SCAN */

.dashboard-scan {

  position: absolute;

  left: 0;

  width: 100%;
  height: 70px;

  top: -100px;

  z-index: 5;

  opacity: .14;

  pointer-events: none;

  background:
    linear-gradient(
      180deg,
      transparent,
      rgba(0,170,255,.08),
      rgba(130,239,0,.06),
      transparent
    );

  animation:
    dashboardScan
    9s
    3s
    ease-in-out
    infinite;

}



/* HEADER PAINEL */

.painel-header {

  position: relative;

  z-index: 10;

  display: flex;

  justify-content:
    space-between;

  align-items: center;

  margin-bottom: 17px;

}


.painel-header > div:first-child {

  display: flex;

  flex-direction: column;

}


.painel-mini-tag {

  color: #63809c;

  font-size: 8px;

  font-weight: 700;

  letter-spacing: 1px;

}


.painel-header strong {
  font-size: 14px;
}


.dados-atualizados {

  display: flex;

  align-items: center;

  gap: 7px;

  padding:
    6px 10px;

  border-radius: 100px;

  background:
    rgba(130,239,0,.06);

  color: #8ca0b3;

  font-size: 9px;

}


.dados-atualizados span {

  width: 7px;
  height: 7px;

  border-radius: 50%;

  background:
    var(--green);

  animation:
    statusPulse
    2.8s infinite;

}



/* =====================================================
   KPIs HOME
===================================================== */

.cards {

  position: relative;

  z-index: 10;

  display: grid;

  grid-template-columns:
    repeat(3,1fr);

  gap: 10px;

}


.kpi-card {

  min-height: 142px;

  position: relative;

  overflow: hidden;

  padding:
    14px 14px 14px 17px;

  border-radius: 14px;

  background:
    linear-gradient(
      145deg,
      rgba(17,35,55,.84),
      rgba(12,27,44,.84)
    );

  border:
    1px solid
    rgba(255,255,255,.055);

  transition:
    transform .18s ease-out,
    border-color .3s,
    box-shadow .3s;

}


.kpi-card:hover {

  border-color:
    rgba(49,187,255,.25);

  box-shadow:
    0 16px 35px
    rgba(0,0,0,.18);

}


/* BORDA COLORIDA */

.kpi-card::before {

  content: "";

  position: absolute;

  left: 0;
  top: 12px;
  bottom: 12px;

  width: 3px;

  border-radius:
    0 5px 5px 0;

}


.kpi-home-1::before {

  background:
    #159cff;

  box-shadow:
    0 0 15px
    rgba(21,156,255,.35);

}


.kpi-home-2::before {

  background:
    #32d39a;

  box-shadow:
    0 0 15px
    rgba(50,211,154,.30);

}


.kpi-home-3::before {

  background:
    var(--green);

  box-shadow:
    0 0 15px
    rgba(130,239,0,.30);

}


.kpi-card-topo {

  display: flex;

  justify-content:
    space-between;

  align-items: center;

  margin-bottom: 13px;

}


.kpi-icone {

  width: 30px;
  height: 30px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 9px;

  color: var(--green);

  background:
    rgba(130,239,0,.08);

}


.kpi-icone.azul {

  color: #24aaff;

  background:
    rgba(0,145,255,.08);

}


.kpi-variacao {

  padding:
    4px 7px;

  border-radius: 7px;

  font-size: 8px;

}


.kpi-variacao.positiva {

  color:
    var(--green);

  background:
    rgba(87,222,40,.08);

}


.kpi-card small {

  display: block;

  color: #7890a8;

  font-size: 8px;

}


.kpi-card strong {

  display: block;

  margin-top: 3px;

  font-size: 18px;

}


.sparkline {

  position: absolute;

  left: 17px;
  right: 14px;
  bottom: 9px;

  height: 24px;

  display: flex;

  align-items: flex-end;

  gap: 3px;

}


.sparkline span {

  flex: 1;

  transform-origin:
    bottom;

  border-radius:
    3px 3px 0 0;

  background:
    linear-gradient(
      180deg,
      #35b9ff,
      #58df28
    );

  animation:
    sparkGrow
    2.6s
    ease
    backwards;

}



/* =====================================================
   GRÁFICOS HOME
===================================================== */

.dashboard-graficos {

  position: relative;

  z-index: 10;

  display: grid;

  grid-template-columns:
    1.55fr .7fr;

  gap: 10px;

  margin-top: 10px;

}


.grafico-principal,
.grafico-donut-card {

  padding: 15px;

  border-radius: 15px;

  background:
    rgba(7,20,34,.80);

  border:
    1px solid
    rgba(255,255,255,.045);

}


.grafico-header {

  display: flex;

  justify-content:
    space-between;

  align-items: center;

}


.grafico-header > div:first-child {

  display: flex;

  flex-direction: column;

}


.grafico-header strong {
  font-size: 11px;
}


.grafico-header small {

  color: #667c92;

  font-size: 8px;

}


.grafico-legenda {

  display: flex;

  align-items: center;

  gap: 6px;

  color: #71869b;

  font-size: 8px;

}


.grafico-legenda span {

  width: 7px;
  height: 7px;

  border-radius: 50%;

  background:
    var(--green);

}


.grafico-area {

  height: 190px;

  position: relative;

  overflow: hidden;

  margin-top: 12px;

}


.linha-horizontal {

  position: absolute;

  left: 0;
  right: 0;

  height: 1px;

  background:
    rgba(255,255,255,.04);

}


.linha-h1 {top:30%;}
.linha-h2 {top:55%;}
.linha-h3 {top:80%;}


.barras-modernas {

  position: absolute;

  inset:
    10px 5px 0;

  display: flex;

  align-items: flex-end;

}


.barra-mes {

  flex: 1;

  height: 100%;

  display: flex;

  flex-direction: column;

  justify-content: flex-end;

  align-items: center;

  gap: 6px;

}


.barra-mes small {

  color: #586e84;

  font-size: 7px;

}


.barra-premium {

  width: 52%;

  height: 0;

  border-radius:
    6px 6px 2px 2px;

  background:
    linear-gradient(
      180deg,
      rgba(35,171,255,.65),
      rgba(0,119,220,.11)
    );

}


.hero-painel.visible
.barra-premium {

  animation:
    barGrow
    3.5s
    cubic-bezier(.16,1,.3,1)
    forwards;

}


.barra-mes:nth-child(2)
.barra-premium {
  animation-delay:.25s;
}

.barra-mes:nth-child(3)
.barra-premium {
  animation-delay:.50s;
}

.barra-mes:nth-child(4)
.barra-premium {
  animation-delay:.75s;
}

.barra-mes:nth-child(5)
.barra-premium {
  animation-delay:1s;
}

.barra-mes:nth-child(6)
.barra-premium {
  animation-delay:1.25s;
}


.barra-premium.destaque {

  background:
    linear-gradient(
      180deg,
      #82ef00,
      rgba(64,183,40,.20)
    );

}


/* LINHA */

.linha-grafico {

  position: absolute;

  inset:
    5px 0 22px;

  width: 100%;

  height:
    calc(100% - 27px);

  pointer-events: none;

}


.linha-path {

  stroke-dasharray:
    800;

  stroke-dashoffset:
    800;

}


.hero-painel.visible
.linha-path {

  animation:
    drawLine
    4.5s
    .9s
    ease
    forwards;

}


.linha-grafico circle {

  fill: #081523;

  stroke: #51d943;

  stroke-width: 3;

  opacity: 0;

}


.hero-painel.visible
.linha-grafico circle {

  animation:
    pointShow
    .7s ease
    forwards;

}


.hero-painel.visible
.linha-grafico circle:nth-of-type(1) {
  animation-delay:1.5s;
}

.hero-painel.visible
.linha-grafico circle:nth-of-type(2) {
  animation-delay:2.2s;
}

.hero-painel.visible
.linha-grafico circle:nth-of-type(3) {
  animation-delay:2.9s;
}

.hero-painel.visible
.linha-grafico circle:nth-of-type(4) {
  animation-delay:3.6s;
}

.hero-painel.visible
.linha-grafico circle:nth-of-type(5) {
  animation-delay:4.3s;
}



/* ÚLTIMO PONTO */

.ponto-atual {

  transform-origin:
    470px 24px;

}


.hero-painel.visible
.ponto-atual {

  animation:
    pointShow .7s 4.3s ease forwards,
    currentPointPulse 2.2s 5.1s ease-in-out infinite !important;

}



/* DONUT */

.donut-wrapper {

  display: flex;

  justify-content: center;

  margin-top: 18px;

}


.donut {

  width: 108px;
  height: 108px;

  position: relative;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 50%;

  background:
    conic-gradient(
      #0a91ff 0% 42%,
      #82ef00 42% 73%,
      #27425d 73% 100%
    );

  animation:
    donutEnter
    3.4s
    .8s
    cubic-bezier(.16,1,.3,1)
    backwards,

    donutBreathe
    5s
    5s
    ease-in-out
    infinite;

}


.donut::before {

  content: "";

  position: absolute;

  inset: 18px;

  border-radius: 50%;

  background: #081522;

}


.donut-centro {

  position: relative;

  z-index: 2;

  text-align: center;

}


.donut-centro strong {

  display: block;

  font-size: 15px;

}


.donut-centro small {

  color: #657b90;

  font-size: 7px;

}


.donut-legendas {

  display: grid;

  gap: 5px;

  margin-top: 14px;

}


.donut-legendas div {

  display: grid;

  grid-template-columns:
    8px 1fr auto;

  align-items: center;

  gap: 6px;

  color: #70869b;

  font-size: 8px;

}


.donut-legendas strong {
  color: white;
}


.lg {

  width: 6px;
  height: 6px;

  border-radius: 50%;

}


.lg1 {background:#0a91ff;}
.lg2 {background:#82ef00;}
.lg3 {background:#27425d;}



/* =====================================================
   SEÇÕES
===================================================== */

.secao {

  position: relative;

  overflow: hidden;

  padding:
    105px 0;

}


.secao h2 {

  max-width: 850px;

  margin-top: 11px;

  font-size: 45px;

  line-height: 1.1;

  letter-spacing: -2px;

}


.descricao {

  max-width: 760px;

  margin-top: 19px;

  color: #697b8e;

  font-size: 16px;

}


.section-tag {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  color: #319ad9;

  font-size: 11px;

  font-weight: 700;

  letter-spacing: 1.4px;

}


.section-tag i {
  color: var(--green);
}


.section-tag.dark {
  color: #8bb0c9;
}


.section-decoration {

  position: absolute;

  width: 500px;
  height: 500px;

  border-radius: 50%;

  filter:
    blur(130px);

}


.decor-blue {

  right: -280px;
  top: 10%;

  background:
    rgba(0,145,255,.08);

}


.decor-green {

  right: -300px;
  bottom: -100px;

  background:
    rgba(130,239,0,.045);

}



/* =====================================================
   REVEAL
===================================================== */

.reveal {

  opacity: 0;

  transform:
    translateY(30px);

  transition:
    opacity 1s
    cubic-bezier(.16,1,.3,1),

    transform 1s
    cubic-bezier(.16,1,.3,1);

}


.reveal.visible {

  opacity: 1;

  transform:
    translateY(0);

}



/* =====================================================
   FLUXO DE DADOS
===================================================== */

.dados-fluxo {

  color: #0d1e32;

  background:

    radial-gradient(
      circle at 50% 55%,
      rgba(0,142,255,.07),
      transparent 35%
    ),

    linear-gradient(
      180deg,
      #f8fafc,
      #f2f6fa
    );

}


.center-dados {

  max-width: 820px;

  margin: auto;

  text-align: center;

}


.center-dados .descricao {

  margin-left: auto;

  margin-right: auto;

}


.fluxo-dados {

  display: grid;

  grid-template-columns:
    1fr 100px
    255px 100px
    1fr;

  align-items: center;

  gap: 12px;

  margin-top: 65px;

}


.origens,
.resultados-fluxo {

  display: flex;

  flex-direction: column;

  gap: 11px;

}


.origem,
.resultado-fluxo {

  min-height: 60px;

  display: flex;

  align-items: center;

  gap: 13px;

  padding:
    12px 15px;

  border-radius: 14px;

  background:
    rgba(255,255,255,.86);

  border:
    1px solid
    rgba(163,179,196,.27);

  box-shadow:
    0 15px 35px
    rgba(22,42,64,.045);

  transition: .3s;

}


.origem:hover,
.resultado-fluxo:hover {

  transform:
    translateX(5px);

  border-color:
    rgba(0,145,255,.30);

}


.origem-icone,
.resultado-icon {

  flex:
    0 0 36px;

  width: 36px;
  height: 36px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 10px;

  color: #248ed0;

  background:
    linear-gradient(
      145deg,
      #eaf5ff,
      #edf8e5
    );

}


.origem-icone.excel,
.origem-icone.sheets {
  color: #2eaa50;
}


.origem > span {

  color: #23374d;

  font-size: 14px;

  font-weight: 700;

}


.resultado-fluxo strong {

  display: block;

  color: #172f48;

  font-size: 15px;

}


.resultado-fluxo span {

  display: block;

  color: #8190a1;

  font-size: 11px;

}



/* LINHAS */

.conexao {

  height: 225px;

  display: flex;

  flex-direction: column;

  justify-content:
    space-around;

}


.linha {

  width: 100%;

  height: 2px;

  position: relative;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(0,145,255,.75),
      rgba(130,239,0,.85)
    );

}


.saida-conexao .linha {

  background:
    linear-gradient(
      90deg,
      rgba(130,239,0,.85),
      rgba(0,145,255,.75),
      transparent
    );

}


.particula {

  position: absolute;

  left: 0;
  top: 50%;

  width: 10px;
  height: 10px;

  border-radius: 50%;

  transform:
    translateY(-50%);

  background: white;

  box-shadow:

    0 0 7px white,

    0 0 17px
    rgba(130,239,0,.95),

    0 0 28px
    rgba(0,145,255,.55);

  animation:
    viajarDados
    3.8s
    linear
    infinite;

}


.linha2 .particula {
  animation-delay:1.2s;
}


.linha3 .particula {
  animation-delay:2.4s;
}



/* NÚCLEO */

.nucleo-visualdash {

  width: 255px;
  height: 255px;

  position: relative;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 50%;

  color: white;

  background:
    radial-gradient(
      circle at 35% 25%,
      #12304a,
      #071421 65%
    );

  box-shadow:
    0 30px 65px
    rgba(16,43,70,.20);

  animation:
    coreFloat
    7s ease-in-out infinite;

}


.nucleo-ring {

  position: absolute;

  border-radius: 50%;

  border:
    1px solid
    rgba(0,144,255,.12);

}


.ring-1 {

  inset: -12px;

  animation:
    ringRotate
    18s linear infinite;

}


.ring-2 {

  inset: -25px;

  border-style: dashed;

  border-color:
    rgba(111,226,35,.11);

  animation:
    ringRotateReverse
    23s linear infinite;

}


.ring-3 {

  inset: -40px;

  border:
    1px dotted
    rgba(0,145,255,.08);

  animation:
    ringPulse
    5s ease-in-out infinite;

}


.nucleo-brilho {

  position: absolute;

  width: 160px;
  height: 160px;

  border-radius: 50%;

  background:
    linear-gradient(
      135deg,
      rgba(0,145,255,.35),
      rgba(130,239,0,.23)
    );

  filter:
    blur(45px);

  animation:
    pulsoNucleo
    4s infinite alternate;

}


.nucleo-conteudo {

  position: relative;

  z-index: 2;

  text-align: center;

}


.core-icon {

  width: 42px;
  height: 42px;

  margin:
    0 auto 13px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 13px;

  color: #63d72f;

  background:
    linear-gradient(
      145deg,
      rgba(0,145,255,.14),
      rgba(130,239,0,.12)
    );

}


.nucleo-conteudo strong {

  display: block;

  font-size: 25px;

}


.nucleo-conteudo strong span {
  color: var(--green);
}


.nucleo-conteudo small {

  display: block;

  margin-top: 7px;

  color: #71879c;

  font-size: 7px;

  letter-spacing: 1.4px;

}



/* MENSAGEM */

.mensagem-fluxo {

  max-width: 720px;

  margin:
    58px auto 0;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 17px;

  padding: 22px;

  border-radius: 18px;

  background:
    linear-gradient(
      120deg,
      #071525,
      #0a2130
    );

}


.mensagem-icon {

  width: 43px;
  height: 43px;

  flex:
    0 0 43px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 12px;

  color: var(--green);

  background:
    linear-gradient(
      135deg,
      rgba(0,145,255,.16),
      rgba(130,239,0,.16)
    );

}


.mensagem-fluxo strong {

  display: block;

  font-size: 16px;

}


.mensagem-fluxo span {

  color: #8296a9;

  font-size: 12px;

}



/* =====================================================
   SOLUÇÕES
===================================================== */

.solucoes {

  background:

    radial-gradient(
      circle at 85% 50%,
      rgba(0,145,255,.07),
      transparent 27%
    ),

    linear-gradient(
      180deg,
      #050c15,
      #071421
    );

}


.solucoes .descricao {
  color: #8496aa;
}


.solucoes-grid {

  display: grid;

  grid-template-columns:
    repeat(3,1fr);

  gap: 20px;

  margin-top: 47px;

}


.solucao {

  min-height: 280px;

  position: relative;

  overflow: hidden;

  padding: 28px;

  border-radius: 21px;

  background:
    linear-gradient(
      145deg,
      rgba(15,31,49,.75),
      rgba(8,20,34,.88)
    );

  border:
    1px solid
    rgba(255,255,255,.07);

}


.destaque-solucao {

  background:

    radial-gradient(
      circle at 100% 0%,
      rgba(130,239,0,.08),
      transparent 35%
    ),

    linear-gradient(
      145deg,
      rgba(14,33,50,.87),
      rgba(8,21,33,.9)
    );

}


.solucao-number {

  position: absolute;

  right: 24px;
  top: 20px;

  color:
    rgba(255,255,255,.055);

  font-size: 43px;

  font-weight: 800;

}


.icone-solucao {

  width: 53px;
  height: 53px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 15px;

  font-size: 20px;

  transition:
    transform .4s;

}


.solucao:hover
.icone-solucao {

  transform:
    translateY(-4px)
    rotate(-6deg)
    scale(1.08);

}


.icone-solucao.azul {

  color: #25b3ff;

  background:
    rgba(0,145,255,.12);

}


.icone-solucao.verde {

  color: var(--green);

  background:
    rgba(130,239,0,.10);

}


.icone-solucao.gradiente {

  color: white;

  background:
    linear-gradient(
      135deg,
      rgba(0,145,255,.80),
      rgba(112,225,20,.76)
    );

}


.solucao h3 {

  margin-top: 22px;

  font-size: 21px;

}


.solucao p {

  margin-top: 10px;

  color: #92a3b5;

  font-size: 13px;

  line-height: 1.7;

}


.solucao-link {

  position: absolute;

  left: 28px;
  bottom: 25px;

  display: flex;

  align-items: center;

  gap: 9px;

  color: #5f7891;

  font-size: 11px;

  font-weight: 700;

}



/* =====================================================
   ÁREAS
===================================================== */

.areas {

  color: #102035;

  background:

    radial-gradient(
      circle at 85% 45%,
      rgba(0,145,255,.08),
      transparent 30%
    ),

    #f6f8fb;

}


.areas-menu {

  display: flex;

  flex-wrap: wrap;

  gap: 9px;

  margin-top: 39px;

}


.area-btn {

  display: flex;

  align-items: center;

  gap: 7px;

  padding:
    10px 16px;

  border:
    1px solid
    #dce4eb;

  border-radius: 100px;

  background: white;

  color: #405369;

  font-size: 12px;

  font-weight: 700;

  cursor: pointer;

  transition: .25s;

}


.area-btn:hover {

  transform:
    translateY(-3px);

}


.area-btn.ativo {

  color: white;

  border-color: transparent;

  background:
    linear-gradient(
      90deg,
      #078eff,
      #57d934,
      #83ee00
    );

  box-shadow:
    0 10px 25px
    rgba(40,171,109,.16);

}


.area-btn.ativo i {
  color: white;
}



/* PAINEL */

.area-painel {

  margin-top: 26px;

  display: grid;

  grid-template-columns:
    .85fr 1.15fr;

  gap: 32px;

  padding: 35px;

  border-radius: 25px;

  background:
    rgba(255,255,255,.91);

  border:
    1px solid
    #e1e8ef;

  box-shadow:
    0 25px 65px
    rgba(18,42,67,.07);

}


.area-conteudo {

  display: flex;

  flex-direction: column;

  justify-content: center;

}


.area-tag {

  display: inline-flex;

  width: fit-content;

  padding:
    7px 12px;

  border-radius: 7px;

  color: #17953a;

  background:
    linear-gradient(
      90deg,
      rgba(59,205,92,.10),
      rgba(7,142,255,.07)
    );

  border:
    1px solid
    rgba(53,180,74,.12);

  font-size: 12px;

  font-weight: 800;

  letter-spacing: 1.5px;

}


.area-conteudo h3 {

  max-width: 470px;

  margin-top: 15px;

  color: #10243a;

  font-size: 33px;

  line-height: 1.15;

}


.area-conteudo p {

  max-width: 500px;

  margin-top: 16px;

  color: #697b8e;

  font-size: 14px;

}


.area-indicadores {

  margin-top: 25px;

  display: flex;

  flex-wrap: wrap;

  gap: 9px;

}


.area-indicadores span {

  padding:
    8px 12px;

  border-radius: 9px;

  border:
    1px solid
    rgba(27,121,189,.10);

  color: #40536a;

  font-size: 10px;

  font-weight: 700;

  background:
    linear-gradient(
      135deg,
      rgba(7,142,255,.075),
      rgba(130,239,0,.055)
    );

}


.area-indicadores span:nth-child(2n) {

  background:
    linear-gradient(
      135deg,
      rgba(130,239,0,.08),
      rgba(14,170,255,.045)
    );

}



/* DASHBOARD ÁREA */

.area-dashboard {

  min-height: 390px;

  position: relative;

  overflow: hidden;

  padding: 21px;

  border-radius: 20px;

  color: white;

  background:

    radial-gradient(
      circle at 100% 0%,
      rgba(0,145,255,.10),
      transparent 35%
    ),

    linear-gradient(
      145deg,
      #08182a,
      #050f1c
    );

  border:
    1px solid
    rgba(255,255,255,.05);

}


.area-dashboard-glow {

  position: absolute;

  width: 220px;
  height: 220px;

  right: -130px;
  bottom: -130px;

  border-radius: 50%;

  filter: blur(55px);

  background:
    rgba(130,239,0,.08);

}


.area-dashboard-topo {

  position: relative;

  z-index: 2;

  display: flex;

  align-items: center;

  justify-content:
    space-between;

  color: #71869b;

  font-size: 9px;

}


.area-dashboard-topo div {

  display: flex;

  align-items: center;

  gap: 6px;

}


.area-dashboard-topo span {

  padding:
    5px 10px;

  border-radius: 7px;

  color: var(--green);

  background:
    rgba(130,239,0,.07);

  font-size: 10px;

  font-weight: 700;

}



/* KPI ÁREA */

.area-kpis {

  position: relative;

  z-index: 2;

  display: grid;

  grid-template-columns:
    repeat(3,1fr);

  gap: 9px;

  margin-top: 19px;

}


.area-kpi {

  position: relative;

  overflow: hidden;

  padding:
    14px 14px 14px 17px;

  border-radius: 11px;

  border:
    1px solid
    rgba(255,255,255,.05);

}


.area-kpi::before {

  content: "";

  position: absolute;

  left: 0;
  top: 10px;
  bottom: 10px;

  width: 3px;

  border-radius:
    0 5px 5px 0;

}


.area-kpi-1 {

  background:
    linear-gradient(
      145deg,
      rgba(10,49,78,.90),
      rgba(12,27,44,.94)
    );

}


.area-kpi-1::before {
  background:#15a8ff;
}


.area-kpi-2 {

  background:
    linear-gradient(
      145deg,
      rgba(21,60,64,.90),
      rgba(12,27,44,.94)
    );

}


.area-kpi-2::before {
  background:#36d38c;
}


.area-kpi-3 {

  background:
    linear-gradient(
      145deg,
      rgba(39,68,35,.86),
      rgba(12,27,44,.94)
    );

}


.area-kpi-3::before {
  background:#82ef00;
}


.area-kpi small {

  color: #91a3b5;

  font-size: 8px;

}


.area-kpi strong {

  display: block;

  margin-top: 6px;

  font-size: 20px;

}


.area-kpi span {

  display: block;

  margin-top: 3px;

  color: var(--green);

  font-size: 9px;

}


.area-grafico {

  position: relative;

  z-index: 2;

  height: 210px;

  margin-top: 12px;

  padding: 15px;

  border-radius: 13px;

  background:
    rgba(7,20,34,.82);

  border:
    1px solid
    rgba(255,255,255,.04);

}


.area-grafico-titulo {

  color: #8194a8;

  font-size: 9px;

}


.area-chart {

  height: 160px;

  display: flex;

  align-items: flex-end;

  gap: 11px;

  padding-top: 22px;

}


.area-chart span {

  flex: 1;

  border-radius:
    5px 5px 0 0;

  background:
    linear-gradient(
      180deg,
      #1ea8ff,
      #40c986 55%,
      #72df20
    );

  transition:
    height 1.15s
    cubic-bezier(.16,1,.3,1);

}



/* =====================================================
   CONTATO
===================================================== */

.contato {

  position: relative;

  overflow: hidden;

  padding:
    110px 0;

  background:

    radial-gradient(
      circle at 85% 45%,
      rgba(130,239,0,.10),
      transparent 30%
    ),

    radial-gradient(
      circle at 10% 80%,
      rgba(0,145,255,.09),
      transparent 30%
    ),

    #06111e;

}


.contato-box {

  display: grid;

  grid-template-columns:
    1.3fr .7fr;

  gap: 65px;

  align-items: center;

  padding: 42px;

  border-radius: 26px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.035),
      rgba(255,255,255,.015)
    );

  border:
    1px solid
    rgba(255,255,255,.07);

}


.contato h2 {

  max-width: 670px;

  margin-top: 12px;

  font-size: 43px;

  line-height: 1.1;

}


.contato p {

  max-width: 630px;

  margin-top: 17px;

  color: #90a2b5;

  font-size: 14px;

}


.contato-botao {
  margin-top: 26px;
}


.contato-informacoes {

  display: flex;

  flex-direction: column;

  gap: 12px;

}


.contato-item {

  display: flex;

  align-items: center;

  gap: 14px;

  padding: 14px;

  border-radius: 13px;

  background:
    rgba(255,255,255,.025);

  border:
    1px solid
    rgba(255,255,255,.05);

  transition: .3s;

}


.contato-item:hover {

  transform:
    translateX(6px);

}


.contato-icone {

  width: 40px;
  height: 40px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 11px;

  color: #69dc24;

  background:
    linear-gradient(
      145deg,
      rgba(0,145,255,.13),
      rgba(130,239,0,.10)
    );

}


.contato-item small {

  display: block;

  color: #657b91;

  font-size: 8px;

}


.contato-item strong,
.contato-item a {

  color: white;

  font-size: 13px;

}



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

footer {

  background: #02060a;

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

}


.rodape-profissional {

  min-height: 105px;

  display: flex;

  align-items: center;

  justify-content:
    space-between;

  gap: 30px;

}


.rodape-marca strong span {
  color: var(--green);
}


.rodape-marca small {

  display: block;

  color: #546578;

  font-size: 7px;

  letter-spacing: 1.5px;

}


.rodape-links {

  display: flex;

  gap: 23px;

}


.rodape-links a {

  color: #708195;

  font-size: 11px;

}


.rodape-links a:hover {
  color: var(--green);
}


.rodape-copy {

  color: #526172;

  font-size: 10px;

}



/* =====================================================
   WHATSAPP
===================================================== */

.whatsapp-flutuante {

  position: fixed;

  right: 23px;
  bottom: 23px;

  z-index: 2000;

  display: flex;

  align-items: center;

  gap: 9px;

  padding:
    10px 16px
    10px 10px;

  border-radius: 100px;

  color: white;

  background:
    linear-gradient(
      90deg,
      #1595ff,
      #32c469,
      #74e900
    );

  background-size:
    180%;

  font-size: 12px;

  font-weight: 700;

  animation:
    buttonGradient
    8s ease infinite;

}


.whatsapp-simbolo {

  width: 30px;
  height: 30px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 50%;

  background:
    rgba(255,255,255,.16);

  font-size: 17px;

}


.whatsapp-pulse {

  position: absolute;

  left: 10px;

  width: 30px;
  height: 30px;

  border-radius: 50%;

  border:
    1px solid
    rgba(255,255,255,.45);

  animation:
    whatsappPulse
    3s infinite;

}



/* =====================================================
   ANIMAÇÕES
===================================================== */

@keyframes barGrow {

  from {
    height:0;
  }

  to {
    height:var(--altura);
  }

}


@keyframes drawLine {

  to {
    stroke-dashoffset:0;
  }

}


@keyframes pointShow {

  from {
    opacity:0;
  }

  to {
    opacity:1;
  }

}


@keyframes currentPointPulse {

  0%,
  100% {

    stroke-width:3;

    filter:
      drop-shadow(
        0 0 0
        rgba(130,239,0,0)
      );

  }

  50% {

    stroke-width:5;

    filter:
      drop-shadow(
        0 0 8px
        rgba(130,239,0,.85)
      );

  }

}


@keyframes donutEnter {

  from {

    opacity:0;

    transform:
      rotate(-120deg)
      scale(.5);

  }

  to {

    opacity:1;

    transform:
      rotate(0)
      scale(1);

  }

}


@keyframes donutBreathe {

  0%,
  100% {

    transform:
      scale(1);

  }

  50% {

    transform:
      scale(1.025);

  }

}


@keyframes sparkGrow {

  from {

    transform:
      scaleY(0);

  }

  to {

    transform:
      scaleY(1);

  }

}


@keyframes dashboardScan {

  0% {

    top:-100px;

  }

  40%,
  100% {

    top:
      calc(100% + 100px);

  }

}


@keyframes borderTravel {

  from {

    background-position:
      0% 0%;

  }

  to {

    background-position:
      220% 220%;

  }

}


@keyframes viajarDados {

  0% {

    left:0;

    opacity:0;

  }

  10% {
    opacity:1;
  }

  88% {
    opacity:1;
  }

  100% {

    left:
      calc(100% - 10px);

    opacity:0;

  }

}


@keyframes gradientMove {

  0% {

    background-position:
      0 center;

  }

  100% {

    background-position:
      200% center;

  }

}


@keyframes buttonGradient {

  0%,
  100% {

    background-position:
      0% 50%;

  }

  50% {

    background-position:
      100% 50%;

  }

}


@keyframes dashboardFloat {

  0%,
  100% {

    transform:
      translateY(0);

  }

  50% {

    transform:
      translateY(-5px);

  }

}


@keyframes coreFloat {

  0%,
  100% {

    transform:
      translateY(0);

  }

  50% {

    transform:
      translateY(-6px);

  }

}


@keyframes ringRotate {

  to {
    transform:
      rotate(360deg);
  }

}


@keyframes ringRotateReverse {

  to {
    transform:
      rotate(-360deg);
  }

}


@keyframes ringPulse {

  50% {

    transform:
      scale(1.05);

  }

}


@keyframes pulsoNucleo {

  from {

    transform:
      scale(.85);

  }

  to {

    transform:
      scale(1.15);

  }

}


@keyframes statusPulse {

  0% {

    box-shadow:
      0 0 0
      0 rgba(130,239,0,.35);

  }

  70% {

    box-shadow:
      0 0 0
      7px rgba(130,239,0,0);

  }

}


@keyframes orbFloat {

  50% {

    transform:
      translate(-45px,30px);

  }

}


@keyframes orbFloat2 {

  50% {

    transform:
      translate(-65px,-35px);

  }

}


@keyframes whatsappPulse {

  from {

    transform:
      scale(1);

    opacity:.8;

  }

  to {

    transform:
      scale(2.1);

    opacity:0;

  }

}





/* AJUSTES FINAIS — HEADER / CONTATO */
.menu {
  margin-left: auto;
}

.contato-informacoes {
  position: relative;
}

.contato-informacoes::before {
  content: "CANAIS OFICIAIS";
  display: block;
  margin: 0 0 4px 3px;
  color: #6f859a;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 1.7px;
}

.contato-item {
  min-height: 72px;
  background:
    linear-gradient(135deg, rgba(7,142,255,.045), rgba(130,239,0,.035)),
    rgba(255,255,255,.018);
}

.contato-item:hover {
  border-color: rgba(20,201,255,.18);
  box-shadow: 0 14px 34px rgba(0,0,0,.16);
}

@keyframes sloganGlow {
  0%, 100% {
    background-position: 0% 50%;
    opacity: .88;
  }
  50% {
    background-position: 100% 50%;
    opacity: 1;
  }
}


/* =====================================================
   RESPONSIVO
===================================================== */

@media
(max-width:1050px) {

  .hero-container {

    grid-template-columns:
      1fr;

  }


  .area-painel {

    grid-template-columns:
      1fr;

  }

}



@media
(max-width:900px) {

  .cursor-glow {
    display:none;
  }


  .marca-divisor,
  .marca-slogan {
    display:none;
  }


  .menu-link {
    display:none;
  }


  .fluxo-dados {

    grid-template-columns:
      1fr;

    gap:24px;

  }


  .conexao {

    width:90px;

    height:75px;

    margin:auto;

    transform:
      rotate(90deg);

  }


  .nucleo-visualdash {
    margin:auto;
  }


  .solucoes-grid {

    grid-template-columns:
      1fr;

  }


  .contato-box {

    grid-template-columns:
      1fr;

  }


  .dashboard-graficos {

    grid-template-columns:
      1fr;

  }

}



@media
(max-width:600px) {

  .container {

    width:
      calc(100% - 24px);

  }


  .logo {
    width:105px;
  }


  .topo-container {
    height:70px;
  }


  .hero {
    padding-top:105px;
  }


  .hero h1 {
    font-size:48px;
  }


  .botoes {
    flex-direction:column;
  }


  .botao-principal,
  .botao-secundario {
    width:100%;
  }


  .cards {

    grid-template-columns:
      1fr;

  }


  .secao h2 {
    font-size:34px;
  }


  .area-painel {
    padding:20px;
  }


  .area-kpis {

    grid-template-columns:
      1fr;

  }


  .contato-box {
    padding:24px;
  }


  .rodape-profissional {

    padding:
      30px 0;

    flex-direction:
      column;

    text-align:center;

  }


  .whatsapp-flutuante {

    width:54px;
    height:54px;

    padding:0;

    justify-content:center;

  }


  .whatsapp-texto {
    display:none;
  }

}


/* =====================================================
   MOBILE PREMIUM — AJUSTES FINOS FINAIS
   Mantém desktop intacto
===================================================== */

@media (max-width: 600px) {

  /* HEADER — logo + slogan no mobile */
  .topo-container {
    height: 72px;
  }

  .marca {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
  }

  .logo {
    width: 92px;
    height: 46px;
    flex: 0 0 auto;
  }

  .marca-divisor {
    display: block;
    width: 1px;
    height: 30px;
    flex: 0 0 1px;
    opacity: .78;
  }

  .marca-slogan {
    display: inline-block;
    font-size: 7px;
    line-height: 1.5;
    letter-spacing: 1.3px;
    white-space: nowrap;
    opacity: .95;
  }

  /* HOME — aproxima benefícios do dashboard */
  .hero-container {
    gap: 30px;
  }

  .hero-beneficios {
    margin-top: 17px;
  }

  .hero-painel {
    margin-top: -4px;
  }

  /* NÚCLEO VISUAL DASH — mais compacto no celular */
  .nucleo-visualdash {
    width: 185px;
    height: 185px;
  }

  .ring-1 {
    inset: -9px;
  }

  .ring-2 {
    inset: -18px;
  }

  .ring-3 {
    display: none;
  }

  .nucleo-brilho {
    width: 125px;
    height: 125px;
  }

  .core-icon {
    width: 36px;
    height: 36px;
    margin-bottom: 10px;
    border-radius: 11px;
    font-size: 14px;
  }

  .nucleo-conteudo strong {
    font-size: 19px;
  }

  .nucleo-conteudo small {
    margin-top: 5px;
    font-size: 6px;
    letter-spacing: 1px;
  }

  /* CARDS DE SOLUÇÕES — mais compactos */
  .solucoes-grid {
    gap: 12px;
  }

  .solucao {
    min-height: 205px;
    padding: 20px;
  }

  .icone-solucao {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    font-size: 18px;
  }

  .solucao-number {
    top: 16px;
    right: 18px;
    font-size: 36px;
  }

  .solucao h3 {
    margin-top: 15px;
    font-size: 18px;
  }

  .solucao p {
    margin-top: 8px;
    font-size: 11.5px;
    line-height: 1.6;
  }

  .solucao-link {
    left: 20px;
    bottom: 17px;
    font-size: 10px;
  }

  /* leve redução de espaçamento geral */
  .secao {
    padding: 68px 0;
  }

  .fluxo-dados {
    margin-top: 32px;
  }

  .mensagem-fluxo {
    margin-top: 32px;
  }

  /* mantém botão WhatsApp discreto */
  .whatsapp-flutuante {
    right: 14px;
    bottom: 16px;
  }
}


/* Celulares bem estreitos: slogan menor, sem quebrar header */
@media (max-width: 380px) {

  .logo {
    width: 84px;
  }

  .marca {
    gap: 7px;
  }

  .marca-divisor {
    height: 26px;
  }

  .marca-slogan {
    font-size: 6px;
    letter-spacing: 1px;
  }

  .nucleo-visualdash {
    width: 170px;
    height: 170px;
  }

  .solucao {
    min-height: 195px;
  }
}


/* =====================================================
   AJUSTE FINAL — SLOGAN SOMENTE AO LADO DO LOGO
===================================================== */

/* Remove a repetição do slogan na abertura da Home */
.hero-tag {
  display: none !important;
}

/* Mantém o slogan institucional somente junto da marca */
.marca-slogan {
  display: inline-block;
}

/* MOBILE — logo + slogan lado a lado */
@media (max-width: 600px) {

  .topo-container {
    height: 72px;
  }

  .marca {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
  }

  .logo {
    width: 90px;
    height: 46px;
    flex: 0 0 auto;
  }

  .marca-divisor {
    display: block !important;
    width: 1px;
    height: 29px;
    flex: 0 0 1px;
    opacity: .78;
  }

  .marca-slogan {
    display: inline-block !important;
    margin: 0;
    font-size: 7px;
    line-height: 1.5;
    letter-spacing: 1.25px;
    white-space: nowrap;
    opacity: .96;
  }

  /* Como o hero-tag foi removido, aproxima o título */
  .hero h1 {
    margin-top: 0;
  }
}

@media (max-width: 380px) {

  .logo {
    width: 82px;
  }

  .marca {
    gap: 7px;
  }

  .marca-divisor {
    height: 26px;
  }

  .marca-slogan {
    font-size: 6px;
    letter-spacing: .95px;
  }
}