/* ==========================================================================
   MaidOS — styles.css
   Camadas: 1 reset · 2 base · 3 layout · 4 componentes · 5 seções · 6 movimento
   Tokens em tokens.css. Nenhum valor cru de cor neste arquivo.
   ========================================================================== */


/* ==========================================================================
   1 · RESET
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box}
*{margin:0}

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  background:var(--paper-050);
  color:var(--text-primary);
  font-family:var(--fonte-corpo);
  font-size:var(--fs-corpo);
  line-height:var(--lh-corpo);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;            /* garante zero scroll horizontal — design.md 10 */
}

img,svg,video{display:block;max-width:100%}
img{height:auto}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:inherit}
ul,ol{list-style:none;padding:0}


/* ==========================================================================
   2 · BASE TIPOGRÁFICA — design.md 6
   ========================================================================== */

h1,h2,h3{ font-family:var(--fonte-titulo); text-wrap:balance; }

h1{ font-size:var(--fs-h1); font-weight:700; line-height:var(--lh-h1); letter-spacing:var(--ls-h1); }
h2{ font-size:var(--fs-h2); font-weight:700; line-height:var(--lh-h2); letter-spacing:var(--ls-h2); }
h3{ font-size:var(--fs-h3); font-weight:600; line-height:var(--lh-h3); letter-spacing:var(--ls-h3); }

/* Destaque de UMA palavra por título. design.md 6.2 */
.realce{ color:var(--violet-500); }
.secao--escura .realce{ color:var(--violet-300); } /* violet-500 não tem contraste sobre ink-900 */

p{ text-wrap:pretty; }
.p-largo{ font-size:var(--fs-corpo-g); color:var(--text-secondary); }

/* Largura máxima de parágrafo: 68 caracteres. design.md 6.2 */
.medida{ max-width:68ch; }
.medida--centro{ max-width:60ch; margin-inline:auto; }

.eyebrow{
  font-size:var(--fs-eyebrow); font-weight:600;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--text-muted);
}
.secao--escura .eyebrow{ color:rgba(245,245,247,.55); }

.legenda{
  font-size:var(--fs-legenda); color:var(--text-muted);
  text-align:center; margin-top:var(--e-4);
}

/* Acessibilidade: visível só para leitor de tela */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* Foco visível — nunca remover sem substituto */
:focus-visible{
  outline:2px solid var(--violet-500);
  outline-offset:2px;
  border-radius:4px;
}
.secao--escura :focus-visible,
.footer :focus-visible,
.nav-pill :focus-visible{ outline-color:var(--violet-300); }

.pular-para{
  position:absolute;left:var(--e-4);top:var(--e-4);z-index:100;
  background:var(--violet-500);color:var(--text-on-violet);
  padding:var(--e-3) var(--e-4);border-radius:var(--r-btn);
  font-weight:600;text-decoration:none;
  transform:translateY(-200%);
}
.pular-para:focus{ transform:translateY(0); }


/* ==========================================================================
   3 · LAYOUT
   ========================================================================== */

.container{
  width:100%;max-width:var(--container);
  margin-inline:auto;padding-inline:var(--gutter);
}

.secao{ padding-block:var(--secao-y); position:relative; }
.secao--alternada{ background:var(--paper-100); }
.secao--escura{ background:var(--ink-900); color:var(--text-on-dark); }

.secao__cabecalho{ text-align:center; margin-bottom:var(--e-16); }
.secao__cabecalho .eyebrow{ margin-bottom:var(--e-6); }
.secao__cabecalho h2{ margin-bottom:var(--e-4); }
.secao__cabecalho p{ margin-inline:auto; }
.secao--escura .secao__cabecalho p{ color:var(--text-on-dark-soft); }

.grade{ display:grid; gap:var(--e-4); }
.grade--3{ grid-template-columns:repeat(3,1fr); }
.grade--2{ grid-template-columns:repeat(2,1fr); }

@media (max-width:1023px){ .grade--3{grid-template-columns:repeat(2,1fr)} }
@media (max-width:767px){
  .grade--3,.grade--2{grid-template-columns:1fr}
  .secao__cabecalho{margin-bottom:var(--e-12)}
}


/* ==========================================================================
   4 · COMPONENTES
   ========================================================================== */

/* ---------- 4.1 Botões ---------- */

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:var(--e-2);
  min-height:48px;                 /* alvo de toque ≥ 44px — design.md 10 */
  padding:var(--e-3) var(--e-6);
  border-radius:var(--r-btn);
  font-size:var(--fs-corpo);font-weight:600;
  text-decoration:none;text-align:center;
  transition:background var(--t-btn) ease,border-color var(--t-btn) ease,color var(--t-btn) ease;
}
/* CTA primário — o botão do teste gratuito.
   O lampejo aparece SÓ aqui. O secundário fica limpo: dois botões
   competindo pelo olho anulam a hierarquia (design.md 5.3). */
.btn--primario{
  position:relative;overflow:hidden;
  background:var(--violet-500);color:var(--text-on-violet);
  box-shadow:var(--shadow-xs);
}
.btn--primario:hover{ background:var(--violet-700); }

/* O brilho corre sobre a superfície ROXA, não sobre o fundo claro.
   O design.md 11 proíbe glow sobre fundo claro porque luz sobre luz não
   é percebida — aqui é o oposto: luz sobre superfície escura, que aparece.
   Ciclo de 5s com sweep de 1,2s: quase 4s de quietude entre um e outro.
   Não é brilho pulsando, é lampejo ocasional. */
.btn--primario::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(105deg,
    transparent 38%,
    rgba(255,255,255,.30) 50%,
    transparent 62%);
  transform:translateX(-130%);
  animation:btn-lampejo 5s ease-in-out infinite;
  pointer-events:none;
}
.btn--primario:hover::after{ animation-duration:2.4s; }

@keyframes btn-lampejo{
  0%,72%  { transform:translateX(-130%); }
  100%    { transform:translateX(130%); }
}

.btn--fantasma{
  background:var(--paper-000);color:var(--text-primary);
  border:1px solid var(--line-200);
}
.btn--fantasma:hover{ border-color:var(--line-violet); }

/* Fantasma dentro de área escura */
.btn--fantasma-escuro{
  background:transparent;color:var(--text-on-dark);
  border:1px solid rgba(255,255,255,.16);
}
.btn--fantasma-escuro:hover{ border-color:rgba(172,118,247,.45); }

.btn--compacto{ min-height:40px; padding:var(--e-2) var(--e-4); font-size:.875rem; }

/* Microcopy do CTA — OBRIGATÓRIA junto ao primário. site.md 10.5
   Sem ela o CTA não pode ser publicado. */
.microcopy{
  display:flex;align-items:center;justify-content:center;gap:var(--e-2);
  margin-top:var(--e-4);
  font-size:var(--fs-legenda);color:var(--text-muted);
}
.microcopy svg{ width:15px;height:15px;flex:none; }
.secao--escura .microcopy{ color:rgba(245,245,247,.6); }

.acoes{ display:flex;gap:var(--e-3);justify-content:center;flex-wrap:wrap; }
@media (max-width:767px){
  .acoes{flex-direction:column}
  .acoes .btn{width:100%}          /* CTAs em largura total — design.md 10 */
}


/* ---------- 4.2 Cards ---------- */

.card{
  background:var(--paper-000);
  border:1px solid var(--line-200);
  border-radius:var(--r-card);
  padding:var(--e-6);
  box-shadow:var(--shadow-sm);
}
.card h3{ margin-bottom:var(--e-2); }
.card p{ color:var(--text-secondary); font-size:.9375rem; }

/* Só cards navegáveis recebem hover — design.md 9.1 */
.card--interativo{
  transition:transform var(--t-card) ease,border-color var(--t-card) ease,box-shadow var(--t-card) ease;
}
.card--interativo:hover{
  transform:translateY(-4px);
  border-color:var(--line-violet);
  box-shadow:var(--shadow-md);
}

/* Card sobre fundo escuro — design.md 2.7.2 */
.card--escuro{
  background:var(--ink-800);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:none;                 /* sombra sobre escuro não é percebida */
}
.card--escuro h3{ color:var(--text-on-dark); }
.card--escuro p{ color:var(--text-on-dark-soft); }


/* ---------- 4.3 Logo — lockup horizontal ----------
   O arquivo oficial é empilhado (símbolo sobre wordmark). Aqui símbolo e
   wordmark são montados lado a lado, como o próprio produto faz na sidebar. */

.logo{ display:inline-flex;align-items:center;gap:var(--e-2); }
.logo__simbolo{ height:26px;width:auto; }
.logo__wordmark{ height:15px;width:auto; }
.logo--rodape .logo__simbolo{ height:32px; }
.logo--rodape .logo__wordmark{ height:18px; }


/* ---------- 4.4 Navbar — âncora escura 1 de 4 ---------- */

.nav{
  position:sticky;top:var(--e-6);z-index:50;
  display:flex;justify-content:center;
  padding-inline:var(--gutter);
  margin-top:var(--e-6);
}
.nav-pill{
  display:flex;align-items:center;gap:var(--e-8);
  max-width:100%;
  background:var(--ink-900);
  border:1px solid rgba(255,255,255,.06);
  border-radius:var(--r-pill);
  padding:10px 10px 10px 22px;
  box-shadow:var(--shadow-md);
  transition:background var(--t-card) ease,border-color var(--t-card) ease;
}

/* Sobre a seção 3, que também é escura, a pill sumiria. design.md 2.7.1 */
.nav-pill.sobre-escuro{
  background:var(--ink-800);
  border-color:rgba(255,255,255,.12);
}

.nav-links{ display:flex;gap:var(--e-6); }
.nav-links a{
  font-size:.875rem;font-weight:500;text-decoration:none;
  color:rgba(245,245,247,.72);
  transition:color var(--t-btn) ease;
}
.nav-links a:hover{ color:var(--text-on-dark); }

.nav-toggle{ display:none;padding:var(--e-2);color:var(--text-on-dark); }
.nav-toggle svg{ width:22px;height:22px; }

@media (max-width:1023px){
  .nav-links{gap:var(--e-4)}
  .nav-links a:nth-last-child(-n+2){display:none}   /* tablet: esconde os 2 últimos */
}
/* Rótulo curto do CTA no celular. O aria-label carrega o texto completo,
   então o leitor de tela continua ouvindo a versão longa. */
.so-mobile{display:none}

@media (max-width:767px){
  .nav{top:var(--e-3);margin-top:var(--e-3)}
  .nav-pill{
    width:100%;gap:var(--e-2);
    padding:7px 7px 7px 14px;
    justify-content:flex-start;
  }
  .nav-pill .logo{margin-right:auto}
  .logo__simbolo{height:22px}
  .logo__wordmark{height:13px}

  .nav-links{
    position:fixed;inset:0;z-index:60;
    display:none;flex-direction:column;justify-content:center;align-items:center;
    gap:var(--e-8);background:var(--ink-950);
  }
  .nav-links.aberto{display:flex}
  .nav-links a{display:block!important;font-size:1.25rem}

  .nav-toggle{
    display:flex;align-items:center;justify-content:center;
    position:relative;z-index:70;
    width:40px;height:40px;padding:0;flex:none;
  }
  .nav-pill .btn{
    font-size:.8125rem;padding:var(--e-2) var(--e-4);
    min-height:40px;white-space:nowrap;flex:none;
  }

  .so-desktop{display:none}
  .so-mobile{display:inline}
}


/* ---------- 4.5 Moldura do produto — design.md 8.2 ---------- */

.moldura{
  background:var(--paper-000);
  border:1px solid var(--line-200);
  border-radius:var(--r-moldura);
  overflow:hidden;
  box-shadow:var(--shadow-lg);
}
.moldura--hero{ box-shadow:var(--shadow-violet); }  /* única com sombra roxa */
.moldura__barra{
  height:32px;background:var(--paper-100);
  border-bottom:1px solid var(--line-200);
  display:flex;align-items:center;gap:7px;padding-left:14px;
}
.moldura__barra i{ width:8px;height:8px;border-radius:var(--r-pill);background:var(--line-300); }
.moldura img{ width:100%; }


/* ==========================================================================
   5 · SEÇÕES
   ========================================================================== */

/* ---------- 5.1 Hero ---------- */

.hero{ position:relative;padding-top:var(--e-24);overflow:hidden; }

/* textura-grid-clara — asset 31, 2,5% */
.hero__grid{
  position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(var(--line-200) 1px,transparent 1px),
    linear-gradient(90deg,var(--line-200) 1px,transparent 1px);
  background-size:48px 48px;opacity:.025;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,#000 40%,transparent 100%);
          mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,#000 40%,transparent 100%);
}
/* wash-hero — asset 29, teto 0.11 */
.hero__wash{
  position:absolute;left:50%;top:52%;translate:-50% 0;
  width:min(1100px,92vw);height:620px;pointer-events:none;
  background:var(--wash-violet);
}
.hero__conteudo{ position:relative;z-index:2;text-align:center; }
.hero__conteudo .eyebrow{ margin-bottom:var(--e-6); }
.hero h1{ max-width:900px;margin:0 auto var(--e-6); }
.hero .p-largo{ margin:0 auto var(--e-12); max-width:60ch; }

/* O diagrama de nós foi removido do hero em 13/08/2026, a pedido do cliente.
   O hero se sustenta em tipografia + wash + painel do produto. */

.hero__produto{ position:relative;z-index:2;margin-top:var(--e-24); }
.hero__produto .moldura{ max-width:1020px;margin-inline:auto; }
.hero__produto .legenda{ padding-bottom:var(--e-24); }

/* ---------- 5.1.1 Hero — o painel se assenta conforme a rolagem ----------
   Referência do cliente: componente React "ContainerScroll" (Aceternity).
   Reconstruído em CSS transform, sem framer-motion e sem dependência.

   O JS só escreve --hero-progresso (0 a 1). Toda a interpolação está aqui,
   então dá para recalibrar o efeito inteiro sem tocar em JavaScript.

   ⚠️ INCLINAÇÃO 3D LIGADA — substitui o design.md 8.2, por decisão do cliente
   em 14/08/2026, reafirmada depois de eu recusar a primeira versão. O item 8.2
   proibia inclinação 3D em moldura de produto. A exceção vale SÓ para este
   painel do hero e SÓ enquanto ele se assenta: rotateX resolve em 0deg assim
   que o visitante rola, e o painel passa o resto do tempo reto. Não estender
   para a seção 7, a 9 ou qualquer outra moldura. */

.hero{ --hero-progresso:0; --hero-inclinacao:20deg; }

/* Nada disto se aplica sem JS: a classe entra pelo módulo iniciarHeroRolagem.
   Sem script, o hero fica estático e inteiro. */
.hero--rolagem .hero__conteudo{
  transform:translate3d(0,calc(var(--hero-progresso) * -40px),0);
  opacity:calc(1 - var(--hero-progresso) * .55);
  will-change:transform,opacity;
}

/* perspective:1000px é o valor do modelo. Mais alto achata a inclinação e
   ela deixa de ser percebida; mais baixo distorce o texto da interface. */
.hero--rolagem .hero__produto{ perspective:1000px; }

.hero--rolagem .hero__palco{
  transform-origin:50% 50%;
  transform:
    rotateX(calc((1 - var(--hero-progresso)) * var(--hero-inclinacao)))
    scale(calc(1.05 - .05 * var(--hero-progresso)));
  will-change:transform;
}

@media (max-width:1023px){
  .hero__produto{margin-top:var(--e-16)}
}
@media (max-width:767px){
  .hero{padding-top:var(--e-12)}
  .hero__produto{margin-top:var(--e-12)}
  .hero__produto .legenda{padding-bottom:var(--e-16)}
  /* No celular a inclinação cai de 20° para 10°. A 375px o painel tem 335px
     de largura: a 20° o texto da interface deita e vira borrão. design.md 10 */
  .hero{ --hero-inclinacao:10deg; }
  .hero--rolagem .hero__produto{ perspective:700px; }
  .hero--rolagem .hero__palco{
    transform:rotateX(calc((1 - var(--hero-progresso)) * var(--hero-inclinacao)));
  }
  .hero--rolagem .hero__conteudo{ transform:none;opacity:1; }
}

/* O módulo nem roda em reduced-motion, então a classe não entra e nada
   aqui se aplica. Este bloco é cinto e suspensório — se a classe chegar
   por qualquer caminho, o hero volta ao estado assentado. design.md 9.3 */
@media (prefers-reduced-motion:reduce){
  .hero--rolagem .hero__conteudo,
  .hero--rolagem .hero__palco{ transform:none!important;opacity:1!important; }
}


/* ---------- 5.2 Problema — âncora escura 2 de 4 ---------- */

.problema{ position:relative;overflow:hidden; }

/* Gráfico de dispersão — asset 22, reespecificado para escuro */
.dispersao{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  display:flex;justify-content:center;align-items:center;opacity:.25;
}
.dispersao svg{ width:min(1440px,130vw);height:auto; }
.frag{ fill:rgba(255,255,255,.10);stroke:rgba(255,255,255,.16);stroke-width:1.5; }
.frag-linha{ fill:none;stroke:rgba(255,255,255,.16);stroke-width:1.5;stroke-linecap:round; }

.problema .container{ position:relative;z-index:1; }
.problema__fecho{
  margin-top:var(--e-16);text-align:center;
  font-size:var(--fs-corpo-g);color:var(--text-on-dark);
  max-width:58ch;margin-inline:auto;
}

@media (max-width:767px){ .dispersao{display:none} }


/* ---------- 5.3 Nova forma de operar ---------- */

.fecho{
  margin-top:var(--e-16);text-align:center;
  font-size:var(--fs-corpo-g);color:var(--text-secondary);
  max-width:58ch;margin-inline:auto;
}

.comparativo{
  display:grid;grid-template-columns:1fr 1fr;gap:var(--e-4);
  max-width:960px;margin-inline:auto;
}
.comparativo__col{
  background:var(--paper-000);border:1px solid var(--line-200);
  border-radius:var(--r-card);padding:var(--e-8);
}
/* Um único acento na seção: a coluna "depois". design.md 5.3 */
.comparativo__col--depois{ border-color:var(--line-violet); }

.comparativo__rot{
  font-size:var(--fs-eyebrow);font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-muted);
  padding-bottom:var(--e-4);margin-bottom:var(--e-4);
  border-bottom:1px solid var(--line-200);
}
.comparativo__col--depois .comparativo__rot{ color:var(--violet-600); }

.comparativo li{
  padding:var(--e-3) 0;color:var(--text-secondary);
  border-bottom:1px solid var(--line-100);
}
.comparativo li:last-child{ border-bottom:0;padding-bottom:0; }
.comparativo__col--depois li{ color:var(--text-primary); }

@media (max-width:767px){ .comparativo{grid-template-columns:1fr} }


/* ---------- 5.4 Mídia + texto ---------- */

.midia-texto{
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:var(--e-16);align-items:center;
}
.midia-texto__figura{ margin:0; }
.midia-texto__figura img{
  width:100%;border-radius:var(--r-card);
  border:1px solid var(--line-200);box-shadow:var(--shadow-sm);
}
.midia-texto__corpo .eyebrow{ margin-bottom:var(--e-4); }
.midia-texto__corpo h2{ margin-bottom:var(--e-6); }
.midia-texto__corpo p + p{ margin-top:var(--e-4);color:var(--text-secondary); }

.pilares{ margin-top:var(--e-12);display:grid;gap:var(--e-6); }
.pilares li{
  padding-left:var(--e-4);border-left:2px solid var(--line-300);
  color:var(--text-secondary);font-size:.9375rem;
}
.pilares strong{
  display:block;font-family:var(--fonte-titulo);font-weight:600;
  font-size:1.0625rem;color:var(--text-primary);margin-bottom:var(--e-1);
}

@media (max-width:1023px){
  .midia-texto{grid-template-columns:1fr;gap:var(--e-12)}
  .midia-texto__figura img{max-height:420px;object-fit:cover;object-position:center left}
}
@media (max-width:767px){
  .midia-texto__figura img{aspect-ratio:1/1;object-position:30% center}
  .pilares{margin-top:var(--e-8)}
}


/* ---------- 5.5 Como funciona ---------- */

.passos{
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--e-6);
  counter-reset:passo;
}
.passo{
  background:var(--paper-000);border:1px solid var(--line-200);
  border-radius:var(--r-card);overflow:hidden;
  box-shadow:var(--shadow-sm);
  display:flex;flex-direction:column;
}
.passo__visual{
  background:var(--paper-100);border-bottom:1px solid var(--line-200);
  height:180px;overflow:hidden;display:flex;align-items:center;justify-content:center;
}
.passo__visual img{
  width:100%;height:100%;object-fit:cover;object-position:top left;
}
.passo__num{
  font-size:var(--fs-eyebrow);font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--violet-600);
  padding:var(--e-6) var(--e-6) 0;
}
.passo h3{ padding:var(--e-2) var(--e-6) 0; }
.passo > p:last-child{
  padding:var(--e-3) var(--e-6) var(--e-8);
  color:var(--text-secondary);font-size:.9375rem;
}

@media (max-width:1023px){ .passos{grid-template-columns:1fr;max-width:640px;margin-inline:auto} }


/* ---------- 5.6 Card stack das nove áreas ----------
   Leque contido: rotação suave e profundidade por escala.
   Sem rotateX nem translateZ sobre a tela do produto — o design.md 8.2
   proíbe inclinação 3D em moldura de produto, e o 9.2 proíbe efeito 3D
   excessivo. O leque entrega o padrão sem violar nenhuma das duas. */

.carta{
  background:var(--paper-000);
  border:1px solid var(--line-200);
  border-radius:var(--r-card);
  overflow:hidden;
  display:flex;flex-direction:column;
  height:100%;
}
.carta__visual{
  background:var(--paper-100);
  border-bottom:1px solid var(--line-200);
  height:196px;overflow:hidden;flex:none;
}
.carta__visual img{ width:100%;height:100%;object-fit:cover;object-position:top left; }
.carta__visual--alto img{ object-position:top center; }
.carta__visual--baixo{ display:flex;align-items:center;padding:var(--e-4); }
.carta__visual--baixo img{ height:auto;object-fit:contain;border-radius:8px; }

.carta__texto{ padding:var(--e-6); }
.carta__texto h3{ margin:var(--e-3) 0 var(--e-2); }
.carta__texto p{ color:var(--text-secondary);font-size:.9375rem; }

.icone{ width:26px;height:26px;color:var(--text-muted);transition:color var(--t-card) ease; }
.pilha__carta[data-ativo="true"] .icone{ color:var(--violet-500); }

/* ----- Palco ----- */

.pilha__palco{
  position:relative;
  height:460px;
  overflow:hidden;          /* o leque sangra nas laterais, de propósito */
  margin-inline:calc(var(--gutter) * -1);
  padding-inline:var(--gutter);
}
.pilha__cartas{ position:absolute;inset:0;display:block; }

.pilha__carta{
  position:absolute;
  top:0;left:50%;
  width:440px;height:440px;
  margin-left:-220px;
  transform:translate3d(var(--x,0px),var(--y,0px),0) rotate(var(--r,0deg)) scale(var(--s,1));
  opacity:var(--o,1);
  z-index:var(--z,1);
  transition:transform 420ms var(--ease-saida),opacity 420ms var(--ease-saida);
  will-change:transform;
}
.pilha__carta[hidden]{ display:none; }

.pilha__carta[data-ativo="false"]{ cursor:pointer; }
.pilha__carta[data-ativo="false"] .carta{ box-shadow:var(--shadow-sm); }
.pilha__carta[data-ativo="false"]:hover{ --s:calc(var(--s-base) + .02); }

.pilha__carta[data-ativo="true"]{ cursor:grab; }
.pilha__carta[data-ativo="true"]:active{ cursor:grabbing; }
.pilha__carta[data-ativo="true"] .carta{
  box-shadow:var(--shadow-lg);          /* teto 0.14 — design.md 5.2 */
  border-color:var(--line-violet);
}
.pilha__carta.arrastando{ transition:none; }

/* ----- Controles ----- */

.pilha__controles{
  display:flex;align-items:center;justify-content:center;gap:var(--e-4);
  margin-top:var(--e-8);
}
.pilha__seta{
  width:44px;height:44px;                /* alvo de toque — design.md 10 */
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line-200);border-radius:var(--r-pill);
  background:var(--paper-000);color:var(--text-secondary);
  transition:border-color var(--t-btn) ease,color var(--t-btn) ease;
}
.pilha__seta svg{ width:18px;height:18px; }
.pilha__seta:hover{ border-color:var(--line-violet);color:var(--violet-500); }

.pilha__pontos{ display:flex;align-items:center;gap:var(--e-2); }
.pilha__pontos button{
  width:24px;height:24px;                /* área de toque; o ponto é menor */
  display:flex;align-items:center;justify-content:center;
  border-radius:var(--r-pill);
}
.pilha__pontos button::before{
  content:"";width:8px;height:8px;border-radius:var(--r-pill);
  background:var(--line-300);
  transition:background var(--t-btn) ease,width var(--t-btn) ease;
}
.pilha__pontos button:hover::before{ background:var(--text-muted); }
.pilha__pontos button[aria-current="true"]::before{ background:var(--violet-500);width:22px; }

/* ----- Celular: vira lista vertical -----
   Esconder 8 de 9 áreas atrás de um gesto seria pior do que rolar.
   design.md 10: priorizar leitura. */
@media (max-width:767px){
  .pilha__palco{ height:auto;overflow:visible;margin-inline:0;padding-inline:0; }
  .pilha__cartas{ position:static;display:grid;gap:var(--e-4); }
  .pilha__carta{
    position:static;width:auto;height:auto;margin-left:0;
    transform:none!important;opacity:1!important;
  }
  .pilha__carta[hidden]{ display:block; }
  .pilha__carta[data-ativo="true"] .carta,
  .pilha__carta[data-ativo="false"] .carta{
    box-shadow:var(--shadow-sm);border-color:var(--line-200);
  }
  .pilha__carta[data-ativo="true"],
  .pilha__carta[data-ativo="false"]{ cursor:auto; }
  .pilha__controles{ display:none; }
  .carta__visual{ height:170px; }
}


/* ---------- 5.7 Conexão ---------- */

.conexao__midia{
  display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);
  gap:var(--e-4);margin-bottom:var(--e-16);
}
.conexao__midia figure{ margin:0;border-radius:var(--r-card);overflow:hidden;
  border:1px solid var(--line-200);box-shadow:var(--shadow-sm); }
.conexao__midia img{ width:100%;height:100%;object-fit:cover; }
.conexao__midia figure:first-child{ aspect-ratio:16/10; }
.conexao__midia figure:last-child{ aspect-ratio:4/5; }

.perfis{ display:grid;grid-template-columns:repeat(4,1fr);gap:var(--e-4); }
.perfil__rot{
  font-size:var(--fs-eyebrow);font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--violet-600);margin-bottom:var(--e-3);
}
.perfis h3{ font-size:1.0625rem;margin-bottom:var(--e-2); }

@media (max-width:1023px){
  .conexao__midia{grid-template-columns:1fr}
  .conexao__midia figure:last-child{aspect-ratio:16/10}
  .perfis{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:767px){ .perfis{grid-template-columns:1fr} }


/* ---------- 5.8 Demonstração multi-dispositivo ---------- */

.demo__par{ position:relative;padding-right:120px; }
.demo__desktop{ width:100%; }
.demo__mobile{
  position:absolute;right:0;bottom:-32px;
  width:210px;border-radius:26px;overflow:hidden;
  border:1px solid var(--line-300);
  box-shadow:var(--shadow-lg);
}
.demo__mobile img{ width:100%; }
.demo .legenda{ margin-top:var(--e-16); }

@media (max-width:1023px){
  .demo__par{padding-right:0;display:flex;flex-direction:column;align-items:center;gap:var(--e-8)}
  .demo__mobile{position:static;width:190px}
  .demo .legenda{margin-top:var(--e-8)}
}


/* ---------- 5.9 Benefícios ---------- */

.beneficios .card h3{ margin-bottom:var(--e-3); }
.faixa-foto{
  margin:var(--e-16) 0 0;border-radius:var(--r-card);overflow:hidden;
  border:1px solid var(--line-200);box-shadow:var(--shadow-sm);
  aspect-ratio:32/9;
}
.faixa-foto img{ width:100%;height:100%;object-fit:cover;object-position:center 60%; }
@media (max-width:767px){ .faixa-foto{display:none} }


/* ---------- 5.10 Segurança — cards com indicador semicircular ----------
   O arco é DECORATIVO e sempre completo. Arco parcialmente preenchido
   leria como pontuação, e o site.md item 13 proíbe afirmar índices,
   certificações ou garantias de segurança. Sem números, sem porcentagem. */

.medidores{ align-items:stretch; }

.medidor{ display:flex;flex-direction:column;padding:var(--e-8) var(--e-6) var(--e-6); }

.medidor__topo{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:var(--e-3);margin-bottom:var(--e-6);
}
.medidor__topo h3{ margin:0; }

.selo{
  flex:none;
  padding:5px 11px;border-radius:var(--r-pill);
  background:var(--paper-200);
  font-size:.6875rem;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--violet-600);
  white-space:nowrap;
}

.medidor__arco{ position:relative;margin-bottom:var(--e-6); }
.medidor__arco svg{ width:100%;max-width:220px;height:auto;margin-inline:auto;display:block; }

.arco-trilho{
  fill:none;stroke:var(--line-200);stroke-width:9;stroke-linecap:round;
}
.arco-ativo{
  fill:none;stroke:var(--violet-500);stroke-width:9;stroke-linecap:round;
  stroke-dasharray:252;stroke-dashoffset:252;
  transition:stroke-dashoffset 1100ms var(--ease-saida);
  transition-delay:calc(var(--i,0) * var(--stagger) + 180ms);
}
/* Marca de conclusão. Fecha o gesto do arco sem colocar número na tela:
   um "100%" aqui seria afirmar garantia de segurança — proibido pelo
   site.md item 13, e sem nenhuma medição por trás. */
.arco-selo{
  opacity:0;
  transform:scale(.4);
  transform-origin:180px 100px;
  transition:opacity 240ms ease,
             transform 340ms cubic-bezier(.34,1.4,.64,1);
  transition-delay:calc(var(--i,0) * var(--stagger) + 1180ms);
}
.arco-selo path{
  stroke-dasharray:16;stroke-dashoffset:16;
  transition:stroke-dashoffset 300ms ease;
  transition-delay:calc(var(--i,0) * var(--stagger) + 1380ms);
}

/* O arco e o selo só entram quando a carta aparece em cena */
.revelar.visivel .arco-ativo{ stroke-dashoffset:0; }
.revelar.visivel .arco-selo{ opacity:1;transform:scale(1); }
.revelar.visivel .arco-selo path{ stroke-dashoffset:0; }

.medidor__rot{
  position:absolute;left:50%;bottom:2px;translate:-50% 0;
  display:flex;flex-direction:column;align-items:center;gap:2px;
  text-align:center;width:100%;
}
.medidor__rot span{
  font-size:.6875rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-muted);
}
.medidor__rot strong{
  font-family:var(--fonte-titulo);font-size:1.0625rem;font-weight:600;
  color:var(--text-primary);letter-spacing:-.01em;
}

.medidor__texto{
  color:var(--text-secondary);font-size:.9375rem;
  margin-bottom:var(--e-6);flex:1;
}

.link-carta{
  display:inline-flex;align-items:center;gap:var(--e-2);
  font-size:.9375rem;font-weight:600;color:var(--violet-600);
  text-decoration:none;
  transition:color var(--t-btn) ease,gap var(--t-btn) ease;
}
.link-carta span{ transition:transform var(--t-btn) ease; }
.link-carta:hover{ color:var(--violet-700);gap:var(--e-3); }
.link-carta:hover span{ transform:translateX(2px); }

@media (prefers-reduced-motion:reduce){
  .arco-ativo{ stroke-dashoffset:0; }
  .arco-selo{ opacity:1;transform:none; }
  .arco-selo path{ stroke-dashoffset:0; }
}


/* ---------- 5.11 IA — camada opcional ---------- */

.camada{
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:var(--e-16);align-items:center;
}
.camada__grafico{ width:100%;max-width:400px;height:auto;margin-inline:auto;display:block; }
.camada__texto p + p{ margin-top:var(--e-4);color:var(--text-secondary); }

.camada__rot{
  margin-top:var(--e-8)!important;
  font-size:var(--fs-eyebrow);font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-muted)!important;
}

/* Nota obrigatória: as direções não são funcionalidades disponíveis. */
.nota{
  margin-top:var(--e-6)!important;
  padding:var(--e-3) var(--e-4);
  background:var(--paper-000);border:1px solid var(--line-violet);
  border-radius:var(--r-btn);
  font-size:.875rem;color:var(--violet-900)!important;
}
.nota--centro{ max-width:52ch;margin-inline:auto;text-align:center; }


/* ---------- 5.11.1 Órbita das direções em estudo ----------
   Carrossel circular em CSS transform. As seis possibilidades giram ao
   redor do centro: a forma diz o que o texto diz — são direções ao redor
   da operação, não recursos dentro dela.
   Sem giro automático: o design.md 9.2 proíbe movimento constante que
   atrapalhe a leitura. */

.direcoes{ text-align:center; }

.orbita{
  position:relative;
  width:min(450px,100%);aspect-ratio:1;
  margin-inline:auto;
}
.orbita__anel{
  position:absolute;inset:14%;
  border-radius:50%;
  border:1px dashed var(--line-200);
}
.orbita__centro{
  position:absolute;left:50%;top:50%;translate:-50% -50%;
  width:132px;height:132px;border-radius:50%;
  background:var(--paper-000);border:1px solid var(--line-200);
  display:grid;place-items:center;
  box-shadow:var(--shadow-sm);
}
.orbita__centro::before{
  content:"";position:absolute;inset:-46px;border-radius:50%;
  background:var(--wash-violet);pointer-events:none;
}
.orbita__contador{
  position:relative;
  font-family:var(--fonte-titulo);font-size:1.375rem;font-weight:600;
  color:var(--text-primary);
}
.orbita__contador i{ font-style:normal;color:var(--line-300);margin:0 2px; }

.orbita__itens{ position:absolute;inset:0; }
.orbita__itens li{
  position:absolute;left:50%;top:50%;
  width:134px;margin-left:-67px;margin-top:-22px;
  transform:rotate(var(--a,0deg)) translateY(-152px) rotate(calc(var(--a,0deg) * -1));
  transition:transform 520ms var(--ease-saida);
}
.orbita__itens button{
  width:100%;
  padding:10px var(--e-2);
  border-radius:var(--r-btn);
  background:var(--paper-000);
  border:1px solid var(--line-200);
  font-size:.75rem;line-height:1.35;font-weight:500;
  color:var(--text-secondary);
  box-shadow:var(--shadow-xs);
  transition:border-color var(--t-card) ease,color var(--t-card) ease,
             transform var(--t-card) ease,box-shadow var(--t-card) ease;
}
.orbita__itens button:hover{ border-color:var(--line-violet);color:var(--text-primary); }
.orbita__itens li[aria-current="true"] button{
  border-color:var(--line-violet);
  color:var(--violet-600);font-weight:600;
  transform:scale(1.06);
  box-shadow:var(--shadow-md);
}

.orbita__controles{
  display:flex;align-items:center;justify-content:center;gap:var(--e-3);
  margin-top:var(--e-6);
}

/* Celular: a órbita não cabe. Vira lista, como as chips eram. */
@media (max-width:767px){
  .orbita{ width:100%;aspect-ratio:auto; }
  .orbita__anel,.orbita__centro{ display:none; }
  .orbita__itens{
    position:static;
    display:flex;flex-wrap:wrap;gap:var(--e-2);justify-content:center;
  }
  .orbita__itens li{
    position:static;width:auto;margin:0;transform:none!important;
  }
  .orbita__itens button{ padding:8px 14px;border-radius:var(--r-pill); }
  .orbita__itens li[aria-current="true"] button{ transform:none; }
  .orbita__controles{ display:none; }
}

@media (max-width:1023px){
  .camada{grid-template-columns:1fr;gap:var(--e-12)}
  .camada__grafico{max-width:320px}
}
@media (max-width:767px){ .camada__grafico{max-width:260px} }


/* ---------- 5.11.2 Depoimentos — muro em rolagem ----------
   ⚠️ Substituição consciente do design.md 9.2, autorizada em 13/08/2026.
   A regra proíbe "movimento constante que prejudique a leitura" e
   "animação em loop dentro de blocos de texto". Depoimento é bloco de
   texto em loop. O cliente optou pela rolagem do modelo, com três travas:
     · pausa no hover e no foco de teclado
     · desligada por completo em prefers-reduced-motion
     · abaixo de 1024px vira grade estática, sem animação nenhuma
   Sem essas travas o conteúdo ficaria ilegível para parte dos visitantes. */

.muro{
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--e-4);
  max-height:560px;overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 12%,#000 88%,transparent);
          mask-image:linear-gradient(to bottom,transparent,#000 12%,#000 88%,transparent);
}
.muro__col{ overflow:hidden; }
.muro__trilho{
  display:grid;gap:var(--e-4);
  animation:muro-subir var(--dur,40s) linear infinite;
}
.muro__grupo{ display:grid;gap:var(--e-4); }

@keyframes muro-subir{
  from{ transform:translateY(0); }
  to  { transform:translateY(-50%); }
}

/* Pausa quando o visitante quer ler */
.muro:hover .muro__trilho,
.muro:focus-within .muro__trilho{ animation-play-state:paused; }

.muro blockquote{
  background:var(--paper-000);
  border:1px solid var(--line-200);
  border-radius:var(--r-card);
  padding:var(--e-6);
  box-shadow:var(--shadow-sm);
  margin:0;
}
.muro blockquote p{
  color:var(--text-secondary);font-size:.9375rem;line-height:1.6;
  margin-bottom:var(--e-6);
}
.muro blockquote footer{ display:flex;align-items:center;gap:var(--e-3); }
.muro__ini{
  flex:none;width:40px;height:40px;border-radius:var(--r-pill);
  display:grid;place-items:center;
  background:var(--paper-200);
  font-size:.8125rem;font-weight:600;color:var(--violet-600);
  letter-spacing:.02em;
}
.muro blockquote footer span:last-child{
  display:flex;flex-direction:column;
  font-size:.8125rem;color:var(--text-muted);line-height:1.35;
}
.muro blockquote footer strong{
  font-family:var(--fonte-titulo);font-size:.9375rem;font-weight:600;
  color:var(--text-primary);
}

/* Abaixo de 1024px: grade estática, sem loop. O eco duplicado sai do DOM
   visual para não repetir depoimento. */
@media (max-width:1023px){
  .muro{
    grid-template-columns:repeat(2,1fr);
    max-height:none;overflow:visible;
    -webkit-mask-image:none;mask-image:none;
  }
  .muro__col{ overflow:visible; }
  .muro__trilho{ animation:none; }
  .muro__grupo--eco{ display:none; }
}
@media (max-width:767px){
  .muro{ grid-template-columns:1fr; }
}

@media (prefers-reduced-motion:reduce){
  .muro{ max-height:none;overflow:visible;-webkit-mask-image:none;mask-image:none; }
  .muro__trilho{ animation:none!important; }
  .muro__grupo--eco{ display:none; }
}


/* ---------- 5.12 FAQ ---------- */

.faq{ max-width:760px;margin-inline:auto; }
.faq__item{
  background:var(--paper-000);border:1px solid var(--line-200);
  border-radius:var(--r-btn);margin-bottom:var(--e-3);
  transition:border-color var(--t-card) ease;
}
.faq__item:hover{ border-color:var(--line-violet); }
.faq__item[open]{ border-color:var(--line-violet); }

.faq__item summary{
  list-style:none;cursor:pointer;
  padding:var(--e-4) var(--e-6);
  font-family:var(--fonte-titulo);font-weight:600;font-size:1.0625rem;
  display:flex;align-items:center;justify-content:space-between;gap:var(--e-4);
  min-height:56px;
}
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary::after{
  content:"";flex:none;width:12px;height:12px;
  border-right:2px solid var(--text-muted);border-bottom:2px solid var(--text-muted);
  transform:rotate(45deg) translate(-2px,-2px);
  transition:transform var(--t-card) ease;
}
.faq__item[open] summary::after{ transform:rotate(-135deg) translate(-2px,-2px); }
.faq__resposta{ padding:0 var(--e-6) var(--e-6); }
.faq__resposta p{ color:var(--text-secondary); }


/* ---------- 5.13 CTA final — âncora escura 3 de 4 ---------- */

.cta-secao{ padding-bottom:var(--e-32); }
.cta-final{
  position:relative;overflow:hidden;
  border-radius:var(--r-card);
  padding:var(--e-24) var(--e-8);
  text-align:center;
}
/* Laços em movimento atrás do CTA.
   Referência do cliente: componente React "BackgroundPaths" (animated-infinity-background).
   Reconstruído em SVG + CSS puro — nenhuma dependência, nenhuma mudança de stack.

   Enquadramento no design.md 9.2: a regra proíbe "movimento constante que prejudique a
   leitura", e no mesmo item autoriza pulso decorativo com "ciclo lento, >= 4s, opacidade
   <= 0.5". É esse o padrão aqui — ciclo de 28 a 42s, pico de .45, traço de 1,5px.
   O texto fica acima do wash, que funciona como scrim e preserva o contraste.
   Item 11 ("glow sobre fundo claro") não se aplica: o card é âncora escura. */
.cta-final__lacos{
  position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;
}
.cta-final__lacos use{ fill:none; }

.laco-base{ stroke:url(#cta-traco);stroke-width:1; }
.laco-fluxo{
  stroke:url(#cta-pulso);stroke-width:1.5;stroke-linecap:round;
  /* pathLength="1000" no path de origem normaliza o traço:
     todos os anéis correm o mesmo ciclo, independentemente da escala. */
  stroke-dasharray:150 850;
  stroke-dashoffset:1000;
  animation:laco-fluir var(--d,34s) linear infinite;
  animation-delay:calc(var(--i,0) * -2.6s);
}
@keyframes laco-fluir{ to{ stroke-dashoffset:0 } }

.cta-final__wash{
  position:absolute;left:50%;top:45%;translate:-50% -50%;
  width:min(760px,90%);height:420px;pointer-events:none;
  /* Além do glow autorizado pelo design.md 2.4, este wash é o scrim dos laços:
     escurece o miolo do card e devolve contraste ao H2 e ao parágrafo. */
  background:
    radial-gradient(ellipse,rgba(154,62,244,.18) 0%,transparent 70%),
    radial-gradient(ellipse 54% 48% at 50% 50%,rgba(13,13,17,.58) 0%,transparent 78%);
}
.cta-final__conteudo{ position:relative;z-index:1; }
.cta-final h2{ margin-bottom:var(--e-4);max-width:20ch;margin-inline:auto; }
.cta-final .p-largo{ color:var(--text-on-dark-soft);margin-bottom:var(--e-8); }

@media (max-width:767px){
  .cta-final{ padding:var(--e-16) var(--e-6); }
  /* No celular o card é estreito: os anéis externos saem quase todos fora do
     recorte e só custam pintura. design.md 10 — "reduzir animações quando necessário". */
  .laco--externo{ display:none; }
}


/* ---------- 5.14 Footer — âncora escura 4 de 4 ---------- */

.footer{ background:var(--ink-950);color:var(--text-on-dark);padding-top:var(--e-24); }
.footer__grade{
  display:grid;grid-template-columns:minmax(0,2fr) repeat(3,minmax(0,1fr));
  gap:var(--e-12);padding-bottom:var(--e-16);
}
.footer__marca p{
  margin-top:var(--e-4);color:var(--text-on-dark-soft);
  font-size:.9375rem;max-width:34ch;
}
.footer__col h2{
  font-family:var(--fonte-corpo);font-size:var(--fs-eyebrow);font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;
  color:rgba(245,245,247,.5);margin-bottom:var(--e-4);
}
.footer__col li + li{ margin-top:var(--e-3); }
.footer__col a{
  color:var(--text-on-dark-soft);text-decoration:none;font-size:.9375rem;
  transition:color var(--t-btn) ease;
}
.footer__col a:hover{ color:var(--text-on-dark); }

.footer__base{
  display:flex;justify-content:space-between;gap:var(--e-4);flex-wrap:wrap;
  padding-block:var(--e-6);
  border-top:1px solid rgba(255,255,255,.08);
  font-size:.875rem;color:rgba(245,245,247,.45);
}

@media (max-width:1023px){
  .footer__grade{grid-template-columns:1fr 1fr;gap:var(--e-8)}
  .footer__marca{grid-column:1 / -1}
}
@media (max-width:767px){
  .footer{padding-top:var(--e-16)}
  .footer__grade{grid-template-columns:1fr}
  .footer__base{justify-content:flex-start}
}


/* ---------- 5.15 Páginas legais ---------- */

.legal{ padding-block:var(--e-24) var(--e-32); }
.legal__wrap{ max-width:760px;margin-inline:auto; }
.legal__voltar{
  display:inline-flex;align-items:center;gap:var(--e-2);
  font-size:.9375rem;font-weight:500;color:var(--violet-600);
  text-decoration:none;margin-bottom:var(--e-8);
}
.legal__voltar:hover{ color:var(--violet-700);text-decoration:underline; }
.legal h1{ font-size:clamp(2rem,1.6rem + 1.7vw,2.75rem);margin-bottom:var(--e-3); }
.legal__meta{ color:var(--text-muted);font-size:.9375rem;margin-bottom:var(--e-16); }

.legal h2{
  font-size:1.375rem;margin-top:var(--e-16);margin-bottom:var(--e-4);
  padding-top:var(--e-8);border-top:1px solid var(--line-200);
}
.legal h3{ font-size:1.0625rem;margin-top:var(--e-8);margin-bottom:var(--e-3); }
.legal p{ color:var(--text-secondary);margin-bottom:var(--e-4);max-width:68ch; }
.legal ul{ margin:0 0 var(--e-4);display:grid;gap:var(--e-2); }
.legal li{
  color:var(--text-secondary);padding-left:var(--e-4);position:relative;max-width:66ch;
}
.legal li::before{
  content:"";position:absolute;left:0;top:.7em;
  width:5px;height:5px;border-radius:50%;background:var(--line-300);
}
.legal strong{ color:var(--text-primary);font-weight:600; }
.legal a{ color:var(--violet-600); }
.legal a:hover{ color:var(--violet-700); }

.legal__tabela{
  width:100%;border-collapse:collapse;margin-bottom:var(--e-6);
  border:1px solid var(--line-200);border-radius:var(--r-btn);overflow:hidden;
}
.legal__tabela th,.legal__tabela td{
  text-align:left;padding:var(--e-3) var(--e-4);
  border-bottom:1px solid var(--line-200);font-size:.9375rem;
}
.legal__tabela th{ background:var(--paper-100);font-weight:600;color:var(--text-primary); }
.legal__tabela td{ color:var(--text-secondary); }
.legal__tabela tr:last-child td{ border-bottom:0; }

@media (max-width:767px){
  .legal{padding-block:var(--e-16) var(--e-24)}
  .legal__tabela{display:block;overflow-x:auto}
}


/* ==========================================================================
   6 · MOVIMENTO — design.md 9
   ========================================================================== */

.revelar{
  opacity:0;transform:translateY(24px);
  transition:opacity var(--t-entrada) var(--ease-saida),
             transform var(--t-entrada) var(--ease-saida);
}
.revelar.visivel{ opacity:1;transform:none; }

/* Stagger por índice — zero JS, só transition-delay */
.revelar[style*="--i"]{ transition-delay:calc(var(--i) * var(--stagger)); }

/* Reveal palavra a palavra — só no hero. design.md 9.1 */
.palavra{
  display:inline-block;opacity:0;transform:translateY(.35em);
  transition:opacity 500ms var(--ease-saida),transform 500ms var(--ease-saida);
}
.revelado .palavra{ opacity:1;transform:none; }

/* Não é opcional. design.md 9.3 */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
  .revelar,.palavra{opacity:1!important;transform:none!important}
  .btn--primario::after{display:none}
  /* Os laços do CTA perdem o pulso e ficam só com os anéis estáticos —
     a composição continua de pé, sem nenhum movimento. design.md 9.3 */
  .laco-fluxo{display:none}
}