@import url("https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,100;0,300;0,400;0,500;0,600;0,700;0,900;1,100;1,300;1,400;1,500;1,600;1,700;1,900&display=swap");

html,
body {
  margin: 0 auto !important;
  padding: 0 !important;
  font-weight: 400;
  scroll-behavior: smooth;
  font-family: "Archivo", sans-serif;
}

/* DIVISION ESTRUCTURAL DE LA PAGINA */

.cuerpo {
  display: grid;
  grid-template-columns: 1fr;
  /*row-gap: 4rem;*/
  grid-template-areas:
    "titulo"
    "navbar"
    "info"
    "servicios"
    "clientes"
    "contacto"
    "footer";
}

.navbar {
  grid-area: navbar;
  /*width: 100%;*/
}

.titulo {
  grid-area: titulo;
  width: 100%;
}

.info {
  grid-area: info;
}

.servicios {
  grid-area: servicios;
}

.clientes {
  grid-area: clientes;
  padding: 0 0 3rem 0;
}

.contacto {
  grid-area: contacto;
  display: grid;
  padding: 1rem 0 2rem 0;
}

.footer {
  grid-area: footer;
}

/* FONDOS DE COLORES PARA LAS SECCIONES*/

.azul {
  background-color: #c0d2e5;
  border-bottom: 2px solid #ccc;
}

.blanco {
  background-color: white;
  display: grid;
}

.gris {
  background-color: #f7f7f7;
  display: grid;
  border-top: 2px solid #ccc;
}

/* MARGINACION DE TEXTO*/

.textitem {
  justify-self: center;
}

/* ELEMENTOS DE LAS SECCIONES */
/*NAVBAR*/
a {
  text-decoration: none;
  color: inherit;
}

nav {
  /*position: relative;*/
  width: 100%;
  background-color: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(0.4rem);
  /*border-bottom: 2px solid #f7f7f7;*/
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

nav a {
  text-decoration: none;
  position: relative;
}

.primary-navigation a::after {
  content: "" "";
  display: block;
  height: 2px;
  background: rgba(29, 103, 205, 0.4);
  position: absolute;
  left: 0;
  right: 0;
  transform: scale(0, 1);
  transform-origin: left;
  transition: transform ease-in-out 200ms;
}

.primary-navigation a:hover::after {
  transform: scale(1, 1);
}

/*PARA BARRA DE NAVEGACIÓN DEBAJO DEL AZUL "MERCADEO"*/

.flex {
  display: flex;
  gap: var(--gap, 1.5rem);
  align-items: center;
  justify-content: center;
}

.primary-navigation {
  list-style: none;
  /*padding: 1rem;*/
  margin: 0;
  width: 100%;
  z-index: 10;
  align-self: center;
  /*justify-self: center;*/
}

.primary-navigation a {
  text-decoration: none;
}

.primary-navigation li {
  font-family: "Archivo", sans-serif;
  font-size: 1.5rem;
  font-weight: 600;
  color: #1d67cd;
}

/* This class is added on scroll */
.fixed {
  position: fixed !important;
  z-index: 9999;
  top: 0px;
}

.navegacion {
  /*width: 100%;*/
  display: grid;
  grid-template-columns: 0.1fr 1fr;
  z-index: 10;
  /*position: relative;*/
}

h1 {
  font-family: "Archivo", sans-serif;
  font-weight: 600;
  font-size: 3rem;
  padding: 0;
  margin: 0;
}

.logo {
  grid-area: logo;
  display: grid;
  grid-template-columns: 0.2fr 0.1fr 1.2fr 0.2fr;
  grid-template-areas: ". horse mercadeo .";
  /*grid-template-columns: 1fr 1fr;*/
  position: relative;
  gap: 1.5rem;
}

.horse {
  grid-area: horse;
  max-width: 90px;
  align-self: center;
  justify-self: end;
}

.mercadeo {
  grid-area: mercadeo;
  align-self: center;
  justify-self: start;
}

.banderas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap, 1.3rem);
  grid-template-areas: "mexbandera usabandera";
  align-self: center;
  justify-self: center;
}

.mexbandera {
  grid-area: mexbandera;
  max-width: 20px;
  align-self: center;
  justify-self: start;
  transition: transform 350ms ease-in-out;
}

.usabandera {
  grid-area: usabandera;
  max-width: 20px;
  align-self: center;
  justify-self: end;
  transition: transform 350ms ease-in-out;
}

.usabandera:hover,
.usabandera:focus-visible,
.mexbandera:hover,
.mexbandera:focus-visible {
  transform: scale(1.5);
}

.skip-nav-link {
  background: black;
  padding: 0.5rem 1.5rem;
  border-radius: 0 0 0.25rem 0.25rem;
  position: absolute;
  left: 0.5rem;
  transform: translateY(-120%);
  transition: transform 325ms ease-in;
  z-index: 100;
}

.skip-nav-link:focus {
  transform: translateY(0);
}

/*TÍTULO*/

/* Add a top margin to avoid content overlay */
/*.topmargin {
  margin-top: 65px; 
}*/

/* INFO */
.tablainfo {
  display: grid;
  row-gap: 0;
  grid-template-columns: 1fr 3fr 1fr;
  grid-template-areas:
    ". up ."
    ". ap ."
    ". ep .";
}

.infotext {
  grid-area: up;
  justify-self: center;
}

.inforegion {
  grid-area: ap;
  justify-self: center;
}

.infomap {
  grid-area: ep;
  justify-self: center;
}

img.map {
  width: 100%;
  max-width: 700px;
}

h2 {
  font-family: "Noto Serif", monospace;
  font-size: 3.5rem;
  font-weight: bold;
  line-height: 4rem;
  /*letter-spacing: 0.1rem;*/
  color: #3d5370;
}

h2::after {
  display: block;
  content: "";
  width: 8rem;
  margin-top: 0.5rem;
  border-bottom: 0.3rem solid rgba(61, 83, 112, 0.5);
}

p {
  font-family: "Archivo", sans-serif;
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 2rem;
  color: #3b3a3a;
}

ol {
  font-family: "Archivo", sans-serif;
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 2rem;
  color: #3b3a3a;
}

/* SERVICIOS */
.servicios-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: repeat(1, 1fr);
  grid-template-areas: "Izquierda Medio Derecha";
}

.Izquierda {
  grid-area: Izquierda;
  background-image: url("https://static.wixstatic.com/media/ccb71c_8be59c9abf2a497dafd5de5ffe93f1d6~mv2.png/v1/fill/w_633,h_763,al_r,usm_0.66_1.00_0.01,enc_auto/ccb71c_8be59c9abf2a497dafd5de5ffe93f1d6~mv2.png");
  min-height: 50vh;
}

.Medio {
  grid-area: Medio;
  background-image: url("https://static.wixstatic.com/media/19e2289055a84574b06eb6567ba2a4d5.jpg/v1/fill/w_635,h_763,al_b,q_85,usm_0.66_1.00_0.01,enc_auto/19e2289055a84574b06eb6567ba2a4d5.jpg");
  min-height: 50vh;
}

.Derecha {
  grid-area: Derecha;
  background-image: url("https://static.wixstatic.com/media/20371a167944413589d6dc0e902cd367.jpg/v1/fill/w_635,h_763,al_t,q_85,usm_0.66_1.00_0.01,enc_auto/20371a167944413589d6dc0e902cd367.jpg");
  min-height: 50vh;
}

.servicios-wrapper {
  display: grid;
  grid-template-columns: 0.5fr 3fr 3fr 3fr 0.5fr;
  grid-template-rows: 0.5fr 3fr 3fr 3fr 0.5fr;
  gap: 0px;
  grid-template-areas:
    ". . . . ."
    ". A A A ."
    ". A A A ."
    ". A A A ."
    ". . . . .";
}

.over {
  grid-area: A;
  z-index: 3;
  border-radius: 20px;
  background-color: rgba(255, 255, 255, 1);
}

.over-wrapper {
  display: grid;
  grid-template-columns: 0.5fr 5fr 0.5fr;
  grid-template-rows: 0.5fr 2fr 0.5fr 0.1fr;
  gap: 0px;
  grid-template-areas:
    ". overwrappertitulo ."
    ". overwrappertexto ."
    ". overwrapperboton ."
    ". . .";
}

.overwrapper-titulo {
  grid-area: overwrappertitulo;
  z-index: 3;
  align-self: end;
}

.overwrapper-texto {
  grid-area: overwrappertexto;
  z-index: 3;
  align-self: center;
}

.overwrapper-boton {
  grid-area: overwrapperboton;
  z-index: 3;
  align-self: center;
  justify-self: center;
}

h3 {
  font-family: "Noto Serif", monospace;
  font-size: 1.7rem;
  color: #1d67cd;
  text-align: center;
}

button,
input[type="button"],
input[type="submit"],
input[type="reset"] {
  display: inline-block;
  padding: 0.5rem 0.5rem;
  font-family: "Archivo", sans-serif;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: #34457e;
  background-color: white;
  border: 1;
  border-radius: 7px;
  box-shadow: 0 6px #ccc;
  transition: transform 350ms ease-in-out;
}

button a {
  font-size: 1rem;
  font-weight: 600;
  font-family: "Archivo", sans-serif;
  text-decoration: none;
  color: #34457e;
  font-weight: 600;
}

button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
button:focus-visible,
input[type="button"]:focus-visible,
input[type="submit"]:focus-visible,
input[type="reset"]:focus-visible {
  background-color: rgba(212, 231, 240, 0.1);
  box-shadow: 0 6px #aaa;
  transform: scale(1.05);
}

button:active,
input[type="button"]:active,
input[type="submit"]:active,
input[type="reset"]:active {
  box-shadow: inset -2px -2px 3px rgba(255, 255, 255, 0.6),
    inset 2px 2px 3px rgba(0, 0, 0, 0.6);
}

/* CLIENTES */
.tablaclientes {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: 1fr, 1fr;
  column-gap: 1.5rem;
  row-gap: 1rem;
  align-self: center;
  justify-self: center;
  justify-content: space-evenly;
  align-content: space-evenly;
}

.tablaclientes-item {
  min-height: 10vh;
  min-width: 10vw;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  overflow: hidden;
  transition: transform 350ms ease-in-out;
}

.tablaclientes-item:hover,
.tablaclientes-item:focus-visible {
  transform: scale(1.1);
}

/* CONTACTO */
.contactoforma {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0px;
  grid-template-areas:
    "contactotitulo contactoforma"
    "contactomail contactoforma"
    "contactowhats contactoforma";
}

.contacto-titulo {
  grid-area: contactotitulo;
  align-self: center;
  justify-self: stretch;
}

.contacto-mail {
  grid-area: contactomail;
  align-self: center;
  justify-self: stretch;
  display: grid;
  grid-template-columns: 0.1fr 1.2fr;
  justify-items: center;
  align-items: center;
}

.contacto-whats {
  grid-area: contactowhats;
  align-self: center;
  justify-self: stretch;
  display: grid;
  grid-template-columns: 0.1fr 1.2fr;
  justify-items: center;
  align-items: center;
  /*justify-self: stretch;*/
}

.contacto-forma {
  padding: 0.5rem 0 0.5rem 0;
  grid-area: contactoforma;
  align-self: stretch;
  justify-self: stretch;
}

.mailwhats {
  font-family: "Noto Serif", monospace;
  font-weight: 700;
  font-size: 1.4; /*1.7rem;*/
  color: #3d5370;
}

.mailwhats a {
  font-family: "Noto Serif", monospace;
  font-weight: 700;
  font-size: 1.7rem;
  color: #3d5370;
}

img.contacto {
  width: 100%;
  max-width: 2rem;
}

form {
  background-color: rgba(255, 255, 255, 0.4);
  border-radius: 9px;
  border: 2px solid rgba(61, 83, 112, 0.3);
}

.formainterno {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0px;
  grid-template-areas:
    "formainternomail"
    "formainternonombre"
    "formainternomensaje"
    "formainternoenviar";
}

.formainternomail {
  justify-self: center;
}

.formainternonombre {
  justify-self: center;
}

.formainternomensaje {
  justify-self: center;
}

.formainternoenviar {
  justify-self: center;
  padding: 0.5rem 0 0.5rem 0;
}

fieldset {
  border: none;
}

textarea,
input[type="text"],
input[type="email"] {
  border: 2px solid #000;
  border-radius: 4px;
  padding: 8px;
  box-sizing: border-box;
  width: 200px;
}

input[type="text"]:focus {
  border: 2px solid #000;
  border-radius: 4px;
  background-color: #f7fbfc;
  padding: 8px;
  box-sizing: border-box;
  width: 200px;
}

input[type="email"]:focus {
  border: 2px solid #000;
  border-radius: 4px;
  background-color: #f7fbfc;
  padding: 8px;
  box-sizing: border-box;
  width: 200px;
}

legend {
  color: #3b3a3a;
  font-weight: 700;
  margin-bottom: 0px;
  margin-left: 0px;
  text-align: left;
}

/* FOOTER */
.foottext {
  font-size: 0.7rem;
}

.aviso {
  font-size: 1rem;
  max-width: 700px;
  text-align: justify;
  line-height: 1.1rem;
}

/* MEDIA QUERIES */
/*  MEDIA QUERIES VAN AL PRINCIPIO 
(TELEFONO Y TABLETA)
QUE CUBRAN LAS CAJAS DEL CENTRO
Y EL navbar*/
/*
@media only screen and (max-width: 640px) {
  .textitem {
    padding: 0 5% 0 5% !important;
  }
  h1 {
    font-size: 1.8rem !important;
  }
  h2 {
    font-size: 1.5rem !important;
  }
  .menu a {
    font-size: 0.9rem !important;
  }
  .menu a:hover {
    font-size: 0.9rem !important;
  }
  .menu a:visited {
    font-size: 0.7rem !important;
  }
}

@media only screen and (min-width: 641px) and (max-width: 1024px) {
  .textitem {
    padding: 0 10% 0 10% !important;
  }
}

@media only screen and (min-width: 1025px) {
  .textitem {
    max-width: 800px !important;
  }
}
*/