/* --- CONFIGURACIÓN DE FUENTES --- */
        @font-face {
            font-family: "MonopolThin-Bold";
            src: url("/fonts/monopol-thin-bold.woff2") format("woff2"),
                 url("/fonts/MONOPOL-THIN-BOLD.OTF") format("opentype");
            font-weight: bold;
            font-style: normal;
        }
        @font-face {
            font-family: "monopol tin";
            src: url("/fonts/monopol-thin.woff2") format("woff2"),
                 url("/fonts/MONOPOL THIN.OTF") format("opentype");
            font-weight: normal;
            font-style: normal;
        }

        :root {
            --mako-color: #00f2ff;
            --mako-glow: rgba(0, 242, 255, 0.5);
            --mako-green: #00ff9d;
        }

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

        body, html {
            min-height: 100%; 
            width: 100%; 
            overflow-x: hidden;
            background-color: #000;
            font-family: "MonopolThin-Bold", "monopol tin", sans-serif;
        }

        .background {
            position: fixed;
            top: 0; left: 0; width: 100%; height: 100%;
            background: url('/media/images/fondos/fondoffviiremakemod.png') no-repeat center center;
            background-size: cover;
            z-index: 1;
        }
        
        canvas {
            position: fixed;
            top: 0; left: 0; width: 100%; height: 100%;
            pointer-events: none;
            background: transparent;
        }
        #makoCanvasBack { z-index: 2; }
        #makoCanvasFront { z-index: 10; }

        .overlay {
            position: fixed;
            top: 0; left: 0; width: 100%; height: 100%;
            background: radial-gradient(circle, transparent 20%, rgba(0,0,0,0.8) 100%);
            z-index: 3;
            pointer-events: none;
        }

        .content {
            position: relative;
            z-index: 5; 
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between; 
            min-height: 100vh; 
            padding: 20px;
        }

        .main-central {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            flex-grow: 1; 
            width: 100%;
            max-width: 950px;
            padding: 20px 0;
        }

        .voice-logo {
            max-width: 400px;
            width: 65%;
            opacity: 0.7;
            filter: brightness(1.2);
            margin-top: 10px;
            margin-bottom: 25px;
            animation: fadeIn 3s ease-out 1s both;
        }

        .logo-mod {
            max-width: 450px;
            width: 85%;
            margin-bottom: 20px;
            filter: drop-shadow(0 0 15px var(--mako-glow));
            animation: fadeIn 2s ease-out;
        }

        .title-mod-img {
            width: 100%;
            max-width: 700px;
            height: auto;
            margin-bottom: 15px;
            filter: drop-shadow(0 0 10px var(--mako-glow));
            animation: fadeInUp 1.2s ease-out 0.2s both;
        }

        .info-box {
            max-width: 850px;
            padding: 10px 15px;
            margin-bottom: 10px;
            text-align: center;
            animation: fadeInUp 1.2s ease-out 0.3s both;
        }

        .info-box h2, .info-box p {
            color: #06c3bc;
            font-family: "MonopolThin-Bold", sans-serif;
            font-size: 2.00rem;
            text-shadow: 0px 0px 12px #000000;
            margin-bottom: 25px;
            line-height: 1.2;
            font-weight: normal; /* Añadimos esto para que el H2 no se engorde de más */
        }

        .info-box span.highlight {
            color: var(--mako-color);
            text-shadow: 0 0 15px var(--mako-glow);
        }

        /* --- CORRECCIÓN DE IMÁGENES DEL BOTÓN --- */
        .btn-download-img {
            display: block;
            width: 439px; 
            height: 62px; 
            max-width: 100%;
            background-image: url("/media/images/ui/normal.png");
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            cursor: pointer;
            transition: transform 0.1s ease; 
            animation: fadeInUp 1s ease-out 0.6s both;
            -webkit-tap-highlight-color: transparent;
            border: none;
            outline: none;
        }

        .btn-download-img:hover { 
            background-image: url("/media/images/ui/hover.png") !important; 
            transform: scale(1.02); 
        }

        .btn-download-img:active { 
            background-image: url("/media/images/ui/click.png") !important; 
            transform: scale(0.98); 
        }

        .footer {
            text-align: center;
            color: rgba(255, 255, 255, 0.4);
            font-family: Arial, Helvetica, sans-serif; 
            font-size: 0.8rem;
            line-height: 1.4;
            padding: 10px 0 30px 0; 
            animation: fadeIn 3s ease-out 1.2s both;
        }

        /* --- MEDIA QUERIES --- */
        @media (min-width: 769px) and (max-width: 1024px) {
            .info-box h2, .info-box p { font-size: 1.6rem; line-height: 1.4; }
            .voice-logo { max-width: 350px; }
            .logo-mod { max-width: 400px; }
        }

        @media (max-width: 768px) {
            .info-box h2, .info-box p { font-size: 1.25rem; line-height: 1.5; margin-bottom: 15px; }
            .voice-logo { max-width: 280px; width: 80%; }
            .logo-mod { max-width: 320px; width: 90%; }
            .btn-download-img { width: 300px; height: 77px; }
            .footer { font-size: 0.7rem; }
        }

        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
        @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }