formha/static/about-us/about-us.css

/**
 * EXPANDING PANELS - Componente de paneles expandibles
 * 
 * Estilos para un sistema de paneles con:
 * - Efecto hover con animación
 * - Texto expandible con scroll
 * - Diseño responsive
 */

 .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%;
  }

  /* Título del panel - siempre visible */
  .panel-title {
    background-color: rgba(255, 255, 255, 0.85);
    padding: 0.5em 1em;
    border-radius: 10px;
    transition: all 0.5s ease;
    
    h3 {
      margin: 0;
    }
  }

  /* Texto expandible - con scroll vertical cuando es necesario */
  .panel-text {
    max-height: 0;
    opacity: 0;
    overflow-y: hidden; /* Oculta scroll inicialmente */
    transition: all 0.5s ease;
    margin-top: 1em;
    background-color: rgba(255, 255, 255, 0.85);
    padding: 0 1em;
    border-radius: 10px;
    
    & p, ul {
      text-align: justify;
      text-justify: inter-word;
    }
  }

  /* ---------------------------- */
  /* EFECTOS HOVER */
  /* ---------------------------- */
  .panel:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
    z-index: 2;
    
    .panel-text {
      max-height: 50vh; /* Altura máxima antes de mostrar scroll */
      opacity: 1;
      padding: 1em;
      overflow-y: auto; /* Muestra scroll solo cuando es necesario */
      
      /* Estilos personalizados para la barra de scroll */
      &::-webkit-scrollbar {
        width: 6px;
      }
      &::-webkit-scrollbar-thumb {
        background: rgba(0,0,0,0.2);
        border-radius: 3px;
      }
    }
  }

  /* ---------------------------- */
  /* IMÁGENES DE FONDO */
  /* ---------------------------- */
  .p1 { background-image: url('/static/img/about-us/team.avif'); }
  .p2 { background-image: url('/static/img/about-us/mision.avif'); }
  .p3 { background-image: url('/static/img/about-us/idea.avif'); }
  .p4 { background-image: url('/static/img/about-us/mex.avif'); }
}

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

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

  main{
    width: 95vw;
    margin: 1em auto;
    min-height: 100vh;
    margin-top: 1em;
    margin-bottom: 1em;
  }

  .expanding-panels {
    grid-template-rows: repeat(4, 1fr);
    row-gap: 2em;
    
    .panel {
      height: 45vh;
    }
  }
}

/* Tablets (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
  
  main{
    width: 90vw;
    margin: auto;
    min-height: 85vh;
    margin-top: 1em;
    margin-bottom: 1em;
  }

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

/* Laptops (1024px - 1439px) */
@media (min-width: 1024px) and (max-width: 1439px) {
  
  main{
    width: 90vw;
    margin: auto;
    min-height: 85vh;
    margin-top: 1em;
    margin-bottom: 1em;
  }

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

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

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

  main{
    width: 90vw;
    margin: auto;
    min-height: 85vh;
    margin-top: 1em;
    margin-bottom: 1em;
  }


}

/* Pantallas Ultrawide (1920px en adelante) */
@media (min-width: 1920px) {
  
  .expanding-panels {
    grid-template-columns: repeat(4, 1fr);
    
    .panel {
      height: 75vh;
    }
  }

  main{
    width: 80vw;
    margin: auto;
    min-height: 85vh;
    margin-top: 1em;
    margin-bottom: 1em;
  }



}