/* ============================================================
   DESIGN SYSTEM — variáveis globais (extraído da referência CyberCrest)
   Aqui ficam as cores, fontes e valores reaproveitados em todo o site.
   Se quiser trocar a cor principal da marca, basta mexer aqui.
============================================================ */
:root{
  /* ===== Design System Precifik (PDF oficial) ===== */
  --bg:#353236;               /* Brand / Background — cor de fundo da página */
  --surface:#2C2A2E;          /* painel um tom abaixo do fundo (cards, seções alternadas) */
  --surface-2:#262428;        /* painel ainda mais escuro (seções de destaque) */
  --line:rgba(217,217,217,.14);           /* cor das bordas/divisores, derivada de Text Muted */
  --ink:#F5F2F0;              /* cor do texto principal (quase branco) */
  --ink-2:rgba(217,217,217,.62);          /* Text Muted — texto secundário, legível p/ corpo */
  --muted-35:rgba(217,217,217,.35);       /* Text Muted · 35% — texto bem apagado (legendas) */
  --azul:#F56B33;             /* Brand / Primary — laranja principal da marca (nome "azul" é herança do template original) */
  --roxo:#FFA24D;             /* tom claro do primary, usado em gradientes */
  --ciano:#FFD9C0;            /* pêssego claro — usado em destaques suaves */
  --brand-surface:rgba(245,107,51,.12);   /* Brand / Surface — fundo sutil com a cor da marca */
  --grad:linear-gradient(90deg,var(--azul),var(--roxo));  /* gradiente usado em textos e botões */
  --radius:10px;              /* raio de borda padrão dos botões/inputs */
  --font-display:'Syne',sans-serif;  /* fonte dos títulos (Design System oficial: Syne · 800) */
  --font-body:'Inter',sans-serif;             /* fonte do corpo do texto */
}

/* Reset básico: zera margens/paddings e faz o box-sizing incluir bordas no tamanho do elemento */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth} /* rolagem suave ao clicar em links internos (âncoras) */
body{background:var(--bg);color:var(--ink);font-family:var(--font-body);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
.container{max-width:1120px;margin:0 auto;padding:0 24px} /* centraliza o conteúdo e limita a largura máxima */
h1,h2,h3{font-family:var(--font-display);line-height:1.1;letter-spacing:-.02em}
h2{font-size:clamp(1.7rem,3.8vw,2.6rem);font-weight:700;max-width:46rem} /* clamp = tamanho fluido entre um mínimo e um máximo */
.eyebrow{display:block;font-size:.72rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-2);margin-bottom:18px} /* "olho" — pequeno rótulo acima dos títulos de seção */
.muted{color:var(--ink-2)} /* texto acinzentado/secundário */
section{padding:96px 0;position:relative}
section[id]{scroll-margin-top:78px} /* evita que o menu fixo cubra o título ao clicar em um link do menu */
:focus-visible{outline:2px solid var(--azul);outline-offset:3px} /* contorno de foco para acessibilidade (navegação por teclado) */
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent} /* texto com gradiente de cor */

/* Grade de pixels — textura de fundo decorativa (motivo visual da referência) */
.pixel-grid{position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(217,217,217,.045) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(217,217,217,.045) 1px,transparent 1px);
  background-size:28px 28px;
  -webkit-mask-image:radial-gradient(60% 60% at 50% 0%,#000 0%,transparent 100%);
          mask-image:radial-gradient(60% 60% at 50% 0%,#000 0%,transparent 100%)}
/* Glow — mancha de gradiente desfocada, dá profundidade ao fundo (motivo visual da referência) */
.glow{position:absolute;width:640px;height:320px;border-radius:50%;filter:blur(110px);opacity:.35;pointer-events:none;
  background:radial-gradient(closest-side,var(--azul),var(--roxo) 60%,transparent)}

/* ============================================================
   NAV — barra de navegação fixa no topo
============================================================ */
.nav{position:sticky;top:0;z-index:50;background:rgba(38,36,39,.85);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:68px}
.logo{font-family:var(--font-display);font-weight:800;font-size:1.3rem;color:var(--ink);text-decoration:none}
.logo b{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent} /* deixa o "k" de Precifik colorido com o gradiente */

/* Menu de seções (topo) — links que levam às âncoras da página */
.menu{display:flex;gap:28px;font-family:var(--font-display);font-size:.72rem;font-weight:600;
     letter-spacing:.16em;text-transform:uppercase}
.menu a{color:var(--ink-2);text-decoration:none;position:relative;padding:8px 0;
     transition:color .3s ease}
.menu a::after{content:"";position:absolute;left:0;bottom:2px;width:100%;height:1px;
     background:var(--grad);transform:scaleX(0);transform-origin:left;
     transition:transform .35s cubic-bezier(.22,.61,.36,1)} /* linha animada que "cresce" embaixo do link no hover */
.menu a:hover{color:var(--ink)}
.menu a:hover::after{transform:scaleX(1)}

/* Menu mobile (hambúrguer) — visível só em telas pequenas (ver media query no fim do arquivo) */
.menu-toggle{display:none;background:none;border:1px solid var(--line);border-radius:8px;
     width:42px;height:38px;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.menu-toggle span{display:block;width:18px;height:1.6px;background:var(--ink);transition:transform .3s ease,opacity .3s ease}
/* Quando o menu está aberto (aria-expanded="true"), as 3 barrinhas viram um "X" */
.menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6.6px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.6px) rotate(-45deg)}

/* ============================================================
   BOTÕES — retangulares, caixa alta (padrão visual da referência)
============================================================ */
.btn{display:inline-block;background:var(--grad);color:#fff;font-weight:600;font-family:var(--font-display);
     border:none;border-radius:var(--radius);padding:15px 28px;font-size:.82rem;letter-spacing:.14em;
     text-transform:uppercase;cursor:pointer;text-decoration:none;transition:filter .15s ease,transform .15s ease}
.btn:hover{filter:brightness(1.15);transform:translateY(-1px)} /* clareia e "sobe" um pouco no hover */
.btn-line{background:transparent;border:1px solid var(--line);color:var(--ink)} /* variante contornada (sem preenchimento) */
.btn-line:hover{border-color:var(--azul);filter:none}

/* ============================================================
   HERO — primeira dobra da página (título, texto e card de exemplo)
============================================================ */
.hero{padding:104px 0 64px;position:relative}
.hero .glow{top:-140px;left:50%;transform:translateX(-50%)} /* posiciona o glow atrás do título */
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;position:relative} /* 2 colunas: texto | card */
.hero .eyebrow{color:var(--ink-2)}
.hero h1{font-size:clamp(2rem,5vw,3.4rem);font-weight:700}
.hero h1 .muda{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent} /* trecho do título em destaque com gradiente */
.hero p.lead{margin:22px 0 30px;font-size:1.08rem;color:var(--ink-2);max-width:33rem}
.form-note{margin-top:14px;font-size:.82rem;color:var(--ink-2)} /* aviso pequeno abaixo de botões/formulários */

/* CARD DE EXEMPLO — simulação de cálculo de preço mostrada ao lado do hero */
.exemplo{position:relative;background:linear-gradient(160deg,var(--brand-surface),rgba(245,107,51,.05) 55%,var(--surface-2));
     border:1px solid var(--line);border-radius:16px;padding:30px 28px;overflow:hidden}
/* borda com gradiente sutil, feita com um pseudo-elemento mascarado (truque de "border-image" com gradiente) */
.exemplo::before{content:"";position:absolute;inset:-1px;border-radius:16px;padding:1px;
     background:linear-gradient(140deg,rgba(245,107,51,.6),rgba(245,107,51,.25) 40%,transparent 70%);
     -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
     -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.exemplo .tag{font-size:.68rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--azul);margin-bottom:18px;display:block}
.linha{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px dashed var(--line);font-size:.95rem} /* cada linha do "recibo" (meta, contas, %) */
.linha span:first-child{color:var(--ink-2)}
.linha b{font-weight:600;font-family:var(--font-display)}
.linha .c-roxo{color:var(--roxo)}
.linha .c-azul{color:#FFB48C}
.resultado{margin-top:22px;text-align:center} /* bloco com o valor final (faturamento necessário) */
.resultado .label{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2)}
.resultado .big{font-family:var(--font-display);font-weight:700;font-size:clamp(2.2rem,4.5vw,3rem);
     background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;margin:8px 0 2px} /* número gigante animado pelo JS (count-up) */
.conta-aberta{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);font-size:.86rem;color:var(--ink-2)} /* explicação de "para onde vai cada real" */
.conta-aberta b{color:var(--ink)}
.mini-bar{display:flex;height:8px;border-radius:4px;overflow:hidden;gap:2px;margin:12px 0 10px} /* barrinha proporcional (ingredientes/taxas/lucro) */
.mini-bar i{display:block;height:100%}
.selo-calc{margin-top:14px;font-size:.72rem;letter-spacing:.08em;color:var(--muted-35);text-align:center;text-transform:uppercase}

/* Padrão temático do hero — ícones de comida no fundo, bem suaves, dissolvendo para baixo */
.food-pattern{position:absolute;inset:0;pointer-events:none;
  -webkit-mask-image:radial-gradient(70% 75% at 55% 10%,#000 0%,transparent 100%);
          mask-image:radial-gradient(70% 75% at 55% 10%,#000 0%,transparent 100%)}

/* ============================================================
   MARQUEE DE EMBLEMAS — faixa com ícones de nichos (confeitaria, restaurante...) rolando infinitamente
============================================================ */
.marquee-wrap{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg)}
.marquee{overflow:hidden;padding:26px 24px;max-width:1120px;margin:0 auto;
     -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
             mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)} /* some nas bordas (fade lateral) */
.marquee-track{display:flex;align-items:center;gap:72px;width:max-content;animation:mq 32s linear infinite} /* o HTML duplica os itens para o loop ficar contínuo */
.badge-item{display:flex;align-items:center;gap:14px;color:rgba(226,232,246,.5);white-space:nowrap;flex-shrink:0}
.badge-item svg{width:42px;height:42px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.badge-item .b-txt{font-family:var(--font-display);text-transform:uppercase;line-height:1.35}
.badge-item .b-txt b{display:block;font-size:.88rem;font-weight:700;letter-spacing:.1em}
.badge-item .b-txt small{display:block;font-size:.6rem;letter-spacing:.22em;opacity:.75}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}} /* anda 50% da largura porque o conteúdo está duplicado */

/* ============================================================
   SEÇÃO "O PROBLEMA" — cards com as dores do cliente
============================================================ */
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:40px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:26px;position:relative;overflow:hidden}
/* textura de pontilhado no canto superior direito do card, também mascarada em degradê */
.card::after{content:"";position:absolute;top:0;right:0;width:90px;height:90px;opacity:.35;
  background-image:linear-gradient(rgba(245,107,51,.5) 1px,transparent 1px),linear-gradient(90deg,rgba(245,107,51,.5) 1px,transparent 1px);
  background-size:9px 9px;-webkit-mask-image:radial-gradient(closest-side at 100% 0,#000,transparent);mask-image:radial-gradient(closest-side at 100% 0,#000,transparent)}
.card p{font-size:1rem;position:relative;z-index:1}
.card .mark{color:var(--roxo);font-family:var(--font-display);font-weight:700;font-size:1.5rem;line-height:1;display:block;margin-bottom:10px} /* aspas decorativas */

/* ============================================================
   SEÇÃO "COMO FUNCIONA" — 4 passos em grid
============================================================ */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:40px}
.step{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:24px;
     transition:transform .35s cubic-bezier(.22,.61,.36,1),border-color .35s ease,box-shadow .35s ease,background .35s ease}
/* (hover:hover) evita esse efeito em telas de toque, onde não existe "passar o mouse" */
@media (hover:hover){
  .step:hover{transform:translateY(-6px);border-color:rgba(245,107,51,.55);
     background:linear-gradient(160deg,rgba(245,107,51,.07),var(--surface) 55%);
     box-shadow:0 14px 34px rgba(0,0,0,.45),0 0 0 1px rgba(245,107,51,.12),0 10px 40px -12px rgba(245,107,51,.35)}
  .step:hover .ico{filter:brightness(1.35) drop-shadow(0 0 10px rgba(245,107,51,.45));transform:translateY(-2px)}
}
.step .ico{width:40px;height:40px;display:block;transition:filter .35s ease,transform .35s ease}
.step .ico svg{width:100%;height:100%;fill:none;stroke:url(#icoGrad);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} /* o gradiente do traço vem de um <linearGradient> definido no HTML */
.step h3{font-size:1.02rem;margin:12px 0 8px}
.step p{font-size:.9rem;color:var(--ink-2)}

/* ============================================================
   SEÇÃO "DIFERENCIAL" — comparação "outros sistemas" vs "Precifik"
============================================================ */
.versus{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:40px 0 30px}
.v-card{border-radius:12px;padding:28px;border:1px solid var(--line);position:relative;overflow:hidden}
.v-card .quem{font-size:.68rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;margin-bottom:12px;display:block}
.v-card .fala{font-family:var(--font-display);font-size:1.3rem;font-weight:600}
.v-outros{background:var(--surface-2);color:var(--ink-2)} /* card cinza — representa a concorrência */
.v-outros .quem{color:var(--ink-2)}
.v-precifik{background:linear-gradient(160deg,rgba(245,107,51,.16),rgba(245,107,51,.08) 60%,var(--surface))} /* card laranja — representa o Precifik */
.v-precifik .quem{color:var(--azul)}
.v-precifik::after{content:"";position:absolute;bottom:-40px;right:-40px;width:180px;height:180px;border-radius:50%;
     background:radial-gradient(closest-side,rgba(245,107,51,.45),transparent);filter:blur(30px)} /* brilho decorativo no canto do card destacado */
.gps-txt{max-width:42rem;color:var(--ink-2)}
.gps-txt b{color:var(--ink)}
.clareza{font-family:var(--font-display);font-size:clamp(1.15rem,2.4vw,1.5rem);font-weight:600;margin-top:24px;max-width:38rem}
.clareza em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ============================================================
   SEÇÃO "PROVA" — selo de confiança (não usado atualmente na seção de depoimentos, mas mantido para reuso)
============================================================ */
.selo{display:flex;align-items:center;gap:16px;background:var(--surface);border:1px solid var(--line);
     border-radius:12px;padding:24px 28px;margin-top:36px;max-width:40rem}
.selo .emoji{font-size:1.5rem}

/* ============================================================
   CTA FINAL — banner de lista de espera com glow (padrão visual da referência)
============================================================ */
.oferta{position:relative;overflow:hidden;background:var(--surface-2);border-top:1px solid var(--line)}
.oferta .glow{bottom:-160px;left:8%;}
.oferta .glow.g2{left:auto;right:8%;background:radial-gradient(closest-side,var(--roxo),var(--azul) 60%,transparent)} /* segundo glow, do outro lado, com cores invertidas */
.oferta-card{position:relative;background:rgba(44,42,46,.82);backdrop-filter:blur(6px);
     border:1px solid rgba(245,107,51,.35);border-radius:18px;padding:48px 40px;text-align:center;max-width:660px;margin:40px auto 0}
.preco{font-family:var(--font-display);margin:16px 0 4px}
.preco .old{color:var(--ink-2);text-decoration:line-through;font-size:1.2rem;margin-right:12px} /* preço "de"riscado */
.preco .new{font-weight:700;font-size:3.2rem;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent} /* preço "por" em destaque */
.preco .per{color:var(--ink-2);font-size:1rem}
.vagas{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--azul);margin:8px 0 26px}
.form-inline{display:flex;gap:10px;max-width:32rem;margin:0 auto} /* formulário de e-mail lado a lado com o botão */
.form-inline input{flex:1;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);
     padding:15px 18px;color:var(--ink);font-size:.98rem;font-family:var(--font-body)}
.form-inline input::placeholder{color:var(--ink-2)}
.form-success{display:none;margin-top:16px;color:var(--roxo);font-weight:500} /* mensagem de sucesso, exibida pelo JS após o envio */

/* ============================================================
   PROVA — carrossel de depoimentos (estilo da referência)
============================================================ */
.t-marquee{overflow:hidden;max-width:1120px;margin:40px auto 0;padding:0 24px;
     -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
             mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.t-track{display:flex;gap:20px;width:max-content;padding:4px 0;animation:mq 44s linear infinite} /* reutiliza a mesma animação @keyframes mq do marquee de emblemas */
.t-marquee:hover .t-track{animation-play-state:paused} /* pausa o carrossel ao passar o mouse, para dar tempo de ler */
.t-card{width:400px;flex-shrink:0;background:linear-gradient(160deg,var(--surface),var(--surface-2));
     border:1px solid var(--line);border-radius:14px;padding:26px 26px 20px;display:flex;flex-direction:column}
.t-card .q{font-family:var(--font-display);font-weight:700;font-size:2.4rem;line-height:.9;
     background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:10px} /* aspas grandes decorativas */
.t-card .txt{font-size:.94rem;color:var(--ink-2);flex:1}
.t-foot{display:flex;align-items:center;gap:12px;margin-top:20px} /* rodapé do card: avatar + nome + negócio */
.t-foot .avatar{width:38px;height:38px;border-radius:50%;flex-shrink:0;
     background-size:cover;background-position:center;border:1px solid rgba(255,255,255,.18)}
/* Fotos dos depoimentos, embutidas como base64 para o site não depender de arquivos de imagem externos */
.av-1{background-image:url("data:image/jpeg;base64,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")}
.av-2{background-image:url("data:image/jpeg;base64,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")}
.av-3{background-image:url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAkGBwgHBgkIBwgKCgkLDRYPDQwMDRsUFRAWIB0iIiAdHx8kKDQsJCYxJx8fLT0tMTU3Ojo6Iys/RD84QzQ5Ojf/2wBDAQoKCg0MDRoPDxo3JR8lNzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzf/wAARCABgAGADASIAAhEBAxEB/8QAGwAAAQUBAQAAAAAAAAAAAAAABgIDBAUHAQD/xAA5EAACAQMDAAcGBAMJAAAAAAABAgMABBEFEiEGIjFBUWFxExQjMoGhFUKR4TNisQckJVJywdHw8f/EABgBAAMBAQAAAAAAAAAAAAAAAAIDBAEA/8QAHhEAAgICAwEBAAAAAAAAAAAAAAECEQMxEiEEUUFxIjPw/9oADAMBAAIRAxEAPwBQbHxtfI+teylYl3yEAAZzWqReWvPQ7Nc3q2oSXE8kCehEzz8L80hdjhrVdagDmKF8tt3Fh0BUubW9spXym3IcevoftS7ASSpbNwp4cBuT74Jp+bTpZYtwtyEKYY+5Gf8Aqi5RiWoSloTkvheQuWkwQwLcYORWK7WOgAFRAFYUVCsjhkc8+nlT8VKuo54x5ZtgFA4bOHzTGnfiLS5Xc2celgRgMP/AA1PoFw9otRWUSHdGgUnvAplYQPzDNM7NqA47HVeIwVsuMigsgEKo5C8VjcHAXFNiSLOVXP6VjyrICPLz+lU2WkKa7dyxolvEQC3LN8D2FR47eQyt5SesruZiPnof/PrTWvSO975UYwfSM56HuaLC4hdfzcYAz7miXSIkbeGPDUw/rzgOS24sfr9K7i30pXhKOfzdnFC0hwbdQBgkZxVe0JZSD3XPJ2zRxRUYdCkHhqyLZILN8mm7fRbaHcGUMWPx/FPwc9UcCoooNs5u+8JWlzN5xO1gcjAqD4i8MmC38y1QM6ZY496+hMOO6QvEz3V6Aa5Ls+daezXFoHI2sCQQaMId3BqhcW62t1NGBgZyPsaAzr1jmm7M+Sp0bR2aJGSSM0WMW6AEjLD2+aGke5RuavY1TzdrngULRaOd1opHqDSOu5cAAH7VNspTcXEbuCArcgGrHiS2nG64jglkRUG5kQkLiomnyzCFJLXTriYEjJAA3fYE5o76Liq7Z9F0GCRYFll4DflHwKtrcQQDdK2CegK46LxHqrlI4/DFyoGBulmCgfU4Bokeo3Lz3JmtWlnRgojtyWUcZ/OQMUintncpKqR1DeIbKE+st3xtGaZttbgusbAVz2Gri7mTxBIoX8EsMJPvcg8fashe50+eF5R6pWASJm3Atxnkdd1Hegk1tn0GS9jjQmQhVx2aiT+JdN84xb2bHuF4pDxJJqMdtbxyxQYmkC5ickk4JxyPfFQoZNdtj/T02N4MZ/plCw/ip3ZJV8FjVHinuxLC25HjHP1BqcFXzO81lzcLFALmVzCChZ4pcAgjsVtHiWKOVQU3qG2nsZFNWjPyL82LXEkiMQnVa7nMe4nBqpHBHIvOM0I2gdio6FQEftbaQ3VxMbh40SIbMn0jjk4+9SJpQbq2ubSMGCYkMwHGQf/AGr8Kia3kt2z6hzj4rXU7aOKKGGJdqp+XgUhrjI001PGn/dBLZxK2CBg8VVWzjdBtyDjHpIA/UYwah2+YznqqlpqAA2lsGhi0g6sKdLxyUjJ9iVFLyxIrAuwkKHIVV4U0zdXzz7YYmOT2fgVAu5dbtw0WmpaMmSczZ9Q/To0f0Eo9dnSXMC3VgFb2wQccg/NIx6cZTvPksx/uCd/yKk6frmpvAYJbQidQR2Qufvinre9uIWje52BnGHVDwDUbRFCxbXdPU+WZgGUDGCoxj4+1S8YPAwOsCr+tTiaFMf5VFcU2DtGb5CqZuiIycHBrI4nJJVsUBchsCseZ4zxRCCsDscOh9QOalf67Pqt60fkGFLWVo5gxyS2OCPpVAuPY0lPbxxyy3ES4eYAv9SvR/ahyJVY/wAfJLlw+GNiXcq880a1hEkx/wAqjmcpIhHRqtb3KiSKQHk8GuR7NKOheW8TT5AJnIldu8ElvsKoWt69wu5NNvHUf3bMZ5xRrq1hu1ZZEznJBBKkfYjkGpFtos0buLXXNXhJz/yd3Zyex806JTUnoszrcIrf7Tdll4OFHFS47mHVoXjt0kG08l1KlTmizaXfSRMLjxFrD5IIP4hU2n5wo5+x4p6JEtLdUjBwo4ycn96k1SKXJbEryIgIm7OKWEI6aizTb5Ca0KljxTccaiZmeXKbZjQxqOO68EMJXLfrWNEynJoTQuwOKYKMycUpBqcN3qEllEu7yo9zSZ4znGBQtTvViheKM5kI5x7VL8JQsdSv5m62Kg/fNVkjUG2M8f8AaipdRlQQPuKNZSebHszgj+KanjBXPealHdbz5HVcTNaqZ1umzLOoQth+j96Zl03zBuD4P0OK48Xzwv5sR9XuD71StvFiomLnKsPkUUX7BbLcelMjg7tw98tS2sSiJgqn2xS0fiq3lBWEMzHoKpzXOahrcq6nKk8Q2DHA7UkZpkYc3SE5svCNlIyHPdG84x4xSEU6TJujbIowcDG7mujRmbGWui3FDa7KggCtGmjA4XmhmZQD6M1LLP/Z")}
.av-4{background-image:url("data:image/jpeg;base64,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")}
.av-5{background-image:url("data:image/jpeg;base64,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")}
.t-foot .who b{color:var(--ink);font-size:.86rem;font-weight:600}
.t-foot .who span{color:var(--ink-2);font-size:.78rem;letter-spacing:.04em}
.t-bar{height:2px;background:var(--line);border-radius:2px;margin-top:16px;overflow:hidden} /* barrinha de progresso decorativa embaixo do card */
.t-bar i{display:block;height:100%;width:34%;background:var(--grad)}
@media (max-width:880px){.t-card{width:82vw}}

/* ============================================================
   SEÇÃO "PLANOS" — tabela de preços (estilo da referência de pricing)
============================================================ */
.planos-head{text-align:center;max-width:44rem;margin:0 auto}
.pill-tag{display:inline-flex;align-items:center;gap:8px;background:var(--grad);color:#fff;
     font-family:var(--font-display);font-size:.68rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
     border-radius:999px;padding:8px 18px;margin-bottom:22px} /* selo "Planos e preços" em formato de pílula */
.planos-head h2{max-width:none}
.planos-head .sub{color:var(--ink-2);margin-top:14px}
.plan-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px;align-items:stretch}
.plan{position:relative;display:flex;flex-direction:column;background:linear-gradient(170deg,var(--surface),var(--surface-2));
     border:1px solid var(--line);border-radius:16px;padding:30px 26px;
     transition:transform .35s cubic-bezier(.22,.61,.36,1),border-color .35s ease,box-shadow .35s ease}
.plan h3{font-size:1.15rem}
.plan .desc{font-size:.85rem;color:var(--ink-2);margin:6px 0 18px}
.preco-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap} /* linha com preço riscado + selo de desconto */
.preco-row .old{color:var(--ink-2);text-decoration:line-through;font-size:.95rem}
.off{background:rgba(245,107,51,.18);border:1px solid rgba(245,107,51,.45);color:#FFCFAF;
     font-family:var(--font-display);font-size:.62rem;font-weight:600;letter-spacing:.1em;border-radius:999px;padding:3px 10px} /* selo tipo "Lista de espera" / "2 meses grátis" */
.plan .valor{font-family:var(--font-display);font-weight:700;font-size:2.4rem;line-height:1.1;margin-top:4px}
.plan .por{font-size:.8rem;color:var(--ink-2);margin-bottom:18px}
.plan ul{list-style:none;margin:0 0 20px;flex:1} /* flex:1 empurra o botão para o final do card, alinhando os 3 planos */
.plan li{padding:7px 0 7px 26px;position:relative;font-size:.9rem;color:var(--ink-2)}
.plan li::before{content:"✓";position:absolute;left:0;font-weight:700;
     background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent} /* check colorido no lugar de bullet padrão */
.plan .nota-box{border:1px solid var(--line);border-radius:10px;padding:10px 14px;font-size:.76rem;color:var(--ink-2);margin-bottom:20px}
.plan .nota-box b{color:var(--azul)}
.plan .btn{width:100%;text-align:center}
.plan .sob{text-align:center;font-size:.72rem;color:var(--ink-2);margin-top:12px}
.plan.destaque{border-color:rgba(245,107,51,.65);
     box-shadow:0 0 0 1px rgba(245,107,51,.25),0 18px 50px -18px rgba(245,107,51,.45)} /* plano "Mais escolhido", com destaque visual */
.badge-top{position:absolute;top:-13px;left:50%;transform:translateX(-50%);white-space:nowrap;
     background:var(--grad);color:#fff;font-family:var(--font-display);font-size:.62rem;font-weight:600;
     letter-spacing:.14em;text-transform:uppercase;border-radius:999px;padding:6px 16px} /* selinho flutuante no topo do card destacado */
@media (hover:hover){
  .plan:hover{transform:translateY(-6px);border-color:rgba(245,107,51,.55);
     box-shadow:0 16px 40px rgba(0,0,0,.5),0 12px 44px -14px rgba(245,107,51,.4)}
  .plan.destaque:hover{border-color:rgba(245,107,51,.9);
     box-shadow:0 0 0 1px rgba(245,107,51,.4),0 20px 60px -16px rgba(245,107,51,.6)}
}
@media (max-width:880px){.plan-grid{grid-template-columns:1fr}.plan.destaque{order:-1}} /* no mobile, o plano destacado sobe para o topo */

/* ============================================================
   FOOTER
============================================================ */
footer{border-top:1px solid var(--line);padding:34px 0;font-size:.82rem;color:var(--ink-2)}
.foot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* ============================================================
   ANIMAÇÃO "REVEAL" — elementos aparecem suavemente ao entrar na tela
   (ativada via IntersectionObserver no script.js, que adiciona a classe .on)
============================================================ */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .7s ease,transform .7s ease}
.reveal.on{opacity:1;transform:none}

/* Respeita usuários que pediram para reduzir animações no sistema operacional */
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  .reveal{opacity:1;transform:none}
}

/* ============================================================
   RESPONSIVIDADE — telas menores que 880px (tablets e celulares)
============================================================ */
@media (max-width:880px){
  .menu-toggle{display:flex} /* mostra o botão hambúrguer */
  .menu{display:none;position:absolute;top:68px;left:0;right:0;flex-direction:column;gap:4px;
     background:rgba(38,36,39,.98);border-bottom:1px solid var(--line);padding:14px 24px 20px} /* menu vira um painel suspenso */
  .menu.open{display:flex}
  .menu a{padding:12px 0;font-size:.8rem}
  section{padding:64px 0}
  .hero{padding:56px 0 48px}
  .hero-grid,.versus{grid-template-columns:1fr;gap:30px} /* colunas viram empilhadas */
  .cards,.steps{grid-template-columns:1fr}
  .form-inline{flex-direction:column}
  .form-inline .btn{width:100%}
  .index-inner{gap:6px 18px}
}

/* ===== RESPONSIVIDADE COMPLETA ===== */
/* Tablet / notebooks estreitos */
@media (max-width:1080px){
  .container{padding:0 22px}
  .hero-grid{gap:40px}
  .steps{grid-template-columns:repeat(2,1fr)}
  .plan-grid{gap:14px}
  .plan{padding:26px 20px}
  .marquee-track{gap:56px}
}
/* Mobile (complementa o breakpoint 880 já existente) */
@media (max-width:880px){
  h2{font-size:clamp(1.45rem,5.6vw,1.9rem)}
  .hero h1{font-size:clamp(1.7rem,7.2vw,2.3rem)}
  .hero p.lead{font-size:1rem}
  .plan-grid{grid-template-columns:1fr;gap:18px;margin-top:36px}
  .marquee-track{gap:44px;animation-duration:26s}
  .badge-item svg{width:34px;height:34px}
  .badge-item .b-txt b{font-size:.8rem}
  .oferta-card{padding:36px 22px}
  .preco .new{font-size:2.6rem}
  .versus{margin:30px 0 24px}
  .v-card{padding:22px}
  .v-card .fala{font-size:1.12rem}
  .t-track{animation-duration:38s}
}
/* Celulares pequenos */
@media (max-width:480px){
  .container{padding:0 18px}
  section{padding:52px 0}
  .hero{padding:44px 0 40px}
  .hero .btn{display:block;text-align:center}
  .exemplo{padding:22px 18px}
  .linha{font-size:.88rem}
  .resultado .big{font-size:2rem}
  .conta-aberta{font-size:.8rem}
  .card{padding:20px}
  .step{padding:20px}
  .t-card{width:88vw;padding:22px 20px 18px}
  .t-card .txt{font-size:.9rem}
  .marquee{padding:20px 18px}
  .marquee-track{gap:36px}
  .planos-head .sub{font-size:.92rem}
  .plan .valor{font-size:2.1rem}
  .oferta-card{padding:30px 18px}
  .preco .old{font-size:1rem}
  .preco .new{font-size:2.3rem}
  .btn{padding:13px 20px;font-size:.78rem;letter-spacing:.1em}
  .form-inline input{padding:13px 16px}
  .foot{flex-direction:column;gap:8px;text-align:center;justify-content:center}
  .gps-txt{font-size:.95rem}
}
/* Telas muito largas: nada estoura — o .container já limita a largura em 1120px */