/* ===================================================================== * GVIA - Responsive mobile-first (Fase 5) * dvb 25/05/2026 * * CSS ADITIVO. NO se modifica nada del CSS existente (bootstrap, agency, * _gvia, etc.). Solo se anaden overrides que aplican en mobile/tablet. * * Estrategia: * - Mobile-first: las reglas usan @media (max-width: ...) para anular * valores desktop solo cuando el viewport es chico. * - Scoping por pagina: * para reglas especificas por seccion sin afectar otras. * - Breakpoints alineados con Bootstrap 3: * sm: <=768px * xs: <=480px * ===================================================================== */ /* ===================================================================== * 1. Mejoras globales mobile (aplican a todas las paginas) * ===================================================================== */ @media (max-width: 768px) { /* Tipografia mas legible en mobile */ body { -webkit-text-size-adjust: 100%; } /* Headings mas chicos en mobile */ h1 { font-size: 26px !important; line-height: 1.2 !important; } h2 { font-size: 22px !important; line-height: 1.2 !important; } h3 { font-size: 18px !important; line-height: 1.3 !important; } h4 { font-size: 16px !important; line-height: 1.3 !important; } /* Containers con menos padding */ .container, .container-fluid { padding-left: 12px !important; padding-right: 12px !important; } /* Imagenes responsive forzadas */ img { max-width: 100%; height: auto; } /* Botones touch-friendly (minimo 44px Apple HIG) */ .btn, button { min-height: 44px; padding-top: 10px; padding-bottom: 10px; } .btn-xs, .btn-sm { min-height: 36px; } /* Forms touch-friendly */ input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="password"], select, textarea { font-size: 16px !important; /* evita zoom automatico iOS */ min-height: 44px; } /* Tablas scrollables horizontalmente para no romper layout */ .table-responsive, table { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Espaciado vertical mas comodo entre secciones */ section { padding-top: 30px; padding-bottom: 30px; } /* Modales: full screen en mobile para mejor UX */ .modal-dialog { margin: 10px; width: auto !important; } .modal-dialog.modal-lg { width: auto !important; } } @media (max-width: 480px) { h1 { font-size: 22px !important; } h2 { font-size: 19px !important; } .container, .container-fluid { padding-left: 10px !important; padding-right: 10px !important; } } /* ===================================================================== * 2. HOME (index.php) - prioridad 1 * ===================================================================== */ @media (max-width: 768px) { body.page-index header.intro, body.page-index header { min-height: 60vh; padding: 40px 15px; text-align: center; } body.page-index .intro-heading { font-size: 32px !important; line-height: 1.15 !important; margin-bottom: 15px; } body.page-index .intro-lead-in { font-size: 16px !important; margin-bottom: 20px; } /* Secciones apiladas en lugar de grids */ body.page-index .row > [class*="col-"] { margin-bottom: 20px; } /* Cards de servicios full-width */ body.page-index .col-md-4, body.page-index .col-sm-4 { width: 100% !important; margin-bottom: 25px; } /* Footer condensado */ body.page-index footer .col-md-4 { text-align: center; margin-bottom: 20px; } } /* ===================================================================== * 3. LISTADO DE PROPIEDADES (propiedades.php) - prioridad 2 * ===================================================================== */ @media (max-width: 768px) { /* Filtros: colapsables. Por defecto ocultos, boton para mostrar. */ body.page-propiedades #propiedades_filtro .hideWhenScreenIsSmall { display: none; } body.page-propiedades #propiedades_filtro.gv-filters-open .hideWhenScreenIsSmall { display: block !important; } /* Boton "Ver mas filtros" full-width y prominente */ body.page-propiedades .btnFilterShowHide { display: block !important; width: 100%; margin: 10px 0; font-size: 15px; font-weight: 600; background-color: #be272d !important; color: #fff !important; border-color: #be272d !important; } /* Grid de propiedades: 1 columna en mobile */ body.page-propiedades .propiedad_box_item, body.page-propiedades .mt-element-overlay .col-sm-4, body.page-propiedades .mt-element-overlay .col-md-4, body.page-propiedades .mt-element-overlay .col-sm-3, body.page-propiedades .mt-element-overlay .col-md-3 { width: 100% !important; margin-bottom: 20px; } /* Cards de propiedad - mejor presentacion */ body.page-propiedades .propiedad_box_item { padding: 0 !important; } body.page-propiedades .propiedad_box_imagen { width: 100% !important; height: auto !important; max-height: 240px; object-fit: cover; } body.page-propiedades .propiedad_box_texto { padding: 12px; } body.page-propiedades .propiedad_box_precio { font-size: 18px !important; font-weight: 700; display: block; margin-top: 4px; color: #be272d; } /* Tabla con info debajo de foto (modo lista detallado) */ body.page-propiedades .mix-inner table { width: 100% !important; font-size: 13px; } /* Imagen del grid en lista: full width, alto fijo razonable */ body.page-propiedades img.resize { height: auto !important; max-height: 280px; width: 100% !important; object-fit: cover; } /* Paginacion touch-friendly */ body.page-propiedades .pagination > li > a { padding: 12px 16px; font-size: 15px; min-height: 44px; } } @media (min-width: 769px) { /* En desktop, siempre mostrar filtros */ body.page-propiedades #propiedades_filtro .hideWhenScreenIsSmall { display: block !important; } /* Ocultar el boton "Ver mas filtros" en desktop */ body.page-propiedades .btnFilterShowHide { display: none !important; } } /* ===================================================================== * 4. DETALLE DE PROPIEDAD (propiedad.php) - prioridad 3 * ===================================================================== */ @media (max-width: 768px) { /* Galeria de fotos full-width */ body.page-propiedad .carousel, body.page-propiedad .carousel-inner, body.page-propiedad .carousel-inner img { width: 100% !important; } body.page-propiedad .carousel-inner img { max-height: 350px; object-fit: cover; } /* Info de la propiedad apilada */ body.page-propiedad .col-md-8, body.page-propiedad .col-md-4, body.page-propiedad .col-sm-8, body.page-propiedad .col-sm-4 { width: 100% !important; padding: 0 12px !important; } /* Precio mas grande en mobile */ body.page-propiedad .pro-precio, body.page-propiedad .precio, body.page-propiedad h1 + .precio { font-size: 24px !important; font-weight: 700; color: #be272d; } /* Tabla de caracteristicas: 2 columnas (no 4) */ body.page-propiedad .caracteristicas td, body.page-propiedad .pro_caracteristicas td { display: block; width: 100% !important; text-align: left; padding: 6px 10px; } /* Tarjeta del asesor: full width, foto + datos apilados */ body.page-propiedad .asesor-card, body.page-propiedad .pro-asesor { text-align: center; padding: 20px; margin: 20px 0; } /* CTA "Contactar asesor" sticky en bottom para conversion */ body.page-propiedad .btn-contactar, body.page-propiedad .btn-primary[onclick*="modal"] { position: fixed; bottom: 0; left: 0; right: 0; width: 100%; border-radius: 0; margin: 0; z-index: 1000; box-shadow: 0 -2px 10px rgba(0,0,0,0.2); background-color: #be272d !important; color: #fff !important; border: none; font-weight: 700; font-size: 16px; padding: 14px; } /* Padding bottom para que el CTA fijo no tape contenido */ body.page-propiedad { padding-bottom: 70px; } /* Mapa: altura razonable en mobile */ body.page-propiedad #map, body.page-propiedad .map-container { height: 250px !important; margin: 15px 0; } } /* ===================================================================== * 5. Navegacion (aplica a todas las paginas) * ===================================================================== */ @media (max-width: 768px) { .navbar-brand img, .navbar-brand { max-height: 50px; } .navbar-nav > li > a { padding-top: 14px; padding-bottom: 14px; } } /* ===================================================================== * 6. Utilidades de visibilidad * ===================================================================== */ .gv-mobile-only { display: none !important; } .gv-desktop-only { display: block !important; } @media (max-width: 768px) { .gv-mobile-only { display: block !important; } .gv-desktop-only { display: none !important; } }