body, html {
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0;
            font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
            font-size: 13.5px;
            text-shadow: 4px 4px 4px rgba(255, 255, 255, 0.5);
            overflow-x: hidden;
		    overflow-y: hidden; /* Añadir esta línea para controlar el desbordamiento vertical */

            background-color: transparent !important;
			top: 0%; /* Alinea al centro vertical */
            left: 0%; /* Alinea al centro horizontal */
            background-color: #fcff68 /* Fondo azul */
        }
            #vanta-canvas { /* Asumiendo que usas este ID para el canvas de Vanta */
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0;
            left: 0;
            z-index: -1; /* Para asegurarse de que el canvas esté detrás de todo el contenido */
            }
        #content {
            text-align: center;
            color: black;
            z-index: 1003;
            position: absolute;
            top: 50%; /* Alinea al centro vertical */
            left: 50%; /* Alinea al centVro horizontal */
            transform: translate(-50%, -50%);
            width: 100%;
			height: 100%;
            max-width: 500px;
            max-height: 800px;
            font-size: 1.3em;
            background-color: transparent !important;
			
        }
		
        

	
        button {
            background: rgba(7, 164, 255, 0.8);/* Fondo semi-transparente para efecto cristalino */
            color: white;
            font-size: 1em;
            border: none;
            border-radius: 15px;
            cursor: pointer;
			
        }


        body * {
			
            margin: 0;
            padding: 0;
        }

        body {
            padding-top: env(safe-area-inset-top);
            padding-bottom: env(safe-area-inset-bottom);
            padding-left: env(safe-area-inset-left);
            padding-right: env(safe-area-inset-right);
        }

    

        @media screen and (orientation: landscape) {
            body, html {
                width: 100%;
            }

            #header {
                width: 100%;
            }
		
        }

  /* Media query para pantallas grandes (ejemplo: más de 1024px de ancho) */
    @media screen and (min-width: 1024px) {
        model-viewer {
            --camera-orbit: 0deg 75deg 80%; 
            --field-of-view: 45deg; 
        }
    }

    .swal-title {
            color: black;
            background-color: #53d0db; /* Fondo azul */
			
        }

		
		.swal2-backdrop-show {
            background: rgba(7, 164, 255, 0.8);/* Fondo semi-transparente para efecto cristalino */
  backdrop-filter: blur(5px); /* Efecto de desenfoque */
  -webkit-backdrop-filter: blur(5px); /* Efecto de desenfoque para Safari */
  
       }

    
    /* Hacer el fondo de SweetAlert transparente */
    .swal2-backdrop-show {
        background: rgba(7, 164, 255, 0.2);/* Fondo semi-transparente para efecto cristalino */
  backdrop-filter: blur(5px); /* Efecto de desenfoque */
  -webkit-backdrop-filter: blur(5px); /* Efecto de desenfoque para Safari */
  align-items: center;
   		z-index: 8000;
}
		
    
    /* Ajustar el SweetAlert Popup para asegurar la alineación correcta */
    .swal2-popup {
        margin: auto; /* Centrar automáticamente el popup */
        background-color: rgba(1, 22, 24, 0.9); /* Fondo azul con opacidad reducida */
        -webkit-backdrop-filter: blur(5px); /* Efecto de desenfoque para Safari */
        cursor: pointer;
    box-shadow: 0 0 20px 10px rgba(255, 120, 0, 0.7); /* Efecto de resplandor amplio en color naranja */
    transition: transform  0.3s ease; 
    backdrop-filter: blur(5px); /* Efecto de desenfoque */
    -webkit-backdrop-filter: blur(5px); /* Efecto de desenfoque para Safari */
    border: 1px solid #f2b300; /* Borde sutil para más realismo */
		z-index: 200;
    }

		
    .swal-behind {
    z-index: 0 !important;
}

			

    
	

#model-container {
    z-index: 10; /* Más alto para que esté por encima de los textos de ayuda */
	
}

/* Regla media query para orientación horizontal */
@media screen and (orientation: landscape) {
    #logo {
        max-width: 150px; /* Ancho máximo cuando el dispositivo está en horizontal */
    }
}



     

		
        /* Media query para dispositivos móviles */
        @media (max-width: 500px) and (max-height: 800px)   {
            #content {
                padding: 0 10px;
            }
			
			@media screen and (min-width: 801px) {
    /* Estilos específicos para escritorio aquí */
   
}


	


            #content p {
                align-content: center;
                text-align: center;
                margin: 0 10px;
            }
        }

        h1 {
            font-size: 1.7em;
            margin-top: 150px;
            position: relative;
            margin-bottom: 10px;
        }

        p {
            font-size: 1em;
            margin-bottom: 20px;
        }

        #model-container {
            width: 100%;
            height: 90%;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            top: 0;
            left: 0;
            z-index: 10; /* Más alto para que esté por encima de los textos de ayuda */
            opacity: 1;
            transition: opacity 1s ease-in-out;
    
            background-color: transparent !important;
        }

       #model-container model-viewer {
   width: 100vw;
    height: 100vh;
    position: absolute;
    max-height: 100vh; /* Máxima altura para evitar el scroll en dispositivos móviles */
    top: 0;
    left: 0;
}
		
		

model-viewer button[slot="ar-button"] { 
    display: none !important; 
}


model-viewer::part(ar-button) {
    display: none !important; 
}




  model-viewer::part(progress-bar) {
        position: absolute;
        top: 50%; /* Centrar verticalmente */
        left: 50%; /* Centrar horizontalmente */
        transform: translate(-50%, -50%); /* Ajuste fino para centrar exactamente */
        width: 100%; /* Ancho del progress bar */
        height: 100px; /* Altura del progress bar */
        background-color: blue; /* Color de fondo */
        color: white; /* Color del texto, si aplica */
		
    z-index: 1000; /* Un valor alto para asegurar que esté por encima de otros elementos */
    /* Resto de tus estilos aquí */

	  
    }
			
		


  h1 {
            font-size: 1.5em;
            margin-top: 150px;
            position: relative;
            margin-top: 14%;
        }


        .texto-con-sombra {

		align-items: center;
			align-content: center;
			    z-index: 4005;

		
		}
		
	
		
		#model-container {
    width: 100%;
    height: 100vh;
    position: relative;
}

		
		

		
			@keyframes spin {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
	model-viewer::part(progress-bar) {
    /* Estilos para la barra de carga */
    background-color: blue;
    color: white;
    height: 10px; /* Altura de la barra de carga */
}
}

		#model-container {
            background-color: transparent !important;
            z-index: 10; /* Más alto para que esté por encima de los textos de ayuda */

}

.loader {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 100%; /* Asegura cobertura completa */
    height: 100vh; /* Asumiendo que quieres que ocupe toda la ventana */
    background: rgba(0, 0, 0, 0.8);
    z-index: 1; /* Alto z-index */
}

.loading-text {
    position: absolute;
    color: white;
    font-size: 1.4em; /* Tamaño grande para fácil visualización */
    z-index: 101; /* Más alto que el del loader para asegurar visibilidad */
    top: 55%; /* Ajustado para mover hacia abajo desde el centro */
    left: 50%; /* Centrado horizontalmente */
    transform: translate(-50%, -50%); /* Ajusta para centrar exactamente el texto */
}
  
  .loader::before {
    content: '';
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50px;
    height: 50px;
    margin-top: -25px;
    margin-left: -25px;
    border-radius: 50%;
    border: 6px solid #ccc;
    border-top-color: #f2b300;
    animation: spin 1s ease-in-out infinite;
    z-index: 1; /* Menor z-index para que el spinner esté detrás del texto */
  }
  
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
  
  
		
		
		
/* Estilos del contenido principal (puedes ajustar según sea necesario) */
#content {
    text-align: center;
    color: black;
    z-index: 400;
	vertical-align: middle;
	
	align-items: center;
	justify-content: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
	height: 100%;
    max-width: 100%;
    max-height: 100%;
    font-size: 1.3em;
    
    background-color: transparent !important;
}


		.custom-swal-content {
    display: flex;
    align-items: center;
    justify-content: center;
}
	/* Estilo común para ambos botones */
		
		
		


/* Estilos del botón Company Logo */
#company-box {
    background: rgba(7, 164, 255, 0.8);/* Fondo semi-transparente para efecto cristalino */
  backdrop-filter: blur(5px); /* Efecto de desenfoque */
  -webkit-backdrop-filter: blur(5px); /* Efecto de desenfoque para Safari */
  

	border-radius: 50px;
    padding: 10px;
    cursor: pointer;
    z-index: 1005;
    display: flex;
    position: absolute; /* Cambiado de relativo a absoluto */   

    top: 35px; /* Ajustado el espaciado desde la parte superior */
    left: 10%; /* Ajustado el espaciado desde la derecha */
}


#company {
	    position: relative; /* Añade esta línea */


    width: 25px;
    height: 25px;
    z-index: 8006;
		opacity: 0.8;

}
		
		
		#company-box:hover {
            transform: scale(1.1);

            opacity: 0.4; /* Cambia los valores RGB y el valor de opacidad según tus preferencias */
}


#share-button {
    position: fixed;
    top: 3%; /* Posiciona el div en la parte superior de la pantalla */
    right: 10%; /* Ajusta la distancia desde el borde derecho de la pantalla */
    width: 45px; /* Ajusta el ancho del botón */
    height: 45px; /* Ajusta la altura del botón */
    z-index: 1005; /* Asegura que el botón esté sobre otros elementos */
    border-radius: 50px;
    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center; /* Alinea el contenido en el centro del botón */

    opacity: 1; /* Ajusta la opacidad si es necesario */
}

#share-button:hover {
    transform: scale(1.1);

    background-color: #f2b300;

}

.button-fixed-bottom-right {
    position: fixed;
    top: 3%; /* Ajusta según la posición deseada en la pantalla */
    right: 10%; /* Ajusta según la posición deseada en la pantalla */
    width: 45px; /* Tamaño del icono */
    height: 45px; /* Tamaño del icono */
    z-index: 1005; /* Asegura que el botón esté visible sobre otros elementos */
    border-radius: 50%; /* Hace que el botón sea circular */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center; /* Centra el icono dentro del botón */
    opacity: 1; /* Opacidad del botón */
    backdrop-filter: blur(5px); /* Efecto de desenfoque para fondo */
    -webkit-backdrop-filter: blur(5px); /* Efecto de desenfoque para Safari */
    box-shadow: 0 0 20px 10px rgba(255, 120, 0, 0.7); /* Efecto de resplandor */
    border: 2px solid #f2b300; /* Borde alrededor del botón */
}

.button-fixed-bottom-right:hover {
    transform: scale(1.1);

    opacity: 1; /* Cambia la opacidad al pasar el mouse */
    background-color: #f2b300; /* Cambia el color de fondo al pasar el mouse */
}
.button-fixed-bottom-left {
    position: fixed;
    top: 3%; /* Ajusta según la posición deseada en la pantalla */
    left: 10%; /* Ajusta según la posición deseada en la pantalla */
    width: 45px; /* Tamaño del icono */
    height: 45px; /* Tamaño del icono */
    z-index: 1005; /* Asegura que el botón esté visible sobre otros elementos */
    border-radius: 50%; /* Hace que el botón sea circular */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center; /* Centra el icono dentro del botón */
    opacity: 1; /* Opacidad del botón */
    backdrop-filter: blur(5px); /* Efecto de desenfoque para fondo */
    -webkit-backdrop-filter: blur(5px); /* Efecto de desenfoque para Safari */
    box-shadow: 0 0 20px 10px rgba(255, 120, 0, 0.7); /* Efecto de resplandor */
    border: 2px solid #f2b300; /* Borde alrededor del botón */
}

.button-fixed-bottom-left:hover {
    transform: scale(1.1);

    opacity: 1; /* Cambia la opacidad al pasar el mouse */
    background-color: #f2b300; /* Cambia el color de fondo al pasar el mouse */
}

.hotspot {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(7, 238, 255, 0.08);/* Fondo semi-transparente para efecto cristalino */
    text-align: center;
    font-family: 'Arial', sans-serif;
    font-size: 14px;
    cursor: pointer;
    box-shadow: 0 0 20px 10px rgba(255, 120, 0, 0.7); /* Efecto de resplandor amplio en color naranja */
    transition: transform 0.3s ease; 
    backdrop-filter: blur(5px); /* Efecto de desenfoque */
    -webkit-backdrop-filter: blur(5px); /* Efecto de desenfoque para Safari */
    border: 2px solid #f2b300; /* Borde sutil para más realismo */
}


.hotspot:hover {
  transform: scale(1.1);
  background-color: #f2b300;

 
}

.annotation {
  padding: 5px;
  color: white;
  text-shadow: 1px 1px 1px gray; /* Agrega una sombra negra al texto */

}

.annotation:hover {
    color: white;
 
}



.button-fixed-top-left {
    position: fixed;
    top: 2%; /* Posiciona el div en la parte superior de la pantalla */
    left: 10%; /* Ajusta según sea necesario para la alineación horizontal */
    z-index: 1005; /* Asegura que el logo esté sobre otros elementos */
    display: flex;
    align-items: center;
    justify-content: center; /* Centra el contenido del logo si es necesario */
    cursor: pointer;
}

	

.creator-link-container {
   position: fixed; /* Cambio de posición absoluta a fija */
   left: 0;
   right: 0;
   bottom: 20px; /* Ajusta este valor para cambiar la distancia desde el fondo */
   text-align: center;
   z-index: 2000; /* Asegúrate de que esté por encima de otros elementos si es necesario */
}

.creator-link {
    display: inline-block; /* Permite aplicar padding y otras propiedades de bloque */
    text-decoration: none;
    font-family: 'Arial', sans-serif; /* Ajusta la fuente como en los otros botones */
    color: #f2b300;
    background-color: rgba(7, 238, 255, 0.08); /* Color de fondo similar a hotspot */
    padding: 10px 15px;
    border-radius: 10px; /* Bordes redondeados como el hotspot */
    cursor: pointer;
    box-shadow: 0 0 20px 10px rgba(255, 120, 0, 0.7); /* Efecto de resplandor amplio en color naranja */
    transition: transform 0.3s ease, background-color 0.3s ease; /* Transiciones suaves para transform y background */
    text-align: center; /* Asegura que el texto esté centrado */
    font-size: 12px; /* Tamaño de fuente */
    text-shadow: 1px 1px 1px gray; /* Sombra de texto para mejorar legibilidad */
    border: 2px solid #f2b300; /* Borde sutil para más realismo */
}

.creator-link:hover, .creator-link:focus {
    background-color: rgba(255, 255, 255, 0.9); /* Más opaco al pasar el ratón */
    color: rgb(0, 18, 77);
        transform: scale(1.1); /* Efecto de aumento */
    text-shadow: 1px 1px 1px gray; /* Mantiene la sombra de texto para legibilidad */
}

   


.hotspot {
    display: none; /* Oculta inicialmente */
    visibility: hidden; /* Asegura que no ocupe espacio */
}