/* ------------------------------------------ estilos universales ------------------------------------------ */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

:root {
	--e-global-color-900: #8498a700;

	/* paleta de colores de valor primario */
	--cantera-primario-50: #fefce8;
	--cantera-primario-100: #fdf8c4;
	--cantera-primario-200: #fcee8c;
	--cantera-primario-300: #fae15b;
	--cantera-primario-400: #f6c919;
	--cantera-primario-500: #e6b10c;
	--cantera-primario-600: #c68908;
	--cantera-primario-700: #9e610a;
	--cantera-primario-800: #834d10;
	--cantera-primario-900: #6f3f14;
	--cantera-primario-950: #412007;

	--cantera-primario-50-transparent: #fefce896;

	/* paleta de colores de valor secundario */
	--cantera-secundario-50: #f5f5f6;
	--cantera-secundario-100: #e6e6e7;
	--cantera-secundario-200: #cfd0d2;
	--cantera-secundario-300: #aeafb2;
	--cantera-secundario-400: #85868b;
	--cantera-secundario-500: #6a6b70;
	--cantera-secundario-600: #5a5b60;
	--cantera-secundario-700: #4d4d51;
	--cantera-secundario-800: #434347;
	--cantera-secundario-900: #3b3b3e;
	--cantera-secundario-950: #262628;

	/* paleta de colores de valor terciario */
	--cantera-terciario-50: #fef2f2;
	--cantera-terciario-100: #fee2e2;
	--cantera-terciario-200: #fecaca;
	--cantera-terciario-300: #fca5a5;
	--cantera-terciario-400: #f97070;
	--cantera-terciario-500: #f04343;
	--cantera-terciario-600: #df3434;
	--cantera-terciario-700: #ba1b1b;
	--cantera-terciario-800: #991b1b;
	--cantera-terciario-900: #7f1d1d;
	--cantera-terciario-950: #450a0a;

	/* fuentes */
	--fuente-texto: 'Noto Sans', sans-serif;
	--fuente-titulos: 'Libre Baskerville', serif;
}

html {
	font-size: 62.5%;
}

body {
	font-family: var(--fuente-texto) !important;
	font-size: 18px;
	line-height: 2;
	background-color: var(--cantera-secundario-950);
	color: var(--cantera-secundario-50);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--fuente-titulos) !important;
	font-size: 20px;
	font-weight: bold;
	margin: 0;
}

ul li {
	list-style: none;
}

ol,
ul {
	padding: 0;
}

a {
	text-decoration: none;
	color: var(--cantera-primario-950);
	display: inline-block;
}

@media (hover: hover) {
	.picture__img:hover {
		transform: scale(1.1) !important;
		transition: all 0.5s;
		position: relative;
		z-index: 10000;
	}
}

/* ------------------------------------------ utilidades ------------------------------------------ */

.min-width-content {
	min-width: 32rem;
}

.titulo {
	font-size: 4rem;
	text-transform: capitalize;
	color: var(--cantera-primario-400);
}

.text-center {
	text-align: center;
}

.overflow-hidden {
	overflow: hidden;
}

/* ------------------------------------------ estilos principales ------------------------------------------ */

/* navegador */
.navegador__contenedor__hero {
	background-color: var(--cantera-secundario-950);
}
.navegador__contenedor {
	position: sticky;
	padding: 1rem;
	background-color: var(--e-global-color-400);
}

.navegador__contenedor {
	padding-inline: 1rem;
	text-align: center;
}

.navegador__list {
	display: flex;
	justify-content: center;
	gap: 1rem;
	font-weight: bold;
	text-transform: capitalize;
	text-wrap: nowrap;
	align-items: center;
}

.navegador__list li a {
	padding: 0.5rem;
	color: var(--cantera-secundario-100);
}

.active {
	border-bottom: 1px solid var(--cantera-primario-200);
}

/* seccion de banner */
.contenerdor__banner__hero {
	height: 100vh;
	background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../img/banner_mineria.webp');
	background-size: cover;
	background-position: center;

	display: flex;
	justify-content: center;
	align-items: center;
}

.titulo__banner {
	color: var(--cantera-primario-400);
	text-align: center;
	font-size: 5rem;
	font-weight: bold;
	text-transform: uppercase;
}

.titulo__baner__hero h3 {
	font-size: 2rem;
	text-transform: capitalize;
	color: var(--cantera-primario-50);
}

.titulo__baner__hero h3 > span {
	color: var(--cantera-terciario-50);
	text-transform: uppercase;
}

.navegador__logo {
	width: 11rem;
	height: 11rem;
}

/* sobre mi */

.contenedor__card {
	padding: 1rem;
}

.contenedor__card:nth-child(2) {
	flex-direction: column-reverse;
}

.card__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0.5rem;
	aspect-ratio: 16/9;
}

.contenedor__abunt-me__hero {
	display: flex;
	justify-content: center;
}

.contenedor__abunt-me {
	width: 90%;
}

.card__sobremi h3 {
	font-size: 4rem;
	text-transform: capitalize;
	color: var(--cantera-primario-400);
}

.card__sobremi p {
	font-size: 2.5rem;
	color: var(--cantera-primario-50);
}

/* contenedor de valores */
.contenedor__valores__hero > div > h3 {
	font-size: 4rem;
	text-transform: capitalize;
	color: var(--cantera-primario-400);
	text-align: center;
}

.contenedor__valores__hero {
	padding: 1rem;
	background-color: var(--cantera-secundario-700);
}

.burbuja__valores {
	background-color: var(--cantera-secundario-950);
	height: 15rem;
	border-radius: 100%;
	width: 15rem;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

.burbuja__valores img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.burbuja__valores__img__contenedor {
	width: 7rem;
}
.contendor__burbuja {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.contendor__burbuja p {
	font-size: 2.5rem;
	font-weight: bold;
	text-align: center;
	color: var(--cantera-primario-50);
	max-width: 25rem;
}

.contendor__burbuja:nth-child(1) .burbuja__valores > .burbuja__valores__img__contenedor {
	width: 9rem;
}

.contenedor__valores__burbujas {
	display: flex;
	flex-wrap: wrap;
	row-gap: 2rem;
	justify-content: space-around;
	padding: 2rem;
}
/* prodcutos empresa */
.contenedor__producto__hero {
	background-image: url('../img/background_productos_movil.svg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	display: flex;
	justify-content: center;
}

.contenedor__producto {
	overflow: hidden;
	display: grid;
	grid-template-columns: 1fr;
	gap: 3rem;
	justify-content: center;
	align-items: center;
	width: 90%;
}

.productos__contenedor__info {
	border-radius: 0.5rem;
	padding: 2rem;
}

.productos__contenedor__info ul li {
	list-style: outside;
	margin-left: 5rem;
	font-size: 2.1rem;
}

.prodcuto__contenedor__image {
	position: relative;
}

.prodcuto__contenedor__image div > img {
	object-fit: cover;
	aspect-ratio: 1/1;
	width: 100%;
	border-radius: 0.5rem;
}

.prodcuto__contenedor__image {
	padding-top: 2rem;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(3, 1fr);
}

.img__uno__producto,
.img__dos__producto {
	width: 100%;
	max-width: 40rem;
	height: 100%;
	object-fit: cover;
	border-radius: 0.5rem;
}

.prodcuto__contenedor__image div:nth-child(1) {
	grid-column: 1 / 3;
	grid-row: 1 / 3;
}

.prodcuto__contenedor__image div:nth-child(2) {
	grid-column: 2 / 4;
	grid-row: 2/ 4;
}

/* galeria cantera */
.contenedor__galeria__cantera {
	padding: 5rem;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
	grid-template-rows: repeat(auto-fit, minmax(30rem, 1fr));
	gap: 2rem;
	width: 90%;
	padding-top: 3rem;
}

.picture__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0.5rem;
	aspect-ratio: 1 / 1;
}

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

/* mapa ubicacion */
.contenedor__mapa__hero {
	background-color: var(--cantera-secundario-900);
}
.contenedor__mapa iframe {
	width: 100%;
}

.contenedor__mapa div:nth-child(2) {
	display: flex;
	justify-content: center;
	text-align: center;
}

.contenedor__mapa div:nth-child(2) p {
	width: 90%;
}

.contenedor__mapa a {
	color: var(--cantera-primario-400);
	text-decoration: underline;
}

/* footer cantera */
.contenedor__footer__hero {
	background-color: #151516;
	padding-top: 5rem;
	padding-bottom: 5rem;
	display: flex;
	justify-content: center;
}

.contenedor__footer__hero .copy {
	padding: 2rem;
	border: 1px solid var(--cantera-primario-50);
	border-radius: 4rem;
	text-align: center;
}