@import url('https://fonts.googleapis.com/css2?family=Anton&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap');



/****************************** 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; overscroll-behavior-y: none;}
body {font-family: "Roboto Condensed", sans-serif; font-size: max(1.33em, 1.2vw); font-weight: 350; color: black; background: #f0f0f0; scroll-behavior: smooth;}

html {scrollbar-color: white black;}
html::-webkit-scrollbar {width: 16px; background: black;}
html::-webkit-scrollbar-thumb {background: white; border-radius: 10px; border: 0;}
html::-webkit-scrollbar-thumb:hover {background: black;}



/****************************** MAIN ******************************/
h1 {font-family: "Anton", sans-serif; font-size: 5rem; line-height: 1.1em; font-weight: normal; margin-bottom: 3rem; text-wrap: balance; max-width: 11em;}
h2 {font-family: "Anton", sans-serif; font-size: max(2.8rem, 2.8vw); line-height: 1.1em; font-weight: normal; margin-bottom: 1lh; text-wrap: balance; text-transform: uppercase; max-width: 15em;}
h3 {font-family: "Anton", sans-serif; font-size: max(2.0rem, 2.0vw); line-height: 1.1em; font-weight: normal; margin-bottom: 1.5rem; text-wrap: balance;max-width: 6em;}

p {line-height: 1.4em; margin-bottom: 1lh;}
p:last-child {margin-bottom: 0;}
img {display: block; max-width: 100%;}
video {display: block; width: 100%;}
a {color: currentColor;}

header {display: block; padding: 1.5vw 3vw; text-align: center;}
header img {width: 15vw; max-width: 45vw; margin: 0 auto;}

main {outline: .45vw solid; outline-offset: -3vw; background: white;}

.empresa {display: grid; grid-template-columns: repeat(3, 1fr); align-items: stretch; gap: 0;}
.empresa div {background: no-repeat center center; background-size: cover; min-height: 33vw;}
.empresa div:first-of-type {padding: 6vw 3vw 3vw 6vw;}
.empresa div:last-of-type {padding: 3vw 6vw 3vw 3vw;}
.empresa img {display: block; width: 100%;aspect-ratio: 1/1; object-fit: cover;}

.top {position: relative;}

.servicios {padding: 9vw 12vw; color: white; background: linear-gradient(160deg, #30a7e0, #2f2a84); background-attachment: fixed;}
.servicios img {display: block; width: 50%; margin: 0 auto 1em;}
.servicios h2 {margin: 0 auto 1lh; text-align: center;}
.servicios > ul {display: grid; grid-template-columns: repeat(4, 1fr); gap: .6vw; }
.servicios > ul > li {padding: 25% 1.5vw 33%; clip-path: polygon(0 12%, 50% 0, 100% 12%, 100% calc(100% - 12%), 50% 100%, 0% calc(100% - 12%)); text-align: center; color: black; background: white;}
.servicios h3 {margin: 0 auto 1.5rem; max-width: 6em; color: currentColor;}
.servicios h3:after {display: block; content: ""; width: 60px; border-top: 3px solid; margin: 30px auto 25px;}
.servicios p {line-height: normal; margin: 0; text-wrap: balance;}

.clientes {display: grid; grid-template-columns: repeat(3, 1fr); align-items: stretch; gap: 0;}
.clientes div {padding: 3vw 3vw 3vw 6vw; min-height: 33vw; display: flex; flex-direction: column; justify-content: center; background: no-repeat center center; background-size: cover;}
.clientes ul {display: flex; flex-wrap: wrap; gap: .25em; }
.clientes li {padding: .5em .8em; border-radius: .2rem; background: whitesmoke; font-weight: 450;}
.clientes img {display: block; width: 100%; aspect-ratio: 1/1; object-fit: cover;}

.fondo {display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 600px; height: 100vh; padding: 6vw; text-align: center; color: white; background: url("images/contacto.jpg") no-repeat center center; background-size: cover; background-attachment: fixed; position: relative;}
.fondo h2 {margin: 0; text-transform: none; line-height: 1.33em;}

.contacto {display: grid; grid-template-columns: repeat(4, 1fr) auto; align-items: stretch; gap: 3vw; padding: 4.5vw 6vw 6vw; font-size: smaller;}
.contacto h3 {padding-bottom: 40px; border-bottom: .12ex solid;  margin: 0 0 20px; text-transform: uppercase; max-width: inherit;}
.contacto p {min-height: 5lh;}
.contacto .logo {display: none; width: 50%; margin: 2lh auto;}
.contacto .iso {display: block; width: 190px; margin: 0 0 0 auto;}

.botones {display: flex; gap: 5px; margin: 1lh 0 0; width: max-content;}
.botones a {display: inline-block; padding: .5em 1em; text-transform: uppercase; font-weight: bold; color: white; background: black;}
.botones a:hover {background: linear-gradient(180deg, #30a7e0 -20%, #2f2a84 120%); cursor: pointer;}



/****************************** MEDIA QUERIES ******************************/
@media all and (max-width: 1500px) {
  header {padding: 6vw;}
  header img {width: auto;}
  main {outline: 1.2vw solid; outline-offset: -5.8vw;}
  .empresa {grid-template-columns: repeat(1, 1fr);}
  .empresa div {padding: 10vw !important; grid-column: 1 / span 1 !important; min-height: 100vw; background-attachment: inherit;}
  .empresa div:last-of-type {grid-row: 4;}
  .empresa img:nth-of-type(1) {grid-row: 5;}
  .empresa img:nth-of-type(3) {display: none;}
  .empresa img:nth-of-type(4) {display: none;}
  .servicios {padding: 10vw;}
  .servicios h3 {font-size: 2rem;}
  .servicios > ul {grid-template-columns: repeat(2, 1fr);}
  .servicios > ul > li {padding: 33% 5vw;}
  .servicios > ul > li:not(:last-child) {margin-bottom: -15vw;}
  .clientes {grid-template-columns: repeat(1, 1fr);}
  .clientes div {padding: 10vw !important; min-height: 100vw; background-attachment: inherit;}
  .clientes div {grid-row: 2;}
  .clientes img:last-of-type {display: none;}
  .contacto {grid-template-columns: 1fr; gap: 2lh; padding: 15vw 11vw; font-size: inherit;}
  .contacto h3 {padding-bottom: .5lh; margin-bottom: .5lh;}
  .contacto .logo {display: block;}
  .contacto .iso {display: none;}
}
@media all and (max-width: 1200px) {
  .servicios > ul {grid-template-columns: repeat(1, 1fr);}
}