
:root{--brand:#6d28d9;--brand2:#5b21b6;--ink:#0b1220;--muted:rgba(11,18,32,.68);--lav:#f5f1ff;--line:rgba(11,92,255,.10);}

/* --- Desktop safety: ensure hero renders (fix blank above-fold) --- */
.heroWrap{max-width:1200px;margin:22px auto 0;padding:0 18px;}
.heroMain{background:linear-gradient(135deg,var(--brand),#7c3aed);border-radius:26px;padding:28px;display:grid;grid-template-columns:1.05fr .95fr;gap:24px;box-shadow:0 18px 60px rgba(17,24,39,.22);border:1px solid rgba(255,255,255,.14);}
.heroMain h1,.heroMain h2,.heroMain h3,.heroMain p{color:#fff;}
.heroMain .muted{color:rgba(255,255,255,.86);}
.heroMain .ctaRow{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px;}
.heroMain .btnPrimary{background:#fff;color:var(--brand);border:0;}
.heroMain .btnGhost{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.26);}
.heroCarousel{border-radius:22px;overflow:hidden;border:3px solid rgba(255,255,255,.20);background:rgba(255,255,255,.06);}
.heroCarousel img{width:100%;height:100%;object-fit:cover;display:block;}
.heroBottom{margin-top:16px;display:grid;grid-template-columns:1.2fr 1fr;gap:16px;}
.heroBottom .card{background:rgba(255,255,255,.85);border-radius:18px;border:1px solid rgba(124,58,237,.18);}
@media (max-width:980px){.heroMain{grid-template-columns:1fr;} .heroBottom{grid-template-columns:1fr;}}

*{box-sizing:border-box}html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;color:var(--ink)}
body{background:radial-gradient(900px 520px at 12% 10%, rgba(109,40,217,.14), rgba(255,255,255,0) 60%),radial-gradient(900px 520px at 88% 18%, rgba(11,92,255,.08), rgba(255,255,255,0) 62%),linear-gradient(180deg,#fff 0%,var(--lav) 40%,#fff 100%)}
.container{max-width:1200px;margin:0 auto;padding:0 16px}
header{position:sticky;top:0;z-index:80;background:rgba(255,255,255,.86);backdrop-filter:blur(10px);border-bottom:1px solid rgba(109,40,217,.10)}
.navbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand img{height:64px;width:auto;border-radius:12px}
.brand .bTxt{display:flex;flex-direction:column;line-height:1.05}
.brand .bTxt b{font-weight:950}
.brand .bTxt span{font-size:12px;color:var(--muted);font-weight:800;margin-top:2px}
nav ul{list-style:none;margin:0;padding:0;display:flex;gap:14px;align-items:center}
nav a{text-decoration:none;font-weight:900;color:rgba(11,18,32,.78);padding:10px 10px;border-radius:12px}
nav a:hover{background:rgba(109,40,217,.08)}
.btnTop{display:inline-flex;align-items:center;justify-content:center;padding:12px 16px;border-radius:14px;background:var(--brand);color:#fff;text-decoration:none;font-weight:950;box-shadow:0 18px 55px rgba(109,40,217,.18);border:1px solid rgba(255,255,255,.14)}
.btnTop:hover{background:var(--brand2);transform:translateY(-1px)}
section{padding:42px 0}
.band{background:radial-gradient(520px 240px at 18% 40%, rgba(109,40,217,.12), rgba(255,255,255,0) 62%),radial-gradient(520px 240px at 82% 30%, rgba(11,92,255,.08), rgba(255,255,255,0) 62%),linear-gradient(180deg, rgba(239,232,255,.92), rgba(245,241,255,.45));border-top:1px solid rgba(109,40,217,.10);border-bottom:1px solid rgba(109,40,217,.10)}
.kicker{font-weight:950;color:rgba(11,18,32,.82)}h1{font-size:56px;margin:0;letter-spacing:-.5px}h2{font-size:34px;margin:0 0 10px;letter-spacing:-.5px}
.lead{margin:10px 0 0;font-weight:750;color:rgba(11,18,32,.76);max-width:70ch}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 16px;border-radius:14px;border:1px solid rgba(11,92,255,.10);background:rgba(255,255,255,.86);font-weight:950;text-decoration:none;box-shadow:0 12px 35px rgba(11,18,32,.06)}
.btn.primary{background:var(--brand);color:#fff;border-color:rgba(255,255,255,.14)}
.btn:hover{transform:translateY(-1px)}
.hero{padding:18px 0 10px}
.heroMain{display:grid;grid-template-columns:1.05fr .95fr;gap:18px;background:linear-gradient(135deg,#6d28d9 0%,#6f2ee6 50%,#6d28d9 100%);border-radius:22px;padding:26px;overflow:hidden;position:relative;box-shadow:0 26px 80px rgba(109,40,217,.24)}
.heroMain::after{content:"";position:absolute;left:18px;bottom:18px;width:220px;height:220px;background:url('./logo.png') center/contain no-repeat;opacity:.13;pointer-events:none;transform:rotate(-8deg)}
.heroLeft{color:#fff}.heroKicker{font-weight:900;font-size:18px;opacity:.92;margin-bottom:14px}
.heroLeft p{margin:12px 0 0;font-weight:750;opacity:.92;max-width:56ch;font-size:16px;line-height:1.5}
.heroBtns{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.btnHero{display:inline-flex;align-items:center;justify-content:center;border-radius:0;padding:14px 18px;font-weight:950;border:1px solid rgba(255,255,255,.22);background:transparent;color:#fff;text-decoration:none}
.btnHero.primary{background:#fff;color:#6d28d9;border-color:#fff;min-width:220px;box-shadow:0 18px 45px rgba(255,255,255,.18)}
.regionBar{margin-top:18px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);border-radius:18px;padding:12px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.regionTitle b{display:block;font-weight:950}.regionTitle span{display:block;opacity:.88;font-weight:750;font-size:12px;margin-top:2px}
.regionPills{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.pill{appearance:none;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.14);color:#fff;padding:10px 12px;border-radius:999px;font-weight:950;cursor:pointer}
.pill.ghost{background:transparent}.pill.is-active{background:rgba(255,255,255,.24)}
.heroCarousel{width:min(520px,100%);aspect-ratio:16/10;border-radius:18px;background:rgba(255,255,255,.92);overflow:hidden;position:relative;border:4px solid rgba(255,255,255,.28);box-shadow:0 22px 65px rgba(0,0,0,.22)}
.hcTrack{height:100%;position:relative}.hcSlide{position:absolute;inset:0;opacity:0}.hcSlide img{width:100%;height:100%;object-fit:cover;display:block;border-radius:14px}
.heroBottom{display:grid;grid-template-columns:1.55fr 1fr;gap:14px;margin-top:14px;position:relative}
.heroBottom::before{content:"";position:absolute;right:18px;top:14px;width:140px;height:140px;background:url('./logo.png') center/contain no-repeat;opacity:.10;pointer-events:none;transform:rotate(10deg)}
.heroBottom>*{position:relative;z-index:1}
.hbBox{border-radius:18px;overflow:hidden;border:1px solid rgba(11,92,255,.10);background:rgba(255,255,255,.92);box-shadow:0 14px 40px rgba(11,18,32,.06)}
.hbTop{padding:10px 12px;display:flex;justify-content:space-between;gap:10px;align-items:baseline;background:rgba(245,241,255,.72);border-bottom:1px solid rgba(11,92,255,.08)}
.hbTop span{color:var(--muted);font-weight:780;font-size:12px}
.hbFrame{width:100%;height:250px;border:0;display:block;filter:saturate(1.05)}
.revCarousel{position:relative;height:250px}.revTrack{height:100%;position:relative}.revSlide{position:absolute;inset:0;opacity:0}.revSlide img{width:100%;height:100%;object-fit:cover;display:block}
@keyframes fadeCycle{0%{opacity:0}6%{opacity:1}33%{opacity:1}39%{opacity:0}100%{opacity:0}}
.hcSlide,.revSlide{opacity:0;animation:fadeCycle 9s infinite;will-change:opacity}
.hcSlide:nth-child(1),.revSlide:nth-child(1){animation-delay:0s}
.hcSlide:nth-child(2),.revSlide:nth-child(2){animation-delay:3s}
.hcSlide:nth-child(3),.revSlide:nth-child(3){animation-delay:6s}
#heroCarousel:hover .hcSlide,#revCarousel:hover .revSlide{animation-play-state:paused}
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:18px;align-items:center}
.artPanel{border-radius:22px;border:1px solid rgba(109,40,217,.14);background:linear-gradient(135deg, rgba(255,255,255,.92), rgba(245,241,255,.72));box-shadow:0 28px 80px rgba(109,40,217,.14);overflow:hidden;min-height:320px;position:relative}
.artPanel img{width:100%;height:100%;object-fit:cover;display:block;opacity:.96}
.artInset{position:absolute;left:16px;bottom:16px;padding:10px 12px;border-radius:16px;background:rgba(255,255,255,.86);border:1px solid rgba(11,92,255,.10);box-shadow:0 14px 40px rgba(11,18,32,.06);font-weight:950}
.list{margin:12px 0 0;padding:0;list-style:none;display:grid;gap:10px}
.list li{padding:14px;border-radius:18px;background:rgba(255,255,255,.86);border:1px solid rgba(11,92,255,.10);box-shadow:0 14px 40px rgba(11,18,32,.06);font-weight:900}
.list li span{display:block;margin-top:4px;color:var(--muted);font-weight:780}
.timeline{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.step{padding:16px;border-radius:22px;background:rgba(255,255,255,.88);border:1px solid rgba(11,92,255,.10);box-shadow:0 16px 45px rgba(11,18,32,.06)}
.step b{font-weight:950}.step p{margin:8px 0 0;color:var(--muted);font-weight:780}
.proofRow{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}
.proof{border-radius:18px;padding:14px;background:rgba(255,255,255,.86);border:1px solid rgba(11,92,255,.10);box-shadow:0 14px 40px rgba(11,18,32,.06)}
.proof span{display:block;margin-top:4px;color:var(--muted);font-weight:780}
.faq{border-radius:22px;background:rgba(255,255,255,.86);border:1px solid rgba(11,92,255,.10);box-shadow:0 16px 45px rgba(11,18,32,.06);padding:6px 14px}
details{padding:10px 0;border-bottom:1px solid rgba(11,92,255,.08)}details:last-child{border-bottom:0}
summary{cursor:pointer;font-weight:950}details p{margin:10px 0 0;color:var(--muted);font-weight:780}
footer{padding:26px 0;border-top:1px solid rgba(109,40,217,.10);background:rgba(255,255,255,.86)}
.waFloater{position:fixed;right:18px;bottom:18px;z-index:999;display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:999px;background:rgba(109,40,217,.92);color:#fff;text-decoration:none;font-weight:950;box-shadow:0 22px 70px rgba(109,40,217,.22);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(8px);transition:opacity .2s ease,transform .2s ease}
.waFloater:hover{transform:translateY(-1px);background:rgba(91,33,182,.95)}
.waDot{width:38px;height:38px;border-radius:999px;background:#25D366;display:grid;place-items:center;box-shadow:0 18px 55px rgba(37,211,102,.24);border:1px solid rgba(255,255,255,.18);flex:0 0 auto}
.waFloater small{display:block;font-size:12px;font-weight:800;opacity:.92}
.waFloater b{display:block;line-height:1.05}
.waFloater.is-hidden{opacity:0;transform:translateY(10px);pointer-events:none}
@media (max-width:720px){
  h1{font-size:44px}
  .heroMain{grid-template-columns:1fr;padding:18px}
  .split{grid-template-columns:1fr}
  .timeline{grid-template-columns:1fr}
  .proofRow{grid-template-columns:1fr}
  nav ul{display:none}
  .waFloater{left:12px;right:12px;bottom:12px;border-radius:18px;justify-content:center}
}


/* ===== V16: polish (designer sênior + UX) ===== */
a, button{ transition: transform .15s ease, background .15s ease, box-shadow .15s ease, opacity .15s ease; }
:focus-visible{ outline: 3px solid rgba(109,40,217,.35); outline-offset: 3px; border-radius: 12px; }
header .btnTop{ padding: 12px 18px; }
nav a{ font-size: 14px; }
nav a.active{ background: rgba(109,40,217,.10); color: var(--ink); }

/* Tipografia mais "premium" */
h1{ line-height: .96; }
h2{ line-height: 1.08; }
.lead{ line-height: 1.55; }

/* Hierarquia de seção: menos “papel”, mais calor */
section{ scroll-margin-top: 90px; }
.sectionTitleRow{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.sectionDivider{
  height: 1px;
  background: linear-gradient(90deg, rgba(109,40,217,.0), rgba(109,40,217,.18), rgba(11,92,255,.10), rgba(109,40,217,.0));
  margin: 18px 0 0;
}

/* Botões mais consistentes */
.btn, .btnHero{
  letter-spacing: .1px;
}
.btn{ padding: 12px 18px; }
.btn.primary{ box-shadow: 0 18px 55px rgba(109,40,217,.18); }
.btn.primary:hover{ box-shadow: 0 22px 70px rgba(109,40,217,.22); }
.btn:hover{ box-shadow: 0 16px 45px rgba(11,18,32,.08); }

/* Cards/listas menos "card overload": mais densidade, menos borda */
.list li{ border-color: rgba(109,40,217,.10); }
.step, .proof, .faq, .hbBox{ border-color: rgba(109,40,217,.10); }

/* Hero: deixa mais vivo, sem over */
.heroMain{ background: radial-gradient(1200px 520px at 15% 30%, rgba(255,255,255,.14), rgba(255,255,255,0) 55%), linear-gradient(135deg,#6d28d9 0%,#6f2ee6 50%,#6d28d9 100%); }
.heroCarousel{ border-color: rgba(255,255,255,.24); }
.heroCarousel::after{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(420px 220px at 35% 25%, rgba(255,255,255,.16), rgba(255,255,255,0) 60%);
  pointer-events:none;
}
.regionBar{ box-shadow: 0 18px 55px rgba(0,0,0,.12); }

/* Animação leve de entrada (apenas desktop e sem reduzir motion) */
@media (prefers-reduced-motion: no-preference){
  .reveal{ opacity:0; transform: translateY(10px); transition: opacity .45s ease, transform .45s ease; }
  .reveal.is-in{ opacity:1; transform: translateY(0); }
}

/* ===== V18: acessibilidade + menu mobile ===== */
.skipLink{
  position:absolute; left: 12px; top: 8px; z-index: 9999;
  background: #fff; color: var(--ink);
  padding: 10px 12px; border-radius: 12px;
  border: 1px solid rgba(109,40,217,.18);
  transform: translateY(-120%);
}
.skipLink:focus{ transform: translateY(0); }

.menuBtn{
  display:none;
  border: 1px solid rgba(109,40,217,.18);
  background: rgba(255,255,255,.86);
  border-radius: 14px;
  padding: 10px 12px;
  font-weight: 950;
  box-shadow: 0 12px 35px rgba(11,18,32,.06);
}
@media (max-width: 720px){
  .menuBtn{ display:inline-flex; align-items:center; justify-content:center; }
  nav ul.navList{ 
    display:none; 
    position:absolute;
    top: 66px; right: 16px; left: 16px;
    background: rgba(255,255,255,.96);
    border: 1px solid rgba(109,40,217,.16);
    border-radius: 18px;
    padding: 10px;
    box-shadow: 0 26px 80px rgba(11,18,32,.10);
    flex-direction: column;
    gap: 6px;
  }
  nav ul.navList.is-open{ display:flex; }
  nav a{ width:100%; }
}


/* ===== V19: mobile-first polish (sem mexer no desktop) ===== */
.hbMobileCarousel{ width:100%; }
.hbMCTrack{ width:100%; }
.hbMCSlide{ width:100%; }

/* Desktop: mantém lado a lado (não muda o que já estava bom) */
@media (min-width: 721px){
  .hbMobileCarousel .hbMCTrack{
    display:grid;
    grid-template-columns: 1.25fr 1fr;
    gap: 18px;
    transform: none !important;
  }
  .hbMobileCarousel .hbMCSlide{ width:auto; }
  .hbMCDots{ display:none; }
}

/* Mobile: vira carrossel (mapa <-> avaliações) */
@media (max-width: 720px){
  .hero{ padding-bottom: 18px; }
  .heroMain{ padding: 16px; border-radius: 26px; }
  .heroLeft{ gap: 10px; }
  .heroKicker{ font-size: 13px; padding: 8px 10px; border-radius: 999px; display:inline-flex; }
  h1{ font-size: 40px; }
  .heroBtns{ display:grid; grid-template-columns: 1fr; gap: 10px; }
  .btnHero{ width: 100%; justify-content:center; }
  .regionBar{ padding: 12px; }
  .regionPills{ overflow:auto; -webkit-overflow-scrolling: touch; gap: 8px; }
  .regionPills::-webkit-scrollbar{ display:none; }
  .heroCarousel{ border-radius: 22px; }
  .heroCarousel img{ border-radius: 18px; }

  .hbMobileCarousel{ overflow:hidden; position:relative; }
  .hbMobileCarousel .hbMCTrack{
    display:flex;
    gap: 0;
    transition: transform .42s ease;
    will-change: transform;
  }
  .hbMobileCarousel .hbMCSlide{
    min-width: 100%;
    padding: 0;
  }
  .hbMobileCarousel .hbBox{ margin:0; }
  .hbFrame{ height: 280px; }
  .revSlide img{ height: 280px; object-fit: cover; }

  .hbMCDots{
    display:flex;
    justify-content:center;
    gap: 10px;
    padding: 12px 0 2px;
  }
  .hbMCDots .dot{
    width: 10px; height: 10px;
    border-radius: 999px;
    border: 1px solid rgba(109,40,217,.22);
    background: rgba(255,255,255,.7);
  }
  .hbMCDots .dot.is-on{
    background: rgba(109,40,217,.95);
    border-color: rgba(109,40,217,.95);
    width: 26px;
  }

  /* Seções: mais compactas e com sensação de movimento (sem "monte de cards") */
  section{ padding: 26px 0; }
  .container{ padding-left: 14px; padding-right: 14px; }
  .band{ padding: 26px 0; }
  .sectionDivider{ margin-top: 12px; }
}


/* ===== V20: Mobile Hero compacto (sem mexer no desktop) ===== */
@media (max-width: 720px){
  /* Header mais eficiente */
  header{ position: sticky; top:0; z-index: 60; }
  header .brand img{ width: 44px; height: 44px; }
  header .brand .name{ font-size: 15px; line-height: 1.05; }
  header .brand .sub{ font-size: 11px; opacity: .85; }

  /* HERO: transforma em 1 bloco “high performance” */
  .heroWrap{ padding: 10px 12px 0; }
  .heroMain{
    border-radius: 22px;
    padding: 14px;
    box-shadow: 0 26px 85px rgba(11,18,32,.14);
  }
  .heroGrid{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    align-items: start;
  }

  /* imagem primeiro, texto sobreposto (igual best practices) */
  .heroCarousel{
    order: 0;
    height: 250px !important;
    border-radius: 18px !important;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.22) !important;
    position: relative;
  }
  .heroCarousel img, .heroCarousel video{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.02);
    filter: saturate(1.05);
  }
  .heroCarousel::before{
    content:"";
    position:absolute; inset:0;
    background: linear-gradient(180deg, rgba(0,0,0,.08) 0%, rgba(0,0,0,.48) 62%, rgba(0,0,0,.62) 100%);
    pointer-events:none;
    z-index: 1;
  }

  .heroCopy{
    order: 1;
    margin-top: -132px; /* sobrepõe no final do banner */
    position: relative;
    z-index: 3;
    padding: 14px 14px 12px;
    border-radius: 18px;
    background: rgba(109,40,217,.72);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,.18);
  }

  .heroCopy .kicker{
    display:inline-flex;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.18);
    font-size: 12px;
    margin-bottom: 10px;
  }

  .heroCopy h1{
    font-size: 34px !important;
    letter-spacing: -0.6px;
    margin-bottom: 8px !important;
  }
  .heroCopy .lead{
    font-size: 13.8px;
    line-height: 1.45;
    opacity: .98;
    margin-bottom: 12px !important;
  }

  /* CTAs: 1 primário + 1 secundário discreto */
  .heroActions{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin-top: 10px;
  }
  .heroActions .btnHero, .heroActions .btn{
    width: 100%;
    padding: 14px 14px;
    border-radius: 16px;
    font-weight: 850;
  }
  .heroActions .btnHero.primary{
    box-shadow: 0 18px 60px rgba(0,0,0,.18);
  }
  .heroActions .btnHero.ghost{
    background: rgba(255,255,255,.10) !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    color: #fff !important;
  }

  /* “Regiões” vira chips horizontais compactos */
  .regionBar{
    margin-top: 10px !important;
    padding: 10px !important;
    border-radius: 18px !important;
  }
  .regionBar .regionPills{
    display:flex !important;
    gap: 8px !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .regionBar .regionPills::-webkit-scrollbar{ display:none; }
  .regionBar .pill{
    white-space: nowrap;
    padding: 9px 12px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    border-color: rgba(255,255,255,.18) !important;
    background: rgba(255,255,255,.10) !important;
    color:#fff !important;
  }

  /* Prova/benefícios abaixo do hero: mais densidade */
  .heroBadges{
    gap: 8px !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }
  .heroBadges .badge{
    white-space: nowrap;
    font-size: 12px !important;
    padding: 9px 12px !important;
    border-radius: 999px !important;
  }

  /* Espaço para o CTA fixo não cobrir conteúdo */
  body{ padding-bottom: 92px; }

  /* WhatsApp floater: vira barra “Home Angels style” no mobile */
  .whatsFloater{
    left: 12px !important;
    right: 12px !important;
    bottom: calc(12px + env(safe-area-inset-bottom));
    width: auto !important;
    border-radius: 18px !important;
    padding: 12px 14px !important;
    display:flex !important;
    gap: 12px !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 22px 75px rgba(0,0,0,.20) !important;
  }
  .whatsFloater .label{ font-size: 14px !important; }
  .whatsFloater .sub{ font-size: 12px !important; opacity: .92; }
}


/* ===== V21: Mobile “ultra pro” abaixo do hero (sem mexer no desktop) ===== */
@media (max-width: 720px){
  /* ritmo: menos “quebra” entre blocos */
  section{ padding: 18px 0 !important; }
  .container{ padding-left: 14px !important; padding-right: 14px !important; }
  .reveal{ transform:none !important; opacity:1 !important; } /* evita “pulos” perceptíveis no mobile */

  /* esconde rótulos “Scroll X” pra ganhar densidade */
  section .container > .kicker{ display:none; }
  section .container.split > div > .kicker{ display:none; } /* quando o kicker está dentro do 2º bloco */

  /* seção split vira “story card” */
  .split{
    gap: 10px !important;
  }
  .split > div{
    background: rgba(255,255,255,.86);
    border: 1px solid rgba(109,40,217,.14);
    border-radius: 22px;
    padding: 14px;
    box-shadow: 0 24px 70px rgba(11,18,32,.08);
  }
  .split > div:first-child{ 
    background: transparent; 
    border: 0; 
    padding: 0; 
    box-shadow:none;
  }

  /* imagens integradas: altura consistente, sem “corte estranho” e sem sobrar branco */
  .artPanel{
    height: 210px !important;
    border-radius: 22px !important;
    overflow:hidden;
    box-shadow: 0 26px 85px rgba(11,18,32,.12);
  }
  .artPanel img{
    width:100%;
    height:100%;
    object-fit: cover;
    object-position: center;
    transform: none !important;
  }
  .artInset{
    bottom: 12px !important;
    left: 12px !important;
    right: auto !important;
    font-size: 12px !important;
    padding: 8px 10px !important;
    border-radius: 999px !important;
    background: rgba(0,0,0,.40) !important;
    border: 1px solid rgba(255,255,255,.18) !important;
  }

  /* tipografia mais “mobile-first” */
  h2{ font-size: 24px !important; letter-spacing: -0.3px; }
  .lead{ font-size: 14px !important; line-height: 1.5 !important; }

  /* listas e checklists: mais compactos, mais “tocáveis” */
  .list li{
    padding: 12px 12px !important;
    border-radius: 16px !important;
  }
  .checkList label{
    padding: 12px 12px !important;
    border-radius: 16px !important;
    gap: 10px !important;
  }
  .checkList input{ transform: scale(1.05); }

  /* serviços/etapas: reduz aparência “monte de cards” */
  .tiles{ display:flex !important; flex-direction:column !important; gap: 10px !important; }
  .tile{
    border-radius: 20px !important;
    padding: 14px !important;
    box-shadow: 0 18px 55px rgba(11,18,32,.06) !important;
  }
  .tile .btn{ margin-top: 10px !important; }

  /* separadores: menos “oceano” */
  .divider{ margin: 16px 0 !important; opacity:.35; }

  /* CTA fixo já existe: adiciona respiro nas seções perto do rodapé */
  .whatsFloater{ z-index: 80; }
}

/* ===== V23: vídeo apenas no mobile (vertical) ===== */
.mobileOnly{ display:none; }
.desktopOnly{ display:block; }
@media (max-width: 720px){
  .mobileOnly{ display:block; }
  .desktopOnly{ display:none; }
  .videoPanel{ margin-top: 14px; display:grid; justify-items:center; }
  .videoFrame.portrait{
    width: min(360px, 100%);
    aspect-ratio: 9 / 16;
    border-radius: 22px;
    overflow:hidden;
    position: relative;
    border: 1px solid rgba(255,255,255,.18);
    box-shadow: 0 22px 70px rgba(11,18,32,.16);
    background: rgba(0,0,0,.12);
  }
  .videoFrame.portrait .povVideo{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display:block;
    transform: scale(1.02);
  }
  .videoFrame.portrait::after{
    content:"";
    position:absolute; inset:0;
    background: linear-gradient(180deg, rgba(0,0,0,.06) 0%, rgba(0,0,0,.40) 68%, rgba(0,0,0,.58) 100%);
    pointer-events:none;
  }
  .videoMute{
    position:absolute; top: 12px; right: 12px;
    z-index: 3;
    width: 44px; height: 44px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(255,255,255,.12);
    color: #fff;
    font-size: 18px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  .videoCaption{
    position:absolute; left: 12px; right: 12px; bottom: 12px;
    z-index: 3;
    padding: 12px 12px 10px;
    border-radius: 18px;
    background: rgba(109,40,217,.62);
    border: 1px solid rgba(255,255,255,.16);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color:#fff;
  }
  .videoCaption .tag{
    display:inline-flex;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.18);
    font-size: 12px;
    margin-bottom: 8px;
  }
  .videoCaption strong{ display:block; font-size: 16px; line-height: 1.15; margin-bottom: 2px; }
  .videoCaption .captionSub{ display:block; font-size: 12.5px; opacity: .95; }
}


/* ===== V24: Mobile hero mais compacto + vídeo "peek" ===== */
@media (max-width: 720px){
  /* compacta o hero sem mexer no desktop */
  .hero{
    padding-top: 14px !important;
    padding-bottom: 18px !important;
  }
  .hero h1{ font-size: 34px !important; line-height: 1.02 !important; }
  .hero .lead{ font-size: 14px !important; }
  .hero .ctaRow .btn{ padding: 12px 14px !important; border-radius: 14px !important; }
  .hero .ctaRow{ gap: 10px !important; }
  .hero .servicePills{ margin-top: 10px !important; }
  /* vídeo começa a aparecer ainda no 1º scroll */
  .mobilePeekWrap{
    margin-top: -86px; /* deixa ~20% do vídeo "subindo" no final do 1º scroll */
    padding: 0 16px 10px;
  }
  .mobilePeekWrap .videoPanel{ margin-top: 0 !important; }
}

/* ===== Mobile hero video (V25) ===== */
@media (max-width: 860px){
  .hero{padding-top: 10px;}
  .heroMobile{margin: 0 auto 10px; max-width: 520px;}
  .heroMobileVideo{
    position: relative;
    border-radius: 26px;
    overflow: hidden;
    background: radial-gradient(1200px 600px at 20% 0%, rgba(255,255,255,.18), rgba(255,255,255,0) 60%),
                linear-gradient(180deg, rgba(20,10,40,.30), rgba(20,10,40,.50));
    box-shadow: 0 22px 60px rgba(20,10,40,.22);
  }
  .heroMobileVideo video.povVideo{
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 9 / 16;
    object-fit: cover;
    filter: saturate(1.05) contrast(1.02);
  }
  .heroMobileOverlay{
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 14px;
    padding: 14px 14px 12px;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(70,30,150,.10), rgba(70,30,150,.28));
    border: 1px solid rgba(255,255,255,.22);
    backdrop-filter: blur(8px);
  }
  .heroMobileEyebrow{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-weight: 700;
    font-size: 12px;
    opacity: .92;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(0,0,0,.18);
    border: 1px solid rgba(255,255,255,.18);
    margin-bottom: 8px;
  }
  .heroMobileTitle{
    font-size: 22px;
    line-height: 1.12;
    margin: 0 0 10px;
    letter-spacing: -0.4px;
  }
  .heroMobileCta{
    width: 100%;
    display: inline-flex;
    justify-content: center;
    padding: 14px 14px;
    border-radius: 14px;
  }
  .heroMobileTrust{
    margin-top: 10px;
    font-size: 12px;
    opacity: .92;
  }
  /* mute button top-right, subtle */
  .heroMobileVideo .videoMute{
    position: absolute;
    right: 10px;
    top: 10px;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(0,0,0,.22);
    backdrop-filter: blur(6px);
  }
}


@media (max-width:720px){
  .heroBottom{padding-top:10px;}
  .hbBox{padding:12px; overflow:hidden;}
  .hbMobileCarousel{display:block; margin-top:12px;}
  .hbMCTrack{display:flex; width:200%; transition:transform .35s ease; will-change:transform;}
  .hbMCSlide{flex:0 0 100%; padding-right:12px; box-sizing:border-box;}
  .hbCard{
    background: rgba(255,255,255,.82);
    border: 1px solid rgba(110,65,210,.18);
    border-radius: 18px;
    padding: 14px;
    box-shadow: 0 12px 30px rgba(34,16,76,.10);
    backdrop-filter: blur(10px);
  }
  .hbCardTop{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px;}
  .hbCardTitle{font-weight:800; font-size:14px; color:#1f103d;}
  .hbCardPill{
    font-size:12px; font-weight:700;
    padding:7px 10px; border-radius:999px;
    background: rgba(110,65,210,.10);
    color:#4d2bb7;
    white-space:nowrap;
  }
  .hbMapPreview{
    display:flex; align-items:center; gap:10px;
    padding:12px; border-radius:16px;
    background: linear-gradient(135deg, rgba(110,65,210,.10), rgba(110,65,210,.03));
    border: 1px solid rgba(110,65,210,.18);
    text-decoration:none;
  }
  .hbMapPin{font-size:18px}
  .hbMapText strong{display:block; font-size:13px; color:#1f103d;}
  .hbMapText span{display:block; font-size:12px; color:#5b4d7c; margin-top:2px;}
  .hbCardCtas{display:flex; gap:10px; margin-top:12px;}
  .btnSm{padding:10px 12px; font-size:12px;}
  .hbStars{font-size:12px; color:#f6b73c; letter-spacing:1px;}
  .hbReviewSlider{margin-top:8px;}
  .hbReviewTrack{display:flex; width:300%; transition:transform .35s ease;}
  .hbReview{flex:0 0 100%;}
  .hbQuote{font-weight:700; font-size:13px; color:#1f103d; line-height:1.35;}
  .hbMeta{font-size:12px; color:#5b4d7c; margin-top:6px; font-weight:700;}
  .hbReviewDots{display:flex; gap:6px; margin-top:10px;}
  .hbReviewDots .dot{width:8px; height:8px; border-radius:999px; background: rgba(110,65,210,.22);}
  .hbReviewDots .dot.isActive{background: rgba(110,65,210,.95);}
  .hbMCDots{display:flex; gap:8px; justify-content:center; margin-top:10px;}
  .hbDot{width:30px; height:8px; border-radius:999px; border:0; background: rgba(110,65,210,.22);}
  .hbDot.isActive{background: rgba(110,65,210,.95);}
}



/* ---------------------------
   Visibility helpers
--------------------------- */
.desktopOnly{display:block}
.mobileOnly{display:none}
@media (max-width: 900px){
  .desktopOnly{display:none !important}
  .mobileOnly{display:block !important}
}

/* ---------------------------
   Desktop hero bottom (map + reviews)
--------------------------- */
.hbGrid{display:grid;grid-template-columns:1.4fr 1fr;gap:18px;align-items:stretch}
.hbHead{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;margin-bottom:12px}
.hbTitle{font-weight:800}
.hbSub{font-size:13px;opacity:.8;margin-top:2px}
.hbLink,.miniLink{font-size:13px;font-weight:700;text-decoration:none}
.hbMap iframe{width:100%;height:260px;border:0;border-radius:14px}
.hbFoot{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.hbStars{font-weight:900;letter-spacing:1px}
.miniCarousel{position:relative}
.miniTrack{display:flex;overflow:hidden;scroll-behavior:smooth;border-radius:14px}
.miniTrack img{width:100%;flex:0 0 100%;height:260px;object-fit:cover}
.miniNav{position:absolute;top:50%;transform:translateY(-50%);width:38px;height:38px;border-radius:999px;border:0;background:rgba(255,255,255,.9);box-shadow:0 10px 30px rgba(0,0,0,.15);cursor:pointer;font-size:22px;display:grid;place-items:center}
.miniPrev{left:10px}
.miniNext{right:10px}
.miniDots{display:flex;gap:8px;justify-content:center;margin-top:10px}
.miniDots button{width:8px;height:8px;border-radius:999px;border:0;background:rgba(0,0,0,.18);cursor:pointer}
.miniDots button.isActive{background:rgba(0,0,0,.55)}

/* ---------------------------
   Mobile: Scrolls 2-4 (PDF)
--------------------------- */
@media (max-width: 900px){
  .mCard{
    border-radius:20px;
    background:rgba(255,255,255,.82);
    border:1px solid rgba(0,0,0,.06);
    box-shadow:0 14px 40px rgba(25, 10, 60, .10);
    overflow:hidden;
    margin:14px 12px;
  }

  .mImageCta{position:relative}
  .mImageCta img{width:100%;height:420px;object-fit:cover;display:block;filter:saturate(1.05)}
  .mOverlay{
    position:absolute;inset:auto 0 0 0;
    padding:14px 14px 16px;
    background:linear-gradient(to top, rgba(21, 10, 50, .88), rgba(21,10,50,.12));
    color:#fff;
  }
  .mOverlay h2{font-size:22px;line-height:1.15;margin:6px 0 8px}
  .mOverlay p{font-size:14px;opacity:.92;margin:0 0 12px}
  .mKicker{display:inline-flex;gap:8px;align-items:center;font-size:12px;font-weight:800;letter-spacing:.2px;opacity:.95}
  .mBtns{display:flex;gap:10px;flex-wrap:wrap}
  .mBtns .btn{padding:12px 14px;border-radius:14px}

  .mPlan{padding:16px}
  .mPlan h2{font-size:22px;line-height:1.15;margin:8px 0 6px}
  .mPlan .muted{opacity:.78;margin:0 0 14px}
  .mField{margin-top:14px}
  .mLabel{font-size:13px;font-weight:800;opacity:.8;margin-bottom:8px}
  .seg{display:flex;gap:10px;flex-wrap:wrap}
  .segBtn{
    border:1px solid rgba(0,0,0,.08);
    background:rgba(255,255,255,.8);
    padding:10px 12px;border-radius:999px;
    font-weight:800;font-size:13px;
  }
  .segBtn.isActive{background:rgba(92, 42, 255, .14);border-color:rgba(92,42,255,.35)}
  .chips{display:flex;gap:10px;flex-wrap:wrap}
  .chip{
    border:1px solid rgba(0,0,0,.08);
    background:rgba(255,255,255,.8);
    padding:10px 12px;border-radius:999px;
    font-weight:800;font-size:13px;
  }
  .chip.isActive{background:rgba(0, 200, 120, .12);border-color:rgba(0,200,120,.35)}
  .btnFull{display:block;width:100%}
  .mHint{margin-top:10px;font-size:12px;opacity:.75;text-align:center}

  .mRowHead{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:16px 16px 0}
  .mRowHead h2{font-size:20px;line-height:1.15;margin:6px 0 0}
  .mSwipe{position:relative;padding:14px}
  .mSwipeTrack{display:flex;overflow:hidden;scroll-behavior:smooth;border-radius:16px}
  .mSwipeSlide{flex:0 0 100%}
  .mMapWrap iframe{width:100%;height:340px;border:0;border-radius:16px}
  .mSwipeFoot{margin-top:10px}
  .mReviewsTop{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:10px}
  .mStars{font-weight:900;letter-spacing:1px}
  .mSwipeDots{display:flex;gap:10px;justify-content:center;margin-top:12px}
  .mSwipeDots button{width:8px;height:8px;border-radius:999px;border:0;background:rgba(0,0,0,.18)}
  .mSwipeDots button.isActive{background:rgba(0,0,0,.55)}

  /* Prevent scroll break / image cuts behind floater */
  body{padding-bottom:110px}
}

@media (max-width: 900px){
  .heroMobileNavPills{
    display:flex;
    gap:10px;
    overflow:auto;
    padding:10px 2px 2px;
    margin-top:10px;
    -webkit-overflow-scrolling: touch;
  }
  .heroMobileNavPills a{
    flex:0 0 auto;
    text-decoration:none;
    font-weight:800;
    font-size:12px;
    padding:10px 12px;
    border-radius:999px;
    background:rgba(255,255,255,.16);
    border:1px solid rgba(255,255,255,.18);
    color:#fff;
    white-space:nowrap;
  }
}

/* =====================
   V30 – LP completa + mobile otimizado (sem mexer no desktop visual)
   ===================== */

/* reveal (desktop) */
.reveal{opacity:0; transform:translateY(10px); transition:opacity .6s ease, transform .6s ease;}
.reveal.is-in{opacity:1; transform:none;}

/* layout base para novas seções */
.section{padding:56px 0;}
.sectionHeader{max-width:980px; margin:0 auto 18px; padding:0 18px;}
.sectionHeader h2{font-size:32px; line-height:1.15; margin:0 0 10px;}
.sectionHeader p{margin:0; color:rgba(18,24,40,.78); font-size:16px;}

.grid2{display:grid; grid-template-columns: 1.25fr .85fr; gap:18px; align-items:stretch; max-width:1120px; margin:0 auto; padding:0 18px;}
.card{background:rgba(255,255,255,.72); border:1px solid rgba(124,58,237,.14); box-shadow:0 12px 28px rgba(17,24,39,.08); border-radius:18px; overflow:hidden;}
.cardPad{padding:16px;}

.mapFrame{width:100%; height:340px; border:0; display:block;}

.badgeRow{display:flex; flex-wrap:wrap; gap:10px;}
.badge{display:inline-flex; align-items:center; gap:8px; padding:10px 12px; border-radius:999px; background:rgba(124,58,237,.10); border:1px solid rgba(124,58,237,.16); font-weight:800; font-size:13px; color:#2b145a;}

.btnRow{display:flex; gap:10px; flex-wrap:wrap;}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; text-decoration:none; font-weight:900; border-radius:999px; padding:12px 16px; border:1px solid rgba(124,58,237,.28);}
.btnPrimary{background:linear-gradient(135deg,#6d28d9,#7c3aed); color:#fff;}
.btnGhost{background:rgba(255,255,255,.75); color:#371a78;}
.btnSmall{padding:10px 14px; font-size:13px;}

.kpiGrid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; max-width:1120px; margin:0 auto; padding:0 18px;}
.kpi{border-radius:18px; background:rgba(255,255,255,.7); border:1px solid rgba(124,58,237,.12); padding:16px;}
.kpi strong{display:block; font-size:22px;}
.kpi span{display:block; color:rgba(18,24,40,.7); margin-top:4px;}

/* carousel simples */
.js-carousel{position:relative;}
.js-carousel .cTrack{display:flex; transition:transform .5s ease; will-change:transform;}
.js-carousel .cItem{min-width:100%;}
.js-carousel .cDots{position:absolute; left:50%; bottom:10px; transform:translateX(-50%); display:flex; gap:8px;}
.js-carousel .cDot{width:10px; height:10px; border-radius:999px; background:rgba(255,255,255,.55); border:1px solid rgba(255,255,255,.45);}
.js-carousel .cDot.is-on{background:#7c3aed; border-color:rgba(124,58,237,.4)}

/* HERO MOBILE (vídeo + texto curto) */
.mobileHero{padding:0 0 12px;}
.mobileHeroWrap{max-width:680px; margin:0 auto; padding:14px 14px 0;}
.mobileHeroVideo{
  position:relative;
  border-radius:22px;
  overflow:hidden;
  box-shadow:0 18px 40px rgba(17,24,39,.18);
  border:1px solid rgba(124,58,237,.22);
}
.mobileHeroVideo video{width:100%; height:520px; object-fit:cover; display:block; background:#111;}
.mobileHeroOverlay{position:absolute; left:12px; right:12px; bottom:12px; padding:12px; border-radius:18px; background:rgba(124,58,237,.80); backdrop-filter: blur(8px); border:1px solid rgba(255,255,255,.22); color:#fff;}
.mobileHeroOverlay h1{margin:0 0 6px; font-size:18px; line-height:1.2; font-weight:900;}
.mobileHeroOverlay p{margin:0 0 10px; font-size:13px; opacity:.95;}
.mobileHeroActions{display:flex; gap:10px;}
.mobileHeroActions a{flex:1;}

/* MOBILE SECTIONS */
.mobileOnlySection{max-width:680px; margin:0 auto; padding:0 14px;}
.mobileTitle{font-size:26px; line-height:1.12; margin:0 0 10px;}
.mobileSub{margin:0; color:rgba(18,24,40,.76);}
.mobileStack{display:flex; flex-direction:column; gap:12px;}
.mobileCard{border-radius:18px; background:rgba(255,255,255,.72); border:1px solid rgba(124,58,237,.14); padding:14px; box-shadow:0 10px 26px rgba(17,24,39,.08)}
.mobilePills{display:flex; gap:10px; overflow:auto; padding-bottom:4px; -webkit-overflow-scrolling:touch;}
.mobilePills button{flex:0 0 auto; border:1px solid rgba(124,58,237,.2); background:rgba(255,255,255,.76); color:#371a78; border-radius:999px; padding:10px 12px; font-weight:900;}

/* sticky whatsapp */
.waFloat{position:fixed; right:14px; bottom:14px; z-index:50; display:flex;}
.waFloat a{display:inline-flex; align-items:center; gap:10px; padding:14px 16px; border-radius:999px; background:linear-gradient(135deg,#16a34a,#22c55e); color:#fff; text-decoration:none; font-weight:900; box-shadow:0 12px 28px rgba(0,0,0,.24)}
.waFloat small{display:block; font-weight:700; opacity:.92; margin-top:2px;}

/* responsive adjustments */
@media (max-width: 980px){
  .grid2{grid-template-columns:1fr;}
  .kpiGrid{grid-template-columns:1fr;}
}

/* mobile: evita "faixa"/vazios estranhos */
@media (max-width: 760px){
  .section{padding:34px 0;}
  .sectionHeader h2{font-size:24px;}
  .mapFrame{height:300px;}
}
