/* ============================================================
   MOBILE COMPACT LAYOUT — Página principal (index.php)
   Objetivo: reducir el scroll vertical en móvil convirtiendo
   listados de tarjetas en galerías horizontales deslizables
   (scroll-snap) con flechas de navegación, conservando la
   estética original del tema.
   ============================================================ */

/* ---------- Flechas de galería (ocultas fuera de móvil) ---------- */
.dixi-gallery { position: relative; }
.dixi-gallery-arrow {
  display: none;
}

/* ---------- Sugerencias de direcciones (Google Places) ---------- */
/* Asegura que el listado de lugares cercanos quede siempre visible por
   encima del mapa y de cualquier modal, y combine con la tipografía del sitio. */
.pac-container {
  z-index: 99999 !important;
  font-family: 'Mulish', sans-serif;
  border-radius: 8px;
  margin-top: 4px;
  box-shadow: 0 8px 24px rgba(2, 34, 121, 0.18);
}

@media only screen and (max-width: 767px) {

  /* ---------- Cabeceras de sección más compactas ---------- */
  .section-head { margin-bottom: 18px; }
  .section-head .sf-title,
  .section-head .aon-title { margin-bottom: 8px; }
  .section-head p { margin-bottom: 0; font-size: 14px; }

  /* ---------- Banner (hero) ---------- */
  .aon-banner-area2 { padding-top: 25px; }
  .aon-bnr2-media-wrap { margin-bottom: 20px; max-width: 260px; }
  .aon-bnr-write h2 { font-size: 26px; line-height: 1.25; }

  /* ---------- Flechas de galería: estilo común ---------- */
  .dixi-gallery-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    z-index: 5;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: none;
    background: #fff;
    color: #022279;
    font-size: 16px;
    box-shadow: 0 4px 14px rgba(2, 34, 121, 0.28);
    transform: translateY(-50%);
    transition: opacity .2s ease, transform .2s ease;
  }
  .dixi-gallery-arrow:active { transform: translateY(-50%) scale(0.92); }
  .dixi-gallery-arrow.is-disabled { opacity: 0; pointer-events: none; }
  .dixi-gallery-prev { left: 2px; }
  .dixi-gallery-next { right: 2px; }

  /* ---------- Cómo funciona (3 pasos) → galería horizontal ---------- */
  .aon-howit-area2 { padding-top: 0; padding-bottom: 0; }
  .aon-howit-area2-bg { padding: 26px 0 30px 0; }
  .aon-howit-area2-bg .section-head { padding: 0 20px; margin-bottom: 14px; }
  .aon-howit-area2-bg .aon-categories-area2-section .row.justify-content-center {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 20px;
    -webkit-overflow-scrolling: touch;
    margin-left: 0;
    margin-right: 0;
    padding: 0 20px 6px;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .aon-howit-area2-bg .aon-categories-area2-section .row.justify-content-center::-webkit-scrollbar {
    display: none;
  }
  .aon-howit-area2-bg .aon-categories-area2-section .row.justify-content-center > [class*="col-"] {
    flex: 0 0 80%;
    max-width: 80%;
    padding-left: 8px;
    padding-right: 8px;
    scroll-snap-align: start;
  }
  .aon-howit-area2-iconbox { margin-bottom: 0; height: 100%; }
  .aon-howit-arrow:after,
  .aon-howit-arrow:before { display: none; }

  /* ---------- Lugares / Categorías principales ---------- */
  .aon-categories-area2 { padding: 22px 0; }
  #rowlugar { margin-bottom: 6px; }

  /* Tarjetas de categorías cargadas por ciudad → galería horizontal */
  #categoria-lugar .aon-categories-area2-section .row.justify-content-center {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 20px;
    -webkit-overflow-scrolling: touch;
    margin-left: 0;
    margin-right: 0;
    padding: 4px 20px 16px;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  #categoria-lugar .aon-categories-area2-section .row.justify-content-center::-webkit-scrollbar {
    display: none;
  }
  #categoria-lugar .aon-categories-area2-section .row.justify-content-center > [class*="col-"] {
    flex: 0 0 82%;
    max-width: 82%;
    padding-left: 8px;
    padding-right: 8px;
    scroll-snap-align: start;
  }
  #categoria-lugar .aon-categories-area2-iconbox { margin-bottom: 0; height: 100%; }

  /* ---------- Expertos colaboradores (ya es owl-carousel) ---------- */
  .aon-feature-vender-area2 { padding: 26px 0; }
  .aon-ow-provider-wrap2 { margin-top: 40px; margin-bottom: 10px; }

  /* ---------- Por qué elegirnos → lista horizontal deslizable ---------- */
  .aon-why-choose2-area { padding-top: 22px; padding-bottom: 22px; }
  .aon-why-choose2-box { padding: 24px 0 24px 0; border-radius: 20px; }
  .aon-why-choose2-box .section-head { padding: 0 20px; }
  .aon-why-choose2-line { display: none; }
  .aon-why-choose-steps {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 20px;
    -webkit-overflow-scrolling: touch;
    padding: 0 20px;
    margin-bottom: 0;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .aon-why-choose-steps::-webkit-scrollbar { display: none; }
  .aon-why-choose-steps li {
    flex: 0 0 84%;
    max-width: 84%;
    scroll-snap-align: start;
    margin-right: 14px;
  }

  /* ---------- Testimonios (ya es owl-carousel) ---------- */
  .aon-testimonials-two-area { padding-top: 26px; padding-bottom: 26px; }

  /* ---------- Estadísticas: cuadrícula 2x2 compacta ---------- */
  .aon-statics-area2 { padding-top: 22px; padding-bottom: 22px; }
  .aon-statics-area2-bg { padding: 30px 15px !important; }
  .aon-company-static-num2 { font-size: 34px; }

  /* ---------- Instalar App PWA ---------- */
  #seccion-instalar-app { padding: 34px 0 !important; }

  /* ---------- Footer / separación general ---------- */
  .page-content > section,
  .page-content > div.section-full { margin-bottom: 0; }
}