html {
			scroll-behavior: smooth;
		}	
		
		/* SOLUCIÓN: Añade margen superior para compensar el menú fijo */
        #coleccion {
            scroll-margin-top: 150px; /* 60px del menú + 20px de espacio extra */
        }

        .custom-color {
            position: relative;
            display: inline-block;
            color: transparent; /* Hace que el texto sea transparente */
            font-size: 48px; /* Ajusta el tamaño del texto según sea necesario */
            font-weight: bold; /* Hace que el texto sea más grueso */
            z-index: 1; /* Asegura que el texto esté encima de la sombra */
        }

        .custom-color::before {
            content: attr(data-text);
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(45deg, #00CCFF, #0066FF);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            z-index: 2; /* Asegura que el degradado esté encima de la sombra */
        }

        .custom-color::after {
            content: attr(data-text);
            position: absolute;
            top: 2px; /* Ajusta la posición vertical de la sombra */
            left: 2px; /* Ajusta la posición horizontal de la sombra */
            color: #00008B; /* Color azul marino para la sombra */
            font-size: inherit; /* Hereda el tamaño de fuente del texto principal */
            font-weight: inherit; /* Hereda el grosor de fuente del texto principal */
            z-index: 0; /* Asegura que la sombra esté debajo del texto y del degradado */
        }	   
		
		.tm-hero_dispensador {
            background-image: url('../img/hero_dispensador_de_agua.webp');
            background-size: cover;
            background-position: center;
            height: 70vh; /* Ajusta la altura según tus necesidades */
            /* color: white;  Color del texto  
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);   Sombra de texto para mejor legibilidad */
        }

		.tm-hero {
            background-image: url('../img/hero.webp');
            background-size: cover;
            background-position: center;
            height: 70vh; /* Ajusta la altura según tus necesidades */
            /* color: white;  Color del texto  
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);   Sombra de texto para mejor legibilidad */
        }


		.padding-top {
            padding-top: 50px; /* Ajusta este valor según la altura de tu menú */
        }
		
		
		.navbar.fixed-top {
			background-color: #FFF; /* Ejemplo de color de fondo */
			box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Ejemplo de sombra */
		}
		
		.custom-blue-color {
            /*  background-color: var(--bs-blue); /* Usa el color azul definido en Bootstrap */
            color: var(--bs-blue); /* Color del texto para contraste */
            padding: 5px; /* Espaciado interno */
			font-size: 1.25em;
            /*border-radius: 8px;  Bordes redondeados */
        }