.viñeta {
  list-style-type: none;
padding: 0;
margin: 0;
}
/* evita que se muestren las viñetas en los enlaces legales */
        body {
            font-family: 'Inter', sans-serif;
        }
        /* Evita que los enlaces visitados cambien de color */
        a:visited {
            color: inherit;
        }
        .nav-link {
            @apply text-white hover:text-gray-300 font-semibold transition-colors duration-300;
        }
        .section {
            @apply py-20 px-4 md:px-8;
        }
        .game-container {
            @apply max-w-lg mx-auto p-8 rounded-xl shadow-lg bg-gray-900 border-2 border-teal-500;
        }
        .game-input {
            @apply w-full p-3 rounded-lg bg-gray-800 text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-teal-500 transition-colors;
        }
        .game-button {
            @apply mt-4 w-full bg-teal-600 hover:bg-teal-700 text-white font-bold py-3 px-6 rounded-lg shadow-md transition-colors duration-300;
        }
        .game-message {
            @apply mt-4 p-3 text-center rounded-lg font-semibold;
        }
        /* Estilos del juego de memoria */
        .memory-game {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 1rem;
            max-width: 500px;
            margin: 0 auto;
        }
        .card {
            width: 100px;
            height: 100px;
            background-color: #334155;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2.5rem;
            cursor: pointer;
            transform: rotateY(0);
            transition: transform 0.5s;
            transform-style: preserve-3d;
        }
        .card.flipped {
            transform: rotateY(180deg);
        }
        .card.matched {
            pointer-events: none;
            opacity: 0.6;
            transition: opacity 0.5s;
        }
        .card-front, .card-back {
            position: absolute;
            backface-visibility: hidden;
        }
        .card-back {
            transform: rotateY(180deg);
        }
        /* Clase para hacer los iframes de YouTube y Google Forms responsivos */
        .video-responsive, .form-responsive, .iframe-responsive {
            position: relative;
            padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
            height: 0;
            overflow: hidden;
            max-width: 100%;
        }
        .video-responsive iframe, .form-responsive iframe, .iframe-responsive iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

/* Esto hace que empiece oculto */
#navbar-main.nav-oculto {
    display: none !important;
}