@charset "UTF-8";

@import "header.css";
@import "footer.css";
@import "home.css";
@import "form.css";
@import "checkbox.css";

/* fonts */

@import url('https://fonts.googleapis.com/css2?family=Sofia+Sans+Condensed:wght@300;500;700&display=swap');

/* CSS Document */

html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; scroll-behavior: smooth; }

body {
	margin: 0;
	padding: 0;

	background: white;

	font-family: var(--font-family);
	font-size: 18px;
	line-height: 100%;
	font-weight: 300;
	text-align: left;
	color: var(--gray);

	hyphens: auto;
	word-break: normal;
}

:root {
	--width: 90%;
	--max-width: 1500px;

	--font-family: 'Sofia Sans Condensed', sans-serif;
	--companycolor: #07A9C8;
	--gray: #54595A;
  }

::selection {
	color: white;
	background: var(--companycolor);
}

/* tools and behaviors */

img { border: 0; }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--companycolor); text-decoration: none; }
a:active, a:focus { outline: 0; }

a, a:hover, img, header, .menu-icon span, .services span, header div, logo, nav, input { transition: .5s; }

hr {
	height: 25px;

	border: none;
}

.load-hidden { visibility: hidden; }

/* titles */

h1 {
	margin: 0 0 20px 0;

	font-size: 300%;
	line-height: 100%;
	text-align: left;
	text-transform: uppercase;
	color: var(--companycolor);
}

h2 {
	margin: 0 0 10px 0;

	font-size: 220%;
	line-height: 100%;
	text-transform: uppercase;
	color: var(--companycolor);
}

h3 {
	margin: 0 0 5px 0;

	font-size: 160%;
	font-weight: 500;
	line-height: 100%;
	text-transform: uppercase;
	color: var(--gray);
}

h4 {
	margin: 0 0 5px 0;

	font-size: 130%;
	font-weight: 500;
	line-height: 100%;
	text-transform: uppercase;
	color: var(--gray);
}

h5 {
	margin: 0 0 15px 0;
	padding: 0 0 15px 0;

	border-bottom: 1px solid var(--companycolor);

	font-size: 120%;
	line-height: 100%;
	font-weight: bold;
	line-height: 100%;
	color: var(--companycolor);
}

/* layout */

main {
	margin: 100px auto;

	width: var(--width); max-width: var(--max-width);
}

intro {
	display: block;

	margin-bottom: 50px;
	padding: 30px 0 30px 30px;

	max-width: 600px;

	border-left: 1px solid var(--companycolor);

	font-weight: 500;
	text-align: justify;
	color: black;
}

intro > a {
	display: block;

	margin-top: 30px;

	font-size: 85%;
	font-weight: 300;
	line-height: 100%;
	letter-spacing: 2px;
	text-transform: uppercase;
}

double {
	display: grid;
	grid-template-columns: auto 50%;
	align-items: center;
	gap: 10%;
}

three div:nth-of-type(1) { grid-area: first; }
three div:nth-of-type(2) { grid-area: second; }
three div:nth-of-type(3) { grid-area: last; }

three {
	display: grid;
	grid-template-areas: 'first second last';
	gap: 100px;
}

three img {
	display: block;

	margin-bottom: 40px;

	width: 100%;
	height: 100px;

	box-shadow: 0 0 30px gainsboro;
	object-fit: cover;
}

.bullet {
	display: flex;
	flex-direction: column;
	gap: 30px;

	margin: 0;
	padding: 0;
}

.bullet li { list-style: none; }

/* services */

services-list {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 10px 50px;
	
	font-size: 200%;
	font-weight: 500;
	line-height: 100%;
	text-transform: uppercase;
}

services-list a {
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;

	padding-left: 60px;

	min-height: 100px;

	background-image: url(../img/home/credito-simple-icon.png);
	background-size: auto 40px;
	background-position: 0 50%;
	background-repeat: no-repeat;
}

services-list a:nth-child(1) { background-image: url(../img/home/credito-simple-icon.png); }
services-list a:nth-child(2) { background-image: url(../img/home/credito-simple-cuenta-corriente-icon.png); }
services-list a:nth-child(3) { background-image: url(../img/home/arrendamiento-financiero-icon.png); }

services-list span { font-size: 50%; font-weight: 300; line-height: 100%; text-transform: none; }

/* map */

#map {
	height: 550px;

	border-radius: 20px;
	box-shadow: 0 0 30px gainsboro;
}

/* UNE */

.une ul {
	display: grid;
	grid-template-columns: auto auto auto auto auto auto;

	margin: 0;
	padding: 0;

	border: 1px solid var(--companycolor);
}

.une ul li {
	display: flex;
	flex-direction: column;

	border-right: 1px solid var(--companycolor);
}

.une ul li:last-of-type { border-right: none; }

.une ul li span {
	display: flex;
	align-items: center;
	justify-content: center;

	padding: 30px 10px;

	width: calc(100% - 20px);

	font-size: 90%;
	text-align: center;
}

.une ul li span:first-of-type {
	background-color: var(--companycolor);
	border-right: 1px solid white;

	padding: 0 10px;

	height: 50px;

	font-size: 70%;
	line-height: 100%;
	color: white;
}

.une ul li:last-of-type span:first-of-type { border-right: none; }

@media screen and (orientation: portrait) and (max-width: 768px), (orientation: landscape) and (max-width: 1024px) {
	main {
		margin: 50px auto;
	}

	double {
		grid-template-columns: 100%;
		gap: 50px;
	}
	
	three {
		grid-template-areas:
			'first'
			'second'
			'last'
		;
		gap: 50px;
	}

	/* une */

	.une ul { grid-template-columns: auto; }
	.une ul li { border-right: none; }
	.une ul li span { font-size: 100%; }
	.une ul li span:first-of-type { border-right: none; height: auto; font-size: 100%; }
}

/* aviso privacidad */

.aviso-privacidad {
	padding: 0;
}

.aviso-privacidad > li {
	list-style: none;

	margin-bottom: 40px;
}

.aviso-privacidad li > ul, .aviso-privacidad li > ol { margin: 10px 0 0 0; }
.aviso-privacidad li > ul li, .aviso-privacidad li > ol li { margin: 0 0 5px 0; }

.aviso-privacidad li > ul { list-style-type: disc; }

.aviso-privacidad li > ol.lower-roman { list-style-type: lower-roman; }
.aviso-privacidad li > ol.upper-roman { list-style-type: upper-roman; }
.aviso-privacidad li > ol.lower-latin { list-style-type: lower-latin; }
.aviso-privacidad li > ol.decimal { list-style-type: decimal; }