/* ============================================================
   Página do Sistema Karppa (/sistema/), etapa 2 do rebranding
   Carregada depois do base.css. Só o que é desta página: as peças
   comuns (botão, cartão, rótulo, faixa, chave, feixe, cabeçalho,
   rodapé) moram no base.css e não são repetidas aqui.

   As telas animadas (sistema/telas/) entram em três camadas:
     .tela-caixa  caixa da seção (fundo e máscara, quando precisa)
     .tela        a tela em si, com a proporção do vídeo
     img + video  a imagem parada embaixo e o vídeo por cima
   O pagina-sistema.js põe as fontes do vídeo quando a tela chega perto.
   ============================================================ */

/* ---------- 1. Telas animadas ---------- */
.tela {
  position: relative;
  aspect-ratio: 1060 / 1000;
}
.tela > img,
.tela > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
}
.tela > video { background: transparent; }
/* sem script, o navegador mostraria os controles do vídeo vazio por cima
   da imagem parada: o vídeo nem entra */
html:not(.js) .tela-video { display: none; }
/* a tela é enfeite: não pega clique nem toque (pode encostar no texto) */
.tela { pointer-events: none; }

.tela-figura { margin: 0; }

/* Os vídeos têm bastante vazio em cima e embaixo do aparelho: a figura
   encolhe esse vazio (margem negativa), sem cortar o aparelho. */
.tela-figura-justa { margin-block: -12%; }
/* com a margem negativa, a caixa da tela (que tem fundo) passa por cima do
   texto vizinho: o texto fica na frente */
.celular .secao-topo,
.dia .secao-topo { position: relative; z-index: 1; }

/* A caixa da tela: o fundo da seção, a luz difusa da base (.brilho)
   e a tela por cima, clareando (mix-blend-mode: lighten). Assim o
   #050608 do vídeo some no fundo e na luz, sem formar retângulo. A
   caixa tem fundo e isolation próprios para a mistura acontecer dentro
   dela, mesmo enquanto o revelar anima a opacidade. A luz passa da
   caixa sem marca: fora dela, o fundo da seção é da mesma cor. */
.tela-caixa {
  position: relative;
  isolation: isolate;
  background: var(--fundo);
}
.secao-alt .tela-caixa { background: var(--fundo-alt); }
.tela-caixa .tela { mix-blend-mode: lighten; }

/* ---------- 2. Abertura ---------- */
.abertura {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding-top: clamp(36px, 5vw, 72px);
  /* brilho bem leve no pé: o computador clareia por cima (lighten) sem caixa */
  background:
    radial-gradient(ellipse 60% 45% at 50% 96%, rgba(39, 56, 191, .2) 0%, rgba(39, 56, 191, 0) 70%),
    radial-gradient(ellipse 30% 20% at 50% 100%, rgba(230, 57, 5, .22) 0%, rgba(230, 57, 5, 0) 70%),
    var(--fundo);
}

/* guias verticais com um feixe laranja descendo */
.guias {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  pointer-events: none;
}
.guias span {
  position: relative;
  border-left: 1px solid rgba(255, 255, 255, .045);
  overflow: hidden;
}
.guias span::after {
  content: "";
  position: absolute;
  left: -1px;
  top: -35%;
  width: 1px;
  height: 35%;
  background: linear-gradient(180deg, rgba(254, 121, 89, 0), rgba(254, 121, 89, .65), rgba(254, 121, 89, 0));
  animation: feixe-desce 9s linear infinite;
}
.guias span:nth-child(2)::after { animation-delay: -3s; animation-duration: 11s; }
.guias span:nth-child(3)::after { animation-delay: -6s; }
.guias span:nth-child(4)::after { animation-delay: -1.5s; animation-duration: 12s; }
.guias span:nth-child(5)::after { animation-delay: -4.5s; }
.guias span:nth-child(6)::after { animation-delay: -7.5s; animation-duration: 10s; }
@keyframes feixe-desce { to { top: 135%; } }

.abertura-miolo { position: relative; }
.abertura-texto {
  position: relative;
  z-index: 2;
  max-width: 860px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 20px;
}
.abertura-texto .apoio { max-width: 620px; }
/* "e aplicativo para o seu cliente." sempre começa na linha de baixo
   (pedido do Nícolas em 21/10) */
.abertura-texto .apoio .linha { display: block; text-wrap: balance; }
.abertura-texto .botoes { justify-content: center; }


/* Categorias em volta do título: o visual é a .etiqueta da base e o
   sobe e desce é o .flutua (no elemento de fora). Aqui ficam só a
   entrada saindo do desfoque, o giro e a posição por largura. */
.categoria {
  transform: rotate(var(--giro, 0deg));
  opacity: 0;
  animation: categoria-entra 1.6s var(--curva) forwards;
  animation-delay: var(--entra, .5s);
}
.categoria-longe {
  transform: scale(.82);
  animation-name: categoria-entra-longe;
}
@keyframes categoria-entra {
  from { opacity: 0; filter: blur(18px); }
  to { opacity: 1; filter: blur(0); }
}
@keyframes categoria-entra-longe {
  from { opacity: 0; filter: blur(18px); }
  to { opacity: .75; filter: blur(2.5px); }
}

/* computador largo: soltas em volta do título, sem cobrir o texto */
@media (min-width: 1200px) {
  .categorias {
    position: absolute;
    inset: 0;
    pointer-events: none;
  }
  .categoria-pos { position: absolute; z-index: 3; }
  /* medido da borda da tela (o absolute conta do padding do .miolo) */
  .categoria-pos-1 { left: 2.5vw; top: 4%; }
  .categoria-pos-2 { left: 6.5vw; top: 42%; }
  .categoria-pos-3 { left: 2vw; top: 76%; }
  .categoria-pos-4 { right: 2.5vw; top: 2%; }
  .categoria-pos-5 { right: 7vw; top: 38%; }
  .categoria-pos-6 { right: 2vw; top: 74%; }
}
/* tablet e celular: uma fila acima do rótulo e outra entre os botões e o computador */
@media (max-width: 1199px) {
  .categorias {
    position: relative;
    z-index: 3;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px 22px;
    pointer-events: none;
  }
  .categorias-cima { margin-bottom: 26px; }
  .categorias-baixo { margin-top: 26px; }
}
@media (max-width: 760px) {
  .categoria-pos-2, .categoria-pos-5 { display: none; }   /* no celular, quatro */
  .categorias { gap: 8px 14px; }
  .categorias-cima { margin-bottom: 20px; }
  .categorias-baixo { margin-top: 22px; }
  .categoria.etiqueta {
    gap: 7px;
    padding: 6px 12px 6px 6px;
    font-size: 13px;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .5);
  }
  .categoria .etiqueta-icone { width: 22px; height: 22px; }
  .categoria .etiqueta-icone svg { width: 12px; height: 12px; }
}

/* parado enquanto a abertura está fora da tela (o pagina-sistema.js marca) */
.abertura.fora-da-tela .guias span::after,
.abertura.fora-da-tela .flutua {
  animation-play-state: paused;
}

/* A tela da abertura (cena 1). Ela clareia por cima do fundo
   (mix-blend-mode: lighten): o #050608 do vídeo some no degradê e não
   sobra caixa escura. Por isso a caixa não cria contexto de
   empilhamento (z-index auto): a mistura acontece com o fundo da
   seção, que é o grupo isolado. Ela sobe um pouco por baixo do texto
   (o vídeo tem muito vazio em cima) e não pega clique. */
.abertura-tela {
  z-index: auto;
  max-width: calc(1180px + 2 * max(20px, 5vw));
  margin-top: clamp(-72px, -4vw, -12px);
  pointer-events: none;
}
.tela-abertura {
  aspect-ratio: 16 / 9;
  mix-blend-mode: lighten;
  -webkit-mask-image: radial-gradient(ellipse 80% 86% at 50% 50%, #000 70%, transparent 100%);
  mask-image: radial-gradient(ellipse 80% 86% at 50% 50%, #000 70%, transparent 100%);
}
@media (max-width: 760px) {
  .abertura-tela { margin-top: -4px; padding-inline: 0; }
}
/* no computador largo, as categorias de baixo ficam soltas nos lados e
   nada separa os botões do computador: ele desce para dar uns 70 px de
   respiro entre os botões e a tampa aberta (pedido do Nícolas em 21/10) */
@media (min-width: 1200px) {
  .abertura-tela { margin-top: -20px; }
}
/* O computador ABERTO fica embaixo e é o que sobra se o vídeo não tocar.
   Com script, os dois começam invisíveis: o vídeo aparece quando toca de
   verdade (.tela--tocando) e o aberto aparece se em 2 s nada tocou, se
   der erro ou com menos movimento (.tela--parada). Sem script, só o aberto. */
.tela-abertura .tela-fim,
.tela-abertura .tela-video { transition: opacity .6s ease; }
.js .tela-abertura .tela-fim,
.js .tela-abertura .tela-video { opacity: 0; }
.js .tela-abertura.tela--tocando .tela-video { opacity: 1; transition: none; }
.js .tela-abertura.tela--parada .tela-fim { opacity: 1; }
.js .tela-abertura.tela--parada .tela-video { display: none; }
/* rede de segurança: se o pagina-sistema.js nem rodar, o aberto aparece em 6 s */
.js .tela-abertura:not(.tela--tocando) .tela-fim { animation: fim-aparece .6s ease 6s forwards; }
@keyframes fim-aparece { to { opacity: 1; } }
/* Depois de abrir, o computador balança devagar para a direita e para
   a esquerda, girando em perspectiva (pedido do Nícolas em 21/10). Uma
   entrada de 3 s leva do reto até a ponta, e daí ele vai de uma ponta à
   outra, parando de leve em cada uma, como um pêndulo. O
   pagina-sistema.js marca .tela--acabou quando a cena termina; se o
   vídeo não tocou (.tela--parada) ou sem script, balança desde o
   começo. O transform fica na própria tela, que é quem mistura com o
   fundo: a mistura continua valendo. */
.tela-abertura.tela--acabou,
.tela-abertura.tela--parada,
html:not(.js) .tela-abertura {
  transform-origin: 50% 55%;
  will-change: transform;
  animation:
    computador-entra 3s ease-in-out,
    computador-balanca 11s ease-in-out 3s infinite;
}
@keyframes computador-entra {
  from { transform: perspective(1600px) rotateY(0deg); }
  to { transform: perspective(1600px) rotateY(-6deg); }
}
@keyframes computador-balanca {
  0%, 100% { transform: perspective(1600px) rotateY(-6deg); }
  50% { transform: perspective(1600px) rotateY(6deg); }
}
.abertura.fora-da-tela .tela-abertura { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .js .tela-abertura .tela-fim { opacity: 1; transition: none; }
  .tela-abertura .tela-video { display: none; }
  .tela-abertura.tela--acabou,
  .tela-abertura.tela--parada,
  html:not(.js) .tela-abertura { animation: none; }
}

/* ---------- 3. Seis ferramentas soltas ---------- */
.ferramentas { overflow: hidden; }
.ferramentas-corpo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  align-items: center;
  gap: 48px;
}
.ferramentas-visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.pilulas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pilula {
  padding: 12px 20px;
  border-radius: var(--raio-pilula);
  font-size: 15px;
  font-weight: 700;
  color: rgba(245, 245, 247, .7);
}
/* no celular, duas ou três pílulas por linha */
@media (max-width: 760px) {
  .pilulas { gap: 8px; }
  .pilula { padding: 9px 14px; font-size: 13px; }
}
.ferramentas-seta { display: block; }
.selo-sistema {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 28px;
  border-radius: 22px;
  background: linear-gradient(180deg, #161a2b 0%, #0d1020 100%);
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 30px 80px rgba(39, 56, 191, .35);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.selo-sistema img { width: 30px; height: 30px; }

/* ---------- 4. Open Finance com IA ---------- */
.of-corpo {
  display: flex;
  flex-direction: column;
  gap: 36px;
}
.of-topo { max-width: 980px; }
.of-topo .apoio { max-width: 640px; }

.faixa-bancos {
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
}
.banco {
  width: 72px;
  height: 72px;
  border-radius: 20px;
  background: var(--texto);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .08);
}
.banco img { width: 52px; height: 52px; }

/* uma tela só, no centro; a margem negativa (sobre a largura da própria
   tela) recolhe o vazio do vídeo em cima e embaixo do aparelho. Em cima,
   só metade: sobra um respiro entre os bancos e a tela (pedido do
   Nícolas em 21/10) */
.of-tela {
  width: min(100%, 760px);
  margin: calc(min(100%, 760px) * -0.05) auto calc(min(100%, 760px) * -0.1);
}
.of-corpo .faixa-bancos { position: relative; z-index: 1; }

/* ---------- 5. O resto do seu dia (tela parada, texto rolando) ----------
   Opção A, escolhida pelo Nícolas em 21/10. No computador, os textos
   ficam à esquerda e o computador fica parado à direita (sticky), no
   meio da altura da janela; no celular, a tela fica parada em cima e
   os textos passam embaixo. O pagina-sistema.js acende o texto que
   está na altura da tela e troca a cena. Sem script: lista simples e
   a primeira tela parada, sem nada grudar.

   O fundo tem degradê (pedido do Nícolas em 21/10). Por isso a tela não
   tem fundo próprio: é a .passos-tela inteira que clareia por cima do
   degradê (mix-blend-mode: lighten), e o #050608 do vídeo some nele. */
/* as manchas somem antes das bordas de cima e de baixo, para a seção
   emendar sem degrau nas vizinhas */
.dia {
  background:
    radial-gradient(ellipse 65% 34% at 72% 36%, rgba(39, 56, 191, .24) 0%, rgba(39, 56, 191, 0) 70%),
    radial-gradient(ellipse 55% 26% at 24% 64%, rgba(39, 56, 191, .16) 0%, rgba(39, 56, 191, 0) 70%),
    radial-gradient(ellipse 40% 18% at 74% 76%, rgba(230, 57, 5, .1) 0%, rgba(230, 57, 5, 0) 70%),
    var(--fundo-alt);
}
.dia-corpo {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.passos {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  column-gap: 48px;
  container-type: inline-size;
}
.passo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  max-width: 440px;
  padding-block: 20px;
}
.passo-texto {
  font-size: clamp(1.0625rem, .15vw + 1rem, 1.125rem);
  line-height: 1.6;
  color: var(--texto-apoio);
}
/* Com script, cada texto ocupa meia janela de altura e só o da vez fica
   aceso (--aceso). No celular, o pagina-sistema.js ainda apaga o texto
   (--sumir, de 1 a 0) nos últimos 80 px antes de ele passar por baixo
   da tela, que não tem fundo. */
@property --aceso {
  syntax: "<number>";
  inherits: false;
  initial-value: .28;
}
.js .passo {
  --aceso: .28;
  min-height: 56vh;
  opacity: calc(var(--aceso) * var(--sumir, 1));
  transition: --aceso .5s ease;
}
.js .passo.ativo { --aceso: 1; }

/* A caixa da tela: a margem negativa recolhe o vazio do vídeo em cima
   (fica o aviso de "Venda aprovada" da cobrança) e embaixo do computador.
   O flex segura a margem dentro da .passos-tela, que fica com a altura
   do computador e é ela que gruda. */
.passos-tela {
  display: flex;
  flex-direction: column;
  align-self: start;
  mix-blend-mode: lighten;
}
.passos-telas {
  position: relative;
  width: 100%;
  aspect-ratio: 1060 / 1000;
  margin: -6% 0 -17%;
  -webkit-mask-image: radial-gradient(ellipse 78% 82% at 50% 50%, #000 62%, transparent 100%);
  mask-image: radial-gradient(ellipse 78% 82% at 50% 50%, #000 62%, transparent 100%);
}
.passo-tela {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .7s ease;
}
.passo-tela.ativa { opacity: 1; }
/* sem fundo próprio: quem mistura com o degradê é a .passos-tela */
.dia .passos-telas { background: transparent; }

/* computador: a tela gruda no meio da altura da janela. A altura da
   caixa é 0,71 da largura da coluna da direita, que sai da largura da
   .passos (100cqw); sem essa conta, fica a 15% do topo. */
@media (min-width: 901px) {
  .js .passos-tela {
    position: -webkit-sticky;
    position: sticky;
    top: 15vh;
    top: max(84px, calc(50vh - (100cqw - 48px) * 7 / 12 * .357));
  }
}

/* celular e tablet em pé: a tela em cima, grudada embaixo do cabeçalho;
   os textos passam por baixo dela e somem antes de encostar (--sumir) */
@media (max-width: 900px) {
  .passos { display: flex; flex-direction: column; }
  .passos-tela {
    order: -1;
    align-self: stretch;
  }
  .passos-telas { max-width: 520px; margin: -6% auto -16%; }
  .js .passos-tela {
    position: -webkit-sticky;
    position: sticky;
    top: 68px;
    z-index: 2;
  }
  .js .passo { min-height: 46vh; min-height: 46svh; }
  /* o último texto é curto: a tela solta logo depois dele, sem ficar
     parada em cima de um vão */
  .js .passo:last-child { min-height: 0; }
  .passo { max-width: none; }
}
/* janela baixa (celular deitado, notebook pequeno): nada gruda */
@media (max-height: 560px) {
  .js .passos-tela { position: relative; top: auto; }
}

/* ---------- 6. Aplicativo do cliente ---------- */
/* menos respiro em cima e embaixo do bloco (pedido do Nícolas em 21/10) */
.celular { padding-block: clamp(56px, 5vw, 72px); }
.celular-corpo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 40px;
}
@media (max-width: 900px) {
  .celular-corpo { grid-template-columns: 1fr; gap: 8px; }
}
/* a margem negativa recolhe o vazio do vídeo em cima e embaixo do
   aparelho (a regra da .tela-figura-justa não valia aqui: o margin
   desta linha passava por cima). No celular, sobra um pouco embaixo,
   antes do texto. */
.celular-tela { max-width: 560px; width: 100%; margin: -12% auto; }
@media (max-width: 900px) {
  .celular-tela { margin-bottom: -4%; }
}
.lojas {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
/* o símbolo de cada loja e o texto em duas linhas, como os selos oficiais
   (pedido do Nícolas em 21/10) */
.loja {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px 10px 14px;
  border-radius: 14px;
  text-decoration: none;
  transition: border-color .2s;
}
.loja-icone { flex: 0 0 auto; width: 24px; height: 24px; color: #ffffff; }
.loja-texto { display: flex; flex-direction: column; line-height: 1.15; }
.loja-linha { font-size: 11px; font-weight: 400; color: var(--texto-apoio); }
.loja-nome { font-size: 16px; font-weight: 700; }
.loja:hover { border-color: rgba(255, 255, 255, .3); }

/* ---------- 7. Depoimentos ---------- */
.depos { overflow: hidden; }
.depos .miolo { margin-bottom: 32px; }
.depos .t-secao { text-align: center; }

/* ---------- 8. Valores ---------- */
.precos-corpo {
  display: flex;
  flex-direction: column;
  gap: 32px;
  max-width: calc(1200px + 2 * max(20px, 5vw));
}
.chave-linha { display: flex; justify-content: center; }
.planos { --grade-espaco: 18px; align-items: stretch; }
.plano { padding: 40px; border-radius: var(--raio-g); display: flex; flex-direction: column; gap: 16px; }
.plano.feixe { border-radius: calc(var(--raio-g) + 1px); }
.plano-topo { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 28px; }
.plano-nome { font-size: 20px; letter-spacing: 0; }
/* selo centrado: o espaço da letra (letter-spacing) sobra à direita da
   última letra, então o recuo da direita é menor na mesma medida; e as
   maiúsculas da Archopada ficam altas na linha, então o recuo de cima
   desce o texto até o centro (medido nos pixels) */
.plano-selo { display: inline-flex; align-items: center; justify-content: center; height: 26px; padding: 2.5px calc(10px - .1em) 0 10px; box-sizing: border-box; font-size: 12px; font-weight: 700; line-height: 1; letter-spacing: .1em; text-transform: uppercase; color: var(--destaque); background: rgba(230, 57, 5, .1); border: 1px solid rgba(254, 121, 89, .45); border-radius: var(--raio-pilula); }
.plano-preco { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; color: var(--texto-rotulo); }
.plano-valor { font-size: clamp(2.75rem, 3vw + 1rem, 3.75rem); font-weight: 700; letter-spacing: -0.04em; line-height: 1.1; color: var(--texto); }
.plano-nota { min-height: 20px; font-size: 14px; color: var(--texto-rotulo); }
.plano-fio { width: 100%; height: 1px; margin: 0; border: 0; background: var(--borda-07); }
.plano-itens { display: flex; flex-direction: column; gap: 10px; margin: 0 0 8px; padding: 0; list-style: none; font-size: 15px; line-height: 1.5; color: rgba(245, 245, 247, .75); }
.plano .botao { margin-top: auto; }
.plano-itens .destaque { color: var(--destaque); font-weight: 700; }
@media (max-width: 520px) {
  .plano { padding: 32px 26px; }
}
.planos-todos {
  max-width: 640px;
  margin: 0 auto;
  font-size: 15px;
  line-height: 1.6;
  color: var(--texto-apoio);
  text-align: center;
  text-wrap: balance;
}
/* os três cartões alinhados por linha: o preço, a nota, a lista e o
   botão de cada um começam na mesma altura (sem subgrid,
   continuam em coluna, com o botão no pé) */
@supports (grid-template-rows: subgrid) {
  .plano {
    display: grid;
    grid-row: span 6;
    grid-template-rows: subgrid;
    row-gap: 16px;
  }
  .plano .botao { align-self: end; }
}

/* ---------- 9. Apresentação com um especialista ----------
   O formulário é o da /sistema/demonstracao/ (mesmos ids e classes; o
   demonstracao.js valida, envia e chama o quiz.js). Aqui só o visual
   escuro, igual ao formulário da Formação. Degradê leve, para o bloco
   se destacar entre os valores e as perguntas. */
.apresentacao {
  background:
    radial-gradient(ellipse 55% 60% at 88% 8%, rgba(39, 56, 191, .3) 0%, rgba(39, 56, 191, 0) 70%),
    radial-gradient(ellipse 45% 50% at 8% 100%, rgba(230, 57, 5, .12) 0%, rgba(230, 57, 5, 0) 65%),
    var(--fundo);
}
.apresentacao-miolo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(36px, 4.5vw, 64px);
  max-width: calc(1200px + 2 * max(20px, 5vw));
}
.apresentacao-texto {
  flex: 1 1 380px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.apresentacao-lista { gap: 12px; font-size: 17px; color: rgba(245, 245, 247, .78); }
.apresentacao-cartao {
  flex: 1 1 420px;
  min-width: 0;
  padding: clamp(26px, 4vw, 40px);
}
.apresentacao-form { display: flex; flex-direction: column; gap: 16px; }
.apresentacao-form[hidden],
.apresentacao .form-success[hidden] { display: none; }
.apresentacao-form-titulo { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }

.apresentacao .field { display: flex; flex-direction: column; gap: 8px; }
.apresentacao .field label {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  color: rgba(245, 245, 247, .62);
}
.apresentacao .field input {
  width: 100%;
  padding: 16px 18px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .04);
  color: var(--texto);
  font-family: inherit;
  font-size: 16px;   /* 16 px: o iPhone não dá zoom ao focar */
  line-height: 1.3;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.apresentacao .field input::placeholder { color: rgba(245, 245, 247, .35); }
.apresentacao .field input:focus {
  border-color: rgba(245, 245, 247, .5);
  box-shadow: 0 0 0 4px rgba(39, 56, 191, .35);
}
.apresentacao .field--invalid input { border-color: #ff8a6b; }
.apresentacao .field-error { font-size: 13px; line-height: 1.4; font-weight: 600; color: #ff9b80; }
.apresentacao .field-error:empty { display: none; }
/* "Você quis dizer ...?" do email-dominio.js */
.apresentacao .field-hint { display: none; font-size: 14px; line-height: 1.45; color: rgba(245, 245, 247, .8); }
.apresentacao .field-hint.is-on { display: block; }
.apresentacao .field-hint__fix {
  padding: 0;
  border: 0;
  background: none;
  color: var(--texto);
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.apresentacao-enviar { width: 100%; margin-top: 4px; }
.apresentacao-enviar[disabled] { opacity: .7; cursor: progress; }
.apresentacao .form-submit-error { font-size: 14px; line-height: 1.5; color: #ff9b80; }
.apresentacao .form-submit-error a { color: var(--texto); }
.apresentacao .form-disclaimer { font-size: 12px; line-height: 1.5; color: rgba(245, 245, 247, .4); text-align: center; }
.apresentacao .form-disclaimer a { color: rgba(245, 245, 247, .7); }

/* honeypot: fora da tela para gente e leitor de tela */
.hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* o quiz é o da página inicial (quiz.css), já feito para fundo escuro */
.apresentacao-quiz:focus { outline: none; }

.apresentacao .form-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  padding: 24px 0;
}
.apresentacao .form-success:focus { outline: none; }
.apresentacao .form-success__icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--texto);
  color: var(--tinta);
  display: flex;
  align-items: center;
  justify-content: center;
}
.apresentacao .form-success__icon svg { width: 28px; height: 28px; }
.apresentacao .form-success h3 { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
.apresentacao .form-success p { font-size: 16px; line-height: 1.6; color: var(--texto-apoio); max-width: 360px; }

/* ---------- 10. Perguntas frequentes ---------- */
.perguntas-miolo {
  max-width: calc(860px + 2 * max(20px, 5vw));
  display: flex;
  flex-direction: column;
}
.perguntas-titulo { margin-bottom: 16px; }
.pergunta {
  border-top: 1px solid var(--borda-08);
  padding: 20px 0;
}
.pergunta:last-of-type { border-bottom: 1px solid var(--borda-08); }
.pergunta summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
  cursor: pointer;
  border-radius: 6px;
}
.pergunta summary::-webkit-details-marker { display: none; }
.pergunta-mais {
  flex: 0 0 auto;
  font-size: 26px;
  font-weight: 400;
  line-height: 1;
  color: var(--destaque);
  transition: transform .3s var(--curva);
}
.pergunta[open] .pergunta-mais { transform: rotate(45deg); }
.pergunta p {
  margin-top: 14px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--texto-apoio);
}
@media (max-width: 520px) {
  .pergunta { padding: 18px 0; }
  .pergunta summary { font-size: 17px; }
}

/* ---------- 11. Fechamento ---------- */
.fechamento-miolo {
  max-width: calc(900px + 2 * max(20px, 5vw));
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 24px;
}
.fechamento-simbolo { width: 56px; height: 56px; }
.fechamento .botoes { justify-content: center; }

/* ---------- 12. Janela do vídeo do YouTube ---------- */
.video-janela {
  width: min(1100px, 92vw);
  max-width: none;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--texto);
  overflow: visible;
}
.video-janela::backdrop { background: rgba(3, 4, 5, .86); }
.video-janela-quadro {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  background: #000000;
  box-shadow: 0 40px 100px rgba(0, 0, 0, .6);
}
.video-janela-quadro iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.video-janela-fechar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0 0 10px auto;
  border: 1px solid var(--borda-16);
  border-radius: 50%;
  background: rgba(255, 255, 255, .06);
  color: var(--texto);
  cursor: pointer;
}
.video-janela-fechar:hover { border-color: rgba(255, 255, 255, .4); }
.video-janela-fechar svg { width: 20px; height: 20px; }
html.video-aberto { overflow: hidden; }

/* ---------- 13. Menos movimento ----------
   As peças da base já param sozinhas; aqui, as desta página. */
@media (prefers-reduced-motion: reduce) {
  .guias span::after { animation: none; display: none; }
  .categoria { animation: none; opacity: 1; filter: none; }
  .categoria-longe { opacity: .75; }
  .js .passo { transition: none; }
  .passo-tela { transition: none; }
  .pergunta-mais { transition: none; }
  .loja { transition: none; }
  .apresentacao .field input { transition: none; }
}