:root {
  --creme: #FBF6F0;
  --branco: #FFFFFF;
  --ember: #E8511A;
  --chama-a: #e86a17;
  --chama-b: #e83517;
  --carvao: #1A1512;
  --dark: #0C0C0C;
  --font-title: "Fredoka", sans-serif;
  --font-body: "Nunito", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { overflow-x: clip; }
body { font-family: var(--font-body); color: #fff; background: var(--dark); }
img { max-width: 100%; display: block; }
h1, h2 { font-family: var(--font-title); line-height: 1.05; font-weight: 600; }
a { color: inherit; }

.section { min-height: 100vh; position: relative; z-index: 1; }

/* ---------- fundo: sequência de frames em canvas (fixo, cobre a página) ---------- */
.bg-poster {
  position: fixed; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: -3;
}
.bg-canvas {
  position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: -2; background: transparent;
}
/* hero e CTA: texto branco sobre trechos escuros do vídeo → halo p/ legibilidade */

/* ---------- hero ---------- */
.hero { display: flex; align-items: center; }
.hero-inner {
  width: min(1160px, 92vw); margin: 0 auto;
}
.hero-copy { max-width: 42rem; }
.hero-logo { width: min(180px, 40%); }
.hero h1 { font-size: clamp(2.4rem, 5vw, 4.2rem); line-height: 1; margin: 1.4rem 0 0.9rem; }
.hero-sub { font-size: clamp(1.2rem, 1.5vw, 1.35rem); font-weight: 600; max-width: 34ch; margin-bottom: 1.8rem; }
.store-badges { display: flex; gap: 0.8rem; align-items: center; flex-wrap: wrap; }
.store-badges img { height: 64px; width: auto; }
.store-badges--big img { height: 80px; }

/* ---------- institucional ---------- */
.inst { display: flex; align-items: center; }
.inst-inner {
  width: min(1160px, 92vw); margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: center;
}
/* frases na lateral direita, texto escuro (como antes) — o vídeo é claro aqui */
.frases { position: relative; min-height: 15rem; grid-column: 2; }
.frase h2 { font-size: clamp(2.2rem, 4.5vw, 3.8rem); margin-bottom: 0.7rem; color: var(--carvao); }
.frase p { font-size: clamp(1.2rem, 1.8vw, 1.5rem); max-width: 36ch; color: #5b5148; }
/* com JS: frases viram overlays que trocam no pin; sem JS: empilhadas */
body.js .frase {
  position: absolute; left: 0; right: 0; top: 50%; translate: 0 -50%;
  opacity: 0; visibility: hidden;
}
body:not(.js) .frase { margin-bottom: 2.5rem; }

/* ---------- CTA final ---------- */
.cta { display: flex; flex-direction: column; min-height: calc(100vh - 55px); }
/* copy na coluna esquerda (direita fica livre pro vídeo) */
.cta-inner {
  flex: 1; width: min(1160px, 92vw); margin: 0 auto;
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 2rem; align-items: center;
  padding: 4rem 0 2rem;
}
.cta-headline { font-size: clamp(3rem, 7vw, 6rem); }
.cta-sub { font-size: clamp(1.35rem, 1.9vw, 1.6rem); font-weight: 700; margin: 1rem 0 2rem; max-width: 34ch; }
.footer {
  display: flex; align-items: center; justify-content: center; gap: 1.5rem;
  padding: 1.2rem 0; background: #000; position: relative; z-index: 1;
}
.footer span, .footer-link { font-size: 0.85rem; font-weight: 600; opacity: 0.85; }
.footer-link { text-decoration: underline; color: inherit; transition: opacity 0.2s; }
.footer-link:hover { opacity: 1; }

/* ---------- mobile ---------- */
@media (max-width: 767px) {
  /* Numa tela estreita o celular do vídeo ocuparia quase toda a largura em
     'cover' e o texto cairia por cima dele. O canvas então desenha o frame
     numa faixa no topo e preenche o resto com a cor de fundo do próprio
     frame (BAND em main.js) — aqui o conteúdo desce pra essa área.
     --faixa precisa acompanhar o BAND do main.js. */
  :root { --faixa: 52vh; }

  .hero-inner { text-align: center; padding: calc(var(--faixa) + 2rem) 0 3rem; }
  .hero-copy { margin: 0 auto; }
  .hero-sub { margin-inline: auto; }
  .store-badges { justify-content: center; }
  .inst-inner { grid-template-columns: 1fr; text-align: center; padding-top: calc(var(--faixa) + 2rem); }
  .frases { grid-column: 1; min-height: 12rem; }
  .frase p { margin-inline: auto; }
  /* O padding-bottom afasta o rodapé da copy: sem ele os dois ficam colados e
     o fundo começa a apagar (gatilho do rodapé) antes de o CTA aparecer.
     Com ~14vh o CTA fica legível sobre a faixa até encostar nela, e só então
     o rodapé entra e engole o fundo. */
  .cta-inner { grid-template-columns: 1fr; justify-items: center; text-align: center;
               padding-top: calc(var(--faixa) + 2rem); padding-bottom: calc(2rem + 14vh); }
  .cta-sub { margin-inline: auto; }
  .cta-inner .store-badges { justify-content: center; }

  /* sem JS / reduced-motion não há faixa: ancora o poster no celular
     (hero, ~74% da largura) pra ele não sair no recorte 'cover' */
  .bg-poster { object-position: 74% 50%; }
}

/* ---------- footer ---------- */
.footer-v2 {
  position: relative; z-index: 1;
  overflow: hidden;
  background: var(--dark);
}

.footer-bg {
  position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(125% 125% at 50% 10%, #0C0C0C 50%, #1a100a 100%);
}

.footer-content {
  position: relative; z-index: 2;
  max-width: 1160px; margin: 0 auto;
  padding: 3.5rem 2rem 1.5rem;
}

.footer-grid {
  display: grid; grid-template-columns: 1.2fr 1fr 1fr;
  gap: 3rem; padding-bottom: 2rem;
}

.footer-brand img { height: 34px; width: auto; margin-bottom: .75rem; }
.footer-brand p   { font-size: .9rem; color: rgba(255,255,255,.5); font-weight: 600; }

.footer-legal h4,
.footer-contact h4 {
  font-family: var(--font-title); font-size: 1.05rem;
  color: #fff; margin-bottom: 1rem;
}

.footer-legal ul,
.footer-contact ul  { list-style: none; }

.footer-legal li + li,
.footer-contact li + li { margin-top: .6rem; }

.footer-legal a,
.footer-contact a {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .9rem; color: rgba(255,255,255,.55);
  text-decoration: none; font-weight: 600; transition: color .2s;
}

.footer-legal a:hover,
.footer-contact a:hover { color: var(--ember); }

.footer-contact svg { flex-shrink: 0; color: var(--ember); }
.footer-divider { border: none; border-top: 1px solid rgba(255,255,255,.1); margin: 0 0 1.5rem; }
.footer-bottom { font-size: .8rem; color: rgba(255,255,255,.35); font-weight: 600; }

/* SVG big text */
.footer-text-hero { position: relative; z-index: 2; height: 120px; }
#footer-svg { width: 100%; height: 100%; cursor: default; user-select: none; }

.ft-outline {
  fill: transparent; stroke: rgba(255,255,255,.15); stroke-width: 0.3;
  font-family: helvetica, sans-serif; font-size: 72px; font-weight: bold;
  opacity: 0; transition: opacity .3s;
}
#footer-svg:hover .ft-outline { opacity: 1; }

.ft-stroke {
  fill: transparent; stroke: var(--ember); stroke-width: 0.3;
  font-family: helvetica, sans-serif; font-size: 72px; font-weight: bold;
  stroke-dasharray: 1500; stroke-dashoffset: 1500;
  animation: ft-draw 4s ease-in-out forwards;
}
@keyframes ft-draw { to { stroke-dashoffset: 0; } }

.ft-fill {
  fill: transparent; stroke: transparent; stroke-width: 0.3;
  font-family: helvetica, sans-serif; font-size: 72px; font-weight: bold;
  transition: stroke .2s;
}
#footer-svg.is-hovered .ft-fill { stroke: url(#ftGradient); }

@media (max-width: 767px) {
  .footer-grid  { grid-template-columns: 1fr; gap: 1.5rem; }
  .footer-text-hero { display: none; }
  .footer-content { padding: 2rem 1.5rem 1.5rem; }
}

/* ── @property — shiny button ── */
@property --gradient-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
@property --gradient-angle-offset {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
@property --gradient-percent {
  syntax: "<percentage>";
  initial-value: 5%;
  inherits: false;
}
@property --gradient-shine {
  syntax: "<color>";
  initial-value: white;
  inherits: false;
}

/* ── Botão download (shiny) ── */
.btn-download {
  --shiny-bg:               #1a1512;
  --shiny-bg-subtle:        #2d1f16;
  --shiny-fg:               #ffffff;
  --shiny-highlight:        #E8511A;
  --shiny-highlight-subtle: #f0904a;
  --shiny-duration:         3s;
  --shiny-shadow-size:      2px;
  --shiny-transition:       800ms cubic-bezier(0.25, 1, 0.5, 1);

  isolation: isolate;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  outline-offset: 4px;
  padding: 1.1rem 2.25rem;
  font-family: var(--font-title);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.2;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: 360px;
  color: var(--shiny-fg);
  background:
    linear-gradient(var(--shiny-bg), var(--shiny-bg)) padding-box,
    conic-gradient(
      from calc(var(--gradient-angle) - var(--gradient-angle-offset)),
      transparent,
      var(--shiny-highlight)      var(--gradient-percent),
      var(--gradient-shine)       calc(var(--gradient-percent) * 2),
      var(--shiny-highlight)      calc(var(--gradient-percent) * 3),
      transparent                 calc(var(--gradient-percent) * 4)
    ) border-box;
  box-shadow: inset 0 0 0 1px var(--shiny-bg-subtle);
  transition: var(--shiny-transition);
  transition-property: --gradient-angle-offset, --gradient-percent, --gradient-shine;
  animation:
    gradient-angle linear infinite var(--shiny-duration),
    gradient-angle linear infinite calc(var(--shiny-duration) / 0.4) reverse paused;
  animation-composition: add;
}

.btn-download::before,
.btn-download::after,
.btn-download span::before {
  content: "";
  pointer-events: none;
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: 50%;
  translate: -50% -50%;
  z-index: -1;
}

.btn-download:active { translate: 0 1px; }

/* Padrão de pontos */
.btn-download::before {
  --size:     calc(100% - var(--shiny-shadow-size) * 3);
  --position: 2px;
  --space:    calc(var(--position) * 2);
  width: var(--size);
  height: var(--size);
  background: radial-gradient(
    circle at var(--position) var(--position),
    white calc(var(--position) / 4),
    transparent 0
  ) padding-box;
  background-size: var(--space) var(--space);
  background-repeat: space;
  mask-image: conic-gradient(
    from calc(var(--gradient-angle) + 45deg),
    black, transparent 10% 90%, black
  );
  border-radius: inherit;
  opacity: 0.12;
  animation:
    gradient-angle linear infinite var(--shiny-duration),
    gradient-angle linear infinite calc(var(--shiny-duration) / 0.4) reverse paused;
  animation-composition: add;
}

/* Shimmer interno */
.btn-download::after {
  width: 100%;
  aspect-ratio: 1;
  background: linear-gradient(-50deg, transparent, var(--shiny-highlight), transparent);
  mask-image: radial-gradient(circle at bottom, transparent 40%, black);
  opacity: 0.12;
  animation:
    shimmer linear infinite var(--shiny-duration),
    shimmer linear infinite calc(var(--shiny-duration) / 0.4) reverse paused;
  animation-composition: add;
}

.btn-download span { position: relative; z-index: 1; }

/* Glow que respira */
.btn-download span::before {
  --size: calc(100% + 1rem);
  width: var(--size);
  height: var(--size);
  box-shadow: inset 0 -1ex 1.25rem 1px var(--shiny-highlight);
  opacity: 0;
  transition: opacity var(--shiny-transition);
  animation: breathe linear infinite calc(var(--shiny-duration) * 1.5);
}

/* Estado hover / focus */
.btn-download:is(:hover, :focus-visible) {
  --gradient-percent:       11%;
  --gradient-angle-offset:  45deg;
  --gradient-shine:         var(--shiny-highlight-subtle);
}
.btn-download:is(:hover, :focus-visible),
.btn-download:is(:hover, :focus-visible)::before,
.btn-download:is(:hover, :focus-visible)::after {
  animation-play-state: running;
}
.btn-download:is(:hover, :focus-visible) span::before { opacity: 0; }

.btn-download--big { font-size: 1.5rem; padding: 1.35rem 2.75rem; }

@keyframes gradient-angle { to { --gradient-angle: 360deg; } }
@keyframes shimmer        { to { rotate: 360deg; } }
@keyframes breathe {
  from, to { scale: 1; }
  50%       { scale: 1.2; }
}

/* ── Modal overlay ── */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(12, 12, 12, 0.82);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.modal-overlay.aberto {
  opacity: 1;
  pointer-events: all;
}
.modal-card {
  position: relative;
  background: #1c1714;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 2.25rem 2rem 2rem;
  width: 100%;
  max-width: 420px;
  transform: scale(0.92) translateY(20px);
  transition: transform 0.35s cubic-bezier(0.34, 1.4, 0.64, 1);
}
.modal-overlay.aberto .modal-card {
  transform: scale(1) translateY(0);
}
.modal-fechar {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: rgba(255, 255, 255, 0.07);
  border: none;
  color: rgba(255, 255, 255, 0.55);
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, color 0.2s;
}
.modal-fechar:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

/* ── Modal conteúdo ── */
.modal-titulo {
  font-family: var(--font-title);
  font-size: 1.75rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 0.25rem;
}
.modal-sub {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.45);
  font-weight: 600;
  margin-bottom: 1.75rem;
}

/* ── Barra de progresso ── */
.beta-vagas { margin-bottom: 1.75rem; }
.beta-nums {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  margin-bottom: 0.6rem;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 600;
}
.beta-nums strong {
  font-family: var(--font-title);
  font-size: 2rem;
  color: #fff;
  line-height: 1;
}
.beta-barra {
  height: 5px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 100px;
  overflow: hidden;
}
.beta-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--chama-a), var(--ember));
  border-radius: 100px;
  transition: width 0.9s cubic-bezier(0.34, 1.2, 0.64, 1);
}

/* ── Badges no modal ── */
.modal-badges {
  display: flex;
  flex-direction: row;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.modal-badges a { display: block; transition: transform 0.2s, opacity 0.2s; flex-shrink: 0; }
.modal-badges a:hover { transform: scale(1.03); }
.modal-badges img { height: 48px; width: auto; }

/* ── Estado esgotado ── */
.modal-esgotado-msg {
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.65;
  margin-bottom: 1.5rem;
}
.modal-badges--off {
  opacity: 0.2;
  filter: grayscale(1);
  pointer-events: none;
  user-select: none;
}
.modal-badges--off img { height: 48px; width: auto; }

/* ── Spinner de loading ── */
.modal-spinner {
  width: 2.25rem;
  height: 2.25rem;
  border: 3px solid rgba(255, 255, 255, 0.08);
  border-top-color: var(--ember);
  border-radius: 50%;
  animation: modal-spin 0.75s linear infinite;
  margin: 3rem auto;
}
@keyframes modal-spin { to { transform: rotate(360deg); } }

@media (max-width: 480px) {
  .modal-card { padding: 2rem 1.25rem 1.5rem; }
  .modal-titulo { font-size: 1.5rem; }
}

/* ── Beta: toggle de sessões (interesse / verificar) ── */
.beta-tabs { margin-top: 0.25rem; }

.beta-tablist {
  position: relative;
  display: flex;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 100px;
  padding: 4px;
  margin-bottom: 1.25rem;
}
.beta-tab-indicator {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc(50% - 4px);
  border-radius: 100px;
  background: linear-gradient(90deg, var(--chama-a), var(--ember));
  box-shadow: 0 2px 10px rgba(232, 81, 26, 0.35);
  transition: transform 0.4s cubic-bezier(0.34, 1.3, 0.64, 1);
}
.beta-tablist[data-ativo="verificar"] .beta-tab-indicator { transform: translateX(100%); }
.beta-tab {
  position: relative;
  z-index: 1;
  flex: 1;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0.6rem 0.5rem;
  font-family: var(--font-title);
  font-size: 0.9rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.55);
  transition: color 0.3s;
}
.beta-tab.is-active { color: #fff; }

.beta-panels {
  position: relative;
  overflow: hidden;
  transition: height 0.4s cubic-bezier(0.34, 1.2, 0.64, 1);
}
.beta-panel {
  position: absolute;
  inset: 0 0 auto 0;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px) scale(0.985);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.beta-panel.is-active { opacity: 1; visibility: visible; transform: none; }

.beta-form { display: flex; flex-direction: column; gap: 0.7rem; }
.beta-input {
  width: 100%;
  height: 3rem;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  padding: 0 1rem;
  outline: none;
  transition: border-color 0.2s, background 0.2s;
}
.beta-input::placeholder { color: rgba(255, 255, 255, 0.35); font-weight: 600; }
.beta-input:focus { border-color: var(--ember); background: rgba(255, 255, 255, 0.08); }

.beta-select-wrap { position: relative; }
.beta-select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.5rem;
  cursor: pointer;
}
.beta-select:invalid { color: rgba(255, 255, 255, 0.35); }
.beta-select option { color: #1a1512; }
.beta-select-caret {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: rgba(255, 255, 255, 0.45);
}

.beta-turnstile { min-height: 65px; display: flex; justify-content: center; }

.beta-btn {
  height: 3rem;
  border: none;
  border-radius: 14px;
  cursor: pointer;
  font-family: var(--font-title);
  font-size: 1.05rem;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(90deg, var(--chama-a), var(--ember));
  transition: transform 0.15s, filter 0.2s, opacity 0.2s;
}
.beta-btn:hover { filter: brightness(1.08); }
.beta-btn:active { transform: translateY(1px) scale(0.99); }
.beta-btn:disabled { opacity: 0.55; cursor: default; filter: none; }

.beta-feedback {
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 0.15rem;
}
.beta-feedback:empty { display: none; }
.beta-feedback.is-erro { color: #ff8a6b; }
.beta-feedback.is-ok { color: #7ddba0; }

.beta-panel-hint {
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.45);
  line-height: 1.5;
  margin-bottom: 0.9rem;
}

.beta-download { margin-top: 1.1rem; }
.beta-lock-msg {
  display: block;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 0.6rem;
  letter-spacing: 0.02em;
  transition: color 0.3s;
}
.beta-download .modal-badges { justify-content: center; }
.beta-download.is-liberado .beta-lock-msg { color: #7ddba0; }
.modal-badges a.is-bloqueado {
  opacity: 0.2;
  filter: grayscale(1);
  pointer-events: none;
}