/* ════════════════════════════════════════════════════════
   hero.css — Sección hero y foto de perfil
   ════════════════════════════════════════════════════════ */

#hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  background: linear-gradient(165deg,
    var(--hero-from) 0%,
    var(--hero-mid)  45%,
    var(--hero-to)   100%
  );
  overflow: hidden;
}
#hero-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}

/* Contenedor principal — flex column */
.hero-inner {
  position: relative; z-index: 2;
  width: 100%;
  padding: 7rem var(--px);
  display: flex;
  flex-direction: column;
  gap: 2.8rem;
}

/* Grid 2 columnas: 60% textos | 40% foto */
.hero-grid {
  display: grid;
  grid-template-columns: 3fr 2fr;
  align-items: center;
  gap: clamp(2rem, 4vw, 4rem);
}

.hero-left  { min-width: 0; }
.hero-right {
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-role {
  font-family: var(--fm); font-size: 0.9rem;
  color: var(--t3); letter-spacing: 0.18em; text-transform: uppercase;
  margin-bottom: 1rem;
  opacity: 0; transform: translateY(12px);
}
.hero-name {
  font-family: var(--fd);
  font-size: clamp(4.5rem, 10vw, 10rem);
  font-weight: 600; line-height: 0.88;
  color: var(--t1); letter-spacing: 0.01em;
  margin-bottom: 1.4rem;
  opacity: 0; transform: translateY(22px);
}
.hero-name .first { display: block; }
.hero-name .last  { display: block; color: var(--orange); }

.hero-phrase {
  font-family: var(--fh);
  font-size: clamp(0.98rem, 1.6vw, 1.15rem);
  font-weight: 400; font-style: italic;
  color: var(--t2);
  line-height: 1.6; max-width: 400px;
  opacity: 0; transform: translateY(12px);
}
.hero-cta {
  display: flex; gap: 0.75rem; flex-wrap: wrap;
  opacity: 0; transform: translateY(12px);
}

/* ── Foto de perfil ───────────────────────────────────── */

/*
  min() elige el menor entre el ancho disponible (100%) y la altura
  disponible (~52vh). Así el círculo es lo más grande posible sin
  distorsionarse. aspect-ratio: 1/1 garantiza siempre un círculo perfecto.
*/
.hero-photo-rect {
  position: relative;
  width: min(100%, clamp(180px, 52vh, 420px));
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  background: var(--s2);
  box-shadow: 0 0 0 3px rgba(205,75,5,0.18), 0 8px 32px rgba(0,0,0,0.10);
}
.hero-photo-rect img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

/* Placeholder cuando no hay foto */
.hero-photo-ph {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  font-family: var(--fm); font-size: 0.55rem;
  color: var(--t3); letter-spacing: 0.1em;
  text-align: center; line-height: 2.2; padding: 1.5rem;
}

/* Degradado sutil en la parte inferior del círculo */
.hero-photo-rect::after {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  border-radius: 50%;
  background:
    linear-gradient(to bottom,
      rgba(237,233,226,0.10) 0%,
      transparent            30%,
      transparent            60%,
      rgba(249,248,245,0.30) 88%,
      rgba(249,248,245,0.55) 100%
    );
}