/* Estilos básicos para el cuerpo y HTML */
        html, body {
            margin: 0;
            padding: 0;
            font-family: "Inter", sans-serif; /* Fuente recomendada */
            overflow-x: hidden; /* Evita el scroll horizontal */
            will-change: scroll-position; /* Sugerencia para el navegador */
        }

        /* Contenedor del canvas que se fija al fondo */
        .canvas-background {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh; /* Ocupa toda la altura de la ventana */
            overflow: hidden;
            z-index: -1; /* Envía el canvas al fondo */
            display: flex; /* Para centrar el canvas si es más pequeño */
            justify-content: center;
            align-items: center;
            background-color: #000; /* Fondo negro por defecto si las imágenes no cargan */
        }

        .canvas-background canvas {
            display: block;
            width: 100%; /* El canvas ocupará el 100% del ancho del contenedor */
            height: 100%; /* El canvas ocupará el 100% de la altura del contenedor */
            object-fit: cover; /* Asegura que la imagen cubra el área sin distorsión */
            will-change: transform, opacity; /* Sugerencia para el navegador */
        }

        /* Contenedor principal del contenido que se desplaza */
        .scroll-content {
            position: relative;
            z-index: 1; /* Asegura que el contenido esté por encima del canvas */
            background-color: rgba(0, 0, 0, 0.4); /* Fondo semi-transparente para ver las imágenes */
            color: white;
            padding: 0; 
        }

        /* Sección de la historia: cada una debe ser lo suficientemente alta para permitir el scroll */
        .story-section {
            height: 100vh; /* Cada sección ocupa toda la altura de la ventana */
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            opacity: 0; /* Inicialmente oculto */
            transition: opacity 0.5s ease-in-out; /* Transición suave para la aparición */
            padding: 2rem; /* Añadimos el padding aquí para el contenido */
        }

        .story-section.active {
            opacity: 1; /* Visible cuando está activo */
        }

        /* Estilos para el título principal */
        .main-title {
            font-size: 3rem; /* Tamaño de fuente grande */
            font-weight: bold;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Sombra para mejor legibilidad */
        }

        /* Estilos para el texto de las secciones */
        .section-text {
            font-size: 1.5rem;
            margin-top: 1rem;
            max-width: 800px;
            padding: 0 1rem;
        }

        /* Estilos para el botón o llamada a la acción */
        .cta-button {
            background-color: #0082c9; /* Color azul de tu paleta */
            color: white;
            padding: 0.8rem 2rem;
            border-radius: 9999px; /* Bordes redondeados */
            font-weight: bold;
            text-decoration: none;
            margin-top: 2rem;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            transition: background-color 0.3s ease;
        }

        .cta-button:hover {
            background-color: #006bb3; /* Tono más oscuro al pasar el ratón */
        }

        /* Media queries para responsividad */
        @media (max-width: 768px) {
            .main-title {
                font-size: 2rem;
            }
            .section-text {
                font-size: 1.2rem;
            }
            .story-section {
                padding: 1rem;
            }
        }

        /* Estilo para el indicador de carga */
        #loading-indicator {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 1rem 2rem;
            border-radius: 0.5rem;
            z-index: 100;
            font-size: 1.2rem;
            display: none; /* Oculto por defecto */
        }

        /* Estilos para el header fijo */
        .fixed-header {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            background-color: rgba(0, 0, 0, 0.6); /* Semi-transparente */
            padding: 0.75rem 1.5rem;
            z-index: 50; /* Por encima del contenido pero debajo del indicador de carga */
            display: flex;
            justify-content: space-around;
            align-items: center;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
        }

        .header-icon-link {
            color: white;
            font-size: 1.5rem;
            transition: color 0.3s ease;
        }

        .header-icon-link:hover { color: #0082c9; }

        /* Estilos para los iconos de redes sociales */
        .social-icon-link svg {
            fill: white;
            transition: fill 0.3s ease, transform 0.3s ease;
        }

        .social-icon-link:hover svg {
            fill: #2dd4bf; /* Color teal-400 de Tailwind */
            transform: scale(1.1);
        }