/*
 * bloques/barra-datos/estilos.css
 * El color, el radio y el nº de columnas se montan inline desde el template
 * porque dependen de la instancia. Aquí, tipografía y espaciado.
 */

.bl-barra-datos { padding: var(--bl-aire) 0; }

.bl-barra-datos .bl-bd-barra {
    display: grid;
    margin: 0;
    padding: clamp(28px, 3.2vw, 48px) 20px;
    row-gap: 26px;
}

.bl-barra-datos .bl-bd-item {
    text-align: center;
    padding: 0 12px;
    min-width: 0;
}

.bl-barra-datos .bl-bd-valor {
    font-size: clamp(17px, 1.35vw, 21px);
    line-height: 1.25;
    font-weight: 600;
    margin: 0;
    overflow-wrap: anywhere;
}

.bl-barra-datos .bl-bd-etiqueta {
    margin: 10px 0 0;
    font-size: clamp(11px, .85vw, 13px);
    letter-spacing: .13em;
    text-transform: uppercase;
    opacity: .7;
    overflow-wrap: anywhere;
}

@media (max-width: 620px) {
    .bl-barra-datos .bl-bd-barra { padding: 22px 14px; }
    .bl-barra-datos .bl-bd-valor { font-size: 18px; }
}