:root{
  --azul:#1F4E99; --azul-esc:#163A73; --azul-claro:#DCE8F4;
  --fundo:#F3F6FA; --branco:#FFFFFF; --tinta:#1B2A41; --suave:#3F4E66; --borda:#C9D6E8;
  --lilas:#6B5BA8; --lilas-claro:#E8E3F4; --lilas-esc:#3E3270;
  --verde:#1D5B3A; --verde-claro:#E1F0E6; --ouro:#6A4A12; --ouro-claro:#F6ECD6; --cinza-claro:#E9EDF2;
  --raio:16px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fundo);color:var(--tinta);font-family:'Atkinson Hyperlegible',system-ui,-apple-system,sans-serif;font-size:20px;line-height:1.5}
a{color:var(--azul)}
a:hover{color:var(--azul-esc)}
:focus-visible{outline:3px solid var(--lilas);outline-offset:3px}
h1,h2,h3{line-height:1.2;margin:0}
p{margin:0}
.carregando{padding:48px 24px;text-align:center;color:var(--suave)}

/* Entrada */
.entrada{min-height:100vh;background:var(--azul);color:#fff;display:flex;flex-direction:column;justify-content:center;gap:32px;padding:32px 24px;max-width:640px;margin:0 auto}
.entrada-topo{display:flex;flex-direction:column;gap:10px}
.entrada h1{font-size:40px}
.bandeiras{font-size:30px}
.entrada-caixa{display:flex;flex-direction:column;gap:16px;background:#fff;color:var(--tinta);border-radius:20px;padding:24px}
.entrada-caixa label{font-size:22px;font-weight:700}
.entrada-caixa input{font:inherit;font-size:24px;min-height:60px;padding:12px 16px;border:2px solid #8FA6C6;border-radius:12px}
.entrada-caixa button{font:inherit;font-size:24px;font-weight:700;min-height:64px;border:0;border-radius:14px;background:var(--azul);color:#fff;cursor:pointer}
.erro{color:#8A1C1C;font-weight:700}
.dica{font-size:18px;color:var(--suave)}

/* Estrutura */
.pagina{max-width:640px;margin:0 auto;padding-bottom:48px}
.barra{background:var(--azul);color:#fff;padding:12px 20px;display:flex;align-items:center;justify-content:space-between;gap:12px;position:sticky;top:0;z-index:5}
.barra p{font-size:19px}
.barra a,.barra button{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:2px solid #fff;border-radius:12px;color:#fff;text-decoration:none;font:inherit;font-size:18px;font-weight:700;background:transparent;cursor:pointer}
.voltar{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-weight:700;text-decoration:none;font-size:19px}
.secao{padding:24px 20px 0;display:flex;flex-direction:column;gap:12px}
.secao h2{font-size:26px}
.secao h3{font-size:22px}
.sub{font-size:18px;color:var(--suave)}
.era{font-weight:400;color:var(--suave);font-size:18px}

/* Topo da início */
.heroi{background:var(--azul);color:#fff;padding:36px 20px 28px;display:flex;flex-direction:column;gap:10px}
.heroi h1{font-size:38px}
.heroi .sobre{font-size:18px;opacity:.92}
.botao-claro{display:flex;align-items:center;justify-content:center;min-height:60px;border-radius:14px;background:#fff;color:var(--azul);text-decoration:none;font-size:21px;font-weight:700;margin-top:10px;text-align:center;padding:8px 16px}
.botao{display:flex;align-items:center;justify-content:center;min-height:60px;border-radius:14px;background:var(--azul);color:#fff;text-decoration:none;font:inherit;font-size:20px;font-weight:700;border:0;cursor:pointer;text-align:center;padding:8px 16px;width:100%}
.botao:hover{color:#fff;background:var(--azul-esc)}
.botao-linha{background:#fff;color:var(--azul);border:2px solid var(--azul)}
.botao-linha:hover{background:var(--azul-claro);color:var(--azul-esc)}

.aviso{margin:20px 20px 0;padding:16px 18px;border-radius:var(--raio);background:var(--ouro-claro);color:#4A3410;font-size:18px;display:flex;gap:12px;align-items:flex-start}
.aviso strong{display:block;font-size:19px}

.numeros{margin:20px 20px 0;padding:18px;background:#fff;border:2px solid var(--borda);border-radius:var(--raio);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;text-align:center}
.numeros b{display:block;font-size:30px;line-height:1.1;color:var(--azul)}
.numeros b.ok{color:var(--verde)}
.numeros span{font-size:16px;color:var(--suave)}

/* Caminho */
.caminho{display:flex;flex-direction:column}
.parada{display:flex;gap:14px}
.parada-marca{display:flex;flex-direction:column;align-items:center;width:46px;flex:none}
.parada-icone{width:46px;height:46px;border-radius:23px;background:var(--azul);color:#fff;display:flex;align-items:center;justify-content:center;font-size:22px}
.parada:last-child .parada-icone{background:var(--lilas)}
.parada-linha{width:4px;flex-grow:1;min-height:20px;background:#B9CBE4}
.parada.viagem .parada-linha{background:repeating-linear-gradient(#B9CBE4 0 8px,transparent 8px 16px)}
.parada:last-child .parada-linha{display:none}
.parada-texto{padding-bottom:18px}
.parada-texto b{font-size:21px;display:block}
.parada-texto p{font-size:18px;color:var(--suave)}

/* Listas de botões */
.lista{display:flex;flex-direction:column;gap:12px}
.item{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:72px;padding:14px 18px;background:#fff;border:2px solid var(--borda);border-radius:var(--raio);color:var(--tinta);text-decoration:none}
.item:hover{border-color:var(--azul);color:var(--tinta)}
.item b{font-size:21px;display:block;line-height:1.25}
.item span.d{font-size:17px;color:var(--suave);display:block}
.seta{flex:none;width:28px;height:28px}

/* Balão de curiosidade */
.balao{background:var(--lilas-claro);border-radius:var(--raio);padding:18px;display:flex;flex-direction:column;gap:6px}
.balao h3{font-size:20px;color:var(--lilas-esc)}
.balao p{font-size:18px}
.balao .emoji{font-size:26px}
.balao button{align-self:flex-start;margin-top:6px;font:inherit;font-size:17px;font-weight:700;color:var(--lilas-esc);background:#fff;border:2px solid var(--lilas);border-radius:12px;min-height:44px;padding:0 14px;cursor:pointer}

/* Cartões de pessoa */
.grade{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.cartao{display:flex;flex-direction:column;gap:2px;background:#fff;border:2px solid var(--borda);border-radius:var(--raio);padding:14px;color:var(--tinta);text-decoration:none;min-height:96px}
a.cartao:hover{border-color:var(--azul);color:var(--tinta)}
.cartao .papel{font-size:15px;color:var(--suave);line-height:1.3}
.cartao .nome{font-size:19px;font-weight:700;line-height:1.2}
.cartao .datas{font-size:16px}
.cartao.acores{border-color:var(--lilas);border-width:3px;padding:13px}
.cartao.voce{background:var(--azul);color:#fff;border-color:var(--azul)}
.cartao.voce .papel{color:#fff;opacity:.9}
.cartao.voce .nome{font-size:25px}
.selo{font-size:14px;font-weight:700;margin-top:6px;line-height:1.3}
.selo.doc{color:var(--verde)}
.selo.arv{color:var(--ouro)}
.selo.fam{color:var(--suave)}
.cartao.voce .selo{color:#fff}
.seta-baixo{display:flex;justify-content:center;padding:4px 0 0}
.repete{font-size:14px;color:var(--lilas-esc);font-weight:700;margin-top:4px}

/* Página de pessoa */
.ficha{background:#fff;border:2px solid var(--borda);border-radius:var(--raio);padding:20px;display:flex;flex-direction:column;gap:8px}
.ficha h1{font-size:28px}
.ficha .linha{font-size:19px}
.ficha .nota{font-size:18px;background:var(--fundo);border-radius:12px;padding:12px 14px}
.etiqueta{display:inline-block;font-size:16px;font-weight:700;border-radius:999px;padding:4px 12px;align-self:flex-start}
.etiqueta.doc{background:var(--verde-claro);color:var(--verde)}
.etiqueta.arv{background:var(--ouro-claro);color:var(--ouro)}
.etiqueta.fam{background:var(--cinza-claro);color:var(--suave)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;min-height:44px;padding:6px 14px;border-radius:12px;background:#fff;border:2px solid var(--borda);text-decoration:none;color:var(--tinta);font-size:18px}
.chip:hover{border-color:var(--azul);color:var(--tinta)}

/* Busca */
.busca label{font-size:20px;font-weight:700}
.busca input{font:inherit;font-size:22px;width:100%;min-height:60px;padding:12px 16px;border:2px solid #8FA6C6;border-radius:12px;background:#fff;color:var(--tinta)}
.vazio{font-size:18px;color:var(--suave);padding:8px 0}

/* Ilhas e navios */
.ilha,.navio{background:#fff;border:2px solid var(--borda);border-radius:var(--raio);padding:16px 18px;display:flex;flex-direction:column;gap:6px}
.ilha h3,.navio h3{font-size:21px}
.ilha .familia{font-size:17px;color:var(--lilas-esc);font-weight:700}
.navio .ano{font-size:16px;color:var(--suave)}
.mar{background:var(--azul-claro);border-radius:var(--raio);padding:16px 18px;font-size:18px}

.mapa{margin:0;background:#fff;border:2px solid var(--borda);border-radius:var(--raio);overflow:hidden}
.mapa img{display:block;width:100%;height:auto;background:#EFE6D2}
.mapa figcaption{padding:14px 18px 16px;display:flex;flex-direction:column;gap:6px}
.mapa h3{font-size:21px}
.mapa .ano{font-size:16px;color:var(--suave)}
.legenda{display:flex;flex-direction:column;gap:8px;font-size:18px}
.rodape{padding:32px 20px 0;display:flex;flex-direction:column;gap:12px;font-size:16px;color:var(--suave)}

@media (prefers-reduced-motion:no-preference){
  .entra{animation:entra .35s ease-out}
  @keyframes entra{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
}
@media (max-width:360px){
  .grade{grid-template-columns:1fr}
  .numeros b{font-size:26px}
}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--tinta);color:#fff;padding:14px 20px;border-radius:14px;font-size:18px;z-index:20;max-width:calc(100% - 32px);text-align:center}
button.botao-claro{font:inherit;font-size:21px;font-weight:700;border:0;cursor:pointer;width:100%}