/* ============================================================
   RESERVE NOBLE · COMPONENTES DEL PORTAL
   v1.0 · 2 de octubre de 2026
   Depende de reservenoble-tokens.css, que va antes.
   Nada de lo que hay aquí depende de JavaScript.
   ============================================================ */

/* ============================================================
   ANCHO DE PÁGINA · decisión de la tanda 2C
   ------------------------------------------------------------
   El sitio va a ancho completo, con un margen lateral que crece
   con la pantalla en vez de una columna centrada de 1200 px.
   Sobrescribe --rn-ancho-max del kit de marca a propósito.

   El texto NO se ensancha: los párrafos siguen limitados a 70
   caracteres por línea. Lo que se ensancha es la retícula de
   tarjetas, que es donde el ancho sirve de algo.
   ============================================================ */
:root{
  --rn-ancho-max:1760px;
  --rn-margen:clamp(20px,3vw,56px);
}
.rn-contenedor{width:100%;max-width:var(--rn-ancho-max);
  margin-inline:auto;padding-inline:var(--rn-margen)}
/* La portada iba encajonada y se notaba: ahora comparte contenedor con
   el resto y el héroe sale a sangre. */
.rn-contenedor--medio{max-width:var(--rn-ancho-max)}

/* ---------- ESTRUCTURA GENERAL ---------- */
.rn-saltar{position:absolute;left:-9999px;top:0;background:var(--rn-tinta);color:var(--rn-espuma);
  padding:12px 20px;border-radius:0 0 var(--rn-r-etiqueta) 0;z-index:100}
.rn-saltar:focus{left:0;color:var(--rn-espuma)}

.rn-entrada{font-size:1.125rem;color:var(--rn-texto-2);max-width:62ch}
.rn-nota{font-size:.8125rem;color:var(--rn-texto-3)}
.rn-nota--codigo{margin-top:var(--rn-e-7);text-align:right}
.rn-vacio{background:var(--rn-arena);border-radius:var(--rn-r-bloque);
  padding:var(--rn-e-6);color:var(--rn-tinta-media);max-width:none}

.rn-migas{font-size:.8125rem;color:var(--rn-texto-3);margin-bottom:var(--rn-e-4)}
.rn-migas a{color:var(--rn-texto-2)}

/* Oculto para el ojo, presente para el teclado y el lector de pantalla.
   Nunca display:none en un control: dejaría de ser tabulable. */
.rn-oculto,.rn-oculto-visual{position:absolute;width:1px;height:1px;padding:0;
  margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* La cabecera de cada banda: título a la izquierda, salida a la derecha. */
.rn-banda__cab{display:flex;flex-wrap:wrap;align-items:baseline;
  justify-content:space-between;gap:var(--rn-e-3);margin-bottom:var(--rn-e-6)}
.rn-banda__cab h2{margin:0}
.rn-banda__cab > a{font-size:.9375rem;text-decoration:none;white-space:nowrap;
  font-variation-settings:'wdth' 112,'wght' 600;color:var(--rn-enlace);
  border-bottom:1px solid var(--rn-ocre);padding-bottom:2px}
.rn-banda__cab > a:hover{border-bottom-color:var(--rn-ocre-honda)}
.rn-seccion--tinta .rn-banda__cab > a,.rn-proyectos .rn-banda__cab > a{
  color:var(--rn-sol);border-bottom-color:var(--rn-sol)}
.rn-banda__intro{color:var(--rn-texto-2);max-width:62ch;
  margin:calc(var(--rn-e-5) * -1) 0 var(--rn-e-6)}

/* ---------- RITMO DE SECCIONES ----------
   No todas pesan igual: la que sigue al héroe respira menos,
   la de confianza respira más. */
.rn-seccion--arena{background:var(--rn-arena)}
.rn-seccion--tinta{background:var(--rn-tinta);color:var(--rn-espuma)}
.rn-seccion--tinta h2,.rn-seccion--tinta h3{color:var(--rn-espuma)}

/* ============================================================
   BARRA DE AVISOS
   ------------------------------------------------------------
   Se enciende desde el panel, con fecha de inicio y de fin.
   Esquinas redondeadas abajo: cuelga sobre el héroe en vez de
   quedar pegada al borde de la pantalla.
   ============================================================ */
.rn-avisos{background:var(--rn-ocre);color:var(--rn-espuma);font-size:.875rem;
  border-radius:0 0 var(--rn-r-tarjeta) var(--rn-r-tarjeta);position:relative;z-index:60}
.rn-avisos__fila{display:flex;flex-wrap:wrap;align-items:center;gap:var(--rn-e-3);
  padding-block:11px;justify-content:center;text-align:center}
.rn-avisos a{color:var(--rn-sol);font-variation-settings:'wdth' 112,'wght' 600;
  text-underline-offset:4px}

/* ============================================================
   CABECERA
   ------------------------------------------------------------
   Una sola fila. En la portada va superpuesta sobre el héroe y
   gana fondo al bajar, con una animación guiada por el scroll
   (CSS puro). Donde no se soporte, queda sólida desde el
   principio: nadie pierde nada y no hay JavaScript de por medio.
   ============================================================ */
.rn-cabecera{--cab-alto:80px;--cab-texto:var(--rn-texto);--cab-apoyo:var(--rn-texto-2);
  --cab-linea:var(--rn-borde);
  position:sticky;top:0;z-index:50;
  background:var(--rn-fondo);border-bottom:1px solid var(--cab-linea);
  color:var(--cab-texto)}
.rn-cabecera__fila{display:flex;align-items:center;gap:var(--rn-e-5);
  min-height:var(--cab-alto);padding-block:var(--rn-e-3);flex-wrap:wrap}
.rn-cabecera__marca{display:inline-flex;align-items:center;text-decoration:none;flex:none}
.rn-cabecera__marca .rn-logo{height:34px;width:auto}
.rn-logo{display:block;height:auto}

/* Sobre el héroe.
   El margen inferior negativo hace que, aun siendo sticky, no ocupe
   sitio: el héroe empieza debajo de ella y la cabecera flota encima.
   Sin soporte de animaciones guiadas por scroll queda con fondo desde
   el principio, que es legible siempre; con soporte, nace transparente
   y se posa al bajar. En ningún caso hace falta JavaScript. */
.rn-cabecera--sobre{--cab-texto:var(--rn-espuma);--cab-apoyo:rgba(242,241,236,.84);
  --cab-linea:rgba(242,241,236,.14);
  margin-bottom:calc(var(--cab-alto) * -1);
  background-color:rgba(28,24,20,.92);backdrop-filter:blur(10px)}
@supports (animation-timeline: scroll()) {
  .rn-cabecera--sobre{background-color:transparent;backdrop-filter:none;
    border-bottom-color:transparent;
    animation:rn-posar linear both;
    animation-timeline:scroll(root);
    animation-range:80px 260px}
  @keyframes rn-posar{
    from{background-color:rgba(28,24,20,0);  backdrop-filter:blur(0px);  border-bottom-color:transparent}
    to  {background-color:rgba(28,24,20,.92);backdrop-filter:blur(10px);border-bottom-color:rgba(242,241,236,.14)}
  }
}

/* ---------- MENÚ ----------
   Dos entradas con hijos, abiertas al pasar el cursor y al tabular
   (:focus-within). Sin JavaScript y sin perder el teclado. */
.rn-menu{margin-left:var(--rn-e-5)}
.rn-menu > ul{display:flex;align-items:center;gap:var(--rn-e-6);
  list-style:none;margin:0;padding:0}
.rn-menu a{color:var(--cab-apoyo);text-decoration:none;white-space:nowrap;
  font-size:.9375rem;font-variation-settings:'wdth' 112,'wght' 500;
  transition:color var(--rn-transicion)}
.rn-menu > ul > li > a{display:inline-flex;align-items:center;gap:6px;
  padding-block:var(--rn-e-3);border-bottom:2px solid transparent}
.rn-menu a:hover{color:var(--cab-texto)}
.rn-menu > ul > li > a[aria-current="page"]{color:var(--cab-texto);
  font-variation-settings:'wdth' 112,'wght' 600;border-bottom-color:var(--rn-sol)}
.rn-menu__indice{font-variation-settings:'wdth' 112,'wght' 600 !important;
  color:var(--cab-texto) !important}
.rn-menu__flecha{width:8px;height:8px;border-right:1.6px solid currentColor;
  border-bottom:1.6px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);
  opacity:.7;transition:transform var(--rn-transicion)}

.rn-menu__con-hijos{position:relative}
.rn-menu__panel{position:absolute;top:100%;left:calc(var(--rn-e-5) * -1);
  min-width:330px;padding:var(--rn-e-4);background:var(--rn-fondo);
  border:1px solid var(--rn-borde);border-radius:var(--rn-r-bloque);
  box-shadow:0 18px 44px rgba(28,24,20,.16);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity var(--rn-transicion),transform var(--rn-transicion),visibility var(--rn-transicion)}
.rn-menu__con-hijos:hover .rn-menu__panel,
.rn-menu__con-hijos:focus-within .rn-menu__panel{opacity:1;visibility:visible;transform:translateY(0)}
.rn-menu__con-hijos:hover .rn-menu__flecha{transform:rotate(225deg) translate(-2px,-2px)}
.rn-menu__panel ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.rn-menu__panel a{display:block;padding:10px 12px;border-radius:var(--rn-r-etiqueta);
  color:var(--rn-texto);white-space:normal}
.rn-menu__panel a:hover{background:var(--rn-arena);color:var(--rn-ocre-honda)}
.rn-menu__panel b{display:block;font-variation-settings:'wdth' 112,'wght' 600;font-size:.9375rem}
.rn-menu__panel small{display:block;color:var(--rn-texto-2);font-size:.8125rem;line-height:1.35}
.rn-menu__nota{margin:var(--rn-e-3) 0 0;padding:var(--rn-e-3) 12px 0;
  border-top:1px solid var(--rn-borde);font-family:var(--rn-serif);font-style:italic;
  font-size:.9375rem;color:var(--rn-ocre-honda);max-width:none}

.rn-cabecera__acciones{display:flex;align-items:center;gap:var(--rn-e-3);margin-left:auto}
/* ES / EN como dos teclas, no como texto suelto. */
.rn-idioma{display:inline-flex;gap:4px;align-items:center;padding:3px;
  border:1px solid var(--cab-linea);border-radius:var(--rn-r-pastilla)}
.rn-idioma b,.rn-idioma a{display:inline-flex;align-items:center;justify-content:center;
  min-width:36px;height:28px;border-radius:var(--rn-r-pastilla);
  font-size:.75rem;letter-spacing:.04em;text-decoration:none;
  font-variation-settings:'wdth' 112,'wght' 600;
  transition:background var(--rn-transicion),color var(--rn-transicion)}
.rn-idioma b{background:var(--rn-sol);color:var(--rn-tinta)}
.rn-idioma a{color:var(--cab-apoyo)}
.rn-idioma a:hover{background:rgba(242,241,236,.14);color:var(--cab-texto)}
.rn-cabecera:not(.rn-cabecera--sobre) .rn-idioma a:hover{background:var(--rn-arena);color:var(--rn-ocre-honda)}

.rn-ico-wa{flex:none}
.rn-cabecera__cta{padding:11px 20px;font-size:.9375rem;flex:none;
  display:inline-flex;align-items:center;gap:8px}

/* Publicar mi inmueble. Es la otra mitad del negocio y tiene que pedir
   el clic, no esperar a que lo encuentren. Va en ocre lleno: destaca
   sin robarle el Sol a WhatsApp, que es la acción de la otra puerta. */
.rn-cabecera__publicar{flex:none;display:inline-flex;flex-direction:column;gap:1px;
  padding:9px 20px;border-radius:var(--rn-r-pastilla);text-decoration:none;
  background:var(--rn-ocre);color:var(--rn-espuma);
  box-shadow:0 2px 0 var(--rn-ocre-honda);
  transition:background var(--rn-transicion),transform var(--rn-transicion),
             box-shadow var(--rn-transicion)}
.rn-cabecera__publicar:hover{background:var(--rn-ocre-honda);color:var(--rn-espuma);
  transform:translateY(1px);box-shadow:0 1px 0 var(--rn-ocre-honda)}
.rn-cabecera__publicar-t{font-size:.9375rem;line-height:1.1;
  font-variation-settings:'wdth' 112,'wght' 600}
.rn-cabecera__publicar-s{font-size:.6875rem;line-height:1.1;color:var(--rn-arena)}
/* El botón de WhatsApp se nota: halo que late, como el flotante. */
.rn-cabecera__cta{position:relative;isolation:isolate}
.rn-cabecera__cta::before{content:"";position:absolute;inset:0;z-index:-1;
  border-radius:inherit;background:var(--rn-sol);
  animation:rn-latido 2.8s ease-out infinite}
@media (prefers-reduced-motion: reduce){.rn-cabecera__cta::before{animation:none;opacity:0}}

/* ---------- MENÚ EN EL TELÉFONO ----------
   La misma lista se convierte en un panel a pantalla completa con una
   casilla oculta. Sin JavaScript y sin marcado duplicado. */
.rn-hamburguesa{display:none;width:44px;height:44px;margin-left:auto;cursor:pointer;
  align-items:center;justify-content:center;border-radius:var(--rn-r-etiqueta)}
.rn-hamburguesa span{position:relative;display:block;width:22px;height:2px;
  background:var(--cab-texto);border-radius:2px}
.rn-hamburguesa span::before,.rn-hamburguesa span::after{content:"";position:absolute;
  left:0;width:22px;height:2px;background:var(--cab-texto);border-radius:2px}
.rn-hamburguesa span::before{top:-7px}
.rn-hamburguesa span::after{top:7px}
.rn-menu__cerrar{display:none;position:absolute;top:18px;right:18px;width:44px;height:44px;
  cursor:pointer;align-items:center;justify-content:center}
.rn-menu__cerrar span{position:relative;display:block;width:22px;height:22px}
.rn-menu__cerrar span::before,.rn-menu__cerrar span::after{content:"";position:absolute;
  top:10px;left:0;width:22px;height:2px;background:var(--rn-espuma);border-radius:2px}
.rn-menu__cerrar span::before{transform:rotate(45deg)}
.rn-menu__cerrar span::after{transform:rotate(-45deg)}
.rn-menu__solo-movil{display:none}
.rn-cabecera--sobre .rn-cabecera__publicar{color:var(--rn-espuma);
  border-color:rgba(242,241,236,.45)}
.rn-cabecera--sobre .rn-cabecera__publicar:hover{background:rgba(242,241,236,.12);
  color:var(--rn-espuma)}

@media (max-width:1240px){
  .rn-menu > ul{gap:var(--rn-e-4)}
}
@media (max-width:1100px){
  .rn-cabecera__publicar{display:none}
}
@media (max-width:980px){
  .rn-cabecera,.rn-cabecera--sobre{position:sticky;top:0;background:var(--rn-tinta);
    margin-bottom:0;animation:none;backdrop-filter:none;--cab-alto:64px;
    --cab-texto:var(--rn-espuma);--cab-apoyo:var(--rn-arena);--cab-linea:rgba(242,241,236,.18)}
  .rn-cabecera__fila{gap:var(--rn-e-3);padding-block:var(--rn-e-2);min-height:64px;flex-wrap:nowrap}
  .rn-cabecera__marca .rn-logo{height:30px}
  .rn-hamburguesa{display:inline-flex;order:5}
  .rn-cabecera__acciones{order:4;margin-left:auto;gap:var(--rn-e-2)}
  .rn-cabecera__publicar{display:none}
  /* El botón de WhatsApp sale de la cabecera: ya vive abajo, flotante y
     con su nombre. En su lugar van ES y EN, que es lo que de verdad hace
     falta tener a mano arriba. */
  .rn-cabecera__cta{display:none}
  .rn-idioma{display:inline-flex}

  /* El panel */
  .rn-menu{position:fixed;inset:0;z-index:90;margin:0;padding:84px var(--rn-margen) var(--rn-e-8);
    background:var(--rn-tinta);overflow-y:auto;
    opacity:0;visibility:hidden;transform:translateY(-8px);
    transition:opacity var(--rn-transicion),transform var(--rn-transicion),visibility var(--rn-transicion)}
  #rn-menu-abre:checked ~ .rn-menu{opacity:1;visibility:visible;transform:translateY(0)}
  .rn-menu__cerrar{display:inline-flex}
  .rn-menu > ul{flex-direction:column;align-items:stretch;gap:0}
  .rn-menu > ul > li{border-bottom:1px solid rgba(242,241,236,.14)}
  .rn-menu > ul > li > a{display:block;padding:var(--rn-e-4) 0;font-size:1.375rem;
    color:var(--rn-espuma);border-bottom:0;
    font-variation-settings:'wdth' 118,'wght' 600}
  .rn-menu__flecha{display:none}
  .rn-menu__con-hijos{position:static}
  /* Los submenús se despliegan ya abiertos: en el teléfono no hay cursor
     con el que pasar por encima. */
  .rn-menu__panel{position:static;opacity:1;visibility:visible;transform:none;
    min-width:0;padding:0 0 var(--rn-e-4);background:transparent;border:0;box-shadow:none}
  .rn-menu__panel a{padding:10px 0;color:var(--rn-arena)}
  .rn-menu__panel a:hover{background:transparent;color:var(--rn-sol)}
  .rn-menu__panel b{font-size:1.0625rem;color:var(--rn-arena)}
  .rn-menu__panel small{color:var(--rn-bruma)}
  .rn-menu__nota{display:none}
  .rn-menu__solo-movil{display:block}
  .rn-menu__publicar{color:var(--rn-sol) !important}
  .rn-menu__pie{display:flex;align-items:center;justify-content:space-between;
    gap:var(--rn-e-4);margin-top:var(--rn-e-6);padding-top:var(--rn-e-5);
    border-top:1px solid rgba(242,241,236,.16)}
  .rn-idioma--menu{display:inline-flex}
  .rn-menu__wa{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;
    border-radius:var(--rn-r-pastilla);background:var(--rn-accion);
    color:var(--rn-accion-texto);text-decoration:none;font-size:.9375rem;
    font-variation-settings:'wdth' 112,'wght' 600}
}
.rn-menu__pie{display:none}

/* ============================================================
   EL HÉROE
   ------------------------------------------------------------
   Vídeo o fotografía a sangre, con la cabecera encima. Mientras
   no haya ninguno de los dos, el telón de bóvedas de la propia
   marca: el bloque no queda nunca vacío.
   ============================================================ */
.rn-heroe{position:relative;isolation:isolate;background:var(--rn-tinta);
  color:var(--rn-espuma);overflow:hidden;padding-bottom:0;
  padding-top:calc(80px + clamp(40px,7vh,88px))}
.rn-heroe__fondo{position:absolute;inset:0;z-index:-3}
.rn-heroe__fondo img,.rn-heroe__fondo video{width:100%;height:100%;object-fit:cover}
.rn-heroe__telon{position:absolute;inset:0;z-index:-2;
  background-image:
    radial-gradient(70% 90% at 78% 6%, rgba(242,180,65,.22), transparent 62%),
    radial-gradient(60% 70% at 6% 100%, rgba(142,101,24,.45), transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='300' viewBox='0 0 220 300'%3E%3Cpath d='M26 300V116a44 44 0 0 1 88 0v184Z' fill='%23F2F1EC' fill-opacity='0.05'/%3E%3Cpath d='M136 300V146a34 34 0 0 1 68 0v154Z' fill='%23F2F1EC' fill-opacity='0.035'/%3E%3C/svg%3E");
  background-repeat:no-repeat,no-repeat,repeat-x;
  background-position:center,center,bottom left}
.rn-heroe::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(28,24,20,.72),rgba(28,24,20,.42) 42%,rgba(28,24,20,.90))}

/* El texto arranca en el margen y respira hacia la derecha. Nada de
   columna centrada: el héroe es a sangre y se tiene que notar. */
.rn-heroe__cuerpo{position:relative;padding-bottom:var(--rn-e-8);max-width:none}
.rn-heroe h1{font-size:clamp(2.125rem,1.5rem + 1.9vw,3.25rem);max-width:16ch;
  color:var(--rn-espuma);margin-bottom:var(--rn-e-3);letter-spacing:-.012em}
.rn-heroe__voz{font-family:var(--rn-serif);font-style:italic;
  font-size:clamp(1.375rem,1.1rem + 1vw,1.875rem);line-height:1.1;
  color:var(--rn-sol);margin:0 0 var(--rn-e-4);max-width:none;white-space:nowrap}
.rn-heroe__entrada{font-size:clamp(1rem,.96rem + .2vw,1.0625rem);
  color:var(--rn-arena);max-width:70ch;margin-bottom:0;line-height:1.65}

/* La barra ya NO monta sobre la sección siguiente: quedaba cortada por
   detrás. Vive dentro del héroe, con los dos botones debajo. */
.rn-heroe__barra{position:relative;z-index:3;padding-bottom:var(--rn-e-8)}

/* Los dos botones: pegados a la barra pero fuera de ella. */
.rn-heroe__acciones{display:flex;flex-wrap:wrap;gap:var(--rn-e-3);
  max-width:1340px;margin:var(--rn-e-5) 0 0;padding:0}
.rn-boton--claro{background:transparent;color:var(--rn-espuma);
  border:1.5px solid rgba(242,241,236,.55)}
.rn-boton--claro:hover{background:rgba(242,241,236,.14);color:var(--rn-espuma);
  border-color:var(--rn-espuma)}

/* Dos vídeos: horizontal arriba, vertical en el teléfono. El que no se
   ve lleva preload="none" y no se descarga. */
.rn-heroe__video{width:100%;height:100%;object-fit:cover}
.rn-heroe__video--movil{display:none}
@media (max-width:760px){
  .rn-heroe__video--escritorio{display:none}
  .rn-heroe__video--movil{display:block}
}

@media (max-width:900px){
  .rn-heroe{padding-top:var(--rn-e-7)}
  .rn-heroe__voz{white-space:normal}
}
@media (max-width:760px){
  .rn-heroe__cuerpo{padding-bottom:var(--rn-e-6)}
  .rn-heroe__barra{padding-bottom:var(--rn-e-7)}
  .rn-heroe__acciones{gap:var(--rn-e-2);margin-top:var(--rn-e-4)}
  .rn-heroe__acciones .rn-boton{width:100%;justify-content:center}
}
@media (prefers-reduced-motion: reduce){
  .rn-heroe__fondo video{display:none}
}

/* ============================================================
   EL BUSCADOR
   ------------------------------------------------------------
   Una tarjeta ancha y clara: a la izquierda el rótulo, a la
   derecha las pestañas, y debajo la fila de campos, cada uno en
   su propia caja. Las pestañas no cambian el color de la barra:
   cambian QUÉ PREGUNTA, que es lo que ningún portal de Cartagena
   hace. Todo en CSS, sin una línea de JavaScript.
   ============================================================ */
.rn-buscador{max-width:1340px;scroll-margin-top:110px;
  background:var(--rn-fondo);border-radius:28px;padding:var(--rn-e-5) var(--rn-e-5) var(--rn-e-4);
  box-shadow:0 28px 70px rgba(28,24,20,.30)}

.rn-buscador__alto{display:flex;flex-wrap:wrap;align-items:center;gap:var(--rn-e-4);
  margin-bottom:var(--rn-e-4)}
/* El rótulo deja de ser un adorno: es el arranque de la frase que las
   pestañas terminan. «Busco apartamento · Por días». */
.rn-buscador__rotulo{margin:0;max-width:none;flex:none;display:inline-flex;
  align-items:center;gap:12px;
  font-family:var(--rn-serif);font-style:italic;font-size:1.375rem;line-height:1;
  color:var(--rn-ocre)}
.rn-buscador__rotulo::after{content:"";width:28px;height:1px;background:var(--rn-ocre);
  opacity:.5}

.rn-buscador__pestanas{display:flex;flex-wrap:wrap;gap:6px;margin-left:0;flex:1}
/* Cada pestaña se ve seleccionable: lleva su punto, como un botón de
   opción, y se levanta al pasar por encima. */
.rn-pestana{display:inline-flex;align-items:center;gap:10px;cursor:pointer;
  padding:9px 16px;border-radius:var(--rn-r-pastilla);
  border:1px solid var(--rn-borde);background:var(--rn-fondo);color:var(--rn-texto-2);
  transition:background var(--rn-transicion),border-color var(--rn-transicion),
             color var(--rn-transicion),transform var(--rn-transicion),
             box-shadow var(--rn-transicion)}
.rn-pestana__punto{flex:none;width:15px;height:15px;border-radius:50%;
  border:1.8px solid var(--rn-bruma);position:relative;
  transition:border-color var(--rn-transicion)}
.rn-pestana__punto::after{content:"";position:absolute;inset:3px;border-radius:50%;
  background:var(--rn-sol);transform:scale(0);
  transition:transform var(--rn-transicion)}
.rn-pestana__txt{display:flex;flex-direction:column;gap:1px;text-align:left}
.rn-pestana b{font-size:.9375rem;line-height:1.1;
  font-variation-settings:'wdth' 112,'wght' 600}
.rn-pestana small{font-size:.6875rem;line-height:1.1;color:var(--rn-texto-3);
  white-space:nowrap}
.rn-pestana:hover{background:var(--rn-espuma);border-color:var(--rn-ocre);
  color:var(--rn-ocre-honda);transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(28,24,20,.07)}
.rn-pestana:hover .rn-pestana__punto{border-color:var(--rn-ocre)}
#rn-m-dias:checked     ~ .rn-buscador__alto [for="rn-m-dias"],
#rn-m-meses:checked    ~ .rn-buscador__alto [for="rn-m-meses"],
#rn-m-vivir:checked    ~ .rn-buscador__alto [for="rn-m-vivir"],
#rn-m-venta:checked    ~ .rn-buscador__alto [for="rn-m-venta"],
#rn-m-proyecto:checked ~ .rn-buscador__alto [for="rn-m-proyecto"]{
  background:var(--rn-tinta);border-color:var(--rn-tinta);color:var(--rn-espuma);
  transform:none;box-shadow:0 6px 18px rgba(28,24,20,.20)}
#rn-m-dias:checked     ~ .rn-buscador__alto [for="rn-m-dias"] .rn-pestana__punto,
#rn-m-meses:checked    ~ .rn-buscador__alto [for="rn-m-meses"] .rn-pestana__punto,
#rn-m-vivir:checked    ~ .rn-buscador__alto [for="rn-m-vivir"] .rn-pestana__punto,
#rn-m-venta:checked    ~ .rn-buscador__alto [for="rn-m-venta"] .rn-pestana__punto,
#rn-m-proyecto:checked ~ .rn-buscador__alto [for="rn-m-proyecto"] .rn-pestana__punto{
  border-color:var(--rn-sol)}
#rn-m-dias:checked     ~ .rn-buscador__alto [for="rn-m-dias"] .rn-pestana__punto::after,
#rn-m-meses:checked    ~ .rn-buscador__alto [for="rn-m-meses"] .rn-pestana__punto::after,
#rn-m-vivir:checked    ~ .rn-buscador__alto [for="rn-m-vivir"] .rn-pestana__punto::after,
#rn-m-venta:checked    ~ .rn-buscador__alto [for="rn-m-venta"] .rn-pestana__punto::after,
#rn-m-proyecto:checked ~ .rn-buscador__alto [for="rn-m-proyecto"] .rn-pestana__punto::after{
  transform:scale(1)}
#rn-m-dias:checked     ~ .rn-buscador__alto [for="rn-m-dias"] small,
#rn-m-meses:checked    ~ .rn-buscador__alto [for="rn-m-meses"] small,
#rn-m-vivir:checked    ~ .rn-buscador__alto [for="rn-m-vivir"] small,
#rn-m-venta:checked    ~ .rn-buscador__alto [for="rn-m-venta"] small,
#rn-m-proyecto:checked ~ .rn-buscador__alto [for="rn-m-proyecto"] small{color:var(--rn-sol)}
#rn-m-dias:focus-visible     ~ .rn-buscador__alto [for="rn-m-dias"],
#rn-m-meses:focus-visible    ~ .rn-buscador__alto [for="rn-m-meses"],
#rn-m-vivir:focus-visible    ~ .rn-buscador__alto [for="rn-m-vivir"],
#rn-m-venta:focus-visible    ~ .rn-buscador__alto [for="rn-m-venta"],
#rn-m-proyecto:focus-visible ~ .rn-buscador__alto [for="rn-m-proyecto"]{
  outline:2px solid var(--rn-foco);outline-offset:2px}

/* La fila de campos. Cada uno en su caja, como en la referencia. */
.rn-buscador__caja{display:flex;align-items:stretch;gap:var(--rn-e-2);flex-wrap:wrap}
.rn-campo{flex:1 1 170px;min-width:0;display:flex;flex-direction:column;justify-content:center;
  gap:2px;padding:12px var(--rn-e-4);border-radius:16px;
  border:1px solid var(--rn-borde);background:var(--rn-fondo);min-height:66px;
  transition:border-color var(--rn-transicion),background var(--rn-transicion)}
.rn-campo:hover{border-color:var(--rn-ocre)}
.rn-campo:focus-within{border-color:var(--rn-ocre);background:var(--rn-espuma);
  box-shadow:0 0 0 3px rgba(142,101,24,.14)}
.rn-campo--donde{flex:1.6 1 230px}
.rn-campo__et{font-size:.75rem;color:var(--rn-texto-3);cursor:pointer;
  font-variation-settings:'wdth' 100,'wght' 500}
.rn-campo__dato{appearance:none;border:0;background:transparent;cursor:pointer;
  font-family:var(--rn-sans);font-size:1.0625rem;line-height:1.3;color:var(--rn-texto);
  font-variation-settings:'wdth' 112,'wght' 600;
  padding:0 22px 0 0;margin:0;width:100%;text-overflow:ellipsis}
select.rn-campo__dato{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%238E6518' stroke-width='1.8'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right center}
input.rn-campo__dato{padding-right:0}
input.rn-campo__dato::-webkit-calendar-picker-indicator{cursor:pointer;opacity:.6}
.rn-campo__dato:focus{outline:0}

.rn-buscador__ir{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:0 34px;min-height:66px;cursor:pointer;border:0;border-radius:16px;
  background:var(--rn-accion);color:var(--rn-accion-texto);
  font-family:var(--rn-sans);font-size:1.0625rem;
  font-variation-settings:'wdth' 112,'wght' 600;
  transition:background var(--rn-transicion),transform var(--rn-transicion)}
.rn-buscador__ir:hover{background:#E5A832;transform:translateY(-1px)}
.rn-buscador__lupa{width:18px;height:18px;border:2.2px solid currentColor;border-radius:50%;
  position:relative;flex:none}
.rn-buscador__lupa::after{content:"";position:absolute;right:-6px;bottom:-4px;
  width:9px;height:2.2px;background:currentColor;transform:rotate(45deg);border-radius:2px}

/* Qué campo aparece en cada pestaña. Aquí está el truco entero. */
.rn-buscador .rn-tramo{display:none}
#rn-m-dias:checked     ~ .rn-buscador__caja .rn-tramo--personas,
#rn-m-dias:checked     ~ .rn-buscador__caja .rn-tramo--entrada,
#rn-m-dias:checked     ~ .rn-buscador__caja .rn-tramo--salida,
#rn-m-meses:checked    ~ .rn-buscador__caja .rn-tramo--personas,
#rn-m-meses:checked    ~ .rn-buscador__caja .rn-tramo--entrada,
#rn-m-meses:checked    ~ .rn-buscador__caja .rn-tramo--meses,
#rn-m-vivir:checked    ~ .rn-buscador__caja .rn-tramo--alcobas,
#rn-m-vivir:checked    ~ .rn-buscador__caja .rn-tramo--mensual,
#rn-m-venta:checked    ~ .rn-buscador__caja .rn-tramo--alcobas,
#rn-m-venta:checked    ~ .rn-buscador__caja .rn-tramo--compra,
#rn-m-proyecto:checked ~ .rn-buscador__caja .rn-tramo--alcobas,
#rn-m-proyecto:checked ~ .rn-buscador__caja .rn-tramo--compra{display:flex}

.rn-buscador__pie{margin:var(--rn-e-4) 0 0;padding-top:var(--rn-e-4);max-width:none;
  border-top:1px solid var(--rn-borde);font-size:.8125rem;color:var(--rn-texto-3);line-height:2.2}
.rn-buscador__pie > span{margin-right:var(--rn-e-3);
  font-variation-settings:'wdth' 112,'wght' 600;color:var(--rn-texto-2)}
.rn-buscador__pie a{color:var(--rn-ocre-honda);margin-right:var(--rn-e-3);white-space:nowrap;
  text-decoration:none;background:var(--rn-espuma);padding:5px 12px;border-radius:var(--rn-r-pastilla)}
.rn-buscador__pie a:hover{background:var(--rn-arena)}
.rn-buscador__pie .rn-cifra{font-size:.75rem;opacity:.65}

@media (max-width:1240px){
  .rn-buscador__rotulo{width:100%}
  .rn-buscador__rotulo::after{flex:1}
  .rn-buscador__pestanas{width:100%}
  .rn-pestana{flex:1 1 auto;justify-content:center}
  .rn-pestana small{display:none}
}
@media (max-width:760px){
  .rn-buscador{padding:var(--rn-e-4) var(--rn-e-3) var(--rn-e-3);border-radius:22px}
  .rn-buscador__alto{margin-bottom:var(--rn-e-3);gap:var(--rn-e-3)}
  .rn-buscador__rotulo{font-size:1.125rem;padding-inline:4px}
  /* Las cinco puertas se envuelven en dos filas: ninguna queda escondida
     tras un desplazamiento lateral que nadie ve que existe. */
  .rn-buscador__pestanas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
    gap:6px;overflow:visible}
  .rn-pestana{padding:10px 6px;background:var(--rn-espuma);gap:7px;
    justify-content:center;min-height:46px}
  .rn-pestana b{font-size:.8125rem;line-height:1.15;text-align:center}
  .rn-pestana__punto{width:12px;height:12px}
  .rn-pestana__punto::after{inset:2.5px}
  /* Las dos últimas se reparten la segunda fila a medias. */
  .rn-buscador__pestanas .rn-pestana:nth-child(4){grid-column:1 / 3}
  .rn-buscador__pestanas .rn-pestana:nth-child(5){grid-column:3 / 4}
  .rn-buscador__caja{flex-direction:column;gap:8px}
  .rn-campo{flex:none;width:100%;min-height:62px;background:var(--rn-espuma);border-color:transparent}
  .rn-buscador__ir{width:100%;min-height:58px}
  .rn-buscador__pie{display:none}
}
@media (max-width:420px){
  .rn-buscador__pestanas{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rn-buscador__pestanas .rn-pestana:nth-child(4){grid-column:auto}
  .rn-buscador__pestanas .rn-pestana:nth-child(5){grid-column:1 / -1}
}

/* ---------- TARJETA DE INMUEBLE ---------- */
.rn-inm{position:relative;display:flex;flex-direction:column;background:var(--rn-fondo);
  border:1px solid var(--rn-borde);border-radius:var(--rn-r-tarjeta);overflow:hidden;
  transition:border-color var(--rn-transicion),transform var(--rn-transicion)}
.rn-inm:hover{border-color:var(--rn-ocre);transform:translateY(-2px)}
.rn-inm__foto img{transition:transform 320ms ease-out}
.rn-inm:hover .rn-inm__foto img{transform:scale(1.03)}
.rn-seccion--arena .rn-inm{border-color:transparent}
.rn-inm__foto{position:relative;aspect-ratio:3/2;background:var(--rn-arena);overflow:hidden}
.rn-inm__foto img{width:100%;height:100%;object-fit:cover}
/* Mientras no haya fotografía, el hueco no se deja en gris: lleva el
   mismo telón de bóvedas del héroe. Un sitio en carga no tiene por qué
   parecer un sitio roto. */
.rn-inm__sinfoto{position:absolute;inset:0;display:flex;align-items:flex-end;
  justify-content:center;padding-bottom:var(--rn-e-5);
  background-color:var(--rn-arena);color:var(--rn-ocre-honda);font-size:.8125rem;
  font-variation-settings:'wdth' 112,'wght' 500;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='170' viewBox='0 0 120 170'%3E%3Cpath d='M14 170V66a24 24 0 0 1 48 0v104Z' fill='%238E6518' fill-opacity='0.13'/%3E%3Cpath d='M74 170V86a18 18 0 0 1 36 0v84Z' fill='%238E6518' fill-opacity='0.09'/%3E%3C/svg%3E");
  background-repeat:repeat-x;background-position:bottom left}
.rn-inm__nivel{position:absolute;top:var(--rn-e-3);left:var(--rn-e-3);z-index:2}
.rn-inm__nivel .rn-nivel--indice{background:var(--rn-espuma);border-color:var(--rn-borde)}
.rn-inm__cuerpo{display:flex;flex-direction:column;gap:var(--rn-e-3);
  padding:var(--rn-e-5)}
.rn-inm__ubicacion{font-size:var(--rn-t-micro);letter-spacing:.08em;text-transform:uppercase;
  font-variation-settings:'wdth' 112,'wght' 600;color:var(--rn-ocre-honda);margin:0}
.rn-inm__titulo{font-size:1.125rem;line-height:1.25;margin:0;
  font-variation-settings:'wdth' 118,'wght' 600;color:var(--rn-texto);
  text-wrap:balance}
.rn-inm__titulo a{color:inherit;text-decoration:none}
.rn-inm__titulo a::after{content:"";position:absolute;inset:0}
.rn-inm__pie{margin-top:auto;padding-top:var(--rn-e-3);border-top:1px solid var(--rn-borde)}

/* ---------- FICHAS DE DATO ---------- */
.rn-datos{display:flex;flex-wrap:wrap;gap:var(--rn-e-2);list-style:none;margin:0;padding:0}
.rn-datos li{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;
  background:var(--rn-arena);border-radius:var(--rn-r-etiqueta);font-size:.8125rem;
  font-variation-settings:'wdth' 100,'wght' 500;color:var(--rn-tinta-media)}
.rn-datos li b{font-variation-settings:'wdth' 112,'wght' 600;
  font-variant-numeric:tabular-nums;color:var(--rn-texto)}
.rn-datos--llano{flex-direction:column;gap:0;max-width:52ch}
.rn-datos--llano li{background:transparent;padding:10px 0;border-bottom:1px solid var(--rn-borde);
  width:100%;justify-content:space-between;font-size:.9375rem}

/* ---------- PRECIO ---------- */
.rn-precio{display:flex;flex-direction:column;gap:2px}
.rn-precio__desde{font-size:var(--rn-t-micro);letter-spacing:.06em;text-transform:uppercase;
  font-variation-settings:'wdth' 112,'wght' 500;color:var(--rn-texto-3)}
.rn-precio__cifra{font-variation-settings:'wdth' 112,'wght' 600;font-variant-numeric:tabular-nums;
  font-size:1.375rem;line-height:1.15;letter-spacing:-0.01em;color:var(--rn-texto)}
.rn-precio__cifra small{font-size:.6em;font-weight:400;color:var(--rn-texto-2)}
.rn-precio__detalle{font-size:.8125rem;color:var(--rn-texto-2);font-variant-numeric:tabular-nums}
.rn-precio__total{margin-top:var(--rn-e-2);padding-top:var(--rn-e-2);
  border-top:1px dashed var(--rn-borde);font-size:.875rem;
  font-variation-settings:'wdth' 112,'wght' 600;font-variant-numeric:tabular-nums}
.rn-precio--multiple{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:var(--rn-e-5)}

/* ---------- FICHAS DE FILTRO ACTIVO ----------
   Cada una es un enlace real a la misma página sin ese filtro.
   Se sueltan de uno en uno, sin JavaScript y sin perder el sitio. */
.rn-filtros--activos{align-items:center}
.rn-filtros__titulo{font-size:var(--rn-t-micro);letter-spacing:.08em;
  text-transform:uppercase;color:var(--rn-texto-3);
  font-variation-settings:'wdth' 112,'wght' 600;margin-right:var(--rn-e-1)}
.rn-quitar{background:var(--rn-arena);border-color:transparent !important;
  color:var(--rn-ocre-honda) !important}
.rn-quitar:hover{background:var(--rn-espuma)}
.rn-quitar--todo{background:transparent;text-decoration:underline}

/* ---------- FILTROS QUE SON ENLACES ---------- */
.rn-filtros{display:flex;flex-wrap:wrap;gap:var(--rn-e-2);list-style:none;
  margin:0 0 var(--rn-e-5);padding:0}
.rn-filtros a{display:inline-block;padding:8px 16px;border:1px solid var(--rn-borde);
  border-radius:var(--rn-r-pastilla);text-decoration:none;color:var(--rn-texto-2);
  font-size:.875rem;font-variation-settings:'wdth' 112,'wght' 500;
  transition:border-color var(--rn-transicion),color var(--rn-transicion)}
.rn-filtros a:hover{border-color:var(--rn-ocre);color:var(--rn-ocre-honda)}
.rn-filtros a[aria-current="page"]{background:var(--rn-tinta);border-color:var(--rn-tinta);
  color:var(--rn-espuma)}
.rn-filtros .rn-cifra{font-size:.8125rem;opacity:.7;margin-left:4px}
.rn-filtros--modalidad a{font-size:.9375rem;padding:10px 20px}

/* ---------- REJILLA Y PAGINACIÓN ---------- */
.rn-rejilla{display:grid;gap:var(--rn-e-5);
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
/* La portada va a cuatro columnas exactas: tres filas de cuatro. */
.rn-rejilla--cuatro{grid-template-columns:repeat(4,minmax(0,1fr))}
.rn-rejilla--tres{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:980px){.rn-rejilla--tres{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.rn-rejilla--tres{grid-template-columns:minmax(0,1fr)}}
@media (max-width:1280px){.rn-rejilla--cuatro{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:980px){.rn-rejilla--cuatro{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.rn-rejilla--cuatro{grid-template-columns:minmax(0,1fr)}}
.rn-paginacion{display:flex;flex-wrap:wrap;gap:var(--rn-e-2);align-items:center;
  list-style:none;margin:var(--rn-e-6) 0 0;padding:0;font-variant-numeric:tabular-nums}
.rn-paginacion a,.rn-paginacion span{display:inline-flex;align-items:center;
  justify-content:center;min-width:40px;height:40px;padding:0 10px;
  border:1px solid var(--rn-borde);border-radius:var(--rn-r-etiqueta);
  text-decoration:none;color:var(--rn-texto-2);font-variation-settings:'wdth' 112,'wght' 500}
.rn-paginacion a:hover{border-color:var(--rn-ocre);color:var(--rn-ocre-honda)}
.rn-paginacion [aria-current="page"]{background:var(--rn-tinta);border-color:var(--rn-tinta);
  color:var(--rn-espuma)}

/* ---------- GALERÍA ---------- */
.rn-galeria{display:grid;gap:var(--rn-e-3);
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));margin-block:var(--rn-e-5)}
.rn-galeria__pieza{margin:0;border-radius:var(--rn-r-bloque);overflow:hidden;background:var(--rn-arena)}
.rn-galeria__pieza img{width:100%;aspect-ratio:3/2;object-fit:cover}
.rn-galeria__pieza--grande{grid-column:1/-1}
@media (min-width:760px){.rn-galeria__pieza--grande{grid-column:span 2;grid-row:span 2}}

/* ---------- MAPA DE CÍRCULO ---------- */
.rn-mapa{position:relative;aspect-ratio:16/9;border-radius:var(--rn-r-bloque);
  overflow:hidden;background:var(--rn-arena);border:1px solid var(--rn-borde)}
.rn-mapa__nota{position:absolute;left:var(--rn-e-3);bottom:var(--rn-e-3);
  background:var(--rn-espuma);border-radius:var(--rn-r-etiqueta);padding:6px 12px;
  font-size:var(--rn-t-micro);color:var(--rn-texto-2)}

/* ---------- AVISO DE NIVEL ---------- */
.rn-aviso{border-left:3px solid var(--rn-ocre);background:var(--rn-arena);
  border-radius:0 var(--rn-r-bloque) var(--rn-r-bloque) 0;
  padding:var(--rn-e-4) var(--rn-e-5);margin-block:var(--rn-e-5)}
.rn-aviso--indice{border:1px solid var(--rn-borde);border-left:3px solid var(--rn-bruma);
  background:transparent}
.rn-aviso p{margin:var(--rn-e-2) 0 0;font-size:.9375rem;color:var(--rn-tinta-media)}
.rn-niveles-explica{display:grid;gap:var(--rn-e-4);
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.rn-niveles-explica .rn-aviso{margin:0}
/* Sobre arena el aviso no puede ser arena: se invierte a espuma. */
.rn-seccion--arena .rn-aviso{background:var(--rn-espuma)}
.rn-seccion--arena .rn-aviso--indice{background:transparent;
  border-color:rgba(28,24,20,.14);border-left-color:var(--rn-bruma)}
.rn-seccion--arena .rn-nivel--operacion{background:var(--rn-espuma)}
.rn-seccion--arena .rn-vacio{background:var(--rn-espuma)}
.rn-seccion--arena .rn-banda__intro{color:var(--rn-tinta-media)}

/* ---------- TRES PUERTAS ---------- */
.rn-puertas{display:grid;gap:var(--rn-e-5);
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.rn-puerta{background:var(--rn-arena);border-radius:var(--rn-r-tarjeta);
  padding:var(--rn-e-5);display:flex;flex-direction:column;gap:var(--rn-e-2)}
.rn-puerta h3{margin:0;font-size:1.1875rem}
.rn-puerta p{margin:0;font-size:.9375rem;color:var(--rn-tinta-media)}
.rn-puerta a{margin-top:auto;padding-top:var(--rn-e-4);text-decoration:none;
  color:var(--rn-ocre-honda);font-variation-settings:'wdth' 112,'wght' 600}
.rn-puerta a:hover{text-decoration:underline}
/* Dentro del bloque oscuro las puertas se invierten. */
.rn-propietarios .rn-puerta{background:rgba(242,241,236,.07);
  border:1px solid rgba(242,241,236,.13)}
.rn-propietarios .rn-puerta h3{color:var(--rn-espuma)}
.rn-propietarios .rn-puerta p{color:var(--rn-arena)}
.rn-propietarios .rn-puerta a{color:var(--rn-sol)}

/* ============================================================
   TITULARES DE SECCIÓN
   ------------------------------------------------------------
   Ojo pequeño arriba, titular grande, acción a la derecha. Un
   solo patrón para toda la página: es lo que le da ritmo.
   ============================================================ */
.rn-titular{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:var(--rn-e-4);margin-bottom:var(--rn-e-7)}
.rn-titular h2{margin:0;font-size:clamp(1.75rem,1.3rem + 1.7vw,2.75rem);
  letter-spacing:-.015em;max-width:22ch;text-wrap:balance}
.rn-titular__ojo{margin:0 0 var(--rn-e-2);max-width:none;display:inline-flex;align-items:center;
  gap:10px;font-size:.8125rem;color:var(--rn-ocre);
  font-variation-settings:'wdth' 112,'wght' 600}
/* El punto que late. Es la señal viva de la marca: el mismo gesto de la
   bóveda encendida, repetido en pequeño por toda la página. */
.rn-titular__ojo::before,.rn-punto{content:"";position:relative;flex:none;
  width:9px;height:9px;border-radius:50%;background:var(--rn-ocre)}
.rn-punto{display:inline-block}
.rn-punto::after{content:"";position:absolute;inset:0;border-radius:50%;
  background:var(--rn-sol);animation:rn-titilar 2.4s ease-out infinite}
.rn-titular__ojo::before{box-shadow:0 0 0 0 rgba(242,180,65,.6);
  animation:rn-titilar-halo 2.4s ease-out infinite}
@keyframes rn-titilar{
  0%{transform:scale(1);opacity:.85}
  70%{transform:scale(2.4);opacity:0}
  100%{transform:scale(2.4);opacity:0}
}
@keyframes rn-titilar-halo{
  0%{box-shadow:0 0 0 0 rgba(242,180,65,.55)}
  70%{box-shadow:0 0 0 9px rgba(242,180,65,0)}
  100%{box-shadow:0 0 0 0 rgba(242,180,65,0)}
}
@media (prefers-reduced-motion: reduce){
  .rn-punto::after,.rn-titular__ojo::before{animation:none}
  .rn-punto::after{opacity:0}
}

/* El botón de sección: pastilla clara con el punto delante, en la misma
   línea del titular. Ocupa el hueco que antes quedaba vacío a la derecha. */
.rn-boton-seccion{display:inline-flex;align-items:center;gap:10px;flex:none;
  padding:11px 22px;border-radius:var(--rn-r-pastilla);text-decoration:none;
  background:var(--rn-fondo);border:1px solid var(--rn-borde);color:var(--rn-texto);
  font-size:.9375rem;white-space:nowrap;
  font-variation-settings:'wdth' 112,'wght' 600;
  transition:border-color var(--rn-transicion),background var(--rn-transicion),
             transform var(--rn-transicion),box-shadow var(--rn-transicion)}
.rn-boton-seccion:hover{border-color:var(--rn-ocre);color:var(--rn-ocre-honda);
  transform:translateY(-1px);box-shadow:0 6px 16px rgba(28,24,20,.09)}
.rn-seccion--arena .rn-boton-seccion{background:var(--rn-espuma);border-color:transparent}
.rn-seccion--tinta .rn-boton-seccion,.rn-proyectos .rn-boton-seccion{
  background:rgba(242,241,236,.08);border-color:rgba(242,241,236,.22);color:var(--rn-espuma)}
.rn-seccion--tinta .rn-boton-seccion:hover,.rn-proyectos .rn-boton-seccion:hover{
  background:rgba(242,241,236,.16);color:var(--rn-espuma);border-color:var(--rn-sol)}
.rn-titular__nota{margin:0;max-width:34ch;font-size:.875rem;color:var(--rn-texto-3)}
.rn-seccion--tinta .rn-titular__ojo,.rn-proyectos .rn-titular__ojo,
.rn-propietario .rn-titular__ojo{color:var(--rn-sol)}
.rn-seccion--tinta .rn-titular__ojo::before,.rn-proyectos .rn-titular__ojo::before,
.rn-propietario .rn-titular__ojo::before{background:var(--rn-sol)}
.rn-seccion--tinta .rn-boton--contorno{color:var(--rn-espuma);border-color:rgba(242,241,236,.45)}
.rn-seccion--tinta .rn-boton--contorno:hover{background:rgba(242,241,236,.12);color:var(--rn-espuma)}
.rn-boton--grande{padding:16px 32px;font-size:1.0625rem;display:inline-flex;align-items:center;gap:10px}
.rn-enlace-fuerte{display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  color:var(--rn-sol);font-size:1rem;padding:16px 4px;
  font-variation-settings:'wdth' 112,'wght' 600;
  border-bottom:2px solid transparent}
.rn-enlace-fuerte:hover{color:var(--rn-sol);border-bottom-color:var(--rn-sol)}

/* ---------- FOTOGRAFÍA DE FONDO EN SECCIÓN ----------
   Va muy por debajo del velo: la sección sigue siendo legible y la
   imagen solo aporta profundidad. */
.rn-con-foto{position:relative;isolation:isolate;overflow:hidden}
.rn-con-foto__fondo{position:absolute;inset:0;z-index:-2}
.rn-con-foto__fondo img{width:100%;height:100%;object-fit:cover}
/* La fotografía va limpia, sin la trama de arcos encima: solo un velo
   oscuro, el justo para que el texto se lea. */
.rn-con-foto__fondo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(28,24,20,.90),rgba(28,24,20,.78) 45%,rgba(28,24,20,.92))}
/* Donde hay foto, el telón de bóvedas se apaga. */
.rn-con-foto .rn-proyectos__telon,.rn-con-foto .rn-propietario__telon{display:none}

/* ---------- LA PUERTA AL ÍNDICE ----------
   Cierra la rejilla de recientes. No es un inmueble: es la cifra
   y la salida, con el mismo tamaño que una tarjeta. */
.rn-vano-mas{display:flex;flex-direction:column;justify-content:center;gap:var(--rn-e-2);
  padding:var(--rn-e-6);text-decoration:none;border-radius:var(--rn-r-tarjeta);
  background:var(--rn-tinta);color:var(--rn-espuma);position:relative;overflow:hidden;
  isolation:isolate;min-height:260px;
  transition:transform var(--rn-transicion)}
.rn-vano-mas::before{content:"";position:absolute;inset:0;z-index:-1;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='210' viewBox='0 0 150 210'%3E%3Cpath d='M18 210V80a30 30 0 0 1 60 0v130Z' fill='%23F2B441' fill-opacity='0.09'/%3E%3C/svg%3E");
  background-repeat:repeat-x;background-position:bottom left}
.rn-vano-mas:hover{transform:translateY(-3px);color:var(--rn-espuma)}
.rn-vano-mas__cifra{font-size:clamp(2.75rem,2rem + 2.4vw,4rem);line-height:.95;
  color:var(--rn-sol);letter-spacing:-.03em;font-variant-numeric:tabular-nums;
  font-variation-settings:'wdth' 112,'wght' 600}
.rn-vano-mas__txt{font-size:.9375rem;color:var(--rn-arena);max-width:20ch;line-height:1.4}
.rn-vano-mas__accion{margin-top:var(--rn-e-3);font-size:.9375rem;color:var(--rn-sol);
  font-variation-settings:'wdth' 112,'wght' 600;
  border-bottom:1px solid var(--rn-sol);align-self:flex-start;padding-bottom:2px}

/* ---------- LAS TRES RAZONES ---------- */
.rn-razones{display:grid;gap:var(--rn-e-5);
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.rn-razon{position:relative;padding:var(--rn-e-6) var(--rn-e-5) var(--rn-e-5);
  background:var(--rn-espuma);border-radius:var(--rn-r-tarjeta);overflow:hidden}
.rn-razon__n{position:absolute;top:var(--rn-e-4);right:var(--rn-e-5);
  font-size:3.5rem;line-height:1;color:var(--rn-ocre);opacity:.14;
  font-variant-numeric:tabular-nums;font-variation-settings:'wdth' 112,'wght' 600}
.rn-razon h3{margin:0 0 var(--rn-e-3);font-size:1.25rem;max-width:18ch;text-wrap:balance}
.rn-razon p{margin:0;color:var(--rn-tinta-media);font-size:.9375rem;max-width:40ch}

/* ---------- LOS TRES NIVELES, EN TARJETA ---------- */
.rn-niveles-explica{display:grid;gap:var(--rn-e-4);
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.rn-nivel-tarjeta{padding:var(--rn-e-5);border-radius:var(--rn-r-tarjeta);
  background:var(--rn-fondo);border:1px solid var(--rn-borde);
  border-top:3px solid var(--rn-bruma)}
.rn-nivel-tarjeta--selection{border-top-color:var(--rn-ocre);background:var(--rn-espuma)}
.rn-nivel-tarjeta--operacion{border-top-color:var(--rn-sol)}
.rn-nivel-tarjeta h3{margin:var(--rn-e-3) 0 var(--rn-e-2);font-size:1.125rem}
.rn-nivel-tarjeta p{margin:0;font-size:.9375rem;color:var(--rn-texto-2);max-width:42ch}

/* ---------- LAS OCHO ZONAS ----------
   Dos filas de cuatro, cuadros contenidos. La fotografía entra sola
   subiéndola a /assets/img/zonas/<slug>.jpg. */
.rn-zonas{display:grid;gap:var(--rn-e-4);grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1100px){.rn-zonas{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.rn-zonas{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--rn-e-3)}}
/* El fondo de respaldo va aquí, DEBAJO de todo: si algún día falta una
   foto, el cuadro se ve en ocre y no roto. */
.rn-zona{position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  min-height:190px;padding:var(--rn-e-4);text-decoration:none;overflow:hidden;
  border-radius:var(--rn-r-tarjeta);background:var(--rn-ocre-honda);color:var(--rn-espuma);
  isolation:isolate;transition:transform var(--rn-transicion)}
.rn-zona:hover{transform:translateY(-3px);color:var(--rn-espuma)}
.rn-zona__fondo{position:absolute;inset:0;z-index:-2;display:block}
.rn-zona__fondo img{width:100%;height:100%;object-fit:cover}
/* ESTE ERA EL FALLO · 6 de octubre de 2026
   ---------------------------------------------------------------------
   Aquí había un background-color OPACO en ocre. Esta capa va en
   z-index:-1 y la fotografía en z-index:-2, así que el color tapaba la
   foto por completo: la imagen se descargaba bien y no se veía ninguna.
   Las de sección sí se veían porque no llevan esta capa de color.
   Ahora solo queda el velo semitransparente, el justo para que el
   nombre del barrio se lea sobre la foto. */
.rn-zona::before{content:"";position:absolute;inset:0;z-index:-1;
  background-image:linear-gradient(175deg,rgba(28,24,20,.10) 35%,rgba(28,24,20,.82))}
.rn-zona__nombre{font-size:1.0625rem;line-height:1.2;text-wrap:balance;
  font-variation-settings:'wdth' 118,'wght' 600}
.rn-zona__cuenta{font-size:.8125rem;color:var(--rn-arena);margin-top:3px}

/* ============================================================
   PROYECTOS
   ------------------------------------------------------------
   La sección de más peso de la página. La palabra se escribe
   grande, en Instrument Serif, porque es la línea en la que la
   empresa se juega el crecimiento. La escalera explica el
   negocio en cuatro peldaños que suben, igual que sube el
   precio del proyecto. Ninguna cifra de rentabilidad: esa
   promesa no se publica sin fuente, fecha y respaldo escrito.
   ============================================================ */
.rn-proyectos{position:relative;isolation:isolate;overflow:hidden;
  background:var(--rn-tinta);color:var(--rn-espuma);padding-block:var(--rn-e-9)}
.rn-proyectos h2,.rn-proyectos h3{color:var(--rn-espuma)}
.rn-proyectos__telon{position:absolute;inset:0;z-index:-1;
  background-image:
    radial-gradient(50% 60% at 86% 0%, rgba(242,180,65,.30), transparent 66%),
    radial-gradient(64% 74% at 0% 100%, rgba(142,101,24,.55), transparent 72%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='380' viewBox='0 0 280 380'%3E%3Cpath d='M32 380V156a56 56 0 0 1 112 0v224Z' fill='%23F2F1EC' fill-opacity='0.045'/%3E%3Cpath d='M176 380V192a44 44 0 0 1 88 0v188Z' fill='%23F2B441' fill-opacity='0.08'/%3E%3C/svg%3E");
  background-repeat:no-repeat,no-repeat,repeat-x;
  background-position:center,center,bottom left}

.rn-proyectos__marca{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--rn-e-4);
  padding-bottom:var(--rn-e-5);margin-bottom:var(--rn-e-7);
  border-bottom:1px solid rgba(242,241,236,.16)}
.rn-proyectos__palabra{font-family:var(--rn-serif);font-style:normal;
  font-size:clamp(2.5rem,1.8rem + 3.4vw,5rem);line-height:.9;color:var(--rn-sol);
  letter-spacing:-.01em}
.rn-proyectos__sub{font-size:.9375rem;color:var(--rn-arena);
  font-variation-settings:'wdth' 112,'wght' 500}

.rn-proyectos__cuerpo{display:grid;gap:var(--rn-e-8)}
@media (min-width:1020px){.rn-proyectos__cuerpo{grid-template-columns:1fr 1fr;
  gap:var(--rn-e-9);align-items:start}}
.rn-proyectos__texto h2{font-size:clamp(1.5rem,1.2rem + 1.1vw,2rem);
  margin:0 0 var(--rn-e-2);max-width:20ch;letter-spacing:-.012em;text-wrap:balance}
.rn-proyectos__apoyo{font-family:var(--rn-serif);font-style:italic;
  font-size:1.25rem;color:var(--rn-sol);margin:0 0 var(--rn-e-4);max-width:none}
.rn-proyectos__intro{color:var(--rn-arena);max-width:48ch;font-size:1.0625rem;line-height:1.65}
.rn-proyectos__acciones{display:flex;flex-wrap:wrap;align-items:center;
  gap:var(--rn-e-4);margin:var(--rn-e-6) 0 0;max-width:none}

/* La escalera: cuatro peldaños que suben, igual que sube el precio. */
.rn-escalera{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.rn-escalera li{position:relative;display:grid;grid-template-columns:auto 1fr;
  gap:2px var(--rn-e-4);align-items:baseline;
  padding:var(--rn-e-4) var(--rn-e-5);border-radius:var(--rn-r-bloque);
  background:rgba(242,241,236,.05);border-left:3px solid var(--rn-ocre);
  transition:background var(--rn-transicion)}
.rn-escalera li:nth-child(2){margin-left:var(--rn-e-5)}
.rn-escalera li:nth-child(3){margin-left:calc(var(--rn-e-5) * 2)}
.rn-escalera li:nth-child(4){margin-left:calc(var(--rn-e-5) * 3);
  border-left-color:var(--rn-sol);background:rgba(242,180,65,.11)}
.rn-escalera li:hover{background:rgba(242,241,236,.10)}
.rn-escalera__n{grid-row:span 2;font-variant-numeric:tabular-nums;font-size:.8125rem;
  color:var(--rn-sol);letter-spacing:.06em;
  font-variation-settings:'wdth' 112,'wght' 600}
.rn-escalera b{font-size:1.0625rem;font-variation-settings:'wdth' 112,'wght' 600}
.rn-escalera span:not(.rn-escalera__n){font-size:.875rem;color:var(--rn-arena);line-height:1.45}
@media (max-width:760px){.rn-escalera li{margin-left:0 !important;padding:var(--rn-e-4)}}

.rn-proyectos__rejilla{margin-top:var(--rn-e-8)}
.rn-proyectos__vacio{display:flex;flex-wrap:wrap;align-items:center;gap:var(--rn-e-6);
  justify-content:space-between;margin-top:var(--rn-e-8);padding:var(--rn-e-6);
  background:rgba(242,241,236,.07);border:1px solid rgba(242,241,236,.16);
  border-radius:var(--rn-r-tarjeta)}
.rn-proyectos__vacio > div{flex:1 1 440px}
.rn-proyectos__vacio p{margin:0 0 var(--rn-e-3);color:var(--rn-arena);max-width:64ch;line-height:1.65}
.rn-proyectos__vacio p:last-child{margin-bottom:0}
.rn-proyectos__vacio b{color:var(--rn-espuma)}
.rn-proyectos__vacio-t{font-size:1.25rem;color:var(--rn-espuma) !important;
  font-variation-settings:'wdth' 112,'wght' 600}
.rn-proyectos .rn-inm{background:rgba(242,241,236,.06);border-color:rgba(242,241,236,.16)}
.rn-proyectos .rn-inm__titulo,.rn-proyectos .rn-inm__titulo a,
.rn-proyectos .rn-precio__cifra{color:var(--rn-espuma)}
.rn-proyectos .rn-inm__ubicacion{color:var(--rn-sol)}
.rn-proyectos .rn-datos li{background:rgba(242,241,236,.10);color:var(--rn-arena)}
.rn-proyectos .rn-datos li b{color:var(--rn-espuma)}
.rn-proyectos .rn-precio__desde{color:var(--rn-arena)}
.rn-proyectos .rn-inm__pie{border-top-color:rgba(242,241,236,.16)}

/* ---------- CÓMO FUNCIONA ----------
   Cuatro pasos. Van numerados porque son una secuencia de verdad. */
.rn-pasos{display:grid;gap:var(--rn-e-6);counter-reset:paso;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.rn-paso{counter-increment:paso;position:relative;padding-top:var(--rn-e-6)}
.rn-paso::before{content:counter(paso,decimal-leading-zero);position:absolute;top:0;left:0;
  font-variation-settings:'wdth' 112,'wght' 600;font-variant-numeric:tabular-nums;
  font-size:.875rem;color:var(--rn-ocre);letter-spacing:.06em}
.rn-paso::after{content:"";position:absolute;top:var(--rn-e-5);left:30px;right:0;
  height:1px;background:var(--rn-borde)}
.rn-paso h3{margin:0 0 var(--rn-e-2);font-size:1.0625rem}
.rn-paso p{margin:0;font-size:.9375rem;color:var(--rn-texto-2);max-width:36ch}
.rn-seccion--tinta .rn-paso::after{background:rgba(242,241,236,.18)}
.rn-seccion--tinta .rn-paso p{color:var(--rn-arena)}
.rn-seccion--tinta .rn-paso::before{color:var(--rn-sol)}

/* ---------- EL OTRO PÚBLICO ----------
   Bloque en tinta: marca con el color que aquí se habla a otra
   persona, la que tiene el inmueble y no sabe qué hacer con él. */
.rn-propietarios{background:var(--rn-tinta);color:var(--rn-espuma);
  border-radius:var(--rn-r-tarjeta);padding:var(--rn-e-8) var(--rn-e-6);
  position:relative;overflow:hidden;isolation:isolate}
.rn-propietarios::after{content:"";position:absolute;right:-40px;bottom:-60px;
  width:420px;height:300px;z-index:-1;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='300' viewBox='0 0 220 300'%3E%3Cpath d='M26 300V116a44 44 0 0 1 88 0v184Z' fill='%23F2B441' fill-opacity='0.10'/%3E%3C/svg%3E");
  background-repeat:repeat-x;background-position:bottom left}
.rn-propietarios h2{color:var(--rn-espuma);max-width:18ch}
.rn-propietarios__voz{font-family:var(--rn-serif);font-size:clamp(1.25rem,1rem + 1vw,1.75rem);
  color:var(--rn-sol);margin:0 0 var(--rn-e-6);max-width:30ch}
.rn-propietarios .rn-puertas{margin-top:var(--rn-e-6)}

/* ============================================================
   EL PROPIETARIO
   ------------------------------------------------------------
   Banda propia, en tinta, con la arcada. Cambia el color porque
   cambia la persona a la que se le habla.
   ============================================================ */
.rn-propietario{position:relative;isolation:isolate;overflow:hidden;
  background:var(--rn-tinta);color:var(--rn-espuma);padding-block:var(--rn-e-9)}
.rn-propietario h2,.rn-propietario h3{color:var(--rn-espuma)}
.rn-propietario__telon{position:absolute;inset:0;z-index:-1;
  background-image:
    radial-gradient(48% 60% at 92% 10%, rgba(242,180,65,.20), transparent 68%),
    radial-gradient(62% 70% at 0% 100%, rgba(142,101,24,.46), transparent 72%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='320' viewBox='0 0 240 320'%3E%3Cpath d='M28 320V132a48 48 0 0 1 96 0v188Z' fill='%23F2F1EC' fill-opacity='0.04'/%3E%3C/svg%3E");
  background-repeat:no-repeat,no-repeat,repeat-x;
  background-position:center,center,bottom left}
.rn-propietario__cuerpo{display:grid;gap:var(--rn-e-8);align-items:start}
@media (min-width:1020px){.rn-propietario__cuerpo{grid-template-columns:1.05fr .95fr;
  gap:var(--rn-e-9)}}
.rn-propietario h2{font-size:clamp(1.875rem,1.3rem + 2.1vw,3.25rem);margin:0 0 var(--rn-e-2);
  max-width:16ch;letter-spacing:-.015em}
.rn-propietario__voz{font-family:var(--rn-serif);font-style:italic;
  font-size:clamp(1.375rem,1.1rem + 1.2vw,2rem);color:var(--rn-sol);
  margin:0 0 var(--rn-e-5);max-width:none}
.rn-propietario__intro{color:var(--rn-arena);max-width:48ch;font-size:1.0625rem;line-height:1.65}
.rn-propietario__acciones{display:flex;flex-wrap:wrap;align-items:center;gap:var(--rn-e-4);
  margin:var(--rn-e-6) 0 0;max-width:none}
.rn-propietario__gratis{font-size:.875rem;color:var(--rn-arena);
  display:inline-flex;align-items:center;gap:8px}
.rn-propietario__gratis::before{content:"";width:8px;height:8px;border-radius:50%;
  background:var(--rn-sol);flex:none}

.rn-propietario__caja{background:rgba(242,241,236,.07);border:1px solid rgba(242,241,236,.14);
  border-radius:var(--rn-r-tarjeta);padding:var(--rn-e-5)}
.rn-ventajas-prop{list-style:none;margin:0 0 var(--rn-e-5);padding:0;display:grid;gap:var(--rn-e-4)}
.rn-ventajas-prop li{display:grid;gap:2px;padding-left:var(--rn-e-5);position:relative}
.rn-ventajas-prop li::before{content:"";position:absolute;left:0;top:7px;
  width:12px;height:12px;border-radius:7px 7px 0 0;background:var(--rn-sol)}
.rn-ventajas-prop b{font-size:1rem;font-variation-settings:'wdth' 112,'wght' 600;
  color:var(--rn-espuma)}
.rn-ventajas-prop span{font-size:.875rem;color:var(--rn-arena);line-height:1.45}
.rn-publicar__form{display:grid;gap:8px;padding-top:var(--rn-e-5);
  border-top:1px solid rgba(242,241,236,.14)}
.rn-publicar__form .rn-campo{background:var(--rn-espuma);border-color:transparent;min-height:62px}
.rn-publicar__form .rn-boton{width:100%;justify-content:center;min-height:56px;
  display:inline-flex;align-items:center;gap:10px}

/* ============================================================
   BOTÓN FLOTANTE DE WHATSAPP
   ------------------------------------------------------------
   Acompaña toda la navegación. Aquí se cierra por WhatsApp, no
   por carrito: es la acción que convierte, y por eso es el Sol.
   El halo late despacio; con «reducir movimiento» se queda
   quieto, como manda la accesibilidad.
   ============================================================ */
.rn-flotante{position:fixed;right:clamp(16px,2.5vw,32px);z-index:70;
  bottom:calc(clamp(16px,2.5vw,32px) + env(safe-area-inset-bottom,0px));
  display:inline-flex;align-items:center;gap:10px;padding:14px 24px;
  background:var(--rn-accion);color:var(--rn-accion-texto);text-decoration:none;
  border-radius:var(--rn-r-pastilla);font-size:1rem;line-height:1;
  font-variation-settings:'wdth' 112,'wght' 600;
  box-shadow:0 10px 30px rgba(28,24,20,.28);
  transition:transform var(--rn-transicion),background var(--rn-transicion)}
.rn-flotante:hover{background:#E5A832;color:var(--rn-accion-texto);transform:translateY(-2px)}
.rn-flotante__icono{display:inline-flex;flex:none}
.rn-flotante__txt{white-space:nowrap}
.rn-flotante::before{content:"";position:absolute;inset:0;z-index:-1;
  border-radius:inherit;background:var(--rn-sol);
  animation:rn-latido 2.6s ease-out infinite}
@keyframes rn-latido{
  0%  {transform:scale(1);   opacity:.55}
  70% {transform:scale(1.28);opacity:0}
  100%{transform:scale(1.28);opacity:0}
}
@media (max-width:560px){
  /* La palabra se queda: un icono suelto se confunde con un robot de
     chat, y aquí al otro lado contesta una persona. */
  .rn-flotante{padding:13px 20px;font-size:.9375rem}
}
@media (prefers-reduced-motion: reduce){
  .rn-flotante::before{animation:none;opacity:0}
}

/* ---------- PREGUNTAS FRECUENTES ---------- */
.rn-faq details{border-bottom:1px solid var(--rn-borde);padding-block:var(--rn-e-4)}
.rn-faq summary{cursor:pointer;font-variation-settings:'wdth' 112,'wght' 600;
  font-size:1.0625rem;list-style:none}
.rn-faq summary::-webkit-details-marker{display:none}
.rn-faq summary::after{content:" +";color:var(--rn-ocre)}
.rn-faq details[open] summary::after{content:" −"}
.rn-faq p{margin:var(--rn-e-3) 0 0;color:var(--rn-tinta-media)}

/* ============================================================
   EL PIE
   ------------------------------------------------------------
   Oscuro y completo: cierra la página y repite, en texto, cada
   entrada del sitio. Es donde un rastreador encuentra el mapa
   entero sin tener que adivinarlo.
   ============================================================ */
.rn-pie{margin-top:0;background:var(--rn-tinta);color:var(--rn-arena);
  padding-bottom:calc(var(--rn-e-5) + 60px)}
.rn-pie__cuerpo{display:grid;gap:var(--rn-e-7);padding-block:var(--rn-e-8) var(--rn-e-6);
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
@media (min-width:1100px){
  .rn-pie__cuerpo{grid-template-columns:1.6fr repeat(4,1fr);gap:var(--rn-e-8)}
}
.rn-pie__marca .rn-logo{height:42px;width:auto}
.rn-pie__eslogan{font-family:var(--rn-serif);font-style:italic;font-size:1.3125rem;
  color:var(--rn-sol);margin:var(--rn-e-4) 0 var(--rn-e-3);max-width:none}
.rn-pie__que{font-size:.9375rem;color:var(--rn-arena);max-width:40ch;line-height:1.6}
.rn-pie__redes-t{margin:var(--rn-e-5) 0 var(--rn-e-2);font-size:.8125rem;
  color:var(--rn-bruma);max-width:none}
.rn-pie__redes{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--rn-e-3)}
.rn-pie__redes a{color:var(--rn-arena);text-decoration:none;font-size:.875rem;
  border-bottom:1px solid rgba(242,241,236,.25);padding-bottom:2px}
.rn-pie__redes a:hover{color:var(--rn-sol);border-bottom-color:var(--rn-sol)}
.rn-pie__col h3{margin:0 0 var(--rn-e-3);font-size:.875rem;color:var(--rn-espuma);
  font-variation-settings:'wdth' 112,'wght' 600}
.rn-pie__col ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.rn-pie__col a{color:var(--rn-arena);text-decoration:none;font-size:.875rem;line-height:1.4}
.rn-pie__col a:hover{color:var(--rn-sol)}
.rn-pie__contacto{margin-top:var(--rn-e-5) !important;padding-top:var(--rn-e-4);
  border-top:1px solid rgba(242,241,236,.16);color:var(--rn-bruma);font-size:.875rem}
.rn-pie__legal{display:flex;flex-wrap:wrap;align-items:center;gap:var(--rn-e-2) var(--rn-e-6);
  justify-content:space-between;
  border-top:1px solid rgba(242,241,236,.16);padding-block:var(--rn-e-4);
  font-size:.75rem;color:var(--rn-bruma);line-height:1.5}
.rn-pie__legal p{max-width:none;margin:0}

/* ---------- PREGUNTAS, AGRUPADAS POR PÚBLICO ---------- */
.rn-faq__grupo{margin:var(--rn-e-7) 0 var(--rn-e-2);font-size:1.0625rem;
  color:var(--rn-ocre-honda);font-variation-settings:'wdth' 112,'wght' 600}
.rn-faq__grupo:first-of-type{margin-top:0}

/* ---------- AJUSTES DE RITMO Y RESTOS ---------- */
.rn-seccion--corta{padding-block:var(--rn-e-8)}
.rn-seccion--recientes{padding-top:var(--rn-e-9)}
.rn-propietario__texto{min-width:0}
.rn-buscador__ir-txt{white-space:nowrap}
.rn-grupo-zona{margin:var(--rn-e-6) 0 var(--rn-e-3);font-size:.9375rem;
  font-variation-settings:'wdth' 112,'wght' 600}
.rn-grupo-zona a{color:var(--rn-ocre-honda);text-decoration:none}
.rn-grupo-zona a:hover{text-decoration:underline}

/* ---------- IMPRESIÓN ---------- */
@media print{
  .rn-cabecera,.rn-flotante,.rn-avisos,.rn-saltar{display:none}
  .rn-inm{break-inside:avoid}
}

/* ---------- DEMOSTRACIÓN ----------
   Ficha creada para revisar el diseño. Se ve siempre, no se indexa
   y no entra al sitemap. Imposible confundirla con inventario real. */
.rn-demo{position:absolute;top:var(--rn-e-3);right:var(--rn-e-3);z-index:2;
  background:var(--rn-tinta);color:var(--rn-sol);border-radius:var(--rn-r-etiqueta);
  padding:5px 12px;font-size:var(--rn-t-micro);letter-spacing:.08em;
  text-transform:uppercase;font-variation-settings:'wdth' 112,'wght' 600}
.rn-demo--aviso{position:static;display:block;max-width:none;text-transform:none;
  letter-spacing:0;font-size:.875rem;line-height:1.5;padding:12px 18px;
  margin-bottom:var(--rn-e-5);font-variation-settings:'wdth' 100,'wght' 500}

/* ============================================================
   EL ÍNDICE Y LA FICHA · v2
   9 de octubre de 2026
   ------------------------------------------------------------
   Todo lo que sigue es del rediseño de /apartamentos/ y de la
   página de cada inmueble. Nada aquí depende de JavaScript.
   ============================================================ */

/* ------------------------------------------------------------
   1 · EL BOTÓN FLOTANTE NO SE MONTA SOBRE EL HÉROE
   ------------------------------------------------------------
   Tapaba la barra de búsqueda, que es justo lo primero que hay
   que poder tocar. No se arregla con JavaScript ni con una
   animación de scroll —que la mitad de los navegadores todavía
   no entiende—: se arregla con el orden de pintado.

   El héroe queda por encima del botón y por debajo de la
   cabecera. Mientras la portada llena la pantalla, el botón
   está detrás y no se ve ni se puede tocar; en cuanto el
   visitante baja, el héroe sale de la pantalla y el botón
   aparece sobre el contenido normal. Funciona en todos los
   navegadores desde hace veinte años.
   ------------------------------------------------------------ */
.rn-flotante{z-index:20}
.rn-heroe,
.rn-i-heroe{position:relative;z-index:25}

/* ------------------------------------------------------------
   2 · LA TARJETA DE INMUEBLE
   ------------------------------------------------------------ */

/* La placa del inmueble sin fotografía. Hoy cinco de los
   dieciocho no tienen ninguna; un recuadro gris repetido en una
   rejilla se lee como un error del sitio. La placa dice el
   barrio y la tipología: informa, no promete y no es un render.
   El tono sale del propio código, así que el mismo inmueble
   tiene siempre la misma placa. */
.rn-inm__placa{position:absolute;inset:0;display:flex;flex-direction:column;
  justify-content:flex-end;gap:2px;padding:var(--rn-e-5);overflow:hidden;
  background:var(--rn-ocre);color:var(--rn-espuma)}
.rn-inm__placa--b{background:var(--rn-ocre-honda)}
.rn-inm__placa--c{background:var(--rn-bruma)}
.rn-inm__placa--d{background:var(--rn-tinta)}
.rn-inm__placa-arcos{position:absolute;left:0;right:0;bottom:0;top:18%;
  display:flex;align-items:flex-end;gap:7%;padding-inline:9%;opacity:.26}
.rn-inm__placa-arcos i{flex:1;display:block;height:100%;
  background:var(--rn-espuma);border-radius:999px 999px 0 0}
.rn-inm__placa-arcos i:nth-child(2){height:84%}
.rn-inm__placa-arcos i:nth-child(3){height:70%;background:var(--rn-sol);opacity:.9}
.rn-inm__placa-txt{position:relative;display:flex;flex-direction:column;gap:1px}
.rn-inm__placa-txt b{font-size:1.0625rem;line-height:1.15;
  font-variation-settings:'wdth' 118,'wght' 600}
.rn-inm__placa-txt small{font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;
  opacity:.82;font-variation-settings:'wdth' 112,'wght' 500}

/* Cuántas fotos hay. Es un dato de confianza: cuanto más se
   enseña, menos hay que preguntar. */
.rn-inm__nfotos{position:absolute;right:var(--rn-e-3);bottom:var(--rn-e-3);z-index:2;
  padding:3px 9px;border-radius:var(--rn-r-pastilla);
  background:rgba(28,24,20,.72);color:var(--rn-espuma);
  font-size:.6875rem;letter-spacing:.04em;
  font-variation-settings:'wdth' 112,'wght' 500;font-variant-numeric:tabular-nums}

/* Las otras maneras de tomar el mismo inmueble. Un apartamento
   que se arrienda y además se vende es un dato que decide. */
.rn-inm__otras{margin:var(--rn-e-2) 0 0;font-size:.75rem;color:var(--rn-texto-3);
  font-variation-settings:'wdth' 100,'wght' 500}

/* Destacado: lo que la empresa decide poner delante. No lleva
   sello ni etiqueta —el único sello de esta marca es el de
   verificación—: se nota en que sale primero. */
.rn-inm--destacado{border-color:var(--rn-arena)}
.rn-inm--destacado:hover{border-color:var(--rn-ocre)}

/* ------------------------------------------------------------
   3 · LA CABECERA DEL ÍNDICE
   ------------------------------------------------------------
   Sin héroe y sin fotografía de fondo: el que llega aquí ya
   decidió que quiere ver inventario. El buscador va primero.
   ------------------------------------------------------------ */
.rn-idx-cab{padding-block:clamp(28px,4vw,52px) clamp(20px,2.6vw,32px);
  border-bottom:1px solid var(--rn-borde)}
.rn-idx-cab h1{margin-bottom:var(--rn-e-3);max-width:24ch}
.rn-idx-cab .rn-entrada{margin-bottom:var(--rn-e-6)}
.rn-idx-cab .rn-titular__ojo{margin-bottom:var(--rn-e-3)}

/* El buscador, aquí, va sobre papel claro: la sombra profunda
   de la portada existe para despegarlo de una fotografía, y sin
   fotografía debajo se convierte en una mancha. */
.rn-buscador--indice{max-width:none;box-shadow:none;
  border:1px solid var(--rn-borde);border-radius:24px;
  background:var(--rn-fondo)}
.rn-buscador--indice .rn-campo{background:var(--rn-espuma)}
.rn-buscador--indice .rn-campo:hover,
.rn-buscador--indice .rn-campo:focus-within{background:var(--rn-fondo)}

/* La pestaña «Todas» del Índice. El resto de las reglas de
   selección viven arriba, con las otras cinco. */
#rn-m-todas:checked ~ .rn-buscador__caja .rn-tramo--personas,
#rn-m-todas:checked ~ .rn-buscador__caja .rn-tramo--alcobas{display:flex}
#rn-m-todas:checked ~ .rn-buscador__alto [for="rn-m-todas"]{
  background:var(--rn-tinta);border-color:var(--rn-tinta);color:var(--rn-espuma);
  transform:none;box-shadow:0 6px 18px rgba(28,24,20,.20)}
#rn-m-todas:checked ~ .rn-buscador__alto [for="rn-m-todas"] .rn-pestana__punto{
  border-color:var(--rn-sol)}
#rn-m-todas:checked ~ .rn-buscador__alto [for="rn-m-todas"] .rn-pestana__punto::after{
  transform:scale(1)}
#rn-m-todas:checked ~ .rn-buscador__alto [for="rn-m-todas"] small{color:var(--rn-sol)}
#rn-m-todas:focus-visible ~ .rn-buscador__alto [for="rn-m-todas"]{
  outline:2px solid var(--rn-foco);outline-offset:2px}

/* Los accesos por intención. Enlaces reales con su cuenta, en
   una sola fila. No es un menú: es el atajo del que ya sabe a
   qué viene. */
.rn-idx-cuentas{display:flex;flex-wrap:wrap;gap:var(--rn-e-2);
  list-style:none;margin:var(--rn-e-5) 0 0;padding:0}
.rn-idx-cuentas a{display:inline-flex;align-items:center;gap:8px;
  padding:9px 16px;border-radius:var(--rn-r-pastilla);
  border:1px solid var(--rn-borde);background:var(--rn-fondo);
  color:var(--rn-texto-2);text-decoration:none;font-size:.9375rem;
  font-variation-settings:'wdth' 112,'wght' 600}
.rn-idx-cuentas a:hover{border-color:var(--rn-ocre);color:var(--rn-ocre-honda)}
.rn-idx-cuentas [aria-current="page"]{background:var(--rn-tinta);
  border-color:var(--rn-tinta);color:var(--rn-espuma)}
.rn-idx-cuentas [aria-current="page"] .rn-cifra{background:rgba(242,241,236,.18);
  color:var(--rn-espuma)}

.rn-idx-cuerpo{padding-block:clamp(28px,4vw,56px)}

/* ------------------------------------------------------------
   4 · LOS GRUPOS DEL ÍNDICE
   ------------------------------------------------------------
   Agrupado por modalidad y no en una rejilla única. Una lista
   que pone COP 620.000 la noche al lado de COP 1.400 millones
   de venta no se puede leer: son dos decisiones distintas y dos
   cifras que no se comparan entre sí.
   ------------------------------------------------------------ */
.rn-idx-grupo{margin-bottom:clamp(40px,5vw,72px);scroll-margin-top:110px}
.rn-idx-grupo:last-child{margin-bottom:0}
.rn-idx-grupo__cab{display:flex;flex-wrap:wrap;align-items:baseline;
  justify-content:space-between;gap:var(--rn-e-4);margin-bottom:var(--rn-e-5);
  padding-bottom:var(--rn-e-3);border-bottom:1px solid var(--rn-borde)}
.rn-idx-grupo__cab h2{margin:0;font-size:clamp(1.25rem,1.05rem + .7vw,1.6rem);
  display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--rn-e-3);max-width:none}
.rn-idx-grupo__n{font-size:.875rem;color:var(--rn-texto-3);
  font-variation-settings:'wdth' 112,'wght' 500;font-variant-numeric:tabular-nums}
.rn-idx-grupo .rn-boton-seccion{padding:8px 18px;font-size:.875rem}

/* En el teléfono cada grupo es un riel que se pasa con el dedo.
   Una columna de tarjetas grandes obliga a treinta
   deslizamientos para ver ocho inmuebles. */
@media (max-width:760px){
  .rn-idx-riel{display:flex;gap:var(--rn-e-3);overflow-x:auto;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    margin-inline:calc(-1 * var(--rn-margen));
    padding-inline:var(--rn-margen);padding-bottom:var(--rn-e-3);
    scrollbar-width:none}
  .rn-idx-riel::-webkit-scrollbar{display:none}
  .rn-idx-riel > .rn-inm{flex:0 0 78%;scroll-snap-align:start}
  .rn-idx-riel > .rn-inm .rn-inm__cuerpo{padding:var(--rn-e-4)}
  .rn-idx-riel > .rn-inm .rn-inm__titulo{font-size:1rem}
}

/* Los barrios, al cierre. Antes había sesenta pastillas entre
   el titular y el primer apartamento. */
.rn-micro{font-size:var(--rn-t-micro);letter-spacing:.08em;text-transform:uppercase;
  font-variation-settings:'wdth' 112,'wght' 600;color:var(--rn-ocre-honda)}
.rn-grupo-zona{margin:var(--rn-e-5) 0 var(--rn-e-3)}
.rn-grupo-zona:first-of-type{margin-top:0}
.rn-grupo-zona a{color:inherit;text-decoration:none}
.rn-grupo-zona a:hover{text-decoration:underline}

/* ============================================================
   5 · LA FICHA DE INMUEBLE
   ============================================================ */
.rn-fi{padding-block:clamp(24px,3.2vw,44px) 0}
.rn-fi-cab{margin-bottom:var(--rn-e-6)}
.rn-fi-cab__donde{margin:0 0 var(--rn-e-2);max-width:none;
  font-size:var(--rn-t-micro);letter-spacing:.08em;text-transform:uppercase;
  font-variation-settings:'wdth' 112,'wght' 600;color:var(--rn-ocre-honda)}
.rn-fi-cab__donde a{color:inherit;text-decoration:none}
.rn-fi-cab__donde a:hover{text-decoration:underline}
.rn-fi-cab h1{max-width:20ch;margin-bottom:var(--rn-e-3)}
.rn-fi-cab .rn-entrada{margin-bottom:var(--rn-e-4)}
.rn-fi-cab__sellos{display:flex;flex-wrap:wrap;align-items:center;gap:var(--rn-e-2);
  margin:0;max-width:none}
.rn-fi-cab__mod{display:inline-flex;align-items:center;padding:5px 12px;
  border-radius:var(--rn-r-pastilla);border:1px solid var(--rn-borde);
  font-size:.8125rem;color:var(--rn-texto-2);
  font-variation-settings:'wdth' 112,'wght' 500}
.rn-fi-cab__codigo{margin-left:auto;font-size:.75rem;color:var(--rn-texto-3);
  font-variant-numeric:tabular-nums}

/* ---------- La galería ----------
   Se arma con lo que hay. Hoy cinco inmuebles no tienen ninguna
   fotografía y ocho tienen una sola: un mosaico de cinco huecos
   sería un mosaico vacío. */
.rn-fi-galeria{display:grid;gap:var(--rn-e-2);border-radius:var(--rn-r-tarjeta);
  overflow:hidden}
.rn-fi-galeria__pieza{margin:0;background:var(--rn-arena);overflow:hidden}
.rn-fi-galeria__pieza img{display:block;width:100%;height:100%;object-fit:cover}
.rn-fi-galeria--una .rn-fi-galeria__pieza{aspect-ratio:3/2}
.rn-fi-galeria--dos{grid-template-columns:2fr 1fr}
.rn-fi-galeria--dos .rn-fi-galeria__pieza{aspect-ratio:auto;height:clamp(240px,34vw,460px)}
.rn-fi-galeria--mosaico{grid-template-columns:2fr 1fr 1fr;
  grid-template-rows:repeat(2,clamp(120px,17vw,228px))}
.rn-fi-galeria--mosaico .rn-fi-galeria__pieza:first-child{grid-row:span 2}
.rn-fi-galeria__nota{margin:var(--rn-e-3) 0 0;font-size:.75rem;color:var(--rn-texto-3)}

.rn-fi-sinfoto{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:var(--rn-e-5);align-items:center;background:var(--rn-arena);
  border-radius:var(--rn-r-tarjeta);overflow:hidden}
.rn-fi-sinfoto .rn-inm__placa{position:relative;inset:auto;aspect-ratio:3/2}
.rn-fi-sinfoto__txt{padding:var(--rn-e-5) var(--rn-e-6) var(--rn-e-5) 0}
.rn-fi-sinfoto__txt p{margin:0 0 var(--rn-e-2);color:var(--rn-tinta-media)}
.rn-fi-sinfoto__txt p:last-child{margin:0}
@media (max-width:700px){
  .rn-fi-sinfoto{grid-template-columns:minmax(0,1fr)}
  .rn-fi-sinfoto__txt{padding:0 var(--rn-e-5) var(--rn-e-5)}
}

/* ---------- El cuerpo: texto y decisión ---------- */
.rn-fi-cuerpo{display:grid;grid-template-columns:minmax(0,1fr) 368px;
  gap:clamp(32px,4vw,64px);align-items:start;
  margin-top:clamp(28px,3.4vw,48px);padding-bottom:clamp(40px,5vw,72px)}
@media (max-width:1080px){
  .rn-fi-cuerpo{grid-template-columns:minmax(0,1fr);gap:var(--rn-e-7)}
  /* En pantalla estrecha el precio no se va al final: sube justo
     debajo de la galería, que es donde se decide. */
  .rn-fi-texto{order:2}
  .rn-fi-decide{order:1;position:static}
}

.rn-fi-sec{margin-bottom:clamp(28px,3.4vw,48px)}
.rn-fi-sec:last-child{margin-bottom:0}
.rn-fi-sec h2{font-size:clamp(1.2rem,1.05rem + .6vw,1.5rem);margin-bottom:var(--rn-e-4)}

/* Los datos que deciden, en cifras grandes y tabulares. Cambian
   con la intención: al que viene cuatro noches le importa
   cuántos caben; al que compra, cuántos metros son. */
.rn-fi-claves{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--rn-e-3);list-style:none;margin:0 0 clamp(28px,3.4vw,44px);padding:0}
.rn-fi-claves li{display:flex;flex-direction:column;gap:2px;
  padding:var(--rn-e-4);border:1px solid var(--rn-borde);
  border-radius:var(--rn-r-bloque);background:var(--rn-fondo)}
.rn-fi-claves b{font-size:clamp(1.5rem,1.2rem + 1vw,2rem);line-height:1;
  font-variation-settings:'wdth' 112,'wght' 500;font-variant-numeric:tabular-nums;
  letter-spacing:-.01em}
.rn-fi-claves span{font-size:.8125rem;color:var(--rn-texto-3);
  font-variation-settings:'wdth' 100,'wght' 500}
@media (max-width:620px){.rn-fi-claves{grid-template-columns:repeat(2,minmax(0,1fr))}}

.rn-datos--comp{margin-top:var(--rn-e-4)}
.rn-fi-minutos{display:flex;flex-wrap:wrap;gap:var(--rn-e-5);list-style:none;
  margin:0 0 var(--rn-e-3);padding:0}
.rn-fi-minutos li{display:flex;align-items:baseline;gap:8px}
.rn-fi-minutos b{font-size:1.75rem;line-height:1;
  font-variation-settings:'wdth' 112,'wght' 500;font-variant-numeric:tabular-nums}
.rn-fi-minutos span{font-size:.875rem;color:var(--rn-texto-2);max-width:14ch}

/* ---------- La tarjeta de decisión ----------
   Es el único sitio de la ficha donde cambia de verdad el
   oficio. Acompaña al que lee: se queda pegada bajo la cabecera
   mientras baja por la página. */
.rn-fi-decide{position:sticky;top:calc(var(--cab-alto,80px) + var(--rn-e-4));
  background:var(--rn-fondo);border:1px solid var(--rn-borde);
  border-radius:var(--rn-r-tarjeta);padding:var(--rn-e-5);
  box-shadow:0 18px 44px rgba(28,24,20,.09)}
.rn-fi-decide__pestanas{display:flex;gap:4px;margin-bottom:var(--rn-e-5);
  padding:4px;background:var(--rn-arena);border-radius:var(--rn-r-pastilla)}
.rn-fi-decide__pestanas label{flex:1;text-align:center;cursor:pointer;
  padding:8px 10px;border-radius:var(--rn-r-pastilla);font-size:.875rem;
  color:var(--rn-tinta-media);
  font-variation-settings:'wdth' 112,'wght' 600;
  transition:background var(--rn-transicion),color var(--rn-transicion)}
.rn-fi-decide__pestanas label:hover{color:var(--rn-ocre-honda)}
.rn-fi-decide--multi .rn-fi-panel{display:none}
#rn-fi-por-dias:checked  ~ .rn-fi-panel--por-dias,
#rn-fi-por-meses:checked ~ .rn-fi-panel--por-meses,
#rn-fi-arriendo:checked  ~ .rn-fi-panel--arriendo,
#rn-fi-venta:checked     ~ .rn-fi-panel--venta{display:block}
#rn-fi-por-dias:checked  ~ .rn-fi-decide__pestanas [for="rn-fi-por-dias"],
#rn-fi-por-meses:checked ~ .rn-fi-decide__pestanas [for="rn-fi-por-meses"],
#rn-fi-arriendo:checked  ~ .rn-fi-decide__pestanas [for="rn-fi-arriendo"],
#rn-fi-venta:checked     ~ .rn-fi-decide__pestanas [for="rn-fi-venta"]{
  background:var(--rn-fondo);color:var(--rn-texto);
  box-shadow:0 2px 8px rgba(28,24,20,.12)}
#rn-fi-por-dias:focus-visible  ~ .rn-fi-decide__pestanas [for="rn-fi-por-dias"],
#rn-fi-por-meses:focus-visible ~ .rn-fi-decide__pestanas [for="rn-fi-por-meses"],
#rn-fi-arriendo:focus-visible  ~ .rn-fi-decide__pestanas [for="rn-fi-arriendo"],
#rn-fi-venta:focus-visible     ~ .rn-fi-decide__pestanas [for="rn-fi-venta"]{
  outline:2px solid var(--rn-foco);outline-offset:2px}

.rn-fi-panel__et{margin:0;max-width:none;font-size:var(--rn-t-micro);
  letter-spacing:.06em;text-transform:uppercase;color:var(--rn-texto-3);
  font-variation-settings:'wdth' 112,'wght' 500}
.rn-fi-panel__cifra{margin:2px 0 0;max-width:none;
  font-size:clamp(1.6rem,1.3rem + 1vw,2.125rem);line-height:1.1;letter-spacing:-.015em;
  font-variation-settings:'wdth' 112,'wght' 600;font-variant-numeric:tabular-nums}
.rn-fi-panel__cifra small{font-size:.5em;font-weight:400;color:var(--rn-texto-2)}
.rn-fi-panel__sub{margin:var(--rn-e-2) 0 0;max-width:none;font-size:.875rem;
  color:var(--rn-texto-2)}

/* El desglose, una línea por concepto. Es la regla del total:
   nunca se publica la cifra de entrada sola. */
.rn-fi-lineas{list-style:none;margin:var(--rn-e-5) 0;padding:0;
  font-variant-numeric:tabular-nums}
.rn-fi-lineas li{display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--rn-e-3);padding:9px 0;border-bottom:1px solid var(--rn-borde);
  font-size:.9375rem;color:var(--rn-texto-2)}
.rn-fi-lineas li b{font-variation-settings:'wdth' 112,'wght' 600;color:var(--rn-texto)}
.rn-fi-lineas__total{border-bottom:0;border-top:1px solid var(--rn-tinta);
  margin-top:4px;padding-top:12px;font-size:1.0625rem;color:var(--rn-texto)}
.rn-fi-lineas__total b{font-size:1.125rem}
.rn-fi-lineas__nota{border-bottom:0;font-size:.8125rem;color:var(--rn-texto-3)}
.rn-fi-panel__cta{width:100%;justify-content:center}
.rn-fi-panel__pie{margin:var(--rn-e-3) 0 0;max-width:none;text-align:center;
  font-size:.75rem;color:var(--rn-texto-3)}

/* ---------- La barra fija del teléfono ----------
   En la ficha sustituye al botón flotante general: dos botones
   de WhatsApp en la misma pantalla se estorban. */
.rn-fi-barra{display:none}
@media (max-width:760px){
  .rn-fi-barra{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;
    align-items:center;justify-content:space-between;gap:var(--rn-e-4);
    padding:12px var(--rn-margen) calc(12px + env(safe-area-inset-bottom,0px));
    background:var(--rn-fondo);border-top:1px solid var(--rn-borde);
    box-shadow:0 -10px 30px rgba(28,24,20,.12)}
  .rn-fi-barra__dato{display:flex;flex-direction:column;gap:1px;min-width:0}
  .rn-fi-barra__et{font-size:.6875rem;letter-spacing:.05em;text-transform:uppercase;
    color:var(--rn-texto-3);font-variation-settings:'wdth' 112,'wght' 500}
  .rn-fi-barra__cifra{font-size:1.0625rem;line-height:1.1;
    font-variation-settings:'wdth' 112,'wght' 600;font-variant-numeric:tabular-nums;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .rn-fi-barra__cifra small{font-size:.7em;font-weight:400;color:var(--rn-texto-2)}
  .rn-fi-barra .rn-boton{flex:none;padding:12px 18px;font-size:.9375rem}
  /* El pie ya reserva sitio para el flotante; con la barra hace
     falta un poco más para que no tape el aviso legal. */
  .rn-pie{padding-bottom:calc(var(--rn-e-5) + 96px)}
}

@media print{
  .rn-fi-barra,.rn-fi-decide{display:none}
}

/* ---------- Afinados de la v2 · 9 de octubre de 2026 ---------- */

/* La cifra de una línea de desglose no se parte nunca: «COP
   2.040.000» cortado en dos renglones deja de ser una cifra. */
.rn-fi-lineas li b{white-space:nowrap}
.rn-fi-lineas li > span{min-width:0}

/* En la ficha, la tabla de datos usa el ancho de su columna: es una
   tabla de dos lados, no un párrafo, y la regla de los 75 caracteres
   no aplica. */
.rn-fi-sec .rn-datos--llano{max-width:none}
.rn-fi-minutos span{max-width:18ch}

/* La placa del inmueble sin foto: un velo bajo el texto para que el
   barrio se lea por encima de las bóvedas. */
.rn-inm__placa::after{content:"";position:absolute;left:0;right:0;bottom:0;height:62%;
  background:linear-gradient(to top,rgba(28,24,20,.55),transparent)}
.rn-inm__placa-txt{z-index:1}

/* La cabecera del Índice también tapa al botón flotante mientras está
   en pantalla: en esta página no hay héroe, y sin esto el botón se monta
   sobre el campo «Alcobas» de la barra en el teléfono. Mismo mecanismo,
   misma razón. */
.rn-idx-cab{position:relative;z-index:25;background:var(--rn-fondo)}

/* La barra fija de la ficha, en teléfono: la cifra manda y no se
   recorta. El botón lleva el texto corto. */
@media (max-width:760px){
  .rn-fi-barra__dato{flex:1 1 auto}
  .rn-fi-barra__et{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .rn-fi-barra__cifra{font-size:1rem}
}

/* La galería en el teléfono: la primera a todo el ancho y las demás en
   una tira de dos. A 390 px, dos tercios y un tercio deja la segunda
   foto en una rendija. */
@media (max-width:620px){
  .rn-fi-galeria--dos,
  .rn-fi-galeria--mosaico{grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-rows:auto}
  .rn-fi-galeria--dos .rn-fi-galeria__pieza:first-child,
  .rn-fi-galeria--mosaico .rn-fi-galeria__pieza:first-child{
    grid-column:1 / -1;grid-row:auto;aspect-ratio:3/2;height:auto}
  .rn-fi-galeria--dos .rn-fi-galeria__pieza,
  .rn-fi-galeria--mosaico .rn-fi-galeria__pieza{aspect-ratio:3/2;height:auto}
}

/* ------------------------------------------------------------
   LA CABECERA ENTRE 901 Y 1380 px
   ------------------------------------------------------------
   Venía partiéndose en dos renglones: el menú, ES|EN, «Publicar mi
   inmueble» y WhatsApp no caben en uno solo con los respiros del
   escritorio ancho. Era el punto 3 de los pendientes del documento de
   estado. Se resuelve apretando los respiros y quitando el subtítulo
   del botón de publicar, que es el elemento más ancho y el único
   prescindible: el texto «Gratis · lo hacemos nosotros» vuelve a
   aparecer en cuanto hay sitio.
   ------------------------------------------------------------ */
@media (min-width:901px) and (max-width:1380px){
  .rn-cabecera__fila{gap:var(--rn-e-3);flex-wrap:nowrap}
  .rn-menu{margin-left:var(--rn-e-2);min-width:0}
  .rn-menu > ul{gap:var(--rn-e-4);flex-wrap:nowrap}
  .rn-menu a{font-size:.875rem}
  .rn-cabecera__acciones{flex:none;gap:var(--rn-e-2)}
  .rn-cabecera__publicar{padding:8px 15px}
  .rn-cabecera__publicar-s{display:none}
  .rn-cabecera__cta{padding-inline:16px}
}
@media (min-width:901px) and (max-width:1060px){
  .rn-menu > ul{gap:var(--rn-e-3)}
  .rn-menu a{font-size:.8125rem}
}

/* ============================================================
   EL CATÁLOGO Y LA GALERÍA · v3
   9 de octubre de 2026
   ------------------------------------------------------------
   Dos cambios de fondo:

   1 · En /apartamentos/ la barra va primero y pegada a la
       cabecera. No hay titular de pantalla completa ni párrafo
       de presentación antes de ver inventario. El `<h1>` sigue
       existiendo —la página lo necesita— pero baja a rótulo de
       resultados, que es donde vive en cualquier buscador de
       este oficio.

   2 · La ficha tiene galería de verdad: mosaico de una grande
       y cuatro pequeñas, con visor a pantalla completa y sin
       una línea de JavaScript.
   ============================================================ */

/* ---------- 1 · La barra, lo primero ---------- */
.rn-cat-barra{position:relative;z-index:25;background:var(--rn-fondo);
  padding-block:var(--rn-e-5) var(--rn-e-4);
  border-bottom:1px solid var(--rn-borde)}
.rn-cat-barra .rn-buscador{margin:0}

/* Los atajos por intención. En el teléfono se pasan con el dedo, como
   la fila de categorías de cualquier buscador de alojamiento. */
.rn-cat-barra .rn-idx-cuentas{margin-top:var(--rn-e-4)}
@media (max-width:760px){
  .rn-idx-cuentas{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    margin-inline:calc(-1 * var(--rn-margen));
    padding-inline:var(--rn-margen);padding-bottom:4px}
  .rn-idx-cuentas::-webkit-scrollbar{display:none}
  .rn-idx-cuentas li{flex:none}
}

.rn-cat-cuerpo{padding-block:var(--rn-e-6) clamp(32px,4vw,64px)}

/* El rótulo de resultados. Es el h1 de la página, en cuerpo pequeño:
   dice lo que hay que decir sin cobrarle media pantalla al visitante. */
.rn-cat-rotulo{display:flex;flex-wrap:wrap;align-items:baseline;
  gap:var(--rn-e-2) var(--rn-e-4);margin-bottom:var(--rn-e-6)}
.rn-cat-rotulo h1{margin:0;font-size:1.25rem;line-height:1.25;max-width:none;
  font-variation-settings:'wdth' 118,'wght' 600;letter-spacing:-.005em}
.rn-cat-rotulo p{margin:0;max-width:62ch;font-size:.9375rem;color:var(--rn-texto-2)}
@media (max-width:760px){
  .rn-cat-rotulo{gap:4px}
  .rn-cat-rotulo h1{font-size:1.125rem}
  .rn-cat-rotulo p{font-size:.875rem}
}

/* ---------- 2 · El riel de dos filas ----------
   A partir de cinco inmuebles el grupo va en dos filas: con una sola,
   ver doce obliga a doce deslizamientos. Es rejilla con flujo por
   columnas, así que el orden del código sigue siendo el de lectura y
   los rastreadores lo ven entero. */
@media (max-width:760px){
  .rn-idx-riel{display:grid;grid-auto-flow:column;grid-auto-columns:76%;
    grid-template-columns:none;grid-template-rows:auto;
    gap:var(--rn-e-3);overflow-x:auto;scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
    margin-inline:calc(-1 * var(--rn-margen));
    padding-inline:var(--rn-margen);padding-bottom:var(--rn-e-3);
    scrollbar-width:none}
  .rn-idx-riel::-webkit-scrollbar{display:none}
  .rn-idx-riel--doble{grid-template-rows:auto auto;grid-auto-columns:66%}
  .rn-idx-riel > .rn-inm{flex:none;scroll-snap-align:start}
  .rn-idx-riel > .rn-inm .rn-inm__cuerpo{padding:var(--rn-e-4);gap:var(--rn-e-2)}
  .rn-idx-riel > .rn-inm .rn-inm__titulo{font-size:1rem}
  .rn-idx-riel--doble > .rn-inm .rn-inm__titulo{font-size:.9375rem}
  .rn-idx-riel--doble > .rn-inm .rn-precio__cifra{font-size:1.125rem}
}

/* ============================================================
   3 · LA GALERÍA DE LA FICHA
   ============================================================ */
.rn-gal{display:grid;gap:8px;position:relative;
  border-radius:var(--rn-r-tarjeta);overflow:hidden;scroll-margin-top:110px}
.rn-gal__p{display:block;margin:0;overflow:hidden;background:var(--rn-arena);
  position:relative;line-height:0}
.rn-gal__p img{width:100%;height:100%;object-fit:cover;
  transition:transform 420ms ease-out}
.rn-gal__p:hover img{transform:scale(1.03)}
.rn-gal__p::after{content:"";position:absolute;inset:0;
  background:rgba(28,24,20,0);transition:background var(--rn-transicion)}
.rn-gal__p:hover::after{background:rgba(28,24,20,.08)}

.rn-gal--una{grid-template-columns:1fr}
.rn-gal--una .rn-gal__p{aspect-ratio:3/2}
.rn-gal--dos{grid-template-columns:1fr 1fr;height:clamp(240px,30vw,420px)}
.rn-gal--dos .rn-gal__p{height:100%}
.rn-gal--tres{grid-template-columns:2fr 1fr;grid-auto-rows:1fr;
  height:clamp(260px,34vw,452px)}
.rn-gal--tres .rn-gal__p:first-child{grid-row:1 / -1}
.rn-gal--mosaico{grid-template-columns:2fr 1fr 1fr;
  grid-template-rows:repeat(2,clamp(128px,16.6vw,222px))}
.rn-gal--mosaico .rn-gal__p:first-child{grid-row:span 2}

/* «Ver las N fotos», abajo a la derecha, sobre la foto. El mismo
   recurso de siempre en este oficio porque funciona: dice cuántas hay
   y se toca con el pulgar. */
.rn-gal__todas{position:absolute;right:var(--rn-e-4);bottom:var(--rn-e-4);
  display:inline-flex;align-items:center;gap:9px;padding:9px 16px;
  border-radius:var(--rn-r-pastilla);background:var(--rn-fondo);
  border:1px solid var(--rn-tinta);color:var(--rn-texto);text-decoration:none;
  font-size:.875rem;font-variation-settings:'wdth' 112,'wght' 600;
  box-shadow:0 6px 18px rgba(28,24,20,.18);
  transition:transform var(--rn-transicion),background var(--rn-transicion)}
.rn-gal__todas:hover{background:var(--rn-arena);color:var(--rn-texto);transform:translateY(-1px)}
.rn-gal__rejilla{display:grid;grid-template-columns:1fr 1fr;gap:2px;flex:none}
.rn-gal__rejilla i{display:block;width:6px;height:6px;background:currentColor;border-radius:1px}
.rn-gal__nota{margin:var(--rn-e-3) 0 0;font-size:.75rem;color:var(--rn-texto-3)}

@media (max-width:620px){
  .rn-gal{gap:4px}
  .rn-gal--dos,.rn-gal--tres,.rn-gal--mosaico{
    grid-template-columns:1fr 1fr;grid-template-rows:auto;height:auto}
  .rn-gal--tres .rn-gal__p:first-child,
  .rn-gal--mosaico .rn-gal__p:first-child{grid-column:1 / -1;grid-row:auto}
  .rn-gal__p{aspect-ratio:3/2}
  .rn-gal__todas{right:var(--rn-e-3);bottom:var(--rn-e-3);padding:8px 13px;font-size:.8125rem}
}

/* ---------- El visor a pantalla completa ----------
   Sin JavaScript: cada foto es un destino y las flechas son enlaces a
   la anterior y a la siguiente, en círculo. Cerrar vuelve a la galería.
   Se puede enlazar una foto concreta y el teclado funciona solo. */
.rn-visor{display:none}
.rn-visor:target{display:grid;position:fixed;inset:0;z-index:120;
  grid-template-columns:1fr;place-items:center;
  background:rgba(20,17,14,.96);padding:clamp(16px,4vw,48px)}
.rn-visor__fondo{position:absolute;inset:0;display:block}
.rn-visor__marco{position:relative;margin:0;max-width:min(1200px,100%);
  max-height:84vh;display:flex}
.rn-visor__marco img{max-width:100%;max-height:84vh;width:auto;height:auto;
  object-fit:contain;border-radius:var(--rn-r-bloque)}
.rn-visor__cerrar{position:absolute;top:clamp(12px,2vw,24px);right:clamp(12px,2vw,24px);
  width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:50%;background:rgba(242,241,236,.12);color:var(--rn-espuma);
  text-decoration:none;font-size:1.5rem;line-height:1}
.rn-visor__cerrar:hover{background:rgba(242,241,236,.22);color:var(--rn-espuma)}
.rn-visor__ir{position:absolute;top:50%;transform:translateY(-50%);
  width:48px;height:48px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:50%;background:rgba(242,241,236,.12);text-decoration:none}
.rn-visor__ir:hover{background:rgba(242,241,236,.22)}
.rn-visor__ir--ant{left:clamp(8px,2vw,28px)}
.rn-visor__ir--sig{right:clamp(8px,2vw,28px)}
.rn-visor__ir span{width:11px;height:11px;border-top:2px solid var(--rn-espuma);
  border-right:2px solid var(--rn-espuma);display:block}
.rn-visor__ir--ant span{transform:rotate(-135deg) translate(-2px,-2px)}
.rn-visor__ir--sig span{transform:rotate(45deg) translate(-2px,-2px)}
.rn-visor__pie{position:absolute;left:0;right:0;bottom:clamp(12px,2.4vw,28px);
  margin:0;max-width:none;text-align:center;color:rgba(242,241,236,.74);
  font-size:.875rem;font-variant-numeric:tabular-nums}

/* ---------- 4 · Jerarquía de titulares ----------
   Los H1 bajan en escritorio y no se tocan en el teléfono: el mínimo de
   la escala es el mismo. Los titulares de sección bajan con ellos para
   que un H2 no acabe siendo más grande que el H1 de la página. */
.rn-titular h2{font-size:clamp(1.6rem,1.32rem + .95vw,2.25rem)}
.rn-heroe h1{font-size:clamp(2.125rem,1.72rem + 1.25vw,2.95rem)}

@media print{
  .rn-visor{display:none !important}
}

/* El rótulo de resultados también queda por encima del botón flotante:
   es el primer párrafo de la página, el que leen Google y los modelos,
   y no puede salir con un botón encima. */
.rn-cat-rotulo{position:relative;z-index:25}