section.banner-page{
  height: 60vh;
  /*aspect-ratio: 740/287;*/
  overflow: hidden;
  &::before{
    display: none;
  }
  .container-img{
    
    img{
      
    }
  }
}

@media (max-width: 800px) {
  section.banner-page{
    height: 320px;

    &::before{
      
    }
    .container-img{
      
      img{
        
      }
    }
  }
}


/* Estilos para el loader */
#loader {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9;
  display: none;

  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  .container-loader{
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    &::before{
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      background: var(--bg-color-white);
      opacity: 0.5;
      z-index: -1;
    }
  }
}

.spinner {
  border: 8px solid #f3f3f3;
  border-top: 8px solid var(--bg-color-purple);
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}



section.title-noticias{
  padding: 1rem 0;
  box-sizing: border-box;
  .container{
    display: flex;
    flex-direction: column;
    gap: 27px;
    h1{
      color: var(--bg-color-black);
      font-family: "Roboto-300",sans-serif;
      font-size: 34.072px;
      line-height: normal;

      display: flex;
      flex-direction: row;
      gap: 15px;

      &::before{
        content: '';
        display: inline-block;
        width: 5px;
        background: linear-gradient(0deg, #312783 13.32%, #2F2985 56.53%, #005FB7 99.74%);
      }
    }
    p{
      color: var(--bg-color-grey);
      font-family: "Roboto-400",sans-serif;
      font-size: 22px;
      line-height: 25px; /* 113.636% */
    }
  }
}

section.grid-noticias{
  padding: 30px 0 130px 0;
  .container{
    .grid-container{
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 38px;

      max-width: calc(360px* 3 + 38px* 2);
      margin: 0 auto;
      position: relative;
      &>a{
        
        .blog-card{
          display: flex;
          flex-direction: column;
          
          padding-bottom: 8px;
          background: white;
          border-radius: 5px;
          border: 1px solid #D9D9D9;

          max-width: 350px;
          margin: 0 auto;
          box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.10);
          .container-img{
            width: 100%;
            height: 342px;
            border-radius: 5px 5px 0px 0px;
            
            img{
              height: 100%;
              width: 100%;
              object-fit: cover;                            
              object-position: center left;
            }
          }
          .data{
            display: flex;
            flex-direction: column;
            gap: 8px;
            width: 90%;
            margin: 0 auto;
            margin-top: 30px;
            h3{
              color: var(--bg-color-grey);
              text-align: center;
              font-family: "Roboto-600",sans-serif;
              font-size: 18px;
              line-height: 25px;
            }
            p{
              color: var(--bg-color-grey);
              text-align: center;
              font-family: "Roboto-400",sans-serif;
              font-size: 13px;
              line-height: 20px;
              text-align: justify;
            }
          }
          span{
            margin: 25px auto 0 auto;

            transition: all ease .5s;
            max-height: 0rem;
            padding: 0;

            color: var(--bg-color-white);
            background: var(--bg-color-purple);

            gap: 8px;
            align-items: center;
            overflow: hidden;
            &::after{
              width: 20px;
            }
          }
        }
      }
      a:hover{
        .blog-card{
          span{
            max-height: 30rem;
            padding: 16px 25px;
          }

        }
      }
    }
    .paginator-button{
      margin-top: 2rem;
      .paginator{
        display: flex;
        justify-content: end;
        align-items: center;
        gap: 7px;
        span{
          background: var(--bg-color-purple);
          color: var(--bg-color-white);
          padding: 3px;
          box-sizing: border-box;

          color: var(--5, #FFF);
          text-align: center;
          font-family: "Roboto-400",sans-serif;
          font-size: 10.667px;
          line-height: 12.121px; /* 113.636% */

          height: 18px;
          width: 18px;

          display: flex;
          justify-content: center;
          align-items: center;
        }
        a{
          background: transparent;

          color: var(--7, #4D4D4D);
          text-align: center;
          font-family: "Roboto-400",sans-serif;
          font-size: 10.667px;
          line-height: 12.121px; /* 113.636% */

          height: 18px;
          width: 18px;
          padding: 3px;
          box-sizing: border-box;

          display: flex;
          justify-content: center;
          align-items: center;
        }
        a.next,a.prev{
          width: fit-content;
        }
      }
    }
  }
}


/*platilla noticia*/
main{
  position: relative;
  &:before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: linear-gradient(180deg, #FFF 74.61%, #C1C1C1 100%);
    z-index: -3;
  }
  &:after{
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    height: 600px;
    width: 800px;
    opacity: 0.3;
    /* background: url(../../images/bg-mainbanner-bottom.webp); */
    background: url('../../images/bg-noticias.webp');
    background-position: bottom right;
    background-repeat: no-repeat;
    background-size: contain;
    z-index: -2;
  }
  section.content{
    padding: 140px 0 70px 0; 
    &>a{
      color: var(--bg-color-purple);
      font-family: "Roboto-600",sans-serif;
      font-size: 19px;
      line-height: 18px;
      display: flex;
      flex-direction: row;
      gap: 12px;
      &::before{
        content: '';
        height: 16px;
        width: 17px;

        background: url('../../images/Arrow-left-purple.svg');
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
      }
    }
    &>div{
      display: flex;
      gap: 49px;
      margin-top: 24px;
      justify-content: center;
      .main-content-entrada{
        display: flex;
        flex-direction: column;
        gap: 25px;
        width: 75%;
        h1{
          color: var(--bg-color-purple);
          font-family: "Roboto-800",sans-serif;
          font-size: 26px;
          line-height: 30px; /* 115.385% */
          width: 60%;
        }
        .content-blog{
          color: var(--bg-color-greyblack);
          font-family: "Roboto-400",sans-serif;
          font-size: 19px;
          line-height: 23px; /* 121.053% */
          ul,ol{
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
            padding-left: 1.5rem;
            li{
              list-style: unset;
            }
          }
          p{
            color: var(--bg-color-greyblack);
            font-family: "Roboto-400",sans-serif;
            font-size: 19px;
            line-height: 23px; /* 121.053% */
            text-align: justify;
          }
          p{
            overflow: hidden;
            a{
                background:unset;
                color: var(--bg-color-purple);
                font-family: "Roboto-400",sans-serif;
                font-size: 19px;
            }
            img{
              border-radius: 20px;
              aspect-ratio: 852 / 272;
              width: 100%;
              height: auto;
              object-fit: cover;
            }
          }

        }
        a{
          color: var(--bg-color-white);
          background: var(--Linear-boton, linear-gradient(270deg, #4C41AC 0%, #1F156D 100%));
          margin: 0 auto;
        }
      }
      .related-content{
        display: flex;
        flex-direction: column;
        gap: 70px;
        width: 25%;
        .card-related-content{
          .container-card{
            display: flex;
            flex-direction: column;
            gap: 16px;
            border-radius: 5px;
            overflow: hidden;
            .container-img{
              width: 100%;
              height: 260px;
              img{
                height: 100%;
                width: 100%;
                object-fit: cover;
                object-position: center;
              }
            }
            h2{
              color: var(--3, #312783);
              font-family: "Roboto-800",sans-serif;
              font-size: 16.107px;
              line-height: normal;
            }
            p{
              color: var(--4, #1E1410);
              font-family: "Roboto-400",sans-serif;
              font-size: 13.583px;
              line-height: normal;
            }
            .llamado{
              display: flex;
              flex-direction: column;
              gap: 6px;

              span{
                color: var(--3, #312783);
                font-family: "Roboto-400",sans-serif;
                transition: all ease .5s;
                letter-spacing: normal;
                font-size: 14.715px;
                line-height: normal;
              }
              hr{
                border-radius: 1.132px;
                background: var(--3, #312783);
                height: 3px;
                transition: all ease .5s;
                width: 100%;
              }
            }
          }
        }
        .card-related-content:hover{
          .container-card{
            .llamado{
              span{
                font-size: 16.715px;
                letter-spacing: 2px;
              }
              hr{
                width: 40%;
              }
            }
          }
        }
      }

    }
  }
  section.ultimas-noticias{
    padding: 45px 0 110px 0;
    box-sizing: border-box;
    position: relative;
    &::before{
      content: '';
      height: 100%;
      width: 100%;
      top: 0;
      left: 0;
      position: absolute;

      opacity: 0.1;
      background: var(--3, #312783);
      z-index: -1;
    }
    .container{
      display: flex;
      flex-direction: column;
      gap: 40px;
      h2{
        color: var(--bg-color-purple);
        text-align: center;
        font-family: "Roboto-600",sans-serif;
        font-size: 28px;
        line-height: normal;
      }
      .container-ultimas-noticias{
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        gap: 40px;
        max-width: calc(300px* 4 + 40px* 3);
        margin: 0 auto;
        width: 100%;
        .card-related-content{
          height: 100%;
          .container-card{
            display: flex;
            flex-direction: column;
            gap: 16px;
            border-radius: 5px;
            overflow: hidden;
            height: 100%;
            .container-img{
              width: 100%;
              /*height: 148px;*/
              aspect-ratio: 1/1;
              border-radius: 10px;
              img{
                height: 100%;
                width: 100%;
                object-fit: cover;
                object-position: center;
              }
            }
            h2{
              color: var(--3, #312783);
              font-family: "Roboto-800",sans-serif;
              font-size: 16.107px;
              line-height: normal;
            }
            p{
              color: var(--4, #1E1410);
              font-family: "Roboto-400",sans-serif;
              font-size: 13.583px;
              line-height: normal;
            }
            .llamado{
              display: flex;
              flex-direction: column;
              gap: 6px;
              margin-top: auto;
              span{
                color: var(--3, #312783);
                font-family: "Roboto-400",sans-serif;
                transition: all ease .5s;
                letter-spacing: normal;
                font-size: 14.715px;
                line-height: normal;
              }
              hr{
                border-radius: 1.132px;
                background: var(--3, #312783);
                height: 3px;
                transition: all ease .5s;
                width: 100%;
              }
            }
          }
        }
        .card-related-content:hover{
          .container-card{
            .llamado{
              span{
                font-size: 16.715px;
                letter-spacing: 2px;
              }
              hr{
                width: 40%;
              }
            }
          }
        }
      }
    }
  }
}




@media (max-width: 1150px) {
  /*platilla noticia*/
main{
  section.content{
    
    &>a{
      font-size: 13px;
      line-height: 13px;
    }
    &>div{
      width: 100%;
      .main-content-entrada{
        width: 100%;
        h1{
          width: 100%;
        }
        .content-blog{
          
          p{
            font-size: 15px;
            line-height: 20px;
          }
          p{
            overflow: hidden;
            img{
              border-radius: 20px;
              
              width: 100%;
              height: auto;
              object-fit: cover;
            }
          }

        }
        a{
          
        }
      }
      .related-content{
        display: none;
        .card-related-content{
          .container-card{
            
            .container-img{
              width: 100%;
              height: 260px;
              img{
                height: 100%;
                width: 100%;
                object-fit: cover;
                object-position: center;
              }
            }
            h2{
              color: var(--3, #312783);
              font-family: "Roboto-800",sans-serif;
              font-size: 16.107px;
              line-height: normal;
            }
            p{
              color: var(--4, #1E1410);
              font-family: "Roboto-400",sans-serif;
              font-size: 13.583px;
              line-height: normal;
            }
            .llamado{
              display: flex;
              flex-direction: column;
              gap: 6px;

              span{
                color: var(--3, #312783);
                font-family: "Roboto-400",sans-serif;
                transition: all ease .5s;
                letter-spacing: normal;
                font-size: 14.715px;
                line-height: normal;
              }
              hr{
                border-radius: 1.132px;
                background: var(--3, #312783);
                height: 3px;
                transition: all ease .5s;
                width: 100%;
              }
            }
          }
        }
        .card-related-content:hover{
          .container-card{
            .llamado{
              span{
                font-size: 16.715px;
                letter-spacing: 2px;
              }
              hr{
                width: 40%;
              }
            }
          }
        }
      }

    }
  }
  section.ultimas-noticias{
    .container{
      
      h2{
        
      }
      .container-ultimas-noticias{
        
        .card-related-content{
          .container-card{
            
            .container-img{
              
            }
            h2{
              
            }
            p{
              
            }
            .llamado{
              
              span{
                
              }
              hr{
                
              }
            }
          }
        }
        .card-related-content:hover{
          .container-card{
            .llamado{
              span{
                
              }
              hr{
                
              }
            }
          }
        }
      }
    }
  }
}
}

@media (max-width: 700px) {
  section.title-noticias{
    padding: 0 0 52px 0;
    .container{
      h1{
        font-size: 25px;
        line-height: normal;
        &::before{
            width:7px;
        }
      }
      p{
        font-size: 15px;
        line-height: 20px;
      }
    }
  }
  section.grid-noticias{
    
    .container{
      .grid-container{
       
        &>a{
          
          .blog-card{
            
  
            .container-img{
              
            }
            .data{
              
              h3{
                
              }
              p{
                
              }
            }
            span{
              max-height: 30rem;
              padding: 12px 20px;
              background: var(--Linear-boton, linear-gradient(270deg, #4C41AC 0%, #1F156D 100%));
            }
          }
        }
        a:hover{
          .blog-card{
            span{
              
            }
  
          }
        }
      }
      .paginator-button{
        .paginator{
          
          span{
            
          }
          a{
            
          }
          a.next,a.prev{
            
          }
        }
      }
    }
  }

    /*platilla noticia*/
main{
  section.content{
    
    &>a{
      font-size: 13px;
      line-height: 13px;
    }
    &>div{
      width: 100%;
      .main-content-entrada{
        width: 100%;
        h1{
          width: 100%;
        }
        .content-blog{
          
          p{
            font-size: 15px;
            line-height: 20px;
          }
          p{
            overflow: hidden;
            img{
              border-radius: 20px;
              aspect-ratio: 2 / 1;
              width: 100%;
              height: auto;
              object-fit: cover;
            }
          }

        }
        a{
          
        }
      }
      .related-content{
        display: none;
        .card-related-content{
          .container-card{
            
            .container-img{
              width: 100%;
              height: 260px;
              img{
                height: 100%;
                width: 100%;
                object-fit: cover;
                object-position: center;
              }
            }
            h2{
              color: var(--3, #312783);
              font-family: "Roboto-800",sans-serif;
              font-size: 16.107px;
              line-height: normal;
            }
            p{
              color: var(--4, #1E1410);
              font-family: "Roboto-400",sans-serif;
              font-size: 13.583px;
              line-height: normal;
            }
            .llamado{
              display: flex;
              flex-direction: column;
              gap: 6px;

              span{
                color: var(--3, #312783);
                font-family: "Roboto-400",sans-serif;
                transition: all ease .5s;
                letter-spacing: normal;
                font-size: 14.715px;
                line-height: normal;
              }
              hr{
                border-radius: 1.132px;
                background: var(--3, #312783);
                height: 3px;
                transition: all ease .5s;
                width: 100%;
              }
            }
          }
        }
        .card-related-content:hover{
          .container-card{
            .llamado{
              span{
                font-size: 16.715px;
                letter-spacing: 2px;
              }
              hr{
                width: 40%;
              }
            }
          }
        }
      }

    }
  }
  section.ultimas-noticias{
    .container{
      
      h2{
        
      }
      .container-ultimas-noticias{
        
        .card-related-content{
          .container-card{
            
            .container-img{
              
            }
            h2{
              
            }
            p{
              
            }
            .llamado{
              
              span{
                
              }
              hr{
                
              }
            }
          }
        }
        .card-related-content:hover{
          .container-card{
            .llamado{
              span{
                
              }
              hr{
                
              }
            }
          }
        }
      }
    }
  }
}
}


@media(min-width : 1800px){

  section.grid-noticias {
    .container {
      .grid-container {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 38px;
        max-width: calc(400px* 3 + 38px* 2);
        a {
          .blog-card {
            .data {
              h3{
                font-size: 20px;
                line-height: 27px;
              }
              p {
                font-size: 17px;
                line-height: 22px;
              }
            }
          }
        }
      }
      .paginator-button {
        .paginator {
          span {
            background: var(--bg-color-purple);
            color: var(--bg-color-white);
            padding: 3px;
            box-sizing: border-box;
            color: var(--5, #FFF);
            text-align: center;
            font-family: "Roboto-400", sans-serif;
            font-size: 18.667px;
            line-height: 21.121px;
            height: 26px;
            width: 26px;
            display: flex;
            justify-content: center;
            align-items: center;
          }
          a{
            font-size: 18.667px;
            line-height: 21.121px;
            height: 26px;
            width: 26px;
          }
        }
      }
    }
  }


  main{
    section.content {
      &>div {
        .related-content {
          .card-related-content {
            .container-card {
              h2{
                font-size: 20.107px;
              }
              p{
                font-size: 17.583px;
              }
              .container-img {
                width: 100%;
                height: 400px;
              }
              .llamado{
                span{
                  font-size: 20.715px;
                }
              }
            }
          }
        }
      }
    }
  }

  main {
    section.ultimas-noticias {
      .container {
        .container-ultimas-noticias {
          display: grid;
          grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
          gap: 40px;
          max-width: calc(360px* 4 + 40px* 3);
          margin: 0 auto;
          width: 100%;
          .card-related-content {
            .container-card {
              h2 {
                font-size: 20.107px;
              }
              p{
                font-size: 17.583px;
              }
              .llamado{
                span{
                  font-size: 19.715px;
                }
              }
            }
          }
        }
      }
    }
  }


}