/*general */
 
/*tipografia*/
  @import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');

  @import url('https://fonts.googleapis.com/css2?family=Righteous&display=swap');

h1{
    font-family: "righteous", cursive;
    font-size: xx-large;
    margin-top: 1rem;
    margin-left: 1rem;
  }
h2{
    font-family: "lato", sans-serif;
    font-weight: 900;
}
.siam h4{font-family: "lato", sans-serif;
    font-style: italic;
    font-size: small;
    font-weight: 400;
text-align: center;
}
li{
    font-family: "lato",sans-serif;
    font-weight: 400;
    font-size: small;
}
footer{
    font-family: "lato", sans-serif;
    font-weight: 400;
    font-size: xx-small;
}
.texto h2{
    font-family: "lato", sans-serif;
    font-weight: 700;
    font-size: small;
}
.texto{
    font-family: "righteous";
    font-size: small;
}
figcaption{
    font-family: "lato", sans-serif;
    font-size: small;
    font-weight: 700;
}
samp{
    font-family: "lato", sans-serif;
    font-size: .75em;
    font-weight:400;
font-style: italic;
    color: blanchedalmond;
    margin-block-start: 0.5em;
    text-transform: none;
    text-align: left;
}
label{
    font-family: "lato", sans-serif;
    font-size: small;
    font-weight: 600;
}
button{
    font-family: "lato", sans-serif;
    font-size: small;
    font-weight: 400;
}
/*tipografia*/

* { 
    box-sizing:border-box;
    margin: 0;
    padding: 0;
    
}
html { box-sizing: border-box;}
body {background-color: #F0E0BA;
    margin: 0;
    display: grid;
    grid-template-rows: auto 1fr;
    margin-right: 0%;
    min-height: 100dvh;
}

a{
    text-decoration: none;
    list-style: none;
    color: #000000dd;
}
a:hover{
    color: #f5eeee;
}
 .texto a:hover{
    color: #f9f4f4;
}
img{
    max-width: 100%;
    overflow-clip-margin: content-box;
    overflow: clip;
}
header{background-color: hsl(137, 34%, 73%);
    height: 100%;
    box-shadow:0
    4px
    4px 
#8c8c8d;
position: sticky;
top: 0;
z-index: 8000;}

header h1 {
    color: #bc1c1c;
    text-transform: capitalize;
   text-align: center;
} 
.contenedora{
        max-width: 100%;
        margin-inline: 1rem;
        padding: .5rem;
        align-content: center;
}

 h1{
    text-align: center;
}
.menu-btn{
    background: #7990a6;
    border-radius: 50%;
    box-shadow: -5px 5px 5px hsla(180, 100%, 4%, 0.061);
    padding: 0.75rem;
    width: 3rem;
    aspect-ratio: 1;
    transition: all 0.3s ease-out;
    position: fixed;
    top: 1.5em;
    right: 2em;
    z-index: 9000;
}
.menu-btn .linea-btn{
    width: 25px;
    height: 2px;
    margin: 3px 0 5px 0;
    background: #BC1C1C;
    transition: all 0.3s ease-out;
    position: relative;
    z-index: 9000;
}
footer { background-color:#A3D2B0;
    padding: .5rem;}

    /* inicio*/
.menuVisible button { 
    background: #A3D2B0;
}
.menuVisible ul {
    background-color: #7990a6;
    transition: all 0.5s ease;
    translate: 0;
 }
 .menuVisible ul li {
    border-bottom: #BC1C1C solid 3px;
    margin: 1rem;
    padding: 0.5rem;
    font-size: large;
 }
 header nav ul {
    background-color: #7990a6;
    display: grid;
    place-content: center;
    position: fixed;
    inset: 0;
    z-index: 8000;
    translate: 100%;
    transition: all .6s ease;
}
.menuVisible .menu-btn .linea-btn:nth-child(3) {
    transform: rotate(-45deg) translate(4px, -6px);
}
.menuVisible .menu-btn .linea-btn:nth-child(1) {
    transform: rotate(45deg) translate(4px, 6px);
}
.menuVisible .menu-btn .linea-btn:nth-child(2) {
    opacity: 0;
}
.titulo { color: #7990a6;
border-bottom:2px solid #BC1C1C;
font-size: x-large;
padding: 0.5rem;
margin-bottom: .5rem;
text-align: left;}

.publicidades{ 
    width: 300px
}
.hogar img{
    width: 350px;
}
.hogar {
    margin-inline:auto ;
    width: 350px;
    position: relative;
    overflow: hidden;
}
.hogar figcaption{
background-color: #7990A6;
color: #A3D2B0;
padding: .5rem;
text-transform: uppercase;
font-weight: 700;
position: absolute;
inset: 0;
transition: all .6s ease;
translate: 0 calc(100% - 2em);
}
.hogar:hover figcaption{ 
    background-color: #060606ea;
    transition: all .3s ease;
    translate: 0;
    display: grid;
    text-align: center;
    place-content: center;
    place-items: center;
    padding-inline: 2rem;
}
.hogar figcaption samp{
    display: block;
    font-size: .75em;
    color: #ddd;
    margin-block-start: 0.5em;
    text-transform: none;
    text-align: left;
}
.fabrica{ 
    width:300px;
    background-color: #7990A6;
    border-radius: 20px;
}
.siam_articulo{
    text-align: left;
    font-size: large;
    font-family: "lato", sans-serif;
    color: #3a5369;
    padding: 1rem;
    border-bottom: #7990a6 solid 2px;
}

.contenedor-siam {
    background-color: #a3d2b0;
    width: 90%;
    border-radius: 20px;
    margin-inline: auto;
}
.contenedor-siam {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    padding: 3rem 0;
    display: grid;
    align-items: center; 
    gap: 1rem;
}
.contenedor-siam p{
    font-family: "lato", sans-serif;
    font-size: .8rem;
    font-weight: 500;
    padding-top: 1rem;
}
.contenedor-fechas{
    font-family: "lato", sans-serif;
    grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    padding: 0.5rem 0;
    display: grid;
    align-items: center; 
    gap: 1rem;
}
.contenedor-fechas h4{
    font-size:large;
    color: #3a5369;
}
.contenedor-fechas h5 {
    color: #BC1C1C;
    font-style: italic;
}


.publicidades{ 
    margin-inline: auto;
    margin-top: 1rem;
    position: relative;
    overflow: hidden;
    background: url(../imagenes/Recurso\ 3.png) no-repeat center center;
}
.publicidades:hover figcaption { 
    background-color: #060606ea;
    transition: all .3s ease;
    translate: 0;
    display: grid;
    text-align: center;
    place-content: center;
    place-items: center;
    padding-inline: 2rem;
}
.publicidades  figcaption{
    background-color: #7990A6;
    color: #A3D2B0;
    padding: .5rem;
    text-transform: uppercase;
    font-weight: 700;
    position: absolute;
    inset: 0;
    transition: all .6s ease;
    translate: 0 calc(100% - 2em);
    }
.publicidades figcaption samp{
    display: block;
    font-size: .75em;
    color: #ddd;
    margin-block-start: 0.5em;
    text-transform: none;
    text-align: left;
}

nav ul .botones {width: 10px;
     height:10px;
    }
.botones li { background-color: #A3D2B0;
    border-radius: 50px;
    box-shadow:3px 3px 0px 0px #7990A6;
padding: .5rem;}
.botones{ display: flex;  
    gap: 1rem; 
    align-content: center;}
    ul { list-style: none;
        padding: 2rem;
        margin-inline-start: 0px;
        margin-inline-end: 0px;}

.acumar{
    text-align: left;
    font-size: large;
    font-family: "lato", sans-serif;
    color: #3a5369;
    margin-bottom: 1.5rem;
}
.contenedor-acumar {
background-color:#7990a68c;
padding: 1rem;
 margin-inline: auto;
 margin: 1rem;
 border: #3a5369 solid 2px;
}
.contenedor-info h4{
    font-family: "lato", sans-serif;
    color:#BC1C1C;
    font-weight: 600;
    font-size: medium;
    border-bottom: #BC1C1C solid 2px;
}
.contenedor-acumar p{
    font-family: "lato", sans-serif;
    font-size: small;
    font-weight: 400;
    font-style: italic;
    margin-bottom: 1rem;
    margin-top: 1rem;

}



/*galeria-siam*/

.contenedor-siamimg {
    max-width: 100%;
    margin-inline: auto;
    margin-top: 15px;
    margin-bottom: 20px;
    width: auto;
    display: flex;
}
.row {
    display: flex;
    padding: 5px;
    flex-wrap: wrap;
}
.colums {
    flex: 50%;
    padding: 5px;
}
.colums img {
    margin-top: 5px;
    width: 300px;
    height: auto;
}

.contenedor-siamvideos {
    max-width: 100%;
    margin: auto;
    padding: 10px;
    margin-top: 15px;
    margin-bottom: 10px;
    font-size: x-large;
    flex-wrap: wrap;
    place-content: center;
}
.columnas-videoyt {
    margin: auto;
    flex: 50%;
    margin-top: 15px;
    margin-bottom: 10px;
    place-content: center;
}

.contenedora-videos {
    max-width: 100%;
    align-items: center;
    align-content: center;
    margin-inline: auto;
    place-content: center;
}

.columnas-videonl {
    margin: auto;
    margin-top: 5px;
    margin-bottom: 5px;
    flex: 50%;
    place-content: center;
    place-content: center;
}
.siam h2{
text-align: center;
color: #7990A6;
}

/*quienes somos*/
.contenedor-siam {
    max-width: 100%;
    margin: auto;
    padding: 25px;
    margin-top: 15px;
    margin-bottom: 15px;
    align-items: center;
}
.contenedor-galeria {
    max-width: 100%;
    margin: auto;
    padding: 25px;
    margin-top: 15px;
    margin-bottom: 15px;
    align-items: center;
  }

.contenedor-siam h1{
    text-align: left;
    color: #3a5369;
}

.imagen-siam img {
    border-radius: 1.5rem;
    width: 450px;
}
.contenedor-siam {
    max-width: 65rem;
    margin: auto;
    padding: 25px;
    margin-top: 15px;
    margin-bottom: 15px;
        align-items: center;
}
.contenedora-sobresiam {
    max-width: 100%;
    margin: auto;
    padding: 25px;
    margin-top: 15px;
    margin-bottom: 15px;
    align-items: center;
}

.contenedora-sobresiam h1 {
color: #BC1C1C;
}
.mini-galeria{
    padding: 10px;
    width: 100%;
    background-color: #7990A6;
    margin-inline: auto;
    margin-top: 20px;
    margin-bottom: 1px;
}


.funciones {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
    padding: 10px;
    gap: 2rem;
}

.funciones-texto{
    background-color: #a3d2b0d2;
    padding: 2rem;
    margin: 1rem;
    border-radius: 1rem;
    border-left: #0d461dd2 2px solid;
    border-right: #0d461dd2 2px solid;
    box-shadow: #334e3ad2 0 .25em .5em;
}

.contenedor-galeria {
    max-width: 65rem;
    margin: auto;
    padding: 25px;
    margin-top: 15px;
    margin-bottom: 15px;
    align-items: center;
  }
.contenedor-galeria h2{
    font-size: xx-large;
    color: #3a5369;
}
/*siam*/
.siam-titulo{
    color:#7990A6;
    border-bottom: 2px solid #7990A6;
    margin-top: 2rem;
}
.siam-p{margin-top: 1rem;
    font-family: "lato", sans-serif;
    font-size: small;
    font-weight: 500;
}
.resalta{
    font-size: .8rem;
    font-style: italic;
    font-weight: 700;
}
.fundador {
    margin-top: 1rem;
    background-color: #7990A6;
    padding: 1rem;
}
.italica{
    margin-top: 1rem;
    font-style: italic;
    font-family:"lato", sans-serif;
    font-size: small;
    font-weight: 600;
    background-color: #a3d2b0;
    padding: 1rem;
    border-radius: 20px;

}
.subtitulo{
    font-size: larger;
    font-family: "lato", sans-serif;
    font-weight: 400;
}
.subtitulo-p{
    font-size: larger;
    font-family: "lato", sans-serif;
    font-weight: 600;
    color: #7990A6;
    border-bottom:2px solid #7990A6 ;
    font-style: italic;
}
/* publicidad*/

.publi img{ width: 300px;
}
.publi{
    background-color:#7990A6;
  border-radius: 20px;
    padding: .5rem;
    margin-top: 1rem;
    margin-inline: auto;
}
.epoca{
    display: flex;
margin-inline: auto;
}
.epoca h2{
    font-size:xx-large;
    text-align: center;
}
.epoca h3{
    font-size: x-large;
    text-align: center;

}

.epoca .texto{
margin-top: .5rem;
border-bottom:2px solid #0e0d0d;
border-top: 2px solid #0d0d0d;
margin-bottom: .5rem;
}
/* decadas 40' 50' 60'*/
.decada{
    margin-inline:auto;
}
.decada img{
        width: 300px;
        margin-bottom: 1rem;
    }
.decada figcaption{
    background-color: #a3d2b0;
    max-width: 400px;
    margin-bottom: 2rem;
    padding: .5rem;
    border-radius: 20px 50px;
    margin-inline:auto ;
}
.decada figcaption samp{
    font-size: .75em;
    color:#000000;
    text-align: left;
}
label{
    color: #7990A6;
    font-size: small;

}
textarea{
    background-color: #a3d2b09b;
    width: 80%;
    border-radius: 10px;
    border:1px solid #7990A6;
}
button{
    background-color: #a3d2b0;
    border-radius: 20px;
    padding: .2rem;
    border:1px solid#7990a6
}
.resaltar {
    background-color: #7990A6;
    color: #ffff;
}
.decada ul {
    margin: 1rem;
}
  /*crea tu afiche*/
  .hora{
      border-bottom:2px solid #BC1C1C
  }
  .hora h2{
      color: #7990A6;
  }
  .parrafo p{
      margin-top: .5rem;
      background-color: #7990a6;
      padding: .5rem;
      border-left: 5px solid#BC1C1C;
      color: #ffff;
  }
  .parrafo samp{
      font-family: "lato", sans-serif;
      font-weight: 700;
      font-size: small;
      color: #ffff;
  
  }

    .afiche{
      display: flex;
      align-content: center;
      padding: 0;
      margin-top: 2rem;
      margin-left: 3rem;
    }
   .mesa{
    margin-bottom: 2rem;
   }
    .afiche li{
  background-color: #A3D2B0;
  padding: .2rem;
  border-radius: 5px 5px 0px 0px ;
  border:1px solid #BC1C1C;
}

  .mesa .chico {
    width: 340px;
    margin-inline: auto;
 
  }
.grande{
    display: none;
}
.mediano{
    display: none;
}
.mesa{
    display: flex;
}
.iconos
{
    border: #7990a6 solid 2px;
    padding-left: 1rem;
    padding-right: 1rem;
    background-color: #A3D2B0;
}
.iconos div{
    margin-bottom: 1.5rem;
    margin-top: 1rem;
    border-bottom:#7990a6 solid 2px;
    border-left:#7990a6 solid 2px;
 
}
.iconos span{
 margin-inline: auto;
 color: #7990A6;
 padding-left: .2rem;
 font-size: medium
}

  /*inicio y registro*/
 .formulario {
    width: 350px;
    height: 700px;
    padding: 2rem;
    background-color: #A3D2B0;
    border-radius: 10px;
    margin: auto;
    margin-bottom: 1rem;
    margin-top: 1rem;
 }
 .linea { 
    border-top: 2px solid #BC1C1C;
    margin: 1rem;
}
.inicioconredes button {
    border-radius: 0px;
    margin: auto;
    padding: 0.7rem;
    align-items: center;
    align-content: center;
    border:1px solid #BC1C1C;
    margin-inline: auto;
    text-align: center;
}
.texto-intro h4 {
    color:#BC1C1C;
    font-size: medium;
    text-align: center;
    padding: auto;
    margin: auto;
    margin-bottom: 0.5rem;
}
 .imput-contenedor{
    padding: 1rem;
    align-items: center;
    align-content: center;
    background-color: #95a7b9;
    width: 90%;
    border-radius: 20px;
    border:1px solid #3a5369;
    margin:auto;
    margin-top: 0.5rem;
    display: flex;
 }
 .imput-quienes {
    padding: 1rem;
    align-items: center;
    align-content: center;
    background-color: #A3D2B0;
    width: 80%;
    border-radius: 20px;
    border:1px solid #BC1C1C;
    margin:auto;
    margin-top: 0.5rem;
 }
 .imput-quienes h2 {
    color: #BC1C1C;
    text-align: center;
 }
 .imput-quienes p {
    margin: auto;
    padding: auto;
    margin-top: 1rem;
    font-family: "lato", sans-serif;
    font-weight: 400;
 }
 .checkbox { 
    margin: auto;
    padding: auto;
    margin-right: 0.5rem;
 }
 .bold { 
    font-weight: bolder;
 }
 .material-symbols-outlined {
    margin: auto;
    padding: auto;
    margin-right: 0.5rem;
 }
 .info {
    background-color: #c6e7d0;
 }
 .formulario button{
    color: #000000;
    background-color: #7990a6;
    padding: 0.5rem;
    margin: auto;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
 }
 .registro{
    font-size: medium;
    font-weight: bold;
    text-align: center;
    padding: auto;
    margin: auto;
    margin-bottom: 0.5rem;
 }
.formulario button:hover{
    color: #f5eeee;
}
.formulario h1 { 
    color: #BC1C1C;
}
.info-txt {
    width: 50%;
    margin-left: 3rem;
}
.info-txt p {
    font-size: 16px;
    margin-bottom: 1rem;
    
}

.contenedor-funciones h2{
    font-size: xx-large;
    color: #3a5369;
}


.contenedor-funciones {
    max-width: 1000px;
    margin: auto;
    width: 100%;
    padding: 25px;
    margin-top: 15px;
    margin-bottom: 15px;
}
.menu-mesa{
    gap: 3rem;
}
form span{
    color: #c6e7d0;

}



  /*@MEDIA*/
  
  @media screen and (min-width: 450px) 
    /*general*/
    {
    .menu-btn {
        display: none;
      }
    .siam{
        margin-bottom: 1rem;
    }
      /* menu visible */
      .menu .menuVisible{
        margin: 0;
        margin-top: 0;
      }
      header nav ul,
      header .menuVisible ul {
        display: flex;
        gap: 2rem;
        position: relative;
background-color:#a3d2b02a;
translate: 0;
      }
        
       header nav ul li {
        border-top: #BC1C1C solid 2px;
       padding-top: .5rem;

      }
    
      header nav ul li a {
        color:#000000;
    font-size: small;
        text-align: center;
      }
      ul{
        padding: 0rem;
      }

 .contenedor-siam {
        background-color: #a3d2b0;
        max-width: 100%;
        width: 450px;
        border-radius: 20px;
        margin-inline: auto;
        display: block;
        align-items: center;
    }

    .contenedor-galeria {
        max-width: 100%;
        margin: auto;
        width: 450px;
        display: block;
        padding: 25px;
        margin-top: 15px;
        margin-bottom: 15px;
        align-items: center;
      }
    .contenedor-funciones {
        display: block;
        max-width: 100%;
        width: 450px;
        grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
        padding: 20px;
        gap: 1rem;
        align-items: center;
    }
   
    .contenedora-imagenes{
        display: flex;
        max-width: 100%;
        margin-inline: 1rem;
        padding: .5rem;
        align-content: center;
        width: 450;
    }

    .contenedor-siamimg {
        margin: auto;
        padding: 20px;
        margin-top: 15px;
        margin-bottom: 20px;
        display: block;
        width: 450px;
        margin-inline: auto;
    }
    
    .contenedora-imagenes{
        display: flex;
        max-width: 80%;
        margin-inline: 1rem;
        padding: .5rem;
        align-content: center;
        width: 450px;
    }

.contenedor-siamvideos {
    max-width: 100%;
    margin: auto;
    width: 450px;
    padding: 20px;
    margin-top: 15px;
    margin-bottom: 20px;
    font-size: x-large;
}
.columnas-videoyt {
    max-width: 100%;
    margin: auto;
    width: 450px;
    padding: 30px;
    margin-top: 15px;
    margin-bottom: 20px;
    display: block;
    gap: 10px;
}

    /* inicio*/
    .botones li{
        margin-top: 1rem;
    }
    .publicidades{ 
        width: 300px
    }
    .hogar img{
        margin-top: 1rem;
        width: 700px
    }
    .hogar{
        width: 700px;
    }
    .hogar figcaption samp{
        display: block;
        font-size: 1em;
        color: #ddd;
        margin-block-start: 1em;
        text-transform: none;
        text-align: left;}
     .decadas{
        margin-inline: auto;
            display: grid;
            grid-template-columns: 45% 45%;
            align-items: center;
            gap: 1rem;
        }
        .botones{ 
            display: flex;  
            gap: 3rem; 
        }
        .botones li{
            margin-inline: auto;
        }
        nav ul .botones {width: 20px;
            height:20px;
           }
        .adaptado{
            display: flex;
            gap: 2rem;
            align-items: center;
        }
        .contenedor-fechas{
            font-family: "lato", sans-serif;
                grid-template-columns: repeat(auto-fit, minmax(min(1rem, 100%), 1fr));
                display: flex;
                align-items: center;
                justify-content: center;
                flex-wrap: wrap;
                padding: 0.5rem 0;
                display: grid;
                align-items: center; 
                gap: 1rem;
            }
        .fabrica {
            width: 350px;
        }

       .botones li { 
       padding: 1rem;}
       .contenedor-info {
        display: flex;
        align-items: baseline;
        flex-direction: row;
    }
    .contenedor-info h4{
        border-bottom: none;
    }
    .contenedor-acumar {
        width: 80%;
margin-inline: auto;
        }
    .contenedor-info .titulo-acumar {
        flex: 0 0 20%;
    }
    
    /*siam*/
.siam-titulo{
    color:#7990A6;
    border-bottom: 2px solid #7990A6;
    margin-top: 2rem;
}
.siam-p{
    width: 90%;
    margin-inline: auto;
}
.resalta{
    font-size: .8rem;
    font-style: italic;
    font-weight: 700;
}
.contenedora .fundador{
    margin-inline:auto ;
}
.mini-galeria{
    display: grid;
    grid-template-columns:  300px 300px;
    gap: 2rem;
    grid-template-rows: 230px;
max-width:100% ;

}

.fundador {
  max-width: 60%;
}
.subtitulo{  width: 50%;
}

    /*publicidades*/
.epocamayor{ display: grid;
    grid-template-columns: 50% 50%;
    gap:1rem;
    margin-inline: auto;
}
.publi img{
    width: 350px;
}
/*epoca 40, 50, 60*/
.decada{
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
}

.decada img{
    width: 400px;
    margin-bottom: 1rem;
    margin-inline:auto ;
}
.decada figcaption{
    background-color: #a3d2b0a7;
    width: 100%;
    margin-bottom: 1rem;
    padding: .5rem;
    border-radius: 20px 50px;
}
/*registro*/
.sesion {
    display: flex;
    background-image: url(../imagenes/caminar.png);
}
.formulario {
    padding: 2rem;
    width:40%;
    height: 600px;
    margin-inline: auto;
 margin-top: 6rem;
 margin-bottom: 3rem;
 border-radius: 20px ;
     }
.imput-quienes {
    padding: 2rem;
    width:40%;
    height: 300px;
    margin-inline: auto;
 margin-top: 6rem;
 margin-bottom: 3rem;
 border-radius: 20px ;

}
 .imput-contenedor{
        padding: 1rem;
        align-items: center;
        align-content: center;
        background-color: #95a7b9;
        width: 80%;
        border-radius: 20px;
        border:1px solid #3a5369;
        margin-bottom: .5rem;
     }
.formulario button{
        color: #000000;
        background-color:#95a7b9;
     }
.formulario button:hover{
        color: #f5eeee;
    }
.formulario h1 { 
        color: #BC1C1C;}

 /*crea tu afiche*/

 .parrafo p{
    margin-bottom: 1rem;
    }
    .chico{
        display: none;
    
    }
.afiche{
    margin-left: 10rem;
}
    .mediano{
        display: block;
        margin-inline: auto;
        width:500px;
    }
.mesa{
    margin-inline: auto;
    display: block;
}
.iconos{
    display: flex;
}
.iconos div {
 margin-inline: auto;
}.iconos span{
    font-size:x-large;
}
 /*quienes somos*/
    .contenedor-siam {
        background-color: #a3d2b0;
        max-width: 100%;
        width: 450px;
        border-radius: 20px;
        margin-inline: auto;
        display: block;
        align-items: center;
        
    }

    .contenedor-galeria {
        max-width: 100%;
        margin: auto;
        width: 450px;
        display: block;
        padding: 25px;
        margin-top: 15px;
        margin-bottom: 15px;
        align-items: center;
      }
    .contenedor-funciones {
        display: block;
        max-width: 100%;
        width: 450px;
        grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
        padding: 5px;
        gap: 1rem;
        align-items: center;
    }
    .columnas-img{
        flex: 50%;
    } 
    .mini-galeria {
        place-content: center;
    }
    .fundador img{
        place-content: center;
        align-items: center;
    }
    /*galeria-siam*/

.contenedor-siamimg {
    max-width: 100%;
    margin-inline: auto;
    margin-top: 15px;
    margin-bottom: 20px;
    width: auto;
    display: flex;
}
.row {
    display: flex;
    padding: 5px;
    flex-wrap: wrap;
}
.colums {
    flex: 50%;
    padding: 5px;
}
.colums img {
    margin-top: 5px;
    width: 300px;
    height: auto;
}

.contenedor-siamvideos {
    flex-wrap: wrap;
    display: flex;
}
.columnas-videoyt {
    display: flex;
    flex: 50%;
    flex-wrap: wrap;
    padding: 10px;
}

.contenedora-videos {
    display: flex;
}

.columnas-videonl {
    margin: auto;
    flex: 50%;
    display: flex;
    flex-wrap: wrap;
    padding: 10px;
}
}
 

@media screen and (min-width: 900px ) 
     /*general*/
     {
        .menu-btn {
            display: none;
          }
        
          /* menu visible */
          .menu .menuvisible{
            margin: 0;
            margin-top: 0;
          }
          header nav ul,
          header .menuVisible ul {
            display: flex;
            gap: 1rem;
            position: relative;
    background-color:#a3d2b02a;
    translate: 0;
          }
            
           header nav ul li {
            border-top: #BC1C1C solid 3px;
            padding: 1rem;
          }
        
          header nav ul li a {
            color:#000000;
        font-size: small;
            text-align: center;
            margin-inline:auto ;
          }
          ul{
            padding: 0rem;
          }
    .contenedor-siam {
        background-color: #a3d2b0;
        max-width: 100%;
        width: 900px;
        border-radius: 20px;
        margin-inline: auto;
        display: block;
        align-items: center;
    }

        .contenedor-funciones {
            display: block;
            max-width: 100%;
            width: 900px;
            grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
            padding: 10px;
            gap: 2rem;
            align-items: center;
        }


    .contenedor-galeria {
        max-width: 100%;
        margin: auto;
        width: 900px;
        display: block;
        padding: 25px;
        margin-top: 15px;
        margin-bottom: 15px;
        align-items: center;
      }

      .contenedor-siamimg {
        margin: auto;
        padding: 20px;
        margin-top: 15px;
        margin-bottom: 20px;
        display: block;
        width: 900px;
        margin-inline: auto;
    }
    
    .contenedora-imagenes{
        display: flex;
        max-width: 80%;
        margin-inline: 1rem;
        padding: .5rem;
        align-content: center;
        width: 900px;
    }

    .contenedor-siamvideos {
        max-width: 100%;
        margin: auto;
        width: 900px;
        padding: 20px;
        margin-top: 15px;
        margin-bottom: 20px;
        font-size: x-large;
    }
    .columnas-videoyt {
        max-width: 100%;
        margin: auto;
        width: 900px;
        padding: 30px;
        margin-top: 15px;
        margin-bottom: 20px;
        display: block;
        gap: 10px;
    }
    
    
    
    .columnas-videonl {
        max-width: 100%;
        margin: auto;
        width: 900px;
        padding: 30px;
        margin-top: 15px;
        margin-bottom: 20px;
        display: block;
        gap: 10px;
        height: 100 dvh;
    }

    /*inicio*/
    .botones li{
        margin-top: 1.5rem;
    }
    .publicidades img{ 
width: 500px;
    }
    .hogar img{
        margin-top: 1rem;
        width: 1000px;
    }
    .hogar{
        width: 900px;
    }
    .hogar figcaption{
        font-size: large;
    }
    .hogar figcaption samp{
        display: block;
        font-size: 1em;
        color: #ddd;
        padding: 0rem 3rem 3rem 3rem;
        margin-block-start: 1em;
        text-transform: none;
        text-align: left;}
        .contenedor-siam{
            margin-inline:auto;
        }
        .adaptado{
            display: flex;
            gap: 2rem;
            align-items: center;
        }
        .contenedor-fechas{
            font-family: "lato", sans-serif;
                grid-template-columns: repeat(auto-fit, minmax(min(1rem, 100%), 1fr));
                display: flex;
                align-items: center;
                justify-content: center;
                flex-wrap: wrap;
                padding: 0.5rem 0;
                display: grid;
                align-items: center; 
                gap: 1rem;
            }
        .fabrica {
            width: 500px;
        }
     .decadas{
            display: grid;
            grid-template-columns: 25% 25% 25% 25%;
            align-items: center;
            margin-inline: auto;
            gap: 1rem;
        }
        .botones{ display: flex;  
            align-content: center;}
            .botones li{
                margin-inline: auto;
                font-size: 1rem;
                font-weight: 400;    
            }
           .botones li { 
           padding: 2rem;}
            .contenedor-acumar{
                margin-inline: auto;
            }
            .contenedor-info {
                display: flex;
                align-items: baseline;
                flex-direction: row;
            
            }
            .contenedor-info .titulo-acumar {
                flex: 0 0 15%;
            }
            
/*quienes somos*/

.contenedora-siam{
    margin-inline: auto;
}
.imagen-siam img{
    width: 700px;
    margin-top: 2rem;
}
.contenedor-mesa {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    padding: 3rem 0;
    display: grid;
    align-items: center; 
    gap: 3rem;
    max-width: 65rem;
    margin: auto;
    padding: 25px;
    margin-top: 15px;
    margin-bottom: 15px;
}
.contenedor-mesa h2{
    color: #3a5369;
    font-size: xx-large;
    font-family: "lato";
    text-align: center;
}

.menu-mesa{ display:flex;
}

.menu-mesa li{
    margin-top: 0%;
    border-right: 2px solid#BC1C1C;
    border-top: 2px solid#BC1C1C;

    font-size: large;
}
.imagenes-lista img{
    width: 30%;
}
.contenedor-mesa h3{
    font-size: x-large;
    margin-bottom: 1rem;
}

.menu-mesa img{
    max-width: 100%;
}


    /*publicidades*/

    .epocamayor{ display: grid;
        grid-template-columns: 30% 30% 30%;
        gap: 2rem;
    }

    .publi img{
        width: 300px;
    }
    .formulario {
    background-color: #7990A6;
    width:30%;
    margin-inline: auto;
 margin-top: 6rem;
 border-radius: 40px ;
     }
     .imput-contenedor{
        padding: 1rem;
        align-items: center;
        align-content: center;
        background-color: #95a7b9;
        width: 80%;
        border-radius: 20px;
        border:1px solid #3a5369;
        margin-bottom: .5rem;
     }
     .formulario button{
        color: #000000;
        background-color:#95a7b9;
     }
    .formulario button:hover{
        color: #f5eeee;
    }
    .formulario h1 { 
        color: #BC1C1C;
    }
    /*40 50' 60'*/
    
    .decada img{
        width: 450px;
        margin-bottom: 1rem;
        margin-inline:auto ;
    }
    .decada figcaption{
        background-color: #a3d2b0a7;
        width: 100%;
        margin-bottom: 1rem;
        padding: .5rem;
        border-radius: 20px 50px;
    }
    
    /*registro*/
.sesion {
    display: flex;
    background-image: url(../imagenes/caminar.png);
    background-repeat: no-repeat;
    background-position: bottom left;
}
.formulario {
    padding: 2rem;
    width:40%;
    height: 600px;
    margin-inline: auto;
 margin-top: 6rem;
 margin-bottom: 3rem;
 border-radius: 20px ;
 background-color: #A3D2B0;
     }
.imput-quienes {
    padding: 2rem;
    width:40%;
    height: 300px;
    margin-inline: auto;
 margin-top: 6rem;
 margin-bottom: 3rem;
 border-radius: 20px ;

}

     .imput-contenedor{
        padding: 1rem;
        align-items: center;
        align-content: center;
        background-color: #95a7b9;
        width: 80%;
        border-radius: 20px;
        border:1px solid #3a5369;
        margin-bottom: .5rem;
     }
     .formulario button{
        color: #000000;
        background-color:#95a7b9;
     }
    .formulario button:hover{
        color: #f5eeee;
    }
    .formulario h1 { 
        color: #BC1C1C;}
 /*crea tu afiche*/
 .hora h2 {
    margin-top: 2rem;
 }
 .parrafo p{
    margin-top: 1rem;
    margin-bottom: 1rem;
    width: 80%;
    margin-inline:auto ;
    }
    .grande{
        display: block;
    width: 700px;
    margin-inline: auto;
   
    }
    .mediano{
        display: none;
    
    }
.afiche{
    margin-left: 20rem;
}
    .mesa{
        margin-bottom: 3rem;
    }
        /*siam*/
.siam-p{
    width: 90%;
    margin-inline: auto;
}
.resalta{
    font-size: .8rem;
    font-style: italic;
    font-weight: 700;
}
.mini-galeria{
    display: flex;
    gap: 0;
    margin-inline: auto;
    max-width: 80%;

}
.mini-galeria img{
    width: 200px;
    margin-inline: auto;

}
.fundador img {
width: 300px;
}
.fundador{
   max-width: 30%;
}
.todo p{
   max-width: 50%;
}
.todo{
    display: flex;
    gap: 1rem;
}
.contenedora .siam-p {
    max-width: 60%;
}
.contenedorac .siam-titulo{
    margin-inline: auto;
}
.italica{
    max-width: 60%;
    margin-inline: auto;
}

/*quienes somos*/
.contenedor-siam {
    background-color: #a3d2b0;
    max-width: 100%;
    width: 900px;
    border-radius: 20px;
    margin-inline: auto;
    display: block;
    align-items: center;
}

    .contenedor-funciones {
        display: block;
        max-width: 100%;
        width: 900px;
        grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
        padding: 10px;
        gap: 2rem;
        align-items: center;
    }
 /*galeria-siam*/

 .contenedor-siamimg {
    max-width: 100%;
    margin-inline: auto;
    margin-top: 15px;
    margin-bottom: 20px;
    width: auto;
    display: flex;
}
.row {
    display: flex;
    padding: 5px;
}
.colums {
    flex: 25%;
    padding: 5px;
}
.colums img {
    margin-top: 5px;
    width: 300px;
    height: auto;
}

.contenedor-siamvideos {
    flex-wrap: wrap;
    display: flex;
}
.columnas-videoyt {
    display: flex;
    flex: 25%;
    flex-wrap: wrap;
    padding: 10px;
}

.contenedora-videos {
    display: flex;
}

.columnas-videonl {
    margin: auto;
    flex: 25%;
    display: flex;
    flex-wrap: wrap;
    padding: 10px;
}
 }