/* Mangalciabi: visual claro, cores fortes, estilo revista de mangá */
:root{
  --rosa:#E8398A; --rosa-esc:#B8145F; --rosa-bt:#C21E6E; --verde-esc:#00796B; --tinta:#1A1A1F; --papel:#FFF9F0; --branco:#fff;
  --amarelo:#FFD23F; --azul:#2E5BFF; --azul-esc:#1F3FC2; --verde:#00A896; --laranja:#FF7A1A;
  --cinza:#F3ECE0; --texto:#26262c; --suave:#5a5a66;
  --borda:3px solid var(--tinta); --sombra:5px 5px 0 var(--tinta);
  --titulo:Impact,Haettenschweiler,"Arial Narrow Bold","Roboto Condensed",sans-serif-condensed,"Arial Black",sans-serif;
  --corpo:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --larg:1120px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--papel);color:var(--texto);font-family:var(--corpo);font-size:1.0625rem;line-height:1.65}
img,svg{max-width:100%;height:auto}
a{color:var(--azul-esc);text-underline-offset:3px}
a:hover{color:var(--rosa-esc)}
:focus-visible{outline:3px solid var(--azul);outline-offset:3px;border-radius:2px}
h1,h2,h3{font-family:var(--titulo);font-weight:400;letter-spacing:.02em;line-height:1.15;color:var(--tinta);text-transform:uppercase}
h1{font-size:clamp(2rem,6vw,3.4rem);margin:0 0 .5rem}
h2{font-size:clamp(1.5rem,3.5vw,2rem);margin:2.2rem 0 .8rem}
h3{font-size:1.25rem;margin:0 0 .4rem}
p{margin:0 0 1rem}
.so-leitor{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pular{position:absolute;left:-999px;top:0;background:var(--amarelo);color:var(--tinta);padding:.6rem 1rem;z-index:100;font-weight:700}
.pular:focus{left:8px;top:8px}

/* topo */
.topo{background:var(--branco);border-bottom:var(--borda);position:sticky;top:0;z-index:50}
.topo__in{max-width:var(--larg);margin:0 auto;padding:.5rem 1rem;display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.topo__logo{display:block;line-height:0}
.topo__logo img{width:170px;height:auto}
.topo__menu{display:none;margin-left:auto;background:var(--amarelo);color:var(--tinta);border:var(--borda);box-shadow:3px 3px 0 var(--tinta);padding:.4rem .9rem;font:700 1rem var(--corpo);cursor:pointer}
.nav{display:flex;align-items:center;gap:1rem;flex:1;flex-wrap:wrap;justify-content:flex-end}
.nav ul{list-style:none;margin:0;padding:0;display:flex;gap:.25rem;flex-wrap:wrap}
.nav a{display:block;padding:.45rem .7rem;color:var(--tinta);font-weight:700;text-decoration:none;border-radius:6px}
.nav a:hover,.nav a[aria-current]{background:var(--rosa-bt);color:#fff}
.busca-topo{display:flex}
.busca-topo input{width:11rem;padding:.45rem .7rem;border:2px solid var(--tinta);border-right:0;border-radius:6px 0 0 6px;font:inherit;font-size:.95rem;background:#fff}
.busca-topo button{background:var(--tinta);color:#fff;border:2px solid var(--tinta);border-radius:0 6px 6px 0;padding:.45rem .8rem;font:700 .95rem var(--corpo);cursor:pointer}
@media (max-width:860px){
  .js .topo__menu{display:block}
  .js .nav{display:none;width:100%;flex-direction:column;align-items:stretch;padding-bottom:.6rem}
  .js .nav.aberto{display:flex}
  .nav ul{flex-direction:column}
  .busca-topo input{flex:1;width:auto}
}

/* migalhas */
.migalhas{max-width:var(--larg);margin:0 auto;padding:.7rem 1rem 0;font-size:.9rem}
.migalhas ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.3rem}
.migalhas li+li::before{content:"›";margin-right:.3rem;color:var(--suave)}
.migalhas span{color:var(--suave)}

/* herói */
.heroi{background:var(--rosa-bt);background-image:radial-gradient(rgba(26,26,31,.18) 1.6px,transparent 1.7px);background-size:14px 14px;border-bottom:var(--borda);padding:3rem 1rem 3.2rem}
.heroi__in{max-width:var(--larg);margin:0 auto}
.heroi__sobre{display:inline-block;background:var(--amarelo);border:var(--borda);padding:.15rem .8rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;font-size:.85rem;color:var(--tinta);transform:rotate(-1.5deg)}
.heroi h1{color:#fff;text-shadow:3px 3px 0 var(--tinta);max-width:18ch}
.heroi h1 span{color:var(--amarelo)}
.heroi__texto{max-width:46rem;color:#fff;font-size:1.15rem;text-shadow:0 1px 0 rgba(0,0,0,.35)}
.heroi__busca{max-width:40rem;margin:1.4rem 0 1rem}
.heroi__busca label{display:block;color:#fff;font-weight:700;margin-bottom:.3rem;text-shadow:0 1px 0 rgba(0,0,0,.4)}
.heroi__busca div{display:flex;box-shadow:var(--sombra)}
.heroi__busca input{flex:1;min-width:0;padding:.85rem 1rem;border:var(--borda);border-right:0;font:inherit;background:#fff}
.heroi__busca button{background:var(--tinta);color:#fff;border:var(--borda);padding:.85rem 1.4rem;font:800 1rem var(--corpo);cursor:pointer;text-transform:uppercase}
.heroi__busca button:hover{background:var(--azul)}
.heroi__chips{display:flex;flex-wrap:wrap;gap:.5rem;margin:0}
.pagina .heroi__busca label{color:var(--tinta);text-shadow:none}

/* chips, selos, botões */
.chip{display:inline-block;background:#fff;border:2px solid var(--tinta);border-radius:99px;padding:.05rem .65rem;font-size:.82rem;font-weight:700;color:var(--tinta);text-decoration:none;line-height:1.5}
.chip--ano{background:var(--cinza)}
a.chip--link:hover{background:var(--amarelo);color:var(--tinta)}
.chips-linha{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin:0 0 1.2rem}
.chips-linha>span{font-weight:700}
.selo{display:inline-block;border:2px solid var(--tinta);padding:0 .55rem;font-size:.74rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;line-height:1.7;white-space:nowrap}
.selo--oficial{background:var(--verde-esc);color:#fff}
.selo--contexto{background:var(--amarelo);color:var(--tinta)}
.selo--analise{background:var(--azul-esc);color:#fff}
.selo--teoria{background:#fff;color:var(--rosa-esc);border-style:dashed}
.botao{display:inline-block;background:var(--rosa-bt);color:#fff;border:var(--borda);box-shadow:4px 4px 0 var(--tinta);padding:.65rem 1.3rem;font:800 1rem var(--corpo);text-transform:uppercase;letter-spacing:.03em;text-decoration:none;cursor:pointer}
.botao:hover{background:var(--tinta);color:#fff;transform:translate(2px,2px);box-shadow:2px 2px 0 var(--tinta)}
.botao--sec{background:#fff;color:var(--tinta)}
.botao--sec:hover{background:var(--amarelo);color:var(--tinta)}
.botao--peq{padding:.4rem .9rem;font-size:.85rem}

/* blocos */
.bloco{padding:2.5rem 1rem}
.bloco--cinza{background:var(--cinza);border-block:var(--borda)}
.bloco__in{max-width:var(--larg);margin:0 auto}
.bloco h2:first-child{margin-top:0}
.bloco__sub,.sub{color:var(--suave);margin-bottom:1.2rem}
.areas{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.2rem}
.area{display:flex;flex-direction:column;gap:.2rem;background:#fff;border:var(--borda);box-shadow:var(--sombra);padding:1rem;text-decoration:none;color:var(--tinta);border-top-width:10px}
.area:hover{transform:translate(2px,2px);box-shadow:3px 3px 0 var(--tinta);color:var(--tinta)}
.area--rosa{border-top-color:var(--rosa)}.area--azul{border-top-color:var(--azul)}.area--amarelo{border-top-color:var(--amarelo)}.area--verde{border-top-color:var(--verde)}.area--laranja{border-top-color:var(--laranja)}
.area__n{font:2.4rem/1 var(--titulo)}
.area__nome{font-weight:800;text-transform:uppercase;font-size:.95rem}
.area__desc{font-size:.9rem;color:var(--suave);line-height:1.45}
.trilhas{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.2rem}
.trilha{background:#fff;border:var(--borda);padding:1.1rem;box-shadow:var(--sombra)}
.trilha ol{margin:.6rem 0 0;padding-left:1.3rem}
.trilha__tipo{font-size:.75rem;color:var(--suave);text-transform:uppercase;font-weight:700}
.dia{display:grid;grid-template-columns:minmax(0,340px) 1fr;gap:2rem;align-items:start}
.dia dl{margin:0 0 1rem}.dia dt{font-weight:800;margin-top:.6rem}.dia dd{margin:0}
@media (max-width:760px){.dia{grid-template-columns:1fr}}
.hubs{list-style:none;margin:0 0 1.4rem;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:.8rem}
.hubs a{display:flex;flex-direction:column;background:#fff;border:var(--borda);padding:.7rem .9rem;text-decoration:none;color:var(--tinta);box-shadow:3px 3px 0 var(--tinta)}
.hubs a:hover{background:var(--amarelo)}
.hubs span{font-size:.8rem;color:var(--suave)}
.selos-lista{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;margin-bottom:1rem}
.selos-lista__item{background:#fff;border:var(--borda);padding:.9rem}
.selos-lista__item p{margin:.5rem 0 0;font-size:.95rem}

/* páginas */
.pagina{max-width:var(--larg);margin:0 auto;padding:1.2rem 1rem 3rem}
.pagina--texto,.pagina--estreita{max-width:50rem}
.pagina--texto h2{margin-top:2rem}
.pagina--texto li{margin-bottom:.4rem}
.pagina__cab{border:var(--borda);background:#fff;box-shadow:var(--sombra);padding:1.4rem 1.4rem 1rem;margin-bottom:1.8rem;border-left-width:14px}
.pagina__cab p:last-child{margin-bottom:.2rem}
.pagina__cab--rosa{border-left-color:var(--rosa)}.pagina__cab--azul{border-left-color:var(--azul)}.pagina__cab--amarelo{border-left-color:var(--amarelo)}.pagina__cab--verde{border-left-color:var(--verde)}.pagina__cab--laranja{border-left-color:var(--laranja)}
.pagina__n{font-weight:800;color:var(--rosa-esc)}
.pagina__rodape{margin-top:2rem;display:flex;gap:1rem;flex-wrap:wrap}

/* grade e cards */
.grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1.4rem}
.grade--3{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.card{background:#fff;border:var(--borda);box-shadow:var(--sombra);display:flex;flex-direction:column;overflow:hidden}
.card[hidden]{display:none}
.card:hover{transform:translate(2px,2px);box-shadow:3px 3px 0 var(--tinta)}
.capa{display:block;line-height:0;border-bottom:var(--borda)}
.capa__svg{width:100%;height:auto;display:block;aspect-ratio:5/3}
.capa__fundo--rosa{fill:#E8398A}.capa__fundo--azul{fill:#2E5BFF}.capa__fundo--amarelo{fill:#FFD23F}.capa__fundo--verde{fill:#00A896}.capa__fundo--laranja{fill:#FF7A1A}
.capa__linhas line{stroke:rgba(26,26,31,.35);stroke-width:3}
.capa__estrela{fill:#fff;stroke:#1A1A1F;stroke-width:4;stroke-linejoin:round}
.card__corpo{padding:.8rem 1rem 1rem;display:flex;flex-direction:column;flex:1}
.card__tipo{font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--suave);margin:0 0 .15rem}
.card__titulo{margin:0 0 .4rem;font-size:1.3rem}
.card__titulo a{color:var(--tinta);text-decoration:none}
.card__titulo a::after{content:"";position:absolute;inset:0}
.card{position:relative}
.card__resumo{font-size:.92rem;line-height:1.5;color:var(--texto);flex:1}
.card__chips{display:flex;flex-wrap:wrap;gap:.35rem;margin:.3rem 0 0}

/* explorador */
.filtros{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:.9rem;background:#fff;border:var(--borda);box-shadow:var(--sombra);padding:1.1rem;margin-bottom:1.2rem}
.filtros--linha{grid-template-columns:1fr auto;align-items:end}
.filtros__busca{grid-column:1/-1}
.filtros--linha .filtros__busca{grid-column:auto}
.filtros label{display:block;font-weight:800;font-size:.85rem;text-transform:uppercase;letter-spacing:.04em;margin-bottom:.25rem}
.filtros input,.filtros select{width:100%;padding:.6rem .7rem;border:2px solid var(--tinta);background:var(--papel);font:inherit;font-size:1rem;color:var(--tinta)}
.filtros__acoes{display:flex;gap:.7rem;align-items:end;flex-wrap:wrap}
.js #filtros .filtros__acoes button[type=submit]{display:none}
.contagem{margin:.2rem 0 1rem;font-size:1.05rem}
.vazio{background:#fff;border:var(--borda);padding:1.2rem;font-weight:700}
.vazio[hidden]{display:none}
.sugestoes{margin-top:2.5rem}
.sugestoes p{display:flex;flex-wrap:wrap;gap:.5rem}

/* verbete */
.verbete__cab{border-bottom:var(--borda);padding:2rem 1rem;background-image:radial-gradient(rgba(26,26,31,.14) 1.5px,transparent 1.6px);background-size:13px 13px}
.verbete__cab--rosa{background-color:var(--rosa)}.verbete__cab--azul{background-color:var(--azul)}.verbete__cab--amarelo{background-color:var(--amarelo)}.verbete__cab--verde{background-color:var(--verde)}.verbete__cab--laranja{background-color:var(--laranja)}
.verbete__cab-in{max-width:var(--larg);margin:0 auto;display:grid;grid-template-columns:1fr minmax(0,340px);gap:2rem;align-items:center}
.verbete__tipo{display:inline-block;background:var(--tinta);color:#fff;padding:.1rem .8rem;margin:0 0 .6rem;font-weight:800;font-size:.8rem;text-transform:uppercase;letter-spacing:.07em}
.verbete__tipo a{color:#fff;text-decoration:none}
.verbete__cab h1{background:#fff;display:inline;padding:.1rem .6rem;border:var(--borda);box-shadow:var(--sombra);box-decoration-break:clone;-webkit-box-decoration-break:clone;line-height:1.5}
.verbete__sub{display:inline-block;margin:1.1rem 0 0;font-size:1.15rem;font-weight:600;color:var(--tinta);max-width:38rem;background:#fff;border:2px solid var(--tinta);padding:.3rem .8rem}
.verbete__capa{border:var(--borda);box-shadow:var(--sombra);background:#fff}
.verbete__corpo{max-width:var(--larg);margin:0 auto;padding:1.5rem 1rem 3rem;display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:2.5rem;align-items:start}
.verbete__principal section:first-child h2{margin-top:0}
.lead{font-size:1.2rem;font-weight:500}
.item{display:grid;grid-template-columns:auto 1fr;gap:.2rem .9rem;margin-bottom:1.1rem;align-items:start}
.item .selo{margin-top:.25rem;min-width:7.5rem;text-align:center}
.item p{margin:0}
.linha{list-style:none;margin:0;padding:0;border-left:4px solid var(--tinta);margin-left:.4rem}
.linha li{position:relative;padding:0 0 1.3rem 1.4rem}
.linha li::before{content:"";position:absolute;left:-11px;top:.35rem;width:16px;height:16px;background:var(--rosa);border:3px solid var(--tinta);border-radius:50%}
.linha__ano{display:block;font:1.35rem/1.2 var(--titulo);color:var(--rosa-esc);margin-bottom:.2rem}
.linha p{margin:.3rem 0 0}
.conexoes{margin:0 0 1rem}
.conexoes dt{font-weight:800;text-transform:uppercase;font-size:.85rem;letter-spacing:.05em;margin-top:1rem;color:var(--suave)}
.conexoes dd{margin:.35rem 0 0}
.conexoes ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.pilula{display:inline-flex;flex-direction:column;border:2px solid var(--tinta);border-left-width:8px;background:#fff;padding:.2rem .8rem;text-decoration:none;color:var(--tinta);font-weight:700;line-height:1.3}
.pilula small{font-size:.7rem;font-weight:600;color:var(--suave);text-transform:uppercase;letter-spacing:.04em}
.pilula:hover{background:var(--amarelo);color:var(--tinta)}
.pilula--rosa{border-left-color:var(--rosa)}.pilula--azul{border-left-color:var(--azul)}.pilula--amarelo{border-left-color:var(--amarelo)}.pilula--verde{border-left-color:var(--verde)}.pilula--laranja{border-left-color:var(--laranja)}
.caminhos{list-style:none;margin:1.3rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.6rem}
.caminhos a{display:inline-block;border:2px solid var(--tinta);background:#fff;padding:.35rem .9rem;font-weight:700;text-decoration:none;color:var(--tinta)}
.caminhos a:hover{background:var(--amarelo);color:var(--tinta)}
.anteprox{display:flex;justify-content:space-between;gap:1rem;margin-top:2.5rem;flex-wrap:wrap}
.anteprox a{display:flex;flex-direction:column;border:var(--borda);background:#fff;padding:.6rem 1rem;text-decoration:none;color:var(--tinta);font-weight:800;box-shadow:3px 3px 0 var(--tinta)}
.anteprox a:hover{background:var(--amarelo);color:var(--tinta)}
.anteprox small{font-weight:600;color:var(--suave);text-transform:uppercase;font-size:.7rem}
.anteprox__p{text-align:right;margin-left:auto}
.verbete__lateral{position:sticky;top:5.5rem;display:grid;gap:1.2rem}
.ficha{background:#fff;border:var(--borda);box-shadow:4px 4px 0 var(--tinta);padding:1rem}
.ficha h2{font-size:1.15rem;margin:0 0 .6rem}
.ficha dl{margin:0;font-size:.95rem}
.ficha dt{font-weight:800;font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;color:var(--suave);margin-top:.5rem}
.ficha dd{margin:0}
.ficha ul{margin:0;padding-left:1.1rem;font-size:.95rem}
.selos-mini{list-style:none;padding:0!important}
.selos-mini li{display:grid;gap:.15rem;margin-bottom:.7rem;font-size:.85rem;line-height:1.4}
.selos-mini .selo{justify-self:start}
@media (max-width:900px){
  .verbete__cab-in{grid-template-columns:1fr}
  .verbete__capa{max-width:340px}
  .verbete__corpo{grid-template-columns:1fr}
  .verbete__lateral{position:static}
  .item{grid-template-columns:1fr}
  .item .selo{justify-self:start;min-width:0}
}

/* conexões */
.mapa{width:100%;max-width:700px;display:block;margin:1rem auto;background:#fff;border:var(--borda);box-shadow:var(--sombra)}
.mapa a:hover rect{stroke:var(--rosa);stroke-width:4}
@media (max-width:640px){.mapa{display:none}}
.relacoes-lista,.top-lista{padding-left:1.2rem}
.relacoes-lista li,.top-lista li{margin-bottom:.35rem}
.relacoes-lista span,.top-lista span{color:var(--suave);font-size:.85rem}

/* rodapé */
.rodape{background:var(--tinta);color:#e9e5dd;border-top:var(--borda);padding:2.5rem 1rem 1.5rem;margin-top:2rem}
.rodape__in{max-width:var(--larg);margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr;gap:2rem}
.rodape img{background:#fff;padding:.3rem .6rem;border-radius:4px}
.rodape h2{color:var(--amarelo);font-size:1.1rem;margin:0 0 .6rem}
.rodape ul{list-style:none;margin:0;padding:0}
.rodape li{margin-bottom:.3rem}
.rodape a{color:#fff}
.rodape a:hover{color:var(--amarelo)}
.rodape__aviso,.rodape__copy{max-width:var(--larg);margin:1.5rem auto 0;font-size:.85rem;color:#c9c4ba}
.rodape__copy{margin-top:.6rem}
@media (max-width:760px){.rodape__in{grid-template-columns:1fr}}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}.card:hover,.botao:hover,.area:hover{transform:none}}
@media print{.topo,.rodape,.verbete__lateral,.filtros,.migalhas{display:none}}