@charset "uft-8" ;

/* ---reglas generales--- */

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

* {
    margin: 0;
    text-decoration: none;
    box-sizing: border-box;
    padding: 0 ;
    font-family: 'Montserrat', sans-serif;
}

img {
    max-width: 100% ;
}

header {
    display: flex ;
    justify-content: space-between ;
    align-items: center ;
    gap: 1em;
    background-color:#6f9b3c;
    position: sticky ;
    top: 0 ;
    z-index: 500 ;
}

a {
    color:white;
}

main{
    padding: 2.8em 0;
}
        
.mapa { width: 200px;}

h1 , h2 , h3 {
    color:rgb(7, 49, 61) ;
}

footer {
    display: block ;
    background-color: rgb(7, 49, 61) ;
    color: rgb(188, 240, 216) ;
    text-align: center;
    padding: 1em ;
}

ul {
    list-style: none ;
}

video {
    border-radius: 2em ;
}

/* ---reglas particulares--- */

.logoEcoSiam {
    width: 10em ;
}

.Usuario {
    width: 5em ;
}

/*--- Menu ---*/

@media (min-width: 30em) {

    .Usuario img {
        height: 3.5em;
    }

    #btn-menu:checked ~ .menu{
        margin: 0 ;  
    }
    
    header label:hover{
        cursor: pointer; 
        background: #324918;
    }
    
    #btn-menu{
        display: none;
    }

    .usumenu {
        display: grid ;
        grid-template-columns: 50% 50%;
        align-items: center ;
    }

    #btn-menu:checked ~ .menu{
        translate: -65% ;
        margin-top: 1em ;  
    }

    .menu {
        background-color: #6f9b3cbd;
        display: grid ;
        position: fixed ;
        translate: 100%;
        transition: all .6s ease;
        padding: 2em ;
        margin-top: 1em ;
        padding-bottom: 50em ;
    }

    .nav-item {
        padding: 1em ;
        font-size: 150% ;
    }

    .info {
        text-align: left ;
    }

}

/*--- Fin Menu ---*/


/* ---reglas x dispositivo--- */

/* cambios a partir de los 480px */
@media (min-width: 30em) {

    .titulo {
        grid-column: 1/4 ;
        text-align: center;
    }
}


/* cambios a partir de los 960px */
@media (min-width: 60em) {

    .titulo {
        grid-column: 1/4 ;
        text-align: center;
    }

    .info {
        display: grid ;
        grid-template-columns: 35em 35em;
        align-items: center;
    }

}


/*reglas  Catalogo de productos*/

.superpuesta {
    display: grid;
    grid-template: 1 / 1;
    width: 100%;
  }
  .banner {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
  }
  
  .banner img,
  source {
    width: 120%;
  }
  
  .bajada-banner {
    text-align: center;
    color: #fff;
  }
  
  .bloque-banner {
    display: flex;
    flex-direction: column;
    align-items: center;
    grid-column: 1;
    grid-row: 1;
    justify-content: center;
    margin-bottom: 9.5rem;
    text-align: center;
    max-width: 100%;    
    padding: 1em;
    font-size: 1em;

  }

.tituloproducto {
    margin: 1em;


}
.cuadros h2{
    text-align: left;
    font-size: 2em;
    margin-block-end: .5em;
}

.cuadros p{
    text-align: left;
    font-size: 3.5vw;
    margin-block-end: .5em;
}

.cuadros figure{
    margin: 1em;
    padding: 3vw 0 0 0 ;
    
}

.cuadros img {
    object-fit: cover;
    width: 45%;
    height: 100%;
}

.cuadros a {
    color: rgb(255, 255, 255);
    border-radius: 1em;
    background-color: #000000;
    padding: 1em;
    margin-top: 2em;
    font-weight: 600;
    text-transform: uppercase;
    display: block;    
}


/* Dispositivos móviles (hasta  768px) */
@media (max-width: 48em) {
    .cuadros {
        border: solid rgb(228, 228, 228) 1px;      
        border-radius: 1.5em;
        box-shadow: 0 1em 1.5em #afb0b1;
        text-align: center;
        padding: 10vw 6vw;
        margin: 2.5em 1.5em;
        height: 100%;
        background-color:#aaafaf46;
    }
    .cuadros img {
        width: 45vh;  
        width: 35%;
        max-height: 50%;      
    }   
  
    .bloque-banner {
        display: flex;
        flex-direction: column;
        align-items: center;
        grid-column: 1;
        grid-row: 1;
        justify-content: center;
        margin-bottom: 2rem;
        text-align: center;
        max-width: 100%;    
        padding: -1em;
        font-size: 1em;
    
      }
}
/* cambios a partir de los 480px */
@media (min-width: 30em) {
    .cuadros {
        border: solid rgb(228, 228, 228) 1px;      
        border-radius: 1.5em;
        box-shadow: 0 1em 1.5em #afb0b1;
        text-align: center;
        padding: 10vw 6vw;
        margin: 2.5em 1.5em;
        height: 100%;
        background-color:#aaafaf46;
    }
    .cuadros img {
        width: 45vh;  
        width: 35%;
        max-height: 50%;      
    }   
  
    .bloque-banner {
        display: flex;
        flex-direction: column;
        align-items: center;
        grid-column: 1;
        grid-row: 1;
        justify-content: center;
        margin-bottom: 2rem;
        text-align: center;
        max-width: 100%;    
        padding: 1em;
        font-size: 1em;
    
      }
}



/* cambios a partir de los 960px*/
@media(min-width: 60em) {
    .secciones {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 2em;
        padding: 1em;
        margin: 3em;
        scale: 100%;
    }  
   
    .cuadros {
        padding: 1em; 
        margin-inline: auto;
        background-color:#cccece46;
    }
    .cuadros h2{
        font-size: 2.3em;
        font-weight: 900;
        text-align: left;
    }

    .cuadros {
        border: solid rgb(228, 228, 228) 1px;      
        border-radius: 1.5em;
        box-shadow: 0 1em 1.5em #afb0b1;
        text-align: center;
        margin: 1.5em 1em;
        height: 100%;
    }

    .cuadros h2{
        font-size: 2.3em;
        font-weight: 900;
        text-align: center;
    }

    .cuadros p{
        font-size: 1.5em;
        padding: 1em;
    }
    .cuadros img {
        width: 45vh;  
        width: 35%;
        max-height: 50%;      
    }   
  
    .secciones{
        padding: 1em;
    }   
    .caracteristicas2 img {
        width: 20%;  
        max-height: 50%;    
        align-items: center;  
        
    }   
    .bloque-banner {
        display: flex;
        flex-direction: column;
        align-items: center;
        grid-column: 1;
        grid-row: 1;
        justify-content: center;
        margin-bottom: 2rem;
        text-align: center;
        max-width: 100%;    
        padding: 1em;
        font-size: 2em;
    
      }
}
.cuadros:hover {
    background-color: #6f9b3c7c;
    box-shadow: 0 .25em .25em hsla(0, 0%, 0%, 0.25);
    color: hsl(0 0% 90%);
    transition: .5s;
}

    /*Reglas Productos individuales */


    .caracteristicas {
        padding: 1em; 
        margin-inline: auto;
        
    }
    .caracteristicas ul {
        margin-inline: center;
        text-align: center;
        padding: 0;
    }
    .caracteristicas {
        border: solid rgb(228, 228, 228) 1px;      
        border-radius: 1.5em;
        box-shadow: 0 2em 1.5em #afb0b1;
        text-align: left;
        margin: 2.5em 2em;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        flex-wrap: wrap;
        gap: 2em;
    }
   
    
    .producto_caracteristicas img {
            width: 40%;  
            max-height: 40%;    
            align-items: center;  
        }   
        
    .caracteristicas a {
            color: rgb(255, 255, 255);
        border-radius: 3em;
        background-color: #000000;
        padding: 0.5em;
        font-weight: 600;
        text-transform: uppercase;
        padding-block: 0.75em .6em;
       
        }
        
    .caracteristicas a:hover {
            background-color:#6f9b3c;
            color: #ffffff;
            outline: none;
        }
  .caracteristicas2 {
            display: flex;
            flex-direction: column;
            align-items: center;
            flex-wrap: wrap;
            gap: -4em;
        }
.contenedor-caracteristicas h5{
            text-align: center;
            padding: 1em;
        }
    
 .contenedor-caracteristicas > ul > li:not(:last-of-type) {
           border-right: solid 1px hsl(280 29% 44% / .15);
            margin-block-end: 1.5em;
            
        }
        
 .contenedor-caracteristicas ul{
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            justify-content: center;
            padding: 0;
            list-style: none;
        }
        

 /*usuario*/

.form {
    background-color: hsl(0 0% 100%);
    width: min(25em, 100%);
    padding: 4em 3em;
    border-radius: .5em;
    box-shadow: 0 .5em 1em -.5em hsl(0 0% 0% / 30%);
    text-align: left;
    margin-inline: auto;
  }
  .form__titulo {
    font-size: 2rem;
    margin-block-end: 3em;
  }
  .form__parrafo {
    font-weight: 300;
  }

  .form__link {
    font-weight: 400;
    color: black;
    text-decoration: none;
    outline: none;
  }
  .form__link:hover,
.form__link:focus {
  text-decoration: underline;
}
.form__contenedor {
    margin-block-start: 3em;
    display: grid;
    gap: 2.5em;
  }
  .form__grupo {
    position: relative;
    --color: hsl(0 0% 35% / 50%);
  }
  .form__input {
    width: 100%;
    background: none;
    color: hsl(0 0% 50%);
    font-size: 1rem;
    padding: .5em;
    border: solid 1px var(--color);
    border-radius: .25em;
    outline: none;
    font-family: inherit;
    cursor: pointer;
    transition: 1s;
 }
 .form__input:focus {
    color: var(--color);
    font-weight: 700;
  }
  .form__label {
    color: var(--color);
    position: absolute;
    top: 0;
    left: .5em;
    transform: translateY(.5em);
    transition:
      transform .5s,
      color .3s,
      padding .5s;
    background-color: hsl(0 0% 100%);
    padding: 0;
  }
  :is(.form__input:not(:placeholder-shown),
  .form__input:focus) {
--color: hsl(0, 0%, 0%);
}

:is(.form__input:not(:placeholder-shown),
  .form__input:focus) + .form__label {
transform: translateY(-.6em) scale(.7);
transform-origin: left top;
padding: 4px;
--color: hsl(152, 49%, 48%);
}

.form__label::before {
content: "";
position: sticky;
inset: calc(50% - .5em) auto auto 0;
background-color: hsla(0, 0%, 0%, 0.5);
border-radius: 50%;
width: 1em;
transform: scale(0);
transition: .5s;
}

.form__input:focus + .form__label::before {
transform: scale(1.5);
inset: calc(100% + .3em) auto auto -2.5em;
}



.form__submit {
background-color: hsl(0, 0%, 0%);
color: hsl(0 0% 100%);
font-family: inherit;
font-size: inherit;
padding-block: .8em;
border: none;
border-radius: .5em;
outline: none;
cursor: pointer;
transition: .5s;
}

.form__submit:focus,
.form__submit:hover {
background-color: hsl(0, 0%, 0%);
} 

/* reglas inicio */

.boton {
    background-color: #9cd35e ;
    border-radius: 50%;
    box-shadow: 0 .5em 1em -.5em hsl(0 0% 0% / 70%);
    padding: 1em ;
}

/* cambios a partir de los 480px */
@media (min-width: 30em) {
    .videoinfo {
        margin: 0 0 1em 0 ;
    }

    .introduccion {
        margin: 2em 2em 0 2em ;
    }

    .explorar {
        display: grid ;
        grid-template-columns: 10em ;
        grid-template-rows: 3em 40em ;
        align-items: center;
        justify-content: center ;
    }
    
    .botones {
        text-align: center ;
    } 
    
    .boton {
        margin-bottom: 1.5em ;
    }

    .textoinfo {
       padding: 1em ;
       text-align: center ;
    }
}

/* cambios a partir de los 640px */
@media (min-width: 40em) {

    .explorar {
        display: grid ;
        grid-template-columns: 10em ;
        grid-template-rows: 2.3em 10em ;
        align-items: center;
        justify-content: center ;
        margin-bottom: 3em ;
    }
    
    .botones {
        display: grid ;
        grid-template-columns: 10em 10em 10em ;
        align-items: center;
        justify-content: center
    } 
    
    .boton {
        max-width: 100% ;
        margin:0 1em 0 1em ;
    }
    
}

/* cambios a partir de los 960px */
@media (min-width: 60em) {

    .videoinfo {
        max-width: 100% ;
        align-self: center ;
    }

    .introduccion {
        display: grid ;
        column-gap: 2em ;
        grid-template-columns: 56% 41% ;
        justify-content: center ;
        align-items: center ;
        padding: 1em ;
    }
    
    .textoinfo {
        text-align: left;
    }
    
    .explorar {
        display: grid ;
        grid-template-columns: 10em ;
        grid-template-rows: 7em 15em ;
        align-items: center;
        justify-content: center ;
    }
    
    .botones {
        display: grid ;
        grid-template-columns: 15em 15em 15em ;
        align-items: center;
        justify-content: center
    } 
    
    .boton {
        max-width: 80% ;
    }
    
    .titulo {
        grid-column: 1/4 ;
        text-align: center;
        font-size: 2em;
    }

}

/* reglas NOSOTROS */

.info {
    margin: 3em 0em 3em 0em ;
    text-align: left ;
}

.Contactos {
    margin: 3em 5em 3em 5em ;
}

.telefono, .direccion, .horarios {
    padding: 2em ;
    border: solid rgb(228, 228, 228) 1px;      
    border-radius: 1.5em;
    box-shadow: 0 2em 1.5em #afb0b1;
    text-align: center;
    
}

/* cambios a partir de los 480px */
@media (min-width: 30em) {

    .info {
        margin: 3em 5em 3em 5em ;
        text-align: center ;
    }

    .telefono, .direccion, .horarios {
        margin: 2.5em 1em;
        height: 100%;
        box-shadow: 0 1em 1.5em #afb0b1;
    }

    .info {
        text-align: center ;
    }

    .indarg {
        max-width: 60%;
        justify-self: center ;
    }

    .comprolink {
        color: #6f9b3c;
        font-weight: bold;
    }
    
    .detallesinfo {
        display: grid ;
        grid-template-columns: 0.6fr 1.4fr;
        text-align: left ;
        align-items: center ;
        background-color: #ffffff ;
        padding: 1em ;
        border-radius: 2em ;
        box-shadow: 0 1em 1.5em #c3e29f;
        margin-bottom: 2em;
    }

}

/* cambios a partir de los 960px */
@media (min-width: 60em) {

    .telefono, .direccion, .horarios {
        padding: 1em ;
    }

    .info {
        display: grid ;
        grid-template-columns: 56% 41%;
        margin: 3em 5em 3em 5em ;
        justify-content: center ;
        align-items: center;
        column-gap: 2em ;
        text-align: left ;
    }

    .Contactos {
        display: grid ;
        grid-template-columns: 33% 33% 33%;
        grid-template-rows: 10em ;
        column-gap: 1em ;
        justify-content: center ;
        margin-bottom: 8em  ;
    }

    .indarg {
        max-width: 70%;
        justify-self: left ;
    }
    
    .detallesinfo {
        display: grid ;
        grid-template-columns: 0.2fr 1.4fr;
        text-align: left ;
        align-items: center ;
        background-color: #ffffff ;
        padding: 1em ;
        border-radius: 2em ;
        box-shadow: 0 1em 1.5em #c3e29f;
    }
}

/* reglas NOTICIAS */

.noticias {
    margin: 0 2em 2em 2em ;
    
}

.noticia1 {
    background-color:  #cccece46 ;
    border-radius: 2em ;
    margin: 1em ;
    padding: 2em ;
    box-shadow: 0 .5em 2em -.5em hsl(0 0% 0% / 70%);
}

.fotonoticia {
    display: block;
    max-width: 80% ;
    margin: auto ;
}

.leermas {
    color: #324918 ;
}

.textointro {
    text-align: center ;
    margin: 1em 2em 3em 2em ;
}

.interacciones {
    display: grid ;
    grid-template-columns: 5em 5em 5em 5em ;
}

.iconitos {
    max-width: 2em ;
}


/* cambios a partir de los 480px */
@media (min-width: 30em) {

    .noticia1 {
        align-self: center ;
    }

    .interacciones {
        margin-top: 2em ;
        justify-content: center;
        text-align: center ;
    }
}

/* cambios a partir de los 640px */
@media (min-width: 40em) {

}

/* cambios a partir de los 960px */
@media (min-width: 60em) {

    .noticia1 {
        display: grid ;
        grid-template-columns: 30% 70% ;
        align-items: center;
    }

    .interacciones {
        margin-top: 7em ;
        text-align: left ;
        justify-content: left;
    }
}

/* reglas de comunidad */

.Comunidad 
    {background-color:  #cccece46;
        border-radius: 2em ;
        margin: 3em 1em 3em 1em ;
        padding: 2em ;
        box-shadow: 0 .5em 2em -.5em hsl(0 0% 0% / 70%);
    }

.imgcomunidad {  
    max-width: 90% ; 
}

 p {
    display: block;.
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}

.imgmapa {
    max-width: 40% ;
    padding: 0em 0em 0em 1em; 
            
}

   
.Comunidad {
       
        grid-template-columns: 30% 70% ;
        align-items: center;
    }
    /* cambios a partir de los 480px */
@media (min-width: 30em) {
    .Comunidad {
        align-self: center ; }
}
/* cambios a partir de los 960px */
@media (min-width: 60em) {

    .Comunidad {
        display: grid ;
        grid-template-columns: 30% 70% ;
        align-items: center; }
}
.titulocomunidad { padding: 0.5em 0 0 0.5em;}
    

   /* reglas Compromiso */

.Compromiso { 
        background-color:  #cccece46;
        border-radius: 2em ;
        margin: 3em 1em 3em 1em ;
        padding: 2em ;
        box-shadow: 0 .5em 2em -.5em hsl(0 0% 0% / 70%);}
       
 .imgcompromiso {  max-width: 90% ; }
    
 

    .txtnosotros{ max-width: 50%;
        display: grid ;
        grid-template-columns: 30% 70% ;
        align-items: center}

   /* cambios a partir de los 480px */
@media (min-width: 30em) {
    .Compromiso {
        align-self: center ;
    }
}
/* cambios a partir de los 960px */
@media (min-width: 60em) {

    .Compromiso {
        display: grid ;
        grid-template-columns: 30% 70% ;
        align-items: center;
    }
}


/* reglas Talleres */

.Talleres {
    margin: 1em 2em 1em 2em ;
}

.introtalleres {
    margin: 0 3em 1em 3em ;
    text-align: center;
}

  .Talleres1{
    
    grid-template-columns: 30% 70% ;
    background-color:  #cccece46;
    border-radius: 2em ;
    margin: 0em 1em 3em 1em ;
    padding: 2em ;
    box-shadow: 0 .5em 2em -.5em hsl(0 0% 0% / 70%);}

.txttaller { max-width: 90%;padding: 0em 0em 0em 1em;
    
    align-items: center}

.Talleres1 {align-self: auto;}



 /* cambios a partir de los 480px */
 @media (min-width: 30em) {
    .Talleres1 {
        align-self: center ;
    }
}
/* cambios a partir de los 960px */
@media (min-width: 60em) {

    .Talleres1 {
        display: grid ;
        grid-template-columns: 30% 70% ;
        align-items: center;
    }}

        /* reglas MapaCamp */

 .mapacanje { grid-template-columns: 60% 40% ;
                  background-color:  rgb(152, 240, 144);
                  border-radius: 2em ;
            margin: 0em 1em 3em 1em ;
            padding: 2em ;
            box-shadow: 0 .5em 2em -.5em hsl(0 0% 0% / 70%);}
        
  .txtmapa { max-width: 90%;
                 align-self:safe;}
    
    
   .mapacanje {align-self: auto;}

/* cambios a partir de los 960px */
@media (min-width: 60em) {

    .mapacanje {
        display: grid ;
        grid-template-columns: 60% 40% ;
        align-items: center;
    }
}