/* ==========================================================================
   Patrocínio Canastra Pass — rolagem premium e a cena do passaporte
   Identidade do APP CanastraPass. Regra da casa: animação nunca segura o
   conteúdo. Tudo aqui só enfeita depois que a página já está legível, e
   some por inteiro quando o visitante pede movimento reduzido.
   ========================================================================== */

/* ------------------------------------------------- a página do passaporte */
.passaporte-cena{margin-top:38px;perspective:1200px}
.passaporte{position:relative;display:grid;grid-template-columns:1fr 1fr;max-width:780px;margin:auto;background:linear-gradient(160deg,#f6f3ec,var(--pagina-passaporte));border-radius:28px;box-shadow:0 30px 70px rgba(7,41,44,.3),inset 0 0 0 1px rgba(7,41,44,.06);transform-origin:50% 100%;overflow:hidden}
.passaporte:before{content:"";position:absolute;left:50%;top:10px;width:40px;height:4px;transform:translateX(-50%);border-radius:99px;background:var(--passe-gold);opacity:.9}
.passaporte:after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 -30px 45px rgba(7,41,44,.05)}
.pass-pagina{position:relative;z-index:1;display:flex;flex-direction:column;gap:14px;padding:30px 26px 22px;min-height:250px}
.pass-costura{position:absolute;z-index:2;left:50%;top:14px;bottom:14px;width:0;border-left:1px dashed rgba(138,123,88,.5)}
.pass-costura:before{content:"";position:absolute;left:-4px;top:0;bottom:0;width:7px;background:linear-gradient(90deg,rgba(7,41,44,.05),transparent 45%,rgba(7,41,44,.05))}
.pass-rotulo{color:var(--terroso);font:800 .75rem/1.2 var(--label);letter-spacing:2px;text-transform:uppercase}
.pass-rotulo:after{content:"";display:block;width:34px;height:2px;border-radius:99px;margin-top:7px;background:var(--grad-progresso)}
.pass-nota{margin-top:auto;color:var(--terroso);font-size:.8rem;font-weight:600;line-height:1.5;font-family:var(--sans)}
.pass-carimbos{display:flex;align-items:center;gap:2px;padding:4px 0 6px}

/* a moldura canônica do selo, medida no app: círculo branco, borda
   hairline, sombra suave, a arte ocupa ~86%, sem crop e sem filtro */
.selo-carimbo{position:relative;display:grid;place-items:center;width:104px;height:104px;background:#fff;border:1px solid rgba(7,41,44,.08);border-radius:50%;box-shadow:0 4px 10px rgba(7,41,44,.08);flex:0 0 auto}
.selo-carimbo img{width:86%;height:86%;object-fit:contain}
.selo-carimbo.s1{transform:rotate(-8deg)}
.selo-carimbo.s2{transform:rotate(5deg);margin-left:-14px;margin-top:16px}
.selo-carimbo.s3{transform:rotate(-4deg);margin-left:-12px;margin-top:-10px}
.selo-onda{position:absolute;inset:-2px;border:2px solid var(--passe-gold);border-radius:50%;opacity:0;pointer-events:none}
.selo-vazio{display:grid;place-items:center;width:88px;height:88px;margin-left:-6px;background:#efe8d6;border:2px dashed #cdbf9e;border-radius:50%;color:var(--terroso);flex:0 0 auto}
.selo-vazio .icon-glyph{font-size:24px}
.pass-marca{align-self:flex-start;display:flex;flex-direction:column;align-items:center;gap:1px;padding:16px 26px;margin:8px 0 4px;background:var(--grad-medalha);color:#fff;border-radius:16px;transform:rotate(-2deg);box-shadow:0 10px 24px rgba(199,58,6,.35),inset 0 1px 0 rgba(255,255,255,.35)}
.pass-marca span{font:800 1.02rem/1.2 var(--label);letter-spacing:1.5px;text-transform:uppercase}
.pass-marca small{font:800 .75rem/1.2 var(--label);letter-spacing:2px;text-transform:uppercase;opacity:.85}

/* a estante de selos: só em tela larga (no celular nem baixa) */
.selos-vitrine{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px;max-width:780px;margin:26px auto 0}
.selo-mini{display:grid;place-items:center;width:62px;height:62px;background:#fff;border:1px solid rgba(7,41,44,.08);border-radius:50%;box-shadow:0 4px 10px rgba(7,41,44,.08);transition:transform .25s var(--ease-canastra)}
.selo-mini:hover{transform:translateY(-3px) scale(1.06)}
.selo-mini img{width:86%;height:86%;object-fit:contain}
.selos-vitrine-nota{flex-basis:100%;text-align:center;margin-top:8px;color:var(--passe-muted);font-size:.8rem;font-weight:600}

@media(max-width:900px){
  .selos-vitrine{display:none}
}
@media(max-width:640px){
  .passaporte{grid-template-columns:1fr}
  .pass-costura{left:14px;right:14px;top:50%;bottom:auto;width:auto;height:0;border-left:0;border-top:1px dashed rgba(138,123,88,.5)}
  .pass-costura:before{display:none}
  .pass-pagina{min-height:0;padding:26px 20px 18px}
  .selo-carimbo{width:92px;height:92px}
  .selo-vazio{width:78px;height:78px}
}

/* =================================================================
   Movimento. Tudo abaixo existe SOMENTE para quem aceita animação:
   com "movimento reduzido" nada disto se aplica e a página já nasce
   no estado final, completa e legível.
   ================================================================= */
@media(prefers-reduced-motion:no-preference){

  /* entrada do herói: o conteúdo já está na tela; isto só o assenta */
  html:not(.gsap-anima) .entra{animation:entra-rise .7s var(--ease-canastra) both}
  .e1{animation-delay:.05s}
  .e2{animation-delay:.16s}
  .e3{animation-delay:.3s}
  .e4{animation-delay:.42s}
  .e5{animation-delay:.54s}
  @keyframes entra-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

  /* etapas da jornada entram uma a uma */
  html:not(.gsap-anima) .journey.reveal .journey-item{opacity:0;transform:translateY(16px);transition:opacity .55s var(--ease-canastra),transform .55s var(--ease-canastra)}
  html:not(.gsap-anima) .journey.reveal.in-view .journey-item{opacity:1;transform:none}
  html:not(.gsap-anima) .journey.reveal.in-view .journey-item:nth-child(1){transition-delay:.05s}
  html:not(.gsap-anima) .journey.reveal.in-view .journey-item:nth-child(2){transition-delay:.18s}
  html:not(.gsap-anima) .journey.reveal.in-view .journey-item:nth-child(3){transition-delay:.31s}
  html:not(.gsap-anima) .journey.reveal.in-view .journey-item:nth-child(4){transition-delay:.44s}
  html:not(.gsap-anima) .journey.reveal.in-view .journey-item:nth-child(5){transition-delay:.57s}

  /* o passaporte abre como uma página que vira */
  html:not(.gsap-anima) .passaporte-cena.reveal .passaporte{transform:rotateX(22deg);transition:transform .9s var(--ease-canastra)}
  html:not(.gsap-anima) .passaporte-cena.reveal.in-view .passaporte{transform:rotateX(0)}

  /* os selos assentam como carimbo de borracha: os valores medidos no
     app (scale 1.55 -> 0.9 -> 1, rotate -14 -> +5 -> 0). A rotação de
     pouso fica no IMG; a inclinação de composição fica no span. */
  html:not(.gsap-anima) .passaporte-cena.reveal .selo-carimbo img{opacity:0}
  html:not(.gsap-anima) .passaporte-cena.reveal.in-view .selo-carimbo img{animation:selo-assenta .55s var(--ease-canastra) both}
  html:not(.gsap-anima) .passaporte-cena.reveal.in-view .s1 img{animation-delay:.45s}
  html:not(.gsap-anima) .passaporte-cena.reveal.in-view .s2 img{animation-delay:.85s}
  html:not(.gsap-anima) .passaporte-cena.reveal.in-view .s3 img{animation-delay:1.25s}
  html:not(.gsap-anima) .passaporte-cena.reveal.in-view .selo-onda{animation:selo-onda .5s ease-out both}
  html:not(.gsap-anima) .passaporte-cena.reveal.in-view .s1 .selo-onda{animation-delay:.75s}
  html:not(.gsap-anima) .passaporte-cena.reveal.in-view .s2 .selo-onda{animation-delay:1.15s}
  html:not(.gsap-anima) .passaporte-cena.reveal.in-view .s3 .selo-onda{animation-delay:1.55s}
  @keyframes selo-assenta{
    0%{opacity:0;transform:scale(1.55) rotate(-14deg)}
    62%{opacity:1;transform:scale(.9) rotate(5deg)}
    100%{opacity:1;transform:scale(1) rotate(0deg)}
  }
  @keyframes selo-onda{
    0%{opacity:.8;transform:scale(.55)}
    100%{opacity:0;transform:scale(1.5)}
  }

  /* o selo da marca é aplicado por último, como um carimbo laranja */
  html:not(.gsap-anima) .passaporte-cena.reveal .pass-marca{opacity:0}
  html:not(.gsap-anima) .passaporte-cena.reveal.in-view .pass-marca{animation:selar .55s var(--ease-canastra) 1.8s both}
  @keyframes selar{
    0%{opacity:0;transform:rotate(-14deg) scale(1.55)}
    65%{opacity:1;transform:rotate(-2deg) scale(.94)}
    100%{opacity:1;transform:rotate(-2deg) scale(1)}
  }

  /* benefícios e planos entram escalonados */
  html:not(.gsap-anima) .benefits-grid.reveal .benefit,html:not(.gsap-anima) .plans.reveal .plan{opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease-canastra),transform .5s var(--ease-canastra)}
  html:not(.gsap-anima) .benefits-grid.reveal.in-view .benefit,html:not(.gsap-anima) .plans.reveal.in-view .plan{opacity:1;transform:none}
  html:not(.gsap-anima) .benefits-grid.reveal.in-view .benefit:nth-child(2),html:not(.gsap-anima) .plans.reveal.in-view .plan:nth-child(2){transition-delay:.12s}
  html:not(.gsap-anima) .benefits-grid.reveal.in-view .benefit:nth-child(3),html:not(.gsap-anima) .plans.reveal.in-view .plan:nth-child(3){transition-delay:.24s}
  html:not(.gsap-anima) .benefits-grid.reveal.in-view .benefit:nth-child(4){transition-delay:.36s}
  html:not(.gsap-anima) .benefits-grid.reveal.in-view .benefit:nth-child(5){transition-delay:.48s}

  /* nas placas, a marca do comprador acende dentro da grade, card a card */
  html:not(.gsap-anima) .presence-tiers.reveal .cota-celula.minha{opacity:0;transform:scale(.6)}
  html:not(.gsap-anima) .presence-tiers.reveal.in-view .cota-celula.minha{opacity:1;transform:scale(1);transition:opacity .45s var(--ease-canastra),transform .45s var(--ease-canastra)}
  html:not(.gsap-anima) .presence-tiers.reveal.in-view .tier-1 .cota-celula.minha{transition-delay:.25s}
  html:not(.gsap-anima) .presence-tiers.reveal.in-view .tier-2 .cota-celula.minha{transition-delay:.5s}
  html:not(.gsap-anima) .presence-tiers.reveal.in-view .tier-4 .cota-celula.minha{transition-delay:.75s}
  html:not(.gsap-anima) .presence-tiers.reveal.in-view .plaque:after{animation:varredura 1.1s var(--ease-canastra) 1}
  html:not(.gsap-anima) .presence-tiers.reveal.in-view .tier-2 .plaque:after{animation-delay:.25s}
  html:not(.gsap-anima) .presence-tiers.reveal.in-view .tier-4 .plaque:after{animation-delay:.5s}
  @keyframes varredura{from{left:-58%}to{left:136%}}

  /* escolher uma cota também carimba */
  .quota.active{animation:quota-selo .28s var(--ease-canastra)}
  @keyframes quota-selo{0%{transform:scale(1.08)}60%{transform:scale(.97)}100%{transform:scale(1)}}
}

/* =================================================================
   Modo GSAP (html.gsap-anima): tela larga e sem movimento reduzido.
   Quando o nucleo liga este modo, as entradas por CSS acima saem de
   cena (o GSAP assume aqueles elementos) e o palco da placa unica
   passa a existir. No celular e com movimento reduzido esta classe
   nunca aparece, e nada deste bloco se aplica.
   ================================================================= */
html.gsap-anima .journey-band .reveal,
html.gsap-anima .presence .reveal,
html.gsap-anima .benefits-grid.reveal,
html.gsap-anima .plans.reveal,
html.gsap-anima .contato-grid.reveal{opacity:1;transform:none;transition:none}
.placa-palco{display:none}
html.gsap-anima .placas-cena{display:grid}
html.gsap-anima .placas-cena>*{grid-area:1/1}
html.gsap-anima .placa-palco{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px}
.plaque-palco{width:min(560px,58%);aspect-ratio:1.6;min-height:0}
.palco-brilho{position:absolute;z-index:2;top:-70%;bottom:-70%;left:-58%;width:22%;transform:rotate(18deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent);pointer-events:none}
.palco-legenda{display:grid;place-items:center;min-height:26px}
.palco-legenda .pc{grid-area:1/1;color:var(--passe-gold-light);font:800 .9rem/1 var(--label);letter-spacing:2px;text-transform:uppercase;opacity:0}

/* ── A HERO NO CELULAR COM A MESMA EXPERIÊNCIA (11/09/2026, 2ª versão) ──
   Só vale com `html.gsap-movel`, que o núcleo liga em tela até 900px sem
   movimento reduzido. Sem ele, o celular fica como sempre foi (poster e
   entradas por CSS). O filme OCUPA A TELA INTEIRA (cover), como no
   computador; a câmera acompanha o celular da cena (o JS anima o
   object-position); o texto mora no pé da primeira tela, por cima do véu
   escuro, e chega no fim. Fatos e escassez saem do palco para caber.
   A 1ª versão (quadro inteiro numa faixa no alto + cena desfocada embaixo)
   deixava a primeira tela vazia: o dono viu "a hero quebrada". */
.hero-ambient{display:none}
@media(max-width:900px){
  html.gsap-movel .hero{min-height:100svh}
  /* Sob o pé do filme fica o fundo da hero; sem os círculos de luz do
     desktop, que aqui apareciam como um anel no escuro. */
  html.gsap-movel .hero-photo{background:var(--grad-heroi)}
  /* O filme ocupa os 62% de cima da tela, em `cover` (assim o celular da
     cena fica grande, mas inteiro), e o pé do quadro se dissolve no escuro
     onde o texto vai morar: nem faixa pequena, nem zoom gigante, nem borda. */
  html.gsap-movel .hero-video img,html.gsap-movel .hero-video video{top:0;height:62svh;object-fit:cover;object-position:60% 50%;-webkit-mask-image:linear-gradient(180deg,#000 58%,rgba(0,0,0,.6) 78%,transparent 100%);mask-image:linear-gradient(180deg,#000 58%,rgba(0,0,0,.6) 78%,transparent 100%)}
  html.gsap-movel .hero-scrim{background:linear-gradient(0deg,rgba(4,20,22,.97) 0%,rgba(4,20,22,.9) 30%,rgba(4,20,22,.5) 50%,rgba(4,20,22,.08) 68%,rgba(4,20,22,0) 100%)}
  html.gsap-movel .hero-inner{padding-top:0;padding-bottom:28px}
  /* O bloco de texto é a primeira tela inteira, com o conteúdo no pé; o
     card de contato vem depois dele, já fora da primeira tela. */
  html.gsap-movel .hero-copy{min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:26px}
  /* Animação CSS vence estilo em linha: com `.entra` ligada, o GSAP não
     conseguia esconder o card de contato (medido: opacidade 1 desde o
     começo). No palco móvel quem manda é o GSAP, em TODAS as entradas. */
  html.gsap-movel .hero .entra{animation:none}
  html.gsap-movel .hero h1{font-size:clamp(2rem,8.4vw,3rem)}
  html.gsap-movel .hero-lead{font-size:.95rem}
  html.gsap-movel .hero-fatos,html.gsap-movel .scarcity{display:none}
  html.gsap-movel .sponsor-panel{margin-top:0}
}