/* ============================================================
   ACE · design system compartilhado · versão 2026-09-26
   Direção "Cinema Total": preto como chão da página inteira,
   vinho #790E17, rosa #DE69A5 como acento, papel #F7F7F7,
   Mulish + Noto Serif Display. Fonte única de tokens, reset,
   topo, rodapé e componentes de landing-nova/. CSS exclusivo de
   cada página fica no <style> dela, carregado depois deste.
   ============================================================ */

:root{
  --preto:#000000;
  --carvao:#0A090A;
  --vinho:#790E17;
  --vinho-fundo:#5C0A11;
  --rosa:#DE69A5;
  --dourado:#E2B258;
  --papel:#F7F7F7;

  --tinta:var(--papel);
  --tinta-media:rgba(247,247,247,.78);
  --tinta-fraca:rgba(247,247,247,.62);
  --fio:rgba(247,247,247,.16);
  --fio-forte:rgba(247,247,247,.3);

  --serif:'Noto Serif Display',Georgia,'Times New Roman',serif;
  --sans:'Mulish',system-ui,-apple-system,'Segoe UI',sans-serif;

  --t-micro:clamp(.68rem,.02vw + .67rem,.72rem);
  --t-peq:clamp(.85rem,.1vw + .82rem,.95rem);
  --t-corpo:clamp(1rem,.2vw + .95rem,1.15rem);
  --t-lead:clamp(1.25rem,.6vw + 1.1rem,1.65rem);
  --t-h3:clamp(1.45rem,1.1vw + 1.1rem,2.3rem);
  --t-h2:clamp(2.2rem,3.6vw + 1rem,4.2rem);
  /* A altura entra na conta: numa janela de 1440 por 640 o título
     só pela largura passava da dobra. */
  --t-h1:clamp(2.4rem,min(5.8vw + .7rem,11vh),6.4rem);

  --e1:.5rem; --e2:1rem; --e3:1.5rem; --e4:2rem; --e5:2.5rem;
  --e6:3rem; --e8:4rem; --e12:6rem; --e16:8rem;

  --largura:78rem;
  --estreito:52rem;
  --borda:2px;

  --expo:cubic-bezier(.16,1,.3,1);
  --suave:cubic-bezier(.4,0,.2,1);

  --z-fundo:0; --z-conteudo:10; --z-topo:30; --z-modal:50;
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{
  margin:0;
  background:var(--preto);
  color:var(--tinta);
  font-family:var(--sans);
  font-size:var(--t-corpo);
  font-weight:400;
  line-height:1.7;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-synthesis:none;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
video{max-width:100%}
/* Serifada grande pede entrelinha curta e tracking negativo; h1 aperta
   mais que h3 porque a necessidade cresce com o corpo da letra. */
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;margin:0;text-wrap:balance}
h1{line-height:.96;letter-spacing:-.035em}
h2{line-height:1.02;letter-spacing:-.03em}
h3{line-height:1.12;letter-spacing:-.02em}
h4{line-height:1.2;letter-spacing:-.015em}
:is(h1,h2,h3,h4) em{font-style:italic;color:var(--rosa)}
p{margin:0;text-wrap:pretty}
a{color:inherit}
ul,ol{margin:0;padding:0;list-style:none}

:focus-visible{outline:var(--borda) solid var(--rosa);outline-offset:4px;border-radius:2px}
::selection{background:var(--rosa);color:var(--preto)}

.pula{
  position:absolute;left:-9999px;top:1rem;z-index:9999;padding:.6rem 1.2rem;
  background:var(--rosa);color:var(--preto);font-weight:700;text-decoration:none;border-radius:.4rem
}
.pula:focus{left:1rem}
.visualmente-oculto{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0
}

/* Grão de película sobre tudo: sem ele o preto chapado vira vazio
   digital. Nunca captura clique. */
.grao{
  position:fixed;inset:0;z-index:var(--z-fundo);pointer-events:none;opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23r)'/%3E%3C/svg%3E");
  background-size:180px
}

.env{width:100%;max-width:var(--largura);margin-inline:auto;padding-inline:clamp(1.25rem,4vw,3rem)}
.env-estreito{max-width:var(--estreito)}
.serif{font-family:var(--serif)}

/* Marcação técnica de câmera: rótulo curto em caixa alta. */
.tecnico{
  font-size:var(--t-micro);font-weight:800;letter-spacing:.3em;
  text-transform:uppercase;color:var(--tinta-fraca)
}

/* Cartela de seção: rótulo centralizado entre dois fios.
   <p class="cartela"><span class="tecnico">Rótulo</span></p> (texto em tinta fraca)
   <div class="cartela"><span>Rótulo</span></div> (texto em rosa) */
.cartela{
  display:flex;align-items:center;justify-content:center;gap:var(--e3);
  font-size:var(--t-micro);font-weight:800;letter-spacing:.3em;
  text-transform:uppercase;color:var(--rosa);text-align:center
}
.cartela::before,.cartela::after{content:"";height:1px;flex:1;min-width:1rem;max-width:9rem;background:var(--fio-forte)}
@media (min-width:600px){.cartela span{white-space:nowrap}}

/* ---------- Botões ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.7rem;
  min-height:54px;padding:.9rem 2rem;border:1px solid var(--rosa);
  border-radius:2px;font-family:var(--sans);
  font-size:var(--t-micro);font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  text-align:center;text-decoration:none;cursor:pointer;background:transparent;color:var(--rosa);
  transition:background-color .3s var(--suave),color .3s var(--suave),border-color .3s var(--suave)
}
.btn svg{width:1.15em;height:1.15em;flex:none}
.btn:hover{background:var(--rosa);color:var(--preto)}
.btn:focus-visible{outline-offset:3px}
.btn-cheio{background:var(--rosa);color:var(--preto)}
.btn-cheio:hover{background:var(--papel);border-color:var(--papel);color:var(--preto)}
.btn-claro{border-color:var(--fio-forte);color:var(--papel)}
.btn-claro:hover{background:var(--papel);border-color:var(--papel);color:var(--preto)}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed;pointer-events:none}

/* Etiqueta curta: Grátis, Novo, Artigo. Dentro do submenu perde a borda. */
.tag{
  display:inline-flex;align-items:center;gap:.4em;flex:none;
  padding:.3rem .65rem;border:1px solid rgba(222,105,165,.4);border-radius:999px;
  font-family:var(--sans);font-size:.62rem;font-weight:800;line-height:1;
  letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;color:var(--rosa)
}

/* ---------- Topo ----------
   Pill flutuante de vidro: não encosta nas bordas; o vidro fica no
   próprio pill e fica mais opaco depois de rolar (.rolado, via ace.js).
   O pill passa um pouco da largura do conteúdo (86rem): o rótulo
   "Ecossistema de Crescimento com IA" precisa caber numa linha ao lado
   do nome da marca. */
.topo{
  position:fixed;top:0;left:0;right:0;z-index:var(--z-topo);
  padding:1rem clamp(1rem,3vw,2rem) 0;
  transition:opacity .6s var(--expo),transform .6s var(--expo)
}
.topo.recolhido{opacity:0;transform:translateY(-100%);pointer-events:none}
.topo .env{
  display:flex;align-items:center;justify-content:space-between;gap:var(--e3);
  min-height:64px;max-width:86rem;margin-inline:auto;
  padding-inline:clamp(1rem,2.4vw,1.6rem);border-radius:999px;
  background:rgba(20,16,19,.22);border:1px solid rgba(247,247,247,.14);
  -webkit-backdrop-filter:blur(20px) saturate(1.5);backdrop-filter:blur(20px) saturate(1.5);
  box-shadow:0 8px 32px rgba(0,0,0,.28),inset 0 1px 0 rgba(247,247,247,.08);
  transition:background-color .4s var(--suave),border-color .4s var(--suave)
}
.topo.rolado .env{background:rgba(10,9,10,.5);border-color:rgba(247,247,247,.2)}

.topo .marca{display:flex;align-items:center;gap:.7rem;flex:none;text-decoration:none}
.topo .marca img{width:32px;height:32px;object-fit:contain;filter:brightness(0) invert(1)}
.topo .marca span{
  font-family:var(--serif);font-size:1.05rem;letter-spacing:-.01em;color:var(--papel);white-space:nowrap;
  animation:brilho-champanhe 3.2s ease-in-out infinite
}
.topo .marca em{font-style:italic;color:var(--rosa)}

.topo nav{display:flex;align-items:center;gap:clamp(1rem,1.7vw,1.75rem)}
.topo nav a,.item-menu .gatilho{
  font-size:var(--t-micro);font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--papel);text-decoration:none;white-space:nowrap;transition:color .2s var(--suave)
}
.topo nav a:hover,.topo nav a[aria-current="page"]{color:var(--rosa)}
.topo .btn{min-height:42px;padding:.55rem 1.15rem}
.topo nav a.btn{color:var(--rosa);letter-spacing:.14em}
.topo nav a.btn:hover{color:var(--preto)}
/* Protocolo de Marca, o produto herói: um ponto rosa antes do nome. */
.topo nav a.nav-destaque{display:inline-flex;align-items:center;gap:.6em}
.topo nav a.nav-destaque::before{content:"";flex:none;width:5px;height:5px;border-radius:50%;background:var(--rosa)}

/* Item com submenu. O padding + margem negativa estende a área de
   hover até a base do submenu; a ponte ::before cobre o vão. */
.item-menu{position:relative;padding-bottom:1rem;margin-bottom:-1rem}
.item-menu .gatilho{
  display:flex;align-items:center;gap:.4em;padding:0;
  font-family:inherit;background:none;border:0;cursor:pointer
}
.seta-menu{width:11px;height:11px;flex:none;transition:transform .2s var(--suave)}

.submenu{
  position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(-6px);
  min-width:16rem;padding:.6rem;margin-top:.9rem;border-radius:1.1rem;
  background:rgba(10,9,10,.9);border:1px solid rgba(247,247,247,.16);
  -webkit-backdrop-filter:blur(20px) saturate(1.5);backdrop-filter:blur(20px) saturate(1.5);
  box-shadow:0 16px 40px rgba(0,0,0,.4);
  display:flex;flex-direction:column;gap:.1rem;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .18s var(--suave),transform .18s var(--suave),visibility .18s;
  z-index:5
}
.submenu::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:1.2rem}
/* Sem JS, hover e foco abrem; com JS (html.ace), só a classe .aberto,
   para o Esc conseguir fechar mesmo com o mouse ou o foco em cima. */
html:not(.ace) .item-menu:hover .submenu,
html:not(.ace) .item-menu:focus-within .submenu,
.item-menu.aberto .submenu{
  opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)
}
html:not(.ace) .item-menu:hover .seta-menu,
html:not(.ace) .item-menu:focus-within .seta-menu,
.item-menu.aberto .seta-menu{transform:rotate(180deg)}
.topo .submenu a{
  display:flex;align-items:center;justify-content:space-between;gap:.7rem;
  padding:.6rem .85rem;border-radius:.65rem;color:rgba(247,247,247,.8);
  transition:background-color .15s var(--suave),color .15s var(--suave)
}
.topo .submenu a:hover,.topo .submenu a[aria-current="page"]{background:rgba(222,105,165,.14);color:var(--papel)}
.submenu .tag{padding:0;border:0;letter-spacing:.08em}

/* Submenu em grupos (Começar · Executar · Artigos): duas colunas,
   Começar e Artigos à esquerda, Executar à direita. Cada item tem o
   nome em serif e uma linha curta de apoio. */
.submenu.submenu-grupos{
  display:grid;width:min(35rem,calc(100vw - 2.5rem));grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-areas:"comecar executar" "artigos executar";grid-template-rows:auto 1fr;
  gap:.5rem .6rem;padding:.85rem;background:rgba(10,9,10,.96)
}
.grupo-comecar{grid-area:comecar}
.grupo-executar{grid-area:executar;padding-left:.6rem;border-left:1px solid var(--fio)}
.grupo-artigos{grid-area:artigos}
.submenu-grupo{display:flex;flex-direction:column;gap:.1rem;min-width:0}
.submenu-rotulo{
  display:block;padding:.3rem .85rem .35rem;font-size:.62rem;font-weight:800;line-height:1.4;
  letter-spacing:.26em;text-transform:uppercase;color:var(--tinta-fraca)
}
.submenu-item{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.submenu-nome{
  font-family:var(--serif);font-size:1.08rem;font-weight:400;line-height:1.2;
  letter-spacing:-.01em;text-transform:none;color:var(--papel);white-space:normal
}
.submenu-linha{
  font-family:var(--sans);font-size:.8rem;font-weight:400;line-height:1.35;
  letter-spacing:normal;text-transform:none;color:var(--tinta-fraca);white-space:normal
}
.topo .submenu a:hover .submenu-linha,.topo .submenu a[aria-current="page"] .submenu-linha{color:var(--tinta-media)}

.menu-btn{
  display:none;align-items:center;justify-content:center;flex:none;
  width:44px;height:44px;border:1px solid var(--fio-forte);border-radius:50%;
  background:none;color:var(--papel);cursor:pointer;
  transition:background-color .2s var(--suave),color .2s var(--suave),border-color .2s var(--suave)
}
.menu-btn:hover{background:var(--rosa);border-color:var(--rosa);color:var(--preto)}
.menu-btn svg{width:18px;height:18px}
.menu-btn .fechar{display:none}
.menu-btn[aria-expanded="true"] .abrir{display:none}
.menu-btn[aria-expanded="true"] .fechar{display:block}

/* Entre o drawer e a tela larga o menu inteiro precisa caber: o nome
   ao lado do símbolo sai e o espaçamento aperta. De 1100px para cima
   tudo fica numa linha; entre 881 e 1099px o rótulo longo quebra em
   duas linhas equilibradas (nunca reticências). */
@media (min-width:881px) and (max-width:1399px){
  .topo{padding-inline:clamp(.75rem,2vw,1.5rem)}
  .topo .env{gap:var(--e2);padding-inline:1.1rem}
  .topo .marca span{display:none}
  .topo nav{gap:clamp(.9rem,1.5vw,1.4rem)}
  .topo nav a,.item-menu .gatilho,.topo nav a.btn{letter-spacing:.12em}
  .topo .btn{padding-inline:.9rem}
}
@media (min-width:881px) and (max-width:1099px){
  .topo nav{gap:clamp(.8rem,1.4vw,1rem)}
  .topo nav a,.item-menu .gatilho,.topo nav a.btn{letter-spacing:.08em}
  .topo .btn{padding-inline:.8rem}
  /* O rótulo e a seta viram texto corrido: a seta acompanha o fim da
     segunda linha em vez de ficar na borda da caixa. O nome continua
     num nó de texto só (o lint exige a forma exata do nome). */
  .item-menu .gatilho{display:block;max-width:16.5em;white-space:normal;text-wrap:balance;line-height:1.3}
  .gatilho-rotulo{display:inline}
  .item-menu .seta-menu{display:inline-block;margin-left:.35em;vertical-align:-.1em}
}

/* Drawer: abaixo de 880px o menu vira uma gaveta sob o pill e os
   submenus ficam sempre abertos, empilhados e recuados. */
@media (max-width:880px){
  .menu-btn{display:flex}
  .topo.rolado{background:rgba(0,0,0,.92)}
  .topo nav{
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    padding:0 clamp(1.25rem,4vw,3rem);
    background:var(--preto);border-bottom:1px solid var(--fio);
    max-height:0;overflow:hidden;visibility:hidden;
    transition:max-height .38s var(--expo),visibility .38s
  }
  /* A gaveta desce até o fim da tela: 1rem do respiro do .topo mais
     63px do pill (64px menos a borda de baixo, de onde o top:100% parte). */
  .topo nav.aberto{
    max-height:calc(100vh - 1rem - 63px);max-height:calc(100svh - 1rem - 63px);
    overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;visibility:visible
  }
  /* Véu atrás da gaveta aberta: nas margens do pill e em qualquer sobra
     embaixo, o texto da página não aparece por trás do menu. */
  .topo::before{
    content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
    background:rgba(0,0,0,.85);opacity:0;visibility:hidden;
    transition:opacity .38s var(--expo),visibility .38s
  }
  .topo:has(nav.aberto)::before{opacity:1;visibility:visible}
  .topo nav a{padding:1.15rem 0;border-bottom:1px solid var(--fio);font-size:var(--t-peq);letter-spacing:.14em}
  .topo nav a.btn{min-height:50px;margin:1.2rem 0 1.6rem;padding:.9rem 1.4rem;border:1px solid var(--rosa)}
  .item-menu{padding-bottom:0;margin-bottom:0}
  .item-menu .gatilho{padding:1.15rem 0 .5rem;font-size:var(--t-peq);letter-spacing:.14em}
  .seta-menu{display:none}
  .submenu,.item-menu.aberto .submenu{
    position:static;transform:none;opacity:1;visibility:visible;pointer-events:auto;
    min-width:0;margin:0;padding:.4rem 0 .8rem 1rem;border:0;border-radius:0;background:none;box-shadow:none;
    -webkit-backdrop-filter:none;backdrop-filter:none
  }
  .submenu::before{display:none}
  .topo .submenu a{padding:.65rem .5rem;border-bottom:0;border-radius:.4rem;font-size:var(--t-micro)}
  .gatilho-rotulo{white-space:normal;text-wrap:balance}
  .submenu.submenu-grupos{display:flex;flex-direction:column;width:auto;gap:.4rem;padding:.2rem 0 .9rem 1rem;background:none}
  .grupo-executar{padding-left:0;border-left:0}
  .submenu-rotulo{padding:.7rem .5rem .1rem}
  .submenu-linha{display:none}
}

/* ---------- Rodapé ----------
   Opacidades acima de .55: abaixo disso o texto some no preto. */
.rodape{
  position:relative;background:var(--preto);
  padding-block:clamp(4rem,9vw,6rem) var(--e6);
  border-top:1px solid rgba(247,247,247,.1)
}
/* Marca + 4 colunas (Começar, Executar, Artigos, Contato). No celular
   as colunas vão de duas em duas; entre 760 e 1099px a marca ocupa a
   linha de cima, com o logo ao lado do texto. */
.rodape-grade{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--e5) var(--e3);margin-bottom:clamp(2rem,5vw,3rem)}
.rodape-marca{grid-column:1 / -1;display:flex;flex-direction:column;gap:var(--e3);align-items:flex-start}
@media (min-width:760px){
  .rodape-grade{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--e5) var(--e4)}
}
@media (min-width:760px) and (max-width:1099px){
  .rodape-marca{display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:var(--e5);align-items:start}
  .rodape-logo{grid-row:1 / span 2}
}
@media (min-width:1100px){
  .rodape-grade{grid-template-columns:minmax(0,1.9fr) repeat(4,minmax(0,1fr));gap:var(--e5)}
  .rodape-marca{grid-column:auto}
  /* A frase divide a linha com as colunas: fica à direita, no pé da linha, na altura do CTA
     da marca. Colunas com posição explícita, senão o grid as empurra pra linha de baixo. */
  .rodape-grade > .rodape-col{grid-row:1}
  .rodape-grade > .rodape-col:nth-child(2){grid-column:2}
  .rodape-grade > .rodape-col:nth-child(3){grid-column:3}
  .rodape-grade > .rodape-col:nth-child(4){grid-column:4}
  .rodape-grade > .rodape-col:nth-child(5){grid-column:5}
  .rodape-grade > .rodape-frase{grid-row:1;grid-column:2 / -1;align-self:end;justify-self:end;text-align:right;margin:0}
}
.rodape-logo{width:100%;max-width:26rem;height:auto;object-fit:contain;display:block}
.rodape-texto{font-size:var(--t-peq);font-weight:300;line-height:1.75;color:rgba(247,247,247,.62);max-width:28rem}
.rodape-cta{
  display:inline-flex;align-items:center;gap:.55rem;min-height:44px;
  font-size:var(--t-micro);font-weight:800;letter-spacing:.2em;
  text-transform:uppercase;color:var(--rosa);text-decoration:none;
  transition:color .2s var(--suave)
}
.rodape-cta:hover{color:var(--papel)}
.rodape-cta svg{width:12px;height:12px;flex:none;transition:transform .25s var(--expo)}
.rodape-cta:hover svg{transform:translateX(4px)}
.rodape-col{display:flex;flex-direction:column}
.rodape-col .rotulo{
  font-size:var(--t-micro);font-weight:800;letter-spacing:.3em;
  text-transform:uppercase;color:var(--rosa);margin-bottom:var(--e2)
}
/* Topo alinhado (não centro): um item que quebra em duas linhas não
   desalinha a primeira linha das colunas vizinhas. */
.rodape-col a,.rodape-col span:not(.rotulo){
  display:flex;align-items:flex-start;min-height:34px;padding-block:.3rem;line-height:1.5;
  font-size:var(--t-peq);font-weight:300;color:rgba(247,247,247,.62);text-decoration:none
}
.rodape-col a{transition:color .2s var(--suave)}
.rodape-col a:hover,.rodape-col a[aria-current="page"]{color:var(--papel)}
/* Frase de fecho: a assinatura da casa, em serif, antes da linha legal. */
.rodape-frase{
  grid-column:1 / -1;margin-top:var(--e3);max-width:30ch;
  font-family:var(--serif);font-size:var(--t-h3);line-height:1.2;letter-spacing:-.02em;
  color:var(--papel);text-wrap:balance
}
.rodape-frase em{font-style:italic;color:var(--rosa)}
.rodape-fim{
  padding-top:var(--e4);border-top:1px solid rgba(247,247,247,.1);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--e2) var(--e3)
}
.rodape-fim p{
  font-size:var(--t-micro);font-weight:800;letter-spacing:.24em;line-height:1.7;
  text-transform:uppercase;color:rgba(247,247,247,.55)
}
.rodape-legal{display:flex;flex-wrap:wrap;column-gap:var(--e3)}
.rodape-legal a{
  display:inline-flex;align-items:center;min-height:40px;
  font-size:var(--t-micro);font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(247,247,247,.62);text-decoration:none;transition:color .2s var(--suave)
}
.rodape-legal a:hover,.rodape-legal a[aria-current="page"]{color:var(--papel)}

/* ---------- Revelação: .sobe[data-atraso="1..4"] ----------
   O ace.js põe .visivel quando o bloco entra na tela. O conteúdo só
   é escondido quando há JS; se o ace.js não chegar, a rede de
   segurança revela tudo sozinha depois de 2,5 s. */
.sobe[data-atraso="1"]{--atraso:.09s}
.sobe[data-atraso="2"]{--atraso:.18s}
.sobe[data-atraso="3"]{--atraso:.27s}
.sobe[data-atraso="4"]{--atraso:.36s}
@media (scripting:enabled) and (prefers-reduced-motion:no-preference){
  html:not(.ace) .sobe{animation:surgir 1.1s var(--expo) 2.5s backwards}
  html.ace .sobe:not(.visivel){opacity:0;transform:translateY(42px)}
  html.ace .sobe.visivel{animation:surgir 1.1s var(--expo) var(--atraso,0s) backwards}
}

/* ---------- Acordeão (<details>/<summary> nativos; um aberto por grupo via ace.js) ----------
   Lista com fios:  <div class="acordeao"><details><summary>Pergunta</summary><p>Resposta</p></details>…</div>
   Cartões:         <div class="acordeoes"><details class="acordeao"><summary>
                      <span class="acordeao-h">Título<span class="acordeao-sub">Apoio</span></span>
                      <svg class="acordeao-sinal">…</svg></summary><div class="acordeao-corpo">…</div></details>…</div> */
.acordeao:where(:not(details)){border-top:1px solid var(--fio)}
.acordeao:where(:not(details)) details{border-bottom:1px solid var(--fio)}
.acordeao:where(:not(details)) details[open]{padding-bottom:var(--e4)}
.acordeao:where(:not(details)) summary{
  display:flex;align-items:center;justify-content:space-between;gap:var(--e3);
  padding:var(--e4) 0;list-style:none;cursor:pointer;
  font-family:var(--serif);font-size:clamp(1.2rem,.9vw + 1rem,1.75rem);line-height:1.2;
  letter-spacing:-.02em;color:var(--papel);text-wrap:balance;transition:color .2s var(--suave)
}
.acordeao:where(:not(details)) summary:hover{color:var(--rosa)}
.acordeao:where(:not(details)) summary :is(h2,h3,h4){font:inherit;letter-spacing:inherit;color:inherit}
.acordeao:where(:not(details)) summary::after{
  content:"";flex:none;width:18px;height:18px;
  background:
    linear-gradient(var(--rosa),var(--rosa)) center/100% 2px no-repeat,
    linear-gradient(var(--rosa),var(--rosa)) center/2px 100% no-repeat;
  transition:background-size .3s var(--expo)
}
.acordeao:where(:not(details)) details[open] > summary::after{background-size:100% 2px,2px 0}
.acordeao:where(:not(details)) details > :not(summary){max-width:64ch;color:var(--tinta-media);line-height:1.8}
.acordeao:where(:not(details)) details > :not(summary) + :not(summary){margin-top:var(--e2)}

.acordeoes{display:flex;flex-direction:column;gap:var(--e2)}
.acordeao:where(details){
  background:rgba(18,15,17,.9);border:1px solid var(--fio);border-radius:1.5rem;
  transition:border-color .3s var(--suave)
}
.acordeao:where(details):hover{border-color:var(--fio-forte)}
.acordeao:where(details)[open]{border-color:rgba(222,105,165,.5)}
.acordeao > summary{
  display:flex;align-items:flex-start;gap:var(--e3);
  padding:clamp(1.4rem,3vw,2rem);list-style:none;cursor:pointer
}
.acordeao summary::-webkit-details-marker{display:none}
.acordeao summary::marker{content:""}
.acordeao-h{display:block;flex:1;min-width:0;font-family:var(--serif);font-size:var(--t-h3);color:var(--papel);line-height:1.1}
.acordeao-h em{font-style:italic;color:var(--rosa)}
.acordeao-sub{
  display:block;margin-top:.6rem;
  font-family:var(--sans);font-size:var(--t-peq);font-weight:400;line-height:1.65;
  letter-spacing:normal;color:var(--tinta-media)
}
.acordeao-sinal{width:22px;height:22px;flex:none;margin-top:.35rem;color:var(--rosa);transition:transform .3s var(--suave)}
.acordeao[open] .acordeao-sinal{transform:rotate(180deg)}
.acordeao-corpo{padding:0 clamp(1.4rem,3vw,2rem) clamp(1.4rem,3vw,2rem)}

/* ---------- Faixa de logos / pôsteres ----------
   <ul class="faixa-logos"><li><a href="…"><img src="…" alt="" loading="lazy"><span>Legenda</span></a></li>…</ul>
   Três ou mais itens lado a lado; no celular a faixa rola na própria
   linha, com o próximo item aparecendo na borda. .marcas: logotipos. */
.faixa-logos{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(min(15rem,78%),1fr);gap:var(--e3);
  overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none
}
.faixa-logos::-webkit-scrollbar{display:none}
.faixa-logos > li{scroll-snap-align:start;min-width:0}
.faixa-logos a{display:block;color:inherit;text-decoration:none}
.faixa-logos a:focus-visible{outline-offset:-3px}
.faixa-logos img{
  width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--carvao);border:1px solid var(--fio);
  filter:grayscale(.4) brightness(.82);transition:filter .5s var(--suave),border-color .5s var(--suave)
}
.faixa-logos a:hover img,.faixa-logos a:focus-visible img{filter:none;border-color:var(--rosa)}
.faixa-logos :is(span,figcaption){
  display:block;margin-top:.8rem;font-size:var(--t-micro);font-weight:800;line-height:1.6;
  letter-spacing:.18em;text-transform:uppercase;color:var(--tinta-fraca);transition:color .3s var(--suave)
}
.faixa-logos a:hover :is(span,figcaption){color:var(--papel)}
.faixa-logos.marcas{grid-auto-columns:max-content;align-items:center;gap:clamp(2rem,5vw,4rem)}
.faixa-logos.marcas img{
  width:auto;height:clamp(1.75rem,3.5vw,2.6rem);aspect-ratio:auto;object-fit:contain;
  background:none;border:0;filter:brightness(0) invert(1);opacity:.62
}
.faixa-logos.marcas a:hover img{filter:brightness(0) invert(1);opacity:1}

/* ---------- Vídeo sob demanda ----------
   <div class="video-lazy" data-src="assets/x.mp4" [data-src-mobile="assets/x-m.mp4"]>
     <img src="assets/x-poster.jpg" alt="Descrição" loading="lazy">
     <button type="button" class="video-lazy-play" aria-label="Tocar o vídeo: descrição"><svg viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg></button>
   </div>
   O mp4 só é pedido no clique (ace.js troca o conteúdo por <video controls>).
   .vertical: proporção 9/16. */
.video-lazy{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;background:var(--preto);border:1px solid var(--fio)}
.video-lazy.vertical{aspect-ratio:9/16;max-width:23rem;margin-inline:auto}
.video-lazy > img,.video-lazy > video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.video-lazy > video{object-fit:contain;background:var(--preto)}
.video-lazy-play{
  position:absolute;inset:0;z-index:1;display:grid;place-items:center;
  padding:0;border:0;cursor:pointer;color:var(--rosa);
  background:linear-gradient(180deg,rgba(0,0,0,.25) 0%,rgba(0,0,0,.1) 45%,rgba(0,0,0,.6) 100%)
}
.video-lazy-play svg{
  width:74px;height:74px;padding:24px 23px 24px 25px;border-radius:50%;
  border:1px solid var(--rosa);background:rgba(0,0,0,.45);fill:currentColor;
  transition:background-color .3s var(--suave),color .3s var(--suave),transform .3s var(--expo)
}
.video-lazy-play:hover svg{background:var(--rosa);color:var(--preto);transform:scale(1.06)}
.video-lazy-play:focus-visible{outline-offset:-6px}

/* ---------- O que isso quer dizer ----------
   <aside class="box-quer-dizer"><h3>O que isso quer dizer</h3><p>…</p></aside> */
.box-quer-dizer{
  position:relative;align-self:start;max-width:var(--estreito);
  padding:clamp(1.5rem,4vw,2.4rem);background:var(--carvao);border:1px solid var(--fio-forte)
}
.box-quer-dizer::before{content:"";position:absolute;top:-1px;left:-1px;width:2.5rem;height:2px;background:var(--rosa)}
.box-quer-dizer :is(h2,h3,h4,.box-titulo){
  margin:0 0 var(--e2);font-family:var(--sans);font-size:var(--t-micro);font-weight:800;
  line-height:1.5;letter-spacing:.3em;text-transform:uppercase;color:var(--rosa)
}
.box-quer-dizer p{
  font-family:var(--serif);font-size:clamp(1.1rem,.4vw + 1rem,1.35rem);line-height:1.5;
  letter-spacing:-.01em;color:var(--papel);max-width:48ch
}
.box-quer-dizer p + p{margin-top:var(--e2)}

/* ---------- Keyframes compartilhados ---------- */
@keyframes surgir{from{opacity:0;transform:translateY(42px)}to{opacity:1;transform:none}}
@keyframes correr{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes brilho-champanhe{
  0%,100%{text-shadow:0 0 6px rgba(232,196,138,.35),0 0 14px rgba(232,196,138,.18)}
  50%{text-shadow:0 0 14px rgba(232,196,138,.75),0 0 30px rgba(232,196,138,.4),0 0 46px rgba(232,196,138,.2)}
}

/* ---------- Menos movimento ----------
   .sobe já nasce visível (as regras de revelação só valem em
   no-preference); carrossel e crossfades param; o ace.js põe .rm no
   <html> e não carrega vídeo de autoplay, então o poster fica. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important
  }
  .faixa-ida,.faixa-volta,.duvidas-fundo{animation:none!important}
  .topo .marca span{animation:none;text-shadow:0 0 10px rgba(232,196,138,.5),0 0 22px rgba(232,196,138,.25)}
}

@media print{
  .topo,.grao,.menu-btn,.video-lazy-play{display:none!important}
  .sobe{opacity:1!important;transform:none!important;animation:none!important}
}