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

*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	text-decoration: none;
	list-style: none;
}
body{
	font-family: "Bebas Neue", sans-serif;
	background-color: #09080d;
}
/*ESTILO DE FUENTE PARA LOS PARRAFOS DEL PROYECTO*/

p{
	font-family: Arial, Helvetica, sans-serif;
}

/*MAXIMA RESOLUCION*/

.container{
	max-width: 1200px;
	margin: 0 auto;
}

/*BARRA DE NAVEGACION Y MENU*/

.header{
	background-image:linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)),url(../img/Fondos/Liverpool.jpg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	min-height: 70vh;
	display: flex;
	align-items: center;
}

/*PARA UBICAR EL MENU EN LA PARTE SUPERIOR*/

.menu{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

/*ESTILOS PARA LA PARTE DE LOGO*/

.Logo{
	font-family: "Shadows Into Light", cursive;
	color: #fffdfc;
	font-size: 25px;
	padding: 0 20px;
}

/*PARTES DEL MENU*/

/*UBICARLO A LA IZQUIERDA*/

.menu {
	margin: 0 30px;
}
.menu .navbar ul li{
	position: relative;
	float: left;
}

/*ESTILOS DE LAS PARTES DEL MENU*/

.menu .navbar ul li a{
	font-size: 20px;
	padding: 20px;
	color: #fffdfc ;
	display: block;
}

/*EFECTO AL PASAR EL MOUSE*/

.menu .navbar ul li a:hover{
	color: #b7975b;
}

/* OCULTAR EL CHECKBOX PARA CUANDO PRECIONE EL LOGO*/

#menu{
	display: none;
}

/*TAMAÑO DEL LOGO O ICONO*/

.menu-icono{
	width: 25px;	
}

/*ESTILO DE LA FLECHA O PUNTERO DEL MOUSE*/

.menu label{
	cursor: pointer;
	display: none;
}

/*ANCHO QUE ABARCA EL TEXTO DE LA PRIMERA SECCION*/

.header-content{
	padding: 100px 50px;
}
.header-txt{
	width: 60%;
}

/*ESTILOS APLICADOS AL H1 DE LA PRIMERA SECCION*/

.header-txt h1{
	font-size: 75px;
	line-height: 70px;
	color: #fefcfb;
	margin-bottom: 15px;
}

/*ESTILOS APLICADOS AL PARRAFO DE LA PRIMERA SECCION*/ 

.header-txt p{
	font-size: 18px;
	color: #e0e0e0;
	margin-bottom: 35px;
}

/*ESTILOS APLICADOS AL BOTON DE LA PRIMERA SECCION*/

.btn-1{
	display: inline-block;
	padding: 8px 18px;
	background-color: #b7975b;
	color: #fefcfb;
	border-radius: 10px;
	font-size: 20px;
}

/*EFECTO AL PASAR EL PUNTERO O FLECHA DEL MOUSE DEL BOTON DE LA PRIMERA SECCION*/

.btn-1:hover{
	background-color: #a08450;
	transition: 0.4s;
	box-shadow: 0 0 5px #a08450, 0 0 25px #a08450;

}
/*PARRAFO DE LA SECCION JUGADORES*/
h4, h2, small, a{
	margin: 0;
	padding: 0;
}
a{
	text-decoration: none;
}

.jugadores{
	width: 100%;
}
.carousel{
	width: 100%;
	margin: 0px 0px;
}


.carousel h2{
	margin-top: 50px;
	font-size: 45px;
	line-height: 38px;
	padding-bottom: 50px;
	opacity: .9;
	text-transform: uppercase;
	font-weight: 600;
	text-align: center;
	color: #fff;

}
.carrusel-list{
	position: relative;
	display: flex;
	align-items: center;
	width: fit-content;
	height: 304px;
	padding: 10px 0;
	margin: 0px auto;
	max-width: 95vw;
	overflow: hidden;
}

.carrusel-track{
	position: relative;
	top: 0;
	left: 0;
	display: flex;
	justify-content: center;
	transition: .5s ease-in-out;
}
.carrusel{
	position: relative;
	width: 210px;
	float: left;
	padding: 0 18px;
	box-sizing: border-box;
	display: flex;
	height: 100%;
}
.carrusel h4{
	position: absolute;
	z-index: 1;
	font-size: 25px;
	line-height: 23px;
	color: #fff;
	padding: 15px;
}
.carrusel h4 small{
	font-size: 18x;
	display: block;

}
.carrusel a img{
	object-fit: cover;
	height: 300px;
	width: 200px;
	border-radius: 15px;
	box-shadow: 0 2px 5px 0 rgb(0, 0, 0, 0.5);
	transition: .3s ease-in-out;
}

.carrusel-arrow{
	border-radius: 30px;
	background-color: #fff;
	position: absolute;
	z-index: 4;
	width: 48px;
	height: 48px;
	text-align: center;
	border: 0;
	cursor: pointer;
}
.carrusel-arrow:focus{
	outline: 0;
}

.carrusel-arrow svg{
	width: 12px;
	height: 100%;
	color: rgb(0, 0, 0, 0.7);
}
.carrusel-prec{
	left: 0px;
}
.carrusel-next{
	right: 0px;
}

/*TODA LA SECCION SERVICIOS*/

.servicios{
	padding: 65px 0;
	text-align: center;

}

/*TEXTO DE LA SECCION SERVICIOS*/

.servicios-txt{
	display: flex;
	flex-direction: column;
	align-items: center;
}


/*ESTILOS A TODOS LOS H2 DEL PROYECTO*/

h2{
	font-size: 70px;
	color: #e0e0e0;
	margin-bottom: 15px;
}

/*PARRAFO DE LA SECCION SERVICIOS*/

hr{
	border: 1px solid #cf2d3a;
	width: 130px;
}

.servicios-txt p{
	font-size: 18px;
	color: #e0e0e0;
	padding: 20px 150px;

}

.servicios-txt h3{
	text-align: center;
	font-size: 30px;
	color: #e0e0e0;
	margin-bottom: 15px;
}

.servicios-grupo{
	display: flex;
	justify-content: space-between;
	margin: 45px 0;
}

.servicio-1{
	background-color:#1f1f1f ;
	padding: 35px 25px;
	margin: 0 10px;
	border-radius: 15px;
}

.servicio-1 img{
	width: 25px;
	margin: 15px;
	border-color: #cf2d3a ;
	height: 50px;
	width: 50px;
}

.servicio-1 h3{
	font-size: 25px;
	color: #ffffff;
}

.servicio-1 p{
	color: #ffffff;
}
.servicio-1 a{
	color: #cf2d3a;
	font-size: 16px;
}

.btn-servicios{
	display: inline-block;
	padding: 8px 18px;
	background-color: #b7975b;
	color: #fefcfb;
	border-radius: 10px;
	font-size: 20px;
}

.btn-servicios:hover{
	background-color: #a08450;
	transition: 0.4s;
	box-shadow: 0 0 5px #a08450, 0 0 25px #a08450;
}
.ligas{
	display: flex;
	flex-direction: column;
	align-items: center;
}
.ligas h1{
	font-size:70px;
	line-height: 110px;
	color: #e0e0e0;
	margin-bottom: 15px;
}

.ligas p{
	font-size: 18px;
	color: #e0e0e0;
	padding: 20px 150px;
}
.ligas h3{
	text-align: center;
	font-size: 30px;
	color: #e0e0e0;
	margin-bottom: 15px;
	margin-top: 20px;
}
/*SECCION DE PRODUCTOS*/

.camisa{
	display: flex;
	justify-content: space-between;
	margin-top: 20px;
}

/*PRODUCTO 1*/

.camisa-1{
	background-image:linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)),url(../img/Fondos/Premier.jpg);
	background-position: center center;	
	background-repeat: no-repeat;
	background-size: cover;
	height: 500px;
	width: 100%;
	padding: 25px;
}

/*PRODUCTO2*/

.camisa-2{
	background-image:linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)),url(../img/Fondos/LaLiga.jpg);
	background-position: center center;	
	background-repeat: no-repeat;
	background-size: cover;
	height: 500px;
	width: 100%;
	padding: 25px;
}

/*PRODUCTO 3*/

.camisa-3{
	background-image:linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)),url(../img/Fondos/Bundesliga.jpg);
	background-position: center center;	
	background-repeat: no-repeat;
	background-size: cover;
	height: 500px;
	width: 100%;
	padding: 25px;
}

/*PRODUCTO 4*/

.camisa-4{
	background-image:linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)),url(../img/Fondos/Seriea.jpg);
	background-position: center center;	
	background-repeat: no-repeat;
	background-size: cover;
	height: 500px;
	width: 100%;
	padding: 25px;
}

/*PRODUCTO 5*/

.camisa-5{
	background-image:linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)),url(../img/Fondos/Retro.jpg);
	background-position: center center;	
	background-repeat: no-repeat;
	background-size: cover;
	height: 500px;
	width: 100%;
	padding: 25px;
}
.btn-camisa{
	display: inline-block;
	padding: 9px 19px;
	background-color: #818181;
	color: #fefcfb;
	border-radius: 9px;
	font-size: 17px;
	align-items: end;
}

.btn-camisa:hover{
	background-color: #cf2d3a;
	transition: 0.4s;
	box-shadow: 0 0 5px #cf2d3a, 0 0 25px #cf2d3a;
}

.btn3{
	top: 400px;
	position: absolute;
	align-items: center;
}
/*ESTILOS PARA LAS LETRAS DE LA SECCION DE PRODUCTOS*/

.txt{
	position: relative;
}

/*NUMERO DE PRODUCTOS*/

.txt span{
	color: #b7975b;
	font-size: 35px;
}

/*H3 DE LAS LETRAS O "NOMBRE DEL PRODUCTO" DE LA SECCION DE PRODUCTOS*/

.txt h3{
	color: #e0e0e0;
	font-size: 35px;
}



/*PARTE DEL FOOTER */
.footer h4{
	font-size: 20px;
	text-align: center;
	color: #ffffff;
	margin-top: 50px;
}

.footer h1{
	margin-top: 30px;
}
.footer-form{
	margin-top: 30px;
}
.wrapper{
	display: inline-flex;
	list-style: none;
}

.wrapper a{
	list-style: none;
	text-decoration: none;
	color: #111;
}
.wrapper .icon{
	position: relative;
	background: #ffffff;
	border-radius: 50%;
	padding: 15px;
	margin: 10px;
	width: 50px;
	height: 50px;
	font-size: 18px;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
	cursor: pointer;
	transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.wrapper .tooltip{
	position: absolute;
	top: 0;
	font-size: 14px;
	background: #ffffff;
	color: #ffffff;
	padding: 5px 8px;
	border-radius: 5px;
	box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
	opacity: 0;
	pointer-events: none;
	transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55) ;
}

.wrapper .tooltip::before{
	position: absolute;
	content: "";
	height: 8px;
	width: 8px;
	background: #ffffff;
	bottom: -3px;
	left: 50%;
	transform: translate(-50%) rotate(45deg);
	transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.wrapper .icon:hover .tooltip{
	top: -45px;
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.wrapper .icon:hover span,
.wrapper .icon:hover .tooltip{
	text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.1);
}

.wrapper .facebook:hover,
.wrapper .facebook:hover .tooltip,
.wrapper .facebook:hover .tooltip:before{
	background: #1877F2;
	color: #ffffff;
}

.wrapper .twitter:hover,
.wrapper .twitter:hover .tooltip,
.wrapper .twitter:hover .tooltip:before{
	background: #1DA1F2;
	color: #ffffff;
}

.wrapper .instagram:hover,
.wrapper .instagram:hover .tooltip,
.wrapper .instagram:hover .tooltip:before{
	background: #E4405F;
	color: #ffffff;
}

.wrapper .whatsapp:hover,
.wrapper .whatsapp:hover .tooltip,
.wrapper .whatsapp:hover .tooltip:before{
	background: #00bb2d;
	color: #ffffff;
}


/*CODIGOS PARA LA RESOLUCION DE CELULAR*/

/*CUANDO LA PANTALLA LLEGUE A ESTA RESOLUCION ENTONCES SERVIRA*/
@media(max-width:912px){
	.header-txt{
		width: 70%;
	}
	.header-txt h1{
		font-size: 60px;
		line-height: 80px;
	}
	.header-content{
		padding: 100px 30px;
	}
}
@media(max-width:700px) {
	.menu{
		padding: 30px;
	}
	/*MENU HAMBURGESA*/
	.menu label {
		display: initial;
	}
	/*UBICAR LA BARRA DE NAVEGACION EN EL MENU HAMBURGESA*/
	.menu .navbar{
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background-color: #09080d;
		display: none;
	}

	/*MENU O BARRA DE NAVEGACION*/
	.menu .navbar ul li{
		width: 100%;
	}

	/*PARA DESPLEGAR O HACER FUNCIONAL EL MENU HAMBURGUESA AL HACER CLICK*/
	#menu:checked ~ .navbar{
		display: initial;
	}

	/*PRIMERA SECCION*/
	.header{
		min-height: 0vh;
	}

	/*CONTENIDO DE LA PRIMERA SECCION*/
	.header-content{
		padding: 100px 30px;
	}

	/*H1 Y PARRAFO DE LA PRIMERA SECCION*/ 
	.header-txt{
		width: 100%;
		text-align: center;
	}

	/*TITULO O H1 DE LA PRIMERA SECCION*/ 
	.header-txt h1{
		font-size: 70px;
		line-height: 80px;
	}

	/*TODA LA SECCION DE SERVICIOS*/
	.servicios{
		padding: 0 30px 30px 30px;
		flex-direction: column;
		margin-top: 30px;
	}
	.servicios-txt{
		width: 100%;
		text-align: center;
		margin-bottom: 25px;
	}

	.servicios-txt p{
		padding: 0;
	}

	.servicios-grupo{
		flex-direction: column;
		margin: 0;
	}

	.servicio-1{
		margin: 0 0 20px 0;
	}

	.ligas{
		width: 100%;
		text-align: center;
		margin-bottom: 25px;
		padding: 0 30px 30px 30px;
		flex-direction: column;
		margin-top: 30px;
	}

	.ligas p{
		padding: 0;
	}

		/*UBICACION EN COLUMNA DE TODOS LOS PRODUCTOS*/
	.camisa{
		flex-direction: column;
	}

	.footer-form{
		margin-top: 30px;
	}

	.wrapper{
		margin-top: 30px;
	}
	.carousel{
		margin: 0px;
		padding: 0px;
	}
}

/* ======================================================
   BARRA DE BÚSQUEDA GLOBAL - Index
   ====================================================== */

#globalSearchWrapper {
	position: relative;
	width: 100%;
	max-width: 620px;
	margin-top: 28px;
}

.global-search-bar {
	display: flex;
	align-items: center;
	background: rgba(255, 255, 255, 0.10);
	border: 2px solid rgba(183, 151, 91, 0.5);
	border-radius: 50px;
	padding: 12px 22px;
	gap: 12px;
	backdrop-filter: blur(14px);
	transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.global-search-bar:focus-within {
	border-color: #b7975b;
	box-shadow: 0 0 30px rgba(183, 151, 91, 0.4);
}

.global-search-bar .gs-icon {
	color: #b7975b;
	font-size: 18px;
	flex-shrink: 0;
	transition: transform 0.3s ease;
}

.global-search-bar:focus-within .gs-icon {
	transform: scale(1.15) rotate(-5deg);
}

#globalSearch {
	flex: 1;
	background: transparent;
	border: none;
	outline: none;
	color: #ffffff;
	font-family: "Bebas Neue", sans-serif;
	font-size: 20px;
	letter-spacing: 1.5px;
	min-width: 0;
}

#globalSearch::placeholder {
	color: rgba(255, 255, 255, 0.45);
	font-size: 18px;
}

#globalClear {
	background: rgba(183, 151, 91, 0.2);
	border: none;
	color: #b7975b;
	font-size: 14px;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	cursor: pointer;
	display: none;
	align-items: center;
	justify-content: center;
	transition: background 0.3s ease, transform 0.2s ease;
	flex-shrink: 0;
}

#globalClear:hover {
	background: #b7975b;
	color: #09080d;
	transform: rotate(90deg);
}

/* Dropdown de resultados */
#searchDropdown {
	display: none;
	position: absolute;
	top: calc(100% + 10px);
	left: 0;
	right: 0;
	background: #1a1a2a;
	border: 1px solid rgba(183, 151, 91, 0.3);
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 20px 60px rgba(0,0,0,0.6);
	z-index: 9999;
	animation: dropdownOpen 0.2s ease;
}

@keyframes dropdownOpen {
	from { opacity: 0; transform: translateY(-8px); }
	to   { opacity: 1; transform: translateY(0);    }
}

.search-result-item {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 13px 20px;
	color: #e0e0e0;
	text-decoration: none;
	border-bottom: 1px solid rgba(255,255,255,0.05);
	transition: background 0.15s ease;
}

.search-result-item:last-child {
	border-bottom: none;
}

.search-result-item:hover,
.search-result-item.active {
	background: rgba(183, 151, 91, 0.15);
}

.search-result-icon {
	font-size: 22px;
	flex-shrink: 0;
	width: 32px;
	text-align: center;
}

.search-result-info {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.search-result-name {
	font-family: "Bebas Neue", sans-serif;
	font-size: 16px;
	color: #ffffff;
	letter-spacing: 0.5px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.search-result-name mark {
	background: transparent;
	color: #b7975b;
	font-style: normal;
}

.search-result-liga {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: rgba(255,255,255,0.45);
	text-transform: uppercase;
	letter-spacing: 1px;
}

.search-result-precio {
	font-family: "Bebas Neue", sans-serif;
	font-size: 17px;
	color: #b7975b;
	flex-shrink: 0;
}

.search-no-result {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 20px;
	color: rgba(255,255,255,0.45);
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
}

.search-no-result i {
	font-size: 20px;
	color: rgba(183, 151, 91, 0.5);
}

.search-dropdown-footer {
	padding: 10px 20px;
	background: rgba(0,0,0,0.3);
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: rgba(255,255,255,0.35);
	border-top: 1px solid rgba(255,255,255,0.05);
}

.search-dropdown-footer a {
	color: #b7975b;
	text-decoration: underline;
}

/* Responsive */
@media (max-width: 700px) {
	#globalSearchWrapper {
		max-width: 100%;
	}
	.global-search-bar {
		padding: 10px 16px;
	}
	#globalSearch {
		font-size: 16px;
	}
}
/* ====================================================== */