body {
  transition: filter 0.3s ease-in-out;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

@media ((max-width: 40vh)) or ((max-height: 567px)) {
  .container {
    display: none !important;
  }
  .mobile-menu {
    display: none !important;
  }
  .imagenes-pantalla {
    display: none !important;
  }
  .grupo2 {
    display: none !important;
  }
  .minRes {
    display: flex !important;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    justify-content: center;
    align-items: center;
    font-family: "New Rocker";
    font-style: normal;
    font-weight: 400;
    text-align: center;
  }
}

.titulo {
  display: flex;
  position: fixed;
  flex-direction: column;
  justify-content: center;
  transform-origin: center top;
  height: calc(var(--vh, 1vh) * 6.13);
  top: calc(var(--vh, 1vh) * 6.9882);
  gap: 0px;
}

.container {
  position: fixed;
  height: calc(var(--vh, 1vh) * 53.6);
  top: calc(var(--vh, 1vh) * 14.96);
  display: flex;
  justify-content: center;
  transform-origin: center top;
}

.semicircle {
  position: absolute;
  width: 232.12vw;
  height: 232.12vw;

  display: flex;
  justify-content: center;
  border-radius: 50%;
  background: url(../assets/Circulo.svg);
  background-position: center;
  background-size: cover;
  top: calc(var(--vh, 1vh) * 0);
  transform-origin: center;
  transform: rotate(0deg);
  transition: transform 0.5s ease-in-out;
}

.seccion {
  top: calc(var(--vh, 1vh) * 4.0458);
  position: absolute;
  cursor: pointer;
  user-select: none;
  perspective: 1000px;
}

.tituloTextoBasico {
  font-family: "New Rocker";
  font-style: normal;
  font-weight: 400;
  font-size: calc(var(--vh, 1vh) * 3.4328); /* 28px -> 3.4328vh */
  line-height: 100%;

  text-align: center;

  background: linear-gradient(
      360deg,
      rgba(182, 155, 103, 0) 28%,
      rgba(182, 155, 103, 0.5) 100%
    ),
    #fdf5e4;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.tituloTexto {
  font-family: "New Rocker";
  font-style: normal;
  font-weight: 400;
  font-size: calc(var(--vh, 1vh) * 2.216); /* 18px -> 2.216vh */
  line-height: 152%;

  text-align: center;

  background: linear-gradient(
      360deg,
      rgba(182, 155, 103, 0) 28%,
      rgba(182, 155, 103, 0.5) 100%
    ),
    #fdf5e4;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.tituloEntrada {
  display: flex;
  position: fixed;
  justify-content: center;
  transform-origin: center;
  width: 301px;
  height: calc(var(--vh, 1vh) * 6.13);
  top: calc(var(--vh, 1vh) * 6.9882);
  gap: 0px;
  opacity: 0px;

  background: linear-gradient(
      0deg,
      var(--beige, #fdf5e4),
      var(--beige, #fdf5e4)
    ),
    linear-gradient(
      360deg,
      rgba(182, 155, 103, 0) 28%,
      rgba(182, 155, 103, 0.5) 100%
    );

  background-clip: text;
  -webkit-text-fill-color: transparent;

  font-family: "New Rocker";
  font-size: calc(var(--vh, 1vh) * 3.4328); /* 28px -> 3.4328vh */
  font-weight: 400;
  line-height: 100%;
  text-align: center;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
}

#seccion-inner {
  display: flex;
  width: 500px;
  height: calc(var(--vh, 1vh) * 6.13);
  justify-content: center;
  align-items: center;
  position: relative;
  transform-style: preserve-3d;
  transform: rotateY(0deg);
  transition: transform 0.8s ease-in-out;
}

.textoLink {
  top: calc(var(--vh, 1vh) * 0);
  padding: calc(var(--vh, 1vh) * 1.226) 20px calc(var(--vh, 1vh) * 1.226) 20px;
  gap: calc(var(--vh, 1vh) * 1.226);
  border-radius: 20px;
  border: 2px;
  opacity: 0;

  position: absolute;
  width: fit-content;
  height: fit-content;
  display: flex;

  flex-direction: column;
  justify-content: center;
  align-items: center;
  line-height: 100%;
  font-size: calc(var(--vh, 1vh) * 3.4328); /* 28px -> 3.4328vh */
  font-family: "New Rocker", system-ui;
  font-weight: 400;
  cursor: pointer;
  color: var(--bg, rgba(38, 49, 73, 1));

  backface-visibility: hidden;
  z-index: 5000;
}

.enlaceUbicacion {
  top: calc(var(--vh, 1vh) * 16.78);
  position: absolute;
  width: calc(var(--vh, 1vh) * 40.27);
  height: calc(var(--vh, 1vh) * 5.54);
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  color: #263149;
  transform: translate(-50%);
  transform-origin: center;
  left: 50%;
  flex-direction: column;
  gap: calc(var(--vh, 1vh) * 0.616);

  font-family: "Roboto", system-ui;
  font-weight: 400;
  font-style: normal;
  font-size: calc(var(--vh, 1vh) * 1.97); /* 16px -> 1.97vh */
  line-height: 100%;
  text-align: center;
  text-decoration: underline;
  text-decoration-style: solid;
  text-decoration-thickness: 0%;
  text-decoration-skip-ink: auto;
}
.enlaceUbicacion2 {
  top: calc(var(--vh, 1vh) * 23.78);
  position: absolute;
  width: calc(var(--vh, 1vh) * 40.27);
  height: calc(var(--vh, 1vh) * 5.54);
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  color: #263149;
  transform: translate(-50%);
  transform-origin: center;
  left: 50%;
  flex-direction: column;
  gap: calc(var(--vh, 1vh) * 0.616);

  font-family: "Roboto", system-ui;
  font-weight: 400;
  font-style: normal;
  font-size: calc(var(--vh, 1vh) * 1.97); /* 16px -> 1.97vh */
  line-height: 100%;
  text-align: center;
  text-decoration: underline;
  text-decoration-style: solid;
  text-decoration-thickness: 0%;
  text-decoration-skip-ink: auto;
}

.icoUbicacion {
  height: calc(var(--vh, 1vh) * 3.214);
  width: calc(var(--vh, 1vh) * 3.214);
  display: flex;
  justify-content: center;
  align-items: center;
  color: #263149;
  transform-origin: center;
  flex-direction: column;
  gap: calc(var(--vh, 1vh) * 0.616);
  cursor: pointer;
}

.mensajeArribaCirculo {
  height: calc(var(--vh, 1vh) * 3.448);
  font-family: "Roboto", system-ui;
  font-weight: 400;
  font-style: normal;
  font-size: calc(var(--vh, 1vh) * 1.97); /* 16px -> 1.97vh */
  line-height: 100%;
  letter-spacing: 0%;
  text-align: center;
  color: var(--beige, rgba(253, 245, 228, 1));
}

.botonRegalos {
  /* width: calc(var(--vh, 1vh) * 21.057); 171px → 21.057vh
  height: calc(var(--vh, 1vh) * 4.926); 40px → 4.926vh */
  max-width: calc(var(--vh, 1vh) * 21.182); /* 172px → 21.182vh */
  opacity: 1;
  gap: calc(var(--vh, 1vh) * 1.232); /* 10px → 1.232vh */
  border-width: calc(var(--vh, 1vh) * 0.123); /* 1px → 0.123vh */
  border-radius: calc(var(--vh, 1vh) * 4.059); /* 33px → 4.059vh */
  padding-top: calc(var(--vh, 1vh) * 1.232); /* 10px → 1.232vh */
  padding-right: calc(var(--vh, 1vh) * 2.463); /* 20px → 2.463vh */
  padding-bottom: calc(var(--vh, 1vh) * 1.232); /* 10px → 1.232vh */
  padding-left: calc(var(--vh, 1vh) * 2.463); /* 20px → 2.463vh */

  display: flex;
  align-items: center;
  flex-direction: column;
  align-items: center;

  background: var(--azul-oscuro, rgba(14, 22, 40, 1));

  border: calc(var(--vh, 1vh) * 0.123) solid var(--beige, rgba(253, 245, 228, 1));
}

.textoBotonRegalos {
  cursor: pointer;
  width: calc(var(--vh, 1vh) * 21);
  text-align: center;
  font-family: "New Rocker", system-ui;
  font-weight: 400;
  font-style: normal;
  font-size: calc(var(--vh, 1vh) * 1.97); /* 16px -> 1.97vh */
  line-height: 100%;
  letter-spacing: 0%;
  text-decoration: underline !important;
  text-decoration-thickness: 2px !important;
  text-decoration-color: currentColor !important;
  text-underline-offset: 2px !important;

  color: var(--beige, rgba(253, 245, 228, 1));
}

.mensajeRegalos {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--vh, 1vh) * 1.477);
}

.linkTopUbicacion {
  font-family: "New Rocker", system-ui;
  font-weight: 400;
  font-style: normal;
  font-size: calc(var(--vh, 1vh) * 2.216);
  line-height: 100%;
  text-align: center;
  line-height: 100%;
  text-decoration-style: solid;
  text-decoration-thickness: 0%;
  text-decoration-skip-ink: auto;
  align-items: center;
  display: flex;
  color: #263149;
}

.linkTop {
  height: calc(var(--vh, 1vh) * 1.916);
  font-family: "Roboto", system-ui;
  font-weight: 400;
  font-style: normal;
  font-size: calc(var(--vh, 1vh) * 1.97); /* 16px -> 1.97vh */
  line-height: 100%;
  text-align: center;
  line-height: 100%;
  text-decoration-style: solid;
  text-decoration-thickness: 0%;
  text-decoration-skip-ink: auto;
  display: flex;
  align-items: center;
  color: #263149;
  flex-direction: column;
}

.linkTop2 {
  height: calc(var(--vh, 1vh) * 3.448);
  font-family: "Roboto", system-ui;
  font-weight: 400;
  font-style: normal;
  font-size: calc(var(--vh, 1vh) * 1.97); /* 16px -> 1.97vh */
  line-height: 100%;
  text-align: center;
  line-height: 100%;
  text-decoration-style: solid;
  text-decoration-thickness: 0%;
  text-decoration-skip-ink: auto;
  display: flex;
  align-items: center;
  color: #263149;
  flex-direction: column;
}

.linkSub {
  font-family: "Roboto", system-ui;
  font-weight: 400;
  font-style: normal;
  font-size: calc(var(--vh, 1vh) * 1.97); /* 16px -> 1.97vh */
  line-height: 100%;
  text-align: center;
  text-decoration: underline;
  text-decoration-style: solid;
  text-decoration-thickness: 0%;
  text-decoration-skip-ink: auto;

  color: #263149;
}

.textoLinkSub {
  padding: calc(var(--vh, 1vh) * 4.226) 20px calc(var(--vh, 1vh) * 1.226) 20px;
  gap: calc(var(--vh, 1vh) * 1.226);
  border-radius: 20px;
  border: 2px;
  opacity: 0;

  position: absolute;
  width: fit-content;
  height: fit-content;
  display: flex;

  flex-direction: column;
  justify-content: center;
  align-items: center;
  line-height: 100%;
  font-size: calc(var(--vh, 1vh) * 3.4328); /* 28px -> 3.4328vh */
  font-family: "New Rocker", system-ui;
  font-weight: 400;
  cursor: pointer;
  color: var(--bg, rgba(38, 49, 73, 1));

  backface-visibility: hidden;
  z-index: 5000;
}

.buttonWhatsapp {
  width: calc(var(--vh, 1vh) * 21.056);
  height: calc(var(--vh, 1vh) * 5.665);
  gap: 10px;
  border-radius: 33px;
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 10px;
  padding-left: 20px;

  background: var(--beige, rgba(253, 245, 228, 1));
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.15);
  color: var(--bg, rgba(38, 49, 73, 1));

  opacity: 1;
  font-family: "New Rocker", system-ui;
  font-weight: 400;
  font-style: normal;
  font-size: calc(var(--vh, 1vh) * 2.216);
  line-height: 100%;

  display: flex;
  justify-content: center;
  align-items: center;
}

.buttonWhatsapp:hover {
  background: var(--esp-Color, rgba(228, 187, 112, 1));
  color: var(--bg, rgba(38, 49, 73, 1));
}

.buttonWhatsapp:active {
  background: var(--esp-Color, rgba(228, 187, 112, 1));
  color: var(--bg, rgba(38, 49, 73, 1));

  transform: translate(5px, 5px);

  box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.1);
}

#ok-button,
#ko-button {
  width: calc(var(--vh, 1vh) * 3.203); /* 26px -> 3.203vh */
  height: calc(var(--vh, 1vh) * 3.203); /* 26px -> 3.203vh */
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Font Awesome 5 Free", system-ui;
  font-weight: 400;
  font-size: calc(var(--vh, 1vh) * 3.203); /* 26px -> 3.203vh */
  line-height: 100%;

  color: var(--bg, rgba(38, 49, 73, 1));
}

.textoLink.front {
  transform: rotateY(0deg) translateZ(100px);
}
.textoLink.right {
  transform: rotateY(90deg) translateZ(100px);
}
.textoLink.back {
  transform: rotateY(180deg) translateZ(100px);
}
.textoLink.left {
  transform: rotateY(-90deg) translateZ(100px);
}

.ventana {
  position: absolute;
  width: calc(var(--vh, 1vh) * 40);
  height: calc(var(--vh, 1vh) * 40);
  background-position: top right;
  background-attachment: fixed;
  background-size: auto;
  border-radius: 50%;
  top: calc(var(--vh, 1vh) * 14);
  transform-origin: center;
  transform: rotate(0deg);
  overflow: hidden;

  display: flex;
  justify-content: center;
}

.window {
  position: absolute;
  width: 100%;
  height: 100%;
  background: url("../assets/fondoNuevo.webp");
  background-position: top left;
  background-attachment: fixed;
  background-size: auto;
  transform-origin: center;

  display: flex;
  justify-content: center;
  align-items: center;
}

.contentTitle {
  width: 161px;
  height: auto;
  color: rgba(253, 245, 228, 1);
  text-align: center;
  line-height: 100%;
  font-size: calc(var(--vh, 1vh) * 2.216); /* 18px -> 2.216vh */
  user-select: none;
  font-family: "New Rocker", system-ui;
  font-weight: 400;
}

.ubicacionMapa {
  background: radial-gradient(
    50% 50% at 50% 50%,
    rgba(0, 0, 0, 0) 67%,
    rgba(0, 0, 0, 0.2) 100%
  );
}

.contentText {
  width: 161px;
  height: auto;
  color: rgba(253, 245, 228, 1);
  text-align: center;
  line-height: 100%;
  font-size: calc(var(--vh, 1vh) * 1.7164);
  user-select: none;
  font-family: "Roboto", system-ui;
  font-weight: 400;
}

.ubicacionMapaFade {
  
  width: calc(var(--vh, 1vh) * 50);
  height: calc(var(--vh, 1vh) * 50);
}

.ubicacionMapaFade::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    50% 50% at 50% 50%,
    rgba(0, 0, 0, 0) 67%,
    rgba(0, 0, 0, 0.2) 100%
  );
  z-index: 2;
  pointer-events: none;
}

.container-interior {
  background-image: url(../assets/anilloNuevo.svg);
  background-position: center;
  background-size: cover;
  width: calc(var(--vh, 1vh) * 51.3021);
  height: calc(var(--vh, 1vh) * 50.927);
  top: calc(var(--vh, 1vh) * 8.4594);
  transform-origin: center;
  position: absolute;
  overflow: hidden;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.imagenes-pantalla {
  top: calc(var(--vh, 1vh) * 55.6);
  position: fixed;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transform-origin: center top;
}

.bajo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.fechaHora,
.ubicacion,
.regalos {
  position: absolute;
  transform-origin: center;
  gap: calc(var(--vh, 1vh) * 0.613);
  display: flex;
  flex-direction: column;
}

.confirma {
  position: absolute;
  transform-origin: center;
  gap: calc(var(--vh, 1vh) * 2.46);
  display: flex;
  flex-direction: column;
}

.imagenDecor {
  position: relative;
}

.fade-in {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.4s ease-in-out, visibility 0.4s ease-in-out;
}

.fade-out {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease-in-out, visibility 0.4s ease-in-out;
  pointer-events: none;
}

#fechaHora0 {
  top: calc(var(--vh, 1vh) * 16);
  position: absolute;
  transform: translate(-50%);
  transform-origin: center;
  left: 50%;
  height: calc(var(--vh, 1vh) * 18.72);
}
#fechaHora1 {
  position: absolute;
  top: calc(var(--vh, 1vh) * 19.94);
  left: 20.4vw; /* Imagen derecha */
  height: calc(var(--vh, 1vh) * 17.24);
}
#fechaHora2 {
  top: calc(var(--vh, 1vh) * 26.7);
  position: absolute;
  left: -62.533vw; /* Imagen izquierda */
  height: calc(var(--vh, 1vh) * 13.67);
}

#ubicacion0 {
  top: calc(var(--vh, 1vh) * 26.6);
  position: absolute;
  transform: translate(-50%);
  left: calc(var(--vh, 1vh) * 14.039);
  height: calc(var(--vh, 1vh) * 19.458);
}
#ubicacion1 {
  top: calc(var(--vh, 1vh) * 27.4);
  position: absolute;
  height: calc(var(--vh, 1vh) * 15.8906);
  left: calc(var(--vh, 1vh) * -26.9);
}
#ubicacion2 {
  top: calc(var(--vh, 1vh) * -2.3);
  left: calc(var(--vh, 1vh) * 14.2);
  position: absolute;
  height: calc(var(--vh, 1vh) * 23.151);
}

.marcoTitulo {
  width: calc(var(--vh, 1vh) * 44.27);
}

.textoSub {
  cursor: pointer;
  height: calc(var(--vh, 1vh) * 1.723); /* 14px -> 1.723vh */
  font-family: "New Rocker", system-ui;
  font-weight: 400;
  font-style: normal;
  font-size: calc(var(--vh, 1vh) * 1.97); /* 16px -> 1.97vh */
  line-height: 100%;
  text-align: center;
  text-decoration: underline !important;
  text-decoration-thickness: 2px !important;
  text-decoration-color: currentColor !important;
  text-underline-offset: 2px !important;
}

.baseBaja {
  width: calc(var(--vh, 1vh) * 30);
  top: calc(var(--vh, 1vh) * 21.5);
  position: absolute;
  height: calc(var(--vh, 1vh) * 5.54);
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  color: #263149;
  transform: translate(-50%);
  transform-origin: center;
  flex-direction: column;
  gap: calc(var(--vh, 1vh) * 0.985);
  padding: calc(var(--vh, 1vh) * 0.985) 0;
}

.baseBaja2 {
  display: flex;
  justify-content: center;
  align-items: center;
  transform-origin: center;
  flex-direction: column;
  gap: calc(var(--vh, 1vh) * 0.369);
  padding: calc(var(--vh, 1vh) * 0.369) 0;
}

.subTextoLink {
  font-family: "Roboto", system-ui;
  font-weight: 400;
  font-style: normal;
  font-size: calc(var(--vh, 1vh) * 1.97); /* 16px -> 1.97vh */
  line-height: 100%;
  text-align: center;
  color: var(--azul-oscuro, rgba(14, 22, 40, 1));
}

.subTextoLinkBold {
  font-family: "Roboto", system-ui;
  font-weight: 700;
  font-style: normal;
  font-size: calc(var(--vh, 1vh) * 1.97); /* 16px -> 1.97vh */
  line-height: 100%;
  text-align: center;
  color: var(--azul-oscuro, rgba(14, 22, 40, 1));
}

#confirma0 {
  top: calc(var(--vh, 1vh) * 10.5);
  position: absolute;
  transform: translate(-50%);
  transform-origin: center;
  left: calc(var(--vh, 1vh) * 14.8);
}
#confirma1 {
  top: calc(var(--vh, 1vh) * 15.864);
  position: absolute;
  transform: translate(-50%);
  transform-origin: center;
  left: calc(var(--vh, 1vh) * -12);
}
#confirma2 {
  top: calc(var(--vh, 1vh) * 27.2222);
  position: absolute;
  transform: translate(-50%);
  left: calc(var(--vh, 1vh) * -19.5);
}

#regalos1 {
  top: calc(var(--vh, 1vh) * 17.9);
  left: calc(var(--vh, 1vh) * -20);
  position: absolute;
  transform: translate(-50%);
  transform-origin: center;
}
#regalos2 {
  top: calc(var(--vh, 1vh) * 17.2222);
  left: calc(var(--vh, 1vh) * 21.6);
  position: absolute;
  transform: translate(-50%);
  transform-origin: center;
}

.mobile-menu {
  box-shadow: 0px -4px 10px rgba(0, 0, 0, 0.2);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-direction: column-reverse;
  z-index: 1000;
  transition: height 0.4s ease-in-out, transform 0.4s ease-in-out;
  position: fixed;
  bottom: calc(var(--vh, 1vh) * 0);
  left: 0;
  width: 100%;
}

.menu-toggle {
  background: rgba(38, 49, 73, 1);
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  height: 54px;
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  z-index: 1000;
  display: flex;
  gap: 3px;
  cursor: pointer;

  
}

.toggle {
  /* width: 24px; */
  height: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  cursor: pointer;
  gap: 3px;

  color: rgba(253, 245, 228, 1);
  text-align: center;
  line-height: 100%;
  font-size: calc(var(--vh, 1vh) * 2.216); /* 18px -> 2.216vh */
  user-select: none;
  font-family: "New Rocker", system-ui;
  font-weight: 400;
}

.menu-line {
  width: 18px;
  height: 2px;
  background: rgba(228, 187, 112, 1);
  border-radius: 2px;
  transition: all 0.3s ease-in-out;
}

.menu-buttons {
  width: 100%;
  gap: 10px;
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.menu-content {
  position: fixed;
  padding-top: 10px;
  padding-bottom: 20px;
  padding-left: 10px;
  padding-right: 10px;
  gap: 17px;
  bottom: 0px;
  left: 0px;
  width: 100%;
  display: flex;
  box-sizing: border-box;
  justify-content: left;
  flex-direction: column;
  align-items: center;
  background: rgba(38, 49, 73, 1);
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  z-index: 2000;
  transform: translateY(200%);
  transition: transform 0.4s ease-in-out;
}

.menu-content.open {
  transform: translateY(0);
}

body.menu-open {
  overflow: hidden;
}

.menu-btn {
  width: 100%;
  height: fit-content;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding-top: 15px;
  padding-bottom: 15px;
  padding-left: 20px;
  padding-right: 20px;
  background: rgba(253, 245, 228, 1);
  border: none;
  color: rgba(38, 49, 73, 1);
  line-height: 100%;
  font-size: 18px;
  user-select: none;
  font-family: "New Rocker", system-ui;
  font-weight: 400;
  cursor: pointer;
  text-align: center;
  transition: background 0.3s ease-in-out;
}

.menu-btn.active {
  background: rgba(182, 155, 103, 1);
  color: #263149;
}

.menu-close {
  padding: 5px;
  width: max-content;
  height: 24px;
  gap: 10px;
  display: flex;
  justify-content: right;
  align-items: center;
  background: none;
  border: none;
  cursor: pointer;
  width: 100%;
  max-height: calc(calc(var(--vh, 1vh) * 100) - 120px);
  overflow-y: auto;
  box-sizing: border-box;
  scrollbar-width: thin;
}

.close {
  height: 14px;
  width: 14px;
}

:root {
  --vh: 100vh; /* valor por defecto */
}

.cuerpo {
  font-family: Arial, sans-serif;
  background: url("../assets/fondoNuevo.webp");
  background-position: top left;
  background-attachment: fixed;
  background-size: cover;
  color: #f0f0f0;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;  
  /* height: calc(var(--vh, 1vh) * 100); */
  height: calc(var(--vh, 1vh) * 100);
  overflow-x: hidden;
}

.blur.blurred {
  backdrop-filter: blur(7px);
  height: calc(var(--vh, 1vh) * 300);
  width: 100%;
  align-items: center;
  position: fixed;
  top: calc(var(--vh, 1vh) * 0);
  display: flex;
  background-color: rgba(0, 0, 0, 0.35);
  transition: 0.4s linear;
}

.blur {
  transition: 0.4s linear;
}

.minRes {
  display: none;
}

a {
  text-decoration: underline !important;
  text-decoration-thickness: 2px !important;
  text-decoration-color: currentColor !important;
  text-underline-offset: 2px !important;
}


.cuerpo2 {
  font-family: Arial, sans-serif;
  background: url("../assets/fondoNuevo.webp");
  background-position: top left;
  background-attachment: fixed;
  background-size: cover;
  color: #f0f0f0;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  /* height: calc(var(--vh, 1vh) * 100); */
  height: 100vh;

}

.grupo2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: absolute;
  gap: 2.34vh;
  top: 0;
  /* height: calc(var(--vh, 1vh) * 100); */
  height: 100vh;

  width: 39.41vh;
  padding-top: 20.93vh;
  
}

.titulo2 {
  display: flex;
  position: relative;
  flex-direction: column;
  justify-content: center;
  transform-origin: center top;
  top: 0;
}

.tituloTextoBasico2 {
  height: 8.5vh;
  font-family: "New Rocker";
  font-style: normal;
  font-weight: 400;
  font-size: 3.4328vh; /* 28px -> 3.4328vh */
  line-height: 100%;

  text-align: center;

  background: linear-gradient(
      360deg,
      rgba(182, 155, 103, 0) 28%,
      rgba(182, 155, 103, 0.5) 100%
    ),
    #fdf5e4;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.tituloTexto2 {
  font-family: "New Rocker";
  font-style: normal;
  font-weight: 400;
  font-size: 1.97vh; /* 16px -> 1.97vh */
  line-height: 152%;

  text-align: center;

  background: linear-gradient(
      360deg,
      rgba(182, 155, 103, 0) 28%,
      rgba(182, 155, 103, 0.5) 100%
    ),
    #fdf5e4;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.pergamino-wrapper {
  width: 36.95vh; /* 300px -> 300/812*100 ≈ 36.95vh */
  height: 49.26vh; /* 400px -> 400/812*100 ≈ 49.26vh */
  overflow: hidden;
  position: relative;
}

/* Contenedor principal del pergamino */
.pergamino {
  position: relative;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

/* Imagen cerrada arriba */
.pergamino .cerrado {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  z-index: 2;
  pointer-events: auto;
  transition: opacity 0.4s ease-in-out 0.4s;
}

/* Contenedor de la imagen abierta con recorte */
.abierto-container {
  position: absolute;
  top: 5vh;
  left: 0;
  width: 100%;
  height: calc(100% - 5vh);
  overflow: hidden; /* parte superior oculta al inicio */
  z-index: 1;
}

/* Imagen abierta */
.abierto {
  position: absolute;
  top: -5vh;
  left: 0;
  width: 100%;
  height: auto;
  transform: translateY(-100%);
  transition: transform 0.8s ease-in-out;
}

/* Contenido de texto */
.abierto-container .texto {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  transform: translateY(-100%); /* se mueve con la imagen */
  transition: transform 0.8s ease-in-out;
  padding: 7.39vh; /* 60px -> 60/812*100 ≈ 7.39vh */
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

.textoArriba {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  position: relative;
  top: -3.5vh;
  font-family: "New Rocker", system-ui;
  font-weight: 400;
  font-style: normal;
  font-size: 2.216vh; /* 18px -> 2.16vh */
  line-height: 100%;
  letter-spacing: 0%;
  text-align: center;
  color: var(--azul-oscuro, rgba(14, 22, 40, 1));
}

.textoAbajo {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  position: relative;
  top: -2.5vh; /* -2.5px -> -2.5/812*100 ≈ -0.308vh */
  width: 19.83vh; /* 161px -> 161/812*100 ≈ 19.83vh */
  opacity: 1;
  gap: 1.23vh; /* 10px -> 10/812*100 ≈ 1.23vh */
  border-radius: 2.46vh; /* 20px -> 20/812*100 ≈ 2.46vh */
  padding-top: 1.23vh; /* 10px -> 1.23vh */
  padding-bottom: 1.23vh;

  background: var(--azul-oscuro, rgba(14, 22, 40, 1));

  font-family: "New Rocker", system-ui;
  font-weight: 400;
  font-style: normal;
  font-size: 2.216vh; /* 18px -> 2.216vh */
  line-height: 100%;
  letter-spacing: 0%;
  text-align: center;
  color: var(--beige, rgba(253, 245, 228, 1));
}

.pergamino.abiertoAnim .abierto,
.pergamino.abiertoAnim .texto {
  transform: translateY(0);
}

#loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(38, 49, 73, 1); /* fondo blanco mientras carga */
  z-index: 9999; /* encima de todo */
  transition: opacity 0.6s ease, visibility 0.6s ease;
}

#loader.hidden {
  opacity: 0;
  visibility: hidden;
}

.spinner {
  width: 15vh;
  height: 15vh;
  filter: invert(100%);
  perspective: 1000px; /* para dar efecto 3D */
}

.spinner img {
  width: 100%;
  height: 100%;
  animation: flip 1.2s linear infinite;
  transform-style: preserve-3d;
}

@keyframes flip {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}