/* =========================================
   --- 💾 CARNAVAL "WIN95 RAVE" EDITION 💾 ---
   ========================================= */

:root {
    --win-gray: #c0c0c0b4;      /* Gris Windows Clásico */
    --win-blue: #000080;      /* Azul Barra de Título */
    --win-text: #000000;      /* Texto Negro */
    --neon-pink: #ff00ff;     /* Rosa Rave */
    --neon-green: #00ff00;    /* Verde Matrix */
    --oro-cani: #ffd700;      /* El toque de oro */
}

/* --- 1. FONDO: EL CLÁSICO "TEAL" + ESTRELLAS --- */
body {
    background-color: #008080 !important; /* El color de escritorio Win95 */
}

/* Un fondo de estrellas pixeladas moviéndose */
body::before { 
    content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1;
    background-image: 
        linear-gradient(white 2px, transparent 2px),
        linear-gradient(90deg, white 2px, transparent 2px);
    background-size: 100px 100px;
    background-position: center;
    opacity: 0.1;
    pointer-events: none;
}

/* --- 2. FUENTES PIXELADAS --- */
body, h1, h2, h3, p, a, button {
    font-family: 'Courier New', 'MS Sans Serif', monospace !important;
    text-transform: uppercase;
}

/* --- 3. BARRA DE NAVEGACIÓN (Taskbar Style) --- */
nav {
    background: var(--win-gray) !important;
    border-top: 2px solid #fff !important;
    border-left: 2px solid #fff !important;
    border-right: 2px solid #404040 !important;
    border-bottom: 2px solid #404040 !important;
    box-shadow: 2px 2px 0 #000 !important;
    padding: 10px !important;
}

.menu a {
    color: #000 !important;
    background: var(--win-gray);
    border: 2px outset #fff; /* Efecto botón 3D */
    padding: 5px 15px !important;
    margin: 0 5px !important;
    text-shadow: none !important;
}

.menu a:active {
    border: 2px inset #fff !important; /* Efecto pulsado */
}

/* --- 4. TÍTULOS --- */
h1.title-mega-glitch {
    color: var(--neon-pink) !important;
    text-shadow: 3px 3px 0px #000 !important;
    background: #000;
    display: inline-block;
    padding: 10px;
    border: 2px dashed var(--neon-green);
}

/* --- 5. LAS VENTANAS (Tarjetas) --- */
/* Convertimos cada tarjeta en una ventana de Windows */
.ticket-card, .product-card, .artist-card {
    background: var(--win-gray) !important;
    border: 2px solid #fff !important;
    border-right-color: #404040 !important;
    border-bottom-color: #404040 !important;
    box-shadow: 2px 2px 0 #000 !important;
    padding: 4px !important; /* Borde interno */
    padding-top: 35px !important; /* Espacio para la barra azul */
    position: relative;
    overflow: visible !important;
    transform: none !important;
    transition: none !important;
}

/* La Barra Azul de Título */
.ticket-card::before, .product-card::before, .artist-card::before {
    content: "ELEVENT_FEST.EXE"; /* Título falso */
    position: absolute;
    top: 4px; left: 4px; right: 4px; height: 25px;
    background: var(--win-blue);
    color: #fff;
    font-weight: bold;
    font-size: 14px;
    display: flex;
    align-items: center;
    padding-left: 5px;
    letter-spacing: 1px;
}

/* El botón [X] de cerrar falso */
.ticket-card::after, .product-card::after, .artist-card::after {
    content: "X";
    position: absolute;
    top: 6px; right: 6px;
    width: 20px; height: 20px;
    background: var(--win-gray);
    color: #000;
    border: 2px outset #fff;
    font-size: 12px;
    font-weight: bold;
    display: flex; justify-content: center; align-items: center;
    cursor: pointer;
}

/* Efecto hover simple */
.ticket-card:hover, .product-card:hover, .artist-card:hover {
    transform: translate(2px, 2px) !important; /* Se mueve un poco */
    box-shadow: none !important;
}

/* --- 6. IMÁGENES DENTRO DE LAS VENTANAS --- */
.ticket-img, .product-card img, .artist-card img {
    border: 2px inset #fff !important; /* Efecto hundido */
    margin-bottom: 10px;
    filter: sepia(0.2) contrast(1.2); /* Filtro retro */
}

/* --- 7. PRECIOS Y TEXTOS --- */
.ticket-info h3, .product-card h4, .artist-info h3 {
    color: #ffffff !important;
    text-shadow: none !important;
    font-weight: bold;
}

.price {
    color: red !important;
    background: #ffff00 !important; /* Fondo amarillo marcador */
    border: 1px solid #000 !important;
    padding: 2px 5px !important;
    font-size: 1.5rem !important;
    bottom: 10px !important;
    left: 10px !important;
    text-shadow: none !important;
}

/* --- 8. BOTONES (El clásico botón gris) --- */
.btn-small, .btn-neon, button {
    background: var(--win-gray) !important;
    color: #000 !important;
    border: 2px outset #fff !important;
    box-shadow: 1px 1px 0 #000 !important;
    font-weight: bold !important;
    text-transform: uppercase;
    border-radius: 0 !important;
    cursor: pointer !important; /* Cursor mano */
}

.btn-small:active, .btn-neon:active, button:active {
    border: 2px inset #fff !important;
    transform: translate(1px, 1px);
}

.btn-small:hover {
    background: #dfdfdf !important;
}

/* --- 9. SCROLLBAR RETRO --- */
::-webkit-scrollbar { width: 20px; }
::-webkit-scrollbar-track { background: #dfdfdf; border-left: 2px solid #fff; }
::-webkit-scrollbar-thumb {
    background: var(--win-gray);
    border: 2px outset #fff;
    box-shadow: inset 1px 1px 0 #fff;
}

/* --- 10. DETALLES EXTRA (Marquee simulado) --- */
.coming-soon-stamp {
    background: red !important;
    color: yellow !important;
    border: 2px dotted yellow !important;
    font-family: 'Comic Sans MS', 'Comic Sans', cursive !important; /* El toque final */
    transform: rotate(0deg) !important;
}

/* --- 11. FAQ (Preguntas Frecuentes) --- */
details {
    background: var(--win-gray) !important;
    border: 2px outset #fff !important;
    color: #000 !important;
}
details[open] { border: 2px inset #fff !important; }
summary { color: #000 !important; }
.faq-answer { color: #000 !important; font-family: 'Courier New', monospace; }