.antes-depois { padding: 0; }
/* --spa-cyan-ink (texto pequeno em claro) só dá 3,74:1 aqui em cima do fundo escuro #0A111A;
   var(--spa-cyan) dá 12,19:1. base.css já tem ".secao-escura .eyebrow" com o mesmo valor;
   esta regra garante o contraste também se a seção algum dia sair de .secao-escura. */
.antes-depois .eyebrow { color: var(--spa-cyan); }
/* respiro menor que o das outras seções: a Task 8 fixa este bloco na tela e ele precisa caber em 780px de altura, o limiar do pin em antes-depois.js */
.ad-pin { padding-block: clamp(40px, 5vw, 72px); min-height: 100vh; display: flex; align-items: center; }
.ad-grid { display: grid; grid-template-columns: 1fr 180px 1.15fr; gap: 2rem; align-items: center; margin-top: 2rem; }
.ad-titulo { font-size: 1.6rem; display: flex; flex-direction: column; gap: .3rem; margin-bottom: 1.5rem; }
.ad-titulo small { font-size: .95rem; font-weight: 400; color: var(--spa-dark-muted); }
.ad-titulo-depois { color: var(--spa-cyan); }
.ad-titulo-depois small { color: var(--spa-dark-muted); }
.ad-depois .mock-nota { color: var(--spa-dark-muted); margin-top: .5rem; text-align: left; }

.papeis { list-style: none; position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.papel { --rot: 0deg; --dx: 0px; --dy: 0px; background: #F2F4F7; color: var(--spa-ink); border-radius: 10px; padding: 1.4rem 1rem 1rem; font-weight: 600; font-size: .95rem; box-shadow: 0 14px 30px -18px rgba(0,0,0,.7); transform: translate(var(--dx), var(--dy)) rotate(var(--rot)); position: relative; }
.papel::before { content: ''; position: absolute; left: 1rem; right: 1rem; top: .6rem; height: 4px; border-radius: 2px; background: repeating-linear-gradient(90deg, #C9D0DA 0 14px, transparent 14px 20px); }
.papel:nth-child(1) { --rot: -6deg; --dx: -14px; --dy: 8px; }
.papel:nth-child(2) { --rot: 4deg;  --dx: 10px;  --dy: -6px; }
.papel:nth-child(3) { --rot: -3deg; --dx: 6px;   --dy: 12px; }
.papel:nth-child(4) { --rot: 7deg;  --dx: -8px;  --dy: -10px; }

.ad-conector svg { width: 100%; height: 24px; }
.ad-linha { stroke: var(--spa-cyan); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 170; stroke-dashoffset: 170; }
.ad-ponta { fill: none; stroke: var(--spa-cyan); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
html:not(.js) .ad-linha { stroke-dashoffset: 0; } html:not(.js) .ad-ponta { opacity: 1; }

.dash-escuro { border: 1px solid var(--spa-dark-border); box-shadow: 0 30px 80px -30px rgba(0,228,252,.35); }
.checks { list-style: none; margin-top: 1.4rem; display: grid; gap: .6rem; }
.checks li { display: flex; align-items: center; gap: .7rem; font-weight: 500; }
.checks li::before { content: '✓'; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: rgba(0,228,252,.16); color: var(--spa-cyan); font-size: .8rem; font-weight: 700; flex-shrink: 0; }

@media (max-width: 991px) {
  .ad-pin { min-height: 0; }
  .ad-grid { grid-template-columns: 1fr; }
  /* caixa quadrada centralizada; max-width: none anula o img,svg{max-width:100%} do base.css, que esmagava a seta */
  .ad-conector { width: 60px; height: 60px; margin: 0 auto; display: grid; place-items: center; }
  .ad-conector svg { width: 60px; height: 24px; max-width: none; transform: rotate(90deg); }
  /* mesma especificidade das regras :nth-child, senão o reset perde */
  .papel:nth-child(n) { --rot: 0deg; --dx: 0px; --dy: 0px; }
}