/* ============================================================
   Tela 1 — intro
   Espelha OnboardingD0IntroViewController.swift:
   logo no topo, bloco de conteúdo centralizado, CTA no rodapé.
   ============================================================ */

.intro { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none;
         display: flex; flex-direction: column; padding: 0 var(--gutter); }
.intro::-webkit-scrollbar { display: none; }

.intro-logo {
  margin-top: 56px;
  width: 160px; max-width: 45%;
  height: auto;
  display: block;
}

/* Bloco central: o iOS centraliza com -40pt de offset para cima */
.intro-corpo {
  flex: 1;
  display: flex; flex-direction: column; justify-content: center;
  gap: 16px;
  padding-bottom: 40px;
}

.intro-titulo {
  margin: 0;
  font-size: 32px; line-height: 1.14; font-weight: 700; letter-spacing: -.025em;
  text-wrap: balance;
}

.intro-sub {
  margin: 0;
  font-size: 17px; line-height: 1.42; color: var(--ink-2);
}

/* --- prova social: avatares sobrepostos + texto --- */

.intro-proof {
  display: flex; align-items: center; gap: 10px;
  margin-top: 24px;
}

.intro-avatares {
  display: flex;
  flex: 0 0 auto;
}
.intro-avatares img {
  width: 44px; height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--ink-3);
  background: var(--surface);
}
/* sobreposição de 10px, como os 34pt de passo sobre 44pt de largura no iOS */
.intro-avatares img + img { margin-left: -10px; }

.intro-proof-txt {
  margin: 0;
  font-size: 17px; line-height: 1.3; font-weight: 500; color: var(--proof);
}
.intro-proof-txt b { font-weight: 700; }

/* Telas curtas: encolhe o respiro antes de encolher o texto */
@media (max-height: 700px) {
  .intro-logo { margin-top: 32px; width: 140px; }
  .intro-titulo { font-size: 28px; }
  .intro-corpo { padding-bottom: 16px; }
  .intro-proof { margin-top: 16px; }
}

/* wrapper: conteúdo + rodapé ocupando a altura toda */
.intro-wrap { flex: 1; display: flex; flex-direction: column; }