/* ========================================================================== css/style.css — OGA Paraguay / Precio Justo Paraguay Marketplace inmobiliario: precio justo, verificado, sin sorpresas. Autocontenido: cero fuentes/íconos/CDN externos (fuentes locales en fonts/, pila de sistema como fallback + SVG inline). Mobile-first. Compuesto para casar con las clases emitidas por data.js / ui-core.js / ui-pages.js / ui-public.js / app.js (y, por convención, con lo que ui-panel.js / index.html añadan siguiendo el mismo patrón). IDENTIDAD 2026 — "herramienta funcional" (rediseño completo, ver commit): blanco funcional, alta densidad de información, el PRECIO como protagonista absoluto. Un solo acento de acción (verde = confianza, CTA, "precio justo"), terracota reservado EXCLUSIVAMENTE para alertas/errores/fuera-de-rango — nunca como acento decorativo. Esquinas mínimas (4px), sombras SIEMPRE suaves (nunca offset duro de estampado, nunca difusas tipo glass). Cero azul/violeta, cero glassmorphism, cero gradientes de texto, cero fotos de stock. Titulares en serif (Fraunces, itálica para la palabra de acento), cuerpo en sans neutra (Archivo), micro-etiquetas y datos en mono (IBM Plex Mono uppercase, tracking amplio). Listados en filas anchas foto-izquierda + contenido-derecha (como una herramienta inmobiliaria real), no en tarjetas de revista. ========================================================================== */ /* ---------- 0. FUENTES LOCALES ---------- Todos los .ttf viven en fonts/ (hermano de css/), licencia SIL OFL 1.1 en fonts/*-OFL.txt. Fraunces y Archivo son variable fonts (un solo archivo cubre todo el rango de peso vía font-weight: min max); Fraunces trae ADEMÁS un archivo itálico real independiente (Fraunces-Italic-Variable.ttf) -> se declara como face aparte con font-style:italic, así el navegador usa la itálica DE VERDAD (nunca una oblicua sintética) para la palabra acentuada del H1. IBM Plex Mono solo existe en pesos estáticos (Regular + SemiBold) río arriba, así que son dos @font-face normales, sin rango. 20-ago-2026 (auditoría CLAW): cada face pasa a servirse en WOFF2 primero, con el .ttf detrás como reserva. Los cinco archivos sumaban 1.669 KB en TTF y suman 683 KB en WOFF2 -- un 59% menos, medido, sin tocar un solo glifo (WOFF2 es el MISMO contorno con compresión Brotli específica de fuentes). La lista de src es por orden de preferencia: el navegador coge el primer formato que entiende, así que un navegador moderno JAMÁS descarga el .ttf; el .ttf se queda solo por si algo muy viejo llega a la web, y porque borrarlo no ahorra nada a nadie que la visite. Queda pendiente el subsetting a latín (recortar los glifos que esta web no usa nunca): bajaría otro buen pellizco, pero necesita fontTools y este servidor no tiene Python. Sin hacer. */ @font-face { font-family: "Fraunces Variable"; src: url("../fonts/Fraunces-Variable.woff2") format("woff2"), url("../fonts/Fraunces-Variable.ttf") format("truetype"); font-weight: 400 900; font-style: normal; font-display: swap; } /* ===== Gestión de alquileres ===== */ .rental-landing-intro, .rental-benefits, .rental-roles, .rental-steps, .rental-legal-limit { margin: clamp(var(--s6), 6vw, calc(var(--s7) + var(--s5))) 0; } .rental-landing-intro { max-width: 920px; } .rental-public-page > h1 { max-width: 1000px; font-size: clamp(2.2rem, 5.1vw, 4.2rem); line-height: 1.08; } .rental-public-page .rental-landing-intro { margin-top: clamp(var(--s5), 3.2vw, var(--s7)); } .rental-landing-intro .lead { max-width: 760px; font-size: clamp(1.08rem, 2vw, 1.32rem); line-height: 1.6; } .rental-landing-intro .cta { margin-top: var(--s5); } .rental-benefits > div:first-child, .rental-roles, .rental-steps, .rental-legal-limit { max-width: 900px; } .rental-benefit-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: var(--s5); } .rental-benefit-grid .panel-card { padding: clamp(var(--s4), 3vw, var(--s6)); } .rental-benefit-grid h3 { margin: 0 0 var(--s3); font-size: 1.2rem; } .rental-steps ol { display: grid; gap: 12px; padding-left: 24px; margin-top: var(--s4); list-style: decimal; } .rental-steps li { padding-left: var(--s2); line-height: 1.55; } .rental-legal-limit { padding: clamp(var(--s5), 4vw, var(--s6)); border: 1px solid var(--hairline); border-left: 4px solid var(--terracota); background: var(--bg-soft); } /* Presentación editorial: un mapa de relaciones, no un dashboard ni datos de ejemplo. Todo el texto es HTML traducible; el SVG solo dibuja. El contenido nunca depende de JS ni de una animación para verse. Tokens de marca y márgenes en los cuatro lados. */ .rental-presentation { --rental-diagram-line: var(--primary-20); margin: var(--s7) 0; padding: clamp(var(--s5), 4vw, var(--s7)); background: var(--bg-soft); border-top: 2px solid var(--primary); border-bottom: 1px solid var(--hairline); } .rental-presentation figcaption { max-width: 780px; } .rental-presentation figcaption h2 { margin: var(--s3) 0 var(--s4); font-size: clamp(1.8rem, 3.2vw, 2.7rem); line-height: 1.15; text-wrap: balance; } .rental-presentation figcaption > p:not(.kicker) { max-width: 650px; color: var(--ink-soft); line-height: 1.6; } .rental-presentation figcaption .rental-presentation-hint { margin-top: var(--s4); color: var(--primary-dark); } .rental-presentation-map { display: grid; gap: var(--s6); margin-top: var(--s6); } .rental-presentation ul, .rental-presentation ol { margin: 0; padding: 0; list-style: none; } .rental-presentation li { min-width: 0; } .rental-presentation-people { display: grid; gap: var(--s4); } .rental-presentation-people li { background: var(--bg); border: 1px solid var(--hairline); border-radius: var(--radius); } .rental-presentation details { min-width: 0; width: 100%; } .rental-presentation summary { display: flex; position: relative; align-items: flex-start; gap: var(--s3); min-height: 44px; padding: var(--s4); cursor: pointer; list-style: none; border-radius: var(--radius); } .rental-presentation summary::-webkit-details-marker { display: none; } .rental-presentation summary > div { flex: 1; min-width: 0; } .rental-presentation summary strong, .rental-presentation summary span, .rental-presentation details > p { overflow-wrap: anywhere; } .rental-presentation summary:hover { background: var(--primary-08); } .rental-presentation summary:hover strong { text-decoration: underline; text-underline-offset: 3px; } .rental-presentation summary:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; } .rental-presentation details[open] > summary { background: var(--primary-08); } .rental-presentation details > p { padding: var(--s4); margin: 0; color: var(--ink-soft); font-size: 1rem; line-height: 1.6; } .rental-presentation summary .rental-presentation-toggle { position: relative; flex: 0 0 16px; width: 16px; height: 16px; margin: var(--s1) 0 0; color: var(--primary-dark); } .rental-presentation-toggle::before, .rental-presentation-toggle::after { content: ""; position: absolute; left: 1px; top: 7px; width: 14px; height: 2px; background: currentColor; } .rental-presentation-toggle::after { transform: rotate(90deg); } .rental-presentation details[open] > summary .rental-presentation-toggle::after { transform: rotate(0); } .rental-presentation strong { display: block; color: var(--ink); font-size: 1rem; line-height: 1.4; } .rental-presentation li span, .rental-presentation-home-label span { display: block; margin-top: var(--s1); color: var(--ink-soft); font-size: 1rem; line-height: 1.5; } .rental-presentation li svg { width: 32px; height: 32px; flex: 0 0 32px; color: var(--primary-dark); fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .rental-presentation-home { position: relative; min-width: 0; display: flex; flex-direction: column; align-items: center; align-self: center; padding: var(--s4) 0; } .rental-presentation-home-details > summary { flex-direction: column; align-items: center; padding: var(--s2); } .rental-presentation .rental-presentation-home-label > .rental-presentation-toggle { position: absolute; top: var(--s3); right: var(--s3); } .rental-presentation-home-details[open] > p { background: var(--bg); border: 1px solid var(--hairline); } .rental-presentation-house { display: block; width: min(100%, 440px); height: auto; overflow: visible; } .rental-house-plan { fill: none; stroke: var(--rental-diagram-line); stroke-width: 1; } .rental-house-building { stroke: var(--primary-dark); stroke-width: 1.6; stroke-linejoin: round; } .rental-house-front, .rental-house-paper { fill: var(--bg); } .rental-house-side { fill: color-mix(in srgb, var(--primary) 14%, var(--bg)); } .rental-house-roof { fill: var(--primary-dark); } .rental-house-edge { fill: none; } .rental-house-window { fill: var(--primary-20); } .rental-presentation-home-label { position: relative; padding: var(--s3) calc(var(--s4) + var(--s5)) var(--s3) var(--s4); background: var(--bg); text-align: center; border: 1px solid var(--rental-diagram-line); border-radius: var(--radius); } .rental-presentation-home-label strong { color: var(--primary-dark); font-size: 1.15rem; } .rental-presentation-modules { display: grid; align-content: center; gap: var(--s5); } .rental-presentation-modules li { border-bottom: 1px solid var(--hairline); } .rental-presentation-history { border-top: 1px solid var(--rental-diagram-line); padding-top: var(--s5); } .rental-presentation-history .kicker { margin-bottom: var(--s5); } .rental-presentation-timeline { display: grid; gap: var(--s5); } .rental-presentation-timeline li { position: relative; padding-left: var(--s6); } .rental-presentation-timeline summary { justify-content: space-between; padding: var(--s2); } .rental-presentation-timeline details > p { padding: var(--s3) var(--s2); } .rental-presentation-timeline li::before { content: ""; position: absolute; top: 6px; left: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 4px var(--bg-soft); z-index: 1; } .rental-presentation-timeline li:not(:last-child)::after { content: ""; position: absolute; left: 4px; top: var(--s4); bottom: calc(-1 * var(--s5) - var(--s2)); width: 1px; background: var(--rental-diagram-line); } .rental-presentation-caption { margin-top: var(--s6); padding-top: var(--s5); border-top: 1px solid var(--hairline); } .rental-presentation-caption > p:first-child { max-width: 700px; font-family: var(--font-display); font-size: clamp(1.35rem, 2.4vw, 1.9rem); line-height: 1.3; text-wrap: balance; } .rental-presentation-caption > p:last-child { margin-top: var(--s3); color: var(--ink-soft); font-size: 1rem; line-height: 1.5; } @media (min-width: 700px) { .rental-presentation-map { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--s7); } .rental-presentation-people { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); } .rental-presentation-people summary { display: grid; grid-template-columns: minmax(0, 1fr) 16px; } .rental-presentation-people summary > div { grid-column: 1 / -1; grid-row: 2; } .rental-presentation-people summary > .rental-presentation-toggle { grid-column: 2; grid-row: 1; } .rental-presentation-home::after { content: ""; position: absolute; right: calc(-1 * var(--s5)); top: 50%; width: var(--s7); height: 1px; background: var(--rental-diagram-line); } .rental-presentation-history { grid-column: 1 / -1; } .rental-presentation-timeline { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4); } .rental-presentation-timeline li { padding: var(--s5) var(--s2) 0 0; } .rental-presentation-timeline li::before { top: 0; } .rental-presentation-timeline li:not(:last-child)::after { top: 4px; left: 10px; bottom: auto; width: calc(100% + var(--s4)); height: 1px; } } @media (min-width: 980px) { .rental-presentation-map { grid-template-columns: minmax(0, .9fr) minmax(0, 1.2fr) minmax(0, 1fr); column-gap: var(--s6); } .rental-presentation-people { grid-column: auto; grid-template-columns: minmax(0, 1fr); align-content: center; gap: var(--s5); } .rental-presentation-people li { position: relative; } .rental-presentation-people summary { display: flex; } .rental-presentation-people li::after { content: ""; position: absolute; left: 100%; top: 50%; width: var(--s6); height: 1px; background: var(--rental-diagram-line); } .rental-presentation-home::after { right: calc(-1 * var(--s4)); width: var(--s6); } } @media (prefers-reduced-motion: no-preference) { .rental-presentation-house { animation: rental-presentation-appear .6s ease-out both; } .rental-presentation-people li, .rental-presentation-modules li { animation: rental-presentation-appear .5s ease-out both; } .rental-presentation-people li:nth-child(2), .rental-presentation-modules li:nth-child(2) { animation-delay: .1s; } .rental-presentation-people li:nth-child(3), .rental-presentation-modules li:nth-child(3) { animation-delay: .2s; } @supports (animation-timeline: view()) { .rental-presentation-house, .rental-presentation-people li, .rental-presentation-modules li, .rental-presentation-timeline li { animation: rental-presentation-appear ease-out both; animation-timeline: view(); animation-range: entry 0% entry 85%; } } } @keyframes rental-presentation-appear { from { opacity: .45; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } .rental-panel-intro { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: var(--s6); } .rental-panel-intro p { margin: 0; max-width: 720px; } .rental-invites { margin-bottom: var(--s6); } .rental-invites .panel-card { margin-top: var(--s3); padding: var(--s5); } .rental-space-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .rental-space-card { padding: var(--s5); } .rental-space-card h3 { margin: var(--s3) 0 var(--s2); font-size: 1.2rem; } .rental-card-top, .rental-detail-head, .rental-module-head, .rental-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; } .rental-detail-head { align-items: flex-start; margin: var(--s5) 0; padding-bottom: var(--s5); border-bottom: 1px solid var(--hairline); } .rental-detail-head h3 { margin: var(--s3) 0 var(--s2); font-size: clamp(1.35rem, 3vw, 2rem); } .rental-back { margin-bottom: var(--s1); } .rental-panel-intro .btn, .rental-detail-head .btn, .rental-back.btn-sm, .rental-danger-zone .btn, .rental-inline-form .btn, .rental-invites .btn-sm, .rental-space-card .btn-sm, .rental-coming-soon .btn-sm, .panel-section .btn-sm { min-height: 44px; } .rental-dashboard { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin: var(--s5) 0 var(--s6); } .rental-module { min-width: 0; padding: var(--s5); } .rental-module-head { padding-bottom: var(--s3); border-bottom: 1px solid var(--hairline); } .rental-module-head h3 { margin: 0; font-size: 1.08rem; } .rental-module-head .btn-xs, .rental-row .btn-xs { min-height: 44px; } .rental-row { align-items: flex-start; padding: var(--s3) 0; border-bottom: 1px solid var(--hairline); } .rental-row:last-child { border-bottom: 0; padding-bottom: 0; } .rental-row > div:first-child { min-width: 0; } .rental-row strong, .rental-row span { display: block; } .rental-row strong { margin-bottom: 4px; overflow-wrap: anywhere; } .rental-row span { color: var(--ink-soft); line-height: 1.45; } .rental-row > div:last-child { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; } .rental-row-stack { align-items: flex-start; } .rental-empty { padding: var(--s5) 0 var(--s2); color: var(--ink-soft); } .rental-empty p { margin: 0; } .rental-consents { display: grid; gap: 12px; margin: var(--s4) 0 var(--s5); } fieldset.rental-consents { min-width: 0; padding: 0; border: 0; } fieldset.rental-consents legend { margin-bottom: var(--s2); font-weight: 700; } .rental-consents .check { align-items: flex-start; padding: var(--s3); border: 1px solid var(--hairline); border-radius: var(--radius); font-size: 1rem; line-height: 1.55; } .rental-consents .check input { margin-top: var(--s1); flex: 0 0 auto; } .rental-permission-grid .check, .rental-authority-check { font-size: 1rem; line-height: 1.5; } .rental-legal-check { font-size: 1rem; line-height: 1.55; } .rental-legal-note.nota { font-size: 1rem; line-height: 1.55; } .rental-invite-scope { margin: var(--s4) 0; } .rental-invite-scope > strong { display: block; margin-bottom: var(--s2); } .rental-permission-summary { display: grid; gap: 0; margin: var(--s2) 0 0; padding: 0; list-style: none; border: 1px solid var(--hairline); border-radius: var(--radius); overflow: hidden; } .rental-permission-summary li { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-height: 44px; padding: var(--s2) var(--s3); border-bottom: 1px solid var(--hairline); } .rental-permission-summary li:last-child { border-bottom: 0; } .rental-permission-summary .stamp { flex: 0 0 auto; } .rental-message-list { display: grid; gap: 12px; margin-bottom: var(--s4); } .rental-message-list article { padding: var(--s4); border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--bg); } .rental-message-list article > div { display: flex; justify-content: space-between; gap: 12px; } .rental-message-list p { margin: var(--s2) 0 0; white-space: pre-wrap; overflow-wrap: anywhere; } .rental-inline-form { display: grid; gap: 12px; padding: var(--s4); border: 1px solid var(--hairline); background: var(--bg-soft); } .rental-inline-form .field { margin: 0; } .rental-timeline { position: relative; display: grid; gap: 0; margin: 0; padding: 0; list-style: none; } .rental-timeline::before { content: ""; position: absolute; left: 7px; top: 10px; bottom: 10px; width: 1px; background: var(--hairline); } .rental-timeline li { position: relative; display: grid; grid-template-columns: 16px 1fr; gap: 14px; padding: var(--s3) 0; } .rental-timeline-dot { position: relative; z-index: 1; width: 15px; height: 15px; margin-top: var(--s1); border-radius: 50%; background: var(--verde); border: 3px solid var(--bg); box-shadow: 0 0 0 1px var(--verde); } .rental-timeline strong { text-transform: capitalize; } .rental-timeline p { margin: var(--s1) 0 0; color: var(--ink-soft); } .rental-danger-zone { margin-top: var(--s6); padding: var(--s5); border: 1px solid color-mix(in srgb, var(--terracota) 45%, var(--hairline)); background: color-mix(in srgb, var(--terracota) 5%, var(--bg)); } .rental-danger-zone h3 { margin-top: 0; } .rental-row-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; } .rental-pending-access { margin-top: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--hairline); } .rental-pending-access h4 { margin: 0; font-family: var(--font-body); font-size: .92rem; } .rental-permission-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: var(--s4) 0; padding: var(--s4); border: 1px solid var(--hairline); } .rental-permission-grid legend { padding: 0 8px; font-weight: 700; } .rental-permission-grid .check { align-items: flex-start; min-width: 0; padding: var(--s3); background: var(--bg-soft); } .rental-permission-grid input { flex: 0 0 auto; margin-top: var(--s1); } .rental-permission-grid .rental-authority-check { box-sizing: border-box; min-height: 44px; margin-top: var(--s2); } @media (max-width: 760px) { .rental-benefit-grid, .rental-space-grid, .rental-dashboard { grid-template-columns: 1fr; } .rental-panel-intro, .rental-detail-head { flex-direction: column; align-items: stretch; } .rental-detail-head .cta { display: grid; grid-template-columns: 1fr; } .rental-detail-head .cta .btn { width: 100%; } .rental-permission-grid { grid-template-columns: 1fr; } } @media (max-width: 480px) { .rental-card-top, .rental-row, .rental-message-list article > div { align-items: flex-start; flex-direction: column; } .rental-row > div:last-child { justify-content: flex-start; } .rental-row-actions { width: 100%; justify-content: flex-start; } .rental-row-actions .btn { flex: 1 1 140px; } .rental-module, .rental-space-card { padding: var(--s4); } } @font-face { font-family: "Fraunces Variable"; src: url("../fonts/Fraunces-Italic-Variable.woff2") format("woff2"), url("../fonts/Fraunces-Italic-Variable.ttf") format("truetype"); font-weight: 400 900; font-style: italic; font-display: swap; } @font-face { font-family: "Archivo Variable"; src: url("../fonts/Archivo-Variable.woff2") format("woff2"), url("../fonts/Archivo-Variable.ttf") format("truetype"); font-weight: 400 700; font-style: normal; font-display: swap; } @font-face { font-family: "IBM Plex Mono"; src: url("../fonts/IBMPlexMono-Regular.woff2") format("woff2"), url("../fonts/IBMPlexMono-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "IBM Plex Mono"; src: url("../fonts/IBMPlexMono-SemiBold.woff2") format("woff2"), url("../fonts/IBMPlexMono-SemiBold.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; } /* ---------- 1. RESET + TOKENS ---------- */ *, *::before, *::after { box-sizing: border-box; } html, body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; } ul, ol { padding: 0; list-style: none; } /* ---------- RITMO VERTICAL (23-ago-2026) ---------- La linea de arriba pone a CERO el margen de titulos, parrafos y listas. Como reset esta bien, pero nadie repone luego el ritmo: cada componente tiene que acordarse de su propio margen, y donde nadie se acordo el contenido sale pegado. Ese es el origen real de "titulos pegados a parrafos" que señalo Pol el 23-ago. Se repone con selectores de ADYACENCIA (`+`), no con un margin suelto en h2/p: asi solo actua cuando hay DOS elementos seguidos -- que es exactamente el caso "pegado" -- y no añade hueco a un titulo que vive solo dentro de una tarjeta ni a un parrafo unico. Especificidad 0,0,2: la pisa cualquier regla de componente que ya tenga su propio margen, asi que no rompe nada de lo que ya estaba bien colocado. */ h1 + p, h2 + p, h3 + p, h4 + p, h1 + ul, h2 + ul, h3 + ul, h4 + ul, p + p, p + ul, ul + p { margin-top: var(--s3); } /* Un titulo seguido de otro (h2 de seccion + h3 de su primer apartado): sin esto salen pegados, que es el mismo agujero de adyacencia de siempre visto desde otro lado. Hueco menor que el de seccion: el h3 PERTENECE al h2 que tiene encima, y el espacio tiene que decirlo. */ h2 + h3, h3 + h4 { margin-top: var(--s4); } p + h2, ul + h2, p + h3, ul + h3 { margin-top: var(--s6); } /* Las adyacencias que FALTABAN (24-ago-2026). Se vio en /precio-justo: el h2 "La fórmula, en 4 pasos" salía pegado a la caja verde de arriba, porque el ritmo cubría `p + h2` y `ul + h2` pero no `div + h2` -- y la caja es un
. Los otros cinco h2 de esa página no lo sufrían porque llevaban un margen de 40 px escrito a mano en el propio atributo style: no era una regla, era un apaño repetido cinco veces y olvidado una. Se quitaron los cinco y el hueco lo pone esto. NO se pone `div + h2` a secas, que es medio sitio: solo los bloques de CONTENIDO que de verdad preceden a un título (nota, lista numerada, tabla, tarjeta de resultado). Mismo paso --s6 que `p + h2`, a propósito: el hueco delante de un título no puede depender de qué clase de bloque venga antes -- esa dependencia es justo la enfermedad que se está curando. */ ol + h2, ol + h3, .note-box + h2, .note-box + h3, .tbl-wrap + h2, .tbl-wrap + h3, .panel-card + h2, .panel-card + h3, .pj-resultado + h2, .pj-resultado + h3 { margin-top: var(--s6); } p + .cta, ul + .cta, h2 + .cta, h3 + .cta, p + .btn, ul + .btn { margin-top: var(--s4); } img, picture { max-width: 100%; display: block; } /* Nada rompe la caja por la derecha (23-ago-2026, Pol: "fijate que no se corte por la derecha nada, todos los margenes bien ajustados"). Medido antes de tocar: el documento NO tenia scroll horizontal (scrollWidth == clientWidth a 430px), asi que no habia un desborde que arreglar hoy. Esto es la red para que no aparezca manana: la causa tipica en movil es una cadena sin espacios -- una URL pegada, un email largo, un titulo de anuncio en MAYUSCULAS SIN_ESPACIOS -- que no puede partirse y empuja su contenedor. `overflow-wrap: anywhere` la parte en vez de reventar el ancho. No afecta al texto normal. Las tablas y los bloques de codigo se acotan por lo mismo. */ body { overflow-wrap: anywhere; } table { max-width: 100%; } pre, code { overflow-wrap: anywhere; white-space: pre-wrap; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; background: none; border: none; } a { color: inherit; text-decoration: none; } [hidden] { display: none !important; } :root { /* ----- paleta (tokens EXACTOS del brand guide — la única fuente de color) ----- */ --bg: #ffffff; /* blanco puro, fondo principal */ --bg-soft: #f7f7f5; /* gris cálido muy suave: hover, secciones alternas, superficie "hundida" de inputs/meta-datos */ --ink: #1a1a1a; /* negro casi puro: títulos, precios, botones sólidos (línea) */ --ink-soft: #5c5c5c; /* gris medio: cuerpo, micro-datos, labels */ --hairline: #e6e4df; /* gris cálido muy claro: separadores, bordes sutiles */ --line-strong: #d8d5cd; /* gris cálido un paso más oscuro: bordes de tarjeta y botones de línea */ --primary: #0f7a4d; /* verde confianza: CTAs, éxito, "precio justo" — el ÚNICO acento de acción */ --primary-dark: #0a5c3a; /* verde hover */ --alert: #b6482a; /* terracota: SOLO alertas, errores, "fuera de rango" — nunca decorativo */ --ocre: #9a6b00; /* aviso / estado "pendiente" */ --border-card: 1px solid var(--line-strong); /* ----- tintas derivadas (rgba de los acentos base, mismo patrón que ink-soft/hairline/line-strong) — para fondos de insignia/estado y anillos de foco, siempre <=.22 de opacidad. ----- */ --primary-08: rgba(15, 122, 77, .08); --primary-14: rgba(15, 122, 77, .14); --primary-20: rgba(15, 122, 77, .20); --alert-08: rgba(182, 72, 42, .08); --alert-14: rgba(182, 72, 42, .14); --alert-22: rgba(182, 72, 42, .22); --ocre-16: rgba(154, 107, 0, .16); --ink-08: rgba(26, 26, 26, .06); /* ----- forma: esquinas mínimas, sensación de herramienta ----- */ /* ----- escala de ESPACIADO (23-ago-2026) ----- Hasta hoy :root tenia 34 tokens de color, tipo y sombra y CERO de espacio: el CSS usaba 37 valores distintos de pixel (1,2,3,4,5,6,7,8,9,10,11,12,13,14,16,18,20,22,24...) mas 181 estilos de margen escritos a mano dentro de js/*.js. No era una escala, era lo que salio en cada momento -- y por eso los "botones pegados" reaparecian en otra pantalla cada vez que se arreglaban donde se veian (ver scripts/test/test-botones-pegados.js, que nacio de que Pol lo señalara DOS veces el mismo dia). Siete pasos. Todo espaciado nuevo sale de aqui; lo viejo se migra por tandas. */ --s1: 4px; /* pegado a proposito: icono y su texto */ --s2: 8px; /* dentro de un mismo control */ --s3: 12px; /* entre elementos hermanos muy relacionados */ --s4: 16px; /* ritmo por defecto entre bloques de contenido */ --s5: 24px; /* separacion entre grupos distintos */ --s6: 32px; /* entre secciones dentro de una pagina */ --s7: 48px; /* entre secciones mayores */ --radius: 4px; /* ----- sombra: SIEMPRE suave, nunca offset duro ni difusa tipo glass ----- */ --shadow-card: 0 1px 2px rgba(26, 26, 26, .08); /* reposo de tarjetas/paneles/inputs */ --shadow-card-hover: 0 4px 16px rgba(26, 26, 26, .10); /* tarjetas al hover */ --shadow-float: 0 16px 40px rgba(26, 26, 26, .16); /* overlays flotantes: modal/dropdown/toast/cookie banner */ /* ----- tipografía ----- */ --font-display: "Fraunces Variable", Georgia, serif; --font-body: "Archivo Variable", system-ui, sans-serif; --font-mono: "IBM Plex Mono", monospace; --container: 1180px; /* Relleno lateral del contenedor. Es un TOKEN porque hay bloques (el hero) que tienen que salirse EXACTAMENTE esa distancia para llegar de borde a borde. Con el numero escrito a mano el hero se salia 2px por lado a 360 y 430px y el sitio entero se movia de lado. */ --wrap-pad: 18px; --header-h: 64px; --marquee-h: 30px; /* alto de la franja superior (.pj-marquee) */ --chrome-h: calc(var(--header-h) + var(--marquee-h)); /* alto TOTAL del chrome fijo (marquee + top-bar) */ /* ----- puente de compatibilidad (NO tocar sin revisar antes js/ui-pages.js, js/ui-public.js y js/ui-tasador.js): escriben style="color:var(--ac2)" / var(--soft) / var(--verde) / var(--terracota) inline al construir HTML por string (el gráfico de tendencia del tasador en particular pinta la línea subiendo/bajando con estos dos últimos). Se mantiene el mismo puente que ya existía (--ac2/--soft), ampliado con los dos nombres de color viejos que el rediseño 2026 renombró (--verde -> --primary, --terracota -> --alert), para que ese texto inline no se quede sin color. */ --ac2: var(--primary); --soft: var(--ink-soft); --verde: var(--primary); --terracota: var(--alert); } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; font-synthesis: none; /* itálica y variable-weight reales están servidas; nunca fingir negrita/cursiva */ } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } body { font-family: var(--font-body); background: var(--bg); color: var(--ink-soft); font-size: 1rem; line-height: 1.55; min-height: 100vh; position: relative; isolation: isolate; -webkit-tap-highlight-color: transparent; padding-top: var(--chrome-h); } /* ---------- FONDO: blanco funcional, sin tinte decorativo. --sc/--th los sigue escribiendo ui-core.js (tick() en js/ui-core.js) — mecánica intacta, simplemente ya no hay nada que pintar con ellos (herramienta, no revista). */ h1, h2, h3, h4 { font-family: var(--font-display); color: var(--ink); font-weight: 600; line-height: 1.12; } /* H1: cada pageShell() de app.js es, en la práctica, el "hero" de su propia página (home incluida) -> escala grande. Excepción deliberada: dentro del panel (ui-panel.js:368 pinta un

Hola, Nombre

como saludo de dashboard, mismo tag, contexto MUY distinto) se acota para no reventar la columna de 1fr junto al nav de 240px — no hay forma de diferenciarlo sin tocar JS/HTML, así que se resuelve por selector descendente sobre .panel-layout/.panel-content, que ya existen. */ h1 { font-size: clamp(2.2rem, 1.4rem + 3.6vw, 4.6rem); letter-spacing: -.01em; } .panel-layout h1, .panel-content h1 { font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.4rem); } /* Palabra acentuada del H1 (p.ej. "Alquilá justo."): itálica real de Fraunces en --primary — pre-cableado para cuando el marcado envuelva la palabra en /. */ h1 em, h1 i { font-style: italic; font-weight: 400; color: var(--primary); } h2 { font-size: clamp(1.5rem, 1.15rem + 1.3vw, 2.2rem); } h3 { font-size: clamp(1.15rem, 1.05rem + .3vw, 1.3rem); } h4 { font-size: 1.05rem; } p { color: var(--ink-soft); font-size: 1rem; } small { color: var(--ink-soft); font-size: .82em; } /* ---------- 2. PRIMITIVAS DE LAYOUT ---------- */ #app { position: relative; z-index: 1; min-height: 60vh; } .page-wrap { max-width: var(--container); margin: 0 auto; padding: 28px var(--wrap-pad) 56px; position: relative; } @media (min-width: 720px) { :root { --wrap-pad: 28px; } .page-wrap { padding: 40px var(--wrap-pad) 72px; } } @media (min-width: 1200px) { :root { --wrap-pad: 0px; } .page-wrap { padding: 52px var(--wrap-pad) 88px; } } .kicker { display: inline-block; font-family: var(--font-mono); font-size: .68rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--primary); margin-bottom: 8px; } .lead { font-size: 1.06rem; color: var(--ink-soft); max-width: 56ch; margin-top: 10px; } /* .page-cta-profesional (30-ago-2026, pedido de Pol): CTA pequeño hacia /colaboradores desde el Tasador, para captar profesionales (tasadores) que buscan la pagina, no solo compradores. Vive arriba a la derecha del titulo, apoyado en position:relative de .page-wrap -- no depende del orden del DOM porque pageShell() renderiza kicker+h1 antes del body de cada pagina. Solo en desktop (md+): en mobile el titulo ya ocupa el ancho completo y un absolute ahi se solaparia. */ .page-cta-profesional { display: none; } @media (min-width: 720px) { .page-cta-profesional { display: inline-flex; align-items: center; gap: var(--s1); position: absolute; top: 28px; right: var(--wrap-pad); font-size: .82rem; font-weight: 600; color: var(--primary); border: 1px solid var(--primary); border-radius: 999px; padding: var(--s2) var(--s4); white-space: nowrap; } .page-cta-profesional:hover { background: var(--primary); color: #fff; } } /* .grid: contenedor de tarjetas de propiedad/demanda (propCard/demCard/panelPropCard/ panelDemandCard) — lista apilada de una columna (filas anchas foto-izquierda + contenido-derecha, ver .card más abajo), no una grilla de mosaico. La densidad viene de la fila ancha, no de amontonar columnas. */ .grid { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 22px; } .loading { padding: 60px 10px; text-align: center; color: var(--ink-soft); font-style: italic; } /* el aro giratorio es una excepción funcional deliberada: un loader circular ES el símbolo universal de carga. Es forma mecánica, no decoración. */ .loading::before { content: ""; display: block; width: 34px; height: 34px; margin: 0 auto 14px; border-radius: 50%; border: 3px solid var(--line-strong); border-top-color: var(--primary); animation: pj-spin .8s linear infinite; } @keyframes pj-spin { to { transform: rotate(360deg); } } .blank { display: inline-block; font-family: var(--font-mono); font-size: .84em; color: var(--ocre); background: var(--ocre-16); border-bottom: 1px dashed var(--ocre); padding: 1px 6px; border-radius: var(--radius); } /* ---------- 2.5. FRANJA SUPERIOR (marquee) — tira fina y fija, SIEMPRE por encima del top-bar (que baja su `top` a --marquee-h para dejarle sitio; body/.panel-side ya suman --chrome-h = --header-h + --marquee-h). Contenido duplicado x2 en el HTML (index.html) para que translateX(-50%) cierre el bucle sin salto. Fondo tinta (separa visualmente la franja del top-bar blanco), separador en verde primario. */ /* 19-ago: ya no es una pista animada (ver el comentario en index.html) -- una sola línea fija, centrada, sin scroll ni bucle. Se conserva el mismo alto (--marquee-h) para no descuadrar el offset del header/modales que ya cuentan con esta franja arriba. */ .pj-marquee { position: fixed; top: 0; left: 0; right: 0; z-index: 30; height: var(--marquee-h); overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--ink); } .pj-marquee-item { padding: 0 20px; font-family: var(--font-mono); font-size: .64rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--bg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } /* ---------- 3. HEADER / TOP-BAR ---------- */ .top-bar { position: fixed; top: var(--marquee-h); left: 0; right: 0; z-index: 30; height: var(--header-h); display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 0 16px; background: var(--bg); /* sólido: nada de vidrio/blur */ border-bottom: 1px solid var(--hairline); } @media (min-width: 900px) { .top-bar { padding: 0 32px; } } .logo { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; color: var(--ink); letter-spacing: -.01em; white-space: nowrap; } .logo span { color: var(--primary); } /* "Real" en el acento de marca */ /* La marca tambien es un enlace de navegacion. Su caja visual medía 32px y el botón de acceso heredaba los 40px de .btn-sm en escritorio; el resto de la cabecera ya trabaja con 44px. Se igualan aquí, sin agrandar los botones compactos del resto de la aplicación. */ .top-bar > .logo, .top-bar #topUser .btn-sm { min-height: 44px; } .top-bar > .logo { display: inline-flex; align-items: center; } /* hallazgo real 18-ago (Pol no encontraba /guia -- no estaba en el menú): al sumarla, el menú de 9 links + "Ingresar" YA NO cabía a partir de los 800px donde encendía -- y medido en vivo (no a ojo), resultó que con los 8 links de ANTES tampoco cabía del todo (se salía ~62px, invisible porque .top-bar es position:fixed y eso NO cuenta para el scrollWidth del documento -- un overflow "silencioso" que no dispara ningún chequeo de scroll horizontal). El breakpoint subió a 1060px con 9 links (medido con getBoundingClientRect) y el gap bajó de 20 a 14px para no perder de golpe el rango 900-1050px sin necesidad. Con el 10º link (Panorama, mismo día) el umbral real volvió a moverse -- medido de nuevo, esta vez cabe recién a partir de 1078px -- así que el breakpoint se puso entonces en 1090px. Después el menú pasó de enlaces simples a cuatro grupos con rótulos más largos y sumó sus controles de cuenta: medido de nuevo el 30-ago, entre 1090 y 1359px la fila obliga a comprimir o truncar el logo. Por eso el escritorio empieza en 1360px; por debajo se usa el panel lateral completo, no una versión apretada de la cabecera. Cada vez que se sume un punto de entrada hay que VOLVER A MEDIR este número (no asumirlo). */ /* ---- MENU: escritorio en fila, movil en panel lateral (20-ago-2026) ---- ANTES de esta fecha el bloque de abajo era solo `display:none` + el @media de 1090px, sin ninguna alternativa por debajo: en movil NO habia menu. Ahora el mismo