/* ======================================== Inmuex — Architectural Editorial A warm, grounded palette that says "serious investment, handled beautifully" ======================================== */ /* --- Reset & Base --- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { /* Clean blue palette — inspired by RealHomes Ultra */ --ink: #1a1a2e; --ink-secondary: #3d3d5c; --ink-muted: #6b7280; --surface: #f7f8fc; --surface-warm: #eef3f9; --surface-card: #ffffff; --border: #e5e7eb; --border-strong: #d1d5db; /* Primary blue — trust & professionalism */ --accent: #1ea0e5; --accent-hover: #1789c9; --accent-light: #e8f4fd; --accent-subtle: #d1ecfa; /* Secondary — deep navy for contrast */ --sage: #0b2545; --sage-light: #eef2f7; /* Functional */ --venta: #e53e3e; --venta-bg: #fff5f5; --renta: var(--accent); --renta-bg: #e8f4fd; --whatsapp: #25d366; --whatsapp-hover: #1da851; /* Type — clean modern sans-serif */ --font-display: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif; --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif; /* Spacing scale */ --space-xs: .5rem; --space-sm: .75rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2.5rem; --space-2xl: 4rem; --space-3xl: 6rem; /* Radii — more rounded like RealHomes */ --radius-sm: 6px; --radius: 8px; --radius-lg: 12px; /* Shadows — cool-tinted */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, .05); --shadow: 0 2px 8px rgba(0, 0, 0, .06); --shadow-md: 0 4px 16px rgba(0, 0, 0, .08); --shadow-lg: 0 12px 32px rgba(0, 0, 0, .1); --shadow-card-hover: 0 8px 24px rgba(30, 160, 229, .12), 0 2px 6px rgba(0, 0, 0, .06); /* Elementos INVERTIDOS (fondo oscuro + texto claro en modo claro): píldora seleccionada, página actual, vista activa, botón de correo. Necesitan token propio porque venían pintados con --ink, que es el token del TEXTO: al voltear el tema, --ink se vuelve casi blanco y quedaba blanco sobre blanco. Aquí el fondo es un rol aparte del color de la tinta. */ --inverse-bg: #1a1a2e; --inverse-ink: #ffffff; /* El footer es la única superficie que ya era oscura en modo claro. Mismo motivo: usaba --ink como fondo y se habría vuelto blanco. */ --footer-bg: #1a1a2e; /* Tinta sobre VIDRIO: los controles que flotan encima de una foto (flechas del slider, herramientas de la ficha, contador de fotos) son pastillas blancas translúcidas en los DOS temas — una foto es una foto, no cambia con el tema. Su texto no puede usar --ink, que sí se voltea: quedaría blanco sobre blanco. Este token NO se redefine en oscuro, a propósito. */ --on-glass: #1a1a2e; --max-width: 1200px; --header-h: 72px; } /* ============================================================ TEMA OSCURO ============================================================ Un solo bloque redefine los tokens y el sitio se voltea: nada de duplicar el CSS. Los valores son los MISMOS que ya usa el dashboard (`inmuex-dashboard/assets/css/tokens.css`) porque el portal y el panel tienen que sentirse UN producto — allá la correspondencia ya venía declarada ("match --surface", "match --ink"); aquí solo se honra. Lo que NO se voltea solo es el color escrito a mano en las reglas (#fff, rgba(...) fijos). Esos se van migrando a tokens por zonas; cada uno que quede es una mancha clara sobre fondo oscuro. ============================================================ */ [data-theme="dark"] { /* Superficies — el fondo baja y la tarjeta SUBE: en oscuro la elevación se lee por luz, al revés que en claro (tarjeta blanca sobre gris). */ --surface: #0b0f14; --surface-warm: #1a2330; --surface-card: #121821; /* Tinta */ --ink: #e6ecf3; --ink-secondary: #8595a8; --ink-muted: #5b6b80; /* Bordes */ --border: #1f2937; --border-strong: #2a3a4f; /* Acento — el azul de inmuex aguanta sobre oscuro. El hover ACLARA en vez de oscurecer (oscurecer sobre fondo oscuro sería apagarlo), y los fondos suaves dejan de ser pintura sólida para ser un velo del propio acento: lo único que se ve bien sobre cualquier oscuro. */ --accent: #1ea0e5; --accent-hover: #3ab6f5; --accent-light: rgba(30, 160, 229, .12); --accent-subtle: rgba(30, 160, 229, .22); /* Navy secundario: en claro es TEXTO oscuro (--sage) y chip clarito (--sage-light). Invertidos, o el texto desaparece. */ --sage: #cfe0f2; --sage-light: rgba(30, 160, 229, .14); /* Funcionales: el color de marca se queda (venta rojo, renta azul, WhatsApp verde); lo que cambia es su fondo, casi blanco en claro. */ --venta-bg: rgba(229, 62, 62, .14); --renta-bg: rgba(30, 160, 229, .14); /* Sombras: sobre oscuro una sombra suave simplemente no existe. */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, .30); --shadow: 0 2px 8px rgba(0, 0, 0, .32); --shadow-md: 0 4px 12px rgba(0, 0, 0, .35), 0 1px 2px rgba(0, 0, 0, .20); --shadow-lg: 0 12px 32px rgba(0, 0, 0, .45), 0 2px 6px rgba(0, 0, 0, .20); --shadow-card-hover: 0 8px 24px rgba(0, 0, 0, .45), 0 0 0 1px rgba(30, 160, 229, .25); /* Invertidos: en oscuro no pueden "invertirse a claro" (una píldora blanca gritaría más que el propio contenido). Se resuelven como pizarra elevada sobre el fondo casi negro — se leen igual de seleccionados, sin gritar. */ --inverse-bg: #2a3a4f; --inverse-ink: #ffffff; /* El footer se queda como banda de chrome, igual que el header, para que siga siendo el piso de la página y no se funda con el contenido. */ --footer-bg: #121821; /* Le dice al navegador que pinte SUS cosas en oscuro: scrollbars, selects, date pickers, autofill. Sin esto quedan parches blancos del sistema. */ color-scheme: dark; } html { font-size: 16px; scroll-behavior: smooth; -webkit-font-smoothing: antialiased; } body { font-family: var(--font-body); color: var(--ink-secondary); line-height: 1.65; background: var(--surface); } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } ul { list-style: none; } input, select, textarea, button { font-family: inherit; font-size: inherit; } .container { max-width: var(--max-width); margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 2rem); } /* --- Typography --- */ h1, h2, h3, h4 { font-family: var(--font-display); color: var(--ink); line-height: 1.2; } /* --- Buttons --- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .8rem 1.75rem; border-radius: var(--radius); font-weight: 600; /* Borde transparente, no `none`: con border-box el borde SUMA al alto, así que un .btn-outline (que sí lo tiene) quedaba 2px más alto que un .btn-whatsapp o .btn-primary puestos a su lado. Reservando el espacio aquí, todas las variantes miden igual. */ border: 1.5px solid transparent; cursor: pointer; font-size: .9rem; letter-spacing: .01em; transition: background .2s, transform .15s, box-shadow .2s; text-decoration: none; } .btn:active { transform: scale(.98); } .btn-primary { background: var(--accent); color: #fff; box-shadow: 0 1px 3px rgba(30, 160, 229, .3); } .btn-primary:hover { background: var(--accent-hover); box-shadow: 0 3px 10px rgba(30, 160, 229, .35); } .btn-outline { background: transparent; border-color: var(--border-strong); color: var(--ink-secondary); } .btn-outline:hover { border-color: var(--accent); color: var(--accent); } .btn-white { background: var(--surface-card); color: var(--accent); box-shadow: var(--shadow); } .btn-white:hover { background: #fff; box-shadow: var(--shadow-md); } .btn-whatsapp { background: var(--whatsapp); color: #fff; } .btn-whatsapp:hover { background: var(--whatsapp-hover); } .btn-ghost { background: transparent; color: var(--accent); padding: .5rem 0; } .btn-ghost:hover { color: var(--accent-hover); } .btn-lg { padding: 1rem 2.25rem; font-size: .95rem; } .btn-block { display: flex; width: 100%; } .btn + .btn { margin-top: .6rem; } .main-nav .btn + .btn { margin-top: 0; } /* --- Header (RealHomes Ultra style) --- */ .site-header { position: sticky; top: 0; z-index: 100; background: var(--surface-card); box-shadow: var(--shadow); /* En oscuro la sombra ya no separa (negro sobre negro): el borde es lo que despega el header del contenido. En claro es casi imperceptible. */ border-bottom: 1px solid var(--border); } .header-inner { display: flex; align-items: center; height: var(--header-h); max-width: 100%; padding: 0 clamp(1.25rem, 3vw, 2.5rem); } /* Logo — icon + text like RealHomes */ .site-logo { display: flex; align-items: center; gap: .6rem; flex-shrink: 0; margin-right: 2rem; } .logo-icon { display: flex; align-items: center; flex-shrink: 0; } .logo-text { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; color: var(--ink); letter-spacing: .04em; line-height: 1.15; } /* Nav — left-aligned after logo, like RealHomes */ .main-nav { display: flex; align-items: center; } .nav-list { display: flex; align-items: center; gap: .25rem; } .nav-list li a { display: block; padding: .5rem 1rem; color: var(--ink-secondary); font-weight: 500; font-size: .95rem; transition: all .2s; border-radius: 50px; white-space: nowrap; } .nav-list li a:hover { color: var(--accent); background: var(--accent-light); } /* Active state — pill background like RealHomes "Home" */ .nav-list li.current-menu-item a, .nav-list li.active a { color: var(--accent); background: var(--accent-light); } /* Right side — push to far right */ .header-actions { display: flex; align-items: center; gap: .6rem; flex-shrink: 0; margin-left: auto; } /* Entrar · Crear cuenta (1.45.0) — texto, no icono. El círculo con monito que había (copiado de RealHomes) es la convención de "tu perfil"; al anónimo no le decía ni que puede entrar ni que puede registrarse. Píldora partida en ghost: el único botón sólido del header sigue siendo Publicar (jerarquía: el visitante entra en fantasma, el asesor publica en primario). Tinta con `--ink` y borde `--border-strong` — ambos voltean en oscuro; el hover es tinte sobre superficie propia (uso correcto de `--accent-light`). */ .header-auth { display: inline-flex; align-items: stretch; border: 1.5px solid var(--border-strong); border-radius: 50px; overflow: hidden; flex-shrink: 0; } .header-auth__btn { background: transparent; border: none; cursor: pointer; padding: .5rem .95rem; font-family: var(--font-body); font-size: .85rem; font-weight: 600; line-height: 1.2; color: var(--ink); white-space: nowrap; transition: background .2s, color .2s; } .header-auth__btn + .header-auth__btn { border-left: 1.5px solid var(--border-strong); } .header-auth__btn--alt { color: var(--accent); } .header-auth__btn:hover { background: var(--accent-light); color: var(--accent); } /* CTA button */ .header-cta { border-radius: 50px; padding: .55rem 1.4rem; font-size: .85rem; font-weight: 600; margin-top: 0; white-space: nowrap; } /* Claro/oscuro — círculo fantasma a la derecha de todo: es un ajuste, no una acción; relleno sólido competiría con el CTA primario que tiene al lado. */ .header-theme { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; background: transparent; border: 1px solid var(--border-strong); border-radius: 50%; color: var(--ink-muted); cursor: pointer; flex-shrink: 0; transition: color .2s, border-color .2s, background .2s; } .header-theme:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-light); } /* Los dos iconos viven en el DOM y el CSS enseña el que toca — el icono anuncia A DÓNDE vas (en claro ves la luna), y al no pintarlo con JS no hay parpadeo. */ .header-theme .theme-icon-sun { display: none; } .header-theme .theme-icon-moon { display: inline; } [data-theme="dark"] .header-theme .theme-icon-sun { display: inline; } [data-theme="dark"] .header-theme .theme-icon-moon { display: none; } /* La banda apretada del header: 769–1024px. `.header-actions` solo se esconde a ≤768, así que en esta franja el header lleva marca + 5 pestañas + login + CTA + lunita en una sola fila. A 820px eso pedía 785px sobre 771 útiles y, con `flex-shrink: 0` en las acciones, no encogía: SE DESBORDABA — la página entera scrolleaba de lado 22px. Lo destapó la lunita (38px + su gap) al sumarse en el tema oscuro. Se recorta donde SOBRA —el nav gastaba 176px solo en padding y gaps— y no en el CTA ni en el interruptor, que son objetivos, no relleno. El rango va acotado con `min-width: 769px` a propósito: las reglas de ≤1024 se heredan a ≤768, donde el nav ya es el de móvil, y esa herencia ya costó una ronda en el hero. */ @media (min-width: 769px) and (max-width: 1024px) { /* 1.45.0: "Entrar" (67px) reemplazó al círculo (38px) y a 769px volvió a desbordar 26px (medido: marca 172 + nav 344 + acciones 279 = 795). Se recorta otra vez donde sobra —padding de los tabs (era 9.6px × 10) y los gaps— y no en el CTA ni en la luna. Medido tras el recorte: 0 en 769. */ .nav-list li a { padding-left: .45rem; padding-right: .45rem; } .header-actions { gap: .45rem; } .header-cta { padding-left: 1rem; padding-right: 1rem; } .header-auth__btn { padding-left: .75rem; padding-right: .75rem; } /* La píldora de cuenta se queda solo con "Entrar": "Crear cuenta" son ~95px que aquí no caben. El registro sigue a un toque (pestaña del modal). */ .header-auth__btn--alt { display: none; } } /* Mobile toggle */ .header-lupa { display: none; } .nav-drawer-head, .nav-drawer-foot, .nav-overlay { display: none; } .menu-toggle { display: none; background: none; border: none; cursor: pointer; padding: .5rem; margin-left: .5rem; } .menu-toggle span { display: block; width: 22px; height: 2px; background: var(--ink); margin: 5px 0; border-radius: 1px; transition: all .3s; } /* --- Hero Slider --- */ .hero { position: relative; min-height: 650px; overflow: hidden; background: #111; } /* Search over hero (top) */ .hero-search { position: absolute; top: 1rem; left: 0; right: 0; z-index: 5; animation: searchEntrance .6s ease .22s both; } @keyframes searchEntrance { from { opacity: 0; transform: translateY(-15px); } to { opacity: 1; transform: translateY(0); } } .hero-slides { position: absolute; inset: 0; } .hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s cubic-bezier(.4, 0, .2, 1); } .slide-link { position: absolute; inset: 0; z-index: 2; } .hero-slide.active { opacity: 1; } .slide-bg { position: absolute; inset: 0; background: center/cover no-repeat; transform: scale(1.08); } .hero-slide.active .slide-bg { animation: kenBurns 6s ease forwards; } @keyframes kenBurns { from { transform: scale(1); } to { transform: scale(1.08); } } .hero-slide::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.15) 50%, rgba(0,0,0,.05) 100%); z-index: 1; } /* Slide property info — bottom left */ .slide-info { position: absolute; bottom: 2rem; left: 2.5rem; right: 2.5rem; z-index: 2; color: #fff; display: flex; flex-direction: column; gap: .2rem; } /* Fila 1 — tags (estilo RealHomes Ultra) */ .slide-tags { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; } .slide-info .property-badge { position: static; background: #fff; color: #1a1a2e; border-radius: 40px; padding: 2.5px 10px; font-size: 13px; font-weight: 500; text-transform: none; letter-spacing: 0; } .slide-info .badge-venta, .slide-info .badge-renta, .slide-info .badge-tipo { background: #fff; color: #1a1a2e; } /* Fila 2 — título + precio */ .slide-title-price { display: flex; align-items: center; gap: 12px; margin: 0; width: 100%; } .slide-info h2 { font-family: var(--font-display); font-size: clamp(1.4rem, 3vw, 1.9rem); font-weight: 700; color: #fff; line-height: 1.2; margin: 0; white-space: nowrap; text-shadow: 0 1px 4px rgba(0,0,0,.4); } .slide-info h2 a { color: #fff; } .slide-info h2 a:hover { text-decoration: underline; } .slide-price { background: var(--accent); color: #fff; font-family: var(--font-display); font-size: clamp(1.2rem, 2.5vw, 1.6rem); font-weight: 700; padding: 2px 14px; border-radius: 40px; white-space: nowrap; display: inline-block; } /* Fila 3 — dirección */ .slide-location { display: flex; align-items: center; gap: .35rem; font-size: .85rem; color: rgba(255,255,255,.85); } /* Hero overlay content — h1 + help banner below search */ .hero-content { position: absolute; bottom: 12rem; left: 0; right: 0; z-index: 3; pointer-events: none; max-width: 100%; padding-left: clamp(5rem, 8%, 8rem); padding-right: clamp(1.25rem, 8%, 8rem); } .hero-content > * { pointer-events: auto; } .hero h1 { font-family: var(--font-display); font-size: clamp(2.5rem, 6vw, 4.2rem); font-weight: 700; line-height: 1.05; margin-bottom: .75rem; letter-spacing: -.02em; color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,.3); max-width: 600px; } .rotating-word { display: inline-block; color: #ffd000; text-shadow: 0 3px 6px rgba(0,0,0,.5); transition: opacity .4s ease, transform .4s ease; } .rotating-word.fade-out { opacity: 0; transform: translateY(-8px); } .rotating-word.fade-in { opacity: 0; transform: translateY(8px); } /* Help banner */ .hero-help-banner { display: inline-flex; align-items: center; gap: .75rem; background: var(--accent); border-radius: 8px; padding: .5rem .5rem .5rem 1rem; } .help-text { color: #fff; font-size: .82rem; font-weight: 500; } .help-cta { background: #fff !important; color: var(--accent) !important; border-radius: 6px; padding: .4rem .85rem; font-size: .78rem; font-weight: 600; white-space: nowrap; box-shadow: none; } .help-cta:hover { /* Hex OPACO a propósito, no --accent-light: este botón flota sobre el mapa del hero y en oscuro el token es rgba al 12% — el botón blanco se ESFUMABA al hover (lo cachó Mike). Misma regla que --on-glass: pastilla clara en los dos temas, una foto es una foto. */ background: #e8f4fd !important; } /* Slider arrows */ .hero-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 4; width: 44px; height: 44px; background: rgba(255,255,255,.9); border: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--on-glass); box-shadow: 0 2px 8px rgba(0,0,0,.15); transition: background .2s, transform .2s; } .hero-arrow:hover { background: #fff; transform: translateY(-50%) scale(1.08); } .hero-prev { left: 1.25rem; animation: bounceInLeft .7s cubic-bezier(.34,1.56,.64,1) 1.22s both; } .hero-next { right: 1.25rem; animation: bounceInRight .7s cubic-bezier(.34,1.56,.64,1) 1.22s both; } @keyframes bounceInLeft { from { opacity: 0; transform: translateY(-50%) translateX(-60px); } to { opacity: 1; transform: translateY(-50%) translateX(0); } } @keyframes bounceInRight { from { opacity: 0; transform: translateY(-50%) translateX(60px); } to { opacity: 1; transform: translateY(-50%) translateX(0); } } /* Slider dots */ .hero-dots { position: absolute; bottom: 1.25rem; right: 2.5rem; z-index: 4; display: flex; align-items: center; gap: .5rem; } /* Grupo de dots con border colectivo */ .hero-dots-group { display: flex; align-items: center; gap: .4rem; border: 2px solid rgba(255,255,255,.7); border-radius: 20px; padding: 4px 6px; } .hero-dot { width: 10px; height: 10px; border-radius: 50%; border: 2px solid #fff; background: transparent; cursor: pointer; transition: background .2s; padding: 0; flex-shrink: 0; } .hero-dot.active { background: #fff; } /* Botón pause */ .hero-pause { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #fff; background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; flex-shrink: 0; transition: background .2s; } .hero-pause:hover { background: rgba(255,255,255,.2); } /* --- Search Box (single row) --- */ .search-box { background: var(--surface-card); border-radius: 50px; padding: .75rem; box-shadow: 0 4px 24px rgba(30, 160, 229, .1); border: 2px solid rgba(30, 160, 229, .22); overflow: visible; /* El buscador entero tiene que APILARSE sobre los resultados, y esto no es un capricho de número: `.search-box` corre `animation: searchEntrance`, cuyo transform CREA CONTEXTO DE APILAMIENTO. Eso encierra aquí adentro el `z-index: 20` de `.filter-dropdown`, que solo vale puertas adentro; hacia afuera compite el search box entero, y siendo `z-auto` y anterior a `.halfmap-results` en el DOM, las tarjetas se pintaban encima del desplegable abierto. Subirle el z-index al desplegable no habría hecho nada — hay que sacar de abajo al contenedor que crea el contexto. */ position: relative; z-index: 5; transition: border-radius .3s ease; max-width: 900px; margin: 0 auto; } .search-row { display: flex; align-items: center; gap: 0; } .search-tabs { display: flex; gap: .25rem; flex-shrink: 0; } .search-tab { padding: .5rem 1rem; border-radius: 50px; cursor: pointer; font-weight: 600; font-size: .82rem; color: var(--ink-muted); background: transparent; transition: all .2s; border: none; } .search-tab input { display: none; } .search-tab.active, .search-tab:has(input:checked) { background: var(--accent); color: #fff; } .search-tab:not(.active):not(:has(input:checked)):hover { color: var(--accent); } .search-divider { width: 1px; height: 24px; background: var(--border); flex-shrink: 0; margin: 0 .5rem; } .search-select { border: none; background: transparent; color: var(--ink-secondary); font-size: .85rem; padding: .5rem .25rem; cursor: pointer; appearance: none; flex-shrink: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M3 4.5L6 8l3-3.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right center; padding-right: 1.1rem; } .search-select:focus { outline: none; color: var(--ink); } .search-keyword-wrap { position: relative; flex: 1; min-width: 0; } .search-keyword-wrap .search-icon { position: absolute; left: .5rem; top: 50%; transform: translateY(-50%); pointer-events: none; } .search-keyword { width: 100%; padding: .5rem .5rem .5rem 2rem; border: none; border-radius: 50px; font-size: .88rem; color: var(--ink); background: transparent; } .search-keyword:focus { outline: none; } .search-keyword::placeholder { color: var(--ink-muted); } .btn-search { padding: .6rem 1.75rem; flex-shrink: 0; border-radius: 50px; font-size: .85rem; font-weight: 600; } /* Advanced search panel — inside box, slides open */ .search-advanced-panel { max-height: 0; overflow: hidden; opacity: 0; transition: max-height .4s ease, opacity .3s ease, margin .3s ease, padding .3s ease; margin: 0; padding: 0; } .search-advanced-panel.open { max-height: 400px; opacity: 1; overflow: visible; margin-top: .75rem; padding-top: .75rem; border-top: 1px solid var(--border); } .search-box:has(.search-advanced-panel.open) { border-radius: 30px; transition: border-radius .3s ease; } .adv-row { display: flex; gap: .5rem; margin-bottom: .5rem; } .adv-row:last-child { margin-bottom: 0; } .adv-field { flex: 1 1 0; min-width: 0; } .adv-field label { display: block; font-size: .72rem; font-weight: 600; color: var(--ink-muted); margin-bottom: .2rem; text-transform: uppercase; letter-spacing: .03em; } .adv-field input, .adv-field select { width: 100%; padding: .5rem .65rem; border: 1.5px solid var(--border); border-radius: 50px; font-size: .82rem; color: var(--ink); background: var(--surface); transition: border-color .2s; } .adv-field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M3 4.5L6 8l3-3.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .6rem center; padding-right: 1.75rem; } .adv-field input:focus, .adv-field select:focus { border-color: var(--accent); outline: none; background: var(--surface-card); } /* Filterable dropdown */ .filter-select { position: relative; } .filter-select select { display: none; } .filter-trigger { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: .5rem .65rem; border: 1.5px solid var(--border); border-radius: 50px; font-size: .82rem; color: var(--ink-secondary); background: var(--surface); cursor: pointer; transition: border-color .2s; } .filter-trigger::after { content: ''; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid var(--ink-muted); flex-shrink: 0; margin-left: .5rem; } .filter-trigger.open { border-color: var(--accent); background: var(--surface-card); border-radius: 12px 12px 0 0; } .filter-dropdown { display: none; position: absolute; top: 100%; left: 0; right: 0; /* SUPERFICIE, no tinte. Iba con `--accent-light`, que es un tinte de acento: en claro vale `#e8f4fd` (opaco) y funcionaba de casualidad, pero en oscuro es `rgba(30,160,229,.12)` — 12% — y el desplegable quedaba 88% transparente, con las fotos de los resultados asomándose por debajo. Un panel que FLOTA sobre otro contenido necesita superficie opaca; el tinte translúcido está bien en hovers, que se ven sobre el fondo de su propio contenedor. Además así empata con `.filter-trigger.open`. */ background: var(--surface-card); border: 1.5px solid var(--accent); border-top: none; border-radius: 0 0 12px 12px; box-shadow: 0 8px 24px rgba(0,0,0,.12); z-index: 20; max-height: 220px; overflow: hidden; } .filter-dropdown.open { display: block; } .filter-input { width: 100%; padding: .5rem .65rem; border: none; border-bottom: 1px solid var(--border); font-size: .82rem; color: var(--ink); background: transparent; outline: none; } .filter-input::placeholder { color: var(--ink-muted); } .filter-options { max-height: 170px; overflow-y: auto; } .filter-option { padding: .45rem .65rem; font-size: .82rem; color: var(--ink-secondary); cursor: pointer; transition: background .15s, color .15s; } .filter-option:hover { background: var(--accent); color: #fff; } .filter-option.selected { color: var(--accent); font-weight: 600; } .filter-option.hidden { display: none; } /* Dual range slider */ .adv-row-sliders { margin-top: .25rem; } .adv-field-slider { flex: 1; min-width: 0; } /* Precio tiene números mucho más largos ($21,850,000) que m² — le damos doble ancho */ .adv-field-slider--wide { flex: 2; } /* Label de slider: caption uppercase arriba, rango en línea propia abajo (consistente con CUARTOS/BAÑOS/ESTACIONAMIENTOS). Evita la elipsis cuando los números crecen. */ .adv-field-slider label { display: flex; flex-direction: column; gap: 1px; white-space: nowrap; min-width: 0; } .adv-field-slider label span { display: block; font-weight: 500; font-size: .78rem; color: var(--accent); text-transform: none; letter-spacing: 0; overflow: hidden; text-overflow: ellipsis; } .range-slider { position: relative; height: 36px; display: flex; align-items: center; } .range-slider input[type="range"] { position: absolute; width: 100%; height: 6px; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; margin: 0; padding: 0; } .range-slider input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--surface-card); border: 2px solid var(--accent); box-shadow: 0 1px 4px rgba(0,0,0,.15); pointer-events: all; cursor: pointer; position: relative; z-index: 2; } .range-slider input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--surface-card); border: 2px solid var(--accent); box-shadow: 0 1px 4px rgba(0,0,0,.15); pointer-events: all; cursor: pointer; } .range-track { position: absolute; left: 0; right: 0; height: 4px; background: var(--border); border-radius: 2px; pointer-events: none; } .range-track::after { content: ''; position: absolute; height: 100%; background: var(--accent); border-radius: 2px; left: var(--range-left, 0%); right: var(--range-right, 0%); } .search-toggle-wrap { max-width: 900px; margin: 0 auto; padding-left: 50px; } .search-features-toggle { margin-top: -.1rem; display: inline-flex; align-items: center; gap: .35rem; background: var(--accent); color: #fff; border: none; border-radius: 0 0 20px 20px; padding: .45rem 1.1rem; font-size: .78rem; font-weight: 600; cursor: pointer; transition: background .2s; } .search-features-toggle:hover { background: var(--accent-hover); } .search-features-toggle svg { transition: transform .3s; } .search-features-toggle.open svg { transform: rotate(45deg); } @media (max-width: 768px) { .search-box { border-radius: 20px; padding: .5rem; } .search-row { flex-wrap: wrap; gap: .35rem; } .search-tabs { width: 100%; justify-content: center; } .search-divider { display: none; } .search-select { width: 100%; padding: .5rem .75rem; } .search-keyword-wrap { width: 100%; } .search-keyword { padding: .5rem .5rem .5rem 2rem; } .btn-search { width: 100%; } } /* --- Section Layout --- */ .section-title { font-size: clamp(1.4rem, 3vw, 1.85rem); font-weight: 700; color: var(--ink); letter-spacing: -.02em; } .section-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--space-lg); } .section-link { color: var(--accent); font-weight: 500; font-size: .9rem; border-bottom: 1px solid transparent; transition: border-color .2s; } .section-link:hover { border-color: var(--accent); } .section-eyebrow { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--accent); margin-bottom: .5rem; } /* --- Categories --- */ .categories { padding: var(--space-3xl) 0 var(--space-2xl); } .categories-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(.6rem, 1.5vw, 1rem); margin-top: var(--space-lg); } .category-card { display: flex; flex-direction: column; align-items: center; padding: clamp(1.25rem, 2.5vw, 1.75rem) var(--space-md); border-radius: var(--radius-lg); background: var(--surface-card); border: 1.5px solid var(--border); transition: all .25s cubic-bezier(.4, 0, .2, 1); text-align: center; cursor: pointer; text-decoration: none; color: var(--ink-secondary); } .category-card:hover { border-color: var(--accent); box-shadow: var(--shadow-md); transform: translateY(-3px); background: var(--accent-light); } .category-card:hover .category-icon { color: var(--accent); } .category-icon { width: 40px; height: 40px; color: var(--ink-muted); margin-bottom: .6rem; transition: color .25s; } .category-icon svg { width: 100%; height: 100%; } .category-card h3 { font-family: var(--font-body); font-size: .9rem; font-weight: 600; color: var(--ink); margin-bottom: .15rem; } .category-count { font-size: .78rem; color: var(--ink-muted); } /* --- Property Cards --- */ .properties-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); } .properties-grid.grid-2 { grid-template-columns: repeat(2, 1fr); } /* Recién publicadas (portada): 8 tarjetas en 4×2 — SOLO ahí; los demás listados conservan sus 3. Se deshace explícito en cada breakpoint chico (regla del tema: lo del breakpoint grande se deshace en el chico). */ .featured .properties-grid { grid-template-columns: repeat(4, 1fr); } .property-card { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border); transition: all .3s cubic-bezier(.4, 0, .2, 1); display: block; text-decoration: none; color: var(--ink-secondary); background: var(--surface-card); } .property-card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-4px); border-color: transparent; } .property-card:hover .property-image img { transform: scale(1.04); } .property-image { position: relative; aspect-ratio: 16/11; overflow: hidden; background: var(--surface-warm); } .property-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.4, 0, .2, 1); } .property-image-placeholder { width: 100%; height: 100%; background: linear-gradient(145deg, var(--surface-warm), var(--border)); } .property-badge { position: absolute; top: .75rem; left: .75rem; padding: .3rem .7rem; border-radius: var(--radius-sm); font-size: .72rem; font-weight: 700; color: #fff; text-transform: uppercase; letter-spacing: .06em; } .badge-venta { background: var(--venta); } .badge-renta { background: var(--renta); } .property-info { padding: var(--space-md) var(--space-lg) var(--space-lg); } .property-price { font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; color: var(--ink); margin-bottom: .2rem; letter-spacing: -.02em; } .property-title { font-size: .88rem; color: var(--ink-secondary); margin-bottom: .6rem; line-height: 1.4; } .property-specs { display: flex; gap: .75rem; font-size: .8rem; color: var(--ink-muted); margin-bottom: .5rem; padding-top: .6rem; border-top: 1px solid var(--border); } .property-specs span { display: flex; align-items: center; gap: .2rem; } .property-location { font-size: .8rem; color: var(--ink-muted); } .property-card.placeholder .property-image { aspect-ratio: 16/11; } .property-card.placeholder .property-image img { width: 100%; height: 100%; object-fit: cover; } /* --- Featured --- */ .featured { padding: var(--space-2xl) 0 var(--space-3xl); background: var(--surface-warm); } /* --- CTA Publish --- */ .cta-publish { padding: var(--space-3xl) 0; background: linear-gradient(135deg, #0b2545 0%, #13395e 100%); position: relative; overflow: hidden; } .cta-publish::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 80% at 80% 50%, rgba(30, 160, 229, .15), transparent); } .cta-content { position: relative; text-align: center; color: #fff; } .cta-content h2 { font-family: var(--font-display); font-size: clamp(1.6rem, 4vw, 2.2rem); font-weight: 700; margin-bottom: .75rem; letter-spacing: -.02em; color: #fff; } .cta-content p { font-size: 1.05rem; color: rgba(255,255,255,.65); margin-bottom: 2rem; max-width: 460px; margin-inline: auto; } /* --- Popular Zones --- */ .popular-zones { padding: var(--space-3xl) 0; } .zones-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); margin-top: var(--space-lg); } .zone-card { position: relative; padding: clamp(2rem, 4vw, 3rem) var(--space-lg); border-radius: var(--radius-lg); background: var(--inverse-bg) center/cover no-repeat; color: #fff; overflow: hidden; transition: all .3s cubic-bezier(.4, 0, .2, 1); text-decoration: none; display: block; text-align: left; } .zone-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(28,25,23,.3) 0%, rgba(28,25,23,.75) 100%); transition: opacity .3s; } .zone-overlay { position: absolute; inset: 0; } .zone-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); } .zone-card:hover::before { opacity: .7; } .zone-card h3 { font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; margin-bottom: .2rem; position: relative; color: #fff; } .zone-card span { font-size: .82rem; opacity: .55; position: relative; } /* --- Listing Page --- */ .listing-page { padding: var(--space-xl) 0 var(--space-3xl); } .listing-header { margin-bottom: var(--space-xl); } .breadcrumb { font-size: .82rem; color: var(--ink-muted); margin-bottom: var(--space-md); } .breadcrumb a { color: var(--accent); } .breadcrumb a:hover { text-decoration: underline; } .listing-meta { display: flex; justify-content: space-between; align-items: baseline; } .listing-meta h1 { font-size: clamp(1.4rem, 3vw, 1.75rem); font-weight: 700; letter-spacing: -.02em; } .listing-count { color: var(--ink-muted); font-size: .9rem; } .listing-layout { display: grid; grid-template-columns: 260px 1fr; gap: var(--space-xl); } /* --- Filters Sidebar --- */ .listing-filters { position: sticky; top: calc(var(--header-h) + var(--space-md)); align-self: start; padding: var(--space-lg); background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-lg); } .listing-filters h3 { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; color: var(--ink); margin-bottom: var(--space-lg); padding-bottom: var(--space-sm); border-bottom: 1px solid var(--border); } .filter-group { margin-bottom: var(--space-lg); } .filter-group > label:first-child { display: block; font-weight: 600; font-size: .75rem; color: var(--ink-muted); margin-bottom: .4rem; text-transform: uppercase; letter-spacing: .08em; } .filter-radio, .filter-check { display: flex; align-items: center; gap: .5rem; padding: .3rem 0; font-size: .9rem; cursor: pointer; } .filter-range { display: flex; align-items: center; gap: .4rem; } .filter-range input { flex: 1; padding: .55rem .7rem; border: 1.5px solid var(--border); border-radius: var(--radius); width: 0; background: var(--surface); font-size: .85rem; } .filter-range input:focus { border-color: var(--accent); outline: none; } .filter-pills { display: flex; gap: .4rem; flex-wrap: wrap; } .pill { padding: .4rem .7rem; border: 1.5px solid var(--border); border-radius: var(--radius); font-size: .82rem; cursor: pointer; transition: all .2s; background: var(--surface); } .pill input { display: none; } .pill:has(input:checked) { background: var(--inverse-bg); color: var(--inverse-ink); border-color: var(--inverse-bg); } .pill:hover { border-color: var(--ink-muted); } .listing-filters select { width: 100%; padding: .55rem .7rem; border: 1.5px solid var(--border); border-radius: var(--radius); background: var(--surface); font-size: .9rem; } /* --- Listing Results --- */ .listing-sort { margin-bottom: var(--space-md); display: flex; justify-content: flex-end; } .listing-sort select { padding: .5rem .75rem; border: 1.5px solid var(--border); border-radius: var(--radius); background: var(--surface-card); font-size: .85rem; } .pagination { margin-top: var(--space-xl); text-align: center; } .pagination .nav-links { display: flex; justify-content: center; gap: .35rem; } .pagination a, .pagination span { padding: .5rem .9rem; border: 1.5px solid var(--border); border-radius: var(--radius); font-size: .85rem; transition: all .2s; } .pagination a:hover { border-color: var(--accent); color: var(--accent); } .pagination .current { background: var(--inverse-bg); color: var(--inverse-ink); border-color: var(--inverse-bg); } .no-results { text-align: center; padding: var(--space-3xl) 0; color: var(--ink-muted); } .no-results h2 { color: var(--ink); margin-bottom: .5rem; } /* ============================================== SINGLE PROPERTY — Full-Width Layout (sp-*) ============================================== */ /* Container wide (1400px) */ .container-wide { max-width: 1400px; margin: 0 auto; padding: 0 clamp(1rem, 3vw, 2rem); } /* ---- Hero Gallery ---- */ /* La sección es el contenedor de `.sp-hero-stack` (absoluta en escritorio): la pila vive FUERA de .sp-hero-main desde 1.60.4, para poder fluir DEBAJO de la foto en móvil. */ .sp-hero { position: relative; } .sp-hero-main { position: relative; overflow: hidden; height: clamp(580px, 92vh, 1040px); background: var(--surface-warm); cursor: pointer; } .sp-hero-img-wrap { position: absolute; inset: 0; } .sp-hero-bg { position: absolute; inset: 0; background: center/cover no-repeat; opacity: 0; transition: opacity 1.2s cubic-bezier(.4, 0, .2, 1); } .sp-hero-bg.is-active { opacity: 1; } .sp-hero-placeholder { width: 100%; height: 100%; background: linear-gradient(135deg, var(--surface-warm), var(--border-strong)); } /* Virtual tour layer — stacked; se muestra al click del botón Paseo virtual */ .sp-hero-tour-layer { position: absolute; inset: 0; z-index: 2; background: #000; opacity: 0; pointer-events: none; transition: opacity .4s ease; } .sp-hero-main.show-tour .sp-hero-tour-layer { opacity: 1; pointer-events: auto; } .sp-hero-main.show-tour .sp-hero-img-wrap { opacity: 0; transition: opacity .4s ease; } .sp-hero-main.show-tour .sp-hero-overlay { opacity: 0; transition: opacity .3s; } .sp-hero-tour-layer iframe { width: 100%; height: 100%; border: 0; display: block; } /* Video layer — stacked; se muestra cuando la slide de video está activa */ .sp-hero-video-layer { position: absolute; inset: 0; z-index: 2; background: #000; opacity: 0; pointer-events: none; transition: opacity .35s ease; } .sp-hero-main.show-video .sp-hero-video-layer { opacity: 1; pointer-events: auto; } .sp-hero-main.show-video .sp-hero-img-wrap { opacity: 0; transition: opacity .35s ease; } .sp-hero-video-layer iframe, .sp-hero-video-layer video { width: 100%; height: 100%; border: 0; display: block; object-fit: cover; } /* Play icon overlay en thumb de video */ .sp-vcar-thumb-video { position: relative; } .sp-vcar-thumb-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 32px; height: 32px; border-radius: 50%; background: rgba(0,0,0,.65); color: #fff; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(4px); box-shadow: 0 2px 8px rgba(0,0,0,.4); pointer-events: none; } .sp-vcar-thumb-play svg { margin-left: 2px; /* óptico */ } /* Map layer — stacked on top of images when toggled */ .sp-hero-map-layer { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity .5s ease; z-index: 2; } .sp-hero-main.show-map .sp-hero-map-layer { opacity: 1; pointer-events: auto; } .sp-hero-main.show-map .sp-hero-img-wrap { opacity: 0; transition: opacity .5s ease; } .sp-hero-map-layer .leaflet-container { width: 100%; height: 100%; } /* TODOS los mapas encerrados en su propio contexto de apilamiento (1.54.1). Leaflet trae z-index propios (panes 400, controles 1000) y, sin contexto en el contenedor, salen a competir con la página: la atribución «Leaflet | © OpenStreetMap» se pintaba ENCIMA de la invitación (900) — lo cazó Mike. Con isolation, el 1000 vale solo puertas adentro y el mapa entero queda debajo de header (100), mesa (850), invitación (900) y overlay (1000). Es la receta de siempre: no subir el z-index del que se hunde; encerrar al que se sale. */ .leaflet-container { isolation: isolate; } /* Before/After compare slider — aparece al click de staging */ .sp-hero-compare { position: absolute; inset: 0; z-index: 2; opacity: 0; pointer-events: none; transition: opacity .4s ease; --cp: 50%; overflow: hidden; } .sp-hero-main.show-compare .sp-hero-compare { opacity: 1; pointer-events: auto; } .sp-hero-main.show-compare .sp-hero-img-wrap { opacity: 0; transition: opacity .4s ease; } .sp-hero-main.show-compare .sp-hero-overlay { opacity: 0; transition: opacity .3s; } .sp-hero-cmp-before, .sp-hero-cmp-after { position: absolute; inset: 0; background: center/cover no-repeat; } /* After (amueblada) arriba, clipped desde la derecha hasta la posición del handle */ .sp-hero-cmp-after { clip-path: inset(0 calc(100% - var(--cp)) 0 0); -webkit-clip-path: inset(0 calc(100% - var(--cp)) 0 0); } .sp-hero-cmp-lbl { position: absolute; top: 1.5rem; z-index: 3; padding: .4rem .9rem; border-radius: 40px; background: rgba(0,0,0,.65); backdrop-filter: blur(8px); color: #fff; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; pointer-events: none; } .sp-hero-cmp-lbl-before { right: 1.5rem; } .sp-hero-cmp-lbl-after { left: 1.5rem; background: var(--accent); } .sp-hero-cmp-handle { position: absolute; top: 0; bottom: 0; left: var(--cp); width: 60px; transform: translateX(-50%); background: none; border: none; padding: 0; cursor: ew-resize; z-index: 4; touch-action: none; } .sp-hero-cmp-line { position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; transform: translateX(-50%); background: #fff; box-shadow: 0 0 14px rgba(0,0,0,.55); } .sp-hero-cmp-grip { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 52px; height: 52px; border-radius: 50%; background: #fff; box-shadow: 0 4px 14px rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; color: var(--on-glass); transition: transform .15s; } .sp-hero-cmp-handle:hover .sp-hero-cmp-grip, .sp-hero-cmp-handle:active .sp-hero-cmp-grip { transform: translate(-50%, -50%) scale(1.08); } .sp-hero-overlay { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom, rgba(0,0,0,.38) 0%, transparent 28%, transparent 48%, rgba(0,0,0,.7) 100%); } /* Flechas discretas + contador del hero (1.61.0): vidrio como las del lightbox, más chicas. En escritorio asoman al pasar el mouse (la de atrás va a la derecha de la columna de miniaturas); en móvil siempre, semitransparentes. Con mapa, tour o video se esconden: ahí el hero es otra cosa. */ .sp-hero-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 4; width: 36px; height: 36px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; background: rgba(255,255,255,.18); backdrop-filter: blur(8px); color: #fff; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .2s, background .2s; } .sp-hero-nav--prev { left: calc(clamp(1rem, 2vw, 1.75rem) + 89px + .75rem); } .sp-hero-nav--next { right: clamp(.75rem, 2vw, 1.5rem); } .sp-hero-main:hover .sp-hero-nav, .sp-hero-nav:focus-visible { opacity: 1; } .sp-hero-nav:hover { background: rgba(255,255,255,.32); } .sp-hero-counter { position: absolute; right: clamp(1rem, 3vw, 2rem); bottom: 1.25rem; z-index: 3; padding: .25rem .6rem; border-radius: 999px; pointer-events: none; font-size: .74rem; font-weight: 600; letter-spacing: .02em; font-variant-numeric: tabular-nums; background: rgba(0,0,0,.45); color: #fff; backdrop-filter: blur(6px); } .sp-hero-counter:empty { display: none; } .sp-hero-main.show-map .sp-hero-nav, .sp-hero-main.show-tour .sp-hero-nav, .sp-hero-main.show-video .sp-hero-nav, .sp-hero-main.show-map .sp-hero-counter, .sp-hero-main.show-tour .sp-hero-counter, .sp-hero-main.show-video .sp-hero-counter { display: none; } /* Top bar */ .sp-hero-topbar { position: absolute; top: 0; left: 0; right: 0; z-index: 3; display: flex; justify-content: space-between; align-items: center; padding: 1.25rem clamp(1rem, 3vw, 2rem); } .sp-breadcrumb { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; font-size: .78rem; color: rgba(255,255,255,.8); } .sp-breadcrumb a { color: rgba(255,255,255,.8); text-decoration: none; transition: color .15s; } .sp-breadcrumb a:hover { color: #fff; text-decoration: underline; } .sp-bc-sep { opacity: .5; } .sp-hero-actions { display: flex; align-items: center; gap: .4rem; } .sp-action-btn { display: inline-flex; align-items: center; gap: .3rem; padding: .45rem .8rem; border-radius: 40px; cursor: pointer; background: rgba(255,255,255,.15); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.28); color: #fff; font-size: .78rem; font-weight: 500; font-family: var(--font-body); transition: background .2s; } .sp-action-btn:hover { background: rgba(255,255,255,.27); } .sp-fav-btn.active svg { fill: #ef4444; stroke: #ef4444; } .sp-fav-count { font-weight: 700; margin-left: .1rem; } /* el numerito del like en la ficha (1.47.0) */ .sp-fav-count[hidden] { display: none; } /* Bottom info */ .sp-hero-foot { position: absolute; bottom: 0; left: 0; right: 0; z-index: 3; display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; padding: 1.5rem clamp(1rem, 3vw, 2rem) 1.5rem calc(clamp(1rem, 2vw, 1.75rem) + 89px + clamp(1rem, 2vw, 1.5rem)); } .sp-hero-foot-left { flex: 1; min-width: 0; } .sp-hero-foot-right { text-align: right; flex-shrink: 0; } .sp-hero-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .6rem; } .sp-tag { display: inline-block; padding: .3rem .8rem; border-radius: 40px; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; backdrop-filter: blur(6px); } .sp-tag-op { background: var(--accent); color: #fff; } .sp-tag-tipo { background: var(--surface-warm); color: var(--ink-secondary); border: 1px solid var(--border); } .sp-hero-title { font-family: var(--font-display); font-size: clamp(1.5rem, 3.5vw, 2.6rem); font-weight: 700; color: #fff; margin: 0; line-height: 1.15; letter-spacing: -.03em; text-shadow: 0 2px 16px rgba(0,0,0,.4); } .sp-hero-address { display: flex; align-items: center; gap: .3rem; margin-top: .45rem; font-size: .85rem; color: rgba(255,255,255,.78); } .sp-hero-address svg { flex-shrink: 0; opacity: .75; } .sp-hero-price { font-family: var(--font-display); margin: 0; font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 800; color: #fff; letter-spacing: -.03em; text-shadow: 0 2px 16px rgba(0,0,0,.4); } .sp-hero-price span { font-size: .7rem; font-weight: 400; opacity: .75; margin-left: .25rem; } .sp-hero-price-m2 { display: block; font-size: .8rem; color: rgba(255,255,255,.7); margin-top: .2rem; } .sp-photos-btn { display: inline-flex; align-items: center; gap: .3rem; margin-top: .5rem; padding: .4rem .9rem; background: rgba(0,0,0,.45); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.2); color: #fff; border-radius: 40px; font-size: .78rem; font-weight: 500; cursor: pointer; font-family: var(--font-body); transition: background .2s; } .sp-photos-btn:hover { background: rgba(0,0,0,.65); } /* Hero tools — stack vertical debajo del carrusel */ .sp-hero-stack .sp-hero-tools { display: flex; flex-direction: column; gap: 8px; } .sp-hero-tool { width: calc(100% - 11px); height: 68px; margin: 0 auto; padding: 8px 0; border-radius: 7px; box-sizing: border-box; background: rgba(255,255,255,.95); backdrop-filter: blur(10px); border: none; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--on-glass); cursor: pointer; font-family: var(--font-body); transition: background .2s, transform .15s; } .sp-hero-tool svg { width: 18px; height: 18px; color: var(--accent); margin-bottom: 2px; } .sp-hero-tool:hover { background: #fff; transform: translateY(-2px); } .sp-hero-tool.is-active { outline: 3px solid var(--accent); outline-offset: -3px; } /* Disabled state when property has no tour/staging */ .sp-hero-tool.is-dim { background: rgba(255,255,255,.35); cursor: not-allowed; opacity: .75; } .sp-hero-tool.is-dim:hover { background: rgba(255,255,255,.35); transform: none; } .sp-hero-tool.is-dim svg { color: rgba(0,0,0,.35); } .sp-hero-tool.is-dim .sp-hero-tool-lbl { color: rgba(0,0,0,.45); opacity: .7; } .sp-hero-tool-lbl { font-size: 11px; font-weight: 500; line-height: 1.1; text-align: center; margin-top: 2px; display: block; opacity: .7; } /* Stack izquierdo: mapa → 3D → staging → fotos (carrusel+count) */ .sp-hero-stack { position: absolute; left: clamp(1rem, 2vw, 1.75rem); bottom: 1.5rem; z-index: 3; width: 89px; display: flex; flex-direction: column; row-gap: 8px; } .sp-hero-stack .sp-vcar-mapbtn { order: 1; } .sp-hero-stack .sp-hero-tools { order: 2; } .sp-hero-stack .sp-vcar { order: 3; position: static; left: auto; bottom: auto; width: 100%; } /* Vertical carousel (Slick) */ .sp-vcar { display: flex; flex-direction: column; row-gap: 8px; } /* Map toggle button — pegado arriba del carrusel */ .sp-vcar-mapbtn { width: calc(100% - 11px); margin: 0 auto; padding: 0; border: none; background: transparent; cursor: pointer; border-radius: 7px; overflow: hidden; box-shadow: 0 4px 10px rgba(0,0,0,.3); transition: transform .2s ease, box-shadow .2s ease; } .sp-vcar-mapbtn:hover { transform: scale(1.05); box-shadow: 0 6px 16px rgba(0,0,0,.4); } .sp-vcar-mapbtn img { display: block; width: 100%; height: auto; } .sp-vcar-mapbtn.is-active { outline: 3px solid var(--accent); outline-offset: -3px; } .sp-vcar-box { width: 100%; } /* Slick structure — no margins on track horizontal since we want vertical */ .sp-vcar-slick { margin: 0; } .sp-vcar-slick .slick-list { overflow: hidden; } .sp-vcar-slick .slick-track { display: block; } .sp-vcar-thumb-box { padding: 0; margin: 4px 5.5px; /* 4px top+bottom = 8px entre thumbs consecutivos */ } .sp-vcar-thumb { display: block; padding-top: 89%; /* aspect ratio */ background-position: center; background-repeat: no-repeat; background-size: cover; cursor: pointer; border-radius: 6px; outline: 0 solid var(--accent); outline-offset: -5px; transition: outline-width .15s linear; } .sp-vcar-slick .slick-current .sp-vcar-thumb { outline-width: 5px; box-shadow: 0 6px 14px rgba(0,0,0,.35); } /* Count box */ .sp-vcar-count { width: calc(100% - 11px); min-width: auto; margin: 4px auto 0; box-sizing: border-box; background: rgba(255,255,255,.95); backdrop-filter: blur(10px); border-radius: 7px; padding: 8px 0; cursor: pointer; border: none; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--on-glass); font-family: var(--font-body); transition: background .2s; height: 68px; } .sp-vcar-count:hover { background: #fff; } .sp-vcar-count svg { width: 14px; color: var(--accent); margin-bottom: 2px; } .sp-vcar-count-num { font-family: var(--font-display); font-size: 18px; font-weight: 700; line-height: 1; display: block; } .sp-vcar-count-lbl { font-size: 11px; font-weight: 500; display: block; margin-top: 2px; opacity: .7; } /* ---- Main header (tags, título, dirección, precio — dentro del sp-main) ---- */ .sp-main-header { margin-bottom: var(--space-xl); } .sp-mh-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .6rem; } .sp-mh-title-price { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-md); flex-wrap: wrap; } .sp-mh-title-wrap { flex: 1; min-width: 0; } .sp-mh-title { font-family: var(--font-display); font-size: clamp(1.4rem, 2.8vw, 2.1rem); font-weight: 700; color: var(--ink); margin: 0; line-height: 1.15; letter-spacing: -.02em; } .sp-mh-address { display: flex; align-items: center; gap: .3rem; margin: .4rem 0 0; font-size: .88rem; color: var(--ink-muted); } .sp-mh-address svg { flex-shrink: 0; color: var(--accent); opacity: .85; } .sp-mh-price-wrap { text-align: right; flex-shrink: 0; } .sp-mh-price { font-family: var(--font-display); margin: 0; font-size: clamp(1.3rem, 2.5vw, 1.8rem); font-weight: 800; color: var(--accent); letter-spacing: -.02em; } .sp-mh-price span { font-size: .65em; font-weight: 400; color: var(--ink-muted); margin-left: .25rem; } .sp-mh-price-m2 { display: block; font-size: .8rem; color: var(--ink-muted); margin-top: .2rem; } /* ---- Content area ---- */ .sp-content { padding: var(--space-xl) 0 var(--space-3xl); } /* Specs bar */ .sp-specs-bar { display: flex; flex-wrap: wrap; gap: 0; background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-lg); margin-bottom: var(--space-xl); overflow: hidden; } .sp-spec { flex: 1; min-width: 110px; display: flex; flex-direction: column; align-items: center; padding: var(--space-md) var(--space-sm); text-align: center; border-right: 1px solid var(--border); } .sp-spec:last-child { border-right: none; } .sp-spec-icon { color: var(--accent); margin-bottom: .35rem; } .sp-spec-val { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; color: var(--ink); line-height: 1.2; } .sp-spec-lbl { font-size: .68rem; color: var(--ink-muted); text-transform: uppercase; letter-spacing: .07em; margin-top: .15rem; } /* 2-col layout. minmax(0, 1fr) + min-width: 0, no `1fr` pelón: un track `1fr` NO encoge bajo el min-content de su contenido. Con la barra de specs completa (6 datos) y un precio largo, `.sp-main` exigía 469px en un viewport de 390 y la página entera scrolleaba de lado (1.60.1, medido en /casa-en-condominio-en-venta-en-tamanche/). */ .sp-layout { display: grid; grid-template-columns: minmax(0, 1fr) 390px; gap: var(--space-xl); align-items: start; } .sp-main, .sp-sidebar { min-width: 0; } /* Sections */ .sp-section { margin-bottom: var(--space-2xl); } .sp-heading { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; color: var(--ink); display: block; margin-bottom: var(--space-lg); padding-left: .85rem; border-left: 3px solid var(--accent); } .sp-description { color: var(--ink-secondary); line-height: 1.85; font-size: .95rem; } .sp-amenities { display: flex; flex-wrap: wrap; gap: .5rem; } .sp-amenity-tag { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .9rem; background: var(--surface-warm); border: 1px solid var(--border); color: var(--ink-secondary); border-radius: var(--radius); font-size: .82rem; font-weight: 500; } .sp-amenity-tag svg { color: var(--accent); flex-shrink: 0; } .sp-address-full { display: flex; align-items: center; gap: .4rem; color: var(--ink-secondary); font-size: .92rem; margin-bottom: var(--space-md); } .sp-map { width: 100%; height: 300px; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border); } .sp-map-placeholder { height: 200px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; background: var(--surface-warm); border: 1px solid var(--border); border-radius: var(--radius-lg); color: var(--ink-muted); font-size: .85rem; } /* Calculator */ .sp-calc { background: var(--surface-warm); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-lg); } /* ---- Sidebar ---- */ .sp-sidebar { align-self: start; position: sticky; top: calc(var(--header-h) + 1rem); } .sp-contact-card { background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-lg); box-shadow: var(--shadow); margin-bottom: var(--space-md); } .sp-agent { display: flex; align-items: center; gap: .75rem; margin-bottom: var(--space-lg); padding-bottom: var(--space-md); border-bottom: 1px solid var(--border); } .sp-agent-avatar { width: 50px; height: 50px; border-radius: 50%; flex-shrink: 0; background: var(--accent-subtle); color: var(--accent); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.2rem; font-family: var(--font-display); } .sp-agent-name { font-weight: 600; color: var(--ink); font-size: .95rem; margin-bottom: .2rem; } .sp-agent-badge { display: inline-block; font-size: .7rem; color: var(--sage); background: var(--sage-light); padding: .15rem .5rem; border-radius: var(--radius-sm); font-weight: 500; } /* Variante enlazada: el bloque entero lleva a /asesor/{slug}. */ .sp-agent-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; } .sp-agent--perfil { text-decoration: none; color: inherit; } .sp-agent--perfil .sp-agent-name { transition: color .15s ease; } .sp-agent--perfil:hover .sp-agent-name { color: var(--accent); } .sp-agent-perfil { display: inline-block; font-size: .75rem; font-weight: 500; color: var(--accent); } .sp-agent--perfil:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--radius-sm); } /* La fila del asesor con su QR chico (1.53.0): el separador pasa a la fila; el bloque enlazado (→ perfil en el portal) sigue igual, y el QR (→ su tarjeta directa) va a la derecha, sobre blanco. 76px: a 60 no lo lee un teléfono con destello. Desde 1.60.2 también en móvil (Mike: «te enseño mi pantalla y tú la escaneas»); antes se ocultaba a ≤768. */ .sp-agent-row { display: flex; align-items: center; gap: var(--space-md); margin-bottom: var(--space-lg); padding-bottom: var(--space-md); border-bottom: 1px solid var(--border); } .sp-agent-row .sp-agent { flex: 1; min-width: 0; margin-bottom: 0; padding-bottom: 0; border-bottom: 0; } .sp-agent-qr { flex-shrink: 0; width: 76px; text-align: center; } .sp-agent-qr__codigo { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 3px; } .sp-agent-qr__codigo:empty { display: none; } .sp-agent-qr__codigo svg { display: block; width: 100%; height: auto; } .sp-agent-qr__pie { display: block; font-size: .66rem; color: var(--ink-muted); margin-top: .25rem; letter-spacing: .02em; } /* «Llamar» solo en móvil (1.50.0): en escritorio `tel:` abre un diálogo del sistema y el botón sobra — ahí la única puerta es WhatsApp. Misma especificidad que .btn-block (flex); gana por ir después. El .sp-mini-form del single se retiró; .inmuex-lead-status sigue porque lo usan los forms de /contacto/ y del newsletter de la portada. */ @media (min-width: 769px) { .sp-btn-call { display: none; } } .inmuex-lead-status { margin: .5rem 0 0; font-size: .82rem; line-height: 1.4; min-height: 1.1em; } .inmuex-lead-status:empty { display: none; } .inmuex-lead-status.is-success { color: #0e7c4a; } .inmuex-lead-status.is-error { color: #b42318; } .sp-alert-card { background: var(--accent-light); border: 1px solid var(--accent-subtle); border-radius: var(--radius-lg); padding: var(--space-lg); text-align: center; margin-bottom: var(--space-sm); } .sp-alert-card svg { color: var(--accent); display: block; margin: 0 auto .45rem; } .sp-alert-card p { font-size: .85rem; color: var(--ink-secondary); margin-bottom: var(--space-sm); } .sp-alert-card p strong { color: var(--ink); font-weight: 600; } /* Estado «guardado»: lo pinta saved-searches.js (dashboard) con las MISMAS clases del banner del archive (.hm-save-*), pero aquellas reglas viven bajo .halfmap-save-search — aquí se visten para la tarjeta: apilado, centrado, el verde de "listo" del archive. */ .sp-alert-card.is-saved { display: flex; flex-direction: column; align-items: center; gap: .4rem; background: rgba(34, 160, 107, .07); border-color: rgba(34, 160, 107, .3); } .sp-alert-card.is-saved .hm-save-icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: rgba(34, 160, 107, .14); color: #22a06b; font-weight: 700; } .sp-alert-card.is-saved .hm-save-text { font-size: .85rem; color: var(--ink-secondary); line-height: 1.35; } .sp-alert-card.is-saved .hm-save-link { font-size: .82rem; font-weight: 600; color: var(--accent); text-decoration: none; } .sp-alert-card.is-saved .hm-save-link:hover { text-decoration: underline; } /* ---- Compártela (1.51.0) — mismas piezas que «Comparte mi tarjeta» del asesor ---- */ .sp-share-card { background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-lg); text-align: center; margin-bottom: var(--space-sm); } .sp-share-title { font-weight: 600; font-size: .95rem; color: var(--ink); margin-bottom: .3rem; } .sp-share-lead { font-size: .82rem; color: var(--ink-secondary); line-height: 1.4; margin: 0 auto var(--space-md); max-width: 30ch; } /* El QR se ve en TODAS las pantallas (1.60.2, Mike: «te enseño mi pantalla y tú la escaneas»), pero se habla distinto: en escritorio se imprime, en el celular se muestra para que OTRO lo escanee. Dos utilitarias para el verbo del lead y el pie del QR (ficha y perfil del asesor). */ .qr-solo-movil { display: none; } /* El QR va SIEMPRE sobre blanco, también en el tema oscuro: los lectores fallan con módulos claros sobre fondo oscuro. */ .sp-qr { width: 200px; margin: 0 auto .5rem; padding: 4px; /* «un poco más grande» (Mike) — mismo tamaño que el del asesor */ background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm); } .sp-qr:empty { display: none; } .sp-qr svg { display: block; width: 100%; height: auto; } .sp-qr__pie { font-size: .78rem; color: var(--ink-muted); margin-bottom: .5rem; } .sp-qr__descargar { margin-bottom: var(--space-md); } .sp-share-redes { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; } /* Los círculos de compartir que son