/* =========================================
   RESPONSIVE
========================================= */
/* Tablets */
@media (max-width: 1024px) {
  .about-content-grid,
  .about-cards {
    grid-template-columns: 1fr;
    text-align: center;
  }
}

/* Tablets y móviles */
@media (max-width: 768px) {
  body {
    flex-direction: column;
  }

  .menu-toggle {
    display: block;
  }

  .sidebar {
    width: 260px;
    transform: translateX(-100%);
    transition: var(--transition-default);
    z-index: 1000;
  }

  .sidebar.active {
    transform: translateX(0);
  }

  .main-content {
    margin-left: 0 !important;
  }

  .about-content-grid {
    padding: 2rem 1.5rem;
  }

  .about-header {
    padding: 2rem 1rem;
  }

  .about-title {
    font-size: 2rem;
  }
}