/* ============================================================
   /empresario — página bespoke (hero em vídeo, liquid glass,
   parallax por scroll). Usa os tokens globais de site.css.
   Escopo em .emp para não vazar para outras páginas.
   ============================================================ */

/* ───────────── Ambiente / fundo da página ───────────── */
.emp{
  position: relative;
  /* brilho ambiente sutil que acompanha toda a página */
  background:
    radial-gradient(60% 40% at 80% 0%, rgba(255,106,26,0.08), transparent 60%),
    radial-gradient(50% 40% at 0% 60%, rgba(80,120,255,0.05), transparent 60%),
    var(--bg);
}

/* defs do filtro liquid-glass — invisível, só registra o <filter> */
.glass-defs{ position:absolute; width:0; height:0; overflow:hidden; pointer-events:none; }

/* ───────────── Primitivos Liquid Glass ───────────── */
.glass{
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 20px;
  background: rgba(255,255,255,0.055);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
          backdrop-filter: blur(14px) saturate(160%);
  box-shadow:
    inset 1.5px 1.5px 1px rgba(255,255,255,0.40),
    inset -1px -1px 1px rgba(255,255,255,0.12),
    0 14px 40px -16px rgba(0,0,0,0.7);
}
/* camada de distorção (liquid) — só refrata o que está atrás */
.glass--liquid::before{
  content:""; position:absolute; inset:0; z-index:-1;
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
  filter: url(#glass-distortion);
}
/* brilho diagonal que escorrega no hover */
.glass::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background: linear-gradient(130deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 36%);
  opacity:.8;
}
.glass > *{ position:relative; z-index:1; }

/* Botão de vidro */
.glass-btn{
  --gb-bg: rgba(255,255,255,0.10);
  position: relative; isolation: isolate; overflow: hidden;
  display:inline-flex; align-items:center; gap:10px;
  height:54px; padding: 0 26px; border-radius: 999px;
  font-size:15px; font-weight:600; letter-spacing:-.01em; color:var(--text);
  background: var(--gb-bg);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
          backdrop-filter: blur(12px) saturate(160%);
  box-shadow:
    inset 1.4px 1.4px 1px rgba(255,255,255,0.45),
    inset -1px -1px 1px rgba(255,255,255,0.15),
    0 10px 30px -12px rgba(0,0,0,0.6);
  transition: transform .35s cubic-bezier(.175,.885,.32,1.6), box-shadow .35s ease, background .3s ease;
}
.glass-btn svg{ width:16px; height:16px; }
.glass-btn:hover{ transform: translateY(-2px); background: rgba(255,255,255,0.16); }
.glass-btn.primary{
  color:#0A0A0A;
  background: linear-gradient(180deg, #ff8a45, var(--accent));
  box-shadow:
    inset 1.4px 1.4px 1px rgba(255,255,255,0.6),
    0 16px 36px -12px rgba(255,106,26,0.6);
}
.glass-btn.primary:hover{ background: linear-gradient(180deg, #ff9a5a, #ff7424); }

/* ───────────── Botões Liquid Metal ─────────────
   Porte do componente React (shader liquid-metal): aro metálico
   animado em volta de uma face escura, com brilho que escorre,
   hover acelerando o fluxo e ripple no clique. Tudo em CSS, sem WebGL. */
.lm-btn{
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  height: 50px; padding: 0 28px; border-radius: 999px;
  border: 2px solid transparent;
  font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap;
  color: #ededed; cursor: pointer;
  /* camadas: 1) sheen na face  2) face escura  3) aro metálico (border-box) */
  background:
    linear-gradient(110deg, rgba(255,255,255,0) 38%, rgba(255,255,255,.13) 48%, rgba(255,255,255,.02) 56%, rgba(255,255,255,0) 66%) padding-box,
    linear-gradient(180deg, #242424 0%, #0a0a0a 100%) padding-box,
    linear-gradient(110deg, #3a3a3a, #e8e8e8, #7d7d7d, #ffffff, #6a6a6a, #cccccc, #3a3a3a) border-box;
  background-size: 300% 100%, auto, 300% 100%;
  background-position: 150% 0, center, 0% 0;
  background-repeat: no-repeat;
  animation: lmFlow 4.6s linear infinite;
  box-shadow: 0 14px 34px -14px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.06);
  transition: transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease;
}
@keyframes lmFlow{
  from{ background-position: 150% 0, center, 0% 0; }
  to{   background-position: -150% 0, center, 300% 0; }
}
.lm-btn > *{ position: relative; z-index: 1; }   /* texto/ícone acima dos brilhos */
.lm-btn svg{ width: 16px; height: 16px; flex-shrink: 0; }
.lm-btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 42px -14px rgba(0,0,0,.82), inset 0 1px 0 rgba(255,255,255,.12);
  animation-duration: 1.8s;            /* fluxo acelera no hover (como o shader) */
}
.lm-btn:active{ transform: translateY(0) scale(.985); }

/* Primário — "shiny button": aro cônico girando + pontilhado + shimmer +
   glow que respira no hover. Porte do componente React (@property +
   conic-gradient), recolorido pro --accent do site (era azul). Markup do
   botão inalterado — o "respiro" vira box-shadow animado (não pseudo-
   elemento) porque o .lm-btn tem overflow:hidden e box-shadow escapa
   dele naturalmente, sem precisar de <span> extra em volta do texto. */
@property --lm-angle{ syntax: "<angle>"; inherits: false; initial-value: 0deg; }
/* inherits:true de propósito: o ::before precisa enxergar o offset que o hover
   aplica no botão. Com inherits:false ele cairia no initial-value (0deg) e o
   pontilhado ficaria 95° atrás do brilho do aro — o efeito descolava do traço. */
@property --lm-angle-offset{ syntax: "<angle>"; inherits: true; initial-value: 0deg; }
@property --lm-percent{ syntax: "<percentage>"; inherits: false; initial-value: 5%; }
@property --lm-shine{ syntax: "<color>"; inherits: false; initial-value: #ffffff; }

.lm-btn.primary{
  --lm-bg: #0c0c0c;
  --lm-bg-subtle: #241a10;
  --lm-hi: #FF6A1A;
  --lm-hi-subtle: #ffb37a;
  color: #fafafa;
  background:
    linear-gradient(var(--lm-bg), var(--lm-bg)) padding-box,
    conic-gradient(from calc(var(--lm-angle) - var(--lm-angle-offset)),
      transparent, var(--lm-hi) var(--lm-percent), var(--lm-shine) calc(var(--lm-percent) * 2),
      var(--lm-hi) calc(var(--lm-percent) * 3), transparent calc(var(--lm-percent) * 4)
    ) border-box;
  box-shadow: 0 14px 34px -14px rgba(0,0,0,.7), inset 0 0 0 1px var(--lm-bg-subtle), 0 0 0 0 rgba(255,106,26,0);
  transition: 800ms cubic-bezier(.25,1,.5,1);
  transition-property: --lm-angle-offset, --lm-percent, --lm-shine, transform;
  animation: lmShinyAngle 3s linear infinite, lmBreathe 2.4s ease-in-out infinite;
  animation-play-state: running, paused;   /* o glow só "respira" no hover */
}
/* pontilhado sutil, mascarado por uma cunha cônica que gira junto ao aro */
.lm-btn.primary::before{
  content:""; position:absolute; inset:2px; z-index:-1; border-radius:inherit;
  background: radial-gradient(circle at 2px 2px, #fff calc(2px/4), transparent 0) padding-box;
  background-size: 4px 4px; background-repeat: space;
  /* mesmo offset do aro: a cunha fica sempre 45° à frente do brilho, em repouso e no hover */
  mask-image: conic-gradient(from calc(var(--lm-angle) - var(--lm-angle-offset) + 45deg), black, transparent 10% 90%, black);
  opacity: .35; animation: lmShinyAngle 3s linear infinite;
}
/* brilho interno que acompanha o aro. Antes era um retângulo girando
   inteiro (rotate): num botão comprido ele varria só o meio e as pontas
   arredondadas ficavam pra trás. Agora é um cone de luz com o MESMO ângulo
   e o MESMO ritmo do aro (mesma animação, mesmo offset herdado do hover),
   recortado no formato do botão — a luz de dentro anda colada no contorno. */
.lm-btn.primary::after{
  content:""; position:absolute; inset:2px; z-index:-2; border-radius:inherit;
  background: conic-gradient(from calc(var(--lm-angle) - var(--lm-angle-offset)),
    transparent 0%, rgba(255,106,26,.55) calc(var(--lm-percent) * 2), transparent calc(var(--lm-percent) * 4.5), transparent 100%);
  /* a luz vive perto da borda e some no miolo, onde fica o texto */
  -webkit-mask-image: radial-gradient(farthest-side, transparent 45%, black 100%);
  mask-image: radial-gradient(farthest-side, transparent 45%, black 100%);
  filter: blur(6px);
  opacity: .9; animation: lmShinyAngle 3s linear infinite;
  transition: --lm-percent 800ms cubic-bezier(.25,1,.5,1);
}
.lm-btn.primary:hover::after, .lm-btn.primary:focus-visible::after{ --lm-percent: 20%; }
@keyframes lmShinyAngle{ to{ --lm-angle: 360deg; } }
@keyframes lmShinySpin{ to{ rotate: 360deg; } }
@keyframes lmBreathe{
  0%, 100%{ box-shadow: 0 14px 34px -14px rgba(0,0,0,.7), inset 0 0 0 1px var(--lm-bg-subtle), 0 0 0 0 rgba(255,106,26,0); }
  50%{      box-shadow: 0 14px 34px -14px rgba(0,0,0,.7), inset 0 0 0 1px var(--lm-bg-subtle), 0 0 30px 6px rgba(255,106,26,.55); }
}
.lm-btn.primary:hover, .lm-btn.primary:focus-visible{
  --lm-percent: 20%; --lm-angle-offset: 95deg; --lm-shine: var(--lm-hi-subtle);
  transform: translateY(-2px);
  animation-play-state: running, running;
}
.lm-btn.primary:active{ transform: translateY(0) scale(.985); }
@media (prefers-reduced-motion: reduce){
  .lm-btn.primary, .lm-btn.primary::before, .lm-btn.primary::after{ animation: none; }
}
/* Secundário — gunmetal mais escuro e discreto */
.lm-btn.secondary{
  color: #c9c9c9;
  background:
    linear-gradient(110deg, rgba(255,255,255,0) 40%, rgba(255,255,255,.08) 49%, rgba(255,255,255,.02) 56%, rgba(255,255,255,0) 66%) padding-box,
    linear-gradient(180deg, #1b1b1b 0%, #070707 100%) padding-box,
    linear-gradient(110deg, #2e2e2e, #8c8c8c, #545454, #b8b8b8, #4a4a4a, #7c7c7c, #2e2e2e) border-box;
  background-size: 300% 100%, auto, 300% 100%;
  background-position: 150% 0, center, 0% 0;
  background-repeat: no-repeat;
}

/* Ripple no clique (injetado por empresario.js) */
.lm-ripple{
  position: absolute; z-index: 0; border-radius: 50%; pointer-events: none;
  width: 18px; height: 18px; transform: translate(-50%, -50%) scale(0);
  background: radial-gradient(circle, rgba(255,255,255,.45) 0%, rgba(255,255,255,0) 70%);
  animation: lmRipple .6s ease-out forwards;
}
@keyframes lmRipple{ to{ transform: translate(-50%, -50%) scale(7); opacity: 0; } }

/* ───────────── HERO em vídeo ───────────── */
.emp-hero{
  position: relative;
  min-height: 100vh; min-height: 100svh;
  display: flex; align-items: center;
  overflow: hidden;
  padding: 120px 0 80px;
}
.emp-hero-media{
  position:absolute; inset:-8% 0 0 0;       /* sangra p/ dar folga ao parallax */
  height: 116%;
  z-index:0; pointer-events:none;
  will-change: transform;
}
.emp-hero-media video{
  width:100%; height:100%; object-fit:cover;
  filter: brightness(0.46) contrast(1.06) saturate(1.05);
}
/* escurece e cria foco no texto */
.emp-hero-scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(70% 60% at 28% 42%, rgba(10,10,10,0.10), transparent 60%),
    linear-gradient(180deg, rgba(10,10,10,0.55) 0%, rgba(10,10,10,0.35) 40%, rgba(10,10,10,0.92) 100%),
    linear-gradient(90deg, rgba(10,10,10,0.75) 0%, transparent 55%);
}
.emp-hero-scrim::after{   /* grão sutil */
  content:""; position:absolute; inset:0; opacity:.05;
  background-image: radial-gradient(rgba(255,255,255,.6) 0.5px, transparent 0.5px);
  background-size: 3px 3px;
}
.emp-hero-inner{ position:relative; z-index:3; width:100%; }
.emp-hero-tag{
  display:inline-flex; align-items:center; gap:12px;
  padding: 10px 18px; border-radius:999px;
  font-family:"Geist Mono", monospace; font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--text);
  margin-bottom: 30px;
}
.emp-hero-tag .d{ width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 14px rgba(255,106,26,0.8); }
.emp-hero h1{
  font-size: clamp(46px, 7vw, 104px);
  line-height: 0.96; letter-spacing:-.04em; font-weight:700;
  max-width: 16ch;
  text-shadow: 0 2px 40px rgba(0,0,0,0.5);
}
.emp-hero h1 .accent{ color: var(--accent); }
.emp-hero .lead{
  margin-top: 30px; max-width: 50ch;
  color: #D7D7D7; font-size: clamp(17px, 2vw, 23px);
}
.emp-hero-cta{ display:flex; gap:14px; flex-wrap:wrap; margin-top: 40px; }

/* mini-stats em vidro no rodapé do hero */
.emp-hero-stats{
  display:flex; flex-wrap:wrap; gap: 14px; margin-top: 52px;
}
.emp-stat{
  padding: 16px 22px; border-radius:16px; min-width: 150px;
}
.emp-stat .n{
  font-size: clamp(26px, 3vw, 38px); font-weight:700; letter-spacing:-.03em;
  background: linear-gradient(180deg,#fff,#cfcfcf);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.emp-stat .n .u{ color: var(--accent); -webkit-text-fill-color: var(--accent); }
.emp-stat .l{ font-size:12.5px; color: var(--text-dim); margin-top:2px; }

/* cards de vídeo flutuantes (profundidade no hero) */
.emp-float{
  position:absolute; z-index:2; border-radius:18px; overflow:hidden;
  width: 200px; aspect-ratio: 9/13;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.16), 0 30px 60px -20px rgba(0,0,0,0.8);
  will-change: transform;
}
.emp-float video{ width:100%; height:100%; object-fit:cover; filter: brightness(.9); }
.emp-float .badge{
  position:absolute; left:12px; bottom:12px; z-index:2;
  font-family:"Geist Mono", monospace; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  padding:5px 10px; border-radius:999px; color:var(--text);
  background: rgba(10,10,10,0.45);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18);
}
.emp-float.f1{ right: 6%;  top: 20%; }
.emp-float.f2{ right: 20%; bottom: 14%; width: 160px; }
@media (max-width: 1100px){ .emp-float{ display:none; } }
/* Enquanto os vídeos flutuantes aparecem, o título não pode entrar na
   faixa deles: o f1 ocupa os ~280px da direita (6% + 200px). Sem isto,
   "imagem" e "verdade." passavam por baixo do vídeo. */
@media (min-width: 1101px){
  .emp-hero h1{ font-size: clamp(46px, 6.2vw, 96px); max-width: min(16ch, calc(100vw - 380px)); }
  .emp-hero .lead{ max-width: min(50ch, calc(100vw - 440px)); }
}

/* indicador de scroll */
.emp-scroll-ind{
  position:absolute; left:50%; bottom: 26px; transform:translateX(-50%); z-index:4;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  font-family:"Geist Mono", monospace; font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
  color: var(--text-dim);
}
.emp-scroll-ind .mouse{
  width:24px; height:38px; border-radius:14px; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.35);
  position:relative;
}
.emp-scroll-ind .mouse::before{
  content:""; position:absolute; left:50%; top:8px; transform:translateX(-50%);
  width:3px; height:7px; border-radius:2px; background:var(--accent);
  animation: empWheel 1.6s ease-in-out infinite;
}
@keyframes empWheel{ 0%{opacity:0; transform:translate(-50%,0);} 30%{opacity:1;} 100%{opacity:0; transform:translate(-50%,12px);} }

/* ───────────── Faixa de clientes — marquee + progressive blur ───────────── */
.emp-clients{ padding: 64px 0 18px; position:relative; }
.emp-clients .eyebrow{ display:flex; justify-content:center; margin-bottom: 32px; }
.emp-marquee{ position:relative; width:100%; height:88px; overflow:hidden; }
.emp-marquee-track{
  display:flex; width:max-content; height:100%;
  animation: empMarq 42s linear infinite; will-change: transform;
}
.emp-marquee-group{ display:flex; align-items:center; gap:72px; padding-right:72px; }
@keyframes empMarq{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }
.emp-marquee:hover .emp-marquee-track{ animation-play-state: paused; }
.emp-logo{ display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.emp-logo .logo-img{ opacity:.6; transition: opacity .3s ease, transform .3s ease; }
.emp-logo:hover .logo-img{ opacity:1; transform: scale(1.05); }

/* Progressive blur (porte do componente React: N camadas de blur crescente,
   cada uma mascarada por uma "janela" de gradiente que avança nas bordas). */
.emp-pblur{ position:absolute; top:0; bottom:0; width: 200px; z-index:3; pointer-events:none; }
.emp-pblur.left{ left:0; }
.emp-pblur.right{ right:0; }
.emp-pblur .l{ position:absolute; inset:0; }
/* fade final para o fundo, alinhado ao tema escuro */
.emp-pblur.left::after{ content:""; position:absolute; inset:0; z-index:1; background: linear-gradient(90deg, var(--bg), transparent 92%); }
.emp-pblur.right::after{ content:""; position:absolute; inset:0; z-index:1; background: linear-gradient(270deg, var(--bg), transparent 92%); }

/* ───────────── Statement / problema ───────────── */
.emp-statement{ padding: 130px 0; position:relative; }
.emp-statement .container{ position:relative; }
.emp-statement .eyebrow{ margin-bottom: 28px; }
.emp-statement h2{
  font-size: clamp(32px, 4.6vw, 66px); font-weight:600; letter-spacing:-.035em; line-height:1.08;
  max-width: 20ch;
}
.emp-statement h2 .hl{
  background: linear-gradient(90deg, var(--accent), #ffb07a);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.emp-statement .sub{
  margin-top: 26px; color: var(--text-dim); font-size: clamp(16px,1.8vw,20px);
  line-height:1.6; max-width: 56ch;
}

/* ───────────── Depth / parallax showcase ───────────── */
.emp-depth{
  position:relative; overflow:hidden;
  padding: 0;
  min-height: 92vh;
  display:flex; align-items:center;
}
.emp-depth-bg{
  position:absolute; inset:-12% 0; z-index:0; will-change: transform;
}
.emp-depth-bg video{ width:100%; height:100%; object-fit:cover; filter: brightness(.32) saturate(1.1); }
.emp-depth-bg::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, var(--bg) 0%, transparent 22%, transparent 78%, var(--bg) 100%);
}
.emp-depth-orb{
  position:absolute; border-radius:50%; z-index:1; pointer-events:none; will-change:transform;
  filter: blur(40px); opacity:.6;
}
.emp-depth-orb.o1{ width:380px; height:380px; left:-80px; top:8%; background: radial-gradient(circle, rgba(255,106,26,0.5), transparent 70%); }
.emp-depth-orb.o2{ width:300px; height:300px; right:-60px; bottom:6%; background: radial-gradient(circle, rgba(80,120,255,0.4), transparent 70%); }
.emp-depth-inner{ position:relative; z-index:2; width:100%; }
.emp-depth-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 44px;
}
.emp-depth-card{ padding: 30px 28px; border-radius: 22px; }
.emp-depth-card .ic{
  width:46px; height:46px; border-radius:13px; display:flex; align-items:center; justify-content:center;
  background: var(--accent-soft); color:var(--accent);
  box-shadow: inset 0 0 0 1px rgba(255,106,26,0.3);
  margin-bottom:18px;
}
.emp-depth-card .ic svg{ width:22px; height:22px; }
.emp-depth-card h3{ font-size:20px; letter-spacing:-.02em; }
.emp-depth-card p{ color: var(--text-dim); font-size:14.5px; line-height:1.55; margin-top:10px; }
.emp-depth-head{ max-width: 640px; }
.emp-depth-head .eyebrow{ margin-bottom:18px; }
.emp-depth-head h2{ font-size: clamp(32px,4.2vw,58px); font-weight:600; letter-spacing:-.035em; line-height:1.06; }

/* ───────────── Método — timeline em parallax ───────────── */
.emp-method{ padding: 130px 0; position:relative; }
.emp-method-head{ text-align:center; margin-bottom: 72px; }
.emp-method-head .eyebrow{ margin-bottom:18px; }
.emp-method-head h2{ font-size: clamp(34px,4.4vw,64px); font-weight:600; letter-spacing:-.035em; line-height:1.04; max-width:18ch; margin:0 auto; }
.emp-steps{ position:relative; max-width: 960px; margin:0 auto; }
/* linha central */
.emp-steps::before{
  content:""; position:absolute; left:50%; top:0; bottom:0; width:1px; transform:translateX(-50%);
  background: linear-gradient(180deg, transparent, var(--line-strong) 12%, var(--line-strong) 88%, transparent);
}
.emp-step{
  position:relative; display:grid; grid-template-columns: 1fr 1fr; gap: 40px;
  padding: 30px 0;
}
.emp-step .emp-step-card{ padding: 28px; border-radius: 20px; }
.emp-step:nth-child(even) .emp-step-card{ grid-column: 2; }
.emp-step:nth-child(odd)  .emp-step-card{ grid-column: 1; text-align:right; }
.emp-step:nth-child(odd) .emp-step-tags{ justify-content:flex-end; }
.emp-step .num{
  position:absolute; left:50%; top:38px; transform:translate(-50%,0); z-index:3;
  width:46px; height:46px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:"Geist Mono", monospace; font-size:14px; font-weight:600;
  color: var(--text-dim);
  background: linear-gradient(180deg,#242424,#191919);
  box-shadow: 0 0 0 6px var(--bg), inset 0 0 0 1px var(--line-strong);
  opacity:.6;
  transition: background .45s ease, box-shadow .5s ease, color .45s ease, opacity .45s ease;
}
/* círculo "aceso" quando a timeline chega nele (classe .lit via JS) */
.emp-step.lit .num{
  color:#0A0A0A; opacity:1;
  background: linear-gradient(180deg,#ff8a45,var(--accent));
  box-shadow: 0 0 0 6px var(--bg), 0 10px 24px -8px rgba(255,106,26,0.7), 0 0 22px -2px rgba(255,106,26,0.55);
}
/* linha central laranja que preenche conforme a rolagem (altura via JS) */
.emp-steps__fill{
  position:absolute; left:50%; top:0; width:2px; height:0; transform:translateX(-50%);
  z-index:1; border-radius:2px; pointer-events:none;
  background: linear-gradient(180deg, var(--accent), #ff8a45);
  box-shadow: 0 0 12px rgba(255,106,26,0.6);
  transition: height .1s linear;
}
.emp-step-card .t{ font-size:21px; font-weight:600; letter-spacing:-.02em; }
.emp-step-card .d{ color: var(--text-dim); font-size:14.5px; line-height:1.55; margin-top:10px; }
.emp-step-tags{ display:flex; gap:8px; margin-top:16px; }
.emp-step-tags span{
  font-family:"Geist Mono", monospace; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
  color: var(--accent); padding:5px 10px; border-radius:999px; background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px rgba(255,106,26,0.25);
}

/* ───────────── Serviços — grid de vidro ───────────── */
.emp-services{ padding: 0 0 130px; }
.emp-services-head{ text-align:center; margin-bottom: 56px; }
.emp-services-head .eyebrow{ margin-bottom:16px; }
.emp-services-head h2{ font-size: clamp(32px,4.2vw,58px); font-weight:600; letter-spacing:-.035em; line-height:1.05; }
.emp-svc-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:16px; }
.emp-svc{
  padding: 28px; border-radius: 20px; min-height: 180px;
  display:flex; flex-direction:column; justify-content:space-between;
  transition: transform .4s cubic-bezier(.2,.7,.2,1);
}
.emp-svc:hover{ transform: translateY(-6px); }
.emp-svc .ic{
  width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  color: var(--accent); background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px rgba(255,106,26,0.28);
}
.emp-svc .ic svg{ width:22px; height:22px; }
.emp-svc .nm{ font-size:18px; font-weight:600; letter-spacing:-.01em; }
.emp-svc .ds{ color:var(--text-dim); font-size:13.5px; line-height:1.5; margin-top:6px; }

/* ───────────── Métricas / resultados ───────────── */
.emp-metrics{ padding: 0 0 130px; }
.emp-metrics-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:16px; }
.emp-metric{ padding: 32px 26px; border-radius: 20px; text-align:left; }
.emp-metric .n{
  font-size: clamp(40px,5vw,60px); font-weight:700; letter-spacing:-.04em; line-height:1;
  background:linear-gradient(180deg,#fff,#b6b6b6);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.emp-metric .n .u{ color:var(--accent); -webkit-text-fill-color:var(--accent); font-size:.55em; }
.emp-metric .l{ color: var(--text-dim); font-size:13.5px; margin-top:10px; line-height:1.45; }

/* ───────────── Proposta / planos ───────────── */
.emp-plans{ padding: 0 0 130px; }
.emp-plans-head{ text-align:center; margin-bottom: 56px; }
.emp-plans-head .eyebrow{ margin-bottom:16px; }
.emp-plans-head h2{ font-size: clamp(32px,4.2vw,58px); font-weight:600; letter-spacing:-.035em; line-height:1.05; max-width:18ch; margin:0 auto; }
.emp-plans-head p{ color:var(--text-dim); font-size:17px; margin:20px auto 0; max-width:540px; }
.emp-plans-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:18px; align-items:stretch; }
.emp-plan{
  padding: 34px 30px; border-radius: 24px;
  display:flex; flex-direction:column;
}
.emp-plan.feat{
  background: rgba(255,106,26,0.10);
  box-shadow:
    inset 1.5px 1.5px 1px rgba(255,255,255,0.4),
    inset 0 0 0 1px rgba(255,106,26,0.45),
    0 24px 60px -22px rgba(255,106,26,0.5);
}
.emp-plan .tier{
  display:inline-flex; align-items:center; gap:8px;
  font-family:"Geist Mono", monospace; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
  color: var(--text-dim);
}
.emp-plan.feat .tier{ color: var(--accent); }
.emp-plan .pill{
  margin-left:auto; font-size:10.5px; font-weight:600; color:#0A0A0A; background:var(--accent);
  padding:4px 10px; border-radius:999px; letter-spacing:.02em;
}
.emp-plan .tier-row{ display:flex; align-items:center; gap:10px; }
.emp-plan .price{ display:flex; align-items:baseline; gap:6px; margin:22px 0 4px; flex-wrap:wrap; }
.emp-plan .price .cur{ font-size:22px; color:var(--text); font-weight:500; }
.emp-plan .price .val{ font-size: clamp(40px,5vw,54px); font-weight:700; letter-spacing:-.04em; line-height:1; }
.emp-plan .price .per{ font-size:14px; color:var(--text-dim); }
.emp-plan .blurb{ color:var(--text-dim); font-size:14px; line-height:1.55; margin: 10px 0 24px; }
.emp-plan ul{ list-style:none; padding:0; margin:0 0 28px; display:flex; flex-direction:column; gap:13px; }
.emp-plan li{ display:flex; gap:11px; align-items:flex-start; font-size:14px; color:#D2D2D2; line-height:1.45; }
.emp-plan li svg{ width:18px; height:18px; flex-shrink:0; color:var(--accent); margin-top:1px; }
.emp-plan .cta{ margin-top:auto; }
.emp-plan .cta .lm-btn{ width:100%; justify-content:center; height:50px; }
.emp-plans-note{
  text-align:center; margin-top:28px;
  font-family:"Geist Mono", monospace; font-size:12px; letter-spacing:.06em; color: var(--text-mute);
}

/* ───────────── CTA final ───────────── */
.emp-cta{ position:relative; overflow:hidden; padding: 150px 0; text-align:center; }
.emp-cta-media{ position:absolute; inset:-10% 0; z-index:0; will-change:transform; }
.emp-cta-media video{ width:100%; height:100%; object-fit:cover; filter: brightness(.3) saturate(1.1); }
.emp-cta-media::after{ content:""; position:absolute; inset:0; background: radial-gradient(60% 60% at 50% 50%, rgba(10,10,10,0.4), rgba(10,10,10,0.92)); }
.emp-cta .container{ position:relative; z-index:2; }
.emp-cta .eyebrow{ justify-content:center; margin-bottom:20px; }
.emp-cta h2{ font-size: clamp(36px,5.2vw,80px); font-weight:700; letter-spacing:-.04em; line-height:1; max-width:16ch; margin:0 auto; }
.emp-cta p{ color:#D7D7D7; font-size:18px; margin:24px auto 0; max-width:560px; }
.emp-cta-actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:40px; }

/* ───────────── Reveal helper local (sobe + escala) ───────────── */
.emp .up{ opacity:0; transform: translateY(34px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
.emp .up.in{ opacity:1; transform: none; }
.emp .up.d1{ transition-delay:.08s; } .emp .up.d2{ transition-delay:.16s; } .emp .up.d3{ transition-delay:.24s; }

/* ───────────── Responsivo ───────────── */
@media (max-width: 1100px){
  .emp-depth-grid{ grid-template-columns: 1fr; }
  .emp-svc-grid{ grid-template-columns: 1fr 1fr; }
  .emp-metrics-grid{ grid-template-columns: 1fr 1fr; }
  .emp-plans-grid{ grid-template-columns: 1fr; max-width:520px; margin:0 auto; }
}
@media (max-width: 820px){
  .emp-hero{ padding: 110px 0 70px; }
  .emp-svc-grid{ grid-template-columns: 1fr; }
  .emp-metrics-grid{ grid-template-columns: 1fr 1fr; }
  /* timeline vira coluna única à esquerda */
  .emp-steps::before{ left: 22px; }
  .emp-steps__fill{ left: 22px; }
  .emp-step{ grid-template-columns: 1fr; gap:0; padding: 14px 0 14px 60px; }
  .emp-step .num{ left:22px; top: 24px; transform:translate(-50%,0); width:40px; height:40px; }
  .emp-step:nth-child(even) .emp-step-card,
  .emp-step:nth-child(odd)  .emp-step-card{ grid-column: 1; text-align:left; }
  .emp-step:nth-child(odd) .emp-step-tags{ justify-content:flex-start; }
}
@media (max-width: 560px){
  .emp-metrics-grid{ grid-template-columns: 1fr; }
  .emp-hero-stats{ gap:10px; }
  .emp-stat{ min-width: calc(50% - 5px); flex:1; }
}

/* Respeita preferência de menos movimento */
@media (max-width: 820px){
  .emp-pblur{ width: 88px; }
  .emp-marquee{ height: 70px; }
  .emp-marquee-group{ gap: 48px; padding-right: 48px; }
}

@media (prefers-reduced-motion: reduce){
  .emp-hero-media, .emp-depth-bg, .emp-depth-orb, .emp-float, .emp-cta-media{ transform:none !important; }
  .emp-scroll-ind .mouse::before{ animation:none; }
  .emp .up{ transition:none; opacity:1; transform:none; }
  .emp-marquee-track{ animation:none; }
  .lm-btn{ animation:none; }
}

    /* ── adicionais: serviços avulsos em cima de qualquer pacote ───────
   Classe própria (não presa a #pacotes) porque casamento e aniversário
   usam o mesmo id de seção. data-valor de cada .addon também alimenta as
   caixas do pop-up de orçamento. */
    .addons-sec{ max-width:1080px; margin:72px auto 0; }
    .addons-sec .addons-head{ text-align:center; }
    .addons-sec .addons-head h3{ font-size:clamp(22px,2.6vw,30px); font-weight:600; letter-spacing:-.03em; line-height:1.15; }
    .addons-sec .addons-head p{ color:var(--text-dim); font-size:14.5px; margin-top:10px; }
    .addons-sec .addons-grid{ list-style:none; padding:0; margin:30px 0 0;
      display:grid; grid-template-columns:repeat(auto-fit,minmax(258px,1fr)); gap:12px;
      grid-auto-rows:1fr; }   /* 1fr: nomes de 1 e de 2 linhas ficam com a mesma altura */
    /* nome em cima, preço embaixo: lado a lado, um rótulo longo como
       "a partir de R$ 1.800" não cabia junto de um nome de 3 linhas e
       vazava para fora do cartão. Empilhado, cada um usa a largura toda
       e os preços ficam alinhados na base de todos os cartões. */
    .addons-sec .addon{ display:flex; flex-direction:column; justify-content:space-between; gap:10px;
      padding:16px 18px; border-radius:14px; }
    .addons-sec .addon .a-name{ color:var(--text-dim); font-size:13.5px; line-height:1.45; }
    .addons-sec .addon .a-price{ font-family:"Geist Mono",monospace; font-size:15px; font-weight:600;
      color:var(--accent); letter-spacing:-.01em; }
    .addons-sec .addons-obs{ max-width:76ch; margin:26px auto 0; text-align:center;
      color:var(--text-mute); font-size:12.5px; line-height:1.6; }

/* ── pacotes em layout bento (aniversário e casamento) ─────────────
   Sem prefixo de id de propósito: as duas páginas usam #pacotes, então
   as regras moram aqui no CSS compartilhado e valem para as duas. */
    .bento-plans{ display:grid; grid-template-columns:repeat(8,1fr); gap:14px; max-width:1080px; margin:0 auto; }
    .bento-card{ position:relative; overflow:hidden; border-radius:18px; }
    .bento-feat{ grid-column:span 8; }
    /* cartão estreito: CTA vai para a base, largura toda. No topo, ao lado da
       etiqueta, o botão ficava espremido com um vão grande no meio. Como o
       botão é o último item e a lista estica, os cartões terminam alinhados
       mesmo com quantidades diferentes de itens. */
    .bento-sm{ grid-column:span 4; display:flex; flex-direction:column; }
    .bento-sm .bento-body{ display:flex; flex-direction:column; flex:1; }
    .bento-sm .bento-list{ flex:1; }
    .bento-sm .bento-cta{ margin-top:26px; }
    .bento-sm .bento-cta .lm-btn{ width:100%; }
    /* grade de linhas atrás do card destaque */
    .bento-fx{ position:absolute; inset:0; z-index:0; pointer-events:none;
      -webkit-mask-image:linear-gradient(#fff, transparent 80%); mask-image:linear-gradient(#fff, transparent 80%); }
    .bento-fx::before{ content:""; position:absolute; inset:0;
      background-image:linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px),
                       linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px);
      background-size:24px 24px; }
    .bento-head{ position:relative; z-index:1; display:flex; align-items:center; gap:10px; padding:20px 22px 0; flex-wrap:wrap; }
    .bento-tag{ font-family:"Geist Mono",monospace; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
      padding:5px 11px; border-radius:999px; background:rgba(255,255,255,.06); color:var(--text-dim); }
    .bento-rec{ display:inline-flex; align-items:center; gap:6px; color:var(--accent);
      background:var(--accent-soft); box-shadow:inset 0 0 0 1px rgba(255,106,26,.3); }
    .bento-rec svg{ width:12px; height:12px; }
    .bento-head .lm-btn{ margin-left:auto; }
    .bento-body{ position:relative; z-index:1; padding:16px 22px 24px; }
    .bento-feat .bento-body{ display:flex; gap:32px; align-items:flex-start; }
    .bento-feat .bento-left{ flex:0 0 32%; }
    .bento-feat .bento-right{ flex:1 1 68%; }
    .bento-price{ display:flex; align-items:flex-end; gap:5px; font-family:"Geist Mono",monospace; color:#fff; }
    .bento-price .cur{ font-size:20px; font-weight:600; color:var(--text-dim); margin-bottom:8px; }
    .bento-price .val{ font-size:clamp(40px,5vw,56px); font-weight:600; letter-spacing:-.03em; line-height:1; }
    .bento-price .per{ font-size:13px; color:var(--text-dim); margin-bottom:9px; }
    .bento-blurb{ color:var(--text-dim); font-size:13.5px; line-height:1.55; margin-top:12px; max-width:34ch; }
    .bento-list{ list-style:none; padding:0; margin:18px 0 0; display:grid; gap:13px; }
    .bento-feat .bento-list{ grid-template-columns:1fr 1fr; margin-top:0; gap:13px 24px; }
    .bento-list li{ display:flex; align-items:center; gap:11px; color:var(--text-dim); font-size:13.5px; line-height:1.4; }
    .bento-chk{ flex:none; width:19px; height:19px; border-radius:50%; color:#0A0A0A;
      background:linear-gradient(180deg,#ff8a45,var(--accent)); display:flex; align-items:center; justify-content:center;
      box-shadow:0 4px 12px -4px rgba(255,106,26,.6); }
    .bento-chk svg{ width:11px; height:11px; }

    @media (max-width:820px){
      .bento-plans{ grid-template-columns:1fr; }
      .bento-feat, .bento-sm{ grid-column:1 / -1; }
      .bento-feat .bento-body{ flex-direction:column; gap:18px; }
      .bento-feat .bento-list{ grid-template-columns:1fr; }
    }