body {
  margin: 0;
  overflow: hidden;
  font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
  background-color: transparent;
 
}

html, body {
  /* CORRECCIÓN */
  height: calc(var(--vh, 1vh) * 100);
  width: 100%;
  margin: 0;
  padding: 0;
}

/* Superposición Oscura */
#darkOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  /* CORRECCIÓN */
  height: calc(var(--vh, 1vh) * 100);
  background-color: rgba(0, 0, 0, 0.3); /* Color negro con opacidad */
  z-index: 4000; /* Entre WebGLRenderer (z=4500) y CSS3DRenderer (z=5001) */
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none; /* Permite interacciones debajo */
}

/* Fondo animado de Vanta */
#vanta-background {
position: fixed;
top: 0;
left: 0;
width: 100%;
/* CORRECCIÓN */
height: calc(var(--vh, 1vh) * 100);
z-index: 0; /* Debajo del modal */
}


/* Canvas de Three.js */
canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  /* CORRECCIÓN */
  height: calc(var(--vh, 1vh) * 100);
  z-index: 4500;
}

/* al canvas de Three.js (renderer.domElement) */
canvas {
  cursor: grab;
}


/* Contenedor del CSS3DRenderer */
#css-container, canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  /* CORRECCIÓN */
  height: calc(var(--vh, 1vh) * 100);
}



/* Estilo del Logo */
#logo {
  position: absolute;
  top: 5%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5002; /* Por encima de CSS3DRenderer */
  cursor: pointer;
  transition: opacity 0.5s ease;
}
#logo img {
  width: 125px;
  transition: opacity 0.5s ease;
}

/* Estilos base para los botones de esquina */
.corner-button {
  position: absolute;
  width: 50px;
  height: 50px;
  background-color: rgba(0, 0, 0, 0.6);
  color: #fff;
  border: none;
  border-radius: 50%;
  text-align: center;
  font-size: 16px;
  z-index: 0; /* Valor base que asegura que no sobresale si no es necesario */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s, opacity 0.5s ease;
  text-decoration: none; /* Eliminación de subrayado */
  margin: 0; /* Eliminado para posiciones precisas */
}

.corner-button:hover {
  background-color: rgba(49, 0, 43, 0.7);
  transform: scale(1.05);
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.6); /* Glow effect */
}

/* Botones "Compartir", "Cerrar", "Ayuda" más pequeños */
.corner-button.share-button,
.corner-button.close-button,
.corner-button.help-button {
  width: 35px;
  height: 35px;
}

.corner-button.share-button i,
.corner-button.close-button i,
.corner-button.help-button i {
  font-size: 16px;
}

 /* Mostrar el botón cuando el video o thumbnail esté activo */
.active .corner-button {
  z-index: 10; /* Se eleva solo cuando el elemento está activo */
  opacity: 1; /* Visibilidad completa */
}

/* Posicionar el botón de Compartir en la esquina superior izquierda */
#shareButton {
  top: 5%;
  left: 10px;

}

/* Posicionar el botón de Instagram en la esquina inferior izquierda */
#contactButton {
  bottom: 20px;
  left: 10px;

  width: 35px;
  height: 35px;
}

/* Posicionar el botón de LinkedIn encima del botón de Instagram */
#linkedinButton {
  bottom: 70px; /* 35px altura del botón + 10px margen + 15px separación */
  left: 10px;
  
  width: 35px;
  height: 35px;
}

/* Posicionar el botón de Email en la esquina inferior derecha */
#emailButton {
  bottom: 20px;
  right: 10px;

  width: 35px;
  height: 35px;
}

/* Asegurar que los botones de Cerrar y Ayuda se mantengan en la esquina superior derecha */
#helpButton,
#closeButton {
  top: 5%;
  right: 10px;
  
}

/* Opcional: Ajustes de Z-Index para asegurar la visibilidad correcta */
#shareButton,
#contactButton,
#linkedinButton,
#emailButton,
#helpButton,
#closeButton {
  z-index: 5003; /* Mantener o ajustar según sea necesario */
}

/* Ocultar el botón de Cerrar por defecto */
#closeButton {
  display: none;
}

/* Ajustes para pantallas pequeñas */
@media (max-width: 768px) {
  #shareButton {
    top: 5%;
    left: 10px;
  }

  #contactButton {
    bottom: 10px;
    left: 10px;
  }

  #linkedinButton {
    bottom: 50px; /* Ajuste para pantallas pequeñas */
    left: 10px;
  }

  #emailButton {
    bottom: 10px;
    right: 10px;
  }

  #helpButton,
  #closeButton {
    top: 5%;
    right: 10px;
  }

  #logo img {
    width: 80px;
  }
  .video-plane {
    width: 90vw;
    height: auto;
    max-height: 50vh;
  }
  .video-node {
    transform: scale(0.8);
  }
  #logo {
    top: 5%;
  }
  .corner-button {
    width: 40px;
    height: 40px;
  }
  .corner-button i {
    font-size: 18px;
  }
  .share-button,
  .close-button,
  .help-button,
  #contactButton,
  #emailButton,
  #linkedinButton {
    width: 30px; /* Reducido aún más en móviles */
    height: 30px;
  }
  .corner-button.share-button i,
  .corner-button.close-button i,
  .corner-button.help-button i,
  #contactButton i,
  #emailButton i,
  #linkedinButton i {
    font-size: 14px; /* Reducido el tamaño del icono */
  }
  .extra-button {
    font-size: 18px; /* Reducir tamaño de fuente en móviles */
    padding: 8px 16px; /* Reducir padding en móviles */
  }
  #infoBanner {
    bottom: 12%; /* Ajuste de posición */
    max-width: calc(100% - 80px); /* Ajuste para pantallas pequeñas */
    padding: 15px 15px;
    height: 50px; /* Aumento de altura para pantallas pequeñas */
  }

  /* Ajustes para orientación vertical en móviles */
  @media screen and (orientation: portrait) and (max-width: 768px) {
    #shareButton {
      top: 5%;
      left: 10px;
    }

    #contactButton {
      bottom: 20px;
      left: 10px;
    }

    #linkedinButton {
      bottom: 60px;
      left: 10px;
    }

    #emailButton {
      bottom: 10px;
      right: 10px;
    }

    #helpButton,
    #closeButton {
      top: 5%;
      right: 10px;
    }

    #logo img {
      width: 70px;
    }
    .video-plane {
      width: 100vw;
      height: auto;
      max-height: 40vh;
    }
    .video-node {
      transform: scale(0.9);
    }
    .corner-button {
      width: 40px;
      height: 40px;
    }
    .corner-button i {
      font-size: 18px;
    }
    .extra-button {
      font-size: 18px; /* Aumentar tamaño de fuente */
      padding: 10px 20px;
    }
    #infoBanner {
      max-width: calc(100% - 80px); /* Ajuste para orientación vertical */
      padding: 15px 15px;
      height: 50px; /* Aumento de altura para orientación vertical */
    }

    /* Ajustes para el yearCounter en orientación vertical */
    #yearCounter {
      font-size: 16px;
      padding: 9px 18px;
      height: 28px;
      opacity: 0.8;
      bottom: 15px; /* Ajuste adicional para orientación vertical */
    }
  }
}

/* Orientación Horizontal */
@media screen and (orientation: landscape) and (max-width: 1024px) {
  #shareButton {
    top: 5%;
    left: 10px;
  }

  #contactButton {
    bottom: 10px;
    left: 10px;
  }

  #linkedinButton {
    bottom: 60px;
    left: 10px;
  }

  #emailButton {
    bottom: 10px;
    right: 10px;
  }

  #helpButton,
  #closeButton {
    top: 5%;
    right: 10px;
  }

  #logo img {
    width: 90px;
  }
  .video-plane {
    width: 80vw;
    height: auto;
    max-height: 60vh;
  }
  .video-node {
    transform: scale(1);
  }
  .corner-button {
    width: 45px;
    height: 45px;
  }
  .corner-button i {
    font-size: 20px;
  }
  .extra-button {
    font-size: 18px; /* Aumentar tamaño de fuente */
    padding: 10px 20px;
  }
  #infoBanner {
    max-width: calc(100% - 120px); /* Ajuste para orientación horizontal en pantallas pequeñas */
    padding: 15px 20px;
    height: 50px; /* Aumento de altura para orientación horizontal */
  }

  /* Ajustes para el yearCounter en orientación horizontal */
  #yearCounter {
    font-size: 16px;
    padding: 9px 18px;
    height: 28px;
    opacity: 0.5;

    bottom: 10px; /* Ajuste adicional para orientación horizontal */
  }
}

/* Cintillo Informativo */
#infoBanner {
  position: fixed;
bottom: 12%;
left: 50%;
/* Reemplaza la línea anterior con esta */
transform: translateX(-50%) translateZ(0);
-webkit-transform: translateX(-50%) translateZ(0); /* Para compatibilidad */
background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 10%, rgba(0, 0, 0, 0.8) 90%, rgba(0, 0, 0, 0) 100%);
color: #fff;
text-align: center;
padding: 15px 20px;
font-size: 14px;
z-index: 5002;
opacity: 0;
transition: opacity 0.5s ease;
box-sizing: border-box;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
border-radius: 10px;}

/* Spinner de Carga */
#loadingSpinner {
  position: absolute; /* Cambiado de fixed a absolute para posicionarlo sobre el thumbnail/video */
  z-index: 6000;
  display: none; /* Inicialmente oculto */
  pointer-events: none; /* Permite que los clics pasen a través */
}

/* Estilo del Spinner */
.spinner {
  border: 4px solid rgba(255, 255, 255, 0.3); /* Reducido de 8px a 4px */
  border-top: 4px solid #fff; /* Reducido de 8px a 4px */
  border-radius: 50%;
  width: 30px; /* Reducido de 60px a 30px */
  height: 30px; /* Reducido de 60px a 30px */
  animation: spin 1s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Estilos para el botón extra */
.extra-button {
  background-color: rgba(0, 0, 0, 0.6);
  color: #fff;
  z-index: 5;
  border: none;
  border-radius: 20px;
  padding: 10px 20px; /* Ajusta el padding para que el botón tenga un tamaño adecuado */
  cursor: pointer;
  font-size: 18px; /* Tamaño de fuente */
  font-family: Gotham, "Helvetica Neue", Helvetica, sans-serif;
  transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s;
  pointer-events: auto;
  text-align: center; /* Centrar el texto */
  position: absolute; /* Asegura que el botón se posicione correctamente */
}
.extra-button:hover {
  background-color: rgba(0, 0, 0, 0.8);
  transform: scale(1.05);
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.6); /* Glow effect */
}

/* Estilos para el contenedor de información en el overlay */
/* Estilos para el contenedor de información en el overlay */
.info-container {
width: 90%;
max-width: 400px;
height: 90%;
max-height: 300px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: #fff;
font-size: 14px;
text-align: center;
padding: 20px;
box-sizing: border-box;
overflow: hidden;
background: radial-gradient(circle, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.5) 70%, rgba(0, 0, 0, 0.3) 100%);
border-radius: 10px;
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
}


/* Clase para mostrar el contenedor de información */
.info-container.visible {
  opacity: 1; /* Hacer completamente visible */
  
  pointer-events: none; /* Asegura que no interfiera con las interacciones */
}

/* Ajustes Generales para Pantallas Pequeñas */
@media (max-width: 768px) {
  #logo img {
    width: 80px;
  }
  .video-plane {
    width: 90vw;
    height: auto;
    max-height: 50vh;
  }
  .video-node {
    transform: scale(0.8);
  }
  #logo {
    top: 5%;
  }
  .corner-button {
    width: 40px;
    height: 40px;
  }
  .corner-button i {
    font-size: 18px;
  }
  .share-button,
  .close-button,
  .help-button,
  #contactButton,
  #emailButton,
  #linkedinButton {
    width: 30px; /* Reducido aún más en móviles */
    height: 30px;
  }
  .corner-button.share-button i,
  .corner-button.close-button i,
  .corner-button.help-button i,
  #contactButton i,
  #emailButton i,
  #linkedinButton i {
    font-size: 14px; /* Reducido el tamaño del icono */
  }
  .extra-button {
    font-size: 18px; /* Reducir tamaño de fuente en móviles */
    padding: 8px 16px; /* Reducir padding en móviles */
  }
  #infoBanner {
    bottom: 12%; /* Ajuste de posición */
    max-width: calc(100% - 80px); /* Ajuste para pantallas pequeñas */
    padding: 15px 15px;
    height: 50px; /* Aumento de altura para pantallas pequeñas */
  }

  /* Ajustes para orientación vertical en móviles */
  @media screen and (orientation: portrait) and (max-width: 768px) {
    #shareButton {
      top: 5%;
      left: 10px;
    }

    #contactButton {
      bottom: 10px;
      left: 10px;
    }

    #linkedinButton {
      bottom: 60px;
      left: 10px;
    }

    #emailButton {
      bottom: 10px;
      right: 10px;
    }

    #helpButton,
    #closeButton {
      top: 5%;
      right: 10px;
    }

    #logo img {
      width: 70px;
    }
    .video-plane {
      width: 100vw;
      height: auto;
      max-height: 40vh;
    }
    .video-node {
      transform: scale(0.9);
    }
    .corner-button {
      width: 40px;
      height: 40px;
    }
    .corner-button i {
      font-size: 18px;
    }
    .extra-button {
      font-size: 18px; /* Aumentar tamaño de fuente */
      padding: 10px 20px;
    }
    #infoBanner {
      max-width: calc(100% - 80px); /* Ajuste para orientación vertical */
      padding: 15px 15px;
      height: 50px; /* Aumento de altura para orientación vertical */
    }

    /* Ajustes para el yearCounter en orientación vertical */
    #yearCounter {
      font-size: 16px;
      padding: 9px 18px;
      opacity: 0.5;

      height: 28px;
      bottom: 15px; /* Ajuste adicional para orientación vertical */
    }
  }
}

/* Orientación Horizontal */
@media screen and (orientation: landscape) and (max-width: 1024px) {
  #shareButton {
    top: 5%;
    left: 10px;
  }

  #contactButton {
    bottom: 10px;
    left: 10px;
  }

  #linkedinButton {
    bottom: 60px;
    left: 10px;
  }

  #emailButton {
    bottom: 10px;
    right: 10px;
  }

  #helpButton,
  #closeButton {
    top: 5%;
    right: 10px;
  }

  #logo img {
    width: 90px;
  }
  .video-plane {
    width: 80vw;
    height: auto;
    max-height: 60vh;
  }
  .video-node {
    transform: scale(1);
  }
  .corner-button {
    width: 45px;
    height: 45px;
  }
  .corner-button i {
    font-size: 20px;
  }
  .extra-button {
    font-size: 18px; /* Aumentar tamaño de fuente */
    padding: 10px 20px;
  }
  #infoBanner {
    max-width: calc(100% - 120px); /* Ajuste para orientación horizontal en pantallas pequeñas */
    padding: 15px 20px;
    height: 50px; /* Aumento de altura para orientación horizontal */
  }

  /* Ajustes para el yearCounter en orientación horizontal */
  #yearCounter {
    font-size: 18px;
    padding: 9px 18px;
    height: 28px;
    opacity: 0.5;

    bottom: 15px; /* Ajuste adicional para orientación horizontal */
  }
}



/* Spinner de Carga */
#loadingSpinner {
  position: absolute; /* Cambiado de fixed a absolute para posicionarlo sobre el thumbnail/video */
  z-index: 6000;
  display: none; /* Inicialmente oculto */
  pointer-events: none; /* Permite que los clics pasen a través */
}

/* Estilo del Spinner */
.spinner {
  border: 4px solid rgba(255, 255, 255, 0.3); /* Reducido de 8px a 4px */
  border-top: 4px solid #fff; /* Reducido de 8px a 4px */
  border-radius: 50%;
  width: 30px; /* Reducido de 60px a 30px */
  height: 30px; /* Reducido de 60px a 30px */
  animation: spin 1s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Estilos para el botón extra */
.extra-button {
  background-color: rgba(0, 0, 0, 0.6);
  color: #fff;
  z-index: 10;
  border: none;
  border-radius: 20px;
  padding: 10px 20px; /* Ajusta el padding para que el botón tenga un tamaño adecuado */
  cursor: pointer;
  font-size: 18px; /* Tamaño de fuente */
  font-family: Gotham, "Helvetica Neue", Helvetica, sans-serif;
  transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s;
  pointer-events: auto;
  text-align: center; /* Centrar el texto */
  position: absolute; /* Asegura que el botón se posicione correctamente */
}
.extra-button:hover {
  background-color: rgba(0, 0, 0, 0.8);
  transform: scale(1.05);
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.6); /* Glow effect */
}

/* Estilos para el contenedor de información en el overlay */
.info-container {
  width: 90%;
  max-width: 400px; /* Limita el ancho máximo */
  height: 90%;
  max-height: 300px; /* Limita la altura máxima */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 14px; /* Reducido de 18px a 14px */
  text-align: center;
  padding: 20px;
  box-sizing: border-box;
  overflow: hidden; /* Evita que el contenido se desborde */
  opacity: 0;
  transition: opacity 0.3s ease; /* Transición más rápida */
  pointer-events: none; /* Permite que los clics pasen a través */
  background-color: rgba(0, 0, 0, 0.5); /* Fondo semitransparente para mejorar legibilidad */
  border-radius: 10px; /* Bordes redondeados para mejor estética */
}

/* Clase para mostrar el contenedor de información */
.info-container.visible {
  opacity: 1; /* Hacer completamente visible */
  pointer-events: none; /* Asegura que no interfiera con las interacciones */
}

/* Ajustes Generales para Pantallas Pequeñas */
@media (max-width: 768px) {
  #logo img {
    width: 80px;
  }
  .video-plane {
    width: 90vw;
    height: auto;
    max-height: 50vh;
  }
  .video-node {
    transform: scale(0.8);
  }
  #logo {
    top: 5%;
  }
  .corner-button {
    width: 40px;
    height: 40px;
  }
  .corner-button i {
    font-size: 18px;
  }
  .share-button,
  .close-button,
  .help-button,
  #contactButton,
  #emailButton,
  #linkedinButton {
    width: 30px; /* Reducido aún más en móviles */
    height: 30px;
  }
  .corner-button.share-button i,
  .corner-button.close-button i,
  .corner-button.help-button i,
  #contactButton i,
  #emailButton i,
  #linkedinButton i {
    font-size: 14px; /* Reducido el tamaño del icono */
  }
  .extra-button {
    font-size: 18px; /* Reducir tamaño de fuente en móviles */
    padding: 8px 16px; /* Reducir padding en móviles */
  }
  #infoBanner {
    bottom: 12%; /* Ajuste de posición */
    max-width: calc(100% - 80px); /* Ajuste para pantallas pequeñas */
    padding: 15px 15px;
    height: 50px; /* Aumento de altura para pantallas pequeñas */
  }

  /* Ajustes para orientación vertical en móviles */
  @media screen and (orientation: portrait) and (max-width: 768px) {
    #shareButton {
      top: 5%;
      left: 10px;
    }

    #contactButton {
      bottom: 10px;
      left: 10px;
    }

    #linkedinButton {
      bottom: 60px;
      left: 10px;
    }

    #emailButton {
      bottom: 10px;
      right: 10px;
    }

    #helpButton,
    #closeButton {
      top: 5%;
      right: 10px;
    }

    #logo img {
      width: 70px;
    }
    .video-plane {
      width: 100vw;
      height: auto;
      max-height: 40vh;
    }
    .video-node {
      transform: scale(0.9);
    }
    .corner-button {
      width: 40px;
      height: 40px;
    }
    .corner-button i {
      font-size: 18px;
    }
    .extra-button {
      font-size: 18px; /* Aumentar tamaño de fuente */
      padding: 10px 20px;
    }
    #infoBanner {
      max-width: calc(100% - 80px); /* Ajuste para orientación vertical */
      padding: 15px 15px;
      height: 50px; /* Aumento de altura para orientación vertical */
    }

    /* Ajustes para el yearCounter en orientación vertical */
    #yearCounter {
      font-size: 16px;
      padding: 9px 18px;
      opacity: 0.5;

      height: 28px;
      bottom: 15px; /* Ajuste adicional para orientación vertical */
    }
  }
}

/* Orientación Horizontal */
@media screen and (orientation: landscape) and (max-width: 1024px) {
  #shareButton {
    top: 5%;
    left: 10px;
  }

  #contactButton {
    bottom: 10px;
    left: 10px;
  }

  #linkedinButton {
    bottom: 60px;
    left: 10px;
  }

  #emailButton {
    bottom: 10px;
    right: 10px;
  }

  #helpButton,
  #closeButton {
    top: 5%;
    right: 10px;
  }

  #logo img {
    width: 90px;
  }
  .video-plane {
    width: 80vw;
    height: auto;
    max-height: 60vh;
  }
  .video-node {
    transform: scale(1);
  }
  .corner-button {
    width: 45px;
    height: 45px;
  }
  .corner-button i {
    font-size: 20px;
  }
  .extra-button {
    font-size: 18px; /* Aumentar tamaño de fuente */
    padding: 10px 20px;
  }
  #infoBanner {
    max-width: calc(100% - 120px); /* Ajuste para orientación horizontal en pantallas pequeñas */
    padding: 15px 20px;
    height: 50px; /* Aumento de altura para orientación horizontal */
  }

  /* Ajustes para el yearCounter en orientación horizontal */
  #yearCounter {
    font-size: 18px;
    padding: 9px 18px;
    height: 28px;
    opacity: 0.5;

    bottom: 15px; /* Ajuste adicional para orientación horizontal */
  }
}

/* Contador de años */
#yearCounter {
  position: fixed;
  bottom: 2%; /* Cambiado de top a bottom */
  left: 50%;
  color: #fff;
  transform: translateX(-50%);
  font-size: 18px;
  z-index: 5001;
  opacity: 0.5;
  transition: opacity 0.5s ease;
  background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.329) 10%, rgba(0, 0, 0, 0.308) 90%, rgba(0, 0, 0, 0) 100%);
  padding: 10px 20px;
  border-radius: 10px;
  cursor: pointer;
  box-sizing: border-box;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto; /* Permitir interacciones */
}
#yearCounter span {
  transition: all 0.3s ease;
}
/* Ajustes para pantallas pequeñas */
@media (max-width: 768px) {
  #yearCounter {
    font-size: 18px;
    padding: 8px 16px;
    height: 25px;
    opacity: 0.5;

    bottom: 10px; /* Ajuste adicional para pantallas pequeñas */
  }
}
@media screen and (orientation: portrait) {
  #yearCounter {
    font-size: 18px;
    padding: 9px 18px;
    height: 28px;
    opacity: 0.5;

    bottom: 15px; /* Ajuste adicional para orientación vertical */
  }
}
@media screen and (orientation: landscape) and (max-width: 1024px) {
  #yearCounter {
    font-size: 18px;
    padding: 9px 18px;
    height: 28px;
    opacity: 0.5;
    bottom: 15px; /* Ajuste adicional para orientación horizontal */
  }
}

/* Modal de Ayuda Pequeño */
#helpModal {
  display: none; /* Oculto por defecto */
  position: fixed;
  z-index: 7000; /* Por encima de todo */
  top: 10px;
  right: 60px; /* Espacio para otros botones si es necesario */
  width: 250px; /* Ancho fijo para el modal pequeño */
  background-color: rgba(0,0,0,0.8); /* Fondo semitransparente */
  border-radius: 10px;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
  opacity: 0;
  transition: opacity 0.3s ease;
}

#helpModal.visible {
  display: block;
  opacity: 1;
}

#helpModalContent {
  padding: 15px;
  color: #fff;
  position: relative;
}

#helpModalContent h3 {
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 16px;
  text-align: center;
}

#helpModalContent ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

#helpModalContent li {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  font-size: 14px;
}

#helpModalContent li i {
  margin-right: 8px;
  font-size: 16px;
  width: 20px; /* Espacio fijo para los iconos */
  text-align: center;
}

/* Botón de Cerrar del Modal */
.close-modal {
  width: 25px;
  height: 25px;
  background-color: rgba(0, 0, 0, 0.6);
  color: #fff;
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: absolute;
  top: 5px;
  right: 10px;
  transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s;
}
.close-modal:hover {
  background-color: rgba(0, 0, 0, 0.8);
  transform: scale(1.1);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
}
/* Botón de Acerca de */
#aboutButton {
bottom: 60px; /* Posición encima del emailButton */
right: 10px;
width: 35px;
height: 35px;
z-index: 9999; /* Mantener la consistencia con otros botones */
}

#aboutButton i {
font-size: 16px;
}

/* Botón de Acerca de */
#aboutButton {
bottom: 60px; /* Ajusta según la posición deseada encima del emailButton */
right: 10px;
width: 35px;
height: 35px;
}

#aboutButton i {
font-size: 16px;
}
/* ================================
   7. MODAL ACERCA DE (ABOUT MODAL)
   ================================ */

   #aboutModal {
    display: none;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    /* CORRECCIÓN */
    height: calc(var(--vh, 1vh) * 100) !important;
    padding: 0 !important;
    margin: 0 !important;
    transform: none !important;
    background: rgba(0, 0, 0, 0.85) !important;
    border-radius: 0 !important;
    overflow: auto !important;
    z-index: 7000 !important;
    transition: opacity 0.3s ease !important;
    backdrop-filter: blur(8px);
  }
  
  #aboutModal.visible {
    display: block !important;
    opacity: 1;
  }

  #aboutModalContent {
    position: absolute;
    top: 50%; /* Centrado vertical */
    left: 50%; /* Centrado horizontal */
    transform: translate(-50%, -50%); /* Ajuste real del centro */
    width: 90%;
    max-width: 700px;
    max-height: 80vh;
    padding: 40px 30px;
    box-sizing: border-box;
    overflow-y: auto;
    color: #fff;
    text-align: center;
    font-size: 18px;
    line-height: 1.75;
    font-weight: 400;
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 12px;
    backdrop-filter: blur(10px);
  }
  
  /* Títulos dentro del modal */
  #aboutModalContent h3 {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 20px;
  }
  

  @media (max-width: 768px) {
    #aboutModalContent {
      padding: 30px 20px;
      font-size: 16px;
    }
  
    #aboutModalContent h3 {
      font-size: 20px;
    }
  
    #aboutModalContent p {
      font-size: 16px;
      margin-bottom: 14px;
    }
  }
  
  /* Párrafos */
  #aboutModalContent p {
    font-size: 18px;
    line-height: 1.7;
    margin-bottom: 18px;
  }
  
  #aboutModal .close-modal {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    width: 28px;
    height: 28px;
    background-color: rgba(255, 255, 255, 0.15);
    color: #fff;
    border: none;
    border-radius: 50%;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 8000 !important;
  }
  
  #aboutModal .close-modal:hover {
    background-color: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
  }
  
  @media (max-width: 768px) and (orientation: landscape) {
    #aboutModalContent {
      padding: 16px 24px;
      font-size: 1rem;
    }
  }
  
  @media (max-width: 480px) {
    #aboutModalContent {
      padding: 16px 20px;
    }
  }
  
  #aboutButton {
    position: absolute;
    bottom: 70px;
    right: 10px;
    width: 35px;
    height: 35px;
    z-index: 9999;
  }
  
  #aboutButton i {
    font-size: 16px;
  }

#vanta-background {
/* ... */
/* CORRECCIÓN */
height: calc(var(--vh, 1vh) * 100);
}
/* Botón AR para Mauricio */
.ar-mauricio-button {
background-color: rgba(0, 0, 0, 0.6);
color: #fff;
border: none;
border-radius: 20px;
padding: 8px 16px;
cursor: pointer;
font-size: 18px;
transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s;
pointer-events: auto;
text-align: center;
/* Opcional: Añadir margen o ajustar más estilos */
/* Asegúrate de que el botón sea legible */
}
model-viewer {
background-color: rgba(0, 0, 0, 0.2); /* Fondo translúcido */
backdrop-filter: blur(10px); /* Efecto de desenfoque */
-webkit-backdrop-filter: blur(10px); /* Soporte para Safari */
border-radius: 10px; /* Opcional: Bordes redondeados */
box-shadow: 0 0 15px rgba(0, 0, 0, 0.2); /* Sombra suave */
width: 80%;
}

model-viewer {
transition: backdrop-filter 0.5s ease, background-color 0.5s ease;
}


.ar-mauricio-button + model-viewer {
width: 100%;
height: 100%;
margin: 0; /* Eliminar márgenes */
padding: 0; /* Eliminar padding si existe */
box-sizing: border-box; /* Asegurar que el tamaño se maneje correctamente */
}
.ar-mauricio-button:hover {
background-color: rgba(0, 0, 0, 0.8);
transform: scale(1.05);
box-shadow: 0 0 20px rgba(255, 255, 255, 0.6); /* Efecto glow */
}

model-viewer {
display: block;
}

.hidden-model-viewer {
display: none;
}

.visible-model-viewer {
display: block;


}/* Modal */
.modal {
display: none; /* Oculto por defecto */
position: fixed;
z-index: 6000; /* Por encima de otros elementos */
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.5); /* Reducir opacidad para dejar ver el fondo */
}

/* Modal Content */
.modal-content {
position: relative;
margin: 5% auto;
padding: 0;
width: 80%;
max-width: 800px;
height: 80%;
background-color: transparent; /* Hacer transparente el fondo del contenido */
border-radius: 10px;
overflow: hidden;
box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}


.modal-content model-viewer {
width: 100%;
height: 100%;
}

.close-modal {
position: absolute;
top: 10px;
right: 10px;
background-color: rgba(0, 0, 0, 0.6);
color: #fff;
border: none;
border-radius: 50%;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 16px;
z-index: 9000;
}

.close-modal:hover {
background-color: rgba(0, 0, 0, 0.8);
transform: scale(1.05);
box-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
}

/* Modal Responsivo */

/* Por Defecto: Desktop */
.modal-content {
width: 80%;
height: 80%;
}

/* Tablets y Móviles en Orientación Horizontal */
@media (max-width: 1024px) and (orientation: landscape) {
.modal-content {
width: 80%;
height: 60%;
}
}

/* Móviles en Orientación Vertical */
@media (max-width: 768px) and (orientation: portrait) {
.modal-content {
width: 80%;
height: 70%;
}
}

/* Móviles en Orientación Horizontal */
@media (max-width: 768px) and (orientation: landscape) {
.modal-content {
width: 90%;
height: 75%;
}
}

/* Ajustes adicionales para pantallas muy pequeñas */
@media (max-width: 480px) {
.modal-content {
width: 100%;
height: 85%;
border-radius: 0;
}
}

.extra-button, .ar-mauricio-button {
z-index: 5005; /* Asegura que estos botones estén sobre el canvas y otros elementos */
position: absolute; /* Ya lo tienes, para posicionarlos en el espacio */
}