/**
 * @copyright Nucliux Solutions
 * @author Nucliux Solutions (edoardo@nucliux.mx)
 * @version 1.0.0 (Septiembre 2026)
 * @since 1.0.0
 */

@import "reset.css?v=1.0.0";
@import "menu.css?v=1.0.0";
@import "inicio.css?v=1.0.0";
@import "nosotros.css?v=1.0.0";
@import "ingredientes.css?v=1.0.0";
@import "busqueda.css?v=1.0.0";
@import "servicios.css?v=1.0.0";
@import "calidad.css?v=1.0.0";
@import "industrias.css?v=1.0.0";
@import "porque.css?v=1.0.0";
@import "cta.css?v=1.0.0";
@import "contacto.css?v=1.0.0";
@import "footer.css?v=1.0.0";
@import "legal.css?v=1.0.0";
@import "animate.min.css";

:root{
	--color-profundo: #061C31;
	--color-azul: #082A49;
	--color-verde: #6F9F38;
	--color-fondo: #F5F7F8;
	--color-gris: #E5E9EA;
	--color-plata: #A7ADB1;
	--color-texto: #17202A;
	--color-blanco: #FFFFFF;
	--fuente: "Manrope", Arial, sans-serif;
	--fuente-boton: "Archivo", Arial, sans-serif;
}

html, body{
	background-color: var(--color-blanco);
	width: 100%;
	color: var(--color-texto);
	font-family: var(--fuente);
	font-weight: 500;
	font-size: 1.15vw;
}

.seccion__label{
	margin-bottom: 1.6vh;
	color: var(--color-verde);
	font-weight: 800;
	font-size: 0.95vw;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.seccion__label--claro{
	color: var(--color-verde);
}

.seccion__titulo{
	margin-bottom: 2.4vh;
	color: var(--color-azul);
	font-weight: 800;
	font-size: 2.6vw;
	line-height: 1.2;
}

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

.seccion__titulo--claro{
	color: var(--color-fondo);
}

.boton{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 1.4vh 1.8vw;
	border: 0.12vw solid transparent;
	border-radius: 0.4vw;
	font-family: var(--fuente-boton);
	font-weight: 400;
	font-size: 1vw;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.boton--primario{
	background-color: var(--color-azul);
	border-color: var(--color-azul);
	color: var(--color-fondo);
}

.boton--primario:hover{
	background-color: var(--color-profundo);
	border-color: var(--color-profundo);
}

.boton--secundario{
	background-color: transparent;
	border-color: var(--color-azul);
	color: var(--color-azul);
}

.boton--secundario:hover{
	background-color: var(--color-azul);
	color: var(--color-fondo);
}

.boton--acento{
	background-color: var(--color-verde);
	border-color: var(--color-verde);
	color: var(--color-blanco);
}

.boton--acento:hover{
	filter: brightness(0.92);
}

.boton--fantasma{
	background-color: transparent;
	border-color: var(--color-blanco);
	color: var(--color-blanco);
}

.boton--fantasma:hover{
	background-color: rgba(255,255,255,0.12);
}

/*Estilo para media pantalla
______________________________*/
@media only screen and (max-width: 1024px){
	html, body{
		font-size: 2.2vw;
	}

	.seccion__label{
		font-size: 2.2vw;
	}

	.seccion__titulo{
		font-size: 5.5vw;
	}

	.boton{
		padding: 1.6vh 4vw;
		border-radius: 0.8vw;
		font-size: 2.4vw;
		border-width: 0.2vw;
	}
}

/*Estilo para móviles
______________________________*/
@media only screen and (max-device-width: 465px) and (max-aspect-ratio: 13/9){
	html, body{
		font-size: 3.8vw;
	}

	.seccion__label{
		font-size: 3.4vw;
	}

	.seccion__titulo{
		font-size: 7vw;
	}

	.boton{
		width: 100%;
		padding: 1.8vh 4vw;
		border-radius: 1.2vw;
		font-size: 3.8vw;
	}
}