/* /assets/css/mobile.css  v2
   Mejoras responsive para móvil y tablet.
   - Evita desbordes horizontales
   - Imágenes fluidas
   - Inputs sin zoom en iPhone
   - Botones cómodos
   - Tipografía adaptada
   - Touch targets adecuados
   - Rendimiento: desactiva backdrop-filter pesados
*/

*{ box-sizing:border-box; }

html, body{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}

img, video, iframe{
  max-width:100%;
  height:auto;
  display:block;
}

/* Previene overflow en textos largos (URLs, emails, etc.) */
p, li, td, dd, blockquote, h1, h2, h3, h4{
  overflow-wrap: break-word;
  word-break: break-word;
}

input, select, textarea, button{
  font-size:16px; /* evita zoom iOS */
}

button, .btn, input[type="submit"], input[type="button"]{
  min-height:44px;
}

/* =========================================
   TABLET (≤ 1024px)
   ========================================= */
@media (max-width: 1024px){
  /* Contenedor: menos padding lateral en tablet */
  .container, .sgHero__inner, .seoHero__grid{
    padding-left:18px;
    padding-right:18px;
  }
}

/* =========================================
   MÓVIL GRANDE / TABLET PEQUEÑA (≤ 768px)
   ========================================= */
@media (max-width: 768px){
  /* Ajuste general de secciones con paddings excesivos */
  section{ scroll-margin-top: 84px; }

  /* Evita que algún bloque rígido rompa el ancho */
  [style*="width:1200px"], [style*="width: 1200px"]{
    width:100% !important;
    max-width:100% !important;
  }

  /* Rendimiento: blur/backdrop-filter penaliza en móviles */
  .air-search,
  .sgBottomNav,
  .searchSection .air-search{
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: rgba(255,255,255,.96) !important;
  }

  /* Evita filtros pesados en imágenes */
  [data-blur]{ filter:none !important; }

  /* --- Buscador homepage: apila campos en móvil --- */
  .air-search{
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    padding: 8px 12px !important;
    border-radius: 16px !important;
  }
  .air-field{
    border-right: none !important;
    border-bottom: 1px solid rgba(229,231,235,.8);
    padding: 10px 4px !important;
  }
  .air-field:last-of-type{ border-bottom: none !important; }
  .air-btn{ width:100% !important; margin-top:8px; border-radius:14px !important; }

  /* --- Hero homepage: título más pequeño en móvil --- */
  .heroTitle, .hero h1, .hero__title{
    font-size: clamp(26px, 7.5vw, 36px) !important;
    line-height: 1.12 !important;
  }

  /* --- Landing SEO: hero padding más ajustado --- */
  .seoHero{ padding: 28px 0 12px !important; }
  .seoH1{ font-size: clamp(26px, 7.5vw, 40px) !important; line-height: 1.08 !important; }
  .seoSub{ font-size: 15px !important; }

  /* --- Touch targets: botones de landing --- */
  .seoBtn{
    min-height: 46px !important;
    padding: 12px 18px !important;
    font-size: 15px !important;
  }
  .seoLink{
    min-height: 40px;
    padding: 9px 14px;
    display: inline-flex;
    align-items: center;
  }
  .seoZone{
    padding: 14px !important;
    min-height: 72px;
  }

  /* --- Secciones landing: menos espaciado vertical --- */
  .seoSection{
    padding: 24px 0 !important;
  }
  .seoSection--alt{
    padding: 24px 0 !important;
  }

  /* --- FAQ de landing: touch targets cómodos --- */
  .seoFaq details summary{
    padding: 14px 16px !important;
    font-size: 15px !important;
    min-height: 52px;
    display: flex;
    align-items: center;
  }
  .seoFaq details > div{
    padding: 0 16px 14px !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
  }

  /* --- Grid de zonas: 2 columnas en lugar de más --- */
  .seoZones{
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  /* --- Grid de seoGrid (cómo elegir): 1 columna en móvil --- */
  .seoGrid{
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  /* --- Tarjetas de propiedad en listado: ajuste de imagen --- */
  .propCard, .prop-card, .landingPropCard{
    border-radius: 16px;
  }
}

/* =========================================
   MÓVIL PEQUEÑO (≤ 520px)
   ========================================= */
@media (max-width: 520px){
  /* Reduce padding lateral en contenedores generales */
  .container, .sgHero__inner{
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* Landing: zonas en 1 columna */
  .seoZones{
    grid-template-columns: 1fr !important;
  }

  /* Badges de landing: más pequeños */
  .seoBadge{
    font-size: 12px !important;
    padding: 6px 10px !important;
  }

  /* Tarjetas de info (seoCard) */
  .seoCards{
    gap: 8px !important;
  }
  .seoCard{
    padding: 12px !important;
    border-radius: 14px !important;
  }

  /* Tipografía general */
  .seoH2{
    font-size: clamp(20px, 6.5vw, 28px) !important;
    line-height: 1.15 !important;
  }
}

/* =========================================
   PREFERENCIA: reduce movimiento (accesibilidad)
   ========================================= */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}