/* Beyoung Creators · landing
   VISS Digital · viss.digital
   Figma "Beyoung Creators", Home · 1440 · v2. Medidas em rem (px do frame / 16),
   escala proporcional da VISS: celular no frame 390, tablet no 768, computador
   no 1440. Só o computador tem frame desenhado; tablet e celular são adaptação.
   O topo e a seção 02 dividem um palco: no computador, ao rolar, a foto do topo
   encolhe até virar o cartão Influencer (efeito da revolut.com). */

@font-face { font-family: "Inter"; src: url("/fonts/inter-variavel.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

/* escala proporcional */
:root { font-size: clamp(15px, calc(100vw / 390 * 16), 17.65px); }
@media (min-width: 768px) { :root { font-size: clamp(16px, calc(100vw / 768 * 16), 21.33px); } }
@media (min-width: 1280px) { :root { font-size: clamp(14.2px, calc(100vw / 1440 * 16), 21.33px); } }

:root {
  --fundo: #f6f6f6;
  --grafite: #2a2a2a;
  --preto: #111111;
  --tinta-2: #57534e;
  --caramelo-texto: #8b6a4c;
  --icone: #a2856c;
  --filete: #ebebeb;
  --bandeja: #eeeeee;
  --nevoa: #efefea;
  --ceu: #83b2dc;
  --ceu-baixo: #aed0e3;
  /* largura do frame e margem de cada faixa: o conteúdo trava e centraliza */
  --largura: 24.375rem;
  --margem: 1.25rem;
  --px: max(var(--margem), calc((100% - var(--largura)) / 2 + var(--margem)));
}
@media (min-width: 768px) { :root { --largura: 48rem; --margem: 2rem; } }
@media (min-width: 1280px) { :root { --largura: 90rem; --margem: 4rem; } }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--fundo);
  color: var(--grafite);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p { margin: 0; font-weight: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }
strong { font-weight: 700; }
:focus-visible { outline: 2px solid var(--icone); outline-offset: 3px; }

.b-pular {
  position: absolute; left: 1rem; top: -4rem; z-index: 50;
  padding: .75rem 1.25rem; border-radius: 1.5rem;
  background: var(--grafite); color: #fff; font-size: .875rem; font-weight: 600; text-decoration: none;
}
.b-pular:focus { top: 1rem; }

/* ---------- peças que se repetem ---------- */

.b-titulo { font-weight: 500; font-size: 2.125rem; line-height: 1.05; letter-spacing: -0.03em; text-wrap: balance; }
.b-topo__titulo, .b-numeros__titulo, .b-chamada__titulo, .b-areas__frase, .b-vez__texto { text-wrap: balance; }
.b-junto { white-space: nowrap; }

/* botão pílula com o disco do símbolo (Botão / Pílula do Figma) */
.b-disco {
  display: inline-flex; align-items: center; gap: .875rem;
  padding: .3125rem .3125rem .3125rem 1.5rem;
  border-radius: 1.6875rem;
  font-weight: 600; font-size: .8125rem; line-height: 1; letter-spacing: .06em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap;
  transition: background-color .2s ease, transform .2s ease;
}
.b-disco__circulo { flex: none; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; }
.b-disco__circulo img { width: 1.75rem; height: 1.75rem; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.b-disco:hover .b-disco__circulo img { transform: rotate(180deg); }
.b-disco:active { transform: scale(.98); }
.b-disco--grafite { background: #000; color: #fff; }
.b-disco--grafite .b-disco__circulo { background: #1e1e1e; }
.b-disco--grafite:hover { background: #1a1a1a; }
.b-disco--branca { background: #fff; color: var(--grafite); }
.b-disco--branca:hover { background: #f1f1f1; }
.b-disco--cinza { background: #ebebeb; color: var(--grafite); }
.b-disco--cinza:hover { background: #e2e2e2; }
.b-disco--clara { background: var(--fundo); color: var(--grafite); }
.b-disco--clara:hover { background: #ebebeb; }
.b-disco--branca .b-disco__circulo, .b-disco--cinza .b-disco__circulo, .b-disco--clara .b-disco__circulo { background: var(--grafite); }

/* selo: quadro preto com ícone + etiqueta */
.b-selo {
  display: inline-flex; align-items: center; gap: .75rem;
  font-weight: 500; font-size: .8125rem; line-height: 1.2; letter-spacing: .05em; text-transform: uppercase;
}
.b-selo__quadro {
  flex: none; display: grid; place-items: center;
  width: 2.5rem; height: 2.5rem; border-radius: .75rem; background: var(--preto);
  box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .1), 0 .5rem 1.125rem rgba(0, 0, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .14);
}
.b-selo__quadro img, .b-selo__quadro svg { width: 1.25rem; height: 1.25rem; overflow: visible; }

.b-pilula {
  display: inline-flex; align-items: center; height: 2rem; padding: 0 1rem; border-radius: 1rem;
  background: #fff; color: var(--grafite);
  font-weight: 600; font-size: .6875rem; line-height: 1; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
  text-shadow: none;
}

/* notificação */
.b-aviso {
  display: flex; align-items: center; gap: .75rem;
  height: 3.5rem; padding: .625rem .875rem .625rem .625rem; border-radius: 1rem;
  background: #fff; text-align: left; text-shadow: none;
  filter: drop-shadow(0 .5rem .75rem rgba(0, 0, 0, .1));
}
.b-aviso__icone { flex: none; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: .625rem; background: var(--nevoa); }
.b-aviso__icone img { width: 1.125rem; height: 1.125rem; }
.b-aviso__textos { display: flex; flex-direction: column; gap: .125rem; min-width: 0; line-height: 1.3; }
.b-aviso__textos strong { font-weight: 600; font-size: .8125rem; color: var(--grafite); }
.b-aviso__textos span { font-size: .75rem; color: var(--tinta-2); }


.b-bandeja { background: var(--bandeja); border-radius: 2rem; padding: .75rem; }

.b-secao { padding: 3rem var(--px); }

/* ---------- palco: 01 Topo + 02 Três áreas ---------- */

.b-palco { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); overflow: clip; }
.b-palco__janela { display: none; }

.b-topo {
  grid-area: 1 / 1;
  position: relative;
  display: flex; flex-direction: column;
  padding: .75rem var(--px) 0;
  background: var(--ceu) url("landing/topo-ceu.webp") center bottom / cover no-repeat;
  overflow: hidden;
  color: #fff;
}

.b-menu { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.b-menu__logo { flex: none; display: block; }
.b-menu__logo img { width: 8.5rem; height: auto; }
.b-menu__links { display: none; }
.b-menu__acao { display: none; }

.b-topo__texto { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; margin-top: 1.5rem; }
.b-topo__titulo { font-weight: 500; font-size: 2.5rem; line-height: 1.05; letter-spacing: -0.03em; }
.b-topo__frase { margin-top: 1rem; font-size: 1rem; line-height: 1.5; }
.b-topo__texto .b-disco { margin-top: 1.75rem; }

.b-topo__visual { position: relative; height: 33rem; margin: 1rem calc(-1 * var(--px)) 0; }
.b-topo__modelo { position: absolute; left: 50%; top: 0; width: 36rem; max-width: none; transform: translateX(-50.8%); }

.b-lateral { display: none; }

.b-celular {
  grid-area: 1 / 1; align-self: end; justify-self: center;
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: .75rem;
  width: 17.5rem; height: 24rem; margin-bottom: 1.25rem; padding: .75rem .75rem 5.25rem;
  border: 2px solid rgba(255, 255, 255, .9); border-radius: 2rem;
  overflow: hidden;
}
.b-celular__sombra {
  position: absolute; inset: -2px; border-radius: inherit;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 38%, rgba(0, 0, 0, .26) 62%, rgba(0, 0, 0, .3) 100%);
}
.b-celular__cupom {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: .375rem;
  color: #fff; text-shadow: 0 1px 14px rgba(0, 0, 0, .28);
}
.b-celular__rotulo { font-weight: 600; font-size: .875rem; line-height: 1.2; }
.b-celular__codigo { font-weight: 600; font-size: 2.5rem; line-height: 1; letter-spacing: -0.02em; }
.b-celular__cupom .b-pilula { margin-top: .875rem; }

.b-areas {
  grid-area: 2 / 1;
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 2.5rem;
  padding: 4rem var(--px) 3rem;
}
.b-areas__cabeca { display: flex; flex-direction: column; align-items: center; text-align: center; }
.b-areas__frase { margin-top: 1rem; font-size: 1rem; line-height: 1.5; color: var(--tinta-2); }
.b-areas__cabeca .b-disco { margin-top: 1.75rem; }

.b-areas__cartoes {
  position: relative;
  display: flex; align-items: center; gap: .75rem;
  width: calc(100% + 2 * var(--px)); margin-inline: calc(-1 * var(--px));
  padding: 0 var(--px) .5rem;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.b-areas__cartoes::-webkit-scrollbar { display: none; }

.b-area {
  position: relative; isolation: isolate; overflow: hidden; flex: none;
  display: flex; flex-direction: column; align-items: center;
  width: 17.5rem; height: 26.25rem; padding: 1rem; border-radius: 1.75rem;
  color: #fff; scroll-snap-align: center;
}
.b-area--meio { width: 18.75rem; height: 27.5rem; }
.b-area__foto { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.b-area__sombra {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, .34) 72%, rgba(0, 0, 0, .3) 100%);
}
.b-area__info {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: .25rem;
  padding-bottom: 1.75rem; text-shadow: 0 1px 14px rgba(0, 0, 0, .25);
}
.b-area__rotulo { font-weight: 600; font-size: .875rem; line-height: 1.2; }
.b-area__nome { font-weight: 600; font-size: 2.25rem; line-height: 1.1; letter-spacing: -0.02em; }
.b-area__info .b-pilula { margin-top: .5rem; }
.b-area .b-aviso { width: 100%; }

/* ---------- 03 Em números ---------- */

.b-numeros { display: flex; flex-direction: column; gap: 2rem; }
.b-numeros__cabeca { display: flex; flex-direction: column; gap: 1.25rem; }
.b-numeros__titulo { font-weight: 500; font-size: 1.875rem; line-height: 1.05; letter-spacing: -0.03em; }
.b-numeros__titulo br { display: none; }
.b-numeros__texto { font-size: 1rem; line-height: 1.5; color: var(--tinta-2); text-align: justify; hyphens: auto; }
.b-numeros__bandeja { display: grid; gap: .75rem; }
.b-numero { display: flex; flex-direction: column; height: 13rem; padding: 1.75rem; border-radius: 1.5rem; background: #fff; }
.b-numero__valor { margin-top: auto; font-weight: 400; font-size: 4.5rem; line-height: 1; letter-spacing: -0.03em; }
.b-numero__valor.is-contando { font-variant-numeric: tabular-nums; }

/* ---------- 04 Como funciona ---------- */

.b-passos { display: flex; flex-direction: column; align-items: center; gap: 2rem; }
.b-passos__titulo { text-align: center; }
.b-passos__bandeja { display: grid; gap: .75rem; width: 100%; padding: .75rem; border-radius: 2rem; background: #fff; }
.b-passo { display: flex; flex-direction: column; overflow: hidden; padding: 1.75rem 1.5rem 0; border-radius: 1.5rem; background: var(--fundo); }
.b-passo__numero { font-weight: 600; font-size: .8125rem; line-height: 1.2; letter-spacing: .06em; color: var(--tinta-2); }
.b-passo__nome { margin-top: .625rem; font-weight: 500; font-size: 1.5rem; line-height: 1.15; letter-spacing: -0.02em; }
.b-passo__texto { margin-top: .625rem; font-size: 1rem; line-height: 1.5; color: var(--tinta-2); }
.b-passo__foto { width: 100%; height: 13rem; margin-top: 1.5rem; object-fit: cover; border-radius: 1.25rem 1.25rem 0 0; }

/* ---------- 05 Benefícios ---------- */

.b-beneficios { display: flex; flex-direction: column; gap: 2rem; }
.b-beneficios__cabeca { display: flex; flex-direction: column-reverse; align-items: flex-start; gap: 1.25rem; }
.b-beneficios__bandeja { display: grid; gap: .75rem; }
.b-beneficio { display: flex; flex-direction: column; padding: 1.75rem; border-radius: 1.5rem; background: #fff; }
.b-beneficio__nome { margin-top: 2.5rem; font-weight: 500; font-size: 1.375rem; line-height: 1.2; letter-spacing: -0.02em; }
.b-beneficio__texto { margin-top: .5rem; font-size: 1rem; line-height: 1.5; color: var(--tinta-2); }

/* ---------- 06 Agora é a sua vez ---------- */

.b-vez { display: flex; flex-direction: column; align-items: center; gap: 2.5rem; }
.b-vez__cabeca { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; text-align: center; }
/* galeria em arco (como o Arc Carousel Gallery do Framer): cartões iguais numa curva
   côncava, girando sozinhos; dá para arrastar e soltar com embalo. O landing.js põe
   cada cartão no lugar; sem o script, vira uma fileira que rola para o lado. */
.b-arco {
  --cartao-w: 11rem;
  --cartao-h: 16.5rem;
  --arco-giro: 26;      /* graus nas pontas da tela */
  --arco-fundo: .12;    /* quanto as pontas chegam perto, em fração da largura */
  --arco-vel: 30;       /* px por segundo */
  position: relative;
  width: calc(100% + 2 * var(--px)); margin-inline: calc(-1 * var(--px));
  column-gap: .75rem;
  overflow: hidden;
}
.b-arco__trilho { display: flex; gap: .75rem; padding: 0 var(--px); overflow-x: auto; scrollbar-width: none; }
.b-arco__trilho::-webkit-scrollbar { display: none; }
.b-arco__cartao {
  flex: none; display: block;
  width: var(--cartao-w); height: var(--cartao-h); max-width: none;
  object-fit: cover; border-radius: 1.5rem;
  -webkit-user-drag: none; user-select: none;
}
.b-arco:not(.is-pronto) .b-arco__cartao[aria-hidden] { display: none; }
.b-arco.is-pronto {
  height: calc(var(--cartao-h) + 5rem);
  perspective: 75rem;
  touch-action: pan-y;
  cursor: grab; user-select: none;
}
.b-arco.is-arrastando { cursor: grabbing; }
.b-arco.is-pronto .b-arco__trilho { position: absolute; inset: 0; display: block; padding: 0; overflow: visible; transform-style: preserve-3d; }
.b-arco.is-pronto .b-arco__cartao {
  position: absolute; left: 50%; top: 50%;
  margin: calc(var(--cartao-h) / -2) 0 0 calc(var(--cartao-w) / -2);
  backface-visibility: hidden; will-change: transform;
}
.b-vez__fecho { display: flex; flex-direction: column; align-items: center; gap: 1.75rem; text-align: center; }
.b-vez__texto { max-width: 35rem; font-size: 1rem; line-height: 1.5; color: var(--tinta-2); }

/* ---------- 07 FAQ ---------- */

.b-faq { display: flex; flex-direction: column; gap: 2.5rem; }
.b-faq__lado { display: flex; flex-direction: column; align-items: flex-start; gap: 1.5rem; }
.b-faq__texto { font-size: 1rem; line-height: 1.5; color: var(--tinta-2); }
.b-faq__bandeja { display: flex; flex-direction: column; gap: .75rem; width: 100%; }
.b-pergunta { padding: 0 1.25rem 0 1.5rem; border-radius: 1.5rem; background: #fff; }
.b-pergunta summary {
  display: flex; align-items: center; gap: 1rem; padding: 1.25rem 0;
  list-style: none; cursor: pointer;
  font-weight: 500; font-size: 1rem; line-height: 1.3; letter-spacing: -0.01em;
}
.b-pergunta summary::-webkit-details-marker { display: none; }
.b-pergunta summary:focus-visible { outline-offset: 6px; border-radius: .5rem; }
.b-pergunta__botao {
  flex: none; margin-left: auto; width: 2rem; height: 2rem; border-radius: 1rem;
  background: var(--nevoa) url("landing/icones/mais.svg") center / 1rem no-repeat;
  transition: background-color .2s ease;
}
.b-pergunta summary:hover .b-pergunta__botao { background-color: #e4e4dd; }
.b-pergunta[open] .b-pergunta__botao { background-image: url("landing/icones/menos.svg"); }
.b-pergunta p { margin-top: -.5rem; padding-bottom: 1.5rem; font-size: 1rem; line-height: 1.55; color: var(--tinta-2); }

/* ---------- 08 Chamada final ---------- */

.b-chamada__cartao {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 1.75rem;
  min-height: 37.5rem; padding: 2.5rem 1.5rem; border-radius: 2rem;
  background: linear-gradient(to bottom, #0e0e0e, #1f1d1c);
  color: #fff;
}
.b-chamada__foto { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 78% 50%; }
.b-chamada__cartao::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to bottom, #000 0, #000 32%, rgba(0, 0, 0, .55) 50%, rgba(0, 0, 0, 0) 68%);
}
.b-chamada__textos { display: flex; flex-direction: column; gap: 1.25rem; }
.b-chamada__titulo { font-weight: 500; font-size: 3rem; line-height: 1; letter-spacing: -0.03em; }
.b-chamada__frase { font-size: 1rem; line-height: 1.5; opacity: .86; }

/* ---------- 09 Rodapé ---------- */

.b-rodape { display: flex; flex-direction: column; gap: 2rem; padding: 3rem var(--px) 0; }
.b-rodape__cartao { padding: 2rem 1.25rem 1.5rem; border-radius: 2rem; background: #fff; }
.b-rodape__topo { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 1.5rem; padding-bottom: 2rem; border-bottom: 1px solid var(--filete); }
.b-rodape__logo { display: block; width: 9.4375rem; height: 1rem; overflow: hidden; }
.b-rodape__logo img { width: 9.4388rem; max-width: none; height: 4.423rem; margin-top: -1.7444rem; }
.b-rodape__redes { display: flex; gap: .3125rem; }
.b-rodape__redes a { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: .8125rem; background: var(--fundo); transition: background-color .2s ease; }
.b-rodape__redes a:hover { background: #ebebeb; }
.b-rodape__redes img { width: .8125rem; height: .8125rem; }
/* celular: só a sanfona; tablet: colunas sem a chamada; computador: chamada e colunas (Figma) */
.b-rodape__meio { display: none; border-bottom: 1px solid var(--filete); }
.b-rodape__chamada { display: none; }
.b-rodape__frase { font-weight: 500; font-size: 2rem; line-height: 1.15; letter-spacing: -0.02em; }
.b-rodape__coluna { display: flex; flex-direction: column; align-items: flex-start; gap: 1.125rem; }
.b-rodape__titulo { margin-bottom: 1rem; font-weight: 500; font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--caramelo-texto); }
.b-rodape__coluna a, .b-rodape__coluna button {
  margin: 0; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 1.0625rem; color: var(--grafite); text-align: left; text-decoration: none;
}
.b-rodape__coluna a:hover, .b-rodape__coluna button:hover { text-decoration: underline; text-underline-offset: .15em; }
.b-rodape__coluna .b-rodape__email { text-decoration: underline; text-underline-offset: .15em; }
.b-rodape__sanfona { border-bottom: 1px solid var(--filete); }
.b-rodape__sanfona details + details { border-top: 1px solid var(--filete); }
.b-rodape__sanfona summary {
  display: flex; align-items: center; justify-content: space-between; height: 3.5rem;
  list-style: none; cursor: pointer;
  font-weight: 500; font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--grafite);
}
.b-rodape__sanfona summary::-webkit-details-marker { display: none; }
.b-rodape__seta { width: 1.25rem; height: 1.25rem; transition: transform .25s ease; }
.b-rodape__sanfona details[open] .b-rodape__seta { transform: rotate(180deg); }
.b-rodape__sanfona ul { padding-bottom: .5rem; }
.b-rodape__sanfona a, .b-rodape__sanfona button {
  display: flex; align-items: center; width: 100%; min-height: 2.75rem;
  margin: 0; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: .875rem; color: var(--grafite); text-align: left; text-decoration: none;
}
.b-rodape__sanfona .b-rodape__email { text-decoration: underline; text-underline-offset: .15em; }
.b-rodape__base { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 1.25rem; }
.b-rodape__base p, .b-rodape__subir { font-weight: 500; font-size: .625rem; line-height: 1.2; letter-spacing: .04em; text-transform: uppercase; }
.b-rodape__base p { color: var(--tinta-2); }
.b-rodape__subir { flex: none; display: inline-flex; align-items: center; gap: .3125rem; min-height: 2.75rem; color: var(--tinta-2); text-decoration: none; }
.b-rodape__circulo { display: grid; place-items: center; width: 1.4375rem; height: 1.4375rem; border-radius: 1rem; background: var(--fundo); transition: background-color .2s ease; }
.b-rodape__subir:hover .b-rodape__circulo { background: #ebebeb; }
.b-rodape__circulo img { width: .5rem; height: .5rem; transform: rotate(-90deg); }
.b-rodape__assinatura { overflow: hidden; aspect-ratio: 1312 / 104; }
.b-rodape__assinatura img { width: 100.68%; max-width: none; margin-left: -.34%; transform: translateY(-38.15%); }

/* ---------- políticas (Termos, Privacidade e Cookies) num diálogo ---------- */

.b-politica {
  width: min(45rem, calc(100% - 1.5rem)); max-height: 86svh; margin: auto; padding: 0;
  border: 0; border-radius: 1.75rem; background: #fff; color: var(--grafite);
  box-shadow: 0 1.5rem 4.375rem rgba(0, 0, 0, .28); overflow: hidden;
}
.b-politica[open] { display: flex; flex-direction: column; }
.b-politica::backdrop { background: rgba(28, 25, 23, .55); backdrop-filter: blur(4px); }
html.b-politica-aberta, html.b-politica-aberta body { overflow: hidden; }
.b-politica__cabeca { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.625rem 1.875rem 1.125rem; background: var(--fundo); }
.b-politica__cabeca h2 { margin: 0; font-size: 1.375rem; font-weight: 700; letter-spacing: -0.01em; }
.b-politica__fechar {
  flex: none; width: 2.5rem; height: 2.5rem; border: 0; border-radius: 50%; cursor: pointer;
  background: #fff; color: var(--grafite); font-size: 1.25rem; line-height: 1;
  transition: background-color .18s ease, color .18s ease;
}
.b-politica__fechar:hover { background: var(--grafite); color: #fff; }
.b-politica__corpo { padding: 1.375rem 1.875rem 2rem; overflow-y: auto; -webkit-overflow-scrolling: touch; text-align: left; }
.b-politica__corpo h3 { margin: 1.375rem 0 .5rem; font-size: .9375rem; font-weight: 700; }
.b-politica__corpo h3:first-of-type { margin-top: 0; }
.b-politica__corpo p, .b-politica__corpo li { margin: 0 0 .625rem; font-size: .9375rem; line-height: 1.65; color: var(--tinta-2); text-align: justify; }
.b-politica__corpo ul { margin: 0 0 .75rem; padding-left: 1.25rem; list-style: disc; }
.b-politica__corpo a { color: var(--caramelo-texto); font-weight: 600; }

/* ================= tablet: frame 768 ================= */
@media (min-width: 768px) {
  .b-titulo { font-size: 2.75rem; }
  .b-secao { padding-block: 3.75rem; }

  .b-topo { padding-top: 1rem; }
  .b-menu__logo img { width: 11rem; }
  .b-menu__acao { display: inline-flex; }
  .b-topo__texto { margin-top: 3.5rem; }
  .b-topo__titulo { font-size: 3.5rem; }
  .b-topo__frase { max-width: 27.5rem; font-size: 1.125rem; }
  .b-topo__visual { height: 40rem; margin-top: 0; }
  .b-topo__modelo { width: 50rem; }
  .b-celular { width: 22.5rem; height: 30rem; padding: 1rem 1rem 5.5rem; border-radius: 2.5rem; margin-bottom: 1.5rem; }
  .b-celular__codigo { font-size: 3rem; }

  .b-areas { padding-top: 5rem; gap: 3rem; }
  .b-areas__frase { max-width: 38.75rem; font-size: 1.125rem; }
  .b-areas__cartoes { gap: 1.5rem; }
  .b-area { width: 20rem; height: 30rem; }
  .b-area--meio { width: 23.75rem; height: 35rem; }
  .b-area__nome { font-size: 2.75rem; }

  .b-numeros__titulo { font-size: 2.625rem; }
  .b-numeros__texto { font-size: 1.125rem; hyphens: manual; }
  .b-numeros__bandeja { grid-template-columns: repeat(3, 1fr); }
  .b-numero { height: 15rem; padding: 1.5rem; }
  .b-numero__valor { font-size: 3.5rem; }

  .b-passos__bandeja { grid-template-columns: 1fr 1fr; }
  .b-passo { padding: 2rem 1.75rem 0; }
  .b-passo__nome { font-size: 1.75rem; }

  .b-beneficios__bandeja { grid-template-columns: 1fr 1fr; }
  .b-beneficio { padding: 2rem; }
  .b-beneficio__nome { margin-top: 3.5rem; }

  .b-arco { --cartao-w: 13.5rem; --cartao-h: 20.25rem; --arco-vel: 34; column-gap: 1rem; }
  .b-vez__texto { font-size: 1.125rem; }

  .b-faq__texto { font-size: 1.125rem; }
  .b-pergunta { padding: 0 1.5rem 0 1.75rem; }
  .b-pergunta summary { font-size: 1.125rem; padding: 1.5rem 0; }
  .b-pergunta p { margin-top: -.875rem; padding-bottom: 1.75rem; }

  .b-chamada__cartao { min-height: 40rem; padding: 3.5rem 3rem; }
  .b-chamada__titulo { font-size: 4rem; }
  .b-chamada__frase { max-width: 28.4375rem; font-size: 1.125rem; }

  /* tablet como o rodapé da VISS: logo e redes numa linha, colunas sem a chamada */
  .b-rodape__cartao { padding: 1.25rem 2.5rem; }
  .b-rodape__topo { flex-direction: row; padding-bottom: 1.25rem; }
  .b-rodape__sanfona { display: none; }
  .b-rodape__meio { display: flex; gap: 2.5rem; padding: 1.25rem 0; }
  .b-rodape__coluna { flex: 1 1 0; min-width: 0; gap: 0; }
  .b-rodape__coluna--contato { flex: none; }
  .b-rodape__titulo { margin-bottom: 1.75rem; font-size: .625rem; }
  .b-rodape__coluna a, .b-rodape__coluna button { font-size: .875rem; line-height: 2.21875rem; white-space: nowrap; }
  .b-rodape__subir { gap: .625rem; color: var(--grafite); }
  .b-rodape__circulo { width: 1.5rem; height: 1.5rem; }
}

/* ================= computador: frame 1440 ================= */
@media (min-width: 1280px) {
  .b-titulo { font-size: 3.5rem; }
  .b-secao { padding-block: 3.75rem; }

  /* palco: o topo fica por cima da seção 02 até a troca de estado */
  .b-palco {
    --dur: 1.15s;
    --curva: cubic-bezier(.7, 0, .2, 1);
    --quadro: calc(50% - 45rem);
    /* posição do cartão Influencer (o script mede e grava a real) */
    --c-top: 28.875rem;
    --c-left: calc(50% - 11.875rem);
    --c-right: calc(50% - 11.875rem);
    --c-bottom: calc(100% - 63.875rem);
    --c-w: 23.75rem;
    --c-h: 35rem;
    /* --k: altura da tela / 900 do frame (o script grava; o topo cabe na tela e a
       composição encolhe ou cresce junto, dentro de 0,7 a 1,15) */
    --k: 1;
    --topo-h: calc(56.25rem * var(--k));
    display: block;
    min-height: var(--topo-h);
    clip-path: inset(0 0 calc(100% - var(--topo-h)) 0);
    transition: clip-path var(--dur) var(--curva);
  }
  .b-palco.is-cartao { clip-path: inset(0); }

  .b-palco__janela {
    display: block;
    position: absolute; inset: 0; z-index: 0;
    background: var(--ceu-baixo) url("landing/topo-ceu.webp") center top / 100% var(--topo-h) no-repeat;
    clip-path: inset(0 0 0 0 round 0);
    transition: clip-path var(--dur) var(--curva);
  }
  .is-cartao .b-palco__janela { clip-path: inset(var(--c-top) var(--c-right) var(--c-bottom) var(--c-left) round 1.75rem); }
  .b-palco__cena {
    position: absolute; top: 0; left: var(--quadro);
    width: 90rem; height: 65rem;
    transform-origin: 0 0;
    transition: transform var(--dur) var(--curva);
  }
  .is-cartao .b-palco__cena { transform: var(--cena-final, translate(16.71rem, 23.66rem) scale(.62)); }
  /* modelo: centro em x 722 do frame, base encostada embaixo do topo */
  .b-palco__modelo { position: absolute; left: calc(45.125rem - 31.25rem * var(--k)); top: calc(3.4375rem * var(--k)); width: calc(62.5rem * var(--k)); max-width: none; }

  .b-topo {
    position: absolute; top: 0; left: var(--quadro); z-index: 2;
    width: 90rem; height: var(--topo-h);
    padding: .9375rem 4rem 0;
    background: none; overflow: visible;
    pointer-events: none;
  }
  .b-topo > * { pointer-events: auto; }
  .b-menu, .b-topo__texto, .b-lateral {
    transition: opacity .5s ease, transform .7s var(--curva), visibility 0s linear 0s;
  }
  .is-cartao .b-menu, .is-cartao .b-topo__texto, .is-cartao .b-lateral {
    opacity: 0; transform: translateY(-2rem); visibility: hidden;
    transition: opacity .4s ease, transform .7s var(--curva), visibility 0s linear .7s;
  }

  .b-menu { gap: 0; }
  .b-menu__logo { width: 16.25rem; }
  .b-menu__logo img { width: 12.5374rem; }
  .b-menu__links { display: flex; align-items: center; gap: 2.5rem; margin-left: auto; padding: .875rem 0 .875rem 1.5rem; }
  .b-menu__links a { font-weight: 500; font-size: .9375rem; line-height: 1; text-transform: uppercase; text-decoration: none; transition: opacity .2s ease; }
  .b-menu__links a:hover { opacity: .72; }
  .b-menu__acao { margin-left: 2.5rem; }

  .b-topo__texto { margin-top: calc(13.1875rem * var(--k)); }
  .b-topo__titulo { width: 25.75rem; font-size: 4rem; }
  .b-topo__frase { width: 27.5rem; max-width: none; margin-top: 1.5rem; }
  .b-topo__texto .b-disco { margin-top: 2.25rem; }
  .b-topo__visual { display: none; }

  .b-lateral {
    display: flex; flex-direction: column; align-items: center; gap: .75rem;
    /* começa na mesma altura do título: respiro do topo + menu (94) + vão até o texto */
    position: absolute; right: 4rem; top: calc(.9375rem + 5.875rem + 13.1875rem * var(--k)); width: 20rem;
  }
  .b-vitrine {
    display: flex; flex-direction: column; gap: 1rem; width: 100%; padding: 1rem; border-radius: 1.75rem;
    background: linear-gradient(134.91deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .15));
    -webkit-backdrop-filter: blur(50px); backdrop-filter: blur(50px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5);
    color: #fff;
  }
  .b-vitrine__cabeca { display: flex; align-items: center; justify-content: space-between; padding: 0 .25rem; }
  .b-vitrine__etiqueta { font-weight: 600; font-size: .6875rem; letter-spacing: .06em; text-transform: uppercase; }
  .b-vitrine__cabeca img { width: 2.25rem; height: .5rem; }
  .b-vitrine__videos { display: flex; gap: .5rem; }
  .b-vitrine__videos img { height: 9.6875rem; border-radius: 1rem; object-fit: cover; }
  .b-vitrine__videos img:first-child { flex: 1; min-width: 0; }
  .b-vitrine__videos img:last-child { flex: none; width: 8.75rem; }
  .b-vitrine__textos { display: flex; flex-direction: column; gap: .375rem; padding: 0 .25rem .25rem; }
  .b-vitrine__titulo { font-weight: 500; font-size: .9375rem; line-height: 1.2; letter-spacing: -0.01em; }
  /* notificação dentro do vidro, sem sombra, quadro do ícone no cinza da página */
  .b-vitrine__aviso { width: 100%; filter: none; }
  .b-vitrine__aviso .b-aviso__icone { background: var(--fundo); }
  .b-vitrine__aviso .b-aviso__textos span { white-space: pre; letter-spacing: .01em; }

  /* moldura do celular: do topo vai até o cartão Influencer e some */
  .b-celular {
    position: absolute; z-index: 3; margin: 0;
    left: calc(var(--quadro) + 46.25rem - 14.375rem * var(--k)); top: calc(18.125rem * var(--k));
    width: calc(28.75rem * var(--k)); height: calc(40.625rem * var(--k));
    padding: 1rem 1rem 7.25rem; border-radius: 2.5rem;
    transition: left var(--dur) var(--curva), top var(--dur) var(--curva), width var(--dur) var(--curva), height var(--dur) var(--curva),
      border-radius var(--dur) var(--curva), border-color .5s ease, visibility 0s linear 0s;
  }
  .b-celular__codigo { font-size: 3rem; }
  .b-celular__rotulo { font-size: .9375rem; }
  .b-celular > * { transition: opacity .35s ease .1s; }
  .is-cartao .b-celular {
    left: var(--c-left); top: var(--c-top); width: var(--c-w); height: var(--c-h);
    border-radius: 1.75rem; border-color: rgba(255, 255, 255, 0); visibility: hidden;
    transition: left var(--dur) var(--curva), top var(--dur) var(--curva), width var(--dur) var(--curva), height var(--dur) var(--curva),
      border-radius var(--dur) var(--curva), border-color .5s ease .55s, visibility 0s linear var(--dur);
  }
  .is-cartao .b-celular > * { opacity: 0; transition: opacity .3s ease; }

  /* seção 02: escondida no topo, aparece com a troca */
  .b-areas { padding: 7.5rem 4rem 3.75rem; gap: 4rem; }
  .b-areas__frase { width: 38.75rem; margin-top: 1.25rem; }
  .b-areas__cabeca .b-disco { margin-top: 2rem; }
  .b-areas__cartoes { width: auto; margin: 0; padding: 0; overflow: visible; }
  .b-area__foto { display: block; }
  .b-area--meio { background: none; }
  .b-area--meio .b-area__foto { display: none; }

  .b-areas__cabeca, .b-area--lado, .b-area--meio > * {
    opacity: 0; visibility: hidden;
    transition: opacity .4s ease, transform .6s var(--curva), visibility 0s linear .6s;
  }
  .b-areas__cabeca { transform: translateY(3rem); }
  .b-area--ugc { transform: translateX(4rem) scale(.94); }
  .b-area--tiktok { transform: translateX(-4rem) scale(.94); }
  .is-cartao .b-areas__cabeca, .is-cartao .b-area--lado, .is-cartao .b-area--meio > * {
    opacity: 1; visibility: visible; transform: none;
  }
  /* atrasos presos à duração: o texto e os cartões do lado entram quando o fundo já clareou */
  .is-cartao .b-areas__cabeca { transition: opacity .6s ease calc(var(--dur) * .55), transform 1s var(--curva) calc(var(--dur) * .4), visibility 0s; }
  .is-cartao .b-area--lado { transition: opacity .6s ease calc(var(--dur) * .6), transform 1s var(--curva) calc(var(--dur) * .45), visibility 0s; }
  .is-cartao .b-area--meio > * { transition: opacity .5s ease calc(var(--dur) * .8), visibility 0s; }

  /* sem animação: troca direta (carregou já rolado, ou movimento reduzido) */
  .b-palco.sem-movimento, .b-palco.sem-movimento * { transition: none !important; }

  /* 03 */
  .b-numeros { gap: 4rem; }
  .b-numeros__cabeca { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 2rem; }
  .b-numeros__titulo br { display: inline; }
  .b-numeros__texto { width: 33.125rem; padding-top: 2.25rem; }
  .b-numero { height: 18.75rem; padding: 2.25rem; }
  .b-numero__valor { font-size: 6rem; }

  /* 04 */
  .b-passos { gap: 3rem; }
  .b-passo { height: 30rem; padding: 2.25rem 2.25rem 0; }
  .b-passo__foto { height: 20rem; margin-top: auto; }
  .b-passo__texto { margin-bottom: 2rem; }

  /* 05 */
  .b-beneficios { gap: 3rem; }
  .b-beneficios__cabeca { flex-direction: row; align-items: flex-end; justify-content: space-between; }
  .b-beneficios__bandeja { grid-template-columns: repeat(3, 1fr); }
  .b-beneficio { height: 16.25rem; }
  .b-beneficio__nome { margin-top: auto; }

  /* 06 */
  .b-vez { gap: 3.5rem; }
  .b-vez__cabeca { gap: 1.75rem; }
  .b-arco { --cartao-w: 16rem; --cartao-h: 24rem; --arco-giro: 24; --arco-fundo: .1; --arco-vel: 40; column-gap: 1.5rem; }
  .b-arco.is-pronto { perspective: 90rem; }
  .b-vez__fecho { gap: 2rem; }

  /* 07 */
  .b-faq { flex-direction: row; justify-content: space-between; align-items: flex-start; gap: 2rem; }
  .b-faq__lado { gap: 1.75rem; }
  .b-faq__texto { width: 23.75rem; }
  .b-faq__bandeja { width: 48.75rem; flex: none; }

  /* 08 */
  .b-chamada__cartao { justify-content: center; gap: 2.5rem; height: 37.5rem; min-height: 0; padding: 0 5rem; }
  .b-chamada__foto { object-position: 50% 50%; }
  .b-chamada__cartao::before { background: linear-gradient(to right, #000 41.7%, rgba(0, 0, 0, 0) 47.8%); }
  .b-chamada__titulo { font-size: 5rem; }
  .b-chamada__frase { width: 29.25rem; max-width: none; }

  /* 09 */
  .b-rodape { gap: 2.5rem; padding-top: 3.75rem; }
  .b-rodape__cartao { padding: 4rem 4rem 2.5rem; }
  .b-rodape__topo { padding-bottom: 2.5rem; }
  .b-rodape__meio { gap: 1.75rem; padding: 3.5rem 0; }
  .b-rodape__chamada { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 1.5rem; flex: none; width: 17.5rem; }
  .b-rodape__coluna { gap: 1.125rem; }
  .b-rodape__titulo { margin-bottom: 1.5rem; font-size: .75rem; }
  .b-rodape__coluna a, .b-rodape__coluna button { font-size: 1.0625rem; line-height: normal; }
  .b-rodape__base { padding-top: 1.75rem; }
  .b-rodape__base p, .b-rodape__subir { font-size: .75rem; letter-spacing: .06em; }
  .b-rodape__circulo { width: 2rem; height: 2rem; }
  .b-rodape__circulo img { width: .875rem; height: .875rem; }
}

/* ---------- surgir: títulos palavra por palavra com desfoque leve, blocos subindo ----------
   html.b-surgir vem de um script curto no head (sai sozinho se o landing.js não carregar);
   o landing.js marca .is-visivel quando o bloco entra na tela. Animação com "backwards":
   depois de terminar, cada elemento volta ao próprio estilo (não briga com o palco). */
@keyframes b-surge { from { opacity: 0; transform: translateY(var(--surge-y, 1.75rem)); } }
@keyframes b-surge-palavra { from { opacity: 0; filter: blur(8px); transform: translateY(.3em); } }
@keyframes b-desce { from { opacity: 0; transform: translateY(-1rem); } }
.b-palavra { display: inline-block; }

@media (prefers-reduced-motion: no-preference) {
  .b-surgir [data-surgir]:not(.is-visivel),
  .b-surgir [data-palavras]:not(.is-visivel),
  .b-surgir [data-surgir-grupo]:not(.is-visivel) > :not([data-palavras]) { opacity: 0; }
  [data-surgir].is-visivel,
  [data-surgir-grupo].is-visivel > :not([data-palavras]) {
    animation: b-surge .9s cubic-bezier(.2, .7, .2, 1) backwards;
    animation-delay: var(--atraso, 0ms);
  }
  [data-palavras].is-visivel .b-palavra {
    animation: b-surge-palavra .9s cubic-bezier(.2, .7, .2, 1) backwards;
    animation-delay: calc(var(--atraso, 0ms) + var(--i, 0) * 55ms);
  }
  .b-chamada__cartao { --surge-y: 3rem; }
  .b-rodape__assinatura { --surge-y: 2.5rem; }

  /* topo: entra ao abrir a página */
  .b-menu { animation: b-desce .8s cubic-bezier(.2, .7, .2, 1) .05s backwards; }
  .b-topo__frase { animation: b-surge .9s cubic-bezier(.2, .7, .2, 1) .45s backwards; }
  .b-topo__texto .b-disco { animation: b-surge .9s cubic-bezier(.2, .7, .2, 1) .6s backwards; }
  .b-celular { animation: b-surge .9s cubic-bezier(.2, .7, .2, 1) .35s backwards; }
  .b-lateral { animation: b-surge .9s cubic-bezier(.2, .7, .2, 1) .75s backwards; }
}

/* ícones de linha se desenhando: o traço percorre a linha (pathLength 1) e o ícone se forma;
   os preenchidos se revelam da esquerda para a direita */
@keyframes b-traca { 0% { stroke-dashoffset: 1; opacity: 0; } 4% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 1; } }
@keyframes b-revela { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes b-acende { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
  .b-traco__linha { stroke-dasharray: 1 1; stroke-dashoffset: 1; opacity: 0; }
  .b-traco.is-tracado .b-traco__linha { animation: b-traca 1.3s cubic-bezier(.65, 0, .35, 1) forwards; }
  .b-traco:not(.b-traco--cheio) .b-traco__cheio { opacity: 0; }
  .b-traco.is-tracado:not(.b-traco--cheio) .b-traco__cheio { animation: b-acende .5s ease .8s forwards; }
  .b-traco--cheio { clip-path: inset(0 100% 0 0); }
  .b-traco--cheio.is-tracado { animation: b-revela 1.1s cubic-bezier(.65, 0, .35, 1) forwards; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; transition-delay: 0s !important; animation: none !important; }
}