@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,600;1,300;1,600&display=swap');

:root {
	--page-w: 75.5rem;

	--fon-t: "Poppins", sans-serif;
	--fon-h: "Poppins", sans-serif;

	--sca-t: 1rem;
	--sca-h: 1rem;
	--sca-lh: 1.1em;
	--sca-mar: 1rem;
	--sca-pad: 2.5rem;

	--ratio: .3125;

	--fon-w1: 300;
	--fon-w5: 300;
	--fon-w7: 600;
	--fon-w9: 600;

	--col-dar: #000;
	--col-dar-op25: #111;
	--col-bg: #fff;
	--col-lig: #f6f6f6;
	--col-sep: #2BB0E5;
	--col-pri: #4064BF;
	--col-pri-op75: #4064BFBF;
	--col-pri-bg: #4064BF;
	--col-acc: #2BB0E5;
	--col-acc-bg: #2BB0E5;

	--rad-s: .25rem;
	--rad-m: .25rem;
	--rad-l: .25rem;
	--rad-bt: .25rem;

	--sha-s: none;
	--sha-m: none;
	--sha-l: none;
	--sha-i: inset 0 .125rem .25rem 0 var(--col-dar-op25);

	--ani-f: all 500ms cubic-bezier(.7,0,.3,1);
}

.header {
	color: var(--col-bg);
	background: var(--col-pri-bg);
}
.branding {
	position: relative;
}
.branding img {
    height: calc(var(--sca-t)* 2.125);
    margin: 0;
    transition: var(--ani-f);
}
.branding img + img {
	opacity: 0;
	position: absolute;
	left: -.25rem;
	top: -1rem;
	height: calc(100% + 2rem);
}
.branding.change img {
	opacity: 0;
}
.branding.change img + img {
	opacity: 1;
}
.header .menu li {
	margin-left: 0;
}
.header a,
.header a.bt {
	font-size: .875rem;
}
.header ul li a:hover {
	color: var(--col-acc);
}
.header a.bt {
	padding: 0 1rem;
	background: var(--col-bg);
	color: var(--col-pri);
}
.header a.bt.bt-g {
	background: var(--col-pri);
	color: var(--col-bg);
	box-shadow: inset 0 0 0 1px currentColor;
}
.header ul li a.bt:hover {
	background: var(--col-acc);
	box-shadow: none;
}
.featured.section {
	background-color: var(--col-bg);
	background-size: auto 65%;
	background-position: 90% 50%;
	background-repeat: no-repeat;
}
.featured .content {
	margin: 0;
	width: 75%;
	max-width: 35rem;
	text-align: left;
}
.featured .content h1 {
	font-size: calc(var(--sca-t) * 4.25);
	font-weight: 300;
	color: var(--col-pri);
	font-style: italic;
}
.featured .content p {
	text-wrap: balance;
	font-weight: 300;
}

.main h2, .main h3, .main h4 {
	color: var(--col-pri);
}
.main h2 {
	font-size: calc(var(--sca-t)*3);
	font-style: italic;
}
.featured h1 + p {
}
.main h2 + p, .main p.emph {
	font-size: calc(var(--sca-t)* 1.25);
	color: var(--col-acc);
}
.pill {
	padding: 1.5rem 1.625rem;
	background: #fff;
	box-shadow: 0 .5rem .5rem -.375rem rgba(0,0,0,.1);
	border-radius: 1rem;
}
.pill + .pill {
	margin-top: 2rem;
}
.pill *:last-child {
	margin-bottom: 0;
}
.pill > .icon {
	margin-top: -2rem;
}

#servicios {
	background-color: #eee;
	background-image: url('../images/fondo-mensajeria.svg'), url('../images/fondo-transporte.svg'), url('../images/fondo-almacenamiento.svg');
	background-position: 100% -10%, 0% 65%, 100% 110%;
	background-size: 70% auto, 70% auto, 70% auto;
	background-repeat: no-repeat, no-repeat, no-repeat;
}
#servicios .row .row .col {
	vertical-align: top;

}
#servicios .icon {
	display: block;
	height: 3.5rem;
}
#servicios .row + .row h5 {
	position: relative;
	font-weight: 300;
}
#servicios .row + .row h5.pill {
	padding-top: 1rem;
	padding-bottom: 1rem;
}
#servicios .row + .row h5.pill + .pill {
	margin-top: 1rem;
}
#servicios h5 {
	position: relative;
}
#servicios h5 .icon {
	position: absolute;
	left: 1.5rem;
	top: -.375rem;
	margin: 0;
	display: none;
}
#servicios div.pill {
	position: relative;
	padding-left: 2rem;
}
#servicios .pill:before {
	content: '';
	position: absolute;
	left: .5rem;
	top: .75rem;
	bottom: .75rem;
	width: .375rem;
	background: var(--col-acc);
	border-radius: .75rem;
}

#ecommerce h5,
#ecommerce h5 + p {
	padding-left: 1.375rem;
	position: relative;
}
#ecommerce h5:before,
#ecommerce h5 + p:before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: .375rem;
	background: var(--col-acc);
	border-radius: .75rem;
}
#ecommerce h5:before {
	bottom: -1rem;
}

.main h6 {
	color: var(--col-acc);
	margin-bottom: 2rem;
}
.brands {
	font-size: 0;
	text-align: center;
	white-space: normal;
	text-wrap: balance;
}
.brands div {
	display: inline-block;
	max-width: 30%;
	height: 4rem;
	vertical-align: top;
	margin: 1rem;
}
.brands div img {
	display: block;
	width: auto;
	max-width: 100%;
	height: 100%;
	object-fit: contain;
	margin: 0;
}

#partners .col3 a {
	display: block;
	background: #fff;
	box-shadow: 0 .25rem 1rem -.375rem rgba(0,0,0,.2);
	border-radius: 1rem;
	transition: var(--ani-f);
}
#partners .col3 a:hover {
	box-shadow: 0 .75rem 1.5rem -.375rem rgba(0,0,0,.2);
}
#partners .col3 a img {
	display: block;
	width: 100%;
}
#partners h4 {
	margin-top: 4rem;
}
#partners .brands div {
	height: 5rem;
}

.accordion.pill {
	border: none;
	background: #2bb0e533;
	box-shadow: none;
	margin: 0;
}
.accordion.pill + .accordion.pill {
	margin-top: .5rem;
}
.accordion > a:after {
	right: 0rem;
	font-weight: bold;
	color: var(--col-acc);
}

#contacto h5 {
	margin-bottom: 1rem;
}
#contacto p i {
	width: 2rem;
	text-align: center;
	margin-left: -.25rem;
	color: var(--col-acc);
}
.footer {
	color: #fff;
	background: var(--col-acc);
}

@media (max-width: 960px) {
	.page {
		padding: 0 2.5rem;
	}
	.featured.section {
		background-position: 50% 15%;
		background-size: auto 40vh;
	}
	.featured .content {
		width: auto;
		top: 50vh;
		transform: none;
	}
	.featured .content h1 {
		font-size: 2.75rem;
	}
	.header ul a {
		color: var(--col-acc);
	}
	#servicios {
		background-position: 50% 10%, 50% 60%, 50% 90%;
		background-size: 200% auto, 200% auto, 200% auto;
	}
	#partners .col3 {
		display: inline-block;
		width: 50%;
	}
	#partners .col3 + .col3 {
		margin-top: 0;
	}
	#partners .col3 + .col3 + .col3 {
		margin-top: 2.5rem;
	}
}