/* ===========================================================================
   BRIEFING PEPPER — base, atmosfera, painel de vidro e elementos 3D
   =========================================================================== */

/* --- tokens --------------------------------------------------------------- */
:root{
  /* fundo: marfim quente, nunca branco puro */
  --canvas-1:#F5F1E9;
  --canvas-2:#E7DFD1;
  --canvas-3:#EFE9DE;

  /* tinta: grafite quente, nunca preto puro */
  --ink:#191613;
  --ink-2:#423D36;
  --ink-3:#645D53;

  /* vidro */
  --glass:rgba(255,253,249,.52);
  --glass-2:rgba(255,253,249,.74);
  --glass-3:rgba(255,253,249,.88);
  --hair:rgba(255,255,255,.78);
  --hair-2:rgba(121,110,94,.14);
  --hair-3:rgba(121,110,94,.26);
  /* borda de componente interativo: precisa de 3:1 de verdade, então é
     uma cor sólida própria, não um fio de opacidade baixa */
  --edge:#8F877A;
  --edge-soft:#B4AC9E;
  --muted:#736B5E;

  /* acento lilás, em doses raras */
  --lilac:#5F51CE;
  --lilac-2:#8279E6;
  --lilac-3:#A9A2F2;
  --lilac-wash:rgba(126,113,233,.13);
  --lilac-glow:rgba(126,113,233,.34);

  /* pérola e prata */
  --pearl:#DBD5C9;
  --pearl-2:#F7F4EE;

  /* pepper */
  --coral:#F2603C;

  /* erro, saturação controlada */
  --danger:#A83E2A;
  --danger-wash:rgba(168,62,42,.09);

  /* sombras */
  --shadow-panel:
    0 1px 1px rgba(96,84,66,.04),
    0 8px 20px rgba(96,84,66,.05),
    0 34px 70px rgba(96,84,66,.10),
    0 80px 140px rgba(96,84,66,.09);
  --shadow-card:0 1px 2px rgba(96,84,66,.05), 0 10px 26px rgba(96,84,66,.07);
  --shadow-lift:0 2px 4px rgba(96,84,66,.06), 0 16px 36px rgba(96,84,66,.11);

  /* curvas */
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-spring:cubic-bezier(.34,1.32,.5,1);

  --col:min(880px,70%);
  --r-panel:30px;
  --r-card:22px;
  --r-field:14px;

  --font-display:'Instrument Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-body:'Manrope',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}

/* --- reset ---------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html,body{overflow-x:hidden;overflow-x:clip}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  min-height:100vh;
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.55;
  color:var(--ink-2);
  background:var(--canvas-1);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
button,input,textarea,select{font:inherit;color:inherit}
img,svg{display:block;max-width:100%}
a{color:inherit}

.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none}

.visually-hidden{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
.skip{
  position:absolute;top:-100px;left:16px;z-index:80;
  padding:12px 18px;border-radius:0 0 12px 12px;
  background:var(--ink);color:var(--canvas-1);text-decoration:none;font-weight:600;
  transition:top .22s var(--ease);
}
.skip:focus{top:0}

:focus-visible{
  outline:2px solid var(--lilac);
  outline-offset:3px;
  border-radius:6px;
}

/* --- atmosfera: uma única camada de fundo atrás de tudo ------------------- */
.ambient{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  background:
    radial-gradient(120% 90% at 18% 4%, #FBF8F2 0%, rgba(251,248,242,0) 58%),
    radial-gradient(100% 80% at 88% 96%, #E3DACB 0%, rgba(227,218,203,0) 62%),
    linear-gradient(168deg,var(--canvas-3) 0%,var(--canvas-1) 42%,var(--canvas-2) 100%);
}
.ambient__glow{position:absolute;border-radius:50%;filter:blur(90px);opacity:.5}
.ambient__glow--a{
  width:52vw;height:52vw;left:-12vw;top:-16vw;
  background:radial-gradient(circle,rgba(140,127,236,.20) 0%,rgba(140,127,236,0) 70%);
  animation:drift-a 84s var(--ease) -22s infinite alternate;
}
.ambient__glow--b{
  width:46vw;height:46vw;right:-10vw;bottom:-14vw;
  background:radial-gradient(circle,rgba(214,203,181,.55) 0%,rgba(214,203,181,0) 70%);
  animation:drift-b 96s var(--ease) -40s infinite alternate;
}
@keyframes drift-a{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(5vw,4vw,0) scale(1.12)}}
@keyframes drift-b{from{transform:translate3d(0,0,0) scale(1.08)}to{transform:translate3d(-4vw,-3vw,0) scale(1)}}
.ambient__grain{
  position:absolute;inset:-50%;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --- palco e trilho de rolagem ------------------------------------------- */
.journey{position:relative;z-index:1;height:100vh}
.stage{
  position:sticky;top:0;height:100vh;
  display:grid;place-items:center;
  padding:clamp(14px,2.2vh,28px) clamp(12px,3vw,40px);
  --p:0; /* progresso da abertura para o formulário, escrito pelo app.js */
}
/* o trilho só existe onde há altura sobrando para a paralaxe valer a pena */
@media (min-width:900px) and (min-height:660px){
  .journey.is-open{height:180vh}
}

/* --- painel de vidro suspenso -------------------------------------------- */
.panel{
  position:relative;
  width:min(88vw,1240px);
  height:min(88vh,830px);
  min-height:520px;
  border-radius:var(--r-panel);
  background:
    linear-gradient(160deg,rgba(255,255,255,.60) 0%,rgba(255,253,248,.34) 52%,rgba(255,252,246,.52) 100%);
  border:1px solid var(--hair);
  box-shadow:var(--shadow-panel);
  -webkit-backdrop-filter:blur(26px) saturate(1.18);
  backdrop-filter:blur(26px) saturate(1.18);
  display:grid;
  grid-template-rows:auto 1fr;
  padding:clamp(18px,2.4vw,30px) clamp(18px,2.6vw,34px) clamp(16px,2.2vw,26px);
  overflow:hidden;
  isolation:isolate;
  opacity:0;
  transform:translate3d(0,16px,0) scale(.982);
  animation:panel-in 1s var(--ease) .06s forwards;
}
.panel::after{ /* borda iluminada no topo, como luz raspando o vidro */
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(175deg,rgba(255,255,255,.72),rgba(255,255,255,0) 22%);
  mix-blend-mode:screen;
}
@keyframes panel-in{to{opacity:1;transform:translate3d(0,0,0) scale(1)}}

/* volume acolchoado quase branco atrás dos cartões */
.pillow{
  position:absolute;z-index:0;pointer-events:none;
  left:50%;top:52%;width:min(72%,760px);height:min(74%,560px);
  translate:-50% -50%;
  border-radius:46% 54% 50% 50%/48% 46% 54% 52%;
  background:
    radial-gradient(64% 58% at 42% 34%, rgba(255,255,255,.94) 0%, rgba(255,255,255,.55) 46%, rgba(255,255,255,0) 78%),
    radial-gradient(70% 70% at 66% 76%, rgba(247,243,235,.86) 0%, rgba(247,243,235,0) 72%);
  filter:blur(2px);
  transform:scale(calc(1 + var(--p) * .06));
  transition:transform .8s var(--ease);
  animation:pillow-breathe 26s ease-in-out -7s infinite alternate;
}
@keyframes pillow-breathe{from{border-radius:46% 54% 50% 50%/48% 46% 54% 52%}to{border-radius:52% 48% 46% 54%/54% 50% 50% 46%}}

/* --- elementos tridimensionais ------------------------------------------- */
.decor{position:absolute;inset:0;z-index:1;pointer-events:none}
.decor > *{position:absolute;will-change:transform}

.orb{border-radius:50%}
/* esfera perolada com textura de partículas */
.orb--pearl-lg,.orb--pearl-sm{
  background:
    radial-gradient(circle at 34% 28%, #FFFFFF 0%, rgba(255,255,255,.5) 12%, rgba(255,255,255,0) 34%),
    radial-gradient(circle at 62% 70%, rgba(255,255,255,.5) 0%, rgba(255,255,255,0) 40%),
    repeating-radial-gradient(circle at 44% 38%, rgba(255,255,255,.85) 0 1px, rgba(0,0,0,0) 1px 4px),
    radial-gradient(circle at 42% 36%, #F3F0E9 0%, #D7D1C4 56%, #B6AE9E 100%);
  box-shadow:
    inset -6px -8px 16px rgba(120,110,92,.30),
    inset 4px 5px 10px rgba(255,255,255,.75),
    0 14px 26px rgba(120,108,88,.16);
}
.orb--pearl-lg{width:94px;height:94px;right:7%;top:24%;animation:float-a 17s ease-in-out -3s infinite alternate}
.orb--pearl-sm{width:48px;height:48px;left:3.4%;top:34%;animation:float-b 13s ease-in-out -6s infinite alternate}

/* esfera lilás sólida */
.orb--lilac{
  width:52px;height:52px;right:8.6%;top:60%;
  background:
    radial-gradient(circle at 32% 26%, #FFFFFF 0%, rgba(255,255,255,.35) 14%, rgba(255,255,255,0) 40%),
    radial-gradient(circle at 44% 38%, #9E95F0 0%, #6C5DDA 58%, #4A3DB0 100%);
  box-shadow:inset -5px -6px 14px rgba(45,33,110,.42), 0 12px 24px rgba(96,80,200,.22);
  animation:float-c 15s ease-in-out -2s infinite alternate;
}

/* bolhas de vidro */
.orb--bubble-lg,.orb--bubble-sm{
  background:
    radial-gradient(circle at 30% 26%, rgba(255,255,255,.96) 0%, rgba(255,255,255,.28) 16%, rgba(255,255,255,0) 38%),
    radial-gradient(circle at 70% 78%, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 30%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.06) 55%, rgba(203,196,238,.30) 88%, rgba(255,255,255,.7) 100%);
  border:1px solid rgba(255,255,255,.62);
  box-shadow:inset 0 -8px 18px rgba(150,140,190,.14), 0 12px 26px rgba(110,100,140,.10);
  -webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);
}
.orb--bubble-lg{width:78px;height:78px;left:4.2%;top:64%;animation:float-b 19s ease-in-out -9s infinite alternate}
.orb--bubble-sm{width:30px;height:30px;left:6.6%;top:89%;animation:float-a 12s ease-in-out -4s infinite alternate}

.decor__tube--squiggle{width:118px;right:6.5%;top:11%;animation:float-c 21s ease-in-out -8s infinite alternate}
.decor__tube--hook{width:86px;left:2.2%;top:49%;animation:float-a 18s ease-in-out -11s infinite alternate}
.decor__ribbon{width:142px;right:6%;top:77%;opacity:.9;animation:float-b 24s ease-in-out -5s infinite alternate}

.decor__dust{opacity:.75}
.decor__dust--left{width:126px;left:1.2%;top:5%}
.decor__dust--top{width:148px;right:6.6%;top:36%}
.decor__dust--right{width:104px;left:2.2%;top:83%}

@keyframes float-a{from{transform:translate3d(0,0,0) rotate(0deg)}to{transform:translate3d(6px,-16px,0) rotate(5deg)}}
@keyframes float-b{from{transform:translate3d(0,0,0) rotate(0deg)}to{transform:translate3d(-9px,-13px,0) rotate(-6deg)}}
@keyframes float-c{from{transform:translate3d(0,0,0) rotate(-3deg)}to{transform:translate3d(8px,12px,0) rotate(4deg)}}

/* a aba escondida não gasta bateria */
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}

/* --- cabeçalho ------------------------------------------------------------ */
.head{
  position:relative;z-index:3;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding-bottom:clamp(10px,1.4vw,16px);
}
.logo{
  display:inline-flex;align-items:center;gap:2px;
  text-decoration:none;color:var(--ink);
  font-family:var(--font-display);font-weight:700;font-size:21px;letter-spacing:-.028em;
}
.logo__word{line-height:1}
.logo__mark{width:15px;height:15px;color:var(--coral);margin-bottom:6px;transition:transform .5s var(--ease)}
.logo:hover .logo__mark{transform:rotate(90deg)}

.head__meta{display:flex;align-items:center;gap:12px}
.head__label{
  font-family:var(--font-mono);font-size:11px;font-weight:500;
  letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);
}
.pill{
  display:inline-flex;align-items:center;height:27px;padding:0 12px;
  border-radius:999px;background:var(--glass-2);border:1px solid var(--hair);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 2px 6px rgba(120,108,88,.07);
  font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:.05em;color:var(--ink-2);
  white-space:nowrap;
}

/* --- corpo: camadas empilhadas ------------------------------------------- */
.panel__body{position:relative;z-index:3;min-height:0}
.intro,.flow,.done{
  position:absolute;inset:0;
  display:flex;flex-direction:column;
  transition:opacity .5s var(--ease), transform .55s var(--ease), filter .45s var(--ease);
}
.intro[hidden],.flow[hidden],.done[hidden]{display:none}
.layer-out{opacity:0;transform:translate3d(0,-22px,0) scale(.985);pointer-events:none}
.layer-in{opacity:1;transform:none}
.layer-pre{opacity:0;transform:translate3d(0,26px,0) scale(.99)}

/* --- abertura ------------------------------------------------------------ */
.intro{
  justify-content:center;
  transition:none;
  opacity:calc(1 - var(--p) * 1.55);
  transform:translate3d(0,calc(var(--p) * -46px),0);
}
.intro__copy{
  position:relative;z-index:2;
  width:var(--col);margin-inline:auto;
  padding:clamp(24px,2.6vw,36px) clamp(22px,2.6vw,34px);
}

/* o baralho já existe na abertura: as lâminas que o briefing vai virar */
.intro__deck{position:absolute;inset:0;z-index:1;pointer-events:none}
.intro__deck li{
  position:absolute;left:50%;top:50%;
  width:var(--col);height:min(74%,420px);
  translate:-50% -50%;
  border-radius:var(--r-card);
  background:linear-gradient(168deg,rgba(255,255,255,.50),rgba(255,253,248,.22));
  border:1px solid rgba(255,255,255,.62);
  box-shadow:0 -1px 0 rgba(255,255,255,.7) inset, 0 8px 26px rgba(120,108,88,.05);
  /* as lâminas vêm para a frente enquanto o visitante rola para o formulário */
  transform:translate3d(
      calc(var(--i) * 3px - var(--p) * var(--i) * 3px),
      calc(var(--i) * -11px + var(--p) * var(--i) * 7px - var(--p) * 14px),
      0)
    scale(calc(1 - var(--i) * .024 + var(--p) * var(--i) * .016));
  opacity:calc(.7 - var(--i) * .13);
  transform-origin:50% 100%;
  animation:slide-in .8s var(--ease) backwards;
}
.intro__deck li:nth-child(1){animation-delay:.10s}
.intro__deck li:nth-child(2){animation-delay:.16s}
.intro__deck li:nth-child(3){animation-delay:.22s}
.intro__deck li:nth-child(4){animation-delay:.28s}
@keyframes slide-in{from{opacity:0;transform:translate3d(0,6px,0) scale(.96)}}
.intro__title{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(31px,4.4vw,58px);line-height:1.03;letter-spacing:-.035em;
  color:var(--ink);max-width:17ch;
  text-wrap:balance;
}
.intro__title em{
  font-style:normal;position:relative;
  background:linear-gradient(94deg,var(--lilac) 0%,var(--lilac-2) 58%,var(--lilac-3) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.intro__lede{
  margin-top:clamp(16px,1.8vw,22px);
  font-size:clamp(15px,1.16vw,17px);line-height:1.62;color:var(--ink-2);
  max-width:52ch;
}
.intro__actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:clamp(24px,2.8vw,36px)}
.intro__note{font-size:13.5px;color:var(--ink-3)}
.intro__resume{
  margin-top:20px;font-size:13.5px;color:var(--ink-3);
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
}
.intro__sep{color:var(--hair-3)}
.linkbtn{
  background:none;border:0;padding:0;cursor:pointer;
  color:var(--lilac);font-weight:600;font-size:13.5px;
  text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;
  transition:color .2s var(--ease);
}
.linkbtn:hover{color:var(--ink)}
.linkbtn--quiet{color:var(--ink-3);font-weight:500}

/* entrada escalonada da abertura */
.intro__title,.intro__lede,.intro__actions,.intro__resume{
  opacity:0;transform:translateY(14px);
  animation:rise .78s var(--ease) forwards;
}
.intro__title{animation-delay:.30s}
.intro__lede{animation-delay:.40s}
.intro__actions{animation-delay:.50s}
.intro__resume{animation-delay:.58s}
@keyframes rise{to{opacity:1;transform:none}}

/* --- botões -------------------------------------------------------------- */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  height:50px;padding:0 26px;border-radius:999px;border:1px solid transparent;
  font-family:var(--font-display);font-weight:600;font-size:15.5px;letter-spacing:-.012em;
  cursor:pointer;overflow:hidden;text-decoration:none;white-space:nowrap;
  transition:transform .22s var(--ease-spring), box-shadow .26s var(--ease),
             background-color .22s var(--ease), color .22s var(--ease), opacity .22s var(--ease);
}
.btn__arrow{width:16px;height:16px;flex:none;transition:transform .26s var(--ease)}
.btn:hover .btn__arrow{transform:translateX(3px)}
.btn:hover .btn__arrow--back{transform:translateX(-3px)}

.btn--primary{
  background:linear-gradient(178deg,#2E2A25 0%,#171410 100%);
  color:#FBF8F2;
  box-shadow:0 1px 0 rgba(255,255,255,.18) inset, 0 8px 20px rgba(30,24,16,.22);
}
.btn--primary:hover{transform:translateY(-2px);box-shadow:0 1px 0 rgba(255,255,255,.22) inset, 0 14px 30px rgba(30,24,16,.28)}
.btn--primary:active{transform:translateY(0) scale(.975)}

.btn--ghost{
  background:var(--glass-2);color:var(--ink-2);border-color:var(--edge-soft);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
}
.btn--ghost:hover{transform:translateY(-2px);background:var(--glass-3);color:var(--ink);box-shadow:var(--shadow-card)}
.btn--ghost:active{transform:translateY(0) scale(.975)}

.btn--wa{
  background:var(--glass-3);color:var(--ink);border-color:var(--edge);
  box-shadow:var(--shadow-card);margin-top:26px;
}
.btn--wa:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift)}
.btn__wa{width:19px;height:19px;flex:none}

.btn[disabled],.btn[aria-disabled="true"]{opacity:.42;cursor:not-allowed;transform:none!important}

/* reflexo curto atravessando a cápsula após o clique */
.btn__sheen{
  position:absolute;inset:0;pointer-events:none;opacity:0;
  background:linear-gradient(105deg,transparent 34%,rgba(255,255,255,.42) 50%,transparent 66%);
  transform:translateX(-115%);
}
.btn.is-sheening .btn__sheen{opacity:1;animation:sheen .62s var(--ease) forwards}
@keyframes sheen{to{transform:translateX(115%)}}

/* estado de envio: brilho percorrendo a cápsula */
.btn.is-sending{pointer-events:none}
.btn.is-sending .btn__ring{
  position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;
  background:linear-gradient(100deg,transparent 30%,rgba(169,162,242,.85) 50%,transparent 70%);
  animation:ring-run 1.15s linear infinite;
}
@keyframes ring-run{from{transform:translateX(-100%)}to{transform:translateX(100%)}}

@media (pointer:coarse){
  .btn{min-height:48px;display:inline-flex;align-items:center;justify-content:center}
  .linkbtn{min-height:44px;display:inline-flex;align-items:center}
}

/* --- trilho de progresso -------------------------------------------------- */
.spine{
  position:absolute;z-index:4;right:clamp(14px,1.6vw,22px);top:50%;translate:0 -50%;
  display:flex;flex-direction:column;align-items:center;gap:12px;
  opacity:0;transition:opacity .5s var(--ease) .1s;
}
.spine[data-state="running"]{opacity:1}
.spine__rail{
  position:relative;width:34px;padding:11px 0;border-radius:999px;
  background:var(--glass-2);border:1px solid var(--hair);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 4px 14px rgba(120,108,88,.09);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.spine__fluid{
  position:absolute;left:50%;top:15.5px;translate:-50% 0;
  width:3px;border-radius:999px;
  height:calc(var(--fill,0) * 96px);
  background:linear-gradient(180deg,var(--lilac-3),var(--lilac));
  box-shadow:0 0 10px var(--lilac-glow);
  transition:height .55s var(--ease);
}
.spine__beads{position:relative;display:flex;flex-direction:column;align-items:center;gap:15px}
.spine__bead{
  position:relative;width:9px;height:9px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%, #FFFFFF 0%, #E0DACE 55%, #C3BBAB 100%);
  box-shadow:inset 0 -1px 2px rgba(120,108,88,.3);
  transition:transform .4s var(--ease-spring), background .4s var(--ease), box-shadow .4s var(--ease);
}
.spine__bead::after{
  content:'';position:absolute;inset:-6px;border-radius:50%;
  border:1px solid var(--lilac-3);opacity:0;transform:scale(.6);
}
.spine__bead.is-done{
  background:radial-gradient(circle at 34% 30%, #FFFFFF 0%, var(--lilac-3) 38%, var(--lilac) 100%);
  box-shadow:0 0 9px var(--lilac-glow);
}
.spine__bead.is-current{transform:scale(1.42)}
.spine__bead.pulse::after{animation:bead-pulse .72s var(--ease) forwards}
@keyframes bead-pulse{0%{opacity:.9;transform:scale(.6)}100%{opacity:0;transform:scale(1.5)}}

.spine__text{display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center}
.spine__pct{font-family:var(--font-mono);font-size:11.5px;font-weight:500;color:var(--ink-2)}
.spine__group{
  display:none;font-size:10.5px;color:var(--ink-3);max-width:96px;line-height:1.32;
}

/* --- confirmação ---------------------------------------------------------- */
.done{align-items:center;justify-content:center;text-align:center;padding:0 clamp(12px,4vw,40px)}
.done__seal{position:relative;width:112px;height:112px;display:grid;place-items:center;margin-bottom:26px}
.done__sphere{
  position:absolute;inset:16px;border-radius:50%;
  background:
    radial-gradient(circle at 32% 26%, #FFFFFF 0%, rgba(255,255,255,.4) 15%, rgba(255,255,255,0) 42%),
    radial-gradient(circle at 46% 40%, #A9A2F2 0%, #6D5FDB 60%, #4C3FB4 100%);
  box-shadow:inset -6px -8px 18px rgba(45,33,110,.4), 0 16px 34px rgba(96,80,200,.28);
  transform:scale(.4);opacity:0;
  animation:seal-in .8s var(--ease-spring) .34s forwards;
}
.done__check{
  position:relative;width:48px;height:48px;color:#FFFFFF;z-index:2;
  opacity:0;animation:check-in .5s var(--ease) .92s forwards;
}
.done__check path{stroke-dasharray:40;stroke-dashoffset:40;animation:check-draw .58s var(--ease) .96s forwards}
.done__pulse{
  position:absolute;inset:10px;border-radius:50%;border:1.5px solid var(--lilac-3);
  opacity:0;animation:seal-pulse 1s var(--ease) 1.05s forwards;
}
.done__sparks{position:absolute;inset:-30px;pointer-events:none}
.done__spark{
  position:absolute;left:50%;top:50%;width:5px;height:5px;border-radius:50%;
  background:radial-gradient(circle at 32% 30%,#FFFFFF,#CFC8F4);
  box-shadow:0 0 6px rgba(140,127,236,.7);
  animation:spark-in .85s var(--ease) forwards;
}
@keyframes seal-in{to{transform:scale(1);opacity:1}}
@keyframes check-in{to{opacity:1}}
@keyframes check-draw{to{stroke-dashoffset:0}}
@keyframes seal-pulse{0%{opacity:.85;transform:scale(.92)}100%{opacity:0;transform:scale(1.42)}}
@keyframes spark-in{
  0%{opacity:0;transform:translate3d(var(--sx),var(--sy),0) scale(.6)}
  25%{opacity:1}
  100%{opacity:0;transform:translate3d(0,0,0) scale(.3)}
}
.done__title{
  outline-offset:6px;
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(27px,3.3vw,42px);line-height:1.06;letter-spacing:-.032em;color:var(--ink);
  opacity:0;animation:rise .7s var(--ease) 1.05s forwards;
}
.done__text{
  margin-top:16px;max-width:48ch;font-size:16px;line-height:1.62;color:var(--ink-2);
  opacity:0;animation:rise .7s var(--ease) 1.16s forwards;
}
.done__note{
  margin-top:10px;font-size:14.5px;color:var(--ink-3);
  opacity:0;animation:rise .7s var(--ease) 1.26s forwards;
}
.done .btn--wa{opacity:0;animation:rise .7s var(--ease) 1.38s forwards}
.done__sig{
  display:inline-flex;align-items:flex-start;gap:1px;
  margin-top:30px;font-family:var(--font-display);font-weight:700;font-size:15px;
  letter-spacing:-.02em;color:var(--ink-3);
  opacity:0;animation:rise .7s var(--ease) 1.5s forwards;
}
.done__ast{width:10px;height:10px;color:var(--coral);margin-top:1px}

/* --- respiro em telas menores -------------------------------------------- */
@media (max-width:1180px){
  :root{--col:min(820px,74%)}
}
@media (max-width:1024px){
  :root{--col:min(760px,84%)}
  .decor__ribbon,.decor__dust--top,.orb--bubble-sm{display:none}
}
@media (max-width:900px){
  :root{--col:100%}
  .intro__copy{padding:0}
  .intro__deck{display:none}
  .stage{padding:8px;place-items:stretch}
  .panel{
    width:100%;height:auto;
    min-height:calc(100vh - 16px);min-height:calc(100dvh - 16px);
    border-radius:22px;
    padding:16px 16px calc(12px + env(safe-area-inset-bottom,0px));
    grid-template-rows:auto auto 1fr;
  }
  .pillow{width:120%;height:44%;top:38%;filter:blur(6px)}
  .intro__title{max-width:14ch}
  .intro__actions{gap:14px}
  .intro__actions .btn{width:100%}
  .intro__note{width:100%}

  /* a cápsula vira horizontal no topo */
  .spine{
    position:static;translate:none;flex-direction:row;align-items:center;gap:10px;
    width:100%;padding:2px 0 12px;
  }
  .spine__rail{width:100%;padding:0 12px;height:30px;display:flex;align-items:center}
  .spine__fluid{
    left:16.5px;top:50%;translate:0 -50%;
    height:3px;width:calc(var(--fill,0) * (100% - 33px));
    transition:width .55s var(--ease);
  }
  .spine__beads{flex-direction:row;width:100%;justify-content:space-between;gap:0}
  .spine__text{flex-direction:row;gap:6px;align-items:baseline;flex:none}
  .spine__group{display:none}

  /* menos elementos, e nenhum sobre o conteúdo */
  .decor__ribbon,.decor__dust--left,.decor__dust--right,.decor__dust--top,
  .orb--bubble-lg,.orb--bubble-sm,.decor__tube--hook{display:none}
  /* no celular tudo fica atrás do cartão, sangrando pelas laterais.
     A faixa do cabeçalho e a dos botões ficam limpas. */
  .orb--pearl-lg{width:56px;height:56px;right:-18px;top:26%}
  .orb--pearl-sm{width:28px;height:28px;left:-11px;top:41%}
  .orb--lilac{width:30px;height:30px;right:-8px;top:62%;bottom:auto}
  .decor__tube--squiggle{width:72px;right:auto;left:-24px;top:76%;bottom:auto}
}

/* telas baixas: as decorações somem antes de encostar no conteúdo */
@media (max-height:600px){
  .decor{display:none}
  .panel{min-height:0;height:auto}
}

@media (min-width:901px){
  .panel__body{padding-right:64px}
  .spine__group{display:block}
}

/* --- movimento reduzido: só fades curtos ---------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.12s!important;transition-delay:0ms!important;
  }
  .panel{opacity:1;transform:none}
  .intro__title,.intro__lede,.intro__actions,.intro__resume,
  .done__title,.done__text,.done__note,.done__sig,.done .btn--wa{opacity:1;transform:none}
  .done__sphere{opacity:1;transform:scale(1)}
  .done__check{opacity:1}
  .done__check path{stroke-dashoffset:0}
  .done__sparks{display:none}
  .journey.is-open{height:100vh}
  .intro{opacity:1;transform:none}
  .pillow{transform:none}
}