/* ===================== Base ===================== */
:root{
  --roxo:#f5365c;        /* roxo principal */
  --roxo-escuro:#d61f45;
  --roxo-claro:#a78bfa;
  --rosa:#ec4899;
  --fundo:#fff6f7;       /* lilás bem claro */
  --texto:#1f1830;
  --cinza:#6b6580;
  --card:#ffffff;
  --borda:#f6dde3;
  --raio:18px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:hidden}
body{
  font-family:'Poppins',system-ui,sans-serif;
  color:var(--texto);
  background:var(--fundo);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;        /* corta o "vão" lateral no celular */
  max-width:100%;
}
em{font-style:normal;color:var(--roxo)}
a{text-decoration:none;color:inherit}
.stars{color:#f5b301;letter-spacing:2px}

/* ===================== Botões ===================== */
.btn{
  display:inline-block;border:none;cursor:pointer;font-family:inherit;
  font-weight:600;font-size:1rem;padding:14px 26px;border-radius:14px;
  transition:transform .15s ease,box-shadow .15s ease,background .15s ease;
}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--roxo);color:#fff;box-shadow:0 10px 24px rgba(245,54,92,.35)}
.btn-primary:hover{background:var(--roxo-escuro)}
.btn-lg{padding:18px 34px;font-size:1.1rem}
.btn-ghost{background:#fff;color:var(--roxo);border:2px solid var(--borda)}
.btn-ghost:hover{border-color:var(--roxo-claro)}
.btn-white{background:#fff;color:var(--roxo)}

/* ===================== Topbar + Nav ===================== */
.topbar{
  background:linear-gradient(90deg,var(--roxo),var(--roxo-escuro));
  color:#fff;text-align:center;font-size:.86rem;font-weight:500;
  padding:10px 16px;
}
.nav{
  position:sticky;top:0;z-index:50;background:rgba(246,244,251,.9);
  backdrop-filter:blur(10px);
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 6vw;border-bottom:1px solid var(--borda);
}
.brand{font-weight:800;font-size:1.25rem;display:flex;align-items:center;gap:8px}
.brand-logo{width:34px;height:34px;vertical-align:middle}
.footer-brand .brand-logo{width:40px;height:40px}
.nav-links{display:flex;gap:28px;font-weight:500;color:var(--cinza)}
.nav-links a:hover{color:var(--roxo)}

/* ===================== Hero ===================== */
.hero{
  display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center;
  max-width:1200px;margin:0 auto;padding:60px 6vw 40px;
}
.pill{
  display:inline-block;background:#ede9fe;color:var(--roxo-escuro);
  font-weight:600;font-size:.85rem;padding:8px 16px;border-radius:999px;margin-bottom:22px;
}
.hero h1{font-size:clamp(2.4rem,6vw,4rem);font-weight:800;line-height:1.05}
.hero h1 em{font-family:'Caveat',cursive;font-size:1.15em;font-weight:600}
.hero-sub{color:var(--cinza);font-size:1.1rem;margin:22px 0 30px;max-width:520px}
.hero-review{margin-top:34px;max-width:460px}
.hero-review p{color:var(--cinza);font-size:.92rem;margin-top:6px}

/* Mockup de celulares em leque */
.hero-phones{position:relative;height:580px;display:flex;align-items:center;justify-content:center}
.hero-mascote{
  position:absolute;left:0;bottom:-4px;width:120px;height:120px;z-index:5;
  filter:drop-shadow(0 0 1px rgba(90,70,140,.5)) drop-shadow(0 12px 24px rgba(150,28,64,.3));
  animation:floaturso 3.5s ease-in-out infinite;
}
@keyframes floaturso{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-12px) rotate(2deg)}}

.phone{
  position:absolute;width:252px;height:516px;border-radius:40px;
  background:#0d0d12;box-shadow:0 30px 60px rgba(150,28,64,.3);
  border:11px solid #15151c;overflow:hidden;
}
/* meio: roda sozinho como um vídeo — 100% ilustrativo, não dá pra tocar/rolar */
.phone-center{z-index:3;transform:translateY(-6px)}
.phone-center iframe{width:100%;height:100%;border:0;display:block;pointer-events:none}
/* camada invisível por cima: engole todo toque/clique antes de chegar no iframe.
   Como é um simples <div> (não rolável), tocar no celular só rola a PÁGINA — nunca
   o conteúdo do celular. É o mesmo truque usado pra travar mapas/vídeos embutidos. */
.phone-center .phone-shield{position:absolute;inset:0;z-index:6;background:transparent;cursor:default}
.phone-left{z-index:1;transform:rotate(-12deg) translate(-110px,18px) scale(.9);background:#16161e;opacity:.92}
.phone-right{z-index:1;transform:rotate(11deg) translate(110px,18px) scale(.9);background:#1d3a5c;opacity:.92}

/* Telas fixas dos celulares de fundo */
.side-screen{position:absolute;inset:0;padding:26px 20px;overflow:hidden}
.side-dark{background:#15131f}
.side-blue{background:linear-gradient(180deg,#2f6aa0,#23547f)}
.side-tag{display:inline-block;background:#1db954;color:#fff;font-size:.72rem;font-weight:800;padding:4px 12px;border-radius:999px;transform:rotate(-4deg)}
.side-top{display:flex;align-items:center;justify-content:space-between;font-size:.66rem;color:rgba(255,255,255,.75);margin-bottom:16px}
.side-lyr{margin-top:22px;display:flex;flex-direction:column;gap:7px}
.side-lyr p{font-size:1.08rem;font-weight:700;line-height:1.2;color:rgba(255,255,255,.92);margin:0}
.side-dark .side-lyr p.accent{color:#5be584}
.side-blue .side-lyr p.accent{color:#fff}

/* Corações flutuando */
.heart{
  position:absolute;width:62px;height:62px;z-index:2;opacity:.9;
  background:no-repeat center/contain;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-8-5.3-8-11a4 4 0 0 1 8-1 4 4 0 0 1 8 1c0 5.7-8 11-8 11z' fill='%23a78bfa'/%3E%3C/svg%3E");
  filter:drop-shadow(0 8px 16px rgba(214,31,69,.25));
}
.heart-1{top:4%;left:2%;animation:floaturso 4s ease-in-out infinite}
.heart-2{top:18%;right:-2%;width:78px;height:78px;animation:floaturso 5s ease-in-out infinite}
.heart-3{bottom:14%;left:-4%;width:50px;height:50px;animation:floaturso 4.5s ease-in-out .5s infinite}
.heart-4{bottom:6%;right:4%;width:70px;height:70px;animation:floaturso 5.5s ease-in-out .3s infinite}

.float-card{
  position:absolute;top:-2%;left:50%;transform:translateX(-30%);z-index:4;background:#fff;
  border-radius:14px;padding:12px 18px;font-size:.8rem;color:var(--cinza);
  box-shadow:0 14px 34px rgba(150,28,64,.2);
}
.float-card strong{font-size:1.25rem;color:var(--texto)}

/* ===================== Seções ===================== */
.section{max-width:1100px;margin:0 auto;padding:80px 6vw;text-align:center}
.section-alt{background:#fff;max-width:none}
.section-alt > *{max-width:1100px;margin-left:auto;margin-right:auto}
.tag{
  display:inline-block;background:#ede9fe;color:var(--roxo-escuro);
  font-weight:600;font-size:.78rem;letter-spacing:.5px;padding:8px 16px;border-radius:999px;
}
.section h2{font-size:clamp(1.8rem,4vw,2.8rem);font-weight:800;margin:18px 0}
.section-sub{color:var(--cinza);max-width:620px;margin:0 auto 44px}

/* Steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.step{background:var(--card);border:1px solid var(--borda);border-radius:var(--raio);padding:36px 22px 26px;position:relative;text-align:center}
.step-num{position:absolute;top:-18px;left:50%;transform:translateX(-50%);width:38px;height:38px;border-radius:50%;background:var(--roxo);color:#fff;font-weight:700;display:grid;place-items:center}
.step h3{margin:8px 0 10px;font-size:1.1rem}
.step p{color:var(--cinza);font-size:.9rem}

/* Features */
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;text-align:left}
.feature{background:var(--card);border:1px solid var(--borda);border-radius:var(--raio);padding:30px}
.feature-ico{font-size:1.8rem;background:#ede9fe;width:54px;height:54px;border-radius:14px;display:grid;place-items:center;margin-bottom:16px}
.feature h3{margin-bottom:10px}
.feature p{color:var(--cinza);font-size:.92rem}
.feature-wide{grid-column:span 2}

/* Demo */
.demo-card{background:linear-gradient(135deg,var(--roxo),var(--roxo-claro));border-radius:26px;padding:64px 24px;color:#fff}
.demo-card h2{color:#fff;font-size:clamp(2rem,5vw,3.4rem)}
.demo-card .btn{margin-top:20px}
.demo-note{margin-top:14px;opacity:.85;font-size:.9rem}

/* Reviews */
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;text-align:left}
.review{background:var(--card);border:1px solid var(--borda);border-radius:var(--raio);padding:26px}
.review p{margin:12px 0;font-size:.95rem}
.review span{color:var(--cinza);font-weight:600;font-size:.88rem}

/* Planos */
.plans{display:grid;grid-template-columns:repeat(2,minmax(0,360px));gap:24px;justify-content:center}
.plan{background:var(--card);border:1px solid var(--borda);border-radius:22px;padding:32px;text-align:left;position:relative}
.plan-best{border:2px solid var(--roxo);box-shadow:0 16px 40px rgba(245,54,92,.18)}
.plan-tag{font-size:.7rem;font-weight:700;letter-spacing:.5px;background:#f0edfa;color:var(--cinza);padding:5px 12px;border-radius:999px}
.plan-tag-best{background:var(--roxo);color:#fff}
.plan h3{margin:18px 0 12px}
.plan-price{margin-bottom:6px}
.plan-price s{color:#b6b0c7;font-size:.9rem}
.plan-price strong{font-size:2.2rem;color:var(--roxo)}
.plan-desc{color:var(--cinza);font-size:.9rem;margin-bottom:18px}
.plan ul{list-style:none;margin-bottom:24px}
.plan li{padding:6px 0;color:var(--texto);font-size:.92rem}
.plan .btn{width:100%;text-align:center}
.plans-note{margin-top:24px;color:var(--cinza);font-size:.88rem}

/* FAQ */
.faq{max-width:760px;margin:0 auto;text-align:left}
.faq details{background:var(--card);border:1px solid var(--borda);border-radius:14px;padding:18px 22px;margin-bottom:12px;cursor:pointer}
.faq summary{font-weight:600;list-style:none;display:flex;justify-content:space-between;align-items:center}
.faq summary::after{content:'⌄';font-size:1.3rem;color:var(--roxo)}
.faq details[open] summary::after{content:'⌃'}
.faq details p{color:var(--cinza);margin-top:12px;font-size:.92rem}

/* Footer */
.footer{background:#15101f;color:#cfc8e0;padding:60px 6vw 40px;text-align:center}
.footer-brand{font-weight:800;font-size:1.3rem;color:#fff}
.footer-brand p{font-weight:400;font-size:.9rem;color:#9990ad;max-width:440px;margin:14px auto 0}
.footer-cta{margin:30px 0}
.footer-copy{color:#7c7390;font-size:.85rem;margin-top:20px}

/* ===================== Mobile ===================== */
@media(max-width:860px){
  .nav-links{display:none}
  .hero{grid-template-columns:1fr;text-align:center;padding-top:40px}
  .hero-sub,.hero-review{margin-left:auto;margin-right:auto}
  .hero-phones{height:520px;margin-top:20px}
  .steps,.features,.reviews{grid-template-columns:1fr}
  .feature-wide{grid-column:span 1}
  .plans{grid-template-columns:1fr}
}