/* ========================================================================== Martinez & Asociados Propiedades Chile Sistema visual: sobrio, alto contraste, monocromo con acento bronce. Deriva del logo: serif de alto contraste sobre negro, sans en versalitas. ========================================================================== */ /* --- Tokens ------------------------------------------------------------- */ :root { --tinta: #111010; --tinta-media: #3d3937; --tinta-suave: #6b6560; --papel: #fbfaf8; --papel-hueso: #f3f0eb; --papel-piedra: #e9e4dc; --linea: #ddd7cd; --bronce: #8c6f47; --bronce-claro: #b39466; --serif: 'Playfair Display', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif; --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --ancho: 1240px; --ancho-texto: 68ch; --r-sm: 2px; --r-md: 4px; --sombra-sutil: 0 1px 2px rgba(17, 16, 16, 0.04), 0 8px 24px rgba(17, 16, 16, 0.06); --sombra-alta: 0 2px 4px rgba(17, 16, 16, 0.06), 0 20px 48px rgba(17, 16, 16, 0.12); --transicion: 220ms cubic-bezier(0.22, 0.61, 0.36, 1); /* Piezas que se invierten en modo oscuro y no son solo un token de color. */ --velo-portada: linear-gradient( 100deg, rgba(17, 16, 16, 0.94) 0%, rgba(17, 16, 16, 0.78) 45%, rgba(17, 16, 16, 0.42) 100% ); --banda-oscura: #111010; --banda-oscura-texto: #fbfaf8; --cabecera-fondo: rgba(251, 250, 248, 0.92); /* --- Colores que NO cambian con el tema ------------------------------- Se usan sobre superficies que son oscuras en los dos modos: las capas translucidas encima de las fotos, los controles de la galeria y el visor a pantalla completa. Antes usaban var(--papel), y ahi estaba el error: en modo oscuro `papel` es casi negro, asi que quedaba texto negro sobre un velo negro y la palabra desaparecia. Estos tres tokens se declaran una sola vez y no se redefinen en el bloque de modo oscuro, a proposito. */ --sobre-oscuro: #fbfaf8; --oro-sobre-oscuro: #eccf9a; --oro-fondo: #d9b675; --sobre-oro: #14100b; color-scheme: light; } /* ========================================================================== MODO OSCURO -------------------------------------------------------------------------- El tema se resuelve en un script dentro del , antes de pintar: lee la eleccion guardada y, si no hay, la preferencia del sistema. Por eso aqui basta con el atributo y no hace falta duplicar la paleta en un @media (prefers-color-scheme), que obligaria a mantener dos copias. Criterio de color, no decorativo: - El fondo NO es negro puro. Sobre #000 el dorado produce halo y el texto blanco vibra; #0d0c0b da el mismo peso sin cansar la vista. - El dorado se reserva para acentos, titulos cortos y precios. El texto de lectura va en blanco calido: parrafos largos en dorado fatigan. ========================================================================== */ :root[data-tema='oscuro'] { --tinta: #ece6db; --tinta-media: #c2bab0; /* Aclarado hasta pasar 7:1 (WCAG AAA): es el color de los parrafos largos, donde la vista se cansa primero. */ --tinta-suave: #aaa196; --papel: #0d0c0b; --papel-hueso: #151311; --papel-piedra: #221f1c; --linea: #302b26; --bronce: #d9b675; --bronce-claro: #eccf9a; --sombra-sutil: 0 1px 2px rgba(0, 0, 0, 0.5), 0 8px 24px rgba(0, 0, 0, 0.45); --sombra-alta: 0 2px 4px rgba(0, 0, 0, 0.55), 0 20px 48px rgba(0, 0, 0, 0.65); --velo-portada: linear-gradient( 100deg, rgba(8, 7, 7, 0.95) 0%, rgba(8, 7, 7, 0.82) 45%, rgba(8, 7, 7, 0.5) 100% ); /* En modo claro estas bandas negras cortan la pagina y le dan ritmo. Sobre fondo oscuro ese contraste desaparece y todo se aplana, asi que la banda se convierte en una superficie levantada y se remata con un filete dorado tenue, que es lo que vuelve a marcar la division. */ --banda-oscura: #1c1813; --banda-oscura-texto: #ece6db; --cabecera-fondo: rgba(13, 12, 11, 0.92); color-scheme: dark; } /* --- Reset -------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--papel); color: var(--tinta); font-family: var(--sans); font-size: 1rem; line-height: 1.65; font-feature-settings: 'kern' 1, 'liga' 1; -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; display: block; } /* El navegador oculta [hidden] con `display: none`, pero cualquier regla propia que declare `display` le gana por especificidad. Paso exactamente eso con las tarjetas del catalogo: al filtrar quedaban con el atributo `hidden` puesto y aun asi seguian dibujandose, porque `.tarjeta` declara `display: flex`. Esta regla lo blinda para todo el sitio. */ [hidden] { display: none !important; } a { color: inherit; text-decoration: none; } button, input, select, textarea { font: inherit; color: inherit; } h1, h2, h3, h4 { font-family: var(--serif); font-weight: 500; line-height: 1.15; letter-spacing: -0.015em; margin: 0 0 0.5em; text-wrap: balance; } h1 { font-size: clamp(2.15rem, 5.2vw, 3.9rem); } h2 { font-size: clamp(1.65rem, 3.4vw, 2.6rem); } h3 { font-size: clamp(1.15rem, 2vw, 1.45rem); } p { margin: 0 0 1.1em; text-wrap: pretty; } :focus-visible { outline: 2px solid var(--bronce); outline-offset: 3px; } /* Accesibilidad: salto directo al contenido para lectores de pantalla. */ .salto-contenido { position: absolute; left: -9999px; top: 0; background: var(--tinta); color: var(--papel); padding: 0.75rem 1.25rem; z-index: 200; } .salto-contenido:focus { left: 0; } /* --- Utilidades --------------------------------------------------------- */ .contenedor { width: 100%; max-width: var(--ancho); margin-inline: auto; padding-inline: clamp(1.15rem, 4vw, 2.5rem); } .seccion { padding-block: clamp(3.5rem, 8vw, 6.5rem); } .seccion--hueso { background: var(--papel-hueso); } .seccion--tinta { background: var(--banda-oscura); color: var(--banda-oscura-texto); } .rotulo { font-family: var(--sans); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--bronce); margin: 0 0 1rem; } .seccion--tinta .rotulo { color: var(--bronce-claro); } .entradilla { font-size: clamp(1rem, 1.6vw, 1.12rem); color: var(--tinta-suave); max-width: var(--ancho-texto); } .seccion--tinta .entradilla { color: rgba(251, 250, 248, 0.72); } .solo-lectores { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* --- Botones ------------------------------------------------------------ */ .boton { display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; padding: 0.9rem 1.7rem; border: 1px solid transparent; border-radius: var(--r-sm); font-size: 0.8rem; font-weight: 500; letter-spacing: 0.11em; text-transform: uppercase; /* Los botones largos SI pueden repartirse en dos lineas: en un telefono de 320 px, forzar una sola linea los saca de la pantalla. Se centran para que al partirse sigan viendose ordenados. */ text-align: center; cursor: pointer; transition: background var(--transicion), color var(--transicion), border-color var(--transicion), transform var(--transicion); } /* Efecto iman: el boton se inclina unos pocos pixeles hacia el cursor. Se compone con el alza del hover en una sola transformacion, porque dos reglas escribiendo `transform` se pisarian entre si. Los valores los escribe el JavaScript solo en punteros de precision. */ .boton { transform: translate3d( var(--iman-x, 0px), calc(var(--iman-y, 0px) + var(--boton-alza, 0px)), 0 ); transition: background var(--transicion), color var(--transicion), border-color var(--transicion), transform 160ms var(--suave); } .boton:hover { --boton-alza: -1px; } .boton--solido { background: var(--tinta); color: var(--papel); } .boton--solido:hover { background: var(--bronce); } .boton--linea { background: transparent; border-color: var(--linea); color: var(--tinta); } .boton--linea:hover { border-color: var(--tinta); background: var(--tinta); color: var(--papel); } .boton--claro { background: var(--papel); color: var(--tinta); } .boton--claro:hover { background: var(--bronce-claro); } .boton--whatsapp { background: #1f8a4c; color: #fff; } .boton--whatsapp:hover { background: #17703d; } /* Tercera accion: leasing con subsidio. No lleva un color nuevo a proposito. Con tres rellenos solidos los botones compiten entre si y se pierde la jerarquia; aqui cambia la FORMA del enfasis (contorno en vez de relleno) usando el dorado que ya es de la marca. Como la portada es oscura en los dos modos, el dorado funciona igual en claro y en oscuro sin necesidad de una variante aparte. */ .boton--oro { background: rgba(217, 182, 117, 0.1); border-color: rgba(236, 207, 154, 0.55); color: #eccf9a; backdrop-filter: blur(6px); } .boton--oro:hover { background: #eccf9a; border-color: #eccf9a; color: #14100b; } .boton--oro svg { width: 16px; height: 16px; flex-shrink: 0; } /* Salto de fila dentro de un contenedor flex: obliga a que lo que sigue empiece en una linea nueva, sin estirar el boton a todo el ancho como haria un `flex-basis: 100%` aplicado al boton mismo. */ .salto-fila { flex-basis: 100%; height: 0; margin: 0; } /* Es la etiqueta mas larga del sitio. Como va sola en su fila, se le permite repartirse en dos lineas en pantallas angostas. */ .boton--fila-propia { white-space: normal; text-align: center; max-width: 100%; } /* Filete que devuelve la separacion entre banda y fondo en modo oscuro. */ :root[data-tema='oscuro'] .seccion--tinta { border-block: 1px solid rgba(217, 182, 117, 0.16); } :root[data-tema='oscuro'] .pie { border-top: 1px solid rgba(217, 182, 117, 0.16); } /* La seccion hueso tambien necesita despegarse del fondo. */ :root[data-tema='oscuro'] .seccion--hueso { border-block: 1px solid var(--linea); } /* En modo oscuro el boton "claro" iria oscuro sobre una banda oscura y desapareceria. Sobre esas bandas manda el dorado. */ :root[data-tema='oscuro'] .boton--claro { background: var(--bronce); color: #14100b; } :root[data-tema='oscuro'] .boton--claro:hover { background: var(--bronce-claro); } /* --- Interruptor de tema ------------------------------------------------ */ .tema-boton { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.8rem; background: transparent; border: 1px solid var(--linea); border-radius: 100px; color: var(--tinta-media); font-size: 0.68rem; letter-spacing: 0.13em; text-transform: uppercase; cursor: pointer; transition: color var(--transicion), border-color var(--transicion), background var(--transicion); } .tema-boton:hover { color: var(--tinta); border-color: var(--tinta-suave); } .tema-boton__pista { position: relative; display: grid; place-items: center; width: 16px; height: 16px; } .tema-boton__icono { grid-area: 1 / 1; width: 16px; height: 16px; transition: opacity var(--transicion), transform var(--transicion); } /* Se muestra el icono del modo al que se VA a cambiar, no el actual: es lo que el botón promete hacer. */ .tema-boton__icono--sol { opacity: 0; transform: rotate(-90deg) scale(0.6); } .tema-boton__icono--luna { opacity: 1; color: var(--bronce); } :root[data-tema='oscuro'] .tema-boton__icono--sol { opacity: 1; transform: none; color: var(--bronce); } :root[data-tema='oscuro'] .tema-boton__icono--luna { opacity: 0; transform: rotate(90deg) scale(0.6); } @media (max-width: 1100px) { .tema-boton__texto { display: none; } .tema-boton { padding: 0.55rem; } } /* --- Cabecera ----------------------------------------------------------- */ .cabecera { position: sticky; top: 0; z-index: 100; background: var(--cabecera-fondo); backdrop-filter: blur(12px); border-bottom: 1px solid var(--linea); } .cabecera__fila { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 76px; } .marca { display: inline-flex; align-items: center; gap: 0.7rem; flex-shrink: 0; } .marca__logo { width: 42px; height: 42px; border-radius: var(--r-sm); } .marca__texto { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; } .marca__nombre { font-family: var(--serif); font-size: 1.05rem; letter-spacing: 0.01em; } .marca__bajada { font-size: 0.6rem; letter-spacing: 0.19em; text-transform: uppercase; color: var(--tinta-suave); } .nav { display: flex; align-items: center; /* Siete rotulos: con 1.9rem el menu desbordaba la cabecera a 1440 px. Se aprieta la separacion en vez de esconder el boton "Vender o arrendar", que es el que genera contactos. */ gap: 1.4rem; } .nav__enlace { position: relative; /* Un rotulo partido en dos lineas descoloca el alto de la barra y deja el subrayado a medias. Si no cabe, se aprieta la separacion o se oculta el boton, pero el texto nunca se parte. */ white-space: nowrap; font-size: 0.82rem; letter-spacing: 0.05em; color: var(--tinta-media); padding-block: 0.35rem; transition: color var(--transicion); } .nav__enlace::after { content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 1px; background: var(--bronce); transition: width var(--transicion); } .nav__enlace:hover, .nav__enlace[aria-current='page'] { color: var(--tinta); } .nav__enlace:hover::after, .nav__enlace[aria-current='page']::after { width: 100%; } .cabecera__acciones { display: flex; align-items: center; gap: 0.75rem; } /* En la cabecera, en cambio, un boton partido en dos lineas estira la barra y se lee como dos botones. Ahi si se fuerza una sola linea, y por eso su etiqueta es la version corta. */ .cabecera__acciones .boton { white-space: nowrap; } .menu-boton { display: none; background: none; border: 1px solid var(--linea); border-radius: var(--r-sm); padding: 0.55rem 0.7rem; cursor: pointer; line-height: 0; } .menu-boton span { display: block; width: 20px; height: 1.5px; background: var(--tinta); transition: transform var(--transicion), opacity var(--transicion); } .menu-boton span + span { margin-top: 5px; } .menu-boton[aria-expanded='true'] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .menu-boton[aria-expanded='true'] span:nth-child(2) { opacity: 0; } .menu-boton[aria-expanded='true'] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } @media (max-width: 940px) { .menu-boton { display: block; } /* `absolute` dentro de la cabecera en vez de `fixed` con un top fijo: asi el menu arranca exactamente donde termina la cabecera, sin la costura de 1 px que dejaba el valor escrito a mano. */ .nav { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--papel); border-bottom: 1px solid var(--linea); padding: 0.5rem clamp(1.15rem, 4vw, 2.5rem) 1.75rem; box-shadow: var(--sombra-alta); transform: translateY(-12px); opacity: 0; visibility: hidden; transition: opacity var(--transicion), transform var(--transicion), visibility var(--transicion); } .nav[data-abierto='true'] { transform: none; opacity: 1; visibility: visible; } .nav__enlace { padding-block: 0.95rem; border-bottom: 1px solid var(--linea); font-size: 0.95rem; } } /* La llamada a la accion se mantiene visible en tablet: ahi sobra espacio y sin ella la cabecera se veia vacia. Solo desaparece cuando de verdad estorba, ya en pantallas de telefono. */ @media (max-width: 620px) { .cabecera__acciones .boton--solido { display: none; } } /* Pantallas muy angostas (320 px): la bajada de la marca es lo primero que sobra, porque el nombre ya identifica igual. */ @media (max-width: 380px) { .marca__bajada { display: none; } .marca__logo { width: 36px; height: 36px; } .marca__nombre { font-size: 0.95rem; } .cabecera__fila { gap: 0.75rem; } } /* --- Portada ------------------------------------------------------------ */ .portada { position: relative; background: var(--banda-oscura); color: var(--banda-oscura-texto); overflow: hidden; } .portada__fondo { position: absolute; inset: 0; object-fit: cover; width: 100%; height: 100%; opacity: 0.5; } .portada__velo { position: absolute; inset: 0; background: var(--velo-portada); } .portada__contenido { position: relative; padding-block: clamp(4.5rem, 12vw, 8.5rem); max-width: 46rem; } /* La portada siempre es oscura, en los dos modos: el texto va SIEMPRE claro. Usar var(--papel) aqui hacia que en modo oscuro el titular se volviera negro sobre negro y desapareciera. */ .portada h1 { color: #fbfaf8; margin-bottom: 1.1rem; /* Sombra sutil: sostiene el titular incluso sobre una foto clara detras. */ text-shadow: 0 2px 24px rgba(0, 0, 0, 0.55); } .portada__entradilla { font-size: clamp(1.02rem, 1.8vw, 1.2rem); color: rgba(251, 250, 248, 0.86); max-width: 40rem; margin-bottom: 2.2rem; text-shadow: 0 1px 16px rgba(0, 0, 0, 0.5); } .portada .rotulo { color: var(--bronce-claro); } .portada__acciones { display: flex; flex-wrap: wrap; gap: 0.85rem; } /* --- Buscador ----------------------------------------------------------- */ .buscador { position: relative; margin-top: clamp(2rem, 5vw, 3rem); background: var(--papel); color: var(--tinta); border-radius: var(--r-md); box-shadow: var(--sombra-alta); padding: 1.35rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0.9rem; align-items: end; } .campo { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; } .campo__etiqueta { font-size: 0.65rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tinta-suave); } /* "opcional" junto a la etiqueta: se distingue sin gritar. */ .campo__nota { text-transform: none; letter-spacing: 0.02em; font-style: italic; opacity: 0.75; } .formulario__error { margin: 1rem 0 0; padding: 0.8rem 1rem; border-left: 3px solid #c0563c; background: color-mix(in srgb, #c0563c 10%, transparent); font-size: 0.88rem; color: var(--tinta); } .campo__control { width: 100%; padding: 0.72rem 0.8rem; background: var(--papel); border: 1px solid var(--linea); border-radius: var(--r-sm); font-size: 0.92rem; transition: border-color var(--transicion); appearance: none; } select.campo__control { background-image: linear-gradient(45deg, transparent 50%, var(--tinta-suave) 50%), linear-gradient(135deg, var(--tinta-suave) 50%, transparent 50%); background-position: calc(100% - 17px) 52%, calc(100% - 12px) 52%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 2.1rem; } .campo__control:hover, .campo__control:focus { border-color: var(--tinta); } textarea.campo__control { min-height: 8rem; resize: vertical; } /* --- Cifras ------------------------------------------------------------- */ .cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: clamp(1.5rem, 4vw, 3rem); border-top: 1px solid var(--linea); padding-top: 2.75rem; margin-top: 3rem; } .seccion--tinta .cifras { border-color: rgba(251, 250, 248, 0.16); } .cifra__valor { font-family: var(--serif); font-size: clamp(2.1rem, 4.5vw, 3.1rem); line-height: 1; margin-bottom: 0.45rem; } .cifra__texto { font-size: 0.8rem; letter-spacing: 0.08em; color: var(--tinta-suave); } .seccion--tinta .cifra__texto { color: rgba(251, 250, 248, 0.66); } /* --- Encabezado de seccion --------------------------------------------- */ .encabezado { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; flex-wrap: wrap; margin-bottom: clamp(2rem, 4vw, 3rem); } .encabezado__texto { max-width: var(--ancho-texto); } .encabezado h2 { margin-bottom: 0.35rem; } /* --- Tarjetas de propiedad --------------------------------------------- */ /* `min(310px, 100%)` en vez de `310px`: en pantallas de 320 px el contenedor mide menos que el minimo y la rejilla forzaba una columna mas ancha que la pagina, apareciendo barra horizontal. */ .rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(310px, 100%), 1fr)); gap: clamp(1.35rem, 2.5vw, 2rem); } .tarjeta { display: flex; flex-direction: column; background: var(--papel); border: 1px solid var(--linea); border-radius: var(--r-md); overflow: hidden; transition: transform var(--transicion), box-shadow var(--transicion), border-color var(--transicion); } .tarjeta:hover { transform: translateY(-4px); box-shadow: var(--sombra-alta); border-color: transparent; } .tarjeta__marco { position: relative; aspect-ratio: 4 / 3; background: var(--papel-piedra); overflow: hidden; } .tarjeta__foto { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms cubic-bezier(0.22, 0.61, 0.36, 1); } .tarjeta:hover .tarjeta__foto { transform: scale(1.045); } .etiquetas { position: absolute; top: 0.85rem; left: 0.85rem; display: flex; gap: 0.4rem; flex-wrap: wrap; } /* Etiqueta del tipo de propiedad: chapa oscura con letra dorada. La letra va en dorado y no en blanco para diferenciarla de la etiqueta de operacion, que es la chapa dorada maciza de al lado. */ .etiqueta { padding: 0.32rem 0.68rem; border-radius: var(--r-sm); background: rgba(17, 16, 16, 0.86); color: var(--oro-sobre-oscuro); border: 1px solid rgba(236, 207, 154, 0.28); font-size: 0.62rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; backdrop-filter: blur(4px); } /* Etiqueta de operacion (venta / arriendo): a la inversa, chapa dorada con letra oscura. Color fijo en ambos modos, porque va sobre una fotografia. */ .etiqueta--bronce { background: var(--oro-fondo); border-color: transparent; color: var(--sobre-oro); } .tarjeta__contador { position: absolute; right: 0.85rem; bottom: 0.85rem; padding: 0.25rem 0.6rem; border-radius: var(--r-sm); background: rgba(17, 16, 16, 0.72); color: var(--sobre-oscuro); font-size: 0.68rem; letter-spacing: 0.05em; backdrop-filter: blur(4px); } .tarjeta__cuerpo { display: flex; flex-direction: column; flex: 1; padding: 1.25rem 1.35rem 1.4rem; } .tarjeta__lugar { font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--bronce); margin-bottom: 0.55rem; } .tarjeta__titulo { font-family: var(--serif); font-size: 1.14rem; line-height: 1.3; margin: 0 0 0.85rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .tarjeta__precio { font-family: var(--serif); font-size: 1.42rem; line-height: 1; margin-bottom: 0.3rem; } .tarjeta__precio-sec { font-size: 0.78rem; color: var(--tinta-suave); margin-bottom: 1rem; } .tarjeta__datos { display: flex; flex-wrap: wrap; gap: 0.55rem 1.15rem; margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--linea); font-size: 0.82rem; color: var(--tinta-media); } .dato { display: inline-flex; align-items: center; gap: 0.38rem; } .dato svg { width: 15px; height: 15px; stroke: var(--tinta-suave); fill: none; stroke-width: 1.5; flex-shrink: 0; } /* --- Filtros ------------------------------------------------------------ */ .filtros { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--r-md); padding: 1.35rem; margin-bottom: 2rem; } .filtros__rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0.9rem; } .filtros__pie { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--linea); } .filtros__conteo { font-size: 0.88rem; color: var(--tinta-suave); } .filtros__conteo b { color: var(--tinta); font-weight: 600; } .enlace-sobrio { background: none; border: 0; padding: 0; font-size: 0.82rem; color: var(--tinta-suave); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } .enlace-sobrio:hover { color: var(--tinta); } .vacio { grid-column: 1 / -1; text-align: center; padding: clamp(3rem, 8vw, 5rem) 1rem; border: 1px dashed var(--linea); border-radius: var(--r-md); color: var(--tinta-suave); } /* --- Migas -------------------------------------------------------------- */ .migas { padding-block: 1.1rem; font-size: 0.78rem; color: var(--tinta-suave); } .migas ol { display: flex; flex-wrap: wrap; gap: 0.45rem; list-style: none; margin: 0; padding: 0; } .migas li::after { content: '/'; margin-left: 0.45rem; color: var(--linea); } .migas li:last-child::after { content: none; } .migas a:hover { color: var(--tinta); text-decoration: underline; text-underline-offset: 3px; } /* --- Ficha de propiedad ------------------------------------------------- */ /* Galeria de la ficha. Las fotos del CRM van de 0,65 a 2,26 de proporcion y un cuarto son verticales: recortarlas a una grilla fija las mutila. Cada foto se muestra entera sobre una copia difuminada de si misma, que rellena el marco. La pista se desliza con scroll-snap, asi que funciona con el dedo aunque el JavaScript no cargue. */ .galeria { margin-bottom: clamp(2rem, 4vw, 3rem); } .galeria__escenario { position: relative; border-radius: var(--r-md); overflow: hidden; background: #0c0b0b; } .galeria__pista { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .galeria__pista::-webkit-scrollbar { display: none; } .lamina { position: relative; flex: 0 0 100%; scroll-snap-align: center; scroll-snap-stop: always; margin: 0; aspect-ratio: 3 / 2; display: grid; place-items: center; overflow: hidden; cursor: zoom-in; } /* Relleno difuminado: evita las barras negras vacias sin recortar la foto. */ .lamina__difuso { position: absolute; inset: -8%; background-size: cover; background-position: center; filter: blur(34px) saturate(1.15) brightness(0.5); transform: scale(1.08); } /* `width/height: 100%` con `object-fit: contain`, NO `width: auto` con max-width. Con auto, la imagen se dibuja a su tamano original y no escala hacia arriba: en el telefono el navegador elige una variante pequena del srcset y la foto quedaba diminuta en medio del marco. Asi ocupa siempre todo el espacio disponible sin recortarse. */ .lamina__foto { position: relative; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 18px 40px rgba(0, 0, 0, 0.45)); } /* En el telefono la foto es el producto: la galeria sale de los margenes para ocupar todo el ancho y gana altura real. Con la proporcion 4/3 dentro del contenedor quedaba en ~254 px de alto, que es demasiado poco para decidir sobre una propiedad. */ @media (max-width: 780px) { .galeria { margin-inline: calc(-1 * clamp(1.15rem, 4vw, 2.5rem)); } .galeria__escenario { border-radius: 0; } .lamina { aspect-ratio: auto; height: min(62vh, 520px); } .lamina__difuso { filter: blur(24px) saturate(1.15) brightness(0.5); } /* La tira de miniaturas vuelve a alinearse con el texto de la pagina. */ .galeria__tira { padding-inline: clamp(1.15rem, 4vw, 2.5rem); } } /* Controles */ .galeria__paso, .galeria__ampliar { position: absolute; z-index: 2; background: rgba(12, 11, 11, 0.5); border: 1px solid rgba(251, 250, 248, 0.28); color: var(--sobre-oscuro); cursor: pointer; backdrop-filter: blur(8px); transition: background var(--transicion), opacity var(--transicion), transform var(--transicion); } .galeria__paso { top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%; font-size: 1.5rem; line-height: 1; display: grid; place-items: center; } .galeria__paso:hover { background: rgba(12, 11, 11, 0.82); } .galeria__paso[disabled] { opacity: 0; pointer-events: none; } .galeria__paso--previo { left: clamp(0.6rem, 2vw, 1.15rem); } .galeria__paso--siguiente { right: clamp(0.6rem, 2vw, 1.15rem); } .galeria__contador { position: absolute; z-index: 2; left: clamp(0.6rem, 2vw, 1.15rem); bottom: clamp(0.6rem, 2vw, 1.15rem); margin: 0; padding: 0.4rem 0.85rem; border-radius: 100px; background: rgba(12, 11, 11, 0.55); backdrop-filter: blur(8px); color: var(--sobre-oscuro); font-size: 0.78rem; letter-spacing: 0.07em; font-variant-numeric: tabular-nums; } .galeria__ampliar { right: clamp(0.6rem, 2vw, 1.15rem); bottom: clamp(0.6rem, 2vw, 1.15rem); display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.5rem 0.9rem; border-radius: 100px; font-size: 0.72rem; letter-spacing: 0.11em; text-transform: uppercase; } .galeria__ampliar:hover { background: rgba(12, 11, 11, 0.82); } .galeria__ampliar svg { width: 15px; height: 15px; } @media (max-width: 560px) { .galeria__ampliar span { display: none; } .galeria__ampliar { padding: 0.6rem; } } /* Tira de miniaturas */ .galeria__tira { display: flex; gap: 0.5rem; list-style: none; margin: 0.6rem 0 0; padding: 0 0 0.35rem; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; } /* Sin esto los elementos flex se encogen para caber en el ancho disponible y con 100 fotos las miniaturas quedaban de 19 px. Deben conservar su tamano y que la tira se desplace. */ .galeria__tira > li { flex: 0 0 auto; } .miniatura { display: block; padding: 0; border: 0; background: none; cursor: pointer; border-radius: var(--r-sm); overflow: hidden; line-height: 0; opacity: 0.5; transition: opacity var(--transicion), outline-color var(--transicion); outline: 2px solid transparent; outline-offset: 2px; } .miniatura img { width: 104px; height: 72px; object-fit: cover; /* Fondo mientras la miniatura aun no baja: evita el recuadro vacio. */ background: var(--papel-piedra); } .miniatura:hover { opacity: 0.85; } .miniatura[aria-current='true'] { opacity: 1; outline-color: var(--bronce); } @media (max-width: 560px) { .miniatura img { width: 80px; height: 56px; } } .ficha { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: clamp(2rem, 5vw, 4rem); align-items: start; } /* Sin esto, un texto largo dentro de una columna de rejilla la ensancha por encima del contenedor y aparece barra horizontal. */ .ficha > * { min-width: 0; } @media (max-width: 1000px) { .ficha { grid-template-columns: 1fr; } } .ficha__titulo { margin-bottom: 0.4rem; } .ficha__lugar { font-size: 0.95rem; color: var(--tinta-suave); margin-bottom: 1.75rem; } /* Flex en vez de grid con auto-fit: con cinco datos, `auto-fit` generaba columnas vacias y los numeros quedaban repartidos de forma despareja segun el ancho. Asi cada dato ocupa lo que necesita y se reparten parejo. */ .especificaciones { display: flex; flex-wrap: wrap; gap: 1.4rem 2.2rem; padding: 1.5rem 0; border-block: 1px solid var(--linea); margin-bottom: 2.25rem; } .especificacion { flex: 1 1 auto; min-width: 88px; } .especificacion__valor { font-family: var(--serif); font-size: 1.5rem; line-height: 1; margin-bottom: 0.3rem; } .especificacion__texto { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tinta-suave); } .bloque { margin-bottom: 2.5rem; } .bloque h2 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); margin-bottom: 1rem; } /* El texto viene del CRM ya separado en bloques y se pinta como parrafos reales, no con `white-space: pre-line`: asi se puede controlar el espacio entre bloques y el interlineado, que es lo que hace legible una ficha larga. */ .descripcion { max-width: var(--ancho-texto); color: var(--tinta-media); } .descripcion p { margin: 0 0 1.05em; line-height: 1.7; } .descripcion p:last-child { margin-bottom: 0; } /* El primer bloque del CRM suele ser el titular de la publicacion. Se destaca un poco para que la ficha tenga una entrada clara. */ .descripcion p:first-child { font-size: 1.05rem; color: var(--tinta); } /* Separacion horizontal, pero NO vertical: asi las filas mantienen su linea continua y, con dos columnas, el valor de una no queda pegado a la etiqueta de la siguiente ("KP515837Tipo" en vez de "KP515837 Tipo"). */ .detalles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: 0 clamp(1.5rem, 3vw, 3rem); margin: 0; } .detalle { display: flex; justify-content: space-between; gap: 1rem; padding: 0.75rem 0; border-bottom: 1px solid var(--linea); font-size: 0.9rem; } .detalle dt { color: var(--tinta-suave); } .detalle dd { margin: 0; text-align: right; font-weight: 500; } .comodidades { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0; padding: 0; } .comodidad { padding: 0.42rem 0.85rem; border: 1px solid var(--linea); border-radius: 100px; font-size: 0.82rem; color: var(--tinta-media); } /* Panel lateral de contacto */ .panel { position: sticky; top: 100px; background: var(--papel); border: 1px solid var(--linea); border-radius: var(--r-md); padding: 1.6rem; box-shadow: var(--sombra-sutil); } @media (max-width: 1000px) { .panel { position: static; } } .panel__operacion { font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--bronce); margin-bottom: 0.5rem; } .panel__precio { font-family: var(--serif); font-size: clamp(1.9rem, 3.4vw, 2.4rem); line-height: 1; margin-bottom: 0.35rem; } .panel__nota { font-size: 0.82rem; color: var(--tinta-suave); margin-bottom: 1.4rem; } .panel__acciones { display: grid; gap: 0.6rem; margin-bottom: 1.4rem; } .panel__acciones .boton { width: 100%; } .agente { display: flex; align-items: center; gap: 0.85rem; padding-top: 1.3rem; border-top: 1px solid var(--linea); } .agente__foto { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; background: var(--papel-piedra); } .agente__nombre { font-weight: 600; font-size: 0.92rem; } .agente__cargo { font-size: 0.76rem; color: var(--tinta-suave); } .mapa { width: 100%; aspect-ratio: 16 / 9; border: 1px solid var(--linea); border-radius: var(--r-md); filter: grayscale(1) contrast(1.05); transition: filter var(--transicion); } .mapa:hover { filter: none; } /* --- Visor de fotos ----------------------------------------------------- */ .visor { position: fixed; inset: 0; z-index: 300; display: none; place-items: center; background: rgba(10, 9, 9, 0.96); padding: clamp(1rem, 4vw, 3rem); } .visor[data-abierto='true'] { display: grid; } /* Vista previa difuminada: se pinta la miniatura (ya cacheada por la tira) mientras baja la foto grande. El visitante nunca ve un hueco negro. */ .visor__difuso { position: absolute; inset: 0; background-size: cover; background-position: center; filter: blur(40px) brightness(0.45) saturate(1.1); transform: scale(1.1); opacity: 0; transition: opacity 260ms ease, background-image 0ms; } .visor[data-abierto='true'] .visor__difuso { opacity: 1; } .visor__imagen { position: relative; max-width: 100%; max-height: 90vh; width: auto; height: auto; object-fit: contain; border-radius: var(--r-sm); box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6); opacity: 1; transform: scale(1); transition: opacity 200ms ease, transform 200ms cubic-bezier(0.22, 0.61, 0.36, 1); } /* Fundido cruzado al cambiar de foto: la anterior se va con un roce de escala, la nueva entra ya decodificada. Deslizar una imagen de 1.600 px se ve a tirones; el fundido se mantiene fluido en cualquier equipo. */ .visor__imagen[data-cargando='true'] { opacity: 0; transform: scale(0.985); } .visor__cerrar, .visor__paso { position: absolute; background: rgba(251, 250, 248, 0.1); border: 1px solid rgba(251, 250, 248, 0.24); color: var(--sobre-oscuro); width: 46px; height: 46px; border-radius: 50%; cursor: pointer; font-size: 1.35rem; line-height: 1; display: grid; place-items: center; transition: background var(--transicion); } .visor__cerrar:hover, .visor__paso:hover { background: rgba(251, 250, 248, 0.24); } .visor__cerrar { top: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem); } .visor__paso--previo { left: clamp(0.75rem, 3vw, 2rem); } .visor__paso--siguiente { right: clamp(0.75rem, 3vw, 2rem); } .visor__contador { position: absolute; bottom: clamp(1rem, 3vw, 2rem); left: 50%; transform: translateX(-50%); color: rgba(251, 250, 248, 0.72); font-size: 0.85rem; letter-spacing: 0.08em; } /* --- Servicios ---------------------------------------------------------- */ .servicios { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); } /* Cada servicio es un enlace a WhatsApp. Se marca como pulsable con el cambio de color del filete y con la accion visible al pie de la tarjeta. */ .servicio { display: flex; flex-direction: column; padding-top: 1.6rem; border-top: 2px solid var(--tinta); transition: border-color var(--transicion), transform var(--transicion); } .servicio:hover { border-color: var(--bronce); transform: translateY(-3px); } .seccion--tinta .servicio { border-color: var(--bronce-claro); } .servicio__accion { display: inline-flex; align-items: center; gap: 0.45rem; margin-top: auto; padding-top: 1rem; font-size: 0.72rem; font-weight: 500; letter-spacing: 0.11em; text-transform: uppercase; color: var(--tinta-suave); transition: color var(--transicion); } .servicio__accion svg { width: 15px; height: 15px; fill: #1f8a4c; flex-shrink: 0; transition: transform var(--transicion); } .servicio:hover .servicio__accion { color: var(--bronce); } .servicio:hover .servicio__accion svg { transform: scale(1.15); } .seccion--tinta .servicio__accion { color: rgba(236, 230, 219, 0.6); } .seccion--tinta .servicio:hover .servicio__accion { color: var(--bronce-claro); } .servicio__numero { font-family: var(--serif); font-size: 0.9rem; color: var(--bronce); margin-bottom: 0.65rem; } .servicio h3 { margin-bottom: 0.55rem; } .servicio p { font-size: 0.94rem; color: var(--tinta-suave); margin: 0; } .seccion--tinta .servicio p { color: rgba(251, 250, 248, 0.7); } /* --- Zonas -------------------------------------------------------------- */ .zonas { display: flex; flex-wrap: wrap; gap: 0.6rem; list-style: none; margin: 0; padding: 0; } .zona { display: inline-flex; align-items: baseline; gap: 0.5rem; padding: 0.6rem 1.1rem; border: 1px solid var(--linea); border-radius: 100px; font-size: 0.88rem; transition: background var(--transicion), color var(--transicion), border-color var(--transicion); } .zona:hover { background: var(--tinta); border-color: var(--tinta); color: var(--papel); } .zona__conteo { font-size: 0.74rem; color: var(--tinta-suave); } .zona:hover .zona__conteo { color: rgba(251, 250, 248, 0.66); } /* --- Contenido editorial ------------------------------------------------ */ .prosa { max-width: var(--ancho-texto); } .prosa h2 { margin-top: 2.5rem; } .prosa h3 { margin-top: 1.9rem; } .prosa ul { padding-left: 1.15rem; color: var(--tinta-media); } .prosa li { margin-bottom: 0.55rem; } .prosa strong { font-weight: 600; color: var(--tinta); } /* --- Pie ---------------------------------------------------------------- */ .pie { background: var(--banda-oscura); color: rgba(236, 230, 219, 0.72); padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; font-size: 0.88rem; } .pie__rejilla { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: clamp(1.75rem, 4vw, 3.5rem); } @media (max-width: 860px) { .pie__rejilla { grid-template-columns: 1fr 1fr; } } @media (max-width: 520px) { .pie__rejilla { grid-template-columns: 1fr; } } .pie h2, .pie h3 { font-family: var(--sans); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.19em; text-transform: uppercase; color: var(--banda-oscura-texto); margin-bottom: 1.1rem; } .pie__marca { max-width: 28rem; } .pie__logo { width: 56px; height: 56px; border-radius: var(--r-sm); margin-bottom: 1rem; } .pie__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; } .pie__mas-redes { margin: 0.9rem 0 0; font-size: 0.8rem; } .pie__mas-redes a { text-decoration: underline; text-underline-offset: 3px; } .pie__cobertura { margin: 0 0 0.85rem; font-family: var(--serif); font-size: 1.25rem; line-height: 1.2; } .pie__cobertura a { color: var(--bronce); } .pie__cobertura a:hover { color: var(--bronce-claro); } .pie a:hover { color: var(--bronce); text-decoration: underline; text-underline-offset: 3px; } .pie__uf { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.5rem 0.85rem; margin: clamp(2.5rem, 5vw, 3.5rem) 0 0; padding-top: 1.75rem; border-top: 1px solid rgba(236, 230, 219, 0.14); font-size: 0.82rem; color: rgba(236, 230, 219, 0.62); } .pie__uf-etiqueta { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--oro-sobre-oscuro); } .pie__uf-valor { font-size: 1.05rem; font-weight: 600; color: rgba(236, 230, 219, 0.92); /* Cifras de ancho fijo: el valor cambia a diario y sin esto la linea entera se corre un pixel cada vez que cambia un digito. */ font-variant-numeric: tabular-nums; } .pie__uf-enlace { margin-left: auto; color: rgba(236, 230, 219, 0.78); text-decoration: underline; text-underline-offset: 3px; } .pie__uf-enlace:hover { color: var(--oro-sobre-oscuro); } .pie__legal { margin-top: 1.75rem; padding-top: 1.75rem; border-top: 1px solid rgba(236, 230, 219, 0.08); /* Un aviso de derechos que no se alcanza a leer no protege nada: va mas legible que la linea de copyright, no mas escondido. El ancho maximo evita renglones larguisimos en pantallas anchas, y margin-inline centra esa columna. Sin el margen el bloque queda pegado a la izquierda y parece un descuido; con el, se lee como algo deliberado. En pantallas angostas el bloque ya ocupa todo el ancho, asi que el resultado es el mismo en telefono, tablet y escritorio. */ max-width: 78ch; margin-inline: auto; font-size: 0.8rem; line-height: 1.65; color: rgba(236, 230, 219, 0.62); } .pie__legal p { margin: 0 0 0.7rem; } .pie__legal p:last-child { margin-bottom: 0; } .pie__legal-titulo { margin: 0 0 0.85rem; font-family: inherit; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--oro-sobre-oscuro); } .pie__legal-enlace { margin-top: 0.9rem; } .pie__legal-enlace a { color: rgba(236, 230, 219, 0.78); text-decoration: underline; text-underline-offset: 3px; } .pie__legal-enlace a:hover { color: var(--oro-sobre-oscuro); } .pie__base { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid rgba(236, 230, 219, 0.08); font-size: 0.78rem; color: rgba(236, 230, 219, 0.5); } /* --- Redes sociales ----------------------------------------------------- */ .redes { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 1rem 0 0; padding: 0; } .red { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid rgba(236, 230, 219, 0.2); border-radius: 50%; color: inherit; transition: background var(--transicion), border-color var(--transicion), color var(--transicion), transform var(--transicion); } .red:hover { background: var(--bronce); border-color: var(--bronce); color: #14100b; transform: translateY(-2px); } .red svg { width: 17px; height: 17px; fill: currentColor; } /* Fuera del pie (panel de contacto, prosa), el borde sigue al tema. */ .panel .redes .red, .prosa .redes .red { border-color: var(--linea); } /* --- Página de canales -------------------------------------------------- */ .contenedor--angosto { max-width: 760px; } .canales__titulo { font-family: var(--sans); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--tinta-suave); margin: 2.75rem 0 1rem; } .canales__titulo:first-of-type { margin-top: 0; } .canales { display: grid; gap: 0.7rem; list-style: none; margin: 0; padding: 0; } .canal { display: flex; align-items: center; gap: 1rem; padding: 1.05rem 1.35rem; border: 1px solid var(--linea); border-radius: var(--r-md); background: var(--papel); transition: border-color var(--transicion), transform var(--transicion), box-shadow var(--transicion), background var(--transicion); } .canal:hover { border-color: var(--bronce); transform: translateY(-2px); box-shadow: var(--sombra-sutil); } .canal--destacado { border-color: var(--bronce); background: color-mix(in srgb, var(--bronce) 8%, var(--papel)); } .canal__icono { display: grid; place-items: center; width: 38px; height: 38px; flex-shrink: 0; border-radius: 50%; background: var(--papel-hueso); color: var(--bronce); } .canal__icono svg { width: 19px; height: 19px; fill: currentColor; } .canal__nombre { flex: 1; min-width: 0; font-size: 0.98rem; font-weight: 500; overflow-wrap: anywhere; } .canal__flecha { color: var(--tinta-suave); font-size: 1.05rem; transition: color var(--transicion), transform var(--transicion); } .canal:hover .canal__flecha { color: var(--bronce); transform: translate(2px, -2px); } /* --- Bloque destacado (leasing) ----------------------------------------- */ .destacado { display: grid; grid-template-columns: minmax(0, 1.6fr) auto; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; } @media (max-width: 900px) { .destacado { grid-template-columns: 1fr; } } .destacado__texto h2 { margin-bottom: 0.6rem; } /* --- Boton flotante de WhatsApp ---------------------------------------- */ .flotante { position: fixed; right: clamp(1rem, 3vw, 1.75rem); bottom: clamp(1rem, 3vw, 1.75rem); z-index: 90; width: 54px; height: 54px; border-radius: 50%; background: #1f8a4c; color: #fff; display: grid; place-items: center; box-shadow: var(--sombra-alta); transition: transform var(--transicion), background var(--transicion); } .flotante:hover { transform: scale(1.07); background: #17703d; } .flotante svg { width: 27px; height: 27px; fill: currentColor; } /* --- Aviso de datos en vivo -------------------------------------------- */ .aviso-vivo { position: fixed; left: 50%; bottom: 1.25rem; transform: translate(-50%, 130%); z-index: 95; background: var(--tinta); color: var(--papel); padding: 0.6rem 1.15rem; border-radius: 100px; font-size: 0.8rem; box-shadow: var(--sombra-alta); transition: transform var(--transicion); } .aviso-vivo[data-visible='true'] { transform: translate(-50%, 0); } /* --- Objetivos tactiles ------------------------------------------------- En pantallas que se manejan con el dedo, todo lo que se pulsa mide al menos 44x44. Es el minimo que recomiendan Apple y Google, y por debajo de eso el cliente falla el toque y siente que el sitio "no responde bien". Se aplica por tipo de puntero, no por ancho: un tablet grande tambien es tactil, y un monitor angosto no lo es. ------------------------------------------------------------------------ */ @media (pointer: coarse) { .marca { min-height: 44px; } .tema-boton { min-width: 44px; min-height: 44px; padding: 0.6rem 0.85rem; } .menu-boton { min-width: 44px; min-height: 44px; } .red { width: 44px; height: 44px; } .pie__uf-enlace { margin-left: 0; min-height: 44px; display: inline-flex; align-items: center; } .enlace-sobrio, .pie__legal-enlace a { min-height: 44px; display: inline-flex; align-items: center; } .galeria__ampliar { min-width: 44px; min-height: 44px; padding: 0.7rem; } .galeria__paso, .visor__paso, .visor__cerrar { width: 48px; height: 48px; } .campo__control { /* Menos de 16 px hace que iOS acerque el zoom al enfocar el campo. */ font-size: 16px; padding-block: 0.85rem; } .nav__enlace { min-height: 44px; display: flex; align-items: center; } } /* ========================================================================== MOVIMIENTO -------------------------------------------------------------------------- Un solo lenguaje de movimiento para todo el sitio: las cosas entran subiendo unos pocos pixeles y ganando opacidad. Nada rebota, nada gira, nada parpadea. Lo que abarata una web no es tener pocos efectos, sino mezclar varios distintos. Duraciones cortas a proposito: 500 ms para entradas, 200 ms para respuestas al puntero. Por encima de eso el visitante siente que el sitio lo hace esperar. Solo se animan `opacity` y `transform`, que la tarjeta grafica resuelve sin recalcular el diseno. Cualquier otra propiedad provocaria tirones al desplazarse. ========================================================================== */ :root { --suave: cubic-bezier(0.22, 0.61, 0.36, 1); --entrada: 520ms; } /* El estado inicial oculto SOLO se aplica si el JavaScript esta vivo: marca la raiz al arrancar. Sin JavaScript no se oculta nada y la pagina se ve completa, que es lo que importa para el visitante y para Google. */ html.js-movimiento [data-revelar] { opacity: 0; transform: translateY(14px); } /* Sin `will-change`: con 60 tarjetas en el catalogo, promover una capa por cada una consume mas memoria de la que ahorra. El navegador ya resuelve bien las transiciones de opacity y transform. */ [data-revelar] { transition: opacity var(--entrada) var(--suave), transform var(--entrada) var(--suave); } [data-revelar][data-visible='true'] { opacity: 1; transform: none; } /* --- Portada: zoom lentisimo y paralaje --------------------------------- El zoom dura 40 segundos: no se percibe como animacion, solo evita que la fotografia se sienta muerta. */ .portada__fondo { animation: respirar 40s var(--suave) infinite alternate; transform-origin: center 60%; } @keyframes respirar { from { transform: scale(1); } to { transform: scale(1.08); } } /* Con paralaje activo manda el desplazamiento que calcula el JavaScript. */ .portada__fondo[style*='--paralaje'] { animation: none; transform: translate3d(0, var(--paralaje), 0) scale(1.06); } /* --- Cabecera de alto fijo ---------------------------------------------- Antes se encogia al pasar los 80 px de scroll. Recuperaba algo de pantalla, pero el cambio de alto empujaba todo el contenido hacia arriba a mitad de lectura y se percibia como un salto. Una barra que no se mueve es mas fiable que una que gana 15 px. ------------------------------------------------------------------------ */ /* --- Imagenes que entran con fundido ------------------------------------ Evita el salto brusco de la foto al terminar de bajar. El marco ya tiene su proporcion reservada, asi que esto no mueve el diseno. */ .tarjeta__foto, .lamina__foto, .miniatura img { transition: opacity 420ms var(--suave), transform 600ms var(--suave); } img.cargando { opacity: 0; } /* --- Tarjetas: velo al pasar el puntero --------------------------------- */ .tarjeta__marco::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(12, 11, 11, 0.5), transparent 55%); opacity: 0; transition: opacity var(--transicion); pointer-events: none; } .tarjeta:hover .tarjeta__marco::after { opacity: 1; } /* --- Transiciones entre paginas ----------------------------------------- Nativo del navegador: al navegar, la pagina funde en vez de parpadear en blanco. Donde no este soportado se ignora sin efecto secundario. */ @view-transition { navigation: auto; } ::view-transition-old(root) { animation: salir 180ms var(--suave) both; } ::view-transition-new(root) { animation: entrar 260ms var(--suave) both; } @keyframes salir { to { opacity: 0; } } @keyframes entrar { from { opacity: 0; transform: translateY(8px); } } /* --- Preferencias del sistema ------------------------------------------ */ /* Si el visitante pidio menos animacion en su sistema, se respeta al pie de la letra: nada de movimiento. Y sobre todo, el contenido queda VISIBLE: sin esto, los elementos con estado inicial oculto se quedarian invisibles al desactivarse las transiciones. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } html.js-movimiento [data-revelar], [data-revelar] { opacity: 1 !important; transform: none !important; } .portada__fondo { animation: none !important; transform: none !important; } img.cargando { opacity: 1 !important; } ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; } } .panel__equivalente { margin: -0.4rem 0 0.9rem; font-size: 0.9rem; line-height: 1.5; color: var(--tinta-media); font-variant-numeric: tabular-nums; } .panel__equivalente strong { color: var(--tinta); font-weight: 600; } .panel__equivalente-nota { display: block; margin-top: 0.15rem; font-size: 0.75rem; color: var(--tinta-suave); font-variant-numeric: normal; } /* Bloque para una herramienta que vive fuera del sitio. Se distingue del resto del texto para que se lea como una accion, no como un parrafo mas. */ .herramienta-externa { margin: 2rem 0; padding: clamp(1.25rem, 3vw, 1.75rem); background: var(--papel-hueso); border: 1px solid var(--linea); border-left: 3px solid var(--bronce); border-radius: var(--r-md); } .herramienta-externa__etiqueta { margin: 0 0 0.4rem; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bronce); } .herramienta-externa__titulo { margin: 0 0 0.75rem; font-family: var(--serif); font-size: clamp(1.15rem, 2.5vw, 1.4rem); line-height: 1.25; color: var(--tinta); } .herramienta-externa p { margin: 0 0 0.85rem; } .herramienta-externa__nota { font-size: 0.85rem; color: var(--tinta-suave); } .herramienta-externa p:last-child { margin-bottom: 0; } /* ========================================================================== CAPTURA DE TASACION (cierre de pagina) y SIMULADORES ========================================================================== */ .captura { padding-block: clamp(3rem, 6vw, 4.5rem); background: var(--papel-hueso); border-top: 1px solid var(--linea); } .captura__titulo { margin: 0.35rem 0 0.75rem; font-family: var(--serif); font-size: clamp(1.5rem, 3.5vw, 2.1rem); line-height: 1.15; color: var(--tinta); } .captura__entrada { margin: 0 0 1.75rem; max-width: 58ch; color: var(--tinta-media); } .captura__rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.9rem; } .captura__acciones { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.25rem; } .captura__error { margin: 0.9rem 0 0; padding: 0.6rem 0.85rem; background: rgba(176, 58, 46, 0.1); border-left: 3px solid #b03a2e; border-radius: var(--r-sm); font-size: 0.88rem; color: var(--tinta); } .captura__precios { margin: 1.5rem 0 0; padding-top: 1.25rem; border-top: 1px solid var(--linea); font-size: 0.85rem; line-height: 1.6; color: var(--tinta-suave); max-width: 62ch; } .captura__precios strong { color: var(--tinta-media); } /* --- Simuladores de la CMF ---------------------------------------------- */ .aviso-referencial { padding: 0.85rem 1rem; background: var(--papel-piedra); border-radius: var(--r-sm); font-size: 0.85rem; line-height: 1.6; color: var(--tinta-media); } .simuladores { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 0.75rem; margin: 1.5rem 0 0; padding: 0; list-style: none; } .simulador { display: grid; grid-template-columns: 1fr auto; align-items: start; gap: 0.4rem 0.75rem; height: 100%; padding: 1rem 1.1rem; background: var(--papel); border: 1px solid var(--linea); border-radius: var(--r-md); transition: border-color var(--transicion), transform var(--transicion); } .simulador:hover { border-color: var(--bronce); transform: translateY(-2px); } .simulador__nombre { font-weight: 600; color: var(--tinta); } .simulador__que { grid-column: 1 / -1; font-size: 0.83rem; line-height: 1.5; color: var(--tinta-suave); } .simulador__flecha { color: var(--bronce); } .simuladores__nota { margin-top: 1.25rem; font-size: 0.85rem; color: var(--tinta-suave); } /* ========================================================================== HERRAMIENTAS: indicadores y conversor UF ========================================================================== */ .indicadores { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin-bottom: 2.5rem; } .indicador { padding: 1.5rem; background: var(--papel-hueso); border: 1px solid var(--linea); border-radius: var(--r-md); } .indicador--principal { background: var(--banda-oscura); border-color: transparent; color: rgba(236, 230, 219, 0.72); } .indicador__etiqueta { margin: 0 0 0.5rem; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bronce); } .indicador--principal .indicador__etiqueta { color: var(--oro-sobre-oscuro); } .indicador__valor { margin: 0 0 0.6rem; font-family: var(--serif); font-size: clamp(1.75rem, 4vw, 2.4rem); line-height: 1.1; color: var(--tinta); /* Cifras de ancho fijo: cambian a diario y sin esto el bloque "baila". */ font-variant-numeric: tabular-nums; } .indicador--principal .indicador__valor { color: rgba(236, 230, 219, 0.96); } .indicador__pie { margin: 0; font-size: 0.8rem; line-height: 1.55; color: var(--tinta-suave); } .indicador--principal .indicador__pie { color: rgba(236, 230, 219, 0.6); } .indicador--principal .indicador__pie a { color: rgba(236, 230, 219, 0.82); text-decoration: underline; text-underline-offset: 3px; } .indicador--principal .indicador__pie a:hover { color: var(--oro-sobre-oscuro); } /* --- Conversor ---------------------------------------------------------- */ .conversor { padding: clamp(1.5rem, 4vw, 2.25rem); background: var(--papel); border: 1px solid var(--linea); border-radius: var(--r-md); box-shadow: var(--sombra-sutil); } .conversor__titulo { margin: 0 0 1.25rem; font-family: var(--sans); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tinta-suave); } .conversor__fila { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 0.75rem; } /* En pantallas angostas los dos campos se apilan y el boton queda al medio, girado, para que siga leyendose como "intercambiar". */ @media (max-width: 620px) { .conversor__fila { grid-template-columns: 1fr; align-items: stretch; } .conversor__cambio { justify-self: center; transform: rotate(90deg); } } .conversor__cambio { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-bottom: 0.15rem; background: var(--papel-hueso); border: 1px solid var(--linea); border-radius: 50%; color: var(--tinta-media); font-size: 1.1rem; cursor: pointer; transition: background var(--transicion), color var(--transicion); } .conversor__cambio:hover { background: var(--papel-piedra); color: var(--tinta); } .conversor__resultado { margin: 1.25rem 0 0; min-height: 1.5rem; font-size: 1.05rem; font-weight: 600; color: var(--bronce); font-variant-numeric: tabular-nums; } .conversor__resultado:empty { margin-top: 0; min-height: 0; } .conversor__nota { margin: 1rem 0 0; font-size: 0.8rem; line-height: 1.55; color: var(--tinta-suave); } @media print { .cabecera, .flotante, .panel__acciones, .visor, .pie__rejilla { display: none !important; } /* Del pie solo sobrevive el aviso de derechos. Si alguien imprime una ficha para mostrarla o repartirla, la nota de propiedad intelectual tiene que ir en la hoja: es justamente el caso en que puede hacer falta. */ .pie { background: none !important; color: #000 !important; padding-block: 1rem 0 !important; } .pie__legal, .pie__base { border-top: 1px solid #999 !important; color: #000 !important; } .pie__legal-titulo { color: #000 !important; } .pie__legal-enlace { display: none !important; } } /* --- Tipologias de un proyecto multifamily ------------------------------ Cada tipologia del edificio con sus propios metros, capacidad y valor: el mismo "2 dormitorios" cuesta y mide distinto en cada proyecto. ------------------------------------------------------------------------ */ .tipologias { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); gap: clamp(1rem, 2vw, 1.5rem); } .tipologia { display: flex; flex-direction: column; border: 1px solid var(--linea); border-radius: var(--r-md); overflow: hidden; background: var(--papel); transition: border-color var(--transicion), transform var(--transicion); } .tipologia:hover { border-color: var(--bronce); transform: translateY(-3px); } .tipologia__marco { aspect-ratio: 4 / 3; background: var(--papel-piedra); overflow: hidden; } .tipologia__marco img { width: 100%; height: 100%; object-fit: cover; } .tipologia__cuerpo { padding: 1rem 1.15rem 1.2rem; } .tipologia__titulo { font-family: var(--sans); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.13em; text-transform: uppercase; color: var(--tinta-suave); margin: 0 0 0.5rem; } .tipologia__precio { font-family: var(--serif); font-size: 1.3rem; line-height: 1; margin: 0 0 0.7rem; } .tipologia__datos { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; font-size: 0.82rem; color: var(--tinta-media); } /* --- Compromisos de la administracion (seccion multifamily) -------------- */ .compromisos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 0.9rem 1.6rem; list-style: none; margin: 0; padding: 0; } .compromiso { display: flex; align-items: flex-start; gap: 0.7rem; font-size: 0.94rem; color: var(--tinta-media); line-height: 1.5; } /* Marca dorada en vez de vineta: acompana sin competir con el texto. */ .compromiso__marca { flex-shrink: 0; width: 7px; height: 7px; margin-top: 0.5rem; border-radius: 50%; background: var(--bronce); } /* --- Franja intermedia: el menu horizontal no alcanza ------------------- Con "Herramientas" el menu llega a siete etiquetas y, como ningun rotulo se parte en dos lineas, hasta 1360 px ya no cabe junto a la marca y al boton. El limite salio de medir: a 1301 px el boton "Vender o arrendar" se salia 39 px de la pantalla, o sea que necesita 1340 px para caber. Se aprieta la separacion y se oculta el boton, no el menu. Navegar es lo primero, y esa llamada a la accion se repite en la portada y al cierre de cada seccion, asi que no se pierde. ------------------------------------------------------------------------ */ @media (min-width: 941px) and (max-width: 1360px) { .nav { /* 0.8rem es el minimo medido con el que los siete rotulos caben a 941 px, que es el ancho mas angosto donde el menu sigue siendo horizontal. */ gap: 0.8rem; } .nav__enlace { font-size: 0.78rem; } .cabecera__acciones .boton--solido { display: none; } }