/* ========================================================================== 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: 1100px) { .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 { /* Fila: el rastro a la izquierda y el boton de compartir a la derecha. */ display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem 1rem; 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; } .migas__compartir { min-height: 44px; padding-inline: 0.9rem; } .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: la marca `js-movimiento` la pone el script del , antes del primer pintado. Sin JavaScript no se oculta nada y la pagina se ve completa, que es lo que importa para el visitante y para Google. POR QUE SE ENUMERAN LOS SELECTORES Y NO SE USA [data-revelar] El atributo lo pone sitio.js, que es diferido: para cuando lo pone, la pagina ya se pinto con el texto a la vista. El resultado era un parpadeo —las letras aparecian y se ocultaban de golpe— justo en la portada, que es lo primero que ve cualquiera. Enumerando los selectores aqui, el texto nace oculto en el primer pintado y no hay salto. La lista debe coincidir con CANDIDATOS en sitio.js. */ html.js-movimiento :is( .encabezado__texto, .tarjeta, .servicio, .cifra, .canal, .zona, .prosa > h2, .prosa > h3, .prosa > p, .prosa > ul, .destacado, .buscador, .especificacion, .bloque ):not([data-visible='true']) { opacity: 0; transform: translateY(14px); /* RED DE SEGURIDAD SIN JAVASCRIPT. Lo anterior deja contenido invisible a la espera de que sitio.js lo revele. Si ese archivo no llega a ejecutarse —un error mas arriba, una red que corta la descarga, el navegador incrustado de otra aplicacion— el texto se queda en opacity 0 pero sigue ocupando su alto, y la pagina se ve como franjas negras vacias. Ya paso. Esta animacion no depende de JavaScript: a los tres segundos muestra todo, venga o no el revelado. Se pierde el efecto; no se pierde la pagina. Un adorno nunca puede dejar contenido invisible. */ animation: rescate-visible 1ms linear 3s forwards; } @keyframes rescate-visible { to { opacity: 1; transform: none; } } /* 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; } /* El selector y su recomendacion van lado a lado en pantalla ancha, y apilados en telefono. Poner la recomendacion al costado y no al final la pone donde se toma la decision. */ .peoneta__fila { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 0.9rem; margin-top: 0.35rem; } @media (max-width: 640px) { .peoneta__fila { grid-template-columns: 1fr; gap: 0.6rem; } } .peoneta__recomendacion { margin: 0; padding: 0.7rem 0.9rem; background: var(--papel-hueso); border-left: 3px solid var(--bronce); border-radius: var(--r-sm); font-size: 0.84rem; line-height: 1.55; color: var(--tinta-media); } .peoneta__recomendacion strong { color: var(--tinta); } /* --- Peoneta ------------------------------------------------------------ El aviso de que el conductor no carga va junto al selector y no en la letra chica: es la confusion mas cara del rubro y aclararla despues de cotizar llega tarde. */ .peoneta__aviso { margin: 0.7rem 0 0; padding: 0.7rem 0.9rem; background: rgba(176, 58, 46, 0.08); border-left: 3px solid #b03a2e; border-radius: var(--r-sm); font-size: 0.85rem; line-height: 1.55; color: var(--tinta-media); } .peoneta__nota { margin: 0.6rem 0 0; font-size: 0.8rem; line-height: 1.55; color: var(--tinta-suave); } /* ========================================================================== COTIZADOR DE MUDANZAS ========================================================================== */ .cotizador { margin-top: 2rem; } .punto { padding: clamp(1.15rem, 3vw, 1.75rem); margin-bottom: 1.25rem; background: var(--papel); border: 1px solid var(--linea); border-radius: var(--r-md); } /* La confirmacion se ve de un vistazo por el borde, sin leer el boton. */ .punto[data-confirmado='true'] { border-color: var(--bronce); } .punto__titulo { margin: 0 0 0.25rem; font-family: var(--serif); font-size: clamp(1.15rem, 2.5vw, 1.4rem); color: var(--tinta); } .punto__ayuda { margin: 0 0 1rem; font-size: 0.85rem; color: var(--tinta-suave); } .punto__mapa { position: relative; height: clamp(220px, 38vw, 300px); margin-top: 0.9rem; overflow: hidden; border-radius: var(--r-md); background: var(--papel-piedra); cursor: grab; /* El mapa captura el gesto horizontal; sin esto, arrastrar el pin en un telefono desplaza la pagina en vez de mover el punto. */ touch-action: none; } .punto__teselas { position: absolute; inset: 0; } .punto__teselas img { pointer-events: none; user-select: none; } .punto__mapa[data-arrastrando='true'] { cursor: grabbing; } /* El pin va clavado al centro y no se toca: lo que se mueve es el mapa. Por eso no recibe eventos (pointer-events: none) y no estorba al dedo. */ .punto__mira { position: absolute; left: 50%; top: 50%; width: 30px; height: 40px; /* La punta marca el lugar, no el centro del dibujo. */ transform: translate(-50%, -100%); color: var(--bronce); filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.45)); pointer-events: none; z-index: 2; } .punto__mira svg { width: 100%; height: 100%; fill: currentColor; } .punto__mira circle { fill: var(--papel); } /* Al arrastrar, el pin sube unos pixeles: da la sensacion de que se despega del mapa mientras se elige, como en las aplicaciones de viajes. */ .punto__mapa[data-arrastrando='true'] .punto__mira { transform: translate(-50%, -108%); } .punto__zoom { position: absolute; right: 0.6rem; top: 0.6rem; display: flex; flex-direction: column; gap: 0.35rem; z-index: 3; } .punto__zoom-boton { width: 38px; height: 38px; display: grid; place-items: center; background: var(--papel); border: 1px solid var(--linea); border-radius: var(--r-sm); font-size: 1.25rem; line-height: 1; color: var(--tinta); cursor: pointer; box-shadow: var(--sombra-sutil); } .punto__zoom-boton:hover { background: var(--papel-hueso); } /* La direccion que devuelve el mapa al confirmar. */ .punto__resuelta { margin: 0.75rem 0 0; padding: 0.7rem 0.9rem; background: var(--papel-hueso); border-left: 3px solid var(--bronce); border-radius: var(--r-sm); font-size: 0.9rem; line-height: 1.5; color: var(--tinta); } .punto__instruccion { position: absolute; left: 50%; bottom: 0.85rem; transform: translateX(-50%); margin: 0; padding: 0.5rem 0.9rem; max-width: calc(100% - 1.5rem); background: rgba(13, 12, 11, 0.82); border-radius: var(--r-sm); font-size: 0.78rem; line-height: 1.4; color: rgba(236, 230, 219, 0.92); text-align: center; pointer-events: none; } .punto__pie { display: flex; align-items: center; flex-wrap: wrap; gap: 0.75rem 1rem; margin-top: 0.9rem; } .punto__coordenadas { margin: 0; font-size: 0.78rem; color: var(--tinta-suave); font-variant-numeric: tabular-nums; } .punto__confirmar:disabled { opacity: 0.45; cursor: not-allowed; } .cotizador__resumen { margin-top: 1.25rem; padding: 1rem 1.15rem; background: var(--papel-piedra); border-radius: var(--r-md); } .cotizador__distancia { margin: 0 0 0.3rem; font-size: 1.05rem; font-weight: 600; color: var(--tinta); font-variant-numeric: tabular-nums; } .cotizador__nota-distancia { margin: 0; font-size: 0.8rem; line-height: 1.55; color: var(--tinta-suave); } [data-enviar]:disabled { opacity: 0.45; cursor: not-allowed; } textarea.campo__control { resize: vertical; min-height: 90px; font-family: inherit; } @media (pointer: coarse) { /* Mas alto de mapa en telefono: es la superficie con la que se apunta. */ .punto__mapa { height: clamp(260px, 55vw, 340px); } .punto__zoom-boton { width: 44px; height: 44px; } .punto__confirmar { min-height: 44px; } } /* ========================================================================== ALIADOS TECNOLOGICOS ========================================================================== */ .aliados { padding-block: clamp(2.5rem, 5vw, 3.5rem); background: var(--papel-hueso); border-top: 1px solid var(--linea); text-align: center; } .aliados__rotulo { margin-bottom: 0.5rem; } .aliados__titulo { margin: 0 0 0.9rem; font-family: var(--serif); font-size: clamp(1.4rem, 3.5vw, 2rem); line-height: 1.15; color: var(--tinta); } .aliados__entrada { max-width: 62ch; margin: 0 auto; font-size: 0.95rem; line-height: 1.65; color: var(--tinta-media); } .aliados__lista { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(1.75rem, 5vw, 3.5rem); margin: clamp(1.75rem, 4vw, 2.5rem) 0 0; padding: 0; list-style: none; } .aliado { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; } /* Cada logo se limita por ALTO, no por ancho: vienen con proporciones muy distintas (KiteProp es cuadrado, ProCanje es una banda alargada) y limitar el ancho dejaria unos gigantes y otros diminutos. */ .aliado img { height: clamp(28px, 5vw, 38px); width: auto; max-width: 190px; object-fit: contain; filter: grayscale(1); opacity: 0.65; transition: filter var(--transicion), opacity var(--transicion); } .aliado a:hover img, .aliado a:focus-visible img { filter: none; opacity: 1; } .aliado__que { font-size: 0.72rem; letter-spacing: 0.04em; color: var(--tinta-suave); } /* En pantallas de telefono los tres van en columna: apretados en fila se leen como sellos sueltos y el texto de cada uno se parte. */ @media (max-width: 520px) { .aliados__lista { gap: 1.5rem; } .aliado img { height: 32px; } } /* El fondo claro de esta franja no cambia con el tema, pero en modo oscuro necesita despegarse de la seccion anterior. */ :root[data-tema='oscuro'] .aliados { background: var(--papel-hueso); border-top-color: rgba(217, 182, 117, 0.16); } /* --- Compartir dentro del rastro de navegacion --------------------------- Aprovecha el espacio libre a la derecha de las migas, que en casi todas las paginas esta vacio. Queda arriba y a la vista sin robarle sitio a nada. */ .migas__compartir { margin-left: auto; flex: 0 0 auto; padding: 0.4rem 0.75rem; font-size: 0.75rem; letter-spacing: 0.04em; } .migas__compartir svg { width: 14px; height: 14px; } /* En pantallas muy angostas el rastro puede ser largo; el boton baja a su propia linea antes que empujar las migas fuera de la pantalla. */ @media (max-width: 420px) { .migas__compartir { margin-left: 0; } } /* --- Boton de compartir ------------------------------------------------- */ .boton--compartir { display: inline-flex; align-items: center; gap: 0.5rem; } .boton--compartir svg { width: 17px; height: 17px; flex: 0 0 auto; } /* Confirmacion de que se copio: el propio boton lo dice, sin ventanas ni mensajes que haya que cerrar. */ .boton--compartir[data-hecho='true'] { border-color: var(--bronce); color: var(--bronce); } .pie__compartir { margin-top: 0.9rem; border-color: rgba(236, 230, 219, 0.28); color: rgba(236, 230, 219, 0.82); } .pie__compartir:hover { border-color: var(--oro-sobre-oscuro); color: var(--oro-sobre-oscuro); } .pie__compartir[data-hecho='true'] { border-color: var(--oro-sobre-oscuro); color: var(--oro-sobre-oscuro); } /* ========================================================================== HERRAMIENTAS ALIADAS (pagina Trabaja con nosotros) ========================================================================== */ .herramientas-aliadas { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; margin-top: 2rem; } .herramienta { display: flex; flex-direction: column; padding: clamp(1.25rem, 3vw, 1.75rem); background: rgba(236, 230, 219, 0.04); border: 1px solid rgba(236, 230, 219, 0.14); border-radius: var(--r-md); } /* El beneficio va primero y grande: es lo unico que el colega necesita ver para decidir si sigue leyendo. */ .herramienta__beneficio { margin: 0 0 0.6rem; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--oro-sobre-oscuro); } .herramienta__nombre { margin: 0 0 0.75rem; font-family: var(--serif); font-size: clamp(1.3rem, 3vw, 1.6rem); line-height: 1.15; color: rgba(236, 230, 219, 0.96); } .herramienta__que, .herramienta__como { margin: 0 0 0.85rem; font-size: 0.9rem; line-height: 1.6; color: rgba(236, 230, 219, 0.72); } .herramienta__como { font-size: 0.85rem; color: rgba(236, 230, 219, 0.58); } .herramienta__codigo { margin: 0 0 1rem; padding: 0.6rem 0.8rem; background: rgba(236, 230, 219, 0.06); border-radius: var(--r-sm); font-size: 0.82rem; color: rgba(236, 230, 219, 0.72); } .herramienta__codigo strong { display: block; margin-top: 0.2rem; font-size: 1.05rem; letter-spacing: 0.06em; color: var(--oro-sobre-oscuro); font-variant-numeric: tabular-nums; } /* El boton se empuja al fondo para que todas las tarjetas lo alineen, aunque sus textos tengan largos distintos. */ .herramienta__accion { margin: auto 0 0.9rem; } .herramienta__sitio { margin: 0; font-size: 0.75rem; letter-spacing: 0.04em; color: rgba(236, 230, 219, 0.42); } .herramientas-aliadas__nota { margin-top: 1.5rem; font-size: 0.82rem; color: rgba(236, 230, 219, 0.55); } /* ========================================================================== 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. Con ocho rotulos, a 1440 px el boton "Vender o arrendar" se salia 71 px de la pantalla: y a 1521 todavia se pasaba 30 px. Necesita 1551 px reales para caber, asi que el corte quedo en 1560. 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: 1101px) and (max-width: 1780px) { .nav { /* 0.8rem es el minimo medido con el que los ocho rotulos caben a 1101 px, que es el ancho mas angosto donde el menu sigue siendo horizontal. Este limite estaba en 941 px y venia de cuando el menu tenia siete rotulos. Con el octavo —"Corredores"— mas el selector de idioma, la fila se pasaba del ancho de la pantalla entre 941 y 1100 px. En ese tramo ahora va la hamburguesa. */ gap: 0.8rem; } .nav__enlace { font-size: 0.78rem; } .cabecera__acciones .boton--solido { display: none; } } /* ========================================================================= Mapa del catalogo ------------------------------------------------------------------------- Sale oculto y lo revela el JavaScript. Las teselas y los marcadores se posicionan con `transform` en vez de `top/left`: el navegador las mueve en la capa de composicion y el arrastre no obliga a recalcular la pagina. ========================================================================= */ .mapa { margin: 0 0 2rem; } .mapa__lienzo { position: relative; overflow: hidden; height: min(60vh, 460px); background: var(--papel-piedra); border: 1px solid var(--linea); border-radius: var(--r-md); cursor: grab; touch-action: none; } .mapa__lienzo--arrastrando { cursor: grabbing; } .mapa--dibujando .mapa__lienzo { cursor: crosshair; } .mapa__teselas, .mapa__puntos, .mapa__zona { position: absolute; inset: 0; } .mapa__teselas img { position: absolute; top: 0; left: 0; width: 256px; height: 256px; /* Las teselas vienen claras; en modo oscuro se atenuan para que los marcadores sigan leyendose sin cambiar de proveedor. */ filter: var(--mapa-filtro, none); } .mapa__zona, .mapa__puntos { pointer-events: none; } .mapa__zona polygon { fill: rgba(140, 111, 71, 0.16); stroke: var(--bronce); stroke-width: 2; stroke-dasharray: 6 4; } .mapa__punto { position: absolute; top: 0; left: 0; margin: -14px 0 0 -28px; padding: 0.25rem 0.5rem; font: 600 0.75rem/1.2 var(--sans); color: var(--tinta); background: var(--papel); border: 1px solid var(--linea); border-radius: 999px; box-shadow: var(--sombra-sutil); cursor: pointer; pointer-events: auto; transition: transform var(--transicion), background var(--transicion); } .mapa__punto:hover, .mapa__punto:focus-visible { background: var(--bronce); border-color: var(--bronce); color: #fff; z-index: 2; } .mapa__zoom { position: absolute; right: 0.75rem; bottom: 0.75rem; display: flex; flex-direction: column; gap: 2px; z-index: 3; } .mapa__zoom button { width: 34px; height: 34px; font: 500 1.1rem/1 var(--sans); color: var(--tinta); background: var(--papel); border: 1px solid var(--linea); border-radius: var(--r-sm); cursor: pointer; } .mapa__zoom button:hover { background: var(--papel-hueso); } .mapa__credito { position: absolute; right: 0; bottom: 0; margin: 0; padding: 0.1rem 0.4rem; font: 400 0.65rem/1.4 var(--sans); color: var(--tinta-suave); background: rgba(251, 250, 248, 0.8); } .mapa__barra { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-top: 0.75rem; } .mapa__aviso { margin: 0; font: 400 0.85rem/1.4 var(--sans); color: var(--tinta-suave); } /* Resalta un momento la tarjeta que se eligio desde el mapa. */ .tarjeta--senalada { outline: 2px solid var(--bronce); outline-offset: 4px; } /* Igual que el resto del sitio: el tema se decide con el atributo, no con @media, para no mantener dos copias de cada regla. */ :root[data-tema='oscuro'] { --mapa-filtro: brightness(0.78) saturate(0.75) contrast(1.05); } :root[data-tema='oscuro'] .mapa__credito { background: rgba(13, 12, 11, 0.8); } /* ============================================================ SELECTOR DE IDIOMA ============================================================ Vive en la cabecera, junto al interruptor de tema, y aparece en todas las paginas. Cerrado ocupa lo mismo que el boton de tema para que la fila no se desequilibre; abierto despliega los nueve idiomas con su bandera y su nombre escrito en ese mismo idioma. ============================================================ */ .idioma { position: relative; } .idioma__boton { display: inline-flex; align-items: center; gap: 0.42rem; padding: 0.42rem 0.6rem; background: transparent; border: 1px solid var(--linea); border-radius: 100px; color: var(--tinta-media); font-family: var(--sans); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.08em; cursor: pointer; transition: color var(--transicion), border-color var(--transicion), background var(--transicion); } .idioma__boton:hover, .idioma__boton[aria-expanded='true'] { color: var(--tinta); border-color: var(--bronce); } .idioma__flecha { width: 9px; height: 6px; transition: transform var(--transicion); } .idioma__boton[aria-expanded='true'] .idioma__flecha { transform: rotate(180deg); } /* Las banderas llevan borde propio: sin el, la de Rusia y la de Italia se funden con el fondo claro porque su primera franja es blanca. */ .bandera { display: block; flex: none; width: 22px; height: auto; border-radius: 2px; box-shadow: 0 0 0 1px rgb(0 0 0 / 0.16); } .idioma__lista { position: absolute; top: calc(100% + 0.5rem); right: 0; z-index: 60; min-width: 12.5rem; margin: 0; padding: 0.35rem; list-style: none; background: var(--papel); border: 1px solid var(--linea); border-radius: var(--r-md); box-shadow: var(--sombra-alta); } .idioma__lista[hidden] { display: none; } .idioma__opcion { display: flex; align-items: center; gap: 0.62rem; padding: 0.55rem 0.6rem; border-radius: var(--r-sm); color: var(--tinta); font-size: 0.92rem; line-height: 1.2; text-decoration: none; transition: background var(--transicion); } .idioma__opcion:hover, .idioma__opcion:focus-visible { background: var(--hueso); } /* El idioma en uso se marca con color y peso, no solo con un tono de fondo: en pantallas con poco contraste el fondo solo no se distingue. */ .idioma__opcion[aria-current='true'] { color: var(--bronce); font-weight: 600; } .idioma__nombre { white-space: nowrap; } /* En telefono la lista se ancla al borde derecho de la pantalla y no al boton: colgando del boton se saldria del viewport por la derecha. */ @media (max-width: 480px) { .idioma__lista { right: -0.5rem; min-width: 11.5rem; } .idioma__corto { display: none; } } /* Dedos, no puntero: cada idioma necesita altura suficiente para no errarle al de al lado. */ @media (pointer: coarse) { .idioma__opcion { min-height: 44px; } .idioma__boton { min-height: 40px; } } /* ============================================================ PAGINAS EN OTROS IDIOMAS ============================================================ */ .servicios-int { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; margin-top: 1.6rem; } .servicio-int { padding: 1.15rem 1.25rem; background: var(--papel); border: 1px solid var(--linea); border-radius: var(--r-md); } .servicio-int__titulo { margin: 0 0 0.4rem; font-family: var(--sans); font-size: 1rem; font-weight: 600; color: var(--tinta); } .servicio-int__texto { margin: 0; font-size: 0.94rem; line-height: 1.6; color: var(--tinta-media); } .pasos-int { max-width: var(--ancho-texto); margin: 1.4rem 0 0; padding-left: 1.2rem; color: var(--banda-oscura-texto); font-size: 1.02rem; line-height: 1.75; } .pasos-int li { margin-bottom: 0.5rem; } /* El aviso de que el catalogo esta en espanol va destacado: es lo que evita que alguien pinche esperando su idioma y se encuentre otra cosa. */ .aviso-catalogo { max-width: var(--ancho-texto); margin: 1.6rem 0 0; padding: 0.9rem 1.1rem; border-left: 3px solid var(--oro-sobre-oscuro); background: rgb(255 255 255 / 0.05); border-radius: 0 var(--r-sm) var(--r-sm) 0; color: var(--banda-oscura-texto); font-size: 0.95rem; line-height: 1.65; } .pie__rejilla--simple { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); } /* ============================================================ CABECERA EN TELEFONOS, CON EL SELECTOR DE IDIOMA DENTRO ============================================================ El selector agrega un cuarto elemento a una fila que ya iba justa: marca, idioma, tema y el boton de menu. Medido en los anchos reales de telefono —360, 375, 390, 412 y 430 px— la fila se pasaba del ancho de la pantalla y aparecia barra de desplazamiento horizontal. Eso es lo que produce las franjas vacias al costado, porque la pagina queda mas ancha que el vidrio. La marca ya tenia una version compacta, pero solo se activaba bajo 380 px, asi que ningun telefono actual la usaba. Se sube el umbral a 700 px: en telefono la marca va sin la bajada y con el nombre algo menor, que es exactamente lo que hace falta para que quepan los cuatro. ============================================================ */ @media (max-width: 700px) { .cabecera__fila { gap: 0.6rem; } .cabecera__acciones { gap: 0.4rem; } /* Cerrado basta la bandera: la flecha se entiende igual al tocarla y son 16 px que en esta fila valen mucho. */ .idioma__flecha { display: none; } .idioma__boton { padding: 0.42rem 0.5rem; gap: 0.32rem; } .marca__bajada { display: none; } .marca__logo { width: 36px; height: 36px; } .marca__nombre { font-size: 0.95rem; } } /* Pantallas de 359 px o menos: pantalla exterior de un plegable, telefonos antiguos. Aca ya no caben los tres controles y sale el de tema, que es el unico que no es navegacion. Quien lo tenga elegido conserva su modo, y el sistema operativo sigue mandando el suyo. */ @media (max-width: 359px) { .marca__nombre { font-size: 0.85rem; } .tema-boton { display: none; } } .cierre-int { max-width: var(--ancho-texto); margin: 1.5rem 0 0; color: var(--banda-oscura-texto); font-size: 1.02rem; line-height: 1.7; } /* ============================================================ BUSCADOR: SIETE BLOQUES A LA VISTA Y BUSQUEDA AVANZADA ============================================================ */ /* "Buscar" y "Precio" ocupan dos columnas: son los dos que el visitante usa primero y los que necesitan mas espacio para escribir. */ .campo--ancho { grid-column: span 2; } @media (max-width: 620px) { .campo--ancho { grid-column: 1 / -1; } } /* El precio es una decision, no tres. Los dos montos y la moneda comparten fila y una sola etiqueta. */ .precio-grupo { min-width: 0; margin: 0; padding: 0; border: 0; } .precio-grupo__fila { display: flex; align-items: center; gap: 0.4rem; } .precio-grupo__fila .campo__control { min-width: 0; flex: 1 1 0; } .precio-grupo__guion { flex: none; color: var(--tinta-suave); } /* La moneda es el dato mas corto de la fila: no necesita el mismo ancho que un monto de ocho cifras. */ .precio-grupo__moneda { flex: 0 1 6.5rem; } .filtros__mas { margin-top: 1rem; padding-top: 1rem; border-top: 1px dashed var(--linea); } .filtros__mas[hidden] { display: none; } .filtros__alternar { display: inline-flex; align-items: center; gap: 0.45rem; } /* La insignia con el numero de filtros avanzados activos. Sin ella, alguien podria dejar un minimo de m2 puesto, cerrar el panel y no entender por que ve tan pocas propiedades. */ .filtros__insignia { display: inline-flex; align-items: center; justify-content: center; min-width: 1.25rem; height: 1.25rem; padding: 0 0.35rem; border-radius: 100px; background: var(--bronce); color: var(--sobre-oro); font-size: 0.7rem; font-weight: 600; line-height: 1; } .filtros__insignia[hidden] { display: none; } /* Una opcion que daria cero resultados se ve apagada, no desaparece: que el numero este ahi en gris explica por que no se puede elegir. */ .campo__control option:disabled { color: var(--tinta-suave); } /* ------------------------------------------------------------------------ REJILLA DEL BUSCADOR: QUE LLENE EXACTO, SIN CELDAS VACIAS Con `auto-fit` el navegador elegia el numero de columnas segun el ancho disponible, y a 1440 px daba seis: la segunda fila usaba tres celdas de seis y dejaba media fila vacia a la derecha. Ese hueco es el que rompe la pagina a la vista del cliente. Los siete bloques ocupan ocho celdas, porque "Precio" vale por dos. Ocho se reparte exacto en 4, en 2 y en 1, asi que se fijan esos tres numeros en vez de dejarlo al azar del ancho. La busqueda avanzada tiene seis bloques de una celda, y seis se reparte exacto en 3, en 2 y en 1. Por eso lleva su propia cuenta de columnas. ------------------------------------------------------------------------ */ #filtros .filtros__rejilla { grid-template-columns: 1fr; } @media (min-width: 620px) { #filtros .filtros__rejilla { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px) { #filtros > .filtros__rejilla { grid-template-columns: repeat(4, 1fr); } #filtros .filtros__mas .filtros__rejilla { grid-template-columns: repeat(3, 1fr); } } /* Lo que el buscador entendio del monto escrito. Va debajo del precio y solo aparece cuando hay algo escrito: en automatico, es la unica forma de saber si "4000" se leyo como cuatro mil UF o como cuatro mil pesos. */ .precio-grupo__lectura { margin: 0.4rem 0 0; font-size: 0.78rem; line-height: 1.4; color: var(--bronce); } .precio-grupo__lectura[hidden] { display: none; } /* ============================================================ COTIZADOR LOGISTICO: PASOS, VIAS, CONDICIONES Y RESUMEN ============================================================ El formulario tiene sesenta y tantas preguntas. Lo que evita que se sienta un interrogatorio no es tener menos preguntas —el cotizador las necesita— sino que solo se vean las que corresponden: la via elegida esconde las de los otros dos servicios, y el detalle de cada punto vive dentro de un desplegable que el cliente abre si quiere. ============================================================ */ .paso { margin: 0 0 1.75rem; padding: 1.4rem 0 0; border: 0; border-top: 1px solid var(--linea); } .paso:first-of-type { border-top: 0; padding-top: 0; } .paso__titulo { display: flex; align-items: center; gap: 0.6rem; padding: 0; margin-bottom: 1rem; font-family: var(--serif); font-size: 1.15rem; color: var(--tinta); } .paso__numero { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 1.6rem; height: 1.6rem; border-radius: 100px; background: var(--bronce); color: var(--sobre-oro); font-family: var(--sans); font-size: 0.8rem; font-weight: 600; } .paso__ayuda { max-width: var(--ancho-texto); margin: -0.4rem 0 1rem; font-size: 0.9rem; line-height: 1.6; color: var(--tinta-media); } /* --- Las tres vias ------------------------------------------------------ */ .vias { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0.7rem; } .via-tarjeta { position: relative; display: block; padding: 1rem 1.1rem; background: var(--papel); border: 1px solid var(--linea); border-radius: var(--r-md); cursor: pointer; transition: border-color var(--transicion), background var(--transicion); } .via-tarjeta:hover { border-color: var(--bronce); } /* El radio real se mantiene en el arbol: se oculta a la vista pero sigue recibiendo foco de teclado, y el borde dorado marca cual esta elegida. */ .via-tarjeta input { position: absolute; opacity: 0; width: 1px; height: 1px; } .via-tarjeta:has(input:checked) { border-color: var(--bronce); background: var(--oro-fondo); } .via-tarjeta:has(input:focus-visible) { outline: 2px solid var(--bronce); outline-offset: 2px; } .via-tarjeta__nombre { display: block; font-weight: 600; color: var(--tinta); margin-bottom: 0.2rem; } .via-tarjeta__texto { display: block; font-size: 0.86rem; line-height: 1.5; color: var(--tinta-media); } .via[hidden], .condicional[hidden] { display: none; } /* --- Condiciones de cada punto ------------------------------------------ */ .condiciones { margin: 0.9rem 0 2rem; border: 1px solid var(--linea); border-radius: var(--r-md); background: var(--papel); } .condiciones__titulo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.6rem; padding: 0.9rem 1.1rem; cursor: pointer; font-weight: 600; color: var(--tinta); list-style: none; } .condiciones__titulo::-webkit-details-marker { display: none; } /* La flecha se dibuja aca y no con el marcador nativo, que cambia de forma entre navegadores y no se puede recolorear en Safari. */ .condiciones__titulo::before { content: ''; flex: none; width: 0.5rem; height: 0.5rem; margin-right: 0.35rem; border-right: 2px solid var(--bronce); border-bottom: 2px solid var(--bronce); transform: rotate(-45deg); transition: transform var(--transicion); } .condiciones[open] > .condiciones__titulo::before { transform: rotate(45deg); } .condiciones__pista { font-size: 0.78rem; font-weight: 400; color: var(--bronce); } .condiciones__cuerpo { padding: 0 1.1rem 1.2rem; border-top: 1px solid var(--linea); padding-top: 1.1rem; } .condiciones__cuerpo > * + * { margin-top: 1rem; } .condiciones__aviso { margin: 1rem 0 0; padding: 0.85rem 1rem; border-left: 3px solid var(--bronce); border-radius: 0 var(--r-sm) var(--r-sm) 0; background: var(--hueso); font-size: 0.88rem; line-height: 1.6; color: var(--tinta-media); } /* --- Casillas ----------------------------------------------------------- */ .grupo-casillas { margin: 0; padding: 0; border: 0; } .casillas { display: grid; /* 8rem y no 10.5: las etiquetas son cortas ("Camas", "Sofás") y con el minimo mas alto quedaban en una sola columna en telefono, o sea veintidos filas de scroll para elegir los muebles de una casa. */ grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); gap: 0.35rem 0.9rem; margin-top: 0.5rem; } .casilla { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; line-height: 1.35; color: var(--tinta-media); cursor: pointer; } .casilla input { flex: none; width: 1.05rem; height: 1.05rem; accent-color: var(--bronce); } @media (pointer: coarse) { .casilla { min-height: 44px; } } /* --- Fotos -------------------------------------------------------------- */ .fotos__instruccion { margin: 0 0 0.9rem; padding: 0.9rem 1.1rem; border-radius: var(--r-sm); background: var(--oro-fondo); font-size: 0.92rem; line-height: 1.6; color: var(--tinta); } .fotos__lista { margin: 0; padding-left: 1.1rem; font-size: 0.9rem; line-height: 1.65; color: var(--tinta-media); } .fotos__lista li + li { margin-top: 0.35rem; } /* --- Resumen antes de enviar -------------------------------------------- */ .resumen-solicitud { margin: 1.5rem 0; padding: 1.3rem 1.4rem; border: 1px solid var(--bronce); border-radius: var(--r-md); background: var(--papel); } .resumen-solicitud[hidden] { display: none; } .resumen-solicitud__titulo { margin: 0 0 1rem; font-family: var(--serif); font-size: 1.15rem; color: var(--tinta); } .resumen-solicitud__grupo + .resumen-solicitud__grupo { margin-top: 1.2rem; padding-top: 1.2rem; border-top: 1px solid var(--linea); } .resumen-solicitud__grupo h4 { margin: 0 0 0.5rem; font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--bronce); } .resumen-solicitud dl { display: grid; grid-template-columns: minmax(9rem, auto) 1fr; gap: 0.3rem 1rem; margin: 0; font-size: 0.9rem; line-height: 1.5; } .resumen-solicitud dt { color: var(--tinta-media); } .resumen-solicitud dd { margin: 0; color: var(--tinta); } /* Lo que quedo en blanco se muestra tambien: es lo que permite preguntar justo eso en el primer mensaje de vuelta. */ .resumen-solicitud__falta { margin: 0.7rem 0 0; font-size: 0.84rem; line-height: 1.5; color: var(--tinta-suave); } @media (max-width: 520px) { .resumen-solicitud dl { grid-template-columns: 1fr; gap: 0 0; } .resumen-solicitud dt { margin-top: 0.5rem; font-size: 0.8rem; } } /* Los campos del cotizador necesitan mas ancho que los del buscador: sus etiquetas son preguntas completas ("¿El camión puede ingresar al recinto?"), no una palabra. Con el minimo general de 160 px quedaban dos columnas apretadas en telefono y el texto de las opciones salia cortado. `auto-fit` y no `auto-fill` a proposito: las pistas que sobran se colapsan y los campos que hay reparten todo el ancho, asi que una fila de dos nunca deja un hueco al costado. */ #cotizador-mudanza .filtros__rejilla { /* Rejilla no: reparto flexible. Con columnas fijas, una fila de tres campos dentro de una rejilla de dos deja media fila vacia al costado, y no hay numero de columnas que calce con filas de 1, 2, 3 y 4 campos a la vez. Con reparto flexible los campos de la ultima fila se estiran hasta ocupar el ancho completo, asi que no queda hueco a ningun ancho de pantalla. */ display: flex; flex-wrap: wrap; gap: 0.9rem; } #cotizador-mudanza .filtros__rejilla > * { flex: 1 1 15rem; min-width: 0; } #cotizador-mudanza .filtros__rejilla > .campo--ancho { flex-basis: 100%; } /* --- Puntos de entrega adicionales -------------------------------------- */ .punto-extra { margin-top: 1.6rem; padding-top: 1.4rem; border-top: 2px solid var(--linea); } .punto-extra__cabecera { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 0.8rem; } .punto-extra__titulo { margin: 0; font-family: var(--serif); font-size: 1.05rem; color: var(--bronce); } .punto-extra [data-quitar-punto][hidden] { display: none; } /* Boton de ubicacion actual, bajo el campo de direccion. */ .punto__gps { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.5rem; } .punto__gps svg { width: 15px; height: 15px; flex: none; } .punto__gps:disabled { opacity: 0.55; cursor: progress; } /* Telefonos de hasta 420 px: la fila de la cabecera lleva 18,4 px de margen a cada lado y con eso la marca, el idioma, el tema y el boton de menu se pasaban 7 px del ancho de la pantalla. Siete pixeles bastan para que aparezca barra de desplazamiento horizontal, y eso es lo que deja franjas vacias al costado en cuanto el visitante roza la pantalla de lado. Medido a 320, 360, 375 y 412 px: con 12 px de margen entra todo justo. */ @media (max-width: 420px) { .cabecera__fila { padding-left: 0.75rem; padding-right: 0.75rem; } } /* El campo de cantidad exacta, bajo el desplegable de dormitorios. */ .campo__extra { margin-top: 0.4rem; } .campo__extra[hidden] { display: none; } /* ============================================================ CARRIL DE FOTOS EN LAS TARJETAS ============================================================ Las fotos avanzan solas SOLO en la tarjeta donde esta la atencion: aquella sobre la que esta el cursor, o la que quedo centrada en la pantalla del telefono. Nunca todas a la vez. Se midio que hacen Zillow, Airbnb, Idealista y Portal Inmobiliario: los cuatro tienen el carrusel construido y ninguno lo dispara solo. El motivo es que detectar movimiento periferico es un reflejo involuntario: seis tarjetas moviendose son seis senales compitiendo y no se lee ninguna. Con una sola en movimiento, esa gana la mirada en vez de perderla. 400 ms de desplazamiento lateral: por debajo de 150 ms el ojo lo lee como un salto y pierde el hilo de que son fotos del mismo lugar; por encima de 500 ms se siente lento. Idealista, medido, usa 200 ms. ============================================================ */ .tarjeta__carril { display: flex; width: 100%; height: 100%; transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1); } .tarjeta__carril .tarjeta__foto { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; } /* El acercamiento al pasar el cursor pelea con el desplazamiento del carril: son dos transformaciones sobre el mismo eje. Manda el carril. */ .tarjeta:hover .tarjeta__carril .tarjeta__foto { transform: none; } /* Los puntos dicen que hay mas fotos aunque el carril este quieto, que es lo que invita a entrar a la ficha. */ .tarjeta__puntos { position: absolute; left: 0; right: 0; bottom: 0.6rem; z-index: 2; display: flex; justify-content: center; gap: 0.3rem; pointer-events: none; } .tarjeta__punto { width: 5px; height: 5px; border-radius: 100px; background: rgb(255 255 255 / 0.5); box-shadow: 0 0 2px rgb(0 0 0 / 0.4); transition: background 200ms linear, transform 200ms linear; } .tarjeta__punto.es-actual { background: #fff; transform: scale(1.35); } /* Movimiento reducido: el carril salta sin animacion y no avanza solo. Lo decide el CSS, y el JavaScript lee esta misma preferencia. */ @media (prefers-reduced-motion: reduce) { .tarjeta__carril { transition: none; } } /* ============================================================ PROTOCOLO ANTES DE ENVIAR ============================================================ Alto contraste a proposito: es la unica nota del formulario que cambia lo que la persona debe HACER, y va justo encima de los dos botones. Con el tono suave del resto de las notas se leeria como relleno legal y nadie la miraria. ============================================================ */ .protocolo { margin: 1.6rem 0 1.2rem; padding: 1.1rem 1.3rem; border: 2px solid var(--bronce); border-radius: var(--r-md); background: var(--oro-fondo); } /* El color va FIJO y no por variable de tema. El fondo de esta nota es dorado en los dos modos, pero --tinta se aclara en el oscuro: ahi el texto quedaba con contraste 1.55 sobre 4.5 exigido, o sea ilegible. */ .protocolo__titulo { display: flex; align-items: center; gap: 0.6rem; margin: 0 0 0.6rem; font-family: var(--sans); font-size: 1rem; font-weight: 600; color: var(--sobre-oro); } /* Circulo oscuro sobre el fondo dorado. Con el bronce de la marca original quedaba bronce sobre bronce: el circulo desaparecia. */ .protocolo__marca { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 1.5rem; height: 1.5rem; border-radius: 100px; background: var(--sobre-oro); color: var(--oro-fondo); font-size: 0.95rem; font-weight: 700; line-height: 1; } .protocolo__texto { max-width: var(--ancho-texto); margin: 0; font-size: 0.95rem; line-height: 1.65; color: var(--sobre-oro); } /* El motivo va en un tono mas bajo: primero se lee QUE hacer, y solo despues por que. Al reves, la instruccion se pierde dentro de la explicacion. */ .protocolo__texto--razon { margin-top: 0.6rem; font-size: 0.88rem; opacity: 0.82; } /* ============================================================ PUERTA DE CONTACTO ============================================================ Se pide nombre y telefono antes de abrir WhatsApp o el telefono. Es una ventana modal y no una seccion de la pagina porque interrumpe una accion en curso: quien pulsa "llamar" espera que pase algo ahora, y hay que resolverlo ahi mismo, no mandarlo a otra parte. ============================================================ */ .puerta { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 1.2rem; } .puerta[hidden] { display: none; } .puerta__velo { position: absolute; inset: 0; background: rgb(0 0 0 / 0.62); } .puerta__caja { position: relative; width: 100%; max-width: 26rem; max-height: calc(100vh - 2.4rem); overflow-y: auto; padding: 1.6rem 1.5rem 1.4rem; background: var(--papel); border: 1px solid var(--linea); border-radius: var(--r-md); box-shadow: var(--sombra-alta); } .puerta__titulo { margin: 0 0 0.5rem; font-family: var(--serif); font-size: 1.3rem; color: var(--tinta); } .puerta__texto { margin: 0 0 1.1rem; font-size: 0.94rem; line-height: 1.6; color: var(--tinta-media); } .puerta__caja .campo + .campo { margin-top: 0.8rem; } .puerta__error { margin: 0.9rem 0 0; padding: 0.6rem 0.8rem; border-left: 3px solid #c0392b; border-radius: 0 var(--r-sm) var(--r-sm) 0; background: rgb(192 57 43 / 0.1); font-size: 0.88rem; line-height: 1.5; color: var(--tinta); } .puerta__error[hidden] { display: none; } .puerta__acciones { display: flex; align-items: center; gap: 1rem; margin-top: 1.2rem; } .puerta__aviso { margin: 0.9rem 0 0; font-size: 0.78rem; line-height: 1.5; color: var(--tinta-suave); } @media (max-width: 420px) { .puerta__acciones { flex-direction: column; align-items: stretch; gap: 0.7rem; } .puerta__acciones .boton { width: 100%; } }