/* ============ Viagem Bem — base ============ */
:root{
  --navy:#0B2846;
  --tinta:#1B2A3D;
  --suave:#5A6B80;
  --linha:#E1E7EF;
  --fundo:#F7F9FC;
  --acao:#1DA851;
  --acao-esc:#179044;
  --azul:#1668E3;
  --branco:#FFFFFF;
  --raio:8px;
  --largura:1240px;
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--branco); color:var(--tinta);
  font-family:'Plus Jakarta Sans','Helvetica Neue',Arial,sans-serif;
  -webkit-font-smoothing:antialiased; line-height:1.5;
}
img{ max-width:100%; }
a{ color:var(--azul); text-decoration:none; }
a:hover{ color:var(--navy); text-decoration:underline; }
h1,h2,h3{ margin:0; letter-spacing:-.02em; }
svg{ width:1em; height:1em; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
button{ font:inherit; color:inherit; cursor:pointer; }
:focus-visible{ outline:3px solid #7FB2FF; outline-offset:2px; }

.pular{
  position:absolute; left:-9999px; top:0; z-index:99;
  background:var(--branco); color:var(--navy); padding:12px 18px; border-radius:0 0 var(--raio) 0;
}
.pular:focus{ left:0; }

/* ============ botões ============ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:44px; padding:0 18px; border:0; border-radius:6px;
  font-size:14px; font-weight:700; text-decoration:none; white-space:nowrap;
}
.btn:hover{ text-decoration:none; }
.btn svg{ width:18px; height:18px; }
.btn-zap{ background:var(--acao); color:#fff; }
.btn-zap:hover{ background:var(--acao-esc); color:#fff; }
.btn-zap svg{ fill:currentColor; stroke:none; }
.btn-grande{ height:52px; padding:0 26px; font-size:16px; border-radius:var(--raio); }
.btn-grande svg{ width:22px; height:22px; }

/* ============ topo escuro ============ */
.topo{ position:relative; background:var(--navy); overflow:hidden; }
.topo-foto{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 46%;
}
.topo > *:not(.topo-foto){ position:relative; }

.aviso{
  display:flex; justify-content:center; align-items:center; gap:12px; flex-wrap:wrap;
  padding:9px 20px; border-bottom:1px solid rgba(255,255,255,.1);
  font-size:13px; color:#DCE6F2; text-shadow:0 1px 8px rgba(4,16,32,.85);
}
.aviso-sep{ color:#3C577A; }
.aviso-fone{ font-weight:700; color:#fff; }
.aviso-fone:hover{ color:#fff; }

.cabecalho{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  max-width:var(--largura); margin:0 auto; padding:18px 20px;
}
.marca{ display:flex; align-items:center; gap:11px; }
.marca:hover{ text-decoration:none; }
.marca-placa{
  display:flex; align-items:center; justify-content:center;
  width:50px; height:40px; padding:4px; background:#fff; border-radius:var(--raio);
}
.marca-placa img{ max-height:100%; object-fit:contain; }
.marca-nome{ font-size:20px; font-weight:800; letter-spacing:-.02em; color:#fff; }

.menu{ display:flex; align-items:center; gap:26px; font-size:14px; font-weight:600; }
.menu > a:not(.btn){ color:#fff; text-shadow:0 1px 8px rgba(4,16,32,.85); }

.abas-faixa{ max-width:var(--largura); margin:0 auto; padding:10px 20px 0; }
.abas{ display:flex; gap:8px; }
.aba{
  display:inline-flex; align-items:center; gap:8px; height:38px; padding:0 16px;
  background:rgba(8,28,50,.55); color:#FFFFFF;
  border:1px solid rgba(255,255,255,.45); border-radius:999px;
  text-shadow:0 1px 6px rgba(4,16,32,.7); backdrop-filter:blur(2px);
  font-size:13px; font-weight:700;
}
.aba svg{ width:15px; height:15px; }
.aba.ativa{ background:#fff; color:var(--navy); border-color:#fff; text-shadow:none; }

.heroi{ max-width:var(--largura); margin:0 auto; padding:34px 20px 44px; }
.heroi h1{
  max-width:20ch; font-size:46px; font-weight:800; line-height:1.08; color:#fff;
  text-shadow:0 2px 20px rgba(4,16,32,.8),0 1px 3px rgba(4,16,32,.55);
  text-wrap:balance;
}
.heroi-sub{
  margin:10px 0 24px; max-width:60ch; font-size:17px; color:#FFFFFF;
  text-shadow:0 1px 3px rgba(4,16,32,.9),0 2px 18px rgba(4,16,32,.95);
}

/* ============ busca ============ */
.busca{
  display:flex; align-items:stretch; gap:0; padding:6px;
  background:#fff; border-radius:var(--raio); box-shadow:0 12px 30px -12px rgba(4,20,38,.55);
}
.campo{
  display:flex; flex-direction:column; justify-content:center; gap:2px;
  flex:1 1 0; min-width:0; padding:8px 14px;
}
.campo-borda{ border-left:1px solid var(--linha); }
.campo-data,.campo-pax{ flex:0 0 auto; }
.campo-rot{
  font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--suave);
}
.campo select,.campo input[type="date"]{
  width:100%; height:26px; padding:0; border:0; background:transparent;
  font:inherit; font-size:15px; font-weight:600; color:var(--tinta);
  appearance:none; -webkit-appearance:none;
}
.campo select{
  padding-right:20px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235A6B80' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right center;
}
.inverter{
  align-self:center; flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; background:#F2F5F9; border:1px solid var(--linha);
  border-radius:999px; color:var(--navy);
}
.inverter svg{ width:17px; height:17px; }
.inverter:hover{ background:#E8EEF6; }
.pax{ display:flex; align-items:center; gap:4px; }
.pax button{
  width:32px; height:30px; background:#F2F5F9; border:1px solid var(--linha);
  border-radius:6px; font-size:17px; line-height:1; color:var(--navy);
}
.pax button:hover{ background:#E8EEF6; }
.pax span{ min-width:22px; text-align:center; font-size:15px; font-weight:700; }
.btn-buscar{
  flex:0 0 auto; align-self:stretch; height:auto; min-height:60px; padding:0 28px;
  background:var(--azul); color:#fff; font-size:16px; border-radius:6px;
}
.btn-buscar:hover{ background:#1257c4; }

.selos{ display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; }
.selo{
  display:inline-flex; align-items:center; gap:8px; padding:8px 14px;
  background:rgba(8,28,50,.6); border:1px solid rgba(255,255,255,.4);
  border-radius:999px; font-size:13px; font-weight:600; color:#FFFFFF;
  text-shadow:0 1px 6px rgba(4,16,32,.7); backdrop-filter:blur(2px);
}
.selo svg{ width:15px; height:15px; flex:0 0 auto; }

.previa{
  margin-top:22px; max-width:620px; padding:14px 16px;
  background:rgba(8,28,50,.62); border:1px solid rgba(255,255,255,.28);
  border-radius:var(--raio); backdrop-filter:blur(3px);
}
.previa-rot{
  display:block; font-size:11px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:#C9D8EA;
}
.balao{
  margin:8px 0 12px; padding:12px 14px; background:#DCF8C6; color:#0B2846;
  border-radius:10px 10px 10px 2px; font-size:15px;
}

/* ============ faixa de valor ============ */
.valor{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px;
  max-width:var(--largura); margin:0 auto; padding:26px 20px;
  border-bottom:1px solid var(--linha);
}
.valor-item{ display:flex; gap:12px; align-items:flex-start; font-size:15px; color:var(--suave); }
.valor-item svg{ width:22px; height:22px; flex:0 0 auto; color:var(--acao); }

/* ============ seções ============ */
.secao{ max-width:var(--largura); margin:0 auto; padding:48px 20px; }
.secao-clara{ max-width:none; padding-left:0; padding-right:0; background:var(--fundo); }
.secao-interna{ max-width:var(--largura); margin:0 auto; padding:0 20px; }
.secao h2{ font-size:26px; font-weight:800; }
.secao-sub{ margin:6px 0 22px; font-size:15px; color:var(--suave); }
.nota{ margin:14px 0 0; font-size:12px; color:#8493A6; }

.viacoes{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:12px; }
.viacao{
  display:flex; align-items:center; justify-content:center; height:68px; padding:12px;
  background:#fff; border:1px solid var(--linha); border-radius:var(--raio);
}
.viacao img{ max-height:40px; object-fit:contain; }

.rotas{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; }
.rota{
  display:block; background:#fff; border:1px solid var(--linha); border-radius:10px;
  overflow:hidden; color:inherit; transition:box-shadow .2s,transform .2s;
}
.rota:hover{ text-decoration:none; color:inherit; box-shadow:0 14px 28px -16px rgba(4,20,38,.5); transform:translateY(-2px); }
.rota img{ display:block; width:100%; height:128px; object-fit:cover; }
.rota-corpo{ display:flex; flex-direction:column; gap:10px; padding:16px 18px 18px; }
.rota-trecho{ display:flex; flex-direction:column; gap:3px; font-size:16px; font-weight:700; }
.rota-para{ display:flex; align-items:center; gap:7px; }
.rota-para svg{ width:14px; height:14px; flex:0 0 auto; color:var(--azul); stroke-width:2.6; }
.rota-preco{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  padding-top:10px; border-top:1px solid #EDF1F6; font-size:13px; color:var(--suave);
}
.rota-preco strong{ font-size:18px; font-weight:800; color:var(--navy); }

.passos{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin:0; padding:0; list-style:none; }
.passos li{
  padding:24px; background:#fff; border:1px solid var(--linha); border-radius:10px;
}
.passo-n{
  display:flex; align-items:center; justify-content:center; width:34px; height:34px;
  margin-bottom:14px; background:#E8F5EE; border-radius:999px;
  font-size:15px; font-weight:800; color:var(--acao);
}
.passos h3,.motivo h3{ font-size:18px; font-weight:700; margin-bottom:6px; }
.passos p,.motivo p{ margin:0; font-size:15px; color:var(--suave); }

.motivos{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; }
.motivo{ padding:24px; background:var(--fundo); border:1px solid var(--linha); border-radius:10px; }
.motivo > svg{ width:26px; height:26px; margin-bottom:12px; color:var(--acao); }

.depoimentos{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.depoimento{
  display:flex; flex-direction:column; gap:14px; margin:0; padding:24px;
  background:#fff; border:1px solid var(--linha); border-radius:10px;
}
.estrelas{ color:#E8A317; font-size:15px; letter-spacing:2px; }
.estrelas::before{ content:"★★★★★"; }
.depoimento blockquote{ margin:0; font-size:15px; }
.depoimento figcaption{
  margin-top:auto; padding-top:10px; border-top:1px solid var(--linha);
  font-size:13px; color:var(--suave);
}

.faq details{ border-top:1px solid var(--linha); }
.faq details:last-child{ border-bottom:1px solid var(--linha); }
.faq summary{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:18px 2px; font-size:17px; font-weight:700; cursor:pointer; list-style:none;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"+"; flex:0 0 auto; font-size:22px; font-weight:400; color:var(--acao);
  transition:transform .2s;
}
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq details p{ margin:0; padding:0 40px 20px 2px; font-size:15px; color:var(--suave); }

.chamada{
  display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap;
  max-width:var(--largura); margin:24px auto 56px; padding:40px;
  background:var(--navy); border-radius:12px;
}
.chamada h2{ font-size:28px; font-weight:800; color:#fff; }
.chamada p{ margin:8px 0 0; font-size:16px; color:#C3D2E3; }

.rodape{ background:#08203A; color:#C3D2E3; font-size:14px; }
.rodape-grade{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:28px;
  max-width:var(--largura); margin:0 auto; padding:44px 20px 28px;
}
.rodape-grade > div{ display:flex; flex-direction:column; gap:8px; }
.rodape-marca{ font-size:19px; font-weight:800; color:#fff; }
.rodape-grade p{ margin:0; color:#93A8C2; }
.rodape-rot{ font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#7690AE; }
.rodape a{ color:#C3D2E3; }
.rodape a:hover{ color:#fff; }
.rodape-fim{
  max-width:var(--largura); margin:0 auto; padding:16px 20px 36px;
  border-top:1px solid rgba(255,255,255,.1); font-size:13px; color:#6E88A6;
}

.zap-flutuante{
  position:fixed; right:18px; bottom:18px; z-index:50;
  display:flex; align-items:center; justify-content:center; width:56px; height:56px;
  background:var(--acao); color:#fff; border-radius:999px;
  box-shadow:0 10px 26px -8px rgba(4,20,38,.6);
}
.zap-flutuante:hover{ background:var(--acao-esc); color:#fff; }
.zap-flutuante svg{ width:28px; height:28px; fill:currentColor; stroke:none; }

/* ============ telas médias ============ */
@media (max-width:1080px){
  .viacoes{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  .rotas{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .motivos{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:900px){
  .busca{ flex-wrap:wrap; }
  .campo{ flex:1 1 46%; }
  .campo-borda{ border-left:0; }
  .inverter{ order:9; }
  .btn-buscar{ flex:1 1 100%; min-height:52px; }
  .passos,.depoimentos{ grid-template-columns:1fr; }
  .valor{ grid-template-columns:1fr; gap:14px; }
  .chamada{ padding:32px 24px; }
}

/* ============ celular ============ */
@media (max-width:640px){
  .aviso{ font-size:12px; gap:8px; padding:8px 16px; }
  .aviso-sep{ display:none; }
  .cabecalho{ padding:14px 16px; }
  .menu > a:not(.btn){ display:none; }
  .marca-nome{ font-size:18px; }
  .marca-placa{ width:46px; height:36px; }
  .btn-txt{ display:none; }
  .btn-zap{ width:46px; padding:0; }

  .abas-faixa{ padding:8px 16px 0; }
  .heroi{ padding:20px 16px 30px; }
  .heroi h1{ font-size:32px; }
  .heroi-sub{ font-size:15px; margin-bottom:18px; }

  .busca{ flex-direction:column; padding:12px; gap:10px; }
  .campo{
    flex:none; width:100%; padding:8px 12px;
    background:var(--fundo); border:1px solid var(--linha); border-radius:var(--raio);
  }
  .campo select{ height:28px; }
  .inverter{ order:0; align-self:center; }
  .btn-buscar{ width:100%; min-height:50px; }

  .secao{ padding:34px 16px; }
  .secao-clara{ padding-left:0; padding-right:0; }
  .secao-interna{ padding:0 16px; }
  .secao h2{ font-size:22px; }
  .chamada{ margin:16px 16px 40px; padding:26px 20px; }
  .chamada h2{ font-size:23px; }
  .chamada .btn-grande{ width:100%; }

  .viacoes{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .rotas{ grid-template-columns:1fr; }
  .motivos{ grid-template-columns:1fr; }
  .rodape-grade{ grid-template-columns:1fr 1fr; padding:32px 16px 24px; }
  .rodape-fim{ padding:16px 16px 30px; }
  .zap-flutuante{ width:52px; height:52px; right:14px; bottom:14px; }
}

/* ---- campo de cidade com sugestões ---- */
.campo-cidade{ position:relative; }
.cidade{
  width:100%; height:26px; padding:0; border:0; background:transparent;
  font:inherit; font-size:15px; font-weight:600; color:var(--tinta);
}
.cidade::placeholder{ color:#9AA9BC; font-weight:500; }
.sugestoes{
  position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:60;
  max-height:280px; overflow-y:auto; margin:0; padding:6px; list-style:none;
  background:#fff; border:1px solid var(--linha); border-radius:var(--raio);
  box-shadow:0 18px 40px -14px rgba(4,20,38,.45);
}
.sugestoes[hidden]{ display:none; }
.sugestoes li{
  padding:10px 12px; border-radius:6px; font-size:15px; font-weight:600; cursor:pointer;
}
.sugestoes li:hover,.sugestoes li.marcada{ background:#EEF4FC; }
.sugestoes .vazio{ color:var(--suave); font-weight:500; cursor:default; }
.sugestoes .vazio:hover{ background:transparent; }

/* ================================================================
   MARCA — monograma VB da logo + nome em duas cores.
   Cores tiradas do próprio arquivo: azul #142339, dourado #C28714.
   A placa clara existe porque o azul da logo é quase o mesmo do
   cabeçalho: sem ela, "VIAGEM" desapareceria no fundo.
   ================================================================ */
:root{
  --marca-azul:#142339;
  --marca-ouro:#C28714;
  --marca-ouro-claro:#E0B24A;
}

/* ---- a marca inteira vira uma placa clara ---- */
.marca{
  gap:14px; padding:9px 22px 9px 13px;
  background:#FFFFFF; border-radius:14px;
  box-shadow:0 0 0 2px rgba(194,135,20,.55), 0 12px 28px -12px rgba(4,20,38,.75);
}
.marca-placa{
  width:auto; height:46px; padding:0; background:transparent;
  border-radius:0; box-shadow:none;
}
.marca-placa img{ height:100%; width:auto; max-height:none; }

/* ---- nome em duas cores, como o VB ---- */
.marca-txt{ display:flex; flex-direction:column; gap:3px; }
.marca-nome{
  font-family:'Jost','Century Gothic','Futura',sans-serif;
  font-size:24px; font-weight:600; line-height:1;
  letter-spacing:.17em; text-transform:uppercase; text-shadow:none;
}
.marca-nome .mv{ color:var(--marca-azul); }
.marca-nome .mb{ color:var(--marca-ouro); }
.marca-sub{
  display:flex; align-items:center; gap:8px;
  font-family:'Jost','Century Gothic','Futura',sans-serif;
  font-size:9.5px; font-weight:500; line-height:1;
  letter-spacing:.26em; text-transform:uppercase;
  color:var(--marca-ouro); text-shadow:none;
}
.marca-sub::before,.marca-sub::after{
  content:""; flex:1 1 auto; height:1px; min-width:8px;
  background:linear-gradient(90deg,transparent,rgba(194,135,20,.75),transparent);
}

/* ---- dourado como acento no topo ---- */
.aviso-fone{ color:var(--marca-ouro-claro); }
.aviso-fone:hover{ color:#F2CE7E; }
.menu > a:not(.btn){ transition:color .15s; }
.menu > a:not(.btn):hover{ color:var(--marca-ouro-claro); text-decoration:none; }
.aba.ativa{ box-shadow:0 0 0 2px rgba(224,178,74,.7); }

/* ---- rodapé: mesma assinatura, invertida para o fundo escuro ---- */
.rodape-marca{
  font-family:'Jost','Century Gothic','Futura',sans-serif;
  font-size:21px; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
}
.rodape-marca .mb{ color:var(--marca-ouro-claro); }

/* ---- celular ---- */
@media (max-width:640px){
  .marca{ gap:10px; padding:7px 14px 7px 10px; border-radius:11px; }
  .marca-placa{ height:36px; }
  .marca-nome{ font-size:17px; letter-spacing:.13em; }
  .marca-sub{ font-size:8.5px; letter-spacing:.2em; }
  .marca-sub::before,.marca-sub::after{ display:none; }
}