
/* RRESPONSIVE */
@media screen and (max-width: 768px) {
    
    p {
    font-family: 'Karla';
    font-size: 1rem;
    }
    
    h2 {
        font-size: 1.2rem;
    }
    
    #encabezado {
      width: 100%;
      position:fixed;
      z-index: 1;
      top: 0;
  
    }
    .slick-prev,
    .slick-next {
        display: none !important;
    }
  
    .marquesina {
      height: auto;
    }
  
    #navBar {
      display: none;
    }
  
    .navbar {
      display: flex;
    }
    .menu {
      display: none;
      flex-direction: column;
      width: 90%;
      position: absolute;
      top: 55px;
      left: 10%;
      background-color: rgba(0, 0, 0, 0.1);
      
  }
  .menu ul {
    height: 100vh;
    z-index: 2;
  }
  .menu li {
    z-index: 2;
  }
  .menu li :hover{
    color: #97D121 ;
  }
  .menu.show {
    display: flex;
    position: fixed;
    z-index: 1;
  }
  .menu-icon {
      display: flex;
  }
  #logo {
    padding: 10px;
  }
  
    nav{
      justify-content: center;
    }
    #menuNav {
      display: none;
    }
    .overlay {
      display: none;
    }
    .img1 {
      height: auto;
    }
    .h2-article1 {
      font-size: 20px;
      padding-left: 15px;
 
    }
    .title-article {
      margin-top: 10px;
      padding-left: 15px;
      margin: 10px;
      margin-top: 130px;
      font-size: 40px; /* Reducir el tamaño del título para dispositivos móviles */
    }
    .p-article1 {
      font-size: 15px;
    }
    .contenedor-article-pa{
      padding-left: 10px;
    }
    .img2 {
      width: 100%;
      height: auto;
    }
    #contenedor-img-art2 {
      height: auto;
      width: 100%;
    }
    .img3 {
      width: 100%;
      height: auto;
    }
    #contenedor-img-art3 {
      height: auto;
      width: 100%;
    }
    .img4 {
      width: 100%;
      height: auto;
    }
    #contenedor-img-art4 {
      height: auto;
      width: 100%;
    }
    .img5 {
      width: 100%;
      height: auto;
    }
    #contenedor-img-art5 {
      height: auto;
      width: 100%;
    }
    
    .h2-RELATED {
      font-size: 40px;
      margin-left: 10px;
    }
  
    .carousel-art p{
      font-size: 15px;
    }
    
    .carousel-art button.btn{
      font-size: 12px;
    }
  
    #br_mobile {
      display: flex !important;
    }

        /* Estilos para BODY*/
        .container {
          width: calc(100% - 50px);
          padding-left: 25px;
          padding-right: 25px;
        }
        .grid {
          display: flex;
          flex-direction: column;
          align-items: center;
           /* Centra los elementos horizontalmente */
      }
  
      .image-section {
         /* Ocupa el 90% del ancho total */
          height: 250px; /* Altura fija para todos los cuadros */
          margin: 10px 0; /* Margen superior e inferior */
          grid-column: auto; /* Ocupa una columna */
          grid-row: auto; /* Ocupa una fila */
      }
      .section {
        /* Ocupa el 90% del ancho total */
         height: 180px; /* Altura fija para todos los cuadros */
         margin: 10px 0; /* Margen superior e inferior */
         grid-column: auto; /* Ocupa una columna */
         grid-row: auto; /* Ocupa una fila */
     }
  
      .section.wide, .section.tall {
          width: 100%; /* Ahora ocupa una posición */
          height: 250px; /* Altura fija para todos los cuadros */
          margin: 10px 0; /* Margen superior e inferior */
      }
  
      .section h2, .section p {
          width: 100%; /* Ocupan todo el ancho disponible */
          margin-left: 0; /* Sin margen izquierdo */
      }
  
      .c_ancho {
          flex-direction: column;
          justify-content: space-between; /* Cambia a columna para móvil */
      }
      .c_ancho h2{
        height: 40%;
    }
    
    .c_ancho p{
        height: 50%;
    }
  
      .c_ancho h2, .c_ancho p {
          width: 100%; /* Ocupan todo el ancho disponible */
          margin-left: 0; /* Sin margen izquierdo */
      }

      .container_line {
        display: none;
      }
      
      .line {
        display: none;
      }
      
      .vertical-line {
        display: none;
      }
      
      .dot {
        display: none;
      }
      
      .container_line2 {
        display: none;
      }
      
      .line2 {
        display: none;
      }
      
      .vertical-line2 {
        display: none;
      }
      
      .dot2 {
        display: none;
      }
    
      .container_line3 {
        display: none;
      }
      
      .line3 {
        display: none;
      }
      
      .vertical-line3 {
        display: none;
      }
      
      .dot3 {
        display: none;
      }
      
      .container_line4 {
        display: none;
      }
      
      .line4 {
        display: none;
      }
      
      .dot4 {
        display: none;
      }
      
    /* Estilos para FOOTER*/
  
    .logofooter{
      display: none;
    }
    
    .logo{
      width: 100%;
    }
    
    .sec-foot {
      margin-right: 0;
    }
    .logofooter_vertical{
      display: flex;
      width: 50%;
      margin: auto;
      padding-top: 30px;
      padding-bottom: 30px;
    
    }
    .content-right{
      padding-bottom: 20px;
      width: 100%;
      flex-direction: column;
      align-items: center;
    }
    
    .parr-foot{
      margin-bottom: 25px;
      margin-left: 0;
      font-size:20px;
    }
  
  .button-enviar{
    margin:0;
  }
  
  .sec-foot6{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .sec-foot6 p{
    padding-left: 30px;
    font-size: 15px !important;
  }
  
  .sec-foot4 {
    display: flex;
    flex-direction: column;
  }
  
  .logos2{
    width: 95%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .logo-footer2-madrid {
    width: 40%;
    height: auto;
    margin-right: 0;
  }
  
  .logo-footer2 {
    width: 50%;
    height: auto;
  }

  .logo-footer {
    margin-left: 10px;
    margin-right: 10px;
  }
  #lanzadera {
    margin-top: 5px;
  }
  
  #acelera {
    margin-top: 20px;
    padding-bottom: 20px;
  }
  .button-contact {
    width: 40%;
    margin-right: 30%;
  }
  }