/* Grid de revistas */
.c4x4-revistas-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: stretch;
}

/* Tarjeta: 4 por fila en desktop */
.c4x4-revista-card {
  flex: 0 0 calc((100% - 72px) / 4); /* (100% - 3 gaps) / 4 */
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #e5e7eb; /* gris claro */
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,.06);
  transition: transform .15s ease, box-shadow .15s ease;
}
.c4x4-revista-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,.10);
}

/* Imagen superior (relación de aspecto y recorte) */
.c4x4-revista-thumb {
  position: relative;
  background: #f3f4f6; /* fallback */
}
.c4x4-revista-thumb img,
.c4x4-revista-thumb--placeholder {
  width: 100%;
  display: block;
}
.c4x4-revista-thumb img {
  aspect-ratio: 3 / 4; /* mantiene proporción de revista */
  object-fit: cover;
}
.c4x4-revista-thumb--placeholder {
  aspect-ratio: 3 / 4;
  background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
}

/* Zona de acciones */
.c4x4-revista-actions {
  padding: 14px;
  margin-top: auto; /* empuja acciones al fondo de la tarjeta */
  display: flex;
}

/* Botón con nombre de la revista */
.c4x4-revista-btn {
  width: 100%;
  text-align: center;
  display: inline-block;
  padding: 10px 14px;
  background: #111827; /* gris casi negro */
  color: #fff;
  text-decoration: none;
  border-radius: 8px;
  font-weight: 600;
  line-height: 1.2;
  border: 1px solid transparent;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.c4x4-revista-btn:hover,
.c4x4-revista-btn:focus {
  background: #0b1220;
  border-color: #0b1220;
  color: #fff;
}
.c4x4-revista-btn--disabled {
  cursor: not-allowed;
  background: #9ca3af;
  border-color: #9ca3af;
  color: #f9fafb;
}

/* Responsive: 2 por fila en tablets */
@media (max-width: 1024px) {
  .c4x4-revista-card {
    flex: 0 0 calc((100% - 24px) / 2);
  }
}

/* Responsive: 1 por fila en móviles */
@media (max-width: 640px) {
  .c4x4-revista-card {
    flex: 0 0 100%;
  }
}

