/* =========================================================================
   RESPONSIVE FIX — COOPEPROFA
   Correcciones y mejoras SOLO para celulares y tablets.
   Todas las reglas están dentro de @media, por lo que el diseño de
   escritorio (computadoras) queda exactamente igual que antes.
   ========================================================================= */

/* ---------- 1) Red de seguridad anti-scroll horizontal ----------
   Evita que cualquier elemento "se salga" de la pantalla y genere
   una barra de scroll horizontal fea en celular/tablet. */
@media (max-width: 991.98px) {
  html, body {
    max-width: 100%;
    overflow-x: hidden;
  }
}

/* ---------- 2) Footer: iconos de redes sociales ----------
   El bloque .social-row (Facebook / Instagram / WhatsApp del footer)
   no tenía "wrap", así que en pantallas angostas los botones se salían
   del contenedor y empujaban toda la página hacia los lados.
   Esto afectaba a TODAS las páginas (index, about, contact, service,
   price, esc, Priv). */
@media (max-width: 640px) {
  .social-row {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 12px;
  }
}

/* ---------- 3) Logo "Escapaditas" en la sección CTA (esc.html) ----------
   Tenía max-width:400px pero sin width:100%, así que en celular no se
   achicaba y se salía de la pantalla por ambos lados. */
@media (max-width: 575.98px) {
  .cta-logo {
    width: 80% !important;
    max-width: 240px !important;
  }
}

/* ---------- 4) Logo "Escapaditas" dentro de la tarjeta de Villas
   Vacacionales (service.html) ----------
   Tenía un alto fijo de 250px con márgenes negativos pensados para
   escritorio; en celular se salía del contenedor. Se reduce el alto
   y se centra en pantallas angostas. */
@media (max-width: 575.98px) {
  #esca img[src$="lgEsc.png"] {
    height: auto !important;
    width: 65% !important;
    max-width: 200px !important;
    margin: 0 auto !important;
    display: block !important;
  }
  #esca h3 {
    text-align: center;
  }
  #esca p[style*="margin-top: -40px"] {
    margin-top: 12px !important;
  }
  .villas-box {
    padding: 2rem 1.25rem !important;
    text-align: center;
  }
}

/* ---------- 5) Formularios: evitar el "zoom" automático de iOS ----------
   Safari en iPhone hace zoom automático al tocar un campo de texto
   si la letra es menor a 16px. Esto lo corrige sin cambiar cómo se
   ve el formulario en escritorio. */
@media (max-width: 767.98px) {
  input, textarea, select, .field-wrap input, .field-wrap textarea {
    font-size: 16px !important;
  }
}

/* ---------- 6) Botones y áreas táctiles ----------
   Asegura un tamaño mínimo cómodo para el dedo (48px) en botones
   principales, sin alterar su apariencia. */
@media (max-width: 575.98px) {
  .btn-send,
  .tipo-card,
  .social-btn,
  .cta-btn {
    min-height: 44px;
  }
}

/* ---------- 7) Tablas o bloques anchos ----------
   Si alguna tabla o bloque con ancho fijo aparece en el contenido,
   se le permite scroll horizontal propio en vez de romper la página. */
@media (max-width: 767.98px) {
  table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ---------- 8) Imágenes y videos ----------
   Red de seguridad general: ninguna imagen o video debe ser más
   ancho que su contenedor en celular/tablet. */
@media (max-width: 991.98px) {
  img, video, iframe {
    max-width: 100%;
  }
}