*{
    margin: 0;
    padding: 0;
}

/*Estilos Hero*/

.hero{
  height:600px;
  background-image: url("../img/familialiceista/docentes.webp");
  background-repeat: no-repeat;
  background-size: cover;
  background-position:center ;
  overflow: hidden;
}
.hero-description{
  height: 600px;
  background-color:rgba(4,7,32,0.7) ;
  display: flex;
  justify-content: center !important;
  flex-wrap: wrap-reverse;     
}

.hero-description h1 {
  margin: 140px;
  color: rgb(250, 250, 250);
  display: flex;
  align-items: center;
  font-size: 45px;
  text-transform: uppercase;
  font-weight: 800;   
  text-align: center; 
}


/* Efecto para levantar la tarjeta */
.hover-effect {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hover-effect:hover {
  transform: translateY(-5px); /* Sube un poco la tarjeta */
  box-shadow: 0 10px 20px rgba(0,0,0,0.15) !important; /* Aumenta la sombra */
}

/* Efecto para hacer zoom a la imagen */
.img-zoom {
  transition: transform 0.5s ease;
}
.hover-effect:hover .img-zoom {
  transform: scale(1.05); /* Zoom sutil a la imagen */
}

/* Estilos para texto en imágenes */
.textoimage{
  align-items: center;
  text-align: center;
}

.textoimage h4{

  font-size: 14px !important;
  color: var(--secundary-color) !important;
  font-weight: 550 !important;   
}

.textoimage h5{

  font-size: 15px !important;
  color: var(--primary-color) !important;
   
}

/* Estilo para la imagen */

.img-fix-height {
  width: 100%;
  /* Forzamos la altura y, lo más importante, el comportamiento de 'cover' */
  height: 300px !important;  /* He subido un poco la altura para fotos de retrato */
  object-fit: cover !important; /* ESTO ES LA CLAVE: Obliga a no distorsionar */
  object-position: top center !important; /* Enfoca más las caras */
}

/* --- 1. PC y Laptops (> 992px) --- */
.img-fix-height {
  width: 100%;
  height: 260px; /* Tamaño equilibrado para filas de 4 */
  object-fit: cover !important;
  object-position: top center !important;
}

/* Opcional: Si en celular se ven muy altas, puedes reducir la altura solo para móviles */
@media (max-width: 768px) {
  .img-fix-height {
      height: 460px !important; /* Un poco más altas en celular para que se aprecien mejor */
  }
}