*{
  box-sizing: border-box;
  min-width: 0;
  
}
*:before, *:after {
  box-sizing: inherit;
}

body{
  min-height: 100dvh;
  margin: 0;
  background-color: #fefcfd;
  font-family: "Alegreya Sans", sans-serif;
}

h1,h2,h3,h4{
  text-wrap: balance;
}

p{
  text-wrap: pretty;
}


.hero{
    width: 100%;
    position: relative;
    /* background-color: #e8cbd9; */
    max-height: 100dvh;  
    aspect-ratio: 16/9;
    display: flex;
    justify-content: right;
    align-items: stretch;
    background-image: linear-gradient(
      175deg,
      hsl(331deg 39% 85%) 0%,
      hsl(331deg 39% 86%) 0%,
      hsl(331deg 38% 87%) 1%,
      hsl(331deg 38% 88%) 2%,
      hsl(331deg 38% 88%) 3%,
      hsl(331deg 38% 89%) 4%,
      hsl(331deg 38% 90%) 5%,
      hsl(331deg 38% 91%) 6%,
      hsl(331deg 38% 91%) 8%,
      hsl(332deg 37% 92%) 10%,
      hsl(332deg 37% 93%) 12%,
      hsl(332deg 37% 93%) 14%,
      hsl(332deg 37% 94%) 17%,
      hsl(332deg 37% 95%) 21%,
      hsl(332deg 37% 95%) 26%,
      hsl(332deg 37% 96%) 32%,
      hsl(332deg 37% 97%) 41%,
      hsl(332deg 36% 97%) 56%,
      hsl(332deg 36% 98%) 76%,
      hsl(332deg 36% 99%) 88%,
      hsl(332deg 36% 99%) 95%,
      hsl(0deg 0% 100%) 100%
    );
}

.hero-bg-img{
  position: absolute;
  top: 0;
  left: 0;
  max-width: 50%;
  max-height: 100dvh;
  mask-image: linear-gradient(black 85%, transparent );
}
.hero-content {
  max-width: 45%;
  display: flex;
  justify-content:left;
  align-items: center;
}
.hero-content img{
  max-width: 85%;
  height: auto;
}
.separator{
  width: 100%;
  max-width: 1450px;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 1;
}
.separator img{
 max-width: 100%;
 /* mask-image: linear-gradient(black -10%, transparent); */
}

/* section-services */
.section-services{
  width: calc(100% - 28px);
  margin: 30px auto;
  max-width: 1450px;
}

.services-container{
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2,1fr);
}
@media (min-width:600px) {
  .services-container{
    grid-template-columns: repeat(2,1fr);
  }
  
}
@media (min-width:800px) {
  .services-container{
    grid-template-columns: repeat(4,1fr);
  }
  
}

.card-wrapp {
  position: relative;
  overflow: hidden;
}
.card-wrapp .card-text  {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 10;
  transform: translate(-50%,-50%);
}
.card-text p{
  color: #a45b72;
  font-weight: 400;
  font-size: 14px;
  transition: all .3s ease;
  padding: 12px 15px;
  border-radius: 10px;
  background: #ebd8e1;
  text-align: center;
  margin: 0;
}
@media(min-width:800px){
  .card-text p{
    font-size: 21px;
  }
}

.card-text p.link{
  cursor: pointer;
}

.card-img {
  /* width: 100%; */
  /* aspect-ratio: 1/1; */
  mask-image: url(/img/mask.svg);
 overflow: hidden;
  mask-position: center center;
  mask-repeat: no-repeat;
  mask-size: 92%;
  transition: all .5s ease;
}
 .card-img img{
  width: 100%;
  object-fit: cover;
  max-width: 100%;
  vertical-align: top;
  aspect-ratio: 1/1;
  
}

.card-wrapp:hover .card-img{
  mask-size: 100%;
  transform: rotate(12deg);
}
.card-wrapp .wrapp-img-card{
  transition: all .5s ease;
  position: relative;
}

.card-wrapp:hover .wrapp-img-card{
  transform: rotate(-10deg);

}

.card-wrapp .wrapp-img-card::after{
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color:#a45b72;
  z-index: 200;
  opacity: .4;
}
.card-wrapp:hover .wrapp-img-card::after{
  opacity: .2;
}

.card-wrapp:hover p{
  /* padding: 2px 4px; */
  background: rgba(109, 106, 107, 0.4);
  color: white;
  text-shadow: 1px 1px 3px #000;
}

footer{
  background-color: #e0b0bf;
  min-height: 70dvh;
  display: grid;
  grid-template-columns: 1fr;
  margin-top: 50px;
  z-index: 501;
  position: relative;
  
}
@media (min-width:800px){
  footer{
    grid-template-columns: 1fr 1fr;
  }
}

footer .footer-map{
  width: 100%;
  min-height: 500px;
}
.footer-map #map, .footer-map iframe{
  width: 100%;
  height: 100%;
}
footer .contacto-container{
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.contacto-wrap{
display: flex;
flex-direction: column;
align-items: center;
padding: 40px 0;
}
.contacto-wrap h2{
  color: #a45b72;
  font-weight: 400;
  margin: 20px 0;
  text-align: center;
  
}
.contacto-wrap a.mail{
  margin: 15px 0;
  color: #a45b72;
  font-weight: 400;
  font-size: 22px;
  transition: all .3s ease;
  padding: 8px 15px 12px 15px;
  border-radius: 10px;
  background: #ebd8e1

}
.contacto-wrap a.mail:hover{
  background: #e8cbd9
}


footer .social-icons{
  display: flex;
  justify-content: center;
  align-items: center;
}


footer svg{
  width: 50px;
  height: 50px;
  fill: #a45b72;
  transition: all .3s ease;
  animation-duration: .3s;
  animation-name: iconAnimationInit;
  animation-fill-mode:forwards;
  
}
footer [class^='icon-']:hover svg{
   animation-duration: .3s;
  animation-name: iconAnimation;
  animation-fill-mode:forwards
}
@keyframes iconAnimation {
  from {
    transform: scale(1);
  }

  50%{
    transform: scale(0);
  }

  100% {
    transform: scale(1) translateY(-3px);
  }
}
@keyframes iconAnimationInit {
  from {
    transform: scale(1) translateY(-3px);
  }

  100% {
    transform: scale(1) translateY(0);
  }
}



footer .icon-instagram{
  margin: 0px 12px;
}
footer .icon-instagram svg{
  width: 56px;
  height: 56px;
}

footer .icon-facebook:hover svg{
  fill:#1877f2
}
footer .icon-instagram:hover svg #instIcon1{
  fill: url(#paint0_radial_87_7153);
}
footer .icon-instagram:hover svg #instIcon2{
  fill:url(#paint1_radial_87_7153);
}
footer .icon-instagram:hover svg #instIcon3{
  fill: url(#paint2_radial_87_7153);
}

footer .icon-whatsapp:hover svg,footer .icon-whatsapp:hover svg path:first-of-type{
  fill:#25d366;
}




/**
 * 1. Make the dialog container, and its child overlay spread across
 *    the entire window.
 */
 .dialog-container,
 .dialog-overlay {
   position: fixed; /* 1 */
   top: 0; /* 1 */
   right: 0; /* 1 */
   bottom: 0; /* 1 */
   left: 0; /* 1 */
 }
 
 /**
   * 1. Make sure the dialog container and all its descendants sits on
   *    top of the rest of the page.
   * 2. Make the dialog container a flex container to easily center the
   *    dialog.
   */
 .dialog-container {
   z-index: 2000; /* 1 */
   display: flex; /* 2 */
 }
 
 /**
   * 1. Make sure the dialog container and all its descendants are not
   *    visible and not focusable when it is hidden.
   */
 .dialog-container[aria-hidden='true'] {
   display: none; /* 1 */
 }
 
 /**
   * 1. Make the overlay look like an overlay.
   */
 .dialog-overlay {
   background-color: rgb(43 46 56 / 0.9); /* 1 */
   animation: fade-in 200ms both;
 }
 
 /**
   * 1. Vertically and horizontally center the dialog in the page.
   * 2. Make sure the dialog sits on top of the overlay.
   * 3. Make sure the dialog has an opaque background.
   */
 .dialog-content {
   margin: auto; /* 1 */
   z-index: 2; /* 2 */
   position: relative; /* 2 */
   /* 3 */
   /* background-color: white; */
   background-image: linear-gradient(
    125deg,

    #ffffff 60%,
    #ffffff 100%
  );
 
   animation: fade-in 400ms 200ms both, slide-up 400ms 200ms both;
   padding: 1em;
   width: 100%;
   max-width: 900px;
   border-radius: 5px;

 }
 
 @media screen and (min-width: 700px) {
   .dialog-content {
     padding: 2em;
   }
 }
 @media screen and (min-width: 1200px) {
   .dialog-content {
     padding: 3em 5em;
   }
 }
 
 @keyframes fade-in {
   from {
     opacity: 0;
   }
 }
 
 @keyframes slide-up {
   from {
     transform: translateY(10%);
   }
 }
 
 @media (prefers-reduced-motion: reduce) {
   .dialog-overlay,
   .dialog-content {
     animation: none;
   }
 }
 

 .dialog-close {
   position: absolute;
   top: 0.5em;
   right: 0.5em;
   border: 0;
   padding: 0.25em;
   background-color: transparent;
   font-size: 1.5em;
   width: 1.5em;
   height: 1.5em;
   text-align: center;
   cursor: pointer;
   transition: 0.15s;
   border-radius: 50%;
 }
 
 .dialog-close:hover {
   background-color: rgb(50 50 0 / 0.15);
 }
 
 @media screen and (min-width: 700px) {
   .dialog-close {
     top: 1em;
     right: 1em;
   }
 }

 .dialog-content h1 {
  margin: 0;
  font-size: 1.25em;
  position: relative;
  margin-top: 30px;
  width: 100%;
  text-align: left;
  font-size: 28px;
  color: #fa409c;
}
.dialog-content h1::after{
 content: '';
}

.dialog-content .modal-container{
  display: flex;
  flex-direction: column;
}
@media screen and (min-width: 700px) {
  .dialog-content .modal-container{
    flex-direction: row;
  }
  .dialog-content .modal-container ul{
    flex-basis: 66%;
  }
  .dialog-content .modal-container div{
    flex-basis: 33%;
  }
 
}

.dialog-content .modal-container img{
  width: 100%;
  height: auto;
}
.dialog-content ul{
  display: grid;
  grid-template-columns: repeat(2,1fr);
  padding: 0;
  list-style: none;
}
 
 .dialog-content li{
  font-size: 22px;
  padding: 0;
  margin: 0;
  padding-left: 10px;
  position: relative;
 }
 .dialog-content li::after{
  content: "";
  width: 4px;
  height: 4px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 50%;
  background-color: #fa409c;
  left: 2px;
 }

.float-wa-btn{

  position:fixed;
  width:45px;
  height:45px;
  bottom:30px;
  right:10px;
  color:#FFF;
  text-align:center;
  font-size:30px;
  z-index:50;  

  opacity: 0;
  transform: scale(0,0);
  /* animation-timing-function: cubic-bezier(.26, .53, .74, 1.2); */
  animation-fill-mode: forwards;
  animation-name: wa-btn-in;
  animation-duration: 0.5s;
  animation-delay:2s;
}
@media(min-width:700px){
  .float-wa-btn{
    right: 20px;
    width:50px;
    height:50px;
  }
}

.float-wa-btn:hover svg{
  filter: drop-shadow(2px 2px 3px #767676);
}
.float-wa-btn svg{
  transition: all .3s ease;
  filter: drop-shadow(2px 2px 2px #acabab);
  
}

.float-wa-btn span{
  position: absolute;
  background-color: #ffffff;
  padding:8px 13px;
  border-radius: 2px;
  border: 1px solid #d3d0d0;
  background-origin: 2px 2px 15px 2px rgba(0,0,0,.17);
  right: 100%;
  top: 50%;
  color: gray;
  font-size: 17px;
  pointer-events: none;
  border-radius: 4px; 
  animation-name: wa-animate-pop-out;
  opacity: 0;
  transform:  translate(-8px,-50%) scale(0,0);
  animation-duration: 0.3s;
  animation-timing-function: cubic-bezier(.26, .53, .74, 1.2);
  animation-fill-mode: forwards;
  transform-origin: right center;
}
.float-wa-btn:hover span{
  animation-name: wa-animate-pop;
}

.float-wa-btn span::after{
  content: "";
  position: absolute;
  top:50%;
  transform: translate(-50%,-50%) rotate(45deg);
  left: 100%;
  width: 10px;
  height: 10px;
  background: #fff;
  border: 1px solid #d3d0d0;
  border-bottom:1px ;
  border-left: 1px; 

}

@keyframes wa-animate-pop {
  0% {
    opacity: 0;
    transform:  translate(-8px,-50%) scale(0,0);
  }
  100% {
    opacity: 1;
    transform:  translate(-8px,-50%) scale(1, 1);
  }
}
@keyframes wa-animate-pop-out {
  0% {
    opacity: 1;
    transform:  translate(-8px,-50%) scale(1, 1);
  }
  100% {
    opacity: 0;
    transform:  translate(-8px,-50%) scale(0,0);
  }
}
@keyframes wa-btn-in {
  0% {
    opacity: 0;
    
  }
  100% {
    opacity: 1;
    transform: scale(1,1);
  }
}