/* ============================================================================
   STUDIO WOLVER — página de obrigado (captura.html -> obrigado.html)
   Herda tokens e componentes de main.css.

   Regra que organiza esta tela: a agenda é a ação, então ela sobe. Em duas
   colunas o Calendly começa na mesma altura do H1 e aparece já na primeira
   tela, sem exigir rolagem. O "o que acontece agora" é apoio e desce.
   ========================================================================= */

/* ---------- Cabeçalho reduzido: sem nav, sem menu, sem saída ---------- */
.header--bare .header__inner { justify-content: center; }
.header--bare .header__logo img { height: 30px; }

/* ---------- Grade da tela ---------- */
.checkout {
  padding-top: calc(var(--header-h) + clamp(26px, 4vh, 48px));
  padding-bottom: clamp(48px, 7vh, 96px);
}
.checkout__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  grid-template-areas:
    "head  agenda"
    "intro agenda"
    "after agenda";
  column-gap: clamp(32px, 4.5vw, 68px);
  row-gap: clamp(36px, 4.5vw, 58px);
  align-items: start;
}
.checkout__head   { grid-area: head; display: flex; flex-direction: column; gap: clamp(14px, 1.8vw, 20px); }
.checkout__intro  { grid-area: intro; display: flex; flex-direction: column; gap: 18px; }
.checkout__agenda { grid-area: agenda; display: flex; flex-direction: column; gap: 18px; }
.checkout__after  { grid-area: after; display: flex; flex-direction: column; gap: clamp(22px, 2.6vw, 30px); }

/* Empilhado, a ordem passa a ser a do DOM: confirmação, agenda, detalhe. */
@media (max-width: 1100px) {
  .checkout__grid {
    grid-template-columns: 1fr;
    grid-template-areas: "head" "agenda" "intro" "after";
    row-gap: clamp(26px, 4vw, 40px);
  }
  .checkout__head, .checkout__intro { max-width: 62ch; }
}

/* ---------- Confirmação ---------- */
/* Coluna estreita: o display cai um degrau para não virar seis linhas. */
.checkout__head h1.display { font-size: clamp(2rem, 3vw, 2.7rem); max-width: 15ch; }
.checkout__head h1 .gold { color: var(--gold-lt); }
.done__lede { font-size: clamp(0.95rem, 0.92rem + 0.25vw, 1.06rem); max-width: 48ch; }

.done__badge {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  align-self: flex-start;
  padding: 8px 14px;
  border: 1px solid var(--gold);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-lt);
}
.done__badge iconify-icon { font-size: 16px; }

/* Eco do que o visitante acabou de preencher: prova que o envio funcionou. */
.recap {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.recap:empty { display: none; }
.recap__item {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--line-2);
  font-size: 0.72rem;
  color: var(--paper-2);
  line-height: 1.4;
}
.recap__k {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- Agenda ---------- */
.agenda__head { display: flex; flex-direction: column; gap: 9px; }
.agenda__title {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.8vw, 1.5rem);
  line-height: 1.14;
  text-transform: uppercase;
}
.agenda__meta { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.agenda__meta li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--muted);
  line-height: 1.4;
}
.agenda__meta iconify-icon { color: var(--gold-lt); font-size: 15px; flex: none; }
.agenda__note { font-size: 0.75rem; line-height: 1.6; }

.booking__frame {
  position: relative;          /* a camada de "carregando" cobre o frame, não a seção */
  border: 1px solid var(--line);
  border-top: 1px solid var(--gold);
  background: var(--ink-2);
  overflow: hidden;
}
/* O widget precisa de altura reservada: sem isso ele abre em 0px e a página
   pula quando o iframe termina de carregar. 700px é o piso confortável do
   Calendly (abaixo disso ele cria barra de rolagem própria). */
.calendly-slot { min-width: 300px; height: 700px; width: 100%; }
@media (max-width: 1100px) { .calendly-slot { height: 720px; } }
@media (max-width: 480px)  { .calendly-slot { height: 760px; } }

/* Enquanto o script externo não responde, o espaço não fica vazio nem branco. */
.booking__loading {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  gap: 14px;
  text-align: center;
  padding: 24px;
  pointer-events: none;
  transition: opacity 0.4s var(--ease);
}
.booking__frame.is-ready .booking__loading { opacity: 0; }
.booking__loading p { font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted-2); }

/* ---------- Detalhe (abaixo da confirmação) ---------- */
.mini-steps { display: flex; flex-direction: column; }
.mini-step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: start;
  padding-block: 18px;
  border-bottom: 1px solid var(--line);
}
.mini-step:first-child { border-top: 1px solid var(--line); }
.mini-step__n {
  font-family: var(--font-display);
  font-size: 1.15rem;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--gold);
  padding-top: 2px;
}
.mini-step h3 { font-size: 0.98rem; margin-bottom: 4px; }
.mini-step p { font-size: 0.86rem; line-height: 1.6; color: var(--muted); }

/* Plano B honesto: nem todo mundo consegue ou quer usar o widget. */
.fallback {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: clamp(20px, 2.4vw, 28px);
  border: 1px solid var(--line);
  border-left: 1px solid var(--gold);
  background: var(--ink-3);
}
.fallback p { font-size: 0.86rem; line-height: 1.6; }