:root {
    --ticker-height: 50px;       /* Altura deseada */
    --ticker-bg: #111;
    --ticker-color: #00ff00;
    --speed: 30s;
}

/* El contenedor principal */
.ticker-wrap {
    width: 100%;
    /* Usamos min-height para que nunca colapse a 0 o se corte */
    min-height: var(--ticker-height); 
    height: var(--ticker-height);
    
    background: var(--ticker-bg);
    overflow: hidden; /* Esto ahora solo cortará lo horizontal */
    
    display: flex;
    align-items: center; /* Centra verticalmente */
    
    border-top: 1px solid #333;
    border-bottom: 1px solid #333;
    box-sizing: border-box; /* Evita que el border sume altura extra */
}

/* El contenedor que se desplaza */
.ticker-move {
    display: flex;
    white-space: nowrap;
    animation: ticker-animation var(--speed) linear infinite;
    
    /* Importante: que herede la altura para que los items internos se centren */
    height: 100%; 
    align-items: center;
}

/* Cada mensaje individual */
.ticker-item {
    flex-shrink: 0; /* Evita que el texto se "estreche" en mobile */
    padding: 0 30px;
    color: var(--ticker-color);
    font-family: 'Courier New', monospace;
    font-size: 1.1rem;
    font-weight: bold;
    
    /* Forzamos que el texto esté centrado y no se pegue al borde inferior */
    display: flex;
    align-items: center;
    height: 100%;
}

@keyframes ticker-animation {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* Ajuste Mobile para evitar la "línea negra" */
@media (max-width: 600px) {
    :root {
        --ticker-height: 60px; /* Damos más margen en móvil */
    }
    .ticker-item {
        font-size: 1rem;
        padding: 0 15px;
    }
}