/* ==========================================================
   O QUE É A CIVITAS (#oque): o que é e por que o nome
   ========================================================== */
.quadra, .praca { transform-box: fill-box; transform-origin: center; }
.momento + .momento { margin-top: clamp(112px, 14vw, 176px); }

/* Momento 1 */
.m1 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.m1-simbolo { padding-top: 10px; }
.m1-simbolo svg { width: 96px; height: 96px; display: block; }
.m1 h2 { font-size: clamp(36px, 4.4vw, 56px); line-height: 1.05; letter-spacing: -.015em; max-width: none; }
.m1-lead { margin-top: var(--espaco-5); font-size: clamp(20px, 1.9vw, 24px); line-height: 1.45; font-weight: 500; max-width: 34ch; }
.m1-complemento { margin-top: var(--espaco-3); font-size: 17px; color: var(--texto-suave); max-width: 54ch; }
.m1-destaque { margin-top: var(--espaco-6); padding-top: var(--espaco-4); border-top: 1px solid var(--linha); position: relative; font-size: clamp(24px, 2.6vw, 34px); line-height: 1.25; font-weight: 600; letter-spacing: -.01em; max-width: 26ch; }
.m1-destaque::before { content: ""; position: absolute; left: 0; top: -2px; width: var(--filete-vermelho); height: 3px; background: var(--acento); }

/* Momento 2 | URBS x CIVITAS */
.m2-cab { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(32px, 6vw, 96px); align-items: end; }
.m2-cab h2 { font-size: clamp(32px, 3.8vw, 48px); line-height: 1.1; }
.m2-cab p { font-size: 17px; color: var(--texto-suave); max-width: 56ch; }
.par { position: relative; margin-top: var(--espaco-6); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lado { padding: clamp(40px, 5vw, 72px) clamp(28px, 4.5vw, 72px); display: flex; flex-direction: column; gap: 12px; min-height: 420px; transition: opacity .9s ease .5s; }
.lado-urbs { background: var(--quase-branco); color: var(--tinta); padding-right: clamp(80px, 9vw, 130px); }
.lado-civitas { --acento: var(--cinza-claro); background: var(--tinta); color: var(--quase-branco); padding-left: clamp(80px, 9vw, 130px); }
.lado-nome { font-size: clamp(44px, 5.4vw, 76px); line-height: 1; font-weight: 600; font-style: italic; letter-spacing: .02em; text-transform: uppercase; }
.lado-urbs .lado-nome { color: var(--cinza-medio); }
.lado-def { font-size: 18px; font-weight: 500; max-width: 26ch; margin-bottom: var(--espaco-4); }
.lado-civitas .lado-def { color: var(--cinza-claro); }
.lado ul { list-style: none; margin: auto 0 0; padding: 0; }
.lado li { display: flex; align-items: center; gap: 14px; padding: 13px 0; border-top: 1px solid var(--linha-lista-sobre-claro); font-size: 16px; font-weight: 500; }
.lado-civitas li { border-top-color: var(--linha-lista-sobre-escuro); }
.lado-urbs li::before { content: ""; flex: 0 0 8px; height: 8px; border: 1.5px solid var(--cinza-medio); }
.lado-civitas li::before { content: ""; flex: 0 0 8px; height: 8px; background: var(--acento); }
.par-simbolo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: clamp(120px, 12vw, 168px); aspect-ratio: 1; background: var(--branco); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 1px var(--contorno-simbolo); z-index: 1; }
.par-simbolo svg { width: 68%; height: auto; overflow: visible; }
.par-legenda { margin-top: var(--espaco-4); margin-left: auto; margin-right: auto; max-width: 62ch; text-align: center; font-size: 14.5px; color: var(--texto-suave); }
.transicao .quadra { transition: transform 1.3s cubic-bezier(.2, .7, .2, 1); }
.transicao .praca { transition: opacity .6s .9s, transform .6s .9s; }
.js .transicao:not(.integrado) .q-topo { transform: translate(-10px, -14px) rotate(-7deg); }
.js .transicao:not(.integrado) .q-direita { transform: translate(14px, -8px) rotate(6deg); }
.js .transicao:not(.integrado) .q-base { transform: translate(10px, 14px) rotate(-5deg); }
.js .transicao:not(.integrado) .q-esquerda { transform: translate(-14px, 8px) rotate(8deg); }
.js .transicao:not(.integrado) .praca { opacity: 0; transform: scale(.2); }
.js .transicao:not(.integrado) .lado-civitas { opacity: .4; }

@media (max-width: 900px) {
  .m1, .m2-cab { grid-template-columns: minmax(0, 1fr); }
  .m1-simbolo svg { width: 64px; height: 64px; }
  .par { grid-template-columns: minmax(0, 1fr); }
  .lado { min-height: 0; }
  .lado-urbs { padding-right: clamp(28px, 4.5vw, 72px); padding-bottom: 96px; }
  .lado-civitas { padding-left: clamp(28px, 4.5vw, 72px); padding-top: 96px; }
  .par-simbolo { width: 120px; }
}