/* ============================================================
   REVISAO — camada unica
   ------------------------------------------------------------
   Cinco rodadas de ajuste, na ordem em que aconteceram. Ficam num
   arquivo so porque cada folha extra e uma ida ao servidor antes de a
   primeira linha ser pintada, e eram sete.

   A ORDEM IMPORTA: varias regras aqui empatam em especificidade com as
   de tema.css e style.css, e quem decide o empate e quem vem depois.
   Nao reordene os blocos.
   ============================================================ */

/* ===== revisao.css ===== */
/* ============================================================
   AJUSTES DA REVISAO DO DATE — 01/09
   Camada final: entra depois de tema.css e so trata do que foi
   apontado na revisao. Separado pra dar pra ler a revisao inteira
   num lugar so, em vez de espalhada por dentro do tema.
   ============================================================ */

/* ---------- LOGO E CABECALHO ----------
   A logo estava em 38px competindo com um dock de 52px por item: quem
   dominava o topo era a navegacao, nao a marca. Inverte a proporcao. */
.marca{top:22px;left:32px}
@media(max-width:860px){.marca{top:14px;left:16px}}



/* Dock menor. O tamanho do ladrilho era o do dock de sistema, que mora
   sozinho na tela; aqui ele divide o topo com a logo. */
.dock{top:22px;gap:6px;padding:8px;border-radius:20px}
.dock__i{width:calc(40px * var(--s));height:calc(40px * var(--s))}
.dock__tile{border-radius:12px}
/* logo dentro do dock, a esquerda do inicio: nao e ladrilho (nao entra no ima),
   fica so centralizada verticalmente com a altura dos icones. */
.dock__marca{display:flex;align-items:center;flex:none;height:40px;padding:0 8px 0 4px;line-height:0}
.dock__marca img{height:22px;width:auto;display:block;transition:opacity .3s var(--suave)}
.dock__marca:hover img{opacity:.82}
/* no celular o dock ja fica apertado (icones + CTA); a logo dentro dele
   estouraria a largura, entao some abaixo de 860px e volta ao normal. */
@media(max-width:860px){ .dock__marca{display:none} }
.dock__cta{height:40px!important;padding:0 15px;border-radius:12px;font-size:.76rem}
.dock__lb{top:calc(100% + 11px);font-size:.74rem;padding:5px 10px}

/* Cabecalho: fundo CORAL deslizante atras do icone ativo. Um unico quadrado
   coral escorrega suave de um icone pro outro quando muda a secao ativa; o
   ícone fica na frente, em branco. Escopado pro dock principal (o de idiomas
   segue com o realce proprio dele). */
.dock:not(.dock--idiomas) .dock__glide{
  position:absolute;top:0;left:0;
  width:var(--gw,40px);height:var(--gh,40px);
  border-radius:12px;z-index:0;pointer-events:none;opacity:0;
  background:linear-gradient(180deg,#FF5A76,#FF3B5C);
  box-shadow:0 6px 16px rgba(255,59,92,.35);
  transform:translate(var(--gx,0),var(--gy,0));
  transition:transform .42s cubic-bezier(.34,.02,.2,1),
             width .42s cubic-bezier(.34,.02,.2,1),
             height .42s cubic-bezier(.34,.02,.2,1),
             opacity .3s ease}
.dock:not(.dock--idiomas).tem-ativo .dock__glide{opacity:1}
.dock:not(.dock--idiomas) .dock__i{z-index:1}
/* o tile ativo fica transparente pra deixar o coral do glider aparecer, e o
   icone vira branco pra contrastar. Sai o ponto coral antigo (o quadrado o
   substitui). */
.dock:not(.dock--idiomas) .dock__i.is-active .dock__tile{background:transparent}
.dock:not(.dock--idiomas) .dock__i.is-active .dock__tile::after{opacity:0}
.dock:not(.dock--idiomas) .dock__i.is-active svg{color:#fff}
.dock:not(.dock--idiomas) .dock__i.is-active::after{display:none}
@media(max-width:860px){
  .dock{top:auto;bottom:14px;gap:4px;padding:7px;border-radius:18px}
  .dock__i{width:calc(38px * var(--s));height:calc(38px * var(--s))}
  .dock__cta{height:38px!important;padding:0 12px;font-size:.72rem;border-radius:11px}
}

/* ---------- TITULOS UM POUCO MENORES ---------- */
.title{font-size:clamp(1.78rem,3.85vw,3rem);margin:0 0 34px;max-width:20ch}
.hero__title{font-size:clamp(2.1rem,5.2vw,4rem)}

/* ---------- GRIFO CORAL ----------
   O gradiente iridescente saiu. Ele pintava a palavra de seis cores e
   era a coisa mais chamativa da tela sem ser a mais importante. No lugar
   entra o grifo de marca-texto: a palavra continua legivel em preto e o
   coral vira fundo, como caneta passada por cima.

   O fundo nao cobre a caixa inteira da letra: comeca em 12% da altura,
   que e onde a ponta da caneta encostaria. Coberto ate em cima viraria
   etiqueta. */
.hero__title i,.risco,.iris{
  background-image:none!important;background-size:auto!important;
  -webkit-text-fill-color:currentColor!important;color:#0A0A0A!important;
  animation:none!important;font-weight:500}
.hero__title i,.iris{
  background:linear-gradient(180deg,transparent 12%,rgba(255,59,92,.34) 12%,rgba(255,59,92,.34) 92%,transparent 92%)!important;
  padding:0 .12em;margin:0 -.04em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
/* No "sobre" o titulo fica limpo: nem arco-iris, nem grifo. */
.risco{background:none!important;padding:0}

/* ---------- FAIXAS: TROCA DE ROUPA ----------
   A faixa de trabalhos passava em corpo pequeno demais pra ser lida em
   movimento, e a de aprovados tinha o tamanho certo. Elas trocam.
   Mesma velocidade nas duas, mais lenta que antes: com o cartao maior,
   a mesma duracao lia como pressa. */
.marquee,.marquee--aprov{background:#F1F1EF;border-color:#E5E4E1}
.marquee__row{animation-duration:210s!important}
.marquee--aprov .marquee__row{animation-duration:210s!important}
.marquee__selo{color:#8A8B90;background:none;letter-spacing:.14em}

/* trabalhos e convites, agora no corpo grande */
.marquee__item{position:relative;isolation:isolate;overflow:hidden;
  gap:14px;padding:14px 26px 14px 14px;border-radius:20px;
  background:#fff;border:1px solid #E5E4E1;box-shadow:0 2px 10px rgba(10,10,10,.04)}
.marquee__item:hover{border-color:#D4D3CF}
.marquee__bg{position:absolute;inset:0;z-index:-1;pointer-events:none;
  overflow:hidden;border-radius:20px;opacity:.16}
.marquee__bg img,.marquee__bg video{position:absolute;inset:-20%;
  width:140%;height:140%;object-fit:cover;filter:blur(18px) saturate(1.2)}
.marquee__foto{width:60px;height:60px;border-radius:15px;background:#EDECE9}
.marquee__name{font-size:1.28rem;font-weight:500;color:#0A0A0A;letter-spacing:-.028em}
.marquee__sub{font-size:.74rem;font-weight:500;color:#8A8B90;letter-spacing:.02em}

/* aprovados, agora na pastilha compacta */
.aprov__item{gap:10px;padding:8px 18px 8px 8px;border-radius:999px;
  background:#fff;border:1px solid #E5E4E1;box-shadow:none;align-items:center}
.aprov__item:hover{border-color:#D4D3CF}
.aprov__bg{display:none}
.aprov__foto{width:34px;height:34px;background:#EDECE9}
.aprov__name{font-size:.95rem;font-weight:500;color:#0A0A0A;letter-spacing:-.02em}
.aprov__badge{align-self:center;font-size:.64rem;padding:3px 9px;border-radius:999px;
  background:#F1F1EF;color:#55565A;border:0}

/* ---------- PLANOS ----------
   O contorno e a sombra saem dos tres retangulos: com o neon ligado no
   destaque, borda em todo mundo virava duas molduras concorrendo. */
.plano{border:1px solid #EAE9E6!important;box-shadow:none!important;background:#fff}
.plano:hover{border-color:#E0DFDC!important}
.plano--destaque{border-color:transparent!important;background:#fff}
.plano .neon{opacity:0}
.plano--destaque .neon{opacity:1}
.plano:hover .neon{opacity:0}
.plano--destaque:hover .neon{opacity:1}
.plano.neon--parado{border-color:#FF3B5C!important;box-shadow:none!important}

/* cupom colado no preco cortado, na mesma linha */
.plano__linhade{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:2px}
.plano__de{margin:0;text-decoration:line-through;font-size:.92rem}
.plano__cupom{display:inline-flex;align-items:center;gap:8px;
  background:#FFF1F3;border:1px dashed #FFC2CD;border-radius:999px;
  padding:4px 12px;font-size:.74rem;line-height:1;margin:0;box-shadow:none}
.plano__cupom-desconto{font-weight:600;color:#FF3B5C}
.plano__cupom-codigo{color:#B7566A;letter-spacing:.02em}
.plano__cupom-codigo b{font-weight:600;letter-spacing:.06em}

/* ---------- COVERFLOW (editores convidados) ---------- */
.cover{position:relative;width:100%;height:clamp(320px,42vw,440px);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;outline:none}
.cover__palco{position:relative;width:clamp(240px,30vw,400px);
  height:clamp(300px,38vw,400px);transform-style:preserve-3d}
.cover__c{position:absolute;left:50%;top:50%;width:100%;height:100%;
  border-radius:30px;overflow:hidden;transform-style:preserve-3d;
  transform-origin:center center;background:#EDECE9;
  transform:translate(-50%,-50%);outline:none}
.cover__c:focus-visible{outline:2px solid #FF3B5C;outline-offset:4px}
.cover__img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;user-select:none}
/* o veu escurece so o pe da carta, pra o nome ler sobre foto clara */
.cover__veu{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.62) 100%)}
.cover__meta{position:absolute;left:22px;right:22px;bottom:22px;
  display:flex;flex-direction:column;gap:2px;pointer-events:none}
.cover__nome{color:#fff;font-size:1.55rem;font-weight:500;
  letter-spacing:-.03em;line-height:1.1;text-shadow:0 2px 10px rgba(0,0,0,.4)}
.cover__papel{color:rgba(255,255,255,.72);font-size:.82rem;letter-spacing:-.01em}
.cover__status{position:absolute;top:16px;left:16px;font-size:.64rem;
  font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  padding:5px 11px;border-radius:999px;color:#fff}
.cover__status.is-on{background:#FF3B5C}
.cover__status.is-soon{background:rgba(10,10,10,.5);backdrop-filter:blur(8px)}
.cover__info{position:absolute;top:14px;right:14px;width:32px;height:32px;
  border-radius:50%;border:0;cursor:help;display:grid;place-items:center;
  background:rgba(255,255,255,.9);backdrop-filter:blur(8px)}
/* escurece as cartas de tras. Fica DENTRO da carta pra acompanhar a
   rotacao dela, e nao pairar reto por cima do palco. */
.cover__dim{position:absolute;inset:0;background:#000;opacity:0;pointer-events:none}
.cover__slot{position:absolute;inset:auto 12px 12px 12px;font-size:.6rem!important}
.editores__arrows button{background:#fff;border:1px solid #E5E4E1;color:#3D3E42;
  width:40px;height:40px;border-radius:50%;cursor:pointer;font-size:1.1rem;
  transition:border-color .2s var(--suave),color .2s var(--suave)}
.editores__arrows button:hover{border-color:#0A0A0A;color:#0A0A0A}

/* ---------- LEQUE DO FORMULARIO FINAL ----------
   As cartas abrem pros dois lados a partir do centro. O afastamento e o
   giro crescem com o indice, entao a fileira parece continuar pra fora
   da tela em vez de terminar numa borda. */
.novid{position:relative;overflow:hidden}
.leque{position:absolute;inset:0;pointer-events:none;
  display:grid;place-items:center;perspective:1400px}
.leque__c{position:absolute;top:50%;left:50%;
  width:clamp(150px,15vw,230px);height:clamp(190px,19vw,290px);
  border-radius:14px;overflow:hidden;
  transform:translate(-50%,-50%)
    translateX(calc(var(--i) * clamp(115px,11.5vw,180px)))
    rotateY(calc(var(--i) * -7deg))
    scale(calc(1 - (max(var(--i), var(--i) * -1) - 1) * 0.06));
  opacity:calc(1 - (max(var(--i), var(--i) * -1) - 1) * 0.16);
  box-shadow:0 24px 60px -24px rgba(10,10,10,.35)}
.leque__c img{width:100%;height:100%;object-fit:cover;display:block}
/* a nevoa limpa o centro: o formulario precisa de fundo calmo, e as
   cartas do meio ficariam bem atras do texto */
.leque::after{content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 46% 60% at 50% 50%,
    #F8F8F7 0%,#F8F8F7 42%,rgba(248,248,247,.86) 66%,rgba(248,248,247,0) 100%)}
.novid__caixa{position:relative;z-index:2;background:transparent!important;
  border:0!important;box-shadow:none!important;text-align:center;
  max-width:560px;margin:0 auto}
.novid__caixa .eyebrow,.novid__caixa .title,.novid__lead{text-align:center}
.novid__caixa .title{margin-left:auto;margin-right:auto}
.novid__lead{margin-left:auto;margin-right:auto}
.novid__form{max-width:440px;margin:32px auto 0}
@media(max-width:860px){.leque__c{display:none}.leque::after{display:none}}

/* ---------- CAIXA DE SUGESTOES ----------
   Era uma pastilha escura translucida, herdada do tema anterior: no
   fundo claro virava um borrao cinza. Passa a ser a mesma materia do
   dock (branco, fio, sombra propria) e cresce ao passar o mouse, com o
   mesmo exagero antes de assentar que os icones tem. */
#sugestoes{background:rgba(255,255,255,.86)!important;
  backdrop-filter:blur(24px) saturate(150%);
  -webkit-backdrop-filter:blur(24px) saturate(150%);
  border:1px solid #E5E4E1!important;border-radius:16px;
  box-shadow:0 12px 34px rgba(10,10,10,.10),0 2px 6px rgba(10,10,10,.05)!important;
  transform-origin:right center;
  transition:opacity .5s var(--suave),transform .34s cubic-bezier(.34,1.56,.64,1),
             border-color .3s var(--suave),background-color .3s var(--suave),
             box-shadow .3s var(--suave)}
#sugestoes.is-on:hover{background:#fff!important;border-color:#D0CFCB!important;
  transform:scale(1.07)!important;
  box-shadow:0 18px 44px rgba(10,10,10,.16)!important}
/* mesma cor dos icones do dock */
.sug__linha{color:#3D3E42!important;font-weight:500}
#sugestoes:hover .sug__linha{color:#0A0A0A!important}

/* ---------- RITMO ENTRE SECOES ----------
   O respiro estava desigual: secoes coladas nas vizinhas por causa de
   margem propria, e o titulo largando longe demais do corpo. Uma medida
   so pra todas, e a faixa rolante encosta nas vizinhas de proposito,
   porque ela e uma divisa, nao um bloco. */
.sec{padding:clamp(84px,9vw,124px) clamp(20px,5vw,72px)}
.sec + .sec{padding-top:clamp(56px,6.5vw,88px)}
.marquee{margin:0}
.marquee + .sec{padding-top:clamp(70px,8vw,104px)}
.cases__head{margin-bottom:30px}
.eyebrow{margin-bottom:14px}
@media(max-width:640px){.sec{padding:56px 18px}.sec + .sec{padding-top:40px}}

/* ---------- ENTRADA DOS TEXTOS ----------
   Sai o desfoque. Ele custava caro de compor a cada quadro e, em tela
   clara, lia como texto mal renderizado em vez de texto chegando. Fica
   so a opacidade com um deslocamento curto, e mais rapido. */
.reveal > *{filter:none!important;transform:translateY(14px);
  transition:opacity .42s ease var(--d,0ms),transform .42s cubic-bezier(.22,1,.36,1) var(--d,0ms)}
.reveal.is-vis > *{filter:none!important;transform:none}
.anima-item{filter:none!important;transform:translateY(12px);
  transition:opacity .38s ease var(--di,0ms),transform .38s cubic-bezier(.22,1,.36,1) var(--di,0ms)}
.anima-item.is-vis{filter:none!important;transform:none}
.sobe{transform:translateY(14px);transition:opacity .42s ease,transform .42s cubic-bezier(.22,1,.36,1)}

/* ---------- ROLAGEM ----------
   O scroll-behavior:smooth do navegador sai. A suavizacao passa a ser
   nossa, quadro a quadro; com os dois ligados o navegador tentaria
   suavizar cada passo que o nosso loop ja da, e o resultado e engasgo,
   nao suavidade. */
html{scroll-behavior:auto!important}

/* A logo parecia pequena por causa do arquivo, nao do CSS: o PNG e uma
   tela 1920x1080 com a marca ocupando 21% da altura, centralizada em
   vazio. Aumentar a altura do <img> ampliava a moldura transparente
   junto. O arquivo passa a ser a versao recortada na caixa de tinta
   (1497x239), entao a altura pedida e a altura que aparece. */

/* ===== revisao2.css ===== */
/* ============================================================
   SEGUNDA RODADA DA REVISAO — 01/09
   ============================================================ */

/* ---------- FAIXAS SEM FUNDO ----------
   Na primeira tentativa eu cresci o CARTAO e nao o conteudo dele: o
   retangulo ficou maior com a mesma foto de 60px e o mesmo nome dentro,
   entao o que cresceu foi o vazio. Aqui o cartao inteiro sai de cena e
   sobram foto e nome, que sao a informacao, no corpo grande.

   Some tambem a barra de fundo da faixa. Na referencia os nomes flutuam
   direto sobre o fundo da pagina; a barra criava um bloco escuro
   atravessando o site e roubava a atencao do que estava em volta. */
.marquee,.marquee--aprov{
  background:transparent!important;border:0!important;
  padding:clamp(26px,3.5vw,44px) 0}
.marquee__item,.marquee__item--link,.aprov__item{
  background:transparent!important;border:0!important;box-shadow:none!important;
  padding:0 clamp(22px,2.6vw,40px) 0 0!important;border-radius:0!important}
.marquee__item:hover,.aprov__item:hover{border:0!important}
.marquee__bg,.aprov__bg{display:none!important}
.marquee__row{gap:clamp(20px,2.4vw,34px)!important;align-items:center}

/* foto e nome no mesmo tamanho nas duas faixas: sao a mesma familia de
   informacao, e tamanhos diferentes sugeririam hierarquia que nao existe */
.marquee__foto,.aprov__foto{
  width:clamp(58px,5.4vw,74px)!important;height:clamp(58px,5.4vw,74px)!important;
  border-radius:50%!important;background:#EDECE9;flex:none}
.marquee__foto{border-radius:18px!important}
.marquee__img,.aprov__img{width:100%;height:100%;object-fit:cover;display:block}
.marquee__name,.aprov__name{
  font-size:clamp(1.15rem,1.5vw,1.5rem)!important;font-weight:500!important;
  color:#0A0A0A!important;letter-spacing:-.032em!important;white-space:nowrap}
.marquee__sub{font-size:.8rem!important;color:#8A8B90!important;font-weight:400!important}
.aprov__badge{
  background:transparent!important;color:#8A8B90!important;border:0!important;
  padding:0!important;font-size:.76rem!important;font-weight:400;letter-spacing:-.01em}
.marquee__item,.aprov__item{gap:14px!important}

/* as pontas da faixa desaparecem no fundo da pagina, entao o nome nao
   e cortado por uma aresta: ele se apaga */
.marquee__row{mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}

/* ---------- SOMBRA DO QUADRO VERTICAL ----------
   Estava pesada a ponto de parecer que o quadro flutuava sobre a foto em
   vez de pertencer a ela. */
.hero__frame-box{box-shadow:0 18px 44px -28px rgba(10,10,10,.30)!important}
.vsl__moldura,.midia16{box-shadow:0 16px 40px -26px rgba(10,10,10,.26)!important}

/* Frame das animacoes SEM video ainda: placeholder escuro elegante no lugar do
   retangulo branco. Some so no celular (pra nao tapar o hero); com video real
   aparece em tudo. */
.hero__frame--vazio .hero__frame-box{
  background:linear-gradient(160deg,#151517,#0A0A0A)!important;
  border-color:rgba(255,255,255,.12)!important}
.hero__frame-ph{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  width:100%;height:100%;color:#fff;text-align:center;padding:16px}
.hero__frame-ph span{font-weight:700;font-size:clamp(1rem,1.5vw,1.25rem);letter-spacing:-.01em}
.hero__frame-ph small{font-size:.72rem;color:#FF3B5C;font-weight:700;text-transform:uppercase;letter-spacing:.1em}
@media(max-width:600px){.hero__frame--vazio{display:none}}

/* ---------- FORMULARIO FINAL, REFEITO ----------
   Na primeira versao as cartas ficavam ATRAS do texto e o titulo caia em
   cima delas, ilegivel. Na referencia as imagens ocupam so a parte de
   CIMA da secao, cortadas pelo topo, e o texto mora embaixo em espaco
   limpo. E essa separacao que faz as duas coisas conviverem.

   A faixa vai a largura toda da tela, nao so a da coluna de texto: e o
   transbordo pelas laterais que da a sensacao de fileira continuando
   pra fora, em vez de composicao centrada e fechada. */
.novid{position:relative;overflow:hidden}
/* Sangria ate a borda da tela pelo idioma das margens negativas, e nao
   por left:50% com margin-left:-50vw. Este ultimo depende da largura do
   bloco-pai, que aqui muda com o padding da secao, e o resultado saia
   deslocado pra direita. Com margem negativa dos dois lados o calculo
   se resolve sozinho em qualquer largura. */
/* Precisa do .novid junto: o style.css tem
   ".sec > *:not(.grafite){position:relative}", que pontua (0,2,0) e
   ganha de um ".leque" sozinho, (0,1,0). O position virava relative e a
   largura colapsava pra zero, porque todo o conteudo aqui e absoluto.
   Com dois seletores de classe a conta empata e a ordem do arquivo
   decide, que e a nosso favor. */
.novid .leque{position:absolute;left:0;right:0;top:0;width:auto;margin:0;
  height:clamp(190px,23vw,320px);
  display:block;perspective:1500px;pointer-events:none}
/* a secao abre espaco pra faixa por padding, entao o texto comeca depois
   dela sem depender de margem de um elemento posicionado */
.novid{padding-top:calc(clamp(190px,23vw,320px) + clamp(40px,5vw,72px))!important}
.novid .leque__c{position:absolute;top:0;left:50%;
  width:clamp(130px,13vw,205px);height:clamp(165px,17vw,260px);
  border-radius:16px;overflow:hidden;
  transform:translateX(-50%)
    translateX(calc(var(--i) * clamp(84px,8.6vw,140px)))
    translateY(calc((max(var(--i), var(--i) * -1) - 1) * clamp(14px,1.6vw,26px) - clamp(34px,4vw,58px)))
    rotateY(calc(var(--i) * -6deg))
    scale(calc(1 - (max(var(--i), var(--i) * -1) - 1) * 0.05));
  /* as cartas de fora saem de foco e se apagam: e o desfoque que faz a
     fileira ler como profundidade em vez de colagem plana */
  filter:blur(calc((max(var(--i), var(--i) * -1) - 1) * 1.6px));
  opacity:calc(1 - (max(var(--i), var(--i) * -1) - 1) * 0.14);
  box-shadow:0 20px 44px -26px rgba(10,10,10,.30)}
.leque__c img{width:100%;height:100%;object-fit:cover;display:block}
/* o pe da faixa dissolve no fundo da pagina, entao nao existe uma linha
   onde as imagens terminam */
.novid .leque::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(248,248,247,0) 40%,#F8F8F7 92%)}
.novid__caixa{position:relative;z-index:2;background:transparent!important;
  border:0!important;box-shadow:none!important;text-align:center;
  max-width:560px;margin:0 auto;padding:0 clamp(20px,5vw,72px)}
.novid__form{max-width:440px;margin:30px auto 0;text-align:left}
@media(max-width:860px){
  .novid .leque{height:150px}
  .novid{padding-top:calc(150px + 32px)!important}
  .novid .leque__c{width:110px;height:140px}
}

/* ===== revisao3.css ===== */
/* ============================================================
   TERCEIRA RODADA — 01/09
   ============================================================ */

/* ---------- LOGO ----------
   Terceira tentativa, e as duas anteriores erraram por motivos
   diferentes: a primeira mexeu na altura de um arquivo cheio de vazio, a
   segunda recortou o arquivo mas manteve a altura tímida que fazia
   sentido pro arquivo antigo. Com o PNG já recortado na tinta, 34px
   viravam 34px de marca de verdade, e isso era pouco. */



/* ---------- GRIFO ----------
   Estava em 34% de opacidade, que sobre fundo claro vira rosa lavado. O
   coral entra cheio e o texto passa a branco: e assim que marca-texto
   funciona quando a tinta e forte, o contraste vem da inversao e nao da
   transparencia. */
.hero__title i,.iris{
  background:var(--coral,#FF3B5C)!important;
  color:#fff!important;-webkit-text-fill-color:#fff!important;
  padding:.02em .14em;margin:0 -.04em;border-radius:3px}

/* ---------- FAIXAS: UM PONTO PRA TRAS ----------
   Na rodada anterior eu tirei o cartao e cresci foto e nome de uma vez
   so. Ficou grande demais: a faixa passou a competir com os titulos das
   secoes, que deveriam ser o ponto mais alto da pagina. Volta um degrau,
   ainda bem acima do tamanho original. */
.marquee,.marquee--aprov{padding:clamp(20px,2.6vw,32px) 0}
.marquee__foto,.aprov__foto{
  width:clamp(44px,3.8vw,54px)!important;height:clamp(44px,3.8vw,54px)!important}
.marquee__name,.aprov__name{font-size:clamp(.98rem,1.12vw,1.14rem)!important}
.marquee__sub{font-size:.72rem!important}
.aprov__badge{font-size:.7rem!important}
.marquee__item,.aprov__item{gap:11px!important;
  padding:0 clamp(18px,2vw,30px) 0 0!important}
.marquee__row{gap:clamp(14px,1.8vw,24px)!important}

/* ---------- LEQUE NA TELA TODA ----------
   Ficava preso na coluna de 1440px e as cartas das pontas eram cortadas
   por uma aresta reta no meio do nada. Agora a faixa sangra ate a borda
   da janela.

   A conta usa 100vw a partir do centro da propria secao, e nao margens
   negativas: a secao tem max-width e margin auto, entao o quanto ela
   precisa transbordar depende da largura da tela, e so o centro e um
   ponto de referencia estavel nas duas. */
.novid .leque{
  left:50%;right:auto;width:100vw;transform:translateX(-50%)}

/* ---------- TITULO MAIS PERTO ----------
   O vao entre a faixa e o titulo era de uma secao inteira e cortava a
   relacao entre a imagem e a frase. */
.novid{padding-top:calc(clamp(190px,23vw,320px) + clamp(8px,1.4vw,20px))!important}
@media(max-width:860px){.novid{padding-top:calc(150px + 10px)!important}}
.novid__caixa .title{margin-bottom:16px}
.novid__lead{margin-bottom:0}

/* ---------- CAIXA DE E-MAIL ----------
   Um campo so. Cada campo a mais numa lista de avisos e gente que
   desiste no meio, e nome e telefone nao servem pra mandar e-mail.

   Cinza escuro, como pedido: sobre um fundo quase branco e a peca mais
   escura da tela, entao e pra ela que o olho vai depois de ler o titulo. */
.novid__campo--unico{
  display:flex!important;align-items:center;gap:8px;
  background:#26262A;border:1px solid #26262A;border-radius:999px;
  padding:6px 6px 6px 22px;width:100%;max-width:420px;margin:26px auto 0;
  transition:border-color .25s var(--suave),box-shadow .25s var(--suave)}
.novid__campo--unico:focus-within{
  border-color:#3F3F46;box-shadow:0 0 0 4px rgba(38,38,42,.10)}
.novid__campo--unico input{
  flex:1;min-width:0;background:none!important;border:0!important;
  outline:none;color:#F5F4F1!important;font-family:inherit;
  font-size:.98rem;letter-spacing:-.012em;padding:12px 0!important;height:auto!important}
.novid__campo--unico input::placeholder{color:#8C8B85}
.novid__enviar{
  width:40px;height:40px;flex:none;border:0;border-radius:50%;cursor:pointer;
  background:var(--coral,#FF3B5C);color:#fff;display:grid;place-items:center;
  padding:0!important;min-width:0!important;
  transition:background .2s var(--suave),transform .2s var(--suave)}
.novid__enviar svg{width:19px;height:19px}
.novid__enviar:hover{background:#0A0A0A}
.novid__enviar:active{transform:scale(.93)}
.novid__enviar:disabled{opacity:.55;cursor:default}
.novid__enviar:focus-visible{outline:2px solid var(--coral,#FF3B5C);outline-offset:3px}
/* rotulo que existe so pra leitor de tela: o campo tem placeholder, mas
   placeholder some ao digitar e nao serve de nome acessivel */
.sr-oculto{position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.novid__form{max-width:none!important;margin:0!important;text-align:center!important}
.novid__form .optin{max-width:420px;margin:16px auto 0;text-align:left}
.novid__aviso{text-align:center}

/* ---------- NEON DO PLANO INDIVIDUAL ----------
   O plano em destaque nao tem borda propria: quem desenha o contorno e o
   neon. Duas bordas juntas viravam moldura dupla. */
.plano--destaque{border-color:transparent!important;box-shadow:none!important}
.plano--destaque .neon{opacity:1!important}

/* ===== revisao4.css ===== */
/* ============================================================
   QUARTA RODADA — 01/09
   ============================================================ */

/* ---------- LOGO, FONTE UNICA ----------
   O tamanho estava declarado em SEIS lugares, entre tema.css e as tres
   camadas de revisao, cada rodada empilhando outro !important por cima
   do anterior. Uma delas chegou a DIMINUIR a logo sem eu perceber, o que
   explica o "nao aumentou" depois de eu ter dito que aumentei.

   Daqui pra frente o tamanho mora so aqui. As outras foram apagadas. */
/* A logo do dock apontava pro PNG ANTIGO. O recorte que eu tinha feito
   foi parar so na funcao navBar(), que este tema deixa em display:none,
   entao o que aparecia na tela seguia sendo a tela 1920x1080 com 21% de
   tinta. Era isso, e nao a altura, que fazia ela continuar minuscula
   depois de tres rodadas mexendo no numero.

   Com o arquivo certo (1497x239, proporcao 6.26:1) a altura vira largura
   depressa: 54px de altura dao 338px de largura, e mais que isso comeca
   a encostar no dock, que e centralizado. */
.marca img{height:54px!important;
  /* O logo era pintado de PRETO por um filter:brightness(0) herdado de quando o
     PNG era preto. Como o arquivo agora ja e coral, anulamos o filtro (senao
     ele forca preto puro por cima do coral) e deixamos opacidade cheia. Era
     ISSO que fazia o logo aparecer preto. */
  filter:none!important;opacity:1!important}
@media(max-width:1100px){.marca img{height:42px!important}}
@media(max-width:860px){.marca img{height:34px!important}}
@media(max-width:520px){.marca img{height:26px!important}}

/* ---------- NEON: O MOTIVO DE NAO APARECER COR ----------
   O componente do Originkit soma as camadas em plus-lighter, que e mistura
   ADITIVA. Sobre fundo escuro ela acende; sobre o nosso #F8F8F7, somar
   qualquer coisa a um branco continua dando branco. A borda estava toda
   ali, desenhada e girando, pintando invisivel.

   Em fundo claro a mistura passa a normal e o coral pinta por cima. E o
   unico jeito de o mesmo desenho funcionar nos dois fundos: o problema
   nunca foi a cor nem a opacidade, foi a conta da mistura. */
.neon__edge,.neon__glow{mix-blend-mode:normal!important}
/* sem a soma, cada camada precisa de mais corpo pra o brilho aparecer */
.neon__glow{filter:saturate(1.25)}
.plano--destaque{border-color:transparent!important;box-shadow:none!important}
.plano--destaque .neon{opacity:1!important}

/* ---------- GRIFO ALINHADO AO PARAGRAFO ----------
   O <i> do titulo e display:block, entao a faixa coral ocupava a linha
   inteira e passava do texto. Titulo e paragrafo passam a dividir a
   MESMA medida, e por isso terminam na mesma vertical. Em ch nao daria:
   um ch do titulo e quase tres vezes um ch do paragrafo. */
.hero__copy{--medida:clamp(300px,34vw,470px)}
.hero__title i{max-width:var(--medida);width:100%;box-sizing:border-box}
.hero__body{max-width:var(--medida)!important}

/* ---------- ROTULO DAS FAIXAS ----------
   Mesma pastilha de texto das secoes: cinza fraco, caixa alta, bem
   espacado. E rotulo, nao titulo, entao nao disputa com o que passa
   embaixo dele. */
.marquee__selo{
  display:block!important;background:none!important;box-shadow:none!important;
  color:#8A8B90!important;font-size:.68rem!important;font-weight:400!important;
  letter-spacing:.1em!important;text-transform:uppercase;
  padding:0!important;border-radius:0!important;
  margin:0 0 18px clamp(20px,5vw,72px)!important}

/* ---------- BOTOES COM IMA ----------
   O deslocamento vem do JS (a distancia depende de onde o cursor esta
   dentro do botao); daqui sai so a materia e a curva de volta. A curva
   passa um pouco do lugar antes de assentar, como a mola do cabecalho.

   will-change no transform porque estes elementos mudam a cada quadro
   enquanto o mouse esta em cima. */
.btn,.dock__cta,.novid__enviar,.editores__arrows button{
  --mx:0px;--my:0px;--me:1;
  transform:translate(var(--mx),var(--my)) scale(var(--me));
  will-change:transform}
.btn.is-solto,.dock__cta.is-solto,.novid__enviar.is-solto,
.editores__arrows button.is-solto{
  transition:transform .42s cubic-bezier(.34,1.4,.64,1)}
/* o rotulo anda um pouco menos que o botao: a diferenca e o que faz a
   peca parecer ter espessura em vez de ser um adesivo deslizando */
.btn__t{display:inline-block;
  transform:translate(calc(var(--mx) * -.28),calc(var(--my) * -.28))}
.btn.is-solto .btn__t{transition:transform .42s cubic-bezier(.34,1.4,.64,1)}

/* ===== revisao5.css ===== */
/* ============================================================
   QUINTA RODADA — 01/09
   ============================================================ */

/* ---------- LOGO PELA METADE ----------
   Com o arquivo recortado ela finalmente cresceu de verdade, e ficou
   grande demais: 54px de altura davam 338px de largura. Metade disso. */
.marca img{height:30px!important}
@media(max-width:1100px){.marca img{height:26px!important}}
@media(max-width:860px){.marca img{height:22px!important}}
@media(max-width:520px){.marca img{height:18px!important}}
.marca{top:26px!important}
@media(max-width:860px){.marca{top:16px!important}}

/* ---------- AS LINHAS DA FAIXA ----------
   Vinham do proprio rotulo: no style.css o selo e uma pastilha com fio
   em volta, e eu tinha tirado o fundo e a cor mas deixado a borda. Como
   ele e display:block, os dois fios corriam a largura inteira da secao e
   viravam duas reguas atravessando a pagina. */
.marquee__selo{
  border:0!important;width:fit-content;
  /* sem largura propria ele volta a esticar e as bordas de qualquer
     regra futura fariam a mesma coisa de novo */
  }

/* ---------- CORTE NO HOVER ----------
   O item subia 2px ao passar o mouse e a faixa tem overflow escondido,
   entao o topo do cartao era decepado. Sem o retangulo, o levantar nao
   diz mais nada: o realce fica na opacidade, que nao precisa de espaco
   fora da caixa pra acontecer. */
.marquee__item--link:hover,.marquee__item:hover,.aprov__item:hover{
  transform:none!important}
.marquee__item--link{transition:opacity .25s var(--suave)}
.marquee__item--link:hover{opacity:.62}

/* ---------- BOTAO DE SETA ALINHADO ----------
   O campo e o botao estavam em alturas diferentes porque o input herdava
   padding vertical proprio. Os dois passam a ter a MESMA altura e a
   pastilha se ajusta a ela, em vez de cada um chegar num tamanho. */
.novid__campo--unico{padding:7px 7px 7px 22px!important;align-items:center!important;
  /* o .novid__campo de origem e uma COLUNA (rotulo em cima, campo embaixo).
     Aqui o rotulo saiu pro leitor de tela e sobraram campo e botao, que
     precisam dividir a mesma linha, senao o botao cai embaixo. */
  flex-direction:row!important;flex-wrap:nowrap!important}
.novid__campo--unico input{
  height:40px!important;padding:0!important;margin:0!important;
  line-height:40px!important;border:0!important;
  display:block;align-self:center}
.novid__enviar{width:40px!important;height:40px!important;align-self:center}

/* ---------- AVISO DE CONSENTIMENTO ----------
   Fica ACIMA do botao na leitura e abaixo dele na tela: quem lê chega
   nele antes de sair da secao, e quem so clica nao e barrado por uma
   caixa a mais. Texto pequeno, mas nao apagado: aviso que ninguem
   consegue ler nao vale como aviso. */
.novid__termo{
  max-width:420px;margin:14px auto 0;text-align:center;
  font-size:.76rem;line-height:1.5;color:#8A8B90;letter-spacing:-.005em}
.novid__termo a{color:#55565A;text-decoration:underline;text-underline-offset:2px}
.novid__termo a:hover{color:#0A0A0A}

/* o botao de musica saiu do site; o que sobrou de estilo dele nao pode
   voltar a reservar espaco se algum resto de marcacao aparecer */
#som{display:none!important}

/* ---------- CONTATO DE EMPRESA ----------
   Dois campos por linha no desktop, um por linha no celular. A pastilha
   escura e a mesma da lista de novidades: o site so tem duas superficies
   de entrada e elas nao deviam parecer coisas diferentes. */
.emp__lead{margin:0 auto 30px;text-align:center}
.emp__form{max-width:620px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.emp__linha{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:640px){.emp__linha{grid-template-columns:1fr}}
.emp__campo{display:block;position:relative}
.emp__campo input,.emp__campo select,.emp__campo textarea{
  width:100%;background:#26262A;border:1px solid #26262A;border-radius:16px;
  color:#F5F4F1;font-family:inherit;font-size:.96rem;letter-spacing:-.012em;
  padding:15px 20px;outline:none;
  transition:border-color .25s var(--suave)}
.emp__campo input::placeholder,.emp__campo textarea::placeholder{color:#8C8B85}
.emp__campo select{
  /* a seta nativa some pra caber a nossa, senao ficam duas no campo */
  appearance:none;-webkit-appearance:none;color:#8C8B85;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238C8B85' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 18px center;background-size:16px;
  padding-right:46px}
.emp__campo select:valid{color:#F5F4F1}
.emp__campo textarea{resize:vertical;min-height:96px;line-height:1.5}
.emp__campo input:focus,.emp__campo select:focus,.emp__campo textarea:focus{border-color:#4A4A52}
.emp__enviar{align-self:center;margin-top:6px;min-width:220px}
.emp__termo{max-width:460px;margin:6px auto 0;text-align:center;
  font-size:.76rem;line-height:1.5;color:#8A8B90}

/* ---------- CONFIRMACAO ----------
   Substitui o formulario no lugar dele. Sem levar pra outra URL: a
   pessoa perderia o contexto do que acabou de ler, e o botao de voltar
   traria o formulario preenchido pela metade. */
.emp__pronto{max-width:520px;margin:0 auto;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:12px}
.emp__pronto[hidden]{display:none}
.emp__marca{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  background:var(--coral,#FF3B5C);color:#fff;margin-bottom:6px}
.emp__marca svg{width:26px;height:26px}
.emp__pronto-t{margin:0;font-size:clamp(1.5rem,2.6vw,2rem);font-weight:500;
  letter-spacing:-.035em;color:#0A0A0A}
.emp__pronto-c{margin:0;max-width:44ch;color:#55565A;line-height:1.6}
.emp__pronto-acoes{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:8px}
.novid__aviso.is-erro{color:#C2334C}

/* ============================================================
   OTIMIZACAO
   ============================================================ */

/* Secao fora da tela nao e desenhada. O navegador pula layout, estilo e
   pintura dela ate chegar perto, e so paga esse custo uma vez.

   contain-intrinsic-size e obrigatorio junto: sem ele a secao nao
   desenhada mede zero, a barra de rolagem encolhe e volta a cada trecho
   que entra, e a pagina fica pulando debaixo do dedo. O valor e uma
   estimativa da altura tipica; nao precisa acertar, precisa existir.

   O hero fica de fora: ele e a primeira coisa na tela e tem sticky
   dentro, que depende de a pista estar realmente medida. */
.sec:not(#hero):not(.novid),.marquee{
  content-visibility:auto;contain-intrinsic-size:auto 600px}
.marquee{contain-intrinsic-size:auto 160px}

/* A faixa rolante anda por transform o tempo todo. Sem promove-la a
   camada propria, cada quadro repinta a fileira inteira junto do que
   estiver atras dela. */
.marquee__row{will-change:transform;backface-visibility:hidden}

/* Imagem sem proporcao declarada faz o texto abaixo pular quando ela
   carrega. Reservar a caixa antes resolve, e e o que mais incomoda em
   conexao lenta. */
.leque__c img,.cover__img,.marquee__img,.aprov__img{aspect-ratio:auto}
.leque__c,.cover__c{contain:paint}


/* ============================================================
   SEXTA RODADA — 01/09
   ============================================================ */

/* ---------- BOTAO SEM RELEVO ----------
   O botao vinha com sombra colorida por fora e brilho por dentro, que
   somados davam aquele aspecto de pastilha 3D estufada. Vindos do tema
   escuro, onde o halo separava o botao do fundo; em fundo claro ele nao
   separa nada, so engorda a peca. Fica a cor cheia e um contorno de
   foco visivel, que e o unico realce que carrega informacao. */
.btn,.btn--primary,.btn--ghost,.btn--reservar,.nav__cta,.dock__cta{
  box-shadow:none!important;text-shadow:none!important}
.btn:hover,.btn--primary:hover,.btn--ghost:hover,.btn--reservar:hover{
  box-shadow:none!important;border-color:inherit}
/* o brilho interno que dava o estufado vem de um ::after; sem ele o
   botao volta a ser uma superficie chapada */
.btn::after,.btn--ghost::after,.btn:hover::after{display:none!important}
/* o levantar de 3px sai junto: com o ima nos botoes, ele ja se desloca
   na direcao do cursor, e os dois somados davam movimento demais */
.btn:hover{transform:translate(var(--mx),var(--my)) scale(var(--me))!important}
.btn--primary{background:#0A0A0A;color:#fff;border:1px solid #0A0A0A}
.btn--primary:hover{background:var(--coral,#FF3B5C);border-color:var(--coral,#FF3B5C);color:#fff}
.btn--ghost{background:transparent;color:#0A0A0A;border:1px solid #D4D3CF}
.btn--ghost:hover{background:transparent;border-color:#0A0A0A;color:#0A0A0A}
.plano--destaque .btn--primary,.agenda__cta .btn--primary{
  background:var(--coral,#FF3B5C);border-color:var(--coral,#FF3B5C);color:#fff}
.plano--destaque .btn--primary:hover,.agenda__cta .btn--primary:hover{
  background:#0A0A0A;border-color:#0A0A0A;color:#fff}
.btn:focus-visible{outline:2px solid var(--coral,#FF3B5C);outline-offset:3px}

/* ---------- FAQ SEM HALO ----------
   Mesma origem: o brilho coral no hover era o realce do tema escuro. */
.faq__i:hover,.faq__i.open,
.linha:hover,.pilar:hover,.cx:hover,.case:hover{
  box-shadow:none!important;transform:none!important}
/* o halo mora num ::before proprio, entao tirar a sombra nao basta */
.faq__i::before,.faq__i:hover::before,.faq__i.open::before{opacity:0!important}
.faq__i:hover,.faq__i.open{border-color:#D4D3CF!important}
.faq__i:hover .faq__sinal{transform:none!important;border-color:#D4D3CF!important}
.faq__i.open .faq__sinal{color:var(--coral,#FF3B5C);border-color:var(--coral,#FF3B5C)}

/* ---------- SOMBRA DO CHAT ----------
   Estava com 70px de raio e quase preto puro, mais pesada que qualquer
   outra coisa da pagina. Passa a ser a mesma do quadro do hero: raio
   curto e recuo grande, que produz sombra de contato em vez de mancha. */
#chat{box-shadow:0 18px 44px -28px rgba(10,10,10,.30)!important}
#fab{box-shadow:0 10px 26px -14px rgba(10,10,10,.35)!important}
/* O input do chat herdava color:#fff do tema ESCURO antigo; com o tema claro
   (fundo do input claro) o texto digitado ficava branco no branco, invisivel.
   Texto escuro pra enxergar, e placeholder num cinza legivel. */
#chatForm input{color:#141414!important;background:#fff!important;border-color:#E5E4E1!important}
#chatForm input::placeholder{color:#9a9a97!important}
/* Botoes de sugestao do chat com o MESMO contorno coral que corre, igual aos
   planos: um arco coral gira na borda de cada chip. CSS puro (via mascara de
   borda), entao pega tambem os chips criados a cada resposta do bot. */
@property --ca{syntax:'<angle>';inherits:false;initial-value:0deg}
.chat__chips .chip{position:relative;isolation:isolate}
.chat__chips .chip::before{
  content:'';position:absolute;inset:0;border-radius:inherit;padding:1.6px;pointer-events:none;
  background:conic-gradient(from var(--ca),
    rgba(255,59,92,0) 52%, #FF3B5C 70%, #FFB3C1 80%, rgba(255,59,92,0) 92%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  animation:chipArco 3.2s linear infinite}
@keyframes chipArco{to{--ca:360deg}}
@media(prefers-reduced-motion:reduce){
  .chat__chips .chip::before{animation-duration:16s}}

/* Border-beam na caixa do bot: o mesmo arco coral giratorio dos chips, agora
   na borda do painel inteiro do chat. Reusa @property --ca e @keyframes chipArco.
   Nao mexo no position do #chat (ele e fixed): o ::before absoluto ja se ancora
   nele. */
#chat{isolation:isolate}
#chat::before{
  content:'';position:absolute;inset:0;border-radius:inherit;padding:2px;pointer-events:none;z-index:2;
  background:conic-gradient(from var(--ca),
    rgba(255,59,92,0) 52%, #FF3B5C 70%, #FFB3C1 80%, rgba(255,59,92,0) 92%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  animation:chipArco 3.6s linear infinite}
@media(prefers-reduced-motion:reduce){ #chat::before{animation-duration:18s} }

/* Botao "Reservar sua vaga" em destaque: coral metalico com um brilho varrendo,
   aproximacao em CSS do liquid-metal. Fica atras do texto pra nao atrapalhar a
   leitura. So no botao primario (o ghost segue liso). */
.btn--reservar.btn--primary{position:relative;overflow:hidden;isolation:isolate}
.btn--reservar.btn--primary::after{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1;
  background:linear-gradient(115deg,transparent 34%,rgba(255,255,255,.5) 48%,transparent 62%);
  transform:translateX(-130%);
  animation:vagaBrilho 3.6s ease-in-out infinite}
.btn--reservar.btn--primary>*{position:relative;z-index:2}
@keyframes vagaBrilho{0%{transform:translateX(-130%)}55%,100%{transform:translateX(130%)}}
@media(prefers-reduced-motion:reduce){ .btn--reservar.btn--primary::after{animation:none;opacity:0} }

/* Cases: ao crescer/abrir o card, o texto (nome + descricao) aparece NA FRENTE
   do card, como o card de referencia que o Date mandou. Desliga a legenda ::after
   antiga (que so tinha o nome) e nao mexe no crescimento (isso e do mag). */
.sec--cases .mag__b::after{display:none!important}
.sec--cases .mag__b .mag__desc{
  position:absolute;inset:0;border-radius:inherit;z-index:4;pointer-events:none;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:6px;
  padding:18px 14px;text-align:center;
  background:linear-gradient(180deg,rgba(0,0,0,0) 38%,rgba(0,0,0,.8));
  opacity:0;transition:opacity .3s var(--suave)}
.sec--cases .mag__b:hover .mag__desc,
.sec--cases .mag__b.is-open .mag__desc{opacity:1}
.sec--cases .mag__desc b{font-size:1rem;font-weight:700;color:#fff;letter-spacing:-.01em}
.sec--cases .mag__desc i{font-style:normal;font-size:.78rem;line-height:1.35;color:rgba(255,255,255,.86)}
.sec--cases .mag__desc{overflow:hidden}
/* largura FIXA do texto: enquanto o card cresce/encolhe no hover (100->200px),
   o texto NAO reflui mais — era isso que fazia as palavras pularem de linha a
   cada movimento do mouse. Com largura fixa o bloco fica estavel e legivel. */
.sec--cases .mag__desc b,.sec--cases .mag__desc i{width:150px;max-width:150px;overflow-wrap:break-word;word-break:normal;hyphens:none}
/* card ABERTO (clique): grande e de tamanho fixo, entao aqui o texto pode ser
   largo, maior e confortavel de ler, sem tremer. */
.sec--cases .mag__b.is-open .mag__desc{padding:30px 24px;justify-content:center}
.sec--cases .mag__b.is-open .mag__desc b{font-size:1.6rem}
.sec--cases .mag__b.is-open .mag__desc i{width:360px;max-width:360px;font-size:1rem;line-height:1.55;margin-top:12px}
/* No admin, a descricao sobre a foto fica sempre visivel e clicavel pra dar
   pra editar (no site publico ela continua so no hover). */
.is-admin .sec--cases .mag__b .mag__desc{opacity:1;pointer-events:auto}
/* o quadro de animacoes do hero (.hero) e pointer-events:none pra o scroll
   passar por ele; por isso o titulo "Voce vai aprender:" nao recebia clique e
   nao dava pra editar. No admin, religa o clique so nesse quadro. */
.is-admin .hero__frame,.is-admin .hero__frame-titulo{pointer-events:auto}
/* botao de enviar do formulario de empresas: centralizado e em negrito */
.emp__enviar{margin-left:auto;margin-right:auto;display:flex;justify-content:center;font-weight:800!important}
/* niveis de tamanho de fonte aplicados pela barra de formatacao do admin.
   Relativo (em) pra acompanhar o tamanho base de cada texto. */
.fmt-lg{font-size:1.35em;font-weight:600}
.fmt-sm{font-size:.8em}
/* mesma ideia nos cards de editores convidados: nome e cargo ficam clicaveis
   no admin (no publico o bloco e so-leitura pra nao atrapalhar o arraste). */
.is-admin .cover__meta{pointer-events:auto;z-index:6}
/* area clicavel da foto do editor no admin: abre o painel de trocar midia.
   Fica sobre a foto mas abaixo do nome/cargo (z-index) pra clicar no texto
   editar o texto e clicar na foto trocar a midia. */
.cover__troca{position:absolute;inset:0;z-index:5;padding:0;margin:0;border:0;
  background:transparent;cursor:pointer;border-radius:inherit}
.is-admin .cover__info{z-index:7}
.is-admin .cover__c .cover__troca{outline:1.5px dashed rgba(200,255,0,.55);outline-offset:-4px}
.is-admin .cover__c:hover .cover__troca{outline:2px solid #C8FF00}

/* ============================================================
   POP-IN no hover — em vez de brilho, a midia da um leve "pop": cresce
   de leve quando o mouse entra. transform nao reflowa layout (so compoe),
   entao nada empurra o vizinho. Nos cards de editores (coverflow) e nos
   cards do dock (mag) o card ja tem transform/tamanho proprio, entao ali
   o pop vai no retrato de dentro pra nao brigar com o movimento existente.
   ============================================================ */
.midia16{overflow:hidden}
.alt__m,.vsl__moldura,.sobre__foto,.cases-reel,.hero__frame-box,.midia16{
  transition:transform .38s cubic-bezier(.22,.7,.28,1)}
.alt__m:hover,.vsl__moldura:hover,.sobre__foto:hover,
.cases-reel:hover,.hero__frame-box:hover,.midia16:hover{transform:scale(1.035)}
/* editores: o card gira no coverflow, entao o pop e no proprio retrato */
.cover__img{transition:transform .38s cubic-bezier(.22,.7,.28,1)}
.cover__c:hover .cover__img{transform:scale(1.06)}
@media (prefers-reduced-motion:reduce){
  .alt__m,.vsl__moldura,.sobre__foto,.cases-reel,.hero__frame-box,.midia16,.cover__img{transition:none}
  .alt__m:hover,.vsl__moldura:hover,.sobre__foto:hover,.cases-reel:hover,
  .hero__frame-box:hover,.midia16:hover,.cover__c:hover .cover__img{transform:none}
}

/* ---------- secao guardada so pro admin (ativo:false) ----------
   O visitante nunca ve (o JS nem renderiza pra ele). No admin aparece com
   contorno tracejado e um selo "oculto do site", pra preencher e ativar. */
.oculta-admin{position:relative;outline:2px dashed rgba(255,59,92,.55);outline-offset:6px;border-radius:14px}
.oculta-admin__tag{position:absolute;top:-11px;left:16px;z-index:30;display:inline-flex;align-items:center;gap:6px;
  padding:3px 11px;border-radius:999px;background:#0A0A0A;color:#fff;font-size:.64rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;pointer-events:none}
.oculta-admin__tag svg{display:block;flex:none}


/* ============================================================
   SETIMA RODADA — 02/09
   ============================================================ */

/* ---------- VINHETA DAS FOTOS DAS FAIXAS ----------
   A foto do Zhong tem uma vinheta escura assada no arquivo: o brilho vai
   de 42 na borda a 100 quarenta pixels adentro. Dentro de um circulo
   pequeno isso le como contorno preto.

   Nao da pra recortar limpo, porque e degrade e nao borda. Entao a
   imagem entra com um empurrao de escala: a faixa escura fica fora da
   area visivel do circulo. Resolve o Zhong e qualquer foto futura que
   venha com o mesmo vicio, sem editar arquivo. */
.marquee__foto,.aprov__foto{overflow:hidden}
.marquee__img,.aprov__img{transform:scale(1.14);transform-origin:center}

/* ---------- LISTA DOS PLANOS NO ADMIN ----------
   O botao de remover fica dentro do <li> e nao pode empurrar o texto. */
.plano li{position:relative}
.plano .adm-x{position:absolute;right:-4px;top:50%;transform:translateY(-50%)}


/* ---------- DOCK DE IDIOMAS ----------
   Mesma materia do dock do meio, um degrau menor. Fica separado dele de
   proposito: idioma nao e navegacao, e dentro do outro dock ele viraria
   "mais um item do menu" competindo com as secoes.

   Um degrau menor tambem hierarquiza: o menu do meio manda, este e
   servico. Do mesmo tamanho, os dois disputariam o topo. */
.dock--idiomas{
  left:auto;right:28px;transform:none;
  gap:4px;padding:6px;border-radius:16px}
.dock--idiomas .dock__i{width:calc(32px * var(--s));height:calc(32px * var(--s))}
.dock--idiomas .dock__tile{border-radius:10px;overflow:hidden}
/* a bandeira preenche o ladrilho: com padding em volta ela viraria
   figurinha dentro de caixa, em vez de ladrilho da bandeira */
.dock--idiomas .dock__tile img{width:100%;height:100%;object-fit:cover;display:block}
.dock--idiomas .dock__i.is-active .dock__tile{
  box-shadow:0 0 0 2px var(--coral,#FF3B5C),0 4px 12px rgba(10,10,10,.10)}
.dock--idiomas .dock__i.is-active::after{display:none}
.dock--idiomas .dock__i:not(.is-active) .dock__tile img{
  filter:saturate(.55);opacity:.75;transition:filter .25s var(--suave),opacity .25s var(--suave)}
.dock--idiomas .dock__i:hover .dock__tile img{filter:none;opacity:1}
.dock--idiomas .dock__lb{top:calc(100% + 9px);font-size:.7rem;padding:4px 9px}

@media(max-width:1100px){
  .dock--idiomas{right:16px}
  .dock--idiomas .dock__i{width:calc(28px * var(--s));height:calc(28px * var(--s))}
}
@media(max-width:860px){
  /* no celular ele acompanha o dock principal pra base, mas encostado
     na direita, senao os dois brigariam pelo centro */
  .dock--idiomas{top:auto;bottom:14px;right:12px;padding:5px;gap:3px}
  .dock--idiomas .dock__i{width:calc(26px * var(--s));height:calc(26px * var(--s))}
  .dock--idiomas .dock__lb{display:none}
}


/* ---------- FAIXA SO DE LOGO ----------
   Assinatura do trecho, nao informacao. Por isso ela e apagada, menor e
   mais lenta que a faixa de clientes: com o mesmo peso o olho pararia
   pra conferir o que e, que e o oposto do que ela faz.

   Sem fundo e sem fio: ela flutua no papel como marca d'agua. */
.logofx{background:transparent!important;border:0!important;
  padding:clamp(26px,3.4vw,44px) 0;overflow:hidden}
.logofx__row{gap:clamp(44px,6vw,96px)!important;align-items:center;
  animation-duration:300s!important;
  /* mais lenta que as outras duas de proposito: 300s contra 210s */
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.logofx__i{flex:none;display:block;line-height:0}
.logofx__i img{height:clamp(20px,2vw,28px);width:auto;display:block;
  /* o arquivo e claro, feito pra fundo escuro: vira preto e perde forca */
  filter:brightness(0) saturate(100%);opacity:.14}
@media(max-width:860px){
  .logofx{padding:22px 0}
  .logofx__i img{height:17px}
  .logofx__row{gap:34px!important}
}
@media(prefers-reduced-motion:reduce){
  /* NAO esconder. Isso ja apagou a faixa inteira pra quem tem "reduzir
     movimento" ligado no Windows, e como o slot vazio so aparece no
     admin, sumia tambem o lugar de subir as logos: no admin a faixa
     ficava invisivel e nao dava pra descobrir por que.
     Parada ela vira uma fileira estatica, que e um resultado ruim mas
     honesto, e infinitamente melhor que nada. */
  .logofx__row{animation:none!important;transform:none!important;
    justify-content:center}
}


/* ============================================================
   02/09 — leque sem corte, faixa de logos de empresas, aviso da VSL
   ============================================================ */

/* ---------- LEQUE: PARAR DE CORTAR AS FOTOS ----------
   Duas coisas cortavam. A primeira: as cartas subiam quase 60px e o topo
   era decepado pela borda da secao. A segunda, e a que mais incomodava:
   as cartas das pontas batiam numa ARESTA RETA do overflow, terminando
   num corte seco no meio do nada.

   O corte no topo cai pra um terco. E as pontas passam a se APAGAR em
   vez de bater na aresta: a mascara horizontal dissolve a fileira nas
   laterais, entao ela parece continuar pra fora da tela, que era a
   intencao desde o comeco. */
.novid .leque__c{
  transform:translateX(-50%)
    translateX(calc(var(--i) * clamp(84px,8.6vw,140px)))
    translateY(calc((max(var(--i), var(--i) * -1) - 1) * clamp(10px,1.2vw,18px) - clamp(12px,1.4vw,20px)))
    rotateY(calc(var(--i) * -6deg))
    scale(calc(1 - (max(var(--i), var(--i) * -1) - 1) * 0.05))}
.novid .leque{
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}

/* ---------- FAIXA DE LOGOS DE EMPRESAS ----------
   Prova social passando, sem nome e sem link: quem reconhece a marca
   reconhece sozinho, e quem nao reconhece nao ia clicar mesmo.

   Cinza e apagada de proposito. Logo de terceiro em cor cheia rouba a
   atencao da nossa, e sao oito delas contra um D. */
.logofx{background:transparent!important;border:0!important;
  padding:clamp(30px,3.6vw,52px) 0;overflow:hidden}
.logofx__row{gap:clamp(48px,6vw,104px)!important;align-items:center;
  animation-duration:var(--vel,300s)!important;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.logofx__i{flex:none;display:grid;place-items:center;
  /* container um pouco mais alto que a img (linha abaixo) pra a logo centralizar
     com folga e nunca encostar/cortar em cima ou embaixo. */
  height:clamp(34px,3.2vw,46px)}
.logofx__i img{height:clamp(24px,2.6vw,32px)!important;width:auto!important;max-width:none!important;max-height:none!important;object-fit:contain;display:block;
  /* MESMA altura pra todas (a linha de guia): preto pra normalizar a cor e
     aparecer no fundo claro; a largura varia com o formato de cada logo.
     Os arquivos foram aparados (sem margem sobrando) pra alinhar de verdade. */
  filter:brightness(0);opacity:.5;
  transition:opacity .3s var(--suave),filter .3s var(--suave)}
.logofx__i img:hover{opacity:.82}
/* slot vazio so aparece no admin */
.logofx__vazio{display:grid;place-items:center;height:100%;padding:0 16px;
  border:1px dashed #C8C7C3;border-radius:8px;
  font-size:.62rem;color:#9A9995;white-space:nowrap}
@media(max-width:860px){
  .logofx{padding:24px 0}
  /* container maior que a img (min 24px, imposto com !important acima) pra a
     logo nunca cortar em cima/embaixo no mobile. */
  .logofx__i{height:30px}
  .logofx__i img{height:22px!important}
  .logofx__row{gap:38px!important}
}

/* ---------- VSL SEM VIDEO ----------
   O rotulo passou de "em breve" pra a data real, entao ele precisa de
   mais espaco e de menos cara de etiqueta. */
.vsl.sem-video .vsl__dur{
  font-size:.72rem;letter-spacing:.04em;text-transform:none;
  padding:8px 16px;border-radius:999px;white-space:nowrap;
  background:rgba(10,10,10,.72);color:#fff;backdrop-filter:blur(8px)}


/* ============================================================
   02/09 (tarde) — hero da pagina B2B sem sticky, faixa de logos B2B
   ============================================================ */

/* O .hero comum e position:sticky (tema.css) porque na home ele mora numa
   pista de scroll. A pagina de empresas usa heroSimples, que NAO tem pista:
   com sticky ele grudava no topo e a faixa de clientes subia por baixo,
   sobrepondo o botao e o texto. Aqui ele volta a ser bloco normal, com
   altura pelo conteudo, empurrando a faixa pra baixo igual na home. */
.hero--simples{
  position:relative!important;
  height:auto!important;
  min-height:min(78vh,720px);
  display:grid;align-items:center;
  overflow:hidden}
.hero--simples .hero__scene{position:absolute!important;inset:0}
/* copy sai do fixed/absolute e volta pro fluxo: e ela quem define a altura,
   entao a faixa nunca mais encosta nela, independente da altura da tela. */
.hero--simples .hero__copy{
  position:relative!important;
  top:auto!important;bottom:auto!important;left:auto!important;right:auto!important;
  transform:none!important;
  z-index:5;
  padding:clamp(88px,12vh,140px) clamp(18px,5vw,72px) clamp(40px,7vh,80px)}
@media(max-width:860px){
  .hero--simples{min-height:auto}
  .hero--simples .hero__copy{padding:104px 20px 48px}
}


/* ============================================================
   02/09 (noite) — assinatura "Date", stats com contador+tag,
   rodapé legal, botão de trocar capa no admin
   ============================================================ */

/* ---------- ASSINATURA ----------
   Agora e a palavra "Date" numa fonte manuscrita, nao o rabisco em SVG que
   nao escrevia nada. E sobe: o vao embaixo era grande demais. */
.assinatura{padding:clamp(18px,3vw,38px) 20px clamp(30px,4vw,54px)!important}
.assinatura__word{
  font-family:'Great Vibes',cursive;
  font-size:clamp(3rem,7.5vw,5rem);line-height:1.2;color:#141414;
  display:inline-block;padding:0 .08em;
  /* escreve da esquerda pra direita: o clip abre revelando a palavra como se
     uma caneta estivesse traçando "Date". O -.18em embaixo poupa as caudas
     da fonte manuscrita de serem cortadas. */
  clip-path:inset(0 100% -0.18em 0);
  -webkit-clip-path:inset(0 100% -0.18em 0);
  transition:clip-path 1.5s cubic-bezier(.6,.02,.2,1),-webkit-clip-path 1.5s cubic-bezier(.6,.02,.2,1)}
.assinatura.is-in .assinatura__word{
  clip-path:inset(0 0 -0.18em 0);-webkit-clip-path:inset(0 0 -0.18em 0)}
@media(prefers-reduced-motion:reduce){
  .assinatura__word{clip-path:none!important;-webkit-clip-path:none!important;transition:none}}

/* ---------- STATS: contador + tag ---------- */
.stat__num{font-variant-numeric:tabular-nums}
.stat--tag{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.stat--tag .stat__pill{
  display:inline-block;font-size:clamp(1.1rem,2.2vw,1.5rem);font-weight:700;
  line-height:1;letter-spacing:-.01em;color:#fff;
  background:var(--coral,#FF3B5C);padding:8px 16px;border-radius:100px}

/* ---------- RODAPÉ LEGAL ----------
   Faixa escura fechando a pagina: separa do corpo claro e da o peso de
   "fim do site". Contato + navegacao + itens legais. */
.footL{background:#0E0E10;color:#B7B6B1;margin-top:clamp(20px,4vw,40px);
  padding:clamp(48px,6vw,80px) clamp(20px,5vw,72px) clamp(28px,3vw,40px)}
.footL__grid{display:grid;gap:clamp(30px,4vw,56px);
  grid-template-columns:1.6fr 1fr 1fr 1fr;max-width:1180px;margin:0 auto}
@media(max-width:860px){.footL__grid{grid-template-columns:1fr 1fr}}
@media(max-width:540px){.footL__grid{grid-template-columns:1fr}}
.footL__logo{height:30px;width:auto;filter:brightness(0) invert(1);opacity:.92;margin-bottom:16px}
.footL__desc{margin:0 0 18px;font-size:.9rem;line-height:1.6;color:#8E8D88;max-width:34ch}
.footL__social{display:flex;gap:18px;flex-wrap:wrap}
.footL__social a,.footL__social span{color:#C9C8C4;font-size:.85rem;text-decoration:none;
  border-bottom:1px solid transparent;transition:border-color .2s,color .2s}
.footL__social a:hover{color:#fff;border-color:var(--coral,#FF3B5C)}
.footL__t{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:#6E6D69;
  margin:0 0 16px;font-weight:600}
.footL__links{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.footL__links a,.footL__botao{color:#B7B6B1;font-size:.9rem;text-decoration:none;
  background:none;border:0;padding:0;cursor:pointer;font-family:inherit;text-align:left;
  transition:color .2s}
.footL__links a:hover,.footL__botao:hover{color:#fff}
.footL__contato{display:block;color:#B7B6B1;font-size:.9rem;text-decoration:none;margin-bottom:10px}
a.footL__contato:hover{color:#fff}
.footL__vazio{color:#C8FF00!important;border:1px dashed #5a5f2a;border-radius:6px;
  padding:3px 8px;font-size:.82rem;display:inline-block}
.footL__base{max-width:1180px;margin:clamp(32px,4vw,52px) auto 0;
  padding-top:22px;border-top:1px solid #232326;
  display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;
  font-size:.78rem;color:#6E6D69}

/* ---------- BOTÃO TROCAR CAPA (admin) ----------
   Fica por cima do veu e do texto do hero, que e o que impedia clicar na
   capa pra troca-la. So aparece no modo admin. */
/* z-index alto e longe do canto superior esquerdo (onde mora a logo fixa, que
   antes cobria o botao) — agora fica embaixo, no centro do hero, sempre clicavel. */
.adm-capa{position:absolute;left:28px;top:84px;z-index:9000;
  background:#0A0A0A;color:#C8FF00;border:1.5px solid #C8FF00;border-radius:8px;
  padding:8px 14px;font-size:.8rem;font-weight:700;cursor:pointer;font-family:inherit;pointer-events:auto;
  box-shadow:0 6px 20px -8px rgba(0,0,0,.5)}
.adm-capa:hover{background:#C8FF00;color:#0A0A0A}
/* no admin o veu do hero nao pode "comer" o clique: senao nao da pra trocar a
   imagem de fundo (nem clicar no botao de trocar capa). */
.is-admin .hero__veil{pointer-events:none}

/* rodapé: lista de contatos por assunto (rótulo + e-mail) */
.footL__col .footL__contato{margin-bottom:13px;line-height:1.35}
.footL__rot{display:block;font-size:.72rem;color:#6E6D69;letter-spacing:.02em;margin-bottom:1px}
.footL__col a.footL__contato span:last-child{font-size:.88rem}

/* ---------- ASSINATURA (PNG + fade-in) ----------
   Imagem PNG transparente do "Date". Base opacity:1 = SEMPRE visivel (o SVG
   desenhado nao aparecia no navegador do Date; a imagem renderiza sem falha).
   Quando o bloco entra na tela, a classe .is-in TOCA um fade-in. Se o JS nunca
   rodar, a assinatura fica visivel do mesmo jeito. Nunca some. */
.assinatura__png{width:clamp(230px,32vw,400px);height:auto;display:block;margin:0 auto;opacity:1}

/* Video em container arredondado (.alt__m tem border-radius + overflow:hidden):
   no Chrome o video decodifica mas nao repinta, congelando no 1o frame. Promove
   o video pra propria camada (translateZ) e arredonda nele mesmo pra repintar
   cada frame sem perder os cantos. */
.alt__m{isolation:isolate}
.alt__m video{will-change:transform;transform:translate3d(0,0,0);border-radius:14px;backface-visibility:hidden}