/* Estilos del prototipo de Delano. Extraidos del <style> en linea de
   delano-prototipo.html (ago-2026) al partir la pagina en cinco: cinco copias
   del mismo bloque era la garantia de que acabaran distintas.
   Se ENLAZA, no se incrusta, asi que aqui se pueden escribir llaves dobles
   sin que el sustituidor de fichas del generador se las coma.

   OJO CON ESTE COMENTARIO — aqui hubo un fallo de los que no se ven (ago-2026).
   El script de extraccion pego su cabecera CERRANDO el comentario en esta linea
   y quitando solo la PRIMERA linea del comentario original, asi que su cuerpo
   —el texto que sigue— quedo suelto como CSS y su cierre 15 lineas mas abajo
   quedo tambien suelto. Para el parser eso es un selector larguisimo que se
   traga el primer bloque de reglas, y el primer bloque de reglas es justo el
   `.dlp { ... }` que declara los tokens. Consecuencia medida:
   --acc, --acc-ink, --hair y --dl-gap NO EXISTIAN en ninguna de las cinco
   paginas. Y no falla ruidosamente: un `background: var(--acc)` con --acc
   inexistente se queda TRANSPARENTE, asi que los <hr class="dl-rule"> de cada
   titular eran invisibles (56x2 px sin pintar) y el `border-top: 1px solid
   var(--hair)` que separa secciones se computaba a 0px. Los antetitulos si se
   veian, porque `color` invalido cae a heredado y el heredado era casi el mismo
   navy — de ahi que pasara desapercibido. Si vuelves a partir este archivo:
   NUNCA cierres un comentario dentro de otro, y comprueba despues que
   getComputedStyle(document.body).getPropertyValue('--acc') devuelve algo.

   ============================================================
   PROTOTIPO — Detalle de proyecto (Delano)
   Estructura: "Estructura Home PFS", pags. 33-49 (Andrea / ixulabs)
   Lenguaje visual: el del home — Fahkwang + Montserrat, contenedor 1240.

   COLOR (correccion de Mateo, ago-2026):
   - Fondo: TODO blanco. Antes alternaba blanco / Coastal Mist (#D1D8E5) y esa
     banda se leia morada. El documento nunca pidio alternancia, y el sitio ya
     habia decidido ir todo en blanco. Para marcar el limite entre secciones se
     usa un filete de 1px #E5E5E5, que es el idioma que quedo documentado para
     esto — no devolver un fondo tintado.
   - Acento: azul de marca --midnight (#072031), NO el arena. Sobre las bandas
     navy el midnight seria invisible, asi que ahi el acento pasa a --mist. Se
     resuelve con la variable --acc, que cambia sola segun el contexto: ninguna
     regla de abajo vuelve a nombrar un color de acento.
   ============================================================ */

.dlp {
  --dl-gap: clamp(18px, 2vw, 28px);
  --acc: var(--midnight);        /* acento sobre fondo claro */
  --acc-ink: var(--midnight);    /* texto de acento sobre fondo claro */
  --hair: #E5E5E5;               /* filete separador entre secciones */
}
/* Sobre navy el acento se invierte, o desaparece contra el fondo. */
.dlp .dl-sec--navy, .dlp .dl-hero { --acc: var(--mist); --acc-ink: var(--white); }

.dlp .container { width: min(1240px, 92%); margin-inline: auto; }

/* ---------- Bloque de seccion ---------- */
/* PADDING RECORTADO (peticion de Mateo, ago-2026: "haz la pagina mas apretada,
   entre secciones hay demasiado hueco cada vez").
   96px -> 56px de tope, o sea 92px -> 56px a 1440. El hueco que se VE es el
   DOBLE del padding (cierre de una seccion + apertura de la siguiente), asi que
   medido de tinta a tinta cae de ~185px a ~113px. Ese factor 2 es la razon de que
   se viera tan grande: ninguno de los dos numeros parecia excesivo por separado.
   El suelo movil baja de 56 a 34 en la misma proporcion, para que el clamp siga
   siendo una rampa y no un escalon (a 390px el hueco pasa de 112 a 68px).
   El filete de 1px se queda: ahora que hay menos distancia es lo que marca el
   limite entre secciones. */
.dl-sec { padding: clamp(34px, 3.9vw, 56px) 0; background: var(--white); }
.dl-sec--navy { background: var(--midnight); color: var(--white); }
/* El filete sustituye a la banda de color: separa sin tintar. */
.dl-sec + .dl-sec:not(.dl-sec--navy) { border-top: 1px solid var(--hair); }
/* LLEVA `.dlp` DELANTE POR ESPECIFICIDAD, no por costumbre. `:not(.dl-sec--navy)`
   cuenta como clase, asi que la regla de arriba es (0,3,0) y esta, escrita como
   `.dl-sec--navy + .dl-sec`, era (0,2,0) y PERDIA: llevaba desde el principio sin
   aplicarse. Medido en la captura, el limite navy -> seccion blanca pintaba una
   linea de (229,229,229) entre el navy y el blanco — un filete gris medio contra
   navy se lee como una costura, y el borde del propio navy ya marca el limite.
   Con `.dlp` delante son (0,3,0) las dos y gana esta por ir despues.
   Era invisible como fallo porque el filete es de 1px y solo aparece en UN limite
   de la pagina; se vio al mover el FAQ justo debajo de la banda navy. */
.dlp .dl-sec--navy + .dl-sec { border-top: 0; }

.dl-head { max-width: 780px; margin-bottom: clamp(28px, 3.2vw, 48px); }
.dl-head--center { margin-inline: auto; text-align: center; }
.dl-eyebrow {
  display: inline-block; font-family: var(--font); font-size: .74rem;
  letter-spacing: .18em; text-transform: uppercase; font-weight: 600;
  color: var(--acc); margin-bottom: 14px;
}
/* Titulares en CAJA NORMAL: solo la primera letra en mayuscula (y los nombres
   propios, que ya vienen escritos asi en el HTML). Antes iban en MAYUSCULAS
   como los del v2 (.specs2__title, .zone-navy__title); Mateo los pidio en caja
   normal y mas pequenos (ago-2026).
   El letter-spacing se va a 0: los .02em estaban ahi para airear las
   mayusculas, y en minuscula Fahkwang ya es ancha de por si.
   Tamano: 36.8px -> 29.5px a 1440. El suelo movil baja en la misma proporcion
   para que el clamp siga siendo una rampa y no un escalon. */
.dl-h2 {
  font-family: var(--font-head); font-weight: 600;
  font-size: clamp(1.35rem, 2.05vw, 1.85rem); line-height: 1.26;
  color: var(--midnight); margin: 0 0 14px;
  letter-spacing: 0;
}
.dl-sec--navy .dl-h2 { color: var(--white); }
.dl-sub {
  font-family: var(--font-head); font-weight: 400;
  font-size: clamp(.98rem, 1.28vw, 1.15rem); line-height: 1.45;
  color: var(--acc); margin: 0 0 14px;
}
.dl-lead { font-size: 1.02rem; line-height: 1.72; color: #35505f; margin: 0; }
.dl-sec--navy .dl-lead { color: rgba(255,255,255,.82); }
.dl-rule { width: 56px; height: 2px; background: var(--acc); margin: 0 0 22px; border: 0; }
.dl-head--center .dl-rule { margin-inline: auto; }

/* Cabecera con un enlace a la derecha (Desarrollos similares). El margen
   inferior pasa del .dl-head al contenedor y el .dl-rule se queda sin el suyo:
   asi `align-items:flex-end` deja el subrayado del enlace y el filete del
   titular en la MISMA linea, que es lo que ata las dos cosas a lo ancho de la
   pagina. Con el margen de 22px puesto, el enlace caia 22px por debajo del
   filete y parecia descolgado.
   `margin-left:auto` no es redundante con el space-between: al envolver en
   pantallas estrechas el enlace se queda solo en su linea y sin el se iria a la
   izquierda. */
.dl-headrow {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 16px 32px; margin-bottom: clamp(28px, 3.2vw, 48px);
}
.dl-headrow > .dl-head { margin-bottom: 0; }
.dl-headrow .dl-rule { margin-bottom: 0; }
.dl-headrow .hr-linkline { flex: 0 0 auto; margin-left: auto; }

/* ---------- Hero: imagen + nombre + ubicacion + menu de secciones ----------
   Calcado de /proyectos/the-william del v2 (medido a 1440x960):
   alto 710px, h1 centrado de 67px peso 500 con letter-spacing .02em,
   ubicacion 15px debajo, y el bloque anclado a ~74% del alto — o sea
   no centrado del todo, algo mas abajo. */
.dl-hero { position: relative; height: clamp(520px, 72svh, 720px); display: flex; align-items: flex-end; }
.dl-hero__media { position: absolute; inset: 0; overflow: hidden; }
.dl-hero__media img { width: 100%; height: 100%; object-fit: cover; }
/* DOS capas, y la de arriba es la que hace legibles las columnas del menu.
   Sale medida del PDF de The William (pag. 1), no a ojo: ese hero lleva un
   sombreado radial (ShadingType 3 usado como mascara de luminosidad) que apaga
   el centro de la foto y deja los bordes intactos, y eso es lo que hace que su
   fila de enlaces se lea limpia. Medido contra la foto reconstruida, su velo es
   #374660 al 85-97% en el centro, y su caida horizontal normalizada es
   1.00 / .89 / .64 / .30 / .05 — llega a cero en x=10% y x=90%, o sea radio
   horizontal del 40%. En VERTICAL su perfil sale casi plano (.57 -> 1.00 -> .80),
   asi que no es una vineta redonda: es una banda central de bordes blandos.

   DOS desviaciones deliberadas respecto al PDF, las dos medidas:
   1) Color: aqui va --midnight (#072031), que es el navy del manual de marca.
      El #374660 del PDF es un gris azulado que no esta en la paleta; da un
      efecto de niebla en vez de oscurecer, y sobre nuestra foto de atardecer
      (calida) el navy queda mejor.
   2) Posicion: su elipse va centrada a media altura porque SU texto esta
      centrado verticalmente. Aqui el logo, la ubicacion y el menu estan todos
      en la mitad de abajo (y 337..602 de 648), y justo en el centro de nuestra
      foto esta el resplandor del sol, que es lo mejor que tiene. Copiando su
      geometria el sol perdia el 61,9% de su luminancia. Anclando la elipse
      abajo (at 50% 92%) el ruido del fondo detras del menu baja un 69,7% —MAS
      que con la del PDF, que bajaba 50,5%— y el sol solo pierde 7,9%.
      O sea no es un termino medio: sale mejor en las dos cosas.
   Los bordes laterales del hero no se tocan (-0,0%), que es la gracia del
   efecto: la foto sigue viva donde no hay texto. */
.dl-hero__scrim {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 42% 58% at 50% 92%,
      rgba(7,32,49,.62) 0%,
      rgba(7,32,49,.552) 25%,
      rgba(7,32,49,.397) 50%,
      rgba(7,32,49,.186) 75%,
      rgba(7,32,49,0) 100%),
    linear-gradient(180deg, rgba(7,32,49,.26) 0%, rgba(7,32,49,.06) 42%, rgba(7,32,49,.62) 100%);
}
/* El bloque del pie del hero: titulo+ubicacion arriba y el menu de secciones
   pegado al borde inferior. El padding-bottom vive aqui y no en __content
   porque ahora hay dos hijos y el aire de abajo es del conjunto. */
.dl-hero__body { position: relative; width: 100%; padding-bottom: clamp(28px, 3.2vw, 46px); }
.dl-hero__content {
  position: relative; text-align: center;
  width: 100%;
}
/* El h1 ya no es texto: dentro lleva el logotipo oficial (ver el HTML).
   Las propiedades de tipografia se van con el texto; se queda el margen y
   el bloque, que ahora encuadran la imagen.
   TOPE DE TAMANO: el logo de origen mide 681px de ancho y no hay version
   vectorial en el Drive del proyecto (la carpeta LOGO tiene tres PNG y nada
   mas), asi que 681 es el techo real. A 360px de ancho mostrado son 1,89x, o
   sea nitido en pantalla de 2x; pedirle mas seria ampliarlo y verse blando.
   Si algun dia llega un SVG o un PNG mas grande, este clamp puede subir. */
/* 22px y no 14 como el texto: el recorte del logo va pegado a la tinta, asi que
   no trae el hueco que dejaba el interlineado del titular. Con 14 la linea
   "HOTEL & RESIDENCES MIAMI" del logo y "Downtown Miami, FL" se leian como un
   solo bloque de tres lineas. */
.dl-hero__title { margin: 0 auto 22px; line-height: 0; }
.dl-hero__title img {
  display: block; margin: 0 auto;
  width: clamp(230px, 26vw, 360px); height: auto;
  /* DOS sombras, y las dos hacen falta:
     - la primera es CERRADA (2px de difuminado, sin desplazar) y es la que de
       verdad salva la legibilidad. El logo son trazos blancos muy finos y esta
       foto tiene el resplandor del sol y dos torres iluminadas justo detras;
       medido, el 12,5% del trazo quedaba por debajo de 3:1 contra el fondo que
       tiene debajo, con minimos de 1,17:1 en la "A" y la "O". Contra un fondo
       claro NO se puede subir el contraste del trazo (ya es blanco puro): lo
       que se arregla es el BORDE, y para eso la sombra tiene que ir pegada.
     - la segunda es abierta y solo despega el logo de la foto, como hacia el
       text-shadow del titular cuando esto era texto.
     drop-shadow sigue la silueta de las letras; box-shadow pintaria un
     rectangulo alrededor de la imagen. */
  filter: drop-shadow(0 0 2px rgba(7,32,49,.9))
          drop-shadow(0 2px 18px rgba(7,32,49,.55));
}
.dl-hero__loc {
  font-family: var(--font); font-weight: 400; color: var(--white);
  font-size: .95rem; letter-spacing: .04em; margin: 0;
  text-shadow: 0 1px 14px rgba(7,32,49,.44);
}

/* ---------- Los datos del edificio, al pie del hero ----------
   Estos seis (los highlights de la p34) estaban en la banda blanca de abajo y el
   menu de secciones estaba aqui; Mateo pidio intercambiarlos (ago-2026, "just
   flip them"), asi que lo primero que se lee bajo el logotipo es el precio.
   TRES cosas que cambian al pasar de fondo blanco a fondo de foto:
     - el dato va en var(--white) y el rotulo en blanco al 82%, no en navy y
       #6b8494;
     - el filete divisor va en blanco al 28%, no en var(--hair);
     - los dos llevan el mismo text-shadow que llevaba el menu (0 1px 14px navy
       al 50%). No es adorno: el scrim del hero es un degradado, asi que el fondo
       que hay debajo de la fila no es un color sino una franja que varia de lado
       a lado, y la sombra es lo que hace que las celdas de los extremos se lean
       igual que las del centro.
   Lo que NO cambia son los tamanos (1.04rem el dato, .72rem el rotulo) ni el
   padding: se pidio un intercambio de sitio, no un rediseno de la fila.
   LOS SEIS EN UNA SOLA FILA: el precio estuvo unas horas en un renglon propio
   (`flex:0 0 100%` en el primer hijo) y en el mismo mensaje se pidio deshacerlo.
   El unico sitio donde se parte es la reja de movil, mas abajo en la hoja. */
.dl-hero__datos {
  display: flex; align-items: stretch; flex-wrap: wrap; justify-content: center;
  list-style: none; padding: 0;
  /* longhands y no `margin:`, porque .dlp .container ya pone margin-inline:auto
     y un shorthand se lo llevaria por delante: la fila dejaria de centrarse. */
  margin-top: clamp(30px, 4.2vw, 58px); margin-bottom: 0;
  row-gap: 10px;
}
.dl-hero__datos li {
  display: flex; flex-direction: column; gap: 4px; align-items: center;
  padding: 2px 24px; text-align: center;
  border-left: 1px solid rgba(255,255,255,.28);
}
.dl-hero__datos li:first-child { border-left: 0; }
.dl-hero__datos strong {
  font-family: var(--font-head); font-weight: 600; font-size: 1.04rem;
  color: var(--white); line-height: 1.2; white-space: nowrap;
  text-shadow: 0 1px 14px rgba(7,32,49,.5);
}
.dl-hero__datos span {
  font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.82); font-weight: 600;
  text-shadow: 0 1px 14px rgba(7,32,49,.5);
}
/* El corte va PEGADO a su regla base, no en los @media de mas abajo: escrito
   despues, un @media de igual especificidad le ganaria por orden de fuente. */
@media (max-width: 560px) {
  .dl-hero__datos { margin-top: 24px; }
}
/* Sin esto, cada salto deja el titular de la seccion DEBAJO de la barra
   pegajosa del sitio (.pfsnav es sticky y mide 107px, 83px en movil). Es la
   misma declaracion que styles.css ya hace con las anclas del home.
   Se declara para TODAS las secciones con id, no solo para las seis que el menu
   enlaza hoy: si manana se cambia un rotulo de sitio, el destino nuevo ya trae
   su holgura y no hay que acordarse de anadirla aqui. */
/* Ahora que el prototipo es UNA pagina y los rotulos del hero son anclas, esto
   pasa de una lista de ids a TODAS las secciones. La lista habia que mantenerla a
   mano —#colecciones salio al retirarse "Como se compra", #plantas nunca entro— y
   una seccion olvidada no da ningun error: el ancla funciona y el titular
   simplemente aterriza debajo de la barra. Con `.dl-sec` no hay nada que
   recordar.
   LA HOLGURA ES `--dl-menu-h`, NO `--pfsnav-h`. Desde que la banda del menu es
   pegajosa y la cabecera del sitio no lo es (ver el bloque de .dl-menu), lo que
   ocupa la franja de arriba al aterrizar en una seccion es la BANDA, no la
   cabecera. Con los 107px de `--pfsnav-h` el titular quedaba tapado en escritorio
   por 19px y en movil por hasta 112, porque la banda mide 126px a 1440 y crece a
   158/195 cuando el menu envuelve.
   El valor lo escribe `assets/delano-proto.js` midiendo la banda, con un
   ResizeObserver: el alto NO es una constante ni por breakpoint —cambia solo
   cuando entran las fuentes y cuando el menu pasa de 1 a 2 o 3 lineas—.
   EL FALLBACK SE ESCALONA, y no por elegancia: si el JS no corre (cacheado viejo,
   bloqueado, un error antes en el archivo) el `var()` cae al fallback, y un fallback
   demasiado CORTO deja el titular TAPADO —que es un fallo— mientras uno demasiado
   largo solo deja aire de sobra encima, que se ve raro y se lee. Medido con el JS
   fuera de juego: con 126px en todos los anchos, a 390px la primera seccion
   aterrizaba 8px por debajo del borde de la banda.
   LOS NUMEROS HAY QUE REMEDIRLOS CADA VEZ QUE CAMBIA EL CONTENIDO DE LA BANDA.
   Van ya cinco veces: con los datos del edificio dentro, con los dos PDF, sin ellos,
   con el CTA de asesor en una segunda fila, y ahora con todo en UNA fila. Cada vez
   cambian los altos y por tanto estos escalones; dejarlos sin remedir da holgura de
   sobra (inofensivo pero feo) o un titular tapado (fallo).
   Con el patron de la barra de zona bastan TRES escalones, y ninguno es por tramo de
   layout: al llevar los rotulos `nowrap` y pasar a carrusel horizontal, la banda ya
   NO cambia de alto al estrecharse. Antes iba 129 / 124 / 167 / 161 / 198 segun
   cuantas lineas ocupara el menu; ahora hay exactamente tres alturas, y cada una
   corresponde a un CAMBIO DE CONTENIDO, no a un ancho:
     - una fila            (>=1101):  84px -> respaldo 90
     - apilada con CTA  (561-1100): 118px -> respaldo 125
     - apilada SIN CTA     (<=560):  66px -> respaldo 72   (el CTA se va con el
       corte de `.wa-float`; ver su bloque)
   Medido con `chk-banda-una-fila.js` en 17 anchos, con 561 y 560 incluidos a
   proposito para cazar el escalon. */
.dlp .dl-sec { scroll-margin-top: var(--dl-menu-h, 90px); }
@media (max-width: 1100px) { .dlp .dl-sec { scroll-margin-top: var(--dl-menu-h, 125px); } }
@media (max-width: 560px)  { .dlp .dl-sec { scroll-margin-top: var(--dl-menu-h, 72px); } }

/* ---------- Banda del menu de secciones bajo el hero ----------
   Esta banda traia los seis datos del edificio hasta ago-2026; Mateo pidio
   intercambiarla con el menu que estaba sobre la foto. Se conserva su envoltura
   (fondo blanco, filete inferior, 18/16 de padding y una columna centrada con
   14 de hueco) porque lo que se pidio fue cambiar QUE lleva dentro, no rehacer
   la banda: es lo primero que hay bajo la foto, asi que cada píxel suyo retrasa
   la primera linea de contenido, y ese adelgazamiento ya se habia pedido aparte.
   El menu va CENTRADO y los dos PDF centrados debajo, igual que estaban los
   datos y sus botones. La alternativa —menu a la izquierda y botones a la
   derecha, en una sola linea— ahorraria ~47px de banda, pero nadie la ha pedido
   y rompe la simetria centrada que tiene el hero justo encima.
   Los enlaces son navy sobre blanco, no blanco sobre foto: el subrayado de hover
   pasa de var(--mist) —que sobre blanco es casi invisible— a var(--sand), que es
   el acento que este prototipo ya usa para los filetes y los antetitulos. Y
   desaparece el text-shadow, que sobre blanco solo ensuciaba el trazo. */
/* ---------- La banda SE QUEDA ARRIBA al bajar, y la cabecera del sitio NO ----------
   Peticion de Mateo (ago-2026): "when you scroll down the info general and all
   those stay, that whole bar stays, and then the pfs heading disappears once you
   cross it". Son dos mitades del mismo cambio y ninguna funciona sin la otra:
     1) `.dl-menu` pasa a `position:sticky; top:0`;
     2) `.pfsnav` deja de ser pegajosa DENTRO de esta pagina.
   Sin (2) las dos se pelearian por la franja de arriba: `.pfsnav` lleva z-index 60
   contra el 50 de aqui, asi que la banda se meteria debajo de la cabecera y se
   veria cortada. Con (2) la cabecera se va con el scroll y la banda se queda sola.
   `.pfsnav` VA ACOTADA A `.dlp`: la regla de styles.css la comparten ~1.100
   paginas del sitio y ahi la cabecera pegajosa se queda como esta. `relative` y no
   `static` para que conserve su z-index 60 y siga tapando lo que pase por debajo
   mientras se ve.
   z-index 50: por debajo de la cabecera (60), del velo del drawer (65), del drawer
   (70), del visor (2000) y de `.wa-float`; por encima del contenido. La barra
   pegajosa de conversion (`.dl-sticky`, z-index 55) vivia abajo y nunca se cruzaba
   con esta; se retiro en ago-2026 y su CTA paso a esta misma banda.
   CONSECUENCIA QUE NO ES UN FALLO: al bajar, la cabecera del sitio —y con ella la
   hamburguesa en movil— deja de estar disponible hasta volver arriba. Es
   literalmente lo que se pidio. Lo que queda accesible mientras se lee es el menu
   de secciones de esta banda, sus dos PDF y la barra pegajosa de WhatsApp. */
.dlp .pfsnav { position: relative; }
/* Y de paso, la mancha gris del borde izquierdo. `.pfsnav-drawer` (styles.css:3754)
   lleva `box-shadow: 20px 0 60px rgba(0,0,0,.25)` SIEMPRE, tambien cerrado: vive en
   `left:-420px` con z-index 70, o sea por encima del contenido, y su sombra pinta
   una franja de ~80px que degrada de (209,209,209) a blanco. Es un fallo del sitio
   entero, no de esta pagina —sale igual en las ~1.100 generadas—, y estaba anotado
   en memory.md sin arreglar porque tocar la regla base afecta a todas.
   Aqui SI se apaga, acotado a `.dlp`, porque la cabecera navy ya no cubre los
   primeros 107px: con la banda blanca pegada arriba, la mancha la cruza y se lee
   como un fallo de esta banda. La sombra se devuelve cuando el cajon esta abierto,
   que es cuando de verdad hace falta separarlo de la pagina. */
.dlp .pfsnav-drawer { box-shadow: none; }
body.dlp.pfsnav-open .pfsnav-drawer { box-shadow: 20px 0 60px rgba(0,0,0,.25); }
.dl-menu {
  position: sticky; top: 0; z-index: 50;
  background: var(--white); border-bottom: 1px solid var(--hair); padding: 18px 0 16px;
}
/* UNA FILA: los rotulos CENTRADOS EN LA BANDA y el CTA a su derecha, alineado con
   el de la cabecera. Las dos cosas a la vez.
   ESTO ESTUVO EN DOS FILAS, y la nota que habia aqui afirmaba que una sola era
   imposible por debajo de ~1.500px. Era FALSO, y se deja escrito el porque para que
   nadie vuelva a partir la banda creyendo que no hay salida. El intento que fallo
   fue una reja `1fr auto 1fr` con el CTA en la columna AUTO: ahi su minimo
   automatico (235px de boton + 54 de holgura) le come el reparto a la columna vacia
   de la izquierda, y por eso los rotulos salian 144px descentrados y en DOS lineas
   hasta a 1920. La forma correcta es la de la barra de la pagina de zona
   (`.zn-secnav` en styles.css, la de Downtown Miami), de la que se copia esta a
   peticion de Mateo (ago-2026: "look at how downtown miami did it, use that same
   bar style"):
     - TRES columnas `1fr minmax(0,auto) 1fr`, con la PRIMERA VACIA;
     - los rotulos en la columna 2 y el CTA en la 3 — no el CTA en la del medio.
   Asi las dos columnas exteriores se reparten el sobrante a partes iguales y la del
   medio queda centrada EN LA BANDA pase lo que pase con el ancho del boton. Es el
   mismo recurso con el que `.pfsnav__inner` clava el logo en el centro.
   Por que no `flex` + `space-between`: ahi los rotulos se centran dentro del
   SOBRANTE que deja el boton, o sea quedan perfectamente centrados en la caja
   equivocada — se lee como corrido, no como roto, y por eso cuesta diagnosticarlo.
   Y degrada solo: `1fr` no baja del ancho de su contenido, asi que cuando la columna
   derecha ya no cabe en su mitad, se queda con lo que necesita y los rotulos se
   corren a la izquierda en vez de meterse debajo del boton. Por debajo del corte se
   apila (ver el @media).
   Lo que hace que QUEPA es el hueco entre rotulos, no el tamano de letra: con los 48
   de antes los cinco piden ~1.180px y no entran junto al boton en ninguna pantalla.
   El tamano de letra no se toca — ver `.dl-menu__link`.
   El contenedor usa el modelo de ancho de la CABECERA (100% + padding-inline) y no
   `.dlp .container` (min(1240px,92%)): con el de 1240 el borde derecho del CTA de la
   cabecera caia 258px por FUERA a 1920, 18 a 1440 y 33 por DENTRO a 1024, o sea no
   habia forma de alinearlos. El padding es SIMETRICO a proposito y la holgura de
   54px que necesita el boton va en su propio `margin-right`: metida en el padding
   derecho, la caja de contenido queda descentrada 27px y arrastra a los rotulos —el
   boton cuadra y el centro se tuerce. */
.dl-menu__inner {
  display: grid;
  grid-template-columns: 1fr minmax(0, auto) 1fr;
  align-items: center;
  gap: clamp(12px, 1.6vw, 22px);
  width: 100%; margin-inline: auto; box-sizing: border-box;
  padding-inline: clamp(16px, 2vw, 28px);
}
/* EL CTA DE LA BANDA. Sustituye a la barra pegajosa del pie.
   RECTANGULO CON CONTORNO, no relleno: es el mismo boton que la barra de zona, que
   a su vez copia las medidas de `.pfsnav__cta` —radio 2px, versalita 700 con
   `letter-spacing` .08em— e invierte los colores porque aquel va sobre la barra navy
   y este sobre blanco. Al pasar el raton se rellena de navy con el texto en blanco:
   el mismo gesto que hace el de la cabecera, al reves. Estuvo relleno en navy
   mientras vivia en una fila propia; con las dos barras del sitio compartiendo forma
   ahora se leen como el mismo control a dos niveles.
   El `fill: currentColor` del icono NO es opcional: el sprite `#icon-wa` no declara
   fill propio, asi que sin esto sale NEGRO y no navy — y en el hover se quedaria
   negro sobre navy, o sea una mancha.
   EL `margin-right` ES LO QUE LO ALINEA CON EL DE LA CABECERA, y son 54px MEDIDOS,
   no elegidos: en la columna derecha del nav, a la derecha del CTA, hay el boton de
   compartir (42px) y su hueco (12px). El `padding-inline` ya iguala el resto. Si
   algun dia se toca esa esquina del nav, esto se descuadra — por eso la sonda
   compara los dos bordes derechos y falla si se separan mas de 1px. */
.dl-menu__asesor {
  grid-column: 3; justify-self: end;
  /* LOS 54px SOLO VALEN DONDE EXISTE EL BOTON DE COMPARTIR. Ver el bloque de
     `@media (min-width: 1366px)` de styles.css (~3402): ahi el sitio hace
     `.pfsnav .nav-share { display: none }`, o sea **compartir solo existe por
     debajo de 1366**, y por encima el CTA de la cabecera acaba pegado al borde
     de contenido. El valor base es 0 y los 54 se ponen en el tramo en que hay
     algo que esquivar — al reves de como estaba.
     Esto no es teorico: la banda se construyo contra una cabecera anterior en la
     que compartir estaba siempre, y mientras tanto `main` la reestructuro (dos
     grupos, patron Zillow). Medido tras el merge, el CTA quedaba **54px
     descuadrado a 1440 y 1920** y perfecto de 1280 abajo — un desfase que solo
     aparece en pantallas grandes y que ninguna captura de movil habria delatado.
     Si alguien mueve ese corte de 1366, este va detras. */
  margin-right: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 14px;
  border: 1px solid var(--midnight); border-radius: 2px;
  background: transparent; color: var(--midnight);
  font-family: var(--font); font-size: .78rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
  white-space: nowrap;
  transition: background .2s ease, color .2s ease;
}
/* El tramo en que la cabecera SI lleva boton de compartir a la derecha de su CTA:
   42px de boton + 12 de hueco = 54. Va acotado por arriba a 1365 (el corte de
   styles.css es `min-width: 1366`) y por abajo a 1101, que es donde esta banda
   se apila y el CTA pasa a centrarse en su propia fila. */
@media (min-width: 1101px) and (max-width: 1365px) {
  .dl-menu__asesor { margin-right: 54px; }
}
.dl-menu__asesor:hover { background: var(--midnight); color: var(--white); }
.dl-menu__asesor:focus-visible { outline: 2px solid var(--sand); outline-offset: 2px; }
.dl-menu__asesor svg { width: 16px; height: 16px; flex: 0 0 auto; fill: currentColor; }
/* Cada etiqueta es LITERALMENTE el texto del titular al que salta, para que el
   enlace no prometa una cosa y entregue otra. Por eso no dice "Precios" ni
   "Planos" como el the-william del documento: aqui el precio vive DENTRO de
   Especificaciones y los planos son un PDF, no una seccion. Si algun dia se
   quiere un enlace "Precios", lo correcto es darle ancla y titular propios al
   grupo de precio, no ponerle a este enlace un nombre que su destino no lleva.
   Tampoco entra "Galeria": es la seccion inmediatamente siguiente y se alcanza
   con un gesto de rueda, asi que un enlace ahi no ahorra nada. */
.dl-menu__list {
  /* Columna del medio de la reja. Es la que queda centrada en la banda. */
  grid-column: 2;
  /* min-width:0 es OBLIGATORIO: sin el, un hijo de reja no baja de su ancho de
     contenido y el grupo se sale de la caja en vez de encogerse. */
  min-width: 0;
  display: flex; align-items: center; justify-content: center;
  /* EL HUECO VA EN VARIABLE porque el filete separador tiene que colocarse a la
     MITAD de el. Escritos por separado se desincronizan y el filete acaba pegado a
     la ultima letra del rotulo anterior en vez de en medio — y eso no se lee como
     un desajuste de valores, se lee como que el filete pertenece a esa palabra.
     19px a 1440. Bajo de los 48 que tenia: los 48 son lo que obligaba a mandar el
     CTA a una segunda fila. El tamano de letra se queda como estaba, que es lo que
     se pidio conservar; lo que se aprieta es el aire entre rotulos. */
  --dl-hueco: clamp(12px, 1.35vw, 19px);
  column-gap: var(--dl-hueco);
}
/* Filete entre rotulos, como la barra de zona: sin el, esto se lee como cinco
   palabras sueltas y no como una fila de secciones. Va de PSEUDOELEMENTO y no de
   `<span>`: un separador con nodo propio se queda colgando al final de una linea si
   la fila envuelve, apuntando al vacio. */
.dl-menu__link + .dl-menu__link { position: relative; }
.dl-menu__link + .dl-menu__link::before {
  content: ""; position: absolute;
  left: calc(var(--dl-hueco) / -2);
  top: 50%; transform: translateY(-50%);
  width: 1px; height: 14px; background: #D3DAE1;
}
.dl-menu__link {
  font-family: var(--font); font-weight: 600; color: var(--midnight);
  font-size: clamp(.86rem, 1.15vw, 1.06rem); letter-spacing: .01em;
  text-decoration: none; padding: 11px 2px; white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: border-color .18s ease, color .18s ease;
}
.dl-menu__link:hover { border-bottom-color: var(--sand); }
.dl-menu__link:focus-visible { outline: 2px solid var(--midnight); outline-offset: 4px; }
/* OJO CON EL SITIO DE ESTE BLOQUE: va DESPUES de la regla base de .dl-menu__list,
   no antes. Escrito arriba —que es donde estuvo— aplicaba a medias y en silencio,
   porque un @media no suma especificidad y con (0,1,0) gana la que va despues en el
   archivo. Un bloque @media aplicado a medias es peor que uno que no aplica: parece
   que el corte funciona.
   DOS FILAS POR DEBAJO DE 1100: el CTA baja a su propia linea y los rotulos se
   quedan con el ancho entero. El 1100 es el mismo de la barra de zona, pero se
   comprobo que sirve AQUI antes de copiarlo — alli son CUATRO rotulos y aqui CINCO,
   y el mas largo ("Desarrollos similares") no es el mismo. Medido en el barrido
   (`mide-corte-banda.js`, con este @media neutralizado):
     - la fila entera pide ~972px (rotulos 619 + hueco 16 + boton 243 + su holgura de
       54 + 40 de relleno), asi que a 1101 sobran ~130px — MAS holgura de la que
       tiene la barra de zona en su propio corte (~95);
     - el rebose real no empieza hasta 980 y el solape con el CTA hasta 940, o sea
       el corte va 120-160px por encima de donde se rompe, no pegado;
     - el CENTRADO perfecto solo aguanta hasta 1460 (a 1440 el desvio es de 3px, a
       1280 de 39 y a 1101 de 98). Por debajo de 1460 los rotulos se corren a la
       izquierda y eso es DELIBERADO: es como degrada la reja de tres columnas
       —columna 3 se queda con lo suyo y las 1fr reparten lo que queda— y a esos
       anchos la fila llena la banda de lado a lado, que se lee como una barra de
       navegacion y no como algo descentrado. Es la misma decision que tomo la barra
       de zona. Si algun dia se quiere centrado exacto por debajo de 1460, la unica
       salida es el CTA en su propia fila, y eso cuesta 34px de banda PEGAJOSA.
   Si entra o cambia un rotulo, hay que RE-MEDIRLO.
   Por debajo, la fila de rotulos pasa ademas a carrusel horizontal: una sola linea
   que se arrastra, alineada a la izquierda, porque centrar un contenido mas ancho
   que su caja deja el primer rotulo cortado por la izquierda y sin forma de
   alcanzarlo.
   El que scrollea es la FILA DE ROTULOS, no `.dl-menu__inner`: siendo esta una
   columna (rotulos + CTA), poner el overflow en ella haria scrollear la columna
   entera y arrastraria tambien el boton. */
@media (max-width: 1100px) {
  .dl-menu { padding-top: 14px; padding-bottom: 12px; }
  /* Vuelve a FLEX: apilados no hay nada que centrar contra nada, y una reja de tres
     columnas con los hijos en fila solo estorba. */
  .dl-menu__inner {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
  }
  /* Se DESHACE la holgura del boton de compartir: aqui el CTA esta centrado en su
     propia fila y 54px a un solo lado lo dejarian descentrado justo la mitad —27px—
     sin que se vea de donde sale. */
  .dl-menu__asesor { margin-right: 0; }
  .dl-menu__list {
    width: 100%;
    justify-content: flex-start;
    overflow-x: auto; scrollbar-width: none;
    scroll-snap-type: x proximity;
  }
  .dl-menu__list::-webkit-scrollbar { display: none; }
  .dl-menu__link { scroll-snap-align: start; padding: 8px 2px; }
}
/* EL CTA DE LA BANDA SE RETIRA CUANDO APARECE EL WHATSAPP FLOTANTE, y el corte no
   es una preferencia: `.wa-float` esta en `display:none` y pasa a `flex` dentro del
   `@media (max-width: 560px)` de styles.css (linea ~889). O sea 560 es exactamente
   el ancho en el que el sitio decide que la conversion la lleva el boton flotante.
   Peticion de Mateo (ago-2026): "remove the hablar con un asesor for mobile views.
   whenever that little whatsapp icon appears bottom right is when that button
   should disappear".
   Los dos hacen LO MISMO —los dos abren WhatsApp con `[data-wa]`— asi que por
   debajo de 560 eran dos botones del mismo color pidiendo lo mismo a 60px de
   distancia, uno pegado arriba y otro pegado abajo. No se pierde conversion: se
   deja de duplicarla, y de paso la banda pegajosa baja de 118px a ~62 en la
   pantalla donde ese alto mas cuesta.
   SI ALGUN DIA SE MUEVE EL CORTE DE `.wa-float` EN styles.css, ESTE VA DETRAS.
   Estan atados por significado, no por casualidad, y nada los verifica junto: por
   eso la sonda comprueba que no haya NUNCA los dos visibles a la vez. */
@media (max-width: 560px) {
  .dl-menu__asesor { display: none; }
}
/* Aqui vivieron `.dl-menu__cta` y `.dl-menu .dl-btn { padding: 8px 18px }`, de
   cuando los dos PDF estaban en esta banda. Volvieron a la cabecera de Plantas y
   ahi toman el `.dl-btn` general (13/26): aquel recorte existia para adelgazar la
   BANDA, y fuera de ella no hay nada que adelgazar. */

/* La PRIMERA seccion del cuerpo sube hacia la banda. El hueco lo sumaban DOS
   paddings, no uno — el cierre de la banda mas los ~92px de apertura de .dl-sec
   a 1440— y por eso se veia enorme aunque ninguno de los dos lo fuera.
   Mateo lo pidio dos veces: primero para la galeria y despues para
   Especificaciones. Es la misma queja, asi que en vez de una regla por id va una
   de hermano adyacente: la banda vive en la cascara y siempre precede al cuerpo,
   luego esto alcanza a la primera seccion sea cual sea. Antes esto era
   `#galeria { ... }` a mano, que dejaba a las demas con el hueco viejo.
   Este override tiene que seguir siendo MAS PEQUEÑO que el padding base de
   .dl-sec o deja de hacer nada: cuando la base bajo a 56px (el apretado general
   que pidio despues) los 54px de aqui quedaban a 2px de la base, asi que se
   recortaron tambien. Si alguien vuelve a tocar .dl-sec, comprobar que este
   numero sigue por debajo. El border-bottom de la banda marca el limite sin
   depender del aire. */
.dl-menu + .dl-sec { padding-top: clamp(24px, 2.6vw, 38px); }

/* ---------- Botones ----------
   Bajado a peticion de Mateo (ago-2026): 15/30 y .93rem -> 13/26 y .88rem.
   OJO: .dl-btn ya NO lo usa solo la barra de datos —aqui hubo un comentario que
   lo afirmaba y se quedo viejo—. Tambien son .dl-btn el par del final de
   Plantas ("Pedir precios por planta" / "Ver los planos"), asi que tocar esta
   regla mueve CUATRO botones en la pagina de Residencias. Por eso el segundo
   recorte que pidio Mateo (la banda, ago-2026) va scopeado en .dl-menu .dl-btn
   y no aqui: en la banda son enlaces de servicio y en Plantas es la conversion
   de la seccion, que nadie pidio encoger. */
.dl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 13px 26px; border-radius: 999px; font-weight: 600; font-size: .88rem;
  letter-spacing: .02em; text-decoration: none; border: 1.5px solid transparent;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
  cursor: pointer;
}
/* Primario: azul de marca sobre claro; blanco sobre navy (el navy desapareceria). */
.dl-btn--primary { background: var(--midnight); color: var(--white); border-color: var(--midnight); }
.dl-btn--primary:hover { background: #0d2f47; border-color: #0d2f47; transform: translateY(-1px); }
.dl-sec--navy .dl-btn--primary, .dl-hero .dl-btn--primary { background: var(--white); color: var(--midnight); border-color: var(--white); }
.dl-sec--navy .dl-btn--primary:hover, .dl-hero .dl-btn--primary:hover { background: var(--mist); border-color: var(--mist); }
.dl-btn--outline { background: transparent; color: var(--midnight); border-color: var(--midnight); }
/* El hover NO invierte el boton (peticion de Mateo, ago-2026: "que se ponga un
   poco sombreado, no que cambie del todo"). Antes pasaba a navy solido con texto
   blanco, o sea "Ver brochure" se convertia en el gemelo de "Ver planos" y por un
   instante habia DOS botones primarios: el hover leia como un cambio de estado
   del boton, no como "el raton esta aqui".
   El tinte es var(--ivory) #F2F2F2, que es el gris que este repo ya usa para
   hover/activo sobre superficies blancas (.zones__mode-btn, .hero-search__clear,
   .dtf-search-clear...) — el mismo idioma, no un gris nuevo.
   El translateY va igual que en el primario para que los dos respondan idéntico;
   la señal de que el raton esta encima es el conjunto tinte + levantada, no el
   tinte solo, que a 5% de gris es deliberadamente sutil. */
.dl-btn--outline:hover { background: var(--ivory); transform: translateY(-1px); }
.dl-btns { display: flex; flex-wrap: wrap; gap: 14px; }
/* `.dl-btns` es un flex SIN `justify-content`, asi que sus hijos se empaquetan a la
   IZQUIERDA: para CENTRAR un par hay que decirlo. Ya costo un diagnostico —en la
   barra de datos estos mismos dos botones salian pegados a la izquierda mientras
   las cifras iban centradas, descuadrados hasta 158px a 620px. */
.dl-btns--center { justify-content: center; }
/* Los dos PDF sobre la tabla de plantas. El margen inferior los separa de la
   primera cabecera de grupo ("Delano Collection"), que ya trae su propio filete de
   2px: sin aire, el par de pildoras parecia parte de la tabla. */
.dl-plantas__docs { margin-bottom: clamp(30px, 3.4vw, 46px); }

/* ---------- Informacion general (p35-36) ---------- */
/* Columna unica: la ficha "Informacion general" se retiro porque sus 12 filas
   estaban repetidas en la barra de datos, Ubicacion, Equipo, Precios y FAQ.
   780px es la misma medida que .dl-head, para que este bloque de texto arranque
   y termine donde el de las demas secciones. */
/* APILADO, y la prosa a todo el ancho del contenedor (peticion de Mateo,
   ago-2026, en dos pasos y el segundo corrigiendo al primero):
     1) era una columna unica de 780px -> 460px de blanco muerto a la derecha a
        1440, la unica seccion de la pagina que no usaba el ancho;
     2) lo puse a dos columnas (titular izquierda / prosa derecha) y NO era eso:
        pidio conservar el titular donde estaba y que el TEXTO corriera de
        izquierda a derecha, no en una columna al lado.
   Asi que el bloque del titular se queda arriba a la izquierda con su medida de
   780px —un h2 a 1240px de ancho se lee peor, y ademas "conservar el titular"
   era literalmente lo pedido— y los parrafos van al ancho completo debajo.
   El coste, medido y aceptado: la linea de prosa pasa de 82 a ~148 caracteres,
   por encima de la franja comoda (65-75). Si algun dia molesta, la salida NO es
   volver a estrechar el bloque: son dos columnas de TEXTO (`columns: 2`), que
   mantienen el ancho y bajan la medida a ~72. */
.dl-info__head { max-width: 780px; }
.dl-info__text p { line-height: 1.78; color: #35505f; margin: 0 0 18px; }
.dl-info__text p:last-child { margin-bottom: 0; }


/* ---------- Galeria (p37) ---------- */
/* Las pestanas de categoria (.dl-gal__tabs/.dl-tab) se retiraron a peticion
   de Mateo: la galeria ya no filtra, enseña 5 baldosas y el resto van en el
   visor. El data-cat de cada figura se queda por si vuelven. */

/* El recorte del hueco entre la banda del menu y la galeria vivia aqui como
   `#galeria { padding-top: ... }`. Se generalizo a `.dl-menu + .dl-sec` (ver el
   bloque de la banda) cuando Mateo pidio lo mismo para Especificaciones:
   era la misma queja en otra pestaña. Si algun dia la galeria necesita una
   apertura propia, va aqui y gana por especificidad de id. */
.dl-gal__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.dl-gal__item { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4/3; background: var(--ivory); }
.dl-gal__item--wide { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
.dl-gal__item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.dl-gal__item:hover img { transform: scale(1.05); }
/* Las etiquetas superpuestas sobre cada foto ("RENDERINGS EXTERIORES",
   "INTERIORES", "VISTAS") se quitaron a peticion de Mateo. El data-cat de cada
   <figure> se queda: es lo que filtran las pestanas de arriba. */
.dl-gal__note { margin-top: 16px; font-size: .84rem; color: #6b8494; }

/* La reja enseña como mucho 5 baldosas (1 grande + 4). Las demas no se borran:
   siguen en el DOM y salen en el visor. Las esconde el JS con esta clase, que
   necesita declararse aqui porque .dl-gal__item ya trae display propio. */
.dl-gal__item[hidden] { display: none; }
.dl-gal__item { cursor: zoom-in; }

/* Boton "+N fotos" sobre la ULTIMA baldosa visible. */
.dl-gal__mas {
  position: absolute; inset: 0; z-index: 3; width: 100%; border: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  background: rgba(7,32,49,.62); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  color: #fff; font-family: var(--font); cursor: pointer;
  transition: background .18s ease;
}
.dl-gal__mas:hover { background: rgba(7,32,49,.74); }
.dl-gal__mas strong { font-family: var(--font-head); font-weight: 600; font-size: 1.5rem; line-height: 1; }
.dl-gal__mas span { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; }

/* ---------- Visor a pantalla completa ---------- */
.dl-lb {
  position: fixed; inset: 0; z-index: 2000;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(12px, 1.8vw, 20px);
  background: rgba(4,18,28,.94); padding: clamp(16px, 3vw, 40px);
}
.dl-lb[hidden] { display: none; }
.dl-lb__stage {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(8px, 2vw, 28px); width: 100%; min-height: 0;
}
.dl-lb__fig { margin: 0; max-width: min(1180px, 82vw); display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.dl-lb__fig img {
  display: block; max-width: 100%; max-height: 68vh; width: auto; height: auto;
  margin-inline: auto; border-radius: 8px; box-shadow: 0 24px 70px rgba(0,0,0,.55);
}

/* Tira de miniaturas. Scroll horizontal propio: con muchas fotos no debe
   ensanchar el visor ni empujar la foto grande. */
.dl-lb__strip {
  display: flex; gap: 8px; max-width: min(1180px, 92vw);
  overflow-x: auto; overflow-y: hidden; padding: 4px 2px 6px;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.35) transparent;
}
.dl-lb__strip::-webkit-scrollbar { height: 6px; }
.dl-lb__strip::-webkit-scrollbar-thumb { background: rgba(255,255,255,.32); border-radius: 99px; }
.dl-lb__thumb {
  flex: none; width: 92px; height: 62px; padding: 0; border-radius: 6px; cursor: pointer;
  overflow: hidden; border: 2px solid transparent; background: none;
  opacity: .55; transition: opacity .16s ease, border-color .16s ease;
}
.dl-lb__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dl-lb__thumb:hover { opacity: .85; }
.dl-lb__thumb.is-active { opacity: 1; border-color: #fff; }
.dl-lb__cap {
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  color: rgba(255,255,255,.86); font-size: .88rem; line-height: 1.4;
}
.dl-lb__count { flex: none; color: rgba(255,255,255,.6); font-variant-numeric: tabular-nums; }
.dl-lb__nav, .dl-lb__x {
  appearance: none; border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.10);
  color: #fff; border-radius: 50%; cursor: pointer; flex: none;
  display: flex; align-items: center; justify-content: center;
  transition: background .16s ease, border-color .16s ease;
}
.dl-lb__nav { width: 52px; height: 52px; }
.dl-lb__nav svg { width: 26px; height: 26px; }
.dl-lb__nav:hover, .dl-lb__x:hover { background: rgba(255,255,255,.22); border-color: rgba(255,255,255,.5); }
.dl-lb__x { position: absolute; top: clamp(14px, 2.4vw, 26px); right: clamp(14px, 2.4vw, 26px); width: 46px; height: 46px; font-size: 1.7rem; line-height: 1; }
body.dl-lb-abierto { overflow: hidden; }
@media (max-width: 700px) {
  .dl-lb { gap: 6px; padding: 12px; }
  .dl-lb__nav { width: 42px; height: 42px; }
  .dl-lb__nav svg { width: 20px; height: 20px; }
  .dl-lb__fig img { max-height: 68vh; }
}

/* ---------- Residencias: caracteristicas (p38) ---------- */
.dl-feat { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 28px; padding: 0; margin: 0; list-style: none; }
.dl-feat li {
  display: flex; align-items: flex-start; gap: 11px; padding: 13px 0;
  border-bottom: 1px solid rgba(7,32,49,.10); font-size: .94rem; color: #2b4757; line-height: 1.45;
}
.dl-feat li::before {
  content: ""; flex: none; width: 7px; height: 7px; margin-top: 7px;
  border-radius: 50%; border: 1.5px solid var(--acc);
}

/* La seccion de Amenidades (p39-40) se retiro a peticion de Mateo. De su
   bloque solo sobrevive el subtitulo, renombrado a .dl-h3 porque lo usa
   "Que hay alrededor" en Ubicacion. */
.dl-h3 {
  font-family: var(--font-head); font-weight: 600; font-size: 1.05rem;
  color: var(--midnight); margin: 0 0 16px;
}

/* ---------- Ubicacion (p40-41) ---------- */
.dl-loc { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(28px, 3.4vw, 52px); align-items: start; }
.dl-loc__map { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-card); border: 1px solid rgba(7,32,49,.12); }
.dl-map { width: 100%; height: 460px; }

/* ---- Pin del proyecto ----
   Mismo patron que el pin de la ficha del buscador (.zpinx): globo + pico +
   punto suelto sobre la coordenada. El globo va en --midnight, que es el color
   que ya usan los pines del sitio en su estado normal (--azul-sel es solo el
   estado activo del mapa de resultados). El pico es un cuadrado girado 45 que
   HEREDA el fondo y dos bordes blancos, asi el contorno sigue sin costura. */
.dl-pin { display: flex; flex-direction: column; align-items: center; pointer-events: none; }
/* Solo globo + punta, sin punto suelto (decision de Mateo).
   GEOMETRIA: Google ancla el contenido por su borde inferior centrado, y el
   ::after es ABSOLUTO — o sea no cuenta para el alto de la caja. Sin corregir
   nada, lo que queda sobre la coordenada es el borde de abajo del globo y la
   punta cuelga ~8px POR DEBAJO del sitio real. El cuadrado de 10px girado 45
   sobresale 10*raiz(2)/2 = 7,07px desde su centro, que esta 1px bajo el globo,
   asi que la punta baja 8,07px: por eso el translateY(-8px), que es el mismo
   numero que ya usa .zpin en assets/buscador.css. */
.dl-pin__b {
  position: relative; background: var(--midnight); color: #fff;
  font-family: var(--font); font-weight: 600; font-size: .8rem;
  padding: 7px 13px; border-radius: 9px; white-space: nowrap;
  border: 2px solid #fff; box-shadow: 0 3px 12px rgba(7,32,49,.38);
  transform: translateY(-8px);
  /* SIN overflow:hidden. Lo llevaba, con text-overflow:ellipsis para nombres
     largos, y recortaba justo el ::after — o sea el globo salia sin punta y no
     se sabia a que edificio apuntaba. Si algun nombre se pasa de largo, que el
     globo crezca; perder la punta cuesta mas que ganar unos pixeles. */
}
/* Punta: cuadrado girado 45 que HEREDA el fondo y se queda con dos bordes
   blancos, asi el contorno del globo continua sin costura por el pico. */
.dl-pin__b::after {
  content: ""; position: absolute; left: 50%; bottom: -6px; width: 10px; height: 10px;
  background-color: inherit; border-right: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: translateX(-50%) rotate(45deg);
}
.dl-loc__addr {
  display: flex; align-items: center; gap: 10px; margin: 0 0 18px;
  font-size: .95rem; color: var(--midnight); font-weight: 600;
}
.dl-loc__addr svg { width: 18px; height: 18px; flex: none; color: var(--acc); }
.dl-around { display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; list-style: none; padding: 0; margin: 18px 0 0; }
.dl-around li {
  padding: 11px 0; border-bottom: 1px solid rgba(7,32,49,.10);
  font-size: .92rem; color: #35505f; display: flex; align-items: center; gap: 9px;
}
.dl-around li::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--acc); flex: none; }

/* ---------- Por que invertir en la zona (p42): banda navy + imagen ----------
   Texto a la izquierda, foto a la derecha. La foto es de Downtown, no un render
   de Delano: la seccion habla de la ZONA, y poner ahi la torre responderia a
   otra pregunta. Sobre navy el acento pasa solo a --mist (ver la variable
   --acc arriba), asi que el filete y el antetitulo no hay que tocarlos. */
/* APILADO: texto a todo el ancho y la foto como BANDA debajo (peticion de Mateo,
   ago-2026: "la foto no deberia ir a la derecha, se ve terrible").
   Lo que estaba mal, medido: la foto iba en la mitad derecha en una tarjeta de
   591x443 contra un texto de 591x308, o sea 135px MAS ALTA que la columna que
   acompañaba, y encima es la unica imagen de cielo azul saturado de la pagina
   puesta sobre la banda navy. Resultado: lo mas brillante del documento,
   flotando, y ganandole el pulso al titular que deberia mandar.
   Ademas era la ultima seccion con reparto texto-izquierda / foto-derecha, que es
   exactamente la maqueta que se acababa de quitar de "El desarrollo".
   Como banda ocupa el ancho del contenedor y el recorte la convierte en un plano
   de paisaje, que es lo que la foto ES — antes iba forzada a 4/3, casi cuadrada.
   EL RECORTE ES 4/1 Y ESO ES DELIBERADO: a 21/9 la banda medía 531px y la seccion
   pasaba de 555 a 882px, o sea el arreglo engordaba la pagina justo despues de
   pedir apretarla, y una foto de cielo azul de 531px sobre navy sigue siendo lo
   mas ruidoso del documento. A 4/1 mide 310px, se lee como una franja, y el
   `object-position: center 46%` deja dentro el skyline y el paseo maritimo —que
   es el contenido util— tirando el cielo alto y el agua del primer plano.
   El `box-shadow` se cae: era negro al 34% SOBRE navy, o sea invisible. Lo unico
   que hacia era justificar el aspecto de "tarjeta flotante". */
/* DOS COLUMNAS EN ESCRITORIO (foto a la derecha) Y APILADO SOLO EN MOVIL.
   Historia, porque el archivo llego a decir lo contrario: la version original era
   dos columnas a TODOS los anchos —o sea a 390px salian dos columnas de ~170px, con
   la foto medio aplastada al lado de un parrafo de 20 caracteres por linea—. Mateo
   dijo "the pic should not be on right it looks terrible" y lo apile en todos los
   anchos, que se paso de largo: aclaro despues que "you were only supposed to update
   it below it for mobile view not desktop". Asi que la base vuelve a ser la de dos
   columnas y el apilado queda acotado al @media de abajo.
   El `box-shadow: 0 18px 48px rgba(0,0,0,.34)` del original NO vuelve: es negro al
   34% SOBRE navy, o sea invisible: no se pierde nada y evita fingir una tarjeta
   flotante que no se ve. */
.dl-zona {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(30px, 4vw, 64px); align-items: center;
}
/* `minmax(0,1fr)` y no `1fr`: el minimo automatico de `1fr` es el max-content del
   hijo, y en este repo eso ya desbordo la pagina dos veces. Aqui el parrafo puede
   encogerse, pero la columna de la foto no tiene por que. */
.dl-zona__texto .dl-lead { max-width: 56ch; }
.dl-zona__media { border-radius: var(--radius); overflow: hidden; }
/* En dos columnas la foto se dimensiona por PROPORCION, que es lo que la hace
   parecerse en alto a la columna de texto que tiene al lado (310px a 1440 contra
   ~300 de texto). Un `aspect-ratio` fijo dentro de una columna fluida es continuo:
   el escalon que documentaba el comentario viejo venia de CAMBIAR el valor de la
   proporcion en un breakpoint (4/1 arriba, 16/9 abajo), no de usar proporcion.
   `object-position: center 46%` mantiene dentro el skyline y el paseo maritimo,
   tirando el cielo alto y el agua del primer plano. */
.dl-zona__media img {
  display: block; width: 100%; aspect-ratio: 4/3;
  object-fit: cover; object-position: center 46%;
}
/* El corte va PEGADO a su regla base: escrito en los @media generales de mas
   abajo, uno de igual especificidad le ganaria por orden de fuente. */
@media (max-width: 900px) {
  .dl-zona { grid-template-columns: minmax(0, 1fr); gap: clamp(22px, 2.4vw, 32px); }
  /* Apilada, la foto ocupa el ancho entero, y ahi la proporcion 4/3 daria 621px de
     alto a 900px de ventana: una foto de cielo azul mas alta que toda la seccion.
     Por eso apilada se dimensiona por ALTO y no por proporcion. Es continuo dentro
     del tramo (190px de 320 a ~900). */
  .dl-zona__media img { aspect-ratio: auto; height: clamp(190px, 21vw, 310px); }
}

/* La seccion de Planos (p43-44) se retiro a peticion de Mateo. El PDF sigue
   accesible desde el boton "Ver planos" de la barra de datos. */

/* ---------- Precios (p44-45), al estilo .specs2 del v2 ----------
   Valores medidos sobre /proyectos/the-william: grid de 2 columnas con gap
   40/60; titulo de grupo 13.12px peso 700 en mayusculas con letter-spacing
   1.312px y filete inferior de 1px #D6DBE0 a 12px; filas en flex
   space-between de 7px sin borde; etiqueta 15.68px peso 400 en #5B6B78 y
   valor 15.68px peso 600 en navy, alineado a la derecha. */
.dl-specs { display: grid; grid-template-columns: 1fr 1fr; gap: 40px 60px; align-items: start; }
.dl-specs__group-title {
  font-family: var(--font); font-size: .82rem; font-weight: 700;
  color: var(--midnight); text-transform: uppercase; letter-spacing: .1em;
  margin: 0 0 6px; padding: 0 0 12px; border-bottom: 1px solid #D6DBE0;
}
.dl-specs__list { margin: 0; }
.dl-specs__row { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: 7px 0; }
.dl-specs__row dt { font-size: .98rem; font-weight: 400; color: #5B6B78; line-height: 1.5; }
.dl-specs__row dd { font-size: .98rem; font-weight: 600; color: var(--midnight); text-align: right; margin: 0; white-space: nowrap; }
/* Desglose de precio por tipologia, medido sobre .price-breakdown de
   /proyectos/viceroy-brickell: filas de 13.6px peso 400 en #5A7A8A, padding
   4px 0 y separador PUNTEADO de 1px #D1D8E5 — deliberadamente mas ligero que
   las filas normales del grupo, para que se lea como detalle y no compita con
   la cifra de entrada. Cerrado de inicio con max-height:0. */
.dl-price-toggle { cursor: pointer; user-select: none; }
.dl-price-toggle dt { display: inline-flex; align-items: center; gap: 7px; }
.dl-caret { font-size: .68rem; color: #5A7A8A; transition: transform .2s ease; display: inline-block; }
.dl-price-toggle.is-open .dl-caret { transform: rotate(180deg); }
.dl-price-toggle:hover dt, .dl-price-toggle:focus-visible dt { color: var(--midnight); }
.dl-price-breakdown { max-height: 0; overflow: hidden; transition: max-height .28s ease; }
.dl-price-breakdown.is-open { max-height: 220px; }
.dl-price-breakdown__row {
  display: flex; justify-content: space-between; gap: 16px; padding: 4px 0;
  border-bottom: 1px dotted #D1D8E5; font-size: .85rem; font-weight: 400; color: #5A7A8A;
}
.dl-price-breakdown__row:last-child { border-bottom: 0; }

.dl-specs__cta { margin-top: clamp(28px, 3.2vw, 44px); }
/* Los acabados son el quinto grupo de la reja y ocupan las dos columnas.
   Al vivir dentro de .dl-specs ya heredan su gap de 40px, asi que no llevan
   margen propio: la separacion con la fila de arriba es la misma que hay
   entre cualesquiera dos grupos. */
.dl-specs__group--ancho { grid-column: 1 / -1; }
.dl-specs__group--ancho .dl-feat { margin-top: 6px; }
.dl-note { font-size: .82rem; color: #6b8494; margin: 16px 0 0; font-style: italic; line-height: 1.5; }


/* ---------- FAQ (p46-47) ---------- */
.dl-faq { max-width: 880px; margin-inline: auto; }
.dl-faq__item { border-bottom: 1px solid rgba(7,32,49,.14); }
.dl-faq__q {
  width: 100%; appearance: none; background: none; border: 0; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding: 22px 4px; text-align: left; font-family: var(--font-head);
  font-weight: 500; font-size: 1.06rem; color: var(--midnight); line-height: 1.35;
}
.dl-faq__q:hover { color: #0d2f47; }
.dl-faq__ico { flex: none; width: 22px; height: 22px; position: relative; }
.dl-faq__ico::before, .dl-faq__ico::after {
  content: ""; position: absolute; background: var(--acc); border-radius: 2px;
  transition: transform .22s ease, opacity .22s ease;
}
.dl-faq__ico::before { left: 0; top: 10px; width: 22px; height: 2px; }
.dl-faq__ico::after { left: 10px; top: 0; width: 2px; height: 22px; }
.dl-faq__item.is-open .dl-faq__ico::after { transform: rotate(90deg); opacity: 0; }
.dl-faq__a { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.dl-faq__a p { margin: 0 0 24px; padding-right: 46px; line-height: 1.72; color: #4d6675; font-size: .96rem; }
/* Una respuesta puede traer lista (la de "por que invertir en Delano" son 10
   puntos). El acordeon mide scrollHeight al abrir, asi que el alto se ajusta
   solo; aqui basta con darle forma. */
.dl-faq__a p:last-child { margin-bottom: 24px; }
.dl-faq__a ul {
  margin: -10px 0 24px; padding: 0 46px 0 0; list-style: none;
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px 28px;
}
.dl-faq__a ul li {
  position: relative; padding: 7px 0 7px 18px;
  font-size: .94rem; line-height: 1.5; color: #4d6675;
}
.dl-faq__a ul li::before {
  content: ""; position: absolute; left: 0; top: 15px;
  width: 7px; height: 1.5px; background: var(--acc);
}
@media (max-width: 720px) { .dl-faq__a ul { grid-template-columns: 1fr; padding-right: 0; } }

/* ---------- Por que PFS (p48) ---------- */
.dl-serv { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; list-style: none; padding: 0; margin: 0; }
.dl-serv li {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16);
  border-radius: 12px; padding: 20px 20px; font-size: .93rem; color: var(--white);
  display: flex; align-items: center; gap: 12px; line-height: 1.45;
}
.dl-serv li svg { width: 17px; height: 17px; flex: none; color: var(--acc); }

/* ---------- Proyectos similares (p49) ---------- */
.dl-sim { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.dl-sim__card {
  display: block; text-decoration: none; border-radius: var(--radius);
  overflow: hidden; background: var(--white); border: 1px solid rgba(7,32,49,.12);
  box-shadow: var(--shadow-card); transition: transform .2s ease, box-shadow .2s ease;
}
.dl-sim__card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }
.dl-sim__media { position: relative; aspect-ratio: 3/2; background: var(--ivory); overflow: hidden; }
.dl-sim__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dl-sim__foot { padding: 15px 16px 18px; }
.dl-sim__name { display: block; font-family: var(--font-head); font-weight: 600; font-size: .99rem; color: var(--midnight); line-height: 1.28; margin-bottom: 5px; }
.dl-sim__loc { display: block; font-size: .81rem; color: #6b8494; }

/* La seccion "Recibe toda la informacion de Delano" (CTA final, p49) se quito
   por decision de Mateo. Sus reglas .dl-final se van con ella para no dejar CSS
   muerto; si vuelve, estan en el historial. */

/* ---------- Responsive (el prototipo es desktop-first) ---------- */
@media (max-width: 1180px) {
  .dl-gal__grid { grid-template-columns: repeat(3, 1fr); }
  .dl-serv { grid-template-columns: repeat(2, 1fr); }
  .dl-sim { grid-template-columns: repeat(3, 1fr); }
  .dl-feat { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1080px) {
  /* La fila de 6 cifras se aprieta antes que el resto de la pagina: es lo que la
     mantiene en UNA linea unos 130px mas abajo (48px de padding por celda x 6 son
     72px de ancho recuperados). */
  .dl-hero__datos li { padding: 8px 18px; }
}
@media (max-width: 900px) {
  .dl-loc, .dl-specs { grid-template-columns: 1fr; }
  .dl-gal__grid { grid-template-columns: repeat(2, 1fr); }
  .dl-gal__item--wide { grid-column: span 2; grid-row: auto; aspect-ratio: 16/9; }
  .dl-around { grid-template-columns: 1fr; }
}
/* ---------- La fila de datos en movil y tablet ----------
   Tres fallos medidos y arreglados aqui (ago-2026, "esto se ve raro en movil").
   Los tres eran de esta reja, no del contenido.

   1) `1fr 1fr` DESBORDABA LA PAGINA 16px a 320px. `1fr` es `minmax(AUTO,1fr)`, y
      ese minimo automatico es el max-content del hijo: como la cifra lleva
      `white-space:nowrap`, "Desde USD $800,000*" imponia 206px de columna cuando
      el contenedor entero mide 294. Con `minmax(0,1fr)` la columna ya puede
      encogerse. Es el mismo desbordamiento invisible que inflaba la pagina a
      336px y, de rebote, todo lo que se mide en % — las amenidades salian 43px
      fuera solo por esto.
   2) "Desde USD $800,000*" NO CABE en media pantalla, y no es cuestion de bajarle
      el cuerpo: esta medido en 206px a 1.04rem, 188 a .95rem y 179 a .90rem contra
      123px utiles a 320px. Asi que la celda del precio —y la de estado, para no
      dejar una huerfana al final— OCUPAN LA FILA ENTERA. Quedan cuatro filas
      (precio · 2031/90 · 421/studio-3 · estado) sin ninguna celda suelta y con el
      precio en una sola linea, que es como se tiene que leer la cifra que manda.
      Antes de esto probe reservar dos lineas por celda: cuadraba la reja pero la
      banda pasaba de 264 a 329px, y acababa de pedir la pagina mas apretada.
   3) `white-space:normal` se queda como red de seguridad: si algun dia el precio
      crece ("Desde USD $1,200,000*"), envuelve en vez de volver a desbordar.
   4) El rotulo lleva `line-height` explicito para que "Entrega estimada", que a
      320-360px va en dos lineas, no descuadre su fila mas de lo justo. */
@media (max-width: 620px) {
  .dl-feat, .dl-serv, .dl-sim { grid-template-columns: 1fr; }
}
/* EL CORTE DE LA REJA ES 1000px, y lo fija una MEDIDA, no el gusto. La fila de
   seis pide 914px a max-content (celdas 234·179·63·122·186·130) y el contenedor
   da el 92% del viewport: 920px a 1000, 902 a 980, 874 a 950. O sea:
     - por encima de 1000 los seis caben seguidos y cada rotulo en UNA linea;
     - entre 975 y 995 el flex todavia los deja en un renglon, pero mintiendo: lo
       consigue encogiendo las celdas hasta que "Entrega estimada" y
       "Habitaciones" se parten en dos lineas, asi que la fila se ve descuadrada
       aunque el contador de renglones diga 1. Por eso el corte NO va donde la
       fila envuelve (975) sino donde deja de caber COMODA (995 -> se redondea a
       1000, que deja 6px de holgura);
     - por debajo de 975 el flex la parte donde le toque —medido 5+1 a 920-960— y
       ese reparto trae dos problemas que un `nth-child` no puede resolver: una
       celda huerfana en el ultimo renglon y un filete divisor colgando a la
       izquierda de nada, porque cual celda abre linea depende de donde envuelva el
       flex y eso cambia con cada píxel de ancho.
   La reja de dos columnas reparte 1+2+2+1 sin huerfanas y con los filetes fijos.
   Y no, no hay una reja de tres columnas intermedia: cinco datos no se reparten en
   tres columnas sin dejar un hueco en el ultimo renglon, y por debajo de ~700px la
   columna se queda mas estrecha que los 206px que pide el precio.
   Este corte estuvo en 620, luego en 760 cuando el precio tenia renglon propio y
   abajo quedaban cinco datos, y ahora en 1000. Cada vez que cambia lo que va en la
   linea hay que volver a medir: mas contenido = la linea se rompe antes, y con el
   precio de vuelta en la fila son 234px mas. Este es el numero a revisar si algun
   dia cambia una cifra o un rotulo. */
/* PANEL: en movil la fila va sobre un velo propio, y es por CONTRASTE MEDIDO, no
   por gusto (peticion de Mateo, ago-2026: "fix the mobile version so that the desde
   and all of those can be properly and cleanly seen").
   El problema no era el scrim del hero sino la ALTURA de la fila. En escritorio los
   seis datos ocupan ~60px pegados al borde inferior, justo dentro de la elipse del
   scrim; apilada en reja mide 189px y sube hasta el 78% de la altura del hero, o
   sea se sale por arriba de la elipse y aterriza sobre lo mas claro y mas ruidoso
   de la foto (el resplandor del sol y el reflejo del agua de la marina).
   Medido celda a celda con el metodo de tres capturas: 5.08:1 en el peor caso a
   390px contra 9.15:1 a 1440. Pasa el 4.5 de WCAG, o sea NO era un fallo de
   accesibilidad — y por eso no saltaba en ninguna comprobacion — pero es la mitad
   de contraste que en escritorio y justo en las dos celdas que mas importan, el
   precio y la entrega.
   Subir el scrim del hero entero NO era la salida: apagaria el sol, que es lo mejor
   que tiene la foto, y el `.dl-hero__scrim` esta medido para no hacerlo (ver su
   bloque). El velo va donde esta el problema.
   Se probaron cinco variantes en un banco de capturas. Descartadas: solo filetes sin
   velo (el precio sigue cayendo sobre los edificios iluminados) y velo en degradado
   de .30 a .62 (mas bonito porque el borde de arriba se funde con el cielo, pero
   pone su parte MAS DEBIL justo detras del precio, que es la celda que se pidio
   arreglar). Gana el velo plano: el contraste no depende de en que fila caiga el
   dato.
   Y de paso arregla lo de "cleanly": con `gap:0` y filetes, las seis celdas se leen
   como una ficha tecnica. Antes los dos filetes verticales eran segmentos sueltos
   —el `row-gap:12px` los partia— y cada celda se centraba dentro de su mitad, asi
   que con rotulos de ancho muy distinto ("ENTREGA ESTIMADA" contra "PISOS") la reja
   se veia descuadrada aunque estuviera perfectamente alineada. */
@media (max-width: 1000px) {
  .dl-hero__datos {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    /* Sin hueco: las separaciones las dan los filetes, y asi el filete vertical es
       CONTINUO entre las dos filas del medio en vez de dos segmentos flotando. */
    gap: 0;
    background: rgba(7,32,49,.52);
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 2px;
    padding: 4px 0;
  }
  .dl-hero__datos li {
    padding: 12px 10px; border-left: 0;
    border-top: 1px solid rgba(255,255,255,.14);
  }
  .dl-hero__datos li:first-child { border-top: 0; }
  /* precio y estado a fila completa: 6 celdas = 1 + 2 + 2 + 1, sin huerfanas */
  .dl-hero__datos li:first-child,
  .dl-hero__datos li:last-child { grid-column: 1 / -1; }
  /* El filete va SOLO en la columna derecha, y con el precio ocupando la fila 1
     esa columna la forman los hijos 3 y 5 — o sea los IMPARES que no son ni el
     primero ni el ultimo. Ojo al reves: los pares 2 y 4 son la columna izquierda,
     asi que un `nth-child(odd)` que QUITE el filete pondria la linea del lado
     equivocado. */
  .dl-hero__datos li:nth-child(odd):not(:first-child):not(:last-child) {
    border-left: 1px solid rgba(255,255,255,.14);
  }
  .dl-hero__datos strong { white-space: normal; }
  .dl-hero__datos span { line-height: 1.25; }
}

/* Aqui vivian las reglas de la seccion "Como se compra" (bloque dl-dos, las dos
   tarjetas de Delano Collection contra Delano Residences). La seccion se retiro
   en ago-2026 a peticion de Mateo y estas reglas se fueron con ella: el porque
   esta en content/delano-proto/general.html y el codigo en el historial de git.
   Se conserva la leccion que documentaba este bloque, porque vale para cualquier
   otro que se escriba aqui abajo: sus cortes @media tenian que ir PEGADOS a sus
   reglas base y no en los @media de mas arriba de la hoja. Escrito despues, un
   @media de igual especificidad (0,1,0) pierde por orden de fuente — con la
   regla de dos columnas ganando a la de una, la seccion se quedaba en dos
   columnas a 390px y empujaba el documento a 596px de ancho. Sin ningun error:
   la segunda tarjeta simplemente vivia fuera de la pantalla. */

/* ---------- Amenidades: cuatro bloques por tipo + banda de servicios ----------
   Aqui vivia la TORRE (.dl-torre, .dl-piso y sus modificadores, mas el plegado
   .dl-piso--mas / .dl-amen.is-open): una fila por piso con su numero. Se retiro
   en ago-2026 y el porque esta escrito en el marcado
   (content/delano-proto/amenidades.html); esta en el historial de git.
   Dos cosas de ese bloque que conviene no perder aunque el CSS se haya ido:
     - el plegado se controlaba por CLASE del contenedor y NUNCA con el atributo
       `hidden`, porque .dl-piso declaraba display:grid y una regla de clase le
       gana al [hidden] de la hoja del navegador — el elemento seguiria a la
       vista. Es un fallo que este sitio ya tuvo con el contador del boton de
       filtros;
     - los cortes @media van PEGADOS a su regla base y no arriba de la hoja: la
       media query de .dl-piso estaba escrita ANTES de sus reglas base, misma
       especificidad, asi que perdia por orden de fuente a todos los anchos y en
       movil no se aplicaba nunca.

   Dos columnas y no cuatro: con cuatro, cada render caeria a ~290px y cada linea
   de lista a unos 35 caracteres. Con dos, la foto sale a 594px —0,6x del archivo
   de 1000px, o sea nitida tambien en pantalla de 2x— y la lista respira. */
.dl-amgrid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(30px, 3.6vw, 54px) clamp(24px, 3vw, 44px);
}
.dl-amcard { margin: 0; }
.dl-amcard__fig { margin: 0 0 16px; }
/* El <button> es el disparador del visor y no debe parecer un boton: se le
   quitan los estilos de control y se le pone el cursor de ampliar. `display:
   block` + `width:100%` son necesarios, no cosmeticos — un boton es
   inline-block y se encogeria a su contenido en vez de llenar la columna. */
.dl-amcard__zoom {
  display: block; position: relative; width: 100%; padding: 0;
  border: 1px solid var(--hair); border-radius: 6px; overflow: hidden;
  background: none; cursor: zoom-in; -webkit-appearance: none; appearance: none;
}
/* Las cuatro imagenes son 1000x750 y llevan width/height en el marcado, asi que
   el hueco queda reservado antes de que carguen y no hay salto de maqueta. Nada
   de height:100%: con una imagen en flujo eso resuelve contra una altura
   indefinida y estira el contenedor — le paso al grid de las landings con una
   foto vertical del MLS. */
.dl-amcard__zoom img {
  display: block; width: 100%; height: auto;
  transition: transform .5s cubic-bezier(.22, 1, .36, 1);
}
.dl-amcard__zoom:hover img { transform: scale(1.03); }
.dl-amcard__zoom:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; }
/* La lupa se ve SIEMPRE, no solo al pasar el raton: en tactil no hay hover y sin
   ella nada dice que la foto se amplia. El hover la refuerza, no la revela — la
   regla del sitio es que el hover puede reforzar pero nunca ser la unica via. */
.dl-amcard__lupa {
  position: absolute; right: 10px; bottom: 10px;
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(7, 32, 49, .62); color: var(--white);
  transition: background .18s ease;
}
.dl-amcard__zoom:hover .dl-amcard__lupa { background: rgba(7, 32, 49, .88); }
.dl-amcard__lupa svg { width: 17px; height: 17px; }
.dl-amcard__t {
  font-family: var(--font-head); font-weight: 600;
  font-size: clamp(1.04rem, 1.3vw, 1.2rem); line-height: 1.3;
  color: var(--midnight); margin: 0 0 12px;
}
/* Punto propio en vez del bullet del navegador: el nativo cuelga fuera de la
   caja y solo se colorea con ::marker, que no llega a todos los navegadores.
   Esta lista la comparten las cuatro tarjetas y los dos grupos de servicios. */
.dl-amcard__list { list-style: none; margin: 0; padding: 0; }
.dl-amcard__list li {
  position: relative; padding-left: 17px; margin-bottom: 9px;
  font-size: .94rem; line-height: 1.6; color: #35505f;
}
.dl-amcard__list li:last-child { margin-bottom: 0; }
.dl-amcard__list li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--acc);
}

/* Banda de servicios. No es una quinta tarjeta porque no tiene render, y una
   tarjeta con el hueco de la foto vacio se lee como una imagen que no cargo.
   La separa un filete de 1px, que es el idioma documentado de este sitio para
   marcar un limite — no un fondo tintado. */
.dl-amserv {
  margin-top: clamp(36px, 4.2vw, 60px);
  padding-top: clamp(24px, 2.6vw, 34px);
  border-top: 1px solid var(--hair);
}
/* Centrada a peticion de Mateo (ago-2026). Se centran el titular, los dos
   rotulos y la nota; las LISTAS se quedan alineadas a la izquierda, porque un
   texto centrado con punto delante deja los puntos en diagonal y cada linea
   empezando en un sitio distinto — se lee peor cuanto mas largo es el item.
   Y la reja se topa en 880px con `margin-inline:auto` en vez de ocupar los 1.240
   del contenedor: estirada, la columna de la derecha arrancaba en x=740 con el
   item mas largo midiendo 300px, o sea 300px de texto y 300 de aire. Ojo con el
   `auto` sin ancho: en un hijo de grid o flex, `margin:0 auto` ENCOGE al ancho
   del contenido en vez de centrar — por eso el max-width va aqui y el bloque es
   hijo de un contenedor en flujo normal. */
.dl-amserv__t {
  font-family: var(--font-head); font-weight: 600;
  font-size: clamp(1.1rem, 1.4vw, 1.3rem); color: var(--midnight);
  margin: 0 0 clamp(18px, 2vw, 26px); text-align: center;
}
.dl-amserv__cols {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(22px, 2.6vw, 44px);
  max-width: 880px; margin-inline: auto;
}
.dl-amserv__st {
  font-family: var(--font); font-size: .74rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--acc-ink);
  margin: 0 0 12px; padding-bottom: 9px; border-bottom: 1px solid var(--hair);
  text-align: center;
}
.dl-amserv__nota {
  font-size: .78rem; color: #6b8494; text-align: center;
  margin: clamp(20px, 2.2vw, 28px) 0 0;
}
/* Las listas de servicios se centran como BLOQUE, no como texto: cada una se
   encoge a su contenido (`width:max-content`) y se centra en su columna, asi que
   los puntos siguen en una vertical y el conjunto queda equilibrado. El
   max-width evita que un item largo se salga si algun dia crece. */
.dl-amserv__grupo .dl-amcard__list {
  width: max-content; max-width: 100%; margin-inline: auto;
}

/* Los cortes van PEGADOS a sus reglas base, no en los @media de mas arriba de la
   hoja: escritos despues, un @media de igual especificidad les ganaria por orden
   de fuente y no se aplicaria nada. */
@media (max-width: 560px) {
  /* Una columna: a 390px el contenedor mide 359, asi que dos por fila dejarian la
     render en 174x131 —mas miniatura que foto— y la lista en 20 caracteres.
     `minmax(0, 1fr)` y NO `1fr`: son cosas distintas y aqui la diferencia
     desbordaba la pagina 43px a 320px. `1fr` es `minmax(AUTO, 1fr)`, y ese minimo
     automatico es el max-content del hijo — que en los grupos de servicios es
     literal, porque la lista lleva `width: max-content` para centrarse como
     bloque. O sea el item mas largo ("Seguridad 24 horas con acceso controlado")
     imponia 350px de columna dentro de un contenedor de 294. El `max-width:100%`
     de la lista no lo evita: se resuelve contra una columna que ya crecio.
     Es el mismo fallo que tenia la barra de datos con `1fr 1fr`. */
  .dl-amgrid { grid-template-columns: minmax(0, 1fr); }
  .dl-amserv__cols { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Barra sticky de conversion: RETIRADA (ago-2026) ----------
   Aqui vivian `.dl-sticky`, `.dl-sticky__cta` y sus dos @media. Mateo la quito y
   pidio el CTA en la banda del menu (`.dl-menu__asesor`), que al ser pegajosa deja
   el boton siempre a la vista en vez de sacarlo pasados 640px de scroll.
   Se va con ella `body:has(.dl-sticky.show) .wa-float { display: none }`, o sea el
   boton flotante de WhatsApp YA NO SE ESCONDE NUNCA. Existia porque `.wa-float`
   lleva z-index 100000001 y a <=560px caia justo encima de la barra; sin barra no
   hay con que chocar, y esconderlo seria quitar una salida sin motivo.
   Dos cosas que documentaba este bloque y conviene no perder si vuelve:
     - `fill: currentColor` en el svg del icono NO es opcional: el sprite #icon-wa
       no declara fill propio, asi que sobre navy sale NEGRO, como una mancha;
     - no heredar de `.proj-sticky` de styles.css (ver el marcado en cascara.html).
   Todo esta en el historial de git. */

/* Aqui vivia `.dl-hero__link.is-actual`, el marcado de la pestana abierta de
   cuando el prototipo eran CINCO paginas y el menu era una barra de pestanas (a
   imagen de miamicondoinvestments.com/delano-residences-miami: Profile /
   Available / Media / Walk Score). Al fusionar en una pagina, los rotulos pasaron
   a ser anclas y ninguna es "la actual", asi que la regla se quedo sin HTML que
   la use: ningun elemento lleva `is-actual` desde entonces. Se retira con el
   cambio de nombre a `.dl-menu__link` (ago-2026) para no dejar apuntando a una
   clase que ya no existe. Esta en el historial de git si el menu vuelve a ser
   una barra de pestanas entre paginas. */

/* ============================================================
   TABLA DE PLANTAS (pagina Residencias)
   Los datos salen del PDF del desarrollador (assets/planos/delano.pdf, 24
   plantas en las paginas pares 2-48). Ese PDF NO tiene capa de texto
   extraible, asi que se leyeron renderizando las paginas y recortando la
   franja de datos de cada una — no hay forma de sacarlos con un regex.
   ============================================================ */
/* Especificaciones y Plantas son las dos mitades de UNA pagina, no dos temas
   distintos, y con el cierre y la apertura de .dl-sec sumaban ~184px de blanco a
   1440 — con el agravante de que la reja de especificaciones deja su columna
   izquierda corta, asi que el hueco parecia aun mayor. Se acercan recortando ese
   par concreto (peticion de Mateo, ago-2026). El filete de 1px entre secciones se
   queda: es lo que sigue marcando el limite ahora que no hay distancia. */
.dlp #especificaciones { padding-bottom: clamp(22px, 2.2vw, 32px); }
.dlp #plantas { padding-top: clamp(26px, 2.6vw, 38px); }

.dl-plantas { margin-top: clamp(26px, 3vw, 40px); }
.dl-plantas__grupo + .dl-plantas__grupo { margin-top: clamp(34px, 4vw, 56px); }
/* A la IZQUIERDA, pegada al borde de su tabla (peticion de Mateo, ago-2026).
   Estuvo centrada unas horas —el mismo dia se pidio centrar las cabeceras de
   esta seccion y luego devolver estas dos—, y la version de la izquierda es la
   que arranca donde arranca la primera columna de la tabla que encabeza.
   La cabecera de la SECCION sigue centrada (.dl-head--center en el HTML): esa
   no se toco.
   `justify-content` y no `text-align`: en un contenedor flex el text-align no
   mueve los hijos. Aqui vale flex-start, pero se deja escrito en vez de borrar
   la propiedad para que se lea la decision. El filete inferior siempre ocupo el
   ancho del grupo —es la linea que separa el titulo de su tabla— y no cambia. */
.dl-plantas__cab {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-start;
  gap: 8px 16px;
  padding-bottom: 12px; border-bottom: 2px solid var(--midnight); margin-bottom: 0;
}
.dl-plantas__nombre {
  font-family: var(--font-head); font-weight: 600; font-size: 1.24rem;
  color: var(--midnight); margin: 0;
}
.dl-plantas__meta { font-size: .82rem; color: #6b8494; font-weight: 600; }
.dl-tabla-envoltura { overflow-x: auto; }
.dl-tabla {
  width: 100%; border-collapse: collapse; font-size: .9rem;
  font-variant-numeric: tabular-nums;
}
.dl-tabla th, .dl-tabla td {
  text-align: right; padding: 11px 10px; border-bottom: 1px solid var(--hair);
  white-space: nowrap;
}
.dl-tabla th:first-child, .dl-tabla td:first-child,
.dl-tabla th:nth-child(3), .dl-tabla td:nth-child(3) { text-align: left; }
.dl-tabla thead th {
  font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
  color: #6b8494; font-weight: 700; border-bottom: 1px solid var(--hair);
}
.dl-tabla tbody tr:hover { background: var(--ivory); }
.dl-tabla__planta { font-family: var(--font-head); font-weight: 600; color: var(--midnight); }
.dl-tabla__nada { color: #9aabb6; }
.dl-plantas__nota {
  font-size: .84rem; color: #6b8494; line-height: 1.6;
  margin: 14px 0 0; max-width: 78ch;
}
@media (max-width: 560px) {
  .dl-tabla { font-size: .84rem; }
  .dl-tabla th, .dl-tabla td { padding: 9px 7px; }
}

/* ============================================================
   TARJETAS DE DESARROLLO (pagina Desarrollos similares)
   ============================================================
   El componente es .hr-dev de styles.css, el MISMO del home — aqui solo se
   corrige la alineacion entre tarjetas, a peticion de Mateo (ago-2026): el
   "Desde ..." y su filete quedaban a alturas distintas segun la tarjeta.

   CAUSA: el nombre ocupa una o dos lineas ("One Twenty Brickell" contra "The
   Residences at Mandarin Oriental"), y todo lo que va debajo se desplaza con el.
   Medido a 1440 antes del arreglo: las de nombre corto tenian el precio 22px mas
   arriba que las de nombre largo. Es exactamente el fallo que styles.css ya
   resolvio para .hr-dev__loc (`min-height:2.6em`, ver su comentario) — el mismo
   tratamiento nunca se le dio al nombre.

   SE ARREGLA POR DOS VIAS, y las dos hacen falta:
     1) `min-height` de dos lineas en el nombre: iguala el bloque de arriba, asi
        que el filete del precio no queda flotando sobre un hueco.
     2) `margin-top:auto` en el PRECIO en vez de en el CTA: las tarjetas ya son de
        igual alto (la reja es flex y estira), asi que anclar el bloque
        precio+boton abajo garantiza la alineacion aunque algun dia un nombre
        ocupe tres lineas o falte la ciudad. Solo (1) se rompe en ese caso.
     El `margin-top:auto` tiene que MOVERSE, no duplicarse: con dos margenes auto
     en la misma columna flex el hueco sobrante se reparte entre los dos y
     aparece aire encima del boton. Por eso el CTA baja a 0 y su separacion la
     da el `gap:8px` del .hr-dev__body.

   VA ACOTADO A .dlp: tocar .hr-dev en styles.css arreglaria tambien el home
   —que tiene el MISMO desajuste, comprobado— pero eso son las 3 index y un
   cambio que nadie ha pedido. Si algun dia se sube, estas cuatro lineas se
   borran de aqui y se ponen alli. */
.dlp .hr-dev__name { min-height: 2.4em; }   /* 2 lineas a line-height 1.2 */
.dlp .hr-dev__price { margin-top: auto; }
.dlp .hr-dev__cta { margin-top: 0; }