/* El problema: tarjetas bento con cifras grandes y mini barras */
.bento {
  display: grid;
  gap: clamp(0.625rem, 1.2vw, 1rem);
}

.cifra {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(1.1rem, 3vh, 2rem);
  min-height: clamp(15rem, min(30vw, 40vh), 24rem);
  padding: clamp(1.4rem, min(2.6vw, 3.6vh), 2.25rem);
  border: 1px solid var(--raya-oscura);
  border-radius: var(--radio-l);
  background: var(--carbon);
  overflow: hidden;
}

.cifra__rotulo {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: var(--gris);
}

.cifra__num {
  font-family: var(--letra-titulo);
  font-size: clamp(4.25rem, min(10.5vw, 14vh), 9.5rem);
  font-weight: 800;
  line-height: 0.82;
  letter-spacing: -0.055em;
  font-variant-numeric: tabular-nums;
}

.cifra__num small {
  font-size: 0.42em;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--gris);
}

.cifra__texto {
  max-width: 34ch;
  margin-top: 1rem;
  color: #c9c6be;
}

.cifra__texto strong {
  color: var(--hueso);
  font-weight: 600;
}

/* Tarjeta principal con brillo cálido */
.cifra--principal {
  border-color: rgba(255, 140, 70, 0.4);
  background:
    radial-gradient(90% 70% at 100% 100%, rgba(255, 107, 26, 0.34) 0%, rgba(255, 107, 26, 0) 68%),
    var(--carbon);
}

.cifra--principal .cifra__num {
  color: var(--naranja);
}

.cifra__cuerpo {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
}

/* Columnas 2023 / 2024 */
.columnas {
  display: flex;
  align-items: flex-end;
  gap: 0.6rem;
  height: clamp(6.5rem, min(14vw, 17vh), 11rem);
}

.columnas__una {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 0.4rem;
  width: clamp(2.6rem, 5vw, 4rem);
  height: 100%;
  font-family: var(--letra-codigo);
  font-size: 0.75rem;
  color: var(--gris);
}

.columnas__barra {
  display: grid;
  place-items: start center;
  width: 100%;
  padding-top: 0.5rem;
  border-radius: 12px 12px 4px 4px;
  background: var(--carbon-2);
  color: var(--hueso);
  font-family: var(--letra-titulo);
  font-size: 1.125rem;
  font-weight: 700;
  transform-origin: bottom;
}

.columnas__barra--16 { height: 64%; }

.columnas__barra--25 {
  height: 100%;
  background: var(--naranja);
  color: var(--tinta);
}

/* Barra de rayitas */
.rayitas {
  position: relative;
  height: clamp(1.5rem, 4vh, 2.25rem);
  color: #3a3a3f;
  background: repeating-linear-gradient(90deg, currentColor 0 3px, transparent 3px 9px);
}

.rayitas__lleno {
  position: absolute;
  inset: 0 auto 0 0;
  color: var(--hueso);
  background: repeating-linear-gradient(90deg, currentColor 0 3px, transparent 3px 9px);
}

.rayitas__lleno--47 { width: 47%; }
.rayitas__lleno--62 { width: 62%; }

.rayitas__pie {
  display: flex;
  justify-content: space-between;
  margin-top: 0.6rem;
  font-family: var(--letra-codigo);
  font-size: 0.75rem;
  color: var(--gris);
}

.cifra__chapa {
  align-self: flex-start;
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--raya-oscura);
  border-radius: 999px;
  font-size: 0.875rem;
  color: var(--hueso);
}

.problema__fuente {
  margin-top: 1.5rem;
  font-size: 0.875rem;
  color: var(--gris);
}

@media (min-width: 860px) {
  .bento {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .cifra--7 { grid-column: span 7; }
  .cifra--5 { grid-column: span 5; }
}

/* Las barras crecen al entrar en pantalla */
.con-movimiento .columnas__barra {
  transform: scaleY(0);
  transition: transform 0.9s var(--suave) 0.25s;
}

.con-movimiento .rayitas__lleno {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.1s var(--suave) 0.25s;
}

.con-movimiento .es-visible .columnas__barra {
  transform: none;
}

.con-movimiento .es-visible .rayitas__lleno {
  clip-path: inset(0);
}