body {
    background-color: black;
}
a {
    text-decoration: none;
    color: #ffffff;
}

.columna-izquierda,
.columna-derecha {
    position: fixed;
    top: 0;
    color: #ffb000;
    font-family: "courier new", monospace;
    font-size: 13px;
    line-height: 1.2;
    z-index: 999;
    white-space: pre;
    pointer-events: none; /* para que no interfiera con clicks */
}

.columna-izquierda {
    left: 0;
}

.columna-derecha {
    right: 0;
}

.letrero {
    color: #ffb000;
    font-family: "courier new", monospace;
    font-size: 1vw;
    line-height: 1;
    padding: 20px 20px 0px 20px;
    border: 1px solid #000000;
    margin: 0 auto;
    text-align: center;

}

.contenedor-ticker{
    width: 90%;          /* achica la barra */
    margin: 10px auto;   /* centra horizontalmente */
    overflow: hidden;
}
.ticker{
    overflow: hidden;
    white-space: nowrap;
    border: 2px dashed #800000;

}

.ticker-track{
    display: flex;
    width: fit-content;

    animation: scroll 20s linear infinite;
}

.ticker-text{
    flex-shrink: 0;

    padding-right: 100px;

    color: #b80000;
    letter-spacing: 2px;
}


/* movimiento REAL completo */
@keyframes scroll{
    from{
        transform: translateX(0);
    }

    to{
        transform: translateX(-50%);
    }
}

.subtitulo {
    text-decoration: none;
    color: rgb(255, 0, 0);
    font-family: "courier new", monospace;
    font-size: .5vw;
    overflow-x: auto;
    line-height: 1;
    padding: 10px 10px ; 
    border: 1px solid #000000;
    margin: 0 auto;
    text-align: center;
    white-space: pre;
}

/* zona exclusiva del gato */
#ascii-widget {
    color: rgba(0, 0, 0, 0.877);
    font-family: monospace;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 40px;
}


.ascii-widget {                             /* zona exclusiva del gato */
    color: #ffb000;
    font-family: monospace;
}
.cat-container {                            /* contenedor del gato */
    cursor: pointer;
    font-size: 20px;
    color: #ffb000;
    
    display: flex;
    flex-direction: column;

    align-items: center;
    width: fit-content;        /* limita el área clickeable al ancho del contenido */
    margin: 0 auto;            /* centrado */
    transition: transform 0.08s ease;
    
}
.cat-container.squeeze {
    color: #ffb000;
    transform: scaleY(0.82) scaleX(1.08);
}

.speech-bubble {                             /* globo */
    color: #ffb000;
    text-decoration: none;
    margin-bottom: 0px;
    line-height: 1.2;
}
.ascii-cat {                                 /* gato ASCII */
    color: #ffb000;
    margin-bottom: 0px;
    line-height: 1.1;
}

.menu-ascii{
    display: flex;
    justify-content: center;
    align-items: flex-start;

    flex-wrap: wrap; /* si no caben bajan */

    gap: 20px; /* espacio entre ascii */

    margin-top: 40px;
    margin-left: 20%;
    margin-right: 20%;

}

.pensamientos:hover{
    transform: translateY(-5px);
}

.pensamientos {
    color:#4d50fd;
    text-decoration: none;
    font-family: "courier new", monospace;
    font-size: 13px;
    line-height: 1;
    padding: 10px;
    border: 1px solid #000000;
    display: table;        /* lo convierte en bloque PERO solo ocupa el ancho de su contenido, no toda la línea */
    margin: 0 auto;        /* ahora sí funciona el centrado horizontal porque ya es un bloque */
    white-space: pre;      /* respeta los espacios del arte ASCII, igual que <pre> */
    overflow-x: auto;      /* si el arte es más ancho que la pantalla, aparece scroll horizontal en vez de deformarse */
}

.cine:hover {
    transform: translateY(-5px);
}
.cine {
    color:#4d50fd;
    text-decoration: none;
    font-family: "courier new", monospace;
    font-size: 13px;
    line-height: 1;
    padding: 10px;
    border: 1px solid #000000;
    display: table;        /* lo convierte en bloque PERO solo ocupa el ancho de su contenido, no toda la línea */
    margin: 0 auto;        /* ahora sí funciona el centrado horizontal porque ya es un bloque */
    white-space: pre;      /* respeta los espacios del arte ASCII, igual que <pre> */
    overflow-x: auto;      /* si el arte es más ancho que la pantalla, aparece scroll horizontal en vez de deformarse */
}

.galeria:hover {
    transform: translateY(-5px);

}

.galeria {
    color:#4d50fd;
    text-decoration: none;
    font-family: "courier new", monospace;
    font-size: 13px;
    line-height: 1;
    padding: 10px;
    border: 1px solid #000000;
    display: table;        /* lo convierte en bloque PERO solo ocupa el ancho de su contenido, no toda la línea */
    margin: 0 auto;        /* ahora sí funciona el centrado horizontal porque ya es un bloque */
    white-space: pre;      /* respeta los espacios del arte ASCII, igual que <pre> */
    overflow-x: auto;      /* si el arte es más ancho que la pantalla, aparece scroll horizontal en vez de deformarse */
}