:root{
    --color1:#FD1543;
    --color2:#ffffff;
    --color3:#163276;
    --color4:#173277;
    --color5:#AFE1FC;
    --color6:#147DCF;
    --color7:#E73C48;
    --color8:#E5F6FE;
    --color9:#015AA4;
    --color10: #59AFF8;
    --color11: #025AA5;
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
@font-face {
    font-family: "Museo_Sans_100";
    src: url("../fonts/MuseoSans-100.otf");
    font-weight: 100;
}
@font-face {
    font-family: "Museo_Sans_300";
    src: url("../fonts/MuseoSans-300.otf");
    font-weight: 300;
}
@font-face {
    font-family: "Museo_Sans_500";
    src: url("../fonts/MuseoSans-500.otf");
    font-weight: 500;
}
@font-face {
    font-family: "Museo_Sans_700";
    src: url("../fonts/MuseoSans_700.otf");
    font-weight: 700;
}
@font-face {
    font-family: "Museo_Sans_900";
    src: url("../fonts/MuseoSans_900.otf");
    font-weight: 900;
}
.d-none{
  display: none;
}
.hescritorio{
  display: block;
}
.hmovil{
  display: none;
}
.hover{
  background-color: var(--color10)!important;
}
img{
  max-width: 100%;
  height: auto;
}
.box_red{
  display: flex;
  flex-direction: row;
  justify-content: center;
  padding-top: 7px!important;
  padding-bottom: 7px!important;
  background-color: var(--color1);
  border-radius: 7px;
  width: 100% !important;
  }
  .box_red img{
    width: 32px;
    height: 23px;
    align-self: center;
    margin-left: 10px;
    margin-right: 10px;
    vertical-align: bottom;
  }
  .box_red a{
    color: var(--color2);
    text-decoration: none;
    align-self: center;
    font-size: 20px;
    font-family: "Museo_Sans_900"
  }
header{
  background-image: url("../img/fondoCuadrillas.png");
  background-size: cover;
  max-height: 310px;
  article{
    width: min(1020px, 95%);
    margin: 0 auto;
    overflow-y: visible;
    padding-top: 0px;
    .ribete{
      display: flex;
      height: 18px;
      width: 100%;
      max-width: 329px;
      div{
        &:first-child{
          width: 40%;
          height: 100%;
          background-color: var(--color6);
        }
        &:nth-child(2){
          background-color: var(--color7);
          width: 60%;
          height: 100%;
        }
        
      }
    }
    div{
      display: flex;
      flex-direction: row;
      height: calc(310px - 18px);
      a{
          align-self: center;
      }
      img{
        &:first-child{
          align-self: center;
          width: 253px;
          height: 195px;
          
        }
        &:nth-child(2){
          align-self: flex-end;
          height: auto;
          width: 66%;
        }
         &:nth-child(3){
         object-fit: contain;
         align-self: center;
         width: 246px;
         height: 93px;
        }
      }
    }
  }
}
h1{
    display: none;
}
.viewvideo{
  max-width: 612px;
}
/* Estilos base */
.nav {
  position: relative;
  background-color: var(--color2);
  padding: 10px;
  display: none;
}
.nav-list {
  display: flex;
  list-style: none;
  gap: 15px;
  justify-content: center;
  padding: 0;
  margin: 0;
}
.nav-list li {
  width: 290px;
  height: 32px;
  background-color: var(--color3);
  display: flex;
  align-items: center;
  justify-content: center;
}
.nav-list li:hover {
  background-color: var(--color10);
}
.nav-list a {
  display: flex;
  align-items: center;
  justify-content: start;
  gap: 8px;
  width: 100%;
  height: 100%;
  color: var(--color2);
  text-decoration: none;
  font-weight: bold;
}
.nav-list a img {
  width: 16px;
  height: 15px;
}
/* Botón hamburguesa */
.hamburger {
  display: none;
  font-size: 28px;
  background: none;
  color: var(--color2);
  border: none;
  cursor: pointer;
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
}
nav {
  background-color: var(--color3);
  font-family: "Museo_Sans_700";
  font-size: 16px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
 
  padding: 10px;
}
nav ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  justify-content: center;
  gap:15px;
}
nav li {
  text-align: center;
  width: 253px;
  height: 32px;
  background-color: var(--color9);
  display: flex;
  align-items: center;
  justify-content: center;
}
nav li a img{
  width: 16px;
  height: 15px;
}
nav li a {
  display: block;
  height: 32px;           /* Altura fija para todos */
  line-height: 32px;      /* Centrado vertical */
  color: var(--color2);
  text-decoration: none;
  padding: 0 10px;
  font-weight: bold;
  transition: background-color 0.3s;
}

nav li:hover {
  background-color: var(--color10);
}
/* Botón hamburguesa */
.hamburger {
  display: none;
  font-size: 28px;
  background: none;
  color: var(--color3);
  border: none;
  cursor: pointer;
  position: absolute;
  top: 0px;
  left: 50%;
  transform: translateX(-50%);
}
main{
    hr{
        border-top: var(--color3) 8px solid;
    }
}
article{
    width: min(1020px, 95%);
    margin: 0 auto;
    padding-top: 40px;
    padding-bottom: 50px;
    h2{
    color: var(--color2);
    background-color: var(--color3);
    font-size: 26px;
    line-height: 31px;
    display: inline-block;
    padding-left: 10px;
    padding-right: 15px;
    padding-top: 10px;
    padding-bottom: 12px;
    margin-left: auto;
    margin-right: auto;
    font-weight: 900;
    font-family: "Museo_Sans_900";
    margin-bottom: 30px;
    border-radius: 4px;
  }
  p{
        font-size: 16px;
        line-height: 19px;
        font-weight: 500;
        font-family: "Museo_Sans_500";
        color: var(--color4);
        margin-left: 0px;
        margin-bottom: 25px;
  }
}
.presente{
    background-color: var(--color2);
    article{
      p{
        a{
          text-decoration: none;
          color: var(--color1);
          font-weight: 900;
         font-family: "Museo_Sans_900";
         border: var(--color1) solid 1px;
         border-radius: 7px;
        
        }
      }
    }
}
.video{
    background-color: var(--color5);
    .bajada{
        font-size: 20px;
        line-height: 24px;
        font-weight: 500;
        font-family: "Museo_Sans_500";
        color: var(--color4);
        margin-top: 23px;
        position: relative;
        .izquierda{
          position: absolute;
          left: -100px;
          top: -10px;
        }
        .derecha{
          position: absolute;
          right: -100px;
          top: -5px
        }
    }
     .video_download{
      display: flex;
      flex-direction: column;
      background-color: var(--color3);
      border-radius: 13px;
      max-width: 381px;
      height: 343px;
      align-items: center;
      justify-content: space-evenly;
      p{
        font-size: 26px;
        font-weight: 700;
        font-family: "Museo_Sans_700";
        color: var(--color8);
        text-align: center;
        line-height: 30px;
        text-wrap-mode: wrap;
        text-wrap-style: balance;
        text-wrap: balance;
        strong{
          font-weight: 900;
          font-family: "Museo_Sans_900";
        }
        align-self: center;
        margin-bottom: 0px;

      }
    }
    button{
       border-radius: 13px;
       border: none;
      .video_download{
        display: flex;
        flex-direction: row;
        background-color: var(--color3);
        border-radius: 13px;
        max-width: 381px;
        height: 165px;
        align-items: center;
        justify-content: space-evenly;
        padding: 0px 20px;
        img{
          width: 87px;
          height: 50px;
          max-width: 87px;
        }
        p{
          font-size: 18px;
          font-weight: 700;
          font-family: "Museo_Sans_700";
          color: var(--color8);
          text-align: center;
          line-height: 22px;
          margin-bottom: 0px;
          text-wrap-mode: wrap;
          text-wrap-style: balance;
          text-wrap: balance;
          strong{
            font-weight: 900;
            font-family: "Museo_Sans_900";
          }
        }
        a{
          img{
            width: 63px;
            height: 45px;
            max-width: 63px;
          }
        }
      }
    }
}
.jornada{
    background-color: var(--color2);
    div{
        width: min(1020px, 95%);
        margin: 0 auto;
        padding-top: 40px;
        padding-bottom: 50px;
         position: relative;
        h2{
            color: var(--color2);
            background-color: var(--color3);
            font-size: 26px;
            line-height: 31px;
            display: inline-block;
            padding-left: 10px;
            padding-right: 15px;
            padding-top: 10px;
            padding-bottom: 12px;
            margin-left: auto;
            margin-right: auto;
            font-weight: 900;
            font-family: "Museo_Sans_900";
            margin-bottom: 30px;
             border-radius: 4px;
        }
        article{
            padding-top: 0px;
            padding-bottom: 0px;
            margin-left: 0px;
            h3{
                color: var(--color4);
                font-size: 22px;
                font-weight: 900;
                font-family: "Museo_Sans_900";
                line-height: 27px;
                margin-bottom: 17px;
            }
            div{
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                padding: 0px 0px;
                .card{
                    display: flex;
                    flex-direction: column;
                    width: 30%; 
                    img{
                        max-width: 137px;
                        max-height: 137px;
                        width: 137px;
                        height: 137px;
                        display: flex;
                        align-self: center;
                        
                    }
                    h4{
                        color: var(--color1);
                        font-size: 16px;
                        font-weight: 900;
                        font-family: "Museo_Sans_900";
                        line-height: 19px;
                        text-align: center;
                        margin-top:14px;
                        margin-bottom: 7px;
                    }
                    p{
                        color: var(--color4);
                        font-size: 16px;
                        font-weight: 500;
                         font-family: "Museo_Sans_500";
                        text-align: center;
                    }
                }
            }
            .orientaciones{
              display: grid;
              gap: 25px;
               grid-template-columns: repeat(2, 1fr);
               margin:30px 0px;
              .orientacion{
                background-color: var(--color3);
                border-radius: 15px;
                width: 476px;
                height: 62px;
                display: flex;
                flex-direction: row;
                align-content: center;
                flex-wrap: nowrap;
                a{
                  text-decoration: none;
                  display: flex;
                }
                img{
                  width: 44px;
                  height: 31px;
                  margin: 15px;
                }
                p{
                  color: var(--color8);
                  font-family: "Museo_Sans_700";
                  font-size: 20px;
                  align-self: center;
                  line-height: 24px;
                  margin:0px;
                }
              }
            }
            .link_metodologia{
              margin: 25px auto;
              text-align: center;
              z-index: 5;
              
              a{
                text-decoration: none;
                color: var(--color1);
                font-family: "Museo_Sans_900";
                font-size: 16px;
                border:var(--color1) solid 1px;
                border-radius: 7px;
                padding: 5px;
              }
            }
        }
        .fila{
          display: flex;
          flex-direction: row;
          gap: 64px;
          margin: 0px;
          padding: 20px 0px;
          justify-content: space-between;
          .rojo{
            background-color: var(--color1)!important;
          }
          .caja_uno{
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 25px;
            background-color: var(--color3);
            opacity: 1;
            border-radius: 15px;
            width: 280px;
            max-width: 280px;
            height: 107px;
            font-size: 20px;
            font-family: "Museo_Sans_700";
            color: var(--color8);
            padding: 10px;
            margin: 0px;
            strong{
               font-family: "Museo_Sans_900";
            }
            img{
              width: 44px;
              height: 31px;
            }
          
            p{
              a{
                 font-size: 20px;
            font-family: "Museo_Sans_700";
            color: var(--color8);
            text-decoration: none;
              }
            }
          }
          .caja_dos{
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 8px;
            background-color: var(--color3);
            opacity: .7;
            border-radius: 15px;
            width: 280px;
            max-width: 280px;
            height: 107px;
            font-size: 20px;
            font-family: "Museo_Sans_700";
            color: var(--color8);
            padding: 10px;
            margin: 0px;
            strong{
               font-family: "Museo_Sans_900";
            }
            img{
              width : 44px;
              height: 31px;
            };
             p{
              a{
                 font-size: 20px;
            font-family: "Museo_Sans_700";
            color: var(--color8);
            text-decoration: none;
              }
            }
          }
          .caja_tres{
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 8px;
            background-color: var(--color3);
            opacity: .5;
            border-radius: 15px;
            width: 280px;
            max-width: 280px;
            height: 107px;
            font-size: 20px;
            font-family: "Museo_Sans_700";
            color: var(--color8);
            padding: 10px;
            margin: 0px;
            strong{
               font-family: "Museo_Sans_900";
            }
            img{
              width : 44px;
              height: 31px;
            };
             p{
              a{
                 font-size: 20px;
            font-family: "Museo_Sans_700";
            color: var(--color8);
            text-decoration: none;
              }
            }
          }
        }
        .frase_destacada{
          background-color: var(--color1);
          color: var(--color2);
          text-align: center;
          font-family: "Museo_Sans_900";
          font-size: 20px;
          padding: 11px 0px;
          border-radius: 7px;
          margin: 28px 0px 40px 0px;
        }
    }
    .jizquierda{
      bottom: -15px;
      position: absolute;
      left: -125px;
    }
    .jderecha{
      position: absolute;
      bottom: 0px;
      right: -100px;
    }
    .centro{
      position: absolute;
      bottom: 0px;
      z-index: 2;
      pointer-events: none;
    }
}
.noticias{
  background-image: url("./../img/fondoCuadrillas.png");
  article{
    padding-bottom: 5px;
    p{
      margin-bottom: 5px;
      background-color: rgba(255,255,255,.7);
      font-size: 18px;
      font-family: "Museo_Sans_900";
    }
  }
}
.degrado_final{
  width: 100%;
  text-align: center;
}
.otrasIniciativas{
   .seccion {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
      align-items: stretch;
    }

    .columna {
      background-color: #fff;
      border: 1px solid #ddd;
      box-shadow: 0 2px 5px rgba(0,0,0,0.1);
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      text-align: center;
    }

  .columna h3 {
  background-color: #007BFF;
  color: var(--color2);
  margin: 0;
  padding: 0 10px;
  font-size: 18px;
  height: 60px; /* Altura uniforme */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

    .columna p {
      padding: 20px 15px;
      margin: 0;
      color: #444;
      font-size: 14px;
      flex-grow: 1;
    }
}
.encuesta article h2{
   color: var(--color2);
            background-color: var(--color3);
            font-size: 26px;
            line-height: 31px;
            display: inline-block;
            padding-left: 10px;
            padding-right: 15px;
            padding-top: 10px;
            padding-bottom: 12px;
            margin-left: auto;
            margin-right: auto;
            font-weight: 900;
            font-family: "Museo_Sans_900";
            margin-bottom: 30px;
             border-radius: 4px;
}
.encuesta article p{
    color: var(--color4);
    font-family: "Museo_Sans_500";
    font-size: 16px;
    line-height: 19px;
}
.encuesta article button{
  padding:5px 14px; width: 265px; height: 41px; text-align: start; border-radius: 10px; display: flex; background-color: var(--color1);
  border-color: var(--color1);
  border-style: solid;
  border-width: 1px;
}
.encuesta article button a{
  display: flex; flex-direction: row; align-items: center; text-decoration: none; color: var(--color2); font-family: "Museo_Sans_900"; font-size: 14px;
}
.encuesta article button a img{
  margin-right: 16px; width: 22px; height: 31px;
}
.encuesta ol{
  margin-top: 1em;
  margin-bottom: 1em;
  list-style-position: outside;
  display: block;
  padding-left: 40px;
   color: var(--color4);
    font-family: "Museo_Sans_500";
    font-size: 16px;
    line-height: 19px;
}
.encuesta ul{
  list-style-type: disc;
  margin-top: 1em;
  margin-bottom: 1em;
  padding-left: 40px;
  list-style-position: outside;
}
/* boton material descargable*/
.banner-descarga {
  background-color: var(--color3);
  color: var(--color2);
  text-decoration: none;
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 15px 0px;
}

.icono-descarga {
  width: 52px;
  height: 37px;
  margin-bottom: 10px;
  margin-top: 5px;
}

.texto {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.titulo {
  font-family: "Museo_Sans_700";
}

.descripcion {
  padding: 0px 30px;
  font-family: "Museo_Sans_100";
  text-align: center;
  font-size: 16px;
  line-height: 19px;
 }
/* boton material descargable*/



footer{
  background-color: var(--color4);
  article{
    h3{
      color: var(--color2);
      font-size: 28px;
      text-align: center;
      font-weight: 900;
       font-family: "Museo_Sans_900";
      margin-bottom: 50px;
    }
    div{
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      span{
        color: var(--color2);
        font-size: 20px;
        font-weight: 900;
        font-family: "Museo_Sans_900";
        text-align: center;
        align-self: center;
        width: 33%;
        span{
          font-weight: 500;
           font-family: "Museo_Sans_500";
        
        }
        img{
          width: 90%;
          text-align: center;
        }
      }
    }
  }
}
/* ===== Capa exterior ===== */
.carousel {
  position: relative;
  width: min(90vw, 1000px);
  aspect-ratio: 16 / 9;
  margin: 1rem auto;
  overflow: visible;
}

/* ===== Ventana que recorta ===== */
.viewport {
  width: 100%;
  height: 100%;
  overflow: hidden;
  
}

/* ===== Pista de slides ===== */
.track {
  display: flex;
  width: 100%;        /* 3 imágenes */
  height: 100%;       /* importante para que herede la altura */
  transition: transform 0.5s ease;
}

/* ===== Cada slide ===== */
.slide {
  width: 100%;
  height: 100%;       /* importante */
  flex-shrink: 0;
}

.slide a {
  display: block;
  width: 100%;
  height: 100%;
}

.slide img {
  width: 100%;
  height: auto;
  object-fit: scale-down;  /* ajusta al contenedor sin deformar */
  aspect-ratio: 16 / 9;
  display: block;
}

/* ===== Flechas ===== */
.arrow {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: clamp(1.8rem, 4vw, 3rem);
  color: #fff;
  /*background: rgba(0, 0, 0, 0.35); */
  padding: 0.25em 0.45em;
  border-radius: 50%;
  cursor: pointer;
  user-select: none;
  z-index: 5;
  transition: background 0.2s;
}

.arrow.prev {
  left: -2.4rem;
}
.arrow.next {
  right: -2.4rem;
  transform: translate(50%, -50%);
}
.material{
  .cards{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(209px, 1fr));
    gap: 3rem;
    justify-content: center;
    .card{
     display: flex;
     flex-direction: column;
     h4{
      color: var(--color3);
      font-size: 20px;
      font-family: "Museo_Sans_900";
      line-height: 24px;
     }
     img{
    
      aspect-ratio: 209 / 261;
      object-fit: scale-down;
      box-sizing: content-box;
     }
     .boton{
       background-color: var(--color3);
                border-radius: 10px;
                width: 209px;
                height: 29px;
                margin-top: 5px;
                display: flex;
                flex-direction: row;
                align-content: center;
                img{
                  width: 29px;
                  height: 21px;
                  margin: 5px 10px;
                }
                p{
                  color: var(--color8);
                  font-family: "Museo_Sans_700";
                  font-size: 14px;
                  align-self: center;
                  line-height: 17px;
                  margin:0px;
                  a{
                    text-decoration: none;
                     color: var(--color8);
                  font-family: "Museo_Sans_700";
                  font-size: 14px;
                  align-self: center;
                  }
                }
     }
    }
  }
}
.planAccion{
  .cards{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    .card{
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: 37px;
      img{
        width: 137px;
        height: 137px;
        aspect-ratio: 137 / 137;
        margin-bottom: 10px;
      }
      h4{
        text-align: center;
        font-family: "Museo_Sans_900";
        color: var(--color1);
        font-size: 16px;
      }
      p{
        text-align: center;
        font-family: "Museo_Sans_500";
        color: var(--color4);
        font-size: 16px;
        width: 91%;
        margin-top: 10px;
      }
    }
  }
  .cards2{
     display: grid;
    grid-template-columns: repeat(auto-fit, minmax(333px, 1fr));
    .card{
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 37px;
      width: 333px;
      max-width: 333px;
      justify-self: center;
      img{
        width: 77px;
        height: 77px;
        aspect-ratio: 77 / 77;
        margin-bottom: 10px;
      }
      h4{
        text-align: center;
        font-family: "Museo_Sans_900";
        color: var(--color1);
        font-size: 16px;
        width: 97%;
      }
      p{
        text-align: center;
        font-family: "Museo_Sans_500";
        color: var(--color4);
        font-size: 16px;
        margin-top: 10px;
      }
      .box{
        display: flex;
        flex-direction: row;
        background-color: var(--color3);
        align-items: center;
        border-radius: 15px;
        justify-content: center;
        padding: 10px 0px;
        gap: 15px;
        img{
          max-width: 31px;
          max-height: 21px;
          margin:0px;
        }
        p{
          font-family: "Museo_Sans_700";
          font-size: 16px;
           color: var(--color8);
           width: 67%;
           text-align: start;
           margin: 0px;
          a{
            text-decoration: none;
            color: var(--color8);
             font-family: "Museo_Sans_700";
            strong{
              font-family: "Museo_Sans_900";
              color: var(--color8);
            }
          }
        }
      }
    }
  }
}
.otrasIniciativas .cards{
   display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 45px 20px;
  padding-top: 0px;

}
.otrasIniciativas .cards    .card{
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: 37px;
      width: 300px;
}
.otrasIniciativas .cards    .card      img{
        width: 110px;
        height: 110px;
        aspect-ratio: 110 / 110;
        margin-bottom: 10px;
      }
 .otrasIniciativas .cards    .card       h4{
        text-align: center;
        font-family: "Museo_Sans_900";
        color: var(--color1);
        font-size: 16px;
      }
.otrasIniciativas .cards    .card        p{
        text-align: center;
        font-family: "Museo_Sans_500";
        color: var(--color4);
        font-size: 16px;
        width: 91%;
        margin-top: 10px;
      }
 .otrasIniciativas .cards    .card        .box{
        display: flex;
        flex-direction: row;
        background-color: var(--color3);
        align-items: center;
        border-radius: 15px;
        justify-content: center;
        padding: 4px 10px;
        gap: 5px;
         margin-top: auto;
 }
    .otrasIniciativas .cards    .card        .box     img{
          max-width: 18px;
          max-height: 10px;
          margin:0px;
        }
    .otrasIniciativas .cards    .card        .box       p{
          font-family: "Museo_Sans_700";
          font-size: 13px;
           color: var(--color8);
           text-align: start;
           margin: 0px;
    }
     .otrasIniciativas .cards    .card        .box        a{
            text-decoration: none;
            color: var(--color8);
             font-family: "Museo_Sans_700";
            strong{
              font-family: "Museo_Sans_900";
              color: var(--color8);
            }
          }
       
@media (max-width: 1300px) {
  header article div img:nth-child(1){
    width: 20%;
    height: auto;
  }
   header article div img:nth-child(2){
    width: 60%;
    height: auto;
    transform: scale(1.2);
    padding-bottom: 2%;
  }
   header article div img:nth-child(3){
    width: 20%;
    height: auto;
  }
}   
@media (max-width: 900px) {
  header{
    article{
      div{
        img{
          &:nth-child(1){
            width: 20%;
            height: auto;
          }
          &:nth-child(2){
          transform: scale(1.2);
          padding-bottom: 2%;
          padding-top: 53px;
          }
          &:nth-child(3){
            object-fit: contain;
            margin: 25px 0px;
            width: 20%;
            height: auto;
          }
      }
      }
    }
  }
      .seccion {
        grid-template-columns: repeat(2, 1fr);
      }
      .fila{
        flex-wrap: wrap;
      }
      .jornada{
        div{
           article{
            .orientaciones{
              grid-template-columns: repeat(1, 1fr);
            }
          }
        }
      }
    }
@media (max-width: 768px) {
  .presente .box_red{
    padding: 10px;
    background-color: var(--color2);
    border-color: var(--color1);
    border-style: solid;
    border-width: 1px;
  }
  .presente .box_red img{
    display: none;
  }
  .presente .box_red a{
    color: var(--color1);
  }
  .viewvideo{
  width: 95%;
  iframe{
    height: 200px;
  }
}

  .nav{
    display: block;
  }
  nav{
    display: none;
  }
   .hamburger {
    display: block;
  }

  .nav-list {
    flex-direction: column;
    align-items: center;
    display: none; /* Oculto por defecto */
    background-color: var(--color3);
    position: absolute;
    top: 0px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 329px;
    border-radius: 0px 0px 8px 8px;
    z-index: 10;
    padding-top: 25px;
    padding-bottom: 25px;
  }
  .nav-list li a{
    background-color: var(--color11);
  }

  .nav-list.show {
    display: flex;

  }
  .hescritorio{
    display: none;
  }
  .hmovil{
    display: block;
    object-fit: contain;
  }
  header{
    max-height: unset!important;
    article{
      padding-bottom: 0px;
      .ribete{
        flex-direction: row;
        margin: 0 auto;
      }
      div{
        flex-direction: column;
        height: auto;
        img{
          &:nth-child(1){
            width: 253px;
            height: 195px;
          }
          &:nth-child(2){
          transform: scale(1.5);
          padding-bottom: 8%;
          padding-top: 30px;
          }
          &:nth-child(3){
            object-fit: contain;
            margin: 25px 0px;
            width: 60%;
          }
      }
    }
  }
}
 .video article div{
  flex-direction: column;
  align-items: unset;
 }
  .video article div .viewvideo .bajada .izquierda{
    display: none;
  }
 .video article div .viewvideo .bajada .derecha{
  display: none;
 }
.videosLayout .left .bajada .derecha{
  display: none;
}
.jornada{
  div{
      .fila{
       .caja_uno{
        margin: 0 auto;
       }
        .caja_dos{
        margin: 0 auto;
       }
           .caja_tres{
        margin: 0 auto;
       }
      }
      article{
        div{
          flex-direction: column;
          .card{
            width: 50%;
          }
        }
        .orientaciones{
          grid-template-columns: repeat(1, 1fr);
        }
        .box_red{
          margin-bottom: 180px!important;
        }
      }
    }
    .jizquierda{
      left: 0px;
    }
    .jderecha{
      right: 0px;
    }
  }
    .jornada div .fila{
      gap: 0px;
    }
  .jornada div .fila .caja_uno{
    width: 105px;
    height: 180px;
  }
  .jornada .fila .caja_uno img{
    display: none;
  }
   .jornada div .fila .caja_uno p a{
    font-size: 14px;
   
  }
    .jornada div .fila .caja_dos{
    width: 105px;
    height: 200px;
  }
    .jornada .fila .caja_dos img{
    display: none;
  }
     .jornada div .fila .caja_dos p a{
    font-size: 14px;
   
  }
      .jornada div .fila .caja_tres{
    width: 105px;
    height: 220px;
  }
    .jornada .fila .caja_tres img{
    display: none;
  }
       .jornada div .fila .caja_tres p a{
    font-size: 14px;
   
  }
  .jornada .box_red{
    padding: 10px;
    background-color: var(--color2);
    border-color: var(--color1);
    border-style: solid;
    border-width: 1px;
  }
  .jornada .box_red img{
    display: none;
  }
  .jornada .box_red a{
    color: var(--color1);
  }
  .jornada div article .orientaciones .orientacion{
    width: 100%;
  }
  .viewport{
    width: 80%;
    margin: 0 auto;
  }
  .arrow{
    top: 25%;
  }
  .arrow.next{
    right: -30px;
    transform: scale(0.7);
    img{
      width: 80%;
    }
  }
  .arrow.prev{
    left: -30px;
    transform: scale(0.7);
     img{
      width: 80%;
    }
  }
  .otrasIniciativas .cards{
    grid-auto-rows: auto;
  }
  footer{
    article{
      div{
        span{
          font-size: 12px;
        }
      }
    }
  }
}
@media (max-width: 500px) {
      .seccion {
        grid-template-columns: 1fr;
      }
     
}