/* ==========================================================================
   A2 · Domínios
   Cinco anotações no DNS por domínio. Enquanto elas não estiverem no ar, a
   entrega funciona pior — e ninguém avisa.
   ========================================================================== */

.a2__lista { display: flex; flex-direction: column; gap: 8rem; }

.a2__linha {
  position: relative;
  border: 1rem solid var(--line);
  background: var(--bg-2);
  padding: 18rem 20rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280rem 150rem;
  gap: 24rem;
  align-items: center;
}
.a2__linha:hover { background: var(--panel); }
.laptop .a2__linha { grid-template-columns: minmax(0, 1fr) 240rem 140rem; }
.mobile .a2__linha { grid-template-columns: minmax(0, 1fr); gap: 18rem; }

.a2__nome { display: flex; flex-wrap: wrap; align-items: center; gap: 10rem; }
.a2__nome a {
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: 16rem;
  letter-spacing: -.02em;
  color: var(--ink);
}
.a2__nome a:hover { text-decoration: none; }
.a2__nome a::after { content: ''; position: absolute; inset: 0; }
.a2__resumo { font-size: 13rem; color: var(--ink-2); margin-top: 8rem; max-width: 620rem; line-height: 1.55; }
.a2__meta { font-family: var(--font-mono); font-size: 11rem; color: var(--ink-3); margin-top: 10rem; }

.a2__dns-barras { display: flex; gap: 4rem; }
.a2__dns-barras i { width: 100%; height: 10rem; box-sizing: border-box; font-style: normal; }
.a2__dns-nomes {
  display: flex;
  gap: 4rem;
  margin-top: 6rem;
  font-family: var(--font-mono);
  font-size: 9rem;
  letter-spacing: .1em;
  color: var(--ink-3);
}
.a2__dns-nomes span { flex: 1; }
.a2__dns-resumo {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11rem;
  color: var(--ink-3);
  margin-top: 10rem;
}

.a2__acoes { display: flex; flex-direction: column; gap: 6rem; position: relative; z-index: 1; }
.a2__acoes .btn { width: 100%; }
.mobile .a2__acoes { flex-direction: row; }