/* =========================================================
   Trinity Brasil — Landing Page
   Fonte da verdade de tokens: Design System Trinity Brasil v5.0
   ========================================================= */

/* ---------- Fontes (self-hosted, apenas os pesos usados) ---------- */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/plus-jakarta-sans-variable-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/dm-mono-400-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/dm-mono-500-latin.woff2') format('woff2');
}

/* ---------- Tokens ---------- */
:root{
  --azul:#007AFF; --azul-fundo:#0062CC; --verde:#26A73F; --verde-fundo:#098637;
  --ambar:#FBB81A; --laranja:#F28A1E;
  --tinta:#1D1D1B; --grafite:#45484D; --prata:#85888D; --linha:#EAECEF; --nuvem:#F9FAFB;

  --grad-azul:linear-gradient(135deg,#007AFF,#0062CC);
  --grad-verde:linear-gradient(135deg,#26A73F,#098637);
  --grad-ambar:linear-gradient(135deg,#FBB81A,#F28A1E);
  --grad-marca:linear-gradient(135deg,#007AFF 0%,#26A73F 55%,#FBB81A 100%);

  --f:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --fm:'DM Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;

  --s1:8px; --s2:16px; --s3:24px; --s4:40px; --s5:64px; --s6:96px; --s7:160px;
  --r-chip:999px; --r-card:24px; --r-input:14px; --r-band:28px;

  --e2:0 6px 16px rgba(29,29,27,.09);
  --e3:0 14px 34px rgba(29,29,27,.11);
  --e4:0 28px 60px rgba(29,29,27,.16);

  --ease:180ms ease;
  --container: 1200px;

  --header-h: 108px;
  --header-h-scrolled: 80px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
}
body{
  font-family:var(--f);
  color:var(--tinta);
  background:#fff;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:var(--azul);text-decoration:none}
:focus-visible{outline:3px solid var(--azul);outline-offset:2px;border-radius:4px}

.skip-link{
  position:absolute;left:var(--s2);top:-60px;z-index:1000;
  background:var(--tinta);color:#fff;padding:.8rem 1.2rem;border-radius:var(--r-input);
  font-weight:600;font-size:.9rem;transition:top .18s ease;
}
.skip-link:focus{top:var(--s2)}

/* ---------- Botões (do Design System) ---------- */
.btn{
  font-family:var(--f);font-weight:600;font-size:.93rem;
  padding:.8rem 1.7rem;border-radius:var(--r-chip);border:1.5px solid transparent;
  cursor:pointer;display:inline-flex;align-items:center;gap:.55rem;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--azul-fundo);color:#fff}
.btn-primary:hover{filter:brightness(.88);box-shadow:0 8px 20px rgba(0,122,255,.32)}
.btn-cta{background:var(--grad-ambar);color:var(--tinta);font-weight:700}
.btn-cta:hover{box-shadow:0 10px 26px rgba(242,138,30,.4)}
.btn.lg{padding:1.05rem 2.2rem;font-size:1.05rem}

/* Texto com efeito de troca (slide) no hover */
.btn-text{position:relative;overflow:hidden;display:inline-block;height:1.25em;line-height:1.25em}
.btn-text-inner{display:block;transition:transform .38s cubic-bezier(.65,0,.35,1)}
.btn-text-inner + .btn-text-inner{position:absolute;top:100%;left:0}
.btn:hover .btn-text-inner{transform:translateY(-100%)}

/* Ícone de seta com troca (slide diagonal) no hover */
.btn-icon-wrap{position:relative;width:1em;height:1em;overflow:hidden;flex:none}
.btn-icon{position:absolute;top:0;left:0;width:100%;height:100%;transition:transform .38s cubic-bezier(.65,0,.35,1)}
.btn-icon + .btn-icon{transform:translate(-140%,140%)}
.btn:hover .btn-icon:first-child{transform:translate(140%,-140%)}
.btn:hover .btn-icon + .btn-icon{transform:translate(0,0)}

/* =========================================================
   CURSOR CUSTOMIZADO (desktop com mouse, sem reduced-motion)
   Bolinha âmbar que segue o mouse com leve atraso e cresce
   sobre links/botões. O cursor tradicional continua visível.
   ========================================================= */
.cursor-ring{
  position:fixed;top:0;left:0;
  pointer-events:none;z-index:9999;
  border-radius:50%;
  width:10px;height:10px;margin:-5px 0 0 -5px;
  background:var(--grad-ambar);
  transform:translate3d(-100px,-100px,0);
  opacity:0;
  transition:opacity .2s ease, width .22s ease, height .22s ease, margin .22s ease;
  will-change:transform;
}
body.has-custom-cursor .cursor-ring{opacity:.9}
.cursor-ring.is-hover{
  width:36px;height:36px;margin:-18px 0 0 -18px;
  opacity:.75;
}

@media (hover:none), (pointer:coarse){
  .cursor-ring{display:none !important}
}
@media (prefers-reduced-motion: reduce){
  .cursor-ring{display:none !important}
}

/* =========================================================
   HEADER
   ========================================================= */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  height:var(--header-h);
  display:flex;align-items:center;
  background:rgba(255,255,255,0);
  transition:background .25s ease, box-shadow .25s ease, backdrop-filter .25s ease, height .25s ease;
  opacity:0;animation:header-fade .9s ease forwards;
}
@keyframes header-fade{from{opacity:0} to{opacity:1}}
.site-header.is-scrolled{
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(14px) saturate(160%);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  box-shadow:var(--e2);
  height:var(--header-h-scrolled);
}
.header-inner{
  width:100%;max-width:var(--container);margin:0 auto;padding:0 var(--s3);
  display:grid;grid-template-columns:1fr auto;align-items:center;gap:var(--s3);
}
/* Cabeçalho com menu de navegação (site institucional) precisa de uma
   terceira coluna central para o nav — isolado em modificador para não
   afetar o cabeçalho (sem menu) das outras LPs, que compartilham esta
   mesma folha de estilos. */
.header-inner--nav{grid-template-columns:auto 1fr auto}
/* Cabeçalho das LPs de serviço: no desktop fica só logo + CTA, como
   sempre (o nav-menu, presente no HTML, fica oculto); no mobile ganha
   o mesmo hambúrguer do site institucional, para permitir navegar
   pelo resto do site a partir da LP. */
.header-inner--lp-nav .nav-menu{display:none}
.brand{display:inline-flex;align-items:center;justify-self:start}
.brand-logo{height:70px;width:auto;transition:height .25s ease}
.site-header.is-scrolled .brand-logo{height:55px}
.header-cta{justify-self:end}
@media (max-width:520px){
  :root{--header-h:86px;--header-h-scrolled:64px}
  .brand-logo{height:52px}
  .site-header.is-scrolled .brand-logo{height:42px}
  .header-cta{padding:.65rem 1.1rem;font-size:.85rem}
}
/* No site institucional (com hambúrguer), logo + botão + hambúrguer
   disputam espaço no mobile. Aumentamos a logo e encurtamos o texto
   do botão para "Orçamento" só aqui — as LPs de cada serviço (sem
   hambúrguer, menos apertadas) mantêm o texto e tamanho de sempre. */
@media (max-width:520px){
  .header-inner--nav .brand-logo{height:60px}
  .site-header.is-scrolled .header-inner--nav .brand-logo{height:48px}
  .header-inner--nav .btn-text-optional{display:none}
}

/* Menu de navegação (site institucional) */
.nav-menu{
  justify-self:center;
  display:flex;align-items:center;gap:var(--s4);
}
.nav-link{
  position:relative;
  font-family:var(--f);font-weight:500;font-size:.95rem;
  color:var(--tinta);
  padding:.3rem 0;
  transition:color .2s ease;
}
.nav-link::after{
  content:"";
  position:absolute;left:0;bottom:0;
  width:100%;height:2px;
  background:var(--azul);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .3s ease;
}
.nav-link:hover,
.nav-link:focus-visible{color:var(--azul)}
.nav-link:hover::after,
.nav-link:focus-visible::after{transform:scaleX(1)}

/* Botão hambúrguer: só existe no cabeçalho com menu (site
   institucional) — fica oculto no desktop e nas LPs de cada
   serviço, que não têm esse botão no HTML. */
.nav-toggle{
  display:none;
  flex:none;
  width:40px;height:40px;
  align-items:center;justify-content:center;
  flex-direction:column;gap:5px;
  background:none;border:none;padding:0;cursor:pointer;
}
.nav-toggle-bar{
  display:block;width:22px;height:2px;border-radius:2px;
  background:var(--tinta);
  transition:transform .25s ease, opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media (max-width:900px){
  .nav-toggle{display:flex}
  .header-inner--lp-nav{grid-template-columns:1fr auto auto}
  .header-inner--lp-nav .nav-menu{display:flex}
  .nav-menu{
    position:fixed;
    top:var(--header-h-scrolled);left:0;right:0;width:auto;z-index:99;
    /* .nav-menu é item de grid no desktop (justify-self:center); sem
       sobrescrever aqui, esse valor "vence" o left/right:0 e o bloco
       encolhe e centraliza em vez de ocupar a largura toda. */
    justify-self:stretch;
    flex-direction:column;align-items:stretch;gap:0;
    background:#fff;
    padding:var(--s2) var(--s3) var(--s4);
    box-shadow:var(--e3);
    max-height:calc(100vh - var(--header-h-scrolled));
    overflow-y:auto;
    transform:translateY(-10px);
    opacity:0;visibility:hidden;pointer-events:none;
    transition:transform .22s ease, opacity .22s ease, visibility .22s;
  }
  .nav-menu.is-open{
    transform:translateY(0);
    opacity:1;visibility:visible;pointer-events:auto;
  }
  .nav-link{
    padding:.95rem 0;
    border-bottom:1px solid var(--linha);
    font-size:1.05rem;
  }
  .nav-link::after{display:none}
  .nav-link:last-child{border-bottom:none}
}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;align-items:center;
  padding:calc(var(--header-h) + var(--s5)) var(--s3) var(--s6);
  overflow:hidden;
  background:
    radial-gradient(1200px 600px at 82% -10%, rgba(0,122,255,.10), transparent 60%),
    radial-gradient(900px 500px at 100% 100%, rgba(38,167,63,.09), transparent 55%),
    linear-gradient(180deg, #ffffff 0%, var(--nuvem) 100%);
}

.hero-decor{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero-decor svg{position:absolute;will-change:transform}
.hero-shape-1{top:8%;right:-4%;width:min(46vw,620px);opacity:.9;animation:float-a 9s ease-in-out infinite}
.hero-shape-2{bottom:2%;right:14%;width:min(20vw,260px);opacity:.85;animation:float-b 7s ease-in-out infinite}

@keyframes float-a{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-18px) rotate(1.5deg)}}
@keyframes float-b{0%,100%{transform:translateY(0)}50%{transform:translateY(14px)}}

.hero-inner{
  position:relative;z-index:1;
  width:100%;max-width:var(--container);margin:0 auto;
  max-width:760px;
}

.hero-kicker{
  font-family:var(--fm);
  font-weight:500;
  font-size:11px;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--laranja);
  display:inline-flex;align-items:center;gap:.6rem;
  margin-bottom:var(--s4);
  padding:.55rem 1.15rem .55rem .8rem;
  border:1.5px solid rgba(242,138,30,.28);
  border-radius:var(--r-chip);
  background:rgba(242,138,30,.08);
  backdrop-filter:blur(5.8px);
  -webkit-backdrop-filter:blur(5.8px);
  opacity:0;animation:reveal .7s ease forwards;
}
.hero-kicker-icon{width:16px;height:16px;flex:none}

.hero-headline{
  font-weight:800;
  font-size:clamp(2.4rem, 5.4vw, 4.4rem);
  letter-spacing:-.03em;
  line-height:1.06;
  color:var(--tinta);
  margin-bottom:var(--s3);
  animation:reveal-lcp .8s ease .1s backwards;
}
.grad-text{
  background:var(--grad-marca);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
}

.hero-lead{
  font-size:clamp(1rem,1.2vw,1.0625rem);
  color:var(--grafite);
  max-width:52ch;
  margin-bottom:var(--s4);
  opacity:0;animation:reveal .8s ease .2s forwards;
}

.hero-actions{
  margin-bottom:var(--s4);
  opacity:0;animation:reveal .8s ease .32s forwards;
}

.hero-trust{
  display:flex;align-items:center;flex-wrap:wrap;gap:var(--s3);
  opacity:0;animation:reveal .8s ease .44s forwards;
}
.hero-trust-item{display:flex;align-items:center;gap:.55rem;font-size:.92rem;color:var(--grafite)}
.hero-trust-item .google-g{width:18px;height:18px;flex:none}
.hero-trust-item .stars{color:var(--ambar);font-size:1rem;letter-spacing:1px}
.hero-trust-divider{width:1px;height:34px;background:var(--linha)}

.hero-trust-counter{gap:.7rem}
.counter-value{
  font-family:var(--fm);font-weight:500;
  font-size:2.15rem;letter-spacing:-.02em;line-height:1;
  color:var(--tinta);
}
.counter-caption{
  display:flex;flex-direction:column;line-height:1.25;
  font-size:.82rem;color:var(--grafite);
}
.counter-odometer{display:inline-flex}
.counter-digit{
  display:inline-block;overflow:hidden;
  height:1em;line-height:1;vertical-align:top;
}
.counter-digit-strip{display:flex;flex-direction:column;will-change:transform}
.counter-digit-strip span{display:block;height:1em;line-height:1}

@keyframes reveal{
  from{opacity:0;transform:translateY(16px);filter:blur(10px)}
  to{opacity:1;transform:translateY(0);filter:blur(0)}
}

/* Igual a "reveal", mas sem opacity:0 — usada no elemento de LCP
   (hero-headline) para o navegador poder pintá-lo imediatamente em
   vez de esperar a animação terminar para considerá-lo "renderizado". */
@keyframes reveal-lcp{
  from{transform:translateY(16px);filter:blur(10px)}
  to{transform:translateY(0);filter:blur(0)}
}

/* =========================================================
   BLUR PROGRESSIVO FIXO NO RODAPÉ DA TELA
   Fica grudado na parte de baixo do viewport durante toda a
   navegação (não pertence a uma seção específica).

   Antes eram 6 camadas de backdrop-filter empilhadas (uma por
   faixa de intensidade) para simular uma rampa contínua de
   blur — cada camada custosa re-amostra tudo que está atrás
   dela a cada frame, e 6 delas juntas, fixas na tela inteira,
   travavam visivelmente o scroll. Uma única camada de blur com
   máscara em gradiente entrega quase o mesmo efeito visual
   (zero blur em cima, máximo embaixo) por uma fração do custo.
   ========================================================= */
.page-fade-blur{
  position:fixed;left:0;right:0;bottom:0;height:90px;
  z-index:90;pointer-events:none;
  opacity:1;transition:opacity .5s ease;
  backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
  mask-image:linear-gradient(to bottom, transparent 0%, black 55%, black 100%);
  -webkit-mask-image:linear-gradient(to bottom, transparent 0%, black 55%, black 100%);
}
.page-fade-blur.is-hidden{opacity:0}
@media (max-width:720px){
  .page-fade-blur{height:60px}
}

/* =========================================================
   BOTÃO FLUTUANTE DO WHATSAPP
   Some/aparece suavemente a partir da seção de parceiros.
   ========================================================= */
.whatsapp-float{
  position:fixed;right:var(--s3);bottom:var(--s3);z-index:95;
  width:60px;height:60px;border-radius:50%;
  background:#25D366;color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 24px rgba(37,211,102,.4);
  opacity:0;transform:translateY(16px) scale(.85);
  pointer-events:none;
  transition:opacity .45s ease, transform .45s ease;
}
.whatsapp-float.is-visible{
  opacity:1;transform:translateY(0) scale(1);
  pointer-events:auto;
}
.whatsapp-float svg{width:30px;height:30px;position:relative;z-index:1}
.whatsapp-float-tooltip{
  position:absolute;right:calc(100% + 14px);top:50%;
  transform:translateY(-50%) translateX(4px);
  background:var(--tinta);color:#fff;
  font-size:.85rem;font-weight:600;white-space:nowrap;
  padding:.55rem 1rem;border-radius:var(--r-input);
  opacity:0;pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
  box-shadow:var(--e2);
}
.whatsapp-float-tooltip::after{
  content:"";position:absolute;left:100%;top:50%;
  transform:translateY(-50%);
  border:5px solid transparent;border-left-color:var(--tinta);
}
@media (hover:hover) and (pointer:fine){
  .whatsapp-float:hover .whatsapp-float-tooltip{
    opacity:1;transform:translateY(-50%) translateX(0);
  }
}
.whatsapp-float::before{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:#25D366;
  animation:whatsapp-pulse 2.2s ease-out infinite;
}
@keyframes whatsapp-pulse{
  0%{transform:scale(1);opacity:.55}
  100%{transform:scale(1.7);opacity:0}
}
@media (prefers-reduced-motion: reduce){
  .whatsapp-float::before{animation:none}
}
@media (max-width:520px){
  .whatsapp-float{width:52px;height:52px;right:var(--s2);bottom:var(--s2)}
  .whatsapp-float svg{width:26px;height:26px}
}

@media (max-width:720px){
  .hero{padding-top:calc(var(--header-h) + var(--s4));padding-bottom:var(--s5)}
  .hero-shape-1{width:70vw;top:2%;right:-18%;opacity:.55}
  .hero-shape-2{display:none}
  .hero-trust{flex-direction:column;align-items:flex-start;gap:var(--s2)}
  .hero-trust-divider{display:none}
}

/* =========================================================
   PORTFÓLIO — carrossel contínuo com "relevo" 3D
   ========================================================= */
.portfolio{
  position:relative;z-index:1;
  padding:0 0 56px;
  background:var(--nuvem);
  overflow:hidden;
  /* Ao chegar via link do menu (#portfolio), deixa espaço para o
     cabeçalho fixo não ficar sobreposto à seção. */
  scroll-margin-top:calc(var(--header-h-scrolled) + 24px);
}

.portfolio-track-wrap{
  width:100%;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.portfolio-track{
  display:flex;align-items:flex-start;gap:var(--s4);
  width:max-content;
  padding:var(--s3) var(--s3) var(--s5);
  animation:portfolio-scroll 50s linear infinite;
}
.portfolio-track-wrap:hover .portfolio-track{animation-play-state:paused}

@keyframes portfolio-scroll{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

.portfolio-card{
  position:relative;flex:none;width:320px;
  margin-top:0;
  border-radius:var(--r-card);overflow:hidden;
  background:#fff;
  box-shadow:var(--e3);
  transform:perspective(1200px) rotateY(-13deg) translateZ(0);
  transition:transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease, margin .45s ease;
}
.portfolio-card:nth-child(even){
  transform:perspective(1200px) rotateY(13deg) translateZ(0);
  margin-top:var(--s3);
}
.portfolio-card:hover{
  transform:perspective(1200px) rotateY(0deg) translateY(-14px) scale(1.06);
  box-shadow:var(--e4);
  z-index:2;
}
.portfolio-card img{
  width:100%;height:auto;aspect-ratio:720/652;object-fit:cover;display:block;
}
.portfolio-card figcaption{
  position:absolute;left:0;right:0;bottom:0;
  padding:var(--s3);
  background:linear-gradient(0deg, rgba(15,16,18,.78), transparent 70%);
  color:#fff;
  display:flex;flex-direction:column;gap:.15rem;
  opacity:0;transform:translateY(8px);
  transition:opacity .3s ease, transform .3s ease;
}
.portfolio-card:hover figcaption{opacity:1;transform:translateY(0)}
.portfolio-card-name{font-weight:700;font-size:1rem}
.portfolio-card-tag{font-family:var(--fm);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.75)}

@media (prefers-reduced-motion: reduce){
  .portfolio-track{animation:none}
  .portfolio-track-wrap{overflow-x:auto}
}

@media (max-width:720px){
  .portfolio{padding:var(--s6) 0 var(--s3)}
  .portfolio-card{width:250px}
  .portfolio-track{animation-duration:34s}
}

/* =========================================================
   PARCEIROS — logos de clientes em P&B, trocando em looping
   ========================================================= */
.partners{
  position:relative;z-index:1;
  background:var(--nuvem);
  padding:0 0 var(--s6);
}
.partners-inner{
  max-width:var(--container);margin:0 auto;padding:0 var(--s3);
}
.section-divider-wrap{position:relative}
.section-divider{
  height:1px;background:var(--linha);
  margin-bottom:var(--s5);
}

.seal-badge{
  position:absolute;top:0;left:50%;
  transform:translate(-50%,-50%);
  width:112px;height:112px;
  border-radius:50%;
  background:#fff;
  box-shadow:var(--e2);
  display:flex;align-items:center;justify-content:center;
  z-index:1;
}
.seal-badge-ring{
  position:absolute;inset:0;margin:auto;
  width:85px;height:85px;
  animation:seal-spin 16s linear infinite;
}
.seal-badge-icon{
  position:relative;z-index:1;
  display:flex;
  color:var(--azul);
}
.seal-badge-icon svg{width:34px;height:34px}
@keyframes seal-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){
  .seal-badge-ring{animation:none}
}
@media (max-width:600px){
  .seal-badge{width:88px;height:88px}
  .seal-badge-ring{width:80px;height:80px}
  .seal-badge-icon svg{width:26px;height:26px}
}
.partners-stat{
  text-align:center;
  font-size:1.05rem;color:var(--grafite);
  max-width:52ch;margin:0 auto var(--s5);
}
.partners-stat-num{
  font-family:var(--fm);font-weight:500;font-size:1.6rem;color:var(--tinta);
  letter-spacing:-.02em;margin-right:.15rem;
}

.partners-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3);
}
.logo-card{
  position:relative;
  height:96px;
  border-radius:var(--r-input);
  background:#fff;
  overflow:hidden;
}
.logo-img{
  position:absolute;inset:0;margin:auto;
  max-width:74%;max-height:80%;
  width:auto;height:auto;
  object-fit:contain;
  filter:grayscale(1);
  opacity:0;
  transform-origin:center;
  animation-duration:16s;
  animation-timing-function:ease-in-out;
  animation-iteration-count:infinite;
}
/* Logos muito horizontais (wordmarks largos) usariam a largura máxima
   inteira e ficariam maiores que as demais marcas — reduzimos a
   largura permitida para equilibrar o peso visual entre elas. */
.logo-img--compact{max-width:52%}
/* Duração levemente diferente por card: evita que os 8 cards "virem"
   todos ao mesmo tempo, criando uma troca mais orgânica e escalonada. */
.logo-card:nth-child(1) .logo-img{animation-delay:0s;animation-duration:22s}
.logo-card:nth-child(2) .logo-img{animation-delay:-2.75s;animation-duration:22.55s}
.logo-card:nth-child(3) .logo-img{animation-delay:-5.5s;animation-duration:21.59s}
.logo-card:nth-child(4) .logo-img{animation-delay:-8.25s;animation-duration:22.83s}
.logo-card:nth-child(5) .logo-img{animation-delay:-11s;animation-duration:21.79s}
.logo-card:nth-child(6) .logo-img{animation-delay:-13.75s;animation-duration:22.41s}
.logo-card:nth-child(7) .logo-img{animation-delay:-16.5s;animation-duration:21.45s}
.logo-card:nth-child(8) .logo-img{animation-delay:-19.25s;animation-duration:22.69s}

.logo-img:nth-child(1){animation-name:logo-slot-0}
.logo-img:nth-child(2){animation-name:logo-slot-1}
.logo-img:nth-child(3){animation-name:logo-slot-2}
.logo-img:nth-child(4){animation-name:logo-slot-3}
.logo-img:nth-child(5){animation-name:logo-slot-4}
.logo-img:nth-child(6){animation-name:logo-slot-5}
.logo-img:nth-child(7){animation-name:logo-slot-6}
.logo-img:nth-child(8){animation-name:logo-slot-7}
.logo-img:nth-child(9){animation-name:logo-slot-8}
.logo-img:nth-child(10){animation-name:logo-slot-9}
.logo-img:nth-child(11){animation-name:logo-slot-10}

/* Cada logo "vira" (achata na vertical + desfoca) para trocar de imagem,
   igual ao efeito GLOBAL PARTNERS de unusually.webflow.io.
   11 logos únicas dividem o ciclo em fatias de ~9.09% cada. */
@keyframes logo-slot-0{
  0%{opacity:1;transform:scaleY(1);filter:grayscale(1) blur(0)} 8.09%{opacity:1;transform:scaleY(1);filter:grayscale(1) blur(0)} 9.09%{opacity:1;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 9.11%{opacity:0;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 100%{opacity:0;transform:scaleY(.04);filter:grayscale(1) blur(8px)}
}
@keyframes logo-slot-1{
  0%{opacity:0;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 9.07%{opacity:0;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 9.09%{opacity:1;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 10.09%{opacity:1;transform:scaleY(1);filter:grayscale(1) blur(0)} 17.18%{opacity:1;transform:scaleY(1);filter:grayscale(1) blur(0)} 18.18%{opacity:1;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 18.2%{opacity:0;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 100%{opacity:0;transform:scaleY(.04);filter:grayscale(1) blur(8px)}
}
@keyframes logo-slot-2{
  0%{opacity:0;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 18.16%{opacity:0;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 18.18%{opacity:1;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 19.18%{opacity:1;transform:scaleY(1);filter:grayscale(1) blur(0)} 26.27%{opacity:1;transform:scaleY(1);filter:grayscale(1) blur(0)} 27.27%{opacity:1;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 27.29%{opacity:0;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 100%{opacity:0;transform:scaleY(.04);filter:grayscale(1) blur(8px)}
}
@keyframes logo-slot-3{
  0%{opacity:0;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 27.25%{opacity:0;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 27.27%{opacity:1;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 28.27%{opacity:1;transform:scaleY(1);filter:grayscale(1) blur(0)} 35.36%{opacity:1;transform:scaleY(1);filter:grayscale(1) blur(0)} 36.36%{opacity:1;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 36.38%{opacity:0;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 100%{opacity:0;transform:scaleY(.04);filter:grayscale(1) blur(8px)}
}
@keyframes logo-slot-4{
  0%{opacity:0;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 36.34%{opacity:0;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 36.36%{opacity:1;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 37.36%{opacity:1;transform:scaleY(1);filter:grayscale(1) blur(0)} 44.45%{opacity:1;transform:scaleY(1);filter:grayscale(1) blur(0)} 45.45%{opacity:1;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 45.47%{opacity:0;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 100%{opacity:0;transform:scaleY(.04);filter:grayscale(1) blur(8px)}
}
@keyframes logo-slot-5{
  0%{opacity:0;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 45.43%{opacity:0;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 45.45%{opacity:1;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 46.45%{opacity:1;transform:scaleY(1);filter:grayscale(1) blur(0)} 53.55%{opacity:1;transform:scaleY(1);filter:grayscale(1) blur(0)} 54.55%{opacity:1;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 54.57%{opacity:0;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 100%{opacity:0;transform:scaleY(.04);filter:grayscale(1) blur(8px)}
}
@keyframes logo-slot-6{
  0%{opacity:0;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 54.53%{opacity:0;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 54.55%{opacity:1;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 55.55%{opacity:1;transform:scaleY(1);filter:grayscale(1) blur(0)} 62.64%{opacity:1;transform:scaleY(1);filter:grayscale(1) blur(0)} 63.64%{opacity:1;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 63.66%{opacity:0;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 100%{opacity:0;transform:scaleY(.04);filter:grayscale(1) blur(8px)}
}
@keyframes logo-slot-7{
  0%{opacity:0;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 63.62%{opacity:0;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 63.64%{opacity:1;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 64.64%{opacity:1;transform:scaleY(1);filter:grayscale(1) blur(0)} 71.73%{opacity:1;transform:scaleY(1);filter:grayscale(1) blur(0)} 72.73%{opacity:1;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 72.75%{opacity:0;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 100%{opacity:0;transform:scaleY(.04);filter:grayscale(1) blur(8px)}
}
@keyframes logo-slot-8{
  0%{opacity:0;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 72.71%{opacity:0;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 72.73%{opacity:1;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 73.73%{opacity:1;transform:scaleY(1);filter:grayscale(1) blur(0)} 80.82%{opacity:1;transform:scaleY(1);filter:grayscale(1) blur(0)} 81.82%{opacity:1;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 81.84%{opacity:0;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 100%{opacity:0;transform:scaleY(.04);filter:grayscale(1) blur(8px)}
}
/* Slot 9 (Trad & Cavalcanti) recebe invert() além do grayscale: a
   logo original é branca, pensada para fundo escuro, e ficaria
   invisível no card branco sem essa correção de contraste. */
@keyframes logo-slot-9{
  0%{opacity:0;transform:scaleY(.04);filter:grayscale(1) invert(1) blur(8px)} 81.8%{opacity:0;transform:scaleY(.04);filter:grayscale(1) invert(1) blur(8px)} 81.82%{opacity:1;transform:scaleY(.04);filter:grayscale(1) invert(1) blur(8px)} 82.82%{opacity:1;transform:scaleY(1);filter:grayscale(1) invert(1) blur(0)} 89.91%{opacity:1;transform:scaleY(1);filter:grayscale(1) invert(1) blur(0)} 90.91%{opacity:1;transform:scaleY(.04);filter:grayscale(1) invert(1) blur(8px)} 90.93%{opacity:0;transform:scaleY(.04);filter:grayscale(1) invert(1) blur(8px)} 100%{opacity:0;transform:scaleY(.04);filter:grayscale(1) invert(1) blur(8px)}
}
@keyframes logo-slot-10{
  0%{opacity:0;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 90.89%{opacity:0;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 90.91%{opacity:1;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 91.91%{opacity:1;transform:scaleY(1);filter:grayscale(1) blur(0)} 100%{opacity:1;transform:scaleY(1);filter:grayscale(1) blur(0)}
}

@media (prefers-reduced-motion: reduce){
  .logo-img{animation:none !important;opacity:0}
  .logo-img:first-child{opacity:1}
}

@media (max-width:900px){
  .partners-grid{grid-template-columns:repeat(4,1fr);gap:var(--s2)}
  .logo-card{height:76px}
}
@media (max-width:600px){
  .partners{padding-bottom:var(--s5)}
  .partners-grid{grid-template-columns:repeat(2,1fr)}
  .partners-stat{font-size:.95rem;padding:0 var(--s2)}
}

/* --- INPI: variante do carrossel de logos com 23 marcas ---
   Escopada em .partners-grid--xl para não afetar o carrossel
   original (11 logos) usado nas páginas de Criação de Sites. */
.partners-grid--xl .logo-card:nth-child(1) .logo-img{animation-delay:0s;animation-duration:46s}
.partners-grid--xl .logo-card:nth-child(2) .logo-img{animation-delay:-5.75s;animation-duration:47.15s}
.partners-grid--xl .logo-card:nth-child(3) .logo-img{animation-delay:-11.5s;animation-duration:45.14s}
.partners-grid--xl .logo-card:nth-child(4) .logo-img{animation-delay:-17.25s;animation-duration:47.74s}
.partners-grid--xl .logo-card:nth-child(5) .logo-img{animation-delay:-23s;animation-duration:45.56s}
.partners-grid--xl .logo-card:nth-child(6) .logo-img{animation-delay:-28.75s;animation-duration:46.86s}
.partners-grid--xl .logo-card:nth-child(7) .logo-img{animation-delay:-34.5s;animation-duration:44.85s}
.partners-grid--xl .logo-card:nth-child(8) .logo-img{animation-delay:-40.25s;animation-duration:47.44s}
.partners-grid--xl .logo-img:nth-child(1){animation-name:logo-slot-xl-0}
.partners-grid--xl .logo-img:nth-child(2){animation-name:logo-slot-xl-1}
.partners-grid--xl .logo-img:nth-child(3){animation-name:logo-slot-xl-2}
.partners-grid--xl .logo-img:nth-child(4){animation-name:logo-slot-xl-3}
.partners-grid--xl .logo-img:nth-child(5){animation-name:logo-slot-xl-4}
.partners-grid--xl .logo-img:nth-child(6){animation-name:logo-slot-xl-5}
.partners-grid--xl .logo-img:nth-child(7){animation-name:logo-slot-xl-6}
.partners-grid--xl .logo-img:nth-child(8){animation-name:logo-slot-xl-7}
.partners-grid--xl .logo-img:nth-child(9){animation-name:logo-slot-xl-8}
.partners-grid--xl .logo-img:nth-child(10){animation-name:logo-slot-xl-9}
.partners-grid--xl .logo-img:nth-child(11){animation-name:logo-slot-xl-10}
.partners-grid--xl .logo-img:nth-child(12){animation-name:logo-slot-xl-11}
.partners-grid--xl .logo-img:nth-child(13){animation-name:logo-slot-xl-12}
.partners-grid--xl .logo-img:nth-child(14){animation-name:logo-slot-xl-13}
.partners-grid--xl .logo-img:nth-child(15){animation-name:logo-slot-xl-14}
.partners-grid--xl .logo-img:nth-child(16){animation-name:logo-slot-xl-15}
.partners-grid--xl .logo-img:nth-child(17){animation-name:logo-slot-xl-16}
.partners-grid--xl .logo-img:nth-child(18){animation-name:logo-slot-xl-17}
.partners-grid--xl .logo-img:nth-child(19){animation-name:logo-slot-xl-18}
.partners-grid--xl .logo-img:nth-child(20){animation-name:logo-slot-xl-19}
.partners-grid--xl .logo-img:nth-child(21){animation-name:logo-slot-xl-20}
.partners-grid--xl .logo-img:nth-child(22){animation-name:logo-slot-xl-21}
.partners-grid--xl .logo-img:nth-child(23){animation-name:logo-slot-xl-22}
/* 23 logos únicas dividem o ciclo em fatias de ~4.35% cada. */
@keyframes logo-slot-xl-0{
  0%{opacity:1;transform:scaleY(1);filter:grayscale(1) blur(0)} 3.35%{opacity:1;transform:scaleY(1);filter:grayscale(1) blur(0)} 4.35%{opacity:1;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 4.37%{opacity:0;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 100%{opacity:0;transform:scaleY(.04);filter:grayscale(1) blur(8px)}
}
@keyframes logo-slot-xl-1{
  0%{opacity:0;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 4.33%{opacity:0;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 4.35%{opacity:1;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 5.35%{opacity:1;transform:scaleY(1);filter:grayscale(1) blur(0)} 7.7%{opacity:1;transform:scaleY(1);filter:grayscale(1) blur(0)} 8.7%{opacity:1;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 8.72%{opacity:0;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 100%{opacity:0;transform:scaleY(.04);filter:grayscale(1) blur(8px)}
}
@keyframes logo-slot-xl-2{
  0%{opacity:0;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 8.68%{opacity:0;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 8.7%{opacity:1;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 9.7%{opacity:1;transform:scaleY(1);filter:grayscale(1) blur(0)} 12.04%{opacity:1;transform:scaleY(1);filter:grayscale(1) blur(0)} 13.04%{opacity:1;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 13.06%{opacity:0;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 100%{opacity:0;transform:scaleY(.04);filter:grayscale(1) blur(8px)}
}
@keyframes logo-slot-xl-3{
  0%{opacity:0;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 13.02%{opacity:0;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 13.04%{opacity:1;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 14.04%{opacity:1;transform:scaleY(1);filter:grayscale(1) blur(0)} 16.39%{opacity:1;transform:scaleY(1);filter:grayscale(1) blur(0)} 17.39%{opacity:1;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 17.41%{opacity:0;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 100%{opacity:0;transform:scaleY(.04);filter:grayscale(1) blur(8px)}
}
@keyframes logo-slot-xl-4{
  0%{opacity:0;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 17.37%{opacity:0;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 17.39%{opacity:1;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 18.39%{opacity:1;transform:scaleY(1);filter:grayscale(1) blur(0)} 20.74%{opacity:1;transform:scaleY(1);filter:grayscale(1) blur(0)} 21.74%{opacity:1;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 21.76%{opacity:0;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 100%{opacity:0;transform:scaleY(.04);filter:grayscale(1) blur(8px)}
}
@keyframes logo-slot-xl-5{
  0%{opacity:0;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 21.72%{opacity:0;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 21.74%{opacity:1;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 22.74%{opacity:1;transform:scaleY(1);filter:grayscale(1) blur(0)} 25.09%{opacity:1;transform:scaleY(1);filter:grayscale(1) blur(0)} 26.09%{opacity:1;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 26.11%{opacity:0;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 100%{opacity:0;transform:scaleY(.04);filter:grayscale(1) blur(8px)}
}
@keyframes logo-slot-xl-6{
  0%{opacity:0;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 26.07%{opacity:0;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 26.09%{opacity:1;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 27.09%{opacity:1;transform:scaleY(1);filter:grayscale(1) blur(0)} 29.43%{opacity:1;transform:scaleY(1);filter:grayscale(1) blur(0)} 30.43%{opacity:1;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 30.45%{opacity:0;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 100%{opacity:0;transform:scaleY(.04);filter:grayscale(1) blur(8px)}
}
@keyframes logo-slot-xl-7{
  0%{opacity:0;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 30.41%{opacity:0;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 30.43%{opacity:1;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 31.43%{opacity:1;transform:scaleY(1);filter:grayscale(1) blur(0)} 33.78%{opacity:1;transform:scaleY(1);filter:grayscale(1) blur(0)} 34.78%{opacity:1;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 34.8%{opacity:0;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 100%{opacity:0;transform:scaleY(.04);filter:grayscale(1) blur(8px)}
}
@keyframes logo-slot-xl-8{
  0%{opacity:0;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 34.76%{opacity:0;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 34.78%{opacity:1;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 35.78%{opacity:1;transform:scaleY(1);filter:grayscale(1) blur(0)} 38.13%{opacity:1;transform:scaleY(1);filter:grayscale(1) blur(0)} 39.13%{opacity:1;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 39.15%{opacity:0;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 100%{opacity:0;transform:scaleY(.04);filter:grayscale(1) blur(8px)}
}
@keyframes logo-slot-xl-9{
  0%{opacity:0;transform:scaleY(.04);filter:grayscale(1) invert(1) blur(8px)} 39.11%{opacity:0;transform:scaleY(.04);filter:grayscale(1) invert(1) blur(8px)} 39.13%{opacity:1;transform:scaleY(.04);filter:grayscale(1) invert(1) blur(8px)} 40.13%{opacity:1;transform:scaleY(1);filter:grayscale(1) invert(1) blur(0)} 42.48%{opacity:1;transform:scaleY(1);filter:grayscale(1) invert(1) blur(0)} 43.48%{opacity:1;transform:scaleY(.04);filter:grayscale(1) invert(1) blur(8px)} 43.5%{opacity:0;transform:scaleY(.04);filter:grayscale(1) invert(1) blur(8px)} 100%{opacity:0;transform:scaleY(.04);filter:grayscale(1) invert(1) blur(8px)}
}
@keyframes logo-slot-xl-10{
  0%{opacity:0;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 43.46%{opacity:0;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 43.48%{opacity:1;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 44.48%{opacity:1;transform:scaleY(1);filter:grayscale(1) blur(0)} 46.83%{opacity:1;transform:scaleY(1);filter:grayscale(1) blur(0)} 47.83%{opacity:1;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 47.85%{opacity:0;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 100%{opacity:0;transform:scaleY(.04);filter:grayscale(1) blur(8px)}
}
@keyframes logo-slot-xl-11{
  0%{opacity:0;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 47.81%{opacity:0;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 47.83%{opacity:1;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 48.83%{opacity:1;transform:scaleY(1);filter:grayscale(1) blur(0)} 51.17%{opacity:1;transform:scaleY(1);filter:grayscale(1) blur(0)} 52.17%{opacity:1;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 52.19%{opacity:0;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 100%{opacity:0;transform:scaleY(.04);filter:grayscale(1) blur(8px)}
}
@keyframes logo-slot-xl-12{
  0%{opacity:0;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 52.15%{opacity:0;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 52.17%{opacity:1;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 53.17%{opacity:1;transform:scaleY(1);filter:grayscale(1) blur(0)} 55.52%{opacity:1;transform:scaleY(1);filter:grayscale(1) blur(0)} 56.52%{opacity:1;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 56.54%{opacity:0;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 100%{opacity:0;transform:scaleY(.04);filter:grayscale(1) blur(8px)}
}
@keyframes logo-slot-xl-13{
  0%{opacity:0;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 56.5%{opacity:0;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 56.52%{opacity:1;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 57.52%{opacity:1;transform:scaleY(1);filter:grayscale(1) blur(0)} 59.87%{opacity:1;transform:scaleY(1);filter:grayscale(1) blur(0)} 60.87%{opacity:1;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 60.89%{opacity:0;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 100%{opacity:0;transform:scaleY(.04);filter:grayscale(1) blur(8px)}
}
@keyframes logo-slot-xl-14{
  0%{opacity:0;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 60.85%{opacity:0;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 60.87%{opacity:1;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 61.87%{opacity:1;transform:scaleY(1);filter:grayscale(1) blur(0)} 64.22%{opacity:1;transform:scaleY(1);filter:grayscale(1) blur(0)} 65.22%{opacity:1;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 65.24%{opacity:0;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 100%{opacity:0;transform:scaleY(.04);filter:grayscale(1) blur(8px)}
}
@keyframes logo-slot-xl-15{
  0%{opacity:0;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 65.2%{opacity:0;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 65.22%{opacity:1;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 66.22%{opacity:1;transform:scaleY(1);filter:grayscale(1) blur(0)} 68.57%{opacity:1;transform:scaleY(1);filter:grayscale(1) blur(0)} 69.57%{opacity:1;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 69.59%{opacity:0;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 100%{opacity:0;transform:scaleY(.04);filter:grayscale(1) blur(8px)}
}
@keyframes logo-slot-xl-16{
  0%{opacity:0;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 69.55%{opacity:0;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 69.57%{opacity:1;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 70.57%{opacity:1;transform:scaleY(1);filter:grayscale(1) blur(0)} 72.91%{opacity:1;transform:scaleY(1);filter:grayscale(1) blur(0)} 73.91%{opacity:1;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 73.93%{opacity:0;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 100%{opacity:0;transform:scaleY(.04);filter:grayscale(1) blur(8px)}
}
@keyframes logo-slot-xl-17{
  0%{opacity:0;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 73.89%{opacity:0;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 73.91%{opacity:1;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 74.91%{opacity:1;transform:scaleY(1);filter:grayscale(1) blur(0)} 77.26%{opacity:1;transform:scaleY(1);filter:grayscale(1) blur(0)} 78.26%{opacity:1;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 78.28%{opacity:0;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 100%{opacity:0;transform:scaleY(.04);filter:grayscale(1) blur(8px)}
}
@keyframes logo-slot-xl-18{
  0%{opacity:0;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 78.24%{opacity:0;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 78.26%{opacity:1;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 79.26%{opacity:1;transform:scaleY(1);filter:grayscale(1) blur(0)} 81.61%{opacity:1;transform:scaleY(1);filter:grayscale(1) blur(0)} 82.61%{opacity:1;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 82.63%{opacity:0;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 100%{opacity:0;transform:scaleY(.04);filter:grayscale(1) blur(8px)}
}
@keyframes logo-slot-xl-19{
  0%{opacity:0;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 82.59%{opacity:0;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 82.61%{opacity:1;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 83.61%{opacity:1;transform:scaleY(1);filter:grayscale(1) blur(0)} 85.96%{opacity:1;transform:scaleY(1);filter:grayscale(1) blur(0)} 86.96%{opacity:1;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 86.98%{opacity:0;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 100%{opacity:0;transform:scaleY(.04);filter:grayscale(1) blur(8px)}
}
@keyframes logo-slot-xl-20{
  0%{opacity:0;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 86.94%{opacity:0;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 86.96%{opacity:1;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 87.96%{opacity:1;transform:scaleY(1);filter:grayscale(1) blur(0)} 90.3%{opacity:1;transform:scaleY(1);filter:grayscale(1) blur(0)} 91.3%{opacity:1;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 91.32%{opacity:0;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 100%{opacity:0;transform:scaleY(.04);filter:grayscale(1) blur(8px)}
}
@keyframes logo-slot-xl-21{
  0%{opacity:0;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 91.28%{opacity:0;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 91.3%{opacity:1;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 92.3%{opacity:1;transform:scaleY(1);filter:grayscale(1) blur(0)} 94.65%{opacity:1;transform:scaleY(1);filter:grayscale(1) blur(0)} 95.65%{opacity:1;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 95.67%{opacity:0;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 100%{opacity:0;transform:scaleY(.04);filter:grayscale(1) blur(8px)}
}
@keyframes logo-slot-xl-22{
  0%{opacity:0;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 95.63%{opacity:0;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 95.65%{opacity:1;transform:scaleY(.04);filter:grayscale(1) blur(8px)} 96.65%{opacity:1;transform:scaleY(1);filter:grayscale(1) blur(0)} 100%{opacity:1;transform:scaleY(1);filter:grayscale(1) blur(0)}
}

/* =========================================================
   VÍDEO EM DESTAQUE — "deitado" (tampa fechada, em 3D) ao
   entrar/sair da tela, "de pé" (aberto, de frente) ao passar
   pelo centro do viewport, conforme o scroll
   ========================================================= */
.video-showcase{
  position:relative;z-index:1;
  background:#fff;
  padding:var(--s6) 0 0;
  display:flex;justify-content:center;
  overflow:hidden;
}
.video-showcase-frame{
  position:relative;
  width:72%;max-width:840px;
  aspect-ratio:16/9;
  border-radius:var(--r-band);
  overflow:hidden;
  background:#000;
  box-shadow:var(--e4);
  transform-origin:50% 100%;
  backface-visibility:hidden;
  will-change:transform;
}
.video-showcase-media{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;display:block;
}
.video-showcase-mute{
  position:absolute;right:var(--s3);bottom:var(--s3);z-index:2;
  width:44px;height:44px;border-radius:50%;
  background:rgba(255,255,255,.92);color:var(--tinta);
  border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--e2);
  transition:transform var(--ease);
}
.video-showcase-mute:hover{transform:scale(1.08)}
.video-showcase-mute svg{width:20px;height:20px}
.video-showcase-mute .icon-unmuted{display:none}
.video-showcase-mute[aria-pressed="true"] .icon-muted{display:none}
.video-showcase-mute[aria-pressed="true"] .icon-unmuted{display:block}

@media (prefers-reduced-motion: reduce){
  .video-showcase-frame{transform:none !important}
}

@media (max-width:720px){
  .video-showcase{padding:var(--s5) 0 0}
  .video-showcase-frame{width:88%}
  .video-showcase-mute{width:38px;height:38px;right:var(--s2);bottom:var(--s2)}
  .video-showcase-mute svg{width:17px;height:17px}
}

.video-cta{
  position:relative;z-index:1;
  background:#fff;
  padding:40px var(--s3) 36px;
  display:flex;flex-direction:column;align-items:center;gap:var(--s2);
}
@media (max-width:600px){
  .video-cta{padding:var(--s4) var(--s2) var(--s3)}
}
.video-cta-note{
  display:flex;align-items:center;gap:.55rem;
  font-size:.9rem;color:var(--grafite);
}
.video-cta-dot{
  position:relative;
  width:9px;height:9px;border-radius:50%;
  background:#25D366;flex:none;
}
.video-cta-dot::before{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:#25D366;
  animation:whatsapp-pulse 2.2s ease-out infinite;
}
@media (prefers-reduced-motion: reduce){
  .video-cta-dot::before{animation:none}
}

/* =========================================================
   BENEFÍCIOS — bloco escuro com destaque, fade-in ao entrar na tela
   ========================================================= */
.perks{
  position:relative;
  background:#fff;
  padding:var(--s6) var(--s3);
}
.perks-shell{
  position:relative;
  max-width:1400px;margin:0 auto;
  border-radius:40px;
  background:#0A0A0D;
  overflow:hidden;
  padding:var(--s6) var(--s4);
  opacity:0;transform:translateY(40px);
  transition:opacity 1s ease, transform 1s ease;
}
.perks-shell.is-visible{opacity:1;transform:translateY(0)}
.perks-glow{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(120% 90% at 15% 0%, rgba(0,122,255,.45), transparent 60%),
    radial-gradient(120% 90% at 90% 100%, rgba(38,167,63,.3), transparent 60%);
}
.perks-inner{position:relative;z-index:1}
.perks-eyebrow-row{display:flex;justify-content:center;margin-bottom:var(--s3)}
.perks-eyebrow{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--fm);font-weight:500;font-size:11px;
  letter-spacing:.09em;text-transform:uppercase;
  color:#fff;
  padding:.55rem 1.15rem .55rem .8rem;
  border:1.5px solid rgba(255,255,255,.18);
  border-radius:var(--r-chip);
  background:rgba(255,255,255,.06);
}
.perks-eyebrow-icon{width:16px;height:16px;flex:none}
.perks-title{
  text-align:center;color:#fff;
  font-size:28px;font-weight:800;line-height:1.28;
  max-width:44ch;margin:0 auto var(--s6);
}
.perks-title--tight{margin-bottom:var(--s3)}
.perks-subtitle{
  text-align:center;color:rgba(255,255,255,.62);
  font-size:1.05rem;line-height:1.55;
  max-width:52ch;margin:0 auto var(--s6);
}
.perk-risk-label{
  display:block;
  font-family:var(--fm);font-weight:600;font-size:.85rem;
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--ambar);margin-bottom:var(--s2);
}
.perks-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3);
  margin-bottom:var(--s4);
}
.perk-card{
  border-radius:var(--r-card);
  padding:var(--s4);
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  opacity:0;transform:translateY(24px);
  transition:opacity .7s ease, transform .7s ease;
}
.perks-shell.is-visible .perk-card{opacity:1;transform:translateY(0)}
.perk-card:nth-child(1){transition-delay:.05s}
.perk-card:nth-child(2){transition-delay:.12s}
.perk-card:nth-child(3){transition-delay:.19s}
.perk-card:nth-child(4){transition-delay:.26s}
.perk-card:nth-child(5){transition-delay:.33s}
.perk-card:nth-child(6){transition-delay:.4s}
.perk-card--highlight{
  background:var(--grad-azul);
  border-color:transparent;
}
.perk-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:var(--r-input);
  background:rgba(255,255,255,.08);
  color:#fff;
  margin-bottom:var(--s3);
}
.perk-card--highlight .perk-icon{background:rgba(255,255,255,.22)}
.perk-icon svg{width:22px;height:22px}
.perk-card h3{color:#fff;font-size:1.15rem;margin-bottom:.5rem}
.perk-card p{color:rgba(255,255,255,.62);font-size:.95rem;line-height:1.55}
.perk-card--highlight p{color:rgba(255,255,255,.85)}
.perks-cta{display:flex;justify-content:center}

@media (prefers-reduced-motion: reduce){
  .perks-shell, .perk-card{transition-delay:0s !important}
}

@media (max-width:900px){
  .perks-grid{grid-template-columns:repeat(2,1fr)}
  .perks-shell{border-radius:28px;padding:var(--s5) var(--s3)}
}
@media (max-width:600px){
  .perks{padding:var(--s5) var(--s2)}
  .perks-grid{grid-template-columns:1fr}
  .perks-title{font-size:1.5rem;margin-bottom:var(--s4)}
  .perks-subtitle{margin-bottom:66px}
}

/* =========================================================
   PROCESSO — 3 etapas, com texto de destaque que escurece
   progressivamente conforme o scroll
   ========================================================= */
.process{
  position:relative;z-index:1;
  background:var(--nuvem);
  padding:var(--s6) var(--s3);
}
.process-inner{
  max-width:var(--container);margin:0 auto;
}
.process-header{
  text-align:center;
  max-width:56ch;margin:0 auto var(--s6);
}
.process-eyebrow{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--fm);font-weight:500;font-size:11px;
  letter-spacing:.09em;text-transform:uppercase;
  color:var(--azul);
  margin-bottom:var(--s3);
  padding:.55rem 1.15rem .55rem .8rem;
  border:1.5px solid rgba(0,122,255,.24);
  border-radius:var(--r-chip);
  background:rgba(0,122,255,.08);
}
.process-eyebrow-icon{width:16px;height:16px;flex:none}
.process-title{
  font-size:clamp(1.6rem,3vw,2.1rem);font-weight:800;line-height:1.3;
  color:var(--tinta);margin-bottom:var(--s3);
}
.process-highlight{
  font-size:1.15rem;line-height:1.55;
}
.process-highlight .word,
.cases-subtitle .word,
.ai-ready-subtitle .word{
  color:rgba(29,29,27,.28);
  transition:color .35s ease;
}
.process-highlight .word.is-dark,
.cases-subtitle .word.is-dark,
.ai-ready-subtitle .word.is-dark{color:var(--tinta)}

.process-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3);
  margin-bottom:var(--s4);
}
.process-grid--4{grid-template-columns:repeat(4,1fr)}
.process-card{
  border-radius:var(--r-card);
  padding:var(--s4);
  background:#fff;
  border:1px solid var(--linha);
}
.process-step{
  display:block;
  font-family:var(--fm);font-weight:600;font-size:1.3rem;
  color:var(--azul);margin-bottom:var(--s2);
}
.process-card h3{font-size:1.1rem;color:var(--tinta);margin-bottom:.5rem}
.process-card p{color:var(--grafite);font-size:.95rem;line-height:1.6}

.process-cta{display:flex;justify-content:center}

@media (prefers-reduced-motion: reduce){
  .process-highlight .word,
  .cases-subtitle .word,
  .ai-ready-subtitle .word{color:var(--tinta) !important}
}

@media (max-width:900px){
  .process-grid{grid-template-columns:1fr;gap:var(--s3)}
}
@media (max-width:600px){
  .process{padding:var(--s5) var(--s2)}
  .process-title{font-size:1.4rem}
  .process-highlight{font-size:1rem}
}

/* =========================================================
   CASES — cards com foto de fundo que viram no hover/toque,
   revelando a descrição em cor sólida
   ========================================================= */
.cases{
  position:relative;
  background:#fff;
  padding:var(--s6) var(--s3);
}
.cases-inner{max-width:var(--container);margin:0 auto}
.cases-header{
  text-align:center;
  max-width:56ch;margin:0 auto var(--s6);
}
.cases-title{
  font-size:clamp(1.6rem,3vw,2.1rem);font-weight:800;line-height:1.3;
  color:var(--tinta);margin-bottom:var(--s3);
}
.cases-subtitle{font-size:1.05rem;line-height:1.55;color:var(--grafite)}

.cases-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3);
  margin-bottom:var(--s4);
}

.case-card{
  perspective:1600px;-webkit-perspective:1600px;
  aspect-ratio:3/4;
}
.case-card-inner{
  position:relative;width:100%;height:100%;
  transition:transform .8s cubic-bezier(.4,0,.2,1);
  transform-style:preserve-3d;-webkit-transform-style:preserve-3d;
  will-change:transform;
}
.case-card:hover .case-card-inner,
.case-card.is-flipped .case-card-inner{transform:rotateY(180deg)}

.case-face{
  position:absolute;inset:0;
  border-radius:var(--r-card);
  overflow:hidden;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  will-change:transform;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:var(--s4);
  box-shadow:var(--e3);
}
.case-face--front{
  background-size:cover;background-position:center;
  color:#fff;
}
.case-face-overlay{
  position:absolute;inset:0;z-index:0;
  background:linear-gradient(to top, rgba(10,10,13,.75) 0%, rgba(10,10,13,.15) 45%, rgba(10,10,13,.4) 100%);
}
.case-face--temakeria{background-image:url('../img/case-temakeria.webp')}
.case-face--cavalcanti{background-image:url('../img/case-cavalcanti.webp')}
.case-face--enzojeep{background-image:url('../img/case-enzojeep.webp')}

.case-face--back{
  transform:rotateY(180deg);
  background:var(--tinta);
  color:#fff;
  justify-content:flex-start;
  gap:var(--s3);
}

.case-back-header{
  position:relative;z-index:1;
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--s2);
}
.case-back-header .case-stat-num{font-size:1.5rem}

.case-logo-img{
  position:relative;z-index:1;
  display:block;
  height:32px;width:auto;max-width:65%;
  object-fit:contain;object-position:left center;
}

.case-stat{
  position:relative;z-index:1;
  display:flex;flex-direction:column;gap:.15rem;
}
.case-stat-num{
  font-family:var(--fm);font-weight:500;font-size:2rem;
  letter-spacing:-.02em;line-height:1;color:#fff;
}
.case-stat-caption{font-size:.85rem;color:rgba(255,255,255,.8)}

.case-desc{
  position:relative;z-index:1;
  font-size:.95rem;line-height:1.6;color:rgba(255,255,255,.82);
}
.case-desc strong{display:block;color:#fff;font-size:1.05rem;margin-bottom:.6rem}

.cases-cta{display:flex;justify-content:center}

@media (hover: none){
  .case-card{cursor:pointer}
}

@media (max-width:900px){
  .cases-grid{grid-template-columns:1fr;gap:var(--s3)}
  .case-card{aspect-ratio:4/5;max-width:420px;margin:0 auto;width:100%}
}
@media (max-width:600px){
  .cases{padding:var(--s5) var(--s2)}
  .cases-title{font-size:1.4rem}
}

/* =========================================================
   OTIMIZADO PARA IA — badge, logos das IAs e cards de destaque
   ========================================================= */
.ai-ready{
  position:relative;z-index:1;
  background:var(--nuvem);
  padding:var(--s6) var(--s3);
}
.ai-ready-inner{max-width:var(--container);margin:0 auto}
.ai-ready-header{
  text-align:center;
  max-width:62ch;margin:0 auto var(--s5);
}
.ai-ready-badge{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--fm);font-weight:500;font-size:11px;
  letter-spacing:.09em;text-transform:uppercase;
  color:var(--laranja);
  padding:.55rem 1.15rem;
  border:1.5px solid rgba(242,138,30,.28);
  border-radius:var(--r-chip);
  background:rgba(242,138,30,.08);
  margin-bottom:var(--s3);
}
.ai-ready-badge svg{width:14px;height:14px;flex:none}
.ai-ready-title{
  font-size:clamp(1.7rem,3.4vw,2.3rem);font-weight:800;line-height:1.28;
  letter-spacing:-.02em;
  color:var(--tinta);margin-bottom:var(--s3);
}
.grad-text-warm{
  background:var(--grad-ambar);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
}
.ai-ready-subtitle{font-size:1.05rem;line-height:1.6;color:var(--grafite)}

.ai-logos-row{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:var(--s2);
  margin-bottom:var(--s6);
}
.ai-logo-pill{
  display:inline-flex;align-items:center;justify-content:center;
  height:52px;padding:0 1.3rem;
  border-radius:var(--r-chip);
  background:#fff;
  border:1px solid var(--linha);
  box-shadow:var(--e2);
}
.ai-logo-img{height:20px;width:auto;display:block}

.ai-ready-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3);
  margin-bottom:var(--s4);
}
.ai-ready-card{
  border-radius:var(--r-card);
  padding:var(--s4);
  background:#fff;
  border:1px solid var(--linha);
}
.ai-ready-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:var(--r-input);
  background:rgba(242,138,30,.1);
  color:var(--laranja);
  margin-bottom:var(--s3);
}
.ai-ready-icon svg{width:22px;height:22px}
.ai-ready-card h3{font-size:1.1rem;color:var(--tinta);margin-bottom:.5rem}
.ai-ready-card p{color:var(--grafite);font-size:.95rem;line-height:1.6}

.ai-ready-cta{display:flex;justify-content:center}

@media (max-width:900px){
  .ai-ready-grid{grid-template-columns:1fr;gap:var(--s3)}
  .ai-logo-pill{height:44px;padding:0 1rem}
  .ai-logo-img{height:17px}
}
@media (max-width:600px){
  .ai-ready{padding:var(--s5) var(--s2)}
  .ai-ready-title{font-size:1.45rem}
  .ai-ready-subtitle{font-size:.95rem}
  .ai-logos-row{gap:var(--s1)}
}

.section-line{height:1px;width:100%;background:var(--linha)}

/* =========================================================
   PARCERIA INPI — selo institucional + texto de credibilidade
   (embutido no fim da seção de Processo, mesma cor de fundo)
   ========================================================= */
.process-partner{
  display:flex;align-items:center;justify-content:center;gap:var(--s5);
  max-width:900px;margin:var(--s6) auto 0;
  padding-top:var(--s5);
  border-top:1px solid var(--linha);
}
.process-partner-logo{height:40px;width:auto;flex:none;object-fit:contain}
.process-partner-text{
  flex:1;
  font-size:.95rem;line-height:1.6;color:var(--grafite);
}
@media (max-width:900px){
  .process-partner{flex-direction:column;text-align:center;gap:var(--s3)}
}
@media (max-width:600px){
  .process-partner{margin-top:var(--s5);padding-top:var(--s4)}
  .process-partner-logo{height:30px}
}

/* =========================================================
   FAQ — acordeão nativo (details/summary) com Schema FAQPage
   ========================================================= */
.faq{
  position:relative;z-index:1;
  background:var(--nuvem);
  padding:var(--s6) var(--s3);
}
.faq-inner{max-width:840px;margin:0 auto}
.faq-header{
  text-align:center;
  max-width:56ch;margin:0 auto var(--s5);
}
.faq-eyebrow{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--fm);font-weight:500;font-size:11px;
  letter-spacing:.09em;text-transform:uppercase;
  color:var(--azul-fundo);
  padding:.55rem 1.15rem .55rem .8rem;
  border:1.5px solid rgba(29,29,27,.12);
  border-radius:var(--r-chip);
  background:#fff;
  margin-bottom:var(--s3);
}
.faq-eyebrow-icon{width:16px;height:16px;flex:none}
.faq-title{
  font-size:clamp(1.6rem,3vw,2.1rem);font-weight:800;line-height:1.3;
  color:var(--tinta);margin-bottom:var(--s3);
}
.faq-subtitle{font-size:1.05rem;line-height:1.55;color:var(--grafite)}

.faq-list{display:flex;flex-direction:column;gap:var(--s2);margin-bottom:var(--s4)}
.faq-item{
  border-radius:var(--r-card);
  background:#fff;
  border:1px solid var(--linha);
  overflow:hidden;
}
.faq-question{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  padding:1.3rem var(--s4);
  font-weight:700;font-size:1.02rem;color:var(--tinta);
  cursor:pointer;
  list-style:none;
}
.faq-question::-webkit-details-marker{display:none}
.faq-question::marker{content:''}
.faq-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:50%;flex:none;
  background:var(--nuvem);color:var(--azul);
  transition:transform .25s ease;
}
.faq-item[open] .faq-toggle{transform:rotate(45deg)}
.faq-answer{padding:0 var(--s4) 1.3rem}
.faq-answer p{color:var(--grafite);font-size:.98rem;line-height:1.65}
.faq-answer p + p{margin-top:.75rem}

.faq-cta{display:flex;justify-content:center}

@media (max-width:600px){
  .faq{padding:var(--s5) var(--s2)}
  .faq-title{font-size:1.45rem}
  .faq-question{padding:1.1rem var(--s3);font-size:.95rem;gap:var(--s2)}
  .faq-answer{padding:0 var(--s3) 1.1rem}
}

/* =========================================================
   CTA FINAL — bloco escuro com marquee infinito e fundo pontilhado
   ========================================================= */
.cta-final{
  position:relative;
  background:#fff;
  padding:var(--s6) var(--s3);
}
.cta-final-shell{
  position:relative;
  max-width:1400px;margin:0 auto;
  border-radius:40px;
  background:#0A0A0D;
  overflow:hidden;
  padding:var(--s6) var(--s4);
  text-align:center;
}
.cta-final-dots{
  position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.14) 1px, transparent 1px);
  background-size:24px 24px;
  mask-image:radial-gradient(ellipse 70% 60% at 50% 40%, #000 40%, transparent 85%);
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 40%, #000 40%, transparent 85%);
}

.cta-marquee{
  position:relative;z-index:1;
  overflow:hidden;width:100%;
  margin-bottom:var(--s6);
  mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.cta-marquee-track{
  display:flex;align-items:center;gap:1.6rem;
  width:max-content;
  animation:cta-marquee 24s linear infinite;
}
.cta-marquee-item{
  display:inline-flex;align-items:center;gap:1.6rem;
  font-family:var(--fm);font-weight:500;font-size:12px;
  letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.35);
  white-space:nowrap;
}
.cta-marquee-item::after{content:'—';opacity:.45}

@keyframes cta-marquee{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

.cta-final-content{position:relative;z-index:1}
.cta-final-title{
  color:#fff;font-weight:800;
  font-size:clamp(2.1rem,4.6vw,3.6rem);
  line-height:1.16;letter-spacing:-.02em;
  margin-bottom:var(--s4);
}

.btn-light{background:#fff;color:var(--tinta)}
.btn-light:hover{box-shadow:0 10px 26px rgba(255,255,255,.16)}
.btn-dot{width:8px;height:8px;border-radius:50%;background:var(--laranja);flex:none}

@media (prefers-reduced-motion: reduce){
  .cta-marquee-track{animation:none}
}

@media (max-width:900px){
  .cta-final-shell{border-radius:28px;padding:var(--s5) var(--s3)}
}
@media (max-width:600px){
  .cta-final{padding:var(--s5) var(--s2)}
  .cta-final-title{font-size:1.7rem;margin-bottom:var(--s4)}
  .cta-marquee{margin-bottom:var(--s4)}
  .cta-marquee-item{font-size:10px}
}

/* =========================================================
   FORMAS DE PAGAMENTO — mini seção com selo de bandeiras
   ========================================================= */
.payments{
  background:#fff;
  padding:var(--s5) var(--s3);
}
.payments-inner{
  max-width:var(--container);margin:0 auto;
  text-align:center;
}
.payments-text{
  font-size:1.05rem;color:var(--grafite);
  margin-bottom:var(--s4);
}
.payments-row{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:var(--s5) var(--s5);
}
.payments-icon{height:28px;width:auto;object-fit:contain}

@media (max-width:600px){
  .payments{padding:var(--s4) var(--s2)}
  .payments-row{gap:var(--s3) var(--s4)}
  .payments-icon{height:22px}
}

/* =========================================================
   RODAPÉ
   ========================================================= */
.site-footer{
  position:relative;z-index:1;
  background:#fff;
  padding:var(--s6) 0 var(--s4);
}
.footer-inner{
  width:100%;max-width:var(--container);margin:0 auto;padding:0 var(--s3);
}

.footer-grid{
  display:grid;
  grid-template-columns:1.3fr 1fr 1fr;
  gap:var(--s5);
}

.footer-eyebrow{
  font-family:var(--fm);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--grafite);display:block;
  padding-bottom:1rem;margin-bottom:1.6rem;
  border-bottom:1px solid var(--linha);
}
.footer-budget-btn{margin-top:var(--s3)}

.footer-headline{
  font-weight:800;
  font-size:clamp(1.5rem,2.6vw,2.05rem);
  line-height:1.18;letter-spacing:-.02em;
  color:var(--tinta);
  margin-bottom:var(--s4);
}
.footer-headline em{
  font-style:italic;font-weight:800;color:#007AFF;
}

.footer-logo{height:55px;width:auto;margin-bottom:var(--s3)}

.footer-desc{
  font-size:.92rem;color:var(--grafite);max-width:34ch;
}

.footer-address{
  font-style:normal;font-size:.92rem;line-height:1.6;color:var(--grafite);
  margin-bottom:var(--s3);
}
.footer-hours{
  font-size:.92rem;line-height:1.6;color:var(--grafite);
  margin-bottom:var(--s3);
}

.footer-email{
  display:block;font-weight:600;font-size:1.05rem;color:var(--tinta);
  margin-bottom:var(--s2);transition:color .15s ease;
}
.footer-email:hover{color:var(--azul);text-decoration:none}

.footer-whatsapp{
  display:inline-flex;align-items:center;gap:.65rem;
  background:#E7FAEF;
  color:var(--tinta);
  font-size:.92rem;font-weight:600;
  padding:.4rem 1.15rem .4rem .4rem;
  border-radius:var(--r-chip);
  transition:background .15s ease, transform .15s ease;
}
.footer-whatsapp:hover{background:#D8F5E4;transform:translateY(-1px);text-decoration:none}
.footer-whatsapp-icon{
  width:28px;height:28px;border-radius:50%;flex:none;
  background:#25D366;
  display:inline-flex;align-items:center;justify-content:center;
}
.footer-whatsapp-icon svg{width:15px;height:15px;color:#fff}

.footer-social{
  display:flex;flex-direction:column;gap:.4rem;
  margin-bottom:var(--s3);
}
.footer-social a{
  display:block;line-height:1.3;
  font-size:.92rem;color:var(--grafite);transition:color .15s ease;
}
.footer-social a:hover{color:var(--azul);text-decoration:none}


.footer-bottom{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--s3);
  margin-top:var(--s6);padding-top:var(--s3);
  border-top:1px solid var(--linha);
}
.footer-bottom p{
  font-family:var(--fm);font-size:.7rem;color:var(--grafite);letter-spacing:.02em;
}
.footer-bottom p a{color:var(--grafite);text-decoration:underline;text-underline-offset:2px}
.footer-bottom p a:hover{color:var(--azul)}

.footer-totop{
  width:44px;height:44px;border-radius:50%;flex:none;
  border:1.5px solid var(--linha);
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--tinta);
  transition:background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}
.footer-totop:hover{background:var(--tinta);border-color:var(--tinta);color:#fff;transform:translateY(-3px)}
.footer-totop svg{width:18px;height:18px}

@media (max-width:900px){
  .footer-grid{grid-template-columns:1fr 1fr;row-gap:var(--s5)}
  .footer-brand{grid-column:1 / -1}
}
@media (max-width:600px){
  .footer-grid{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column;align-items:flex-start}
}

/* =========================================================
   PÁGINAS INTERNAS (Sobre, Serviços, Clientes, Contato)
   Site institucional — classes usadas só por essas páginas.
   ========================================================= */

/* --- Banner de título, reaproveitado no topo das 4 páginas --- */
.page-hero{
  position:relative;
  padding:calc(var(--header-h) + var(--s5)) var(--s3) var(--s5);
  overflow:hidden;
  background:
    radial-gradient(1200px 500px at 82% -20%, rgba(0,122,255,.10), transparent 60%),
    radial-gradient(900px 400px at 100% 100%, rgba(38,167,63,.09), transparent 55%),
    linear-gradient(180deg, #ffffff 0%, var(--nuvem) 100%);
}
.page-hero-inner{max-width:var(--container);margin:0 auto;text-align:center}
.page-hero-title{
  font-weight:800;font-size:clamp(2rem,4.2vw,3.2rem);letter-spacing:-.03em;
  line-height:1.1;color:var(--tinta);margin-bottom:var(--s3);
}
.page-hero-lead{font-size:1.05rem;color:var(--grafite);max-width:62ch;margin:0 auto}
@media (max-width:600px){
  .page-hero{padding-top:calc(var(--header-h) + var(--s4))}
}

/* --- Sobre: texto institucional + Missão/Visão/Valores --- */
.about{padding:var(--s6) var(--s3)}
.about-inner{max-width:900px;margin:0 auto}
.about-copy p{font-size:1.05rem;line-height:1.75;color:var(--grafite);max-width:75ch}
.about-copy p + p{margin-top:var(--s3)}

.values-tags{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:var(--s2)}
.value-tag{
  font-family:var(--fm);font-weight:500;font-size:.82rem;
  color:var(--tinta);background:var(--nuvem);
  border:1px solid var(--linha);border-radius:var(--r-chip);
  padding:.45rem 1rem;
}

/* --- Clientes: grade estática de 4 colunas, igual à seção de
   clientes da home, mas sem o efeito de troca — cada logo fica
   fixa em sua própria célula. --- */
.clients{background:var(--nuvem);padding:var(--s6) var(--s3)}
.clients-inner{max-width:var(--container);margin:0 auto}
.clients-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3);
}
.client-cell{
  display:flex;align-items:center;justify-content:center;
  height:110px;padding:var(--s3);
  border-radius:var(--r-input);
  background:#fff;
}
.client-logo{max-width:74%;max-height:64px;width:auto;height:auto;object-fit:contain}
/* Logo da Trad & Cavalcanti é branca sobre transparente (pensada para
   fundo escuro) — sem isso, ficaria invisível na célula branca. */
.client-logo--invert{filter:invert(1)}
@media (max-width:900px){
  .clients-grid{gap:var(--s2)}
  .client-cell{height:92px}
}
@media (max-width:600px){
  .clients-grid{grid-template-columns:repeat(2,1fr)}
  .client-cell{height:84px}
  .client-logo{max-height:44px}
}

/* --- Serviços: grade de cards, 2 já têm LP própria, o resto "em breve" --- */
.services{padding:var(--s6) var(--s3)}
.services-inner{max-width:var(--container);margin:0 auto}
.services-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3);
}
.service-card{
  position:relative;
  display:block;
  border-radius:var(--r-card);
  padding:var(--s4);
  background:#fff;
  border:1px solid var(--linha);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
a.service-card:hover{transform:translateY(-3px);box-shadow:var(--e3);border-color:transparent}
.service-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:48px;height:48px;border-radius:var(--r-input);
  background:rgba(0,122,255,.08);color:var(--azul);
  margin-bottom:var(--s3);
}
.service-icon svg{width:24px;height:24px}
.service-card h3{font-size:1.1rem;color:var(--tinta);margin-bottom:.5rem}
.service-card p{color:var(--grafite);font-size:.95rem;line-height:1.6}
.service-card-link{
  display:inline-flex;align-items:center;gap:.4rem;
  margin-top:var(--s3);font-family:var(--fm);font-weight:500;font-size:.85rem;
  color:var(--azul);
}
.service-card-link svg{width:14px;height:14px}
.service-card--soon{opacity:.72}
.service-badge{
  position:absolute;top:var(--s3);right:var(--s3);
  font-family:var(--fm);font-weight:500;font-size:.72rem;
  letter-spacing:.06em;text-transform:uppercase;
  color:var(--prata);background:var(--nuvem);
  border:1px solid var(--linha);border-radius:var(--r-chip);
  padding:.3rem .7rem;
}
@media (max-width:900px){
  .services-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:600px){
  .services-grid{grid-template-columns:1fr}
}

/* --- Contato: endereço + fotos + redes --- */
.contact{padding:var(--s6) var(--s3)}
.contact-inner{max-width:var(--container);margin:0 auto}
.contact-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:var(--s5);
  align-items:start;
}
.contact-info h2{font-size:1.4rem;color:var(--tinta);margin-bottom:var(--s3)}
.contact-address{font-style:normal;font-size:1.05rem;line-height:1.75;color:var(--grafite);margin-bottom:var(--s4)}
.contact-list{display:flex;flex-direction:column;gap:var(--s3);margin-bottom:var(--s4)}
.contact-list-item{display:flex;align-items:center;gap:.8rem}
.contact-list-icon{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:40px;height:40px;border-radius:50%;
  background:rgba(0,122,255,.08);color:var(--azul);
}
.contact-list-icon svg{width:19px;height:19px}
.contact-list-item a,
.contact-list-item span{font-size:.98rem;color:var(--grafite)}
.contact-list-item a{color:var(--tinta);font-weight:600}
.contact-list-item a:hover{color:var(--azul)}
.contact-social{display:flex;flex-wrap:wrap;gap:.6rem}
.contact-social a{
  font-family:var(--fm);font-weight:500;font-size:.85rem;
  color:var(--tinta);border:1.5px solid var(--linha);border-radius:var(--r-chip);
  padding:.55rem 1.15rem;transition:border-color .2s ease, color .2s ease;
}
.contact-social a:hover{border-color:var(--azul);color:var(--azul)}

/* Fachada como foto principal; a foto da sala fica por cima, deslocada
   para a esquerda e para cima, em estilo "colagem". */
.contact-photos{position:relative}
.contact-photo{border-radius:var(--r-card);overflow:hidden;box-shadow:var(--e2);background:#fff}
.contact-photo img{width:100%;height:auto;display:block}
.contact-photo--office{
  position:absolute;
  width:56%;
  left:-8%;
  bottom:14%;
  border:6px solid #fff;
  box-shadow:var(--e4);
  z-index:2;
}
@media (max-width:900px){
  .contact-grid{grid-template-columns:1fr;gap:var(--s4)}
}
@media (max-width:600px){
  .contact-photo--office{width:52%;left:-4%;bottom:10%;border-width:4px}
}