/* ==========================================================================
   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;

  --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;
  --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); }
/* 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. */
@media (min-width: 960px) {
  .mr-rejilla--2:has(> figure),
  .mr-rejilla--2:has(> picture) { 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); }
.mr-media img {
  width: 100%; height: auto; max-height: clamp(180px, 24vh, 280px);
  object-fit: cover; border-radius: var(--r-lg); box-shadow: var(--s-2);
}
/* 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);
}
.mr-barra .mr-boton { width: 100%; justify-content: center; }

@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; }
.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%; }
}

/* 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; }
.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; }
/* La tabla no se comprime: en móvil, dejarla al ancho de la pantalla partía
   "La comisión de gestión" en cinco líneas y la columna que vende quedaba de
   dos palabras. Con ancho mínimo, la caja desplaza y las celdas se leen. */
.mr-tabla { width: 100%; min-width: 640px; 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); }
.mr-tabla__no { color: #8a2b26; }

/* 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); }
.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; }
.mr-pie li { margin-bottom: 2px; }
.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); }
.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); }

/* 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); }

/* ==========================================================================
   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); }


/* ==========================================================================
   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.
   ========================================================================== */
.mr-handoff { border: 1px solid var(--oro); border-radius: var(--radio-2);
              background: var(--crema-suave); padding: var(--e4); }
.mr-handoff-t { font-family: var(--tipo-titular); 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(--radio-1); padding: var(--e3);
                       background: var(--blanco); color: var(--texto); }


/* ==========================================================================
   Tabla comparativa en movil: que se vea que hay una tercera columna

   Medido por el juez con vision el 2026-09-23: a 390 px se veian 2 de 3
   columnas y la que quedaba fuera era "Renta garantizada con nosotros", o
   sea el argumento entero. La tabla ya se podia arrastrar; lo que faltaba
   era que se NOTARA.
   ========================================================================== */
@media (max-width: 700px) {
  .mr-tabla { min-width: 540px; }
  .mr-tabla th[scope="row"] { position: sticky; inset-inline-start: 0;
                              background: var(--blanco); z-index: 1; }
  .mr-tabla-caja { position: relative; }
  /* El difuminado dice "sigue habiendo tabla" sin ocupar sitio ni tapar texto. */
  .mr-tabla-caja::after {
    content: ""; position: absolute; inset-block: 0; inset-inline-end: 0; width: 34px;
    background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,.92));
    pointer-events: none;
  }
  .mr-tabla-caja::before {
    content: "Desliza para ver la comparación completa";
    display: block; font-size: var(--t-xs); color: var(--texto-tenue);
    margin-bottom: var(--e1);
  }
}

/* ==========================================================================
   Í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; }

.mr-filtros {
  display: flex; flex-wrap: wrap; gap: var(--e1);
  margin-block: var(--e4) var(--e3);
}
.mr-filtro {
  font: inherit; font-size: var(--t-sm); font-weight: var(--peso-medio);
  display: inline-flex; align-items: center; gap: var(--e1);
  min-height: 44px; padding: 0 var(--e3);
  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 `<style>` y esta hoja no usa `!important`.
   ========================================================================== */
@media (max-width: 700px) {
  body #mr-consent {
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    font-size: 12.5px;
    line-height: 1.42;
  }
  body #mr-consent p { margin: 0 0 8px; }
  body #mr-consent .mrc-btn {
    padding: 9px 12px;
    font-size: 12.5px;
    min-height: 40px;
  }
}

/* ==========================================================================
   Molde de artículo (guías del blog)

   Rejilla 72/28 en escritorio: el cuerpo lee a una medida cómoda y la lateral
   lleva la ficha de contacto, que es lo único que se vende dentro de la guía.
   En móvil se apila y la ficha baja al final, porque ahí compite con el texto.
   ========================================================================== */

/* Barra de progreso de lectura. Va arriba del todo y no ocupa altura de
   documento: en una guía de quince minutos, saber cuánto queda es la
   diferencia entre seguir y cerrar. */
.mr-progreso {
  position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 120;
  height: 3px; background: transparent; pointer-events: none;
}
.mr-progreso span {
  display: block; height: 100%; width: 0%;
  background: var(--oro);
  transition: width 90ms linear;
}
@media (prefers-reduced-motion: reduce) {
  .mr-progreso span { transition: none; }
}

.mr-post { padding-block: var(--e4) var(--ritmo-seccion); }

.mr-post__cabecera { max-width: 760px; margin-bottom: var(--e4); }
.mr-post__cabecera h1 { margin-block: var(--e2) var(--e3); }

/* La respuesta directa: más grande que el cuerpo porque es lo que contesta la
   pregunta con la que ha llegado el lector. */
.mr-post__entrada {
  font-size: var(--t-md); color: var(--texto); line-height: 1.55;
  max-width: none; margin-bottom: var(--e3);
}
.mr-post__entrada a { font-weight: var(--peso-medio); }

.mr-post__meta { font-size: var(--t-sm); color: var(--texto-tenue); margin: 0; max-width: none; }

.mr-post__portada { margin: 0 0 var(--e5); }
.mr-post__portada img {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-lg);
}
.mr-post__portada figcaption,
.mr-post__foto figcaption {
  font-size: var(--t-sm); color: var(--texto-tenue); margin-top: var(--e2);
}

.mr-post__rejilla { display: grid; gap: var(--e5); grid-template-columns: minmax(0, 1fr); }

.mr-post__cuerpo > h2 {
  margin-block: var(--e5) var(--e2);
  scroll-margin-top: calc(var(--alto-cabecera) + var(--e3));
}
.mr-post__cuerpo > h2:first-of-type { margin-block-start: var(--e4); }
.mr-post__cuerpo h3 {
  margin-block: var(--e4) var(--e2);
  scroll-margin-top: calc(var(--alto-cabecera) + var(--e3));
}
/* Medido a 1440 el 2026-09-23: el contenedor iba a 1160 y el cuerpo de lectura quedaba
   en 732 px con 280 px de ventana sin usar, que es la queja del operador ("el ancho de
   las paginas del blog... esta pequeno lo que es el contenido"). La pagina de guia
   estrena ancho propio: el resto de la web sigue en --ancho. El parrafo sube de 68ch a
   76ch, que sigue dentro de la horquilla de lectura comoda (65-75 es el ideal, 76 el
   borde) y evita dejar un canal blanco a la derecha del cuerpo ensanchado. */
.mr-post__cuerpo p { max-width: 76ch; }

/* Índice: desplegado siempre en escritorio, porque plegado nadie lo abre. */
.mr-post__indice {
  border: 1px solid var(--borde); border-left: 3px solid var(--oro);
  border-radius: var(--r-md); padding: var(--e3) var(--e3) var(--e3) var(--e4);
  margin-bottom: var(--e4); background: var(--crema-suave);
}
.mr-post__indice-t {
  font-family: var(--fuente-titulo); font-weight: var(--peso-titulo);
  font-size: var(--t-base); margin: 0 0 var(--e2);
}
.mr-post__indice ol { margin: 0; padding-left: 1.1em; font-size: var(--t-sm); }
.mr-post__indice li { margin-bottom: 6px; }
.mr-post__indice a { color: var(--texto-suave); text-decoration: none; }
.mr-post__indice a:hover { color: var(--oro-texto); text-decoration: underline; }
.mr-post__indice ol ol { margin-top: 6px; font-size: var(--t-xs); }

.mr-post__botones {
  display: flex; flex-wrap: wrap; gap: var(--e2);
  margin-block: var(--e4);
  padding-block: var(--e3); border-block: 1px solid var(--borde);
}

.mr-post__foto { margin: var(--e4) 0; }
.mr-post__foto img { width: 100%; border-radius: var(--r-md); }

/* Recuadro de aviso: para el dato que, si se pasa por alto, cuesta dinero. */
.mr-aviso {
  border: 1px solid var(--oro); border-radius: var(--r-md);
  background: var(--crema-claro); padding: var(--e3);
  margin-block: var(--e3);
}
.mr-aviso p { margin: 0; max-width: none; }

.mr-datos-lista { margin: var(--e3) 0; display: grid; gap: var(--e2); }
.mr-datos-lista > div {
  display: grid; gap: 2px;
  border-left: 3px solid var(--borde-fuerte); padding-left: var(--e2);
}
.mr-datos-lista dt { font-weight: var(--peso-fuerte); }
.mr-datos-lista dd { margin: 0; color: var(--texto-suave); }

/* La fuente primaria se ve. Es lo que separa una guía de una opinión, y en los
   temas legales y fiscales el operador no puede permitirse lo segundo. */
.mr-fuente {
  font-size: var(--t-sm); color: var(--texto-tenue);
  border-left: 2px solid var(--borde-fuerte); padding-left: var(--e2);
  margin-block: var(--e2) var(--e3);
}

.mr-post__lateral { align-self: start; }
.mr-post__ficha {
  border: 1px solid var(--borde-fuerte); border-radius: var(--r-lg);
  padding: var(--e3); background: var(--blanco); box-shadow: var(--s-2);
}
.mr-post__ficha-t {
  font-family: var(--fuente-titulo); font-weight: var(--peso-titulo);
  font-size: var(--t-md); margin: 0 0 var(--e2);
}
.mr-post__ficha p { font-size: var(--t-sm); color: var(--texto-suave); max-width: none; }
.mr-post__ficha p + .mr-boton { margin-top: var(--e3); }
.mr-post__ficha .mr-boton { width: 100%; justify-content: center; }
/* El número escrito bajo los dos botones de la ficha que acompaña la lectura: es el
   sitio que el operador señaló ("se puede poner en este menú sticky que pones"). */
.mr-post__ficha-tel { margin-top: var(--e2); font-size: var(--t-xs);
                      color: var(--texto-suave); text-align: center; }
.mr-post__ficha-tel .mr-tel { display: inline-flex; min-height: 32px; padding-inline: 4px; }

/* Zona pulsable de los enlaces que ocupan su propia línea. Medido a 820 px: veinte enlaces
   de 19 o 20 px de alto, o sea el alto de una línea de texto, cuando el mínimo de toque son
   24. Son enlaces que van SOLOS en su párrafo o en su `li` ("Conócenos un poco más", las
   guías de la portada, el correo del pie, "Volver a la página principal"): no son enlaces
   embebidos en prosa, que están exentos a propósito, sino objetivos de verdad que alguien
   pulsa con el dedo. Se les da relleno vertical, que crece la caja sin mover el texto ni
   separar la lista. No se usa un `::after` ampliando el área: la flota tiene medido que eso
   es invisible a `getBoundingClientRect`, así que arreglaría el dedo y no la medición, y la
   próxima corrida volvería a acusar lo mismo sin que nadie supiera si estaba hecho. */
p > a:only-child,
li > a:only-child,
dd > a:only-child,
/* El correo y el teléfono SIEMPRE son objetivo de toque, estén donde estén: en el pie
   viven dentro de un `<span>`, así que los selectores de arriba no los alcanzaban. */
a[href^="mailto:"],
/* `:not(.mr-tel)` porque el teléfono con icono de la cabecera ya llega a los 44 px por su
   cuenta Y necesita ser flex para centrar el icono con el número. Sin esta exclusión ganaba
   el `inline-block` de aquí (misma fuerza, y esta regla va después), los hijos volvían a
   alinearse por su base y el número quedaba 7 px por encima del botón de al lado, con el
   icono a 10. Lo trajo el operador con una captura el 2026-09-23. */
a[href^="tel:"]:not(.mr-tel),
/* Y el botón de vuelta de las páginas legales, que conserva la clase del marcado viejo. */
a.btn-ghost-light {
  display: inline-block;
  padding-block: 3px;
}

/* Techo de altura para la foto centrada del cuerpo. Un retrato 670x1006 se servía a 636x954
   en escritorio, o sea 1,06 pantallas: quien lee llega a la foto y pierde el hilo del texto
   hasta después de desplazar una pantalla entera. En móvil el mismo retrato ocupa 0,55, que
   sí está bien, así que el tope se pone en altura y no en ancho. Las apaisadas (800x600, que
   son la mayoría) quedan en 477 px y no las toca. */
.mr-post__cuerpo .mr-centro img {
  max-height: clamp(320px, 46vh, 560px);
  width: auto; margin-inline: auto;
}

/* Foto a la izquierda SIN tocar el orden de lectura. Regla 35 de la flota: dos secciones
   seguidas de texto y foto no pueden tener la foto del mismo lado, y en /alquilar-mi-piso
   "Cómo calculamos" y "Dos hermanos" la tenían las dos a la derecha (lo vio el juez con
   vista y lo confirmó la medición). Se resuelve con `order` y solo desde 960 px: en móvil
   las dos columnas se apilan en el orden del documento, que es titular, texto y después
   foto, o sea lo que hay que leer primero. Invertir el DOM habría arreglado el escritorio
   estropeando el móvil. */
@media (min-width: 960px) {
  .mr-rejilla--foto-izq > figure { order: -1; }
}

/* Guías relacionadas de la lateral. Son las que traía el artículo original en tarjetas con
   miniatura; aquí van como lista de texto porque la columna es de 260 px y la foto
   empujaría el botón de contacto fuera de la pantalla. */
.mr-post__relacionadas { margin-top: var(--e4); }
.mr-post__relacionadas ul { list-style: none; margin: 0; padding: 0; }
.mr-post__relacionadas li + li { margin-top: var(--e2); padding-top: var(--e2);
                                 border-top: 1px solid var(--borde); }
/* Mínimo de toque: un enlace de UNA línea medía 22 px de alto y son enlaces de verdad,
   que alguien pulsa con el pulgar. Con `flex` el título de dos o tres líneas sigue
   centrado y el de una crece hasta los 44 px sin separar la lista. */
.mr-post__relacionadas a {
  display: flex; align-items: center; min-height: 44px;
  font-size: var(--t-sm); line-height: 1.45;
  color: var(--texto); text-decoration: none;
}
.mr-post__relacionadas a:hover,
.mr-post__relacionadas a:focus-visible { color: var(--oro-texto); text-decoration: underline; }

@media (min-width: 960px) {
  .mr-post__rejilla { grid-template-columns: minmax(0, 72fr) minmax(280px, 28fr); }
  /* La ficha acompaña la lectura en vez de quedarse arriba sola. */
  .mr-post__lateral { position: sticky; top: calc(var(--alto-cabecera) + var(--e3)); }
}

/* La guía va más ancha que el resto de la web: es la única página cuyo contenido es
   texto largo, y a 1440 el cuerpo se quedaba en 732 px. Solo se ensancha donde hay
   sitio de sobra, así que por debajo de 1380 px de ventana todo sigue igual. */
@media (min-width: 1380px) {
  .mr-post > .mr-contenedor { max-width: 1320px; }
}

/* ==========================================================================
   El héroe se encoge mientras el aviso de cookies está puesto

   Medido a 390x844 en /contacto: el aviso ocupa 151 px pegado abajo y el botón
   principal del héroe cae a 787, o sea justo debajo. Es un aviso temporal que
   se quita en un toque, pero mientras está tapa el botón que esa página existe
   para que se pulse.

   No se puede resolver reservando espacio (el aviso va fijo y tapa la franja
   sea cual sea el contenido), así que lo que se hace es SUBIR el contenido:
   mientras el aviso está, la foto del héroe pasa de 4/3 a 16/9 y el aire de
   arriba se recorta. Son unos 95 px, que es lo que hace falta.

   `mrc-banner-puesto` lo pone y lo quita `mr-consent.js` (líneas 81 y 69), así
   que en cuanto el visitante contesta, el héroe vuelve a su tamaño.
   ========================================================================== */
@media (max-width: 959px) {
  /* Menos aire arriba mientras el aviso está: en `/gestion-de-alquileres-zaragoza` faltaban
     48 px justos (el botón de WhatsApp caía en 682 y el aviso empieza en 687, o sea que
     asomaba 5 px de 48). Salen de aquí y del aire entre las promesas y la botonera, sin
     quitar ni un elemento más.

     PERO NUNCA POR DEBAJO DEL ALTO DE LA CABECERA, que es fija. Lo puse en 0 y el héroe se
     metió debajo: el H1 empezaba en 33 px con la cabecera acabando en 69, o sea que los
     primeros 36 px del titular quedaban tapados y en el móvil se perdía la primera línea
     entera, "Tu piso alquilado,". Lo vio el juez con vista y lo confirmó la medición; la
     sonda del aviso no podía verlo porque mira lo que tapa el banner ABAJO, no la cabecera
     ARRIBA. Recortar aire para ganar sitio no puede empujar el contenido fuera de la vista
     por el otro extremo. */
  body.mrc-banner-puesto .mr-heroe { padding-block-start: var(--alto-cabecera); }
  /* Salvo cuando delante van las MIGAS, que es el caso de las seis verticales: ahí el héroe
     ya no toca la cabecera fija, así que reservar otra vez su alto son 68 px de nadie. Medido
     tras ponerlo: 97 px entre la miga y el titular en `/alquilar-mi-piso-zaragoza`, que el
     juez describió como "un hueco blanco muy grande sin propósito", y lo era. */
  body.mrc-banner-puesto .mr-migas + .mr-heroe { padding-block-start: var(--e3); }
  body.mrc-banner-puesto .mr-heroe__hechos { margin-block: var(--e2); gap: var(--e1); }
  body.mrc-banner-puesto .mr-heroe__pie { display: none; }
  /* Y la FOTO fuera mientras el aviso está. Los 95 px que ganaba el recorte a 16/9 no
     llegaban: medido el 2026-09-23, el aviso ocupa de 687 a 844 y el botón "Calcular lo que
     cobraría" caía en 794-842, o sea entero debajo. Hacían falta 155 px más y la foto en
     16/9 son 219. Es temporal y reversible en un toque: `mrc-banner-puesto` lo quita
     `mr-consent.js` en cuanto el visitante contesta, y la foto vuelve. Entre enseñar la foto
     y dejar accesible el botón que paga esta web, el botón. */
  body.mrc-banner-puesto .mr-heroe__foto { display: none; }
  /* Y en las verticales tampoco basta: sin foto, el héroe sigue midiendo 693 px de texto
     (H1 161 + entrada 186 + cuatro hechos 121 + botonera 112) y los botones caían en
     724-836, con el aviso empezando en 687. El párrafo de entrada es lo único que se puede
     replegar sin dejar la pantalla muda: quedan el titular, las cuatro promesas y los dos
     botones, que es lo que hay que poder leer y pulsar. Vuelve entero al contestar. */
  body.mrc-banner-puesto .mr-heroe__entrada { display: none; }
  /* Y los BOTONES suben por delante de las promesas mientras el aviso está. Sin esto, al
     devolverle al héroe los 68 px que necesita para no meterse bajo la cabecera, el botón de
     WhatsApp de `/gestion-de-alquileres-zaragoza` volvía a caer en la franja del aviso. No
     se esconde nada más: se reordena. Las cuatro promesas siguen ahí, justo debajo, y todo
     vuelve a su sitio en cuanto el visitante contesta. */
  body.mrc-banner-puesto .mr-heroe__intro { display: flex; flex-direction: column; }
  body.mrc-banner-puesto .mr-heroe__intro > .mr-botonera { order: 1; margin-bottom: var(--e3); }
  body.mrc-banner-puesto .mr-heroe__intro > .mr-heroe__hechos { order: 2; }
}

/* ==========================================================================
   Compatibilidad: el cuerpo heredado de las 28 guías antiguas

   Esas guías se escribieron a mano con el marcado de la hoja anterior, y al
   pasarlas al sistema v2 su texto se copia TAL CUAL: 70.505 palabras que no se
   pueden regenerar y que nadie va a reescribir. Lo que sí cambia es lo que las
   envuelve.

   Aquí viven las trece clases que su cuerpo usa y que la hoja v2 no tenía.
   Medidas una a una sobre los 28 ficheros ya migrados, no supuestas: sin estas
   reglas, los 112 botones del cuerpo se ven como enlaces de texto sin caja
   (medido: fondo transparente, 0 de borde, 0 de relleno, 30 px de alto).

   Se quedarán mientras queden guías con ese cuerpo. No se borran "por limpiar":
   el día que no aparezcan en ningún fichero, el censo lo dirá.
   ========================================================================== */

/* --- Botones dentro del texto ------------------------------------------- */
.mr-post-btn {
  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);
  background: var(--oro); color: var(--tinta);
  font-weight: var(--peso-fuerte); font-size: var(--t-sm);
  text-decoration: none; text-align: center;
  transition: background var(--t-rapido) var(--curva), color var(--t-rapido) var(--curva);
}
.mr-post-btn:hover { background: var(--oro-oscuro); color: var(--blanco); }
.mr-post-btn-sec {
  background: transparent; color: var(--texto);
  border-color: var(--borde-fuerte);
}
.mr-post-btn-sec:hover { background: var(--crema-suave); color: var(--tinta); border-color: var(--tinta); }

.mr-cta-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 var(--e4);
  border-radius: var(--r-pil); background: var(--oro); color: var(--tinta);
  font-weight: var(--peso-fuerte); text-decoration: none;
}
.mr-cta-btn:hover { background: var(--oro-oscuro); color: var(--blanco); }

/* `btn-gold` es la clase que el cuerpo heredado usa para el boton del bloque negro de
   llamada a la accion, y NO tenia ninguna regla en esta hoja: en las 21 guias que lo
   llevan se servia como un enlace de texto de 20 px de alto en #7a6022 sobre #0a0a0a
   (2,6:1 en reposo) que al pasar el raton viraba a #0a0a0a, o sea 1,00 e invisible.
   Lo trajo el operador con una captura el 2026-09-23. Aqui vuelve a ser un boton, y su
   hover ACLARA en vez de oscurecer, porque el fondo sobre el que vive es negro. */
a.btn-gold {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 var(--e4);
  border-radius: var(--r-pil); background: var(--oro); color: var(--tinta);
  font-weight: var(--peso-fuerte); font-size: var(--t-sm);
  text-decoration: none; text-align: center;
  transition: background var(--t-rapido) var(--curva), transform var(--t-rapido) var(--curva);
}
a.btn-gold:hover { background: var(--oro-claro); color: var(--tinta); transform: translateY(-2px); }

/* Cualquier caja que se pinte oscura desde el marcado heredado le dice a sus enlaces
   hacia donde pueden virar. Sin esto heredan el hover general, que es tinta. */
[style*="background:#0a0a0a"],
[style*="background: #0a0a0a"] { --enlace-encima: var(--oro-claro); }

.mr-cta {
  border: 1px solid var(--borde-fuerte); border-radius: var(--r-lg);
  background: var(--crema-suave); padding: var(--e4);
  margin-block: var(--e4);
}
.mr-cta h2, .mr-cta h3 { margin-top: 0; }

/* --- La entradilla: la respuesta directa del artículo -------------------- */
.mr-post-lead {
  font-size: var(--t-md); line-height: 1.55; color: var(--texto);
  margin-bottom: var(--e4); max-width: none;
}

/* --- Párrafo que acompaña a una foto flotada ----------------------------- */
/* `mr-par` es el texto que va al lado de la figura, y `mr-par-der` la variante
   con la foto a la derecha. En móvil no flota nada: a esos anchos, un texto de
   cuatro palabras por línea no se lee. */
@media (min-width: 760px) {
  .mr-par { overflow: hidden; }
  .mr-par > figure, .mr-par > .mr-post__foto {
    float: left; width: 46%; margin: 0 var(--e3) var(--e2) 0;
  }
  .mr-par-der > figure, .mr-par-der > .mr-post__foto {
    float: right; margin: 0 0 var(--e2) var(--e3);
  }
}
.mr-par > figure img, .mr-par > .mr-post__foto img { border-radius: var(--r-md); }

/* --- Bloques de preguntas dentro del cuerpo ------------------------------ */
.mr-faq { margin-block: var(--e4); }
.mr-faq-item {
  border: 1px solid var(--borde); border-radius: var(--r-md);
  padding: var(--e3); margin-bottom: var(--e2);
  background: var(--blanco);
}
.mr-faq-item h3, .mr-faq-item h4 { margin-top: 0; font-size: var(--t-base); }
.mr-faq-item p:last-child { margin-bottom: 0; }
.mr-guia-faq { margin-block: var(--e4); }

/* --- Sueltas ------------------------------------------------------------- */
.mr-centro { text-align: center; }
.mr-centro p { margin-inline: auto; }

.mr-inbound-hab {
  border-left: 3px solid var(--oro); padding-left: var(--e3);
  margin-block: var(--e3);
}

.mr-home-compare { width: 100%; border-collapse: collapse; margin-block: var(--e3); }
.mr-home-compare th, .mr-home-compare td {
  border-bottom: 1px solid var(--borde); padding: var(--e2); text-align: start;
}
.mr-home-compare th { font-weight: var(--peso-fuerte); background: var(--crema-suave); }


/* El cuerpo heredado puede traer tablas anchas. Que se arrastren DENTRO de su caja, no
   que arrastren la página: medido a 390 px, un desborde de 85 px movía el documento
   entero de lado, que es de las cosas que más cantan en un móvil. */
.mr-post__cuerpo { min-width: 0; }
/* Las figuras del cuerpo heredado traen un ancho FIJO en el marcado (medido: 400 px) que
   en una columna de 295 se sale de la pagina. `max-width` lo limita sin tocar el html y
   sin romper el flotado de escritorio, donde 400 si cabe. */
.mr-post__cuerpo figure,
.mr-post__cuerpo picture,
.mr-post__cuerpo .mr-post__foto { max-width: 100%; }
.mr-post__cuerpo figure img { width: 100%; height: auto; }
.mr-post__cuerpo table { display: block; width: 100%; overflow-x: auto; }
.mr-post__cuerpo pre, .mr-post__cuerpo code { overflow-x: auto; }
.mr-post__indice { overflow-wrap: anywhere; }