/* ============================================================
   AC Solução — Home
   Cena 01 (abertura cinematográfica) · Cenas 02–04 (seções claras)

   Modos:
   - padrão (sem JS ou com prefers-reduced-motion): layout vertical estático,
     todo o conteúdo acessível;
   - html.has-motion: abertura fixada (sticky) e controlada pela rolagem.
   ============================================================ */

/* ============================================================
   CENA 01 — ESTRUTURA BASE (modo estático)
   ============================================================ */
.opening{position:relative; background:var(--bg)}
.opening__stage{position:relative}

/* ---------- TELA 00 — superfície com brilho + logo interativa ----------
   Variáveis atualizadas pelo JS (ponteiro suavizado):
   --px/--py: posição do cursor de -1 a 1 · --mx/--my: posição em px
   --act: "ativação" acumulada pelo movimento (0–1) · --exit: saída pela rolagem (0–1) */
.intro{position:relative; min-height:100svh; display:grid; place-items:center; padding:var(--gutter);
  overflow:hidden; isolation:isolate;
  --px:0; --py:0; --mx:50%; --my:62%; --act:0; --exit:0;
  background:linear-gradient(165deg,#0E1A36 0%,#0A1227 55%,#070E20 100%)}
.intro__surface{position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:calc(1 - var(--exit) * .6)}
.intro__surface > *{position:absolute; pointer-events:none}

/* Luz vinda da borda — "Card com brilho" (glow-right) em escala de tela */
.intro__glow{border-radius:50%; will-change:transform}
.intro__glow--edge{width:72vmax; height:72vmax; right:-34vmax; bottom:-40vmax;
  background:radial-gradient(closest-side,rgba(29,80,247,.62),rgba(29,80,247,0)); filter:blur(40px);
  transform:translate3d(calc(var(--px) * -26px),calc(var(--py) * -20px),0) scale(calc(1 + var(--act) * .07))}
.intro__glow--edge::after{content:""; position:absolute; width:34%; height:50%; left:16%; top:12%; border-radius:50%;
  background:radial-gradient(closest-side,#E3EEFF,#8DB6FF 25%,#4777FC 55%,rgba(71,119,252,0));
  filter:blur(26px); mix-blend-mode:screen; opacity:calc(.42 + var(--act) * .2)}
/* Luz no topo — "Card com brilho" (glow-top), mais fria e discreta */
.intro__glow--top{width:84vmax; height:42vmax; left:-28vmax; top:-27vmax;
  background:radial-gradient(closest-side,rgba(18,58,122,.75),rgba(18,58,122,0)); filter:blur(30px);
  transform:translate3d(calc(var(--px) * 18px),calc(var(--py) * 14px),0)}

/* Grade técnica que "acende" ao redor do cursor */
.intro__grid{inset:-40px;
  background-image:linear-gradient(rgba(141,182,255,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(141,182,255,.10) 1px,transparent 1px);
  background-size:88px 88px;
  -webkit-mask-image:radial-gradient(calc(220px + var(--act) * 260px) circle at calc(var(--mx) + 40px) calc(var(--my) + 40px),#000 0%,transparent 72%);
          mask-image:radial-gradient(calc(220px + var(--act) * 260px) circle at calc(var(--mx) + 40px) calc(var(--my) + 40px),#000 0%,transparent 72%);
  opacity:calc(.18 + var(--act) * .82);
  transform:translate3d(calc(var(--px) * -10px),calc(var(--py) * -10px),0)}

/* Símbolo oficial cobrindo toda a área visível (como "cover", sem distorcer a proporção 234:196),
   quase invisível — camada mais profunda do parallax */
.intro__symbol{left:50%; top:50%; width:max(106vw,calc(106vh * 234 / 196)); height:auto;
  color:rgba(141,182,255,.04);
  transform:translate3d(calc(-50% + var(--px) * 30px),calc(-50% + var(--py) * 22px),0)}

/* "Role para explorar" — indicação discreta na base */
.intro__hint{position:absolute; left:50%; bottom:clamp(28px,5.5vh,56px); transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:var(--sp-3);
  font-size:var(--fs-micro); font-weight:var(--fw-regular); letter-spacing:.32em; text-indent:.32em;
  text-transform:uppercase; white-space:nowrap; color:rgba(192,218,255,.62);
  opacity:calc(1 - var(--exit) * 4); pointer-events:none}
.intro__hint i{display:block; width:1px; height:28px; background:linear-gradient(180deg,rgba(192,218,255,.5),rgba(192,218,255,0))}

/* Luz que acompanha o cursor */
.intro__spot{inset:0; mix-blend-mode:screen; opacity:calc(.3 + var(--act) * .7);
  background:radial-gradient(440px circle at var(--mx) var(--my),rgba(71,119,252,.17),rgba(71,119,252,0) 70%)}
.intro__vignette{inset:0; background:radial-gradient(120% 90% at 50% 45%,rgba(3,6,14,0) 52%,rgba(3,6,14,.55) 100%)}

/* Logo: protagonista, com relevo suave em 3D */
.intro__logo{position:relative; display:grid; place-items:center; perspective:900px}
.intro__halo{position:absolute; width:150%; height:300%; left:-25%; top:-100%; border-radius:50%; pointer-events:none;
  background:radial-gradient(closest-side,rgba(29,80,247,.30),rgba(29,80,247,0)); filter:blur(28px);
  opacity:calc(.55 + var(--act) * .35);
  transform:translate3d(calc(var(--px) * 14px),calc(var(--py) * 10px),0);
  transition:opacity var(--dur-slow) var(--ease-standard)}
.intro__enter{position:relative; display:block; padding:clamp(16px,2vw,28px); border-radius:var(--radius-lg);
  color:var(--white); cursor:pointer; transform-style:preserve-3d;
  transform:translate3d(calc(var(--px) * 10px),calc(var(--py) * 8px),0) rotateY(calc(var(--px) * 7deg)) rotateX(calc(var(--py) * -6deg));
  filter:drop-shadow(0 10px 36px rgba(29,80,247,.22));
  transition:filter var(--dur-slow) var(--ease-standard)}
.intro__enter:hover,.intro__enter:focus-visible{filter:drop-shadow(0 12px 46px rgba(71,119,252,.5))}
.intro__logo:hover .intro__halo{opacity:.95}
.intro__enter:focus-visible{outline-offset:6px}
.intro__enter .brand-reveal{transition:transform var(--dur-slow) var(--ease-standard)}
.intro__enter:hover .brand-reveal{transform:scale(1.015)}
.intro__enter:active .brand-reveal{transform:scale(.985); transition-duration:var(--dur-fast)}
/* Clique na logo: breve "acendimento" antes da abertura */
.intro.is-launching .intro__halo{opacity:1; transition:opacity var(--dur-standard) var(--ease-entrance)}
.intro.is-launching .intro__enter{filter:drop-shadow(0 14px 60px rgba(141,182,255,.6))}

.brand-reveal{position:relative; display:block; width:clamp(220px,30vw,440px); aspect-ratio:1298 / 276; color:var(--white)}
.brand-reveal__layer{position:absolute; inset:0; width:100%; height:100%; overflow:visible}
/* Recortes sobre a arte oficial (viewBox 1298×276):
   barras em x 0–235 · y 20–69 / 94–143 / 167–216 · palavra em x 335–1298 */
.brand-reveal__layer.is-bar1{clip-path:inset(3.6% 81% 70.7% -2%)}
.brand-reveal__layer.is-bar2{clip-path:inset(29.7% 81% 43.8% -2%)}
.brand-reveal__layer.is-bar3{clip-path:inset(56.5% 81% 18.1% -2%)}
.brand-reveal__layer.is-word{clip-path:inset(-6% -2% -6% 24%)}

.hero{position:relative; height:100svh; min-height:520px; overflow:hidden; background:var(--ink-900)}
.hero__media{position:absolute; inset:0; overflow:hidden; background:var(--grad-deep)}
.hero__video{width:100%; height:100%; object-fit:cover; object-position:50% 40%}
/* Véu obrigatório (DS): gradiente do rodapé até 70% da altura */
.hero__veil{position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(0deg,rgba(5,10,22,.86) 0%,rgba(5,10,22,.45) 38%,rgba(5,10,22,0) 70%),
             linear-gradient(180deg,rgba(5,10,22,.45) 0%,rgba(5,10,22,0) 22%)}
.hero__content{position:absolute; left:var(--gutter); right:var(--gutter); bottom:clamp(44px,8.5vh,80px)}
/* Faixa leve acima da frase: rótulo à esquerda, convite à rolagem à direita */
.hero__meta{display:flex; align-items:center; justify-content:space-between; gap:var(--sp-6);
  margin-bottom:clamp(var(--sp-6),5.5vh,var(--sp-12))}
.hero__label{display:inline-flex; align-items:center; gap:var(--sp-3);
  font-size:clamp(.8125rem,1.1vw,1rem); font-weight:var(--fw-light); letter-spacing:.03em; line-height:1.2;
  text-transform:uppercase; color:rgba(255,255,255,.9)}
.hero__explore{cursor:pointer; padding:6px 0; transition:color var(--dur-fast) var(--ease-standard)}
.hero__explore .icon{width:20px; height:20px; transition:transform var(--dur-standard) var(--ease-standard)}
.hero__explore:hover{color:var(--white)}
.hero__explore:hover .icon{transform:translateX(3px)}
.hero__phrase{max-width:15ch; font-size:clamp(1.875rem,3.8vw,3.5rem); font-weight:var(--fw-bold);
  line-height:1.02; letter-spacing:var(--ls-manifesto); color:var(--white); text-wrap:balance}
.hero__phrase[data-lines]{max-width:none}
.has-motion .hero.is-full .hero__explore{pointer-events:auto}
.hero__dim{position:absolute; inset:0; background:var(--ink-950); opacity:0; pointer-events:none}

.hero__pause{position:absolute; right:var(--gutter); bottom:clamp(44px,8.5vh,80px); z-index:2;
  display:inline-flex; align-items:center; gap:var(--sp-2); height:36px; padding:0 14px 0 12px;
  border-radius:var(--radius-pill); background:rgba(5,10,22,.5); border:var(--bw-hairline) solid var(--border-glass);
  color:var(--text-secondary); font-size:var(--fs-caption); font-weight:var(--fw-medium);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  transition:color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard), opacity var(--dur-standard) var(--ease-standard)}
.hero__pause:hover{color:var(--white); border-color:var(--brand)}
.hero__pause-icon{position:relative; width:10px; height:12px}
.hero__pause-icon::before,.hero__pause-icon::after{content:""; position:absolute; top:0; bottom:0; width:3px; border-radius:1px; background:currentColor}
.hero__pause-icon::before{left:0}
.hero__pause-icon::after{right:0}
.hero__pause[aria-pressed="true"] .hero__pause-icon::before{width:0; height:0; border-radius:0; background:none;
  border-style:solid; border-width:6px 0 6px 10px; border-color:transparent transparent transparent currentColor}
.hero__pause[aria-pressed="true"] .hero__pause-icon::after{display:none}
.hero.is-media-error .hero__pause{display:none}

.opening__light{display:none}

.track{display:flex; flex-direction:column}
.panel{position:relative; display:flex; flex-direction:column; color:var(--white)}
.panel--02{background:var(--surface-3)}
.panel--03{background:var(--blue-800)}
.panel--04{background:var(--blue-900)}
.panel__media{position:relative; overflow:hidden; aspect-ratio:16 / 9; background:var(--ink-800)}
.panel__media img{width:100%; height:100%; object-fit:cover; object-position:50% 30%}
.panel--04 .panel__media img{object-position:50% 22%}
.panel__media.is-error img{opacity:0}
.panel__media.is-error{background:var(--grad-deep)}
/* Módulo único dos painéis 02–04: mesma área de imagem, mesmo respiro,
   mesma escala e mesma largura de frase (a do painel quadrado). */
.track{--panel-pad:clamp(var(--sp-6),3.2vw,var(--sp-12))}
.panel__body{flex:1; display:flex; flex-direction:column; justify-content:space-between; gap:var(--sp-8);
  padding:var(--panel-pad)}
.panel__index{font-size:var(--fs-caption); font-weight:var(--fw-medium); letter-spacing:var(--ls-label); color:var(--white)}
.panel__index span{color:var(--text-muted)}
.panel__phrase{width:100%; max-width:22ch; font-size:clamp(1.375rem,2.1vw,2.125rem); font-weight:var(--fw-medium);
  line-height:var(--lh-heading); letter-spacing:var(--ls-heading); color:var(--white); text-wrap:balance}
/* Quebras fixas em 2 linhas (desktop/tablet): a largura é a do painel quadrado, igual nos três */
.has-motion .panel__phrase{max-width:calc(var(--panel-w,100vw) - 2 * var(--panel-pad))}
.panel__signature{font-size:var(--fs-body-lg); font-weight:var(--fw-light); line-height:var(--lh-heading); color:var(--text-secondary)}

/* Linhas de texto divididas para revelação por máscara */
.split-line{display:block; overflow:hidden; padding-block:.08em .14em; margin-block:-.08em -.14em}
.split-line__inner{display:block}

/* ============================================================
   CENA 01 — MODO CINEMATOGRÁFICO (html.has-motion)
   Valores de transform/clip/opacity são escritos pelo home-opening.js
   ============================================================ */
.has-motion .opening{height:var(--opening-h,700vh)}
.has-motion .opening__stage{position:sticky; top:0; height:var(--stage-h,100vh); overflow:hidden; background:var(--bg)}

.has-motion .intro{position:absolute; inset:0; z-index:1; min-height:0}
.has-motion .intro__logo{will-change:transform,opacity,filter}

.has-motion .hero{position:absolute; inset:0; z-index:2; height:auto; min-height:0; background:none; pointer-events:none}
.has-motion .hero__media{clip-path:inset(50% 50% 50% 50% round 0); will-change:clip-path}
.has-motion .hero__video{transform:scale(1.18); will-change:transform}
.has-motion .hero__content,.has-motion .hero__pause{will-change:transform,opacity}
.has-motion .hero__pause{opacity:0; pointer-events:none}
.has-motion .hero.is-full .hero__pause{opacity:1; pointer-events:auto}

.has-motion .opening__light{display:block; position:absolute; inset:0; z-index:3; background:var(--paper); opacity:0; pointer-events:none}

.has-motion .track{position:absolute; top:0; left:100%; z-index:4; height:100%; flex-direction:row; will-change:transform}
.has-motion .panel{flex:none; width:var(--panel-w,100vh); height:100%}
.has-motion .panel--04{width:var(--panel4-w,100vw); transform-origin:50% 50%}
.has-motion .panel__media{aspect-ratio:auto; height:56%; flex:none; clip-path:inset(100% 0 0 0)}
.has-motion .panel__media img{transform:scale(1.14); will-change:transform}
.has-motion .panel__body{min-height:0}

/* Painel 04 — fechamento mais amplo: frase à esquerda, assinatura à direita */
.panel--04 .panel__body{display:grid; grid-template-columns:1fr auto; grid-template-rows:auto 1fr; align-items:end; column-gap:var(--sp-12)}
.panel--04 .panel__index{grid-column:1 / -1; align-self:start}
.panel--04 .panel__signature{text-align:right; max-width:22ch; padding-bottom:.3em}

.has-motion .split-line__inner{will-change:transform,opacity,filter}

/* Estado inicial da introdução (primeira visita): evita piscar antes do JS */
.intro-pending .brand-reveal__layer{opacity:0}
html.intro-lock{overflow:hidden}

@media (max-width:767px), (max-aspect-ratio:6/5){
  .panel--04 .panel__body{grid-template-columns:1fr; row-gap:var(--sp-4)}
  .panel--04 .panel__signature{text-align:left; padding-bottom:0}
  .has-motion .panel__media{height:50%}
}
@media (max-width:767px){
  .panel__phrase{font-size:1.25rem}
  /* Abertura no celular: tudo no canto inferior esquerdo, nesta ordem —
     Role para explorar → Identidade que conecta → frase → Pausar vídeo */
  .hero__video{object-position:50% 50%}
  .hero__veil{background:linear-gradient(0deg,rgba(5,10,22,.9) 0%,rgba(5,10,22,.55) 30%,rgba(5,10,22,0) 62%),
             linear-gradient(180deg,rgba(5,10,22,.45) 0%,rgba(5,10,22,0) 22%)}
  .hero__content{bottom:calc(var(--sp-6) + 36px + 16px + env(safe-area-inset-bottom,0px))}
  .hero__meta{flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:2px; margin-bottom:var(--sp-4)}
  .hero__explore{order:-1; padding:4px 0}
  .hero__label{font-size:.75rem}
  .hero__explore .icon{width:18px; height:18px}
  .hero__pause{left:var(--gutter); right:auto; bottom:calc(var(--sp-6) + env(safe-area-inset-bottom,0px))}
  .panel__body{padding:var(--sp-6) var(--gutter) var(--sp-8)}
}

/* ============================================================
   CENAS 02–04 — SEÇÕES CLARAS
   ============================================================ */
.scene{position:relative; background:var(--bg); color:var(--text-primary);
  padding-block:clamp(var(--sp-20),11vw,176px)}
.scene:focus{outline:none}
/* Emenda com a abertura: cobre arredondamentos de subpixel no fim da seção fixada */
.scene--change{margin-top:-2px; z-index:1}
.scene .container{max-width:var(--container-wide)}

.editorial{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--grid-gap); row-gap:var(--sp-6)}
.editorial > .eyebrow{grid-column:1 / -1}
.editorial__title{font-size:var(--fs-display); font-weight:var(--fw-semibold); line-height:var(--lh-snug);
  letter-spacing:var(--ls-display); color:var(--text-primary); max-width:20ch}
.editorial__text{font-size:var(--fs-body-lg); line-height:var(--lh-relaxed); color:var(--text-muted); max-width:var(--measure-narrow)}
/* Cena 02 (referência 02): título fino à esquerda, texto em dois parágrafos à direita, na mesma altura */
.scene--change .editorial{align-items:start; row-gap:var(--sp-8)}
.scene--change .editorial__title{grid-column:1 / 6; max-width:13ch; text-wrap:wrap;
  font-size:clamp(2.5rem,4.6vw,4.25rem); font-weight:var(--fw-semibold); line-height:1.04; letter-spacing:-.025em}
.scene--change .editorial__text{grid-column:7 / 13; max-width:none; display:flex; flex-direction:column; gap:var(--sp-6);
  padding-top:.35em; letter-spacing:.01em}

.editorial--split{align-items:end}
.editorial--split > div{grid-column:1 / 8; display:flex; flex-direction:column; gap:var(--sp-6)}
.editorial--split > .editorial__text{grid-column:8 / 13}

/* Títulos das seções claras: degradê de texto do Design System (--grad-text do tema claro:
   Azul Profundo #081738 → #123A7A → Azul Solução #1D50F7). A largura acompanha o texto
   para o azul terminar no fim da última linha. */
.theme-light .editorial__title,.theme-light .closing__title{
  width:fit-content; color:var(--text-primary);
  background:var(--grad-text); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  /* o degradê só pinta dentro da caixa: estende a área para baixo/cima para não cortar
     descendentes (g, ç, p) e acentos, sem deslocar o layout */
  padding-block:.08em .18em; margin-block:-.08em -.18em}

/* Bloco imagem + frase */
.feature{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--grid-gap); align-items:center;
  margin-top:clamp(var(--sp-20),11vw,168px)}
.feature__media{grid-column:1 / 8; position:relative; overflow:hidden; border-radius:var(--radius-xl); aspect-ratio:4 / 3; background:var(--surface-3)}
.feature__media img{width:100%; height:100%; object-fit:cover}
.feature__quote{grid-column:8 / 13; padding-left:clamp(var(--sp-4),3vw,var(--sp-12));
  font-size:clamp(1.625rem,2.9vw,2.625rem); font-weight:var(--fw-medium); line-height:var(--lh-heading);
  letter-spacing:var(--ls-heading); color:var(--text-primary); text-wrap:balance}
.feature__mark{display:block; width:48px; height:3px; border-radius:2px; background:var(--brand); margin-bottom:var(--sp-6)}
.feature--reverse .feature__media{grid-column:6 / 13; grid-row:1}
.feature--reverse .feature__quote{grid-column:1 / 6; grid-row:1; padding-left:0; padding-right:clamp(var(--sp-4),3vw,var(--sp-12))}

/* Cena 02 — mesmo eixo do cartão azul que encerra a abertura
   (painel 04 reduzido a 92% → 4% de margem em cada lado da tela) */
.scene--change .container{max-width:none; padding-inline:4vw}
/* Bloco de texto centralizado entre o cartão azul e a imagem: o mesmo respiro (--chg-gap)
   acima e abaixo. Acima, desconta-se a margem de 4% da altura que o cartão já deixa. */
.scene--change{--chg-gap:clamp(56px,6.5vw,104px); padding-top:max(var(--sp-6),calc(var(--chg-gap) - 4vh + 10px));
  padding-bottom:clamp(var(--sp-12),5vw,88px)}
/* Cena 03 logo após a imagem da Cena 02: respiro de transição, sem vazio excessivo */
.scene--proof{padding-top:clamp(var(--sp-16),6vw,104px); padding-bottom:clamp(var(--sp-12),5vw,88px)}
/* Caminhos logo após os cards: mesmo ritmo de transição entre Cena 02 → 03 */
.scene--paths{padding-top:calc(clamp(var(--sp-16),6vw,104px) - 24px); padding-bottom:clamp(var(--sp-12),5vw,88px)}
.scene--way{padding-top:clamp(var(--sp-16),6vw,104px); padding-bottom:clamp(var(--sp-6),2.5vw,40px)}

/* Imagem com frase sobreposta, dentro da largura de conteúdo */
.feature-cover{position:relative; margin-top:var(--chg-gap,clamp(var(--sp-12),6vw,var(--sp-24)))}
.feature-cover__media{position:relative; overflow:hidden; border-radius:var(--radius-xl);
  aspect-ratio:21 / 9; min-height:380px; max-height:620px; width:100%; background:var(--ink-800)}
.feature-cover__media img{width:100%; height:100%; object-fit:cover; object-position:50% 32%;
  transform:scaleX(-1)} /* espelhada: a área escura fica à direita, sob a frase */
/* Véu leve sobre toda a foto + densidade maior no canto da frase */
.feature-cover__shade{position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(75% 110% at 100% 100%,rgba(3,6,14,.78) 0%,rgba(3,6,14,.5) 36%,rgba(3,6,14,0) 74%),
    linear-gradient(0deg,rgba(3,6,14,.42) 0%,rgba(3,6,14,0) 55%),
    linear-gradient(rgba(5,10,22,.16),rgba(5,10,22,.16))}
.feature-cover__quote{position:absolute; right:clamp(var(--sp-8),5vw,var(--sp-20)); bottom:clamp(var(--sp-8),4.6vw,var(--sp-16));
  max-width:calc(100% - 2 * clamp(var(--sp-8),5vw,var(--sp-20))); text-align:right;
  font-size:clamp(1.5rem,2.5vw,2.5rem); font-weight:var(--fw-medium); line-height:1.22;
  letter-spacing:var(--ls-heading); color:var(--white); text-shadow:0 2px 20px rgba(3,6,14,.3)}
.feature-cover__quote span{display:block; white-space:nowrap}

/* Variação (Cena 04): frase à esquerda, sem espelhar a foto, gradiente a partir do canto inferior esquerdo */
.scene--paths .feature-cover{margin-top:clamp(var(--sp-16),7vw,120px)}
.feature-cover--left .feature-cover__media img{transform:none; object-position:50% 55%}
.js .feature-cover--left .feature-cover__media:not(.is-in) img{transform:scale(1.08)}
.feature-cover--left .feature-cover__shade{
  background:
    radial-gradient(75% 110% at 0% 100%,rgba(3,6,14,.80) 0%,rgba(3,6,14,.52) 36%,rgba(3,6,14,0) 74%),
    linear-gradient(0deg,rgba(3,6,14,.42) 0%,rgba(3,6,14,0) 55%),
    linear-gradient(rgba(5,10,22,.16),rgba(5,10,22,.16))}
.feature-cover--left .feature-cover__quote{right:auto; left:clamp(var(--sp-8),5vw,var(--sp-20)); text-align:left}
.js .feature-cover__media[data-reveal="image"]{clip-path:inset(100% 0 0 0 round var(--radius-xl))}
.js .feature-cover__media[data-reveal="image"].is-in{clip-path:inset(0 0 0 0 round var(--radius-xl))}
.js .feature-cover__media img{transition:transform 1.2s var(--ease-entrance)}
.js .feature-cover__media:not(.is-in) img{transform:scaleX(-1) scale(1.08)}

/* ---------- Cards escuros com brilho — "Card com brilho" do Design System ----------
   Base compartilhada pela Prova de Domínio (.stat) e por Caminhos (.path).
   Base escura fixa (peça de marca), luz azul em degradê vinda da borda:
   .glow-right · .glow-bottom · .glow-top (mesmas direções do DS). */
.glow-card{
  --glow-a:#1D50F7; --glow-b:#4777FC; --glow-c:#8DB6FF;
  position:relative; isolation:isolate; overflow:hidden;
  display:flex; flex-direction:column; gap:var(--sp-3);
  padding:var(--sp-8); border-radius:var(--radius-xl);
  background:linear-gradient(165deg,#0E1A36 0%,#0A1227 55%,#070E20 100%);
  border:var(--bw-hairline) solid rgba(141,182,255,.14);
  box-shadow:0 24px 60px -30px rgba(3,6,14,.75), inset 0 1px 0 rgba(192,218,255,.08);
  color:#FFFFFF;
  transition:transform var(--dur-standard) var(--ease-standard), box-shadow var(--dur-standard) var(--ease-standard)}
/* a luz: camada ampla desfocada + camada estreita mais clara (DS) */
.glow-card::before,.glow-card::after{content:""; position:absolute; z-index:-1; pointer-events:none; border-radius:50%;
  transition:transform var(--dur-cinematic) var(--ease-entrance), opacity var(--dur-slow) var(--ease-standard)}
.glow-card::before{background:radial-gradient(closest-side,var(--glow-a),rgba(29,80,247,0)); filter:blur(26px); opacity:.9}
.glow-card::after{background:radial-gradient(closest-side,#E3EEFF,var(--glow-c) 25%,var(--glow-b) 55%,rgba(71,119,252,0));
  filter:blur(12px); opacity:.75; mix-blend-mode:screen}
.glow-card.glow-right::before{width:75%; height:120%; right:-40%; bottom:-35%}
.glow-card.glow-right::after{width:26%; height:80%; right:-11%; bottom:-6%}
.glow-card.glow-bottom::before{width:150%; height:60%; left:-25%; bottom:-30%}
.glow-card.glow-bottom::after{width:110%; height:26%; left:-5%; bottom:-12%}
.glow-card.glow-top::before{width:150%; height:75%; right:-50%; top:-45%}
.glow-card.glow-top::after{width:95%; height:28%; right:-18%; top:-12%}
.glow-card:hover,.glow-card:focus-within{transform:translateY(-4px); box-shadow:0 30px 70px -28px rgba(29,80,247,.55), inset 0 1px 0 rgba(192,218,255,.12)}
.glow-card:hover::before,.glow-card:focus-within::before{opacity:1; transform:scale(1.12)}
.glow-card:hover::after,.glow-card:focus-within::after{opacity:.95; transform:scale(1.08)}

/* Ícone em círculo de vidro (DS: glow-icon) */
.stat__icon,.path__icon{width:48px; height:48px; border-radius:50%; display:grid; place-items:center; flex:none;
  background:rgba(13,30,66,.55); border:var(--bw-regular) solid rgba(192,218,255,.55);
  box-shadow:0 0 0 4px rgba(29,80,247,.12), 0 8px 24px -10px rgba(29,80,247,.8);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); color:#FFFFFF}
.stat__icon svg,.path__icon svg{width:22px; height:22px}

/* ---------- Cena 03 · números ---------- */
.stats{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--grid-gap); margin-top:clamp(var(--sp-16),6.5vw,104px)}
.stat{justify-content:space-between; gap:var(--sp-10); min-height:320px}
.stat__body{display:flex; flex-direction:column; gap:var(--sp-3)}
.stat__value{font-size:clamp(2.25rem,3.6vw,3.25rem); font-weight:var(--fw-bold); line-height:1;
  letter-spacing:var(--ls-display); color:#FFFFFF; font-variant-numeric:tabular-nums}
/* Texto #C0DAFF sobre o fundo escuro do card (contraste 13:1 — DS) */
.stat__label{font-size:var(--fs-body-sm); line-height:var(--lh-body); color:#C0DAFF; max-width:34ch;
  min-height:calc(var(--lh-body) * 1em * 4)} /* reserva 4 linhas: números alinhados entre os cards */
@media (min-width:1025px) and (max-width:1280px){
  .stat__label{min-height:calc(var(--lh-body) * 1em * 6)} /* cards mais estreitos: texto do card 02 ocupa até 6 linhas */
}

/* ---------- Seção 04 · caminhos ---------- */
.section-head{display:flex; flex-direction:column; gap:var(--sp-6)}
.section-head__lead{font-size:var(--fs-body-lg); color:var(--text-muted)}
.paths{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--grid-gap); margin-top:clamp(var(--sp-12),5vw,var(--sp-20))}
.path{min-height:400px}
/* rótulo pequeno (DS: glow-kicker) — empurra o conteúdo para a base, como no card de referência */
.path__num{margin-top:auto; padding-top:var(--sp-10); font-size:var(--fs-micro); font-weight:var(--fw-semibold);
  letter-spacing:var(--ls-eyebrow); color:#8DB6FF}
.path__title{font-size:var(--fs-h3); font-weight:var(--fw-bold); letter-spacing:var(--ls-heading); color:#FFFFFF}
.path__text{font-size:var(--fs-body-sm); line-height:var(--lh-body); color:#C0DAFF; max-width:38ch;
  min-height:calc(var(--lh-body) * 1em * 4)} /* títulos alinhados entre os cards */
@media (min-width:1025px) and (max-width:1280px){ .path__text{min-height:calc(var(--lh-body) * 1em * 6)} }
@media (max-width:767px){ .path__text{min-height:0} }
.path__cta{align-self:flex-start; display:inline-flex; align-items:center; gap:var(--sp-2); margin-top:var(--sp-3);
  min-height:44px; padding:var(--sp-2) 0; font-size:var(--fs-label); font-weight:var(--fw-semibold); color:#8DB6FF;
  transition:color var(--dur-fast) var(--ease-standard)}
.path__cta .icon{width:18px; height:18px; transition:transform var(--dur-standard) var(--ease-standard)}
.path:hover .path__cta .icon,.path__cta:focus-visible .icon{transform:translateX(4px)}
.path__cta:hover,.path__cta:focus-visible{color:#FFFFFF}

/* ---------- Seção 04 · cards em leque 3D (home-fan.js) ----------
   Estado padrão = cards abertos lado a lado (sem JS, tablet/celular, movimento reduzido).
   No desktop o JS fecha o leque e o abre conforme a rolagem e o mouse. */
.section-head--split{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--grid-gap); row-gap:var(--sp-6); align-items:end}
.section-head--split .eyebrow{grid-column:1 / -1}
.section-head--split .editorial__title{grid-column:1 / 9}
.section-head--split .section-head__lead{grid-column:9 / 13; justify-self:end; text-align:right; padding-bottom:.55em}

.paths-fan__deck{perspective:1600px; perspective-origin:50% 30%}
.paths.fan-cards{align-items:stretch; transform-style:preserve-3d}
.fan-slot{display:flex; position:relative; z-index:var(--z,1); transform-origin:50% 85%;
  transition:opacity var(--dur-slow) var(--ease-standard), filter var(--dur-slow) var(--ease-standard)}
.fan-slot > .path{flex:1}
/* Com o leque aberto, o card sob o mouse vem para a frente e os demais recuam */
.paths-fan.is-open .fan-cards:hover .fan-slot{opacity:.72; filter:saturate(.8) brightness(.92)}
.paths-fan.is-open .fan-cards:hover .fan-slot:hover{opacity:1; filter:none; z-index:10}
/* Destaque: --act vem do leque (card da frente aceso); --hov do mouse */
.paths-fan .glow-card{border-color:rgba(141,182,255,calc(.14 + max(var(--act,0),var(--hov,0)) * .32))}
.paths-fan .glow-card::before,.paths-fan .glow-card:hover::before{
  opacity:calc(.62 + max(var(--act,0),var(--hov,0)) * .38);
  transform:scale(calc(1 + max(var(--act,0),var(--hov,0)) * .16));
  transition:transform var(--dur-slow) var(--ease-standard), opacity var(--dur-slow) var(--ease-standard)}
.paths-fan .glow-card::after,.paths-fan .glow-card:hover::after{
  opacity:calc(.55 + max(var(--act,0),var(--hov,0)) * .4);
  transform:scale(calc(1 + max(var(--act,0),var(--hov,0)) * .1));
  transition:transform var(--dur-slow) var(--ease-standard), opacity var(--dur-slow) var(--ease-standard)}
.paths-fan .glow-card:hover,.paths-fan .glow-card:focus-within{--hov:1}
.fx-pointer .paths-fan .path.fx-active:hover{
  transform:perspective(1000px) translateY(-8px) rotateX(var(--fx-rx,0deg)) rotateY(var(--fx-ry,0deg)) scale(1.02)}

@media (max-width:1024px){
  .section-head--split .editorial__title,.section-head--split .section-head__lead{grid-column:1 / -1; justify-self:start; text-align:left; padding-bottom:0}
}

/* ---------- Seção 05 · o jeito Solução — cards que crescem + bolinha (home-ways.js) ----------
   Inspirado no percurso do neutomni.com, na linguagem da Solução: os cards crescem da base
   em escadinha; a bolinha com o símbolo oficial rola pela linha tracejada até o último card.
   Padrão = cards completos lado a lado (sem JS / movimento reduzido). */
.ways-grow{position:relative; margin-top:clamp(var(--sp-12),5vw,var(--sp-20)); --line-y:30%}
.ways-grow__cols{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--grid-gap); height:clamp(440px,62vh,540px)}
.grow-col{justify-content:space-between; gap:var(--sp-6); padding:var(--sp-6) var(--sp-6) var(--sp-8); will-change:clip-path;
  /* recorte e posições vêm da rolagem a cada quadro: sem transição de transform */
  transition:box-shadow var(--dur-standard) var(--ease-standard), border-color var(--dur-slow) var(--ease-standard)}
.grow-col .way__num{position:relative; z-index:1; font-size:var(--fs-label); font-weight:var(--fw-semibold); letter-spacing:var(--ls-eyebrow); color:#8DB6FF}
.grow-col__body{display:flex; flex-direction:column; gap:var(--sp-3)}
.grow-col .way__title{font-size:var(--fs-h4); font-weight:var(--fw-bold); line-height:var(--lh-snug); color:#FFFFFF}
.grow-col .way__text{font-size:var(--fs-body-sm); line-height:var(--lh-body); color:#C0DAFF; max-width:32ch}
.grow-col .way__extra{font-size:var(--fs-caption); color:#9FB4D6}

/* Linha tracejada que atravessa os cards; o trecho já percorrido pela bolinha acende */
.grow-col__line{position:absolute; left:0; right:0; top:var(--line-y); height:0; border-top:1px dashed rgba(192,218,255,.38); pointer-events:none}
.grow-col__trail{position:absolute; left:0; top:-1px; width:100%; height:2px; transform-origin:left center; transform:scaleX(var(--trail,1));
  background:linear-gradient(90deg,#8DB6FF,#4777FC); box-shadow:0 0 10px rgba(71,119,252,.6)}

/* Bolinha: Azul Solução com o símbolo oficial em branco */
.ways-ball{--size:var(--ball-size); position:absolute; left:0; top:calc((100% - 22px) * .3); z-index:5;
  width:var(--size); height:var(--size); margin:calc(var(--size) / -2) 0 0 calc(var(--size) / -2);
  display:grid; place-items:center; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle at 35% 30%,#4777FC 0%,#1D50F7 55%,#1740C4 100%);
  box-shadow:0 0 0 6px rgba(29,80,247,.16), 0 0 0 1px rgba(192,218,255,.5) inset, 0 12px 32px -8px rgba(29,80,247,.7);
  transform:translate3d(var(--ball-x,0px),0,0); opacity:var(--ball-o,0)}
.ways-ball svg{width:46%; height:auto; color:#FFFFFF; transform:rotate(var(--ball-r,0deg))}
.ways-grow:not(.is-live) .ways-ball{display:none}
/* espaço à direita do último card para a bolinha terminar ao lado dele */
.ways-grow.is-live .ways-grow__cols{margin-right:calc(var(--ball-size) + 24px)}
.ways-grow.is-live .grow-col{cursor:pointer}   /* clicar no card leva a bolinha até ele */
.ways-grow.is-live .grow-col:focus-visible{outline:2px solid var(--brand,#1D50F7); outline-offset:4px}
.ways-grow{--ball-size:clamp(64px,5.8vw,84px); padding-bottom:22px}

/* Fio brilhante na base: acende com o percurso e brilha sob o card em destaque */
.ways-grow__base{position:absolute; left:0; right:0; bottom:0; height:2px; border-radius:2px; background:rgba(29,80,247,.14)}
.ways-grow__fill{position:absolute; inset:0; border-radius:inherit; transform-origin:left center; transform:scaleX(var(--fill,1));
  background:linear-gradient(90deg,#8DB6FF,#1D50F7); box-shadow:0 0 12px rgba(29,80,247,.45)}
.ways-grow__spot{position:absolute; left:0; bottom:-5px; width:var(--spot-w,200px); height:12px; border-radius:50%;
  background:radial-gradient(closest-side,rgba(71,119,252,.75),rgba(71,119,252,0)); filter:blur(4px);
  transform:translateX(var(--spot-x,0)); opacity:var(--spot-o,0); pointer-events:none}

/* Destaque do card sob a bolinha (--act) e do mouse (--hov) */
.ways-grow .glow-card{border-color:rgba(141,182,255,calc(.14 + max(var(--act,0),var(--hov,0)) * .32))}
.ways-grow .glow-card::before,.ways-grow .glow-card:hover::before{
  opacity:calc(.55 + max(var(--act,0),var(--hov,0)) * .45); transform:scale(calc(1 + max(var(--act,0),var(--hov,0)) * .16));
  transition:transform var(--dur-slow) var(--ease-standard), opacity var(--dur-slow) var(--ease-standard)}
.ways-grow .glow-card::after,.ways-grow .glow-card:hover::after{
  opacity:calc(.45 + max(var(--act,0),var(--hov,0)) * .5); transform:scale(calc(1 + max(var(--act,0),var(--hov,0)) * .1));
  transition:transform var(--dur-slow) var(--ease-standard), opacity var(--dur-slow) var(--ease-standard)}
.ways-grow .glow-card:hover{--hov:.7}

/* Fixação durante o percurso (só desktop, quando cabe na tela) */
.grow-pin{overflow-anchor:none}
.grow-pin.is-pinned .ways-grow{position:sticky; top:var(--grow-top,96px)}

/* Tablet e celular: cards empilhados com a linha na lateral, todo o texto visível */
@media (max-width:1024px){
  .ways-grow{padding-left:22px}
  .ways-grow::before{content:""; position:absolute; left:0; top:0; bottom:0; width:2px; border-radius:2px; background:rgba(29,80,247,.18)}
  .ways-grow__cols{grid-template-columns:1fr; height:auto; row-gap:var(--sp-6)}
  .grow-col{gap:var(--sp-4); min-height:0}
  .grow-col__line{display:none}
  .ways-grow{padding-bottom:0}
  .ways-grow__base{display:none}
}

/* ---------- Destaque · globo (home-globe.js) ----------
   Seção clara, contínua com as vizinhas: frase de um lado, globo em pontos do outro,
   cercado por uma rede de conexões, órbitas e pulsos de luz. */
.scene--globe{overflow:hidden; isolation:isolate;
  padding-block:clamp(var(--sp-4),2vw,var(--sp-8)) clamp(var(--sp-6),3vw,var(--sp-12))}
.globe__layout{display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); align-items:center;
  gap:clamp(var(--sp-6),4vw,var(--sp-16))}

.globe__content{position:relative; z-index:2; order:2}   /* globo à esquerda, frase à direita */
.globe__phrase{max-width:25ch; font-size:clamp(1.5rem,2.35vw,2.25rem); font-weight:var(--fw-regular,400); line-height:1.4;
  letter-spacing:-0.01em; color:var(--text-primary)}
.globe__key{font-weight:var(--fw-bold)}

/* o globo (com a rede ao redor) cabe inteiro na altura da tela */
.globe{position:relative; z-index:1; justify-self:center; width:min(100%,780px,calc(100vh - 140px)); aspect-ratio:1;
  transform:translate3d(var(--gx,0px),var(--gy,0px),0) scale(var(--gs,1));
  opacity:var(--go,1); filter:blur(var(--gb,0px)); cursor:grab; touch-action:pan-y; user-select:none}
.globe.is-dragging{cursor:grabbing}
.globe__canvas{display:block; width:100%; height:100%}

/* entrada da frase (controlada pela rolagem no JS; padrão = visível) */
.globe__phrase{opacity:var(--po,1); transform:translate3d(0,var(--py,0px),0)}

@media (max-width:1024px){
  .globe__layout{grid-template-columns:1fr; text-align:center}
  .globe__content{order:0}
  .globe__phrase{margin-inline:auto}
  .globe{width:min(100%,640px)}
}
@media (max-width:767px){
  .globe{width:min(100%,560px)}
  .globe__phrase{max-width:18ch}
}


/* ---------- Seção 06 · fechamento (home-closing.js) ----------
   Texto à esquerda, centralizado na altura do celular; celular com o vídeo da Solução à direita.
   Entrada vinculada à rolagem (variáveis --l, --t, --c, --ph). Padrão = tudo visível. */
.scene--closing{background:var(--grad-deep); overflow:hidden; padding-block:clamp(var(--sp-8),4vw,64px) clamp(96px,10vw,160px)}
.closing-grid{display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); align-items:center; gap:clamp(var(--sp-8),5vw,var(--sp-20))}
.closing{position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:var(--sp-8)}
.closing__lead{max-width:52ch; font-size:var(--fs-body-lg); line-height:var(--lh-body); color:var(--text-muted)}
.closing__title{max-width:14ch; font-size:var(--fs-manifesto); font-weight:var(--fw-semibold); line-height:var(--lh-tight);
  letter-spacing:var(--ls-manifesto); color:var(--text-primary)}
.closing__cta{margin-top:var(--sp-4)}

/* entrada dos textos: frase introdutória → título sob máscara (de baixo para cima) → botão */
.closing__lead{opacity:var(--l,1); transform:translate3d(0,calc((1 - var(--l,1)) * 16px),0)}
/* máscara: overflow (mais confiável que clip-path no Safari/iPhone); folga para acentos, "j" e "ç" */
.closing__title{overflow:hidden; padding:.12em .1em .24em; margin:-.12em -.1em -.24em}
.closing__mask{display:block; transform:translate3d(0,calc((1 - var(--t,1)) * 130%),0)}
/* Safari: o degradê com background-clip:text não pinta texto de um filho em movimento (transform),
   e o texto ficava invisível no iPhone. O degradê passa para a própria camada que se move —
   mesmo resultado visual em todos os navegadores. */
.theme-light .closing__title{background:none}
.theme-light .closing__mask{width:fit-content; background:var(--grad-text); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; padding-bottom:.18em; margin-bottom:-.18em}
.closing__cta{opacity:var(--c,1); transform:translate3d(0,calc((1 - var(--c,1)) * 14px),0)}

/* celular */
.phone{justify-self:center; width:clamp(240px,22vw,320px); margin:0;
  opacity:calc(.15 + .85 * var(--ph,1));
  transform:translate3d(0,calc((1 - var(--ph,1)) * 90px),0) scale(calc(.92 + .08 * var(--ph,1)));
  filter:blur(calc((1 - var(--ph,1)) * 6px))}
.phone__body{position:relative; padding:9px; border-radius:clamp(38px,3.6vw,50px);
  background:linear-gradient(145deg,#2B2F37 0%,#0B0C10 38%,#050608 70%,#22252C 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.10),
    inset 0 0 0 3px #08090C,
    0 2px 4px rgba(8,23,56,.10),
    0 30px 60px -20px rgba(8,23,56,.40),
    0 60px 120px -40px rgba(29,80,247,.30)}
/* botões laterais */
.phone__body::before,.phone__body::after{content:""; position:absolute; width:3px; border-radius:2px; background:#1A1C22}
.phone__body::before{left:-3px; top:22%; height:12%}
.phone__body::after{right:-3px; top:28%; height:16%}
.phone__screen{position:relative; overflow:hidden; aspect-ratio:9/17; border-radius:clamp(30px,2.9vw,41px);
  background:radial-gradient(120% 80% at 50% 30%,#123A7A 0%,#081738 60%,#050A16 100%); isolation:isolate}
.phone__video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}
.phone__island{position:absolute; top:12px; left:50%; width:30%; height:22px; transform:translateX(-50%); border-radius:20px; background:#050608; z-index:2}
/* pausar/retomar: discreto, no canto da tela */
.phone__toggle{position:absolute; right:12px; bottom:14px; z-index:2; width:34px; height:34px; display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.22); border-radius:50%; color:#fff; background:rgba(8,23,56,.35);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); cursor:pointer; opacity:.75; transition:opacity .2s}
.phone__toggle:hover,.phone__toggle:focus-visible{opacity:1}
.phone__toggle:focus-visible{outline:2px solid #fff; outline-offset:2px}
.phone__toggle svg{width:15px; height:15px}
.phone__toggle .i-play,.phone.is-paused .phone__toggle .i-pause{display:none}
.phone.is-paused .phone__toggle .i-play{display:block}
/* capa: botão grande quando o navegador bloqueia a reprodução automática */
.phone__play{display:none; position:absolute; left:50%; top:50%; z-index:2; width:64px; height:64px; transform:translate(-50%,-50%);
  place-items:center; border:1px solid rgba(255,255,255,.3); border-radius:50%; color:#fff; background:rgba(8,23,56,.45);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); cursor:pointer}
.phone__play svg{width:26px; height:26px; margin-left:3px}
.phone.needs-tap .phone__play{display:grid}
.phone__play:focus-visible{outline:2px solid #fff; outline-offset:3px}
/* navegadores sem aspect-ratio: mantém a altura da tela do aparelho */
@supports not (aspect-ratio:1/1){ .phone__screen::before{content:""; display:block; padding-top:188.89%} }

@media (max-width:1024px){
  .closing-grid{grid-template-columns:1fr; gap:var(--sp-12)}
  .phone{width:min(280px,72vw)}
}


/* ---------- Revelação ao entrar na área visível (só com JS) ---------- */
.js [data-reveal]{opacity:0; transform:translateY(16px);
  transition:opacity var(--dur,520ms) var(--ease-entrance), transform var(--dur,520ms) var(--ease-entrance), filter var(--dur,520ms) var(--ease-entrance), clip-path var(--dur,800ms) var(--ease-entrance);
  transition-delay:var(--d,0ms)}
.js [data-reveal="title"]{--dur:800ms; transform:translateY(20px); filter:blur(4px)}
.js [data-reveal="image"]{--dur:800ms; opacity:1; transform:translateY(24px); clip-path:inset(100% 0 0 0 round var(--radius-xl))}
.js [data-reveal].is-in{opacity:1; transform:none; filter:none}
.js [data-reveal="image"].is-in{clip-path:inset(0 0 0 0 round var(--radius-xl))}
/* Depois da entrada (.is-done): volta às transições de interação, sem atraso */
.js [data-reveal].is-done{transition-delay:0ms}
.js .stat.is-done,.js .path.is-done{
  transition:transform var(--dur-standard) var(--ease-standard), box-shadow var(--dur-standard) var(--ease-standard), border-color var(--dur-standard) var(--ease-standard)}
.js .stat.is-done:hover,.js .path.is-done:hover,.js .path.is-done:focus-within{transform:translateY(-4px)}
.js .feature__media img{transition:transform 1.2s var(--ease-entrance)}
.js .feature__media:not(.is-in) img{transform:scale(1.08)}

/* ============================================================
   RESPONSIVO — seções claras
   ============================================================ */
@media (max-width:1024px){
  .scene--change .editorial__title{grid-column:1 / -1; max-width:14ch}
  .scene--change .editorial__text{grid-column:3 / -1; padding-top:0}
  .editorial--split > div,.editorial--split > .editorial__text{grid-column:1 / -1}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats .stat:last-child{grid-column:1 / -1}
  .paths{grid-template-columns:1fr 1fr}
  .paths .path:last-child{grid-column:1 / -1; min-height:320px}
  .feature__media,.feature--reverse .feature__media{grid-column:1 / 8}
  .feature__quote,.feature--reverse .feature__quote{grid-column:8 / 13}
  .feature--reverse .feature__media{grid-column:6 / 13}
  .feature--reverse .feature__quote{grid-column:1 / 6}
}
@media (max-width:767px){
  .feature-cover__media{aspect-ratio:4 / 5; min-height:0; max-height:none; border-radius:var(--radius-lg)}
  .feature-cover__media img{object-position:62% 35%}
  .feature-cover__shade{background:linear-gradient(0deg,rgba(3,6,14,.8) 0%,rgba(3,6,14,.45) 40%,rgba(3,6,14,.1) 70%)}
  .feature-cover__quote,.feature-cover--left .feature-cover__quote{left:var(--sp-6); right:var(--sp-6); bottom:var(--sp-6); max-width:none; font-size:1.5rem}
  .feature-cover--left .feature-cover__shade{background:linear-gradient(0deg,rgba(3,6,14,.8) 0%,rgba(3,6,14,.45) 40%,rgba(3,6,14,.1) 70%)}
  .feature-cover--left .feature-cover__media img{object-position:40% 50%}
  .feature-cover__quote span{display:inline; white-space:normal}
  .scene--change .editorial__text{grid-column:1 / -1}
  .feature{grid-template-columns:1fr; row-gap:var(--sp-8)}
  .feature__media,.feature--reverse .feature__media{grid-column:1; grid-row:1}
  .feature__quote,.feature--reverse .feature__quote{grid-column:1; grid-row:2; padding:0}
  .stats,.paths{grid-template-columns:1fr}
  .stats .stat:last-child,.paths .path:last-child{grid-column:auto}
  .stat{min-height:240px; padding:var(--sp-6)}
  .stat__label{min-height:0}
  .glow-card::before{filter:blur(20px)} .glow-card::after{filter:blur(10px)}
  .path{min-height:340px; padding:var(--sp-6)}
}

/* ---------- Mobile · espaçamentos mais compactos (somente até 767px) ---------- */
@media (max-width:767px){
  .scene--change{padding-bottom:32px}
  .scene--proof,.scene--paths{padding-top:40px; padding-bottom:32px}
  .scene--way{padding-top:40px}
  .scene--closing{padding-top:24px; padding-bottom:64px}
  .editorial{row-gap:20px}
  .scene--change .editorial{row-gap:24px}
  .feature-cover,.scene--paths .feature-cover{margin-top:40px}
  .stats,.paths{margin-top:40px}
  .ways-grow{margin-top:32px}
  .closing-grid{gap:40px}
  .closing{gap:20px}
  .closing__cta{margin-top:4px}
  /* sem desfoque no aparelho: no Safari do iPhone, filter em volta de um vídeo pode impedir que ele seja desenhado */
  .phone{filter:none; will-change:transform,opacity}
  /* frase introdutória, título e botão centralizados no celular */
  .closing__lead{align-self:center; text-align:center}
  .closing__line{display:block}   /* 3 linhas fixas: "Para emitir…" / "renovar o de sempre…" / "certificação em parte…" */
  .closing__title{align-self:center; text-align:center}
  .theme-light .closing__mask{margin-inline:auto}
  .closing__cta{align-self:center}
}

/* Bloco "O caminho muda." com a foto da pessoa caminhando (16/10): enquadra rosto e corpo inteiros */
.feature-cover--left .feature-cover__media img.feature-cover__img--caminho{object-position:50% 45%}
@media (max-width:767px){ .feature-cover--left .feature-cover__media img.feature-cover__img--caminho{object-position:51% 50%} }