/* FSA Esporte Clube · acabamento "refinado" (escola.json › "acabamento": "refinado"; o servidor entrega em /acabamento.css).
   Mesmo manual (Bebas Neue, Montserrat, Kaushan; verde, vermelho, ouro; hachuras e cantos retos): só o acabamento muda.
   Cartões com sombra suave no lugar do contorno, fotos que aproximam ao passar o mouse, títulos maiores, mais respiro. */
:root{
  --rf-sombra-1:0 1px 2px rgba(20,32,24,.05),0 10px 26px -14px rgba(20,32,24,.24);
  --rf-sombra-2:0 2px 6px rgba(20,32,24,.06),0 26px 52px -22px rgba(20,32,24,.38);
  --rf-contorno:color-mix(in srgb,var(--line) 60%,transparent);
  --rf-ease:cubic-bezier(.2,.8,.2,1);
}
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}

/* Ritmo e títulos */
.secao{padding-block:clamp(64px,8.5vw,112px)}
.cab{margin-bottom:clamp(28px,3.4vw,40px)}
.titulo{font-size:clamp(2.6rem,6vw,4.4rem);line-height:.9}
.rotulo{display:inline-flex;align-items:center;gap:12px}
.rotulo::before{content:"";width:28px;height:2px;background:currentColor;flex:none}
.lead{font-size:1.06rem;line-height:1.7}
.ver-tudo::after{transition:transform .3s var(--rf-ease)}
.ver-tudo:hover::after{transform:translateX(4px)}

/* Botões */
.btn{transition:transform .25s var(--rf-ease),box-shadow .25s var(--rf-ease),filter .2s ease}
.btn-vermelho{box-shadow:0 12px 26px -14px color-mix(in srgb,var(--vermelho) 90%,transparent)}
.btn-vermelho:hover{box-shadow:0 18px 32px -14px color-mix(in srgb,var(--vermelho) 95%,transparent)}
.btn-verde{box-shadow:0 12px 26px -14px color-mix(in srgb,var(--verde) 90%,transparent)}

/* Cartões: sombra suave no lugar do contorno */
.nt,.cat,.painel,.ultimo,.projetos li,.logos a,.logos .slot{border-color:var(--rf-contorno);box-shadow:var(--rf-sombra-1)}
.eco-card:not(.aqui){box-shadow:var(--rf-sombra-1)}
.logos .slot{box-shadow:none}
/* os filetes de cor do manual continuam (categoria, tabela, projetos sociais) */
.cat{border-top-color:var(--verde)}.cat.baiano{border-top-color:var(--vermelho)}.painel{border-top-color:var(--verde)}.projetos li{border-left-color:var(--verde-luz)}
.nt,.cat,.projetos li,.eco-card{transition:opacity .6s ease,transform .35s var(--rf-ease),box-shadow .35s var(--rf-ease),border-color .2s ease}
.nt:hover,.cat:hover,.projetos li:hover,.eco-card:hover{transform:translateY(-4px);box-shadow:var(--rf-sombra-2)}
.nt:hover{border-color:var(--rf-contorno)}

/* Notícias: foto aproxima devagar, título ganha a cor do clube */
.noticias{gap:clamp(14px,1.8vw,22px)}
.nt .foto > img{transition:transform .9s var(--rf-ease)}
.nt:hover .foto > img{transform:scale(1.06)}
.nt .foto::after{content:"";position:absolute;inset:auto 0 0 0;height:45%;background:linear-gradient(transparent,rgba(0,0,0,.35));pointer-events:none;z-index:0}
.nt .foto .etiqueta{z-index:1}
.nt .corpo{padding:16px 18px 20px;gap:8px}
.nt h3{font-size:1.02rem;transition:color .2s ease}

/* Central de jogos */
.proximo{box-shadow:var(--rf-sombra-2)}
.painel{padding:22px 22px 18px}
.tabela tbody tr{transition:background .2s ease}
.tabela tbody tr:hover td{background:color-mix(in srgb,var(--verde) 6%,var(--surface))}
.tabela tr.nos:hover td{background:color-mix(in srgb,var(--verde-luz) 18%,var(--surface))}

/* Categorias de base: o número vazado aparece mais ao passar o mouse */
.cats{gap:clamp(12px,1.6vw,18px)}
.cat{padding:18px 18px 20px}
.cat .num{transition:-webkit-text-stroke-color .3s ease,transform .5s var(--rf-ease)}
.cat:hover .num{-webkit-text-stroke-color:color-mix(in srgb,var(--titulo) 38%,transparent);transform:translateY(-6px)}
.avaliacao{box-shadow:var(--rf-sombra-2)}

/* FSA Academy, Sócio e TV */
.academy .foto img{transition:transform .9s var(--rf-ease)}
.academy .foto:hover img{transform:scale(1.02)}
.cartao-socio{transition:transform .6s var(--rf-ease)}
.cartao-socio:hover{transform:rotate(-1deg) translateY(-6px)}
.beneficios li{border-left:3px solid var(--ouro)}
.video .thumb::after{transition:transform .3s var(--rf-ease)}
.video:hover .thumb::after{transform:scale(1.1)}

/* FSA Social e patrocinadores */
.projetos{gap:clamp(12px,1.6vw,18px)}
.projetos li{padding:20px 20px}
.logos a{transition:transform .3s var(--rf-ease),box-shadow .3s var(--rf-ease)}
.logos a:hover{transform:translateY(-3px);box-shadow:var(--rf-sombra-2)}

/* Celular */
@media (max-width:560px){
  .secao{padding-block:56px}
  .nt:hover,.cat:hover,.projetos li:hover,.eco-card:hover{transform:none}
}