/* ══════════════════════════════════════════════════════════
   1. TOKENS
   ══════════════════════════════════════════════════════════ */
:root{
  --ink:#0a0a0a; --on-ink:#fff;
  --gray-600:#8d8d8d; --gray-500:#9a9a9a; --gray-300:#c9c9c9;
  --line:#e2e2e2; --line-soft:#efefef;
  --ph:#e3e3e3; --ph-2:#ededed; --frame:#cfcfcf; --beige:#e7e8e0;
  --surface:#fff; --panel:#fafafa; --card:#f2f1ee;
  --dot:#c9c9c9; --wire:#b9b9b9;
  --accent:#e2fb50; --on-accent:#0a0a0a;
  --r-sm:12px; --r-md:18px; --r-lg:26px; --r-xl:32px; --r-pill:999px;
  --font:"Instrument Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
  --t:.22s cubic-bezier(.4,0,.2,1);
  --slide:.62s cubic-bezier(.32,.72,.28,1);
  --pad:22px;
  --gutter:clamp(16px,4vw,64px);
  --max:1440px;
  --gap:14px;
}
@media (min-width:900px){:root{--gutter:46px;--max:1180px;--gap:18px}}
html[data-theme="dark"]{
  --ink:#f2f2f2; --on-ink:#0a0a0a;
  --gray-600:#8a8a8a; --gray-500:#7c7c7c; --gray-300:#5a5a5a;
  --line:#2a2a2a; --line-soft:#232323;
  --ph:#232323; --ph-2:#1d1d1d; --frame:#2e2e2e; --beige:#22231e;
  --surface:#111; --panel:#191919; --card:#1a1a1a;
  --dot:#333; --wire:#454545;
}

/* ══════════════════════════════════════════════════════════
   2. BASE
   ══════════════════════════════════════════════════════════ */
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
body{
  background:var(--surface);color:var(--ink);font-family:var(--font);
  -webkit-font-smoothing:antialiased;display:flex;justify-content:center;
  transition:background .25s,color .25s;
}
html[data-theme="dark"] body{background:#000}
button{font-family:inherit;color:inherit}
a{color:inherit;text-decoration:none}

.screen{
  width:100%;max-width:var(--max);margin:0 auto;background:transparent;
  padding:22px var(--gutter) 0;position:relative;overflow:hidden;
  transition:background .25s;
}


/* faixa com malha de pontos */
.dotted{position:relative}
.dotted::before{
  content:"";position:absolute;inset:0 calc(var(--gutter)*-1);
  background-image:radial-gradient(var(--dot) 1.2px,transparent 1.2px);
  background-size:27px 27px;background-position:11px 11px;pointer-events:none;
  opacity:.45;
}
.dotted > *{position:relative}

/* ══════════════════════════════════════════════════════════
   3. HEADER
   ══════════════════════════════════════════════════════════ */
.top{display:flex;align-items:center;justify-content:space-between;gap:14px;position:relative;z-index:90}
.logo{width:120px;height:44px;flex:none;color:var(--ink)}
.logo svg{display:none}
.logo img{width:100%;height:100%;display:block;object-fit:contain}
.logo .fg{fill:currentColor}.logo .bg{fill:var(--surface)}
.topnav{display:none}
@media (min-width:900px){
  .logo{width:120px;height:44px}
  .topnav{display:flex;align-items:center;gap:6px;margin-left:auto;margin-right:18px}
  .topnav a{
    padding:11px 18px;border-radius:var(--r-pill);border:1.4px solid transparent;
    font-size:15px;letter-spacing:-.2px;color:var(--gray-600);transition:all var(--t);
  }
  .topnav a:hover{color:var(--ink);border-color:var(--line)}
  .topnav a.is-on{color:var(--ink);font-weight:500}
  .nav .burger,.nav .label{display:none}
  .nav{padding:9px}
}
.nav{display:flex;align-items:center;gap:12px;background:var(--ink);border-radius:var(--r-pill);padding:0 20px;height:48px;margin-left:auto;cursor:pointer}
@media (min-width:900px){.nav{margin-left:0}}
.burger{display:flex;flex-direction:column;justify-content:center;gap:5px;width:22px;height:48px;background:none;border:0;cursor:pointer;padding:0;flex:none}
.burger span{display:block;height:1.6px;background:var(--on-ink);border-radius:2px;width:100%;transition:transform var(--t),width var(--t)}
.burger span:last-child{width:80%}
.nav.is-open .burger span:first-child{transform:translateY(3.3px) rotate(45deg)}
.nav.is-open .burger span:last-child{width:100%;transform:translateY(-3.3px) rotate(-45deg)}
.nav .label{color:var(--on-ink);font-size:17px;letter-spacing:-.2px}
.moon{width:34px;height:34px;border-radius:50%;background:#2c2c2c;display:grid;place-items:center;border:0;cursor:pointer;flex:none;transition:transform var(--t)}
html[data-theme="dark"] .moon{background:#c9c9c9}
.moon:hover{transform:rotate(-18deg)}
.moon svg{width:16px;height:16px;stroke:var(--on-ink);fill:none}

/* ── menu mobile ── */
.mmenu[hidden]{display:none}
.mmenu{
  position:fixed;inset:0;z-index:80;background:var(--surface);
  padding:96px var(--gutter) 40px;overflow-y:auto;
  animation:mmenu-in .22s cubic-bezier(.4,0,.2,1);
}
@keyframes mmenu-in{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
.mmenu__nav{display:flex;flex-direction:column}
.mmenu__nav a{
  font-size:22px;letter-spacing:-.4px;color:var(--ink);
  padding:18px 2px;border-bottom:1.4px solid var(--line-soft);
}
.mmenu__nav a:last-child{border-bottom:0}
body.is-locked{overflow:hidden}
@media (min-width:900px){.mmenu{display:none}}

/* ══════════════════════════════════════════════════════════
   4. HERO · CATÁLOGO
   ══════════════════════════════════════════════════════════ */
.headline{text-align:center;margin-top:56px;font-size:42px;line-height:1.06;letter-spacing:-1.6px}
.headline .l1{font-weight:500}
.headline .l2{font-weight:400;color:var(--gray-500);display:block}
@media (min-width:900px){.headline{font-size:72px;letter-spacing:-3px;margin-top:64px}}
@media (min-width:1280px){.headline{font-size:92px;letter-spacing:-4px;margin-top:80px}}

/* ── HERO WordPress (migrado de _local/heros/wordpress.html) ──
   Referência 820x300. Tudo em cqw, então escala junto com a largura.
   Cores originais do componente mapeadas para os tokens do site,
   para acompanhar o tema claro/escuro. */
.hero-slot{margin:42px calc(var(--gutter)*-1) 30px}
@media (min-width:900px){.hero-slot{margin-top:52px}}
.hero-slot [data-hero-panel][hidden]{display:none}
/* altura padronizada para todos os heroes do slot (a da Loja digital).
   Os elementos são posicionados em cqw (% da LARGURA), então mudar a
   altura só ajusta a moldura — nada reposiciona nem corta. */
.hero-slot [data-hero-panel]{aspect-ratio:1071/417}
@media (max-width:640px){.hero-slot [data-hero-panel]{aspect-ratio:640/400}}

.wp-hero{
  position:relative;width:100%;overflow:hidden;
  container-type:inline-size;isolation:isolate;user-select:none;
  --wp-red:#E03E1A;
  --wp-shadow:0 .60cqw 2.00cqw rgba(23,23,26,.10),0 .12cqw .40cqw rgba(23,23,26,.06);
}

/* 1. wordmark gigante, atrás da foto */
.wp-hero__wordmark{
  position:absolute;top:13.41cqw;left:50%;transform:translateX(-50%);
  width:103%;height:auto;display:block;z-index:1;pointer-events:none;opacity:.14;
  animation:wp-rise-wide 1.1s cubic-bezier(.16,.84,.36,1) .05s backwards;
}
html[data-theme="dark"] .wp-hero__wordmark{filter:invert(1);opacity:.18}

/* 2. string binária decorativa */
.wp-hero__binary{
  position:absolute;top:12.80cqw;right:0;width:28.66cqw;margin:0;z-index:2;
  font-family:var(--font);font-size:1.22cqw;line-height:1;letter-spacing:.02cqw;
  color:var(--gray-300);white-space:nowrap;overflow:hidden;
  direction:rtl;text-align:right;border-left:.18cqw solid transparent;
  animation:wp-type 1.05s steps(40,end) .95s backwards,wp-caret .55s steps(1,end) .95s infinite;
}

/* 3. foto */
.wp-hero__photo{
  position:absolute;top:1.22cqw;left:50%;transform:translateX(-50%);
  width:22.80cqw;height:28.29cqw;object-fit:cover;object-position:center top;
  border-radius:2.75cqw;display:block;z-index:3;
  animation:wp-rise-center 1s cubic-bezier(.16,.84,.36,1) .28s backwards;
}

/* 4. ícone Elementor */
.wp-hero__elementor{
  position:absolute;top:5.49cqw;left:61.95cqw;width:6.34cqw;height:6.34cqw;
  border-radius:1.71cqw;display:block;z-index:4;
  animation:wp-pop .7s cubic-bezier(.34,1.4,.5,1) .52s backwards;
}

/* 5. pílulas flutuantes */
.wp-hero__pill{
  position:absolute;z-index:5;display:inline-flex;align-items:center;gap:.96cqw;
  border-radius:999px;font-size:1.55cqw;font-weight:500;letter-spacing:-.01em;
  line-height:1;white-space:nowrap;
}
.wp-hero__pill img{width:1.92cqw;height:1.92cqw;display:block;flex:none}
.wp-hero__pill--modelos{
  top:19.15cqw;left:25.24cqw;height:4.51cqw;padding:0 2.09cqw;
  background:var(--wp-red);color:#fff;box-shadow:var(--wp-shadow);
  animation:wp-pill-left .75s cubic-bezier(.34,1.3,.5,1) .66s backwards;
}
.wp-hero__pill--recursos{
  top:25.61cqw;left:54.76cqw;height:4.72cqw;padding:0 2.30cqw;
  background:var(--surface);color:var(--ink);box-shadow:var(--wp-shadow);
  animation:wp-pill-right .75s cubic-bezier(.34,1.3,.5,1) .80s backwards;
}
html[data-theme="dark"] .wp-hero__pill--recursos{background:var(--panel)}

@keyframes wp-rise-wide{from{opacity:0;transform:translateX(-50%) translateY(2.4cqw) scale(.985)}}
@keyframes wp-rise-center{from{opacity:0;transform:translateX(-50%) translateY(3.2cqw) scale(.96)}}
@keyframes wp-pop{from{opacity:0;transform:translateY(1.2cqw) scale(.7)}}
@keyframes wp-pill-left{from{opacity:0;transform:translateX(-2.4cqw) scale(.94)}}
@keyframes wp-pill-right{from{opacity:0;transform:translateX(2.4cqw) scale(.94)}}
@keyframes wp-type{from{width:0}}
@keyframes wp-caret{0%,49%{border-left-color:var(--gray-300)}50%,100%{border-left-color:transparent}}

@media (prefers-reduced-motion:no-preference){
  .wp-hero__pill,.wp-hero__elementor{transition:transform .35s cubic-bezier(.2,.7,.3,1)}
  .wp-hero:hover .wp-hero__pill--modelos,
  .wp-hero:hover .wp-hero__pill--recursos{transform:translateY(-.45cqw)}
  .wp-hero:hover .wp-hero__elementor{transform:translateY(-.35cqw)}
}
@media (prefers-reduced-motion:reduce){
  .wp-hero__wordmark,.wp-hero__photo,.wp-hero__elementor,
  .wp-hero__pill,.wp-hero__binary{animation:none !important}
}

/* mobile: a escala proporcional pura ficaria pequena demais */
@media (max-width:640px){
  .wp-hero__wordmark{width:150%;top:22cqw}
  .wp-hero__photo{top:2cqw;width:38cqw;height:47cqw;border-radius:4.4cqw}
  .wp-hero__elementor{top:4.5cqw;left:auto;right:5cqw;width:8.4cqw;height:8.4cqw;border-radius:2.2cqw}
  .wp-hero__binary{display:none}
  .wp-hero__pill{font-size:2.5cqw;gap:1.4cqw}
  .wp-hero__pill img{width:3cqw;height:3cqw}
  .wp-hero__pill--modelos{top:24cqw;left:3cqw;height:7cqw;padding:0 3.4cqw}
  .wp-hero__pill--recursos{top:37cqw;left:auto;right:3cqw;height:7.3cqw;padding:0 3.7cqw}
}

.foot{display:flex;align-items:center;justify-content:space-between;padding:26px 2px 16px;font-size:11px;color:var(--gray-600)}
.foot .scroll{letter-spacing:.06em}
.foot .rule{flex:1;height:1px;background:var(--line-soft);margin:0 14px}

.chips-wrap{position:relative;margin:0 calc(var(--gutter)*-1)}
.chips{display:flex;gap:10px;overflow-x:auto;padding:2px calc(var(--gutter) + 16px) 4px;scrollbar-width:none}
@media (min-width:900px){.chips{flex-wrap:wrap;justify-content:center}}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;border:1.4px solid var(--line);border-radius:var(--r-pill);background:var(--surface);color:var(--ink);padding:14px 26px;font-size:16px;letter-spacing:-.2px;white-space:nowrap;cursor:pointer;transition:all var(--t)}
.chip:hover{border-color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--on-ink);border-color:var(--ink)}
.chip.ghost{color:var(--gray-300);border-color:var(--line-soft)}
.fade{position:absolute;top:0;bottom:4px;width:34px;pointer-events:none}
.fade.l{left:0;background:linear-gradient(90deg,var(--surface) 30%,transparent)}
.fade.r{right:0;background:linear-gradient(270deg,var(--surface) 30%,transparent)}
@media (min-width:900px){.fade{display:none}}

/* ══════════════════════════════════════════════════════════
   5. TIPOGRAFIA DE SEÇÃO
   ══════════════════════════════════════════════════════════ */
.section{margin-top:96px}
@media (min-width:900px){.section{margin-top:132px}}
@media (min-width:1280px){.section{margin-top:168px}}
.split{display:grid;gap:10px}
@media (max-width:899px){
  .split--cta-last > div:first-child{display:contents}
  /* viram itens do grid: sem esticar os elementos que sao inline por natureza */
  .split--cta-last > div:first-child > .tagline,
  .split--cta-last > div:first-child > .eyebrow{justify-self:start}
  .split--cta-last > div:first-child > .cta{order:2;justify-self:center;margin-top:28px}
  .split--cta-last > .flow{order:1}
}
@media (min-width:900px){
  .split{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:64px;align-items:center}
  .split--rev > *:first-child{order:2}
  .split--rev{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr)}
}
@media (min-width:1280px){.split{gap:88px}}

.eyebrow{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gray-600);margin-bottom:16px}
.tagline{display:inline-flex;border:1.4px solid var(--ink);border-radius:var(--r-pill);padding:8px 16px;font-size:12.5px;letter-spacing:-.1px;margin-bottom:22px}
.title{font-size:38px;line-height:1.06;letter-spacing:-1.8px;font-weight:400;max-width:13ch}
.title b{font-weight:500}
.title em{font-style:normal;color:var(--gray-500)}
@media (min-width:900px){.title{font-size:50px;letter-spacing:-2.4px}}
@media (min-width:1280px){.title{font-size:60px;letter-spacing:-3px;max-width:12ch}}
@media (max-width:370px){.title{font-size:32px;letter-spacing:-1.4px}}
.para{font-size:18px;line-height:1.55;color:var(--gray-600);margin-top:20px;max-width:36ch}
@media (min-width:900px){.para{margin-top:24px;max-width:44ch}}

.cta{
  display:inline-flex;align-items:center;gap:12px;margin-top:30px;
  background:var(--surface);color:var(--ink);border:1.4px solid var(--line);
  border-radius:var(--r-pill);padding:7px 8px 7px 24px;font-size:16px;letter-spacing:-.2px;
  cursor:pointer;transition:border-color var(--t),transform var(--t);
}
.cta:hover{border-color:var(--ink)}
.cta:active{transform:scale(.98)}
.cta .badge{width:38px;height:38px;border-radius:50%;background:var(--accent);display:grid;place-items:center;flex:none}
.cta .badge svg{width:19px;height:19px;fill:var(--on-accent)}

/* ══════════════════════════════════════════════════════════
   6. DEPOIMENTOS
   ══════════════════════════════════════════════════════════ */
.voices__head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:34px}
.voices__title{font-size:38px;font-weight:400;letter-spacing:-1.8px;line-height:1.05}
.voices__title b{font-weight:500}
@media (min-width:900px){.voices__title{font-size:52px;letter-spacing:-2.5px}}
@media (min-width:1280px){.voices__title{font-size:62px;letter-spacing:-3px}}
.voices__nav{display:flex;align-items:center;gap:10px;flex:none}
.arrowbtn{
  width:56px;height:56px;border-radius:50%;flex:none;cursor:pointer;
  background:var(--surface);border:1.4px solid var(--line);
  display:grid;place-items:center;transition:border-color var(--t),transform var(--t);
}
.arrowbtn:hover{border-color:var(--ink);transform:scale(1.05)}
.arrowbtn:active{transform:scale(.96)}
.arrowbtn svg{width:19px;height:19px;stroke:var(--ink);fill:none}
.counter{font-size:13px;color:var(--gray-600);min-width:56px;text-align:center}
.counter b{color:var(--ink);font-weight:500}

.voices-embedded{min-width:0}
.voices-embedded .deck{height:430px;margin-inline:0}
.voices-embedded .slide{width:min(300px,72vw)}
.voices-embedded .dots{margin-top:20px}
.voices__controls{display:flex;justify-content:flex-end;align-items:center;gap:10px;margin-top:18px}
@media (max-width:899px){.voices-embedded{margin-top:54px}}

.deck{
  position:relative;height:520px;display:grid;place-items:center;
  margin:0 calc(var(--gutter)*-1);overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
@media (min-width:900px){.deck{height:600px}}
@media (min-width:1280px){.deck{height:660px}}
.slide{position:absolute;top:50%;left:50%;width:min(340px,72vw);cursor:pointer;will-change:transform,opacity;transition:transform var(--slide),opacity var(--slide)}
@media (min-width:900px){.slide{width:400px}}
@media (min-width:1280px){.slide{width:452px}}
.slide__photo{position:relative;background:var(--ph);border-radius:var(--r-lg);aspect-ratio:3/4;overflow:hidden}
.slide__photo::after{content:"";position:absolute;inset:0;background:var(--gray-300);opacity:0;transition:opacity var(--slide)}
.slide:not(.is-active) .slide__photo::after{opacity:.28}
.slide__box{
  position:absolute;left:10px;right:10px;bottom:10px;background:var(--surface);
  border-radius:22px;padding:20px 20px 18px;opacity:0;transform:translateY(14px);
  transition:opacity var(--slide),transform var(--slide);pointer-events:none;
}
.slide.is-active .slide__box{opacity:1;transform:none;pointer-events:auto}
.slide__name{font-size:23px;font-weight:400;letter-spacing:-.9px;line-height:1.12}
.slide__role{font-size:12.5px;color:var(--gray-600);margin-top:6px}
.slide__mark{position:absolute;top:20px;right:20px;width:20px;height:20px;stroke:var(--ink);fill:none;opacity:.85}
.slide__rule{height:1px;background:var(--line-soft);margin:16px 0 14px}
.slide__grid{display:flex;gap:18px;align-items:flex-start}
.slide__idx{font-size:11.5px;color:var(--gray-600);flex:none;padding-top:2px}
.slide__quote{font-size:12.8px;line-height:1.5}
.dots{display:flex;justify-content:center;gap:7px;margin-top:32px}
.dots button{width:7px;height:7px;border-radius:50%;border:0;padding:0;cursor:pointer;background:var(--line);transition:all .3s}
.dots button.is-on{background:var(--ink);width:24px;border-radius:var(--r-pill)}

/* ══════════════════════════════════════════════════════════
   7. HERO SECUNDÁRIA
   ══════════════════════════════════════════════════════════ */
.shot{position:relative;margin-top:34px;padding:0 6px}
@media (min-width:900px){.shot{margin-top:0}}
.shot__img{background:var(--ph);border-radius:var(--r-lg);aspect-ratio:4/5;width:100%}
@media (min-width:900px){.shot{max-width:520px;margin-left:auto;padding:0}.shot__img{aspect-ratio:5/6}}
.tagpill{
  position:absolute;top:26px;left:-6px;z-index:2;
  display:inline-flex;align-items:center;gap:9px;
  background:var(--accent);color:var(--on-accent);border-radius:var(--r-pill);
  padding:9px 18px 9px 9px;font-size:14px;font-weight:500;letter-spacing:-.2px;
  animation:float 5s ease-in-out infinite;
}
.tagpill .dotmark{width:26px;height:26px;border-radius:50%;background:var(--surface);display:grid;place-items:center;flex:none}
.tagpill .dotmark svg{width:15px;height:15px;fill:var(--ink)}
.markcard{
  position:absolute;right:-4px;bottom:-20px;z-index:2;
  width:92px;height:92px;border-radius:var(--r-md);background:var(--accent);
  display:grid;place-items:center;animation:float 6.5s ease-in-out infinite .6s;
}
.markcard svg{width:44px;height:44px;fill:var(--on-accent)}

/* ══════════════════════════════════════════════════════════
   8. COLAGENS
   ══════════════════════════════════════════════════════════ */
.collage{position:relative;width:100%;container-type:inline-size;margin-top:38px}
@media (min-width:900px){.collage{max-width:600px;margin-left:auto;margin-right:auto}}
@media (min-width:900px){.collage{margin-top:0}}
.collage > *{position:absolute}

/* — colagem A (mensagem) — */
/* ── HERO E-mail profissional (migrado de _local/heros/hero-email.html) ──
   Referência 1141x430. Mesmas adaptações dos outros heroes:
   cores próprias do componente trocadas pelos tokens do tema. */
.em-hero{
  position:relative;width:100%;overflow:hidden;
  container-type:inline-size;isolation:isolate;user-select:none;
  --em-graphite:#454545;
  --em-shadow:0 .60cqw 2.00cqw rgba(23,23,26,.10),0 .12cqw .40cqw rgba(23,23,26,.06);
}
.em-hero__wordmark{
  position:absolute;top:7.45cqw;left:50%;transform:translateX(-50%);
  width:88%;height:auto;display:block;z-index:1;pointer-events:none;opacity:.14;
  animation:em-rise-wide 1.1s cubic-bezier(.16,.84,.36,1) .05s backwards;
}
html[data-theme="dark"] .em-hero__wordmark{filter:invert(1);opacity:.18}
.em-hero__binary{
  position:absolute;top:15.58cqw;right:0;width:29.01cqw;margin:0;z-index:2;
  font-family:var(--font);font-size:1.14cqw;line-height:1;letter-spacing:.02cqw;
  color:var(--gray-300);white-space:nowrap;overflow:hidden;
  direction:rtl;text-align:right;border-left:.16cqw solid transparent;
  animation:em-type 1.05s steps(40,end) .95s backwards,em-caret .55s steps(1,end) .95s infinite;
}
.em-hero__photo{
  position:absolute;top:1.30cqw;left:40.12cqw;width:22cqw;height:27.50cqw;
  object-fit:cover;object-position:50% 22%;border-radius:2.80cqw;display:block;z-index:3;
  animation:em-rise 1s cubic-bezier(.16,.84,.36,1) .28s backwards;
}
.em-hero__badge{
  position:absolute;top:4.20cqw;left:62.90cqw;width:7.10cqw;height:7.10cqw;
  border-radius:50%;display:block;z-index:4;
  animation:em-pop .7s cubic-bezier(.34,1.4,.5,1) .52s backwards;
}
.em-hero__pill{
  position:absolute;z-index:5;display:inline-flex;align-items:center;gap:.95cqw;
  border-radius:999px;font-weight:500;letter-spacing:-.01em;line-height:1;white-space:nowrap;
}
.em-hero__pill img{width:1.58cqw;height:1.58cqw;display:block;flex:none}
.em-hero__pill--pro{
  top:19.80cqw;left:29.60cqw;height:4.34cqw;padding:0 1.89cqw;font-size:1.34cqw;
  background:var(--em-graphite);color:#fff;box-shadow:var(--em-shadow);
  animation:em-pill-left .75s cubic-bezier(.34,1.3,.5,1) .66s backwards;
}
.em-hero__pill--mail{
  top:23.20cqw;left:55.10cqw;height:4.89cqw;padding:0 2.05cqw;font-size:1.42cqw;
  background:var(--surface);color:var(--ink);box-shadow:var(--em-shadow);
  animation:em-pill-right .75s cubic-bezier(.34,1.3,.5,1) .80s backwards;
}
html[data-theme="dark"] .em-hero__pill--mail{background:var(--panel)}
/* star.svg é quase branco (#F8F8F6): no hero do WordPress ele cai sobre a
   pílula vermelha e lê bem, mas aqui a pílula é clara e ele sumia
   (contraste medido: 1,03:1). No tema escuro a pílula escurece e não precisa. */
html[data-theme="light"] [data-hero-panel="elementor"] .em-hero__pill--mail img{filter:invert(1)}

@keyframes em-rise-wide{from{opacity:0;transform:translateX(-50%) translateY(2cqw) scale(.985)}}
@keyframes em-rise{from{opacity:0;transform:translateY(2.6cqw) scale(.96)}}
@keyframes em-rise-center{from{opacity:0;transform:translateX(-50%) translateY(4cqw) scale(.96)}to{opacity:1;transform:translateX(-50%)}}
@keyframes em-pop{from{opacity:0;transform:translateY(1cqw) scale(.7)}}
@keyframes em-pill-left{from{opacity:0;transform:translateX(-2cqw) scale(.94)}}
@keyframes em-pill-right{from{opacity:0;transform:translateX(2cqw) scale(.94)}}
@keyframes em-type{from{width:0}}
@keyframes em-caret{0%,49%{border-left-color:var(--gray-300)}50%,100%{border-left-color:transparent}}

@media (prefers-reduced-motion:no-preference){
  .em-hero__pill,.em-hero__badge{transition:transform .35s cubic-bezier(.2,.7,.3,1)}
  .em-hero:hover .em-hero__pill--pro,
  .em-hero:hover .em-hero__pill--mail{transform:translateY(-.4cqw)}
  .em-hero:hover .em-hero__badge{transform:translateY(-.3cqw) rotate(-6deg)}
}
@media (prefers-reduced-motion:reduce){
  .em-hero__wordmark,.em-hero__photo,.em-hero__badge,
  .em-hero__pill,.em-hero__binary{animation:none !important}
}
@media (max-width:640px){
  .em-hero__wordmark{width:118%;top:23cqw}
  .em-hero__photo{top:2cqw;left:50%;transform:translateX(-50%);width:36cqw;height:47cqw;border-radius:4.4cqw;animation-name:em-rise-center}
  .em-hero__badge{top:4cqw;left:auto;right:5cqw;width:11.5cqw;height:11.5cqw}
  .em-hero__binary{display:none}
  .em-hero__pill{gap:1.4cqw}
  .em-hero__pill img{width:2.9cqw;height:2.9cqw}
  .em-hero__pill--pro{top:26cqw;left:3cqw;height:7.4cqw;padding:0 3.2cqw;font-size:2.5cqw}
  .em-hero__pill--mail{top:41cqw;left:auto;right:3cqw;height:7.9cqw;padding:0 3.4cqw;font-size:2.6cqw}
}

/* ── PÚBLICOS / audience-row (migrado de _local: section.audience) ──
   Acordeão horizontal: o card ativo abre 1,68x. Os cards trazem o próprio
   véu escuro sobre a foto, então funcionam em qualquer fundo — a faixa
   escura da seção original não veio junto. */
.audience-row{
  display:flex;gap:clamp(10px,1.6vw,18px);
  height:clamp(250px,27vw,360px);
  margin-top:clamp(38px,5.8vw,70px);
}
.audience-card{
  position:relative;flex:1 1 0;min-width:0;display:block;
  padding:0;border:0;border-radius:6px;overflow:hidden;
  background:#25252a;color:inherit;font:inherit;text-align:left;cursor:pointer;
  transition:flex-grow .75s cubic-bezier(.22,.68,.24,1);
}
.audience-card.is-active{flex-grow:1.68}
.audience-card__media{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;
  filter:brightness(.68);transition:filter .75s ease;
}
.audience-card.is-active .audience-card__media{filter:brightness(1)}
.audience-card__veil{
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(6,6,6,.9) 0%,rgba(6,6,6,.5) 30%,rgba(6,6,6,0) 62%);
}
.audience-card__text{
  display:block;position:absolute;left:0;right:0;bottom:0;
  padding:0 clamp(16px,2vw,24px) clamp(18px,2.2vw,26px);
}
.audience-card__title{
  display:block;margin:0;font-size:16px;font-weight:600;line-height:1.3;color:#fff;
}
.audience-card__desc{
  display:block;margin:0;font-size:clamp(12.5px,1.05vw,13px);line-height:1.45;
  color:rgba(255,255,255,.72);
  max-height:0;opacity:0;overflow:hidden;transform:translateY(6px);
  transition:max-height .6s cubic-bezier(.22,.68,.24,1),opacity .4s ease,
             transform .6s cubic-bezier(.22,.68,.24,1),margin-top .6s cubic-bezier(.22,.68,.24,1);
}
.audience-card.is-active .audience-card__desc{max-height:4.5em;opacity:1;transform:none;margin-top:6px}

/* mobile: vira trilho deslizante, todos os textos visíveis */
@media (max-width:640px){
  .audience-row{
    height:auto;gap:12px;overflow-x:auto;
    scroll-snap-type:x mandatory;scroll-behavior:smooth;
    scroll-padding-inline:var(--gutter);
    scrollbar-width:none;overscroll-behavior-x:contain;
    margin-inline:calc(var(--gutter)*-1);
    padding-inline:var(--gutter);
  }
  .audience-row::-webkit-scrollbar{display:none}
  .audience-card{flex:0 0 min(78vw,340px);height:clamp(170px,44vw,230px);scroll-snap-align:start}
  .audience-card.is-active{flex-grow:0}
  .audience-card__media{filter:brightness(.9)}
  .audience-card__desc{max-height:4.5em;opacity:1;transform:none;margin-top:6px}
}
@media (prefers-reduced-motion:reduce){
  .audience-card,.audience-card__media,.audience-card__desc{transition:none}
}

/* ── painel do Deploy dentro do slot ──
   Reaproveita a cena do topo da página (.deploy-stage); aqui ela é
   absoluta para preencher a moldura de altura padrão do slot. */
.deploy-panel{position:relative;width:100%;overflow:hidden;container-type:inline-size}
.deploy-panel .deploy-stage{position:absolute;inset:0;min-height:0;margin-top:0}
.deploy-panel .deploy-stack-wrap{padding-top:clamp(14px,3.4cqw,40px)}

/* ── HERO Loja digital (migrado de _local/heros/hero-loja.html) ──
   Referência 1071x417. Mesmas adaptações do hero WordPress:
   cores próprias do componente trocadas pelos tokens do tema. */
.lj-hero{
  position:relative;width:100%;overflow:hidden;
  container-type:inline-size;isolation:isolate;user-select:none;
  --lj-shadow:0 .60cqw 2.00cqw rgba(23,23,26,.10),0 .12cqw .40cqw rgba(23,23,26,.06);
}
.lj-hero__wordmark{
  position:absolute;top:7.47cqw;left:50%;transform:translateX(-50%);
  width:102%;height:auto;display:block;z-index:1;pointer-events:none;opacity:.14;
  animation:lj-rise-wide 1.1s cubic-bezier(.16,.84,.36,1) .05s backwards;
}
html[data-theme="dark"] .lj-hero__wordmark{filter:invert(1);opacity:.18}
.lj-hero__binary{
  position:absolute;top:11.67cqw;right:0;width:24.37cqw;margin:0;z-index:2;
  font-family:var(--font);font-size:1.12cqw;line-height:1;letter-spacing:.02cqw;
  color:var(--gray-300);white-space:nowrap;overflow:hidden;
  direction:rtl;text-align:right;border-left:.16cqw solid transparent;
  animation:lj-type 1.05s steps(40,end) .95s backwards,lj-caret .55s steps(1,end) .95s infinite;
}
.lj-hero__photo{
  position:absolute;top:1cqw;left:42.50cqw;width:22.80cqw;height:28.29cqw;
  object-fit:cover;object-position:50% 25%;border-radius:2.05cqw;display:block;z-index:3;
  animation:lj-rise 1s cubic-bezier(.16,.84,.36,1) .28s backwards;
}
.lj-hero__badge{
  position:absolute;top:4.40cqw;left:64.90cqw;width:5cqw;height:5cqw;
  border-radius:1.28cqw;display:block;z-index:4;
  animation:lj-pop .7s cubic-bezier(.34,1.4,.5,1) .52s backwards;
}
.lj-hero__spark{
  position:absolute;top:21.80cqw;left:55cqw;width:4.20cqw;height:auto;
  display:block;z-index:4;pointer-events:none;
  animation:lj-spark .8s cubic-bezier(.34,1.4,.5,1) .88s backwards;
}
.lj-hero__pill{
  position:absolute;z-index:5;display:inline-flex;align-items:center;gap:1.12cqw;
  border-radius:999px;font-weight:500;letter-spacing:-.01em;line-height:1;white-space:nowrap;
  background:var(--surface);color:var(--ink);box-shadow:var(--lj-shadow);
}
html[data-theme="dark"] .lj-hero__pill{background:var(--panel)}
.lj-hero__pill img{display:block;flex:none}
.lj-hero__pill--loja{
  top:11.39cqw;left:27cqw;height:5cqw;padding:0 2cqw;font-size:1.45cqw;
  animation:lj-pill-left .75s cubic-bezier(.34,1.3,.5,1) .66s backwards;
}
.lj-hero__pill--loja img{width:2.20cqw;height:2.20cqw}
.lj-hero__pill--pedido{
  top:24.50cqw;left:58.50cqw;height:4.60cqw;padding:0 1.85cqw;font-size:1.45cqw;
  animation:lj-pill-right .75s cubic-bezier(.34,1.3,.5,1) .80s backwards;
}
.lj-hero__pill--pedido img{width:2cqw;height:2cqw}

@keyframes lj-rise-wide{from{opacity:0;transform:translateX(-50%) translateY(2cqw) scale(.985)}}
@keyframes lj-rise{from{opacity:0;transform:translateY(2.6cqw) scale(.96)}}
@keyframes lj-rise-center{from{opacity:0;transform:translateX(-50%) translateY(4cqw) scale(.96)}to{opacity:1;transform:translateX(-50%)}}
@keyframes lj-pop{from{opacity:0;transform:translateY(1cqw) scale(.7)}}
@keyframes lj-spark{from{opacity:0;transform:scale(.4) rotate(-25deg)}}
@keyframes lj-pill-left{from{opacity:0;transform:translateX(-2cqw) scale(.94)}}
@keyframes lj-pill-right{from{opacity:0;transform:translateX(2cqw) scale(.94)}}
@keyframes lj-type{from{width:0}}
@keyframes lj-caret{0%,49%{border-left-color:var(--gray-300)}50%,100%{border-left-color:transparent}}

@media (prefers-reduced-motion:no-preference){
  .lj-hero__pill,.lj-hero__badge{transition:transform .35s cubic-bezier(.2,.7,.3,1)}
  .lj-hero:hover .lj-hero__pill--loja,
  .lj-hero:hover .lj-hero__pill--pedido{transform:translateY(-.4cqw)}
  .lj-hero:hover .lj-hero__badge{transform:translateY(-.3cqw)}
}
@media (prefers-reduced-motion:reduce){
  .lj-hero__wordmark,.lj-hero__photo,.lj-hero__badge,
  .lj-hero__spark,.lj-hero__pill,.lj-hero__binary{animation:none !important}
}
@media (max-width:640px){
  .lj-hero__wordmark{width:150%;top:23cqw}
  .lj-hero__photo{top:2cqw;left:50%;transform:translateX(-50%);width:38cqw;height:47cqw;border-radius:4.4cqw;animation-name:lj-rise-center}
  .lj-hero__badge{top:4cqw;left:auto;right:5cqw;width:9cqw;height:9cqw;border-radius:2.3cqw}
  .lj-hero__spark{top:35cqw;left:7cqw;width:8cqw}
  .lj-hero__binary{display:none}
  .lj-hero__pill{gap:1.6cqw}
  .lj-hero__pill--loja{top:25cqw;left:3cqw;height:7.2cqw;padding:0 3cqw;font-size:2.5cqw}
  .lj-hero__pill--loja img{width:3.4cqw;height:3.4cqw}
  .lj-hero__pill--pedido{top:40cqw;left:auto;right:3cqw;height:7.4cqw;padding:0 3cqw;font-size:2.5cqw}
  .lj-hero__pill--pedido img{width:3.1cqw;height:3.1cqw}
}

/* ── COLAGEM Elementor (migrada de _local: .promise > .collage) ──
   O original vivia numa seção escura; aqui a seção acompanha o tema,
   então os rótulos que assumiam fundo escuro passaram a usar tokens. */
.wp-collage{position:relative;width:100%;container-type:inline-size;aspect-ratio:480/430;margin-top:38px}
.wp-collage__photo{
  position:absolute;left:28.7%;top:15.8%;width:50.4%;height:73.3%;
  border-radius:3cqw;overflow:hidden;background:#26262a;z-index:1;
}
.wp-collage__photo img{width:100%;height:100%;object-fit:cover;display:block}

.wp-fl{position:absolute;z-index:2}
.wp-fl--ssl{left:7.9%;top:17.4%;width:16%;text-align:center}
.wp-fl--models{left:65.8%;top:2.3%;width:23.8%}
.wp-fl--logo{
  left:70%;top:14.8%;width:14.2%;aspect-ratio:1;
  display:grid;place-items:center;background:#34324a;border-radius:2.6cqw;
}
.wp-fl--logo svg{width:42%;height:auto;display:block}
.wp-fl--latency{left:7.5%;top:41.9%;width:28%}
.wp-fl--resources{left:.4%;top:84.2%;width:26%}
.wp-fl--builder{left:64.6%;top:72.8%;width:25.8%}

/* itens sem caixa (ícone + rótulo) */
.wp-fl-icon{display:flex;align-items:center;gap:2.2cqw}
.wp-fl--ssl .wp-fl-icon{flex-direction:column;gap:1.6cqw}
.wp-fl-icon svg{display:block;width:100%;height:auto}
.wp-fl--ssl .wp-fl-icon > svg{width:7cqw}
.wp-fl--resources .wp-fl-icon > svg{width:4.4cqw;flex:0 0 auto}
.wp-fl-icon p{margin:0;font-size:2.7cqw;line-height:1.35;white-space:nowrap}
/* eram mint/cinza-claro sobre fundo escuro: sem contraste no tema claro */
.wp-fl--ssl .wp-fl-icon p{color:var(--ink);font-weight:500}
.wp-fl--resources .wp-fl-icon p{color:var(--gray-600)}

/* caixas */
.wp-fl-box{border-radius:2.4cqw;padding:3.2cqw}
.wp-fl-box__label{margin:0;font-size:2.5cqw;line-height:1.35}
.wp-fl-box__value{margin:2cqw 0 0;font-size:3.4cqw;line-height:1.25}
.wp-fl--models .wp-fl-box{background:#e9e9e7}
.wp-fl--models .wp-fl-box__label{color:#17181a;font-size:2.7cqw}
/* o vidro fosco pressupunha fundo escuro atrás; aqui vira cartão do tema */
.wp-fl--latency .wp-fl-box{
  background:var(--surface);border:1.4px solid var(--line);
  box-shadow:0 2cqw 4cqw rgba(0,0,0,.07);
}
.wp-fl--latency .wp-fl-box__label{color:var(--gray-600)}
.wp-fl--latency .wp-fl-box__value{color:var(--ink);margin-top:1.4cqw}
.wp-fl--latency .wp-flag{display:block;width:5.4cqw;height:auto;margin-top:2.4cqw;border-radius:.5cqw}
.wp-fl--builder .wp-fl-box{background:#b3a4e6}
.wp-fl--builder .wp-fl-box__label{color:#2a2542}
.wp-fl--builder .wp-fl-box__value{color:#17142b;font-size:3.1cqw;margin-top:4cqw}

@media (min-width:900px){.wp-collage{margin-top:0}}

/* — colagem B (agendamento) — */
.col-b{aspect-ratio:542/567}
.b-photo{left:24.7%;top:32.3%;width:49.1%;height:49.6%;background:var(--ph);border-radius:var(--r-sm);z-index:2}
.b-lime{left:64.9%;top:20.6%;width:29.3%;height:29.6%;background:var(--accent);border-radius:2.6cqi;z-index:1;animation:float 7s ease-in-out infinite}
.b-mark{
  left:10.7%;top:69.1%;width:23.6%;height:21.5%;z-index:3;background:var(--surface);
  border:1.4px solid var(--line);border-radius:2.6cqi;display:grid;place-items:center;
}
.b-mark svg{width:42%;height:42%;fill:var(--ink)}
.b-product{
  left:68.6%;top:70.7%;width:31.4%;height:29.3%;z-index:3;background:var(--ph-2);
  border:1.4px solid var(--line);border-radius:2.6cqi;display:grid;place-items:center;
}
.b-ui{left:0;top:0;width:39.9%;height:32.6%;z-index:4;background:var(--frame);border-radius:3.4cqi;padding:2.2cqi;animation:float 8.5s ease-in-out infinite .7s}
.b-ui__inner{background:var(--surface);border-radius:2.4cqi;padding:2.6cqi 2.6cqi 5.4cqi;height:100%}
.b-ui__label{font-size:max(9px,2cqi);color:var(--gray-600)}
.b-ui__pill{display:flex;align-items:center;justify-content:center;border:1.2px solid var(--line);border-radius:var(--r-pill);padding:1.5cqi 2cqi;margin-top:1.8cqi;font-size:max(9px,2.2cqi)}
.b-ui__pill--ghost{color:var(--gray-300);border-style:dashed}
.b-ui__btn{
  position:absolute;left:6.4cqi;right:6.4cqi;bottom:3.6cqi;background:var(--accent);
  color:var(--on-accent);border:0;border-radius:2cqi;padding:2.2cqi;
  font-size:max(11px,3.1cqi);font-weight:500;letter-spacing:-.4px;cursor:pointer;transition:transform var(--t);
}
.b-ui__btn:hover{transform:translateY(-1px)}

/* — colagem C (vertical) — */
.col-c{aspect-ratio:500/640;max-width:500px;margin:38px auto 0}
@media (min-width:900px){.col-c{margin:0;max-width:none}}
.c-back{left:57.6%;top:0;width:42.4%;height:28.4%;background:var(--beige);border-radius:3.4cqi;z-index:1}
.c-photo{left:12.6%;top:8.3%;width:74%;height:77%;background:var(--ph);border-radius:3.4cqi;z-index:2}
.c-lime{left:0;top:71.7%;width:25.6%;height:18.8%;background:var(--accent);border-radius:3.4cqi;z-index:3;display:grid;place-items:center;animation:float 7s ease-in-out infinite}
.c-lime svg{width:46%;height:46%;fill:var(--on-accent)}
.c-product{left:63.6%;top:70.9%;width:36.4%;height:29.1%;z-index:3;background:var(--ph-2);border:1.4px solid var(--line);border-radius:3.4cqi;display:grid;place-items:center;animation:float 8.5s ease-in-out infinite .8s}

/* disco de produto (compartilhado) */
.disc{width:58%;aspect-ratio:1;border-radius:50%;background:var(--ph);border:1.4px solid var(--line);position:relative}
.disc::after{content:"";position:absolute;top:-8%;right:2%;width:16%;aspect-ratio:1;border-radius:50%;border:1.6px solid var(--gray-500)}

@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

/* ══════════════════════════════════════════════════════════
   9. DIAGRAMA
   ══════════════════════════════════════════════════════════ */
.flow{position:relative;width:100%;aspect-ratio:560/400;container-type:inline-size;margin-top:36px}
@media (min-width:900px){.flow{margin-top:0;max-width:620px;margin-inline:auto}}
.flow__wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.flow__wires path{fill:none;stroke:var(--wire);stroke-width:1.6;stroke-linecap:round;stroke-dasharray:1 7;animation:drift 14s linear infinite}
@keyframes drift{to{stroke-dashoffset:-160}}
.node{
  position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;gap:2.2cqi;
  background:var(--surface);border:1.4px solid var(--line);border-radius:var(--r-pill);
  padding:1.6cqi;font-size:max(12px,2.9cqi);letter-spacing:-.4px;white-space:nowrap;
  cursor:pointer;transition:border-color var(--t),transform var(--t);z-index:2;
}
.node:hover{border-color:var(--ink);transform:translate(-50%,-50%) scale(1.03)}
.node span:last-child{padding-right:3.4cqi}
.node__badge{
  width:7.1cqi;height:7.1cqi;min-width:30px;min-height:30px;border-radius:50%;
  background:var(--panel);border:1.4px solid var(--line);display:grid;place-items:center;
  flex:none;font-size:max(11px,2.6cqi);color:var(--gray-600);
}
.node__badge svg{width:56%;height:56%;fill:var(--gray-500)}
.node--accent .node__badge{background:var(--accent);border-color:var(--accent)}
.node--accent .node__badge svg{fill:var(--on-accent)}
.n-tags{left:50%;top:10%}
.n-sms{left:16.1%;top:45%}
.n-insta{left:50%;top:45%}
.n-mail{left:83.9%;top:45%}
.n-u1{left:30.4%;top:82.5%}
.n-u2{left:71.4%;top:82.5%}

@media (prefers-reduced-motion:reduce){
  .tagpill,.markcard,.a-lime,.msg,.b-lime,.b-ui,.c-lime,.c-product,.flow__wires path{animation:none}
  :root{--slide:.01ms}
}

/* Hero Deploy */
.deploy-hero{position:relative;overflow:hidden;margin:0 calc(var(--gutter)*-1);padding:0 var(--gutter)}
.deploy-stage{position:relative;min-height:clamp(270px,38vw,470px);margin-top:24px}
.deploy-stage__word{position:absolute;left:0;right:0;bottom:4%;pointer-events:none;opacity:.12}
.deploy-stage__word img{display:block;width:100%;height:auto}
.deploy-binary{position:absolute;right:4%;top:14%;margin:0;color:var(--gray-300);font:11px/1 var(--font);letter-spacing:.05em;white-space:nowrap}
.deploy-stack-wrap{position:absolute;inset:0;display:flex;align-items:flex-start;justify-content:center;padding-top:clamp(22px,5vw,46px)}
.deploy-stack{position:relative;width:min(1100px,100%);aspect-ratio:798/340}
.deploy-card{position:absolute;top:0;height:90%;display:block;overflow:hidden;clip-path:polygon(0 0,100% 14.8%,100% 83.9%,0 100%);filter:drop-shadow(0 22px 32px rgba(0,0,0,.28));transition:all .6s cubic-bezier(.22,.9,.32,1);opacity:0;transform:translateX(-24px);animation:deploy-layer-in .7s cubic-bezier(.22,.9,.32,1) both;cursor:pointer}
.deploy-card img{display:block;width:100%;height:100%;object-fit:cover}
.deploy-card:nth-child(1){left:4%;aspect-ratio:373/297;z-index:1;animation-delay:.1s}.deploy-card:nth-child(2){left:16%;top:4%;aspect-ratio:423/346;z-index:2;animation-delay:.28s}.deploy-card:nth-child(3){left:30%;top:5.5%;aspect-ratio:423/337;z-index:3;animation-delay:.46s}.deploy-card:nth-child(4){left:45%;aspect-ratio:466/371;z-index:4;animation-delay:.64s}
.deploy-card:hover,.deploy-card.is-active{z-index:10;aspect-ratio:12/7;clip-path:polygon(0 0,100% 0,100% 100%,0 100%);filter:drop-shadow(0 30px 40px rgba(0,0,0,.38))}
.deploy-card:nth-child(1):hover,.deploy-card:nth-child(1).is-active{height:92%;top:4%;transform:translateX(28%)}.deploy-card:nth-child(2):hover,.deploy-card:nth-child(2).is-active{height:92%;top:4%;transform:translateX(14%)}.deploy-card:nth-child(3):hover,.deploy-card:nth-child(3).is-active{height:92%;top:4%;transform:translateX(2%)}.deploy-card:nth-child(4):hover,.deploy-card:nth-child(4).is-active{height:92%;top:4%;transform:translateX(-14%)}
.deploy-pill{position:absolute;z-index:20;right:-3%;top:6%;width:20%;max-width:180px;min-width:130px;aspect-ratio:158/44;filter:drop-shadow(0 12px 20px rgba(0,0,0,.28));opacity:0;transform:scale(.7) translateX(-8px);animation:deploy-pill-in .55s cubic-bezier(.34,1.56,.64,1) 1.05s both}.deploy-pill svg{display:block;width:100%;height:100%}
.deploy-content{width:100%;max-width:var(--max);margin:6% auto;padding:20px 0 40px;display:grid;grid-template-columns:1fr .68fr;gap:clamp(32px,9.6vw,88px);align-items:start}.deploy-content h1{margin:0;font-size:clamp(38px,4.6vw,62px);font-weight:500;line-height:1.1;letter-spacing:-.04em;max-width:22ch}.deploy-pitch{display:flex;flex-direction:column;align-items:flex-start}.deploy-pitch p{margin:0;font-size:clamp(17px,1.65vw,22px);line-height:1.5;max-width:32ch;color:var(--gray-600)}
.deploy-cta{display:inline-flex;align-items:center;margin-top:28px;padding:15px 22px;border:0;border-radius:4px;background:var(--ink);color:var(--on-ink);font:500 13px var(--font);cursor:pointer;transition:transform var(--t)}.deploy-cta:hover{transform:translateY(-2px)}.deploy-features{display:flex;gap:clamp(20px,4vw,40px);margin-top:30px}.deploy-feature{display:flex;align-items:center;gap:9px}.deploy-feature svg{flex:none}.deploy-feature span{font-size:11px;line-height:1.4;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
@keyframes deploy-layer-in{to{opacity:1;transform:translateX(0)}}@keyframes deploy-pill-in{to{opacity:1;transform:scale(1) translateX(0)}}
@media (max-width:640px){.deploy-stage{min-height:260px}.deploy-stack{width:100%}.deploy-pill{top:auto;right:6%;bottom:22%;min-width:108px}.deploy-content{display:block;padding-top:8px}.deploy-pitch{margin-top:22px}.deploy-features{gap:20px}}
@media (prefers-reduced-motion:reduce){.deploy-card,.deploy-pill{animation:none;opacity:1;transform:none}.deploy-card{clip-path:none}}



/* ════════════════════ SEÇÃO ════════════════════ */
.section{margin-top:76px;padding-bottom:70px}
@media (min-width:900px){.section{margin-top:112px}}

.head{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;margin-bottom:42px;text-align:left}
.eyebrow{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gray-600);margin-bottom:14px}
.title{font-size:42px;line-height:1.06;letter-spacing:-1.8px;font-weight:400;max-width:15ch}
.title b{font-weight:500}
.title em{font-style:normal;color:var(--gray-500)}
@media (min-width:900px){.title{font-size:64px;letter-spacing:-3px;max-width:16ch}}
@media (max-width:370px){.title{font-size:32px;letter-spacing:-1.4px}}

.nav-arrows{display:flex;align-items:center;gap:10px;flex:none}
.arrowbtn{
  width:56px;height:56px;border-radius:50%;flex:none;cursor:pointer;
  background:var(--surface);border:1.4px solid var(--line);
  display:grid;place-items:center;transition:all var(--t);
}
.arrowbtn:hover:not(:disabled){border-color:var(--ink);transform:scale(1.05)}
.arrowbtn:active:not(:disabled){transform:scale(.96)}
.arrowbtn:disabled{opacity:.3;cursor:not-allowed}
.arrowbtn svg{width:19px;height:19px;stroke:var(--ink);fill:none}

/* ── trilho ── */
.rail{
  display:flex;gap:var(--gap);
  margin:0 calc(var(--gutter)*-1);padding:4px calc(var(--gutter) + 16px) 8px;
  overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
  cursor:grab;
}
@media (min-width:900px){.rail{gap:var(--gap)}}
.rail::-webkit-scrollbar{display:none}
.rail.is-dragging{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto}
.rail.is-dragging *{user-select:none;pointer-events:none}

/* 1 card + 10% do próximo */
.plan{
  flex:0 0 calc((100% - var(--gap)) / 1.1);
  scroll-snap-align:start;
  display:flex;flex-direction:column;
  background:var(--surface);border:1.4px solid var(--line);border-radius:12px;
  padding:28px 24px;transition:border-color var(--t),box-shadow var(--t);
}
@media (min-width:700px){.plan{flex-basis:calc((100% - 2*var(--gap)) / 2.1)}}
@media (min-width:900px){.plan{flex-basis:calc((100% + 2*var(--gutter) - 2*var(--gap)) / 3.1)}}
.plan:hover{border-color:var(--ink);box-shadow:0 8px 24px rgba(0,0,0,.06)}
.plan--featured{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}

.plan__tag{
  align-self:flex-start;border:0;border-radius:0;
  padding:0;font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gray-600);white-space:nowrap;
}
.plan--featured .plan__tag{color:var(--ink)}
.plan__name{font-size:28px;font-weight:600;letter-spacing:-1.2px;margin-top:16px;line-height:1}
.plan__rule{height:1px;background:var(--line-soft);margin:26px 0 24px}

.plan__list{list-style:none;display:flex;flex-direction:column;gap:17px;flex:1}
.plan__item{display:flex;align-items:center;gap:14px;font-size:16px;letter-spacing:-.3px;line-height:1.3}
.plan__item svg{width:16px;height:16px;stroke:var(--gray-500);fill:none;flex:none}
.plan__item .num{color:var(--ink)}
.plan__item.is-off{color:var(--gray-300)}
.plan__item.is-off svg{stroke:var(--gray-300)}
.hint{
  width:22px;height:22px;border-radius:50%;border:1.2px solid var(--line);
  display:grid;place-items:center;font-size:11px;color:var(--gray-500);
  flex:none;cursor:help;transition:border-color var(--t);
}
.hint:hover,.hint.is-on{border-color:var(--ink);color:var(--ink)}

/* tooltip flutuante — fica fora do .rail para nao ser cortado pelo overflow */
.tip{
  position:fixed;z-index:200;max-width:250px;
  background:var(--ink);color:var(--on-ink);
  font-size:13px;line-height:1.45;letter-spacing:-.1px;
  padding:10px 12px;border-radius:10px;
  pointer-events:none;opacity:0;transform:translateY(4px);
  transition:opacity .16s var(--t),transform .16s var(--t);
}
.tip.is-on{opacity:1;transform:none}

.plan__price{display:flex;align-items:baseline;gap:8px;margin-top:24px}
.plan__price b{font-size:38px;font-weight:600;letter-spacing:-1.5px}
.plan__price span{font-size:16px;color:var(--gray-500)}
.plan__note{font-size:14px;line-height:1.45;color:var(--gray-500);margin-top:10px}

.plan__cta{
  display:flex;align-items:center;justify-content:center;gap:12px;width:100%;
  margin-top:22px;background:var(--ink);color:var(--on-ink);border:1.4px solid var(--ink);
  border-radius:7px;padding:16px;font-size:16px;letter-spacing:-.3px;
  cursor:pointer;transition:opacity var(--t),transform var(--t);
}
.plan__cta:hover{opacity:.86}
.plan__cta:active{transform:scale(.99)}
.plan__cta svg{width:18px;height:18px;stroke:currentColor;fill:none}
.plan--featured .plan__cta{background:var(--ink);color:var(--on-ink);border-color:var(--ink)}

/* pontos */
.dots{display:flex;justify-content:center;gap:7px;margin-top:26px}
.dots button{width:7px;height:7px;border-radius:50%;border:0;padding:0;cursor:pointer;background:var(--line);transition:all .3s}
.dots button.is-on{background:var(--ink);width:24px;border-radius:var(--r-pill)}
@media (min-width:1240px){
  .plan{padding:32px 28px}
}

.foot{display:flex;align-items:center;justify-content:space-between;padding:40px 2px 34px;font-size:11px;color:var(--gray-600)}
.foot .rule{flex:1;height:1px;background:var(--line-soft);margin:0 14px}



/* ════════════════════ TIPOGRAFIA ════════════════════ */
.section{margin-top:80px}
@media (min-width:900px){.section{margin-top:110px}}
.eyebrow{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gray-600);margin-bottom:14px}
.title{font-size:38px;line-height:1.06;letter-spacing:-1.8px;font-weight:400}
.title b{font-weight:500}
.title em{font-style:normal;color:var(--gray-500)}
@media (min-width:900px){.title{font-size:50px;letter-spacing:-2.4px}}
@media (max-width:370px){.title{font-size:32px;letter-spacing:-1.4px}}
.para{font-size:18px;line-height:1.55;color:var(--gray-600);margin-top:18px;max-width:38ch}

.cta{
  display:inline-flex;align-items:center;gap:12px;margin-top:28px;
  background:var(--surface);color:var(--ink);border:1.4px solid var(--line);
  border-radius:var(--r-pill);padding:7px 8px 7px 24px;font-size:16px;letter-spacing:-.2px;
  cursor:pointer;transition:border-color var(--t),transform var(--t);
}
.cta:hover{border-color:var(--ink)}
.cta:active{transform:scale(.98)}
.cta .badge{width:38px;height:38px;border-radius:50%;background:var(--accent);display:grid;place-items:center;flex:none}
.cta .badge svg{width:19px;height:19px;stroke:var(--on-accent);fill:none}

/* ════════════════════ FAQ ════════════════════ */
.faq{display:grid;gap:8px}
@media (min-width:900px){.faq{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:64px;align-items:start}}

.acc{border-top:1.4px solid var(--line);margin-top:26px}
@media (min-width:900px){.acc{margin-top:0}}
.acc__item{border-bottom:1.4px solid var(--line)}
.acc__btn{
  display:flex;align-items:center;gap:20px;width:100%;
  background:transparent;border:0;padding:24px 2px;cursor:pointer;text-align:left;
  font-size:18px;letter-spacing:-.4px;line-height:1.3;transition:color var(--t);
}
@media (min-width:900px){.acc__btn{font-size:20px;padding:28px 2px}}
.acc__btn:hover{color:var(--ink)}
.acc__q{flex:1}
.acc__ico{
  width:38px;height:38px;border-radius:50%;flex:none;
  border:1.4px solid var(--line);display:grid;place-items:center;position:relative;
  transition:background var(--t),border-color var(--t),transform var(--t);
}
.acc__ico::before,.acc__ico::after{
  content:"";position:absolute;background:var(--ink);border-radius:2px;transition:all var(--t);
}
.acc__ico::before{width:13px;height:1.7px}
.acc__ico::after{width:1.7px;height:13px}
.acc__item.is-open .acc__ico{background:var(--ink);border-color:var(--ink);transform:rotate(90deg)}
.acc__item.is-open .acc__ico::before{background:var(--on-ink)}
.acc__item.is-open .acc__ico::after{height:0}

.acc__panel{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows var(--t);
}
.acc__item.is-open .acc__panel{grid-template-rows:1fr}
.acc__panel > div{overflow:hidden}
.acc__a{
  font-size:15px;line-height:1.6;color:var(--gray-600);
  padding:0 60px 26px 2px;max-width:60ch;
}
@media (min-width:900px){.acc__a{font-size:16px}}

/* ════════════════════ POSTS ════════════════════ */
.posts{
  display:flex;gap:16px;margin-top:26px;
  margin-inline:calc(var(--gutter)*-1);padding:4px calc(var(--gutter) + 16px) 8px;
  overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;cursor:grab;
}
.posts::-webkit-scrollbar{display:none}
.posts.is-dragging{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto}
.posts.is-dragging *{user-select:none;pointer-events:none}
/* 1 card + 10% do próximo */
.post{
  flex:0 0 calc((100% - 16px) / 1.1);scroll-snap-align:start;
  display:flex;flex-direction:column;
  border:1.4px solid var(--line);border-radius:12px;
  padding:16px;transition:border-color var(--t),transform var(--t);
}
@media (min-width:600px){.post{flex-basis:calc((100% - 32px) / 2.1)}}
@media (min-width:900px){
  .posts{overflow:visible;cursor:auto;margin-inline:0;padding:0;scroll-snap-type:none}
  .post{flex-basis:calc((100% - 32px) / 3)}
}
.post:hover{border-color:var(--ink);transform:translateY(-2px)}
.post__media{background:var(--ph);border-radius:var(--r-md);aspect-ratio:16/10;position:relative}
.post__tag{
  position:absolute;top:12px;left:12px;background:var(--surface);
  border:1.4px solid var(--line);border-radius:var(--r-pill);
  padding:6px 12px;font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
}
.post__meta{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--gray-600);margin-top:18px}
.post__title{font-size:19px;font-weight:500;letter-spacing:-.5px;line-height:1.25;margin-top:10px}
.post__text{font-size:14px;line-height:1.5;color:var(--gray-600);margin-top:9px;flex:1}
.post__link{
  display:inline-flex;align-items:center;gap:8px;margin-top:18px;
  font-size:14px;color:var(--ink);
}
.post__link svg{width:15px;height:15px;stroke:currentColor;fill:none;transition:transform var(--t)}
.post:hover .post__link svg{transform:translateX(3px)}

.dots{display:flex;justify-content:center;gap:7px;margin-top:24px}
.dots button{width:7px;height:7px;border-radius:50%;border:0;padding:0;cursor:pointer;background:var(--line);transition:all .3s}
.dots button.is-on{background:var(--ink);width:24px;border-radius:var(--r-pill)}
@media (min-width:900px){.dots{display:none}}

/* ════════════════════ FOOTER ════════════════════ */
.footer{
  margin:96px calc(var(--gutter)*-1) 0;padding:52px var(--gutter) 30px;
  border-top:1.4px solid var(--line);
}
@media (min-width:900px){.footer{margin-top:130px}}
.footer__grid{display:grid;gap:36px}
@media (min-width:760px){.footer__grid{grid-template-columns:1.4fr repeat(3,1fr);gap:40px}}

.footer__brand .logo{width:64px;height:64px}
.footer__pitch{font-size:14.5px;line-height:1.55;color:var(--gray-600);margin-top:14px;max-width:32ch}
.footer__social{display:flex;gap:8px;margin-top:20px}
.footer__social a{
  width:40px;height:40px;border-radius:50%;border:1.4px solid var(--line);
  display:grid;place-items:center;transition:border-color var(--t)}
.footer__social a:hover{border-color:var(--ink)}
.footer__social svg{width:16px;height:16px;stroke:var(--ink);fill:none}

.footer__col h4{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--gray-600);font-weight:600;margin-bottom:16px}
.footer__col ul{list-style:none;display:flex;flex-direction:column;gap:12px}
.footer__col a{font-size:15px;letter-spacing:-.2px;color:var(--gray-600);transition:color var(--t)}
.footer__col a:hover{color:var(--ink)}

.footer__news{margin-top:44px;padding-top:32px;border-top:1px solid var(--line-soft);display:grid;gap:16px}
@media (min-width:760px){.footer__news{grid-template-columns:1fr auto;align-items:center;gap:32px}}
.footer__news .t{font-size:20px;letter-spacing:-.5px}
.footer__news .s{font-size:14px;color:var(--gray-600);margin-top:6px}
.subscribe{position:relative;min-width:min(340px,100%)}
.subscribe input{
  width:100%;border:1.4px solid var(--line);border-radius:var(--r-pill);
  background:var(--surface);color:var(--ink);font-size:15px;letter-spacing:-.2px;
  padding:16px 58px 16px 22px;outline:none;transition:border-color var(--t);
}
.subscribe input::placeholder{color:var(--gray-300)}
.subscribe input:focus{border-color:var(--ink)}
.subscribe button{
  position:absolute;right:7px;top:50%;transform:translateY(-50%);
  width:40px;height:40px;border-radius:50%;border:0;background:var(--accent);
  display:grid;place-items:center;cursor:pointer;transition:transform var(--t);
}
.subscribe button:hover{transform:translateY(-50%) scale(1.06)}
.subscribe button svg{width:17px;height:17px;stroke:var(--on-accent);fill:none}

.footer__base{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin-top:38px;padding-top:24px;border-top:1px solid var(--line-soft);
  font-size:12px;color:var(--gray-600);
}
.footer__base nav{display:flex;gap:20px;flex-wrap:wrap}
.footer__base a:hover{color:var(--ink)}


/* Single-document layout overrides */
.screen{width:100%;max-width:1440px;margin:0 auto;background:transparent;padding:22px var(--gutter) 0;border:0;border-radius:0}
body{background:var(--surface)}
@media (min-width:900px){body{padding:0}.screen{padding-top:30px}}
.logo img{display:block;width:100%;height:100%;object-fit:contain}.logo svg{display:none}
.top>.nav>.moon{display:none}
@media (min-width:900px){.top>.nav{display:none}}
.rail,.posts{scroll-padding-left:32px}
@media (max-width:899px){.rail,.posts{padding-left:calc(var(--gutter) + 16px);padding-right:calc(var(--gutter) + 16px)}}