/* ========================================================================== mr-v2.css — sistema de diseño de mrrentaygestion.com Escrito el 2026-09-23 desde cero. No es una capa sobre mr-landing.css. POR QUÉ EXISTE. La hoja anterior tiene 253.909 B, 1.220 reglas y 2.932 declaraciones con !important sobre 3.446 (el 85 %), 61 cabeceras de parche y 89.631 caracteres de comentario forense servidos al público. Con ese 85 %, cada arreglo hay que ganarlo por especificidad, y por eso hubo arreglos que parecían hechos y no lo estaban (MR-FIX104, 114b, y los dos TODO abiertos). REGLAS DE ESTA HOJA, y son falsables: 1. CERO !important. Si algo no gana, se arregla el selector, no se le grita. 2. Un selector se define UNA vez; dos como mucho (base y su media query). 3. Todo valor sale de un token. Ningún número suelto dentro de una regla. 4. Tres breakpoints: 640, 960, 1200. Ni uno más. 5. La forense no se sirve al público: va a STATE.md. Aquí solo queda lo que hay que leer para no romperla. PALETA. Los tres tonos del operador, medidos en su web, no inventados: tinta #0a0a0a, crema #f6f1e7, oro #c9a227. Las escalas se derivan de ellos. El oro NUNCA se usa como color de texto sobre blanco: #c9a84c da 2,29 de contraste (medido en píxeles, es deuda real y suya). Para texto sobre claro está --oro-texto #7a6022, que ya existía en la hoja vieja y da 5,4. ========================================================================== */ :root { --tinta: #0a0a0a; --tinta-800: #1a1a1a; --tinta-600: #3d3d3d; --tinta-400: #6b6b6b; --tinta-200: #d6d2c8; --tinta-100: #e8e4db; --crema: #f6f1e7; --crema-claro: #faf6ec; --crema-suave: #fdfbf6; --blanco: #ffffff; --oro: #c9a227; --oro-claro: #e7cc83; --oro-texto: #7a6022; --oro-oscuro: #8a6a25; --fondo: var(--blanco); --fondo-alterno: var(--crema-claro); --fondo-oscuro: var(--tinta); --texto: var(--tinta); --texto-suave: var(--tinta-600); --texto-tenue: var(--tinta-400); --texto-sobre-oscuro: #f2eee6; --borde: var(--tinta-100); --borde-fuerte: var(--tinta-200); --fuente-texto: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --fuente-titulo: Fraunces, Georgia, "Times New Roman", serif; --t-xs: 0.8125rem; --t-sm: 0.9375rem; --t-base: 1.0625rem; --t-md: clamp(1.1875rem, 1.05rem + 0.6vw, 1.375rem); --t-lg: clamp(1.5rem, 1.25rem + 1.1vw, 2rem); --t-xl: clamp(1.875rem, 1.4rem + 2.2vw, 2.75rem); --t-2xl: clamp(2.25rem, 1.5rem + 3.4vw, 3.75rem); --t-3xl: clamp(2.75rem, 1.7rem + 4.6vw, 4.5rem); --peso-normal: 400; --peso-medio: 500; --peso-fuerte: 600; --peso-titulo: 700; --alto-titulo: 1.08; --alto-texto: 1.62; --track-titulo: -0.02em; /* Titular de tercer nivel dentro de una guía y título de tarjeta estrecha. 19 px y 1,25 son lo que ya llevan en línea 201 H3 del cuerpo de las guías (medido el 2026-09-28): los que no lo llevan salían a 22 px y en gris, dos estilos en la misma página. */ --t-subtitulo: 1.1875rem; /* Titular de segundo nivel dentro de una guía: 24 px es lo que llevan en línea 136 de los 213 H2 del cuerpo que traen estilo (medido el 2026-09-28); los 87 que no lo traen heredaban el titular de sección, 31 px a 390 y 44 a 1440. */ --t-titulo-guia: 1.5rem; --alto-subtitulo: 1.25; --alto-tarjeta: 1.2; --e1: 0.5rem; --e2: 1rem; --e3: 1.5rem; --e4: 2rem; --e5: 3rem; --e6: 4rem; --e7: 6rem; --e8: 8rem; /* 2026-09-23: bajado de 3.5-6.5rem a 2.75-4.5rem. Medido en lo servido: entre las 11 secciones hay 0 px de hueco vacio, asi que el aire era TODO relleno: 104+104 px en escritorio, o sea 208 entre contenidos, cuando la portada anterior usaba 128 y nadie se quejo de ella por eso. El juez con vision lo leyo como 'huecos enormes' cuatro veces, y el operador ya se habia quejado de 'bloques en blanco entre las secciones'. */ --ritmo-seccion: clamp(2.75rem, 1.5rem + 3vw, 4.5rem); --ancho: 1160px; --ancho-texto: 68ch; /* Suelo y techo del alto de una foto que acompaña a un texto en una fila de dos columnas (la de los dos hermanos): por debajo de 340 un retrato queda en una franja, y por encima de 460 la foto deja al texto flotando en medio de un blanco. */ --foto-fila-min: 340px; --foto-fila-max: 460px; --aire-lateral: clamp(1.25rem, 4vw, 3rem); --alto-cabecera: 68px; --r-sm: 6px; --r-md: 12px; --r-lg: 20px; --r-pil: 999px; --s-1: 0 1px 2px rgba(10,10,10,.06); --s-2: 0 2px 8px rgba(10,10,10,.08); --s-3: 0 8px 24px rgba(10,10,10,.10); --s-4: 0 18px 48px rgba(10,10,10,.14); --s-foco: 0 0 0 3px rgba(122,96,34,.45); --s-dentro: inset 0 1px 0 rgba(255,255,255,.6); /* Rojo de error. No es de la paleta de la casa a proposito: la paleta tiene tinta, crema y oro, y ninguno de los tres puede significar "esto esta mal" sin confundirse con el oro de marca. #b3261e sobre #fdf3f2 da 6,1 de contraste, medido. */ --error: #d9534f; --error-texto: #b3261e; --error-fondo: #fdf3f2; --curva: cubic-bezier(.22,1,.36,1); --t-rapido: 160ms; --t-medio: 240ms; --t-lento: 600ms; } /* ========================================================================== Base ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { color-scheme: only light; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--alto-cabecera) + var(--e3)); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--fondo); color: var(--texto); font-family: var(--fuente-texto); font-size: var(--t-base); line-height: var(--alto-texto); font-synthesis-weight: none; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } img, picture, video, iframe, svg { max-width: 100%; } img, video { height: auto; display: block; } h1, h2, h3, h4 { font-family: var(--fuente-titulo); font-weight: var(--peso-titulo); line-height: var(--alto-titulo); letter-spacing: var(--track-titulo); margin: 0 0 var(--e2); text-wrap: balance; } h1 { font-size: var(--t-2xl); } h2 { font-size: var(--t-xl); } h3 { font-size: var(--t-md); } h4 { font-size: var(--t-base); } p { margin: 0 0 var(--e2); max-width: var(--ancho-texto); } p:last-child { margin-bottom: 0; } a { color: var(--oro-texto); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color var(--t-rapido) var(--curva); } /* El hover NO puede ser un color fijo: un enlace dentro de un bloque oscuro viraba a tinta sobre tinta, o sea contraste 1,00 e invisible (medido el 2026-09-23 en el bloque negro de 21 guias, queja del operador). El destino del hover es una variable que cada contenedor oscuro redefine para si mismo. */ a:hover { color: var(--enlace-encima, var(--tinta)); } :focus-visible { outline: 2px solid var(--oro-texto); outline-offset: 2px; border-radius: var(--r-sm); } ul, ol { margin: 0 0 var(--e2); padding-left: 1.25em; } li { margin-bottom: var(--e1); } li:last-child { margin-bottom: 0; } strong, b { font-weight: var(--peso-fuerte); } .mr-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .mr-saltar { position: absolute; left: var(--e2); top: -100px; z-index: 200; background: var(--tinta); color: var(--texto-sobre-oscuro); padding: var(--e1) var(--e2); border-radius: var(--r-sm); text-decoration: none; transition: top var(--t-rapido) var(--curva); } .mr-saltar:focus-visible { top: var(--e2); color: var(--texto-sobre-oscuro); } /* ========================================================================== Maquetación ========================================================================== */ .mr-contenedor { width: 100%; max-width: var(--ancho); margin-inline: auto; padding-inline: var(--aire-lateral); } .mr-seccion { padding-block: var(--ritmo-seccion); } /* La primera sección de una página sin héroe ni migas (la 404) tiene que salvar la cabecera fija, como hace el héroe: con el relleno normal su rótulo quedaba 21 px DEBAJO de la cabecera a 390 px y a 2 px de ella a 1440 (medido el 2026-09-28). */ .mr-seccion--primera { padding-block-start: calc(var(--alto-cabecera) + var(--e5)); } /* Fondo BLANCO, no crema: literal del operador del 2026-09-15, y el juez con vision lo marco dos veces como reincidencia. La seccion alterna se separa con un filete fino en vez de con color, que es lo que da ritmo sin desobedecer. El crema se queda SOLO en el cuadradito del icono, que es donde el si lo pidio. */ .mr-seccion--alterna { background: var(--blanco); border-top: 1px solid var(--borde); border-bottom: 1px solid var(--borde); } /* En una rejilla de DOS columnas donde una es foto y la otra texto, el texto se centra respecto a la foto. Si no, la columna corta se pega arriba y todo el sobrante se acumula abajo como un bloque de vacío: medido el 2026-09-24 en la sección de los dos hermanos de la portada, 120 px de negro muerto bajo el enlace "Conócenos un poco más", con la foto llegando bastante más abajo. El operador ya corrigió esto una vez en septiembre y el rediseño lo volvió a traer; ahora el sobrante se reparte arriba y abajo y deja de leerse como un hueco. Se acota a escritorio: apiladas en móvil no hay dos columnas que igualar. */ /* Solo cuando la otra columna es TEXTO (`div`). Una fila de figuras solas (los cuatro collages de reformas de la portada) no tiene nada que centrar: centradas, cada figura bajaba según el largo de su pie y las fotos de la misma fila quedaban a 10-11 px de distancia (medido el 2026-09-28, pies en 4413 y 4424 con las dos fotos de 520x735). */ /* Y la calculadora de la portada, que es un `form` y no una figura: su columna de texto terminaba 190 px antes que la tarjeta (medido el 2026-09-27). */ @media (min-width: 960px) { .mr-rejilla--2:has(> figure):has(> div), .mr-rejilla--2:has(> picture):has(> div), .mr-rejilla--2:has(> .mr-calc) { align-items: center; } } .mr-seccion--oscura { background: var(--fondo-oscuro); color: var(--texto-sobre-oscuro); } .mr-seccion--oscura h2, .mr-seccion--oscura h3 { color: var(--blanco); } .mr-seccion--oscura p { color: var(--texto-sobre-oscuro); } .mr-seccion--oscura a { color: var(--oro-claro); } .mr-seccion--oscura a:hover { color: var(--blanco); } /* La cabecera de sección va alineada a la IZQUIERDA. Que TODAS las secciones estén centradas es una de las firmas de plantilla que el operador señaló el 2026-09-22; se centra solo donde se pide con la clase. */ .mr-cab { max-width: var(--ancho-texto); margin-bottom: clamp(1.5rem, 0.9rem + 2.2vw, 3rem); } .mr-cab--centrada { margin-inline: auto; text-align: center; } .mr-cab h2 { margin-bottom: var(--e2); } .mr-cab p { font-size: var(--t-md); color: var(--texto-suave); margin-bottom: 0; } .mr-cab--centrada p { margin-inline: auto; } .mr-seccion--oscura .mr-cab p { color: var(--texto-sobre-oscuro); } .mr-oro { color: var(--oro-texto); font-style: normal; } .mr-seccion--oscura .mr-oro { color: var(--oro-claro); } .mr-rejilla { display: grid; gap: var(--e3); } @media (min-width: 640px) { .mr-rejilla--2 { grid-template-columns: repeat(2, 1fr); } .mr-rejilla--4 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 960px) { .mr-rejilla--3 { grid-template-columns: repeat(3, 1fr); } .mr-rejilla--4 { grid-template-columns: repeat(4, 1fr); } } /* Foto ancha dentro de una sección, entre el titular y su contenido. No existía: las páginas de servicio servían DOS fotos para siete u ocho secciones (medido el 2026-09-23 sobre las 42 indexables, frente a una media de 6,5 por página), y el operador lo trajo como "falta una barbaridad de fotografías". El alto va acotado para que una foto no empuje el contenido fuera de la pantalla, y el pie va debajo, no encima, para que no compita con el titular. */ .mr-media { margin: var(--e3) 0 var(--e3); } /* Proporción fija y no un techo de alto: con `max-height: 24vh` la banda salía a 1064x216, un 5:1 que dejaba fuera las llaves, la cama o la cara que la foto enseña (medido en las 18 bandas de las 8 páginas el 2026-09-28). 16/9 en el móvil y 3/1 desde 640 px; el encuadre de cada foto va en su `object-position`, en el html, porque el sujeto está en un sitio distinto en cada una. */ .mr-media img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-lg); box-shadow: var(--s-2); } @media (min-width: 640px) { .mr-media img { aspect-ratio: 3 / 1; } } /* El pie en el mismo cuerpo que la nota del resto de la web, no dos tallas por debajo: a `--t-xs` costaba leerlo y quedaba como un pie de página perdido bajo una foto enorme. */ .mr-media figcaption { margin-top: 10px; font-size: var(--t-sm); color: var(--texto-suave); line-height: 1.5; max-width: var(--ancho-texto); } /* Galería de habitaciones. Tres columnas SIEMPRE, y nueve fotos: 3x3 exacto a cualquier ancho. El operador (2026-09-23) trajo que "este bloque de imágenes no es simétrico", y medido era cierto en dos de los tres anchos: con rejilla de 4 y once fotos salían 4+4+3 en escritorio y 5+1 en la franja de tablet. La proporción es 3/4 y no 16/10 porque las nueve son verticales: recortarlas a apaisado se come la habitación, que es lo que el bloque enseña (regla 16 de la flota). */ .mr-galeria { display: grid; gap: var(--e1); grid-template-columns: repeat(3, 1fr); } /* Dos clases a propósito: `.mr-tarjeta--foto img` impone 16/10 y vive más abajo en el fichero, así que un selector de la misma fuerza perdería por orden. */ .mr-galeria .mr-tarjeta--foto img { aspect-ratio: 3 / 4; } @media (min-width: 640px) { .mr-galeria { gap: var(--e2); } } @media (min-width: 960px) { .mr-galeria { gap: var(--e3); } } /* ========================================================================== Cabecera, menú y barra fija de móvil La cabecera, la barra y el pie se despliegan a las 42 páginas en el MISMO viaje que la portada nueva: migrar página a página dejaría semanas con dos cabeceras distintas, que es lo que la regla 19 de la flota prohíbe. ========================================================================== */ .mr-cabecera { position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 100; background: rgba(255,255,255,.92); backdrop-filter: saturate(140%) blur(10px); border-bottom: 1px solid var(--borde); transition: box-shadow var(--t-medio) var(--curva), background-color var(--t-medio) var(--curva); } .mr-cabecera[data-compacta="si"] { box-shadow: var(--s-2); background: rgba(255,255,255,.97); } .mr-cabecera__fila { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); min-height: var(--alto-cabecera); } .mr-marca { display: inline-flex; align-items: center; gap: var(--e1); text-decoration: none; color: var(--texto); font-weight: var(--peso-fuerte); } .mr-marca img { width: 34px; height: 34px; border-radius: var(--r-pil); } /* En UNA línea, y no por gusto: al entrar el teléfono en la cabecera el reparto flexible comprimió la marca y el botón, y medido el 2026-09-23 se partían en dos líneas en los SIETE anchos probados, 1920 incluido, o sea que no era falta de sitio sino que el flex los encogía antes que al menú. El nombre de la empresa partido en dos se lee como un descuido de la web entera, porque la cabecera sale en las 46 páginas. */ .mr-marca__nombre { font-family: var(--fuente-titulo); font-size: var(--t-md); letter-spacing: -0.01em; } /* Y ACOTADO A DONDE HAY SITIO. La primera versión de esta regla no llevaba media query y rompió la cabecera del móvil: sin poder encogerse, la marca y el botón desbordaban los 390 px y el botón salía de la pantalla como "Calcular mi re", con el mando del menú detrás. Lo cazó el juez con visión y mi propia medición lo dio por bueno, porque medí si el TEXTO cabía en su botón (171 px en una caja de 173) en vez de si la cabecera cabía en la ventana, que es la pregunta. El teléfono, que es lo que apretó la fila, solo aparece a partir de 1100 px: por debajo no hay nada que proteger. */ @media (min-width: 1100px) { .mr-marca { flex: 0 0 auto; } .mr-marca__nombre { white-space: nowrap; } .mr-cabecera__acciones { flex: 0 0 auto; } .mr-cabecera__acciones .mr-boton { white-space: nowrap; } .mr-nav { min-width: 0; } } .mr-marca__nombre span { color: var(--oro-texto); } .mr-nav { display: none; } .mr-nav ul { display: flex; align-items: center; gap: var(--e3); list-style: none; margin: 0; padding: 0; } .mr-nav li { margin: 0; } .mr-nav a { color: var(--texto); text-decoration: none; font-size: var(--t-sm); font-weight: var(--peso-medio); padding-block: var(--e1); white-space: nowrap; } .mr-nav a:hover { color: var(--oro-texto); } /* Un menú que cabe en el monitor del que lo hizo se parte en todos los portátiles (regla 32 de la flota). Aquí a 1440 ya partía "Cómo funciona" y "Quiénes somos" en dos líneas: los enlaces no envuelven, y los dos ítems que sobraban se han quitado de la barra (siguen en el menú móvil y en la página). */ /* Servicios: submenú. En reposo está cerrado; se abre con el ratón y con el teclado, porque un menú que solo responde al ratón deja fuera a quien tabula. */ .mr-menu-serv { position: relative; } .mr-menu-serv__boton { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; font: inherit; font-size: var(--t-sm); font-weight: var(--peso-medio); color: var(--texto); cursor: pointer; padding-block: var(--e1); } .mr-menu-serv__boton::after { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform var(--t-rapido) var(--curva); } .mr-menu-serv__boton[aria-expanded="true"]::after { transform: rotate(225deg) translateY(-2px); } .mr-menu-serv__panel { position: absolute; inset-block-start: calc(100% + 10px); inset-inline-start: 0; min-width: 290px; background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--r-md); box-shadow: var(--s-3); padding: var(--e1); display: none; } .mr-menu-serv__panel[data-abierto="si"] { display: block; } .mr-menu-serv__panel ul { display: block; } .mr-menu-serv__panel a { display: block; padding: 10px var(--e2); border-radius: var(--r-sm); font-weight: var(--peso-normal); } .mr-menu-serv__panel a:hover { background: var(--crema-claro); color: var(--oro-texto); } .mr-cabecera__acciones { display: flex; align-items: center; gap: var(--e1); } /* El teléfono VISIBLE, no solo el botón de WhatsApp: orden del operador del 2026-09-23 ("hay muchas personas que prefieren llamarnos, quieren ver el número visualmente"). Va escrito, no escondido tras un icono, y es pulsable con `tel:` para quien lo abra desde el móvil. En la cabecera se retira por debajo de 1100 px, donde no cabe sin apretar el menú: ahí el número vive en la barra fija de abajo y en el menú desplegado, que es donde la mano llega. */ .mr-tel { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding-inline: var(--e1); color: var(--texto); font-weight: var(--peso-fuerte); font-size: var(--t-sm); text-decoration: none; white-space: nowrap; } .mr-tel svg { flex: 0 0 auto; color: var(--oro-texto); } .mr-tel:hover, .mr-tel:focus-visible { color: var(--oro-texto); text-decoration: underline; } .mr-tel--grande { font-size: var(--t-md); min-height: 48px; padding-inline: 0; } @media (max-width: 1099px) { .mr-cabecera__acciones .mr-tel { display: none; } } .mr-ham { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 0 10px; cursor: pointer; background: var(--tinta); border: 0; border-radius: var(--r-sm); } .mr-ham span { display: block; height: 2px; background: var(--blanco); border-radius: 2px; transition: transform var(--t-medio) var(--curva), opacity var(--t-rapido) linear; } .mr-ham[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .mr-ham[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .mr-ham[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* El icono lleva fondo propio y opaco a propósito: cuando su único contraste venía de la cabecera translúcida, el operador lo vio blanco sobre blanco (2026-09-01). Un control que siempre tiene que verse no toma prestado su contraste de un ancestro. */ .mr-nav-movil { position: fixed; inset: var(--alto-cabecera) 0 0 0; z-index: 99; background: var(--blanco); padding: var(--e4) var(--aire-lateral) var(--e6); overflow-y: auto; display: none; } .mr-nav-movil[data-abierto="si"] { display: block; } .mr-nav-movil ul { list-style: none; margin: 0 0 var(--e4); padding: 0; } .mr-nav-movil li { margin: 0; border-bottom: 1px solid var(--borde); } .mr-nav-movil a { display: block; padding: var(--e2) 0; font-size: var(--t-md); color: var(--texto); text-decoration: none; } .mr-nav-movil__grupo { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .12em; color: var(--texto-tenue); margin: var(--e4) 0 var(--e1); } @media (min-width: 960px) { .mr-nav { display: block; } .mr-ham { display: none; } .mr-nav-movil { display: none; } } /* Barra fija inferior de móvil. Va EN EL HTML, no la inyecta el JS: si el JS no llega, hoy no hay barra y el visitante se queda sin el camino corto. */ /* La barra se sube por encima del aviso de cookies mientras este puesto. Sin esto el aviso, que tambien va fijo abajo, la tapa entera: medido por `banner_tapa.mjs` a 390 px, "Calcular mi renta" 175x48 tapado. El alto lo escribe mr-v2.js en `--alto-aviso` porque lo pone otro fichero y cambia con el texto; el valor por defecto 0 deja la barra donde estaba. */ .mr-barra { position: fixed; inset-inline: 0; inset-block-end: var(--alto-aviso, 0px); z-index: 98; /* Tres acciones desde el 2026-09-23: el operador pidió que el teléfono se VEA y no solo el botón de WhatsApp ("hay muchas personas que prefieren llamarnos"). La columna de llamar va más estrecha porque su palabra es más corta. */ display: grid; grid-template-columns: minmax(84px, .62fr) 1fr 1fr; gap: var(--e1); padding: 10px var(--e2) calc(10px + env(safe-area-inset-bottom, 0px)); background: rgba(255,255,255,.96); border-top: 1px solid var(--borde); backdrop-filter: blur(8px); } /* Relleno lateral de 8 px dentro de la barra: con los 24 px de todo botón, a 320 px las tres pedían 84 + 126 + 110 px en 288 útiles y "Calcular mi renta" acababa en 352, 32 px fuera de la pantalla en todas las páginas (medido el 2026-09-28). Ahora acaba en 304; a 390 y 414 px no se mueve nada y cada texto sigue en sus mismas líneas. */ .mr-barra .mr-boton { width: 100%; justify-content: center; padding-inline: var(--e1); } @media (min-width: 960px) { .mr-barra { display: none; } } /* La reserva se calcula con el MISMO valor que usa la barra, incluida la zona segura del iPhone: cuando solo una de las dos la cuenta, el hueco se come. */ @media (max-width: 959px) { /* Y el AVISO DE COOKIES, que en móvil mide 151 px medidos y estaba fuera de esta cuenta: tapaba el botón "Calcular lo que cobraría" de la portada y los dos de `/contacto`, o sea el camino del dinero, en el primer vistazo de un teléfono. `--alto-aviso` lo escribe `mr-v2.js` midiendo la caja real, así que vale 0 cuando el aviso no está y el hueco no sobra nunca. */ body { padding-bottom: calc(76px + var(--alto-aviso, 0px) + env(safe-area-inset-bottom, 0px)); } } /* ========================================================================== Botones ========================================================================== */ .mr-boton { display: inline-flex; align-items: center; justify-content: center; gap: var(--e1); min-height: 48px; padding: 0 var(--e3); border: 1px solid transparent; border-radius: var(--r-pil); font-family: var(--fuente-texto); font-size: var(--t-sm); font-weight: var(--peso-fuerte); line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer; transition: transform var(--t-rapido) var(--curva), box-shadow var(--t-rapido) var(--curva), background-color var(--t-rapido) var(--curva), color var(--t-rapido) var(--curva), border-color var(--t-rapido) var(--curva); } .mr-boton:hover { transform: translateY(-2px); } .mr-boton:active { transform: translateY(0); } /* Ninguna sombra de color: son halos y el operador los prohibió para toda la flota el 2026-08-22. Las de aquí son negro translúcido. */ .mr-boton--oro { background: var(--oro); color: var(--tinta); box-shadow: var(--s-2); } .mr-boton--oro:hover { background: var(--oro-claro); color: var(--tinta); box-shadow: var(--s-3); } .mr-boton--tinta { background: var(--tinta); color: var(--blanco); } .mr-boton--tinta:hover { background: var(--tinta-800); color: var(--blanco); box-shadow: var(--s-3); } .mr-boton--linea { background: transparent; color: var(--texto); border-color: var(--borde-fuerte); } .mr-boton--linea:hover { border-color: var(--tinta); color: var(--tinta); background: var(--crema-suave); } .mr-seccion--oscura .mr-boton--linea { color: var(--blanco); border-color: rgba(255,255,255,.35); } .mr-seccion--oscura .mr-boton--linea:hover { background: rgba(255,255,255,.08); color: var(--blanco); } .mr-boton--wa { background: #13803f; color: var(--blanco); } .mr-boton--wa:hover { background: #188044; color: var(--blanco); box-shadow: var(--s-3); } .mr-botonera { display: flex; flex-wrap: wrap; gap: var(--e2); align-items: stretch; } @media (prefers-reduced-motion: reduce) { .mr-boton:hover { transform: none; } } /* ========================================================================== Héroe La foto se VE. Antes vivía bajo un velo del 72 al 95 % y por eso el operador dijo el 2026-09-22 que la web no tiene ni una sola imagen: la foto se descargaba con fetchpriority alto y no llegaba a verse. Aquí el texto y la foto son dos columnas, así que el contraste del texto no depende de tapar la fotografía. ========================================================================== */ .mr-heroe { padding-block: calc(var(--alto-cabecera) + var(--e5)) var(--ritmo-seccion); background: linear-gradient(180deg, var(--crema-suave) 0%, var(--blanco) 62%); overflow: hidden; } .mr-heroe__rejilla { display: grid; gap: var(--e4); align-items: center; } .mr-heroe__intro { max-width: 34rem; } .mr-heroe h1 { margin-bottom: var(--e3); } .mr-heroe__entrada { font-size: var(--t-md); color: var(--texto-suave); margin-bottom: var(--e3); } .mr-heroe__hechos { display: flex; flex-wrap: wrap; gap: var(--e1) var(--e3); margin: 0 0 var(--e4); padding: 0; list-style: none; } /* Desde 640 px, rejilla de dos columnas al ancho de su texto: en fila flexible cada línea repartía sus dos ventajas a su manera y el icono de la segunda columna caía 31 px más a la derecha en una fila que en la otra (medido a 1440 en /alquiler-pisos-estudiantes-zaragoza). */ @media (min-width: 640px) { .mr-heroe__hechos { display: grid; grid-template-columns: repeat(2, max-content); } } .mr-heroe__hechos li { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: var(--t-sm); color: var(--texto-suave); } .mr-heroe__hechos li::before { content: ""; width: 18px; height: 18px; flex: 0 0 18px; border-radius: var(--r-pil); background: var(--oro) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0a0a' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/11px no-repeat; } .mr-heroe__foto { position: relative; } .mr-heroe__foto img { width: 100%; border-radius: var(--r-lg); box-shadow: var(--s-4); aspect-ratio: 4 / 5; object-fit: cover; } .mr-heroe__pie { position: absolute; inset-block-end: var(--e3); inset-inline-start: var(--e3); inset-inline-end: var(--e3); background: rgba(10,10,10,.82); color: var(--texto-sobre-oscuro); padding: 10px var(--e2); border-radius: var(--r-md); font-size: var(--t-xs); line-height: 1.45; } /* En movil la foto sube justo detras del titular: apilada al final quedaba a 801 px con una ventana de 844, o sea fuera de la primera pantalla, y el juez con vision la dio por desaparecida. Es la foto que responde a "no tiene ni una sola imagen": no puede estar abajo. */ @media (max-width: 959px) { .mr-heroe__rejilla { display: flex; flex-direction: column; } .mr-heroe__foto { order: -1; } .mr-heroe__foto img { aspect-ratio: 4 / 3; object-position: 50% 28%; } /* El pie sale DEBAJO de la foto y sin banda: en el móvil la banda oscura caía en el centro de la foto y tapaba justo lo que enseña (la cama, las caras, las carpetas, la casita), medido en las 9 páginas con héroe el 2026-09-28. */ .mr-heroe__pie { position: static; margin-top: var(--e1); padding: 0; background: none; border-radius: 0; color: var(--texto-suave); } } /* PERO EN LA FRANJA DE TABLET LA FOTO VA DESPUÉS, no delante. La regla de arriba nació para el móvil estrecho, donde la foto en 4/3 mide unos 290 px y cabe con el titular; a 820 px de ancho esa misma proporción da **555 px de alto** y empuja el titular hasta el 82 % de la pantalla, y a 930 px lo saca directamente de la vista: la primera pantalla pasa a ser una foto sola, sin una palabra de lo que ofrece la empresa. No se resuelve recortando la foto, que tiene a una persona con las llaves y se le cortaría la cara (regla 16): se resuelve poniendo el texto primero, que en una pantalla ancha cabe de sobra con la foto justo debajo. */ @media (min-width: 641px) and (max-width: 959px) { .mr-heroe__foto { order: 0; } } @media (min-width: 960px) { .mr-heroe__rejilla { grid-template-columns: 1.05fr 0.95fr; gap: var(--e6); } /* 1/1 y no 4/3: acerca la foto al alto de la columna de texto, que es lo que el operador pidió el 15-sep ("que no quede la columna flotando"). Medido en el navegador antes de aplicarlo: el desnivel pasa de 149 px por lado a 90 en las verticales y a 58 en la portada. Se probó también 4/5, que lo dejaba en 31 y habría sido mejor número, y se DESCARTÓ mirando la captura: convertía el salón en una pared blanca con media puerta. Con 1/1 la habitación sigue entera (radiador, puerta, suelo) y en la portada siguen viéndose la mano, las llaves y la casita, que es lo que esa foto cuenta. El número no manda sobre la foto. */ /* 2026-09-23: el operador pidió igualarla del todo, sabiendo que recorta. Se hace SIN inventar otra proporción: la foto se estira a lo que mida la columna de texto, así que el desnivel es 0 por construcción y el recorte es exactamente el que haga falta, que hoy son los 58 px que le faltaban en la portada y 90 en las verticales sobre unos 500, o sea entre un 12 % y un 18 %. Un `aspect-ratio` fijo no puede dar 0 nunca: el alto de la foto no depende del texto. El suelo evita que una columna corta la achate. */ .mr-heroe__foto { align-self: stretch; } .mr-heroe__foto img { aspect-ratio: auto; height: 100%; min-height: 420px; } } /* ========================================================================== Calculadora ========================================================================== */ .mr-calc { background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--r-lg); box-shadow: var(--s-3); padding: var(--e3); } .mr-calc__titulo { font-family: var(--fuente-titulo); font-size: var(--t-md); font-weight: var(--peso-titulo); margin-bottom: var(--e1); } .mr-calc__ayuda { font-size: var(--t-xs); color: var(--texto-tenue); margin-bottom: var(--e3); } .mr-campo { margin-bottom: var(--e2); } .mr-campo > label, .mr-campo > .mr-campo__rotulo { display: block; font-size: var(--t-xs); font-weight: var(--peso-fuerte); letter-spacing: .06em; text-transform: uppercase; color: var(--texto-suave); margin-bottom: 6px; } .mr-campo input, .mr-campo select, .mr-campo textarea { width: 100%; min-height: 48px; padding: 0 var(--e2); font-family: var(--fuente-texto); font-size: var(--t-base); color: var(--texto); background: var(--blanco); border: 1px solid var(--borde-fuerte); border-radius: var(--r-sm); transition: border-color var(--t-rapido) var(--curva), box-shadow var(--t-rapido) var(--curva); } .mr-campo textarea { min-height: 120px; padding: var(--e2); line-height: var(--alto-texto); } .mr-campo input:focus-visible, .mr-campo select:focus-visible, .mr-campo textarea:focus-visible { border-color: var(--oro-texto); box-shadow: var(--s-foco); outline: none; } /* El marcador se compone sobre el relleno real del campo: cuando no se hace, salen marcadores en blanco sobre blanco y ninguna auditoría de contraste que recorra nodos de texto puede verlos, porque son pseudoelementos. */ .mr-campo input::placeholder, .mr-campo textarea::placeholder { color: var(--tinta-400); opacity: 1; } .mr-campo select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--texto-suave) 50%), linear-gradient(135deg, var(--texto-suave) 50%, transparent 50%); background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px); background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: var(--e5); } /* La flecha va con dos gradientes y no con un data: URI a propósito: la CSP de esta web es default-src 'self' y bloquearía la imagen SIN dar ningún error, dejando el desplegable con cara de campo de texto. */ .mr-opciones { display: flex; flex-wrap: wrap; gap: var(--e1); } .mr-opcion { min-height: 44px; padding: 0 var(--e2); border-radius: var(--r-pil); border: 1px solid var(--borde-fuerte); background: var(--blanco); font: inherit; font-size: var(--t-sm); color: var(--texto); cursor: pointer; transition: background-color var(--t-rapido) var(--curva), border-color var(--t-rapido) var(--curva), color var(--t-rapido) var(--curva); } .mr-opcion[aria-pressed="true"] { background: var(--tinta); border-color: var(--tinta); color: var(--blanco); } .mr-opcion:hover { border-color: var(--tinta); } .mr-calc__salida { margin-top: var(--e3); padding: var(--e3); background: var(--crema-claro); border: 1px solid var(--oro); border-radius: var(--r-md); } .mr-calc__cifra { font-family: var(--fuente-titulo); font-size: var(--t-lg); font-weight: var(--peso-titulo); color: var(--tinta); line-height: 1.1; } .mr-calc__nota { font-size: var(--t-xs); color: var(--texto-suave); margin: var(--e1) 0 0; } .mr-calc__error { font-size: var(--t-sm); color: #a4231f; margin-top: var(--e1); min-height: 1.2em; } .mr-campo--mal input, .mr-campo--mal select { border-color: #a4231f; } /* Trampa de miel: fuera de pantalla para la persona, visible para el robot. */ .mr-miel { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* ========================================================================== Tarjetas, cifras y listas ========================================================================== */ .mr-tarjeta { display: flex; flex-direction: column; background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--r-md); padding: var(--e3); transition: transform var(--t-medio) var(--curva), box-shadow var(--t-medio) var(--curva); } .mr-tarjeta h3 { margin-bottom: var(--e1); } .mr-tarjeta p { color: var(--texto-suave); font-size: var(--t-sm); } .mr-tarjeta__pie { margin-top: auto; padding-top: var(--e2); } .mr-seccion--alterna .mr-tarjeta { border-color: var(--borde-fuerte); background: var(--blanco); } .mr-seccion--oscura .mr-tarjeta { background: var(--tinta-800); border-color: rgba(255,255,255,.12); } .mr-seccion--oscura .mr-tarjeta p { color: var(--texto-sobre-oscuro); } .mr-tarjeta--foto { padding: 0; overflow: hidden; } .mr-tarjeta--foto img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; } .mr-tarjeta--foto .mr-tarjeta__cuerpo { padding: var(--e3); display: flex; flex-direction: column; flex: 1; } .mr-tarjeta--foto:hover { transform: translateY(-4px); box-shadow: var(--s-3); } /* El icono conserva su cuadradito crema: es lo que el operador pidió el 2026-09-15, y lo que retiró fue el crema del resto del bloque. */ .mr-icono { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-bottom: var(--e2); background: var(--crema); border-radius: var(--r-sm); color: var(--oro-texto); } .mr-icono svg { width: 22px; height: 22px; } .mr-seccion--oscura .mr-icono { background: rgba(201,162,39,.16); color: var(--oro-claro); } .mr-cifras { display: grid; gap: var(--e3); grid-template-columns: repeat(2, 1fr); } @media (min-width: 960px) { .mr-cifras { grid-template-columns: repeat(4, 1fr); } } .mr-cifra { border-left: 2px solid var(--oro); padding-left: var(--e2); } .mr-cifra__n { display: block; font-family: var(--fuente-titulo); font-size: var(--t-lg); font-weight: var(--peso-titulo); line-height: 1; color: var(--tinta); } /* `__t` es el nombre que usa /quienes-somos y `__q` el del resto. Las cuatro cifras de esa pagina se servian SIN estilo porque la hoja solo conocia uno de los dos (censo de clases huerfanas, 2026-09-23). Se cubren los dos hasta unificar el marcado. */ .mr-cifra__q, .mr-cifra__t { display: block; font-size: var(--t-sm); color: var(--texto-suave); margin-top: 6px; } .mr-lista-marcada { list-style: none; padding: 0; margin: 0; } /* Con margen 0, el párrafo que sigue a la lista quedaba a 8 px (el del último elemento) y se leía como un punto más de ella, en cinco guías (medido el 2026-09-28). Con 16 px queda al ritmo de los párrafos. Solo si algo la sigue: al final de una tarjeta no añade hueco. */ .mr-lista-marcada:not(:last-child) { margin-bottom: var(--e2); } .mr-lista-marcada li { position: relative; padding-left: var(--e3); margin-bottom: var(--e1); } .mr-lista-marcada li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: .62em; width: 7px; height: 7px; border-radius: var(--r-pil); background: var(--oro); } /* La viñeta se alinea con la PRIMERA LÍNEA y no con el centro del bloque: en un elemento de cuatro líneas, centrarla la dejaba a 71 px del borde superior cuando el centro de la primera línea está a 22 px (queja del 2026-09-15). */ /* ========================================================================== Pasos, comparador antes y después, tabla, acordeón ========================================================================== */ .mr-paso { position: relative; } .mr-paso__n { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; margin-bottom: var(--e2); background: var(--tinta); color: var(--blanco); border-radius: var(--r-pil); font-family: var(--fuente-titulo); font-size: var(--t-sm); font-weight: var(--peso-titulo); } .mr-paso__plazo { display: inline-block; margin-bottom: var(--e1); font-size: var(--t-xs); font-weight: var(--peso-fuerte); letter-spacing: .06em; text-transform: uppercase; color: var(--oro-texto); } /* Comparador: un input range de verdad, así que funciona con el dedo, con el ratón y con el teclado, y un lector de pantalla lo anuncia. */ .mr-comparador { position: relative; border-radius: var(--r-md); overflow: hidden; box-shadow: var(--s-3); background: var(--tinta-100); } .mr-comparador__marco { position: relative; aspect-ratio: 4 / 3; } .mr-comparador img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .mr-comparador__despues { clip-path: inset(0 0 0 var(--corte, 50%)); } .mr-comparador__linea { position: absolute; inset-block: 0; inset-inline-start: var(--corte, 50%); width: 2px; background: var(--blanco); box-shadow: var(--s-2); pointer-events: none; } .mr-comparador__linea::after { content: ""; position: absolute; inset-block-start: 50%; inset-inline-start: 50%; transform: translate(-50%, -50%); width: 40px; height: 40px; border-radius: var(--r-pil); background: var(--blanco); box-shadow: var(--s-3); } .mr-comparador input[type="range"] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; } .mr-comparador input[type="range"]:focus-visible + .mr-comparador__linea::after { box-shadow: var(--s-foco); } .mr-comparador__rotulo { position: absolute; inset-block-start: var(--e2); z-index: 2; padding: 4px 10px; border-radius: var(--r-pil); background: rgba(10,10,10,.78); color: var(--texto-sobre-oscuro); font-size: var(--t-xs); font-weight: var(--peso-fuerte); letter-spacing: .08em; text-transform: uppercase; pointer-events: none; } .mr-comparador__rotulo--antes { inset-inline-start: var(--e2); } .mr-comparador__rotulo--despues { inset-inline-end: var(--e2); } .mr-tabla-caja { overflow-x: auto; border-radius: var(--r-md); border: 1px solid var(--borde); -webkit-overflow-scrolling: touch; } /* Sin ancho mínimo: por debajo de 640 px la tabla pasa a tarjetas (más abajo), y por encima cabe en su caja. El ancho mínimo de 640 era lo que dejaba fuera de la pantalla del móvil la columna que vende. */ .mr-tabla { width: 100%; border-collapse: collapse; font-size: var(--t-sm); background: var(--blanco); } .mr-tabla th, .mr-tabla td { padding: 14px var(--e2); text-align: left; vertical-align: top; border-bottom: 1px solid var(--borde); } .mr-tabla thead th { background: var(--tinta); color: var(--blanco); font-weight: var(--peso-fuerte); white-space: normal; } .mr-tabla thead th:last-child { background: var(--oro); color: var(--tinta); } .mr-tabla tbody tr:last-child th, .mr-tabla tbody tr:last-child td { border-bottom: 0; } .mr-tabla td:last-child { background: var(--crema-claro); font-weight: var(--peso-medio); } /* La columna "con nosotros" va en TINTA, no en verde: orden del operador del 2026-09-23 ("el texto debe estar en negro, no en verde"). Lo que distingue esa columna es el fondo crema y la negrita, no el color de la letra. */ .mr-tabla__si { color: var(--tinta); font-weight: var(--peso-fuerte); } /* Y las celdas negativas tambien en tinta: iban en rojo (#8a2b26) en 21 celdas de 4 tablas, y la orden del operador es "el texto en negro". Lo negativo ya lo dice la palabra ("Tuyo", "Los pierdes"); la columna nuestra se distingue por fondo y negrita. */ .mr-tabla__no { color: var(--texto); } /* Acordeón. Se despliega EN SITIO: el modal de antes bloqueaba el scroll, no se podía leer dos respuestas a la vez, no se podía enlazar a una y el buscador del navegador no la encontraba. */ .mr-preguntas { display: grid; gap: var(--e1); } .mr-pregunta { border: 1px solid var(--borde); border-radius: var(--r-md); background: var(--blanco); overflow: hidden; } .mr-pregunta__boton { display: flex; align-items: center; justify-content: space-between; gap: var(--e2); width: 100%; min-height: 56px; padding: var(--e2) var(--e3); background: none; border: 0; cursor: pointer; text-align: left; font-family: var(--fuente-texto); font-size: var(--t-base); font-weight: var(--peso-fuerte); color: var(--texto); line-height: 1.35; } .mr-pregunta__boton:hover { background: var(--crema-suave); } .mr-pregunta__mas { position: relative; flex: 0 0 18px; width: 18px; height: 18px; } .mr-pregunta__mas::before, .mr-pregunta__mas::after { content: ""; position: absolute; inset-block-start: 50%; inset-inline-start: 0; width: 18px; height: 2px; background: var(--oro-texto); border-radius: 2px; transition: transform var(--t-medio) var(--curva); } .mr-pregunta__mas::after { transform: rotate(90deg); } .mr-pregunta__boton[aria-expanded="true"] .mr-pregunta__mas::after { transform: rotate(0deg); } .mr-pregunta__cuerpo { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--t-medio) var(--curva); } .mr-pregunta__cuerpo > div { overflow: hidden; } .mr-pregunta[data-abierta="si"] .mr-pregunta__cuerpo { grid-template-rows: 1fr; } .mr-pregunta__cuerpo p { padding: 0 var(--e3) var(--e3); color: var(--texto-suave); max-width: none; } .mr-pregunta__cuerpo p:first-child { padding-top: 0; } @media (prefers-reduced-motion: reduce) { .mr-pregunta__cuerpo { transition: none; } } /* ========================================================================== Opiniones ========================================================================== */ .mr-ops { position: relative; } .mr-ops__insignia { display: inline-flex; align-items: center; gap: var(--e1); margin-bottom: var(--e3); padding: 10px var(--e2); background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--r-pil); box-shadow: var(--s-1); font-size: var(--t-sm); text-decoration: none; color: var(--texto); } .mr-ops__nota { font-family: var(--fuente-titulo); font-size: var(--t-md); font-weight: var(--peso-titulo); } .mr-ops__carril { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, 1fr); gap: var(--e3); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--e2); scrollbar-width: thin; } .mr-ops__carril > * { scroll-snap-align: start; } .mr-op { background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--r-md); padding: var(--e3); } .mr-op__quien { display: flex; align-items: center; gap: 10px; margin-bottom: var(--e1); } /* Nombre ARRIBA y estrellas DEBAJO, siempre. Iban en línea y un nombre largo ("Guillermo Correa Bernardino") empujaba las estrellas a la línea de abajo mientras los cortos las llevaban al lado: dos cabeceras distintas en la misma fila de tarjetas (medido 2026-09-27, el texto de la reseña arrancaba a 71 o a 88 px según la tarjeta). */ .mr-op__quien > span:not(.mr-op__ini) { display: grid; gap: 2px; line-height: 1.3; } .mr-op__ini { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex: 0 0 38px; border-radius: var(--r-pil); background: var(--crema); color: var(--oro-texto); font-weight: var(--peso-fuerte); font-size: var(--t-sm); } .mr-op__nombre { font-weight: var(--peso-fuerte); font-size: var(--t-sm); } .mr-op__estrellas { color: var(--oro-oscuro); font-size: var(--t-sm); letter-spacing: .08em; } .mr-op p { font-size: var(--t-sm); color: var(--texto-suave); margin: 0; } .mr-ops__flechas { display: flex; gap: var(--e1); margin-top: var(--e2); } .mr-ops__flecha { width: 44px; height: 44px; border-radius: var(--r-pil); border: 1px solid var(--borde-fuerte); background: var(--blanco); color: var(--texto); cursor: pointer; font-size: var(--t-md); line-height: 1; transition: border-color var(--t-rapido) var(--curva), background-color var(--t-rapido) var(--curva); } .mr-ops__flecha:hover { border-color: var(--tinta); background: var(--crema-suave); } /* ========================================================================== Mapa, pie y bloque final ========================================================================== */ /* El mapa se ve SIN consentimiento y sin fachada: directiva del operador del 2026-08-22 para toda la flota. */ .mr-mapa { border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--borde); box-shadow: var(--s-2); } .mr-mapa iframe { display: block; width: 100%; height: 340px; border: 0; } .mr-datos { list-style: none; margin: 0; padding: 0; } .mr-datos li { display: flex; align-items: flex-start; gap: var(--e2); margin-bottom: var(--e2); } .mr-datos svg { flex: 0 0 20px; width: 20px; height: 20px; color: var(--oro-texto); margin-top: 3px; } .mr-pie { background: var(--tinta); color: var(--texto-sobre-oscuro); padding-block: var(--e6) var(--e4); } /* Los enlaces del pie median 19 px de alto, que es el alto de su línea de texto, y el mínimo que se puede pulsar con seguridad son 24. Medido por `_zona_pulsable_820.mjs`: 119 objetivos por debajo del mínimo en 9 páginas, y casi todos aquí. No son enlaces dentro de un párrafo (esos tienen excepción): son la navegación del pie, y en el móvil se pulsan con el pulgar. `inline-block` más relleno los deja en 27 px sin mover el diseño, porque el hueco entre líneas ya existía como margen. */ .mr-pie a { color: var(--texto-sobre-oscuro); text-decoration: none; font-size: var(--t-sm); display: inline-block; padding-block: 4px; } .mr-pie a:hover { color: var(--oro-claro); text-decoration: underline; } /* Una sola declaración para las tres anchuras: repeat con auto-fit evita tener que definir el mismo selector tres veces, que es la regla 2 de esta hoja. */ .mr-pie__rejilla { display: grid; gap: var(--e4); grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); } .mr-pie h2, .mr-pie h3 { font-size: var(--t-sm); text-transform: uppercase; letter-spacing: .1em; color: var(--blanco); margin-bottom: var(--e2); font-family: var(--fuente-texto); font-weight: var(--peso-fuerte); } .mr-pie ul { list-style: none; margin: 0; padding: 0; } /* La dirección y el horario van como texto suelto en su `li` y heredaban los 17 px del cuerpo, mientras el teléfono y el correo de encima, que son enlaces, iban a 15: medido 15,15,17,17 en la misma columna. Mismo cuerpo para todos, y el mismo relleno que da el enlace para que el ritmo entre líneas no cambie a mitad de la lista. */ .mr-pie li { margin-bottom: 2px; font-size: var(--t-sm); } .mr-pie li:not(:has(> a)) { padding-block: 4px; } .mr-pie p { color: rgba(242,238,230,.72); font-size: var(--t-sm); } .mr-pie__legal { margin-top: var(--e5); padding-top: var(--e3); border-top: 1px solid rgba(255,255,255,.12); display: flex; flex-wrap: wrap; gap: var(--e2) var(--e3); align-items: center; justify-content: space-between; font-size: var(--t-xs); color: rgba(242,238,230,.6); } /* ========================================================================== Entrada por desplazamiento El rescate va por CERCANÍA y no por tiempo: un rescate ciego a los dos segundos revela la página entera y la animación se gasta fuera de pantalla, que es lo que el operador vio como bloques apareciendo de golpe. ========================================================================== */ @media (prefers-reduced-motion: no-preference) { .mr-js .mr-entra { opacity: 0; transform: translateY(22px); transition: opacity var(--t-lento) var(--curva), transform var(--t-lento) var(--curva); } .mr-js .mr-entra[data-visible="si"] { opacity: 1; transform: none; } .mr-js .mr-entra--d1 { transition-delay: 60ms; } .mr-js .mr-entra--d2 { transition-delay: 120ms; } .mr-js .mr-entra--d3 { transition-delay: 180ms; } .mr-js .mr-entra--d4 { transition-delay: 240ms; } } /* Sin JavaScript no puede quedar nada invisible: la clase que oculta la pone el propio JS al arrancar, así que si no llega, la página se ve entera. */ /* ========================================================================== Utilidades ========================================================================== */ .mr-centrado { text-align: center; } .mr-medida { max-width: var(--ancho-texto); } .mr-ancho-medio { max-width: 52rem; } .mr-sin-margen { margin: 0; } .mr-mt-3 { margin-top: var(--e3); } .mr-mt-4 { margin-top: var(--e4); } .mr-mb-3 { margin-bottom: var(--e3); } .mr-nota { font-size: var(--t-xs); color: var(--texto-tenue); } /* Un pie de foto se lee igual en toda la web: los que llevan `mr-nota` salían a 13 px en gris claro y los de las bandas a 15 px en gris medio, dos estilos en la misma página (medido el 2026-09-28 en /alquilar-mi-piso-zaragoza: 5 frente a 2). */ figcaption.mr-nota { font-size: var(--t-sm); color: var(--texto-suave); line-height: 1.5; } /* `balance` porque a 390 px el rótulo del héroe dejaba "ZARAGOZA" sola en su línea (302 y 86 px de ancho medidos en /gestion-de-alquileres-zaragoza). */ .mr-eyebrow { display: inline-block; margin-bottom: var(--e1); font-size: var(--t-xs); font-weight: var(--peso-fuerte); letter-spacing: .12em; text-transform: uppercase; color: var(--oro-texto); text-wrap: balance; } /* Sobre negro, el oro de texto (#7a6022) da 3,32 medido en "QUIÉNES SOMOS" de la portada: ese tono existe para ir sobre CLARO. Sobre oscuro va el oro claro, el mismo del titular. */ .mr-seccion--oscura .mr-eyebrow { color: var(--oro-claro); } /* Una foto vertical de 1024x1536 junto a un texto corto deja un hueco grande debajo del texto. Se le acota el alto y se recorta por el centro, que en esta foto es donde estan las dos caras. */ .mr-foto-alta { width: 100%; max-height: 32rem; object-fit: cover; object-position: 50% 30%; border-radius: var(--r-lg); } /* Y en escritorio la foto toma el alto de la FILA, entre 340 y 460 px, en vez de su propio alto: con el techo de 32rem medía 512 junto a un texto de 304 en las cinco verticales, o sea 104 px de blanco arriba y otros tantos abajo (medido el 2026-09-28). La imagen va absoluta dentro de su figura para no aportar su alto a la fila; el suelo lo pone la figura. */ @media (min-width: 960px) { .mr-rejilla--2 > figure:has(.mr-foto-alta) { align-self: stretch; position: relative; min-height: var(--foto-fila-min); max-height: var(--foto-fila-max); } .mr-rejilla--2 > figure:has(.mr-foto-alta) .mr-foto-alta { position: absolute; inset: 0; height: 100%; max-height: none; } } /* ========================================================================== Fraunces, la letra de los titulares Va declarada AQUI y no en fonts.css a proposito: fonts.css lo cargan las 42 paginas y solo la portada usa esta letra todavia, asi que tocarlo obligaria a subir el `?v=` de las 42. Un navegador no descarga una fuente que no usa, pero la declaracion tampoco pinta nada en las otras paginas. Es variable (un solo fichero para todos los pesos) y pesa 67 KB. El cambio completo de hoja ahorra 216 KB (253.909 -> 37.191), asi que el balance sigue siendo muy favorable. `swap` para que el titular se vea desde el primer pintado con la de respaldo y no haya texto invisible. ========================================================================== */ @font-face { font-family: Fraunces; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/fonts/fraunces/fraunces-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* La eleccion de canal vuelve al formulario: la portada anterior la tenia y quitarla dejaba sin camino a quien no usa WhatsApp. Es un radio de verdad (teclado y lector de pantalla), vestido como las demas pildoras. */ .mr-opcion--radio { display: inline-flex; align-items: center; gap: 8px; padding-block: 10px; height: auto; } /* `min-height: 0` no sobra: la regla de los campos de texto declara `min-height: 48px` con la misma especificidad, y un `height: 18px` NO puede con un `min-height` mayor. Sin esto el radio se pintaba como un circulo de 44 px y empujaba fuera su propia etiqueta. */ .mr-opcion--radio input { accent-color: var(--oro-oscuro); width: 18px; height: 18px; min-height: 0; flex: 0 0 18px; margin: 0; } .mr-opcion--radio:has(input:checked) { background: var(--tinta); border-color: var(--tinta); color: var(--blanco); } .mr-opcion--radio:has(input:focus-visible) { box-shadow: var(--s-foco); } /* ========================================================================== Migas de pan Van VISIBLES. Ocho paginas indexables emiten `BreadcrumbList` en el marcado y no las ensenan, que es coherencia y navegacion, no una penalizacion: Google ya las aprueba con PASS sin verlas. Se ponen porque el visitante que llega de una busqueda necesita saber donde esta. ========================================================================== */ /* Las migas van antes del heroe, y el heroe es quien compensa la cabecera fija con su propio relleno. Sin esta compensacion las migas quedan DEBAJO de la cabecera y no se ven, que es el mismo defecto que vienen a resolver. */ .mr-migas { padding-block: calc(var(--alto-cabecera) + var(--e3)) 0; } .mr-migas + .mr-heroe { padding-block-start: var(--e4); } .mr-migas ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e1); list-style: none; margin: 0; padding: 0; font-size: var(--t-xs); color: var(--texto-tenue); } .mr-migas li { margin: 0; display: inline-flex; align-items: center; gap: var(--e1); } .mr-migas li + li::before { content: "/"; color: var(--borde-fuerte); } /* 21 px de alto medidos, y el minimo que se puede pulsar con seguridad son 24. Las migas son navegacion, no texto corrido, asi que no les vale la excepcion de los enlaces dentro de un parrafo. */ .mr-migas a { color: var(--texto-suave); text-decoration: none; display: inline-block; padding-block: 3px; } .mr-migas a:hover { color: var(--oro-texto); text-decoration: underline; } .mr-migas [aria-current] { color: var(--texto); } /* ========================================================================== Páginas legales El cuerpo venía con estilos en línea de la web anterior: 820 px centrados en una caja de 1.064, así que empezaba en x=310 con el titular en x=188; 14 y 13 px mezclados en el bloque del titular, y listas de 802 px junto a párrafos de 601, pegadas al párrafo siguiente (medido el 2026-09-28). Ahora el cuerpo sale del borde del titular, un solo cuerpo de letra, y listas y párrafos a la misma medida. ========================================================================== */ .mr-legal { max-width: var(--ancho-texto); font-size: var(--t-sm); color: var(--texto-suave); } .mr-legal h2 { font-size: var(--t-md); color: var(--texto); margin: var(--e4) 0 var(--e2); } .mr-legal p { max-width: none; } .mr-legal ul { margin-bottom: var(--e2); } .mr-legal__vuelta { margin-top: var(--e4); } /* ========================================================================== Panel de reparto (cuando el navegador bloquea la ventana de WhatsApp) Lo pinta `rescate()` de mr-v2.js. No es decoracion: es el unico momento en que este formulario puede perder un contacto entero y sin sintoma, asi que tiene que leerse como un aviso y no como una nota al pie. ========================================================================== */ /* Los tokens eran `--radio-2`, `--tipo-titular` y `--radio-1`, que esta hoja no define (son de la anterior): la caja salía con esquinas rectas y el titular en la letra del cuerpo, sin ningún error. Medido el 2026-09-27: son los tres únicos `var()` sin definir de la hoja. */ .mr-handoff { border: 1px solid var(--oro); border-radius: var(--r-md); background: var(--crema-suave); padding: var(--e4); } .mr-handoff-t { font-family: var(--fuente-titulo); font-size: var(--t-lg); margin: 0 0 var(--e2); } .mr-handoff-s { margin: 0; } .mr-handoff .mr-boton { width: 100%; } .mr-handoff textarea { font-size: var(--t-sm); border: 1px solid var(--borde-fuerte); border-radius: var(--r-sm); padding: var(--e3); background: var(--blanco); color: var(--texto); } /* ========================================================================== Tabla comparativa en movil: una tarjeta por fila Hasta el 2026-09-28 la tabla se arrastraba de lado con un aviso "Desliza..." y un difuminado blanco: medido a 390 px en la portada y en tres verticales, la columna "Con nosotros" quedaba ENTERA fuera de la pantalla (tabla de 540 px en una caja de 348), el aviso iba pegado al borde y el difuminado manchaba la cabecera negra. Ahora cada fila es una tarjeta: el concepto arriba y debajo cada opción con su nombre, que viene de `data-etiqueta` en el html (se lee aunque este fichero o el JS no lleguen), y la nuestra resaltada con el oro. ========================================================================== */ @media (max-width: 639px) { .mr-tabla-caja { overflow: visible; border: 0; border-radius: 0; } .mr-tabla, .mr-tabla tbody, .mr-tabla tr, .mr-tabla th, .mr-tabla td { display: block; } .mr-tabla { background: none; } .mr-tabla thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .mr-tabla tbody tr { margin-bottom: var(--e2); border: 1px solid var(--borde); border-radius: var(--r-md); overflow: hidden; background: var(--blanco); } .mr-tabla tbody th[scope="row"] { padding: var(--e1) var(--e2); background: var(--tinta); color: var(--blanco); font-weight: var(--peso-fuerte); border-bottom: 0; } .mr-tabla td { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--e2); padding: var(--e1) var(--e2); } .mr-tabla td::before { content: attr(data-etiqueta); color: var(--texto-suave); font-weight: var(--peso-normal); } .mr-tabla td:last-child { border-inline-start: 3px solid var(--oro); border-bottom: 0; } .mr-tabla td:last-child::before { color: var(--oro-texto); font-weight: var(--peso-fuerte); } .mr-tabla tbody tr:last-child td { border-bottom: 1px solid var(--borde); } .mr-tabla tbody tr:last-child td:last-child { border-bottom: 0; } } /* ========================================================================== Índice del blog: tarjetas, filtros y su estado Lo que había antes eran 28 títulos seguidos en una página de 85 enlaces, sin fecha, sin tema y sin forma de filtrar. Aquí cada guía es una tarjeta con su foto, su tema, su fecha y su tiempo de lectura, y los temas filtran sin recargar. Si el JS no llega, se ven las 28, que es lo que había. ========================================================================== */ .mr-cab--izq { text-align: start; margin-inline: 0; } .mr-botonera--centro { justify-content: center; } /* Una sola fila siempre. Hasta 1199 px es una tira que se desliza con el dedo, pegada a los dos bordes: seis píldoras ocupaban cinco líneas antes del primer artículo en el móvil, y dos en la tableta. Desde 1200 px la caja mide siempre 1.064 px y caben en una fila (más abajo). */ .mr-filtros { display: flex; flex-wrap: nowrap; gap: var(--e1); margin-block: var(--e4) var(--e3); overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--aire-lateral) * -1); padding-inline: var(--aire-lateral); } .mr-filtros::-webkit-scrollbar { display: none; } .mr-filtro { font: inherit; font-size: var(--t-sm); font-weight: var(--peso-medio); display: inline-flex; align-items: center; gap: var(--e1); /* Relleno de 16 y no de 24: con 24 las seis píldoras sumaban más que los 1.160 px de la caja y "Gestión y rentabilidad" caía SOLA a una segunda línea (2026-09-27). */ min-height: 44px; padding: 0 var(--e2); flex: 0 0 auto; border: 1px solid var(--borde-fuerte); border-radius: var(--r-pil); background: var(--blanco); color: var(--texto-suave); cursor: pointer; transition: border-color var(--t-rapido) var(--curva), background var(--t-rapido) var(--curva), color var(--t-rapido) var(--curva); } .mr-filtro:hover { border-color: var(--tinta); color: var(--texto); } .mr-filtro[aria-pressed="true"] { background: var(--tinta); border-color: var(--tinta); color: var(--blanco); } .mr-filtro__n { font-size: var(--t-xs); opacity: .65; } .mr-filtro[aria-pressed="true"] .mr-filtro__n { opacity: .8; } .mr-filtros__estado { margin-block: 0 var(--e3); } .mr-rejilla-art { display: grid; gap: var(--e4); grid-template-columns: 1fr; } .mr-art { display: flex; flex-direction: column; border: 1px solid var(--borde); border-radius: var(--r-lg); background: var(--blanco); overflow: hidden; transition: transform var(--t-medio) var(--curva), box-shadow var(--t-medio) var(--curva), border-color var(--t-medio) var(--curva); } .mr-art:hover { transform: translateY(-4px); box-shadow: var(--s-3); border-color: var(--borde-fuerte); } .mr-art__foto { display: block; overflow: hidden; background: var(--crema-claro); } .mr-art__foto img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform var(--t-lento) var(--curva); } .mr-art:hover .mr-art__foto img { transform: scale(1.03); } .mr-art__cuerpo { padding: var(--e3); display: flex; flex-direction: column; gap: var(--e1); flex: 1; } .mr-art__cat { font-size: var(--t-xs); font-weight: var(--peso-fuerte); letter-spacing: .06em; text-transform: uppercase; color: var(--oro-texto); } .mr-art__t { font-size: var(--t-md); margin: 0; } .mr-art__t a { color: var(--texto); text-decoration: none; } .mr-art__t a:hover { color: var(--oro-texto); text-decoration: underline; } .mr-art__d { font-size: var(--t-sm); color: var(--texto-suave); margin: 0; max-width: none; } /* El pie se pega abajo para que todas las tarjetas de una fila terminen igual: la simetría de la rejilla es regla de la flota y sin `margin-top:auto` bailan según el largo del texto. */ .mr-art__pie { font-size: var(--t-xs); color: var(--texto-tenue); margin: var(--e2) 0 0 0; margin-top: auto; } @media (min-width: 640px) { .mr-rejilla-art { grid-template-columns: repeat(2, 1fr); } } /* CUATRO columnas, no tres, y es una cuenta, no un gusto. Esta rejilla la usan dos sitios y con tres columnas los dos quedaban cojos: las 28 guías llevan 4 tarjetas en "Más guías del blog" (3+1, una sola en su fila, que es lo que el juez con visión marcó como alta el 2026-09-23 y la medición confirmó en las 28) y el índice del blog lleva 32 (10 filas y 2 sueltas). Con cuatro salen 1 fila exacta y 8 filas exactas. En la franja de tablet van a 2, que también cuadra con 4 y con 32. */ @media (min-width: 960px) { .mr-rejilla-art { grid-template-columns: repeat(4, 1fr); } } @media (prefers-reduced-motion: reduce) { .mr-art, .mr-art__foto img { transition: none; } .mr-art:hover { transform: none; } .mr-art:hover .mr-art__foto img { transform: none; } } /* ========================================================================== Señal de error del formulario La pinta `marcaErrores()` de mr-v2.js. Es roja de verdad y no solo un borde de color: el color por sí solo no vale como única señal, así que el mensaje va escrito debajo del campo y hay un resumen arriba que dice cuántos faltan. Antes no había NADA: `reportValidity()` enseña un globo del navegador que se va solo, no marca el campo y no deja rastro en el DOM. Medido: "el envío en vacío no produce NINGUNA señal". ========================================================================== */ .mr-campo input[aria-invalid="true"], .mr-campo textarea[aria-invalid="true"] { border-color: var(--error); background: var(--error-fondo); } .mr-campo input[aria-invalid="true"]:focus-visible, .mr-campo textarea[aria-invalid="true"]:focus-visible { outline-color: var(--error); } .mr-error { display: flex; align-items: flex-start; gap: var(--e1); font-size: var(--t-sm); color: var(--error-texto); margin: var(--e1) 0 0; } .mr-error::before { content: "!"; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin-top: 2px; border-radius: 50%; background: var(--error-texto); color: var(--blanco); font-size: 12px; font-weight: var(--peso-titulo); line-height: 1; } .mr-error-resumen { font-size: var(--t-sm); font-weight: var(--peso-medio); color: var(--error-texto); background: var(--error-fondo); border: 1px solid var(--error); border-radius: var(--r-md); padding: var(--e2) var(--e3); margin: 0 0 var(--e3); } /* ========================================================================== El aviso de cookies, más compacto en el móvil Medido en lo servido a 390x844: ocupaba 175 px, el 21 % de la pantalla, y tapaba el botón "Escribir por WhatsApp" de /contacto, que es el botón principal de la página de contacto. Lo canta `banner_tapa.mjs`. No se toca `mr-consent.js`, ni su texto, ni sus botones, ni lo que hace: solo se aprieta su caja en pantallas pequeñas (menos relleno, línea más corta, botones en una fila). Se gana con especificidad, `body #mr-consent`, porque el aviso trae su propio `