/* ==========================================================================
   BÁRCENAS URBANISMO Y CONSTRUCCIONES
   Archivo: css/responsive.css
   Descripción: Adaptabilidad fluida de alto rendimiento para iPhone 16 Pro Max,
   iOS Safari, Android High-DPI, Tablets, Laptops (2560x1600) y Ultrawide.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. PANTALLAS DE ALTA RESOLUCIÓN / LAPTOPS 15" (2560x1600) Y ULTRAWIDE
   -------------------------------------------------------------------------- */
@media (min-width: 1440px) {
  .contenedor {
    max-width: 1240px;
  }

  .hero-titulo-principal {
    font-size: 2.7rem !important;
  }

  .hero-tarjeta-resumen {
    padding: 2.2rem !important;
  }
}

/* --------------------------------------------------------------------------
   2. DESKTOP / LAPTOPS ESTÁNDAR (1025px - 1439px)
   -------------------------------------------------------------------------- */
@media (max-width: 1439px) and (min-width: 1025px) {
  .contenedor {
    max-width: 1100px;
  }

  .hero-titulo-principal {
    font-size: 2.4rem !important;
  }
}

/* --------------------------------------------------------------------------
   3. TABLETS (769px - 1024px)
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .header-contenedor {
    height: 75px;
  }

  .hero-seccion-optimizada {
    padding-top: 130px !important;
  }

  .hero-titulo-principal {
    font-size: 2.2rem !important;
  }

  .hero-tarjeta-resumen {
    padding: 1.6rem !important;
  }

  .visor-banner-grande {
    height: 480px !important;
  }
}

/* --------------------------------------------------------------------------
   4. DISPOSITIVOS MÓVILES (iPhone 16 Pro Max, iOS Safari, Android < 768px)
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  html {
    font-size: 16px !important; /* Ajuste suave de base tipográfica para pantallas portátiles */
  }

  .seccion {
    padding: 2.25rem 0 !important;
  }

  .header-principal {
    background-color: rgba(27, 67, 50, 0.98) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    backdrop-filter: blur(14px) !important;
  }

  .header-contenedor {
    height: 68px !important;
    padding: 0 0.85rem !important;
  }

  .logo-imagen-oficial {
    height: 42px !important;
  }

  .logo-texto {
    font-size: 1.05rem !important;
  }

  .header-btn-whatsapp {
    display: none !important;
  }

  /* Menú Navegación Móvil (Drawer) con Safe Area iOS */
  .boton-menu-movil {
    display: block !important;
    background: var(--color-accent) !important;
    color: #FFF !important;
    border: none !important;
    border-radius: var(--radio-pill) !important;
    padding: 0.4rem 0.95rem !important;
    font-size: 0.95rem !important;
    font-weight: 800 !important;
    cursor: pointer !important;
    box-shadow: 0 3px 10px rgba(200, 109, 81, 0.35) !important;
  }

  .menu-navegacion {
    position: fixed !important;
    top: 68px !important;
    left: -100% !important;
    width: 100% !important;
    height: calc(100dvh - 68px) !important;
    background-color: var(--color-primary) !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 1.8rem !important;
    padding: 2rem 1.5rem !important;
    padding-top: max(2rem, env(safe-area-inset-top)) !important;
    padding-bottom: max(2rem, env(safe-area-inset-bottom)) !important;
    transition: left 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
    z-index: 9999 !important;
  }

  .menu-navegacion.activo {
    left: 0 !important;
  }

  .menu-navegacion a {
    font-size: 1.25rem !important;
    color: #FFFFFF !important;
    font-weight: 700 !important;
  }

  /* SECCIÓN MAPA Y GALERÍA FOTOGRÁFICA (OPTIMIZADA IPHONE 16 PRO MAX) */
  #mapa {
    padding-top: 2rem !important;
  }

  .visor-principal-contenedor {
    margin-bottom: 1.2rem !important;
    border-radius: var(--radio-md) !important;
  }

  .visor-banner-grande {
    height: 330px !important;
    width: 100% !important;
    border-radius: var(--radio-md) !important;
    background: #0D1B15 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .visor-banner-grande img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }

  /* Panel de Zoom Móvil Externo Limpio */
  .panel-zoom-controles {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    margin: 0.75rem 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    flex-wrap: wrap !important;
    gap: 0.4rem !important;
    padding: 0.5rem 0.65rem !important;
    border-radius: var(--radio-md) !important;
    background: var(--color-primary) !important;
    justify-content: center !important;
    border: 1.5px solid var(--color-accent) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important;
  }

  .btn-zoom-ctrl {
    padding: 0.3rem 0.6rem !important;
    font-size: 0.78rem !important;
    border-radius: var(--radio-sm) !important;
    white-space: nowrap !important;
  }

  .range-zoom-slider {
    width: 80px !important;
  }

  .badge-zoom-porcentaje {
    font-size: 0.78rem !important;
    min-width: 34px !important;
  }

  /* Navegación del Visor en Celular */
  .visor-nav-btn {
    width: 38px !important;
    height: 38px !important;
    font-size: 1.1rem !important;
  }

  .visor-nav-prev { left: 0.4rem !important; }
  .visor-nav-next { right: 0.4rem !important; }

  .visor-contador-badge {
    font-size: 0.75rem !important;
    padding: 0.25rem 0.75rem !important;
    top: 0.5rem !important;
    right: 0.5rem !important;
  }

  .visor-banner-titulo {
    font-size: 0.95rem !important;
    padding: 0.5rem 0.75rem !important;
    line-height: 1.35 !important;
  }

  /* Galería de Miniaturas Fotográficas */
  .galeria-renders {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.75rem !important;
  }

  .tarjeta-render {
    height: 115px !important;
    border-radius: var(--radio-sm) !important;
  }

  .render-overlay {
    font-size: 0.72rem !important;
    padding: 0.35rem 0.5rem !important;
    line-height: 1.3 !important;
  }

  /* SECCIÓN PLANO INTERACTIVO EN CELULARES */
  #loteo-en-vivo {
    padding-top: 85px !important;
  }

  #loteo-en-vivo .contenedor > div {
    height: auto !important;
    min-height: 480px !important;
  }

  #loteo-en-vivo iframe {
    height: 520px !important;
    margin-top: -55px !important;
  }

  /* BOTONES Y FORMULARIOS EN CELULAR */
  .btn {
    width: 100% !important;
    padding: 0.9rem 1.25rem !important;
    font-size: 0.98rem !important;
  }

  .formulario-box {
    padding: 1.25rem !important;
  }

  div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}