/* ========================================================================== Base — «editorial de piedra». La idea rectora: esto no es un portal inmobiliario, es el sitio de alguien que alquila dos casas. Así que manda la fotografía y la tipografía, y todo lo demás se aparta. Nada de tarjetas con sombra flotando sobre degradados: papel, tinta y foto sangrada al borde. DOS AMBIENTES. Las dos líneas de negocio comparten tipos, retícula y componentes —es la misma persona la que alquila— y se separan solo por color y temperatura: · A Coruña → atlántico, urbano, luz fría. Azul marea. · A Fonsagrada → montaña, lento, luz cálida. Musgo y tierra. Se cambia con [data-ambiente] en el , y todo lo demás obedece sin saber en qué página está. Ver «Ambientes» más abajo. ========================================================================== */ :root { /* ---- La escala de grises ---------------------------------------------- HORMIGÓN. Las dos casas de Sandra son de hormigón y de piedra: el bloque de Corrales en A Coruña y la casa de mampostería de A Fonsagrada. Así que el sitio no se pinta de blanco, se pinta de gris, y lo ÚNICO que trae color son las fotografías. No es solo estética: sobre blanco, una foto de interior con paredes blancas se funde con la página y no se ve dónde acaba una y empieza la otra. Sobre gris, la foto se recorta sola y se lee como una foto. Por eso las tarjetas y los campos van en un gris MÁS CLARO que la página: así se levantan sin necesidad de sombra. Los grises van numerados de claro a oscuro; el que hay que mirar dos veces es --g7, que es el más claro que todavía cumple contraste de texto (6,2:1 sobre --g2). Por debajo de ese, solo filetes y adornos. */ --g0: #FCFCFB; /* lo que tiene que levantarse del todo */ --g1: #F4F4F2; /* tarjetas, campos de formulario */ --g2: #EBEBE8; /* el fondo de la página */ --g3: #DFDFDB; /* bandas de sección */ --g4: #CBCBC6; --g5: #A6A6A1; --g6: #7B7B76; --g7: #56564F; /* el gris más claro que vale para TEXTO */ --g8: #3A3A36; --g9: #242422; /* superficies oscuras */ --g10: #171716; /* la tinta */ --paper: var(--g1); --ink: var(--g10); --muted: var(--g7); --line: rgba(23, 23, 22, 0.14); --line-fuerte: rgba(23, 23, 22, 0.30); /* Superficie oscura para el pie y los bloques a contraluz. */ --dark: var(--g9); --on-dark: var(--g1); --on-dark-muted: rgba(244, 244, 242, 0.68); /* ---- Ambiente por defecto (la home, que no es de ninguna de las dos) --- La home es el punto de partida y no toma partido: gris neutro. */ --page: var(--g2); --banda: var(--g3); /* el gris de las secciones que se hunden */ --acento: #4A5D52; /* verde piedra, para adornos y filetes */ --acento-texto: #38473E; /* la variante que SÍ cumple contraste en texto */ --acento-suave: #DCE2DB; /* fondos de realce, nunca texto encima sin comprobar */ /* ---- Tipografía ------------------------------------------------------- Instrument Serif para titular: serif de contraste altísimo —el trazo fino es MUY fino— que da aire de revista. Dos avisos que van aquí porque es donde se miran: · SOLO TIENE UN PESO (400) y su cursiva. No se le pide `font-weight` alto en ningún sitio: el navegador lo falsifica engordando el trazo y en una serif de contraste alto eso se ve fatal. · NO ES VARIABLE. No tiene los ejes opsz/SOFT/WONK de la Fraunces que había antes; cualquier font-variation-settings que quede es letra muerta. Inter para texto y cifras: neutra, hecha para pantalla, con las cifras impecables —esta página va llena de precios, metros y medidas— y los acentos y la eñe bien resueltos, que en español no es negociable. */ --display: 'Instrument Serif', Georgia, 'Times New Roman', serif; --texto: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; /* Escala. El titular de la home usa cqw (del contenedor) y no vw (de la pantalla): el contenedor es la propia sección del hero, así que el tamaño se mide contra el hueco real del titular y no contra la ventana. Las medidas suben un punto respecto a la Fraunces anterior: Instrument Serif pinta más pequeña y más fina al mismo cuerpo, y a tamaño titular necesita sitio para que el contraste de trazo se vea. */ --fs-word: clamp(3.1rem, 9cqw, 8rem); --fs-h1: clamp(2.5rem, 1.2rem + 5vw, 5rem); --fs-h2: clamp(1.95rem, 1.1rem + 3.1vw, 3.5rem); --fs-h3: clamp(1.25rem, 1.05rem + 0.7vw, 1.6rem); --fs-lead: clamp(1.09rem, 1.02rem + 0.42vw, 1.32rem); --fs-body: 1.0625rem; --fs-pequeno: 0.9375rem; --fs-etiqueta: 0.78rem; /* Espaciado. Una sola serie para todo el sitio: si un hueco no está aquí, es que no debería existir. */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px; --s11: 176px; --margen: clamp(20px, 5vw, 88px); --ancho-max: 1440px; --ancho-texto: 62ch; /* por encima de esto, el ojo pierde el renglón */ /* Curvas. Una para entrar, otra para salir; la regla es que lo que ENTRA frena (ease-out) y lo que SALE acelera (ease-in). Ponerlas al revés es lo que hace que una animación se sienta pegajosa. */ --entra: cubic-bezier(0.16, 0.84, 0.34, 1); --sale: cubic-bezier(0.5, 0, 0.9, 0.35); --t-micro: 180ms; --t-base: 420ms; --t-largo: 760ms; /* Radio casi nulo a propósito: el redondeo generoso es la firma del carné rural genérico. Aquí el borde es recto, como el de una foto impresa. */ --radio: 2px; --radio-foto: 0; } /* ========================================================================== Ambientes ========================================================================== */ /* Con la base en gris, los ambientes ya no son «un color cada uno»: son la MISMA escala de grises inclinada a frío o a cálido, más un acento. Es una diferencia que se nota sin gritar, que es lo que se pedía. */ /* A Coruña — Atlántico. Gris marea, hormigón mojado, luz fría. Es la línea práctica (un estudiante busca precio, zona y cuándo puede entrar), así que el color acompaña sin entretener. */ [data-ambiente='coruna'] { --page: #E8EBEA; --paper: #F3F5F4; --banda: #DDE1E0; --acento: #2C5F6E; --acento-texto: #245361; /* 7.0:1 sobre --page: vale para texto normal */ --acento-suave: #DCE7EA; --dark: #1E2629; } /* A Fonsagrada — montaña. Gris cálido de granito y madera de castaño. Es la línea de deseo (aquí se viene a estar a gusto), y el acento sí tiene permiso para hacerse notar. */ [data-ambiente='fonsagrada'] { --page: #EDEAE4; --paper: #F6F4EF; --banda: #E3DFD7; --acento: #6B7F5E; --acento-texto: #47573C; /* 6.5:1 sobre --page */ --acento-suave: #E4E7D8; --dark: #26291F; } /* ========================================================================== Reset ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; /* Sin scroll-behavior:smooth global: pelea con el desplazamiento por teclado y marea a quien navega con Inicio/Fin. Se aplica solo donde toca. */ } body { background: var(--page); color: var(--ink); font-family: var(--texto); font-size: var(--fs-body); line-height: 1.6; /* Inter viene dibujada con bastante aire entre letras para que aguante a cuerpo diminuto; a cuerpo de lectura se la cierra un poco, que es lo que recomienda su propia documentación. */ letter-spacing: -0.011em; /* Cifras de ancho fijo. Esta página va llena de precios, metros y medidas puestos en columna: con cifras proporcionales, el «1» es más estrecho que el «8» y los números bailan de una fila a otra. */ font-variant-numeric: tabular-nums; /* Evita el salto lateral cuando una página tiene scroll y otra no. */ scrollbar-gutter: stable; transition: background-color var(--t-largo) var(--entra); } /** * El atributo `hidden` esconde porque la hoja del NAVEGADOR le pone * `display:none`… y cualquier `display` escrito en NUESTRA hoja le gana, porque * los estilos de autor mandan sobre los del agente de usuario. * * O sea: un `.componente { display: flex }` deja visible un * `