@charset "UTF-8";
/* CSS Document */

@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');
/* reseteo de propiedades*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	box-sizing: border-box;
}

html {
	background: url("../img/gradient.jpg");
	background-size:200% 500%;
	animation: gradient 30s ease infinite; 
	width: 100%;
	height: 100%;
}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}


body {
  align-items: center;
  font-family: 'Roboto', sans-serif;
}


#section-index{max-width: 1200px; height: auto; margin: auto;}
#tam-contenido{width: 100%; margin: auto;}

#menu{width: 100%; position: fixed; bottom: 0; z-index: 100; background-image: url("../img/kraft.jpg"); background-position: center; background-size: cover; background-repeat: no-repeat; text-align: center;}

#menu #botones{width: 85%; height: 90px; padding-top: 10px; padding-bottom: 10px; display: inline-block; vertical-align: top; margin: auto;}
#menu #botones img{height: 100%; width: 20%;}

.contador{margin: 20px auto; text-align: center; width: 100%;}
#cuenta-atras{width: 100%; margin: auto;}

li {color: black; display: inline-block; font-size: 1.5em; list-style-type: none; padding: 1em; text-transform: uppercase;}
li span {display: block; font-size: 5rem;}

.logo{width: 45%; margin: auto; height: 100%; padding-top: 20px;}
.logo .img{width: 100%;}

.fecha{width: 100%; text-align: center; margin-top: 30px;}
.fecha h1{font-size: 3em; font-weight: 700; color: black;}
.fecha h2{font-size: 1.6em; font-weight: 700; color: black; letter-spacing: 0.05em;}
.fecha h3{font-size: 1em; font-weight: 400; color: black; letter-spacing: 0.1em;}
.fecha h4{font-size: 1em; font-weight: 900; color: black;}

#confirmar-asistencia{width: 50%; margin-left: auto; margin-right: auto; margin-top: 35px; text-align: center;}
#confirmar-asistencia .boton{width: 100%; height: 80px; border: 0; filter: opacity(1); transition:all .5s ease-in-out; background-color: rgb(255, 255, 255); font-size: 1.4em; font-weight: 700; letter-spacing: 0.2em; color: white; background: linear-gradient(-45deg, #ff008a, #00b4fe); background-size: 200% 200%; animation: gradient 30s ease infinite;}
#confirmar-asistencia .boton:hover{filter: opacity(1); font-size: 1.5em; cursor: pointer;}
#confirmar-asistencia .boton span{background-image: url("../img/gradient.jpg"); background-size: 200% 350%; background-attachment: fixed; -webkit-background-clip:text; -webkit-text-fill-color: transparent; animation: gradient 30s ease infinite;}

hr{width: 85%; margin-top: 30px; border-top: 3px solid black; border-radius: 5px; border-bottom-style: none;}

#evol{width: 50%; margin-left: auto; margin-right: auto; margin-top: 100px;}
#evol h1{font-size: 1.8em; font-weight: 700; color: black; text-align: center;}
#evol p{font-size: 0.8em; font-weight: 400; line-height: 1.5em; text-align: justify; color: black; margin-top: 30px;}
#evol p span{font-weight: 900;}
.texto-destacado{width: 100%; background-color: black; margin-top: 120px; padding-top: 20px; padding-bottom: 20px; text-align: center;}
.texto-destacado h1{font-size: 1.2em; font-weight: 700; background-image: url("../img/gradient.jpg"); background-size: 200% 350%; background-attachment: fixed; -webkit-background-clip:text; -webkit-text-fill-color: transparent; animation: gradient 30s ease infinite; text-transform: uppercase;}

#video{width: 100%; margin-top: -2px;}
#video iframe{width: 100%;}

.ilustracion{max-width: 1200px; margin: auto; padding-top: 100px; padding-bottom: 100px;}
.ilustracion img{width: 100%;}

#regalos{width: 100%; text-align: center; padding-bottom: 25px; font-size: 1em; font-weight: 700; color: black; letter-spacing: 0.1em;}
#regalos span{font-weight: 900; font-size: 1.2em; line-height: 2em;}

#maestros{width: 85%; margin: auto; text-align: center; padding-top: 80px;font-weight: 500; font-size: 1.5em; text-transform: uppercase;}
#maestros .boton{width: 40%; height: 60px; border: 0; filter: opacity(1); transition:all .5s ease-in-out; background-color: rgb(255, 255, 255); font-size: 0.7em; font-weight: 700; letter-spacing: 0.05em; color: white; background: linear-gradient(-45deg, #ff008a, #00b4fe); background-size: 200% 200%; animation: gradient 30s ease infinite; margin-top: 25px;}
#maestros .boton:hover{filter: opacity(1); font-size: 0.8em; cursor: pointer;}
#maestros .boton span{background-image: url("../img/gradient.jpg"); background-size: 200% 350%; background-attachment: fixed; -webkit-background-clip:text; -webkit-text-fill-color: transparent; animation: gradient 30s ease infinite;}

#tam-contenido-form{width: 100%; margin: auto;}
.nota{text-align: center; padding-top: 50px; padding-bottom: 50px; font-weight: 500; text-decoration: underline; font-size: 2em; text-transform: uppercase;}

.elemento-cajatxt{text-align: center;}
.elemento-inputsradio{text-align: center;}

.elemento-cajatxt label{font-size: 2em; color: white;}
.elemento-cajatxt input{width: 90%; height: 50px; font-size: 1em; margin-top: 10px; padding-left: 10px; color: white; background-color: rgba(0,0,0,0); border-left: 1; border-right: 0; border-top: 0; border-style: solid; border-color:white;}
.elemento-cajatxt textarea{width: 90%; height: 50px; font-size: 1em; margin-top: 10px; padding-left: 10px; color: white; background-color: rgba(0,0,0,0); border-left: 1; border-right: 0; border-top: 0; border-style: solid; border-color:white;  font-family: 'Roboto', sans-serif;}

.elemento-inputsradio label{font-size: 2em; color: white;}
.elemento-inputsradio a{font-size: 0.8em; text-decoration: none; background-image: url("../img/gradient.jpg"); background-size: 200% 350%; background-attachment: fixed; -webkit-background-clip:text; -webkit-text-fill-color: transparent; animation: gradient 30s ease infinite; line-height: 3em;}
.elemento-inputsradio label span{font-size: .7em; color: white;}

.radio{display: inline-block;}

.caja-form{background-color: black; padding-top: 80px; padding-bottom: 80px; padding-left: 20px; padding-right: 20px;}
.caja-form2{background-color: black; padding-top: 80px; padding-bottom: 80px; margin-top: 50px; padding-left: 20px; padding-right: 20px;}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: white;}

#tam-contenido-form .caja-button{text-align: center;}
.caja-button button{margin-top: 80px; margin-bottom: 160px; width: 85%; height: 100px; border: 0; filter: opacity(1); transition:all .5s ease-in-out; background-color: rgb(255, 255, 255); font-size: 1.4em; font-weight: 700; letter-spacing: 0.2em; color: white; background: linear-gradient(-45deg, #ff008a, #00b4fe); background-size: 200% 200%; animation: gradient 30s ease infinite; text-transform: uppercase;}
.caja-button button:hover{filter: opacity(1); font-size: 1.5em; cursor: pointer;}
.caja-button button span{background-image: url("../img/gradient.jpg"); background-size: 200% 350%; background-attachment: fixed; -webkit-background-clip:text; -webkit-text-fill-color: transparent; animation: gradient 30s ease infinite;}

.info-hotel{width: 100%; height: auto; text-align: center;}
.info-hotel #superior{padding-top: 25px; padding-bottom: 50px;}
.info-hotel #inferior{padding-bottom: 150px;}
.info-hotel h2{font-size: 1.6em; font-weight: 700; color: black; letter-spacing: 0.05em; text-decoration: underline;}
.info-hotel p{font-size: 1em; font-weight: 400; line-height: 1.5em; color: black; margin-top: 10px;}
.info-hotel span{font-weight: 900; font-size: 1.2em;}
.info-hotel .boton{width: 40%; height: 60px; border: 0; filter: opacity(1); transition:all .5s ease-in-out; background-color: rgb(255, 255, 255); font-size: 1.4em; font-weight: 700; letter-spacing: 0.2em; color: white; background: linear-gradient(-45deg, #ff008a, #00b4fe); background-size: 200% 200%; animation: gradient 30s ease infinite;}
.info-hotel .boton:hover{filter: opacity(1); font-size: 1.5em; cursor: pointer;}
.info-hotel .boton span{background-image: url("../img/gradient.jpg"); background-size: 200% 350%; background-attachment: fixed; -webkit-background-clip:text; -webkit-text-fill-color: transparent; animation: gradient 30s ease infinite;}

@media only screen and (max-width:580px){/* POR ORDEN DE APARICIÓN*/
html {background-size:200% 503%;}
#tamaño-contenido{width: 90%;}
li {font-size: 0.8em; padding: 0.6em; }
li span {font-size: 2em;}
.logo{width: 70%; margin: auto;}
#confirmar-asistencia{width: 85%;}
#evol{width: 85%;}
#evol p{font-size: 1em; line-height: 1.5em;}
.info-hotel .boton{width: 85%; font-size: 1em;}	
#maestros{width: 100%;}
#maestros .boton{width: 85%;}
}