html, body { margin:0; padding:0; background:#061116; }
  * { box-sizing: border-box; }
  a { color:#C8E7CA; text-decoration:none; }
  a:hover { color:#D3ECD4; }
  ::selection { background:#4C7B66; color:#D3ECD4; }
  :focus-visible { outline:2px solid #7EAD8F; outline-offset:3px; }
  input::placeholder { color:#4C7B66; }
  @keyframes moonPulse {
    0%,100% { box-shadow: 0 0 60px 12px rgba(126,173,143,.35); }
    50%     { box-shadow: 0 0 100px 24px rgba(200,231,202,.5); }
  }
  @keyframes moonPulseBig {
    0%,100% { box-shadow: 0 0 70px 14px rgba(126,173,143,.40), 0 0 220px 70px rgba(126,173,143,.20); }
    50%     { box-shadow: 0 0 110px 26px rgba(200,231,202,.55), 0 0 300px 110px rgba(126,173,143,.30); }
  }
  @keyframes fogDrift { from { transform: translateX(-30%); } to { transform: translateX(0%); } }
  @keyframes fogDriftSlow { from { transform: translateX(0%); } to { transform: translateX(-30%); } }
  @keyframes emberFlicker { 0%,100% { opacity:1; } 38% { opacity:.45; } 62% { opacity:.85; } 80% { opacity:.6; } }
  @keyframes lanternFlicker {
    0%,100% { opacity:.9; filter: drop-shadow(0 0 8px rgba(214,162,81,.85)); }
    42% { opacity:1; filter: drop-shadow(0 0 18px rgba(232,178,92,1)); }
    68% { opacity:.78; filter: drop-shadow(0 0 10px rgba(214,162,81,.7)); }
  }
  .lantern { animation: lanternFlicker 2.8s ease-in-out infinite; }
  .lantern-b { animation-duration: 3.6s; animation-delay: -.9s; }
  .lantern-c { animation-duration: 2.2s; animation-delay: -1.5s; }
  .ember { animation: emberFlicker 3s ease-in-out infinite; }
  @media (max-width: 940px) { .lantern-extra { display: none !important; } }
  @media (max-width: 940px) {
    .footer-pad { padding: 56px 18px 32px !important; }
    .buy-grid { grid-template-columns: 1fr !important; }
    .buy-pad { padding: 84px 20px 70px !important; }
    .summary { position: static !important; }
    .tk-row { flex-direction: column !important; align-items: flex-start !important; }
  }

/* ------------------------------------------------------------------ hover
   O protótipo guardava o estado de foco em `style-hover`, atributo que só o
   runtime do empacotador entendia. Aqui são regras de verdade. */
.hv-1:hover { color:#D3ECD4 }
.hv-2:hover { border-color:#7EAD8F; box-shadow:0 0 34px rgba(126,173,143,.18) }
.hv-3:hover { background:#0e3a3c }
.hv-4:hover { background:#0e3a3c }

/* Blocos que aparecem conforme o carrinho. `hidden` substitui o condicional do
   runtime, e a regra abaixo garante que ele vença o `display` do elemento. */
#aviso-vazio[hidden], #resumo[hidden], #aviso-doacao[hidden] { display: none; }

/* O botão de pagar trocava de aparência por estilo calculado em JavaScript.
   Aqui é uma classe com estado `disabled`, que o navegador já sabe desenhar. */
.pagar {
  padding: 19px 28px;
  border-radius: 10px;
  border: 1px solid #7EAD8F;
  background: #C8E7CA;
  color: #061116;
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 0 26px rgba(200, 231, 202, .3);
}
.pagar[disabled] {
  border-color: rgba(76, 123, 102, .45);
  background: #0e3a3c;
  color: #4C7B66;
  cursor: not-allowed;
  box-shadow: none;
}

/* -------------------------------------------------- atalho para o conteúdo
   Primeira parada do teclado, fora da tela até receber foco. Sem ele, quem
   navega por Tab percorre o menu inteiro em toda página antes de chegar ao que
   veio ler. */
.pular-para-conteudo {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: 14px 20px;
  background: #C8E7CA;
  color: #061116;
  font-family: 'Oswald', sans-serif;
  font-size: 14px;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
}
.pular-para-conteudo:focus { left: 12px; top: 12px; }

/* ------------------------------------------------------ movimento reduzido
   Quem configurou o sistema para menos animação tem motivo — enjoo e vertigem
   são os mais comuns. A página continua inteira; só para de se mexer. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}


/* O protótipo tem conteúdo alto; o estado vazio precisa ocupar a tela também. */
.pagina-ingressos {
  display: flex;
  flex-direction: column;
}
.pagina-ingressos > main {
  flex: 1;
  width: 100%;
}

/* Adaptações funcionais da aplicação, sem alterar a composição do protótipo. */
.quantidade-botao,
.quantidade-campo {
  width: 46px;
  height: 46px;
  border: 1px solid rgba(126, 173, 143, .7);
  border-radius: 8px;
  background: rgba(6, 17, 22, .5);
  color: #D3ECD4;
  font-family: 'Oswald', sans-serif;
  font-size: 22px;
  text-align: center;
}
.quantidade-botao { cursor: pointer; }
.quantidade-campo { appearance: textfield; }
.campo-comprador {
  display: flex;
  flex-direction: column;
  gap: 7px;
  color: #7EAD8F;
  font-family: 'Oswald', sans-serif;
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.campo-comprador input {
  padding: 13px 14px;
  border: 1px solid rgba(76, 123, 102, .6);
  border-radius: 8px;
  background: #0b1518;
  color: #D3ECD4;
  font-family: 'Barlow', sans-serif;
  font-size: 16px;
  letter-spacing: normal;
  text-transform: none;
}
.resumo-linha { display: flex; justify-content: space-between; gap: 12px; }
.alerta,
.indisponivel {
  position: relative;
  z-index: 2;
  padding: 24px 28px;
  border: 1px solid rgba(126, 173, 143, .7);
  border-radius: 14px;
  background: #12191B;
  color: #C8E7CA;
}
.alerta { border-color: rgba(214, 162, 81, .8); color: #D6A251; }
.indisponivel h2 { margin-top: 0; font-family: 'Oswald', sans-serif; text-transform: uppercase; }

/* Estilos inline do protótipo, externalizados para cumprir a CSP. */
.vps-estilo-1 { position:fixed; inset:0; z-index:0; pointer-events:none; background:linear-gradient(180deg,#061116 0%,#07222b 40%,#08353F 78%,#061116 100%) }
.vps-estilo-2 { position:absolute; inset:0; overflow:hidden }
.vps-estilo-3 { position:absolute; top:8vh; right:12%; width:min(300px,34vw); aspect-ratio:1; height:auto; border-radius:50%; background:radial-gradient(circle at 38% 32%, #D3ECD4 0%, #C8E7CA 42%, #a9c9ae 68%, #7f9f88 100%); animation:moonPulseBig 6s ease-in-out infinite }
.vps-estilo-4 { position:absolute; top:8vh; right:12%; width:min(300px,34vw); aspect-ratio:1; height:auto; border-radius:50%; opacity:.5; background:radial-gradient(circle at 30% 26%, rgba(19,76,78,.55) 0 6%, transparent 7%), radial-gradient(circle at 62% 44%, rgba(19,76,78,.5) 0 9%, transparent 10%), radial-gradient(circle at 44% 70%, rgba(19,76,78,.45) 0 7%, transparent 8%) }
.vps-estilo-5 { position:absolute; bottom:0; left:0; right:0; height:210px; overflow:hidden }
.vps-estilo-6 { position:absolute; inset:0; transform:scaleX(-1) }
.vps-estilo-7 { position:absolute; inset:0; width:100%; height:100% }
.vps-estilo-8 { position:absolute; bottom:2px; left:0; right:0; display:flex; align-items:flex-end; justify-content:space-around; gap:3vw; padding:0 6vw; pointer-events:none }
.vps-estilo-9 { position:relative; flex:0 0 auto; width:34px; margin-bottom:0 }
.vps-estilo-10 { position:absolute; left:-30%; right:-30%; bottom:-14%; height:70%; border-radius:50%; background:radial-gradient(ellipse at center, rgba(214,162,81,.5), rgba(157,100,42,0) 70%) }
.vps-estilo-11 { position:relative; display:block; width:100%; height:auto }
.vps-estilo-12 { position:relative; flex:0 0 auto; width:46px; margin-bottom:0 }
.vps-estilo-13 { position:relative; flex:0 0 auto; width:28px; margin-bottom:2px }
.vps-estilo-14 { position:relative; flex:0 0 auto; width:38px; margin-bottom:1px }
.vps-estilo-15 { position:absolute; bottom:0; left:-15%; width:130%; height:80px; background:linear-gradient(180deg, rgba(126,173,143,.16), rgba(6,17,22,0)); filter:blur(16px); animation:fogDriftSlow 28s ease-in-out infinite alternate }
.vps-estilo-16 { position:relative; min-height:100vh; background:#061116; color:#D3ECD4; font-family:'Barlow',system-ui,sans-serif; font-size:17px; line-height:1.6 }
.vps-estilo-17 { position:sticky; top:0; z-index:60; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 20px; background:rgba(6,17,22,.88); backdrop-filter:blur(10px); border-bottom:1px solid rgba(76,123,102,.35) }
.vps-estilo-18 { display:flex; align-items:center; gap:12px }
.vps-estilo-19 { display:grid; place-items:center; width:38px; height:38px; border-radius:50%; background:radial-gradient(circle at 35% 30%,#D3ECD4,#7EAD8F 60%,#134C4E); animation:moonPulse 6s ease-in-out infinite }
.vps-estilo-20 { display:flex; flex-direction:column; line-height:1 }
.vps-estilo-21 { font-family:'Pirata One',cursive; font-size:24px; letter-spacing:.06em; color:#D3ECD4 }
.vps-estilo-22 { font-family:'Oswald',sans-serif; font-size:11px; letter-spacing:.28em; color:#D6A251 }
.vps-estilo-23 { font-family:'Oswald',sans-serif; font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:#7EAD8F }
.vps-estilo-24 { position:relative; z-index:2; max-width:1120px; margin:0 auto; padding:76px 32px 90px }
.vps-estilo-25 { display:flex; flex-direction:column; gap:10px; margin-bottom:44px }
.vps-estilo-26 { font-family:'Oswald',sans-serif; font-size:12px; letter-spacing:.32em; color:#D6A251; text-transform:uppercase }
.vps-estilo-27 { margin:0; font-family:'Pirata One',cursive; font-weight:400; font-size:clamp(42px,6vw,76px); line-height:1; color:#D3ECD4; letter-spacing:.02em }
.vps-estilo-28 { margin:0; max-width:600px; color:#7EAD8F }
.vps-estilo-29 { margin:0; max-width:680px; color:#C8E7CA; opacity:.8 }
.vps-estilo-30 { display:grid; grid-template-columns:1.45fr 1fr; gap:28px; align-items:start }
.vps-estilo-31 { display:flex; flex-direction:column; gap:22px }
.vps-estilo-32 { display:flex; flex-direction:column; gap:16px }
.vps-estilo-33 { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:24px 26px; border:1px solid rgba(76,123,102,.5); border-radius:14px; background:#12191B; transition:border-color .25s ease, box-shadow .25s ease }
.vps-estilo-34 { display:flex; flex-direction:column; gap:6px; min-width:0 }
.vps-estilo-35 { font-family:'Oswald',sans-serif; font-size:20px; letter-spacing:.06em; color:#D3ECD4; text-transform:uppercase }
.vps-estilo-36 { font-family:'Oswald',sans-serif; font-size:26px; font-weight:700; color:#D6A251; line-height:1.1 }
.vps-estilo-37 { font-size:15px; color:#C8E7CA; opacity:.8 }
.vps-estilo-38 { font-size:15px; color:#C8E7CA; opacity:.8; text-wrap:pretty }
.vps-estilo-39 { font-size:15px; color:#D6A251; text-wrap:pretty }
.vps-estilo-40 { display:flex; align-items:center; gap:12px; flex:0 0 auto }
.vps-estilo-41 { font-family:'Oswald',sans-serif; color:#D6A251; text-transform:uppercase }
.vps-estilo-42 { display:flex; flex-direction:column; gap:18px; padding:28px; border:1px solid rgba(76,123,102,.5); border-radius:14px; background:#12191B }
.vps-estilo-43 { margin:0; font-family:'Oswald',sans-serif; font-size:18px; letter-spacing:.14em; text-transform:uppercase; color:#D3ECD4 }
.vps-estilo-44 { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px }
.vps-estilo-45 { position:sticky; top:96px; display:flex; flex-direction:column; gap:18px; padding:28px; border:1px solid #7EAD8F; border-radius:14px; background:#134C4E; box-shadow:0 0 46px rgba(126,173,143,.2) }
.vps-estilo-46 { margin:0; font-size:15.5px; color:#C8E7CA; opacity:.8 }
.vps-estilo-47 { display:flex; flex-direction:column; gap:16px; font-size:15.5px; color:#C8E7CA }
.vps-estilo-48 { height:1px; background:linear-gradient(90deg, rgba(126,173,143,.55), rgba(126,173,143,0)) }
.vps-estilo-49 { display:flex; align-items:baseline; justify-content:space-between; gap:12px }
.vps-estilo-50 { font-family:'Oswald',sans-serif; font-size:13px; letter-spacing:.2em; color:#C8E7CA; text-transform:uppercase }
.vps-estilo-51 { font-family:'Oswald',sans-serif; font-size:36px; color:#D3ECD4; line-height:1 }
.vps-estilo-52 { margin:0; font-size:13.5px; color:#C8E7CA; opacity:.75 }
.vps-estilo-53 { position:relative; z-index:2; padding:70px 32px 40px; background:#061116; border-top:1px solid rgba(76,123,102,.3); overflow:hidden }
.vps-estilo-54 { position:absolute; top:0; left:-15%; width:130%; height:80px; background:linear-gradient(180deg, rgba(126,173,143,.12), rgba(6,17,22,0)); filter:blur(18px); animation:fogDrift 30s ease-in-out infinite alternate; pointer-events:none }
.vps-estilo-55 { position:relative; max-width:1180px; margin:0 auto; display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:32px }
.vps-estilo-56 { display:flex; flex-direction:column; gap:10px }
.vps-estilo-57 { font-family:'Pirata One',cursive; font-size:38px; color:#D3ECD4; line-height:1 }
.vps-estilo-58 { font-family:'Oswald',sans-serif; font-size:12px; letter-spacing:.24em; color:#D6A251; text-transform:uppercase }
.vps-estilo-59 { display:flex; flex-direction:column; gap:8px; font-size:14px; color:#4C7B66 }
.vps-estilo-60 { color:#7EAD8F }