@charset "UTF-8";
@import url ('https://fonts.googleapis.com/css2? family = Roboto: ital, wght @ 0,100; 0,300; 0,400; 0,500; 0,700; 0,900; 1,100; 1,300; 1,400; 1,500; 1,700; 1,900 & display = swap ');

/* colores
background-color: rgb(231, 243, 223);
background-color: rgb(120, 145, 116);
background-color: rgb(61, 85, 67);
background-color: rgb(27, 36, 31);
background-color: rgb(255, 251, 193);
background-color: rgb(253, 219, 122);
background-color: rgb(247, 154, 113);
background-color: rgb(223, 97, 74);
*/

/*estructura base para todos*/
body {
    box-sizing: border-box;
    font-family: "Roboto";
    background-color: rgb(231, 243, 223);
    display: flex;
    flex-direction: column;
}

main {
    max-width: 50rem;
    margin: auto;
}

h2 {
    text-align: center;
    margin: 4rem 0 2.5rem 0;
    color: rgb(223, 97, 74);
    border-bottom: 0.25rem solid rgb(253, 219, 122);
    padding-bottom: 1rem;
}

h4 {
    color: rgb(223, 97, 74);
}

img {
    width: 100%;
}

h6 {
    color: rgb(61, 85, 67);
}

.subtitulo img {
    width: 1.5rem;
    display: flex;
    justify-content: center;
    margin: 0 0.5rem 0 -2.1rem;
}

.subtitulo {
    display: flex;
    justify-content: flex-start;
    flex-direction: row;
    align-items: baseline;
    margin: 3rem 0 0 2rem;
}

/*botonera*/
header .botonera {
    background-color: rgb(120, 145, 116);
    margin: -0.5rem -1rem 0 -0.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#btn-menu {
    display: none;
}

header label {
    font-size: 2rem;
    cursor: pointer;
    display: none;
}

header img {
    margin: 0.25rem 1rem 0.0rem 0.5rem;
    width: 10rem;
    align-items: baseline;
    cursor: pointer;
}

header nav ul {
    list-style: none;
    margin: 0rem -0.5rem;
    display: flex;
    flex-wrap: wrap;
    justify-content:flex-end;
}

header nav ul li {
    min-width: 1rem;
}

header nav ul li a {
    color: rgb(231, 243, 223);
    padding: 1.75rem;
    text-align: center;
    display: block;
    text-decoration: none;
    font-weight: bolder;
    font-size: 0.75rem;
}

header nav ul li a:hover {
    background-color: rgb(61, 85, 67);
    color: rgb(231, 243, 223);
}

.historia header nav ul li:first-child a,
.produccion header nav ul li:nth-child(2) a,
.talleres header nav ul li:nth-child(3) a,
.contacto header nav ul li:nth-child(4) a {
    background-color: rgb(231, 243, 223);
    color: rgb(61, 85, 67);
}

@media (max-width:768px){
    header label {
        display: block;
        color: white;
        margin: 0 1rem 0 0;
    }
    
    .menu {
        background: rgb(120, 145, 116);
        position: absolute;
        margin: 7.9rem 0;
        width: 50%;
        transform: translateX(-150%);
        transition: all 0.5s;
    }
    
    .menu ul {
        display: block;
        flex-wrap: wrap;
        justify-content:flex-end;
    }
    
    header nav ul li a {
        color: rgb(231, 243, 223);
        padding: 1rem 0 1rem 0;
        margin: 0 0 0 -2.05rem;
        text-align: center;
        display: block;
        text-decoration: none;
        font-weight: bolder;
        font-size: 0.75rem;
    }
    
    #btn-menu:checked ~ .menu {
        transform: translateX(100%);
    }
}
/*fin botonera*/

#inicio {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#inicio h3 {
    text-align: center;
    margin: 3rem 0 0 0;
    font-weight: 500;
    color: rgb(120, 145, 116);
}

#inicio h1 {
    text-align: center;
    margin: 0.25rem 0 3rem 0;
    font-weight: 500;
    color: rgb(61, 85, 67);
}

#inicio span {
    font-weight: 1000;
}

#inicio img {
    border: solid 0.1rem rgb(61, 85, 67);
    border-radius: 50%;
    margin: 0 0 3rem 0;
    width: 50%;
}

/* slider produccion*/
.slider {
	width: 100%;
	margin: auto;
	overflow: hidden;
}

.slider ul {
	display: flex;
	padding: 0;
	width: 300%;
	animation: cambio 15s infinite alternate linear;
}

.slider li {
	width: 100%;
	list-style: none;
}

.slider img {
	width: 100%;
}

@keyframes cambio {
	0% {margin-left: 0;}
	20% {margin-left: 0;}
	
	25% {margin-left: -100%;}
	45% {margin-left: -100%;}
	
	50% {margin-left: -200%;}
	70% {margin-left: -200%;}
}
/* fin slider produccion*/



/*acordeon de los talleres*/
.accordion {
    background-color: rgb(247, 154, 113);
    color: rgb(231, 243, 223);
    cursor: pointer;
    padding: 18px;
    width: 100%;
    text-align: left;
    border: none;
    outline: none;
    transition: 0.4s;
}

.active, .accordion:hover {
    background-color: rgb(223, 97, 74);
    color: rgb(231, 243, 223);
}

.panel {
    padding: 0 18px;
    background-color: rgb(255, 251, 193);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}

.img-responsive {
  width: 100%;
  padding-top: 56.25%;
  position: relative;
  margin-bottom: 18px;
}

.img-responsive > img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.accordion:after {
    content: '\02795';
    font-size: 13px;
    color: rgb(231, 243, 223);
    float: right;
}

.active:after {
    content: "\2796";
}
/* fin acordeon de los talleres*/

.autoridades ul li {
    margin: 0 0 0 -2rem;
    list-style: "\2771";
}

.ubicacion div{
    display: flex;
    justify-content: center;
    margin: auto;
    padding: 1.5rem 0 0 0;
}

.datos {
    display: flex;
    justify-content: space-between;
    align-content: center;
    margin: -2.5rem 0 0 0;
}

.datos p {
    padding: 5rem 0 0 0;
}

/*formulario talleres*/
.formulario {
    margin: 4rem 0 0 0;
}

.formulario label {
    font-weight: 500;
}

.dato1, .dato2, .dato3, .dato4, .dato5, .dato6, .dato7, .dato8, .dato9, .dato11 {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dato1, .dato2, .dato3, .dato4, .dato5, .dato6, .dato7, .dato8, .dato9, .dato10, .dato11 {
    margin: 2rem 0;
}

.dato10 input {
    max-width: 5rem;
}

.dato1 input, .dato2 input, .dato3 input, .dato6 input, .dato7 input {
    background: rgb(255, 251, 193);
    min-width: 16rem;
    height: 1.5rem;
    border: solid 0.1rem rgb(255, 251, 193);
    border-radius: 10px;
}
.dato5 input {
    background: rgb(255, 251, 193);
    min-width: 16rem;
    height: 2rem;
    border: solid 0.1rem rgb(255, 251, 193);
    border-radius: 10px;
}

.dato4 select, .dato8 select, .dato9 select {
    background: rgb(255, 251, 193);
    min-width: 16.2rem;
    height: 2rem;
    border: solid 0.1rem rgb(255, 251, 193);
    border-radius: 10px;
}

.dato11 textarea {
    background: rgb(255, 251, 193);
    min-width: 15.9rem;
    height: 5rem;
    border: solid 0.1rem rgb(255, 251, 193);
    border-radius: 10px;
}

.dato10 input {
    margin: 1rem 0.5rem 0 0.5rem;
}

.registrarse {
    display: flex;
    justify-content: flex-end;
}

.registrarse a {
    text-decoration: none;
    font-weight: 1000;
    color: rgb(231, 243, 223);
    background: rgb(61, 85, 67);
    border: 3px solid;
    border-radius: 15px;
    width: 16rem;
    text-align: center;
    padding: 1rem 0 1rem 0;
    margin: 0 0 2rem 0;
}

.registrarse a:hover {
    background: rgb(27, 36, 31);
}
/*fin formulario talleres*/

#registro h1 {
    text-align: center;
    margin: 0.25rem 0 3rem 0;
    font-weight: 1000;
    color: rgb(61, 85, 67);
    margin: 7.5rem 0 0 0;
}

#registro h3 {
    text-align: center;
    margin: 0.25rem 0 3rem 0;
    font-weight: 500;
    color: rgb(61, 85, 67);
    margin: 7.5rem 0 0 0;
}

#registro h5 {
    text-align: center;
    font-weight: 500;
    margin: 2rem 0 0 0;
    color: rgb(120, 145, 116);
}