/* ============================================================================
   Hub Agent — home pública
   ----------------------------------------------------------------------------
   Paleta herdada do símbolo da marca: azul #1E3A8A, violeta #7C3AED,
   ciano #22D3EE. O painel ADM (panel.css) usa as mesmas três — o site e o
   painel são a mesma marca vista de dois lugares.

   OS DOIS TEMAS. O escuro é o padrão porque a home vive em cima de fotografia,
   e foto sob camada escura mantém contraste com qualquer imagem; no claro, a
   mesma foto precisa de um véu branco mais forte, que come a imagem. Quem
   nunca tocou no botão recebe o tema do sistema operacional (prefers-color-
   scheme, resolvido em site.js antes da primeira pintura); quem escolheu, tem a
   escolha gravada em localStorage e ela vence o sistema.

   Toda cor está declarada em :root e redeclarada em [data-tema="claro"]. Não
   existe cor escrita direto em regra de componente — trocar de tema é trocar a
   rampa, nunca caçar exceção.
   ========================================================================== */

:root{
  --azul:#1E3A8A; --violeta:#7C3AED; --ciano:#22D3EE;

  /* O DEGRADÊ DO TEXTO É SEPARADO DAS CORES DA MARCA, e precisa ser.
     Escrito com --ciano → --violeta, a última letra da palavra cai em #7C3AED:
     roxo escuro, que no tema escuro quase some no fundo. Trocar a cor da marca
     para resolver isso estragaria os botões, onde #7C3AED está certo. Então o
     degradê tem par próprio, claro no tema escuro e escuro no tema claro. */
  --grad-1:#22D3EE;
  --grad-2:#A78BFA;

  --fundo:#080B14;
  --tinta:#F1F5F9;
  --tinta-2:#CBD5E1;
  --tinta-3:#94A3B8;

  /* O vidro fumê: fundo semitransparente + desfoque + borda de luz. */
  --vidro:rgba(8,11,20,.58);
  --vidro-leve:rgba(8,11,20,.42);
  --vidro-borda:rgba(241,245,249,.14);
  --vidro-sombra:0 24px 60px -20px rgba(0,0,0,.7);

  /* A cortina sobre as fotos. Ver o comentário do carrossel em site.js. */
  --veu:rgba(8,11,20,.36);
  --veu-fim:rgba(8,11,20,.72);

  --raio:18px;
  --raio-min:11px;
  --largura:1140px;
}

[data-tema="claro"]{
  --grad-1:#0E7490;
  --grad-2:#6D28D9;

  --fundo:#F6F7FB;
  --tinta:#0F172A;
  --tinta-2:#334155;
  --tinta-3:#64748B;

  --vidro:rgba(255,255,255,.72);
  --vidro-leve:rgba(255,255,255,.58);
  --vidro-borda:rgba(15,23,42,.10);
  --vidro-sombra:0 24px 60px -24px rgba(15,23,42,.28);

  /* No claro a cortina clareia em vez de escurecer: a letra é escura, e o que
     precisa de contraste é o fundo atrás dela. */
  --veu:rgba(246,247,251,.58);
  --veu-fim:rgba(246,247,251,.86);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }

body{
  margin:0; background:var(--fundo); color:var(--tinta);
  font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3{line-height:1.18;letter-spacing:-.02em;margin:0}

/* ---------------------------------------------------------------- fundo ---
   Camada fixa, atrás de tudo (z-index negativo), fora do fluxo. Ela NÃO pode
   morar dentro de um contêiner com overflow ou transform: ficaria presa a esse
   contêiner e deixaria de cobrir a tela ao rolar.                            */
.fundo{position:fixed;inset:0;z-index:-10;overflow:hidden;background:var(--fundo);pointer-events:none}
.fundo .slide{position:absolute;inset:0;opacity:0;transition:opacity 2000ms ease-in-out}
.fundo .slide.on{opacity:1}
.fundo img{
  width:100%;height:100%;object-fit:cover;
  filter:saturate(1.12);
  /* O zoom lento é TRANSIÇÃO, não keyframe. Com keyframe, a imagem que sai
     perde a animação no instante da troca e volta a scale(1) em zero
     milissegundo — no meio de um fade de 2s isso aparece como um tranco. Como
     transição de 12s, ela apenas começa a voltar: nos 2s em que ainda está
     visível percorre menos de um sexto de um movimento de 8%. */
  transform:scale(1) translateZ(0);
  transition:transform 12000ms linear;
  will-change:transform,opacity;
}
.fundo .slide.on img{transform:scale(1.08) translateZ(0)}
.fundo .veu{position:absolute;inset:0;background:var(--veu)}
.fundo .veu-degrade{position:absolute;inset:0;
  background:linear-gradient(to bottom,transparent 0%,var(--veu) 55%,var(--veu-fim) 100%)}

@media (prefers-reduced-motion: reduce){
  .fundo .slide{transition:none}
  .fundo img{transition:none;transform:none}
  .fundo .slide.on img{transform:none}
}

/* ---------------------------------------------------------------- vidro ---
   backdrop-filter TEM RESERVA: navegador sem suporte ignora a linha e fica só
   com o fundo translúcido. A regra @supports engrossa o fundo nesse caso,
   porque sem o desfoque a opacidade sozinha não segura a leitura.            */
.vidro{
  background:var(--vidro);
  backdrop-filter:blur(18px) saturate(1.1);
  -webkit-backdrop-filter:blur(18px) saturate(1.1);
  border:1px solid var(--vidro-borda);
  border-radius:var(--raio);
  box-shadow:var(--vidro-sombra);
}
.vidro-leve{
  background:var(--vidro-leve);
  backdrop-filter:blur(12px) saturate(1.08);
  -webkit-backdrop-filter:blur(12px) saturate(1.08);
  border:1px solid var(--vidro-borda);
  border-radius:var(--raio);
}
@supports not (backdrop-filter: blur(1px)){
  :root{--vidro:rgba(8,11,20,.88);--vidro-leve:rgba(8,11,20,.8)}
  [data-tema="claro"]{--vidro:rgba(255,255,255,.94);--vidro-leve:rgba(255,255,255,.9)}
}

/* ---------------------------------------------------------------- topo ---- */
.topo{position:sticky;top:0;z-index:30;padding:12px 0;
  background:var(--vidro-leve);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--vidro-borda)}
.topo .interno{max-width:var(--largura);margin:0 auto;padding:0 22px;
  display:flex;align-items:center;gap:18px}
.marca{display:flex;align-items:center;gap:11px;font-size:18px;font-weight:600;letter-spacing:-.02em}
.marca img{width:38px;height:38px;border-radius:10px}
.marca b{background:linear-gradient(120deg,var(--grad-1),var(--grad-2));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.menu{display:flex;gap:6px;margin-left:auto;align-items:center}
.menu a{padding:8px 14px;border-radius:999px;color:var(--tinta-2);font-size:14.5px;font-weight:500}
.menu a:hover{background:var(--vidro-leve);color:var(--tinta)}
/* `.menu a` tem especificidade maior que `.btn-principal` e estava pintando o
   texto do botão com a cor de link do menu. No tema escuro isso passou
   despercebido (a cor de link é clara, e clara é o que o botão queria); no
   claro o "Começar" saiu escuro sobre roxo escuro, ilegível. As duas regras
   abaixo devolvem ao botão a cor dele dentro do menu. */
.menu a.btn-principal{color:#fff}
.menu a.btn-principal:hover{color:#fff;background:linear-gradient(120deg,var(--azul),var(--violeta))}
.menu a.btn-vidro{color:var(--tinta)}
.tema{background:none;border:1px solid var(--vidro-borda);color:var(--tinta-2);
  width:38px;height:38px;border-radius:50%;cursor:pointer;font-size:16px;line-height:1;
  display:grid;place-items:center;transition:border-color .15s,color .15s}
.tema:hover{color:var(--tinta);border-color:var(--tinta-3)}
.abrir-menu{display:none;background:none;border:1px solid var(--vidro-borda);color:var(--tinta);
  width:38px;height:38px;border-radius:10px;cursor:pointer;font-size:18px}

/* --------------------------------------------------------------- botões --- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 26px;border-radius:999px;border:1px solid transparent;
  font:inherit;font-weight:600;font-size:15.5px;cursor:pointer;
  transition:transform .15s,filter .15s,background .15s}
.btn:hover{transform:translateY(-1px);filter:brightness(1.08)}
.btn:active{transform:translateY(0)}
.btn-principal{background:linear-gradient(120deg,var(--azul),var(--violeta));color:#fff;
  /* Anel escuro por fora: botão colorido sobre foto some quando a imagem tem,
     por acaso, um tom parecido. O anel o separa de qualquer fundo. */
  box-shadow:0 0 0 1px rgba(0,0,0,.35), 0 12px 30px -10px rgba(124,58,237,.75)}
.btn-vidro{background:var(--vidro-leve);border-color:var(--vidro-borda);color:var(--tinta);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.btn-min{padding:9px 18px;font-size:14px}
.btn-largo{width:100%}

/* ---------------------------------------------------------------- seções -- */
/* O cabeçalho é `sticky`: sem esta margem de rolagem, clicar em "Planos" no
   menu para a seção com o título escondido atrás da própria barra. */
.secao{max-width:var(--largura);margin:0 auto;padding:76px 22px;scroll-margin-top:72px}
.secao-titulo{text-align:center;max-width:660px;margin:0 auto 44px}
.secao-titulo h2{font-size:clamp(26px,4vw,38px)}
.secao-titulo p{color:var(--tinta-2);font-size:17px;margin:14px 0 0}
.olho{display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ciano);margin-bottom:12px}

/* ------------------------------------------------------------------ hero -- */
.hero{max-width:var(--largura);margin:0 auto;padding:82px 22px 92px;
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:34px;align-items:center}
.hero-texto{padding:38px 36px}
.hero h1{font-size:clamp(31px,5.2vw,52px)}
.hero h1 em{font-style:normal;
  background:linear-gradient(120deg,var(--grad-1),var(--grad-2));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero p.chamada{font-size:18px;color:var(--tinta-2);margin:20px 0 0;max-width:52ch}
.hero .acoes{display:flex;gap:12px;margin-top:30px;flex-wrap:wrap}
.hero .provas{display:flex;gap:22px;margin:30px 0 0;padding:20px 0 0;flex-wrap:wrap;
  border-top:1px solid var(--vidro-borda);color:var(--tinta-3);font-size:13.5px}
.hero .provas b{display:block;color:var(--tinta);font-size:19px;font-weight:700;letter-spacing:-.01em}

/* O cartão de demonstração: uma conversa parada, só para mostrar a cara. */
.demo{padding:20px}
.demo .demo-topo{display:flex;align-items:center;gap:10px;padding:0 4px 14px;
  border-bottom:1px solid var(--vidro-borda);margin-bottom:14px}
.demo .bolinha{width:9px;height:9px;border-radius:50%;background:#34D399;
  box-shadow:0 0 0 3px rgba(52,211,153,.18)}
.demo .demo-topo span{font-size:14px;font-weight:600}
.demo .demo-topo small{margin-left:auto;color:var(--tinta-3);font-size:12px}
.demo .fala{max-width:84%;padding:11px 15px;border-radius:15px;font-size:14.5px;margin-bottom:10px}
.demo .fala-bot{background:var(--vidro-leve);border:1px solid var(--vidro-borda);
  border-bottom-left-radius:5px}
.demo .fala-eu{background:linear-gradient(120deg,var(--azul),var(--violeta));color:#fff;
  margin-left:auto;border-bottom-right-radius:5px}
.demo .digitando{display:flex;gap:4px;padding:13px 15px;width:60px}
.demo .digitando i{width:7px;height:7px;border-radius:50%;background:var(--tinta-3);
  animation:pulsar 1.3s infinite ease-in-out}
.demo .digitando i:nth-child(2){animation-delay:.18s}
.demo .digitando i:nth-child(3){animation-delay:.36s}
@keyframes pulsar{0%,60%,100%{opacity:.28;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
@media (prefers-reduced-motion: reduce){ .demo .digitando i{animation:none;opacity:.5} }

/* -------------------------------------------------------------- recursos -- */
.cartoes{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:18px}
.cartao{padding:26px 24px}
.cartao .icone{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
  background:linear-gradient(120deg,rgba(30,58,138,.9),rgba(124,58,237,.9));
  font-size:20px;margin-bottom:16px}
.cartao h3{font-size:17.5px;margin-bottom:9px}
.cartao p{color:var(--tinta-2);font-size:14.8px;margin:0}

/* ----------------------------------------------------------------- passos - */
.passos{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:18px;counter-reset:passo}
.passo{padding:26px 24px;position:relative}
.passo::before{counter-increment:passo;content:counter(passo);
  display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  background:linear-gradient(120deg,var(--azul),var(--violeta));color:#fff;
  font-weight:700;font-size:15px;margin-bottom:15px}
.passo h3{font-size:16.5px;margin-bottom:8px}
.passo p{color:var(--tinta-2);font-size:14.5px;margin:0}

/* ----------------------------------------------------------------- planos - */
.planos{display:grid;grid-template-columns:repeat(auto-fit,minmax(276px,1fr));gap:20px;align-items:start}
.plano{padding:30px 26px;position:relative;display:flex;flex-direction:column;height:100%}
.plano.destaque{border-color:rgba(124,58,237,.55);
  box-shadow:var(--vidro-sombra), 0 0 0 1px rgba(124,58,237,.35)}
.plano .selo{position:absolute;top:-11px;left:50%;transform:translateX(-50%);
  background:linear-gradient(120deg,var(--azul),var(--violeta));color:#fff;
  padding:5px 15px;border-radius:999px;font-size:11.5px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.plano h3{font-size:19px;margin-bottom:4px}
.plano .cobranca{color:var(--tinta-3);font-size:13px;margin:0 0 20px}
.plano .risco{color:var(--tinta-3);font-size:14px;text-decoration:line-through;margin:0 0 2px}
.plano .valor{display:flex;align-items:baseline;gap:5px;margin-bottom:4px}
.plano .valor .moeda{font-size:17px;color:var(--tinta-2);font-weight:600}
.plano .valor .num{font-size:40px;font-weight:800;letter-spacing:-.035em}
.plano .valor .periodo{font-size:14px;color:var(--tinta-3)}
.plano .total{color:var(--tinta-2);font-size:13.5px;margin:0 0 6px}
.plano .economia{display:inline-block;background:rgba(34,211,238,.12);color:var(--ciano);
  border:1px solid rgba(34,211,238,.3);padding:4px 11px;border-radius:999px;
  font-size:12.5px;font-weight:600;margin-bottom:20px}
.plano ul{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:10px}
.plano li{position:relative;padding-left:26px;font-size:14.5px;color:var(--tinta-2)}
.plano li::before{content:"";position:absolute;left:0;top:7px;width:15px;height:8px;
  border-left:2px solid var(--ciano);border-bottom:2px solid var(--ciano);
  transform:rotate(-45deg)}
.plano .btn{margin-top:auto}
.nota-planos{text-align:center;color:var(--tinta-3);font-size:13.5px;margin:26px auto 0;max-width:640px}

/* -------------------------------------------------------------------- faq - */
.faq{max-width:800px;margin:0 auto;display:grid;gap:12px}
.faq details{padding:0 22px;overflow:hidden}
.faq summary{cursor:pointer;padding:19px 0;font-weight:600;font-size:16px;
  list-style:none;display:flex;align-items:center;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";margin-left:auto;color:var(--tinta-3);font-size:21px;
  font-weight:400;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:0 0 20px;color:var(--tinta-2);font-size:15px;padding-right:30px}

/* ------------------------------------------------------------------ final - */
.final{max-width:var(--largura);margin:0 auto 76px;padding:0 22px}
.final .caixa{padding:52px 34px;text-align:center}
.final h2{font-size:clamp(25px,3.6vw,34px)}
.final p{color:var(--tinta-2);font-size:17px;margin:14px auto 28px;max-width:52ch}

.rodape{border-top:1px solid var(--vidro-borda);background:var(--vidro-leve);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.rodape .interno{max-width:var(--largura);margin:0 auto;padding:34px 22px;
  display:flex;gap:20px;flex-wrap:wrap;align-items:center;
  color:var(--tinta-3);font-size:13.5px}
.rodape .interno nav{margin-left:auto;display:flex;gap:18px;flex-wrap:wrap}
.rodape a:hover{color:var(--tinta)}

/* ------------------------------------------------------------- responsivo - */
@media (max-width:900px){
  .hero{grid-template-columns:1fr;padding:52px 22px 64px;gap:26px}
  .hero-texto{padding:30px 24px}
  .secao{padding:56px 22px}
  .menu{position:fixed;inset:64px 12px auto 12px;flex-direction:column;align-items:stretch;
    gap:2px;padding:12px;border-radius:var(--raio);
    background:var(--vidro);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
    border:1px solid var(--vidro-borda);box-shadow:var(--vidro-sombra);
    display:none}
  .menu.aberto{display:flex}
  .menu a{padding:12px 14px;border-radius:var(--raio-min)}
  .menu .btn{margin-top:6px}
  .menu .tema{width:100%;border-radius:var(--raio-min);height:42px}
  .abrir-menu{display:grid;place-items:center;margin-left:auto}
}
@media (max-width:520px){
  .hero-texto{padding:26px 20px}
  .hero .provas{gap:16px}
  .final .caixa{padding:38px 22px}
  .plano{padding:26px 22px}
  .btn{width:100%}
  .hero .acoes .btn{width:100%}
}

/* Foco visível — teclado e leitor de tela. Nunca remova sem pôr outro no lugar. */
:focus-visible{outline:2px solid var(--ciano);outline-offset:3px;border-radius:4px}