/* Quem somos: retratos montados por pontos, com mira (réguas e cruzes);
   ao passar o mouse a foto real entra em foco, de desfocada para nítida. */

#quem-somos { padding: 120px 0; }
.about { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center; }
.portraits { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.dots { display: grid; gap: 10px; }
.photo { position: relative; overflow: hidden; border-radius: 22px; background: var(--mint); }
.photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.photo__dots { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.photo--dots img { opacity: 0; }
.photo--dots.photo--focus img { opacity: 1; animation: portrait-focus 0.5s var(--ease-out) both; }
.photo--dots.photo--focus .photo__dots { opacity: 0; transition: opacity 0.4s var(--ease-out); }
@keyframes portrait-focus {
  0% { opacity: 0; filter: blur(9px) brightness(1.15); transform: scale(1.04); }
  35% { opacity: 1; }
  70% { filter: blur(1.2px) brightness(1.03); }
  100% { opacity: 1; filter: blur(0) brightness(1); transform: none; }
}

/* Mira: régua com 11 marcas no topo e duas cruzes nas laterais. */
.photo__hud { position: absolute; inset: 0; pointer-events: none; }
.photo__ticks { position: absolute; left: 18%; right: 18%; top: 14px; display: flex; justify-content: space-between; align-items: flex-start; }
.photo__ticks i { width: 1px; height: 6px; background: color-mix(in srgb, var(--ink) 45%, transparent); }
.photo__ticks i.is-major { height: 11px; background: var(--ink); }
.photo__cross { position: absolute; top: 50%; width: 14px; height: 14px; translate: 0 -50%; }
.photo__cross::before, .photo__cross::after { content: ""; position: absolute; background: color-mix(in srgb, var(--ink) 60%, transparent); }
.photo__cross::before { left: 50%; top: 0; width: 1px; height: 100%; }
.photo__cross::after { top: 50%; left: 0; height: 1px; width: 100%; }
.photo__cross--l { left: 12px; }
.photo__cross--r { right: 12px; }

.dots figcaption { font-size: 14px; font-weight: 600; }
.about-text { display: grid; gap: 18px; justify-items: start; }
.about-text h2 { font-size: clamp(36px, 4.4vw, 48px); }
.about-text p { max-width: 44ch; font-size: 18px; }

@media (max-width: 860px) {
  .about { grid-template-columns: 1fr; gap: 40px; }
}