/* ==========================================================================
   1. TIPOGRAFÍAS LOCALES
   ========================================================================== */
@font-face {
    font-family: 'retrobank';
    src: url('../tipografias/retrobank.ttf') format('truetype');
}
@font-face {
    font-family: 'romantic';
    src: url('../tipografias/romantic.ttf') format('truetype');
}
@font-face {
    font-family: 'cairo';
    src: url('../tipografias/Cairopixel.ttf') format('truetype');
}
@font-face {
    font-family: 'alagard';
    src: url('../tipografias/alagard.ttf') format('truetype');
}

/* ==========================================================================
   2. CONFIGURACIÓN GENERAL Y FONDO
   ========================================================================== */
html, body {
    min-width: 1300px;
    overflow-x: auto;
}

body {
    cursor: url('../imagenes/15.gif'), auto;
    background-image: linear-gradient(rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65)), url("../fondos/171.gif");
    background-size: auto; 
    background-attachment: fixed; 
    color: white;
    font-family: 'cairo', sans-serif;
    font-size: 20px;
    margin: 0; 
    padding: 30px 45px;
}

/* Efecto CRT Scanlines */
body::before {
    content: " ";
    display: block;
    position: fixed;
    top: 0; left: 0; bottom: 0; right: 0;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%);
    background-size: 100% 4px;
    z-index: 1000;
    pointer-events: none;
    opacity: 0.6;
}

/* ==========================================================================
   3. ESTRUCTURA EN 3 COLUMNAS (LIENZO PRINCIPAL)
   ========================================================================== */
.lienzo-aficiones {
    display: grid;
    grid-template-columns: 200px 1fr 200px; /* Columnas laterales de 200px y centro flexible */
    gap: 20px;
    max-width: 1300px;
    margin: 0 auto;
    align-items: start;
}

/* Columnas laterales móviles */
.columna-lateral {
    background-color: rgba(0, 0, 0, 0.5);
    border: 3px double Crimson;
    border-radius: 8px;
    padding: 15px 10px;
    box-sizing: border-box;
}

.contenedor-imagenes-lateral {
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: center;
}

.img-lateral {
    width: 100%;
    max-width: 170px;
    height: auto;
    border-radius: 4px;
    box-shadow: 0 0 10px rgba(220, 20, 60, 0.4);
    transition: transform 0.2s ease;
}

.img-lateral:hover {
    transform: scale(1.05);
}

/* Columna central */
.columna-central {
    width: 100%;
}

/* ==========================================================================
   4. ENCABEZADO Y CAJAS DE CONTENIDO
   ========================================================================== */
.header-y2k {
    background-color: rgba(0, 0, 0, 0.75);
    border-radius: 8px;
    border: 7px ridge Crimson;
    text-align: center;
    padding: 15px;
    margin-bottom: 20px;
    box-sizing: border-box;
}

.subgrid-encabezado {
    display: grid;
    grid-template-columns: 80px 1fr 80px;
    align-items: center;
}

.grid-tres-cajas {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 15px;
}

.caja-y2k {
    background-color: rgba(0, 0, 0, 0.75);
    padding: 18px;
    border-radius: 8px;
    border: 7px ridge Crimson;
    text-align: center;
    box-sizing: border-box;
}

.titulo-caja {
    font-size: 26px;
    font-family: 'alagard', sans-serif;
    color: Crimson;
    text-align: center;
    margin-top: 0;
}

/* ==========================================================================
   5. LISTAS Y ENLACES
   ========================================================================== */
.lista {
    list-style: none;
    padding: 0;
    margin: 15px 0;
    text-align: left;
    display: inline-block;
}

.lista li {
    position: relative;
    padding-left: 22px;
    margin-bottom: 10px;
    font-size: 0.9em;
    line-height: 1.3;
}

.lista li::before {
    content: "✧";
    position: absolute;
    left: 0;
    top: -1px;
    color: Crimson;
    font-weight: bold;
}

.lista li a {
    color: Crimson;
    font-weight: bold;
    text-decoration: none;
}

.lista li a:hover {
    color: #00ffcc;
}

/* ==========================================================================
   6. CINTAS NUMÉRICAS LATERALES (DECORATIVAS DE PANTALLA)
   ========================================================================== */
.cinta-vertical {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 35px;
    height: 100%;
    background-color: rgba(5, 2, 10, 0.9);
    overflow: hidden;
    z-index: 99;
}

.cinta-izquierda {
    left: 0;
    border-right: 2px dashed Crimson;
}

.cinta-derecha {
    right: 0;
    border-left: 2px dashed Crimson;
}

.cinta-contenido {
    display: flex;
    flex-direction: column;
    white-space: nowrap;
    animation: moverCintaArriba 12s linear infinite;
}

.cinta-contenido.cinta-invertida {
    animation: moverCintaAbajo 22s linear infinite;
}

.cinta-vertical span {
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-family: 'cairo', monospace;
    font-size: 14px;
    font-weight: bold;
    color: Crimson;
    letter-spacing: 4px;
    padding: 15px 0;
    text-align: center;
}

@keyframes moverCintaArriba {
    0% { transform: translateY(0); }
    100% { transform: translateY(-50%); }
}

@keyframes moverCintaAbajo {
    0% { transform: translateY(-50%); }
    100% { transform: translateY(0); }
}