main{
   section {
      gap: 2em;
   }

   .seccion-historia {
      .contenedor-historia {
         display: grid;
         grid-template-columns: 1fr;
         gap: 2em;
         max-width: 1200px;

         .historia-imagen {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 20px;
         }
   
         .historia-contenido {
            display: flex;
            flex-direction: column;
            border-radius: 20px;
            padding: 2em;
            gap: 2em;
            background-color: var(--color-blanco-menos-intenso);
   
            p {
               padding-left: 1em;
               border-left: 3px solid var(--color-secundario);
            }
         }
      }
   }
   
   .seccion-pastoral {
      .contenedor-pastoral {
         display: flex;
         flex-direction: column;
         gap: 2em;
         padding: 1em;
         background-color: var(--color-cuaternario-transparente-9);
         border-radius: 20px;
         max-width: 1000px;

         .efecto-horizontal {
            left: 0;
            width: 100%;
            height: 2px;
            background: linear-gradient(
               to right,
               transparent,
               var(--color-terciario),
               transparent
            );
         }

         .parrafo-grupo {
            display: flex;
            flex-direction: column;
            gap: 1em;
            position: relative;
   
            p {
               color: var(--color-blanco);
            }
   
            img {
               width: 100%;
               height: 100%;
               object-fit: cover;
               border-radius: 10px;
            }
         }
      }
   }
   
   .seccion-mision-vision {
      .contenedor-mision-vision {
         display: grid;
         grid-template-columns: 1fr;
         gap: 2em;
         max-width: 1000px;

         .contenedor-mision,
         .contenedor-vision {
            display: flex;
            flex-direction: column;
            background-color: var(--color-blanco);
            border-radius: 20px;
            overflow: hidden;

            .contenedor-imagen {
               width: 100%;

               img {
                  width: 100%;
                  object-fit: cover;
               }

               h3 {
                  position: absolute;
                  top: 50%;
                  left: 50%;
                  transform: translate(-50%, -50%);
                  color: var(--color-blanco);
                  font-size: 3em;
                  padding: 0.3em 1em;
                  background-color: var(--color-cuaternario-transparente-8);
                  border-radius: 10px;
                  width: auto;
               }  
            }

            p {
               display: flex;
               justify-content: center;
               align-items: center;
               padding: 1em;
               width: 100%;
               height: 100%;
            }
         }
      }
   }
   
   .seccion-calidad {
      .contenedor-calidad {
         display: flex;
         flex-direction: column;
         gap: 2em;
   
         .div-politica,
         .div-objetivos {
            display: flex;
            flex-direction: column;
            gap: 2em;
            padding: 1em;
            background-color: var(--color-cuaternario-transparente-9);
            border-radius: 1em;
            max-width: 1000px;
   
            h3 {
               color: var(--color-terciario);
               font-size: 2em;
            }
            
         }

         .div-politica {
            p {
               color: var(--color-blanco);
            }
         }

         .div-objetivos {
            .contedor-objetivos {
               display: grid;
               grid-template-columns: 1fr;
               gap: 1em;

               p {
                  display: flex;
                  align-items: center;
                  gap: 1em;
                  background-color: var(--color-blanco);
                  padding: 1em;
                  border-radius: 1em;

                  &::before {
                     content: "";
                     position: absolute;
                     top: 0;
                     left: 0;
                     transform: translate(-30%, -30%);
                     width: 20px;
                     height: 20px;
                     background-color: var(--color-terciario);
                     border-radius: 25%;
                  }
               }
            }
         }
         
      }
   }
   
   .seccion-himno {
      .reproductor-audio {
         display: flex;
         flex-direction: column;
         background-color: var(--color-quintenario);
         border-radius: 1em;
         height: 150dvh;
         width: 100%;
         max-width: 900px;
         gap: 1em;
         overflow: hidden;
   
         .div-interacion {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: .5em;
            padding: 1em;
            width: 100%;
            height: 50%;
   
            .img-portada {
               display: flex;
               flex: 1;
               height: 1%;
               width: auto;
               object-fit: contain;
               border-radius: 10%;
               background-color: var(--color-blanco);
            }
   
            .contenedor-barra-progreso {
               position: relative;
               width: 100%;
               height: 10px;
               background-color: var(--color-blanco-menos-intenso);
               cursor: pointer;
               border-radius: 1em; 
   
               #barraProgresoAudio {
                  position: absolute;
                  top: 0;
                  left: 0;
                  width: 0%;
                  height: 100%;
                  background-color: var(--color-terciario);
                  border-radius: 1em; 
                  pointer-events: none;
               }
   
               #botonProgresoAudio {
                  position: absolute;
                  top: 50%;
                  left: 0%;
                  transform: translate(-50%, -50%);
                  width: 20px;
                  height: 20px;
                  background-color: var(--color-secundario);
                  border-radius: 50%;
                  cursor: grab;
                  z-index: 10;
                  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
                  
                  &:active {
                     cursor: grabbing;
                  }
               }
            }
   
            
   
            #tiempoAudio {
               color: var(--color-blanco);
            }
   
            .div-botones {
               display: flex;
               gap: 1em;
               justify-content: center;
               align-items: center;
               
               button {
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  width: 35px;
                  height: 35px;
                  background-color: var(--color-secundario);
   
                  img {
                     filter: invert(1);
                  }
               }
            }
         }
   
         .div-letra-general {
            display: flex;
            flex-direction: column;
            gap: 1em;
            border-left: 3px solid var(--color-terciario);
            padding: 1em;
            height: 50%;
            width: 100%;
            
            h3 {
               color: var(--color-secundario);
               font-size: 2em;
            }
      
            .div-letra {
               display: flex;
               flex-direction: column;
               height: 100%;
               overflow-y: auto;
               padding: 1em;
               border: 1px solid var(--color-terciario);
               border-radius: 1em;
               gap: 2em;
   
               .estrofa {
                  display: flex;
                  flex-direction: column;
                  gap: 1.5em;
   
                  .parrado {
                     p {
                        color: var(--color-blanco);
                        text-align: center;
   
                        &.on {
                           color: var(--color-terciario);
                        }
                     }
                  }
               }
   
               .estrofa:nth-child(2),
               .estrofa:nth-child(3) {
                  padding-top: 2em;
                  border-top: 3px dotted var(--color-terciario);
               }
            }
         }
      }
   }

   @media (min-width: 768px) {
      .seccion-calidad {
         .contenedor-calidad {
            .div-objetivos {
               .contedor-objetivos {
                  grid-template-columns: 1fr 1fr;
               }
            }
         }
      }

      .seccion-himno {
         .reproductor-audio {
            flex-direction: row;
            height: 70dvh;

            .div-interacion {
               width: 40%;
               height: 100%;
            }

            .div-letra-general {
               height: 100%;
               width: 60%;
            }
         }
      }
   }

   @media (min-width: 1024px) {
      .seccion-historia {
         .contenedor-historia {
            grid-template-columns: 1fr 1.5fr;
         }
      }

      .seccion-mision-vision {
         .contenedor-mision-vision {
            grid-template-columns: 1fr 1fr;
         }
      }
   }
}