/* ==================================================================
   O TOPO NOVO — 10/09/2026

   Pedido dele, com o print do site da Baita: "gostei do cabecalho da
   baita, coloca o modelo no nosso site organizado com uma setinha para
   abrir opcoes semelhante ao dele" e "temos redes sociais, icones delas
   em azul da nossa cor, clicou e direcionado".

   Antes eram 7 links soltos numa linha so. Agora sao 4 portas — quem e
   passageiro, quem e motorista, empresas e o Leva — e a setinha abre o
   que tem dentro de cada uma. As redes ficam no fim da linha.

   Arquivo proprio (e nao dentro do estilo.css) porque o estilo.css e
   servido com cache longo: mudanca nele demora a chegar em quem ja
   visitou. Este entra com ?v= na pagina.
   ================================================================== */

.m-grupo{position:relative;display:flex;align-items:center}
.m-abre{
  font:inherit;font-weight:600;font-size:clamp(13.5px,1.05vw,15px);
  color:var(--tinta);background:none;border:0;cursor:pointer;
  display:flex;align-items:center;gap:6px;padding:0 0 2px;
  border-bottom:2px solid transparent;white-space:nowrap;
}
.m-abre svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.m-abre:hover,.m-grupo.aberto .m-abre{color:var(--azul);border-bottom-color:var(--verde)}
.m-grupo.aberto .m-abre svg{transform:rotate(180deg)}
.m-abre:focus-visible,.menu a:focus-visible{outline:3px solid rgba(14,1,101,.35);outline-offset:3px;border-radius:4px}

/* a caixinha que desce */
.m-sub{
  position:absolute;top:calc(100% + 16px);left:-14px;z-index:60;
  min-width:270px;background:#fff;border:1px solid var(--linha);border-radius:12px;
  box-shadow:0 20px 44px -18px rgba(14,1,101,.38);padding:8px;
  display:none;flex-direction:column;gap:2px;
}
/* ponte invisivel: sem ela o mouse "cai" no vao entre o nome e a caixa
   e a caixa fecha antes de chegar nela */
.m-sub::before{content:"";position:absolute;left:0;right:0;top:-18px;height:18px}
.m-grupo.aberto .m-sub{display:flex}
.menu .m-sub a{
  display:block;padding:10px 12px;border-radius:8px;border-bottom:0;white-space:normal;
}
.m-sub a b{display:block;font-weight:700;color:var(--azul);font-size:14.5px;line-height:1.3}
.m-sub a small{display:block;font-weight:500;color:#63617f;font-size:12.5px;line-height:1.35;margin-top:2px}
.menu .m-sub a:hover{background:#f1f2fb;border-bottom-color:transparent}

/* no computador a caixa abre so de passar o mouse, como na Baita */
@media (hover:hover) and (min-width:1241px){
  .m-grupo:hover .m-sub{display:flex}
  .m-grupo:hover .m-abre{color:var(--azul);border-bottom-color:var(--verde)}
  .m-grupo:hover .m-abre svg{transform:rotate(180deg)}
}

/* as redes sociais, no azul da marca */
.m-redes{display:flex;align-items:center;gap:4px;padding-left:clamp(6px,1vw,14px);
  border-left:1px solid var(--linha)}
.menu a.rede{
  width:34px;height:34px;flex:none;border-radius:8px;border-bottom:0;padding:0;
  display:flex;align-items:center;justify-content:center;color:var(--azul);
}
.menu a.rede svg{width:18px;height:18px;fill:currentColor}
.menu a.rede:hover{background:rgba(14,1,101,.08);color:var(--azul)}

/* ---------- BAIXAR O APP EM DOIS TOQUES (10/09) ---------- */
.bx-fundo{position:fixed;inset:0;z-index:200;background:rgba(10,4,60,.62);
  display:flex;align-items:center;justify-content:center;padding:18px}
/* 11/09: "clico e nao acontece nada". O fechar marcava a janela como
   `hidden`, mas o `display:flex` desta classe ganhava da marca e ela
   continuava na tela. O X e o "Agora nao" sempre funcionaram; quem nao
   obedecia era o estilo. Regra de ouro: classe que define display precisa
   dizer o que fazer quando o elemento esta hidden. */
.bx-fundo[hidden]{display:none!important}
.bx-caixa{position:relative;width:100%;max-width:460px;background:#fff;color:var(--tinta);
  border-radius:18px;padding:26px 22px 20px;box-shadow:0 30px 70px -20px rgba(0,0,0,.5)}
.bx-fechar{position:absolute;top:10px;right:12px;width:38px;height:38px;border:0;border-radius:8px;
  background:#f1f2fb;color:var(--azul);font-size:24px;line-height:1;cursor:pointer}
.bx-rot{display:block;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#6b6b85}
.bx-caixa h2{font-size:clamp(22px,5.4vw,27px);font-weight:800;font-style:italic;color:var(--azul);
  margin:6px 0 16px;line-height:1.15}
.bx-opcoes{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.bx-op{border:2px solid #dcdcec;background:#fff;border-radius:12px;padding:18px 12px;cursor:pointer;
  font:inherit;color:var(--azul);text-align:center}
.bx-op b{display:block;font-size:18px;font-weight:800}
.bx-op small{display:block;font-size:12.5px;color:#6b6b85;margin-top:3px}
.bx-op:hover,.bx-op:focus-visible{border-color:var(--azul);background:#f5f5fd;outline:none}
.bx-txt{font-size:15px;line-height:1.5;color:#3a3a55;margin:-6px 0 16px}
.bx-principal{display:block;text-align:center;background:var(--azul);color:#fff;text-decoration:none;
  font-weight:800;font-size:16px;border-radius:12px;padding:16px}
.bx-segundo{display:block;text-align:center;margin-top:10px;border:2px solid var(--azul);color:var(--azul);
  text-decoration:none;font-weight:700;font-size:15px;border-radius:12px;padding:13px}
.bx-nota{font-size:13px;color:#6b6b85;line-height:1.45;margin-top:14px}
.bx-nota a{color:var(--azul);font-weight:700}
.bx-voltar{margin-top:14px;border:0;background:none;color:#6b6b85;font:inherit;font-size:14px;
  font-weight:700;cursor:pointer;padding:6px 0}
/* 11/09: "quando o usuario clicar nesse x ele entra no site". O X ja
   fechava; faltava uma saida com nome, para quem so quer ver o site. */
.bx-agora-nao{display:block;width:100%;margin-top:14px;border:0;background:none;color:#6b6b85;
  font:inherit;font-size:14.5px;font-weight:700;cursor:pointer;padding:12px 0;text-decoration:underline}
.bx-agora-nao:hover,.bx-agora-nao:focus-visible{color:var(--azul);outline:none}
@media (max-width:360px){.bx-opcoes{grid-template-columns:1fr}}
/* no celular o X fica maior: dedo erra mais que mouse */
@media (max-width:560px){.bx-fechar{width:46px;height:46px;font-size:28px;top:8px;right:8px}}

/* a miniatura da pagina de teste da Google (10/09) */
.bx-guia{margin:-4px 0 14px}
.bx-guia-rot{display:block;font-size:13px;font-weight:800;color:var(--azul);margin-bottom:8px}
.bx-mock{border:1.5px solid #dcdcec;border-radius:12px;background:#f8f8fc;padding:12px 12px 10px;
  display:grid;gap:9px;font-family:Roboto,Arial,sans-serif}
.bx-mock-topo{display:flex;align-items:center;gap:6px;font-size:12.5px;color:#5f6368;font-weight:700}
.bx-mock-topo i{width:13px;height:13px;border-radius:2px;
  background:conic-gradient(#00a173 0 25%,#ffba00 0 50%,#ff3a44 0 75%,#0080ff 0)}
.bx-mock-app{display:flex;align-items:center;gap:8px;font-size:14px;color:#202124}
.bx-mock-ic{width:26px;height:26px;border-radius:7px;background:var(--azul)}
.bx-mock-linha{display:flex;align-items:center;gap:8px;font-size:13px;color:#3c4043}
.bx-mock-linha small{color:#6b6b85;font-size:11.5px;font-family:Montserrat,sans-serif;font-weight:700}
.bx-n{flex:none;width:22px;height:22px;border-radius:6px;background:var(--azul);color:#fff;font-style:normal;
  font:800 12px/22px Montserrat,sans-serif;text-align:center}
.bx-mock-bt{border:1.5px solid #1a73e8;color:#1a73e8;border-radius:6px;padding:4px 9px;font-weight:700;
  box-shadow:0 0 0 3px rgba(26,115,232,.18)}
.bx-mock-bt.verde{background:#01875f;border-color:#01875f;color:#fff;box-shadow:0 0 0 3px rgba(1,135,95,.2)}
.bx-mock-txt u{color:#1a73e8;font-weight:700;text-decoration-thickness:2px;
  background:rgba(26,115,232,.12);border-radius:3px;padding:0 2px}
.bx-mock-nao{font-size:11.5px;color:#a1231b;font-family:Montserrat,sans-serif;font-weight:600}

/* ---------- celular: tudo dentro do menu de tocar ---------- */
@media (max-width:1240px){
  .menu{max-height:calc(100vh - 80px);overflow-y:auto}
  .m-grupo{flex-direction:column;align-items:stretch;border-bottom:1px solid #f1f2f8}
  .m-abre{justify-content:space-between;width:100%;padding:14px 0;font-size:16px;
    border-bottom:0;color:var(--azul)}
  .m-abre svg{width:16px;height:16px}
  .m-grupo.aberto .m-abre{border-bottom:0}
  .m-sub{position:static;min-width:0;border:0;box-shadow:none;padding:0 0 10px 6px;border-radius:0}
  .m-sub::before{display:none}
  .menu .m-sub a{padding:10px 10px}
  .m-redes{border-left:0;padding:14px 0 4px;gap:8px}
  .menu a.rede{width:44px;height:44px;background:rgba(14,1,101,.06)}
  .menu a.rede svg{width:21px;height:21px}
}