* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    background: transparent;
}


/* ============================
   CINTILLO
   ============================ */

.cintillo {
    width: 100%;
    min-height: 76px;

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

    /* Separación EXACTA entre texto y logo */
    gap: 20px;

    background: #EB0028;
    font-family: 'Muli', sans-serif;

    padding: 5px 20px;
}


/* ============================
   TEXTO
   ============================ */

#contador {
    font-size: clamp(14px, 2vw, 37px);
    font-weight: 600;
    color: #ffffff;

    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);

    white-space: nowrap;
}


/* ============================
   LOGO
   ============================ */

.imagen-derecha {
    display: block;

    width: clamp(100px, 14vw, 200px);

    /* La imagen original es 750x250 = proporción 3:1 */
    aspect-ratio: 3 / 1;

    height: auto;

    /* Evita que el logo se recorte */
    object-fit: contain;

    flex-shrink: 0;
}


/* ============================
   TABLET / MOBILE
   ============================ */

@media (max-width: 750px) {

   .cintillo {
    width: 100%;
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    background: #EB0028;
    font-family: 'Muli', sans-serif;
    padding: 5px 20px;
}

    #contador {
        font-size: clamp(10px, 3vw, 18px);
    }

    .imagen-derecha {
        width: clamp(85px, 22vw, 140px);
    }
}


/* Pantallas muy pequeñas */
@media (max-width: 450px) {

    .cintillo {
        min-height: 40px;
        padding: 4px 8px;
    }

    #contador {
        font-size: clamp(9px, 2.8vw, 12px);
        font-weight: 700;
    }

    .imagen-derecha {
        width: clamp(75px, 22vw, 105px);
    }
}