/* PALETA COLORES
AZUL: #5CB8E4
MORADO: #8758FF
BLANCO: #F2F2F2
NEGRO: #181818

 */

@font-face {
  font-family: 'ravefull'; /* Elige un nombre para tu fuente */
  src: url('../fonts/technofull.ttf') format('truetype'); /* Ajusta la ruta a la ubicación de tu fuente */
  font-display: swap;
}

html{
	margin:0;
	font-family:'ravefull';
}
body{
	background-color: white;
	margin:0;

}
header{
	width:100%;
	height:60px;
	position: fixed;
	background: #181818;
	position:relative;
}

.movil{
	display: none;
}

.escritorio{
	display: inherit;
}

.logo_header{
	position:absolute;
	height: 40px;
	width: auto;
	left:50%;
	top:50%;
	transform: translate(-50%,-50%);
}

/*-------------BANNER-------------*/
.promo_banner{
	    background: linear-gradient(45deg, #8758ff, #5CB8E4);
	width: 100%;
	height:30px;
	position: fixed;
	position:relative;
	text-align: center;
	vertical-align: middle;

}

.promo_titulo_banner{
	font-weight: 100;
	margin: 0;
	font-family: 'ravefull';
	position:absolute;
	left:50%;
	top:50%;
	transform: translate(-50%,-50%);
	color:#181818;
	letter-spacing: 1.5px;
}

.video_banner{
	width: 100%;
	height: auto;
}

#video_banner_m{
	display:none;
}

.c_banner{
	width:100%;
	height: auto;
	position: relative;
}

.logo_banner{
	height: auto;
	width: 600px;
}

.c_logo_banner{
	position:absolute;
	left:52%;
	top:45%;
	transform: translate(-50%,-50%);
	color:white;
	letter-spacing: 1.5px;
	font-size: 1.5em;
}

/*----------------------------------*/
/*---------TERMINOS POP UP-----------*/
.terminos_pop_up{
	text-align: center;
	position: fixed;
	padding: 5%;
	padding-top: 10px;
	padding-bottom: 10px;
	width: 30%;
	background-color: #5CB8E4;
	top:50%;
	left:50%;
	transform: translate(-50%, -50%);
	z-index:10;
}

.blanquecino{
	position: fixed;
	z-index: 9;
	width: 100%;
	height: 100vh;
	opacity: 0.7;
	background-color: white;
}

.boton_t{
	width: 100%;
	background-color: black;
	color:white;
	font-weight: 200;
}
.boton_t_r{
	width: 100%;
	border-style: solid;
	color:black;
	font-weight: 200;
}

.grid_cookies{
	display: grid;
	position: relative;
	width:100%;
	gap:10px;
	grid-template-columns: repeat(1, 1fr);
	grid-auto-rows: auto;
}
/*-----------------------------------*/

/*----------BANDA--------------------*/
.c_banda{
	display:flex;
	animation: desplazar 10s linear infinite;
}
.c_banda_img{
	width: 100%;
	height: auto;
}
.c_f_i{
	width:100%;
	overflow: hidden;
	margin:0;
}
@keyframes desplazar {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

/*---------BANNER EXPOSITOR----------*/
.expositor_flex{
	display:flex;
	animation:desplazar_ex 12s linear infinite;
}
.img_expositor{
	width: calc(100% / 3);
	height: auto;
}
.expositor_banner{
	position: relative;
}

.c_crono{
	position: absolute;
	left: 50%;
	top:50%;
	transform: translate(-50%,-50%);
}

.logo_centrado{
	width:45%;
	height: auto;
	position: absolute;
	left: 50%;
	top:50%;
	transform: translate(-50%,-50%);
}

.cronometro{
	font-family: 'ravefull';
	font-size: 2em;
	color:white;
}
#cronometro_l{
	font-family: 'ravefull';
	font-size: 2em;
	color:white;
}
#dias{
	font-size: 3em;
}
#horas{
	font-size: 3em;
}
#minutos{
	font-size: 3em;
}
@keyframes desplazar_ex {
  0% {
    transform: translateX(0%);
  }
  6.67% {
    transform: translateX(-0%);
  }
  13.34% {
    transform: translateX(-33.33%);
  }
  20.01% {
    transform: translateX(-33.33%);
  }
  26.68% {
    transform: translateX(-66.66%);
  }
  33.35% {
    transform: translateX(-66.66%);
  }
  40.02% {
    transform: translateX(-100%);
  }
  46.69% {
    transform: translateX(-100%);
  }
  53.36% {
    transform: translateX(-133.33%);
  }
  60.03% {
    transform: translateX(-133.33%);
  }
  66.70% {
    transform: translateX(-166.66%);
  }
  73.37% {
    transform: translateX(-166.66%);
  }
  80.04% {
    transform: translateX(-200%);
  }
  86.71% {
    transform: translateX(-200%);
  }
  93.38% {
    transform: translateX(-233.33%);
  }
  100% {
    transform: translateX(-233.33%);
  }
}

/**-----------VIDEO LETTERING------------*/
#video_lettering_e{
	width: 100%;
	background-color: white;
	display: inherit;
}

/*------------INFO COM----------*/

.c_flex_info{
	display:grid;
	grid-template-columns: repeat(3, 1fr);
	grid-auto-rows: auto;
	margin:0%;
	margin-top:20px;
	margin-bottom:0px;
	gap:20px;
}

.tam_portrait{
	width: 100%;
	height: 100%;
}

/*---------CATALOGO---------*/
.estilo_titulos{
	font-family: "ravefull";
	color:#181818;
}

h1.estilo_titulos{
	font-size:3em;
	letter-spacing: 0.1em;

}

.contenedor_titulo_catalogo{
	background-color: white;
	text-align: center;
	margin:25%;
	margin-top: 5.125em;
	margin-bottom: 4.125em;
}

.grid_catalogo{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: auto;
	width: 100%;
}

.obj_negro{
	padding-top: 50px;
	background-color: #181818;
	height: auto;
	padding-bottom:25px;
	color:white;
}

.obj_blanco{
	padding-top: 50px;
	background-color: #fff;
	height: auto;
	padding-bottom:25px;
	color:#181818;
}
.img_obj{
	width: 100%;
	height: auto;
}
.ver_catalogo_c{
	width:100%;
	text-align: center;
}

.precio_obj{
	font-size: 4em;
	margin:0;
}
.precio_obj_ant{
		font-size: 2em;
		margin:0;
		text-decoration: line-through;
	}

.seccion_movil{
	display: none;
}

/*------------Contenedor Doble-------------------*/
.contenedor_doble{
	display:grid;
	grid-template-columns: repeat(1, 1fr);
	width:100%;
	grid-auto-rows: auto;
}
.img_obj_d{
	margin-left:36%;
	margin-top:100px;
	width: 30%;
	height: auto;
}
.formateado_d{
	margin-left:25%;
	margin-right: 25%;
	text-align: center;
	font-size: 2.6em;
	letter-spacing: 0.1em;
}

.letras3d{
	
}

/*-----------FLEX CAT----------*/
.contenedor_flex_cat{
	display:flex;
}


.contenedor_cat_visual{
	display:flex;
	flex-direction: column;
	width: 100%;
	text-align: center;
	margin-bottom: 45px;
}

.estilo_titulos_cat{
	font-family: "ravefull";
	color:#181818;
}

h1.estilo_titulos_cat{
	font-size:3.5em;
	letter-spacing: 0.1em;
	margin-top: 0;
}

.selector_cont{
	width: 84%;
	overflow: hidden;
	display: inline-block;
	background-color: white;
}

.selector_cont_m{
	width: 84%;
	overflow: hidden;
	display: none;
	background-color: white;
}

.contenedor_flecha{
	width:8%;
}

.flecha_i{
	position: relative;
	top:40%;
	transform: translateY(-50%);
	margin-left: 10%;
	margin-right: 30%;
	width: 60%;
	height: auto;
}
.flecha_d{
	position: relative;
	top:40%;
	transform: translateY(-50%);
	margin-left: 30%;
	margin-right: 10%;
	width: 60%;
	height: auto;
}

.c_s_d{
	width: 100%;
	display: flex;
}

.obj_selector{
	display: inline-block;
	width:16.4%;
	height:auto;
}
.img_selector{
	width: 100%;
	object-position: center;
}

.nombre_selector{
	text-align: center;
}
h2.nombre_selector{
	margin: 0;
}
.display_obj{
	width:150%;
	height: auto;
	transform: translateX(-33.4%);
	transition: transform 0.5s ease-in-out;
}
.display_obj_m{
	width:300%;
	height: auto;
	transform: translateX(-33.4%);
	transition: transform 1s ease-in-out;
}

/*------------FORMA DE ENVIO---------------*/
.contenedor_forma_envio{
	display:flex;
	margin-top: 20px;
}
.c_p{
	background-color: #181818;
	width: 100%;
	text-align: center;
}

.grid_envio{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-auto-rows: auto;
	margin:20px;
	margin-top: 10px;
}

.obj_envio{
	width: auto;
	height: auto;
	text-align: center;
	color: #f2f2f2;
}

.t_en{
	letter-spacing: 0.2em;
	height: 60px;
}

.img_obj_envio{
	width: 40%;
	height: auto;
}

.gif_cat{
	width: 27%;
	height: auto;
	object-fit: cover;
}

.contenedor_grid_btn{
	display: flex;
	flex-direction: column;
	width:78%;
	background-color: #181818;
}

.cont_btn{
	position:relative;
	width:100%;
	height: 100px;
}
.btn_shop{
	position:absolute;
	background: linear-gradient(#5CB8E4,#8758FF);
	color:black;
	width:250px;
	border-radius: 10px;
	text-align: center;
	left:50%;
	transform: translateX(-50%);
	height: auto;
}

.btn_shop:hover{
	cursor: pointer;
}

/*----------FOOTER------------*/
.footer_brand{
	width: 100%;
	height: 50px;
	position:relative;
	background-color: #181818;
}

.img_logo_black{
	margin:0;
	height: 20px;
	position:absolute;
	left:50%;
	top:50%;
	transform: translate(-50%,-50%);
}

footer{
	padding-top: 100px;
	padding-bottom: 100px;
	height: auto;
	width:100%;
}

.footer_flex{
	height: 100%;
	display: flex;
	width: 100%;
}

.columna_footer{
	padding:40px;
	height: calc(100% - 40px);
	flex:1;
}

.columna_footer_central{
	padding:40px;
	height: calc(100% - 80px);
	flex:2;
	text-align: center;
}

.logo_footer{
	width:70%;
	height: auto;
}

.columna_footer_d{
	text-align: right;
}

.catalogo_selector:hover{
	cursor: pointer;
}

.c_s_pointer:hover{
	cursor: pointer;
}


/*------------EXPOSITOR ROPA ----------------*/

.grid_ropa{
	margin-top: 10px;
	margin-left: 15px;
	margin-right: 15px;
	margin-bottom: 15px;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: auto;
	gap:10px;
}
.imagen_ropa_ex{
	position:relative;
}

.elemento_ropa:hover{
	cursor: pointer;
}
.over_image{
	position:absolute;
	top:0;
	left:0;
	opacity: 0;
	transition: opacity 0.2s ease-in-out;
}

.over_image:hover{
	opacity: 1;
}

.imagen_ex{
	width:100%;
	height: auto;
}


.c_texto_ropa{
	letter-spacing: 0.8px;
	color:#002611;
}
.c_texto_precio{
	letter-spacing: 0.8px;
	color:#002611;
}



/*------------RESPONSIVE-----------*/
@media screen and (min-width: 200px) and (max-width: 550px){
	.elemento_ropa:hover{
		cursor: initial;
	}
	.over_image:hover{
		opacity: 0;
	}
	.logo_centrado{
		display:none;
	}
	.grid_ropa{
		grid-template-columns: repeat(2, 1fr);
	}
		.cronometro{
		font-family: 'ravefull';
		font-size: 1.1em;
		color:white;
	}
	#dias{
		font-size: 3.5em;
	}
	#horas{
		font-size: 3.5em;
	}
	#minutos{
		font-size: 3.5em;
	}
	#video_lettering_e{
		display:none;
	}
	.btn_shop:hover{
			cursor: inherit;
	}
	.catalogo_selector:hover{
		cursor: inherit;
	}
	.columna_footer{
		text-align: center;
		padding:5px;
		height: auto;
		flex:1;
	}

	.columna_footer_central{
		padding:10px;
		height: auto;
		flex:1;
		text-align: center;
		min-width: 100px;
	}
	.columna_footer_central p{
		font-size: 0.7em;
	}
	.footer_flex{
		flex-direction: column;
	}
	footer{
		padding-top: 50px;
		padding-bottom: 50px;
		height: auto;
		width:100%;
	}
	.img_logo_black{
		width:20%;
		height: 10px
	}

	.footer_brand{
		width: 100%;
		height: 40px;
		position:relative;
		background-color: #181818;
	}


	.contenedor_grid_btn{
		width:100%;
	}
	.size_p{
		font-size: 1.5em;
	}
	.img_obj_envio{
		width: 25%;
		height: auto;
	}
	.obj_envio{
		margin-bottom: 20px;
	}
	.c_p{
		width:100%;
	}
	.t_en{
		letter-spacing: 0.2em;
		height: auto;
	}
	.grid_envio{
		display: grid;
		grid-template-columns: repeat(1, 1fr);
		grid-auto-rows: auto;
		margin:20px;
		margin-top: 10px;
	}

	h1.estilo_titulos_cat {
    font-size: 2.2em;
    letter-spacing: 0.1em;
    margin-top: 0;
    padding-left: 20px;
    padding-right: 20px;
	}
	.obj_selector{
		display: inline-block;
		width:16.3%;
		height:auto;
	}
	.selector_cont_m{
		display: inline-block;
		width: 100%;
	}
	.img_obj_d{
		margin-left:16%;
		margin-top:100px;
		width: 70%;
		height: auto;
	}
	.formateado_d{
		margin-left:15%;
		margin-right: 15%;
		text-align: center;
		font-size: 1.3em;
	}
	.seccion_escritorio{
		display:none;
	}
	.seccion_movil{
		display: inherit;
	}
	.contenedor_titulo_catalogo {
    background-color: white;
    text-align: center;
    margin: 5%;
    margin-top: 5.125em;
    margin-bottom: 4.125em;
	}
	.precio_obj{
		font-size: 3em;
		margin:0;
	}
	.precio_obj_ant{
		font-size: 1.5em;
		margin:0;
		text-decoration: line-through;
	}
	h1.estilo_titulos{
		font-size:1.9em;
		letter-spacing: 0.1em;
	}
	.grid_catalogo{
		grid-template-columns: repeat(2, 1fr);
	}
	.obj_negro{
	padding-top: 50px;
	background-color: #181818;
	height: 250px;
	}

	.obj_blanco{
		padding-top: 50px;
		background-color: #fff;
		height: 250px;
	}

	#video_banner_m{
		display:inherit;
	}

	#video_banner_e{
		display:none;
	}

	.logo_banner{
		width:95%;
		margin-top: 15px;
	}

	.c_logo_banner{
		width: 95%;
	}
	.subtitulo_banner{
		font-size: 0.45em;
	}

	header{
		position:relative;
	}

	.movil{
	display: inherit;
	}

	.escritorio{
		display: none;
	}

	.promo_titulo_banner{
		width: 100%;
		font-size: 0.85em;
		letter-spacing: 1.1px;
	}

	.c_banner{
		width: 100%;
		height: calc( 100% * 0,3645833)px;
	}

	/*---------TERMINOS POP UP-----------*/
	.terminos_pop_up{
		position: fixed;
		top:50%;
		left:50%;
		transform: translate(-50%, -50%);
		width: 70%;
		color:black;
		background-color: #5CB8E4;
		padding: 5%;
		z-index:10;
	}

	.c_banda_img {
    width: 200%;
    height: 20px;
	}

	.c_flex_info{
		display:grid;
		grid-template-columns: repeat(2, 1fr);
		grid-auto-rows: auto;
		margin:2%;
		margin-top:20px;
		margin-bottom:20px;
		gap:5px;
	}

	/*---------BANNER EXPOSITOR----------*/
.expositor_flex{
	display:flex;
	animation:desplazar_ex 12s linear infinite;
}
.img_expositor{
	width: 100%;
	height: auto;
}

@keyframes desplazar_ex {
  0% {
    transform: translateX(0%);
  }
  6.67% {
    transform: translateX(-0%);
  }
  13.34% {
    transform: translateX(-100%);
  }
  20.01% {
    transform: translateX(-100%);
  }
  26.68% {
    transform: translateX(-200%);
  }
  33.35% {
    transform: translateX(-200%);
  }
  40.02% {
    transform: translateX(-300%);
  }
  46.69% {
    transform: translateX(-300%);
  }
  53.36% {
    transform: translateX(-400%);
  }
  60.03% {
    transform: translateX(-400%);
  }
  66.70% {
    transform: translateX(-500%);
  }
  73.37% {
    transform: translateX(-500%);
  }
  80.04% {
    transform: translateX(-600%);
  }
  86.71% {
    transform: translateX(-600%);
  }
  93.38% {
    transform: translateX(-700%);
  }
  100% {
    transform: translateX(-700%);
  }
}

}