/*
  Página Nosotros — ajuste puntual del hero.
  Padding adicional de 100px a cada lado del contenido del hero, solo en la versión de escritorio
  (min-width: 1031px, el mismo breakpoint "desktop" que usa el resto del sitio). No debe afectar
  tablet ni mobile.
*/
@media (min-width: 1031px) {
  .hero-nosotros_container {
    padding-left: 6.25rem;
    padding-right: 6.25rem;
  }
}

/*
  Efecto de movimiento de abajo hacia arriba en las 3 fotos del hero (mismo criterio que el resto
  del sitio: reimplementado con CSS + IntersectionObserver porque el template original depende del
  runtime de Webflow). Cada foto ya trae su propia rotación fija (is-one/is-three abanican -15deg/15deg),
  así que el translateY se combina con esa rotación en vez de sobreescribirla.
*/
.about_image.hero-photo-reveal {
  opacity: 0;
  transition: opacity 0.8s ease, transform 0.8s ease;
  transition-delay: var(--reveal-delay, 0s);
}

.about_image.is-two.hero-photo-reveal {
  transform: translateY(4rem);
}
.about_image.is-one.hero-photo-reveal {
  transform: rotate(-15deg) translateY(4rem);
}
.about_image.is-three.hero-photo-reveal {
  transform: rotate(15deg) translateY(4rem);
}

.about_image.is-two.hero-photo-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.about_image.is-one.hero-photo-reveal.is-visible {
  opacity: 1;
  transform: rotate(-15deg) translateY(0);
}
.about_image.is-three.hero-photo-reveal.is-visible {
  opacity: 1;
  transform: rotate(15deg) translateY(0);
}

.about_image.is-three.hero-photo-reveal { transition-delay: 0s; }
.about_image.is-one.hero-photo-reveal { transition-delay: 0.15s; }
.about_image.is-two.hero-photo-reveal { transition-delay: 0.3s; }

@media (prefers-reduced-motion: reduce) {
  .about_image.hero-photo-reveal,
  .about_image.is-two.hero-photo-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .about_image.is-one.hero-photo-reveal {
    opacity: 1;
    transform: rotate(-15deg);
    transition: none;
  }
  .about_image.is-three.hero-photo-reveal {
    opacity: 1;
    transform: rotate(15deg);
    transition: none;
  }
}

/*
  Fotografía real del equipo dentro de .team_card (reemplaza el
  .photo-placeholder). Ocupa todo el espacio de la tarjeta, igual que hacía
  el placeholder (position:absolute; inset:0), y queda detrás del overlay de
  vidrio (.team_card-content) por orden natural en el DOM.
*/
.team_card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

/* Overlay de vidrio sobre la foto: mismo tono translúcido que .member_content del hero */
.team_card-content {
  background-color: #01273d5f;
}

/*
  El grid de equipo (.team_grid) está pensado en el base para 3 columnas.
  Con solo 2 integrantes reales, se ve descentrado a la izquierda en
  escritorio (el tercer espacio queda vacío). Se limita a 2 columnas y se
  centra como grupo; en tablet (max-width 991px) el base ya cae en 2
  columnas de forma natural, así que no requiere ajuste ahí.
*/
@media screen and (min-width: 1031px) {
  .team_grid {
    grid-template-columns: repeat(2, 1fr);
    max-width: 50rem;
    margin-left: auto;
    margin-right: auto;
  }
}

/*
  Mobile: el tema base convierte .team_grid en un flex con overflow:scroll
  (pensado para varias cards en carrusel horizontal). Con solo 2 integrantes
  eso se ve como scroll horizontal en vez de una lista apilada. Se fuerza
  grid de 1 columna para que las cards queden una debajo de otra.
*/
@media screen and (max-width: 767px) {
  .team_grid {
    display: grid;
    grid-template-columns: 1fr;
    overflow: visible;
  }
}