/* bloques/cifras — foto grande y casillas con cifras */

.bl-cf-rejilla { display: grid; gap: 6px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.bl-cf-rejilla.con-imagen { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); grid-auto-rows: minmax(240px, auto); }
.bl-cf-rejilla.con-imagen .bl-cf-foto { grid-row: span 2; }

.bl-cf-foto { position: relative; overflow: hidden; min-height: 320px; background: rgba(38, 37, 36, .08); }
.bl-cf-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.bl-cf-casilla {
    display: flex; flex-direction: column; justify-content: space-between; gap: 32px;
    min-height: 240px; padding: clamp(22px, 2.4vw, 32px);
    background: var(--vk-crema-2, #efe9e1); color: var(--vk-oscuro, #262524);
}
.bl-tema-oscuro .bl-cf-casilla { background: var(--vk-oscuro-2, #2f2e2c); color: #fff; }
.bl-cf-casilla.es-destacada, .bl-tema-oscuro .bl-cf-casilla.es-destacada { background: var(--vk-amarillo, #dfbe2d); color: var(--vk-oscuro, #262524); }

.bl-cf-valor { font-weight: 500; font-size: clamp(40px, 4.2vw, 58px); line-height: 1; letter-spacing: -.02em; }
.bl-cf-etiqueta { font-family: var(--fuente-mono, ui-monospace, monospace); font-size: 12.5px; letter-spacing: .03em; line-height: 1.45; text-transform: uppercase; max-width: 26ch; }
.bl-tema-oscuro .bl-cf-casilla:not(.es-destacada) .bl-cf-etiqueta { color: rgba(255, 255, 255, .72); }

.bl-cf-nota { margin: 22px 0 0; font-family: var(--fuente-mono, ui-monospace, monospace); font-size: 12.5px; letter-spacing: .04em; line-height: 1.6; text-transform: uppercase; color: var(--vk-texto-2, #5f5c58); }
.bl-tema-oscuro .bl-cf-nota { color: rgba(255, 255, 255, .62); }

@media (max-width: 900px) {
    .bl-cf-rejilla.con-imagen { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-auto-rows: auto; }
    .bl-cf-rejilla.con-imagen .bl-cf-foto { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 4 / 3; min-height: 0; }
    .bl-cf-casilla { min-height: 180px; }
}
@media (max-width: 480px) {
    .bl-cf-rejilla, .bl-cf-rejilla.con-imagen { grid-template-columns: minmax(0, 1fr); }
    .bl-cf-casilla { min-height: 150px; }
}