/* ===========================================
   INEFO — responsive.css [FIXED VERSION]
   Compatible with fixed indicators + whatsapp
   =========================================== */

/* Tablet - 1024px */
@media (max-width: 1024px){
  .site-header{padding: 18px 32px}
  .treatments-section{padding: 80px 32px}
  .treatments-grid{grid-template-columns: repeat(2,1fr); gap: 22px}
  .contact-section{
    grid-template-columns: 1fr;
    gap: 48px;
    padding: 80px 32px;
  }
}

/* Small Tablet - 700px - matches hero picture breakpoint */
@media (max-width: 700px){
  .site-header{
    padding: 16px 20px;
    background: linear-gradient(to bottom, rgba(0,0,0,0.5), transparent);
  }
  .logo{height: 30px}

  .hero{
    height: 84vh;
    min-height: 560px;
    max-height: 780px;
  }
  .hero-slide img{
    object-position: center 20%;
  }

  /* Indicators remain centered on mobile - FIXED */
  .hero-indicators{
    bottom: 28px;
    gap: 10px;
    padding: 8px 14px;
    background: rgba(0,0,0,0.32);
  }
  .hero-indicator{
    width: 8px;
    height: 8px;
  }
  .hero-indicator.active{
    width: 22px;
  }

  .treatments-section{padding: 64px 20px}
  .section-heading{margin-bottom: 36px}
  .treatments-grid{grid-template-columns: 1fr; gap: 18px}
  .treatment-content{padding: 20px}

  .contact-section{padding: 64px 20px; gap: 36px}
  .contact-intro h2{font-size: 38px}
  .contact-form{grid-template-columns: 1fr; gap: 16px}

  /* WhatsApp button - slightly smaller but still premium on mobile - FIXED */
  .whatsapp-button{
    bottom: 20px;
    right: 20px;
    width: 56px;
    height: 56px;
    box-shadow:
      0 8px 22px rgba(37,211,102,0.45),
      0 3px 10px rgba(0,0,0,0.2);
  }
  .whatsapp-icon-svg{
    width: 28px;
    height: 28px;
  }
}

/* Mobile - 480px */
@media (max-width: 480px){
  .site-header{padding: 14px 16px}
  .hero{height: 78vh; min-height: 520px}
  .hero-indicators{bottom: 22px}
  .treatments-section{padding: 48px 16px}
  .contact-section{padding: 48px 16px}
  .contact-intro h2{font-size: 32px}
}

/* Large Desktop - 1440+ */
@media (min-width: 1440px){
  .site-header{padding: 26px 64px}
  .treatments-section{padding: 120px 64px}
  .contact-section{padding: 120px 64px}
  .hero-indicators{bottom: 44px}
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .hero-slide{transition: none}
  .hero-indicator{transition: none}
  .whatsapp-button{transition: none}
}

/* Ensure hero indicators are always centered, even with scrollbars */
@supports (left: calc(50% - 0px)){
  .hero-indicators{
    left: calc(50% - 0px);
  }
}

/* FIX: ensure hero img always covers on mobile even if source fails */
@media (max-width: 700px){
  .hero-slide img{
    min-height: 100%;
    min-width: 100%;
  }
}


/* FIX CORTE CELU 700x800 */
@media (max-width: 700px){
.hero{
    min-height: auto;
    height: auto;
    aspect-ratio: 7 / 8;
    max-height: 82vh;
  }
  .hero-slide,
  .hero-slide picture{
    height: 100%;
  }
  .hero-slide img{
    object-fit: cover;
    object-position: center 8%;
  }
}