/* =====================
   Tráfego Academy — style.css
   ===================== */
:root{
  --bg:#0b0b0f;
  --bg-2:#12121a;
  --text:#f3f3f6;
  --muted:#b9b9c6;
  --brand:#8a2be2;           /* roxo principal */
  --brand-2:#b084f5;         /* roxo claro */
  --accent:#25D366;          /* WhatsApp */
  --card:#161623;
  --shadow:0 10px 30px rgba(0,0,0,.35);
  /* ...suas variáveis... */
  --header-h: 64px;   /* altura do topo/sticky header */
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--text);}

.container{width:min(1120px,92%);margin:0 auto}

.header{
  position:sticky; top:0; z-index:100;
  background:rgba(11,11,15,.7);
  backdrop-filter:blur(12px);
  border-bottom:1px solid #222;
  height: var(--header-h);
}
.header .container{
  display:flex; align-items:center; justify-content:space-between;
  height: 100%; padding: 0;
}

.logo{height:36px}
.logo.small{height:28px}
.nav a{color:var(--text);text-decoration:none;margin-left:1rem;opacity:.85;transition:.2s}
.nav a:hover{opacity:1;color:var(--brand-2)}

.hero{position:relative;isolation:isolate;background:
 radial-gradient(60% 60% at 80% 10%, rgba(138,43,226,.35), transparent 60%),
 radial-gradient(50% 50% at 10% 90%, rgba(176,132,245,.25), transparent 60%);
 border-bottom:1px solid #191919;
}
.hero-grid{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap:3rem;
  align-items:center;
  min-height: calc(100svh - var(--header-h));  /* ocupa a altura da tela */
  padding: 0;                                   /* sem “respiro” em cima/baixo */
}

.hero-copy h1{font-size:clamp(28px,3.8vw,52px);line-height:1.05;margin:0 0 1rem;font-weight:800}
.hero-copy h1 span{color:var(--brand-2)}
.hero-copy p{color:var(--muted);max-width:60ch}
.cta{display:flex;gap:1rem;margin:1.5rem 0 1rem}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:.95rem 1.2rem;border-radius:.8rem;text-decoration:none;font-weight:700;border:1px solid #2b2b39;transition:.25s;cursor:pointer}
.btn-primary{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;border-color:transparent;box-shadow:var(--shadow)}
.btn-primary:hover{transform:translateY(-1px);filter:saturate(1.1)}
.btn-ghost{color:var(--text);background:#151522}
.btn-ghost:hover{border-color:var(--brand-2);color:var(--brand-2)}

.badges{display:flex;gap:1rem;flex-wrap:wrap;color:#c9c9d6;margin-top:.5rem}
.badges li{list-style:none;background:#131323;border:1px solid #23233a;padding:.5rem .7rem;border-radius:.5rem;font-size:.9rem}

.hero-art{display:grid;place-items:center}
.chart{position:relative;width:min(420px,80%);height:280px;background:linear-gradient(180deg,#121223,#0c0c14);border:1px solid #212132;border-radius:16px;padding:1.2rem;box-shadow:var(--shadow)}
.bar{position:absolute;bottom:1.2rem;width:48px;background:linear-gradient(180deg,var(--brand-2),var(--brand));border-radius:10px;box-shadow:0 12px 20px rgba(138,43,226,.3)}
.b1{left:1.5rem;height:22%}
.b2{left:5.9rem;height:40%}
.b3{left:10.3rem;height:58%}
.b4{left:14.7rem;height:82%}
.arrow{position:absolute;left:0;top:0;width:100%;height:100%;color:#fff;opacity:.8}

.section{padding:5rem 0;border-bottom:1px solid #161624}
.section.muted{background:#0f0f16}
.section h2{font-size:clamp(26px,3vw,36px);margin:0 0 .5rem}
.section .subtitle{color:var(--muted);margin:0 0 2rem}

.grid{display:grid;gap:1.25rem}
.cards{grid-template-columns:repeat(4,1fr)}
.card{background:var(--card);border:1px solid #23233a;border-radius:14px;padding:1.2rem;min-height:120px;box-shadow:var(--shadow)}
.card h3{margin:.2rem 0 .4rem}
.card p{color:var(--muted)}

.cases{grid-template-columns:repeat(3,1fr)}
.case{background:linear-gradient(180deg,#151528,#0d0d17);border:1px solid #24243a;border-radius:14px;padding:1.4rem;text-align:center}
.case strong{font-size:2rem;color:#fff;display:block}
.case span{color:var(--muted)}

.about{display:grid;grid-template-columns:1.1fr .9fr;gap:2rem;align-items:center}
.about-img{min-height:280px;border-radius:16px;background:
 linear-gradient(135deg,rgba(138,43,226,.5),rgba(176,132,245,.2)),
 url('../img/cover.jpg') center/cover no-repeat;
 border:1px solid #26263e;box-shadow:var(--shadow)}
.checklist{padding-left:1.2rem}
.checklist li{margin:.6rem 0}
.checklist li::marker{color:var(--brand-2)}

.lead form{margin-top:1rem}
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin-bottom:1rem}
label{display:grid;gap:.4rem;font-weight:600}
input,select{width:100%;background:#0f0f1a;border:1px solid #27273b;border-radius:.6rem;padding:.9rem;color:#fff;outline:none}
input:focus,select:focus{border-color:var(--brand-2)}
.form-msg{margin-top:.75rem;min-height:1.25rem}

.footer{padding:3rem 0;background:#0b0b11}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:2rem;margin-bottom:1.2rem}
.footer a{color:#dcdcf2;text-decoration:none}
.copy{color:#9a9ab0;text-align:center;border-top:1px solid #161624;padding-top:1rem}

.whatsapp-fab {
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: transparent; /* <-- deixa transparente */
  box-shadow: 0 12px 28px rgba(0,0,0,.35), 0 0 0 0 rgba(37,211,102,.6);
  animation: pulse 2.2s infinite;
  z-index: 200;
}

.whatsapp-fab svg{width:34px;height:34px}
@keyframes pulse{
  0%{box-shadow:0 12px 28px rgba(0,0,0,.35), 0 0 0 0 rgba(37,211,102,.45)}
  70%{box-shadow:0 12px 28px rgba(0,0,0,.35), 0 0 0 16px rgba(37,211,102,0)}
  100%{box-shadow:0 12px 28px rgba(0,0,0,.35), 0 0 0 0 rgba(37,211,102,0)}
}

/* Responsivo */
@media (max-width: 980px){
  .hero-grid{
  grid-template-columns:1fr;
  gap:2rem;
  min-height: calc(100svh - var(--header-h));
  padding: 0;
}

  .cards{grid-template-columns:1fr 1fr}
  .cases{grid-template-columns:1fr;gap:1rem}
  .about{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width: 640px){
  .nav{display:none}
  .cards{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
}
.wpp-icon {
  width: 100%;   /* ocupa 100% do botão, mantendo margens */
  height: auto; /* mantém proporção */
  object-fit: contain;
}
/* ==================== CLIENTES ==================== */
.clients{
  padding: 0; /* a altura será 100% da tela */
  background:
    radial-gradient(60% 60% at 20% 10%, rgba(138,43,226,.25), transparent 60%),
    radial-gradient(60% 60% at 90% 80%, rgba(176,132,245,.18), transparent 60%),
    #0f0f16;
}
.clients .clients-wrap{
  min-height: calc(100svh - var(--header-h)); /* ocupa a dobra toda */
  display: grid;
  grid-template-rows: auto 1fr auto;
  align-items: center;
  gap: 1.5rem;
  padding: clamp(16px, 3vw, 28px) 0;
}
.clients-head{
  text-align: center;
  margin-top: clamp(8px, 2.5vh, 24px);
}
.clients-head h2{
  margin: 0;
  font-size: clamp(24px, 3.4vw, 40px);
  line-height: 1.15;
  font-weight: 800;
}
.clients-head h2 span{ color: var(--brand-2); }

.clients-grid{
  width: min(1120px, 92%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(14px, 2vw, 22px);
  align-items: center;
}
.client{
  width: 100%;
  aspect-ratio: 1 / 1;            /* 👈 quadrado perfeito */
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg,#151528,#0d0d17);
  border: 1px solid #24243a;
  border-radius: 14px;
  padding: 20px;                  /* padding fixo */
  box-shadow: var(--shadow);
  transform-style: preserve-3d;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  will-change: transform;
}
.client img{
  max-width: 80%;                 /* 👈 mantém proporcional */
  max-height: 80%;
  object-fit: contain;
  filter: brightness(1) contrast(1.05);
  opacity: .95;
  transform: translateZ(14px);
}

.client img{
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: brightness(1) contrast(1.05);
  opacity: .95;
  transform: translateZ(14px); /* destaque no 3D */
}
.client:hover{
  transform: translateY(-6px) rotateX(6deg) rotateY(-6deg);
  border-color: rgba(176,132,245,.45);
  box-shadow: 0 18px 40px rgba(138,43,226,.25);
}

.clients-cta{
  text-align: center;
  margin-bottom: clamp(8px, 3vh, 24px);
}
.clients-cta .small{ font-size: .9rem; opacity: .8; }

/* Responsivo */
@media (max-width: 980px){
  .clients .clients-wrap{
    min-height: calc(100svh - var(--header-h));
  }
  .clients-grid{
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 640px){
  .clients-grid{
    grid-template-columns: repeat(2, 1fr);
  }
}
/* Todas as seções respeitam a altura do header fixo */
.section {
  scroll-margin-top: var(--header-h);
}
html {
  scroll-behavior: smooth;
}
/* ======= TESTIMONIALS / DEPOIMENTOS ======= */
:root{
  /* controla largura dos cards e espaçamento do trilho */
  --t-card-w: clamp(320px, 31vw, 420px);
  --t-gap: clamp(16px, 2.2vw, 28px);
}

.testimonials{
  background:
    radial-gradient(60% 60% at 20% 0%, rgba(138,43,226,.18), transparent 60%),
    radial-gradient(60% 60% at 90% 80%, rgba(176,132,245,.12), transparent 60%),
    #0f0f16;
  padding: 0;
}
.testimonials .container{
  min-height: calc(100svh - var(--header-h));  /* ocupa a tela toda */
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 1.5rem;
  align-items: center;
}
.t-head{ text-align:center; margin-top: clamp(8px,2vh,24px); }
.t-head h2{ margin:0; font-weight:800; font-size:clamp(24px,3.2vw,40px); line-height:1.15; }
.t-head h2 span{ color: var(--brand-2); }
.t-underline{
  width:min(280px,40%); height:10px; margin:.6rem auto 0;
  background: radial-gradient(60% 60% at 50% 50%, var(--brand-2), transparent 70%);
  opacity:.8;
  mask-image: radial-gradient(circle at 50% 50%, #000 60%, transparent 61%);
}

.t-slider{ overflow:hidden; padding-inline: clamp(10px, 3vw, 40px); }
.t-track{ display:flex; gap: var(--t-gap); will-change: transform; }

.t-card{
  position: relative;
  display: flex; flex-direction: column; gap: 14px;
  flex: 0 0 var(--t-card-w);  /* 3 + 1 pedaço no desktop */
  background: #111319;
  border: 1px solid #262a36;
  border-radius: 22px;
  padding: 24px 22px 20px;
  color: #e9ecf1;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.t-card p{ margin: 36px 0 8px; font-size:1.02rem; line-height:1.6; }
.t-card p strong{ font-weight:800; }

/* aspas verdes grandes (como no print). Troque %231ACDB8 por sua cor se quiser */
.t-quote.deco{
  position:absolute; top:14px; left:18px; width:44px; height:44px; pointer-events:none;
  background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="64" height="48" viewBox="0 0 64 48" fill="none"><path d="M28.1044 0L64 1.6C62.1 14.1 61.6 27.1 62.2 40L36 38.4C38 24.5 40.9 11.8 42.5 0Z" fill="%23a855f7"/><path d="M8 0L29.5 1.6C27.6 14.1 27.1 27.1 27.7 40L1.5 38.4C3.5 24.5 6.4 11.8 8 0Z" fill="%23a855f7"/></svg>') no-repeat center/contain;
}

.t-author{ margin-top:auto; display:flex; align-items:center; gap:12px; }
.t-author img{
  width:56px; height:56px; border-radius:50%; object-fit:cover;
  border:2px solid rgba(255,255,255,.12); box-shadow:0 8px 18px rgba(0,0,0,.35);
}
.t-meta strong{ display:block; font-weight:800; color:#fff; }
.t-meta span{ display:block; font-size:.95rem; color:rgba(233,236,241,.85); }

/* pausar animação quando mouse em cima (opcional) */
.t-slider:hover .t-track{ animation-play-state: paused; }

/* ancora sem corte pelo header */
#depoimentos{ scroll-margin-top: var(--header-h); }

/* breakpoints */
@media (max-width: 980px){
  :root{ --t-card-w: clamp(280px, 46vw, 360px); } /* ~2 e um pedaço */
  .testimonials .container{ min-height: calc(100svh - var(--header-h)); }
}
@media (max-width: 640px){
  :root{ --t-card-w: 82vw; } /* 1 e um pedaço */
}
/* ===== FAQ ===== */
:root{
  --brand-1: #a855f7;       /* roxo principal */
  --brand-2: #8b5cf6;       /* roxo claro (degrade/acento) */
  --bg-1: #0f0f16;          /* fundo site */
  --card: #111319;          /* card escuro */
  --stroke: #262a36;        /* borda sutil */
  --text: #e9ecf1;
  --muted: #b9c0cf;
}

.faq{
  background:
    radial-gradient(70% 60% at 15% 0%, rgba(168,85,247,.18), transparent 60%),
    radial-gradient(60% 60% at 85% 90%, rgba(139,92,246,.12), transparent 60%),
    var(--bg-1);
  padding: 0;
}
.faq .container{
  min-height: calc(100svh - var(--header-h));
  display: grid; grid-template-rows: auto 1fr; gap: 1.2rem; align-items: start;
}
.faq-head{ text-align:center; padding-top: clamp(10px,2vh,24px); }
.faq-head h2{ margin:0; font-weight:800; color:#fff; font-size:clamp(24px,3.2vw,40px); }
.faq-head h2 span{ color: var(--brand-1); }
.faq-underline{
  width:min(280px,40%); height:10px; margin:.6rem auto 0;
  background: radial-gradient(60% 60% at 50% 50%, var(--brand-1), transparent 70%);
  opacity:.8; mask-image: radial-gradient(circle at 50% 50%, #000 60%, transparent 61%);
}

.faq-list{ max-width: 1000px; margin: clamp(10px,2vh,20px) auto 40px; display: grid; gap: 14px; }
.faq-item{
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: 16px;
  overflow: clip;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}

/* Título da pergunta */
.faq-q{
  width: 100%; text-align: left;
  background: transparent; color: #fff;
  padding: 18px 56px 18px 18px; border: 0; cursor: pointer;
  font-size: clamp(16px, 1.6vw, 18px); font-weight: 700; line-height: 1.3;
  position: relative;
}
.faq-q:hover, .faq-q:focus-visible{ outline: none; background: rgba(168,85,247,.08); }

/* ícone + / - com roxo do site */
.faq-icon{ position:absolute; right:16px; top:50%; translate:0 -50%; width:24px; height:24px; }
.faq-icon::before, .faq-icon::after{
  content:""; position:absolute; inset:0; margin:auto; width:18px; height:2px;
  background: linear-gradient(90deg, var(--brand-1), var(--brand-2));
  border-radius: 2px; transition: transform .25s ease;
}
.faq-icon::after{
  transform: rotate(90deg); /* vira um + */
}
.faq-q[aria-expanded="true"] .faq-icon::after{
  transform: rotate(0deg); /* vira um - quando aberto */
}

/* Resposta (abre/fecha suavemente) */
.faq-a{ padding: 0 18px 18px; }
.faq-a[hidden]{ display:block; height:0; padding-bottom:0; overflow:hidden; }
.faq-a-inner{ color: var(--text); opacity:.95; }
.faq-a-inner p{ margin:12px 0; }
.faq-a-inner ul{ margin:8px 0 0 18px; color: var(--muted); }
.faq-a-inner li{ margin:6px 0; }

/* ancora sem corte pelo header fixo */
#faq{ scroll-margin-top: var(--header-h); }

/* ===== After Hero Section ===== */
.after-hero {
  background:
    radial-gradient(60% 60% at 20% 20%, rgba(168,85,247,.15), transparent 70%),
    radial-gradient(60% 60% at 80% 80%, rgba(139,92,246,.15), transparent 70%),
    #0f0f16;
  color: #fff;
  text-align: center;
  padding: clamp(60px,12vh,140px) 16px;
}

.after-hero-title {
  font-size: clamp(32px, 4.6vw, 64px);
  font-weight: 800;
  line-height: 1.25;
  margin: 0 0 18px;
  letter-spacing: .2px;
}

.typewriter{
  display: inline-block;
  margin-left: .35ch;
  color: var(--brand-1, #a855f7);
  white-space: nowrap;
  border-right: 2px solid currentColor; /* cursor */
  padding-right: 3px;
  /* garante que não quebre em linhas e não empilhe palavras */
  vertical-align: baseline;
  max-width: 100%;
}

/* pisca do cursor */
@keyframes caretBlink { 0%, 49%{opacity:1} 50%, 100%{opacity:0} }
.typewriter { animation: caretBlink 1s step-end infinite; }

/* “selecionando” antes de apagar */
.typewriter.is-selecting{
  color: #0f0f16;
  background: linear-gradient(0deg, rgba(168,85,247,.45), rgba(168,85,247,.45));
  border-radius: 4px;
}

/* subtítulo e CTA */
.after-hero-sub {
  max-width: 760px;
  margin: 0 auto 30px;
  font-size: clamp(16px,1.4vw,20px);
  color: #cfd4df;
}

.btn-cta {
  display: inline-block;
  background: linear-gradient(90deg, var(--brand-1, #a855f7), var(--brand-2, #8b5cf6));
  color: #fff;
  padding: 14px 36px;
  border-radius: 10px;
  font-weight: 800;
  font-size: 16px;
  text-decoration: none;
  transition: transform .25s ease, box-shadow .25s ease;
}
.btn-cta:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(168,85,247,.35);
}