/* =========================
   Reset + Tokens
   ========================= */
* { box-sizing: border-box; margin: 0; padding: 0; }
:root{
  --purple:#6040af;
  --purple-2:#6B3FA0;
  --green:#66CC33;
  --text:#222;
  --muted:#6b7280;
  --bg:#ffffff;
  --bg-soft:#f6f7fb;
  --radius:16px;
  --shadow:0 10px 30px rgba(0,0,0,.08);
  --hdr-h:64px; /* altura do header (mobile) */
}

html { scroll-behavior: smooth; }
body{
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.55;
  overflow-wrap: anywhere;
}

/* Ajuda a evitar sobreposição do header fixo */
:root { scroll-padding-top: var(--hdr-h); }

img{ max-width:100%; height:auto; display:block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

.container{
  width: 92%;
  max-width: 1120px;
  margin: 0 auto;
}

/* =========================
   Botões
   ========================= */
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.1rem 1.2rem; border-radius: 9px;
  font-weight: 700; border: 2px solid transparent;
  transition: .2s ease; text-align:center;
}
.btn__icon{ font-size:1.2rem; }
.btn--primary{ background:var(--green); color:#fff; }
.btn--primary:hover{ filter: brightness(.95); }
.btn--ghost{ background:#fff; color:var(--purple); border-color:var(--purple); }
.btn--ghost:hover{ background: var(--purple); color:#fff; }
.btn--nav{ background: var(--green); color:#fff; padding:.6rem 1rem; }
.btn--drawer{ background: var(--green); color:#fff; margin: .6rem 1rem; }

/* Badge Google Play (leve) */
.badge.gp{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.7rem 1rem; border-radius:12px; border:1px solid #e5e7eb;
  background:#fff; font-weight:600;
}
.badge.gp svg{ width:22px; height:22px; }

/* =========================
   Header fixo
   ========================= */
.hdr{
  position: sticky; top:0; z-index: 50;
  background: #fff; border-bottom: 3px solid var(--purple-2);
  min-height: var(--hdr-h);
}
.hdr--inner{ border-bottom-color: var(--purple); }
.hdr__wrap{
  display:flex; align-items:center; justify-content:space-between;
  padding:.6rem 0;
}
.hdr__brand img{
  height:44px; border-radius:12px; padding:3px; background:#f3f4f6;
}
.hdr__menu{
  font-size:1.6rem; background:none; border:none; display:inline-block; cursor:pointer;
  padding:.25rem .4rem; border-radius:8px;
}
.hdr__nav{ display:none; align-items:center; gap:1.25rem; }
.nav__list{ display:flex; gap:1rem; }
.nav__list a{ font-weight:600; color:#333; }
.nav__list a:hover{ opacity:.7; }

/* Drawer (menu mobile) */
.drawer{
  display:none; position: fixed; inset: var(--hdr-h) 0 auto 0;
  background:#fff; border-bottom:3px solid var(--purple);
  padding: .6rem 0;
}
.drawer.show{ display:block; }
.drawer__list{ display:flex; flex-direction:column; }
.drawer__link{ padding:.9rem 1rem; font-weight:600; color:#333; }

/* =========================
   Hero
   ========================= */
.hero{
  background: radial-gradient(1200px 600px at 20% -10%, #7a5ad1, var(--purple)) no-repeat, var(--purple);
  color:#fff; padding: 3.8rem 0 2rem;
}
.hero__grid{ display:grid; gap:1.6rem; grid-template-columns: 1fr; }
.hero__text h1{
  font-size: clamp(1.8rem, 5.6vw, 2.6rem);
  line-height:1.2; margin-bottom: .7rem; font-weight: 900;
}
.hero__text p{ color:#eef; margin-bottom: 1rem; }
.hl{ color:#a4ff84; }
.store-badges{ display:flex; gap:.7rem; align-items:center; flex-wrap:wrap; margin: .6rem 0 1rem; }
.trust{ display:flex; gap:1rem; flex-wrap:wrap; color:#e7e7ff; font-size:.95rem; }

.hero__card .card{
  background:#fff; color:#111; border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 1.2rem;
}
.card h3{ font-size:1.15rem; margin-bottom:.4rem; }
.card p{ color:#444; margin-bottom:.9rem; }
.steps{ padding-left:1.1rem; display:grid; gap:.4rem; }

/* Anchor offset para todas as seções quando ancoradas */
section { scroll-margin-top: calc(var(--hdr-h) + 10px); }

/* =========================
   About / Features
   ========================= */
.about{ padding: 2.2rem 0; }
.about h2{ text-align:center; font-size:clamp(1.4rem, 4.4vw, 1.8rem); margin-bottom:.4rem; }
.about p{ text-align:center; color:var(--muted); margin-bottom:1.2rem; }
.features{
  display:grid; gap:.9rem; grid-template-columns: 1fr 1fr;
}
.feat{
  background: #fff; border:1px solid #eef; border-radius:14px; padding: 1rem;
  box-shadow: var(--shadow);
}
.feat__icon{ font-size:1.4rem; }

/* =========================
   Vantagens
   ========================= */
.vantagens{ background: var(--bg-soft); padding: 2.2rem 0; }
.vantagens h2{ text-align:center; font-size:clamp(1.2rem,4.2vw,1.6rem); margin-bottom:.3rem; }
.vantagens > .container > p{ text-align:center; color:var(--muted); margin-bottom:1.3rem; }
.vantagens-grid{
  display:grid; gap:1rem; grid-template-columns: 1fr;
}
.vantagem-item{
  background:#fff; border-radius:16px; padding:1.2rem; box-shadow: var(--shadow);
  text-align:center;
}
.icone-vantagem svg{ width:56px; height:56px; fill:#4CAF50; margin:0 auto .6rem; }

/* =========================
   Instruções (vídeo)
   ========================= */
.instrucoes{ padding: 2.2rem 0; }
.instrucoes h2{ text-align:center; font-size:clamp(1.2rem,4.2vw,1.6rem); margin-bottom:.5rem; }
.instrucoes p{ text-align:center; color:var(--muted); margin-bottom:1.2rem; }
/* ===== Vídeo responsivo sem corte (portrait/landscape) ===== */
/* ===== Vídeo responsivo (sem cortes) ===== */
.video-wrap{
  width:100%;
  max-width:720px;
  margin:0 auto;
  position:relative;
  background:#000;
  border-radius:14px;
  overflow:hidden;
  box-shadow: var(--shadow);
}

/* Mostra tudo, sem crop */
.video-wrap video{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  display:block;
}

/* Mobile retrato: força 9:16 e limita altura à viewport */
@media (orientation: portrait) {
  .video-wrap{
    aspect-ratio: 9/16;
    max-height: calc(100vh - var(--hdr-h) - 20px);
  }
}

/* Mobile paisagem: usa 16:9 para não ficar gigante lateralmente */
@media (orientation: landscape) and (max-width: 960px){
  .video-wrap{ aspect-ratio: 16/9; }
}

/* Desktop: mostra como “telefone” (ajuste a largura se quiser) */
@media (min-width: 960px){
  .video-wrap{ max-width: 420px; aspect-ratio: 9/16; }
}

/* Fallback se precisarmos rotacionar manualmente (ver JS) */
.video-rotate-90{
  transform: rotate(90deg);
  transform-origin: center center;
  /* ao girar, garantimos que ocupe bem o espaço do wrapper */
  width: 100vh !important;
  height: 100vw !important;
}


/* =========================
   Social Proof
   ========================= */
.social-proof{ background:linear-gradient(180deg,#fafbff, #fff); padding: 2.2rem 0; }
.social-proof h2{ text-align:center; margin-bottom: 1rem; }
.quotes{ display:grid; gap:1rem; }
.quotes blockquote{
  background:#fff; border-left:6px solid var(--green); padding:1rem; border-radius: 12px;
  box-shadow: var(--shadow);
}
.quotes cite{ display:block; color:var(--muted); margin-top:.4rem; }

/* =========================
   FAQ
   ========================= */
.faq{ padding: 2.2rem 0; }
.faq h2{ text-align:center; margin-bottom: 1rem; }
.accordion details{
  background:#fff; border:1px solid #eee; border-radius:12px; padding:.9rem 1rem; margin:.6rem 0;
  box-shadow: var(--shadow);
}
.accordion summary{
  font-weight:700; cursor:pointer; list-style:none; outline:none;
}
.accordion p{ margin-top:.6rem; color:#444; }

/* =========================
   Docs (Termos/Exclusão)
   ========================= */
.doc-hero{
  background: radial-gradient(1000px 400px at 15% -10%, #7a5ad1, var(--purple));
  color:#fff; padding: 2.2rem 0;
}
.doc-hero h1{ font-size:clamp(1.4rem,4.6vw,1.9rem); }
.doc-hero .doc-date{ opacity:.9; margin-top:.4rem; }

.doc{ background:#f9fafb; padding: 1.8rem 0; }
.doc__content{
  background:#fff; border-radius: 18px; box-shadow: var(--shadow); padding: 1.2rem 1rem;
}
.doc__content h2{ color: var(--purple); margin: 1rem 0 .4rem; }
.doc__content p, .doc__content ul, .doc__content ol{ margin:.6rem 0; color:#333; }

/* Imagens de passo a passo (controladas para não estourar) */
.steps-img{ display:grid; gap: .9rem; }
.steps-img li{ margin:.4rem 0; }
.steps-img img{
  width: clamp(200px, 42vw, 320px);
  height: auto;
  border:1px solid #e5e7eb; border-radius:12px; margin:.5rem 0;
  box-shadow: var(--shadow);
}

/* =========================
   Footer
   ========================= */
.ftr{ background: var(--purple-2); color:#fff; padding: 1.4rem 0; margin-top: 1rem; }
.ftr__grid{ display:grid; gap:5rem; grid-template-columns: 1fr; align-items:center; }
.ftr__brand img{ height:42px; border-radius:10px; background:#fff; padding:3px; margin-bottom:.4rem; }
.ftr__links{ display:flex; gap:1rem; flex-wrap:wrap; }
.ftr__links a{ color:#fff; }
.ftr__links a:hover{ text-decoration:underline; }
.ftr__cta{ text-align:left; }

/* =========================
   Sticky CTA (mobile)
   ========================= */
.sticky-cta{
  position: sticky; 
  bottom:0; 
  z-index:60; 
  background: rgba(228, 226, 226, 0.92);
  backdrop-filter: blur(6px); 
  border-top:1px solid #eee; 
  padding:.5rem;
  display:flex; 
  justify-content:center;
}

/* =========================
   Responsivo desktop
   ========================= */
@media (min-width: 960px){
  :root{ --hdr-h:72px; }
  .hdr__nav{ display:flex; }
  .hdr__menu{ display:none; }
  .drawer{ display:none !important; }

  .hero__grid{ grid-template-columns: 1.1fr .9fr; align-items: center; }
  .features{ grid-template-columns: repeat(4, 1fr); }
  .vantagens-grid{ grid-template-columns: repeat(4, 1fr); }
  .quotes{ grid-template-columns: repeat(3, 1fr); }
  .ftr__grid{ grid-template-columns: 1.2fr 1fr auto; }
}

/* Trust list (versão pro com SVG) */
.trust {
  display: flex;
  gap: .9rem;
  flex-wrap: wrap;
  font-size: .95rem;
  color: #e7e7ff; /* cor no hero roxo */
}

.trust--pro {
  color: #eef; /* texto leve sobre fundo escuro */
}

.trust__item {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .4rem .7rem;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 999px;
  backdrop-filter: blur(2px);
  line-height: 1;
}

.trust__icon {
  display:inline-block;
  flex: 0 0 auto;
  opacity: .95;
}

/* Em fundos claros (se quiser usar a trust list fora do hero) */
.theme-light .trust__item {
  background: #fff;
  border-color: #e5e7eb;
  color: #374151;
}


/* ===== Badge oficial Google Play (PNG) ===== */
.store-badges{
  display:flex; 
  align-items:center; 
  flex-wrap:wrap; 
  gap:.8rem;
  border-radius:25px;
}

/* wrapper do link do badge */
.gp-badge{
  --h:56px;                 /* altura padrão no hero */
  display:inline-flex; align-items:center;
  line-height:1;
  margin: calc(var(--h)/4) 0; /* clear space recomendado: 1/4 da altura */
  border-radius:25px;
}

.gp-badge img{
  display:block;
  height: var(--h);
  width: auto;  
  border-radius:12px;            /* mantém proporção oficial */
}

/* foco acessível */
.gp-badge:focus-visible{
  outline:3px solid #a3e635;
  outline-offset:3px;
  border-radius:25px;
}

/* variações rápidas */
.gp-badge--sm{ --h:44px; }
.gp-badge--lg{ --h:64px; }

@media (max-width:360px){
  .gp-badge{ --h:48px; }
}


/* ===== Smartbar fixa (2 CTAs) ===== */
.smartbar{
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: 120;
  background: #fff;
  border-top: 1px solid #e5e7eb;
  box-shadow: 0 -6px 18px rgba(0,0,0,.25);
  padding: .5rem .6rem calc(.5rem + env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .6rem;
}

/* botões */
.smartbar__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  border-radius: 12px;
  padding: .75rem .8rem;
  font-weight: 800;
  font-size: .95rem;
  line-height: 1;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

/* WhatsApp: verde */
.smartbar__btn--whats {
  grid-column: 1 / -1;  /* ocupa todas as colunas do grid */
}

/* App: roxo da marca */
.smartbar__btn--app{
  background: linear-gradient(180deg,#6040af,#55339f);
}

/* ícones */
.smartbar__icon{
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
}
.smartbar__icon--app{
  width: 24px; height: 24px;
  object-fit: contain;
  border-radius: 4px; /* deixa sua logo mais “app-like” sem caixa exagerada */
  background: transparent;
}

/* micro-interações */
.smartbar__btn:hover{ transform: translateY(-1px); box-shadow: 0 10px 22px rgba(0,0,0,.16); filter: brightness(1.03); }
.smartbar__btn:active{ transform: translateY(0); filter: brightness(.98); }

/* tipografia */
.smartbar__label{ white-space: nowrap; }

/* reservar espaço no conteúdo para a barra */
.has-smartbar{ padding-bottom: 88px; } /* ajuste fino se quiser */

/* se já houver o sticky antigo, esconda-o para não duplicar CTA */
.sticky-cta{ display: none !important; }

/* ===== Correções de overflow da Smartbar (mobile) ===== */
.smartbar{
  inset-inline: 0;           /* garante 0 nas laterais direita/esquerda */
  width: 100%;
  max-width: 100vw;          /* nunca maior que a viewport */
  box-sizing: border-box;
}

.smartbar__btn{
  min-width: 0;              /* permite encolher dentro do grid */
}

.smartbar__label{
  overflow: hidden;          /* evita “empurrar” a largura */
  text-overflow: ellipsis;   /* … se faltar espaço */
  white-space: nowrap;
}

/* Telas bem estreitas: deixa tudo mais compacto */
@media (max-width: 380px){
  .smartbar{
    gap: .4rem;
    padding: .45rem .45rem calc(.45rem + env(safe-area-inset-bottom));
  }
  .smartbar__btn{
    padding: .6rem .6rem;
    gap: .45rem;
  }
  .smartbar__icon{ width: 20px; height: 20px; }
  .smartbar__label{ font-size: .9rem; }
}



/* ===== Desktop: Smartbar reduzida e centralizada (apenas desktop) ===== */
/* ===== Desktop/tablet: Smartbar longa com botões ocupando toda a barra ===== */
/* ===== Desktop/tablet: Smartbar longa com botões ocupando toda a barra ===== */
@media (min-width: 768px){
  .smartbar{
    left: 50%;
    transform: translateX(-50%);
    width: min(1120px, 96vw);     /* barra mais longa */
    max-width: 96vw;
    border-radius: 14px 14px 0 0; /* 👈 radius só embaixo */
    padding: .3rem .6rem;         
    background: #fff;
    box-shadow: 0 -6px 16px rgba(0,0,0,.22);

    display: grid;
    grid-template-columns: 1fr 1fr;  /* cada botão ocupa metade */
    gap: .6rem;
  }

  .smartbar__btn{
    width: 100%;
    justify-content: center;
    padding: .5rem .9rem;
    font-size: .95rem;
    border-radius: 10px;
    gap: .5rem;
    box-shadow: none;
  }

  .smartbar__icon{
    width: 20px;
    height: 20px;
  }

  .smartbar__label{
    font-size: .95rem;
  }
}


/* === Fix: Smartbar com 1 botão visível e full-width === */
.smartbar{
  display: grid !important;
  grid-template-columns: 1fr !important; /* força 1 coluna sempre */
}

.smartbar__btn{
  width: 100%;
  justify-content: center;
}

/* Botão WhatsApp ocupando toda a barra e com fundo verde */
.smartbar__btn--whats{
  grid-column: 1 / -1 !important;
  background: #25D366 !important; /* verde WhatsApp (ou use var(--green)) */
  color: #fff !important;
}

/* Garante que o ícone fique branco (o SVG veio com fill #fff no HTML; forçamos via CSS) */
.smartbar__btn--whats .smartbar__icon path{
  fill: #fff !important;
}

/* Desktop/tablet: barra centralizada com um único botão */
@media (min-width: 768px){
  .smartbar{
    left: 50%;
    transform: translateX(-50%);
    width: min(1120px, 96vw);
    max-width: 96vw;
    border-radius: 14px 14px 0 0;
    grid-template-columns: 1fr !important;
  }
}