/* =============================================================
   Copa Brochevique — verde e amarelo com a estrela vermelha.
   Esqueleto do design system da marca (square, stamp shadow,
   Big Shoulders + Inter, sem gradiente, sem branco/preto puros).
   ============================================================= */
:root {
  --verde-500: #009739;   /* verde bandeira */
  --verde-700: #00702B;
  --verde-900: #0B3D1C;
  --amarelo-500: #FEDD00; /* amarelo bandeira */
  --amarelo-600: #E8C900;
  --vermelho-500: #9C2A22; /* vermelho Brochevique — a estrela */
  --vermelho-700: #6E1812;
  --cream-50: #F3EAD7;
  --cream-100: #EAE0C8;
  --ink-900: #1B1410;
  --ink-700: #3B2F26;
  --ink-500: #7A6A5C;

  --font-display: 'Big Shoulders Display', 'Arial Black', sans-serif;
  --font-sans: 'Inter', system-ui, sans-serif;

  --shadow-stamp: 4px 4px 0 var(--ink-900);
  --shadow-stamp-lg: 6px 6px 0 var(--ink-900);
  --shadow-pressed: 1px 1px 0 var(--ink-900);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }

body {
  background-color: var(--verde-500);
  background-image:
    radial-gradient(circle at 20% 30%, rgba(27,20,16,0.05) 0 1px, transparent 2px),
    radial-gradient(circle at 70% 70%, rgba(27,20,16,0.04) 0 1px, transparent 2px);
  background-size: 7px 7px, 11px 11px;
  color: var(--ink-900);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* ---------------- HERO ---------------- */
.hero {
  background: var(--verde-700);
  border-bottom: 6px solid var(--amarelo-500);
  padding: 48px 16px 56px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.hero-inner { max-width: 880px; margin: 0 auto; position: relative; }
.hero-pill {
  display: inline-block;
  background: var(--vermelho-500);
  color: var(--cream-50);
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: .12em;
  font-size: 14px;
  padding: 6px 18px;
  border: 2px solid var(--ink-900);
  box-shadow: var(--shadow-stamp);
  margin-bottom: 24px;
  transform: rotate(-1.5deg);
}
.hero-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(56px, 11vw, 128px);
  line-height: .95;
  letter-spacing: .02em;
  color: var(--amarelo-500);
  text-shadow: 5px 5px 0 var(--ink-900);
  text-transform: uppercase;
}
.hero-sub {
  margin-top: 20px;
  color: var(--cream-50);
  font-size: clamp(16px, 2.2vw, 20px);
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}
.hero-sub strong { color: var(--amarelo-500); }
.hero-star {
  width: 72px; height: 72px;
  margin-top: 28px;
  fill: var(--vermelho-500);
  stroke: var(--cream-50);
  stroke-width: 3;
  filter: drop-shadow(4px 4px 0 var(--ink-900));
  animation: girar 14s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

.faixa-demo {
  background: var(--amarelo-500);
  color: var(--ink-900);
  text-align: center;
  font-weight: 600;
  font-size: 14px;
  padding: 8px 16px;
  border-bottom: 3px solid var(--ink-900);
}

/* ---------------- LAYOUT ---------------- */
.container { max-width: 760px; margin: 0 auto; padding: 40px 16px 64px; }

.passos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 40px;
}
@media (max-width: 640px) { .passos { grid-template-columns: 1fr; } }
.passo {
  background: var(--cream-50);
  border: 3px solid var(--ink-900);
  box-shadow: var(--shadow-stamp);
  padding: 20px;
}
.passo-num {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 40px; height: 40px;
  background: var(--vermelho-500);
  color: var(--cream-50);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 22px;
  border: 2px solid var(--ink-900);
  border-radius: 9999px;
  margin-bottom: 12px;
}
.passo h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 20px;
  letter-spacing: .03em;
  margin-bottom: 6px;
}
.passo p { font-size: 14px; color: var(--ink-700); }

/* ---------------- CARDS ---------------- */
.card {
  background: var(--cream-50);
  border: 3px solid var(--ink-900);
  box-shadow: var(--shadow-stamp-lg);
  padding: 32px 24px;
  margin-bottom: 40px;
}
.card h2 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(28px, 5vw, 40px);
  letter-spacing: .03em;
  color: var(--vermelho-500);
  text-align: center;
  margin-bottom: 24px;
  text-transform: uppercase;
}

/* form */
.campo { display: block; margin-bottom: 20px; }
.campo-label {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 16px;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.campo input[type="email"] {
  width: 100%;
  padding: 14px;
  font: inherit;
  background: #FFFDF7;
  border: 2px solid var(--ink-900);
  border-radius: 0;
}
.campo input[type="email"]:focus {
  outline: none;
  box-shadow: var(--shadow-stamp);
}
.campo-dica { display: block; font-size: 13px; color: var(--ink-500); margin-top: 6px; }

.campo-foto input[type="file"] { display: none; }
.foto-drop {
  border: 3px dashed var(--verde-500);
  background: var(--cream-100);
  min-height: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  padding: 16px;
  transition: background .15s;
}
.foto-drop:hover { background: #E5DABE; }
.foto-drop.tem-foto { border-style: solid; }
#foto-texto { color: var(--ink-700); font-weight: 500; }
#foto-texto small { color: var(--ink-500); }
#foto-preview {
  max-width: 160px; max-height: 160px;
  border: 3px solid var(--ink-900);
  border-radius: 9999px;
  object-fit: cover;
  width: 160px; height: 160px;
  margin-bottom: 8px;
}

/* botões "enviar foto" / "tirar foto" */
.foto-botoes { display: flex; gap: 10px; margin-bottom: 12px; }
.btn-foto {
  flex: 1;
  padding: 12px;
  background: var(--cream-100);
  border: 2px solid var(--ink-900);
  font: inherit; font-weight: 700;
  cursor: pointer;
  box-shadow: 2px 2px 0 var(--ink-900);
}
.btn-foto:hover { background: #E5DABE; }
.btn-foto:active { transform: translate(2px, 2px); box-shadow: none; }

/* câmera ao vivo */
.camera-box {
  border: 3px solid var(--ink-900);
  background: var(--ink-900);
  padding: 8px;
  text-align: center;
}
#camera-video {
  width: 100%; max-width: 320px;
  border-radius: 6px;
  transform: scaleX(-1);   /* espelha a prévia (sensação de selfie) */
  display: block; margin: 0 auto 8px;
}
.camera-acoes { display: flex; gap: 8px; justify-content: center; align-items: center; }
.camera-acoes .btn-stamp { width: auto; padding: 10px 18px; font-size: 16px; }
.camera-acoes .btn-ghost { width: auto; margin-top: 0; padding: 10px 14px; }

/* card de limite atingido + WhatsApp */
.card-limite { text-align: center; }
.limite-msg { font-size: 18px; font-weight: 600; margin-bottom: 8px; }
.btn-whats { background: #25D366; color: var(--ink-900); }
.btn-whats:hover { background: #1FB855; }

/* botões */
.btn-stamp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 16px 24px;
  background: var(--vermelho-500);
  color: var(--cream-50);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 20px;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-decoration: none;
  border: 3px solid var(--ink-900);
  border-radius: 0;
  box-shadow: var(--shadow-stamp);
  cursor: pointer;
  transition: transform .12s, box-shadow .12s;
}
.btn-stamp:hover { transform: translate(-1px,-1px) rotate(-.5deg); box-shadow: var(--shadow-stamp-lg); }
.btn-stamp:active { transform: translate(3px,3px); box-shadow: var(--shadow-pressed); }
.btn-stamp:disabled { opacity: .55; cursor: wait; transform: none; }

.btn-ghost {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 12px;
  background: transparent;
  color: var(--ink-700);
  font: inherit;
  font-weight: 600;
  border: 2px solid var(--ink-700);
  cursor: pointer;
}
.btn-ghost:hover { background: var(--cream-100); }

.nota-privacidade { font-size: 13px; color: var(--ink-500); text-align: center; margin-top: 16px; }

/* loading */
.card-loading { text-align: center; padding: 56px 24px; }
.bola-loading {
  width: 72px; height: 72px;
  margin: 0 auto 24px;
  border-radius: 9999px;
  border: 6px solid var(--ink-900);
  border-top-color: var(--vermelho-500);
  border-right-color: var(--amarelo-500);
  border-bottom-color: var(--verde-500);
  animation: rodar 1s linear infinite;
}
@keyframes rodar { to { transform: rotate(360deg); } }
.loading-msg { font-weight: 600; font-size: 18px; color: var(--ink-700); }

/* resultado */
.mockup-wrap {
  background: var(--cream-100);
  border: 2px solid var(--ink-900);
  padding: 16px;
  margin-bottom: 24px;
  display: flex;
  justify-content: center;
}
#mockup-img { width: 100%; max-width: 440px; height: auto; display: block; }
.acoes { display: flex; flex-direction: column; }

/* aprovado */
.card-aprovado { text-align: center; }
.mini-star {
  width: 56px; height: 56px;
  fill: var(--vermelho-500);
  stroke: var(--ink-900);
  stroke-width: 3;
  margin-bottom: 8px;
}
.codigo-label { font-size: 14px; color: var(--ink-500); margin-bottom: 6px; }
.codigo {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(36px, 8vw, 56px);
  letter-spacing: .08em;
  color: var(--verde-700);
  background: var(--cream-100);
  border: 3px dashed var(--verde-500);
  display: inline-block;
  padding: 8px 28px;
  margin-bottom: 20px;
}
.aviso-email { margin-bottom: 20px; color: var(--ink-700); }

/* seletor de fixação + tamanho */
.opcoes { margin: 0 auto 18px; max-width: 380px; text-align: left; }
.opt-grupo { margin-bottom: 12px; }
.opt-label { display: block; font-family: var(--font-display); font-weight: 800; font-size: 14px; letter-spacing: .05em; text-transform: uppercase; margin-bottom: 6px; }
.opt-botoes { display: flex; flex-wrap: wrap; gap: 6px; }
.opt-btn { padding: 8px 12px; background: var(--cream-100); border: 2px solid var(--ink-900); font: inherit; font-weight: 600; font-size: 14px; cursor: pointer; }
.opt-btn:hover { background: #E5DABE; }
.opt-btn.on { background: var(--vermelho-500); color: var(--cream-50); }
.opt-preco { font-family: var(--font-display); font-weight: 900; font-size: 28px; color: var(--verde-700); text-align: center; margin-top: 8px; }
.btn-carrinho { background: var(--verde-500); }
.btn-carrinho:hover { background: var(--verde-700); }
.aviso-loja { margin-top: 14px; font-size: 14px; color: var(--vermelho-500); font-weight: 600; }

/* FAQ */
.faq h2 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 28px;
  color: var(--cream-50);
  text-shadow: 3px 3px 0 var(--ink-900);
  letter-spacing: .04em;
  margin-bottom: 16px;
  text-transform: uppercase;
}
.faq details {
  background: var(--cream-50);
  border: 2px solid var(--ink-900);
  margin-bottom: 8px;
}
.faq summary {
  cursor: pointer;
  padding: 14px 16px;
  font-weight: 700;
  font-family: var(--font-display);
  font-size: 17px;
  letter-spacing: .03em;
}
.faq details p { padding: 0 16px 14px; color: var(--ink-700); font-size: 15px; }

/* rodapé */
.rodape {
  background: var(--ink-900);
  color: var(--cream-50);
  text-align: center;
  padding: 28px 16px;
  border-top: 6px solid var(--amarelo-500);
}
.rodape a { color: var(--amarelo-500); }
.rodape-mini { font-size: 12px; color: var(--ink-500); margin-top: 6px; }