/* tablet.css — breakpoint: max-width 1100px */
@media (max-width: 1100px) {
  .hero-container {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    margin-top: 100px;
    padding: 0 2rem;
  }

  .hero-visual {
    width: 100%;
    min-height: 420px;
    height: 420px;
  }

  #heroCanvas {
    width: 100% !important;
    height: 100% !important;
  }

  .hero-text-content {
    text-align: center;
  }

  .hero-text-content p {
    margin-left: auto;
    margin-right: auto;
  }

  .primary-btn {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
  .portfolio-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Cards en tablet: ligeramente más compactas */
  .cards-grid {
    padding: 2rem 1.5rem;
  }

  .service-img {
    width: 60px;
    height: 60px;
  }

  .service-img canvas {
    width: 60px;
    height: 60px;
  }

  /* ── SECTION 3: PLUGIN SHOWCASE & SECTION 4: PROCESO TABLET ADAPTATIONS ── */
  .plugin-showcase-section {
    padding: 80px 24px !important;
  }

  .plugin-showcase-grid {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }

  .plugin-info-panel {
    padding-left: 0 !important;
  }

  .product-buy-box-card {
    max-width: 100% !important;
  }

  .proceso-section {
    padding: 80px 24px 70px 24px !important;
  }

  .proceso-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px !important;
  }

  .proceso-card {
    padding: 36px 28px !important;
    min-height: 240px !important;
  }
}