/* ============================================================
   MORNINHA — Landing page
   Paleta extraída do Figma:
   creme #fef7e8 · rosa #db8485 · roxo #ab84db · texto #5f525b
   Fontes: Caprasimo (display) · Caveat (script) · Quicksand (corpo)
   ============================================================ */

:root{
  --cream:#fef7e8;
  --cream-2:#fbeee4;
  --rose:#db8485;
  --rose-dark:#c9706f;
  --rose-soft:#e7a0a0;
  --purple:#ab84db;
  --purple-soft:#bd9ce3;
  --lilac-bg:#b491d8;
  --lilac-card:#c5a6e6;
  --text:#5f525b;
  --text-soft:#8a7c84;
  --mint:#46c6b0;
  --pink-bg:#fbeef0;
  --container:1340px;
  --radius-pill:99px;
  --radius-card:28px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Quicksand',sans-serif;
  color:var(--text);
  background:var(--cream);
  line-height:1.5;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}

.container{
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:24px;
  width:100%;
}

/* ---------- Tipografia utilitária ---------- */
.eyebrow{
  font-family:'Caveat',cursive;
  font-weight:700;
  font-size:30px;
  color:var(--text);
  line-height:1;
}
.eyebrow--light{color:var(--cream)}
.display{
  font-family:'Caprasimo',serif;
  font-weight:400;
  color:var(--text);
  letter-spacing:-.01em;
  line-height:1;
}
.display--light{color:var(--cream)}
.accent{color:var(--rose)}

/* ---------- Botões ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:'Quicksand',sans-serif;font-weight:700;
  border-radius:var(--radius-pill);
  padding:16px 32px;font-size:18px;line-height:1;
  cursor:pointer;border:none;transition:transform .15s ease,box-shadow .2s ease,filter .2s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px);filter:brightness(1.04)}
.btn--rose{background:var(--rose);color:var(--cream)}
.btn--purple{background:var(--purple);color:var(--cream)}
.btn--block{width:100%;font-size:20px;padding:18px}

/* ============================================================
   NAV
   ============================================================ */
.nav{position:sticky;top:0;z-index:100;padding:18px 24px;}
.nav__inner{
  max-width:1080px;margin-inline:auto;
  background:#fffaf0;
  border-radius:var(--radius-pill);
  box-shadow:0 8px 30px rgba(95,82,91,.10);
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 22px;gap:20px;
}
.nav__logo{
  font-family:'Caprasimo',serif;font-size:30px;color:var(--rose);line-height:1;
}
.nav__links{display:flex;gap:30px}
.nav__links a{
  font-weight:600;font-size:17px;color:var(--text);transition:color .2s;
}
.nav__links a:hover{color:var(--rose)}
.nav__cta{padding:12px 26px;font-size:16px}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;
  min-height:760px;
  display:grid;
  grid-template-columns:1fr minmax(420px,640px) 1fr;
  align-items:center;
  gap:0;
  padding:40px 48px 60px;
  overflow:hidden;
}
.hero__bg{
  position:absolute;inset:0;z-index:0;
  background-color:var(--cream);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='72'><g fill='none' stroke='%23f0d9c9' stroke-width='1.4'><path d='M20 14c-3-6-12-5-12 2 0 6 12 12 12 12s12-6 12-12c0-7-9-8-12-2z'/><path d='M60 50c-3-6-12-5-12 2 0 6 12 12 12 12s12-6 12-12c0-7-9-8-12-2z'/></g></svg>");
}
.hero__copy{position:relative;z-index:3}
.hero__copy--left{justify-self:start;max-width:460px}
.hero__copy--right{justify-self:end;max-width:340px;text-align:left}
.hero .eyebrow{margin-bottom:14px}
.hero .display{font-size:clamp(34px,3.4vw,50px);line-height:1.02}
.hero__copy--right .btn{margin-bottom:22px}
.hero__sub{font-size:19px;color:var(--text);max-width:320px}
.hero__sub strong{font-weight:700}

.hero__box{
  position:relative;z-index:2;
  width:min(100%,560px);margin-inline:auto;
  filter:drop-shadow(0 26px 40px rgba(95,82,91,.18));
}
.hero__hand-top{
  position:absolute;z-index:1;
  top:-20px;left:-2%;width:min(58%,1040px);
  pointer-events:none;
}
.hero__hand-bottom{
  position:absolute;z-index:1;
  bottom:-60px;right:2%;width:min(34%,560px);
  pointer-events:none;
}

/* ============================================================
   DIFERENCIAIS (barra rosa)
   ============================================================ */
.diffs{background:var(--rose);padding:24px}
.diffs__inner{
  max-width:var(--container);margin-inline:auto;
  display:flex;flex-wrap:wrap;gap:18px;justify-content:center;align-items:center;
}
.pill{
  display:inline-flex;align-items:center;gap:12px;
  background:var(--rose-dark);
  color:var(--cream);
  border-radius:var(--radius-pill);
  padding:14px 26px;font-weight:600;font-size:18px;
}
.pill i{font-size:20px}

/* ============================================================
   COMO FUNCIONA (roxo)
   ============================================================ */
.how{
  background:var(--lilac-bg);
  padding:90px 0 110px;
  border-top-left-radius:50% 80px;
  border-top-right-radius:50% 80px;
  margin-top:-40px;position:relative;z-index:1;
}
.how__head{text-align:center;margin-bottom:54px}
.how__head .eyebrow{margin-bottom:8px}
.how__head .display{font-size:clamp(30px,3vw,42px)}
.how__grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:28px;
}
.how__card{
  background:var(--lilac-card);
  border-radius:var(--radius-card);
  padding:18px 18px 28px;
}
.how__media{
  background:var(--cream);
  border-radius:20px;
  aspect-ratio:1/1;margin-bottom:22px;
}
.how__step{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.step-num{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;
  background:var(--mint);color:#fff;font-weight:700;flex:none;
}
.how__card h3{font-size:21px;font-weight:700;color:var(--cream)}
.how__card p{color:#fbf3ff;font-weight:500;font-size:16px}

/* ============================================================
   BENEFÍCIOS
   ============================================================ */
.benefits{background:var(--cream);padding:90px 0}
.benefits__grid{
  display:grid;grid-template-columns:1.15fr .85fr;gap:60px;align-items:center;
}
.benefits .eyebrow{margin-bottom:10px}
.benefits__title{font-size:clamp(28px,2.6vw,38px);line-height:1.05;margin-bottom:18px;max-width:560px}
.benefits__lead{font-size:18px;max-width:560px;margin-bottom:26px}
.benefits__pills{display:flex;flex-wrap:wrap;gap:12px;max-width:600px}
.bpill{
  background:var(--rose);color:var(--cream);
  border-radius:18px;padding:14px 18px;font-weight:600;font-size:15px;
  max-width:220px;line-height:1.25;
}
.benefits__photo{justify-self:end}
.benefits__photo img{
  width:min(100%,460px);
  border-radius:var(--radius-card);
  background:var(--rose);
  object-fit:cover;
}

/* ============================================================
   CTA BAND (rosa com onda)
   ============================================================ */
.cta-band{
  position:relative;background:var(--rose);
  padding:90px 0 120px;text-align:center;
}
.cta-band__inner .eyebrow{margin-bottom:8px}
.cta-band__inner .display{font-size:clamp(30px,3vw,44px);margin-bottom:18px}
.cta-band__text{
  color:var(--cream);font-size:19px;max-width:540px;margin:0 auto 30px;
}
.wave{position:absolute;left:0;width:100%;height:48px;line-height:0}
.wave--bottom{
  bottom:0;
  background:
    radial-gradient(circle at 20px -10px,transparent 20px,var(--mint) 21px) repeat-x;
  background-size:40px 48px;
  height:24px;
  -webkit-mask:radial-gradient(circle at 20px 24px,#000 18px,transparent 19px) repeat-x;
          mask:radial-gradient(circle at 20px 24px,#000 18px,transparent 19px) repeat-x;
  -webkit-mask-size:40px 48px;mask-size:40px 48px;
  background:var(--mint);
}

/* ============================================================
   REVIEWS
   ============================================================ */
.reviews{background:var(--cream);padding:80px 0}
.reviews__head{text-align:center;margin-bottom:46px}
.reviews__head .eyebrow{margin-bottom:8px}
.reviews__head .display{font-size:clamp(30px,3vw,42px);margin-bottom:12px}
.reviews__sub{font-size:16px;color:var(--text-soft)}
.reviews__grid{
  display:grid;grid-template-columns:repeat(6,1fr);gap:18px;
}
.review-card{
  aspect-ratio:272/480;
  background:linear-gradient(135deg,#e9e2e6,#d8cfd4);
  border-radius:22px;
  display:flex;align-items:center;justify-content:center;
}
.play{
  width:64px;height:64px;border-radius:50%;border:none;cursor:pointer;
  background:var(--mint);color:#fff;font-size:22px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 20px rgba(70,198,176,.4);transition:transform .15s;
}
.play:hover{transform:scale(1.08)}
.play i{margin-left:3px}

/* ============================================================
   REUTILIZAR
   ============================================================ */
.reuse{background:var(--cream);padding:40px 0 90px}
.reuse__grid{display:grid;grid-template-columns:1fr 1.2fr;gap:60px;align-items:center}
.reuse .eyebrow{margin-bottom:10px}
.reuse__title{font-size:clamp(26px,2.4vw,34px);line-height:1.08;margin-bottom:22px}
.reuse__steps{list-style:none;counter-reset:step;display:flex;flex-direction:column;gap:14px}
.reuse__steps li{
  position:relative;padding-left:42px;font-size:16px;font-weight:500;
}
.reuse__steps li::before{
  counter-increment:step;content:counter(step);
  position:absolute;left:0;top:-2px;
  width:28px;height:28px;border-radius:50%;
  background:var(--rose);color:var(--cream);font-weight:700;
  display:flex;align-items:center;justify-content:center;font-size:15px;
}
.reuse__media{
  aspect-ratio:656/368;
  background:linear-gradient(135deg,#e9e2e6,#d8cfd4);
  border-radius:var(--radius-card);
  display:flex;align-items:center;justify-content:center;
}

/* ============================================================
   KIT / PREÇO
   ============================================================ */
.buy{background:var(--pink-bg);padding:90px 0 70px}
.buy__head{text-align:center;margin-bottom:50px}
.buy__head .eyebrow{margin-bottom:8px}
.buy__head .display{font-size:clamp(30px,3vw,44px);line-height:1.08}
.buy__grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,440px));gap:36px;justify-content:center;
}
.buy-card{
  position:relative;background:var(--cream);
  border-radius:var(--radius-card);
  padding:34px 30px;display:flex;flex-direction:column;
  box-shadow:0 16px 40px rgba(95,82,91,.08);
}
.buy-card--kit{background:#f6e4ef;border:2px solid var(--purple-soft)}
.buy-card__badge{
  position:absolute;top:-16px;left:50%;transform:translateX(-50%);
  background:var(--purple);color:var(--cream);
  font-weight:700;font-size:14px;border-radius:var(--radius-pill);
  padding:8px 20px;white-space:nowrap;
}
.buy-card__img{
  background:#fff;border-radius:18px;margin-bottom:22px;padding:10px;
}
.buy-card__img img{width:100%;aspect-ratio:1/.86;object-fit:contain}
.buy-card__desc{font-weight:600;font-size:17px;margin-bottom:18px;min-height:48px}
.buy-card__price{display:flex;flex-direction:column;gap:2px;margin-bottom:22px}
.price-old{color:var(--text-soft);text-decoration:line-through;font-size:14px}
.price{font-family:'Caprasimo',serif;font-size:34px;color:var(--text)}
.installments{font-size:14px;color:var(--text-soft)}
.buy__trust{
  text-align:center;margin-top:44px;font-weight:600;color:var(--text);font-size:16px;
}
.buy__trust i{color:var(--rose);margin:0 4px}

/* ============================================================
   FAQ
   ============================================================ */
.faq{background:var(--cream);padding:90px 0 70px}
.faq__head{text-align:center;margin-bottom:44px}
.faq__head .eyebrow{margin-bottom:8px}
.faq__head .display{font-size:clamp(30px,3vw,42px)}
.faq__list{max-width:820px;margin-inline:auto;display:flex;flex-direction:column;gap:14px}
.faq__item{
  background:#fffaf0;border-radius:18px;padding:4px 24px;
  box-shadow:0 6px 18px rgba(95,82,91,.06);
}
.faq__item summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  font-weight:700;font-size:18px;color:var(--text);
  padding:18px 0;
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary i{color:var(--mint);font-size:22px;flex:none}
.faq__item summary .fa-circle-minus{display:none}
.faq__item[open] summary .fa-circle-minus{display:inline-block}
.faq__item[open] summary .fa-circle-plus{display:none}
.faq__answer{padding:0 0 20px;font-size:16px;color:var(--text-soft);line-height:1.6}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{
  position:relative;background:var(--rose);
  padding:90px 0 40px;margin-top:40px;text-align:center;
}
.wave--top{
  top:0;
  background:var(--cream);
  height:30px;
  -webkit-mask:radial-gradient(circle at 20px 0,transparent 18px,#000 19px) repeat-x;
          mask:radial-gradient(circle at 20px 0,transparent 18px,#000 19px) repeat-x;
  -webkit-mask-size:40px 30px;mask-size:40px 30px;
}
.footer__brand{
  font-family:'Caprasimo',serif;font-size:clamp(48px,7vw,96px);
  color:var(--cream);line-height:1;margin-bottom:34px;
}
.footer__inner{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:30px;flex-wrap:wrap;text-align:left;
}
.footer__social{display:flex;align-items:center;gap:18px}
.footer__social a{
  width:40px;height:40px;border-radius:50%;background:rgba(254,247,232,.18);
  display:flex;align-items:center;justify-content:center;color:var(--cream);font-size:18px;
  transition:background .2s;
}
.footer__social a:hover{background:rgba(254,247,232,.34)}
.footer__handle{color:var(--cream);font-weight:700;font-size:18px;margin-left:6px}
.footer__legal{max-width:620px;color:var(--cream)}
.footer__legal p{font-size:13px;opacity:.92;margin-bottom:6px}
.footer__reg{text-transform:uppercase;font-size:11px;letter-spacing:.04em;opacity:.8}

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (max-width:1024px){
  .hero{grid-template-columns:1fr;justify-items:center;text-align:center;gap:24px;padding:30px 24px 50px}
  .hero__copy--left,.hero__copy--right{max-width:560px;justify-self:center;text-align:center}
  .hero__copy--right{order:3}
  .hero__sub{margin-inline:auto}
  .hero__box-wrap{order:2}
  .hero__hand-top,.hero__hand-bottom{display:none}
  .hero__box{order:2;width:min(80%,420px)}
  .reviews__grid{grid-template-columns:repeat(3,1fr)}
  .benefits__grid,.reuse__grid{grid-template-columns:1fr;gap:36px}
  .benefits__photo{justify-self:center}
  .reuse__media{order:-1}
}
@media (max-width:768px){
  .nav{padding:12px}
  .nav__inner{padding:12px 16px}
  .nav__links{display:none}
  .how__grid{grid-template-columns:1fr;max-width:420px;margin-inline:auto}
  .buy__grid{grid-template-columns:1fr;max-width:440px}
  .reviews__grid{grid-template-columns:repeat(2,1fr)}
  .bpill{max-width:none;flex:1 1 100%}
  .benefits__pills{max-width:none}
  .footer__inner{flex-direction:column}
}
@media (max-width:420px){
  .reviews__grid{grid-template-columns:1fr 1fr;gap:12px}
  .eyebrow{font-size:26px}
}