/* Landing (/ e /en/), desenhada no Claude Design em 19/10/2026, direção
   "Escuta". Seções de largura inteira que alternam o azul da marca, o azul
   escuro, o creme e uma faixa lilás, para a página ter ritmo. As outras páginas
   (preços, termos, privacidade) continuam no site.css. */

@font-face {
  font-family: "Newsreader";
  src: url("/fontes/newsreader.ttf") format("truetype");
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("/fontes/geist.ttf") format("truetype");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("/fontes/geist_mono.ttf") format("truetype");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --azul: #22406e;
  --azul-escuro: #1b335a;
  --noite: #13284a;
  --linha: #3a5a8a;
  --linha-noite: #33507e;
  --creme: #f5f2ec;
  --creme-cartao: #fbfaf7;
  --creme-fundo: #e9e6df;
  --creme-linha: #c9cfdb;
  --lilas: #9db7e4;
  --lilas-claro: #b4c8ec;
  --tinta-suave: #dce3ef;
  --apagado: #c8d3e6;
  --fraco: #a9bad6;
  --selo: #2f5386;
  /* no creme: o azul do destaque, o dos rótulos e o do texto corrido */
  --azul-medio: #3d63a3;
  --azul-rotulo: #5b78b0;
  --azul-texto: #3a5a8a;
  --azul-lista: #2d4a78;
  --azul-calmo: #4a6390;
  /* o coral marca só o que está vivo */
  --vivo: #ff9e7d;
  --sinal: #ffb39a;
  --serif: "Newsreader", Georgia, serif;
  --sans: "Geist", system-ui, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, Consolas, monospace;
  --margem: clamp(20px, 4.4vw, 56px);
  --respiro: clamp(72px, 9vw, 128px);
  color-scheme: dark;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--azul);
  color: var(--creme);
  font: 17px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--lilas); }

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

.oculto {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* o miolo de cada seção, com a mesma largura em todas */
.miolo {
  max-width: 1168px;
  margin: 0 auto;
}

.secao { padding: var(--respiro) var(--margem); }
.secao-creme { background: var(--creme); color: var(--azul); }
.secao-noite { background: var(--noite); }
.secao-escura { background: var(--azul-escuro); }

.rotulo {
  margin: 0;
  color: var(--lilas);
  font: 500 13px var(--mono);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.secao-creme .rotulo { color: var(--azul-rotulo); }

h1, h2 { margin: 0; font-weight: 500; font-family: var(--serif); text-wrap: balance; }
h1 em, h2 em { color: var(--lilas); }
.secao-creme h2 em { color: var(--azul-medio); }

h2 {
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1.04;
  letter-spacing: -.02em;
}
h3 { margin: 0; }
p { text-wrap: pretty; }

.cabeca {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 760px;
}
.cabeca p:not(.rotulo) { margin: 0; color: var(--tinta-suave); font-size: 18px; }
.secao-creme .cabeca p:not(.rotulo) { color: var(--azul-texto); }

.link-sublinhado {
  align-self: flex-start;
  padding-bottom: 2px;
  border-bottom: 1px solid rgb(157 183 228 / .5);
  color: var(--lilas);
  font: 500 15px var(--sans);
}
.secao-creme .link-sublinhado { color: var(--azul-medio); border-color: rgb(61 99 163 / .4); }

/* --------------------------------------------------------------- formulário */

/* Os três formulários da lista de espera (topo, faixa lilás e final) são o
   mesmo: campo creme e botão lilás. O site.js grava qualquer um deles. */
.form-espera {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  width: 100%;
  max-width: 520px;
}
.form-espera input[type="email"] {
  flex: 1 1 240px;
  min-width: 0;
  height: 54px;
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  background: var(--creme);
  color: var(--azul);
  font: 16px var(--sans);
}
.form-espera input[type="email"]::placeholder { color: #6f82a3; }
.form-espera input[type="email"]:focus-visible { outline-color: var(--creme); }
.form-espera button {
  flex: 1 1 auto;
  height: 54px;
  padding: 0 26px;
  border: 0;
  border-radius: 999px;
  background: var(--lilas);
  color: var(--azul);
  font: 600 16px var(--sans);
  cursor: pointer;
  transition: background .15s;
}
.form-espera button:hover { background: var(--lilas-claro); }
.form-espera button:disabled { opacity: .6; cursor: default; }

.dica { margin: 0; color: var(--fraco); font-size: 14px; }
.aviso { min-height: 1.4em; margin: 0; font-size: 15px; }
.aviso:empty { display: none; }
.aviso.ok { color: var(--creme); }
.aviso.erro { color: var(--sinal); }

/* --------------------------------------------------------------------- topo */

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: min(920px, 100vh);
  overflow: hidden;
  background: radial-gradient(ellipse 1100px 640px at 50% 0, rgb(157 183 228 / .22), transparent 70%), var(--azul);
}

.topo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: clamp(18px, 2.4vw, 28px) var(--margem);
}
.logo { height: clamp(22px, 2.2vw, 28px); width: auto; fill: var(--creme); }
.logo .logo-do { fill: var(--lilas); }

.topo-nav { display: flex; align-items: center; gap: 22px; color: var(--tinta-suave); font-size: 15px; }
.topo-secoes { display: contents; }
.topo-lingua {
  padding: 4px 10px;
  border: 1px solid var(--linha);
  border-radius: 999px;
  color: var(--apagado);
  font: 500 13px var(--mono);
}
.topo-lingua:hover { border-color: var(--fraco); color: var(--creme); }
.topo-chamada {
  padding: 9px 16px;
  border: 1px solid rgb(245 242 236 / .3);
  border-radius: 999px;
  color: var(--creme);
  font-size: 14px;
  font-weight: 500;
}

.hero-texto {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(18px, 2vw, 26px);
  padding: clamp(20px, 4vw, 48px) var(--margem) 0;
  text-align: center;
}

.pilula {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 7px 15px;
  border: 1px solid rgb(245 242 236 / .2);
  border-radius: 999px;
  background: rgb(245 242 236 / .08);
  font-size: 14px;
  font-weight: 500;
}
.pilula .ponto {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--vivo);
  transition: background .3s;
}
.pilula[data-fase="2"] .ponto { background: var(--lilas); }

.hero h1 {
  font-size: clamp(58px, 8.2vw, 108px);
  line-height: 1;
  letter-spacing: -.025em;
}
.hero h1 em { display: inline-block; }

.hero .sub {
  max-width: 640px;
  margin: 0;
  color: var(--tinta-suave);
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.5;
}
.hero .form-espera { margin-top: 4px; }
.hero .dica { margin-top: -8px; }

/* a voz: as barras e, embaixo, o pedido e a resposta acendendo */
.hero-voz {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 2vw, 22px);
  margin-top: auto;
  padding: clamp(28px, 4vw, 40px) var(--margem) clamp(28px, 3.4vw, 44px);
}

.barras {
  display: flex;
  align-items: center;
  gap: clamp(3px, .4vw, 5px);
  height: clamp(64px, 9vw, 120px);
}
.barras span {
  flex: 1;
  height: 5%;
  border-radius: 4px;
  background: var(--linha);
  transition: height .09s linear, background .3s;
}

.conversa {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--linha);
}
.conversa > div { display: flex; flex-direction: column; gap: 6px; }
.conversa .quem {
  color: var(--fraco);
  font: 500 12px var(--mono);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.conversa .quem-agente { color: var(--lilas); }
.conversa .fala { min-height: 60px; font: 400 22px/1.35 var(--serif); }
.resposta { display: flex; flex-wrap: wrap; column-gap: .28em; font: 400 22px/1.35 var(--serif); }
.resposta span { color: #4f6c9c; transition: color .25s; }
.resposta span.acesa { color: var(--creme); }

/* no celular, uma legenda só, que vai trocando de quem fala */
.legenda {
  display: none;
  flex-direction: column;
  gap: 5px;
  min-height: 104px;
  padding-top: 14px;
  border-top: 1px solid var(--linha);
}
.legenda-quem { color: var(--fraco); font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.legenda[data-fase="1"] .legenda-quem { color: var(--sinal); }
.legenda[data-fase="2"] .legenda-quem { color: var(--lilas); }
.legenda-texto { font: 400 19px/1.35 var(--serif); }

/* --------------------------------------------------------- funciona com */

.faixa-provedores {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px 28px;
  padding: 20px var(--margem);
  border-block: 1px solid #2c4a78;
  background: var(--azul-escuro);
}
.faixa-provedores > span:first-child { color: var(--fraco); font: 500 13px var(--mono); }
.faixa-provedores .provedor { display: inline-flex; align-items: center; gap: 9px; font-size: 17px; font-weight: 500; }
.sigla {
  display: grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--selo);
  color: var(--tinta-suave);
  font: 600 11px var(--mono);
}

/* ------------------------------------------------------------------ vídeo */

/* O painel de verdade, gravado pelo demo/gravar.js: deitado acima de 600 px,
   em pé abaixo; claro e escuro como o sistema. */
.demo .miolo { display: flex; flex-direction: column; gap: clamp(32px, 4vw, 48px); }

.demo-quadro {
  overflow: hidden;
  border: 1px solid var(--linha);
  border-radius: 20px;
  background: var(--azul);
  box-shadow: 0 24px 60px -30px rgb(0 0 0 / .35);
}
.demo-quadro video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 820 / 520;
}
@media (max-width: 600px) {
  .demo-quadro:not([data-formato]) video { aspect-ratio: 460 / 760; }
}
.demo-quadro[data-formato="celular"] { width: 100%; max-width: 380px; margin: 0 auto; }
.demo-quadro[data-formato="celular"] video { aspect-ratio: 460 / 760; }

.demo-rodape {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 14px;
}
.demo-legenda { margin: 0; color: var(--fraco); font-size: 14px; }
.demo-controles { flex: none; display: flex; align-items: center; gap: 10px; }

.demo-aparelhos {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--linha);
  border-radius: 999px;
  background: var(--azul-escuro);
}
.demo-aparelhos button {
  display: grid;
  place-items: center;
  width: 34px;
  height: 30px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--apagado);
  cursor: pointer;
}
.demo-aparelhos button:hover { color: var(--creme); }
.demo-aparelhos button[aria-pressed="true"] { background: var(--selo); color: var(--lilas); }

.demo-aparelhos svg, .demo-som svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.demo-som {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px 8px 10px;
  border: 1px solid var(--linha);
  border-radius: 999px;
  background: var(--azul-escuro);
  color: var(--creme);
  font: 500 14px var(--sans);
  cursor: pointer;
}
.demo-som:hover { border-color: var(--fraco); }
.demo-som svg path:first-child { fill: currentColor; stroke: none; }
.demo-som .onda { display: none; }
.demo-som[aria-pressed="true"] .onda { display: inline; }
.demo-som[aria-pressed="true"] .risco { display: none; }

/* ---------------------------------------------------------- como funciona */

.como .miolo, .privacidade .miolo, .depoimentos .miolo, .precos .miolo {
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 5vw, 64px);
}

.passos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(28px, 3vw, 40px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.passos li {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 22px;
  border-top: 2px solid var(--azul);
}
.passos .num { color: var(--lilas); font: italic 500 64px/1 var(--serif); }
.passos h3 { font: 600 21px/1.25 var(--sans); }
.passos p { margin: 0; color: var(--azul-texto); font-size: 17px; }

.aparelhos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2px;
  overflow: hidden;
  border: 2px solid #d8dce4;
  border-radius: 20px;
  background: #d8dce4;
}
.aparelhos > div {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 22px 24px;
  background: var(--creme-cartao);
}
.aparelhos svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: var(--azul-medio);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.aparelhos strong { margin-top: 6px; font-size: 17px; }
.aparelhos span { color: var(--azul-calmo); font-size: 15px; line-height: 1.5; }

/* ------------------------------------------------------------- sincronia */

/* O painel e o app gravados juntos (demo/gravar-sincronia.mjs), cada vídeo na
   moldura do seu aparelho: notebook 16:10 e celular 1080×2400. */
.sincronia .miolo { display: flex; flex-direction: column; gap: clamp(36px, 4vw, 48px); }

.sinc-legenda { margin-top: 18px; }

.sinc-palco {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 84px 220px;
  align-items: end;
}
.sinc-tela {
  overflow: hidden;
  border: 10px solid #0d0d0c;
  background: #141311;
  box-shadow: 0 24px 60px -30px rgb(0 0 0 / .5);
}
.sinc-tela video { display: block; width: 100%; height: 100%; object-fit: cover; }
.sinc-pc .sinc-tela { aspect-ratio: 16 / 10; border-radius: 16px 16px 4px 4px; }
/* a base do notebook */
.sinc-pc::after {
  content: "";
  display: block;
  height: 14px;
  margin: 0 -5%;
  border-radius: 2px 2px 14px 14px;
  background: linear-gradient(#d5dbe5, #8c98ad);
}
.sinc-cel .sinc-tela { aspect-ratio: 9 / 20; border-width: 8px; border-radius: 30px; }

/* o elo entre os dois: pontilhado, com o selo "ao vivo" */
.sinc-elo {
  position: relative;
  align-self: center;
  height: 2px;
  margin: 0 10px;
  background: repeating-linear-gradient(90deg, var(--fraco) 0 4px, transparent 4px 9px);
  opacity: .9;
}
.sinc-elo-rotulo {
  position: absolute;
  top: 14px;
  left: 50%;
  translate: -50% 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--sinal);
  font: 500 12px var(--mono);
  white-space: nowrap;
}
.sinc-elo-rotulo::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  animation: pulsa 1.6s ease-in-out infinite;
}
@keyframes pulsa { 50% { opacity: .35; transform: scale(.8); } }

/* tela estreita: o celular vai para a frente do notebook, no canto */
@media (max-width: 640px) {
  .sinc-palco { display: block; position: relative; padding-bottom: 28px; }
  .sinc-pc { width: 86%; }
  .sinc-pc .sinc-tela { border-width: 6px; border-radius: 10px 10px 3px 3px; }
  .sinc-pc::after { height: 9px; }
  .sinc-elo { display: none; }
  .sinc-cel { position: absolute; right: 0; bottom: 0; width: 31%; }
  .sinc-cel .sinc-tela { border-width: 5px; border-radius: 18px; box-shadow: 0 16px 40px -10px rgb(0 0 0 / .7); }
}

/* ------------------------------------------------------------ privacidade */

/* o caminho da fala: você, a rede privada, o PC e, tracejado, o modelo de IA,
   que é a única coisa que sai */
.caminho {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 120px minmax(0, 1fr) 72px minmax(0, 1fr);
  align-items: center;
}
.caminho-no {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px;
  border: 1px solid var(--linha-noite);
  border-radius: 18px;
  background: var(--azul-escuro);
}
.caminho-no span { color: var(--fraco); font: 500 12px var(--mono); }
.caminho-no strong { font: 500 24px/1.25 var(--serif); }
.caminho-no small { color: var(--apagado); font-size: 15px; }
.caminho-pc { border-color: var(--lilas); background: var(--azul); box-shadow: 0 0 0 6px rgb(157 183 228 / .1); }
.caminho-pc span { color: var(--lilas); }
.caminho-ia { border-style: dashed; background: none; }

.caminho-elo {
  position: relative;
  display: grid;
  place-items: center;
  height: 40px;
}
.caminho-elo::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 100%;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--lilas) 0 4px, transparent 4px 9px);
}
.caminho-elo.fraco::before { background: repeating-linear-gradient(90deg, #4f6c9c 0 4px, transparent 4px 9px); }
.caminho-elo span {
  position: relative;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--lilas);
  color: var(--noite);
  font: 500 12px var(--mono);
  white-space: nowrap;
}

@media (max-width: 900px) {
  .caminho { grid-template-columns: 1fr; }
  .caminho-elo { height: 56px; }
  .caminho-elo::before {
    width: 2px;
    height: 100%;
    background: repeating-linear-gradient(180deg, var(--lilas) 0 4px, transparent 4px 9px);
  }
  .caminho-elo.fraco::before { background: repeating-linear-gradient(180deg, #4f6c9c 0 4px, transparent 4px 9px); }
}

.garantias {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: clamp(24px, 3vw, 40px);
}
.garantias > div { display: flex; flex-direction: column; gap: 8px; }
.garantias h3 { font: 600 18px var(--sans); }
.garantias p, .nota-nuvem { margin: 0; color: var(--apagado); font-size: 16px; }
.nota-nuvem { padding-top: 24px; border-top: 1px solid var(--linha-noite); }
.nota-nuvem strong { color: var(--creme); font-weight: 600; }

/* ------------------------------------------------------------- provedores */

.provedores .miolo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: clamp(40px, 5vw, 72px);
  align-items: start;
}
.provedores .cabeca { gap: 18px; }

.prov-lado { display: flex; flex-direction: column; gap: 20px; }
.prov-lista {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--creme-linha);
  list-style: none;
}
.prov-lista li {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--creme-linha);
}
.prov-lista .sigla { width: 44px; height: 44px; border-radius: 12px; background: var(--azul); color: var(--creme); font-size: 13px; }
.prov-lista .prov-mais .sigla { border: 1.5px dashed #9aa8c2; background: none; color: #5b6f92; font-size: 18px; }
.prov-lista span:last-child { display: flex; flex-direction: column; gap: 2px; }
.prov-lista strong { font-size: 18px; }
.prov-lista small { color: #5b6f92; font-size: 14px; }

.prov-igual {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px 24px;
  border-radius: 18px;
  background: var(--creme-fundo);
}
.prov-igual .rotulo { color: #5b6f92; font-size: 12px; }
.prov-igual ul {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 0;
  padding: 0 0 0 18px;
  color: var(--azul-lista);
  font-size: 16px;
  line-height: 1.45;
}

/* ------------------------------------------------------------ faixa lilás */

.faixa-lilas {
  padding: clamp(56px, 6vw, 80px) var(--margem);
  background: var(--lilas);
  color: var(--noite);
}
.faixa-lilas .miolo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: 28px 56px;
  align-items: center;
}
.faixa-lilas h2 { font-size: clamp(34px, 4vw, 50px); line-height: 1.06; }
.faixa-lilas h2 em { color: inherit; }
.faixa-lilas .chamada { display: flex; flex-direction: column; gap: 10px; }
.faixa-lilas .form-espera button { background: var(--noite); color: var(--creme); }
.faixa-lilas .form-espera button:hover { background: var(--azul); }
.faixa-lilas .dica, .faixa-lilas .aviso.ok { color: var(--azul); }
.faixa-lilas .aviso.erro { color: #8a2f12; }

/* ------------------------------------------------------------------ promo */

.promo .miolo { display: flex; flex-direction: column; gap: clamp(32px, 4vw, 48px); }

/* Promo no YouTube: só a miniatura até o clique, para a página não carregar o
   player (e os cookies) de quem não vai assistir */
.promo-quadro {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--linha);
  border-radius: 20px;
  background: #000;
  box-shadow: 0 24px 60px -30px rgb(0 0 0 / .35);
  cursor: pointer;
}
.promo-quadro img,
.promo-quadro iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}
.promo-play {
  position: absolute;
  inset: 0;
  margin: auto;
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: var(--lilas);
  color: var(--azul);
  box-shadow: 0 10px 30px -8px rgb(0 0 0 / .5);
  transition: transform .15s;
}
.promo-play svg { width: 32px; height: 32px; margin-left: 4px; fill: currentColor; }
.promo-quadro:hover .promo-play { transform: scale(1.06); }
.promo-canal { margin: 14px 0 0; font-size: 15px; }
.promo-canal a { color: var(--lilas); }
.promo-canal a:hover { color: var(--creme); }

.youtube, .rede { display: inline-flex; align-items: center; gap: 6px; }
.youtube svg, .rede svg { width: 18px; height: 18px; fill: currentColor; }

/* ------------------------------------------------------------ depoimentos */

.citacoes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 20px;
}
.citacoes figure {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-height: 240px;
  margin: 0;
  padding: 28px;
  border: 1px solid var(--linha);
  border-radius: 20px;
}
.citacoes figure::before { content: "“"; height: 28px; color: var(--lilas); font: italic 500 56px/.6 var(--serif); }
.citacoes blockquote { margin: 0; font: 400 22px/1.4 var(--serif); }
.citacoes figcaption { display: flex; flex-direction: column; gap: 2px; margin-top: auto; }
.citacoes figcaption strong { color: var(--tinta-suave); font-size: 15px; }
.citacoes figcaption small { color: var(--fraco); font-size: 13px; }

/* ------------------------------------------------------------------ preços */

.precos-cabeca {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: 18px clamp(40px, 5vw, 72px);
  align-items: end;
}
.precos-cabeca > div { display: flex; flex-direction: column; gap: 14px; }
.precos-cabeca > div:first-child { gap: 18px; }
.precos-cabeca p:not(.rotulo) { margin: 0; color: var(--azul-texto); font-size: 18px; }

.planos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 20px;
  align-items: stretch;
}
.plano {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: clamp(24px, 3vw, 32px);
  border: 1px solid var(--creme-linha);
  border-radius: 24px;
  background: var(--creme-cartao);
}
.plano-topo {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-height: 44px;
}
.plano-topo strong { font: 500 30px var(--serif); }
.plano-valor { display: flex; flex-direction: column; gap: 6px; }
.plano-valor > div { display: flex; align-items: baseline; gap: 8px; }
.plano-preco { font: 500 clamp(52px, 6vw, 64px)/1 var(--serif); letter-spacing: -.02em; }
.plano-por { color: var(--azul-calmo); font-size: 17px; }
.plano-nota { min-height: 22px; color: var(--azul-medio); font-size: 15px; }
.plano ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 18px 0 0;
  border-top: 1px solid #d8dce4;
  color: var(--azul-lista);
  font-size: 16px;
  line-height: 1.4;
  list-style: none;
}
.plano li { display: flex; gap: 10px; }
.plano li::before { content: "✓"; flex: none; color: var(--azul-medio); }
.plano-botao {
  display: grid;
  place-items: center;
  height: 54px;
  margin-top: auto;
  border: 1.5px solid var(--azul);
  border-radius: 999px;
  color: var(--azul);
  font: 600 16px var(--sans);
  transition: background .15s, color .15s;
}
.plano-botao:hover { background: var(--azul); color: var(--creme); }

/* o Pro em destaque, no azul da marca */
.plano-pro {
  border: 0;
  background: var(--azul);
  color: var(--creme);
  box-shadow: 0 30px 60px -36px rgb(19 40 74 / .6);
}
.plano-pro .plano-por { color: var(--apagado); }
.plano-pro .plano-nota { color: var(--lilas); }
.plano-pro ul { border-color: var(--linha); color: var(--tinta-suave); }
.plano-pro li::before { color: var(--lilas); }
.plano-pro .plano-acao { display: flex; flex-direction: column; gap: 10px; margin-top: auto; }
.plano-pro .plano-botao { margin: 0; border: 0; background: var(--lilas); color: var(--azul); }
.plano-pro .plano-botao:hover { background: var(--lilas-claro); color: var(--azul); }
.plano-pro .plano-acao small { color: var(--apagado); font-size: 14px; text-align: center; }

/* mensal ou anual: o anual vem marcado */
.periodo { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--noite); }
.periodo button {
  height: 36px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--apagado);
  font: 500 14px var(--sans);
  cursor: pointer;
}
.periodo button[aria-pressed="true"] { background: var(--creme); color: var(--azul); }

/* o Nuvem ainda não existe: tracejado, com o selo */
.plano-nuvem { border: 1.5px dashed #b2bdd1; background: none; }
.selo-breve {
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--azul-medio);
  color: var(--creme);
  font: 500 12px var(--mono);
}

.precos-rodape { margin: 0; color: var(--azul-calmo); font-size: 15px; line-height: 1.5; }

/* --------------------------------------------------------------------- FAQ */

.faq .miolo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
.faq .cabeca p:not(.rotulo) { color: var(--apagado); font-size: 16px; }
.faq .cabeca a { color: var(--lilas); }

.perguntas { border-top: 1px solid var(--linha); }
.perguntas details { border-bottom: 1px solid var(--linha); }
.perguntas summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  min-height: 44px;
  padding: 22px 0;
  font: 500 18px/1.35 var(--sans);
  cursor: pointer;
  list-style: none;
}
.perguntas summary::-webkit-details-marker { display: none; }
.perguntas summary::after {
  content: "+";
  flex: none;
  color: var(--lilas);
  font: 400 24px/1 var(--sans);
  transition: transform .2s;
}
.perguntas details[open] summary::after { transform: rotate(45deg); }
.perguntas p { max-width: 620px; margin: -6px 0 22px; color: var(--apagado); font-size: 16px; line-height: 1.6; }

/* --------------------------------------------------------- lista de espera */

.espera {
  position: relative;
  overflow: hidden;
  padding: clamp(80px, 10vw, 140px) var(--margem) clamp(40px, 5vw, 64px);
  background: radial-gradient(ellipse 900px 520px at 50% 100%, rgb(157 183 228 / .28), transparent 70%), var(--azul);
}
.espera-texto {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.espera h2 { font-size: clamp(44px, 6.4vw, 84px); line-height: 1.02; letter-spacing: -.025em; }
.espera-texto > p:not(.dica):not(.aviso) { margin: 0; color: var(--tinta-suave); font-size: clamp(17px, 1.6vw, 19px); line-height: 1.5; }
.espera .form-espera input[type="email"], .espera .form-espera button { height: 56px; }
.espera .dica { margin-top: -8px; }
.espera .barras { max-width: 1168px; height: 72px; margin: clamp(48px, 6vw, 80px) auto 0; gap: 4px; }
.espera .barras span { border-radius: 3px; background: #3d5f94; transition: height .12s linear; }

/* ------------------------------------------------------------------ rodapé */

.rodape {
  padding: 40px var(--margem);
  background: var(--noite);
  color: var(--apagado);
  font-size: 15px;
}
.rodape .miolo {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 24px 40px;
}
.rodape p { margin: 0; }
.rodape strong { color: var(--creme); }
.rodape em { font-family: var(--serif); font-size: 17px; }
.rodape nav, .rodape-links { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
.rodape .mono { color: #7f93b5; font: 500 13px var(--mono); }

/* ------------------------------------------------- contato e barra do celular */

/* botão de contato no canto (WhatsApp em português, e-mail em inglês); sobe
   quando a barra do celular aparece */
.contato {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 10;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  box-shadow: 0 10px 24px -8px rgb(0 0 0 / .5);
  transition: transform .15s ease, bottom .25s ease;
}
.contato:hover { transform: scale(1.06); }
.contato svg { width: 30px; height: 30px; }
.contato-whatsapp { background: #25d366; color: #fff; }
.contato-whatsapp svg { fill: currentColor; }
.contato-email { background: var(--lilas); color: var(--azul); }
.contato-email svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* no celular, depois do topo e até a lista final, a chamada fica presa embaixo */
.barra-espera {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  display: none;
  align-items: center;
  gap: 12px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--linha-noite);
  background: rgb(19 40 74 / .94);
  backdrop-filter: blur(10px);
}
.barra-espera span { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.barra-espera strong { font-size: 15px; }
.barra-espera small { color: var(--fraco); font-size: 13px; }
.barra-espera a {
  display: grid;
  place-items: center;
  flex: none;
  height: 48px;
  padding: 0 22px;
  border-radius: 999px;
  background: var(--lilas);
  color: var(--azul);
  font: 600 15px var(--sans);
}

/* -------------------------------------------------------------- tela estreita */

@media (max-width: 860px) {
  .topo-secoes { display: none; }
}

@media (max-width: 760px) {
  .conversa { display: none; }
  .legenda { display: flex; }
  .barra-espera.visivel { display: flex; }
  body:has(.barra-espera.visivel) .contato { bottom: 92px; }
  .rodape { padding-bottom: 104px; }
}

@media (max-width: 560px) {
  .demo-quadro, .promo-quadro { border-radius: 14px; }
  .promo-play { width: 60px; height: 60px; }
  .topo-nav { gap: 12px; }
  .demo-legenda { font-size: 13px; }
  .demo-rodape { flex-wrap: wrap; }
  .demo-controles { margin-left: auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .sinc-elo-rotulo::before { animation: none !important; }
  .barras span, .resposta span { transition: none; }
}