/* TO EVENTOS · V9 MOBILE — composição fiel ao HeroScroll e trilho horizontal da LP.
   Escopo 0–899px. Sem distorcer mídias; desktop permanece intacto.
   Os seletores com .is-gsap-active só entram quando ScrollTrigger está disponível. */
@media (max-width:899px) {
  .hero-scroll-stage .hero-grid {
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:stretch;
    gap:clamp(14px,2.6dvh,24px);
    padding:clamp(12px,2.4dvh,28px) 0;
  }
  .hero-scroll-stage .hero-copy {flex:0 0 auto;align-self:stretch;max-width:620px}
  .hero-scroll-stage .hero-copy .eyebrow{font-size:clamp(11px,2.35vw,14px)}
  .hero-scroll-stage .hero-title{
    font-size:clamp(34px,8.1vw,58px);
    line-height:1.05;
    letter-spacing:-.048em;
    margin:clamp(10px,1.9dvh,19px) 0 clamp(10px,1.9dvh,20px);
    overflow-wrap:break-word;
  }
  .hero-scroll-stage .hero-copy>p{
    font-size:clamp(13px,3.35vw,17px);
    line-height:1.42;
    max-width:46ch;
    margin:0 0 clamp(14px,2.1dvh,22px);
  }
  .hero-scroll-stage .button-accent{min-height:44px;padding:13px 16px}
  /* A mídia final precisa permanecer em 16:9 ao lado/abaixo da copy,
     tal como a versão desktop. Ela NÃO pode desaparecer no fim do scroll. */
  .hero-scroll-stage .hero-visual{
    display:block;
    flex:0 0 auto;
    width:min(100%,540px,60dvh);
    height:auto;
    aspect-ratio:16/9;
    min-height:0;
    max-height:none;
    align-self:center;
    overflow:hidden;
  }
  .hero-scroll-stage .hero-foot{
    flex-shrink:0;
    padding-bottom:clamp(12px,2dvh,20px);
    font-size:clamp(8px,1.9vw,10px);
    gap:12px;
  }
  .hero-scroll-stage .hero-film-screen video,
  .hero-scroll-stage .hero-visual video{object-fit:contain;object-position:center}
}
@media (max-width:430px) {
  .hero-scroll-stage .hero-title{font-size:clamp(33px,8.7vw,40px)}
  .hero-scroll-stage .hero-copy>p{font-size:14px}
  .hero-scroll-stage .hero-visual{width:min(100%,58dvh)}
}
/* Scroll vertical do usuário continua controlando um trilho HORIZONTAL,
   sem esticar vídeos, achatar cards ou converter cases em uma página vertical. */
@media (max-width:899px) and (prefers-reduced-motion:no-preference) {
  .is-gsap-active #projetos .projects-pin {
    width:100%;
    height:100dvh;
    min-height:0;
    max-height:100dvh;
    overflow:hidden;
    overscroll-behavior: auto; /* gesto touch encadeia até a página e avança o GSAP */
    scroll-snap-type:none;
    touch-action:pan-y;
  }
  .is-gsap-active #projetos .projects-track {
    display:flex;
    flex-direction:row;
    flex-wrap:nowrap;
    width:max-content;
    height:100%;
    align-items:stretch;
    will-change:transform;
  }
  .is-gsap-active #projetos .project-panel {
    flex:0 0 100vw;
    width:100vw;
    height:100%;
    min-height:0;
    overflow:hidden;
    display:flex;
    align-items:stretch;
  }
  .is-gsap-active #projetos .project-panel-inner {
    width:var(--shell);
    height:100%;
    min-height:0;
    padding-top:clamp(32px,4.5dvh,55px);
    padding-bottom:clamp(50px,8dvh,78px);
    justify-content:center;
    overflow-y:auto;
    overscroll-behavior-y:auto;
    scrollbar-width:none;
  }
  .is-gsap-active #projetos .project-panel-inner::-webkit-scrollbar{display:none}
  .is-gsap-active #projetos .project-panel .section-kicker{margin-bottom:clamp(10px,2dvh,22px)}
  .is-gsap-active #projetos .project-panel .display-heading{font-size:clamp(36px,7.5vw,61px);line-height:1.06}
  .is-gsap-active #projetos .project-panel .projects-top{margin-bottom:clamp(10px,1.7dvh,17px);gap:8px}
  .is-gsap-active #projetos .project-panel .projects-top>p{font-size:clamp(12px,1.8vw,15px);line-height:1.4;margin:0}
  .is-gsap-active #projetos .case-featured{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    gap:clamp(10px,1.6dvh,16px);
    padding:0;
    margin:0;
  }
  .is-gsap-active #projetos .case-featured .case-image video{
    display:block;
    width:100%;
    max-height:clamp(135px,26dvh,310px);
    aspect-ratio:16/9;
    height:auto;
    object-fit:contain;
    background:var(--graphite);
  }
  .is-gsap-active #projetos .case-caption h3{font-size:clamp(28px,5.5vw,42px);margin:6px 0}
  .is-gsap-active #projetos .case-caption p{font-size:clamp(12px,2vw,15px);line-height:1.4;margin-bottom:8px}
  .is-gsap-active #projetos .case-caption{padding:0}
  .is-gsap-active #projetos .project-panel-cases .case-layout{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:clamp(10px,2vw,20px);
  }
  .is-gsap-active #projetos .project-panel-cases .case-layout .case-text,
  .is-gsap-active #projetos .project-panel-cases .case-layout .case-text-contrast{
    grid-column:auto;
    min-height:0;
    padding:clamp(14px,2.5vw,28px);
    gap:clamp(9px,1.7dvh,18px);
  }
  .is-gsap-active #projetos .case-text h3{font-size:clamp(27px,4.8vw,42px)}
  .is-gsap-active #projetos .case-text p{font-size:clamp(11px,1.8vw,14px);line-height:1.45}
  .is-gsap-active #projetos .case-numbers{gap:10px}
  .is-gsap-active #projetos .case-numbers b{font-size:clamp(24px,4vw,33px)}
  .is-gsap-active #projetos .project-asset-note{font-size:11px;margin:12px 0 0}
  .is-gsap-active #projetos .project-panel-video .full-video-block{
    grid-template-columns:minmax(0,1fr);
    gap:clamp(10px,2dvh,20px);
  }
  .is-gsap-active #projetos .project-panel-video .full-video-block h3{
    font-size:clamp(35px,7vw,58px);
    line-height:1.06;
    margin:5px 0 8px;
  }
  .is-gsap-active #projetos .project-panel-video .full-video-block p{
    font-size:clamp(12px,1.9vw,14px);
    line-height:1.45;
    margin:0;
  }
  .is-gsap-active #projetos .to-pdf-stage{aspect-ratio:16/9;min-height:0}
  .is-gsap-active #projetos .to-pdf-stage canvas{object-fit:contain}
  .is-gsap-active #projetos .to-pdf-controls{gap:5px;padding:7px}
  .is-gsap-active #projetos .to-pdf-controls button,
  .is-gsap-active #projetos .to-pdf-controls a{min-height:38px;padding:6px 8px;font-size:11px}
  /* Indicador superior, longe do menu touch e do WhatsApp fixos no rodapé. */
  .is-gsap-active #projetos .projects-progress{
    display:flex;
    position:absolute;
    top:max(12px,env(safe-area-inset-top));
    bottom:auto;
    z-index:2;
    padding:0;
    font-size:10px;
    gap:12px;
  }
  .is-gsap-active #projetos .projects-progress-track{max-width:none}
}
@media(max-width:599px) and (prefers-reduced-motion:no-preference){
  .is-gsap-active #projetos .project-panel-cases .case-layout{grid-template-columns:minmax(0,1fr);gap:10px}
  .is-gsap-active #projetos .project-panel-cases .case-layout .case-text,
  .is-gsap-active #projetos .project-panel-cases .case-layout .case-text-contrast{
    min-height:0;
    padding:clamp(12px,2dvh,18px) 16px;
    gap:8px;
  }
  .is-gsap-active #projetos .case-text h3{font-size:clamp(27px,7.1vw,34px)}
  .is-gsap-active #projetos .case-numbers b{font-size:26px}
}
@media(max-width:899px) and (max-height:720px) and (prefers-reduced-motion:no-preference){
  .is-gsap-active #projetos .project-panel-inner{justify-content:flex-start;padding-top:34px;padding-bottom:64px}
  .is-gsap-active #projetos .case-featured .case-image video{max-height:25dvh}
}
/* Movimento reduzido e ausência de GSAP: a fallback vertical mantém leitura e controles. */

@media(max-width:899px) and (prefers-reduced-motion:reduce) {
  .hero-scroll-stage .hero{
    height:auto;
    min-height:100svh;
    max-height:none;
    overflow:visible;
  }
  .hero-scroll-stage .hero-grid{gap:20px;padding-block:32px}
  .hero-scroll-stage .hero-copy,.hero-scroll-stage .hero-copy>*{opacity:1!important;transform:none!important}
  .hero-scroll-stage .hero-visual video{pointer-events:auto}
}

/* V9.1 — CORREÇÃO TOUCH:
   Nunca capturar o gesto vertical em um scroll interno do card fixado.
   A rolagem precisa chegar ao documento para alimentar o ScrollTrigger
   que movimenta o trilho de projetos horizontalmente. */
@media(max-width:899px) and (prefers-reduced-motion:no-preference){
  .is-gsap-active #projetos .projects-pin{
    overscroll-behavior:auto;
    touch-action:pan-y;
  }
  .is-gsap-active #projetos .project-panel-inner{
    overflow-y:visible;
    overscroll-behavior-y:auto;
    touch-action:pan-y;
  }
}
/* Em telas baixas, permitir ler todo o card, mas sem bloquear
   o scroll chaining no início/fim do conteúdo. */
@media(max-width:899px) and (max-height:700px) and (prefers-reduced-motion:no-preference){
  .is-gsap-active #projetos .project-panel-inner{
    overflow-y:auto;
    overscroll-behavior-y:auto;
  }
}