/* ══════════════════════════════════════════════════════════════════════════
   RECO-LAB · CAPA DE CORRECCIÓN DEL PROPIETARIO · 1 SEP 2026
   Decimotercera capa. Se carga LA ÚLTIMA, después de
   `polish-2026-09-01.css`. Quitar las dos líneas que la cargan revierte
   este paso y nada más, igual que en todas las pasadas anteriores.

   Cubre tres defectos confirmados en revisión visual del propietario:

     §1  Las fichas de proyecto de la portada alineaban su divisoria, su
         línea de chips y su línea de estado en cuatro alturas distintas.
     §2  La navegación local del Proyecto 02 se leía como un recuadro
         dibujado a mano, con tipografía pequeña, rótulos pegados al
         borde y una banda desprendida bajo la cabecera adherida.
     §3  El bloque de lectura del UPI era una lámina especial que rompía
         la página; se retira y su aclaración vuelve al cuerpo editorial.

   Regla de tokens de esta casa: `--sh-*` está acotado a
   `.rlx-hdr / .rlx-drawer / .rlx-ftr`, así que fuera de esos tres
   contenedores lee vacío. Todo lo que aquí necesita el color de la
   cabecera lo declara LITERAL y por mood, que es lo mismo que hizo la
   capa de pulido con `.rl-upi-read`.
   ══════════════════════════════════════════════════════════════════════════ */


/* ══ §1 · FICHAS DE PROYECTO · PIE ALINEADO ═══════════════════════════════
   El pie de cada ficha se maquetaba en fila: chips a la izquierda, acción
   a la derecha. Con textos de distinto largo los chips ocupaban el ancho
   completo en unas fichas y no en otras, así que la acción caía a una
   segunda línea sólo en algunas. MEDIDO a 1440px: en la segunda fila las
   dos divisorias quedaban a 4336px y 4377px, 41px de desfase entre dos
   fichas de idéntica altura.

   La corrección es estructural, no por ficha:
     · el cuerpo crece y empuja el pie con `margin-top:auto`;
     · el pie es SIEMPRE columna, de modo que chips y estado ocupan
       cada uno su línea en las cuatro fichas por igual;
     · la zona de acción declara una altura mínima común, con lo que la
       divisoria superior del pie cae a la misma altura en todas.        */

.project .project-link,
.project > a.project-link{
  display:flex; flex-direction:column;
}
.project .project-body{
  display:flex; flex-direction:column; flex:1 1 auto; min-height:0;
}
/* El bloque de texto crece; el pie queda abajo. */
.project .project-body > p{ margin-bottom:20px; }
.project .project-foot{
  margin-top:auto;
  display:flex; flex-direction:column; align-items:stretch;
  gap:12px;
  padding-top:16px;
}
/* Chips: una línea propia, sin competir por el ancho con la acción. */
.project .project-foot .chips{
  display:flex; flex-wrap:wrap; gap:8px; width:100%;
}
/* Zona de acción: misma caja en las cuatro fichas, ancla abajo, de modo
   que la línea base del CTA y la del estado coinciden. */
.project .project-foot .project-cta,
.project .project-foot .rl-state{
  display:flex; width:100%; min-height:40px;
  flex-direction:column; justify-content:flex-end; gap:3px;
}
.project .project-foot .project-cta{ justify-content:center; }

/* §1b · Proyectos aún no publicados.
   No se atenúan -- el encargo lo prohíbe expresamente y el estado debe
   leerse. Lo que se hace es que NO parezcan operables: sin cursor de
   enlace, sin realce al pasar, y sin descendientes tabulables (de eso ya
   se ocupa `polish-2026-09-01.js`, que les quita href y tabindex). */
.project.is-record .project-link{ cursor:default; }
.project.is-record .project-link:hover{ transform:none; }
.project.is-record .rl-state{ opacity:1; }
.project.is-record .rl-state-k{
  display:inline-flex; align-items:center; gap:7px;
}
/* Punto de estado: señal de forma además de la de color. */
.project.is-record .rl-state-k::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:currentColor; opacity:.62; flex:0 0 auto;
}


/* ══ §2 · NAVEGACIÓN LOCAL DEL PROYECTO 02 ════════════════════════════════
   La arquitectura de información se conserva intacta: las mismas cuatro
   anclas, el mismo orden, el mismo `aria-current`, el mismo
   desplazamiento horizontal en móvil. Cambia SÓLO el vestido.

   El defecto de fondo era de identidad: la barra se pintaba con el fondo
   de la PÁGINA y se cerraba con una divisoria arriba y otra abajo. Al
   quedar adherida bajo la cabecera -- que es una lámina oscura -- el
   resultado era una segunda lámina de otro color con un filete gris en
   la costura: la «banda desprendida». La barra pasa a llevar la lámina
   DE LA CABECERA, de modo que la costura desaparece porque los dos
   planos son el mismo plano.                                            */

.rl-modnav{
  /* Lámina de cromo, no de página. Literal y por mood: `--sh-bg` no
     existe fuera de los tres contenedores del shell. */
  --rlmn-plate:#1d2d3d;
  --rlmn-ink:#ffffff;
  --rlmn-dim:rgba(255,255,255,0.66);
  --rlmn-key:#8fb2d4;
  --rlmn-line:rgba(255,255,255,0.14);
  --rlmn-hover:rgba(255,255,255,0.08);
  --rlmn-on:rgba(255,255,255,0.13);

  background:var(--rlmn-plate);
  /* Sin recuadro: ni filete superior ni caja. Sólo un cierre inferior
     muy tenue que separa el cromo del contenido. */
  border-top:0;
  border-bottom:1px solid rgba(0,0,0,0.28);
  margin:0 0 34px;
}
html[data-theme="dark"] .rl-modnav{ --rlmn-plate:#132029; --rlmn-key:#7ea6cc; }
html[data-theme="night"] .rl-modnav{ --rlmn-plate:#050a10; --rlmn-key:#6d93b8; }

.rl-modnav-inner{
  display:flex; align-items:stretch; gap:6px;
  padding:9px 0;
}

/* «Módulos» no toca ni la divisoria ni el margen: 18px a cada lado del
   filete, que es el aire que pedía el encargo. */
.rl-modnav-lbl{
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:11.5px; font-weight:600; letter-spacing:0.15em;
  text-transform:uppercase; color:var(--rlmn-dim);
  padding:0 18px 0 2px; margin-right:16px;
  border-right:1px solid var(--rlmn-line);
  white-space:nowrap;
}

.rl-modnav a{
  display:flex; flex-direction:column; justify-content:center; gap:2px;
  min-height:52px; padding:10px 18px;
  border-radius:8px; border:1px solid transparent;
  text-decoration:none;
  transition:background .18s ease, border-color .18s ease, color .18s ease;
}
/* Tipografía legible: la sigla y la etiqueta suben de 11,5/12,5 a 12/13,5,
   que es donde la etiqueta expandida deja de leerse como nota al pie. */
.rl-modnav .k{
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:12px; font-weight:600; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--rlmn-key);
  white-space:nowrap;
}
.rl-modnav .n{
  font-family:'IBM Plex Sans',system-ui,sans-serif;
  font-size:13.5px; font-weight:400; line-height:1.32;
  color:var(--rlmn-dim);
  white-space:nowrap;
}
.rl-modnav a:hover{
  background:var(--rlmn-hover);
  border-color:var(--rlmn-line);
}
.rl-modnav a:hover .n{ color:var(--rlmn-ink); }

/* Estado actual: color MÁS forma, como en la capa de pulido. */
.rl-modnav a[aria-current="true"]{
  background:var(--rlmn-on);
  border-color:rgba(255,255,255,0.26);
}
.rl-modnav a[aria-current="true"] .n{ color:var(--rlmn-ink); font-weight:500; }
.rl-modnav a[aria-current="true"] .k{ color:var(--rlmn-ink); }
.rl-modnav a[aria-current="true"] .k::before{ content:"\25B8\00A0"; }

.rl-modnav a:focus-visible{
  outline:2px solid #ffffff; outline-offset:-2px;
}

@media (min-width:768px){
  /* La barra empieza DEBAJO de la cabecera. La altura se lee medida:
     `--rl-hdr-h` la publica site.js y cambia por idioma y por corte. */
  .rl-modnav{ position:sticky; top:var(--rl-hdr-h,84px); z-index:60; }
  .rl-modnav-lbl{ display:flex; align-items:center; }
  .rl-modnav-inner{ gap:4px; overflow:visible; }
  .rl-modnav a{ flex:1 1 0; min-width:0; }
  .rl-modnav .n{ white-space:normal; }
}

/* Horizontal y corto: la barra adherida robaría demasiado alto útil. */
@media (max-height:560px) and (orientation:landscape){
  .rl-modnav{ position:static; }
}

@media (max-width:767px){
  .rl-modnav{ position:relative; }
  .rl-modnav-inner{
    overflow-x:auto; overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
    scroll-snap-type:x proximity;
    padding:9px 2px; scroll-padding-left:2px;
  }
  .rl-modnav a{ flex:0 0 auto; scroll-snap-align:start; }
  .rl-modnav .n{ white-space:nowrap; }
  .rl-modnav-lbl{ padding-right:14px; margin-right:12px; }
}

@media (prefers-reduced-motion:reduce){
  .rl-modnav a{ transition:none; }
}


/* ══ §2b · LISTA EDITORIAL DENTRO DE LA NARRATIVA ════════════════════════
   `.proj-narrative` sólo daba estilo a sus `> p`, así que una lista dentro
   quedaba sin tipografía de la casa. Los cuatro módulos se enuncian ahora
   como lista semántica, y hereda el cuerpo del párrafo que la precede.   */
.proj-narrative .rl-narr-list{
  margin:14px 0 0; padding:0; list-style:none;
  max-width:88ch;
}
.proj-narrative .rl-narr-list li{
  position:relative;
  padding-left:20px; margin:0 0 9px;
  font-size:inherit; line-height:inherit; color:inherit;
}
.proj-narrative .rl-narr-list li:last-child{ margin-bottom:0; }
.proj-narrative .rl-narr-list li::before{
  content:""; position:absolute; left:3px; top:0.62em;
  width:6px; height:1px; background:currentColor; opacity:.5;
}
.proj-narrative .rl-narr-list b{ font-weight:600; }


/* ══ §3 · EL BLOQUE ESPECIAL DEL UPI YA NO EXISTE ═════════════════════════
   `.rl-upi-read` se retiró del marcado de `project-02-housing.html` y su
   aclaración volvió al cuerpo editorial de la sección, con la tipografía
   normal de la página. Estas dos reglas son la red de seguridad para
   cualquier copia en caché o exportada que aún lo lleve: si aparece, no
   se pinta como lámina.                                                 */
.rl-upi-read{ display:none !important; }
.rl-upi-read .isnt{ display:none !important; }