/* Liberta-dores 7x7 · página inicial */

/* ---------- abertura ---------- */
.abertura {
  position: relative; overflow: hidden; isolation: isolate; background: var(--bg);
  margin-top: calc(-1 * var(--topo-h)); padding-top: var(--topo-h);
  min-height: min(100dvh, 940px); display: grid; align-items: center;
}
/* holofotes do estádio, como nos vídeos oficiais: acendem quando a página abre */
.abertura::before, .abertura::after {
  content: ""; position: absolute; top: -10%; width: 70vw; height: 120%; z-index: -1; pointer-events: none; filter: blur(18px);
  background: linear-gradient(180deg, rgba(255, 236, 196, .10), rgba(255, 236, 196, 0) 75%);
  animation: acender 1.6s .2s var(--suave) both;
}
.abertura::before { left: -12vw; clip-path: polygon(14% 0, 30% 0, 100% 100%, 46% 100%); }
.abertura::after { right: -12vw; clip-path: polygon(70% 0, 86% 0, 54% 100%, 0 100%); }
@keyframes acender { from { opacity: 0; } 40% { opacity: .6; } 55% { opacity: .25; } to { opacity: 1; } }
/* círculo central do campo, em perspectiva, no pé da abertura */
.abertura-campo { position: absolute; left: 50%; bottom: -22vw; width: 130vw; height: 44vw; transform: translateX(-50%); z-index: -1; pointer-events: none; }
.abertura-campo::before { content: ""; position: absolute; inset: 0; border: 1px solid rgba(243, 236, 223, .08); border-radius: 50%; }
.abertura-campo::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid rgba(243, 236, 223, .08); }

.abertura-in { display: grid; gap: 40px; align-items: center; padding-block: 40px 72px; }
.abertura-texto { display: grid; gap: 22px; justify-items: start; }
.abertura-texto .t-rot { display: inline-flex; align-items: center; gap: 12px; }
.abertura-texto .t-rot::after { content: ""; width: 40px; height: 1px; background: var(--ouro); opacity: .6; }
.abertura h1 { font-stretch: 62.5%; font-weight: 900; text-transform: uppercase; font-size: clamp(52px, 6.4vw, 100px); line-height: .86; letter-spacing: -.005em; }
/* cada linha sobe de trás de uma máscara; o respiro em cima deixa os acentos (Ó, Ã) inteiros */
.abertura h1 .lin { display: block; overflow: hidden; padding-top: .12em; margin-top: -.12em; padding-bottom: .02em; }
.abertura h1 .lin > span { display: block; animation: subir 1s var(--suave) both; }
.abertura h1 .lin-2 > span { animation-delay: .08s; }
.abertura h1 .lin-3 > span { animation-delay: .16s; color: var(--ouro); }
@keyframes subir { from { transform: translateY(105%); } }
.abertura .lead { max-width: 44ch; animation: aparecer .9s .35s var(--suave) both; }
.abertura .acoes { animation: aparecer .9s .5s var(--suave) both; }
.abertura-contagem { width: 100%; max-width: 540px; animation: aparecer .9s .42s var(--suave) both; }
.abertura-contagem:empty { display: none; }
@keyframes aparecer { from { opacity: 0; transform: translateY(14px); } }

.abertura-marca { position: relative; justify-self: center; width: min(78vw, 470px); animation: surgir 1.4s .1s var(--suave) both; }
.abertura-marca::before {
  content: ""; position: absolute; left: 50%; top: 38%; width: 120%; aspect-ratio: 1; transform: translate(-50%, -50%); z-index: -1;
  background: radial-gradient(circle, rgba(214, 168, 72, .18), rgba(214, 168, 72, 0) 62%);
}
.abertura-marca img { width: 100%; }
@keyframes surgir { from { opacity: 0; transform: scale(.94); filter: blur(6px); } }

@media (max-width: 899px) {
  .abertura { min-height: 0; }
  .abertura-in { padding-top: 12px; }
  .abertura-marca { order: -1; width: min(64vw, 300px); }
}
@media (min-width: 900px) {
  .abertura-in { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 40px; padding-block: 48px 96px; }
}

/* placar da contagem regressiva */
.placar { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 2px solid var(--ouro); background: rgba(21, 20, 17, .8); border-radius: 0 0 var(--raio) var(--raio); }
.placar-cel { display: grid; justify-items: center; gap: 6px; padding: 14px 6px 12px; }
.placar-cel + .placar-cel { border-left: 1px solid var(--linha); }
.placar-num { font-stretch: 62.5%; font-weight: 900; font-size: clamp(40px, 5.2vw, 60px); line-height: .9; font-variant-numeric: tabular-nums; }
.placar-num.virou { animation: virar .38s var(--suave); }
@keyframes virar { from { transform: translateY(-28%); opacity: .2; } }
.placar-rot { font-stretch: 87.5%; font-weight: 600; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-3); }
.contagem-leg { margin-top: 10px; font-size: 14px; color: var(--tinta-3); }

/* ---------- ficha da edição ---------- */
.ficha-edicao { border-bottom: 1px solid var(--linha); }
.ficha-edicao .ficha { border-top: 0; }

/* ---------- ao vivo ---------- */
.ao-vivo .secao-cab--linha { margin-bottom: 24px; }
.ao-vivo-bloco + .ao-vivo-bloco { margin-top: 40px; }
.ao-vivo h3 { font-stretch: 87.5%; font-weight: 600; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-3); margin-bottom: 14px; }

/* ---------- atual campeão ---------- */
.trono {
  position: relative; overflow: hidden; isolation: isolate; display: grid; gap: 32px; align-items: center;
  padding: clamp(28px, 5vw, 64px); border: 1px solid var(--ouro-20); border-radius: var(--raio);
  background: radial-gradient(70% 140% at 0% 50%, rgba(214, 168, 72, .12), transparent 60%), var(--sup);
}
.trono::after {
  /* brilho que atravessa o painel uma vez, quando ele aparece */
  content: ""; position: absolute; inset: 0; z-index: -1; transform: translateX(-100%);
  background: linear-gradient(100deg, transparent 30%, rgba(242, 214, 143, .07) 50%, transparent 70%);
}
.trono.visivel::after { animation: varrer 1.8s .3s var(--suave) both; }
@keyframes varrer { to { transform: translateX(100%); } }
.pedestal { position: relative; display: grid; justify-items: center; width: clamp(150px, 20vw, 220px); }
.pedestal .escudo { position: relative; z-index: 1; }
.pedestal::after {
  content: ""; width: 86%; height: 14px; margin-top: 14px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(214, 168, 72, .45), transparent);
}
.escudo-fantasma {
  width: clamp(120px, 16vw, 168px); aspect-ratio: 5 / 6; display: grid; place-items: center; color: var(--ouro);
  border: 1.5px dashed var(--ouro-20); border-radius: 50% 50% 46% 46% / 30% 30% 70% 70%;
  font-stretch: 62.5%; font-weight: 900; font-size: 56px;
}
.trono-texto { display: grid; gap: 14px; justify-items: start; }
.trono-texto h2 { font-stretch: 62.5%; font-weight: 900; font-size: clamp(38px, 5.4vw, 72px); line-height: .9; text-transform: uppercase; text-wrap: balance; }
.trono-texto p { color: var(--tinta-2); max-width: 52ch; }
@media (min-width: 760px) { .trono { grid-template-columns: auto 1fr; gap: clamp(32px, 5vw, 72px); } }

/* ---------- fundadores (1ª edição) ---------- */
.historia-cab { display: grid; gap: 28px; margin-bottom: 40px; }
.historia-cab h2 { max-width: 16ch; }
.numeros { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px 16px; }
.numeros div { display: grid; gap: 4px; }
.numeros b { font-stretch: 62.5%; font-weight: 900; font-size: clamp(56px, 7vw, 96px); line-height: .85; font-variant-numeric: tabular-nums; }
.numeros span { font-stretch: 87.5%; font-weight: 600; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-3); }
@media (min-width: 900px) {
  .historia-cab { grid-template-columns: 1fr 1.1fr; align-items: end; }
  .numeros { grid-template-columns: repeat(4, 1fr); }
}
.desfile { position: relative; overflow: hidden; padding-block: 28px; border-block: 1px solid var(--linha);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.desfile-trilho { display: flex; gap: clamp(28px, 4vw, 56px); width: max-content; animation: desfilar 60s linear infinite; }
.desfile:hover .desfile-trilho, .desfile:focus-within .desfile-trilho { animation-play-state: paused; }
.desfile a { display: grid; justify-items: center; gap: 10px; width: 96px; text-align: center; opacity: .82; transition: opacity .3s, transform .4s var(--suave); }
.desfile a:hover, .desfile a:focus-visible { opacity: 1; transform: translateY(-3px); }
.desfile a span { font-stretch: 75%; font-weight: 700; font-size: 12px; line-height: 1.15; text-transform: uppercase; color: var(--tinta-2); }
@keyframes desfilar { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .desfile { -webkit-mask-image: none; mask-image: none; }
  .desfile-trilho { animation: none; flex-wrap: wrap; justify-content: center; width: auto; }
  .desfile-trilho [aria-hidden="true"] { display: none; }
}

/* ---------- mosaico de seções ---------- */
.mosaico { display: grid; gap: 12px; }
.tile {
  position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px;
  min-height: 220px; padding: 24px; border: 1px solid var(--linha); border-radius: var(--raio); background: var(--sup);
  transition: border-color .3s;
}
.tile:hover { border-color: var(--linha-2); }
.tile h3 { font-stretch: 62.5%; font-weight: 900; font-size: clamp(34px, 3.6vw, 52px); line-height: .9; text-transform: uppercase; }
.tile p { color: var(--tinta-2); max-width: 36ch; font-size: 15px; }
.tile .link-seta { margin-top: 6px; }
.tile-fundo { position: absolute; inset: 0; z-index: -1; transition: transform .8s var(--suave); }
.tile:hover .tile-fundo { transform: scale(1.03); }
/* tabela: linhas de campo */
.tile--tabela .tile-fundo::before {
  content: ""; position: absolute; right: -18%; top: 50%; width: 80%; aspect-ratio: 1; transform: translateY(-50%);
  border: 1px solid rgba(243, 236, 223, .08); border-radius: 50%;
}
.tile--tabela .tile-fundo::after { content: ""; position: absolute; top: 0; bottom: 0; right: 22%; border-left: 1px solid rgba(243, 236, 223, .08); }
.tile--tabela .tile-fundo { background: radial-gradient(60% 80% at 100% 0%, rgba(214, 168, 72, .1), transparent 70%); }
/* galeria: quadro do vídeo oficial */
.tile--galeria .tile-fundo img { width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.tile--galeria .tile-fundo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 10, 9, 0) 30%, rgba(11, 10, 9, .92)); }
/* equipes: colagem de escudos */
.tile--equipes .tile-fundo { display: flex; justify-content: flex-end; align-items: flex-start; gap: 0; padding: 22px 18px; }
.tile--equipes .tile-fundo .escudo { margin-left: -14px; opacity: .9; }
.tile--jogos .tile-fundo::before {
  content: attr(data-dia); position: absolute; top: 14px; right: 18px; font-stretch: 62.5%; font-weight: 900; font-size: 120px; line-height: .8;
  color: transparent; -webkit-text-stroke: 1px rgba(243, 236, 223, .14);
}
@media (min-width: 760px) {
  .mosaico { grid-template-columns: repeat(2, 1fr); }
  .tile--tabela { grid-column: span 2; min-height: 300px; }
}
@media (min-width: 1100px) {
  .mosaico { grid-template-columns: 2fr 1fr 1fr; grid-template-rows: repeat(2, minmax(240px, auto)); }
  .tile--tabela { grid-column: 1; grid-row: 1 / span 2; min-height: 0; }
  .tile--galeria { grid-column: 3; grid-row: 1 / span 2; }
}

/* ---------- chamada do Instagram ---------- */
.chamada { display: grid; gap: 24px; padding-block: clamp(40px, 6vw, 72px); border-top: 1px solid var(--linha); }
.chamada h2 { font-stretch: 62.5%; font-weight: 900; font-size: clamp(44px, 8vw, 112px); line-height: .86; text-transform: uppercase; word-break: break-word; }
.chamada h2 span { color: var(--ouro); }
@media (min-width: 900px) { .chamada { grid-template-columns: 1fr auto; align-items: end; } }