@charset "UTF-8";
:root {
  --base-padding: 3vw;
  --white-25: rgba(255,255,255,.25);
  --white-50: rgba(255,255,255,.5);
}

* {
  box-sizing: border-box;
}

body {
  margin: var(--base-padding);
}

.altura-section {
  display: block;
  min-height: 100vh;
  display: grid;
  place-items: center;
}

#rocket {
  width: 70px;
  height: 200px;
  background: linear-gradient(to right, transparent 45%, firebrick 45%, firebrick 55%, transparent 55%), radial-gradient(circle at 50% 40%, rgb(255, 255, 255) 10%, #aaa 11%, #aaa 15%, transparent 16%), linear-gradient(to right, transparent 50%, rgba(0, 0, 0, 0.1) 50%), linear-gradient(to bottom, firebrick 12%, transparent 12%), lightgray;
  background-size: 100% 40%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
  background-position: 50% 95%, 0 0, 0 0, 0 0, 0 0;
  background-repeat: no-repeat;
  border-radius: 50px 50px 50px 50px/200px 200px 10px 10px;
  position: fixed;
  bottom: 0;
  left: calc(50% - 20px);
  box-shadow: 0 15px 0 -5px #666;
  filter: drop-shadow(0px -5px 2px rgba(0, 0, 0, 0.15));
  z-index: 100;
}

#rocket:before {
  content: "";
  width: 200%;
  height: 50%;
  position: absolute;
  top: 55%;
  left: -50%;
  background: radial-gradient(circle at 50% 100%, transparent 50%, firebrick 51%);
  -webkit-clip-path: polygon(0% 0%, 25% 0%, 25% 100%, 75% 100%, 75% 0%, 100% 0%, 100% 100%, 0% 100%);
          clip-path: polygon(0% 0%, 25% 0%, 25% 100%, 75% 100%, 75% 0%, 100% 0%, 100% 100%, 0% 100%);
  border-radius: 100% 100% 0 0;
}

#rocket:after {
  content: "";
  width: 60%;
  height: 10%;
  position: absolute;
  top: 108%;
  left: 20%;
  background: linear-gradient(to bottom, orangered, gold);
  border-radius: 0 0 25% 25%;
  filter: blur(2px);
  opacity: 0.5;
  animation: blast_off 0.25s linear infinite;
}

@keyframes blast_off {
  33% {
    background: linear-gradient(to bottom, orangered 25%, gold 75%);
  }
  66% {
    background: linear-gradient(to bottom, orangered 50%, gold 90%);
  }
}
.shake_rocket {
  animation: shake 0.1s linear infinite;
}

@keyframes shake {
  25% {
    transform: translateX(-1px);
  }
  75% {
    transform: translateX(1px);
  }
}
#sky {
  min-height: 200vh;
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: -2;
  /*     background: 
          radial-gradient(circle at 75% 24%, rgba(255,255,255,.5) .25%, transparent .25%),
          radial-gradient(circle at 10% 23%, rgba(255,255,255,.25) .25%, transparent .25%),
          radial-gradient(circle at 98% 29%, rgba(255,255,255,.25) .25%, transparent .25%),
          radial-gradient(circle at 63% 10%, rgba(255,255,255,.25) .25%, transparent .25%),
          radial-gradient(circle at 20% 6%, rgba(255,255,255,.25) .25%, transparent .25%),
          radial-gradient(circle at 75% 5%, rgba(255,255,255,.25) .25%, transparent .25%),
          radial-gradient(circle at 35% 15%, rgba(255,255,255,.25) .25%, transparent .25%),
          radial-gradient(circle at 94% 10%, rgba(255,255,255,.25) .25%, transparent .25%),
          radial-gradient(circle at 55% 30%, rgba(255,255,255,.25) .25%, transparent .25%),
          radial-gradient(circle at 4% 40%, rgba(255,255,255,.25) .25%, transparent .25%),
          radial-gradient(circle at 91% 35%, rgba(255,255,255,.25) .25%, transparent .25%),
          radial-gradient(circle at -1% 3%, rgba(0,0,0,.15) 2%, transparent 2.5%),
          radial-gradient(circle at 11% 6.5%, rgba(0,0,0,.15) 1%, transparent 1.5%),
          radial-gradient(circle at 15% 0%, rgba(0,0,0,.15) 2%, transparent 2.5%),
          radial-gradient(circle at 5% 8%, rgba(0,0,0,.15) 2%, transparent 2.5%),
          radial-gradient(circle at -5% -5%, rgba(255,255,255,.15) 9%, transparent 10%),
          radial-gradient(circle at 0% 0%, #888 10%, transparent 12%),
          linear-gradient(to top, beige, #306), */
}

.fa-solid.fa-cloud {
  position: absolute;
  font-size: 40px;
  color: white;
  opacity: 0;
  animation: fadeIn 1s ease-in-out forwards;
  animation-delay: 1s; /* Agregar un retraso para el fade-in de las nubes */
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}
#exhaust {
  width: 400px;
  height: 100px;
  position: fixed;
  bottom: -50px;
  left: calc(50% - 200px);
  opacity: 0;
  transition: 1s;
}

#exhaust:after {
  content: "";
  width: 400px;
  height: 100px;
  position: absolute;
  bottom: 0;
  left: 0;
  background: radial-gradient(circle at 20% 90%, white 50px, transparent 51px), radial-gradient(circle at 35% 115%, white 50px, transparent 51px), radial-gradient(circle at 50% 135%, white 50px, transparent 51px), radial-gradient(circle at 65% 115%, white 50px, transparent 51px), radial-gradient(circle at 80% 90%, white 50px, transparent 51px);
  filter: blur(1px) drop-shadow(0px -5px rgba(0, 0, 0, 0.025));
  animation: shake 0.1s linear infinite;
}

.exhaust {
  opacity: 1 !important;
  bottom: 0 !important;
}

.circle {
  position: fixed;
  top: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  background-color: red;
  border-radius: 50%;
}

.circle:hover {
  background-color: rgb(225, 0, 0);
  transform: scale(1.2);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  transition: 0.5s;
}

/* Estilos opcionales para el botón */
.circle::before {
  content: "↑";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: white;
  height: 100%;
  font-weight: 800;
  cursor: pointer;
}

.circle-2 {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  background-color: red;
  border-radius: 50%;
}

.circle-2:hover {
  background-color: rgb(225, 0, 0);
  transform: scale(1.2);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  transition: 0.5s;
}

/* Estilos opcionales para el botón */
.circle-2::before {
  content: "↓";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: white;
  height: 100%;
  font-weight: 800;
  cursor: pointer;
}

.fade-in {
  opacity: 0;
  transition: opacity 0.5s ease-in;
  z-index: 2;
}

.fade-in.visible {
  opacity: 1;
}

#preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity 0.5s ease-in-out;
  z-index: 1000; /* Asegura que el preloader esté en la parte superior */
}

#preloader .loading-animation {
  width: 80px;
  height: 80px;
}

body {
  height: 100vh;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

#background-wrap {
  bottom: 0;
  left: 0;
  padding-top: 50px;
  position: fixed;
  right: 0;
  top: 0;
  z-index: -1;
}

/* KEYFRAMES */
@keyframes animateCloud {
  0% {
    margin-left: -1000px;
  }
  100% {
    margin-left: 100%;
  }
}
/* ANIMATIONS */
.x1 {
  animation: animateCloud 35s linear infinite;
  transform: scale(0.65);
}

.x2 {
  animation: animateCloud 20s linear infinite;
  transform: scale(0.3);
}

.x3 {
  animation: animateCloud 30s linear infinite;
  transform: scale(0.5);
}

.x4 {
  animation: animateCloud 18s linear infinite;
  transform: scale(0.4);
}

.x5 {
  animation: animateCloud 25s linear infinite;
  transform: scale(0.55);
}

/* OBJECTS */
.cloud {
  background: #ffffff;
  background: linear-gradient(top, #fff 5%, #f1f1f1 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#fff", endColorstr="#f1f1f1",GradientType=0 );
  border-radius: 100px;
  box-shadow: 0 8px 5px rgba(0, 0, 0, 0.1);
  height: 120px;
  position: relative;
  width: 350px;
}

.cloud:after, .cloud:before {
  background: #ffffff;
  content: "";
  position: absolute;
  z-indeX: -1;
}

.cloud:after {
  border-radius: 100px;
  height: 100px;
  left: 50px;
  top: -50px;
  width: 100px;
}

.cloud:before {
  border-radius: 200px;
  width: 180px;
  height: 180px;
  right: 50px;
  top: -90px;
}

.encabezado-estilo {
  font-family: "Lily Script One";
  color: white;
  text-align: center;
  font-size: 500%;
  text-shadow: 2px 2px 4px rgb(0, 0, 0);
}

@keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.estilo-subtitulo {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  font-size: 170%;
  color: #FFFFFF;
  text-shadow: 2px 2px 4px rgb(0, 0, 0);
  animation: blink 1s infinite;
  font-style: oblique;
}

@media screen and (max-width: 600px) {
  .encabezado-estilo {
    width: 75%;
    font-size: 300%;
    margin-left: 64px;
  }
  .estilo-subtitulo {
    font-size: 100%;
  }
}
.estilo-titulo-abajo {
  font-family: "Lily Script One";
  color: white;
  text-align: center;
  font-size: 500%;
  text-shadow: 2px 2px 4px rgb(0, 0, 0);
}

.estilo-entradas h2 {
  width: 50%;
}
.estilo-entradas p {
  width: 50%;
}

.estilo-titulo-entrada {
  font-family: "Lily Script One";
  color: #FFFFFF;
  font-size: 300%;
  text-align: center;
  text-shadow: 2px 2px 4px rgb(0, 0, 0);
}

#section-1 {
  height: 80vh;
}

#section-2 {
  height: 80vh;
}

#section-3 {
  height: 80vh;
}

#section-4 {
  height: 80vh;
}

#section-5 {
  height: 80vh;
}

#section-6 {
  height: 80vh;
}

#section-7 {
  height: 80vh;
}

#section-8 {
  height: 80vh;
}

#section-9 {
  height: 80vh;
}

#section-10 {
  height: 80vh;
}

#section-11 {
  height: 80vh;
}

#section-12 {
  height: 80vh;
}

#section-13 {
  height: 80vh;
}

@media only screen and (max-width: 600px) {
#section-1 {
  height: 120vh;
}

#section-2 {
  height: 120vh;
}

#section-3 {
  height: 120vh;
}

#section-4 {
  height: 120vh;
}

#section-5 {
  height: 120vh;
}

#section-6 {
  height: 120vh;
}

#section-7 {
  height: 120vh;
}

#section-8 {
  height: 120vh;
}

#section-9 {
  height: 120vh;
}

#section-10 {
  height: 120vh;
}

#section-11 {
  height: 120vh;
}

#section-12 {
  height: 120vh;
}

#section-13 {
  height: 120vh;
}
}

h3 {
  font-family: "Lily Script One";
  color: white;
  text-shadow: 2px 2px 4px rgb(0, 0, 0);
  font-size: 50px;
  font-weight: 600;
}

p {
  font-weight: 700;
  color: white;
  text-shadow: 2px 2px 4px rgb(0, 0, 0);
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;
}

#tabla {
  width: 40%;
}
#tabla h3 {
  font-style: italic;
  color: white;
  text-shadow: 2px 2px 4px rgb(0, 0, 0);
  font-size: 30px;
}
#tabla p {
  font-weight: 700;
  font-size: 25px;
  color: rgb(255, 255, 255);
  text-shadow: 2px 2px 4px rgb(1, 1, 1);
}
.altura-caja-gracias {
  height: 80vh;
}


@media only screen and (max-width: 600px) {
  #tabla{
      width: 100%;
  }
  #tabla p{
    font-size: 100%;
  }
  .estilo-titulo-abajo {
    font-family: "Lily Script One";
    color: white;
    text-align: center;
    font-size: 300%;
    text-shadow: 2px 2px 4px rgb(0, 0, 0);
  }
  #section-13 {
    margin-top: 70px;
  }
  #section-11 {
    margin-top: 30px;
  }
  h3{
    font-size: 30px;
  }
  .margin-portada{
    margin-bottom: 100px;
  }
  .encabezado-estilo{
    font-size: 40px;
  }
  h2{
    font-size: 35px;
  }
  #rocket{
    left: calc(45% - 20px);
  }
}

/*# sourceMappingURL=estilos.css.map */