/* ==========================================================================
   U2 · Configurar o Gmail
   A tela que determina se o usuário usa o endereço profissional. Se ela
   falhar, o cliente vê o endereço errado e o produto não entregou o que
   prometeu. Coluna única, passo a passo marcável, valor sempre copiável.
   ========================================================================== */

.u2 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40rem;
  padding: 40rem 24rem 72rem;
  align-items: flex-start;
}

.u2__lateral { max-width: 280rem; position: sticky; top: 40rem; }
.mobile .u2__lateral { position: static; max-width: 390rem; }
.u2__lateral p { font-size: 16rem; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.u2__lateral .dado { font-size: 11rem; color: var(--ink-3); margin-top: 20rem; line-height: 1.7; display: block; }

/* O til da marca desenhado em pixel, do manual de identidade. */
.u2__mascote { position: relative; width: 68px; height: 36px; margin-bottom: 20rem; }
.u2__mascote i {
  position: absolute;
  left: 8px;
  top: 0;
  width: 4px;
  height: 4px;
  background: var(--invert-bg);
  box-shadow:
    4px 0 0 #FFB000, 44px 0 0 #FFB000, 48px 0 0 #FFB000,
    -4px 4px 0 #FFB000, 0 4px 0 #FFB000, 48px 4px 0 #FFB000, 52px 4px 0 #FFB000,
    -8px 8px 0 #FFB000, -4px 8px 0 #FFB000, 12px 8px 0 #FFB000, 16px 8px 0 #FFB000,
    32px 8px 0 #FFB000, 36px 8px 0 #FFB000, 52px 8px 0 #FFB000, 56px 8px 0 #FFB000,
    -8px 12px 0 #FFB000, -4px 12px 0 #FFB000, 12px 12px 0 #FFB000, 16px 12px 0 #FFB000,
    32px 12px 0 #FFB000, 36px 12px 0 #FFB000, 52px 12px 0 #FFB000, 56px 12px 0 #FFB000,
    -8px 16px 0 #FFB000, -4px 16px 0 #FFB000, 52px 16px 0 #FFB000, 56px 16px 0 #FFB000,
    -8px 20px 0 #FFB000, -4px 20px 0 #FFB000, 8px 20px 0 #FFB000, 40px 20px 0 #FFB000,
    52px 20px 0 #FFB000, 56px 20px 0 #FFB000,
    -8px 24px 0 #FFB000, -4px 24px 0 #FFB000, 52px 24px 0 #FFB000, 56px 24px 0 #FFB000,
    -4px 28px 0 #FFB000, 0 28px 0 #FFB000, 48px 28px 0 #FFB000, 52px 28px 0 #FFB000,
    0 32px 0 #FFB000, 4px 32px 0 #FFB000, 44px 32px 0 #FFB000, 48px 32px 0 #FFB000;
}

.u2__cartao { width: 390rem; max-width: 100%; flex: none; border: 1rem solid var(--line); background: var(--bg-2); }
.u2__cabeca { padding: 22rem 22rem 18rem; border-bottom: 1rem solid var(--line); }
.u2__cabeca .titulo { font-size: 23rem; margin-bottom: 6rem; }
.u2__cabeca .apoio { font-size: 14rem; }

.u2__progresso { display: flex; align-items: center; gap: 10rem; margin-top: 16rem; }
.u2__progresso-barras { flex: 1; display: flex; gap: 3rem; }
.u2__progresso-barras i { flex: 1; height: 6rem; background: var(--panel-2); }
.u2__progresso-barras i.feito { background: var(--ok); }
.u2__progresso .num { font-size: 12rem; color: var(--invert-bg); }

.u2__passo { border-bottom: 1rem solid var(--line); }
.u2__passo:last-child { border-bottom: 0; }
.u2__passo-cabeca {
  display: flex;
  gap: 14rem;
  padding: 18rem 22rem;
  align-items: flex-start;
  width: 100%;
  text-align: left;
}
.u2__passo-cabeca:hover { background: var(--panel); }
.u2__caixinha {
  width: 26rem;
  height: 26rem;
  flex: none;
  border: 1rem solid var(--line-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: 13rem;
  color: var(--ink-3);
}
.u2__caixinha--feito,
.u2__caixinha--agora { color: var(--invert-fg); }
.u2__caixinha--feito { background: var(--ok); border-color: var(--ok); }
.u2__caixinha--agora { background: var(--invert-bg); border-color: var(--invert-bg); }
.u2__passo-nome { font-size: 16rem; font-weight: 600; line-height: 1.4; }
.u2__passo-nome--feito { color: var(--ink-3); text-decoration: line-through; text-decoration-color: var(--line-2); }
.u2__passo-txt { font-size: 14rem; color: var(--ink-3); margin-top: 6rem; line-height: 1.55; }
.u2__passo-txt strong { font-weight: 600; color: var(--ink-2); }

.u2__campos { padding: 0 22rem 20rem 62rem; display: flex; flex-direction: column; gap: 10rem; }
.mobile .u2__campos { padding-left: 22rem; }
.u2__campo { border: 1rem solid var(--line); background: var(--bg); }
.u2__campo .rotulo { padding: 10rem 14rem 0; letter-spacing: .12em; }
.u2__campo-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 10rem; padding: 4rem 8rem 8rem 14rem; }
.u2__campo-valor { flex: 1; font-family: var(--font-mono); font-weight: 500; font-size: 15rem; word-break: break-all; }
.u2__campo-linha .btn { width: 48rem; height: 40rem; padding: 0; font-size: 9rem; letter-spacing: .08em; }

.u2__erros { border-top: 1rem solid var(--line); padding: 20rem 22rem 24rem; }
.u2__erro + .u2__erro { margin-top: 16rem; }
.u2__erro-tit { font-size: 15rem; font-weight: 600; line-height: 1.4; }
.u2__erro-txt { font-size: 14rem; color: var(--ink-3); margin-top: 5rem; line-height: 1.55; }