@import url('https://fonts.googleapis.com/css2?family=Fira+Sans+Condensed:wght@300;400;700;900&family=Mukta:wght@400;700&display=swap');

* {
    margin: 0em;
    padding: 0em;
    border: 0em;
    box-sizing: border-box;
    }

body {
    font-family: 'Mukta', sans-serif;
    font-weight: 400;
    background-color: #f7f7f7;
    }

ul {list-style: none;}
a {text-decoration: none;}


/*HEADER*/

header {
    max-width: 90%;
    margin-inline: auto;
    padding-top: 1em;
    border-bottom-style: solid;
    border-bottom-color: #fa0c47;
    border-bottom-width: 0.3em;
    padding-bottom: 1em;
}

.contenedora {
    padding: 0 1.2em;
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo {
    display: block;
    width: 3.5em;
    max-width: 5em;
    border-style: solid;
    border-width: 0.2em;
    border-radius: 4em;
    border-color:#121255;
    padding: 0.5em;
}

.logo img {
    display: block;
    box-sizing:border-box;
}

/*menu hamburguesa*/

.menulist li {
    font-family: 'Fira Sans Condensed', 'sans-serif';
    font-weight: 400;
    font-size: 1em;
}

.abrirmenu {
    font-size: 2em;
    color:#fa0c47;
    background-color: transparent;}

.cerrarmenu {
    background-color:transparent;
}

.cerrarmenu i{
    font-size: 2em;
    display: block;
    border:0;
    background-color: transparent;
    color: #fcda46;
    text-align: end;
    padding-top: 1em;
    padding-right: 1em;
}

.menulist li a i {
    font-size: 1.3em;
    font-weight: 400;
    color: #fcda46;
}


.menu {
    opacity: 0;
    visibility: hidden;
    display: flex;
    flex-direction: column;
    gap: 1em;
    position:fixed;
    top:0;
    right:0;
    bottom: 0;
    background-color: #fa0c47;
    padding-right: 1em;
    z-index: 1;
    height:auto;
    width: 100%;


}

.menulist {
    margin-top: 10em;
    flex-direction: column;
    padding:0em 2.5em;

}
.menulist li { 
    padding-bottom: 0.5em;
    font-size: 1.3em;
    padding: 0.5em;
    border-bottom: solid 0.15em #68000027;
}

.menu li a {
    color:#ffffff;
    font-weight: 400;
}

.visible {
    opacity: 1;
    visibility: visible;
  }

/*MAIN*/

main {
    max-width: 90%;
    margin-inline: auto;
    border-bottom-style: solid;
    border-bottom-color: #fa0c47;
    border-bottom-width: 0.15em;
    padding-bottom: 1em;
}


/*portada*/

.portada {
    box-sizing: border-box;
    background-image: url(../imagenes/portada.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size:cover;
    padding: 1.2em;
    height: 20em;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

h1 {
    font-family: 'Fira Sans Condensed', sans-serif;
    text-transform: uppercase;
    padding: 0.5em 0;
    color: #ff7300;
    font-size: 2.3em;
    font-weight: 700;
    text-shadow: 0.1em 0.1em 0.3em #0000001f;
}

.portada p {
    color: #121255;
    font-weight: 400;
    font-size: 1em;
}

.portada p span {
    font-weight: 700;
    color: #ff7300;
}

.portada p a { 
    margin-top: 0.5em;
    padding: 0em 0.2em;
    text-align: right;
    color: #f7f7f7;
    background-color: #0cabdb;

    }

/*HOME*/

/*mapa*/

.mapa {
    position: relative;
    height: 35em;
    }
    
    .mapa img {
        max-width: 100%;
        position: absolute;
    }
    
    .mapa a {
        font-family:'Fira Sans Condensed', sans-serif;
        font-weight: 700;
        text-transform: uppercase;
        text-decoration: none;
        color:#121255;
        position: absolute;
        font-size: 1em;
        text-shadow: 0.1em 0.1em 0.1em #12125521;
        }

    .mapa a i {font-size: 1.4em;
        background-color: transparent;
        color:#fa0c47
        }

    .ubicacion {
        color: #061de9;
        margin-right: 0.2em;
    }

    #punto1 {
        top: 7.5em;
        right: 1em
    }

    #punto2 {
        top:5.7em;
        right:0em;
    }

    #punto3 {
        top:9.5em;
        right:1em;
    
    }

    #punto4 {
        top:22em;
        right:5.5em;
    
    }

    
    /* Estilos del slider */

#slider {
    margin-top: 0em;
    margin-bottom: 1em;
}

.slider {
    position: relative;
    overflow: hidden;
    margin-top: 2em;
  }
  
  .slide {
    display: none;
  }
  
  .slide:first-child {
    display: block;
  }
  
  .slide img {
    width: 100%;
    height: auto;
  }

  .slide {
    width: 80%;
    height: auto;
  }
  
  .slider-controls {
    text-align: center;
  }
  
  .prev-btn,
  .next-btn {
    font-size: 2em;
    background-color: transparent;
    color: #ff7300;
    border: none;
    cursor: pointer;
  }
  
  /* Dudoso del slider */

  
  .slider {
    display: flex;
    overflow: hidden;
    z-index: 1
  }
  
  .slide {
    flex-shrink: 0;
    width: 100%;
    transition: transform 0.8s ease;
  }
  
  .slider img {
    width: 100%;
    height: auto;
    margin-right: 10px; 
  }

  #empezar {
    margin: 2em 0em;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center
  }

  #empezar a {
    background-color:#fcda46;
    padding: 0.3em 0.5em;
    color:#121255;
    font-weight: 700;

  }


    /*laboca*/

    #boca {
        background-color: #f7f7f7;
    }    
      
      
     #bondis {display: grid;
        grid-template-rows: auto auto;
        justify-content:left;
        color: #050505; 
        max-block-size: 100%;}
    
    #boca h3 { 
        text-transform: uppercase;
        color:#00b81c;
    }

    #boca p i {
        color: #00b81c;
        font-size: 1.3em;
    }
        
      
    #bondis ul {display: grid; 
        grid-template-columns: auto auto auto auto;
        color: #050505; 
    }
    
    
     #bondis li {display:block;
        text-align: center;
        margin-bottom: 0.5em;
        padding: 0.2em; 
        margin-right: 0.5em;
    }
      
    #bondis li p {
        font-weight: bold;
        font-size: 0.5em;
      }
    
    .colectivos {
        display: flex;
        text-align: center;
    }
    
    #ocho {
        background-color: #3681f1;
        color: #ffff;
    }
    
    #veintinueve{
        background-color: #103cb6;
        color: #ffff;
    }
    
    #treintaytres{
        background-color: #077752;
        color: #ffff;
    }
    
    #cincuentaytres{
        background-color: #1e47b9;
        color: #ffff;
    }
    
    #sesentaycuatro{
        background-color: #012588;
        color: #ffff;
    
    }
    
    #ochentayseis {
        background-color: #2568ce;
        color: #ffff;
    
    }
    
    #cientocincuentaydos {
        background-color: #1b4fdd;
        color: #ffff;
    
    }


/*CAMINITO*/

.caminito {
    color: #00b81c;
}

h4 i {
font-size: 1.3em;
}

.iconos {
    color: #ff7300;
    font-size: 2em;
    padding-top: 0.5em;
    padding-bottom: 0%;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.iconos i {
    padding-right: 0.3em;
}

/*audio*/

audio {
    width: 20em;
    margin-bottom: 1em;
    border: 0.1em solid #000000;
    border-radius: 0.3em;
    box-shadow: 0 2em 4em rgba(0, 0, 0, 0.1);

    
  }
  .container-audio {
    display: flex;
    justify-content: center;
  }

/*arte popular GRID*/


.feria {
   
    display:grid;
    justify-content: space-between;
    grid-template-columns: auto auto auto auto;
     
}


.tango {
    padding-left: 4em;
    padding-right: 2em;
    margin-top: 2em;
    margin-bottom: 2em;
    margin-right: 2em;
    
    
}

.colores {
    padding-left: 1em;
    padding-right: 1em;
    margin-top: 2em;
    margin-bottom: 2em;
   
}

.sinuoso {
    padding-left: 1em;
    padding-right: 1em;
    margin-top: 2em;
    margin-bottom: 2em;    
    
    
    
}


/*caminito*/

.audio {
    display: block;
    margin-bottom: 1.5em;
    text-transform: uppercase;
}


/*arte popular FLEX*/

.feria {
    
    background-image: url(../imagenes/chapaamarilla.jpg);
    background-repeat: repeat-y;
    background-size: 100%;
    padding-top: 2em;
    padding-bottom: 2em;
    display:flex;
    flex-wrap: wrap;
    padding-left: 1em;
    padding-right: 1em;
    margin-left: 0em;
    max-width: 100%;
    
}

.artistas {
    
    background-color: #ffffffb2;
    padding-left: 1em;
    padding-right: 1em;
    margin-top: 2em;
    margin-bottom: 2em;
    
}

.tango {
    background-color: #ffffffb2;
    padding-left: 1em;
    padding-right: 1em;
    margin-right: 0em;
    
}

.colores {
    background-color: #ffffffb2;
    padding-left: 1em;
    padding-right: 2em;
    margin-right: 0em;
    margin-bottom: 2em;
}

.sinuoso {
    background-color: #ffffffb2;
    padding-left: 1em;
    padding-right: 1em;
    
    
}


/*caminito*/

.audio {
    display: block;
    margin-bottom: 1.5em;
    text-transform: uppercase;
}

p {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}


/*botones*/

.botonera {
    color: #121255;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 2em;
    margin-bottom: 1em;
    padding: 0.2em;
    text-decoration: none;
}

.botonera a {
    display: flex;
    align-items: center;
} 

.botonera i {
    color:#00b81c;
    font-size: 1em;
}

.botones{
    color: #121255;
    padding: 0.5em;
    text-decoration: none;
}

/*botones fijos*/

.botonfijo {
    background-color:#fcda46;
    display: inline-block;
    padding: 0.5em;
    color:#121255;
    text-decoration: none;
    font-weight: 700;
}

/*PROA*/

.proa {
    color: #fa0c47;
    margin-top: 0.5em;
}

#actividades {
    display: grid;
    grid-template-columns: auto;
    gap:1em;
    margin:1em 0em}
  
  .acts {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1em;
    margin-bottom: 0.5em;
    text-align: left;
    color:#f7f7f7 ;
    box-shadow: 0.3em 0.3em 0.3em rgba(0, 0, 0, 0.185);
  }

  .acts h3 {
    font-family: 'Fira Sans Condensed', sans-serif;;
    text-transform: uppercase;
    font-size: 1.5em;
  }

  .acts h5 {
    font-family: 'Fira Sans Condensed', sans-serif;;
    font-size: 1em;
    text-transform: uppercase;
    font-weight: 400;
    padding: 0.5em 0em;
  }

  .acts p {
    line-height: 1.4em;
  }

  .acts a {
    text-align: right;
    padding-top:1em ;
    color: #f7f7f7 ;
    text-decoration:underline;
    font-weight: 700;
  }

  #uno {
    background-color: #1408c4;
  }

  #dos {
    background-color:#00b81c;
  }

  #tres {
    background-color:#fa0c47;
  }

  #cuatro {
    background-color:#f09e06;
  }

  .video-container {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  iframe {
    width: 80%;
    height: auto;
  }


  .exposiciones p {
    margin-bottom: 1em;
  }

  .expo {
    font-weight: 700;
  }

  .video-container {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  iframe {
    width: 90%;
    aspect-ratio: 16/9;
  }

/*puente*/

/*puente*/

.ficha-tecnica {
    background-color: #f2f2f2;
    padding: 20px;
    border-radius: 4px;
  }
  
  .ficha-tecnica h2 {
    color: #333;
    font-size: 24px;
    margin-bottom: 20px;
  }
  
  ul {
    list-style-type: none;
    padding: 0;
  }
  
  li {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }
  
  .etiqueta {
    color: #555;
    font-weight: bold;
    flex: 1;
  }
  
  .valor {
    color: #777;
  }
  
  .ficha-separador {
    display: inline-block;
    width: 25%;
    height: 3px;
    background-color: black;
    margin: 10px 0;
  }
  
  .ficha-separador-dato {
    display: inline-block;
    width: 30%;
    height: 3px;
    background-color: #ccc;
    margin: 0 10px;
  }


#historia {
    display: block;
    text-transform: uppercase;
    text-decoration: none;
    justify-content: center;
    text-align: center;
    margin: 1em;
    font-size: 1.5em;
    color: #27A5A9;

}

#arte {
    display: block;
    text-transform: uppercase;
    text-decoration: none;
    justify-content: center;
    text-align: center;
    margin: 1em;
    font-size: 1.5em;
    color: #27A5A9;

}

/*GALERIA PUENTE*/
.galeria { 
    display:grid; 
    grid-template-columns: auto auto;
  }

  .galeria div {margin: 0.3em;
}
  
  .galeria img {
    width: 100%;
    max-width: 100%;
  }

.galeria div {
  position: relative;
  margin: 0.2em;}

.galeria figcaption {
background-color:#121255ad;
font-family: 'Fira Sans Condensed', sans-serif;
  padding: 0.5em;
  color: white;
  line-height: 1em;
  text-transform: uppercase;
  font-weight: 700;
  position: absolute;
  inset: 0;
  font-size: 1em;
  height: max-content;
  top:auto
  
}

.galeria figcaption span{
    font-family: 'Mukta', sans-serif;
}


.galeria figcaption span{
    font-weight: 500;
    display: block;
    margin-block-start: 0.5em;
    text-transform: none;
}

.puente {
    color:#ff7300
}

/*vuelta de rocha*/

.vuelta {
    color: #000d83;
}

.galeriausuarios {
    margin-top: 1em;
    columns: 4 10em;
    column-gap: 0.7em;
}

.galeriausuarios div {
        display: block;
        width: 100%;
        max-width: 100%;
        margin-bottom: 0.5em;
        page-break-inside: avoid;
        box-shadow: 0.2em 0.2em 0.2em #55555541;
    }

.galeriausuarios p {
    margin-top: 0.2em;
    font-size: 0.9em;
    font-weight: 700;
    margin-bottom: 0%;
    color: #012588;
}

.galeriausuarios p span {
    margin-top: 0.2em;
    font-size: 0.9em;
    font-weight: 400;
    margin-bottom: 0%;
    color: #05050563;
}

.galeriausuarios img {
    display: block;
    width: 100%;
    max-width: 100%;
    
}
  
#link-form {
    margin-top: 2em;
    background-color: #00b81c;
    padding: 0.5em;
    text-decoration: none;
    font-family:'Fira Sans Condensed', sans-serif; ;
    font-weight: 400;
    color:#ffffff;
    font-size: 1em;
    text-align: center;
}

#link-form a {
    text-decoration: none;
    color: #012588;
    text-transform: uppercase;
    font-weight: 700;
}

/*formulario */

.formulario {
    color: #00b81c;;
}

#formulariobody {
    display: flex;
    justify-content: center;
}

#formulario {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1em;
    border-style: solid;
    border-color: #00b81c;
    background-color: #00b81c27;
    color:#050505;
    border-width: 0.3em;
    margin: 10em 4em;
    text-align: center;
    max-width: 20em;
    width: 20em;
    box-shadow: 0.5em 0.5em 0.5em #00b81c31;
}

#formulario h1 {
    margin: 0;
    margin-top: 1em;
}

#formulario p {
    margin-bottom: 1em;
}

form {
    display: grid;
    gap: 1em;
    text-align: left;
    max-width: 100%;
    width: 100%
  }

input {
    padding: 0.5em;
    max-width: 100%;
    width: 100%;
}
  
input[type="submit"] {
    background-color: #00b81c;
    padding: 0.3em;
    text-decoration: none;
    font-family:'Fira Sans Condensed', sans-serif; ;
    font-weight: 400;
    color:#ffffff;
    font-size: 1em;
}

/*mensaje de enviado*/

#mensaje {
    display: flex;
    justify-content: center;

}
#enviado {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1em;
    border-style: solid;
    border-color: #00b81c;
    background-color: #00b81c27;
    color:#050505;
    border-width: 0.3em;
    margin: 10em 4em;
    text-align: center;
    max-width: 20em;
    width: 20em;
    box-shadow: 0.5em 0.5em 0.5em #00b81c31;
}

#enviado i {
    color:  #00b81c;
    font-size: 3em;
}

#enviado h1 {
    margin:0;
}

#enviado p {
    font-size: 1em;
}

#enviado p a {
    text-decoration: none;
    text-transform: uppercase;
    font-family:'Fira Sans Condensed', sans-serif; ;
    font-weight: 700;
    color: #00b81c;
}

.botones-nav {
    display: flex;
    justify-content: space-between;
    margin: 0.5em;
    gap: 0.5em;
    margin-top: 3em;
}
  
  .botones-nav a {
    background-color:#00b81c;
    padding: 0.4em;
    text-decoration: none;
    font-family:'Fira Sans Condensed', sans-serif; ;
    font-weight: 400;
    color:#ffffff;
    font-size: 1em;


    
  }


    /*FOOTER*/
    
    footer  {
        padding:1em ;
        
        }
        
        footer div {
            display:flex;
            align-items: center;
            justify-content: space-between;
            margin-left: 3em;
            margin-right: 3em;
        }
        
        .logos {
                max-width: 10em; 
                width: 5em;
              }
              
        .logos a img {
                max-width: 100%
              }
        
        footer p {
            font-size: x-small;
            margin: 1em;
        }
        
        .botonesfooter {
            background-color: #32beff93;
            display: flex;
            margin-top: 1em;
            margin-bottom: 1em;
            padding: 0.5em;
            text-align: center;
            text-decoration: none;
            color: rgb(255, 255, 255);
            font-size: small;
        }

/*responsive*/

@media screen and (min-width: 768px) {

    body {
        font-size: 1em;
    }

    #actividades {
        display: grid;
        grid-template-columns: auto auto;
        gap:1em;
        margin:1em 0em}

    footer div {
        max-width: 80%;
        padding-left: 20%;
        }

    .galeria {
      grid-template-columns: auto;
    }

    .mapa {
        position: relative;
        height: 60em;
        }
        
        .mapa img {
            max-width: 100%;
            position: absolute;
        }
    
    #punto1 {
        font-size: 1.5em;
        top: 9em;
        right: 5em
    }

    #punto2 {
        font-size: 1.5em;
        top:6.5em;
        right:5em;
    }

    #punto3 {
        font-size: 1.5em;
        top:11em;
        right:6.5em;
    }

    #punto4 {
        font-size: 1.5em;
        top:24em;
        right:13em;
    }
}

@media (min-width: 992px) {

    body {
        max-width: 80%;
        margin-inline: auto;
    }

    .contenedora {
        padding: 0;
        margin-inline: auto;
        display: flex;
        align-items:baseline;
        justify-content: space-between;
    }

    .logo {
        cursor: pointer
    }

    .menu {
        display: block;
        background-color:#f7f7f7;
        position:relative;
        padding: 0em;
        opacity: 1;
        visibility: visible;
        cursor: pointer;
    }

    .cerrarmenu {
        display: none;
    }
      
    .abrirmenu {
        display:none
    }

    .menulist{
        display: flex;
        flex-direction: row;
        border-color:#fa0c47; 
        justify-content: end;
      }
      
    .menulist li {
        border-right-style: solid;
        border-right-width: 0.15em;
        border-color: #fa0c47;
        border-bottom-width: 0;
        padding: 0em 0.5em;}
    
        .menu li a {
            color:#121255;
        }

/* mapa */   
.mapa {
    margin-top: 1.3em;
    position: relative;
    height: 30em;
}

.mapa img {
    max-width: 100%;
    position: absolute;


}

.mapa a {
    font-family:'Fira Sans Condensed', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    color:#121255;
    position: absolute;
    text-shadow: 0.1em 0.1em 0.1em #12125538;
    }

.mapa a i {font-size: 1em;
    background-color: transparent;
    }

#punto1 {
    font-size: 1.2em;
    top: 6em;
    right: 23em
}

#punto2 {
    font-size: 1.2em;
    top:9em;
    right:21em;
}

#punto3 {
    font-size: 1.2em;
    top:11em;
    right:16em;

}

#punto4 {
    font-size: 1.2em;
    top:19em;
    right:3em;

}



/*CAMINITO PARA ESCRITORIO*/

.feria {
    
background-image: url(../imagenes/chapaamarilla.jpg);
background-repeat: repeat-x;
background-size: auto;
display:grid;
justify-content: space-between;
grid-template-columns: auto auto;

}
.colores {
background-color: #ffffffb2;
padding-left: 1em;
padding-right: 2em;
margin-right: 0em;
margin-bottom: 2em;
margin-right: 2em;
}

.tango {
background-color: #ffffffb2;
padding-left: 1em;
padding-right: 1em;
margin-right: 0em;
margin-right: 2em;

}

audio {
margin-left: 0em;
width: 30em;
margin-bottom: 1em;
border: 0.1em solid #000000;
border-radius: 0.3em;
box-shadow: 0 2em 4em rgba(0, 0, 0, 0.1);
}
}

@media (min-width: 1400px) {

/* mapa */   
.mapa {
    margin-top: 1.3em;
    position: relative;
    height: 45em;
}

.mapa img {
    max-width: 100%;
    position: absolute;


}

.mapa a {
    font-family:'Fira Sans Condensed', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    color:#121255;
    position: absolute;
    text-shadow: 0.1em 0.1em 0.1em #12125538;
    }

.mapa a i {font-size: 1em;
    background-color: transparent;
    }

#punto1 {
    font-size: 1.3em;
    top: 8em;
    right: 33em
}

#punto2 {
    font-size: 1.3em;
    top:12em;
    right:32em;
}

#punto3 {
    font-size: 1.3em;
    top:15em;
    right:25em;

}

#punto4 {
    font-size: 1.3em;
    top:25em;
    right:7em;

}
}


/* Responsive para historia */

@media (max-width: 480px) {
.galeria {
  grid-template-columns: 1fr;
}
}
@media (min-width: 481px) and (max-width: 768px) {
.galeria {
  grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 769px) and (max-width: 1024px) {
.galeria {
  grid-template-columns: repeat(3, 1fr);
}
}
@media (min-width: 1025px) {
.galeria {
  grid-template-columns: repeat(3, 1fr);
}
}