/* ══════════════════════════════════════════════════════════════════════════ PLANTILLA EDITORIAL DE FICHA — property-editorial.css ══════════════════════════════════════════════════════════════════════════ Sistema visual de la ficha de propiedad en formato editorial: cabecera a pantalla completa, capitulos con foto alternada, galeria recortada con boton, y los datos en paneles. Va en un fichero APARTE de property.css a proposito. Las 72 fichas actuales no lo cargan, asi que anadir o cambiar cosas aqui no puede romperlas: solo afecta a las paginas que lo enlacen. Cuando la plantilla sustituya a la antigua, este fichero se puede fundir con property.css. Referencia viva: previews/ficha-editorial-b.html, que usa exactamente estas mismas reglas. Si se toca una, tocar la otra. Tres medidas gobiernan la pagina y viven en `main`: --pe-ritmo separacion vertical entre bloques --pe-canal margen lateral y canal entre columnas --pe-aire hueco entre fotos de la galeria y tres mas el ritmo de los pares etiqueta/valor: --pe-par etiqueta -> su valor --pe-entre de un par al siguiente --pe-cols entre columnas de datos Depende de los tokens de styles.css (--bg, --cream, --serif, --form-panel…) y de property.css para .prop-flow-grid y .prop-section-h. ══════════════════════════════════════════════════════════════════════════ */ /* ═══ RETAHILA DE FOTOS ═══════════════════════════════════════════════════ Base de la galeria. Vivia en property.css junto a un borrador anterior de esta misma plantilla; al retirar el borrador se trae aqui, que es donde se usa. Las reglas de tres columnas, junta fina y recorte a dos lineas estan mas abajo, en el bloque de galeria. */ .prop-flow-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 3px; background: var(--bg-2); } .prop-flow-grid button { padding: 0; border: 0; background: none; cursor: zoom-in; overflow: hidden; position: relative; } .prop-flow-grid img { width: 100%; height: 100%; display: block; aspect-ratio: 3 / 2; object-fit: cover; transition: scale var(--slow, .44s) var(--ease, cubic-bezier(.4,0,.2,1)); } .prop-flow-grid button:hover img { scale: 1.03; } .prop-flow-grid button:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; } /* La primera de cada tanda ocupa el ancho completo: da ritmo a la retahila y evita que 12 fotos iguales se lean como una hoja de contactos. */ .prop-flow-grid button.is-wide { grid-column: 1 / -1; } .prop-flow-grid button.is-wide img { aspect-ratio: 16 / 9; } @media (max-width: 700px) { .prop-flow-grid { grid-template-columns: 1fr; } .prop-flow-grid button.is-wide img { aspect-ratio: 3 / 2; } } /* La variante B no tiene columna de contenido: la pagina ES el ancho de la pantalla y lo que se limita es la MEDIDA DE LECTURA, no el contenedor. .pe-gutter se reserva para lo que sigue necesitando margenes (intro, certificado); las fotos van a sangre. */ /* Tres medidas para toda la pagina, como VDB: una separacion vertical entre bloques, un canal lateral, y un aire pequeño entre fotos. Cada seccion ponia antes la suya y el ritmo de scroll era irregular. */ main { --pe-ritmo: clamp(3.5rem,8vw,8rem); --pe-canal: clamp(1.5rem,5vw,5rem); --pe-aire: clamp(5px,.7vw,12px); /* Curva de los paneles. En la familia del formulario del dock (26px), no de la pildora (999px): un panel grande con curva de pildora se deforma. */ --pe-radio: clamp(14px,1.6vw,24px); /* Ritmo de los pares etiqueta/valor. Se aplica igual en la entradilla, la ficha tecnica, el equipamiento y la ubicacion: lo que hace que un par se lea como una unidad no es una caja, es que por dentro tenga poco aire y por fuera mucho. Si cada bloque elige su propia distancia, esa lectura se pierde. */ --pe-par: .45rem; /* etiqueta -> su valor */ --pe-entre: clamp(2.6rem,4.2vw,3.75rem); /* de un par al siguiente */ --pe-cols: clamp(2rem,5.5vw,5.5rem); /* entre columnas */ } /* Media separacion arriba y abajo en cada bloque: entre dos bloques consecutivos suma exactamente --pe-ritmo, siempre, sin excepciones. */ main > * { padding-block:calc(var(--pe-ritmo) / 2); } main > :first-child { padding-top:var(--pe-ritmo); } /* La tanda de paneles va mas apretada: un tercio menos entre ellos. Son cajas con fondo propio, asi que el hueco entre dos se lee mas grande de lo que mide — con el ritmo general parecian secciones desconectadas. */ main > .pe-datos-bloque { padding-block:calc(var(--pe-ritmo) / 3); } main > :last-child { padding-bottom:var(--pe-ritmo); } .pe-gutter { max-width:1600px; margin-inline:auto; padding-inline:var(--pe-canal); } .ph-badges { display:flex; flex-wrap:wrap; gap:.45rem; list-style:none; padding:0; margin:1rem 0 1.25rem; } /* Un solo material: cristal oscuro + blur. Sin cream sólido (falla sobre cielo). Jerarquía: tipografía / borde, no relleno blanco. */ .ph-badges .badge { font-family: var(--sans); font-size: .625rem; font-weight: 500; line-height: 1; letter-spacing: .14em; text-transform: uppercase; padding: .7em 1.15em; border-radius: 999px; color: var(--cream); background: rgba(14, 13, 11, 0.52); backdrop-filter: blur(14px) saturate(125%) brightness(0.78); -webkit-backdrop-filter: blur(14px) saturate(125%) brightness(0.78); text-shadow: none; } .ph-badges .badge--venta { font-weight: 600; } .ph-badges .badge--key { color: rgba(240, 235, 224, 0.88); } /* Venta privada: cerradura + palabra en un solo badge. El icono escala con la tipografía del badge (1em) para no desalinearse en ningún idioma. */ .ph-badges .badge--private { display: inline-flex; align-items: center; gap: .4em; font-weight: 600; } .ph-badges .badge--private .pe-keyhole { width: 1em; height: 1em; flex: 0 0 auto; opacity: .92; } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .ph-badges .badge { background: rgba(14, 13, 11, 0.88); } } .pe-brand { font-size:var(--fs-2xs); letter-spacing:.3em; text-transform:uppercase; color:var(--muted); } .pe-full-inner .pe-brand { color:rgba(240,235,224,.92); font-weight:500; } /* Es el segundo titular de la pagina, no un parrafo. La regla traia las dos versiones pegadas —la nueva delante y la vieja detras—, y en CSS gana la ultima: quedaba a interlineado 1,7 y ancho completo, o sea cuerpo de titular con espaciado de parrafo. Aqui va una sola declaracion. `em` y no `ch` para la medida: en Cinzel el `0` es muy ancho y 26ch daban una columna de seis lineas. 24em mantiene las tres de ahora y evita que se estire a linea unica en pantallas anchas. */ /* Texto normal en negrita, no titular: Cinzel es una tipografia de capitales y a parrafo se lee a duras penas. El peso es 600 —el mas alto que carga property-editorial.html— y no 700, que Karla no trae: pedirlo obliga al navegador a falsificarlo engordando el 400. */ .pe-lede { font-family:var(--sans); font-weight:600; color:var(--heading); font-size:clamp(21px,1.95vw,29px); line-height:1.45; max-width:44ch; margin:clamp(1rem,2vw,1.75rem) 0 clamp(2.5rem,5vw,4rem); } /* Cuando la entradilla no es una frase sino un parrafo (>200 caracteres, que hoy son 18 de las 20 — la de Gracia tiene 1.199), baja de cuerpo y de peso: veinte lineas en negrita dejan de leerse como enfasis y se leen como un bloque. Conserva la posicion y el aire. */ .pe-lede--parrafo { font-weight:500; color:var(--cream); font-size:clamp(19px,1.6vw,23px); line-height:1.65; max-width:62ch; } /* Columnas de reparto automatico: con grid-auto-flow:column las cinco medidas ocupan un quinto cada una, pero si la ficha solo tiene tres se reparten en tercios en vez de dejar dos huecos. El filete entre columnas es lo que convierte cinco pares sueltos en una fila. */ .pe-specs { display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:0; margin:2.25rem 0 0; padding-top:1.75rem; border-top:1px solid var(--border); } /* column-reverse: el
exige
antes de
, pero se lee cifra primero y etiqueta debajo. Invertir en CSS deja el marcado valido sin recurrir a display:contents. */ .pe-specs > div { display:flex; flex-direction:column-reverse; align-items:flex-start; padding-left:clamp(1.25rem,2.5vw,2.5rem); border-left:1px solid var(--border); } .pe-specs > div:first-child { padding-left:0; border-left:0; } /* La etiqueta al doble de lo que era: 13 → 24px. A ese cuerpo las versalitas con .16em de espaciado gritan, asi que se quita la mayuscula y se baja el espaciado — a 24px la palabra ya se lee sola. */ /* A 21,6px en redonda, sin versalita y casi sin espaciado, la etiqueta dejaba de parecer una etiqueta y parecia texto corrido: es lo que hacia que la fila se leyera barata. Lo que da calidad aqui no es el cuerpo de la etiqueta sino la DISTANCIA entre ella y la cifra. Con 15px en versalita espaciada contra 43px en serif, la cifra manda sola y la etiqueta hace de pie, que es su papel. El espaciado de .11em es lo que salva a la versalita pequeña: sin el, las mayusculas se apelmazan. */ .pe-specs dt { font-size:clamp(13px,1.05vw,15px); letter-spacing:.11em; text-transform:uppercase; color:#f0ebe0a3; line-height:1.25; margin-top:calc(var(--pe-par) * 1.6); } /* La cifra al doble largo de la etiqueta —1,7x no bastaba para que la fila tuviera jerarquia— y la unidad fuera de la versalita: en Cinzel el "m²" sale en capitales y pesa tanto como el numero, que es justo lo contrario de lo que tiene que hacer. */ .pe-specs dd { display:flex; flex-direction:column; align-items:flex-start; gap:.55rem; margin:0; font-family:var(--serif); font-size:clamp(1.9rem,3vw,2.75rem); line-height:1.05; color:var(--cream); } .pe-specs dd i { font-family:var(--sans); font-style:normal; font-weight:400; font-size:.36em; letter-spacing:.06em; color:var(--muted); margin-left:.35em; } /* El icono se dimensiona en px y no en em: colgado del cuerpo de la cifra (44px) saldria a 30 y se comeria la columna. 20px lo deja por debajo de la etiqueta (21,6): es la marca de la columna, no su titular. */ .pe-specs dd svg { width:20px; height:20px; color:var(--muted); opacity:.8; } /* Por debajo de ~760px cinco columnas dejan de caber. Dos filas de dos (o tres) mantienen el filete, pero hay que quitarlo al primero de cada fila, no solo al primero de la lista. */ @media (max-width:760px) { .pe-specs { grid-auto-flow:row; grid-template-columns:repeat(2,1fr); row-gap:clamp(1.75rem,5vw,2.5rem); } .pe-specs > div:nth-child(odd) { padding-left:0; border-left:0; } } /* ═══ VARIANTE B · cabecera a pantalla completa ═══════════════════════ Reutiliza el patron de .banner de la portada: 100svh, velo en degradado que oscurece SOLO hacia abajo, y el titular apoyado en la base. No es un patron nuevo: es el que ya usa la home. */ .pe-full { position:relative; height:100svh; min-height:560px; overflow:hidden; margin-bottom:0; } .pe-full-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } /* photo-protect.js envuelve cada de la pagina en un .an-shield-wrap. Ese envoltorio hereda position:relative y se queda EN FLUJO, asi que sobre el hero ocupa los 100svh y empuja el titular por debajo del borde — la cabecera se ve sin texto. El envoltorio tiene que absolutizarse igual que la imagen que envuelve. No pasa en el preview porque alli ese script no se carga: solo se ve en la pagina real. */ .pe-full .an-shield-wrap { position:absolute; inset:0; } .pe-full .an-shield-wrap img { width:100%; height:100%; object-fit:cover; } /* El velo se calibro cuando el bloque de titulo estaba a 144px del borde: empezaba a cerrar al 38% de altura y al 74% ya iba por el 56% de negro. Con el bloque recogido en la esquina —48px— eso oscurece media foto para nada. Ahora el degradado arranca en cero, se mantiene limpio hasta bien entrada la imagen y toda la carga baja al ultimo cuarto, que es lo unico que hay que hacer legible. No se puede aflojar mas: sobre pared blanca —el caso de esta ficha— el crema del titular necesita el 72% de abajo para pasar de 4,5:1. */ .pe-full-veil { position:absolute; inset:0; z-index:1; background:linear-gradient(to bottom,#0e0d0b00 0%,#0e0d0b0d 52%,#0e0d0b52 78%,#0e0d0bb8 100%); } /* El colchon inferior era de 144px y empujaba el bloque a media foto. El dock de contacto vive abajo a la DERECHA, asi que la esquina izquierda esta libre: 48px bastan para que el texto no toque el borde. */ .pe-full-inner { position:relative; z-index:2; height:100%; display:flex; flex-direction:column; justify-content:flex-end; padding:0 clamp(1.25rem,5vw,5rem) clamp(2rem,3.5vw,3rem); max-width:1600px; margin-inline:auto; } /* Los distintivos suben sobre el nombre: es el orden en que se lee una portada —que es (en venta, villa), como se llama, que es— y ademas liberan la base del bloque, que es lo que se pegaba al borde. */ .pe-full-inner .ph-badges { margin:0 0 clamp(.85rem,1.5vw,1.25rem); } .pe-full-h1 { font-family:var(--serif); font-weight:400; font-synthesis:none; font-size:clamp(34px,4.6vw,68px); line-height:1.04; letter-spacing:-.02em; color:var(--heading); margin:.5rem 0 1.25rem; } /* En la portada mandan el NOMBRE de la propiedad y no el titular descriptivo. "S'Hora Baixa" es lo que se recuerda; el titular —noventa caracteres que existen para el buscador— a cuerpo de 68px se comia media pantalla y no decia nada que la foto no dijera ya. Se intercambian los tratamientos, no los elementos: el

sigue siendo el titular, que es lo que Google necesita leer. */ .pe-full-inner .pe-brand { font-family:var(--serif); font-weight:400; font-synthesis:none; font-size:clamp(34px,4.6vw,68px); line-height:1.04; letter-spacing:-.02em; text-transform:none; color:var(--heading); margin:0; } /* Con .3em de espaciado el `ch` deja de medir lo que mide: el limite va en `em`, que si escala con el cuerpo. ~40em son dos lineas de titular. */ .pe-full-inner .pe-full-h1 { font-family:var(--sans); font-size:var(--fs-2xs); font-weight:500; letter-spacing:.3em; text-transform:uppercase; line-height:1.9; color:rgba(240,235,224,.92); max-width:40em; margin:1.1rem 0 0; } /* Barra fija: el precio no puede quedarse fuera de pantalla en una ficha. */ .pe-bar { position:sticky; bottom:0; z-index:20; display:flex; align-items:center; gap:1.25rem; flex-wrap:wrap; padding:1rem clamp(1rem,3vw,3rem); background:rgba(19,23,23,.86); backdrop-filter:blur(20px); border-top:1px solid var(--border); } @media (max-width:700px){ .pe-bar-cta{ margin-left:0; width:100%; } .pe-bar-cta .button{ flex:1; justify-content:center; } } /* ═══ DOCK DE CONTACTO ════════════════════════════════════════════════ Medido en VDB: pildora FIJA abajo a la derecha de 627x64 —no una barra a todo el ancho— y desaparece en tramos del scroll. La barra completa comia pantalla en una ficha donde lo que manda es la foto. Tres estados: oculto sobre la cabecera y mientras se baja; compacto al parar o subir; y formulario al pulsar «Mensaje», creciendo hacia arriba. */ /* ── Vidrio al acido ─────────────────────────────────────────────────── Mismo crema, pero como cristal esmerilado: el color no se pinta encima de la foto, se filtra a traves de ella. brightness(.58) va dentro del backdrop-filter, no como capa oscura: asi el dock sigue siendo transparente de verdad (deja ver la foto) y aun asi el texto crema mantiene contraste sobre una foto blanca — que es exactamente el caso de esta villa. Sin ese oscurecimiento, sobre las paredes encaladas el precio desaparece. El grano es lo que separa un esmerilado de un simple desenfoque: el acido deja microtextura, y sin ella el panel se lee como plastico. */ .pe-dock { position:fixed; z-index:60; right:clamp(1rem,2.5vw,2rem); bottom:clamp(1rem,2.5vw,1.75rem); display:flex; align-items:center; gap:.75rem; --pe-dock-alto:5.5rem; min-height:var(--pe-dock-alto); padding:.7rem 1.2rem .7rem .75rem; /* El verde es --form-panel (#254441), el mismo panel del formulario de contacto de la portada: el dock no inventa un color, trae el de la seccion a la que lleva. */ background:rgba(37,68,65,.70); backdrop-filter:blur(26px) saturate(130%) brightness(.66); -webkit-backdrop-filter:blur(26px) saturate(130%) brightness(.66); border:0; border-radius:999px; color:var(--cream); box-shadow:0 16px 48px rgba(0,0,0,.34); transition:transform .42s cubic-bezier(.4,0,.2,1), opacity .3s ease; } .pe-dock::before, .pe-form::before { content:''; position:absolute; inset:0; pointer-events:none; /* hereda la curva o el grano se sale por las esquinas */ border-radius:inherit; overflow:hidden; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)' opacity='.42'/%3E%3C/svg%3E"); opacity:.30; mix-blend-mode:overlay; } /* Safari en iOS <15 y Firefox con el filtro desactivado no tienen backdrop: ahi el panel debe volverse opaco o el texto queda sobre la foto desnuda. */ @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) { .pe-dock, .pe-form { background:var(--surface); } .pe-dock::before, .pe-form::before { display:none; } } /* Sale por abajo, no se desvanece: desvanecer deja un fantasma sobre la foto. */ .pe-dock[data-oculto="1"] { transform:translateY(calc(100% + 2rem)); opacity:0; pointer-events:none; } /* Con el formulario de acceso en pantalla, el dock repetiria su mismo CTA a un centimetro del boton real. Se aparta y deja el formulario como unica accion. Estado propio y no data-oculto: ese lo reescribe el scroll. */ .pe-dock[data-en-acceso="1"] { transform:translateY(calc(100% + 2rem)); opacity:0; pointer-events:none; } /* La zona de texto ocupa un 50% mas: medida en 114px de ancho intrinseco, reservada a 171px. Va como min-width y no como width porque el precio cambia de longitud entre fichas — los cortos ganan el aire, los largos siguen creciendo solos. El boton y los iconos no se tocan. */ .pe-dock-txt { flex:0 0 auto; display:flex; align-items:center; padding-inline:1.25rem; } /* Crece en la misma proporcion que su zona (x1.5): 1.4 -> 2.1rem. La interlinea baja a 1.05 porque la del cuerpo (1.65) le sumaria 30px de aire muerto y estiraria la pildora sin que el numero se viera mayor. */ .pe-dock-price { font-family:var(--serif); font-size:2.1rem; line-height:1; white-space:nowrap; } .pe-dock-sep { width:1px; height:32px; background:rgba(240,235,224,.24); } .pe-dock-btn { display:inline-flex; align-items:center; border:0; cursor:pointer; font-family:var(--sans); font-size:.76rem; font-weight:500; letter-spacing:.13em; text-transform:uppercase; padding:1.15em 2.1em; background:rgba(240,235,224,.14); color:var(--cream); border:0; border-radius:999px; transition:background .2s ease, color .2s ease; } /* Unico elemento que se vuelve solido al tocarlo: sobre un panel esmerilado, rellenar contrasta mas que oscurecer. */ .pe-dock-btn:hover { background:var(--cream); color:var(--bg); } .pe-dock-ico { width:50px; height:50px; border:0; cursor:pointer; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; background:rgba(240,235,224,.10); color:var(--cream); transition:background .2s ease; } .pe-dock-ico:hover { background:rgba(240,235,224,.22); } .pe-dock-ico svg { width:19px; height:19px; } /* El formulario crece HACIA ARRIBA desde la pildora, no abre un modal: un modal tapa la foto, que es justo lo que se queria evitar. */ .pe-form { position:fixed; z-index:61; right:clamp(1rem,2.5vw,2rem); bottom:calc(clamp(1rem,2.5vw,1.75rem) + 5.5rem + 1rem); width:min(400px, calc(100vw - 2rem)); background:rgba(37,68,65,.62); backdrop-filter:blur(30px) saturate(130%) brightness(.66); -webkit-backdrop-filter:blur(30px) saturate(130%) brightness(.66); border:0; border-radius:26px; padding:1.9rem; box-shadow:0 20px 60px rgba(0,0,0,.45); transform-origin:bottom right; transition:transform .34s cubic-bezier(.4,0,.2,1), opacity .24s ease; } .pe-form[hidden] { display:none; } .pe-form[data-cerrado="1"] { transform:translateY(12px) scale(.97); opacity:0; pointer-events:none; } .pe-form > * { position:relative; z-index:1; } .pe-form h3, .pe-form .pe-form-h { font-family:var(--serif); font-size:1.15rem; color:var(--heading); margin-bottom:.35rem; font-weight:400; } .pe-form p, .pe-form .pe-form-meta { font-size:var(--fs-2xs); color:var(--muted); margin-bottom:1.1rem; } .pe-form label.flabel { display:block; font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-bottom:.35rem; } .pe-form .form-consent { display: flex; align-items: flex-start; gap: var(--sp-8); font-size: var(--fs-xs); letter-spacing: 0; text-transform: none; color: var(--cream-dim); line-height: 1.55; margin: var(--sp-4) 0 var(--sp-16); text-transform: none; } .pe-form .form-consent input { width: auto; margin: 3px 0 0; padding: 0; border: 0 !important; } .pe-form .fg { margin-bottom: var(--sp-12); } .pe-form .join-submit { margin-top: var(--sp-4); } /* styles.css pinta TODO input con `background:rgba(240,235,224,.05) !important`. Sobre el panel esmerilado eso dibuja cajas claras donde solo debe haber una linea inferior. Se iguala el !important porque no hay otra forma de ganarle; el selector de ID solo no basta. */ #pe-form input:not([type="checkbox"]), #pe-form textarea { width:100%; background:transparent !important; border:0; border-bottom:1px solid rgba(240,235,224,.34) !important; color:var(--cream); font-family:var(--sans); font-size:max(1rem, var(--fs-sm)); padding:.45rem 0 .6rem; margin-bottom:0; outline:none; } #pe-form input:not([type="checkbox"]):focus, #pe-form textarea:focus { border-bottom-color:var(--cream) !important; } #pe-form textarea { resize:none; } .pe-form .button { width:100%; justify-content:center; border-radius:999px; } .pe-form-close { position:absolute; top:.6rem; right:.6rem; background:none; border:0; color:var(--muted); font-size:1.4rem; line-height:1; cursor:pointer; padding:.2rem .45rem; } .pe-form-close:hover { color:var(--cream); } /* En movil el dock ocupa todo el ancho —no la esquina derecha como en escritorio— asi que el bloque de titulo tiene que dejarle sitio de verdad. Pero el colchon era `clamp(7.5rem,10vw,9rem) + 5rem`, o sea 200px: heredaba el valor ANTIGUO del padding de escritorio, el que se sustituyo al recoger el bloque en la esquina, y se quedo sin actualizar. Con 200px en una pantalla de 664 el titulo se iba a media foto. La cuenta real: el dock mide 72px (--pe-dock-alto 4.5rem) y se apoya a 16px del borde. 112px lo salvan con 24 de aire. */ @media (max-width:700px) { .pe-full-inner { padding-bottom:7rem; } /* La jerarquia estaba invertida. Medido en un 390x664: el nombre ocupaba 35px en una linea y el subtitulo 68 en tres — la linea de apoyo pesaba el doble que el titular de una portada a pantalla completa. */ /* El nombre es lo unico que hay que recordar de esta pantalla, y 34px lo dejaban por debajo de muchos titulares del cuerpo de la propia ficha. */ /* `balance` porque las 9 fichas sin nombre propio caen a zona + ciudad, y "Sarria-Sant Gervasi, Barcelona" parte en tres lineas muy desiguales. Repartidas se leen como una decision; sin repartir, como un accidente. */ .pe-full-inner .pe-brand { font-size:40px; line-height:1.02; text-wrap:balance; } /* El espaciado de .3em esta calculado para una linea ancha; en 390px de ancho parte el subtitulo en tres. A .14em entra en dos. Y la interlinea de 1,9 —aire para una linea suelta— se cierra a 1,55: con dos lineas seguidas ese aire separaba lo que deberia leerse junto. */ .pe-full-inner .pe-full-h1 { letter-spacing:.14em; line-height:1.55; margin-top:.85rem; } } @media (max-width:640px) { /* En 358px de ancho no caben las cinco piezas a tamaño de escritorio. Reparto: el texto suelta su min-width (si no, los iconos se aplastaban a 19px y el telefono se salia de pantalla), los iconos dejan de encoger y se cae el sobre — en un movil duplica lo que ya hace "Mensaje", mientras que WhatsApp y llamar son acciones que solo existen aqui. */ /* Mismo reparto a escala movil: padding-izq = gap (8px) y circulo final a 15px, los que le quedan arriba y abajo en una pildora de 72. */ .pe-dock { left:1rem; right:1rem; gap:.5rem; --pe-dock-alto:4.5rem; padding:.7rem .94rem .7rem .5rem; } .pe-dock-sep { display:none; } .pe-dock-txt { padding-inline:.5rem; } .pe-dock-price { font-size:1.5rem; } .pe-dock-btn { flex:1 1 auto; min-width:0; justify-content:center; padding-inline:1.2em; } .pe-dock-ico { flex:0 0 42px; width:42px; height:42px; } .pe-dock-ico:first-of-type { display:none; } } /* ═══ CERTIFICADO ENERGETICO ══════════════════════════════════════════ La escala A-G a todo color es el bloque mas feo de la ficha y ademas compite con las fotos, que es lo que debe mandar. Aqui vive plegado: una linea discreta con la letra, y quien quiera el detalle lo abre. Se usa
nativo. No lleva animacion de apertura porque un
no se puede forzar abierto ni animar su altura de forma fiable en todos los motores; lo que si se anima es el galon. */ .pe-energy { border-top:1px solid var(--border); border-bottom:1px solid var(--border); margin:clamp(2rem,4vw,3rem) 0; } /* Dentro del panel de la ficha tecnica no necesita marco propio: el panel ya lo encierra. Solo conserva la linea de arriba, que es la que lo separa de la rejilla de datos. */ .pe-panel .pe-energy { border-bottom:0; margin:0; } .pe-panel .pe-energy > summary { padding-bottom:0; } .pe-energy > summary { list-style:none; cursor:pointer; padding:1.15rem 0; display:flex; align-items:center; gap:.85rem; font-size:var(--fs-2xs); letter-spacing:.18em; text-transform:uppercase; color:var(--muted); transition:color .2s ease; } .pe-energy > summary::-webkit-details-marker { display:none; } .pe-energy > summary:hover { color:var(--cream); } .pe-energy-letter { font-family:var(--serif); font-size:.95rem; letter-spacing:0; width:26px; height:26px; display:inline-flex; align-items:center; justify-content:center; background:rgba(240,235,224,.1); color:var(--cream); text-transform:none; } .pe-energy-chev { margin-left:auto; transition:transform .3s cubic-bezier(.4,0,.2,1); } .pe-energy[open] .pe-energy-chev { transform:rotate(180deg); } .pe-energy-body { padding:0 0 1.5rem; display:grid; gap:1.5rem; max-width:34rem; } /* Escala minima: una banda por letra, y solo la activa lleva color. Las demas quedan como marcas tenues — informan sin gritar. */ .pe-scale { display:flex; gap:3px; } .pe-scale span { flex:1; height:5px; background:rgba(240,235,224,.12); position:relative; } .pe-scale span.is-on { background:var(--cream); } .pe-scale span::after { content:attr(data-l); position:absolute; top:9px; left:50%; transform:translateX(-50%); font-size:.58rem; letter-spacing:.08em; color:var(--muted); } .pe-scale span.is-on::after { color:var(--cream); } .pe-energy-nums { display:flex; gap:2.5rem; margin-top:1.4rem; } .pe-energy-nums dt { font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-bottom:.3rem; } .pe-energy-nums dd { font-family:var(--serif); font-size:1.05rem; color:var(--cream); margin:0; } .pe-energy-note { font-size:var(--fs-2xs); color:var(--muted); line-height:1.7; } /* ═══ CAPITULOS ═══════════════════════════════════════════════════════ El patron de VDB no es una rejilla: es una foto grande apoyada en un borde, texto en el aire que queda al otro lado, y silencio entre una cosa y la siguiente. Dos fotos alternadas bastan — la tercera repetiria el gesto sin añadir nada, y la retahila de abajo ya da volumen. Las fotos NO se tocan: cada una vive en su propio capitulo, separadas por un blanco vertical grande. Solo tocan el borde exterior de la pantalla, que es lo que las hace sentirse a escala. */ /* Mismo margen lateral que la entradilla, el cierre y la galeria: todos los bloques arrancan en la misma linea vertical. La foto ya no sangra al borde — la disciplina de rejilla es lo que hace que respire, no el sangrado. */ /* 24px mas que el canal general solo aqui: la foto llega a sangre hasta el borde de su columna, asi que el hueco compite con una masa de imagen, no con espacio vacio como en el resto de la pagina. */ .pe-cap { display:grid; align-items:center; gap:calc(var(--pe-canal) + 24px); grid-template-columns:minmax(0,1.45fr) minmax(0,1fr); max-width:1600px; margin-inline:auto; padding-inline:var(--pe-canal); } .pe-cap .pe-shot { margin:0; } .pe-cap .pe-shot img { display:block; width:100%; aspect-ratio:4/3; object-fit:cover; } .pe-cap .pe-copy { max-width:52ch; } /* Se invierte moviendo la foto con `order` y cambiando el reparto de columnas. En el DOM el texto va siempre primero: es el orden que necesita un lector de pantalla y el que hereda el movil al apilar. */ .pe-cap .pe-shot { order:-1; } .pe-cap--der { grid-template-columns:minmax(0,1fr) minmax(0,1.45fr); } .pe-cap--der .pe-shot { order:1; } .pe-cap--der .pe-copy { justify-self:end; } .pe-cap h2, .pe-cierre h2 { font-family:var(--serif); font-weight:400; font-size:clamp(26px,2.6vw,40px); line-height:1.12; color:var(--heading); margin:0 0 1.4rem; } .pe-cap p:not(.pe-num), .pe-cierre p:not(.pe-num) { color:var(--cream-dim); line-height:1.85; margin:0; } /* Cierre sin foto, a ancho total y en una sola columna: despues de dos capitulos encajonados en columna, este rompe la rejilla y ocupa la pantalla entera. Es la pausa antes de la galeria. */ /* Columna centrada: una mitad de texto y un cuarto libre a cada lado. Es el unico bloque de la pagina sin foto, asi que el aire de los lados es lo que lo separa de los capitulos ilustrados de arriba. */ .pe-cierre { max-width:1600px; margin-inline:auto; padding-inline:var(--pe-canal); } /* Tiene que igualar la especificidad de `.pe-cierre p:not(.pe-num)`, que mas arriba fija margin:0 — con `.pe-cierre > *` el auto no llegaba a aplicarse y el bloque se quedaba pegado a la izquierda. */ .pe-cierre > h2, .pe-cierre > p:not(.pe-num) { width:50%; margin-inline:auto; } /* Titular y parrafo sobre el mismo eje Y con el mismo tratamiento: si uno va centrado y el otro llena la columna de borde a borde, se leen como dos bloques desalineados aunque compartan centro. `balance` reparte las dos lineas del titular; `pretty` evita que la ultima del parrafo quede sola. */ .pe-cierre h2 { font-size:clamp(30px,3.2vw,44px); text-align:center; text-wrap:balance; margin-bottom:clamp(1.5rem,2.6vw,2.25rem); } .pe-cierre > p:not(.pe-num) { text-align:center; text-wrap:pretty; } /* Por debajo de tablet un 50% deja lineas de 20 caracteres: vuelve a ancho completo, que ahi el margen ya lo pone el canal. */ @media (max-width:900px) { .pe-cierre > h2, .pe-cierre > p:not(.pe-num) { width:100%; } } @media (max-width:900px) { .pe-cap, .pe-cap--der { grid-template-columns:1fr; gap:var(--pe-canal); } .pe-cap .pe-shot, .pe-cap--der .pe-shot { order:-1; } .pe-cap .pe-copy, .pe-cap--der .pe-copy { max-width:none; justify-self:stretch; } } /* ═══ RUTA Y ACCIONES ═════════════════════════════════════════════════ Debajo del hero. De donde vienes a la izquierda, que puedes hacer con la ficha a la derecha, y una linea fina que la separa de la entradilla. */ /* La cabecera del sitio es fija y mide ~100px: sin este colchon la barra de ruta nace justo debajo del hero y queda debajo de ella al llegar. */ .pe-ruta { display:flex; align-items:center; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; padding-block:clamp(1.75rem,3.5vw,2.75rem) clamp(1rem,2vw,1.5rem) !important; border-bottom:1px solid var(--border); } /* A 13px la ruta era un pie de pagina bajo una portada de pantalla completa. Sube a --fs-xs y el ultimo tramo —el nombre de la propiedad— se marca en crema: es la unica forma de ver de un vistazo donde estas. */ .pe-ruta-mig { display:flex; align-items:center; flex-wrap:wrap; gap:.6rem; list-style:none; margin:0; padding:0; font-size:var(--fs-xs); letter-spacing:.08em; color:var(--muted); } .pe-ruta-mig li + li::before { content:'/'; margin-right:.6rem; opacity:.4; } .pe-ruta-mig a { color:var(--muted); transition:color .2s ease; } .pe-ruta-mig a:hover { color:var(--cream); } /* La flecha de vuelta solo en el primer tramo. Una miga dice donde estas; la flecha dice que se puede salir, que es lo que se busca al final de una ficha. Se separa 2px extra porque el trazo abierto de la punta deja aire optico por la derecha y sin corregirlo se pega a la palabra. */ .pe-ruta-atras { width:1.05em; height:1.05em; margin-right:.5em; vertical-align:-.18em; transition:transform .2s var(--ease,ease); } .pe-ruta-mig a:hover .pe-ruta-atras { transform:translateX(-3px); } /* El tramo actual no es un enlace: se corta si el nombre es largo en vez de empujar los botones de guardar y compartir a la linea siguiente. */ .pe-ruta-mig [aria-current] { color:var(--cream); max-width:42ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* Dos iconos sueltos en la esquina derecha eran dos glifos huerfanos frente a tres palabras a la izquierda: la barra quedaba desequilibrada y ninguno de los dos decia que hacia. Con la etiqueta al lado —al mismo cuerpo y espaciado que la miga— los dos lados de la barra pesan igual y la accion se lee sin tener que pasar el raton por encima. */ .pe-ruta-acc { display:flex; align-items:center; gap:.35rem; } .pe-acc { display:inline-flex; align-items:center; gap:.55em; height:40px; padding-inline:.85rem; border:0; border-radius:999px; cursor:pointer; background:transparent; color:var(--muted); font:inherit; font-size:var(--fs-xs); letter-spacing:.08em; transition:background .2s ease, color .2s ease; } .pe-acc svg { width:16px; height:16px; flex:0 0 auto; } .pe-acc:hover { background:rgba(240,235,224,.08); color:var(--cream); } /* Por debajo de tablet la etiqueta se cae: ahi la barra compite con el nombre de la propiedad y el icono solo ya es una diana de 40px. */ @media (max-width:640px) { .pe-acc { padding-inline:0; width:40px; justify-content:center; } .pe-acc span { display:none; } } /* Guardada: el corazon se rellena. Un cambio de color solo no se ve. */ .pe-acc[aria-pressed="true"] { color:var(--cream); } .pe-acc[aria-pressed="true"] svg { fill:currentColor; } /* La entradilla arranca pegada a la ruta, no con el ritmo de un bloque. */ main > .pe-ruta + .pe-intro { padding-top:clamp(2rem,4vw,3.5rem); } /* ═══ APERTURA Y GALERIA ══════════════════════════════════════════════ */ .pe-gallery { max-width:1600px; margin-inline:auto; padding-inline:var(--pe-canal); } /* property.css deja 3px entre fotos — a esa distancia se leen como una hoja de contactos. Aqui respiran, y el hueco es el color de la pagina, no una linea gris entre imagenes. */ .pe-gallery .prop-flow-grid { gap:var(--pe-aire); background:transparent; } .pe-gallery .prop-section-h { margin:0 0 var(--pe-canal); padding-inline:0; } /* Una ancha y tres debajo, repetido. El paso (4) es multiplo de las columnas (3), asi que ninguna tanda deja filas incompletas. Lo unico que cambia respecto de antes es que la separacion entre fotos es --pe-aire, la misma que se usa en el resto de la pagina. */ .pe-gallery .prop-flow-grid { grid-template-columns:repeat(3,1fr); } /* Recortada enseña la ancha + la fila de tres: dos lineas. El resto sigue en el DOM (no se pide por red al abrir) pero no ocupa pantalla. */ .pe-gallery .prop-flow-grid[data-recortada="1"] > button:nth-child(n+5) { display:none; } .pe-vermas { display:block; margin:var(--pe-canal) auto 0; padding:1.15em 2.6em; background:transparent; border:1px solid rgba(240,235,224,.35); color:var(--cream); font-family:var(--sans); font-size:.76rem; font-weight:500; letter-spacing:.13em; text-transform:uppercase; cursor:pointer; transition:background .2s ease, color .2s ease, border-color .2s ease; } .pe-vermas:hover { background:var(--cream); border-color:var(--cream); color:var(--bg); } .pe-vermas[hidden] { display:none; } @media (max-width:700px) { .pe-gallery .prop-flow-grid { grid-template-columns:1fr; } /* En una columna, "dos lineas" son dos fotos: con las cuatro de escritorio el boton se iba a cuatro pantallas de scroll. */ .pe-gallery .prop-flow-grid[data-recortada="1"] > button:nth-child(n+3) { display:none; } } /* ═══ SECCIONES DE DATOS ══════════════════════════════════════════════ Todo lo que sigue vive con el mismo canal lateral y el mismo ritmo vertical que los capitulos: no son bloques nuevos, son el mismo sistema aplicado a informacion en vez de a fotos. */ .pe-h { font-family:var(--serif); font-weight:400; font-size:clamp(22px,2.2vw,32px); color:var(--heading); margin:0 0 clamp(1.5rem,3vw,2.5rem); } /* La ficha tecnica va dentro de un panel: es el unico bloque de la pagina hecho solo de datos sueltos, y sin un fondo que lo contenga se derramaba sobre Equipamiento — que empieza igual, con columnas de texto corto. El panel es lo que dice "esto se acaba aqui". */ .pe-panel { background:var(--surface); padding:clamp(1.75rem,3.5vw,3rem); border-radius:var(--pe-radio); } .pe-panel .pe-h { margin-bottom:clamp(1.75rem,3vw,2.5rem); } /* Plegable con la misma cabecera que un panel normal: el titular no cambia de aspecto por ser pulsable, solo gana un galon. Los planos entran plegados porque son documentos tecnicos — se consultan, no se hojean. */ .pe-plegable > summary { list-style:none; cursor:pointer; display:flex; align-items:center; gap:1rem; } .pe-plegable > summary::-webkit-details-marker { display:none; } .pe-plegable > summary .pe-h { margin:0; } .pe-plegable-n { font-size:var(--fs-2xs); letter-spacing:.16em; text-transform:uppercase; color:var(--muted); } .pe-plegable-chev { margin-left:auto; color:var(--muted); transition:transform .3s cubic-bezier(.4,0,.2,1); } .pe-plegable[open] .pe-plegable-chev { transform:rotate(180deg); } .pe-plegable[open] > summary { margin-bottom:clamp(1.75rem,3vw,2.5rem); } .pe-plegable > summary:hover .pe-plegable-n, .pe-plegable > summary:hover .pe-plegable-chev { color:var(--cream); } /* Ficha tecnica: etiqueta encima y valor debajo, alineados a la izquierda. En horizontal el valor se iba al borde derecho de su celda y cada columna tenia el numero en un sitio distinto; en vertical todos arrancan en la misma linea y la columna se lee de un vistazo. */ .pe-datos { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:0 var(--pe-cols); } .pe-datos div { padding:0 0 var(--pe-entre); } .pe-datos dt { font-size:var(--fs-2xs); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:var(--pe-par); } .pe-datos dd { font-family:var(--serif); font-size:1.15rem; color:var(--cream); margin:0; line-height:1.3; } /* Equipamiento: los grupos que ya trae el dato, sin viñetas. Un ✓ delante de cada linea es el tic mas reconociblemente de plantilla que existe. */ .pe-equip { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:var(--pe-entre) var(--pe-cols); } .pe-equip h3 { display:flex; align-items:center; gap:.65rem; font-size:var(--fs-2xs); letter-spacing:.18em; text-transform:uppercase; color:var(--muted); font-weight:400; margin:0 0 var(--pe-par); padding-bottom:.7rem; border-bottom:1px solid var(--border); } /* El icono hereda el color de la etiqueta y no la adelanta: es un ancla visual para encontrar el grupo de un vistazo, no una ilustracion. */ .pe-equip h3 svg { width:17px; height:17px; flex:0 0 auto; opacity:.9; } .pe-equip ul { list-style:none; padding:0; margin:0; } .pe-equip li { color:var(--cream-dim); padding:.3rem 0; font-size:var(--fs-sm); } /* Los planos ya traen su propio blanco: el marco crema era un fondo sobre otro fondo. El pie usa la misma etiqueta que el resto de wrappers. */ .pe-planos { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:var(--pe-entre) var(--pe-cols); } .pe-planos figure { margin:0; } .pe-planos img { width:100%; display:block; } .pe-planos figcaption { font-size:var(--fs-2xs); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-top:var(--pe-par); } /* Ubicacion sin mapa: no hay coordenadas en el dato, y un mapa centrado en el municipio miente sobre donde esta la casa. */ .pe-sitio { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:var(--pe-entre) var(--pe-cols); margin-top:var(--pe-entre); } .pe-sitio dt { font-size:var(--fs-2xs); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:var(--pe-par); } .pe-sitio dd { color:var(--cream); margin:0; line-height:1.7; } /* El mapa. Se pinta solo cuando entra en pantalla — la API de Google se factura por carga, y la mayoria de visitas no llegan hasta aqui. Mientras no carga, ocupa su hueco para que nada salte. */ /* El parrafo del barrio, dentro del panel y encima del mapa. Medida de lectura propia: a ancho de panel serian lineas de 150 caracteres. */ /* El bloque del barrio va centrado —titular, parrafo y enlace sobre el eje de la pagina— y no alineado a la izquierda como los capitulos con foto. Ahi la foto ocupa la otra mitad y sostiene la columna de texto; aqui no hay foto, asi que una columna pegada al margen izquierdo deja media pagina en negro. */ .pe-zona { color:var(--cream-dim); line-height:1.85; max-width:70ch; margin:0 auto var(--pe-entre); text-align:center; } /* "Ver más sobre Mahón" — cierra el texto del barrio y lleva a su landing. Va con el nombre dentro y no como un "ver más" suelto: leído fuera de contexto —por un lector de pantalla que recorre enlaces, o por Google— "ver más" no dice a dónde va. La flecha se separa al pasar por encima; es la única animación del bloque. */ .pe-zona-mas { margin:calc(var(--pe-entre) * -.35) 0 var(--pe-entre); text-align:center; } .pe-zona-mas a { display:inline-flex; align-items:center; gap:.6rem; font-size:var(--fs-xs); letter-spacing:.08em; color:var(--cream); padding-bottom:.35rem; border-bottom:1px solid var(--border); transition:border-color .25s ease, color .25s ease; } .pe-zona-mas a:hover { border-bottom-color:var(--cream); } .pe-zona-mas svg { width:1.05em; height:1.05em; flex:0 0 auto; transition:transform .25s ease; } .pe-zona-mas a:hover svg { transform:translateX(.25rem); } /* El bloque del barrio va sobre el fondo de la pagina, sin caja, con el mismo margen lateral que todo lo demas. Su titular puede pesar mas que el de un panel de datos porque es texto editorial, no una tabla. */ .pe-zona-bloque { max-width:1600px; margin-inline:auto; padding-inline:var(--pe-canal); } /* La rejilla de zona/municipio/provincia y la nota de la direccion cierran la misma composicion centrada: dejarlas contra el margen izquierdo partia el bloque en dos alineaciones distintas. */ .pe-zona-bloque .pe-sitio { text-align:center; } .pe-zona-bloque .pe-nota { margin-inline:auto; text-align:center; } .pe-zona-bloque .pe-h { font-size:clamp(26px,3.2vw,44px); max-width:24ch; margin:0 auto clamp(1.25rem,2.4vw,2rem); text-align:center; } /* El hueco reserva su sitio en el color del mapa para que no se vea un salto al cargar los tiles. */ /* Alto de mapa, no de miniatura: a 420px el plano de una isla entraba recortado y no se leia ni el pueblo de al lado. Sube a ~640 en pantalla grande —proporcion parecida a la de la referencia— y en movil se queda en 380, que sigue siendo mas de la mitad de la pantalla. */ .pe-mapa { margin:0; height:clamp(380px,46vw,640px); background:var(--bg-2); border-radius:var(--pe-radio); overflow:hidden; } /* La calle y el numero no salen en la ficha: en esta gama la direccion se da en la visita, no en una pagina indexable. */ .pe-nota { margin:var(--pe-entre) 0 0; color:var(--muted); font-size:var(--fs-2xs); line-height:1.8; max-width:52ch; } /* El descargo legal. Sale de la descripcion — 18 fichas lo llevan dentro — y aterriza aqui: al final, en letra pequeña y sin titular. */ .pe-legal { color:var(--muted); font-size:.72rem; line-height:1.75; max-width:90ch; opacity:.75; } /* ═══ CROMO DE SITIO ══════════════════════════════════════════════════ */ /* property.css abre con `.header{background:var(--bg)}` y `.header:before{opacity:0!important}`: la ficha actual no tiene hero, asi que su cabecera es una banda opaca. Con una foto a pantalla completa esa banda corta la imagen por arriba. Aqui vuelve al comportamiento de la portada — transparente sobre la foto, con el velo en degradado que hace legible el menu, y solida solo al bajar. Y el CTA de venta, que property.css oculta, aqui si aparece: es el unico enlace de la cabecera que lleva a captacion. */ #site-header { background:transparent; } #site-header::before { opacity:1 !important; } #site-header.scrolled { background:rgba(19,23,23,.7); } #site-header.scrolled::before { opacity:0 !important; } .hn-link--cta { display:inline-flex; } /* Selector de idioma sin desplegable: dos enlaces, el actual marcado. Con dos ficheros fisicos no hace falta JS para cambiar de idioma. */ .lang-switcher--enlaces { display:flex; align-items:center; gap:.15rem; } .lang-switcher--enlaces .lang-btn { padding:.35em .6em; font-size:max(13px,.78vw); letter-spacing:.1em; color:var(--muted); transition:color var(--fast,.16s); } .lang-switcher--enlaces .lang-btn[aria-current] { color:var(--cream); } .lang-switcher--enlaces .lang-btn--otro:hover { color:var(--cream); } /* Las migas van DEBAJO del hero: con una cabecera a pantalla completa no hay sitio para ponerlas antes sin partir la foto. */ .pe-migas { display:flex; flex-wrap:wrap; align-items:center; gap:.6rem; font-size:var(--fs-2xs); letter-spacing:.06em; color:var(--muted); padding-block:0 !important; } .pe-migas a { color:var(--muted); transition:color .2s ease; } .pe-migas a:hover { color:var(--cream); } .pe-migas [aria-current] { color:var(--cream); } /* Las migas son una linea, no un bloque: no le corresponde el ritmo de 115px que reparte `main > *`, o abriria un agujero antes de la entradilla. */ main > .pe-migas + .pe-intro { padding-top:clamp(1.5rem,3vw,2.5rem); } .pe-rel-nota { color:var(--muted); font-size:var(--fs-2xs); line-height:1.8; max-width:56ch; margin:calc(-1 * clamp(1rem,2vw,1.5rem)) 0 clamp(2rem,4vw,3rem); } .pe-rel-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:var(--pe-cols); } .pe-rel-card { display:block; } .pe-rel-card img { width:100%; aspect-ratio:4/3; object-fit:cover; display:block; transition:scale var(--slow,.44s) var(--ease,cubic-bezier(.4,0,.2,1)); } .pe-rel-card > span, .pe-rel-card p { margin:0; } .pe-rel-card:hover img { scale:1.02; } .pe-rel-card { overflow:hidden; } .pe-rel-t { font-family:var(--serif); font-size:1.15rem; color:var(--heading); margin-top:1.1rem !important; } .pe-rel-m { font-size:var(--fs-2xs); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-top:var(--pe-par) !important; } .pe-rel-p { font-family:var(--serif); font-size:1.05rem; color:var(--cream); margin-top:.6rem !important; } /* ═══ ZOOM DE LA RETAHILA ══════════════════════════════════════════════ Las celdas llevan .pg-cell y heredan de property.css un `transform:scale(1.04)` + `opacity:.9`, y de aqui arriba un `scale:1.03`. Son DOS mecanismos distintos —la propiedad `scale` y la funcion `scale()` de transform— y se multiplican: 1,07 de aumento y un oscurecido encima. Queda un solo zoom, sin cambio de opacidad: el marco no se mueve y la foto crece por dentro, que es todo lo que tiene que pasar. */ .pe-gallery .pg-cell img { transform:none; opacity:1; } .pe-gallery .pg-cell:hover img { transform:none; opacity:1; scale:1.04; } /* ── Teaser privado ─────────────────────────────────────────────────────── */ /* El hero no lleva cerradura suelta: el badge "Venta privada" ya trae el icono y la palabra, y repetir el simbolo en la misma pantalla solo lo diluia — ademas de parecer un boton que no se puede pulsar. */ .pe-acceso-mark .pe-keyhole { display: block; opacity: 0.92; } /* pe-acceso + pe-gutter comparten especificidad: hay que ganar a max-width:1600px. */ .pe-acceso.pe-gutter, .pe-acceso { max-width: 40rem; width: 100%; box-sizing: border-box; padding-block: clamp(2.5rem, 6vw, 4.5rem); /* Hueco bajo el formulario para que el dock fijo no tape el CTA. */ padding-bottom: calc(clamp(2.5rem, 6vw, 4.5rem) + 5.25rem); } .pe-acceso-top { margin-bottom: clamp(1.5rem, 3vw, 2.25rem); } .pe-acceso-mark { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; margin-bottom: 1.1rem; color: var(--gold); border: 1px solid rgba(240, 235, 224, 0.18); border-radius: 999px; } .pe-acceso-heading.join-heading, .pe-acceso .join-heading { font-size: clamp(28px, 4.2vw, 52px); letter-spacing: -0.12vw; margin: 0 0 0.85rem; } .pe-acceso-sub { font-size: var(--fs-sm); color: var(--muted); line-height: 1.65; max-width: 42ch; margin: 0; } /* Reutiliza .join-form / .fg / .flabel / .finput de styles.css; aquí solo layout. */ .pe-acceso-form.join-form { display: flex; flex-direction: column; gap: 0; width: 100%; max-width: 100%; margin: 0; } .pe-acceso-form .finput, .pe-acceso-form .ftextarea { width: 100%; box-sizing: border-box; font-size: max(1rem, var(--fs-md)); /* ≥16px: evita zoom iOS */ } .pe-acceso-form .join-submit { margin-top: var(--sp-8); align-items: center; } .pe-acceso-form .join-submit .button { min-height: 3rem; } .pe-acceso-status { margin-top: 0.85rem; font-size: var(--fs-2xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); } .pe-acceso--granted { max-width: 36rem; padding-bottom: clamp(2.5rem, 6vw, 4.5rem); } .pe-acceso--granted .pe-acceso-sub { margin-bottom: 0; max-width: none; } .pe-gallery--unlocked { animation: pe-unlock-in 0.55s cubic-bezier(0.4, 0, 0.2, 1) both; } @keyframes pe-unlock-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } @media (max-width: 700px) { .pe-full--teaser { height: min(92svh, 640px); min-height: 420px; } .pe-full--teaser .pe-full-inner { padding-inline: max(1rem, 4vw); padding-bottom: calc(5.75rem + env(safe-area-inset-bottom, 0px)); } /* Jerarquía en hero: nombre grande, titular SEO pequeño (refuerzo mobile). */ .pe-full--teaser .pe-full-inner .pe-brand { font-family: var(--serif); font-weight: 400; font-synthesis: none; font-size: clamp(28px, 8.2vw, 40px); line-height: 1.05; letter-spacing: -0.02em; text-transform: none; color: var(--heading); margin: 0; } .pe-full--teaser .pe-full-inner .pe-full-h1 { font-family: var(--sans); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; line-height: 1.55; color: rgba(240, 235, 224, 0.92); max-width: none; margin: 0.85rem 0 0; } .pe-acceso.pe-gutter, .pe-acceso { max-width: none; padding-inline: max(1rem, 4vw); padding-bottom: calc(2.25rem + 5.5rem + env(safe-area-inset-bottom, 0px)); } .pe-acceso-form .join-submit { flex-direction: column; align-items: stretch; gap: var(--sp-16); } .pe-acceso-form .join-submit .button { width: 100%; justify-content: center; } .pe-acceso-form .join-contact-links { align-items: center; text-align: center; } .pe-full--teaser ~ .pe-dock, .pe-ficha .pe-dock { left: 0.75rem; right: 0.75rem; } } /* ── El conmutador de divisa dentro del dock ────────────────────────────────── `.curr-chip` se diseñó para colgar DEBAJO de un precio en bloque (lleva un margin-top y nada de margin-left). Dentro del dock, que es una fila, caía pegado al símbolo y se leía «1.550.000 €€ $ £ CHF». Aquí se separa y se alinea a la misma línea de base que la cifra, que es lo que hace que se lea como una unidad —precio y sus equivalencias— en vez de como dos cosas chocando. */ .pe-dock-txt{ display: inline-flex; align-items: center; gap: clamp(.6rem, 1vw, 1rem); } .pe-dock-txt .curr-chip{ margin-top: 0; flex: none; font-size: .62rem; } .pe-dock-txt .curr-chip-btn{ padding: .3em .6em; } /* En móvil el dock es una barra fija y estrecha: el conmutador sobra ahí, la conversión se puede hacer en la ficha. Se oculta antes que apretar la fila hasta que el precio deje de leerse. */ @media (max-width: 700px){ .pe-dock-txt .curr-chip{ display: none; } }