/* =========================================================================
   MANGO — a manga que acompanha o site (laboratório)

   Quase tudo aqui só vale quando o palco.js conseguiu ligar a animação: ele põe
   a classe "com-palco" no <html>. Sem ela, o site é o de sempre.

   As cores são as do site. A versão de fundo escuro (a primeira que fizemos)
   está guardada em lab-teste/versao-escura-2026-09-28.
   ========================================================================= */

.palco[hidden] { display: none; }
/* só existe para a animação; na lista parada de "como funciona" não tem função */
.passo-marca { display: none; }

/* ---------------------------------------------------------------
   ÍCONES das entregas que o diagrama não mostrava antes
   --------------------------------------------------------------- */
.ico-target { background-color: #EAF4EE; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E6B43' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); }
.ico-grid   { background-color: #EAF4EE; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E6B43' stroke-width='2' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M9 10v10'/%3E%3C/svg%3E"); }
.ico-help   { background-color: #FDEEDD; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D96C1C' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 9a3 3 0 1 1 4.2 2.7c-.8.4-1.2 1-1.2 1.9V14'/%3E%3Cpath d='M12 18h.01'/%3E%3C/svg%3E"); }
.ico-tree   { background-color: #F1F5E8; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235E8A2E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='5' cy='12' r='2'/%3E%3Ccircle cx='19' cy='5' r='2'/%3E%3Ccircle cx='19' cy='12' r='2'/%3E%3Ccircle cx='19' cy='19' r='2'/%3E%3Cpath d='M7 12h10M7 12c4 0 5-7 10-7M7 12c4 0 5 7 10 7'/%3E%3C/svg%3E"); }

/* ---------------------------------------------------------------
   AS TRÊS CAMADAS FIXAS
   Ordem, de trás para a frente: fundo das seções (−2) · aura e tela (−1) · conteúdo.
   A tela fica ATRÁS do texto: a manga nunca cobre o que está escrito.
   --------------------------------------------------------------- */
.manga-tela, .manga-aura { position: fixed; z-index: -1; pointer-events: none; }
.manga-tela { inset: 0; width: 100%; height: 100%; display: block; }
/* o mesmo clarão de cores que o topo do site sempre teve, agora andando com a fruta */
.manga-aura {
  left: 0; top: 0; width: 600px; height: 600px;
  border-radius: 50%;
  background:
    radial-gradient(closest-side at 42% 40%, rgba(124, 179, 66, .22) 0%, rgba(124, 179, 66, 0) 100%),
    radial-gradient(closest-side at 62% 58%, rgba(240, 135, 46, .20) 0%, rgba(240, 135, 46, 0) 100%),
    radial-gradient(closest-side, rgba(245, 193, 61, .24) 0%, rgba(245, 193, 61, 0) 100%);
  will-change: transform;
}
.manga-etiqueta {
  position: fixed; left: 0; top: 0; z-index: 3; pointer-events: none;
  font-family: var(--fonte-mono);
  font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  white-space: nowrap;
  padding: 6px 14px;
  border-radius: var(--raio-pill);
  background: var(--cor-principal); color: #fff;
  box-shadow: 0 6px 18px -8px rgba(10, 82, 51, .6);
  opacity: 0;
  transition: opacity .35s ease;
  will-change: transform;
}
.manga-etiqueta.visivel { opacity: 1; }

/* As seções de fundo branco escondiam a tela. O fundo desce para trás dela; a seção
   fica transparente. O visual é o mesmo de antes. */
.com-palco .section-alt,
.com-palco .strip,
.com-palco .cta { position: relative; background: transparent; }
.com-palco .section-alt::before,
.com-palco .strip::before,
.com-palco .cta::before { content: ""; position: absolute; inset: 0; z-index: -2; }
.com-palco .section-alt::before,
.com-palco .strip::before { background: var(--cor-fundo-alt); }
.com-palco .cta::before {
  background:
    radial-gradient(52% 60% at 50% 30%, rgba(245,193,61,.22) 0%, rgba(245,193,61,0) 70%),
    radial-gradient(40% 46% at 16% 70%, rgba(124,179,66,.16) 0%, rgba(124,179,66,0) 72%),
    radial-gradient(40% 46% at 86% 60%, rgba(240,135,46,.16) 0%, rgba(240,135,46,0) 72%),
    var(--cor-fundo);
}

/* ---------------------------------------------------------------
   MANGA PARADA — quando a animação não pode ligar, o topo de sempre ganha a
   foto da manga. A classe "manga-parada" é posta no <html> pelo script.js; a
   foto (assets/manga.webp) é a própria animação fotografada pelo
   lab-teste/fotografar-manga.js.
   --------------------------------------------------------------- */
.hero-manga { display: none; }
.manga-parada .hero-manga {
  display: block; position: relative;
  width: min(300px, 66vw);
  margin: 30px auto 0;
}
/* o mesmo clarão que anda com a manga animada */
.hero-manga::before {
  content: ""; position: absolute; inset: -6%;
  border-radius: 50%;
  background:
    radial-gradient(closest-side at 42% 40%, rgba(124, 179, 66, .22) 0%, rgba(124, 179, 66, 0) 100%),
    radial-gradient(closest-side at 62% 58%, rgba(240, 135, 46, .20) 0%, rgba(240, 135, 46, 0) 100%),
    radial-gradient(closest-side, rgba(245, 193, 61, .24) 0%, rgba(245, 193, 61, 0) 100%);
}
.hero-manga img {
  position: relative; display: block;
  width: 100%; height: auto;
  opacity: 0; transition: opacity .6s ease;
}
.hero-manga img.chegou { opacity: 1; }

@media (min-width: 861px) {
  /* como na animação: a manga no meio, uma frente de cada lado */
  .manga-parada .hero-title { font-size: clamp(32px, 3.6vw, 54px); }
  .manga-parada .hero-title br { display: none; }
  .manga-parada .hero-manga { grid-column: 2; width: 100%; margin: 0; justify-self: center; }
}

/* ---------------------------------------------------------------
   "?foto" — só a manga, sobre fundo transparente, para ser fotografada
   --------------------------------------------------------------- */
.so-a-manga, .so-a-manga body { background: transparent !important; }
.so-a-manga body > *:not(.manga-tela) { visibility: hidden; }

/* ---------------------------------------------------------------
   TOPO — a primeira história presa à rolagem
   --------------------------------------------------------------- */
.palco {
  position: relative;
  /* uma tela de palco + três telas e meia de rolagem para a história */
  height: 460vh;
  /* sobe por baixo da barra de navegação, que é flutuante */
  margin-top: -112px;
}
.palco-fixo {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  overflow: hidden;
}

/* Na tela larga a abertura ocupa a tela toda: título no alto, as duas frentes nas laterais
   (o meio fica livre para a manga, que o palco.js encaixa entre o título e os botões). */
.palco-abertura {
  position: absolute; z-index: 3;
  left: max(var(--gutter), calc((100vw - var(--largura)) / 2 + var(--gutter)));
  right: max(var(--gutter), calc((100vw - var(--largura)) / 2 + var(--gutter)));
  top: 0; bottom: 0;
  display: flex; flex-direction: column; justify-content: center;
  padding-top: 72px;
  text-align: center;
  pointer-events: none;
}
.palco-abertura > * { pointer-events: auto; }
.palco-titulo { font-size: clamp(32px, 3.6vw, 54px); text-wrap: balance; }
.palco-abertura .frentes {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(300px, 34vw, 520px) minmax(0, 1fr);
  align-items: center;
  margin-top: 18px;
  min-height: clamp(300px, 44vh, 460px);
}
.palco-abertura .frente-juridico { grid-column: 3; }
.palco-cta { justify-content: center; }
.palco-sub {
  margin-top: 22px;
  font-size: clamp(15.5px, 1.35vw, 18px);
  line-height: 1.6;
  color: var(--cor-texto-2);
}
.palco-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.palco-nota { margin-top: 16px; font-size: 13px; color: var(--cor-texto-3); }

/* ---- as legendas de cada cena ---- */
.cena {
  position: absolute; z-index: 3;
  top: clamp(104px, 13vh, 140px); left: 50%; translate: -50% 0;
  width: min(700px, 92vw);
  text-align: center;
  opacity: 0;
}
.cena-num {
  display: inline-block;
  font-family: var(--fonte-mono);
  font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--cor-destaque-escura);
  margin-bottom: 12px;
}
.cena h2 { font-size: clamp(26px, 3.2vw, 44px); }
.cena p {
  /* estreito de propósito: mais largo, a última linha encostava nas pílulas */
  margin: 12px auto 0; max-width: 440px;
  font-size: clamp(14.5px, 1.2vw, 16.5px);
  color: var(--cor-texto-2);
}

/* ---- o que entra (esquerda) e as quinze entregas (metade de cada lado) ---- */
.palco-entra, .palco-sai-esq, .palco-sai-dir {
  position: absolute; z-index: 3;
  width: min(30vw, 410px);
  display: flex; gap: 10px;
}
.palco-entra {
  top: 58%; translate: 0 -50%;
  right: calc(50% + clamp(190px, 17vw, 290px));
  flex-direction: column; align-items: flex-end; text-align: right;
  gap: 12px;
}
/* presas pelo topo, abaixo da legenda: centralizadas, subiam por cima do texto */
.palco-sai-esq, .palco-sai-dir { top: clamp(292px, 35vh, 340px); flex-wrap: wrap; align-items: center; }
.palco-sai-esq { right: calc(50% + clamp(190px, 17vw, 290px)); justify-content: flex-end; }
.palco-sai-dir { left: calc(50% + clamp(190px, 17vw, 290px)); }

/* quem move estas pílulas é a rolagem, não o "flutuar" do diagrama parado */
.palco .pill { animation: none; opacity: 0; }

.palco-ia {
  position: absolute; z-index: 3;
  left: 50%; top: 90%; translate: -50% -50%;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--fonte-mono);
  font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  padding: 7px 16px;
  border-radius: var(--raio-pill);
  background: var(--cor-principal); color: #fff;
  box-shadow: 0 8px 22px -8px rgba(10, 82, 51, .6);
  opacity: 0;
}
.palco-ia i { width: 7px; height: 7px; border-radius: 50%; background: var(--cor-amarelo); animation: piscar 1.1s ease-in-out infinite; }

/* ---- em que cena estamos, e o convite para rolar ---- */
.palco-pontos, .passo-marca { flex-direction: column; gap: 10px; }
.palco-pontos {
  position: absolute; z-index: 3;
  right: clamp(14px, 2.4vw, 34px); top: 50%; translate: 0 -50%;
  display: flex;
}
.palco-pontos i, .passo-marca i {
  width: 6px; height: 6px; border-radius: 6px;
  background: var(--cor-borda-forte);
  transition: height .3s ease, width .3s ease, background-color .3s ease;
}
.palco-pontos i.aceso { height: 22px; background: var(--cor-destaque); }

.palco-dica {
  position: absolute; z-index: 3;
  left: 50%; bottom: 26px; translate: -50% 0;
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--fonte-mono);
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--cor-texto-3);
}
.palco-dica::after {
  content: ""; width: 1px; height: 26px;
  background: linear-gradient(180deg, var(--cor-texto-2), rgba(86, 104, 93, 0));
  animation: descer 1.8s ease-in-out infinite;
  transform-origin: top;
}
@keyframes descer {
  0%   { transform: scaleY(0); opacity: 0; }
  40%  { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1) translateY(14px); opacity: 0; }
}

/* ---------------------------------------------------------------
   "COMO FUNCIONA" — a segunda história presa: quatro passos, um por vez
   --------------------------------------------------------------- */
.com-palco #como-funciona { padding-block: 0; height: 440vh; }
.com-palco #como-funciona > .container {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  display: flex; align-items: center;
}
.com-palco .passos-texto { width: 100%; padding-top: 84px; }
.com-palco #como-funciona .section-head { margin: 0 0 18px; max-width: none; text-align: left; }
.com-palco #como-funciona .section-title { font-size: clamp(26px, 3.2vw, 44px); }
.com-palco #como-funciona .section-sub { margin-top: 10px; }
.com-palco #como-funciona .chip { margin-bottom: 14px; }

.com-palco .passo-marca { display: flex; flex-direction: row; gap: 8px; margin-bottom: 16px; }
.com-palco .passo-marca i.aceso { width: 34px; background: var(--cor-principal); }

/* os quatro passos ocupam o MESMO lugar; a rolagem decide qual aparece */
.com-palco #como-funciona .steps {
  position: relative; display: block;
  height: clamp(300px, 46vh, 430px);
  margin: 0; padding: 0; overflow: visible;
}
.com-palco #como-funciona .step {
  position: absolute; left: 0; top: 0; width: 100%;
  grid-template-columns: 1fr 1.1fr;
  padding: clamp(18px, 2.2vw, 28px);
  gap: clamp(16px, 2.4vw, 32px);
  background: rgba(247, 246, 241, .94);
  opacity: 0;
}
.com-palco #como-funciona .step:first-child { opacity: 1; }
.com-palco #como-funciona .step-visual { order: 0; min-height: 0; }
.com-palco #como-funciona .step-text h3 { font-size: clamp(22px, 2.3vw, 28px); margin-bottom: 8px; }
.com-palco #como-funciona .step-text p { font-size: 14.5px; }
.com-palco #como-funciona .step-badge { margin-bottom: 10px; }
.com-palco #como-funciona .step-num { top: -10px; font-size: clamp(44px, 5vw, 70px); opacity: .7; }

/* ---------------------------------------------------------------
   AS QUINZE ENTREGAS — a manga fica ao fundo, e os cartões deixam vê-la
   --------------------------------------------------------------- */
.com-palco .bento-item { background: rgba(255, 255, 255, .76); }
.com-palco .bento-accent { background: linear-gradient(150deg, rgba(255, 246, 236, .86) 0%, rgba(255, 253, 249, .84) 100%); }
.com-palco .bento-dark { background: linear-gradient(140deg, rgba(14, 107, 67, .93) 0%, rgba(47, 156, 87, .93) 100%); }

/* ---------------------------------------------------------------
   TELA LARGA — a manga fica AO LADO do conteúdo, e troca de lado a cada seção
   (o mesmo corte de 1100px que o palco.js usa para posicioná-la)
   --------------------------------------------------------------- */
@media (min-width: 1100px) {
  /* problema: texto à esquerda, as folhas soltas à direita */
  .com-palco #problema .section-head,
  .com-palco #problema .pain-grid { width: 57%; max-width: none; margin-inline: 0 auto; text-align: left; }
  .com-palco #problema .pain-grid { grid-template-columns: 1fr 1fr; }

  /* recursos: a manga à esquerda, os três cartões empilhados à direita */
  .com-palco #recursos .section-head,
  .com-palco #recursos .grid { width: 58%; max-width: none; margin-inline: auto 0; text-align: left; }
  .com-palco #recursos .grid { grid-template-columns: 1fr; gap: 14px; }
  .com-palco #recursos .card {
    display: grid; grid-template-columns: .95fr 1fr;
    grid-template-areas: "visual titulo" "visual texto";
    column-gap: 22px; align-items: center;
    padding: 14px 24px 14px 14px;
    background: rgba(247, 246, 241, .92);
  }
  /* altura livre: com 196px fixos o cartão da documentação perdia a primeira linha */
  .com-palco #recursos .card-visual { grid-area: visual; margin: 0; height: auto; min-height: 196px; }
  .com-palco #recursos .card h3 { grid-area: titulo; align-self: end; padding: 0; }
  .com-palco #recursos .card p { grid-area: texto; align-self: start; padding: 0; }

  /* como funciona: texto à esquerda, a manga à direita */
  .com-palco .passos-texto { width: 57%; }

  /* perguntas: o "?" à esquerda, a lista numa coluna só à direita */
  .com-palco #faq .section-head,
  .com-palco #faq .faq { width: 58%; max-width: none; margin-inline: auto 0; text-align: left; }
  .com-palco #faq .faq { grid-template-columns: 1fr; }

  /* chamada final: espelha a abertura — texto à esquerda, manga à direita */
  .com-palco .cta { text-align: left; }
  .com-palco .cta-inner { max-width: var(--largura); }
  .com-palco .cta-inner > * { max-width: 56%; margin-inline: 0; }
  .com-palco .cta .hero-cta { justify-content: flex-start; }
}

/* ---------------------------------------------------------------
   TELAS MÉDIAS — o título estreita para não encostar na fruta
   --------------------------------------------------------------- */
@media (max-width: 1180px) {
  .palco-entra, .palco-sai-esq, .palco-sai-dir { width: min(30vw, 330px); gap: 8px; }
  .palco .pill { font-size: 12.5px; padding: 8px 14px 8px 10px; }
  .palco .pill-ico { width: 24px; height: 24px; background-size: 13px; }
}

/* ---------------------------------------------------------------
   CELULAR E TABLET EM PÉ — tudo em coluna: fruta no alto, legenda, pílulas
   (o mesmo corte de 860px que o palco.js usa para posicionar a fruta)
   --------------------------------------------------------------- */
@media (max-width: 860px) {
  .palco { margin-top: -104px; }

  .palco-abertura {
    left: var(--gutter); right: var(--gutter); width: auto;
    top: 92px; bottom: auto; padding-top: 0;
    display: block;
    text-align: center;
  }
  /* as duas frentes também no celular, em cartões compactos (regras em styles.css) */
  .palco-abertura .frentes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; min-height: 0; margin-top: 14px; }
  .palco-abertura .frente-juridico { grid-column: auto; }
  .palco-abertura .frente { background: rgba(255, 255, 255, .86); backdrop-filter: blur(2px); }
  .palco-titulo { font-size: clamp(27px, 7.4vw, 44px); }
  .palco-sub { margin-top: 14px; font-size: 14.5px; line-height: 1.5; }
  .palco-cta { justify-content: center; margin-top: 20px; gap: 10px; }
  .palco-cta .btn { padding: 12px 20px; font-size: 14px; }
  .palco-nota { display: none; }

  .cena { top: 45%; }
  .cena h2 { font-size: clamp(22px, 6vw, 32px); }
  .cena p { font-size: 14px; margin-top: 8px; }
  .cena-num { margin-bottom: 8px; }

  .palco-entra {
    left: var(--gutter); right: var(--gutter); width: auto;
    top: 66%; translate: none;
    flex-direction: row; flex-wrap: wrap;
    justify-content: center; align-items: center; text-align: left;
    gap: 8px;
  }
  .palco .pill { font-size: 12px; padding: 7px 12px 7px 8px; gap: 8px; }
  .palco .pill b { font-size: 12.5px; }
  .palco .pill small { font-size: 10.5px; }
  .palco .pill-ico { width: 22px; height: 22px; border-radius: 7px; background-size: 12px; }

  /* As quinze entregas cabem no celular como etiquetas: sem ícone e sem a segunda linha.
     Os dois lados viram um bloco só, abaixo da legenda. */
  .palco-sai {
    position: absolute; z-index: 3;
    left: 12px; right: 12px; top: 61%;
    display: flex; flex-wrap: wrap; justify-content: center; gap: 6px;
  }
  .palco-sai-esq, .palco-sai-dir { display: contents; }
  .palco-sai .pill { font-size: 11.5px; padding: 6px 11px; }
  .palco-sai .pill b { font-size: 11.5px; }
  .palco-sai .pill-ico, .palco-sai .pill small { display: none; }

  .palco-ia { top: 41%; }
  .palco-pontos { right: 10px; }
  .palco-dica { bottom: 16px; }
  /* na tela pequena a etiqueta flutuante cai em cima do título; o cartão do passo já diz o mesmo */
  .manga-etiqueta { display: none; }

  /* como funciona: a manga no alto, o título e o passo embaixo */
  .com-palco #como-funciona > .container { align-items: flex-end; padding-bottom: 22px; }
  .com-palco .passos-texto { padding-top: 0; }
  .com-palco #como-funciona .section-head { text-align: center; margin-bottom: 12px; }
  .com-palco #como-funciona .section-sub,
  .com-palco #como-funciona .chip,
  .com-palco #como-funciona .step-visual { display: none; }
  .com-palco .passo-marca { justify-content: center; margin-bottom: 12px; }
  .com-palco #como-funciona .steps { height: 218px; }
  .com-palco #como-funciona .step { grid-template-columns: 1fr; flex: none; padding: 18px; }
}

/* celular de tela baixa: a legenda perde o parágrafo para não encostar nas pílulas */
@media (max-width: 860px) and (max-height: 780px) {
  .cena p { display: none; }
  .cena { top: 47%; }
}

/* telas baixas (notebook pequeno): menos respiro vertical */
@media (max-height: 760px) and (min-width: 861px) {
  .palco-titulo { font-size: clamp(28px, 3vw, 42px); }
  .palco-abertura { padding-top: 64px; }
  .palco-abertura .frentes { min-height: clamp(240px, 40vh, 360px); margin-top: 10px; }
  .palco-cta { margin-top: 16px; }
  .palco-nota { display: none; }
  .cena { top: 92px; }
  .cena p { display: none; }
  .palco-sai-esq, .palco-sai-dir { top: 222px; gap: 7px; }
  .palco .pill { font-size: 12.5px; padding: 7px 13px 7px 9px; }
  .palco .pill-ico { width: 24px; height: 24px; background-size: 13px; }
  .com-palco #como-funciona .section-sub { display: none; }
  .com-palco .passos-texto { padding-top: 70px; }
}