:root {
            --fondo-suave: #fdfbf7; /* Tono crema muy suave */
            --verde-logo: #2d5a27;
            --texto: #333;
            --blanco: #ffffff;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body, html {
            height: 100%;
            font-family: 'Montserrat', sans-serif;
            background-color: var(--fondo-suave);
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden; /* Evita scrolls innecesarios */
        }

        .main-container {
            text-align: center;
            width: 90%;
            max-width: 400px;
            animation: fadeIn 1.2s ease-out;
        }

        /* --- Estilo del Logo Actualizado --- */
        .logo-wrapper {
            margin-bottom: 40px; /* Reducimos un poco el margen para compensar el tamaño */
            width: 100%;
            display: flex;
            justify-content: center;
            padding: 0 20px;
        }

        .logo-wrapper img {
            /* Ajusta este valor según tus preferencias (ej: 350px o 400px) */
            width: 350px; 
            max-width: 95vw; /* Asegura que en móviles no se salga de la pantalla */
            height: auto;
            display: block;
            
            /* Mantenemos la limpieza y la sombra */
            background: transparent !important;
            filter: drop-shadow(0 12px 20px rgba(0,0,0,0.08));
            
            /* Pequeña animación extra al poner el ratón encima */
            transition: transform 0.3s ease;
        }

        .logo-wrapper img:hover {
            transform: scale(1.02); /* Crece un 2% al pasar el ratón */
        }

            .button-group {
                display: flex;
                flex-direction: column;
                gap: 15px;
            }

        .btn {
            display: block;
            text-decoration: none;
            padding: 16px;
            background-color: var(--verde-logo);
            color: var(--blanco);
            border-radius: 50px; /* Bordes redondeados modernos */
            font-weight: 500;
            font-size: 0.9rem;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
            box-shadow: 0 4px 10px rgba(45, 90, 39, 0.2);
        }

        /* Efecto hover elegante */
        .btn:hover {
            transform: translateY(-3px);
            background-color: #3d7a35;
            box-shadow: 0 8px 20px rgba(45, 90, 39, 0.3);
        }

        .btn:active {
            transform: translateY(-1px);
        }

        /* Animación de entrada */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        /* --- Ajuste específico para Móviles --- */
        @media (max-width: 480px) {
            .logo-wrapper img {
                /* En móviles reducimos el tamaño para que quepa bien */
                width: 80%; 
                max-width: 280px;
            }
            
            .main-container {
                margin-top: 20px; /* Un poco de aire arriba */
            }
        }