/* ==========================================================================
   mr-v3.css: sistema de diseño de mrrentaygestion.com
   Escrito el 2026-10-18 por orden del operador (id=3877): la web cambia entera a la estética
   del tema VillaHub. Sustituye a mr-v2.css y a fonts.css.

   DE DÓNDE SALE CADA VALOR. De la demo del tema, medido con getComputedStyle el 2026-10-18:
   cuerpo Raleway 16/30,4 en #696969, titulares Cabin 600 en #080808, crema #f7f2ed, negros
   #080808, #151515 y #252525, dorado #b79b6f, radios 30 (cabecera, héroe, franja del pie),
   14 a 20 (fotos y tarjetas) y 5 (campos), contenedor de 1.340 px.

   CONTRASTE. El dorado del tema (#b79b6f) da 2,65 con blanco: no sirve ni para letra sobre
   claro ni para fondo de botón con letra blanca. Se derivan dos tonos del mismo matiz:
   --oro-boton #886e44 (fondo de botón con letra blanca, 4,82) y --oro-texto #7a633d (letra
   dorada sobre blanco 5,71 y sobre crema 5,13). El #b79b6f queda para iconos, círculos,
   filetes y letra sobre negro (7,56).

   REGLAS DE ESTA HOJA, heredadas de la v2 y falsables:
   1. CERO !important. Si algo no gana, se arregla el selector.
   2. Los nombres de clase mr-* son el contrato con mr-v2.js y con las sondas: no se cambian.
   3. Breakpoints: 640, 960, 1200 (y 1100, 1300 y 1380 solo donde se dice por qué).
   4. La forense larga vive en STATE.md y en DESIGN_RULES.md; aquí solo lo que hace falta
      leer para no romper un arreglo medido.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fuentes, autoalojadas y VARIABLES: un fichero por familia con su rango de peso declarado.
   Declarar una variable como estática hace que se sirva una vez por peso (regla D16 de la
   flota). `swap`: el texto se ve desde el primer pintado con la de respaldo.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: Cabin;
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/cabin/cabin-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;
}
@font-face {
  font-family: Raleway;
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/fonts/raleway/raleway-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;
}
@font-face {
  font-family: Raleway;
  font-style: italic;
  font-weight: 400 500;
  font-display: swap;
  src: url("/fonts/raleway/raleway-italic-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;
}

:root {
  --negro:        #080808;
  --negro-2:      #151515;
  --negro-3:      #252525;
  --gris-oscuro:  #333333;
  --gris-texto:   #696969;
  --crema:        #f7f2ed;
  --blanco:       #ffffff;

  --oro:          #b79b6f;
  --oro-boton:    #886e44;
  --oro-texto:    #7a633d;
  --oro-tinte:    rgba(183,155,111,.14);

  /* Nombres de la v2 que el marcado o el JS todavía nombran: apuntan a los nuevos. */
  --tinta:        var(--negro);
  --tinta-800:    var(--negro-2);
  --oro-claro:    var(--oro);
  --oro-oscuro:   var(--oro-boton);
  --crema-claro:  var(--crema);

  --fondo:              var(--blanco);
  --fondo-alterno:      var(--crema);
  --fondo-oscuro:       var(--negro);
  --titulo:             var(--negro);
  --texto:              var(--negro);
  --texto-cuerpo:       var(--gris-texto);
  --texto-suave:        var(--gris-texto);
  --texto-tenue:        var(--gris-texto);
  --texto-sobre-oscuro: #cccccc;
  --texto-sobre-oscuro-suave: #a8a8a8;
  --filete-sobre-oscuro: rgba(255,255,255,.14);
  --borde:              rgba(8,8,8,.1);
  --borde-fuerte:       rgba(8,8,8,.18);
  /* El borde es lo único que dibuja un campo vacío: tiene que dar 3 contra el blanco del
     campo (queja del operador, «el contraste de colores es nulo... no se ve nada»). #858585
     da 3,7 sobre blanco. */
  --borde-control:      #858585;

  --fuente-texto:  Raleway, "Segoe UI", Arial, sans-serif;
  --fuente-titulo: Cabin, "Segoe UI", Arial, sans-serif;

  --t-xs:   0.8125rem;
  --t-sm:   0.875rem;
  --t-base: 1rem;
  --t-md:   clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  --t-lg:   clamp(1.375rem, 1.15rem + 0.9vw, 1.875rem);
  --t-h4:   clamp(1.25rem, 1.15rem + 0.45vw, 1.5rem);
  --t-xl:   clamp(2rem, 1.25rem + 2.9vw, 3.25rem);
  --t-2xl:  clamp(2.375rem, 1.4rem + 3.6vw, 4rem);
  --t-3xl:  clamp(2.625rem, 1.3rem + 5vw, 5rem);
  --t-cifra: clamp(2.75rem, 2rem + 3vw, 4.5rem);
  --t-subtitulo:   1.25rem;
  --t-titulo-guia: clamp(1.5rem, 1.3rem + 0.7vw, 1.875rem);

  --peso-normal:  400;
  --peso-medio:   500;
  --peso-fuerte:  600;
  --peso-titulo:  600;
  --alto-titulo:  1.15;
  --alto-sub:     1.3;
  --alto-texto:   1.9;
  --alto-subtitulo: 1.3;
  --alto-tarjeta: 1.3;

  --e1: 0.5rem;
  --e2: 1rem;
  --e3: 1.5rem;
  --e4: 2rem;
  --e5: 3rem;
  --e6: 4rem;
  --e7: 6rem;
  --e8: 8rem;
  /* La demo usa 110 px; aquí el techo es 100 y el suelo 56, y dos secciones seguidas sobre el
     mismo fondo no suman dos rellenos (queja del operador del 2026-09-21, «estos bloques en
     blanco que dejas entre las secciones»): ver «Secciones». */
  --ritmo-seccion: clamp(3.5rem, 2rem + 4.4vw, 6.25rem);

  /* 1.440 con el relleno incluido: 1.340 de contenido a partir de 1.440 px, como la demo. */
  --ancho:        1440px;
  --ancho-texto:  46rem;
  /* La medida de la prosa en rem y no en ch: en Raleway el cero no se parece a la letra
     media. 38rem son 608 px, unos 75 caracteres a 16 px. */
  --ancho-prosa:  38rem;
  --ancho-medio:  56rem;
  --foto-fila-min: 340px;
  --foto-fila-max: 520px;
  --aire-lateral: clamp(1.25rem, 3.5vw, 3.125rem);
  /* El margen de las tarjetas que van casi a sangre (barra superior, cabecera, héroe). */
  --marco:        clamp(0.75rem, 2.1vw, 1.875rem);
  --alto-cabecera: 72px;

  --r-campo:   5px;
  --r-foto:    14px;
  --r-tarjeta: 20px;
  --r-bloque:  30px;
  --r-pil:     999px;
  --r-sm: var(--r-campo);
  --r-md: var(--r-foto);
  --r-lg: var(--r-tarjeta);

  --s-suave:    0 0 25px rgba(0,0,0,.08);
  --s-cabecera: 0 10px 30px rgba(8,8,8,.08);
  --s-foco:     0 0 0 3px rgba(122,99,61,.4);

  --error:        #d9534f;
  --error-texto:  #b3261e;
  --error-fondo:  #fdf3f2;

  --curva: cubic-bezier(.22,1,.36,1);
  --t-rapido: 160ms;
  --t-medio:  300ms;
  --t-lento:  700ms;

  /* La flecha de los botones. data: va permitido por la CSP en img-src (medido en el
     .htaccess el 2026-10-18); la nota de la v2 que decía lo contrario era de antes. */
  --flecha: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 20' fill='none'%3E%3Cpath d='M1 10H16M19.34 10.02C16.22 9.83 10 11.16 10 18M19.34 9.99C16.22 10.18 10 8.84 10 2' stroke='%23151515' stroke-width='1.5'/%3E%3C/svg%3E");
  --flecha-blanca: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 20' fill='none'%3E%3Cpath d='M1 10H16M19.34 10.02C16.22 9.83 10 11.16 10 18M19.34 9.99C16.22 10.18 10 8.84 10 2' stroke='%23ffffff' stroke-width='1.5'/%3E%3C/svg%3E");
  --marca-si: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M2.5 8.5l3.5 3.5 7.5-8' stroke='%23b79b6f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  /* Iconos de id=3924: el imagotipo de WhatsApp, la estrella y la marca de verificada de las
     reseñas (estilo TrustIndex) y la G de Google. Trazos, no texto. */
  --logo-wa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2325D366' d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z'/%3E%3C/svg%3E");
  --estrella: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 24'%3E%3Cpath fill='%23F6BB06' d='M12 1.2l3.18 6.44 7.1 1.03-5.14 5.01 1.21 7.08L12 17.42l-6.35 3.34 1.21-7.08L1.72 8.67l7.1-1.03z'/%3E%3C/svg%3E");
  --verificada: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8' fill='%23197BFF'/%3E%3Cpath d='M4.6 8.3l2.2 2.2 4.6-4.8' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --logo-g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%234285F4' d='M23.52 12.27c0-.79-.07-1.54-.2-2.27H12v4.29h6.47a5.53 5.53 0 0 1-2.4 3.63v3h3.88c2.27-2.09 3.57-5.17 3.57-8.65z'/%3E%3Cpath fill='%2334A853' d='M12 24c3.24 0 5.96-1.08 7.95-2.91l-3.88-3c-1.08.72-2.45 1.16-4.07 1.16-3.13 0-5.78-2.11-6.73-4.96H1.27v3.09A12 12 0 0 0 12 24z'/%3E%3Cpath fill='%23FBBC05' d='M5.27 14.29A7.2 7.2 0 0 1 4.89 12c0-.8.14-1.57.38-2.29V6.62H1.27A12 12 0 0 0 0 12c0 1.94.46 3.77 1.27 5.38l4-3.09z'/%3E%3Cpath fill='%23EA4335' d='M12 4.75c1.77 0 3.35.61 4.6 1.8l3.42-3.42A11.46 11.46 0 0 0 12 0 12 12 0 0 0 1.27 6.62l4 3.09C6.22 6.86 8.87 4.75 12 4.75z'/%3E%3C/svg%3E");
}

/* La cabecera de escritorio empieza en 1.080 y no en 960 como el resto del diseño: sus cinco
   enlaces ocupan 503 px y hasta unos 1.060 no caben entre la marca y el botón (a 960 se montaban
   24 px sobre los dos; medido sin red el 2026-10-18). Por debajo va la de móvil, con su botón de
   menú. Las cinco reglas que dependen de esto llevan el mismo 1.080. */
@media (min-width: 1080px) {
  :root { --alto-cabecera: 92px; }
}

/* ==========================================================================
   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-cuerpo);
  font-family: var(--fuente-texto);
  font-size: var(--t-base);
  line-height: var(--alto-texto);
  /* Cifras de altura uniforme: Raleway trae las de estilo antiguo y un teléfono o una renta
     en euros se leen peor con ellas. */
  font-variant-numeric: lining-nums;
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  accent-color: var(--oro-boton);
  caret-color: var(--negro);
}

::selection { background: var(--oro); color: var(--negro); }

img, picture, video, iframe, svg { max-width: 100%; }
img, video { height: auto; display: block; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--fuente-titulo);
  font-weight: var(--peso-titulo);
  line-height: var(--alto-titulo);
  letter-spacing: -0.01em;
  color: var(--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-lg); line-height: var(--alto-sub); letter-spacing: 0; }
h4 { font-size: var(--t-h4); line-height: var(--alto-sub); letter-spacing: 0; }

p { margin: 0 0 var(--e2); max-width: var(--ancho-prosa); text-wrap: pretty; }
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 destino del hover es una variable que cada contenedor oscuro redefine: con un color
   fijo, un enlace dentro de un bloque negro viraba a negro sobre negro (2026-09-23). */
a:hover { color: var(--enlace-encima, var(--negro)); }

:focus-visible { outline: 2px solid var(--oro-texto); outline-offset: 2px; border-radius: var(--r-campo); }

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); color: var(--gris-oscuro); }

.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(--negro); color: var(--blanco);
  padding: var(--e1) var(--e2); border-radius: var(--r-pil);
  text-decoration: none; transition: top var(--t-rapido) var(--curva);
}
.mr-saltar:focus-visible { top: var(--e2); color: var(--blanco); }

/* ==========================================================================
   Maquetación y secciones
   ========================================================================== */

.mr-contenedor {
  width: 100%; max-width: var(--ancho); margin-inline: auto;
  padding-inline: var(--aire-lateral);
}

.mr-seccion { position: relative; padding-block: var(--ritmo-seccion); }
/* Dos secciones blancas seguidas no suman dos rellenos: entre ellas queda UNO. */
.mr-seccion:not(.mr-seccion--alterna, .mr-seccion--oscura, .mr-seccion--oro)
  + .mr-seccion:not(.mr-seccion--alterna, .mr-seccion--oscura, .mr-seccion--oro) { padding-block-start: 0; }
.mr-seccion--primera { padding-block-start: var(--e5); }

/* Crema de la demo para la sección alterna. Las TARJETAS que van dentro siguen siendo
   blancas (orden del operador del 2026-09-15: el crema no va en los bloques de tarjeta). */
.mr-seccion--alterna { background: var(--crema); }

.mr-seccion--oscura { background: var(--negro); color: var(--texto-sobre-oscuro);
                      --enlace-encima: var(--blanco); --titulo: var(--blanco); isolation: isolate; }
.mr-seccion--oscura p { color: var(--texto-sobre-oscuro); }
.mr-seccion--oscura strong { color: var(--blanco); }
.mr-seccion--oscura a:not(.mr-boton, .mr-tel) { color: var(--oro); }
.mr-seccion--oscura a:not(.mr-boton, .mr-tel):hover { color: var(--blanco); }
.mr-seccion--oscura :focus-visible { outline-color: var(--oro); }

/* Sección negra con una foto tenue de fondo, como la de «Why choose us» de la demo. La foto
   es decoración de fondo, pero lleva su `alt` porque el operador lo pidió así para las
   secciones de preguntas (2026-09-15, punto 6). */
.mr-seccion__fondo { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.mr-seccion__fondo img { width: 100%; height: 100%; object-fit: cover; opacity: .2; }

/* Franja dorada (una en toda la web): dorado del tema con letra negra, 7,56. */
.mr-seccion--oro { background: var(--oro); color: var(--negro); --enlace-encima: var(--negro-2); }
.mr-seccion--oro p, .mr-seccion--oro a { color: var(--negro); }
.mr-seccion--oro :focus-visible { outline-color: var(--negro); }

/* --------------------------------------------------------------------------
   Cabecera de sección: etiqueta en píldora, titular y entrada. A la IZQUIERDA (queja del
   operador del 2026-09-22: que todo esté centrado es firma de plantilla).
   -------------------------------------------------------------------------- */
.mr-cab { max-width: var(--ancho-texto); margin-bottom: clamp(2rem, 1.2rem + 2.6vw, 3.75rem); }
.mr-cab--centrada { margin-inline: auto; text-align: center; }
.mr-cab--izq { text-align: start; margin-inline: 0; }
.mr-cab h2 { margin-bottom: var(--e2); }
.mr-cab p { font-size: var(--t-md); color: var(--texto-cuerpo); margin-bottom: 0; max-width: none; }
.mr-cab--centrada p { margin-inline: auto; }
.mr-seccion--oscura .mr-cab p { color: var(--texto-sobre-oscuro); }
.mr-cab--grande h2 { font-size: var(--t-2xl); }

/* Reparto de la demo: etiqueta y titular a la izquierda, la entrada a la derecha y abajo. */
@media (min-width: 960px) {
  .mr-cab--reparto { max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
                     column-gap: var(--e6); align-items: end; }
  .mr-cab--reparto > :not(p),
  .mr-cab--reparto > .mr-etiqueta { grid-column: 1; justify-self: start; }
  .mr-cab--reparto > p:not(.mr-etiqueta) { grid-column: 2; grid-row: 1 / span 3; align-self: end; }
}

/* La etiqueta en píldora con borde fino, en minúscula como la escribe la demo («About Our
   Company»). Sustituye al rótulo en mayúsculas que se retiró el 2026-10-05. */
.mr-etiqueta {
  display: inline-flex; align-items: center; min-height: 40px;
  margin: 0 0 var(--e3); padding: 8px 26px 6px;
  border: 1px solid rgba(8,8,8,.1); border-radius: var(--r-bloque);
  font-family: var(--fuente-texto); font-size: var(--t-sm); font-weight: var(--peso-fuerte);
  line-height: 1.4; color: #555555; max-width: none;
}
.mr-seccion--oscura .mr-etiqueta,
.mr-pie .mr-etiqueta { color: var(--texto-sobre-oscuro); border-color: rgba(255,255,255,.26); }
/* Sobre una foto: la de la demo, gris translúcido con esquina pequeña. */
/* Fondo que basta por sí solo: el gris anterior (120,120,120 al 55 %) no llegaba a 4,5:1 con blanco
   ni opaco, y en la portada a 390 px, sobre lo más claro del velo, dio 4,2:1 (barrido de fondo,
   2026-10-18). El negro de la hoja al 60 % da 5,3:1 aunque detrás hubiera blanco puro. */
.mr-etiqueta--velo { background: rgba(8,8,8,.6); border-color: transparent; color: var(--blanco);
                     border-radius: var(--r-campo); padding: 6px 16px; min-height: 36px;
                     backdrop-filter: blur(4px); }

/* Titulares de un color. La clase sigue en 71 usos del marcado y no pinta. */
.mr-oro { color: inherit; font-style: normal; }

.mr-rejilla { display: grid; gap: var(--e3); }
@media (min-width: 640px) {
  .mr-rejilla--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mr-rejilla--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
  .mr-rejilla { gap: var(--e4); }
  .mr-rejilla--2 { gap: var(--e6); }
  .mr-rejilla--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mr-rejilla--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* Foto y texto en dos columnas: el texto se centra respecto a la foto, o el sobrante se
     acumula abajo como un hueco (lo corrigió el operador en septiembre). Solo si la otra
     columna es texto: una fila de figuras solas bajaría según el largo de su pie. */
  .mr-rejilla--2:has(> figure):has(> div),
  .mr-rejilla--2:has(> picture):has(> div),
  .mr-rejilla--2:has(> .mr-calc) { align-items: center; }
  .mr-rejilla--foto-izq > figure { order: -1; }
}

/* Foto ancha dentro de una sección. Proporción fija y no techo de alto: un techo dejaba
   bandas de 5:1 que se comían el sujeto (2026-09-28). El encuadre va en el html. */
.mr-media { margin: var(--e3) 0; }
.mr-media img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-foto); }
@media (min-width: 640px) { .mr-media img { aspect-ratio: 3 / 1; } }
.mr-media figcaption { margin-top: 10px; font-size: var(--t-sm); color: var(--texto-cuerpo);
                       line-height: 1.6; max-width: var(--ancho-texto); }

/* Galería de habitaciones: tres columnas siempre y nueve fotos, 3x3 a cualquier ancho
   (simetría, 2026-09-23). Verticales 3/4: apaisarlas se comería la habitación. */
.mr-galeria { display: grid; gap: var(--e1); grid-template-columns: repeat(3, 1fr); }
.mr-galeria .mr-tarjeta--foto img { display: block; aspect-ratio: 3 / 4; }
@media (min-width: 640px) { .mr-galeria { gap: var(--e2); } }
@media (min-width: 960px) { .mr-galeria { gap: var(--e3); } }
/* En escritorio, las nueve habitaciones en mosaico: la primera grande (2 x 2) y las otras ocho
   en dos filas de cuatro. En tres columnas de 3:4 la galería medía casi dos pantallas
   (medido el 2026-10-18). Solo con nueve: con otro número el mosaico deja huecos. */
@media (min-width: 960px) {
  .mr-galeria:has(> :nth-child(9):last-child) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .mr-galeria:has(> :nth-child(9):last-child) > :first-child { grid-column: span 2; grid-row: span 2; }
  .mr-galeria:has(> :nth-child(9):last-child) > :first-child img { height: 100%; aspect-ratio: auto; }
}

/* ==========================================================================
   Barra superior negra (solo escritorio, como la demo)
   ========================================================================== */
.mr-topbar { display: none; }
@media (min-width: 1100px) {
  .mr-topbar {
    display: block; margin-inline: auto;
    width: calc(100% - 2 * var(--marco)); max-width: calc(var(--ancho) - 2 * var(--marco));
    background: #000000; color: var(--texto-sobre-oscuro);
    border-radius: 0 0 var(--r-bloque) var(--r-bloque);
  }
  .mr-topbar__fila { display: flex; align-items: center; gap: var(--e4); min-height: 50px;
                     padding-inline: var(--e3); font-size: var(--t-base); }
  .mr-topbar__dato { display: inline-flex; align-items: center; gap: 10px; color: var(--texto-sobre-oscuro);
                     text-decoration: none; white-space: nowrap; }
  .mr-topbar__dato svg { width: 16px; height: 16px; color: var(--oro); flex: 0 0 16px; }
  a.mr-topbar__dato:hover { color: var(--blanco); }
  .mr-topbar__dato--fin { margin-inline-start: auto; }
  .mr-topbar :focus-visible { outline-color: var(--oro); }
}

/* ==========================================================================
   Cabecera

   Va EN EL FLUJO y pegajosa (sticky), no fija: con la barra superior delante, una cabecera
   fija la taparía, y así ninguna sección tiene que compensar su alto. Su alto exterior no
   cambia al compactarse (solo cambia lo que pinta), así que no mueve nada (CLS 0). El
   `top` negativo esconde los 12 px de aire de arriba cuando se pega.
   ========================================================================== */
.mr-cabecera {
  position: sticky; top: 0; z-index: 100;
  background: var(--blanco);
  box-shadow: var(--s-cabecera);
  transition: box-shadow var(--t-medio) var(--curva), background-color var(--t-medio) var(--curva);
}
.mr-cabecera__fila {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e3); min-height: var(--alto-cabecera);
}
@media (min-width: 1080px) {
  .mr-cabecera { top: -12px; padding: 20px var(--marco) 8px; background: transparent; box-shadow: none; }
  .mr-cabecera > .mr-cabecera__fila {
    max-width: calc(var(--ancho) - 2 * var(--marco)); min-height: 76px;
    padding: 0 var(--e3) 0 var(--e4);
    background: var(--blanco); border: 1px solid rgba(0,0,0,.13); border-radius: var(--r-bloque);
    transition: border-color var(--t-medio) var(--curva), box-shadow var(--t-medio) var(--curva);
  }
  /* Pegada arriba: la tarjeta gana la sombra de la cabecera fija de la demo y pierde el filete. */
  .mr-cabecera[data-compacta="si"] > .mr-cabecera__fila { border-color: transparent; box-shadow: var(--s-cabecera); }
}

.mr-marca { display: inline-flex; align-items: center; gap: 12px; flex: 0 0 auto;
            text-decoration: none; color: var(--negro); }
.mr-marca img { width: 44px; height: 44px; border-radius: var(--r-pil); }
.mr-marca__nombre { font-family: var(--fuente-titulo); font-weight: var(--peso-titulo);
                    font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); letter-spacing: -0.01em;
                    white-space: nowrap; line-height: 1.1; }
.mr-marca__nombre span { color: var(--oro-texto); }

.mr-nav { display: none; }
.mr-nav ul { display: flex; align-items: center; gap: 0; list-style: none; margin: 0; padding: 0; }
.mr-nav li { margin: 0; }
.mr-nav a,
.mr-menu-serv__boton {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  padding: 7px 16px; color: var(--gris-oscuro); text-decoration: none;
  font-family: var(--fuente-texto); font-size: var(--t-sm); font-weight: var(--peso-medio);
  text-transform: uppercase; letter-spacing: .02em; white-space: nowrap;
}
.mr-nav a:hover { color: var(--oro-texto); }
.mr-menu-serv { position: relative; }
.mr-menu-serv__boton { background: none; border: 0; cursor: pointer; }
.mr-menu-serv__boton:hover { color: var(--oro-texto); }
.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; top: calc(100% + 14px); left: 0; z-index: 2;
  min-width: 300px; background: var(--blanco); border: 1px solid var(--borde);
  border-radius: var(--r-tarjeta); box-shadow: var(--s-cabecera); padding: 10px;
  display: none;
}
.mr-menu-serv__panel[data-abierto="si"] { display: block; }
.mr-menu-serv__panel ul { display: block; }
.mr-menu-serv__panel a {
  display: flex; padding: 10px var(--e2); border-radius: var(--r-foto);
  text-transform: none; letter-spacing: 0; font-size: var(--t-base); color: var(--gris-oscuro);
}
.mr-menu-serv__panel a:hover { background: var(--crema); color: var(--oro-texto); }

.mr-cabecera__acciones { display: flex; align-items: center; gap: var(--e2); flex: 0 0 auto; }

/* El teléfono VISIBLE (orden del operador del 2026-09-23: «hay muchas personas que prefieren
   llamarnos»). En la cabecera va como el «Call Anytime» de la demo: círculo dorado y dos
   líneas. Se retira por debajo de 1.300 px, donde no cabe sin apretar el menú; ahí vive en
   la barra fija del móvil y en el menú desplegado. */
.mr-tel {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; padding-inline: 4px;
  color: var(--negro); font-weight: var(--peso-fuerte); font-size: var(--t-base);
  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); }
.mr-tel--grande { font-size: var(--t-md); min-height: 48px; padding-inline: 0; }
.mr-tel__textos { display: grid; line-height: 1.25; }
.mr-tel__rotulo { font-family: var(--fuente-titulo); font-weight: var(--peso-titulo);
                  font-size: var(--t-base); color: var(--negro); }
.mr-cabecera .mr-tel svg {
  box-sizing: content-box; width: 18px; height: 18px; padding: 14px;
  border-radius: var(--r-pil); background: var(--oro); color: var(--blanco);
}
.mr-cabecera .mr-tel .mr-tel__numero { font-weight: var(--peso-normal); color: var(--gris-texto); }
.mr-cabecera .mr-tel:hover .mr-tel__numero { color: var(--oro-texto); }
.mr-heroe .mr-tel,
.mr-seccion--oscura .mr-tel { color: var(--blanco); }
.mr-heroe .mr-tel svg,
.mr-seccion--oscura .mr-tel svg { color: var(--oro); }
.mr-heroe .mr-tel:hover, .mr-heroe .mr-tel:focus-visible,
.mr-seccion--oscura .mr-tel:hover, .mr-seccion--oscura .mr-tel:focus-visible { color: var(--oro); }
/* El teléfono entra en la cabecera desde 1360 px: con él, la lista del menú desbordaba su caja
   28 px a 1300 y aún 1 px a 1356; a 1358 cabe con 24 px de aire (medido el 2026-10-18). */
@media (max-width: 1359px) { .mr-cabecera__acciones .mr-tel { display: none; } }

.mr-ham {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 6px;
  width: 46px; height: 46px; padding: 0 12px; cursor: pointer;
  background: var(--blanco); border: 1px solid rgba(8,8,8,.18); border-radius: var(--r-pil);
}
/* Las rayas en negro sobre su propio fondo blanco: el icono no toma prestado el contraste de
   la cabecera (queja del operador del 2026-09-01, blanco sobre blanco). */
.mr-ham span { display: block; height: 2px; background: var(--negro); 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(8px) rotate(45deg); }
.mr-ham[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.mr-ham[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.mr-nav-movil {
  position: fixed; inset: var(--alto-cabecera) 0 0 0; z-index: 99;
  background: var(--blanco); padding: var(--e3) 0 var(--e6);
  overflow-y: auto; display: none; border-top: 1px solid var(--borde);
}
.mr-nav-movil[data-abierto="si"] { display: block; }
.mr-nav-movil ul { list-style: none; margin: 0 0 var(--e3); padding: 0; }
.mr-nav-movil li { margin: 0; border-bottom: 1px solid var(--borde); }
.mr-nav-movil a { display: block; padding: 14px 0; font-family: var(--fuente-titulo);
                  font-weight: var(--peso-titulo); font-size: var(--t-md);
                  color: var(--negro); text-decoration: none; }
.mr-nav-movil a:hover { color: var(--oro-texto); }
.mr-nav-movil__grupo { display: inline-flex; min-height: 34px; align-items: center;
                       margin: var(--e3) 0 var(--e1); padding: 4px 18px;
                       border: 1px solid rgba(8,8,8,.1); border-radius: var(--r-bloque);
                       font-size: var(--t-sm); font-weight: var(--peso-fuerte); color: #555555; }
.mr-nav-movil .mr-tel { font-family: var(--fuente-titulo); }

@media (min-width: 1080px) {
  .mr-nav { display: block; flex: 1 1 auto; min-width: 0; }
  .mr-nav > ul { justify-content: center; }
  .mr-ham { display: none; }
  .mr-nav-movil { display: none; }
}
/* De 1.080 a 1.199 el menú aprieta su relleno: con 16 px a cada lado los cinco enlaces, la marca
   y el botón no caben en la tarjeta. */
@media (min-width: 1080px) and (max-width: 1199px) {
  .mr-nav a, .mr-menu-serv__boton { padding-inline: 9px; }
  .mr-marca__nombre { font-size: 1.0625rem; }
}

/* ==========================================================================
   Barra fija inferior del móvil. Va en el HTML, no la inyecta el JS.
   Se sube por encima del aviso de cookies con `--alto-aviso`, que escribe mr-v2.js.
   ========================================================================== */
.mr-barra {
  position: fixed; inset-inline: 0; inset-block-end: var(--alto-aviso, 0px); z-index: 98;
  display: grid; grid-template-columns: auto auto 1fr; gap: var(--e1);
  padding: 10px var(--e2) calc(10px + env(safe-area-inset-bottom, 0px));
  background: var(--blanco); border-top: 1px solid var(--borde);
  box-shadow: 0 -8px 24px rgba(8,8,8,.06);
}
@media (min-width: 960px) { .mr-barra { display: none; } }
@media (max-width: 959px) {
  body { padding-bottom: calc(78px + var(--alto-aviso, 0px) + env(safe-area-inset-bottom, 0px)); }
  /* La sombra del aviso de cookies caía sobre la barra y la manchaba (2026-10-16). */
  body #mr-consent { box-shadow: none; }
}

/* ==========================================================================
   Botones

   La píldora de la demo: alto 55, letra Cabin 16/600, y a la derecha un círculo blanco de
   40 px con la flecha. Al pasar el ratón entra otro círculo por la izquierda, el texto se
   desplaza 37 px y el de la derecha se encoge; el botón además sube 2 px sin sombra (queja
   del operador: «que se eleve», y las sombras de botón prohibidas el 2026-08-22). El
   desplazamiento del texto se hace con el relleno: la suma no cambia, así que el ancho del
   botón tampoco.
   ========================================================================== */
.mr-boton {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e1);
  min-height: 55px; padding: 0 68px 0 26px;
  border: 1px solid transparent; border-radius: var(--r-bloque);
  font-family: var(--fuente-titulo); font-size: var(--t-base); font-weight: var(--peso-fuerte);
  line-height: 1.25; text-align: center; text-decoration: none; cursor: pointer;
  white-space: normal;
  transition: transform var(--t-rapido) var(--curva), padding var(--t-medio) var(--curva),
              background-color var(--t-medio) var(--curva), color var(--t-medio) var(--curva),
              border-color var(--t-medio) var(--curva);
}
.mr-boton::before,
.mr-boton::after {
  content: ""; position: absolute; top: 50%; width: 40px; height: 40px; margin-top: -20px;
  border-radius: var(--r-pil); background: var(--blanco) var(--flecha) center / 20px no-repeat;
  transition: transform var(--t-medio) var(--curva);
}
.mr-boton::before { left: 7px; transform: scale(0); }
.mr-boton::after  { right: 7px; transform: scale(1); }
.mr-boton:hover { transform: translateY(-2px); padding: 0 31px 0 63px; }
.mr-boton:hover::before { transform: scale(1); }
.mr-boton:hover::after  { transform: scale(0); }
.mr-boton:active { transform: translateY(0); }

.mr-boton--oro { background: var(--oro-boton); color: var(--blanco); }
.mr-boton--oro:hover { background: var(--negro-2); color: var(--blanco); }

.mr-boton--tinta { background: var(--negro-2); color: var(--blanco); }
.mr-boton--tinta:hover { background: var(--oro-boton); color: var(--blanco); }

/* WhatsApp en BLANCO con su imagotipo verde a la izquierda (id=3924, 2026-10-18: «el color de
   ese botón debe ser color blanco y el logotipo debe ser el imagotipo de WhatsApp»). Sin los
   círculos de flecha: el logotipo ocupa su sitio. Filete gris para que no se pierda sobre blanco;
   al pasar el ratón sube 2 px y el filete pasa al verde de la marca. */
.mr-boton--wa { background: var(--blanco); color: var(--negro); border-color: rgba(8,8,8,.16);
                padding: 0 28px 0 18px; gap: 10px; }
.mr-boton--wa::before { position: static; flex: 0 0 26px; width: 26px; height: 26px; margin: 0;
                        border-radius: 0; transform: none; background: var(--logo-wa) center / contain no-repeat; }
.mr-boton--wa::after { content: none; }
.mr-boton--wa:hover { background: var(--blanco); color: var(--negro); border-color: #25d366; padding: 0 28px 0 18px; }
.mr-boton--wa:hover::before { transform: none; }

/* El de línea no lleva círculo: es la acción secundaria y se dibuja con su borde. Se invierte
   al pasar el ratón y nada queda negro sobre negro (queja del 2026-09-23). */
.mr-boton--linea { background: transparent; color: var(--negro); border-color: var(--borde-control);
                   padding: 0 28px; }
.mr-boton--linea::before, .mr-boton--linea::after { content: none; }
.mr-boton--linea:hover { padding: 0 28px; background: var(--negro); color: var(--blanco); border-color: var(--negro); }
.mr-seccion--oscura .mr-boton--linea,
.mr-heroe .mr-boton--linea,
.mr-pie .mr-boton--linea { color: var(--blanco); border-color: rgba(255,255,255,.45); }
.mr-seccion--oscura .mr-boton--linea:hover,
.mr-heroe .mr-boton--linea:hover,
.mr-pie .mr-boton--linea:hover { background: var(--blanco); color: var(--negro); border-color: var(--blanco); }
/* Sobre negro el dorado del botón pasa a la versión clara al pasar el ratón, que ya contrasta. */
.mr-seccion--oscura .mr-boton--oro:hover,
.mr-caja-negra .mr-boton--oro:hover,
.mr-heroe .mr-boton--oro:hover,
.mr-pie .mr-boton--oro:hover { background: var(--blanco); color: var(--negro); }

.mr-botonera { display: flex; flex-wrap: wrap; gap: var(--e2); align-items: center; }
.mr-botonera--centro { justify-content: center; }

/* En la barra del móvil van tres botones en 390 px: sin círculo y con relleno corto. A 320 px
   las tres caben con 8 px de relleno (medido el 2026-09-28 con la letra anterior). */
.mr-barra .mr-boton { width: 100%; min-height: 48px; padding-inline: var(--e1);
                      font-size: var(--t-sm); }
.mr-barra .mr-boton::before, .mr-barra .mr-boton::after { content: none; }
.mr-barra .mr-boton:hover { padding-inline: var(--e1); }

/* En el móvil el botón con círculo no puede pasar del ancho: si el texto no cabe, se parte en
   dos líneas dentro de la píldora y el círculo se queda a la derecha. */
@media (max-width: 639px) {
  .mr-boton { min-height: 52px; padding: 6px 60px 6px 22px; }
  .mr-boton:hover { padding: 6px 60px 6px 22px; }
  .mr-boton:hover::before { transform: scale(0); }
  .mr-boton:hover::after { transform: scale(1); }
  .mr-boton--linea, .mr-boton--linea:hover { padding: 6px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .mr-boton, .mr-boton::before, .mr-boton::after { transition: none; }
  .mr-boton:hover { transform: none; padding: 0 68px 0 26px; }
  .mr-boton:hover::before { transform: scale(0); }
  .mr-boton:hover::after { transform: scale(1); }
}

/* ==========================================================================
   Héroe

   Una tarjeta casi a sangre con esquinas de 30 px, como la de la demo. Dos formas:
   - con `.mr-heroe__fondo` (la foto de 1.920 px detrás, velo oscuro y el texto encima);
   - sin él (las páginas cuyo héroe trae la foto al lado, `.mr-heroe__foto`): tarjeta negra
     con el texto a la izquierda y la foto redondeada a la derecha.
   El texto es blanco sobre el velo en todo el recorrido: el velo llega al 88 % donde está la
   letra, así que el contraste no depende de la foto que haya debajo.
   ========================================================================== */
.mr-heroe {
  position: relative; isolation: isolate; overflow: hidden;
  margin: 0 var(--marco); border-radius: var(--r-bloque);
  padding-block: clamp(2.25rem, 1rem + 5vw, 5.5rem);
  background: var(--negro); color: var(--texto-sobre-oscuro);
  --enlace-encima: var(--blanco); --titulo: var(--blanco);
}
@media (max-width: 639px) { .mr-heroe { border-radius: 24px; } }
.mr-migas + .mr-heroe,
.mr-cabecera + main > .mr-heroe:first-child { margin-top: 0; }

.mr-heroe__fondo { position: absolute; inset: 0; z-index: -2; }
.mr-heroe__fondo img { width: 100%; height: 100%; object-fit: cover; object-position: var(--encuadre, 50% 50%); }
.mr-heroe:has(> .mr-heroe__fondo)::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(8,8,8,.38) 0%, rgba(8,8,8,.62) 40%, rgba(8,8,8,.9) 100%);
}
@media (min-width: 960px) {
  .mr-heroe:has(> .mr-heroe__fondo) { min-height: clamp(560px, calc(100svh - 190px), 820px);
                                      display: flex; align-items: flex-end; }
  .mr-heroe:has(> .mr-heroe__fondo)::before {
    background: linear-gradient(90deg, rgba(8,8,8,.86) 0%, rgba(8,8,8,.7) 42%, rgba(8,8,8,.25) 75%, rgba(8,8,8,.15) 100%),
                linear-gradient(180deg, rgba(8,8,8,0) 50%, rgba(8,8,8,.55) 100%);
  }
}

.mr-heroe__rejilla { position: relative; display: grid; gap: var(--e4); align-items: center; }
.mr-heroe__intro { max-width: 46rem; }
.mr-heroe .mr-etiqueta { margin-bottom: var(--e3); }
.mr-heroe h1 { margin-bottom: var(--e3); color: var(--blanco); }
.mr-heroe--portada h1 { font-size: var(--t-3xl); line-height: 1.1; }
.mr-heroe__entrada { font-size: var(--t-md); color: #e6e6e6; margin-bottom: var(--e3); max-width: 40rem; }
.mr-heroe p { color: #e6e6e6; }
.mr-heroe strong { color: var(--blanco); }
.mr-heroe a:not(.mr-boton, .mr-tel) { color: var(--oro); }
.mr-heroe a:not(.mr-boton, .mr-tel):hover { color: var(--blanco); }
.mr-heroe :focus-visible { outline-color: var(--oro); }
.mr-heroe .mr-nota { color: var(--texto-sobre-oscuro-suave); max-width: none; }

/* Las promesas, con la marca dorada de la lista de la demo. Dos columnas también en el móvil:
   la más larga ocupa dos líneas en 163 px (2026-09-28). */
.mr-heroe__hechos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
                    gap: 10px var(--e3); margin: 0 0 var(--e4); padding: 0; list-style: none; }
.mr-heroe__hechos li { position: relative; margin: 0; padding-left: 26px;
                       font-size: var(--t-base); line-height: 1.45; color: var(--blanco); }
.mr-heroe__hechos li::before { content: ""; position: absolute; left: 0; top: .15em;
                               width: 16px; height: 16px; background: var(--marca-si) center / contain no-repeat; }

/* La foto al lado (forma sin fondo). */
.mr-heroe__foto { display: flex; flex-direction: column; gap: var(--e1); margin: 0; }
.mr-heroe__foto picture { display: block; overflow: hidden; border-radius: var(--r-tarjeta); }
.mr-heroe__foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 28%; }
.mr-heroe__pie { font-size: var(--t-sm); line-height: 1.5; color: var(--texto-sobre-oscuro-suave); }

/* El sello: la foto de los dos hermanos en un círculo con su pie, abajo a la derecha, en el
   sitio del «27+ Years of Experience» de la demo. Solo en escritorio. */
.mr-heroe__sello { display: none; }
@media (min-width: 960px) {
  .mr-heroe__sello { display: flex; align-items: center; gap: var(--e2); margin: 0;
                     align-self: end; justify-self: end; max-width: 330px; }
  .mr-heroe__sello img { width: 132px; height: 132px; flex: 0 0 132px; border-radius: var(--r-pil);
                         object-fit: cover; object-position: 50% 18%;
                         border: 3px solid rgba(255,255,255,.85); }
  .mr-heroe__sello figcaption { font-family: var(--fuente-titulo); font-size: var(--t-md);
                                line-height: 1.35; color: var(--blanco); }
}

/* En el móvil, el TITULAR primero, la foto justo debajo y después el resto (forma sin fondo).
   `display: contents` deja que la foto se meta entre el titular y la entrada. */
@media (max-width: 959px) {
  .mr-heroe__rejilla { display: flex; flex-direction: column; align-items: stretch; gap: var(--e3); }
  .mr-heroe:not(:has(> .mr-heroe__fondo)) .mr-heroe__intro { display: contents; }
  .mr-heroe:not(:has(> .mr-heroe__fondo)) h1 { order: 0; margin-bottom: 0; }
  .mr-heroe__foto { order: 1; }
  .mr-heroe:not(:has(> .mr-heroe__fondo)) .mr-heroe__intro > :not(h1) { order: 2; }
  .mr-heroe:not(:has(> .mr-heroe__fondo)) :is(.mr-heroe__entrada, .mr-heroe__hechos, .mr-etiqueta) { margin-bottom: 0; }
}
/* En la franja de tableta la foto va al final: en 4/3 a 820 px dejaba los botones fuera de
   la primera pantalla. */
@media (min-width: 641px) and (max-width: 959px) { .mr-heroe__foto { order: 3; } }

@media (min-width: 960px) {
  .mr-heroe:not(:has(> .mr-heroe__fondo)) .mr-heroe__rejilla { grid-template-columns: 1.05fr 0.95fr; gap: var(--e6); }
  .mr-heroe--portada:not(:has(> .mr-heroe__fondo)) .mr-heroe__rejilla { grid-template-columns: 1.15fr 0.85fr; }
  .mr-heroe:has(> .mr-heroe__fondo) .mr-heroe__rejilla { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  /* La foto llega al alto de la columna de texto: desnivel 0 por construcción (pedido por el
     operador el 2026-09-23). La imagen va absoluta para no aportar su alto a la fila. */
  .mr-heroe__foto { align-self: stretch; }
  .mr-heroe__foto picture { flex: 1 1 auto; min-height: 420px; position: relative; }
  .mr-heroe__foto img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
}

/* Fondo Y foto al lado (`/alquilar-mi-piso-zaragoza`, Q11: «quiero poner fondo como en la home en
   la primera sección»). La foto del piso pasa a tarjeta oscura con su pie dentro: abajo a la
   derecha en escritorio, en el sitio del sello de la portada, y bajo los botones en el móvil.
   Sin estirarse al alto del texto, que aquí es la foto de fondo la que llena la cabecera. */
.mr-heroe:has(> .mr-heroe__fondo) .mr-heroe__foto { padding: 10px 10px 12px; background: var(--negro-2);
                                                     border-radius: var(--r-tarjeta); }
.mr-heroe:has(> .mr-heroe__fondo) .mr-heroe__foto picture { border-radius: var(--r-foto); }
.mr-heroe:has(> .mr-heroe__fondo) .mr-heroe__pie { padding-inline: 6px; }
@media (min-width: 960px) {
  .mr-heroe:has(> .mr-heroe__fondo) .mr-heroe__foto { width: 360px; max-width: 100%;
                                                       align-self: end; justify-self: end; }
  .mr-heroe:has(> .mr-heroe__fondo) .mr-heroe__foto picture { flex: none; min-height: 0; position: static; }
  .mr-heroe:has(> .mr-heroe__fondo) .mr-heroe__foto img { position: static; height: auto; aspect-ratio: 4 / 3; }
}

/* ==========================================================================
   Migas de pan: visibles, encima del héroe y en gris de la demo.
   ========================================================================== */
.mr-migas { padding-block: var(--e2) var(--e2); }
.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-sm); color: var(--texto-cuerpo); }
.mr-migas li { margin: 0; display: inline-flex; align-items: center; gap: var(--e1); }
.mr-migas li + li::before { content: ""; width: 6px; height: 6px; border-right: 1.5px solid var(--oro);
                            border-top: 1.5px solid var(--oro); transform: rotate(45deg); }
/* 24 px de toque como mínimo: son navegación, no texto corrido. */
.mr-migas a { color: var(--texto-cuerpo); 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(--negro); font-weight: var(--peso-fuerte); }
@media (min-width: 960px) {
  .mr-migas { padding-block: var(--e1) var(--e2); }
}

/* ==========================================================================
   Calculadora, campos y opciones
   ========================================================================== */
.mr-calc {
  background: var(--blanco); border: 1px solid var(--borde);
  border-radius: var(--r-tarjeta); box-shadow: var(--s-suave);
  padding: clamp(1.25rem, 0.8rem + 2vw, 2.5rem);
}
.mr-calc__titulo { font-family: var(--fuente-titulo); font-weight: var(--peso-titulo);
                   font-size: var(--t-h4); color: var(--negro); line-height: 1.3; margin-bottom: var(--e1); }
.mr-calc__ayuda { font-size: var(--t-sm); color: var(--texto-cuerpo); margin-bottom: var(--e3); }

.mr-campo { margin-bottom: var(--e3); }
.mr-campo > label,
.mr-campo > .mr-campo__rotulo {
  display: block; font-size: var(--t-sm); font-weight: var(--peso-fuerte);
  color: var(--gris-oscuro); margin-bottom: 8px; line-height: 1.4;
}
.mr-campo input,
.mr-campo select,
.mr-campo textarea {
  width: 100%; min-height: 52px; padding: 0 var(--e2);
  font-family: var(--fuente-texto); font-size: var(--t-base); color: var(--negro);
  background: var(--blanco); border: 1px solid var(--borde-control);
  border-radius: var(--r-campo);
  transition: border-color var(--t-rapido) var(--curva), box-shadow var(--t-rapido) var(--curva);
}
.mr-campo textarea { min-height: 130px; padding: var(--e2); line-height: 1.6; }
.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 blanco del campo: #696969 da 5,5. */
.mr-campo input::placeholder,
.mr-campo textarea::placeholder { color: var(--gris-texto); opacity: 1; }
.mr-campo select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--gris-oscuro) 50%),
                    linear-gradient(135deg, var(--gris-oscuro) 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);
}

.mr-opciones { display: flex; flex-wrap: wrap; gap: var(--e1); }
.mr-opcion {
  min-height: 44px; padding: 0 var(--e3); border-radius: var(--r-pil);
  border: 1px solid var(--borde-control); background: var(--blanco);
  font: inherit; font-size: var(--t-sm); font-weight: var(--peso-fuerte); color: var(--gris-oscuro); 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:hover { border-color: var(--negro); color: var(--negro); }
.mr-opcion[aria-pressed="true"] { background: var(--negro-2); border-color: var(--negro-2); color: var(--blanco); }
/* La elección de canal es un radio de verdad vestido de píldora. `min-height: 0` le gana a
   la regla de los campos de texto, que si no lo pinta como un círculo de 52 px. */
.mr-opcion--radio { display: inline-flex; align-items: center; gap: 8px; padding-block: 10px; height: auto; }
.mr-opcion--radio input { accent-color: var(--oro-boton); width: 18px; height: 18px; min-height: 0;
                          flex: 0 0 18px; margin: 0; }
.mr-opcion--radio:has(input:checked) { background: var(--negro-2); border-color: var(--negro-2); color: var(--blanco); }
.mr-opcion--radio:has(input:focus-visible) { box-shadow: var(--s-foco); }

.mr-calc__salida {
  margin-top: var(--e3); padding: var(--e3);
  background: var(--crema); border-radius: var(--r-foto);
}
.mr-calc__cifra { font-family: var(--fuente-titulo); font-size: var(--t-xl); font-weight: var(--peso-titulo);
                  color: var(--negro); line-height: 1.1; }
.mr-calc__nota { font-size: var(--t-sm); color: var(--texto-cuerpo); margin: var(--e1) 0 0; line-height: 1.6; }
.mr-calc__error { font-size: var(--t-sm); color: var(--error-texto); margin-top: var(--e1); min-height: 1.2em; }
.mr-campo--mal input,
.mr-campo--mal select { border-color: var(--error-texto); }

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

/* Señal de error del formulario: la pinta `marcaErrores()` de mr-v2.js. Mensaje escrito
   bajo el campo y resumen arriba: el color solo no vale como única 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; line-height: 1.5; }
.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: 700; line-height: 1;
}
.mr-error-resumen {
  font-size: var(--t-sm); font-weight: var(--peso-fuerte); color: var(--error-texto);
  background: var(--error-fondo); border: 1px solid var(--error); border-radius: var(--r-foto);
  padding: var(--e2) var(--e3); margin: 0 0 var(--e3);
}

/* ==========================================================================
   Tarjetas, iconos, cifras y listas
   ========================================================================== */

/* La tarjeta de la demo: BLANCA (orden del 2026-09-15), esquina de 20 y filete muy fino;
   sobre crema destaca sola, sobre blanco la dibuja el filete. */
.mr-tarjeta {
  display: flex; flex-direction: column;
  background: var(--blanco); border: 1px solid var(--borde);
  border-radius: var(--r-tarjeta); padding: clamp(1.5rem, 1.1rem + 1.4vw, 2.5rem);
}
.mr-tarjeta h3 { margin-bottom: var(--e1); font-size: var(--t-h4); }
.mr-tarjeta p { color: var(--texto-cuerpo); }
.mr-tarjeta__pie { margin-top: auto; padding-top: var(--e3); }
.mr-seccion--oscura .mr-tarjeta { background: var(--negro-2); border-color: var(--filete-sobre-oscuro); }
.mr-seccion--oscura .mr-tarjeta p { color: var(--texto-sobre-oscuro); }

/* La tarjeta con foto es la foto: sin caja. Ninguna imagen se amplía al pasar el ratón. */
.mr-tarjeta--foto { border: 0; padding: 0; overflow: hidden; border-radius: var(--r-foto); background: transparent; }
.mr-tarjeta--foto img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--r-foto); }
.mr-tarjeta--foto .mr-tarjeta__cuerpo { padding: var(--e2) 0 0; display: flex; flex-direction: column; flex: 1; }

/* El icono en un círculo crema con el trazo en dorado de texto: el crema queda en el icono,
   que es lo que el operador pidió el 2026-09-15. */
.mr-icono {
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; margin-bottom: var(--e3);
  background: var(--crema); border-radius: var(--r-pil); color: var(--oro-texto);
}
.mr-icono svg { width: 28px; height: 28px; }
.mr-seccion--alterna .mr-icono { background: var(--oro-tinte); }
.mr-seccion--oscura .mr-icono { background: transparent; border: 1px solid rgba(183,155,111,.45); color: var(--oro); }

/* Cifras con la forma de la píldora de la demo («5+ Years Of Experience»), pero BLANCAS con filete:
   el crema no va en los bloques, solo en el icono (corrección del operador del 2026-09-15). */
.mr-cifras { display: grid; gap: var(--e2); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 960px) { .mr-cifras { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e3); } }
.mr-cifra { background: var(--blanco); border: 1px solid var(--borde-fuerte); border-radius: var(--r-bloque); padding: var(--e3); }
.mr-cifra__n { display: block; font-family: var(--fuente-titulo); font-weight: var(--peso-titulo);
               font-size: var(--t-cifra); line-height: 1; color: var(--negro); }
/* `__t` en /quienes-somos y `__q` en el resto: se cubren los dos (2026-09-23). */
.mr-cifra__q,
.mr-cifra__t { display: block; font-size: var(--t-base); color: var(--texto-cuerpo); margin-top: 10px; line-height: 1.5; }

/* La lista con la marca dorada de la demo. La marca va a la altura de la PRIMERA línea, no
   del centro del bloque (queja del operador del 2026-09-15). */
.mr-lista-marcada { list-style: none; padding: 0; margin: 0; }
.mr-lista-marcada:not(:last-child) { margin-bottom: var(--e2); }
.mr-lista-marcada li { position: relative; padding-left: 30px; margin-bottom: 10px; }
.mr-lista-marcada li::before {
  content: ""; position: absolute; left: 0; top: .42em;
  width: 16px; height: 16px; background: var(--marca-si) center / contain no-repeat;
}

/* ==========================================================================
   Pasos (la lista numerada «01» de la demo), comparador, tabla y acordeón
   ========================================================================== */
.mr-paso { position: relative; }
.mr-paso__n {
  display: block; margin-bottom: var(--e2);
  font-family: var(--fuente-titulo); font-weight: var(--peso-titulo);
  font-size: var(--t-cifra); line-height: 1; color: var(--oro-boton);
}
.mr-paso__plazo { display: inline-flex; align-items: center; min-height: 32px; margin-bottom: var(--e2);
                  padding: 4px 16px; border: 1px solid var(--borde-fuerte); border-radius: var(--r-pil);
                  font-size: var(--t-sm); font-weight: var(--peso-fuerte); color: #555555;
                  align-self: flex-start; }
.mr-seccion--oscura .mr-paso__n { color: var(--oro); }
.mr-seccion--oscura .mr-paso__plazo { color: var(--texto-sobre-oscuro); border-color: rgba(255,255,255,.26); }

/* Comparador antes y después: un input range de verdad (dedo, ratón, teclado, lector). */
.mr-comparador { position: relative; border-radius: var(--r-foto); overflow: hidden; background: var(--crema); }
.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); pointer-events: none; }
.mr-comparador__linea::after {
  content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 44px; height: 44px; border-radius: var(--r-pil);
  background: var(--oro) var(--flecha-blanca) center / 20px no-repeat;
}
.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; top: var(--e2); z-index: 2; padding: 4px 14px; border-radius: var(--r-pil);
  background: rgba(8,8,8,.78); color: var(--blanco);
  font-size: var(--t-xs); font-weight: var(--peso-fuerte); pointer-events: none;
}
.mr-comparador__rotulo--antes   { inset-inline-start: var(--e2); }
.mr-comparador__rotulo--despues { inset-inline-end: var(--e2); }

/* Tabla: cabecera negra con letra blanca, celdas en negro (orden del 2026-09-15, punto 4) y
   la columna nuestra con fondo crema y negrita. La cabecera de esa columna en el dorado de
   botón con letra blanca (4,82). */
.mr-tabla-caja { overflow-x: auto; border-radius: var(--r-tarjeta); border: 1px solid var(--borde);
                 -webkit-overflow-scrolling: touch; background: var(--blanco); }
.mr-tabla { width: 100%; border-collapse: collapse; font-size: var(--t-base); background: var(--blanco); }
.mr-tabla th, .mr-tabla td { padding: 18px var(--e3); text-align: left; vertical-align: top;
                             border-bottom: 1px solid var(--borde); color: var(--negro); line-height: 1.55; }
.mr-tabla thead th { background: var(--negro); color: var(--blanco); font-family: var(--fuente-titulo);
                     font-weight: var(--peso-titulo); font-size: var(--t-md); white-space: normal; }
.mr-tabla thead th:last-child { background: var(--oro-boton); color: var(--blanco); }
.mr-tabla tbody th { font-weight: var(--peso-fuerte); }
.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); font-weight: var(--peso-fuerte); }
.mr-tabla__si { color: var(--negro); font-weight: var(--peso-fuerte); }
.mr-tabla__no { color: var(--negro); }

/* En el móvil, una tarjeta por fila: la columna nuestra quedaba entera fuera de la pantalla
   (2026-09-28). El nombre de cada opción sale de `data-etiqueta`. */
@media (max-width: 639px) {
  .mr-tabla-caja { overflow: visible; border: 0; border-radius: 0; background: transparent; }
  .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-tarjeta); overflow: hidden; background: var(--blanco); }
  .mr-tabla tbody th[scope="row"] { padding: 12px var(--e2); background: var(--negro); color: var(--blanco);
                                    font-family: var(--fuente-titulo); border-bottom: 0; }
  .mr-tabla td { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
                 gap: var(--e2); padding: 12px var(--e2); }
  /* Texto de tabla en negro, nunca gris ni dorado (correcciones del 2026-09-15 y MR-FIX114 #4). */
  .mr-tabla td::before { content: attr(data-etiqueta); color: var(--negro); font-weight: var(--peso-normal); }
  .mr-tabla td:last-child { border-bottom: 0; }
  .mr-tabla td:last-child::before { color: var(--negro); 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; }
}

/* Acordeón en tarjetas, como la página de preguntas de la demo. Se despliega EN SITIO: se
   puede leer dos respuestas a la vez, enlazar a una y buscarla con el navegador. */
.mr-preguntas { display: grid; gap: var(--e2); max-width: var(--ancho-medio); }
.mr-pregunta { background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--r-tarjeta);
               transition: border-color var(--t-medio) var(--curva); }
.mr-pregunta[data-abierta="si"] { border-color: rgba(183,155,111,.6); }
.mr-pregunta__boton {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e2);
  width: 100%; min-height: 64px; padding: 18px var(--e3);
  background: none; border: 0; border-radius: var(--r-tarjeta); cursor: pointer; text-align: left;
  font-family: var(--fuente-titulo); font-size: var(--t-md); font-weight: var(--peso-titulo);
  color: var(--negro); line-height: 1.35;
  transition: color var(--t-rapido) var(--curva);
}
.mr-pregunta__boton:hover { color: var(--oro-texto); }
.mr-pregunta__mas { position: relative; flex: 0 0 36px; width: 36px; height: 36px;
                    border-radius: var(--r-pil); background: var(--crema);
                    transition: background-color var(--t-medio) var(--curva); }
.mr-pregunta__mas::before,
.mr-pregunta__mas::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: 14px; height: 2px; margin: -1px 0 0 -7px;
  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 { background: var(--oro-boton); }
.mr-pregunta__boton[aria-expanded="true"] .mr-pregunta__mas::before,
.mr-pregunta__boton[aria-expanded="true"] .mr-pregunta__mas::after { background: var(--blanco); }
.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; }
/* Ancho de lectura (MR-FIX110): a todo el ancho de la tarjeta salían unos 86 caracteres por línea. */
.mr-pregunta__cuerpo p { padding: 0 var(--e3) var(--e3); margin: 0; color: var(--texto-cuerpo); max-width: var(--ancho-prosa); }
.mr-pregunta__cuerpo p + p { padding-top: 0; }
.mr-pregunta__cuerpo > div > :not(p) { margin-inline: var(--e3); }
@media (prefers-reduced-motion: reduce) { .mr-pregunta__cuerpo { transition: none; } }

/* ==========================================================================
   Opiniones: sección negra con tarjetas #151515, como la de la demo
   ========================================================================== */
.mr-ops { position: relative; }
.mr-ops__insignia {
  display: inline-flex; align-items: center; gap: var(--e2); margin-bottom: var(--e4);
  padding: 14px 26px; border-radius: var(--r-tarjeta); background: var(--blanco); border: 1px solid var(--borde-fuerte);
  font-size: var(--t-sm); line-height: 1.5; text-decoration: none; color: var(--gris-oscuro);
}
.mr-ops__nota { font-family: var(--fuente-titulo); font-size: var(--t-xl); font-weight: var(--peso-titulo);
                line-height: 1; color: var(--negro); }
.mr-seccion--oscura .mr-ops__insignia { background: var(--negro-2); border: 1px solid var(--filete-sobre-oscuro);
                                        color: var(--texto-sobre-oscuro); }
.mr-seccion--oscura .mr-ops__insignia:hover { border-color: var(--oro); color: var(--blanco); }
.mr-seccion--oscura .mr-ops__nota { color: var(--blanco); }

.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;
}
@media (min-width: 960px) { .mr-ops__carril { grid-auto-columns: calc((100% - 2 * var(--e3)) / 3); } }
.mr-ops__carril > * { scroll-snap-align: start; }
.mr-op { display: flex; flex-direction: column; background: var(--blanco); border: 1px solid var(--borde);
         border-radius: var(--r-tarjeta); padding: var(--e4) var(--e3); }
.mr-seccion--oscura .mr-op { background: var(--negro-2); border-color: var(--filete-sobre-oscuro); }
/* Nombre arriba y estrellas debajo, siempre: dos cabeceras distintas en la misma fila de
   tarjetas se leían como descuido (2026-09-27). */
.mr-op__quien { display: flex; align-items: center; gap: 14px; margin-bottom: var(--e2); margin-top: auto; order: 2; }
.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: 48px; height: 48px; flex: 0 0 48px; border-radius: var(--r-pil);
  background: var(--oro); color: var(--negro); font-family: var(--fuente-titulo);
  font-weight: var(--peso-titulo); font-size: var(--t-md);
}
.mr-op__nombre { font-family: var(--fuente-titulo); font-weight: var(--peso-titulo); font-size: var(--t-md); color: var(--negro); }
.mr-op__estrellas { color: var(--oro-texto); font-size: var(--t-base); letter-spacing: .12em; }
/* MR-FIX95: la reseña se recorta a 8 líneas, o todas las tarjetas se estiran a la más larga y las
   cortas quedan con una franja vacía. Ninguna desaparece: `mr-v2.js` pone «Leer entera» en las
   que quedan recortadas, porque las tarjetas ya no enlazan a la reseña en Google. */
.mr-op p { font-size: var(--t-base); color: var(--texto-cuerpo); margin: 0 0 var(--e3); order: 1;
           display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 8; line-clamp: 8; overflow: hidden; }
.mr-op--entera p { display: block; -webkit-line-clamp: unset; line-clamp: none; overflow: visible; }
.mr-op__leer { order: 1; align-self: flex-start; display: inline-flex; align-items: center; min-height: 44px;
               margin: calc(-1 * var(--e3)) 0 var(--e2); padding: 0; border: 0; background: none; cursor: pointer;
               font: inherit; font-size: var(--t-sm); font-weight: var(--peso-fuerte);
               color: var(--oro-texto); text-decoration: underline; text-underline-offset: 3px; }
.mr-op__leer:hover { color: var(--negro); }
.mr-op__leer[hidden] { display: none; }
.mr-seccion--oscura .mr-op__leer { color: var(--oro); }
.mr-seccion--oscura .mr-op__leer:hover { color: var(--blanco); }
.mr-seccion--oscura .mr-op__nombre { color: var(--blanco); }
.mr-seccion--oscura .mr-op__estrellas { color: var(--oro); }
.mr-seccion--oscura .mr-op p { color: var(--texto-sobre-oscuro); }
.mr-seccion--oscura .mr-op__quien { padding-top: var(--e3); border-top: 1px solid var(--filete-sobre-oscuro); }

.mr-ops__flechas { display: flex; gap: var(--e1); margin-top: var(--e3); }
.mr-ops__flecha {
  width: 52px; height: 52px; border-radius: var(--r-pil);
  /* Fondo propio y opaco: un control pequeño que tiene que verse siempre no toma el contraste
     prestado del fondo de la sección (regla de construcción del 2026-09-01). */
  border: 1px solid var(--borde-control); background: var(--blanco);
  color: var(--negro); 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),
              color var(--t-rapido) var(--curva);
}
.mr-ops__flecha:hover { border-color: var(--oro-boton); background: var(--oro-boton); color: var(--blanco); }
.mr-seccion--oscura .mr-ops__flecha { color: var(--blanco); border-color: rgba(255,255,255,.35); background: var(--negro-2); }
.mr-seccion--oscura .mr-ops__flecha:hover { border-color: var(--oro); background: var(--oro); color: var(--negro); }

/* El borde por el que asoma una tarjeta partida se difumina; lo decide mr-v2.js. Por debajo de
   380 px el difuminado es más corto: de la tarjeta siguiente solo asoma el borde (su texto empieza
   fuera del carril) y 72 px ya mordían la última letra de la que se lee (medido a 360). */
.mr-ops__carril { --difumina: 72px; }
@media (max-width: 379px) { .mr-ops__carril { --difumina: 48px; } }
.mr-ops__carril[data-hay-mas="der"] {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - var(--difumina)), transparent);
          mask-image: linear-gradient(to right, #000 calc(100% - var(--difumina)), transparent);
}
.mr-ops__carril[data-hay-mas="izq"] {
  -webkit-mask-image: linear-gradient(to left, #000 calc(100% - var(--difumina)), transparent);
          mask-image: linear-gradient(to left, #000 calc(100% - var(--difumina)), transparent);
}
.mr-ops__carril[data-hay-mas="ambos"] {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--difumina), #000 calc(100% - var(--difumina)), transparent);
          mask-image: linear-gradient(to right, transparent, #000 var(--difumina), #000 calc(100% - var(--difumina)), transparent);
}

/* ==========================================================================
   Contacto, datos y mapa
   ========================================================================== */
/* El formulario en la caja de la página de contacto de la demo, en BLANCO con filete: el crema no
   va en los bloques (2026-09-15). La clase conserva su nombre porque la usan las sondas. */
.mr-caja-crema { background: var(--blanco); border: 1px solid var(--borde-fuerte); border-radius: var(--r-tarjeta);
                 padding: clamp(1.5rem, 1rem + 2vw, 3rem); }

/* El mapa se ve SIN consentimiento y sin fachada (directiva del operador del 2026-08-22). */
.mr-mapa { border-radius: var(--r-foto); overflow: hidden; border: 1px solid var(--borde); }
.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: center; gap: var(--e2); margin-bottom: var(--e2); line-height: 1.5; }
.mr-datos svg { flex: 0 0 auto; box-sizing: content-box; width: 20px; height: 20px; padding: 13px;
                border-radius: var(--r-pil); background: var(--oro); color: var(--blanco); }
.mr-datos a { color: var(--negro); font-weight: var(--peso-fuerte); text-decoration: none; }
.mr-datos a:hover { color: var(--oro-texto); text-decoration: underline; }

/* El mapa llena el alto que le deja el formulario: las dos columnas terminan juntas. */
@media (min-width: 640px) {
  .mr-rejilla--2 > div:has(> .mr-mapa) { display: flex; flex-direction: column; }
  .mr-rejilla--2 > div:has(> .mr-mapa) > .mr-mapa { flex: 1 1 auto; display: flex; flex-direction: column; }
  .mr-rejilla--2 > div:has(> .mr-mapa) > .mr-mapa iframe { flex: 1 1 auto; height: auto; min-height: 340px; }
}

/* Panel de reparto cuando el navegador bloquea la ventana de WhatsApp. Lo pinta `rescate()`
   de mr-v2.js y es el contrato de la sonda whatsapp_no_abre: se lee como aviso. */
.mr-handoff { border: 1px solid var(--negro); border-radius: var(--r-tarjeta);
              background: var(--blanco); padding: var(--e4); }
.mr-handoff-t { font-family: var(--fuente-titulo); font-weight: var(--peso-titulo); color: var(--negro);
                font-size: var(--t-lg); margin: 0 0 var(--e2); line-height: 1.3; }
.mr-handoff-s { margin: 0; }
.mr-handoff .mr-boton { width: 100%; }
.mr-handoff textarea { font-size: var(--t-sm); border: 1px solid var(--borde-control);
                       border-radius: var(--r-campo); padding: var(--e3); background: var(--blanco); color: var(--negro); }

/* ==========================================================================
   Pie: negro, columnas y la franja inferior en tarjeta #151515 de la demo
   ========================================================================== */
.mr-pie { background: var(--negro); color: var(--texto-sobre-oscuro);
          padding-block: clamp(3.5rem, 2rem + 4vw, 6rem) clamp(1.5rem, 1rem + 2vw, 3.75rem);
          --enlace-encima: var(--blanco); --titulo: var(--blanco); }
/* Los enlaces del pie con 4 px de relleno: 27 px de toque, por encima de los 24 (2026-09-23).
   Fuera los botones y el logo con `:where`, que no suma especificidad: escrita a secas, esta
   regla (0,1,1) le ganaba a `.mr-boton` (0,1,0) y el botón del pie perdía el centrado, el
   relleno y el color del texto; y el logo perdía el `inline-flex` (medido el 2026-10-18). */
.mr-pie a:where(:not(.mr-boton, .mr-pie__logo)) { color: var(--texto-sobre-oscuro); text-decoration: none;
            font-size: var(--t-base); display: inline-block; padding-block: 4px; }
.mr-pie a:where(:not(.mr-boton, .mr-pie__logo)):hover { color: var(--oro); text-decoration: underline; }
.mr-pie :focus-visible { outline-color: var(--oro); }
.mr-pie__rejilla { display: grid; gap: var(--e5) var(--e4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .mr-pie__rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .mr-pie__rejilla { grid-template-columns: 1.35fr 1fr 0.8fr 1fr; } }
.mr-pie h2, .mr-pie h3 { font-family: var(--fuente-titulo); font-weight: var(--peso-titulo);
                         font-size: var(--t-h4); color: var(--blanco); margin-bottom: var(--e3); }
.mr-pie h2 { font-size: var(--t-lg); }
.mr-pie ul { list-style: none; margin: 0; padding: 0; }
.mr-pie li { margin-bottom: 6px; font-size: var(--t-base); line-height: 1.6; }
.mr-pie li:not(:has(> a)) { padding-block: 4px; }
.mr-pie p { color: var(--texto-sobre-oscuro); font-size: var(--t-base); }
.mr-pie__marca .mr-botonera { margin-top: var(--e3); }
.mr-pie__contacto a { color: var(--blanco); font-family: var(--fuente-titulo); font-weight: var(--peso-titulo);
                      font-size: var(--t-md); }

.mr-pie__franja { margin-top: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); background: var(--negro-2);
                  border-radius: var(--r-bloque); padding: var(--e3) clamp(1.25rem, 0.5rem + 2.6vw, 2.5rem); }
.mr-pie__franja-fila { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
                       gap: var(--e2) var(--e4); padding-bottom: var(--e3);
                       border-bottom: 1px solid var(--filete-sobre-oscuro); }
.mr-pie__logo { display: inline-flex; align-items: center; gap: 12px; }
.mr-pie__logo img { width: 52px; height: 52px; border-radius: var(--r-pil); }
.mr-pie a.mr-pie__logo { font-family: var(--fuente-titulo); font-weight: var(--peso-titulo);
                         font-size: var(--t-lg); color: var(--blanco); text-decoration: none; }
.mr-pie__enlaces { display: flex; flex-wrap: wrap; gap: 0 var(--e3); }
.mr-pie__enlaces li { margin: 0; }
.mr-pie__legal { margin-top: var(--e3); display: flex; flex-wrap: wrap; gap: var(--e1) var(--e3);
                 align-items: center; justify-content: space-between;
                 font-size: var(--t-sm); color: var(--texto-sobre-oscuro-suave); }
.mr-pie__franja .mr-pie__legal { margin-top: var(--e3); padding-top: 0; border-top: 0; }

/* ==========================================================================
   Entrada por desplazamiento. El rescate va por CERCANÍA, no por tiempo (mr-v2.js), y sin
   JavaScript no queda nada invisible: la clase que oculta la pone el propio JS.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .mr-js .mr-entra { opacity: 0; transform: translateY(26px);
                     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; }
}

/* ==========================================================================
   Utilidades
   ========================================================================== */
.mr-centrado { text-align: center; }
.mr-medida   { max-width: var(--ancho-texto); }
.mr-ancho-medio { max-width: var(--ancho-medio); }
.mr-sin-margen  { margin: 0; }
.mr-mt-3 { margin-top: var(--e3); }
.mr-mt-4 { margin-top: var(--e4); }
/* La botonera de «Cómo funciona» la llevaba sin regla y quedaba pegada a las tarjetas (id=3944). */
.mr-mt-5 { margin-top: var(--e5); }
.mr-mb-3 { margin-bottom: var(--e3); }
.mr-nota { font-size: var(--t-sm); color: var(--texto-cuerpo); line-height: 1.6; }
figcaption.mr-nota { font-size: var(--t-sm); color: var(--texto-cuerpo); line-height: 1.6; margin-top: 10px; }

/* Retrato junto a un texto: en escritorio toma el alto de la FILA entre 340 y 520 px, para
   que no deje un blanco encima y debajo del texto (2026-09-28). */
.mr-foto-alta { width: 100%; max-height: 32rem; object-fit: cover; object-position: 50% 30%;
                border-radius: var(--r-foto); }
@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); margin: 0; }
  .mr-rejilla--2 > figure:has(.mr-foto-alta) .mr-foto-alta { position: absolute; inset: 0; height: 100%; max-height: none; }
}

/* Las cuatro reformas antes y después: misma proporción para las cuatro, recortadas por abajo
   (arriba va el rótulo impreso), o los pies de la misma fila bailan (2026-09-27). */
.mr-rejilla > figure > img[src*="/antes-despues/"] { aspect-ratio: 432 / 611; object-fit: cover;
                                                        object-position: 50% 0; border-radius: var(--r-foto); }
.mr-rejilla > figure { margin: 0; }
/* En el móvil, las cuatro reformas en fila deslizable: apiladas eran cuatro pantallas seguidas
   de antes y después (medido el 2026-10-18). La siguiente asoma un 18 % para que se vea que hay
   más, y la fila llega a los bordes de la pantalla como el carril de opiniones. */
@media (max-width: 639px) {
  .mr-rejilla--4:has(> figure > img[src*="/antes-despues/"]) {
    grid-auto-flow: column; grid-auto-columns: 82%; gap: var(--e2);
    overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    margin-inline: calc(-1 * var(--aire-lateral)); padding-inline: var(--aire-lateral);
    scroll-padding-inline: var(--aire-lateral); scrollbar-width: none;
  }
  .mr-rejilla--4:has(> figure > img[src*="/antes-despues/"])::-webkit-scrollbar { display: none; }
  .mr-rejilla--4 > figure:has(> img[src*="/antes-despues/"]) { scroll-snap-align: start; }
}

/* ==========================================================================
   Composiciones de la portada
   ========================================================================== */

/* Dividida: titular fijo a la izquierda mientras se lee la derecha. */
@media (min-width: 960px) {
  .mr-dividida { display: grid; grid-template-columns: 5fr 7fr; gap: var(--e6); align-items: start; }
  .mr-dividida > .mr-cab { position: sticky; top: calc(var(--alto-cabecera) + var(--e4)); margin-bottom: 0; }
}

/* Filas: cada una con su número dorado de la demo y un filete fino debajo. */
.mr-filas { counter-reset: fila; border-top: 1px solid var(--borde-fuerte); }
.mr-filas > * { counter-increment: fila; display: grid; gap: var(--e1); padding-block: var(--e4);
                border-bottom: 1px solid var(--borde-fuerte); }
.mr-filas > *::before { content: counter(fila, decimal-leading-zero); font-family: var(--fuente-titulo);
                        font-weight: var(--peso-titulo); font-size: var(--t-lg); line-height: 1;
                        color: var(--oro-boton); }
.mr-filas h3 { font-size: var(--t-lg); margin: 0; transition: transform var(--t-medio) var(--curva); }
.mr-filas p { color: var(--texto-cuerpo); }
.mr-seccion--oscura .mr-filas { border-top-color: var(--filete-sobre-oscuro); }
.mr-seccion--oscura .mr-filas > * { border-bottom-color: var(--filete-sobre-oscuro); }
.mr-seccion--oscura .mr-filas > *::before { color: var(--oro); }
@media (min-width: 640px) {
  .mr-filas > * { grid-template-columns: 4rem minmax(0, 2fr) minmax(0, 3fr); gap: var(--e3); align-items: baseline; }
  .mr-filas > * > :not(h3) { grid-column: 3; }
  .mr-filas > * > h3 { grid-column: 2; grid-row: 1 / span 4; }
}
@media (min-width: 960px) {
  .mr-dividida .mr-filas > * { grid-template-columns: 3.5rem minmax(0, 1fr); gap: var(--e1) var(--e3); }
  .mr-dividida .mr-filas > * > h3 { grid-column: 2; grid-row: auto; }
  .mr-dividida .mr-filas > * > :not(h3) { grid-column: 2; }
  .mr-dividida .mr-filas > *::before { grid-row: 1 / span 4; }
}
@media (prefers-reduced-motion: no-preference) { .mr-filas > :hover h3 { transform: translateX(6px); } }

/* Servicios en negro: rejilla 3x2 con divisorias verticales, como «Why choose us». */
.mr-servicios { display: grid; grid-template-columns: minmax(0, 1fr); }
.mr-servicios > * { padding: var(--e4) 0; border-bottom: 1px solid var(--filete-sobre-oscuro); }
.mr-servicios h3 { font-size: var(--t-h4); margin-bottom: var(--e1); }
/* id=3945: en la portada el nombre de cada servicio NO es titular (su palabra clave es de su
   página), pero se ve exactamente como lo era: la misma letra, tamaño, color y aire que el h3. */
.mr-servicios .mr-servicios__nombre { font-family: var(--fuente-titulo); font-weight: var(--peso-titulo);
  font-size: var(--t-h4); line-height: var(--alto-sub); letter-spacing: 0; color: var(--titulo);
  margin: 0 0 var(--e1); max-width: none; text-wrap: balance; }
.mr-servicios h3 a { color: var(--blanco); text-decoration: none; }
.mr-servicios h3 a:hover { color: var(--oro); }
.mr-servicios p { color: var(--texto-sobre-oscuro); }
.mr-servicios .mr-enlace-flecha { margin-top: var(--e2); }
@media (min-width: 640px) {
  .mr-servicios { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--e4); }
}
@media (min-width: 960px) {
  .mr-servicios { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 0; }
  .mr-servicios > * { padding: var(--e5) var(--e4); border-bottom: 0; }
  .mr-servicios > :nth-child(3n+1) { padding-left: 0; }
  .mr-servicios > :not(:nth-child(3n+1)) { border-left: 1px solid var(--filete-sobre-oscuro); }
  .mr-servicios > :nth-child(-n+3) { border-bottom: 1px solid var(--filete-sobre-oscuro); }
}

/* Enlace con flecha en círculo, el «Read more» de la demo. */
.mr-enlace-flecha { display: inline-flex; align-items: center; gap: 12px; min-height: 44px;
                    font-family: var(--fuente-titulo); font-weight: var(--peso-titulo); font-size: var(--t-base);
                    color: var(--negro); text-decoration: none; }
.mr-enlace-flecha::after { content: ""; width: 40px; height: 40px; flex: 0 0 40px; border-radius: var(--r-pil);
                           border: 1px solid var(--borde-fuerte); background: var(--flecha) center / 18px no-repeat;
                           transition: background-color var(--t-medio) var(--curva), border-color var(--t-medio) var(--curva); }
.mr-enlace-flecha:hover { color: var(--oro-texto); }
.mr-enlace-flecha:hover::after { background-color: var(--oro); border-color: var(--oro); }
.mr-seccion--oscura .mr-enlace-flecha,
.mr-seccion--oscura a.mr-enlace-flecha { color: var(--blanco); }
.mr-seccion--oscura .mr-enlace-flecha::after { border-color: rgba(255,255,255,.3); background-image: var(--flecha-blanca); }
.mr-seccion--oscura .mr-enlace-flecha:hover::after { background-color: var(--oro); border-color: var(--oro); background-image: var(--flecha); }

/* Casos: tarjetas blancas en dos columnas. */
.mr-casos { display: grid; gap: var(--e3); }
.mr-casos > * { background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--r-tarjeta);
                padding: clamp(1.5rem, 1.1rem + 1.4vw, 2.5rem); }
.mr-casos h3 { font-size: var(--t-h4); margin-bottom: var(--e1); }
.mr-casos p { color: var(--texto-cuerpo); }
@media (min-width: 640px) { .mr-casos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Frase grande con las cifras dentro (la antigua franja de oro). */
.mr-cartel { font-family: var(--fuente-titulo); font-size: var(--t-lg); font-weight: var(--peso-medio);
             line-height: 1.35; max-width: 46ch; margin: 0; text-wrap: pretty; color: var(--negro); }
.mr-cartel strong { font-weight: 700; color: var(--negro); }

/* Cinta de palabras en movimiento, como la de la demo. Es decoración: va con `aria-hidden` y
   no existe para quien pide menos movimiento (se queda quieta). */
.mr-cinta { overflow: hidden; border-block: 1px solid var(--borde); padding-block: var(--e3); }
.mr-cinta__pista { display: flex; width: max-content; gap: var(--e5); align-items: center;
                   animation: mr-cinta 38s linear infinite; }
.mr-cinta__pista span { display: inline-flex; align-items: center; gap: var(--e5);
                        font-family: var(--fuente-titulo); font-weight: var(--peso-titulo);
                        font-size: clamp(2rem, 1.2rem + 3.4vw, 4.5rem); line-height: 1.1;
                        color: var(--negro); white-space: nowrap; }
.mr-cinta__pista span::after { content: ""; width: 56px; height: 56px; border-radius: var(--r-pil);
                               background: var(--oro) var(--flecha-blanca) center / 24px no-repeat; }
@keyframes mr-cinta { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .mr-cinta__pista { animation: none; } }

/* Foto con esquina de la demo dentro de una composición. */
.mr-foto { margin: 0; }
.mr-foto img { width: 100%; border-radius: var(--r-foto); object-fit: cover; }
.mr-foto figcaption { margin-top: 10px; font-size: var(--t-sm); line-height: 1.6; color: var(--texto-cuerpo); }
.mr-seccion--oscura .mr-foto figcaption { color: var(--texto-sobre-oscuro-suave); }

/* ==========================================================================
   Índice del blog: filtros en píldora y tarjetas de artículo
   ========================================================================== */
.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-fuerte);
  display: inline-flex; align-items: center; gap: var(--e1);
  min-height: 44px; padding: 0 20px; flex: 0 0 auto;
  border: 1px solid var(--borde-fuerte); border-radius: var(--r-pil);
  background: var(--blanco); color: #555555; 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(--negro); color: var(--negro); }
.mr-filtro[aria-pressed="true"] { background: var(--negro-2); border-color: var(--negro-2); color: var(--blanco); }
/* El número, con color propio y sin opacidad: #555 al 70 % sobre blanco daba #888, 3,54:1 a 13 px
   (barrido de fondo del v3, 2026-10-18). */
.mr-filtro__n { font-size: var(--t-xs); color: var(--gris-texto); }
.mr-filtro[aria-pressed="true"] .mr-filtro__n { color: var(--texto-sobre-oscuro); }
.mr-filtros__estado { margin-block: 0 var(--e3); }
@media (min-width: 1200px) {
  .mr-filtros { flex-wrap: wrap; overflow-x: visible; margin-inline: 0; padding-inline: 0; }
}

.mr-rejilla-art { display: grid; gap: var(--e4) var(--e3); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .mr-rejilla-art { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .mr-rejilla-art { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* La tarjeta del blog de la demo: blanca, foto con esquina, tema en píldora y «Leer» con
   flecha. Al pasar el ratón no se levanta ni se amplía la foto (2026-10-16). */
.mr-art {
  display: flex; flex-direction: column;
  border: 1px solid var(--borde); border-radius: var(--r-tarjeta);
  background: var(--blanco); overflow: hidden; padding: 10px;
  transition: border-color var(--t-medio) var(--curva);
}
.mr-art:hover { border-color: rgba(183,155,111,.7); }
.mr-art__foto { display: block; overflow: hidden; border-radius: var(--r-foto); background: var(--crema); }
.mr-art__foto img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.mr-art__cuerpo { padding: var(--e3) 14px 14px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.mr-art__cat { align-self: flex-start; display: inline-flex; padding: 3px 14px; border-radius: var(--r-pil);
               background: var(--crema); font-size: var(--t-xs); font-weight: var(--peso-fuerte); color: var(--oro-texto); }
.mr-art__t { font-size: var(--t-h4); line-height: var(--alto-tarjeta); margin: 0; }
.mr-art__t a { color: var(--negro); text-decoration: none; }
.mr-art__t a:hover { color: var(--oro-texto); text-decoration: underline; }
.mr-art__d { font-size: var(--t-base); color: var(--texto-cuerpo); margin: 0; max-width: none; line-height: 1.75; }
/* El pie se pega abajo: todas las tarjetas de una fila terminan igual (simetría de la flota). */
.mr-art__pie { font-size: var(--t-sm); color: var(--texto-cuerpo); margin: auto 0 0; padding-top: var(--e2);
               border-top: 1px solid var(--borde); }
@media (prefers-reduced-motion: reduce) { .mr-art { transition: none; } }

/* Índice del blog a tres columnas con la guía más reciente destacada a lo ancho: 1 + 33 dan
   doce filas exactas. «Más guías» de cada artículo sigue a cuatro, que es una fila exacta. */
@media (min-width: 960px) {
  .mr-rejilla-art[data-lista-articulos] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mr-rejilla-art[data-lista-articulos] > .mr-art:first-child { grid-column: 1 / -1; flex-direction: row; }
  /* Tope de 640 px: las miniaturas del blog son de 800 px, y al 55 % la destacada medía 725 a
     1.440 (densidad 1,1, blanda en cualquier pantalla de alta densidad; medido el 2026-10-18 por
     `_tarjetas_blog_anchos.mjs`). 800 / 1,25 = 640, y el texto se queda con el resto. */
  .mr-rejilla-art[data-lista-articulos] > .mr-art:first-child .mr-art__foto { flex: 0 0 min(55%, 640px); }
  .mr-rejilla-art[data-lista-articulos] > .mr-art:first-child .mr-art__foto img { height: 100%; aspect-ratio: auto; min-height: 320px; }
  .mr-rejilla-art[data-lista-articulos] > .mr-art:first-child .mr-art__cuerpo { justify-content: center; padding: var(--e3) var(--e5); }
  .mr-rejilla-art[data-lista-articulos] > .mr-art:first-child .mr-art__t { font-size: var(--t-titulo-guia); }
  .mr-rejilla-art:not([data-lista-articulos]) .mr-art__t { font-size: var(--t-subtitulo); }
}
/* De 960 a 1.199 la destacada lleva el texto de una tarjeta normal: con relleno y titular
   grandes, la foto perdía hasta el 31 % del encuadre (2026-10-16). */
@media (min-width: 960px) and (max-width: 1199px) {
  .mr-rejilla-art[data-lista-articulos] > .mr-art:first-child .mr-art__cuerpo { padding: var(--e3); }
  .mr-rejilla-art[data-lista-articulos] > .mr-art:first-child .mr-art__t { font-size: var(--t-h4); }
}
@media (max-width: 959px) {
  .mr-rejilla-art[data-lista-articulos] > .mr-art:first-child .mr-art__foto img { aspect-ratio: auto 4 / 3; }
}
@media (min-width: 640px) and (max-width: 959px) {
  .mr-rejilla-art[data-lista-articulos] > .mr-art:first-child { grid-column: 1 / -1; flex-direction: row; align-items: center; }
  .mr-rejilla-art[data-lista-articulos] > .mr-art:first-child .mr-art__foto { flex: 0 0 calc(50% - var(--e4) / 2); }
}

/* ==========================================================================
   Guías del blog: el artículo con su lateral de cajas crema, como la entrada de la demo
   ========================================================================== */

/* Barra de progreso de lectura, arriba del todo y sin ocupar alto. */
.mr-progreso { position: fixed; top: 0; left: 0; right: 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(--e3) var(--ritmo-seccion); }
.mr-post__cabecera { max-width: 860px; margin-bottom: var(--e4); }
.mr-post__cabecera h1 { margin-block: var(--e2) var(--e3); font-size: var(--t-2xl); line-height: 1.15; }
/* La respuesta directa: más grande que el cuerpo, porque contesta la pregunta del lector. */
.mr-post__entrada { font-size: var(--t-md); color: var(--gris-oscuro); line-height: 1.75; max-width: none; margin-bottom: var(--e3); }
.mr-post__entrada a { font-weight: var(--peso-fuerte); }
.mr-post__meta { font-size: var(--t-sm); color: var(--texto-cuerpo); 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-tarjeta); }
.mr-post__portada figcaption,
.mr-post__foto figcaption { font-size: var(--t-sm); color: var(--texto-cuerpo); margin-top: var(--e1); line-height: 1.6; }
.mr-post__rejilla { display: grid; gap: var(--e5); grid-template-columns: minmax(0, 1fr); }

/* El cuerpo de lectura algo más oscuro que el resto (#555, 7,5): es texto largo. */
.mr-post__cuerpo { min-width: 0; color: #555555; font-size: 1.0625rem; }
.mr-post__cuerpo strong { color: var(--negro); }
/* Todos los H2 y H3 del cuerpo, no solo los hijos directos: en 27 guías la prosa va dentro
   de un `div` (2026-09-28). Los que traen tamaño en línea lo conservan. */
.mr-post__cuerpo h2 { margin-block: var(--e5) var(--e2); scroll-margin-top: calc(var(--alto-cabecera) + var(--e3));
                      font-size: var(--t-titulo-guia); line-height: var(--alto-subtitulo); color: var(--negro); }
.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));
                      font-size: var(--t-subtitulo); line-height: var(--alto-subtitulo); color: var(--negro); }
/* El párrafo llena la columna, como en el artículo de la demo (869 px a 16 px, medido el
   2026-10-18). Con el tope de 44rem la foto flotada de 400 px dejaba al texto 280 px y una
   franja vacía de 200 px a su derecha, alineada con nada. */
.mr-post__cuerpo p { max-width: none; }
.mr-post__cuerpo .mr-contenedor { margin-inline: 0; padding-inline: 0; }
/* Los botones del cuerpo quedan fuera: con `a` a secas esta regla (0,1,1) le ganaba a
   `.mr-boton--oro` (0,1,0) y el texto salía dorado sobre el botón dorado (2026-10-18). */
.mr-post__cuerpo a:not(.mr-boton, .mr-post-btn, .mr-cta-btn, .btn-gold) { color: var(--oro-texto); }
.mr-post__cuerpo a:not(.mr-boton, .mr-post-btn, .mr-cta-btn, .btn-gold):hover { color: var(--negro); }

/* Índice: en la caja de la lateral de la demo, BLANCA con filete (el crema no va en los bloques,
   2026-09-15). Desplegado siempre. */
.mr-post__indice { background: var(--blanco); border: 1px solid var(--borde-fuerte); border-radius: var(--r-tarjeta); padding: var(--e4);
                   margin-bottom: var(--e4); overflow-wrap: anywhere; }
.mr-post__indice-t { font-family: var(--fuente-titulo); font-weight: var(--peso-titulo); font-size: var(--t-h4);
                     color: var(--negro); margin: 0 0 var(--e3); padding-bottom: 12px; position: relative; }
.mr-post__indice-t::after,
.mr-post__ficha-t::after,
.mr-post__relacionadas > :is(h2, h3, p:first-child)::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 40px; height: 2px; background: var(--oro);
}
.mr-post__indice ol { margin: 0; padding-left: 1.2em; font-size: var(--t-base); }
.mr-post__indice li { margin-bottom: 8px; line-height: 1.55; }
.mr-post__indice li::marker { color: var(--oro-texto); font-weight: var(--peso-fuerte); }
.mr-post__indice a { color: var(--gris-oscuro); text-decoration: none; }
.mr-post__indice a:hover { color: var(--oro-texto); text-decoration: underline; }
/* El segundo nivel se numera «3.1», «3.2», con el contador que el navegador ya lleva. */
.mr-post__indice ol ol { margin-top: 8px; font-size: var(--t-sm); padding-left: var(--e4); }
.mr-post__indice ol ol > li::marker { content: counters(list-item, ".") ". "; }

.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-foto); }

/* Recuadro de aviso, para el dato que cuesta dinero si se pasa por alto: caja BLANCA con 1 px de
   tinta. La cita de la demo (crema con filete dorado a la izquierda) es justo el rasgo que el
   operador quitó dos veces: «cajas crema con borde izquierdo de color» (id=1659 e id=3433). */
.mr-aviso { border: 1px solid var(--negro); border-radius: var(--r-foto);
            background: var(--blanco); padding: var(--e3) var(--e4); margin-block: var(--e3); color: var(--gris-oscuro); }
.mr-aviso p { margin: 0; max-width: none; }
.mr-aviso p + p { margin-top: var(--e1); }
/* El párrafo del aviso va sin margen, así que un botón detrás quedaba a 0 px del texto (id=3944,
   barrido de las 93 páginas: «Ir a la calculadora de renta» en la guía de por cuánto alquilar).
   Mismo hueco que deja cualquier párrafo antes de un botón. */
.mr-aviso p + .mr-boton { margin-top: var(--e2); }

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

/* La fuente primaria se ve: es lo que separa una guía de una opinión. */
.mr-fuente { font-size: var(--t-sm); color: var(--texto-cuerpo); line-height: 1.6;
             border-left: 2px solid var(--oro); padding-left: var(--e2); margin-block: var(--e2) var(--e3); }

.mr-post__lateral { align-self: start; display: grid; gap: var(--e4); align-content: start; }
/* La ficha lateral fija se conserva (le gusta al operador, 2026-09-23), ahora en la caja negra
   «Contacta» de la página de servicio de la demo. */
.mr-post__ficha { background: var(--negro); color: var(--texto-sobre-oscuro); border-radius: var(--r-tarjeta);
                  padding: var(--e4); --enlace-encima: var(--blanco); --titulo: var(--blanco); }
.mr-post__ficha-t { font-family: var(--fuente-titulo); font-weight: var(--peso-titulo); font-size: var(--t-h4);
                    color: var(--blanco); margin: 0 0 var(--e3); padding-bottom: 12px; position: relative; line-height: 1.3; }
.mr-post__ficha p { font-size: var(--t-base); color: var(--texto-sobre-oscuro); max-width: none; line-height: 1.7; }
.mr-post__ficha p + .mr-boton { margin-top: var(--e3); }
.mr-post__ficha .mr-boton { width: 100%; }
.mr-post__ficha .mr-boton + .mr-boton { margin-top: var(--e2); }
.mr-post__ficha .mr-boton--linea { color: var(--blanco); border-color: rgba(255,255,255,.45); }
.mr-post__ficha .mr-boton--linea:hover { background: var(--blanco); color: var(--negro); }
.mr-post__ficha .mr-boton--oro:hover { background: var(--blanco); color: var(--negro); }
.mr-post__ficha :focus-visible { outline-color: var(--oro); }
/* El número escrito bajo los botones de la ficha (el operador lo pidió ahí). En flex: en línea,
   el rótulo y el número quedaban 3,3 px desnivelados. */
.mr-post__ficha-tel { margin-top: var(--e2); font-size: var(--t-sm); color: var(--texto-sobre-oscuro);
                      text-align: center; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px; }
.mr-post__ficha-tel .mr-tel { display: inline-flex; min-height: 32px; padding-inline: 4px; color: var(--blanco); }
.mr-post__ficha-tel .mr-tel svg { color: var(--oro); }
.mr-post__ficha-tel .mr-tel:hover { color: var(--oro); }

/* Guías relacionadas en caja BLANCA con filete («Sigue informándote» va en blanco, 2026-09-15);
   lista de texto porque la columna es estrecha. */
.mr-post__relacionadas { background: var(--blanco); border: 1px solid var(--borde-fuerte); border-radius: var(--r-tarjeta); padding: var(--e4); }
.mr-post__relacionadas > :is(h2, h3, p:first-child) { font-family: var(--fuente-titulo); font-weight: var(--peso-titulo);
                                                       font-size: var(--t-h4); color: var(--negro); margin: 0 0 var(--e3);
                                                       padding-bottom: 12px; position: relative; line-height: 1.3; }
.mr-post__relacionadas ul { list-style: none; margin: 0; padding: 0; }
.mr-post__relacionadas li { margin: 0; }
.mr-post__relacionadas li + li { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--borde); }
/* 44 px de toque: un título de una línea medía 22 (2026-09-23). */
.mr-post__relacionadas a { display: flex; align-items: center; min-height: 44px; font-size: var(--t-base);
                           line-height: 1.5; color: var(--gris-oscuro); 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, 70fr) minmax(300px, 30fr); }
  /* Lo fijo es la FICHA, no la lateral entera: con la lista dentro, los últimos enlaces no se
     veían nunca (2026-10-10). El collar del color del fondo tapa la franja entre la cabecera
     y la ficha por donde asomaría la lista. */
  .mr-post__lateral { align-self: stretch; }
  .mr-post__ficha { position: sticky; top: calc(var(--alto-cabecera) + var(--e3)); z-index: 1; }
  .mr-post__ficha::before { content: ""; position: absolute; inset-inline: 0; bottom: calc(100% + 1px);
                            height: var(--e3); background: var(--fondo); }
  /* La lateral arranca a la altura del TITULAR (2026-10-10, juez con visión: «como si faltara
     algo a la derecha»): la rejilla cede sus columnas al contenedor con `display: contents`,
     con la misma condición `:has()` en las dos reglas. */
  .mr-post > .mr-contenedor:has(> .mr-post__rejilla) {
    display: grid; column-gap: var(--e5);
    grid-template-columns: minmax(0, 70fr) minmax(300px, 30fr);
    grid-template-rows: auto auto 1fr;
  }
  .mr-post > .mr-contenedor:has(> .mr-post__rejilla) > :not(.mr-post__rejilla) { grid-column: 1; }
  .mr-post > .mr-contenedor:has(> .mr-post__rejilla) > .mr-post__rejilla { display: contents; }
  .mr-post > .mr-contenedor:has(> .mr-post__rejilla) > .mr-post__rejilla > .mr-post__cuerpo { grid-column: 1; }
  .mr-post > .mr-contenedor:has(> .mr-post__rejilla) > .mr-post__rejilla > .mr-post__lateral {
    grid-column: 2; grid-row: 1 / -1; margin-top: var(--e2);
  }
}
/* Por debajo de 960 px la guía y lo que la sigue sobre el mismo fondo sumaban dos rellenos:
   88 px en blanco a 390 (2026-10-09). El encuentro mide uno. */
@media (max-width: 959px) {
  .mr-post:has(+ .mr-seccion:not(.mr-seccion--alterna, .mr-seccion--oscura)) { padding-block-end: 0; }
  .mr-post + .mr-seccion:not(.mr-seccion--alterna, .mr-seccion--oscura) { padding-block-start: var(--e5); }
}

/* Techo de altura de la foto centrada del cuerpo: un retrato ocupaba 1,06 pantallas. 440 px como
   mucho, el mismo que la foto sola (MR-FIX107: la foto sin prosa va centrada y acotada a 440). */
.mr-post__cuerpo .mr-centro img { max-height: clamp(320px, 46vh, 440px); width: auto; margin-inline: auto; }

/* ==========================================================================
   Compatibilidad: el cuerpo heredado de las 28 guías antiguas, copiado TAL CUAL al pasar a v2
   (70.505 palabras que no se pueden regenerar). Aquí viven las clases que usa. No se borran
   «por limpiar»: el día que no aparezcan en ningún fichero, el censo lo dirá.
   ========================================================================== */

/* Botones dentro del texto, en la píldora de la casa. En v3 `v3_transformar` les añade `mr-boton`
   (círculo y flecha de la demo) y estas reglas dejan de aplicarles: con su relleno de 28 px, que
   gana por ir detrás, la flecha pisaba el texto. */
.mr-post-btn:not(.mr-boton),
.mr-cta-btn:not(.mr-boton),
a.btn-gold:not(.mr-boton) {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e1);
  min-height: 52px; padding: 6px 28px; border: 1px solid transparent; border-radius: var(--r-bloque);
  background: var(--oro-boton); color: var(--blanco);
  font-family: var(--fuente-titulo); font-weight: var(--peso-fuerte); font-size: var(--t-base);
  line-height: 1.3; text-decoration: none; text-align: center;
  transition: background var(--t-medio) var(--curva), color var(--t-medio) var(--curva), transform var(--t-rapido) var(--curva);
}
.mr-post-btn:not(.mr-boton):hover, .mr-cta-btn:not(.mr-boton):hover { background: var(--negro-2); color: var(--blanco); transform: translateY(-2px); }
.mr-post-btn-sec:not(.mr-boton) { background: transparent; color: var(--negro); border-color: var(--borde-control); }
.mr-post-btn-sec:not(.mr-boton):hover { background: var(--negro); color: var(--blanco); border-color: var(--negro); }
/* `btn-gold` vive en el bloque negro del final de 21 guías: su hover ACLARA (2026-09-23). */
a.btn-gold:not(.mr-boton):hover { background: var(--blanco); color: var(--negro); transform: translateY(-2px); }
@media (max-width: 639px) { a.btn-gold:not(.mr-boton) { padding-inline: var(--e3); } }
/* Botón de vuelta de las páginas legales. */
a.btn-ghost-light { display: inline-flex; align-items: center; min-height: 48px; padding: 6px 26px;
                    border: 1px solid var(--borde-control); border-radius: var(--r-pil);
                    color: var(--negro); text-decoration: none; font-family: var(--fuente-titulo); font-weight: var(--peso-fuerte); }
a.btn-ghost-light:hover { background: var(--negro); color: var(--blanco); border-color: var(--negro); }

/* Cualquier caja que el marcado heredado pinte negra le dice a sus enlaces hacia dónde virar. */
[style*="background:#0a0a0a"],
[style*="background: #0a0a0a"] { --enlace-encima: var(--oro); border-radius: var(--r-tarjeta); }

/* Blanca con filete: el crema no va en los bloques (2026-09-15). */
.mr-cta { border: 1px solid var(--borde-fuerte); border-radius: var(--r-tarjeta);
          background: var(--blanco); padding: var(--e4); margin-block: var(--e4); }
.mr-cta h2, .mr-cta h3 { margin-top: 0; }
.mr-cta p { text-wrap: balance; }

.mr-post-lead { font-size: var(--t-md); line-height: 1.75; color: var(--gris-oscuro); margin-bottom: var(--e4); max-width: none; }

/* Foto flotada junto a su texto (`figure.mr-post__foto.mr-par`, 59 fotos en 28 guías con
   ancho en línea): desde 640 px flota sin pasar del 46 %; por debajo va a lo ancho. */
.mr-post__cuerpo figure.mr-par { min-width: 100%; }
@media (min-width: 640px) {
  div.mr-par { display: flow-root; }
  .mr-post__cuerpo figure.mr-par,
  .mr-par > figure, .mr-par > .mr-post__foto { min-width: 0; max-width: 46%; float: left; margin: var(--e1) var(--e3) var(--e2) 0; }
  .mr-post__cuerpo figure.mr-par-der,
  .mr-par-der > figure, .mr-par-der > .mr-post__foto { float: right; margin: var(--e1) 0 var(--e2) var(--e3); }
  /* El H3 despeja SIEMPRE: corrección literal del operador, «Un H3 nunca queda al lado de la foto
     con su párrafo saltando debajo» (DESIGN_RULES.md). El hueco que eso dejaba con prosa corta
     (138 px en inmobiliaria, 2026-10-18) lo cierra `.mr-junto`: con menos de 105 palabras antes
     del H3, foto y texto van lado a lado en rejilla y no flotando.
     Las listas despejan también, nunca `flow-root` ni `overflow: hidden`, que las dejan estrujadas
     al lado de la foto: MR-FIX114, «Debería estar el resto de los bullet points abajo». */
  .mr-post__cuerpo :is(h2, h3, ul, ol, table, .mr-cta, .mr-aviso, .mr-post__botones, .mr-faq, .mr-guia-faq, figure:not(.mr-par)) { clear: both; }
}
/* Foto con prosa corta (menos de 105 palabras con la foto de 400 px; más con una estrecha, que
   deja más ancho al texto): lado a lado y el texto centrado en su altura, porque flotada el texto
   acababa antes que la foto (`junta_fotos`, 2026-10-18). La columna de la foto mide lo que la foto
   (`--ancho-foto`, que escribe el transformador): con 400 px fijos, una de 225 dejaba 175 vacíos. */
/* Foto sin texto bastante con el que ir al lado (una sección que es solo una lista, o una o dos
   frases): no flota, va centrada y acotada a 440 px de alto, como pide DESIGN_RULES («una foto
   centrada está bien, una foto con tres líneas al lado es el defecto»; `junta_fotos`, 2026-10-18).
   Acotada, no recortada: el ancho sale del alto con la proporción del fichero, porque `cover`
   dejaba un retrato 682x1024 en una franja apaisada y cortaba al sujeto. */
.mr-post__cuerpo figure.mr-foto-sola { width: fit-content; max-width: min(100%, 36rem); margin-inline: auto; text-align: center; }
.mr-post__cuerpo figure.mr-foto-sola img { display: block; width: auto; height: auto; max-width: 100%; max-height: 440px;
                                           margin-inline: auto; border-radius: var(--r-foto); }
.mr-junto { margin-block: var(--e3); }
.mr-junto__texto > :last-child { margin-bottom: 0; }
@media (min-width: 640px) {
  .mr-post__cuerpo .mr-junto { display: grid; grid-template-columns: minmax(0, var(--ancho-foto, 400px)) minmax(0, 1fr);
                               gap: var(--e3); align-items: center; clear: both; }
  .mr-post__cuerpo .mr-junto--der { grid-template-columns: minmax(0, 1fr) minmax(0, var(--ancho-foto, 400px)); }
  .mr-post__cuerpo .mr-junto--der > figure { order: 2; }
  .mr-post__cuerpo .mr-junto > figure.mr-par { float: none; max-width: none; margin: 0; }
}
.mr-par > figure img, .mr-par > .mr-post__foto img,
.mr-post__cuerpo figure.mr-par img { border-radius: var(--r-foto); }

.mr-faq { margin-block: var(--e4); }
.mr-faq-item { border: 1px solid var(--borde); border-radius: var(--r-tarjeta); 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-md); }
.mr-faq-item p:last-child { margin-bottom: 0; }
.mr-guia-faq { margin-block: var(--e4); }

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

.mr-inbound-hab { border-top: 1px solid var(--borde-fuerte); padding-top: var(--e3); margin-block: var(--e3); }

.mr-home-compare { width: 100%; border-collapse: collapse; margin-block: var(--e3); border-radius: var(--r-foto); overflow: hidden; }
.mr-home-compare th, .mr-home-compare td { border-bottom: 1px solid var(--borde); padding: var(--e2); text-align: start; color: var(--negro); }
.mr-home-compare th { font-weight: var(--peso-fuerte); background: var(--crema); }
.mr-home-compare thead th { background: var(--negro); color: var(--blanco); }

/* El cuerpo heredado puede traer anchos fijos y tablas anchas: que se arrastren dentro de su
   caja y no arrastren la página (desborde de 85 px a 390, 2026-09-28). */
.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 { width: 100%; }
@media (max-width: 639px) {
  .mr-post__cuerpo table:not([data-tarjetas]):has(tr > :nth-child(3)) { display: block; overflow-x: auto; }
  .mr-post__cuerpo table[data-tarjetas],
  .mr-post__cuerpo table[data-tarjetas] :is(tbody, tr, th, td) { display: block; }
  .mr-post__cuerpo table[data-tarjetas] thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .mr-post__cuerpo table[data-tarjetas] tr { margin-bottom: var(--e2); }
  .mr-post__cuerpo table[data-tarjetas] tr > * + * { margin-top: -1px; }
  .mr-post__cuerpo table[data-tarjetas] tbody tr > :first-child { font-weight: 700; color: var(--negro); }
  .mr-post__cuerpo table[data-tarjetas] td[data-etiqueta] { display: grid; gap: var(--e2); grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
  .mr-post__cuerpo table[data-tarjetas] td[data-etiqueta]::before { content: attr(data-etiqueta); color: var(--texto-cuerpo);
    font-weight: var(--peso-normal); text-align: start; white-space: normal; }
}
.mr-post__cuerpo pre, .mr-post__cuerpo code { overflow-x: auto; }

/* Zona pulsable de los enlaces que van solos en su línea (24 px de toque como mínimo). El
   relleno de un elemento en línea crece su caja sin tocar el alto de la línea; un ::after no
   valdría porque getBoundingClientRect no lo ve (2026-09-28). */
p > a:only-child:not(.mr-boton, .mr-enlace-flecha),
li > a:only-child:not(.mr-boton, .mr-enlace-flecha),
dd > a:only-child:not(.mr-boton, .mr-enlace-flecha),
a[href^="mailto:"]:not(.mr-boton, .mr-topbar__dato),
a[href^="tel:"]:not(.mr-tel, .mr-boton) { padding-block: 3px; }

/* ==========================================================================
   Páginas legales
   ========================================================================== */
/* Una sola columna de lectura (MR-FIX110, unos 75 caracteres) para párrafos, títulos y listas, y
   centrada bajo la banda del título, que va centrada. Con 56rem pegados a la izquierda los
   párrafos medían 608 px, títulos y listas 896, y a 1.440 quedaban 50 px a un lado y 494 al otro
   (revisión de fondo del v3, 2026-10-18). */
.mr-legal { max-width: var(--ancho-prosa); margin-inline: auto; font-size: var(--t-base); color: var(--texto-cuerpo); }
.mr-legal h2 { font-size: var(--t-h4); color: var(--negro); margin: var(--e5) 0 var(--e2); }
.mr-legal ul { margin-bottom: var(--e2); }
.mr-legal__vuelta { margin-top: var(--e4); }

/* ==========================================================================
   El aviso de cookies con la estética v3 (id=3944, 2026-10-19: «el estilo del banner es
   antiguo, no pega nada con la página actual»). mr-consent.js trae su propio <style> con Inter,
   botones de 8 px y el dorado claro de la primera versión; aquí se reviste con las letras, los
   colores y las píldoras de esta hoja, ganando con `body #mr-consent`. Ni su texto ni su lógica
   cambian, y «Rechazar» pesa lo mismo que «Configurar»: ninguna de las dos se esconde.
   En escritorio es una tarjeta en la esquina inferior derecha, con el margen de tarjeta de la
   cabecera: a lo ancho tapaba los botones del héroe, que van a la izquierda. En el móvil sigue
   pegado abajo a todo lo ancho, porque mr-v2.js solo sube la barra de botones si el aviso toca
   el borde.
   ========================================================================== */
body #mr-consent {
  background: var(--negro-2); color: var(--texto-sobre-oscuro);
  font: var(--peso-normal) var(--t-sm)/1.65 var(--fuente-texto);
  border-top: 1px solid var(--filete-sobre-oscuro); box-shadow: none;
}
body #mr-consent a { color: var(--oro); text-underline-offset: 3px; }
body #mr-consent a:hover { color: var(--blanco); }
body #mr-consent .mrc-btn {
  min-height: 46px; padding: 0 24px; border-radius: var(--r-bloque);
  font-family: var(--fuente-titulo); font-size: var(--t-sm); font-weight: var(--peso-fuerte); line-height: 1.2;
  transition: background-color var(--t-medio) var(--curva), color var(--t-medio) var(--curva),
              border-color var(--t-medio) var(--curva);
}
body #mr-consent .mrc-accept { background: var(--oro-boton); color: var(--blanco); border-color: var(--oro-boton); }
body #mr-consent :is(.mrc-reject, .mrc-config) { background: transparent; color: var(--blanco); border-color: rgba(255,255,255,.45); }
body #mr-consent .mrc-btn:hover { background: var(--blanco); color: var(--negro); border-color: var(--blanco); }
body #mr-consent .mrc-btn:focus-visible { outline: 2px solid var(--oro); outline-offset: 3px; }
body #mr-consent #mrc-panel { border-top-color: var(--filete-sobre-oscuro); }
body #mr-consent #mrc-panel input { accent-color: var(--oro-boton); }
@media (min-width: 960px) {
  body #mr-consent {
    left: auto; right: var(--marco); bottom: var(--marco); width: min(34rem, calc(100% - 2 * var(--marco)));
    padding: 22px 26px; border: 1px solid var(--filete-sobre-oscuro); border-radius: var(--r-tarjeta);
  }
  body #mr-consent .mrc-row { max-width: none; flex-direction: column; align-items: stretch; gap: var(--e2); }
  body #mr-consent p { flex: none; }
  body #mr-consent .mrc-actions { gap: var(--e1); }
  body #mr-consent .mrc-actions .mrc-btn { flex: 1 1 auto; }
  /* En las guías la ficha de contacto va a la derecha: ahí la tarjeta pasa a la izquierda. */
  body:has(.mr-post__lateral) #mr-consent { right: auto; left: var(--marco); }
}

/* ==========================================================================
   El aviso de cookies, más compacto en el móvil. No se toca mr-consent.js: solo se aprieta su
   caja, y se gana con especificidad (`body #mr-consent`) porque trae su propio <style>.
   ========================================================================== */
@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; }
  /* 44 px como mínimo, en una fila, comprobado a 390 y 360 (MR-FIX101). */
  body #mr-consent .mrc-btn { padding: 9px 12px; font-size: 12.5px; min-height: 44px; }
}

/* id=3944, mirada con visión del 19-10 en el móvil: «la barra blanca de acciones y el banner negro
   de cookies se tocan sin ninguna separación», entre los dos tapaban casi media pantalla y el
   aviso seguía siendo la franja de borde a borde de antes. Mientras el aviso está puesto, la barra
   fija se retira (los botones del héroe ya suben a la vista, regla del 2026-09-23) y vuelve en
   cuanto se contesta. El aviso pasa a ser la misma tarjeta que en escritorio, separada de los
   bordes por el margen de la cabecera (--marco), con los tres botones en una fila y del mismo
   ancho: «Rechazar» sigue pesando lo mismo que «Aceptar todas». */
@media (max-width: 959px) {
  body.mrc-banner-puesto .mr-barra { display: none; }
  body #mr-consent {
    left: var(--marco); right: var(--marco); bottom: calc(var(--marco) + env(safe-area-inset-bottom, 0px));
    padding: 14px 16px; border: 1px solid var(--filete-sobre-oscuro); border-radius: var(--r-tarjeta);
  }
  body #mr-consent .mrc-row { max-width: none; flex-direction: column; align-items: stretch; gap: var(--e1); }
  body #mr-consent p { flex: none; margin: 0; }
  body #mr-consent .mrc-actions { flex-wrap: nowrap; gap: var(--e1); }
  body #mr-consent .mrc-actions .mrc-btn { flex: 1 1 0; }
}

/* Mientras el aviso de cookies está puesto en el móvil, el héroe deja a la vista su botón
   principal (2026-09-23): fuera la foto de al lado y la entrada, y los botones suben por
   delante de las promesas. `mrc-banner-puesto` lo quita mr-consent.js al contestar. */
@media (max-width: 959px) {
  body.mrc-banner-puesto .mr-heroe { padding-block: var(--e4); }
  body.mrc-banner-puesto .mr-heroe__rejilla { gap: var(--e2); }
  body.mrc-banner-puesto .mr-heroe__hechos { gap: 6px var(--e2); }
  body.mrc-banner-puesto .mr-heroe__foto,
  body.mrc-banner-puesto .mr-heroe__entrada { display: none; }
  /* Con `.mr-heroe__intro` en el selector (0,4,1): en la forma sin fondo la intro es `display:
     contents` y su `> :not(h1) { order: 2 }` (0,3,1) ganaba a la regla de las promesas, así que
     promesas y nota seguían delante de los botones y el aviso tapaba el de WhatsApp en gestión
     (medido el 2026-10-18; la botonera cuelga de la intro en las 9 páginas que la llevan). */
  body.mrc-banner-puesto .mr-heroe .mr-heroe__intro > .mr-botonera { order: 2; }
  body.mrc-banner-puesto .mr-heroe .mr-heroe__intro > :is(.mr-heroe__hechos, .mr-nota) { order: 3; }
  /* Con foto de fondo la intro es flex sin hueco y la botonera no lleva margen: las promesas
     quedaban a 0 px de los botones. 24 px, el mismo aire que hay entre titular y botones. */
  body.mrc-banner-puesto .mr-heroe:has(> .mr-heroe__fondo) .mr-heroe__intro > .mr-botonera { margin-bottom: var(--e3); }
  body.mrc-banner-puesto .mr-heroe:has(> .mr-heroe__fondo) .mr-heroe__intro { display: flex; flex-direction: column; }
  /* Esa columna flex estira a sus hijos, y la etiqueta «Renta garantizada en Zaragoza» salía de
     326 px para 206 de texto mientras el aviso estaba puesto (id=3944, tercera mirada). */
  body.mrc-banner-puesto .mr-heroe .mr-heroe__intro > .mr-etiqueta { align-self: flex-start; }
}

/* Cabecera del móvil: el botón de arriba repetía el de la barra fija y partía el nombre de la
   empresa en dos líneas; por debajo de 640 px la acción vive en la barra. */
@media (max-width: 639px) {
  .mr-cabecera__acciones .mr-boton { display: none; }
}

/* ==========================================================================
   Portada v3 (rediseño del 2026-10-18, id=3877)
   ========================================================================== */
.mr-seccion:has(> .mr-seccion__fondo) { isolation: isolate; }

/* El sello con los dos hermanos también en el móvil, más pequeño: es su cara, y la portada
   ya no abre con su retrato grande. */
@media (max-width: 959px) {
  .mr-heroe__sello { display: flex; align-items: center; gap: var(--e2); margin: 0; }
  .mr-heroe__sello img { width: 88px; height: 88px; flex: 0 0 88px; border-radius: var(--r-pil);
                         object-fit: cover; object-position: 50% 18%; border: 3px solid rgba(255,255,255,.85); }
  .mr-heroe__sello figcaption { font-family: var(--fuente-titulo); font-size: var(--t-base);
                                line-height: 1.35; color: var(--blanco); }
}

/* Cifras: etiqueta a la izquierda y la frase grande a la derecha, como el «About» de la demo. */
.mr-sobre { display: grid; gap: var(--e2); }
.mr-sobre > .mr-etiqueta { justify-self: start; }
@media (min-width: 960px) {
  .mr-sobre { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--e6); align-items: start; }
}
.mr-sobre .mr-cartel { font-size: clamp(1.5rem, 1.05rem + 1.7vw, 2.5rem); line-height: 1.3; max-width: none; }
.mr-seccion--cifras .mr-cinta { margin-top: clamp(3rem, 2rem + 3vw, 5rem); }

/* Casos: tres columnas en escritorio (seis tarjetas, 3x2). */
@media (min-width: 960px) { .mr-casos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Sobre negro, lo que va dentro de una TARJETA BLANCA vuelve a los colores de tarjeta: sin
   esto el texto de las respuestas heredaba el gris claro de la sección (blanco sobre blanco). */
.mr-seccion--oscura .mr-pregunta { color: var(--texto-cuerpo); --titulo: var(--negro); }
.mr-seccion--oscura .mr-pregunta strong { color: var(--negro); }
.mr-seccion--oscura .mr-pregunta a:not(.mr-boton) { color: var(--oro-texto); }
.mr-seccion--oscura .mr-pregunta a:not(.mr-boton):hover { color: var(--negro); }
.mr-seccion--oscura .mr-pregunta :focus-visible { outline-color: var(--oro-texto); }
.mr-seccion--oscura .mr-campo > label,
.mr-seccion--oscura .mr-campo > .mr-campo__rotulo { color: var(--blanco); }
.mr-seccion--oscura .mr-nota { color: var(--texto-sobre-oscuro-suave); }

/* Redes en la franja del pie: círculos con filete, dorados al pasar. */
.mr-pie__redes { display: flex; gap: var(--e1); list-style: none; margin: 0; padding: 0; }
.mr-pie .mr-pie__redes li { margin: 0; padding: 0; }
.mr-pie .mr-pie__redes a { display: inline-flex; align-items: center; justify-content: center;
                           width: 44px; height: 44px; padding: 0; border-radius: var(--r-pil);
                           border: 1px solid rgba(255,255,255,.26); color: var(--blanco);
                           transition: background-color var(--t-rapido) var(--curva), border-color var(--t-rapido) var(--curva); }
.mr-pie .mr-pie__redes a:hover { background: var(--oro); border-color: var(--oro); color: var(--negro); text-decoration: none; }

/* La etiqueta dentro de una cabecera de sección: `.mr-cab p` le ganaba por especificidad y le
   ponía la letra de la entrada y margen 0 (medido en la primera mirada del 2026-10-18). */
.mr-cab > .mr-etiqueta { font-size: var(--t-sm); margin-bottom: var(--e3); }
.mr-heroe .mr-etiqueta--velo { color: var(--blanco); }

/* Héroe con la foto al lado (páginas de servicio): la etiqueta sobre negro, y en el móvil encima
   del titular, no detrás de la foto (el resto del bloque va con `order: 2`). */
.mr-heroe .mr-etiqueta:not(.mr-etiqueta--velo) { color: var(--texto-sobre-oscuro); border-color: rgba(255,255,255,.26); }
@media (max-width: 959px) {
  .mr-heroe:not(:has(> .mr-heroe__fondo)) .mr-heroe__intro > .mr-etiqueta { order: -1; align-self: flex-start; }
}

/* ==========================================================================
   Guías v3: la banda del título de la entrada de la demo (foto de Zaragoza con velo, titular
   centrado y las migas debajo), en tarjeta redondeada como el héroe del resto de la web. La foto
   de la guía abre el cuerpo y la lateral arranca a su altura.
   ========================================================================== */
.mr-titular { position: relative; isolation: isolate; overflow: hidden;
              margin: 0 var(--marco); border-radius: var(--r-bloque);
              padding-block: clamp(3rem, 1.5rem + 5vw, 6.5rem);
              background: var(--negro); color: var(--texto-sobre-oscuro); text-align: center;
              --enlace-encima: var(--blanco); --titulo: var(--blanco); }
@media (max-width: 639px) { .mr-titular { border-radius: 24px; } }
.mr-titular__fondo { position: absolute; inset: 0; z-index: -2; }
.mr-titular__fondo img { width: 100%; height: 100%; object-fit: cover; }
/* Velo uniforme del 66 %: con la foto más clara debajo el fondo no pasa de #575757, y el blanco
   del titular y el gris claro de las migas quedan por encima de 4,5. */
.mr-titular::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(8,8,8,.66); }
.mr-titular h1 { color: var(--blanco); font-size: clamp(2rem, 1.2rem + 2.6vw, 3.5rem); line-height: 1.15;
                 max-width: 30ch; margin: 0 auto var(--e3); text-wrap: balance; }
/* La entradilla del blog, las legales y la 404 sube a la banda bajo el titular. */
.mr-titular p { color: #e6e6e6; font-size: var(--t-md); line-height: 1.7; max-width: 46rem;
                margin: calc(-1 * var(--e1)) auto var(--e3); text-wrap: pretty; }
.mr-titular .mr-migas { padding: 0; }
.mr-titular .mr-migas ol { justify-content: center; color: #e6e6e6; font-size: var(--t-base); }
.mr-titular .mr-migas a { color: #e6e6e6; }
.mr-titular .mr-migas a:hover { color: var(--oro); }
.mr-titular .mr-migas [aria-current] { color: var(--blanco); font-weight: var(--peso-normal); }
.mr-titular :focus-visible { outline-color: var(--oro); }

.mr-post:has(> .mr-titular) { padding-block-start: 0; }
.mr-titular + .mr-contenedor { margin-top: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }
.mr-post__cuerpo > .mr-post__portada { margin-bottom: var(--e3); }
.mr-post__cuerpo > .mr-post__meta { margin-bottom: var(--e3); }
@media (min-width: 960px) {
  /* La lateral a la altura de la foto: la regla de arriba le baja 16 px con más especificidad. */
  .mr-post:has(> .mr-titular) > .mr-contenedor > .mr-post__rejilla > .mr-post__lateral { margin-top: 0; }
}

/* ==========================================================================
   Guías v3: lo que el cuerpo antiguo pintaba con estilos escritos a mano, con clases de la casa
   (las pone `v3_estilos.py`). Tablas con la cabecera negra en Cabin y filas con filete, cajas en
   crema y en negro con el radio de las tarjetas, como las de la demo.
   ========================================================================== */
/* Tabla: la envoltura es la que se desliza en el móvil y la que lleva borde y esquinas. */
.mr-tabla-envoltura { overflow-x: auto; margin-block: var(--e4); border: 1px solid var(--borde);
                      border-radius: var(--r-tarjeta); background: var(--blanco); }
.mr-tabla-envoltura:focus-visible { outline: 2px solid var(--oro-texto); outline-offset: 3px; }
/* Cifras de caja alta y del mismo ancho: las de Raleway por defecto bajan de la línea (2.160 se
   leía «2.1б0») y en una columna de importes no cuadraban. */
.mr-tabla-art { width: 100%; border-collapse: collapse; font-size: var(--t-sm); margin: 0;
                font-variant-numeric: lining-nums tabular-nums; }
.mr-tabla-art:not(.mr-tabla-envoltura > *) { margin-block: var(--e4); border: 1px solid var(--borde); }
.mr-tabla-art :is(th, td) { padding: 14px 18px; text-align: start; vertical-align: top;
                            border-bottom: 1px solid var(--borde); color: var(--negro); line-height: 1.55; }
.mr-tabla-art tr:last-child > * { border-bottom: 0; }
.mr-tabla-art :is(thead th, .mr-fila-cab > *) { background: var(--negro); color: var(--blanco); border-bottom: 0;
                                                font-family: var(--fuente-titulo); font-weight: var(--peso-titulo);
                                                font-size: var(--t-base); vertical-align: bottom; }
.mr-tabla-art tbody th { background: var(--crema); color: var(--negro); font-weight: var(--peso-fuerte); }
.mr-tabla-art tbody tr:nth-child(even):not(.mr-fila-cab, .mr-destacada) > td:not(.mr-destacada) { background: #fbf9f6; }
.mr-tabla-art .mr-num { text-align: end; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mr-tabla-art :is(td.mr-destacada, tr.mr-destacada > *),
.mr-home-compare td.mr-destacada { background: var(--crema); color: var(--negro); }
.mr-tabla-art strong { color: var(--negro); }

.mr-fuerte { font-weight: var(--peso-fuerte); color: var(--negro); }
.mr-cursiva { font-style: italic; }
.mr-lista-limpia { list-style: none; padding: 0; margin: 0; }
.mr-lista-limpia > li { margin: 0; }
.mr-lista-limpia > li + li { margin-top: var(--e1); }

/* La caja que el molde pintaba blanca con borde negro: blanca con 1 px de tinta, con la esquina de
   las tarjetas de la demo. En crema incumplía la corrección del 2026-09-15. */
.mr-caja-borde { background: var(--blanco); border: 1px solid var(--negro); border-radius: var(--r-tarjeta);
                 padding: var(--e4); margin-block: var(--e4); }
.mr-caja-borde > :last-child { margin-bottom: 0; }
.mr-caja-borde p { max-width: none; }
.mr-caja__t { font-family: var(--fuente-titulo); font-weight: var(--peso-titulo); font-size: var(--t-h4);
              line-height: 1.3; color: var(--negro); margin: 0 0 var(--e2); max-width: none; }

/* La caja negra (llamadas a la acción y alguna nota): el negro de la ficha lateral. Gana a `.mr-cta`
   por ir detrás con la misma especificidad. */
.mr-caja-negra { background: var(--negro); color: var(--texto-sobre-oscuro); border: 0; border-radius: var(--r-tarjeta);
                 padding: var(--e5) var(--e4); margin-block: var(--e5) var(--e3);
                 --enlace-encima: var(--oro); --titulo: var(--blanco); }
.mr-caja-negra p { color: var(--texto-sobre-oscuro); max-width: none; }
.mr-caja-negra.mr-centro p { margin-inline: auto; max-width: 40rem; }
.mr-caja-negra .mr-caja__t { color: var(--blanco); font-size: var(--t-lg); }
.mr-caja-negra strong { color: var(--oro); }
.mr-caja-negra a:not(.mr-boton, .mr-post-btn, .mr-cta-btn, .btn-gold) { color: var(--oro); }
.mr-caja-negra :is(.mr-post-btn, .mr-cta-btn, a.btn-gold) { margin-top: var(--e2); }
@media (max-width: 639px) { .mr-caja-negra { padding: var(--e4) var(--e3); } }

/* Lo que sigue al final de algunas guías («Servicio relacionado»): filete y aire. */
.mr-post__sigue { margin-top: var(--e5); padding-top: var(--e4); border-top: 1px solid var(--borde); }

/* ==========================================================================
   Peticiones del operador del 2026-10-18 (id=3924, 3925 y 3926)

   Va al final a propósito: con la misma especificidad gana lo último, y así cada regla de
   aquí corrige la anterior sin tener que perseguirla por la hoja.
   ========================================================================== */

/* id=3926: «paso el ratón por servicios y bajo para abajo... desaparece el desplegable». El
   panel cuelga 14 px por debajo del botón y en ese hueco el ratón salía de `.mr-menu-serv`. Un
   puente invisible, hijo del panel, cubre el hueco; mr-v2.js además espera antes de cerrar. */
.mr-menu-serv__panel::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 16px; }

/* --- Movimiento (id=3924: «no se mueve, le falta muchísimo dinamismo») ----------------------
   Medido en la demo: entrada de 40 px en 1,25 s con retrasos escalonados, foto del héroe que se
   acerca despacio, cinta en marcha y el sello girando. Todo bajo `no-preference`: quien pide
   menos movimiento ve la página quieta y completa. */
@media (prefers-reduced-motion: no-preference) {
  .mr-js .mr-entra { transform: translateY(40px); transition-duration: 1100ms; }
  .mr-js .mr-entra[data-visible="si"] { transform: none; }
  .mr-js .mr-entra--d1 { transition-delay: 150ms; }
  .mr-js .mr-entra--d2 { transition-delay: 300ms; }
  .mr-js .mr-entra--d3 { transition-delay: 450ms; }
  .mr-js .mr-entra--d4 { transition-delay: 600ms; }
  /* Las tarjetas de una misma rejilla entran una detrás de otra, no en bloque. */
  .mr-js :is(.mr-rejilla, .mr-pasos, .mr-tarjetas) > .mr-entra:nth-child(2):not([class*="mr-entra--d"]) { transition-delay: 140ms; }
  .mr-js :is(.mr-rejilla, .mr-pasos, .mr-tarjetas) > .mr-entra:nth-child(3):not([class*="mr-entra--d"]) { transition-delay: 280ms; }
  .mr-js :is(.mr-rejilla, .mr-pasos, .mr-tarjetas) > .mr-entra:nth-child(4):not([class*="mr-entra--d"]) { transition-delay: 420ms; }

  /* La foto de fondo del héroe y de los titulares se acerca y se aleja muy despacio. El héroe ya
     recorta (`overflow: hidden`), así que la foto crece sin mover nada de alrededor. */
  .mr-heroe__fondo img,
  .mr-titular__fondo img { animation: mr-acerca 24s ease-in-out infinite alternate; transform-origin: 60% 50%; }
  .mr-titular:has(> .mr-titular__fondo) { overflow: hidden; }
}
@keyframes mr-acerca { from { transform: scale(1); } to { transform: scale(1.14); } }
@keyframes mr-gira { to { transform: rotate(360deg); } }

/* --- La cinta (id=3924: «no me gusta lo del tamaño») -----------------------------------------
   Antes 4,5 rem con círculos de 56 px: se comía la sección. Ahora un renglón de lectura, y dos
   cintas en sentidos opuestos, la segunda en negro, que es lo que da la sensación de marcha. */
.mr-cinta { padding-block: var(--e2); }
.mr-cinta + .mr-cinta { border-top: 0; }
.mr-cinta__pista { gap: var(--e4); animation-duration: 32s; }
.mr-cinta__pista span { gap: var(--e4); font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); letter-spacing: -0.005em; }
.mr-cinta__pista span::after { width: 30px; height: 30px; background-size: 13px; }
.mr-cinta--inversa { background: var(--negro); border-color: var(--negro); }
.mr-cinta--inversa .mr-cinta__pista { animation-direction: reverse; animation-duration: 36s; }
.mr-cinta--inversa .mr-cinta__pista span { color: var(--blanco); }
.mr-seccion--cifras { padding-bottom: 0; }
.mr-seccion--cifras .mr-cinta + .mr-cinta { margin-top: 0; }

/* --- El sello del héroe (id=3925: sin pie; id=3924: más movimiento) ------------------------
   La foto de los dos hermanos en un círculo con un aro de texto que gira, como el de la demo.
   El fondo oscuro del sello garantiza el contraste del aro sea cual sea la foto de detrás. */
/* También en el móvil, más pequeño (era su cara y la portada ya no abre con su retrato): sin el
   pie, el sello solo se entiende con el aro. Tamaños por variable para no repetir las reglas. */
.mr-heroe .mr-heroe__sello { --sello: 150px; --sello-foto: 98px;
                             position: relative; display: grid; place-items: center; gap: 0; margin: 0;
                             width: var(--sello); height: var(--sello); max-width: none; flex: 0 0 auto;
                             border-radius: var(--r-pil); background: rgba(8,8,8,.62);
                             -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.mr-heroe .mr-heroe__sello picture { display: block; width: var(--sello-foto); height: var(--sello-foto);
                                     border-radius: var(--r-pil); overflow: hidden; }
.mr-heroe .mr-heroe__sello img { width: 100%; height: 100%; flex: none; border: 0; border-radius: 0;
                                 object-fit: cover; object-position: 50% 18%; }
.mr-heroe__aro { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible;
                 fill: var(--blanco); font-family: var(--fuente-titulo); font-size: 15px;
                 font-weight: var(--peso-titulo); letter-spacing: .14em; text-transform: uppercase; }
@media (min-width: 960px) { .mr-heroe .mr-heroe__sello { --sello: 196px; --sello-foto: 128px; } }
@media (prefers-reduced-motion: no-preference) { .mr-heroe__aro { animation: mr-gira 15s linear infinite; } }

/* En la barra fija del móvil, el logo de WhatsApp también, desde 360 px: por debajo no caben los tres
   botones con él y «Calcular mi renta» se partía en dos líneas. Con `a` en el selector para ganar a
   `.mr-barra .mr-boton::before { content: none }`, que va detrás. */
@media (min-width: 360px) {
  .mr-barra a.mr-boton--wa::before { content: ""; flex: 0 0 22px; width: 22px; height: 22px; }
  .mr-barra a.mr-boton--wa, .mr-barra a.mr-boton--wa:hover { gap: 6px; padding-inline: 10px; }
}

/* --- La prueba de Google bajo los botones del héroe (id=3926: convencer antes) ---------------- */
.mr-heroe a.mr-heroe__google {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: var(--e3);
  padding: 8px 18px 8px 12px; border-radius: var(--r-tarjeta); background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.24); color: var(--blanco); text-decoration: none;
  font-size: var(--t-sm); line-height: 1.4; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: background-color var(--t-medio) var(--curva), border-color var(--t-medio) var(--curva);
}
.mr-heroe a.mr-heroe__google:hover { color: var(--blanco); background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.5); }
.mr-heroe__google .mr-g { flex: 0 0 20px; }
@media (max-width: 959px) { body.mrc-banner-puesto .mr-heroe__google { display: none; } }
/* La nota «Sin riesgo para ti» (id=3926) va con los botones, al mismo hueco que hay entre ellos
   (--e2): sin margen propio quedaba a 0 px de la botonera. Con el aviso del móvil puesto viene
   detrás de las promesas, que ya traen el suyo. */
.mr-heroe .mr-heroe__garantia { margin: var(--e2) 0 0; text-wrap: balance; }
@media (max-width: 959px) { body.mrc-banner-puesto .mr-heroe .mr-heroe__garantia { margin-top: 0; } }

/* Las estrellas de Google, dibujadas: el texto ★ queda para lectores de pantalla (role="img"). */
.mr-estrellas-g { display: inline-block; flex: 0 0 auto; font-size: 0; line-height: 0; color: transparent;
                  width: calc(16px * 26 / 24 * 5); height: 16px;
                  background: var(--estrella) left center / auto 100% repeat-x; }
.mr-estrellas-g--grande { width: calc(24px * 26 / 24 * 5); height: 24px; }

/* --- La tabla (id=3924: «la columna de con nosotros no puede ser del mismo color que el fondo,
   debe destacar más»). En escritorio la columna nuestra va en negro con letra blanca y la marca
   dorada; su cabecera, en el dorado de botón con un sello. En el móvil, cada fila es una tarjeta
   y la línea nuestra va en dorado de botón con letra blanca (4,82:1). */
.mr-tabla thead th.mr-tabla__nuestra { background: var(--oro-boton); color: var(--blanco); }
.mr-tabla__sello { display: block; width: max-content; margin-bottom: 8px; padding: 3px 10px;
                   border-radius: var(--r-pil); background: var(--blanco); color: var(--oro-texto);
                   font-family: var(--fuente-texto); font-size: 0.75rem; font-weight: 700; line-height: 1.5;
                   letter-spacing: .06em; text-transform: uppercase; }
.mr-tabla td:last-child { background: var(--negro-2); color: var(--blanco); font-weight: 700;
                          border-bottom-color: rgba(255,255,255,.12); }
.mr-tabla td.mr-tabla__si:last-child { color: var(--blanco); }
@media (min-width: 640px) {
  /* Toda la columna con la misma sangría, lleve marca o no: si no, el texto sin marca empieza 26 px antes. */
  .mr-tabla td:last-child { padding-left: calc(var(--e3) + 26px); position: relative; }
  .mr-tabla td.mr-tabla__si:last-child::before { content: ""; position: absolute; left: var(--e3); top: 22px;
                                    width: 18px; height: 18px; background: var(--marca-si) center / contain no-repeat; }
}
@media (max-width: 639px) {
  .mr-tabla td:last-child { background: var(--oro-boton); color: var(--blanco); }
  .mr-tabla td:last-child::before { color: var(--blanco); }
}

/* --- Opiniones con la estética de TrustIndex (id=3924) ------------------------------------
   El resumen a la izquierda («Excelente», estrellas, nota y la G), el carrusel a la derecha con
   flechas a los lados, y tarjetas gris claro con la inicial en color, el nombre arriba y las
   estrellas debajo (regla del 2026-09-27), la G de Google en la esquina y la marca de verificada.
   Sin fechas (directiva del 2026-07-29). */
.mr-seccion--resenas { background: var(--blanco); }
.mr-seccion--resenas .mr-ops__insignia {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 12px;
  margin: 0 0 var(--e4); padding: 0; background: transparent; border: 0; border-radius: 0;
  color: var(--negro); text-align: center; text-decoration: none;
}
.mr-seccion--resenas .mr-ops__insignia:hover .mr-ops__resumen { text-decoration: underline; text-underline-offset: 3px; }
.mr-ops__excelente { font-family: var(--fuente-titulo); font-weight: 700; font-size: var(--t-lg); line-height: 1.1;
                     letter-spacing: .04em; text-transform: uppercase; color: var(--negro); }
.mr-ops__resumen { font-size: var(--t-sm); color: var(--gris-oscuro); }
.mr-seccion--resenas .mr-ops__nota { font-family: inherit; font-size: inherit; line-height: inherit; font-weight: 700; color: var(--negro); }
.mr-g--grande { flex: 0 0 30px; }
/* En el móvil la cabecera de la sección va a la izquierda, y el resumen centrado debajo se leía
   descolocado (id=3944, tercera mirada). Desde 960 tiene su propia columna y sigue centrado. */
@media (max-width: 959px) {
  .mr-seccion--resenas .mr-ops__insignia { justify-content: flex-start; text-align: left; }
}

@media (min-width: 960px) {
  .mr-seccion--resenas .mr-ops { display: grid; grid-template-columns: 210px minmax(0, 1fr);
                                 grid-template-areas: "cab cab" "ins car" "cta cta"; column-gap: var(--e5); align-items: center; }
  .mr-seccion--resenas .mr-cab { grid-area: cab; }
  .mr-seccion--resenas .mr-ops__insignia { grid-area: ins; flex-direction: column; gap: 10px; margin: 0; }
  .mr-seccion--resenas .mr-ops__carril { grid-area: car; }
  /* Las flechas a los lados del carrusel, a media altura, como en TrustIndex. */
  .mr-seccion--resenas .mr-ops__flechas { grid-area: car; align-self: center; position: relative; z-index: 2;
                                          display: flex; justify-content: space-between; margin: 0 -22px;
                                          pointer-events: none; }
  .mr-seccion--resenas .mr-ops__flecha { pointer-events: auto; width: 44px; height: 44px; }
  .mr-seccion--resenas .mr-ops__cta { grid-area: cta; }
}
/* Con el resumen al lado, al carril le quedan 666 px a 1024: tres tarjetas eran de 215 px, con unas
   22 letras por línea, y se recortaban 13 opiniones de 24. Hasta 1280 van dos. */
@media (min-width: 960px) and (max-width: 1279px) {
  .mr-seccion--resenas .mr-ops__carril { grid-auto-columns: calc((100% - var(--e3)) / 2); }
}

.mr-seccion--resenas .mr-op { position: relative; background: #f4f4f4; border: 0; border-radius: 10px;
                              padding: var(--e3) var(--e3) var(--e2); }
.mr-seccion--resenas .mr-op::after { content: ""; position: absolute; top: 22px; right: 20px; width: 20px; height: 20px;
                                     background: var(--logo-g) center / contain no-repeat; }
.mr-seccion--resenas .mr-op__quien { order: 0; margin: 0 0 var(--e2); padding-right: 30px;
                                     display: grid; grid-template-columns: 44px minmax(0, 1fr);
                                     grid-template-areas: "ini nom" "est est"; gap: 14px 12px; align-items: center; }
.mr-seccion--resenas .mr-op__quien > span:not(.mr-op__ini) { display: contents; }
.mr-seccion--resenas .mr-op__ini { grid-area: ini; width: 44px; height: 44px; flex: none;
                                   background: #1967d2; color: var(--blanco); font-family: var(--fuente-texto);
                                   font-size: var(--t-base); font-weight: 700; }
.mr-seccion--resenas .mr-op:nth-child(6n+2) .mr-op__ini { background: #c5221f; }
.mr-seccion--resenas .mr-op:nth-child(6n+3) .mr-op__ini { background: #137333; }
.mr-seccion--resenas .mr-op:nth-child(6n+4) .mr-op__ini { background: #9a5200; }
.mr-seccion--resenas .mr-op:nth-child(6n+5) .mr-op__ini { background: #7627bb; }
.mr-seccion--resenas .mr-op:nth-child(6n) .mr-op__ini { background: #00727a; }
.mr-seccion--resenas .mr-op__nombre { grid-area: nom; font-family: var(--fuente-texto); font-size: var(--t-base);
                                      font-weight: 700; line-height: 1.3; color: var(--negro); }
.mr-seccion--resenas .mr-op__estrellas { grid-area: est; display: flex; align-items: center; gap: 6px;
                                         font-size: 0; line-height: 0; letter-spacing: 0; color: transparent; }
.mr-seccion--resenas .mr-op__estrellas::before { content: ""; width: calc(17px * 26 / 24 * 5); height: 17px;
                                                 background: var(--estrella) left center / auto 100% repeat-x; }
.mr-seccion--resenas .mr-op__estrellas::after { content: ""; width: 16px; height: 16px;
                                                background: var(--verificada) center / contain no-repeat; }
/* Una opinión de menos de cinco estrellas pinta las suyas en amarillo y el resto en gris, como Google:
   la estrella hace de máscara y el relleno se corta en su nota. Sin esto la regla de arriba dibujaba
   cinco a todas y lo que se veía contradecía el `aria-label` (Samuel Gaudes, 4 de 5). */
.mr-seccion--resenas .mr-op__estrellas:is([aria-label^="1 de"], [aria-label^="2 de"], [aria-label^="3 de"], [aria-label^="4 de"])::before {
  background: linear-gradient(90deg, #f6bb06 var(--llenas), #c4c4c4 var(--llenas));
  -webkit-mask: var(--estrella) left center / auto 100% repeat-x;
  mask: var(--estrella) left center / auto 100% repeat-x; }
.mr-seccion--resenas .mr-op__estrellas[aria-label^="4 de"] { --llenas: 80%; }
.mr-seccion--resenas .mr-op__estrellas[aria-label^="3 de"] { --llenas: 60%; }
.mr-seccion--resenas .mr-op__estrellas[aria-label^="2 de"] { --llenas: 40%; }
.mr-seccion--resenas .mr-op__estrellas[aria-label^="1 de"] { --llenas: 20%; }
.mr-seccion--resenas .mr-op p { color: #3c3c3c; font-size: 0.9375rem; line-height: 1.6; margin-bottom: var(--e2);
                                -webkit-line-clamp: 7; line-clamp: 7; }
.mr-seccion--resenas .mr-op--entera p { -webkit-line-clamp: unset; line-clamp: none; }
.mr-seccion--resenas .mr-op__leer { margin: calc(-1 * var(--e1)) 0 0; color: #595959; font-weight: 600;
                                    text-decoration: none; }
.mr-seccion--resenas .mr-op__leer:hover { color: var(--negro); text-decoration: underline; }

/* La llamada que cierra las opiniones: quien acaba de leer veinte reseñas buenas, a un clic de
   calcular lo suyo (id=3926: «debes convencer mucho mejor al usuario»). */
.mr-ops__cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
               gap: var(--e3) var(--e4); margin-top: var(--e5); padding: var(--e4); border-radius: var(--r-tarjeta);
               background: var(--negro); color: var(--texto-sobre-oscuro); }
.mr-ops__cta p { margin: 0; max-width: 44rem; font-size: var(--t-md); line-height: 1.5; color: var(--texto-sobre-oscuro); }
.mr-ops__cta strong { color: var(--blanco); }
.mr-ops__cta .mr-boton--oro:hover { background: var(--blanco); color: var(--negro); }
@media (max-width: 639px) { .mr-ops__cta { padding: var(--e3); } .mr-ops__cta .mr-boton { width: 100%; } }