/* Mesma identidade dos vídeos: fundo quase preto com grade, branco, amarelo de destaque, Anton nos títulos. */
@font-face { font-family: Anton; src: url(/fontes-letra/anton-latin-400-normal.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: Montserrat; font-weight: 500; src: url(/fontes-letra/montserrat-latin-500-normal.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: Montserrat; font-weight: 700; src: url(/fontes-letra/montserrat-latin-700-normal.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: Montserrat; font-weight: 800; src: url(/fontes-letra/montserrat-latin-800-normal.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: Montserrat; font-weight: 900; src: url(/fontes-letra/montserrat-latin-900-normal.woff2) format('woff2'); font-display: swap; }

:root {
  --fundo: #09090b;
  --painel: #131316;
  --linha: rgba(255, 255, 255, 0.09);
  --texto: #f5f5f5;
  --apagado: #a1a1aa;
  --amarelo: #ffd60a;
  --vermelho: #ff3b30;
  --largura: 760px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background-color: var(--fundo);
  background-image:
    linear-gradient(var(--linha) 1px, transparent 1px),
    linear-gradient(90deg, var(--linha) 1px, transparent 1px);
  background-size: 56px 56px;
  background-attachment: fixed;
  color: var(--texto);
  font: 500 17px/1.6 Montserrat, system-ui, sans-serif;
}
body::before {
  /* escurece a grade nas bordas, como o fundo dos vídeos */
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1;
  background: radial-gradient(ellipse at 50% 30%, transparent 0%, var(--fundo) 75%);
}
a { color: var(--amarelo); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--amarelo); outline-offset: 3px; border-radius: 6px; }
img, video { max-width: 100%; display: block; }

.pagina { max-width: var(--largura); margin: 0 auto; padding: 28px 16px 72px; }

/* topo com a marca */
.topo { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 22px; border-bottom: 1px solid var(--linha); }
.marca { display: inline-flex; align-items: center; gap: 12px; color: var(--texto); text-decoration: none; font-weight: 800; letter-spacing: .3px; }
.marca svg { width: 34px; height: 34px; flex: none; }
.marca span { font-size: 16px; }
.menu { display: flex; gap: 18px; font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: 1px; }
.menu a { color: var(--apagado); text-decoration: none; }
.menu a:hover, .menu a[aria-current] { color: var(--amarelo); }

/* títulos */
.chamada { margin: 44px 0 10px; font: 400 clamp(52px, 13vw, 96px)/0.98 Anton, Impact, sans-serif; text-transform: uppercase; }
.chamada em { font-style: normal; color: var(--amarelo); }
.sub { color: var(--apagado); font-size: 17px; max-width: 560px; margin: 0 0 8px; }
.selo {
  display: inline-block; background: var(--vermelho); color: #fff; font-weight: 900; font-size: 13px; letter-spacing: 1.2px;
  text-transform: uppercase; padding: 6px 12px; border-radius: 7px; transform: rotate(-2deg);
}
.chip {
  display: inline-block; background: var(--amarelo); color: #111; font-weight: 900; font-size: 12px; letter-spacing: 1.2px;
  text-transform: uppercase; padding: 4px 10px; border-radius: 6px;
}
h2.secao { margin: 52px 0 18px; font: 400 30px/1.1 Anton, Impact, sans-serif; text-transform: uppercase; letter-spacing: .5px; }

/* lista de vídeos */
.lista { display: grid; gap: 16px; list-style: none; padding: 0; margin: 0; }
.ep {
  display: grid; grid-template-columns: 118px 1fr; gap: 18px; align-items: center; padding: 14px; border-radius: 18px;
  background: var(--painel); border: 1px solid var(--linha); color: var(--texto); text-decoration: none;
  transition: border-color .15s ease, transform .15s ease;
}
.ep:hover { border-color: rgba(255, 214, 10, .55); transform: translateY(-2px); }
.ep img { width: 118px; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 12px; }
.ep h3 { margin: 8px 0 6px; font: 400 26px/1.08 Anton, Impact, sans-serif; text-transform: uppercase; }
.ep p { margin: 0; color: var(--apagado); font-size: 15px; line-height: 1.5; }
.ep .meta { color: var(--apagado); font-size: 13px; font-weight: 700; margin-left: 8px; }

/* página do vídeo */
.video { margin: 30px auto 0; max-width: 380px; border-radius: 22px; overflow: hidden; border: 1px solid var(--linha); background: #000; }
.video video { width: 100%; aspect-ratio: 9 / 16; background: #000; }
.texto { margin-top: 36px; font-size: 18px; }
.texto p { margin: 0 0 18px; }
.texto ul { margin: 0 0 18px; padding-left: 22px; }
.texto li { margin-bottom: 10px; }
.texto li::marker { color: var(--amarelo); }
.botao {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 8px; padding: 15px 22px; border-radius: 14px;
  background: var(--amarelo); color: #111; font-weight: 900; text-decoration: none; text-transform: uppercase; letter-spacing: .8px; font-size: 15px;
}
.botao:hover { filter: brightness(1.06); }
.botao.vazado { background: transparent; color: var(--texto); border: 2px solid var(--linha); }

/* fontes */
.fontes { list-style: none; padding: 0; margin: 0; counter-reset: f; display: grid; gap: 12px; }
.fontes li {
  counter-increment: f; display: grid; grid-template-columns: 42px 1fr; gap: 14px; padding: 16px 18px;
  background: var(--painel); border: 1px solid var(--linha); border-radius: 16px;
}
.fontes li::before {
  content: counter(f); width: 34px; height: 34px; border-radius: 9px; background: var(--amarelo); color: #111;
  display: grid; place-items: center; font: 400 20px/1 Anton, Impact, sans-serif;
}
.fontes strong { display: block; font-weight: 800; line-height: 1.35; }
.fontes a { font-size: 14px; word-break: break-word; }
.fontes .dominio { color: var(--apagado); font-size: 13px; font-weight: 700; }

/* página de links */
.links-pagina { max-width: 480px; margin: 0 auto; padding: 56px 16px 64px; text-align: center; }
.links-pagina .logo { width: 92px; height: 92px; margin: 0 auto 18px; }
.links-pagina h1 { margin: 0; font: 800 22px/1.2 Montserrat, sans-serif; }
.links-pagina .sub { margin: 10px auto 28px; }
.botoes { display: grid; gap: 12px; }
.botoes a {
  display: block; padding: 17px 20px; border-radius: 16px; background: var(--painel); border: 1px solid var(--linha);
  color: var(--texto); text-decoration: none; font-weight: 800; transition: border-color .15s ease, transform .15s ease;
}
.botoes a:hover { border-color: var(--amarelo); transform: translateY(-2px); }
.botoes a.destaque { background: var(--amarelo); color: #111; border-color: var(--amarelo); }
.botoes small { display: block; font-weight: 500; font-size: 13px; color: var(--apagado); margin-top: 2px; }
.botoes a.destaque small { color: #3a3200; }

.como { margin-top: 56px; padding: 22px; border-radius: 18px; border: 1px solid var(--linha); background: var(--painel); }
.como ol { margin: 10px 0 0; padding-left: 22px; color: var(--apagado); }
.como li { margin-bottom: 8px; }
.como b { color: var(--texto); }

.rodape { margin-top: 64px; padding-top: 20px; border-top: 1px solid var(--linha); color: var(--apagado); font-size: 13px; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.rodape a { color: var(--apagado); }

@media (max-width: 520px) {
  .ep { grid-template-columns: 88px 1fr; gap: 14px; }
  .ep img { width: 88px; }
  .ep h3 { font-size: 22px; }
  .menu { gap: 12px; font-size: 12px; }
  .marca span { display: none; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }