/* Ficha barcelona: lo propio de esta ficha, siempre acotado a [data-ficha="barcelona"] (V12, puente 4420). Una mano por sección: cada ventana escribe SOLO entre las marcas de la suya. */ /* == heroe == */ /* Fila 9 de santa-anna/PROPUESTA.md («Desplaza para descubrir», diap. 2.1): el bloque va 24 px más arriba y 18 px más a la derecha (a 1440: de x 1271-1383 pegado a la franja a x 1289-1401, con 49 px de aire sobre ella como la diapositiva) y en peso fino. */ @media (min-width:1100px){ [data-ficha="barcelona"] .heroe--proyecto .proyecto-desplaza{font-weight:400;transform:translate(1.25vw,-1.67vw)} } /* == fin heroe == */ /* == proyecto == */ /* Filas 22-25 de la propuesta de Santa Anna (diap. 2.1D «El proyecto», 1440): titular, subtítulo, plano y fotos. De 1100 en adelante, proporcional a la diapositiva. */ @media (min-width:1100px) { [data-ficha="barcelona"] #el-proyecto .proyecto-b__texto .proyecto-b__titular{font-size:calc(var(--art,1) * calc(3.93*var(--vw)))} [data-ficha="barcelona"] #el-proyecto .proyecto-b__texto .proyecto-subtitulo{font-size:max(10px,calc(1.15*var(--vw)));letter-spacing:.3em} [data-ficha="barcelona"] #el-proyecto .proyecto-b:not(.proyecto-b--sin-fotos):not(.proyecto-b--plano-grande){grid-template-columns:minmax(0,27fr) minmax(0,36.7fr) minmax(0,36.3fr)!important} [data-ficha="barcelona"] #el-proyecto .proyecto-b:not(.proyecto-b--sin-fotos):not(.proyecto-b--plano-grande)>.proyecto-b__plano{justify-content:center;padding-inline:0} [data-ficha="barcelona"] #el-proyecto .proyecto-b:not(.proyecto-b--sin-fotos):not(.proyecto-b--plano-grande)>.proyecto-b__plano img{width:36.5vw;max-width:100%!important} [data-ficha="barcelona"] #el-proyecto .proyecto-b__fotos{grid-template-rows:328fr 302fr;gap:1vw;padding:1.2vw 3vw 1.2vw .8vw;box-sizing:border-box} } /* Puente 13:19 (Víctor): el plano de «El proyecto» no lleva recuadro más claro que la página: sin fondo propio ni sombra, y el blanco de su PNG se funde con el fondo (multiply). Todos los anchos. */ [data-ficha="barcelona"] #el-proyecto .proyecto-b__plano{background:none} [data-ficha="barcelona"] #el-proyecto .proyecto-b__plano img{box-shadow:none;mix-blend-mode:multiply} @media (min-width:1100px){[data-ficha="barcelona"] #el-proyecto .proyecto-b__plano img{transform:translateY(-1.7vw)}} /* medido en pod (sa-plano-urgente): el plano queda +13,5 px bajo el centro de las fotos y en la diap. −12: sube ≈25 px a 1440 (transform: no mueve la caja) */ /* == fin proyecto == */ /* == espacios == */ /* Santa Anna, Los espacios (diap. 2.1E; filas 16, 17, 27, 29 y 34 de fichas/santa-anna/PROPUESTA.md; el dorado de la franja y el acento quedan en var(--oro)/norma). Desde 1100 px: debajo la rejilla es otra. */ @media (min-width:1100px){ [data-ficha="barcelona"] .proyecto-diapositiva--espacios .proyecto-c__texto .proyecto-b__titular{font-size:min(calc(4.3*var(--vw)),calc(100cqi / (var(--palabra,8) * .62)))} [data-ficha="barcelona"] .proyecto-diapositiva--espacios .proyecto-subtitulo{font-size:calc(1.1*var(--vw));letter-spacing:.25em} [data-ficha="barcelona"] .proyecto-diapositiva--espacios .proyecto-c__texto .proyecto-texto{font-size:1.13vw;line-height:1.28} [data-ficha="barcelona"] .proyecto-diapositiva--espacios .proyecto-cifras>div{min-width:min-content;padding-inline:16px} [data-ficha="barcelona"] .proyecto-diapositiva--espacios .proyecto-cifras>div:first-child{padding-left:0} [data-ficha="barcelona"] .proyecto-diapositiva--espacios .proyecto-cifras>div+div{border-left-width:1px} [data-ficha="barcelona"] .proyecto-diapositiva--espacios .proyecto-cifras dd{font-size:1.42vw} [data-ficha="barcelona"] .proyecto-diapositiva--espacios .proyecto-franja__boton{flex:0 0 25.5%;font-size:1vw;letter-spacing:.06em;padding-inline:1rem;flex-wrap:nowrap} [data-ficha="barcelona"] .proyecto-diapositiva--espacios .proyecto-franja__boton svg{margin-left:.8rem} [data-ficha="barcelona"] .proyecto-diapositiva--espacios .proyecto-franja__datos{font-size:1.05vw} } /* == fin espacios == */ /* == galeria == */ /* == fin galeria == */ /* == pie == */ /* == fin pie == */ /* == prensa (V6) == */ /* Filas 30-33 de santa-anna/PROPUESTA.md (diap. 02.1D «Publicado en Interiores», 1440): la foto es el recorte de la propia diapositiva (x 440-1440, y 70-735, sin la «S» del titular ni los botones) y llena la sección hasta la franja; titular a 3,55/4,3vw en 2 renglones, subtítulo y cuerpo a 1,2vw en la columna de 25,5vw, y los 4 botones en 2×2 de 35vw, en una línea (el color, el común de W10). */ @media (min-width:1100px){ [data-ficha="barcelona"] #prensa-interiores .proyecto-c{grid-template-columns:minmax(0,30.55%) minmax(0,1fr);grid-template-rows:minmax(46.2vw,auto)} [data-ficha="barcelona"] #prensa-interiores .proyecto-c__texto{position:relative;z-index:2;padding-top:2vw;padding-bottom:0} [data-ficha="barcelona"] #prensa-interiores .proyecto-c__texto .proyecto-ref{margin-bottom:1.4vw} [data-ficha="barcelona"] #prensa-interiores .proyecto-c__texto .proyecto-antetitulo{margin-bottom:.4vw} [data-ficha="barcelona"] #prensa-interiores .proyecto-b__titular{font-size:calc(3.55*var(--vw));line-height:1;white-space:nowrap;margin-bottom:1.3vw} [data-ficha="barcelona"] #prensa-interiores .proyecto-b__titular .acento{font-size:1.21em} [data-ficha="barcelona"] #prensa-interiores .proyecto-subtitulo{font-size:calc(1.2*var(--vw));letter-spacing:.23em;line-height:1.3;margin-bottom:1vw} [data-ficha="barcelona"] #prensa-interiores .proyecto-subtitulo::after{display:none} [data-ficha="barcelona"] #prensa-interiores .proyecto-texto{max-width:25.5vw;font-size:1.2vw;line-height:1.27} [data-ficha="barcelona"] #prensa-interiores .proyecto-botones{width:35vw;grid-template-columns:1.16fr 1fr;gap:.9vw;margin-top:1.4vw} [data-ficha="barcelona"] #prensa-interiores .proyecto-prensa-boton{min-height:3.3vw;padding-block:.5vw;white-space:nowrap;font-size:.92vw;letter-spacing:.1em} [data-ficha="barcelona"] #prensa-interiores .proyecto-c__galeria li,[data-ficha="barcelona"] #prensa-interiores .proyecto-c__galeria figure{height:100%} [data-ficha="barcelona"] #prensa-interiores .proyecto-c__galeria img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:0 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%);mask-image:linear-gradient(90deg,transparent,#000 6%)} [data-ficha="barcelona"] #prensa-interiores .proyecto-c__galeria figcaption{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} } /* == fin prensa (V6) == */ /* == titulares-textos == */ /* Santa Anna, filas 15, 16, 17, 21, 26 y 34 de fichas/santa-anna/PROPUESTA.md (W8, medido en pod con el CSS inyectado: sa-titulares-inyectado y sa-resto-inyectado) en las secciones que no llevan otra pieza: Anteproyecto, Estancias y El proyecto (Prensa queda fuera: medido en pod, el titular a 4,3vw pasaba a 3 líneas y la franja se rompía en EN; Los espacios y «El proyecto» titular/subtítulo/plano/fotos son de las piezas de V12). Desde 1100 px; debajo la rejilla es otra. Sin color. */ @media (min-width:1100px) { /* titulares a la anchura de su diapositiva con tope por la columna (pod sa-titulares-fuentes, fuentes cargadas: TS Didot 284,5 px a 39,89 px; igualar 331/315/302 px pide 46,41/45,65/72,43 px y ANTEPROYECTO/ESTANCIAS se salían de la columna +28/+3 px; el tope 100cqi/ancho-por-em los deja a ras: ANTEPROYECTO 14,02cqi, ESTANCIAS 14,49cqi, ESPACIOS 23,98cqi) */ [data-ficha="barcelona"] #anteproyecto .proyecto-b__titular{font-size:min(calc(3.2229*var(--vw)),14.02cqi)} [data-ficha="barcelona"] #anteproyecto .proyecto-subtitulo{font-size:calc(1.18*var(--vw));letter-spacing:.3em} [data-ficha="barcelona"] #estancias .proyecto-b__titular{font-size:min(calc(3.1701*var(--vw)),14.49cqi)} [data-ficha="barcelona"] #los-espacios .proyecto-c__texto .proyecto-b__titular{font-size:min(calc(5.0299*var(--vw)),23.98cqi)} /* «PROYECTO» de El proyecto sobresalía de su columna 6/5/4 px a 1440/1280/1100 en es (65,08 px; ancho por em 4,743 → tope 21,08cqi = 63,9 px a 1440, a ras; medido en pod sobre 2671bda59: sobresale 0 a 1440/1280/1100, sin cambio a 1024, 768 y 390 y en inglés) */ [data-ficha="barcelona"] #el-proyecto .proyecto-b__texto .proyecto-b__titular{font-size:min(calc(var(--art,1) * calc(3.93*var(--vw))),21.08cqi)} /* cuerpo ≈16,3 px / interlínea 20,8 como la diapositiva (con id: la regla de .proyecto-b__texto de El proyecto era más específica y no se aplicaba) */ [data-ficha="barcelona"] #anteproyecto .proyecto-texto,[data-ficha="barcelona"] #el-proyecto .proyecto-b__texto .proyecto-texto{font-size:1.13vw;line-height:1.28} /* cifras de El proyecto con aire y sin pisar su etiqueta (como las de Los espacios) */ [data-ficha="barcelona"] #el-proyecto .proyecto-cifras>div{min-width:min-content;padding-inline:16px} [data-ficha="barcelona"] #el-proyecto .proyecto-cifras>div:first-child{padding-left:0} [data-ficha="barcelona"] #el-proyecto .proyecto-cifras>div+div{border-left-width:1px} [data-ficha="barcelona"] #el-proyecto .proyecto-cifras dd{font-size:1.42vw} /* franja: botón al 25,5 % (361-369 px a 1440) y datos a 1,05vw, en una línea */ [data-ficha="barcelona"] #anteproyecto .proyecto-franja__boton,[data-ficha="barcelona"] #estancias .proyecto-franja__boton,[data-ficha="barcelona"] #el-proyecto .proyecto-franja__boton{flex:0 0 25.5%;font-size:1vw;letter-spacing:.06em;padding-inline:1rem;flex-wrap:nowrap} [data-ficha="barcelona"] #anteproyecto .proyecto-franja__boton svg,[data-ficha="barcelona"] #estancias .proyecto-franja__boton svg,[data-ficha="barcelona"] #el-proyecto .proyecto-franja__boton svg{margin-left:.8rem} [data-ficha="barcelona"] #anteproyecto .proyecto-franja__datos,[data-ficha="barcelona"] #estancias .proyecto-franja__datos,[data-ficha="barcelona"] #el-proyecto .proyecto-franja__datos{font-size:1.05vw} } /* == fin titulares-textos == */ /* == historia-jarron == */ /* Santa Anna, «La historia», fila 13: la foto del jarrón de la tarjeta 03 ocupa el 55 % de la tarjeta en la diapositiva 2.1A (≈251 px) y el servido la fija a 28 % (126 px, position:absolute;width:28%, con cover: corona y pie recortados). Caja al 55 % (248 px a 1440, 221 a 1280, 189 a 1100) y la foto entera (contain, a la derecha, a la altura de la tarjeta: corona y pie dentro, revisión de V6); el fundido a la izquierda pasa de la caja a la imagen (si no, cae sobre el hueco y deja un borde duro) y al 30 % (al 45 % borra la cara). Texto sobre el fondo con contraste 17,6:1 (medido en pod, sa-jarron-2). Desde 1100 px; debajo la tarjeta es otra. */ @media (min-width:1100px) { [data-ficha="barcelona"] .proyecto-paso:nth-child(3) .proyecto-paso__foto{width:55%;-webkit-mask-image:none;mask-image:none} [data-ficha="barcelona"] .proyecto-paso:nth-child(3) .proyecto-paso__foto img{height:100%;width:auto;max-width:100%;margin-left:auto;object-fit:contain;object-position:100% 50%;-webkit-mask-image:linear-gradient(90deg,transparent,#000 30%);mask-image:linear-gradient(90deg,transparent,#000 30%)} } /* == fin historia-jarron == */ /* == historia (V6) == */ /* Filas 10-11 de santa-anna/PROPUESTA.md (diap. 2.1A «La historia de una transformación», medida por píxel a 1440): rejilla de las 5 tarjetas con la fila 1 de 228 px (452/426/453) y la fila 2 de 211 (04 = 711, 05 = 631), huecos de 12-13; los huecos van como pistas porque los cortes de las dos filas no coinciden. El alto de la fila 2 es mínimo: lo baja del todo la pieza de botones de W8 (filas 12-14). */ @media (min-width:1100px){ [data-ficha="barcelona"] .proyecto-pasos__lista{grid-template-columns:451fr 12fr 248fr 13fr 165fr 13fr 453fr;column-gap:0;row-gap:.97vw;grid-template-rows:minmax(15.83vw,auto) minmax(14.72vw,auto)} [data-ficha="barcelona"] .proyecto-paso:nth-child(1){grid-column:1/2} [data-ficha="barcelona"] .proyecto-paso:nth-child(2){grid-column:3/6} [data-ficha="barcelona"] .proyecto-paso:nth-child(3){grid-column:7/8} [data-ficha="barcelona"] .proyecto-paso:nth-child(4){grid-column:1/4} [data-ficha="barcelona"] .proyecto-paso:nth-child(5){grid-column:5/8} } /* == fin historia (V6) == */ /* == cifras-espacios == */ /* Santa Anna, «Los espacios»: de 1100 a 1399 px la fila de 3 cifras no cabe en la columna de texto y «Baños»/«Bathrooms» sobresalía (hasta 64 px) y la foto lo tapaba (medido en pod sobre 8a525218c, sa-vivo-8a52 y sa-fix-cifras-historia: cabe en 1 fila desde 1340 en es y desde 1400 en en). Pasan a 2 filas solo donde no caben; a 1440 y más, igual que antes. */ @media (min-width:1100px) and (max-width:1399.98px) { [data-ficha="barcelona"] #los-espacios .proyecto-cifras{flex-wrap:wrap;row-gap:var(--e-3)} [data-ficha="barcelona"] #los-espacios .proyecto-cifras>div{flex:0 0 auto} } /* De 700 a 829 px (SEG-V16-d2-santa-anna-cifras-700-800; medido en pod sobre ac3b88de7: en español «Dormitorios» pisaba la raya y «Baños» salía de su caja a 700-740 px, y 2 solapes a 700-720): las cifras también pasan a 2 filas donde no caben (bien en 1 fila desde 830; en inglés cabe y no se nota). */ @media (min-width:700px) and (max-width:829.98px) { [data-ficha="barcelona"] #los-espacios .proyecto-cifras{flex-wrap:wrap;row-gap:var(--e-3)} [data-ficha="barcelona"] #los-espacios .proyecto-cifras>div{flex:0 0 auto} } /* == fin cifras-espacios == */ /* == historia-botones == */ /* Santa Anna, «La historia», fila 12: los 3 botones de la tarjeta 04 miden 244×29 con paso 34 en la diapositiva 2.1A; el servido: 254,5×31,9 con paso 47,5 (el icono de 40 px fijaba el alto de la fila). Icono a 29 px, hueco de 5 px y botón de 17vw × 29 (244,8×29 a 1440, 217,6 a 1280, 187 a 1100); el texto baja en proporción (13,3 px a 1440, igual que antes) para que siga en 1 línea a 1100-1280 (el 2.º botón ya salía en 2 líneas a 1100). Medido en pod: sa-historia-12-final. Desde 1100 px. */ @media (min-width:1100px) { [data-ficha="barcelona"] .proyecto-paso:nth-child(4) .proyecto-paso__botones{gap:5px} [data-ficha="barcelona"] .proyecto-paso:nth-child(4) .proyecto-paso__icono{width:29px;height:29px} [data-ficha="barcelona"] .proyecto-paso:nth-child(4) .proyecto-paso__boton .boton{height:29px;min-height:29px;padding-block:0;padding-inline:.67vw;line-height:29px;flex:0 0 17vw;max-width:17vw;font-size:.924vw;letter-spacing:.092vw;white-space:nowrap} } /* == fin historia-botones == */ /* == margen-bloques == */ /* W8 (puente 4885 y regla 4900): «El proyecto» y «Los espacios» de Santa Anna (variante una_pantalla) con el texto en x 52 a 1440 como sus diap. 2.1B-E (50-52,5; servía 57) y, sin tope, en x 86 a 2356 (la regla común de bloques de paginas.css no llega: la variante una_pantalla y los bloques de la ficha llevan su propio padding con más peso). */ @media (min-width:1100px){ [data-ficha="barcelona"] .proyecto-diapositiva--pantalla .proyecto-b__texto{padding-left:max(1rem,3.65vw)} [data-ficha="barcelona"] .proyecto-diapositiva--pantalla .proyecto-c__texto{padding-left:max(1rem,3.65vw)} [data-ficha="barcelona"] .proyecto-diapositiva--espacios .proyecto-c__texto{padding-left:max(1rem,3.65vw)} } /* == fin margen-bloques == */ /* == estancias-desborde == */ /* W8 (regla 4900, medido en vivo sobre e92e2a1a3): «Por estancias» desbordaba la página 42 px a 1440 y 69 a 2356 (scrollWidth 1482 y 2425): las reglas de «Los espacios» sin hueco blanco (d0caba404a) estiran las filas de la galería al alto de la columna (338 y 553 px) y el aspect-ratio 16/10 de la variante una_pantalla convertía ese alto en 541 y 885 px de ancho por foto, más de lo que cabe en la columna. Sin la proporción fija las dos columnas caben (517 y 845 px por foto) con el mismo alto de sección (749 y 1220). */ @media (min-width:1100px){ [data-ficha="barcelona"] .proyecto-diapositiva--pantalla .proyecto-c__galeria--4 li{aspect-ratio:auto} } /* == fin estancias-desborde == */ /* == estancias-acento == */ /* W8 (lon-sa-get-pt729, punto 3): el acento «POR ESTANCIAS» salía en el oro de la norma (rgb 124,90,23); la diapositiva 2.1C lo lleva marrón anaranjado ≈ rgb(158,101,40) = #9e6528, 4,8:1 sobre blanco (texto grande). Solo ese acento. */ [data-ficha="barcelona"] #estancias .proyecto-b__titular .acento{color:#9e6528} /* == fin estancias-acento == */ /* == rotulos-espacios (V6) == */ /* «Los espacios» (rotulos-texto: blanco de la Didot sin degradado, como la diap. 2.1C; V9 vivo4732): sobre el baño, el vestidor, el dormitorio y el pasillo blancos el p99 del rótulo daba 1,3-1,7. Un velo mínimo solo bajo la palabra (fondo negro .6 con bordes difuminados), sin degradado en la foto: p99 ≥5,7 a 1440, 1100 y 390, es/en (medido en pod con rotulos-contraste.js, texto oculto y sin sombra). */ [data-ficha="barcelona"] .proyecto-c--rotulos-texto .proyecto-c__galeria figcaption{padding:.2em .4em;margin-left:-.4em;margin-bottom:-.2em;background:rgba(0,0,0,.6);box-shadow:0 0 10px 6px rgba(0,0,0,.6);border-radius:3px} /* == fin rotulos-espacios (V6) == */ /* Santa Anna, párrafo de «El anteproyecto» y «El proyecto» desde 1700 px (W5, revisión final VS 23-oct): las reglas de cuerpo de arriba (1,13vw; con id) pisaban la letra de la diapositiva (×1,15 la de 2356: calc(1,637·vw − 8,2px), interlineado 1,435 % del ancho = 34 px); mismo selector que ellas, después de ellas. «El diseño por estancias» y «Los espacios» ya la reciben desde paginas.css. */ @media (min-width:1700px){ [data-ficha="barcelona"] #anteproyecto .proyecto-texto,[data-ficha="barcelona"] #el-proyecto .proyecto-b__texto .proyecto-texto{font-size:calc(1.637 * var(--vw) - 8.2px);line-height:calc(1.435 * var(--vw))} }