/* ============================================================
   CodePride — identidade visual conforme BrandKit vigente.
   Toda cor de marca vive neste bloco. Nada de hex solto abaixo.
   ============================================================ */

@font-face{
  font-family:'Sora';
  src:url('fonts/sora-latin.woff2') format('woff2');
  font-weight:300 700;
  font-style:normal;
  font-display:swap;
}

:root{
  --navy:#1B2B49;
  --navy-deep:#12203A;
  --cromio:#C5CAD2;
  --white:#FFFFFF;
  --gold-1:#B79C1E;
  --gold-2:#F0D878;
  --gold-3:#C49A22;
  --gold-grad:linear-gradient(90deg,var(--gold-1) 0%,var(--gold-2) 50%,var(--gold-3) 100%);

  /* superficies derivadas do marinho e do cromio, sem matiz nova */
  --surface:#F4F6F8;
  --rule:#E3E7EC;
  --rule-on-navy:rgba(197,202,210,.20);
  --surface-on-navy:rgba(197,202,210,.06);
  --muted:#5B667C;

  --wrap:1120px;
  --pad:24px;
}

@media (min-width:768px){
  :root{ --pad:40px; }
}

/* ---------- base ---------- */

*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; padding:0; }

html{ scroll-behavior:smooth; scroll-padding-top:96px; -webkit-text-size-adjust:100%; }

body{
  font-family:'Sora',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-weight:400;
  font-size:17px;
  line-height:1.6;
  color:var(--navy);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
::selection{ background:var(--navy); color:var(--white); }

:focus-visible{
  outline:2px solid var(--navy);
  outline-offset:3px;
  border-radius:2px;
}
.band--dark :focus-visible{ outline-color:var(--gold-2); }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

.skip-link{
  position:absolute;
  left:-9999px;
  top:0;
  z-index:100;
  background:var(--navy);
  color:var(--white);
  padding:12px 18px;
  font-weight:600;
}
.skip-link:focus{ left:12px; top:12px; }

/* ---------- layout ---------- */

.wrap{
  max-width:var(--wrap);
  margin:0 auto;
  padding-left:var(--pad);
  padding-right:var(--pad);
}

.band{ padding:72px 0; }
@media (min-width:768px){ .band{ padding:112px 0; } }

.band--dark{ background:var(--navy); color:var(--white); }
.band--light{ background:var(--white); }

/* ---------- tipografia ---------- */

.eyebrow{
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
}
.band--dark .eyebrow{ color:var(--cromio); }

.display{
  font-weight:300;
  font-size:clamp(34px,6vw,64px);
  line-height:1.06;
  letter-spacing:-.03em;
  text-wrap:balance;
  max-width:17ch;
}

.h2{
  font-weight:300;
  font-size:clamp(28px,4.4vw,44px);
  line-height:1.12;
  letter-spacing:-.025em;
  text-wrap:balance;
  max-width:22ch;
}

/* espacamento entre rotulo e titulo, sem style inline na marcacao */
.eyebrow + .h2{ margin-top:20px; }

.lede{
  font-size:clamp(17px,2vw,20px);
  line-height:1.55;
  color:var(--muted);
  max-width:58ch;
}
.band--dark .lede{ color:var(--cromio); }

/* ---------- acoes ---------- */

.actions{ display:flex; flex-wrap:wrap; gap:14px; }

.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:52px;
  padding:14px 26px;
  border-radius:6px;
  font-size:16px;
  font-weight:600;
  letter-spacing:-.01em;
  transition:background .18s ease,border-color .18s ease,color .18s ease;
}

.band--dark .btn--primary{ background:var(--white); color:var(--navy); }
.band--dark .btn--primary:hover{ background:var(--cromio); }
.band--dark .btn--ghost{ border:1px solid var(--rule-on-navy); color:var(--white); }
.band--dark .btn--ghost:hover{ border-color:var(--cromio); }

.btn--primary{ background:var(--navy); color:var(--white); }
.btn--primary:hover{ background:var(--navy-deep); }
.btn--ghost{ border:1px solid var(--rule); color:var(--navy); }
.btn--ghost:hover{ border-color:var(--navy); }

/* ---------- cabecalho ---------- */

.site-header{
  position:sticky;
  top:0;
  z-index:50;
  background:var(--white);
  border-bottom:1px solid var(--rule);
}
.site-header .wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  height:72px;
}
.brand{
  display:flex;
  align-items:center;
  gap:11px;
  min-height:44px;
  color:var(--navy);
}
.brand img{ height:36px; width:auto; }
.brand span{ font-weight:700; font-size:19px; letter-spacing:-.02em; }

.nav{ display:flex; align-items:center; gap:26px; }
.nav a:not(.btn){
  display:inline-flex;
  align-items:center;
  min-height:44px;
  font-size:15px;
  font-weight:500;
  color:var(--muted);
}
.nav a:not(.btn):hover{ color:var(--navy); }
.nav .btn{ min-height:44px; padding:11px 20px; font-size:15px; }

@media (max-width:880px){
  .nav a:not(.btn){ display:none; }
}

@media (max-width:480px){
  :root{ --pad:16px; }
  .site-header .wrap{ gap:8px; }
  .nav .btn{
    padding:10px;
    font-size:12px;
    white-space:nowrap;
  }
}

/* ---------- rodape ---------- */

.site-footer{
  background:var(--surface);
  border-top:1px solid var(--rule);
  padding:56px 0 44px;
  color:var(--muted);
}
.site-footer .wrap{ display:grid; gap:36px; }
@media (min-width:768px){
  .site-footer .wrap{
    grid-template-columns:auto 1fr;
    align-items:start;
    gap:64px;
  }
}
.site-footer img{ width:124px; height:auto; }
.site-footer a{ color:var(--navy); font-weight:500; }
.site-footer a:hover{ color:var(--navy-deep); text-decoration:underline; }
.footer-tagline{
  font-weight:600;
  font-size:16px;
  letter-spacing:-.01em;
  color:var(--navy);
  margin-bottom:14px;
}
.footer-contato{
  display:flex;
  flex-wrap:wrap;
  gap:2px 28px;
  font-size:16px;
  margin-bottom:22px;
}
.footer-contato a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
}
.legal{ font-size:14px; line-height:1.7; }

/* ---------- hero ---------- */

.hero{ padding:76px 0 84px; }
@media (min-width:768px){ .hero{ padding:112px 0 118px; } }

.hero .lede,
.cta .lede{ margin-top:24px; }
.hero .lede{ max-width:56ch; }
.hero .actions{ margin-top:40px; }

/* ---------- metodo ---------- */

.steps{ display:grid; gap:18px; margin-top:48px; }
@media (min-width:1120px){ .steps{ grid-template-columns:repeat(4,1fr); } }

.step{
  border:1px solid var(--rule-on-navy);
  border-radius:10px;
  padding:30px 26px;
  display:flex;
  flex-direction:column;
  gap:13px;
}
.step__n{
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--cromio);
}
.step h3{ font-weight:600; font-size:19px; letter-spacing:-.01em; }
.step p{ font-size:16px; line-height:1.55; color:var(--cromio); }

/* borda dourada do cartao de homologacao */
.step--highlight{
  position:relative;
  border-color:transparent;
  background:var(--surface-on-navy);
}
.step--highlight .step__n{ color:var(--gold-2); }
.step--highlight p{ color:var(--white); }

@supports ((-webkit-mask-composite:xor) or (mask-composite:exclude)){
  .step--highlight{ border-color:transparent; }
  .step--highlight::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:10px;
    padding:1px;
    background:var(--gold-grad);
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
    mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    mask-composite:exclude;
    pointer-events:none;
  }
}
@supports not ((-webkit-mask-composite:xor) or (mask-composite:exclude)){
  .step--highlight{ border-color:var(--gold-3); }
}

.note{
  margin-top:38px;
  padding-top:24px;
  border-top:1px solid var(--rule-on-navy);
  max-width:64ch;
  font-size:16px;
  color:var(--cromio);
}

/* ---------- duvidas ---------- */

.faq{ margin-top:48px; border-top:1px solid var(--rule); }
.faq__item{
  display:grid;
  gap:12px;
  padding:28px 0;
  border-bottom:1px solid var(--rule);
}
@media (min-width:820px){
  .faq__item{ grid-template-columns:minmax(0,28ch) 1fr; gap:44px; }
}
.faq__item h3{ font-weight:600; font-size:18px; letter-spacing:-.01em; }
.faq__item p{ color:var(--muted); max-width:64ch; }

/* ---------- chamada final ---------- */

.cta__rule{
  width:96px;
  height:3px;
  border-radius:2px;
  background:var(--gold-grad);
  margin-bottom:34px;
}
.cta .display{ max-width:20ch; }
.cta .actions{ margin-top:40px; }

/* ---------- medicao gratuita ---------- */

.cta__micro{
  margin-top:18px;
  max-width:56ch;
  font-size:14.5px;
  line-height:1.6;
  color:var(--cromio);
}

/* ---------- faixa em superficie clara ---------- */

.band--soft{ background:var(--surface); }

/* ---------- teste ao vivo ---------- */

.demo-viva .lede{ max-width:62ch; }
.demo-viva .actions{ margin-top:36px; }

/* ---------- solucoes: frentes em abas com cenas animadas ---------- */

/* a linha de apoio das cinco frentes cabe inteira no desktop: sem o
   limite de 58ch ela nao deixa "colar." orfao na segunda linha.
   O balance distribui as linhas quando a tela e estreita demais. */
#solucoes .lede{ text-wrap:balance; }
@media (min-width:1024px){
  #solucoes .lede{ max-width:none; }
}

.tabs__list{ display:flex; flex-wrap:wrap; gap:8px; margin-top:44px; }
.tabs__tab{
  min-height:48px;
  padding:11px 16px;
  border:1px solid var(--rule);
  border-radius:99px;
  background:var(--white);
  font-family:inherit;
  font-size:14px;
  font-weight:600;
  letter-spacing:-.01em;
  color:var(--muted);
  white-space:nowrap;
  cursor:pointer;
  transition:background .18s ease,color .18s ease,border-color .18s ease;
}
/* faixa intermediaria: pilulas mais justas para as cinco cabearem numa linha */
@media (min-width:900px) and (max-width:1119px){
  .tabs__tab{ font-size:13px; padding:10px 12px; }
  .tabs__list{ gap:6px; }
}

.tabs__tab:hover{ color:var(--navy); border-color:var(--navy); }
.tabs__tab[aria-selected="true"]{
  background:var(--navy);
  color:var(--white);
  border-color:var(--navy);
}

.tabs__panel{ margin-top:20px; display:grid; gap:24px; }
@media (min-width:900px){
  .tabs__panel{ grid-template-columns:300px 1fr; gap:40px; align-items:center; min-height:396px; }
}
.pratica__conteudo{ display:grid; gap:14px; }
/* no celular, a coluna de texto tambem se iguala a mais alta,
   para a troca de aba nao mudar a altura da pagina */
@media (max-width:599px){
  .pratica__conteudo{ min-height:380px; align-content:start; }
}
.tabs__panel[hidden]{ display:none; }

/* bloco de informacao das abas */
.pratica__conteudo h3{ font-weight:600; font-size:21px; letter-spacing:-.01em; }
.pratica__conteudo > p{ margin-top:10px; color:var(--muted); max-width:52ch; }

.pratica__lista{ display:grid; gap:10px; margin-top:18px; }
.pratica__lista li{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:15.5px;
  font-weight:500;
  color:var(--navy);
}
.pratica__lista .demo__check{ width:19px; height:19px; flex:none; }
.pratica__lista .demo__check svg{ width:10px; height:10px; }

/* mini celular das abas; altura fixa igual a da cena mais alta (celular),
   para a pagina nao pular a cada troca de aba */
.pratica__visual{ display:flex; justify-content:center; align-items:center; min-height:396px; }
/* especificidade composta: a base .phone vem depois no arquivo */
.phone.phone--mini{
  width:216px;
  padding:10px 9px;
  border-radius:26px;
  animation:none; /* o flip pertence ao hero */
  transform:none;
}
.phone--mini .phone__speaker{ width:44px; height:4px; margin-bottom:8px; }
.phone--mini .phone__screen{ height:362px; border-radius:17px; position:static; }

.chat--mini{ padding:12px 10px; gap:9px; }
.chat--mini .bolha{ font-size:12px; padding:8px 11px; }

.mini-status{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:6px;
  font-size:11.5px;
  font-weight:600;
  color:var(--navy);
}
.mini-status .demo__check{ width:18px; height:18px; }
.mini-status .demo__check svg{ width:10px; height:10px; }

.mini-agenda{ margin-top:6px; }
.mini-agenda .slot{ padding:8px 2px; }
.mini-agenda .slot span{ font-size:10.5px; width:34px; }
.mini-agenda .slot b{ font-size:10.5px; padding:6px 8px; animation:none; opacity:1; transform:none; }

.mini-kpi{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:9px 2px;
  border-bottom:1px solid var(--rule);
  font-size:11.5px;
  color:var(--muted);
}
.mini-kpi b{ font-size:14px; color:var(--navy); }

/* cena rejoga a cada troca de aba: entrada unica, com atraso em cadeia */
.tb-in{ animation:tb-entra .5s ease both; }
.tb-d2{ animation-delay:.9s; }
.tb-d3{ animation-delay:1.7s; }
.tb-d4{ animation-delay:2.4s; }
@keyframes tb-entra{
  from{ opacity:0; transform:translateY(6px); }
  to{ opacity:1; transform:none; }
}

@media (prefers-reduced-motion:reduce){
  .tb-in{ animation:none !important; opacity:1 !important; transform:none !important; }
}

/* ---------- janela de app (planilha, painel, navegador) ---------- */

.janela{
  width:100%;
  max-width:300px;
  background:var(--white);
  border:1px solid var(--rule);
  border-radius:12px;
  box-shadow:0 1px 2px rgba(18,32,58,.08),0 24px 56px -24px rgba(18,32,58,.35);
  overflow:hidden;
}
.janela__top{
  display:flex;
  align-items:center;
  gap:5px;
  padding:10px 12px;
  border-bottom:1px solid var(--rule);
  background:var(--surface);
}
.janela__top span{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--rule);
}
.janela__top b{
  margin-left:8px;
  font-size:11.5px;
  font-weight:600;
  color:var(--muted);
}
.janela__corpo{ padding:14px 12px; min-height:230px; }
.janela .bolha{ font-size:12px; padding:8px 11px; margin-top:10px; }

/* cena da integracao: o dado viaja de um app ao outro */
.duo{ position:relative; width:100%; max-width:300px; }
.janela--origem{ width:88%; }
.janela--destino{ width:88%; margin:-12px 0 0 12%; position:relative; z-index:2; }
.janela__corpo--compacto{ min-height:0; padding:12px; }

.pedido{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  border:1px solid var(--rule);
  border-radius:8px;
  padding:9px 11px;
}
.pedido__info b{ display:block; font-size:11.5px; font-weight:600; color:var(--navy); }
.pedido__info span{ display:block; font-size:10.5px; color:var(--muted); margin-top:1px; }
.pedido__tag{
  flex:none;
  font-size:8.5px;
  font-weight:700;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--navy);
  background:var(--gold-2);
  border-radius:99px;
  padding:3px 8px;
}

/* o pacotinho dourado que atravessa de uma janela a outra */
.pacote{
  position:absolute;
  left:54%;
  top:64px;
  width:13px;
  height:15px;
  border-radius:3px;
  background:var(--gold-grad);
  box-shadow:0 2px 8px rgba(196,154,34,.55);
  z-index:3;
  opacity:0;
  animation:pacote-viaja 1.1s ease-in-out .9s both;
}
@keyframes pacote-viaja{
  0%{ opacity:0; transform:translate(0,0) scale(.5); }
  18%{ opacity:1; transform:translate(6px,8px) scale(1); }
  82%{ opacity:1; transform:translate(46px,46px) scale(1); }
  100%{ opacity:0; transform:translate(54px,54px) scale(.5); }
}

/* campos que se preenchem sozinhos, com flash de "acabou de chegar" */
.campo{
  display:flex;
  align-items:center;
  gap:8px;
  padding:7px 9px;
  border:1px solid var(--rule);
  border-radius:7px;
}
.campo + .campo{ margin-top:6px; }
.campo > span:first-child{
  flex:none;
  width:46px;
  font-size:9px;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--muted);
}
.campo b{ font-size:11px; font-weight:600; color:var(--navy); }
.campo .demo__check{ margin-left:auto; width:14px; height:14px; flex:none; }
.campo .demo__check svg{ width:8px; height:8px; }
.campo--1{ animation:campo-chega .6s ease 1.8s both; }
.campo--2{ animation:campo-chega .6s ease 2.25s both; }
.campo--3{ animation:campo-chega .6s ease 2.7s both; }
@keyframes campo-chega{
  0%{ opacity:0; transform:translateY(5px); background:rgba(240,216,120,.5); }
  35%{ opacity:1; background:rgba(240,216,120,.5); }
  100%{ opacity:1; transform:none; background:transparent; }
}
.duo .mini-status{ margin-top:12px; }

/* cena dos paineis: dashboard escuro sob medida */
.janela__corpo--console{ background:var(--navy); }
.dash__topo{ display:flex; gap:10px; align-items:stretch; }
.dash__kpis{ flex:1; display:grid; gap:8px; }
.dash__kpi{
  border:1px solid var(--rule-on-navy);
  border-radius:8px;
  padding:7px 10px;
  background:var(--surface-on-navy);
}
.dash__kpi b{ display:block; font-size:18px; font-weight:600; letter-spacing:-.02em; color:var(--white); }
.dash__kpi span{ display:block; font-size:9px; color:var(--cromio); margin-top:1px; }

.dash__meta{ flex:none; width:66px; text-align:center; }
.dash__meta > span{ display:block; font-size:8.5px; color:var(--cromio); margin-top:4px; }
.dash__donut{
  position:relative;
  width:58px;
  height:58px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
}
.dash__donut svg{ position:absolute; inset:0; width:58px; height:58px; transform:rotate(-90deg); }
.donut__fundo{ fill:none; stroke:var(--rule-on-navy); stroke-width:3.4; }
.donut__arco{
  fill:none;
  stroke:var(--gold-2);
  stroke-width:3.4;
  stroke-linecap:round;
  stroke-dasharray:100;
  stroke-dashoffset:100;
  animation:donut-enche 1s ease-out 1.2s both;
}
@keyframes donut-enche{ to{ stroke-dashoffset:25; } }
.dash__donut b{ position:relative; font-size:11px; font-weight:600; color:var(--white); }

.dash__grafico{
  position:relative;
  margin-top:10px;
  border:1px solid var(--rule-on-navy);
  border-radius:8px;
  padding:10px 10px 7px;
  background:var(--surface-on-navy);
}
.dash__grafico svg{ display:block; width:100%; height:46px; }
.spark{
  stroke:var(--gold-2);
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray:220;
  stroke-dashoffset:220;
  animation:spark-desenha 1.2s ease-out 1.9s both;
}
@keyframes spark-desenha{ to{ stroke-dashoffset:0; } }
.spark__fim{
  position:absolute;
  right:13px;
  top:24px;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--gold-2);
  box-shadow:0 0 6px rgba(240,216,120,.7);
  opacity:0;
  animation:spark-chega .3s ease 3s both, spark-pulsa 2s ease-in-out 3.3s infinite;
}
@keyframes spark-chega{ to{ opacity:1; } }
@keyframes spark-pulsa{
  0%,100%{ transform:scale(1); }
  50%{ transform:scale(1.6); }
}
.dash__legenda{ display:block; font-size:8.5px; color:var(--cromio); margin-top:5px; }
.janela__corpo--console .mini-status{ color:var(--white); }

/* cena das paginas: a landing e o celular ligados */
.palco{ position:relative; width:100%; max-width:300px; }
.janela--browser{ width:100%; }
.janela__corpo--site{ min-height:0; padding:18px 16px 20px; }
.site__nav{ display:flex; align-items:center; gap:6px; margin-bottom:14px; }
.site__logo{ width:11px; height:11px; border-radius:3px; background:var(--navy); }
.site__nav i{ width:20px; height:4px; border-radius:2px; background:var(--rule); }
.site__nav i:first-of-type{ margin-left:auto; }
.site__titulo{ font-size:16.5px; font-weight:700; letter-spacing:-.01em; line-height:1.25; color:var(--navy); max-width:11ch; }
.site__texto{ font-size:10.5px; color:var(--muted); margin-top:6px; max-width:24ch; }

/* a agenda da propria pagina: o horario combinado no chat se confirma aqui */
.site__agenda{ margin-top:18px; padding-top:14px; border-top:1px solid var(--rule); margin-right:110px; }
.site__agenda-rotulo{
  display:block;
  font-size:9px;
  font-weight:600;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:8px;
}
.site__horarios{ display:flex; gap:7px; }
.horario{
  flex:1;
  text-align:center;
  padding:7px 0;
  border:1px solid var(--rule);
  border-radius:7px;
  font-size:10.5px;
  font-weight:600;
  color:var(--muted);
  background:var(--white);
}
.horario--confirmado{ animation:horario-confirma .45s ease 4.7s both; }
@keyframes horario-confirma{
  to{ background:var(--navy); border-color:var(--gold-3); color:var(--white); }
}
.site__cta{
  position:relative;
  display:inline-flex;
  align-items:center;
  margin-top:14px;
  padding:7px 12px;
  border-radius:99px;
  background:#25D366; /* verde oficial do WhatsApp: excecao ratificada */
  color:var(--white);
  font-size:10.5px;
  font-weight:600;
}
.site__anel{
  position:absolute;
  inset:-3px;
  border-radius:99px;
  border:2px solid #25D366;
  opacity:0;
  animation:anel-pulsa .9s ease-out 1s 2;
}
@keyframes anel-pulsa{
  0%{ opacity:.7; transform:scale(.96); }
  100%{ opacity:0; transform:scale(1.18); }
}

/* o clique vira conversa: um ponto dourado viaja ate o celular */
.viaja{
  position:absolute;
  left:152px;
  top:184px;
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--gold-grad);
  box-shadow:0 0 8px rgba(196,154,34,.7);
  z-index:6;
  opacity:0;
  animation:viaja-ate-fone 1s ease-in-out 1.9s both;
}
@keyframes viaja-ate-fone{
  0%{ opacity:0; transform:translate(0,0) scale(.5); }
  20%{ opacity:1; transform:translate(22px,-10px) scale(1); }
  80%{ opacity:1; transform:translate(52px,-74px) scale(1); }
  100%{ opacity:0; transform:translate(60px,-86px) scale(.5); }
}

.phone.phone--micro{
  position:absolute;
  right:-8px;
  top:58px;
  width:126px;
  margin:0;
  padding:7px 6px 10px;
  border-radius:20px;
  z-index:5;
  transform-origin:bottom right;
  animation:fone-chega .55s cubic-bezier(.3,1.4,.5,1) 2.7s both;
}
@keyframes fone-chega{
  from{ opacity:0; transform:scale(.55); }
  to{ opacity:1; transform:scale(1); }
}
.phone--micro .phone__speaker{ display:none; }
.phone--micro .phone__screen{ height:156px; border-radius:14px; position:static; }
.phone--micro .tela__top{ font-size:9.5px; padding:7px 9px; }
.chat--micro{ padding:8px 7px; gap:6px; }
.chat--micro .bolha{ font-size:9.5px; padding:6px 9px; }
.micro-b1{ animation:tb-entra .5s ease 3.4s both; }
.micro-b2{ animation:tb-entra .5s ease 4s both; }
.mini-status--fecho{ margin-top:16px; animation:tb-entra .5s ease 5.3s both; }
.site__titulo,
.site__texto{ max-width:14ch; }
.site__texto{ max-width:17ch; }

@media (prefers-reduced-motion:reduce){
  .pacote,.viaja{ animation:none !important; opacity:0 !important; }
  .campo--1,.campo--2,.campo--3{ animation:none !important; opacity:1 !important; transform:none !important; background:transparent !important; }
  .donut__arco{ animation:none !important; stroke-dashoffset:25 !important; }
  .spark{ animation:none !important; stroke-dashoffset:0 !important; }
  .spark__fim{ animation:none !important; opacity:1 !important; transform:none !important; }
  .site__anel{ animation:none !important; }
  .phone--micro{ animation:none !important; opacity:1 !important; transform:none !important; }
  .micro-b1,.micro-b2,.mini-status--fecho{ animation:none !important; opacity:1 !important; transform:none !important; }
  .horario--confirmado{
    animation:none !important;
    background:var(--navy);
    border-color:var(--gold-3);
    color:var(--white);
  }
}

/* reel na cena de marketing */
.post{
  border:1px solid var(--rule);
  border-radius:10px;
  padding:9px;
}
.post__video{
  position:relative;
  height:88px;
  border-radius:7px;
  background:linear-gradient(135deg,var(--navy) 0%,var(--navy-deep) 100%);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.post__play{
  width:28px;
  height:28px;
  border-radius:50%;
  background:rgba(255,255,255,.94);
  display:flex;
  align-items:center;
  justify-content:center;
  animation:play-pulsa 2.2s ease-in-out infinite;
}
.post__play::after{
  content:"";
  margin-left:3px;
  border-left:9px solid var(--navy);
  border-top:6px solid transparent;
  border-bottom:6px solid transparent;
}
@keyframes play-pulsa{
  0%,100%{ transform:scale(1); }
  50%{ transform:scale(1.12); }
}
.post__tempo{
  position:absolute;
  right:6px;
  bottom:6px;
  font-size:9px;
  font-weight:600;
  color:var(--white);
  background:rgba(18,32,58,.55);
  padding:2px 6px;
  border-radius:4px;
}
.post__legenda{
  margin-top:8px;
  font-size:11px;
  font-weight:500;
  color:var(--navy);
}

/* redes na cena de marketing */
.redes{ display:flex; align-items:center; gap:8px; margin-top:8px; }
.rede{
  width:26px;
  height:26px;
  border-radius:8px;
  background:var(--navy);
  display:flex;
  align-items:center;
  justify-content:center;
  animation:rede-pop .45s cubic-bezier(.3,1.4,.5,1) both;
}
.rede svg{ width:14px; height:14px; }
.rede--1{ animation-delay:1.6s; }
.rede--2{ animation-delay:1.78s; }
@keyframes rede-pop{
  from{ opacity:0; transform:scale(.4); }
  to{ opacity:1; transform:scale(1); }
}
.redes__rotulo{ font-size:10.5px; font-weight:600; color:var(--muted); }

/* icones nas cores oficiais das redes — excecao de marca ratificada,
   como o verde do WhatsApp */
.rede--ig{
  background:radial-gradient(circle at 30% 110%,#FDF497 0%,#FDF497 5%,#FD5949 45%,#D6249F 60%,#285AEB 90%);
}
.rede--tt{ background:#010101; }

/* quinto passo da cena */
.tb-d5{ animation-delay:3.1s; }

@media (prefers-reduced-motion:reduce){
  .post__play{ animation:none !important; }
  .rede{ animation:none !important; opacity:1 !important; transform:none !important; }
}

/* ---------- agentes: cartoes com orbita dourada ---------- */

.agentes{ display:grid; gap:16px; margin-top:48px; }
@media (min-width:820px){ .agentes{ grid-template-columns:repeat(3,1fr); } }

.card{
  background:var(--white);
  border:1px solid var(--rule);
  border-radius:14px;
  padding:28px 24px;
  box-shadow:0 1px 2px rgba(27,43,73,.04),0 16px 40px -16px rgba(27,43,73,.14);
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
.card:hover{
  transform:translateY(-4px);
  box-shadow:0 2px 4px rgba(27,43,73,.05),0 24px 48px -16px rgba(27,43,73,.2);
  border-color:rgba(196,154,34,.45);
}
.card h3{ font-weight:600; font-size:18.5px; letter-spacing:-.01em; }
.card p{ margin-top:10px; color:var(--muted); font-size:15.5px; line-height:1.6; }

.agente__avatar{ width:56px; height:56px; }

.orbita{
  position:relative;
  width:88px;
  height:88px;
  margin-bottom:16px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.orbita::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  border:1px solid rgba(196,154,34,.5);
  box-shadow:0 0 20px rgba(196,154,34,.22);
  animation:orbita-pulso 5s ease-in-out infinite;
}
.orbita::after{
  content:"";
  position:absolute;
  inset:9px;
  border-radius:50%;
  border:1px dashed rgba(196,154,34,.55);
  animation:orbita-gira 10s linear infinite;
}
.orbita__ponto{
  position:absolute;
  inset:0;
  animation:orbita-gira 10s linear infinite;
}
.orbita__ponto::before{
  content:"";
  position:absolute;
  top:-3px;
  left:50%;
  width:7px;
  height:7px;
  margin-left:-3.5px;
  border-radius:50%;
  background:var(--gold-grad);
  box-shadow:0 0 8px rgba(196,154,34,.6);
}
@keyframes orbita-gira{ to{ transform:rotate(360deg); } }
@keyframes orbita-pulso{
  0%,100%{ transform:scale(1); opacity:.6; }
  50%{ transform:scale(1.05); opacity:1; }
}

@media (prefers-reduced-motion:reduce){
  .orbita::before,.orbita::after,.orbita__ponto{ animation:none !important; }
  .orbita::before{ opacity:.8; }
}

/* glifos dos agentes, animados pela funcao */

/* atende: digitando... */
.gl-dot{
  transform-box:fill-box;
  transform-origin:center;
  animation:gl-digitar 1.6s ease-in-out infinite;
}
.gl-dot--2{ animation-delay:.22s; }
.gl-dot--3{ animation-delay:.44s; }
@keyframes gl-digitar{
  0%,55%,100%{ opacity:.35; transform:none; }
  25%{ opacity:1; transform:translateY(-2px); }
}

/* agenda: o dia confirmado pulsa */
.gl-dia{
  transform-box:fill-box;
  transform-origin:center;
  animation:gl-confirma 2.4s ease-in-out infinite;
}
@keyframes gl-confirma{
  0%,100%{ opacity:.45; transform:scale(1); }
  50%{ opacity:1; transform:scale(1.25); }
}

/* reporta: a tendencia se desenha ate a seta */
.gl-trend{
  stroke-dasharray:34;
  animation:gl-desenha 3.2s ease-in-out infinite;
}
.gl-trend-a{ animation:gl-seta 3.2s ease-in-out infinite; }
@keyframes gl-desenha{
  0%{ stroke-dashoffset:34; opacity:1; }
  40%,82%{ stroke-dashoffset:0; opacity:1; }
  94%,100%{ stroke-dashoffset:0; opacity:0; }
}
@keyframes gl-seta{
  0%,34%{ opacity:0; }
  44%,82%{ opacity:1; }
  94%,100%{ opacity:0; }
}

/* movimento reduzido: glifos completos e parados */
@media (prefers-reduced-motion:reduce){
  .gl-dot{ animation:none !important; opacity:1 !important; transform:none !important; }
  .gl-dia{ animation:none !important; opacity:1 !important; transform:none !important; }
  .gl-trend{ animation:none !important; stroke-dashoffset:0 !important; opacity:1 !important; }
  .gl-trend-a{ animation:none !important; opacity:1 !important; }
}

/* ---------- filete dourado que se desenha ao revelar a secao ---------- */

.h2::after{
  content:"";
  display:block;
  width:64px;
  height:3px;
  border-radius:2px;
  background:var(--gold-grad);
  margin-top:18px;
  transform:scaleX(1);
  transform-origin:left;
}
.js .reveal .h2::after{
  transition:transform .7s cubic-bezier(.25,.8,.25,1) .2s;
}
.js .reveal:not(.is-in) .h2::after{ transform:scaleX(0); }

/* respiro entre o filete e o texto de apoio */
.h2 + .lede{ margin-top:16px; }

/* ---------- entrada escalonada do cabecalho de cada secao ---------- */

.js .reveal .eyebrow,
.js .reveal .h2,
.js .reveal .display,
.js .reveal .cta__rule,
.js .reveal .lede{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .55s ease,transform .55s ease;
}
.js .reveal .eyebrow,
.js .reveal .cta__rule{ transition-delay:.08s; }
.js .reveal .h2,
.js .reveal .display{ transition-delay:.2s; }
.js .reveal .lede{ transition-delay:.32s; }

.js .reveal.is-in .eyebrow,
.js .reveal.is-in .h2,
.js .reveal.is-in .display,
.js .reveal.is-in .cta__rule,
.js .reveal.is-in .lede{
  opacity:1;
  transform:none;
}

/* o filete sob o titulo desenha depois que o titulo chegou */
.js .reveal .h2::after{ transition-delay:.5s; }

@media (prefers-reduced-motion:reduce){
  .js .reveal .eyebrow,
  .js .reveal .h2,
  .js .reveal .display,
  .js .reveal .cta__rule,
  .js .reveal .lede{ opacity:1 !important; transform:none !important; transition:none !important; }
  .js .reveal .h2::after{ transform:scaleX(1) !important; transition:none !important; }
}

/* ---------- scrollspy: o menu acompanha a secao ativa ---------- */

.nav a:not(.btn){ position:relative; }
.nav a:not(.btn)::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:5px;
  height:2px;
  border-radius:1px;
  background:var(--gold-grad);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .35s ease;
}
.nav a.is-atual{ color:var(--navy); }
.nav a.is-atual::after{ transform:scaleX(1); }

/* ---------- na pratica ---------- */

.pratica{ display:grid; gap:16px; margin-top:48px; }
@media (min-width:820px){ .pratica{ grid-template-columns:1fr 1fr; } }

/* ---------- garantias ---------- */

.gar{ display:grid; gap:18px; margin-top:48px; }
@media (min-width:900px){ .gar{ grid-template-columns:repeat(3,1fr); } }

.gar__item,
.pratica__item{
  background:var(--white);
  border:1px solid var(--rule);
  border-radius:10px;
  padding:30px 26px;
}
.gar__item h3,
.pratica__item h3{ font-weight:600; font-size:18px; line-height:1.4; letter-spacing:-.01em; }
.gar__item p,
.pratica__item p{ margin-top:12px; color:var(--muted); font-size:16px; line-height:1.55; }


/* ---------- botao flutuante de whatsapp ---------- */
/* verde oficial do WhatsApp: excecao deliberada a paleta, por decisao
   do dono da marca — o botao deve ser reconhecivel como WhatsApp. */

.whats-float{
  position:fixed;
  right:calc(20px + env(safe-area-inset-right));
  bottom:calc(20px + env(safe-area-inset-bottom));
  z-index:60;
  width:56px;
  height:56px;
  border-radius:50%;
  background:#25D366;
  box-shadow:0 6px 24px rgba(18,32,58,.35);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .18s ease, transform .18s ease;
}
.whats-float:hover{ background:#1DAF54; transform:translateY(-2px); }
.whats-float svg{ width:28px; height:28px; fill:var(--white); }

/* ---------- chamada de saida ---------- */

.exit-modal{
  margin:auto; /* o reset global zera o margin:auto que centraliza o dialog */
  border:1px solid var(--rule);
  border-radius:14px;
  padding:42px 30px 26px;
  max-width:420px;
  width:calc(100vw - 48px);
  color:var(--navy);
  box-shadow:0 2px 4px rgba(27,43,73,.05),0 28px 72px -16px rgba(27,43,73,.3);
  overflow:hidden;
}
/* filete dourado no topo, ecoando o filete da pagina */
.exit-modal::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:3px;
  background:var(--gold-grad);
}
.exit-modal::backdrop{ background:rgba(18,32,58,.45); }
.exit-modal h2{ font-weight:600; font-size:22px; letter-spacing:-.01em; max-width:18ch; }
.exit-modal h2::after{
  content:"";
  display:block;
  width:44px;
  height:3px;
  border-radius:2px;
  background:var(--gold-grad);
  margin-top:14px;
}
.exit-modal p{ margin-top:14px; color:var(--muted); max-width:44ch; }
.exit-modal .actions{ margin-top:24px; }
.exit-modal__close{
  position:absolute;
  top:8px;
  right:8px;
  width:44px;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:none;
  border:0;
  border-radius:8px;
  cursor:pointer;
  color:var(--muted);
}
.exit-modal__close:hover{ color:var(--navy); background:var(--surface); }
.exit-modal__later{
  margin-top:14px;
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:0;
  background:none;
  border:0;
  cursor:pointer;
  font-family:inherit;
  font-size:14.5px;
  font-weight:600;
  color:var(--muted);
}
.exit-modal__later:hover{ color:var(--navy); }

/* ============================================================
   Camada de polimento — revisão visual 2026-08-11.
   Luz, profundidade e presença da paleta completa, sobre a
   estrutura aprovada. Nenhuma cor nova: só os tokens do :root.
   ============================================================ */

/* faixas escuras ganham profundidade em vez de chapado */
.band--dark{
  background:linear-gradient(172deg,var(--navy) 0%,var(--navy-deep) 100%);
}

/* hero: brilho dourado sutil + textura de grade esmaecida */
.hero{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(880px 500px at 85% -8%, rgba(240,216,120,.16), transparent 62%),
    linear-gradient(170deg,var(--navy) 0%,var(--navy-deep) 100%);
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(197,202,210,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(197,202,210,.05) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 85% 70% at 70% 12%,#000 25%,transparent 75%);
  mask-image:radial-gradient(ellipse 85% 70% at 70% 12%,#000 25%,transparent 75%);
  pointer-events:none;
}
.hero .wrap{ position:relative; }

/* chamada final: eco do brilho, vindo do canto oposto */
.cta{
  background:
    radial-gradient(760px 440px at 12% 112%, rgba(240,216,120,.12), transparent 60%),
    linear-gradient(352deg,var(--navy) 0%,var(--navy-deep) 100%);
}

/* rotulo de secao com filete dourado: a paleta presente em cada secao */
.eyebrow{ display:inline-flex; align-items:center; gap:10px; }
.eyebrow::before{
  content:"";
  width:22px;
  height:2px;
  border-radius:1px;
  background:var(--gold-grad);
}

/* botoes com elevacao */
.btn{
  border-radius:8px;
  transition:background .18s ease,border-color .18s ease,color .18s ease,
             transform .18s ease,box-shadow .18s ease;
}
.btn--primary{ box-shadow:0 10px 24px -10px rgba(27,43,73,.4); }
.btn--primary:hover{ transform:translateY(-2px); }
.band--dark .btn--primary{ box-shadow:0 12px 30px -10px rgba(18,32,58,.6); }

/* cartoes com profundidade e resposta ao toque */
.gar__item,
.pratica__item{
  border-radius:14px;
  box-shadow:0 1px 2px rgba(27,43,73,.04),0 16px 40px -16px rgba(27,43,73,.14);
  transition:transform .22s ease,box-shadow .22s ease;
}
.gar__item:hover,
.pratica__item:hover{
  transform:translateY(-4px);
  box-shadow:0 2px 4px rgba(27,43,73,.05),0 24px 48px -16px rgba(27,43,73,.2);
}
.step{ border-radius:12px; }

/* o cartao de homologacao irradia a propria borda */
.step--highlight{ box-shadow:0 0 48px -8px rgba(240,216,120,.25); }

/* revelacao ao rolar — a classe .js no html e o portao: sem script,
   nada fica oculto; com movimento reduzido, tudo aparece de imediato */
.js .reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s ease,transform .6s ease; }
.js .reveal.is-in{ opacity:1; transform:none; }

/* linha de reforco do diagnostico: menor que o lede, mais firme */
.cta__reforco{
  margin-top:22px;
  max-width:56ch;
  font-size:15.5px;
  line-height:1.6;
  color:var(--white);
}

/* ---------- toques de dourado (revisao 2026-08-11) ---------- */

/* fio de marca no topo da pagina, acompanha o cabecalho fixo */
.site-header::before{
  content:"";
  display:block;
  height:2px;
  background:var(--gold-grad);
}

/* o fecho do metodo ecoa o filete do CTA final */
.note{ border-top:0; padding-top:0; }
.note::before{
  content:"";
  display:block;
  width:48px;
  height:2px;
  border-radius:1px;
  background:var(--gold-grad);
  margin-bottom:16px;
}

/* garantias esquentam a borda ao toque */
.gar__item,.pratica__item{ border:1px solid var(--rule); }
.gar__item:hover,.pratica__item:hover{ border-color:rgba(196,154,34,.45); }

/* ============================================================
   Demonstracao do hero — um celular vive o agendamento pelo
   WhatsApp, flipa para o CRM e flipa para a agenda.
   Ciclo unico de 12s, so CSS. Verde do WhatsApp: mesma excecao
   de paleta ja ratificada para o botao flutuante.
   ============================================================ */

.hero__grid{ display:grid; gap:56px; align-items:center; }
@media (min-width:980px){
  .hero__grid{ grid-template-columns:minmax(0,1fr) 340px; gap:64px; }
}
.hero__demo{ max-width:300px; margin:0 auto; width:100%; perspective:1200px; }

.phone{
  width:260px;
  margin:0 auto;
  background:var(--navy-deep);
  border:1px solid var(--rule-on-navy);
  border-radius:34px;
  padding:14px 12px;
  box-shadow:0 2px 4px rgba(18,32,58,.3),0 32px 80px -24px rgba(18,32,58,.7);
  transform-style:preserve-3d;
  animation:phone-flip 12s ease-in-out infinite;
}
@keyframes phone-flip{
  0%,29%{ transform:rotateY(0) }
  31.5%{ transform:rotateY(-90deg) }
  34%,62%{ transform:rotateY(0) }
  64.5%{ transform:rotateY(-90deg) }
  67%,95%{ transform:rotateY(0) }
  97.5%{ transform:rotateY(-90deg) }
  100%{ transform:rotateY(0) }
}

.phone__speaker{
  width:56px;
  height:5px;
  border-radius:3px;
  background:var(--rule-on-navy);
  margin:0 auto 10px;
}
.phone__screen{
  position:relative;
  height:420px;
  background:var(--surface);
  border-radius:22px;
  overflow:hidden;
}

.tela{ position:absolute; inset:0; opacity:0; display:flex; flex-direction:column; }
.tela--whats{ animation:tela-1 12s infinite; }
.tela--crm{ animation:tela-2 12s infinite; }
.tela--agenda{ animation:tela-3 12s infinite; }
@keyframes tela-1{ 0%,31%{opacity:1} 32%,97%{opacity:0} 98%,100%{opacity:1} }
@keyframes tela-2{ 0%,31%{opacity:0} 32%,64%{opacity:1} 65%,100%{opacity:0} }
@keyframes tela-3{ 0%,64%{opacity:0} 65%,97%{opacity:1} 98%,100%{opacity:0} }

.tela__top{
  flex:none;
  display:flex;
  align-items:center;
  gap:8px;
  padding:12px 14px;
  font-size:12.5px;
  font-weight:600;
  color:var(--navy);
  background:var(--white);
  border-bottom:1px solid var(--rule);
}
.tela__top--whats{ background:#25D366; color:var(--white); border-bottom:0; }
.tela__dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--white);
}

/* --- face 1: conversa --- */
.chat{ padding:14px 12px; display:flex; flex-direction:column; gap:10px; }
.bolha{
  max-width:85%;
  padding:9px 12px;
  border-radius:12px;
  font-size:12.5px;
  line-height:1.45;
  color:var(--navy);
}
.bolha--in{
  align-self:flex-start;
  background:var(--white);
  border-bottom-left-radius:4px;
  box-shadow:0 1px 2px rgba(27,43,73,.1);
}
.bolha--out{
  align-self:flex-end;
  background:rgba(37,211,102,.22);
  border-bottom-right-radius:4px;
}
.bolha--1{ animation:bolha-1 12s infinite; }
.bolha--2{ animation:bolha-2 12s infinite; }
.bolha--3{ animation:bolha-3 12s infinite; }
@keyframes bolha-1{ 0%,2%{opacity:0;transform:translateY(6px)} 5%,96%{opacity:1;transform:none} 100%{opacity:0} }
@keyframes bolha-2{ 0%,11%{opacity:0;transform:translateY(6px)} 14%,96%{opacity:1;transform:none} 100%{opacity:0} }
@keyframes bolha-3{ 0%,20%{opacity:0;transform:translateY(6px)} 23%,96%{opacity:1;transform:none} 100%{opacity:0} }

/* --- face 2: crm --- */
.ficha{ padding:16px 14px; display:flex; flex-direction:column; gap:0; }
.ficha__row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px 2px;
  border-bottom:1px solid var(--rule);
  font-size:12.5px;
}
.ficha__row span{ color:var(--muted); }
.ficha__row strong{ color:var(--navy); font-weight:600; }
.ficha__row--1{ animation:ficha-1 12s infinite; }
.ficha__row--2{ animation:ficha-2 12s infinite; }
.ficha__row--3{ animation:ficha-3 12s infinite; }
@keyframes ficha-1{ 0%,35%{opacity:0;transform:translateY(5px)} 38%,96%{opacity:1;transform:none} 100%{opacity:0} }
@keyframes ficha-2{ 0%,40%{opacity:0;transform:translateY(5px)} 43%,96%{opacity:1;transform:none} 100%{opacity:0} }
@keyframes ficha-3{ 0%,45%{opacity:0;transform:translateY(5px)} 48%,96%{opacity:1;transform:none} 100%{opacity:0} }

.ficha__ok{
  display:flex;
  align-items:center;
  gap:9px;
  padding-top:16px;
  font-size:12.5px;
  font-weight:600;
  color:var(--navy);
  animation:ficha-ok 12s infinite;
}
@keyframes ficha-ok{ 0%,52%{opacity:0;transform:scale(.9)} 55%,96%{opacity:1;transform:scale(1)} 100%{opacity:0} }

.demo__check{
  flex:none;
  width:20px;
  height:20px;
  border-radius:50%;
  background:var(--gold-grad);
  color:var(--navy);
  display:flex;
  align-items:center;
  justify-content:center;
}
.demo__check svg{ width:11px; height:11px; }

/* --- face 3: agenda --- */
.slots{ padding:14px 12px; display:flex; flex-direction:column; }
.slot{
  display:flex;
  align-items:center;
  gap:10px;
  padding:11px 2px;
  border-bottom:1px solid var(--rule);
}
.slot span{ font-size:11.5px; color:var(--muted); width:40px; flex:none; }
.slot em{ flex:1; height:1px; }
.slot b{
  flex:1;
  display:block;
  background:var(--navy);
  color:var(--white);
  border-left:3px solid var(--gold-3);
  border-radius:6px;
  padding:7px 10px;
  font-size:11.5px;
  font-weight:600;
  animation:slot-novo 12s infinite;
  transform-origin:left center;
}
@keyframes slot-novo{ 0%,69%{opacity:0;transform:scaleX(.6)} 73%,96%{opacity:1;transform:scaleX(1)} 100%{opacity:0} }

/* --- chips de fase, sincronizados com as faces --- */
.demo__stages{ display:flex; gap:8px; margin-top:18px; }
.demo__stage{
  flex:1;
  text-align:center;
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.04em;
  border:1px solid var(--rule-on-navy);
  border-radius:6px;
  padding:7px 4px;
  color:var(--cromio);
}
.demo__stage--1{ animation:chip-1 12s infinite; }
.demo__stage--2{ animation:chip-2 12s infinite; }
.demo__stage--3{ animation:chip-3 12s infinite; }
@keyframes chip-1{
  0%,31%{background:var(--white);color:var(--navy);border-color:var(--white)}
  32%,97%{background:transparent;color:var(--cromio);border-color:var(--rule-on-navy)}
  98%,100%{background:var(--white);color:var(--navy);border-color:var(--white)}
}
@keyframes chip-2{
  0%,31%{background:transparent;color:var(--cromio);border-color:var(--rule-on-navy)}
  32%,64%{background:var(--white);color:var(--navy);border-color:var(--white)}
  65%,100%{background:transparent;color:var(--cromio);border-color:var(--rule-on-navy)}
}
@keyframes chip-3{
  0%,64%{background:transparent;color:var(--cromio);border-color:var(--rule-on-navy)}
  65%,97%{background:var(--white);color:var(--navy);border-color:var(--white)}
  98%,100%{background:transparent;color:var(--cromio);border-color:var(--rule-on-navy)}
}

/* movimento reduzido: celular parado na agenda confirmada */
@media (prefers-reduced-motion:reduce){
  .phone{ animation:none !important; }
  .tela{ animation:none !important; }
  .tela--whats,.tela--crm{ opacity:0 !important; }
  .tela--agenda{ opacity:1 !important; }
  .slot b{ animation:none !important; opacity:1 !important; transform:none !important; }
  .demo__stage{ animation:none !important; }
  .demo__stage--3{ background:var(--white); color:var(--navy); border-color:var(--white); }
}