/* Home 02 · Cinta de confianza
   Bloques con fondo en los colores del logo y texto en negro (pedido del equipo, 15-oct).
   El manual reserva estos colores para el logo: validar con el cliente. */
.me-cinta__list {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem; margin: 0; padding: 0; list-style: none;
}
.me-cinta__list > :nth-child(4n+1) { --me-cinta-bg: var(--me-logo-celeste); }
.me-cinta__list > :nth-child(4n+2) { --me-cinta-bg: var(--me-logo-naranjo); }
.me-cinta__list > :nth-child(4n+3) { --me-cinta-bg: var(--me-logo-verde); }
.me-cinta__list > :nth-child(4n+4) { --me-cinta-bg: var(--me-logo-amarillo); }

.me-cinta__item {
  display: flex; align-items: center; gap: .85rem;
  padding: 1.25rem 1rem;
  min-width: 0;
  border-radius: var(--me-radius-sm);
  background: var(--me-cinta-bg, var(--me-color-negro));
  color: rgb(0 0 0 / .78);   /* negro translúcido, como en las tarjetas de colores (29-oct) */
}

.me-cinta__valor {
  font-family: var(--me-font-heading); font-weight: var(--me-fw-bold);
  font-size: clamp(1.75rem, 3.4vw, 2.5rem); line-height: 1; color: rgb(0 0 0 / .78);
  flex-shrink: 0;
}
.me-cinta__icono {
  display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; flex-shrink: 0;
  border-radius: var(--me-radius-sm); background: rgb(255 255 255 / .45); color: var(--me-color-negro);
}
.me-cinta__icono svg { width: 1.35rem; height: 1.35rem; }
.me-cinta__texto { font-size: .9375rem; font-weight: var(--me-fw-semibold); line-height: 1.3; color: rgb(0 0 0 / .7); }
/* Sin cifra, el texto hace de título ("Proyectos en todo Chile"): el mismo tono que las cifras. */
.me-cinta__item:not(:has(.me-cinta__valor)) .me-cinta__texto { color: rgb(0 0 0 / .78); }

/* Móvil: la cifra arriba y el texto abajo (en fila no caben "+300 establecimientos") */
@media (max-width: 767px) {
  .me-cinta__list { gap: .5rem; }
  .me-cinta__item { flex-direction: column; align-items: flex-start; gap: .5rem; padding: 1.1rem .9rem; }
  .me-cinta__texto { font-size: .875rem; }
  .me-cinta__icono { width: 2.25rem; height: 2.25rem; }
  .me-cinta__icono svg { width: 1.1rem; height: 1.1rem; }
}

@media (min-width: 1025px) {
  .me-cinta__list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
  .me-cinta__item { justify-content: center; padding: 1.75rem 1rem; }
}

/* Fila decorativa bajo los logros (opción "Fila de círculos en los colores del logo debajo",
   19-oct): cuatro círculos y una píldora en los colores del logo, imitando la referencia del
   equipo (que usaba cuadrados). */
.me-cinta__deco { display: flex; align-items: center; justify-content: center; gap: .55rem; margin-top: clamp(1.25rem, 3vw, 2rem); }
.me-cinta__deco--izquierda { justify-content: flex-start; }
/* Tamaños en variables: círculo (--me-deco-d) y píldora (--me-deco-l). Todas llevan radio de
   píldora, así un círculo se alarga sin deformarse en óvalo. */
.me-cinta__deco { --me-deco-d: 1.25rem; --me-deco-l: 4.5rem; }
@media (min-width: 768px) { .me-cinta__deco { --me-deco-d: 1.6rem; --me-deco-l: 5.75rem; } }
.me-cinta__deco > span {
  flex: none; width: var(--me-deco-d); height: var(--me-deco-d);
  border-radius: var(--me-radius-pill); background: var(--me-deco);
  transition: width .7s ease-in-out;   /* más lenta y pareja: se ve más estable (19-oct) */
}
.me-cinta__deco > span:nth-child(1) { --me-deco: var(--me-logo-celeste); }
.me-cinta__deco > span:nth-child(2) { --me-deco: var(--me-logo-rojo); }   /* 19-oct: ya no parte alargada; todos parten como círculo */
.me-cinta__deco > span:nth-child(3) { --me-deco: var(--me-logo-amarillo); }
.me-cinta__deco > span:nth-child(4) { --me-deco: var(--me-logo-naranjo); }
.me-cinta__deco > span:nth-child(5) { --me-deco: var(--me-logo-verde); }
/* Al pasar el mouse (19-oct, pedido del equipo): todos parten como círculo y el que está bajo el
   puntero se alarga como píldora; al salir vuelve a ser círculo. */
.me-cinta__deco > span:hover { width: var(--me-deco-l); }
@media (prefers-reduced-motion: reduce) { .me-cinta__deco > span { transition: none; } }