/* =========================
   SECCIÓN 2.1 / THE TEAM
========================= */

.team-section {
  background: var(--white);
  color: var(--black);
  padding: var(--section-padding-y-lg) 0;
  overflow: hidden;
}

.team-layout {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(70px, 9vw, 130px);
  align-items: center;
}

.team-copy {
  max-width: 540px;
}

.team-copy h2 {
  font-size: clamp(42px, 5vw, 72px);
  line-height: 1.05;
  letter-spacing: -0.065em;
  font-weight: 900;
  margin-bottom: var(--space-title);
}

.team-copy p {
  max-width: 560px;
  margin-bottom: var(--space-copy);
  color: var(--muted);
  font-size: 16px;
  line-height: 1.85;
}

/* =========================
   GALERÍA
========================= */

.team-gallery {
  position: relative;
  min-height: 720px;

  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  gap: 72px 34px;
  align-items: start;
}

/* =========================
   FOTO — contenedor relativo
   para el overlay interno
========================= */

.team-photo {
  position: relative;
  overflow: hidden;
  background: #111;
  margin: 0; /* reset figure */
}

.team-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;

  filter: grayscale(1);

  transition:
    transform 0.8s cubic-bezier(.19,1,.22,1),
    filter 0.5s ease;
}

/* =========================
   OVERLAY HOVER
   Fondo negro degradado + nombre + cargo
========================= */

.team-overlay {
  position: absolute;
  inset: 0;

  /* Degradado: transparente arriba, negro abajo */
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0)    30%,
    rgba(0, 0, 0, 0.82) 100%
  );

  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;

  padding: clamp(18px, 3vw, 32px);

  /* Oculto por defecto */
  opacity: 0;
  transition: opacity 0.4s ease;
}

/* Nombre — blanco, mayúsculas, bold */
.team-name {
  display: block;
  color: #ffffff;
  font-family: var(--font-heading);
  font-size: clamp(14px, 1.4vw, 18px);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.2;
  margin-bottom: 6px;
}

/* Cargo — verde accent, más ligero */
.team-role {
  display: block;
  color: var(--accent); /* #edff00 */
  font-family: var(--font-heading);
  font-size: clamp(13px, 1.2vw, 16px);
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 1.3;
}

/* Al hacer hover sobre la foto: muestra overlay y escala imagen */
.team-photo:hover .team-overlay {
  opacity: 1;
}

.team-photo:hover img {
  transform: scale(1.06);
  filter: grayscale(0.2);
}

/* =========================
   POSICIONES DE LAS FOTOS
========================= */

.team-photo-1,
.team-photo-2,
.team-photo-3,
.team-photo-4 {
  height: 360px;
}

.team-photo-2,
.team-photo-4 {
  transform: translateY(92px);
}

/* =========================
   ANIMACIÓN ENTRADA DESDE ABAJO
========================= */

.js .reveal-up {
  opacity: 0;
  translate: 0 90px;

  transition:
    opacity 0.9s ease,
    translate 1s cubic-bezier(.19,1,.22,1);

  will-change: translate, opacity;
}

.js .reveal-up.is-visible {
  opacity: 1;
  translate: 0 0;
}

.team-photo-1 { transition-delay: 0.05s; }
.team-photo-2 { transition-delay: 0.16s; }
.team-photo-3 { transition-delay: 0.28s; }
.team-photo-4 { transition-delay: 0.40s; }

/* =========================
   LOGO COMO IMAGEN (Opción B)
   Si se usa <img class="logo-img"> en el header
========================= */

.logo-img {
  height: 28px;
  width: auto;
  display: block;
  object-fit: contain;
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 1024px) {
  .team-layout {
    grid-template-columns: 1fr;
  }

  .team-copy {
    max-width: 760px;
  }

  .team-gallery {
    min-height: auto;
    gap: 34px;
  }

  .team-photo-1,
  .team-photo-2,
  .team-photo-3,
  .team-photo-4 {
    height: clamp(280px, 44vw, 420px);
  }

  .team-photo-2,
  .team-photo-4 {
    transform: none;
  }
}

@media (max-width: 760px) {
  .team-section {
    padding: 100px 0;
  }

  .team-gallery {
    grid-template-columns: 1fr;
  }

  .team-photo-1,
  .team-photo-2,
  .team-photo-3,
  .team-photo-4 {
    height: clamp(320px, 95vw, 520px);
  }

  /* En móvil el overlay siempre visible (no hay hover táctil) */
  .team-overlay {
    opacity: 1;
    background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0)    40%,
      rgba(0, 0, 0, 0.75) 100%
    );
  }
}