/* site.css — site público da Seiwakai. Visual herdado do site HTML de 2026 (legado-php/Site),
   que já reproduzia o Blogger: preto, vermelho, Oswald nos títulos.
   Fontes hospedadas aqui (OFL, ver fontes/LICENCA-*.txt): nada de Google Fonts — a CSP bloqueia,
   e cada visita entregaria o IP do visitante ao Google. */
/* Bandeiras: o Windows não desenha bandeira em emoji (mostra "BR"). Esta fonte entra SÓ nos caracteres de
   bandeira (unicode-range) — o resto do texto não muda. Twemoji Country Flags: código MIT (TalkJS), desenho
   CC-BY 4.0 (Twemoji) — crédito e licença em /site/fontes/LICENCA-bandeiras-twemoji.md */
@font-face{font-family:'Bandeiras';font-display:swap;src:url(fontes/bandeiras-twemoji.woff2) format('woff2');
  unicode-range:U+1F1E6-1F1FF,U+1F3F4,U+E0062-E0063,U+E0065,U+E0067,U+E006C,U+E006E,U+E0073-E0074,U+E0077,U+E007F}
@font-face{font-family:'Oswald';font-style:normal;font-weight:500;font-display:swap;src:url(fontes/oswald-latin-500-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Oswald';font-style:normal;font-weight:600;font-display:swap;src:url(fontes/oswald-latin-600-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Open Sans';font-style:normal;font-weight:400;font-display:swap;src:url(fontes/open-sans-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Open Sans';font-style:normal;font-weight:600;font-display:swap;src:url(fontes/open-sans-latin-600-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Open Sans';font-style:normal;font-weight:700;font-display:swap;src:url(fontes/open-sans-latin-700-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* russo (SW-52 etapa 4): o mesmo par de fontes com o alfabeto cirílico; o navegador só baixa se a página tiver cirílico */
@font-face{font-family:'Oswald';font-style:normal;font-weight:500;font-display:swap;src:url(fontes/oswald-cyrillic-500-normal.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Oswald';font-style:normal;font-weight:600;font-display:swap;src:url(fontes/oswald-cyrillic-600-normal.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Open Sans';font-style:normal;font-weight:400;font-display:swap;src:url(fontes/open-sans-cyrillic-400-normal.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Open Sans';font-style:normal;font-weight:600;font-display:swap;src:url(fontes/open-sans-cyrillic-600-normal.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Open Sans';font-style:normal;font-weight:700;font-display:swap;src:url(fontes/open-sans-cyrillic-700-normal.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#0b0b0b;--bg2:#131313;--bg3:#1a1a1a;--card:#161616;
  --red:#c41e2a;--redh:#d4343f;--tx:#e8e8e8;--tx2:#aaa;--txm:#777;--brd:#2a2a2a;
  --f:'Bandeiras','Open Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --ft:'Bandeiras','Oswald','Arial Narrow',Impact,sans-serif;
}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--f);background:var(--bg);color:var(--tx);line-height:1.6;overflow-x:hidden;min-height:100vh;display:flex;flex-direction:column}
main{flex:1 0 auto}   /* página curta: o rodapé fica no pé da tela, não no meio */
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
.largura{max-width:1100px;margin:0 auto}
.largura-texto{max-width:780px;margin:0 auto}
.vazio{color:var(--txm);padding:1.5rem 0}

/* ---------- menu (como no Blogger: sem barra de marca; na pagina inicial, POR CIMA da foto) */
.menu{background:#0e0e0e;border-bottom:1px solid var(--brd);position:sticky;top:0;z-index:100}
/* na inicial o menu fica sobre a foto e PRESO no topo ao rolar (Fernando, 28/10: "navegando para baixo, o menu some").
   Fixed, e não sticky, para não empurrar a abertura (que tem a altura da tela). Ao rolar, o fundo escurece (::before) para
   o menu não ficar transparente por cima do texto; navegador sem animação por rolagem: o fundo já vem escuro. */
.menu.sobre{position:fixed;top:0;left:0;right:0;background:linear-gradient(to bottom,rgba(0,0,0,.55),rgba(0,0,0,0));border:0}
.menu.sobre::before{content:'';position:absolute;inset:0;background:#0e0e0e;border-bottom:1px solid var(--brd);opacity:.94;z-index:-1;pointer-events:none}
@supports (animation-timeline:scroll()){
  .menu.sobre::before{opacity:0;animation:menu-fundo linear both;animation-timeline:scroll(root);animation-range:0 160px}
  @keyframes menu-fundo{to{opacity:.94}}
}
.menu-itens{display:flex;justify-content:center;flex-wrap:wrap;max-width:1200px;margin:0 auto}
.menu-itens>a,.sub>summary{padding:.9rem 1rem;font-family:var(--ft);font-size:.86rem;font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:#ddd;cursor:pointer;transition:color .2s,background .2s;display:block}
.menu.sobre .menu-itens>a,.menu.sobre .sub>summary{color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.8)}
.menu-itens>a:hover,.sub>summary:hover{color:#fff;background:rgba(255,255,255,.06)}
.menu-itens>a[aria-current],.sub-itens a[aria-current]{color:#fff;box-shadow:inset 0 -2px 0 var(--red)}
.sub{position:relative}
.sub>summary{list-style:none}
.sub>summary::-webkit-details-marker{display:none}
.sub>summary::after{content:' ⌄';font-size:.8rem}
.sub-itens{position:absolute;top:100%;inset-inline-start:0;background:#151515;border:1px solid var(--brd);min-width:210px;z-index:200}
.sub-itens a{display:block;padding:.6rem 1.1rem;font-size:.8rem;color:var(--tx2);border-bottom:1px solid var(--brd);transition:all .2s}
.sub-itens a:last-child{border:none}
.sub-itens a:hover{background:var(--bg3);color:#fff;padding-inline-start:1.4rem}

/* ---------- herói */
.heroi{position:relative;height:100vh;min-height:520px;overflow:hidden;background:#000}
.heroi-fundo{position:absolute;inset:0;background:url(img/hero.jpg) center/cover no-repeat}
.heroi::after{content:"";position:absolute;left:0;right:0;bottom:0;height:12%;background:linear-gradient(to bottom,rgba(11,11,11,0),var(--bg))}
.heroi-kanji{mix-blend-mode:screen;position:absolute;z-index:2;top:-2%;left:50%;transform:translateX(-50%);height:88%;width:auto;animation:surge 2s ease-out}
@keyframes surge{from{opacity:0;transform:translateX(-50%) scale(.95)}to{opacity:1;transform:translateX(-50%) scale(1)}}

/* abertura da inicial (Fernando, 28/10): foto + boas-vindas ocupam a tela do aparelho, seja qual for; os troféus
   começam abaixo dela. Sobrou espaço: a FOTO cresce (o texto fica logo abaixo dela, sem vão). Não coube: a abertura
   cresce até o fim do texto (min-height). svh = a tela com as barras do navegador à mostra, para o troféu não espiar. */
.abertura{display:flex;flex-direction:column;min-height:100vh;min-height:100svh}
.abertura .heroi{flex:1 0 auto}
.abertura-texto{flex:none}
.premiacoes-secao{padding-top:0}.premiacoes-secao .premiacoes{margin-top:2rem}
/* no celular a FOTO se ajusta ao que sobra da tela depois do texto (cresce ou encolhe), para o texto inteiro caber
   na 1ª tela mesmo com a barra de endereço do navegador (28/10, print dele: o fim do texto cortado). Piso de 300px. */
@media(max-width:768px){.abertura .heroi{height:auto;min-height:300px;flex:1 1 auto}}

/* ---------- seções */
.secao{padding:3rem 2rem}
.escura{background:var(--bg2)}
.titulo-secao{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:1.6rem;padding-bottom:.6rem;border-bottom:2px solid var(--red)}
.titulo-secao h2{font-family:var(--ft);font-size:1.3rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.titulo-secao a{font-size:.75rem;color:var(--red);font-weight:600;text-transform:uppercase;letter-spacing:.05em}
.boasvindas{text-align:center;max-width:760px}
.boasvindas h1,.boasvindas h2{font-family:var(--ft);font-size:1.2rem;font-weight:500;letter-spacing:.04em;text-transform:uppercase;margin-bottom:.8rem;line-height:1.5}
.boasvindas p{color:var(--tx2);font-size:.95rem;line-height:1.75}
/* premiações do Kancho (SW-40): os 6 quadros com troféu do Blogger, 3 por linha; no celular, 1 */
.boasvindas:has(.premiacoes){max-width:1100px}.boasvindas:has(.premiacoes)>p{max-width:760px;margin:0 auto}
.premiacoes{display:grid;grid-template-columns:repeat(3,1fr);gap:2.2rem 2rem;margin-top:2.4rem;text-align:center}
.premiacao .trofeu{color:#e8b923;margin:0 auto .6rem;display:block}
.premiacao h3{font-family:var(--ft);font-size:.95rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;margin-bottom:.4rem}
.premiacao p{font-size:.86rem;line-height:1.6}
@media(max-width:768px){.premiacoes{grid-template-columns:1fr 1fr;gap:1.6rem 1rem}}
@media(max-width:480px){.premiacoes{grid-template-columns:1fr}}
.cabecalho{background:linear-gradient(180deg,#1a0a0c,var(--bg2));border-bottom:2px solid var(--red);padding:2.6rem 2rem 2rem}
.cabecalho h1{font-family:var(--ft);font-size:2rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;line-height:1.2}
.cabecalho p{color:var(--tx2);margin-top:.4rem;max-width:760px}
.selo{display:inline-block;background:var(--red);color:#fff;padding:.1rem .5rem;font-size:.6rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;vertical-align:middle}
.botao{display:inline-block;background:var(--red);color:#fff;padding:.75rem 1.5rem;font-size:.8rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;transition:background .2s}
.botao:hover{background:var(--redh)}
.filtros{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.4rem}
.filtros a{border:1px solid var(--brd);padding:.35rem .9rem;font-size:.78rem;color:var(--tx2);transition:all .2s}
.filtros a:hover,.filtros a[aria-current]{border-color:var(--red);color:#fff}
.paginacao{display:flex;justify-content:center;align-items:center;gap:1.4rem;margin-top:2rem;font-size:.85rem;color:var(--txm)}
.paginacao a{color:var(--red);font-weight:600}
.caixa{border-inline-start:3px solid var(--red);background:var(--card);padding:.9rem 1.1rem;margin:1.5rem 0;font-size:.9rem}
.caixa a{color:var(--red)}

/* ---------- notícias */
.posts-layout{display:grid;grid-template-columns:2fr 1fr;gap:2rem}
.posts{display:flex;flex-direction:column;gap:1rem}
.post{background:var(--card);border:1px solid var(--brd);display:grid;grid-template-columns:220px 1fr;overflow:hidden;transition:border-color .3s}
.post:hover{border-color:var(--red)}
.post-img{position:relative;min-height:150px;background:var(--bg3)}
.post-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.post-img .selo{position:absolute;top:.5rem;inset-inline-start:.5rem;z-index:2}
.post-corpo{padding:1rem 1.1rem}
.post-data{font-size:.72rem;color:var(--txm);margin-bottom:.25rem}
.post h3{font-size:1rem;font-weight:700;line-height:1.35;margin-bottom:.3rem}
.post p{font-size:.84rem;color:var(--tx2);line-height:1.55}
.mais{display:inline-block;margin-top:.5rem;font-size:.7rem;font-weight:700;color:var(--red);text-transform:uppercase;letter-spacing:.05em}
.lateral h3{font-family:var(--ft);font-size:1rem;letter-spacing:.04em;text-transform:uppercase;margin-bottom:.8rem;padding-bottom:.4rem;border-bottom:2px solid var(--red)}
.popular{display:flex;gap:.7rem;padding:.6rem 0;border-bottom:1px solid var(--brd);transition:padding .2s}
.popular:hover{padding-inline-start:.4rem}
.popular:last-child{border:none}
.popular-img{width:56px;height:56px;flex-shrink:0;background:var(--bg3);overflow:hidden}
.popular-img img{width:100%;height:100%;object-fit:cover}
.popular-t{font-size:.8rem;font-weight:600;line-height:1.3}
.popular-s{font-size:.72rem;color:var(--txm);margin-top:.15rem;line-height:1.35}

.artigo{padding:2.5rem 1.5rem}
.artigo h1{font-family:var(--ft);font-size:2.1rem;font-weight:600;line-height:1.2;margin:.6rem 0 .8rem}
.artigo-meta{display:flex;align-items:center;gap:.8rem;font-size:.8rem;color:var(--txm)}
.artigo-resumo{font-size:1.08rem;color:var(--tx2);margin-bottom:1.2rem}
.artigo-capa{margin:1.2rem 0 1.6rem}
.artigo-capa img{width:100%}
.texto p{margin-bottom:1.1rem;font-size:1rem;line-height:1.8}
.texto a,.artigo>p a{color:var(--red);text-decoration:underline}
.texto-figura{margin:1.4rem 0}
.texto-figura img{width:100%}
.texto-figura figcaption{font-size:.8rem;color:var(--txm);margin-top:.4rem;text-align:center}

/* ---------- eventos */
.grade-eventos{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem}
.evento{background:var(--card);border:1px solid var(--brd);border-inline-start:3px solid var(--red);padding:1.1rem}
.evento-tipo{font-size:.65rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--red)}
.evento-nome{font-weight:700;font-size:1rem;margin:.2rem 0}
.evento-quando,.evento-onde{font-size:.82rem;color:var(--tx2)}
.lista-eventos{display:flex;flex-direction:column;gap:1rem}
.evento.grande{display:grid;grid-template-columns:auto 1fr;gap:1.2rem}
.evento.grande .texto p,.evento.grande p{font-size:.88rem;color:var(--tx2);margin-top:.6rem}
.evento-cartaz{width:200px}

/* ---------- filiais, diretoria, dojos */
.grade-filiais{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:1rem}
.filial{background:var(--card);border:1px solid var(--brd);text-align:center;padding:1rem .5rem;transition:all .3s;display:flex;flex-direction:column;align-items:center}
.filial:hover{border-color:var(--red);transform:translateY(-3px)}
.filial-bandeira{font-size:2.2rem;line-height:1.2}
.filial-nome{font-family:var(--ft);font-size:1.05rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;margin-top:.4rem}
.filial-papel{font-size:.72rem;color:var(--txm)}
.destaque-diretor{background:var(--card);border:1px solid var(--brd);padding:1.2rem;display:flex;align-items:center;gap:1rem;margin-top:1.5rem}
/* MOLDURA PADRÃO das fotos de pessoas (decisão do Fernando, 25/10): círculo, anel vermelho, fundo azul-marinho
   — o desenho do Blogger, feito pelo SITE e não pintado na foto. Envie sempre a foto LIMPA; o site aplica o modelo. */
.avatar{width:64px;height:64px;border-radius:50%;object-fit:cover;object-position:center top;flex-shrink:0;
  background:#0b1a4a;border:4px solid var(--red);box-shadow:0 0 0 1px rgba(0,0,0,.4),0 4px 14px rgba(0,0,0,.45)}
.dd-org{font-weight:700;font-size:.92rem}.dd-cargo{font-size:.78rem;color:var(--red);font-weight:700;margin:.1rem 0}.dd-nome{font-size:.8rem;color:var(--tx2)}
.sede-federacao{text-align:center;font-weight:700;margin-bottom:1.6rem}
.grade-pessoas{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1.2rem}
.pessoa{background:var(--card);border:1px solid var(--brd);padding:1.4rem 1rem;text-align:center;display:flex;flex-direction:column;align-items:center}
.pessoa .avatar{width:150px;height:150px;border-width:7px;margin-bottom:.9rem}
.pessoa-nome{font-weight:700}.pessoa-cargo{color:var(--red);font-size:.82rem;font-weight:600}
.pessoa-pais{font-size:.78rem;color:var(--txm);margin-top:.2rem}.pessoa-desc{font-size:.8rem;color:var(--tx2);margin-top:.6rem}
.grade-dojos{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1rem}
.dojo{background:var(--card);border:1px solid var(--brd);overflow:hidden}
.dojo-img img{width:100%;aspect-ratio:16/9;object-fit:cover}
.dojo-corpo{padding:1rem 1.1rem}
.dojo h3{font-size:1rem;margin-bottom:.4rem}
.dojo-linha{font-size:.84rem;color:var(--tx2);margin-top:.15rem}
.dojo-linha a{color:var(--red)}
.dojo-redes{display:flex;gap:.8rem;margin-top:.6rem}
.dojo-redes a{font-size:.75rem;font-weight:700;color:var(--red);text-transform:uppercase;letter-spacing:.05em}

/* ---------- fotos */
.grade-albuns{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.2rem}
.album{background:var(--card);border:1px solid var(--brd);overflow:hidden;transition:border-color .3s}
.album:hover{border-color:var(--red)}
.album-capa{aspect-ratio:4/3;background:var(--bg3);overflow:hidden}
.album-capa img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.album:hover .album-capa img{transform:scale(1.04)}
.album-corpo{padding:.9rem 1rem}
.album h3{font-size:1rem}.album-meta{font-size:.76rem;color:var(--txm)}
.galeria{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:.6rem}
.galeria figure{background:var(--bg3);overflow:hidden}
.galeria img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .4s}
.galeria a:hover img{transform:scale(1.04)}
.galeria figcaption{font-size:.75rem;color:var(--tx2);padding:.4rem .6rem}
.acervo{margin:2rem 0;display:flex;align-items:center;gap:1rem;flex-wrap:wrap;font-size:.85rem;color:var(--txm)}

/* ---------- apoiadores */
.faixa-apoiadores{display:flex;flex-wrap:wrap;gap:1.5rem;align-items:center;justify-content:center}
.faixa-apoiadores a{display:flex;align-items:center;justify-content:center;min-height:70px;padding:.6rem 1rem;background:var(--card);border:1px solid var(--brd);transition:border-color .3s}
.faixa-apoiadores a:hover{border-color:var(--red)}
.faixa-apoiadores img{max-height:70px;width:auto}
/* cartão do apoiador (SW-40): logo GRANDE em fundo branco ocupando a largura (logos são feitos para fundo claro),
   nome embaixo; com site, o cartão inteiro é o link */
.grade-apoiadores{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1.4rem}
.apoiador{background:var(--card);border:1px solid var(--brd);display:flex;flex-direction:column;overflow:hidden;transition:border-color .3s,transform .3s}
a.apoiador:hover{border-color:var(--red);transform:translateY(-3px)}
.apoiador-logo{height:180px;display:flex;align-items:center;justify-content:center;background:#fff;padding:1.2rem}
.apoiador-logo img{max-height:100%;max-width:100%;width:auto;object-fit:contain}
.apoiador-logo span{color:#222;font-family:var(--ft);font-size:1.3rem;text-transform:uppercase;text-align:center}
.apoiador-corpo{padding:1rem 1.2rem 1.2rem;display:flex;flex-direction:column;gap:.35rem;border-top:3px solid var(--red)}
.apoiador h3{font-size:1rem}.apoiador p{font-size:.84rem;color:var(--tx2)}
.apoiador-site{font-size:.75rem;font-weight:700;color:var(--red);text-transform:uppercase;letter-spacing:.05em}

/* ---------- contato */
.contato-intro{color:var(--tx2);margin-bottom:1rem;font-size:.9rem}
.contato-grade{display:grid;grid-template-columns:1.3fr 1fr;gap:2.5rem;align-items:start}
.contato{display:grid;gap:.8rem}
.contato-info{display:flex;flex-direction:column;gap:1.3rem;padding-top:.4rem}
.contato-rotulo{font-size:.68rem;color:var(--txm);text-transform:uppercase;letter-spacing:.07em;margin-bottom:.15rem}
.contato-info a{color:var(--red)}
.contato label{display:flex;flex-direction:column;gap:.25rem;font-size:.75rem;font-weight:600;color:var(--tx2)}
.contato input,.contato textarea{background:var(--bg);border:1px solid var(--brd);color:var(--tx);padding:.7rem;font:inherit;font-size:.9rem}
.contato input:focus,.contato textarea:focus{border-color:var(--red);outline:none}
.contato textarea{min-height:120px;resize:vertical}
.contato button{justify-self:start;background:var(--red);color:#fff;border:none;padding:.75rem 1.8rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:.8rem;cursor:pointer}
.contato button:hover{background:var(--redh)}
/* isca escondida SEM empurrar para fora da tela: o "left:-9999px" de antes alargava a página em árabe (direita para a esquerda) */
.contato .isca{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;opacity:0;pointer-events:none}
.contato-aviso{padding:.7rem 1rem;border:1px solid var(--err,#b3261e);color:#ffb4ab;margin-bottom:1rem;font-size:.85rem}
.contato-aviso.ok{border-color:#2e7d4f;color:#a8e6bf}

/* ---------- rodapé */
.rodape{background:#080808;border-top:1px solid var(--brd);padding:2rem;text-align:center}
.rodape-marca{display:flex;align-items:center;justify-content:center;gap:.6rem;margin-bottom:.8rem;font-family:var(--ft);letter-spacing:.1em}
.rodape-marca img{height:34px;width:auto;mix-blend-mode:screen}
.rodape-links{display:flex;justify-content:center;gap:1.2rem;flex-wrap:wrap;margin-bottom:.7rem}
.rodape-links a{font-size:.75rem;color:var(--txm);transition:color .2s}
.rodape-links a:hover{color:var(--red)}
/* chamamentos públicos (SW-66): lista do mais novo para o mais antigo, como no modelo da consultoria */
.chamamentos{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1rem}
.chamamento{padding:1.3rem 1.4rem;background:var(--card,#111);border:1px solid var(--brd);border-inline-start:3px solid var(--red);border-radius:8px}
.chamamento time{display:block;font-size:.8rem;color:var(--txm);margin-bottom:.35rem}
.chamamento h2{margin:0 0 .5rem;font-size:1.15rem;line-height:1.3;text-transform:none;letter-spacing:0}
.chamamento h2 a{color:var(--tx)}
.chamamento h2 a:hover{color:var(--red)}
.chamamento p{margin:0 0 .8rem;color:var(--tx2);line-height:1.6}
.chamamento-pdf{display:inline-block;padding:.5rem 1rem;border:1px solid var(--red);border-radius:6px;color:#fff;font-size:.85rem}
.chamamento-pdf:hover{background:var(--red)}
/* aviso de cookies do Clarity (SW-61): embaixo, sem cobrir o menu; só aparece com o Clarity ligado e antes da escolha */
.rodape-cookies{margin-top:.6rem;background:none;border:0;color:var(--txm);font:inherit;font-size:.72rem;text-decoration:underline;cursor:pointer}
.rodape-cookies:hover{color:var(--red)}
.cookies{position:fixed;left:12px;right:12px;bottom:12px;z-index:60;max-width:760px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1.2rem;padding:1rem 1.2rem;background:#111;border:1px solid var(--brd);border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.6)}
.cookies p{flex:1 1 320px;margin:0;font-size:.85rem;line-height:1.5;color:var(--tx2)}
.cookies p a{color:#fff;text-decoration:underline}
.cookies-botoes{display:flex;gap:.6rem;margin-inline-start:auto}
.cookies-botoes button{padding:.55rem 1.1rem;border-radius:6px;font:inherit;font-size:.85rem;cursor:pointer}
.cookies-nao{background:none;border:1px solid rgba(255,255,255,.35);color:#fff}
.cookies-sim{background:var(--red);border:1px solid var(--red);color:#fff}
.rodape-cp{font-size:.7rem;color:var(--txm)}

/* ---------- celular */
@media(max-width:900px){.posts-layout{grid-template-columns:1fr}}
@media(max-width:768px){
  /* menu do celular e tablet = FAIXA de botões que rola para o lado (modelo C — Fernando, 28/10, SW-55: o Kancho notou que
     quem não abria o "Menu" não sabia que existiam Quem Somos, Filiais...). Tudo à vista, sem abrir nada. Filiais e
     Federações abrem a lista logo abaixo da faixa (fixed: dentro da faixa rolável ela seria cortada), uma de cada vez. */
  .menu-itens{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;gap:6px;padding:10px 12px;scrollbar-width:none}
  .menu-itens::-webkit-scrollbar{display:none}
  /* borda direita esmaecida: avisa que a faixa continua, mesmo quando um botão termina rente à borda */
  .menu::after{content:'';position:absolute;top:0;inset-inline-end:0;width:34px;height:54px;background:linear-gradient(to right,rgba(14,14,14,0),rgba(14,14,14,.9));pointer-events:none}
  .menu-itens>a,.sub>summary{flex:none;white-space:nowrap;padding:7px 13px;font-size:.8rem;line-height:1.4;border:1px solid rgba(255,255,255,.35);border-radius:999px;background:rgba(0,0,0,.35);color:#fff}
  .menu-itens>a[aria-current],.sub:has(a[aria-current])>summary{background:var(--red);border-color:var(--red);box-shadow:none}
  .menu-itens>a:hover,.sub>summary:hover{background:rgba(255,255,255,.12)}
  .sub{position:static;flex:none}
  .sub[open]>summary{border-color:var(--red)}
  .sub-itens{position:fixed;top:54px;left:12px;right:12px;min-width:0;max-height:calc(100vh - 80px);overflow-y:auto;border-radius:8px;box-shadow:0 10px 28px rgba(0,0,0,.7)}
  .sub-itens a{padding:.75rem 1rem;font-size:.92rem}
  .sub-itens a[aria-current]{box-shadow:inset 3px 0 0 var(--red)}
  .secao{padding:2rem 1rem}
  .cabecalho{padding:2rem 1rem 1.5rem}.cabecalho h1{font-size:1.5rem}
  .artigo{padding:1.6rem 1rem}.artigo h1{font-size:1.6rem}
  .heroi{height:56vh}
  .grade-filiais{grid-template-columns:repeat(2,1fr)}
  .evento.grande{grid-template-columns:1fr}.evento-cartaz{width:100%}
}
@media(max-width:600px){.post{grid-template-columns:1fr}.post-img{min-height:180px}
  /* diretoria/federação no celular: dois cartões por linha, foto menor (um por linha ficava enorme) */
  .grade-pessoas{grid-template-columns:1fr 1fr;gap:.7rem}
  .pessoa{padding:1rem .6rem}
  .pessoa .avatar{width:104px;height:104px;border-width:5px;margin-bottom:.7rem}
  .pessoa-nome{font-size:.9rem;line-height:1.3}.pessoa-cargo{font-size:.76rem;line-height:1.35}
  .rodape-links{gap:.4rem 1rem}}
@media(max-width:768px){.contato-grade{grid-template-columns:1fr}}
.pessoa-faixa{font-size:.8rem;color:var(--tx2);margin-top:.45rem}
/* cartão de pessoa no padrão do cartão do dojo (Fernando, 27/10): CARGO (rótulo) / nome / faixa. Com subgrid, as 5 partes
   (foto, cargo, nome, faixa, extra) viram linhas da grade: na mesma fileira, cada parte fica na mesma altura em todos os
   cartões — nome em duas linhas num cartão não desalinha a faixa do vizinho. Navegador sem subgrid: coluna comum. */
.pessoa-cargo{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;line-height:1.4;text-wrap:balance}
.pessoa-nome{font-size:.98rem;line-height:1.3;text-wrap:balance;margin-top:.15rem}
.pessoa-faixa{margin-top:.25rem}
.pessoa-foto:empty,.pessoa-faixa:empty,.pessoa-extra:empty{margin:0}
@supports (grid-template-rows:subgrid){
  .pessoa{display:grid;grid-row:span 5;grid-template-rows:subgrid;row-gap:0;justify-items:center}
  .pessoa-cargo{align-self:end}
  .pessoa-nome{align-self:start}
}
@media(max-width:600px){.pessoa-cargo{font-size:.62rem}.pessoa-nome{font-size:.9rem}}
.dd-faixa{font-weight:400;color:var(--tx2);font-size:.85em;margin-inline-start:.3rem}
/* endereço que abre o Google Maps: parece texto, mostra que é link ao passar o mouse */
a.mapa{color:inherit;text-decoration:underline;text-decoration-color:rgba(196,30,42,.6);text-underline-offset:3px}
a.mapa:hover{color:#fff;text-decoration-color:var(--red)}
a.mapa::after{content:' ↗';font-size:.8em;color:var(--red)}
/* cartão do dojo: a foto do professor responsável (kimono; sem ela, a oficial). Foto MAIOR (SW-40, Fernando 27/10:
   "as fotos desses cards não ficam tão visíveis"): 64 → 150 px, em cima e centralizada, com o texto centralizado
   embaixo — como no Blogger e no cartão de professor. Ao lado do texto ela espremia o nome em três linhas. */
.dojo-corpo{text-align:center}
.dojo-redes{justify-content:center}
.dojo-resp{display:flex;flex-direction:column;align-items:center;gap:.7rem;margin:.8rem 0 .5rem}
.dojo-resp .avatar{width:150px;height:150px;border-width:6px}
@media(max-width:600px){.dojo-resp .avatar{width:120px;height:120px;border-width:5px}}
.dojo-resp .dojo-linha{margin-top:0}
/* responsável e técnico: rótulo, nome e faixa cada um na sua linha (Fernando, 27/10: nome comprido jogava o "Dan"
   sozinho para baixo). O endereço quebra equilibrado, sem deixar a cidade sobrando numa linha. */
.dojo-pessoa{display:flex;flex-direction:column;align-items:center;gap:.1rem;margin-top:.5rem;font-size:.84rem;color:var(--tx2)}
.dojo-resp .dojo-pessoa{margin-top:0}
.dojo-rotulo{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--red)}
.dojo-pessoa b{font-size:.95rem;color:var(--tx);text-wrap:balance}
.dojo-faixa{font-size:.8rem}
/* professores do dojo abaixo do responsável: foto menor, até 3 por fileira (Fernando, 28/10) */
.dojo-profs{margin-top:1rem;padding-top:.9rem;border-top:1px solid var(--brd);display:flex;flex-direction:column;align-items:center;gap:.6rem}
.dojo-profs-grade{display:flex;flex-wrap:wrap;justify-content:center;gap:.9rem .6rem;width:100%}
.dojo-prof{flex:0 1 31%;min-width:88px;display:flex;flex-direction:column;align-items:center;gap:.1rem;font-size:.78rem;color:var(--tx2)}
.dojo-prof .avatar{width:76px;height:76px;border-width:4px;margin-bottom:.35rem}
.dojo-prof b{font-size:.82rem;line-height:1.25;color:var(--tx);text-wrap:balance}
.dojo-prof .dojo-faixa{font-size:.74rem}
.federacao-logo{display:flex;justify-content:center;margin:0 auto 1.4rem}
.federacao-logo img{width:auto;max-width:min(420px,100%);height:auto;max-height:260px;border-radius:4px}
.dojo-corpo .dojo-linha{text-wrap:balance;margin-top:.6rem}
/* mesmo desenho em todo cartão (Fernando, 27/10): endereço em 2 linhas (rua e número / bairro, cidade-UF) e as redes
   sempre na última linha. Endereço e redes vão para o PÉ do cartão: na mesma fileira, quem tem responsável técnico
   não desalinha os outros; sem nenhuma rede, a linha fica reservada. */
.dojo{display:flex;flex-direction:column}
.dojo-corpo{flex:1;display:flex;flex-direction:column}
.dojo-pe{margin-top:auto;padding-top:.6rem}
.dojo-pe .dojo-endereco{margin-top:0}
.dojo-redes{min-height:1.25rem;margin-top:.7rem}
/* seta "voltar ao topo" (Fernando, 26/10): fixa no canto, sobe suave (html{scroll-behavior:smooth}); sem script.
   Onde o navegador entende animação pela rolagem, ela só aparece depois de descer um pouco; nos outros, fica sempre. */
.voltar-topo{position:fixed;right:18px;bottom:18px;z-index:90;width:46px;height:46px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;background:rgba(14,14,14,.85);border:2px solid var(--red);
  color:#fff;font-size:1.3rem;font-weight:700;box-shadow:0 4px 14px rgba(0,0,0,.5);transition:background .2s,transform .2s}
.voltar-topo:hover,.voltar-topo:focus-visible{background:var(--red);transform:translateY(-2px)}
@supports (animation-timeline: scroll()){
  .voltar-topo{animation:aparecer-seta linear both;animation-timeline:scroll(root);animation-range:0 400px}
  @keyframes aparecer-seta{0%,60%{opacity:0;visibility:hidden}100%{opacity:1;visibility:visible}}
}
@media(max-width:600px){.voltar-topo{right:12px;bottom:12px;width:42px;height:42px}}
/* mapa embutido no Contato (27/10, SW-41d) */
.contato-mapa{border:1px solid var(--brd);background:var(--card);aspect-ratio:4/3;overflow:hidden}
.contato-mapa iframe{display:block;width:100%;height:100%;border:0}
/* vídeo no meio do texto da notícia: [video N] (27/10) */
.texto-video{margin:1.6rem 0}
.texto-video video{display:block;width:100%;max-height:75vh;background:#000;border:1px solid var(--brd)}
.texto-video figcaption{font-size:.82rem;color:var(--tx2);text-align:center;margin-top:.5rem}

/* SELETOR DE LÍNGUAS (SW-52, aprovado pelo Fernando 29/10): no computador, no fim do menu, abre uma lista;
   no celular, um botão abaixo da faixa do menu, e a lista sobe de baixo (folha), ao alcance do polegar. */
.idioma{position:absolute;top:0;inset-inline-end:12px;z-index:210}
.idioma>summary{list-style:none;display:flex;align-items:center;gap:.45rem;padding:.9rem 1rem;font-family:var(--ft);font-size:.86rem;font-weight:500;letter-spacing:.05em;color:#ddd;cursor:pointer;border-inline-start:1px solid rgba(255,255,255,.12)}
.idioma>summary::-webkit-details-marker{display:none}
.idioma>summary::after{content:'▾';font-size:.7rem}
.idioma>summary:hover{color:#fff;background:rgba(255,255,255,.06)}
.menu.sobre .idioma>summary{color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.8)}
.idioma-lista{position:absolute;inset-inline-end:0;top:100%;min-width:210px;background:#141414;border:1px solid var(--brd);border-top:2px solid var(--red);box-shadow:0 12px 30px rgba(0,0,0,.6);padding:6px 0}
.idioma-titulo{display:none}
.idioma-lista a{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.6rem 1rem;color:#ddd;font-size:.95rem}
.idioma-lista a:hover{background:rgba(255,255,255,.06);color:#fff}
.idioma-lista a[aria-current]{color:#fff;background:rgba(200,30,40,.18)}
.idioma-lista small{color:#888;font-size:.75rem;letter-spacing:.08em}
@media(min-width:769px){.menu-itens{padding-block:0;padding-inline:12px 92px;max-width:none}}
@media(min-width:769px) and (max-width:1700px){.menu-itens>a,.menu-itens .sub>summary{padding:.9rem .62rem;font-size:.8rem;letter-spacing:.03em}}
@media(max-width:768px){
  .idioma{top:64px;inset-inline-end:12px}
  .idioma>summary{padding:7px 12px;font-size:.8rem;font-weight:600;border:1px solid rgba(255,255,255,.45);border-radius:999px;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);color:#fff}
  .idioma>summary::after{content:none}
  .idioma[open]::before{content:'';position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:-1}
  .idioma-lista{position:fixed;left:0;right:0;top:auto;bottom:0;min-width:0;border:0;border-top:2px solid var(--red);border-radius:16px 16px 0 0;padding:10px 0 22px;max-height:85vh;overflow-y:auto}
  .idioma-lista::before{content:'';display:block;width:40px;height:4px;border-radius:2px;background:#444;margin:0 auto 10px}
  .idioma-titulo{display:block;margin:0 20px 8px;font-family:var(--ft);letter-spacing:.06em;text-transform:uppercase;font-size:.9rem;color:#aaa}
  .idioma-lista a{padding:13px 20px;font-size:1.05rem;border-top:1px solid #222}
}

/* ÁRABE (SW-52 etapa 4): a página toda vira da direita para a esquerda com dir="rtl" no <html>; as regras acima usam
   lados LÓGICOS (inline-start/end), que acompanham. Só o que não acompanha sozinho fica aqui. */
[dir="rtl"] .menu::after{background:linear-gradient(to left,rgba(14,14,14,0),rgba(14,14,14,.9))}
[dir="rtl"] .menu-itens>a,[dir="rtl"] .sub>summary,[dir="rtl"] .titulo-secao h2,[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3{letter-spacing:0}
[dir="rtl"] .voltar-topo{right:auto;left:18px}
@media(max-width:600px){[dir="rtl"] .voltar-topo{left:12px}}