/* =============================================================================
   HEADER.CSS — Base visual do Portal de Transporte por Aplicativo
   Grupo Tokyo 東京 | Destino: /www/transporte/header.css

   Fonte única dos estilos compartilhados pelas seis páginas. Nenhuma página
   deve duplicar ou sobrescrever o que está aqui em blocos <style> próprios;
   o CSS específico de cada página fica no <style> dela, e só o que for
   exclusivo dela.

   Versão 2 — 04/08/2026. Substitui o cabeçalho em bloco por topbar clara.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

/* =============================================================================
   1. TOKENS
   ========================================================================== */

:root{
  /* Paleta oficial, lida do timbrado "Cores Grupo Tokyo [html].png" */
  --magenta:#F229D1;
  --lilas:#A077D9;
  --violeta:#391DF2;
  --azul-claro:#5CACF2;
  --ciano:#5ED7F2;
  --rosa:#F2529D;      /* Selva */
  --azul:#2B448C;      /* Alto */
  --verde:#03A65A;     /* Trópico */

  /* Ciano escurecido — texto sobre o card primário. Contraste 10:1 */
  --ciano-escuro:#06333E;
  --ciano-medio:#0B5567;

  /* Neutros */
  --tinta:#0B0D12;
  --tinta-2:#5A6072;
  --tinta-3:#8A90A0;
  --linha:#EDEEF2;
  --fundo:#FCFCFD;
  --branco:#fff;

  /* Estrutura */
  --raio:18px;
  --raio-sm:9px;
  --largura:1200px;
}

/* =============================================================================
   2. BASE
   ========================================================================== */

*{box-sizing:border-box}
html{min-height:100%; scroll-behavior:smooth}

body{
  margin:0; min-height:100vh;
  display:flex; flex-direction:column;
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:15px; line-height:1.6;
  color:var(--tinta); background:var(--fundo);
  -webkit-font-smoothing:antialiased;
}

main{flex:1 1 auto}

a{color:inherit}
:focus-visible{outline:2px solid var(--ciano-medio); outline-offset:3px; border-radius:4px}

.wrap{max-width:var(--largura); margin:0 auto; padding:0 24px}

/* =============================================================================
   3. TOPBAR
   ========================================================================== */

.topbar{
  background:rgba(252,252,253,.92);
  backdrop-filter:saturate(180%) blur(8px);
  border-bottom:1px solid var(--linha);
  position:sticky; top:0; z-index:40;
}
.topbar .wrap{
  display:flex; align-items:center; justify-content:space-between;
  gap:18px; padding-top:11px; padding-bottom:11px;
}

/* Bloco da esquerda: logo do grupo + marcas parceiras */
.marcas{display:flex; align-items:center; gap:12px; flex:0 0 auto}
.marcas img.logo{height:28px; width:auto; display:block}
.marcas .divisor{width:1px; height:20px; background:#E1E3E9}

/* Uber e 99 como par visual: mesma altura, mesmo raio, mesmo peso.
   O texto dentro é centralizado por flexbox, não por atributo do SVG,
   para os dois selos ficarem opticamente equivalentes. */
.parceiros{display:flex; align-items:center; gap:7px}
.parceiros .selo{
  height:24px; min-width:24px; padding:0 9px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:6px; font-size:12px; font-weight:600; line-height:1;
  letter-spacing:-.01em; white-space:nowrap;
}
.parceiros .selo-uber{background:#000; color:#fff}
.parceiros .selo-99{background:#FFD400; color:#111}

/* Bloco da direita: navegação em texto + botão */
.nav{display:flex; align-items:center; gap:18px; flex-wrap:wrap; justify-content:flex-end}

/* O :not(.btn) impede que estas regras vençam as do botão por
   especificidade — era o que deixava o "Aderir" com texto escuro. */
.nav a:not(.btn){
  font-size:13.5px; color:var(--tinta-2); text-decoration:none;
  padding:4px 0; border-bottom:2px solid transparent; transition:color .15s, border-color .15s;
}
.nav a:not(.btn):hover{color:var(--tinta)}
.nav a:not(.btn)[aria-current="page"]{color:var(--tinta); font-weight:500; border-bottom-color:var(--ciano)}
.nav .btn{flex:0 0 auto; margin-left:4px}

/* =============================================================================
   4. BOTÕES
   ========================================================================== */

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  height:40px; padding:0 17px; border-radius:var(--raio-sm);
  font-family:inherit; font-size:13.5px; font-weight:500; line-height:1;
  text-decoration:none; border:1px solid transparent; cursor:pointer;
  transition:filter .15s, background .15s, transform .06s;
}
.btn:active{transform:translateY(1px)}
.btn .material-icons{font-size:18px}

.btn-primario{background:var(--ciano-escuro); color:#fff !important}
.btn-primario:hover{filter:brightness(1.35)}
.btn-primario .material-icons{color:#fff}

.btn-claro{background:#fff; color:var(--ciano-escuro); border-color:var(--linha)}
.btn-claro:hover{background:#F6F7F9}

.btn-sm{height:32px; padding:0 13px; font-size:12.5px}

/* =============================================================================
   5. CABEÇALHO EDITORIAL DA PÁGINA
   ========================================================================== */

/* ATENÇÃO: usar padding-top/padding-bottom, nunca o atalho "padding".
   O atalho zera o padding lateral herdado de .wrap e desalinha o bloco
   em relação ao resto da página. */
.lead{padding-top:40px; padding-bottom:26px}
.lead .etiqueta{
  display:flex; align-items:center; gap:7px; margin-bottom:14px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11px; letter-spacing:.13em; color:var(--tinta-3);
}
.lead .pontos{display:flex; gap:5px}
.lead .pontos i{width:5px; height:5px; border-radius:50%; display:block}
.lead h1{
  margin:0 0 13px; font-weight:500;
  font-size:clamp(30px,5vw,46px); line-height:1.02; letter-spacing:-.035em;
  max-width:18ch;
}
.lead .sub{margin:0; font-size:16px; color:var(--tinta-2); max-width:52ch}
.lead .meta{display:flex; gap:20px; margin-top:19px; flex-wrap:wrap}
.lead .meta span{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--tinta-3)}
.lead .meta .material-icons{font-size:16px}

/* Migalhas */
.migalhas{font-size:12.5px; color:var(--tinta-3); padding-top:18px}
.migalhas a{color:var(--tinta-2); text-decoration:none}
.migalhas a:hover{text-decoration:underline}

/* =============================================================================
   6. GRADE E CARDS
   ========================================================================== */

.bento{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; padding-bottom:26px}
.bento .larga{grid-column:span 2}

.card{
  background:var(--branco); border:1px solid var(--linha); border-radius:var(--raio);
  padding:18px; text-decoration:none; color:inherit; display:block;
  transition:border-color .15s, transform .12s;
}
a.card:hover{border-color:#DFE1E8; transform:translateY(-2px)}
.card .icone{
  width:34px; height:34px; border-radius:10px; margin-bottom:12px;
  display:flex; align-items:center; justify-content:center;
}
.card .icone .material-icons{font-size:19px}
.card h2, .card h3{margin:0 0 5px; font-size:15px; font-weight:500; letter-spacing:-.01em}
.card p{margin:0; font-size:12.5px; color:var(--tinta-3); line-height:1.5}
.card .seta{margin-top:14px; font-size:12px; color:var(--tinta-2); display:flex; align-items:center; gap:5px}
.card .seta .material-icons{font-size:14px}

/* Tintas dos ícones */
.icone.t-ciano{background:#E5F7FC} .icone.t-ciano .material-icons{color:var(--ciano-medio)}
.icone.t-azul{background:#EAF0FB}  .icone.t-azul  .material-icons{color:var(--azul)}
.icone.t-verde{background:#E9F6EF} .icone.t-verde .material-icons{color:var(--verde)}
.icone.t-rosa{background:#FDEDF6}  .icone.t-rosa  .material-icons{color:#B32C6C}
.icone.t-lilas{background:#F1F0FA} .icone.t-lilas .material-icons{color:#6B4FA8}

/* Card primário — a ação principal da página */
.card-primario{
  background:var(--ciano); color:var(--ciano-escuro);
  border:none; border-radius:var(--raio); padding:24px;
}
.card-primario .etiqueta{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11px; letter-spacing:.13em; color:var(--ciano-medio);
  font-weight:500; margin-bottom:10px;
}
.card-primario h2{margin:0 0 7px; font-size:22px; font-weight:500; letter-spacing:-.02em}
.card-primario p{margin:0 0 18px; font-size:13.5px; color:var(--ciano-medio); max-width:46ch}
.etapas{display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-bottom:20px}
.etapas .passo{
  font-size:12px; background:rgba(255,255,255,.62);
  border-radius:7px; padding:6px 11px; white-space:nowrap;
}
.etapas .material-icons{font-size:15px; color:var(--ciano-medio)}

/* =============================================================================
   7. BLOCOS DE CONTEÚDO
   ========================================================================== */

/* Mesmo cuidado do .lead: só vertical, para não zerar o padding do .wrap. */
.secao{padding-top:8px; padding-bottom:30px}
.secao > h2{
  font-size:12px; font-weight:500; letter-spacing:.13em; color:var(--tinta-3);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  margin:0 0 16px; text-transform:uppercase;
}

.painel{background:var(--branco); border:1px solid var(--linha); border-radius:var(--raio); padding:24px}
.painel h3{margin:0 0 10px; font-size:17px; font-weight:500; letter-spacing:-.01em}
.painel p{margin:0 0 13px; color:var(--tinta-2); font-size:14.5px}
.painel p:last-child{margin-bottom:0}
.painel ul, .painel ol{margin:0 0 13px; padding-left:20px; color:var(--tinta-2); font-size:14.5px}
.painel li{margin-bottom:7px}
.painel li:last-child{margin-bottom:0}
.painel strong{color:var(--tinta); font-weight:500}

.lista-def{display:grid; gap:0}
.lista-def .linha{
  display:grid; grid-template-columns:210px 1fr; gap:18px;
  padding:13px 0; border-bottom:1px solid var(--linha);
}
.lista-def .linha:last-child{border-bottom:none}
.lista-def dt{font-size:13.5px; color:var(--tinta-3)}
.lista-def dd{margin:0; font-size:14.5px; color:var(--tinta)}

/* Avisos */
.aviso{
  display:flex; gap:11px; align-items:flex-start;
  border-radius:12px; padding:14px 16px; font-size:13.5px; margin:0 0 14px;
}
.aviso .material-icons{font-size:19px; flex:0 0 auto}
.aviso-info{background:#E9F5FA; color:#0B4A5A}
.aviso-info .material-icons{color:#0B7A96}
.aviso-atencao{background:#FEF6E7; color:#7A4E05}
.aviso-atencao .material-icons{color:#B87A0B}
.aviso-ok{background:#E9F6EF; color:#0A5C36}
.aviso-ok .material-icons{color:var(--verde)}

/* =============================================================================
   8. RODAPÉ
   ========================================================================== */

.rodape{border-top:1px solid var(--linha); margin-top:14px; background:var(--fundo)}
.rodape .wrap{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; flex-wrap:wrap; padding-top:20px; padding-bottom:20px;
}
.rodape .assinatura{display:flex; align-items:center; gap:11px}
.rodape .fitas{display:flex; height:3px; width:56px; border-radius:2px; overflow:hidden; flex:0 0 auto}
.rodape .fitas i{flex:1; display:block}
.rodape .copy{font-size:12px; color:var(--tinta-3)}
.rodape .contatos{display:flex; gap:16px; flex-wrap:wrap}
.rodape .contatos a, .rodape .contatos span{font-size:12px; color:var(--tinta-2); text-decoration:none}
.rodape .contatos a:hover{text-decoration:underline}

/* =============================================================================
   9. RESPONSIVO
   ========================================================================== */

@media (max-width:1020px){
  .bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bento .larga{grid-column:span 2}
}

@media (max-width:760px){
  .wrap{padding:0 18px}
  .topbar .wrap{flex-direction:column; align-items:stretch; gap:11px}
  .nav{justify-content:flex-start; gap:15px; overflow-x:auto; padding-bottom:2px; -webkit-overflow-scrolling:touch}
  .nav::-webkit-scrollbar{display:none}
  .nav a{white-space:nowrap; flex:0 0 auto}
  .marcas img.logo{height:22px}
  .lead{padding-top:28px; padding-bottom:20px}
  .bento{grid-template-columns:1fr}
  .bento .larga{grid-column:span 1}
  .card-primario{padding:20px}
  .lista-def .linha{grid-template-columns:1fr; gap:3px; padding:11px 0}
  .rodape .wrap{flex-direction:column; align-items:flex-start; gap:11px}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important; animation:none !important}
  html{scroll-behavior:auto}
}

/* =============================================================================
   10. IMPRESSÃO
   ========================================================================== */

@media print{
  .topbar, .nav, .migalhas, .rodape .contatos, .btn{display:none !important}
  body{background:#fff}
  .card, .painel{border-color:#ccc; break-inside:avoid}
  .card-primario{background:#fff; color:#000; border:1px solid #ccc}
}