/* Notilex — hoja de estilos única. Sin frameworks. * * Sistema: tinta casi negra sobre blanco, un verde profundo como único acento * y aire de sobra. Los titulares van en la misma sans que el texto, con peso y * tracking negativo: la serif de antes envejecía la página entera. * * La escala de tamaños, radios y sombras está tabulada abajo y NO se improvisa * por componente: es lo que separa una web que parece hecha de una web que * parece ensamblada. */ :root { /* superficies */ --papel: #f6f7f8; --superficie: #ffffff; --hueco: #eef0f2; --velo: #fbfbfc; /* tinta */ --tinta: #0e1519; --tinta-2: #46545e; /* ── LA TINTA SECUNDARIA CUMPLE CONTRASTE ──────────────────────────── Era #74838d, que sobre blanco da **3,91 : 1** cuando las pautas piden 4,5 para texto de este cuerpo. No es un detalle de purista: con este tono va casi toda la letra pequeña del sitio, y medido a 395 px el 11/08/2026 eran **1.297 elementos solo en /remates** —las cifras de las tablas—, 22 en la portada y las notas de todas las páginas. El público de esto es gente mayor con un problema legal, muchos desde el móvil. #6a7780 son 4,60 : 1. Es un 9 % más oscuro: sigue leyéndose como texto secundario y no se confunde con `--tinta-2`, que es bastante más negra. ⚠ MEDIDO SOBRE EL HEX FINAL, no sobre el cálculo. El primer candidato daba 4,51 en continuo y 4,48 al redondear a dos dígitos por canal: el redondeo se come el margen justo por debajo del límite. ⚠ Y MEDIDO SOBRE EL FONDO EN QUE SE USA, NO SOBRE BLANCO. #6a7780 daba 4,60 sobre blanco pero solo **4,03 sobre `--hueco`** (#eef0f2), que es el panel gris donde viven las notas y los textos de ayuda. Ajustar contra el fondo más favorable deja fuera justo los sitios donde el texto ya iba apretado. #636f78 son 4,51 sobre el hueco y 5,15 sobre blanco. */ --tinta-3: #636f78; --linea: #e2e6e9; --linea-fuerte: #cfd5da; /* acento */ --verde: #0a6b4c; --verde-vivo: #0d8a62; --verde-suave: #e8f3ee; --laton: #0a6b4c; /* compatibilidad con reglas antiguas */ --laton-claro: #0d8a62; /* semántica */ --grave: #b3251c; /* #9a6410 daba 4,27 : 1 sobre el fondo de su propia etiqueta —el mismo color al 10 % sobre blanco— y hacen falta 4,5. Es la etiqueta «muy dispersa», que avisa de que la mediana NO sirve para decidir en ese grupo: justo el matiz que no puede quedarse en letra ilegible. `--grave` (5,57) y `--ok` (5,62) ya cumplían. */ --alta: #8f5c0e; --ok: #0a6b4c; /* radios */ --r: 10px; --r-s: 6px; --r-l: 16px; --r-pill: 999px; /* elevación: dos niveles, ni uno más */ --sombra: 0 1px 2px rgba(14, 21, 25, .05), 0 1px 3px rgba(14, 21, 25, .04); --sombra-alta: 0 4px 12px rgba(14, 21, 25, .07), 0 12px 32px rgba(14, 21, 25, .07); /* tipografía */ --texto: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; --titulo: var(--texto); --dato: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace; } @media (prefers-color-scheme: dark) { :root { --papel: #0c1013; --superficie: #14191d; --hueco: #1b2227; --velo: #101518; --tinta: #e7ecef; --tinta-2: #a7b3bb; /* Aquí se ACLARA, que el fondo es oscuro: #7b8891 sobre el hueco daba 4,42 : 1, también por debajo de 4,5. #7d8b94 son 4,59. */ --tinta-3: #7d8b94; --linea: #252d33; --linea-fuerte: #333d45; --verde: #2ea37a; --verde-vivo: #3dbb8e; --verde-suave: #12271f; --laton: #2ea37a; --laton-claro: #3dbb8e; --grave: #e0685e; --alta: #d3a04a; --ok: #2ea37a; --sombra: 0 1px 2px rgba(0, 0, 0, .4); --sombra-alta: 0 4px 14px rgba(0, 0, 0, .45), 0 16px 40px rgba(0, 0, 0, .4); } } * { box-sizing: border-box; } /* Salvaguarda: nada debe hacer que la página se desplace en horizontal. Lo que necesita desplazarse —las tablas del índice— lleva su propio contenedor con `overflow-x: auto`. Se usa `clip` y no `hidden` porque `hidden` en un ancestro anula `position: sticky` y la cabecera dejaría de quedarse arriba. HONESTIDAD SOBRE LO MEDIDO: en /remates a 360 y 390 px el `scrollWidth` del documento sigue dando 409 dentro de un marco de prueba, y esta regla no lo cambia. Pero `body` mide justo el ancho de la ventana y ningún descendiente se sale, así que lo más probable es que sea un artefacto de medir dentro de un iframe y no algo que un visitante vea. Queda anotado para no volver a perseguirlo a ciegas. */ html { -webkit-text-size-adjust: 100%; overflow-x: clip; } body { margin: 0; background: var(--papel); color: var(--tinta); font-family: var(--texto); line-height: 1.6; font-size: 16px; -webkit-font-smoothing: antialiased; font-feature-settings: "kern" 1; } a { color: var(--laton); } img, svg { max-width: 100%; } /* Los elementos de una rejilla o un flex traen `min-width: auto`, que equivale a su anchura mínima de contenido. Con un SVG de 1000 px dentro, eso ensancha la página entera y en un móvil el texto sale cortado por la derecha. Pasó: la portada se desbordaba a 390 px y el titular se leía a medias. */ .mapa-portada > *, .mapa-fila > *, .bloques > *, .planes > *, .cifras > * { min-width: 0; } /* Foco visible en todo lo que se puede recorrer con el teclado. Sin esto, quien navega sin ratón no sabe dónde está. */ a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--laton); outline-offset: 2px; border-radius: 2px; } /* Salta la cabecera: aparece solo al tabular, que es cuando sirve. */ .saltar { position: absolute; left: .5rem; top: -4rem; z-index: 10; background: var(--laton); color: #fff; text-decoration: none; padding: .55rem 1rem; border-radius: var(--r); font-size: .9rem; transition: top .15s; } .saltar:focus { top: .5rem; } @media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms !important; transition-duration: .01ms !important; } } /* ── cabecera ─────────────────────────────────────────────── */ /* Fija arriba: en un sitio donde se navega entre fichas, perder la navegación al bajar obliga a subir del todo para cambiar de sección. */ /* ── LA CABECERA ────────────────────────────────────────────────────────── ESTABA DEFINIDA EN CUATRO SITIOS DE ESTA HOJA, y por eso se veía desordenada: la regla base aquí, un ajuste de la navegación 1.250 líneas más abajo («cuatro enlaces respiran de otra manera que nueve» — cuando ya eran cinco), el apilado en móvil en otra consulta de medios, y el teléfono al final del fichero. Cada generación de cambios añadió su parche donde le pilló, y ninguna borró el anterior. Ahora está todo aquí y no se escribe cabecera en ningún otro sitio. TRES ZONAS Y NO CUATRO HIJOS SUELTOS. Antes eran marca, navegación, teléfono y «Entrar» repartiéndose el hueco con `space-between`: al estrechar la ventana cada uno caía donde podía. Con la rejilla, la navegación se queda con el centro y las dos acciones van juntas a la derecha, que es lo que son. */ .cabecera { position: sticky; top: 0; z-index: 20; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.5rem; padding: .7rem clamp(1rem, 4vw, 3rem); background: color-mix(in srgb, var(--superficie) 90%, transparent); backdrop-filter: saturate(1.6) blur(10px); border-bottom: 1px solid var(--linea); } .acciones-cab { display: flex; align-items: center; gap: .5rem; } .marca { font-size: 1.22rem; font-weight: 700; letter-spacing: -.025em; color: var(--tinta); text-decoration: none; display: flex; align-items: center; gap: .5rem; } /* La plomada de la marca: un hilo y su peso. */ .plomo { width: 0; height: 0; border-left: .38rem solid transparent; border-right: .38rem solid transparent; border-top: .72rem solid var(--verde); border-radius: 1px; } /* La navegación ocupa el centro y se centra en él: con `justify-content` a la izquierda, cinco enlaces cortos dejaban un vacío raro antes del teléfono. */ .cabecera nav { display: flex; justify-content: center; flex-wrap: wrap; gap: .15rem; } .cabecera nav a { color: var(--tinta-2); text-decoration: none; font-size: .9rem; font-weight: 500; padding: .45rem .8rem; border-radius: var(--r-pill); white-space: nowrap; } .cabecera nav a:hover { color: var(--tinta); background: var(--hueco); } .cabecera nav a.activo { color: var(--verde); background: var(--verde-suave); font-weight: 600; } /* El teléfono, con la MISMA forma que «Entrar»: las dos son acciones, y una de ellas en dos líneas rompía la fila entera. Va relleno y no perfilado porque es la acción que se quiere que ocurra. */ .telefono-cab { display: inline-flex; align-items: center; gap: .45rem; font-size: .9rem; font-weight: 700; text-decoration: none; color: #fff; background: var(--verde); border: 1px solid var(--verde); border-radius: var(--r-pill); padding: .45rem 1rem; white-space: nowrap; font-variant-numeric: tabular-nums; } .telefono-cab:hover { background: var(--verde-vivo); border-color: var(--verde-vivo); } .telefono-cab .ico-tel { width: .95rem; height: .95rem; fill: currentColor; flex: none; } /* La entrada de clientes se separa de la navegación de venta: no es una sección más del sitio, es la puerta de quien ya paga. */ .acceso-cliente { font-size: .88rem; font-weight: 600; text-decoration: none; color: var(--tinta); border: 1px solid var(--linea-fuerte); border-radius: var(--r-pill); padding: .45rem 1.1rem; white-space: nowrap; background: var(--superficie); } .acceso-cliente:hover { border-color: var(--verde); color: var(--verde); } .acceso-cliente.activo { border-color: var(--verde); color: var(--verde); } /* ── La cabecera al estrecharse ─────────────────────────────────────────── En dos saltos y no en uno. Antes solo había un `flex-direction: column` a 40rem: entre 40 y 62rem la barra seguía en una línea con cinco enlaces, el teléfono y «Entrar», y se atropellaban. Lo primero que se va es «Entrar» —quien busca su panel sabe llegar y está en el pie—; lo último que se va es el teléfono, que no se va nunca: en un móvil es lo que más importa de esta web. */ @media (max-width: 62rem) { .cabecera { grid-template-columns: auto auto; gap: .5rem 1rem; } .cabecera nav { order: 3; grid-column: 1 / -1; justify-content: flex-start; margin: 0 -.35rem; padding-top: .15rem; overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap; } .cabecera nav::-webkit-scrollbar { display: none; } .acciones-cab { justify-self: end; } } @media (max-width: 32rem) { .cabecera { padding-left: 1rem; padding-right: 1rem; } .acceso-cliente { display: none; } .marca { font-size: 1.08rem; } /* ── Y AQUÍ EL MENÚ ENVUELVE, NO SE DESPLAZA ───────────────────────── A 500 px el menú se cortaba a media palabra —«Asesoramiento grat»— y «Qué cuesta» no se veía. No era un desbordamiento de la página: la barra lleva `overflow-x: auto` con la barra de desplazamiento oculta, así que se desplaza a propósito… pero **sin ninguna pista de que se pueda desplazar**. Un texto cortado a media palabra no se lee como «hay más»: se lee como que está roto. Entre 32 y 62rem el desplazamiento sigue siendo lo bueno —caben casi todos y una segunda fila sería aire desperdiciado—. Por debajo caben en dos filas y se ven los cinco. Comparado con capturas de las dos variantes a 500 px. */ .cabecera nav { overflow-x: visible; flex-wrap: wrap; row-gap: .15rem; } } main { padding: clamp(1.5rem, 4vw, 3.5rem) clamp(1rem, 4vw, 3rem); /* Igual que en la raíz: el contenido no se sale, y lo que se desplaza lleva su propio contenedor. */ overflow-x: clip; } .estrecho { max-width: var(--col); margin: 0 auto; } /* Para páginas que son una rejilla de tarjetas y no un texto que se lee. Con 60 rem la rejilla de tarjetas —mínimo 20 rem cada una— solo cabía en dos columnas por mucho que la pantalla fuese de 1400 px: tres columnas necesitan 989 px y el contenedor daba 960. Se veía media pantalla vacía a la derecha. El texto sigue en 60 rem donde hay que leer; esto es solo para listar. */ .ancho { max-width: var(--col-ancha); margin: 0 auto; } .centrado { text-align: center; } /* Escala tipográfica. Titulares en la misma sans que el texto, con peso alto y tracking negativo: es lo que los hace ver actuales. */ h1 { font-weight: 800; line-height: 1.08; font-size: clamp(2rem, 5.2vw, 3.4rem); letter-spacing: -.035em; margin: 0 0 .9rem; text-wrap: balance; } h2 { font-weight: 700; font-size: clamp(1.3rem, 2.4vw, 1.7rem); letter-spacing: -.022em; line-height: 1.2; margin: 0 0 .7rem; text-wrap: balance; } h3 { font-size: 1.02rem; font-weight: 650; letter-spacing: -.012em; margin: 0 0 .4rem; } .entrada { color: var(--tinta-2); font-size: clamp(1.02rem, 1.5vw, 1.16rem); line-height: 1.55; max-width: var(--col-lectura); margin: 0 0 1.6rem; } .eyebrow { font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--verde); margin: 0 0 .7rem; display: inline-flex; align-items: center; gap: .45rem; } .eyebrow::before { content: ""; width: 1.4rem; height: 2px; background: var(--verde); border-radius: 2px; } /* ── portada ──────────────────────────────────────────────── */ .hero { max-width: var(--col); margin: 0 auto 2.5rem; } .acciones { display: flex; flex-wrap: wrap; gap: .8rem; } .acciones.centradas { justify-content: center; } .boton { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .78rem 1.5rem; border-radius: var(--r-pill); border: 1px solid var(--linea-fuerte); background: var(--superficie); color: var(--tinta); text-decoration: none; font-size: .95rem; font-weight: 600; cursor: pointer; font-family: inherit; line-height: 1.2; transition: background .12s, border-color .12s, transform .12s; } .boton:hover { border-color: var(--tinta-3); background: var(--hueco); } .boton:active { transform: translateY(1px); } .boton.primario { background: var(--verde); border-color: var(--verde); color: #fff; box-shadow: var(--sombra); } .boton.primario:hover { background: var(--verde-vivo); border-color: var(--verde-vivo); } /* Buscador de la portada. Grande a propósito: es la primera acción, no una opción del menú. */ .buscador-hero { margin: 1.8rem 0 0; max-width: var(--col-lectura); } .buscador-hero label { display: block; font-size: .88rem; color: var(--tinta-2); margin-bottom: .5rem; } .buscador-hero .fila { display: flex; gap: 0; flex-wrap: wrap; border: 2px solid var(--tinta); border-radius: var(--r); background: var(--superficie); overflow: hidden; } .buscador-hero input { flex: 1 1 16rem; min-width: 0; padding: .85rem 1rem; font-family: var(--dato); font-size: .95rem; border: 0; background: transparent; color: var(--tinta); } .buscador-hero input:focus { outline: 0; } .buscador-hero .fila:focus-within { outline: 2px solid var(--laton); outline-offset: 2px; } .buscador-hero button { padding: .85rem 1.6rem; border: 0; background: var(--laton); color: #fff; font-family: inherit; font-size: .95rem; font-weight: 600; cursor: pointer; } .buscador-hero button:hover { filter: brightness(1.08); } .buscador-hero .ayuda { margin-top: .6rem; } /* Lo que se lleva quien consulta, dicho antes de que tenga que buscarlo. */ .promesas { list-style: none; padding: 0; margin: 1.6rem 0 0; display: grid; gap: .55rem; max-width: var(--col-lectura); } .promesas li { position: relative; padding-left: 1.6rem; font-size: .95rem; color: var(--tinta-2); line-height: 1.45; } .promesas li::before { content: ""; position: absolute; left: 0; top: .52em; width: .55rem; height: .55rem; border-radius: 2px; background: var(--verde); } .promesas strong { color: var(--tinta); } .tangible { margin: 1rem 0 0; font-size: .9rem; color: var(--tinta-2); padding: .7rem .9rem; background: var(--verde-suave); border-radius: var(--r); } .tangible strong { color: var(--verde); font-variant-numeric: tabular-nums; } /* Mapa en la portada: el dato que nos distingue, no detrás de un enlace. */ .mapa-portada { max-width: var(--col); margin: 0 auto 2.5rem; display: grid; gap: 2rem; align-items: center; grid-template-columns: minmax(15rem, 1fr) minmax(17rem, 1.15fr); background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r); padding: 1.8rem; } .mapa-texto h2 { font-size: 1.5rem; } .mapa-texto p { color: var(--tinta-2); font-size: .95rem; } .mapa-texto strong { color: var(--tinta); } .dato-suelto { display: flex; flex-wrap: wrap; gap: .4rem 1.8rem; margin: 1.1rem 0 1.4rem; font-size: .85rem; color: var(--tinta-3); } .dato-suelto b { display: block; font-family: var(--dato); font-size: 1.15rem; color: var(--laton); font-variant-numeric: tabular-nums; } .mapa-mini { margin: 0; } .mapa-mini figcaption { margin-top: .8rem; font-size: .75rem; color: var(--tinta-3); display: flex; justify-content: center; } /* Los dos extremos del mapa, dichos con palabras: es lo primero que quiere saber quien lo mira, y no debería tener que buscarlo tesela a tesela. */ .extremos { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.1rem 0 0; } .ext { display: inline-flex; align-items: baseline; gap: .45rem; padding: .42rem .85rem; border-radius: var(--r-pill); font-size: .85rem; font-variant-numeric: tabular-nums; font-weight: 600; } .ext b { font-weight: 700; } .ext i { font-style: normal; font-weight: 500; opacity: .7; font-size: .78rem; } .ext.arriba { background: var(--verde-suave); color: var(--verde); } .ext.abajo { background: var(--hueco); color: var(--tinta-2); } @media (max-width: 48rem) { .mapa-portada { grid-template-columns: 1fr; } } .cifras { max-width: var(--col-ancha); margin: 0 auto 3rem; display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); } .cifra { background: var(--superficie); padding: 1.3rem 1.2rem; text-align: left; border: 1px solid var(--linea); border-radius: var(--r-l); box-shadow: var(--sombra); } .cifra b { display: block; font-size: 1.85rem; font-weight: 750; letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--tinta); line-height: 1.1; margin-bottom: .2rem; } .cifra span { font-size: .84rem; color: var(--tinta-3); line-height: 1.35; display: block; } /* Declaración de cobertura. Va destacada a propósito: decir exactamente qué se vigila es lo que evita que una consulta sin resultados engañe. */ .cobertura { max-width: var(--col); margin: 0 auto 2.5rem; background: var(--superficie); border: 1px solid var(--linea); border-left: 3px solid var(--laton); border-radius: var(--r); padding: 1rem 1.2rem; font-size: .89rem; color: var(--tinta-2); } .cobertura strong { color: var(--tinta); } .bloques { max-width: var(--col-ancha); margin: 0 auto 3rem; display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); } .bloques article { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r-l); padding: 1.6rem; display: flex; flex-direction: column; transition: box-shadow .15s, border-color .15s, transform .15s; } .bloques article:hover { box-shadow: var(--sombra-alta); border-color: var(--linea-fuerte); transform: translateY(-2px); } .bloques p { color: var(--tinta-2); font-size: .95rem; } .bloques p:last-of-type { flex: 1; } .enlace { font-size: .93rem; text-decoration: none; font-weight: 650; color: var(--verde); display: inline-flex; align-items: center; gap: .3rem; margin-top: .3rem; } .enlace:hover { gap: .55rem; } .franja { max-width: var(--col-ancha); margin: 0 auto; padding: 2.2rem 0 0; border-top: 1px solid var(--linea); } .tres { display: grid; gap: 1.8rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); } .tres p { color: var(--tinta-2); font-size: .92rem; margin: 0; } .tres h3 { display: flex; align-items: center; gap: .5rem; font-size: 1.05rem; } .tres h3::before { content: ""; flex: 0 0 auto; width: .5rem; height: .5rem; border-radius: 2px; background: var(--verde); } /* ── buscador ─────────────────────────────────────────────── */ .buscador { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r); padding: 1.3rem; margin-bottom: 1.8rem; } .buscador label { display: block; font-size: .87rem; color: var(--tinta-2); margin-bottom: .5rem; } .buscador .fila { display: flex; gap: .6rem; flex-wrap: wrap; } .buscador input { flex: 1 1 20rem; padding: .7rem .9rem; font-family: var(--dato); font-size: .92rem; border: 1px solid var(--linea); border-radius: var(--r); background: var(--papel); color: var(--tinta); } .buscador input:focus { outline: 2px solid var(--laton); outline-offset: 1px; } .buscador button { padding: .7rem 1.4rem; border: 1px solid var(--laton); background: var(--laton); color: #fff; border-radius: var(--r); font-family: inherit; font-size: .95rem; cursor: pointer; } .ayuda { font-size: .85rem; color: var(--tinta-3); margin: .8rem 0 0; } .explica, .vacio { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r); padding: 1.4rem; } .explica ul, .vacio ul { color: var(--tinta-2); font-size: .95rem; padding-left: 1.2rem; } .aviso { border-left: 3px solid var(--laton); padding-left: .9rem; font-size: .9rem; color: var(--tinta-2); margin-top: 1rem; } .alerta { border: 1px solid var(--alta); border-left-width: 4px; border-radius: var(--r); padding: .9rem 1.1rem; margin-bottom: 1.4rem; font-size: .93rem; background: var(--superficie); } /* ── listas y tarjetas ────────────────────────────────────── */ .resultados, .seccion { margin-top: 2rem; } .sub { color: var(--tinta-3); font-size: .9rem; margin: 0 0 1rem; } /* `align-items: start` y no el estirado por omisión: las tarjetas no traen la misma cantidad de datos —unas tienen superficie catastral y otras no, unas llevan ortofoto y otras una banda de tres líneas— y al igualarlas por la más alta de la fila, las cortas quedaban con un palmo de blanco debajo. Fotografiado a 1400 px: casi dos centímetros de vacío dentro de la tarjeta. */ .lista { display: grid; gap: .9rem; align-items: start; grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); } .tarjeta { display: block; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r); padding: 1rem 1.1rem; text-decoration: none; color: inherit; } .tarjeta:hover { border-color: var(--laton); } .tarjeta-cab { display: flex; justify-content: space-between; gap: .6rem; align-items: baseline; } .tarjeta .id { font-family: var(--dato); font-size: .74rem; color: var(--tinta-3); } .plazo { font-family: var(--dato); font-size: .74rem; color: var(--tinta-2); } .plazo.urgente { color: var(--grave); font-weight: 700; } .plazo.sin { color: var(--tinta-3); font-style: italic; } .dir { margin: .5rem 0 .1rem; font-weight: 600; font-size: .98rem; } .loc { margin: 0 0 .7rem; color: var(--tinta-3); font-size: .86rem; } .tarjeta-cifras { display: flex; flex-wrap: wrap; gap: .35rem 1.1rem; font-size: .84rem; color: var(--tinta-2); } .tarjeta-cifras b { font-family: var(--dato); font-variant-numeric: tabular-nums; color: var(--tinta); } /* Un dato que no consta se dice, y se dice más flojo que uno que sí. Antes ponía «— deuda»: una raya donde debería ir una cifra no informa de nada, y salía en 494 de 2.132 tarjetas —las 372 de la Agencia Tributaria entre ellas—. Va en cursiva y con el tono de apoyo para que no compita visualmente con las cifras de al lado, que sí son datos. */ .tarjeta-cifras .sin-dato { font-style: italic; color: var(--tinta-3); } .etiquetas { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .7rem; } .etq { font-size: .72rem; padding: .16rem .5rem; border-radius: 2px; border: 1px solid var(--linea); color: var(--tinta-2); } .etq.grave { border-color: var(--grave); color: var(--grave); } .etq.alta { border-color: var(--alta); color: var(--alta); } .etq.baja { border-color: var(--ok); color: var(--ok); } /* ── expediente ───────────────────────────────────────────── */ .volver { font-size: .88rem; margin: 0 0 1rem; } .volver a { text-decoration: none; } .panel { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r); padding: 1.3rem; margin-bottom: 1.2rem; } /* El borde izquierdo grueso empuja el contenido tres píxeles hacia dentro, y un panel destacado casi siempre va justo encima o debajo de uno normal: el texto arrancaba en 240 en vez de 237 y la vertical se rompía. Se descuentan del relleno, que es donde sobran. Medido, no calculado a ojo. */ .panel.destacado { border-color: var(--laton); border-left-width: 4px; padding-left: calc(var(--e3) - 3px); } .prediccion-cifra { font-family: var(--titulo); font-size: clamp(2rem, 6vw, 3rem); line-height: 1; color: var(--laton); font-variant-numeric: tabular-nums; margin: 0 0 .4rem; } .ratio-grande { font-family: var(--titulo); font-size: 3.4rem; line-height: 1; color: var(--laton); font-variant-numeric: tabular-nums; margin-bottom: .3rem; } .ratio-grande span { font-size: .4em; } table.datos { width: 100%; border-collapse: collapse; font-size: .93rem; } table.datos th { text-align: left; font-weight: 400; color: var(--tinta-3); padding: .5rem .8rem .5rem 0; vertical-align: top; width: 42%; border-bottom: 1px solid var(--linea); } table.datos td { padding: .5rem 0; font-family: var(--dato); font-variant-numeric: tabular-nums; border-bottom: 1px solid var(--linea); } table.datos small { display: block; font-family: var(--texto); color: var(--tinta-3); font-size: .78rem; } /* UNA COLUMNA DE NÚMEROS SE ALINEA A LA DERECHA. Sin esto, «528», «1.649» y «344.082» empiezan todos en el mismo sitio y la magnitud no se ve de un vistazo: hay que leer cada cifra entera. Alineados a la derecha, las unidades quedan debajo de las unidades y la columna se lee sola. El encabezado de una columna así se alinea también, o el título cuelga del lado contrario que sus datos. */ table.datos th.num, table.datos td.num { text-align: right; } table.datos th.num { width: auto; } /* UN IMPORTE NO SE PARTE. «0,97 €» salía con el euro descolgado en la línea de abajo, y una columna de dinero con el símbolo bailando se lee fatal. */ table.datos td.num { white-space: nowrap; } /* Un formulario dentro del panel respira: etiqueta encima del campo y los controles separados. Iban todos pegados en una línea. */ .form-linea { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; } .form-linea label { display: flex; flex-direction: column; gap: .3rem; font-size: .9rem; color: var(--tinta-2); } .form-linea select, .form-linea input { padding: .5rem .6rem; border: 1px solid var(--linea); border-radius: var(--r-s); font: inherit; } .nota { font-size: .85rem; color: var(--tinta-3); margin: .9rem 0 0; } .riesgos { list-style: none; padding: 0; margin: 0; display: grid; gap: .7rem; } .riesgo { border-left: 3px solid var(--tinta-3); padding-left: .9rem; } .riesgo.critico { border-color: var(--grave); } .riesgo.alto { border-color: var(--alta); } .riesgo p { margin: .2rem 0 0; color: var(--tinta-2); font-size: .89rem; } /* El mismo relleno que `.panel`, y antes eran 1.4rem contra los 1.5 de la escala: 45 px de ancho de relleno frente a 48. Tres píxeles no se ven de uno en uno, pero sí se ven cuando una caja va debajo de la otra y el texto no arranca en la misma vertical. El relleno de una caja sale de la escala, como todo lo demás. */ .cta { border: 1px solid var(--laton); border-radius: var(--r); padding: var(--e3); background: var(--superficie); } /* ── pulso del sistema ────────────────────────────────────── */ .pulso-estado { display: flex; align-items: center; gap: .9rem; margin: 0 0 2rem; padding: 1rem 1.2rem; border-radius: var(--r-l); border: 1px solid var(--linea); background: var(--superficie); box-shadow: var(--sombra); } .pulso-estado strong { display: block; font-size: 1rem; } .pulso-estado span { font-size: .86rem; color: var(--tinta-3); } .latido { flex: 0 0 auto; width: .7rem; height: .7rem; border-radius: 50%; background: var(--verde); position: relative; } /* El latido se mueve porque el sistema se mueve. Con movimiento reducido se queda quieto, que es lo que pide quien lo desactiva. */ .latido::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid var(--verde); animation: latir 2.4s ease-out infinite; } @keyframes latir { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(1.5); opacity: 0; } } .pulso-estado.retrasado .latido, .pulso-estado.retrasado .latido::after { background: var(--alta); border-color: var(--alta); } .pulso-estado.parado .latido, .pulso-estado.parado .latido::after { background: var(--grave); border-color: var(--grave); } .pulso-estado.parado .latido::after { animation: none; } /* ── veredicto ────────────────────────────────────────────── */ /* Dos lecturas opuestas del mismo expediente, cada una con su destinatario. No se promedian: lo que es buena compra suele ser mala noticia. */ .veredictos { display: grid; gap: 1rem; margin: 0 0 1.4rem; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); } .veredictos > * { min-width: 0; } .vd { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r-l); padding: 1.3rem; box-shadow: var(--sombra); } .vd-cab { display: flex; align-items: flex-start; gap: .9rem; margin-bottom: .8rem; } .vd-nota { flex: 0 0 auto; width: 3.4rem; height: 3.4rem; border-radius: 50%; display: grid; place-items: center; font-weight: 750; font-size: 1.15rem; font-variant-numeric: tabular-nums; border: 2px solid; } .vd-nota.bien { color: var(--verde); border-color: var(--verde); background: var(--verde-suave); } .vd-nota.medio { color: var(--alta); border-color: var(--alta); background: color-mix(in srgb, var(--alta) 10%, transparent); } .vd-nota.mal { color: var(--grave); border-color: var(--grave); background: color-mix(in srgb, var(--grave) 10%, transparent); } .vd-quien { font-size: .7rem; text-transform: uppercase; letter-spacing: .11em; color: var(--tinta-3); font-weight: 700; margin: 0 0 .15rem; } .vd-etiqueta { font-size: 1.05rem; font-weight: 700; letter-spacing: -.015em; margin: 0 0 .2rem; } .vd-resumen { font-size: .88rem; color: var(--tinta-2); margin: 0; line-height: 1.45; } .vd-factores { list-style: none; padding: 0; margin: .9rem 0 0; display: grid; gap: .55rem; } .vd-factores li { display: grid; grid-template-columns: auto 1fr; gap: .55rem; font-size: .85rem; line-height: 1.4; padding-top: .55rem; border-top: 1px solid var(--linea); } .vd-factores li:first-child { border-top: 0; padding-top: 0; } .vd-signo { font-weight: 750; font-variant-numeric: tabular-nums; font-size: .78rem; padding: .05rem .4rem; border-radius: var(--r-s); height: fit-content; } .vd-signo.mas { color: var(--verde); background: var(--verde-suave); } .vd-signo.menos { color: var(--grave); background: color-mix(in srgb, var(--grave) 9%, transparent); } .vd-signo.falta { color: var(--tinta-3); background: var(--hueco); } .vd-factores strong { display: block; font-weight: 650; } .vd-factores span { color: var(--tinta-2); } .vd-pie { margin: .9rem 0 0; padding-top: .7rem; border-top: 1px solid var(--linea); font-size: .76rem; color: var(--tinta-3); line-height: 1.45; } /* ── gráficos ─────────────────────────────────────────────── */ .grafico { width: 100%; height: auto; display: block; overflow: visible; } .grafico text { font-family: var(--texto); } .g-titulo { font-size: 12px; font-weight: 700; fill: var(--tinta); } .g-et { font-size: 10px; fill: var(--tinta-2); } .g-tenue { fill: var(--tinta-3); } .g-fuerte { font-weight: 700; fill: var(--tinta); } .g-centro { text-anchor: middle; } .g-derecha { text-anchor: end; } .g-fondo { fill: var(--hueco); } .g-rango { fill: color-mix(in srgb, var(--verde) 22%, transparent); } .g-medio { fill: color-mix(in srgb, var(--verde) 42%, transparent); } .g-marca { fill: var(--verde); } .g-salida { stroke: var(--tinta-3); stroke-width: 1.4; stroke-dasharray: 3 3; } .g-eje { stroke: var(--linea-fuerte); stroke-width: 1; } .g-punto { fill: var(--tinta-3); opacity: .5; } .g-propio { fill: var(--verde); stroke: var(--superficie); stroke-width: 2.4; } .g-mediana { stroke: var(--tinta); stroke-width: 1.4; stroke-dasharray: 4 3; } .g-deuda { fill: var(--grave); } .g-resto { fill: var(--verde); } .g-area { fill: color-mix(in srgb, var(--verde) 14%, transparent); } .g-linea { fill: none; stroke: var(--verde); stroke-width: 2; stroke-linejoin: round; } .g-marca-punto { fill: var(--verde); stroke: var(--superficie); stroke-width: 2; } .g-barra-alta { fill: var(--verde); } .g-barra-baja { fill: var(--tinta-3); opacity: .55; } .g-barra-propia { fill: var(--verde); } .g-referencia { stroke: var(--tinta); stroke-width: 1; stroke-dasharray: 3 3; opacity: .5; } .g-tick { stroke: var(--linea-fuerte); stroke-width: 1; } .g-rejilla { stroke: var(--linea); stroke-width: 1; } /* LOS PUNTOS DE LA LÍNEA DE VIDA DE UNA SOCIEDAD. El color lo decide el peso del acto en el catálogo, el mismo número que ordena las cartas: no es una escala inventada para el gráfico. Se usan las variables de siempre —grave, alta, ok— para que un concurso se vea del mismo color aquí que en la etiqueta de la lista. */ /* ── LA FICHA DE SOCIEDAD, ESCRITA COMO PÁGINA DE VENTA ───────────────── Lo que se busca en los dos primeros segundos: de quién es la página, qué le pasa y cómo de serio es. Por eso el titular va DEBAJO del nombre y con color: es la única línea que alguien lee entera si tiene prisa. */ .soc-hero { margin: var(--e3) 0 var(--e2); } .soc-sello { font-family: var(--dato); font-size: .8rem; color: var(--tinta-3); letter-spacing: .02em; margin: 0 0 .3rem; } .soc-sello code { font-size: .8rem; } .soc-hero h1 { margin: 0 0 .6rem; } .soc-etqs { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0 0 .7rem; } .soc-titular { font-size: 1.15rem; font-weight: 700; margin: 0; } .soc-titular.grave { color: var(--grave); } .soc-titular.alta { color: var(--alta); } .soc-titular.baja { color: var(--tinta-2); } /* Cada acto con su etiqueta de color en el encabezado: se recorre con la vista sin leer los párrafos, que es como se lee una página larga. */ .soc-acto + .soc-acto { margin-top: var(--e2); padding-top: var(--e2); border-top: 1px solid var(--linea); } .soc-acto h3 { margin: 0 0 .4rem; } .soc-acto p { margin: 0; } /* Las objeciones, que es lo que frena una llamada. Van al lado del botón. */ .soc-obj { list-style: none; padding: 0; margin: var(--e2) 0 0; } .soc-obj li { position: relative; padding-left: 1.4rem; margin-bottom: .45rem; font-size: .92rem; color: var(--tinta-2); } .soc-obj li::before { content: '✓'; position: absolute; left: 0; top: 0; color: var(--ok); font-weight: 700; } /* HASTA DÓNDE LLEGA LA RESPONSABILIDAD. Es la cifra que duele de esta página —no hay euros que enseñar, el BORME no publica deudas— y por eso va con el tamaño que tendría un importe. */ .soc-alcance { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .7rem; margin: var(--e2) 0; padding: .8rem 1rem; background: color-mix(in srgb, var(--grave) 7%, transparent); border-left: 4px solid var(--grave); border-radius: var(--r-s); } .soc-alcance span { font-size: .82rem; color: var(--tinta-3); text-transform: uppercase; letter-spacing: .04em; } .soc-alcance strong { font-size: 1.3rem; line-height: 1.2; color: var(--grave); } /* «Y SI NO HACE NADA». Va pegado a la llamada y es lo último que se lee antes del teléfono, así que no puede ser el panel más flojo de la página —que es como salía siendo blanco entre dos con borde—. Mismo recurso que el alcance: filo a la izquierda en el color de lo grave, sin llegar a caja roja. El contenido ya pesa; el estilo solo tiene que dejar de restarle. */ .soc-inaccion { border-left: 4px solid var(--grave); background: color-mix(in srgb, var(--grave) 4%, var(--superficie)); /* Los mismos 3 px que descuenta `.panel.destacado` doce líneas más arriba, y por el mismo motivo: el borde grueso empuja el texto hacia dentro y este panel va pegado a otros normales, así que la vertical se rompía. Si se cambia el `padding` de `.panel` (hoy 1.3rem), hay que cambiarlo aquí. */ padding-left: calc(1.3rem - 3px); } .soc-inaccion h2 { color: var(--grave); } /* Y sin hueco por debajo: entre el coste de no hacer nada y el botón de llamar no debe caber aire, porque ese aire es donde se abandona la página. */ .soc-inaccion + .cta { margin-top: var(--e2); } /* EL RELOJ. Solo sale donde el plazo se puede calcular de una fecha que tenemos; un plazo inventado sería peor que ninguno. */ .soc-reloj { margin: var(--e2) 0; padding: .7rem 1rem; border-radius: var(--r-s); border: 1px solid var(--linea); background: var(--fondo-2); } .soc-reloj strong { display: block; font-size: 1.05rem; } .soc-reloj span { display: block; font-size: .88rem; color: var(--tinta-3); margin-top: .2rem; } .soc-reloj.urgente { border-color: var(--grave); } .soc-reloj.urgente strong { color: var(--grave); } .soc-reloj.corre strong { color: var(--alta); } .soc-reloj.pasado strong { color: var(--tinta-2); } /* EL GRÁFICO ERA ILEGIBLE EN EL MÓVIL. El SVG se escala de 660 px a unos 450 y el texto de 12 px se quedaba en ocho: no se leía ni el título. Se agranda por debajo de 640, que es donde empieza a apretar. */ @media (max-width: 640px) { /* El SVG se escala a ~0,68 del lienzo en un móvil de 500 px, así que un tamaño de 12 se ve como 8. Estos números están puestos PARA DESPUÉS de esa reducción: 19 se ven como 13, que ya se lee. Se comprobó fotografiando a 500 px, que es el mínimo que Chrome renderiza de verdad en Windows. */ .grafico .g-titulo { font-size: 19px; } .grafico .g-et { font-size: 16px; } } /* Un botón que hay que ver desde el otro lado de la habitación. */ .boton.grande { padding: .85rem 1.4rem; font-size: 1.02rem; } .v-hito { stroke: var(--fondo); stroke-width: 1.5; } .v-grave { fill: var(--grave); } .v-medio { fill: var(--alta); } .v-leve { fill: var(--tinta-3); } .v-neutro { fill: var(--linea-fuerte); } .g-cubo { fill: var(--tinta-3); opacity: .45; } .g-cubo:hover { opacity: .7; } .g-cubo-propio { fill: var(--verde); } .g-cien { stroke: var(--grave); stroke-width: 1.4; stroke-dasharray: 4 3; opacity: .8; } .g-sobre { fill: #fff; font-weight: 700; } .g-mas { fill: var(--verde); font-weight: 700; } .g-menos { fill: var(--tinta-3); font-weight: 700; } /* Los gráficos nunca cambian de tamaño solos: `overflow: visible` dejaba que una etiqueta larga se saliera de la caja y pisara el texto de al lado. */ .grafico { overflow: hidden; } .panel-grafico { padding: 1.2rem 1.3rem; } .panel-grafico + .panel-grafico { margin-top: -.4rem; } /* Aviso de lealtad: va destacado porque es una promesa, no letra pequeña. */ .lealtad { border: 1px solid var(--linea-fuerte); border-left: 4px solid var(--tinta); border-radius: var(--r); padding: 1rem 1.2rem; margin: 1.2rem 0 0; background: var(--velo); font-size: .87rem; color: var(--tinta-2); line-height: 1.5; } .lealtad strong { color: var(--tinta); } /* ── portal de acceso ─────────────────────────────────────── */ /* Primera pantalla del sitio. Sobria: no adelanta lo que hay detrás, pero tiene que parecer un producto, no un candado. */ .portal { background: var(--papel); } .portal-caja { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 2rem 1.2rem; } .portal-panel { width: 100%; max-width: 25rem; } .portal-marca { display: flex; align-items: center; gap: .55rem; margin: 0 0 .9rem; font-size: 1.5rem; font-weight: 750; letter-spacing: -.03em; color: var(--tinta); } .portal-marca .plomo { border-left-width: .45rem; border-right-width: .45rem; border-top-width: .85rem; } .portal-lema { margin: 0 0 .5rem; font-size: 1.02rem; font-weight: 600; color: var(--tinta); } .portal-nota { margin: 0 0 1.6rem; font-size: .9rem; color: var(--tinta-2); line-height: 1.5; } .portal-forma { max-width: none; box-shadow: var(--sombra); border-radius: var(--r-l); } .portal-forma button { width: 100%; } .portal-pie { margin: 1.2rem 0 0; font-size: .8rem; color: var(--tinta-3); line-height: 1.5; } /* ── mapa coroplético ─────────────────────────────────────── */ /* Escala divergente de cinco pasos en torno a la mediana nacional: el color no dice «mucho o poco», dice «por encima o por debajo de lo normal en España», que es la única lectura que le sirve a quien mira un mapa de remates. */ :root { --m-2: #1f6f8f; /* muy por debajo */ --m-1: #7fb2c4; --m0: #c8d2d7; /* en la media */ --m1: #58b592; --m2: #0a6b4c; /* muy por encima */ --m-x: #f2f4f5; /* sin muestra: fondo del rayado */ --m-raya: #c2cbd1; } @media (prefers-color-scheme: dark) { :root { --m-2: #2b7f9f; --m-1: #46707f; --m0: #4a565e; --m1: #2e8f6c; --m2: #3dbb8e; --m-x: #171d21; --m-raya: #333d44; } } .mapa { width: 100%; max-width: 100%; height: auto; display: block; } .mapa .pr { stroke: var(--superficie); stroke-width: 1.1; stroke-linejoin: round; fill: var(--m-x); transition: fill .12s; } .mapa .pr.n-2 { fill: var(--m-2); } .mapa .pr.n-1 { fill: var(--m-1); } .mapa .pr.n0 { fill: var(--m0); } .mapa .pr.n1 { fill: var(--m1); } .mapa .pr.n2 { fill: var(--m2); } .mapa .pr.nx { fill: var(--m-x); } .mapa .pr:hover { stroke: var(--tinta); stroke-width: 1.6; } /* El mapa es navegable: cada provincia lleva a sus expedientes. */ .mapa a { cursor: pointer; outline: none; } .mapa a:focus-visible .pr { stroke: var(--tinta); stroke-width: 2.4; } .mapa a:hover .pr { stroke: var(--tinta); stroke-width: 1.8; } /* Mapa de inmuebles: la silueta calla para que hablen los puntos. */ .mapa-inmuebles-caja { margin: 0 0 2rem; } .cab-mapa { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .7rem; margin: 0 0 .6rem; padding: 0; border: 0; } .cab-mapa strong { font-size: 1.05rem; color: var(--tinta); } .cab-mapa span { font-size: .85rem; color: var(--tinta-3); } .mapa-pines .fondo { fill: var(--hueco); stroke: var(--superficie); stroke-width: 1.1; } /* Al acercarse a una provincia, la de destino se destaca y las vecinas quedan de contexto: sin ellas el mapa flota y no se sabe dónde está. */ .mapa-pines.acercado .fondo { fill: var(--velo); stroke: var(--linea); } .mapa-pines.acercado .fondo.foco { fill: var(--hueco); stroke: var(--tinta-3); stroke-width: 1.4; } /* El trazo y el radio se dividen por el acercamiento: sin esto, en una provincia pequeña un pin saldría del tamaño de la propia provincia. */ .mapa-pines.acercado .fondo { stroke-width: calc(1.1 / var(--zoom, 1)); } .mapa-pines.acercado .fondo.foco { stroke-width: calc(1.6 / var(--zoom, 1)); } .mapa-pines.acercado .pin { r: calc(6 / var(--zoom, 1)); stroke-width: calc(1.6 / var(--zoom, 1)); } .mapa-pines.acercado a:hover .pin, .mapa-pines.acercado a:focus-visible .pin { r: calc(10 / var(--zoom, 1)); } .mapa-pines .pin { stroke: var(--superficie); stroke-width: 1.6; opacity: .92; transition: r .1s; } .mapa-pines .pin.grave { fill: var(--grave); } .mapa-pines .pin.baja { fill: var(--verde); } .mapa-pines .pin.normal { fill: var(--tinta-3); } .mapa-pines a:hover .pin, .mapa-pines a:focus-visible .pin { r: 10; stroke: var(--tinta); stroke-width: 2; } .pinm { width: .7rem; height: .7rem; border-radius: 50%; display: inline-block; margin-left: .5rem; } .pinm.grave { background: var(--grave); } .pinm.baja { background: var(--verde); } .pinm.normal { background: var(--tinta-3); } .filtro { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: .9rem; color: var(--tinta-2); margin: 0 0 1.6rem; } .filtro .etq { font-size: .8rem; } /* Dónde está el inmueble */ .ubicacion .donde-dir { font-size: 1rem; color: var(--tinta-2); margin: 0 0 1rem; } .ubicacion .acciones { margin-bottom: .9rem; } .sub-titulo { font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; color: var(--tinta-3); font-weight: 700; margin: 1.4rem 0 .4rem; } table.datos.desglose th { font-weight: 500; color: var(--tinta-2); } /* ── cabecera de la ficha ─────────────────────────────────── */ /* Abre por lo que se ve y lo que se decide. La tabla del expediente viene después: es consulta, no decisión. */ .ficha-cab { display: grid; gap: 1.4rem; align-items: start; margin-bottom: 1.4rem; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } .ficha-cab > * { min-width: 0; } .ficha-titulo h1 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); margin-bottom: .5rem; } .ficha-donde { color: var(--tinta-2); font-size: 1rem; margin: 0 0 .9rem; } .ficha-titulo .etiquetas { margin-top: .2rem; } /* Etiquetas sobre la foto: lo que un profesional busca de un vistazo. */ .sobre-foto { position: absolute; left: .7rem; top: .7rem; right: .7rem; display: flex; flex-wrap: wrap; gap: .35rem; } .sobre-foto .etq { background: color-mix(in srgb, var(--superficie) 92%, transparent); backdrop-filter: blur(6px); border-width: 1px; font-weight: 600; box-shadow: 0 1px 3px rgba(0, 0, 0, .18); } /* Las cuatro cifras que mueven una puja o una oposición. */ .cifras-ficha { display: grid; gap: .8rem; margin: 0 0 1.6rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); } .cifras-ficha > * { min-width: 0; } .cf { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r-l); padding: 1rem 1.1rem; box-shadow: var(--sombra); } .cf .et { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--tinta-3); font-weight: 700; margin-bottom: .3rem; } .cf b { display: block; font-size: 1.5rem; font-weight: 750; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1.15; color: var(--tinta); } .cf .cf-nota { display: block; font-size: .78rem; color: var(--tinta-3); margin-top: .3rem; line-height: 1.35; } .cf.destacada { border-color: var(--verde); border-width: 2px; background: var(--verde-suave); } .cf.destacada b { color: var(--verde); } .cf.destacada .et, .cf.destacada .cf-nota { color: var(--verde); opacity: .85; } @media (max-width: 46rem) { .ficha-cab { grid-template-columns: 1fr; } } /* La vista aérea: lo primero tangible de la ficha. */ .vista-aerea { position: relative; margin: 0; border-radius: var(--r-l); overflow: hidden; background: var(--hueco); box-shadow: var(--sombra); } .vista-aerea img { display: block; width: 100%; height: auto; } /* Diana en el centro: sin ella no se sabe cuál de los tejados es. */ .vista-aerea .diana { position: absolute; left: 50%; top: 50%; width: 3.2rem; height: 3.2rem; transform: translate(-50%, -50%); border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 2px rgba(0, 0, 0, .35), inset 0 0 0 2px rgba(0, 0, 0, .35); pointer-events: none; } .vista-aerea .diana::after { content: ""; position: absolute; left: 50%; top: 50%; width: .4rem; height: .4rem; transform: translate(-50%, -50%); background: #fff; border-radius: 50%; box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .5); } /* La atribución va sobre la propia imagen: fuera empujaba la columna y descuadraba la fila con el titular. */ /* La atribución del vuelo del IGN, sobre la foto. Ocupa dos líneas y antes iba pegada al borde inferior: fotografiada a 1400 px se veía apretada contra el canto. Se le da aire abajo y un poco más de interlínea; el degradado se alarga para que las dos líneas se lean igual. */ .vista-aerea figcaption { position: absolute; left: 0; right: 0; bottom: 0; font-size: .68rem; color: #fff; padding: 2rem .9rem .75rem; background: linear-gradient(transparent, rgba(0, 0, 0, .68)); line-height: 1.45; } /* Miniatura en la tarjeta: un listado con foto se recorre; uno sin ella se lee con esfuerzo. */ .tarjeta.con-vista { padding: 0; overflow: hidden; } .tarjeta.con-vista > *:not(.miniatura) { padding-left: 1.1rem; padding-right: 1.1rem; } .tarjeta.con-vista .tarjeta-cab { padding-top: 1rem; } .tarjeta.con-vista .etiquetas { padding-bottom: 1.1rem; } .miniatura { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--hueco); } .miniatura img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Las que no tienen ortofoto: banda breve que DICE algo, no un hueco. * * Antes ocupaban el mismo alto que una foto, con un rayado diagonal y la * leyenda «sin imagen aérea». El razonamiento era que desigual se lee peor que * uniforme, y con pocas habría valido; pero solo 191 de 720 expedientes tienen * ortofoto, o sea que el 73 % de las tarjetas era un hueco del tamaño de una * foto. Fotografiado a 560 px: lo primero que se ve tras los filtros son dos * cajas grises enormes, y la página parece no haber cargado. * * Ahora es una banda de un tercio del alto que aprovecha el sitio para adelantar * el tipo de bien y la provincia. Se conserva el ritmo vertical, se gana * densidad y las que sí tienen foto destacan por tenerla. */ .miniatura.vacia { aspect-ratio: auto; min-height: 5rem; display: flex; flex-direction: column; justify-content: center; gap: .1rem; padding: .9rem 1.1rem; background: linear-gradient(160deg, var(--hueco), var(--velo)); border-bottom: 1px solid var(--linea); } .miniatura.vacia b { font-size: .98rem; font-weight: 650; letter-spacing: -.012em; color: var(--tinta-2); } .miniatura.vacia span { font-size: .78rem; color: var(--tinta-3); } .mapa .nd-fondo { fill: var(--m-x); } .mapa .nd-raya { stroke: var(--m-raya); stroke-width: 3; } .mapa .inserto { fill: none; stroke: var(--linea-fuerte); stroke-width: 1.2; stroke-dasharray: 5 4; } .mapa .rotulo-inserto { font-size: 13px; font-weight: 700; letter-spacing: .14em; fill: var(--tinta-3); } .ranking h3.tras { margin-top: 1.4rem; } .mapa-caja { margin: 0; padding: 1rem 1.1rem 1.1rem; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r-l); box-shadow: var(--sombra); } .mapa-caja figcaption { display: flex; flex-wrap: wrap; gap: .7rem 1.6rem; justify-content: space-between; align-items: center; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--linea); font-size: .8rem; color: var(--tinta-3); } /* Leyenda como escala continua, no como cuatro cuadraditos sueltos. */ /* La leyenda envuelve. Sus cinco tiras de color miden 8,5rem fijos y con las etiquetas no caben en un móvil: sin `wrap` sobresalía seis píxeles de su caja, y esos seis píxeles empujaban la página entera. */ .escala { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .55rem; font-size: .78rem; } .escala .tiras { display: flex; border-radius: 3px; overflow: hidden; } .escala .tiras i { width: 1.7rem; height: .55rem; display: block; } .escala .t-2 { background: var(--m-2); } .escala .t-1 { background: var(--m-1); } .escala .t0 { background: var(--m0); } .escala .t1 { background: var(--m1); } .escala .t2 { background: var(--m2); } /* La muestra de «sin dato» lleva el mismo rayado que el mapa: si la leyenda enseña un cuadrado liso, no explica lo que se ve. */ .escala .nula { width: .85rem; height: .85rem; border-radius: 2px; display: inline-block; border: 1px solid var(--linea-fuerte); margin-left: .5rem; background-color: var(--m-x); background-image: repeating-linear-gradient( 45deg, transparent 0 2px, var(--m-raya) 2px 4px); } .cobertura-mapa { max-width: 20rem; } /* Ranking al lado del mapa: el mapa da la forma, la lista da el orden. */ /* El mapa manda: es la pieza que justifica la página. La lista va a su lado, estrecha, porque solo pone orden a lo que el mapa ya enseña. */ .mapa-fila { display: grid; gap: 1.2rem; align-items: start; grid-template-columns: minmax(20rem, 2.1fr) minmax(12.5rem, .9fr); } .ranking { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r-l); padding: 1.2rem 1.3rem; box-shadow: var(--sombra); } .ranking h3 { font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; color: var(--tinta-3); font-weight: 700; } .ranking ol { list-style: none; padding: 0; margin: .8rem 0 0; display: grid; gap: .1rem; } .ranking li { display: grid; grid-template-columns: 1fr auto auto; gap: .7rem; align-items: center; padding: .38rem 0; font-size: .88rem; border-bottom: 1px solid var(--linea); } .ranking li:last-child { border-bottom: 0; } .ranking .prov { font-weight: 550; } .ranking .val { font-variant-numeric: tabular-nums; font-weight: 700; letter-spacing: -.01em; } .ranking .cas { font-size: .75rem; color: var(--tinta-3); font-variant-numeric: tabular-nums; } .ranking .val.arriba { color: var(--m2); } .ranking .val.abajo { color: var(--m-2); } .ranking .pie-lista { margin: .9rem 0 0; font-size: .78rem; color: var(--tinta-3); } @media (max-width: 52rem) { .mapa-fila { grid-template-columns: 1fr; } } /* ── índice de remates ────────────────────────────────────── */ /* Es una tabla que se lee de un vistazo, no un documento: la barra existe para que se vea qué provincias se apartan de la mediana sin leer cifras. */ /* La tabla del índice no cabe en un móvil y no debe caber: tiene seis columnas de datos que no se pueden apilar sin perder la comparación. Se desplaza dentro de su caja, y para eso la caja necesita `max-width` explícito: sin él crecía con la tabla y sacaba la página entera fuera a 360 px. */ .tabla-ancha { overflow-x: auto; margin-bottom: 2rem; max-width: 100%; min-width: 0; -webkit-overflow-scrolling: touch; } table.indice { width: 100%; min-width: 34rem; border-collapse: collapse; font-size: .9rem; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r); } table.indice thead th { text-align: left; font-weight: 400; font-family: var(--dato); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-3); padding: .7rem .8rem; border-bottom: 2px solid var(--tinta); white-space: nowrap; } table.indice tbody th { text-align: left; font-weight: 600; padding: .55rem .8rem; border-bottom: 1px solid var(--linea); white-space: nowrap; } table.indice td { padding: .55rem .8rem; border-bottom: 1px solid var(--linea); font-family: var(--dato); font-variant-numeric: tabular-nums; white-space: nowrap; } table.indice tbody tr:last-child th, table.indice tbody tr:last-child td { border-bottom: 0; } table.indice tbody tr:hover { background: var(--hueco); } table.indice .n { text-align: right; } table.indice .horquilla, table.indice .muestra { color: var(--tinta-3); } /* Las filas poco fiables se atenúan: siguen ahí, pero no compiten visualmente con las que sí sostienen una decisión. */ table.indice tr.disperso th, table.indice tr.disperso td { color: var(--tinta-3); } table.indice tr.disperso .etq { margin-left: .4rem; vertical-align: middle; } table.indice tr.disperso .barra i { opacity: .4; } .barra-celda { width: 8rem; min-width: 6rem; } .barra { display: block; height: .5rem; background: var(--hueco); border-radius: 2px; overflow: hidden; } .barra i { display: block; height: 100%; background: var(--tinta-3); } .barra i.sube { background: var(--laton); } .barra i.baja { background: var(--tinta-3); } .oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } ul.metodo { padding-left: 1.1rem; font-size: .92rem; color: var(--tinta-2); } ul.metodo li { margin-bottom: .55rem; } ul.metodo strong { color: var(--tinta); } /* ── precios ──────────────────────────────────────────────── */ /* Cuatro planes. Con 15rem de mínimo solo entraban tres por fila y el cuarto caía solo, con medio ancho de página en blanco al lado: parecía un error de maquetación, no una oferta. */ .planes { display: grid; gap: 1.1rem; margin-bottom: 2.5rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); } .plan { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r); padding: 1.4rem; position: relative; display: flex; flex-direction: column; } .plan.destacado { border-color: var(--laton); border-width: 2px; } .cinta { position: absolute; top: -.7rem; left: 1.2rem; background: var(--laton); color: #fff; font-size: .7rem; padding: .18rem .6rem; border-radius: 2px; letter-spacing: .04em; } .plan .precio { font-size: 1.65rem; font-weight: 750; letter-spacing: -.03em; font-variant-numeric: tabular-nums; margin: .3rem 0 .2rem; color: var(--tinta); line-height: 1.15; text-wrap: nowrap; } .plan .precio span { /* ── EL AÑADIDO DEL PRECIO NO BAJA DE 12,8 px ───────────────────────── Era `.5em` a secas, o sea la mitad de su precio. En el plan gratuito eso deja «siempre» en 13,2 px y se lee. En el de pago, `.largo` encoge el precio para que quepa «Coste mínimo» y **arrastraba el `+ resultado` hasta 10 px**: medido a 395 px el 09/08/2026, era el texto más pequeño de toda la página. Y no es un adorno: «+ resultado» es la única condición económica variable del sitio —lo que se cobra además del mínimo si se decide actuar—. Que la parte onerosa del precio acabara a la mitad de cuerpo que el «siempre» del plan gratis no fue intención de nadie, sino el efecto de una unidad relativa; pero lo que se ve es letra pequeña en el precio, y este producto se vende por decir las cosas claras. `max()` conserva el tamaño donde ya se leía y solo pone suelo donde no. */ font-size: max(.8rem, .5em); font-weight: 500; /* Y el tono sube de `--tinta-3` a `--tinta-2`. Medido sobre el fondo real: 3,91 : 1 pasa a 7,81 : 1, y las pautas piden 4,5 : 1 para este cuerpo. No es un color nuevo, es el siguiente del sistema. Un precio en gris claro y a cuerpo pequeño se lee como lo que no es. */ color: var(--tinta-2); letter-spacing: 0; white-space: nowrap; } /* Un precio con palabras —«Coste mínimo»— no cabe al mismo cuerpo que una cifra corta. Encoge el precio, pero ya no su añadido: ver arriba. */ .plan .precio.largo { font-size: 1.25rem; } .plan .para { font-size: .85rem; color: var(--tinta-3); margin: 0 0 .9rem; } .plan ul { padding-left: 1.1rem; margin: 0 0 1.2rem; font-size: .88rem; color: var(--tinta-2); flex: 1; } .plan li { margin-bottom: .3rem; } .plan .boton { text-align: center; } .faq details { border-bottom: 1px solid var(--linea); padding: .8rem 0; } .faq summary { cursor: pointer; font-weight: 600; font-size: .95rem; } .faq p { color: var(--tinta-2); font-size: .92rem; margin: .6rem 0 0; } /* ── formularios ──────────────────────────────────────────── */ .formulario { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r); padding: 1.4rem; display: grid; gap: 1rem; max-width: 34rem; } .formulario label { display: grid; gap: .35rem; font-size: .9rem; color: var(--tinta-2); } .formulario input, .formulario select, .formulario textarea { padding: .6rem .8rem; border: 1px solid var(--linea); border-radius: var(--r); background: var(--papel); color: var(--tinta); font-family: inherit; font-size: .95rem; } .formulario input:focus, .formulario select:focus, .formulario textarea:focus { outline: 2px solid var(--laton); outline-offset: 1px; } /* El texto del consentimiento va dentro de un . * * En un contenedor flex, cada nodo de texto suelto se convierte en un elemento * propio: «He leído el», el enlace y «y acepto…» quedaban en tres columnas, con * el enlace partido en dos líneas en una columna estrechísima. Con el texto * envuelto son dos elementos —casilla y párrafo— y fluye como una frase. */ .formulario .check { display: flex; align-items: flex-start; gap: .6rem; font-size: .85rem; } .formulario .check input { flex: 0 0 auto; margin-top: .25rem; } .formulario .check span { flex: 1 1 auto; line-height: 1.45; } .texto p, .texto li { color: var(--tinta-2); } .texto h2 { margin-top: 1.8rem; } /* ── pie ──────────────────────────────────────────────────── */ .pie { border-top: 2px solid var(--tinta); margin-top: 3.5rem; padding: 2.2rem clamp(1rem, 4vw, 3rem) 1.6rem; font-size: .85rem; color: var(--tinta-3); background: var(--superficie); display: grid; gap: 1.6rem; } /* El bloque de marca ocupa toda la fila hasta que hay sitio de sobra. Con `repeat(auto-fit, …)` junto a una primera columna de 14rem, a 768 px la suma de mínimos daba 773 px y el pie sacaba la página cinco píxeles fuera: el único ancho en el que el sitio se descuadraba. */ /* Columnas contadas a mano por tramo, no `auto-fit`. Con `auto-fit` y mínimos de 9rem el navegador seguía reservando más ancho del que había y el pie sacaba la página 270 px fuera entre 768 y 900. Contar las columnas quita la ambigüedad. */ .pie-mapa { display: grid; gap: 1.6rem 1.8rem; max-width: var(--col-ancha); grid-template-columns: 1fr; } .pie-mapa > * { min-width: 0; } @media (min-width: 34rem) { .pie-mapa { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pie-marca { grid-column: 1 / -1; } } @media (min-width: 62rem) { .pie-mapa { grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); } .pie-marca { grid-column: auto; } } .pie-marca p { margin: 0 0 .5rem; max-width: 26rem; } .marca-pie { font-family: var(--titulo); font-size: 1.05rem; color: var(--tinta); display: flex; align-items: center; gap: .5rem; } .pie-col { display: grid; gap: .45rem; align-content: start; } .pie-col h2 { font-family: var(--dato); font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-3); font-weight: 400; margin: 0 0 .25rem; } .pie-col a { color: var(--tinta-2); text-decoration: none; font-size: .88rem; } .pie-col a:hover { color: var(--laton); text-decoration: underline; } .pie .legal { font-size: .8rem; border-top: 1px solid var(--linea); padding-top: 1.1rem; max-width: var(--col-ancha); } @media (max-width: 40rem) { table.datos th { width: 50%; } .pie-mapa { grid-template-columns: 1fr 1fr; } } /* ── Cartera: filtros y paginación ──────────────────────────────────────── El formulario es un GET y la paginación son enlaces: la página entera funciona sin JavaScript, igual que el resto del sitio. */ .filtros { display: flex; flex-wrap: wrap; gap: .7rem 1rem; align-items: flex-end; background: var(--velo); border: 1px solid var(--linea); border-radius: var(--r); padding: 1rem 1.1rem; margin: 1.4rem 0 1rem; } .filtros label { display: flex; flex-direction: column; gap: .3rem; font-size: .78rem; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--tinta-3); } .filtros select { font: inherit; font-size: .92rem; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--tinta); background: var(--superficie); border: 1px solid var(--linea-fuerte); border-radius: var(--r-s); padding: .45rem .6rem; min-width: 10rem; } .filtros select:focus-visible { outline: 2px solid var(--verde); outline-offset: 1px; } .filtros button { font: inherit; font-size: .92rem; font-weight: 600; cursor: pointer; color: #fff; background: var(--verde); border: 1px solid var(--verde); border-radius: var(--r-s); padding: .5rem 1.1rem; } .filtros button:hover { background: var(--verde-vivo); border-color: var(--verde-vivo); } /* El botón y el enlace de quitar van juntos: suelto, el enlace se descolgaba a su propia línea en cuanto los cuatro desplegables llenaban el ancho, y quedaba como un enlace huérfano dentro de la caja. */ .filtros .acciones { display: flex; gap: .9rem; align-items: center; } .quitar-filtro { font-size: .88rem; color: var(--tinta-2); white-space: nowrap; } .recuento { font-size: .9rem; color: var(--tinta-2); margin: 0 0 1rem; font-variant-numeric: tabular-nums; } .paginas { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; justify-content: center; margin: 1.8rem 0 .5rem; font-variant-numeric: tabular-nums; } .paginas a, .paginas .actual, .paginas .hueco { min-width: 2.2rem; text-align: center; padding: .4rem .6rem; border-radius: var(--r-s); font-size: .9rem; font-weight: 500; } .paginas a { color: var(--tinta-2); text-decoration: none; border: 1px solid var(--linea); } .paginas a:hover { color: var(--tinta); border-color: var(--linea-fuerte); background: var(--hueco); } .paginas .actual { color: #fff; background: var(--verde); border: 1px solid var(--verde); font-weight: 600; } .paginas .hueco { color: var(--tinta-3); border: 1px solid transparent; } @media (max-width: 40rem) { .filtros { flex-direction: column; align-items: stretch; } .filtros select, .filtros button { width: 100%; min-width: 0; } .filtros .acciones { flex-direction: column; align-items: stretch; gap: .6rem; } .quitar-filtro { text-align: center; } } /* ── Buscador de inversión: resultados con su porqué ────────────────────── Cada fila enseña la nota, las cifras que la sostienen y el factor que más la mueve. Una lista ordenada por una puntuación que no se puede discutir factor a factor no es un análisis: es un horóscopo. */ .filtros .marcas { display: flex; flex-wrap: wrap; gap: .5rem 1.1rem; align-items: center; } .filtros .marca { flex-direction: row; align-items: center; gap: .4rem; text-transform: none; letter-spacing: 0; font-size: .88rem; font-weight: 500; color: var(--tinta-2); cursor: pointer; } .filtros .marca input { accent-color: var(--verde); width: 1rem; height: 1rem; } .resultados { display: grid; gap: .7rem; } .res { display: grid; grid-template-columns: 4.4rem 1fr; gap: 1rem; text-decoration: none; color: inherit; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r-l); padding: 1rem 1.1rem; } .res:hover { border-color: var(--linea-fuerte); box-shadow: var(--sombra); } .res-nota { display: flex; flex-direction: column; align-items: center; gap: .25rem; text-align: center; height: fit-content; } .res-nota b { width: 3.1rem; height: 3.1rem; border-radius: 50%; border: 2px solid; display: grid; place-items: center; font-weight: 750; font-size: 1.05rem; font-variant-numeric: tabular-nums; } .res-nota small { font-size: .62rem; line-height: 1.25; color: var(--tinta-3); font-weight: 600; } .res-nota.bien b { color: var(--verde); border-color: var(--verde); background: var(--verde-suave); } .res-nota.medio b { color: var(--alta); border-color: var(--alta); background: color-mix(in srgb, var(--alta) 10%, transparent); } .res-nota.mal b { color: var(--grave); border-color: var(--grave); background: color-mix(in srgb, var(--grave) 10%, transparent); } .res-nota.sin b { color: var(--tinta-3); border-color: var(--linea-fuerte); background: var(--hueco); } .res-cuerpo { display: block; min-width: 0; } .res-dir { display: block; font-weight: 650; font-size: 1rem; letter-spacing: -.01em; } .res-loc { display: block; font-size: .84rem; color: var(--tinta-2); margin-top: .1rem; } .res-cifras { display: flex; flex-wrap: wrap; gap: .3rem 1.3rem; margin-top: .55rem; font-size: .8rem; color: var(--tinta-3); } .res-cifras b { display: block; font-size: .95rem; font-weight: 650; color: var(--tinta); font-variant-numeric: tabular-nums; } .res-porque { display: grid; grid-template-columns: auto 1fr; gap: .55rem; margin-top: .7rem; padding-top: .6rem; border-top: 1px solid var(--linea); font-size: .84rem; line-height: 1.45; color: var(--tinta-2); } .res-porque b { display: block; font-weight: 650; color: var(--tinta); } .res-peso { font-weight: 750; font-variant-numeric: tabular-nums; font-size: .78rem; padding: .05rem .4rem; border-radius: var(--r-s); height: fit-content; } .res-peso.mas { color: var(--verde); background: var(--verde-suave); } .res-peso.menos { color: var(--grave); background: color-mix(in srgb, var(--grave) 9%, transparent); } .res-peso.falta { color: var(--tinta-3); background: var(--hueco); } .res-pie { display: block; margin-top: .5rem; font-size: .74rem; color: var(--tinta-3); } @media (max-width: 40rem) { .res { grid-template-columns: 1fr; gap: .7rem; } .res-nota { flex-direction: row; align-items: center; gap: .6rem; text-align: left; } .filtros .marcas { flex-direction: column; align-items: stretch; } } /* Clases de bien: inmuebles / otros. Es un filtro, no una exclusión: los vehículos y muebles salen del escaparate pero conservan su camino. */ .clases { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1.3rem 0 0; } .clase { display: inline-flex; gap: .45rem; align-items: baseline; padding: .4rem .85rem; border-radius: 999px; font-size: .9rem; font-weight: 500; text-decoration: none; border: 1px solid var(--linea); color: var(--tinta-2); } .clase b { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--tinta-3); } a.clase:hover { color: var(--tinta); border-color: var(--linea-fuerte); background: var(--hueco); } .clase.actual { color: #fff; background: var(--verde); border-color: var(--verde); font-weight: 600; } .clase.actual b { color: rgba(255, 255, 255, .8); } /* Salida del «no encontrado» de la consulta. Es el estado más frecuente de la herramienta gratuita, y antes terminaba en tres explicaciones y nada más. */ .salida { margin-top: 2rem; padding-top: 1.6rem; border-top: 1px solid var(--linea); } .salida .cifras { margin: 1.2rem 0 1.4rem; } .acciones-vacio { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0 0 1.4rem; } /* Recuento de expedientes vivos junto a cada grupo del índice de remates. La cifra pequeña evita la promesa vacía: se ve cuántos hay antes de pinchar. */ .indice .vigilados { font-size: .78rem; font-weight: 500; color: var(--tinta-3); white-space: nowrap; font-variant-numeric: tabular-nums; } /* Datos de identificación en la cabecera de la ficha: qué es, cómo va, quién lo lleva y su referencia catastral. Rellenan el hueco que dejaba una ortofoto más alta que el titular, con los datos que un perito mira primero. */ .ficha-clave { display: grid; gap: .55rem; margin: 1.1rem 0 0; } .ficha-clave > div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: .6rem; align-items: baseline; padding-top: .55rem; border-top: 1px solid var(--linea); } .ficha-clave dt { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-3); } .ficha-clave dd { margin: 0; font-size: .92rem; font-weight: 500; color: var(--tinta); overflow-wrap: anywhere; } .ficha-clave dd.mono { font-family: var(--dato); font-size: .84rem; letter-spacing: -.01em; } @media (max-width: 40rem) { .ficha-clave > div { grid-template-columns: 1fr; gap: .1rem; } } /* Subasta ya terminada: lectura retrospectiva en lugar de los dos veredictos. Los veredictos miden una decisión que aún se puede tomar; en una subasta cerrada no hay decisión, hay resultado. */ .cerrada { background: var(--superficie); border: 1px solid var(--linea); border-left: 3px solid var(--tinta-3); border-radius: var(--r-l); padding: 1.5rem 1.6rem; margin: 1.4rem 0; box-shadow: var(--sombra); } .cerrada h2 { margin-bottom: .4rem; } .cerrada-cifras { display: grid; gap: 1rem; margin: 1.2rem 0 .4rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); } .cerrada-dato { margin: 1.1rem 0 .4rem; } .cerrada-cifras .cerrada-dato { margin: 0; } .cerrada-dato b { display: block; font-size: 1.5rem; font-weight: 750; letter-spacing: -.02em; line-height: 1.15; font-variant-numeric: tabular-nums; } .cerrada-dato b.buena { color: var(--ok); } .cerrada-dato b.mala { color: var(--grave); } .cerrada-dato span { display: block; margin-top: .3rem; font-size: .86rem; color: var(--tinta-2); line-height: 1.45; } /* Lo que vence antes: el único bloque de la portada con fecha de caducidad. */ .vencen { max-width: var(--col); margin: 2.4rem auto 0; } .vencen-cab { display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; align-items: baseline; justify-content: space-between; } .vencen-cab h2 { margin: 0; } .proximos { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .4rem; } .proximos a { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr) auto; gap: 1rem; align-items: center; text-decoration: none; color: inherit; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r); padding: .8rem 1.1rem; } .proximos a:hover { border-color: var(--verde); } .pv-cuando { font-size: .8rem; font-weight: 700; letter-spacing: .02em; color: var(--tinta-2); background: var(--hueco); border-radius: var(--r-pill); padding: .25rem .7rem; text-align: center; white-space: nowrap; font-variant-numeric: tabular-nums; } .pv-cuando.urge { color: #fff; background: var(--grave); } .pv-que { font-weight: 600; line-height: 1.3; } .pv-que small, .pv-cuanto small { display: block; font-weight: 400; font-size: .78rem; color: var(--tinta-3); margin-top: .12rem; } /* La cifra que sí es nuestra. La fila enseñaba el valor de salida, que lo publica el BOE y lo tiene cualquiera, justo debajo de un titular que dice que ese número no es lo que se paga. Ahora manda el remate esperado, y va del verde de la marca para que se distinga de un dato copiado. `.pv-cuanto` lleva `nowrap` porque una cifra partida en dos renglones se lee fatal. El renglón de abajo ya no es una cifra sino una frase —«remate esperado · salida 366.176 €»— así que ahí sí se deja envolver, o estira la fila y aplasta la dirección. EL CORTE VA EN EL MARCADO, NO EN UN ANCHO. Se probaron 11rem y 14rem y las dos partían la frase por «salida», dejando el importe solo en el renglón de abajo, separado de lo que lo nombra. Adivinar el ancho al que cabe un texto es perseguir un número que cambia con la fuente, con el idioma y con la longitud del importe — 42.130 € y 366.176 € no ocupan lo mismo. Con un `
` en la plantilla los dos renglones están siempre completos: «remate esperado» arriba y «salida 366.176 €» abajo. Deja de haber ancho que acertar, así que `nowrap` vuelve a valer aquí. */ .pv-cuanto.previsto { color: var(--verde); } .pv-cuanto.previsto small { color: var(--tinta-3); } .pv-cuanto { font-family: var(--dato); font-weight: 600; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; } .ranking .prov a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--linea-fuerte); } .ranking .prov a:hover { color: var(--verde); border-color: var(--verde); } @media (max-width: 40rem) { .proximos a { grid-template-columns: 1fr auto; } .pv-cuando { grid-column: 1 / -1; justify-self: start; } } /* Carteras: varios inmuebles del mismo acreedor a la vez. */ /* `.sociedades` era la ÚNICA lista del sitio con viñeta de navegador. Todas las demás —`.proximos`, `.carteras`, `.riesgos`, `.vd-factores`, `.destacadas`, `.cart-items`— llevan `list-style: none` desde siempre; a esta se le olvidó, y `docs/CRITERIO.md` la tenía marcada como «nunca revisada mirándola». Se ve en cuanto se abre la página y no aparece en ningún test: una viñeta de más responde 200 igual que una bien puesta. */ /* LAS SUGERENCIAS DEL BUSCADOR. Cuelgan del recuadro, no empujan la página: una lista que aparece y desplaza el contenido hace que se pulse lo que no era. Por eso el formulario es `position: relative` y esto va encima. */ /* El desplegable se cuelga de la CAJA, que envuelve solo el recuadro, y no del formulario entero: con `top: 100%` del formulario caía por debajo de la nota de ayuda y el texto asomaba entre el recuadro y las sugerencias. */ .buscador-caja { position: relative; } .sugerencias { list-style: none; margin: .25rem 0 0; padding: .3rem; position: absolute; left: 0; right: 0; top: 100%; z-index: 20; background: var(--superficie); border: 1px solid var(--linea-fuerte); border-radius: var(--r); box-shadow: var(--sombra-alta); /* CABEN LAS DIEZ Y EL PIE, SIN BARRA. Medido en la página con `getBoundingClientRect`: cada fila mide 41,6 px y el pie 37,8, así que el contenido son 463 px y el tope estaba en 384 (24rem). Se comía la décima sugerencia y el pie —«y 198 más — pulse Buscar para verlas»—, que es justamente lo que hay que leer para saber que la lista sigue. El `min()` es para la pantalla corta: 30rem son 480 px y en un portátil de 600 px de alto el desplegable taparía la página entera. */ max-height: min(30rem, 62vh); overflow-y: auto; } .sugerencias[hidden] { display: none; } /* ⚠ El `text-decoration: none` de aquí NO basta, y por eso el enlace lleva además la clase «envoltura»: la regla de «enlaces dentro de texto van subrayados» es `main li a:not(.boton):not(.enlace):not(.clase):not(.envoltura)` —cuatro clases y dos elementos— y gana a este selector, que es una clase y un elemento. Las nueve sugerencias salían subrayadas, la provincia incluida, y parecían una pila de enlaces en vez de una lista. Se vio en la captura. */ /* ⚠ LOS DOS BUSCADORES PINTAN COSAS DISTINTAS, Y LAS DOS SE VISTEN AQUÍ. En sociedades cada sugerencia es un `` a su ficha. En el de bienes no hay ficha a la que ir: se rellena el campo y se envía, así que es un `