:root{
    --rojoIMEX: #AF2432;
	--rojoIMEXoscuro: #990000;
    --blanco: #fff;
    --negro: #000;
    --gris: rgb(128, 128, 128);
    --grisOscuro: rgb(80, 80, 80);
	--grisSecundario: #ccc; 
	--grisClaro: #e6e6e6;
	--azulIMEX: #0066FF;
	--azulIMEXoscuro: #5777BA;
	--dorado: #CC9933;
}

html {
    box-sizing: border-box;
    font-size: 62.5%; /* 1 rem = 10px */
}

*, *:before, *:after {
    box-sizing: inherit;
}

body{
	font-family: 'Nunito', sans-serif;
    font-size: 2rem;
    color: var(--gris);
	line-height: 2;
}

.font1{
	font-family: 'Nunito', sans-serif;
}

.font2{
	font-family: 'Supermercado One', cursive;
}

/* Globales */
.contenedor{
    width: min(90%, 120rem);
    margin: 0 auto;
}

.contenedor-2{
    width: min(90%, 100rem);
    margin: 0 auto;
}

.contenedor-3{
    width: min(90%, 140rem);
    margin: 0 auto;
}

@media (min-width: 768px) {
	.grid-olin{
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		column-gap: 3rem;
		margin: 3rem 0;
		border-bottom: none;
		align-items: center;
	}
}

.grid-texto{
	grid-column: 2/3;
	grid-row: 1/2;
}

.grid-img{
	grid-column: 1/2;
	grid-row: 1/2;
}

.margin{
	margin: 5rem 0;
}

.margin-top{
	margin-top: 5rem;
}

.margin-bottom{
	margin-bottom: 5rem;
}

.separador{
	border-bottom: 1px solid var(--grisSecundario);
	padding: 3rem 0;
}

/* li{
    list-style: none;
} */

a{
    text-decoration: none;
} 

h1{
    font-size: 4.8rem;
}

h2{
    font-size: 3.3rem;
}

h3{
    font-size: 2.4rem;
}

h1, h2, h3{
    line-height: 1.2;
	margin: 0;
}

img,
iframe{
    max-width: 100%;
  	display: block;
	/* margin: 10px auto 10px; */
}

/* Utilidades TEXTOS*/
.titulos{
	font-size: 2.8rem;
	/* font-weight: 400; */
    line-height: 4rem;
	color: var(--gris);
	padding: 1rem 1rem;
    margin: 0;
}

.subtitulos{
	font-size: 2.2rem;
	/* font-weight: 400; */
    line-height: 3rem;
	color: var(--gris);
	padding: 1rem 1rem;
    margin: 0;
}

.texto-parrafos{
	font-size: 1.8rem;
	/* font-weight: 400; */
    line-height: 3rem;
	color: var(--gris);
	padding: 1rem 1rem;
    margin: 0;
}

.subrayado{
	text-decoration: underline;
}

.resaltado{
	background-color: yellow;
}

.text-negro{
	color: var(--negro);
}

.text-blanco{
	color: var(--blanco);
}

span,
.titulo-rojo{
	color: var(--rojoIMEX);
}

.titulo-dorado{
	color: var(--dorado);
}

.bold{
	font-weight: 700;
}

.text-mayus{
	text-transform: uppercase;
}

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

.derecha{
	text-align: right;
}

.izquierda{
	text-align: left;
}

.justificado{
	text-align: justify;
}

@media (min-width: 768px) {
	.sangria{
		padding: 0 0 0 5rem;
	}
}

.sangria-lista{
	padding: 1rem 0 1rem 10rem;
}

/* Utilidades BOTONES*/
.boton{
	display: block;
	color: var(--blanco);
	background-color: var(--rojoIMEX);
	font-size: 1.8rem;
	/* font-weight: 700; */
	text-align: center;
	text-decoration: none;
	border-radius: 5px;
	grid-row: 2/3;
    padding: .4rem 4rem;
    text-transform: uppercase;
    font-weight: 600;
	transition: background-color .4s ease;
}

.boton:hover{
	color: var(--blanco);
	font-weight: 600;
	background-color: var(--grisOscuro);
	text-decoration: none;
}

.boton--secundario{
	display: block;
	color: var(--blanco);
	background-color: var(--rojoIMEX);
	font-size: 1.8rem;
	text-align: center;
	text-decoration: none;
	border-radius: 5px;
    padding: .2rem 2rem;
    font-weight: 700;
	transition: background-color .4s ease;
}

.boton--enviar{
	margin: 1rem 0;
}

.boton--enviar:hover,
.boton--secundario:hover{
	color: var(--rojoIMEX);
	background-color: var(--grisSecundario);
	text-decoration: none;
}

input{
	border: none;
}

/* Utilidades IMAGENES*/
.centrado{
	margin: 0 auto;
	display:block;
}

figcaption{
	font-size: 1rem;
	font-style: italic;
	font-weight: 700;
}

/* MENU PRINCIPAL (INDEX)*/
.header-imex{
    display: flex;
    flex-direction: column;
    justify-content:space-between;
	align-items: center;
	text-align: center;
    padding: 3rem 0;
}

@media (min-width: 768px) {
    .header-imex{
        flex-direction: row;
        align-items: center;
    }
}

.menu-principal{
    display: flex;
    flex-direction: column;
	align-items: center;
	text-align: center;
	z-index: 3;
}

@media (min-width: 768px) {
    .menu-principal{
        flex-direction: row;
        align-items: center;
        gap: 1.5rem;
	    /* z-index: 3; */
    }
}

.menu-texto{
    color: var(--rojoIMEX);
    font-size: 1.6rem;
    font-weight: 600;
}

.menu-texto:hover{
    color: var(--grisSecundario);
    text-decoration: underline;
}

.menu-activo{
    color: var(--grisSecundario);
    text-decoration: underline;
}

/* .fijo{
	position: fixed;
	width: 100%;
	background-color: var(--blanco);
	box-shadow: 0 .3rem .4rem var(--grisClaro);
} */

/* Botones Imagenes */
/* #tienda{
	min-height: 30px;
    min-width: 30px;
	background: url(../img/Boton_05a.png);
} */

/* #tienda:hover{
	background: url(../img/Boton_05b.png);
	transition: background-image .4s ease;
} */

#contacto{
	min-height: 30px;
    min-width: 30px;
	background: url(../img/Boton_06a.png);
}

#contacto:hover{
	background: url(../img/Boton_06b.png);
	transition: background-image .4s ease;
}

#idioma{
	min-height: 30px;
    min-width: 30px;
	background: url(../img/Boton_07a.png);
}

#idioma:hover{
	background: url(../img/Boton_07b.png);
	transition: background-image .4s ease;
}

#idioma-sp{
	min-height: 30px;
    min-width: 30px;
	background: url(../img/Boton_08a.png);
}

#idioma-sp:hover{
	background: url(../img/Boton_08b.png);
	transition: background-image .4s ease;
}

.link{
	color: var(--azulIMEX);
}

.link:hover{
	color: var(--azulIMEXoscuro);
	text-decoration: underline;
	transition: background-color .4s ease;
}

/* MENU DESPLEGABLE */
.dropbtn {
    /* background-color: #4CAF50; */
    /* color: white; */
    /* padding: 1.6rem; */
    font-size: 1.6rem;
    border: none;
    cursor: pointer;
}

.dropdown {
    position: relative;
    display: inline-block;
	z-index: 2;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 20rem;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
    /* color: var(--rojoIMEX); */
    padding: .8rem 1.6rem;
    /* text-decoration: none; */
    display: block;
    text-align: left;
}

.dropdown-content a:hover {
    background-color: var(--rojoIMEX);
    color: var(--blanco);
    transition: 0.5s;
}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {
    /* background-color: #3e8e41; */
    color: var(--grisClaro);
    text-decoration: underline;
}

/* Portada IMEX */
.portada-imex{
	background-image: url(../img/IMEX_portada.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center left;
	height: 60rem;
    z-index: -1;
}

@media (min-width: 768px) {
	.portada-imex{
		display: flex;
		background-position: right;
		align-items: center;
	}
}

.portada-grid{
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 0 5rem;
}

@media (min-width: 768px) {
	.portada-grid{
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		column-gap: 40rem;
	}
}

@media (max-width: 767px) {
	.overlay{
		position: absolute;
		width: 100%;
		height: 60rem;
		background: rgba(0, 0, 0, .6);
		z-index: 1;
	}
}

.mes-olin{
	padding-bottom: 5rem;
}

@media (min-width: 768px) {
	.mes-olin{
		width: 70%;
		grid-column: 2/3;
		padding-bottom: 5rem;
		margin:10px auto;
		display:block;
	}
}

.contenido-portada{
	margin-top: 20rem;
	margin-right: 5rem;
	margin-left: 5rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

@media (min-width: 768px) {
	.contenido-portada{
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		column-gap: 4rem;
		margin: 0;
	}
}

.bienvenida-1{
	font-size: 6rem;
	text-align: center;
	color: var(--blanco);
}

.bienvenida-2{
	font-size: 5rem;
	font-weight: 400;
	grid-column: 2/3;
	text-align: center;
	color: var(--blanco);
}

@media (min-width: 768px) {
	.bienvenida-1{
		grid-column: 2/3;
		text-align: center;
		color: var(--blanco);
	}
}

@media (min-width: 768px) {
	.bienvenida-2{
		grid-column: 2/3;
		text-align: center;
		color: var(--blanco);
	}
}

/* Intro IMEX */
/* Especialidad */
.especialidad{
	padding: 7rem 0;
}

.controla-mejor{
	text-align: center;
	padding:5rem 0;
	/* padding-top: 2rem; */
}

@media (min-width: 768px) {
	.controla-mejor{
		padding: 2rem 0;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 3rem;
	}
	
	.controla-mejor__gif{
		margin: 0;
	}
}

/* Plataformas */
.apps{
	background-image: url(../img/background.jpg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	background-attachment: fixed;
	padding: 20rem 0;
}

@media (min-width: 768px) {
	.apps-contenido{
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		column-gap: 3rem;
	}
}

.icono{
	padding: 3rem 0;
}

.apps-icono{
	/* background-color: var(--blanco); */
	border-radius: 1rem;
}

.apps-consultores{
	grid-column: 1/2;
	grid-row: 1/2;
}

.apps-mixtli{
	grid-column: 2/3;
	grid-row: 1/2;
}

.apps-mixtli-2{
	grid-column: 3/4;
	grid-row: 1/2;
}

.apps-fracc{
	grid-column: 4/5;
	grid-row: 1/2;
}

/* MIXTLI */

/* Nube */
.nube{
	padding: 10rem 0;
	/* border-bottom: 1px solid var(--grisSecundario); */
}

/* Efemeride */
.efemeride{
	padding-top: 7rem;
}

/* Video YouTube */
.video-youtube{
	display: flex;
	justify-content: center;
	padding: 5rem 0;
}

iframe{
	margin: 0;
}

/* Ofrecemos */
.ofrecemos{
	background-image: url(../img/background2.jpg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	background-attachment: fixed;
	padding: 20rem 0;
}

@media (min-width: 768px) {
	.contenido-ofrecemos{
		display: flex;
		align-items: center;
		column-gap: 2rem;
	}
}

.ofrecemos__img{
	width: 100%;
}

/* Que hace OLIN por tu empresa */
.empresa{
	padding: 10rem 0;
	/* border-bottom: 1px solid var(--grisSecundario); */
}

@media (min-width: 768px) {
	.empresa{
		margin-bottom: 5rem;
	}
}

@media (min-width: 768px) {
	.contenido-empresa{
		display: flex;
		align-items: center;
		column-gap: 2rem;
	}
}

.empresa__img{
	width: 100%;
}

/* Intuitivo */
.intuitivo{
	background-image: url(../img/background3.jpg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	background-attachment: fixed;
	padding: 20rem 0;
}

@media (min-width: 768px) {
	.intuitivo-grid{
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		place-items: center;
		column-gap: 2rem;
	}
}

/* Caracteristicas */
@media (min-width: 768px) {
	.caracteristicas-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		column-gap: 5rem;
	}
}

.caracteristicas{
	background-color: var(--grisClaro);
	padding: 5rem 0;
	margin-bottom: 5rem;
}

/* Opiniones */
.opiniones{
	margin-bottom: 5rem;
	/* background-color: var(--grisClaro); */
}

@media (min-width: 768px) {
	.opiniones-grid{
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		/* align-items: center; */
		column-gap: 3rem;
	}
}

.opiniones-texto{
	background-color: var(--grisClaro);
}

.cita{
	font-weight: 700;
	color: var(--rojoIMEX);
	text-align: right;
	font-style: italic;
}

.save-time{
	grid-column: 2/4;
}

.save-money{
	grid-column: 1/3;
}

/* Nuestros Usuarios */
.usuarios{
	margin-bottom: 5rem;
}

/* FOOTER */
.footer{
	background-color: var(--grisClaro);
	padding: 2rem 0;
    line-height: 1.5;
	font-weight: 400;
	font-size: 1.6rem;
	color: var(--gris);
	text-align: center;
	/* border-top: 1px solid var(--gris); */
}

.boton-footer{
	color: var(--rojoIMEX);
	font-weight: 700;
}

.imex-logo{
	padding-bottom: 1rem;
}

/* SAAS*/
.saas{
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	background-image: url(../img/spec_saas.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	height: 40rem;
	margin-bottom: 3rem;
	place-items: center;
}

.saas-titulo{
	text-transform: uppercase;
	font-size: 4rem;
	font-weight: 800;
	color: var(--blanco);
	grid-column: 2/4;
}

@media (min-width: 768px) {
	.saas-grid{
		display: grid;
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 768px) {
	.saas-img{
		grid-column: 2/3;
		grid-row: 1/3;
		padding-left: 2rem;
		padding-bottom: 2rem;
	}
}

@media (min-width: 768px) {
	.saas-proveedor{
		grid-column: 1/2;
		grid-row: 1/3;
		padding-right: 2rem;
		padding-bottom: 2rem;
	}
}

.saas-contenido{
	margin-bottom: 5rem;
}

/*IMEX */
@media (min-width: 768px) {
	.mision-vision{
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		column-gap: 2rem;
	}
}

/* SOFTWARE OLIN */
@media (min-width: 768px) {
	.grid-planes{
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		column-gap: 4rem;
	}
}

.planes-basico{
	background-color: var(--grisClaro);
	border-radius: 15px;
	padding: 0 1.5rem;
	margin-bottom: 5rem;
}
.planes-medio{
	background-color: var(--grisClaro);
	border-radius: 15px;
	padding: 0 1.5rem;
	margin-bottom: 5rem;
}

.planes-avanzado{
	background-color: var(--grisClaro);
	border-radius: 15px 15px 0 0;
	padding: 0 1.5rem;
	margin-bottom: -3rem;
	padding-bottom: 2rem;
}

.plan-avanzado{
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--blanco);
}
.plan-avanzado:last-of-type{
	border:none
}

@media (min-width: 768px) {
	.plan-avanzado{
		border: none;
	}
}

@media (min-width: 768px) {
	.grid-avanzado{
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		column-gap: 2rem;
		background-color: var(--grisClaro);
		border-radius: 15px;
		padding: 0 1.5rem;
	}	
}

.grid-avanzado{
	background-color: var(--grisClaro);
	border-radius: 15px;
	padding: 0 1.5rem;
}	

.plan-avanzado__imagen{
	padding: 3rem 0 3rem 0;
}

/* BIOMETRIA */
.contenedor-botones{
	display: flex;
	justify-content: center;
	column-gap: 1rem;
}

.boton-folleto{
	padding-top: 3rem;
	display: flex;
	justify-content: center;
}

/* NOMINA */
/* Caracteristicas NOMINA*/
@media (min-width: 768px) {
	.nomina-grid{
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		column-gap: 3rem;
	}
}
.caracteristicas-nomina{
	background-color: var(--grisClaro);
	padding: 2rem 0;
}

/* APLICACIONES */
@media (min-width: 768px) {
	.aplicaciones-grid{
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		column-gap: 1rem;
	}
}

.aplicaciones{
	padding: 5rem 0;
}

/* SOLICITUD DE INFORMACION */
.formulario{
    background-image: linear-gradient(to top, var(--grisSecundario) 0%, var(--blanco));
    margin: -3rem auto 0 auto;
    width: 95%;
    padding: 5rem;
    border-radius: 5px;
}

.campo{
    display: flex;
    margin-bottom: 2rem;
}

.campo__label{
    flex: 0 0 22rem;
    text-align: right;
	font-size: 1.8rem;
    padding-right: 2rem;
}

.campo__field{
    flex: 1;
    border: 1px solid var(--grisClaro);
	border-radius: 5px;
}

.campo__field--textarea{
    height: 20rem;
}

select,
textarea{
	border: 1px solid var(--grisClaro);
	border-radius: 5px;
}

input{
	cursor: pointer;
}

/* DESCARGAS-GALERÍA */
.galeria,
.descargas{
	background-color: var(--grisClaro);
	border-radius: 10px;
	padding: 1rem 0 1rem 0;
}

.descargas__enlace{
	text-align: center;
	text-decoration: none;
	font-size: 1.4rem;
	font-weight: 700;
	color: var(--rojoIMEXoscuro);
	transition: .4s;
}

.descargas__enlace:hover{
	color: var(--dorado);
	text-decoration: none;
}

.descargas__imagen{
	border: 2px solid var(--gris);
	border-radius: 10px;
}

.grid-galeria{
	display: grid;
	column-gap: 1rem;
	row-gap: 1rem;
	padding-bottom: 3rem;
	grid-template-columns: repeat(2, 1fr);
}

.grid-descargas{
	display: grid;
	column-gap: 1rem;
	row-gap: 1rem;
	padding-bottom: 3rem;
	/* grid-template-columns: repeat(2, 1fr); */
}

@media (min-width: 768px) {
	.grid-descargas{
		display: grid;
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.grid-descargas{
		display: grid;
		grid-template-columns: repeat(5, 1fr);
	}
}

/* GALERÍA */
.secciones__galeria{
	background-color: var(--dorado);
	color: var(--blanco);
	font-family: 'Nunito', sans-serif;
	margin-top: 3rem;
	font-size: 1.8rem;
	font-weight: 700;
	padding: 1rem 2rem;
	margin-bottom: 1rem;
}
.galeria__imagen{
	border: 2px solid var(--rojoIMEX);
	border-radius: 10px;
}

@media (min-width: 768px) {
	.grid-galeria,
	.grid-descargas{
		display: grid;
		grid-template-columns: repeat(4, 1fr);
	}
}

/* CONTACTO */
.contacto-list{
	list-style: none;
}

@media (min-width: 768px) {
	.contacto-grid{
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		column-gap: 3rem;
		margin: 3rem 0;
		border-bottom: none;
	}
}

.boton-contacto{
	grid-column: 2/3;
}

.mapa{
	grid-column: 2/3;
	grid-row: 1/3;
}

.maps{
	padding-bottom: 3rem;
}

.facebook{
	display: flex;
	justify-content: center;
	align-items: center;
	column-gap: 1rem;
}

.facebook__texto{
	font-size: 1.8rem;
	text-align: justify;
	color: var(--azulIMEX);
}

/* DARK MODE BOTON*/
.dark-mode-boton{
	width: 2.5rem;
	margin-top: 3rem;
	margin-bottom: 2rem;
}

.dark-mode-boton:hover{
	cursor: pointer;
}

/* DARK MODE*/
.dark-mode{
    background-color: var(--rojoIMEXoscuro);
}

.txt-amedirh{
	text-align: center;
	padding-bottom: 2rem;
	color: var(--rojoIMEX);
}

.logo-amedirh{
	width: 70%;
	margin: 0 auto;
	padding-bottom: 5rem;
}

/* AVISO DE PRIVACIDAD */
.privacidad{
	padding: 5rem 0;
	margin: 0 auto;
	max-width: 90%;
}

@media (min-width: 768px){
	.privacidad{
		max-width: 55%;
	}
}

.privacidad__texto{
	color: var(--negro);
	line-height: 1.6;
	text-align: justify;
	/* font-size: 1.8rem; */
}

.privacidad__list{
	color: var(--negro);
	line-height: 1.6;
}

.clausulas__list{
	color: var(--negro);
	line-height: 1.6;
	list-style: none;
	text-align: center;
}

.privacidad__clausula{
	color: var(--rojoIMEXoscuro);
}

.firma{
	padding: 5rem 0;
}

.privacidad__firma{
	color: var(--negro);
	line-height: 1;
	text-align: center;
}

.privacidad__notas{
	font-size: 1.4rem;
	line-height: 1;
}

.privacidad__bold{
	color: var(--negro);
	font-weight: 700;
}