/* Pré-venda Banestes. Tokens da marca (os mesmos do app); tudo abaixo usa só eles. */
:root {
  color-scheme: light dark;
  --fundo: #f4f5f2;
  --papel: #ffffff;
  --tom: #ebede8;
  --tinta: #15171a;
  --tinta-2: #4a4f57;
  --acento: #1e7a4c;
  --acento-tinta: #ffffff;
  --erro: #b42318;
  --erro-tinta: #ffffff;
  --escuro: #15171a;
  --escuro-tinta: #eceeea;
  --escuro-2: #a8aea9;
  /* tons do verde, do escuro ao claro: as etapas */
  --v1: #0f3d26;
  --v2: #165c39;
  --v3: #1e7a4c;
  --v4: #cfe3d6;

  --fonte: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --passo-pequeno: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);
  --passo-corpo: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --passo-frase: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
  --passo-titulo: clamp(2.25rem, 1.4rem + 3.6vw, 4.25rem);
  --passo-gigante: clamp(7rem, 2rem + 16vw, 18rem);

  --margem: clamp(1rem, 0.6rem + 1.8vw, 2rem);
  --entre: clamp(7rem, 4rem + 9vw, 13rem);
  --raio: 0;
  --curva: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #111312;
    --papel: #1a1d1b;
    --tom: #232725;
    --tinta: #eceeea;
    --tinta-2: #a8aea9;
    --acento: #3fb27a;
    --acento-tinta: #0b1a12;
    --erro: #f97066;
    --erro-tinta: #111312;
    --escuro: #0b0c0b;
    --v4: #2a4a37;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fundo);
  color: var(--tinta);
  font-family: var(--fonte);
  font-size: var(--passo-corpo);
  line-height: 1.55;
  font-feature-settings: "tnum" 0;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, dl, dd, fieldset, legend { margin: 0; padding: 0; border: 0; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }
::selection { background: var(--acento); color: var(--acento-tinta); }
.visualmente-oculto {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* Botão: um só formato na página inteira, cantos retos, uma cor. */
.botao {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3.25rem; padding: 0 1.5rem;
  background: var(--acento); color: var(--acento-tinta);
  font: 600 var(--passo-corpo)/1 var(--fonte); text-decoration: none;
  border-radius: var(--raio);
  transition: transform 120ms var(--curva), opacity 120ms;
}
.botao:hover { opacity: 0.9; }
.botao:active { transform: scale(0.97); }
.botao-claro { background: var(--papel); color: var(--tinta); }
.botao[aria-disabled="true"] { opacity: 0.55; pointer-events: none; }

/* Barra */
.barra {
  position: absolute; inset: 0 0 auto; z-index: 2;
  display: flex; justify-content: space-between; align-items: center;
  padding: 1.25rem var(--margem);
  color: var(--escuro-tinta);
}
.marca, .barra-link { font-size: var(--passo-pequeno); font-weight: 500; text-decoration: none; }
.barra-link { text-decoration: underline; text-underline-offset: 0.25em; }

/* Topo: o campo escuro com o cartão-resposta no centro */
.topo {
  min-height: 100svh;
  gap: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 6rem var(--margem) 5rem;
  background: var(--escuro); color: var(--escuro-tinta);
  text-align: center;
}
.cartao {
  width: min(32rem, 100%);
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem;
  padding: 1.5rem 1.25rem 1.25rem;
  background: var(--papel); color: var(--tinta);
  clip-path: polygon(2.25rem 0, 100% 0, 100% 100%, 0 100%, 0 2.25rem);
  text-align: left;
}
.cartao-rotulo { font-size: var(--passo-pequeno); color: var(--tinta-2); margin-bottom: 0.5rem; }
.bolhas { display: grid; grid-template-columns: 1fr 1fr; column-gap: 0.75rem; row-gap: 0.15rem; }
.cartao-bloco:first-child .bolhas { grid-template-columns: 1fr; }
.linha { display: flex; align-items: center; gap: 0.18rem; font-size: 0.8125rem; }
.linha b { width: 1.4rem; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--tinta-2); }
.linha i { width: 0.5rem; height: 0.5rem; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--tinta-2); } /* taste-skill-ignore: anel da bolha do cartão-resposta / pontos-guia do recibo, não é sombra nem degradê */
.linha i.cheia { background: var(--tinta); box-shadow: none; } /* taste-skill-ignore: anel da bolha do cartão-resposta / pontos-guia do recibo, não é sombra nem degradê */
.cartao-bloco:first-child .linha:nth-child(n + 9) { display: none; }
.cartao-bloco:last-child .linha:nth-child(n + 17) { display: none; }
.marca-larga {
  margin-top: 2rem;
  font-size: clamp(1.1rem, 0.7rem + 1.6vw, 2.2rem); font-weight: 500;
  letter-spacing: 0.55em; text-transform: uppercase; margin-right: -0.55em;
  color: var(--escuro-2);
}
.topo h1 {
  margin-top: 1.25rem; max-width: 22ch;
  font-size: var(--passo-titulo); font-weight: 600; line-height: 1; letter-spacing: -0.03em;
  text-wrap: balance;
}
.topo-apoio { margin-top: 1.25rem; max-width: 46ch; color: var(--escuro-2); }
.topo-linha {
  margin-top: 2.5rem;
  display: flex; align-items: center; justify-content: center; gap: 3rem;
  font-size: var(--passo-pequeno); color: var(--escuro-2);
}

/* Vitrine: foto de Vitória em tela cheia, a questão num cartão de uma coluna */
.vitrine { position: relative; min-height: 100svh; display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; padding: var(--entre) 0; }
.vitrine-fotos { position: absolute; inset: 0; overflow: hidden; background: var(--escuro); }
.vitrine-fotos img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 1.6s ease;
}
.vitrine-fotos img.ativa, .vitrine-fotos img:first-child { opacity: 1; }
.vitrine-fotos img.ativa ~ img:not(.ativa) { opacity: 0; }
.vitrine-cartao {
  position: relative; grid-column: 2 / span 2;
  padding: 2.5rem; background: var(--papel); color: var(--tinta);
}
.vitrine-cartao h2 { font-size: var(--passo-frase); font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; }
.vitrine-fonte { margin-top: 0.5rem; font-size: var(--passo-pequeno); color: var(--tinta-2); }
.questao { margin-top: 1.75rem; }
.questao legend { font-weight: 500; margin-bottom: 1rem; }
.questao label {
  display: flex; align-items: baseline; gap: 0.85rem;
  padding: 0.7rem 0.85rem; margin: 0 -0.85rem; cursor: pointer;
  transition: background-color 150ms;
}
.questao label:hover { background: var(--tom); }
.questao input { position: absolute; opacity: 0; }
.letra {
  flex: none; display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem;
  border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--tinta-2); /* taste-skill-ignore: anel da bolha do cartão-resposta / pontos-guia do recibo, não é sombra nem degradê */
  font-size: var(--passo-pequeno); font-weight: 600;
  transition: transform 200ms var(--curva), background-color 200ms;
}
.questao input:focus-visible + .letra { outline: 2px solid var(--acento); outline-offset: 2px; }
.questao input:checked + .letra { transform: scale(1.08); }
.questao label.certa .letra { background: var(--acento); color: var(--acento-tinta); box-shadow: none; } /* taste-skill-ignore: anel da bolha do cartão-resposta / pontos-guia do recibo, não é sombra nem degradê */
.questao label.errada .letra { background: var(--erro); color: var(--erro-tinta); box-shadow: none; } /* taste-skill-ignore: anel da bolha do cartão-resposta / pontos-guia do recibo, não é sombra nem degradê */
.explicacao {
  margin-top: 1.25rem; padding: 1.1rem 1.25rem; background: var(--tom);
}
.explicacao.visivel { animation: sobe 380ms var(--curva); }
.explicacao.acertou { background: color-mix(in oklab, var(--acento) 16%, var(--papel)); }
.vitrine-depois { margin-top: 1.5rem; color: var(--tinta-2); }

/* Etapas: introdução em duas colunas e a sanfona do escuro ao claro */
.etapas { padding: var(--entre) var(--margem) 0; }
.etapas-intro { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1.5rem; align-items: end; }
.etapas-intro h2 { grid-column: 1 / span 5; font-size: var(--passo-titulo); font-weight: 600; line-height: 1; letter-spacing: -0.03em; }
.etapas-intro p { grid-column: 7 / span 5; }
.sanfona { margin-top: 4rem; display: flex; height: 32.5rem; }
.etapa {
  position: relative; flex: 1 1 0; min-width: 0; overflow: hidden;
  transition: flex-grow 450ms var(--curva);
}
.etapa:nth-child(1) { background: var(--v1); color: #eceeea; }
.etapa:nth-child(2) { background: var(--v2); color: #eceeea; }
.etapa:nth-child(3) { background: var(--v3); color: #fff; }
.etapa:nth-child(4) { background: var(--v4); color: var(--tinta); }
.etapa.aberta { flex-grow: 5; }
.etapa button {
  all: unset; cursor: pointer; position: absolute; inset: 0;
  font-weight: 600; font-size: 1.25rem;
}
.etapa:not(.aberta) button {
  writing-mode: vertical-rl; transform: rotate(180deg);
  padding: 1.5rem 0; display: flex; align-items: flex-start; justify-content: center;
}
.etapa.aberta button { padding: 2rem; font-size: var(--passo-frase); letter-spacing: -0.02em; cursor: default; }
.etapa button:focus-visible { outline: 2px solid currentColor; outline-offset: -6px; }
.etapa-texto { position: absolute; left: 2rem; bottom: 2rem; width: min(36ch, calc(100% - 4rem)); opacity: 0; transition: opacity 300ms 150ms; pointer-events: none; }
.etapa.aberta .etapa-texto { opacity: 1; }

/* Pontos: o total gigante e o recibo do edital */
.pontos {
  margin-top: var(--entre);
  display: grid; grid-template-columns: repeat(12, 1fr); gap: 1.5rem;
  padding: 6rem var(--margem); background: var(--tom);
}
.pontos-total { grid-column: 1 / span 6; display: flex; flex-direction: column; justify-content: space-between; gap: 3rem; }
.pontos-total h2 { font-size: clamp(2rem, 1.4rem + 1.4vw, 2.75rem); font-weight: 600; line-height: 1.05; letter-spacing: -0.02em; }
.pontos-total p { margin-top: 0.75rem; max-width: 42ch; }
.total { font-size: var(--passo-corpo); }
.total span { display: block; font-size: var(--passo-gigante); font-weight: 600; line-height: 0.8; letter-spacing: -0.05em; margin-bottom: 1.25rem; }
.recibo {
  grid-column: 8 / span 4; align-self: start;
  background: var(--papel); padding: 1.75rem 1.5rem 3rem;
  font-variant-numeric: tabular-nums; font-size: 1rem;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), 95% 100%, 90% calc(100% - 12px), 85% 100%, 80% calc(100% - 12px), 75% 100%, 70% calc(100% - 12px), 65% 100%, 60% calc(100% - 12px), 55% 100%, 50% calc(100% - 12px), 45% 100%, 40% calc(100% - 12px), 35% 100%, 30% calc(100% - 12px), 25% 100%, 20% calc(100% - 12px), 15% 100%, 10% calc(100% - 12px), 5% 100%, 0 calc(100% - 12px));
}
.recibo-grupo { font-weight: 600; margin: 1.25rem 0 0.4rem; }
.recibo-grupo:first-child { margin-top: 0; }
.recibo dl div { display: flex; align-items: baseline; gap: 0.5rem; padding: 0.2rem 0; }
.recibo dt { flex: none; max-width: 75%; }
.recibo dl div::after { content: ""; order: 1; flex: 1; height: 4px; background: radial-gradient(circle, var(--tinta-2) 1.2px, transparent 1.6px) 0 0 / 8px 4px repeat-x; transform: translateY(-3px); } /* taste-skill-ignore: anel da bolha do cartão-resposta / pontos-guia do recibo, não é sombra nem degradê */
.recibo dd { order: 2; font-weight: 500; }
.recibo-total { display: flex; justify-content: space-between; margin: 1.25rem -0.5rem 0; padding: 0.6rem 0.5rem; background: var(--tinta); color: var(--fundo); font-weight: 600; }
.recibo-nota { margin-top: 1rem; font-size: var(--passo-pequeno); color: var(--tinta-2); }

/* Passe: o parágrafo com imagens no lugar das palavras */
.passe { padding: var(--entre) var(--margem) 0; display: grid; grid-template-columns: repeat(12, 1fr); gap: 1.5rem; }
.passe-frase { grid-column: 1 / span 11; font-size: var(--passo-frase); font-weight: 500; line-height: 1.3; letter-spacing: -0.015em; }
.slot {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.12em;
  width: 1.9em; height: 1em; vertical-align: -0.12em; overflow: hidden;
  border-radius: 0.18em; background: var(--tom);
}
.slot img { width: 100%; height: 100%; object-fit: cover; }
.slot i { width: 0.22em; height: 0.22em; border-radius: 50%; box-shadow: inset 0 0 0 0.04em var(--tinta-2); } /* taste-skill-ignore: anel da bolha do cartão-resposta / pontos-guia do recibo, não é sombra nem degradê */
.slot i.certa { background: var(--acento); box-shadow: none; } /* taste-skill-ignore: anel da bolha do cartão-resposta / pontos-guia do recibo, não é sombra nem degradê */
.slot i.errada { background: var(--erro); box-shadow: none; } /* taste-skill-ignore: anel da bolha do cartão-resposta / pontos-guia do recibo, não é sombra nem degradê */
.slot i.agora { background: var(--tinta); box-shadow: none; } /* taste-skill-ignore: anel da bolha do cartão-resposta / pontos-guia do recibo, não é sombra nem degradê */
.passe-apoio { grid-column: 7 / span 5; margin-top: 4.5rem; }
.passe-apoio .botao { margin-top: 1.5rem; }

/* Preço: dois campos que se encontram numa borda reta */
.preco { margin-top: var(--entre); display: grid; grid-template-columns: 7fr 5fr; min-height: 90svh; }
.campo { display: flex; flex-direction: column; padding: 2.5rem var(--margem); }
.campo-pre { background: var(--acento); color: var(--acento-tinta); }
.campo-depois { background: var(--escuro); color: var(--escuro-tinta); }
.campo-nome { font-size: clamp(2.25rem, 1rem + 4vw, 4.5rem); font-weight: 600; line-height: 1; letter-spacing: -0.03em; }
.campo-para { margin-top: 1rem; max-width: 26ch; font-size: 1.25rem; line-height: 1.35; }
.campo-inclui { margin-top: 1.5rem; max-width: 44ch; opacity: 0.88; }
.campo-base { margin-top: auto; padding-top: 3rem; display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.campo-preco { font-size: clamp(3.5rem, 1.5rem + 7vw, 8.5rem); font-weight: 600; line-height: 0.9; letter-spacing: -0.04em; }
.campo-preco span { display: inline-block; margin-left: 0.75rem; font-size: 1.125rem; font-weight: 400; letter-spacing: 0; }
.campo-depois .campo-preco { font-size: clamp(2.5rem, 1.2rem + 4.5vw, 5.5rem); }

/* Perguntas: uma faixa por pergunta, alternando o tom */
.perguntas-titulo {
  display: flex; align-items: flex-end; min-height: 40svh; padding: 2rem var(--margem);
  background: var(--acento); color: var(--acento-tinta);
  font-size: clamp(3rem, 1rem + 7vw, 7.5rem); font-weight: 600; line-height: 0.95; letter-spacing: -0.04em;
}
.faixa { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1.5rem; padding: 3.5rem var(--margem); }
.faixa:nth-of-type(odd) { background: var(--tom); }
.faixa h3 { grid-column: 1 / span 5; font-size: clamp(1.375rem, 1.1rem + 0.8vw, 2rem); font-weight: 600; line-height: 1.15; letter-spacing: -0.015em; }
.faixa p { grid-column: 7 / span 6; max-width: 60ch; }

/* Chamada: a ficha de inscrição sobre o campo escuro */
.chamada {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: repeat(12, 1fr); gap: 1.5rem; align-items: end;
  min-height: 80svh; padding: 6rem var(--margem) 0;
  background: var(--escuro); color: var(--escuro-tinta);
}
.chamada-texto { grid-column: 1 / span 4; padding-bottom: 4rem; font-size: clamp(1.25rem, 1rem + 0.8vw, 1.5rem); line-height: 1.35; }
.ficha {
  grid-column: 6 / span 7; justify-self: center; width: min(100%, 44vw); aspect-ratio: 7 / 5;
  transform: rotate(-2deg) translateY(60px);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem;
  padding: 3rem; background: var(--papel); color: var(--tinta); text-align: center;
}
.ficha h2 { font-size: 2rem; font-weight: 600; letter-spacing: -0.02em; }
.botao-barra { align-self: stretch; margin-top: 1rem; min-height: 3.5rem; background: var(--tinta); color: var(--fundo); }

/* Rodapé: o contato é a manchete */
.rodape {
  min-height: 90svh; display: flex; flex-direction: column;
  padding: 2.5rem var(--margem) 1.5rem; background: var(--v1); color: #eceeea;
}
.rodape-topo { display: flex; gap: 2.5rem; flex-wrap: wrap; font-size: var(--passo-pequeno); }
.rodape-topo a { margin-left: auto; }
.rodape-contato {
  margin-top: auto; display: block;
  font-size: clamp(2.25rem, 0.5rem + 6.4vw, 7.5rem); font-weight: 600; line-height: 1; letter-spacing: -0.04em;
  text-decoration: none; overflow-wrap: anywhere;
}
.rodape-contato:hover { text-decoration: underline; text-decoration-thickness: 0.05em; text-underline-offset: 0.12em; }
.rodape-base { margin-top: 3rem; display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 2rem; font-size: var(--passo-pequeno); opacity: 0.85; }
.rodape-base p:last-child { text-align: right; }
.creditos { text-align: center; }

/* Movimento: só transform e opacidade, e só quando o script liga */
@keyframes sobe { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.anima :is(main section h2:not(.visualmente-oculto), main section > div > p, .etapa, .recibo, .passe-frase, .campo, .faixa, .ficha, .vitrine-cartao, .total):not(.entrou) { opacity: 0; transform: translateY(24px); }
.anima .entrou { transition: opacity 700ms var(--curva) var(--atraso, 0ms), transform 700ms var(--curva) var(--atraso, 0ms); }
.anima .ficha.entrou { transform: rotate(-2deg) translateY(60px); }
.topo > * { animation: sobe 700ms var(--curva) both; }
.topo > :nth-child(2) { animation-delay: 80ms; }
.topo > :nth-child(3) { animation-delay: 160ms; }
.topo > :nth-child(4) { animation-delay: 220ms; }
.topo > :nth-child(5) { animation-delay: 280ms; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* Celular: composição própria */
@media (max-width: 760px) {
  .topo { padding-top: 5rem; }
  .topo-linha { flex-direction: column; gap: 0.9rem; width: 100%; }
  .topo-linha .botao { width: 100%; order: -1; }
  .cartao { grid-template-columns: 1fr; }
  .cartao-bloco:last-child { display: none; }
  .bolhas, .cartao-bloco:first-child .bolhas { grid-template-columns: 1fr 1fr; }
  .cartao-bloco:first-child .linha:nth-child(n + 11) { display: none; }
  .marca-larga { letter-spacing: 0.3em; margin-right: -0.3em; }

  .vitrine { display: block; padding: 40svh 0 0; }
  .vitrine-cartao { padding: 1.75rem 1.25rem 2rem; }

  .etapas-intro, .pontos, .passe, .faixa, .chamada { grid-template-columns: 1fr; }
  .etapas-intro > *, .pontos > *, .passe > *, .faixa > *, .chamada > * { grid-column: 1 / -1 !important; }
  .sanfona { flex-direction: column; height: auto; }
  .etapa { flex: none; min-height: 4rem; }
  .etapa button, .etapa:not(.aberta) button {
    position: relative; inset: auto; display: block; writing-mode: horizontal-tb; transform: none;
    padding: 1.2rem 1.25rem; font-size: 1.125rem;
  }
  .etapa.aberta button { font-size: 1.375rem; padding: 1.2rem 1.25rem 0.5rem; }
  .etapa-texto { position: static; width: auto; display: none; padding: 0 1.25rem 1.5rem; }
  .etapa.aberta .etapa-texto { display: block; }

  .pontos { padding: 4rem var(--margem); }
  .total span { font-size: 40vw; }
  .passe-apoio { margin-top: 2.5rem; }
  .passe-apoio .botao { width: 100%; }

  .preco { grid-template-columns: 1fr; min-height: 0; }
  .campo { min-height: 70svh; padding: 2rem 1.25rem; }
  .campo-base .botao { width: 100%; }

  .perguntas-titulo { min-height: 30svh; font-size: 13vw; }
  .faixa { gap: 0.75rem; padding: 2rem 1.25rem; }

  .chamada { padding-top: 4rem; min-height: 0; }
  .chamada-texto { padding-bottom: 2rem; }
  .ficha { width: 90%; aspect-ratio: auto; transform: rotate(-1deg) translateY(40px); padding: 2rem 1.25rem 4rem; }
  .anima .ficha.entrou { transform: rotate(-1deg) translateY(40px); }
  .ficha h2 { font-size: 1.5rem; }

  .rodape-contato { font-size: 9.5vw; }
  .rodape-base { grid-template-columns: 1fr; gap: 0.75rem; }
  .rodape-base p:last-child, .creditos { text-align: left; }
}