/* =====================================================================
   Rodada 6 (24/10): Manifesto em duas cenas (ref. Intercom), integrações
   em grade de cartões (ref. Apollo), teleconsulta ao lado do editor
   (ref. Granola), etapas do Depois alternando (ref. Calendly), Sigilo em
   largura total e Fim sem sobra embaixo do rodapé.
   ===================================================================== */

/* ------------------------------------------------------ manifesto -- */
.manifesto2 { padding-block: clamp(5rem, 10vw, 8.5rem) clamp(3rem, 6vw, 5rem); }
.m2__titulo { max-width: 18ch; }
.m2__titulo em { color: var(--sc-accent); }
.m2__grade { margin-top: clamp(32px, 5vw, 56px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 28px); }
.m2__item h3 { margin-top: 22px; font: 600 var(--type-lg, 1.18rem)/1.3 var(--sc-font-text); color: var(--sc-ink); letter-spacing: -0.01em; }
.m2__item > p { margin-top: 8px; max-width: 48ch; color: var(--sc-ink-soft); font-size: 1rem; line-height: 1.55; }

.m2__cena {
  position: relative; aspect-ratio: 16 / 11; border-radius: var(--card-r);
  padding: clamp(20px, 3vw, 36px); display: flex; flex-direction: column; justify-content: center; gap: 10px;
  background:
    radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--sc-ink) 13%, transparent) 1px, transparent 1.4px) 0 0 / 14px 14px,
    var(--lilas-1);
  overflow: hidden;
}
.m2__cena--voce { background:
    radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--sc-ink) 13%, transparent) 1px, transparent 1.4px) 0 0 / 14px 14px,
    color-mix(in srgb, var(--accent) 4%, var(--bg-main)); }
.m2__card {
  background: var(--card); border-radius: 14px; box-shadow: var(--card-sombra);
  padding: 12px 14px; font-size: 0.88rem; color: var(--sc-ink); max-width: 360px; width: 100%;
}
.m2__de { display: flex; align-items: center; gap: 8px; font-size: 0.74rem; font-weight: 600; color: var(--sc-ink-soft); }
.m2__de .ico { width: 15px; height: 15px; color: var(--sc-accent); }
.m2__de .tag-ia { margin: 0; }
.m2__card p { margin-top: 6px; line-height: 1.45; }
.m2__card small { display: block; margin-top: 4px; font-size: 0.72rem; color: var(--sc-ink-soft); }
.m2__msg { align-self: flex-start; }
.m2__linha { display: flex; justify-content: space-between; align-items: center; gap: 12px; max-width: 300px; margin-left: clamp(24px, 6vw, 72px); }
.m2__badge {
  font: 500 var(--type-2xs, 0.72rem)/1 var(--sc-font-text); padding: 5px 8px; border-radius: 6px;
  background: var(--lilas-1); color: var(--sc-ink-soft);
  transition: background-color var(--motion-slow) var(--curve-decel), color var(--motion-slow) var(--curve-decel);
}
.m2__badge.feito { background: color-mix(in srgb, var(--feito) 14%, var(--bg-main)); color: color-mix(in srgb, var(--feito) 75%, black); }
.m2__rasc { align-self: flex-start; }
.m2__rev {
  align-self: flex-end; max-width: 330px;
  background: color-mix(in srgb, var(--accent) 12%, var(--bg-main));
  box-shadow: var(--card-sombra), inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent);
}
.m2__rev ul { margin-top: 6px; padding-left: 16px; display: grid; gap: 3px; line-height: 1.4; }
.m2__assina { align-self: flex-start; width: auto; display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: color-mix(in srgb, var(--feito) 75%, black); margin-left: clamp(24px, 5vw, 56px); }
.m2__assina .ico { width: 16px; height: 16px; }

/* ---------------------------------------------------- integrações -- */
.integra2 { padding-block: clamp(3rem, 6vw, 5rem) clamp(5rem, 10vw, 8rem); }
.i2__cab { text-align: center; }
.i2__titulo { margin-top: 12px; font-size: var(--sc-t-2xl, clamp(2rem, 3.6vw, 3rem)); }
.i2__grade { margin-top: clamp(28px, 4vw, 48px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; list-style: none; padding: 0; }
.i2__card {
  position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px;
  padding: 28px 22px 26px; border-radius: 16px; background: var(--card);
  box-shadow: inset 0 0 0 1px var(--linha);
  transition: transform var(--motion-slow) var(--curve-decel), box-shadow var(--motion-slow) var(--curve-decel);
}
.i2__card:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--linha), var(--card-sombra); }
.i2__ico {
  width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center;
  background: var(--sc-ink); color: var(--bg-main); position: relative; overflow: hidden;
}
.i2__ico .ico { width: 20px; height: 20px; }
/* brilho que atravessa o ícone quando o cartão chega */
.i2__ico::after {
  content: ""; position: absolute; inset: -40%; transform: translateX(-120%) rotate(20deg);
  background: linear-gradient(90deg, transparent, oklch(1 0 0 / 0.45), transparent);
}
.i2__card.chegou .i2__ico::after { animation: i2-brilho 900ms var(--curve-decel) 120ms both; }
@keyframes i2-brilho { to { transform: translateX(120%) rotate(20deg); } }
.i2__card b { font: 600 1rem/1.25 var(--sc-font-text); color: var(--sc-ink); }
.i2__card p { font-size: 0.86rem; line-height: 1.45; color: var(--sc-ink-soft); max-width: 30ch; }

/* --------------------------------------------- durante: teleconsulta -- */
@media (min-width: 901px) { .durante .editor-wrap { order: -1; } }
.editor-wrap { position: relative; padding-right: clamp(0px, 11vw, 150px); }
.tele {
  position: absolute; right: 0; bottom: -28px; width: clamp(150px, 13.5vw, 190px);
  border-radius: 16px; padding: 8px; background: oklch(0.22 0.03 300); color: oklch(0.96 0.01 300);
  box-shadow: 0 24px 48px -18px oklch(0.2 0.06 300 / 0.55);
  display: grid; gap: 6px; z-index: 3;
}
.tele__barra { display: flex; justify-content: space-between; align-items: center; font-size: 0.68rem; padding: 2px 4px; opacity: 0.85; font-variant-numeric: tabular-nums; }
.tele__rec { display: inline-flex; align-items: center; gap: 6px; }
.tele__rec i { width: 7px; height: 7px; border-radius: 50%; background: oklch(0.65 0.2 25); animation: tele-pisca 1.4s ease-in-out infinite; }
.tele__vid { position: relative; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; }
.tele__vid--pac { background: linear-gradient(160deg, oklch(0.72 0.05 60), oklch(0.55 0.05 40)); }
.tele__vid--voce { background: linear-gradient(160deg, oklch(0.70 0.05 280), oklch(0.50 0.06 290)); }
.tele__pessoa { position: absolute; inset: 14% 0 0; width: 100%; height: 86%; fill: oklch(1 0 0 / 0.55); }
.tele__nome { position: absolute; left: 6px; bottom: 5px; font-size: 0.62rem; padding: 2px 6px; border-radius: 6px; background: oklch(0 0 0 / 0.35); }
.tele__vid--pac { box-shadow: inset 0 0 0 2px oklch(0.75 0.12 150 / 0.9); }
.tele__onda { position: absolute; right: 7px; bottom: 7px; display: flex; gap: 2px; align-items: flex-end; height: 12px; }
.tele__onda i { width: 3px; border-radius: 2px; background: oklch(0.85 0.12 150); animation: tele-onda 900ms ease-in-out infinite; }
.tele__onda i:nth-child(2) { animation-delay: -300ms; }
.tele__onda i:nth-child(3) { animation-delay: -600ms; }
.tele__onda i:nth-child(4) { animation-delay: -150ms; }
.tele__ctrl { display: flex; justify-content: center; gap: 8px; padding: 2px 0 2px; }
.tele__ctrl span { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: oklch(1 0 0 / 0.12); }
.tele__ctrl .ico { width: 14px; height: 14px; }
.tele__ctrl .tele__fim { background: oklch(0.6 0.2 25); }
@keyframes tele-pisca { 50% { opacity: 0.35; } }
@keyframes tele-onda { 0%, 100% { height: 3px; } 50% { height: 12px; } }
/* com a transcrição pronta, a chamada acabou */
#editor[data-fim] ~ .tele .tele__onda i { animation: none; height: 3px; }

/* ---------------------------------------------------------- depois -- */
.depois2 { padding-block: clamp(5rem, 10vw, 8.5rem); }
.d2__grade { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.d2__copy { padding-top: clamp(0px, 3vw, 40px); }
.d2__passos { list-style: none; padding: 0; margin-top: clamp(24px, 3vw, 36px); border-top: 1px solid var(--linha); }
.d2__passo { position: relative; border-bottom: 1px solid var(--linha); padding: 18px 0; }
.d2__passo button {
  all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 12px; width: 100%;
  font: 600 1rem/1.3 var(--sc-font-text); color: var(--sc-ink); opacity: 0.42;
  transition: opacity var(--motion-slow) var(--curve-decel);
}
.d2__passo button:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 6px; }
.d2__passo button .ico { width: 18px; height: 18px; flex: none; color: var(--sc-accent); }
.d2__passo p {
  display: grid; grid-template-rows: 0fr; margin: 0; padding-left: 30px; color: var(--sc-ink-soft); font-size: 0.92rem; line-height: 1.5;
  opacity: 0; transition: grid-template-rows 420ms var(--curve-decel), opacity 300ms var(--curve-decel);
}
.d2__passo p > span { min-height: 0; overflow: hidden; padding-top: 8px; }
.d2__passo.ativo button { opacity: 1; }
.d2__passo.ativo p { grid-template-rows: 1fr; opacity: 1; }
.d2__prog { position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%; background: var(--sc-accent); transform-origin: left; transform: scaleX(0); }
.d2__passo.ativo .d2__prog { animation: d2-prog var(--d2-dur, 3600ms) linear forwards; }
.d2.pausado .d2__passo.ativo .d2__prog { animation-play-state: paused; }
@keyframes d2-prog { to { transform: scaleX(1); } }

.d2__palco {
  position: relative; aspect-ratio: 1 / 0.92; border-radius: clamp(22px, 2.6vw, 32px); overflow: hidden;
  background:
    radial-gradient(90% 70% at 50% 0%, color-mix(in srgb, var(--accent) 22%, white), transparent 70%),
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 30%, white) 0%, color-mix(in srgb, var(--accent) 70%, black 10%) 100%);
}
/* faixas verticais esfumadas atrás do cartão, como no Calendly */
.d2__palco::before {
  content: ""; position: absolute; inset: 30% -10%; opacity: 0.45;
  background: repeating-linear-gradient(90deg, transparent 0 18px, oklch(1 0 0 / 0.55) 18px 54px, transparent 54px 72px);
  -webkit-mask-image: radial-gradient(60% 70% at 50% 50%, #000, transparent 75%); mask-image: radial-gradient(60% 70% at 50% 50%, #000, transparent 75%);
  filter: blur(6px);
}
.d2__cena { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transform: translateY(14px) scale(0.98); pointer-events: none;
  transition: opacity 420ms var(--curve-decel), transform 520ms var(--curve-decel); }
.d2__cena.on { opacity: 1; transform: none; }
.d2__card {
  position: relative; width: min(300px, 72%); padding: 22px 22px 18px; border-radius: 18px; background: var(--card);
  box-shadow: 0 0 0 6px oklch(1 0 0 / 0.35), 0 30px 60px -24px oklch(0.25 0.08 300 / 0.5);
  display: grid; justify-items: center; gap: 10px; text-align: center;
}
.d2__selo { font: 500 0.72rem/1 var(--sc-font-text); padding: 5px 9px; border-radius: 6px; background: var(--lilas-1); color: var(--sc-accent); }
.d2__grande { width: 34px; height: 34px; color: var(--sc-ink); }
.d2__valor { font: 600 1.7rem/1.1 var(--sc-font-text); color: var(--sc-ink); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.d2__card b { font: 600 1rem/1.3 var(--sc-font-text); color: var(--sc-ink); }
.d2__card small { font-size: 0.7rem; color: var(--sc-ink-soft); }
.d2__acao {
  width: 100%; padding: 11px 12px; border-radius: 10px; font: 600 0.88rem/1.2 var(--sc-font-text);
  background: color-mix(in srgb, var(--accent) 16%, var(--bg-main)); color: var(--accent);
  transition: background-color 300ms var(--curve-decel), color 300ms var(--curve-decel);
}
.d2__acao.feito { background: var(--accent); color: var(--text-on-accent, white); }
.d2__card--lista { justify-items: stretch; text-align: left; }
.d2__card--lista .d2__selo, .d2__card--lista small { justify-self: center; }
.d2__lin { display: flex; justify-content: space-between; align-items: center; padding: 8px 2px; border-bottom: 1px solid var(--linha); font-size: 0.92rem; }
.d2__tag { font: 500 0.72rem/1 var(--sc-font-text); padding: 5px 8px; border-radius: 6px; background: var(--lilas-1); color: var(--sc-ink-soft); transition: background-color 300ms var(--curve-decel), color 300ms var(--curve-decel); }
.d2__tag.feito { background: color-mix(in srgb, var(--feito) 14%, var(--bg-main)); color: color-mix(in srgb, var(--feito) 75%, black); }

/* ---------------------------------------------------------- sigilo -- */
/* o roxo cresce até a largura toda: sem margem e sem canto no fim */
.sigilo { padding: 0; }
.sigilo__painel {
  border-radius: 0;
  clip-path: inset(calc((1 - var(--w)) * 9%) calc((1 - var(--w)) * 6%) round calc((1 - var(--w)) * 44px));
}

/* ------------------------------------------------------------- fim -- */
/* não é mais capítulo fixo: altura do conteúdo, rodapé encostado */
.fim--solto { background: radial-gradient(60% 70% at 70% 60%, color-mix(in oklab, var(--sc-accent) 12%, transparent), transparent 70%), var(--sc-canvas); }
.fim--solto [data-stage] { position: static; height: auto; overflow: visible; padding: 0 !important; background: none; display: block; }
.fim--solto .fim__centro { padding-block: clamp(5rem, 10vw, 8rem) clamp(4rem, 8vw, 6rem); }

/* --------------------------------------------------------- celular -- */
@media (max-width: 900px) {
  .m2__grade, .d2__grade { grid-template-columns: 1fr; }
  .m2__cena { aspect-ratio: auto; min-height: 280px; }
  .i2__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .i2__card { padding: 20px 14px; }
  .editor-wrap { padding-right: 0; padding-bottom: 0; }
  .tele { width: 112px; right: 10px; bottom: -58px; top: auto; padding: 6px; }
  .tele__vid--voce, .tele__barra span:last-child { display: none; }
  .tele__ctrl { display: none; }
  .d2__palco { aspect-ratio: 1 / 0.9; order: -1; }
  /* no celular a lista não sanfona: abrir e fechar empurrava o resto da página */
  .d2__passo p { grid-template-rows: 1fr; opacity: 0.55; transition: opacity 300ms var(--curve-decel); }
  .d2__passo.ativo p { opacity: 1; }
  .d2__passo button { opacity: 0.6; }
}
@media (max-width: 420px) { .i2__card { padding: 18px 10px; } .i2__card p { font-size: 0.8rem; } }

/* ------------------------------------------------ movimento reduzido -- */
@media (prefers-reduced-motion: reduce) {
  .tele__rec i, .tele__onda i { animation: none; }
  .i2__card .i2__ico::after { display: none; }
  .d2__passo .d2__prog { display: none; }
  .d2__cena { transition: none; }
}

/* ------------------------------------------- costura entre capítulos -- */
/* Sem sobreposição (dois capítulos na tela ao mesmo tempo liam como corte).
   O miolo encosta no alto do palco em vez de centrar: o vazio entre um
   capítulo e outro cai pela metade. */
@media (min-width: 901px) {
  section.durante > [data-stage], section.receita > [data-stage] { align-items: start; padding-top: max(112px, 14svh); }
}

/* ----------------------------------------------------- antes (desktop) -- */
/* As três peças cabem lado a lado: sem trilho que anda um pouco e corta.
   O capítulo fica preso enquanto os estados acontecem (confirmação chega,
   ficha completa, acessos ligados). No celular o trilho lateral continua. */
@media (min-width: 1100px) {
  .antes .trilho__fecha { display: none; }
  .antes__janela { -webkit-mask-image: none; mask-image: none; }
  .antes .trilho { justify-content: center; padding-inline: 0; }
}

/* =====================================================================
   Rodada 7: Depois preso à rolagem, cenas detalhadas; contato no fim.
   ===================================================================== */
.depois2 { padding-block: 0; }
.depois2 [data-stage] { display: grid; align-items: center; }
.d2__grade { align-items: center; }
.d2__copy { padding-top: 0; }
.d2__passo .d2__prog { transform: scaleX(var(--l, 0)); animation: none !important; transition: none; }

.d2__palco { aspect-ratio: auto; height: min(560px, 68svh); }
.d2__ficticio { position: absolute; top: 16px; right: 16px; z-index: 4; font-size: 0.7rem; padding: 4px 9px; border-radius: 999px; background: oklch(1 0 0 / 0.55); color: var(--sc-ink); }
.d2__cena { padding: 0 8%; }

/* peças comuns */
.d2__doc, .d2__chat, .d2__nota, .d2__agenda {
  position: relative; width: min(380px, 100%); background: var(--card); border-radius: 18px; padding: 18px;
  box-shadow: 0 0 0 6px oklch(1 0 0 / 0.35), 0 30px 60px -24px oklch(0.25 0.08 300 / 0.55);
  font-size: 0.86rem; color: var(--sc-ink);
}
.d2__av { width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--lilas-1); color: var(--sc-accent); font: 600 0.78rem/1 var(--sc-font-text); }
.d2__av .ico { width: 17px; height: 17px; }
.d2__av--wa { background: oklch(0.93 0.06 150); color: oklch(0.45 0.12 150); }
.d2__doc-cab, .d2__chat-cab { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--linha); }
.d2__doc-cab b, .d2__chat-cab b { display: block; font-size: 0.92rem; }
.d2__doc-cab small, .d2__chat-cab small { display: block; color: var(--sc-ink-soft); font-size: 0.74rem; margin-top: 2px; }
.d2__chip { margin-left: auto; font: 500 0.72rem/1 var(--sc-font-text); padding: 5px 9px; border-radius: 6px; background: var(--lilas-1); color: var(--sc-ink-soft); white-space: nowrap; transition: background-color 300ms var(--curve-decel), color 300ms var(--curve-decel); }
.d2__chip.feito { background: color-mix(in srgb, var(--feito) 14%, var(--bg-main)); color: color-mix(in srgb, var(--feito) 75%, black); }

/* o que chega dentro da cena, preso ao progresso local */
[data-em] { transition: opacity 360ms var(--curve-decel), transform 420ms var(--curve-decel); }
.d2__flut[data-em], .d2__bolha[data-em], .d2__slot--novo[data-em], .d2__vistos[data-em] { opacity: 0; transform: translateY(10px); }
.d2__flut[data-em].chegou, .d2__bolha[data-em].chegou, .d2__slot--novo[data-em].chegou, .d2__vistos[data-em].chegou { opacity: 1; transform: none; }

/* 0 · assinatura */
.d2__txt { margin-top: 10px; line-height: 1.5; color: var(--sc-ink); }
.d2__assin { margin-top: 14px; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--lilas-1); }
.d2__assin b { display: block; font-size: 0.84rem; }
.d2__assin small { display: block; font-size: 0.72rem; color: var(--sc-ink-soft); }
.d2__assin-ico { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--sc-ink); color: var(--bg-main); flex: none; }
.d2__assin-ico .ico { width: 16px; height: 16px; }

.d2__flut {
  position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: 14px; background: var(--card); font-size: 0.82rem; font-weight: 600; color: var(--sc-ink);
  box-shadow: 0 18px 36px -16px oklch(0.25 0.08 300 / 0.55);
}
.d2__flut > .ico { width: 16px; height: 16px; color: var(--feito); }
.d2__flut b { display: block; font-size: 0.86rem; }
.d2__flut small { display: block; font-weight: 400; color: var(--sc-ink-soft); font-size: 0.72rem; }
.d2__flut--a { top: 12%; left: 6%; }
.d2__flut--b { bottom: 10%; right: 6%; }
.d2__pix { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: oklch(0.93 0.05 190); color: oklch(0.45 0.09 190); flex: none; }
.d2__pix .ico { width: 16px; height: 16px; }

/* 1 · cobrança */
.d2__chat { background: oklch(0.975 0.008 120); }
.d2__chat-cab { background: transparent; }
.d2__bolha { position: relative; margin-top: 12px; max-width: 86%; margin-left: auto; padding: 10px 12px 18px; border-radius: 12px 12px 4px 12px; background: oklch(0.93 0.06 150); line-height: 1.45; }
.d2__bolha--ela { margin-left: 0; margin-right: auto; background: var(--card); border-radius: 12px 12px 12px 4px; box-shadow: inset 0 0 0 1px var(--linha); max-width: 60%; }
.d2__link { margin-top: 8px; display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 10px; background: oklch(1 0 0 / 0.7); }
.d2__link b { display: block; font-size: 0.84rem; }
.d2__link small { display: block; font-size: 0.72rem; color: var(--sc-ink-soft); }
.d2__hora { position: absolute; right: 10px; bottom: 4px; font-size: 0.66rem; color: var(--sc-ink-soft); }
.d2__vistos { display: inline-block; color: oklch(0.6 0.13 240); letter-spacing: -0.2em; margin-left: 2px; }

/* 2 · nota */
.d2__nota { margin-top: 36px; }
.d2__nota-cab { display: flex; align-items: center; padding-bottom: 10px; border-bottom: 1px solid var(--linha); }
.d2__nota-cab b { font-size: 1rem; letter-spacing: 0.02em; }
.d2__nota dl { margin-top: 10px; display: grid; grid-template-columns: auto 1fr; gap: 7px 16px; }
.d2__nota dt { color: var(--sc-ink-soft); }
.d2__nota dd { margin: 0; text-align: right; }
.d2__nota-pe { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--linha); display: flex; align-items: center; gap: 10px; }
.d2__nota-pe small { color: var(--sc-ink-soft); font-size: 0.7rem; line-height: 1.35; }
.d2__cod { width: 36px; height: 36px; flex: none; border-radius: 4px;
  background: conic-gradient(var(--sc-ink) 25%, transparent 0 50%, var(--sc-ink) 0 75%, transparent 0) 0 0 / 9px 9px; opacity: 0.75; }

/* 3 · retorno */
.d2__agenda-cab { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: 10px; border-bottom: 1px solid var(--linha); }
.d2__agenda-cab small { color: var(--sc-ink-soft); font-size: 0.74rem; }
.d2__semana { margin-top: 10px; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: auto repeat(4, 40px); gap: 6px; }
.d2__dia { text-align: center; font-size: 0.72rem; color: var(--sc-ink-soft); }
.d2__dia b { display: block; font-size: 1rem; color: var(--sc-ink); }
.d2__dia--hoje b { color: var(--sc-accent); }
.d2__slot { border-radius: 8px; padding: 5px 7px; font-size: 0.68rem; line-height: 1.25; overflow: hidden; }
.d2__slot.ocup { background: var(--lilas-1); color: var(--sc-ink-soft); }
.d2__slot--novo { background: var(--accent); color: var(--text-on-accent, white); box-shadow: 0 10px 20px -10px var(--accent); }
.d2__slot--novo b { display: block; font-size: 0.7rem; }

/* ---------------------------------------------------------- contato -- */
.contato { padding-block: clamp(5rem, 9vw, 7.5rem) clamp(4rem, 7vw, 6rem); text-align: center; border-top: 1px solid var(--linha); background: var(--sc-canvas); }
.c__titulo { font-size: clamp(2.6rem, 5vw, 4.4rem); }
.c__grade { margin: clamp(32px, 4vw, 48px) auto 0; max-width: 980px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.c__card {
  display: grid; justify-items: center; gap: 14px; padding: clamp(32px, 4vw, 52px) 24px; border-radius: 18px; text-decoration: none; color: var(--sc-ink);
  background: var(--card); box-shadow: inset 0 0 0 1px var(--linha);
  transition: transform var(--motion-slow) var(--curve-decel), box-shadow var(--motion-slow) var(--curve-decel);
}
.c__card:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--linha), var(--card-sombra); }
.c__card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.c__card > .ico { width: 34px; height: 34px; color: var(--sc-ink); }
.c__card b { font: 400 clamp(1.3rem, 2vw, 1.6rem)/1.2 var(--sc-font-display); }
.c__acao { color: var(--sc-ink-soft); text-decoration: underline; text-decoration-color: var(--sc-accent); text-underline-offset: 4px; }
.c__outros { margin-top: 28px; color: var(--sc-ink-soft); font-size: 0.92rem; }
.c__outros a { color: inherit; text-decoration-color: var(--sc-accent); text-underline-offset: 3px; }
.fim-rodape { background: var(--sc-canvas); }

@media (max-width: 900px) {
  .depois2 [data-stage] { align-items: start; }
  .d2__grade { gap: 20px; }
  .d2__palco { height: 46svh; min-height: 320px; }
  .d2__copy h2 { font-size: clamp(1.8rem, 7vw, 2.2rem); }
  .d2__passo { padding: 10px 0; }
  .d2__passo p { display: none; }
  .d2__cena { padding: 0 5%; transform: scale(0.86); }
  .d2__cena.on { transform: scale(0.86); }
  .c__grade { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .d2__flut[data-em], .d2__bolha[data-em], .d2__slot--novo[data-em], .d2__vistos[data-em] { opacity: 1; transform: none; }
}

/* =====================================================================
   Rodada 7b: rolagem mais leve. Sem vidro (backdrop-filter) nas camadas
   fixas, que recalculam o desfoque a cada quadro de rolagem; sem máscara
   nos chãos das seções altas; sem filtro no fundo das etapas.
   ===================================================================== */
.topo, .topo.rolou { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: color-mix(in oklab, var(--sc-canvas) 97%, transparent); }
.topo.escuro { background: oklch(0.235 0.045 300 / 0.97); }
.pend { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: oklch(0.995 0.003 300 / 0.98); }
.antes::before, .receita::before { -webkit-mask-image: none; mask-image: none; }
.antes::before { background: linear-gradient(to bottom, transparent, var(--bg-main, var(--sc-surface)) 32svh, var(--bg-main, var(--sc-surface)) calc(100% - 32svh), transparent); }
.receita::before { background: linear-gradient(to bottom, transparent, color-mix(in oklab, var(--sc-accent) 7%, var(--sc-canvas)) 32svh, color-mix(in oklab, var(--sc-accent) 7%, var(--sc-canvas)) calc(100% - 32svh), transparent); }
.d2__palco::before { filter: none; -webkit-mask-image: none; mask-image: none; opacity: 0.25;
  background: repeating-linear-gradient(90deg, transparent 0 18px, oklch(1 0 0 / 0.35) 18px 54px, transparent 54px 72px); }

/* =====================================================================
   Rodada 8: Cadastros, Gravação e Receita deixam de ficar presos na tela.
   Rolam como o resto da página; a coreografia toca sozinha quando a seção
   aparece (data-seq, em segundos).
   ===================================================================== */
section[data-seq] { position: relative; height: auto; }
section[data-seq] > [data-stage] {
  position: relative; top: auto; height: auto; overflow: visible;
  padding-top: clamp(4.5rem, 8vw, 7rem); padding-bottom: clamp(4.5rem, 8vw, 7rem);
}
@media (max-width: 1099px) {
  /* no celular o trilho do Antes é arrastado com o dedo, com encaixe por peça */
  section[data-seq] .antes__janela { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-mask-image: none; mask-image: none; }
  section[data-seq] .antes__janela::-webkit-scrollbar { display: none; }
  section[data-seq] .antes .peca, section[data-seq] .antes .trilho__fecha { scroll-snap-align: center; flex: none; }
}