* {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

@import url("https://fonts.googleapis.com/css?family=Quicksand:400,500,700");

html,
body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Quicksand", sans-serif;
  font-size: 62.5%;
  font-size: 10px;
}

/*-- Inspiration taken from abdo steif -->
/* --> https://codepen.io/abdosteif/pen/bRoyMb?editors=1100*/

/* Navbar section */

.affix {
  padding: 0;
  background-color: #111111ba;
  backdrop-filter: blur(10px);
}



.myH2 {
  text-align: center;
  font-size: 4rem;
}

.myP {
  text-align: justify;
  padding-left: 15%;
  padding-right: 15%;
  font-size: 20px;
}

.nav {
  width: 100%;
  height: 65px;
  position: fixed;
  line-height: 65px;
  text-align: center;
}

.nav div.logo {
  float: left;
  width: auto;
  height: auto;
  padding-left: 3rem;
}

.nav div.logo a {
  text-decoration: none;
  color: #fff;
  font-size: 2.5rem;
}

.text-portada {
  text-align: center;
  padding: 200px;
  font-size: 50px;
  color: #f5d9a5;
}

/* Home section */

.home {
  width: 100%;
  height: 100vh;
  background-image: url(/img/portada-intro.png);
  background-position: center top;
  background-size: cover;
  border-bottom-left-radius: 50px;
  border-bottom-right-radius: 300px;
}

.navTrigger {
  display: none;
}

.nav {
  padding-top: 20px;
  padding-bottom: 20px;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
  z-index: 1;
}

.logo img {
  height: 65px;
  /* ajusta el valor del alto según el tamaño deseado */
  width: auto;
  /* la anchura se ajusta automáticamente de acuerdo al alto especificado */
  display: block;
  /* establece que la imagen se muestre como un elemento de bloque */
}

/*Loadig*/
/* Normal Usage */
.spinner:before {
  transform: rotateX(60deg) rotateY(45deg) rotateZ(45deg);
  animation: 750ms rotateBefore infinite linear reverse;
}

.spinner:after {
  transform: rotateX(240deg) rotateY(45deg) rotateZ(45deg);
  animation: 750ms rotateAfter infinite linear;
}

.spinner:before,
.spinner:after {
  box-sizing: border-box;
  content: '';
  display: block;
  position: absolute;
  margin-top: -5em;
  margin-left: -5em;
  width: 10em;
  height: 10em;
  transform-style: preserve-3d;
  transform-origin: 50%;
  transform: rotateY(50%);
  perspective-origin: 50% 50%;
  perspective: 340px;
  background-size: 10em 10em;
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjI2NnB4IiBoZWlnaHQ9IjI5N3B4IiB2aWV3Qm94PSIwIDAgMjY2IDI5NyIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWxuczpza2V0Y2g9Imh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaC9ucyI+CiAgICA8dGl0bGU+c3Bpbm5lcjwvdGl0bGU+CiAgICA8ZGVzY3JpcHRpb24+Q3JlYXRlZCB3aXRoIFNrZXRjaCAoaHR0cDovL3d3dy5ib2hlbWlhbmNvZGluZy5jb20vc2tldGNoKTwvZGVzY3JpcHRpb24+CiAgICA8ZGVmcz48L2RlZnM+CiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBza2V0Y2g6dHlwZT0iTVNQYWdlIj4KICAgICAgICA8cGF0aCBkPSJNMTcxLjUwNzgxMywzLjI1MDAwMDM4IEMyMjYuMjA4MTgzLDEyLjg1NzcxMTEgMjk3LjExMjcyMiw3MS40OTEyODIzIDI1MC44OTU1OTksMTA4LjQxMDE1NSBDMjE2LjU4MjAyNCwxMzUuODIwMzEgMTg2LjUyODQwNSw5Ny4wNjI0OTY0IDE1Ni44MDA3NzQsODUuNzczNDM0NiBDMTI3LjA3MzE0Myw3NC40ODQzNzIxIDc2Ljg4ODQ2MzIsODQuMjE2MTQ2MiA2MC4xMjg5MDY1LDEwOC40MTAxNTMgQy0xNS45ODA0Njg1LDIxOC4yODEyNDcgMTQ1LjI3NzM0NCwyOTYuNjY3OTY4IDE0NS4yNzczNDQsMjk2LjY2Nzk2OCBDMTQ1LjI3NzM0NCwyOTYuNjY3OTY4IC0yNS40NDkyMTg3LDI1Ny4yNDIxOTggMy4zOTg0Mzc1LDEwOC40MTAxNTUgQzE2LjMwNzA2NjEsNDEuODExNDE3NCA4NC43Mjc1ODI5LC0xMS45OTIyOTg1IDE3MS41MDc4MTMsMy4yNTAwMDAzOCBaIiBpZD0iUGF0aC0xIiBmaWxsPSIjMDAwMDAwIiBza2V0Y2g6dHlwZT0iTVNTaGFwZUdyb3VwIj48L3BhdGg+CiAgICA8L2c+Cjwvc3ZnPg==);
}

/* sitNSpin.less */
@keyframes rotateBefore {
  from {
    transform: rotateX(60deg) rotateY(45deg) rotateZ(0deg);
  }

  to {
    transform: rotateX(60deg) rotateY(45deg) rotateZ(-360deg);
  }
}

@keyframes rotateAfter {
  from {
    transform: rotateX(240deg) rotateY(45deg) rotateZ(0deg);
  }

  to {
    transform: rotateX(240deg) rotateY(45deg) rotateZ(360deg);
  }
}

.centrar-loadig {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hidden-loading {
  overflow: hidden;
}

/*Pantalla grande*/
.navlinks li {
  transition: all 0.2s ease-in-out;
}

.navlinks li:hover {
  transform: scale(1.2);
}

.txt-inicio {
  font-size: 23px;
  text-align: center;
  padding-left: 60px;
  padding-right: 60px;
  line-height: 1.5;
  color: #bab3b3;
}

.card {
  margin-top: 50px;
  margin: auto;
  width: 90%;
  height: 300px;
  background: #353535;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: left;
  backdrop-filter: blur(10px);
  transition: 0.5s ease-in-out;
}

.card:hover {
  cursor: pointer;
  transform: scale(1.05);
}

.img {
  width: 300px;
  height: 200px;
  border-radius: 10px;
  background-size: cover;
}

.img-logo {
  padding-left: 30px;
  width: 200px;
}

.txt-servicios h2 {
  text-align: center;
  font-family: "Alkatra", sans-serif;
  font-size: 60px;
  color: #f5d9a5;
}

.txt-servicios h3 {
  margin-top: 0;
  text-align: center;
  font-size: 23px;
  color: #5c5c5b;
}

.tema-servicio {
  padding-top: 30px;
  margin-top: 0;
  text-align: center;
  font-size: 30px;
  color: #5c5c5b;
  font-weight: bold;
  font-family: "Alkatra", sans-serif;
}

.sub-servicio {
  width: 80%;
  margin: 0 auto;
  padding-top: 10px;
  margin-top: 0;
  text-align: center;
  font-size: 20px;
  color: #000000;
  line-height: 1.5;
}

#servicios {
  margin-top: 0px;
  padding-top: 95px;
}

/*Galería Animada - Todas las fotos*/
.gallery-title {
  font-size: 2rem;
  text-align: center;
  margin-bottom: 16px;
  font-family: "Alkatra", sans-serif;
  font-size: 60px;
  color: #f5d9a5;
  order: 2;
}

.gallery {
  --d: 18s;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 20px;
  padding: 50px;
  position: relative;
  z-index: 1;
  margin-bottom: 20px;
  order: 1;
}

.contenedor-galeria {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background-color: rgb(74, 72, 72);
  padding: 20px;
  max-width: 1000px;
  width: 89%;
  border-radius: 76px;
  margin-bottom: -90px;
  order: 3;
  z-index: -1;
}

.galeria-animada {
  display: flex;
  justify-content: center;
  align-items: center;
}


.texto-galeria {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30px;
  margin-left: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
  order: 3;
  font-family: "Alkatra";
  color: white;
}

.gallery>img {
  grid-area: 1/1;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border: 10px solid #f2f2f2;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.4666666667);
  animation: slide var(--d) infinite;
  border-radius: 15px;
}

/* Keyframes */

@keyframes slide {

  0%,
  100%,
  80.01% {
    transform: translateX(0%) rotate(var(--r));
    z-index: 3;
  }

  10% {
    transform: translateX(-120%) rotate(var(--r));
    z-index: 3;
  }

  10.01% {
    transform: translateX(-120%) rotate(var(--r));
    z-index: -3;
  }

  20%,
  80% {
    transform: translateX(0%) rotate(var(--r));
    z-index: -3;
  }
}

.gallery>img:last-child {
  animation-name: slide-last;
}

.gallery>img:nth-child(1) {
  animation-delay: calc(0 * var(--d));
  --r: -1deg;
}

.gallery>img:nth-child(2) {
  animation-delay: calc(-0.2 * var(--d));
  --r: 20deg;
}

.gallery>img:nth-child(3) {
  animation-delay: calc(-0.4 * var(--d));
  --r: -13deg;
}

.gallery>img:nth-child(4) {
  animation-delay: calc(-0.6 * var(--d));
  --r: -12deg;
}

.gallery>img:nth-child(5) {
  animation-delay: calc(-0.8 * var(--d));
  --r: -18deg;
}

@keyframes slide-last {

  0%,
  100%,
  90.01% {
    transform: translateX(0%) rotate(var(--r));
    z-index: 3;
  }

  10% {
    transform: translateX(120%) rotate(var(--r));
    z-index: 3;
  }

  10.01% {
    transform: translateX(120%) rotate(var(--r));
    z-index: -3;
  }

  20%,
  90% {
    transform: translateX(0%) rotate(var(--r));
    z-index: -3;
  }
}

.button {
  position: relative;
  z-index: 0;
  width: 240px;
  height: 56px;
  text-decoration: none;
  font-size: 14px;
  font-weight: bold;
  color: #f2f2f2;
  letter-spacing: 2px;
  transition: all .3s ease;
  border: none;
  background: transparent;
  margin: 0px 42%;
  /* Se agrega margen automático para centrar horizontalmente */
}

.ver-mas {
  text-decoration: none;
  color: #f5d9a5;
  font-size: 18px;
  font-family: "Alkatra", sans-serif;
}

.ver-mas:hover {
  color: #ffffff;
}

.button::before,
.button::after,
.button__text::before,
.button__text::before {
  content: '';
  position: absolute;
  height: 3px;
  border-radius: 2px;
  background: #fdfdfdc0;
  transition: all .5s ease;
}

.button::before {
  top: 0;
  left: 54px;
  width: calc(100% - 56px * 2 - 16px);
}

.button::after {
  top: 0;
  right: 54px;
  width: 8px;
}

.button__text::before {
  bottom: 0;
  right: 54px;
  width: calc(100% - 56px * 2 - 16px);
}

.button__text::after {
  top: 0;
  right: 54px;
  width: 8px;
}

.button__line {
  position: absolute;
  top: 0;
  width: 56px;
  height: 100%;
  overflow: hidden;
}

.button__line::before {
  content: '';
  position: absolute;
  top: 0;
  width: 150%;
  height: 100%;
  box-sizing: border-box;
  border-radius: 300px;
  border: #f5d9a5;
}

.button__line:nth-child(1),
.button__line:nth-child(1)::before {
  left: 0;
}

.button__line:nth-child(2),
.button__line:nth-child(2)::before {
  right: 0;
}

.button:hover {
  letter-spacing: 6px;
}

.button:hover::before,
.button:hover .button__text::before {
  width: 8px;
}

.button:hover::after,
.button:hover .button__text::after {
  width: calc(100% - 56px * 2 - 16px);
}

.button__drow1,
.button__drow2 {
  position: absolute;
  z-index: -1;
  border: 1rem;
  transform-origin: 1rem 1rem;
}

.button__drow1 {
  top: -1rem;
  left: 40px;
  width: 2rem;
  height: 0;
  transform: rotate(30deg);
}

.button__drow2 {
  top: 44px;
  left: 77px;
  width: 2rem;
  height: 0;
  transform: rotate(-127deg);
}

.button__drow1::before,
.button__drow1::after,
.button__drow2::before,
.button__drow2::after {
  content: '';
  position: absolute;
}

.button__drow1::before {
  bottom: 0;
  left: 0;
  width: 0;
  height: 2rem;
  border-radius: 1rem;
  transform-origin: 1rem 1rem;
  transform: rotate(-60deg);
}

.button__drow1::after {
  top: -10px;
  left: 45px;
  width: 0;
  height: 2rem;
  border-radius: 1rem;
  transform-origin: 1rem 1rem;
  transform: rotate(-69deg);
}

.button__drow2::before {
  bottom: 0;
  left: 0;
  width: 0;
  height: 2rem;
  border-radius: 1rem;
  transform-origin: 1rem 1rem;
  transform: rotate(-146deg);
}

.button__drow1::after {
  bottom: 26px;
  left: -40px;
  width: 0;
  height: 2rem;
  border-radius: 1rem;
  transform-origin: 1rem 1rem;
  transform: rotate(-262deg);
}

.button__drow1,
.button__drow1::before,
.button__drow1::after,
.button__drow2,
.button__drow2::before,
.button__drow2::after {
  background: #c4a772;
}

.button:hover .button__drow1 {
  animation: drow1 ease-in .06s;
  animation-fill-mode: forwards;
}

.button:hover .button__drow1::before {
  animation: drow2 linear .08s .06s;
  animation-fill-mode: forwards;
}

.button:hover .button__drow1::after {
  animation: drow3 linear .03s .14s;
  animation-fill-mode: forwards;
}

.button:hover .button__drow2 {
  animation: drow4 linear .06s .2s;
  animation-fill-mode: forwards;
}

.button:hover .button__drow2::before {
  animation: drow3 linear .03s .26s;
  animation-fill-mode: forwards;
}

.button:hover .button__drow2::after {
  animation: drow5 linear .06s .32s;
  animation-fill-mode: forwards;
}

@keyframes drow1 {
  0% {
    height: 0;
  }

  100% {
    height: 100px;
  }
}

@keyframes drow2 {
  0% {
    width: 0;
    opacity: 0;
  }

  10% {
    opacity: 0;
  }

  11% {
    opacity: 1;
  }

  100% {
    height: 120px;
  }
}

@keyframes drow3 {
  0% {
    height: 0;
  }

  100% {
    height: 80px;
  }
}

@keyframes drow4 {
  0% {
    height: 0;
  }

  100% {
    height: 120px;
  }
}

@keyframes drow5 {
  0% {
    height: 0;
  }

  100% {
    height: 124px;
  }
}

.container-galeria-bton {
  width: 100%;
  height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* Media qurey section */

@media screen and (min-width: 768px) and (max-width: 1024px) {
  .container {
    margin: 0;
  }
}

@import url("https://fonts.googleapis.com/css?family=Quicksand:400,500,700");

html,
body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Quicksand", sans-serif;
  font-size: 62.5%;
  font-size: 10px;
}

/*-- Inspiration taken from abdo steif -->
/* --> https://codepen.io/abdosteif/pen/bRoyMb?editors=1100*/

/* Navbar section */

.nav {
  width: 100%;
  height: 65px;
  position: fixed;
  line-height: 65px;
  text-align: center;
}

.nav div.logo {
  float: left;
  width: auto;
  height: auto;
  padding-left: 3rem;
}

.nav div.logo a {
  text-decoration: none;
  color: #fff;
  font-size: 2.5rem;
}

.nav div.logo a:hover {
  color: #00e676;
}

.nav div.main_list {
  height: 65px;
  float: right;
}

.nav div.main_list ul {
  width: 100%;
  height: 65px;
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav div.main_list ul li {
  width: auto;
  height: 65px;
  padding: 0;
  padding-right: 3rem;
}

.nav div.main_list ul li a {
  text-decoration: none;
  color: #fff;
  line-height: 65px;
  font-size: 2.4rem;
}

.nav div.main_list ul li a:hover {
  color: #f5d9a5;
}

.text-portada h3 {
  font-family: "Alkatra", sans-serif;
  font-size: 43px;
}

@font-face {
  font-family: "JYZ";
  src: url("/font/Higuen\ Serif.otf") format("opentype");
}

.text-portada h1 {
  font-family: "JYZ", serif;
  font-size: 73px;
}

/* Home section */

.navTrigger {
  display: none;
}

.nav {
  padding-top: 20px;
  padding-bottom: 20px;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

.logo img {
  height: 65px;
  /* ajusta el valor del alto según el tamaño deseado */
  width: auto;
  /* la anchura se ajusta automáticamente de acuerdo al alto especificado */
  display: block;
  /* establece que la imagen se muestre como un elemento de bloque */
}

/* Animation */
/* Inspiration taken from Dicson https://codemyui.com/simple-hamburger-menu-x-mark-animation/ */

.navTrigger {
  cursor: pointer;
  width: 30px;
  height: 25px;
  margin: auto;
  position: absolute;
  right: 30px;
  top: 0;
  bottom: 0;
}

.navTrigger i {
  background-color: #fff;
  border-radius: 2px;
  content: "";
  display: block;
  width: 100%;
  height: 4px;
}

.navTrigger i:nth-child(1) {
  -webkit-animation: outT 0.8s backwards;
  animation: outT 0.8s backwards;
  -webkit-animation-direction: reverse;
  animation-direction: reverse;
}

.navTrigger i:nth-child(2) {
  margin: 5px 0;
  -webkit-animation: outM 0.8s backwards;
  animation: outM 0.8s backwards;
  -webkit-animation-direction: reverse;
  animation-direction: reverse;
}

.navTrigger i:nth-child(3) {
  -webkit-animation: outBtm 0.8s backwards;
  animation: outBtm 0.8s backwards;
  -webkit-animation-direction: reverse;
  animation-direction: reverse;
}

.navTrigger.active i:nth-child(1) {
  -webkit-animation: inT 0.8s forwards;
  animation: inT 0.8s forwards;
}

.navTrigger.active i:nth-child(2) {
  -webkit-animation: inM 0.8s forwards;
  animation: inM 0.8s forwards;
}

.navTrigger.active i:nth-child(3) {
  -webkit-animation: inBtm 0.8s forwards;
  animation: inBtm 0.8s forwards;
}

/* Media query for smaller screens */

@media screen and (max-width: 768px) {
  .nav div.logo {
    float: none;
    display: block;
    margin: auto;
  }

  .nav div.main_list {
    width: 100%;
    position: static;
    display: none;
  }

  .nav div.show_list {
    display: none;
  }

  .nav div.main_list ul {
    flex-direction: column;
    width: 100%;
    height: auto;
    display: none;
  }

  .nav div.main_list ul li {
    width: 100%;
    text-align: center;
  }

  .navTrigger {
    display: block;
  }

  .home {
    height: auto;
  }

  .text-portada {
    padding: 160px 20px;
  }

  .text-portada h3 {
    font-family: "Alkatra", sans-serif;
    font-size: 23px;
  }

  @font-face {
    font-family: "JYZ";
    src: url("/font/Higuen\ Serif.otf") format("opentype");
  }

  .text-portada h1 {
    font-family: "JYZ", serif;
    font-size: 35px;
  }

  /* Mobile menu section */

  .menu {
    padding-top: 65px;
    max-height: 0;
    display: none;
  }

  .menu.show-menu {
    display: block;
  }

  .menu ul {
    display: flex;
    flex-direction: column;
  }

  .menu li {
    border-bottom: none;
  }

  .nav div.main_list ul {
    width: 100%;
    height: 65px;
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .nav div.main_list ul li {
    margin-top: 30px;
    width: auto;
    height: 60px;
    padding: 0;
    padding-right: 3rem;
  }

  .nav div.main_list ul li a {
    text-decoration: none;
    color: #fff;
    line-height: 65px;
    font-size: 2.4rem;
  }

  .nav div.main_list ul li a:hover {
    color: #f5d9a5;
  }

  .navTrigger {
    display: block;
  }

  .nav div.logo {
    margin-left: -14px;
  }

  .nav div.main_list {
    width: 100%;
    height: 0;
    overflow: hidden;
  }

  .nav div.show_list {
    height: auto;
    display: none;
  }

  .nav div.main_list ul {
    flex-direction: column;
    width: 100%;
    height: 100vh;
    right: 0;
    left: 0;
    bottom: 0;
    background-color: #111;
    /*same background color of navbar*/
    background-position: center top;
  }

  .nav div.main_list ul li {
    width: 100%;
    text-align: center;
  }

  .nav div.main_list ul li a {
    width: 100%;
    font-size: 3rem;
    padding: 20px;
  }

  .nav div.media_button {
    display: block;
  }

  .nav {
    width: 100%;
    height: 65px;
    position: fixed;
    line-height: 65px;
    text-align: center;
    z-index: 100;
    /* agrega una propiedad z-index para que el menú aparezca encima de la card */
  }

  @-webkit-keyframes inM {
    50% {
      -webkit-transform: rotate(0deg);
    }

    100% {
      -webkit-transform: rotate(45deg);
    }
  }

  @keyframes inM {
    50% {
      transform: rotate(0deg);
    }

    100% {
      transform: rotate(45deg);
    }
  }

  @-webkit-keyframes outM {
    50% {
      -webkit-transform: rotate(0deg);
    }

    100% {
      -webkit-transform: rotate(45deg);
    }
  }

  @keyframes outM {
    50% {
      transform: rotate(0deg);
    }

    100% {
      transform: rotate(45deg);
    }
  }

  @-webkit-keyframes inT {
    0% {
      -webkit-transform: translateY(0px) rotate(0deg);
    }

    50% {
      -webkit-transform: translateY(9px) rotate(0deg);
    }

    100% {
      -webkit-transform: translateY(9px) rotate(135deg);
    }
  }

  @keyframes inT {
    0% {
      transform: translateY(0px) rotate(0deg);
    }

    50% {
      transform: translateY(9px) rotate(0deg);
    }

    100% {
      transform: translateY(9px) rotate(135deg);
    }
  }

  @-webkit-keyframes outT {
    0% {
      -webkit-transform: translateY(0px) rotate(0deg);
    }

    50% {
      -webkit-transform: translateY(9px) rotate(0deg);
    }

    100% {
      -webkit-transform: translateY(9px) rotate(135deg);
    }
  }

  @keyframes outT {
    0% {
      transform: translateY(0px) rotate(0deg);
    }

    50% {
      transform: translateY(9px) rotate(0deg);
    }

    100% {
      transform: translateY(9px) rotate(135deg);
    }
  }

  @-webkit-keyframes inBtm {
    0% {
      -webkit-transform: translateY(0px) rotate(0deg);
    }

    50% {
      -webkit-transform: translateY(-9px) rotate(0deg);
    }

    100% {
      -webkit-transform: translateY(-9px) rotate(135deg);
    }
  }

  @keyframes inBtm {
    0% {
      transform: translateY(0px) rotate(0deg);
    }

    50% {
      transform: translateY(-9px) rotate(0deg);
    }

    100% {
      transform: translateY(-9px) rotate(135deg);
    }
  }

  @-webkit-keyframes outBtm {
    0% {
      -webkit-transform: translateY(0px) rotate(0deg);
    }

    50% {
      -webkit-transform: translateY(-9px) rotate(0deg);
    }

    100% {
      -webkit-transform: translateY(-9px) rotate(135deg);
    }
  }

  @keyframes outBtm {
    0% {
      transform: translateY(0px) rotate(0deg);
    }

    50% {
      transform: translateY(-9px) rotate(0deg);
    }

    100% {
      transform: translateY(-9px) rotate(135deg);
    }
  }

  .affix {
    padding: 0;
    background-color: #111111ba;
    backdrop-filter: blur(10px);
  }

  .myH2 {
    text-align: center;
    font-size: 4rem;
  }

  .myP {
    text-align: justify;
    padding-left: 15%;
    padding-right: 15%;
    font-size: 20px;
  }

  .black-bg {
    background-color: #111;
  }

  .nav div.main_list ul li a:hover {
    color: #f5d9a5;
  }

  a:hover {
    background-color: #575958;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    border-bottom-left-radius: 25px;
    border-bottom-right-radius: 25px;
  }

  .card {
    margin-top: 50px;
    margin: auto;
    width: 90%;
    height: 500px;
    background: #353535;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
    transition: 0.5s ease-in-out;
  }

  .img {
    text-align: center;
  }

  .img-logo {
    padding: 0px;
    margin-top: 60px;
    width: 180px;
    margin: -38px;
    margin-top: 28px;
  }

  .txt-inicio {
    font-size: 24px;
    line-height: 1.5;
    padding: 10px;
    text-align: center;
    font-family: "Alkatra", sans-serif;
    color: white;
  }

  .gallery-title {
    font-size: 2rem;
    text-align: center;
    margin-bottom: 16px;
    font-family: "Alkatra", sans-serif;
    font-size: 60px;
    color: #f5d9a5;
    order: 1;
  }

  .gallery {
    --d: 10s;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-gap: 20px;
    padding: 50px;
    position: relative;
    z-index: 1;
    margin-bottom: 20px;
    order: 2;
  }

  .contenedor-galeria {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: rgb(74, 72, 72);
    padding: 20px;
    max-width: 1000px;
    width: 89%;
    border-radius: 76px;
    margin-bottom: -90px;
    order: 3;
  }

  .button {
    margin: 0px 19%;
    /* Se agrega margen automático para centrar horizontalmente */
    margin-top: 0%;
  }



  .texto-galeria {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 0px;
    margin-right: 20px;
    margin-top: 0px;
    margin-bottom: 90px;
    order: 3;
    font-family: "Alkatra", sans-serif;
    color: white;
  }

  .gallery>img {
    margin-left: 10%;
    width: 70%;
    height: 100%;
    object-fit: cover;
    border: 10px solid #f2f2f2;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.4666666667);
    animation: slide var(--d) infinite;
    border-radius: 15px;
    z-index: -1;
  }

  /* Keyframes */

  @keyframes slide {

    0%,
    100%,
    80.01% {
      transform: translateX(0%) rotate(var(--r));
      z-index: 3;
    }

    10% {
      transform: translateX(-70%) rotate(var(--r));
      z-index: 3;
    }

    10.01% {
      transform: translateX(-70%) rotate(var(--r));
      z-index: -3;
    }

    20%,
    80% {
      transform: translateX(0%) rotate(var(--r));
      z-index: -3;
    }
  }

  @keyframes slide-last {

    0%,
    100%,
    90.01% {
      transform: translateX(0%) rotate(var(--r));
      z-index: 3;
    }

    10% {
      transform: translateX(70%) rotate(var(--r));
      z-index: 3;
    }

    10.01% {
      transform: translateX(70%) rotate(var(--r));
      z-index: -3;
    }

    20%,
    90% {
      transform: translateX(0%) rotate(var(--r));
      z-index: -3;
    }
  }

  .txt-jyz-Wa {
    margin: 3px -81px 4px -1px;
    padding-bottom: 20px;
  }

  .popup-whatsapp img {
    display: inline-block;
    vertical-align: middle;
    margin-top: 18px;
    border-radius: 50px;
  }

}



.float {
  position: fixed;
  width: 60px;
  height: 60px;
  bottom: 15px;
  right: 16px;
  background-color: #4cc370;
  color: #FFF;
  border-radius: 50px;
  text-align: center;
  font-size: 30px;
  box-shadow: 2px 2px 3px #999;
  z-index: 100;
}

.float:hover {
  text-decoration: none;
  color: #fff;
  background-color: #3d9e5a;
}

.my-float {
  margin-top: 16px;
}

/*Botón de WA*/

@import url("https://fonts.googleapis.com/css?family=Roboto");

/* offset-x > | offset-y ^| blur-radius | spread-radius | color */
@keyframes pulse {
  0% {
    transform: scale(1, 1);
  }

  50% {
    opacity: 0.3;
  }

  100% {
    transform: scale(1.45);
    opacity: 0;
  }
}

.pulse {
  -webkit-animation-name: pulse;
  animation-name: pulse;
}

.nav-bottom {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-content: flex-end;
  width: auto;
  height: auto;
  position: fixed;
  z-index: 8;
  bottom: 0px;
  right: 0px;
  padding: 5px;
  margin: 0px;
}

@media (max-width: 360px) {
  .nav-bottom {
    width: 320px;
  }
}

.whatsapp-button {
  display: flex;
  justify-content: center;
  align-content: center;
  width: 60px;
  height: 60px;
  z-index: 8;
  transition: .3s;
  margin: 10px;
  padding: 7px;
  border: none;
  outline: none;
  cursor: pointer;
  border-radius: 50%;
  background-color: white;
  /* offset-x > | offset-y ^| blur-radius | spread-radius | color */
  -webkit-box-shadow: 1px 1px 6px 0px rgba(68, 68, 68, 0.705);
  -moz-box-shadow: 1px 1px 6px 0px rgba(68, 68, 68, 0.705);
  box-shadow: 1px 1px 6px 0px rgba(68, 68, 68, 0.705);
}

.circle-anime {
  display: flex;
  position: absolute;
  justify-content: center;
  align-content: center;
  width: 60px;
  height: 60px;
  top: 15px;
  right: 15px;
  border-radius: 50%;
  transition: .3s;
  background-color: #5d913b;
  animation: pulse 1.2s 4.0s ease 4;
}

.popup-whatsapp {
  display: none;
  position: absolute;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: auto;
  height: auto;
  padding: 10px;
  bottom: 85px;
  right: 6px;
  transition: .5s;
  border-radius: 10px;
  background-color: white;
  /* offset-x > | offset-y ^| blur-radius | spread-radius | color */
  -webkit-box-shadow: 2px 1px 6px 0px rgba(68, 68, 68, 0.705);
  -moz-box-shadow: 2px 1px 6px 0px rgba(68, 68, 68, 0.705);
  box-shadow: 2px 1px 6px 0px rgba(68, 68, 68, 0.705);
  animation: slideInRight .6s 0.0s both;
}

.popup-whatsapp>div {
  margin: 5px;
}

@media (max-width: 680px) {
  .popup-whatsapp p {
    font-size: 0.9em;
  }
}

.popup-whatsapp>.content-whatsapp.-top {
  display: flex;
  flex-direction: column;
}

.popup-whatsapp>.content-whatsapp.-top p {
  color: #585858;
  font-family: 'Arial';
  font-weight: 400;
  font-size: 16px;
}

.popup-whatsapp>.content-whatsapp.-bottom {
  display: flex;
  flex-direction: row;
}

.popup-whatsapp img {
  display: inline-block;
  vertical-align: middle;
}

.closePopup {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 28px;
  height: 28px;
  margin: -13px -2px 0px 137px;
  border-radius: 50%;
  border: none;
  outline: none;
  cursor: pointer;
  background-color: #ffffff;
  -webkit-box-shadow: 1px 1px 2px 0px rgba(68, 68, 68, 0.705);
  -moz-box-shadow: 1px 1px 2px 0px rgba(68, 68, 68, 0.705);
  box-shadow: 1px 1px 2px 0px rgba(68, 68, 68, 0.705);
}

.closePopup:hover {
  background: rgb(10, 37, 40);
  transition: .3s;
}

.send-msPopup {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #ffffff;
  margin: 0px 0px 0px 5px;
  border: none;
  outline: none;
  cursor: pointer;
  -webkit-box-shadow: 1px 1px 2px 0px rgba(68, 68, 68, 0.705);
  -moz-box-shadow: 1px 1px 2px 0px rgba(68, 68, 68, 0.705);
  box-shadow: 1px 1px 2px 0px rgba(68, 68, 68, 0.705);
}

.send-msPopup:hover {
  background-color: #f8f8f8;
  transition: .3s;
}

.is-active-whatsapp-popup {
  display: flex;
  animation: slideInRight .6s 0.0s both;
  background: rgb(255, 255, 255);
}

input.whats-input[type=text] {
  width: 250px;
  height: 40px;
  box-sizing: border-box;
  border: 0px solid #ffffff;
  border-radius: 20px;
  font-size: 14px;
  background-color: rgb(132 132 132 / 21%);
  padding: 0px 0px 0px 10px;
  -webkit-transition: width 0.3s ease-in-out;
  transition: width 0.3s ease-in-out;
  outline: none;
  transition: .3s;
}

@media (max-width: 420px) {
  input.whats-input[type=text] {
    width: 225px;
  }
}

input.whats-input::placeholder {
  /* Most modern browsers support this now. */
  color: rgba(68, 68, 68, 0.705);
  opacity: 1;
}

input.whats-input[type=text]:focus {
  background-color: #f8f8f8;
  -webkit-transition: width 0.3s ease-in-out;
  transition: width 0.3s ease-in-out;
  transition: .3s;
}

.icon-whatsapp-small {
  width: 24px;
  height: 24px;
}

.icon-whatsapp {
  width: 45px;
  height: 45px;
}

.icon-font-color {
  color: #646464;
}

.icon-font-color:hover {
  color: #f5d9a5;
}

.icon-font-color--black {
  color: #383636;
}

.send-msPopup:hover {
  background: rgb(9, 94, 84);
}

.icon-font-color--black:hover {
  color: #f5d9a5;
}

#txt-wa-ayuda {
  display: block;
  font-family: "Alkatra";
  white-space: nowrap;
  border-right: 0px solid;
  width: 26ch;
  animation: typing 2s steps(18), blink .30s infinite step-end alternate;
  overflow: hidden;
  background: #c4bdbd;
  border-top-right-radius: 25px;
  border-bottom-left-radius: 25px;
  border-bottom-right-radius: 25px;
  padding-left: 10px;
  padding-right: 10px;

}

@keyframes typing {
  from {
    width: 0
  }
}

@keyframes blink {
  50% {
    border-color: transparent;
  }
}

.popup-whatsapp img {
  display: inline-block;
  vertical-align: middle;
}

.popup-whatsapp .content-whatsapp {
  display: inline-block;
  vertical-align: middle;
}

.txt-jyz-Wa {
  text-align: center;
  font-size: 20px;
  font-family: "Alkatra";
  justify-content: center;
  padding-left: 25px;
  margin: 12px -81px 0px 7px;
  margin-bottom: 0px;
  color: #f5d9a5;


}

.contenedor-wa {
  display: flex;
  padding-left: 0px;
  list-style: none;
  background-color: #0d2b1ef0;
  border-radius: 25px;
}