/**
 * Estilos responsive del tema ALUD Escalada
 */

/* ==========================================================================
   Tablet (max-width: 1024px)
   ========================================================================== */

@media (max-width: 1024px) {
  .hero-inner {
    grid-template-columns: 1fr;
  }
  
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .services-content {
    grid-template-columns: 1fr;
  }
  
  .why-grid {
    grid-template-columns: 1fr;
  }
  
  .testimonials-grid {
    grid-template-columns: 1fr;
  }
  
  .content-wrapper {
    grid-template-columns: 1fr;
  }
  
  .footer-widgets-inner {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Mobile (max-width: 768px)
   ========================================================================== */

@media (max-width: 768px) {
  /* Header */
  .header-inner {
    flex-wrap: wrap;
  }
  
  .menu-toggle {
    display: flex;
    order: 3;
  }
  
  .site-branding {
    order: 1;
  }
  
  .header-cta {
    order: 2;
  }
  
  .main-navigation {
    order: 4;
    width: 100%;
    margin-top: var(--spacing-sm);
  }
  
  .nav-menu {
    display: none;
    flex-direction: column;
    width: 100%;
    gap: 0;
  }
  
  .nav-menu.active {
    display: flex;
  }
  
  .nav-menu li {
    width: 100%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
  
  .nav-menu a {
    padding: var(--spacing-sm);
  }
  
  /* Hero */
  .hero-section {
    min-height: 500px;
  }
  
  .hero-title {
    font-size: 2.5rem;
  }
  
  .hero-subtitle {
    font-size: 1.25rem;
  }
  
  .hero-description {
    font-size: 1rem;
  }
  
  .hero-features {
    padding: var(--spacing-md);
  }
  
  /* About */
  .about-content {
    grid-template-columns: 1fr;
  }
  
  /* Stats */
  .stats-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
  }
  
  .stat-number {
    font-size: 3rem;
  }
  
  /* Services */
  .service-item {
    flex-direction: column;
  }
  
  /* Footer */
  .site-info-inner {
    flex-direction: column;
    text-align: center;
  }
  
  .footer-menu {
    flex-direction: column;
    align-items: center;
  }
  
  /* Scroll to top */
  .scroll-to-top {
    width: 45px;
    height: 45px;
    bottom: 20px;
    right: 20px;
  }
}

/* ==========================================================================
   Small Mobile (max-width: 480px)
   ========================================================================== */

@media (max-width: 480px) {
  .hero-title {
    font-size: 2rem;
  }
  
  .hero-subtitle {
    font-size: 1.1rem;
  }
  
  .stat-number {
    font-size: 2.5rem;
  }
  
  .btn {
    padding: 10px 20px;
    font-size: 0.875rem;
  }
  
  .header-cta .btn {
    padding: 8px 16px;
    font-size: 0.75rem;
  }
}