/* Estilos personalizados para un desplazamiento suave */
        html {
            scroll-behavior: smooth;
        }
        /* Estilo para el botón de volver arriba */
        #back-to-top {
            display: none; /* Oculto por defecto */
            position: fixed; /* Fijo en la pantalla */
            bottom: 20px; /* 20px desde la parte inferior */
            right: 20px; /* 20px desde la derecha */
            z-index: 99; /* Por encima de otros elementos */
            border: none; /* Sin borde */
            outline: none; /* Sin contorno al enfocar */
            background-color: #dc2626; /* Color de fondo rojo */
            color: white; /* Texto blanco */
            cursor: pointer; /* Cursor de puntero */
            padding: 15px; /* Relleno */
            border-radius: 50%; /* Forma circular */
            font-size: 18px; /* Tamaño de fuente */
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra */
            transition: background-color 0.3s ease; /* Transición suave */
        }

        #back-to-top:hover {
            background-color: #ef4444; /* Rojo más claro al pasar el ratón */
        }
                        @font-face {
                    font-family: 'Impact';
                    src: local('Impact'), local('Impact Regular'), url('https://fonts.cdnfonts.com/s/14618/impact.woff') format('woff');
                    font-weight: normal;
                    font-style: normal;
                }
                .font-impact {
                    font-family: 'Impact', 'Arial Black', sans-serif !important;
                    letter-spacing: 1px;
                }
        /* Estilo para el modal de mensajes */
        .modal {
            display: none; /* Oculto por defecto */
            position: fixed; /* Fijo en la pantalla */
            z-index: 100; /* Por encima de todo */
            left: 0;
            top: 0;
            width: 100%; /* Ancho completo */
            height: 100%; /* Alto completo */
            overflow: auto; /* Habilitar scroll si es necesario */
            background-color: rgba(0,0,0,0.4); /* Fondo semi-transparente */
            justify-content: center; /* Centrar contenido horizontalmente */
            align-items: center; /* Centrar contenido verticalmente */
        }

        .modal-content {
            background-color: #fefefe; /* Fondo blanco */
            margin: auto; /* Centrar */
            padding: 20px;
            border: 1px solid #888;
            width: 80%; /* Ancho del 80% */
            max-width: 500px; /* Ancho máximo */
            border-radius: 8px; /* Bordes redondeados */
            text-align: center; /* Texto centrado */
            position: relative;
        }

        .close-button {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
            position: absolute;
            top: 10px;
            right: 20px;
        }

        .close-button:hover,
        .close-button:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }
        #nosotros {
            background-image: url('../assets/images/nosotros.jpg');
        }