/* ==========================================================================
   Glimpses — Festas (/festas/)
   Mesma gramática da landing: papel, tinta, um vermelhão por tela, fio de
   1 px, sem degradê e sem canto arredondado em card. Aqui a página inteira
   é o negativo: tinta no fundo, papel na tipografia — e o álbum do dia
   seguinte é o único respiro claro.
   Só cor e os poucos blocos que não existem na home. Layout, movimento e
   comportamento vêm de styles.css / motion.css / main.js.
   ========================================================================== */

.festas {
  background: var(--ink);
  color: var(--paper);
}

/* Tons de papel sobre tinta — o equivalente escuro de --body/--muted. */
.festas {
  --on-ink:        rgba(244, 240, 230, .78);
  --on-ink-soft:   rgba(244, 240, 230, .62);
  --on-ink-faint:  rgba(244, 240, 230, .45);
  --hair-ink:      rgba(244, 240, 230, .14);
  --hair-ink-2:    rgba(244, 240, 230, .28);
}

/* ── Fios: toda borda clara da home vira fio de papel ─────────────────── */
.festas .nav,
.festas .menu,
.festas .menu a,
.festas .stats,
.festas .stat,
.festas .editorial,
.festas .split,
.festas .section,
.festas .timeline li,
.festas .faq,
.festas .qa,
.festas .cta,
.festas .footer,
.festas .sticky-cta { border-color: var(--hair-ink); }

.festas .stat:nth-child(odd) { border-right-color: var(--hair-ink); }
.festas .timeline li.is-active { border-color: var(--accent); }

/* ── Texto ───────────────────────────────────────────────────────────── */
.festas .lede,
.festas .cta__sub,
.festas .faq__sub,
.festas .qa > p,
.festas .step > p,
.festas .signup__msg,
.festas .rail__hint { color: var(--on-ink); }

.festas .note,
.festas .label,
.festas .signup__label,
.festas .signup__consent,
.festas .footer__meta,
.festas .sticky-cta__sub,
.festas .timeline .mono { color: var(--on-ink-soft); }

.festas .label--xs { color: var(--on-ink-faint); }
.festas .dim { color: var(--on-ink-faint); }
.festas .signup__consent a { color: var(--paper); }
.festas .qa summary i { color: var(--on-ink-faint); }
.festas .signup__msg[data-state="error"] { color: var(--accent); }

/* ── Barra fixa e menu ───────────────────────────────────────────────── */
.festas .nav { background: rgba(26, 22, 18, .94); }
.festas .menu { background: var(--ink); }
.festas .nav__toggle span { background: var(--paper); }

/* Selo da linha: o mesmo fio de 1 px do resto da marca. */
.badge {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .2em;
  color: var(--accent);
  border: 1px solid var(--accent);
  padding: 4px 8px;
  line-height: 1;
}

/* ── Botões e campos sobre tinta ─────────────────────────────────────── */
.festas .btn--primary { background: var(--accent); color: var(--paper); }
.festas .btn--primary:hover { background: var(--paper); color: var(--ink); }
.festas .btn--ghost { color: var(--paper); }
.festas .btn--ghost:hover { color: var(--accent); }
.festas .link-underline { border-bottom-color: var(--hair-ink-2); }
.festas .link-underline:hover { border-color: var(--accent); }

.festas .signup input {
  background: transparent;
  color: var(--paper);
  border-color: var(--hair-ink-2);
}
.festas .signup input::placeholder { color: var(--on-ink-faint); }
.festas .signup input[aria-invalid="true"] { border-color: var(--accent); }
.festas .signup [disabled]:hover { background: var(--accent); }
@media (min-width: 1024px) { .festas .signup input { border-right: 0; } }

/* ── Pontos: sobre tinta o ponto "de tinta" é de papel ───────────────── */
.festas .dot--ink { background: var(--paper); }
.festas .dot--hair { background: var(--hair-ink-2); }
/* Dentro de qualquer superfície clara (mockups, álbum) o ponto volta. */
.festas .phone .dot--ink,
.festas .mock .dot--ink,
.festas .portal .dot--ink,
.festas .footer .dot--ink { background: var(--ink); }
.festas .phone--ink .dot--ink { background: var(--paper); }

/* ── Cartões escuros (passos, privacidade) ───────────────────────────── */
.festas .step { background: var(--ink-2); border-color: var(--hair-ink); }
.festas .step__num { color: var(--accent); }
@media (min-width: 1024px) {
  .festas .step { background: var(--ink-2); border: 1px solid var(--hair-ink); padding: 26px 26px 0; }
  .festas .step .dots { position: static; }
  .festas .step__num { padding-left: 0; }
}

/* Os mockups continuam sendo papel — é a tela do celular. */
.festas .mock { color: var(--ink); background: var(--paper); border-color: var(--hair); }
@media (min-width: 1024px) { .festas .mock--sheet { background: var(--paper); } }
.festas .mock .label,
.festas .mock .label--xs { color: var(--muted); }
.festas .mock .label--action { color: var(--accent); }
.festas .mock .quote--sm { color: var(--body); }
.festas .phone { color: var(--ink); }
.festas .phone .label { color: var(--muted); }

/* Celular escuro (o Wrapped). */
.phone--ink {
  background: var(--ink);
  box-shadow: 0 0 0 1px var(--hair-ink-2), 0 24px 60px rgba(0, 0, 0, .45);
}
.festas .phone--ink { color: var(--paper); }
.festas .phone--ink .label,
.festas .phone--ink .label--xs { color: var(--on-ink-soft); }
.festas .phone--ink .wrapped div { border-bottom-color: var(--hair-ink); }

/* ── O álbum: o único respiro claro da página ────────────────────────── */
.festas .portal {
  background: var(--paper);
  color: var(--ink);
}
.festas .portal .lede--invert,
.festas .portal .label--invert { color: var(--body); }
.festas .portal .label--invert { color: var(--muted-strong); }
.festas .portal .browser { box-shadow: 0 22px 60px rgba(26, 22, 18, .2); }
.festas .portal .browser__screen { background: var(--paper-2); }
.festas .portal .card {
  background: none;
  border: 1px solid var(--hair);
}
.festas .portal .card__label,
.festas .portal .card__foot { color: var(--muted-strong); }
.festas .portal .bars i { background: var(--hair-2); }
.festas .portal .bars i.is-peak { background: var(--accent); }
.festas .portal .angles > * { background: var(--hair); }
.festas .portal .rail__hint { color: var(--muted-strong); }
.festas .portal .rail__bars i { background: var(--hair); }
.festas .portal .rail__bars i.is-on { background: var(--ink); }
.festas .portal .quote { color: var(--ink); }

/* ── Desafios: o rolo paralelo ───────────────────────────────────────── */
/* A régua de progresso é a mesma ideia dos pontos: seis fios de 3 px. */
.roll {
  display: flex;
  gap: 5px;
  padding-top: 12px;
}
.roll i {
  flex: 1;
  height: 3px;
  background: var(--hair);
}
.roll i.is-done { background: var(--accent); }

.chall {
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.3;
  padding-top: 18px;
}
/* A foto do desafio preenche o quadro; a legenda fica por cima, no rodapé. */
.chall-slot {
  position: relative;
  flex: 1;
  min-height: 54px;
  margin-top: 14px;
  overflow: hidden;
  background: var(--hair);
  display: flex;
  align-items: flex-end;
  padding: 12px;
}
.chall-slot .frame--chall {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 34%;
}
.chall-slot .mono {
  position: relative;
  font-size: 8px;
  letter-spacing: .18em;
  color: var(--paper);
  text-shadow: 0 1px 3px rgba(26, 22, 18, .6);
}

.chall-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding-top: 14px;
}
.chall-list li {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 11.5px;
  color: var(--muted-strong);
}
.chall-list li .dot { width: 9px; height: 9px; }
.chall-list .is-open { color: var(--ink); }
.chall-list .is-open .dot { background: none; box-shadow: inset 0 0 0 1px var(--hair-2); }
.chall-list .is-done span { text-decoration: line-through; }

/* Dois cartõezinhos de apoio (rolo próprio / ligado aos momentos). */
.notes {
  display: grid;
  gap: var(--s3);
  padding-top: var(--s5);
}
.notes article {
  border: 1px solid var(--hair-ink);
  background: var(--ink-2);
  padding: 20px;
}
.notes .mono { font-size: 9.5px; letter-spacing: .16em; color: var(--accent); }
.notes p {
  font-size: 12.5px;
  font-weight: 300;
  line-height: 1.8;
  color: var(--on-ink);
  padding-top: 10px;
}
@media (min-width: 1024px) {
  .notes { grid-template-columns: 1fr 1fr; gap: 22px; max-width: 520px; }
}

/* No desafios o aparelho fica do outro lado — o texto respira à direita. */
@media (min-width: 1024px) {
  .split--rev { grid-template-columns: auto 1fr; }
  .split--rev .split__text { order: 2; }
  .split--rev .split__device { order: 1; }
}

/* ── Privacidade ─────────────────────────────────────────────────────── */
.priv-section {
  padding: var(--section-y) var(--gutter);
  border-bottom: 1px solid var(--hair-ink);
}
.priv-section .lede { padding-top: var(--s4); max-width: 640px; }
.priv { padding-top: var(--s5); }
.priv__grid {
  display: grid;
  gap: var(--s3);
}
.priv__grid article {
  border: 1px solid var(--hair-ink);
  background: var(--ink-2);
  padding: 24px;
}
.priv__grid .mono { font-size: 9.5px; letter-spacing: .16em; color: var(--accent); }
.priv__grid h3 { padding-top: 12px; }
.priv__grid p {
  font-size: 12.5px;
  font-weight: 300;
  line-height: 1.85;
  color: var(--on-ink);
  padding-top: 10px;
  text-wrap: pretty;
}

.admin {
  margin-top: var(--s4);
  border: 1px solid var(--hair-ink);
  background: var(--ink-2);
  padding: 24px 22px;
}
.admin__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .18em;
  color: var(--on-ink-soft);
}
.admin__head .is-accent { color: var(--accent); }
.admin__list { padding-top: var(--s3); }
.admin__list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding: 13px 0;
  border-bottom: 1px solid var(--hair-ink);
}
.admin__list b { display: block; font-size: 13px; font-weight: 400; }
.admin__list small { display: block; font-size: 11px; color: var(--on-ink-soft); padding-top: 4px; }
.admin__list .is-off b,
.admin__list .is-off small { color: var(--on-ink-faint); }
.admin__note {
  font-size: 11px;
  font-weight: 300;
  line-height: 1.8;
  color: var(--on-ink-faint);
  padding-top: 20px;
  max-width: 720px;
  text-wrap: pretty;
}

/* Chave liga/desliga: quadrado dentro de um fio, sem trilho arredondado.
   O estado nunca é só cor — o bloco muda de lado e o rótulo diz. */
.switch {
  width: 42px; height: 20px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 2px;
  box-shadow: inset 0 0 0 1px var(--accent);
}
.switch i { width: 16px; height: 16px; background: var(--accent); display: block; }
.switch--off { justify-content: flex-start; box-shadow: inset 0 0 0 1px var(--hair-ink-2); }
.switch--off i { background: var(--hair-ink-2); }

@media (min-width: 1024px) {
  .priv__grid { grid-template-columns: repeat(3, 1fr); gap: 22px; }
  .admin { margin-top: 34px; padding: 30px 34px; }
  .admin__list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 44px; }
}

/* ── Rodapé ──────────────────────────────────────────────────────────── */
.festas .footer .label { color: var(--on-ink-soft); }
.festas .sticky-cta { background: rgba(26, 22, 18, .97); }