/* Estilo do Estrela Solitária.
   Extraído de prototipo/v2/template.html (referência canônica do doc 09,
   seção 3). Não edite o site/ gerado; edite aqui. */

/* Modo claro (doc 22, A4): mesma alma, luz do dia. Tokens portados do
   protótipo; `--apoio-fraco` desce para #5A5A55 porque o #868681 do escuro dava
   3,35:1 sobre o fundo claro — medido antes de portar. */
html[data-tema="claro"]{
  --preto-base:#F6F5F1; --preto-card:#FFFFFF; --preto-fundo2:#EFEDE7;
  --branco-texto:#17171A; --cinza-apoio:#5A5A55; --linha:#E0DED6;
  --estrela:#17171A; --brasa:#7E6126; --brasa-esc:#A5854A;
  --apoio-fraco:#5A5A55;
}
html[data-tema="claro"] header{background:rgba(246,245,241,.94)}
html[data-tema="claro"] .listras{background-image:repeating-linear-gradient(115deg,transparent 0 26px,rgba(23,23,26,.03) 26px 52px)}
html[data-tema="claro"] .ir-thumb{background:linear-gradient(145deg,#FFFFFF,#EFEDE7)}
html[data-tema="claro"] .card-idolo .cari{background:#EFEDE7}
body{transition:background-color .35s ease,color .35s ease}

/* Alternador de tema */
.tema-btn{background:none;border:1px solid var(--linha);color:var(--cinza-apoio);border-radius:99px;width:34px;height:34px;cursor:pointer;font-size:1rem;line-height:1;transition:border-color .2s,color .2s}
.tema-btn:hover,.tema-btn:focus-visible{border-color:var(--brasa);color:var(--estrela);outline:none}

/* #6d6d68 foi banido em 04/08/2026: dá 3,5 a 3,8:1 e reprova em qualquer fundo
   nosso. Apareceu cinco vezes (disclaimer, nota de arte, aviso do hino, contexto
   dos cantos, nota legal) e cada uma foi corrigida separadamente até virar
   regra. Para texto de apoio use --apoio-fraco (5,1 a 5,4:1 no escuro). */
:root{
  --preto-base:#0A0A0B; --preto-card:#131316; --preto-fundo2:#0E0E10;
  --branco-texto:#F4F4F2; --cinza-apoio:#9B9B94; --linha:#26262B;
  --estrela:#E8E4D8; --brasa:#C8A24B; --brasa-esc:#8f7334; --alerta:#B4552D;
  /* Apoio fraco: mais discreto que --cinza-apoio, ainda assim legível. Era
     #868681 fixo em 14 lugares, o que daria 3,35:1 no modo claro. */
  --apoio-fraco:#868681;
  --serif:"Fraunces",Georgia,serif; --sans:"Inter",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{font-size:17px;scroll-behavior:smooth}
body{background:var(--preto-base);color:var(--branco-texto);font-family:var(--sans);line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font-family:var(--sans)}
.wrap{max-width:1120px;margin:0 auto;padding:0 1.5rem}
.listras{background-image:repeating-linear-gradient(115deg,transparent 0 26px,rgba(244,244,242,.025) 26px 52px)}

.demo-tag{background:#1C1607;color:var(--brasa);font-family:var(--mono);font-size:.68rem;text-align:center;padding:.32rem;letter-spacing:.08em;text-transform:uppercase;border-bottom:1px solid #3a2f12}

/* barra viva */
.barra-viva{background:var(--preto-card);border-bottom:1px solid var(--linha);font-family:var(--mono);font-size:.7rem;color:var(--cinza-apoio)}
.barra-viva .wrap{display:flex;align-items:center;gap:.8rem;padding:.42rem 1.5rem}
.pulso{width:8px;height:8px;border-radius:50%;background:var(--brasa);animation:pulsar 2s infinite}
@keyframes pulsar{0%,100%{opacity:1}50%{opacity:.25}}
.barra-viva b{color:var(--estrela);font-weight:600}
.barra-viva .prox{margin-left:auto}

/* header */
header{border-bottom:1px solid var(--linha);position:sticky;top:0;background:rgba(10,10,11,.94);backdrop-filter:blur(8px);z-index:50}
.topo{display:flex;align-items:center;justify-content:space-between;padding:.85rem 0;gap:1rem}
.marca{display:flex;align-items:center;gap:.75rem}
.marca-nome{font-family:var(--serif);font-weight:700;font-size:1.3rem}
.marca-sub{font-size:.64rem;color:var(--cinza-apoio);letter-spacing:.14em;text-transform:uppercase;display:block;margin-top:-3px;white-space:nowrap}
/* Com História e Hino no menu, 1,5rem de gap quebrava em duas linhas a 1280px
   (doc 24, seção 4). Medido antes e depois. */
nav.principal{display:flex;gap:1.05rem;font-size:.82rem;color:var(--cinza-apoio);flex-wrap:wrap;justify-content:flex-end}
@media(max-width:1100px){nav.principal{font-size:.78rem;gap:.85rem}}
nav.principal a:hover{color:var(--estrela)}
nav.principal .ativo{color:var(--estrela);border-bottom:2px solid var(--brasa);padding-bottom:2px}

/* palco do jogo */
.palco{border-bottom:1px solid var(--linha);background:var(--preto-fundo2)}
.palco-in{display:grid;grid-template-columns:1fr auto;gap:2rem;align-items:center;padding:1.6rem 0}
@media(max-width:820px){.palco-in{grid-template-columns:1fr}}
.palco .rotulo{font-family:var(--mono);font-size:.68rem;color:var(--brasa);letter-spacing:.14em;text-transform:uppercase;margin-bottom:.5rem}
.confronto{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap}
.time{display:flex;align-items:center;gap:.7rem;font-family:var(--serif);font-weight:700;font-size:1.5rem}
.vs{font-family:var(--mono);color:var(--cinza-apoio);font-size:.9rem}
.escudo-mini{width:40px;height:44px}
.palco-meta{font-family:var(--mono);font-size:.78rem;color:var(--cinza-apoio);text-align:right;line-height:2}
.palco-meta b{color:var(--estrela);font-size:1rem;display:block}
@media(max-width:820px){.palco-meta{text-align:left}}

/* heráldica viva: escudos reais */
.escudo-img{height:44px;width:auto;display:block}
.escudo-img.pequeno{height:36px}
.com-agua{position:relative;overflow:hidden}
.agua{position:absolute;pointer-events:none;opacity:.045;z-index:0}
.com-agua > .wrap, .com-agua > *:not(.agua){position:relative;z-index:1}
/* Escudo PROPORCIONAL à capa. A altura fixa de 310px da rodada 23 funcionava no
   protótipo, cuja manchete demo é longa; com manchete curta a seção mede 230px e
   o escudo transbordava, cortado pelo overflow:hidden. Regra que fica para a
   casa: arte decorativa em contêiner de altura variável nunca usa altura fixa. */
.agua.capa-agua{right:56px;top:50%;transform:translateY(-50%);height:78%;max-height:320px;opacity:.06}
/* Piso de altura, para a capa ter presença mesmo com manchete de três palavras. */
.capa{min-height:290px;display:flex;flex-direction:column;justify-content:center}
.agua.sala-agua{right:-60px;bottom:-80px;height:380px;transform:rotate(8deg)}
.agua.panteao-agua{left:-70px;top:-40px;height:420px;transform:rotate(-6deg)}
/* linha do tempo dos escudos: estilo linhagem */
.tempo{display:flex;gap:0;align-items:center;overflow-x:auto;padding:.5rem 0 1.2rem;scroll-snap-type:x proximity}
.tempo::-webkit-scrollbar{height:6px}
.tempo::-webkit-scrollbar-thumb{background:var(--linha);border-radius:3px}
.epoca{flex:none;width:152px;scroll-snap-align:start;background:transparent;border:1px solid transparent;border-radius:8px;padding:1.1rem .8rem;text-align:center;cursor:pointer;transition:border-color .3s,background .3s}
.epoca:hover,.epoca:focus-visible{border-color:rgba(232,228,216,.16);background:rgba(232,228,216,.025);outline:none}
.epoca .quadro{height:112px;display:grid;place-items:center;margin-bottom:.7rem}
.epoca img{max-height:108px;max-width:104px;width:auto;opacity:.82;transition:opacity .3s,filter .3s}
.epoca:hover img,.epoca:focus-visible img{opacity:1;filter:drop-shadow(0 0 12px rgba(200,162,75,.45))}
.epoca .periodo{font-family:var(--mono);font-size:.7rem;color:var(--cinza-apoio);letter-spacing:.06em;transition:color .3s}
.epoca:hover .periodo{color:var(--estrela)}
.epoca.vigente img{opacity:1}
.epoca.vigente .periodo{color:var(--brasa)}
.epoca.vigente::after{content:"escudo atual";font-family:var(--mono);font-size:.56rem;color:var(--brasa);letter-spacing:.1em;text-transform:uppercase;display:block;margin-top:.35rem}
.tempo-traco{flex:none;width:46px;height:1px;background:linear-gradient(90deg,transparent,var(--brasa-esc),transparent)}
.modal .m-escudo{height:130px;width:auto;display:block;margin:0 auto 1rem}
/* linhagem no rodapé */
.linhagem{border-top:1px solid var(--linha);padding:2.4rem 0;background:var(--preto-fundo2)}
.linhagem .wrap{display:flex;flex-direction:column;align-items:center;gap:1rem}
.linhagem .elo.hoje img{height:74px;width:auto;filter:drop-shadow(0 0 14px rgba(200,162,75,.4))}
.linhagem .legenda{text-align:center;font-family:var(--mono);font-size:.68rem;color:var(--cinza-apoio);letter-spacing:.12em;text-transform:uppercase}

/* manifesto */
.manifesto{border-bottom:1px solid var(--linha);background:var(--preto-base)}
/* Grade de três colunas: o dourado fica no centro GEOMÉTRICO exato, qualquer que
   seja o comprimento dos flancos. Como flex centralizado, a massa de texto maior
   à direita empurrava o eixo dourado para a esquerda do centro ótico. */
.manifesto .wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:2.4rem;padding:.9rem 1.5rem}
.manifesto .flanco{display:flex;align-items:center;gap:.9rem;color:var(--cinza-apoio)}
.manifesto .flanco.esq{justify-content:flex-end}
.manifesto .flanco.dir{justify-content:flex-start}
@media(max-width:860px){.manifesto .wrap{grid-template-columns:1fr;justify-items:center;gap:.5rem;text-align:center}
.manifesto .flanco{justify-content:center}}
.manifesto span{font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--cinza-apoio)}
.manifesto span b{color:var(--estrela);font-weight:600}
.manifesto .sep{color:var(--brasa);font-size:.6rem}

/* capa */
.capa{padding:2.6rem 0 2.2rem;border-bottom:1px solid var(--linha)}
.kicker{font-family:var(--mono);font-size:.72rem;color:var(--brasa);letter-spacing:.12em;text-transform:uppercase;margin-bottom:.7rem}
.capa h1{font-family:var(--serif);font-weight:600;font-size:2.35rem;line-height:1.15;max-width:18em}
.capa p{color:var(--cinza-apoio);max-width:40em;margin-top:.9rem}
.selo-fonte{font-family:var(--mono);font-size:.63rem;color:var(--cinza-apoio);border:1px solid var(--linha);border-radius:3px;padding:.08rem .42rem;letter-spacing:.05em}

/* grid feed + memória lateral */
.grade{display:grid;grid-template-columns:1.55fr 1fr;gap:3rem;padding:2.4rem 0;border-bottom:1px solid var(--linha)}
@media(max-width:860px){.grade{grid-template-columns:1fr}}
/* Sem a coluna da Memória (seção por feature flag), o radar ocupa a largura toda
   em vez de deixar meia página vazia. */
.grade.sem-aside{grid-template-columns:1fr}
.sec-titulo{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:1.1rem;gap:1rem}
.sec-titulo h2{font-family:var(--serif);font-size:1.45rem;font-weight:600;display:flex;align-items:center;gap:.5rem}
.sec-titulo .apoio{font-size:.76rem;color:var(--cinza-apoio)}
.estrela-mini{color:var(--estrela);font-size:.72em}

/* feed por hora */
.grupo-hora{position:relative;padding-left:1.6rem;border-left:1px solid var(--linha);margin-left:.4rem}
.grupo-hora + .grupo-hora{margin-top:1.6rem}
.no-hora{position:absolute;left:-.48rem;top:.1rem;width:.9rem;height:.9rem;border-radius:50%;background:var(--preto-base);border:2px solid var(--brasa)}
.hora-rotulo{font-family:var(--mono);font-size:.72rem;color:var(--brasa);letter-spacing:.1em;margin-bottom:.5rem}
.item-feed{padding:.65rem 0;border-bottom:1px solid var(--linha);display:grid;grid-template-columns:1fr auto;gap:.8rem;align-items:baseline}
.item-feed:last-child{border-bottom:none}
.item-feed:hover .if-titulo{color:var(--brasa)}
.if-titulo{font-weight:600;font-size:.95rem;transition:color .15s}
.if-resumo{color:var(--cinza-apoio);font-size:.84rem;margin-top:.15rem}
.if-meta{margin-top:.35rem;display:flex;gap:.5rem;align-items:center}
.selo-novo{font-family:var(--mono);font-size:.6rem;background:var(--brasa);color:var(--preto-base);border-radius:3px;padding:.08rem .4rem;font-weight:600;letter-spacing:.06em}
.fervura{margin-top:1.8rem;background:var(--preto-card);border:1px solid var(--linha);border-radius:6px;padding:1rem 1.2rem}
.fervura h3{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--cinza-apoio);margin-bottom:.5rem}
.fervura li{list-style:none;font-size:.84rem;color:var(--cinza-apoio);padding:.25rem 0;display:flex;gap:.55rem}
.fervura li::before{content:"~";color:var(--alerta);font-family:var(--mono)}

/* memoria lateral */
.efemeride{background:var(--preto-card);border:1px solid var(--linha);border-radius:6px;padding:1.3rem;margin-bottom:1.2rem}
.ef-data{font-family:var(--mono);font-size:.68rem;color:var(--brasa);letter-spacing:.1em;text-transform:uppercase}
.efemeride h3{font-family:var(--serif);font-size:1.2rem;font-weight:600;margin:.45rem 0 .5rem;line-height:1.3}
.efemeride p{font-size:.86rem;color:var(--cinza-apoio)}
.ef-fonte{font-size:.64rem;color:var(--apoio-fraco);margin-top:.7rem;font-family:var(--mono)}

/* sala de troféus */
.sala{padding:2.6rem 0;border-bottom:1px solid var(--linha)}
.trofeus{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1rem}
.trofeu{background:var(--preto-card);border:1px solid var(--linha);border-radius:6px;padding:1.2rem 1rem;text-align:center;cursor:pointer;transition:transform .15s,border-color .15s;position:relative;overflow:hidden}
.trofeu:hover,.trofeu:focus-visible{transform:translateY(-4px);border-color:var(--brasa);outline:none}
.trofeu .taca{margin-bottom:.6rem}
.trofeu .ano{font-family:var(--serif);font-weight:900;font-size:1.7rem;color:var(--estrela)}
.trofeu .comp{font-size:.76rem;color:var(--cinza-apoio);margin-top:.15rem}
.trofeu .clique{font-family:var(--mono);font-size:.6rem;color:var(--brasa);margin-top:.6rem;letter-spacing:.08em;text-transform:uppercase;opacity:0;transition:opacity .15s}
.trofeu:hover .clique{opacity:1}
.trofeu.destaque{border-color:var(--brasa-esc)}
.trofeu.destaque::after{content:"★";position:absolute;top:.5rem;right:.7rem;color:var(--brasa);font-size:.8rem}

/* panteão */
.panteao{padding:2.6rem 0;border-bottom:1px solid var(--linha);background:var(--preto-fundo2)}
/* Fileira horizontal rolável: 11 ídolos numa grade viravam um paredão que
   empurrava o resto da home para baixo. Rolar na horizontal é o gesto certo
   para uma galeria de retratos (protótipo v2, 04/08/2026). */
.idolos-grid{display:flex;gap:1rem;overflow-x:auto;padding-bottom:1rem;scroll-snap-type:x proximity}
.idolos-grid::-webkit-scrollbar{height:6px}
.idolos-grid::-webkit-scrollbar-thumb{background:var(--linha);border-radius:3px}
.card-idolo{flex:none;width:156px;scroll-snap-align:start;background:var(--preto-card);border:1px solid var(--linha);border-radius:6px;padding:1.1rem .9rem;text-align:center;cursor:pointer;transition:transform .15s,border-color .15s}
.card-idolo:hover,.card-idolo:focus-visible{transform:translateY(-4px);border-color:var(--brasa);outline:none}
.card-idolo .cari{width:96px;height:96px;object-fit:cover;object-position:50% 22%;border-radius:50%;border:1px solid var(--linha);margin:0 auto .6rem;display:block;transition:border-color .2s}
.card-idolo:hover .cari{border-color:var(--brasa-esc)}
.card-idolo .nome{font-family:var(--serif);font-weight:700;font-size:1.02rem}
.card-idolo .era{font-family:var(--mono);font-size:.64rem;color:var(--brasa);margin-top:.1rem;letter-spacing:.06em}
.card-idolo .pos{font-size:.74rem;color:var(--cinza-apoio)}
.nota-arte{font-size:.66rem;color:var(--apoio-fraco);font-family:var(--mono);margin-top:1rem;text-align:center}

/* vozes */
.vozes{padding:2.6rem 0;border-bottom:1px solid var(--linha)}
.musicas{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem}
.card-musica{background:var(--preto-card);border:1px solid var(--linha);border-radius:6px;padding:1.2rem}
.card-musica h3{font-family:var(--serif);font-size:1.05rem;font-weight:600;display:flex;align-items:center;gap:.5rem}
.card-musica .letra{font-style:italic;color:var(--cinza-apoio);font-size:.86rem;margin:.6rem 0;border-left:2px solid var(--brasa-esc);padding-left:.7rem}
/* var(--apoio-fraco) dava 3,57:1 sobre o card e reprovava. Terceira vez que este mesmo
   cinza aparece: ele não serve para texto, só para separador. */
.card-musica .contexto{font-size:.74rem;color:var(--apoio-fraco)}
.tocar{display:flex;gap:.5rem;margin-top:.9rem}
.tocar a{display:inline-flex;align-items:center;gap:.35rem;font-size:.72rem;font-weight:600;border:1px solid var(--linha);border-radius:99px;padding:.3rem .8rem;color:var(--cinza-apoio);transition:.15s}
.tocar a:hover{border-color:var(--brasa);color:var(--estrela)}

/* cinema */
.cinema{padding:2.6rem 0;border-bottom:1px solid var(--linha);background:var(--preto-fundo2)}
.colecao-titulo{font-family:var(--mono);font-size:.7rem;color:var(--brasa);letter-spacing:.12em;text-transform:uppercase;margin:1.4rem 0 .8rem}
.videos{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}
.card-video{background:var(--preto-card);border:1px solid var(--linha);border-radius:6px;overflow:hidden;cursor:pointer;transition:transform .15s,border-color .15s}
.card-video:hover{transform:translateY(-3px);border-color:var(--brasa)}
.thumb{aspect-ratio:16/9;background:linear-gradient(135deg,#17171b,#0d0d0f);display:grid;place-items:center;position:relative}
.thumb .play{width:44px;height:44px;border-radius:50%;background:rgba(232,228,216,.92);display:grid;place-items:center;color:var(--preto-base);font-size:1rem}
.thumb .dur{position:absolute;bottom:.5rem;right:.6rem;font-family:var(--mono);font-size:.62rem;background:rgba(10,10,11,.85);padding:.1rem .4rem;border-radius:3px;color:var(--estrela)}
.card-video .cv-info{padding:.8rem .9rem 1rem}
.card-video h3{font-size:.9rem;font-weight:600;line-height:1.35}
.card-video .cv-meta{font-size:.7rem;color:var(--cinza-apoio);font-family:var(--mono);margin-top:.3rem}

/* heráldica */
.heraldica{padding:2.6rem 0;border-bottom:1px solid var(--linha)}
.marcos{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1rem}
.marco{background:var(--preto-card);border:1px solid var(--linha);border-radius:6px;padding:1.4rem;text-align:center;cursor:pointer;transition:transform .15s,border-color .15s}
.marco:hover,.marco:focus-visible{transform:translateY(-4px);border-color:var(--brasa);outline:none}
.marco .ano{font-family:var(--serif);font-weight:900;font-size:1.5rem;color:var(--estrela);margin-top:.7rem}
.marco .desc{font-size:.8rem;color:var(--cinza-apoio);margin-top:.2rem}
.nota-legal{font-size:.68rem;color:var(--apoio-fraco);font-family:var(--mono);margin-top:1.2rem;max-width:52em}

/* painel + boletim */
.painel{padding:2.4rem 0;border-bottom:1px solid var(--linha)}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
@media(max-width:820px){.tiles{grid-template-columns:repeat(2,1fr)}}
.painel-stat{background:var(--preto-card);border:1px solid var(--linha);border-radius:6px;padding:1.1rem}
.ps-rotulo{font-size:.7rem;color:var(--cinza-apoio);letter-spacing:.06em;text-transform:uppercase}
.ps-num{font-family:var(--mono);font-size:1.8rem;font-weight:600;margin:.25rem 0 .05rem}
.ps-fonte{font-size:.6rem;color:var(--apoio-fraco);font-family:var(--mono);margin-top:.5rem}
.boletim{padding:2.8rem 0;text-align:center}
.boletim h2{font-family:var(--serif);font-size:1.65rem;font-weight:600;margin-bottom:.4rem}
.boletim p{color:var(--cinza-apoio);max-width:32em;margin:0 auto 1.3rem}
.boletim form{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap}
.boletim input{background:var(--preto-card);border:1px solid var(--linha);border-radius:6px;padding:.68rem 1rem;color:var(--branco-texto);font-size:.9rem;width:min(320px,80vw);font-family:var(--sans)}
.boletim input:focus{outline:none;border-color:var(--brasa)}
.boletim button{background:var(--estrela);color:var(--preto-base);border:none;border-radius:6px;padding:.68rem 1.4rem;font-weight:600;font-size:.9rem;cursor:pointer}
.boletim button:hover{background:var(--brasa)}

footer{border-top:1px solid var(--linha);padding:2rem 0 3rem;color:var(--cinza-apoio);font-size:.78rem}
/* var(--apoio-fraco) dava 3,80:1 e reprovava no Lighthouse. É o aviso legal do rodapé:
   contraste baixo aqui é problema de acessibilidade E de jurídico. var(--apoio-fraco) dá
   5,41:1 e continua visualmente secundário. Medido em 04/08/2026. */
footer .disclaimer{max-width:46em;margin-top:.6rem;color:var(--apoio-fraco)}
.f-linha{display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap}

/* modal */
.modal-fundo{position:fixed;inset:0;background:rgba(5,5,6,.8);backdrop-filter:blur(4px);display:none;place-items:center;z-index:100;padding:1.5rem}
.modal-fundo.aberto{display:grid}
.modal{background:var(--preto-card);border:1px solid var(--brasa-esc);border-radius:8px;max-width:600px;width:100%;max-height:82vh;overflow:auto;padding:2rem}
.modal .m-kicker{font-family:var(--mono);font-size:.68rem;color:var(--brasa);letter-spacing:.12em;text-transform:uppercase}
.modal h3{font-family:var(--serif);font-size:1.6rem;font-weight:700;margin:.5rem 0 .9rem;line-height:1.2}
.modal .m-corpo{color:var(--cinza-apoio);font-size:.94rem}
.modal .m-corpo p{margin-bottom:.8rem}
.modal .m-cari{width:120px;height:120px;object-fit:cover;object-position:50% 22%;border-radius:50%;border:1px solid var(--brasa-esc);display:block;margin:0 auto 1rem}
.modal .m-numeros{display:flex;gap:1.6rem;margin:1.1rem 0;flex-wrap:wrap}
.modal .m-num b{font-family:var(--mono);font-size:1.3rem;color:var(--estrela);display:block}
.modal .m-num span{font-size:.7rem;color:var(--cinza-apoio)}
.modal .m-fontes{border-top:1px solid var(--linha);margin-top:1.2rem;padding-top:.8rem;font-family:var(--mono);font-size:.66rem;color:var(--apoio-fraco)}
.modal .fechar{float:right;background:none;border:1px solid var(--linha);color:var(--cinza-apoio);border-radius:6px;width:32px;height:32px;cursor:pointer;font-size:1rem}
.modal .fechar:hover{border-color:var(--brasa);color:var(--estrela)}

/* ---- Página da resenha (doc 13, seção 4) ---------------------------------- */
.selo-resenha{font-family:var(--mono);font-size:.63rem;color:var(--brasa);border:1px solid var(--brasa-esc);border-radius:3px;padding:.08rem .42rem;letter-spacing:.08em}
.resenha{max-width:44rem;margin:2.5rem auto 3.5rem;padding:0 .2rem}
.resenha h1{font-family:var(--serif);font-size:clamp(1.7rem,4.4vw,2.6rem);line-height:1.15;letter-spacing:-.01em;margin:0 0 1rem}
.resenha .entradilha{font-size:1.12rem;line-height:1.6;color:var(--branco-texto);opacity:.92;margin:0 0 1.4rem}
.r-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;font-family:var(--mono);font-size:.7rem;color:var(--cinza-apoio);letter-spacing:.04em;text-transform:uppercase;padding-bottom:1.4rem;border-bottom:1px solid var(--linha)}
.r-meta .sep{color:var(--brasa-esc)}
.aviso-fervura{margin:1.4rem 0 0;padding:.8rem 1rem;border-left:3px solid var(--alerta);background:var(--preto-card);font-size:.9rem;color:var(--cinza-apoio)}
.r-corpo{margin-top:1.8rem}
.r-corpo p{font-size:1.06rem;line-height:1.72;margin:0 0 1.25rem}
.r-corpo p:first-child::first-letter{font-family:var(--serif);font-size:2.9rem;float:left;line-height:.86;padding:.16rem .5rem 0 0;color:var(--brasa)}
.r-fontes{margin-top:2.6rem;padding-top:1.4rem;border-top:1px solid var(--linha)}
.r-fontes h2{font-family:var(--mono);font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--brasa);margin:0 0 .5rem}
.r-fontes .apoio{font-size:.82rem;color:var(--cinza-apoio);margin:0 0 1rem}
.r-fontes ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.6rem}
.r-fontes li{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;font-size:.95rem}
.r-voltar{margin-top:2.4rem;font-family:var(--mono);font-size:.78rem;letter-spacing:.06em}

/* Hinos (doc 25, parte 2): área própria, letra em coluna de canto */
.hinos{padding:3rem 0;border-bottom:1px solid var(--linha);background:var(--preto-fundo2)}
.hino-principal{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start;margin-bottom:2.5rem}
@media(max-width:860px){.hino-principal{grid-template-columns:1fr;gap:1.6rem}}
.letra-hino{font-family:var(--serif);font-size:1.22rem;line-height:1.95;color:var(--estrela);border-left:3px solid var(--brasa-esc);padding-left:1.4rem;white-space:pre-line}
.letra-hino .refrao{display:block;color:var(--brasa);font-weight:600}
.hino-meta{font-family:var(--mono);font-size:.68rem;color:var(--cinza-apoio);letter-spacing:.08em;text-transform:uppercase;margin-bottom:.7rem}
.hino-ctx p{color:var(--cinza-apoio);font-size:.95rem;margin-bottom:.9rem}
.hino-ctx b{color:var(--estrela);font-weight:600}
.hinos .aviso-letra{font-family:var(--mono);font-size:.68rem;color:var(--apoio-fraco);margin-top:1rem}
.outros-hinos{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
@media(max-width:860px){.outros-hinos{grid-template-columns:1fr}}
.card-hino{background:var(--preto-card);border:1px solid var(--linha);border-radius:6px;padding:1.4rem}
.card-hino h3{font-family:var(--serif);font-size:1.12rem;font-weight:600;margin-bottom:.2rem}
.card-hino .autores{font-family:var(--mono);font-size:.66rem;color:var(--brasa);letter-spacing:.06em;text-transform:uppercase;margin-bottom:.8rem}
.card-hino .abre{font-family:var(--serif);font-size:1.02rem;color:var(--estrela);font-style:italic;line-height:1.6;margin-bottom:.7rem}
.card-hino p{font-size:.86rem;color:var(--cinza-apoio);margin-bottom:.8rem}
/* #7a7a74 do protótipo dá 4,0:1 e reprovaria; o token já resolve nos dois temas. */
.card-hino .pendente{font-family:var(--mono);font-size:.64rem;color:var(--apoio-fraco)}

/* ---- Colofão da voz e página Os Padrinhos (doc 15, bloco B-bis) ------------ */
.colofao{margin-top:2.4rem;padding-top:1.2rem;border-top:1px solid var(--linha);font-family:var(--mono);font-size:.76rem;color:var(--cinza-apoio);letter-spacing:.03em;display:flex;flex-wrap:wrap;align-items:center;gap:.42rem}
.colofao .voz{color:var(--brasa);font-weight:600;text-decoration:none;border-bottom:1px solid var(--brasa-esc)}
.colofao .voz:hover{color:var(--estrela)}
.colofao .sep{color:var(--linha)}
.transparencia{margin:1.8rem 0 2.4rem;padding:1.1rem 1.2rem;border-left:3px solid var(--brasa-esc);background:var(--preto-card)}
.transparencia h2{font-family:var(--mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--brasa);margin:0 0 .6rem}
.transparencia p{margin:0;font-size:.94rem;line-height:1.65;color:var(--cinza-apoio)}
.padrinho{margin-bottom:2.6rem;scroll-margin-top:1.5rem}
.padrinho h2{font-family:var(--serif);font-size:1.5rem;margin:0 0 .5rem}
.p-linha{display:flex;flex-wrap:wrap;gap:.45rem;margin:0 0 .9rem}
.padrinho .pendente{font-size:.86rem;border-left:2px solid var(--linha);padding-left:.8rem}
.epigrafe{margin:1rem 0;padding-left:1rem;border-left:2px solid var(--brasa-esc);font-family:var(--serif);font-size:1.08rem;font-style:italic}
.epigrafe cite{display:block;margin-top:.5rem;font-family:var(--mono);font-size:.7rem;font-style:normal;color:var(--cinza-apoio)}

/* ---- Botão de vídeo no modal da Sala de Troféus (só quando há link) -------- */
.modal .m-video{display:inline-flex;align-items:center;gap:.45rem;margin-top:1rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--brasa);border:1px solid var(--brasa-esc);border-radius:4px;padding:.5rem .9rem;text-decoration:none;transition:background .15s,color .15s}
.modal .m-video:hover{background:var(--brasa-esc);color:var(--preto-base)}

/* ---- Sprint de identidade (doc 17) ---------------------------------------- */
.manifesto .so-bota{color:var(--brasa);font-size:1.05rem;font-weight:700;letter-spacing:.16em;text-shadow:0 0 14px rgba(200,162,75,.55),0 0 34px rgba(200,162,75,.25)}

/* Thumb editorial por categoria (doc 16). Arte própria, sempre: nenhuma foto de
   terceiro entra aqui. A regra :has faz o item sem categoria mapeada degradar
   para o layout de duas colunas, sem buraco. */
.ir-thumb{width:64px;height:64px;flex:none;border-radius:6px;border:1px solid var(--linha);background:linear-gradient(145deg,#17171b,#0e0e10);display:grid;place-items:center;overflow:hidden}
.ir-thumb img{width:40px;height:auto;opacity:.9}
.ir-thumb svg{width:30px;height:30px}
.ir-thumb.destaque-thumb{border-color:var(--brasa-esc)}
.item-feed:has(.ir-thumb){grid-template-columns:auto 1fr auto;align-items:center}

/* História */
.historia{padding:2.6rem 0;border-bottom:1px solid var(--linha)}
.historia .prosa{max-width:46em;color:var(--cinza-apoio);font-size:1rem}
.historia .prosa p{margin-bottom:1.1rem}
.historia .prosa b{color:var(--estrela);font-weight:600}
.historia .abre{font-family:var(--serif);font-size:1.35rem;color:var(--branco-texto);line-height:1.45}

/* Hino */
.hino{padding:2.6rem 0;border-bottom:1px solid var(--linha);background:var(--preto-fundo2)}
.hino-grid{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;align-items:start}
@media(max-width:820px){.hino-grid{grid-template-columns:1fr}}
.hino .verso{font-family:var(--serif);font-size:1.5rem;line-height:1.5;color:var(--estrela);border-left:3px solid var(--brasa-esc);padding-left:1.2rem;margin:1rem 0}
.hino .verso small{display:block;font-family:var(--mono);font-size:.66rem;color:var(--cinza-apoio);margin-top:.6rem;letter-spacing:.06em}
.hino .contexto{color:var(--cinza-apoio);font-size:.95rem}
.hino .contexto p{margin-bottom:.9rem}
/* var(--apoio-fraco) dava 3,71:1 e reprovaria como as outras notas. É o AVISO DE DIREITOS
   AUTORAIS: contraste baixo aqui é problema jurídico, não só de acessibilidade. */
.hino .aviso-letra{font-family:var(--mono);font-size:.68rem;color:var(--apoio-fraco);margin-top:1rem}

/* ---- Cantos, Filmes e Escudos (curadoria da rodada 21) -------------------- */
.card-musica .origem-canto{font-family:var(--mono);font-size:.62rem;color:var(--apoio-fraco);margin-top:.7rem;letter-spacing:.04em}
.card-hino{display:block;text-decoration:none;color:inherit;border-color:var(--brasa-esc)}
.card-hino:hover{border-color:var(--brasa)}
.card-hino h3{color:var(--brasa)}
.card-hino .tocar span{font-family:var(--mono);font-size:.68rem;color:var(--brasa);letter-spacing:.06em}
.card-video .cv-desc{font-size:.76rem;color:var(--cinza-apoio);margin:.35rem 0 .5rem;line-height:1.45}
.epoca.origem .quadro{border-color:var(--brasa-esc)}

/* ---- Ritmo de superfície (doc 24, seção 3) -------------------------------- */
/* O preto chapado do topo ao rodapé é elegante em pouca quantidade e cansativo
   em página longa: sem variação, o olho perde a hierarquia. Variações de 2% a 3%
   de luz — sentem-se, não se veem. O que NÃO foi feito também é decisão: nada de
   borda em tudo (fragmenta e imita portal), nada de sombra (não pertence a fundo
   preto) e nada de mais dourado (um acento por viewport, e a faixa já usa o dela). */
.capa{background:linear-gradient(180deg,rgba(232,228,216,.022),transparent 62%)}
.item-feed{border-radius:6px;padding-left:.7rem;padding-right:.7rem;margin-left:-.7rem;transition:background .18s}
.item-feed:hover{background:rgba(232,228,216,.028)}
.grupo-hora{border-left-color:rgba(232,228,216,.09)}
.no-hora{box-shadow:0 0 0 4px var(--preto-base)}
.fervura{background:linear-gradient(180deg,rgba(180,85,45,.05),var(--preto-card))}
.sec-titulo h2{letter-spacing:-.01em}
/* Respiro vertical uniforme entre as seções grandes: cadência de revista. */
.sala,.panteao,.vozes,.cinema,.heraldica,.historia,.hino{padding-top:3rem;padding-bottom:3rem}

/* O véu e o calor são pintados com marfim e alerta translúcidos, que no tema
   claro ficariam lavados ou sujos. Refeitos com as tintas do claro. */
html[data-tema="claro"] .capa{background:linear-gradient(180deg,rgba(23,23,26,.022),transparent 62%)}
html[data-tema="claro"] .item-feed:hover{background:rgba(23,23,26,.035)}
html[data-tema="claro"] .grupo-hora{border-left-color:rgba(23,23,26,.10)}
html[data-tema="claro"] .fervura{background:linear-gradient(180deg,rgba(180,85,45,.07),var(--preto-card))}

/* ---- Palco do Jogo: hierarquia do confronto (doc 26, seção 6) ------------- */
/* Cabeçalho é sticky; sem isto o clique no menu esconde o título da seção. */
section[id]{scroll-margin-top:86px}
/* Placa circular translúcida: escudo escuro de adversário (Corinthians, Vasco,
   Atlético-MG) sumiria sobre o preto da casa. Medido pelo arquiteto em folha
   de contato antes de entrar. */
.escudo-adv{width:44px;height:44px;border-radius:50%;background:rgba(232,228,216,.05);border:1px solid var(--linha);display:grid;place-items:center;flex:none}
/* O adversário é informação, não protagonista: dessaturado e recuado. No hover
   acende, para quem quiser conferir de perto. */
.escudo-adv img{max-width:30px;max-height:30px;filter:grayscale(.75) brightness(.8);opacity:.62;transition:filter .25s,opacity .25s}
.palco-in:hover .escudo-adv img{filter:grayscale(.25) brightness(.95);opacity:.9}
.time.adversario{color:var(--cinza-apoio);font-weight:600;font-size:1.32rem}
/* O nosso escudo manda na cena: maior e com o mesmo halo dourado do fecho. */
.time.casa .escudo-img{height:52px;filter:drop-shadow(0 0 12px rgba(200,162,75,.35))}
.time.casa{font-size:1.62rem}
/* Marcador neutro quando não há arte do adversário. */
.escudo-adv.vazio{color:var(--cinza-apoio);font-size:1rem;font-family:var(--mono)}
html[data-tema="claro"] .escudo-adv{background:rgba(23,23,26,.05)}

/* ---- Palco: ficha viva do jogo (doc 27) ---------------------------------- */
/* "Onde assistir" só existe no dia e durante o jogo; antes é ruído, depois é
   informação morta. Quem decide é `Jogo.como_contexto()`, não o CSS. */
.onde-assistir{margin-top:.9rem;display:flex;align-items:center;gap:.7rem;flex-wrap:wrap}
.onde-assistir .rotulo-tv{font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--brasa);display:inline-flex;align-items:center;gap:.35rem}
.emissora{font-family:var(--mono);font-size:.68rem;color:var(--estrela);border:1px solid var(--brasa-esc);border-radius:99px;padding:.16rem .68rem;background:rgba(200,162,75,.07)}
/* Selo de dia de jogo. Pulsa como a barra viva, que é a linguagem da casa para
   "isto está acontecendo agora". */
.selo-jogo{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--preto-base);background:var(--brasa);border-radius:99px;padding:.1rem .55rem;margin-left:.5rem;animation:pulsar 2s infinite}
.selo-jogo.agora{background:var(--alerta);color:var(--branco-texto)}
/* Véu dourado discreto quando é dia de jogo: a casa muda de temperatura. */
.palco.matchday{background-image:linear-gradient(180deg,rgba(200,162,75,.05),transparent 70%)}
html[data-tema="claro"] .emissora{background:rgba(126,97,38,.08)}

/* ---- Paginação do feed e fileira dos Filmes (doc 28) --------------------- */
/* A home mostra as 10 mais recentes; o resto vive em /noticias/N/. O pé só
   aparece quando há para onde ir, e quem decide isso é o template, não o CSS.
   Contrastes medidos em 05/08/2026: botão 17,97:1 no escuro e 16,40:1 no claro;
   hover 8,22:1 e 5,31:1; discreto 7,08:1 e 6,36:1. Todos passam em AA. */
.mais-noticias{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:1.6rem;padding-top:1.2rem;border-top:1px solid var(--linha);flex-wrap:wrap}
.mais-noticias .contagem{font-family:var(--mono);font-size:.68rem;color:var(--cinza-apoio);letter-spacing:.06em}
.mais-noticias .navega{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}
.btn-arquivo{display:inline-flex;align-items:center;gap:.5rem;font-size:.84rem;font-weight:600;color:var(--preto-base);background:var(--estrela);border-radius:6px;padding:.6rem 1.2rem;transition:background .18s,color .18s,border-color .18s}
.btn-arquivo:hover{background:var(--brasa)}
.btn-arquivo.discreto{background:transparent;color:var(--cinza-apoio);border:1px solid var(--linha)}
.btn-arquivo.discreto:hover{background:transparent;color:var(--estrela);border-color:var(--brasa)}

/* Filmes numa fileira só, que rola da esquerda para a direita. O encaixe suave
   (scroll-snap) evita o card cortado pela metade no fim do arrasto. */
.videos-linha{display:flex;gap:1rem;overflow-x:auto;padding-bottom:1rem;scroll-snap-type:x proximity}
.videos-linha::-webkit-scrollbar{height:6px}
.videos-linha::-webkit-scrollbar-thumb{background:var(--linha);border-radius:3px}
.videos-linha .card-video{flex:none;width:268px;scroll-snap-align:start}
.card-video{position:relative}
.card-video .colecao-tag{font-family:var(--mono);font-size:.6rem;color:var(--brasa);letter-spacing:.08em;text-transform:uppercase}
/* O texto do selo vem do DADO (data-selo), não daqui: só quem tem audiência
   medida ganha "mais visto"; ordem curada recebe "começa por aqui" (doc 28). */
.card-video.top::before{content:attr(data-selo);position:absolute;top:.5rem;left:.6rem;font-family:var(--mono);font-size:.58rem;color:var(--preto-base);background:var(--brasa);padding:.12rem .45rem;border-radius:99px;z-index:2}

/* ---- Palco sem ficha (doc 29) --------------------------------------------- */
/* A seção não some mais quando falta dado: ela fica no ar dizendo que a data
   ainda não está confirmada. O tom é discreto de propósito, para não competir
   com um card de jogo de verdade, mas presente, porque o buraco silencioso foi
   o defeito que essa correção veio consertar. */
.palco.aguardando .confronto .adversario{opacity:.45}
.palco-aviso{margin-top:.8rem;max-width:52ch;font-size:.82rem;line-height:1.5;color:var(--apoio-fraco)}
.escudo-adv.vazio{display:inline-flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:.8rem;color:var(--cinza-apoio)}

/* ---- "O que ninguém conta" e a escalação no modal (doc 25, entregue no 29) -- */
/* Duas partes que o editor pediu desde o começo e que os verbetes curtos não
   tinham: o bloco de curiosidades verificadas e o time que começou a partida.
   O texto das curiosidades vem do YAML da curadoria; o campo é desenho nosso,
   nunca foto de terceiro (doc 16). */
.modal .m-curiosidades{margin-top:1.4rem;padding:1rem 1.1rem;background:var(--preto-fundo2);border:1px solid var(--linha);border-radius:6px}
.modal .m-curiosidades h4{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--brasa);margin-bottom:.7rem}
.modal .m-curiosidades ul{list-style:none;display:grid;gap:.6rem}
.modal .m-curiosidades li{font-size:.86rem;line-height:1.55;color:var(--cinza-apoio);padding-left:1.1rem;position:relative}
.modal .m-curiosidades li::before{content:"★";position:absolute;left:0;top:.05rem;color:var(--brasa-esc);font-size:.7rem}
.modal .m-escalacao{display:block;width:100%;height:auto;margin-top:1.4rem;border:1px solid var(--linha);border-radius:6px}
html[data-tema="claro"] .modal .m-curiosidades{background:rgba(23,23,26,.03)}