/* ============================================================ NOVA TERRA — Sistema visual 2026 "Editorial luminoso" Mundo claro de galería (no crema-AI: tinte hacia el verde de marca), tipografía grotesca a gran escala, oro fino, fotografía decisiva, y una capa 3D/scroll cinematográfica que realza, nunca tapa. Identidad preservada: Bricolage Grotesque + Hanken Grotesk · verde · oro. ============================================================ */ /* ----- Tokens ----- */ :root { /* Marca */ --ink: oklch(0.20 0.022 165); /* texto principal, casi-negro bosque */ --ink-soft: oklch(0.32 0.026 165); /* subtítulos */ --forest-deep: oklch(0.235 0.045 164); /* fondo drenched más profundo */ --forest: oklch(0.30 0.052 164); /* secciones oscuras (footer, CTA) */ --green: oklch(0.50 0.090 162); /* primario de marca, CTAs */ --green-bright: oklch(0.605 0.108 160); /* hover / activo */ --gold: oklch(0.81 0.088 86); /* acento precioso, filetes en oscuro, focus */ --gold-deep: oklch(0.52 0.105 74); /* oro sobre claro: oscurecido para ≥4.5:1 (texto/enlace) */ --clay: oklch(0.58 0.115 47); /* calidez / industrial */ /* Operación (la señal semántica primaria) */ --op-venta: var(--green); /* Venta = verde bosque */ --op-renta: oklch(0.53 0.12 60); /* Renta = ámbar/ocre: oscurecido para texto blanco ≥4.5:1 */ /* Señal de peligro (acciones destructivas: eliminar). Rojo refinado, no estridente. */ --danger: oklch(0.55 0.17 27); --danger-soft: oklch(0.96 0.03 27); /* Tipo (acento sutil; color de marcador/punto) */ --t-terreno: oklch(0.56 0.095 140); --t-casa: oklch(0.55 0.10 250); --t-departamento: oklch(0.58 0.10 300); --t-industrial: oklch(0.46 0.05 250); --t-bodega: oklch(0.58 0.10 48); --t-local: oklch(0.60 0.105 25); /* Superficies y neutros — blanco galería luminoso (hue 168 = verde de marca, NO crema cálida) */ --paper: oklch(0.975 0.004 168); /* fondo de página */ --paper-2: oklch(0.957 0.006 165); /* banda alterna */ --paper-3: oklch(0.935 0.008 165); /* insets / molduras */ --surface: oklch(1 0 0); /* tarjetas, blanco puro */ --surface-2: oklch(0.992 0.002 168); /* tarjeta sutil */ --line: oklch(0.905 0.007 168); /* filete */ --line-strong: oklch(0.83 0.012 165); /* divisor fuerte / dashed */ --muted: oklch(0.45 0.02 165); /* texto secundario (≥4.5:1 sobre paper) */ --faint: oklch(0.50 0.016 165); /* terciario: oscurecido para ≥4.5:1 en texto normal */ --on-dark: oklch(0.965 0.008 110); /* texto sobre forest/ink */ --on-dark-muted:oklch(0.83 0.016 108); /* secundario sobre oscuro */ /* Glass (mundo claro: vidrio translúcido luminoso, solo sobre superficies vivas) */ --glass: color-mix(in oklab, white 70%, transparent); --glass-2: color-mix(in oklab, white 82%, transparent); --glass-light: color-mix(in oklab, white 82%, transparent); --glass-line: color-mix(in oklab, var(--gold) 38%, transparent); --glass-dark: color-mix(in oklab, oklch(0.22 0.03 164) 52%, transparent); /* Sombras — editoriales: suaves, bajas, nunca pesadas */ --shadow-xs: 0 1px 2px color-mix(in oklab, var(--ink) 6%, transparent); --shadow-sm: 0 2px 8px color-mix(in oklab, var(--ink) 7%, transparent); --shadow-md: 0 10px 30px -12px color-mix(in oklab, var(--ink) 22%, transparent); --shadow-lg: 0 26px 60px -22px color-mix(in oklab, var(--ink) 30%, transparent); --shadow-float:0 40px 90px -38px color-mix(in oklab, var(--forest) 50%, transparent); --shadow-glow: 0 10px 30px -8px color-mix(in oklab, var(--green) 55%, transparent); /* Radios */ --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-xl: 34px; --r-pill: 999px; /* Layout */ --container: 1280px; --container-wide: 1480px; --gutter: clamp(1.2rem, 4vw, 3rem); --nav-h: 76px; /* Tipografía */ --font-display: "Bricolage Grotesque", system-ui, "Segoe UI", Roboto, sans-serif; --font-body: "Hanken Grotesk", system-ui, "Segoe UI", Roboto, sans-serif; --fs-display: clamp(2.7rem, 6.2vw, 5.5rem); --fs-h1: clamp(2.3rem, 5vw, 4rem); --fs-h2: clamp(1.85rem, 3.4vw, 3rem); --fs-h3: clamp(1.18rem, 1.7vw, 1.45rem); --fs-lede: clamp(1.06rem, 1.5vw, 1.3rem); /* Motion */ --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1); --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1); --t-micro: 140ms var(--ease-out-quart); --t-base: 280ms var(--ease-out-quint); --t-slow: 560ms var(--ease-out-expo); /* Z-index (semántico). El header (sticky) debe superar el contenido de Leaflet (tiles/markers/popups ~200-700) para que el mapa no lo tape al hacer scroll. */ --z-base: 1; --z-dropdown: 100; --z-drawer: 300; --z-sticky: 800; --z-scrim: 900; --z-modal: 1000; --z-toast: 1100; --z-tooltip: 1200; } /* ----- Reset ----- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.62; color: var(--ink); background: linear-gradient(180deg, var(--paper) 0%, color-mix(in oklab, var(--paper-2) 60%, var(--paper)) 100%); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-kerning: normal; overflow-x: hidden; position: relative; isolation: isolate; } body.menu-open, body.modal-open, body.mobile-filters-open { overflow: hidden; } body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(112deg, transparent 0 18%, color-mix(in oklab, var(--gold) 11%, transparent) 18.2% 18.35%, transparent 18.6% 100%), linear-gradient(68deg, transparent 0 64%, color-mix(in oklab, var(--green) 8%, transparent) 64.2% 64.34%, transparent 64.6% 100%), repeating-linear-gradient(90deg, color-mix(in oklab, var(--ink) 4%, transparent) 0 1px, transparent 1px 112px), repeating-linear-gradient(0deg, color-mix(in oklab, var(--ink) 3%, transparent) 0 1px, transparent 1px 112px); opacity: 0.34; } body::after { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='720' height='720' viewBox='0 0 720 720'%3E%3Cg fill='none' stroke='%2329473d' stroke-opacity='.13' stroke-width='1'%3E%3Cpath d='M-60 150C55 92 135 112 214 165c85 57 174 81 281 28 86-43 156-41 245 9'/%3E%3Cpath d='M-54 205c104-52 197-37 280 17 82 54 168 62 262 18 98-46 171-31 249 26'/%3E%3Cpath d='M-42 262c93-42 183-26 263 24 88 55 174 56 258 17 108-50 188-21 255 42'/%3E%3Cpath d='M-34 323c92-35 174-14 248 31 91 56 180 51 266 14 110-47 189-4 249 63'/%3E%3Cpath d='M-30 390c98-31 176-1 248 40 91 51 184 40 278 3 104-41 180 13 232 82'/%3E%3Cpath d='M-40 468c116-34 190 3 266 45 87 49 180 31 282-9 92-36 164 23 215 92'/%3E%3C/g%3E%3Cg fill='none' stroke='%23b99a56' stroke-opacity='.18' stroke-width='1'%3E%3Cpath d='M90 628h145M90 628v-145M486 88h145M631 88v145'/%3E%3C/g%3E%3C/svg%3E"), linear-gradient(118deg, transparent 0 7%, color-mix(in oklab, var(--gold) 12%, transparent) 7.08% 7.16%, transparent 7.26% 100%), linear-gradient(62deg, transparent 0 86%, color-mix(in oklab, var(--green) 9%, transparent) 86.08% 86.18%, transparent 86.3% 100%); background-size: min(92vw, 720px) min(92vw, 720px), 100% 100%, 100% 100%; background-position: right -18vw top 18vh, 0 0, 0 0; background-repeat: repeat-y, no-repeat, no-repeat; opacity: 0.42; mix-blend-mode: multiply; } body.catalog-page::before { opacity: 0.14; } body.catalog-page::after, body.admin-page::after { opacity: 0.16; } body > header, body > main, body > footer { position: relative; } body > main, body > footer { z-index: 1; } img, picture, svg, canvas { display: block; max-width: 100%; } img { height: auto; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; } input, select, textarea { font: inherit; color: inherit; } :focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 2px; border-radius: 4px; } ::selection { background: color-mix(in oklab, var(--green) 25%, transparent); } /* ----- Tipografía ----- */ h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.04; letter-spacing: -0.028em; color: var(--ink); text-wrap: balance; font-optical-sizing: auto; } h1 { font-size: var(--fs-h1); letter-spacing: -0.034em; } h2 { font-size: var(--fs-h2); letter-spacing: -0.03em; } h3 { font-size: var(--fs-h3); letter-spacing: -0.02em; line-height: 1.18; } p { text-wrap: pretty; } strong { font-weight: 700; } small { font-size: 0.82rem; } .display { font-size: var(--fs-display); line-height: 0.98; letter-spacing: -0.038em; } .lede { font-size: var(--fs-lede); line-height: 1.5; color: var(--muted); max-width: 58ch; } .measure { max-width: 64ch; } /* Kicker: voz de marca, NO scaffolding en cada sección. Usar 1–2 veces como mucho. */ .kicker { display: inline-flex; align-items: center; gap: 0.55rem; font-family: var(--font-body); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-deep); } .kicker::before { content: ""; width: 1.6rem; height: 1px; background: currentColor; opacity: 0.6; } .eyebrow { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-deep); } /* ----- Layout primitives ----- */ .container { width: min(100%, var(--container)); margin-inline: auto; padding-inline: var(--gutter); } .container-wide { width: min(100%, var(--container-wide)); margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: clamp(4rem, 9vw, 8.5rem); position: relative; isolation: isolate; overflow: clip; } .section-sm { padding-block: clamp(2.5rem, 5vw, 4.5rem); } .section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem 2rem; flex-wrap: wrap; margin-bottom: clamp(2rem, 4vw, 3.4rem); } .section-head > div { max-width: 40ch; display: flex; flex-direction: column; gap: 0.85rem; } .section-head h2 { margin-top: 0.1rem; } .section:not(.band-dark)::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(115deg, transparent 0 12%, color-mix(in oklab, var(--gold) 12%, transparent) 12.1% 12.22%, transparent 12.35% 100%), linear-gradient(180deg, transparent, color-mix(in oklab, white 36%, transparent)); opacity: 0.42; transform: translateY(var(--section-shift, 0)); transition: transform 900ms var(--ease-out-quint); } .section:not(.band-dark)::after { content: ""; position: absolute; inset: clamp(0.8rem, 2vw, 1.4rem); z-index: -1; pointer-events: none; border-top: 1px solid color-mix(in oklab, var(--gold) 16%, transparent); border-left: 1px solid color-mix(in oklab, var(--green) 8%, transparent); opacity: 0.58; -webkit-mask-image: linear-gradient(90deg, #000 0 11rem, transparent 11rem 100%), linear-gradient(180deg, #000 0 9rem, transparent 9rem 100%); mask-image: linear-gradient(90deg, #000 0 11rem, transparent 11rem 100%), linear-gradient(180deg, #000 0 9rem, transparent 9rem 100%); } .section > .container, .section > .container-wide { position: relative; z-index: 1; } /* Mundo oscuro drenched (footer, CTA, mapa preview) */ .band-dark { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='620' height='360' viewBox='0 0 620 360'%3E%3Cg fill='none' stroke='%23f1dca0' stroke-opacity='.18' stroke-width='1'%3E%3Cpath d='M-20 250c84-52 153-53 220-10 78 50 154 60 250 3 73-43 124-45 190-7'/%3E%3Cpath d='M-18 304c87-43 156-39 222 0 85 50 162 48 250-2 74-42 123-32 182 13'/%3E%3Cpath d='M54 52h112M54 52v92M468 308h112M580 216v92'/%3E%3C/g%3E%3C/svg%3E") right 8% bottom 8% / min(52vw, 620px) auto no-repeat, radial-gradient(120% 120% at 12% -10%, color-mix(in oklab, var(--green) 30%, transparent), transparent 55%), linear-gradient(160deg, var(--forest), var(--forest-deep)); color: var(--on-dark); } .band-dark h1, .band-dark h2, .band-dark h3 { color: var(--on-dark); } .band-dark .lede { color: var(--on-dark-muted); } .band-dark .kicker, .band-dark .eyebrow { color: var(--gold); } /* ----- Glass utility (solo sobre contenido vivo: mapa, nav en scroll) ----- */ .glass { background: var(--glass); -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%); border: 1px solid color-mix(in oklab, white 60%, transparent); box-shadow: var(--shadow-md), inset 0 1px 0 var(--glass-line); } .glass-dark { background: var(--glass-dark); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); border: 1px solid color-mix(in oklab, var(--gold) 26%, transparent); color: var(--on-dark); } /* ----- Botones ----- */ .btn { --btn-pad-y: 0.92rem; --btn-pad-x: 1.5rem; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: var(--btn-pad-y) var(--btn-pad-x); min-height: 48px; font-family: var(--font-body); font-weight: 600; font-size: 0.96rem; letter-spacing: 0.005em; border-radius: var(--r-pill); border: 1px solid transparent; white-space: nowrap; transition: transform var(--t-micro), background var(--t-base), color var(--t-base), box-shadow var(--t-base), border-color var(--t-base); } .btn svg { width: 1.05em; height: 1.05em; } .btn-sm { --btn-pad-y: 0.62rem; --btn-pad-x: 1.05rem; min-height: 44px; font-size: 0.9rem; } .btn-block { width: 100%; } .btn-primary { background: linear-gradient(135deg, var(--green-bright), var(--green) 55%, var(--forest)); color: oklch(0.99 0.01 110); box-shadow: var(--shadow-sm); } .btn-primary:hover { box-shadow: var(--shadow-glow); transform: translateY(-2px); } .btn-primary:active { transform: translateY(0); } .btn-outline { border-color: color-mix(in oklab, var(--ink) 22%, transparent); color: var(--ink); background: color-mix(in oklab, white 30%, transparent); } .btn-outline:hover { border-color: var(--green); color: var(--green); transform: translateY(-2px); } .btn-light { background: var(--surface); color: var(--forest); box-shadow: var(--shadow-sm); } .btn-light:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } .btn-ghost { color: var(--ink); } .btn-ghost:hover { color: var(--green); } .link-arrow { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 600; color: var(--forest); transition: gap var(--t-micro), color var(--t-micro); } .link-arrow svg { width: 1.1em; height: 1.1em; transition: transform var(--t-micro); } .link-arrow:hover { color: var(--green); gap: 0.7rem; } .link-arrow:hover svg { transform: translateX(3px); } /* ----- Badges de operación + pills de tipo ----- */ .op-badge { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.32rem 0.72rem; border-radius: var(--r-pill); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: oklch(0.99 0.01 110); background: var(--op-venta); box-shadow: var(--shadow-sm); } .op-badge[data-op="Renta"] { background: var(--op-renta); } .op-badge[data-op="Venta"] { background: var(--op-venta); } .type-pill { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.7rem; border-radius: var(--r-pill); font-size: 0.74rem; font-weight: 600; background: color-mix(in oklab, white 78%, transparent); border: 1px solid color-mix(in oklab, var(--ink) 12%, transparent); color: var(--ink-soft); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .type-dot { width: 0.5rem; height: 0.5rem; border-radius: 999px; background: var(--muted); flex: none; } .t-Terreno .type-dot, .type-pill.t-Terreno .type-dot { background: var(--t-terreno); } .t-Casa .type-dot { background: var(--t-casa); } .t-Departamento .type-dot { background: var(--t-departamento); } .t-Industrial .type-dot { background: var(--t-industrial); } .t-Bodega .type-dot { background: var(--t-bodega); } .t-Local .type-dot { background: var(--t-local); } /* ----- Segmented control ----- */ .segmented { display: inline-flex; padding: 0.28rem; gap: 0.18rem; background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r-pill); } .segmented button { padding: 0.5rem 1rem; border-radius: var(--r-pill); font-size: 0.86rem; font-weight: 600; color: var(--muted); transition: color var(--t-micro), background var(--t-micro), box-shadow var(--t-micro); } .segmented button[aria-pressed="true"] { background: var(--surface); color: var(--forest); box-shadow: var(--shadow-sm); } .segmented button:hover { color: var(--ink); } /* ----- Chips de tipo (filtros) ----- */ .chip-row { display: flex; flex-wrap: wrap; gap: 0.5rem; } .chip-row button, .chip { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0.9rem; border-radius: var(--r-pill); font-size: 0.85rem; font-weight: 600; color: var(--ink-soft); background: var(--surface); border: 1px solid var(--line); transition: all var(--t-micro); } .chip-row button:hover, .chip:hover { border-color: var(--green); color: var(--green); } .chip-row button[aria-pressed="true"], .chip[aria-pressed="true"], .chip.is-active { background: var(--forest); color: var(--on-dark); border-color: var(--forest); } .chip-row button[aria-pressed="true"] .type-dot { box-shadow: 0 0 0 2px color-mix(in oklab, white 30%, transparent); } /* ----- Inputs / forms ----- */ .field { display: flex; flex-direction: column; gap: 0.45rem; } .field > label, .field-label, label { font-size: 0.82rem; font-weight: 600; color: var(--ink-soft); } input, select, textarea { width: 100%; min-height: 48px; padding: 0.72rem 0.9rem; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-sm); box-shadow: inset 0 1px 0 color-mix(in oklab, white 70%, transparent); transition: border-color var(--t-micro), box-shadow var(--t-micro), background var(--t-micro); } textarea { min-height: 96px; resize: vertical; line-height: 1.5; } input::placeholder, textarea::placeholder { color: var(--faint); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px color-mix(in oklab, var(--green) 18%, transparent); } select { appearance: none; background-color: var(--surface); background-image: linear-gradient(180deg, color-mix(in oklab, white 92%, transparent), color-mix(in oklab, var(--paper-2) 52%, transparent)), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2329473d' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat, no-repeat; background-position: 0 0, right 0.9rem center; background-size: 100% 100%, 16px 16px; padding-right: 2.55rem; box-shadow: var(--shadow-xs), inset 0 1px 0 color-mix(in oklab, white 84%, transparent); } select:hover { border-color: color-mix(in oklab, var(--green) 36%, var(--line)); } select option { color: var(--ink); background: var(--surface); } /* Imagen de respaldo (cuando una foto del inventario da 404): se distingue de una foto real. */ img.img-fallback { object-fit: cover; opacity: 0.9; filter: saturate(0.8); } /* Páginas legales (Aviso de Privacidad, Términos) */ .legal-main { max-width: 760px; margin: 0 auto; padding: calc(var(--nav-h) + 2.4rem) var(--gutter, 1.2rem) 4rem; } .legal-doc h1 { font-size: clamp(1.9rem, 5vw, 2.8rem); margin: .4rem 0 .2rem; } .legal-doc h2 { font-size: 1.2rem; margin: 2rem 0 .5rem; color: var(--forest); } .legal-doc p { color: var(--ink-soft); line-height: 1.65; margin: .5rem 0; } .legal-doc a { color: var(--gold-deep); font-weight: 600; } .legal-doc a:hover { color: var(--green); } .legal-updated { color: var(--muted); font-size: .85rem; } .legal-foot { margin-top: 2rem; padding-top: 1.2rem; border-top: 1px solid var(--line); font-size: .9rem; } .form-consent { font-size: 0.76rem; line-height: 1.4; color: var(--muted); text-align: center; margin: 0.1rem 0 0; } .form-consent a { color: var(--gold-deep); font-weight: 600; } .footer-legal { display: inline-flex; gap: 1.1rem; flex-wrap: wrap; } .footer-legal a { color: var(--on-dark-muted); font-weight: 600; } .footer-legal a:hover { color: var(--on-dark); text-decoration: underline; } /* WhatsApp aún no configurado (WA_PHONE vacío): se ocultan todas sus opciones para no mostrar un canal que no responde. Al definir WA_PHONE en format.js vuelven a aparecer. */ html.wa-off a[href*="wa.me"], html.wa-off a[href*="whatsapp.com"], html.wa-off .btn-wa, html.wa-off .chat-wa-link, html.wa-off .advisor-wa, html.wa-off .mobile-menu-wa, html.wa-off .lead-alt { display: none !important; } /* Inputs con datalist (combobox): chevron para que se vea que tienen opciones predefinidas. */ input[list] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2329473d' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.7rem center; background-size: 15px 15px; padding-right: 2.1rem; } input[list]::-webkit-calendar-picker-indicator { opacity: 0; } .price-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; } .col-2 { grid-column: span 2; } .hidden { display: none !important; } /* ----- Favorito (corazón) ----- */ .fav-btn { position: absolute; top: 0.85rem; right: 0.85rem; z-index: 2; width: 44px; height: 44px; border-radius: 999px; display: grid; place-items: center; background: var(--glass-2); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid color-mix(in oklab, white 60%, transparent); box-shadow: var(--shadow-sm); transition: transform var(--t-micro), background var(--t-micro); } .fav-btn svg { width: 21px; height: 21px; fill: none; stroke: var(--ink); stroke-width: 1.8; } .fav-btn:hover { transform: scale(1.08); } .fav-btn[aria-pressed="true"] svg { fill: var(--op-renta); stroke: var(--op-renta); } /* ----- Cuenta publica / favoritos ----- */ .account-trigger { position: relative; min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; padding: 0.58rem 0.82rem; border-radius: var(--r-pill); border: 1px solid color-mix(in oklab, var(--ink) 14%, transparent); background: color-mix(in oklab, white 58%, transparent); color: var(--ink-soft); font-weight: 700; font-size: 0.88rem; -webkit-backdrop-filter: blur(12px) saturate(140%); backdrop-filter: blur(12px) saturate(140%); box-shadow: var(--shadow-xs); transition: color var(--t-micro), border-color var(--t-micro), transform var(--t-micro), box-shadow var(--t-base); } .account-trigger:hover, .account-trigger.is-signed { color: var(--forest); border-color: color-mix(in oklab, var(--green) 34%, var(--line)); box-shadow: var(--shadow-sm); } .account-trigger:hover { transform: translateY(-1px); } .account-trigger em { min-width: 1.2rem; height: 1.2rem; display: grid; place-items: center; border-radius: 999px; background: var(--gold); color: var(--forest-deep); font-style: normal; font-size: 0.68rem; font-weight: 800; line-height: 1; } .account-trigger em[hidden] { display: none !important; } /* El acceso al Panel es un .btn (display:inline-flex), que de lo contrario gana sobre el atributo [hidden] del user-agent y dejaría el botón VISIBLE para cualquiera. Esto fuerza que el gating por rol (renderChrome marca hidden salvo owner/admin) realmente lo oculte. */ .nt-admin-link[hidden] { display: none !important; } .mobile-account-card { margin-bottom: 0.4rem; } .mobile-account-button { width: 100%; display: grid; grid-template-columns: 44px 1fr; align-items: center; gap: 0.75rem; padding: 0.7rem; border-radius: 18px; background: var(--paper-2); border: 1px solid var(--line); text-align: left; } .mobile-account-button span:last-child { display: flex; flex-direction: column; gap: 0.04rem; min-width: 0; } .mobile-account-button strong { font-size: 0.98rem; color: var(--forest); } .mobile-account-button small { color: var(--muted); font-size: 0.78rem; line-height: 1.24; } .account-avatar { width: 44px; height: 44px; border-radius: 999px; display: grid; place-items: center; background: linear-gradient(145deg, var(--green), var(--forest)); color: var(--on-dark); font-family: var(--font-display); font-weight: 800; letter-spacing: 0.02em; } .account-mode { margin-bottom: 0.8rem; } .account-auth[hidden] { display: none !important; } .account-feedback { margin-top: 0.55rem; } /* ----- Verificación de cuenta ----- */ .verify-page { min-height: 100vh; } .verify-main { min-height: 100vh; display: grid; place-items: center; padding: calc(var(--nav-h) + 1.5rem) var(--gutter) 3rem; } .verify-card { width: min(100%, 480px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(1.4rem, 4vw, 2.2rem); box-shadow: var(--shadow-md); } .verify-brand { margin-bottom: 1.2rem; } .verify-card h1 { font-size: clamp(2rem, 5vw, 3rem); margin: 0.35rem 0 0.5rem; } .verify-card p { color: var(--muted); margin-bottom: 1rem; } /* ----- Chat publico ----- */ .chat-launch { position: fixed; right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom)); z-index: calc(var(--z-sticky) + 2); min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 0.48rem; padding: 0.72rem 1rem; border-radius: var(--r-pill); color: var(--on-dark); background: linear-gradient(135deg, var(--forest), var(--green)); box-shadow: var(--shadow-md); font-weight: 700; font-size: 0.92rem; letter-spacing: 0.005em; transition: transform var(--t-micro), box-shadow var(--t-micro); } .chat-launch:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); } .chat-launch svg { width: 19px; height: 19px; } .catalog-page .chat-launch { left: 1.3rem; right: auto; bottom: 1.3rem; width: 54px; height: 54px; min-height: 54px; padding: 0; border-radius: 999px; } .catalog-page .chat-launch span { display: none; } .catalog-page .chat-launch svg { width: 22px; height: 22px; } .chat-modal { position: fixed; inset: 0; z-index: var(--z-modal); /* El panel abre desde la esquina del botón: por defecto abajo-DERECHA (home, ficha, calc). */ display: none; place-items: end end; padding: 1rem; background: color-mix(in oklab, var(--forest-deep) 28%, transparent); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); } .chat-modal.open { display: grid; } /* En el catálogo el botón vive abajo-izquierda, así que el panel abre de ese lado. */ .catalog-page .chat-modal { place-items: end start; } .chat-dialog { width: min(100%, 440px); max-height: min(800px, calc(100dvh - 2rem)); display: grid; grid-template-rows: auto minmax(300px, 1fr) auto auto; background: var(--surface); border: 1px solid var(--line); border-radius: 24px; overflow: hidden; box-shadow: var(--shadow-lg); } /* Pantallas bajas (teléfono en horizontal, laptops cortas): el piso de la conversación cede y usamos dvh para que el campo de texto y el botón de enviar nunca queden recortados. */ @media (max-height: 700px) { .chat-dialog { grid-template-rows: auto minmax(110px, 1fr) auto auto; max-height: calc(100dvh - 1rem); } } .chat-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1rem 0.8rem; border-bottom: 1px solid var(--line); } .chat-head h2 { font-size: 1.16rem; } .chat-close { width: 44px; height: 44px; border-radius: 999px; display: grid; place-items: center; background: var(--paper-2); color: var(--ink); } .chat-messages { display: flex; flex-direction: column; gap: 0.65rem; padding: 1rem; overflow-y: auto; /* El scroll queda DENTRO de la conversación, no encadena a la página ni al text box. */ overscroll-behavior: contain; background: color-mix(in oklab, var(--paper) 72%, white); } .chat-empty { margin: auto; text-align: center; color: var(--muted); display: grid; gap: 0.25rem; } .chat-empty strong { color: var(--forest); } .chat-bubble { max-width: 86%; padding: 0.72rem 0.85rem; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-xs); } .chat-bubble.is-client { align-self: flex-end; color: var(--on-dark); background: linear-gradient(135deg, var(--green), var(--forest)); border-color: color-mix(in oklab, var(--green) 45%, transparent); } .chat-bubble.is-admin { align-self: flex-start; } .chat-bubble p { font-size: 0.92rem; line-height: 1.38; } .chat-bubble time { display: block; margin-top: 0.3rem; font-size: 0.68rem; opacity: 0.72; } /* align-items:end → el botón no se estira al alto del textarea (antes se veía enorme). */ .chat-form { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 0.55rem; padding: 0.8rem; border-top: 1px solid var(--line); } .chat-form textarea { min-height: 50px; max-height: 150px; resize: none; border-radius: 16px; } /* Botón de enviar compacto (ícono), alineado al fondo del textarea. */ .chat-send { width: 46px; height: 46px; min-height: 0; padding: 0; border-radius: 14px; display: grid; place-items: center; align-self: end; } .chat-send svg { width: 20px; height: 20px; } .chat-feedback { padding: 0 1rem 0.85rem; } .chat-wa-link { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin: 0 0.8rem 0.85rem; padding: 0.72rem 1rem; border-radius: 14px; background: color-mix(in oklab, #25d366 14%, var(--surface)); border: 1px solid color-mix(in oklab, #25d366 38%, transparent); color: #0f7a40; font-weight: 700; font-size: 0.88rem; transition: background var(--t-micro); } .chat-wa-link:hover { background: color-mix(in oklab, #25d366 22%, var(--surface)); } .chat-wa-link svg { flex: none; color: #25d366; } /* Popup "WhatsApp en mantenimiento" — aparece solo al hacer clic en una opción de WhatsApp. */ .wa-notice { position: fixed; inset: 0; z-index: calc(var(--z-modal) + 5); display: none; place-items: center; padding: 1rem; background: color-mix(in oklab, var(--forest-deep) 32%, transparent); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); } .wa-notice.open { display: grid; } .wa-notice-card { display: grid; justify-items: center; gap: 0.45rem; width: min(100%, 320px); padding: 1.5rem 1.4rem 1.3rem; background: var(--surface); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow-lg); text-align: center; animation: wa-pop 0.24s var(--ease-out-quart, ease-out) both; } @keyframes wa-pop { from { opacity: 0; transform: translateY(10px) scale(0.97); } to { opacity: 1; transform: none; } } .wa-notice-icon { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 999px; background: color-mix(in oklab, #25d366 16%, var(--surface)); color: #25d366; margin-bottom: 0.2rem; } .wa-notice-card strong { font-family: var(--font-display); font-size: 1.12rem; color: var(--ink); } .wa-notice-card p { color: var(--muted); font-size: 0.9rem; line-height: 1.45; margin: 0; } .wa-notice-actions { display: flex; gap: 0.55rem; margin-top: 0.6rem; } @media (prefers-reduced-motion: reduce) { .wa-notice-card { animation: none; } } @media (max-width: 560px) { .chat-launch { right: 1rem; bottom: 1rem; padding-inline: 0.88rem; } .home-page .chat-launch { display: none; } /* En la ficha, la barra fija inferior ocupa la esquina: subimos el chat para que no se encimen. */ .detail-page .chat-launch { bottom: calc(5.8rem + env(safe-area-inset-bottom)); } .detail-page .chat-launch span { display: none; } .detail-page .chat-launch { padding-inline: 0; width: 48px; height: 48px; justify-content: center; } .chat-modal { place-items: end stretch; padding: 0.75rem; } .chat-dialog { width: 100%; max-height: min(680px, calc(100dvh - 1.5rem)); border-radius: 22px; grid-template-rows: auto minmax(160px, 1fr) auto auto; } } /* ============================================================ REVEALS (realzan contenido ya visible; nunca lo ocultan para siempre) site.js conmuta .in-view / .is-visible. Sin JS / reduced-motion → visible. ============================================================ */ .reveal, .reveal-up, .reveal-left, .reveal-right, .reveal-scale, .reveal-blur { transition: opacity var(--t-slow), transform var(--t-slow), filter var(--t-slow); } .reveal { opacity: 0; } .reveal-up { opacity: 0; transform: translateY(34px); } .reveal-left { opacity: 0; transform: translateX(-34px); } .reveal-right { opacity: 0; transform: translateX(34px); } .reveal-scale { opacity: 0; transform: scale(0.94); } .reveal-blur { opacity: 0; filter: blur(14px); } .reveal.is-visible, .reveal-up.is-visible, .reveal-left.is-visible, .reveal-right.is-visible, .reveal-scale.is-visible, .reveal-blur.is-visible, .reveal.in-view, .reveal-up.in-view, .reveal-left.in-view, .reveal-right.in-view, .reveal-scale.in-view, .reveal-blur.in-view { opacity: 1; transform: none; filter: none; } .split-word { display: inline-block; opacity: 0; transform: translateY(0.5em) rotate(2deg); transition: opacity 0.7s var(--ease-out-expo), transform 0.7s var(--ease-out-expo); } .split-word.is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal, .reveal-up, .reveal-left, .reveal-right, .reveal-scale, .reveal-blur, .split-word { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; } } /* ============================================================ HEADER / NAV ============================================================ */ .topbar { position: fixed; inset: 0 0 auto 0; z-index: var(--z-sticky); height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-inline: var(--gutter); transition: background var(--t-base), box-shadow var(--t-base), border-color var(--t-base), backdrop-filter var(--t-base); border-bottom: 1px solid transparent; } .topbar-scrolled { background: var(--glass-2); -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%); border-bottom-color: var(--line); box-shadow: var(--shadow-sm); } .brand { display: inline-flex; align-items: center; gap: 0.5rem; flex: none; } .brand-logo { height: 38px; width: auto; } .brand-emblem { width: 40px; height: 40px; flex: none; background: url("../images/logos/logo_nova_terra_sin_fondo.png") no-repeat center 28% / 152%; } .brand-word { font-family: var(--font-display); font-weight: 700; font-size: 1.32rem; letter-spacing: -0.02em; color: var(--ink); white-space: nowrap; } .band-dark .brand-word, .nav-over-hero .topbar:not(.topbar-scrolled) .brand-word { color: var(--ink); } .main-nav { display: flex; align-items: center; gap: 1.7rem; } .main-nav a { font-size: 0.94rem; font-weight: 600; color: var(--ink-soft); position: relative; padding: 0.3rem 0; transition: color var(--t-micro); } .main-nav a::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 0; height: 2px; background: var(--gold-deep); transition: width var(--t-base); } .main-nav a:hover { color: var(--ink); } .main-nav a:hover::after, .main-nav a.nav-current::after { width: 100%; } .main-nav a.nav-current { color: var(--forest); } .topbar-actions { display: flex; align-items: center; gap: 0.7rem; } .nav-toggle { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; color: var(--ink); } /* Nav sobre hero claro: el header se mezcla hasta el scroll */ body.nav-over-hero .topbar:not(.topbar-scrolled) .main-nav a { color: var(--ink-soft); } /* Mobile menu */ .mobile-menu { position: fixed; inset: 0; z-index: var(--z-modal); display: none; } .mobile-menu.open { display: block; } .mobile-menu::before { content: ""; position: absolute; inset: 0; background: color-mix(in oklab, var(--ink) 38%, transparent); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: fade-in var(--t-base); } .mobile-menu-panel { position: absolute; inset: 0 0 0 auto; width: min(86vw, 380px); background: var(--surface); padding: clamp(1.5rem, 5vw, 2.5rem); display: flex; flex-direction: column; gap: 1rem; box-shadow: var(--shadow-lg); animation: slide-in-right var(--t-base); } .mobile-menu-close { align-self: flex-end; width: 44px; height: 44px; font-size: 1.3rem; color: var(--muted); } .mobile-menu-nav { display: flex; flex-direction: column; gap: 0.3rem; margin-block: 0.5rem 1rem; } .mobile-menu-nav a { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; padding: 0.6rem 0; border-bottom: 1px solid var(--line); } .mobile-menu-nav a[aria-current="page"] { color: var(--green); } .mobile-menu-wa { margin-top: 0; text-align: center; padding: 0.8rem; color: var(--muted); font-weight: 600; } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes slide-in-right { from { transform: translateX(100%); } to { transform: none; } } /* Scroll progress + back-to-top */ .scroll-progress { position: fixed; top: 0; left: 0; height: 2px; width: 0; z-index: var(--z-toast); background: linear-gradient(90deg, var(--green), var(--gold)); } .scroll-top-btn { /* Se apila ARRIBA del botón de chat (mismo rincón) para que no queden amontonados. */ position: fixed; bottom: 5rem; right: max(1rem, env(safe-area-inset-right)); z-index: var(--z-sticky); width: 48px; height: 48px; border-radius: 999px; display: grid; place-items: center; line-height: 1; background: var(--forest); color: var(--on-dark); box-shadow: var(--shadow-md); font-size: 1.2rem; opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity var(--t-base), transform var(--t-base), background var(--t-micro); } .scroll-top-btn.is-visible { opacity: 1; transform: none; pointer-events: auto; } .scroll-top-btn:hover { background: var(--green); } /* ============================================================ HERO (home) — globo WebGL luminoso + titular editorial asimétrico ============================================================ */ .hero { position: relative; min-height: 100svh; display: flex; align-items: center; padding-top: var(--nav-h); overflow: hidden; background: radial-gradient(56% 80% at 82% 46%, color-mix(in oklab, var(--green) 8%, transparent), transparent 68%), linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%); } .hero::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(100deg, var(--paper) 0%, color-mix(in oklab, var(--paper) 99%, transparent) 28%, color-mix(in oklab, var(--paper) 88%, transparent) 42%, color-mix(in oklab, var(--paper) 52%, transparent) 60%, color-mix(in oklab, var(--paper) 12%, transparent) 80%, transparent 100%), radial-gradient(56% 82% at 24% 47%, color-mix(in oklab, var(--paper) 92%, transparent), color-mix(in oklab, var(--paper) 54%, transparent) 58%, transparent 100%), linear-gradient(90deg, transparent 48%, color-mix(in oklab, var(--paper) 14%, transparent) 68%, transparent 100%); } .hero-bg { position: absolute; inset: 0; z-index: 0; } .hero-bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity var(--t-slow); } .no-globe .hero-bg img { opacity: 0.42; } .hero-globe { position: absolute; top: 0; right: -10vw; width: min(68%, 980px); height: 100%; z-index: 1; -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.02) 10%, rgba(0,0,0,0.28) 28%, rgba(0,0,0,0.82) 48%, #000 68%); mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.02) 10%, rgba(0,0,0,0.28) 28%, rgba(0,0,0,0.82) 48%, #000 68%); } .hero-globe canvas { width: 100% !important; height: 100% !important; } .globe-loader { position: absolute; left: 50%; top: 50%; z-index: 2; display: grid; place-items: center; gap: 0.5rem; color: var(--forest); transform: translate(-50%, -50%); opacity: 0; transition: opacity var(--t-base), transform var(--t-base); pointer-events: none; } .globe-loading .globe-loader { opacity: 1; } .globe-ready .globe-loader { opacity: 0; transform: translate(-50%, -45%); } .globe-loader span { width: 44px; height: 44px; border-radius: 999px; border: 1px solid color-mix(in oklab, var(--gold) 45%, transparent); border-top-color: var(--green); animation: globe-loader-spin 1s linear infinite; box-shadow: 0 0 26px color-mix(in oklab, var(--gold) 24%, transparent); } .globe-loader strong { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; } @keyframes globe-loader-spin { to { transform: rotate(360deg); } } .hero-inner { position: relative; z-index: 3; width: min(100%, var(--container)); margin-inline: auto; padding-inline: var(--gutter); display: flex; flex-direction: column; align-items: flex-start; gap: clamp(1.1rem, 2vw, 1.7rem); } .hero-inner > * { max-width: 34rem; } .hero-eyebrow { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-deep); display: inline-flex; align-items: center; gap: 0.55rem; } .hero-eyebrow::before { content: ""; width: 1.8rem; height: 1px; background: currentColor; opacity: 0.6; } .hero h1 { font-size: var(--fs-display); line-height: 0.95; letter-spacing: -0.04em; } .hero h1 em { font-style: normal; color: var(--green); } .hero .lede { color: var(--ink-soft); max-width: 34rem; } .hero-cta { display: flex; flex-wrap: wrap; gap: 0.8rem; } /* Buscador del hero (glass oscuro flotando sobre el globo) */ .hero-search { margin-top: clamp(0.6rem, 2vw, 1.4rem); display: grid; grid-template-columns: 1fr 1fr auto; gap: 0.7rem; align-items: end; padding: 1rem; border-radius: var(--r-lg); max-width: 540px; } .hero-search .segmented { grid-column: 1 / -1; justify-self: start; } .hero-search .segmented { background: color-mix(in oklab, var(--forest) 30%, transparent); border-color: color-mix(in oklab, var(--gold) 24%, transparent); transition: background var(--t-base), border-color var(--t-base); } .hero-search .segmented button { color: var(--on-dark-muted); } .hero-search .segmented button[aria-pressed="true"] { background: var(--on-dark); color: var(--forest); } /* El cuadro de fondo cambia de color según la operación (feedback claro): el botón activo toma el color de la operación (verde Venta / ámbar Renta) y el cuadro un tinte a juego. */ .hero-search .segmented[data-op="Venta"] { background: color-mix(in oklab, var(--op-venta) 38%, transparent); border-color: var(--op-venta); } .hero-search .segmented[data-op="Renta"] { background: color-mix(in oklab, var(--op-renta) 40%, transparent); border-color: var(--op-renta); } .hero-search .segmented[data-op="Venta"] button[aria-pressed="true"] { background: var(--op-venta); color: #fff; } .hero-search .segmented[data-op="Renta"] button[aria-pressed="true"] { background: var(--op-renta); color: #fff; } /* TODA la caja de búsqueda (no solo el segmentado) se tiñe según la operación: capa de gradiente + borde + halo sobre el glass oscuro, para dejar clarísimo el cambio. */ .hero-search { transition: border-color var(--t-base), box-shadow var(--t-base), background-image var(--t-base); } .hero-search[data-op="Venta"] { border-color: color-mix(in oklab, var(--op-venta) 65%, transparent); background-image: linear-gradient(135deg, color-mix(in oklab, var(--op-venta) 42%, transparent), color-mix(in oklab, var(--op-venta) 20%, transparent)); box-shadow: 0 0 0 5px color-mix(in oklab, var(--op-venta) 18%, transparent), var(--shadow-md); } .hero-search[data-op="Renta"] { border-color: color-mix(in oklab, var(--op-renta) 68%, transparent); background-image: linear-gradient(135deg, color-mix(in oklab, var(--op-renta) 46%, transparent), color-mix(in oklab, var(--op-renta) 22%, transparent)); box-shadow: 0 0 0 5px color-mix(in oklab, var(--op-renta) 20%, transparent), var(--shadow-md); } .hero-search .field label { color: var(--on-dark-muted); } .hero-search select, .panel-filters select { border-color: color-mix(in oklab, var(--green) 18%, var(--line)); } .hero-search .btn-primary { height: 48px; } /* indicador de scroll (abajo-izquierda, alineado a la columna de texto) */ .hero-scroll-cue { position: absolute; left: var(--gutter); bottom: 1.5rem; z-index: 4; display: flex; flex-direction: row; align-items: center; gap: 0.6rem; color: var(--muted); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; } .hero-scroll-cue span.dot { width: 22px; height: 34px; border: 1.5px solid color-mix(in oklab, var(--ink) 30%, transparent); border-radius: 14px; position: relative; flex: none; } .hero-scroll-cue span.dot::after { content: ""; position: absolute; top: 6px; left: 50%; width: 4px; height: 8px; border-radius: 4px; background: var(--green); transform: translateX(-50%); animation: scroll-cue 1.8s var(--ease-out-quint) infinite; } @keyframes scroll-cue { 0% { opacity: 0; transform: translate(-50%, 0); } 30% { opacity: 1; } 60% { opacity: 1; transform: translate(-50%, 12px); } 100% { opacity: 0; transform: translate(-50%, 14px); } } /* Widget de la propiedad enfocada en el globo (clicable) */ .globe-widget { position: absolute; z-index: 4; left: 0; top: 0; width: min(280px, 78vw); display: grid; grid-template-columns: 58px 1fr; gap: 0.5rem 0.68rem; align-items: center; padding: 0.64rem; border-radius: var(--r-md); background: var(--glass-2); -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%); border: 1px solid color-mix(in oklab, white 58%, transparent); box-shadow: var(--shadow-lg), inset 0 1px 0 var(--glass-line); opacity: 0; transform: translateY(14px) scale(0.98); pointer-events: none; transition: opacity var(--t-base), transform var(--t-base), box-shadow var(--t-base); } .globe-widget.is-on { opacity: 1; transform: none; pointer-events: auto; } .globe-widget:hover { transform: translateY(-3px); box-shadow: var(--shadow-float); } .globe-connector { position: absolute; z-index: 3; left: 0; top: 0; height: 1px; width: 0; pointer-events: none; opacity: 0; transform-origin: 0 50%; background: linear-gradient(90deg, color-mix(in oklab, var(--gold) 54%, white), color-mix(in oklab, var(--gold) 10%, transparent)); box-shadow: 0 0 6px color-mix(in oklab, var(--gold) 18%, transparent); transition: opacity 0.24s var(--ease-out-quart), width 0.24s var(--ease-out-quart); } .globe-connector::before { content: ""; position: absolute; left: -3px; top: 50%; width: 7px; height: 7px; border-radius: 999px; transform: translateY(-50%); background: color-mix(in oklab, var(--gold) 70%, white); box-shadow: 0 0 0 3px color-mix(in oklab, var(--gold) 10%, transparent); } .globe-connector.is-on { opacity: 0.58; } .gw-media { width: 58px; height: 58px; border-radius: var(--r-sm); overflow: hidden; } .gw-media img { width: 100%; height: 100%; object-fit: cover; } .gw-body { display: flex; flex-direction: column; gap: 0.14rem; min-width: 0; } .gw-body .op-badge { align-self: flex-start; font-size: 0.6rem; padding: 0.18rem 0.5rem; } .gw-body strong { font-family: var(--font-display); font-weight: 700; font-size: 0.94rem; line-height: 1.12; color: var(--ink); letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gw-loc { font-size: 0.76rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gw-price { font-size: 0.95rem; margin-top: 0.05rem; } .gw-cta { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.8rem; font-weight: 600; color: var(--green); } .globe-widget:hover .gw-cta svg { transform: translateX(3px); } .gw-cta svg { transition: transform var(--t-micro); } .globe-widget.gw-swap .gw-media img, .globe-widget.gw-swap .gw-body > * { animation: gw-in 0.38s var(--ease-out-quart) both; } @keyframes gw-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } } @media (max-width: 900px) { .globe-widget { display: none; } } @media (prefers-reduced-motion: reduce) { .globe-widget, .globe-widget.gw-swap .gw-media img, .globe-widget.gw-swap .gw-body > * { animation: none; transition: opacity 0.2s; transform: none; } } /* ============================================================ TARJETAS DE PROPIEDAD (3D tilt) — usadas en home + catálogo ============================================================ */ .tilt { transform-style: preserve-3d; transition: transform var(--t-base), box-shadow var(--t-base); } .tilt.is-tilting { transition: box-shadow var(--t-base); } .prop-card, .recommended-card { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base); } .prop-card:hover, .recommended-card:hover { box-shadow: var(--shadow-lg); border-color: color-mix(in oklab, var(--gold) 40%, var(--line)); transform: translateY(-4px); } /* El radio superior va en la propia media: mantiene las esquinas redondeadas aunque la tarjeta tenga transform 3D (tilt) — evita que se vean cuadradas en hover. */ .prop-media { position: relative; aspect-ratio: 16 / 11; overflow: hidden; border-radius: var(--r-lg) var(--r-lg) 0 0; } .tilt, .prop-card, .recommended-card { -webkit-backface-visibility: hidden; backface-visibility: hidden; } .prop-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease-out-expo); } .prop-card:hover .prop-media img { transform: scale(1.06); } .prop-media-top { position: absolute; inset: 0.85rem 0.85rem auto; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; } /* Sello "Con plano" (la propiedad incluye plano/levantamiento). */ .plan-badge { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.22rem 0.55rem; border-radius: var(--r-pill); font-size: 0.66rem; font-weight: 800; letter-spacing: 0.02em; background: var(--glass-dark); color: var(--on-dark); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid color-mix(in oklab, var(--gold) 40%, transparent); } .plan-badge svg { color: var(--gold); } .prop-body { display: flex; flex-direction: column; gap: 0.55rem; padding: 1.15rem 1.25rem 1.3rem; flex: 1; } .prop-loc { font-size: 0.84rem; color: var(--muted); display: flex; align-items: center; gap: 0.35rem; } .prop-loc svg { width: 1rem; height: 1rem; flex: none; color: var(--green); } .prop-body h3 { font-size: 1.18rem; } .prop-specs { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; margin-top: 0.1rem; color: var(--ink-soft); font-size: 0.86rem; } .prop-specs span { display: inline-flex; align-items: center; gap: 0.35rem; } .prop-specs svg { width: 1rem; height: 1rem; color: var(--green); } .prop-foot { margin-top: auto; padding-top: 0.9rem; display: flex; align-items: center; justify-content: space-between; gap: 0.7rem; border-top: 1px solid var(--line); } .prop-price { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; color: var(--forest); font-variant-numeric: tabular-nums; } .prop-price small { font-size: 0.72rem; font-weight: 600; color: var(--muted); } /* ============================================================ HOME · DESTACADAS (galería horizontal editorial) ============================================================ */ .recommended-section { background: var(--paper); } .featured-wrap { position: relative; } .featured-carousel { display: grid; grid-auto-flow: column; grid-auto-columns: min(86vw, 384px); gap: 1.4rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0.5rem 0.4rem 1.4rem; margin-inline: -0.4rem; scrollbar-width: none; } .featured-carousel::-webkit-scrollbar { display: none; } .recommended-card { scroll-snap-align: start; } .recommended-card[data-href] { cursor: pointer; } .recommended-card .prop-media { aspect-ratio: 4 / 3; } .recommended-card:hover .prop-media img { transform: scale(1.06); } .recommended-card.is-tilting::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; z-index: 3; background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), color-mix(in oklab, white 32%, transparent), transparent 62%); mix-blend-mode: soft-light; } .recommended-card-body { display: flex; flex-direction: column; gap: 0.5rem; padding: 1.2rem 1.3rem 1.4rem; flex: 1; } .recommended-kicker { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-deep); } .recommended-card h3 { font-size: 1.32rem; } .recommended-desc { font-size: 0.9rem; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .recommended-specs { font-size: 0.84rem; color: var(--ink-soft); } .recommended-card-foot { margin-top: auto; padding-top: 0.9rem; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 0.7rem; } .recommended-link { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 600; color: var(--green); font-size: 0.9rem; } .recommended-link svg { transition: transform var(--t-micro); } .recommended-card:hover .recommended-link svg { transform: translateX(4px); } .carousel-arrow { position: absolute; top: 38%; z-index: 4; width: 52px; height: 52px; border-radius: 999px; display: grid; place-items: center; background: var(--surface); color: var(--forest); border: 1px solid var(--line); box-shadow: var(--shadow-md); transition: transform var(--t-micro), background var(--t-micro), color var(--t-micro); } .carousel-arrow:hover { background: var(--forest); color: var(--on-dark); transform: scale(1.06); } .carousel-arrow.prev { left: -10px; } .carousel-arrow.next { right: -10px; } .carousel-hint { font-size: 0.82rem; color: var(--faint); margin-top: 0.4rem; } @media (max-width: 720px) { .carousel-arrow { display: none; } } /* ============================================================ HOME · ZONAS (mosaico asimétrico) ============================================================ */ .zone-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: clamp(200px, 24vw, 300px); gap: 1.1rem; } .zone-card { position: relative; overflow: hidden; border-radius: var(--r-lg); box-shadow: var(--shadow-sm); } .zone-card:nth-child(1) { grid-column: span 2; grid-row: span 2; } .zone-card:nth-child(4) { grid-column: span 2; } .zone-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out-expo); } .zone-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 38%, color-mix(in oklab, var(--forest-deep) 82%, transparent)); } .zone-card:hover img { transform: scale(1.07); } .zone-meta { position: absolute; inset: auto 0 0 0; z-index: 2; padding: 1.3rem; color: var(--on-dark); display: flex; flex-direction: column; gap: 0.15rem; } .zone-meta h3 { color: var(--on-dark); font-size: clamp(1.2rem, 2vw, 1.7rem); } .zone-meta span { color: var(--on-dark-muted); font-size: 0.86rem; } @media (max-width: 720px) { .zone-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 180px; } .zone-card:nth-child(1) { grid-column: span 2; grid-row: span 1; } .zone-card:nth-child(4) { grid-column: span 2; } } /* ============================================================ HOME · MAPA PREVIEW (full-bleed sobre banda oscura) ============================================================ */ .home-map { position: relative; isolation: isolate; height: clamp(380px, 52vw, 560px); border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-lg), inset 0 0 0 1px color-mix(in oklab, var(--gold) 22%, transparent); border: 1px solid color-mix(in oklab, var(--gold) 26%, transparent); } .home-map .leaflet-tile-pane, .catalog-map .leaflet-tile-pane { filter: saturate(0.86) contrast(0.98) brightness(1.01); } #homeMap { position: absolute; inset: 0; cursor: pointer; } .map-hover-hint { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 500; pointer-events: none; padding: 0.7rem 1.2rem; border-radius: var(--r-pill); background: var(--glass-dark); color: var(--on-dark); font-weight: 600; font-size: 0.9rem; opacity: 0; transition: opacity var(--t-base); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .home-map:hover .map-hover-hint { opacity: 1; } .map-legend { position: absolute; left: 1rem; bottom: 1rem; z-index: 500; display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; padding: 0.7rem 1rem; border-radius: var(--r-md); font-size: 0.78rem; color: var(--ink-soft); } .map-legend span { display: inline-flex; align-items: center; gap: 0.4rem; } .legend-dot { width: 0.6rem; height: 0.6rem; border-radius: 999px; } /* ============================================================ HOME · PROCESO ============================================================ */ .process-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.2rem, 3vw, 2.5rem); } .process-step { display: flex; flex-direction: column; gap: 0.6rem; padding-top: 1.6rem; border-top: 2px solid var(--line-strong); } .process-step .step-n { font-family: var(--font-display); font-size: 1rem; font-weight: 700; color: var(--gold-deep); } .process-step h3 { font-size: 1.3rem; } .process-step p { color: var(--muted); font-size: 0.96rem; } @media (max-width: 720px) { .process-grid { grid-template-columns: 1fr; } } /* ============================================================ HOME · CTA ASESORÍA (banda oscura, asimétrica) ============================================================ */ .advisory { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; } .advisory > div { display: flex; flex-direction: column; gap: 1.2rem; max-width: 50ch; } .advisory-media { border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-float); aspect-ratio: 4 / 3; } .advisory-media img { width: 100%; height: 100%; object-fit: cover; } @media (max-width: 860px) { .advisory { grid-template-columns: 1fr; } .advisory-media { order: -1; } } /* ============================================================ FOOTER ============================================================ */ .footer { background: linear-gradient(165deg, var(--forest), var(--forest-deep)); color: var(--on-dark); padding: clamp(3rem, 6vw, 5rem) var(--gutter) 1.8rem; } .footer-inner { width: min(100%, var(--container)); margin-inline: auto; display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 2.5rem; } .footer-brand img { height: 42px; margin-bottom: 1rem; filter: brightness(0) invert(1); } .footer-brand p { color: var(--on-dark-muted); max-width: 38ch; } .footer-nav { display: flex; flex-direction: column; gap: 0.6rem; } .footer-nav a { color: var(--on-dark-muted); transition: color var(--t-micro); } .footer-nav a:hover { color: var(--on-dark); } .footer-contact { display: flex; flex-direction: column; gap: 0.45rem; color: var(--on-dark-muted); } .footer-contact a { color: var(--gold); } .footer-bottom { width: min(100%, var(--container)); margin: 2.5rem auto 0; padding-top: 1.4rem; border-top: 1px solid color-mix(in oklab, var(--on-dark) 14%, transparent); display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: 0.82rem; color: var(--on-dark-muted); } @media (max-width: 760px) { .footer-inner { grid-template-columns: 1fr; gap: 1.8rem; } } /* ============================================================ CATÁLOGO + MAPA (preserva la lógica de propiedades.js) ============================================================ */ .catalog-main { position: relative; height: 100svh; padding-top: var(--nav-h); } .catalog-map { position: absolute; inset: var(--nav-h) 0 0 0; z-index: 1; background: color-mix(in oklab, var(--paper) 86%, white); cursor: grab; } .catalog-map:active { cursor: grabbing; } .view-toggle { position: absolute; top: calc(var(--nav-h) + 1rem); left: 50%; transform: translateX(-50%); z-index: var(--z-drawer); display: none; } .view-toggle .segmented { background: var(--glass-2); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: var(--shadow-md); } .mobile-filter-toggle, .filter-sheet-head { display: none; } .mobile-filter-toggle { align-items: center; justify-content: space-between; gap: 0.8rem; color: var(--forest); border-radius: var(--r-lg); padding: 0.82rem 0.95rem; text-align: left; } .mobile-filter-toggle span { min-width: 0; display: flex; flex-direction: column; gap: 0.05rem; } .mobile-filter-toggle strong { font-size: 0.92rem; line-height: 1.1; } .mobile-filter-toggle small { color: var(--muted); font-size: 0.78rem; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mobile-filter-toggle svg { flex: none; color: var(--green); } .filter-sheet-close { width: 44px; height: 44px; border-radius: 999px; display: grid; place-items: center; background: var(--paper-2); color: var(--muted); } .catalog-filters { position: absolute; top: calc(var(--nav-h) + 1rem); left: 1.2rem; right: calc(min(420px, 38vw) + 1.8rem); z-index: var(--z-drawer); display: flex; flex-wrap: wrap; align-items: end; gap: 0.5rem; padding: 0.72rem; border-radius: var(--r-lg); transition: right var(--t-base); } /* Con pocos filtros entra en una sola fila; al sumar Recámaras/Baños (vivienda) envuelve a dos filas limpias en pantallas chicas y vuelve a una fila al ensancharse (lista oculta / 2K). */ .catalog-main.panel-hidden .catalog-filters { right: 1.2rem; } .catalog-filters .field { flex: 1 1 96px; min-width: 0; gap: 0.28rem; } /* "Venta y Renta" es la etiqueta más larga: ese campo necesita algo más de ancho. */ .catalog-filters .field:has(#operationSelect) { flex: 1.25 1 124px; } .catalog-filters .field > label { font-size: 0.76rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .catalog-filters .catalog-price-field { flex: 1.5 1 186px; position: relative; } .catalog-filters .price-row { gap: 0.4rem; } .catalog-filters input, .catalog-filters select, .catalog-filters .nt-select-trigger { min-height: 42px; font-size: 0.88rem; border-radius: 14px; padding-block: 0.55rem; } .catalog-filters select { padding-left: 0.62rem; padding-right: 1.6rem; background-position: 0 0, right 0.5rem center; } .catalog-filters .nt-select-trigger { padding-inline: 0.62rem 0.5rem; } .catalog-filters .filter-actions { flex: 0 0 auto; display: flex; gap: 0.5rem; } /* ---- Select estilizado: el