/*
 * Gorf — site. Mesma paleta do app (roxo de noite, verde-limão do mascote):
 * quem chega pelo Google e baixa o app não deve sentir que trocou de marca.
 */
:root {
  --fundo: #1C0628;
  --fundo-2: #2B0A3D;
  --superficie: #35104A;
  --superficie-2: #431560;
  --lime: #CEFF00;
  --lime-escuro: #A8D400;
  --rosa: #FF4FA3;
  --texto: #FFFFFF;
  --texto-2: rgba(255, 255, 255, 0.78);
  --texto-3: rgba(255, 255, 255, 0.58);
  --borda: rgba(255, 255, 255, 0.12);
  --sombra: 0 30px 80px -20px rgba(0, 0, 0, 0.6);
  --raio: 24px;
  --largura: 1180px;
  --fonte-titulo: 'Bricolage Grotesque', system-ui, sans-serif;
  --fonte-texto: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation: none !important; transition: none !important; } }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--fonte-texto);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; height: auto; }
a { color: var(--lime); text-underline-offset: 3px; }
a:hover { color: #fff; }
:focus-visible { outline: 3px solid var(--lime); outline-offset: 3px; border-radius: 6px; }

h1, h2, h3 { font-family: var(--fonte-titulo); line-height: 1.05; letter-spacing: -0.025em; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(42px, 7.2vw, 84px); font-weight: 800; }
h2 { font-size: clamp(32px, 4.6vw, 54px); font-weight: 800; }
h3 { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
p { margin: 0 0 16px; color: var(--texto-2); }

.destaque { color: var(--lime); }
.riscado {
  background: linear-gradient(transparent 62%, rgba(206, 255, 0, 0.35) 62%);
  padding: 0 4px;
}

.conteiner { width: min(var(--largura), 100% - 40px); margin-inline: auto; }

.pular { position: absolute; left: -9999px; }
.pular:focus { left: 16px; top: 16px; z-index: 100; background: var(--lime); color: #1A0625; padding: 10px 16px; border-radius: 10px; }

/* ---------------------------------------------------------------- Topo */

.topo {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  background: rgba(28, 6, 40, 0.72);
  border-bottom: 1px solid transparent;
  transition: border-color .2s;
}
.topo.rolou { border-bottom-color: var(--borda); }
.topo .conteiner { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 72px; }
.marca img { height: 38px; width: auto; }
.menu { display: flex; align-items: center; gap: 28px; }
.menu a { color: var(--texto-2); text-decoration: none; font-weight: 600; font-size: 15px; }
.menu a:hover { color: var(--texto); }
.menu a.botao, .menu a.botao:hover { color: #1A0625; }
@media (max-width: 860px) { .menu > a:not(.botao) { display: none; } .menu { gap: 14px; } }

/* Dropdown de jogos: abre no hover/foco no computador e no toque (JS) no celular. */
.menu-jogos { position: relative; }
.menu-jogos-botao {
  background: none; border: 0; padding: 8px 0; cursor: pointer;
  color: var(--texto-2); font: 600 15px var(--fonte-texto); display: inline-flex; align-items: center; gap: 6px;
}
.menu-jogos-botao:hover, .menu-jogos.aberto .menu-jogos-botao { color: var(--texto); }
.menu-jogos-botao span { font-size: 11px; transition: rotate .2s; }
.menu-jogos.aberto .menu-jogos-botao span { rotate: 180deg; }
.menu-jogos-lista {
  position: absolute; top: calc(100% + 10px); left: 50%; translate: -50% 0; z-index: 60;
  width: 520px; max-width: calc(100vw - 32px); margin: 0; padding: 12px; list-style: none;
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
  background: #2a0b3a; border: 1px solid var(--borda); border-radius: 20px; box-shadow: var(--sombra);
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .15s, transform .15s, visibility .15s;
}
.menu-jogos-lista::before { content: ''; position: absolute; inset: -12px 0 auto; height: 12px; }
.menu-jogos.aberto .menu-jogos-lista { opacity: 1; visibility: visible; transform: none; }
@media (hover: hover) { .menu-jogos:hover .menu-jogos-lista, .menu-jogos:focus-within .menu-jogos-lista { opacity: 1; visibility: visible; transform: none; } }
.menu-jogos-lista a { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 12px; color: var(--texto); text-decoration: none; font-weight: 700; font-size: 15px; }
.menu-jogos-lista a:hover { background: rgba(255,255,255,.07); color: var(--texto); }
.menu-jogos-lista img { width: 36px; height: 36px; border-radius: 10px; flex: none; }
.menu-jogos-lista small { display: block; font-weight: 600; font-size: 12px; color: var(--lime); }
.menu-jogos-lista .todos { grid-column: 1 / -1; border-top: 1px solid var(--borda); margin-top: 6px; padding-top: 6px; }
.menu-jogos-lista .todos a { color: var(--lime); justify-content: center; }
@media (max-width: 860px) {
  .menu-jogos { position: static; }
  .menu-jogos-lista { position: fixed; top: 72px; left: 16px; right: 16px; translate: none; width: auto; grid-template-columns: 1fr 1fr; max-height: calc(100dvh - 90px); overflow-y: auto; }
}
@media (max-width: 420px) { .menu-jogos-lista { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- Botões */

.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 0 28px; border-radius: 999px;
  background: var(--lime); color: #1A0625; font-weight: 800; font-size: 16px;
  text-decoration: none; border: 0; cursor: pointer;
  box-shadow: 0 10px 30px -8px rgba(206, 255, 0, 0.55);
  transition: transform .15s, box-shadow .15s, background .15s;
}
.botao:hover { color: #1A0625; transform: translateY(-2px); box-shadow: 0 16px 40px -10px rgba(206, 255, 0, 0.7); }
.botao.pequeno { min-height: 42px; padding: 0 18px; font-size: 14px; box-shadow: none; }
.botao.fantasma { background: transparent; color: var(--texto); border: 1px solid var(--borda); box-shadow: none; }
.botao.fantasma:hover { background: rgba(255,255,255,.06); color: var(--texto); }

.lojas { display: flex; flex-wrap: wrap; gap: 12px; }
.loja {
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 60px; padding: 0 22px 0 18px; border-radius: 16px;
  background: #000; color: #fff; text-decoration: none; border: 1px solid rgba(255,255,255,.18);
  transition: transform .15s, border-color .15s;
}
.loja:hover { color: #fff; transform: translateY(-2px); border-color: rgba(255,255,255,.4); }
.loja svg { width: 26px; height: 26px; flex: none; }
.loja small { display: block; font-size: 11px; opacity: .75; line-height: 1.1; }
.loja strong { display: block; font-size: 18px; line-height: 1.15; font-weight: 700; }
.loja[aria-disabled="true"] { cursor: default; }
.loja[aria-disabled="true"]:hover { transform: none; }

/* ---------------------------------------------------------------- Hero */

.hero { position: relative; padding: 56px 0 96px; overflow: hidden; isolation: isolate; }
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: -2;
  background: url('/img/amigos-brindando-bar.webp') center/cover no-repeat;
  opacity: .22; filter: saturate(1.2);
}
.hero::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(60% 50% at 80% 30%, rgba(206,255,0,.16), transparent 70%),
    radial-gradient(50% 60% at 10% 90%, rgba(255,79,163,.18), transparent 70%),
    linear-gradient(180deg, rgba(28,6,40,.55) 0%, var(--fundo) 92%);
}
.hero .conteiner { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; }
@media (max-width: 960px) { .hero .conteiner { grid-template-columns: 1fr; } }

.selo {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 999px; margin-bottom: 22px;
  background: rgba(206,255,0,.1); border: 1px solid rgba(206,255,0,.3);
  color: var(--lime); font-weight: 700; font-size: 13px; letter-spacing: .04em; text-transform: uppercase;
}
.selo::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 4px rgba(206,255,0,.2); }

.hero h1 { margin-bottom: 22px; }
.hero .subtitulo { font-size: clamp(18px, 2vw, 21px); max-width: 560px; margin-bottom: 32px; }
.hero .lojas { margin-bottom: 28px; }

.provas { display: flex; flex-wrap: wrap; gap: 10px 22px; padding: 0; margin: 0; list-style: none; color: var(--texto-2); font-size: 15px; font-weight: 600; }
.provas li { display: flex; align-items: center; gap: 8px; }
.provas li::before { content: '✓'; color: var(--lime); font-weight: 900; }

/* Dois celulares levemente girados: mostra o app de verdade sem precisar de vídeo. */
.vitrine { position: relative; height: 620px; }
.celular {
  position: absolute; width: 270px; border-radius: 42px; padding: 10px;
  background: linear-gradient(145deg, #2a2a2e, #0d0d10);
  box-shadow: var(--sombra), inset 0 0 0 1px rgba(255,255,255,.08);
}
.celular img { border-radius: 33px; aspect-ratio: 1284 / 2778; object-fit: cover; width: 100%; }
.celular.frente { right: 8%; top: 20px; transform: rotate(4deg); z-index: 2; animation: flutua 7s ease-in-out infinite; }
.celular.tras { left: 4%; top: 90px; transform: rotate(-7deg); opacity: .92; animation: flutua 7s ease-in-out -3.5s infinite; }
@keyframes flutua { 50% { translate: 0 -12px; } }
.mascote-hero { position: absolute; width: 140px; left: -2%; bottom: 10px; z-index: 3; filter: drop-shadow(0 18px 30px rgba(0,0,0,.5)); }
@media (max-width: 960px) {
  .vitrine { height: 520px; max-width: 460px; margin: 8px auto 0; width: 100%; }
  .celular { width: 230px; }
  .mascote-hero { width: 120px; }
}
@media (max-width: 480px) {
  .vitrine { height: 440px; }
  .celular { width: 190px; border-radius: 34px; padding: 8px; }
  .celular img { border-radius: 27px; }
}

/* ---------------------------------------------------------------- Faixa de números */

.numeros { border-block: 1px solid var(--borda); background: var(--fundo-2); }
.numeros .conteiner { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding: 34px 0; }
.numeros div { text-align: center; }
.numeros strong { display: block; font-family: var(--fonte-titulo); font-size: clamp(30px, 4vw, 44px); color: var(--lime); line-height: 1; }
.numeros span { color: var(--texto-3); font-size: 14px; font-weight: 600; }
@media (max-width: 720px) { .numeros .conteiner { grid-template-columns: repeat(2, 1fr); } }

/* ---------------------------------------------------------------- Seções */

.secao { padding: 110px 0; }
.secao.alt { background: var(--fundo-2); }
.cabeca { max-width: 760px; margin-bottom: 56px; }
.cabeca.centro { margin-inline: auto; text-align: center; }
.sobrelinha { display: block; color: var(--lime); font-weight: 800; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 14px; }
.cabeca p { font-size: 19px; margin-top: 18px; }
@media (max-width: 720px) { .secao { padding: 76px 0; } .cabeca { margin-bottom: 40px; } }

/* Jogos */
.jogos { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.jogo {
  position: relative; display: flex; flex-direction: column; gap: 10px;
  padding: 26px; border-radius: var(--raio);
  background: linear-gradient(160deg, var(--superficie) 0%, var(--fundo-2) 100%);
  border: 1px solid var(--borda); color: inherit; text-decoration: none;
  transition: transform .2s, border-color .2s, background .2s;
}
a.jogo:hover { transform: translateY(-4px); border-color: rgba(206,255,0,.45); color: inherit; }
.jogo .emoji { font-size: 34px; line-height: 1; }
.icone-jogo { width: 88px; height: 88px; border-radius: 22px; object-fit: cover; box-shadow: 0 10px 24px -10px rgba(0,0,0,.6); margin-bottom: 4px; }
.jogo.grande .icone-jogo { width: 120px; height: 120px; border-radius: 28px; }
.jogo h3 { font-size: 21px; }
.jogo p { margin: 0; font-size: 15px; color: var(--texto-3); }
.jogo .mais { margin-top: auto; padding-top: 6px; color: var(--lime); font-weight: 700; font-size: 14px; }
.jogo-cta { background: linear-gradient(150deg, rgba(206,255,0,.16), rgba(206,255,0,.04)); border-color: rgba(206,255,0,.35); }
.jogo.grande { grid-column: span 2; background: linear-gradient(135deg, #4b1a6b 0%, #2B0A3D 60%); }
.jogo { scroll-margin-top: 96px; }
@media (max-width: 620px) { .jogo.grande { grid-column: auto; } }

/* Passos */
.passos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; counter-reset: passo; }
.passo { padding: 30px; border-radius: var(--raio); background: var(--superficie); border: 1px solid var(--borda); }
.passo::before {
  counter-increment: passo; content: counter(passo);
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; margin-bottom: 18px;
  background: var(--lime); color: #1A0625; font-family: var(--fonte-titulo); font-weight: 800; font-size: 22px;
}
.passo h3 { margin-bottom: 10px; }
.passo p { margin: 0; font-size: 16px; }
@media (max-width: 860px) { .passos { grid-template-columns: 1fr; } }

/* Bloco texto + imagem */
.dupla { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.dupla.invertida > :first-child { order: 2; }
@media (max-width: 900px) { .dupla { grid-template-columns: 1fr; gap: 36px; } .dupla.invertida > :first-child { order: 0; } }
.foto { border-radius: 28px; overflow: hidden; box-shadow: var(--sombra); position: relative; }
.foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.foto .etiqueta {
  position: absolute; left: 18px; bottom: 18px; padding: 12px 16px; border-radius: 16px;
  background: rgba(28,6,40,.82); backdrop-filter: blur(8px); font-weight: 700; font-size: 15px;
}
.foto .etiqueta span { color: var(--lime); }

.lista-check { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 14px; }
.lista-check li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; color: var(--texto-2); }
.lista-check li::before {
  content: '✓'; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px;
  background: rgba(206,255,0,.14); color: var(--lime); font-weight: 900; font-size: 14px;
}
.lista-check strong { color: var(--texto); }

/* Comparação */
.comparar { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.comparar > div { padding: 30px; border-radius: var(--raio); border: 1px solid var(--borda); background: var(--superficie); }
.comparar > div.melhor { border-color: rgba(206,255,0,.5); background: linear-gradient(160deg, #3d1756, #2B0A3D); }
.comparar h3 { margin-bottom: 16px; }
.comparar ul { margin: 0; padding-left: 20px; color: var(--texto-2); display: grid; gap: 10px; }
@media (max-width: 760px) { .comparar { grid-template-columns: 1fr; } }

/* Galeria de telas */
.telas { display: flex; gap: 22px; overflow-x: auto; padding: 6px 4px 22px; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.telas figure { flex: 0 0 230px; margin: 0; scroll-snap-align: start; }
.telas img { border-radius: 30px; border: 6px solid #111; box-shadow: var(--sombra); aspect-ratio: 1284/2778; object-fit: cover; }
.telas figcaption { margin-top: 14px; font-size: 14px; color: var(--texto-3); text-align: center; font-weight: 600; }

/* Ocasiões */
.ocasioes { display: flex; flex-wrap: wrap; gap: 12px; }
.ocasioes span {
  padding: 12px 20px; border-radius: 999px; border: 1px solid var(--borda);
  background: rgba(255,255,255,.04); font-weight: 700; font-size: 16px;
}

/* FAQ */
.faq { max-width: 860px; margin: 0 auto; display: grid; gap: 12px; }
.faq details { border-radius: 18px; border: 1px solid var(--borda); background: var(--superficie); padding: 0 24px; }
.faq details[open] { border-color: rgba(206,255,0,.35); }
.faq summary {
  cursor: pointer; list-style: none; padding: 22px 36px 22px 0; position: relative;
  font-family: var(--fonte-titulo); font-weight: 700; font-size: 19px; letter-spacing: -0.01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 0; top: 50%; translate: 0 -50%; font-size: 28px; color: var(--lime); transition: rotate .2s; }
.faq details[open] summary::after { rotate: 45deg; }
.faq details p { padding-bottom: 20px; margin: 0; }

/* Chamada final */
.chamada {
  position: relative; overflow: hidden; border-radius: 36px; padding: clamp(40px, 7vw, 80px);
  background: linear-gradient(120deg, #CEFF00 0%, #E8FF7A 100%); color: #1A0625; isolation: isolate;
}
.chamada h2 { max-width: 640px; }
.chamada p { color: rgba(26,6,37,.78); font-size: 19px; max-width: 520px; margin: 18px 0 30px; }
.chamada .mascote { position: absolute; right: 4%; bottom: -20px; width: min(320px, 34%); z-index: -1; }
.chamada .loja { background: #1A0625; }
@media (max-width: 720px) { .chamada .mascote { opacity: .25; width: 60%; } }

/* Aviso de bebida responsável */
.responsavel {
  display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start;
  padding: 24px 26px; border-radius: 20px; background: rgba(255,255,255,.04); border: 1px solid var(--borda);
}
.responsavel .icone { font-size: 30px; line-height: 1; }
.responsavel p { margin: 0; font-size: 15px; }
.responsavel strong { color: var(--texto); }

/* ---------------------------------------------------------------- Rodapé */

.rodape { border-top: 1px solid var(--borda); padding: 64px 0 40px; margin-top: 40px; }
.rodape .colunas { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
.rodape h4 { margin: 0 0 14px; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-3); }
.rodape ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.rodape a { color: var(--texto-2); text-decoration: none; font-size: 15px; }
.rodape a:hover { color: var(--lime); }
.rodape .marca img { height: 34px; margin-bottom: 14px; }
.rodape .fim { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--borda); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; color: var(--texto-3); font-size: 14px; }
@media (max-width: 820px) { .rodape .colunas { grid-template-columns: 1fr 1fr; } }

/* ---------------------------------------------------------------- Páginas internas (guias e textos legais) */

.migalhas { font-size: 14px; color: var(--texto-3); margin-bottom: 22px; }
.migalhas a { color: var(--texto-3); text-decoration: none; }
.migalhas a:hover { color: var(--lime); }
.migalhas span { margin: 0 8px; opacity: .6; }

.capa { position: relative; padding: 56px 0 72px; overflow: hidden; isolation: isolate; }
.capa::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(60% 70% at 85% 10%, rgba(206,255,0,.13), transparent 70%), radial-gradient(50% 60% at 0% 100%, rgba(255,79,163,.14), transparent 70%);
}
.capa .conteiner { display: grid; grid-template-columns: 1.25fr .75fr; gap: 48px; align-items: center; }
.capa h1 { font-size: clamp(38px, 5.8vw, 66px); margin-bottom: 20px; }
.capa .subtitulo { font-size: 20px; max-width: 640px; }
.capa .celular { position: relative; width: 250px; margin: 0 auto; transform: rotate(3deg); }
@media (max-width: 900px) { .capa .conteiner { grid-template-columns: 1fr; } .capa .celular { width: 210px; } }

.artigo { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 56px; padding: 40px 0 80px; }
@media (max-width: 960px) { .artigo { grid-template-columns: 1fr; } .indice { display: none; } }
.indice { position: sticky; top: 100px; align-self: start; font-size: 14px; }
.indice strong { display: block; color: var(--texto-3); text-transform: uppercase; letter-spacing: .1em; font-size: 12px; margin-bottom: 12px; }
.indice ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; border-left: 2px solid var(--borda); }
.indice a { color: var(--texto-2); text-decoration: none; padding-left: 14px; display: block; }
.indice a:hover { color: var(--lime); }

.texto { max-width: 760px; }
.texto h2 { font-size: clamp(28px, 3.4vw, 38px); margin: 56px 0 18px; scroll-margin-top: 96px; }
.texto h2:first-child { margin-top: 0; }
.texto h3 { margin: 32px 0 12px; }
.texto p, .texto li { font-size: 18px; }
.texto ul, .texto ol { color: var(--texto-2); padding-left: 24px; display: grid; gap: 8px; margin: 0 0 20px; }
.texto .caixa { padding: 22px 24px; border-radius: 18px; background: var(--superficie); border-left: 4px solid var(--lime); margin: 26px 0; }
.texto .caixa p:last-child { margin: 0; }

.frases { list-style: none; padding: 0 !important; display: grid; gap: 10px !important; counter-reset: frase; }
.frases li {
  counter-increment: frase; display: grid; grid-template-columns: 40px 1fr; gap: 10px; align-items: baseline;
  padding: 14px 18px; border-radius: 14px; background: var(--superficie); border: 1px solid var(--borda); color: var(--texto) !important;
}
.frases li::before { content: counter(frase); color: var(--lime); font-weight: 800; font-family: var(--fonte-titulo); }

.tabela { width: 100%; border-collapse: separate; border-spacing: 0; margin: 20px 0 28px; border: 1px solid var(--borda); border-radius: 18px; overflow: hidden; font-size: 16px; }
.tabela th, .tabela td { padding: 14px 18px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--borda); }
.tabela tr:last-child td { border-bottom: 0; }
.tabela th { background: var(--superficie-2); font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--texto-3); }
.tabela td:first-child { font-family: var(--fonte-titulo); font-weight: 800; color: var(--lime); font-size: 20px; width: 70px; }
.tabela td { color: var(--texto-2); background: var(--superficie); }

.relacionados { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin-top: 20px; }

.legal { max-width: 760px; padding: 32px 0 80px; }
.legal h1 { font-size: clamp(34px, 5vw, 52px); margin-bottom: 12px; }
.legal h2 { font-size: 26px; margin: 40px 0 12px; }
.legal h3 { font-size: 19px; margin: 26px 0 8px; }
.legal p, .legal li { color: var(--texto-2); }
.legal .atualizado { color: var(--texto-3); font-size: 14px; margin-bottom: 32px; }

/* Entrada suave ao rolar */
.js .surge { opacity: 0; translate: 0 24px; transition: opacity .7s ease, translate .7s ease; }
.js .surge.visivel { opacity: 1; translate: 0 0; }