/* Bandejas ligeras (decisión del usuario, 25 oct 2026):
   escritorio = «solo foto» (sin caja ni tarjeta); celular = carrusel deslizable. */

/* Sin caja contenedora en ningún tamaño */
.bandeja {
  background: none;
  box-shadow: none;
  padding: 0;
  gap: 24px 16px;
}

/* Piezas de catálogo: foto con esquinas suaves y texto directo sobre el fondo */
.bandeja .compartimento {
  box-shadow: none;
  background: none;
  border-radius: 0;
  overflow: visible;
}
.bandeja .compartimento .foto {
  border-radius: var(--radio);
  overflow: hidden;
}
.bandeja .compartimento .texto,
.bandeja-colegio .compartimento .texto {
  background: none;
  padding: 12px 2px 0;
}
@media (hover: hover) {
  /* Sin caja ya no hace falta atenuar a los vecinos: basta con levantar la foto */
  .bandeja:has(.compartimento:hover) .compartimento:not(:hover) {
    filter: none;
  }
  .bandeja .compartimento:hover {
    transform: none;
    box-shadow: none;
  }
  .bandeja .compartimento:hover .foto {
    box-shadow: var(--sombra-pieza);
    transform: translateY(-4px);
  }
  .bandeja .compartimento .foto {
    transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
  }
}

/* Necesidades (inicio): sin caja, pero conservan la franja de color de su público */
.bandeja-necesidades .necesidad {
  box-shadow: 0 1px 2px rgb(0 31 39 / 0.08);
}

/* Celular: cuadrícula de dos columnas (decisión del usuario: el carrusel horizontal no le gustó) */
@media (max-width: 899px) {
  .bandeja:not(.bandeja-necesidades) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 12px;
  }
  /* La pieza destacada ocupa todo el ancho, como en Colecciones */
  .bandeja:not(.bandeja-necesidades) > .compartimento.grande {
    grid-column: 1 / -1;
  }
  .bandeja:not(.bandeja-necesidades) > .compartimento.grande .foto {
    aspect-ratio: 4 / 3;
  }
  /* Sin la regla de «último impar a lo ancho»: con la destacada arriba, las demás llenan filas completas */
  .bandeja > .compartimento:last-child:nth-child(odd) {
    grid-column: auto;
  }
  .bandeja > .compartimento:last-child:nth-child(odd) .foto {
    aspect-ratio: 1;
  }
  /* Colegios: Generación arriba, dos paquetes y Maestros a lo ancho */
  .bandeja-colegio .compartimento:last-child {
    grid-column: 1 / -1;
  }
  .bandeja-colegio .compartimento:last-child .foto {
    aspect-ratio: 16 / 9;
  }
  .bandeja-colegio .compartimento .foto {
    aspect-ratio: 4 / 5;
  }
  .bandeja-necesidades {
    gap: 10px;
  }
  .compartimento h3 {
    font-size: var(--size-base);
  }
}