/* ============================================================
   POUSAR SEM ACORDAR — sistema visual
   Linha de design: azul-noite profundo + claros frios com nuance
   lilás. Serifada (Fraunces) só nos destaques emocionais; sans
   (Inter) em toda a estrutura.
   MOBILE-FIRST: a base é 360–430px. Tablet a 700, desktop a 1000.
   ============================================================ */

:root{
  /* --- noite ---------------------------------------------- */
  --navy-900:#0B1020;
  --navy-800:#111A31;
  --navy-700:#1A2440;
  --navy-line:rgba(255,255,255,.10);

  /* --- lilás / lavanda ------------------------------------ */
  --lilac:#B49BD8;
  --lilac-2:#C9B8E4;
  --lavender:#EDE7F5;
  --plum:#4B3F6C;
  --plum-dark:#3A3055;

  /* --- menta ---------------------------------------------- */
  --mint:#43C39A;
  --mint-dark:#2FA47F;
  --mint-soft:#E6F6F0;

  /* --- claros frios --------------------------------------- */
  --paper:#FBFAFD;
  --soft:#F2F0F9;
  --soft-2:#E9E5F3;
  --white:#fff;
  --line:#E5E0EF;

  /* --- tinta ---------------------------------------------- */
  --ink:#1B2030;
  --body:#4A5063;
  --muted:#6B7183;
  --muted-light:rgba(255,255,255,.62);

  --radius:26px;
  --radius-lg:34px;
  --radius-sm:16px;
  --gutter:1.15rem;
  --maxw:1180px;

  --shadow-sm:0 2px 8px rgba(27,32,48,.05);
  --shadow:0 10px 34px rgba(27,32,48,.09);
  --shadow-lg:0 26px 70px rgba(27,32,48,.16);

  --sans:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --serif:Fraunces,Georgia,"Times New Roman",serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  margin:0;
  background:var(--paper);
  color:var(--body);
  font-family:var(--sans);
  font-size:1rem;
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,video{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{margin:0;color:var(--ink);line-height:1.18;font-weight:600;letter-spacing:-.02em}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}

.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;z-index:200;background:var(--white);padding:.7rem 1rem;border-radius:10px}

/* ---------- estrutura ------------------------------------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.wrap.narrow{max-width:760px}

.sec{position:relative;padding-block:3.75rem;overflow:hidden}
.sec--tight{padding-block:2.5rem}
.sec--paper{background:var(--paper)}
.sec--soft{background:var(--soft)}
.sec--night{background:var(--navy-900);color:var(--muted-light)}
.sec--night h2,.sec--night h3{color:#fff}

/* ---------- tipografia ------------------------------------ */
.eyebrow{
  display:inline-flex;align-items:flex-start;gap:.5rem;
  font-size:.6875rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--plum);
  margin-bottom:.9rem;
}
.eyebrow svg{width:12px;height:12px;flex:0 0 12px;margin-top:.32em}
.eyebrow--light{color:var(--lilac)}

.t{
  font-size:clamp(1.75rem,7.4vw,2.35rem);
  font-weight:600;
  letter-spacing:-.025em;
  text-wrap:balance;
}
.t em{
  font-family:var(--serif);
  font-style:italic;font-weight:400;
  color:var(--plum);
  letter-spacing:-.01em;
}
.t--light em{color:var(--lilac)}
.t--left{text-align:left}
.sec__sub{margin-top:1rem;color:var(--muted);font-size:1.0625rem;max-width:56ch}
.lead{font-size:1.0625rem;line-height:1.72}

/* ---------- botões ---------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  min-height:56px;padding:.95rem 1.5rem;
  border:0;border-radius:999px;
  background:var(--plum);color:#fff;
  font-family:var(--sans);font-size:.9375rem;font-weight:600;line-height:1.25;
  text-decoration:none;text-align:center;cursor:pointer;
  box-shadow:0 10px 26px rgba(75,63,108,.28);
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease,color .18s ease;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(75,63,108,.34)}
.btn--mint{background:var(--mint);color:#08281F;box-shadow:0 10px 26px rgba(67,195,154,.32)}
.btn--mint:hover{background:var(--mint-dark);color:#fff;box-shadow:0 16px 34px rgba(67,195,154,.4)}
.btn--gold{
  background:linear-gradient(180deg,#F4C860 0%,#E5AC3C 52%,#D79A2C 100%);
  color:#2A1B02;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  border:1px solid rgba(255,232,170,.55);
  box-shadow:
    0 0 0 1px rgba(214,169,90,.35),
    0 6px 18px -6px rgba(214,169,90,.55),
    0 0 22px -6px rgba(214,169,90,.45),
    inset 0 1px 0 rgba(255,246,214,.65);
}
.btn--gold:hover{
  background:linear-gradient(180deg,#F8D276 0%,#EDB748 52%,#DEA334 100%);
  color:#2A1B02;
  box-shadow:
    0 0 0 1px rgba(214,169,90,.45),
    0 10px 24px -6px rgba(214,169,90,.62),
    0 0 30px -6px rgba(214,169,90,.55),
    inset 0 1px 0 rgba(255,246,214,.75);
}
.btn__bolt{display:inline-flex;margin-right:.1rem}
.btn__bolt svg{width:17px;height:17px}
.btn--ghost{
  background:transparent;color:#fff;
  border:1.5px solid rgba(255,255,255,.28);
  box-shadow:none;
}
.btn--ghost:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.5);box-shadow:none}
.btn--block{display:flex;width:100%}
.btn__arrow{
  display:grid;place-items:center;
  width:26px;height:26px;flex:0 0 26px;
  border-radius:50%;background:rgba(0,0,0,.14);
}
.btn__arrow svg{width:14px;height:14px}

/* ============================================================
   NAVEGAÇÃO
   ============================================================ */
.nav{position:fixed;top:0;left:0;right:0;z-index:80;padding:.6rem var(--gutter);pointer-events:none}
.nav__pill{
  pointer-events:auto;
  max-width:var(--maxw);margin-inline:auto;
  display:flex;align-items:center;gap:.75rem;
  padding:.5rem .5rem .5rem .85rem;
  border-radius:999px;
  background:rgba(11,16,32,.82);
  border:1px solid rgba(255,255,255,.10);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  transition:background .25s ease,box-shadow .25s ease;
}
.nav.is-stuck .nav__pill{
  background:rgba(11,16,32,.94);
  box-shadow:0 14px 38px rgba(11,16,32,.26);
}

.brand{display:flex;align-items:center;gap:.55rem;text-decoration:none;min-width:0;flex:1;min-height:44px}
.brand__mark{
  display:grid;place-items:center;
  width:34px;height:34px;flex:0 0 34px;border-radius:50%;
  background:linear-gradient(150deg,var(--lilac),var(--plum));color:#fff;
}
.brand__mark svg{width:20px;height:20px}
.brand__txt{
  display:flex;flex-direction:column;line-height:1.12;min-width:0;
  font-size:.75rem;font-weight:500;color:rgba(255,255,255,.62);
}
.brand__txt em{font-style:normal;font-weight:700;font-size:.875rem;color:#fff;white-space:nowrap}

.nav__links{display:none}

.nav__cta{
  flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:.5rem 1.05rem;
  border-radius:999px;background:var(--mint);color:#08281F;
  font-size:.8125rem;font-weight:700;text-decoration:none;white-space:nowrap;
  transition:background .18s ease,color .18s ease;
}
.nav__cta:hover{background:var(--mint-dark);color:#fff}

/* ============================================================
   AURA / ESTRELAS (elementos de noite)
   ============================================================ */
.aura{
  position:absolute;z-index:0;pointer-events:none;
  top:-14%;right:-26%;
  width:min(120vw,720px);aspect-ratio:1/1;border-radius:50%;
  background:radial-gradient(circle,rgba(180,155,216,.28),transparent 66%);
  filter:blur(10px);
}
.aura--soft{opacity:.5;top:auto;bottom:-30%;right:-30%}

.stars{position:absolute;inset:0;z-index:0;pointer-events:none}
.stars i{
  position:absolute;left:var(--x);top:var(--y);
  width:var(--s);height:var(--s);
  border-radius:50%;background:#fff;opacity:var(--o);
}

/* ============================================================
   01 · HERO
   ============================================================ */
.hero{
  position:relative;
  background:
    radial-gradient(120% 78% at 78% 8%,rgba(80,64,132,.55),transparent 62%),
    radial-gradient(90% 60% at 10% 96%,rgba(24,58,74,.5),transparent 60%),
    linear-gradient(178deg,var(--navy-900),var(--navy-800) 58%,var(--navy-700));
  color:var(--muted-light);
  padding:5.5rem 0 3.25rem;
  overflow:hidden;isolation:isolate;
}
.hero__grid{position:relative;z-index:2}
.hero__copy{max-width:640px}
.hero h1{
  font-family:var(--serif);font-optical-sizing:auto;font-weight:400;
  font-size:clamp(2.05rem,8.6vw,2.9rem);
  line-height:1.1;letter-spacing:-.02em;color:#fff;text-wrap:balance;
}
.hero h1 em{display:block;margin-top:.22em;font-style:italic;font-weight:400;color:var(--lilac)}
.hero__sub{
  margin-top:1.15rem;font-size:1.0625rem;line-height:1.7;
  color:rgba(255,255,255,.72);max-width:40ch;
}
.hero__actions{margin-top:1.75rem;display:flex;flex-direction:column;align-items:flex-start;gap:.85rem}
.hero__actions .btn{width:100%}
.hero__price{font-size:.9375rem;color:rgba(255,255,255,.66)}
.hero__price b{color:#fff;font-size:1.125rem;font-weight:700}

/* etiquetas por baixo do mockup: uma sob a outra, com visto.
   Ficam dentro da coluna do palco, logo aparecem sempre DEPOIS
   da imagem — no telemóvel e no desktop. */
.hero__chips{
  margin:1.5rem auto 0;
  display:grid;gap:.5rem;
  width:100%;max-width:360px;
}
.hero__chips li{
  display:flex;align-items:flex-start;gap:.6rem;
  padding:.62rem .95rem;border-radius:14px;
  border:1px solid var(--navy-line);
  background:rgba(255,255,255,.05);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  font-size:.8125rem;font-weight:500;line-height:1.4;
  color:rgba(255,255,255,.86);
}
.hero__chips li::before{
  content:"";flex:0 0 11px;
  width:11px;height:6px;margin-top:.42em;
  border-left:2px solid var(--mint);
  border-bottom:2px solid var(--mint);
  transform:rotate(-45deg);
}

/* --- palco do mockup -------------------------------------- */
.hero__stage{margin-top:2.75rem}
.stage{
  /* telemóvel: fila simples. O .mock ocupa a linha toda — precisa de
     largura real para o stack resolver as percentagens dos filhos
     absolutos — e as etiquetas ficam por baixo, sem tapar nada. */
  position:relative;
  display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;
  padding:1.5rem 0 1.75rem;
}
.stage .mock{flex:0 0 100%}
.stage__halo{
  position:absolute;z-index:0;
  top:6%;left:50%;transform:translateX(-50%);
  width:min(86%,340px);aspect-ratio:1/1;border-radius:50%;
  background:radial-gradient(circle,rgba(180,155,216,.30),rgba(180,155,216,.05) 58%,transparent 72%);
}
.stage__base{
  position:absolute;z-index:0;
  bottom:1.1rem;left:50%;transform:translateX(-50%);
  width:min(78%,300px);height:34px;border-radius:50%;
  background:radial-gradient(ellipse,rgba(180,155,216,.20),transparent 70%);
}
.stage .mock{position:relative;z-index:2}


/* ============================================================
   02 · PROBLEMA
   ============================================================ */
.pains{margin-top:1.9rem;display:grid;gap:.65rem}
.pain{
  padding:.95rem 1.1rem;border-radius:var(--radius-sm);
  background:var(--white);border:1px solid var(--line);border-left:3px solid var(--lilac);
  font-size:.9375rem;font-weight:500;color:var(--ink);box-shadow:var(--shadow-sm);
}
.clock{
  margin:2rem auto 0;display:flex;flex-direction:column;align-items:center;gap:.5rem;
  padding:1.5rem 1.25rem;border-radius:var(--radius);
  background:linear-gradient(170deg,var(--navy-800),var(--navy-700));
  box-shadow:var(--shadow-lg);
}
.clock__h{font-family:var(--serif);font-size:2.5rem;font-weight:400;line-height:1;color:#fff;letter-spacing:.02em}
.clock__line{width:44px;height:1px;background:rgba(255,255,255,.24)}
.clock__t{font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;color:var(--lilac);font-weight:600}
.pain-close{margin-top:2rem;font-size:1.0625rem;line-height:1.72}
.pain-close b{color:var(--ink);font-weight:600}

/* ============================================================
   04 · GRANDE IDEIA
   ============================================================ */
.sec--idea{text-align:center}
.sec--idea .wrap{position:relative;z-index:2}
.sec--idea .eyebrow{justify-content:center}
.idea__lead{margin-top:1.25rem;font-size:1.0625rem;line-height:1.75;color:rgba(255,255,255,.7)}
.idea__rule{
  width:52px;height:2px;margin:2rem auto;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--lilac),transparent);
}
.idea__punch{font-size:1.125rem;line-height:1.7;color:rgba(255,255,255,.8)}
.idea__punch strong{display:block;color:#fff;font-weight:600;margin-bottom:.35rem}
.idea__punch em{font-family:var(--serif);font-style:italic;color:var(--lilac)}

/* ============================================================
   05 · MÉTODO
   ============================================================ */
.method{margin-top:2rem;display:grid;gap:.85rem;counter-reset:m}
.method li{
  position:relative;
  padding:1.5rem 1.35rem;border-radius:var(--radius);
  background:var(--white);border:1px solid var(--line);box-shadow:var(--shadow-sm);
}
.method__n{
  display:block;margin-bottom:.75rem;
  font-family:var(--serif);font-size:1.375rem;font-weight:600;
  color:var(--lilac);letter-spacing:.04em;
}
.method h3{font-size:1.25rem;margin-bottom:.5rem}
.method p{font-size:.9375rem;color:var(--muted)}

.guilt{
  margin-top:2.25rem;padding:1.5rem 1.35rem;border-radius:var(--radius);
  background:var(--lavender);
}
.guilt p{font-size:.9375rem;line-height:1.72;color:var(--body)}
.guilt strong{color:var(--plum);font-weight:600}
.sec--night .guilt{background:rgba(255,255,255,.06);border:1px solid var(--navy-line)}
.sec--night .guilt p{color:rgba(255,255,255,.76)}
.sec--night .guilt strong{color:#fff}

/* ============================================================
   15 · EXPERIÊNCIAS REAIS (carrossel)
   ============================================================ */
.exps__head{text-align:center;max-width:720px;margin-inline:auto}
.exps__head .eyebrow{justify-content:center}
.exps__sub{margin-top:1rem;font-size:1.0625rem;color:var(--muted)}

.exps{position:relative;margin-top:2.25rem}

/* a faixa é o único elemento que desliza na horizontal — a página
   nunca ganha scroll lateral por causa desta secção */
.exps__track{
  display:flex;
  align-items:flex-start;
  gap:1rem;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
  padding:.5rem .25rem 1.5rem;
  scrollbar-width:none;
  cursor:grab;
}
.exps__track::-webkit-scrollbar{display:none}
.exps__track.is-dragging{cursor:grabbing;scroll-behavior:auto;scroll-snap-type:none}

.exp{
  flex:0 0 78%;
  max-width:296px;
  scroll-snap-align:center;
  padding:.55rem;
  border-radius:26px;
  background:var(--white);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.exp img{
  width:100%;
  aspect-ratio:2/3;          /* as capturas vêm em 1024x1536 */
  object-fit:cover;
  object-position:center;
  border-radius:20px;
  display:block;
  background:var(--soft-2);  /* enquanto carrega, nada de branco cru */
  -webkit-user-drag:none;user-select:none;
}

/* setas — só aparecem onde há rato */
.exps__nav{display:none}

.exps__flag{
  margin-top:.75rem;
  max-width:52ch;margin-inline:auto;text-align:center;
  font-size:.75rem;line-height:1.6;color:var(--muted);
}

/* ============================================================
   16 · OFERTA / PLANOS
   ============================================================ */
.sec--offer{padding-block:3.5rem}
.sec--offer .wrap{position:relative;z-index:2}
.offer__sub{margin-top:1rem;font-size:1rem;color:rgba(255,255,255,.62)}

.plans{margin-top:2.25rem;display:grid;gap:1.25rem;align-items:start}
.plan{
  position:relative;
  display:flex;flex-direction:column;
  padding:1.75rem 1.35rem;border-radius:var(--radius-lg);
  background:rgba(255,255,255,.05);
  border:1px solid var(--navy-line);
}
/* Premium · a mesma base escura do Básico, só que mais rica:
   gradiente azul-marinho com um toque de roxo, borda dourada fina
   e um brilho curto colado à borda — luz sobre metal, não néon. */
.plan--featured{
  --ouro:214,169,90;          /* dourado quente */
  --ouro-luz:255,226,172;     /* realce claro, para o brilho interno */
  background:linear-gradient(168deg,#1B1735 0%,#131630 52%,#0D1124 100%);
  border:1.5px solid rgba(var(--ouro),.95);
  box-shadow:
    /* 1 · fio de luz colado à borda */
    0 0 0 1px rgba(var(--ouro),.28),
    0 0 7px -1px rgba(var(--ouro),.62),
    /* 2 · segunda camada, suave e curta */
    0 0 18px -5px rgba(var(--ouro),.42),
    /* 3 · reforço discreto puxado para o topo */
    0 -3px 26px -12px rgba(var(--ouro),.34),
    /* 4 · brilho interno junto à borda, dá profundidade */
    inset 0 0 0 1px rgba(var(--ouro-luz),.13),
    inset 0 7px 24px -20px rgba(var(--ouro-luz),.55),
    /* 5 · assentar o card */
    0 24px 60px rgba(0,0,0,.45);
}
/* luz um pouco mais viva nos cantos de cima, sem passar de poucos píxeis */
.plan--featured::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  inset:-9px -8px -5px;
  border-radius:calc(var(--radius-lg) + 7px);
  background:
    radial-gradient(46% 46% at 8% 4%,  rgba(var(--ouro),.30), transparent 70%),
    radial-gradient(46% 46% at 92% 4%, rgba(var(--ouro),.30), transparent 70%),
    radial-gradient(70% 26% at 50% 0%, rgba(var(--ouro),.18), transparent 74%);
}
.plan__badge{
  position:absolute;top:-.75rem;left:50%;transform:translateX(-50%);
  padding:.34rem .85rem;border-radius:999px;
  background:var(--mint);color:#08281F;white-space:nowrap;
  font-size:.625rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
}
.plan--featured .plan__badge{
  background:linear-gradient(180deg,#F4C860,#E0A63A);
  color:#2A1B02;
  box-shadow:
    0 0 0 1px rgba(255,232,170,.45),
    0 0 12px -2px rgba(var(--ouro),.65),
    0 0 26px -8px rgba(var(--ouro),.55);
}
/* estrela antes do texto do selo */
.plan--featured .plan__badge::before{
  content:"";display:inline-block;vertical-align:-1px;
  width:9px;height:9px;margin-right:.4rem;
  background:currentColor;
  clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
}
.plan__head{padding-bottom:1.25rem;margin-bottom:1.25rem;border-bottom:1px solid var(--navy-line)}
.plan--featured .plan__head{border-bottom-color:rgba(var(--ouro),.22)}
.plan__name{
  font-size:.75rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--lilac);
}
.plan__price{
  font-family:var(--serif);font-size:2.75rem;font-weight:600;line-height:1.05;
  color:#fff;margin:.35rem 0 .3rem;letter-spacing:-.02em;
}
.plan__once{font-size:.8125rem;color:rgba(255,255,255,.55)}

.plan__list{display:grid;gap:.7rem;margin-bottom:1.6rem}
.plan .btn{margin-top:auto}
.plan__list li{
  position:relative;padding-left:1.5rem;
  font-size:.875rem;line-height:1.55;color:rgba(255,255,255,.72);
}
.plan__list li::before{
  content:"";position:absolute;left:0;top:.4em;width:11px;height:6px;
  border-left:2px solid var(--mint);border-bottom:2px solid var(--mint);transform:rotate(-45deg);
}
.plan__list b{color:#fff;font-weight:600}
.plan__off{color:rgba(255,255,255,.4)!important}
.plan__off::before{
  border:0!important;transform:none!important;
  top:.72em!important;width:10px!important;height:1.5px!important;
  border-radius:2px;background:rgba(255,255,255,.3);
}
.plan__list--main{margin-bottom:1.1rem}

/* Básico · o que fica de fora, num bloco visualmente apagado */
.plan__excl{
  margin-bottom:1.6rem;padding:.8rem .95rem;
  border-radius:12px;background:rgba(255,255,255,.03);
  border:1px solid var(--navy-line);
}
.plan__excl-k{
  margin-bottom:.55rem;
  font-size:.6875rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(180,155,216,.75);
}
.plan__excl ul{display:grid;gap:.45rem}
.plan__excl li{
  position:relative;padding-left:1.5rem;
  font-size:.8125rem;line-height:1.5;color:rgba(255,255,255,.42);
}
.plan__excl li::before,.plan__excl li::after{
  content:"";position:absolute;left:2px;top:.68em;
  width:11px;height:1.5px;border-radius:2px;background:rgba(255,255,255,.34);
}
.plan__excl li::before{transform:rotate(45deg)}
.plan__excl li::after{transform:rotate(-45deg)}
.plan__excl b{color:rgba(255,255,255,.62);font-weight:600}

/* Premium · área própria para os seis bónus */
.plan__gifts{
  margin-bottom:1.35rem;padding:.95rem 1rem 1rem;
  border-radius:12px;
  background:rgba(0,0,0,.22);
  border:1px solid rgba(var(--ouro),.34);
  box-shadow:inset 0 1px 0 rgba(var(--ouro-luz),.07);
}
.plan__gifts-k{
  font-size:.6875rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(var(--ouro-luz),.92);
}
.plan__gifts ul{margin-top:.7rem;display:grid;gap:.6rem}
.plan__gifts li{
  position:relative;padding-left:3.05rem;min-height:18px;
  font-size:.8125rem;line-height:1.4;color:rgba(255,255,255,.86);
}
/* ✓ verde */
.plan__gifts li::before{
  content:"";position:absolute;left:1px;top:.36em;width:11px;height:6px;
  border-left:2px solid var(--mint);border-bottom:2px solid var(--mint);
  transform:rotate(-45deg);background:none;
}
/* 🎁 caixa dourada com laço vermelho */
.plan__gifts li::after{
  content:"";position:absolute;left:1.5rem;top:-.06em;width:18px;height:18px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3.4' y='10.6' width='17.2' height='10.4' rx='1.5' fill='%23E3A93F'/%3E%3Crect x='2.2' y='7' width='19.6' height='4.2' rx='1.2' fill='%23F2C566'/%3E%3Crect x='10.1' y='7' width='3.8' height='14' fill='%23D2372F'/%3E%3Cpath d='M12 7.2C10.3 7.2 8.3 6.8 8.3 5.3A2 2 0 0 1 12 4.5 2 2 0 0 1 15.7 5.3C15.7 6.8 13.7 7.2 12 7.2Z' fill='%23D2372F'/%3E%3C/svg%3E") center/contain no-repeat;
}
.plan__safe{
  margin-top:.8rem;display:flex;align-items:center;justify-content:center;gap:.4rem;
  font-size:.75rem;font-weight:600;color:rgba(var(--ouro-luz),.78);
}
.plan__safe svg{width:14px;height:14px;display:block}
.plan__note{margin-top:.85rem;text-align:center;font-size:.75rem;color:rgba(255,255,255,.5)}

.pays{margin-top:2rem;display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem}
.pays span{
  padding:.34rem .7rem;border-radius:8px;border:1px solid var(--navy-line);
  font-size:.6875rem;font-weight:600;color:rgba(255,255,255,.6);
}
.seals{
  margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid var(--navy-line);
  display:flex;flex-wrap:wrap;justify-content:center;gap:1.25rem;
}
.seal{display:flex;align-items:center;gap:.5rem;font-size:.6875rem;color:rgba(255,255,255,.55);line-height:1.25;text-align:left}
.seal svg{width:20px;height:20px;flex:0 0 20px;color:var(--lilac)}
.seal b{display:block;color:#fff;font-weight:600}

/* ============================================================
   17 · GARANTIA
   ============================================================ */
.guar{
  display:grid;gap:1.25rem;justify-items:center;text-align:center;
  padding:1.75rem 1.35rem;border-radius:var(--radius-lg);
  background:var(--white);border:1px solid var(--line);box-shadow:var(--shadow);
}
/* selo dourado: imagem com transparência real, recortada rente
   ao contorno. Sem fundo, sem moldura, sem sombra de caixa —
   só uma sombra suave por baixo, para assentar no cartão. */
.guar__seal{
  display:block;
  width:132px;height:auto;
  margin-inline:auto;
  /* sem filter:drop-shadow — o selo já traz brilho e sombra
     gravados, e o filtro obrigava a rasterizar a imagem à parte */
}
.guar h2{font-size:1.25rem;margin-bottom:.6rem}
.guar p{font-size:.9375rem;color:var(--muted);line-height:1.7}

/* ============================================================
   18 · FAQ
   ============================================================ */
.faq{margin-top:1.75rem;display:grid;gap:.65rem}
.faq details{
  border-radius:var(--radius-sm);background:var(--white);
  border:1px solid var(--line);box-shadow:var(--shadow-sm);overflow:hidden;
}
.faq summary{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  min-height:56px;padding:1rem 1.15rem;cursor:pointer;list-style:none;
  font-size:.9375rem;font-weight:600;color:var(--ink);line-height:1.4;
}
.faq summary::-webkit-details-marker{display:none}
.chev{
  display:grid;place-items:center;width:24px;height:24px;flex:0 0 24px;
  border-radius:50%;background:var(--lavender);color:var(--plum);
  transition:transform .22s ease;
}
.chev svg{width:13px;height:13px}
.faq details[open] .chev{transform:rotate(180deg)}
.faq .a{padding:0 1.15rem 1.15rem}
.faq .a p{font-size:.9375rem;color:var(--muted);line-height:1.7}
.faq .a p+p{margin-top:.75rem}

/* ============================================================
   19 · CTA FINAL
   ============================================================ */
.sec--final{text-align:center;padding-block:3.5rem}
.sec--final .wrap{position:relative;z-index:2}
.final__sub{margin-top:1rem;font-size:1.0625rem;color:rgba(255,255,255,.7)}
.sec--final .btn{margin-top:1.9rem;width:100%}
.final__note{margin-top:.9rem;font-size:.8125rem;color:rgba(255,255,255,.55)}

/* ============================================================
   RODAPÉ
   ============================================================ */
.site-footer{
  background:var(--navy-900);color:rgba(255,255,255,.55);
  font-size:.8125rem;line-height:1.8;padding-block:2.5rem;text-align:center;
}
.site-footer__brand{color:#fff;font-weight:600;margin-bottom:.5rem}
.site-footer a{color:rgba(255,255,255,.8);text-decoration:underline;text-underline-offset:3px}
.site-footer a:hover{color:#fff}
.flinks{display:flex;flex-wrap:wrap;justify-content:center;gap:0 1.1rem;margin:.6rem 0}
.flinks a{display:inline-flex;align-items:center;min-height:44px;padding-inline:.15rem}
.disclaimer{
  margin-top:1.35rem;padding-top:1.2rem;border-top:1px solid rgba(255,255,255,.12);
  font-size:.75rem;color:rgba(255,255,255,.4);max-width:46rem;margin-inline:auto;
}

/* ============================================================
   BARRA FIXA (telemóvel)
   ============================================================ */
.buybar{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  display:flex;align-items:center;gap:.85rem;
  padding:.65rem var(--gutter);
  padding-bottom:calc(.65rem + env(safe-area-inset-bottom,0px));
  background:rgba(255,255,255,.97);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-top:1px solid var(--line);
  box-shadow:0 -6px 24px rgba(27,32,48,.14);
  transform:translateY(115%);transition:transform .28s ease;
}
.buybar.is-visible{transform:translateY(0)}
.buybar__p{line-height:1.15;flex:0 0 auto}
.buybar__p .v{display:block;font-family:var(--serif);font-size:1.125rem;font-weight:600;color:var(--plum);white-space:nowrap}
.buybar__p .l{display:block;font-size:.6875rem;color:var(--muted)}
.buybar .btn{flex:1;min-height:48px;padding:.7rem 1rem;font-size:.875rem;box-shadow:none}
body.has-buybar .site-footer{padding-bottom:calc(2.5rem + 78px)}

/* ============================================================
   MOCKUPS (provisórios, desenhados em CSS)
   ============================================================ */
.mock{position:relative;display:block}
.mock__flag{margin-top:.9rem;text-align:center;font-size:.5625rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.sec--night .mock__flag{color:rgba(255,255,255,.4)}
.mock--bundle{
  background:linear-gradient(160deg,var(--lavender),var(--soft-2));
  border-radius:var(--radius);padding:2.25rem 1rem 1.5rem;
}
.mock--kit{padding:1rem 0 .5rem}

.mock__stack{position:relative;width:100%;max-width:290px;height:196px;margin-inline:auto}
.mock__stack>*{position:absolute}

.mock__book{
  width:104px;left:0;top:14px;z-index:1;aspect-ratio:3/4;
  border-radius:4px 8px 8px 4px;
  background:linear-gradient(150deg,#5B4C82,#3A3055);
  box-shadow:10px 12px 28px rgba(27,32,48,.28);
  padding:.85rem .7rem;transform:rotate(-8deg);color:#fff;
}
.mock__book::before{content:"";position:absolute;left:0;top:0;bottom:0;width:7px;background:rgba(0,0,0,.22);border-radius:4px 0 0 4px}
.mock__kicker{font-size:.4375rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.mock__title{font-family:var(--serif);font-size:.6875rem;font-weight:600;line-height:1.2;margin-top:.3rem}
.mock__rule{display:block;width:22px;height:1.5px;background:rgba(255,255,255,.45);margin-top:.5rem}

.mock__tablet{
  width:118px;left:29%;top:0;z-index:3;aspect-ratio:3/4.1;
  border-radius:12px;background:#1B2030;padding:6px;
  box-shadow:0 14px 34px rgba(27,32,48,.32);transform:rotate(2deg);
}
.mock__screen{width:100%;height:100%;border-radius:7px;background:linear-gradient(170deg,#fff,#F4F1F7);padding:.6rem .55rem}
.mock__screen .st{font-size:.5rem;font-weight:700;color:var(--ink);margin-bottom:.45rem}
.mock__screen .ln{display:block;height:4px;border-radius:3px;background:var(--lavender);margin-bottom:.28rem}
.mock__screen .ln.m{width:84%}
.mock__screen .ln.s{width:56%}

.mock__card{
  width:126px;left:56%;top:62px;z-index:4;aspect-ratio:1.41/1;
  border-radius:9px;background:#fff;
  box-shadow:10px 14px 30px rgba(27,32,48,.26);
  padding:.7rem .75rem;display:flex;flex-direction:column;gap:.3rem;
  border-top:4px solid var(--plum);transform:rotate(8deg);
}
.mock__card .ct{font-size:.5rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--plum)}
.mock__step{display:flex;align-items:center;gap:.35rem;font-size:.5rem;font-weight:600;color:var(--ink)}
.mock__step i{
  display:grid;place-items:center;width:13px;height:13px;flex:0 0 13px;border-radius:50%;
  background:var(--lavender);color:var(--plum);font-style:normal;font-size:.4375rem;font-weight:700;
}

/* o livro é roxo escuro: sobre o azul-noite desaparecia por
   completo. Nos fundos escuros ganha tom claro e rebordo de luz. */
.mock--hero .mock__book,.mock--kit .mock__book{
  background:linear-gradient(150deg,#8A76BE,#5B4C82);
  box-shadow:10px 14px 34px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.10);
}
.mock--hero .mock__tablet,.mock--kit .mock__tablet{box-shadow:0 16px 40px rgba(0,0,0,.5)}
.mock--hero .mock__card,.mock--kit .mock__card{box-shadow:10px 16px 36px rgba(0,0,0,.45)}

/* ============================================================
   REVELAÇÃO
   ============================================================ */
.js .reveal{opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .55s ease}
.js .reveal.is-in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .reveal{opacity:1;transform:none;transition:none}
  .btn:hover,.card:hover{transform:none}
}

:focus-visible{outline:3px solid var(--mint);outline-offset:3px;border-radius:8px}

/* ============================================================
   ============  TABLET  ≥ 700px  =============================
   ============================================================ */
@media (min-width:700px){
  :root{--gutter:2rem}

  .sec{padding-block:5rem}
  .sec--tight{padding-block:3rem}
  .t{font-size:clamp(2.1rem,4.6vw,2.9rem)}
  .sec__sub{font-size:1.125rem}

  .nav__links{display:flex;align-items:center;gap:1.5rem;flex:0 0 auto}
  .nav__links a{font-size:.875rem;font-weight:500;color:rgba(255,255,255,.72);text-decoration:none;padding:.4rem 0}
  .nav__links a:hover{color:#fff}
  .nav__pill{padding:.5rem .5rem .5rem 1rem;gap:1.5rem}
  .nav__cta{padding:.6rem 1.3rem;font-size:.875rem}

  .hero{padding:6.5rem 0 4.5rem}
  .hero__actions{flex-direction:row;align-items:center;flex-wrap:wrap;gap:1.25rem}
  .hero__actions .btn{width:auto;flex:0 0 auto;white-space:nowrap}
  .hero__price{white-space:nowrap}

  /* o palco volta a ser bloco e as etiquetas voltam a flutuar */
  .stage{display:block;padding:1.5rem 0 2.5rem}
  .stage .mock{flex:none}

  .pains{grid-template-columns:1fr 1fr;gap:.85rem}
  .noise__i{font-size:.875rem;padding:.6rem 1.05rem}

  .idea__lead{font-size:1.1875rem;max-width:60ch;margin-inline:auto}
  .idea__punch{font-size:1.25rem}

  .method{grid-template-columns:repeat(3,1fr);gap:1rem}
  .guilt{padding:1.85rem}

  .phases{grid-template-columns:1fr 1fr;gap:1rem}

  .split{grid-template-columns:1fr 1fr;gap:3rem;align-items:center}

  .cards{grid-template-columns:1fr 1fr;gap:1rem;margin-top:1.5rem}
  .mainguide{padding:2rem 1.85rem}
  .mainguide h3{font-size:1.625rem}

  .tempos{padding:2rem 1.85rem;margin-top:2rem}
  .tempos__list{grid-template-columns:repeat(3,1fr)}

  .inside{grid-template-columns:repeat(3,1fr);gap:1.25rem;align-items:start}
  .sheet--1{transform:rotate(-1.6deg)}
  .sheet--2{transform:translateY(-14px)}
  .sheet--3{transform:rotate(1.6deg)}

  .benes{grid-template-columns:1fr 1fr;gap:3rem;align-items:start}

  .bonus{grid-template-columns:.85fr 1.15fr;gap:1.85rem;align-items:center;padding:1.75rem}
  .bonus--flip .bonus__cover{order:2}
  .bonus--flip .bonus__body{order:1}

  .kit{grid-template-columns:.9fr 1.1fr;gap:3rem;align-items:center}

  /* carrossel: cartão de largura fixa, com o seguinte a espreitar */
  .exp{flex:0 0 252px;max-width:none}
  .exps__track{gap:1.25rem;padding-bottom:1.75rem}
  .exps__sub{font-size:1.125rem}

  .exps__nav{
    display:grid;place-items:center;
    position:absolute;top:50%;transform:translateY(-50%);z-index:4;
    width:44px;height:44px;border-radius:50%;
    background:var(--white);color:var(--plum);
    border:1px solid var(--line);
    box-shadow:var(--shadow);
    cursor:pointer;
    transition:background .18s ease,color .18s ease,opacity .18s ease;
  }
  .exps__nav svg{width:18px;height:18px}
  .exps__nav:hover{background:var(--plum);color:#fff}
  .exps__nav[disabled]{opacity:.3;pointer-events:none}
  .exps__nav--prev{left:-14px}
  .exps__nav--next{right:-14px}
  .checks{grid-template-columns:1fr 1fr}
  .expect{grid-template-columns:auto 1fr;gap:1.5rem;align-items:start;padding:1.85rem}

  .plans{grid-template-columns:1fr 1fr;gap:1.5rem}
  .plan{padding:2rem 1.75rem}

  .guar{gap:1.5rem;padding:2rem}
  .guar__seal{width:150px}
  .guar h2{font-size:1.5rem}

  .sec--final .btn{width:auto}

  .mock__stack{max-width:340px;height:230px}
  .mock__book{width:122px}
  .mock__tablet{width:138px}
  .mock__card{width:146px;top:74px}
}

/* ============================================================
   ============  DESKTOP  ≥ 1000px  ===========================
   ============================================================ */
@media (min-width:1000px){
  :root{--gutter:2.5rem}

  .sec{padding-block:6.5rem}
  .sec--tight{padding-block:3.5rem}
  .t{font-size:clamp(2.4rem,3.4vw,3.15rem)}

  .hero{padding:7rem 0 5rem}
  .hero__grid{display:grid;grid-template-columns:1.06fr .94fr;gap:3.5rem;align-items:center}
  .hero h1{font-size:clamp(2.9rem,4vw,3.7rem)}
  .hero h1 em{display:inline;margin-top:0}
  .hero__sub{font-size:1.125rem;max-width:42ch}
  .hero__stage{margin-top:0}
  .stage{padding:2rem 0 3rem}

  .pains{gap:1rem}
  .pain{padding:1.15rem 1.35rem;font-size:1rem}

  .method li{padding:1.85rem 1.6rem}
  .method__n{font-size:1.5rem}

  .phases{grid-template-columns:repeat(4,1fr);gap:1.25rem}
  .phases li{padding:1.6rem 1.4rem}

  .cards{grid-template-columns:repeat(3,1fr);gap:1.25rem}
  .card{padding:1.75rem 1.6rem}

  .tempos{padding:2.5rem}
  .tempos__list{gap:1rem}

  .bonus{grid-template-columns:.8fr 1.2fr;gap:2.5rem;padding:2rem}

  .benes{gap:4rem}
  .kit{gap:4rem}
  .kit__v{font-size:2.25rem}

  .plans{gap:2rem;align-items:stretch}
  .exp{flex:0 0 253px}
  .exps__track{gap:1.5rem}
  .exps__nav--prev{left:-20px}
  .exps__nav--next{right:-20px}
  .plan{padding:2.25rem 2rem}
  .plan--featured{padding-block:2.75rem}
  .plan__price{font-size:3.25rem}

  .sheet__body{min-height:210px;padding:1.75rem 1.6rem}
  .sheet__h{font-size:1.25rem}

  .expect{padding:2.25rem}
  .expect h2{font-size:1.5rem}

  .faq summary{font-size:1rem;padding:1.15rem 1.5rem}
  .faq .a{padding:0 1.5rem 1.35rem}

  .mock__stack{max-width:380px;height:258px}
  .mock__book{width:136px}
  .mock__tablet{width:154px}
  .mock__card{width:164px;top:84px}
  .mock--hero .mock__stack{max-width:400px;height:272px}

}

/* ---------- a barra fixa desaparece no desktop ------------- */
@media (min-width:900px){
  .buybar{display:none}
  body.has-buybar .site-footer{padding-bottom:2.5rem}
}

/* wrappers de grelha: sem min-width:0 o conteúdo largo estoura a coluna */
.benes__head,.kit__copy,.kit__media{min-width:0}


/* ============================================================
   HERO · MOCKUP DO PRODUTO
   Imagem única (img/hero-mockup.webp). O wrapper .floaty leva a
   animação; a imagem em si não recebe transform nenhum, para
   nada colidir com posicionamento ou responsividade.
   ============================================================ */
.floaty{
  position:relative;
  z-index:2;
  flex:0 0 100%;                 /* no telemóvel o .stage é flex */
  width:100%;
  max-width:360px;
  margin-inline:auto;
  animation:floatingMockup 4.5s ease-in-out infinite alternate;
}
.hero-mock{
  display:block;
  width:100%;
  height:auto;                   /* rácio natural — nunca esticada */
  /* a imagem traz alfa real gravada no ficheiro: as arestas já
     desvanecem para o fundo do hero, sem raio nem máscara CSS */
}

@keyframes floatingMockup{
  from{transform:translate3d(0,0,0)}
  to  {transform:translate3d(0,-11px,0)}
}

/* luz de suspensão por baixo: respira ao contrário do mockup,
   para reforçar a sensação de que está no ar */
.stage__base{
  width:min(70%,300px);
  height:34px;
  background:radial-gradient(ellipse,rgba(180,155,216,.34),rgba(120,98,168,.16) 46%,transparent 74%);
  filter:blur(6px);
  animation:floatingShadow 4.5s ease-in-out infinite alternate;
}
@keyframes floatingShadow{
  from{transform:translateX(-50%) scale(1);opacity:.95}
  to  {transform:translateX(-50%) scale(.9);opacity:.6}
}

@media (min-width:700px){
  .floaty{flex:none;max-width:400px}
  .hero__chips{max-width:400px;gap:.55rem}
  .stage__base{width:min(64%,300px)}
}
@media (min-width:1000px){
  .floaty{max-width:500px}
  .hero__chips{max-width:460px;margin-top:1.75rem}
  .hero__chips li{font-size:.875rem;padding:.7rem 1.1rem}
}

/* quem pediu menos movimento não leva flutuação nenhuma */
@media (prefers-reduced-motion:reduce){
  .floaty,.stage__base{animation:none}
}


/* ============================================================
   VERSÃO CURTA — componentes dos 7 blocos
   ============================================================ */

/* --- bloco 2: a cena da madrugada -------------------------
   Substitui os chips de conselhos e o remate em texto: a
   imagem já traz as frases e a linha final. A alfa das bordas
   vem gravada no ficheiro (só os 3% exteriores), por isso o
   lavanda derrete no fundo da secção sem caixa nem sombra. */
.noite{
  margin:1.75rem auto 0;
  width:100%;
  max-width:520px;
}
.noite img{display:block;width:100%;height:auto}

/* --- bloco 3: cabeçalho da ideia + método sobre fundo escuro */
.idea__head{position:relative;z-index:2;text-align:center;max-width:660px;margin-inline:auto}
.idea__head .eyebrow{justify-content:center}
.idea__punch{margin-top:1.5rem;font-size:1.125rem}
.idea__punch strong{color:#fff;font-weight:600}

.method--dark{position:relative;z-index:2;margin-top:2.5rem}
.method--dark li{
  background:rgba(255,255,255,.05);
  border:1px solid var(--navy-line);
  box-shadow:none;
}
.method--dark h3{color:#fff}
.method--dark p{color:rgba(255,255,255,.7)}

/* --- bloco 4: mockup do produto + resumo + acordeão -------- */
/* --- bloco 4: cabeçalho centrado + mockup da secção --------- */
.prod__head{text-align:center;max-width:720px;margin-inline:auto}
.prod__head .eyebrow{justify-content:center}

.prod__shot{
  margin:2rem auto 0;
  width:93%;                    /* margens laterais iguais no telemóvel */
  max-width:900px;
}
.prod__shot img{
  display:block;width:100%;height:auto;   /* rácio original, sem distorção */
  border-radius:var(--radius);
}

/* --- bloco 4: guia em destaque + timeline dos 7 módulos ----- */
.guia{
  position:relative;overflow:hidden;
  margin:2rem auto 0;
  max-width:860px;
  padding:1.35rem 1.25rem;
  border-radius:var(--radius);
  background:linear-gradient(160deg,var(--plum),var(--plum-dark));
  color:rgba(255,255,255,.78);
  box-shadow:var(--shadow-lg);
}
.guia__tag{
  display:inline-block;margin-bottom:.7rem;
  padding:.28rem .68rem;border-radius:999px;
  background:rgba(255,255,255,.15);
  font-size:.5625rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#fff;
}
.guia h3{color:#fff;font-size:1.25rem;line-height:1.25;margin-bottom:.5rem}
.guia p{font-size:.9375rem;line-height:1.6}

/* timeline: a linha fica atrás dos círculos e os cards crescem
   em altura sozinhos quando o título parte em duas linhas */
.mods{
  position:relative;
  margin-top:2.25rem;
  display:grid;gap:.85rem;
  padding-left:2.9rem;
}
.mods::before{
  content:"";position:absolute;z-index:0;
  left:17px;top:1.3rem;bottom:1.3rem;width:2px;border-radius:2px;
  background:linear-gradient(180deg,var(--lilac-2),var(--lilac) 18%,var(--lilac) 82%,var(--lilac-2));
}
.mods li{position:relative;min-width:0}
.mods__n{
  position:absolute;z-index:1;
  left:-2.9rem;top:.95rem;
  display:grid;place-items:center;
  width:36px;height:36px;border-radius:50%;
  background:var(--white);
  border:2px solid var(--lilac);
  color:var(--plum);
  font-family:var(--serif);font-size:.8125rem;font-weight:600;
  line-height:1;
}
.mods__card{
  padding:1.05rem 1.2rem;
  border-radius:var(--radius-sm);
  background:var(--white);
  border:1px solid var(--lilac-2);
  box-shadow:var(--shadow-sm);
  transition:transform .2s ease,box-shadow .2s ease;
}
.mods__card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.mods__card h3{
  font-size:1rem;line-height:1.35;margin-bottom:.35rem;
  overflow-wrap:break-word;          /* nunca sai do cartão */
}
.mods__card p{font-size:.875rem;line-height:1.55;color:var(--muted)}

/* separador + bónus */
.packbonus{
  margin-top:2.25rem;padding-top:1.75rem;
  border-top:1px solid var(--line);
  display:grid;gap:.3rem;
  text-align:center;
}
.pack__k{
  font-size:.6875rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--plum);
}
.pack__v{font-size:.9375rem;color:var(--body);line-height:1.55}

/* --- bloco 6: garantia sobre fundo escuro + nota ----------- */
.guar--dark{
  margin-top:2rem;
  background:rgba(255,255,255,.05);
  border-color:var(--navy-line);
  box-shadow:none;
}
.guar--dark h3{font-size:1.125rem;margin-bottom:.5rem;color:#fff}
.guar--dark p{color:rgba(255,255,255,.68)}
.offer__note{
  margin-top:1.5rem;max-width:56ch;margin-inline:auto;text-align:center;
  font-size:.75rem;line-height:1.6;color:rgba(255,255,255,.45);
}

/* --- bloco 7: remate escuro dentro da secção clara --------- */
.closing{
  position:relative;overflow:hidden;isolation:isolate;
  margin-top:3rem;
  padding:2.5rem 1.5rem;
  border-radius:var(--radius-lg);
  background:linear-gradient(170deg,var(--navy-900),var(--navy-700));
  text-align:center;
}
.closing .t{position:relative;z-index:2;color:#fff}
.closing .t em{color:var(--lilac)}
.closing__sub{
  position:relative;z-index:2;
  margin-top:.9rem;font-size:1rem;color:rgba(255,255,255,.7);
}
.closing .btn{position:relative;z-index:2;margin-top:1.75rem;width:100%}
.closing__note{
  position:relative;z-index:2;
  margin-top:.85rem;font-size:.8125rem;color:rgba(255,255,255,.5);
}

@media (min-width:700px){
  .mods{gap:1rem;padding-left:3.4rem}
  .mods::before{left:20px}
  .mods__n{left:-3.4rem;width:42px;height:42px;font-size:.9375rem}
  .mods__card{padding:1.25rem 1.5rem}
  .mods__card h3{font-size:1.0625rem}
  .prod__shot{width:100%;margin-top:2.5rem}
  .guia{padding:1.75rem 1.6rem}
  .guia h3{font-size:1.5rem}
  .method--dark{grid-template-columns:repeat(3,1fr)}
  .idea__lead{font-size:1.125rem}
  .closing{padding:3.25rem 2.5rem}
  .closing .btn{width:auto}
  }
@media (min-width:1000px){
  /* largura de leitura confortável em vez de cards esticados */
  .prod__shot{margin-top:3rem}
  .guia{margin-top:2.75rem}
  .mods{max-width:860px;margin-inline:auto;margin-top:2.5rem;gap:1.1rem}
  .mods__card{padding:1.4rem 1.75rem}
  .mods__card h3{font-size:1.125rem}
  .mods__card p{font-size:.9375rem}
  .packbonus{max-width:860px;margin-inline:auto;margin-top:3rem}
  .closing{padding:4rem 3rem;margin-top:4rem}
  .guar__seal{width:168px}
}


/* ============================================================
   BLOCO 3 · DIAGRAMA DO MECANISMO (animação HTML/CSS)
   Os anéis rodam e arrastam as bolinhas presas neles (::before
   e ::after). As etiquetas ficam FORA da rotação, por isso não
   giram. Tudo posicionado em percentagem dentro de um quadrado,
   logo uma só definição serve todos os tamanhos — só a
   tipografia muda por breakpoint.
   ============================================================ */
.orb{
  position:relative;z-index:2;
  margin:2.25rem auto 0;
  width:100%;max-width:340px;
  aspect-ratio:1/1;
}

/* brilho central */
.orb__glow{
  position:absolute;inset:24%;
  border-radius:50%;
  background:radial-gradient(circle,rgba(150,110,220,.42),rgba(120,90,190,.16) 55%,transparent 72%);
  animation:orbPulse 6s ease-in-out infinite alternate;
}
@keyframes orbPulse{
  from{transform:scale(1);opacity:.85}
  to  {transform:scale(1.07);opacity:1}
}

/* --- anéis --------------------------------------------------
   Cada anel roda a uma velocidade diferente e em sentidos
   alternados, para o conjunto nunca repetir o mesmo desenho. */
.orb__ring{
  position:absolute;
  border-radius:50%;
  animation:orbSpin var(--spd) linear infinite;
}
.orb__ring::before,
.orb__ring::after{
  content:"";
  position:absolute;
  border-radius:50%;
  width:var(--d);height:var(--d);
  /* sombra curta de propósito: um blur grande aqui obriga a
     repintar a cada frame e trava a página no telemóvel */
  box-shadow:0 0 8px 1px currentColor;
  background:currentColor;
}
/* bolinha no topo e na base de cada anel */
.orb__ring::before{top:calc(var(--d) / -2);left:50%;margin-left:calc(var(--d) / -2)}
.orb__ring::after {bottom:calc(var(--d) / -2);left:50%;margin-left:calc(var(--d) / -2)}

.orb__ring--1{
  inset:6%;
  border:1px solid rgba(255,255,255,.10);
  --spd:26s; --d:9px;
  color:#B49BD8;                       /* lilás */
}
.orb__ring--1::after{color:#F58BA8}     /* rosa */

.orb__ring--2{
  inset:19%;
  border:1px solid rgba(255,255,255,.13);
  --spd:19s; --d:8px;
  color:#6FCF97;                       /* verde */
  animation-direction:reverse;
}
.orb__ring--2::after{color:#F2C14E}     /* âmbar */

.orb__ring--3{
  inset:31%;
  border:1px dashed rgba(255,255,255,.16);
  --spd:14s; --d:7px;
  color:#56A8F5;                       /* azul */
}
.orb__ring--3::before{color:#56A8F5}
.orb__ring--3::after{display:none}      /* só uma bolinha neste */

@keyframes orbSpin{to{transform:rotate(360deg)}}

/* --- núcleo -------------------------------------------------- */
.orb__core{
  position:absolute;inset:37%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.1rem;
  border-radius:50%;
  background:radial-gradient(circle at 50% 38%,#241C46,#141033);
  border:1px solid rgba(180,155,216,.34);
  box-shadow:0 0 26px rgba(150,110,220,.45),0 0 0 1px rgba(255,255,255,.05) inset;
  text-align:center;
}
.orb__moon{width:16%;height:auto;color:var(--lilac);margin-bottom:.15rem}
.orb__core b{
  font-family:var(--serif);font-weight:600;
  font-size:clamp(.9rem,4.4vw,1.15rem);line-height:1.05;color:#fff;
}
.orb__core i{
  font-family:var(--serif);font-style:normal;font-weight:600;
  font-size:clamp(.9rem,4.4vw,1.15rem);line-height:1.05;color:#fff;
}

/* --- etiquetas (não rodam) ----------------------------------- */
.orb__tag{
  position:absolute;
  inset:auto;                 /* reset: impede herdar top+bottom ou left+right */
  display:inline-flex;align-items:center;gap:.35rem;
  padding:.34rem .6rem;
  border-radius:999px;
  background:rgba(17,22,44,.86);
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  font-size:.625rem;font-weight:600;color:#fff;white-space:nowrap;
  line-height:1.1;
}
.orb__tag svg{width:13px;height:13px;flex:0 0 13px}

.orb__tag--desp  {top:15%;left:50%;transform:translate(-50%,-50%)}
.orb__tag--colo  {top:41%;left:85%;transform:translate(-50%,-50%)}
.orb__tag--sestas{top:79%;left:74%;transform:translate(-50%,-50%)}
.orb__tag--berco {top:79%;left:27%;transform:translate(-50%,-50%)}
.orb__tag--mamada{top:41%;left:16%;transform:translate(-50%,-50%)}

.orb__tag--desp   svg{color:#B49BD8}
.orb__tag--colo   svg{color:#6FCF97}
.orb__tag--sestas svg{color:#F2C14E}
.orb__tag--berco  svg{color:#56A8F5}
.orb__tag--mamada svg{color:#F58BA8}

@media (min-width:700px){
  .orb{max-width:430px;margin-top:2.75rem}
  .orb__tag{font-size:.75rem;padding:.42rem .8rem;gap:.45rem}
  .orb__tag svg{width:16px;height:16px;flex:0 0 16px}
}
@media (min-width:1000px){
  .orb{max-width:480px}
  .orb__tag{font-size:.8125rem}
  .method--dark{margin-top:2.5rem}
}

/* quem pediu menos movimento vê o diagrama parado */
@media (prefers-reduced-motion:reduce){
  .orb__ring,.orb__glow{animation:none}
}


/* ============================================================
   CARDS DE BÓNUS · template dos 6
   Compacto de propósito: a arte é um mockup dentro do cartão,
   não um banner. Tudo em medidas partilhadas, para os 02–06
   entrarem sem uma linha de CSS específica.
   ============================================================ */
.bonuses{
  margin-top:1.75rem;
  display:grid;gap:1rem;
  max-width:860px;margin-inline:auto;
}
.bonus{
  display:flex;flex-direction:column;
  padding:1.1rem 1.15rem 1.15rem;
  border-radius:var(--radius);
  background:linear-gradient(170deg,#141A31,var(--navy-900));
  border:1px solid rgba(255,255,255,.09);
  box-shadow:var(--shadow);
  /* sem min-height: a altura vem do conteúdo */
}

/* topo: número à esquerda, valor e selo à direita */
.bonus__top{
  display:flex;align-items:center;justify-content:space-between;
  gap:.75rem;
}
.bonus__n{
  font-size:.6875rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--lilac);
}
.bonus__meta{display:inline-flex;align-items:center;gap:.5rem}
.bonus__was{font-size:.75rem;color:rgba(255,255,255,.36);text-decoration-thickness:1.5px}
.bonus__in{
  padding:.16rem .5rem;border-radius:999px;
  background:rgba(67,195,154,.12);
  font-size:.5625rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--mint);
}

/* a arte: mockup centrado, nunca à largura toda */
.bonus__shot{
  position:relative;
  margin:.9rem auto 0;
  width:min(44%,210px);
  aspect-ratio:1/1;          /* mesma caixa para todos os bónus */
  min-height:0;              /* item flex não cresce com o conteúdo */
}
/* a imagem sai do fluxo: assim a altura da caixa vem só do
   aspect-ratio, seja a capa vertical ou horizontal */
.bonus__shot picture{position:absolute;inset:0}
.bonus__shot img{
  display:block;width:100%;height:100%;
  object-fit:contain;        /* retrato ou paisagem, sem cortar */
  border-radius:10px;
}

/* ---- capas dos bónus: apagar a moldura escura da geração ---------------
   As 6 capas foram geradas sobre um fundo sólido quase preto (medido: de
   #000000 até #101229), sempre mais escuro que o gradiente do card
   (#141A31 → #0B1020). Com `lighten` cada pixel vira max(imagem, card):
   o fundo da imagem assume exatamente a cor do card e a "caixa" some,
   enquanto o mockup — todo acima desse limiar — fica intacto.
   `isolation` prende o blend ao card mesmo durante a animação .reveal,
   que cria stacking context via opacity/transform. */
.bonus{isolation:isolate}
.bonus__shot img[src*="bonus-01"]{mix-blend-mode:lighten}

/* ===== Bónus 01-06 — fusão das bordas com o fundo do card ===============
   Reversível: apagar deste comentário até o fim do último bloco.

   Porquê a geometria antes da máscara: com object-fit:contain a imagem
   retrato ocupava 122 dos 200px da caixa; uma máscara em % cairia no vazio
   lateral, não na borda real. Fazendo a caixa abraçar a imagem, cada % da
   máscara passa a corresponder à borda do ficheiro. O tamanho renderizado
   não muda — o lado limitante continua a ser o mesmo.

   Os valores NÃO são iguais entre bónus: cada lado foi medido até onde
   começa o conteúdo relevante da capa e recebeu essa margem + 4 pontos,
   limitado a 11%. O 03 fica nos 9% aprovados. O critério é o resultado
   visual, não o número. */

/* retratos — a altura é o lado limitante */

/* paisagem — no 01 a largura é o lado limitante, daí os eixos trocados */
.bonus__shot img[src*="bonus-01"]{
  width:100%;height:auto;position:absolute;left:0;top:50%;transform:translateY(-50%);
}

.bonus__shot img[src*="bonus-01"]{
  -webkit-mask-image:
    linear-gradient(to right ,transparent 0,#000 11%,#000 89%,transparent 100%),
    linear-gradient(to bottom,transparent 0,#000 5.8%,#000 94.2%,transparent 100%);
          mask-image:
    linear-gradient(to right ,transparent 0,#000 11%,#000 89%,transparent 100%),
    linear-gradient(to bottom,transparent 0,#000 5.8%,#000 94.2%,transparent 100%);
  -webkit-mask-composite:source-in;
          mask-composite:intersect;
}
/* o bónus 05 passou a usar a capa v2, de fundo branco: sem blend e sem
   máscara, igual aos bónus 02, 03 e 04. */

.bonus__t{
  margin-top:.95rem;text-align:center;
  font-family:var(--serif);
  font-size:1.0625rem;font-weight:600;line-height:1.28;
  color:#fff;
}
.bonus__d{
  margin-top:.45rem;text-align:center;
  font-size:.8125rem;line-height:1.5;
  color:rgba(255,255,255,.62);
}

/* detalhes fechados por omissão: não somam altura ao cartão */
.bonus__more{margin-top:.9rem;border-top:1px solid rgba(255,255,255,.08)}
.bonus__more summary{
  display:flex;align-items:center;justify-content:center;gap:.4rem;
  padding:.7rem 0 .1rem;
  cursor:pointer;list-style:none;
  font-size:.75rem;font-weight:600;color:var(--lilac);
}
.bonus__more summary::-webkit-details-marker{display:none}
.bonus__more .chev{
  width:18px;height:18px;flex:0 0 18px;
  background:transparent;color:var(--lilac);
}
.bonus__more .chev svg{width:12px;height:12px}
.bonus__more[open] .chev{transform:rotate(180deg)}
.bonus__more ul{margin-top:.7rem;display:grid;gap:.45rem}
.bonus__more li{
  position:relative;padding-left:1.1rem;
  font-size:.8125rem;line-height:1.45;color:rgba(255,255,255,.7);
}
.bonus__more li::before{
  content:"";position:absolute;left:0;top:.5em;
  width:9px;height:5px;
  border-left:2px solid var(--mint);border-bottom:2px solid var(--mint);
  transform:rotate(-45deg);
}

@media (min-width:700px){
  .bonus{padding:1.35rem 1.5rem 1.5rem}
  .bonus__t{font-size:1.125rem}
  .bonus__d{font-size:.875rem}
}
@media (min-width:900px){
  /* os 6 cartões em duas colunas, todos com a mesma largura */
  .bonuses{grid-template-columns:1fr 1fr;gap:1.25rem;max-width:none}
}

/* nota de fecho dentro dos detalhes de um bónus */
.bonus__note{
  margin-top:.85rem;padding-top:.75rem;
  border-top:1px solid rgba(255,255,255,.08);
  font-size:.8125rem;font-style:italic;line-height:1.5;
  color:rgba(255,255,255,.55);
}