/* ============================================================
   Comando Norte · 35 anos
   Uma folha de estilo para todas as páginas.
   ============================================================ */
:root{
  --camo:url('Imagens/camuflado.jpeg');
  --muro-img:url('Imagens/muro-logo.jpeg');
  --ouro:#c9a227; --ouro-claro:#e8c765; --ouro-fraco:#8a6f1c;
  --verde:#1c5c22; --verde-claro:#2c8a34;
  --bg:#050605; --bg2:#0a0d09; --painel:#0e120d;
  --texto:#e6e4dc; --texto2:#9d9a8e;
  --cols:25; --rows:20;                    /* 25 x 20 = 500 ingressos */
  --tapa:rgba(3,5,3,.965);                 /* tijolo ainda não vendido */
  --muro-max:min(1100px,78vh);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--texto);
  font-family:'Montserrat',system-ui,sans-serif; font-size:16px; line-height:1.6; font-weight:400;
}
body::before{                                   /* camuflado por trás do site inteiro */
  content:''; position:fixed; inset:0; z-index:-2;
  background:var(--camo) center/540px; filter:brightness(.34) saturate(.95);
}
body::after{                                    /* vinheta */
  content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(145% 110% at 50% 0%,#00000000 30%,#030403c4 95%);
}
h1,h2,h3,h4{font-weight:700; line-height:1.15}
a{color:var(--ouro-claro); text-decoration:none}
img{max-width:100%; display:block}
[hidden]{display:none !important}
.wrap{width:92%; max-width:1180px; margin:0 auto}
.ouro{color:var(--ouro)}
.rotulo{font-size:12px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--ouro)}
.centro{text-align:center}

/* ---------- menu com ícones ---------- */
.barra-nav{
  position:sticky; top:0; z-index:60; border-radius:10px;
  width:92%; max-width:1180px; margin:10px auto 0;
  background:linear-gradient(180deg,#0d1a0bd9,#050a04e6),var(--camo) center/300px;
  border:1px solid var(--ouro);
  box-shadow:0 8px 26px #0009, 0 0 34px #00000059 inset;
  overflow:hidden;
}
.barra-nav nav{display:flex; align-items:stretch}
.barra-nav nav a{
  flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:7px; padding:12px 6px 11px; text-align:center;
  color:#cfcabb; border-left:1px solid #2c7a3540; position:relative;
}
.barra-nav nav a:first-child{border-left:0}
.barra-nav nav a svg{width:25px; height:25px; fill:currentColor; flex:none}
.barra-nav nav a span{
  font-size:clamp(9px,1vw,13px); font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; line-height:1; white-space:nowrap;
}
.barra-nav nav a:hover{color:var(--ouro-claro); background:#ffffff08}
.barra-nav nav a.ativo{
  color:var(--ouro); background:linear-gradient(180deg,#2a2109cc,#12160a99);
  box-shadow:0 0 0 1px var(--ouro) inset, 0 0 26px #c9a22730 inset;
}

/* ---------- banner do topo ---------- */
.hero-banner{
  margin:14px auto 0; border:3px solid #1a1a14; border-radius:6px; overflow:hidden;
  box-shadow:0 0 0 1px #00000080, 0 18px 46px #000a, 0 0 70px #00000060 inset;
}
.hero-banner img{width:100%}

/* ---------- vídeo ---------- */
.video-box{
  position:relative; margin:16px auto 0; aspect-ratio:16/7;
  background:linear-gradient(180deg,#060a05e0,#030503ed),var(--camo) center/320px;
  border:3px solid #1a1a14; border-radius:10px;
  display:grid; place-items:center; overflow:hidden;
  box-shadow:0 0 60px #000 inset, 0 14px 40px #0008;
}
.video-box video,.video-box iframe{width:100%; height:100%; border:0; object-fit:cover}
.video-aviso{
  background:#fff; color:#111; border-radius:22px; padding:16px 34px;
  font-size:clamp(16px,2.2vw,27px); font-weight:500; text-align:center; line-height:1.3;
  box-shadow:0 8px 30px #0009;
}
.video-play{
  width:62px; height:62px; margin:20px auto 0; border:3px solid #fff; border-radius:50%;
  display:grid; place-items:center; cursor:pointer; transition:transform .2s,background .2s;
}
.video-play:hover{transform:scale(1.08); background:#ffffff1a}
.video-play svg{width:22px; fill:#fff; margin-left:4px}

/* ---------- título do muro ---------- */
.titulo-muro{text-align:center; padding:26px 0 16px}
.titulo-muro h2{
  font-size:clamp(20px,2.6vw,30px); letter-spacing:.1em; text-transform:uppercase; color:#efece2;
  display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap;
}
.titulo-muro h2 i{color:var(--ouro); font-style:normal; letter-spacing:.3em; font-size:.7em}
.titulo-muro p{                 /* nunca quebra em duas linhas, nem no celular */
  font-size:clamp(9px,2.5vw,12.5px); font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ouro); margin-top:6px; white-space:nowrap;
}

/* ---------- o muro ---------- */
.muro-caixa{position:relative; width:100%; max-width:var(--muro-max); margin:0 auto}
#muro{
  position:relative; aspect-ratio:1223/1286; width:100%;
  background:var(--muro-img) center/cover; border:5px solid #1e1e18;
  box-shadow:0 0 90px #000 inset, 0 20px 60px #000a; overflow:hidden;
}
#muro .linha{display:flex; height:calc(100%/var(--rows))}
#muro .linha:nth-child(even){margin-left:calc(-50%/var(--cols))}
#muro .linha:nth-child(even)::after{                /* meio tijolo fecha a borda direita */
  content:''; flex:0 0 calc(50%/var(--cols)); background:var(--tapa); border:1px solid #00000066;
}
.tijolo{
  flex:0 0 calc(100%/var(--cols)); height:100%;
  border:1px solid #00000066; border-right-color:#ffffff0d;
  background:var(--tapa);
  transition:background .6s, box-shadow .2s; position:relative; cursor:pointer;
}
.tijolo:hover{box-shadow:0 0 0 2px var(--ouro-claro) inset; z-index:3}
.tijolo.vendido{background:transparent; border-color:#ffffff1f}
.tijolo.vendido::after{content:''; position:absolute; inset:0; box-shadow:0 0 0 1px #c9a2272e inset}
.tijolo.novo{animation:acende 1.6s ease-out}
@keyframes acende{0%{box-shadow:0 0 0 3px #fff inset; filter:brightness(3)}100%{filter:none}}

/* refletores nas quinas, como no modelo */
.lampada{position:absolute; top:0; width:34%; height:52%; pointer-events:none; z-index:2}
.lampada.esq{left:2%}
.lampada.dir{right:2%}
.lampada::before{                                    /* o cone de luz */
  content:''; position:absolute; inset:0;
  background:radial-gradient(60% 70% at 50% 0%, #ffd97a4d, #ffd97a12 45%, transparent 72%);
}
.lampada::after{                                     /* a luminária */
  content:''; position:absolute; top:4px; left:50%; translate:-50% 0;
  width:52px; height:18px; border-radius:0 0 26px 26px;
  background:linear-gradient(180deg,#3a3226,#171310);
  box-shadow:0 5px 16px #ffd97a66, 0 0 0 2px #00000055;
}

/* ---------- placar ---------- */
.placar{display:flex; gap:40px; justify-content:center; flex-wrap:wrap; margin-bottom:16px; text-align:center}
.placar b{display:block; font-size:34px; font-weight:700; color:var(--ouro); line-height:1}
.placar span{font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--texto2)}
.barra{height:8px; background:#ffffff12; border-radius:99px; overflow:hidden; max-width:560px; margin:0 auto 26px}
.barra i{display:block; height:100%; background:linear-gradient(90deg,var(--verde),var(--ouro)); transition:width .6s}

/* ---------- trio de cartões da home ---------- */
.trio{display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:20px}
.bloco{
  background:linear-gradient(180deg,#0e1609d9,#050705e6),var(--camo) center/260px;
  border:1px solid #ffffff1f; border-radius:8px; padding:18px;
  display:flex; flex-direction:column; gap:12px;
}
.bloco h3{
  font-size:13.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#efece2;
}
.bloco p{font-size:13px; color:#bdb9ae; line-height:1.5}
.bloco .btn{align-self:stretch; width:100%; margin-top:auto}
.bloco .compartilha{flex:1}

.primeiros{list-style:none; display:grid; gap:6px}
.primeiros li{display:flex; align-items:center; gap:10px; font-size:12.5px}
.primeiros i{
  flex:none; width:20px; height:20px; border-radius:50%; background:var(--ouro); color:#171200;
  display:grid; place-items:center; font-style:normal; font-size:11px; font-weight:700;
}
.primeiros .nome{flex:1; letter-spacing:.08em; text-transform:uppercase; font-weight:600}
.primeiros .n{color:var(--texto2); font-size:11.5px}
.primeiros .dt{color:var(--texto2); font-size:11.5px; width:74px; text-align:right}

.compartilha{display:flex; gap:14px; align-items:flex-start}
.compartilha > div{flex:1}
.hashtag{font-size:11px; letter-spacing:.06em; color:var(--ouro); font-weight:600}

/* bilhete de compartilhamento */
.bilhete{
  flex:none; width:118px; border-radius:8px; padding:10px 8px; text-align:center;
  background:linear-gradient(180deg,#12180f,#080b07); border:2px solid var(--ouro-fraco);
  box-shadow:0 6px 20px #0009;
}
.bilhete .cima{font-size:9px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:#fff; line-height:1.2}
.bilhete .cima b{display:block; color:var(--ouro); font-size:11px}
.bilhete img{width:60px; margin:6px auto; border-radius:50%; border:1px solid var(--ouro-fraco)}
.bilhete .baixo{border-top:1px solid #ffffff1f; padding-top:6px; margin-top:4px}
.bilhete .baixo span{display:block; font-size:9px; letter-spacing:.1em; color:var(--texto2)}
.bilhete .baixo b{display:block; font-size:11px; letter-spacing:.06em; text-transform:uppercase}

.cert-mini{                       /* miniatura: a própria arte do certificado */
  flex:none; width:128px; border:1px solid var(--ouro); border-radius:4px;
  box-shadow:0 4px 16px #000a;
}

/* ---------- faixa de chamada ---------- */
.faixa-cta{
  margin-top:18px; border-radius:8px; overflow:hidden;
  background:linear-gradient(90deg,#0d2010e6,#14320fcc),var(--camo) center/420px;
  border:1px solid #ffffff1f;
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  padding:20px 26px;
}
.faixa-cta h3{
  font-style:italic; font-size:clamp(19px,2.4vw,27px); text-transform:uppercase; color:#fff;
  text-shadow:0 3px 0 #0009; line-height:1.1;
}
.faixa-cta h3 span{display:block; font-size:.72em; color:var(--ouro-claro)}
.faixa-cta.estreita{max-width:820px; margin-left:auto; margin-right:auto}

/* ---------- botões ---------- */
.btn{
  display:inline-block; padding:13px 28px; border:0; cursor:pointer; border-radius:3px;
  background:linear-gradient(180deg,var(--ouro-claro),var(--ouro)); color:#171200;
  font-family:inherit; font-size:12.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  box-shadow:0 4px 0 #6d5712; text-align:center;
}
.btn:hover{filter:brightness(1.08)}
.btn:active{transform:translateY(2px); box-shadow:0 2px 0 #6d5712}
.btn.verde{background:linear-gradient(180deg,var(--verde-claro),var(--verde)); color:#fff; box-shadow:0 4px 0 #10380f}
.btn.ghost{background:none; color:var(--ouro-claro); border:1px solid var(--ouro-fraco); box-shadow:none}
.btn.ghost:hover{border-color:var(--ouro); background:#ffffff08}
.btn.bloco-largo{align-self:stretch}

/* ---------- rodapé ---------- */
.rodape{
  margin-top:18px; padding:26px 0 30px; text-align:center;
  border-top:1px solid #8a6f1c55;
  background:linear-gradient(180deg,#040504f2,#030403);
}
.rodape b{
  display:block; font-size:12.5px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ouro);
}
.rodape span{display:block; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--texto2); margin-top:3px}
.redes{display:flex; gap:14px; justify-content:center; margin-top:12px}
.redes a{color:#cfcabb; display:grid; place-items:center}
.redes svg{width:19px; height:19px; fill:currentColor}
.redes a:hover{color:var(--ouro)}
.rodape .miudo{margin-top:14px; font-size:11px; letter-spacing:.1em; color:#5f5c53}
.rodape .miudo a{color:#6f6b60}

/* ============================================================
   Páginas internas
   ============================================================ */
.pagina{padding:40px 0 20px}
.titulo{text-align:center}
.titulo h1{font-size:clamp(28px,3.6vw,44px)}
.titulo p{color:var(--texto2); margin-top:8px; font-size:15px}
.divisor{width:80px; height:3px; background:var(--ouro); margin:18px auto 36px}

.texto{max-width:820px; margin:0 auto}
.texto p{margin-bottom:18px; color:#cbc8bd}
.texto .assina{text-align:right; color:var(--texto2); font-style:italic; font-size:14px}
.texto h2{font-size:19px; color:var(--ouro); letter-spacing:.01em}

.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:20px}
.cards.quatro{grid-template-columns:repeat(4,1fr)}
@media(max-width:1000px){.cards.quatro{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.cards.quatro{grid-template-columns:1fr}}
.card{
  background:linear-gradient(180deg,#0e1609d9,#050705e6),var(--camo) center/260px;
  border:1px solid #ffffff1f; border-radius:8px; padding:26px;
}
.card h3{color:var(--ouro); font-size:19px; margin-bottom:14px}
.card ul{list-style:none}
.card li{padding:6px 0; border-bottom:1px solid #ffffff0a}
.card li::before{content:'▪'; color:var(--ouro); margin-right:10px}
.card p{color:#cbc8bd}

.fotos{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:18px}
.foto{position:relative; border:1px solid #ffffff1a; border-radius:8px; overflow:hidden; background:#000}
.foto img{width:100%; height:280px; object-fit:cover; filter:sepia(.25) contrast(1.05); transition:transform .5s,filter .5s}
.foto:hover img{transform:scale(1.05); filter:none}
.foto figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:22px 16px 12px;
  background:linear-gradient(180deg,transparent,#000000e8);
  font-size:12px; letter-spacing:.14em; text-transform:uppercase; font-weight:600;
}

#busca{
  width:100%; max-width:420px; margin:0 auto 24px; display:block; padding:13px 16px;
  background:linear-gradient(180deg,#0e1609e0,#050705ed),var(--camo) center/200px;
  border:1px solid #ffffff2b; color:var(--texto); font:inherit; border-radius:4px;
}
.lista{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:8px}
.lista button{
  display:flex; gap:10px; align-items:center; text-align:left; cursor:pointer; border-radius:4px;
  background:linear-gradient(180deg,#0e1609e0,#050705ed),var(--camo) center/200px;
  border:1px solid #ffffff1a; color:var(--texto); font:inherit;
  font-size:14px; padding:11px 14px;
}
.lista button:hover{border-color:var(--ouro); background:#161c14}
.lista em{color:var(--ouro); font-style:normal; font-size:12px; font-weight:700}

.faq{max-width:820px; margin:0 auto; display:grid; gap:10px}
.faq details{background:var(--painel); border:1px solid #ffffff14; border-radius:8px; padding:0 20px}
.faq summary{
  cursor:pointer; padding:18px 0; font-weight:600; font-size:15.5px; color:#efece2;
  list-style:none; display:flex; justify-content:space-between; gap:16px; align-items:center;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+'; color:var(--ouro); font-size:22px; font-weight:400; line-height:1}
.faq details[open] summary::after{content:'–'}
.faq details[open] summary{color:var(--ouro)}
.faq p{padding:0 0 20px; color:#bdb9ae; font-size:14.5px; border-top:1px solid #ffffff0f; padding-top:16px}

.patros{display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:14px; margin-bottom:30px}
.patro{
  aspect-ratio:16/9; background:#fff; border-radius:6px; display:grid; place-items:center;
  padding:12px; border:1px solid #ffffff22; overflow:hidden;
}
.patro img{max-height:100%; object-fit:contain}
.patro.vazio{
  background:#0d100cd9; border:1px dashed #ffffff2e; color:var(--texto2); cursor:pointer;
  font-size:12px; letter-spacing:.14em; text-transform:uppercase; text-align:center; font-weight:600;
}
.patro.vazio:hover{border-color:var(--ouro); color:var(--ouro)}

/* ============================================================
   Modais
   ============================================================ */
dialog{
  position:fixed; inset:0; margin:auto;
  border:1px solid var(--ouro-fraco); border-radius:10px; padding:0;
  background:linear-gradient(180deg,#0b120af2,#050705f7),var(--camo) center/340px;
  color:var(--texto);
  width:min(760px,92vw); max-height:88vh; overflow:auto;
  box-shadow:0 30px 90px #000;
}
dialog::backdrop{background:#000000e0; backdrop-filter:blur(3px)}
.dlg-topo{
  padding:20px 26px; border-bottom:1px solid var(--ouro-fraco);
  background:linear-gradient(90deg,#111a0c,#0a0c09);
  display:flex; align-items:center; gap:16px; position:sticky; top:0; z-index:2;
}
.dlg-topo img{width:46px; height:46px; border-radius:50%; border:1px solid var(--ouro)}
.dlg-topo h3{font-size:20px; color:var(--ouro)}
.dlg-topo small{color:var(--texto2); font-size:12px; letter-spacing:.1em; text-transform:uppercase}
.dlg-topo .fechar{margin-left:auto; background:none; border:0; color:var(--texto2); font-size:26px; cursor:pointer; line-height:1}
.dlg-topo.so-fechar{padding:10px 16px; background:none; border-bottom:1px solid #ffffff14}
.dlg-corpo{padding:26px}
.dlg-rodape{padding:0 26px 26px; display:flex; gap:12px; justify-content:flex-end; flex-wrap:wrap}

.passos{display:flex; gap:8px; padding:14px 26px; border-bottom:1px solid #ffffff12; background:#07090699}
.passos div{
  flex:1; text-align:center; font-size:10.5px; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:#5f5c53; padding-bottom:8px; border-bottom:2px solid #ffffff14;
}
.passos div.ativo{color:var(--ouro); border-color:var(--ouro)}
.passos div.ok{color:var(--verde-claro); border-color:var(--verde)}

fieldset{
  border:1px solid #ffffff1f; border-radius:8px; padding:20px; margin-bottom:20px;
  background:linear-gradient(180deg,#0d140cc4,#060906d9),var(--camo) center/220px;
}
legend{padding:0 10px; color:var(--ouro); font-size:12.5px; font-weight:700; letter-spacing:.18em; text-transform:uppercase}
.grade{display:grid; grid-template-columns:1fr 1fr; gap:14px}
label{display:block; font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:#a5a294; margin-bottom:6px}
input,textarea,select{
  width:100%; padding:12px 14px; background:#070a06d9; border:1px solid #ffffff20;
  color:var(--texto); font:inherit; font-size:14px; border-radius:4px;
}
input::placeholder,textarea::placeholder{color:#55524a}
input:focus,textarea:focus,select:focus{outline:none; border-color:var(--ouro)}
.opcoes{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.opcoes label{
  display:flex; gap:12px; align-items:flex-start; padding:16px; cursor:pointer;
  border:1px solid #ffffff20; border-radius:8px; background:#070a06d9;
  font-size:13px; letter-spacing:0; text-transform:none; font-weight:400; color:#cbc8bd; margin:0;
}
.opcoes label:has(input:checked){border-color:var(--ouro); background:#15180d}
.opcoes input{width:auto; margin-top:3px; accent-color:var(--ouro)}
.opcoes b{display:block; color:var(--ouro); font-size:12.5px; letter-spacing:.12em; text-transform:uppercase; margin-bottom:4px}
.aviso{font-size:12.5px; color:var(--texto2); line-height:1.5}
.erro{color:#e06c5a; font-size:12.5px; min-height:18px}

.resumo{
  background:linear-gradient(180deg,#0d140cc4,#060906d9),var(--camo) center/220px;
  border:1px solid #ffffff1f; border-radius:8px; padding:20px; margin-bottom:20px;
}
.resumo .linha-r{display:flex; justify-content:space-between; gap:16px; padding:7px 0; font-size:14px; border-bottom:1px solid #ffffff0a}
.resumo .linha-r:last-child{border:0; padding-top:14px; font-size:19px; font-weight:700; color:var(--ouro)}
.pix-qr{
  width:200px; height:200px; margin:0 auto 14px; border-radius:6px;
  background:#fff; padding:8px;
}
.aguardando{
  margin-top:14px; padding:12px 14px; border-radius:6px;
  border:1px solid var(--ouro-fraco); background:#c9a2271a; color:var(--ouro-claro);
}
.pix-codigo{
  font-family:ui-monospace,monospace; font-size:11.5px; word-break:break-all;
  background:#070a06d9; border:1px dashed var(--ouro-fraco); padding:14px; border-radius:6px;
  color:#bdb9ac; max-height:120px; overflow:auto;
}
.frase-box{border-left:3px solid var(--ouro); padding:4px 0 4px 16px; color:#d7d4c9; font-size:17px; font-style:italic}
.sucesso{text-align:center}
.sucesso .num{font-size:52px; font-weight:700; color:var(--ouro); line-height:1}

/* ============================================================
   Certificado: a arte do designer entra como imagem e o site só
   escreve por cima o nome e o número do tijolo. As posições são
   em % da imagem (828x1472), medidas na própria arte:
     nome  -> faixa livre entre o "Obrigado" e o filete dourado
     número-> pedra central do tijolo
   ============================================================ */
.cert{
  position:relative; width:100%; max-width:560px; margin:0 auto;
  aspect-ratio:828/1472; container-type:inline-size;
  box-shadow:0 16px 50px #000a;
}
.cert img.arte{width:100%; height:100%; display:block; object-fit:cover}

.cert .cert-nome i{font-style:normal}
.cert .cert-nome,
.cert .cert-num{
  position:absolute; display:flex; align-items:center; justify-content:center;
  white-space:nowrap; text-align:center; line-height:1;
  font-family:'Cinzel',Georgia,serif; font-weight:700;
}
.cert .cert-nome{
  left:9%; right:9%; top:45.7%; height:5.6%;
  font-size:6.2cqw; letter-spacing:.02em;
  color:#f0d98a;
  text-shadow:0 2px 4px #000, 0 0 14px #000a;
}
.cert .cert-num{
  left:35%; width:29%; top:77.4%; height:8.2%;
  font-size:7.4cqw; letter-spacing:.03em;
  color:#f3e0a4;
  text-shadow:0 2px 3px #000, 0 0 10px #000c;
}

/* ---------- compartilhar ---------- */
dialog.estreito{width:min(440px,92vw)}
.share-opcoes{display:grid; gap:10px}
.share-opcoes .btn{width:100%}
.btn.zap{background:linear-gradient(180deg,#2fe070,#1faa51); color:#06240f; box-shadow:0 4px 0 #136b33}
.btn.insta{
  background:linear-gradient(90deg,#f9a03f,#e1306c 45%,#a02bc4); color:#fff; box-shadow:0 4px 0 #5f1a72;
}

.dica{
  position:fixed; z-index:90; pointer-events:none; opacity:0; transition:opacity .12s;
  background:#080b08; border:1px solid var(--ouro); padding:9px 13px; max-width:280px;
  font-size:13px; line-height:1.4; box-shadow:0 10px 34px #000;
}
.dica.on{opacity:1}
.dica b{display:block; color:var(--ouro-claro); font-size:13px; letter-spacing:.08em; text-transform:uppercase}
.dica i{color:#b3afa2}

/* ============================================================
   MODO ESTÁTICO  (?estatica)
   Palco de largura fixa, encolhido por JS até caber inteiro na
   tela. Nada de rolagem: tudo aparece de uma vez, como o cliente
   pediu. O preço é texto pequeno em tela pequena.
   ============================================================ */
html.estatico,html.estatico body{height:100%; overflow:hidden; background:#000}
html.estatico body::before,html.estatico body::after{display:none}
html.estatico #palco{
  position:absolute; top:0; left:50%; width:1080px;
  transform-origin:top center;
  background:var(--bg);
}
html.estatico #palco::before{
  content:''; position:absolute; inset:0; z-index:-2;
  background:var(--camo) center/540px; filter:brightness(.34) saturate(.95);
}
html.estatico .barra-nav{position:static}
html.estatico{--muro-max:560px}
html.estatico .video-box{aspect-ratio:16/5}
html.estatico .rodape{margin:8px 0 12px; padding:14px 0 16px}
/* aperta o vertical: quanto menor a altura, maior a escala que cabe na tela */
html.estatico .titulo-muro{padding:14px 0 10px}
html.estatico .trio{gap:10px; margin-top:12px}
html.estatico .bloco{padding:14px; gap:9px}
html.estatico .faixa-cta{padding:14px 22px; margin-top:12px}
html.estatico .hero-banner{margin-top:10px}
html.estatico .video-box{margin-top:10px}
html.estatico .muro-legenda{margin-top:9px}

.aviso-modo{
  position:fixed; right:12px; bottom:12px; z-index:95;
  background:#0b0f0ae6; border:1px solid var(--ouro-fraco); border-radius:99px;
  padding:8px 16px; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ouro);
}

/* ============================================================
   Responsivo (não vale no modo estático, que é fixo por decisão)
   ============================================================ */
@media(max-width:980px){
  .trio{grid-template-columns:1fr}
  .faixa-cta{justify-content:center; text-align:center}
  .barra-nav nav a{padding:10px 4px 9px; gap:5px}
  .barra-nav nav a svg{width:21px; height:21px}
}
@media(max-width:760px){
  .wrap{width:94%}
  .pagina{padding:26px 0 10px}
  section,.pagina{padding-bottom:10px}
  .grade,.opcoes{grid-template-columns:1fr}
  .placar{gap:24px}
  .placar b{font-size:28px}
  /* no celular o menu inteiro rola de lado em vez de espremer os 7 itens */
  .barra-nav{border-radius:8px; margin-top:8px}
  .barra-nav nav{overflow-x:auto; scrollbar-width:none}
  .barra-nav nav::-webkit-scrollbar{display:none}
  .barra-nav nav a{flex:0 0 auto; min-width:78px; padding:10px 10px 9px}
  .barra-nav nav a span{font-size:9.5px}
  .video-box{aspect-ratio:16/9}
  .video-aviso{padding:12px 20px; border-radius:16px}
  .video-play{width:48px; height:48px; margin-top:14px}
  .titulo-muro{padding:20px 0 12px}
  .compartilha{flex-direction:column; align-items:center; text-align:center}
  .compartilha > div{width:100%}
  .bloco .btn{align-self:stretch}
  .primeiros .dt{display:none}         /* a data não cabe; o número basta */
  .faixa-cta{padding:18px}
  .faixa-cta .btn{width:100%}
  .foto img{height:210px}
  .lista{grid-template-columns:1fr}
  /* modal ocupa a tela inteira no celular */
  dialog{
    width:100vw; max-width:100vw; height:100dvh; max-height:100dvh;
    border-radius:0; border-left:0; border-right:0;
  }
  .dlg-corpo{padding:18px}
  .dlg-rodape{padding:0 18px 18px; flex-direction:column-reverse}
  .dlg-rodape .btn{width:100%}
  fieldset{padding:16px 14px}
  .passos{padding:12px 14px; gap:4px}
  .passos div{font-size:9px; letter-spacing:.06em}
  .cert{padding:26px 18px}
  .cert .nome-c{font-size:22px}
  .cert .rodape-c{flex-direction:column; gap:6px; align-items:center; text-align:center}
}
@media(max-width:600px){:root{--cols:20}}          /* 20 x 25 = 500, mais alto no celular */
@media(max-width:420px){
  .barra-nav nav a{min-width:70px}
  .bilhete{width:104px}
}