/* ========== INTRO (SOBRE MÍ) ========== */
.intro { position: relative; isolation: isolate; padding: clamp(50px, 7vw, 90px) 0; }
.intro-pattern {
  position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 90px 90px;
  background-position: center;
  opacity: .5;
  -webkit-mask-image: radial-gradient(ellipse 45% 60% at 50% 40%, #000, transparent 70%);
  mask-image: radial-gradient(ellipse 45% 60% at 50% 40%, #000, transparent 70%);
}
.intro-grid {
  display: grid;
  grid-template-columns: minmax(260px, 380px) 1fr;
  gap: clamp(36px, 6vw, 80px);
  align-items: center;
}
.intro-photo {
  position: relative;
  margin: 0;
  padding: 10px;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}
.intro-photo img,
.intro-photo-empty {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  object-fit: cover;
  object-position: center top;
}
.intro-photo-empty {
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 35%, var(--panel), var(--bg) 75%);
  color: var(--steel);
}
.intro-caption {
  position: absolute;
  left: 22px; right: 22px; bottom: 22px;
  display: grid;
  gap: 2px;
  padding: 14px 16px;
  border: 1px solid var(--line2);
  border-radius: 12px;
  background: rgba(15, 23, 42, .78);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.intro-name { color: var(--ink); font-family: var(--font-display); font-size: 20px; font-weight: 500; }
.intro-role { color: var(--ink-soft); font-size: 14px; font-weight: 400; }
.intro .subtitle { justify-content: flex-start; }
@media (max-width: 860px) {
  .intro-grid { grid-template-columns: 1fr; }
  .intro-photo { max-width: 380px; width: 100%; margin: 0 auto; }
}
.intro-text {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 500;
  line-height: 1.45;
  text-align: left;
}
.intro-ico {
  display: inline-grid;
  place-items: center;
  width: 1.3em;
  height: 1.3em;
  margin: 0 .1em;
  vertical-align: -.25em;
  border-radius: 50%;
  border: 1px solid var(--line2);
  background: radial-gradient(circle at 50% 30%, rgba(45, 212, 191, .25), var(--bg) 70%);
  color: var(--accent-text);
}
.intro-ico .ico { width: .7em; height: .7em; }