/*Estilos por defecto*/
*{
	margin: 0;
	padding: 0;
	font-family: "Montserrat", "Arial";	
	box-sizing: border-box;
}

a {
	text-decoration: none; /*Eliminar subrayado de enlaces*/
	color: white;	
}

li {
	list-style: none;
}

p {
	line-height: 2; /*Establecer espacio entre linea de texto*/
	font-size: 18px;
}

main {
	padding-top: 80px;
	padding-inline: 1em;
	/*Usar flex y column para centrar el contenido verticalemente*/
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2rem;
	color: white;
	width: 100%;
}

/*Estilos para la sección de texto*/
::selection {
	background-color: #013A63;
  color: white;
  font-weight: bold;
}

/*Fondo principal con efecto de desenfoque */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	/*Agrega una imagen de fondo centrada y reescalada con un color oscuro*/
	background: linear-gradient(
		rgba(0, 0, 0, 0.5), 
		rgba(0, 0, 0, 0.5)), 
		url("../img/fondo.jpg") center/cover no-repeat;	
	filter: blur(3px); /*Efecto blur para desenfoque*/
	z-index: -1; /*Enviar el contenido hasta atrás*/
}


/*Estilos barra de navegacíón*/
.barra-navegacion {
	position: fixed; /*Barra de navegación siempre en el mismo lugar*/	
	width: calc(100% - 2em); /*Función css para hacer calculos*/
	margin-top: 10px;
	margin-inline: 1em;		
	background-color: rgba(250, 250, 250, 0.2);
	backdrop-filter: blur(10px); /*Efecto de desenfoque de los elementos que esten detrás*/
	border-radius: 9999px;
	padding-block: 10px;
	z-index: 40; /*El elemento se sobrepone de los demás*/
}

.barra-navegacion nav ul {
	margin: 1rem auto;
	display: flex;
	justify-content: center;
	gap: 4em;		
	font-weight: bold;
	font-size: 20px;	
}

.barra-navegacion nav ul li a:hover {
	border-bottom: 2px solid;	
	
}

/*Estilos sección principal*/
.seccion-principal {
	margin-top: 3em;	
	border-radius: .5em;		
	padding: 1em 1em 0 1em;
	max-width: 900px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1em;
}

.seccion-principal h1 {
	width: fit-content;
	padding-inline: 2em;
	text-align: center;
	background-color: rgba(0, 0, 0, 0.5);	
	padding-block: 1em;
	border-radius: 10px;
}

.seccion-principal img {
	width: calc(100% + 2em);
}

/*Estilos secciones secundarias*/

.seccion-secundaria {
	width: 100%;	
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2em;

}

.seccion-secundaria h2 {
 width: 100%;
	text-align: center;
	background-color: rgba(250, 250, 250, 0.2);
	padding-block: 1em;
}

.descripcion {
	max-width: 800px;
}

/*Estilos tarjetas vehiculos*/

.contenedor-vehiculos {
	display: grid;
	grid-template-columns: 1fr 1fr; /*2 columnas de 50% de ancho*/
	gap: 2em; /*Espacio entre elementos de la cuadricula*/
}

.tarjeta-vehiculo {
	position: relative;	
	overflow: hidden;
	/*distancia de visualización para efecto 3d*/
	perspective: 1000px;
	/*Transición para todas las propiedades con efecto de elasticidad*/
	transition: all 0.9s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.tarjeta-vehiculo:hover {
	transform: scale(1.05);
	box-shadow: 6px 6px 20px rgba(250, 250, 250, 0.5);
}

.tarjeta-vehiculo img {
	border-radius: 10px;
	transition: all 0.9s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.tarjeta-vehiculo:hover img {
	scale: 0;
}

.tarjeta-vehiculo-contenido {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	padding: 2em;
	background-color: white;
  	/*transform: rotateX(-90deg); /*Oculta elemento*/
	transform: rotateX(-90deg) translateZ(0); /* Fuerza GPU compositing */
	will-change: transform; /*Le dice al navegar optimiza el elemento para su renderizado*/
  	backface-visibility: hidden; /* También puede ayudar oculta la parte trasera de un elemento */
  	transform-origin: bottom; /*Origen de rotación*/
  	transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);

}

.tarjeta-vehiculo:hover .tarjeta-vehiculo-contenido {
	transform: rotateX(0deg);/*Muestra el elemento*/
}

.tarjeta-vehiculo-titulo {
	margin: 0;
	font-size: 24px;
	color: #333;
	font-weight: 700;

}

.tarjeta-vehiculo-descripcion {
	margin: 10px 0 0;
	font-size: 14px;
	color: #777;
  line-height: 1.4;
}

/*Estilos tarjetas proveedores*/

.contenedor-proveedores {	
	display: grid;
	grid-template-columns: repeat(3, 1fr); /*Tres columnas de 33% de ancho*/
	gap: 3em;	
	max-width: 1000px;
	padding-block: 4rem;
}

.proveedor-tarjeta {	
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1em;
}

.proveedor-tarjeta-imagen {
	width: 100%;
	height: auto;
	object-fit: contain;
	background-color: rgba(250, 250, 250, 0.1);
	border-radius: 9999px;
	animation: flotar 2s infinite;
}

@keyframes flotar {
	0% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-10px);
	}
	100% {
		transform: translateY(0);
	}
}


.proveedor-tarjeta-descripcion {
	border-top: 1em solid rgba(250, 250, 250, 0.5);
	padding-top: 0.5em;
}

.contenedor-proveedores-motos {
	display: grid;
	grid-template-columns: repeat(6, 1fr); /*Cuadricula de 6 columnas*/
	gap: 5em;
	margin: 1rem 0;
	max-width: 800px;
}

.proveedor-moto-tarjeta {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1em;
}

.tercio-ancho {
	grid-column: span 2;
}

.mitad-ancho {
	grid-column: span 3;
}

.proveedor-moto-tarjeta-imagen {
	width: 250px;
	height: auto;
	object-fit: contain;
	background-color: rgba(250, 250, 250, 0.1);
	border: solid 1px white;
	border-radius: 10px;
	transition: all 0.3s ease-in-out;
}

.proveedor-moto-tarjeta-imagen:hover {
	transform: translateY(-10px);
	backdrop-filter: blur(10px);
	background-color: rgba(250, 250, 250, 0.5);	
	cursor: pointer;
}

.proveedor-moto-tarjeta-descripcion {
	padding: 0 1em;	
	border-radius: 5px;
	text-align: center;
	background-color: white;
	color: black;
	line-height: normal;
}


/*Estilos pie de página*/
footer {
	width: 100%;
	padding: 2em;
	background-color: black;
	color: white;
}