/* =========================================================
   BF Dev Studio — style.css (compat + premium)
   ========================================================= */
/* ---------- Tokens ---------- */
:root{
  /* Cores base */
  --bg: #0f0a12;
  --surface: #16111c;
  --line: #2a2331;

  /* Texto */
  --text: #f6f4fb;
  --muted: #bfb6cc;

  /* Brand (defina aqui a paleta da sua logo) */
  --violet: #8a2be2;      /* roxo principal */
  --magenta: #ff2fb3;     /* magenta neon */
  --violetDeep: #6d1fe0;  /* hover/escuro */

  /* Layout */
  --container: 1120px;
  --r: 16px;
  --s-1:.5rem; --s-2:1rem; --s-3:1.5rem; --s-4:2rem; --s-6:3rem; --s-8:4rem;

  /* Sombras */
  --shadow-1: 0 10px 24px -12px rgba(138,43,226,.35);
  --shadow-2: 0 28px 60px -26px rgba(255,47,179,.35);
}

/* Logo (fora do :root!) */
.logo-img{
  width: 40px;            /* 40–48px fica elegante no header */
  height: 40px;
  border-radius: 10px;
  display: block;
  object-fit: cover;
}
.brand-name{ font-weight: 800; letter-spacing: .2px; }


/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; height:100%; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
body{
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------- Typography ---------- */
h1,h2,h3{ margin:0 0 var(--s-2); line-height:1.15; }
h1{ font-size:clamp(2.2rem, 4.8vw, 3.6rem); letter-spacing:-.02em; }
h2{ font-size:clamp(1.6rem, 3vw, 2.2rem); }
h3{ font-size:clamp(1.125rem, 2.2vw, 1.25rem); }
p{ margin:0 0 var(--s-2); color:var(--muted); }

.container{ max-width:var(--container); margin:0 auto; padding:0 var(--s-2); }
section{ padding: var(--s-8) var(--s-2); }

/* =========================================================
   Header
   ========================================================= */
header{
  position: sticky; top: 0; z-index: 20;
  background: rgba(22,17,28,.92);
  border-bottom: 1px solid var(--line);
}
.header-inner{
  max-width:var(--container); margin:0 auto; padding:.9rem var(--s-2);
  display:flex; align-items:center; justify-content:space-between; gap:var(--s-2);
}
.logo{ display:flex; align-items:center; gap:.7rem; font-weight:800; }
.logo-badge{
  width:120px; height:auto; border-radius:10px;
  background: linear-gradient(135deg, var(--violet), var(--magenta));
  box-shadow: var(--shadow-1);
}
nav{ display:flex; gap:.4rem; flex-wrap:wrap; }
nav a{
  color: var(--muted);
  padding:.55rem .9rem; border-radius:999px; border:1px solid transparent;
  transition: all .18s ease;
}
nav a:hover{
  color: var(--text);
  background:#1f1926;
  border-color: var(--line);
  transform: translateY(-1px);
}

.logo-img {
  width: 120px;   /* aumenta aqui (antes era 90px, por exemplo) */
  height: auto;   /* deixa auto pra não distorcer */
}


/* =========================================================
   Hero
   ========================================================= */
.hero{
  padding: clamp(3.5rem, 7vw, 6rem) var(--s-2);
  background:
    /* orbes simples, sem color-mix */
    radial-gradient(1000px 480px at 10% -10%, rgba(138,43,226,.18), transparent 60%),
    radial-gradient(800px 420px at 100% 0%, rgba(255,47,179,.14), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.08));
}
.hero .container{
  display:grid; gap:var(--s-6);
  grid-template-columns: 1.05fr .95fr;
}
.gradient{
  background: linear-gradient(90deg, var(--violet), var(--magenta));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.kpis{ display:flex; gap:var(--s-4); flex-wrap:wrap; margin-top:var(--s-3); color:var(--muted); }
.kpis b{ color:var(--text); }

/* Mock UI */
.mock{
  background: linear-gradient(135deg, #211a2a, #1a1422);
  border:1px solid var(--line); border-radius: var(--r); padding: var(--s-3);
  box-shadow: var(--shadow-2);
}
.mock .bar{ height:10px; border-radius:6px; background:#2a2034; margin-bottom:var(--s-2); }
.mock .grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-2); }
.mock .tile{
  height:96px; border-radius:12px; border:1px solid var(--line);
  background: linear-gradient(135deg, rgba(138,43,226,.22), rgba(255,47,179,.18));
  transition: transform .18s ease;
}
.mock .tile:hover{ transform: translateY(-3px); }

/* Buttons */
.actions{ display:flex; gap:.8rem; margin-top:var(--s-3); flex-wrap:wrap; }
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding: .95rem 1.2rem; border-radius:12px; border:1px solid #2e2438; cursor:pointer;
  background: linear-gradient(180deg, var(--violet), var(--violetDeep));
  color:#fff; font-weight:800; letter-spacing:.2px;
  transition: transform .12s ease, filter .2s ease, box-shadow .2s ease;
  box-shadow: var(--shadow-1);
}
.btn:hover{ transform:translateY(-1px); filter:brightness(1.04); }
.btn:active{ transform:translateY(0); }
.btn.ghost{
  background: linear-gradient(180deg, #1a1321, #17101c);
  color: var(--text); border:1px solid var(--line);
}
.btn.ghost:hover{ background:#231a2a; }

/* =========================================================
   Serviços / Portfólio
   ========================================================= */
.section-head{ display:flex; align-items:end; justify-content:space-between; gap:var(--s-2); }
.section-sub{ color:var(--muted); font-size:.95rem; }

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1.5fr);
  gap: var(--s-3);
  margin-top: var(--s-4);

  /* força altura uniforme */
  grid-auto-rows: 1fr;
}


.card{
  background: var(--surface);
  border:1px solid var(--line);
  border-radius: 14px;
  padding: var(--s-2);
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* garante espaçamento dentro */
}
.card:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
  border-color: rgba(138,43,226,.4);
}
.card .tag{
  display:inline-block; font-size:.75rem; color:var(--muted);
  padding:.35rem .6rem; border-radius:999px; border:1px solid var(--line);
  margin-bottom:.7rem;
}
.thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;

  border-radius: 12px;   /* 🔹 bordas arredondadas */
  margin-top: var(--s-2);
  height: 120px;                /* 🔹 menor altura da imagem (antes 150px) */
}

.card--thumb{
  background: linear-gradient(135deg, rgba(138,43,226,.20), rgba(255,47,179,.16));
}

/* =========================================================
   Depoimentos
   ========================================================= */
.testi {
  display: grid;
  gap: var(--s-3);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin-top: var(--s-4);

  /* faz todas as linhas terem altura uniforme */
  align-items: stretch;
}

.quote {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: var(--s-3);

  /* garante mesma altura */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.quote p{ color:var(--muted); font-style:italic; }
.quote p::before{ content:'“'; color:var(--violet); margin-right:.08em; font-size:1.25em; }
.quote p::after{ content:'”'; color:var(--magenta); margin-left:.04em; font-size:1.25em; }
.user{ display:flex; align-items:center; gap:.8rem; margin-top:1rem; }
.avatar{ width:40px; height:40px; border-radius:50%; background:#2a2034; border:1px solid var(--line); }

/* =========================================================
   Formulário / CTA
   ========================================================= */
form{ display:grid; gap:var(--s-2); max-width:640px; }
input, textarea{
  width:100%; padding: 1rem; border-radius:12px;
  background:#1a1321; color:var(--text);
  border:1px solid var(--line); outline:none;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
input::placeholder, textarea::placeholder{ color:#9a8bb0; }
input:focus, textarea:focus{
  border-color: #7f52e6;
  box-shadow: 0 0 0 4px rgba(138,43,226,.16);
}

/* =========================================================
   Footer
   ========================================================= */
footer{
  background: var(--surface);
  border-top:1px solid var(--line);
  color: var(--muted);
  text-align:center;
  padding: var(--s-4);
}

/* =========================================================
   Responsivo
   ========================================================= */
@media (max-width: 980px){
  .hero .container{ grid-template-columns: 1fr; }
}
@media (max-width: 560px){
  nav{ overflow-x:auto; scrollbar-width:thin; }
  .actions{ flex-direction:column; }
  .btn, .btn.ghost{ width:100%; }
}

/* Pricing */
.pricing{
  display:grid; gap: var(--s-3);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin-top: var(--s-4);
}
.plan{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: var(--s-3);
  position: relative;
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}
.plan:hover{ transform: translateY(-2px); box-shadow: var(--shadow-2); border-color: rgba(138,43,226,.35); }
.plan .plan-sub{ color: var(--muted); margin-top: .25rem; }
.plan .feat{ margin: var(--s-3) 0; padding-left: 1.2rem; color: var(--muted); }
.plan .feat li{ margin-bottom: .4rem; list-style: disc; }
.plan .price{ font-size: 1.6rem; font-weight: 800; margin-bottom: var(--s-2); }

.plan--pro{ border-color: rgba(255,47,179,.45); box-shadow: var(--shadow-2); }
.plan--pro .badge{
  position: absolute; top: -10px; right: 12px;
  background: linear-gradient(90deg, var(--violet), var(--magenta));
  color: #fff; font-size: .75rem; padding: .35rem .6rem; border-radius: 999px;
}

/* ===== Paleta eletrificada / glow ===== */
:root{
  --neon-violet: #9b5cff;
  --neon-magenta: #ff2fb3;
  --neon-cyan: #48e6ff;
}

/* ===== Hero FX base ===== */
.hero.hero--fx{
  position: relative;
  overflow: hidden;
  background: radial-gradient(1200px 600px at 5% -10%, rgba(155,92,255,.18), transparent 60%),
              radial-gradient(1000px 500px at 100% 0%, rgba(255,47,179,.14), transparent 60%),
              linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.08));
}
.hero__grid{
  display:grid; gap: var(--s-6);
  grid-template-columns: 1.05fr .95fr;
}
@media (max-width: 980px){
  .hero__grid{ grid-template-columns: 1fr; }
}

/* Orbes animados do fundo */
.hero__bg{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.orb{
  position:absolute; border-radius:50%;
  filter: blur(40px); opacity:.55;
  mix-blend-mode: screen;
  animation: floaty 16s ease-in-out infinite;
}
.orb--violet{
  width: 420px; height: 420px; left: -140px; top: -120px;
  background: radial-gradient(circle, rgba(155,92,255,.7), rgba(155,92,255,0));
}
.orb--magenta{
  width: 460px; height: 460px; right: -160px; top: -60px;
  background: radial-gradient(circle, rgba(255,47,179,.6), rgba(255,47,179,0));
  animation-duration: 20s;
}
@keyframes floaty {
  0%,100% { transform: translate3d(0,0,0) scale(1); }
  50%     { transform: translate3d(0,12px,0) scale(1.03); }
}

/* Linha da logo + faísca */
.logo-line{ display:flex; align-items:center; gap:.75rem; margin-bottom: .5rem; }
.spark{
  width: 10px; height: 10px; border-radius:50%;
  background: radial-gradient(circle, var(--neon-cyan), rgba(72,230,255,0));
  box-shadow: 0 0 18px 6px rgba(72,230,255,.4);
  animation: sparkPulse 2.2s ease-in-out infinite;
}
@keyframes sparkPulse{
  0%,100%{ transform: scale(1); opacity:.85; }
  50%{ transform: scale(1.25); opacity:1; }
}

/* Texto dinâmico que troca palavras */
.rotating{
  display:inline-block;
  min-width: 8ch; /* evita pulo de layout */
  background: linear-gradient(90deg, var(--neon-violet), var(--neon-magenta));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.swap-out{ animation: fadeOut .25s ease forwards; }
.swap-in { animation: fadeInUp .35s ease .2s forwards; opacity:0; }
@keyframes fadeOut{ to{ opacity:0; transform: translateY(-6px); } }
@keyframes fadeInUp{ to{ opacity:1; transform: translateY(0); } }

/* Cursor glow (seguidor do mouse) */
#cursor-glow{
  position: fixed; top:0; left:0; width: 240px; height: 240px;
  border-radius: 50%;
  pointer-events:none; z-index: 1;
  opacity:.45; transform: translate(-50%,-50%);
  background: radial-gradient(120px 120px at center,
              rgba(255,47,179,.55),
              rgba(155,92,255,.35) 40%,
              rgba(0,0,0,0) 70%);
  filter: blur(22px);
  transition: opacity .25s ease;
}
@media (pointer: coarse){
  /* esconde no mobile */
  #cursor-glow{ opacity:0; }
}

/* ===== Storytelling on-scroll ===== */
.story{
  position: relative; overflow:hidden;
  background: linear-gradient(180deg, rgba(255,47,179,.04), rgba(155,92,255,.06));
}
.story__wrap{ max-width: 820px; margin: 0 auto; padding: var(--s-8) var(--s-2); text-align:center; }
.story-step{
  font-size: clamp(1.6rem, 4.2vw, 2.6rem);
  font-weight: 800;
  margin: var(--s-6) 0;
  line-height: 1.15;
  letter-spacing: -.01em;
  background: linear-gradient(90deg, var(--neon-violet), var(--neon-magenta));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow: 0 0 24px rgba(155,92,255,.25);
}

/* efeitos de entrada (fade + translate) */
.reveal{ opacity:0; transform: translateY(22px) scale(.98); transition: transform .6s ease, opacity .6s ease; }
.reveal.in{ opacity:1; transform: translateY(0) scale(1); }

/* ===== Logo grandona no hero ===== */
.hero__grid{ /* já existe; só garantindo alinhamento legal */
  align-items: center;
}

.hero-logo-wrap{
  position: relative;
  display: grid;
  place-items: center;
  min-height: 260px;
  padding: 1rem;
  border-radius: 20px;
  /* remove qualquer sombra herdada do mock */
  border: 1px solid transparent;
  background: transparent;
}

.hero-logo{
  width: min(440px, 90%);
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 25px 60px rgba(155,92,255,.25))
          drop-shadow(0 12px 28px rgba(255,47,179,.18));
}

/* brilho sutil atrás da logo */
.hero-logo-glow{
  position: absolute;
  inset: auto 0 -18px 0;
  height: 22px;
  border-radius: 999px;
  background: radial-gradient(60% 100% at 50% 50%,
               rgba(255,47,179,.45), rgba(155,92,255,.25) 60%, transparent 75%);
  filter: blur(10px);
  pointer-events: none;
}

/* Mobile: troca pra logo centralizada acima do texto ou reduz */
@media (max-width: 980px){
  .hero-logo-wrap{ order: -1; margin-bottom: 1.25rem; }
  .hero-logo{ width: min(300px, 85%); }
}
.hero .container{
  display: flex;
  align-items: center;        /* centraliza verticalmente */
  justify-content: space-between;  /* deixa texto e logo separados mas alinhados */
  gap: 2rem;                  /* espaço entre os dois */
}
.lead{
  flex: 1;
}
.hero-logo-wrap{
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.skip-link{position:absolute;left:-9999px;top:auto}
.skip-link:focus{left:8px;top:8px;background:#000;color:#fff;padding:.5rem .75rem;border-radius:8px;z-index:50}

/* Centraliza tudo dentro da seção de contato */
.contato-center {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

/* Deixa o título maior */
#contato h2 {
  font-size: clamp(2rem, 5vw, 2.8rem);
  font-weight: 800;
  margin-bottom: 0.5rem;
}

/* Deixa o botão grandão */
.whatsapp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  background: #25D366; /* verde WhatsApp */
  padding: 1.2rem 2.5rem;
  border-radius: 16px;
  font-size: 1.3rem;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  transition: transform 0.2s ease, background 0.2s ease;
}

.whatsapp-btn:hover {
  background: #1ebe5a;
  transform: scale(1.05);
}

.whatsapp-btn .icon {
  width: 28px;
  height: 28px;
}

/* ===== Centralizar TÍTULO + SUB + BOTÃO no #contato ===== */
section#contato > .container{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;     /* centraliza verticalmente se a seção for alta */
  text-align: center;
  gap: 1rem;
}

/* se ainda estiver usando .section-head, força o layout em coluna no contato */
#contato .section-head{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: 100%;
  text-align: center;
}

/* botão grandão e centralizado */
#contato .whatsapp-btn{
  margin: .75rem auto 0;       /* centraliza horizontal */
  padding: 1.3rem 2.8rem;
  border-radius: 18px;
  font-size: 1.35rem;
}
#contato .whatsapp-btn .icon{ width: 32px; height: 32px; }

.blur {
  filter: blur(6px); /* quanto maior, mais desfocado */
  user-select: none; /* impede copiar/selecionar */
  pointer-events: none; /* impede hover em cima */
  opacity: 0.8; /* fica um pouquinho apagado */
}
.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover; /* mantém o corte redondo sem distorcer */
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff; 
  padding: 4px;
  object-fit: contain;
  box-shadow: 0 0 8px rgba(255,255,255,0.5);
}

/* ========== RESPONSIVO BONITO ========== */

/* Tablet first (max 1024px) */
@media (max-width: 1024px){
  .container{ padding: 0 1.1rem; }

  /* header mais compacto + nav rolável */
  .header-inner{ gap:.6rem; }
  nav{ gap:.25rem; overflow-x:auto; -webkit-overflow-scrolling: touch; }
  nav a{ padding:.55rem .75rem; }

  /* grids viram 2 colunas */
  .cards,
  .pricing,
  .testi{
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 1rem;
  }

  /* cards mais curtinhos no tablet */
  .card, .plan, .quote { padding: 1rem; }

  /* thumb/figura sempre 100% e arredondada */
  .thumb{ height: auto; padding: 0; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); }
  .thumb img{ display:block; width:100%; height:auto; border-radius: 14px; object-fit: cover; }

  /* Whats CTA central */
  .cta-wrap{ display:flex; flex-direction:column; align-items:center; gap:.75rem; }
  .btn.whats{ width: min(420px, 100%); justify-content:center; }
}

/* Mobile (max 680px) */
@media (max-width: 680px){
  section{ padding: 2.25rem 1rem; }

  /* hero empilhado e centralizado */
  .hero .container{
    display:flex; flex-direction:column; align-items:center; gap:1.25rem;
  }
  .lead{ text-align:center; }
  .actions{ width:100%; flex-direction:column; align-items:center; gap:.6rem; }
  .btn, .btn.ghost{ width:100%; }

  /* logo do topo e logo do hero menores */
  .logo-img{ width: 36px; height: 36px; }
  .hero-logo{ width:min(260px, 85%); }
  .hero-logo-wrap{ margin-top:.25rem; }

  /* grids viram 1 coluna */
  .cards,
  .pricing,
  .testi{ grid-template-columns: 1fr; }

  /* QUADRO dos cards + equal-height visual */
  .card{ padding:1rem; }
  .card h3{ margin-bottom:.35rem; }
  .card .tag{ margin-bottom:.5rem; }

  /* imagens dos cards sem “linha” sobrando */
  .card .thumb{ margin-top:.75rem; }
  .card .thumb img{ border-radius:12px; }

  /* depoimentos: avatar mais visível no dark */
  .avatar{
    width:44px; height:44px; border-radius:50%;
    background:#fff; padding:5px; object-fit:contain;
    box-shadow: 0 0 0 1px rgba(255,255,255,.08);
  }

  /* preços/Pacotes: texto mais amigável e valores borrados (se preferir) */
  .plan .price{
    font-size:1.35rem;
    filter: blur(6px);           /* borra no mobile também */
    pointer-events:none;
    user-select:none;
  }
}

/* Pequenos ajustes globais úteis para responsivo */
img{ max-width:100%; height:auto; }
.lead p{ margin-bottom:.25rem; }

/* evita cut nas thumbs em qualquer cenário */
.thumb, .card--thumb{ background:none !important; }