/* ==========================================================================
   iDAZZ — Website
   Folha de estilos principal
   Cores da marca: roxo #8A2BE2 · amarelo #FFE600 · cinza #1E1E1E
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --roxo:#8A2BE2;
  --roxo-dark:#6B1DB8;
  --roxo-light:rgba(138,43,226,0.12);
  --amarelo:#FFE600;
  --amarelo-dark:#D4BC00;
  --cinza:#1E1E1E;
  --cinza-md:#5A5A5A;
  --branco:#FFFFFF;
}
html{scroll-behavior:smooth}
body{font-family:'Inter',sans-serif;background:var(--branco);color:var(--cinza);line-height:1.6;overflow-x:hidden}

/* ─── NAV ─── */
nav{background:var(--cinza);padding:1rem 2.5rem;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:200}
nav ul{display:flex;gap:1.8rem;list-style:none}
nav ul a{text-decoration:none;color:rgba(255,255,255,0.55);font-family:'Space Grotesk',sans-serif;font-size:0.88rem;font-weight:500;transition:color .2s}
nav ul a:hover{color:var(--amarelo)}
.nav-cta{background:var(--amarelo)!important;color:var(--cinza)!important;padding:.45rem 1.2rem;border-radius:6px;font-weight:700!important;transition:background .2s!important}
.nav-cta:hover{background:var(--branco)!important;color:var(--cinza)!important}

/* ─── NAV MOBILE (hamburger) ─── */
.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:.4rem;z-index:210}
.nav-toggle span{display:block;width:24px;height:2px;background:var(--branco);margin:5px 0;transition:transform .2s,opacity .2s}
.nav-toggle.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle.is-open span:nth-child(2){opacity:0}
.nav-toggle.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ─── HERO ─── */
.hero{background:var(--cinza);min-height:92vh;display:flex;flex-direction:column;justify-content:center;padding:5rem 2.5rem;position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;top:-120px;right:-120px;width:500px;height:500px;background:var(--roxo);border-radius:50%;opacity:.25;pointer-events:none}
.hero::after{content:'';position:absolute;bottom:-80px;left:60px;width:300px;height:300px;background:var(--amarelo);border-radius:50%;opacity:.1;pointer-events:none}
.hero-inner{max-width:1100px;margin:0 auto;width:100%;position:relative;z-index:2}
.hero-tag{display:inline-flex;align-items:center;gap:.5rem;background:var(--roxo-light);border:1px solid rgba(138,43,226,.3);color:var(--amarelo);font-family:'Space Grotesk',sans-serif;font-size:.75rem;font-weight:600;letter-spacing:2px;text-transform:uppercase;padding:.4rem 1rem;border-radius:4px;margin-bottom:2rem}
.hero h1{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(3rem,8vw,6.5rem);line-height:1.02;color:var(--branco);letter-spacing:-3px;margin-bottom:1.5rem}
.hero h1 .accent{color:var(--amarelo)}
.hero h1 .roxo-text{color:var(--roxo)}
.hero-sub{font-size:1.2rem;color:rgba(255,255,255,.6);max-width:580px;margin-bottom:2.5rem;line-height:1.65}
.hero-ctas{display:flex;gap:1rem;flex-wrap:wrap;align-items:center}
.btn-hero{display:inline-flex;align-items:center;gap:.5rem;background:var(--amarelo);color:var(--cinza);padding:.85rem 2rem;border-radius:6px;text-decoration:none;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1rem;transition:all .2s;border:none;cursor:pointer}
.btn-hero:hover{background:var(--branco);transform:translateY(-2px)}
.btn-ghost{display:inline-flex;align-items:center;gap:.5rem;background:transparent;color:var(--branco);padding:.85rem 2rem;border-radius:6px;text-decoration:none;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:1rem;border:1.5px solid rgba(255,255,255,.25);transition:all .2s}
.btn-ghost:hover{border-color:var(--amarelo);color:var(--amarelo)}
.hero-acronym{margin-top:4rem;display:flex;gap:2rem;flex-wrap:wrap}
.acr-item{display:flex;align-items:center;gap:.7rem}
.acr-letter{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.8rem;color:var(--amarelo);line-height:1;width:2.2rem}
.acr-word{font-family:'Space Grotesk',sans-serif;font-size:.75rem;color:rgba(255,255,255,.45);text-transform:uppercase;letter-spacing:2px;font-weight:500}

/* ─── STATS ─── */
.stats-bar{background:var(--amarelo);padding:2.5rem}
.stats-bar-inner{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.stat{text-align:center}
.stat-num{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:3rem;color:var(--cinza);letter-spacing:-2px;display:block;line-height:1}
.stat-lbl{font-family:'Space Grotesk',sans-serif;font-size:.8rem;font-weight:600;color:rgba(30,30,30,.6);text-transform:uppercase;letter-spacing:1px;margin-top:.4rem}

/* ─── PROBLEMA ─── */
.problema{background:var(--branco);padding:6rem 2.5rem}
.problema-inner{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:center}
.problema h2{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(2rem,4vw,3rem);letter-spacing:-1.5px;margin-bottom:1.2rem;line-height:1.1}
.problema h2 span{color:var(--roxo)}
.problema p{color:var(--cinza-md);font-size:1.05rem;margin-bottom:2rem}
.pain-list{list-style:none;display:flex;flex-direction:column;gap:1rem}
.pain-item{display:flex;align-items:flex-start;gap:1rem;padding:1.2rem 1.4rem;background:var(--cinza);border-radius:10px;border-left:4px solid var(--amarelo)}
.pain-num{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.3rem;color:var(--amarelo);min-width:1.5rem;line-height:1.2}
.pain-content strong{display:block;font-family:'Space Grotesk',sans-serif;font-size:.9rem;font-weight:600;color:var(--branco);margin-bottom:.2rem}
.pain-content span{font-size:.83rem;color:rgba(255,255,255,.5)}

/* ─── SERVIÇOS (porta de entrada) ─── */
.servicos{background:var(--cinza);padding:6rem 2.5rem}
.servicos-inner{max-width:1100px;margin:0 auto}
.servicos h2{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(2rem,4vw,3rem);letter-spacing:-1.5px;color:var(--branco);margin-bottom:.6rem}
.servicos p.sub{color:rgba(255,255,255,.45);font-size:1.05rem;margin-bottom:3rem;max-width:560px}
.servicos-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-bottom:3rem}
.srv-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:2rem;transition:all .25s;cursor:default}
.srv-card:hover{background:rgba(255,230,0,.08);border-color:var(--amarelo);transform:translateY(-4px)}
.srv-num{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:.75rem;color:var(--amarelo);letter-spacing:2px;text-transform:uppercase;margin-bottom:1rem}
.srv-card h3{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.25rem;color:var(--branco);margin-bottom:.6rem}
.srv-card p{font-size:.87rem;color:rgba(255,255,255,.5);line-height:1.6}

.trilha-intro{font-family:'Space Grotesk',sans-serif;font-size:.8rem;font-weight:600;letter-spacing:1px;color:rgba(255,255,255,.4);text-transform:uppercase;margin-bottom:1rem}
.trilha-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.2rem}
.trilha-card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:1.8rem}
.trilha-tag{font-family:'Space Grotesk',sans-serif;font-size:.7rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--amarelo);margin-bottom:.6rem}
.trilha-card h4{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.15rem;color:var(--branco);margin-bottom:.5rem}
.trilha-meta{font-size:.8rem;color:rgba(255,255,255,.45);margin-bottom:1rem}
.trilha-quote{font-size:.87rem;color:rgba(255,255,255,.65);font-style:italic;padding-left:.9rem;border-left:3px solid var(--amarelo);line-height:1.55}

/* ─── PROCESSO ─── */
.processo{background:var(--branco);padding:6rem 2.5rem}
.processo-inner{max-width:1100px;margin:0 auto}
.processo h2{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(2rem,4vw,3rem);letter-spacing:-1.5px;margin-bottom:.6rem}
.processo p.sub{color:var(--cinza-md);font-size:1.05rem;margin-bottom:3.5rem;max-width:520px}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem}
.step{position:relative}
.step-dot{width:52px;height:52px;background:var(--roxo);border-radius:10px;display:flex;align-items:center;justify-content:center;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.3rem;color:var(--amarelo);margin-bottom:1.2rem}
.step h4{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1rem;margin-bottom:.4rem}
.step p{font-size:.83rem;color:var(--cinza-md)}

/* ─── DIFERENCIAL (vendemos tempo) ─── */
.diferencial{background:var(--roxo);padding:6rem 2.5rem}
.diferencial-inner{max-width:1100px;margin:0 auto}
.diferencial .section-kicker{color:var(--amarelo)}
.diferencial h2{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(2rem,4vw,3rem);letter-spacing:-1.5px;color:var(--branco);margin-bottom:1.6rem}
.diferencial h2 span{color:var(--amarelo)}
.diferencial-quote{max-width:680px;font-size:1.15rem;font-style:italic;color:rgba(255,255,255,.85);line-height:1.6;margin-bottom:3rem;padding-left:1.2rem;border-left:3px solid var(--amarelo)}
.produtos-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-bottom:1.6rem}
.produto-card{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:1.8rem;transition:border-color .2s}
.produto-card:hover{border-color:var(--amarelo)}
.produto-card h3{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.15rem;color:var(--branco);margin-bottom:.2rem}
.produto-for{font-size:.8rem;color:rgba(255,255,255,.45);margin-bottom:1.1rem}
.produto-list{list-style:none;display:flex;flex-direction:column;gap:.5rem}
.produto-list li{font-size:.83rem;color:rgba(255,255,255,.65);padding-left:1.2rem;position:relative}
.produto-list li::before{content:'→';position:absolute;left:0;color:var(--amarelo);font-weight:700}
.consultoria-card{background:rgba(255,255,255,.05);border:2px solid var(--amarelo);border-radius:12px;padding:1.8rem;display:flex;flex-wrap:wrap;gap:1.5rem;align-items:center;justify-content:space-between}
.consultoria-card .trilha-tag{margin-bottom:.4rem}
.consultoria-card h4{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.2rem;color:var(--branco);margin-bottom:.3rem}
.consultoria-card .trilha-meta{margin-bottom:0}
.consultoria-card .trilha-quote{max-width:360px;margin:0}

/* ─── PACOTES (sem preço) ─── */
.precos{background:#FAFAFC;padding:6rem 2.5rem}
.precos-inner{max-width:1100px;margin:0 auto}
.precos .section-kicker{color:var(--roxo)}
.precos h2{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(2rem,4vw,3rem);letter-spacing:-1.5px;margin-bottom:.6rem}
.precos p.sub{color:var(--cinza-md);font-size:1.05rem;margin-bottom:3rem;max-width:560px}
.precos-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.pr-card{background:var(--branco);border:1.5px solid #ECE8F5;border-radius:12px;padding:1.8rem;position:relative;transition:all .2s;box-shadow:0 2px 10px rgba(0,0,0,.03)}
.pr-card:hover{border-color:var(--roxo);box-shadow:0 12px 28px rgba(138,43,226,.12);transform:translateY(-4px)}
.pr-card.hot{border:2px solid var(--roxo)}
.pr-badge{position:absolute;top:-12px;left:1.6rem;background:var(--roxo);color:var(--branco);font-family:'Space Grotesk',sans-serif;font-size:.68rem;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;padding:.3rem .8rem;border-radius:4px}
.pr-card h3{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.05rem;color:var(--cinza);margin-bottom:.3rem}
.pr-for{font-size:.78rem;color:var(--cinza-md);margin-bottom:.9rem}
.pr-prazo{display:inline-block;font-family:'Space Grotesk',sans-serif;font-size:.7rem;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--roxo);background:var(--roxo-light);padding:.3rem .7rem;border-radius:20px}
.pr-desc{font-size:.83rem;color:var(--cinza-md);margin-top:.9rem;line-height:1.55}
.precos-cta{margin-top:2.5rem;background:var(--cinza);border-radius:14px;padding:2rem 2.2rem;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.5rem}
.precos-cta h4{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.2rem;color:var(--branco);margin-bottom:.3rem}
.precos-cta p{font-size:.88rem;color:rgba(255,255,255,.55)}

/* ─── QUOTE ─── */
.quote-section{background:var(--amarelo);padding:6rem 2.5rem}
.quote-section-inner{max-width:800px;margin:0 auto;text-align:center}
.quote-text{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:clamp(1.4rem,3vw,2rem);color:var(--cinza);line-height:1.4;margin-bottom:2rem;letter-spacing:-0.5px}
.quote-author strong{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1rem;color:var(--cinza);display:block}
.quote-author span{font-size:.85rem;color:rgba(30,30,30,.55)}

/* ─── CTA FINAL ─── */
.cta-final{background:var(--cinza);padding:7rem 2.5rem;text-align:center;position:relative;overflow:hidden}
.cta-final h2{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(2.5rem,6vw,5rem);color:var(--branco);letter-spacing:-2px;margin-bottom:1rem;position:relative}
.cta-final h2 span{color:var(--amarelo)}
.cta-final p{color:rgba(255,255,255,.5);font-size:1.1rem;margin-bottom:2.5rem;position:relative}
.cta-micro{font-size:.8rem;color:rgba(255,255,255,.3);margin-top:1rem;position:relative}

/* ─── FOOTER ─── */
footer{background:#111;padding:2.5rem;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem}
.footer-links{display:flex;gap:1.5rem;flex-wrap:wrap}
.footer-links a{font-size:.8rem;color:rgba(255,255,255,.3);text-decoration:none;font-family:'Space Grotesk',sans-serif;font-weight:500;transition:color .2s}
.footer-links a:hover{color:var(--amarelo)}
.footer-copy{font-size:.75rem;color:rgba(255,255,255,.2);font-family:'Space Grotesk',sans-serif}
.section-kicker{font-family:'Space Grotesk',sans-serif;font-size:.75rem;font-weight:700;letter-spacing:3px;text-transform:uppercase;margin-bottom:1rem}

/* ==========================================================================
   MODAL — Webchat "Fala com a gente agora"
   ========================================================================== */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(17,17,17,.75);backdrop-filter:blur(2px);z-index:500;padding:2rem 1.2rem;overflow-y:auto}
.modal-overlay.is-open{display:flex;align-items:center;justify-content:center}
.modal-box{background:var(--branco);border-radius:14px;max-width:480px;width:100%;padding:2.5rem;position:relative;box-shadow:0 20px 60px rgba(0,0,0,.35)}
.modal-close{position:absolute;top:1rem;right:1rem;background:none;border:none;font-size:1.5rem;line-height:1;cursor:pointer;color:var(--cinza-md);padding:.3rem .6rem;border-radius:6px;transition:background .2s;z-index:2}
.modal-close:hover{background:rgba(0,0,0,.06)}
.modal-box h3{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.6rem;letter-spacing:-1px;margin-bottom:.4rem;color:var(--cinza)}
.modal-box .modal-sub{color:var(--cinza-md);font-size:.92rem;margin-bottom:1.5rem}

/* ─── Caixa de chat dentro do modal ─── */
.modal-chat{max-width:420px;padding:1.8rem 1.8rem 2rem}
.chat-frame-wrap{position:relative;width:100%;height:560px;max-height:65vh;border-radius:10px;overflow:hidden;background:#F4F2F8;border:1px solid #E8E4F0}
.chat-frame-wrap iframe{width:100%;height:100%;border:0;display:block}
.chat-fallback{display:none;position:absolute;inset:0;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:2rem;gap:.7rem}
.chat-fallback.is-visible{display:flex}
.chat-fallback p{color:var(--cinza-md);font-size:.9rem}
.chat-fallback .btn-hero{margin-top:.4rem}
.chat-fallback a.email-link{font-size:.85rem;color:var(--roxo);text-decoration:underline}

/* ==========================================================================
   BOTÕES FLUTUANTES — Webchat + WhatsApp (sempre visíveis)
   ========================================================================== */
.fab-group{position:fixed;right:1.4rem;bottom:1.4rem;display:flex;flex-direction:column;align-items:flex-end;gap:.8rem;z-index:400}
.fab{display:inline-flex;align-items:center;gap:.6rem;border:none;cursor:pointer;text-decoration:none;box-shadow:0 8px 24px rgba(0,0,0,.22);transition:transform .2s,box-shadow .2s}
.fab:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(0,0,0,.28)}
.fab-chat{background:var(--amarelo);color:var(--cinza);font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:.92rem;padding:.85rem 1.3rem;border-radius:50px;position:relative}
.fab-chat svg{width:20px;height:20px;flex-shrink:0}
.fab-chat .badge-online{position:absolute;top:-3px;right:-3px;width:12px;height:12px;background:#22c55e;border:2px solid var(--branco);border-radius:50%}
.fab-whatsapp{background:#25D366;width:52px;height:52px;border-radius:50%;justify-content:center;align-self:flex-end}
.fab-whatsapp svg{width:26px;height:26px;fill:var(--branco)}

@media(max-width:640px){
  .fab-group{right:1rem;bottom:1rem;gap:.6rem}
  .fab-chat{padding:.7rem 1.1rem;font-size:.85rem}
  .fab-whatsapp{width:46px;height:46px}
  .fab-whatsapp svg{width:22px;height:22px}
  .modal-chat{padding:1.4rem 1.2rem 1.6rem}
  .chat-frame-wrap{height:70vh}
}

@media(max-width:900px){
  .servicos-grid,.produtos-grid,.precos-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  .problema-inner,.servicos-grid,.trilha-grid,.produtos-grid,.precos-grid{grid-template-columns:1fr}
  .steps{grid-template-columns:repeat(2,1fr)}
  .stats-bar-inner{grid-template-columns:1fr;gap:1.5rem}
  .hero-acronym{gap:1rem}
  .nav-toggle{display:block}
  nav ul{display:none;position:absolute;top:100%;left:0;right:0;background:var(--cinza);flex-direction:column;gap:0;padding:.5rem 0;border-top:1px solid rgba(255,255,255,.08)}
  nav ul.is-open{display:flex}
  nav ul li{width:100%}
  nav ul a{display:block;padding:.9rem 2.5rem}
  .nav-cta{margin:.6rem 2.5rem;display:inline-flex}
  .modal-box{padding:1.8rem}
  .consultoria-card{flex-direction:column;align-items:flex-start}
}