/* Reset básico */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            -webkit-user-drag: none;
        }

        /* Bloqueo de scroll y fondo */
        html,
        body {
            height: 100%;
            overflow: hidden;
            background: #290000;
            /* Tonalidad rojiza oscura */
            font-family: 'Orbitron', Arial, sans-serif;
            color: #fff;
            user-select: none;
            /* Previene selección de texto */
            -webkit-user-select: none;
            -webkit-touch-callout: none;
        }

        /* Efecto sutil de fondo con animación “3D” */
        body {
            /* Un gradiente animado. Ajusta a tu gusto */
            background: linear-gradient(125deg, #290000, #540000, #290000);
            background-size: 600% 600%;
            animation: colorShift 20s ease infinite;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32"><circle cx="8" cy="8" r="8" fill="rgb(220,0,0)" /></svg>') 8 8, auto;
        }

        @keyframes colorShift {
            0% {
                background-position: 0% 50%;
            }

            50% {
                background-position: 100% 50%;
            }

            100% {
                background-position: 0% 50%;
            }
        }

        /* Ocultar scrollbar en navegadores WebKit */
        body::-webkit-scrollbar {
            display: none;
        }

        /* Bloque principal con la tarjeta “3D” */
        .preview-card {
            width: 280px;
            background: rgba(100, 0, 0, 0.7);
            padding: 20px 40px;
            border-radius: 12px;
            box-shadow: 0 0 20px rgba(255, 0, 0, 0.4);
            text-align: center;
            cursor: pointer;

            /* Efecto 3D */
            perspective: 800px;
            transform: perspective(800px) rotateY(-20deg);
            transform-style: preserve-3d;
            transition: transform 0.8s ease;
        }

        .preview-card:hover {
            transform: perspective(800px) rotateY(0deg) scale(1.07);
        }

        .preview-title {
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 10px;
            color: #ffaaaa;
        }

        .preview-subtitle {
            font-size: 16px;
            opacity: 0.8;
            color: #ffdada;
        }

        /* Contenedor que muestra la guía (por defecto oculto) */
        #guideContent {
            position: absolute;
            top: 5%;
            left: 5%;
            right: 5%;
            bottom: 5%;
            background: #1a0000;
            box-shadow: 0 0 15px #ff0000;
            border-radius: 10px;
            display: none;
            padding: 20px;
            overflow-y: auto;
            /* Pequeño efecto de aparición */
            animation: showUp 0.7s ease forwards;
            transform-origin: top;
        }

        @keyframes showUp {
            0% {
                transform: scaleY(0);
            }

            100% {
                transform: scaleY(1);
            }
        }

        /* Scrollbar sutil */
        #guideContent::-webkit-scrollbar {
            width: 8px;
        }

        #guideContent::-webkit-scrollbar-thumb {
            background-color: #600000;
            border-radius: 4px;
        }

        /* Botón para cerrar */
        .close-button {
            display: inline-block;
            padding: 6px 12px;
            margin-bottom: 20px;
            background: #660000;
            color: #fff;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-weight: bold;
            font-size: 14px;
            transition: background 0.3s ease;
        }

        .close-button:hover {
            background: #a50000;
        }

        /* Estilos texto de la guía */
        h1,
        h2,
        h3 {
            color: #ffaaaa;
            margin: 1em 0 0.5em 0;
        }

        p,
        li,
        span {
            line-height: 1.4;
        }

        hr {
            margin: 1em 0;
            border: 0;
            border-top: 1px solid #ffcccc;
        }

        table {
            width: 100%;
            margin: 10px 0;
            border-collapse: collapse;
        }

        table,
        th,
        td {
            border: 1px solid #999;
        }

        th,
        td {
            padding: 8px;
        }

        th {
            background: #660000;
            color: #fff;
        }