/* ============================================
   Responsive Styles - Mobile First Adjustments
   ============================================ */

/* Tablet ( <= 1024px ) */
@media (max-width:1024px){
  .hero-grid{grid-template-columns:1fr;text-align:center}
  .hero-cta{justify-content:center}
  .hero-image{max-width:520px;margin:0 auto}
  .footer-grid{grid-template-columns:1fr 1fr}
  .contact-grid{grid-template-columns:1fr}
}

/* Mobile ( <= 768px ) */
@media (max-width:768px){
  section{padding:3.5rem 0}
  .hero{padding:7rem 0 3rem;min-height:auto}
  .main-nav{
    position:fixed;top:0;right:-100%;
    width:78%;max-width:320px;height:100vh;
    background:var(--color-cream);
    box-shadow:-8px 0 32px rgba(0,0,0,.1);
    padding:6rem 2rem 2rem;
    transition:right .4s cubic-bezier(.34,1.56,.64,1);
    z-index:998;
  }
  .main-nav.open{right:0}
  .main-nav ul{flex-direction:column;gap:1.5rem;align-items:flex-start}
  .main-nav a{font-size:1.15rem}
  .nav-toggle{display:block;z-index:1001;position:relative}
  .nav-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:997;opacity:0;visibility:hidden;transition:.3s}
  .nav-overlay.show{opacity:1;visibility:visible}

  .logo img{height:48px}
  .logo span{display:none}

  .card-grid{grid-template-columns:1fr}
  .stats{padding:2rem 1.25rem}
  .stat-item .num{font-size:2.25rem}
  .schedule-table{font-size:.8rem}
  .schedule-table th,.schedule-table td{padding:.6rem .35rem}

  .footer-grid{grid-template-columns:1fr;gap:2rem}
  .float-whatsapp{width:54px;height:54px;font-size:1.5rem;bottom:18px;right:18px}

  .btn{padding:.85rem 1.5rem;font-size:.95rem}
  .hero-cta{flex-direction:column;align-items:stretch}
  .hero-cta .btn{justify-content:center}
}

/* Small phones ( <= 480px ) */
@media (max-width:480px){
  body{font-size:15px}
  .container{width:min(100% - 1.5rem,var(--container))}
  section{padding:3rem 0}
  .section-head{margin-bottom:2rem}
  .card{padding:1.5rem 1.25rem}
  .testimonial{padding:1.5rem}
  .page-header{padding:7.5rem 0 2.5rem}
}

/* Large desktop ( >= 1440px ) */
@media (min-width:1440px){
  :root{--container:1320px}
  .hero{min-height:90vh}
}

/* Print */
@media print{
  .site-header,.float-whatsapp,.page-loader,.nav-toggle{display:none !important}
  body{background:#fff;color:#000}
  section{padding:1rem 0;page-break-inside:avoid}
}