/* 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;
  }
}