:root {
      --glass-bg: rgba(255, 255, 255, 0.07);
      --glass-border: rgba(255, 255, 255, 0.15);
      --accent-color: #00d4ff;
      
       /* Gris Tikal (fondo inicial) */
	  --tikal-stone-base: #4a4d4d; /* Un tono medio-oscuro de la piedra caliza */
	  --tikal-stone-shadow: #333636; /* Un tono más profundo de piedra */
	
	  /* Verde Jade (hover) */
	  --jade-green-base: #28643b; /* El tono verde medio del jade pulido */
	  --jade-green-deep: #1a422a; /* El verde oscuro de los relieves */
	  --jade-green-highlight: #45a065; /* El verde brillante de los bordes iluminados */
	
	  /* Colores de texto */
	  --text-white: #ffffff;
	  --text-jade-inset: #e0f2f1; /* Un blanco azulado/crema, para mayor realismo */
    }
    
   
	
	
	.boton-tikal-jade {	
							display: flex;
							justify-content: center;
							align-items: center;
							padding: 15px 30px;
							border-radius: 8px;
							border: 1px solid transparent;
							cursor: pointer;
							transition: all 0.3s ease;
							background-color: var(--tikal-stone-base);
							color: var(--text-white);
							box-shadow: 0 1px 3px rgba(0,0,0,0.3),
							 					inset 0 1px 1px rgba(255,255,255,0.1);
						}
	
	.boton-tikal-jade:hover {							
							background: radial-gradient(circle at center, var(--jade-green-base) 0%, var(--jade-green-deep) 100%);
							border-color: var(--jade-green-highlight);							
							
							color: var(--text-jade-inset);
							text-shadow: -1.5px -1.5px 1px var(--jade-green-deep), 
											1.5px 1.5px 1px rgba(255,255,255,0.1);
						}

	
    body, html {
      margin: 0;
      padding: 0;
      height: 100%;
      background-color: #000;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      overflow: hidden;
    }
    
    a { text-decoration:none; }

    #starsCanvas {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 1;
      background-image: url('../images/backgrounds/night-sky.png');
      background-size: cover;
      background-position: center;
    }

    .content-overlay {
						position: relative;
						z-index: 10;
						height: 100vh;
						display: flex;
						align-items: center;
						justify-content: center;
						padding: 20px;
					}
    
	.gaussiano-bkg {
						background: var(--glass-bg);  
	  					backdrop-filter: blur(0.01rem) brightness(1) contrast(0.9) saturate(200%);
	  					-webkit-backdrop-filter: blur(0.01rem) brightness(1) contrast(0.9) saturate(200%);
	}
		
	.demo-card {
					border: 1px solid var(--glass-border);
					border-radius: 20px;
					padding: 3rem;
					max-width: 600px;
					width: 100%;
					box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.8);
					text-align: center;
				}


    h1 {
      color: #fff;
      font-weight: 700;
      margin-bottom: 2rem;
      letter-spacing: 1px;
      text-shadow: 0 2px 4px rgba(0,0,0,0.5);
    }
    
    h1 {
		  color: #fff;
		  background-color: #444; /* Color de la "incrustación" */
		  background-clip: text;
		  -webkit-background-clip: text;
		  filter: drop-shadow(0px 2px 2px rgba(0,0,0,0.5));
		}

    .demo-list {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .demo-list li {
      margin-bottom: 1rem;
    }

    .demo-link {
      display: block;
      padding: 12px 20px;
      color: rgba(255,255,255,0.9);
      text-decoration: none;
      background: rgba(255,255,255,0.05);
      border: 1px solid transparent;
      border-radius: 10px;
      transition: all 0.3s ease;
      font-size: 1.1rem;
    }

    .demo-link:hover {
      background: rgba(255, 255, 255, 0.1);
      border-color: var(--accent-color);
      color: var(--accent-color);
      transform: translateY(-3px);
      box-shadow: 0 5px 15px rgba(0, 212, 255, 0.2);
    }


    ::-webkit-scrollbar { width: 5px; }
    ::-webkit-scrollbar-thumb { background: var(--accent-color); border-radius: 10px; }
    
    footer {
				background-color: var(--bs-dark);
				color: var(--bs-white);
				position: fixed;
				bottom: 0;
				left: 0;
				width: 100%;
				padding: 1rem;
				
				z-index:99999;
				font-size:0.9rem;
			}
			
	footer a {
			  	color: var(--bs-white);
				text-decoration: none;
				padding:1rem;
			}
			
	footer a:hover {
					color: var(--bs-light);
					background: radial-gradient(circle at center, var(--jade-green-base) 0%, var(--jade-green-deep) 100%);
					border-color: var(--jade-green-highlight);							
					
					color: var(--text-jade-inset);
					text-shadow: -1.5px -1.5px 1px var(--jade-green-deep), 
									1.5px 1.5px 1px rgba(255,255,255,0.1);
			}
	
	footer table { 		background-color: transparent !important; 
						padding:0!important;
						border:none; 
						width:100%;
					}
	
			
	.footer-master-ref-img { width:80px; height:19px; padding:0; }


	.smart-nav-container {
	  max-width: 100%;   /* Comportamiento tipo container-fluid */
	  padding-left: 1rem;
	  padding-right: 1rem;
	}
	
	/* A partir de cierto breakpoint, limitar el ancho como container */
	@media (min-width: 1400px) {
	  .smart-nav-container {
	    max-width: 1320px; /* Igual que el container XXL de Bootstrap */
	    margin: 0 auto;    /* Centrar */
	  }
	}