/* ===================================================================
   RESPONSIVE-FINAL.CSS
   Body Medical Esthetic Center

   Este archivo SOLO agrega/ajusta comportamiento responsive para
   celulares y tablets. No modifica el diseño en pantallas de
   escritorio (todo va dentro de @media max-width). Se carga DESPUÉS
   de styles.css / style2.css / style3.css en cada página, y usa
   !important donde hace falta para garantizar que las reglas se
   apliquen sin tener que tocar los archivos originales.

   Breakpoints usados:
     1024px → tablets en horizontal / laptops pequeñas
      991px → tablets (vertical/horizontal, iPad, Galaxy Tab)
      820px → tablets en vertical (iPad Air/Pro vertical)
      768px → tablets en vertical estándar
      600px → celulares grandes / phablets horizontal
      480px → celulares estándar
      380px → celulares pequeños (iPhone SE, etc.)
      340px → celulares muy pequeños
=================================================================== */

/* -------------------------------------------------------------
   0) BASE SEGURA — evita desbordes horizontales en cualquier
      tamaño, sin cambiar ningún estilo visual existente.
---------------------------------------------------------------- */
html {
  -webkit-text-size-adjust: 100%;
}
body {
  overflow-x: hidden;
}
img, svg, video, iframe {
  max-width: 100%;
}
* {
  -webkit-tap-highlight-color: transparent;
}

/* ===================================================================
   FIX CRÍTICO: superposición entre la tarjeta del hero (título,
   subtítulo y botones "Agendar cita" / "Ver servicios") y la fila
   de estadísticas (10+ / 5K+ / 20+) en celulares.

   Causa: .hero-card tenía una altura FIJA (height: clamp(...)) más
   chica que su contenido real, así que el botón "Ver servicios" se
   desbordaba por debajo de la tarjeta y quedaba tapado por
   .hero-stats. La solución es dejar que la tarjeta crezca según su
   contenido (min-height en vez de height), sin tocar nada del
   diseño visual.
=================================================================== */
@media (max-width: 768px) {
  .masthead {
    height: auto !important;
    min-height: 100svh !important;
    overflow: visible !important;
  }
  .hero-card {
    height: auto !important;
    min-height: clamp(380px, 72vw, 460px) !important;
    overflow: visible !important;
  }
  .hero-card-body {
    padding-bottom: 36px !important;
  }
  .hero-actions {
    margin-bottom: 4px !important;
  }
  .hero-stats {
    margin-top: 28px !important;
  }
}

@media (max-width: 480px) {
  .hero-card {
    height: auto !important;
    min-height: clamp(340px, 80vw, 420px) !important;
  }
  .hero-card-body {
    padding-bottom: 28px !important;
  }
  .hero-stats {
    margin-top: 22px !important;
  }
}

/* ===================================================================
   1) TABLETS GRANDES / LAPTOPS PEQUEÑAS — hasta 1024px
=================================================================== */
@media (max-width: 1024px) {

  .hacemos-wrapper,
  .ubicacion-section,
  .footer-premium {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  .hero-card-body {
    padding: 56px 36px !important;
  }

  .hero-card-right {
    max-width: 280px !important;
  }

  .ubicacion-map-wrap {
    min-height: 400px !important;
  }
}

/* ===================================================================
   2) TABLETS — 991px y menos (iPad, Galaxy Tab, etc.)
=================================================================== */
@media (max-width: 991px) {

  /* ---- Navegación ---- */
  #mainNav .navbar-brand {
    font-size: 1rem !important;
  }

  /* ---- Hero / Masthead ---- */
  .masthead-content {
    padding: 100px 16px 36px !important;
  }
  .hero-card-body {
    padding: 44px 32px !important;
    gap: 20px !important;
  }
  .hero-card-right {
    max-width: 260px !important;
    padding: 24px !important;
  }
  .hero-title {
    font-size: clamp(1.9rem, 5vw, 2.8rem) !important;
  }
  .hero-subtitle {
    font-size: 0.95rem !important;
  }
  .hero-stat-num { font-size: 1.8rem !important; }
  .hero-stat-label { font-size: 0.64rem !important; }
  .hero-stat { padding: 18px 12px !important; }

  /* ---- ¿Quiénes somos? / ¿Qué hacemos? ---- */
  .hacemos-featured {
    gap: 36px !important;
  }
  .hacemos-wrapper {
    gap: 48px !important;
  }
  .hacemos-title {
    font-size: 1.9rem !important;
  }
  .hacemos-desc {
    max-width: 100% !important;
  }
  .hacemos-cards {
    gap: 18px !important;
  }
  .hacemos-card-img {
    height: 190px !important;
  }
  .hacemos-card-body {
    padding: 22px 20px 26px !important;
  }

  /* ---- Ubicación ---- */
  .ubicacion-section {
    padding: 56px 20px !important;
  }
  .ubicacion-info {
    padding: 36px 28px !important;
  }
  .ubicacion-title {
    font-size: 1.5rem !important;
  }
  .ubicacion-map-wrap {
    min-height: 320px !important;
  }

  /* ---- Footer premium ---- */
  .footer-premium {
    padding: 56px 24px 0 !important;
  }

  /* ---- Galería ---- */
  .gallery-grid-2 {
    gap: 24px !important;
    padding: 28px 20px !important;
  }
  .gallery-item {
    height: 230px !important;
  }
  .popup-content {
    max-width: 480px !important;
  }

  /* ---- Modal "Agendar Cita" ---- */
  #modalAgendarCita .modal-dialog {
    margin: 16px !important;
    max-width: 92% !important;
  }
}

/* ===================================================================
   3) TABLETS VERTICALES — 820px y menos (apilar 2 columnas en 1)
=================================================================== */
@media (max-width: 820px) {

  /* ¿Quiénes somos? — imagen + texto pasa a columna única */
  .hacemos-featured {
    display: flex !important;
    flex-direction: column !important;
    gap: 28px !important;
  }
  .hacemos-img-wrap {
    width: 100% !important;
    height: 280px !important;
  }
  .hacemos-text-wrap {
    padding: 0 !important;
    width: 100% !important;
  }
  .hacemos-desc {
    max-width: 100% !important;
  }

  /* Tarjetas Misión/Visión — 2 columnas siguen viéndose bien,
     pero damos más aire en pantallas medianas */
  .hacemos-cards {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* ===================================================================
   4) CELULARES GRANDES / PHABLETS HORIZONTAL — 767px y menos
=================================================================== */
@media (max-width: 767px) {

  /* ---- Ubicación: ya se apila por CSS original, reforzamos espacios ---- */
  .ubicacion-inner {
    border-radius: 22px !important;
  }
  .ubicacion-info {
    padding: 32px 24px !important;
  }
  .ubicacion-detail {
    margin-bottom: 20px !important;
  }

  /* ---- Tarjetas Misión/Visión a una columna en celulares grandes ---- */
  .hacemos-cards {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
  .hacemos-card-img {
    height: 210px !important;
  }

  /* ---- Footer premium: 2 columnas en lugar de 4 ---- */
  .footer-premium-inner {
    grid-template-columns: 1fr 1fr !important;
    gap: 30px !important;
  }

  /* ---- Contact page (style3.css) ---- */
  .contact-card {
    padding: 38px 28px !important;
  }
  .title {
    font-size: 1.7rem !important;
  }

  /* ---- Modal cita: tarjetas de tipo de cita más cómodas ---- */
  .cita-card-title { font-size: 0.82rem !important; }
  .cita-card-price { font-size: 0.74rem !important; }
}

/* ===================================================================
   5) TABLETS / CELULARES — 600px y menos
=================================================================== */
@media (max-width: 600px) {

  /* ---- Navbar ---- */
  #mainNav .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* ---- Hero ---- */
  .hero-card {
    border-radius: 18px 18px 30px 30px !important;
  }
  .masthead-content {
    padding: 88px 12px 28px !important;
  }

  /* ---- Slider de imágenes ---- */
  .slide {
    width: 130px !important;
    height: 90px !important;
  }

  /* ---- Footer premium: 1 columna ---- */
  .footer-premium-inner {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  .footer-premium {
    padding: 44px 20px 0 !important;
  }

  /* ---- Galería: 1 columna ---- */
  .gallery-grid-2 {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    padding: 20px 16px !important;
  }
  .gallery-item {
    height: 220px !important;
  }
  .gallery-item .text h3 {
    font-size: 15px !important;
    padding: 7px 14px !important;
  }

  /* ---- Popup de servicios ---- */
  .popup {
    padding: 14px !important;
  }
  .popup-content {
    max-width: 100% !important;
    max-height: 90vh !important;
    border-radius: 20px !important;
  }
  .popup-inner {
    padding: 30px 22px 24px !important;
  }
  .popup-content h2 {
    font-size: 18px !important;
  }
  .converter-bar {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }
  .converter-btn {
    width: 100% !important;
    justify-content: center !important;
  }

  /* ---- Contacto ---- */
  .contact-container {
    padding: 20px !important;
  }
  .contact-card {
    width: 100% !important;
    padding: 32px 22px !important;
  }
  .title { font-size: 1.5rem !important; }
  .subtitle { font-size: 0.88rem !important; margin-bottom: 24px !important; }
  .input-group { margin-bottom: 22px !important; }

  /* ---- Modal cita ---- */
  #modalAgendarCita .modal-dialog {
    margin: 10px !important;
    max-width: calc(100% - 20px) !important;
  }
  .cita-cards,
  div[style*="display:flex;gap:10px;"] {
    flex-wrap: wrap !important;
  }
}

/* ===================================================================
   6) CELULARES ESTÁNDAR — 480px y menos
   (Refuerzo de las reglas ya existentes en styles.css, con cobertura
   adicional para Galería, Contacto y elementos sueltos)
=================================================================== */
@media (max-width: 480px) {

  /* ---- Tipografía general más cómoda en pantallas pequeñas ---- */
  .hacemos-title { font-size: 1.6rem !important; }
  .hacemos-desc { font-size: 0.92rem !important; }
  .hacemos-card-title { font-size: 1.05rem !important; }
  .hacemos-card-text { font-size: 0.85rem !important; }
  .ubicacion-title { font-size: 1.3rem !important; }
  .ubicacion-value { font-size: 0.85rem !important; }

  /* ---- Botones e inputs táctiles (mínimo 44px de alto) ---- */
  .btn-hero-primary,
  .btn-hero-secondary,
  .ubicacion-btn,
  .ubicacion-btn-waze-light,
  .fp-cta,
  .cita-btn-primary,
  .cita-btn-ghost,
  .btn-submit,
  .converter-btn {
    min-height: 44px !important;
  }
  .fl-input,
  .input-group input,
  .input-group textarea,
  .cita-card-inner {
    min-height: 44px !important;
    box-sizing: border-box !important;
  }

  /* ---- Galería: tarjetas más compactas ---- */
  .gallery-item { height: 190px !important; }
  .gallery-grid-2 { padding: 16px 12px !important; gap: 14px !important; }

  /* ---- Popup de servicios ---- */
  .popup-content h2 { font-size: 17px !important; }
  .popup-desc { font-size: 13px !important; }
  .popup-benefits { font-size: 12px !important; }
  .pricing-name, .pricing-price { font-size: 12.5px !important; }
  .popup-inner { padding: 26px 18px 20px !important; }

  /* ---- Contacto ---- */
  .contact-card { padding: 28px 18px !important; }
  .title { font-size: 1.35rem !important; }
  .subtitle { font-size: 0.82rem !important; }
  .btn-submit { font-size: 0.95rem !important; padding: 13px 0 !important; }
  .footer-social { gap: 16px !important; flex-wrap: wrap !important; }

  /* ---- Modal cita: tipografía y botones ---- */
  .fl-input, .fl-label { font-size: 0.88rem !important; }
  .cita-modal-footer button { font-size: 0.85rem !important; }
}

/* ===================================================================
   7) CELULARES PEQUEÑOS — 380px y menos (iPhone SE, etc.)
=================================================================== */
@media (max-width: 380px) {

  .hero-title { font-size: clamp(1.4rem, 8vw, 1.9rem) !important; }
  .hero-eyebrow { font-size: 0.55rem !important; }
  .hero-stat-num { font-size: 1.1rem !important; }
  .hero-stat-label { font-size: 0.5rem !important; }

  .hacemos-title { font-size: 1.4rem !important; }
  .hacemos-img-wrap { height: 190px !important; }

  .ubicacion-title { font-size: 1.18rem !important; }
  .ubicacion-icon { width: 30px !important; height: 30px !important; }

  .footer-premium { padding: 36px 14px 0 !important; }
  .fp-brand-name { font-size: 1.02rem !important; }
  .fp-brand-desc { font-size: 0.8rem !important; }

  .contact-card { padding: 24px 14px !important; }
  .title { font-size: 1.2rem !important; }

  .gallery-item { height: 170px !important; }
  .gallery-item .text h3 { font-size: 13.5px !important; }

  #mainNav .navbar-brand { font-size: 0.78rem !important; }
}

/* ===================================================================
   8) CELULARES MUY PEQUEÑOS — 340px y menos
=================================================================== */
@media (max-width: 340px) {

  .masthead-content { padding: 76px 10px 20px !important; }
  .hero-card-body { padding: 16px 14px 20px !important; }
  .hero-title { font-size: 1.35rem !important; }
  .hero-card-right { padding: 16px !important; }

  .hacemos-wrapper { padding: 0 16px !important; }
  .hacemos-text-wrap { padding: 0 8px !important; }

  .ubicacion-info { padding: 22px 16px !important; }

  .contact-card { padding: 20px 12px !important; }

  .cita-card { min-width: 78px !important; }
  .cita-card-inner { padding: 10px 6px !important; }
  .cita-card-title { font-size: 0.76rem !important; }
  .cita-card-price { font-size: 0.68rem !important; }
}

/* ===================================================================
   9) AJUSTES DE ORIENTACIÓN HORIZONTAL EN CELULARES
   (cuando el alto de pantalla es muy bajo, evita que el hero ocupe
   toda la pantalla y tape contenido)
=================================================================== */
@media (max-width: 900px) and (max-height: 500px) and (orientation: landscape) {
  .masthead {
    height: auto !important;
    min-height: auto !important;
    padding: 100px 0 40px !important;
  }
  #modalAgendarCita .modal-dialog {
    max-height: 96vh !important;
  }
  .cita-modal-body, #modalAgendarCita .cita-modal-body {
    max-height: 60vh !important;
  }
}