@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;600&display=swap');
:root {
	--caldera: #9B3426;
	--calderaoscuro: #7E2E1E;
	--verde: #D0E0C9;
	--verdeclaro: #E7F7E0;
	--fuente: "Work sans", sans-serif;
}




/****************************** ESTRUCTURA ******************************/
* {margin: 0; padding: 0; border: 0; outline: 0; list-style: none; text-decoration: none; box-sizing: border-box;}

html {position: relative;scroll-behavior: smooth;overflow-x: hidden;font-size: 20px;line-height: 1.4em;color: var(--caldera); background: url("images/textura.svg") no-repeat top left var(--verde); background-size: 120% auto; width: 100vw;  background-attachment: fixed;}
body, form, input, textarea, select {font-family: var(--fuente); font-size: 1rem;}
nav, a, a img, input, textarea {transition: .1s ease-out;}

html {scrollbar-color: var(--verde) var(--caldera);}
html::-webkit-scrollbar {width: 16px; background: var(--caldera);}
html::-webkit-scrollbar-thumb {background: var(--verde); border: 0;}
html::-webkit-scrollbar-thumb:hover {background: var(--verde);}




/****************************** HEADER ******************************/
nav {display: grid; grid-template-columns: 1fr 3fr 1fr; align-items: center; position: sticky; top: 0; left: 0; z-index: 100; width: 100%; padding: 10px 20px; line-height: 50px; color: var(--verde); background: var(--caldera);}
nav.scrolling {}
nav a {color: currentColor; white-space: nowrap;}
nav a:hover {opacity: .8;}

nav .logo {display: flex; justify-content: flex-start;}
nav .logo img {display: block; height: 50px;}

nav .menu {display: flex; justify-content: center; gap: 30px;}
nav .menu div {display: flex; gap: 2px; padding: 0 10px;}
nav .menu div a {padding: 0 10px; border-radius: 5px; color: var(--caldera); background: var(--verdeclaro); opacity: .33;}
nav .menu div a.activo {font-weight: bold; opacity: 1;}

nav .iconos {display: flex; justify-content: flex-end; gap: 15px;}
nav .iconos img {display: block; height: 32px; width: 32px;}
nav .iconos img:hover {transform: scale(.9);}




/****************************** MAIN ******************************/
header, section {padding: 150px max(calc(50% - 690px), 20px); position: relative;}

h1 {font-family: var(--fuentetitulo); font-size: 3.8rem; line-height: 1em; margin-bottom: 60px;}
h2 {font-family: var(--fuentetitulo); font-size: 3.0rem; line-height: 1.1em; margin-bottom: 60px;}
h3 {font-family: var(--fuentetitulo); font-size: 2.0rem; line-height: 1.1em; margin-bottom: 1.5rem;}
h4 {font-family: var(--fuentetitulo); font-size: 1.3rem; line-height: 1.1em; margin-bottom: 1rem;}
hr {border-top: 3px solid; margin-bottom: 20px; color: currentColor;}
p {margin-bottom: 30px; line-height: 1.3em;}
ul {margin-bottom: 40px;}
small {display: block; margin: 30px 0; font-size: small; line-height: normal;}
img {display: block; max-width: 100%; vertical-align: middle;}
a {color: currentColor;}

.top {min-height: calc(100vh - 70px); padding: 100px max(calc(50% - 690px), 20px); display: grid; grid-template-columns: 2fr 1fr 2fr; gap: 60px; align-items: center;}
.top div:first-child {grid-column: 2 / span 2; grid-row: 1; position: relative;}
.top div:first-child:after {display: block; content: " "; position: absolute; right: 0; top: 0; transform: translate(50%, -40%); z-index: 1000; width: 300px; height: 300px; background: url("images/iso_quijano_traductores.svg") no-repeat 0 0; background-size: contain; background-attachment: fixed;}
.top div:last-child {grid-column: 1 / span 2; grid-row: 1; position: relative; z-index: 10;}

.somos {display: grid; grid-template-columns: 2fr 1fr 2fr; gap: 100px; align-items: center;}
.somos img {grid-column: span 2; width: 100%; align-self: stretch; object-fit: cover; position: relative;}
.somos h2 {padding-bottom: 60px; border-bottom: 3px solid; margin-bottom: 30px;}

.filosofia {display: grid; min-height: 100vh; align-items: center; text-align: center; color: var(--verde); background: url("images/textura_alt.svg") no-repeat top left var(--calderaoscuro); background-size: 120% auto; background-attachment: fixed;}
.filosofia h2 {max-width: 16em; margin: 0 auto 60px;}
.filosofia h2 + p {font-size: larger; max-width: 43em; margin: 0 auto 60px;}
.filosofia > div {display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 50px;}
.filosofia img {margin-bottom: 30px; padding: 10%;}
.filosofia .boton {margin: 50px auto 0;}

.servicios {}
.servicios > div {display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 100px;}
.servicios > div > div {background: var(--verdeclaro);}
.servicios > div > div > div {padding: 50px;}
.servicios img {display: block; width: 100%; height: auto; margin: 0 auto;}
.servicios h2 {max-width: 12.5em; margin: 0 auto 100px; text-align: center;}
.servicios h3 {text-transform: uppercase; line-height: 1em; text-wrap: balance;}
.servicios h4 {margin-bottom: 0; font-size: 1rem; display: flex; justify-content: space-between; text-wrap: balance;}
.servicios h4:after {content: "▾";}
.servicios ul {margin: 0;}
.servicios ul li {border: 3px solid; padding: 20px; cursor: pointer;}
.servicios ul li:not(:first-child) {border-top: 0;}
.servicios ul li p {display: none; padding-top: 20px; margin: 0; font-size: medium; line-height: normal;}

.clientes {display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 10px; padding-top: 50px; border-top: 3px solid; text-align: center;}
.clientes img {mix-blend-mode: multiply; opacity: .6;}

.eapps-instagram-feed-posts-item-image-wrapper {background: var(--verdeclaro);}
.eapps-instagram-feed-posts-item-image-wrapper img {filter: grayscale(1) opacity(.8) !important; mix-blend-mode: luminosity;}

.contacto {display: grid; grid-template-columns: 1fr 2fr; gap: 120px; color: var(--verde);  background: url("images/textura_alt.svg") no-repeat top left var(--calderaoscuro); background-size: 120% auto; background-attachment: fixed;}
.contacto a {color: currentColor; text-decoration: underline;}

.gracias {background-image: url("images/cabecera.jpg"); text-align: center;}

.legal {max-width: 900px; padding: 50px 10px; margin: 0 auto;}
.legal h2 {font-size: 1.5rem; border-top: 3px solid; margin: 3lh 0 1lh; padding-top: 30px;}
.legal ul li {margin-left: 1em; list-style: disc;}
.legal ol li {margin-left: 1em; list-style: decimal;}
.legal a {text-decoration: underline;}

footer {display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; align-items: start; gap: 50px; padding: 100px calc(50% - 700px); font-size: .8rem; line-height: 1.3em;}
footer .logo {width: 300px; height: auto;}
footer strong:first-child:before {display: block; content: ""; padding-top: 20px; border-top: 3px solid;}
footer a {color: currentColor;}
footer a:hover {text-decoration: underline;}

footer .iconos {display: flex; gap: 15px; justify-content: center; margin-top: 30px; max-width: 300px;}
footer .iconos img {width: 28px; height: auto;}

.asoc {display: flex; gap: 30px;}
.asoc img {display: block; width: 90px; height: auto; object-fit: contain;}




/****************************** FORM ******************************/
label {display: block; margin-bottom: 6px;}
input[type=text], input[type=email], input[type=checkbox], input[type=file], textarea {display: block; width: 75%; padding: .6em .8em; margin: 0 0 6px; font-family: var(--fuente); font-size: 1rem; font-style: italic; color: var(--caldera); background: var(--verde);}
input[type=text]:focus, input[type=email]:focus, input[type=checkbox]:focus, textarea:focus {background: white;}
textarea {width: 100%; height: 10em; margin-bottom: 30px; resize: none;}
input[type=checkbox] {display: inline-block; appearance: none; width: 30px; height: 30px; margin-right: .5em; background-position: center center; background-repeat: no-repeat; vertical-align: middle; cursor: pointer;}
input[type=checkbox]:checked {background-image: url("images/check.svg");}
input[type=file] {margin-top: 5px;}

.boton {display: inline-block; width: max-content; padding: 5px 15px; border: 3px solid; border-radius: 12px; font-size: smaller; font-style: normal; font-weight: bold; text-transform: uppercase; color: currentColor; background: none; text-decoration: none !important;}
.boton:hover {opacity: .8; cursor: pointer;}
.boton.grande {font-size: larger; padding: 15px 30px;}




/****************************** MEDIA QUERIES ******************************/
@media all and (max-width: 1440px) {
	nav {grid-template-columns: 1fr auto auto; gap: 10px; font-size: smaller;}
	footer {display: grid; grid-template-columns: 1fr 1fr 1fr;}
	footer > *:nth-child(5) {grid-row: 1; grid-column: 2 / span 2;}
}
@media all and (max-width: 1024px) {
	html {font-size: 18px; background-size: auto 100vh;}
	
	nav {grid-template-columns: 1fr auto auto; gap: 10px; font-size: smaller;}
	nav .menu > a {display: none;}
	nav .iconos a {display: none;}
	nav .iconos a:nth-child(1) {display: block;}
	nav .iconos a:nth-child(2) {display: block;}
	
	header, section, footer {padding: 60px 20px;}
	
	h1 {font-size: 2.5rem; margin-bottom: 30px;}
	h2 {font-size: 2.5rem;}
	h3 {font-size: 1.5rem;}

	.top {display: block; padding: 0;}
	.top .boton {margin-bottom: 30px;}
	.top div:first-child {margin-bottom: 50px;}
	.top div:first-child:after {width: 150px; height: 150px; transform-origin: top right; transform: translate(-20px, 20px);}
	.top div:last-child {padding: 0 20px;}
	
	.somos {grid-template-columns: 1fr; gap: 50px;}
	.somos img {grid-column-start: span 1;}
	.somos img:last-child {grid-row-start: 3;}

	.filosofia {background-size: auto 100vh;}
	.filosofia h2 {font-size: 1.5rem;}
	.filosofia > div {grid-template-columns: 1fr 1fr; gap: 10px; font-size: medium;}
	.filosofia img {max-width: 100%; margin: 0 auto;}
	
	.servicios h2 {margin-bottom: 60px;}
	.servicios > div {grid-template-columns: 1fr; margin-top: 60px; gap: 20px;}
	.servicios > div > div > div {padding: 20px;}
	.servicios ul li {padding: 15px;}
	
	.contacto {display: grid; grid-template-columns: 1fr; gap: 0;  background-size: auto 100vh;}
	
	footer {grid-template-columns: 1fr; gap: 30px;}
	footer > *:nth-child(5) {grid-row: inherit; grid-column: inherit;}
	footer .logo {margin: auto;}
	footer .iconos {margin-left: auto; margin-right: auto;}
	footer .asoc {justify-content: center;}
}