@keyframes move {
    100% {
        transform: translate3d(0, 0, 150px) rotate(360deg);
    }
}
html, body {
    overflow-x: hidden;
}

body{
    overflow-x: hidden !important;
}

.fondo *{
  max-width: 500px;
  margin: 0 auto; /* Centra el contenido horizontalmente */
}


.fondo{
  background: #fbd4df;
  /* background-image: linear-gradient(#faf0f0 33%, transparent 0); */
  /* background-size: 40px 40px;
  overflow-x: hidden; */
}




.bloque-principal {
  position: relative;
width: 100vw;
min-height: 100vh;
top: 0;
left: 0;
    background-image: radial-gradient(#ffffffe8 54%, #f50d7970 103%);
 /*background-image: radial-gradient(#ffffffe8 54%, #00000000 103%);*/
overflow: visible;
}



.bloque-principal .mari {
 backface-visibility: hidden;
    position: absolute;
    animation: move;
    animation-duration: infinite;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}






.capaTraslucida{
   /*background: #f8e7e880;*/
  z-index: 9;
  position: relative;  /* Cambiado a fixed */
      top: 0;           /* Asegura que empiece desde la parte superior */
      left: 0;          /* Asegura que empiece desde el borde izquierdo */
    min-height: 100vh;    /* 100% de altura de pantalla */
}

.body{
  position: inherit;

    /* background: transparent; */

    padding-bottom: 50px;
    padding-left: 20px;
    padding-right: 20px;


    /* display: none; */
}

.tituloBody{
  font-family: cursive;
  color: #705a48;
  font-weight: 400;
  text-shadow: 4px 4px 6px white;
}
.subTituloBody{
  font-family: sans-serif;
  color: #705a48;
  font-weight: 400;
  text-shadow: 4px 4px 6px white;
}

/* .arribaYabajoEfect{
  transition: all 200ms;
  animation: move_vector 14s ease-in-out infinite;

  position: absolute;
} */

@keyframes move_vector{
    0%{
        transform: translateY(120px);
    }
    25%{
        transform: translateY(-15px);
    }
    100%{
        transform: translateY(120px);
    }
}







.f1, .f2, .f3, .f4, .f5, .f6{
  position: fixed;
}

.f1{
  opacity: .8;
  top: 76vh;
  left: -18%;
  opacity: .8;
}
.f2{

  opacity: .8;
  top: 58vh;
left: -14px;
}
.f3{

  top: 0vh;
left: -117px;
opacity: .8;
}
.f5{
  top: 305px;
left: 74%;
opacity: .8;
position: fixed;
}
.f6{

  top: 55vh;
      right: -159px;
      opacity: .8;
      position: fixed;
}
.f4{
  opacity: .8;
  /* top: 82vh; */
  left: 74%;
  opacity: .8;
}




.titularN {
  position: relative;
  top: 30vh;
  animation: moveDown 4s ease 4s forwards; /* Aplicar animación de traslado */
}


/* .titulo {
  font-style: italic;
  font-family: cursive;
  font-size: 189px;
  margin-bottom: -44px;
  background: linear-gradient(176deg, darkgoldenrod, #f3d90b);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  transform: scale(0);
  animation: zoomIn 3s ease forwards, gradient 10s ease infinite, moveDown 4s ease 3s forwards;

 z-index: 9999;
} */



/* zoomIn 4s ease forwards: Esta es la primera animación. Aquí están los detalles:

zoomIn es el nombre de la animación. Esto asume que has definido previamente una animación llamada "zoomIn" utilizando @keyframes en tu hoja de estilos CSS.
4s es la duración de la animación. En este caso, la animación tomará 4 segundos para completarse.
ease es la función de temporización que controla cómo cambia la velocidad de la animación a lo largo del tiempo. "Ease" es una función de temporización suave.
forwards indica que, una vez que la animación haya terminado, el elemento conservará el estado final de la animación.
moveDownSub 4s ease 3s forwards: Esta es la segunda animación. Aquí están los detalles:

moveDownSub es el nombre de la segunda animación. Al igual que en el primer caso, asume que has definido previamente una animación llamada "moveDownSub" en tu hoja de estilos CSS.
4s es la duración de esta segunda animación, que también tomará 4 segundos.
ease es la función de temporización, que en este caso es "ease".
3s indica que esta segunda animación comenzará después de una espera de 3 segundos.
forwards nuevamente indica que el elemento conservará el estado final de la animación una vez que haya terminado. */
.subTitulo {
 
      font-weight: bolder;
     text-shadow: 3px 1px 2px #00000030; 
        font-family: "Henny Penny", system-ui;
      color: #fd8cba;
      margin-left: 0px;
      font-size: 100px;
  /* transform: scale(0); /* Escala inicial (0 significa invisible) */
  /* animation: zoomIn 4s ease forwards, moveDownSub 4s ease 3s forwards; */
}

.subTitulo .uno {
  font-size: 90px;
  animation: zoomIn 4s ease forwards, moveDownSubUno 4s ease 3s forwards;
}

.dire{
font-size: 19px;
    color: #715a4a;
}
.txtDesc{
    font-family: 'Pacifico', cursive;
    font-size: 30px;
  color: #c19b4a; /* dorado cálido */
}
 .textDesc2 {
         font-family: 'Pacifico', cursive;
    font-size: 60px;
    color: #fd8cba;
 } 






@keyframes moveDown {
  0% {
    top: 30vh; /* Comenzar sin traslado */
    font-size: 189px; /* Tamaño de fuente inicial */
    margin-bottom: -44px;
  }
  100% {
    top: 0; /* Trasladar a 0vh */
    font-size: 100px; /* Tamaño de fuente final */
    margin-bottom: -25px;
  }
}
@keyframes moveDownSub {
  0% {

    font-size: 51px; /* Tamaño de fuente inicial */

  }
  100% {
    font-size: 30px; /* Tamaño de fuente final */

  }
}
@keyframes moveDownSubUno {
  0% {

    font-size: 90px; /* Tamaño de fuente inicial */

  }
  100% {
    font-size: 45px; /* Tamaño de fuente final */

  }
}

@keyframes zoomIn {
  0% {
    transform: scale(0); /* Comenzar invisible */
  }
  100% {
    transform: scale(1); /* Terminar al tamaño original (1 significa 100%) */
  }
}

@keyframes gradient {
  0%, 25%, 50%, 100% {
    background: linear-gradient(176deg, darkgoldenrod, #f3d90b);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
  }

  25% {
    background: linear-gradient(94deg, darkgoldenrod, #f3d90b);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
  }

  50% {
    background: linear-gradient(0deg, darkgoldenrod, #f3d90b);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
  }
}


.tituloBody, .callToAction, .footerTit, .btn-info{
  opacity: 0; /* Inicialmente, establece la opacidad en 0 para ocultar los elementos */
  animation: zoomIn 8s ease forwards, fadeIn 1s ease-in-out 0s forwards; /* Inicia la animación después de 1 segundos */
  visibility: hidden; /* Opcional: oculta el elemento completamente */
}



@keyframes fadeIn {
  to {
    opacity: 1; /* Establece la opacidad en 1 para mostrar los elementos */
    visibility: visible; /* Opcional: muestra completamente el elemento */
  }
}




.callToAction h4{
  font-family: cursive;
font-weight: 100;
color: #fb9bac;
margin-bottom: 0;
}
.callToAction h1{
  font-size: 94px;
      font-weight: 400;
      color: #fb9bac;
      margin-bottom: 0;
}

.linea{
  border: solid 1px;

  margin: 6px;
  color: #bc9320;
}

.horario{
  font-size: 18px;
    color: #bd931f;
}

.direccion{
  font-size: 18px;
  color: #daa6a4;
  }

  .btn-info{
    background: #f43c87;
    border-color: #faeced;
    color: #ffffff;
    font-weight: 600;
        box-shadow: 0px 8px 15px 16px rgb(0 0 0 / 12%);
  }
  .btn-info:active{
    background: #cd7d8b !important;
    border-color: #cd7d8b !important;
    color: #ffffff !important;

  }
  .btn-info:hover{
    background: #cd7d8b !important;
    border-color: #cd7d8b !important;
    color: #ffffff !important;

  }
/* Estilo inicial para el título */



/* estilos del body arranca a los 3.5 segundos */

.footerTit{
  color: #705a49;
  font-family: 'Pacifico', cursive;
    font-style: italic;
    font-size: 40px;
}


.btnAsist{
  position: fixed !important;
bottom: 20px !important;
width: 100% !important;
z-index: 999 !important;

display: flex;
  justify-content: center; /* Centra horizontalmente el contenido */
  align-items: center;     /* Alinea el contenido verticalmente */
}

.swal2-html-container{
  padding: 0!important;
}

.minie{
        position: absolute;
    top: 75px;
    left: 100px;
}