/* ============================================================
   ROYAL ADS — seções 1 a 10 (depois da dobra 2)
   ============================================================ */

:root{
  --offer-h:0px;
  --ink-2:#01031A;
  --line:rgba(232,202,152,.16);
  --muted:rgba(255,255,255,.62);
}

.wrap{width:100%;max-width:var(--max);margin:0 auto}
.wrap--narrow{max-width:calc(960px * var(--z))}

.sec{
  position:relative;z-index:10;
  padding:calc(clamp(88px,12vh,160px) * var(--z)) var(--pad);
  background:var(--navy);
  overflow:hidden;
}
/* fundo por seção, não por nth-of-type: a dobra 2 entra e sai do <main>
   conforme o modo overlay, então a paridade mudava sozinha */
.sec--ts{background:var(--navy)}
.sec--cases,.sec--map{background:var(--ink-2)}
[id]{scroll-margin-top:calc(var(--offer-h) + var(--nav-h) + 40px)}

.eyebrow{
  margin:0 0 calc(18px * var(--z));
  font-size:calc(12px * var(--z));font-weight:600;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold);
}
.sec__title{
  margin:0 0 calc(20px * var(--z));
  font-size:calc(clamp(28px,3.6vw,56px) * var(--z));
  line-height:1.04;font-weight:700;letter-spacing:-.025em;
  max-width:18ch;
}
.sec__lead{
  margin:0;
  font-size:calc(clamp(15px,1.15vw,20px) * var(--z));line-height:1.55;font-weight:300;
  color:var(--muted);max-width:56ch;
}
.sec__head{margin-bottom:calc(clamp(40px,6vh,72px) * var(--z))}
.note{
  margin:calc(clamp(28px,4vh,48px) * var(--z)) 0 0;
  font-size:calc(12px * var(--z));letter-spacing:.06em;font-style:italic;
  color:rgba(255,255,255,.3);
}

/* botão fantasma */
.btn--ghost{
  height:calc(54px * var(--z));padding:0 calc(30px * var(--z));border-radius:999px;
  border:1px solid rgba(232,202,152,.42);
  color:var(--gold);background:transparent;
  font-size:calc(13px * var(--z));font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  transition:background .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease);
}
.btn--ghost:hover{background:rgba(232,202,152,.1);border-color:var(--gold);transform:translateY(-2px)}

/* números que ainda não vieram do cliente */
[data-placeholder]{
  color:rgba(232,202,152,.45);
  -webkit-text-decoration:underline dotted rgba(232,202,152,.3);
          text-decoration:underline dotted rgba(232,202,152,.3);
  text-underline-offset:calc(6px * var(--z));
}

/* entrada padrão das seções */
[data-rv]{opacity:0;transform:translate3d(0,34px,0);transition:opacity .9s var(--ease),transform .9s var(--ease)}
[data-rv].is-in{opacity:1;transform:none}

/* ============================================================
   BARRA DE OFERTA
   ============================================================ */
.offer{
  position:fixed;top:0;left:0;right:0;z-index:90;
  display:flex;align-items:center;
  min-height:calc(46px * var(--z));padding:calc(8px * var(--z)) var(--pad);
  background:linear-gradient(90deg,var(--gold-lo),var(--gold-hi) 50%,var(--gold-lo));
  color:var(--ink);
}
.offer[hidden]{display:none}
.offer__in{
  flex:1;display:flex;align-items:center;justify-content:center;
  gap:calc(clamp(8px,1.4vw,18px) * var(--z));flex-wrap:wrap;
  font-size:calc(clamp(12px,.95vw,14px) * var(--z));font-weight:600;letter-spacing:.05em;
  text-align:center;
}
.offer__tag{
  padding:3px calc(10px * var(--z));border-radius:999px;
  background:var(--ink);color:var(--gold);
  font-size:calc(11px * var(--z));letter-spacing:.16em;text-transform:uppercase;
}
.offer__cta{text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.offer__x{
  position:absolute;right:calc(10px * var(--z));top:50%;transform:translateY(-50%);
  width:calc(34px * var(--z));height:calc(34px * var(--z));
  border:0;background:transparent;color:var(--ink);
  font-size:calc(24px * var(--z));line-height:1;cursor:pointer;opacity:.55;
}
.offer__x:hover{opacity:1}

/* o menu desce a altura da barra */
.nav{top:calc(calc(18px + var(--offer-h)) * var(--z))}

/* ============================================================
   IDIOMA
   ============================================================ */
.lang{
  display:flex;align-items:center;gap:calc(6px * var(--z));flex:0 0 auto;
  margin-left:calc(clamp(14px,2vw,30px) * var(--z));
  font-size:calc(13px * var(--z));font-weight:600;letter-spacing:.1em;
  color:rgba(255,255,255,.45);
}
.lang button{
  border:0;background:transparent;cursor:pointer;padding:calc(6px * var(--z)) 2px;
  font:inherit;color:rgba(255,255,255,.55);
  transition:color .25s var(--ease);
}
.lang button:hover{color:#fff}
.lang button.is-on{color:var(--gold)}
.lang--drawer{margin:calc(10px * var(--z)) 0 calc(4px * var(--z));justify-content:center;font-size:calc(15px * var(--z))}

/* ============================================================
   GALERIA — dobra clara com as fotos reais do time

   Fundo off-white com textura de pontos navy. Todo o texto da
   seção vira navy/ouro escuro (no branco o ouro claro some), e
   os cards seguem escuros: contrastam com o fundo e funcionam
   com qualquer retrato que entrar depois.
   ============================================================ */
.sec.sec--gallery{
  --muted:rgba(2,13,62,.62);
  background:#F4F1EA;
  color:var(--navy);
}
.sec--gallery::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    radial-gradient(rgba(2,13,62,.09) 1px,transparent 1px),
    radial-gradient(rgba(2,13,62,.05) 1px,transparent 1px);
  background-size:26px 26px,26px 26px;
  background-position:0 0,13px 13px;
}
/* leve vinheta pro branco não ficar chapado */
.sec--gallery::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 80% at 50% 0%,rgba(255,255,255,.85),transparent 60%);
}
.sec--gallery > .wrap{position:relative;z-index:2}
.sec--gallery .eyebrow{color:#96762A}
.sec--gallery .sec__title{color:var(--navy)}
.sec--gallery .note{color:rgba(2,13,62,.42)}

/* ============================================================
   2. TIMES SQUARE — vídeo de fundo com a copy por cima
   ============================================================ */
.sec--ts{padding:0;background:var(--navy)}
.tsv{
  position:relative;
  min-height:clamp(calc(460px * var(--z)),82vh,calc(920px * var(--z)));
  display:flex;align-items:flex-end;
  overflow:hidden;
}
.tsv__media{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;
  background:var(--ink);
}
/* escurece o canto onde o texto fica, sem chapar o vídeo inteiro */
.tsv__scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(0deg,rgba(0,10,22,.94) 0%,rgba(0,10,22,.55) 34%,rgba(0,10,22,0) 68%),
    linear-gradient(90deg,rgba(0,10,22,.78) 0%,rgba(0,10,22,.15) 46%,rgba(0,10,22,0) 70%);
}
.tsv__copy{
  position:relative;z-index:2;width:100%;
  padding:0 var(--pad) clamp(calc(40px * var(--z)),8vh,calc(86px * var(--z)));
}
.tsv__title{
  margin:0 0 calc(18px * var(--z));
  font-size:clamp(calc(28px * var(--z)),3.8vw,calc(60px * var(--z)));
  line-height:1.03;font-weight:700;letter-spacing:-.028em;
  max-width:17ch;
  text-shadow:0 2px 30px rgba(0,8,20,.7);
}
.tsv__copy .sec__lead{max-width:52ch;color:rgba(255,255,255,.82);text-shadow:0 2px 20px rgba(0,8,20,.7)}
.tsv__copy .btn{margin-top:clamp(calc(22px * var(--z)),3.4vh,calc(36px * var(--z)))}

@media (max-width:760px){
  .tsv{min-height:calc(clamp(420px,72vh,640px) * var(--z))}
  .tsv__scrim{
    background:linear-gradient(0deg,rgba(0,10,22,.95) 0%,rgba(0,10,22,.5) 46%,rgba(0,10,22,.1) 80%);
  }
}

/* ============================================================
   4. CASES — baralho 3D dirigido pelo scroll

   A seção é alta e o miolo é sticky: cada trecho de scroll traz
   um case da direita pro foco. O vídeo do card em foco toca,
   os outros pausam. Referência: doxaviral.com.
   ============================================================ */
.sec--cases{
  background:var(--ink-2);
  padding:0;
  height:auto; /* o JS mede pelo nº de cases */
  overflow:clip;                     /* clip, não hidden: hidden mata o sticky */
}
.sec--cases::before{
  content:"";position:absolute;inset:0;
  background-image:radial-gradient(rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:22px 22px;
  pointer-events:none;z-index:1;
}
.film__sticky{
  position:sticky;top:0;
  height:100vh;height:100svh;
  padding:0 var(--pad);
  overflow:hidden;z-index:2;
}
/* título, números, trilho e nota saem do fluxo pra o card ocupar
   a altura toda — é o que faz o card ficar grande de verdade */
.film__top,.film__rail,.sec--cases .note{position:absolute;left:var(--pad);right:var(--pad);z-index:4}
.film__top{top:calc(var(--offer-h) + var(--nav-h) + calc(clamp(14px,2.4vh,34px) * var(--z)))}
.film__rail{bottom:calc(clamp(38px,5.6vh,62px) * var(--z))}
.sec--cases .note{bottom:calc(clamp(12px,2vh,22px) * var(--z))}

/* --- topo: título + números --- */
.film__top{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:calc(clamp(20px,4vw,70px) * var(--z));pointer-events:none;
}
.film__title{
  margin:0;
  font-size:calc(clamp(24px,3.1vw,50px) * var(--z));line-height:1.03;
  font-weight:700;letter-spacing:-.03em;max-width:15ch;
}
.cases__num{color:var(--gold)}
.film__stats{display:flex;gap:calc(clamp(20px,3vw,54px) * var(--z));flex:0 0 auto;padding-top:calc(6px * var(--z))}
.film__stats b{display:block;font-size:calc(clamp(20px,2.2vw,36px) * var(--z));font-weight:700;letter-spacing:-.02em;line-height:1}
.film__stats span{display:block;margin-top:calc(5px * var(--z));font-size:calc(12px * var(--z));color:var(--muted);max-width:17ch}

/* --- miolo: painel do case + baralho --- */
.film__body{
  height:100%;
  padding:calc(var(--offer-h) + var(--nav-h) + calc(clamp(58px,8.4vh,104px) * var(--z))) 0 calc(clamp(60px,8.4vh,96px) * var(--z));
  display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,2fr);
  gap:calc(clamp(20px,3vw,56px) * var(--z));align-items:center;
}

.film__info{position:relative;z-index:3}
.film__idx{margin:0 0 calc(14px * var(--z));font-size:calc(13px * var(--z));letter-spacing:.14em;color:var(--muted)}
.film__idx b{font-size:calc(26px * var(--z));font-weight:700;color:var(--gold);letter-spacing:-.02em}
.film__idx i{font-style:normal;margin:0 calc(6px * var(--z));opacity:.5}
.film__client{margin:0 0 calc(4px * var(--z));font-size:calc(clamp(22px,2.4vw,38px) * var(--z));font-weight:700;letter-spacing:-.025em;line-height:1.05}
.film__where{margin:0 0 calc(18px * var(--z));font-size:calc(12px * var(--z));letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.film__line{margin:0;font-size:calc(clamp(14px,1.05vw,18px) * var(--z));line-height:1.55;font-weight:300;color:var(--muted);max-width:34ch}
.film__metrics{display:flex;gap:calc(clamp(16px,2vw,32px) * var(--z));margin-top:calc(clamp(18px,3vh,30px) * var(--z));flex-wrap:wrap}
.film__metrics div b{display:block;font-size:calc(clamp(18px,1.7vw,27px) * var(--z));font-weight:700;letter-spacing:-.02em}
.film__metrics div span{display:block;margin-top:2px;font-size:calc(11px * var(--z));letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.film__cta{margin-top:calc(clamp(22px,3.4vh,36px) * var(--z))}
/* troca de case: some e volta */
.film__info.is-swap .film__client,
.film__info.is-swap .film__where,
.film__info.is-swap .film__line,
.film__info.is-swap .film__metrics,
.film__info.is-swap .film__idx{opacity:0;transform:translateY(10px)}
.film__client,.film__where,.film__line,.film__metrics,.film__idx{
  transition:opacity .3s var(--ease),transform .3s var(--ease);
}

/* --- baralho em perspectiva --- */
.deck{
  position:relative;height:100%;min-height:0;
  perspective:1500px;
  perspective-origin:32% 50%;
}
.deck__3d{position:absolute;inset:0;transform-style:preserve-3d}
.cardv{
  position:absolute;left:0;top:50%;
  /* o card ocupa a altura toda do palco; a largura sai do 9:16 */
  height:100%;
  width:auto;
  aspect-ratio:9/16;
  border-radius:calc(16px * var(--z));overflow:hidden;
  background:#0A1524;
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.9);
  transform-origin:center center;
  will-change:transform,opacity,filter;
  backface-visibility:hidden;
}
.cardv__media{position:absolute;inset:0}
.cardv__media img,.cardv__media video{width:100%;height:100%;object-fit:cover;display:block}
.cardv__slot{
  position:absolute;inset:0;display:grid;place-items:center;
  background:linear-gradient(170deg,#132030,#070F1A);
}
.cardv__slot span{
  width:34%;aspect-ratio:128.432/205.492;opacity:.2;
  background:var(--gold);
  -webkit-mask:url('../assets/logo/royal-mark.svg?v=6cb72263') no-repeat center/contain;
          mask:url('../assets/logo/royal-mark.svg?v=6cb72263') no-repeat center/contain;
}
.cardv__veil{
  position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(2,10,22,.92) 0%,rgba(2,10,22,.1) 42%,transparent 70%);
}
.cardv__foot{
  position:absolute;left:calc(14px * var(--z));right:calc(14px * var(--z));bottom:calc(13px * var(--z));
  font-size:calc(12px * var(--z));line-height:1.3;
}
.cardv__foot b{display:block;font-weight:600;font-size:calc(13px * var(--z))}
.cardv__foot em{display:block;font-style:normal;margin-top:1px;font-size:calc(10px * var(--z));letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}
.cardv__nums{display:flex;gap:calc(11px * var(--z));margin-top:calc(8px * var(--z));color:rgba(255,255,255,.8);font-size:calc(11px * var(--z))}
.cardv__nums i{font-style:normal;opacity:.55;margin-right:3px}

.cardv__mute{
  position:absolute;top:calc(12px * var(--z));right:calc(12px * var(--z));z-index:4;
  width:calc(36px * var(--z));height:calc(36px * var(--z));border-radius:50%;padding:0;
  display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.26);
  background:rgba(4,14,28,.55);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  color:#fff;cursor:pointer;
  transition:background .3s var(--ease),border-color .3s var(--ease);
}
.cardv__mute:hover{background:rgba(232,202,152,.24);border-color:rgba(232,202,152,.6)}
.cardv__mute svg{width:calc(16px * var(--z));height:calc(16px * var(--z))}
/* aria-pressed="true" = som ligado: some o X */
.cardv__mute[aria-pressed="true"] svg path:last-child{display:none}
.cardv__mute[aria-pressed="true"]{border-color:rgba(232,202,152,.7);background:rgba(232,202,152,.2)}

/* --- trilho de progresso --- */
.film__rail{
  height:2px;background:rgba(255,255,255,.1);border-radius:2px;overflow:hidden;
}
.film__rail i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold-lo),var(--gold-hi))}

.sec--cases .note{margin:0;text-align:center}

/* --- celular: vira carrossel horizontal com snap --- */
@media (max-width:900px),(hover:none) and (pointer:coarse) and (max-height:560px){
  .sec--cases{height:auto!important;padding:calc(clamp(80px,11vh,130px) * var(--z)) 0 0}
  .film__sticky{position:static;height:auto;padding:0;overflow:visible}
  .film__top{flex-direction:column;gap:calc(22px * var(--z));padding:0 var(--pad)}
  .film__stats{padding-top:0;gap:calc(26px * var(--z))}
  .film__body{display:block;margin-top:calc(clamp(26px,5vh,44px) * var(--z))}
  .film__info{padding:0 var(--pad);margin-bottom:calc(26px * var(--z))}
  .deck{perspective:none;height:auto}
  .deck__3d{
    position:static;transform-style:flat;
    display:flex;gap:calc(14px * var(--z));
    overflow-x:auto;scroll-snap-type:x mandatory;
    padding:0 var(--pad) calc(18px * var(--z));
    scrollbar-width:none;
  }
  .deck__3d::-webkit-scrollbar{display:none}
  .cardv{
    position:relative;left:auto;top:auto;
    flex:0 0 min(255px,68vw);
    width:auto;transform:none!important;opacity:1!important;filter:none!important;
    scroll-snap-align:center;
  }
  .film__rail{margin:0 var(--pad)}
}

/* ============================================================
   5. METODO — pilha de "pastas" em 3D dirigida pelo scroll

   Cada passo é uma pasta. A do passo atual fica na frente; as
   próximas ficam empilhadas atrás e acima, menores, como no
   anexo 2. Rolando, uma vai passando pra frente da outra.
   ============================================================ */
.sec--method{
  padding:0;height:auto; /* o JS mede pelo nº de passos */
  overflow:clip;                  /* clip, não hidden: hidden mata o sticky */
  background:var(--navy);
}
.mstack{
  position:sticky;top:0;
  height:100vh;height:100svh;
  display:grid;
  grid-template-columns:minmax(0,.8fr) minmax(0,1.38fr);
  align-items:center;
  gap:calc(clamp(24px,3.4vw,58px) * var(--z));
  padding:calc(var(--offer-h) + var(--nav-h) + calc(clamp(6px,1.4vh,18px) * var(--z))) var(--pad) clamp(70px,21vh,250px);
  overflow:hidden;
}
.mstack__head{
  position:relative;z-index:3;
  align-self:start;                  /* o título ancora no topo da área, junto da pilha, em vez de flutuar no meio */
  padding-top:calc(clamp(16px,5vh,56px) * var(--z));
}
.mstack__title{
  margin:0 0 calc(20px * var(--z));
  font-size:calc(clamp(28px,3.4vw,54px) * var(--z));line-height:1.04;
  font-weight:700;letter-spacing:-.028em;max-width:16ch;
}
.mstack__count{margin:calc(clamp(26px,4vh,44px) * var(--z)) 0 0;font-size:calc(13px * var(--z));letter-spacing:.14em;color:var(--muted)}
.mstack__count b{font-size:calc(30px * var(--z));font-weight:700;color:var(--gold);letter-spacing:-.02em}
.mstack__count i{font-style:normal;margin:0 calc(7px * var(--z));opacity:.5}

.mstack__deck{
  position:relative;height:100%;min-height:0;
  perspective:1300px;
  perspective-origin:50% 88%;    /* fuga embaixo: a pilha "deita" pra trás */
}
.mstack__3d{
  position:absolute;inset:0;margin:0;padding:0;list-style:none;
  transform-style:preserve-3d;
}
.mstep{
  position:absolute;left:50%;top:50%;
  width:calc(min(100%,clamp(340px,46vw,780px)) * var(--z));
  min-height:calc(clamp(160px,21vh,232px) * var(--z));
  padding:calc(clamp(26px,2.6vw,40px) * var(--z)) calc(clamp(28px,2.8vw,46px) * var(--z));
  border-radius:calc(24px * var(--z));
  display:flex;flex-direction:column;justify-content:center;
  background:linear-gradient(150deg,rgba(20,38,66,.96),rgba(7,16,30,.96));
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 26px 60px -28px rgba(0,0,0,.95);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transform-origin:50% 100%;
  will-change:transform,opacity,filter;
  backface-visibility:hidden;
}
.mstep__n{
  display:block;margin-bottom:calc(10px * var(--z));
  font-size:calc(12px * var(--z));letter-spacing:.2em;color:var(--gold);
}
.mstep h3{margin:0 0 calc(10px * var(--z));font-size:calc(clamp(19px,1.95vw,32px) * var(--z));font-weight:600;line-height:1.15;letter-spacing:-.015em}
.mstep p{margin:0;font-size:calc(clamp(14px,1.15vw,19px) * var(--z));line-height:1.5;color:var(--muted)}
/* passo em foco */
.mstep.is-front{
  border-color:rgba(232,202,152,.5);
  background:linear-gradient(150deg,rgba(232,202,152,.14),rgba(9,20,36,.97));
}
.mstep.is-front h3{color:var(--gold)}
.mstep.is-front p{color:rgba(255,255,255,.82)}
/* último passo: é a entrega */
.mstep--last.is-front{border-color:var(--gold)}

.mstack__dots{
  position:absolute;left:var(--pad);bottom:calc(clamp(26px,4.4vh,48px) * var(--z));
  display:flex;gap:calc(9px * var(--z));z-index:3;
}
.mstack__dots i{
  width:calc(26px * var(--z));height:3px;border-radius:2px;
  background:rgba(255,255,255,.16);
  transition:background .35s var(--ease);
}
.mstack__dots i.is-on{background:linear-gradient(90deg,var(--gold-lo),var(--gold-hi))}

/* --- celular / reduced motion: vira lista simples --- */
@media (max-width:900px),(hover:none) and (pointer:coarse) and (max-height:560px){
  .sec--method{height:auto!important;padding:calc(clamp(80px,11vh,130px) * var(--z)) var(--pad)}
  .mstack{position:static;height:auto;display:block;padding:0;overflow:visible}
  .mstack__count{display:none}
  .mstack__deck{perspective:none;height:auto;margin-top:calc(clamp(30px,5vh,48px) * var(--z))}
  .mstack__3d{
    position:static;transform-style:flat;
    display:grid;gap:calc(12px * var(--z));
  }
  .mstep{
    position:relative;left:auto;top:auto;width:auto;
    transform:none!important;opacity:1!important;filter:none!important;
  }
  .mstack__dots{display:none}
}

/* ============================================================
   6. REVIEWS
   ============================================================ */
.sec--reviews{padding-left:0;padding-right:0}
.sec--reviews .wrap,.sec--reviews .note{padding-left:var(--pad);padding-right:var(--pad)}
.marquee{
  display:flex;gap:calc(16px * var(--z));width:max-content;
  margin-bottom:calc(16px * var(--z));
  animation:slide 62s linear infinite;
}
.marquee--rev{animation-direction:reverse;animation-duration:74s}
.sec--reviews:hover .marquee{animation-play-state:paused}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.shot{
  flex:0 0 300px;
  padding:calc(20px * var(--z));border-radius:calc(18px * var(--z));
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.07);
}
.shot__top{display:flex;align-items:center;gap:calc(10px * var(--z));margin-bottom:calc(12px * var(--z))}
.shot__av{
  width:calc(34px * var(--z));height:calc(34px * var(--z));border-radius:50%;flex:0 0 auto;
  background:linear-gradient(140deg,var(--gold-lo),var(--gold-hi));
  display:grid;place-items:center;
  color:var(--ink);font-size:calc(13px * var(--z));font-weight:700;
}
.shot__who b{display:block;font-size:calc(14px * var(--z));font-weight:600}
.shot__who span{font-size:calc(11px * var(--z));color:var(--gold);letter-spacing:.1em;text-transform:uppercase}
.shot__txt{margin:0;font-size:calc(14px * var(--z));line-height:1.5;color:rgba(255,255,255,.8)}
.shot__ph{
  margin-top:calc(14px * var(--z));height:calc(6px * var(--z));border-radius:3px;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.1) 0 40px,transparent 40px 52px);
}

/* ============================================================
   7. OBJECOES
   ============================================================ */
.faq__item{border-top:1px solid var(--line)}
.faq__item:last-child{border-bottom:1px solid var(--line)}
.faq__q{
  width:100%;display:flex;align-items:center;gap:calc(20px * var(--z));
  padding:calc(clamp(20px,2.6vh,30px) * var(--z)) 0;
  background:transparent;border:0;cursor:pointer;
  font:inherit;color:inherit;text-align:left;
  font-size:calc(clamp(16px,1.35vw,23px) * var(--z));font-weight:500;line-height:1.3;
  transition:color .3s var(--ease);
}
.faq__q:hover{color:var(--gold)}
.faq__q i{
  position:relative;
  margin-left:auto;flex:0 0 auto;
  width:calc(34px * var(--z));height:calc(34px * var(--z));border-radius:50%;
  border:1px solid rgba(232,202,152,.4);
  display:grid;place-items:center;
  transition:transform .4s var(--ease),background .3s var(--ease);
}
.faq__q i::before,.faq__q i::after{
  content:"";position:absolute;background:var(--gold);border-radius:2px;
}
.faq__q i::before{width:calc(13px * var(--z));height:calc(1.6px * var(--z))}
.faq__q i::after{width:calc(1.6px * var(--z));height:calc(13px * var(--z));transition:transform .4s var(--ease)}
.faq__item.is-open .faq__q i{background:rgba(232,202,152,.14);transform:rotate(90deg)}
.faq__item.is-open .faq__q i::after{transform:scaleY(0)}
.faq__a{overflow:hidden;height:0;transition:height .45s var(--ease)}
.faq__a p{
  margin:0;padding:0 calc(60px * var(--z)) calc(clamp(22px,3vh,32px) * var(--z)) 0;
  font-size:calc(clamp(14px,1.05vw,18px) * var(--z));line-height:1.62;font-weight:300;color:var(--muted);
}

/* ============================================================
   8. MAPA
   ============================================================ */
.sec--map{background:var(--ink-2)}
.mapsec{
  display:grid;grid-template-columns:minmax(0,
fr) minmax(0,fr);
  gap:calc(clamp(30px,4vw,70px) * var(--z));align-items:center;
  max-width:var(--max);margin:0 auto;
}
.stats{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:calc(clamp(20px,2.6vw,38px) * var(--z));
  margin-top:calc(clamp(34px,5vh,56px) * var(--z));
}
.stat em{
  display:block;font-style:normal;
  font-size:calc(12px * var(--z));letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
}
.stat b{
  display:block;margin:2px 0 calc(4px * var(--z));
  font-size:calc(clamp(30px,3.2vw,50px) * var(--z));font-weight:700;letter-spacing:-.03em;line-height:1;
}
.stat span{font-size:calc(13px * var(--z));color:rgba(255,255,255,.72)}

.usmap{position:relative}
.usmap__svg svg{width:100%;height:auto;display:block}
.usmap__land{fill:#0E1E38;stroke:none}
.usmap__borders{fill:none;stroke:rgba(232,202,152,.14);stroke-width:1;vector-effect:non-scaling-stroke}
.usmap__pins{position:absolute;inset:0}

.pin{
  position:absolute;transform:translate(-50%,-50%);
  width:calc(16px * var(--z) * var(--k,1));height:calc(16px * var(--z) * var(--k,1));padding:0;border:0;cursor:pointer;
  background:transparent;
}
.pin:hover,.pin:focus-visible{z-index:5}
.pin::before{
  content:"";position:absolute;inset:3px;border-radius:50%;
  background:linear-gradient(140deg,var(--gold-hi),var(--gold-lo));
  box-shadow:0 0 0 3px rgba(232,202,152,.18);
  transition:box-shadow .3s var(--ease),transform .3s var(--ease);
}
.pin::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  border:1.5px solid rgba(232,202,152,.55);
  animation:ping 2.6s var(--ease) infinite;
}
.pin:hover::before,.pin:focus-visible::before{transform:scale(1.35);box-shadow:0 0 0 6px rgba(232,202,152,.24)}
@keyframes ping{0%{transform:scale(.7);opacity:.9}70%,100%{transform:scale(2.4);opacity:0}}

.pin__tip{
  position:absolute;left:50%;bottom:calc(calc(100% + 12px) * var(--z));
  transform:translateX(-50%) translateY(6px);
  width:max-content;max-width:calc(230px * var(--z));
  padding:calc(12px * var(--z)) calc(15px * var(--z));border-radius:calc(14px * var(--z));
  background:rgba(4,14,28,.97);
  border:1px solid rgba(232,202,152,.3);
  box-shadow:0 20px 44px -22px #000;
  opacity:0;pointer-events:none;
  transition:opacity .28s var(--ease),transform .28s var(--ease);
  text-align:left;
}
.pin:hover .pin__tip,.pin:focus-visible .pin__tip,.pin.is-open .pin__tip{opacity:1;transform:translateX(-50%) translateY(0)}
.pin.is-open{z-index:4}
.pin.is-open::before{transform:scale(1.35);box-shadow:0 0 0 6px rgba(232,202,152,.24)}
.pin__tip b{display:block;font-size:calc(14px * var(--z));font-weight:600;margin-bottom:2px}
.pin__tip em{display:block;font-style:normal;font-size:calc(11px * var(--z));letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-bottom:calc(8px * var(--z))}
.pin__tip span{font-size:calc(13px * var(--z));color:var(--muted);line-height:1.4}

.usmap__hint{
  margin:calc(22px * var(--z)) 0 0;text-align:center;
  font-size:calc(12px * var(--z));font-style:italic;color:rgba(255,255,255,.34);
}

/* ============================================================
   9. CERTIFICACOES
   ============================================================ */
.certs__head{
  border-bottom:1px solid var(--line);
  padding-bottom:calc(22px * var(--z));margin-bottom:calc(26px * var(--z));text-align:center;
}
.certs__title{
  margin:0;font-size:calc(clamp(14px,1.2vw,18px) * var(--z));
  font-weight:600;letter-spacing:.24em;text-transform:uppercase;
}
.certs__sub{
  margin:0 0 calc(clamp(44px,6vh,72px) * var(--z));text-align:center;
  font-size:calc(clamp(15px,1.15vw,20px) * var(--z));font-weight:300;color:var(--muted);
}
.certs{display:grid;gap:calc(clamp(20px,2.6vw,36px) * var(--z))}
.cert{
  display:grid;grid-template-columns:clamp(150px,16vw,230px) 1fr;
  gap:calc(clamp(22px,3vw,50px) * var(--z));align-items:center;
  padding:calc(clamp(22px,3vw,40px) * var(--z));
  border-radius:calc(24px * var(--z));
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.07);
}
.cert__badge{
  aspect-ratio:1;border-radius:calc(20px * var(--z));
  background:#fff;color:#111;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:calc(8px * var(--z));padding:calc(18px * var(--z));text-align:center;
}
.cert__badge b{font-size:calc(clamp(14px,1.2vw,19px) * var(--z));font-weight:600;line-height:1.2}
.cert__badge em{font-style:normal;font-size:calc(10px * var(--z));letter-spacing:.2em;text-transform:uppercase;color:#777}
.cert__badge .slot{
  font-size:calc(10px * var(--z));letter-spacing:.14em;text-transform:uppercase;
  color:#aaa;border:1px dashed #ccc;border-radius:calc(8px * var(--z));padding:calc(5px * var(--z)) calc(9px * var(--z));
}
.cert__txt p{margin:0 0 calc(16px * var(--z));font-size:calc(clamp(14px,1.1vw,18px) * var(--z));line-height:1.6;font-weight:300;color:rgba(255,255,255,.84)}
.cert__txt p:last-child{margin:0}
.cert__txt strong{font-weight:600;color:#fff}

/* ============================================================
   10. CTA + FORMULARIO
   ============================================================ */
.sec--contact{
  background:
    radial-gradient(90% 70% at 15% 0%,rgba(232,202,152,.1),transparent 60%),
    var(--navy);
}
.contact{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:calc(clamp(34px,5vw,84px) * var(--z));align-items:start;
  max-width:var(--max);margin:0 auto;
}
.contact__title{
  margin:0 0 calc(20px * var(--z));
  font-size:calc(clamp(27px,3.4vw,52px) * var(--z));line-height:1.06;
  font-weight:700;letter-spacing:-.028em;max-width:16ch;
}
.ticks{margin:calc(clamp(30px,4vh,46px) * var(--z)) 0 0;padding:0;list-style:none;display:grid;gap:calc(12px * var(--z))}
.ticks li{
  position:relative;padding-left:calc(32px * var(--z));
  font-size:calc(15px * var(--z));color:rgba(255,255,255,.8);
}
.ticks li::before{
  content:"";position:absolute;left:0;top:calc(4px * var(--z));
  width:calc(18px * var(--z));height:calc(18px * var(--z));border-radius:50%;
  border:1px solid rgba(232,202,152,.5);
  background:
    linear-gradient(45deg,transparent 46%,var(--gold) 46% 56%,transparent 56%) 5px 2px/8px 8px no-repeat,
    linear-gradient(-45deg,transparent 46%,var(--gold) 46% 56%,transparent 56%) 3px 5px/10px 10px no-repeat;
}

.form{
  padding:calc(clamp(22px,2.6vw,38px) * var(--z));
  border-radius:calc(26px * var(--z));
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.09);
  display:grid;gap:calc(16px * var(--z));
}
.form__row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:calc(16px * var(--z))}
.field{display:grid;gap:calc(7px * var(--z))}
.field > span{font-size:calc(12px * var(--z));letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.field input,.field select{
  height:calc(52px * var(--z));padding:0 calc(16px * var(--z));
  border-radius:calc(13px * var(--z));
  border:1px solid rgba(255,255,255,.13);
  background:rgba(0,10,24,.5);
  color:#fff;font:inherit;font-size:calc(15px * var(--z));
  transition:border-color .25s var(--ease),background .25s var(--ease);
}
.field select{appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),linear-gradient(135deg,var(--gold) 50%,transparent 50%);
  background-position:calc(100% - 20px) 23px,calc(100% - 14px) 23px;
  background-size:6px 6px;background-repeat:no-repeat;
}
.field option{background:#061426;color:#fff}
.field input:focus,.field select:focus{outline:0;border-color:var(--gold);background:rgba(0,10,24,.8)}
.field input:user-invalid{border-color:#E06B5A}
.form__send{width:100%;margin-top:calc(6px * var(--z));height:calc(58px * var(--z))}
.form__msg{margin:0;font-size:calc(14px * var(--z));min-height:calc(20px * var(--z))}
.form__msg.is-ok{color:#7FD6A2}
.form__msg.is-err{color:#E88E7F}
.form__legal{margin:0;font-size:calc(12px * var(--z));color:rgba(255,255,255,.34);line-height:1.5}

/* ============================================================
   RODAPE
   ============================================================ */
.foot{
  position:relative;z-index:10;
  background:var(--ink);
  border-top:1px solid var(--line);
  padding:calc(clamp(48px,7vh,80px) * var(--z)) var(--pad);
}
.foot__in{
  display:grid;grid-template-columns:1fr auto 1fr;
  gap:calc(clamp(24px,4vw,60px) * var(--z));align-items:center;
}
.foot__brand{display:flex;align-items:center;gap:calc(16px * var(--z))}
.foot__brand .nav__mark{height:calc(42px * var(--z))}
.foot__slogan{margin:0;font-size:calc(14px * var(--z));letter-spacing:.04em;color:var(--gold)}
.foot__nav{display:flex;flex-wrap:wrap;gap:calc(clamp(14px,1.8vw,30px) * var(--z));justify-content:center;font-size:calc(14px * var(--z))}
.foot__nav a{color:rgba(255,255,255,.66);transition:color .25s var(--ease)}
.foot__nav a:hover{color:#fff}
.foot__side{display:flex;flex-direction:column;align-items:flex-end;gap:calc(14px * var(--z))}
.foot__legal{margin:0;font-size:calc(12px * var(--z));color:rgba(255,255,255,.3)}

/* ============================================================
   POP-UP
   ============================================================ */
.pop{
  position:fixed;inset:0;z-index:120;
  display:grid;place-items:center;
  padding:calc(20px * var(--z));
  background:rgba(2,8,18,.78);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  animation:fade .35s var(--ease);
}
.pop[hidden]{display:none}
@keyframes fade{from{opacity:0}to{opacity:1}}
.pop__box{
  position:relative;
  width:calc(min(460px,100%) * var(--z));
  padding:calc(clamp(28px,4vw,44px) * var(--z));
  border-radius:calc(26px * var(--z));
  background:linear-gradient(165deg,#0B1B31,#01021B);
  border:1px solid rgba(232,202,152,.26);
  box-shadow:0 40px 90px -40px #000;
  text-align:center;
  animation:pop .45s var(--ease);
}
@keyframes pop{from{transform:translateY(24px) scale(.97);opacity:0}to{transform:none;opacity:1}}
.pop__mark{
  display:block;height:calc(52px * var(--z));margin:0 auto calc(20px * var(--z));
  aspect-ratio:128.432/205.492;
  background:linear-gradient(162deg,#DEC18A,#F7E4C0);
  -webkit-mask:url('../assets/logo/royal-mark.svg?v=6cb72263') no-repeat center/contain;
          mask:url('../assets/logo/royal-mark.svg?v=6cb72263') no-repeat center/contain;
}
.pop__box h2{margin:0 0 calc(12px * var(--z));font-size:calc(clamp(21px,2.2vw,28px) * var(--z));line-height:1.15;font-weight:700;letter-spacing:-.02em}
.pop__box > p{margin:0 0 calc(24px * var(--z));font-size:calc(15px * var(--z));line-height:1.5;color:var(--muted)}
.pop__x{
  position:absolute;top:calc(12px * var(--z));right:calc(14px * var(--z));
  width:calc(38px * var(--z));height:calc(38px * var(--z));border:0;border-radius:50%;
  background:transparent;color:rgba(255,255,255,.5);
  font-size:calc(26px * var(--z));line-height:1;cursor:pointer;
}
.pop__x:hover{color:#fff;background:rgba(255,255,255,.07)}

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (max-width:1180px){
  .mapsec{grid-template-columns:minmax(0,1fr)}
  .contact{grid-template-columns:minmax(0,1fr)}
}

@media (max-width:980px){
  .lang{display:none}
  .lang--drawer{display:flex}
}

@media (max-width:760px){
  /* a barra não pode virar um parágrafo de três linhas em cima do menu */
  .offer{min-height:calc(40px * var(--z));padding:calc(6px * var(--z)) var(--pad)}
  .offer__in{gap:calc(8px * var(--z));flex-wrap:nowrap;font-size:calc(11.5px * var(--z));letter-spacing:.02em;justify-content:flex-start;text-align:left}
  .offer__tag{flex:0 0 auto;font-size:calc(9.5px * var(--z));padding:2px calc(7px * var(--z))}
  .offer__txt{
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
    overflow:hidden;line-height:1.25;
  }
  .offer__cta{display:none}

  .stats{gap:calc(22px * var(--z))}
  .cert{grid-template-columns:minmax(0,1fr);text-align:center}
  .cert__badge{max-width:calc(200px * var(--z));margin:0 auto}
  .form__row{grid-template-columns:minmax(0,1fr)}
  .foot__in{grid-template-columns:minmax(0,1fr);text-align:center;justify-items:center}
  .foot__side{align-items:center}
  .step::after{display:none}
}

@media (prefers-reduced-motion:reduce){
  [data-rv]{opacity:1!important;transform:none!important}
  .marquee{animation:none}
  .pin::after{animation:none}
}

/* ============================================================
   CONTEÚDO REAL — clientes, vídeo institucional, serviços,
   por que a Royal, Royal Connect, parceiros, galeria, rodapé
   ============================================================ */

/* fundos explícitos (alternância navy / ink / ink-2) */
.sec--method,.sec--about,.sec--why,.sec--reviews{background:var(--navy)}
.sec--clients,.sec--services,.sec--connect,.sec--faq,.sec--certs{background:var(--ink)}

.sr-only{
  position:absolute;width:1px;height:1px;margin:calc(-1px * var(--z));padding:0;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ---------- faixas (marquee) ---------- */
.marquee--photos{gap:calc(14px * var(--z));margin-bottom:calc(14px * var(--z))}
.photo{
  flex:0 0 auto;margin:0;
  height:calc(320px * var(--z));aspect-ratio:4/5;
  border-radius:calc(18px * var(--z));overflow:hidden;
  background:#0A1524;
  box-shadow:0 22px 44px -30px rgba(2,13,62,.7);
}
.photo img{width:100%;height:100%;object-fit:cover;display:block}
.sec--gallery .marquee{animation-duration:78s}
.sec--gallery .marquee--rev{animation-duration:92s}

.marquee--reviews{gap:calc(18px * var(--z));margin-bottom:calc(18px * var(--z));align-items:stretch}
.marquee--reviews .shot{
  flex:0 0 400px;display:flex;flex-direction:column;
  padding:calc(26px * var(--z)) calc(28px * var(--z));
}
.marquee--reviews .shot__txt{font-size:calc(15px * var(--z));line-height:1.6;color:rgba(255,255,255,.84)}
.marquee--reviews{animation-duration:96s}
.marquee--reviews.marquee--rev{animation-duration:110s}

/* ---------- clientes ---------- */
.sec--clients{padding:calc(clamp(40px,6vh,70px) * var(--z)) 0}
.clients__label{
  margin:0 0 calc(26px * var(--z));text-align:center;
  font-size:calc(12px * var(--z));font-weight:600;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(255,255,255,.5);
}
.marquee--logos{gap:calc(72px * var(--z));align-items:center;margin:0;animation-duration:44s}
.logo{flex:0 0 auto;display:flex;align-items:center;height:calc(70px * var(--z))}
.logo img{height:100%;width:auto;max-width:none;opacity:.88;transition:opacity .3s var(--ease),transform .3s var(--ease)}
.logo:hover img{opacity:1;transform:scale(1.06)}
.sec--clients:hover .marquee{animation-play-state:paused}

/* ---------- conheça a Royal: vídeo vertical em moldura de celular ---------- */
.about2{
  display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:calc(clamp(30px,5vw,90px) * var(--z));align-items:center;
  max-width:var(--max);margin:0 auto;
}
.phone{display:flex;justify-content:center}
.phone__frame{
  position:relative;
  width:calc(clamp(250px,24vw,360px) * var(--z));aspect-ratio:9/16;
  border-radius:calc(38px * var(--z));padding:calc(9px * var(--z));
  background:linear-gradient(160deg,#1a2a44,#01021B);
  border:1px solid rgba(232,202,152,.28);
  box-shadow:0 50px 90px -46px #000,0 0 0 1px rgba(255,255,255,.04) inset;
}
.phone__frame::before{
  content:"";position:absolute;top:calc(16px * var(--z));left:50%;transform:translateX(-50%);
  width:calc(84px * var(--z));height:calc(22px * var(--z));border-radius:calc(12px * var(--z));background:#02070F;z-index:4;
}
.phone__video{
  width:100%;height:100%;object-fit:cover;display:block;
  border-radius:calc(30px * var(--z));background:#02070F;cursor:pointer;
}
.phone__play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:5;
  width:calc(78px * var(--z));height:calc(78px * var(--z));border-radius:50%;padding:0;
  display:grid;place-items:center;border:0;cursor:pointer;
  background:linear-gradient(180deg,var(--gold-hi),var(--gold-lo));color:var(--ink);
  box-shadow:0 18px 40px -14px rgba(207,174,122,.8);
  transition:transform .3s var(--ease);
}
.phone__play:hover{transform:translate(-50%,-50%) scale(1.08)}
.phone__play[hidden],.phone__sound[hidden]{display:none}
.phone__play svg{width:calc(30px * var(--z));height:calc(30px * var(--z));margin-left:calc(4px * var(--z))}
.phone__sound{
  position:absolute;right:calc(20px * var(--z));bottom:calc(22px * var(--z));z-index:5;
  width:calc(40px * var(--z));height:calc(40px * var(--z));border-radius:50%;padding:0;
  display:grid;place-items:center;cursor:pointer;
  border:1px solid rgba(255,255,255,.28);background:rgba(4,14,28,.6);color:#fff;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.phone__sound svg{width:calc(17px * var(--z));height:calc(17px * var(--z))}
.phone__sound[aria-pressed="true"] svg path:last-child{display:none}

.about2__list{margin:calc(30px * var(--z)) 0 0;padding:0;list-style:none;display:grid;gap:calc(12px * var(--z))}
.about2__list li{
  position:relative;padding-left:calc(30px * var(--z));
  font-size:calc(clamp(14px,1.1vw,17px) * var(--z));line-height:1.5;color:rgba(255,255,255,.84);
}
.about2__list li::before{
  content:"";position:absolute;left:0;top:.55em;width:calc(16px * var(--z));height:2px;
  background:var(--gold);border-radius:2px;
}
.about2__stats{display:flex;gap:calc(clamp(30px,4vw,64px) * var(--z));margin-top:calc(clamp(32px,5vh,52px) * var(--z))}
.about2__stats b{
  display:block;font-size:calc(clamp(40px,4.6vw,76px) * var(--z));font-weight:700;letter-spacing:-.035em;line-height:1;
  background:linear-gradient(162deg,#DEC18A,#F7E4C0);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.about2__stats span{display:block;margin-top:calc(8px * var(--z));font-size:calc(13px * var(--z));color:var(--muted);max-width:20ch}

/* ---------- serviços ---------- */
.svc{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:calc(clamp(14px,1.6vw,24px) * var(--z));
}
.svc__card{
  position:relative;padding:calc(clamp(24px,2.2vw,34px) * var(--z));
  border-radius:calc(22px * var(--z));
  background:linear-gradient(165deg,rgba(255,255,255,.055),rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.08);
  transition:border-color .4s var(--ease),transform .4s var(--ease),background .4s var(--ease);
}
.svc__card:hover{border-color:rgba(232,202,152,.45);transform:translateY(-6px);background:rgba(232,202,152,.05)}
.svc__n{display:block;margin-bottom:calc(22px * var(--z));font-size:calc(12px * var(--z));letter-spacing:.2em;color:var(--gold)}
.svc__card h3{margin:0 0 calc(12px * var(--z));font-size:calc(clamp(18px,1.55vw,25px) * var(--z));font-weight:600;line-height:1.15;letter-spacing:-.015em}
.svc__card p{margin:0;font-size:calc(clamp(13px,.98vw,15.5px) * var(--z));line-height:1.6;color:var(--muted)}

.niches{margin-top:calc(clamp(40px,6vh,72px) * var(--z));text-align:center}
.niches__title{margin:0 0 calc(16px * var(--z));font-size:calc(clamp(16px,1.45vw,23px) * var(--z));font-weight:600;letter-spacing:-.015em}
.niches__list{
  margin:0 auto calc(clamp(22px,3.4vh,34px) * var(--z));padding:0;list-style:none;max-width:calc(980px * var(--z));
  display:flex;flex-wrap:wrap;justify-content:center;gap:calc(7px * var(--z));
}
/* chip: o mesmo na lista (desktop) e na faixa do celular */
.niches__list li,.niches__track span{
  padding:calc(7px * var(--z)) calc(14px * var(--z));border-radius:999px;white-space:nowrap;
  border:1px solid rgba(232,202,152,.3);
  font-size:calc(clamp(12px,.88vw,14px) * var(--z));line-height:1.3;color:rgba(255,255,255,.88);
  transition:background .3s var(--ease),border-color .3s var(--ease);
}
.niches__list li:hover{background:rgba(232,202,152,.1);border-color:var(--gold)}
.niches__list li.is-more,.niches__track span.is-more{border-style:dashed;color:var(--gold)}

/* duas faixas rolando em sentidos opostos, bordas esmaecidas (celular e desktop).
   A <ul> continua na página (escondida só visualmente) pra leitor de tela. */
.niches__list{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%)}
.niches__rail{
  display:grid;gap:calc(10px * var(--z));overflow:hidden;
  max-width:calc(1100px * var(--z));margin:0 auto calc(clamp(24px,3.6vh,36px) * var(--z));
  -webkit-mask:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);
          mask:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);
}
/* cada faixa tem o conteúdo 4x: a metade (2x) sempre é mais larga que a tela, e o `slide`
   (-50%) emenda sem buraco */
.niches__track{display:flex;width:max-content;animation:slide 64s linear infinite}
.niches__track--b{animation-direction:reverse;animation-duration:74s}
.niches__track span{margin-right:calc(10px * var(--z))}   /* margem, não gap: com gap a emenda dos -50% pula meio espaço */
.niches__rail:hover .niches__track{animation-play-state:paused}
@media (max-width:760px){
  .niches__rail{gap:8px;max-width:none;margin:0 calc(-1 * var(--gutter)) calc(26px * var(--z));
    -webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
            mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
  .niches__track{animation-duration:52s}
  .niches__track--b{animation-duration:60s}
  .niches__track span{font-size:12.5px;padding:6px 13px;margin-right:8px}
}
@media (prefers-reduced-motion:reduce){
  .niches__rail{display:none}
  .niches__list{position:static;width:auto;height:auto;margin:0 auto calc(26px * var(--z));overflow:visible;clip:auto;clip-path:none}
}

/* ---------- por que a Royal ---------- */
.why{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(clamp(14px,1.8vw,26px) * var(--z))}
.why__card{
  padding:calc(clamp(26px,2.6vw,42px) * var(--z));border-radius:calc(24px * var(--z));
  background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.012));
  border:1px solid rgba(255,255,255,.08);
  transition:border-color .4s var(--ease),transform .4s var(--ease);
}
.why__card:hover{border-color:rgba(232,202,152,.4);transform:translateY(-4px)}
.why__card h3{
  margin:0 0 calc(14px * var(--z));font-size:calc(clamp(19px,1.8vw,29px) * var(--z));font-weight:600;line-height:1.14;letter-spacing:-.02em;
  color:var(--gold);
}
.why__card p{margin:0;font-size:calc(clamp(14px,1.05vw,16.5px) * var(--z));line-height:1.62;color:rgba(255,255,255,.8)}

/* ---------- Royal Connect ---------- */
.connect{
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:calc(clamp(30px,5vw,84px) * var(--z));align-items:center;
  max-width:var(--max);margin:0 auto;
}
.ticks--light li{color:rgba(255,255,255,.84)}
.connect__media{position:relative;padding:0 0 calc(clamp(40px,6vw,90px) * var(--z)) 0}
.connect__crm{
  width:100%;height:auto;border-radius:calc(18px * var(--z));display:block;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 50px 90px -50px #000;
}
.connect__app{
  position:absolute;right:-2%;bottom:0;
  width:calc(clamp(120px,15vw,230px) * var(--z));height:auto;border-radius:calc(24px * var(--z));
  filter:drop-shadow(0 34px 44px rgba(0,0,0,.65));
}

/* ---------- parceiros ---------- */
.partners__label{
  margin:0 0 calc(22px * var(--z));text-align:center;
  font-size:calc(12px * var(--z));font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.5);
}
.partners{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:calc(14px * var(--z));margin:0 auto calc(clamp(44px,6vh,72px) * var(--z));max-width:calc(1100px * var(--z));
}
.partner{
  height:calc(74px * var(--z));min-width:calc(150px * var(--z));padding:0 calc(26px * var(--z));border-radius:calc(16px * var(--z));
  display:flex;align-items:center;justify-content:center;
  background:#F4F1EA;
  box-shadow:0 18px 36px -26px #000;
  transition:transform .3s var(--ease);
}
.partner--dark{background:#0B1A30;border:1px solid rgba(232,202,152,.28)}
.partner:hover{transform:translateY(-3px)}
.partner img{height:calc(34px * var(--z));width:auto;max-width:calc(130px * var(--z));object-fit:contain}

/* ---------- rodapé: contatos ---------- */
.foot__contact{margin:0 0 calc(6px * var(--z));padding:0;list-style:none;display:grid;gap:calc(6px * var(--z));text-align:right}
.foot__contact a{font-size:calc(14px * var(--z));color:rgba(255,255,255,.7);transition:color .25s var(--ease)}
.foot__contact a:hover{color:var(--gold)}

/* ---------- responsivo ---------- */
@media (max-width:1180px){
  .svc{grid-template-columns:repeat(2,minmax(0,1fr))}
  .about2,.connect{grid-template-columns:minmax(0,1fr)}
  .connect__media{padding-bottom:calc(50px * var(--z))}
}
@media (max-width:760px){
  .photo{height:calc(200px * var(--z))}
  .marquee--reviews .shot{flex-basis:calc(300px * var(--z));padding:calc(22px * var(--z))}
  .marquee--logos{gap:calc(48px * var(--z))}
  .logo{height:calc(52px * var(--z))}
  .svc,.why{grid-template-columns:minmax(0,1fr)}
  .about2__stats{flex-wrap:wrap;gap:calc(26px * var(--z))}
  .partner{height:calc(62px * var(--z));min-width:calc(128px * var(--z));padding:0 calc(18px * var(--z))}
  .partner img{height:calc(28px * var(--z))}
  .foot__contact{text-align:center}
}
@media (prefers-reduced-motion:reduce){
  .marquee--logos,.marquee--photos,.marquee--reviews{animation:none}
}

/* ============================================================
   FAIXAS CRUZADAS (referência: assessorialpha.com/00-lp)
   Duas fitas inclinadas em sentidos opostos, cruzando em X na
   virada entre duas seções. Uma clara (ouro), uma escura.
   ============================================================ */
.bands{
  position:relative;z-index:30;
  height:calc(190px * var(--z));margin:calc(-95px * var(--z)) 0;
  overflow-x:clip;overflow-y:visible;
  pointer-events:none;
}
.band{
  position:absolute;left:-8%;top:50%;
  width:116%;height:calc(68px * var(--z));margin-top:calc(-34px * var(--z));
  display:flex;align-items:center;overflow:hidden;
  transform:rotate(var(--r,-2.4deg));
  box-shadow:0 24px 44px -22px rgba(0,8,20,.75);
}
.band--gold{
  --r:-2.6deg;
  background:linear-gradient(90deg,#DCC096,#FFEDCD 50%,#DCC096);
  color:var(--ink);
}
.band--ink{
  --r:2.6deg;
  background:#01021B;
  border-top:1px solid rgba(232,202,152,.5);border-bottom:1px solid rgba(232,202,152,.5);
  color:var(--gold);
}
/* a escura vai por cima, como no X da referência */
.band--ink{z-index:2}

.band__track{
  display:flex;align-items:center;flex:0 0 auto;width:max-content;
  animation:slide 70s linear infinite;
  will-change:transform;
}
.band--ink .band__track{animation-direction:reverse;animation-duration:84s}
.band__item{
  flex:0 0 auto;padding:0 calc(26px * var(--z));white-space:nowrap;
  font-size:calc(15px * var(--z));font-weight:700;letter-spacing:.16em;text-transform:uppercase;
}
.band__sep{
  flex:0 0 auto;display:block;width:calc(15px * var(--z));height:calc(24px * var(--z));
  background:currentColor;opacity:.85;
  -webkit-mask:url('../assets/logo/royal-mark.svg?v=6cb72263') no-repeat center/contain;
          mask:url('../assets/logo/royal-mark.svg?v=6cb72263') no-repeat center/contain;
}

/* a pausa no hover não faz sentido: a faixa é decorativa */
@media (max-width:760px){
  .bands{height:calc(150px * var(--z));margin:calc(-75px * var(--z)) 0}
  .band{height:calc(52px * var(--z));margin-top:calc(-26px * var(--z))}
  .band__item{font-size:calc(12px * var(--z));padding:0 calc(18px * var(--z))}
  .band__sep{width:calc(12px * var(--z));height:calc(19px * var(--z))}
}
@media (prefers-reduced-motion:reduce){
  .band__track{animation:none}
}

/* ============================================================
   A MARCA — logo da Royal em 3D
   ============================================================ */
.sec--logo3d{
  padding-top:calc(120px * var(--z));
  background:
    radial-gradient(60% 70% at 72% 50%,rgba(220,192,150,.16),transparent 70%),
    radial-gradient(90% 60% at 10% 100%,rgba(93,113,137,.22),transparent 60%),
    var(--navy);
  overflow:hidden;
}
.l3d{
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:calc(clamp(20px,3vw,50px) * var(--z));align-items:center;
  max-width:var(--max);margin:0 auto;
  min-height:calc(clamp(560px,78vh,820px) * var(--z));
}
.l3d__title{
  margin:0 0 calc(22px * var(--z));
  font-size:calc(clamp(40px,5.6vw,92px) * var(--z));line-height:.98;font-weight:700;letter-spacing:-.035em;
}
.l3d__title span{display:block}
.l3d__title em{
  display:block;font-style:normal;padding-bottom:.14em;margin-bottom:-.14em;
  background:linear-gradient(100deg,#DCC096,#FFEDCD);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.l3d__copy .btn{margin-top:calc(clamp(24px,3.6vh,38px) * var(--z))}
.l3d__hint{margin:calc(22px * var(--z)) 0 0;font-size:calc(12px * var(--z));letter-spacing:.06em;font-style:italic;color:rgba(255,255,255,.34)}

.logo3d{
  position:relative;
  height:calc(clamp(420px,72vh,760px) * var(--z));
  cursor:grab;
  touch-action:pan-y;           /* deixa a página rolar no toque */
}
.logo3d:active{cursor:grabbing}
.logo3d canvas{display:block;width:100%;height:100%;
  opacity:0;transition:opacity .9s var(--ease)}
.logo3d.is-ready canvas{opacity:1}

/* sem WebGL (ou enquanto o bundle carrega): a coroa chapada, no mesmo gradiente do SVG */
.logo3d__fallback{
  position:absolute;left:50%;top:50%;
  height:68%;aspect-ratio:421/674;
  transform:translate(-50%,-50%);
  background:linear-gradient(135deg,#DCC096,#FFEDCD);
  -webkit-mask:url('../assets/logo/royal-3d.svg?v=ddecf89e') no-repeat center/contain;
          mask:url('../assets/logo/royal-3d.svg?v=ddecf89e') no-repeat center/contain;
  opacity:.9;
}
.logo3d__fallback[hidden]{display:none}

@media (max-width:980px){
  .l3d{grid-template-columns:minmax(0,1fr);gap:0;min-height:0}
  .logo3d{height:calc(clamp(360px,56vh,520px) * var(--z));order:-1;margin-bottom:calc(10px * var(--z))}
  .l3d__hint{display:none}
}

/* ============================================================
   TEMAS DE SEÇÃO — ritmo escuro / branco / dourado
   .theme-light  = off-white com textura (como a Equipe)
   (o tema dourado foi aposentado: ouro agora só aparece em detalhes)
   Cada tema troca as variáveis de texto e reestiliza só os
   componentes que ficam sobre o fundo claro. Cartões que
   continuam escuros redefinem --muted pra não ficarem navy
   sobre navy.
   ============================================================ */

.sec.theme-light{
  --muted:rgba(2,13,62,.66);
  --line:rgba(2,13,62,.16);
  color:var(--navy);
}
.theme-light > *,
.theme-light > *{position:relative;z-index:2}

/* ---------- BRANCO ---------- */
.sec.theme-light{background:#F4F1EA}
.theme-light::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:
    radial-gradient(rgba(2,13,62,.09) 1px,transparent 1px),
    radial-gradient(rgba(2,13,62,.05) 1px,transparent 1px);
  background-size:26px 26px,26px 26px;
  background-position:0 0,13px 13px;
}
.theme-light::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(120% 80% at 50% 0%,rgba(255,255,255,.85),transparent 60%);
}


/* ---------- tipografia sobre claro ---------- */
.theme-light .eyebrow{color:#96762A}
.theme-light .sec__title,.theme-light .sec__title,
.theme-light .contact__title,.theme-light .contact__title{color:var(--navy)}
.theme-light .note,.theme-light .note{color:rgba(2,13,62,.42)}


/* check-lists */
.theme-light .ticks li,.theme-light .ticks li{color:rgba(2,13,62,.84)}
.theme-light .ticks li::before,.theme-light .ticks li::before{
  border-color:rgba(2,13,62,.5);
  background:
    linear-gradient(45deg,transparent 46%,var(--navy) 46% 56%,transparent 56%) 5px 2px/8px 8px no-repeat,
    linear-gradient(-45deg,transparent 46%,var(--navy) 46% 56%,transparent 56%) 3px 5px/10px 10px no-repeat;
}

/* ====== Conheça a Royal (branco) ====== */
.theme-light .about2__list li{color:rgba(2,13,62,.84)}
.theme-light .about2__list li::before{background:#B8923F}
.theme-light .about2__stats b{background:linear-gradient(162deg,#A67F2E,#DCC096);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ====== Por que a Royal (branco) ====== */
.theme-light .why__card{
  background:#fff;border:1px solid rgba(2,13,62,.1);
  box-shadow:0 26px 50px -36px rgba(2,13,62,.6);
}
.theme-light .why__card:hover{border-color:rgba(184,146,63,.7)}
.theme-light .why__card h3{color:#96762A}
.theme-light .why__card p{color:rgba(2,13,62,.78)}

/* ====== Royal Connect (branco) ====== */
.theme-light .connect__crm{border-color:rgba(2,13,62,.14);box-shadow:0 44px 80px -44px rgba(2,13,62,.6)}
.theme-light .connect__app{filter:drop-shadow(0 30px 38px rgba(2,13,62,.4))}

/* ====== FAQ (branco) ====== */
.theme-light .faq__q:hover{color:#96762A}
.theme-light .faq__q i{border-color:rgba(150,118,42,.55)}
.theme-light .faq__q i::before,.theme-light .faq__q i::after{background:#96762A}
.theme-light .faq__item.is-open .faq__q i{background:rgba(150,118,42,.14)}

/* ====== Serviços (dourado) ====== */
.theme-light .svc__card{
  --muted:rgba(255,255,255,.7);
  background:linear-gradient(165deg,#0C1D35,#020D3E 70%);
  border:1px solid rgba(2,13,62,.5);color:#fff;
  box-shadow:0 30px 56px -34px rgba(2,13,62,.85);
}
.theme-light .svc__card:hover{background:linear-gradient(165deg,#10264a,#020D3E 70%);border-color:var(--gold-hi)}
.theme-light .svc__n{color:var(--gold)}
.theme-light .niches__title{color:var(--navy)}
.theme-light .niches__list li,.theme-light .niches__track span{border-color:rgba(2,13,62,.3);color:var(--navy)}
.theme-light .niches__list li:hover{background:var(--navy);border-color:var(--navy);color:var(--gold)}
.theme-light .niches__list li.is-more,.theme-light .niches__track span.is-more{border-style:dashed;color:rgba(2,13,62,.7)}

/* ====== Depoimentos (dourado) ====== */
.theme-light .shot{
  --muted:rgba(255,255,255,.7);
  background:linear-gradient(165deg,#0C1D35,#020D3E);
  border:1px solid rgba(2,13,62,.5);color:#fff;
  box-shadow:0 28px 50px -34px rgba(2,13,62,.85);
}
.theme-light .marquee--reviews .shot__txt{color:rgba(255,255,255,.86)}
.theme-light .shot__who span{color:var(--gold)}

/* ====== Formulário final (dourado) ====== */
.theme-light .contact__copy .sec__lead{color:rgba(2,13,62,.78)}
.theme-light .form{
  --muted:rgba(255,255,255,.62);
  background:linear-gradient(165deg,#0C1D35,#020D3E);
  border:1px solid rgba(2,13,62,.5);color:#fff;
  box-shadow:0 44px 80px -40px rgba(2,13,62,.85);
}
.theme-light .form__legal{color:rgba(255,255,255,.4)}
.theme-light .form__msg.is-ok{color:#7FD6A2}
.theme-light .form__msg.is-err{color:#E88E7F}

/* ---- formulários: a coluna implícita do grid era `auto` e crescia até a largura
   natural do <input> (368px), estourando o cartão no celular ---- */
.form{grid-template-columns:minmax(0,1fr)}
.field{min-width:0}
.field input,.field select{width:100%;min-width:0;box-sizing:border-box}

/* ---- dicas dos pinos do mapa: perto das bordas, ancoram pelo lado de dentro ---- */
.pin__tip{max-width:calc(min(230px,64vw) * var(--z))}
.pin--r .pin__tip{left:auto;right:calc(-10px * var(--z));transform:translateY(6px)}
.pin--r:hover .pin__tip,.pin--r:focus-visible .pin__tip,.pin--r.is-open .pin__tip{transform:translateY(0)}
.pin--l .pin__tip{left:calc(-10px * var(--z));transform:translateY(6px)}
.pin--l:hover .pin__tip,.pin--l:focus-visible .pin__tip,.pin--l.is-open .pin__tip{transform:translateY(0)}

/* ============================================================
   BRANCO COM OURO EM DETALHES
   ============================================================ */

/* variante de branco puro, pra alternar com o off-white quando duas
   seções claras ficam lado a lado */
.sec.theme-light.is-white{background:#fff}
.theme-light.is-white::before{
  background-image:radial-gradient(rgba(2,13,62,.06) 1px,transparent 1px);
  background-size:30px 30px;
}
.theme-light.is-white::after{
  background:
    radial-gradient(55% 45% at 100% 0%,rgba(220,192,150,.20),transparent 70%),
    radial-gradient(45% 40% at 0% 100%,rgba(220,192,150,.12),transparent 70%);
}

/* filete dourado entre duas seções claras vizinhas */
.theme-light + .theme-light{border-top:1px solid rgba(184,146,63,.3)}

/* o ouro entra nos detalhes: traço antes do eyebrow e barra sob o título */
.theme-light .eyebrow,
.sec--gallery .eyebrow{display:flex;align-items:center;gap:calc(14px * var(--z))}
.theme-light .eyebrow::before,
.sec--gallery .eyebrow::before{
  content:"";flex:0 0 auto;width:calc(30px * var(--z));height:2px;border-radius:2px;
  background:linear-gradient(90deg,#B8923F,#EAD3A0);
}
.theme-light .sec__title::after,
.theme-light .contact__title::after,
.sec--gallery .sec__title::after{
  content:"";display:block;width:calc(64px * var(--z));height:3px;margin-top:calc(22px * var(--z));border-radius:3px;
  background:linear-gradient(90deg,#B8923F,#F1DDB0);
  box-shadow:0 0 18px rgba(220,192,150,.55);
}

/* ============================================================
   EFEITOS DE BRILHO — só no hero e na seção do logo 3D (#marca)
   Camadas z-index:-1 dentro de um stacking context (isolation):
   ficam sobre o fundo da seção e sob o conteúdo, sem precisar
   posicionar os filhos — o que quebraria o position:sticky.
   ============================================================ */
.fx{isolation:isolate}
.fx__glow,.fx__dust{
  display:block;                       /* <span>: sticky não blocifica, e a altura seria ignorada */
  position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;
}

/* auroras: dois halos grandes, um dourado e um azul-aço, à deriva.
   Só `transform` anima (compositor): sem blur() e sem repaint. */
.fx__glow::before,.fx__glow::after{
  content:"";position:absolute;width:78vmax;height:78vmax;border-radius:50%;
  will-change:transform;
}
.fx__glow::before{
  left:-22vmax;top:-30vmax;
  background:radial-gradient(closest-side,rgba(220,192,150,.40),rgba(220,192,150,.13) 52%,transparent 72%);
  animation:fxDriftA 24s ease-in-out infinite alternate;
}
.fx__glow::after{
  right:-28vmax;bottom:-34vmax;
  background:radial-gradient(closest-side,rgba(96,132,190,.46),rgba(96,132,190,.14) 52%,transparent 72%);
  animation:fxDriftB 30s ease-in-out infinite alternate;
}
@keyframes fxDriftA{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(14vmax,10vmax,0) scale(1.18)}}
@keyframes fxDriftB{from{transform:translate3d(0,0,0) scale(1.1)}to{transform:translate3d(-12vmax,-8vmax,0) scale(.92)}}

/* pó dourado: pontos que acendem, sobem e apagam */
.fx__dust i{
  position:absolute;left:var(--x);top:var(--y);
  width:var(--s);height:var(--s);border-radius:50%;
  background:#FFEDCD;
  box-shadow:0 0 calc(var(--s) * 5) calc(var(--s) * 1.2) rgba(240,220,165,.95);
  opacity:0;
  animation:fxTwinkle var(--t) ease-in-out var(--d) infinite;
}
@keyframes fxTwinkle{
  0%,100%{opacity:0;transform:translate3d(0,6px,0) scale(.5)}
  45%{opacity:1;transform:translate3d(0,-14px,0) scale(1.15)}
  70%{opacity:.5;transform:translate3d(0,-26px,0) scale(.8)}
}
/* fora da tela: pausa tudo */
.fx--off .fx__glow::before,.fx--off .fx__glow::after,.fx--off .fx__dust i{animation-play-state:paused}

/* o logo 3D e o rodapé ganham um halo dourado mais forte */
.sec--logo3d .fx__glow::before{background:radial-gradient(closest-side,rgba(220,192,150,.52),rgba(220,192,150,.16) 52%,transparent 72%)}

/* ---------- texto dourado que cintila ---------- */
.l3d__title em{
  background:linear-gradient(100deg,#B8923F 0%,#FFEDCD 25%,#DCC096 50%,#FFEDCD 75%,#B8923F 100%);
  background-size:250% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:textShimmer 6s linear infinite;
}
@keyframes textShimmer{from{background-position:0% 0}to{background-position:-250% 0}}

@media (prefers-reduced-motion:reduce){
  .fx__glow::before,.fx__glow::after,.fx__dust i,
  .l3d__title em{animation:none}
  .fx__dust i{opacity:.55}
}
@media (max-width:760px){
  .fx__glow::before,.fx__glow::after{width:110vmax;height:110vmax}
}



/* ============================================================
   HERO — coroa 3D entre as bandeiras (Brasil à esquerda, EUA à direita)
   Composição da referência (objeto 3D grande, painel de vidro, título em caixa alta POR
   CIMA da cena, subtítulo, dois botões, logos no pé) no navy do site: 1ª linha do título
   em dourado com brilho, o resto em branco e dourado.
   O hero antigo (vídeo rolando) está em legacy/hero-video.html.
   ============================================================ */
.hero2{
  --h2-ink:#fff;
  position:relative;isolation:isolate;overflow:hidden;
  min-height:100svh;
  display:flex;flex-direction:column;align-items:center;
  padding:calc(var(--offer-h) + var(--nav-h) + calc(clamp(18px,3.4vh,46px) * var(--z))) var(--pad) 0;
  color:var(--h2-ink);
  text-transform:uppercase;
  background:
    radial-gradient(40% 32% at 6% 0%,rgba(70,110,190,.34),transparent 72%),
    radial-gradient(38% 30% at 96% 0%,rgba(70,110,190,.3),transparent 72%),
    radial-gradient(70% 26% at 50% 104%,rgba(40,90,190,.5),rgba(20,60,140,.22) 45%,transparent 75%),
    var(--navy);
}
/* halo dourado atrás da coroa + pontos sutis */
.hero2__bg{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(36% 30% at 50% 42%,rgba(220,192,150,.2),transparent 72%),
    radial-gradient(rgba(255,255,255,.12) 1px,transparent 1.5px) 0 0/calc(28px * var(--z)) calc(28px * var(--z));
  -webkit-mask:radial-gradient(75% 65% at 50% 45%,#000,transparent 80%);
          mask:radial-gradient(75% 65% at 50% 45%,#000,transparent 80%);
}
.hero2__in{
  position:relative;z-index:1;width:100%;max-width:calc(1240px * var(--z));margin:0 auto;
  display:flex;flex-direction:column;align-items:center;text-align:center;
}

.hero2__chip{
  display:inline-flex;align-items:center;gap:calc(10px * var(--z));
  margin:0 0 calc(clamp(6px,1.4vh,16px) * var(--z));
  padding:calc(9px * var(--z)) calc(20px * var(--z));border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(232,202,152,.34);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  font-size:calc(11px * var(--z));font-weight:600;letter-spacing:.16em;color:rgba(255,255,255,.88);
}
.hero2__dot{
  flex:0 0 auto;width:calc(7px * var(--z));height:calc(7px * var(--z));border-radius:50%;
  background:var(--gold);box-shadow:0 0 0 calc(4px * var(--z)) rgba(232,202,152,.2),0 0 12px rgba(232,202,152,.8);
}

/* palco: painel de vidro atrás; a coroa e as bandeiras saltam pra fora dele */
.hero2__stage{position:relative;width:100%}
.hero2__panel{
  position:absolute;left:0;right:0;top:20%;bottom:0;
  border-radius:calc(48px * var(--z));
  border:1px solid rgba(232,202,152,.2);
  background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.015));
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  box-shadow:0 40px 90px -50px #000,inset 0 1px 0 rgba(255,255,255,.14);
  -webkit-mask:linear-gradient(180deg,#000 50%,transparent 96%);
          mask:linear-gradient(180deg,#000 50%,transparent 96%);
}
.hero2__scene{
  position:relative;z-index:1;
  height:clamp(360px,62vh,720px);
  cursor:default;
  /* a base da coroa some no fundo (máscara, e não uma camada por cima: sem linha dura) */
  -webkit-mask:linear-gradient(180deg,#000 58%,transparent 94%);
          mask:linear-gradient(180deg,#000 58%,transparent 94%);
}
.hero2__fog{display:none}
.hero2__flat{
  position:absolute;top:24%;width:19%;height:auto;
  border-radius:calc(8px * var(--z));box-shadow:0 20px 40px -20px #000;
}
.hero2__flat[hidden]{display:none}

.hero2__flat--br{right:calc(50% + 11%)}
.hero2__flat--us{left:calc(50% + 11%)}

/* título: duas linhas em caixa alta por cima da cena; 1ª dourada com brilho, 2ª branca */
.hero2__title{
  position:relative;z-index:3;
  margin:calc(-1 * clamp(110px,21vh,250px)) 0 0;
  /* cresce com a tela, mas nunca passa da largura da coluna (1240px * z): a linha mais longa
     tem ~18 caracteres (~10,5em). Sem isso, acima de ~1500px o título quebrava em 4 linhas. */
  font-size:min(calc(clamp(28px,7.1vw,128px) * var(--z)),calc(1240px * var(--z) / 11.2));
  line-height:.92;font-weight:700;letter-spacing:-.035em;
  white-space:nowrap;
}
.hero2__title span,
.hero2__title em{
  display:block;font-style:normal;
  padding:0 .04em .1em;margin-bottom:-.1em;
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero2__title span{
  filter:drop-shadow(0 0 20px rgba(232,200,130,.45)) drop-shadow(0 8px 26px rgba(0,0,0,.45));
}
.hero2__title em{
  background-image:linear-gradient(180deg,#FFFFFF 0%,#FFFFFF 55%,#D9E2F0 100%);
  filter:drop-shadow(0 0 18px rgba(255,255,255,.18)) drop-shadow(0 8px 26px rgba(0,0,0,.5));
}
/* degradê escuro atrás do título: separa o texto da base da coroa e das bandeiras */
.hero2__title::before{
  content:'';position:absolute;z-index:-1;pointer-events:none;
  left:-14%;right:-14%;top:-38%;bottom:-30%;
  background:radial-gradient(closest-side,rgba(2,13,62,.96) 0%,rgba(2,13,62,.88) 42%,rgba(2,13,62,.55) 70%,rgba(2,13,62,0) 100%);
}
/* brilho que passa pela primeira linha */
@keyframes hero2Sheen{0%,62%{background-position:120% 0}100%{background-position:-120% 0}}
.hero2__title span{
  background-image:
    linear-gradient(100deg,transparent 40%,rgba(255,250,235,.95) 50%,transparent 60%),
    linear-gradient(92deg,#C9A35A 0%,#F5E6BE 34%,#FFEDCD 50%,#E8CA98 68%,#DCC096 100%);
  background-size:250% 100%,100% 100%;
  background-repeat:no-repeat;
  animation:hero2In .9s var(--ease) .08s both,hero2Sheen 6s ease-in-out 1.6s infinite;
}

.hero2__lead{
  position:relative;z-index:3;max-width:calc(720px * var(--z));
  margin:calc(clamp(16px,2.6vh,30px) * var(--z)) 0 0;
  font-size:calc(clamp(12px,1.05vw,15px) * var(--z));line-height:1.65;font-weight:500;letter-spacing:.07em;
  color:rgba(255,255,255,.74);
}
.hero2__cta{
  position:relative;z-index:3;display:flex;flex-wrap:wrap;justify-content:center;
  gap:calc(12px * var(--z));margin-top:calc(clamp(16px,2.8vh,30px) * var(--z));
}
.hero2 .btn svg{width:calc(18px * var(--z));height:calc(18px * var(--z));transition:transform .3s var(--ease)}
.hero2 .btn:hover svg{transform:translateX(3px)}
/* botão de vidro (o segundo do hero) */
.btn--glass{
  height:calc(54px * var(--z));padding:0 calc(30px * var(--z));border-radius:999px;
  border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.07);color:#fff;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  font-size:calc(13px * var(--z));font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  transition:background .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease);
}
.btn--glass:hover{background:rgba(255,255,255,.14);border-color:rgba(232,202,152,.7);transform:translateY(-2px)}

/* logos brancos no pé do hero */
.hero2__logos{
  position:relative;z-index:1;width:100%;max-width:calc(1240px * var(--z));
  margin:auto auto 0;
  padding:calc(clamp(30px,6vh,72px) * var(--z)) 0 calc(clamp(22px,4vh,44px) * var(--z));
  display:flex;flex-direction:column;align-items:center;gap:calc(14px * var(--z));
}
.hero2__label{
  margin:0;font-size:calc(11px * var(--z));font-weight:600;letter-spacing:.26em;color:rgba(232,202,152,.75);
}
.hero2__row{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:calc(clamp(20px,4vw,64px) * var(--z));
}
.hero2 .partner{
  height:auto;min-width:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;
}
.hero2 .partner:hover{transform:none}
.hero2 .partner img{
  height:calc(28px * var(--z));max-width:calc(130px * var(--z));
  filter:brightness(0) invert(1);opacity:.88;
}

/* entrada */
@keyframes hero2In{from{opacity:0;transform:translate3d(0,calc(22px * var(--z)),0)}to{opacity:1;transform:none}}
.hero2__chip,.hero2__stage,.hero2__title em,.hero2__lead,.hero2__cta,.hero2__logos{animation:hero2In .9s var(--ease) both}
.hero2__stage{animation-delay:.16s}
.hero2__title em{animation-delay:.14s}
.hero2__lead{animation-delay:.3s}
.hero2__cta{animation-delay:.4s}
.hero2__logos{animation-delay:.5s}

@media (max-width:760px){
  .hero2__scene{height:min(104vw,420px)}
  .hero2__panel{top:24%;border-radius:calc(30px * var(--z))}
  .hero2__title{font-size:8vw;margin-top:calc(-1 * min(30vw,120px))}
  .hero2__flat{width:24%;top:26%}
  .hero2__chip{font-size:calc(9.5px * var(--z));letter-spacing:.1em;padding:calc(8px * var(--z)) calc(14px * var(--z));text-align:left}
  .hero2__cta .btn{flex:1 1 100%}
  .hero2 .partner img{height:calc(22px * var(--z));max-width:calc(96px * var(--z))}
}
@media (prefers-reduced-motion:reduce){
  .hero2__chip,.hero2__stage,.hero2__title span,.hero2__title em,.hero2__lead,.hero2__cta,.hero2__logos{animation:none}
}

/* ---------- iluminação do hero ---------- */
/* feixes de luz vindos de cima, como refletores de palco: balançam devagar.
   Só transform anima; o blur é estático (rasteriza uma vez). */
.hero2__lights{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.hero2__beam{
  position:absolute;top:-12%;left:50%;
  width:calc(clamp(260px,30vw,520px) * var(--z));height:96%;
  margin-left:calc(clamp(260px,30vw,520px) * var(--z) / -2);
  transform-origin:50% 0;
  background:linear-gradient(180deg,rgba(255,237,205,.34) 0%,rgba(232,202,152,.12) 42%,rgba(232,202,152,0) 82%);
  clip-path:polygon(43% 0,57% 0,100% 100%,0 100%);
  filter:blur(16px);mix-blend-mode:screen;
  animation:hero2Beam 10s ease-in-out infinite alternate;
  will-change:transform;
}
.hero2__beam--l{--r:-26deg;left:22%;animation-duration:12s}
.hero2__beam--r{--r:26deg;left:78%;animation-duration:13s;animation-delay:-4s;
  background:linear-gradient(180deg,rgba(190,214,255,.3) 0%,rgba(120,160,230,.1) 42%,rgba(120,160,230,0) 82%)}
.hero2__beam--c{--r:0deg;width:calc(clamp(300px,36vw,640px) * var(--z));margin-left:calc(clamp(300px,36vw,640px) * var(--z) / -2);
  height:78%;opacity:.85;animation:hero2Pulse 7s ease-in-out infinite}
@keyframes hero2Beam{from{transform:rotate(calc(var(--r) - 5deg))}to{transform:rotate(calc(var(--r) + 5deg))}}
@keyframes hero2Pulse{0%,100%{opacity:.55;transform:scaleX(.92)}50%{opacity:.95;transform:scaleX(1.06)}}

/* no hero as auroras ficam mais contidas, o pó dourado continua */
.hero2 .fx__glow::before{background:radial-gradient(closest-side,rgba(220,192,150,.3),rgba(220,192,150,.08) 52%,transparent 72%)}
.hero2 .fx__glow::after{background:radial-gradient(closest-side,rgba(96,132,190,.36),rgba(96,132,190,.1) 52%,transparent 72%)}

/* borda de cima do painel de vidro acesa, com uma luz que corre por ela */
.hero2__panel::before,.hero2__panel::after{content:"";position:absolute;top:-1px;height:1px;pointer-events:none}
.hero2__panel::before{
  left:6%;right:6%;
  background:linear-gradient(90deg,transparent,rgba(245,230,190,.75) 30%,rgba(255,244,214,1) 50%,rgba(245,230,190,.75) 70%,transparent);
  box-shadow:0 0 14px 1px rgba(232,202,152,.45);
}
.hero2__panel::after{
  left:0;width:22%;height:2px;top:-1.5px;
  background:linear-gradient(90deg,transparent,#FFF7E2,transparent);
  box-shadow:0 0 18px 3px rgba(255,237,205,.7);
  animation:hero2Edge 7s ease-in-out 1.2s infinite;
}
@keyframes hero2Edge{0%{transform:translateX(-30%);opacity:0}12%{opacity:1}55%{opacity:1}70%,100%{transform:translateX(480%);opacity:0}}

/* horizonte de luz acima dos logos */
.hero2__logos::before,.hero2__logos::after{content:"";position:absolute;left:50%;pointer-events:none;transform:translateX(-50%)}
.hero2__logos::before{
  top:0;width:min(78%,calc(900px * var(--z)));height:1px;
  background:linear-gradient(90deg,transparent,rgba(232,202,152,.7) 30%,#FFEDCD 50%,rgba(232,202,152,.7) 70%,transparent);
  box-shadow:0 0 16px 1px rgba(232,202,152,.4);
}
.hero2__logos::after{
  top:0;width:min(60%,calc(700px * var(--z)));height:calc(90px * var(--z));z-index:-1;
  background:radial-gradient(50% 100% at 50% 0,rgba(232,202,152,.16),transparent 70%);
}

@media (max-width:760px){
  .hero2__beam--l{left:10%}
  .hero2__beam--r{left:90%}
}
@media (prefers-reduced-motion:reduce){
  .hero2__beam,.hero2__panel::after{animation:none}
}

/* ============================================================
   BOTÕES — efeitos (vale pro site todo)
   - dourado: gradiente que desliza no hover, reflexo no topo, brilho que atravessa
     a cada 5 s, anel de luz no hover e "aperto" no clique
   - vidro e contorno: luz dourada que corre pela borda no hover
   - todos: uma luz que segue o ponteiro (sections.js grava --mx/--my)
   ============================================================ */
.btn{position:relative;isolation:isolate;overflow:hidden;-webkit-tap-highlight-color:transparent}
.btn > *{position:relative;z-index:1}
.btn::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
  background:radial-gradient(circle calc(110px * var(--z)) at var(--mx,50%) var(--my,50%),rgba(255,255,255,.7),rgba(255,255,255,0) 70%);
  mix-blend-mode:overlay;opacity:0;transition:opacity .35s var(--ease);
}
.btn:hover::before{opacity:1}

.btn--gold{
  background:
    linear-gradient(180deg,rgba(255,255,255,.4) 0%,rgba(255,255,255,0) 52%),
    linear-gradient(110deg,#CFAE7A 0%,#F5E6BE 26%,#E8CA98 50%,#FFF0C9 74%,#CFAE7A 100%);
  background-size:100% 100%,230% 100%;
  background-position:0 0,0% 0;
  border:1px solid rgba(255,244,214,.75);
  box-shadow:0 10px 28px -12px rgba(207,174,122,.75),0 0 0 0 rgba(232,202,152,0),inset 0 -3px 8px rgba(150,110,35,.22);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),background-position .9s var(--ease),filter .35s var(--ease);
}
.btn--gold:hover{
  transform:translateY(-2px);filter:none;
  background-position:0 0,100% 0;
  box-shadow:0 18px 40px -12px rgba(207,174,122,.95),0 0 0 5px rgba(232,202,152,.16),0 0 38px rgba(245,230,190,.42),inset 0 -3px 8px rgba(150,110,35,.22);
}
.btn--gold:active{transform:translateY(0) scale(.97);transition-duration:.12s}
.btn--gold::after{
  content:"";position:absolute;top:-10%;left:-70%;width:36%;height:120%;z-index:0;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.8),transparent);
  transform:skewX(-20deg);pointer-events:none;
  animation:btnShine 5s ease-in-out infinite;
}
@keyframes btnShine{0%,62%{left:-70%}100%{left:140%}}
.btn--gold:hover::after{animation-duration:1.3s}

/* luz que corre pela borda (vidro e contorno) */
@property --btn-ang{syntax:'<angle>';inherits:false;initial-value:0deg}
.btn--glass,.btn--ghost{box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.btn--glass::after,.btn--ghost::after{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;z-index:0;
  background:conic-gradient(from var(--btn-ang),transparent 0 62%,rgba(245,230,190,.2) 72%,#FFEDCD 86%,transparent 96%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .4s var(--ease);
  animation:btnOrbit 2.6s linear infinite;
}
.btn--glass:hover::after,.btn--ghost:hover::after{opacity:1}
.btn--glass:hover,.btn--ghost:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 0 30px -6px rgba(232,202,152,.35)}
.btn--glass:active,.btn--ghost:active{transform:translateY(0) scale(.97)}
@keyframes btnOrbit{to{--btn-ang:360deg}}

.btn:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

@media (prefers-reduced-motion:reduce){
  .btn--gold::after,.btn--glass::after,.btn--ghost::after{animation:none}
  .btn--gold{transition:none}
}

/* ============================================================
   CARROSSEL NO CELULAR (.mcar)
   Serviços, Por que a Royal, Método e Certificações empilhavam card por card
   (~4.000px no celular). Até 760px viram faixa horizontal com snap: cada card
   ocupa 84% da tela e a borda do próximo aparece, pra mostrar que dá pra arrastar.
   As bolinhas embaixo são criadas pelo sections.js. No desktop nada muda.
   ============================================================ */
.mcar__dots{display:none}
@media (max-width:760px){
  .mcar{
    display:flex!important;gap:12px;
    overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);
    margin-inline:calc(-1 * var(--gutter));padding:6px var(--gutter) 12px;
    list-style:none;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  .mcar::-webkit-scrollbar{display:none}
  .mcar > *{flex:0 0 84%;min-width:0;margin:0;scroll-snap-align:start}
  .mcar > *:hover{transform:none}
  /* a entrada por IntersectionObserver não vê o card cortado pela faixa: no carrossel
     ele já nasce visível, senão a borda do próximo card (a dica de arrastar) some */
  .mcar > [data-rv]{opacity:1!important;transform:none!important}
  .mcar__dots{display:flex;justify-content:center;align-items:center;gap:7px;margin-top:10px;color:#fff}
  .theme-light .mcar__dots{color:var(--navy)}
  .mcar__dots button{
    width:7px;height:7px;padding:0;border:0;border-radius:99px;cursor:pointer;color:inherit;
    background:currentColor;opacity:.32;
    transition:width .3s var(--ease),opacity .3s var(--ease),background .3s var(--ease);
  }
  .mcar__dots button.is-on{width:24px;opacity:1;background:linear-gradient(90deg,var(--gold-lo),var(--gold-hi))}

  /* Reviews: as duas faixas mostram os mesmos 4 depoimentos — no celular fica uma */
  .marquee--rev{display:none}
}

/* ============================================================
   ENTRADA AO ROLAR — cascata (classes postas pelo sections.js)
   .rv-group : o bloco fica parado; os filhos sobem saindo de um leve desfoque,
               um depois do outro (--i = posição do filho, 90 ms entre cada)
   .rv-zoom  : mídias (celular, prints, mapa) entram com zoom suave
   ============================================================ */
[data-rv].rv-group{opacity:1;transform:none}
/* antes de entrar: invisível. A entrada é uma animação (não transição) com fill "backwards":
   ela só vale durante a entrada e depois devolve o elemento aos estilos dele — o hover dos
   botões (que também usa transform) continua funcionando. */
.rv-group:not(.is-in) > *{opacity:0}
.rv-group.is-in > *{animation:rvIn .95s var(--ease) backwards;animation-delay:calc(var(--i,0) * 90ms)}
@keyframes rvIn{from{opacity:0;transform:translate3d(0,26px,0);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}

[data-rv].rv-zoom{
  transform:translate3d(0,24px,0) scale(.94);filter:blur(10px);
  transition:opacity 1.1s var(--ease),transform 1.2s var(--ease),filter 1.1s var(--ease);
}
[data-rv].rv-zoom.is-in{transform:none;filter:none}

@media (prefers-reduced-motion:reduce){
  .rv-group > *,[data-rv].rv-zoom{opacity:1!important;transform:none!important;filter:none!important;animation:none!important}
}

/* ============================================================
   ALTERAÇÕES OUT/2026 (documento "alterações do site")
   - fundo mais azul e escuro: as seções claras saíram; alterna navy e azul royal
   - fonte menor e subtítulos sem caixa alta
   - seções novas: Antes x Depois, Comparativo, Agendamentos, Próximos passos
   - mapa com estados pintados, Royal Connect com logo e link
   ============================================================ */

/* ---------- azul royal (alterna com o navy) ---------- */
.sec.sec--royal{
  background:
    radial-gradient(90% 55% at 50% 0%,rgba(40,66,196,.32),transparent 70%),
    radial-gradient(60% 50% at 100% 100%,rgba(16,36,140,.28),transparent 70%),
    linear-gradient(180deg,#04124F 0%,#08196A 50%,#04124F 100%);
}
/* a galeria era clara: volta pro escuro */
.sec.sec--gallery{--muted:rgba(255,255,255,.66);color:#fff}
.sec--gallery::before,.sec--gallery::after{display:none}
.sec--gallery .eyebrow{color:var(--gold)}
.sec--gallery .sec__title{color:#fff}
.sec--gallery .note{color:rgba(255,255,255,.34)}

/* ---------- ouro nos detalhes, no site todo ---------- */
.sec .eyebrow{display:flex;align-items:center;gap:calc(14px * var(--z))}
.sec .eyebrow:not(.eyebrow--ico)::before{
  content:"";flex:0 0 auto;width:calc(30px * var(--z));height:2px;border-radius:2px;
  background:linear-gradient(90deg,#B8923F,#EAD3A0);
}
.sec .sec__title::after,.sec .contact__title::after{
  content:"";display:block;width:calc(64px * var(--z));height:3px;margin-top:calc(22px * var(--z));border-radius:3px;
  background:linear-gradient(90deg,#B8923F,#F1DDB0);
  box-shadow:0 0 18px rgba(220,192,150,.45);
}
.sec__head--center{text-align:center;margin-left:auto;margin-right:auto}
.sec__head--center .eyebrow{justify-content:center}
.sec__head--center .sec__title,.sec__head--center .sec__lead{margin-left:auto;margin-right:auto}
.sec__head--center .sec__title::after{margin-left:auto;margin-right:auto}
.eyebrow--ico svg{width:calc(18px * var(--z));height:calc(18px * var(--z));flex:0 0 auto}

/* ---------- tipografia: menor e sem caixa alta nos subtítulos ---------- */
.eyebrow,.blk__eyebrow{
  font-size:calc(15px * var(--z));font-weight:500;letter-spacing:.01em;text-transform:none;
}
.clients__label,.partners__label,.hero2__label,.certs__title,.stat em,.film__where,
.cardv__foot em,.pin__tip em,.field > span,.shot__who span,.cert__badge em{
  text-transform:none;letter-spacing:.01em;
}
.clients__label,.partners__label,.hero2__label{font-size:calc(14px * var(--z))}
.certs__title{font-size:calc(clamp(18px,1.5vw,24px) * var(--z));letter-spacing:-.01em}
.stat em{font-size:calc(13px * var(--z))}
.film__where{font-size:calc(13px * var(--z))}
.field > span{font-size:calc(13px * var(--z))}

.sec__title{font-size:calc(clamp(26px,2.9vw,46px) * var(--z));max-width:20ch}
.sec__title--wide{max-width:26ch}
.sec__lead{font-size:calc(clamp(15px,1.02vw,18px) * var(--z))}
.mstack__title,.contact__title{font-size:calc(clamp(26px,2.8vw,44px) * var(--z))}
.film__title{font-size:calc(clamp(24px,2.6vw,42px) * var(--z));max-width:17ch}
.tsv__title{font-size:clamp(calc(28px * var(--z)),3.3vw,calc(52px * var(--z)))}
.l3d__title{font-size:calc(clamp(36px,4.8vw,78px) * var(--z))}

/* dobra 2 (Sobre nós): sem caixa alta, corpo menor, dois parágrafos */
.blk__title{text-transform:none;font-size:calc(clamp(26px,2.4vw,40px) * var(--z));line-height:1.06;letter-spacing:-.02em}
.blk__text{text-transform:none;font-size:calc(clamp(14px,.98vw,17px) * var(--z));line-height:1.55;color:rgba(255,255,255,.84)}
.blk__text + .blk__text{margin-top:calc(12px * var(--z))}
.blk__list li{text-transform:none;font-size:clamp(calc(14px * var(--z)),1vw,calc(17px * var(--z)))}

/* hero: título continua em caixa alta (pedido anterior); subtítulos e etiquetas não */
.hero2__chip,.hero2__lead,.hero2__sub,.hero2__label{text-transform:none}
.hero2__chip{letter-spacing:.02em;font-size:calc(13px * var(--z))}
.hero2__lead{letter-spacing:0;font-weight:400;font-size:calc(clamp(15px,1.12vw,18px) * var(--z));color:rgba(255,255,255,.8)}
.hero2__sub{
  position:relative;z-index:3;margin:calc(10px * var(--z)) 0 0;
  font-size:calc(clamp(13px,.95vw,15px) * var(--z));font-weight:600;color:var(--gold);letter-spacing:.01em;
}
.hero2__title{font-size:min(calc(clamp(28px,6.4vw,116px) * var(--z)),calc(1240px * var(--z) / 12.4))}

/* Times Square: o lema, branco + dourado */
.tsv__title span,.tsv__title em{display:block;font-style:normal}
.tsv__title em{
  background:linear-gradient(100deg,#DCC096,#FFEDCD);
  -webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.1em;
}

/* serviços: o "Efeito Contractor" abre a seção */
.svc__open{
  margin:0 0 calc(clamp(26px,4vh,40px) * var(--z));max-width:34ch;
  padding-left:calc(20px * var(--z));border-left:2px solid var(--gold);
  font-size:calc(clamp(19px,1.7vw,28px) * var(--z));line-height:1.3;font-weight:500;color:#fff;letter-spacing:-.01em;
}

/* Conheça a Royal: lista com o começo em negrito e três números */
.about2__list strong{color:#fff;font-weight:600}
.about2__stats{flex-wrap:wrap}
.about2__stats b{font-size:calc(clamp(36px,3.8vw,64px) * var(--z))}

/* cases: no lugar do 01/06, o +300 */
.film__count{margin:0 0 calc(18px * var(--z));font-size:calc(14px * var(--z));color:var(--muted);line-height:1.4}
.film__count b{display:block;font-size:calc(clamp(30px,2.6vw,44px) * var(--z));font-weight:700;letter-spacing:-.03em;color:var(--gold);line-height:1.05}

/* ============================================================
   ANTES x DEPOIS — divisor arrastável (ref.: assessorialpha.com)
   O "depois" fica embaixo, inteiro; o "antes" fica por cima, recortado até --ba.
   ============================================================ */
.ba{
  --ba:50%;
  position:relative;max-width:calc(1120px * var(--z));margin:0 auto;
  border-radius:calc(30px * var(--z));overflow:hidden;
  border:1px solid rgba(232,202,152,.2);
  box-shadow:0 50px 100px -60px #000;
  user-select:none;-webkit-user-select:none;touch-action:pan-y;cursor:ew-resize;
}
.ba__side{padding:calc(clamp(40px,5vw,64px) * var(--z)) calc(clamp(28px,4vw,56px) * var(--z))}
.ba__side--after{
  display:flex;flex-direction:column;align-items:flex-end;text-align:right;
  background:
    radial-gradient(80% 90% at 100% 50%,rgba(232,202,152,.16),transparent 70%),
    linear-gradient(160deg,#1A2A44,#0C1A31);
}
.ba__side--before{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:flex-start;
  background:linear-gradient(160deg,#0B1424,#060D19);
  clip-path:inset(0 calc(100% - var(--ba)) 0 0);
}
.ba.is-drag .ba__side--before,.ba.is-drag .ba__handle{transition:none}
.ba__side--before,.ba__handle{transition:clip-path .25s var(--ease),left .25s var(--ease)}
.ba__tag{
  display:inline-block;margin:0 0 calc(24px * var(--z));padding:calc(7px * var(--z)) calc(16px * var(--z));
  border-radius:999px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.05);
  font-size:calc(13px * var(--z));font-weight:600;color:rgba(255,255,255,.75);
}
.ba__tag--after{border-color:transparent;background:linear-gradient(180deg,var(--gold-hi),var(--gold-lo));color:var(--ink)}
.ba__list{margin:0;padding:0;list-style:none;display:grid;gap:calc(14px * var(--z));width:min(46%,calc(470px * var(--z)))}
.ba__list li{
  position:relative;padding-left:calc(30px * var(--z));
  font-size:calc(clamp(14px,1vw,16.5px) * var(--z));line-height:1.45;color:rgba(255,255,255,.6);
}
.ba__list--after li{padding-left:0;padding-right:calc(30px * var(--z));color:#fff}
.ba__list li::before{
  content:"";position:absolute;left:0;top:.18em;width:calc(18px * var(--z));height:calc(18px * var(--z));
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237d8aa0' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M9 9l6 6M15 9l-6 6'/%3E%3C/svg%3E");
}
.ba__list--after li::before{
  left:auto;right:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E8D5A0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M8 12.5l2.7 2.7L16 9.8'/%3E%3C/svg%3E");
}
.ba__handle{
  position:absolute;top:0;bottom:0;left:var(--ba);width:2px;transform:translateX(-50%);
  background:linear-gradient(180deg,transparent,var(--gold) 12%,var(--gold) 88%,transparent);
  pointer-events:none;
}
.ba__knob{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:calc(54px * var(--z));height:calc(54px * var(--z));border-radius:50%;
  display:grid;place-items:center;color:var(--ink);
  background:linear-gradient(180deg,var(--gold-hi),var(--gold-lo));
  box-shadow:0 0 0 6px rgba(232,202,152,.16),0 10px 30px -8px rgba(207,174,122,.8);
}
.ba__knob svg{width:calc(24px * var(--z));height:calc(24px * var(--z))}
.ba__range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}
.ba__range:focus-visible + .ba__handle,.ba:focus-within .ba__knob{box-shadow:0 0 0 3px var(--gold),0 10px 30px -8px rgba(207,174,122,.8)}

@media (max-width:760px){
  .ba{display:flex;flex-direction:column-reverse;cursor:auto}
  .ba__side--before{position:relative;clip-path:none}
  .ba__side--after{align-items:flex-start;text-align:left}
  .ba__list{width:100%}
  .ba__list--after li{padding-left:calc(30px * var(--z));padding-right:0}
  .ba__list--after li::before{left:0;right:auto}
  .ba__handle,.ba__range{display:none}
}

/* ============================================================
   COMPARATIVO — sozinho x agência x Royal
   ============================================================ */
.cmp{max-width:calc(1180px * var(--z));margin:0 auto;border-radius:calc(26px * var(--z));overflow:hidden;
  border:1px solid rgba(255,255,255,.1);background:rgba(5,13,24,.35)}
.cmp__row{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.3fr)}
.cmp__row + .cmp__row{border-top:1px solid rgba(255,255,255,.08)}
.cmp__q,.cmp__c{padding:calc(clamp(16px,1.8vw,24px) * var(--z)) calc(clamp(14px,1.6vw,24px) * var(--z));font-size:calc(clamp(13.5px,.98vw,16px) * var(--z));line-height:1.45}
.cmp__q{font-weight:600;color:#fff}
.cmp__c{color:rgba(255,255,255,.58)}
.cmp__c--royal{
  color:#fff;font-weight:600;
  background:linear-gradient(180deg,rgba(232,202,152,.13),rgba(232,202,152,.06));
  border-left:1px solid rgba(232,202,152,.35);
}
.cmp__row--head .cmp__c,.cmp__row--head .cmp__q{font-size:calc(14px * var(--z));font-weight:600;color:rgba(255,255,255,.75);padding-top:calc(22px * var(--z));padding-bottom:calc(22px * var(--z))}
.cmp__row--head .cmp__c--royal{color:var(--gold);display:flex;align-items:center;gap:calc(10px * var(--z))}
.cmp__mark{width:calc(16px * var(--z));height:auto}
@media (max-width:760px){
  .cmp{background:none;border:0;border-radius:0;display:grid;gap:calc(14px * var(--z))}
  .cmp__row--head{display:none}
  .cmp__row{grid-template-columns:minmax(0,1fr);border:1px solid rgba(255,255,255,.1)!important;border-radius:calc(18px * var(--z));overflow:hidden;background:rgba(5,13,24,.35)}
  .cmp__q{padding-bottom:calc(8px * var(--z))}
  .cmp__c{padding-top:calc(10px * var(--z));padding-bottom:calc(10px * var(--z))}
  .cmp__c::before{content:attr(data-col);display:block;margin-bottom:2px;font-size:calc(11.5px * var(--z));font-weight:600;color:rgba(255,255,255,.45)}
  .cmp__c--royal{border-left:0;border-top:1px solid rgba(232,202,152,.3)}
  .cmp__c--royal::before{color:var(--gold)}
}

/* ============================================================
   AGENDAMENTOS JÁ MARCADOS — faixa de prints (ref.: athenagrowthmarketing.com)
   ============================================================ */
.booked{
  overflow:hidden;padding:calc(10px * var(--z)) 0;
  -webkit-mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
          mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
}
.booked__track{display:flex;width:max-content;animation:slide 70s linear infinite}
.booked:hover .booked__track{animation-play-state:paused}
.bcard{
  position:relative;flex:0 0 auto;margin-right:calc(18px * var(--z));
  width:calc(clamp(240px,24vw,360px) * var(--z));height:calc(clamp(300px,30vw,440px) * var(--z));
  border-radius:calc(18px * var(--z));overflow:hidden;padding:0;
  border:1px solid rgba(255,255,255,.1);background:#0E1621;color:#fff;font:inherit;
  box-shadow:0 30px 60px -36px #000;
}
button.bcard{cursor:zoom-in}
.bcard img{width:100%;height:100%;object-fit:cover;object-position:top}
.bcard__tap{
  position:absolute;left:50%;bottom:calc(14px * var(--z));transform:translateX(-50%);
  padding:calc(6px * var(--z)) calc(12px * var(--z));border-radius:999px;
  background:rgba(5,13,24,.78);font-size:calc(12px * var(--z));color:#fff;opacity:0;transition:opacity .3s var(--ease);
}
.bcard:hover .bcard__tap,.bcard:focus-visible .bcard__tap{opacity:1}
/* cartão de espera: o esqueleto de uma conversa, sem texto nenhum */
.bcard--slot{background:linear-gradient(180deg,#121C28,#0B131E)}
.bcard__chat{display:grid;gap:calc(12px * var(--z));padding:calc(26px * var(--z)) calc(22px * var(--z))}
.bcard__chat i{display:block;height:calc(11px * var(--z));width:82%;border-radius:6px;background:rgba(255,255,255,.08)}
.bcard__chat i.s{width:48%}
.bcard__chat i.m{width:30%}
.bcard__chat i.g{width:66%;height:calc(34px * var(--z));border-radius:10px;background:rgba(232,202,152,.14)}
.bcard__label{
  position:absolute;left:0;right:0;bottom:calc(18px * var(--z));text-align:center;
  font-size:calc(12.5px * var(--z));color:rgba(255,255,255,.4);
}
.note--center{text-align:center;padding:0 var(--pad)}
.lightbox{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:calc(30px * var(--z));background:rgba(2,6,14,.9)}
.lightbox[hidden]{display:none}
.lightbox__img{max-width:min(92vw,900px);max-height:88vh;border-radius:14px;box-shadow:0 30px 80px -20px #000}
.lightbox__x{position:absolute;top:calc(18px * var(--z));right:calc(22px * var(--z));width:44px;height:44px;border:0;border-radius:50%;background:rgba(255,255,255,.1);color:#fff;font-size:28px;cursor:pointer}
html.no-scroll{overflow:hidden}
@media (prefers-reduced-motion:reduce){.booked__track{animation:none}}

/* ============================================================
   PRÓXIMOS PASSOS (linha do tempo) + FAQ
   ============================================================ */
.steps-time{
  list-style:none;margin:0 0 calc(clamp(64px,9vh,110px) * var(--z));padding:0;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:calc(clamp(14px,1.6vw,24px) * var(--z));
  position:relative;
}
.steps-time::before{
  content:"";position:absolute;left:4%;right:4%;top:calc(23px * var(--z));height:1px;
  background:linear-gradient(90deg,transparent,rgba(232,202,152,.55) 12%,rgba(232,202,152,.55) 88%,transparent);
}
.tstep{position:relative;display:flex;flex-direction:column;gap:calc(6px * var(--z))}
.tstep__n{
  display:grid;place-items:center;width:calc(46px * var(--z));height:calc(46px * var(--z));border-radius:50%;
  margin-bottom:calc(10px * var(--z));
  background:#0A1B33;border:1px solid rgba(232,202,152,.55);color:var(--gold);font-size:calc(14px * var(--z));font-weight:600;
}
.tstep__w{font-size:calc(clamp(16px,1.2vw,20px) * var(--z));font-weight:700;color:#fff}
.tstep__d{font-size:calc(14px * var(--z));color:var(--muted);line-height:1.45}
.sec__head--faq{margin-top:0}
.faq__list{margin:0;padding:0 calc(60px * var(--z)) calc(clamp(22px,3vh,32px) * var(--z)) calc(20px * var(--z));color:var(--muted);
  font-size:calc(clamp(14px,1.05vw,18px) * var(--z));line-height:1.62;font-weight:300}
.faq__list ul{margin:4px 0 4px;padding-left:calc(20px * var(--z))}
.faq__a p + .faq__list{margin-top:calc(-10px * var(--z))}
@media (max-width:760px){
  .steps-time{grid-template-columns:minmax(0,1fr);gap:calc(18px * var(--z))}
  .steps-time::before{left:calc(23px * var(--z));right:auto;top:8px;bottom:8px;width:1px;height:auto;
    background:linear-gradient(180deg,transparent,rgba(232,202,152,.55) 10%,rgba(232,202,152,.55) 90%,transparent)}
  .tstep{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:calc(16px * var(--z));align-items:center}
  .tstep__n{grid-row:1 / span 2;margin:0}
}

/* ============================================================
   ROYAL CONNECT: logo + botão do site
   ============================================================ */
.connect__logo{display:block;width:calc(clamp(220px,20vw,320px) * var(--z));height:auto;margin:0 0 calc(26px * var(--z))}
.connect__cta{margin-top:calc(clamp(26px,3.6vh,38px) * var(--z))}
.connect__cta svg{width:calc(16px * var(--z));height:calc(16px * var(--z))}
.connect__cta[aria-disabled="true"]{cursor:help}

/* ============================================================
   MAPA: menor no desktop, estados pintados, bolhas por cima
   ============================================================ */
.mapsec{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
.mapsec__map{width:100%;max-width:calc(760px * var(--z));justify-self:center}
.stats{grid-template-columns:repeat(3,minmax(0,1fr))}
.map__big{margin:calc(clamp(22px,3vh,32px) * var(--z)) 0 0;font-size:calc(15px * var(--z));color:rgba(255,255,255,.75)}
.map__big b{display:block;font-size:calc(clamp(40px,4vw,68px) * var(--z));font-weight:700;letter-spacing:-.035em;line-height:1;color:var(--gold)}
.usmap__st{fill:transparent;transition:fill .3s var(--ease)}
.usmap__st.is-client{fill:rgba(224,190,112,var(--a,.5));stroke:rgba(5,13,24,.55);stroke-width:.7;cursor:pointer}
.usmap__st.is-client.is-hover{fill:#F5E6BE}
.usmap__pins{pointer-events:none}
.pin{pointer-events:auto}
.pin::before{background:#FFF8E6;box-shadow:0 0 0 2px rgba(5,13,24,.85),0 0 12px rgba(255,240,200,.55)}
.pin::after{border-color:rgba(255,248,230,.6)}
.usmap__tip{
  position:absolute;z-index:6;transform:translate(-50%,calc(-100% - 16px));pointer-events:none;white-space:nowrap;
  padding:calc(9px * var(--z)) calc(14px * var(--z));border-radius:calc(12px * var(--z));
  background:rgba(4,14,28,.96);border:1px solid rgba(232,202,152,.35);box-shadow:0 18px 40px -20px #000;
  font-size:calc(14px * var(--z));color:#fff;
}
.usmap__tip b{font-weight:600}
.usmap__tip span{color:var(--gold)}
@media (max-width:980px){
  .mapsec{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  .stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(14px * var(--z))}
}
/* comparativo no celular: carrossel (um card por pergunta) */
@media (max-width:760px){
  .cmp.mcar{display:flex!important;gap:12px;margin-left:calc(-1 * var(--gutter));margin-right:calc(-1 * var(--gutter));max-width:none}
  .cmp.mcar > .cmp__row{flex:0 0 86%;align-self:stretch}
  .cmp.mcar > .cmp__row--head{display:none}
}

/* ---------- ícone das listas com check (o antigo era desenhado com gradientes em
   posições fixas em px, não acompanhava a escala e virava uma seta torta no círculo) ---------- */
.ticks li::before{
  border:0;border-radius:0;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E8D5A0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M8 12.5l2.7 2.7L16 9.8'/%3E%3C/svg%3E");
}

/* ---------- prints dos agendamentos: altura fixa, largura pela proporção do print ---------- */
button.bcard{width:auto;background:#0B141A}
button.bcard img{height:100%;width:auto;max-width:none}

/* ---------- Royal Connect: boneco 3D do atendente ---------- */
.connect__media{position:relative}
.connect__agent{
  position:absolute;z-index:3;left:calc(-1 * clamp(20px,3.4vw,64px));bottom:calc(-1 * clamp(40px,6vh,80px));
  width:calc(clamp(170px,17vw,290px) * var(--z));height:auto;
  filter:drop-shadow(0 30px 40px rgba(0,0,0,.55));
  pointer-events:none;
  animation:agentFloat 6s ease-in-out infinite;
}
@keyframes agentFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@media (max-width:760px){
  .connect__agent{width:calc(140px * var(--z));left:-6px;bottom:-30px}
}
@media (prefers-reduced-motion:reduce){.connect__agent{animation:none}}

/* selos oficiais nas certificações */
.cert__badge--img{padding:calc(clamp(14px,1.6vw,24px) * var(--z))}
.cert__badge--img img{width:100%;height:100%;object-fit:contain}

/* ============================================================
   BOTÕES DE SOM (Times Square e Cases), abaixo do CTA
   ============================================================ */
.tsv__ctas{display:flex;flex-wrap:wrap;gap:calc(12px * var(--z));margin-top:clamp(calc(22px * var(--z)),3.4vh,calc(36px * var(--z)))}
.tsv__ctas .btn{margin-top:0}
.snd-toggle{gap:calc(10px * var(--z))}
.snd-toggle .snd-ico{width:calc(18px * var(--z));height:calc(18px * var(--z));flex:0 0 auto}
.snd-toggle .snd-ico--on{display:none}
.snd-toggle.is-on .snd-ico--on{display:block}
.snd-toggle.is-on .snd-ico--off{display:none}
.snd-toggle.is-on{border-color:rgba(232,202,152,.6)}
.film__sound{margin-top:calc(12px * var(--z))}
.film__info .film__cta + .film__sound{display:inline-flex}

/* ---------- bandeiras: as imagens de espera só saem quando as 3D estão prontas ---------- */
.hero2__flat{transition:opacity .6s var(--ease)}
.hero2__flat--us{left:auto;right:calc(50% + 11%)}
.hero2__flat--br{right:auto;left:calc(50% + 11%)}
.logo3d.flags-ready .hero2__flat{opacity:0;pointer-events:none}
.logo3d__fallback{transition:opacity .6s var(--ease)}
.logo3d.is-ready .logo3d__fallback{opacity:0}


/* ============================================================
   AJUSTES 29/10 (rodada 2)
   - títulos e parágrafos com quebra equilibrada (sem palavra sozinha na linha)
   - método vira esteira horizontal com imagem em cada card
   - mapa: tooltip legível; selos sem a linha de nível/data
   - marca com foto de fundo; holofotes atrás da coroa e das bandeiras
   ============================================================ */

/* ---------- diagramação dos textos ---------- */
h1,h2,h3,.sec__title,.mstack__title,.film__title,.certs__title,.l3d__title{text-wrap:balance}
p,li,.sec__lead{text-wrap:pretty}
.sec__lead{max-width:58ch;line-height:1.6}
.sec__title--wide{max-width:24ch}
.mapsec__copy .sec__lead{max-width:46ch}

/* ---------- holofotes: saem de trás de cada ícone, de baixo pra cima ---------- */
.hero2__lights .hero2__beam{display:none}
.hero2__spots{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero2__spot{
  position:absolute;left:var(--x);bottom:40%;
  width:var(--w);height:84%;margin-left:calc(var(--w) / -2);
  transform-origin:50% 100%;
  background:linear-gradient(0deg,rgba(245,230,190,.95) 0%,rgba(236,212,168,.5) 38%,rgba(232,202,152,.16) 72%,rgba(232,202,152,0) 100%);
  clip-path:polygon(38% 100%,62% 100%,100% 0,0 0);
  filter:blur(14px);mix-blend-mode:screen;
  animation:spotSway 9s ease-in-out infinite alternate;
}
/* halo atrás de cada ícone */
.hero2__spot::after{
  content:"";position:absolute;left:50%;bottom:-22%;width:120%;aspect-ratio:1;transform:translateX(-50%);
  background:radial-gradient(closest-side,rgba(245,230,190,.7),rgba(232,202,152,.22) 55%,transparent 78%);
}
.hero2__spot--us{--x:29.5%;--w:26%;--r:-7deg;animation-duration:11s}
.hero2__spot--crown{--x:50%;--w:30%;--r:0deg;height:86%}
.hero2__spot--br{--x:70.5%;--w:26%;--r:7deg;animation-duration:12s;animation-delay:-5s}
.hero2__spot--us,.hero2__spot--br{background:linear-gradient(0deg,rgba(215,230,255,.85) 0%,rgba(140,180,250,.42) 38%,rgba(130,170,240,.12) 72%,rgba(130,170,240,0) 100%)}
@keyframes spotSway{from{transform:rotate(calc(var(--r) - 4deg))}to{transform:rotate(calc(var(--r) + 4deg))}}
@media (max-width:760px){
  .hero2__spot--us{--x:22%}
  .hero2__spot--br{--x:78%}
}
@media (prefers-reduced-motion:reduce){.hero2__spot{animation:none;transform:rotate(var(--r))}}

/* ---------- método: cards com imagem ---------- */
.mstep{padding:0;overflow:hidden;justify-content:flex-start;min-height:0}
.mstep__img{margin:0;position:relative;aspect-ratio:3/2;overflow:hidden;background:#06122A}
.mstep__img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.mstep__img::after{content:"";position:absolute;inset:auto 0 0;height:38%;background:linear-gradient(180deg,transparent,rgba(7,16,30,.9))}
.mstep__body{padding:calc(clamp(16px,1.5vw,24px) * var(--z)) calc(clamp(18px,1.7vw,26px) * var(--z)) calc(clamp(20px,1.8vw,28px) * var(--z))}
.mstep h3{font-size:calc(clamp(17px,1.35vw,23px) * var(--z))}
.mstep p{font-size:calc(clamp(13.5px,.95vw,16px) * var(--z))}

/* desktop: esteira horizontal dirigida pelo scroll */
@media (min-width:901px){
  .mstack{
    grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);
    align-items:center;gap:calc(clamp(14px,2.6vh,32px) * var(--z));
    padding:calc(var(--offer-h) + var(--nav-h) + clamp(14px,3.4vh,44px)) 0 calc(clamp(52px,8.5vh,92px) * var(--z));
  }
  .mstack__head{position:relative;align-self:end;padding:0 var(--pad)}
  .mstack__title{max-width:24ch;margin-bottom:calc(10px * var(--z))}
  .mstack__head .sec__lead{margin:0}
  .mstack__count{position:absolute;right:var(--pad);bottom:0;margin:0}
  .mstack__deck{perspective:none;height:auto;align-self:center;overflow:visible}
  .mstack__3d{
    position:relative;inset:auto;display:flex;align-items:stretch;
    gap:calc(clamp(16px,1.6vw,26px) * var(--z));
    width:max-content;padding:calc(12px * var(--z)) var(--pad);
    transform-style:flat;will-change:transform;
  }
  .mstep{
    position:relative;left:auto;top:auto;flex:0 0 auto;
    width:calc(min(clamp(260px,27vw,450px),52svh) * var(--z));
    transform:none!important;filter:none!important;opacity:1!important;
    -webkit-backdrop-filter:none;backdrop-filter:none;
    transition:border-color .45s var(--ease),box-shadow .45s var(--ease),translate .45s var(--ease);
  }
  .mstep.is-front{translate:0 calc(-8px * var(--z));box-shadow:0 30px 60px -30px #000,0 0 0 1px rgba(232,202,152,.35),0 18px 50px -20px rgba(232,202,152,.35)}
  .mstep.is-front .mstep__img img{transform:scale(1.05)}
  .mstack__dots{left:var(--pad)}
}
/* tablet: grade de 2 */
@media (min-width:761px) and (max-width:900px){
  .mstack__3d{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---------- mapa ---------- */
.pin__tip b{color:#fff}
.pin__tip em{color:var(--gold)}
.pin:hover,.pin:focus-visible{z-index:5}

/* ---------- certificações: só o texto do selo ---------- */
.cert__txt p:only-child{margin:0}

/* ---------- a marca: foto de fundo (Times Square à noite) + luzes ---------- */
.sec--logo3d{background:var(--navy)}
.l3d__bg{
  position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:url("../assets/img/marca-bg.webp?v=00e51e31") center 60%/cover no-repeat;
}
.l3d__bg::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(2,12,58,.94) 0%,rgba(2,12,58,.78) 38%,rgba(2,12,58,.42) 70%,rgba(2,12,58,.6) 100%),
    linear-gradient(180deg,rgba(2,12,58,.85) 0%,transparent 22%,transparent 72%,rgba(2,12,58,.95) 100%);
}
@media (max-width:900px),(hover:none) and (pointer:coarse) and (max-height:560px){
  .l3d__bg::after{background:linear-gradient(180deg,rgba(2,12,58,.9) 0%,rgba(2,12,58,.62) 50%,rgba(2,12,58,.9) 100%)}
}

/* ---------- agendamentos: rolagem automática mais rápida ---------- */
.booked__track{animation-duration:38s}
/* imagem de espera: mesma proporção de área das bandeiras 3D */
.hero2__flat--br{width:16.4%;margin-top:-1.2%}
@media (max-width:760px){.hero2__flat--br{width:20.7%}}
/* a ponta de baixo do holofote nasce atrás do ícone, sem base dura aparecendo */
.hero2__spot{-webkit-mask:linear-gradient(0deg,transparent 0%,#000 30%);mask:linear-gradient(0deg,transparent 0%,#000 30%)}

/* ---------- Sobre: os dois quadrados viraram vídeo (trechos mudos do institucional) ---------- */
.card video{display:block;width:100%;height:100%;object-fit:cover;filter:brightness(.86);transition:transform .8s var(--ease),filter .6s var(--ease)}
.card:hover video{transform:scale(1.05);filter:brightness(1)}

/* ============================================================
   MODO CINEMA — o filme da Times Square cresce até a tela cheia
   ============================================================ */
.tsv__watch svg{width:calc(16px * var(--z));height:calc(16px * var(--z))}

/* o site atrás fica desfocado */
main,.nav,.foot,.offer{transition:filter .6s var(--ease)}
html.is-cinema main,html.is-cinema .nav,html.is-cinema .foot,html.is-cinema .offer{
  filter:blur(14px) saturate(.8) brightness(.5);
  transition:filter .8s var(--ease);
}

.cinema{
  position:fixed;inset:0;z-index:400;display:grid;place-items:center;
  background:radial-gradient(ellipse at center,rgba(2,6,24,.5) 0%,rgba(1,3,20,.88) 70%,rgba(0,0,0,.96) 100%);
  opacity:0;transition:opacity .7s var(--ease);
}
.cinema[hidden]{display:none}
.cinema.is-open{opacity:1}
/* faixas pretas de cinema */
.cinema__bar{position:absolute;left:0;right:0;height:0;background:#000;transition:height .9s cubic-bezier(.7,0,.2,1) .1s;z-index:1}
.cinema__bar--top{top:0}
.cinema__bar--bottom{bottom:0}
.cinema.is-open .cinema__bar{height:7vh}
/* o "zoom": o palco nasce pequeno e cresce até ocupar a tela */
.cinema__stage{
  position:relative;z-index:2;
  width:min(94vw,calc(84vh * 16 / 9));aspect-ratio:16/9;
  border-radius:calc(14px * var(--z));overflow:hidden;
  box-shadow:0 60px 140px -30px #000,0 0 0 1px rgba(232,202,152,.2);
  transform:scale(.62);opacity:0;
  transition:transform 1.1s cubic-bezier(.2,.8,.2,1),opacity .7s var(--ease);
}
.cinema.is-open .cinema__stage{transform:none;opacity:1}
.cinema__video{width:100%;height:100%;display:block;object-fit:cover;background:#000;cursor:pointer}
.cinema__ui{
  position:absolute;left:0;right:0;bottom:0;
  padding:calc(30px * var(--z)) calc(18px * var(--z)) calc(16px * var(--z));
  background:linear-gradient(0deg,rgba(0,0,0,.8),transparent);
  opacity:0;transition:opacity .35s var(--ease);
}
.cinema__stage:hover .cinema__ui,.cinema__ui:focus-within{opacity:1}
@media (hover:none){.cinema__ui{opacity:1}}
.cinema__progress{height:4px;border-radius:4px;background:rgba(255,255,255,.2);overflow:hidden;margin-bottom:calc(12px * var(--z));cursor:pointer}
.cinema__progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold-lo),var(--gold-hi))}
.cinema__row{display:flex;align-items:center;gap:calc(12px * var(--z))}
.cinema__btn{
  width:calc(40px * var(--z));height:calc(40px * var(--z));border-radius:50%;border:0;cursor:pointer;
  display:grid;place-items:center;background:rgba(255,255,255,.14);color:#fff;
  transition:background .25s var(--ease);
}
.cinema__btn:hover{background:rgba(232,202,152,.3)}
.cinema__btn svg{width:calc(20px * var(--z));height:calc(20px * var(--z))}
.cinema__btn .ico-off,.cinema__btn .ico-play{display:none}
.cinema__btn.is-off .ico-on,.cinema__btn.is-paused .ico-pause{display:none}
.cinema__btn.is-off .ico-off,.cinema__btn.is-paused .ico-play{display:block}
.cinema__vol{width:calc(130px * var(--z));accent-color:var(--gold);cursor:pointer}
.cinema__time{font-size:calc(13px * var(--z));color:rgba(255,255,255,.8);font-variant-numeric:tabular-nums}
.cinema__title{margin-left:auto;font-size:calc(13px * var(--z));letter-spacing:.04em;color:var(--gold)}
@keyframes cinePulse{0%,100%{box-shadow:0 20px 50px -14px rgba(0,0,0,.8),0 0 0 8px rgba(232,202,152,.18)}50%{box-shadow:0 20px 50px -14px rgba(0,0,0,.8),0 0 0 16px rgba(232,202,152,.06)}}
.cinema__x{
  position:absolute;z-index:3;top:calc(7vh + 14px);right:calc(18px + 1vw);
  width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.25);
  background:rgba(0,0,0,.45);color:#fff;font-size:28px;line-height:1;cursor:pointer;
  opacity:0;transition:opacity .5s var(--ease) .6s;
}
.cinema.is-open .cinema__x{opacity:1}
@media (max-width:760px){
  .cinema__stage{width:100vw;border-radius:0}
  .cinema.is-open .cinema__bar{height:12vh}
  .cinema__x{top:calc(12vh - 56px)}
  .cinema__vol{width:calc(90px * var(--z))}
  .cinema__title{display:none}
}
@media (prefers-reduced-motion:reduce){
  .cinema,.cinema__stage,.cinema__bar{transition:none}
}

/* ---------- som bloqueado pelo navegador: o botão pulsa pedindo um toque ---------- */
.snd-toggle.is-hint{animation:sndHint 1.8s ease-in-out infinite}
@keyframes sndHint{
  0%,100%{box-shadow:0 0 0 0 rgba(232,202,152,.55)}
  50%{box-shadow:0 0 0 10px rgba(232,202,152,0)}
}
@media (prefers-reduced-motion:reduce){.snd-toggle.is-hint{animation:none;outline:2px solid var(--gold)}}

/* ---------- prints de estimate: rolagem ainda mais rápida ---------- */
.booked__track{animation-duration:22s}

/* ============================================================
   AJUSTES 29/10 (rodada 9) — celular
   ============================================================ */
/* Times Square de ponta a ponta. A altura fica em 72% da tela pra próxima seção aparecer, então em
   tela larga o filme corta um pouco em cima e embaixo (o filme inteiro está no modo cinema). */
.tsv{min-height:calc(400px * var(--z));height:min(56.25vw,72vh);height:min(56.25vw,72svh)}
.tsv__scrim{z-index:1}
.tsv__copy{z-index:3}
@media (max-width:760px){
  .tsv{display:block;height:auto;min-height:0}
  .tsv__media{position:relative;inset:auto;height:auto;aspect-ratio:16/9}
  .tsv__scrim{display:none}
  .tsv__copy{padding:calc(26px * var(--z)) var(--pad) calc(52px * var(--z))}
  .tsv__copy .eyebrow{margin-top:0}
}

/* Antes x Depois no celular: dois cartões de arrastar (Antes -> Depois) com bolinhas */
@media (max-width:760px){
  .ba.mcar{
    flex-direction:row;border:0;border-radius:0;box-shadow:none;
    overflow-x:auto;overflow-y:hidden;cursor:auto;touch-action:pan-x pan-y;
  }
  .ba.mcar > .ba__side{
    flex:0 0 86%;position:relative;inset:auto;clip-path:none;
    border-radius:calc(22px * var(--z));border:1px solid rgba(232,202,152,.2);
    align-items:flex-start;text-align:left;
    padding:calc(28px * var(--z)) calc(22px * var(--z));
  }
  .ba.mcar > .ba__side--after{border-color:rgba(232,202,152,.45)}
}

/* prints de estimate: mais rápido ainda (no celular os cards são menores, então a volta é mais curta) */
.booked__track{animation-duration:18s}
@media (max-width:760px){.booked__track{animation-duration:11s}}
/* cases: sem os números do topo, o painel sobe pra perto do título */
@media (max-width:900px),(hover:none) and (pointer:coarse) and (max-height:560px){
  .sec--cases .film__body{margin-top:calc(14px * var(--z))}
  .sec--cases .film__count{margin-top:0}
}
@media (max-width:900px),(hover:none) and (pointer:coarse) and (max-height:560px){
  /* no celular o título entra no fluxo (era absoluto, herdado do desktop, e somava dois recuos) */
  .sec--cases .film__top{position:static;left:auto;right:auto;padding:0 var(--pad)}
  .sec--cases .film__body{padding-top:0}   /* o espaço reservado pro título absoluto do desktop */
}
.film__metrics:empty{display:none}

/* ============================================================
   AJUSTES 30/10 — celular: arrastar, tela cheia, filme deitado
   ============================================================ */
/* carrosséis: o Comparativo tinha overflow:hidden e não rolava */
@media (max-width:760px){
  .cmp.mcar{overflow:auto hidden;border-radius:0}
  .mcar{cursor:grab}
}
@media (max-width:900px),(hover:none) and (pointer:coarse) and (max-height:560px){.deck__3d{cursor:grab}}
.is-dragging{cursor:grabbing;user-select:none;-webkit-user-select:none}
.is-dragging *{pointer-events:none}
/* bolinhas também nos vídeos de feedback */
.deck .mcar__dots{display:none}
@media (max-width:760px){.deck .mcar__dots{display:flex;flex-wrap:wrap}}

/* case: botão de tela cheia */
.cardv__full{
  position:absolute;top:calc(10px * var(--z));right:calc(10px * var(--z));z-index:3;
  width:calc(40px * var(--z));height:calc(40px * var(--z));border-radius:50%;
  display:grid;place-items:center;cursor:pointer;color:#fff;
  border:1px solid rgba(255,255,255,.3);background:rgba(2,8,28,.6);
  transition:background .25s var(--ease),transform .25s var(--ease);
}
.cardv__full:hover{background:rgba(232,202,152,.35);transform:scale(1.08)}
.cardv__full svg{width:calc(18px * var(--z));height:calc(18px * var(--z))}
.cardv__media video{cursor:pointer}

/* Times Square: botão de play em cima do filme (só no celular, onde o texto sai de cima do vídeo) */
.tsv__play{display:none}
@media (max-width:760px){
  .tsv__play{
    display:grid;place-items:center;position:absolute;z-index:3;
    left:50%;top:28.125vw;transform:translate(-50%,-50%);
    width:68px;height:68px;border-radius:50%;cursor:pointer;
    color:var(--ink);border:0;
    background:linear-gradient(180deg,var(--gold-hi),var(--gold-lo));
    box-shadow:0 0 0 8px rgba(232,202,152,.25),0 14px 34px -10px rgba(0,0,0,.8);
  }
  .tsv__play svg{width:30px;height:30px;margin-left:3px}
}

/* MODO CINEMA no celular.
   Em pé: nenhum site consegue girar o iPhone, então o filme é desenhado deitado, ocupando a tela
   toda; a pessoa só deita o aparelho. Deitado de verdade: ocupa a tela sem girar nada. */
.cinema{overscroll-behavior:contain}
@media (hover:none) and (pointer:coarse) and (max-width:950px){.cinema{touch-action:none}}
@media (hover:none) and (pointer:coarse) and (max-width:760px) and (orientation:portrait){
  .cinema{background:#000}
  .cinema.is-open .cinema__bar{height:0}
  .cinema__stage,.cinema.is-open .cinema__stage{
    position:absolute;left:50%;top:50%;margin:0;
    width:100vh;width:100dvh;height:100vw;aspect-ratio:auto;
    border-radius:0;box-shadow:none;
  }
  .cinema__stage{transform:translate(-50%,-50%) rotate(90deg) scale(.7)}
  .cinema.is-open .cinema__stage{transform:translate(-50%,-50%) rotate(90deg)}
  .cinema__video{object-fit:contain}
  .cinema__x{top:auto;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));transform:rotate(90deg)}
  .cinema__vol{width:calc(110px * var(--z))}
}
@media (hover:none) and (pointer:coarse) and (orientation:landscape) and (max-height:500px){
  .cinema{background:#000}
  .cinema.is-open .cinema__bar{height:0}
  .cinema__stage,.cinema.is-open .cinema__stage{width:100vw;height:100vh;height:100dvh;aspect-ratio:auto;border-radius:0;box-shadow:none}
  .cinema__video{object-fit:contain}
  .cinema__x{top:10px;right:10px}
}

/* MODO CINEMA: o filme ocupa a janela inteira e o player é completo */
.cinema{background:#000}
.cinema.is-open .cinema__bar{height:0}
.cinema__stage,.cinema.is-open .cinema__stage{
  width:100vw;height:100vh;height:100dvh;aspect-ratio:auto;border-radius:0;box-shadow:none;
}
.cinema__video{object-fit:contain}
.cinema__x{top:18px}
.cinema__ui{opacity:1;padding:calc(50px * var(--z)) calc(24px * var(--z)) calc(18px * var(--z));transition:opacity .3s var(--ease)}
.cinema.is-idle .cinema__ui,.cinema.is-idle .cinema__x{opacity:0;pointer-events:none}
.cinema.is-idle,.cinema.is-idle .cinema__video{cursor:none}
/* barra: área de toque maior que o traço; mostra o que já carregou e tem pegador */
.cinema__progress{position:relative;height:5px;overflow:visible;touch-action:none;margin-bottom:calc(14px * var(--z))}
.cinema__progress::before{content:"";position:absolute;inset:-12px 0}
.cinema__progress b,.cinema__progress i{position:absolute;left:0;top:0;height:100%;border-radius:5px;pointer-events:none}
.cinema__progress b{width:0;background:rgba(255,255,255,.3)}
.cinema__progress i::after{
  content:"";position:absolute;right:-7px;top:50%;width:14px;height:14px;margin-top:-7px;border-radius:50%;
  background:var(--gold-hi);box-shadow:0 2px 8px rgba(0,0,0,.6);
}
.cinema__btn{position:relative;flex:0 0 auto}
.cinema__btn[hidden]{display:none}
.cinema__btn em{position:absolute;left:0;right:0;top:50%;transform:translateY(-44%);font-size:calc(8px * var(--z));font-style:normal;font-weight:700;text-align:center;pointer-events:none}
.cinema__btn.is-on{background:rgba(232,202,152,.35)}
.cinema__title{white-space:nowrap}
@media (max-width:760px){
  .cinema__ui{padding:calc(36px * var(--z)) calc(14px * var(--z)) calc(12px * var(--z))}
  .cinema__row{gap:calc(8px * var(--z))}
  .cinema__x{top:12px}
}
/* celular em pé: o palco é a tela de lado (tem que vir depois da regra geral acima) */
@media (hover:none) and (pointer:coarse) and (max-width:760px) and (orientation:portrait){
  .cinema__stage,.cinema.is-open .cinema__stage{width:100vh;width:100dvh;height:100vw}
  .cinema__x{top:auto}
  .cinema__title{display:none}
}

/* ============================================================
   DESEMPENHO NO CELULAR (30/10)
   Medido com CPU 4x mais lenta: o que custava pintura a cada quadro sai no celular.
   ============================================================ */
.anim-off,.anim-off *{animation-play-state:paused!important}
@media (max-width:760px){
  /* topo: imagem no lugar do 3D (ver sections.js) */
  .hero2__scene{background:url("../assets/img/hero-flags-m.webp?v=7c4d237f") center 11%/112% auto no-repeat}
  .hero2__scene .hero2__flat,.hero2__scene .logo3d__fallback{display:none}
  /* vidro fosco, desfoque e mistura de cores são os efeitos mais caros de pintar */
  *,*::before,*::after{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  .hero2__spot{filter:none;mix-blend-mode:normal;animation:none;opacity:.5;transform:rotate(var(--r))}
  .hero2__panel::after{display:none}
  .fx__glow::before,.fx__glow::after{animation:none}
  .pin::after{animation:none;opacity:.35}
  .l3d__title em,.connect__agent{animation:none}
  .btn::before,.btn::after{animation:none}
  /* camadas de GPU só onde há transformação no celular */
  .cardv,.mstep,[data-reveal],.band__track{will-change:auto}
  .cardv{backface-visibility:visible}
  /* o navegador só calcula e pinta as seções perto da tela */
  main > section:not(.hero2):not(.sec--ts):not(.fold2):not(#proximos),main > .bands{
    content-visibility:auto;contain-intrinsic-size:auto 900px;
  }
}

/* CTA de cada seção: abre o pop-up */
.sec-cta{position:relative;z-index:3;display:flex;justify-content:center;padding:calc(clamp(26px,4.5vh,48px) * var(--z)) var(--pad) 0}
.sec--clients .sec-cta{padding-bottom:calc(clamp(20px,3vh,32px) * var(--z))}
.fold2 > .sec-cta{padding-bottom:calc(clamp(20px,3vh,36px) * var(--z))}
.mstack__head .sec-cta{padding:calc(14px * var(--z)) 0 0;justify-content:flex-start}
@media (min-width:901px){
  .mstack__head .sec-cta{position:absolute;right:calc(var(--pad) + 130px);bottom:0;padding:0}
}
@media (max-width:760px){
  .sec-cta .btn{max-width:100%;text-align:center}
  /* salto do menu: calcula tudo pra cair no lugar certo */
  html.cv-off main > section,html.cv-off main > .bands{content-visibility:visible}
}

/* feedback: agora são 18 falas, de tamanhos bem diferentes */
.marquee--reviews{align-items:stretch;animation-duration:190s}   /* todos os cards do mesmo tamanho */
.marquee--reviews.marquee--rev{animation-duration:210s}
@media (max-width:760px){.marquee--reviews{animation-duration:150s}}
.shot__who span{line-height:1.3}

/* headline com os dois nichos: a 2ª linha é mais longa, a fonte acompanha pra não quebrar */
.hero2__title{font-size:min(calc(clamp(26px,4.9vw,84px) * var(--z)),84px)}
@media (max-width:760px){.hero2__title{font-size:6.5vw}}

/* Sobre: a coroa centraliza no bloco das colunas e não passa dele (centrada na seção inteira,
   descia pra cima da frase quando entraram a frase e o CTA embaixo) */
.fold2__box{position:relative;width:100%}
.fold2__mark{max-height:100%}

/* NICHOS: carrossel lento de cards com ícone, duas faixas em sentidos opostos */
.niches{margin-top:calc(clamp(56px,8vh,96px) * var(--z))}
.niches__title{margin:0 auto calc(clamp(24px,3.4vh,38px) * var(--z));font-size:calc(clamp(24px,2.5vw,40px) * var(--z));font-weight:700;letter-spacing:-.022em;line-height:1.15}
.niches__rail{display:grid;gap:calc(12px * var(--z));max-width:none;margin:0 calc(-1 * var(--pad)) calc(clamp(28px,4vh,44px) * var(--z));overflow:hidden;
  -webkit-mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.niches__track{animation-duration:95s}
.niches__track--b{animation-duration:105s}
.niches__track.is-x2{animation-duration:190s}
.niches__track--b.is-x2{animation-duration:210s}
.ncard{
  flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-start;gap:calc(14px * var(--z));
  width:calc(208px * var(--z));min-height:calc(128px * var(--z));margin-right:calc(12px * var(--z));
  padding:calc(18px * var(--z));text-align:left;
  border-radius:calc(18px * var(--z));border:1px solid rgba(255,255,255,.1);
  background:linear-gradient(160deg,rgba(255,255,255,.055),rgba(255,255,255,.015));
  font-size:calc(clamp(14px,1.05vw,16px) * var(--z));font-weight:500;line-height:1.3;color:#fff;
}
.ncard.is-more{border-style:dashed;border-color:rgba(232,202,152,.4);color:var(--gold);background:none}
.niche__ico{flex:0 0 auto;display:grid;place-items:center;width:calc(44px * var(--z));height:calc(44px * var(--z));border-radius:calc(13px * var(--z));
  border:1px solid rgba(232,202,152,.28);background:rgba(232,202,152,.08);color:var(--gold)}
.niche__ico svg{width:calc(22px * var(--z));height:calc(22px * var(--z));fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:760px){
  .niches__title{font-size:calc(23px * var(--z))}
  .niches__rail{gap:8px;margin-left:calc(-1 * var(--gutter));margin-right:calc(-1 * var(--gutter))}
  .niches__track{animation-duration:75s}
  .niches__track--b{animation-duration:85s}
  .ncard{width:136px;min-height:104px;padding:12px;gap:10px;margin-right:8px;border-radius:14px;font-size:13px}
  .niche__ico{width:34px;height:34px;border-radius:10px}
  .niche__ico svg{width:17px;height:17px}
}
/* sem animação (preferência do sistema): lista simples */
@media (prefers-reduced-motion:reduce){
  .niches__rail{display:none}
  .niches__list{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
}

/* logos de clientes: placas do mesmo tamanho, na cor do fundo de cada logo */
.marquee--logos{gap:calc(16px * var(--z));animation-duration:90s}
.logo{
  width:calc(168px * var(--z));height:calc(92px * var(--z));padding:calc(10px * var(--z)) calc(14px * var(--z));
  justify-content:center;border-radius:calc(14px * var(--z));border:1px solid rgba(255,255,255,.1);overflow:hidden;
}
.logo img{width:100%;height:100%;object-fit:contain;opacity:1}
.logo:hover img{transform:none}
@media (max-width:760px){
  .marquee--logos{gap:10px;animation-duration:70s}
  .logo{width:124px;height:70px;padding:7px 10px;border-radius:12px}
}

/* ============================================================
   MANDALA + MARCA (da proposta comercial), dirigida pela rolagem.
   Cores amostradas da mandala original.
   ============================================================ */
.sec.sec--mandala{padding:0;height:840vh;height:840svh;overflow:clip;background:#010411}
.mdl__sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;isolation:isolate;
  background:radial-gradient(70% 70% at 30% 58%,#0B1233 0%,#010411 72%)}
.mdl__bgwrap{position:absolute;inset:0;z-index:0;opacity:0;pointer-events:none}
.mdl__front{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;justify-content:center;align-items:center;
  padding:calc(var(--offer-h) + var(--nav-h) + 8px) var(--pad) calc(14px * var(--z))}
.mdl__head{text-align:center;margin-bottom:calc(clamp(8px,1.4vh,16px) * var(--z))}
.mdl__head .eyebrow{justify-content:center;margin-bottom:calc(6px * var(--z))}
.mdl__title{margin:0;font-size:calc(clamp(24px,2.5vw,38px) * var(--z));font-weight:700;line-height:1.1;letter-spacing:-.022em;color:#fff}
.mdl__tabs{display:flex;justify-content:center;gap:6px;width:max-content;max-width:100%;margin:0 auto calc(clamp(10px,2vh,22px) * var(--z));padding:4px;border-radius:999px;border:1px solid rgba(255,234,189,.25);background:rgba(255,255,255,.03)}
.mdl__tabs button{padding:calc(8px * var(--z)) calc(18px * var(--z));border:0;border-radius:999px;background:none;color:rgba(255,255,255,.72);font:inherit;font-size:calc(13px * var(--z));font-weight:600;cursor:pointer;transition:background .3s var(--ease),color .3s var(--ease)}
.mdl__tabs button[aria-selected="true"]{background:linear-gradient(180deg,var(--gold-hi),var(--gold-lo));color:var(--ink)}
.mdl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:calc(clamp(40px,5vw,96px) * var(--z));align-items:center;width:100%;max-width:calc(1180px * var(--z));margin:0 auto}
.mdl__stage{position:relative;width:calc(min(560px,100vh - 270px) * var(--z));width:min(calc(560px * var(--z)),calc(100svh - 270px));aspect-ratio:1;margin:0 auto}
.mdl__stage::after{content:"";position:absolute;left:99%;top:50%;width:calc(clamp(40px,5vw,96px) * var(--z));height:1px;background:linear-gradient(90deg,#FFEABD,rgba(255,234,189,.1))}
.mdl__wheel{--rot:0deg;position:absolute;inset:0;transform:rotate(var(--rot));transition:transform .8s cubic-bezier(.65,0,.2,1)}
.mdl__wheel svg{display:block;width:100%;height:100%;overflow:visible}
.mdl__seg{fill:#0C132E;stroke:rgba(178,177,182,.14);stroke-width:.35;cursor:pointer;transition:fill .5s var(--ease),stroke .5s var(--ease)}
.mdl__seg.is-on{fill:#17235C;stroke:#FFEABD;stroke-width:.5}
.mdl__spoke{fill:url(#mdlMetal)}
.mdl__lbl{
  position:absolute;width:33%;padding:0;border:0;background:none;color:#fff;font:inherit;text-align:center;cursor:pointer;
  transform:translate(-50%,-50%) rotate(calc(var(--rot) * -1));transition:transform .8s cubic-bezier(.65,0,.2,1);
}
.mdl__lbl b{display:block;font-size:calc(clamp(12.5px,1.1vw,17px) * var(--z));font-weight:700;line-height:1.15;letter-spacing:-.01em}
.mdl__lbl span{display:block;margin-top:4px;font-size:calc(clamp(10px,.78vw,12.5px) * var(--z));line-height:1.25;color:rgba(255,255,255,.78)}
/* aro dourado e miolo: a coroa 3D (.mdl__logo) fica por cima */
.mdl__hub{position:absolute;left:50%;top:50%;width:31%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;
  background:#0E1638;border:calc(clamp(5px,.7vw,9px) * var(--z)) solid #E8CFA0;
  box-shadow:0 0 0 1px #FFEABD inset,0 0 0 1px #FFEABD,0 0 40px -4px rgba(255,234,189,.4)}
.mdl__logo{position:absolute;z-index:3;left:0;top:0;width:0;height:0;margin:0;transform-origin:50% 50%;will-change:transform}
.mdl__banner{position:absolute;inset:0;z-index:2;margin:0 auto;padding:calc(var(--offer-h) + var(--nav-h)) var(--pad) calc(20px * var(--z));pointer-events:none;min-height:0}
.mdl__banner .l3d__copy{opacity:0}
.l3d__slot{align-self:stretch;min-height:0;height:100%}
.mdl__panels{display:grid}
.mdl__panel{grid-area:1/1;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .45s var(--ease),transform .45s var(--ease),visibility .45s}
.mdl__panel.is-on{opacity:1;visibility:visible;transform:none}
.mdl__n{margin:0 0 calc(8px * var(--z));font-size:calc(14px * var(--z));font-weight:700;letter-spacing:.08em;color:#FFEABD}
.mdl__n i{font-style:normal;font-weight:400;color:rgba(255,255,255,.45)}
.mdl__panel h3{margin:0;font-size:calc(clamp(24px,2.6vw,40px) * var(--z));font-weight:700;line-height:1.08;letter-spacing:-.022em;color:#fff}
.mdl__s{margin:calc(6px * var(--z)) 0 calc(16px * var(--z));font-size:calc(clamp(14px,1.1vw,17px) * var(--z));line-height:1.35;color:#FFEABD}
.mdl__panel ul{margin:0;padding:0;list-style:none;display:grid;gap:calc(8px * var(--z))}
.mdl__panel li{position:relative;padding:calc(8px * var(--z)) 0 0 calc(20px * var(--z));border-top:1px solid rgba(255,255,255,.1);font-size:calc(clamp(13.5px,1vw,16px) * var(--z));line-height:1.42;color:rgba(255,255,255,.88)}
.mdl__panel li::before{content:"";position:absolute;left:2px;top:calc(16px * var(--z));width:6px;height:6px;border-radius:50%;background:#E8CFA0}
.mdl__bars{display:flex;gap:6px;margin-top:calc(18px * var(--z))}
.mdl__bars button{flex:0 0 calc(30px * var(--z));height:12px;padding:0;border:0;background:none;cursor:pointer;position:relative}
.mdl__bars button::before{content:"";position:absolute;left:0;right:0;top:4px;height:3px;border-radius:2px;background:rgba(255,255,255,.2);transition:background .4s var(--ease)}
.mdl__bars button.is-on::before{background:#E8CFA0}
@media (max-width:900px),(hover:none) and (pointer:coarse) and (max-height:560px){
  .mdl{grid-template-columns:minmax(0,1fr);gap:calc(18px * var(--z))}
  .mdl__stage{width:min(76vw,calc(100svh - 500px));min-width:220px}
  .mdl__stage::after{left:50%;top:99%;width:1px;height:calc(18px * var(--z));background:linear-gradient(180deg,#FFEABD,rgba(255,234,189,.1))}
  .mdl__bars{justify-content:center;margin-top:calc(10px * var(--z))}
  .mdl__banner{display:flex;flex-direction:column;justify-content:center;gap:calc(8px * var(--z))}
  .l3d__slot{flex:1 1 0;width:100%;min-height:200px}
}
@media (max-width:760px){
  .mdl__tabs{display:none}          /* no celular só "Próximos passos": o texto do método não cabe na tela fixa */
  .mdl__head .eyebrow{font-size:12px;margin-bottom:2px}
  .mdl__title{font-size:21px}
  .mdl__lbl b{font-size:11.5px}
  .mdl__lbl span{display:none}
  .mdl__n{margin-bottom:4px;font-size:12px}
  .mdl__panel h3{font-size:22px}
  .mdl__s{margin:3px 0 8px;font-size:13px}
  .mdl__panel ul{gap:4px}
  .mdl__panel li{padding-top:5px;font-size:13px;line-height:1.3}
  .mdl__panel li::before{display:none}
  .mdl__banner .l3d__hint{display:none}
}
/* sem animação (preferência do sistema): tudo empilhado, sem fixar nada */
.mdl--static.sec--mandala{height:auto}
.mdl--static .mdl__sticky{position:static;height:auto;overflow:visible}
.mdl--static .mdl__front,.mdl--static .mdl__banner{position:relative;inset:auto}
.mdl--static .mdl__banner .l3d__copy{opacity:1}
.mdl--static .mdl__banner{pointer-events:auto}
.mdl--static .mdl__logo{position:relative;width:100%;height:calc(420px * var(--z))}
@media (prefers-reduced-motion:reduce){.mdl__wheel,.mdl__lbl{transition:none}}

/* ============================================================
   CELULAR: textos centralizados em todas as seções
   ============================================================ */
@media (max-width:760px){
  main .sec,main .fold2,.foot{text-align:center}
  main .sec .eyebrow,main .fold2 .eyebrow,.blk__eyebrow{justify-content:center;text-align:center}
  main .sec__head,main .sec__title,main .sec__lead,main .blk__title,main .blk__text,.mstack__title,.tsv__title,.film__title,.l3d__title,.contact__title,.certs__sub,.note,.film__count,.film__client,.film__where,.l3d__copy p{margin-left:auto;margin-right:auto}
  .sec .sec__title::after,.sec .contact__title::after,.blk__title::after{margin-left:auto;margin-right:auto}
  /* botões e blocos que eram alinhados à esquerda */
  .tsv__ctas,.film__info,.connect__copy,.l3d__copy,.contact__copy,.mapsec__copy,.stats,.sec-cta,.foot__in,.foot__cols,.foot__col{justify-content:center;align-items:center;text-align:center}
  .tsv__ctas{flex-direction:column}
  .film__info .btn,.connect__copy .btn,.l3d__copy .btn,.tsv__ctas .btn{margin-left:auto;margin-right:auto}
  .film__info .film__cta,.film__info .film__sound{display:flex;width:max-content;max-width:100%}
  .connect__logo{margin-left:auto;margin-right:auto}
  /* listas com ícone: o ícone vai em cima do texto, centralizado */
  .ticks li,.ba__list li,.ba__list--after li,.mdl__panel li{padding-left:0;padding-right:0;text-align:center}
  .ticks li::before,.ba__list li::before,.ba__list--after li::before,.mdl__panel li::before{position:static;display:block;margin:0 auto calc(6px * var(--z))}
  .ba.mcar > .ba__side{align-items:center;text-align:center}
  .blk__list li{justify-content:center;text-align:center}
  /* cards */
  .svc__card,.why__card,.cert,.cert__txt,.cmp__row,.cmp__q,.cmp__c,.tstep,.mdl__panel,.shot{text-align:center}
  .svc__card,.why__card{align-items:center}
  .shot__top{justify-content:center;flex-direction:column}
  .cert{justify-items:center;align-items:center}
  .cert__badge{margin-left:auto;margin-right:auto}
  .mdl__bars{justify-content:center}
  .ncard{align-items:center;text-align:center}
  .stats{justify-items:center}
  .stat{text-align:center;align-items:center}
  .map__big{text-align:center}
  /* formulário: rótulos no centro; o que a pessoa digita continua normal */
  .field > span,.form__msg{text-align:center}
  .faq__q{text-align:center;justify-content:center}
}
@media (max-width:760px){
  /* a linha decorativa empurrava o título pequeno pro lado */
  .sec .eyebrow:not(.eyebrow--ico)::before{display:none}
  .hero2__chip{justify-content:center;text-align:center}
  .faq__a,.faq__a p,.faq__a li{text-align:center}
  .faq__a ul,.faq__a ol{padding-left:0;list-style-position:inside}
  .foot,.foot *{text-align:center}
  .foot__grid,.foot__in,.foot__cols,.foot__col,.foot nav,.foot ul{justify-content:center;justify-items:center;align-items:center;margin-left:auto;margin-right:auto}
  .blk__list li{gap:calc(8px * var(--z))}
}

/* mandala no celular: sem bolinha nos itens (a regra de centralizar acima as trazia de volta);
   banner desce um pouco pra o rótulo não ficar atrás do menu */
@media (max-width:760px){
  .mdl__panel li::before{display:none}
  .mdl__banner{padding-top:calc(var(--offer-h) + var(--nav-h) + 22px)}
  .mdl__banner .l3d__copy .btn{margin-top:calc(12px * var(--z))}
}

/* MENU: 10 itens na ordem das seções; vira hambúrguer antes de apertar */
.nav__links{gap:calc(clamp(12px,1.5vw,26px) * var(--z))}
.nav__links + .nav__cta{margin-left:calc(clamp(10px,1.4vw,28px) * var(--z))}
.nav__links a{white-space:nowrap;font-size:calc(clamp(13px,.95vw,15px) * var(--z))}
.nav__cta{white-space:nowrap}
@media (max-width:1240px){
  .nav__links{display:none}
  .nav__burger{display:flex}
  .nav__cta{margin-left:auto}
}

/* CERTIFICAÇÕES compactas: dois selos lado a lado */
.sec.sec--certs{padding-top:calc(clamp(44px,6vh,72px) * var(--z));padding-bottom:calc(clamp(40px,6vh,64px) * var(--z))}
.sec--certs .certs__head{margin-bottom:calc(6px * var(--z))}
.certs__sub{margin-bottom:calc(clamp(18px,2.6vh,28px) * var(--z));font-size:calc(clamp(14px,1vw,16px) * var(--z))}
.sec--certs .partners__label{margin-bottom:calc(10px * var(--z))}
.sec--certs .partners{margin-bottom:calc(clamp(18px,2.6vh,28px) * var(--z));gap:calc(10px * var(--z))}
.sec--certs .partner{height:calc(50px * var(--z));padding:0 calc(16px * var(--z));min-width:0}
.sec--certs .partner img{height:calc(24px * var(--z))}
.certs{grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(14px * var(--z));max-width:calc(1040px * var(--z));margin:0 auto}
.cert{grid-template-columns:calc(84px * var(--z)) minmax(0,1fr);gap:calc(18px * var(--z));padding:calc(16px * var(--z)) calc(20px * var(--z));border-radius:calc(18px * var(--z))}
.cert__badge{border-radius:calc(14px * var(--z))}
.cert__badge--img{padding:calc(8px * var(--z))}
.cert__txt p{font-size:calc(clamp(13px,.95vw,15px) * var(--z));line-height:1.45}
.sec--certs .sec-cta{padding-top:calc(clamp(18px,3vh,28px) * var(--z))}
@media (max-width:900px) and (min-width:761px){.certs{grid-template-columns:minmax(0,1fr)}.cert{text-align:left;grid-template-columns:calc(84px * var(--z)) minmax(0,1fr)}.cert__badge{margin:0}}
@media (max-width:760px){
  .sec--certs .partners{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .sec--certs .partner{height:44px;padding:0 8px}
  .sec--certs .partner img{height:18px;max-width:100%}
  .cert{padding:14px;gap:10px}
  .cert__badge,.cert__badge--img{width:72px;max-width:72px;height:72px;padding:6px}
  .cert__txt p{font-size:13px}
}
@media (max-width:1240px){
  .nav__burger{margin-left:calc(12px * var(--z))}
  .nav__pill{justify-content:flex-start}
}
@media (max-width:760px){
  /* os mesmos logos já aparecem no topo do site */
  .sec--certs .partners__label,.sec--certs .partners{display:none}
  .cert{grid-template-columns:minmax(0,1fr);gap:8px;padding:12px 14px}
  .cert__badge,.cert__badge--img{width:54px;max-width:54px;height:54px;padding:5px;border-radius:12px}
  .cert__txt p{font-size:12.5px;line-height:1.4}
}

/* ============================================================
   CELULAR: escala única de texto (hierarquia)
   título principal > título de seção 28 > card 20 > corpo 16 > card 15 > rótulo 13-14
   ============================================================ */
@media (max-width:760px){
  .hero2__title{font-size:clamp(26px,8vw,34px);line-height:1.04}
  .hero2__title span,.hero2__title em{white-space:normal}
  .hero2__lead{font-size:16px;line-height:1.5}
  .hero2__sub{font-size:14px}
  .hero2__chip{font-size:13px}

  main .sec__title,main .blk__title,main .film__title,main .contact__title,main .tsv__title,main .certs__title{font-size:28px;line-height:1.12;letter-spacing:-.02em}
  main .l3d__title{font-size:32px;line-height:1.08}
  main .niches__title{font-size:22px;line-height:1.15}
  main .mdl__title{font-size:24px}

  main .eyebrow,main .blk__eyebrow{font-size:14px;font-weight:600}

  main .svc__card h3,main .why__card h3,main .mdl__panel h3,main .film__client,main .svc__open{font-size:20px;line-height:1.2}

  main .sec__lead,main .blk__text,main .ticks li,main .faq__a p,main .faq__a li,main .fold2__punch{font-size:16px;line-height:1.55}
  main .svc__card p,main .why__card p,main .ba__list li,main .cert__txt p,main .cert__txt strong,main .cmp__c,main .shot__txt,main .blk__list li,main .tstep__d{font-size:15px;line-height:1.5}
  main .cmp__q{font-size:15px;font-weight:600}
  main .faq__q{font-size:16px;line-height:1.35}

  main .film__where,main .film__count span,main .stat span,main .stat em,main .map__big span,main .clients__label,main .certs__sub,main .ba__tag,main .card__label-txt{font-size:14px;line-height:1.35}
  main .shot__who b{font-size:15px}
  main .shot__who span,main .cardv__foot em,main .cardv__foot b,main .svc__n,main .note,main .usmap__hint,main .form__legal,main .bcard__tap,main .band__item,main .field > span{font-size:13px;line-height:1.35}
  main .cardv__foot b{font-size:14px}
  .foot__legal,.foot__contact,.foot__nav a,.foot__slogan{font-size:13px}
  .foot__nav a,.foot__contact a{font-size:14px}
  main .btn{font-size:13px}

  /* mandala: fixa na tela, então um degrau abaixo sem passar do mínimo */
  main .mdl__lbl b{font-size:12.5px}
  main .mdl__n{font-size:13px}
  main .mdl__s{font-size:14px}
  main .mdl__panel li{font-size:14px;line-height:1.3}
}
@media (max-width:760px){
  /* todos os carrosséis começam na mesma margem */
  .ba.mcar,.certs.mcar{margin-left:calc(-1 * var(--gutter));margin-right:calc(-1 * var(--gutter));max-width:none;width:auto}
  .sec--ba .ba.mcar{border-radius:0}
  /* resposta do FAQ centralizada na tela (o espaço do botão + ficava só na pergunta) */
  .faq__a,.faq__a *{padding-right:0;max-width:none}
  .faq__a ul,.faq__a ol,.faq__a p{width:100%;margin-left:auto;margin-right:auto}
  main .pin__tip em{font-size:13px}
  main .mdl__head .eyebrow{font-size:13px}
  main .mdl__lbl b{font-size:13px}
}
@media (max-width:760px){
  .nav__burger{margin-left:auto}    /* sem o botão de contato na barra, o menu vai pra direita */
}
@media (max-width:760px) and (max-height:720px){
  .mdl__head .eyebrow{display:none}
}

/* banner da mandala: a margem já vem de --pad; com max-width junto ela contava duas vezes em tela larga */
.mdl__banner{max-width:none;margin:0}
.mdl__banner .l3d__title{white-space:nowrap}
@media (max-width:760px){
  .mdl__banner .l3d__title{white-space:normal}
  /* frase de abertura dos serviços: sem o traço e sem o recuo dele */
  .svc__open{border-left:0;padding-left:0;margin-left:auto;margin-right:auto}
  /* FAQ: pergunta no centro da tela, com o + à parte; resposta na largura toda */
  .faq__q{display:block;position:relative;padding-left:46px;padding-right:46px;text-align:center}
  .faq__q i{position:absolute;right:0;top:0;bottom:0;margin:auto 0}
  main .faq__a p,main .faq__a li,main .faq__a ul,main .faq__a ol{padding-left:0;padding-right:0;max-width:none;width:100%}
}

/* banner da mandala: texto sempre legível sobre as luzes do fundo */
.mdl__banner .sec__lead{color:rgba(255,255,255,.94)}
@media (max-width:760px){
  .mdl__wheel,.mdl__lbl{transition-duration:.55s}
  .mdl__bgwrap .l3d__bg::after{background:linear-gradient(180deg,rgba(1,6,34,.94) 0%,rgba(1,6,34,.86) 52%,rgba(1,6,34,.45) 72%,rgba(1,6,34,.7) 100%)}
  .mdl__banner .sec__lead{font-weight:500;text-shadow:0 1px 10px rgba(1,6,34,.8)}
  .mdl__banner .eyebrow{color:#FFEABD}
  /* FAQ: lista sem o recuo do marcador */
  .faq__list,.faq__list ul{padding-left:0;padding-right:0;list-style:none}
  /* números: dois em cima e o terceiro no centro, não solto à esquerda */
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats > :last-child:nth-child(odd){grid-column:1 / -1}
}

/* topo no celular: a coroa inteira, sem máscara e sem o título por cima da base */
@media (max-width:760px){
  .hero2__scene{height:auto;aspect-ratio:1.419;-webkit-mask:none;mask:none;background-position:center;background-size:contain}
  .hero2__title{margin-top:calc(14px * var(--z))}
}

/* mandala com 12 itens: passo curto e troca de lista em fade (a coroa fica no lugar) */
.mdl__wheel{transition:transform .55s cubic-bezier(.65,0,.2,1),opacity .2s linear}
.mdl__lbl{transition-duration:.55s}
.mdl__head,.mdl__panels,.mdl__bars{transition:opacity .2s linear}
.mdl--static .mdl__tabs{display:flex}
/* celular de tela baixa (com as barras do navegador, a maioria): o texto mais longo do Método precisa caber */
@media (max-width:760px) and (max-height:720px){
  .mdl__title{display:none}
  .mdl__head .eyebrow{display:flex;margin-bottom:0}
  .mdl__stage{min-width:176px}
  .mdl{gap:10px}
}
@media (max-width:760px) and (max-height:600px){
  .mdl__stage{min-width:128px}
  .mdl__lbl{display:none}
  .mdl__s{display:none}
  .mdl__panel h3{font-size:20px;margin-bottom:6px}
  .mdl__front{padding-top:calc(var(--offer-h) + var(--nav-h))}
}
/* a roda usa a sobra da tela baixa: com rótulos ela não pode ficar menor que ~220 px */
@media (max-width:760px) and (max-height:720px){.mdl__stage{width:min(76vw,calc(100svh - 420px));min-width:200px}}
@media (max-width:760px) and (max-height:600px){.mdl__stage{width:calc(100svh - 385px);min-width:128px}}
@media (max-width:760px) and (max-height:720px){.mdl__front{justify-content:flex-start}}

/* coroa parada no celular: imagem em alta com brilho, no topo e no banner/mandala (a coroa ocupa 89% da imagem) */
@media (max-width:760px){
  .hero2__scene{aspect-ratio:1.368;background-size:100% auto}
}
@media (max-width:760px) and (max-height:720px){.mdl__front{padding-top:calc(var(--offer-h) + var(--nav-h) + 24px)}}

/* tamanho de texto igual em todo navegador: o Safari do iPhone aumenta texto por conta própria sem isto */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}

/* FORMULÁRIO DE QUALIFICAÇÃO: uma pergunta por vez */
.qf{min-width:0;align-content:start}
.qf__bar{height:6px;border-radius:999px;background:rgba(255,255,255,.1);overflow:hidden}
.qf__bar i{display:block;height:100%;width:20%;border-radius:999px;background:linear-gradient(90deg,var(--gold-lo),var(--gold-hi));transition:width .4s var(--ease)}
.qf__step{display:grid;gap:calc(14px * var(--z));min-width:0}
.qf__step.is-in{animation:qfIn .32s var(--ease) both}
@keyframes qfIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.qf__q{margin:0;font-size:calc(clamp(19px,1.6vw,24px) * var(--z));font-weight:700;line-height:1.25;letter-spacing:-.012em;color:#fff;outline:0}
.qf__opts{display:grid;gap:calc(10px * var(--z))}
.qf__opt{min-height:calc(56px * var(--z));padding:calc(12px * var(--z)) calc(18px * var(--z));border:1px solid rgba(232,202,152,.55);border-radius:calc(14px * var(--z));background:rgba(0,10,24,.35);color:#fff;font:inherit;font-size:calc(16px * var(--z));font-weight:600;line-height:1.3;text-align:left;cursor:pointer;touch-action:manipulation;transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease)}
.qf__opt.is-on,.qf__opt:active{background:linear-gradient(180deg,var(--gold-hi),var(--gold-lo));border-color:var(--gold-hi);color:var(--ink)}
@media (hover:hover){.qf__opt:hover{background:linear-gradient(180deg,var(--gold-hi),var(--gold-lo));border-color:var(--gold-hi);color:var(--ink)}}
.qf__opt:focus-visible,.qf__back:focus-visible{outline:2px solid var(--gold-hi);outline-offset:2px}
.qf__outro,.qf__fields{display:grid;gap:calc(14px * var(--z))}
.qf__phone{display:grid;grid-template-columns:auto minmax(0,1fr);gap:calc(8px * var(--z));min-width:0}
.qf__phone select{height:calc(52px * var(--z));width:auto;padding:0 calc(30px * var(--z)) 0 calc(12px * var(--z));border-radius:calc(13px * var(--z));border:1px solid rgba(255,255,255,.13);background-color:rgba(0,10,24,.5);color:#fff;font:inherit;font-size:calc(15px * var(--z));appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),linear-gradient(135deg,var(--gold) 50%,transparent 50%);background-position:calc(100% - 17px) 50%,calc(100% - 12px) 50%;background-size:5px 5px;background-repeat:no-repeat}
.qf__phone option{background:#061426;color:#fff}
.qf__phone input{width:100%;min-width:0;box-sizing:border-box;height:calc(52px * var(--z));padding:0 calc(16px * var(--z));border-radius:calc(13px * var(--z));border:1px solid rgba(255,255,255,.13);background:rgba(0,10,24,.5);color:#fff;font:inherit;font-size:calc(15px * var(--z))}
.qf__phone input:focus,.qf__phone select:focus{outline:0;border-color:var(--gold)}
.qf__back{justify-self:start;min-height:44px;padding:0 calc(6px * var(--z));border:0;background:none;color:rgba(255,255,255,.72);font:inherit;font-size:calc(14px * var(--z));font-weight:600;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.qf__back:hover{color:#fff}
.qf__end{margin:0;font-size:calc(clamp(18px,1.4vw,21px) * var(--z));line-height:1.45;color:#fff;outline:0}
.qf__end a{color:var(--gold-hi);font-weight:700}
.qf__end--ok{font-weight:600}
.qf .form__msg:empty{display:none}
@media (max-width:760px){
  .qf__q,.qf__end{text-align:center}
  .qf__opt{text-align:center;min-height:58px}
  .qf__back{justify-self:center}
  /* abaixo de 16 px o iPhone dá zoom na página ao tocar no campo */
  .field input,.field select,.qf__phone input,.qf__phone select,  .field span{text-align:center}
}
@media (prefers-reduced-motion:reduce){.qf__step.is-in{animation:none}}

/* página ampliada no Safari (aA > 100%): a tela fica estreita e baixa; nada pode sair dela */
@media (max-width:320px) and (max-height:600px){.mdl__stage{width:96px;min-width:96px}}
.qf__step,.qf__opts{grid-template-columns:minmax(0,1fr)}
.qf__opt{overflow-wrap:anywhere}

/* topo no celular: bandeiras de ponta a ponta, atrás da coroa (imagem parada) */
@media (max-width:760px){
  .hero2__scene{width:100vw;margin-left:calc(50% - 50vw);aspect-ratio:1.279;background-size:100% auto;background-position:center top}
}

/* coroa de frente: a imagem tem nova proporção */
@media (max-width:760px){
  .hero2__scene{aspect-ratio:1.261}
  .logo3d__fallback{aspect-ratio:720/1048}
}

/* slogan ao lado do logo no menu */
.nav__brand{gap:calc(12px * var(--z))}
.nav__slogan{display:grid;gap:1px;white-space:nowrap;font-size:calc(14.5px * var(--z));line-height:1.12;letter-spacing:-.01em}
.nav__slogan b{display:block;font-weight:700;color:#fff}
.nav__slogan b + b{color:var(--gold-hi)}
@media (max-width:760px){
  .nav__brand{gap:10px}
  .nav__slogan{font-size:14px}
}
.nav__slogan{font-size:14px}
/* tablet: sem o botão de contato, o hambúrguer vai para a direita */
@media (min-width:761px) and (max-width:980px){.nav__burger{margin-left:auto}}

/* antes x depois: o "antes" cobre o "depois" até a alça, em qualquer posição */
.ba__side--after{position:relative;z-index:1}
.ba__side--before{z-index:2}
.ba__handle{z-index:3}
.ba__range{z-index:4}
@media (max-width:760px){.ba.mcar > .ba__side{z-index:auto}}

/* Royal Connect: imagens e fim da seção somem em degradê, sem corte reto */
.connect__agent,.connect__app{-webkit-mask-image:linear-gradient(180deg,#000 74%,transparent 100%);mask-image:linear-gradient(180deg,#000 74%,transparent 100%)}
.sec--connect{position:relative}
.sec--connect::after{content:"";position:absolute;left:0;right:0;bottom:0;height:calc(clamp(90px,14vh,170px) * var(--z));background:linear-gradient(180deg,transparent,var(--ink));pointer-events:none}
.sec--connect > .connect{position:relative;z-index:1}

/* topo no celular: fundo e coroa enviados (só celular) */
@media (max-width:760px){
  .hero2{background:#000a2a url("../assets/img/hero-bg-m.webp?v=e61b573b") center top/100% auto no-repeat}
  .hero2__bg,.hero2__lights,.hero2__spots,.hero2__panel,.hero2 > .fx__glow{display:none}
  .hero2__scene{aspect-ratio:1.494}
}

/* MENU: sempre em vidro, em qualquer seção (o !important vence o corte geral de blur do celular) */
.nav__pill,.nav.is-solid .nav__pill{
  background:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.05)),rgba(6,14,44,.36);
  border-color:rgba(255,255,255,.24);
  box-shadow:0 18px 50px -24px rgba(0,0,0,.75),inset 0 1px 0 rgba(255,255,255,.2);
  -webkit-backdrop-filter:blur(18px) saturate(160%)!important;
  backdrop-filter:blur(18px) saturate(160%)!important;
}

/* números da Royal no celular: dois em cima e o terceiro no centro */
@media (max-width:760px){
  .about2__stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));justify-items:center;text-align:center}
  .about2__stats > :last-child:nth-child(odd){grid-column:1 / -1}
  .about2__stats span{margin-left:auto;margin-right:auto}
}

/* TOPO NO CELULAR: coroa 3D sobre as bandeiras; até o 3D entrar, a coroa plana (sem imagem) */
@media (max-width:760px){
  .hero2__scene{aspect-ratio:1.494}
  .hero2__scene .logo3d__fallback{
    display:block;height:90%;aspect-ratio:421/674;opacity:1;
    background:linear-gradient(135deg,#C9983F,#FFE9B5 45%,#D9A94E);
    -webkit-mask:url('../assets/logo/royal-3d.svg?v=ddecf89e') no-repeat center/contain;
            mask:url('../assets/logo/royal-3d.svg?v=ddecf89e') no-repeat center/contain;
  }
  .hero2__scene.is-ready .logo3d__fallback{opacity:0}
  /* reflexo no lado esquerdo da coroa, como na referência */
  .hero2__scene::after{
    content:"";position:absolute;z-index:2;left:28.2%;top:39%;width:30%;aspect-ratio:1;transform:translate(-50%,-50%);pointer-events:none;
    background:
      radial-gradient(closest-side,rgba(255,250,232,.95) 0,rgba(255,214,130,.5) 14%,rgba(255,190,90,.14) 42%,transparent 70%),
      linear-gradient(90deg,transparent 2%,rgba(255,240,200,.9) 50%,transparent 98%) center/100% 2px no-repeat,
      linear-gradient(0deg,transparent 18%,rgba(255,240,200,.75) 50%,transparent 82%) center/2px 100% no-repeat;
    opacity:0;transition:opacity .6s var(--ease);
  }
  .hero2__scene.is-ready::after{opacity:1}
}

.cinema__rotate{display:none}
@media (hover:none) and (pointer:coarse) and (max-width:760px) and (orientation:portrait){
  /* tela cheia em pé: o filme inteiro, sem corte, com o celular em pé */
  .cinema__stage,.cinema.is-open .cinema__stage{
    position:absolute;left:0;top:0;margin:0;width:100vw;height:100vh;height:100dvh;aspect-ratio:auto;border-radius:0;box-shadow:none;
  }
  .cinema__stage{transform:scale(.94)}
  .cinema.is-open .cinema__stage{transform:none}
  .cinema__video{object-fit:contain}
  .cinema__x{top:calc(12px + env(safe-area-inset-top));right:12px;bottom:auto;transform:none}
  .cinema__vol,#cineFull{display:none}
  .cinema__rotate{
    position:absolute;z-index:6;left:12px;top:calc(12px + env(safe-area-inset-top));
    display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px 0 12px;
    border:1px solid rgba(232,202,152,.6);border-radius:999px;background:rgba(4,10,30,.62);color:#fff;
    font:inherit;font-size:14px;font-weight:600;cursor:pointer;touch-action:manipulation;
  }
  .cinema__rotate svg{width:22px;height:22px;color:var(--gold-hi);flex:none}
  /* deitado pelo botão: o filme inteiro, sem cortar */
  .cinema.is-land .cinema__stage{
    left:50%;top:50%;width:100vh;width:100dvh;height:100vw;transform:translate(-50%,-50%) rotate(90deg);
  }
  .cinema.is-land .cinema__video{object-fit:contain}
  .cinema.is-land .cinema__x{top:auto;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));transform:rotate(90deg)}
  .cinema.is-land .cinema__rotate{left:calc(100vw - 12px);top:12px;transform-origin:0 0;transform:rotate(90deg)}
}
@media (hover:none) and (pointer:coarse) and (orientation:landscape) and (max-height:500px){
  .cinema.is-land .cinema__rotate{
    position:absolute;z-index:6;left:12px;top:10px;display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px 0 10px;
    border:1px solid rgba(232,202,152,.6);border-radius:999px;background:rgba(4,10,30,.62);color:#fff;font:inherit;font-size:13px;font-weight:600;
  }
  .cinema.is-land .cinema__rotate svg{width:20px;height:20px;color:var(--gold-hi)}
}

.cinema__rotate{white-space:nowrap;width:max-content}
@media (max-width:760px){.hero2__scene::after{top:44%}}

/* mandala: cada palavra dentro da própria fatia */
.mdl__lbl{width:27.5%;overflow-wrap:normal}
.mdl__lbl b{font-size:calc(clamp(11.5px,1vw,15.5px) * var(--z))}
@media (max-width:760px){
  main .mdl__lbl{width:29%}
  main .mdl__lbl b{font-size:12.5px;line-height:1.12;letter-spacing:-.015em}
}
@media (max-width:760px) and (max-height:720px){
  main .mdl__lbl{width:31%}
  main .mdl__lbl b{font-size:11px}
}
.mdl__lbl b{font-size:max(12.5px,calc(clamp(11.5px,1vw,15.5px) * var(--z)))}
.mdl__lbl.is-wide b{letter-spacing:-.02em}
@media (max-width:760px){main .mdl__lbl.is-wide b{font-size:11px}}
@media (max-width:760px) and (max-height:720px){main .mdl__lbl.is-wide b{font-size:10px}}
/* tela muito baixa: a roda fica pequena demais para palavras; o nome está logo abaixo, no painel */
@media (max-width:760px) and (max-height:655px){.mdl__lbl{display:none}}

/* foto do time entre os pilares e os nichos */
.svc__team{display:block;width:100%;height:auto;margin:calc(clamp(36px,5vh,60px) * var(--z)) 0 0;border-radius:calc(18px * var(--z));box-shadow:0 40px 80px -50px #000}
@media (max-width:760px){
  /* a foto é muito larga: no celular recorta no centro, com o time em tamanho visível */
  .svc__team{aspect-ratio:16/10;object-fit:cover;object-position:50% 40%;margin-top:30px}
}

/* segunda foto do time: fim do comparativo, antes do Royal Connect */
.svc__team--wide{max-width:var(--max);margin-left:auto;margin-right:auto}
@media (max-width:760px){
  /* arquivo baixo (222 px): recorte menos fechado que o da primeira foto para não perder nitidez */
  .svc__team--wide{aspect-ratio:2/1;object-position:62% 50%}
}

/* formulário de etapas dentro do pop-up: sem o cartão em volta; a caixa rola se a etapa for alta */
.pop__box{max-height:calc(100vh - 24px);max-height:calc(100svh - 24px);overflow-y:auto;overscroll-behavior:contain}
.pop .qf{padding:0;background:none;border:0;opacity:1;transform:none;text-align:left}
.pop .qf .qf__q{font-size:calc(18px * var(--z))}
.pop__box > p{margin-bottom:calc(16px * var(--z))}
@media (max-width:760px){
  .pop .qf{text-align:center}
  .pop__mark{display:none}
}

/* mandala no celular: parada nativa em cada item */
@media (max-width:760px){
  .sec.sec--mandala{position:relative}
  /* mesmo reflexo do topo na coroa 3D do banner */
  .mdl__logo::after{
    content:"";position:absolute;z-index:2;left:var(--gx);top:46%;width:var(--gs);height:var(--gs);transform:translate(-50%,-50%);pointer-events:none;
    background:
      radial-gradient(closest-side,rgba(255,250,232,.95) 0,rgba(255,214,130,.5) 14%,rgba(255,190,90,.14) 42%,transparent 70%),
      linear-gradient(90deg,transparent 2%,rgba(255,240,200,.9) 50%,transparent 98%) center/100% 2px no-repeat,
      linear-gradient(0deg,transparent 18%,rgba(255,240,200,.75) 50%,transparent 82%) center/2px 100% no-repeat;
    opacity:0;transition:opacity .6s var(--ease);
  }
  .mdl__logo.is-ready::after{opacity:1}
}

/* banner em tela baixa: nada embaixo do menu */
@media (max-width:760px) and (max-height:720px){
  .mdl__banner{justify-content:flex-start;padding-top:calc(var(--offer-h) + var(--nav-h) + 30px)}
  .mdl__banner .eyebrow{display:none}
}

/* aro no mesmo lugar nas duas listas: título com altura fixa e conteúdo a partir do topo */
@media (max-width:760px){
  .mdl__front{justify-content:flex-start;padding-top:calc(var(--offer-h) + var(--nav-h) + 22px)}
  .mdl__title{min-height:2.2em;display:flex;align-items:center;justify-content:center}
}
@media (max-width:760px) and (max-height:720px){.mdl__title{display:none}}

/* vídeos de feedback: capa por baixo, vídeo só com imagem */
.cardv__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.cardv__media video{position:absolute;inset:0;opacity:0;transition:opacity .25s linear}
.cardv__media video.is-live,.cardv__media video:fullscreen,.cardv__media video:-webkit-full-screen{opacity:1}
/* carrossel do celular: sem camada 3D. No Safari, isso junto com vídeo e canto arredondado deixa preto */
@media (max-width:900px),(hover:none) and (pointer:coarse) and (max-height:560px){
  .cardv{will-change:auto;backface-visibility:visible;-webkit-backface-visibility:visible}
}

/* ENTRADAS rápidas e sem desfoque: desfoque animado é o que mais pesa ao rolar, e 1 s de espera parece lentidão */
[data-rv]{transform:translate3d(0,14px,0);transition:opacity .45s var(--ease),transform .45s var(--ease)}
[data-rv].is-in{transform:none}
[data-rv].rv-group{transform:none}
.rv-group.is-in > *{animation:rvIn .45s var(--ease) backwards;animation-delay:calc(min(var(--i,0),4) * 40ms)}
@keyframes rvIn{from{opacity:0;transform:translate3d(0,12px,0)}to{opacity:1;transform:none}}
[data-rv].rv-zoom{transform:translate3d(0,12px,0) scale(.985);filter:none;transition:opacity .5s var(--ease),transform .5s var(--ease)}
[data-rv].rv-zoom.is-in{transform:none}
[data-reveal]{transition:opacity .5s var(--ease),transform .5s var(--ease)}
[data-reveal="left"]{transform:translate3d(-28px,0,0)}
[data-reveal="right"]{transform:translate3d(28px,0,0)}
@media (prefers-reduced-motion:reduce){
  [data-rv],.rv-group > *,[data-rv].rv-zoom{opacity:1!important;transform:none!important;animation:none!important}
}
/* Royal Connect no celular: sombra por filtro em imagem grande pesa a cada quadro */
@media (max-width:760px){.connect__agent,.connect__app{filter:none}}

/* a roda segue o dedo: sem animação própria */
.mdl__wheel,.mdl__lbl{transition:none}
.mdl__panel{transition:opacity .18s linear,visibility .18s}
.mdl__panel,.mdl__panel.is-on{transform:none}

/* som barrado pelo navegador: o botão de som pulsa em dourado até o primeiro toque */
.cinema__btn.is-hint{animation:sndHint 1.8s ease-in-out infinite;background:rgba(232,202,152,.34)}

/* tela cheia sem som: play grande no centro; o toque liga o som */
.cinema__bigplay{
  position:absolute;z-index:5;left:50%;top:50%;width:92px;height:92px;margin:-46px 0 0 -46px;padding:0;
  display:grid;place-items:center;border:0;border-radius:50%;cursor:pointer;touch-action:manipulation;
  background:linear-gradient(180deg,var(--gold-hi),var(--gold-lo));color:var(--ink);
  box-shadow:0 0 0 10px rgba(232,202,152,.22),0 18px 50px rgba(0,0,0,.6);
  animation:bigPlay 1.8s ease-in-out infinite;
}
.cinema__bigplay[hidden]{display:none}
.cinema__bigplay svg{width:46px;height:46px;margin-left:5px}
@keyframes bigPlay{50%{box-shadow:0 0 0 20px rgba(232,202,152,.1),0 18px 50px rgba(0,0,0,.6)}}
@media (prefers-reduced-motion:reduce){.cinema__bigplay{animation:none}}


/* feedbacks: tela cheia só no celular; no computador sai o botão */
@media not all and (hover:none) and (pointer:coarse){
  .cardv__full{display:none!important}
  .cardv__media video{cursor:default}
}

/* tela cheia sem som: botão de ativar som no centro, no lugar do play */
.cinema__bigplay{
  left:50%;top:50%;width:auto;height:auto;min-height:64px;margin:0;padding:0 28px 0 22px;transform:translate(-50%,-50%);
  display:inline-flex;align-items:center;gap:12px;border-radius:999px;white-space:nowrap;
  font:inherit;font-size:18px;font-weight:700;
}
.cinema__bigplay svg{width:30px;height:30px;margin:0;flex:none}

/* feedbacks no celular: parado na capa até clicar em "Ativar som". No computador não aparece */
.cardv__unmute{display:none}
@media (max-width:900px),(hover:none) and (pointer:coarse) and (max-height:560px){
  .cardv__unmute{
    position:absolute;z-index:4;left:50%;top:50%;transform:translate(-50%,-50%);
    display:inline-flex;align-items:center;gap:8px;min-height:50px;padding:0 18px 0 14px;white-space:nowrap;
    border:0;border-radius:999px;cursor:pointer;touch-action:manipulation;
    background:linear-gradient(180deg,var(--gold-hi),var(--gold-lo));color:var(--ink);
    font:inherit;font-size:15px;font-weight:700;box-shadow:0 0 0 7px rgba(232,202,152,.2),0 14px 34px rgba(0,0,0,.55);
  }
  .cardv__unmute svg{width:23px;height:23px;flex:none}
  .cardv.is-playing .cardv__unmute{display:none}
  /* o primeiro card alinha no início: sem isso o Safari pode parar no segundo */
  .deck__3d{scroll-padding-inline:var(--pad)}
  .cardv:first-child{scroll-snap-align:start}
}

/* capas de arte: o nome e os números já estão na imagem; a legenda do card só aparece com o vídeo tocando */
.cardv.has-thumb .cardv__veil,.cardv.has-thumb .cardv__foot{transition:opacity .25s linear}
.cardv.has-thumb:not(.is-playing) .cardv__veil,.cardv.has-thumb:not(.is-playing) .cardv__foot{opacity:0}
/* botão acima da manchete, sem cobrir o valor */
@media (max-width:900px),(hover:none) and (pointer:coarse) and (max-height:560px){.cardv.has-thumb .cardv__unmute{top:42%}}

/* Amanda's Cleaning: a arte tem o valor mais acima; o botão sobe para não cobrir */
@media (max-width:900px),(hover:none) and (pointer:coarse) and (max-height:560px){.cardv.has-thumb[data-i="8"] .cardv__unmute{top:32%}}
/* LCA Flooring: a arte tem texto no meio; o botão fica no piso, embaixo */
@media (max-width:900px),(hover:none) and (pointer:coarse) and (max-height:560px){.cardv.has-thumb[data-i="3"] .cardv__unmute{top:92%}}


/* texto do banner "Stop Chasing": 16 px também no computador */
@media (min-width:761px){.mdl__banner .sec__lead{font-size:16px;line-height:1.55}}

/* certificações: frase final em destaque */
.cert__txt p + p{margin-top:calc(6px * var(--z));font-weight:600;color:#fff}


/* TODOS os subtítulos em 16 px, no computador e no celular */
.hero2__lead,.hero2__sub,.blk__text,.sec__lead,.certs__sub,.film__where,.mdl__s,.pop__box > p{font-size:16px!important;line-height:1.55}
/* topo no computador: texto mais largo (menos linhas) e cena mais baixa em tela baixa, para o botão aparecer sem rolar */
@media (min-width:761px){.hero2__lead{max-width:min(860px,92vw)}}
@media (min-width:761px) and (max-height:940px){.hero2__scene{height:clamp(300px,calc(100vh - 330px),600px)}}

/* filme da Times Square: toca direto na seção; a tela cheia só abre pelo botão ou tocando nele */
.tsv__play{display:none!important}
.tsv__media{cursor:pointer}

/* FAIXA BLACK ROYAL (novembro): preto, ouro e brilho passando. Só transform/opacity animados */
.offer{
  overflow:hidden;color:#fff;
  background:linear-gradient(90deg,#000 0%,#0b0906 28%,#1a1408 50%,#0b0906 72%,#000 100%);
  box-shadow:inset 0 -1px 0 rgba(255,214,120,.75),0 6px 26px -8px rgba(255,190,80,.55);
}
.offer::before{
  content:"";position:absolute;top:-30%;bottom:-30%;left:0;width:28%;pointer-events:none;
  background:linear-gradient(100deg,transparent 0%,rgba(255,226,150,.08) 30%,rgba(255,240,196,.5) 50%,rgba(255,226,150,.08) 70%,transparent 100%);
  transform:translate3d(-130%,0,0) skewX(-18deg);animation:blackSweep 4.2s cubic-bezier(.45,0,.3,1) infinite;
}
@keyframes blackSweep{0%{transform:translate3d(-130%,0,0) skewX(-18deg)}62%,100%{transform:translate3d(460%,0,0) skewX(-18deg)}}
.offer__in{position:relative;z-index:1;align-items:center}
.offer__tag{
  background:linear-gradient(180deg,#FFE9B0,#D9A441);color:#000;font-weight:800;letter-spacing:.1em;
  box-shadow:0 0 14px rgba(255,200,90,.65);
}
.offer__txt{
  font-weight:800;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;
  font-size:calc(clamp(15px,1.2vw,19px) * var(--z));
  background:linear-gradient(180deg,#FFF3CC 10%,#F2C766 55%,#C8912F 95%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 7px rgba(255,200,90,.55));
}
.offer__txt::before,.offer__txt::after{content:"\2726";margin:0 .5em;font-size:.72em;vertical-align:.08em}
.offer__cta{
  display:inline-flex;align-items:center;padding:3px 13px;border-radius:999px;text-decoration:none;font-weight:700;color:#000;
  background:linear-gradient(180deg,#FFE9B0,#E4B453);animation:blackPulse 1.9s ease-in-out infinite;
}
@keyframes blackPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
.offer__x{z-index:2;color:#FFE9B0;opacity:.8}
@media (max-width:760px){
  .offer{min-height:44px}
  .offer__in{gap:7px;justify-content:center;width:100%;padding-right:22px}
  .offer__tag{font-size:10px;padding:3px 8px;letter-spacing:.06em}
  .offer__txt{font-size:13.5px;letter-spacing:.08em;overflow:visible;display:inline-block;line-height:1.2}
  .offer__txt::before,.offer__txt::after{display:none}
  .offer__cta{display:inline-flex;font-size:11.5px;padding:3px 9px;white-space:nowrap;letter-spacing:0}
}
@media (max-width:374px){
  .offer__txt{font-size:12.5px;letter-spacing:.04em}
  .offer__cta{font-size:11px;padding:3px 7px}
}
@media (prefers-reduced-motion:reduce){.offer::before,.offer__cta{animation:none}}

/* celular muito estreito: sai o mês, fica o nome e o botão */
@media (max-width:340px){.offer__tag{display:none}}


/* TOPO NO CELULAR IGUAL AO PC (01/11): painel do computador ao fundo + coroa e bandeiras em 3D (com movimento); título em 2 linhas */
@media (max-width:760px){
  .hero2 .hero2__scene{background:url("../assets/img/hero-panel-m.webp?v=20261101") center/100% 100% no-repeat;aspect-ratio:1.74;height:auto;width:100vw;margin-left:calc(50% - 50vw);margin-top:4px;
    -webkit-mask:linear-gradient(180deg,transparent 0,#000 9%,#000 84%,transparent 100%);mask:linear-gradient(180deg,transparent 0,#000 9%,#000 84%,transparent 100%)}
  .hero2 .hero2__scene .hero2__flat{display:none!important}
  .hero2 .hero2__scene.is-ready .logo3d__fallback,.hero2 .hero2__scene.flags-ready .logo3d__fallback{display:none}
  .hero2 .hero2__scene::after{display:none}
  .hero2 .hero2__title{font-size:6.1vw;line-height:1.06;letter-spacing:-.02em;margin-top:6px}
  .hero2 .hero2__title span,.hero2 .hero2__title em{white-space:nowrap;display:block}
}

/* 03/11: até o 3D ficar pronto, mostra a foto do topo do PC (coroa + bandeiras), sem a coroa plana sozinha */
@media (max-width:760px){
  .hero2 .hero2__scene:not(.flags-ready){background-image:url("../assets/img/hero-ph-m.webp?v=20261103")}
  .hero2 .hero2__scene .logo3d__fallback{display:none!important}
  .hero2 .hero2__scene canvas{opacity:0;transition:opacity .35s ease}
  .hero2 .hero2__scene.flags-ready canvas{opacity:1}
}
/* 03/11: menos espaço vazio entre as seções no celular */
@media (max-width:760px){
  #agendamentos,#reviews,#galeria,#mapa,#antes-depois,#royal,#servicos,#porque,#comparativo,#connect,#objecoes,#contato{padding-top:52px;padding-bottom:52px}
  #sobre{padding-top:60px;padding-bottom:56px}
  #cases{padding-top:52px}
  #clientes{padding-top:28px;padding-bottom:28px}
  #certificacoes{padding-top:32px;padding-bottom:32px}
  .sec__head{margin-bottom:32px}
}

/* 03/11: logos do topo ("We work with") nas cores originais, sem véu cinza; texto escuro clareado para aparecer no azul */
.hero2 .partner img{filter:none!important;opacity:1!important}
.hero2 .partner img[src*="partners/google-reviews.webp"]{content:url("../assets/real/partners/google-reviews-v2.webp?v=20261103")}
.hero2 .partner img[src*="partners/google-guaranteed.webp"]{content:url("../assets/real/partners/google-guaranteed-v2.webp?v=20261103")}
.hero2 .partner img[src*="partners/meta.webp"]{content:url("../assets/real/partners/meta-v2.webp?v=20261103")}
.hero2 .partner img[src*="partners/thumbtack.webp"]{content:url("../assets/real/partners/thumbtack-v2.webp?v=20261103")}
.hero2 .partner img[src*="partners/yelp.webp"]{content:url("../assets/real/partners/yelp-v2.webp?v=20261103")}
.hero2 .partner img[src*="partners/highlevel.webp"]{content:url("../assets/real/partners/highlevel-v2.webp?v=20261103")}
@media (max-width:760px){.hero2 .partner img{height:24px;max-width:112px}}

/* 03/11 (2): espaço entre seções no celular ainda menor; 3D entra sem esmaecer */
@media (max-width:760px){
  main > section.sec:not(#timessquare):not(#proximos){padding-top:36px!important;padding-bottom:36px!important}
  #cases{padding-bottom:0!important}
  #sobre{padding-top:40px!important;padding-bottom:36px!important}
  #clientes,#certificacoes{padding-top:24px!important;padding-bottom:24px!important}
  .sec__head{margin-bottom:24px!important}
  .hero2 .hero2__scene canvas{transition:none!important}
}