@import url("https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Merriweather:wght@300;400;700;900&display=swap");

:root {
  --main-title-font: "Lato", sans-serif;
  --main-text-font: "Merriweather", serif;
  --main-bg-color: #034c8c;
  --main-accent-color: #0088bc;
  --full-black: #000;
  --full-white: #fff;
}

/* Color Theme Swatches in Hex */
.abstract-blue-texture-cement-concrete-wall-background-1-hex {
  color: #034c8c;
}
.abstract-blue-texture-cement-concrete-wall-background-2-hex {
  color: #0367a6;
}
.abstract-blue-texture-cement-concrete-wall-background-3-hex {
  color: #2b96d9;
}
.abstract-blue-texture-cement-concrete-wall-background-4-hex {
  color: #4aa2d9;
}
.abstract-blue-texture-cement-concrete-wall-background-5-hex {
  color: #4ab0d9;
}

/* Color Theme Swatches in RGBA */
.abstract-blue-texture-cement-concrete-wall-background-1-rgba {
  color: rgba(2, 76, 140, 1);
}
.abstract-blue-texture-cement-concrete-wall-background-2-rgba {
  color: rgba(3, 103, 165, 1);
}
.abstract-blue-texture-cement-concrete-wall-background-3-rgba {
  color: rgba(43, 150, 216, 1);
}
.abstract-blue-texture-cement-concrete-wall-background-4-rgba {
  color: rgba(73, 161, 216, 1);
}
.abstract-blue-texture-cement-concrete-wall-background-5-rgba {
  color: rgba(73, 176, 216, 1);
}

/* Color Theme Swatches in HSLA */
.abstract-blue-texture-cement-concrete-wall-background-1-hsla {
  color: hsla(208, 96, 28, 1);
}
.abstract-blue-texture-cement-concrete-wall-background-2-hsla {
  color: hsla(202, 96, 33, 1);
}
.abstract-blue-texture-cement-concrete-wall-background-3-hsla {
  color: hsla(202, 69, 51, 1);
}
.abstract-blue-texture-cement-concrete-wall-background-4-hsla {
  color: hsla(202, 65, 56, 1);
}
.abstract-blue-texture-cement-concrete-wall-background-5-hsla {
  color: hsla(196, 65, 56, 1);
}

* {
  box-sizing: border-box;
}

html,
body {
  font-family: var(--main-title-font); /* 1 */
  -ms-text-size-adjust: 100%; /* 2 */
  -webkit-text-size-adjust: 100%; /* 2 */
  margin: 0;
}

.txt-bold {
  font-weight: 700;
}

/* ---------------------------------------------- Barra de Navegacion Sitio */

header {
  width: 100%;
  height: 80px;
  background: var(--main-bg-color);
  display: flex;
  justify-content: center;
  /* box-shadow: 0 0 1rem 0.5rem rgb(165, 165, 165); */
  position: sticky;
  top: 0;
  z-index: 99;
}

nav {
  width: 95%;
  max-width: 1400px;
  display: grid;
  grid-template-columns: 200px 1fr 300px;
  grid-template-areas: "logo menu ws";
}

#logo-menu-cont {
  grid-area: logo;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

#logo-menu {
  height: 70px;
}

header nav ul {
  grid-area: menu;
  display: flex;
  gap: 2.5rem;
  margin: 0;
  align-self: center;
  list-style: none;
}

header nav ul li {
  font-family: "Lato", sans-serif;
  font-size: 1.2rem;
  cursor: pointer;
}

@media screen and (max-width: 1060px) {
  header nav ul {
    gap: 2rem;
  }

  header nav ul li {
    font-size: 1rem;
  }
}

header nav ul li a {
  text-decoration: none;
  color: var(--full-white);
  padding: 0.5rem 0;
  transition: color 0.3s ease-in-out;
}

header nav ul li a:hover {
  color: var(--main-accent-color);
  border-bottom: 3px solid var(--main-accent-color);
}

.hamburger {
  display: none;
  cursor: pointer;
  grid-area: menu;
  align-self: center;
}

.bar {
  display: block;
  width: 30px;
  height: 3px;
  margin: 5px auto;
  transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  background-color: var(--full-white);
}

#whatsapp-header {
  background: var(--main-accent-color);
  border-radius: 10px;
  text-decoration: none;
  grid-area: ws;
  padding: 0.5rem 1.5rem;
  align-self: center;
  justify-self: center;
  transition: all 0.5s ease-in-out;
  display: flex;
  gap: 1rem;
  align-items: center;
}

#whatsapp-header:hover {
  background: #128c7e;
}

#whatsapp-header p {
  margin: 0;
  font-size: 1.2rem;
  color: var(--full-white);
}

#whatsapp-header-logo {
  color: var(--full-white);
  width: 1.2rem;
  height: 1.2rem;
}

@media screen and (max-width: 960px) {
  nav {
    width: 95%;
    max-width: 1400px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-areas: "logo menu ws";
  }

  header nav ul {
    display: flex;
    gap: 2.5rem;
    margin: 0;
    list-style: none;
    position: absolute;
    flex-direction: column;
    top: -270px;
    left: 0;
    background-color: var(--main-bg-color);
    width: 100%;
    padding: 2rem 0;
    align-items: center;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    z-index: 50;
  }

  header nav ul.active {
    top: 80px;
  }

  .hamburger {
    display: block;
  }

  .hamburger.active .bar:nth-child(2) {
    opacity: 0;
  }
  .hamburger.active .bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }
  .hamburger.active .bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }

  #whatsapp-header {
    border-radius: 50%;
    padding: 1rem;
  }

  #whatsapp-header p {
    display: none;
  }
}

/* ---------------------------------------------- Footer global sitio */

footer {
  width: 100%;
  height: 400px;
  padding: 1rem 0;
  background: var(--main-bg-color);
  display: flex;
  justify-content: center;
}

#footer-cont {
  width: 95%;
  max-width: 1400px;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-rows: 1fr 40px 20px;
  grid-template-areas:
    ".... txt txt mapa mapa ...."
    "redes redes redes redes redes redes"
    "copy copy copy copy copy copy";
}

@media screen and (max-width: 960px) {
  footer {
    width: 100%;
    height: 600px;
    padding: 1rem 0;
    background: var(--main-bg-color);
    display: flex;
    justify-content: center;
  }

  #footer-cont {
    grid-template-columns: 5% repeat(4, minmax(0, 1fr)) 5%;
    grid-template-rows: repeat(2, minmax(0, 1fr)) 40px 20px;
    grid-template-areas:
      ".... txt txt txt txt ...."
      ".... mapa mapa mapa mapa ...."
      "redes redes redes redes redes redes"
      "copy copy copy copy copy copy";
  }

  #footer-iframe-map-container {
    width: 100%;
    height: 100%;
  }
}

#footer-iframe-map-container {
  grid-area: mapa;
  width: 80%;
  height: 80%;
  max-height: 300px;
  align-self: center;
  justify-self: center;
}

#footer-txt-cont {
  grid-area: txt;
  width: 90%;
  height: 90%;
  align-self: center;
  justify-self: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
}

#footer-txt-cont > p {
  margin: 0;
  font-family: var(--main-text-font);
  text-align: center;
  color: var(--full-white);
  font-size: 1.5rem;
}

#footer-txt-cont a {
  text-decoration: underline;
  color: var(--full-white);
}

#footer-txt-cont a p {
  margin: 0;
  font-size: 1.4rem;
  text-align: center;
}

@media screen and (max-width: 1300px) {
  #footer-txt-cont > p {
    font-size: 1rem;
  }

  #footer-txt-cont a p {
    margin: 0;
    font-size: 0.9rem;
    text-align: center;
  }
}

@media screen and (max-width: 960px) {
  #footer-txt-cont p {
    font-size: 0.8rem;
  }
}

#footer-copy {
  grid-area: copy;
  justify-self: center;
  align-self: center;
  margin: 0;
  font-size: 12px;
  color: var(--full-white);
}

#footer-redes-cont {
  grid-area: redes;
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  align-items: center;
}

.footer-red-icon {
  width: 25px;
  height: 25px;
  color: var(--full-white);
  transition: color 0.3s ease-in-out;
}

.footer-red-icon:hover {
  color: var(--main-accent-color);
}

/* ---------------------------------------------- Estilos Seccion Inicio */

#inicio-content-wrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#inicio-lead-wrapper {
  width: 100%;
  /* max-width: 1400px; */
  min-height: 80vh;
  background: url("../img/diosa-de-la-justicia-img.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  backdrop-filter: contrast(40%);
  /* background-attachment: fixed; */
}

#inicio-lead-cont {
  width: 100%;
  /* max-width: 1400px; */
  min-height: 80vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: rgba(0, 0, 0, 0.7);
  /* background: url("../img/diosa-de-la-justicia-img.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  backdrop-filter: contrast(40%); */
}

#inicio-lead-title {
  font-family: var(--main-title-font);
  color: var(--full-white);
  margin: 0 0 0 10%;
  font-size: 64px;
  font-weight: 700;
}

#inicio-lead-subtitle {
  font-family: var(--main-title-font);
  margin: 1rem 0 0 10%;
  font-size: 52px;
  color: var(--full-white);
  font-weight: 500;
}

#inicio-lead-btn {
  margin: 1rem 0 0 10%;
  color: #fff;
  font-size: 20px;
  text-decoration: none;
  padding: 1rem 2rem;
  border: 1px solid #fff;
  width: fit-content;
  border-radius: 15px;
  transition: all 0.3s ease-in-out;
}

#inicio-lead-btn:hover {
  color: #000;
  border: 1px solid #fff;
  background-color: #fff;
}

@media screen and (max-width: 960px) {
  #inicio-lead-title {
    margin: 0 0 0 5%;
    font-size: 40px;
  }

  #inicio-lead-subtitle {
    margin: 1rem 0 0 5%;
    font-size: 30px;
  }

  #inicio-lead-btn {
    margin: 1rem 0 0 5%;
    color: #fff;
    font-size: 20px;
    padding: 0.5rem 1.5rem;
    border-radius: 10px;
  }
}

#inicio-desc-wrapper {
  padding: 2rem 1rem;
  width: 100%;
  background-color: #ffffff;
  /* background by SVGBackgrounds.com */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='800' viewBox='0 0 200 200'%3E%3Cdefs%3E%3ClinearGradient id='a' gradientUnits='userSpaceOnUse' x1='88' y1='88' x2='0' y2='0'%3E%3Cstop offset='0' stop-color='%23005092'/%3E%3Cstop offset='1' stop-color='%23007cc4'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' gradientUnits='userSpaceOnUse' x1='75' y1='76' x2='168' y2='160'%3E%3Cstop offset='0' stop-color='%23868686'/%3E%3Cstop offset='0.09' stop-color='%23ababab'/%3E%3Cstop offset='0.18' stop-color='%23c4c4c4'/%3E%3Cstop offset='0.31' stop-color='%23d7d7d7'/%3E%3Cstop offset='0.44' stop-color='%23e5e5e5'/%3E%3Cstop offset='0.59' stop-color='%23f1f1f1'/%3E%3Cstop offset='0.75' stop-color='%23f9f9f9'/%3E%3Cstop offset='1' stop-color='%23FFFFFF'/%3E%3C/linearGradient%3E%3Cfilter id='c' x='0' y='0' width='200%25' height='200%25'%3E%3CfeGaussianBlur in='SourceGraphic' stdDeviation='12' /%3E%3C/filter%3E%3C/defs%3E%3Cpolygon fill='url(%23a)' points='0 174 0 0 174 0'/%3E%3Cpath fill='%23000' fill-opacity='.5' filter='url(%23c)' d='M121.8 174C59.2 153.1 0 174 0 174s63.5-73.8 87-94c24.4-20.9 87-80 87-80S107.9 104.4 121.8 174z'/%3E%3Cpath fill='url(%23b)' d='M142.7 142.7C59.2 142.7 0 174 0 174s42-66.3 74.9-99.3S174 0 174 0S142.7 62.6 142.7 142.7z'/%3E%3C/svg%3E");
  /* background-attachment: fixed; */
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top;
  height: auto;
  display: flex;
  justify-content: center;
}

#inicio-desc-container {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
  max-width: 1400px;
  justify-items: center;
  align-items: center;
  gap: 1rem;
}
@media screen and (max-width: 1030px) {
  #inicio-desc-container {
    grid-template-columns: minmax(0, 1fr);
  }

  #inicio-desc-wrapper {
    background-size: 300%;
    background-position: left;
  }
}

#inicio-desc-container h2 {
  font-family: var(--main-title-font);
  color: var(--full-white);
  text-align: center;
}

#inicio-desc-container p {
  color: var(--full-white);
  text-align: center;
}

#inicio-desc-txt-cont {
  display: flex;
  flex-direction: column;
}

/* ----------------------------------------------Estilos pagina quienes somos  */

#quienes-somos-wrapper {
  padding: 4rem 0;
  /* background by SVGBackgrounds.com */
  background-color: #2b96d9;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 800 800'%3E%3Cg fill='none' stroke='%234AB0D9' stroke-width='1'%3E%3Cpath d='M769 229L1037 260.9M927 880L731 737 520 660 309 538 40 599 295 764 126.5 879.5 40 599-197 493 102 382-31 229 126.5 79.5-69-63'/%3E%3Cpath d='M-31 229L237 261 390 382 603 493 308.5 537.5 101.5 381.5M370 905L295 764'/%3E%3Cpath d='M520 660L578 842 731 737 840 599 603 493 520 660 295 764 309 538 390 382 539 269 769 229 577.5 41.5 370 105 295 -36 126.5 79.5 237 261 102 382 40 599 -69 737 127 880'/%3E%3Cpath d='M520-140L578.5 42.5 731-63M603 493L539 269 237 261 370 105M902 382L539 269M390 382L102 382'/%3E%3Cpath d='M-222 42L126.5 79.5 370 105 539 269 577.5 41.5 927 80 769 229 902 382 603 493 731 737M295-36L577.5 41.5M578 842L295 764M40-201L127 80M102 382L-261 269'/%3E%3C/g%3E%3Cg fill='%234AB0D9'%3E%3Ccircle cx='769' cy='229' r='5'/%3E%3Ccircle cx='539' cy='269' r='5'/%3E%3Ccircle cx='603' cy='493' r='5'/%3E%3Ccircle cx='731' cy='737' r='5'/%3E%3Ccircle cx='520' cy='660' r='5'/%3E%3Ccircle cx='309' cy='538' r='5'/%3E%3Ccircle cx='295' cy='764' r='5'/%3E%3Ccircle cx='40' cy='599' r='5'/%3E%3Ccircle cx='102' cy='382' r='5'/%3E%3Ccircle cx='127' cy='80' r='5'/%3E%3Ccircle cx='370' cy='105' r='5'/%3E%3Ccircle cx='578' cy='42' r='5'/%3E%3Ccircle cx='237' cy='261' r='5'/%3E%3Ccircle cx='390' cy='382' r='5'/%3E%3C/g%3E%3C/svg%3E");
  display: flex;
  justify-content: center;
  align-items: center;
}

#quienes-somos-cont {
  width: 100%;
  max-width: 1400px;
}

#quienes-somos-title {
  font-family: var(--main-title-font);
  color: var(--full-white);
  text-align: center;
}

/* ---------------------------------------------- Estilos Pagina en Construccion */

#construction-wrapper {
  margin: 0;
  width: 100%;
  height: 100vh;
  background: url("../img/diosa-de-la-justicia-img.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

#construction-cont {
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  flex-direction: column;
  gap: 5vh;
}

#construction-title {
  font-family: var(--main-title-font);
  text-align: center;
  color: var(--full-white);
  font-size: 10vh;
  margin: 0;
}

#construction-subtitle {
  font-family: var(--main-title-font);
  text-align: center;
  color: var(--full-white);
  font-size: 8vh;
  margin: 0;
}