/* ==========================================================================
   Mosaico de capacidades
   La rejilla anterior era uniforme: siete tarjetas iguales, todas del mismo
   tamaño y con el mismo peso visual. Eso es lo que hace que una seccion se
   lea como una lista y no como un argumento.
   Aqui las piezas tienen tamaños distintos segun lo que pesan en la venta:
   las reglas de envio y la API ocupan el doble porque son el gancho.
   ========================================================================== */

.rejilla-capacidades {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

@media (min-width: 720px) {
  .rejilla-capacidades { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1040px) {
  .rejilla-capacidades {
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: minmax(190px, auto);
  }

  /* Reglas de envio: la pieza mayor, arriba a la izquierda */
  .tarjeta:nth-child(1) { grid-column: span 4; grid-row: span 2; }
  /* Etiquetas */
  .tarjeta:nth-child(2) { grid-column: span 2; }
  /* Pedidos */
  .tarjeta:nth-child(3) { grid-column: span 2; }
  /* Cliente informado */
  .tarjeta:nth-child(4) { grid-column: span 2; }
  /* Feeds */
  .tarjeta:nth-child(5) { grid-column: span 2; }
  /* Costes */
  .tarjeta:nth-child(6) { grid-column: span 2; }
  /* API: la otra pieza grande, cerrando abajo */
  .tarjeta:nth-child(7) { grid-column: span 6; }
}

/* La pieza grande merece mas presencia tipografica */
@media (min-width: 1040px) {
  .tarjeta:nth-child(1) { padding: 2.4rem; }
  .tarjeta:nth-child(1) h3 { font-size: 1.8rem; }
  .tarjeta:nth-child(1) p { font-size: 1.05rem; max-width: 46ch; }
  .tarjeta:nth-child(1) .tarjeta__icono { width: 54px; height: 54px; font-size: 1.5rem; }

  .tarjeta:nth-child(7) { padding: 2.2rem 2.4rem; }
  .tarjeta:nth-child(7) h3 { font-size: 1.5rem; }
  /* El texto de la pieza ancha en dos columnas: una linea de 120 caracteres
     es ilegible. */
  .tarjeta:nth-child(7) p { max-width: 62ch; }
  .tarjeta:nth-child(7) .tarjeta__lista {
    grid-template-columns: repeat(2, 1fr);
    display: grid;
  }
}

/* La primera tarjeta lleva fondo propio: es la que hay que mirar primero */
@media (min-width: 1040px) {
  .tarjeta:nth-child(1) {
    background:
      radial-gradient(70% 90% at 85% 15%, rgba(66, 60, 212, .09), transparent 60%),
      var(--papel-alto);
  }
  .tarjeta:nth-child(7) {
    background:
      radial-gradient(50% 120% at 90% 50%, rgba(1, 236, 167, .08), transparent 60%),
      var(--papel-alto);
  }
}

/* Anular el span antiguo, que ahora lo decide el nth-child */
.tarjeta--ancha { grid-column: auto; }