/* ==========================================================================
   MIND MIAMI · REAL ESTATE — capa de la vertical (re.css)

   Se carga SIEMPRE DESPUÉS de system.css + system-pages.css + art.css.
   Archivo NUEVO: no reescribe ni una regla heredada. Aquí vive únicamente lo
   que el sistema no tiene porque no lo necesitaba: el hero a dos columnas de
   una home de vertical, la pila de planos de arte inmobiliario, las tarjetas
   de audiencia, las fases del lanzamiento y la rejilla de servicios.

   REGLAS QUE SE RESPETAN (docs/SYSTEM-STYLE.md)
   · Radius 0 en todo. Filetes --line-ink sobre papel, --line-paper sobre navy.
   · Cian NUNCA como texto pequeño sobre papel. SIN EXCEPCIÓN: ver §0.
   · Ninguna animación propia sin su guard de prefers-reduced-motion.
   · Targets ≥44px.
   ========================================================================== */

/* ==========================================================================
   0 · EL ACENTO SOBRE SUPERFICIE CLARA — --cyan-ink

   #06d6dd sobre papel da 1.64:1 y sobre papel-2 1.51:1. SYSTEM-STYLE
   §Accesibilidad lo prohíbe y AA pide 4.5:1 en texto pequeño. Hasta ahora el
   sistema hacía una excepción con los ordinales decorativos (.section-kicker
   span); esa excepción no se sostiene: son 16 instancias por página y el
   número acaba leyéndose más flojo que la etiqueta gris que tiene al lado,
   o sea la jerarquía invertida.

   La salida NO es pasar el ordinal a tinta —eso mata el acento de marca— sino
   oscurecer el cian lo justo para que aguante sobre claro conservando el tono:
   #0a6e73 es el mismo hue (~184°), da 5.48:1 sobre papel y 5.07:1 sobre
   papel-2. Sobre navy el acento sigue siendo #06d6dd sin tocar.

   REGLA: cian brillante = superficie oscura. --cyan-ink = superficie clara.

   PORTABLE: este bloque es autocontenido y debería subir tal cual a
   css/system.css del sitio hermano, que arrastra exactamente el mismo fallo
   en .section-kicker span. Mientras no suba, la vertical queda AA y el
   hermano no; es divergencia consciente, no deriva.
   ========================================================================== */
:root { --cyan-ink: #0a6e73; }

/* El ordinal del kicker sobre papel. .light marca los kickers sobre navy
   (59/59 verificados), así que :not(.light) aísla justo los de superficie
   clara sin tocar los oscuros. */
.section-kicker:not(.light) span:first-child { color: var(--cyan-ink); }

/* ==========================================================================
   1 · PILA DE PLANOS DE ARTE — el arte inmobiliario en capas
   Las escenas de re-scenes.svg vienen en tres capas (fondo / medio / primer
   plano). Se inlinean como TRES <svg> hermanos, cada uno dentro de su propio
   .art-plane HTML, apilados en el mismo hueco. El parallax de motion2 escribe
   el transform en el <div>, NUNCA en un <g> del SVG: system-pages.css §13.7
   midió 14 layouts por pasada de scroll con el transform dentro del SVG y 0
   con el plano en HTML (Blink recalcula la geometría del subárbol SVG).
   ========================================================================== */
.re-artstack {
  position: relative;
  aspect-ratio: 8 / 5;
  width: 100%;
  margin: 0;
  color: inherit;                     /* el arte se tiñe por currentColor */
}
.re-artstack > .art-plane { position: absolute; inset: 0; }
.re-artstack .art-scene { width: 100%; height: 100%; }

/* Escena de un solo plano (paneles y tarjetas). */
.re-art { margin: 0; color: inherit; }
.re-art .art-scene { width: 100%; height: auto; }

/* Piezas sueltas del sprite (rp-*, viewBox 64) usadas como icono grande. */
.re-piece { display: block; width: var(--re-piece, 44px); height: var(--re-piece, 44px); flex: none; }

/* ==========================================================================
   2 · HERO DE LA VERTICAL — dos columnas dentro de .page-hero-body
   ========================================================================== */
.re-hero {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  gap: clamp(28px, 4vw, 72px);
  align-items: center;
}
.re-hero-copy { min-width: 0; }
/* El intro del hero no está limitado a 560px aquí: ya lo limita la columna. */
.re-hero-copy .page-hero-intro { max-width: 52ch; }
.re-hero-art { min-width: 0; color: var(--text-on-navy); opacity: .92; }

/* --------------------------------------------------------------------------
   PIE DEL HERO — el repartidor a las cuatro audiencias.
   Hace doble trabajo: en escritorio es el índice de la vertical bajo el
   titular; por debajo de 1080px es la ÚNICA navegación disponible junto al
   directorio del footer, porque ahí se apaga .nav-links (§13: con seis
   destinos y el logo sin aplastar, la fila deja de caber). Por eso los
   targets son de 44px
   y por eso a partir de 700px la fila se desliza en horizontal en vez de
   romper en tres líneas dentro del hero.
   -------------------------------------------------------------------------- */
.re-hero-foot {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 2px clamp(11px, 1.15vw, 17px);
  margin-top: clamp(22px, 3.4vh, 38px);
  padding-top: clamp(16px, 2.4vh, 26px);
  border-top: 1px solid var(--line-paper);
  /* .12em y no .18em: en español la fila es «TRABAJAMOS PARA · AGENTES ·
     EQUIPOS · DESARROLLADORES · PROPERTY MGMT» y con el tracking ancho se
     partía en dos líneas dejando un enlace huérfano bajo el titular. */
  font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted-on-navy);
}
.re-hero-foot > i { font-style: normal; color: var(--cyan); font-size: 7px; }
.re-hero-foot a {
  display: inline-flex; align-items: center;
  min-height: 44px;
  color: var(--text-on-navy);
  box-shadow: inset 0 -1px rgba(6, 214, 221, .6);
  transition: color .2s ease, box-shadow .2s ease;
}
.re-hero-foot a:hover,
.re-hero-foot a:focus-visible { color: var(--cyan); box-shadow: inset 0 -1px var(--cyan); }

/* Apilado, el orden del DOM dejaba el repartidor —con su filete superior, que
   lee como final de bloque— ENTRE los CTA y el dibujo de la torre: el arte
   quedaba colgando debajo de una línea de cierre, como si perteneciera a la
   sección siguiente. El pie es el último hijo de .re-hero-copy, así que no se
   puede reordenar contra su tío desde la rejilla; con display:contents la
   copia deja de pintar caja y sus hijos pasan a ser hermanos del arte, que es
   lo único que hace falta para colocar el pie al final. */
@media (max-width: 1080px) {
  /* gap:0 a propósito: al desaparecer la caja de .re-hero-copy sus hijos
     pasan a ser items de este flex y un gap los separaría a todos. El ritmo
     interno del bloque ya lo llevan sus propios márgenes; lo único que hay
     que devolver es la calle que la rejilla ponía delante del arte. */
  .re-hero { display: flex; flex-direction: column; gap: 0; }
  .re-hero-copy { display: contents; }
  .re-hero-art { max-width: 560px; order: 5; margin-top: clamp(26px, 5vw, 40px); }
  .re-hero-foot { order: 9; }
}
/* A 390px la fila medía 509px dentro de 368: «Property mgmt» —una de las
   cuatro páginas de audiencia— quedaba fuera de pantalla, en un carrusel sin
   ninguna señal de que se podía arrastrar. Antes que esconder un enlace se
   parte en dos líneas: se baja el tracking y el rótulo «We work for» ocupa
   toda la primera, de modo que los cuatro enlaces caen juntos debajo. */
@media (max-width: 700px) {
  .re-hero-foot {
    flex-wrap: wrap;
    gap: 0 clamp(9px, 2.6vw, 14px);
    letter-spacing: .06em;
  }
  .re-hero-foot > * { flex: none; white-space: nowrap; }
  .re-hero-foot > span:first-child { flex-basis: 100%; margin-bottom: 2px; }
}

/* ==========================================================================
   3 · SECCIONES — envolturas de ritmo (el sistema no trae genéricas)
   ========================================================================== */
.re-section { padding: var(--sec-y) var(--pad-x); }
.re-section--navy { background: var(--navy); color: var(--text-on-navy); }
.re-section--navy .services-intro h2 { color: #fff; }
.re-section--navy .services-intro h2 em { color: var(--muted-on-navy); }
.re-section--navy .services-intro > p { color: var(--muted-on-navy); }
.re-section--paper-2 { background: var(--paper-2); }

/* Cabecera + arte a la derecha, unidos por la línea de base. Misma idea que
   .section-spread de system-pages.css, pero con arte vectorial en vez de foto
   (y por eso centrado, no anclado abajo: el dibujo no tiene línea de suelo). */
/* .86fr y no menos: las escenas están dibujadas a 800 unidades de ancho con
   filete de 1.4, y por debajo de ~560 px de caja el detalle interior (bandas
   de texto, cotas, burbujas) se empasta. Medido en pantalla a 1440. */
.re-spread {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .86fr);
  gap: clamp(26px, 4vw, 58px);
  align-items: center;
  margin-bottom: clamp(44px, 6vw, 86px);
}
.re-spread > .services-intro { margin-bottom: 0; }
@media (max-width: 900px) {
  .re-spread { grid-template-columns: 1fr; gap: clamp(24px, 5vw, 38px); }
}

/* ==========================================================================
   4 · AUDIENCIAS — cuatro negocios, no un mercado
   ========================================================================== */
.re-aud-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 18px);
}
.re-aud-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--line-ink);
  padding: clamp(24px, 2.6vw, 40px);
  background: var(--paper);
  color: var(--ink);
  transition: background .25s ease, border-color .25s ease;
}
.re-aud-card:hover,
.re-aud-card:focus-visible { background: var(--paper-2); border-color: rgba(10, 26, 47, .38); }
.re-aud-top { display: flex; align-items: center; gap: 14px; margin-bottom: clamp(18px, 2vw, 26px); }
.re-aud-num {
  font-family: var(--display); font-weight: 700; font-size: 13px; letter-spacing: .08em;
  color: var(--cyan-ink);        /* acento sobre superficie clara — ver §0 */
}
.re-aud-role {
  font-size: 11px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink-soft);
}
.re-aud-top .re-piece { margin-left: auto; --re-piece: clamp(40px, 3.6vw, 52px); opacity: .9; }
.re-aud-card h3 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(23px, 2.1vw, 32px); line-height: 1.06; letter-spacing: -.015em;
  text-transform: uppercase;
}
.re-aud-pain {
  margin-top: 14px;
  font-size: clamp(15px, 1.15vw, 17px); line-height: 1.5;
  color: var(--ink-soft);
  max-width: 42ch;
}
.re-aud-pain em { font-style: italic; color: var(--ink); }
.re-aud-list { display: flex; flex-wrap: wrap; gap: 7px; list-style: none; margin-top: clamp(18px, 2vw, 24px); }
.re-aud-list li {
  border: 1px solid var(--line-ink);
  padding: 6px 11px;
  font-size: 11.5px; font-weight: 500; letter-spacing: .04em;
}
.re-aud-go {
  display: inline-flex; align-items: center; gap: 9px;
  margin-top: auto; padding-top: clamp(22px, 2.4vw, 30px);
  font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}
.re-aud-go i { font-style: normal; color: var(--cyan); transition: transform .25s ease; }
.re-aud-card:hover .re-aud-go i,
.re-aud-card:focus-visible .re-aud-go i { transform: translate(3px, -3px); }

@media (max-width: 860px) { .re-aud-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   5 · FASES DEL LANZAMIENTO — tarjetas del data-hscroll
   ≥1080px las lleva motion2 en horizontal; por debajo son un carrusel nativo
   con snap (accesible por gesto y por teclado sin JS).
   ========================================================================== */
.re-phases { padding-block: clamp(30px, 4vw, 56px); }
.re-phase-viewport { padding-inline: var(--pad-x); scroll-padding-inline: var(--pad-x); }

/* Enganchada, la escena YA ocupa la pantalla entera y se centra sola: los
   158px de --sec-y arriba y abajo más los 56 de .re-phases son 428px de navy
   vacío que el lector tiene que atravesar dos veces sin que pase nada.
   Medido a 1440×900: la barra de progreso terminaba y quedaban 365px de
   fondo antes del papel. Con el pin puesto, ese colchón sobra. */
@media (min-width: 1080px) {
  .mm-motion2 #launch:has([data-hs-on]) { padding-block: clamp(40px, 4.5vw, 72px); }
  .mm-motion2 [data-hscroll][data-hs-on].re-phases { padding-block: 0; }
}

/* --- El titular, dentro del marco pegado ---------------------------------
   Medido a 1440×900 antes del cambio: el marco pegado son 900px y solo tenían
   contenido 516 (tarjeta 470 + barra 46). 384px de navy vacío repartidos
   arriba y abajo, y el titular ya se había ido por arriba: cinco fases
   pasando sin decir de qué son. Metiendo la cabecera dentro, el marco se
   llena (≈250 + 24 + 470 + 46 = 790) y el rótulo aguanta toda la barrida. */
.re-phase-head { max-width: none; margin: 0; }
.re-phase-head h2 { margin-top: clamp(10px, 1.2vw, 16px); }
.re-phase-head > p {
  color: var(--muted-on-navy);
  font-size: 15px; line-height: 1.55;
  max-width: 52ch;
}
@media (min-width: 900px) {
  /* Titular a la izquierda, entradilla a la derecha: dos líneas de H2 en vez
     de tres y ~90px menos de alto dentro del marco. */
  .re-phase-head {
    display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: end; gap: clamp(24px, 3vw, 56px);
  }
  .re-phase-head > p { padding-bottom: 6px; }
}
@media (min-width: 1080px) {
  .mm-motion2 [data-hscroll][data-hs-on] .re-phase-head {
    margin-bottom: clamp(26px, 3vw, 40px);
  }
}
/* Por debajo de 1080 el viewport ES el carrusel horizontal: sin esto la
   cabecera se estira al ancho del track y el titular se va a la derecha en
   cuanto deslizas. Pegada a la izquierda se queda donde debe. */
@media (max-width: 1079.98px) {
  .re-phase-head {
    position: sticky; left: 0;
    width: 100%;
    margin-bottom: clamp(26px, 4vw, 44px);
  }
}
/* La barra ya vive dentro del viewport, que trae padding lateral: sin esto se
   inseta dos veces y no alinea con la primera tarjeta. El selector repite el
   de motion2.css (0,4,0) más la clase propia para ganarle sin !important. */
@media (min-width: 1080px) {
  .mm-motion2 [data-hscroll][data-hs-on] .re-phase-viewport [data-hscroll-bar] { margin-inline: 0; }
}
/* 430 px y no 372: motion2 fija el alto de la escena pegada en
   100vh + (ancho del track − ancho del viewport). Con tarjetas de 372 el
   recorrido horizontal a 1440 era de 556 px —las tarjetas apenas se movían y
   la escena se despegaba a mitad de sección. Con 430 el recorrido pasa a
   ~1040 px: una barrida horizontal real de las cinco fases. */
.re-phase {
  width: min(78vw, 430px);
  display: flex; flex-direction: column;
  border: 1px solid var(--line-paper);
  background: var(--navy-2);
  padding: clamp(24px, 2.4vw, 36px);
}
/* Pegada, la sección ocupa la pantalla entera: si la tarjeta mide 300 px, deja
   600 px de navy vacío arriba y abajo y el momento se cae. Solo cuando el
   motor la engancha (≥1080 px con motion2) la tarjeta crece a llenar. */
@media (min-width: 1080px) {
  /* Con la cabecera ya dentro del marco, 56vh desbordaba en pantallas de
     900px de alto (el viewport es overflow:clip y habría recortado la barra).
     44vh/430 deja el marco lleno sin cortar nada entre 720 y 1200 de alto. */
  .mm-motion2 [data-hscroll][data-hs-on] .re-phase { min-height: min(44vh, 430px); }
}
.re-phase-top { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.re-phase-num {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(34px, 3.4vw, 48px); line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.4px rgba(6, 214, 221, .7);
}
.re-phase-when {
  font-size: 10.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--cyan);
}
.re-phase h3 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(21px, 1.9vw, 27px); line-height: 1.08; letter-spacing: -.01em;
  text-transform: uppercase;
  color: #fff;
  margin: clamp(18px, 2vw, 26px) 0 12px;
}
.re-phase > p { color: var(--muted-on-navy); font-size: 14.5px; line-height: 1.5; }
.re-phase ul { list-style: none; margin-top: auto; padding-top: clamp(20px, 2.2vw, 28px); }
.re-phase li {
  padding: 9px 0 9px 20px;
  border-top: 1px solid var(--line-paper);
  position: relative;
  font-size: 12.5px; font-weight: 500; letter-spacing: .02em;
  color: var(--text-on-navy);
}
.re-phase li::before {
  content: ""; position: absolute; left: 0; top: 17px;
  width: 10px; height: 1px; background: var(--cyan);
}

/* ==========================================================================
   6 · SERVICIOS — 7 en rejilla de 4 columnas (la primera pesa doble)
   4 columnas y una tarjeta ancha = 2 filas exactas sin huérfanas:
   [01 ancha][02][03] · [04][05][06][07]
   ========================================================================== */
.re-svc-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 18px);
}
.re-svc-card {
  display: flex; flex-direction: column;
  grid-column: span 1;
  border: 1px solid var(--line-ink);
  padding: clamp(22px, 2.2vw, 32px);
  background: var(--paper);
  color: var(--ink);
  transition: background .25s ease, border-color .25s ease;
}
a.re-svc-card:hover,
a.re-svc-card:focus-visible { background: var(--paper-2); border-color: rgba(10, 26, 47, .38); }
.re-svc-card--wide { grid-column: span 2; }
.re-svc-head { display: flex; align-items: center; gap: 12px; }
.re-svc-num {
  font-family: var(--display); font-weight: 700; font-size: 13px; letter-spacing: .08em;
  color: var(--cyan-ink);       /* acento sobre superficie clara — ver §0 */
}
.re-svc-head .ic { --ic-size: 23px; margin-left: auto; color: var(--ink-soft); }
.re-svc-card h3 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(19px, 1.55vw, 24px); line-height: 1.1; letter-spacing: -.01em;
  margin: 16px 0 10px;
}
.re-svc-card > p { color: var(--ink-soft); font-size: 14.5px; line-height: 1.5; }
.re-svc-out { list-style: none; margin-top: clamp(16px, 1.8vw, 22px); }
.re-svc-out li {
  border-top: 1px solid var(--line-ink);
  padding: 8px 0;
  font-size: 12px; font-weight: 500; letter-spacing: .04em;
  color: var(--ink);
}
/* Pie de la rejilla: de las siete tarjetas sólo tres tienen página propia en la
   vertical (listing-content, websites-idx, ai-lead-response), así que la
   tarjeta no es el enlace y el reparto lo hace este pie hacia las cuatro
   páginas de audiencia — que es además la ruta real de compra. */
.re-svc-foot {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 14px clamp(20px, 3vw, 46px);
  margin-top: clamp(30px, 3.6vw, 52px);
  padding-top: clamp(22px, 2.6vw, 32px);
  border-top: 1px solid var(--line-ink);
}
.re-svc-foot > p { color: var(--ink-soft); font-size: 15px; max-width: 56ch; flex: 1 1 380px; }
.re-svc-foot nav { display: flex; flex-wrap: wrap; gap: 8px clamp(14px, 1.6vw, 24px); }
.re-svc-foot nav a {
  display: inline-flex; align-items: center;
  min-height: 44px;
  font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink);
  box-shadow: inset 0 -1px rgba(10, 26, 47, .3);
  transition: box-shadow .2s ease;
}
.re-svc-foot nav a:hover,
.re-svc-foot nav a:focus-visible { box-shadow: inset 0 -2px var(--cyan); }

/* La ancha reparte copy y arte en dos columnas cuando hay sitio. */
.re-svc-wide-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .82fr); gap: clamp(18px, 2vw, 30px); align-items: center; }
.re-svc-wide-body > div { min-width: 0; }
.re-svc-wide-body .re-art { align-self: center; }

@media (max-width: 1080px) {
  .re-svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .re-svc-card--wide { grid-column: span 2; }
}
@media (max-width: 700px) {
  .re-svc-grid { grid-template-columns: 1fr; }
  .re-svc-card--wide, .re-svc-card { grid-column: span 1; }
  .re-svc-wide-body { grid-template-columns: 1fr; }
}

/* ==========================================================================
   7 · SISTEMA DE LEADS — fricción + tablero
   ========================================================================== */
.re-lead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  gap: clamp(28px, 4vw, 70px);
  align-items: center;
}
.re-lead-h {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(32px, 3.6vw, 56px);
  line-height: 1.04; letter-spacing: -.02em;
  color: #fff;
  margin: 26px 0 20px;
}
.re-lead-h em { font-style: italic; font-weight: 600; color: var(--muted-on-navy); }
.re-lead-p { color: var(--muted-on-navy); max-width: 52ch; }
.re-lead-stack { display: grid; gap: clamp(12px, 1.6vw, 20px); align-content: center; }
.re-friction { list-style: none; margin-top: clamp(24px, 3vw, 34px); border-top: 1px solid var(--line-paper); }
.re-friction li {
  position: relative;
  border-bottom: 1px solid var(--line-paper);
  padding: 15px 0 15px 30px;
  color: var(--text-on-navy);
  font-size: clamp(14.5px, 1.1vw, 16.5px); line-height: 1.5;
}
.re-friction li::before {
  content: ""; position: absolute; left: 0; top: 24px;
  width: 16px; height: 1px; background: var(--cyan);
}
/* Hueco del .system-board (que es position:absolute; inset:0 y centra su
   contenido: si la caja es más alta que el flujo, sobra navy). */
.re-board {
  position: relative;
  aspect-ratio: 16 / 8.6;
  border: 1px solid var(--line-paper);
  background: var(--navy-2);
  overflow: clip;
}
/* Los tres criterios de calificación cuelgan del nodo QUALIFIED: repartidos a
   space-between (el reparto por defecto de .chart-caption, pensado para el pie
   de un gráfico de barras) se leían como tres palabras sueltas cruzando el
   tablero en vez de como el desglose de una etapa. */
.re-board .chart-caption {
  justify-content: flex-start;
  gap: clamp(16px, 2vw, 30px);
  border-top: 1px solid var(--line-paper);
  padding-top: 11px;
}
.re-note {
  margin-top: clamp(26px, 3vw, 38px);
  padding: clamp(18px, 2vw, 26px);
  border: 1px solid var(--line-paper);
  color: var(--muted-on-navy);
  font-size: 14px; line-height: 1.55;
}
.re-note b { color: var(--text-on-navy); font-weight: 600; }
@media (max-width: 1000px) { .re-lead { grid-template-columns: 1fr; } }

/* ==========================================================================
   8 · MIAMI — reglas de operación + submercados
   ========================================================================== */
.re-rules {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line-ink);
  border: 1px solid var(--line-ink);
  margin-top: clamp(30px, 4vw, 48px);
}
.re-rule { background: var(--paper); padding: clamp(22px, 2.4vw, 34px); }
.re-rule > span {
  display: block;
  font-size: 11px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 12px;
}
.re-rule > p {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(17px, 1.5vw, 22px); line-height: 1.24; letter-spacing: -.01em;
  color: var(--ink);
}
@media (max-width: 700px) { .re-rules { grid-template-columns: 1fr; } }

.re-hoods-title {
  margin-top: clamp(40px, 5vw, 66px);
  font-size: 11px; font-weight: 600; letter-spacing: .26em; text-transform: uppercase;
  color: var(--ink-soft);
}
.re-hoods { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin-top: 16px; }
.re-hoods li {
  border: 1px solid var(--line-ink);
  padding: 8px 14px;
  font-size: 12.5px; font-weight: 500; letter-spacing: .04em;
  color: var(--ink);
}

/* ==========================================================================
   8.b · TECLADO — el foco nunca puede caer en algo invisible

   `.reveal` (system.css) arranca en opacity:0 y solo se enciende cuando el
   IntersectionObserver lo ve. Tabulando, el navegador PRIMERO mueve el foco y
   DESPUÉS hace scroll — y con `html{scroll-behavior:smooth}` ese scroll dura
   ~400ms más los 700ms del fundido. Medido con Playwright: en el home los
   cuatro .re-aud-card y el directorio del footer se enfocaban con opacity 0
   (anillo cian dibujado sobre nada). Con :focus-within el bloque que recibe
   el foco aparece de golpe, sin esperar a nadie. No afecta al ratón.
   ========================================================================== */
.reveal:focus-within { opacity: 1; transform: none; transition: none; }

/* Lo mismo para el texto partido y los trazos: si el foco entra en un bloque
   cuyo split o cuyo dibujo aún no ha corrido, se muestra entero. */
[data-split]:focus-within .mm-sp-i { transform: none; opacity: 1; transition: none; }
[data-draw]:focus-within :is(path, line, polyline, polygon, circle, ellipse, rect) {
  stroke-dashoffset: 0;
}

/* Targets ≥44px (SYSTEM-STYLE §Accesibilidad). Medidos con Playwright:
   el conmutador de idioma daba 41×36 y los enlaces del directorio del pie 34
   de alto. En esta vertical el pie no es decorativo —por debajo de 860px
   system.css apaga .nav-links y el directorio es la única navegación que
   queda—, así que 34px de alto no valen. */
.lang-toggle button { min-height: 44px; min-width: 44px; }
.footer-dir a { min-height: 44px; }

/* ==========================================================================
   9 · FOOTER DE LA VERTICAL — el enlace de vuelta a la casa madre
   ========================================================================== */
.re-home-link {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px;
  color: var(--muted-on-navy);
  font-size: 13px; font-weight: 500; letter-spacing: .05em;
  transition: color .2s ease;
}
.re-home-link:hover { color: #fff; }
.re-home-link i { font-style: normal; color: var(--cyan); }
.footer-brand .re-home-link { margin-top: 12px; }

/* ==========================================================================
   10 · RAG DE TITULARES — el sistema no lo trae y aquí hace falta

   Los titulares de sección de esta vertical son más largos que los de
   mindmiami.com («THE LISTING ISN'T LOST ON PRICE.» contra «BE FOUND FIRST.»)
   y a 66px se partían dejando viudas de una palabra: «ON PRICE.», «SHARE.»,
   «FORMAT.», «ON.». No se toca ni el cuerpo ni el tamaño: solo dónde parte.
   ========================================================================== */
.services-intro h2, .experience-header h2, .identity-copy h2,
.re-panel-h, .re-lead-h { text-wrap: balance; }

/* La segunda frase vive dentro de un <em> detrás de un <br>. Al pasarla a
   bloque y retirar el salto, el balanceador la trata como su propio párrafo
   y también la reparte (con el <br> puesto solo equilibraba la primera).
   Va bajo :has() a propósito: en un navegador sin soporte no se aplica
   ninguna de las dos reglas y el titular se queda exactamente como está —
   nunca con una línea en blanco de más. */
.services-intro h2:has(br + em) br,
.experience-header h2:has(br + em) br,
.re-panel-h:has(br + em) br,
.re-lead-h:has(br + em) br { display: none; }
.services-intro h2:has(br + em) em,
.experience-header h2:has(br + em) em,
.re-panel-h:has(br + em) em,
.re-lead-h:has(br + em) em { display: block; text-wrap: balance; }

/* Hero con frase larga (developers: «LONG BEFORE IT'S A BUILDING.»): a 92px
   se desbordaba por 8px y caía una tercera línea de contorno. Dos líneas de
   .outline-line seguidas son ilegibles sobre navy; con esto vuelve a una. */
.page-hero h1.h1-long { font-size: clamp(38px, 5.35vw, 78px); }

/* ==========================================================================
   11 · CIERRE DE PÁGINA — que la banda final se lea igual en las diez
   ========================================================================== */
/* .cta-band-inner es flex con wrap y el bloque de texto mide su max-content:
   con un párrafo de tres líneas sin tope, ese max-content pasaba de los
   1008px libres y tiraba el círculo a la línea de abajo, a la izquierda. Seis
   páginas lo tenían abajo y cuatro a la derecha, sin ninguna razón visible.
   Topando la medida del párrafo —que además leía a 110 caracteres por línea—
   el bloque vuelve a medir lo que mide su titular, y el círculo se queda de
   ancla a la derecha en nueve de las once. Solo se apilan /teams y /start,
   las dos con el titular más largo: ahí la pila responde al titular y se lee
   como una decisión, no como un descuadre. */
.cta-band-mail { max-width: 68ch; }

/* Navy contra navy: 158px de padding inferior + 130px del superior de la
   banda son 288px del mismo fondo sin nada que los justifique. */
.re-section--navy:has(+ .cta-band),
.experience-section:has(+ .cta-band) { padding-bottom: clamp(48px, 6vw, 88px); }

/* ==========================================================================
   12 · MOVIMIENTO REDUCIDO — red de seguridad de lo propio de este archivo
   (los motores ya se apagan solos; esto cubre las transiciones CSS de aquí)
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .re-aud-card, .re-svc-card,
  .re-aud-go i, .re-home-link { transition: none; }
  .re-aud-card:hover .re-aud-go i { transform: none; }
}

/* ==========================================================================
   13 · NAV DE LA VERTICAL — integración final
   
   Dos problemas que sólo se ven en la banda 861–1080px, que es justo la que
   no cubren los tres anchos de prueba (390/768/1440): a 768 el nav ya está
   apagado por system.css (max-width:860px) y a 1440 sobra sitio.

   a) EL LOGO SE APLASTABA. .nav-shell es flex y .nav-brand no tenía
      flex:none, así que era el único hijo que podía encoger: medido a 861px
      en español daba 0px de ancho —la marca literalmente desaparecía— y a
      960px, 33px. En las once páginas. Con flex:none el logo nunca cede y
      quien cede es la fila de enlaces, que es lo que se puede apagar.

   b) EL NAV NO ERA EL MISMO EN LAS NUEVE. Había dos juegos de enlaces: el
      home y las cuatro audiencias no enlazaban /services, y /services, sus
      tres hijas, /start y /404 no enlazaban /property-management. Ninguno de
      los dos llegaba a los seis destinos. Ahora las once llevan el mismo:
      Servicios · Agentes · Equipos · Desarrolladores · Administración ·
      Mind Miami. «Inicio» sale de la fila porque el logo ya es el enlace a
      home (y lleva aria-current cuando toca): así son seis enlaces y no
      siete, que es lo que hace que quepan.

   Con el logo protegido, los seis enlaces piden ~1080px para caber sin
   apretar. Por debajo se apagan y la ruta es la misma que ya usa el móvil:
   el pie del hero y el directorio del footer.
   ========================================================================== */
.inner-nav .nav-brand { flex: none; }

/* nowrap: sin esto los enlaces encogen y el texto se parte DENTRO del enlace
   —medido en español entre 1081 y 1200px, «Mind Miami ↗» caía a dos líneas y
   la barra pasaba de 41 a 82px de alto—. Con nowrap la fila no se deforma:
   o cabe entera o se apaga, que es una decisión y no un accidente. */
.inner-nav .nav-links { flex: 0 1 auto; min-width: 0; }
.inner-nav .nav-links a { white-space: nowrap; }

/* Seis enlaces piden menos calle que los cinco del sitio hermano: el gap
   heredado (18–40px) deja la fila española 46px fuera a 1100px. Con este
   —14–30px— entra completa y sigue teniendo aire. */
.inner-nav .nav-links { gap: clamp(14px, 1.7vw, 30px); }

/* 1240 y no un número redondo más bajo: medido con nowrap, la fila completa
   pide 1130px en inglés y 1220px en español (14 caracteres de
   «Desarrolladores» y «Administración» contra «Developers» y «Property
   Mgmt»). Se corta por el idioma más largo —si no, el español entra apretado
   o recortado— y quedan ~20px de holgura para la variación de la fuente.
   Por debajo se apagan los enlaces, nunca se deforman. */
@media (max-width: 1240px) {
  .inner-nav .nav-links { display: none; }
}