/* ===========================================================================
   Geração Olímpica — blocos recuperados do protótipo do Claude Design
   ---------------------------------------------------------------------------
   Complementa assets/funec.css com o que é específico do módulo: cabeçalho de
   marca, hero, tiles de modalidade e o card de turma. As cores vêm todas dos
   tokens de funec.css — a paleta é a do portal, não a da logo do programa.

   Carregar DEPOIS de funec.css.
   =========================================================================== */

/* --------------------------------------------------------------------------
   Cabeçalho de marca
   -------------------------------------------------------------------------- */
.marca-topo{
  position:sticky; top:0; z-index:30; background:var(--surface);
  border-bottom:4px solid var(--navy); box-shadow:0 2px 10px rgba(14,59,52,.12);
}
.marca-topo .interno{
  max-width:1160px; margin:0 auto; padding:12px 16px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.marca-topo .id{display:flex; align-items:center; gap:14px; min-width:0;
                text-decoration:none; color:inherit}
.marca-topo img{height:56px; width:auto; flex:none}
.marca-topo .txt{min-width:0; border-left:3px solid var(--gold); padding-left:14px}
.marca-topo .nome{font-size:1.35rem; line-height:.95; color:var(--navy-txt)}
.marca-topo .sub{font-size:.8rem; color:var(--muted); font-weight:600; margin-top:2px}
.marca-topo .pref{text-align:right; flex:none}
.marca-topo .pref .p1{
  font-family:'Saira Condensed',sans-serif; font-weight:700; font-size:.95rem;
  color:var(--teal); text-transform:uppercase; line-height:1;
}
.marca-topo .pref .p2{font-size:1.3rem; color:var(--navy-txt); line-height:1}
@media (max-width:560px){ .marca-topo .pref{display:none} }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero{background:var(--navy); color:#fff; position:relative; overflow:hidden}
:root[data-hc="1"] .hero{background:#000}
.hero .interno{max-width:1160px; margin:0 auto; padding:44px 16px 60px; position:relative; z-index:1}
/* Tarja com canto cortado — mesmo recorte do material impresso do programa,
   no coral do portal (é o bloco coral do cabeçalho da página inicial). */
.hero .tarja{
  display:inline-block; background:var(--coral); color:var(--gold-ink); font-size:.85rem;
  padding:5px 16px 6px 14px; letter-spacing:.04em; margin-bottom:16px;
  clip-path:polygon(0 0,100% 0,100% 100%,10px 100%);
}
.hero h1{font-size:3rem; line-height:.92; max-width:14ch; margin:0}
.hero p{max-width:56ch; font-size:1.1rem; color:var(--salvia); margin-top:16px; line-height:1.5}
.hero strong{color:#fff}
.hero .numeros{display:flex; gap:26px; flex-wrap:wrap; margin-top:26px}
.hero .numeros .n{
  font-family:'Saira Condensed',sans-serif; font-weight:800; font-size:2.2rem;
  color:var(--gold); line-height:1;
}
.hero .numeros .r{font-size:.85rem; color:var(--salvia); font-weight:600}
/* O corte tem a cor do fundo da página: é a página "invadindo" o hero. */
.hero .corte{
  position:absolute; bottom:-1px; left:0; right:0; height:40px;
  background:var(--bg); clip-path:polygon(0 100%,100% 100%,100% 0);
}
@media (max-width:640px){ .hero h1{font-size:2.1rem} .hero .interno{padding:32px 16px 46px} }

/* --------------------------------------------------------------------------
   Título de seção com régua
   -------------------------------------------------------------------------- */
/* .secao / .regua moveram-se para funec.css na migração 022: as três
   linhas eram idênticas nas duas folhas de programa, e a tela
   compartilhada de Locais precisa delas sem carregar nenhuma. */

/* --------------------------------------------------------------------------
   Filtro por modalidade
   O tile é um botão: o ícone é decorativo (aria-hidden) e quem carrega o
   significado é o rótulo mais a contagem.
   -------------------------------------------------------------------------- */
.modf{
  display:flex; flex-direction:column; align-items:center; gap:5px;
  background:var(--surface); border:2px solid var(--border); border-radius:12px;
  padding:12px 12px 10px; flex:1 1 104px; min-width:104px; max-width:160px;
  color:var(--ink); min-height:96px;
  font-family:inherit; font-style:normal; text-transform:none; letter-spacing:0;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.modf .ico{font-size:1.95rem; line-height:1; transition:transform .16s ease}
.modf .nome{
  font-family:'Saira Condensed',sans-serif; font-style:italic; font-weight:800;
  text-transform:uppercase; font-size:.95rem; line-height:1.05; text-align:center;
}
.modf .n{font-size:.72rem; font-weight:700; color:var(--muted); line-height:1}
.modf:hover{border-color:var(--gold); transform:translateY(-3px);
            box-shadow:0 8px 18px rgba(14,59,52,.15); filter:none}
.modf:hover .ico{transform:scale(1.14)}
/* Selecionado usa --sel-*: em alto contraste o navy vira preto e o estado
   ativo ficaria idêntico ao inativo. */
.modf[aria-pressed="true"]{
  background:var(--sel-bg); border-color:var(--sel-bg); color:var(--sel-ink);
  box-shadow:0 6px 16px rgba(14,59,52,.26);
}
.modf[aria-pressed="true"] .n{color:inherit; opacity:.78}
.modf[aria-pressed="true"]::after{
  content:''; display:block; width:30px; height:3px; background:var(--gold);
  border-radius:2px; margin-top:1px;
}
:root[data-hc="1"] .modf[aria-pressed="true"]::after{background:var(--ink)}

/* --------------------------------------------------------------------------
   Card de turma
   -------------------------------------------------------------------------- */
.grade-turmas{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:18px}
.turma-card{
  position:relative; background:var(--surface); border:2px solid var(--border);
  border-radius:12px; overflow:hidden; display:flex; flex-direction:column;
}
.turma-card.lotada{opacity:.6}
/* A faixa da modalidade era vermelha (logo do GO); agora é petróleo, e o
   coral fica só no botão de inscrever — mesmo par petróleo/coral dos cards
   do portal. */
.turma-card .faixa{
  background:var(--petroleo); color:#fff; font-family:'Saira Condensed',sans-serif;
  font-style:italic; font-weight:800; text-transform:uppercase; font-size:1.35rem;
  padding:12px 16px 16px; line-height:1;
  clip-path:polygon(0 0,100% 0,100% 72%,0 100%);
}
.turma-card .badge{
  position:absolute; top:0; right:0; background:#2a3835; color:#fff;
  font-family:'Saira Condensed',sans-serif; font-weight:800; font-style:italic;
  text-transform:uppercase; font-size:.78rem; padding:6px 14px 6px 18px;
  clip-path:polygon(12px 0,100% 0,100% 100%,0 100%);
}
.turma-card .corpo{padding:14px 16px 16px; display:flex; flex-direction:column; flex:1}
.turma-card dl{display:grid; grid-template-columns:auto 1fr; gap:7px 10px; font-size:.9rem; margin:0}
.turma-card dt{color:var(--muted)}
.turma-card dd{margin:0; font-weight:600}
.turma-card .rodape{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  margin-top:12px; padding-top:10px; border-top:1px solid var(--border);
}
.turma-card .vagas{font-weight:800; font-size:.9rem; color:var(--ok)}
.turma-card.lotada .vagas{color:var(--red)}
.turma-card .atestado{font-size:.72rem; font-weight:700; color:var(--teal); text-transform:uppercase}
.turma-card .inscrever{
  width:100%; margin-top:auto; background:var(--gold); color:var(--gold-ink);
  border-radius:8px; padding:13px; font-size:1.05rem; min-height:50px;
}
.turma-card .inscrever:disabled{background:var(--border); color:var(--muted); cursor:not-allowed}
:root[data-hc="1"] .turma-card{border-color:var(--gold)}