/* =========================================================
   Linqer — Site Institucional
   Fiel ao Figma "Site Institucional - Linqer" (node 767-7520)
   Referência de largura do design: 1920px
   ========================================================= */

/* ---------- Tokens (variáveis do Figma) ---------- */
:root{
  --white:#ffffff;
  --base-100:#ffffff;
  --base-400:#555e67;
  --base-500:#31373d;
  --base-600:#1d1f20;
  --gray-707:#707070;
  --ink-131:#131212;
  --ink:#050816;          /* azul-preto do texto/gradiente */
  --blue:#0048ff;
  --muted:#4a5565;         /* corpo de texto */
  --muted-dark:#9098a0;    /* corpo de texto sobre fundo escuro */
  --hero-bg:#e1eaff;
  --cut:#f7f7f7;           /* corte claro abaixo do gradiente / fundo da seção 2 */
  --dark-faq:#0b0b0b;      /* fundo do FAQ */
  --card-border:#d1d1d1;
  --card-bg:#f7f7f9;
  --card-fill:#fefefe;
  --rule:rgba(5,8,22,.10);

  --font:'Oxygen',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-alt:'Poppins',var(--font);
  --font-body:'Inter',var(--font);

  /* escala: 1 unidade do Figma = 1px até 1920, encolhe proporcionalmente abaixo */
  --page:1920;
  --gutter:clamp(20px,4vw,80px);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  font-family:var(--font);
  color:var(--ink);
  background:var(--white);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;}
h1,h2,h3,h4,p,blockquote,figure,ul{margin:0;}
ul{padding:0;list-style:none;}

/* placeholder visual enquanto os assets reais do Figma não entram */
.showcase__img,.slide__media img,.pane__media img{
  background:
    linear-gradient(135deg,rgba(0,72,255,.06),rgba(0,72,255,.02)),
    repeating-linear-gradient(45deg,rgba(0,0,0,.045) 0 10px,transparent 10px 20px);
  border-radius:inherit;
  min-height:1px;
}

/* ---------- Utilitários ---------- */
.gradient-text{
  background-image:linear-gradient(155deg,#0048ff 3%,#050816 64%,#050816 101%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
}
.gradient-text strong{font-weight:700;}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  height:48px;padding:14px 20px;border-radius:52px;
  font-size:16px;line-height:1.1;text-align:center;
  transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,opacity .3s;
  will-change:transform;
}
.btn:hover{transform:translateY(-2px);}
.btn--dark{background:#000;color:#fff;min-width:131px;}
.btn--dark:hover{box-shadow:0 10px 26px rgba(0,0,0,.28);}
.btn--blue{background:var(--blue);color:#fff;width:344px;max-width:100%;letter-spacing:.02em;}
.btn--blue:hover{box-shadow:0 12px 30px rgba(0,72,255,.35);}

/* fundo "OC 02" — blobs + linhas verticais + ruído */
.oc-gradient{position:absolute;inset:0;}
/* Hero: campo azul bem claro, blob azul saturado saindo do canto inferior
   esquerdo e blob laranja do canto inferior direito — ambos cortados
   na base do gradiente (y = 816 do Figma). */
.oc-gradient--hero{
  background:
    radial-gradient(40% 58% at 14% 108%,rgba(8,68,255,1) 0%,rgba(18,78,255,.82) 34%,rgba(40,100,255,0) 76%),
    radial-gradient(38% 54% at 38% 116%,rgba(35,95,255,.9) 0%,rgba(35,95,255,0) 72%),
    radial-gradient(30% 48% at 102% 104%,rgba(231,132,54,1) 0%,rgba(233,145,70,.78) 34%,rgba(235,150,80,0) 76%),
    radial-gradient(52% 74% at 20% 12%,rgba(255,255,255,.98) 0%,rgba(255,255,255,0) 68%),
    radial-gradient(44% 66% at 78% 26%,rgba(255,255,255,.72) 0%,rgba(255,255,255,0) 72%),
    linear-gradient(180deg,#eef3fe 0%,#dfe8fd 100%);
}
.oc-gradient--cta{
  background:
    radial-gradient(52% 84% at 0% 92%,rgba(25,85,255,1) 0%,rgba(25,85,255,0) 62%),
    radial-gradient(42% 74% at 100% 96%,rgba(233,140,66,1) 0%,rgba(233,140,66,0) 62%),
    radial-gradient(50% 70% at 40% 6%,rgba(255,255,255,.92) 0%,rgba(255,255,255,0) 74%),
    var(--hero-bg);
}
.oc-vlines{
  position:absolute;left:12.36%;right:12.36%;top:0;bottom:0;
  background-image:repeating-linear-gradient(to right,rgba(0,0,0,.055) 0 1px,transparent 1px 180.88px);
  opacity:.6;
}
.oc-noise{
  position:absolute;inset:0;opacity:.2;mix-blend-mode:color-burn;pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='300' height='300' filter='url(%23n)' opacity='.55'/></svg>");
  background-size:300px 300px;
}

/* =========================================================
   NAV
   ========================================================= */
.nav{
  position:fixed;inset:0 0 auto;z-index:60;
  padding:63px var(--gutter) 0;
  transition:padding .4s cubic-bezier(.2,.8,.2,1),background-color .4s,backdrop-filter .4s,box-shadow .4s;
}
.nav__inner{
  width:min(1135.84px,100%);margin:0 auto;
  height:48px;display:flex;align-items:center;justify-content:center;gap:clamp(24px,9vw,172px);
}
.nav__logo img{height:100px;width:auto;}
.nav__menu{display:flex;align-items:center;justify-content:space-between;width:483px;height:40px;font-size:16px;line-height:1.1;}
.nav__pill{
  display:inline-flex;align-items:center;gap:8px;height:40px;padding:10px;
  border:1px solid #000;border-radius:100px;
  transition:background-color .3s,color .3s;
}
.nav__pill:hover{background:#000;color:#fff;}
.nav__link{position:relative;display:inline-flex;align-items:center;gap:8px;}
.nav__link::after{
  content:"";position:absolute;left:0;bottom:-4px;height:1px;width:100%;
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform .35s cubic-bezier(.2,.8,.2,1);
}
.nav__link:hover::after{transform:scaleX(1);transform-origin:left;}
.nav__chev{transition:transform .3s;}
.nav__link--drop:hover .nav__chev{transform:translateY(2px);}

/* O menu fica fixo APENAS na primeira seção (hero). Ao terminar o hero
   ele sai de cena e não volta até você rolar de volta para o topo. */
.nav{transform:translateY(0);opacity:1;
  transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .35s,padding .4s,background-color .4s,backdrop-filter .4s,box-shadow .4s;}
.nav.is-stuck{
  padding-top:14px;padding-bottom:14px;
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 1px 0 rgba(0,0,0,.06);
}
.nav.is-gone{transform:translateY(-130%);opacity:0;pointer-events:none;}

/* =========================================================
   0. PINNED HORIZONTAL SCROLL — hero → "tudo que você precisa"
   Sem JS/mobile: os dois painéis apenas empilham normalmente.
   Com JS + desktop: o track vira uma faixa 200% de largura e o
   scroll vertical é traduzido em xPercent (ver initHeroToSection2
   em main.js), que engata o pin no wrapper .h2h.
   ========================================================= */
.h2h{position:relative;}
.h2h__track{display:block;}
.h2h__panel{width:100%;}

@media (min-width:901px){
  .js-anim .h2h{position:relative;overflow:hidden;}
  .js-anim .h2h__track{display:flex;width:200%;}
  .js-anim .h2h__panel{width:50%;flex:none;}
}

/* =========================================================
   1. HERO
   ========================================================= */
.hero{position:relative;z-index:2;padding:0 var(--gutter);height:100svh;min-height:680px;background:var(--cut);}
.hero__bg{position:absolute;left:0;right:0;top:0;height:100%;overflow:hidden;}
.hero__content{position:relative;z-index:2;max-width:1252px;margin:0 auto;padding-top:217px;}
.hero__title{
  font-size:56px;line-height:1.05;letter-spacing:-1.68px;text-align:center;
  font-weight:400;max-width:1079px;margin:0 auto;min-height:59px;
}
.hero__title strong,.tw__bold{font-weight:700;}
.tw__plain,.tw__bold{white-space:pre-wrap;}
.hero__caret{font-weight:300;}
.js-anim .hero__caret{animation:caret 1.05s steps(1,end) infinite;}
@keyframes caret{0%,49%{visibility:visible;}50%,100%{visibility:hidden;}}
.sr-only{
  position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

/* ---- indicador de "role pra continuar", usado nas seções pinadas
   (hero e o carrossel de tópicos) — só aparece no desktop com JS,
   onde o scroll fica preso até a animação terminar. ---- */
.scroll-cue{display:none;}
@media (min-width:901px){
  .js-anim .scroll-cue{
    display:flex;flex-direction:column;align-items:center;gap:10px;
    position:absolute;left:50%;bottom:36px;transform:translateX(-50%);
    z-index:4;color:rgba(5,8,22,.38);pointer-events:none;
    transition:opacity .4s ease;
  }
  .js-anim .scroll-cue.is-hidden{opacity:0;}
  .scroll-cue__label{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;}
  .scroll-cue__icon{display:block;}
  .js-anim .scroll-cue__dot{animation:scrollCueDot 1.7s ease-in-out infinite;}
}
@keyframes scrollCueDot{
  0%{transform:translateY(0);opacity:1;}
  55%{transform:translateY(11px);opacity:0;}
  56%{transform:translateY(0);opacity:0;}
  100%{transform:translateY(0);opacity:1;}
}

.hero__stage{position:relative;margin-top:41px;}
.hero__grid{
  position:absolute;left:50%;top:0;transform:translateX(-50%);
  width:1252px;max-width:100%;height:668px;pointer-events:none;
  background-image:
    repeating-linear-gradient(to right,rgba(5,8,22,.035) 0 1.22px,transparent 1.22px 90.26px),
    repeating-linear-gradient(to bottom,rgba(5,8,22,.028) 0 1.14px,transparent 1.14px 30.21px);
}

.showcase{position:relative;width:916px;max-width:100%;margin:0 auto;}
.showcase__shadow{
  position:absolute;left:50%;top:0;transform:translateX(-50%);
  width:906px;max-width:98%;height:100%;border-radius:14px;
  box-shadow:0 42px 90px rgba(5,8,22,.22),0 8px 26px rgba(5,8,22,.10);
}
.showcase__frame{position:relative;border-radius:14px;overflow:hidden;background:#fff;}
.showcase__img{width:100%;height:auto;}

/* =========================================================
   2. TUDO QUE VOCÊ PRECISA  (slide 01→06 travado na tela)
   ========================================================= */
.s2{position:relative;z-index:1;background:var(--cut);padding:0 0 126px;}
/* ---- painel em tela cheia com a headline, no mesmo branco do resto da seção ---- */
.s2__intro{
  position:relative;background:#050816;
  height:100svh;min-height:560px;
  display:flex;align-items:center;justify-content:center;
  padding:0 var(--gutter);
}
.s2__intro-inner{width:100%;}
.s2__title{
  font-size:56px;line-height:1.21;letter-spacing:-1.68px;text-align:center;font-weight:400;
  max-width:1030px;margin:0 auto;
}
.s2__line{
  display:block;
  background-image:linear-gradient(155deg,#ffffff 3%,#8b93a6 70%,#8b93a6 101%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.s2__title strong{font-weight:700;}
.js-anim .s2__line{
  opacity:0;transform:translateY(30px);
  transition:opacity .95s cubic-bezier(.2,.8,.2,1),transform .95s cubic-bezier(.2,.8,.2,1);
}
.js-anim .s2__line:nth-child(2){transition-delay:.28s;}
.js-anim .s2__intro.is-in .s2__line{opacity:1;transform:none;}

/* ---- slides de apresentação 01→06: cada um dividido ao meio (print +
   texto). Base = empilhado, acessível, sem JS (ver initSlides em main.js
   pro comportamento com pin). Só no desktop com JS os 6 ficam empilhados
   por cima um do outro e a transição entre eles varia de direção. ---- */
.slides{margin-top:0;}
.slides__pin{display:block;}
.band{display:block;}
.band__track{display:block;}

.slide{
  display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:64px;
  padding:60px var(--gutter);
  border-top:1px solid var(--rule);
}
.slide:last-child{border-bottom:1px solid var(--rule);}

.slide__media{
  position:relative;width:100%;aspect-ratio:862/531;
  overflow:hidden;border-radius:14px;box-shadow:8px 10px 41.2px rgba(0,0,0,.06);background:#fff;
}
.slide__media img{width:100%;height:100%;object-fit:cover;object-position:center top;}

.slide__copy{display:flex;flex-direction:column;align-items:flex-start;text-align:left;}
.band__heading{
  font-size:56px;line-height:1.21;letter-spacing:-1.68px;font-weight:700;max-width:760px;margin-top:16px;
  background-image:linear-gradient(155deg,#0048ff 3%,#050816 64%,#050816 101%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.band__text{font-size:26px;line-height:1.35;color:var(--muted);max-width:640px;margin-top:16px;}
.band__text .sentence{display:inline-block;}

/* ---- desktop + JS: pin + cada tópico empilhado por cima do outro —
   a transição entre eles varia de direção (esquerda, direita, baixo),
   ver initSlides em main.js. Ao sair do último, o pin solta e o scroll
   volta a descer normalmente pros "8 quadros" abaixo. ---- */
@media (min-width:901px){
  .js-anim .slides__pin{height:100svh;min-height:640px;overflow:hidden;position:relative;}
  .js-anim .band{position:relative;width:100%;height:100%;}
  .js-anim .band__track{position:relative;width:100%;height:100%;}
  .js-anim .slide{
    position:absolute;inset:0;width:100%;height:100%;
    padding:0 var(--gutter);border:0;will-change:transform;
  }
  .js-anim .slide__media{opacity:0;max-width:600px;}
  .js-anim .slide__copy{align-items:center;text-align:center;}
}

/* ---- os 8 quadros ---- */
.cards{
  width:min(1166px,100%);margin:119px auto 0;padding:0 var(--gutter);
  display:grid;grid-template-columns:repeat(4,1fr);gap:15px 12px;
}
.card{
  border-radius:12px;border:1px solid var(--card-border);background:var(--card-bg);
  padding:21px 15px 48px;color:#000;
  transition:transform .45s cubic-bezier(.2,.8,.2,1),border-color .35s,background-color .35s,box-shadow .45s;
  will-change:transform;
}
.card--filled{background:var(--card-fill);border-color:var(--card-border);box-shadow:5px 4px 33px rgba(0,0,0,.03);}
.card__icon{display:block;width:20px;height:20px;margin-bottom:11px;color:#000;transition:color .35s;}
.card__icon svg{width:20px;height:20px;}
.card__title{font-size:22px;line-height:26px;letter-spacing:-.2px;font-weight:400;max-width:224px;color:#000;}
.card__text{margin-top:11px;font-size:16px;line-height:24px;letter-spacing:-.2px;color:var(--muted);}

/* destaque no hover */
.card:hover,.card:focus-within{
  transform:translateY(-6px);
  background:#fff;border-color:rgba(0,72,255,.45);
  box-shadow:0 18px 40px rgba(5,8,22,.10),0 2px 6px rgba(5,8,22,.04);
}
.card:hover .card__icon,.card:focus-within .card__icon{color:var(--blue);}

/* =========================================================
   3. PARA QUEM É O CRM LINQER
   ========================================================= */
.s3{background:#fff;padding:90px var(--gutter) 0;}
.s3__title{
  font-size:56px;line-height:1.06;letter-spacing:-1.232px;text-align:center;
  font-weight:300;color:var(--ink);max-width:1035px;margin:0 auto;
}
.s3__title strong{font-weight:700;}

.s3__grid{
  width:min(1169.5px,100%);margin:154px auto 0;
  display:flex;gap:17.5px;align-items:start;
}
/* painel ativo (hover) cresce, os outros dois encolhem — mesma proporção
   64%/18%/18% do layout original, agora controlada por flex-grow animável */
.pane{min-width:0;flex:1 1 0;flex-grow:1;transition:flex-grow .6s cubic-bezier(.2,.8,.2,1);}
.pane.is-open{flex-grow:3.94;}
/* a altura da imagem acompanha o estado (aberto = baixo e largo, fechado =
   alto e estreito), não a classe --wide/--tall original de cada painel */
.pane__media{border-radius:20px;overflow:hidden;height:568px;transition:height .6s cubic-bezier(.2,.8,.2,1);}
.pane.is-open .pane__media{height:342px;}
.pane__media img{width:100%;height:100%;object-fit:cover;}
.pane__body{padding-top:24px;}
.pane__title{
  display:flex;align-items:center;gap:12px;
  font-size:23.06px;line-height:33.6px;font-weight:700;color:var(--ink);
}
.dot{width:9.67px;height:9.67px;border-radius:50%;background:var(--blue);flex:none;display:inline-block;}
.pane__body p,.pane__body li{font-family:var(--font-body);font-size:18px;line-height:24px;color:var(--muted);}
.pane__body p{margin-top:19px;}
.pane__body ul{margin-top:24px;list-style:disc;padding-left:27px;}
.pane__body li{margin-bottom:0;}
/* só o painel aberto mostra o texto completo; os fechados mostram só o dot */
.pane__body--full{display:none;}
.pane.is-open .pane__body--full{display:block;}
.pane__body--slim{padding-top:28px;}
.pane.is-open .pane__body--slim{display:none;}

/* depoimento */
.testimonial{
  position:relative;width:min(1181px,100%);margin:170px auto 0;
  display:flex;align-items:center;justify-content:center;gap:24px;padding-bottom:161px;
}
.testimonial__body{display:flex;flex-direction:column;align-items:center;gap:24px;width:610px;max-width:100%;}
.testimonial__avatar{width:44px;height:44px;border-radius:50%;}
.testimonial blockquote{font-size:22px;line-height:32px;letter-spacing:-.3px;text-align:center;color:var(--base-600);}
.testimonial__name{font-size:14px;line-height:20px;letter-spacing:-.1px;text-align:center;color:var(--base-500);}
.testimonial__role{font-size:14px;line-height:20px;letter-spacing:-.1px;text-align:center;color:var(--base-400);margin-top:2px;}
.play{
  width:60px;height:60px;border-radius:38px;padding:18px;
  background:rgba(255,255,255,.92);color:#111;
  display:grid;place-items:center;
  box-shadow:0 10px 30px rgba(5,8,22,.22);
  transition:transform .35s cubic-bezier(.2,.8,.2,1),background-color .3s;
}
.play svg{width:24px;height:24px;}
.play--ghost{position:static;transform:none;background:#e1e1e1;box-shadow:none;flex:none;}
.play--ghost:hover{transform:scale(1.08);background:#d6d6d6;}

/* =========================================================
   4. FAQ
   ========================================================= */
.faq{background:var(--dark-faq);color:#fff;padding:69px var(--gutter) 156px;}
.faq__head{display:flex;flex-direction:column;align-items:center;gap:16px;}
.tag{
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid #626262;border-radius:4px;padding:12px 30px;
  font-size:20px;line-height:1.65;letter-spacing:.3px;color:#d9d9d9;
}
.faq__title{
  font-size:56px;line-height:1.3;text-align:center;font-weight:400;margin-top:0;
  background-image:linear-gradient(97deg,#fff 50%,#878787 86%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.faq__title-light{font-weight:300;}
.faq__title strong{font-weight:700;}

.faq__list{width:min(1171px,100%);margin:100px auto 0;display:flex;flex-direction:column;gap:16px;}
.faq__item{border-bottom:1px solid rgba(255,255,255,.2);}
.faq__item summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  min-height:54.88px;padding:17px 0;
  font-size:16px;line-height:1.5;font-weight:700;color:#fff;
  transition:color .3s;
}
.faq__item summary::-webkit-details-marker{display:none;}
.faq__item summary>span:first-child{padding-left:31.76px;}
.faq__item:hover summary{color:#cfd6ff;}
.faq__chev{flex:none;display:inline-flex;color:#fff;transition:transform .35s cubic-bezier(.2,.8,.2,1);}
.faq__item[open] .faq__chev{transform:rotate(180deg);}
.faq__answer{overflow:hidden;padding:0 31.76px 20px;}
.faq__answer p{font-size:16px;line-height:1.6;color:rgba(255,255,255,.66);}

/* =========================================================
   5. CTA
   ========================================================= */
.cta{position:relative;min-height:819px;display:flex;align-items:center;padding:120px var(--gutter);overflow:hidden;}
.cta__bg{position:absolute;inset:0;}
.cta__content{position:relative;z-index:2;width:min(1079px,100%);margin:0 auto;text-align:center;}
.cta__title{font-size:56px;line-height:1.05;letter-spacing:-1.68px;font-weight:400;
  background-image:linear-gradient(137deg,#0048ff 3%,#050816 64%,#050816 101%);
  -webkit-background-clip:text;background-clip:text;color:transparent;}
.cta__text{font-size:24px;line-height:1.2;color:var(--muted);width:min(743px,100%);margin:0 auto;}
.cta__text:first-of-type{margin-top:114px;}
.cta__text+.cta__text{margin-top:29px;}
.cta__text b{font-weight:700;}
.btn--blue{margin-top:82px;}
.cta__note{font-size:24px;line-height:1.2;color:var(--muted);width:min(743px,100%);margin:43px auto 0;}

/* =========================================================
   6. FOOTER
   ========================================================= */
.footer{background:var(--ink-131);color:#fff;padding:88px var(--gutter) 40px;font-family:var(--font-alt);}
.footer__menu{width:min(1269px,100%);margin:0 auto;display:flex;gap:135px;align-items:flex-start;justify-content:center;}
.footer__brand{flex:0 0 341px;max-width:100%;display:flex;flex-direction:column;gap:24px;}
.footer__brand img{height:39.42px;width:auto;}
.footer__brand p{font-size:16px;line-height:1.5;color:#fff;}
.footer__cols{display:flex;gap:40px;}
.footer__col{width:117px;}
.footer__col--wide{width:165px;}
.footer__col-title{font-size:18px;font-weight:500;line-height:1.5;color:#fff;}
.footer__col ul{margin-top:16px;display:flex;flex-direction:column;gap:16px;}
.footer__col a{font-size:16px;line-height:1.5;color:var(--gray-707);transition:color .3s;}
.footer__col a:hover{color:#fff;}
.footer__copy{margin-top:152px;text-align:center;font-size:16px;line-height:1.5;color:var(--gray-707);}

/* =========================================================
   ANIMAÇÕES — estados iniciais
   (só valem quando o JS marca o documento com .js-anim)
   ========================================================= */
.js-anim [data-reveal],
.js-anim [data-card],
.js-anim .word{will-change:transform,opacity;}

.js-anim [data-reveal]{opacity:0;transform:translateY(28px);}
.js-anim [data-card]{opacity:0;transform:translateY(42px) scale(.92);}
.word{display:inline-block;}
.js-anim .word{opacity:0;transform:translateY(26px);filter:blur(6px);}

@media (prefers-reduced-motion:reduce){
  .js-anim [data-reveal],.js-anim [data-card],.js-anim .word{opacity:1!important;transform:none!important;filter:none!important;}
  .scroll-cue{display:none!important;}
  *{animation-duration:.01ms!important;transition-duration:.01ms!important;}
}

/* =========================================================
   RESPONSIVO
   ========================================================= */
@media (max-width:1400px){
  .band__heading{font-size:28px;}
  .band__text{font-size:20px;}
  .footer__menu{gap:60px;}
}

@media (max-width:1180px){
  .hero__title,.s2__title,.cta__title,.faq__title,.s3__title{font-size:clamp(32px,4.4vw,56px);letter-spacing:-.03em;}
  .hero__title{min-height:1.05em;}
  .cta__text,.cta__note{font-size:20px;}
  .nav__inner{gap:clamp(16px,4vw,60px);}
  .nav__menu{width:auto;gap:28px;}
  .band__heading{font-size:clamp(28px,4.4vw,56px);letter-spacing:-.03em;}
  .band__text{font-size:20px;}
  .cards{grid-template-columns:repeat(2,1fr);}
  .pane__media{height:420px;}
  .pane.is-open .pane__media{height:260px;}
  .footer__menu{flex-direction:column;gap:56px;}
  .footer__cols{flex-wrap:wrap;gap:32px 40px;}
  .footer__copy{margin-top:80px;}
}

/* --- abaixo de 900px o slide deixa de travar: os 6 blocos empilham --- */
@media (max-width:900px){
  .hero{height:auto;padding-bottom:60px;}
  .hero__content{padding-top:150px;}
  .hero__bg{height:100%;}

  .s2{padding-top:0;}
  .s2__intro{min-height:78svh;padding:80px var(--gutter);}
  .slides{margin-top:36px;}
  .slides__pin{height:auto;min-height:0;padding:0;display:block;}
  .band{height:auto;display:block;}
  .slide{
    position:static;opacity:1;visibility:visible;gap:0;
    display:block;text-align:left;padding:32px var(--gutter) 40px;
    border-top:1px solid var(--rule);
  }
  .slide:last-child{border-bottom:1px solid var(--rule);}
  .slide__media{position:static;width:100%;aspect-ratio:auto;border-radius:10px;margin-top:24px;}
  .slide__media img{height:auto;object-fit:contain;}
  .slide__copy{padding:24px 0 0;display:block;}
  .slide__copy,.slide__media{opacity:1!important;transform:none!important;}
  .band__heading,.band__text{max-width:none;}
  .band__text{margin-top:16px;}

  .cards{margin-top:56px;}
  .s3{padding-top:70px;}
  .s3__grid{margin-top:70px;flex-direction:column;}
  .pane{flex-grow:1!important;}
  .pane__body--full{display:block!important;}
  .pane__body--slim{display:none!important;}
  .pane__media,.pane.is-open .pane__media{height:320px;}
  .testimonial{margin-top:90px;padding-bottom:90px;gap:8px;}
  .testimonial blockquote{font-size:18px;line-height:28px;}
  .faq{padding-bottom:90px;}
  .faq__list{margin-top:56px;}
  .faq__item summary>span:first-child{padding-left:0;}
  .faq__answer{padding-left:0;padding-right:0;}
  .cta{min-height:auto;padding:110px var(--gutter);}
  .cta__text:first-of-type{margin-top:56px;}
  .btn--blue{margin-top:48px;}
  .tag{font-size:15px;padding:9px 20px;}
}

@media (max-width:720px){
  .nav{padding-top:20px;}
  .nav__menu{display:none;}
  .nav__inner{justify-content:space-between;}
  .cards{grid-template-columns:1fr;}
  .play--ghost{display:none;}
  .cta__text,.cta__note{font-size:17px;}
  .footer__col,.footer__col--wide{width:calc(50% - 20px);}
}