/* =========================================================================
   Pesquisa com recompensa na IDV da Black Friday: Sistema Argila.
   Estrutura e componentes comuns às duas versões. Cada versão (v1.css, v2.css)
   define as variáveis de tema e a decoração da lateral.
   Referência: black-friday-2026/identidade-visual/SISTEMA-B-ARGILA.md
   ========================================================================= */

@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(assets/fraunces-var-normal.woff2) format("woff2"); }
@font-face { font-family: "Fraunces"; font-style: italic; font-weight: 100 900; font-display: swap; src: url(assets/fraunces-var-italic.woff2) format("woff2"); }
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(assets/outfit-var.woff2) format("woff2"); }

:root {
  /* paleta oficial */
  --linho: #F4EFE6;
  --argila: #C96442;
  --argila-clara: #E8C4AE;
  --salvia: #617C5F;
  --cacau: #2E2320;
  --creme: #FFF5DC;
  --argila-escura: #A9502F;   /* 4,7:1 sobre Linho: é a Argila para texto pequeno */

  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;

  --t-titulo: clamp(2.1rem, 1.5rem + 2.6vw, 3.3rem);
  --t-pergunta: clamp(1.65rem, 1.3rem + 1.4vw, 2.25rem);
  --t-corpo: 1.0625rem;
  --e1: .5rem; --e2: .9rem; --e3: 1.4rem; --e4: 2.2rem;
  --curva: cubic-bezier(.2, .8, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  margin: 0; min-height: 100vh; overflow-x: clip;
  font: 400 var(--t-corpo)/1.55 var(--sans);
  font-variant-numeric: lining-nums;
  background: var(--bg); color: var(--fg);
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
button, input, textarea { font: inherit; color: inherit; }

/* ---------- moldura ---------- */
.pagina {
  position: relative; z-index: 1; max-width: 1120px; margin: 0 auto;
  padding: 20px 16px 8px; display: grid; gap: var(--e3);
}
@media (min-width: 900px) {
  .pagina { grid-template-columns: minmax(300px, 4fr) 7fr; gap: clamp(36px, 5vw, 72px); padding: 44px 32px 8px; align-items: start; }
  .lateral { position: sticky; top: 32px; }
}

.mote { margin: 0; font: italic 500 1.1rem/1.35 var(--serif); color: var(--fg-suave); }
.assina { margin: 0; }
.assina b { display: block; font: 600 1.35rem/1.1 var(--serif); letter-spacing: -.01em; }
.assina span { display: block; margin-top: 4px; font: 500 .74rem/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-suave); }

/* ---------- folha: onde a pergunta mora ---------- */
.folha { position: relative; isolation: isolate; }
.folha__topo { display: flex; align-items: center; gap: var(--e2); margin-bottom: var(--e3); }
.tab { font: 500 .78rem/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-suave); white-space: nowrap; min-width: 8.4em; }
.progresso { flex: 1; height: 6px; border-radius: 6px; background: var(--trilho); position: relative; }
.progresso i { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 6px; background: var(--argila); transition: width .5s var(--curva); }
.progresso i::after {
  content: ""; position: absolute; right: -7px; top: -6px; width: 15px; height: 15px; border-radius: 0 70% 0 70%;
  background: var(--salvia); transform: rotate(-45deg);
}

.palco > * { animation: entra .45s var(--curva) both; }
@keyframes entra { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) { .palco > *, .progresso i { animation: none; transition: none; } }

.kicker { margin: 0 0 var(--e1); font: 500 .8rem/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--kicker); }
.kicker__opcional { color: var(--fg-suave); }
.titulo { margin: 0 0 var(--e2); font: 600 var(--t-titulo)/1.04 var(--serif); letter-spacing: -.02em; text-wrap: balance; }
.titulo i { font-style: italic; color: var(--argila); }
.pergunta { margin: 0 0 var(--e1); font: 600 var(--t-pergunta)/1.14 var(--serif); letter-spacing: -.015em; text-wrap: balance; outline: none; }
.apoio { margin: 0 0 var(--e3); color: var(--fg-suave); font-size: 1rem; max-width: 52ch; }
.texto { margin: 0 0 var(--e3); max-width: 54ch; }

/* ---------- capa ---------- */
.capa { display: grid; gap: var(--e4); align-items: center; }
.lista-promessa { list-style: none; padding: 0; margin: 0 0 var(--e3); display: grid; gap: .5rem; }
.lista-promessa li { padding-left: 1.5rem; position: relative; }
.lista-promessa li::before { content: ""; position: absolute; left: 0; top: .5em; width: .72rem; height: .72rem; border-radius: 0 70% 0 70%; background: var(--salvia); transform: rotate(-45deg); }

.cofre { position: relative; margin: 14px auto 0; width: min(66%, 250px); }
.cartela {
  background: var(--cartela); color: var(--cacau); border-radius: 6px; padding: 26px 18px 22px;
  transform: rotate(-2.5deg); box-shadow: 0 14px 26px -12px rgba(46,35,32,.5), 0 2px 5px rgba(46,35,32,.12);
}
.cartela__t { margin: 0 0 12px; font: 600 1.2rem/1.1 var(--serif); letter-spacing: -.01em; }
.cartela__lista { display: grid; gap: 11px; filter: blur(3.4px); opacity: .9; }
.linha { display: grid; grid-template-columns: 1.5fr 1fr; gap: 10px; height: 13px; }
.linha i { border-radius: 4px; background: rgba(46,35,32,.4); }
.linha i + i { background: rgba(201,100,66,.7); }
.cofre__selo {
  position: absolute; top: -8px; left: 50%; transform: translateX(-50%) rotate(-3deg); white-space: nowrap; z-index: 2;
  padding: .82rem 1.7rem .72rem; background: url(assets/selo-cacau.webp) 0 0 / 100% 100% no-repeat; color: var(--creme);
  font: 600 .76rem/1 var(--sans); letter-spacing: .1em; text-transform: uppercase;
  filter: drop-shadow(0 4px 5px rgba(46,35,32,.28));
}
.chave { color: var(--argila); filter: drop-shadow(0 6px 8px rgba(46,35,32,.32)); }
.cofre__chave { position: absolute; right: -16%; bottom: 3%; width: 84%; transform: rotate(-16deg); z-index: 3; }
@media (min-width: 900px) { .cofre { width: min(100%, 300px); } .capa, .obrigado { grid-template-columns: 1.15fr .85fr; } .capa .cofre { order: 2; } }

/* ---------- opções ---------- */
.opcoes { display: grid; gap: .6rem; margin: 0 0 var(--e3); padding: 0; list-style: none; }
@media (min-width: 900px) { .opcoes--muitas { grid-template-columns: 1fr 1fr; } }
.opcao {
  width: 100%; min-height: 56px; display: flex; align-items: center; gap: .85rem; text-align: left;
  padding: .75rem 1rem; cursor: pointer;
  background: var(--opcao-bg); border: 1.5px solid var(--opcao-borda); border-radius: 12px;
  font: 500 1.02rem/1.25 var(--sans); box-shadow: var(--opcao-sombra);
  transition: background-color .2s var(--curva), border-color .2s var(--curva), color .2s var(--curva), transform .12s;
}
.opcao::before {
  content: ""; flex: none; width: 21px; height: 21px; border-radius: 50%;
  border: 2px solid var(--argila); background: transparent;
  transition: background-color .2s var(--curva), box-shadow .2s var(--curva), border-color .2s var(--curva);
}
.opcao:hover { border-color: var(--argila); }
.opcao:active { transform: scale(.99); }
.opcao:focus-visible, .botao:focus-visible, .voltar:focus-visible { outline: 3px solid var(--foco); outline-offset: 3px; }
.opcao[aria-pressed="true"] { background: var(--argila); border-color: var(--argila); color: var(--creme); font-weight: 600; }
.opcao[aria-pressed="true"]::before { background: var(--creme); border-color: var(--creme); box-shadow: inset 0 0 0 4px var(--argila); }
.opcoes--multipla .opcao::before { border-radius: 6px; }
.opcoes--multipla .opcao[aria-pressed="true"]::before {
  background: var(--creme) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23C96442' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 15px no-repeat;
  box-shadow: none;
}

/* ---------- campos ---------- */
.campo { margin: 0 0 var(--e3); }
.campo label { display: block; margin-bottom: .4rem; font: 500 .78rem/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-suave); }
.campo input, .campo textarea {
  width: 100%; font-size: max(16px, 1.1rem); font-weight: 500; line-height: 1.8rem;
  padding: .55rem .9rem; border: 1.5px solid var(--opcao-borda); border-radius: 10px; background: var(--campo-bg);
}
.campo textarea { min-height: 9.5rem; resize: vertical; }
.campo input:focus, .campo textarea:focus { outline: 3px solid var(--foco); outline-offset: 1px; border-color: var(--argila); }
.campo__erro { display: none; margin: .4rem 0 0; color: var(--erro); font-weight: 500; font-size: .95rem; }
.campo--erro input, .campo--erro textarea { border-color: var(--erro); }
.campo--erro .campo__erro { display: block; }
.consente { display: flex; gap: .7rem; align-items: flex-start; margin: 0 0 var(--e3); cursor: pointer; line-height: 1.4; }
.consente input { flex: none; width: 24px; height: 24px; margin: .1rem 0 0; accent-color: var(--argila); cursor: pointer; }
.consente small { display: block; margin-top: .2rem; color: var(--fg-suave); font-size: .92rem; }

/* ---------- botões: faixa de papel rasgado, como na página da oferta ---------- */
.acoes { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e2); margin-top: var(--e3); }
.botao {
  display: inline-flex; align-items: center; justify-content: center; min-height: 58px; padding: .95rem 2.2rem;
  border: 0; cursor: pointer; text-decoration: none; color: var(--creme);
  background: transparent url(assets/faixa-argila.webp) 0 0 / 100% 100% no-repeat;
  font: 600 .98rem/1 var(--sans); letter-spacing: .06em; text-transform: uppercase;
  filter: drop-shadow(0 3px 0 rgba(46,35,32,.22));
  transition: filter .15s, transform .12s;
}
.botao:hover { filter: brightness(.93) drop-shadow(0 3px 0 rgba(46,35,32,.22)); }
.botao:active { transform: translateY(2px); filter: brightness(.9) drop-shadow(0 1px 0 rgba(46,35,32,.22)); }
.botao[disabled] { opacity: .45; cursor: not-allowed; filter: grayscale(.5); }
.botao--largo { width: 100%; }
.voltar { background: none; border: 0; min-height: 44px; padding: .4rem 0; cursor: pointer; color: var(--fg-suave); font-weight: 500; text-decoration: underline; text-underline-offset: 4px; }
.nota { margin: var(--e2) 0 0; font-size: .95rem; color: var(--fg-suave); }

/* ---------- brinde: lembra o presente em toda pergunta ---------- */
.brinde {
  display: flex; align-items: center; gap: .75rem; margin: 0 0 var(--e3); padding: .6rem .85rem;
  border: 1.5px dashed var(--argila); border-radius: 10px; background: var(--brinde-bg);
  font-size: .98rem; line-height: 1.3;
}
.brinde .chave { width: 52px; flex: none; transform: rotate(-12deg); filter: none; }
.brinde b { color: var(--kicker); font-weight: 600; }
.brinde[hidden] { display: none; }

/* ---------- obrigado ---------- */
.obrigado { display: grid; gap: var(--e4); align-items: center; }
.obrigado__chave { margin: 0 auto; width: min(80%, 300px); }
.obrigado__chave .chave { transform: rotate(-14deg); animation: gira .9s .1s var(--curva) both; }
@keyframes gira { from { transform: rotate(-60deg) scale(.7); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .obrigado__chave .chave { animation: none; } }

.rodape { position: relative; z-index: 1; max-width: 1120px; margin: var(--e3) auto 0; padding: 0 16px 28px; display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; justify-content: space-between; font-size: .92rem; color: var(--fg-suave); }
@media (min-width: 900px) { .rodape { padding: 0 32px 36px; } }
.rodape a { color: var(--kicker); font-weight: 500; }
.sem-js { text-align: center; padding: 2rem; }