/* ═══════════ SAFEBOAT · identidade baseada na ID visual NAVALCARE ═══════════
   Azul institucional Pantone 654C  #23304A · Preto #231F20 · Branco #FFFFFF
   Sem cor de acento: o destaque é feito por peso, contraste e espaço —
   fiel à ID NAVALCARE, que usa apenas azul, preto e branco.                   */

:root {
  --navy: #23304A;
  --navy-escuro: #1A2438;
  --navy-noite: #0B1220;
  --tinta: #231F20;
  --branco: #FFFFFF;
  --neblina: #F4F6F9;
  --linha: rgba(35, 48, 74, 0.14);
  --linha-clara: rgba(255, 255, 255, 0.16);
  --acento: #FFFFFF;
  /* Sobre fundo claro o branco não contrasta: ali o acento é o próprio navy */
  --acento-claro: #23304A;
  --cinza-texto: #55607A;
  --fonte-titulo: "Josefin Sans", sans-serif;
  --fonte-corpo: "Poppins", sans-serif;
}

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

html { scroll-behavior: smooth; scroll-padding-top: 102px; }

body {
  font-family: var(--fonte-corpo);
  font-weight: 300;
  color: var(--tinta);
  background: var(--branco);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

.contentor { max-width: 1180px; margin: 0 auto; padding: 0 32px; }

h1, h2, h3 { font-family: var(--fonte-titulo); font-weight: 300; line-height: 1.25; }

/* ─── Olho de seção (eyebrow) ─── */
.olho {
  font-family: var(--fonte-titulo);
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--navy);
  opacity: 0.75;
  margin-bottom: 18px;
}
.olho-claro { color: var(--acento); opacity: 1; }

.etiqueta {
  display: inline-block;
  font-family: var(--fonte-corpo);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--navy);
  border: 1px solid currentColor;
  border-radius: 99px;
  padding: 2px 10px 1px;
  vertical-align: middle;
  margin-left: 8px;
}
.etiqueta-cheia { color: var(--navy-noite); background: var(--acento); border-color: var(--acento); }
.etiqueta-disponivel { color: var(--navy-noite); background: var(--acento); border-color: var(--acento); }
.etiqueta-breve { color: var(--navy); margin: 0 0 22px; }

/* ═══════════ HEADER ═══════════ */
header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  background: rgba(35, 48, 74, 0.97);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  transition: background 0.3s;
}
/* O cabeçalho é mais largo que o corpo do site para o menu caber inteiro */
header .contentor { max-width: 1520px; }
.barra { display: flex; align-items: center; justify-content: space-between; height: 90px; gap: 24px; }
.marca { flex-shrink: 0; display: flex; align-items: center; }
.marca img { height: 46px; width: auto; flex-shrink: 0; }

nav { display: flex; gap: 24px; }
nav a {
  font-family: var(--fonte-titulo);
  font-size: 0.82rem;
  font-weight: 300;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  white-space: nowrap;
  padding: 6px 0 3px;
  border-bottom: 1px solid transparent;
  transition: color 0.25s, border-color 0.25s;
}
nav a:hover { color: var(--acento); border-color: var(--acento); }
/* Scrollspy: o capítulo visível fica marcado na barra */
nav a.ativo { color: var(--acento); border-color: var(--acento); font-weight: 400; }

.barra-acoes { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }

.botao {
  display: inline-block;
  font-family: var(--fonte-titulo);
  font-size: 0.82rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 12px 26px 10px;
  border-radius: 99px;
  transition: all 0.25s;
}
.botao-contorno { color: var(--branco); border: 1px solid rgba(255, 255, 255, 0.55); }
.botao-contorno:hover { background: var(--branco); color: var(--navy); border-color: var(--branco); }
.botao-claro { background: var(--branco); color: var(--navy); margin-top: 34px; }
.botao-claro:hover { background: transparent; color: var(--branco); box-shadow: inset 0 0 0 1px var(--branco); }
.botao-navy { background: var(--navy); color: var(--branco); }
.botao-navy:hover { background: var(--navy-noite); }

/* Alvo de toque de 44px: é o botão de navegação principal no celular */
#hamburguer {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
#hamburguer span { width: 22px; height: 1.5px; background: var(--branco); transition: 0.3s; }

/* ═══════════ HERO ═══════════ */
.hero {
  position: relative;
  background: linear-gradient(165deg, var(--navy-escuro) 0%, var(--navy) 55%, #2C3B5B 100%);
  color: var(--branco);
  padding: 184px 0 60px;
  overflow: hidden;
}
.hero-ondas { position: absolute; inset: 0 0 auto; opacity: 0.9; pointer-events: none; }
.hero-ondas svg { width: 100%; height: 320px; }

.hero-grade {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 60px;
  align-items: center;
}

.hero h1 {
  font-size: clamp(1.9rem, 3.5vw, 3.1rem);
  font-weight: 300;
  letter-spacing: 0.01em;
  line-height: 1.12;
  margin-bottom: 26px;
}
/* Em tela larga a headline fica nas duas linhas do <br>; abaixo disso
   a segunda linha é longa demais e precisa poder quebrar sozinha. */
@media (min-width: 900px) { .hero h1 { white-space: nowrap; } }
.hero h1 em { font-style: normal; font-weight: 600; color: var(--acento); }

.hero .olho { color: var(--acento); opacity: 1; }

.hero-sub {
  font-size: 1.06rem;
  color: rgba(255, 255, 255, 0.82);
  max-width: 46ch;
  margin-bottom: 26px;
}

/* Linha de prova: o dado real logo abaixo da promessa */
.hero-prova {
  display: inline-block;
  font-size: 0.79rem;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.72);
  padding: 12px 20px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 99px;
  margin-bottom: 34px;
}
.hero-prova strong { color: var(--acento); font-weight: 600; }
.hero-prova .hp { white-space: nowrap; }
.hero-prova .hp-sep { color: rgba(255, 255, 255, 0.3); margin: 0 4px; }

.hero-acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 26px;
  margin-bottom: 30px;
}
.botao-hero { margin-top: 0; font-size: 0.84rem; padding: 15px 28px 13px; letter-spacing: 0.1em; }
.hero-frotas {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--fonte-titulo);
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.25);
  transition: color 0.25s, border-color 0.25s;
}
.hero-frotas:hover { color: var(--acento); box-shadow: inset 0 -1px 0 var(--acento); }
.hero-frotas span { margin-left: 4px; }

.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

.loja {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--branco);
  color: var(--tinta);
  border-radius: 12px;
  padding: 9px 20px 9px 16px;
  text-decoration: none;
  line-height: 1.15;
  transition: transform 0.25s, box-shadow 0.25s;
}
.loja:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.25); }
.loja svg { width: 26px; height: 26px; fill: var(--tinta); }
.loja small { display: block; font-size: 0.62rem; letter-spacing: 0.04em; opacity: 0.7; }
.loja strong { font-size: 0.98rem; font-weight: 600; }

.hero-selo {
  margin-top: 30px;
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

.hero-visual { display: flex; justify-content: center; }
.hero-visual img {
  max-height: 660px;
  width: auto;
  border-radius: 18px;
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.45);
}

/* ═══════════ SEÇÕES ═══════════ */
.secao { padding: 110px 0; }
.secao-neblina { background: var(--neblina); }
.secao-navy { background: var(--navy); color: var(--branco); }
.secao-noite { background: linear-gradient(180deg, var(--navy-escuro) 0%, var(--navy-noite) 100%); color: var(--branco); }

.cabeca { max-width: 640px; margin-bottom: 70px; }
.cabeca h2, .coluna-texto h2 { font-size: clamp(1.7rem, 3vw, 2.5rem); color: inherit; margin-bottom: 20px; }
.cabeca .sub { color: var(--cinza-texto); font-size: 1rem; }
.sub-claro { color: rgba(255, 255, 255, 0.8); font-size: 1rem; }

/* ─── Recursos (O Sistema) ─── */
.grade-recursos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 44px 46px;
}
.recurso h3 { font-size: 1.02rem; font-weight: 400; letter-spacing: 0.04em; margin: 20px 0 10px; }
.recurso p { font-size: 0.88rem; color: var(--cinza-texto); }

.recurso-icone {
  width: 74px;
  height: 74px;
  border: 1px solid var(--linha);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.3s, transform 0.3s;
}
.recurso:hover .recurso-icone { border-color: var(--navy); transform: translateY(-4px); }
.recurso-icone svg {
  width: 40px;
  height: 40px;
  fill: none;
  stroke: var(--navy);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ─── Aplicativo ─── */
.grade-app {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 44px;
  align-items: start;
}
.app-item img {
  max-height: 520px;
  width: auto;
  margin: 0 auto;
}
.app-item figcaption { text-align: center; margin-top: 26px; }
.app-item h3 { font-size: 1.08rem; font-weight: 400; letter-spacing: 0.04em; margin-bottom: 10px; }
.app-item p { font-size: 0.88rem; color: var(--cinza-texto); max-width: 34ch; margin: 0 auto; }

/* ─── Duas colunas (IA · Câmeras) ─── */
.duas-colunas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.coluna-texto h2 { margin-bottom: 22px; }
.foto-arredondada { border-radius: 20px; box-shadow: 0 30px 70px rgba(0, 0, 0, 0.35); }

.lista-check { list-style: none; margin-top: 26px; }
.lista-check li {
  position: relative;
  padding-left: 34px;
  margin-bottom: 14px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.95rem;
}
.lista-check li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 18px;
  height: 18px;
  border: 1px solid var(--acento);
  border-radius: 50%;
}
.lista-check li::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 8px;
  width: 8px;
  height: 5px;
  border-left: 1.5px solid var(--acento);
  border-bottom: 1.5px solid var(--acento);
  transform: rotate(-45deg);
}

/* ─── Monitoramento (lista da proposta) ─── */
.grade-monitora {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 56px;
}
.monitora-grupo h3 {
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--acento);
  padding-bottom: 14px;
  border-bottom: 1px solid var(--linha-clara);
  margin-bottom: 22px;
}
.monitora-grupo .lista-check { margin-top: 0; }
.monitora-grupo .lista-check li { margin-bottom: 12px; font-size: 0.93rem; }
.monitora-obs {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px dashed var(--linha-clara);
  font-size: 0.85rem;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.6);
}

/* ─── Manutenção: o ciclo registra · avisa · alimenta ─── */
.ciclo-grade {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-bottom: 70px;
}
.ciclo {
  border: 1px solid var(--linha);
  border-radius: 18px;
  padding: 38px 36px 34px;
  transition: border-color 0.3s, transform 0.3s;
}
.ciclo:hover { border-color: var(--navy); transform: translateY(-4px); }
.ciclo-num {
  display: block;
  font-family: var(--fonte-titulo);
  font-size: 1.6rem;
  font-weight: 300;
  color: var(--navy);
  opacity: 0.35;
  margin-bottom: 14px;
}
.ciclo h3 {
  font-size: 1.15rem;
  font-weight: 400;
  letter-spacing: 0.03em;
  color: var(--navy);
  margin-bottom: 12px;
}
.ciclo p { font-size: 0.9rem; color: var(--cinza-texto); }

.historico-faixa {
  background: var(--neblina);
  border-radius: 18px;
  padding: 40px 44px;
}
.historico-titulo {
  font-family: var(--fonte-titulo);
  font-size: 1.05rem;
  color: var(--navy);
  margin-bottom: 28px;
}
.historico-itens {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.historico-itens strong {
  display: block;
  font-family: var(--fonte-titulo);
  font-size: 0.82rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 8px;
}
.historico-itens span { font-size: 0.88rem; color: var(--cinza-texto); }

/* ─── Frotas: a conta do dia parado ─── */
.conta-parada {
  border: 1px solid var(--linha);
  border-radius: 18px;
  padding: 44px 40px;
  margin-bottom: 60px;
  background: var(--neblina);
}
.conta-contraste {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 60px;
}
.conta-item { text-align: center; }
.conta-item strong {
  display: block;
  font-family: var(--fonte-titulo);
  font-size: 3rem;
  font-weight: 300;
  line-height: 1.1;
  color: var(--navy);
  margin-bottom: 10px;
}
.conta-item span {
  display: block;
  font-size: 0.94rem;
  color: var(--cinza-texto);
}
.conta-destaque strong { color: #C0392B; }
.conta-seta {
  font-size: 1.7rem;
  color: var(--cinza-texto);
  opacity: 0.4;
}
.conta-memoria {
  max-width: 62ch;
  margin: 34px auto 0;
  padding-top: 24px;
  border-top: 1px solid var(--linha);
  text-align: center;
  font-size: 0.85rem;
  line-height: 1.75;
  color: var(--cinza-texto);
}

.perfis-grade {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-bottom: 70px;
}
.perfil {
  border-top: 2px solid var(--navy);
  padding-top: 24px;
}
.perfil h3 {
  font-size: 1.1rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--navy);
  margin-bottom: 12px;
}
.perfil p { font-size: 0.9rem; color: var(--cinza-texto); }

/* ─── Frotas ─── */
.frota-visuais {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 0;
  margin-bottom: 70px;
}
.frota-laptop { max-width: 68%; position: relative; z-index: 1; }
.frota-tablet { max-width: 44%; margin-left: -14%; margin-bottom: -4%; z-index: 2; }

.grade-kpi {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--linha);
}
.kpi { padding: 34px 24px 0; text-align: center; border-left: 1px solid var(--linha); }
.kpi:first-child { border-left: none; }
.kpi strong {
  display: block;
  font-family: var(--fonte-titulo);
  font-size: 1.7rem;
  font-weight: 300;
  color: var(--navy);
  margin-bottom: 6px;
}
.kpi span { font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cinza-texto); }

/* ─── Seguradoras ─── */
.kpi-seguro { grid-template-columns: repeat(3, 1fr); margin-bottom: 72px; }
.kpi-seguro .kpi { padding-bottom: 34px; }

.seguro-grade {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}
.seguro-bloco {
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: 18px;
  padding: 40px 40px 34px;
}
.seguro-bloco h3 {
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--navy);
  padding-bottom: 16px;
  border-bottom: 1px solid var(--linha);
  margin-bottom: 22px;
}
.lista-marca { list-style: none; }
.lista-marca li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 13px;
  font-size: 0.92rem;
  color: var(--cinza-texto);
}
.lista-marca li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 12px;
  height: 1px;
  background: var(--navy);
  opacity: 0.5;
}

.seguro-convite {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  margin-top: 46px;
  padding: 38px 44px;
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: 18px;
}
.seguro-convite p { font-size: 1rem; color: var(--tinta); max-width: 640px; }
.seguro-convite .botao { flex-shrink: 0; }

.seguro-nota {
  margin-top: 26px;
  font-size: 0.78rem;
  line-height: 1.7;
  color: var(--cinza-texto);
  opacity: 0.8;
}

/* ─── Componentes ─── */
.grade-hw {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
.hw {
  background: var(--navy-noite);
  border: 1px solid var(--linha-clara);
  border-radius: 18px;
  overflow: hidden;
  transition: transform 0.3s, border-color 0.3s;
}
.hw:hover { transform: translateY(-6px); border-color: rgba(255, 255, 255, 0.45); }
.hw img { width: 100%; height: 250px; object-fit: contain; padding: 22px; background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.06) 0%, transparent 70%); }
.hw figcaption { padding: 24px 26px 28px; }
.hw h3 { font-size: 1rem; font-weight: 400; letter-spacing: 0.06em; margin-bottom: 8px; }
.hw p { font-size: 0.84rem; color: rgba(255, 255, 255, 0.65); }

/* ─── Câmeras ─── */
.coluna-visual { display: grid; gap: 22px; }
.camera-cartao {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--linha-clara);
  border-radius: 18px;
  padding: 14px 14px 12px;
  text-align: center;
  transition: border-color 0.3s;
}
.camera-cartao:hover { border-color: rgba(255, 255, 255, 0.42); }
.camera-cartao img {
  width: 100%;
  border-radius: 10px;
  display: block;
}
.camera-cartao svg { width: 100%; max-width: 340px; margin: 0 auto; }
.camera-legenda {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
  margin-top: 12px;
  margin-bottom: 4px;
}
.ponto {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #FF4D5E;
  animation: pulsar 1.6s infinite;
}
@keyframes pulsar {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}

/* ─── Botão Contratar no cabeçalho ─── */
.botao-contratar { background: var(--branco); color: var(--navy); font-weight: 600; white-space: nowrap; }
.botao-contratar:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.3); }
.ct-curto { display: none; }
.hero-frota-linha { margin: -12px 0 26px; }
.hero-frota-linha .hero-frotas { font-size: 0.74rem; opacity: 0.8; }

/* ─── Câmeras: tela real do app ─── */
.camera-app img { max-height: 460px; width: auto; margin: 0 auto; border-radius: 14px; }

/* ─── VIB ─── */
.vib-grade {
  display: grid;
  grid-template-columns: 0.9fr 0.9fr 1.2fr;
  gap: 44px;
  align-items: center;
}
.vib-render { text-align: center; }
.vib-render img { max-height: 300px; width: auto; margin: 0 auto; }
.vib-render figcaption { font-size: 0.78rem; color: var(--cinza-texto); margin-top: 10px; line-height: 1.6; }

.vib-fone {
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
  background: #05070C;
  border-radius: 34px;
  padding: 10px;
  box-shadow: 0 0 0 3px #2A3346, 0 26px 60px rgba(0, 0, 0, 0.35);
}
.vib-fone-tela {
  background: var(--navy-noite);
  border-radius: 26px;
  padding: 22px 18px 18px;
  color: var(--branco);
}
/* Cores da interface real do app (artifact "VIB no App SAFEBOAT") */
.vib-fone-tela { background: #212C49; }
.vib-app-cab span { display: block; font-size: 0.6rem; letter-spacing: 0.16em; color: #98A3BE; }
.vib-app-cab b { font-family: var(--fonte-titulo); font-size: 0.98rem; font-weight: 600; letter-spacing: 0.04em; }

.vib-saude {
  display: flex; align-items: center; gap: 14px;
  margin: 14px 0 12px; padding: 14px;
  border-radius: 14px; background: #2A3554;
}
.vib-ring { position: relative; width: 88px; height: 88px; flex: 0 0 88px; }
.vib-ring svg { width: 100%; height: 100%; }
.vib-ring-val { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.vib-ring-val b { font-size: 1.5rem; line-height: 1; font-weight: 600; }
.vib-ring-val span { font-size: 0.52rem; letter-spacing: 0.1em; text-transform: uppercase; color: #98A3BE; margin-top: 3px; }
.vib-chips { display: flex; flex-wrap: wrap; gap: 6px; align-content: center; }
.vib-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: #323E61; border-radius: 99px; padding: 5px 11px;
  font-size: 0.7rem; white-space: nowrap;
  opacity: 0; transform: translateY(5px); transition: opacity 0.5s, transform 0.5s;
}
.vib-chip.in { opacity: 1; transform: none; }
.vib-chip i { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 7px; }
.fg-ok { background: #ACDD8B; }
.fg-obs { background: #F5A11C; }

.vib-graf { background: #2A3554; border-radius: 14px; padding: 12px 12px 10px; }
.vib-graf-tit { font-size: 0.76rem; font-weight: 500; display: flex; justify-content: space-between; }
.vib-graf-tit span { color: #98A3BE; font-weight: 400; font-size: 0.68rem; }
.vib-graf svg { width: 100%; height: 74px; display: block; margin-top: 6px; }
.vib-graf-leg { font-size: 0.64rem; color: #98A3BE; margin-top: 4px; line-height: 1.5; }

.vib-msg {
  margin-top: 12px; padding: 12px 14px;
  border-radius: 14px 14px 14px 4px; background: #323E61;
  font-size: 0.72rem; line-height: 1.6; color: rgba(255, 255, 255, 0.88);
  opacity: 0; transform: translateY(6px); transition: opacity 0.6s, transform 0.6s;
}
.vib-msg.in { opacity: 1; transform: none; }
.vib-msg b { color: #fff; }
.vib-msg-who { font-size: 0.58rem; letter-spacing: 0.14em; text-transform: uppercase; color: #ACDD8B; font-weight: 600; margin-bottom: 4px; }
.vib-demo-leg { text-align: center; font-size: 0.74rem; color: var(--cinza-texto); margin-top: 12px; }

.vib-texto .lista-marca li { font-size: 0.9rem; }
.vib-conta {
  display: flex; align-items: center; gap: 18px;
  margin: 22px 0 16px; padding: 18px 22px;
  background: var(--neblina); border-radius: 14px;
}
.vib-conta strong { display: block; font-family: var(--fonte-titulo); font-size: 1.45rem; font-weight: 300; color: var(--navy); }
.vib-conta strong small { font-size: 0.8rem; }
.vib-conta span { font-size: 0.72rem; color: var(--cinza-texto); line-height: 1.5; display: block; max-width: 20ch; }
.vib-vs { font-family: var(--fonte-titulo); color: var(--cinza-texto); opacity: 0.6; }
.vib-pioneiro {
  background: var(--navy);
  color: rgba(255, 255, 255, 0.88);
  border-radius: 14px;
  padding: 18px 22px;
  margin-bottom: 22px;
}
.vib-pioneiro-selo {
  display: inline-block;
  font-family: var(--fonte-titulo);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--navy-noite);
  background: var(--branco);
  border-radius: 99px;
  padding: 4px 12px 3px;
  margin-bottom: 10px;
}
.vib-pioneiro p { font-size: 0.86rem; line-height: 1.7; margin: 0; }
.vib-pioneiro strong { color: #fff; }

.vib-cta { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: 6px; }
.vib-espec { color: var(--navy); box-shadow: inset 0 -1px 0 rgba(35, 48, 74, 0.3); }
.vib-espec:hover { color: var(--navy-noite); }

.grade-breve-uma { grid-template-columns: minmax(0, 620px); justify-content: center; }

/* ─── Inovação ─── */
.grade-breve {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}
.breve {
  border: 1px solid var(--linha);
  border-radius: 18px;
  padding: 44px 44px 48px;
  transition: border-color 0.3s, transform 0.3s;
}
.breve:hover { border-color: var(--navy); transform: translateY(-4px); }
.breve-render {
  height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  background: radial-gradient(ellipse 65% 55% at center, var(--neblina) 0%, rgba(244, 246, 249, 0) 75%);
}
.breve-render img { max-height: 280px; width: auto; transition: transform 0.4s; }
.breve:hover .breve-render img { transform: scale(1.04); }
.breve .etiqueta-breve { display: inline-block; }
.breve h3 { font-size: 1.25rem; font-weight: 400; letter-spacing: 0.03em; margin: 22px 0 12px; }
.breve p { font-size: 0.92rem; color: var(--cinza-texto); }

/* ═══════════ RODAPÉ ═══════════ */
.rodape { padding: 100px 0 0; }
.rodape-grade {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 60px;
  padding-bottom: 70px;
}
.rodape-logo { height: 30px; width: auto; margin-bottom: 22px; }
.rodape-marca p { color: rgba(255, 255, 255, 0.7); font-size: 0.94rem; }
.rodape-lojas { display: flex; gap: 14px; margin-top: 30px; flex-wrap: wrap; }

.rodape-contato h3 {
  font-size: 0.82rem;
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--acento);
  margin-bottom: 26px;
}
.rodape-link {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 44px;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  font-size: 1rem;
  margin-bottom: 8px;
  transition: color 0.25s;
}
.rodape-link:hover { color: var(--acento); }
.rodape-link svg { width: 22px; height: 22px; fill: currentColor; }
.rodape-link svg[fill="none"] { fill: none; }

.rodape-base {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  border-top: 1px solid var(--linha-clara);
  padding-top: 26px;
  padding-bottom: 26px;
}
.rodape-base p { font-size: 0.76rem; letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.45); }

/* ═══════════ PÁGINAS DE TEXTO (privacidade · suporte) ═══════════ */
.pagina-texto { padding-top: 170px; }
.pagina-texto .cabeca { max-width: 760px; }
.doc-data { margin-top: 18px; font-size: 0.82rem; color: var(--cinza-texto); opacity: 0.8; }

.doc { max-width: 760px; margin-top: 56px; }
.doc h3 {
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--navy);
  margin: 52px 0 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--linha);
}
.doc h3:first-child { margin-top: 0; }
.doc h4 {
  font-family: var(--fonte-corpo);
  font-size: 0.98rem;
  font-weight: 500;
  color: var(--tinta);
  margin: 30px 0 10px;
}
.doc p { font-size: 0.94rem; margin-bottom: 14px; color: var(--cinza-texto); }
.doc p strong { color: var(--tinta); font-weight: 500; }
.doc a { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
.doc a:hover { opacity: 0.7; }

.doc-lista { list-style: none; margin: 4px 0 18px; }
.doc-lista li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 11px;
  font-size: 0.94rem;
  color: var(--cinza-texto);
}
.doc-lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 12px;
  height: 1px;
  background: var(--navy);
  opacity: 0.5;
}
.doc-lista li strong { color: var(--tinta); font-weight: 500; }

/* ─── Canais de suporte ─── */
.suporte-canais {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 50px;
}
.canal {
  display: block;
  border: 1px solid var(--linha);
  border-radius: 18px;
  padding: 32px 30px;
  text-decoration: none;
  transition: border-color 0.3s, transform 0.3s;
}
a.canal:hover { border-color: var(--navy); transform: translateY(-4px); }
.canal h3 {
  font-family: var(--fonte-titulo);
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--navy);
  opacity: 0.75;
  margin-bottom: 14px;
}
.canal-valor { font-size: 1.12rem; color: var(--tinta); margin-bottom: 10px; }
.canal-obs { font-size: 0.84rem; line-height: 1.65; color: var(--cinza-texto); }

.rodape-mini { color: rgba(255, 255, 255, 0.55); text-decoration: none; }
.rodape-mini:hover { color: var(--acento); }

/* ═══════════ ANIMAÇÃO DE ENTRADA ═══════════ */
.revela {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.revela.visivel { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .vib-chip, .vib-msg { opacity: 1; transform: none; }
  .revela { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ═══════════ RESPONSIVO ═══════════ */
@media (max-width: 1024px) {
  .grade-recursos { grid-template-columns: repeat(2, 1fr); }
  .hero-grade { grid-template-columns: 1fr; }
  .hero-visual img { max-height: 540px; }
  .duas-colunas { grid-template-columns: 1fr; gap: 50px; }
  .grade-hw { grid-template-columns: repeat(2, 1fr); }
  .grade-monitora { grid-template-columns: 1fr; gap: 40px; }
  .vib-grade { grid-template-columns: 1fr 1fr; }
  .vib-texto { grid-column: 1 / -1; }
  .seguro-grade { grid-template-columns: 1fr; }
  .seguro-convite { flex-direction: column; align-items: flex-start; gap: 26px; }
  .perfis-grade { grid-template-columns: 1fr; gap: 34px; }
  .ciclo-grade { grid-template-columns: 1fr; }
  .historico-itens { grid-template-columns: 1fr; gap: 24px; }
  .suporte-canais { grid-template-columns: 1fr; }
  .vib-grade { grid-template-columns: 1fr; gap: 34px; }
  .vib-conta { flex-direction: column; align-items: flex-start; gap: 10px; }
  .camera-app img { max-height: 400px; }
}

/* Cabeçalho: com o logo em 46px, os 8 itens pedem 1290px; com o botão, 1500px.
   O botão sai primeiro, depois o menu aperta, e só então vira hamburguer. */
@media (max-width: 1520px) {
  .barra .botao-contorno { display: none; }
}

@media (max-width: 1300px) {
  nav { gap: 18px; }
  nav a { font-size: 0.76rem; letter-spacing: 0.1em; }
}

/* Abaixo disso os 8 itens não cabem: vira menu hamburguer */
@media (max-width: 1150px) {
  nav {
    position: fixed;
    top: 90px;
    right: 0;
    left: 0;
    flex-direction: column;
    gap: 0;
    background: var(--navy-escuro);
    border-bottom: 1px solid var(--linha-clara);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
  }
  nav.aberto { max-height: 500px; }
  nav a { padding: 18px 32px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
  #hamburguer { display: flex; }
}

@media (max-width: 760px) {
  .secao { padding: 80px 0; }
  /* No celular, textos auxiliares abaixo de 12px ficam ilegíveis */
  .etiqueta { font-size: 0.72rem; padding: 3px 11px 2px; }
  .hero-selo { font-size: 0.8rem; letter-spacing: 0.1em; }
  .loja small { font-size: 0.7rem; }
  nav {
    position: fixed;
    top: 90px;
    right: 0;
    left: 0;
    flex-direction: column;
    gap: 0;
    background: var(--navy-escuro);
    border-bottom: 1px solid var(--linha-clara);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
  }
  nav.aberto { max-height: 500px; }
  nav a { padding: 18px 32px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
  #hamburguer { display: flex; }
  .barra .botao-contorno { display: none; }
  .grade-app { grid-template-columns: 1fr; }
  .app-item img { max-height: 440px; }
  .grade-hw { grid-template-columns: 1fr; }
  .grade-breve { grid-template-columns: 1fr; }
  .breve-render { height: 200px; }
  .breve-render img { max-height: 200px; }
  .grade-kpi { grid-template-columns: repeat(2, 1fr); gap: 20px 0; }
  .kpi:nth-child(3) { border-left: none; }
  /* Cabeçalho compacto: logo menor + rótulo curto no botão, senão o
     conjunto estoura a largura e empurra o hamburguer para fora da tela */
  .marca img { height: 34px; }
  .barra { gap: 12px; }
  .barra-acoes { gap: 8px; }
  .botao-contratar { padding: 10px 14px 8px; font-size: 0.7rem; letter-spacing: 0.08em; }
  .ct-longo { display: none; }
  .ct-curto { display: inline; }

  /* Estatísticas do hero: uma por linha, sem os separadores */
  .hero-prova {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
    border-radius: 16px;
    padding: 14px 18px;
  }
  .hero-prova .hp-sep { display: none; }

  .kpi-seguro { grid-template-columns: 1fr; }
  .ciclo { padding: 30px 26px 26px; }
  .historico-faixa { padding: 30px 26px; }
  .conta-parada { padding: 32px 24px; }
  .conta-contraste { flex-direction: column; gap: 20px; }
  .conta-item strong { font-size: 2.4rem; }
  .conta-seta { transform: rotate(90deg); }
  .kpi-seguro .kpi { border-left: none; padding: 26px 24px; }
  .seguro-bloco { padding: 32px 28px 26px; }
  .seguro-convite { padding: 32px 28px; }
  .frota-visuais { flex-direction: column; align-items: center; }
  .frota-laptop { max-width: 100%; }
  .frota-tablet { max-width: 70%; margin: -10% 0 0; }
  .rodape-grade { grid-template-columns: 1fr; }
  .rodape-base { flex-direction: column; text-align: center; }
}