@charset "utf-8";
@import url("../css/variables.css");
@import url("../css/columnas.css");
@import url("../css/header.css");
@import url("../css/buscador.css");
@import url("../css/tablas.css");
@import url("../css/boton-flotante.css");
@import url("../css/contacto.css");
@import url("../css/footer.css");
@import url("../iconos-web/iconos-web.css");

main {
	width: var(--ancho);
	max-width: var(--ancho-max);
	margin: 0 auto;
	padding: 0;
}
.contenedor {
	width: var(--ancho);
	max-width: var(--ancho-max);
	margin: 0 auto;
	overflow: hidden;
	padding: 25px 0;
	/* padding: var(--padding-contenedor); */
	margin-bottom: 20px;
}

.cta {
	display: inline-block;
	background: var(--color2);
	justify-self: center;
	color: var(--color4);
	text-decoration: none;
	padding: 10px 30px;
	border-radius: 32px;
	transition: all .5s ease-out;
	font-size: 18pt;
	text-transform: uppercase;
	letter-spacing: 1px;
	box-shadow: 0px 0px 15px 2px var(--color4);
}

.cta:hover {
	background: var(--color2);
}

.contenedor__iconos {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 20px;
}

.contenedor__iconos .item__iconos {
	width: 23%;
	text-align: center;
	background: var(--color6);
	border-radius: 15px;
	padding: 20px;
}

.contenedor__iconos .icon {
	width: 150px;
	height: 150px;
	border: 5px solid var(--color1);
	border-radius: 50%;
	background: var(--color5);
}

.contenedor__iconos h3 {
	text-transform: uppercase;
	font-weight: 800;
	line-height: 100%;
}

.contenedor__iconos h4 {
	font-weight: normal;
	line-height: 100%;
}
.contenedor__item {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border: var(--bordes);
	border-radius: 10px;
}

.contenedor__item ul li {
	margin: 0;
	padding: 0;
	margin-left: 20px;
}

.contenedor__item img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;

}

.contenedor__foto {
	width: 100%;
	height: 100%;
	position: relative;
	background: var(--color6);
	padding: 10px;
	border-radius: 10px 0 0 10px;

}

.contenedor__foto .titulo {
	position: absolute;
	top: 30px;
	left: 20px;
	font-size: 30pt;
	line-height: 100%;
	color: var(--color1);
	text-shadow: 2px 2px 2px var(--color4);
	text-transform: uppercase;
	font-weight: 300;
	/* text-align: right; */
	background: var(--color4);
	border-radius: 15px;
	padding: 3px 10px;
}

.contenedor__foto .titulo span {
	font-weight: 800;
}

.contenedor__foto .titulo::before {
	content: "";
	width: 20px;
	height: 20px;
	background: var(--color1);
	position: absolute;
	/* left: -27px; */
	top: -25px;
	right: 0;
}

.titulos {
	font-size: 30pt;
	line-height: 100%;
	color: var(--color1);
	text-shadow: 2px 2px 2px var(--color4);
	text-transform: uppercase;
	font-weight: 300;
	text-align: left;
	background: var(--color4);
	border-radius: 15px;
	padding: 3px 0;
}


.titulos span {
 	font-weight: 800;
}
.titulos__secciones {
	color: var(--color1);
	text-align: center;
	font-weight: 600;
	margin: 0;
	padding: 15px 0;
}

.subtitulos {
	text-transform: uppercase;
	margin: 10px 0;
	font-weight: 500;
}

.filete__corto {
	width: 50px;
	height: 10px;
	background: var(--color5);
	margin: 20px 0;
}
.precio {
	display: inline-block;
	background: var(--color4);
	font-weight: bold;
	color: var(--color1);
	margin: 10px 0 0;
	padding: 5px 10px;
	border-radius: 15px;
}
.boton {
	display: block;
	color: var(--color4);
	background: var(--color1);
	font-weight: bold;
	margin: 10px 0 0;
	padding: 5px 10px;
	border-radius: 15px;
	border: 1px solid var(--color1);
}
.boton:hover {
	color: var(--color2);
	background: var(--color4);
	border: 1px solid var(--color1);

}

.margen {
	padding: 0 20px;
}

.boton-wsapp {
	width: 50px;
	height: 50px;
	font-size: 20pt;
	line-height: 2.5;
	background: var(--color-whatsapp);
	color: var(--color4);
	position: fixed;
	bottom: 15px;
	left: 15px;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
	transition: all 0.3s ease-in-out;
	box-shadow: var(--sombra);
}

.boton-wsapp:hover {
	background: var(--color2);
}

/*   HASTA   */

@media (max-width:800px) {

	.contenedor__iconos .item__iconos {
		width: 20%;
	}

	.contenedor__iconos .icon {
		/* width: 100px; */
	}

	.contenedor__item {
		flex-direction: column;
	}

}

/*   HASTA   */

@media (max-width:420px) {
	.contenedor__iconos .item__iconos {
		width: 100%;
	}

}