:root{
  --mar-fundo:#0F4C5C; --mar-raso:#1A7A72; --falesia:#B9502C; --coral:#F2B59B;
  --espuma:#CDE7E2; --duna:#F5EDE0; --papel:#FFFFFF; --texto:#222222; --fio:#9CC5C0;
  --titulo:'Bricolage Grotesque',system-ui,sans-serif;
  --corpo:'Atkinson Hyperlegible',system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;font-family:var(--corpo);font-size:18px;line-height:1.55;color:var(--texto);background:var(--papel)}
a{color:var(--mar-fundo)}
a:hover{color:var(--falesia)}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--falesia);outline-offset:3px}
h1,h2,h3{font-family:var(--titulo);color:var(--mar-fundo);margin:0}
p{margin:0}
.pular{position:absolute;left:-999px;top:0;background:var(--mar-fundo);color:#fff;padding:12px 16px;z-index:10}
.pular:focus{left:0}
.miolo{max-width:1240px;margin:0 auto;padding-left:32px;padding-right:32px}
.topo{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;padding-top:20px;padding-bottom:20px}
.topo .marca{display:block;line-height:0}
.topo nav{display:flex;flex-wrap:wrap;gap:4px;font-weight:700;font-size:17px}
.topo nav a{padding:12px;text-decoration:none}
.topo nav a[aria-current="page"]{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
.faixa{padding-top:96px;padding-bottom:96px}
.fundo-espuma{background:var(--espuma)}
.fundo-duna{background:var(--duna)}
.fundo-mar{background:var(--mar-fundo);color:#fff}
.fundo-mar h2{color:#fff}
.fundo-falesia{background:var(--falesia);color:#fff}
.fundo-falesia h2{color:#fff}
.t2{font-weight:800;font-size:clamp(32px,4.4vw,56px);line-height:1.02;letter-spacing:-0.03em}
.t3{font-weight:700;font-size:26px;line-height:1.15}
.duas{display:flex;flex-wrap:wrap;gap:32px 64px}
.duas>*{flex:1 1 420px;min-width:0}
.botao{display:inline-block;font:inherit;font-weight:700;text-decoration:none;padding:14px 22px;background:var(--mar-fundo);color:#fff;border:2px solid var(--mar-fundo);cursor:pointer}
.botao:hover{background:var(--falesia);border-color:var(--falesia);color:#fff}
.botao.vazado{background:transparent;color:var(--mar-fundo)}
.botao.vazado:hover{background:var(--mar-fundo);color:#fff;border-color:var(--mar-fundo)}
.botao.claro{background:#fff;color:var(--mar-fundo);border-color:#fff}
.botao.claro:hover{background:var(--mar-fundo);color:#fff;border-color:var(--mar-fundo)}
.abas{display:flex;flex-wrap:wrap;gap:8px}
.abas button{font:inherit;font-weight:700;font-size:17px;min-height:44px;padding:8px 16px;border:2px solid var(--mar-fundo);background:#fff;color:var(--mar-fundo);cursor:pointer}
.abas button[aria-pressed="true"]{background:var(--falesia);border-color:var(--falesia);color:#fff}

/* abertura */
.especime{padding-top:40px;padding-bottom:56px;display:flex;flex-direction:column;gap:28px}
.especime .cabeca{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px}
.especime .cabeca p{font-weight:700;color:var(--mar-fundo)}
.especime .texto{font-weight:700;font-size:clamp(44px,9.4vw,132px);line-height:1.08;letter-spacing:-0.02em;color:var(--mar-fundo);min-height:2.2em;display:flex;align-items:center;font-family:var(--titulo)}
.especime .texto[lang="ja"]{font-family:'Shippori Mincho',serif}
.especime .glosa{font-size:20px;color:var(--mar-fundo)}
.ficha{margin:0;display:flex;flex-wrap:wrap;gap:0 32px}
.ficha div{flex:1 1 200px;border-top:2px solid var(--mar-fundo);padding:14px 0}
.ficha div.larga{flex:2 1 380px}
.ficha dt{font-weight:700;color:var(--mar-fundo)}
.ficha dd{margin:4px 0 0}
.apresenta{padding-top:72px;padding-bottom:96px;display:flex;flex-wrap:wrap;align-items:flex-end;gap:32px 64px}
.apresenta h1{flex:3 1 520px;min-width:0;font-weight:800;font-size:clamp(44px,7vw,96px);line-height:.95;letter-spacing:-0.04em}
.apresenta .lado{flex:2 1 360px;min-width:0;display:flex;flex-direction:column;gap:20px}
.apresenta .lado p{font-size:21px}
.acoes{display:flex;flex-wrap:wrap;gap:12px}

/* listas com fio */
.etapas{margin:40px 0 0;padding:0;list-style:none;border-bottom:2px solid var(--mar-fundo)}
.etapas li{border-top:2px solid var(--mar-fundo);padding:22px 0;display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 32px}
.etapas .num{font-family:var(--titulo);font-weight:800;font-size:40px;line-height:1;color:var(--falesia);width:56px}
.etapas h3{flex:1 1 220px}
.etapas p{flex:2 1 380px;max-width:34em}
.linguas{margin-top:40px;border-bottom:2px solid var(--mar-fundo)}
.linguas a{display:flex;flex-wrap:wrap;align-items:center;gap:16px 32px;padding:24px 0;border-top:2px solid var(--mar-fundo);text-decoration:none;color:var(--texto)}
.linguas .nome{font-family:var(--titulo);font-weight:800;font-size:clamp(30px,4vw,48px);line-height:1;letter-spacing:-0.03em;color:var(--mar-fundo);flex:1 1 300px}
.linguas a:hover .nome{color:var(--falesia)}
.linguas .nota{flex:1 1 320px;max-width:30em}
.simbolo{flex:none;display:block}
.publicos{margin-top:40px;display:flex;flex-wrap:wrap;gap:32px 56px}
.publicos>div{flex:1 1 280px}
.publicos h3{margin-bottom:8px}
.anos{margin-top:40px;border-bottom:2px solid var(--mar-fundo)}
.ano{display:flex;flex-wrap:wrap;gap:16px 48px;padding:32px 0;border-top:2px solid var(--mar-fundo)}
.ano .cab{flex:0 1 260px}
.ano h3{font-weight:800;font-size:72px;line-height:.95;letter-spacing:-0.04em}
.ano .cab p{margin-top:8px;font-weight:700}
.ano dl{margin:0;flex:1 1 520px;min-width:0}
.ano dl div{display:flex;flex-wrap:wrap;gap:4px 24px;padding:12px 0;border-top:1px solid var(--fio)}
.ano dt{font-weight:700;color:var(--mar-fundo);flex:0 0 170px}
.ano dd{margin:0;flex:1 1 320px}
.fontes{margin:0;padding:0;list-style:none;border-bottom:2px solid var(--mar-fundo)}
.fontes li{border-top:2px solid var(--mar-fundo);padding:18px 0}
.fontes strong{color:var(--mar-fundo)}
.equipe{flex:2 1 560px;min-width:0;margin:0;padding:0;list-style:none;border-bottom:1px solid var(--fio)}
.equipe li{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 24px;padding:14px 0;border-top:1px solid var(--fio)}
.equipe .nome{font-family:var(--titulo);font-weight:700;font-size:24px;color:var(--mar-fundo)}
.contato{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px 64px;padding-top:80px;padding-bottom:80px}
.contato>div{flex:1 1 480px;min-width:0}
.contato p{font-size:20px;margin-top:12px}
.contato .botao{font-size:20px;padding:16px 24px}
.rodape{background:var(--mar-fundo);color:#fff;font-size:16px}
.rodape .miolo{padding-top:48px;padding-bottom:48px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:32px}
.rodape .dados{display:flex;flex-direction:column;gap:4px;max-width:36em}

/* acervo */
.acervo-topo{padding-top:40px}
.acervo-topo h1{font-weight:800;font-size:clamp(48px,8vw,104px);line-height:.95;letter-spacing:-0.04em;margin-bottom:16px}
.acervo-topo>p{font-size:21px;max-width:34em;margin-bottom:40px}
.filtros{display:flex;flex-wrap:wrap;gap:20px 48px;margin-bottom:16px}
.filtros .grupo{display:flex;flex-direction:column;gap:8px}
.filtros .rotulo{font-weight:700;color:var(--mar-fundo)}
.filtros input{font:inherit;min-height:44px;padding:8px 12px;border:2px solid var(--mar-fundo);min-width:260px;color:var(--texto);background:#fff}
.lista{margin:0;padding:0;list-style:none;border-bottom:2px solid var(--mar-fundo)}
.lista li{border-top:2px solid var(--mar-fundo);padding:20px 0;display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px}
.lista .principal{flex:3 1 320px;min-width:0}
.lista h2{font-weight:700;font-size:24px;line-height:1.2}
.lista .detalhe{flex:2 1 240px}
.lista .abrir{flex:none;font-weight:700;padding:10px 0}
.letra{width:56px;height:56px;border-radius:46% 54% 50% 50%/52% 48% 52% 48%;background:var(--mar-fundo);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--titulo);font-weight:800;font-size:26px;flex:none}
.aviso{background:var(--duna);padding:40px 32px;margin-top:8px}
.aviso .t3{margin-bottom:4px}
.relato{margin-top:72px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 48px;padding:36px 32px}
.relato>div{flex:1 1 420px;min-width:0}
.relato h2{font-weight:800;font-size:32px;line-height:1.1;letter-spacing:-0.02em;margin-bottom:6px}
[hidden]{display:none!important}
@media (max-width:640px){
  body{font-size:17px}
  .miolo{padding-left:20px;padding-right:20px}
  .faixa{padding-top:64px;padding-bottom:64px}
  .ano dt{flex-basis:100%}
  .filtros input{min-width:0;width:100%}
}