"crece" para ocupar todo el espacio libre */ } body > footer.cm-footer { flex-shrink: 0; /* el footer nunca se encoge ni flota, se queda al final */ } /* ============================================================ SOLUCIÓN 2: Layout de altura FIJA solo para /Properties (listado) En vez de adivinar la altura del navbar en px (lo que hacíamos con calc(100vh - 76px), dejamos que Flexbox reparta el espacio automáticamente: el navbar mide lo que necesite (flex-shrink:0), y el

ocupa EXACTAMENTE lo que sobra, sin importar cuánto mida el navbar real. ============================================================ */ body.cm-pagina-fija { height: 100vh; overflow: hidden; /* nada de scroll en el completo */ } body.cm-pagina-fija header { flex-shrink: 0; /* el navbar no se encoge, mide su alto normal */ } body.cm-pagina-fija > main { flex: 1 1 auto; overflow: hidden; /* el

no scrollea; scrollean SUS HIJOS internos */ display: flex; /* para que .cm-listing-wrap pueda usar height:100% */ } body.cm-pagina-fija .cm-listing-wrap { height: 100%; /* ya no es calc(100vh - 76px), ahora es "todo lo que quede" */ width: 100%; } /* En celular no queremos este comportamiento "app fija" (es más cómodo el scroll normal de toda la página), así que lo desactivamos ahí */ @media (max-width: 991.98px) { body.cm-pagina-fija { height: auto; overflow: visible; } body.cm-pagina-fija > main { overflow: visible; display: block; } } /* ============================================================ NAVBAR ============================================================ */ /* Sobreescribimos el navbar-light bg-white de Bootstrap con nuestro estilo */ .cm-navbar { background: #fff !important; padding-top: 14px; padding-bottom: 14px; box-shadow: var(--shadow-soft); } .cm-logo { font-weight: 700; font-size: 1.5rem; color: var(--cm-primary) !important; letter-spacing: 0.5px; } .cm-logo span { color: var(--cm-accent); } /* Los links del menú (sobreescribe el .nav-link text-dark de Bootstrap) */ .cm-nav-links .nav-link { font-weight: 500; color: var(--cm-text) !important; padding: 8px 16px !important; border-bottom: 2px solid transparent; transition: color .2s, border-color .2s; } .cm-nav-links .nav-link:hover, .cm-nav-links .nav-link.active { color: var(--cm-primary) !important; border-bottom-color: var(--cm-accent); } /* Selector de idioma (banderas) */ .cm-lang-switch { display: flex; gap: 4px; align-items: center; } .cm-lang-flag { font-size: 1.25rem; padding: 4px 6px; border-radius: 6px; opacity: .45; filter: grayscale(60%); transition: all .2s; line-height: 1; text-decoration: none; } .cm-lang-flag:hover { opacity: .8; } .cm-lang-flag.active { opacity: 1; filter: none; background: var(--cm-sand); } /* Botones de acción (CTA) reutilizables en toda la página */ .cm-btn-primary { background: var(--cm-accent) !important; border-color: var(--cm-accent) !important; color: #fff !important; border-radius: 999px !important; font-weight: 600; padding: 8px 20px !important; } .cm-btn-primary:hover { background: var(--cm-accent-dark) !important; border-color: var(--cm-accent-dark) !important; } .cm-btn-outline { background: transparent !important; border: 1.5px solid var(--cm-primary) !important; color: var(--cm-primary) !important; border-radius: 999px !important; font-weight: 600; } .cm-btn-outline:hover { background: var(--cm-primary) !important; color: #fff !important; } /* ============================================================ HERO (lo usaremos en el Paso 3, ya lo dejamos listo) ============================================================ */ .cm-hero { position: relative; min-height: 70vh; background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; text-align: center; color: #fff; } /* Capa oscura semitransparente sobre la imagen de fondo, para que el texto blanco se lea bien */ .cm-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,56,54,.35) 0%, rgba(7,56,54,.65) 100%); } .cm-hero-content { position: relative; z-index: 2; max-width: 780px; padding: 0 20px; } .cm-hero h1 { font-size: 2.6rem; font-weight: 700; text-shadow: 0 2px 10px rgba(0,0,0,.3); } .cm-hero h2 { font-size: 1.2rem; font-weight: 300; opacity: .95; margin-bottom: 28px; } /* Barra de búsqueda flotante dentro del Hero */ .cm-search-bar { background: #fff; border-radius: 999px; padding: 8px; display: flex; flex-wrap: wrap; /* en pantallas chicas, los campos bajan de línea en vez de desbordar */ align-items: center; gap: 6px; box-shadow: 0 12px 30px rgba(0,0,0,.25); } .cm-search-bar select, .cm-search-bar input { border: none; outline: none; padding: 10px 16px; font-size: .95rem; color: var(--cm-text); background: transparent; flex: 1; min-width: 120px; /* evita que los campos se aplasten demasiado en móvil */ } .cm-search-bar .cm-divider { width: 1px; height: 26px; background: var(--cm-border); } .cm-search-bar button { background: var(--cm-primary); color: #fff; border: none; border-radius: 999px; width: 46px; height: 46px; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .cm-search-bar button:hover { background: var(--cm-primary-dark); } /* Footer */ .cm-footer { background: var(--cm-primary-dark); color: #fff; padding: 30px 0; margin-top: 40px; } .cm-footer a { color: #fff; } /* ============================================================ RESPONSIVE: ajustes para tablets y celulares ============================================================ */ /* Tablets (menos de 992px): Bootstrap ya colapsa el navbar solo (navbar-expand-lg), aquí solo ajustamos tamaños de texto para que no se vean gigantes */ @media (max-width: 991.98px) { .cm-hero h1 { font-size: 2.1rem; } .cm-hero h2 { font-size: 1.05rem; } /* Cuando el navbar está colapsado (menú hamburguesa abierto), separamos el selector de idioma y el botón de login para que no queden pegados al borde */ .cm-navbar-actions { margin-top: 12px; justify-content: flex-start !important; } } /* Celulares (menos de 576px) */ @media (max-width: 575.98px) { .cm-hero { min-height: 60vh; padding: 20px 0; } .cm-hero h1 { font-size: 1.7rem; } /* En pantallas muy angostas, el buscador se apila totalmente en columna */ .cm-search-bar { flex-direction: column; border-radius: 20px; align-items: stretch; } .cm-search-bar .cm-divider { display: none; } /* los separadores verticales no tienen sentido en columna */ .cm-search-bar button { width: 100%; border-radius: 12px; margin-top: 4px; } } /* ============================================================ NAVBAR TRANSPARENTE (solo en Home, flotando sobre el Hero) ============================================================ */ .cm-navbar-transparent { position: absolute; /* lo saca del flujo normal, así no empuja el Hero hacia abajo */ top: 0; left: 0; right: 0; background: transparent !important; box-shadow: none !important; z-index: 20; /* por encima de la imagen del Hero */ margin-bottom: 0 !important; } /* Mientras el navbar está transparente, el texto debe ser blanco para que se lea sobre la foto oscura del Hero */ .cm-navbar-transparent .cm-logo, .cm-navbar-transparent .cm-nav-links .nav-link, .cm-navbar-transparent .cm-lang-flag { color: #fff !important; } .cm-navbar-transparent .cm-logo span { color: var(--cm-accent); } /* el "More" sigue naranja */ /* El botón de hamburguesa (ícono de 3 rayitas) también debe verse blanco */ .cm-navbar-transparent .navbar-toggler { border-color: rgba(255,255,255,.7); } .cm-navbar-transparent .navbar-toggler-icon { filter: invert(1) brightness(2); /* invierte el color del ícono a blanco */ } /* Cuando el menú hamburguesa se abre en celular, SÍ necesita fondo sólido, si no el texto blanco quedaría invisible sobre la foto */ @media (max-width: 991.98px) { .cm-navbar-transparent .navbar-collapse.show, .cm-navbar-transparent .navbar-collapse.collapsing { background: var(--cm-primary-dark); padding: 16px; border-radius: 0 0 12px 12px; } } /* ============================================================ BANDERAS (flag-icons) dentro del selector de idioma ============================================================ */ .cm-lang-flag .fi { width: 24px; height: 18px; border-radius: 3px; display: inline-block; vertical-align: middle; } /* el estado "apagado"/"encendido" ahora se aplica sobre el ícono, no sobre texto */ .cm-lang-flag { opacity: .5; transition: opacity .2s; } .cm-lang-flag:hover { opacity: .8; } .cm-lang-flag.active { opacity: 1; } /* ============================================================ BARRA DE BÚSQUEDA: el input de ubicación necesita más espacio que los selects, para que no se corte el placeholder en inglés ============================================================ */ .cm-hero-content { max-width: 920px; } /* un poco más ancho que antes (780px) */ .cm-search-bar select { flex: 1; min-width: 110px; /* los selects no se encogen más de esto */ } .cm-search-bar input { flex: 2.5; /* el input de texto toma más del doble de espacio que un select */ min-width: 300px; } /* ============================================================ LISTADO DE PROPIEDADES: filtros fijos + resultados con scroll + mapa ============================================================ */ /* El "molde" general: 2 o 3 columnas según si el mapa está activo. height: calc(100vh - navbar) hace que ocupe toda la pantalla visible, y overflow:hidden evita que aparezca un scroll del navegador completo (cada columna interna maneja su propio scroll). */ .cm-listing-wrap { display: grid; grid-template-columns: 300px 1fr; overflow: hidden; } .cm-listing-wrap.con-mapa { grid-template-columns: 300px 1fr 1fr; /* 3ra columna = mapa */ } /* Columna de filtros: NO se mueve al hacer scroll en los resultados */ .cm-filters-panel { border-right: 1px solid var(--cm-border); background: #fff; padding: 24px 20px; overflow-y: auto; /* si los filtros no caben, esta columna scrollea SOLA */ height: 100%; } .cm-filters-panel h5 { font-weight: 700; margin-bottom: 18px; } .cm-filter-group { margin-bottom: 16px; } .cm-filter-group label { display: block; font-size: .78rem; font-weight: 600; color: var(--cm-text-muted); text-transform: uppercase; letter-spacing: .3px; margin-bottom: 6px; } .cm-filter-group select, .cm-filter-group input { width: 100%; padding: 9px 12px; border: 1px solid var(--cm-border); border-radius: 8px; font-size: .88rem; background: var(--cm-sand); } .cm-filter-row { display: flex; gap: 8px; } .cm-filter-apply { width: 100%; margin-top: 6px; background: var(--cm-primary); color: #fff; border: none; padding: 10px; border-radius: 8px; font-weight: 600; cursor: pointer; } .cm-filter-apply:hover { background: var(--cm-primary-dark); } /* Columna central: la lista de resultados. Esta SÍ hace scroll, independiente de los filtros y del navbar. */ .cm-results-panel { overflow-y: auto; height: 100%; padding: 20px 28px; } /* Cabecera de resultados (contador + orden + chips) se queda "pegada" arriba de esa columna mientras se scrollea la lista */ .cm-results-header { position: sticky; top: 0; background: var(--cm-sand); padding: 10px 0 16px; z-index: 5; } .cm-results-count { font-weight: 700; font-size: 1.05rem; } /* Chips de filtros activos */ .cm-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .cm-chip { display: inline-flex; align-items: center; gap: 8px; background: var(--cm-primary-light); color: #fff; padding: 6px 12px; border-radius: 999px; font-size: .8rem; font-weight: 500; } .cm-chip button { background: rgba(255,255,255,.25); border: none; color: #fff; border-radius: 50%; width: 18px; height: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: .7rem; } .cm-chip button:hover { background: rgba(255,255,255,.45); } .cm-chip-clear { background: transparent; color: var(--cm-accent-dark); border: 1px solid var(--cm-accent); cursor: pointer; } /* Cada tarjeta de resultado (foto + info + botón) */ .cm-result-item { display: grid; grid-template-columns: 220px 1fr auto; gap: 20px; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-card); overflow: hidden; margin-bottom: 16px; } .cm-result-item img { width: 100%; height: 100%; object-fit: cover; min-height: 150px; } .cm-result-body { padding: 16px 0; } .cm-result-actions { display: flex; align-items: center; padding-right: 20px; } /* Mapa: ocupa toda la 3ra columna, se queda fijo también */ .cm-map-panel { height: 100%; } #cmMap { width: 100%; height: 100%; } /* El interruptor "Ver Mapa" (checkbox estilizado como toggle) */ .cm-map-toggle { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 600; font-size: .9rem; } .cm-switch { width: 42px; height: 22px; background: var(--cm-border); border-radius: 999px; position: relative; transition: background .2s; } .cm-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; background: #fff; border-radius: 50%; transition: transform .2s; } .cm-switch-input { display: none; } .cm-switch-input:checked + .cm-switch { background: var(--cm-primary); } .cm-switch-input:checked + .cm-switch::after { transform: translateX(20px); } /* En pantallas chicas, el diseño de 3 columnas no cabe: lo apilamos todo */ @media (max-width: 991.98px) { .cm-listing-wrap, .cm-listing-wrap.con-mapa { grid-template-columns: 1fr; height: auto; } .cm-filters-panel, .cm-results-panel, .cm-map-panel { height: auto; } .cm-result-item { grid-template-columns: 1fr; } } /* ============================================================ PÁGINA DE DETALLE ============================================================ */ .cm-detail-wrap { max-width: 1300px; margin: 0 auto; padding: 30px 20px 80px; } .cm-breadcrumb { font-size: .85rem; color: var(--cm-text-muted); margin-bottom: 18px; } .cm-breadcrumb a { color: var(--cm-primary); font-weight: 500; } /* Galería: 1 foto grande a la izquierda + 4 fotos chicas a la derecha, en cuadrícula */ .cm-gallery { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 10px; border-radius: var(--radius); overflow: hidden; height: 420px; } .cm-gallery img { width: 100%; height: 100%; object-fit: cover; } .cm-gallery .main { grid-row: span 2; } /* la foto principal ocupa 2 filas de alto */ .cm-detail-grid { display: grid; grid-template-columns: 1.7fr 1fr; gap: 34px; margin-top: 30px; } .cm-price-tag { font-size: 2rem; font-weight: 700; color: var(--cm-primary); } .cm-detail-title { font-size: 1.4rem; font-weight: 700; margin: 6px 0 4px; } .cm-detail-loc { color: var(--cm-text-muted); margin-bottom: 18px; } /* Barra horizontal con los números clave (m², recámaras, baños, parqueos) */ .cm-feature-bar { display: flex; gap: 26px; padding: 18px 0; border-top: 1px solid var(--cm-border); border-bottom: 1px solid var(--cm-border); margin: 20px 0; flex-wrap: wrap; } .cm-feature { text-align: center; } .cm-feature b { display: block; font-size: 1.1rem; color: var(--cm-primary); } .cm-feature span { font-size: 1.3rem; color: var(--cm-text-muted); } .cm-amenities { display: flex; flex-wrap: wrap; gap: 12px; margin: 20px 0; } .cm-amenity { display: flex; align-items: center; gap: 6px; background: var(--cm-sand); padding: 8px 14px; border-radius: 8px; font-size: 1.2rem; } /* Tour virtual: el iframe ocupa todo el ancho disponible */ .cm-tour-wrap { margin: 30px 0; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-card); } .cm-tour-wrap iframe { width: 100%; height: 480px; border: none; display: block; } /* Ficha del agente + botones de contacto, "pegada" mientras se scrollea la descripción */ .cm-agent-card { background: #fff; border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow-card); position: sticky; top: 90px; } .cm-agent-header { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; } .cm-agent-header img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; } .cm-agent-header h5 { margin: 0; font-size: 1rem; } .cm-agent-header span { font-size: .8rem; color: var(--cm-text-muted); } .cm-btn-cta { width: 100%; padding: 14px; border: none; border-radius: 8px; background: var(--cm-accent); color: #fff; font-weight: 700; font-size: 1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; } .cm-btn-cta:hover { background: var(--cm-accent-dark); color: #fff; } .cm-btn-schedule { width: 100%; margin-top: 14px; padding: 14px; border-radius: 8px; background: var(--cm-primary); color: #fff; font-weight: 700; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; } .cm-btn-schedule:hover { background: var(--cm-primary-dark); color: #fff; } /* Responsive: en pantallas chicas la galería y las 2 columnas se apilan */ @media (max-width: 991.98px) { .cm-detail-grid { grid-template-columns: 1fr; } .cm-gallery { grid-template-columns: 1fr; height: auto; } .cm-gallery img { height: 220px; } .cm-agent-card { position: static; } } /* ============================================================ FORMULARIO DE AGENDAR CITA ============================================================ */ .cm-form-section h4 { font-size: 1.05rem; font-weight: 700; color: var(--cm-primary); margin: 26px 0 14px; padding-bottom: 8px; border-bottom: 1px solid var(--cm-border); } .cm-form-section:first-child h4 { margin-top: 0; } .cm-form-input { width: 100%; padding: 11px 14px; margin-bottom: 4px; border: 1px solid var(--cm-border); border-radius: 8px; font-size: .9rem; background: var(--cm-sand); } .cm-form-label { display: block; font-size: .82rem; font-weight: 600; color: var(--cm-text-muted); margin-bottom: 6px; } .cm-form-error { color: #c0392b; font-size: .78rem; margin-bottom: 10px; display: block; } /* Contenedor de las filas de acompañantes, generadas por JS */ #acompanantesContenedor .row { margin-bottom: 4px; } .cm-btn-submit { width: 100%; padding: 15px; border: none; border-radius: 8px; background: var(--cm-accent); color: #fff; font-weight: 700; font-size: 1rem; cursor: pointer; margin-top: 20px; } .cm-btn-submit:hover { background: var(--cm-accent-dark); } /* Aviso de campo dependiente ("Otro: especifique") */ .cm-campo-otro { display: none; margin-top: 8px; } .cm-campo-otro.visible { display: block; } /* ============================================================ TABLA ADMINISTRATIVA DE CLIENTES ============================================================ */ .cm-admin-wrap { max-width: 1300px; margin: 0 auto; padding: 30px 20px 80px; } .cm-admin-table-card { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-card); overflow: hidden; } .cm-admin-table { width: 100%; border-collapse: collapse; } .cm-admin-table thead th { background: var(--cm-sand); text-align: left; padding: 14px; font-size: .78rem; text-transform: uppercase; letter-spacing: .3px; color: var(--cm-text-muted); } .cm-admin-table tbody td { padding: 14px; border-top: 1px solid var(--cm-border); vertical-align: middle; } .cm-admin-table tbody tr:hover { background: var(--cm-sand); } /* Etiqueta de estado con color según el valor */ .cm-badge-estado { display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: .78rem; font-weight: 600; } .cm-badge-Pendiente { background: #fff3cd; color: #8a6d00; } .cm-badge-Confirmada { background: #d4edda; color: #1e6b3d; } .cm-badge-Cancelada { background: #f8d7da; color: #a02733; } .cm-badge-Completada { background: #d6e4ff; color: #1a3e8a; } /* Ficha de detalle del cliente */ .cm-client-card { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-card); padding: 26px; margin-bottom: 20px; } .cm-client-card h4 { font-size: 1rem; font-weight: 700; color: var(--cm-primary); margin-bottom: 14px; padding-bottom: 8px; border-bottom: 1px solid var(--cm-border); } .cm-client-field { margin-bottom: 10px; } .cm-client-field label { display: block; font-size: .75rem; color: var(--cm-text-muted); text-transform: uppercase; } .cm-client-field span { font-size: .95rem; } /* ============================================================ CARRUSEL DE PROPIEDADES DESTACADAS (Home) ============================================================ */ #carruselDestacadas .carousel-control-prev, #carruselDestacadas .carousel-control-next { width: 44px; height: 44px; top: 50%; transform: translateY(-50%); background: var(--cm-primary); border-radius: 50%; opacity: .9; } #carruselDestacadas .carousel-control-prev { left: -10px; } #carruselDestacadas .carousel-control-next { right: -10px; } #carruselDestacadas .carousel-control-prev:hover, #carruselDestacadas .carousel-control-next:hover { background: var(--cm-primary-dark); opacity: 1; } /* En pantallas chicas, las flechas se ven mejor pegadas al borde en vez de "flotando" afuera */ @media (max-width: 767.98px) { #carruselDestacadas .carousel-control-prev { left: 4px; } #carruselDestacadas .carousel-control-next { right: 4px; } } /* ============================================================ TARJETA DE PROPIEDAD CON CARRUSEL (usada en Home y en Listado) ============================================================ */ .cm-property-card { background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-card); transition: transform .2s, box-shadow .2s; height: 100%; display: flex; flex-direction: column; } .cm-property-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(28,35,33,.14); } /* ============================================================ Slider de fotos de la tarjeta (propio, NO es el Carousel de Bootstrap — evita el bug de carruseles anidados) ============================================================ */ .cm-photo-slider { position: relative; height: 210px; overflow: hidden; } .cm-photo-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .3s ease; } .cm-photo-slide.active { opacity: 1; } .cm-photo-prev, .cm-photo-next { position: absolute; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border: none; border-radius: 50%; background: rgba(0,0,0,.35); opacity: 0; transition: opacity .2s; display: flex; align-items: center; justify-content: center; z-index: 4; cursor: pointer; } .cm-photo-slider:hover .cm-photo-prev, .cm-photo-slider:hover .cm-photo-next { opacity: 1; } .cm-photo-prev { left: 8px; } .cm-photo-next { right: 8px; } .cm-photo-prev .carousel-control-prev-icon, .cm-photo-next .carousel-control-next-icon { width: 16px; height: 16px; } .cm-badge { position: absolute; top: 12px; left: 12px; z-index: 5; background: var(--cm-primary); color: #fff; font-size: .7rem; font-weight: 600; padding: 5px 12px; border-radius: 999px; } .cm-badge-op { position: absolute; top: 12px; right: 12px; z-index: 5; background: var(--cm-accent); color: #fff; font-size: .7rem; font-weight: 600; padding: 5px 12px; border-radius: 999px; } .cm-card-body-link { text-decoration: none; color: inherit; flex: 1; display: flex; } .cm-card-body { padding: 16px 18px; flex: 1; display: flex; flex-direction: column; } .cm-card-body .cm-loc { font-size: .78rem; color: var(--cm-text-muted); margin-bottom: 4px; } .cm-card-body h5 { font-size: 1rem; margin: 0 0 10px; color: var(--cm-text); line-height: 1.3; } .cm-card-meta { display: flex; gap: 12px; font-size: .78rem; color: var(--cm-text-muted); margin-bottom: 12px; flex-wrap: wrap; } .cm-card-price { margin-top: auto; font-size: 1.15rem; font-weight: 700; color: var(--cm-primary); } /* Grid de 2 columnas para el LISTADO (/Properties), estilo Century21 */ .cm-grid-cards-2col { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; } @media (max-width: 767.98px) { .cm-grid-cards-2col { grid-template-columns: 1fr; } } /* ============================================================ GALERÍA DEL DETALLE: miniaturas clicables + aviso "+N fotos" ============================================================ */ .cm-gallery-thumb { position: relative; cursor: pointer; overflow: hidden; } .cm-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; } .cm-gallery-thumb:hover img { transform: scale(1.05); } .cm-gallery-more { position: absolute; inset: 0; background: rgba(0,0,0,.55); color: #fff; font-size: 1.6rem; font-weight: 700; display: flex; align-items: center; justify-content: center; } .cm-gallery .main { cursor: pointer; } /* ============================================================ GRID DE 4 COLUMNAS para el carrusel de Destacadas (Home) Usamos CSS Grid puro (no Bootstrap row/col) para evitar inconsistencias — es el MISMO enfoque que ya usamos en el grid de 2 columnas del listado (.cm-grid-cards-2col), que sabemos que funciona bien. ============================================================ */ .cm-grid-cards-4col { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; padding: 0 20px; } @media (max-width: 991.98px) { .cm-grid-cards-4col { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 575.98px) { .cm-grid-cards-4col { grid-template-columns: 1fr; } } /* ============================================================ BOTÓN FLOTANTE DE WHATSAPP ============================================================ */ .cm-whatsapp-float { position: fixed; bottom: 24px; right: 24px; width: 58px; height: 58px; background: #25D366; /* verde oficial de WhatsApp */ color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; box-shadow: 0 6px 18px rgba(0,0,0,.3); z-index: 1000; /* por encima de casi todo, incluso del navbar */ text-decoration: none; transition: transform .2s, box-shadow .2s; animation: cm-whatsapp-pulse 2.4s infinite; } .cm-whatsapp-float:hover { transform: scale(1.08); color: #fff; box-shadow: 0 8px 22px rgba(0,0,0,.4); } /* Efecto de "pulso" sutil para llamar la atención sin ser molesto */ @keyframes cm-whatsapp-pulse { 0% { box-shadow: 0 6px 18px rgba(0,0,0,.3), 0 0 0 0 rgba(37,211,102,.5); } 70% { box-shadow: 0 6px 18px rgba(0,0,0,.3), 0 0 0 14px rgba(37,211,102,0); } 100% { box-shadow: 0 6px 18px rgba(0,0,0,.3), 0 0 0 0 rgba(37,211,102,0); } } @media (max-width: 575.98px) { .cm-whatsapp-float { width: 50px; height: 50px; font-size: 1.5rem; bottom: 16px; right: 16px; } } /* ============================================================ FOOTER completo ============================================================ */ .cm-footer { background: var(--cm-primary-dark); color: rgba(255,255,255,.85); padding: 40px 0 20px; margin-top: 40px; } .cm-footer-brand .cm-footer-designed { font-size: .85rem; margin-top: 8px; opacity: .8; } .cm-footer-dev h6 { color: #fff; font-size: .9rem; margin-bottom: 6px; } .cm-footer-dev-name { font-weight: 600; color: #fff; margin-bottom: 2px; font-size: .92rem; } .cm-footer-dev-role { font-size: .78rem; opacity: .75; margin-bottom: 4px; } .cm-footer-dev-phrase { font-size: .8rem; opacity: .7; } .cm-footer-social { display: flex; gap: 12px; } .cm-footer-social a { width: 38px; height: 38px; background: rgba(255,255,255,.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.1rem; transition: background .2s, transform .2s; } .cm-footer-social a:hover { background: var(--cm-accent); transform: translateY(-3px); color: #fff; } .cm-footer-line { border-color: rgba(255,255,255,.15); margin: 24px 0 14px; } body.cm-pagina-fija .cm-footer { display: none; } /* ============================================================ PÁGINA DE CONTACTO ============================================================ */ .cm-contact-hero { padding: 70px 0 50px; } .cm-contact-eyebrow { display: inline-block; background: var(--cm-sand); color: var(--cm-primary); font-size: .78rem; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; padding: 6px 16px; border-radius: 999px; margin-bottom: 14px; } .cm-contact-title { font-size: 2.2rem; font-weight: 700; color: var(--cm-text); margin-bottom: 10px; } .cm-contact-subtitle { color: var(--cm-text-muted); font-size: 1.05rem; } .cm-contact-form { background: #fff; padding: 28px; border-radius: var(--radius); box-shadow: var(--shadow-card); } /* Imagen con esquinas redondeadas + sombra, similar al estilo del Hero */ .cm-contact-image-wrap { position: relative; } .cm-contact-image { width: 100%; height: 460px; object-fit: cover; object-position: center 20%; border-radius: var(--radius); box-shadow: var(--shadow-soft); } /* Tarjeta flotante con el teléfono, sobrepuesta sobre la imagen */ .cm-contact-floating-card { position: absolute; bottom: -20px; left: 24px; background: #fff; border-radius: 14px; box-shadow: 0 12px 30px rgba(0,0,0,.15); padding: 16px 22px; display: flex; align-items: center; gap: 14px; max-width: 260px; } .cm-contact-floating-icon { width: 44px; height: 44px; border-radius: 50%; background: var(--cm-accent); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; flex-shrink: 0; } .cm-contact-floating-label { font-size: .72rem; color: var(--cm-text-muted); text-transform: uppercase; } .cm-contact-floating-value { font-weight: 700; color: var(--cm-text); } /* Franja inferior de tarjetas de información */ .cm-contact-info-strip { background: var(--cm-primary); padding: 60px 0; margin-top: 30px; } .cm-contact-info-card { background: rgba(255,255,255,.08); border-radius: var(--radius); padding: 30px 20px; color: #fff; height: 100%; transition: background .2s, transform .2s; } .cm-contact-info-card:hover { background: rgba(255,255,255,.14); transform: translateY(-4px); } .cm-contact-info-icon { font-size: 2rem; margin-bottom: 12px; } .cm-contact-info-card h5 { font-weight: 700; margin-bottom: 6px; } .cm-contact-info-card p { opacity: .85; margin: 0; } @media (max-width: 991.98px) { .cm-contact-image { height: 320px; } .cm-contact-floating-card { position: static; margin-top: -20px; margin-left: 16px; } } /* ============================================================ PROTECCIÓN DE IMÁGENES: fricción básica contra descarga casual (NO es una protección real contra alguien decidido — un screenshot siempre funciona — pero detiene al 90% de la gente que solo hace clic derecho > Guardar imagen como) ============================================================ */ .cm-gallery img, .cm-card-img img, .cm-photo-slide, .cm-result-item img { -webkit-user-select: none; -moz-user-select: none; user-select: none; -webkit-user-drag: none; pointer-events: auto; /* mantenemos los clics para el lightbox, pero sin drag */ } /* ============================================================ ÍCONOS DE CARACTERÍSTICAS (recámaras, baños, parqueos, m²) Usados en las tarjetas, el listado y la página de Detalle — una sola clase para mantener el tamaño consistente en todos lados. ============================================================ */ .cm-icon-feature { font-size: 1.15em; /* un poco más grande que el texto que lo acompaña */ margin-right: 3px; vertical-align: -2px; /* alinea mejor el emoji con el texto de al lado */ } /* Versión aún más grande, para la barra de características del Detalle (donde cada dato tiene más protagonismo y espacio disponible) */ .cm-icon-feature-lg { font-size: 1.6rem; display: block; margin-bottom: 4px; }