/*                    index.html                    */

/* Estilos generales */
:root {
  --bg-color:    #F0F8FF;
  --pri-color:   #EBF5FF;
  --details:     #c4b49b;
  --ldetails:    #EDDEBC;
  --ddetails:    #946900;;
  --text-color:  #000000;
  --ltext-color: #4c4c4c;
  --dtext-color: #ffffff;

  --transition: .5s ease-in-out;
  --background: linear-gradient(to top, #ffffff, #ffffff, #f9fbff, #f5f9ff, #f0f8ff);
  --backgroud-deco: linear-gradient(to right top, #b1823c, #bc9353, #c7a46a, #d2b682, #ddc79a, #dbc596, #d9c293, #d7c08f, #c6aa6e, #b6944e, #a57e2d, #946900); }

* {
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
  text-decoration: none;
  list-style: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  color: var(--text-color);
  font-family: "Poppins", sans-serif;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased; }

::selection {
  background-color: var(--pri-color);
  color: black; }

/* Start -> SrollBar */
body::-webkit-scrollbar {
  background-color: rgb(248, 248, 248);
  border: 1px solid rgba(206, 206, 206, 0.212);
  width: 15px; }

body::-webkit-scrollbar-thumb {
  background-color: var(--details);
  border-radius: 2px; }

body::-webkit-scrollbar-thumb:hover { background-color: var(--ldetails); }
/* End -> SrollBar */

body { background-image: var(--background); }





/* Estilos base (pantalla normal) */
header, section, footer {
  width: 100%;
  display: flex;
  justify-content: center;
  margin: 0 auto; }

footer .container {
  width: 100%;
  min-height: 15vh;
  display: flex;
  flex-direction: column; }

.container {
  width: 1140px;
  max-width: 1140px;
  min-height: 80vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  position: relative;
  overflow: hidden; }

.header .container { min-height: 7em; }

.services .container { min-height: 50vh; }

.contact .container { min-height: 40vh; }

.serv .container { min-height: 70vh; }

.projs .container { min-height: 50vh; }

h2.big-title {
  font-size: 2.3em; 
  font-weight: 600;
  line-height: 1.5em; }

h2.title {
  font-size: 1.8em; 
  font-weight: 600; }

.sub-title {
  font-size: 1.1em; 
  font-weight: 500; }

p.text, .text-about, li {
  font-size: 1.1em; 
  font-weight: 400;
  line-height: 1.6em;
  color: var(--ltext-color); }

img { border-radius: 5px; }

.logo { filter: drop-shadow(0 0 0.5rem rgba(0, 0, 0, 0.08));  }

.logo-bl { filter: drop-shadow(0 0 0.7rem rgba(0, 0, 0, 0.300));  }

.btn {
  width: 250px;
  height: 70px;
  display: flex;
  font-size: 1.1em;
  font-weight: 400;
  border-radius: 50px;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  transition: var(--transition); }

.btn1 {
  color: var(--text-color);
  border: 1px solid var(--text-color); }

.btn1:hover {
  border-color: transparent;
  border: 1px solid var(--ldetails);
  background-color: var(--ldetails); }

.btns {
  display: inline-block;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
  z-index: 1;
  color: #090909;
  padding: 0.7em 3.3em 0.7em 1.7em;
  font-size: 18px;
  border-radius: 0.5em;
  background: #e8e8e8;
  border: 1px solid #e8e8e8;
  box-shadow: 6px 6px 12px #c5c5c5,
             -6px -6px 12px #ffffff; }

.btns.btn-wp > svg {
  height: 30px;
  position: absolute;
  padding: 0px 5px;
  margin-top: -3px; }

.btns.btn-gm > svg {
  height: 17px;
  position: absolute;
  padding: 0px 5px;
  margin-top: 5px; }

.btns:active {
  color: #666;
  box-shadow: inset 4px 4px 12px #c5c5c5,
             inset -4px -4px 12px #ffffff; }

.btns:before {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%) scaleY(1) scaleX(1.25);
  top: 100%;
  width: 140%;
  height: 180%;
  background-color: rgba(0, 0, 0, 0.05);
  border-radius: 50%;
  display: block;
  transition: var(--transition);
  z-index: -1; }

.btns:after {
  content: "";
  position: absolute;
  left: 55%;
  transform: translateX(-50%) scaleY(1) scaleX(1.45);
  top: 180%;
  width: 160%;
  height: 190%;
  border-radius: 50%;
  display: block;
  transition: var(--transition);
  z-index: -1; }

.btns.btn-wp:after { background-color: #009087; }

.btns.btn-wp:hover {
  color: #ffffff;
  border: 1px solid #009087; }

.btns.btn-wp:hover:before {
  top: -35%;
  background-color: #009087;
  transform: translateX(-50%) scaleY(1.3) scaleX(0.8); }

.btns.btn-wp:hover:after {
  top: -45%;
  background-color: #009087;
  transform: translateX(-50%) scaleY(1.3) scaleX(0.8); }

.btns.btn-gm:after { background-color: #ad140f; }

.btns.btn-gm:hover {
  color: #ffffff;
  border: 1px solid #ad140f; }

.btns.btn-gm:hover:before {
  top: -35%;
  background-color: #ad140f;
  transform: translateX(-50%) scaleY(1.3) scaleX(0.8); }

.btns.btn-gm:hover:after {
  top: -45%;
  background-color: #ad140f;
  transform: translateX(-50%) scaleY(1.3) scaleX(0.8); }

/* Estilos -> pantalla grande */
@media screen and (min-width: 1910px) {
  header, section, footer {
    width: 100%;  
    margin: 0 auto; }

  .container { width: 100%; }
}

/* Estilo -> tabletas */
@media screen and (min-width: 480px) and (max-width: 1024px) {
  header, section, footer { width: auto; }

  .container {
    width: 100%;
    max-width: 600px;
    min-height: 800px;
    /* max-height: 1024px; */ } 

  .header .container {
    max-width: 900px;
    height: 200px; }

  .footer .container { max-width: 900px; }

  h2.big-title { font-size: 2em; }

  h2.title { font-size: 1.7em; }

  p.text { font-size: 1.1em; }
}

/* Estilo -> celulares */
@media screen and (max-width: 480px) {
  header, section, footer { width: auto; }

  .container {
    width: 100%;
    max-width: 340px;
    min-height: 750px;
    /* max-height: 850px; */ }

  .header .container {
    max-width: 400px;
    height: 100px; }

  .footer .container { max-width: 400px; }

  .contact .container {
    min-height: 530px; }

  h2.big-title { font-size: 1.6em; }

  h2.title { font-size: 1.4em; }

  p.text { font-size: 1em; }
}





/* HEADER - NAV */
.header .container {
  flex-direction: row;
  justify-content: space-between;
  padding: 1em 3em; }

.header .container .logo { width: 8em; }

.header .container .nav .nav-list {
  list-style-type: none;
  display: flex;
  gap: 2em; }

.header .container .nav .nav-list .nav-link {
  font-size: 1.3em;
  font-weight: 600;
  color:  var(--ddetails);
  transition: var(--transition); }

.header .container .nav .nav-list .nav-link:hover,
.header .container .nav .nav-list .nav-link.active {
  color: var(--text-color); }

.header .container .nav .nav-mini { gap: 1.5em; }

.header .container .nav .nav-mini .nav-link i {
  font-size: 1.5em;
  color:  var(--text-color);
  transition: var(--transition); }

.header .container .nav .nav-mini .nav-link:hover i,
.header .container .nav .nav-mini .nav-link.active i {
  color: var(--ddetails); }

.header .container .nav .nav-mini { display: none; }

/* Estilo -> tabletas */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .header .container { justify-content: space-evenly; }

  .header .container .logo { width: 6em; }

  .header .container .nav .nav-list { gap: 1.5em; }

  .header .container .nav .nav-list .nav-link { font-size: 1.1em; }
}

/* Estilo -> celulares */
@media screen and (max-width: 767px) {
  .header .container .logo { width: 3em; }

  .header .container .nav .nav-list { display: none; }

  .header .container .nav .nav-mini { display: flex; }
}





/* SECTION - HOME */
.home .container {
  position: relative;
  padding: 0 1em;
  gap: 2em; }

.home .container .home-info {
  position: absolute;
  left: 3em;
  width: 40%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2.5em; }

.home .container .home-info .text { width: 90%; }

.home .container .img-logo {
  position: absolute;
  right: 1em;
  top: 10em; }

.home .container .img-logo .home-img {
  position: absolute;
  right: 0;
  width: 29em;
  height: 25em;
  background-image: var(--backgroud-deco);
  border-radius: 70px; }

.home .container .img-logo .logo {
  position: absolute;
  top: 4em;
  right: 13em;
  width: 20em; }

.home .container:hover .logo-bl { animation: float 3s infinite; }

@keyframes float {
    0% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0); }
}

/* Estilo -> tabletas */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .home .container {
    position: static;
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
    gap: 3em; }

  .home .container .home-info {
    position: static;
    width: 80%; }

  .home .container .home-info .text { width: 100%; }

  .home .container .img-logo { position: static; }

  .home .container .img-logo .home-img { display: none; }

  .home .container .img-logo .logo {
    position: static;
    width: 17em;
    animation: float 3s infinite; }
}

/* Estilo -> celulares */
@media screen and (max-width: 767px) {
  .home .container {
    position: static;
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
    gap: 4em; }

  .home .container .home-info {
    position: static;
    width: 100%;
    gap: 2em; }

  .home .container .home-info .text { width: 100%; }

  .home .container .img-logo { position: static; }

  .home .container .img-logo .home-img { display: none; }

  .home .container .img-logo .logo {
    position: static;
    width: 10em;
    animation: float 3s infinite; }
}





/* SECTION - ABOUT */
.about { margin: 4em 0em; }

.about .container {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0em 1em;
  gap: 3em; }

.about .container .content-about {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6em; }

.about .container .content-about .about-info{
  width: 70%;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 5rem; }

.about .container .content-about .about-info .about-img { width: 17em; }

.about .container .content-about .three-cards {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 2.5em; }

.about .container .content-about .three-cards .about-card {
  position: relative;
  width: 25%;
  height: auto;
  display: flex;
  flex-direction: column;
  padding: 1.2em 3em;
  gap: .8rem; }

.about .container .content-about .three-cards .about-card:hover::before {
  clip-path: circle(100%); }

.about .container .content-about .three-cards .about-card span {
  position: absolute;
  top: 1.5em;
  left: 2.3em;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.6em;
  border-radius: 50%; }

.about .container .content-about .three-cards .about-card span .bx { z-index: 3; }

.about .container .content-about .three-cards .about-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background-color: var(--ldetails);
  z-index: 2;
  clip-path: circle(1.8em at 71px 50px);
  transition: clip-path 1s ease; }

.about .container .content-about .three-cards .about-card .title {
  padding-top: 4em;
  z-index: 3; }

.about .container .content-about .three-cards .about-card .text-about {
  font-size: 1em;
  color: var(--ltext-color);
  z-index: 3; }

/* Estilo -> tabletas */
@media screen and (min-width: 480px) and (max-width: 1024px) {
  .about .container { gap: 3em; }

  .about .container .content-about { gap: 4em; }

  .about .container .content-about .about-info { width: 90%; }

  .about .container .content-about .about-info .about-img { display: none; }

  .about .container .content-about .three-cards {
    flex-direction: column;
    align-items: center; }

  .about .container .content-about .three-cards .about-card {
    width: 90%;
    flex-direction: row;
    gap: 4rem; }

  .about .container .content-about .three-cards .about-card span {
    top: 1.5em;
    left: 2.7em; }

  .about .container .content-about .three-cards .about-card::before { left: .6em; }

  .about .container .content-about .three-cards .about-card .text-about { font-size: 1.1em; }

  .about .container .content-about .three-cards .about-card .text-about li { font-size: 1em; }
}

/* Estilo -> celulares */
@media screen and (max-width: 480px) {
  .about .container { gap: 2em; }

  .about .container .content-about { gap: 3em; }

  .about .container .content-about .about-info { width: 100%; }

  .about .container .content-about .about-info .about-img { display: none; }

  .about .container .content-about .three-cards { flex-direction: column; }

  .about .container .content-about .three-cards .about-card {
    width: 95%;
    gap: 1rem; }

  .about .container .content-about .three-cards .about-card .text-about { font-size: 1em; }

  .about .container .content-about .three-cards .about-card .text-about li { font-size: 1em; }
}





/* SECTION - SERVICES */
.services {
  z-index: 1;
  background-color: var(--pri-color);
  margin: 8em 0em; }

.services .container {
  padding: 5em 1em;
  gap: 3em; }

.services .container .content-cards {
  width: 90%;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center; }

.services .container .content-cards .service-card {
  width: 13em;
  height: 13em;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1em;
  gap: 2rem;
  transition: var(--transition); }

.services .container .content-cards .service-card:hover { transform: scale(110%); }

.services .container .content-cards .service-card .bx {
  width: 1.8em;
  height: 1.8em;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2.5em;
  border-radius: 50%;
  background: #fbfcff;
  transition: var(--transition); }

.services .container .content-cards .service-card .title {
  font-size: 1.1em; 
  font-weight: 500; }

/* Estilo -> tabletas */
@media screen and (min-width: 480px) and (max-width: 1024px) {
  .services .container { gap: 2.5em; }

  .services .container .content-cards {
    width: 100%;
    justify-content: space-between; }
}

/* Estilo -> celulares */
@media screen and (max-width: 480px) {
  .services .container { gap: 2.5em; }

  .services .container .btn { width: 70%; }

  .services .container .content-cards {
    width: 100%;
    flex-direction: column;
    gap: 1.5em; }

  .services .container .content-cards .service-card {
    flex-direction: row;
    width: 100%;
    height: auto; }

  .services .container .content-cards .service-card .bx { font-size: 2em; }

  .services .container .content-cards .service-card .title {
    width: 60%;
    font-size: 1em;  }
}





/* SECTION - CONTACT */
.contact {
  margin: 10em 0em; }

.contact .container {
  gap: 1em;
  border-radius: 40px;
  background: linear-gradient(145deg, #ebebeb, #ffffff);
  box-shadow:  28px 28px 48px #d9d9d9,
              -28px -28px 48px #ffffff; }

.contact .container .info {
  width: 72%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2em;
  margin-bottom: 3em; }

.contact .container .info .text { text-align: center; }

.contact .container .social {
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 2rem;  }

/* Estilo -> tabletas */
@media screen and (min-width: 480px) and (max-width: 1024px) {
  .contact .container { gap: 1em; }

  .contact .container .info { gap: 2em; }
}

/* Estilo -> celulares */
@media screen and (max-width: 480px) {
  .contact .container { gap: 2em; }

  .contact .container .info {
    width: 72%;
    gap: 2em;
    margin-bottom: 2em; }

  .contact .container .info .text { text-align: center; }

  .contact .container .social {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5em; }
}





/* FOOTER */
.footer .container {
  padding: 2em 1em;
  gap: 2em; }

.footer .container .content-footer {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center; }

.footer .container .content-footer .logo { width: 8em; }

.footer .container .content-footer .other-nav {
  display: flex;
  flex-direction: row;
  gap: 2em; }

.footer .container .content-footer .other-nav .nav-link {
  font-size: 1.2em;
  font-weight: 500;
  transition: var(--transition);
  font-weight: 500;
  color: var(--ddetails); }

.footer .container .content-footer .other-nav .nav-link:hover { color: var(--text-color); }

.footer .container .footer-bottom {
  display: flex;
  justify-content: center;
  align-items: center;}

.footer .container .content-footer .other-nav-mini i { 
  font-size: 2.3em;
  color: var(--ddetails); }

.footer .container .content-footer .other-nav-mini { display: none; }

/* Estilo -> tabletas */
@media screen and (min-width: 480px) and (max-width: 1024px) {
  .footer .container .content-footer .logo { width: 4em; }

  .footer .container .content-footer .other-nav {
    display: flex;
    flex-direction: row;
    gap: 1.5em; }

  .footer .container .content-footer .other-nav .nav-link {
    font-size: 1.1em;
    font-weight: 500;
    transition: var(--transition);
    font-weight: 500;
    color: var(--ddetails); }

  .footer .container .footer-bottom {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.8em;
    font-weight: 300; }
}

/* Estilo -> celulares */
@media screen and (max-width: 480px) {
  .footer .container .content-footer .logo { width: 3em; }

  .footer .container .content-footer .other-nav { display: none; }

  .footer .container .content-footer .other-nav-mini { display: flex; }

  .footer .container .footer-bottom {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.8em;
    font-weight: 300; }
}










/*                    services.html                    */

/* SECTIONS - SERV */
.serv .container {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  padding: 0 1em;
  gap: 5em; }

.serv:nth-child(2) {
  background: var(--backgroud-deco);
  gap: 4em; }

.serv:nth-child(2n) .container {
  flex-direction: row-reverse;
  padding: 10em 0; }

.serv .container .serv-info {
  display: flex;
  flex-direction: column;
  width: 40%;
  gap: 2em; }

.serv .container .serv-img {
  width: 22em;
  border-radius: 2px;
  transition: var(--transition); }

.serv .container .serv-img:hover { transform: scale(105%); }

/* Estilo -> tabletas */
@media screen and (min-width: 480px) and (max-width: 1024px) {
  .serv .container {
    flex-direction: column-reverse;
    margin: 4em 0;
    gap: 2em; }

  .serv:nth-child(2n) .container {
    flex-direction: column-reverse;
    padding: 2em 0; }

  .serv .container .serv-info {
    width: 80%;
    gap: 2em; }

  .serv .container .serv-img { width: 16em; }
}

/* Estilo -> celulares */
@media screen and (max-width: 480px) {
  .serv .container {
    flex-direction: column-reverse;
    margin: 4em 0;
    gap: 2em; }

  .serv:nth-child(2n) .container {
    flex-direction: column-reverse;
    padding: 0;
    gap: 2em; }

  .serv .container .serv-info {
    width: 100%;
    gap: 2em; }

  .serv .container .serv-info li { font-size: 1em; }

  .serv .container .serv-img { width: 11em; }
}










/*                    projects.html                    */

/* SECTION - PROJS */
.projs {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 5em 0em; }

.projs .container {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 5em; }

.projs .container .proj-two {
  display: flex;
  justify-content: space-evenly;
  margin: .5em 0em; }

.projs .container .proj-two .proj {
  width: 40%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 3em 0em;
  border-radius: 10px;
  gap: 3em;
  transition: var(--transition); }

.projs .container .proj-two .proj:hover { transform: rotate(1deg); }

.projs .container .proj-two .proj .proj-img {
  width: 16em;
  border-radius: 2px; }

.projs .container .proj-two .proj .proj-info {
  width: 75%;
  display: flex;
  flex-direction: column;
  gap: 1em; }

.projs .container .proj-two .proj {
  border-radius: 10px;
  border: 1px solid var(--details);
  background-color: #ffffff45; }

.projs .container .proj-two:nth-child(1) .proj:nth-child(1) {
  background: var(--ldetails);
  border: none; }

.projs .container .proj-two:nth-child(2) .proj:nth-child(2) {
  background: var(--pri-color);
  border: none; }

/* Estilo -> tabletas */
@media screen and (min-width: 480px) and (max-width: 1024px) {
  .projs .container { gap: 4em; }

  .projs .container .proj-two {
    flex-direction: column;
    gap: 4em; }

  .projs .container .proj-two .proj {
    width: 100%;
    flex-direction: row;
    padding: 3em 2em; }

  .projs .container .proj-two .proj .proj-img { width: 11em; }

  .projs .container .proj-two .proj .proj-info { width: 74%; }

  .projs .container .proj-two:nth-child(2) .proj:nth-child(1) {
    background: var(--pri-color);
    border: none; }

  .projs .container .proj-two:nth-child(2) .proj:nth-child(2) { 
    border: 1px solid var(--details);
    background: transparent; }
}

/* Estilo -> celulares */
@media screen and (max-width: 480px) {
  .projs .container { gap: 4em; }

  .projs .container .proj-two {
    flex-direction: column;
    gap: 4em; }

  .projs .container .proj-two .proj { width: 100%; }

  .projs .container .proj-two .proj .proj-img { width: 10em; }

  .projs .container .proj-two .proj .proj-info { width: 80%; }

  .projs .container .proj-two:nth-child(2) .proj:nth-child(1) {
    background: var(--pri-color);
    border: none; }

  .projs .container .proj-two:nth-child(2) .proj:nth-child(2) { 
    border: 1px solid var(--details);
    background: transparent; }
}