/* Ficha miami-grovenor: lo propio de esta ficha, siempre acotado a [data-ficha="miami-grovenor"] (V12, puente 4420). Una mano por sección: cada ventana escribe SOLO entre las marcas de la suya. */ /* == heroe == */ /* W1 (DECIDIDO 4477): de 900 a 1439 la columna del texto llega al ~46 % del ancho y ahí el velo común ya es casi transparente; con la foto del salón (más clara) el párrafo bajaba a p99 ≈3 a 1100. El mismo velo, con sus paradas estiradas hasta donde acaba el texto; a 1440+ queda el común. */ @media (min-width:900px) and (max-width:1439.98px){ [data-ficha="miami-grovenor"] .heroe--proyecto[style*="--heroe-velo"] .heroe__fondo::after{background:linear-gradient(90deg,rgba(0,0,0,calc(.83 * var(--heroe-velo))) 0%,rgba(0,0,0,calc(.75 * var(--heroe-velo))) 40%,rgba(0,0,0,calc(.4 * var(--heroe-velo))) 58%,rgba(0,0,0,0) 74%),linear-gradient(0deg,var(--negro) 0%,rgba(0,0,0,.6) 9%,rgba(0,0,0,.18) 20%,rgba(0,0,0,0) 30%),linear-gradient(180deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,0) 14%)} } /* W1 (PROPUESTA de V12, filas 4, 6 y 7; DECIDIDO 4737): desde 1280, botones con el tamaño de la diapositiva 1, la fila de datos sobre una banda oscura translúcida (velo, no color) con la letra y el espaciado de la diapositiva y «Desplaza para descubrir» encima de la banda; el héroe sigue en 900. */ @media (min-width:1280px){ [data-ficha="miami-grovenor"] .heroe--proyecto .proyecto-botones{gap:1rem} [data-ficha="miami-grovenor"] .heroe--proyecto .proyecto-botones .boton{padding-inline:2.4rem;font-size:.97rem} [data-ficha="miami-grovenor"] .heroe--proyecto .proyecto-datos-fila{background:rgba(0,0,0,.32)} [data-ficha="miami-grovenor"] .heroe--proyecto .proyecto-datos dd{font-size:.97rem} [data-ficha="miami-grovenor"] .heroe--proyecto .proyecto-datos dt{letter-spacing:0} [data-ficha="miami-grovenor"] .heroe--proyecto .proyecto-bajar{transform:translateY(-8.1rem)} } /* W1 (V9/V12 vivo4732): «MIAMI» del titular, en el oro común, quedaba sobre la piedra ámbar de la portada del cliente (p99 3,25 a 1440): una mancha oscura solo detrás del titular (capa aparte; el velo y el oro no cambian, 4428). */ @media (min-width:900px){[data-ficha="miami-grovenor"] .heroe--proyecto .heroe__fondo::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(34% 26% at 17% 33%,rgba(0,0,0,.5) 0%,rgba(0,0,0,.3) 55%,rgba(0,0,0,0) 100%)}} /* Contraste del texto del héroe (V9 4591, p99 por línea: párrafo 2,27-2,89 y subtítulo 3,68 a 2356, párrafo 2,73 a 1440): oscurecimiento local bajo el subtítulo y el párrafo (x -3..41 %, y 43..77 % del héroe), sin tocar el velo general ni el encuadre (4477). Desde 1100. */ @media (min-width:1100px){[data-ficha="miami-grovenor"] .heroe--proyecto .heroe__fondo::before{background:radial-gradient(34% 26% at 17% 33%,rgba(0,0,0,.5) 0%,rgba(0,0,0,.3) 55%,rgba(0,0,0,0) 100%),radial-gradient(ellipse 22% 17% at 19% 60%,rgba(0,0,0,.42) 0%,rgba(0,0,0,.42) 70%,rgba(0,0,0,0) 100%)}} @media (min-width:1100px) and (max-width:1279.98px){[data-ficha="miami-grovenor"] .heroe--proyecto .proyecto-datos-fila{background:rgba(0,0,0,.5)}} /* la franja de datos a 1100×800 daba 4,19 (<4,5): el velo de .32 empezaba en 1280 */ /* == fin heroe == */ /* == proyecto == */ /* W1 (revisión 13:3x): solo desde 1280 px, donde se midió contra la diapositiva; en 390/768/1100 queda lo servido. */ /* Fila 8 (V12 2989189): «EL / PROYECTO» en la diapositiva es una letra muy estrecha (mayúscula 54 px en 236 px); la Didot servida mide 30 px en 234. Letra mayor y comprimida en horizontal para que quepa en su columna. */ /* Fila 10: «GROVENOR HOUSE» ≈17,7 px (218 px de ancho) y «MIAMI» ≈14,6 px (53 px), frente a 13,6 y 10,2 px servidos. */ /* Fila 12: fotos de la derecha de 355×205 (1,73:1) centradas en su columna, como la diapositiva (servidas 359×240, 1,5:1). */ @media (min-width:1280px){ [data-ficha="miami-grovenor"] .proyecto-b:not(.proyecto-b--sin-fotos):not(.proyecto-b--plano-grande)>.proyecto-b__texto .proyecto-b__titular{font-size:3.6rem;transform:scaleX(.72);transform-origin:left top;margin-bottom:.4rem} [data-ficha="miami-grovenor"] .proyecto-b .proyecto-ref span:first-child{font-size:1.1rem} [data-ficha="miami-grovenor"] .proyecto-b .proyecto-ref span:last-child{font-size:.91rem} [data-ficha="miami-grovenor"] .proyecto-b__fotos{align-content:center;grid-template-rows:none;row-gap:9px} [data-ficha="miami-grovenor"] .proyecto-b__fotos figure{aspect-ratio:355/205;height:auto;min-height:0} } /* W1 (PROPUESTA filas 14 y 15; DECIDIDO 4737): desde 1280, las cifras de «El proyecto» sin la regla corta de encima y la franja negra con la letra sans de la diapositiva 2 (≈16 px). */ @media (min-width:1280px){ [data-ficha="miami-grovenor"] .proyecto-cifras::before{display:none} [data-ficha="miami-grovenor"] .proyecto-franja__datos{font-family:var(--fuente-texto);font-size:1rem} } /* == fin proyecto == */ /* == espacios == */ /* W1 (PROPUESTA filas 18-21; DECIDIDO 4737, sección de W1): desde 1280, «Los espacios» como la diapositiva 3: «GROVENOR HOUSE» y «MIAMI» del mismo tamaño y espaciados, subtítulo mayor y espaciado, texto y cifras mayores. */ @media (min-width:1280px){ [data-ficha="miami-grovenor"] .proyecto-diapositiva--espacios .proyecto-ref:not(.proyecto-nota) span:first-child,[data-ficha="miami-grovenor"] .proyecto-diapositiva--espacios .proyecto-ref:not(.proyecto-nota) span+span{font-size:1.3rem;letter-spacing:.17em} /* con el prefijo de la regla común (0,4,1), o pierde */ [data-ficha="miami-grovenor"] .proyecto-c__texto .proyecto-subtitulo{font-size:1.5rem;letter-spacing:.14em} [data-ficha="miami-grovenor"] .proyecto-c__texto .proyecto-texto{font-size:.97rem;line-height:1.26} [data-ficha="miami-grovenor"] .proyecto-c__texto .proyecto-cifras dd{font-size:1.12rem} } /* W1 (V12 vivo4732): de 1100 a 1279 las 3 cifras de «Los espacios» en 2 filas, como en Marina Gate: en una fila «BEDROOMS» tocaba la raya de al lado (hueco 2-3 px, −3 en en). */ @media (min-width:1100px) and (max-width:1279.98px){ [data-ficha="miami-grovenor"] .proyecto-diapositiva--espacios .proyecto-cifras{flex-wrap:wrap;row-gap:var(--e-3)} [data-ficha="miami-grovenor"] .proyecto-diapositiva--espacios .proyecto-cifras>div{flex:0 0 auto} } /* == fin espacios == */ /* == galeria == */ /* == fin galeria == */ /* == pie == */ /* == fin pie == */ /* == Grovenor d2 == */ /* W10 (puente/V9, revfinal2-grovenor 3.): las 3 fotos laterales de «El proyecto» llevaban el velo común (.62 en 2,6 rem y 5 rem de alto), muy visible frente a la diapositiva 2, que casi no lo tiene. Medido en pod (w10-gro-m1 sobre pt701, 2356×1216): luminancia bajo el rótulo sin velo p95 0,40-0,57 (Comedor); con .5 el rótulo blanco queda a ≥5,8:1 (p99), con la caída justo por encima del rótulo (2,5 rem; el texto ocupa de 0,9 a 2,4 rem). Mismas proporciones que la diapositiva (412×238 = 1,73, como el figure 355/205). */ [data-ficha="miami-grovenor"] .proyecto-b__fotos figure:has(>figcaption)::after{height:3.8rem;background:linear-gradient(0deg,rgba(0,0,0,.5) 0,rgba(0,0,0,.5) 2.5rem,rgba(0,0,0,0) 100%)} /* == fin Grovenor d2 == */ /* == Grovenor d3 (V3, puente 23-oct 04:5x) == */ /* «Los espacios» (diap. 3, 1672 px, medida por píxeles): galería de x 405 a 1671; fila 1: salón 727 | comedor+cocina 531 (57,4 / 42,2 %), fila 2: dormitorio principal 662 | segundo 597 (52,3 / 47,1 %); alto 77-847: filas 241 / 209 / 314 (31,3 / 27,1 / 40,7 %). Con 24 columnas la fila 2 salía en 54,2 % (+≈24 px a 1440): rejilla de 100 columnas solo en esta ficha (el YAML y su prueba no se tocan). */ /* Solo desde 1000: los 99 huecos de la rejilla (≈6,4 px) suman ≈634 px fijos y por debajo de ≈965 px de ventana las columnas valen 0 y la página desborda (W8, gro-d3-768-1024); de 700 a 999 queda la rejilla de 24 columnas del YAML. */ @media (min-width:1000px){ [data-ficha="miami-grovenor"] .proyecto-diapositiva--espacios .proyecto-c__galeria--mosaico{grid-template-columns:repeat(100,minmax(0,1fr));grid-template-rows:31.3fr 27.1fr 40.7fr} [data-ficha="miami-grovenor"] .proyecto-diapositiva--espacios .proyecto-c__galeria--mosaico li:nth-child(1){grid-area:1/1/3/59} [data-ficha="miami-grovenor"] .proyecto-diapositiva--espacios .proyecto-c__galeria--mosaico li:nth-child(2){grid-area:1/59/2/101} [data-ficha="miami-grovenor"] .proyecto-diapositiva--espacios .proyecto-c__galeria--mosaico li:nth-child(3){grid-area:2/59/3/101} [data-ficha="miami-grovenor"] .proyecto-diapositiva--espacios .proyecto-c__galeria--mosaico li:nth-child(4){grid-area:3/1/4/54} [data-ficha="miami-grovenor"] .proyecto-diapositiva--espacios .proyecto-c__galeria--mosaico li:nth-child(5){grid-area:3/54/4/101} } /* == fin Grovenor d3 == */ /* == Grovenor d3: recorte de las 5 fotos como la diapositiva 3 + velo mínimo del rótulo (W8, medida gro-d3-cand) == */ /* Se añade DESPUÉS del bloque de V3 (rejilla de 100 columnas). Valores medidos con SIFT/NCC de cada foto original contra su hueco en DIAPOSITIVA-3.png (la diapositiva encuadra ~1,03-1,19 veces más cerca que «cover»): por debajo de 1920 solo cambia object-position (nunca se amplía); desde 1920, ampliación ≤×1,2 con transform-origin para que la ventana case. Velo: la diapositiva NO lleva degradado (α≈0 medida contra la foto original); el servido pone .62 en 5rem. Aquí solo el mínimo que deja el rótulo (blanco) a ≥4,5:1 (p99 del fondo, mezcla en sRGB), por foto, en 3,2vw. */ [data-ficha="miami-grovenor"] .proyecto-diapositiva--espacios .proyecto-c__galeria--mosaico li:nth-child(1) img{object-position:30% 50%} [data-ficha="miami-grovenor"] .proyecto-diapositiva--espacios .proyecto-c__galeria--mosaico li:nth-child(2) img{object-position:50% 66%} [data-ficha="miami-grovenor"] .proyecto-diapositiva--espacios .proyecto-c__galeria--mosaico li:nth-child(3) img{object-position:50% 43%} [data-ficha="miami-grovenor"] .proyecto-diapositiva--espacios .proyecto-c__galeria--mosaico li:nth-child(4) img{object-position:50% 75%} [data-ficha="miami-grovenor"] .proyecto-diapositiva--espacios .proyecto-c__galeria--mosaico li:nth-child(5) img{object-position:50% 100%} /* V6 (W8 gro-vivo-pt729, puente): por debajo de 1440 el salón (30% 50%) cortaba el sillón rojo por la izquierda (visible 42 % a 700, 48 % a 768, 53 % a 800; roza el borde de 900 a 1099). El sillón y el puf ocupan x 4-42 % de la foto: con 5 % la ventana empieza en ≈0,6-2,9 % (medido en pod) y los incluye enteros a 700 (ventana 42 %) y en adelante. */ @media (max-width:1439.98px){[data-ficha="miami-grovenor"] .proyecto-diapositiva--espacios .proyecto-c__galeria--mosaico li:nth-child(1) img{object-position:5% 50%}} @media (min-width:1920px){ [data-ficha="miami-grovenor"] .proyecto-diapositiva--espacios .proyecto-c__galeria--mosaico li:nth-child(1) img{object-position:31% 50%;transform:scale(1.075);transform-origin:50% 100%} [data-ficha="miami-grovenor"] .proyecto-diapositiva--espacios .proyecto-c__galeria--mosaico li:nth-child(2) img{object-position:50% 66%;transform:scale(1.19);transform-origin:63% 50%} [data-ficha="miami-grovenor"] .proyecto-diapositiva--espacios .proyecto-c__galeria--mosaico li:nth-child(3) img{object-position:50% 43%;transform:scale(1.2);transform-origin:46% 50%} [data-ficha="miami-grovenor"] .proyecto-diapositiva--espacios .proyecto-c__galeria--mosaico li:nth-child(4) img{object-position:50% 76%;transform:scale(1.175);transform-origin:34% 50%} [data-ficha="miami-grovenor"] .proyecto-diapositiva--espacios .proyecto-c__galeria--mosaico li:nth-child(5) img{object-position:50% 100%;transform:scale(1.2);transform-origin:88% 100%} } @media (min-width:700px){ [data-ficha="miami-grovenor"] .proyecto-diapositiva--espacios .proyecto-c__galeria--mosaico figure:has(>figcaption)::after{height:3.2vw;background:linear-gradient(0deg,rgba(0,0,0,var(--velo,.4)) 0,rgba(0,0,0,var(--velo,.4)) 56%,rgba(0,0,0,0) 100%)} [data-ficha="miami-grovenor"] .proyecto-diapositiva--espacios .proyecto-c__galeria--mosaico li:nth-child(1) figure{--velo:.36} [data-ficha="miami-grovenor"] .proyecto-diapositiva--espacios .proyecto-c__galeria--mosaico li:nth-child(2) figure{--velo:.43} [data-ficha="miami-grovenor"] .proyecto-diapositiva--espacios .proyecto-c__galeria--mosaico li:nth-child(3) figure{--velo:.31} [data-ficha="miami-grovenor"] .proyecto-diapositiva--espacios .proyecto-c__galeria--mosaico li:nth-child(4) figure{--velo:.21} [data-ficha="miami-grovenor"] .proyecto-diapositiva--espacios .proyecto-c__galeria--mosaico li:nth-child(5) figure{--velo:.27} } /* == fin Grovenor d3 (W8) == */ /* W7 (puente 23-oct, 1440 cuenta): titular del héroe a 1100-1440 px ×1,13 (a 1440×900 las líneas del titular medían 0,88/0,82/0,84 de la diap. 1; con ×1,13 ≥0,91). El héroe sigue entrando: el zoom por altura (--zc) y el pie no cambian; medido por DOM con este CSS inyectado a 1440×810, 1280×720, 1440×900 y 1100×700 (botones a ≥120 px sobre la franja de datos, sin desborde). */ @media (min-width:1100px) and (max-width:1440px){ [data-ficha="miami-grovenor"] .heroe--proyecto[style*="--heroe-titular"] .proyecto-titular{font-size:calc(min(clamp(2.5rem,1rem + calc(4.2*var(--vw)),6rem),calc(min(46rem,calc(46*var(--vw))) / (var(--palabra,8) * .72))) * var(--heroe-titular) * 1.13)!important} } /* Revisión de maqueta (DECIDIDO 5527, W11): la franja negra con los huecos de sus diapositivas (texto al 55,4 % y 57,7 % del ancho en las diap. 2 y 3; servía 49,5 %). Solo los huecos alrededor de los «·» (span .proyecto-franja__sep de la plantilla), no los de dentro de cada rótulo. */ @media (min-width:1100px){ [data-ficha="miami-grovenor"] .proyecto-diapositiva--proyecto .proyecto-franja__sep{word-spacing:.62em} [data-ficha="miami-grovenor"] .proyecto-diapositiva--espacios .proyecto-franja__sep{word-spacing:.89em} } /* Revisión de maqueta (DECIDIDO 5527, W11): «170 m²» con la m minúscula como sus diapositivas (el YAML de la franja ya va en mayúsculas). */ @media (min-width:1100px){[data-ficha="miami-grovenor"] .proyecto-diapositiva .proyecto-franja__datos{text-transform:none}} /* Revisión de maqueta (DECIDIDO 5527, W11): «Los espacios» con la columna de texto al 24 % como la diapositiva 3 (las fotos empezaban al 27,4 %, la diap. al 24,2 %), con el subtítulo menos espaciado y equilibrado («INTERIORISMO / DE LUJO EN MIAMI» en 2 renglones) y el párrafo a .9rem para que la sección no crezca (altos a 1440/1920/2356: 755/1142/1401 frente a 755/1144/1404). Desde 1440 (a 1280 la columna no da para el subtítulo). «El proyecto»: subtítulo del tamaño de la diapositiva 2 («ARQUITECTURA Y / DISTRIBUCIÓN» en 2 renglones; a 1,5rem pasaba a 3), desde 1280. */ @media (min-width:1440px){ :is([data-ficha="miami-grovenor"]) .proyecto-diapositiva--espacios .proyecto-c{grid-template-columns:minmax(0,24fr) minmax(0,76fr)} [data-ficha="miami-grovenor"] .proyecto-c__texto .proyecto-subtitulo{letter-spacing:.08em;text-wrap:balance} [data-ficha="miami-grovenor"] .proyecto-c__texto .proyecto-texto{font-size:.9rem} } @media (min-width:1280px){[data-ficha="miami-grovenor"] .proyecto-b:not(.proyecto-b--sin-fotos):not(.proyecto-b--plano-grande)>.proyecto-b__texto .proyecto-subtitulo{font-size:1.3rem;letter-spacing:.12em;line-height:1.2}}