.expanding-panels {
  display: grid;
  gap: 1em;
}

/* ---------------------------- */
/* ESTILOS BASE DEL PANEL */
/* ---------------------------- */
.panel {
  position: relative;
  background-size: cover;
  background-position: center;
  border-radius: 10px;
  overflow: hidden;
  transition: all 0.5s ease;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------------------------- */
/* CONTENIDO DEL PANEL */
/* ---------------------------- */
.panel-content {
  text-align: center;
  color: #000;
  width: 90%;
}

.panel-title {
  background-color: rgba(255, 255, 255, 0.85);
  padding: 0.5em 1em;
  border-radius: 10px;
  transition: all 0.5s ease;
}

.panel-title h3 {
  margin: 0;
}

.panel-text {
  max-height: 0;
  opacity: 0;
  overflow-y: hidden;
  transition: all 0.5s ease;
  margin-top: 1em;
  background-color: rgba(255, 255, 255, 0.85);
  padding: 0 1em;
  border-radius: 10px;
}

.panel-text p,
.panel-text ul {
  text-align: justify;
  text-justify: inter-word;
}

/* ---------------------------- */
/* EFECTOS HOVER */
/* ---------------------------- */
.panel:hover {
  transform: scale(1.02);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
  z-index: 2;
}

.panel:hover .panel-title {
  background-color: rgba(255, 255, 255, 1);
}

.panel:hover .panel-text {
  max-height: 50vh;
  opacity: 1;
  padding: 1em;
  overflow-y: auto;
  background-color: rgba(255, 255, 255, 1);
}

/* Barra de scroll personalizada */
.panel-text::-webkit-scrollbar {
  width: 6px;
}

.panel-text::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}

/* ---------------------------- */
/* IMÁGENES DE FONDO */
/* ---------------------------- */
.p1 { background-image: url('/static/y_img/about-us/team.webp'); }
.p2 { background-image: url('/static/y_img/about-us/mision.webp'); }
.p3 { background-image: url('/static/y_img/about-us/vision.webp'); }
.p4 { background-image: url('/static/y_img/about-us/valores.webp'); }


/* ============================================ */
/* MEDIA QUERIES - RESPONSIVE DESIGN */
/* ============================================ */

main {
  place-items: center;
}

/* Smartphones (hasta 767px) */
@media (max-width: 767px) {

  main {
    min-height: 100vh;
  }

  .expanding-panels {
    grid-template-rows: repeat(4, 1fr);

    .panel {
      height: 70vh;
    }
  }
}

/* Tablets (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
  /* main { background-color: red; } */
  main {
    min-height: 150vh;
  }

  .expanding-panels {
    grid-template-columns: repeat(2, 1fr);
    .panel {
      height: 75vh;
    }
  }
}

/* Laptops (1024px - 1439px) */
@media (min-width: 1024px) and (max-width: 1439px) {
  /* main { background-color: pink; } */
  main {
    height: 170vh;
  }

  .expanding-panels {
    grid-template-columns: repeat(2, 1fr);
    .panel {
      min-height: 80vh;
    }
  }
}

/* PCs de escritorio (1440px - 1919px) */
@media (min-width: 1440px) and (max-width: 1919px) {

  .expanding-panels {
    grid-template-columns: repeat(4, 1fr);

    .panel {
      height: 80vh;
    }
  }

  main {
    height: 80vh;
  }


}

/* Pantallas Ultrawide (1920px en adelante) */
@media (min-width: 1920px) {

  main {
    height: 80vh;
  }
  
  .expanding-panels {
    grid-template-columns: repeat(4, 1fr);

    .panel {
      height: 80vh;
    }
  }

}