/* ============================================================
   TEMA CLARO — Date Creative 2026
   ------------------------------------------------------------
   Carregado DEPOIS do style.css, de proposito. O style.css nasceu
   escuro e tem cor cravada fora das variaveis em dezenas de pontos;
   reescrever os 1266 originais arriscaria quebrar sistemas que nao
   tem nada a ver com cor (scrub do hero, foguinhos, grafites, som).
   Aqui a inversao acontece por cima, e some tirando uma linha do HTML.

   Referencia: lightspark.com, na versao clara. O fundo #F8F8F7 e o
   dele mesmo: branco puro em area grande cansa a vista, esse quebra
   o branco sem parecer cinza.
   ============================================================ */

:root{
  --bg:#F8F8F7;
  --sup:#FFFFFF;
  --sup2:#F2F2F0;

  /* O preto da marca continua sendo o preto da marca. */
  --tinta:#0A0A0A;
  --tinta2:#55565A;
  --tinta3:#8A8B90;

  /* Fio de contorno fino de proposito: o peso vem do espaco, nao da linha. */
  --linha-cor:#E5E4E1;
  --linha-forte:#D4D3CF;

  --coral:#FF3B5C;
  --coral-suave:#FFF1F3;
  --lime:#C8FF00;

  /* Os nomes antigos continuam existindo porque metade do CSS legado os
     usa. Aqui eles passam a apontar pro claro, e tudo vira junto. */
  --preto:#F8F8F7;
  --preto2:#FFFFFF;
  --preto3:#F2F2F0;
  --branco:#0A0A0A;
  --cinza:#55565A;
  --cinza2:#8A8B90;
  --borda:#E5E4E1;
  --borda2:#D4D3CF;

  /* A Suisse Intl do lightspark e comercial, mesma situacao da Gelato
     Luxe. A Inter Tight e a substituta livre mais proxima em largura e
     altura de x. Trocar so esta linha quando licenciar. */
  --sans:'Geist','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  /* A referencia usa UMA familia em tudo. A serifada em italico no meio do
     titulo era o que mais dava cara de template pronto, entao some. */
  --serif:'Geist','Inter',sans-serif;

  --r:16px;
}

html{background:#F8F8F7}
body{background:#F8F8F7;color:#0A0A0A;font-family:var(--sans);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}

/* O halo coral de fundo foi feito pra brilhar no escuro. No claro vira
   sujeira, entao sai. */
.page{background:#F8F8F7;color:#0A0A0A}
.page::before{display:none}

/* ---------- TIPOGRAFIA ----------
   Uma familia so, do titulo ao rodape, como na referencia. O peso do
   titulo e 400/500, nao bold: o que da presenca e o corpo grande com
   tracking negativo, nao a gordura da letra. Titulo pesado em fundo
   claro fecha o contraste e e justamente o que pesa a pagina. */
.title,.hero__title{color:#0A0A0A;font-family:var(--sans);
  letter-spacing:-.038em;line-height:1.04;font-weight:400}
.title i,.hero__title i{font-family:var(--sans);font-style:normal;font-weight:400;
  color:#8A8B90;letter-spacing:-.038em}
.title b,.hero__title b{font-weight:500}
.eyebrow{color:#8A8B90;letter-spacing:.1em;text-transform:uppercase;
  font-size:.68rem;font-weight:400}
.lead,.hero__body{color:#55565A;font-weight:400;letter-spacing:-.011em;line-height:1.55}
p,li,a,button,input{letter-spacing:-.008em}

/* ---------- BOTOES ---------- */
.btn{border-radius:100px;font-weight:500;letter-spacing:-.01em}
.btn--primary{background:#0A0A0A;color:#fff;border:1px solid #0A0A0A}
.btn--primary:hover{background:#FF3B5C;border-color:#FF3B5C;color:#fff}
.btn--ghost{background:transparent;color:#0A0A0A;border:1px solid #D4D3CF}
.btn--ghost:hover{background:#0A0A0A;color:#fff;border-color:#0A0A0A}
/* O lime e exclusivo de compra, conforme o guia de marca. Sobre claro
   pede texto preto: lime com branco nao passa em contraste nenhum. */
.plano--destaque .btn--primary,.agenda__cta .btn--primary{background:#C8FF00;color:#0A0A0A;border-color:#C8FF00}
.plano--destaque .btn--primary:hover,.agenda__cta .btn--primary:hover{background:#B4E600;border-color:#B4E600;color:#0A0A0A}

/* ---------- SECOES ---------- */
.sec{background:transparent}

/* ---------- CARDS ----------
   Branco sobre o off-white, com fio de 1px. E o padrao da referencia:
   separacao por contraste minimo, nao por sombra. */
.case,.plano,.linha,.editor-card,.novid__caixa,.agenda,.pilar,.cx,.midia16{
  background:#fff;border:1px solid #E5E4E1;box-shadow:none}
.case:hover,.plano:hover,.linha:hover,.editor-card:hover{border-color:#D4D3CF}

.case__nome,.plano__nome,.linha__t,.editor__nome,.faq__q,.pilar__nome{color:#0A0A0A}
.case__papel,.plano__obs,.linha__c,.editor__papel,.faq__a,.pilar__desc{color:#55565A}
.case__tag,.case__stat,.editor__meta,.editor__status{color:#8A8B90}

/* variantes de cor: no claro viram fundo pastel, nao bloco chapado */
.case--coral,.linha--coral{background:#FFF1F3;border-color:#FFD9E0}
.case--lime,.linha--lime{background:#FBFFE6;border-color:#E8F5B8}
.case--branco,.linha--branco{background:#F2F2F0}

/* ---------- FAQ ---------- */
.faq__i{border-bottom:1px solid #E5E4E1;background:transparent}
.faq__sinal,.faq__anel{color:#8A8B90;border-color:#D4D3CF}

/* ---------- PLANOS ---------- */
.plano__de{color:#8A8B90}
.plano__por{color:#0A0A0A}
.plano__cupom{background:#FFF1F3;border:1px dashed #FFC2CD;color:#FF3B5C}
.plano__cupom-codigo,.plano__cupom-desconto{color:#FF3B5C}

/* ---------- MARQUEE ---------- */
.marquee{background:#fff;border-top:1px solid #E5E4E1;border-bottom:1px solid #E5E4E1}
.marquee__name{color:#0A0A0A}
.marquee__sub{color:#8A8B90}

/* ---------- HERO ----------
   O veu era preto pra segurar texto branco sobre foto. No claro ele
   inverte: branco por cima da foto, texto preto por cima do branco. */
.hero__veil{background:
  linear-gradient(90deg,rgba(248,248,247,.97) 0%,rgba(248,248,247,.93) 34%,rgba(248,248,247,.7) 58%,rgba(248,248,247,.22) 84%,rgba(248,248,247,0) 100%)}
.hero__title,.hero__eyebrow{color:#0A0A0A}
.hero__body{color:#55565A}
.hero__hint{color:#8A8B90}
.hero__prog{background:#FF3B5C}
.hero__frame-titulo{color:#0A0A0A}
.hero__frame-box{border:1px solid #E5E4E1;background:#fff}

/* ---------- HERO: sai do modo fixo ----------
   Antes as cenas eram position:fixed e a .page passava POR CIMA, entao
   o hero ficava preso embaixo do site inteiro pra sempre. Com sticky
   ele segura enquanto a pista existe e depois sobe junto com o resto,
   que e como qualquer pagina se comporta. */
.hero__runway{position:relative}
/* Precisa do #hero: o style.css tem ".sec, #hero{position:relative}", e
   seletor de ID vence classe por especificidade, mesmo vindo antes. Sem
   isso o sticky nunca pegava e o hero continuava relative. */
.hero,#hero{position:sticky;top:0;height:100vh;overflow:hidden}
.hero__scene{position:absolute;inset:0}
.hero__copy{position:absolute}
.hero__track{display:none}

/* ---------- FORMULARIOS ---------- */
.novid__campo input,#chatCadastro input{
  background:#fff;border:1px solid #E5E4E1;color:#0A0A0A}
.novid__campo input::placeholder,#chatCadastro input::placeholder{color:#8A8B90}
.novid__campo input:focus,#chatCadastro input:focus{border-color:#0A0A0A;box-shadow:none}
.optin span{color:#55565A}
.novid__mini,.cad__nota{color:#8A8B90}

/* ---------- RODAPE ---------- */
.rodape{background:transparent;border-top:1px solid #E5E4E1}

/* ---------- CHAT ---------- */
#chat{background:#fff;border:1px solid #E5E4E1;color:#0A0A0A}
#chatMsgs .m{color:#0A0A0A}
#chatMsgs .m.b{background:#F2F2F0}
#chatMsgs .m.u{background:#0A0A0A;color:#fff}
.chat__nome{color:#0A0A0A}
.chat__status{color:#8A8B90}

/* ---------- COOKIE ---------- */
.cookie{background:#fff;border:1px solid #E5E4E1;color:#0A0A0A}
.cookie__txt{color:#55565A}
.cookie__btn--sim{background:#0A0A0A;color:#fff}
.cookie__btn--nao{background:transparent;color:#0A0A0A;border:1px solid #D4D3CF}

/* ---------- FOGUINHOS ----------
   Foram desenhados pra brilhar no escuro. Sobre claro viram poluicao,
   entao ficam discretos fora do hero. */
.page .fogos{opacity:.3}


/* ============================================================
   DOCK MAGNETICO — fiel ao componentry
   ------------------------------------------------------------
   Diferencas do que eu tinha improvisado antes, todas vindas do
   codigo original:

   1. O icone mora dentro de um LADRILHO com gradiente, borda e sombra.
      Era isso que dava o aspecto de dock de sistema; icone solto no
      vidro parecia menu de site.
   2. O crescimento e por MOLA (damping 20, stiffness 300, mass 0.5),
      nao interpolacao linear. A mola passa um tico do alvo e volta, e
      e esse respiro que faz parecer fisico.
   3. Cada item LEVANTA conforme cresce: y = (escala - 1) * -10.
   4. A queda com a distancia e LINEAR, nao smoothstep. Smoothstep
      achatava o meio e o ima parecia ter zona morta.
   ============================================================ */
.dock{position:fixed;left:50%;top:18px;bottom:auto;transform:translateX(-50%);z-index:900;
  display:inline-flex;align-items:flex-start;gap:8px;padding:12px;
  background:rgba(255,255,255,.8);backdrop-filter:blur(24px) saturate(150%);
  -webkit-backdrop-filter:blur(24px) saturate(150%);
  border:1px solid #E5E4E1;border-radius:24px;
  box-shadow:0 12px 34px rgba(10,10,10,.10),0 2px 6px rgba(10,10,10,.05)}

.dock__i{--s:1;--y:0px;position:relative;flex:none;
  width:calc(52px * var(--s));height:calc(52px * var(--s));
  transform:translateY(var(--y));
  background:none;border:0;padding:0;cursor:pointer;text-decoration:none;
  display:grid;place-items:center;will-change:width,height,transform}
.dock__i:active{transform:translateY(var(--y)) scale(.9)}

/* o ladrilho: gradiente de cima pra baixo, fio e sombra propria */
.dock__tile{position:relative;width:100%;height:100%;border-radius:16px;overflow:hidden;
  background:linear-gradient(180deg,#F5F5F3,#FCFCFB);
  border:1px solid #E0DFDC;display:grid;place-items:center;
  box-shadow:0 4px 12px rgba(10,10,10,.08),inset 0 1px 0 rgba(255,255,255,.3);
  transition:box-shadow .2s var(--suave),border-color .2s var(--suave)}
.dock__i:hover .dock__tile{
  box-shadow:0 8px 32px rgba(10,10,10,.15),inset 0 1px 0 rgba(255,255,255,.5);
  border-color:#D0CFCB}
.dock__i.is-active .dock__tile{background:linear-gradient(180deg,#EFEFEC,#F8F8F6)}

/* brilho diagonal por cima, que e o que da o aspecto de vidro */
.dock__tile::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:linear-gradient(135deg,rgba(255,255,255,.6) 0%,transparent 50%,transparent 100%);
  transition:opacity .2s var(--suave)}
.dock__i:hover .dock__tile::after{opacity:.9}

.dock__i svg{width:60%;height:60%;color:#3D3E42;display:block}
.dock__i.is-active svg{color:#0A0A0A}

/* ponto do ativo. O dock esta no topo, entao ele fica ABAIXO do ladrilho */
.dock__i.is-active::after{content:'';position:absolute;bottom:-8px;left:50%;
  transform:translateX(-50%);width:6px;height:6px;border-radius:50%;background:#FF3B5C}

/* rotulo com setinha, abrindo pra baixo porque o dock mora no topo */
.dock__lb{position:absolute;top:calc(100% + 14px);left:50%;
  transform:translateX(-50%) translateY(-8px) scale(.9);
  background:#fff;color:#1F2024;font-size:.8rem;font-weight:500;letter-spacing:-.01em;
  padding:6px 12px;border-radius:8px;white-space:nowrap;
  border:1px solid #E5E4E1;box-shadow:0 12px 28px rgba(10,10,10,.12);
  opacity:0;pointer-events:none;z-index:50;
  transition:opacity .15s ease-out,transform .15s ease-out}
.dock__lb::before{content:'';position:absolute;left:50%;top:-5px;
  width:8px;height:8px;transform:translateX(-50%) rotate(45deg);
  background:#fff;border-left:1px solid #E5E4E1;border-top:1px solid #E5E4E1}
.dock__i:hover .dock__lb{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}

.dock__sep{width:1px;align-self:stretch;margin:4px 4px;background:#E5E4E1}
.dock__cta{width:auto!important;height:52px!important;padding:0 18px;
  border-radius:16px;background:#0A0A0A;color:#fff;
  font-size:.82rem;font-weight:500;letter-spacing:-.01em;
  display:grid;place-items:center;
  transition:background .25s var(--suave)}
.dock__cta:hover{background:#FF3B5C}

/* Logo no canto superior esquerdo, fora do dock: dentro dele o ima a
   esticaria junto dos icones. */
.marca{position:fixed;top:24px;left:28px;z-index:901;display:block;line-height:0}
.marca img{height:38px;width:auto;display:block;
  /* o arquivo e claro, feito pro fundo escuro; no claro precisa virar preto */
  filter:brightness(0) saturate(100%);opacity:.92;transition:opacity .3s var(--suave)}
.marca:hover img{opacity:1}

@media(max-width:860px){
  /* No celular o dock volta pra base: polegar alcanca o rodape, nao o topo.
     E o rotulo sai, porque sem hover ele nunca apareceria mesmo. */
  .dock{top:auto;bottom:16px;gap:5px;padding:8px;border-radius:20px}
  .dock__i{width:calc(42px * var(--s));height:calc(42px * var(--s))}
  .dock__cta{height:42px!important;padding:0 13px;font-size:.74rem;border-radius:13px}
  .dock__lb{display:none}
  .dock__i.is-active::after{bottom:-5px;width:5px;height:5px}
  .marca{top:16px;left:16px}
  .marca img{height:28px}
}
.nav{display:none}


/* ============================================================
   BORDA NEON — fiel ao originkit
   ------------------------------------------------------------
   O que eu tinha era uma conica girando, e por isso parecia um risco
   dando volta. O original tem tres coisas que mudam tudo:

   1. DOIS arcos, em lados opostos (defasagem de meia volta).
   2. TRES camadas de brilho, com desfoque e alcance crescentes, em
      mix-blend-mode: plus-lighter. E a soma delas que vira luz em vez
      de borrao colorido.
   3. O arco anda pelo PERIMETRO com tempo por canto, nao por angulo.
      Girar por angulo faz o ponto acelerar nos cantos de um retangulo;
      andar pelo perimetro mantem a velocidade constante na borda.

   A faixa e recortada com mascara xor (borda menos miolo), que e o
   jeito de ter contorno colorido sem pintar o cartao inteiro.
   ============================================================ */
.neon{position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  overflow:visible;z-index:-1}
.neon__g{position:absolute;inset:0;overflow:visible;pointer-events:none}
.neon__b{position:absolute;border-radius:inherit;background:var(--arco);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask-composite:exclude;box-sizing:border-box}
.neon__edge{position:absolute;inset:0;mix-blend-mode:plus-lighter}
.neon__glow{position:absolute;mix-blend-mode:plus-lighter;box-sizing:border-box;
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask-composite:exclude}

.plano{position:relative;isolation:isolate;overflow:visible}
/* So o plano em destaque acende sozinho. Nos outros o brilho responde ao
   mouse, senao a secao inteira pisca e nada puxa o olho. */
.plano .neon{opacity:0;transition:opacity .45s var(--suave)}
.plano--destaque .neon,.plano:hover .neon{opacity:1}
.plano--destaque{border-color:#F2D9DF}
@media(prefers-reduced-motion:reduce){.plano .neon{display:none}}


/* ============================================================
   CARROSSEL MAGNETICO — cases
   ------------------------------------------------------------
   Anda sozinho e devagar. O cartao mais proximo do centro cresce; os
   outros recuam e perdem contraste, entao o olho sabe onde pousar sem
   precisar de seta nem de ponto.
   ============================================================ */
.carrossel{position:relative;overflow:hidden;padding:26px 0;
  -webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.carrossel__trilho{display:flex;gap:18px;width:max-content;
  animation:correr var(--dur,48s) linear infinite}
.carrossel:hover .carrossel__trilho{animation-play-state:paused}
@keyframes correr{to{transform:translateX(-50%)}}
.carrossel__c{flex:0 0 300px;border-radius:14px;overflow:hidden;background:#fff;
  border:1px solid #E5E4E1;transition:transform .5s var(--suave),opacity .5s var(--suave),border-color .3s;
  transform:scale(var(--cs,.92));opacity:var(--co,.7)}
.carrossel__c:hover{border-color:#D4D3CF}
.carrossel__m{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;background:#F2F2F0}
.carrossel__t{padding:13px 15px 15px}
.carrossel__n{font-size:.92rem;font-weight:500;letter-spacing:-.015em;color:#0A0A0A;margin:0}
.carrossel__s{font-size:.76rem;color:#8A8B90;margin:3px 0 0}
@media(prefers-reduced-motion:reduce){.carrossel__trilho{animation:none}}


/* ============================================================
   ASSINATURA — fecho da pagina
   ------------------------------------------------------------
   O traco se desenha quando entra na tela. stroke-dasharray igual ao
   comprimento do caminho e o offset indo a zero: e assim que uma
   assinatura "escreve" em SVG sem virar video.
   ============================================================ */
.assinatura{display:grid;place-items:center;gap:14px;padding:70px 20px 40px;text-align:center}
.assinatura__svg{width:min(300px,68vw);height:auto;overflow:visible}
.assinatura__p{fill:none;stroke:#0A0A0A;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:var(--len,1200);stroke-dashoffset:var(--len,1200);
  transition:stroke-dashoffset 2.4s cubic-bezier(.65,0,.35,1)}
.assinatura.is-in .assinatura__p{stroke-dashoffset:0}
.assinatura__lb{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:#8A8B90}
@media(prefers-reduced-motion:reduce){.assinatura__p{stroke-dashoffset:0;transition:none}}


/* ============================================================
   CENA 3D LATERAL
   ------------------------------------------------------------
   Fica grudada na lateral e acompanha o scroll. Some no celular: o
   iframe pesa e nao sobra largura pra ela ao lado do texto.
   ============================================================ */
.cena3d{position:sticky;top:calc(50vh - 150px);float:right;width:300px;height:300px;
  margin:0 0 -300px 24px;pointer-events:none;z-index:5}
.cena3d iframe{width:100%;height:100%;border:0;background:transparent}
.cena3d__falta{width:100%;height:100%;display:grid;place-items:center;text-align:center;
  border:1px dashed #D4D3CF;border-radius:18px;color:#8A8B90;font-size:.72rem;
  line-height:1.5;padding:20px;background:#fff}
@media(max-width:980px){.cena3d{display:none}}


/* ============================================================
   AJUSTES DEPOIS DO PRIMEIRO TESTE EM TELA
   ============================================================ */

/* O frame vertical era position:fixed e ficava colado na tela pra sempre,
   mesmo com o hero ja fora de vista. Dentro do hero sticky ele nao precisa
   mais disso: absolute o faz subir junto. */
.hero__frame{position:absolute}

/* A barra de progresso so faz sentido enquanto o hero existe. Fixa pra
   sempre ela virava um risco coral atravessando o site inteiro. */
.hero__prog{position:absolute;top:0;left:0}

/* O banner de cookie nasce centralizado embaixo, exatamente onde o dock
   agora mora, e um cobria o outro. Ele vai pra esquerda; o dock fica com
   o centro, que e onde a referencia coloca a navegacao. */
.cookie{left:20px;right:auto;transform:none;max-width:min(420px,calc(100vw - 40px))}
@media(max-width:860px){
  .cookie{left:12px;right:12px;max-width:none}
}


/* ============================================================
   SEGUNDA LEVA DE AJUSTES
   ============================================================ */

/* ---------- PLANOS: legibilidade ----------
   A lista de itens vinha quase apagada. Num fundo escuro texto a 45% de
   opacidade ainda le; sobre branco ele some. Aqui vale cor solida. */
.plano li,.plano__item,.plano ul li{color:#3D3E42;opacity:1}
.plano li span,.plano__obs{color:#55565A;opacity:1}
.plano__nome{color:#0A0A0A;font-weight:500}
.plano__por{color:#0A0A0A;font-weight:500;letter-spacing:-.03em}
.plano__de{color:#A0A1A6}

/* ---------- O lime sai de cena ----------
   O verde-limao foi pensado como CTA sobre preto. Sobre claro ele fica
   acido e destoa do resto da paleta. O coral assume o papel de compra,
   que ja e a cor de acento da marca. */
.plano--destaque .btn--primary,
.agenda__cta .btn--primary,
.btn--primary.btn--comprar{background:#FF3B5C;color:#fff;border-color:#FF3B5C}
.plano--destaque .btn--primary:hover,
.agenda__cta .btn--primary:hover{background:#E82E4D;border-color:#E82E4D;color:#fff}
/* o check da lista tambem era lime */
.plano li::marker,.plano__check,.linha__c b{color:#FF3B5C}

/* ---------- GRAFITES: fora ----------
   Os PNGs soltos no fundo funcionavam como textura sobre preto. Sobre o
   off-white viram mancha e sao a maior fonte de "cara de template". */
/* Grafites de fundo saem. O .risco NAO pode sair junto: ele e o span que
   ENVOLVE o texto do titulo, com o traco em SVG dentro. Escondendo o span
   sumia o titulo inteiro, que foi o que aconteceu no "Sobre". Some so o
   traco desenhado. */
.ov-camada,.ov,.grafite{display:none}
.risco svg{display:none}
.fogos{display:none}

/* ---------- CHIPS DO BOT ----------
   Estavam cinza-sobre-cinza. Passam a seguir o mesmo material do dock:
   branco, fio fino e o texto na cor dos icones. */
.chat__chips button,.chat__chips a,.chip,.balao-flut{
  background:#fff;border:1px solid #E5E4E1;color:#55565A;
  border-radius:100px;box-shadow:0 2px 8px rgba(10,10,10,.05)}
.chat__chips button:hover,.chat__chips a:hover,.chip:hover,.balao-flut:hover{
  background:#fff;border-color:#0A0A0A;color:#0A0A0A}

/* ---------- ASSINATURA: mais alta ----------
   Estava colada no fim da pagina. Quase o dobro de respiro em cima. */
.assinatura{padding:130px 20px 70px}
.assinatura__svg{width:min(340px,72vw)}

/* ---------- FADE DO FUNDO INICIAL ----------
   O hero termina em foto e a pagina comeca em off-white; sem transicao a
   emenda aparece como um corte. Esta faixa dissolve uma cor na outra.
   pointer-events none pra nao roubar clique de nada embaixo. */
.hero::after{content:'';position:absolute;left:0;right:0;bottom:0;height:22vh;
  pointer-events:none;z-index:3;
  background:linear-gradient(180deg,rgba(248,248,247,0),rgba(248,248,247,.85) 62%,#F8F8F7 100%)}

/* ---------- TRABALHOS E CONVITES ----------
   No modelo da referencia: uma fileira so, nomes em cinza, sem cartao,
   sem foto grande. O que importa e o conjunto, nao cada logo. */
.marquee{background:transparent;border-top:1px solid #E5E4E1;border-bottom:1px solid #E5E4E1;
  padding:26px 0}
.marquee__item{background:transparent;border:0;box-shadow:none;padding:0 30px;gap:9px}
.marquee__foto,.marquee__img,.marquee__slot{width:22px;height:22px;border-radius:5px}
.marquee__name{color:#6E6F74;font-size:.95rem;font-weight:400;letter-spacing:-.015em}
.marquee__sub{display:none}
.marquee__selo{display:none}

/* ---------- CARROSSEL MAGNETICO (barras) ----------
   Substitui o carrossel de cartoes. Barras finas que crescem em largura
   E altura conforme o cursor chega perto, estilo dock do macOS. Clicar
   abre uma como quadrado grande e desfoca as outras.

   A largura e a altura vem de variaveis escritas por JS a cada quadro,
   sem transition: o CSS interpolando brigaria com o loop e daria
   arrasto. A transicao so entra no abrir e fechar. */
.mag{display:flex;align-items:center;justify-content:center;gap:16px;
  position:relative;min-height:420px;padding:20px 0}
.mag__b{flex:none;overflow:hidden;cursor:pointer;position:relative;z-index:2;
  width:var(--w,100px);height:var(--h,340px);border-radius:12px;
  background-size:cover;background-position:center;background-repeat:no-repeat;
  background-color:#EDEDEA;will-change:width,height}
.mag.is-anim .mag__b{transition:width .3s ease-in-out,height .3s ease-in-out,
  filter .3s ease-in-out,opacity .3s ease-in-out}
.mag__b.is-open{z-index:3}
.mag__b.is-blur{filter:blur(2px);opacity:.6}
.mag__b::after{content:attr(data-nome);position:absolute;left:0;right:0;bottom:0;
  padding:34px 14px 12px;font-size:.8rem;color:#fff;letter-spacing:-.01em;
  background:linear-gradient(180deg,transparent,rgba(10,10,10,.7));
  opacity:0;transition:opacity .3s var(--suave);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.mag__b:hover::after,.mag__b.is-open::after{opacity:1}
.mag__fundo{position:absolute;inset:0;z-index:1;pointer-events:none}
.mag__fundo.is-on{pointer-events:auto}
@media(max-width:760px){
  /* Sem cursor nao ha ima. Vira rolagem lateral com encaixe. */
  .mag{overflow-x:auto;justify-content:flex-start;scroll-snap-type:x mandatory;
    padding:20px 16px;min-height:320px;-webkit-overflow-scrolling:touch}
  .mag__b{width:180px;height:260px;scroll-snap-align:center}
  .mag.is-anim .mag__b{transition:none}
}

/* ---------- VIDEOS ALTERNADOS ----------
   Video de um lado, texto do outro, invertendo a cada bloco. Quebra o
   empilhamento de secoes iguais que dava monotonia. */
.alt{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.alt--inv .alt__m{order:2}
.alt--inv .alt__t{order:1}
.alt__m{border-radius:14px;overflow:hidden;border:1px solid #E5E4E1;background:#fff}
.alt__m video,.alt__m img{width:100%;height:100%;display:block;object-fit:cover}
@media(max-width:860px){
  .alt{grid-template-columns:1fr;gap:26px}
  .alt--inv .alt__m,.alt--inv .alt__t{order:initial}
}

/* ---------- ESQUELETO DE CARREGAMENTO ----------
   Enquanto midia pesada nao chega, o lugar dela fica reservado com um
   brilho passando. Sem isso o layout pula quando a imagem entra, e
   salto de layout e a coisa que mais faz um site parecer quebrado. */
@keyframes brilhar{to{background-position:200% 0}}
.esqueleto{background:linear-gradient(90deg,#EFEFEC 25%,#F7F7F5 50%,#EFEFEC 75%);
  background-size:200% 100%;animation:brilhar 1.4s linear infinite}
.carregou{animation:none;background:none}
@media(prefers-reduced-motion:reduce){.esqueleto{animation:none}}

/* ---------- ENTRADA SUAVE ----------
   Elementos entram deslizando de baixo, um atras do outro. So opacity e
   transform, que o navegador anima sem repintar. */
.sobe{opacity:0;transform:translateY(18px);
  transition:opacity .7s var(--suave),transform .7s var(--suave)}
.sobe.is-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.sobe{opacity:1;transform:none;transition:none}}

/* Slot de video ainda vazio: mostra foto no lugar e diz o que falta ali,
   pra a estrutura ser avaliada antes da midia final existir. */
.alt__m--ph{position:relative}
.alt__m--ph .alt__v{filter:grayscale(.3) contrast(.95);opacity:.85}
.alt__falta{position:absolute;left:12px;bottom:12px;z-index:2;
  background:rgba(255,255,255,.92);border:1px solid #E5E4E1;border-radius:100px;
  padding:5px 12px;font-size:.68rem;color:#8A8B90;letter-spacing:-.01em}
.alt__m{aspect-ratio:16/10}


/* ============================================================
   TERCEIRA LEVA — correcoes de leitura
   ============================================================ */

/* ---------- EYEBROW: sem pilula ----------
   O style.css desenha o eyebrow como pilula coral com texto branco. O
   tema pintou o texto de cinza por cima, e o resultado foi coral sobre
   coral, ilegivel. Na referencia isso e so um rotulo pequeno em cima do
   titulo, sem caixa nenhuma — que e tambem o "rectangle sem sentido"
   que o Date apontou. */
.eyebrow{display:block;background:none;box-shadow:none;padding:0;
  border-radius:0;color:#8A8B90;font-weight:400;
  letter-spacing:.1em;font-size:.68rem;margin-bottom:16px}

/* ---------- SOMBRA VERDE E CHECKS ----------
   O #22C55E era o verde de "confirmado", de quando a paleta tinha lime.
   Vira coral em tudo que e visual de marca. O online do bot fica verde:
   ali verde nao e decoracao, e convencao de "esta disponivel". */
.plano__cupom{box-shadow:none}
.plano li::before,.plano__check,.selo-verificado,
.marquee__selo,.case__stat b{color:#FF3B5C}
.selo-verificado path,.selo-verificado circle{fill:#FF3B5C}
.editor__status.is-on{background:#FF3B5C}
.novid__aviso.is-ok{color:#FF3B5C}

/* ---------- BOTOES LEGIVEIS ----------
   Coral sempre com texto branco. O fantasma ganha contorno de verdade
   em vez de cinza sobre off-white, que sumia. */
.btn--primary,.btn--primary *,
a.btn--primary,button.btn--primary{color:#fff}
.btn--ghost{color:#0A0A0A;border-color:#0A0A0A;background:transparent}
.btn--ghost:hover{background:#0A0A0A;color:#fff}
.nav__cta,.dock__cta{color:#fff}

/* ---------- CAIXAS SEM SENTIDO ----------
   Secoes de texto puro estavam dentro de cartao com borda e degrade.
   Na referencia texto e texto: respira no fundo da pagina. */
.argumento,.sobre,.sec--texto{background:transparent;border:0;box-shadow:none}

/* ---------- LOGO MAIOR ---------- */



/* Sem movimento: a borda existe, so nao gira. */
.plano.neon--parado{border-color:#FF3B5C;box-shadow:0 0 0 1px rgba(255,59,92,.25),0 0 22px rgba(255,59,92,.12)}