/* =====================================================================
   RESERVE NOBLE · PROYECTOS · hoja del módulo
   v6.0 · 9 de octubre de 2026
   ---------------------------------------------------------------------
   Esta hoja NO redefine nada que el sitio ya tenga. Las tarjetas, los
   titulares, los botones, las secciones, la rejilla, los campos del
   buscador y las píldoras de nivel son los componentes de
   reservenoble-componentes.css: aquí solo se añade lo que un proyecto
   de obra nueva necesita y un inmueble no.

   Todo sale de las variables de reservenoble-tokens.css. No hay un
   solo hex suelto salvo el rojo del panel, que es una acción
   destructiva y no tiene token de marca.
   ===================================================================== */

:root {
  --rn-p-peligro: #A33A2A;              /* retirar, en el panel */
  --rn-p-riel-w: 252px;                 /* ancho de la tarjeta del riel */

  /* El sistema de radios de esta sección. Nada queda en escuadra:
     cuanto más grande la superficie, más abierta la curva. */
  --rn-p-r-xl: 28px;   /* héroes y bandas metidas hacia adentro */
  --rn-p-r-l:  20px;   /* mosaico, video, cotizador */
  --rn-p-r-m:  14px;   /* tarjetas, teselas, paneles */
  --rn-p-r-s:  10px;   /* campos y pastillas cuadradas */
  --rn-p-aire: clamp(.75rem, .4rem + 1.2vw, 1.5rem);  /* el margen del bloque metido */
}

/* Las dos utilidades que este módulo da por supuestas. Ya existen en
   reservenoble-componentes.css; se repiten aquí para que la hoja no
   dependa del orden de carga: si un radio del visor se viera, la
   galería entera parecería rota. */
.rn-oculto { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
.rn-oculto-visual {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* =====================================================================
   1 · TARJETA DE PROYECTO
   Hereda .rn-inm del sitio. Aquí solo lo propio: la constructora y el
   recorte del riel.
   ===================================================================== */
/* LA TARJETA ES UN BOTÓN.
   ---------------------------------------------------------------------
   Rehecha el 8 de octubre de 2026. El catálogo tiene fotografía propia
   en 1 de 112 fichas: una tarjeta grande con portada generada, repetida
   cuarenta veces, se lee como una base de datos. Así que la tarjeta se
   encoge al tamaño de un botón, la portada baja a 16:9 y el cuerpo
   queda en cuatro líneas: barrio, nombre, de quién y desde cuánto.
   La flecha del pie es lo que la vuelve pulsable a la vista. */
.rn-p-inm {
  position: relative;
  border-radius: var(--rn-p-r-m); overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.rn-p-inm .rn-inm__foto { overflow: hidden; aspect-ratio: 16 / 9; }
.rn-p-inm .rn-inm__foto img,
.rn-p-inm .rn-inm__foto svg,
.rn-p-inm .rn-p-portada { width: 100%; height: 100%; object-fit: cover; }

.rn-p-inm__tapa { display: block; text-decoration: none; }

/* Toda la tarjeta es zona de clic, sin anidar un enlace dentro de otro:
   el del título se estira por encima con un pseudoelemento. */
.rn-p-inm .rn-inm__titulo a::after { content: ''; position: absolute; inset: 0; z-index: 1; }

.rn-p-inm:hover,
.rn-p-inm:focus-within {
  transform: translateY(-3px);
  box-shadow: 0 14px 34px color-mix(in srgb, var(--rn-tinta) 16%, transparent);
  border-color: color-mix(in srgb, var(--rn-ocre) 38%, var(--rn-borde));
}
@media (prefers-reduced-motion: reduce) {
  .rn-p-inm, .rn-p-inm__flecha svg { transition: none; }
  .rn-p-inm:hover, .rn-p-inm:focus-within { transform: none; }
}

.rn-p-inm .rn-inm__cuerpo { padding: var(--rn-e-4); gap: 0; }
.rn-p-inm .rn-inm__ubicacion {
  font-size: .625rem; margin-bottom: 3px;
  color: var(--rn-ocre-honda);
  font-variation-settings: 'wdth' 112, 'wght' 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rn-p-inm .rn-inm__titulo {
  font-size: 1.0625rem; line-height: 1.18; margin-bottom: 3px;
  font-variation-settings: 'wdth' 112, 'wght' 600; letter-spacing: -.01em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* Una sola línea de apoyo: de quién es y cuándo entregan. */
.rn-p-inm__apoyo {
  margin: 0 0 var(--rn-e-3);
  font-size: .75rem; line-height: 1.3;
  font-variation-settings: 'wdth' 100, 'wght' 400;
  color: var(--rn-texto-3);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.rn-p-inm__apoyo span { opacity: .5; margin-inline: 2px; }

.rn-p-inm .rn-inm__pie {
  padding-top: var(--rn-e-3);
  border-top: 1px solid var(--rn-borde);
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--rn-e-3);
}
.rn-p-inm .rn-precio__desde { font-size: .625rem; }
.rn-p-inm .rn-precio__cifra { font-size: 1.0625rem; }
/* En la banda oscura la cifra va en espuma. La hoja del sitio ya lo
   dice; se repite aquí para que no dependa del orden de carga. */
.rn-proyectos .rn-p-inm .rn-precio__cifra { color: var(--rn-espuma); }
.rn-precio--pedir .rn-precio__cifra {
  font-size: .8125rem; color: var(--rn-texto-3);
  font-variation-settings: 'wdth' 100, 'wght' 500;
}

.rn-p-inm__flecha {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--rn-arena); color: var(--rn-tinta);
}
.rn-p-inm__flecha svg { transition: transform .18s ease; }
.rn-p-inm:hover .rn-p-inm__flecha { background: var(--rn-sol); }
.rn-p-inm:hover .rn-p-inm__flecha svg { transform: translateX(2px); }

/* SOBRE LA BANDA DE LA PORTADA, LA TARJETA LLEVA FONDO MACIZO.
   ---------------------------------------------------------------------
   Corregido el 8 de octubre de 2026. La tarjeta venía translúcida y la
   fotografía del fondo se veía a través: el nombre y la cifra perdían
   contraste y las cinco tarjetas se leían como un velo, no como piezas.
   Macizas, recortan contra la foto y la banda gana el golpe que le
   faltaba. Tinta sobre la foto, texto espuma: 15,60:1. */
.rn-proyectos .rn-p-inm {
  background: var(--rn-tinta);
  border-color: color-mix(in srgb, var(--rn-arena) 26%, transparent);
  box-shadow: 0 10px 30px rgba(10, 8, 6, .34);
}
.rn-proyectos .rn-p-inm .rn-inm__cuerpo { background: var(--rn-tinta); }
.rn-proyectos .rn-p-inm:hover {
  border-color: color-mix(in srgb, var(--rn-sol) 46%, transparent);
  box-shadow: 0 16px 38px rgba(10, 8, 6, .44);
}
.rn-proyectos .rn-p-inm .rn-inm__ubicacion { color: var(--rn-sol); opacity: .9; }
.rn-proyectos .rn-p-inm__apoyo { color: var(--rn-arena); opacity: .72; }
.rn-proyectos .rn-p-inm .rn-inm__pie { border-top-color: rgba(228, 216, 196, .22); }
.rn-proyectos .rn-p-inm__flecha { background: rgba(228, 216, 196, .18); color: var(--rn-espuma); }

/* LA REJILLA DEL CATÁLOGO.
   Cuatro por fila en escritorio, que es la densidad de Airbnb, no tres
   como el resto del sitio: aquí se comparan proyectos, no se contempla
   un inmueble. Baja sola a dos y a uno. */
.rn-p-rejilla {
  display: grid; gap: var(--rn-e-4);
  grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
}
@media (max-width: 560px) {
  .rn-p-rejilla { grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: var(--rn-e-3); }
}

/* La cifra de mil millones no se parte en dos líneas: o cabe o se
   encoge. Partida no se lee, y es el dato que decide. */
.rn-p-moneda { white-space: nowrap; }

/* La portada generada ocupa su caja sin deformarse. */
.rn-p-portada { margin: 0; }
.rn-p-portada svg,
.rn-p-portada img { display: block; width: 100%; height: auto; }

/* =====================================================================
   2 · EL RIEL DE LA PORTADA
   scroll-snap puro. Se arrastra con el dedo, con la rueda y con el
   teclado. Ni una línea de JavaScript.
   ===================================================================== */
.rn-p-riel {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--rn-p-riel-w);
  gap: var(--rn-e-4);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--rn-e-5);
  padding-block: var(--rn-e-2) var(--rn-e-5);
  margin-inline: calc(var(--rn-e-5) * -1);
  padding-inline: var(--rn-e-5);
  scrollbar-width: thin;
}
.rn-p-riel > * { scroll-snap-align: start; }
.rn-p-riel:focus-visible { outline: 2px solid var(--rn-sol); outline-offset: 4px; border-radius: var(--rn-r-tarjeta); }

/* En el riel la tarjeta es la misma de arriba: el botón compacto ya
   sirve en los dos sitios, así que aquí solo queda lo que cambia por
   ir sobre fondo oscuro y en una sola línea. */
.rn-p-inm--riel .rn-inm__apoyo,
.rn-p-inm--riel .rn-p-inm__apoyo {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  -webkit-line-clamp: 1;
}

/* La última pieza del riel no es un proyecto: es la puerta al índice. */
.rn-p-riel__fin {
  display: flex; flex-direction: column; justify-content: center; gap: var(--rn-e-2);
  padding: var(--rn-e-5);
  border: 1px dashed currentColor;
  border-radius: var(--rn-r-tarjeta);
  color: var(--rn-arena);
  text-decoration: none;
  transition: background var(--rn-transicion);
}
.rn-p-riel__fin:hover { background: rgba(242, 180, 65, .10); color: var(--rn-sol); }
.rn-p-riel__fin .rn-cifra { font-size: 2.75rem; line-height: 1; color: var(--rn-sol); }
.rn-p-riel__fin > span:last-child { font-size: 0.8125rem; line-height: 1.35; }

/* El telón de la banda. Con una foto real detrás, el degradado que
   traía el sitio no alcanzaba y el texto se perdía sobre el cielo.
   Aquí se refuerza sin tapar la imagen: oscuro arriba y abajo, y una
   capa plana de apoyo en el medio. */
/* Sin filtro desde el 9 de octubre de 2026: la foto se ve como es. */
.rn-proyectos .rn-proyectos__telon {
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--rn-tinta) 92%, transparent) 0%,
      color-mix(in srgb, var(--rn-tinta) 78%, transparent) 42%,
      color-mix(in srgb, var(--rn-tinta) 95%, transparent) 100%);
}

/* =====================================================================
   3 · LAS CIFRAS
   ===================================================================== */
.rn-p-cifras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--rn-e-5);
  margin: var(--rn-e-6) 0 var(--rn-e-3);
  padding-block: var(--rn-e-5);
  border-top: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  border-color: color-mix(in srgb, currentColor 22%, transparent);
}
.rn-p-cifras > div { margin: 0; }
.rn-p-cifras dd { margin: 0; font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); line-height: 1; }
.rn-p-cifras dt {
  margin-top: var(--rn-e-2);
  font-size: var(--rn-t-micro); letter-spacing: .08em; text-transform: uppercase;
  font-variation-settings: 'wdth' 112, 'wght' 500;
  opacity: .72;
}
.rn-p-cifras__ancha { grid-column: span 2; }
.rn-p-cifras__ancha dd { font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); }
.rn-p-cifras--claras { border-color: var(--rn-borde); }
@media (max-width: 560px) { .rn-p-cifras__ancha { grid-column: span 2; } }

.rn-p-corte { font-size: var(--rn-t-micro); opacity: .62; margin-bottom: var(--rn-e-5); max-width: none; }

/* =====================================================================
   4 · LOS BARRIOS Y LAS CONSTRUCTORAS, EN PASTILLAS
   Son enlaces a carpetas reales, no filtros. Es lo que indexa Google.
   ===================================================================== */
.rn-p-barrios { display: flex; flex-wrap: wrap; gap: var(--rn-e-2); margin-bottom: var(--rn-e-5); }
.rn-p-barrios a {
  display: inline-flex; align-items: center; gap: var(--rn-e-2);
  padding: 8px 16px;
  border: 1px solid color-mix(in srgb, currentColor 28%, transparent);
  border-radius: var(--rn-r-pastilla);
  font-size: 0.875rem; text-decoration: none; color: inherit;
  transition: background var(--rn-transicion), border-color var(--rn-transicion);
}
.rn-p-barrios a:hover { background: color-mix(in srgb, currentColor 10%, transparent); border-color: currentColor; }
.rn-p-barrios .rn-cifra { font-size: 0.8125rem; opacity: .7; }
.rn-p-barrios--bloque a { padding: 12px 20px; font-size: 1rem; background: var(--rn-fondo); border-color: var(--rn-borde); }

/* =====================================================================
   5 · LA BARRA DE BÚSQUEDA DE OBRA NUEVA
   Hereda .rn-buscador entero. Lo único propio: sin pestañas, el alto
   se reduce, y el campo de constructora desaparece en pantallas
   estrechas porque es el menos usado de los cinco.
   ===================================================================== */
.rn-p-barra { margin-block: 0 var(--rn-e-6); position: relative; z-index: 2; }
.rn-p-bus .rn-buscador__alto { padding-bottom: var(--rn-e-3); }

/* La caja de campos se declara aquí y no se hereda.
   La barra de inmuebles tiene ocho campos y enseña tres o cuatro según
   la pestaña; ésta enseña cinco siempre. Si heredara aquella rejilla,
   cinco campos entrarían en un hueco pensado para cuatro. */
.rn-p-bus .rn-buscador__caja {
  display: grid;
  /* El barrio es el campo con los nombres más largos —«Ciudad del
     Bicentenario»— y el que más se usa, así que se lleva más ancho.
     Antes los cinco eran iguales y ahí es donde el texto se cortaba.
     8 de octubre de 2026. */
  grid-template-columns: 1.4fr .95fr 1.2fr 1.2fr 1.05fr auto;
  gap: var(--rn-e-3);
  align-items: end;
}
.rn-p-bus .rn-buscador__ir { white-space: nowrap; }

/* LOS DESPLEGABLES.
   ---------------------------------------------------------------------
   El texto se veía cortado porque el select heredaba el ancho de la
   columna y no reservaba sitio para la flecha del sistema. Aquí se le
   quita la flecha nativa, se dibuja la nuestra, y se deja el hueco a
   la derecha para que nunca se monte sobre la última letra. */
.rn-p-bus select {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  display: block; width: 100%; min-width: 0;
  padding: 11px 1.95rem 11px 12px;
  text-overflow: ellipsis; white-space: nowrap; overflow: hidden;
  font-variation-settings: 'wdth' 100, 'wght' 500;
  line-height: 1.25;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23554E44' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6.5 8 10.5 12 6.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 15px 15px;
}
.rn-p-bus select:focus-visible { outline: 2px solid var(--rn-ocre); outline-offset: 2px; }
/* La lista desplegada la pinta el sistema; lo único que se puede
   gobernar desde aquí es que las opciones no salgan apretadas. */
.rn-p-bus select option { padding: 6px 10px; }
@media (max-width: 1100px) {
  .rn-p-bus .rn-buscador__caja { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rn-p-bus .rn-buscador__ir { grid-column: 1 / -1; justify-content: center; }
}
@media (max-width: 860px) {
  .rn-p-bus__constructora { display: none; }
  .rn-p-bus .rn-buscador__caja { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .rn-p-bus .rn-buscador__caja { grid-template-columns: 1fr; }
}

/* =====================================================================
   6 · PÁGINA: ENTRADA, RESPUESTA DIRECTA, MIGA
   ===================================================================== */
.rn-p-pag { display: block; }
/* Dos secciones «cortas» seguidas no suman sus dos respiraciones: se
   quedan con una. Sin esto la ficha abre huecos de doscientos píxeles. */
.rn-p-pag .rn-seccion--corta + .rn-seccion--corta { padding-top: 0; }
.rn-p-entrada { padding-bottom: var(--rn-e-5); }
.rn-p-entrada h1 { margin-block: var(--rn-e-2) var(--rn-e-4); }

.rn-p-directa { font-size: 1.1875rem; line-height: 1.5; max-width: 60ch; }
.rn-p-voz { margin-top: var(--rn-e-4); }
.rn-p-estrecho { max-width: 70ch; min-width: 0; }
.rn-p-nota { font-size: 0.875rem; color: var(--rn-texto-2); }
.rn-p-credito { font-size: var(--rn-t-micro); color: var(--rn-texto-3); margin-top: var(--rn-e-2); }

.rn-p-miga { font-size: var(--rn-t-micro); color: var(--rn-texto-3); margin-bottom: var(--rn-e-4); }
.rn-p-miga a { color: inherit; text-decoration: none; }
.rn-p-miga a:hover { text-decoration: underline; }

/* =====================================================================
   7 · LA FICHA DE UN PROYECTO · v5
   ---------------------------------------------------------------------
   Una sola superficie con fondo en toda la página —el cotizador— y el
   Sol exactamente dos veces: su botón y el del cierre. Lo demás son
   filas, líneas finas y aire. Las cifras hacen de tipografía de
   display: aquí la cifra ES el producto.
   Todo lo interactivo va con :target y con radios ocultos.
   ===================================================================== */

/* --- 7.1 · Portada --------------------------------------------------
   La imagen ocupa la pantalla y el nombre se apoya en el borde
   inferior. Sin rótulo encima: el nombre no necesita que lo anuncien. */
.rn-f-portada {
  position: relative; isolation: isolate;
  height: min(74vh, 44rem); min-height: 25rem;
  display: flex; align-items: flex-end;
  color: var(--rn-espuma); background: var(--rn-tinta);
  /* Metido por los lados y abierto por arriba.
     ---------------------------------------------------------------
     Corregido el 8 de octubre de 2026. Estaba metido también por
     arriba, y eso dejaba una franja de página clara debajo de la
     cabecera. Como la cabecera de estas páginas es transparente, el
     logotipo quedaba en ocre sobre espuma y se perdía. Ahora la
     portada sale a sangre por arriba y la cabecera se apoya siempre
     sobre imagen. La curva se conserva abajo, que es donde se nota. */
  /* A sangre por los cuatro lados. 8 de octubre de 2026: con el
     margen lateral quedaba una franja de página clara a izquierda y
     derecha por encima del pliegue, y la pieza se leía pequeña. */
  margin: 0;
  border-radius: 0;
  overflow: hidden;
  padding-top: clamp(5.5rem, 4rem + 7vw, 8rem);
}
.rn-f-portada__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; }
.rn-f-portada__img img,
.rn-f-portada__img svg { width: 100%; height: 100%; object-fit: cover; }
img.rn-f-portada__img { object-fit: cover; }
/* El velo. Dos capas: una de abajo arriba que asienta el texto, y una
   de izquierda a derecha que lo despega del cielo claro. Sin la
   segunda el titular blanco se pierde sobre el amanecer del render. */
.rn-f-portada__velo {
  position: absolute; inset: 0; z-index: -1;
  background:
    /* La capa de la cabecera. Va primero y es la que hace legible el
       logotipo sobre cualquier render, por claro que sea el cielo. */
    linear-gradient(to bottom,
      color-mix(in srgb, var(--rn-tinta) 78%, transparent) 0,
      color-mix(in srgb, var(--rn-tinta) 42%, transparent) 5rem,
      transparent 10rem),
    linear-gradient(to right,
      color-mix(in srgb, var(--rn-tinta) 72%, transparent) 0%,
      color-mix(in srgb, var(--rn-tinta) 34%, transparent) 42%,
      transparent 72%),
    linear-gradient(to top,
      color-mix(in srgb, var(--rn-tinta) 92%, transparent) 0%,
      color-mix(in srgb, var(--rn-tinta) 58%, transparent) 34%,
      color-mix(in srgb, var(--rn-tinta) 18%, transparent) 70%);
}
.rn-f-portada__pie { width: 100%; padding-bottom: clamp(1.75rem, 1rem + 3vw, 3rem); }
.rn-f-portada .rn-p-miga,
.rn-f-portada .rn-p-miga a { color: color-mix(in srgb, var(--rn-arena) 86%, transparent); }
.rn-f-portada h1 {
  font-family: var(--rn-serif); font-weight: 400;
  font-variation-settings: normal; letter-spacing: -0.015em;
  font-size: clamp(2.75rem, 1.4rem + 6vw, 6.5rem);
  line-height: .95; color: var(--rn-espuma);
  margin: 0 0 var(--rn-e-3); max-width: 16ch;
}
.rn-f-portada__sitio {
  margin: 0; font-size: clamp(.9375rem, .85rem + .3vw, 1.125rem);
  color: var(--rn-arena); max-width: none;
}
.rn-f-portada__sitio a { color: var(--rn-espuma); text-decoration-color: color-mix(in srgb, var(--rn-sol) 70%, transparent); }

/* --- 7.2 · Mosaico --------------------------------------------------
   Una grande y cuatro pequeñas. Se monta sobre el borde de la portada
   para que las dos piezas se lean como una sola composición. */
.rn-f-mosaico { margin-top: var(--rn-p-aire); position: relative; z-index: 2; }
.rn-f-mosaico__rejilla {
  display: grid; gap: var(--rn-p-aire);
  grid-template-columns: 1.62fr 1fr 1fr;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  aspect-ratio: 32 / 13;
}
.rn-f-tesela {
  position: relative; display: block; overflow: hidden;
  background: var(--rn-arena); border-radius: var(--rn-p-r-m);
}
.rn-f-tesela:first-child { grid-row: span 2; }
.rn-f-tesela img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms cubic-bezier(.2,.6,.2,1); }
.rn-f-tesela:hover img, .rn-f-tesela:focus-visible img { transform: scale(1.035); }
.rn-f-tesela__mas {
  position: absolute; inset: 0; display: grid; place-items: center; border-radius: inherit;
  background: color-mix(in srgb, var(--rn-tinta) 58%, transparent);
  color: var(--rn-espuma);
  font-variation-settings: 'wdth' 112, 'wght' 500; font-variant-numeric: tabular-nums;
  font-size: clamp(1.25rem, 1rem + 1vw, 2rem);
}
@media (max-width: 760px) {
  .rn-f-mosaico { margin-top: calc(var(--rn-e-5) * -1); }
  .rn-f-mosaico__rejilla { grid-template-columns: 1fr 1fr; aspect-ratio: 4 / 3; }
  .rn-f-tesela:first-child { grid-column: span 2; grid-row: span 1; }
  .rn-f-tesela:nth-child(4), .rn-f-tesela:nth-child(5) { display: none; }
}

/* --- 7.3 · Visor a pantalla completa, con :target -------------------
   Entra en el historial del navegador: la flecha de atrás lo cierra y
   cada imagen se puede enlazar. Es lo que un visor con JavaScript no
   suele hacer bien. */
.rn-f-visor__hoja {
  position: fixed; inset: 0; z-index: 100; margin: 0;
  display: none; place-items: center;
  background: color-mix(in srgb, var(--rn-tinta) 98%, transparent);
  padding: clamp(1rem, 4vw, 4rem);
}
.rn-f-visor__hoja:target { display: grid; }
.rn-f-visor__hoja > img {
  max-width: 100%; max-height: 82vh; object-fit: contain; grid-area: 1 / 1;
  border-radius: var(--rn-p-r-l);
}
.rn-f-visor__salir { position: absolute; inset: 0; }
.rn-f-visor__hoja figcaption {
  position: absolute; left: 0; right: 0; bottom: clamp(.75rem, 2vw, 1.5rem);
  display: flex; justify-content: space-between; gap: var(--rn-e-4);
  padding-inline: clamp(1.5rem, 5vw, 5rem);
  color: var(--rn-arena); font-size: .875rem;
}
.rn-f-visor__n { font-variant-numeric: tabular-nums; opacity: .7; }
.rn-f-visor__ir, .rn-f-visor__cerrar {
  position: absolute; display: grid; place-items: center;
  width: 3rem; height: 3rem; border-radius: 50%;
  color: var(--rn-espuma); text-decoration: none; line-height: 1;
  background: color-mix(in srgb, var(--rn-espuma) 12%, transparent);
  transition: background 160ms, color 160ms;
}
.rn-f-visor__ir:hover, .rn-f-visor__cerrar:hover { background: var(--rn-sol); color: var(--rn-tinta); }
.rn-f-visor__ir { top: 50%; transform: translateY(-50%); font-size: 2rem; }
.rn-f-visor__ir--izq { left: clamp(.5rem, 2vw, 2rem); }
.rn-f-visor__ir--der { right: clamp(.5rem, 2vw, 2rem); }
.rn-f-visor__cerrar { top: clamp(.75rem, 2vw, 1.5rem); right: clamp(.75rem, 2vw, 1.5rem); font-size: 1.75rem; }

/* --- 7.4 a 7.10 · ver el bloque 24 (ficha v6, 9 de octubre de 2026) --- */

/* --- 7.11 · La píldora de nivel ------------------------------------- */
.rn-p-pildora {
  display: inline-flex; align-items: center; padding: 4px 11px;
  font-size: .6875rem; letter-spacing: .07em; text-transform: uppercase;
  font-variation-settings: 'wdth' 112, 'wght' 600;
}
.rn-nivel--convenio,   .rn-p-pildora--convenio   { background: var(--rn-ocre);  color: var(--rn-espuma); }
.rn-nivel--oficial,    .rn-p-pildora--oficial    { background: var(--rn-arena); color: var(--rn-ocre-honda); }
.rn-nivel--referencia, .rn-p-pildora--referencia { background: transparent; color: var(--rn-texto-3); box-shadow: inset 0 0 0 1px var(--rn-borde); }
.rn-nivel--agotado,    .rn-p-pildora--agotado    { background: var(--rn-bruma); color: var(--rn-espuma); }
.rn-proyectos .rn-nivel--referencia { color: var(--rn-arena); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rn-arena) 45%, transparent); }

/* Sobre la placa de la tarjeta la píldora va maciza. Transparente se
   perdía: el nivel es un dato, no un adorno, y tiene que leerse antes
   que la imagen. Contrastes del Manual: tinta sobre espuma 15,60:1 y
   espuma sobre ocre-honda 7,11:1. 8 de octubre de 2026. */
.rn-p-inm .rn-inm__nivel .rn-nivel {
  backdrop-filter: none;
  font-variation-settings: 'wdth' 112, 'wght' 600;
  letter-spacing: .04em;
}
/* Una sola píldora para los cuatro niveles: tinta maciza con texto
   espuma, 15,60:1. Probé a darle a cada nivel su color y sobre la
   placa ocre el ocre-honda casi no se distingue —son vecinos—. El
   color del nivel ya lo dice la placa entera; la píldora solo tiene
   que ser legible encima de cualquiera de ellas. */
.rn-p-inm .rn-inm__nivel .rn-nivel {
  background: var(--rn-tinta); color: var(--rn-espuma); box-shadow: none;
  font-size: .625rem; padding: 4px 9px;
}
.rn-p-inm .rn-nivel--convenio { background: var(--rn-ocre); }

/* --- 7.12 · ver el bloque 24.3 (bloques libres en la retícula) --- */

/* =====================================================================
   7bis · EL HÉROE DEL ÍNDICE
   ---------------------------------------------------------------------
   Mismo bloque metido y redondeado de la ficha, y al pie la fila de
   cifras con reglas finas entre columnas. Son las del almacén: salen
   de contar fichas, no de un contador decorativo.
   ===================================================================== */
/* EL HÉROE DE /proyectos/
   ---------------------------------------------------------------------
   Rehecho el 8 de octubre de 2026 y ya no hereda de la portada de la
   ficha. Tres cosas cambian y las tres son la misma: que la cabecera
   se lea.

   1. Sale a sangre por arriba. El bloque metido dejaba una franja de
      página clara bajo la cabecera transparente, y el logotipo —ocre
      sobre espuma— desaparecía. Ahora la cabecera se apoya siempre
      sobre imagen.
   2. El velo lleva una capa propia en el borde superior, calculada
      para la altura de la cabecera y no para el titular.
   3. Solo se redondea abajo, con la curva grande de la sección, para
      que siga siendo una pieza y no una franja. */
.rn-i-heroe {
  position: relative; isolation: isolate;
  display: flex; align-items: flex-end;
  min-height: min(92vh, 46rem);
  color: var(--rn-espuma); background: var(--rn-tinta);
  margin: 0; border-radius: 0;
  overflow: hidden;
  padding-top: clamp(6rem, 4rem + 8vw, 9rem);
}
.rn-i-heroe__fondo { position: absolute; inset: 0; z-index: -2; }
.rn-i-heroe__video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
/* Dos piezas, una por orientación. La que no se ve no se descarga. */
.rn-i-heroe__video--alto { display: none; }
@media (max-width: 720px) {
  .rn-i-heroe__video--ancho { display: none; }
  .rn-i-heroe__video--alto  { display: block; }
}

/* Tres capas. La primera es la que hace legible el logotipo; sin ella
   la marca se pierde sobre el cielo. La segunda despega el titular por
   la izquierda y la tercera lo asienta sobre el borde inferior. */
.rn-i-heroe__velo {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to bottom,
      color-mix(in srgb, var(--rn-tinta) 80%, transparent) 0,
      color-mix(in srgb, var(--rn-tinta) 46%, transparent) 5.5rem,
      transparent 11rem),
    linear-gradient(to right,
      color-mix(in srgb, var(--rn-tinta) 74%, transparent) 0%,
      color-mix(in srgb, var(--rn-tinta) 40%, transparent) 46%,
      color-mix(in srgb, var(--rn-tinta) 10%, transparent) 78%),
    linear-gradient(to top,
      color-mix(in srgb, var(--rn-tinta) 90%, transparent) 0%,
      color-mix(in srgb, var(--rn-tinta) 56%, transparent) 38%,
      transparent 74%);
}
/* En el teléfono la foto ocupa todo el ancho y el degradado lateral ya
   no alcanza: el eslogan en itálica se perdía contra el cielo. Ahí el
   velo pasa a ser vertical y mucho más cerrado. */
@media (max-width: 720px) {
  .rn-i-heroe { min-height: min(88vh, 42rem); }
  .rn-i-heroe__velo {
    background:
      linear-gradient(to bottom,
        color-mix(in srgb, var(--rn-tinta) 82%, transparent) 0,
        color-mix(in srgb, var(--rn-tinta) 48%, transparent) 5rem,
        color-mix(in srgb, var(--rn-tinta) 34%, transparent) 10rem),
      linear-gradient(to top,
        color-mix(in srgb, var(--rn-tinta) 92%, transparent) 0%,
        color-mix(in srgb, var(--rn-tinta) 72%, transparent) 46%,
        color-mix(in srgb, var(--rn-tinta) 40%, transparent) 82%);
  }
}

.rn-i-heroe__pie { width: 100%; padding-bottom: clamp(1.75rem, 1rem + 3vw, 3rem); }
.rn-i-heroe .rn-p-miga,
.rn-i-heroe .rn-p-miga a { color: color-mix(in srgb, var(--rn-arena) 86%, transparent); }
.rn-i-heroe h1 {
  font-family: var(--rn-sans); font-variation-settings: 'wdth' 125, 'wght' 600;
  font-size: clamp(2rem, 1.2rem + 3.4vw, 4rem); line-height: 1.02;
  letter-spacing: -.015em; color: var(--rn-espuma);
  margin: 0 0 var(--rn-e-3); max-width: 18ch;
}
.rn-i-heroe__voz {
  font-family: var(--rn-serif); font-style: italic; font-variation-settings: normal;
  font-size: clamp(1.125rem, .95rem + .8vw, 1.625rem);
  color: var(--rn-sol); margin: 0 0 clamp(1.5rem, 1rem + 2vw, 2.5rem); max-width: none;
}
.rn-i-cifras {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: var(--rn-e-5); margin: 0;
  padding-top: clamp(1rem, .6rem + 1.4vw, 1.75rem);
  border-top: 1px solid color-mix(in srgb, var(--rn-arena) 32%, transparent);
}
.rn-i-cifras > div {
  margin: 0; padding-left: var(--rn-e-5);
  border-left: 1px solid color-mix(in srgb, var(--rn-arena) 24%, transparent);
}
.rn-i-cifras > div:first-child { padding-left: 0; border-left: 0; }
.rn-i-cifras dd {
  margin: 0; color: var(--rn-espuma);
  font-variation-settings: 'wdth' 112, 'wght' 500; font-variant-numeric: tabular-nums;
  font-size: clamp(1.75rem, 1.2rem + 2vw, 3rem); line-height: 1; letter-spacing: -.02em;
}
.rn-i-cifras--cop { font-size: clamp(1.25rem, .95rem + 1.2vw, 2rem) !important; color: var(--rn-sol) !important; }
.rn-i-cifras dt { margin-top: 6px; font-size: .8125rem; color: var(--rn-arena); opacity: .8; }
@media (max-width: 560px) {
  .rn-i-cifras { grid-template-columns: repeat(2, 1fr); gap: var(--rn-e-4); }
  .rn-i-cifras > div:nth-child(odd) { padding-left: 0; border-left: 0; }
}

/* EL HÉROE DEL ÍNDICE VA CENTRADO.
   ---------------------------------------------------------------------
   8 de octubre de 2026. La barra se veía corrida a la izquierda porque
   colgaba de un bloque de texto alineado a la izquierda. En vez de
   empujarla sola —que deja el titular y la barra peleando—, se centra
   la composición entera: miga, titular, eslogan, respuesta, barra y
   cifras. Es lo que hace cualquier buscador, y así la barra queda
   centrada de verdad, no «casi». */
.rn-i-heroe__pie .rn-contenedor { text-align: center; }
.rn-i-heroe h1 { margin-inline: auto; max-width: 22ch; }
.rn-i-heroe__voz { margin-inline: auto; }
.rn-i-heroe .rn-p-miga { justify-content: center; }

/* La respuesta directa, dentro del héroe. Corta, dos renglones. */
.rn-i-heroe__directa {
  margin: 0 auto clamp(1.5rem, 1rem + 2vw, 2.25rem);
  max-width: 62ch;
  font-size: clamp(.9375rem, .88rem + .3vw, 1.0625rem);
  line-height: 1.5;
  color: color-mix(in srgb, var(--rn-espuma) 82%, transparent);
}

/* LA BARRA, CENTRADA Y CON ANCHO PROPIO.
   El tope de ancho es lo que de verdad la centra a la vista: una barra
   que toca los dos bordes no se percibe centrada, se percibe estirada.
   Y deja sitio para que el desplegable del barrio se abra sin tapar
   el titular. */
.rn-i-heroe .rn-p-barra {
  /* Corregido el 8 de octubre de 2026, segunda vuelta. Le había puesto
     un tope de 64rem para centrarla y la dejé corta de los lados. La
     barra ocupa el ancho del contenedor, igual que la de la portada;
     lo que se centra es el contenido del héroe, no la barra sola. */
  margin: 0 0 clamp(1.25rem, .9rem + 1.4vw, 2rem);
  position: relative; z-index: 2;
  text-align: left;
}
.rn-p-bus { border-radius: var(--rn-p-r-l); box-shadow: 0 16px 48px rgba(28, 24, 20, .28); }

/* LAS DOS BARRAS, CENTRADAS SIN TOCARLES EL ANCHO.
   ---------------------------------------------------------------------
   Confirmado leyendo su hoja: `.rn-buscador` lleva `max-width:1340px` y
   ningún margen automático, dentro de un contenedor de 1760 px menos
   112 de margen = 1648 útiles. Sobran 308 px y todos caen a la derecha.
   De ahí la barra «corrida a la izquierda», en la portada y en
   proyectos: es la misma clase y el mismo origen.

   `margin-inline:auto` reparte esos 308 px a los dos lados y NO toca el
   ancho: las dos barras quedan en 1340 px, idénticas entre sí, que es
   justo lo pedido. 8 de octubre de 2026. */
.rn-heroe__barra .rn-buscador,
.rn-i-heroe .rn-p-barra .rn-buscador,
.rn-p-barra .rn-buscador { margin-inline: auto; }

.rn-i-cifras { text-align: left; }
.rn-p-entrada { padding-block: clamp(2rem, 1.2rem + 2.5vw, 3rem) 0; }
.rn-p-entrada .rn-p-corte { margin-top: var(--rn-e-3); }
.rn-p-entrada .rn-p-directa { max-width: 60ch; }

/* =====================================================================
   7ter · LA BANDA DE LA PORTADA, METIDA Y REDONDEADA
   ===================================================================== */
.rn-proyectos {
  /* A ancho completo. 8 de octubre de 2026. */
  margin: 0; border-radius: 0; overflow: hidden;
}
.rn-p-riel { scroll-padding-inline: 0; margin-inline: 0; padding-inline: 0; }
.rn-p-riel__fin { border-radius: var(--rn-p-r-m); }
.rn-p-barrios a { border-radius: var(--rn-r-pastilla); }

/* =====================================================================
   8 · DATOS, TABLAS, BLOQUES Y PREGUNTAS
   ===================================================================== */
.rn-p-datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--rn-e-4) var(--rn-e-5); margin: 0; }
.rn-p-datos > div { margin: 0; padding-bottom: var(--rn-e-3); border-bottom: 1px solid var(--rn-borde); }
.rn-p-datos dt { font-size: var(--rn-t-micro); letter-spacing: .08em; text-transform: uppercase; font-variation-settings: 'wdth' 112, 'wght' 500; color: var(--rn-texto-3); }
.rn-p-datos dd { margin: var(--rn-e-2) 0 0; font-variation-settings: 'wdth' 100, 'wght' 500; overflow-wrap: break-word; }
.rn-p-datos--ancha { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

/* La caja de la tabla se desliza sola en el móvil. min-width:0 es
   obligatorio: dentro de una rejilla, sin eso el hijo se niega a
   encogerse y la tabla desborda la pantalla. */
.rn-p-tabla__caja { overflow-x: auto; max-width: 100%; min-width: 0; -webkit-overflow-scrolling: touch; }
.rn-p-tabla { min-width: 34rem; }
@media (min-width: 720px) { .rn-p-tabla { min-width: 0; } }
.rn-p-tabla { width: 100%; border-collapse: collapse; }
.rn-p-tabla th, .rn-p-tabla td { padding: var(--rn-e-3) var(--rn-e-4); text-align: left; border-bottom: 1px solid var(--rn-borde); }
.rn-p-tabla thead th { font-size: var(--rn-t-micro); letter-spacing: .08em; text-transform: uppercase; color: var(--rn-texto-3); }
.rn-p-tabla td.rn-cifra { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* En el móvil la tabla se desliza; el precio nunca se parte en dos. */
.rn-p-tabla th[scope="row"] { font-variation-settings: 'wdth' 100, 'wght' 600; }

.rn-p-bloque { margin-bottom: var(--rn-e-6); min-width: 0; }
/* Una tabla de siete columnas no cabe en la medida de lectura. Rompe
   la columna estrecha y usa el ancho del contenedor; si aun así no
   cabe, se desliza. */
.rn-p-estrecho > .rn-p-bloque--tabla { width: min(100vw - 3rem, var(--rn-ancho-max)); margin-inline: calc(50% - min(50vw - 1.5rem, var(--rn-ancho-max) / 2)); }
.rn-p-bloque--tabla .rn-p-tabla { min-width: 48rem; }
@media (min-width: 1100px) { .rn-p-bloque--tabla .rn-p-tabla { min-width: 0; } }
.rn-p-bloque h2 { font-size: var(--rn-t-h3); }
.rn-p-bloque--lista ul { padding-left: 1.2em; }
.rn-p-bloque--lista li { margin-bottom: var(--rn-e-2); }
.rn-p-bloque--cita blockquote { margin: 0; }

.rn-p-faq__item { border-bottom: 1px solid var(--rn-borde); padding-block: var(--rn-e-4); }
.rn-p-faq__item summary {
  cursor: pointer; list-style: none;
  font-variation-settings: 'wdth' 100, 'wght' 600;
  display: flex; justify-content: space-between; gap: var(--rn-e-4);
}
.rn-p-faq__item summary::-webkit-details-marker { display: none; }
.rn-p-faq__item summary::after { content: '+'; color: var(--rn-ocre); font-size: 1.25rem; line-height: 1; }
.rn-p-faq__item[open] summary::after { content: '–'; }
.rn-p-faq__item p { margin: var(--rn-e-3) 0 0; color: var(--rn-texto-2); }

.rn-p-escalera li b { display: block; }

.rn-p-aviso { border-left: 2px solid var(--rn-ocre); padding-left: var(--rn-e-4); margin-block: var(--rn-e-6); }
.rn-p-aviso p { font-size: 0.8125rem; color: var(--rn-texto-2); }

.rn-p-accion h2 { margin-bottom: var(--rn-e-3); }

@media (prefers-reduced-motion: reduce) {
  .rn-p-riel, .rn-p-galeria { scroll-behavior: auto; }
}

/* =====================================================================
   9 · EL PANEL
   Vive dentro de reservenoble-panel.css, así que aquí solo va lo que
   la pestaña de Proyectos añade.
   ===================================================================== */
.rn-pan { max-width: 1200px; margin-inline: auto; padding: var(--rn-e-6) var(--rn-e-5) var(--rn-e-9); }
.rn-pan__cab { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--rn-e-4); margin-bottom: var(--rn-e-6); }
.rn-pan__cab h1 { margin-bottom: var(--rn-e-2); }
.rn-pan__resumen { margin: 0; color: var(--rn-texto-2); max-width: none; }
.rn-pan__cab-acc { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rn-e-4); margin: 0; }
.rn-pan__nuevo {
  display: inline-flex; align-items: center; padding: 11px 22px;
  background: var(--rn-accion); color: var(--rn-accion-texto);
  border-radius: var(--rn-r-pastilla); text-decoration: none;
  font-variation-settings: 'wdth' 112, 'wght' 600;
}
.rn-pan__nuevo:hover { background: #E5A832; color: var(--rn-accion-texto); }

.rn-pan__ficha { border: 1px solid var(--rn-borde); border-radius: var(--rn-r-bloque); margin-bottom: var(--rn-e-5); background: var(--rn-fondo); }
.rn-pan__ficha > summary {
  cursor: pointer; padding: var(--rn-e-4) var(--rn-e-5); list-style: none;
  font-variation-settings: 'wdth' 100, 'wght' 600;
  display: flex; justify-content: space-between; align-items: center; gap: var(--rn-e-4);
}
.rn-pan__ficha > summary::-webkit-details-marker { display: none; }
.rn-pan__ficha > summary::after { content: '+'; color: var(--rn-ocre); font-size: 1.25rem; }
.rn-pan__ficha[open] > summary::after { content: '–'; }
.rn-pan__ficha[open] > summary { border-bottom: 1px solid var(--rn-borde); }
.rn-pan__form { padding: var(--rn-e-5); }
.rn-pan__pista { font-size: 0.875rem; color: var(--rn-texto-2); max-width: 75ch; }

.rn-pan__grupo { border: 0; border-top: 1px solid var(--rn-borde); margin: 0 0 var(--rn-e-5); padding: var(--rn-e-5) 0 0; }
.rn-pan__grupo:first-of-type { border-top: 0; padding-top: 0; }
.rn-pan__grupo > legend {
  padding: 0 var(--rn-e-3) 0 0;
  font-size: var(--rn-t-micro); letter-spacing: .08em; text-transform: uppercase;
  font-variation-settings: 'wdth' 112, 'wght' 600; color: var(--rn-ocre);
}
.rn-pan__rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--rn-e-4); }

.rn-pan__campo { display: flex; flex-direction: column; gap: 6px; }
.rn-pan__campo > span { font-size: 0.8125rem; font-variation-settings: 'wdth' 100, 'wght' 600; }
.rn-pan__campo input, .rn-pan__campo select, .rn-pan__campo textarea {
  font: inherit; font-size: 0.9375rem; padding: 10px 12px;
  border: 1px solid var(--rn-borde); border-radius: var(--rn-r-etiqueta);
  background: var(--rn-espuma); color: var(--rn-texto); width: 100%;
}
.rn-pan__campo textarea { resize: vertical; font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 0.8125rem; }
.rn-pan__campo input:focus, .rn-pan__campo select:focus, .rn-pan__campo textarea:focus {
  outline: 2px solid var(--rn-foco); outline-offset: 1px;
}
.rn-pan__campo small { font-size: 0.75rem; color: var(--rn-texto-3); line-height: 1.4; }
.rn-pan__campo--ancho { grid-column: 1 / -1; }

.rn-pan__marcas { border: 1px solid var(--rn-borde); border-radius: var(--rn-r-bloque); padding: var(--rn-e-4) var(--rn-e-5); margin-bottom: var(--rn-e-5); display: flex; flex-wrap: wrap; gap: var(--rn-e-5); }
.rn-pan__marcas > legend { font-size: var(--rn-t-micro); letter-spacing: .08em; text-transform: uppercase; color: var(--rn-ocre); font-variation-settings: 'wdth' 112, 'wght' 600; }
.rn-pan__marcas label { display: inline-flex; align-items: center; gap: var(--rn-e-2); }

.rn-pan__guardar {
  font: inherit; padding: 13px 28px; border: 0; border-radius: var(--rn-r-pastilla);
  background: var(--rn-accion); color: var(--rn-accion-texto);
  font-variation-settings: 'wdth' 112, 'wght' 600; cursor: pointer;
}
.rn-pan__guardar:hover { background: #E5A832; }
.rn-pan__ver { margin-left: var(--rn-e-4); font-size: 0.875rem; }

.rn-pan__filtro { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--rn-e-4); margin-bottom: var(--rn-e-4); }
.rn-pan__filtro .rn-pan__campo { min-width: 200px; }
.rn-pan__filtro button { font: inherit; padding: 10px 20px; border: 1px solid var(--rn-ocre); background: transparent; color: var(--rn-ocre-honda); border-radius: var(--rn-r-pastilla); cursor: pointer; }
.rn-pan__cuenta { font-size: 0.8125rem; color: var(--rn-texto-3); margin-left: auto; }

.rn-pan__tabla { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.rn-pan__tabla th, .rn-pan__tabla td { padding: var(--rn-e-3) var(--rn-e-3); text-align: left; border-bottom: 1px solid var(--rn-borde); vertical-align: top; }
.rn-pan__tabla thead th { font-size: var(--rn-t-micro); letter-spacing: .08em; text-transform: uppercase; color: var(--rn-texto-3); }
.rn-pan__tabla small { color: var(--rn-texto-3); }
.rn-pan--borrador { opacity: .66; }
.rn-pan--retirado { opacity: .45; text-decoration: line-through; }
.rn-pan__acc { white-space: nowrap; }
.rn-pan__acc a { margin-right: var(--rn-e-3); font-size: 0.875rem; }
.rn-pan__retirar { color: var(--rn-p-peligro); }

.rn-pan__nota { border-left: 2px solid var(--rn-ocre); padding-left: var(--rn-e-4); margin-top: var(--rn-e-7); }
.rn-pan__nota h3 { font-size: 1rem; margin-bottom: var(--rn-e-2); }
.rn-pan__nota p { font-size: 0.875rem; color: var(--rn-texto-2); }

/* =====================================================================
   11 · LOS GRUPOS POR PRESUPUESTO  ·  8 de octubre de 2026
   ---------------------------------------------------------------------
   Cuarenta tarjetas en una rejilla eran un rollo infinito: en el
   teléfono se baja y se baja y no se llega. Repartidas en cuatro
   rieles por presupuesto son cuatro listas cortas que se corren con
   el dedo, y abajo siguen bajando los demás grupos.

   El riel es overflow + scroll-snap. Ni una línea de JavaScript: las
   cuarenta tarjetas están en el código fuente una detrás de otra, que
   es lo que necesitan los rastreadores de IA.
   ===================================================================== */
/* min-width:0 en los tres niveles es obligatorio. Dentro de una
   rejilla, un hijo con contenido más ancho que la columna se niega a
   encogerse —min-width:auto es el valor por defecto— y en vez de
   aparecer la barra de desplazamiento del riel se desborda la página
   entera. Sin estas tres líneas el índice se iba 2.888 px a la
   derecha. */
.rn-p-grupos { display: grid; gap: clamp(1.75rem, 1.2rem + 2vw, 3rem); min-width: 0; }
.rn-p-grupos > * { min-width: 0; }
.rn-p-grupo { min-width: 0; }

.rn-p-grupo__cab {
  display: flex; align-items: baseline; gap: var(--rn-e-3);
  flex-wrap: wrap; margin-bottom: var(--rn-e-4);
}
.rn-p-grupo__t {
  margin: 0; font-size: clamp(1.0625rem, .95rem + .5vw, 1.375rem);
  font-variation-settings: 'wdth' 112, 'wght' 600; letter-spacing: -.01em;
}
.rn-p-grupo__n {
  margin: 0; font-size: .8125rem; color: var(--rn-texto-3);
  font-variant-numeric: tabular-nums;
}
.rn-p-grupo__ver {
  margin-left: auto; font-size: .8125rem;
  color: var(--rn-ocre-honda);
  font-variation-settings: 'wdth' 112, 'wght' 600;
  text-decoration-color: color-mix(in srgb, var(--rn-sol) 70%, transparent);
  text-underline-offset: 3px;
}

/* El riel de un grupo. En escritorio las tarjetas van a su ancho
   natural; en el teléfono se estrechan a poco más de media pantalla,
   para que asome la siguiente: ese trocito que asoma es lo único que
   le dice al dedo que ahí se puede correr. */
.rn-p-riel--grupo {
  grid-auto-columns: 16.5rem;
  padding-block: 2px var(--rn-e-4);
  scroll-padding-inline: var(--rn-e-5);
}
@media (max-width: 720px) {
  .rn-p-riel--grupo { grid-auto-columns: 62vw; }
}
@media (max-width: 420px) {
  .rn-p-riel--grupo { grid-auto-columns: 70vw; }
}

/* =====================================================================
   12 · LAS CIFRAS DE LA BANDA, EN FICHAS
   ---------------------------------------------------------------------
   Antes eran cuatro números enormes en fila, y empujaban el carrusel
   —que es lo que la gente viene a ver— más de seiscientos píxeles
   hacia abajo. Ahora van en cuatro fichas pequeñas, al lado del
   texto, y el riel sube.
   ===================================================================== */
.rn-proyectos__cabeza {
  display: grid; gap: clamp(1.5rem, 1rem + 2.5vw, 3rem);
  align-items: start;
  margin-bottom: clamp(1.5rem, 1rem + 2vw, 2.25rem);
}
@media (min-width: 900px) {
  .rn-proyectos__cabeza { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
}
.rn-proyectos__dicho > * { margin-top: 0; }
.rn-proyectos__dicho h2 { margin-bottom: var(--rn-e-3); }
.rn-proyectos__dicho .rn-proyectos__intro { max-width: 52ch; margin-bottom: 0; }

.rn-p-fichas {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--rn-e-3); margin: 0;
}
.rn-p-fichas > div {
  margin: 0; padding: var(--rn-e-4);
  border-radius: var(--rn-p-r-m);
  background: rgba(242, 241, 236, .055);
  border: 1px solid rgba(228, 216, 196, .18);
}
.rn-p-fichas dd {
  margin: 0; color: var(--rn-espuma);
  font-variation-settings: 'wdth' 112, 'wght' 500; font-variant-numeric: tabular-nums;
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); line-height: 1; letter-spacing: -.02em;
}
.rn-p-fichas--cop dd { color: var(--rn-sol); font-size: clamp(1.125rem, .95rem + .7vw, 1.5rem); }
.rn-p-fichas dt {
  margin-top: 6px; font-size: .75rem; color: var(--rn-arena); opacity: .8;
  letter-spacing: .04em;
}

/* El botón de contorno sobre fondo oscuro, para la fila de acciones
   de la banda: tiene que leerse sin competir con el Sol. */
.rn-boton--contorno-claro {
  background: transparent; color: var(--rn-espuma);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rn-arena) 52%, transparent);
}
.rn-boton--contorno-claro:hover {
  background: rgba(242, 241, 236, .08);
  box-shadow: inset 0 0 0 1px var(--rn-arena);
}

/* =====================================================================
   13 · EL LLAMADO A LA CONSTRUCTORA
   ---------------------------------------------------------------------
   Antes era una línea de texto y un enlace. A un gerente comercial eso
   no le dice nada. Un constructor tiene tres objeciones y siempre las
   mismas: cuánto me cuesta, qué libertad pierdo y quién se queda con
   el cliente. Las tres van resueltas antes del botón.
   ===================================================================== */
.rn-p-llamado {
  background: var(--rn-tinta); color: var(--rn-espuma);
  padding-block: clamp(2.5rem, 1.6rem + 3.5vw, 4.5rem);
}
.rn-p-llamado__rejilla {
  display: grid; gap: clamp(1.75rem, 1.2rem + 2.5vw, 3.5rem);
  align-items: center;
}
@media (min-width: 900px) {
  .rn-p-llamado__rejilla { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
}
.rn-p-llamado .rn-titular__ojo { color: var(--rn-sol); }
.rn-p-llamado h2 {
  margin: var(--rn-e-2) 0 var(--rn-e-4);
  color: var(--rn-espuma);
  font-size: clamp(1.625rem, 1.2rem + 2vw, 2.75rem);
  line-height: 1.04; letter-spacing: -.015em;
  font-variation-settings: 'wdth' 125, 'wght' 600;
  max-width: 20ch;
}
.rn-p-llamado__p {
  margin: 0 0 clamp(1.5rem, 1rem + 1.6vw, 2rem);
  max-width: 48ch; color: var(--rn-arena);
  font-size: clamp(.9375rem, .88rem + .3vw, 1.0625rem); line-height: 1.55;
}
.rn-p-llamado__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--rn-e-3); }
.rn-p-llamado__lista li {
  padding: var(--rn-e-4) var(--rn-e-5);
  border-radius: var(--rn-p-r-m);
  background: rgba(242, 241, 236, .05);
  border: 1px solid rgba(228, 216, 196, .16);
  border-left: 3px solid var(--rn-sol);
}
.rn-p-llamado__lista b {
  display: block; color: var(--rn-espuma);
  font-variation-settings: 'wdth' 112, 'wght' 600;
  font-size: 1rem; margin-bottom: 3px;
}
.rn-p-llamado__lista span {
  display: block; color: var(--rn-arena); opacity: .82;
  font-size: .875rem; line-height: 1.45;
}

/* =====================================================================
   14 · LAS PREGUNTAS, A ANCHO COMPLETO
   ---------------------------------------------------------------------
   Iban en una columna estrecha centrada y dejaban media pantalla en
   blanco. Ahora el titular se queda a la izquierda y las preguntas
   corren a la derecha, que además es el orden en que se leen.
   ===================================================================== */
.rn-p-preguntas__rejilla { display: grid; gap: clamp(1.5rem, 1rem + 2vw, 3rem); align-items: start; }
@media (min-width: 900px) {
  .rn-p-preguntas__rejilla { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
  .rn-p-preguntas__cab { position: sticky; top: clamp(5rem, 4rem + 3vw, 7rem); }
}
.rn-p-preguntas__cab h2 { margin: var(--rn-e-2) 0 0; max-width: 16ch; }

/* =====================================================================
   15 · LOS TRES LLAMADOS DE LA BANDA  ·  9 de octubre de 2026
   ---------------------------------------------------------------------
   Estaban pegados al margen izquierdo porque .rn-proyectos__acciones no
   declara justify-content y hereda el arranque de la caja. Van
   centrados, con aire entre ellos, y con jerarquía de verdad: el Sol
   es uno solo y la flecha solo la lleva el principal.
   ===================================================================== */
.rn-proyectos__acciones--centro {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: center;
  /* max-width:none va explícito: es un <p> y el ancho de párrafo del
     sitio lo estaba encogiendo a unos 700 px, que es lo que hacía que
     los tres se vieran apelotonados a la izquierda y se partieran en
     dos filas habiendo sitio de sobra. */
  max-width: none; width: 100%;
  gap: clamp(.75rem, .5rem + 1vw, 1.25rem);
  margin-top: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}

/* El principal. Más alto que los otros dos y con la flecha en un
   círculo que se desplaza al pasar el cursor: el gesto dice «se sigue
   por aquí» antes de que nadie lea la etiqueta. */
.rn-p-cta {
  padding-right: 10px;
  box-shadow: 0 10px 30px color-mix(in srgb, var(--rn-sol) 30%, transparent);
}
.rn-p-cta__flecha {
  display: grid; place-items: center; flex: none;
  width: 32px; height: 32px; border-radius: 50%;
  background: color-mix(in srgb, var(--rn-tinta) 14%, transparent);
  color: var(--rn-tinta);
  transition: transform .18s ease, background .18s ease;
}
.rn-p-cta:hover .rn-p-cta__flecha {
  transform: translateX(3px);
  background: color-mix(in srgb, var(--rn-tinta) 22%, transparent);
}

/* El de WhatsApp lleva su icono delante: se reconoce antes de leerlo. */
.rn-p-wa .rn-ico-wa { flex: none; }

/* EL CONTORNO CLARO · corregido el 9 de octubre de 2026.
   ---------------------------------------------------------------------
   El texto desaparecía al pasar el cursor, y la causa estaba en el kit
   de marca: `.rn-boton:hover` fuerza `color: var(--rn-accion-texto)`,
   que es tinta, porque está pensado para el botón Sol. Sobre un botón
   de contorno con fondo oscuro, tinta sobre tinta es invisible.
   Aquí se devuelve el color en los tres estados, de forma explícita.
   El fondo semitransparente se queda: es lo que lo despega de la
   fotografía sin convertirlo en un segundo Sol. */
.rn-boton--contorno-claro,
.rn-boton--contorno-claro:hover,
.rn-boton--contorno-claro:focus-visible,
.rn-boton--contorno-claro:active {
  color: var(--rn-espuma);
}
.rn-boton--contorno-claro {
  background: color-mix(in srgb, var(--rn-tinta) 34%, transparent);
  backdrop-filter: blur(6px);
}
.rn-boton--contorno-claro:hover {
  background: color-mix(in srgb, var(--rn-tinta) 52%, transparent);
  box-shadow: inset 0 0 0 1px var(--rn-arena);
}

/* La misma trampa afecta al botón claro del kit cuando va sobre la
   banda: se blinda igual. */
.rn-proyectos .rn-boton--claro,
.rn-proyectos .rn-boton--claro:hover { color: var(--rn-espuma); }

@media (max-width: 760px) {
  /* En el teléfono los tres a ancho completo y en el mismo orden: el
     pulgar no tiene que buscar. */
  .rn-proyectos__acciones--centro { flex-direction: column; align-items: stretch; }
  .rn-proyectos__acciones--centro .rn-boton { width: 100%; justify-content: center; }
}

/* =====================================================================
   16 · EL BOTÓN DE VIDEO SOBRE LA PORTADA  ·  9 de octubre de 2026
   ---------------------------------------------------------------------
   Lo primero que ve quien entra a un proyecto. Disco en Sol —el color
   de acción— con el texto al lado sobre una pastilla translúcida, para
   que se lea encima de cualquier render. El halo late despacio, igual
   que el botón flotante de WhatsApp: es el mismo gesto de la marca.
   ===================================================================== */
.rn-f-play {
  position: absolute; z-index: 3;
  left: 50%; top: 46%; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 14px;
  padding: 10px 24px 10px 10px;
  border-radius: var(--rn-r-pastilla);
  background: color-mix(in srgb, var(--rn-tinta) 46%, transparent);
  backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rn-arena) 34%, transparent);
  text-decoration: none; color: var(--rn-espuma);
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.rn-f-play:hover {
  color: var(--rn-espuma);
  background: color-mix(in srgb, var(--rn-tinta) 64%, transparent);
  transform: translate(-50%, -50%) scale(1.03);
  box-shadow: inset 0 0 0 1px var(--rn-sol);
}
.rn-f-play:focus-visible { outline: 2px solid var(--rn-sol); outline-offset: 4px; }

.rn-f-play__disco {
  position: relative; isolation: isolate; flex: none;
  display: grid; place-items: center;
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--rn-sol); color: var(--rn-tinta);
}
/* El halo. Mismo latido que el flotante: 2,6 s. */
.rn-f-play__disco::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 50%;
  background: var(--rn-sol); animation: rn-latido 2.6s ease-out infinite;
}
.rn-f-play__txt { display: grid; gap: 2px; text-align: left; }
.rn-f-play__txt b {
  font-size: 1rem; line-height: 1.15;
  font-variation-settings: 'wdth' 112, 'wght' 600;
}
.rn-f-play__txt small { font-size: .75rem; color: var(--rn-arena); opacity: .86; }

@media (max-width: 560px) {
  .rn-f-play { padding: 8px 18px 8px 8px; gap: 11px; top: 42%; }
  .rn-f-play__disco { width: 46px; height: 46px; }
  .rn-f-play__txt b { font-size: .9375rem; }
  .rn-f-play__txt small { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .rn-f-play__disco::before { animation: none; opacity: 0; }
  .rn-f-play:hover { transform: translate(-50%, -50%); }
}

/* El visor del video con :target se retiró el 9 de octubre de 2026: no
   podía apagar el video al cerrarse. Ver el bloque 31 (galería). */

/* 17 · las transiciones viven ahora en el bloque 25. */

/* =====================================================================
   18 · QUÉ PONE Y QUÉ PAGA  ·  9 de octubre de 2026
   ---------------------------------------------------------------------
   El cuadro interactivo de la ficha. Cuelga de los mismos radios que el
   cotizador —son <article>, así que el nth-of-type del bloque 7.6 los
   alcanza sin una línea nueva de lógica—, y descompone el precio en los
   tres momentos en que sale dinero del bolsillo.

   Lo que no hace, y es a propósito: no proyecta valor futuro ni calcula
   rentabilidad. Solo reparte una cifra que la constructora ya publicó.
   ===================================================================== */
.rn-f-inv { border-top: 1px solid var(--rn-borde); padding-top: clamp(1.5rem, 1rem + 2vw, 2.5rem); }

.rn-f-inv__hoja { padding: 0; }

.rn-f-inv__total {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: var(--rn-e-3);
  margin: 0 0 var(--rn-e-4); padding-bottom: var(--rn-e-3);
  border-bottom: 1px solid var(--rn-borde);
}
.rn-f-inv__total span {
  font-size: var(--rn-t-micro); letter-spacing: .08em; text-transform: uppercase;
  color: var(--rn-texto-3); font-variation-settings: 'wdth' 112, 'wght' 500;
}
.rn-f-inv__total b {
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem); line-height: 1;
  letter-spacing: -.02em;
  font-variation-settings: 'wdth' 112, 'wght' 500; font-variant-numeric: tabular-nums;
}

/* La barra. Tres tramos proporcionales al dinero de verdad: lo que se
   pone hoy, lo que se paga en cuotas y lo que queda a la entrega. Se
   lee de izquierda a derecha, que es el orden en que se paga. */
.rn-f-inv__barra {
  display: flex; height: 16px; border-radius: 999px; overflow: hidden;
  background: var(--rn-arena); margin-bottom: var(--rn-e-4);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rn-tinta) 8%, transparent);
}
.rn-f-inv__tramo { display: block; height: 100%; }
.rn-f-inv__tramo--sep    { background: var(--rn-sol); }
.rn-f-inv__tramo--cuotas { background: var(--rn-ocre); }
.rn-f-inv__tramo--saldo  { background: var(--rn-bruma); }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* Los tramos crecen al entrar en pantalla. El ancho final lo fija
       el atributo style de cada uno, así que la animación solo escala
       lo que ya está calculado: si el navegador no la soporta, la
       barra se ve completa y correcta igual. */
    .rn-f-inv__barra { transform-origin: left center; animation: rn-p-crecer linear both;
      animation-timeline: view(); animation-range: entry 10% cover 28%; }
    @keyframes rn-p-crecer { from { transform: scaleX(.02); } to { transform: scaleX(1); } }
  }
}

.rn-f-inv__lista {
  list-style: none; margin: 0 0 var(--rn-e-4); padding: 0;
  display: grid; gap: var(--rn-e-3);
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}
.rn-f-inv__lista li {
  display: grid; gap: 3px;
  padding-left: var(--rn-e-4);
  border-left: 3px solid var(--rn-borde);
}
.rn-f-inv__lista .es-sep    { border-left-color: var(--rn-sol); }
.rn-f-inv__lista .es-cuotas { border-left-color: var(--rn-ocre); }
.rn-f-inv__lista .es-saldo  { border-left-color: var(--rn-bruma); }
.rn-f-inv__rot {
  font-size: .75rem; color: var(--rn-texto-3); line-height: 1.25;
  font-variation-settings: 'wdth' 100, 'wght' 500;
}
.rn-f-inv__lista b {
  font-size: 1.1875rem; line-height: 1.1; letter-spacing: -.01em;
  font-variation-settings: 'wdth' 112, 'wght' 500; font-variant-numeric: tabular-nums;
}
.rn-f-inv__lista small { font-size: .75rem; color: var(--rn-texto-3); font-variant-numeric: tabular-nums; }

/* La cifra que de verdad decide si puede o no puede: cuánto hay que
   poner antes de que entreguen. */
.rn-f-inv__antes {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--rn-e-3);
  margin: 0; padding: var(--rn-e-4);
  background: var(--rn-arena); border-radius: var(--rn-p-r-m);
  font-size: .9375rem;
}
.rn-f-inv__antes b {
  font-size: 1.25rem; letter-spacing: -.01em;
  font-variation-settings: 'wdth' 112, 'wght' 600; font-variant-numeric: tabular-nums;
}
.rn-f-inv__antes small { color: var(--rn-tinta-media); font-variant-numeric: tabular-nums; }

.rn-f-inv__nota {
  margin: var(--rn-e-4) 0 0; font-size: .8125rem; line-height: 1.5;
  color: var(--rn-texto-3); max-width: 62ch;
}

/* =====================================================================
   19 · DÓNDE QUEDA EN EL BARRIO
   ---------------------------------------------------------------------
   La pregunta que la sala de ventas no puede contestar, porque solo
   tiene su propio proyecto. Es nuestro dato, con su fecha de corte, y
   no se calcula ni se proyecta nada: se ordenan los precios de entrada
   del barrio y se señala dónde cae este.
   ===================================================================== */
.rn-f-pos { border-top: 1px solid var(--rn-borde); padding-top: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.rn-f-pos__frase {
  margin: 0 0 clamp(2.25rem, 1.6rem + 2.4vw, 3.25rem);
  font-size: clamp(1.125rem, 1rem + .6vw, 1.375rem); line-height: 1.3;
  font-variation-settings: 'wdth' 112, 'wght' 600;
}
.rn-f-pos__escala { margin-bottom: var(--rn-e-4); }

/* El riel: de lo más barato del barrio a lo más caro. */
.rn-f-pos__riel {
  position: relative; height: 10px; border-radius: 999px;
  margin: 0 0 clamp(2.75rem, 2rem + 2.5vw, 3.5rem);
  background: linear-gradient(to right,
    color-mix(in srgb, var(--rn-sol) 55%, var(--rn-arena)),
    var(--rn-ocre));
}
.rn-f-pos__med, .rn-f-pos__yo { position: absolute; top: 50%; }
.rn-f-pos__med { transform: translate(-50%, -50%); }
.rn-f-pos__med::before {
  content: ""; display: block; width: 2px; height: 22px;
  background: var(--rn-tinta-media); opacity: .5; margin: 0 auto;
}
.rn-f-pos__med small {
  position: absolute; top: calc(50% + 16px); left: 50%; transform: translateX(-50%);
  white-space: nowrap; font-size: .6875rem; color: var(--rn-texto-3);
}
/* El marcador de este proyecto: disco en tinta con la cifra encima. */
.rn-f-pos__yo { transform: translate(-50%, -50%); text-align: center; }
.rn-f-pos__yo::after {
  content: ""; display: block; width: 20px; height: 20px; margin: 0 auto;
  border-radius: 50%; background: var(--rn-tinta);
  box-shadow: 0 0 0 4px var(--rn-fondo), 0 0 0 6px var(--rn-tinta);
}
.rn-f-pos__yo b {
  position: absolute; bottom: calc(50% + 18px); left: 50%; transform: translateX(-50%);
  white-space: nowrap; font-size: 1.0625rem; letter-spacing: -.01em;
  font-variation-settings: 'wdth' 112, 'wght' 600; font-variant-numeric: tabular-nums;
}
.rn-f-pos__yo small {
  position: absolute; bottom: calc(50% + 40px); left: 50%; transform: translateX(-50%);
  white-space: nowrap; font-size: var(--rn-t-micro); letter-spacing: .08em;
  text-transform: uppercase; color: var(--rn-ocre-honda);
  font-variation-settings: 'wdth' 112, 'wght' 600;
}
.rn-f-pos__extremos {
  display: flex; justify-content: space-between; gap: var(--rn-e-4);
  margin: 0; font-size: .8125rem; color: var(--rn-texto-3);
}
.rn-f-pos__extremos b {
  display: block; color: var(--rn-texto); font-size: .9375rem;
  font-variation-settings: 'wdth' 112, 'wght' 600; font-variant-numeric: tabular-nums;
}
.rn-f-pos__extremos span:last-child { text-align: right; }

/* =====================================================================
   20 · EL BOTÓN DE VIDEO SALE DEL CENTRO MUERTO
   ---------------------------------------------------------------------
   En el centro exacto tapa el sujeto del render y compite con el H1,
   que está abajo a la izquierda. Baja a la derecha, a la altura del
   nombre: el ojo lee el nombre, cruza y encuentra la acción. La
   composición queda equilibrada y la fotografía se ve entera.
   ===================================================================== */
.rn-f-play {
  left: auto; top: auto;
  right: var(--rn-margen, clamp(20px, 3vw, 56px));
  bottom: clamp(2.25rem, 1.4rem + 3vw, 3.75rem);
  transform: none;
}
.rn-f-play:hover { transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .rn-f-play:hover { transform: none; } }
@media (max-width: 860px) {
  /* En pantalla estrecha el nombre ocupa el ancho y no hay esquina
     libre: vuelve arriba, donde no pisa nada. */
  .rn-f-play {
    right: auto; bottom: auto;
    left: 50%; top: clamp(5.5rem, 4rem + 8vw, 8rem);
    transform: translateX(-50%);
  }
  .rn-f-play:hover { transform: translateX(-50%) translateY(-2px); }
}

/* Las marcas de cada proyecto del barrio sobre el riel. */
.rn-f-pos__marca {
  position: absolute; top: 50%; transform: translate(-50%, -50%);
  width: 3px; height: 18px; border-radius: 2px;
  background: color-mix(in srgb, var(--rn-tinta) 34%, transparent);
}
.rn-f-pos__riel {
  background: var(--rn-arena);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rn-tinta) 8%, transparent);
}
.rn-f-pos__yo { z-index: 2; }
.rn-f-pos__med { z-index: 1; }

/* =====================================================================
   24 · LA FICHA v6 · A ANCHO COMPLETO  ·  9 de octubre de 2026
   ---------------------------------------------------------------------
   Sustituye los bloques 7.4 a 7.10, 7.12 y 21 a 23 de la v5. Lo que se
   corrigió, medido en la pantalla real (1536 px de ancho útil, 743 de
   alto, que es un portátil de 1920 al 125 %):

   · La tarjeta se metía debajo del índice: la cabecera mide 81 px y el
     índice 56. Ahora las dos medidas viven en variables y la tarjeta se
     detiene en su suma más aire, no en un número suelto.
   · El texto quedaba en una columna de 70 caracteres con 470 px vacíos
     hasta la tarjeta. Ahora cada sección es una retícula de dos
     columnas —titular y texto— y los datos van a todo el ancho.
   · El botón de la tarjeta queda arriba, junto al precio: en una
     pantalla baja se corta el desglose, nunca la acción.
   ===================================================================== */
.rn-p-ficha {
  /* clip, no hidden: recorta lo que entra deslizándose por el borde sin
     convertir la página en una caja con scroll, que rompería el sticky. */
  overflow-x: clip;
  --rn-f-cab: 81px;                       /* cabecera del sitio: 80 + su línea */
  --rn-f-ind: 3.5rem;                     /* índice de la ficha, alto fijo */
  --rn-f-tope: calc(var(--rn-f-cab) + var(--rn-f-ind) + 1.25rem);
  --rn-f-col: minmax(0, 1fr) minmax(0, 1.6fr);
  --rn-f-gap: clamp(1.5rem, .8rem + 2.6vw, 3.5rem);
}
@media (max-width: 980px) { .rn-p-ficha { --rn-f-cab: 65px; } }
/* Entre 981 y 1365 px la cabecera del sitio puede partirse en dos
   renglones (menú largo + tres botones) y medir 145 px en vez de 81.
   Ahí el índice no se pega —se quedaría detrás de la cabecera— y la
   tarjeta se detiene a 160 px, que libra la cabecera en uno o en dos
   renglones. Por encima de 1366 px la cabecera cabe siempre en uno. */
@media (min-width: 981px) and (max-width: 1365px) {
  .rn-p-ficha .rn-f-indice { position: relative; top: auto; }
  .rn-p-ficha { --rn-f-tope: 10rem; }
  .rn-p-ficha [id] { scroll-margin-top: 10rem; }
}
.rn-p-ficha [id] { scroll-margin-top: calc(var(--rn-f-cab) + var(--rn-f-ind) + 1rem); }

/* --- 24.1 · El índice de la ficha ------------------------------------
   El nombre del proyecto a la izquierda, como la barra de producto de
   una marca grande, y las secciones a continuación. Alto fijo: de él
   depende dónde se detiene la tarjeta. */
.rn-f-indice {
  position: sticky; top: var(--rn-f-cab); z-index: 30;
  background: color-mix(in srgb, var(--rn-fondo) 93%, transparent);
  backdrop-filter: blur(12px) saturate(1.15);
  -webkit-backdrop-filter: blur(12px) saturate(1.15);
  border-bottom: 1px solid var(--rn-borde);
}
.rn-f-indice__fila { display: flex; align-items: center; gap: clamp(1rem, .4rem + 1.6vw, 2.25rem); height: var(--rn-f-ind); }
.rn-f-indice__nombre {
  flex: none; margin: 0; max-width: none;
  display: flex; align-items: baseline; gap: .6rem;
  padding-right: clamp(1rem, .4rem + 1.6vw, 2.25rem);
  border-right: 1px solid var(--rn-borde);
  font-size: 1rem; line-height: 1; color: var(--rn-texto);
  font-variation-settings: 'wdth' 112, 'wght' 600;
}
.rn-f-indice__nombre span { font-size: .8125rem; color: var(--rn-texto-3); font-variation-settings: 'wdth' 100, 'wght' 400; }
.rn-f-indice__nombre b {
  font-size: .9375rem; color: var(--rn-texto);
  font-variation-settings: 'wdth' 112, 'wght' 500; font-variant-numeric: tabular-nums;
}
.rn-f-indice__riel {
  flex: 1; min-width: 0; height: 100%;
  display: flex; align-items: stretch; gap: clamp(1rem, .5rem + 1.3vw, 2rem);
  overflow-x: auto; scrollbar-width: none;
}
.rn-f-indice__riel::-webkit-scrollbar { display: none; }
.rn-f-indice__a {
  position: relative; display: inline-flex; align-items: center;
  white-space: nowrap; text-decoration: none; color: var(--rn-texto-2);
  font-size: .9375rem; font-variation-settings: 'wdth' 112, 'wght' 500;
  transition: color .18s ease;
}
.rn-f-indice__a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  border-radius: 3px 3px 0 0; background: var(--rn-sol);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .28s cubic-bezier(.2, .7, .2, 1);
}
.rn-f-indice__a:hover { color: var(--rn-ocre-honda); }
.rn-f-indice__a:hover::after, .rn-f-indice__a:focus-visible::after { transform: scaleX(1); }
@media (max-width: 1180px) { .rn-f-indice__nombre { display: none; } }

/* --- 24.2 · El cuerpo: contenido a todo el ancho y tarjeta ---------- */
.rn-f-cuerpo {
  display: grid; align-items: start;
  grid-template-columns: minmax(0, 1fr) clamp(21rem, 18.5rem + 6vw, 26rem);
  gap: clamp(2rem, .8rem + 3.6vw, 4.75rem);
  padding-block: clamp(2.25rem, 1.5rem + 2.6vw, 4rem) clamp(3rem, 2rem + 4vw, 6rem);
  counter-reset: rn-f-sec;
}
.rn-f-lectura { min-width: 0; max-width: none; }
.rn-f-lectura p, .rn-f-lectura li { max-width: 68ch; }

/* El resumen: la respuesta directa en grande y las medidas debajo, a
   todo el ancho, como la hoja técnica de un plano. */
.rn-f-intro { padding-bottom: clamp(2rem, 1.2rem + 2.6vw, 3.5rem); }
.rn-f-entrada {
  font-size: clamp(1.1875rem, .98rem + .8vw, 1.625rem);
  line-height: 1.42; letter-spacing: -.006em;
  max-width: 58ch !important; margin: 0 0 clamp(1.75rem, 1rem + 2.4vw, 3rem);
  text-wrap: pretty;
}
.rn-f-medidas {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: var(--rn-e-5) var(--rn-e-6); margin: 0 0 clamp(1.75rem, 1rem + 2.4vw, 3rem);
}
.rn-f-medidas > div { margin: 0; padding-top: var(--rn-e-3); border-top: 2px solid var(--rn-tinta); }
.rn-f-medidas dd {
  margin: 0; font-variation-settings: 'wdth' 112, 'wght' 500;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
  font-size: clamp(1.25rem, 1rem + .85vw, 1.75rem); line-height: 1.15;
  overflow-wrap: break-word; text-wrap: balance;
}
.rn-f-medidas dt { margin-top: 6px; font-size: .8125rem; color: var(--rn-texto-3); }
.rn-f-medidas--precio { border-top-color: var(--rn-sol) !important; }
.rn-f-medidas--txt { font-size: 1.0625rem !important; letter-spacing: 0 !important; font-variation-settings: 'wdth' 100, 'wght' 600 !important; }

.rn-f-linea {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 3px;
}
.rn-f-linea li {
  max-width: none; padding: var(--rn-e-3) 0 0; border-top: 4px solid var(--rn-borde);
  font-size: .9375rem; color: var(--rn-texto-3);
}
.rn-f-linea li.es-hecho { border-top-color: var(--rn-ocre); color: var(--rn-texto-2); }
.rn-f-linea li.es-ahora { border-top-color: var(--rn-sol); color: var(--rn-texto); font-variation-settings: 'wdth' 100, 'wght' 600; }
.rn-f-linea small { display: block; font-variation-settings: 'wdth' 100, 'wght' 400; color: var(--rn-texto-2); margin-top: 2px; }

/* --- 24.3 · La retícula de sección ----------------------------------
   Dos columnas: a la izquierda el número y el titular; a la derecha el
   texto. Lo que es dato —tipologías, plan, escala— cruza las dos. */
.rn-f-sec {
  display: grid; grid-template-columns: var(--rn-f-col);
  column-gap: var(--rn-f-gap); align-items: start;
  margin: 0; padding-block: clamp(2.25rem, 1.4rem + 2.6vw, 3.75rem);
  border-top: 1px solid var(--rn-borde);
}
.rn-f-sec > * { grid-column: 2; min-width: 0; }
.rn-f-sec > .rn-f-sec__cab { grid-column: 1; }
.rn-f-sec--dato > *, .rn-f-sec--dato > .rn-f-sec__cab { grid-column: 1 / -1; }
/* Lo que es dato no se corta a la medida de lectura: ocupa su fila. */
.rn-f-lectura .rn-f-inv__total, .rn-f-lectura .rn-f-inv__antes,
.rn-f-lectura .rn-f-pos__extremos, .rn-f-lectura .rn-f-inv__nota { max-width: none; }

.rn-f-sec__cab { margin: 0 0 var(--rn-e-5); }
.rn-f-sec--dato > .rn-f-sec__cab {
  display: grid; grid-template-columns: var(--rn-f-col);
  column-gap: var(--rn-f-gap); align-items: end;
  margin-bottom: clamp(1.5rem, 1rem + 1.6vw, 2.5rem);
}
.rn-f-sec h2 {
  counter-increment: rn-f-sec;
  font-size: clamp(1.5rem, 1.1rem + 1.3vw, 2.375rem);
  line-height: 1.06; letter-spacing: -.016em;
  margin: 0; max-width: 17ch; text-wrap: balance;
}
.rn-f-sec h2::before {
  content: counter(rn-f-sec, decimal-leading-zero);
  display: flex; align-items: center; gap: 10px;
  margin-bottom: .9rem;
  font-size: .8125rem; letter-spacing: .1em; line-height: 1;
  color: var(--rn-ocre); font-variant-numeric: tabular-nums;
  font-variation-settings: 'wdth' 112, 'wght' 600;
}
.rn-f-pie-h2 { margin: 0; color: var(--rn-texto-2); font-size: clamp(1rem, .95rem + .2vw, 1.0625rem); line-height: 1.55; max-width: 54ch; }
.rn-f-sec__cab .rn-f-pie-h2 { margin-top: var(--rn-e-3); }
.rn-f-sec--dato > .rn-f-sec__cab .rn-f-pie-h2 { margin-top: 0; }

/* Los bloques libres de cada ficha se acomodan a la misma retícula:
   el titular a la izquierda y el contenido a la derecha. La tabla, la
   galería y la cita cruzan las dos columnas. */
.rn-f-sec--libre > .rn-p-bloque {
  grid-column: 1 / -1; margin: 0;
  display: grid; grid-template-columns: var(--rn-f-col);
  column-gap: var(--rn-f-gap); align-items: start;
}
.rn-f-sec--libre > .rn-p-bloque > * { grid-column: 2; min-width: 0; }
.rn-f-sec--libre > .rn-p-bloque > h2 { grid-column: 1; grid-row: 1 / span 30; }
.rn-f-sec--libre > .rn-p-bloque > p:first-of-type { margin-top: 0; }
.rn-f-sec--libre > .rn-p-bloque p { font-size: 1.0625rem; line-height: 1.68; color: var(--rn-texto); }
.rn-f-sec--libre > .rn-p-bloque--tabla > h2,
.rn-f-sec--libre > .rn-p-bloque--galeria > h2 { grid-row: auto; margin-bottom: clamp(1.25rem, 1rem + 1.2vw, 2rem); }
.rn-f-sec--libre > .rn-p-bloque--tabla > *,
.rn-f-sec--libre > .rn-p-bloque--galeria > * { grid-column: 1 / -1; }
.rn-f-sec--libre > .rn-p-bloque--cita { display: block; text-align: center; }
.rn-f-sec--libre > .rn-p-bloque--cita blockquote {
  margin: 0 auto; font-family: var(--rn-serif); font-style: italic;
  font-size: clamp(1.75rem, 1.2rem + 2vw, 3rem); line-height: 1.15;
  color: var(--rn-ocre-honda); max-width: 24ch;
}
/* La lista: dos columnas de puntos con línea fina, no viñetas sueltas. */
.rn-f-sec--libre .rn-p-bloque--lista ul {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0 var(--rn-e-6);
}
.rn-f-sec--libre .rn-p-bloque--lista li {
  position: relative; max-width: none; margin: 0;
  padding: var(--rn-e-3) 0 var(--rn-e-3) 1.5rem;
  border-top: 1px solid var(--rn-borde);
  color: var(--rn-texto); font-size: .9875rem; line-height: 1.55;
}
.rn-f-sec--libre .rn-p-bloque--lista li::before {
  content: ""; position: absolute; left: 0; top: calc(var(--rn-e-3) + .5em);
  width: 9px; height: 9px; border-radius: 5px 5px 0 0; background: var(--rn-ocre);
}
/* La tabla, a todo el ancho y sin deslizar en el escritorio. */
.rn-f-sec--libre .rn-p-tabla__caja { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.rn-f-sec--libre .rn-p-tabla { width: 100%; min-width: 34rem; border-collapse: collapse; }
@media (min-width: 1100px) { .rn-f-sec--libre .rn-p-tabla { min-width: 0; } }
.rn-f-sec--libre .rn-p-tabla th,
.rn-f-sec--libre .rn-p-tabla td { padding: 15px 20px 15px 0; border-bottom: 1px solid var(--rn-borde); text-align: left; vertical-align: baseline; }
.rn-f-sec--libre .rn-p-tabla td:last-child, .rn-f-sec--libre .rn-p-tabla th:last-child { padding-right: 0; }
.rn-f-sec--libre .rn-p-tabla thead th {
  font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--rn-texto-3); border-bottom: 2px solid var(--rn-tinta);
}
.rn-f-sec--libre .rn-p-tabla th[scope="row"] { font-variation-settings: 'wdth' 100, 'wght' 600; white-space: nowrap; }
.rn-f-sec--libre .rn-p-tabla td.rn-cifra {
  font-size: 1.0625rem; font-variation-settings: 'wdth' 112, 'wght' 500;
  font-variant-numeric: tabular-nums; white-space: nowrap; letter-spacing: -.01em;
}
.rn-f-sec--libre .rn-p-tabla tbody tr { transition: background .18s ease; }
.rn-f-sec--libre .rn-p-tabla tbody tr:hover { background: color-mix(in srgb, var(--rn-arena) 40%, transparent); }

/* --- 24.4 · Tipologías ----------------------------------------------
   Fichas en rejilla, no pastillas en fila: con seis tipologías la fila
   se partía en dos renglones desiguales. */
.rn-f-tipos {
  /* Tres por fila como máximo: con cuatro, seis tipologías quedaban
     en una fila llena y otra a medias. */
  display: grid; grid-template-columns: repeat(auto-fill, minmax(max(15rem, calc((100% - 1.5rem) / 3)), 1fr));
  gap: .75rem; margin: 0 0 var(--rn-e-5);
}
.rn-f-tipo {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "nom pre" "area pre";
  align-items: center; gap: 3px var(--rn-e-4);
  padding: 15px 18px; cursor: pointer;
  border: 1px solid var(--rn-borde); border-radius: var(--rn-p-r-m);
  background: color-mix(in srgb, var(--rn-arena) 26%, var(--rn-espuma));
  transition: border-color .18s ease, background .18s ease, translate .18s ease, box-shadow .18s ease;
}
.rn-f-tipo:hover { border-color: var(--rn-ocre); translate: 0 -2px; box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--rn-tinta) 40%, transparent); }
.rn-f-tipo__nom { grid-area: nom; font-size: .9875rem; line-height: 1.25; font-variation-settings: 'wdth' 100, 'wght' 600; }
.rn-f-tipo__area { grid-area: area; font-size: .8125rem; color: var(--rn-texto-3); font-variant-numeric: tabular-nums; }
.rn-f-tipo__pre {
  grid-area: pre; font-size: 1.0625rem; color: var(--rn-tinta); white-space: nowrap;
  font-variation-settings: 'wdth' 112, 'wght' 500; font-variant-numeric: tabular-nums;
}
.rn-f-panel { display: none; }
.rn-f-panel__datos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: var(--rn-e-4) var(--rn-e-5); margin: 0 0 var(--rn-e-4);
}
.rn-f-panel__datos > div { margin: 0; padding-bottom: var(--rn-e-3); border-bottom: 1px solid var(--rn-borde); }
.rn-f-panel__datos dt { font-size: .8125rem; color: var(--rn-texto-3); }
.rn-f-panel__datos dd { margin: 4px 0 0; font-variation-settings: 'wdth' 112, 'wght' 500; font-variant-numeric: tabular-nums; font-size: 1.25rem; }
.rn-f-panel__nota { color: var(--rn-texto-2); font-size: .9375rem; max-width: 80ch !important; margin: 0; }

/* El plan de pago y la escala del barrio ya no llevan línea propia:
   la pone la retícula. */
.rn-f-inv, .rn-f-pos { border-top: 1px solid var(--rn-borde); padding-top: clamp(2.25rem, 1.4rem + 2.6vw, 3.75rem); }
.rn-f-inv__antes { justify-content: space-between; }
.rn-f-inv__antes > span { margin-right: auto; }
.rn-f-inv__lista { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--rn-e-5); }
.rn-f-inv__lista b { font-size: clamp(1.1875rem, 1rem + .5vw, 1.5rem); }
.rn-f-inv__barra { height: 18px; }
.rn-f-pos__frase { max-width: 40ch !important; }

/* Qué comprobamos y preguntas: titular a la izquierda, texto a la derecha. */
.rn-f-prueba__nivel { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rn-e-3); margin: var(--rn-e-4) 0 0; }
.rn-f-prueba__nivel > span { font-variation-settings: 'wdth' 100, 'wght' 600; }
.rn-f-sec__txt p { font-size: 1.0625rem; line-height: 1.65; }
.rn-f-prueba__fuente, .rn-f-prueba__riesgo { font-size: .875rem !important; color: var(--rn-texto-2); }
.rn-f-faq details { border-top: 1px solid var(--rn-borde); padding: var(--rn-e-4) 0; }
.rn-f-faq details:last-child { border-bottom: 1px solid var(--rn-borde); }
.rn-f-faq summary {
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: var(--rn-e-4);
  font-size: 1.0625rem; font-variation-settings: 'wdth' 100, 'wght' 600;
}
.rn-f-faq summary::-webkit-details-marker { display: none; }
.rn-f-faq summary::after { content: '+'; color: var(--rn-ocre); font-size: 1.375rem; line-height: 1; transition: transform .2s ease; }
.rn-f-faq details[open] summary::after { content: '–'; }
.rn-f-faq p { margin: var(--rn-e-3) 0 0; color: var(--rn-texto-2); }

/* --- 24.5 · La tarjeta de cotización --------------------------------
   Banda en tinta con el punto vivo, cuerpo en arena, el Sol solo en el
   botón. Se detiene bajo las dos barras. */
.rn-f-cotiza { position: sticky; top: var(--rn-f-tope); align-self: start; z-index: 5; }
.rn-f-cotiza__caja {
  position: relative; overflow: hidden;
  background: var(--rn-arena); border-radius: var(--rn-p-r-l);
  border: 1px solid color-mix(in srgb, var(--rn-ocre) 22%, transparent);
  box-shadow:
    0 1px 0 color-mix(in srgb, var(--rn-tinta) 5%, transparent),
    0 28px 60px -22px color-mix(in srgb, var(--rn-tinta) 42%, transparent);
}
.rn-f-cotiza__banda {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px;
  padding: 12px 22px; background: var(--rn-tinta); color: var(--rn-espuma);
  font-size: .8125rem; line-height: 1.2; font-variation-settings: 'wdth' 112, 'wght' 600;
}
.rn-f-cotiza__banda small { margin-left: auto; font-size: .75rem; color: var(--rn-arena); font-variation-settings: 'wdth' 100, 'wght' 400; }
.rn-f-cotiza__vivo { position: relative; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--rn-sol); }
.rn-f-cotiza__vivo::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: var(--rn-sol); animation: rn-titilar 2.4s ease-out infinite;
}
.rn-f-cotiza__hoja { display: none; padding: 16px 22px 2px; }
.rn-f-cotiza__hoja--sola { display: block; }

/* El selector de la tarjeta: flecha, unidad, flecha. Son <label> de los
   mismos radios de las tipologías: mover aquí es mover allá. */
.rn-f-cotiza__nav {
  display: grid; grid-template-columns: 2.25rem minmax(0, 1fr) 2.25rem;
  align-items: center; gap: 8px; margin: 0 0 14px; max-width: none !important;
}
.rn-f-cotiza__nav--sola { grid-template-columns: minmax(0, 1fr); }
.rn-f-cotiza__flecha {
  display: grid; place-items: center; width: 2.25rem; height: 2.25rem;
  border-radius: 50%; cursor: pointer; color: var(--rn-tinta);
  background: var(--rn-espuma);
  border: 1px solid color-mix(in srgb, var(--rn-ocre) 24%, transparent);
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
.rn-f-cotiza__flecha:hover { background: var(--rn-tinta); color: var(--rn-sol); }
.rn-f-cotiza__flecha:active { transform: scale(.94); }
.rn-f-cotiza__que { display: grid; gap: 2px; text-align: center; min-width: 0; }
.rn-f-cotiza__que b { font-size: .9375rem; line-height: 1.2; font-variation-settings: 'wdth' 100, 'wght' 600; overflow-wrap: anywhere; }
.rn-f-cotiza__que small { font-size: .6875rem; color: var(--rn-tinta-media); font-variant-numeric: tabular-nums; letter-spacing: .04em; }

.rn-f-cotiza__total {
  margin: 0; text-align: center; max-width: none !important;
  font-size: clamp(1.625rem, 1.2rem + 1vw, 2.125rem); line-height: 1.05;
  letter-spacing: -.025em; white-space: nowrap; color: var(--rn-tinta);
  font-variation-settings: 'wdth' 112, 'wght' 500; font-variant-numeric: tabular-nums;
}
.rn-f-cotiza__sub { margin: 6px auto 16px; text-align: center; font-size: .8125rem; line-height: 1.4; color: var(--rn-tinta-media); max-width: 30ch !important; }

/* El botón. El único Sol de la tarjeta. Un destello lo recorre cada
   pocos segundos: se nota sin parpadear. */
.rn-f-cotiza__boton {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 13px 18px; border-radius: var(--rn-r-pastilla);
  background: var(--rn-sol); color: var(--rn-tinta); text-decoration: none;
  box-shadow: 0 10px 22px -10px color-mix(in srgb, var(--rn-ocre) 80%, transparent);
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.rn-f-cotiza__boton > span { display: grid; gap: 1px; text-align: left; font-size: 1rem; line-height: 1.15; font-variation-settings: 'wdth' 112, 'wght' 600; }
.rn-f-cotiza__boton small { font-size: .75rem; opacity: .8; font-variation-settings: 'wdth' 100, 'wght' 400; }
.rn-f-cotiza__boton::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -45%; width: 32%; z-index: -1;
  background: linear-gradient(100deg, transparent, color-mix(in srgb, var(--rn-espuma) 62%, transparent), transparent);
  transform: skewX(-18deg);
  animation: rn-f-destello 5s ease-in-out 1.8s infinite;
}
@keyframes rn-f-destello { 0% { left: -45%; } 22%, 100% { left: 125%; } }
.rn-f-cotiza__boton:hover { background: var(--rn-tinta); color: var(--rn-sol); transform: translateY(-1px); }
.rn-f-cotiza__boton:active { transform: translateY(1px); }

.rn-f-cotiza__plan { margin: 16px 0 0; }
.rn-f-cotiza__plan > div {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--rn-e-3);
  margin: 0; padding: 10px 0; border-top: 1px solid color-mix(in srgb, var(--rn-ocre) 26%, transparent);
}
.rn-f-cotiza__plan dt { font-size: .875rem; color: var(--rn-tinta-media); }
.rn-f-cotiza__plan dd { margin: 0; white-space: nowrap; font-variation-settings: 'wdth' 112, 'wght' 500; font-variant-numeric: tabular-nums; }
.rn-f-cotiza__plan small { font-variation-settings: 'wdth' 100, 'wght' 400; color: var(--rn-tinta-media); }
.rn-f-cotiza__txt { font-variation-settings: 'wdth' 100, 'wght' 400 !important; white-space: normal !important; text-align: right; font-size: .875rem; }
.rn-f-cotiza__saldo { border-top-color: var(--rn-ocre) !important; }
.rn-f-cotiza__saldo dt { color: var(--rn-tinta) !important; font-variation-settings: 'wdth' 100, 'wght' 600; }
.rn-f-cotiza__admin { margin: 2px 0 0; font-size: .75rem; line-height: 1.45; color: var(--rn-tinta-media); max-width: none !important; }
.rn-f-cotiza__mas { margin: 12px 0 4px; max-width: none !important; }
.rn-f-cotiza__mas a {
  font-size: .875rem; color: var(--rn-ocre-honda); text-decoration: none;
  border-bottom: 1px solid currentColor; padding-bottom: 1px;
  font-variation-settings: 'wdth' 112, 'wght' 600;
}
.rn-f-cotiza__mas a:hover { color: var(--rn-tinta); }
.rn-f-cotiza__nota { margin: 0; padding: 12px 22px 18px; font-size: .75rem; line-height: 1.45; color: var(--rn-tinta-media); max-width: none !important; }

/* Pantallas bajas: se recoge lo accesorio para que la tarjeta entera
   quepa bajo las dos barras. */
@media (min-width: 981px) and (max-height: 820px) {
  .rn-f-cotiza__nota, .rn-f-cotiza__admin { display: none; }
  .rn-f-cotiza__hoja { padding-top: 13px; }
  .rn-f-cotiza__nav { margin-bottom: 10px; }
  .rn-f-cotiza__sub { margin-bottom: 12px; }
  .rn-f-cotiza__plan { margin-top: 12px; }
  .rn-f-cotiza__plan > div { padding: 8px 0; }
  .rn-f-cotiza__mas { margin-bottom: 14px; }
}

/* LOS RADIOS NO SE MUEVEN DE LA PANTALLA.
   Al pulsar una flecha de la tarjeta, el navegador enfoca el radio
   escondido y desplaza la página hasta él: estaba arriba del cuerpo, y
   la página saltaba 1.300 px hacia arriba. Fijos dentro de la pantalla,
   enfocarlos no mueve nada. Siguen siendo hermanos de lo que gobiernan,
   que es lo único que pide el combinador. */
.rn-f-radio { position: fixed !important; top: 50%; left: 0; }

/* El enlace entre los radios y todo lo que cambia con ellos. */
.rn-f-radio:nth-of-type(1):checked ~ .rn-f-lectura .rn-f-panel:nth-of-type(1),
.rn-f-radio:nth-of-type(2):checked ~ .rn-f-lectura .rn-f-panel:nth-of-type(2),
.rn-f-radio:nth-of-type(3):checked ~ .rn-f-lectura .rn-f-panel:nth-of-type(3),
.rn-f-radio:nth-of-type(4):checked ~ .rn-f-lectura .rn-f-panel:nth-of-type(4),
.rn-f-radio:nth-of-type(5):checked ~ .rn-f-lectura .rn-f-panel:nth-of-type(5),
.rn-f-radio:nth-of-type(6):checked ~ .rn-f-lectura .rn-f-panel:nth-of-type(6),
.rn-f-radio:nth-of-type(7):checked ~ .rn-f-lectura .rn-f-panel:nth-of-type(7),
.rn-f-radio:nth-of-type(8):checked ~ .rn-f-lectura .rn-f-panel:nth-of-type(8),
.rn-f-radio:nth-of-type(1):checked ~ .rn-f-cotiza .rn-f-cotiza__caja .rn-f-cotiza__hoja:nth-of-type(1),
.rn-f-radio:nth-of-type(2):checked ~ .rn-f-cotiza .rn-f-cotiza__caja .rn-f-cotiza__hoja:nth-of-type(2),
.rn-f-radio:nth-of-type(3):checked ~ .rn-f-cotiza .rn-f-cotiza__caja .rn-f-cotiza__hoja:nth-of-type(3),
.rn-f-radio:nth-of-type(4):checked ~ .rn-f-cotiza .rn-f-cotiza__caja .rn-f-cotiza__hoja:nth-of-type(4),
.rn-f-radio:nth-of-type(5):checked ~ .rn-f-cotiza .rn-f-cotiza__caja .rn-f-cotiza__hoja:nth-of-type(5),
.rn-f-radio:nth-of-type(6):checked ~ .rn-f-cotiza .rn-f-cotiza__caja .rn-f-cotiza__hoja:nth-of-type(6),
.rn-f-radio:nth-of-type(7):checked ~ .rn-f-cotiza .rn-f-cotiza__caja .rn-f-cotiza__hoja:nth-of-type(7),
.rn-f-radio:nth-of-type(8):checked ~ .rn-f-cotiza .rn-f-cotiza__caja .rn-f-cotiza__hoja:nth-of-type(8) { display: block; }

.rn-f-radio:nth-of-type(1):checked ~ .rn-f-lectura .rn-f-tipo:nth-of-type(1),
.rn-f-radio:nth-of-type(2):checked ~ .rn-f-lectura .rn-f-tipo:nth-of-type(2),
.rn-f-radio:nth-of-type(3):checked ~ .rn-f-lectura .rn-f-tipo:nth-of-type(3),
.rn-f-radio:nth-of-type(4):checked ~ .rn-f-lectura .rn-f-tipo:nth-of-type(4),
.rn-f-radio:nth-of-type(5):checked ~ .rn-f-lectura .rn-f-tipo:nth-of-type(5),
.rn-f-radio:nth-of-type(6):checked ~ .rn-f-lectura .rn-f-tipo:nth-of-type(6),
.rn-f-radio:nth-of-type(7):checked ~ .rn-f-lectura .rn-f-tipo:nth-of-type(7),
.rn-f-radio:nth-of-type(8):checked ~ .rn-f-lectura .rn-f-tipo:nth-of-type(8) {
  background: var(--rn-tinta); border-color: var(--rn-tinta); color: var(--rn-espuma);
}
.rn-f-radio:nth-of-type(1):checked ~ .rn-f-lectura .rn-f-tipo:nth-of-type(1) :is(.rn-f-tipo__area, .rn-f-tipo__pre),
.rn-f-radio:nth-of-type(2):checked ~ .rn-f-lectura .rn-f-tipo:nth-of-type(2) :is(.rn-f-tipo__area, .rn-f-tipo__pre),
.rn-f-radio:nth-of-type(3):checked ~ .rn-f-lectura .rn-f-tipo:nth-of-type(3) :is(.rn-f-tipo__area, .rn-f-tipo__pre),
.rn-f-radio:nth-of-type(4):checked ~ .rn-f-lectura .rn-f-tipo:nth-of-type(4) :is(.rn-f-tipo__area, .rn-f-tipo__pre),
.rn-f-radio:nth-of-type(5):checked ~ .rn-f-lectura .rn-f-tipo:nth-of-type(5) :is(.rn-f-tipo__area, .rn-f-tipo__pre),
.rn-f-radio:nth-of-type(6):checked ~ .rn-f-lectura .rn-f-tipo:nth-of-type(6) :is(.rn-f-tipo__area, .rn-f-tipo__pre),
.rn-f-radio:nth-of-type(7):checked ~ .rn-f-lectura .rn-f-tipo:nth-of-type(7) :is(.rn-f-tipo__area, .rn-f-tipo__pre),
.rn-f-radio:nth-of-type(8):checked ~ .rn-f-lectura .rn-f-tipo:nth-of-type(8) :is(.rn-f-tipo__area, .rn-f-tipo__pre) {
  color: var(--rn-sol);
}
.rn-f-radio:focus-visible ~ .rn-f-lectura .rn-f-tipos { outline: 2px solid var(--rn-foco); outline-offset: 6px; }

/* --- 24.6 · El video ya no va en banda aparte: ver el bloque 31. --- */

/* --- 24.7 · El cierre, a sangre y en dos columnas ------------------- */
.rn-f-cierre {
  position: relative; isolation: isolate; overflow: hidden;
  margin: 0; border-radius: 0;
  background: var(--rn-tinta); color: var(--rn-espuma);
  padding-block: clamp(3.5rem, 2rem + 5vw, 7rem);
}
.rn-f-cierre::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image:
    radial-gradient(48% 70% at 0% 100%, color-mix(in srgb, var(--rn-ocre) 46%, transparent), transparent 72%),
    radial-gradient(40% 60% at 100% 0%, color-mix(in srgb, var(--rn-sol) 16%, transparent), transparent 70%);
}
.rn-f-cierre__rejilla {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 1rem + 4vw, 6rem); align-items: center;
}
.rn-f-cierre .rn-titular__ojo { color: var(--rn-sol); }
.rn-f-cierre .rn-titular__ojo::before { background: var(--rn-sol); }
.rn-f-cierre h2 {
  color: var(--rn-espuma); margin: var(--rn-e-2) 0 var(--rn-e-3);
  font-size: clamp(2rem, 1.3rem + 2.6vw, 3.75rem); line-height: 1.02;
  letter-spacing: -.02em; max-width: 14ch;
}
.rn-f-cierre__voz {
  font-family: var(--rn-serif); font-style: italic; font-variation-settings: normal;
  font-size: clamp(1.375rem, 1.1rem + 1vw, 2rem); line-height: 1.15;
  color: var(--rn-sol); margin: 0 0 var(--rn-e-5); max-width: none;
}
.rn-f-cierre__txt { color: var(--rn-arena); font-size: clamp(1rem, .95rem + .2vw, 1.125rem); line-height: 1.65; max-width: 52ch; margin: 0; }
.rn-f-cierre__datos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: var(--rn-e-4) var(--rn-e-5); margin: clamp(1.5rem, 1rem + 1.6vw, 2.5rem) 0;
  padding-block: var(--rn-e-4);
  border-block: 1px solid color-mix(in srgb, var(--rn-espuma) 16%, transparent);
}
.rn-f-cierre__datos > div { margin: 0; }
.rn-f-cierre__datos dt { font-size: .75rem; color: var(--rn-arena); opacity: .8; }
.rn-f-cierre__datos dd {
  margin: 4px 0 0; color: var(--rn-espuma); font-size: 1.125rem; line-height: 1.2;
  font-variation-settings: 'wdth' 112, 'wght' 500; font-variant-numeric: tabular-nums;
}
.rn-f-cierre__accion { margin: 0; max-width: none; }
.rn-f-cierre__boton {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; gap: 14px;
  padding: 15px 32px 15px 26px; border-radius: var(--rn-r-pastilla);
  background: var(--rn-sol); color: var(--rn-tinta); text-decoration: none;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.rn-f-cierre__boton > span { display: grid; gap: 2px; text-align: left; font-size: 1.0625rem; line-height: 1.15; font-variation-settings: 'wdth' 112, 'wght' 600; }
.rn-f-cierre__boton small { font-size: .8125rem; opacity: .8; font-variation-settings: 'wdth' 100, 'wght' 400; }
.rn-f-cierre__boton:hover { background: var(--rn-espuma); color: var(--rn-tinta); transform: translateY(-2px); }
.rn-f-cierre__foto {
  margin: 0; position: relative; overflow: hidden;
  border-radius: var(--rn-p-r-xl); aspect-ratio: 4 / 3;
  background: var(--rn-ocre-honda);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .7);
}
.rn-f-cierre__foto img, .rn-f-cierre__foto svg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* --- 24.8 · Otros proyectos: la rejilla ocupa el ancho -------------- */
.rn-f-otros { padding-block: clamp(3rem, 2rem + 4vw, 5.5rem); }
.rn-f-otros__rejilla { display: grid; gap: var(--rn-e-4); grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }

/* --- 24.9 · La barra del teléfono ----------------------------------- */
.rn-f-movil { display: none; }

/* --- 24.10 · Tableta y teléfono -------------------------------------
   Una sola columna. La lectura se «abre» (display: contents) para que
   la tarjeta pueda colocarse justo después de las tipologías, que es
   donde se escoge la unidad: escoger y ver el precio quedan juntos. */
@media (max-width: 980px) {
  .rn-f-cuerpo { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .rn-f-lectura { display: contents; }
  .rn-f-lectura > * { order: 2; }
  .rn-f-lectura > .rn-f-intro, .rn-f-lectura > #video, .rn-f-lectura > #tipologias { order: 0; }
  .rn-f-cotiza { position: static; order: 1; margin: 0 0 var(--rn-e-5); }
  .rn-f-sec, .rn-f-sec--dato > .rn-f-sec__cab, .rn-f-sec--libre > .rn-p-bloque { grid-template-columns: minmax(0, 1fr); }
  .rn-f-sec > *, .rn-f-sec--dato > .rn-f-sec__cab > *, .rn-f-sec--libre > .rn-p-bloque > * { grid-column: 1 / -1 !important; grid-row: auto !important; }
  .rn-f-sec--dato > .rn-f-sec__cab .rn-f-pie-h2, .rn-f-sec--libre > .rn-p-bloque > h2 { margin-top: 0; }
  .rn-f-sec--libre > .rn-p-bloque > h2 { margin-bottom: var(--rn-e-4); }
  .rn-f-sec__cab .rn-f-pie-h2 { margin-top: var(--rn-e-3) !important; }
  .rn-f-cierre__rejilla { grid-template-columns: minmax(0, 1fr); }
  .rn-f-cierre__foto { order: -1; aspect-ratio: 16 / 10; }
  .rn-f-movil {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    display: flex; align-items: center; justify-content: space-between; gap: var(--rn-e-3);
    margin: 0 var(--rn-p-aire) var(--rn-p-aire);
    padding: 10px 10px 10px 18px; border-radius: var(--rn-r-pastilla);
    background: var(--rn-tinta); color: var(--rn-espuma);
    box-shadow: 0 10px 30px rgba(28, 24, 20, .32);
  }
  .rn-f-movil small { display: block; font-size: .6875rem; color: var(--rn-arena); opacity: .75; }
  .rn-f-movil strong { font-variation-settings: 'wdth' 112, 'wght' 500; font-variant-numeric: tabular-nums; font-size: clamp(.9375rem, .8rem + .6vw, 1.0625rem); white-space: nowrap; }
  .rn-f-movil > span { min-width: 0; }
  .rn-f-movil a {
    display: grid; gap: 1px; text-align: center;
    padding: 10px 20px; background: var(--rn-sol); color: var(--rn-tinta);
    text-decoration: none; white-space: nowrap; border-radius: var(--rn-r-pastilla);
    font-size: .9375rem; line-height: 1.15; font-variation-settings: 'wdth' 112, 'wght' 600;
  }
  .rn-f-movil a small { color: var(--rn-tinta); opacity: .75; font-size: .6875rem; font-variation-settings: 'wdth' 100, 'wght' 400; }
  .rn-p-ficha { padding-bottom: 76px; }
  /* La barra de la ficha ya es el WhatsApp de este proyecto, con su
     mensaje: el botón flotante genérico del sitio se retira para no
     tener dos botones de Sol apilados en la esquina. */
  body:has(.rn-f-movil) .rn-flotante { display: none; }
  .rn-flotante { bottom: 88px !important; }
}
@media (max-width: 560px) {
  .rn-f-linea { grid-auto-flow: row; gap: var(--rn-e-3); }
  .rn-f-medidas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--rn-e-4); }
  .rn-f-tipos { grid-template-columns: minmax(0, 1fr); }
  .rn-f-cotiza__banda small { margin-left: 0; width: 100%; }
  .rn-f-movil a small { display: none; }
}

/* =====================================================================
   25 · EL MOVIMIENTO  ·  9 de octubre de 2026
   ---------------------------------------------------------------------
   Dos tipos, y los dos sin JavaScript:

   1. AL CARGAR. La portada se acerca despacio, el nombre sube, las
      fotos del mosaico se descubren de abajo arriba una tras otra. Se
      ve siempre, en cualquier navegador moderno, nada más entrar.
   2. AL BAJAR. Cada sección entra desde abajo cuando aparece, las
      fichas de tipología y las medidas lo hacen escalonadas, la barra
      del pago crece, el marcador del barrio llega a su sitio y la
      tarjeta de cotización entra desde la derecha.

   Con «reducir movimiento» activado en el sistema —Windows lo trae así
   en muchos equipos— nada se desplaza: las secciones solo se funden.
   Nunca se esconde contenido esperando a un script: donde el navegador
   no soporta animaciones por scroll, todo está ahí desde el principio.

   Cuidado que se mantiene: nada que contenga la tarjeta pegada se mueve;
   solo se mueven sus hijos. Y el movimiento va por las propiedades
   sueltas translate y scale, no por transform: así no pisa el efecto
   de pasar el cursor de las tarjetas, que sí usa transform.
   ===================================================================== */
@keyframes rn-f-acercar { from { scale: 1.14; } to { scale: 1; } }
@keyframes rn-f-subir   { from { opacity: 0; translate: 0 48px; } to { opacity: 1; translate: 0 0; } }
@keyframes rn-f-fundir  { from { opacity: 0; } to { opacity: 1; } }
@keyframes rn-f-descubrir {
  from { clip-path: inset(100% 0 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}
@keyframes rn-f-entrar-der { from { opacity: 0; translate: 56px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes rn-f-marcar { from { opacity: 0; translate: -64px 0; } to { opacity: 1; translate: 0 0; } }

@media (prefers-reduced-motion: no-preference) {
  /* 1 · Al cargar */
  .rn-f-portada__img { animation: rn-f-acercar 2.6s cubic-bezier(.16, .7, .2, 1) backwards; }
  .rn-f-portada__pie .rn-p-miga { animation: rn-f-subir .9s .15s cubic-bezier(.2, .7, .2, 1) backwards; }
  .rn-f-portada h1             { animation: rn-f-subir 1.05s .25s cubic-bezier(.2, .7, .2, 1) backwards; }
  .rn-f-portada__sitio         { animation: rn-f-subir 1.05s .42s cubic-bezier(.2, .7, .2, 1) backwards; }
  .rn-f-play                   { animation: rn-f-fundir .9s .8s ease backwards; }
  .rn-f-tesela                 { animation: rn-f-descubrir 1.15s cubic-bezier(.7, 0, .2, 1) backwards; }
  .rn-f-tesela img             { animation: rn-f-acercar 1.8s cubic-bezier(.16, .7, .2, 1) backwards; }
  .rn-f-tesela:nth-child(2), .rn-f-tesela:nth-child(2) img { animation-delay: .12s; }
  .rn-f-tesela:nth-child(3), .rn-f-tesela:nth-child(3) img { animation-delay: .24s; }
  .rn-f-tesela:nth-child(4), .rn-f-tesela:nth-child(4) img { animation-delay: .36s; }
  .rn-f-tesela:nth-child(5), .rn-f-tesela:nth-child(5) img { animation-delay: .48s; }
  .rn-f-indice                 { animation: rn-f-fundir .8s .5s ease backwards; }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* 2 · Al bajar: cada pieza entra desde abajo. */
    .rn-f-intro > *,
    .rn-f-sec__cab,
    .rn-f-sec--libre > .rn-p-bloque > *,
    .rn-f-sec__txt > *,
    .rn-f-faq details,
    .rn-f-panel__datos > div,
    .rn-f-inv__total, .rn-f-inv__antes, .rn-f-inv__nota,
    .rn-f-pos__frase, .rn-f-pos__escala,
    .rn-f-video,
    .rn-f-cierre__texto > *,
    .rn-f-otros .rn-titular,
    .rn-f-otros__rejilla > *,
    .rn-p-franja__fila > *,
    .rn-p-pag > .rn-seccion, .rn-p-pag > .rn-p-llamado, .rn-p-grupo,
    .rn-p-rejilla > .rn-p-inm {
      animation: rn-f-subir linear both;
      animation-timeline: view();
      animation-range: entry 4% cover 24%;
    }
    /* Escalonadas: la segunda y la tercera de cada fila llegan después. */
    .rn-f-tipo, .rn-f-medidas > div, .rn-f-inv__lista li {
      animation: rn-f-subir linear both;
      animation-timeline: view();
      animation-range: entry 4% cover 22%;
    }
    .rn-f-tipo:nth-child(3n+2), .rn-f-medidas > div:nth-child(3n+2), .rn-f-inv__lista li:nth-child(2),
    .rn-f-otros__rejilla > :nth-child(4n+2) { animation-range: entry 12% cover 30%; }
    .rn-f-tipo:nth-child(3n+3), .rn-f-medidas > div:nth-child(3n+3), .rn-f-inv__lista li:nth-child(3),
    .rn-f-otros__rejilla > :nth-child(4n+3) { animation-range: entry 20% cover 38%; }
    .rn-f-otros__rejilla > :nth-child(4n+4) { animation-range: entry 28% cover 46%; }
    .rn-f-videos__rejilla:not(.es-impar) > .rn-f-video:nth-child(2n),
    .rn-f-videos__rejilla.es-impar > .rn-f-video:nth-child(2n+1):not(:first-child) { animation-range: entry 12% cover 30%; }

    /* La foto del cierre se descubre; el marcador del barrio llega a su
       sitio desde la izquierda; la tarjeta entra desde la derecha. */
    .rn-f-cierre__foto {
      animation: rn-f-descubrir linear both;
      animation-timeline: view(); animation-range: entry 0% cover 40%;
    }
    .rn-f-cierre__foto img { animation: rn-f-acercar linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
    .rn-f-pos__yo { animation: rn-f-marcar linear both; animation-timeline: view(); animation-range: entry 20% cover 45%; }
    .rn-f-pos__marca { animation: rn-f-fundir linear both; animation-timeline: view(); animation-range: entry 10% cover 35%; }
    .rn-f-cotiza__caja { animation: rn-f-entrar-der linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
  }
  @media (prefers-reduced-motion: reduce) {
    .rn-f-intro > *, .rn-f-sec__cab, .rn-f-sec--libre > .rn-p-bloque > *, .rn-f-sec__txt > *,
    .rn-f-faq details, .rn-f-tipo, .rn-f-medidas > div, .rn-f-inv__hoja > *, .rn-f-pos__escala,
    .rn-f-video, .rn-f-cierre__texto > *, .rn-f-cierre__foto, .rn-f-otros__rejilla > *,
    .rn-f-cotiza__caja, .rn-p-franja__fila > * {
      animation: rn-f-fundir linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 18%;
    }
  }
}
@media (prefers-reduced-motion: reduce) {
  .rn-f-cotiza__boton::after, .rn-f-cotiza__vivo::after { animation: none; opacity: 0; }
  .rn-f-tesela img, .rn-f-tipo, .rn-f-cotiza__boton, .rn-f-cierre__boton { transition: none; }
}

/* =====================================================================
   26 · EL ÍNDICE QUE SABE DÓNDE ESTÁ  ·  9 de octubre de 2026
   ---------------------------------------------------------------------
   El enlace de la sección que se está leyendo se enciende —texto en
   tinta y la raya de Sol debajo— sin una línea de JavaScript. Cada
   sección declara su propia línea de tiempo y el índice la escucha.
   La franja de lectura es una línea fina al 32 % del alto de la
   pantalla: por debajo de las dos barras pegadas, donde el ojo lee.
   Donde no hay soporte, el índice queda como un índice normal.
   ===================================================================== */
@supports (timeline-scope: --a) and (animation-timeline: view()) {
  .rn-p-ficha { timeline-scope: --rn-a-fotos, --rn-a-tipologias, --rn-a-pago, --rn-a-barrio, --rn-a-video, --rn-a-comprobado, --rn-a-preguntas; }
  #fotos      { view-timeline: --rn-a-fotos block; }
  #tipologias { view-timeline: --rn-a-tipologias block; }
  #pago       { view-timeline: --rn-a-pago block; }
  #barrio     { view-timeline: --rn-a-barrio block; }
  #video      { view-timeline: --rn-a-video block; }
  #comprobado { view-timeline: --rn-a-comprobado block; }
  #preguntas  { view-timeline: --rn-a-preguntas block; }
  :is(#fotos, #tipologias, #pago, #barrio, #video, #comprobado, #preguntas) { view-timeline-inset: 32% 67.5%; }

  @keyframes rn-f-encendido { from, to { color: var(--rn-tinta); } }
  @keyframes rn-f-raya      { from, to { transform: scaleX(1); } }
  .rn-f-indice__a          { animation: rn-f-encendido linear none; }
  .rn-f-indice__a::after   { animation: rn-f-raya linear none; }
  .rn-f-indice__a--fotos,      .rn-f-indice__a--fotos::after      { animation-timeline: --rn-a-fotos; }
  .rn-f-indice__a--tipologias, .rn-f-indice__a--tipologias::after { animation-timeline: --rn-a-tipologias; }
  .rn-f-indice__a--pago,       .rn-f-indice__a--pago::after       { animation-timeline: --rn-a-pago; }
  .rn-f-indice__a--barrio,     .rn-f-indice__a--barrio::after     { animation-timeline: --rn-a-barrio; }
  .rn-f-indice__a--video,      .rn-f-indice__a--video::after      { animation-timeline: --rn-a-video; }
  .rn-f-indice__a--comprobado, .rn-f-indice__a--comprobado::after { animation-timeline: --rn-a-comprobado; }
  .rn-f-indice__a--preguntas,  .rn-f-indice__a--preguntas::after  { animation-timeline: --rn-a-preguntas; }
}

/* =====================================================================
   27 · EL AVISO, EN FRANJA  ·  9 de octubre de 2026
   ---------------------------------------------------------------------
   Antes era un recuadro estrecho con borde a la izquierda, centrado al
   final de la página: parecía pegado de un blog. Ahora es una banda de
   la página, a todo el ancho y en tres columnas, justo antes del pie.
   ===================================================================== */
.rn-p-franja {
  background: var(--rn-arena);
  border-top: 1px solid color-mix(in srgb, var(--rn-ocre) 22%, transparent);
  padding-block: clamp(1.75rem, 1.2rem + 1.6vw, 2.75rem);
}
.rn-p-franja__fila {
  display: grid; align-items: start;
  grid-template-columns: minmax(10rem, .62fr) minmax(0, 2.4fr) minmax(15rem, 1fr);
  gap: clamp(1.25rem, .8rem + 2vw, 3.5rem);
}
.rn-p-franja p { margin: 0; max-width: none; font-size: .875rem; line-height: 1.62; color: var(--rn-tinta-media); }
.rn-p-franja__t { color: var(--rn-tinta) !important; font-size: .9375rem !important; line-height: 1.3 !important; font-variation-settings: 'wdth' 112, 'wght' 600; }
.rn-p-franja__dato { padding-left: clamp(1rem, .6rem + 1.2vw, 2rem); border-left: 1px solid color-mix(in srgb, var(--rn-ocre) 30%, transparent); }
.rn-p-franja a { color: var(--rn-ocre-honda); text-underline-offset: 3px; overflow-wrap: anywhere; }
.rn-p-franja a:hover { color: var(--rn-tinta); }
@media (max-width: 980px) {
  .rn-p-franja__fila { grid-template-columns: minmax(0, 1fr); gap: var(--rn-e-3); }
  .rn-p-franja__dato { padding-left: 0; border-left: 0; padding-top: var(--rn-e-3); border-top: 1px solid color-mix(in srgb, var(--rn-ocre) 30%, transparent); }
}

/* =====================================================================
   28 · LA BARRA: EL RÓTULO Y LOS CAMPOS EN EL TELÉFONO  ·  9 oct 2026
   ---------------------------------------------------------------------
   1. El rótulo se veía chico y lavado. Ahora es el titular de la barra:
      más grande, en ocre hondo (7,11:1 sobre espuma) y con el punto
      vivo de la marca delante. Lo que crece la letra lo devuelve el
      relleno de arriba: la barra mide lo mismo.
   2. En el teléfono los campos eran espuma sobre espuma: no se veía
      dónde llenar. Ahora cada uno es una caja visible, con el rótulo
      dentro y arriba, y van en dos columnas: la barra mide la mitad.
   ===================================================================== */
.rn-buscador { padding-top: calc(var(--rn-e-5) - 8px); }
.rn-buscador__rotulo {
  font-size: clamp(1.625rem, 1.25rem + 1vw, 2.125rem);
  color: var(--rn-ocre-honda); gap: 14px; letter-spacing: -.005em;
}
.rn-buscador__rotulo::after { opacity: .35; width: 44px; }
.rn-buscador__rotulo .rn-punto { width: 10px; height: 10px; background: var(--rn-sol); }
.rn-p-bus .rn-buscador__rotulo { flex: 1; }
.rn-p-bus .rn-buscador__rotulo::after { flex: 1; }

@media (max-width: 760px) {
  .rn-buscador { padding-top: var(--rn-e-4); }
  .rn-buscador__rotulo { font-size: 1.625rem; padding-inline: 2px; }
  .rn-buscador .rn-campo {
    min-height: 0; padding: 9px 14px 10px; gap: 3px;
    background: color-mix(in srgb, var(--rn-arena) 42%, var(--rn-espuma));
    border: 1px solid color-mix(in srgb, var(--rn-ocre) 24%, transparent);
    border-radius: 14px;
  }
  .rn-buscador .rn-campo:focus-within { border-color: var(--rn-ocre); background: var(--rn-espuma); }
  .rn-buscador .rn-campo__et { font-size: .75rem; color: var(--rn-tinta-media); font-variation-settings: 'wdth' 100, 'wght' 600; }
  .rn-buscador .rn-campo__dato { font-size: 1rem; color: var(--rn-tinta); }

  .rn-p-bus .rn-buscador__caja { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .rn-p-bus .rn-campo--donde { grid-column: 1 / -1; }
  .rn-p-bus select {
    padding: 0 1.5rem 0 0; background-position: right 0 center; background-size: 14px 14px;
    font-size: 1rem; font-variation-settings: 'wdth' 100, 'wght' 600; color: var(--rn-tinta);
  }
  .rn-p-bus .rn-buscador__ir { grid-column: auto; align-self: stretch; min-height: 54px; padding: 0 14px; }
}

/* El fondo del héroe del índice: la imagen va siempre debajo del video. */
.rn-i-heroe__cartel { position: absolute; inset: 0; display: block; }
.rn-i-heroe__cartel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rn-i-heroe__fondo video { position: absolute; inset: 0; }


/* =====================================================================
   29 · /proyectos/: EL ESLOGAN Y LA ENTRADA  ·  9 de octubre de 2026
   ---------------------------------------------------------------------
   El eslogan se veía pequeño frente a un titular de cuatro líneas de
   alto, y la entrada era un párrafo largo y gris. Ahora el eslogan es
   la segunda voz del héroe —grande, en Sol— y la entrada, más corta,
   va en espuma plena a un tamaño que se lee sin esfuerzo.
   ===================================================================== */
.rn-i-heroe__voz {
  font-size: clamp(1.625rem, 1.05rem + 2.1vw, 2.875rem);
  line-height: 1.08; letter-spacing: -.005em; text-wrap: balance;
  margin-bottom: clamp(1.1rem, .8rem + 1.2vw, 1.75rem);
}
.rn-i-heroe__directa {
  max-width: 50ch; text-wrap: pretty;
  font-size: clamp(1.0625rem, .98rem + .35vw, 1.25rem); line-height: 1.5;
  color: color-mix(in srgb, var(--rn-espuma) 94%, transparent);
}

/* =====================================================================
   30 · LA BANDA DE PROYECTOS DEL INICIO: SU FONDO  ·  9 oct 2026
   ---------------------------------------------------------------------
   Obra al atardecer: la horizontal (4:3) en el escritorio, que es la
   proporción de la banda, y la vertical en el teléfono. El velo anterior
   tapaba la foto casi entera (90 % de tinta): ahora deja ver el sol y
   las grúas, y sigue oscuro donde hay texto —arriba, a la izquierda y
   abajo, donde están las tarjetas—.
   En el teléfono la banda mide más de dos pantallas: la foto ocupa la
   parte de arriba, donde está el titular, y se funde en tinta antes de
   las tarjetas, en vez de estirarse hasta volverse una franja borrosa.
   ===================================================================== */
.rn-proyectos__fondo picture { display: block; width: 100%; height: 100%; }
.rn-proyectos .rn-proyectos__fondo img { object-position: 30% 45%; }
.rn-proyectos .rn-proyectos__fondo::after {
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--rn-tinta) 55%, transparent) 0%,
      color-mix(in srgb, var(--rn-tinta) 10%, transparent) 55%,
      transparent 75%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--rn-tinta) 82%, transparent) 0%,
      color-mix(in srgb, var(--rn-tinta) 48%, transparent) 26%,
      color-mix(in srgb, var(--rn-tinta) 62%, transparent) 52%,
      color-mix(in srgb, var(--rn-tinta) 90%, transparent) 78%,
      var(--rn-tinta) 100%);
}
@media (max-width: 760px) {
  .rn-proyectos .rn-proyectos__fondo { bottom: auto; height: min(165vh, 1500px); }
  .rn-proyectos .rn-proyectos__fondo img { object-position: 24% 50%; }
  .rn-proyectos .rn-proyectos__fondo::after {
    background: linear-gradient(180deg,
      color-mix(in srgb, var(--rn-tinta) 78%, transparent) 0%,
      color-mix(in srgb, var(--rn-tinta) 42%, transparent) 22%,
      color-mix(in srgb, var(--rn-tinta) 58%, transparent) 50%,
      color-mix(in srgb, var(--rn-tinta) 88%, transparent) 78%,
      var(--rn-tinta) 100%);
  }
}

/* =====================================================================
   31 · LA GALERÍA DE VIDEOS DE LA FICHA  ·  9 de octubre de 2026
   ---------------------------------------------------------------------
   Uno: a todo el ancho. Dos o más: dos columnas, y si son impares el
   primero va a todo el ancho y los demás en pares. Así 1, 2, 3, 4, 5 o
   6 videos quedan siempre simétricos y cada uno con tamaño para verse.
   En el teléfono, uno debajo del otro.
   ===================================================================== */
.rn-f-videos__rejilla {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.25rem, .8rem + 1.4vw, 2rem) clamp(.875rem, .5rem + 1vw, 1.5rem);
}
.rn-f-videos__rejilla--n1 { grid-template-columns: minmax(0, 1fr); }
.rn-f-videos__rejilla.es-impar > :first-child { grid-column: 1 / -1; }
.rn-f-video { margin: 0; min-width: 0; }
.rn-f-video__marco {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: var(--rn-p-r-l); background: var(--rn-tinta);
  box-shadow: 0 26px 54px -30px color-mix(in srgb, var(--rn-tinta) 60%, transparent);
  transition: translate .3s cubic-bezier(.2, .7, .2, 1), box-shadow .3s ease;
}
.rn-f-video:hover .rn-f-video__marco {
  translate: 0 -3px;
  box-shadow: 0 34px 64px -28px color-mix(in srgb, var(--rn-tinta) 70%, transparent);
}
.rn-f-video__marco iframe, .rn-f-video__marco video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border: 0; display: block; object-fit: cover;
}
.rn-f-video figcaption { display: flex; align-items: baseline; gap: .75rem; margin-top: .9rem; }
.rn-f-video__n {
  flex: none; font-size: .8125rem; letter-spacing: .08em; color: var(--rn-ocre);
  font-variant-numeric: tabular-nums; font-variation-settings: 'wdth' 112, 'wght' 600;
}
.rn-f-video figcaption b { font-size: 1.0625rem; line-height: 1.3; font-variation-settings: 'wdth' 100, 'wght' 600; }
.rn-f-videos .rn-f-inv__nota { margin-top: var(--rn-e-5); }
@media (max-width: 640px) {
  .rn-f-videos__rejilla { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .rn-f-video__marco { transition: none; }
  .rn-f-video:hover .rn-f-video__marco { translate: none; }
}

/* =====================================================================
   32 · LOS ACCESOS AL PIE DE LA BARRA  ·  9 de octubre de 2026
   ---------------------------------------------------------------------
   Son enlaces reales a cada barrio —sirven al comprador y le dicen a
   Google y a los modelos de IA qué barrios tienen más obra—, pero se
   veían como texto suelto con un número enorme al lado. Ahora son
   pastillas que se ven pulsables: borde, fondo, la cifra en una
   etiqueta y una flecha que se mueve al pasar el cursor.
   ===================================================================== */
.rn-buscador__pie { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; line-height: 1.2; }
.rn-buscador__pie > span {
  margin-right: 6px; font-size: .8125rem; color: var(--rn-tinta-media);
  font-variation-settings: 'wdth' 112, 'wght' 600;
}
.rn-buscador__pie a {
  display: inline-flex; align-items: center; gap: 9px; margin: 0;
  padding: 6px 10px 6px 15px; border-radius: var(--rn-r-pastilla);
  border: 1px solid color-mix(in srgb, var(--rn-ocre) 26%, transparent);
  background: color-mix(in srgb, var(--rn-arena) 34%, var(--rn-espuma));
  color: var(--rn-tinta); text-decoration: none; white-space: nowrap;
  font-size: .875rem; font-variation-settings: 'wdth' 100, 'wght' 600;
  transition: border-color .18s ease, background .18s ease, translate .18s ease, box-shadow .18s ease;
}
.rn-buscador__pie a .rn-cifra {
  display: inline-grid; place-items: center; min-width: 26px; height: 22px; padding: 0 7px;
  border-radius: var(--rn-r-pastilla); background: var(--rn-tinta); color: var(--rn-espuma);
  font-size: .75rem !important; line-height: 1; letter-spacing: 0; opacity: 1;
  font-variation-settings: 'wdth' 112, 'wght' 600; transition: background .18s ease;
}
.rn-buscador__pie a::after {
  content: ""; flex: none; width: 13px; height: 13px; background: currentColor; opacity: .5;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: translate .18s ease, opacity .18s ease;
}
.rn-buscador__pie a:hover, .rn-buscador__pie a:focus-visible {
  border-color: var(--rn-ocre); background: var(--rn-arena); translate: 0 -1px;
  box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--rn-tinta) 45%, transparent);
}
.rn-buscador__pie a:hover .rn-cifra { background: var(--rn-ocre-honda); }
.rn-buscador__pie a:hover::after { translate: 3px 0; opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .rn-buscador__pie a, .rn-buscador__pie a::after { transition: none; }
}

/* 33 · SIN MIGAS DE PAN VISIBLES · 9 de octubre de 2026, decisión del
   dueño. Se ocultan también las del resto del sitio (.rn-migas). La ruta
   sigue en el JSON-LD de cada página. */
.rn-migas, .rn-p-miga { display: none !important; }