/* Definición de variables CSS para colores, facilita la modificación del tema */
 .d-none{
    display: none !important;
 }
        :root {
            --primary-color: #795548; /* Marrón oscuro para texto principal */
            --secondary-color: #FFD700; /* Dorado para acentos y "Próximamente" */
            --background-color: #FFF8E1; /* Crema suave para el fondo de la página */
            --card-background-color: #FFFFFF; /* Blanco para el fondo del contenedor principal */
            --text-light: #5D4037; /* Marrón ligeramente más claro */
        }

        /* Estilos generales del cuerpo de la página */
        body {
            font-family: 'Quicksand', sans-serif; /* Fuente principal para el texto */
            background-color: var(--background-color);
            color: var(--primary-color);
            display: flex; /* Para centrar el contenido vertical y horizontalmente */
            justify-content: center;
            align-items: center;
            min-height: 100vh; /* Asegura que ocupe al menos el alto completo de la ventana */
            margin: 0;
            padding: 20px; /* Espaciado interno para evitar que el contenido toque los bordes */
            box-sizing: border-box; /* Incluye padding y borde en el tamaño total */
            text-align: center;
        }

        /* Estilos del contenedor principal */
        .container {
            background-color: var(--card-background-color);
            border-radius: 15px; /* Bordes redondeados */
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); /* Sombra sutil para efecto de tarjeta */
            padding: 40px 30px;
            max-width: 600px; /* Ancho máximo para el contenido */
            width: 100%; /* Ocupa el ancho disponible */
            animation: fadeIn 1.5s ease-out; /* Animación de aparición suave */
        }

        /* Estilos para el logo/imagen */
        .logo {
            max-width: 150px;
            height: auto;
            margin-bottom: 25px;
            border-radius: 50%; /* Si usas una imagen redonda */
            border: 3px solid var(--secondary-color); /* Borde dorado alrededor del logo */
        }

        /* Estilos para el título principal "QueCookie" */
        h1 {
            font-family: 'Pacifico', cursive; /* Fuente decorativa para el nombre */
            color: var(--secondary-color);
            font-size: 3.5em; /* Tamaño grande */
            margin-bottom: 10px;
            text-shadow: 2px 2px 5px rgba(0,0,0,0.1); /* Sombra de texto suave */
        }

        /* Estilos para el subtítulo */
        h2 {
            font-size: 1.8em;
            color: var(--text-light);
            margin-bottom: 20px;
        }

        /* Estilos para los párrafos de texto */
        p {
            font-size: 1.1em;
            line-height: 1.6; /* Espaciado entre líneas para mejor lectura */
            margin-bottom: 15px;
        }

        /* Estilos específicos para el texto "¡Próximamente!" */
        .coming-soon-text {
            font-size: 2.5em;
            font-weight: 700; /* Negrita */
            color: var(--secondary-color);
            margin-top: 30px;
            margin-bottom: 30px;
            animation: pulse 2s infinite ease-in-out; /* Animación de pulsación */
            text-shadow: 1px 1px 3px rgba(0,0,0,0.1);
        }

        /* Estilos para los enlaces de redes sociales */
        .social-links a {
            color: var(--primary-color);
            text-decoration: none; /* Sin subrayado */
            margin: 0 10px;
            font-weight: 700;
            transition: color 0.3s ease; /* Transición suave al pasar el ratón */
        }

        .social-links a:hover {
            color: var(--secondary-color); /* Cambio de color al pasar el ratón */
        }

        /* Estilos generales para otros enlaces */
        a {
            color: var(--secondary-color);
            text-decoration: none;
            font-weight: 700;
            transition: color 0.3s ease;
        }

        a:hover {
            color: var(--primary-color);
            text-decoration: underline; /* Subrayado al pasar el ratón */
        }

        /* Keyframes para la animación de pulsación */
        @keyframes pulse {
            0% {
                transform: scale(1);
                opacity: 1;
            }
            50% {
                transform: scale(1.05); /* Ligeramente más grande */
                opacity: 0.8; /* Ligeramente más transparente */
            }
            100% {
                transform: scale(1);
                opacity: 1;
            }
        }

        /* Keyframes para la animación de aparición */
        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(20px); /* Empieza un poco más abajo */
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Media Queries para hacer la página responsiva en dispositivos pequeños */
        @media (max-width: 768px) {
            h1 {
                font-size: 2.8em;
            }
            h2 {
                font-size: 1.5em;
            }
            .coming-soon-text {
                font-size: 2em;
            }
            .container {
                padding: 30px 20px;
            }
        }

        @media (max-width: 480px) {
            h1 {
                font-size: 2.2em;
            }
            h2 {
                font-size: 1.2em;
            }
            .coming-soon-text {
                font-size: 1.8em;
            }
            p {
                font-size: 1em;
            }
            .logo {
                max-width: 100px;
            }
        }