/*
 * Servicios y Real Estate de la web nueva (filas 47 a 54 de la hoja): 03_SERVICES, 03.1 a 03.4, 04_REAL_ESTATE,
 * 04.1 (Partner Circle), 04.2 (Emiratos), 04.3 (propiedades en exclusiva y su ficha), 04_3B (vender) y 04_4 (invertir).
 * Va después de sistema.css y solo usa sus tokens: no cambia nada de lo que ya hay, añade las piezas que faltaban.
 * Las carga web/_base_secciones.html.twig. Medidas tomadas de las pantallas aprobadas (1672 px de ancho).
 */

/* ---------- Piezas comunes ---------- */
.secciones{--linea-oro:rgba(242,180,82,.55)}
.rotulo{margin:0;font:400 clamp(.8rem,.62rem + .55vw,1.3rem)/1.35 var(--fuente-titulares);letter-spacing:.3em;text-transform:uppercase;color:var(--texto)}
.rotulo--oro{color:var(--oro)}
.rotulo svg{width:1.1em;height:1.1em;vertical-align:-.15em}   /* el candado del sello (Invertir, paso 04) salía a 130 px */
.rotulo--texto{font:500 clamp(.72rem,.66rem + .2vw,.85rem)/1.4 var(--fuente-texto);letter-spacing:.2em}
.texto-serif{font:400 clamp(1rem,.86rem + .45vw,1.32rem)/1.38 var(--fuente-titulares);color:var(--texto)}
.raya{display:block;width:clamp(4rem,9vw,8.5rem);height:2px;margin:0;border:0;background:var(--oro-degradado)}
.raya--corta{width:3.2rem;height:1px}
.migas{display:flex;flex-wrap:wrap;gap:.6em;margin:0;padding:0;list-style:none;font:500 var(--t-s)/1.3 var(--fuente-texto);letter-spacing:.06em;text-transform:uppercase}
.migas li+li::before{content:"›";margin-right:.6em;color:var(--oro)}
.migas a{text-decoration:none}
.migas [aria-current]{color:var(--oro)}
.lema-lateral{margin:0;font:400 var(--t-s)/1.6 var(--fuente-texto);letter-spacing:.18em;text-transform:uppercase;color:var(--oro)}
.cita-lateral{margin:0;font:italic 400 clamp(1.05rem,.9rem + .5vw,1.5rem)/1.35 var(--fuente-titulares);color:var(--texto)}
.cita-lateral::before{content:"";display:block;width:3.2rem;height:1px;margin-bottom:var(--e-4);background:var(--oro)}
.centrado{text-align:center;margin-inline:auto}

/* Lista con su marca de oro (pasos de inversión, DocuSign) */
.marcas{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.marcas li{display:flex;align-items:flex-start;gap:.7rem;font:400 var(--t-s)/1.35 var(--fuente-texto)}
.marcas svg{flex:none;width:1.25rem;height:1.25rem;color:var(--oro)}

/* Rasgos con icono: «arriba» (icono sobre el rótulo, 03.x), «separados» (rayas de oro entre ellos, 04.1A, 04.2A, 04.3)
   y «circulo» (icono en un círculo, a la izquierda del texto, 04_4) */
.rasgos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--rasgos,4),minmax(0,1fr));gap:var(--e-4)}
.rasgo{display:flex;flex-direction:column;align-items:center;gap:.6rem;text-align:center}
.rasgo svg{flex:none;width:clamp(1.9rem,1.4rem + 1vw,2.6rem);height:clamp(1.9rem,1.4rem + 1vw,2.6rem);color:var(--oro)}
.rasgo__titulo{margin:0;font:400 clamp(.7rem,.64rem + .2vw,.85rem)/1.4 var(--fuente-texto);letter-spacing:.06em;text-transform:uppercase;color:var(--texto)}
.servicio--arquitectura .servicio__texto .rasgo__titulo,.servicio--construccion .servicio__texto .rasgo__titulo{font-family:var(--fuente-titulares);font-variation-settings:"opsz" var(--opsz-titulares)}   /* diap. 4 y 6: rótulos de los rasgos con serifa como las diapositivas, a todos los anchos (a 390 seguían sin serifa; Codex d04-filas, SEG-cx-p22-2-diap4-390-1) */
@media (min-width:1101px) and (max-width:1599.98px){   /* D-PRIN-113 (hasta 1599: a 1440 aún se tocaban 2 px; de 1440 a 1599 solo cambia el espaciado): en ru «ИНДИВИДУАЛЬНЫЙ»/«ИННОВАЦИОННЫЕ» no caben en su cuarta parte y se pegaban; sin espaciado y letra según ancho (10,4 px a 1101, 12 a 1280; nunca menos de 10), sin partir palabras */
  html[lang=ru] .servicio__texto .rasgo__titulo{letter-spacing:0;font-size:max(10px,min(clamp(.7rem,.64rem + calc(.2*var(--vw)),.85rem),calc(.25px + calc(.922*var(--vw)))))}
}
.rasgo__texto{margin:0;font:400 clamp(.85rem,.78rem + .25vw,1.05rem)/1.35 var(--fuente-titulares);color:var(--texto-suave)}
.rasgos--separados{gap:0}
.rasgos--separados .rasgo{padding:var(--e-2) var(--e-4)}
.rasgos--separados .rasgo+.rasgo{background:linear-gradient(var(--linea-oro),var(--linea-oro)) left center/1px 100% no-repeat}
.rasgos--separados .rasgo svg{width:clamp(2.4rem,1.8rem + 1.4vw,3.6rem);height:clamp(2.4rem,1.8rem + 1.4vw,3.6rem)}
.rasgos--separados .rasgo__titulo{font:400 clamp(.85rem,.72rem + .4vw,1.2rem)/1.3 var(--fuente-titulares);letter-spacing:.06em}
.rasgos--texto .rasgo__titulo{font:500 clamp(.75rem,.62rem + .4vw,1.1rem)/1.45 var(--fuente-texto);letter-spacing:.12em}
.rasgos--texto .rasgo svg{width:clamp(2.6rem,1.8rem + 1.8vw,4.2rem);height:clamp(2.6rem,1.8rem + 1.8vw,4.2rem)}
.rasgos--circulo .rasgo{flex-direction:row;align-items:flex-start;text-align:left;gap:var(--e-4)}
.rasgos--circulo .rasgo+.rasgo{background:linear-gradient(var(--linea-oro),var(--linea-oro)) left center/1px 80% no-repeat;padding-left:var(--e-4)}
.rasgos--circulo .rasgo>svg{box-sizing:content-box;padding:.85rem;border:1.5px solid var(--oro);border-radius:50%;width:2rem;height:2rem}
.rasgos--circulo .rasgo__titulo{font:500 var(--t-s)/1.3 var(--fuente-texto);letter-spacing:.06em;color:var(--oro)}
.rasgos--circulo .rasgo__texto{font:400 var(--t-s)/1.45 var(--fuente-texto);color:var(--texto)}
@media (min-width:900px) and (max-width:1100.98px){   /* rótulos de los 4 iconos de las páginas de servicio: en un cuarto de la columna se montaban en todas las lenguas; 2×2 como en móvil */
  .servicio__texto .rasgos{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:var(--e-2)}
  /* D-PRIN-124: el 2×2 más corto (filas, icono y su aire), para que el botón del vídeo quede en la 1.ª pantalla también a 900-901 (ru interiorismo: 828 px) */
  .servicio__texto .rasgo{gap:.35rem}
  .servicio__texto .rasgo svg{width:1.6rem;height:1.6rem}
}
@media (max-width:899.98px){
  .rasgos{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:var(--e-5)}
  .rasgos--separados .rasgo+.rasgo{background:none;padding-left:var(--e-2)}
  /* D-PRIN-088 (W46t64 es-390): en una columna las filas con círculo no llevan sangría (la 1.ª no la tenía: el texto de las demás salía 8 px a la derecha) */
  .rasgos--circulo .rasgo+.rasgo{background:none;padding-left:0}
  .rasgos--circulo{grid-template-columns:1fr}
}
/* Diap. 11 a 768 (600-899): los 5 rasgos en UNA fila con filetes dorados, como la maqueta; con la rejilla de 2 columnas el 5.º quedaba solo y pegado a la izquierda */
@media (min-width:600px) and (max-width:899.98px){
  .rasgos--una-fila{grid-template-columns:repeat(var(--rasgos,5),minmax(0,1fr));row-gap:0}
  .rasgos--una-fila .rasgo{padding:var(--e-2) .5rem}
  .rasgos--separados.rasgos--una-fila .rasgo+.rasgo{background:linear-gradient(var(--linea-oro),var(--linea-oro)) left center/1px 100% no-repeat;padding-left:.5rem}
  .rasgos--una-fila .rasgo__titulo{font-size:.74rem;letter-spacing:.03em}
  .rasgos--una-fila .rasgo__texto{font-size:.72rem}
}

/* Botones de vídeo: «barra» (oro, play y flecha: PLAY ARCHITECTURE FILM), «circulo» (círculo grande con el rótulo debajo)
   y «linea» (círculo con dos líneas al lado: PLAY VIDEO / DISCOVER...) */
.boton--barra{justify-content:space-between;gap:var(--e-5);min-height:clamp(3.2rem,2.6rem + 1vw,3.6rem);padding-inline:clamp(1.2rem,1rem + .8vw,2.2rem);font-size:clamp(.85rem,.78rem + .25vw,1.05rem);letter-spacing:.04em}
.boton--barra .icono--play{width:1.3em;height:1.3em}
.boton-video{display:inline-flex;align-items:center;gap:var(--e-4);padding:0;background:none;border:0;color:var(--blanco);cursor:pointer;text-align:left;text-decoration:none}
.boton-video__circulo{display:grid;place-items:center;flex:none;width:clamp(3.6rem,3rem + 2vw,5.4rem);aspect-ratio:1;border:2px solid var(--oro);border-radius:50%;background:rgba(0,0,0,.35);transition:background var(--transicion)}
.boton-video__circulo svg{width:42%;height:42%;margin-left:8%;color:var(--blanco)}
.boton-video:hover .boton-video__circulo{background:rgba(242,180,82,.18)}
.boton-video__lineas{display:flex;flex-direction:column;gap:.35em}
.boton-video__principal{font:400 clamp(1.05rem,.9rem + .5vw,1.5rem)/1.1 var(--fuente-titulares);letter-spacing:.04em;text-transform:uppercase}
.boton-video__secundaria{font:400 var(--t-xs)/1.2 var(--fuente-titulares);letter-spacing:.14em;text-transform:uppercase}
.boton-video--plano{justify-content:center;gap:.7em;flex:1 1 0;min-height:2.9rem;padding:.55rem 1rem;background:#d9ae7a;color:var(--tinta-sobre-oro);font:500 clamp(.8rem,.7rem + .3vw,1rem)/1 var(--fuente-titulares);letter-spacing:.1em;text-transform:uppercase}   /* opt-in (diap. 6 «VER VÍDEO 1/2»): beige plano (#d9ae7a medido en la lámina de W9), ▶ a la izquierda, sin círculo ni flecha */
.boton-video--plano svg{width:1em;height:1em;flex:none;color:currentColor}
.boton-video--plano:hover{background:#e4bd8d}
.boton-video--circulo{flex-direction:column;gap:var(--e-3);text-align:center}
.boton-video--circulo .boton-video__circulo{width:clamp(4.4rem,3.4rem + 3.4vw,7.6rem)}
.boton-video--circulo .boton-video__principal{max-width:12em;font:500 clamp(.85rem,.75rem + .35vw,1.1rem)/1.4 var(--fuente-texto);letter-spacing:.12em}
/* Diapositiva 8 (SEG-cx-p20-1-diap8-1440-2): el triángulo del vídeo del Círculo de Socios es dorado y mide ~28 % del círculo (60 px de 215; el icono tiene medio margen interno, de ahí el 56 % del svg; antes blanco y ~21 %); solo esta página: Inmobiliaria y Emiratos usan la misma variante. */
.escena--socios .boton-video--circulo .boton-video__circulo svg{width:56%;height:56%;color:var(--oro)}

/* Franja de cierre encima del pie: la de Servicios (BARCELONA · ARCHITECTURE · ... THESEDUCTION.EU), la de Real Estate
   (BARCELONA | DUBAI | INTERNATIONAL · PEOPLE. PROPERTIES. POSSIBILITIES. · INVEST. LIVE. BELONG.) y la de marca. */
.franja{border-top:1px solid var(--linea-oro);background:var(--negro)}
.franja__fila{display:flex;align-items:center;justify-content:space-between;gap:var(--e-3) var(--e-6);flex-wrap:wrap;min-height:clamp(3.8rem,3rem + 2.6vw,5.5rem);padding-block:var(--e-4);font:400 clamp(.68rem,.62rem + .2vw,.82rem)/1.5 var(--fuente-titulares);letter-spacing:.2em;text-transform:uppercase}
.franja__lista{display:flex;flex-wrap:wrap;gap:.3em 0;margin:0;padding:0;list-style:none}
.franja__lista li+li::before{content:"·";margin-inline:1.4em}
@media (max-width:599.98px){.franja__lista{gap:.3em 1.4em}.franja__lista li+li::before{content:none}}   /* al partirse en varias líneas el · quedaba suelto al principio de la línea (diapositiva 5 a 390 px; 45f2e02c de pod): sin separador, con hueco */
.franja--inmo .franja__lista li+li::before{content:"|";color:var(--oro)}
.franja__centro{margin:0;color:var(--oro);letter-spacing:.24em}
.franja__derecha{margin:0}
.franja--inmo .franja__derecha{word-spacing:1.4em}
/* De 600 a 1199 px las tres partes no caben en una línea y «Invierte. Vive. Forma parte.» caía suelta y separada (diap. 9 a 1024, SEG-p14-casa-palau-diap9-1024-9): ciudades y cierre arriba, el lema centrado debajo. */
@media (min-width:600px) and (max-width:1199.98px){.franja--inmo .franja__centro{order:3;flex-basis:100%;text-align:center}.franja--inmo .franja__derecha{word-spacing:.5em}}
.franja--marca .franja__centro{display:flex;align-items:center;gap:var(--e-5);font:italic 400 clamp(1rem,.85rem + .5vw,1.5rem)/1.3 var(--fuente-titulares);letter-spacing:.02em;text-transform:none}
.franja--marca .franja__centro::before,.franja--marca .franja__centro::after{content:"";width:clamp(2rem,10vw,22rem);height:1px;background:var(--oro)}
.franja--marca .franja__centro{text-wrap:balance}   /* diap. 7 a 390: si el lema se parte no deja «peace» sola en la 2.ª línea */
.franja__marca{display:flex;flex-direction:column;gap:.35em}
.franja__nombre{margin:0;color:var(--oro);letter-spacing:.22em}
.franja__lista--areas{font-size:.82em;letter-spacing:.14em}
.franja__lista--areas li+li::before{display:none}
.franja__lista--areas li+li{margin-left:1.4em}
.franja__derecha--ciudad span+span::before{content:"|";color:var(--oro);margin-inline:1.2em}
/* en la tira que parte en varias líneas (390 px) el «·» quedaba suelto al inicio de la 2.ª y la 3.ª: sin puntos, con hueco */
/* Fila 1220 del CRUCE: por debajo de 1100 la franja ya no cabe en una línea con su dominio; sin separadores (como a 600) para que ningún «·» o «|»
   quede al principio de una línea («· INMOBILIARIA» huérfano a 768): los elementos se separan con el hueco. */
@media (max-width:1099.98px){.franja__lista li+li::before{display:none}.franja__lista{column-gap:1.6em}}
/* Diap. 14 a 1024 (SEG-p22e-diap14-1024-14, W12): la franja de inmobiliaria va en UNA línea como la maqueta (ciudades · lema · «Invierte. Vive.
   Forma parte.»); de 900 a 1279 el tercer bloque caía a otra línea. Menos espaciado de letra y de palabra, sin partir. */
@media (min-width:900px) and (max-width:1279.98px){
  .franja--inmo .franja__fila{flex-wrap:nowrap;column-gap:var(--e-4);letter-spacing:.12em}
  .franja--inmo .franja__lista,.franja--inmo .franja__centro,.franja--inmo .franja__derecha{flex-wrap:nowrap;white-space:nowrap}
  .franja--inmo .franja__centro{letter-spacing:.14em}
  .franja--inmo .franja__derecha{word-spacing:.5em}
}
@media (min-width:900px) and (max-width:1023.98px){   /* a 900 el español no cabía por 12 px */
  .franja--inmo .franja__fila{column-gap:var(--e-3);letter-spacing:.06em}
  .franja--inmo .franja__centro{letter-spacing:.08em}
  .franja--inmo .franja__derecha{word-spacing:.3em}
}
/* Diap. 17 (/invertir; SEG-VS-d17-1024-b0d2b1bd, puente 21-oct 20:0x): modificador de la franja, no de la regla base compartida (la diap. 9 sigue con el lema debajo, centrado):
   de 900 a 1279 el lema vuelve al centro de la fila, entre las ciudades y «Invierte. Vive. …». A 768 no cabe en una línea: se queda apilado. */
@media (min-width:900px) and (max-width:1279.98px){.franja--inmo.franja--inmo-linea .franja__centro{order:0;flex-basis:auto}}
/* Diap. 14 (condición del puente al OK de CSS, W12 21-oct): en .franja--inmo, desde 900 vuelven los «|» dorados entre BARCELONA | DUBÁI |
   INTERNACIONAL como en la maqueta (la regla de la fila 1220 los quita por debajo de 1100); el hueco de columna pasa al margen del «|». */
@media (min-width:900px) and (max-width:1099.98px){.franja--inmo .franja__lista{column-gap:0}.franja--inmo .franja__lista li+li::before{display:inline;margin-inline:.8em}}
@media (min-width:900px) and (max-width:1023.98px){.franja--inmo .franja__lista li+li::before{margin-inline:.6em}}
@media (max-width:899.98px){.franja__fila{justify-content:center;text-align:center}.franja__lista{justify-content:center}.franja--marca .franja__centro::before,.franja--marca .franja__centro::after{width:2rem}}
/* SEG-VS-d16-390-f617426c: en móvil la franja de Inmobiliaria no apila 3 líneas centradas: ciudades a la izquierda y cierre a la derecha en la misma línea (como la diapositiva) y el lema debajo; las tres en una sola línea serían ~3,6 px por letra */
@media (max-width:899.98px){
  .franja--inmo .franja__fila{justify-content:space-between;text-align:left;flex-wrap:wrap;gap:var(--e-2) var(--e-2);font-size:.56rem;letter-spacing:.08em}
  .franja--inmo .franja__lista{flex-wrap:nowrap;justify-content:flex-start;white-space:nowrap}
  .franja--inmo .franja__lista li+li::before{margin-inline:.6em}
  .franja--inmo .franja__derecha{word-spacing:.5em;white-space:nowrap}
  .franja--inmo .franja__centro{order:3;flex:0 0 100%;text-align:center;letter-spacing:.16em}
}
/* d8 Círculo de Socios a <600 (SEG-cl-v6c-4-diap8-390-3/-4, V16): su franja al pie de la primera pantalla en 3 líneas como la maqueta, ciudades a la izquierda con sus «|» dorados, el lema en el centro e «Invierte. Vive. Forma parte.» a la derecha (antes, ciudades e «Invierte…» juntas a la izquierda y sin separadores). Solo esa franja. */
@media (max-width:599.98px){
  .escena--socios .franja--inmo .franja__fila{flex-direction:column;align-items:stretch;gap:var(--e-2)}
  .escena--socios .franja--inmo .franja__lista{justify-content:flex-start;column-gap:0}
  .escena--socios .franja--inmo .franja__lista li+li::before{display:inline;content:"|";color:var(--oro);margin-inline:.6em}
  .escena--socios .franja--inmo .franja__centro{order:2;text-align:center}
  .escena--socios .franja--inmo .franja__derecha{order:3;text-align:right}
}

/* Diap. 7 en tablet (SEG-VS-d7-768-e128c241): la banda de marca en UNA fila (marca · filete · lema · filete · ciudades con puntos dorados), no en dos apiladas */
.franja__punto{color:var(--oro)}
@media (min-width:600px) and (max-width:1099.98px){
  .franja--marca .franja__fila{flex-wrap:nowrap;justify-content:space-between;column-gap:var(--e-3);letter-spacing:.08em;white-space:nowrap}
  .franja--marca .franja__centro{flex:1 1 auto;justify-content:center;gap:var(--e-3);font-size:clamp(.9rem,.5rem + 1vw,1.2rem);letter-spacing:.01em}
  .franja--marca .franja__centro::before,.franja--marca .franja__centro::after{flex:1 1 0;width:auto;min-width:.8rem}
}
/* Diap. 7 a 1440 (SEG-VS-d7-1440-12cd3847 / -dd72f78e): como a 600-1099, la banda de marca en UNA fila con los filetes estirados; «The Seduction» en blanco y sin espaciar,
   las ciudades en blanco, sin espaciar y con los puntos dorados más grandes. Solo la usa la página Inmobiliaria (franja('marca')). */
@media (min-width:1100px){
  .franja--marca .franja__fila{flex-wrap:nowrap;justify-content:space-between;column-gap:var(--e-5);white-space:nowrap}
  .franja--marca .franja__fila>.franja__derecha:first-child{color:var(--blanco);letter-spacing:0;font-size:clamp(.95rem,.7rem + .5vw,1.2rem)}
  .franja--marca .franja__centro{flex:1 1 auto;justify-content:center;gap:var(--e-5);font-size:clamp(1.1rem,.8rem + .6vw,1.5rem);letter-spacing:.01em}
  .franja--marca .franja__centro::before,.franja--marca .franja__centro::after{flex:1 1 0;width:auto;min-width:.8rem}
  .franja--marca .franja__derecha--ciudades{color:var(--blanco);letter-spacing:.02em;font-size:clamp(.85rem,.65rem + .35vw,1.05rem)}
  .franja--marca .franja__punto{font-size:1.7em;line-height:0;margin-inline:.35em}
}

/* ---------- 03 · Servicios (índice) ---------- */
.servicios{padding-block:clamp(1.5rem,1rem + 2vw,3rem) clamp(2rem,1.4rem + 2vw,3.5rem)}
.servicios__cabeza{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--e-5) var(--e-7);flex-wrap:wrap;margin-bottom:clamp(1.5rem,1rem + 2vw,2.4rem)}
/* Mínimo 2.5rem: con 3rem «SERVICIOS» llegaba al borde derecho del móvil (388 de 390). */
.servicios__titular{display:flex;align-items:flex-end;gap:clamp(.8rem,1.5vw,1.6rem);font-size:clamp(2.5rem,1.2rem + calc(3.05*var(--vw)),5.2rem);line-height:.85;text-transform:uppercase;color:var(--blanco)}
.servicios__numero{display:flex;flex-direction:column;gap:.35em;padding-bottom:.25em;font-size:clamp(1.1rem,.8rem + .9vw,1.85rem);line-height:1;color:var(--blanco)}
.servicios__cita{max-width:13em;padding-top:var(--e-3);font-size:clamp(1.15rem,.8rem + 1.1vw,2rem)}
:is(:lang(es),:lang(en)) .servicios__cita{white-space:nowrap}   /* diapositiva 3: la cita en las dos líneas de la maqueta (salto en la traducción) */
.servicios__lista{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}   /* los tres servicios de la diapositiva (queja del cliente, 21-oct) */
.servicio-tarjeta{display:flex;flex-direction:column;gap:var(--e-3);padding-inline:clamp(.6rem,1.1vw,1.2rem)}
.servicio-tarjeta+.servicio-tarjeta{border-left:1px solid rgba(242,180,82,.75)}   /* diapositiva 3 (W10): separadores dorados, no grises */
@media (min-width:1280px){.servicio-tarjeta+.servicio-tarjeta{border-left-width:2px}}   /* V16 22-oct (revisión final, fila «filetes casi no se ven»): en la diapositiva 3 los dos filetes miden 2 px de 1672 (≈1,7 px a 1440) y son oro al ~75 % (181,143,77 sobre negro); servidos medían 1 px a .6 y salían grises (≈120,112,95). 2 px desde 1280 porque Chrome redondea a 1 px los bordes de menos de 2 px a escala 1 */
.servicio-tarjeta:first-child{padding-left:0}
.servicio-tarjeta:last-child{padding-right:0}
.servicio-tarjeta__numero{margin:0;font:400 clamp(1rem,.85rem + .4vw,1.3rem)/1 var(--fuente-titulares)}
.servicio-tarjeta__titulo{font-size:clamp(1.1rem,.55rem + calc(1.05*var(--vw)),1.9rem);line-height:1.05;text-transform:uppercase;color:var(--blanco)}
.servicio-tarjeta__titulo a{text-decoration:none}
@media (max-width:767.98px){.servicio-tarjeta__titulo a{display:inline-flex;align-items:center;min-height:2.75rem}}   /* zona táctil ≥44 px (SEG-USAR-servicios: medían 27 px a 390) */
.servicio-tarjeta__foto{margin:0;aspect-ratio:3/2;overflow:hidden;background:var(--superficie-2)}
.servicio-tarjeta__foto img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.servicio-tarjeta__foto a{display:block;height:100%}
.servicio-tarjeta:hover .servicio-tarjeta__foto img{transform:scale(1.03)}
.servicio-tarjeta__texto{flex:1;margin:0;font-size:clamp(.95rem,1.3vw,1.32rem);line-height:1.15}   /* diapositiva 3: la serif a ≈18,7 px e interlínea ≈21 px a 1440 (5 renglones; con 20 px y 1,38 salían 6) */
@media (min-width:1100px){:is(:lang(es),:lang(en)) .servicio-tarjeta__titulo{font-size:calc(2.05*var(--vw))}}   /* diapositiva 3: «ARQUITECTURA» ≈1,23 veces mayor; ca/fr/ru como antes («ARCHITECTURE D’INTÉRIEUR» no cabría en un renglón) */
.servicio-tarjeta .boton{align-self:flex-start}
/* Diapositiva 3 (W10): «Descubrir» ~14,4 vw de ancho y 3,1 vw de alto, en negrita, como en la maqueta (183×48 y 14 px a 1440 era muy pequeño). */
@media (min-width:1100px){.servicio-tarjeta .boton{min-width:14.4vw;min-height:3.1vw;font-size:clamp(.9rem,1.15vw,1.25rem);font-weight:700;letter-spacing:.03em}}
/* En escritorio, las cuatro con el mismo hueco interior (la primera y la última, sin él, tenían la foto 16 px más alta): el margen negativo deja los bordes alineados con la página. */
@media (min-width:760px){.servicios__lista{margin-inline:calc(-1 * clamp(.6rem,1.1vw,1.2rem))}.servicio-tarjeta:first-child,.servicio-tarjeta:last-child{padding-inline:clamp(.6rem,1.1vw,1.2rem)}}   /* el mismo hueco a los dos lados de cada tarjeta: las 3 fotos iguales (desde 760, donde ya hay 3 columnas) */
/* Diap. 3 (W7, 2.ª revisión a 1024/768): las 3 columnas de la maqueta hasta 760 px (con 2, la 03.3 quedaba sola en otra fila); por debajo, una; y bajo 1100 la cita va bajo el título en todos los idiomas */
@media (max-width:1099.98px){.servicios__cabeza{flex-direction:column}}
@media (min-width:1100px){.servicios{padding-top:.3vw}.servicios__cabeza{margin-bottom:1vw}}   /* diap. 3 a 1440: de la cabecera al filete de la cita ~37 px y de la cita a las tarjetas ~53 px como la maqueta (medían 77 y 76; Codex d03-filas, SEG-cx-p22-2-diap3-1440-4) */
@media (max-width:759.98px){.servicios__lista{grid-template-columns:1fr;row-gap:var(--e-7)}.servicio-tarjeta{padding-inline:0!important;border-left:0!important}}

/* ---------- 03.1 a 03.4 · Página de cada servicio ---------- */
.servicio{padding-top:clamp(.75rem,.4rem + 1vw,1.4rem)}
.servicio__cabeza{display:grid;grid-template-columns:minmax(0,40.5fr) minmax(0,59.5fr);gap:clamp(1rem,1.6vw,1.6rem);max-width:var(--ancho-maximo);margin-inline:auto}
.servicio__texto{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(.5rem,.25rem + .6vw,1rem);padding:clamp(.25rem,.8vw,1rem) 0 clamp(.5rem,1vw,1rem) var(--margen)}
.servicio__numero{display:flex;align-items:center;gap:var(--e-6);width:100%;margin:0;font:400 clamp(1rem,.8rem + .5vw,1.4rem)/1 var(--fuente-titulares)}
.servicio__titulo{position:relative;padding-bottom:.28em;font-size:clamp(2.2rem,calc(min(calc(50*var(--vw)),840px) / var(--letras,12)),5.2rem);line-height:.95;text-transform:uppercase;font-weight:500;letter-spacing:-.005em}
/* D-PRIN-130: la columna del titular se para en --ancho-maximo (1680), así que la letra deja de crecer ahí (840 = 50 % de 1680); con 50vw, a ≥1920 la foto tapaba el final («CONSTRUCCIÓ»). */
/* El oro del titular se pinta recortado a su caja (background-clip:text): con interlineado .95 las tildes de la primera línea quedaban fuera y no se veían («RENOVATION CLE»). Más caja por arriba, sin moverlo. */
.servicio__titulo{padding-top:.2em;margin-top:-.2em}
.servicio__titulo--dos{line-height:1.08}
@media (max-width:599.98px){.servicio__salto{display:none}}   /* el salto del titular es de escritorio: a 390 la línea se parte sola (con él, «LUJO» quedaba huérfano) */   /* diapositiva 5: titular en dos líneas con aire entre ellas (con .95 casi se tocaban) */
.servicio__titulo::after{content:"";position:absolute;left:0;bottom:0;width:min(17rem,46%);height:2px;background:var(--oro)}
.servicio__subtitulo{font-size:clamp(1.35rem,.9rem + calc(1.3*var(--vw)),2.4rem);line-height:1.1;text-transform:uppercase;color:var(--blanco)}
.servicio__intro{margin:0;line-height:1.22}
.servicio__texto .rasgos{width:100%;margin-top:var(--e-3)}
.servicio__botones{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,12.5rem),1fr));gap:var(--e-3);width:100%}
.servicio__botones .boton{width:100%;gap:var(--e-3);padding-inline:clamp(.9rem,.75rem + .45vw,1.4rem)}
.servicio__botones .boton span{white-space:nowrap}  /* «VER VÍDEO 2» en una línea (W12 en vivo, 21-oct): si no caben dos, se apilan */
.servicio__foto{position:relative;margin:0;min-height:100%;background:var(--superficie-2)}
.servicio__foto img{width:100%;height:100%;min-height:18rem;object-fit:cover}
/* Diap. 4 a 1440 (V9, SEG-p1b-masia-ext-diap4-1440-6/7): la columna de texto (555 px es, 591 en) estiraba la foto (843x555 para 863x451) y la franja
   quedaba fuera de 1440x900. Como la maqueta: foto con su proporción y columna compacta (subtítulo en 2 líneas, texto en 6, huecos cortos). */
@media (min-width:1100px){.servicio--arquitectura .servicio__foto{min-height:0;align-self:start}.servicio--arquitectura .servicio__foto img{height:auto;min-height:0}.servicio--arquitectura .servicio__texto{gap:.4vw}.servicio--arquitectura .servicio__subtitulo{font-size:calc(2.1*var(--vw))}.servicio--arquitectura .servicio__intro{font-size:1.39vw;line-height:1.2}.servicio--arquitectura .servicio__texto .rasgos{margin-top:0}.servicio--arquitectura .servicio__texto .boton{min-height:2.9vw}}
/* Diap. 4 a 768 y 1024 (SEG-R3-d4-*, 3.ª revisión): entre 600 y 1099 el subtítulo (27 px a 1024) y el párrafo (18 px) salían muy grandes para el ancho de la página y el titular, a 768, ocupaba toda la columna con un subrayado largo; como la maqueta: letra proporcional al ancho y subrayado corto. */
@media (min-width:600px) and (max-width:1099.98px){.servicio--arquitectura .servicio__subtitulo{font-size:max(1.1rem,calc(1.9*var(--vw)))}.servicio--arquitectura .servicio__intro{font-size:max(1rem,1.45vw);line-height:1.25}.servicio--arquitectura .servicio__titulo::after{width:max(3.5rem,6vw)}}
@media (min-width:600px) and (max-width:899.98px){.servicio--arquitectura .servicio__titulo{font-size:clamp(2.4rem,calc(6.6*var(--vw)),3.4rem)}}
/* Diap. 4 a 1024 (p21x1): el texto, más alto que la foto, la estiraba a 600x626 y recortaba el olivo; entre 900 y 1279 la foto guarda su proporción. */
@media (min-width:900px) and (max-width:1279.98px){.servicio__foto{min-height:0;align-self:start}.servicio__foto img{height:auto;min-height:0}}
.servicio__cita{position:absolute;top:10%;right:3.5%;max-width:8.5em;font:italic 400 clamp(1.1rem,.7rem + 1.2vw,2.1rem)/1.2 var(--fuente-titulares);color:var(--blanco);text-shadow:0 1px 12px rgba(0,0,0,.6)}
.servicio__cita::before{content:"";display:block;width:4.5em;height:2px;margin-bottom:.6em;background:var(--oro)}
.galeria-franja{list-style:none;margin:clamp(.6rem,1vw,1rem) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(.4rem,.6vw,.75rem)}
.galeria-franja figure{margin:0}
.galeria-franja img{width:100%;aspect-ratio:2.1/1;object-fit:cover}
/* Diap. 4: originales completos y viñetas de distinto ancho.
   La cuarta conserva techo y primer plano del original 3:2 (SEG-R3-d4-f1d6d7b2). */
.servicio--arquitectura .galeria-franja img{height:auto;aspect-ratio:auto;object-fit:contain}
@media (min-width:900px){
  .servicio--arquitectura .galeria-franja{grid-template-columns:minmax(0,358fr) minmax(0,368fr) minmax(0,333fr) minmax(0,328fr);gap:.9vw;margin-top:1.1vw}
}
.servicio--arquitectura .galeria-franja li:nth-child(4) img{aspect-ratio:328/171;object-fit:cover;object-position:50% 55%}   /* W7: la cuarta (original 3:2) a la altura de las otras tres, sin el techo ni el primer plano de más, como la diapositiva 4 (SEG-R3-d4-15480daf) */
.galeria-franja figcaption{padding:var(--e-3) var(--e-4) var(--e-4);font:400 var(--t-xs)/1.4 var(--fuente-titulares);letter-spacing:.22em;text-transform:uppercase}
/* Diap. 6 (Construcción; 3.ª revisión del VS, SEG-R3-d6-4ebdcf77/-b846eaed): las 4 fotos con margen a los lados, no a ras del borde, y en su
   proporción (405×222, ≈1,82), no recortadas a 2,1:1. Solo Construcción: las demás páginas de servicios tienen su propia maqueta. */
.servicio--construccion .galeria-franja{padding-inline:clamp(.6rem,1.1vw,1.1rem)}
.servicio--construccion .galeria-franja img{aspect-ratio:405/222}
/* Diap. 6 a 1280+ (reparo de W7 sobre lo servido en pt192, SEG-V7-d6-galeria-rotulos-1440): los pies en versalitas con la inicial algo mayor, interletrado menor y
   más cerca de la foto, como la maqueta; antes mayúsculas planas con .22em, un 7 % más anchas. Solo Construcción. */
@media (min-width:1280px){
  .servicio--construccion .galeria-franja figcaption{padding-top:var(--e-2);text-transform:none;font-variant-caps:small-caps;font-size:calc(var(--t-xs)*1.3);letter-spacing:.14em}
}
/* Diap. 6 a 900-1279 (V9 l.347/348): los pies en UNA línea, como la maqueta, y con aire hasta lo que hay debajo; la letra y el espaciado siguen al ancho (10 px a 1024). */
@media (min-width:900px) and (max-width:1279.98px){
  .galeria-franja figcaption{padding-inline:var(--e-2);font-size:clamp(.56rem,.87vw,.75rem);letter-spacing:.12em}
}
@media (max-width:899.98px){
  .servicio__cabeza{grid-template-columns:1fr}
  .servicio__texto{padding-right:var(--margen)}
  .servicio__titulo{font-size:clamp(2rem,calc(calc(118*var(--vw)) / var(--letras,12)),4.4rem)}
  .servicio__foto img{aspect-ratio:16/10;min-height:0}
  .galeria-franja{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* Diap. 5 a 768 (SEG-R3-d5-886d0c4d / -bd6f8323): como la maqueta, el párrafo compacto bajo el subtítulo en la columna izquierda y la foto a su derecha (no el párrafo a todo el ancho y la foto debajo). */
@media (min-width:600px) and (max-width:899.98px){
  .servicio--interiorismo .servicio__cabeza{grid-template-columns:minmax(0,48fr) minmax(0,52fr)}
  .servicio--interiorismo .servicio__texto{padding-right:0}
  .servicio--interiorismo .servicio__titulo{font-size:clamp(1.5rem,calc(4.2*var(--vw)),2.2rem)}
  .servicio--interiorismo .servicio__subtitulo{font-size:clamp(1.1rem,calc(2.8*var(--vw)),1.5rem)}
  .servicio--interiorismo .servicio__intro{font-size:clamp(.78rem,1.9vw,.95rem);line-height:1.2}
  .servicio--interiorismo .servicio__texto .rasgos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .servicio--interiorismo .servicio__foto img{aspect-ratio:auto;height:100%;min-height:0}
}
@media (max-width:520px){.servicio__texto .rasgos{grid-template-columns:repeat(2,minmax(0,1fr))}.servicio__texto .boton{width:100%}}
/* W8 (D-PRIN-070/071, WCAG 1.4.10): a 320 px «SERVICIOS» (40 px) y «СТРОИТЕЛЬСТВО» (mínimo de 2rem) pasaban de los 320; de 381 px arriba no cambia nada. */
@media (max-width:380px){
  .servicios__titular{font-size:calc(9*var(--vw))}
  .servicio__titulo{font-size:clamp(1.6rem,calc(calc(118*var(--vw)) / var(--letras,12)),4.4rem)}
}

/* ---------- 04 · Real Estate: cuatro cuadrantes y el círculo del centro ---------- */
.hub{position:relative}
.hub__rejilla{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.cuadrante{position:relative;isolation:isolate;display:flex;min-height:max(23.3vw,22rem);overflow:hidden;border-bottom:1px solid var(--linea-suave)}
.cuadrante__foto{position:absolute;z-index:-1;inset:0;width:100%;margin:0}   /* la foto llena toda su mitad, con el texto encima (maqueta de la diap. 7; SEG-p27d-diap7-1440-5/6, de 95df082c1) */
.cuadrante__foto img{width:100%;height:100%;object-fit:cover}
.cuadrante__foto-enlace{position:absolute;inset:0;display:block}   /* d7 (orden de Víctor 22-oct): la foto lleva al destino del botón; el degradado de encima no intercepta el clic */
.cuadrante__foto::after{pointer-events:none;content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.86) 0%,rgba(0,0,0,.72) 40%,rgba(0,0,0,0) 85%)}
.cuadrante--derecha .cuadrante__foto{inset:0}
.cuadrante--derecha .cuadrante__foto::after{background:linear-gradient(270deg,rgba(0,0,0,.86) 0%,rgba(0,0,0,.72) 40%,rgba(0,0,0,0) 85%)}
.cuadrante__texto{display:flex;flex-direction:column;align-items:flex-start;gap:var(--e-2);width:54%;padding:clamp(1.5rem,2.4vw,2.6rem) var(--e-5) clamp(1.5rem,2.4vw,2.4rem) var(--margen)}
.cuadrante--derecha .cuadrante__texto{margin-left:auto;padding:clamp(1.5rem,2.4vw,2.6rem) var(--margen) clamp(1.5rem,2.4vw,2.4rem) var(--e-5)}
.cuadrante__numero{display:flex;align-items:center;gap:var(--e-4);width:100%;margin:0;font:400 clamp(2rem,1.4rem + 1.6vw,3.1rem)/1 var(--fuente-titulares);color:var(--oro)}
.cuadrante__numero::after{content:"";flex:0 1 10rem;height:1px;background:var(--oro)}
.cuadrante__titulo{font-size:clamp(1.25rem,.55rem + calc(1.25*var(--vw)),1.95rem);line-height:1.02;text-transform:uppercase;color:var(--blanco)}
.cuadrante__texto .texto-serif{font-size:clamp(.85rem,.78rem + .18vw,.98rem);max-width:28em;line-height:1.28}
.cuadrante__texto .rotulo{font-size:clamp(10px,.55rem + .2vw,.78rem);letter-spacing:.18em}   /* D-PRIN-099: suelo de 10 px (1889.; a 390 salía .62rem = 9,92 px) */
.cuadrante__texto .boton{margin-top:auto}
.cuadrante__texto .rotulo span{display:block}
.cuadrante__texto .rotulo--caja span{white-space:nowrap}
.cuadrante__texto .rotulo--caja{letter-spacing:.1em;padding:.55em .9em;background:rgba(0,0,0,.72);text-align:center}   /* el lema del 04: dos líneas en una caja oscura */
/* Tarjeta entera clicable (foto, número y título llevan a la página): el enlace de «Descubrir más» se extiende sobre el cuadrante (.cuadrante es position:relative) */
.cuadrante .boton--tarjeta::after{content:"";position:absolute;inset:0;z-index:1}
.cuadrante .boton--tarjeta:hover,.cuadrante .boton--tarjeta:focus-visible{transform:none;filter:none}   /* el transform/filter del :hover de .boton--oro hacía del botón el bloque contenedor y el ::after se encogía a él: la foto y el título no llevaban a ninguna parte (Codex 9519) */
/* Diap. 7 a 1440 (lámina W7 d7-inmo-1440-es-diap-vs-cand-2cf48775c): cada fila de cuadrantes medía ≈460 px frente a ≈340 en la maqueta; número, título y
   cuerpo menores, como la diapositiva (01 en 3 líneas, 02 en 2: «INVERSIÓN INMOBILIARIA / DE LUJO EN EMIRATOS ÁRABES»). Solo esta página usa .cuadrante. */
@media (min-width:1100px){
  .cuadrante__numero{font-size:2rem}
  .cuadrante__titulo{font-size:1.8rem}   /* alto de línea medido en la diapositiva escalada a 1440: 01 22 px, 04 21 px (con 1.5rem salían 18) */
  .cuadrante__titulo{text-wrap:balance}   /* cortes de la diapositiva: «RED DE SOCIOS / INMOBILIARIOS / EN BARCELONA», «INVIERTE CON / THE SEDUCTION» */
  .cuadrante:nth-child(2) .cuadrante__titulo{font-size:1.7rem}   /* el 02 a 20,5 px de línea como la diapositiva (con 1.12rem, 14; con 1.6rem, 19) */
  .cuadrante:nth-child(2) .cuadrante__texto{width:72%}   /* y en dos líneas, como ella: su columna más ancha (el círculo acaba en el 62 % del ancho) */
  .cuadrante__texto .rotulo:not(.rotulo--caja){letter-spacing:.08em}   /* «OPORTUNIDADES GLOBALES, RENTABILIDAD EXTRAORDINARIA.» en una línea */
  .cuadrante__texto .boton{min-width:min(100%,13.5rem)}
  .cuadrante__texto .texto-serif{font-size:.85rem;line-height:1.25}
}
/* Diap. 7 a 1440 (SEG-VS-d7-1440-9c79301d, medida de W1 en vivo pt257: panel de 779 px frente a ≈672 de la diapositiva, +16 %): en la maqueta el texto arranca a ≈8 px del borde
   de su cuadrante y el botón mide ≈38 px; aquí 34 px de aire arriba y abajo y botón de 48 px. Menos aire (1,1vw), botón de 2,4rem y cuerpo un punto menor. Solo desde 1100 px y esta página. */
@media (min-width:1100px){
  .cuadrante__texto,.cuadrante--derecha .cuadrante__texto{padding-block:1.1vw}
  .cuadrante__texto{gap:.5rem}
  .cuadrante__texto .boton{min-height:2.4rem;padding-block:.35rem}
  .cuadrante__texto{justify-content:center}
  .cuadrante__texto .boton{margin-top:1.2vw}   /* SEG diap. 7 a 1440 (W7, parte VS-1040): el botón «Descubrir más» va justo bajo el párrafo, no clavado al fondo del cuadrante (margin-top:auto); el bloque, centrado en la altura */
  .cuadrante__texto .texto-serif{font-size:.8rem}
}
.hub__circulo{--circulo:clamp(17rem,24vw,26rem);position:absolute;z-index:2;left:50%;top:50%;translate:-50% -50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--e-3);width:var(--circulo);aspect-ratio:1;padding:var(--e-6);border:3px solid var(--oro);border-radius:50%;background:radial-gradient(circle at 35% 30%,#2b2723 0%,#141210 55%,#070706 100%);box-shadow:0 0 0 6px rgba(0,0,0,.55),0 0 2.2rem 1.6rem rgba(0,0,0,.55);text-align:center}
/* El titular cabe en el círculo: el tamaño sale de la palabra más larga (--letras, la pone la plantilla). */
.hub__circulo h1{display:flex;flex-direction:column;align-items:center;gap:.15em;font-size:min(4.4rem,calc(var(--circulo) * 1.12 / var(--letras,8)));line-height:.9;text-transform:uppercase;color:var(--blanco);font-weight:500}
.hub__circulo h1 .rotulo{font-size:max(10px,calc(var(--circulo) * .048));letter-spacing:.6em;margin-bottom:.4em}   /* D-PRIN-114: del círculo, no del h1 (con .3em del h1 cambiaba con la palabra más larga de cada lengua: «Lujo» 10 px, «Luxury» 19 px a 1440); .048 da la mayúscula de la diapositiva 7 (0,037 del círculo); suelo de 10 px de la D-PRIN-099 */
.hub__circulo h1 .hub__titular{white-space:nowrap}
.hub__circulo h1 .hub__titular::after{content:"";display:block;width:calc(var(--circulo) * .64);height:1px;margin:calc(var(--circulo) * .04) auto 0;background:var(--oro)}   /* el filete dorado entre el titular y el lugar (maqueta) */   /* D-PRIN-115: el titular en una línea en todas las lenguas (su tamaño ya sale de su largo, --letras) */
.hub__circulo h1 .hub__lugar{margin-top:.55em;font:400 clamp(.75rem,.6rem + .4vw,1.05rem)/1.2 var(--fuente-titulares);letter-spacing:.1em}
:lang(ru) .hub__circulo h1{font-size:min(4rem,calc(var(--circulo) * .98 / var(--letras,8)))}
@media (min-width:960px){.hub__circulo h1{font-size:min(4.4rem,calc(var(--circulo) * 1.3 / var(--letras,8)))}}   /* d7: «INMOBILIARIA» del círculo al 19,4 % del ancho a 1440 y 2356 (279 px a 1440, como la diapositiva 7: 19,3 %); servido, 16,7 % (240 px) */
.hub__circulo .boton-video--circulo .boton-video__circulo{width:3rem;border-width:2px}
.hub__circulo .boton-video__principal{font:400 var(--t-xs)/1.25 var(--fuente-titulares);letter-spacing:.06em;max-width:11em}
.hub__flecha{position:absolute;z-index:1;width:clamp(3rem,4.5vw,5rem);height:clamp(3rem,4.5vw,5rem);color:var(--oro);left:50%;top:50%}
.hub__flecha svg{width:100%;height:100%}
.hub__flecha--1{translate:calc(-50% - clamp(10rem,14.5vw,15rem)) calc(-50% - clamp(6rem,8.5vw,9rem));rotate:-90deg}
.hub__flecha--2{translate:calc(-50% + clamp(10rem,14.5vw,15rem)) calc(-50% - clamp(6rem,8.5vw,9rem))}
.hub__flecha--3{translate:calc(-50% - clamp(10rem,14.5vw,15rem)) calc(-50% + clamp(6rem,8.5vw,9rem));rotate:180deg}
.hub__flecha--4{translate:calc(-50% + clamp(10rem,14.5vw,15rem)) calc(-50% + clamp(6rem,8.5vw,9rem));rotate:90deg}
/* Diap. 7 en tablet (SEG-VS-d7-768-*, SEG-VS-d7-1024-*, VS 21-oct): de 960 a 1099 sigue la cuadrícula 2×2 con el círculo en el centro (a 1024
   era una columna de 4135 px); de 600 a 959 las cuatro fotos van a sangre detrás de su texto, como la diapositiva; a 599 o menos, la foto arriba. */
.cuadrante__texto .boton{background:var(--oro);box-shadow:none;min-width:min(100%,15.5rem);justify-content:space-between;font-weight:700}   /* el botón de la diapositiva: amarillo plano y ancho */
.cuadrante__texto .rotulo--caja{align-self:stretch}   /* la caja del 04, a toda la columna del texto */
@media (min-width:1280px){   /* SEG diap. 7: solo el círculo y sus flechas (desde 1280; a 1100-1279 no se toca el panel de W7; las flechas de 1280-1399 las pone el bloque de 1100-1399 de abajo) */
  .hub__circulo h1 .hub__lugar{white-space:nowrap;font-size:clamp(.7rem,calc(.9*var(--vw)),.95rem);letter-spacing:.1em}   /* «BARCELONA E INTERNACIONAL» en un renglón, como la diapositiva */
  /* las flechas tocan el borde dorado del círculo (radio 12vw hasta 13rem): centro a 12vw/7vw, con la cola en el borde */
  .hub__flecha--1{translate:calc(-50% - min(12vw,13rem)) calc(-50% - min(7vw,7.6rem))}
  .hub__flecha--2{translate:calc(-50% + min(12vw,13rem)) calc(-50% - min(7vw,7.6rem))}
  .hub__flecha--3{translate:calc(-50% - min(12vw,13rem)) calc(-50% + min(7vw,7.6rem))}
  .hub__flecha--4{translate:calc(-50% + min(12vw,13rem)) calc(-50% + min(7vw,7.6rem))}
}
@media (max-width:959.98px){
  .hub{display:flex;flex-direction:column}
  .hub__circulo{--circulo:min(20rem,82vw);position:relative;left:auto;top:auto;translate:none;order:-1;margin:var(--e-6) auto}
  .hub__flecha{display:none}
  .hub__rejilla{grid-template-columns:1fr}
}
@media (min-width:960px) and (max-width:1099.98px){
  .cuadrante__texto{width:58%;gap:var(--e-2)}
  .cuadrante__texto .boton{min-width:0;width:100%;max-width:14rem;padding-inline:var(--e-4);white-space:nowrap;letter-spacing:.03em}
  .cuadrante__texto .rotulo--caja{letter-spacing:.02em;padding-inline:.3em;font-size:10px}
  .hub__circulo{--circulo:clamp(14rem,22vw,17rem);padding:var(--e-4)}
  .hub__flecha{width:2.6rem;height:2.6rem}
  .hub__flecha--1{translate:calc(-50% - 9rem) calc(-50% - 5.4rem)}
  .hub__flecha--2{translate:calc(-50% + 9rem) calc(-50% - 5.4rem)}
  .hub__flecha--3{translate:calc(-50% - 9rem) calc(-50% + 5.4rem)}
  .hub__flecha--4{translate:calc(-50% + 9rem) calc(-50% + 5.4rem)}
}
/* Diap. 7 a 1024 (SEG-cx-p22-3-diap7-1024-1/-2/-4, SEG-cx-p35-4-diap7-1024-1/-3; lámina W7 d7-1024-es-diap-vs-servida-29f688935): el panel era casi cuadrado (filas de 22rem) y la maqueta es panorámica (alto/ancho 0,467);
   filas de 23,3vw y número, título, cuerpo, rótulo y botón a escala de la diapositiva. Solo 960-1099 px y solo esta página (.cuadrante). */
@media (min-width:960px) and (max-width:1399.98px){   /* extendido de 1100 a 1399 (puente: escalón 0,50 → 0,69 a 1100): mismas medidas en vw; desde 1400 las de 1440 */
  .cuadrante{min-height:23.3vw}
  .cuadrante__texto{gap:.45vw;padding-block:1.2vw}
  .cuadrante__numero{font-size:2vw}
  .cuadrante__titulo{font-size:calc(1.9*var(--vw))}
  .cuadrante__texto .texto-serif{font-size:min(1.05vw,.8rem);line-height:1.25}
  .cuadrante:nth-child(odd) .cuadrante__texto{width:66%}
  .cuadrante:nth-child(even) .cuadrante__texto{width:72%}
  .cuadrante__texto .rotulo:not(.rotulo--caja){font-size:max(10px,.85vw);letter-spacing:.06em}   /* V16 4163: suelo de 10 px y proporcional a la diapositiva (mayúscula 7,2/8,4 px a 1100/1280); la caja del 04 queda como estaba (igual o mayor que la diapositiva) */
  .cuadrante__texto .rotulo--caja{letter-spacing:.12em}
  .cuadrante__texto .rotulo--caja{font-size:max(10px,.78vw);letter-spacing:.06em}   /* W9 revisión final B2: la caja del 04 a 8,6 px a 1100; suelo de 10 px (letter-spacing menor para que siga en su caja) */
  .cuadrante__texto .boton{max-width:13vw;min-height:2.6vw;padding-block:.3vw;font-size:.95vw}
  .hub__flecha{width:3vw;height:3vw}
  .hub__flecha--1{translate:calc(-50% - 10.9vw) calc(-50% - 10.9vw)}
  .hub__flecha--2{translate:calc(-50% + 10.9vw) calc(-50% - 10.9vw)}
  .hub__flecha--3{translate:calc(-50% - 10.9vw) calc(-50% + 10.9vw)}
  .hub__flecha--4{translate:calc(-50% + 10.9vw) calc(-50% + 10.9vw)}
}
@media (min-width:1100px) and (max-width:1399.98px){
  .hub__circulo{--circulo:22vw}   /* el círculo de la diapositiva: 22,2 % del ancho (a 1100-1399 era 24vw) */
  /* SEG diap. 7: las flechas (3vw) tocan el borde dorado del círculo de 22vw: cola a 11vw del centro */
  .hub__flecha--1{translate:calc(-50% - 8.8vw) calc(-50% - 8.8vw)}
  .hub__flecha--2{translate:calc(-50% + 8.8vw) calc(-50% - 8.8vw)}
  .hub__flecha--3{translate:calc(-50% - 8.8vw) calc(-50% + 8.8vw)}
  .hub__flecha--4{translate:calc(-50% + 8.8vw) calc(-50% + 8.8vw)}
}
@media (min-width:1100px) and (max-width:1279.98px){   /* SEG diap. 7 a 1100 (DECIDIDO 4054): el lugar también en un renglón (en 2 estiraba el círculo a 242x271) y un punto menor para caber en el círculo de 22vw */
  .hub__circulo h1 .hub__lugar{white-space:nowrap;font-size:max(11px,calc(.9*var(--vw)));letter-spacing:.1em}   /* 11 px como mínimo (regla del puente; V16 midió 10 px a 1100) */
  .hub__circulo{padding:var(--e-4)}   /* con el relleno de --e-6 el contenido medía más que el círculo de 22vw y lo estiraba (242x248) */
}
/* Diap. 7 de 960 a 1023 px (puente vía V7: alto/ancho del panel 0,551 en es a 960; la diapositiva 0,467 ±10 % = ≤0,514): menos aire y el título y el cuerpo un punto menores en ese tramo
   (los suelos en rem pesan más con 960 px). Solo esta página. */
@media (min-width:960px) and (max-width:1023.98px){
  .cuadrante__texto{padding-block:.9vw;gap:.35vw}
  .cuadrante__titulo{font-size:calc(1.8*var(--vw))}
  .cuadrante__texto .rotulo{letter-spacing:.08em}
  .cuadrante__texto .boton{min-height:2.3vw}
}
@media (max-width:599.98px){
  .cuadrante{flex-direction:column;min-height:0}
  .cuadrante__foto,.cuadrante--derecha .cuadrante__foto{position:relative;inset:auto;width:100%;aspect-ratio:2/1;overflow:hidden}
  .cuadrante__foto img{position:absolute;inset:0}
  .cuadrante__foto::after,.cuadrante--derecha .cuadrante__foto::after{background:linear-gradient(0deg,var(--negro) 0%,rgba(0,0,0,0) 35%)}
  /* Lejos de donde estaba el círculo en la pantalla aprobada (arriba en las dos primeras, abajo en las dos últimas) */
  .cuadrante:nth-child(-n+2) img{object-position:50% 0}
  .cuadrante:nth-child(n+3) img{object-position:50% 100%}
  .cuadrante__texto,.cuadrante--derecha .cuadrante__texto{width:100%;margin:0;padding:var(--e-5) var(--margen) var(--e-7)}
}
@media (min-width:600px) and (max-width:959.98px){
  .cuadrante{min-height:max(26rem,54vw)}
  .cuadrante__texto,.cuadrante--derecha .cuadrante__texto{width:68%;justify-content:center;padding-block:var(--e-6)}
  .cuadrante__titulo{font-size:clamp(1.6rem,.9rem + calc(2.4*var(--vw)),2.2rem)}
  .cuadrante__texto .texto-serif{font-size:clamp(1rem,.8rem + .6vw,1.15rem);max-width:30em}
  .cuadrante__texto .rotulo{font:400 .85rem/1.4 var(--fuente-titulares);letter-spacing:.2em}
  .cuadrante__texto .rotulo--caja{letter-spacing:.08em}
  .cuadrante__texto .boton{margin-top:var(--e-2)}
  .cuadrante__foto::after{background:linear-gradient(90deg,rgba(0,0,0,.88) 0%,rgba(0,0,0,.82) 55%,rgba(0,0,0,.55) 75%,rgba(0,0,0,0) 100%)}
  .cuadrante--derecha .cuadrante__foto::after{background:linear-gradient(270deg,rgba(0,0,0,.88) 0%,rgba(0,0,0,.82) 55%,rgba(0,0,0,.55) 75%,rgba(0,0,0,0) 100%)}   /* a 768 el texto llega al 68 % del ancho: el velo lo cubre entero para ≥4,5:1 (el 03 sobre la casa de piedra se leía mal; puente 2380150) */
}
@media (min-width:600px) and (max-width:1099.98px){
  .cuadrante__texto .rotulo--texto:not(.rotulo--caja){font:400 .8rem/1.4 var(--fuente-titulares);letter-spacing:.2em}
}

/* ---------- Escena: foto a todo el ancho con el texto centrado encima (04.1A, 04.1B, 04.2A, 04.2B) ---------- */
.escena{position:relative;isolation:isolate;overflow:hidden;padding:clamp(2rem,1rem + 4vw,4.5rem) 0 clamp(2rem,1.5rem + 2vw,3.5rem)}
.escena__fondo{position:absolute;z-index:-1;inset:0 0 auto;height:var(--alto-fondo,78%);margin:0}
.escena__fondo img{width:100%;height:100%;object-fit:cover;object-position:var(--foco-fondo,50% 50%)}
/* Diap. 11: la foto de Emiratos (1983×793, 2,5:1) se ve ENTERA a partir de 1100 (Burj en el 72 % del ancho, terraza completa) y la sombra la funde con el negro de abajo; en pantallas estrechas se recorta con el foco en la torre y con menos sombra, no a la izquierda y oscura */
.escena__fondo--panoramica img{object-position:72% 50%}
@media (max-width:599.98px){.escena--uae .escena__fondo--panoramica img{object-position:92% 50%}}   /* d11 a 390 (Codex d11-fondo-movil, SEG-p22f-diap11-390-1): el recorte vertical uae-fondo-movil.webp (560×793) se enseña al 39 % de su ancho; con 72 % el Burj Khalifa (al 82 % de la foto) quedaba cortado por el borde derecho; con 92 % entra entero y centrado */
@media (max-width:599.98px){.escena--uae .escena__cabeza>.rotulo,.escena--uae .boton-video--circulo{text-shadow:0 0 6px rgba(0,0,0,.9),0 1px 2px rgba(0,0,0,.9)}}   /* con el Burj detrás, el subtítulo y el rótulo del vídeo bajaban de ≈3,0 a ≈2,7:1 (medido a 390 es/en); la sombra los devuelve a lo de antes */
@media (max-width:599.98px){.escena--uae .escena__fondo.escena__fondo--panoramica::after{background:linear-gradient(0deg,var(--fondo) 0%,rgba(5,5,5,.42) 30%,rgba(5,5,5,.34) 60%,rgba(5,5,5,.32) 100%)}}   /* velo del héroe a 390 más firme (60 %: .1→.34): con el Burj detrás, el rótulo del vídeo y las cifras no bajan del contraste que tenían (puente 1777163: mínimo de línea ≥3,03; medido en el pod) */
.escena__fondo.escena__fondo--panoramica::after{background:linear-gradient(0deg,var(--fondo) 0%,rgba(5,5,5,.35) 30%,rgba(5,5,5,.1) 60%,rgba(5,5,5,.25) 100%)}   /* con la clase doble gana al velo general de .escena__fondo::after (l.311, .55/.25/.45), que llegaba después con la misma fuerza y dejaba el cielo oscuro */
@media (min-width:1100px){.escena__fondo--panoramica{width:100%;height:auto;aspect-ratio:2.2/1;max-height:calc(21.5rem + 20vw)}.escena__fondo--panoramica img{object-position:62% 50%}}   /* d11: la foto en una caja más alta (2,2:1; la diapositiva la enseña ≈2,1:1) con la torre al 62 %: panorama más alto como la maqueta; el tope crece con el ancho (21,5 rem + 20 vw) para que quepa en la escena de 1280 a 2560 px (medido en el pod con 72svh en 8 tamaños y recalculado) */
@media (min-width:600px) and (max-width:899.98px){.escena--uae .escena__fondo--panoramica img{object-position:6% 50%}.escena--uae .escena__fondo.escena__fondo--panoramica::after{background:linear-gradient(0deg,var(--fondo) 0%,rgba(5,5,5,.42) 30%,rgba(5,5,5,.4) 60%,rgba(5,5,5,.5) 100%)}}   /* d11 a 768 (V15 SEG-cx-p33-1-diap11-768-1 y titular sin contraste): la foto es 2,5:1 y la caja vertical enseña un tercio; con 72 % solo quedaba la torre; con 6 % entran el ático, los sofás y la terraza de la maqueta, y el velo (.4–.5) oscurece el cielo tras el titular dorado */
@media (min-width:600px) and (max-width:899.98px){.escena--uae .escena__fondo.escena__fondo--panoramica::after{background:radial-gradient(72% 15% at 50% 30%,rgba(5,5,5,.55) 0%,rgba(5,5,5,.3) 55%,rgba(5,5,5,0) 100%),linear-gradient(0deg,var(--fondo) 0%,rgba(5,5,5,.42) 30%,rgba(5,5,5,.4) 60%,rgba(5,5,5,.5) 100%)}}   /* W1 (SEG-cl-v5-5-diap11-768-3): con el velo de arriba el dorado «EN EMIRATOS ÁRABES?» caía sobre la luz de la ventana (p99 3,75 a 768, 3,07 a 600); una mancha oscura solo detrás del titular lo deja en ≥4,6 (p95/p99, 600-899 es/en) sin tocar el encuadre */
.escena__fondo::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,var(--fondo) 0%,rgba(5,5,5,.55) 30%,rgba(5,5,5,.25) 60%,rgba(5,5,5,.45) 100%)}
/* Diap. 8 (Círculo de Socios): la foto «Atardecer de lujo sobre Barcelona» entera, con su proporción (2011 x 782): se ven el sol, la Sagrada Família y la terraza; el oscurecido solo funde a negro por abajo y deja el cielo */
.escena--socios .escena__fondo{height:auto;aspect-ratio:1672/650}
.escena--socios .escena__fondo::after{background:linear-gradient(0deg,var(--fondo) 0%,rgba(5,5,5,.62) 22%,rgba(5,5,5,.5) 52%,rgba(5,5,5,.2) 100%)}   /* diap. 8 a 1440: el párrafo sobre el cielo claro se leía mal (V12, lámina de página entera): velo más cerrado en la mitad baja */
@media (max-width:899.98px){.escena--socios .escena__fondo{height:80%;aspect-ratio:auto}}
/* Móvil y tableta (SEG diap8 390-7 y 768-8): la foto con su <picture> llena el fondo; de 600 a 1099 px el encuadre va a la Sagrada Família. */
.escena--socios .escena__fondo picture{display:block;width:100%;height:100%}
@media (max-width:1099.98px){.escena--socios{--foco-fondo:78% 50%}}
@media (max-width:599.98px){.escena--socios{--foco-fondo:50% 50%}.escena--socios .escena__fondo::after{background:linear-gradient(0deg,var(--fondo) 0%,rgba(5,5,5,.62) 22%,rgba(5,5,5,.48) 50%,rgba(5,5,5,.3) 100%)}}   /* el sol cae detrás del párrafo: velo medio, no negro */
/* Rasgos de la diap. 8: iconos de trazo fino y más grandes (las etiquetas parten donde la diapositiva, con \n en la traducción) */
.escena--socios .rasgos--separados .rasgo svg{width:clamp(3rem,2.2rem + 1.8vw,4.4rem);height:clamp(3rem,2.2rem + 1.8vw,4.4rem);stroke-width:1.1}
/* Botón «Únete al Círculo de Socios» de la diap. 8: rectángulo plano bronce mate (#9a723d en la diapositiva; #936b37 para que el blanco pase AA, 4,8:1), texto claro, sin degradado ni resplandor */
.boton--bronce{background:#936b37;color:#fff;box-shadow:none}
.boton--bronce:hover{filter:brightness(1.1);transform:translateY(-1px)}
.escena--oscura .escena__fondo::after{background:linear-gradient(0deg,var(--fondo) 0%,rgba(5,5,5,.8) 40%,rgba(5,5,5,.55) 100%)}
.escena__cabeza{display:flex;flex-direction:column;align-items:center;gap:clamp(.6rem,.3rem + .8vw,1.2rem);text-align:center}
.escena__titulo{font-size:clamp(2.4rem,1rem + calc(3.6*var(--vw)),5rem);line-height:.95;font-weight:500;text-transform:uppercase;color:var(--blanco);text-shadow:0 2px 24px rgba(0,0,0,.45)}
.escena__titulo .acento{text-shadow:none}
.escena__texto{max-width:46em;margin:0 auto;text-align:center;text-shadow:0 1px 12px rgba(0,0,0,.6)}
.escena .rasgos--separados{margin-block:clamp(1.5rem,1rem + 2vw,3rem)}
.escena .botones{justify-content:center}
.escena__lado{position:absolute;top:clamp(2rem,1rem + 4vw,4.5rem);max-width:19rem}
.escena__cabeza>.rotulo{max-width:34em}
@media (min-width:1024px){#titular-socios~.rotulo,#como-funciona~.rotulo{max-width:none;white-space:nowrap}}   /* diapositivas 8 y 9: el subtítulo en UNA línea (SEG-p7-colab-diap8-1440-2; antes «BARCELONA» quedaba huérfana) */
.escena--desarrollos .escena__titulo{font-size:clamp(2rem,1rem + calc(2.6*var(--vw)),4rem)}
.escena--desarrollos .escena__lado{top:clamp(2rem,1rem + 3vw,3.5rem)}
/* SEG diap. 12 (87415b7d, de 428d515d3), solo Emiratos: «Vive.» en oro, «Invierte. Forma parte.» en blanco y mayor, con filete corto debajo. */
.escena--desarrollos .lema-lateral{color:var(--blanco,#fff);font-size:var(--t-m,1.125rem);letter-spacing:.1em}
.escena--desarrollos .lema-lateral::first-line{color:var(--oro);font-size:var(--t-s)}
.escena--desarrollos .lema-lateral::after{content:"";display:block;width:2.5rem;border-top:1px solid var(--oro);margin-top:1.25rem}
.escena--desarrollos .lema-lateral{white-space:nowrap;font-family:var(--fuente-titulares);letter-spacing:.06em}   /* d12: «FORMA PARTE.» en una sola línea como la diapositiva (V9 l.1336) */
.escena--desarrollos>.escena__lado.escena__lado--der{max-width:none}   /* más específico que el tope de 11 rem de ≥1100 */
.escena__lado--izq{left:var(--margen)}
.escena__lado--der{right:var(--margen);text-align:left}
@media (max-width:1099.98px){.escena__lado{position:static;max-width:none;margin:0 auto var(--e-5);text-align:center}.escena__lado .cita-lateral::before{margin-inline:auto}}
/* D-PRIN-132 (puente 1090795, 21-oct, variante A): el titular del héroe (h1) pisaba los dos laterales entre 1100 y 1600, y en ruso hasta
   1920. De 1100 a 1599 los laterales de ese héroe van arriba y centrados, como por debajo de 1100, y el titular queda libre a lo ancho; desde
   1600, el titular no pasa del hueco entre ellos (19rem cada uno, su margen y 2rem de aire) y, si no cabe, se parte en líneas parejas. Lo que
   ya cabía (es/en/fr/ca a 1920 y 2560) no cambia; por debajo de 1100, tampoco. La sección de desarrollos (h2) no se toca. */
@media (min-width:1100px) and (max-width:1599.98px){.escena:has(h1.escena__titulo)>.escena__lado{position:static;max-width:none;margin:0 auto var(--e-5);text-align:center}.escena:has(h1.escena__titulo)>.escena__lado .cita-lateral::before{margin-inline:auto}}
@media (min-width:1600px){.escena__lado~.contenedor h1.escena__titulo{max-width:calc(100vw - 2 * (var(--margen) + 19rem + 2rem));margin-inline:auto;text-wrap:balance}}
/* D-PRIN-144: el lema de los desarrollos de Emiratos («Vive / Invierte / Pertenece.», palabra por línea) va a la derecha, separado
   del titular como en la diapositiva 12: el lema solo ocupa su palabra más larga y el titular deja libre ese lado y el contrario. */
@media (min-width:1100px){.escena--desarrollos>.escena__lado{max-width:11rem}.escena--desarrollos>.escena__lado~.contenedor .escena__titulo{max-width:calc(100vw - 2 * (var(--margen) + 11rem + 2rem));margin-inline:auto;text-wrap:balance}}
/* d12, página entera (V10, dueña; diapositiva 12 = 1440×810 con la cabecera): desde 1100 la sección cabe en UNA pantalla, como la maqueta
   16:9. Titular y subtítulo en una línea (el titular en es mide ≈25,7 em y el lema empieza ≈117 px antes del borde: con 3,85vw - 12px
   le quedan ≥24 px de aire de 1100 a 1920), huecos y fotos que bajan con el
   alto de la ventana (vh, patrón de la diap. 11) y «Descargar folleto» a lo ancho de la tarjeta. Por debajo de 1100, nada cambia. */
@media (min-width:1100px){
.escena--desarrollos{padding-block:clamp(1rem,4vh,3rem)}
.escena--desarrollos>.escena__lado{top:clamp(1rem,4vh,3rem)}
.escena--desarrollos>.escena__lado~.contenedor .escena__titulo{max-width:none;white-space:nowrap;font-size:clamp(1.6rem,min(calc(3.85*var(--vw)) - 12px,6vh),4.4rem)}
/* d12 #desarrollos a 2356 (recuento 19:36; puente): el titular iba con min(3,85vw − 12px, 6vh): el «−12px» no escala y, a 2356×1325, 6vh dejaba 78,7 px (×1,81 del de 1440) y se montaba 5 px sobre el lema «VIVE. INVIERTE. FORMA PARTE.». Desde 1441 sigue la recta de la diapositiva en vw (2,856 vw + 2,3 px: 43,5 px a 1441, 69,6 px a 2356, el titular mide ≈1632 px como en la diap.), con el tope de altura de antes; en rem no valía: la base rem de la escala común depende también del alto (23,56 px a 2356×1325, 21,62 a 1216). ≤1440 no cambia. */
@media (min-width:1441px){.escena--desarrollos>.escena__lado~.contenedor .escena__titulo{font-size:clamp(1.6rem,min(calc(2.856*var(--vw)) + 2.3px,6vh),4.4rem)}}
.escena--desarrollos .escena__cabeza{gap:clamp(.2rem,1vh,.9rem)}
.escena--desarrollos .escena__cabeza>.rotulo{max-width:none;white-space:nowrap;font-size:clamp(.72rem,min(1.05vw,1.9vh),1.3rem)}
.escena--desarrollos .escena__texto{font-size:clamp(.9rem,min(1.15vw,2.1vh),1.35rem);line-height:1.35}
.escena--desarrollos .desarrollos{margin-top:clamp(.75rem,2.6vh,2.2rem)}
.escena--desarrollos .desarrollo{gap:clamp(.15rem,.7vh,.6rem);padding-bottom:clamp(.6rem,2vh,1.5rem)}
.escena--desarrollos .desarrollo__marco{margin-bottom:clamp(.3rem,1vh,var(--e-3))}
.escena--desarrollos .desarrollo img{aspect-ratio:1.9/1;height:auto;max-height:clamp(8rem,27vh,18rem)}
.escena--desarrollos .desarrollo .texto-serif{font-size:clamp(.85rem,min(1vw,1.9vh),1.15rem);line-height:1.3}
.escena--desarrollos .desarrollo .botones{align-self:stretch}
.escena--desarrollos .desarrollo .boton{flex:1;justify-content:center;min-height:clamp(2.3rem,5.2vh,2.9rem)}
}
/* d12, 2.ª mirada (Codex 9533 sobre 834ced731): como la diapositiva 12, la primera línea bajo el nombre va en oro (Eira no tiene promotor:
   su «DUBÁI» es la que lo lleva), el rótulo de Everly Place va oscuro y sin velo sobre su cielo claro, el de River Cove algo menor, y el
   fondo de la terraza y la ciudad se ve luminoso y llega a las tarjetas (≥1100). */
.escena--desarrollos .desarrollo__nombre+.desarrollo__lugar{color:var(--oro)}
.escena--desarrollos .desarrollo__rotulo--everly{color:#1a1a1a;text-shadow:none}
.escena--desarrollos .desarrollo__marco:has(.desarrollo__rotulo--everly)::after{display:none}
.escena--desarrollos .desarrollo__rotulo--eira{color:#1a1a1a;text-shadow:none}   /* la diapositiva 12 lleva el rótulo de Eira en negro sobre el cielo claro (Codex 9564; antes lo leí mal como blanco) */
.escena--desarrollos .desarrollo__marco:has(.desarrollo__rotulo--eira)::after{display:none}
.escena--desarrollos .desarrollo__rotulo--river{color:#1c2b4a;text-shadow:none}
.escena--desarrollos .desarrollo__marco{container-type:inline-size}
.escena--desarrollos .desarrollo__rotulo--river .desarrollo__marca{text-transform:uppercase;letter-spacing:.06em;font-size:3.4cqw}   /* la diapositiva lo escribe en MAYÚSCULAS plenas y ocupa ≈47 % del ancho de la foto (245 de 520 px en el recorte ampliado ×2; medido en el pod: 4,55cqw daba 63 %, se montaba sobre la torre): el tamaño sigue al ancho de la foto (cqw) en todos los anchos */
.escena--desarrollos .desarrollo__rotulo--river .desarrollo__lema{font-size:max(2.5cqw,10px)}   /* «JUNTO AL AGUA» ≈25 % del ancho de la foto en la diapositiva (128 de 520 en el recorte ×2); con 4cqw salía al 38 % */
.escena--desarrollos .desarrollo__marco:has(.desarrollo__rotulo--river)::after{display:none}
/* d12 en vivo pt206 (Codex 9558, DECIDIDO 3499; V10): fondo claro a TODOS los anchos (antes solo ≥1100: a 1024/768/390 quedaba negro); fotos en caja de
   ~1,9:1 como la diapositiva (mismas fotos del Drive, con encuadre propio por foto); «Descargar folleto» a lo ancho de la tarjeta en todos los anchos,
   con la letra serif de la diapositiva y sin icono. */
.escena--desarrollos .escena__fondo{height:100%}
.escena--desarrollos .escena__fondo::after{background:linear-gradient(0deg,rgba(5,5,5,.6) 0%,rgba(5,5,5,.3) 35%,rgba(5,5,5,.12) 65%,rgba(5,5,5,.35) 100%)}
/* d12 a 1024/768/390 (puente 22-oct): el fondo, al 100 % del alto de la sección (muy alta), solo enseñaba la parte baja y oscura de la foto; bajo 1100 va con alto limitado (2,2:1 desde arriba, con el cielo y la terraza de la diapositiva) y se funde en negro; ≥1100 no se toca */
@media (max-width:1099.98px){.escena--desarrollos .escena__fondo{height:auto;aspect-ratio:2.2/1}.escena--desarrollos .escena__fondo::after{background:linear-gradient(0deg,var(--fondo) 0%,rgba(5,5,5,.1) 35%,rgba(5,5,5,0) 70%,rgba(5,5,5,.12) 100%)}}
@media (max-width:599.98px){.escena--desarrollos .escena__fondo{aspect-ratio:1.1/1}.escena--desarrollos .escena__fondo img{object-position:62% 50%}}
.escena--desarrollos .desarrollo img{aspect-ratio:1.9/1}
.escena--desarrollos .desarrollo__marco:has(.desarrollo__rotulo--eira) img{object-position:50% 30%}
.escena--desarrollos .desarrollo__marco:has(.desarrollo__rotulo--everly) img{object-position:50% 40%}
.escena--desarrollos .desarrollo__marco:has(.desarrollo__rotulo--river) img{object-position:50% 45%}
/* d12 (W13, DECIDIDO 4577; medida V12 1500): las fotos de las 3 tarjetas salían más saturadas y oscuras que la diapositiva (luminancia 112-116 frente a 129-141). Filtro solo en #desarrollos, los ficheros no se tocan (sha1 protegido, 2098). */
.escena--desarrollos .desarrollo img{filter:brightness(1.17) saturate(.88)}
.escena--desarrollos .desarrollo__rotulo--river{color:#15233f}   /* con las fotos más claras «River Cove Residences» (#1c2b4a) daba 4,43/4,20:1 (p95/p99, pod); con #15233f sube sobre 4,5 sin salirse del azul marino de la diapositiva */
/* d12, franja izquierda del fondo (W13, DECIDIDO 4577; medida pod: luminancia de la sección 31 frente a 59 de la diapositiva a 1440; velo + pilar oscuro de la foto, que es asset protegido): luz cálida solo en el 4 % izquierdo sobre el mismo velo, ≥1100 */
@media (min-width:1100px){.escena--desarrollos .escena__fondo::after{background:linear-gradient(90deg,rgba(255,176,96,.5) 0,rgba(255,176,96,.3) 2%,rgba(255,176,96,0) 4%),linear-gradient(0deg,rgba(5,5,5,.6) 0%,rgba(5,5,5,.3) 35%,rgba(5,5,5,.12) 65%,rgba(5,5,5,.35) 100%)}}
.escena--desarrollos .desarrollo .botones{align-self:stretch}
.escena--desarrollos .desarrollo .boton{flex:1;justify-content:center;font-family:var(--fuente-titulares);font-weight:400}
.escena--desarrollos .desarrollo .boton svg{display:none}
/* d12 (Codex vs-lamina-d12-d2, DECIDIDO 4206): «Descargar folleto» en sans negrita como la diapositiva 12 y descripción a lo ancho de la tarjeta (3 líneas, no 4-5) */
.escena--desarrollos .desarrollo .boton{font-family:var(--fuente-texto);font-weight:600}
/* d12 en vivo (W13, medida 22-oct, DECIDIDO 4504; diapositiva 12). (a) bajo 1100 el lema va centrado arriba y su raya (::after de 2,5 rem, bloque) quedaba sola en el borde izquierdo (x 0-40 a 1024/768/390): se centra con el lema. */
@media (max-width:1099.98px){.escena--desarrollos .lema-lateral::after{margin-inline:auto}}
/* (e) «Descargar folleto» al ~94 % de la tarjeta de la diapositiva: a 1100 medía 88 % y a 390 89 % (relleno de 1 rem a cada lado); a 1024-768 ya era 93 % y no se toca. */
@media (max-width:599.98px){.escena--desarrollos .desarrollo .botones{padding-inline:.6rem}}
@media (min-width:1100px) and (max-width:1279.98px){.escena--desarrollos .desarrollo .botones{padding-inline:.45rem}}   /* a 1100 con .6 rem medía 0,920 (objetivo 0,93-0,94; pod 22-oct) */
/* (d) rótulos de las fotos ≈20 % menores (ELLINGTON PROPERTIES 157→≈122 px, «Disfruta…» 104→≈82 a 1440): la diapositiva los lleva más pequeños y a 1100 y 390 se montaban sobre el edificio. */
.escena--desarrollos .desarrollo__sobre{font-size:max(.64em,10px);letter-spacing:.1em}   /* «ELLINGTON PROPERTIES» estaba en el suelo de 10 px (166 px, diap. ≈120): el espaciado de .2em a .1em lo acerca sin bajar de 10 px */
.escena--desarrollos .desarrollo__lema{font-size:max(.8em,10px)}
.escena--desarrollos .desarrollo__rotulo--everly .desarrollo__lema{font-size:max(.96em,10px)}
@media (min-width:1100px){.escena--desarrollos .desarrollo .texto-serif{max-width:none;padding-inline:var(--e-2)}}
/* nombres y ciudades de las tarjetas: a 1440 medían ≈1,28× la diapositiva (nombre 30 px frente a ≈23; lámina 8a33b53d9, aviso del puente 22-oct) */
.escena--desarrollos .desarrollo__nombre{font-size:clamp(1.1rem,.8rem + .7vw,1.65rem)}
.escena--desarrollos .desarrollo__promotor{font-size:clamp(.75rem,.62rem + .3vw,1.05rem);letter-spacing:.16em}
.escena--desarrollos .desarrollo__lugar{letter-spacing:.2em;font-size:.85rem}   /* DUBÁI / MBR CITY · DUBÁI / ABU DABI a ≈13,6 px como la diapositiva 12 (servido 12 px: 51 px de «DUBÁI» frente a 72, MBR City 146 frente a 163; Codex vs-lamina-d12-d2) */
/* Diap. 11 (Invertir en Emiratos), 2.ª revisión a 1440 (p21x3 2dc5545f): el héroe cabe entero en una pantalla con la cabecera (la maqueta es 16:9: laterales
   a los lados del titular, rasgos, texto y botón, y la franja BARCELONA | DUBÁI | INTERNACIONAL en su base). A 1440×900 medía 1023 px sin la
   franja. Desde 1100 el héroe se compone con la altura de la ventana (vh) además de la anchura: letra, huecos, círculo e iconos bajan
   juntos, y de 1100 a 1599 los laterales vuelven a los lados (más estrechos) con el titular en el hueco que dejan, como en la maqueta. */
@media (min-width:1100px){
.escena--uae{padding-block:clamp(1rem,3.4vh,3rem) 0}
.escena--uae .escena__lado{top:clamp(1rem,3.4vh,3rem)}
.escena--uae .escena__cabeza{gap:clamp(.25rem,1.1vh,1rem)}
.escena--uae h1.escena__titulo{font-size:clamp(2rem,min(calc(3.4*var(--vw)),6vh),5rem)}
.escena--uae .escena__cabeza>.rotulo{font-size:clamp(.72rem,min(1.1vw,2vh),1.3rem)}
.escena--uae .boton-video--circulo{gap:var(--e-2)}
.escena--uae .boton-video--circulo .boton-video__circulo{width:clamp(3.2rem,min(4vw,8vh),7.6rem)}
@media (min-width:1100px){.escena--uae .escena__cabeza>.boton-video--circulo{margin-top:min(4.6vw,8vh)}}   /* d11: en la diapositiva el vídeo va ~76 px bajo el subtítulo (a 1440) y empuja rasgos, cierre y franja hasta llenar el 16:9; pegado, la franja quedaba ~60 px alta */
@media (min-width:900px){.escena--uae .boton-video--circulo .boton-video__principal{max-width:none;white-space:nowrap}}   /* «Ver vídeo de Emiratos» en UNA línea, como su diapositiva 11 (W1, lámina pt166; V7) */
.escena--uae .rasgos--separados{margin-block:clamp(.5rem,2.2vh,2rem)}
.escena--uae .rasgos--separados .rasgo{gap:clamp(.2rem,.8vh,.6rem);padding-block:0}
.escena--uae .rasgos--separados .rasgo svg{width:clamp(2rem,min(2.6vw,5vh),3.6rem);height:clamp(2rem,min(2.6vw,5vh),3.6rem)}
.escena--uae .escena__cierre{padding-bottom:clamp(.75rem,2.6vh,2.5rem)}
@media (min-width:1100px){.escena--uae .escena__cierre .texto-serif{flex:0 1 40rem;max-width:40rem;margin-left:auto;margin-right:clamp(1rem,4vw,5rem);font-size:clamp(.95rem,1.21vw,1.4rem)}.escena--uae .escena__cierre .boton{min-height:0;padding:.95em 1.7em;font-size:clamp(.72rem,.85vw,1.05rem);letter-spacing:.04em}}   /* d11 a 1440: el texto del cierre en 2 renglones (~17 px) y el botón de ~360 × 58 px de la diapositiva, no 3 renglones de 21 px y un botón de 540 px (SEG-cx-p20-1-diap11-1440-2) */
.escena--uae .rasgos--separados .rasgo,.escena--uae .escena__cierre .texto-serif{text-shadow:0 1px 10px rgba(0,0,0,.9),0 0 2px rgba(0,0,0,.8)}   /* los rasgos y el texto caen sobre las luces de la ciudad: se leen como en la maqueta */
}
.escena--uae .boton-video__circulo svg path,.heroe--exclusivas .boton-video__circulo svg path{fill:none;stroke:var(--oro);stroke-width:1.5;stroke-linejoin:round}   /* d11 y d13: el triángulo del play de contorno dorado, no blanco relleno, como sus diapositivas (SEG-cx-p21-2-diap13-1024-5, SEG-cx-p22-1-diap11-1024-3, SEG-cx-p35-1-diap11-1024-2) */
.escena--uae .boton-video--circulo .boton-video__principal,.escena--uae .escena__cierre .boton,.heroe--exclusivas .heroe__accion .boton{font-family:var(--fuente-titulares);font-weight:400}   /* d11 y d13: «Ver vídeo de Emiratos» y los CTA en la serif fina de sus diapositivas, no en palo seco grueso (SEG-cx-p20-1-diap11-1440-1, SEG-cx-p33-1-diap11-768-2, SEG-cx-p21-2-diap13-1024-9/10) */
.escena--uae .boton-video--circulo .boton-video__principal{letter-spacing:.06em;text-shadow:0 0 2px rgba(0,0,0,.9),0 1px 6px rgba(0,0,0,.55)}   /* d11: la serif fina sobre las luces de Dubái, nítida y con el espaciado corto de la diapositiva */
@media (min-width:1024px) and (max-width:1599.98px){
.escena.escena--uae:has(h1.escena__titulo)>.escena__lado{position:absolute;max-width:17rem;margin:0;text-align:left}
.escena.escena--uae:has(h1.escena__titulo)>.escena__lado .cita-lateral::before{margin-inline:0}
.escena--uae .escena__lado~.contenedor h1.escena__titulo{max-width:calc(100vw - 2 * (var(--margen) + 17rem + 1rem));margin-inline:auto;text-wrap:balance}
}
/* d11 a 1024-1099: laterales de 12 rem y titular más ancho (con 17 rem el titular de es salía en 4 renglones y la sección pasaba de la pantalla) */
@media (min-width:1024px) and (max-width:1279.98px){.escena.escena--uae:has(h1.escena__titulo)>.escena__lado{max-width:13rem}.escena--uae .escena__lado .rotulo:not(.rotulo--texto){white-space:nowrap;letter-spacing:.16em}.escena--uae .escena__lado~.contenedor h1.escena__titulo{max-width:calc(100vw - 2 * (var(--margen) + 13rem + 1rem))}}
/* d11 a 1024-1279 (puente 765891): laterales de 13 rem (a 1100-1140 con 17 rem el titular salía en 3 renglones: 437 px para «EN EMIRATOS ÁRABES?», que pide ≈460) y, de 1024 a 1099, el titular a la misma escala que de 1100 a 1279 (3,4vw, antes 3vw: −11,5 % frente a la maqueta a 1099) */
@media (min-width:1024px) and (max-width:1099.98px){.escena--uae .escena__lado~.contenedor h1.escena__titulo{font-size:clamp(2rem,min(calc(3.4*var(--vw)),6vh),5rem)}}
/* d11 (Codex d11-servido-pt345, DECIDIDO 4206): «DOS CIUDADES ICÓNICAS / UNA OPORTUNIDAD EXTRAORDINARIA» en serif fina como la diapositiva 11 (la regla base .rotulo--texto es sans 500); mismo tamaño y renglones, sin tocar el ancho del lateral */
@media (min-width:1024px){.escena--uae .escena__lado .rotulo--texto{font-family:var(--fuente-titulares);font-weight:400}}
/* d11 desde 1100 (W1, puente 5481; W11 R2 pt723): renglones de la diap. 11. Bloque izquierdo en los 2 renglones del <br> (sin partir; tracking .04em para no acercarse al titular); cita en 4 renglones («Lugares / extraordinarios. / Oportunidades / duraderas.»): su texto se estrecha a 8,5 em SIN mover su borde izquierdo (padding derecho); más alta, cae sobre el cielo claro (contraste del 95 % de píxeles 4,6:1 → 2,7:1), por eso un velo oscuro suave detrás (5,3:1 a 1440). Desde 1600 el titular llega al 52 % del ancho: el EN a 2356 sale en 2 renglones como a 1440 (antes 3). */
@media (min-width:1100px){.escena--uae .escena__lado--izq .rotulo--texto{white-space:nowrap;letter-spacing:.04em}.escena--uae .escena__lado--der .cita-lateral{padding-right:max(0px,calc(100% - 8.5em))}.escena--uae .escena__lado--der{isolation:isolate}.escena--uae .escena__lado--der::before{content:"";position:absolute;z-index:-1;inset:-1.6rem -1.8rem -1.6rem -1.8rem;background:radial-gradient(ellipse closest-side,rgba(0,0,0,.35) 0,rgba(0,0,0,.35) 62%,rgba(0,0,0,0) 100%);pointer-events:none}}
@media (min-width:1600px){.escena--uae .escena__lado~.contenedor h1.escena__titulo{max-width:min(52vw,100%)}}
/* d11 a 900-1099, pieza 2 (SEG-cx-p34-15-diap11-1024): cada bloque con el cociente alto/ancho que tiene a 1440 (±10 %): rasgos de ≤3 renglones de texto, cierre con texto y botón lado a lado (como desde 1100) y franja de 3,8 rem; medida en 02-copias/cruce/_salida-V15-d11-1024-medida-proporciones.tsv */
@media (min-width:900px) and (max-width:1099.98px){
.escena--uae .rasgos--separados .rasgo{padding-inline:.45rem;gap:.2rem}
.escena--uae .rasgos--separados .rasgo svg{width:1.75rem;height:1.75rem}
.escena--uae .rasgos--separados .rasgo__titulo{font-size:.7rem;line-height:1.2;letter-spacing:.04em}
.escena--uae .rasgos--separados .rasgo__texto{font-size:max(12px,1.15vw);line-height:1.25}
.escena--uae .escena__cierre{flex-wrap:nowrap;gap:0 1.5rem;padding-bottom:.65rem}
.escena--uae .escena__cierre .texto-serif{flex:1 1 0;min-width:0;max-width:40rem;margin-left:auto;margin-right:0;font-size:max(.8rem,1.21vw)}
.escena--uae .escena__cierre .boton{flex:none;min-height:0;padding:.95em 1.7em;font-size:.72rem;letter-spacing:.04em}
.escena--uae .franja__fila{min-height:3.8rem}
}
/* el nowrap de «Ver vídeo de Emiratos» (l.445) quedó dentro del @media 1100 de l.436: a 900-1099 se partía en 2 renglones */
@media (min-width:900px) and (max-width:1099.98px){.escena--uae .boton-video--circulo .boton-video__principal{max-width:none;white-space:nowrap}}


/* Pasos en tarjeta con su número en un círculo encima (04.1B) */
.pasos-tarjetas{list-style:none;margin:clamp(1.5rem,1rem + 2vw,2.6rem) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(1.2rem,1rem + 2vw,3rem)}
/* En una columna, el número de la primera tarjeta (que sobresale por arriba) tocaba el párrafo de encima. */
@media (max-width:899.98px){.pasos-tarjetas{margin-top:var(--e-7)}}
.paso-tarjeta{position:relative;display:flex;flex-direction:column;align-items:center;gap:var(--e-3);padding:.6rem .6rem var(--e-6);border:1px solid var(--linea-oro);background:rgba(5,5,5,.88);text-align:center}
.paso-tarjeta+.paso-tarjeta::before{content:"";position:absolute;left:calc(-.5 * clamp(1.2rem,1rem + 2vw,3rem) - .45rem);top:7.5rem;width:.9rem;height:.9rem;border:solid var(--oro);border-width:2px 2px 0 0;rotate:45deg}
.paso-tarjeta img{width:100%;aspect-ratio:330/158;object-fit:cover}
/* Diapositiva 9 (Cómo funciona del Círculo de Socios): la foto de fondo se ve detrás del título (antes, una franja estirada y casi negra);
   el rótulo cabe en una línea desde 900 px; en el móvil las fotos de los pasos van verticales, como los originales del Drive. */
.escena--socios-como .escena__fondo::after{background:radial-gradient(ellipse 56% 36% at 50% 36%,rgba(5,5,5,.7) 0%,rgba(5,5,5,.6) 55%,rgba(5,5,5,0) 100%),linear-gradient(0deg,var(--fondo) 0%,rgba(5,5,5,.34) 30%,rgba(5,5,5,.18) 60%,rgba(5,5,5,.1) 100%)}   /* d9 (orden de Víctor 4847/4863, V16): el fondo con la luz de la diapositiva 9 (luminancia media a 1440: salón 56 / ventanal 119 frente a 60 / 114 de la diap.; antes 34 / 71 con el velo plano .5) y un velo local solo tras la introducción. Contraste MEDIDO con el texto oculto (p95): titular 8,1, rótulo 10,4, párrafo 8,7 a 1440; ≥6,5 a 1100 */
.escena__cabeza>.rotulo--una-linea{max-width:none}
.escena--socios-como{padding-bottom:0}
.escena--socios-como>.franja{margin-top:var(--e-7)}
/* Tarjetas: el texto llena la tarjeta (antes 100-150 px vacíos abajo en las 1-3, todas a la altura de la 4). */
/* Como la maqueta (2.ª revisión de W12): la sección con su franja cabe en una pantalla a 1440. Tarjetas ajustadas a su texto (el texto
   va pegado al subtítulo, letra menor, menos aire), menos hueco arriba y entre tarjetas, y 4 en fila desde 900 px con sus flechas. */
.escena--socios-como{--hueco-pasos:clamp(1rem,.6rem + 1.2vw,1.8rem);padding-top:clamp(1.5rem,.8rem + 2.4vw,2.8rem)}
.escena--socios-como .pasos-tarjetas{gap:var(--hueco-pasos);margin-top:clamp(1.4rem,1rem + 1.2vw,2.2rem)}
.escena--socios-como .paso-tarjeta{gap:var(--e-2);padding:.5rem .5rem var(--e-4)}
.escena--socios-como .paso-tarjeta+.paso-tarjeta::before{left:calc(-.5 * var(--hueco-pasos) - .45rem);top:6rem}
.escena--socios-como .paso-tarjeta__titulo{margin-top:var(--e-1);font-size:clamp(1.1rem,.8rem + calc(.6*var(--vw)),1.45rem)}
.escena--socios-como .paso-tarjeta__sub::after{margin-top:var(--e-2)}
.escena--socios-como .paso-tarjeta .texto-serif{font-size:clamp(.88rem,.75rem + .3vw,1.02rem);line-height:1.3;padding-inline:var(--e-2)}
@media (min-width:600px){.escena--socios-como .paso-tarjeta:nth-child(1) img{object-position:50% 47%}.escena--socios-como .paso-tarjeta:nth-child(3) img{object-position:50% 42%}.escena--socios-como .paso-tarjeta:nth-child(4) img{object-position:50% 62%}}   /* SEG-R3-d9: el encuadre de la diapositiva (fachada con cielo, plano con pluma y muestras, salón con sofá, mesa y sillón) en vez del centro de la foto vertical */
@media (min-width:900px) and (max-width:1099.98px){.escena--socios-como .pasos-tarjetas{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:0}.escena--socios-como .paso-tarjeta+.paso-tarjeta::before{display:block}}
@media (min-width:900px) and (max-width:1099.98px){.escena--socios-como .escena__titulo{font-size:calc(4.71*var(--vw))}.escena--socios-como .escena__texto{font-size:1.405vw}.escena--socios-como .paso-tarjeta{gap:var(--e-1);padding-bottom:var(--e-2)}.escena--socios-como .paso-tarjeta__titulo{font-size:calc(1.49*var(--vw))}.escena--socios-como .paso-tarjeta .texto-serif{font-size:1.13vw;line-height:1.25;padding-inline:var(--e-1)}.escena--socios-como .paso-tarjeta__sub{font-size:.9vw;letter-spacing:.14em}.escena--socios-como .paso-tarjeta .texto-serif{font-size:.97vw;padding-inline:.2rem;line-height:1.2}.escena--socios-como .paso-tarjeta__sub::after{margin-top:.35rem}.escena--socios-como .paso-tarjeta:nth-child(1) img{object-position:50% 8%}}   /* diap. 9 a 1024 = la de 1440 escalada (0,711): título, entrada y tarjetas en vw desde lo servido a 1440 (67,8/20,2/21,4/16,3 px) y la foto 01 con su cielo (SEG-cx-p27-3-diap9-1024-1, SEG-cx-p35-3-diap9-1024-2/-5; puente 2380150) */
/* 1440 como la diapositiva (OK ajeno V9 con reparos): el texto de las tarjetas a ancho casi entero, así el de la 04 cae en 5 líneas (eran 6), y huecos internos menores para que las tarjetas no queden altas con aire bajo el texto (≈28 px menos). La introducción se queda como estaba: a 48rem salía en 5 líneas y la diapositiva tiene 4. */
@media (min-width:1100px){.escena--socios-como .paso-tarjeta{gap:var(--e-1);padding-bottom:var(--e-2)}.escena--socios-como .paso-tarjeta__sub::after{margin-top:var(--e-1)}.escena--socios-como .paso-tarjeta .texto-serif{padding-inline:var(--e-1);line-height:1.25}}
@media (max-width:599.98px){.escena--socios-como .escena__fondo{height:36rem}.escena--socios-como .paso-tarjeta img{aspect-ratio:538/724}}
.paso-tarjeta__numero{position:absolute;top:-1.6rem;left:50%;translate:-50% 0;display:grid;place-items:center;width:3.4rem;height:3.4rem;border:2px solid var(--oro);border-radius:50%;background:var(--negro);font:500 1.35rem/1 var(--fuente-titulares);color:var(--oro)}
.paso-tarjeta__titulo{margin-top:var(--e-2);font-size:clamp(1.2rem,.9rem + calc(.8*var(--vw)),1.75rem);text-transform:uppercase;color:var(--oro)}
.paso-tarjeta__sub{margin:0;font:500 var(--t-xs)/1.5 var(--fuente-texto);letter-spacing:.18em;text-transform:uppercase}
.paso-tarjeta__sub::after{content:"";display:block;width:5rem;height:1px;margin:var(--e-3) auto 0;background:var(--oro)}
.paso-tarjeta p:last-child{padding-inline:var(--e-3)}
@media (max-width:1099.98px){.pasos-tarjetas{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:var(--e-8)}.paso-tarjeta+.paso-tarjeta::before{display:none}}
@media (max-width:599.98px){.pasos-tarjetas{grid-template-columns:1fr}}

/* Desarrollos de Emiratos (04.2B) */
.desarrollos{list-style:none;margin:clamp(1.5rem,1rem + 2vw,2.6rem) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,1.6vw,1.8rem)}
.desarrollo{display:flex;flex-direction:column;align-items:center;gap:var(--e-2);padding:.15rem .15rem var(--e-5);border:1px solid var(--oro);background:rgba(5,5,5,.92);text-align:center}
.desarrollo img{width:100%;aspect-ratio:494/257;object-fit:cover;margin-bottom:var(--e-3)}
/* D-PRIN-165: los rótulos de la diapositiva 12 encima de la foto de cada tarjeta, arriba a la izquierda; no tapan el clic a la ficha. */
.desarrollo__marco{position:relative;width:100%;margin-bottom:var(--e-3)}.desarrollo__marco img{margin-bottom:0}
/* velo arriba a la izquierda: sobre el cielo claro de las fotos el blanco no se leía (captura 2626d2fbc a 1440 y 390) */
.desarrollo__marco::after{content:"";position:absolute;inset:0;background:linear-gradient(155deg,rgba(0,0,0,.62) 0%,rgba(0,0,0,.34) 30%,rgba(0,0,0,0) 58%);pointer-events:none}
.desarrollo__rotulo{position:absolute;z-index:1;top:7%;left:6%;max-width:88%;margin:0;display:flex;flex-direction:column;align-items:flex-start;gap:.3em;text-align:left;color:var(--blanco);text-shadow:0 1px 3px rgba(0,0,0,.7),0 0 12px rgba(0,0,0,.5);pointer-events:none;font:400 clamp(.62rem,.5rem + .3vw,.82rem)/1.35 var(--fuente-titulares);letter-spacing:.16em;text-transform:uppercase}
.desarrollo__marca{font-size:clamp(.95rem,.75rem + .55vw,1.4rem);line-height:1.1;letter-spacing:.08em;white-space:nowrap}
.desarrollo__sobre{font-size:max(.8em,10px);letter-spacing:.2em}   /* ≥10 px (W9 rev. final: «Ellington Properties» medía 7,9 px a 390) */
.desarrollo__lema{margin-top:.6em}
.desarrollo__rotulo--everly .desarrollo__lema{font-style:italic;font-size:1.2em;letter-spacing:.02em;text-transform:none}
.desarrollo__nombre{font-size:clamp(1.4rem,1rem + 1vw,2.1rem);text-transform:uppercase;color:var(--blanco)}
.desarrollo__foto{display:block}.desarrollo__nombre a{color:inherit;text-decoration:none}.desarrollo__nombre a:hover,.desarrollo__nombre a:focus-visible{color:var(--oro)}
.desarrollo__promotor{margin:0;font:400 clamp(.9rem,.8rem + .4vw,1.3rem)/1.2 var(--fuente-titulares);letter-spacing:.2em;text-transform:uppercase;color:var(--oro)}
.desarrollo__lugar{margin:0;font:400 var(--t-xs)/1.3 var(--fuente-titulares);letter-spacing:.3em;text-transform:uppercase}
.desarrollo .texto-serif{flex:1;max-width:25em;padding-inline:var(--e-4);font-size:clamp(.95rem,.85rem + .3vw,1.12rem)}
.desarrollo .botones{justify-content:center;padding-inline:var(--e-4)}
.desarrollo .boton{min-height:2.9rem;padding-inline:1.1rem}
@media (max-width:1099.98px){.desarrollos{grid-template-columns:1fr;max-width:36rem;margin-inline:auto}}

/* Pie de la escena de Emiratos: texto a la izquierda y botón a la derecha */
.escena__cierre{display:flex;align-items:center;justify-content:space-between;gap:var(--e-5) var(--e-7);flex-wrap:wrap}
.escena__cierre .texto-serif{flex:1 1 26rem;text-align:center;font-size:clamp(1rem,.86rem + .5vw,1.4rem)}
@media (max-width:899.98px){.escena__cierre{justify-content:center}}

/* ---------- 04.3 · Propiedades en exclusiva ---------- */
.heroe--exclusivas .heroe__fondo{inset:0}   /* diapositiva 13: La Pau_006.jpg a todo el ancho, sin bloque negro a la izquierda */
.heroe--exclusivas .heroe__fondo img{object-position:72% 50%}
/* d13 a 1440 (SEG-cx-p22-3-diap13-1440-1, SEG-cx-p24-4-diap13-1440-2): en la diapositiva la casa ocupa del 44 al 99 % del ancho (aquí del 36 % y cortada por el borde): la foto va a ≈85 % del ancho pegada a la derecha, con la izquierda con un fundido corto de 6 % (se ve la colina tenue bajo el texto como en la diapositiva); a 1920×1080 el hueco 85 % × alto es 3:2, el de la foto */
@media (min-width:1100px){.heroe--exclusivas .heroe__fondo{inset:0 0 0 15%;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%);mask-image:linear-gradient(90deg,transparent 0,#000 6%)}}
@media (min-width:700px) and (max-width:1099.98px){.heroe--exclusivas .heroe__fondo{height:auto}.heroe.heroe--exclusivas .heroe__fondo::after{background:linear-gradient(180deg,rgba(0,0,0,.45) 0%,rgba(0,0,0,.5) 35%,rgba(0,0,0,.72) 55%,rgba(0,0,0,.8) 85%,var(--negro) 100%)}}   /* d13 a 768-1099: la foto de La Pau bajo todo el héroe, también bajo las ventajas y el CTA, no solo 62svh con el resto en negro (SEG-cx-p21-2-diap13-1024-1/2, SEG-cx-p24-1-diap13-768-1, SEG-cx-p34-15-diap13-1024-2) */
.heroe--exclusivas .heroe__fondo::after{background:
  linear-gradient(90deg,rgba(0,0,0,.82) 0%,rgba(0,0,0,.6) 30%,rgba(0,0,0,.2) 52%,rgba(0,0,0,0) 68%),
  linear-gradient(0deg,var(--negro) 0%,rgba(0,0,0,.6) 12%,rgba(0,0,0,0) 30%),
  linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,0) 14%)}   /* el fundido llega hasta donde acaba el texto y las cuatro ventajas: contraste sobre la foto */
.rotulo--grande{font-size:clamp(1rem,.5rem + 1.25vw,2.2rem);letter-spacing:.22em}
@media (min-width:1100px){.heroe--exclusivas .heroe__fondo::after{background:linear-gradient(90deg,rgba(0,0,0,.7) 0%,rgba(0,0,0,.46) 30%,rgba(0,0,0,.16) 52%,rgba(0,0,0,0) 64%),linear-gradient(0deg,var(--negro) 0%,rgba(0,0,0,.6) 12%,rgba(0,0,0,0) 30%),linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,0) 14%)}}   /* d13 a 1100+: el velo de la izquierda más ligero (.82→.7) para que se vea la colina tenue de la diapositiva bajo el texto (medir contraste del texto) */
.heroe--exclusivas .heroe__texto{max-width:min(50rem,56vw)}
@media (min-width:1500px){.heroe--exclusivas .heroe__texto{max-width:56vw}}   /* d13 a 1920: el titular y el texto ocupan el mismo ≈50 % del ancho que en la diapositiva (con el tope de 50 rem salían 5 renglones en vez de 3) */
.heroe--exclusivas .heroe__texto>*:not(.titular){text-shadow:0 1px 12px rgba(0,0,0,.75)}
/* d13, subtítulo «EN UBICACIONES EXTRAORDINARIAS» como la diapositiva 13 a 1440: serif de cuerpo mayor (37,4 px frente a 28,6) y casi sin espaciado (0,03 em frente a 0,22 em), con el mismo ancho que «EXCLUSIVAS DE LUJO» (720 px) */
@media (min-width:1100px){.heroe--exclusivas p.rotulo--grande{font-size:min(2.6vw,2.9rem);letter-spacing:0;font-variation-settings:"opsz" 6}}   /* d13 revfinal W8: con opsz automático los trazos finos de TS Didot a este cuerpo dejan «huecos» (EXTR AORDIN ARIAS); opsz 6 como el titular de d18, solo aquí; el cuerpo es el de la maqueta y el espaciado, nulo (el ancho del renglón se mide contra la diap.) */
.heroe--exclusivas .heroe__texto>*+*{margin-top:clamp(.6rem,.2rem + .8vw,1.2rem)}
.heroe--exclusivas .heroe__texto>.titular+*{margin-top:clamp(.7rem,.3rem + 1vw,1.4rem)}
.heroe--exclusivas .heroe__contenido{padding-top:calc(var(--alto-cabecera) + clamp(.4rem,1.2vw,1.6rem));padding-bottom:clamp(.8rem,1.4vw,1.6rem)}
.heroe--exclusivas .franja__fila{min-height:0;padding-block:clamp(.7rem,1vw,1rem)}   /* la franja pegada al pie de la primera pantalla, como en la diapositiva (86 px → ~50) */
.heroe--exclusivas .rasgos{--rasgos:4;margin-top:clamp(1rem,2vw,2.4rem);max-width:46rem}
@media (min-width:1100px){.heroe--exclusivas .rasgo__texto{font-size:max(11.5px,.9vw);line-height:1.3}.heroe--exclusivas .rasgos--separados .rasgo{padding-inline:.3rem}}   /* d13 a ≥1100: «Potencial de inversión» a 2 renglones de texto como la diapositiva (servido 3-4: columna interior de 152/122 px por 62 px de relleno lateral y texto a 16 px; ahora 174/144 px) */
.heroe__lado{position:absolute;right:var(--margen);top:calc(var(--alto-cabecera) + clamp(1.5rem,3vw,3.5rem));max-width:11em;white-space:pre-line}   /* la cita en sus tres líneas («Propiedades / atemporales. / Valor duradero.»), con la raya de oro debajo */
.heroe__lado.cita-lateral::before{display:none}
@media (min-width:1100px) and (max-width:1919.98px){.heroe--exclusivas .heroe__lado.cita-lateral{isolation:isolate}.heroe--exclusivas .heroe__lado.cita-lateral::before{display:block;content:"";position:absolute;z-index:-1;inset:-1.8rem -2.4rem -1.4rem -2.6rem;margin:0;width:auto;height:auto;background:radial-gradient(closest-side,rgba(0,0,0,.18) 0%,rgba(0,0,0,.155) 40%,rgba(0,0,0,.085) 70%,rgba(0,0,0,0) 100%);pointer-events:none}}   /* d13 a 1100-1919 (DECIDIDO 3752/3804; a 1100 la cita medía 4,06:1 de media sin velo; a 1920 la cita llega a 24 px = texto grande, 3:1): la cita blanca (21,6-23,9 px, texto normal) medía 3,96:1 a 1440 y 3,73:1 a 1600 de media sobre el cielo; un velo radial suave detrás, sin borde, la sube a ≥4,5:1 */
@media (min-width:1600px) and (max-width:1919.98px){.heroe--exclusivas .heroe__lado.cita-lateral::before{background:radial-gradient(closest-side,rgba(0,0,0,.22) 0%,rgba(0,0,0,.19) 40%,rgba(0,0,0,.105) 70%,rgba(0,0,0,0) 100%)}}   /* d13 a 1600-1919: con el pico .18 el peor caso realista (1760 y 1919 a alturas ≥1000) daba 4,33-4,43:1 de media; con .22 ≥4,56 (medido sobre píxeles reales a 5 alturas) */
.heroe__lado.cita-lateral{text-shadow:0 1px 10px rgba(0,0,0,.85)}
.heroe__lado.cita-lateral::after{content:"";display:block;width:3.2rem;height:1px;margin-top:var(--e-4);background:var(--oro)}
.heroe--exclusivas .heroe__accion{position:absolute;right:var(--margen);bottom:100%;margin-bottom:clamp(1rem,2vw,2.2rem)}   /* abajo a la derecha, justo encima de la franja Barcelona | Dubái | Internacional */
@media (max-width:1099.98px){.heroe--exclusivas .heroe__texto{max-width:42rem}.heroe--exclusivas .heroe__accion{position:static;display:flex;justify-content:flex-end;margin:var(--e-5) var(--margen) var(--e-5)}}
@media (max-width:699.98px){.heroe__lado{display:none}.heroe--exclusivas .heroe__accion{justify-content:center}}
/* Diap. 13 (Propiedades exclusivas) a ≥1100: el héroe (con su franja dentro) tiene la proporción 16:9 de la diapositiva (810 px a 1440 de ancho) en vez de ocupar toda la altura de la ventana (900 a 1440×900); en ventanas más bajas que 16:9 sigue ocupando la ventana. Solo esta página (.heroe--exclusivas solo la usa showroom/propiedades.html.twig). */
@media (min-width:1100px){.heroe--exclusivas{min-height:min(100svh,56.25vw)}}
/* Diap. 13 a >1440 (V9 medir-r2-d13-B, 2356×1216): (1) la foto del héroe va a todo el ancho, sin la banda negra de 353 px a la izquierda ni su costura (inset 15 % y máscara solo hasta 1440; la diap. ocupa todo el ancho y el degradado negro de la izquierda ya lo pone ::after); (2) en pantallas apaisadas (≥19:10) el héroe cabía en la altura de la ventana solo con la franja de pie fuera (1290 px en 1216): los espacios verticales se limitan también por la altura para que héroe y franja de «Barcelona | Dubái | Internacional» salgan en la misma pantalla (2356×1216: 1216 px) */
@media (min-width:1441px){.heroe--exclusivas .heroe__fondo{inset:0;-webkit-mask-image:none;mask-image:none}}
@media (min-width:1441px) and (min-aspect-ratio:19/10){
  .heroe--exclusivas .heroe__contenido{padding-top:calc(var(--alto-cabecera) + min(clamp(.4rem,1.2vw,1.6rem),1.2vh));padding-bottom:min(clamp(.8rem,1.4vw,1.6rem),1.2vh)}
  .heroe--exclusivas .heroe__texto>*+*{margin-top:min(clamp(.6rem,.2rem + .8vw,1.2rem),1.4vh)}
  .heroe--exclusivas .heroe__texto>.titular+*{margin-top:min(clamp(.7rem,.3rem + 1vw,1.4rem),1.8vh)}
  .heroe--exclusivas .rasgos{margin-top:min(clamp(1rem,2vw,2.4rem),2.4vh)}
}
/* d13 a 900-1099 (SEG-cx-p34-15-diap13-1024-1/-2, W13 Codex 9571): a 1024 el héroe medía 906 px (118 % de la ventana; la maqueta 56 % del ancho), el titular el 6,9 % del ancho (maqueta 4,5-5 %), el párrafo 1,8 % (1,26) y los rasgos 15 px (11), con la foto ×1,33 y el botón fuera de pantalla: aquí van las mismas escalas que a 1440, el botón en su sitio (abajo a la derecha sobre la franja) y la foto menos ampliada */
@media (min-width:900px) and (max-width:1099.98px){
  .heroe--exclusivas{min-height:min(100svh,56.25vw)}
  .heroe--exclusivas .heroe__fondo img{object-position:60% 50%}
  .heroe.heroe--exclusivas .heroe__fondo::after{background:linear-gradient(90deg,rgba(0,0,0,.74) 0%,rgba(0,0,0,.5) 32%,rgba(0,0,0,.16) 56%,rgba(0,0,0,0) 68%),linear-gradient(0deg,var(--negro) 0%,rgba(0,0,0,.6) 12%,rgba(0,0,0,0) 30%),linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,0) 14%)}   /* el velo de 1100+, algo más cerrado: la foto no baja de negro a 768-1099 (W13: «muy oscura») */
  .heroe--exclusivas .rasgos{max-width:min(36rem,calc(100vw - 23rem - 2 * var(--margen)))}
  .heroe--exclusivas .rasgos--separados .rasgo{padding-inline:.35rem}
  .heroe--exclusivas .rasgo__titulo{letter-spacing:.03em}
  .heroe--exclusivas .titular--1{font-size:clamp(2.42rem,.66rem + calc(3.96*var(--vw)),5.94rem)}
  .heroe--exclusivas .rotulo--grande{font-size:clamp(1.1rem,.55rem + 1.375vw,2.42rem)}
  .heroe--exclusivas .texto-serif{font-size:max(12px,1.26vw);max-width:34rem}
  .heroe--exclusivas .rasgo__titulo{font-size:max(.68rem,calc(1.07*var(--vw)))}
  .heroe--exclusivas .rasgo__texto{font-size:max(.72rem,1.07vw)}
  .heroe--exclusivas .heroe__accion{position:absolute;right:var(--margen);bottom:100%;margin:0 0 clamp(1rem,2vw,2.2rem);display:block}
  .heroe--exclusivas .heroe__accion .boton{font-size:clamp(.7rem,.35rem + .5vw,.95rem);min-height:3.75vw;padding-inline:clamp(.7rem,1vw,1.6rem);gap:clamp(.4rem,.7vw,1rem);letter-spacing:.04em}
}
/* d13 a 900-1099 (V15 pieza d13: SEG-cx-p34-15-diap13-1024-2, SEG-cx-p21-2-diap13-1024-1, SEG-cx-p21-2-diap13-1024-3): la foto de La Pau con el mismo encuadre que desde 1100 (la casa del 43 % al 100 % del ancho como la diapositiva, no del 33 %), la franja con el lema en el centro y el velo suave de la cita, como a 1100-1919. */
@media (min-width:900px) and (max-width:1099.98px){
  .heroe--exclusivas .heroe__fondo{inset:0 0 0 15%;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%);mask-image:linear-gradient(90deg,transparent 0,#000 6%)}
  .heroe--exclusivas .heroe__lado.cita-lateral{isolation:isolate}
  .heroe--exclusivas .heroe__lado.cita-lateral::before{display:block;content:"";position:absolute;z-index:-1;inset:-1.8rem -2.4rem -1.4rem -2.6rem;margin:0;width:auto;height:auto;background:radial-gradient(closest-side,rgba(0,0,0,.18) 0%,rgba(0,0,0,.155) 40%,rgba(0,0,0,.085) 70%,rgba(0,0,0,0) 100%);pointer-events:none}
}
/* d13 a 900-1279: «Personas. Propiedades. Posibilidades.» en el centro de la franja, entre las ciudades y «Invierte. Vive. Forma parte.» (el orden y el 100 % de 600-1199 lo mandaban al final) */
@media (min-width:900px) and (max-width:1279.98px){.heroe--exclusivas .franja--inmo .franja__centro{order:0;flex-basis:auto}}
/* d13 a 900-1099 (SEG-V16-d13-1024-raya-lema-en): la cita «Propiedades atemporales. Valor duradero.» sube 23 px, justo bajo la cabecera como en la diapositiva 13, para que su raya de oro quede sobre el monte y no sobre la línea del tejado de la Masía (a 1024 en EN la tocaba) */
@media (min-width:900px) and (max-width:1099.98px){.heroe--exclusivas .heroe__lado{top:calc(var(--alto-cabecera) + .5rem)}}
/* Diap. 13 (Propiedades exclusivas) a ≥1100: la escala de los textos del héroe de la maqueta, medida contra ella a 1440 (900 px de ancho): el titular y el subtítulo un 10 % mayores (la línea más ancha, del 45,5 % al 50 % del ancho) y el párrafo más pequeño y estrecho (20,2 px y 54 % del ancho → ~16,8 px y ~36 %). */
@media (min-width:1100px){
  .heroe--exclusivas .titular--1{font-size:clamp(2.42rem,.66rem + calc(3.96*var(--vw)),5.94rem)}
  .heroe--exclusivas .rotulo--grande{font-size:clamp(1.1rem,.55rem + 1.375vw,2.42rem)}
  .heroe--exclusivas .texto-serif{font-size:clamp(.95rem,.6rem + .5vw,1.1rem);max-width:34rem}
  .heroe--exclusivas .heroe__accion .boton{font-size:clamp(.7rem,.35rem + .5vw,.95rem)}   /* el botón de la maqueta mide 242 px (27 % del ancho) y 34 de alto; el servido, 350 y 39 */
  .heroe--exclusivas .heroe__accion .boton{min-height:3.75vw;padding-inline:clamp(.7rem,1vw,1.6rem);gap:clamp(.4rem,.7vw,1rem);letter-spacing:.04em}   /* d13 (SEG-cx-p22-3-diap13-1440-4, SEG-cx-p21-2-diap13-1024-9): el botón de la maqueta mide 27 % × 3,75 % del ancho (387×54 a 1440); sonda a 1440: 448×65 con 31 px de relleno y 349 de texto */
}
/* Diapositiva 13 a 390: el texto ocupa todo el ancho y el fundido lateral dejaba «EXCLUSIVAS DE LUJO» en oro sobre la fachada clara; aquí el velo va de arriba abajo y el titular lleva sombra. */
@media (max-width:699.98px){.heroe--exclusivas .heroe__fondo::after{background:linear-gradient(180deg,rgba(0,0,0,.62) 0%,rgba(0,0,0,.58) 50%,rgba(0,0,0,.78) 78%,var(--negro) 100%)}.heroe--exclusivas .heroe__texto>.titular{text-shadow:0 1px 14px rgba(0,0,0,.9)}}
.propiedades{list-style:none;margin:0;padding:0;display:grid;justify-content:center;grid-template-columns:repeat(auto-fit,minmax(min(100%,24rem),32rem));gap:clamp(1rem,1.6vw,1.8rem)}
.propiedad-tarjeta{display:flex;flex-direction:column;border:1px solid var(--linea-oro);background:var(--superficie)}
.propiedad-tarjeta__foto{display:block}   /* la foto lleva a la ficha (fila SEG-USAR-propiedades-en-exclusiva-aa612f6b); el enlace con nombre es el título */
.propiedad-tarjeta img{width:100%;aspect-ratio:3/2;object-fit:cover}
.propiedad-tarjeta__cuerpo{display:flex;flex-direction:column;gap:var(--e-3);padding:var(--e-5)}
.propiedad-tarjeta__titulo{font-size:var(--t-h4);text-transform:uppercase;color:var(--blanco)}
.propiedad-tarjeta__titulo a{text-decoration:none}

/* ---------- 04.3A · Ficha de una propiedad ---------- */
.ficha{display:grid;grid-template-columns:minmax(0,77.5fr) minmax(0,22.5fr)}
.ficha__heroe{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:center;min-height:clamp(26rem,26.6vw + 4rem,32rem);padding:clamp(1.5rem,2.4vw,2.6rem) var(--e-6) clamp(1.5rem,2vw,2.2rem) var(--margen);overflow:hidden}
.ficha__foto{position:absolute;z-index:-1;inset:0 0 0 26%;margin:0}
.ficha__foto img{width:100%;height:100%;object-fit:cover}
.ficha__foto--masia{overflow:hidden}
@media (min-width:900px){.ficha__foto--masia img{transform:scale(1.4);transform-origin:32% 88%}}  /* la masía de la diapositiva 14: cerca, con los cipreses a la derecha */
.ficha__foto::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--negro) 0%,rgba(0,0,0,.7) 12%,rgba(0,0,0,.15) 34%,rgba(0,0,0,0) 50%)}
.ficha__heroe>*{max-width:31rem}
.ficha__heroe>.ficha__titulo,.ficha__heroe>.ficha__lema,.ficha__heroe>.ficha__foto{max-width:none}  /* la foto también: con el ancho máximo del texto (31rem) se quedaba a medias y dejaba un hueco negro hasta el panel del precio */
.ficha__heroe>*+*{margin-top:var(--e-4)}
.ficha__titulo{font-size:clamp(2.4rem,1.2rem + calc(3.2*var(--vw)),4.4rem);line-height:.95;text-transform:uppercase;color:var(--blanco);font-weight:500}
.ficha__lema{margin:0;font:400 clamp(1rem,.8rem + .9vw,1.9rem)/1.2 var(--fuente-titulares);letter-spacing:.24em;text-transform:uppercase;color:var(--oro)}
.ficha__cita{position:absolute;top:clamp(1rem,2vw,1.6rem);right:clamp(.8rem,1.2vw,1rem);max-width:7.5em!important;margin:0!important;font:italic 400 clamp(1.05rem,.8rem + .8vw,1.65rem)/1.2 var(--fuente-titulares);color:var(--blanco);text-shadow:0 1px 10px rgba(0,0,0,.7)}
.ficha__cita::after{content:"";display:block;width:2.6rem;height:2px;margin-top:.5em;background:var(--oro)}
.ficha__panel{display:flex;flex-direction:column;gap:var(--e-4);padding:clamp(1rem,1.4vw,1.4rem) clamp(1rem,2vw,2rem);background:var(--negro);border-left:1px solid var(--linea-suave)}
.ficha__precio{margin:0;padding-block:var(--e-3);border-block:1px solid transparent;border-image:linear-gradient(90deg,var(--oro) 0 3rem,transparent 3rem) 1;font:500 clamp(1.8rem,1.2rem + 1.6vw,3rem)/1 var(--fuente-titulares);font-variation-settings:"opsz" 11;color:var(--oro)}
.datos-propiedad{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--e-5) var(--e-4);margin:0}
.datos-propiedad div{position:relative;min-height:2rem;padding-left:2.7rem}
.datos-propiedad svg{position:absolute;left:0;top:0;width:2rem;height:2rem;color:var(--oro)}
.datos-propiedad dt{font:400 var(--t-xs)/1.3 var(--fuente-titulares);letter-spacing:.06em;text-transform:uppercase}   /* W12 (W13 fila 9): rótulos y cifras como la diapositiva, más grandes y las cifras en blanco */
.datos-propiedad dd{margin:.3em 0 0;font:400 var(--t-s)/1.3 var(--fuente-titulares);color:var(--blanco)}
@media (min-width:1024px) and (max-width:1439.98px){.datos-propiedad{grid-template-columns:minmax(0,1fr)}}   /* D-PRIN-075 (regla de V16, OK 1722., que no llegó a main): el panel mide 247 px a 1101; en dos columnas los rótulos (BEDROOMS, LANDSCAPED) no cabían junto al icono y empujaban 4 px de scroll */
.ficha__panel>.rotulo--texto{padding-top:var(--e-4);border-top:1px solid var(--linea-oro);font-size:var(--t-2xs);letter-spacing:.1em}
.ficha__estancias{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) minmax(0,.86fr);gap:var(--e-3);padding:var(--e-3) var(--e-4);background:var(--crema);color:var(--tinta)}
.ficha__estancias--3{grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,1fr)}  /* Masía La Pau (diapositiva 14): tres fotos y la cita */
/* W12 (fidelidad diap. 14, W13 fila 13): la franja de la diapositiva mide ~175 px a 1440 (fotos ~331×125, 2,65:1), no ~340 */
@media (min-width:768px){   /* puente: solo de 768 en adelante; en móvil, la relación de siempre */
  .ficha__estancias--3{padding-block:var(--e-2)}
  .ficha__estancias--3 img{aspect-ratio:265/100;object-position:center 60%}
  .ficha__estancias--3 figcaption{padding-top:var(--e-2)}
}
.ficha__estancias figure{margin:0;text-align:center}
.ficha__estancias img{width:100%;aspect-ratio:257/143;object-fit:cover}
.ficha__estancias figcaption{padding-top:var(--e-3);font:400 var(--t-s)/1.3 var(--fuente-titulares);text-transform:uppercase}
.ficha__estancias figcaption span{display:block;font-size:var(--t-2xs);letter-spacing:.14em}
.ficha__estancias blockquote{margin:0;align-self:center;padding:var(--e-3) var(--e-4)}
.ficha__estancias blockquote p{font:italic 400 clamp(1.1rem,.8rem + .8vw,1.7rem)/1.2 var(--fuente-titulares)}
.ficha__estancias blockquote footer{margin-top:var(--e-4);padding-top:var(--e-3);border-top:1px solid var(--oro-sobre-claro);width:fit-content;font:400 var(--t-xs)/1.5 var(--fuente-titulares);letter-spacing:.08em;text-transform:uppercase;color:var(--oro-sobre-claro)}
.ficha__atardecer{position:relative;margin:0;min-height:12rem}
.ficha__atardecer img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ficha__atardecer figcaption{position:absolute;right:var(--e-5);bottom:var(--e-5);font:400 clamp(1.1rem,.8rem + .8vw,1.55rem)/1.15 var(--fuente-titulares);text-transform:uppercase;text-align:right;color:var(--blanco);text-shadow:0 1px 12px rgba(0,0,0,.7)}
/* Segunda revisión de la diapositiva 14: los titulares sobre foto clara se leían mal; velo oscuro tras ellos y sombra doble */
.ficha__foto--masia::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,.6) 0%,rgba(0,0,0,.25) 22%,rgba(0,0,0,0) 40%)}
.ficha__cita{text-shadow:0 0 3px rgba(0,0,0,.85),0 1px 14px rgba(0,0,0,.9)}
.ficha__lema{text-shadow:0 0 3px rgba(0,0,0,.85),0 1px 12px rgba(0,0,0,.8)}
.ficha__atardecer::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.35) 30%,rgba(0,0,0,0) 55%)}
.ficha__atardecer figcaption{z-index:1;text-shadow:0 0 3px rgba(0,0,0,.85),0 1px 14px rgba(0,0,0,.9)}
/* d14 parte B (W10 d14-b-rotulo-2): la foto de «Más que una propiedad» se ve como en la diap. 14, con la casa entera a la izquierda (zoom ×1,9 sobre la casa) y el rótulo en 3 líneas a la derecha sin pisarla; a 390 el rótulo también deja la casa libre */
.ficha--masia .ficha__atardecer{overflow:hidden}
.ficha--masia .ficha__atardecer img{transform:scale(1.9);transform-origin:64% 81%}
.ficha--masia .ficha__atardecer figcaption{max-width:12.5em}
.ficha__documentos{grid-column:1/-1;padding:var(--e-5) var(--margen);background:var(--negro,#000);color:var(--blanco)}
.ficha__documentos h2{font-size:clamp(1.2rem,.9rem + calc(.8*var(--vw)),1.75rem);text-transform:uppercase;color:var(--oro)}
ul.ficha__planos{list-style:none;margin:var(--e-4) 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(16rem,1fr));gap:var(--e-2) var(--e-5)}
ul.ficha__planos a{display:block;padding:var(--e-2) 0;border-bottom:1px solid var(--oro);color:inherit;text-decoration:none}
ul.ficha__planos a:hover,ul.ficha__planos a:focus-visible{color:var(--oro)}
/* Masía (d14): los planos en una ventana que abre el botón PLANOS del héroe (data-dialogo). */
.ventana-planos{width:min(92vw,64rem);max-height:86vh;padding:var(--e-5);border:1px solid var(--oro);background:var(--negro,#000);color:var(--blanco);overflow:auto}
.ventana-planos::backdrop{background:rgba(0,0,0,.82)}
.ventana-planos__cabeza{display:flex;align-items:center;justify-content:space-between;gap:var(--e-4)}
.ventana-planos h2{margin:0;font-size:clamp(1.2rem,.9rem + calc(.8*var(--vw)),1.75rem);text-transform:uppercase;color:var(--oro)}
.ventana-planos__cerrar{min-width:2.75rem;min-height:2.75rem;border:0;background:transparent;color:var(--blanco);font-size:2rem;line-height:1;cursor:pointer}
.ventana-planos__cerrar:focus-visible{outline:2px solid var(--oro);outline-offset:2px}
.ventana-planos ul.ficha__planos{margin-top:var(--e-3)}
.ficha__galeria{grid-column:1/-1;padding:0 var(--margen);background:var(--negro,#000);color:var(--blanco);border-top:1px solid var(--oro)}
.ficha__galeria summary{cursor:pointer;padding:var(--e-4) 0;list-style:none;display:flex;justify-content:space-between;align-items:center}
.ficha__galeria summary::-webkit-details-marker{display:none}
.ficha__galeria summary:focus-visible{outline:2px solid var(--oro);outline-offset:4px}
.ficha__galeria summary::after{content:"+";color:var(--oro);font-size:1.75rem;line-height:1}
.ficha__galeria[open] summary::after{content:"−"}
.ficha__galeria h2{margin:0;font-size:clamp(1.2rem,.9rem + calc(.8*var(--vw)),1.75rem);text-transform:uppercase;color:var(--oro)}
ul.ficha__galeria-fotos{list-style:none;margin:0;padding:0 0 var(--e-5);display:grid;grid-template-columns:repeat(auto-fill,minmax(min(18rem,45%),1fr));gap:var(--e-2)}
ul.ficha__galeria-fotos img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.ficha__pie{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,22fr) minmax(0,15.5fr) minmax(0,22fr) minmax(0,40fr)}
.ficha__entorno{display:flex;flex-direction:column;align-items:flex-start;gap:var(--e-3);padding:var(--e-4) var(--e-5) var(--e-4) var(--margen);background:var(--crema);color:var(--tinta)}
.ficha__entorno h2{font-size:clamp(1.2rem,.9rem + calc(.8*var(--vw)),1.75rem);text-transform:uppercase}
.ficha__entorno p{font:400 var(--t-s)/1.4 var(--fuente-titulares)}
.ficha__entorno .boton{min-height:2.6rem;padding:.4rem 1.4rem;border:1px solid var(--oro-sobre-claro);color:var(--tinta);background:transparent}
.ficha__mapa{margin:0;background:var(--crema)}
.ficha__mapa img{width:100%;height:100%;object-fit:contain}   /* W12 (W13 fila 16): el mapa entero, con Vic, Sitges, Barcelona y su etiqueta, sin recortar por los bordes */
.distancias{list-style:none;margin:0;padding:var(--e-4) var(--e-5);display:grid;align-content:center;gap:var(--e-3);background:var(--crema);color:var(--tinta)}
.distancias li{display:grid;grid-template-columns:1.6rem 1fr auto;gap:var(--e-3);align-items:center;font:400 var(--t-s)/1.3 var(--fuente-titulares)}
.distancias svg{width:1.5rem;height:1.5rem}
.distancias__aprox{font-family:var(--fuente-texto);font-weight:500}   /* W13 (SEG-p27d-diap14-768-10): el ± de TS Didot casi no se ve */
.ficha__visita{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--e-5);padding:var(--e-4) var(--margen) var(--e-4) var(--e-5);background:var(--negro)}
.ficha__visita h2{font-size:clamp(1.3rem,.9rem + calc(1*var(--vw)),2rem);text-transform:uppercase;color:var(--oro)}
.ficha__visita .botones{margin-top:var(--e-4)}
.ficha__visita .boton{min-height:2.7rem;padding-inline:1rem;font-size:var(--t-xs)}
.ficha__visita .marcas{padding-left:var(--e-5);border-left:1px solid var(--linea-oro);align-content:center}
.ficha__visita .marcas li{font:400 var(--t-xs)/1.3 var(--fuente-titulares);letter-spacing:.06em;text-transform:uppercase}
@media (max-width:1023.98px){
  .ficha{grid-template-columns:1fr}
  .ficha__heroe{min-height:0;padding-top:0}
  .ficha__foto{position:relative;inset:auto;margin:0 calc(-1 * var(--e-6)) var(--e-5) calc(-1 * var(--margen));aspect-ratio:16/10}
  .ficha__foto::after{background:linear-gradient(0deg,var(--negro) 0%,rgba(0,0,0,0) 30%)}
  .ficha__heroe>*{max-width:42rem}
  .ficha__cita{position:static;max-width:none!important;margin-top:var(--e-4)!important;font-size:clamp(1.1rem,.9rem + 1vw,1.5rem)}   /* diapositiva 14: el lema «Naturaleza. Historia…» también en tablet y móvil, debajo de la foto (de p11 10ad9cf64; OK del puente) */
  .ficha__panel{border-left:0;padding-inline:var(--margen)}
  .ficha__estancias{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ficha__estancias blockquote{grid-column:1/-1}
  .ficha__atardecer{min-height:14rem}
  .ficha__pie{grid-template-columns:1fr}
  .ficha__entorno,.distancias,.ficha__visita{padding-inline:var(--margen)}
  .ficha__mapa{display:flex;justify-content:center}
  .ficha__mapa img{aspect-ratio:258/138;max-height:20rem;max-width:min(100%,387px)}   /* W13 (SEG-p27d-diap14-768-9): miniatura como en la maqueta, sin estirar sus 258 px a todo el ancho */
}
@media (max-width:599.98px){.ficha__visita{grid-template-columns:1fr}.ficha__visita .marcas{border-left:0;padding-left:0}}
@media (min-width:1024px) and (max-width:1099.98px){  /* SEG diap. 14 a 1024: panel de datos algo más ancho, texto del héroe más estrecho sobre la foto y mapa/atardecer sin recortes */
  .ficha{grid-template-columns:minmax(0,72fr) minmax(0,28fr)}
  .ficha__heroe>*{max-width:25rem}
  .ficha__foto{inset:0 0 0 30%}
  .ficha__foto::after{background:linear-gradient(90deg,var(--negro) 0%,rgba(0,0,0,.75) 22%,rgba(0,0,0,.2) 44%,rgba(0,0,0,0) 60%)}
  .ficha__cita{max-width:6em!important}
  .ficha__pie{grid-template-columns:minmax(0,22fr) minmax(0,16fr) minmax(0,22fr)}
  .ficha__mapa img{aspect-ratio:auto;max-height:none;object-fit:contain}
  .ficha__visita{grid-column:1/-1}
}

/* Diap. 14 a 1440 (2.ª revisión de W1, REV2-d14-1440-botones/-abajo): los botones del héroe en UNA fila, como la maqueta (con 31rem
   «Fotos de obra» caía abajo), y abajo «Ubicación privilegiada» y «Visita privada» en una línea con el texto de la visita en 3 (la
   columna del texto se comía el ancho de las garantías y el título de 2rem no cabía). */
@media (min-width:1100px){
  .ficha__heroe>.botones{max-width:none;gap:var(--e-3)}
  .ficha__heroe>.botones .boton{min-height:2.6rem;padding-inline:var(--e-5);font-size:var(--t-xs)}
  /* Distancias (puente 16:2x, maqueta d14): cada fila en UNA línea, nombre y cifra; la columna del 22 % no daba con el relleno de 1,5rem. */
  .distancias{padding-inline:var(--e-3);gap:var(--e-2)}
  .distancias li{grid-template-columns:1.2rem minmax(0,1fr) auto;gap:var(--e-2);font-size:clamp(.68rem,.3rem + .4vw,.78rem);white-space:nowrap}
  .distancias svg{width:1.2rem;height:1.2rem}
  /* Puente 17:0x (norma 2321, medido sobre la maqueta d14 a 1440): «Ubicación privilegiada» 247 px de ancho (18,4 px de letra), «Visita privada»
     146 px (17,6 px) y el texto de la ubicación en 4 líneas (relleno 32/16 px en vez de 58/24). Proporcional al ancho para que a 1280 y 1920 siga igual. */
  .ficha__entorno{padding-inline:var(--e-6) var(--e-4)}
  .ficha__entorno p{max-width:24.2em}   /* 3 líneas como la maqueta (PNG nativo de la diap. 14); sin el tope de 19 em la columna (≈270 px a 1440, la misma proporción que la maqueta) las da con TS Didot de 11,5 px; sustituye a la 2321, que daba 4; el título de arriba conserva todo el ancho */
  /* Héroe al alto de la maqueta d14: 385 px a 1440 (medido sobre el PNG: 447 px de 1671). Letras y columna de texto como la maqueta (título 56 px,
     lema 22 px, texto 14,5 px en 336 px, botones de 35 px a 1440), todo proporcional al ancho para que a 1280 y 1920 guarde la misma proporción. */
  .ficha--masia .ficha__heroe{min-height:26.74vw}
  /* W12 d14 (franja de fotos): el aspect-ratio 265/100 de más arriba lo pisaba `.ficha__estancias img` (misma especificidad, declarada después): las fotos medían 262×146 en vez de ~
     331×125. Con .ficha--masia gana, y el alto es proporcional al ancho (8,68vw = 125 px a 1440); columnas como la maqueta (fotos ~331/315/248 y la cita ~187, medidas sobre la lámina). */
  .ficha--masia .ficha__estancias--3{grid-template-columns:331fr 315fr 248fr 187fr}
  .ficha--masia .ficha__estancias--3 img{aspect-ratio:auto;height:8.68vw;object-position:center 60%}
  .ficha--masia .ficha__estancias--3 figcaption{padding-top:var(--e-2)}
  /* W12 d14 (fila de fotos+cita y franja Ubicación/Visita, orden de Víctor «iguales a su diapositiva»): a 1440 la maqueta mide 180 y 123 px (la web, 196 y 132: el min-height de 12rem del panel, la cita y el relleno de las franjas). En vw para que escalen con la diap. (12,5vw y 8,54vw). */
  .ficha--masia .ficha__estancias--3{padding-block:.35vw;min-height:12.5vw}
  .ficha--masia .ficha__estancias--3 blockquote{padding-block:.3vw}
  .ficha--masia .ficha__atardecer{min-height:0}   /* el 12rem de serie (192 px) fijaba la altura de la fila de fotos: la foto del panel mide lo que la fila */
  .ficha--masia .ficha__entorno,.ficha--masia .distancias,.ficha--masia .ficha__visita{padding-block:.54vw}
  /* W12 d14 (cita de la franja): en la maqueta el pie «MASÍA LA PAU / MUNTANYOLA / BARCELONA» va en oscuro, con un filete dorado corto encima (~27 px a 1440), no la raya larga en oro. */
  .ficha--masia .ficha__estancias--3 blockquote footer{border-top:0;padding-top:0;color:var(--tinta)}
  .ficha--masia .ficha__estancias--3 blockquote footer::before{content:"";display:block;width:1.9vw;height:2px;margin-bottom:var(--e-3);background:var(--oro)}
  /* W12 d14 (Codex masia-laminas-segunda 4 y 5): «1.000 m² aprox.» en una línea como la maqueta (partía «aprox.» abajo) y las garantías de la visita
     con el check dorado solo, sin el círculo relleno. */
  .ficha--masia .datos-propiedad dd{white-space:nowrap}
  .ficha--masia .ficha__visita .marcas .icono--check circle{display:none}
  .ficha--masia .ficha__visita .marcas .icono--check path{stroke:var(--oro)}
  .ficha--masia .ficha__estancias--3 blockquote p{font-size:1.39vw}   /* la cita de la maqueta: líneas de ~24 px a 1440 (letra ~20 px, interlínea 1,2); con clamp(…) salía de 24 px y bajaba el pie «MASÍA LA PAU · MUNTANYOLA» */
  /* Encuadre de la foto del héroe como la maqueta d14 (OK ajeno de W7: «la masía más pequeña y más abajo, el cielo domina, los cipreses cortados»): menos zoom y la foto subida. */
  .ficha--masia .ficha__foto--masia img{object-position:50% 72%;transform:scale(1.35);transform-origin:100% 110%}   /* W12 (DECIDIDO 4206, puente): la masía más cerca y más arriba, como la diapositiva 14; origen en el borde derecho para que los cipreses queden a la izquierda de la cita (19-31 px de cielo a 1100-1920, medido) */
  /* W12 d14 (lema del héroe, medido sobre la maqueta a 1440: «Naturaleza.» 94 px de ancho, líneas cada 24,6 px, 20 px más cerca de la parte de arriba de la foto,
     cortes Naturaleza. / Historia. / Una forma / diferente / de vivir. y filete de ~34 px). Con 1,1vw y 6em salía más pequeño y con los cortes cambiados. */
  /* W12 d14 (2.ª revisión de V3, DECIDIDO 4041 y 4053): la cita va sobre el cielo, a la derecha del 3.er ciprés, en el azul marino de la diapositiva
     (#090b17: media del 20 % más oscuro de sus trazos), sin la sombra blanca de parche, y corta Una forma / diferente / de vivir. como ella.
     Medido en el pod a 1100-1920 es/en: antes pisaba el ciprés 7-10 px y daba 2:1 de contraste; ahora 9-14 px de cielo y ≥6,3:1 (el 1 % peor). */
  .ficha--masia .ficha__cita{top:1vw;right:.8vw;font-size:1.2vw;line-height:1.34;max-width:4.9em!important;color:#090b17;text-shadow:none}
  .ficha--masia .ficha__cita::after{width:1.85em}
  /* W12 d14 (héroe, lámina 1440 frente a la maqueta): el velo de arriba (.6) oscurecía todo el cielo (luminancia del 60 % derecho 98 frente a 110 de la maqueta); solo hace falta tras el titular, a la izquierda. */
  .ficha--masia .ficha__foto--masia::before{-webkit-mask-image:linear-gradient(90deg,#000 0,#000 22%,transparent 50%);mask-image:linear-gradient(90deg,#000 0,#000 22%,transparent 50%)}
  .ficha--masia .ficha__heroe>*{max-width:23.3vw}
  .ficha--masia .ficha__heroe>.ficha__titulo,.ficha--masia .ficha__heroe>.ficha__lema,.ficha--masia .ficha__heroe>.botones,.ficha--masia .ficha__heroe>.rotulo,.ficha--masia .ficha__heroe>.ficha__foto{max-width:none}   /* el rótulo y los botones en UNA línea, como la maqueta */
  .ficha--masia .ficha__heroe>*+*{margin-top:.5vw}   /* d14 (héroe-2): el párrafo crece a 7 líneas como la maqueta; para que el héroe siga en 385 px (26,74 vw) el aire entre bloques y el relleno bajan a lo de la maqueta (kicker/título/lema/texto pegados, botones a ~.8 vw) */
  .ficha--masia .ficha__heroe{padding-block:1.5vw 1vw}
  .ficha--masia .ficha__heroe>.botones{margin-top:.8vw}
  .ficha--masia .ficha__titulo{font-size:calc(3.89*var(--vw))}
  .ficha--masia .ficha__lema{font-size:1.556vw}
  .ficha--masia .ficha__heroe>.texto-serif{font-size:1.17vw;line-height:1.27;max-width:20.5vw}   /* d14 (héroe-2, medido sobre la maqueta: «Una oportunidad única para adquirir» 286 px a 1440 = 16,85 px de letra, interlínea 21,4 px, columna ≈295 px = 20,5 vw; 7 líneas en es) */
  .ficha--masia .ficha__atardecer figcaption{font-size:1.11vw;max-width:12.5em;right:.5em;bottom:.7em;color:var(--crema);padding:.5em .8em;background:radial-gradient(ellipse at center,rgba(0,0,0,.62),rgba(0,0,0,.45) 60%,rgba(0,0,0,0))}   /* d14 (R2-B): el rótulo «Más que una propiedad…» era ×1,5 (24,3 px) y tapaba la casa; la diap. lo lleva a ≈16 px, crema, abajo a la derecha; d14-c: right/bottom en em (no 1,5rem) para que el texto caiga en la parte BAJA-DERECHA de la foto (texto x .41-.93, y .54-.87 del alto en la diap.) */
  .ficha--masia .ficha__heroe>.botones .boton{min-height:2.2rem}
  /* Panel de datos de la maqueta d14: SIEMPRE en 2 columnas × 3 filas (con 1 columna a 1024-1439 el panel medía 342 px a 1280 y subía el héroe a 536); letra e iconos al ancho. */
  .ficha--masia .datos-propiedad{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--e-4) var(--e-3)}
  .ficha--masia .datos-propiedad div{min-height:1.6rem;padding-left:2.1rem}
  .ficha--masia .datos-propiedad svg{width:1.6rem;height:1.6rem}
  /* W12 d14 (SEG-V16-11px-d14-15 y -18, regla 4163): rótulos de la ficha de datos y botones «Ver ubicación» / «Reservar visita privada» al tamaño de la
     diapositiva a 1440 (medido por ancho del mismo texto: estaban a 0,88 / 0,83 / 0,885 de ella); proporcionales por debajo. */
  .ficha--masia .datos-propiedad dt{font-size:clamp(.625rem,.855vw,.8rem);letter-spacing:.04em}
  .ficha--masia .datos-propiedad dd{font-size:clamp(.7rem,.9vw,.875rem)}
  /* Fila del pie al alto de la maqueta (125 px a 1440; antes 235): letra de 11,5 px en los textos, relleno de 12 px y botones de 27 px. */
  .ficha__entorno{padding-block:var(--e-3);gap:var(--e-2)}
  .ficha__entorno p{line-height:1.34}   /* interlínea de la maqueta: ≈15,5 px a 1440 (PNG nativo) */
  .ficha__entorno .boton,.ficha__visita .boton{min-height:1.7rem;padding-block:.1rem;font-size:clamp(.625rem,.81vw,.78rem)}
  .ficha__visita{padding-block:var(--e-3)}
  .ficha__visita{row-gap:var(--e-2);padding-inline:var(--e-5) var(--e-6)}
  .ficha__visita .marcas{gap:var(--e-1)}
  .ficha__visita .marcas li{min-height:0;line-height:1.1}
  .ficha__visita .marcas li svg{width:.9rem;height:.9rem;flex:none}   /* cada garantía medía 20 px por el icono: 5 filas = 132 px y la fila del pie 156 (maqueta 125) */
  .ficha__entorno{gap:var(--e-1)}
  .ficha__entorno h2,.ficha__entorno p,.ficha__visita h2,.ficha__visita p{margin:0}   /* los márgenes de serie sumaban ~28 px a la fila del pie (156 frente a 125) */
  .ficha__visita p.texto-serif{line-height:1.2}
  .ficha__visita p{font-size:clamp(.62rem,.8vw,.78rem);line-height:1.2}
  .ficha__visita .botones{margin-top:var(--e-2)}
  .distancias{padding-block:var(--e-3)}
  .ficha__entorno h2{font-size:clamp(.9rem,calc(1.278*var(--vw)),1.5rem)}
  .ficha__entorno p{font-size:clamp(.625rem,.8vw,.78rem)}   /* 11,5 px a 1440: el cuerpo de la maqueta (≈13 px) es de una letra más estrecha que TS Didot; con 11,5 px de TS Didot las líneas rompen igual que en la diap. (3) */
  .ficha__visita{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);column-gap:var(--e-4)}
  .ficha__visita .marcas{padding-left:var(--e-4)}
  .ficha__visita .marcas li{font-size:clamp(.625rem,-.26rem + 1.06vw,.7rem);letter-spacing:.04em}   /* cada garantía en una línea, como la maqueta (11 px a 1440, 9,4 a 1280) */
  .ficha__visita h2{font-size:clamp(1rem,calc(1.222*var(--vw)),1.5rem)}
  .ficha__visita p{line-height:1.45}   /* sin font-size: ganaba a la de la línea 949 (11,5 px a 1440) y el texto de la visita salía a 14 px en 3 líneas; la diap. 14 lo lleva en 2 */
  /* W12 d14 (revfinal W11, fila 3): iconos de tiempos como la maqueta: coche y avión macizos, en la tinta del texto y ~20 px a 1440 (web: de línea y 19 px, grises); proporcionales al ancho, suelo 10 px (4163). */
  .ficha--masia .distancias li{grid-template-columns:max(12px,1.5vw) minmax(0,1fr) auto}
  .ficha--masia .distancias svg{width:max(12px,1.45vw);height:max(12px,1.45vw);color:var(--tinta)}
  .ficha--masia .distancias .icono--coche,.ficha--masia .distancias .icono--avion,.ficha--masia .distancias .icono--ciudad{fill:currentColor}
  /* W12 d14 (revfinal W11, fila 2): entre «VISITA PRIVADA» y su texto la maqueta deja ~4 px (a 1440 ≈3,5); la web los tenía pegados (margin:0 de más arriba). */
  .ficha--masia .ficha__visita h2{margin-bottom:max(2px,.25vw)}
}
@media (min-width:1024px) and (max-width:1099.98px){
  /* W12 d14 (velo tablet, puente 23-oct; la regla de W10 para .heroe--proyecto no cubre .ficha__heroe): a 1024-1099 el texto del héroe va sobre la foto y el contraste del peor 1 % de píxeles por línea (p99) era de 3,8 a 4,8 en es (cita 3,8-4,1; lema 4,1-4,7) frente al 4,5 mínimo; con el velo más fuerte arriba y a la izquierda sale 6,4-16 en es y en. Sin caja: los dos degradados llegan a 0. Por debajo de 1024 el héroe se apila y el texto va sobre negro (p99 ≥11 medido a 390-900). */
  .ficha--masia .ficha__foto--masia::before{background:linear-gradient(180deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.5) 24%,rgba(0,0,0,0) 46%)}
  .ficha--masia .ficha__foto--masia::after{background:linear-gradient(90deg,var(--negro) 0%,rgba(0,0,0,.8) 22%,rgba(0,0,0,.45) 44%,rgba(0,0,0,0) 64%)}
}

/* ---------- Formularios de inmobiliaria con su acuerdo (04_1C Partner Circle, 04_3B Vender) ---------- */
/* La columna del lado, al menos tan ancha como su palabra más larga (FOTOGRAFÍA, ПРОФЕССИОНАЛЬНЫЙ): si no, se sale de la página */
.acuerdo-heroe{display:grid;grid-template-columns:minmax(0,45fr) minmax(0,42fr) minmax(min-content,13fr);border-bottom:1px solid var(--linea-suave)}
.acuerdo-heroe__texto{display:flex;flex-direction:column;align-items:flex-start;gap:var(--e-3);padding:var(--e-4) var(--e-5) var(--e-5) var(--margen)}
.acuerdo-heroe__titulo{font-size:clamp(1.9rem,.9rem + calc(2.3*var(--vw)),3.1rem);line-height:.98;text-transform:uppercase;color:var(--blanco);font-weight:600}
.acuerdo-heroe__texto .texto-serif{font:400 clamp(.88rem,.8rem + .25vw,1.05rem)/1.45 var(--fuente-texto)}
.acuerdo-heroe--vende .acuerdo-heroe__texto .texto-serif{font-family:var(--fuente-titulares);font-variation-settings:"opsz" var(--opsz-titulares);font-size:clamp(.95rem,.85rem + .3vw,1.2rem);line-height:1.38}   /* diap. 15: el cuerpo del héroe de Vender en serif como la maqueta; el Círculo de Socios sigue como estaba */
.acuerdo-heroe__texto .rotulo{font-size:clamp(.72rem,.6rem + .35vw,1rem)}
.acuerdo-heroe__texto .rotulo::after{content:"";display:block;width:4rem;height:1px;margin-top:var(--e-3);background:var(--oro)}
.acuerdo-heroe__foto{margin:0}
.acuerdo-heroe__foto img{width:100%;height:100%;object-fit:cover}
.acuerdo-heroe__lado{display:flex;flex-direction:column;justify-content:center;gap:var(--e-6);padding:var(--e-5) var(--margen) var(--e-5) var(--e-5);border-left:1px solid var(--linea-suave)}
/* Vender (diap. 15) desde 1100 px: la foto del Drive entera a todo el ancho de la cabecera (columnas 1-2) con el texto encima sobre un
   degradado, y el lateral en su columna (SEG 1440-1/2); los pasos 03 y 04 con su caja hasta abajo, a la altura de los formularios (1440-5);
   la columna 02 algo más ancha y el select con la letra justa para que «Plan completo: fotografía, vídeo y dron si procede» se lea entero (1440-3). */
@media (min-width:1100px){
  .acuerdo-heroe--vende .acuerdo-heroe__foto{grid-column:1/3;grid-row:1;position:relative;z-index:0}
  .acuerdo-heroe--vende .acuerdo-heroe__foto::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,11,11,.9) 0,rgba(11,11,11,.8) 49%,rgba(11,11,11,.46) 60.5%,rgba(11,11,11,0) 75%)}   /* lo justo para el contraste p99 ≥4,5 por línea (puente 2314: con .92/.84/.5 daba 5,83; con .88/.76/.42, 3,98) */
  .acuerdo-heroe--vende .acuerdo-heroe__foto img{position:absolute;inset:0;object-fit:contain;object-position:right center}   /* la foto del Drive ENTERA a la altura del héroe y pegada al lateral, como la diapositiva 15: pérgola y terraza asomando tras el texto, sofás y piscina abajo, Sagrada Família y dron (con cover desde la izquierda la terraza quedaba bajo el degradado y se cortaban sofás y piscina); fuera del flujo para que la altura la marque el texto (d15m: 474/486 a 1440) */
  .acuerdo-heroe--vende .acuerdo-heroe__texto{grid-column:1;grid-row:1;position:relative;z-index:1}
  /* Como la maqueta (2.ª revisión de W12): la cabecera baja (≈410 px a 1440) y panorámica; la columna del texto más ancha (el titular en 3
     líneas) y el cuerpo con la letra de la maqueta. */
  .acuerdo-heroe--vende{grid-template-columns:minmax(0,52fr) minmax(0,35fr) minmax(min-content,13fr)}
  .acuerdo-heroe--vende .acuerdo-heroe__texto{padding-block:var(--e-3) var(--e-4);gap:var(--e-2)}
  .acuerdo-heroe--vende .acuerdo-heroe__texto .texto-serif{font-size:clamp(.8rem,.55rem + .4vw,.94rem);line-height:1.32}
  .acuerdo-heroe--vende .acuerdo-heroe__titulo{font-size:clamp(1.9rem,.9rem + calc(2.1*var(--vw)),2.85rem)}
  .acuerdo-heroe--vende .acuerdo-heroe__lado{grid-column:3;grid-row:1}
  .acuerdo-pasos--vende{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr)}
  .acuerdo-pasos--vende .acuerdo-paso>.caja{flex:1}
  .acuerdo-pasos--vende .acuerdo-paso:nth-child(n+3)>.caja{flex:0 0 auto}   /* d15 (SEG-cl-v5b-1-diap15-1440-3/-4, DECIDIDO 4610): las cajas del 03 y el 04 acaban con su contenido, como la diapositiva, sin estirarse al alto del paso 01 (fotos, consentimiento y ENVIAR); el 01 y el 02 siguen hasta abajo */
  .acuerdo-pasos--vende .acuerdo-paso:nth-child(2) .campo select{padding-inline:.45rem .35rem}   /* d15 (SEG-cl-v5b-1-diap15-1440-1/-2): «Plan completo: fotografía, vídeo y dron si procede» / «Full plan: … if needed» entero, como la diapositiva; la flecha nativa ya deja su sitio */
  .acuerdo-pasos--vende .campo select{font-size:clamp(.62rem,.8vw,.82rem);letter-spacing:0;padding-inline:.5rem 1.6rem}
  .acuerdo-pasos--vende .acuerdo-paso:nth-child(2) .campo select{font-size:clamp(.58rem,.8vw,.82rem)}   /* d15 (V16, medido en pod sobre pt744): a 1100 el plan de marketing («…vídeo y dron si procede») pasaba 10 px del hueco con .62rem; con .58rem de mínimo cabe (1100-1160) y desde 1160 la letra no cambia */
}
.acuerdo-pasos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;padding-block:var(--e-5)}
.acuerdo-paso{display:flex;flex-direction:column;gap:var(--e-4);padding:0 clamp(1rem,1.6vw,1.8rem)}
.acuerdo-paso+.acuerdo-paso{border-left:1px solid var(--linea-suave)}
.acuerdo-paso:first-child{padding-left:0}
.acuerdo-paso:last-child{padding-right:0}
.paso-cabeza{display:flex;align-items:center;gap:var(--e-4)}
.paso-cabeza__numero{flex:none;display:grid;place-items:center;width:3.2rem;height:3.2rem;border:1.5px solid var(--oro);border-radius:50%;font:400 1.45rem/1 var(--fuente-titulares);color:var(--oro)}
.paso-cabeza h2,.paso-cabeza h3{font-size:clamp(.95rem,.85rem + calc(.3*var(--vw)),1.15rem);letter-spacing:.06em;text-transform:uppercase;color:var(--blanco);line-height:1.2}
.paso-cabeza p{margin:.3rem 0 0;font-size:var(--t-s);color:var(--texto-suave)}
.caja{display:flex;flex-direction:column;gap:var(--e-4);padding:clamp(1rem,1.5vw,1.6rem);border:1px solid var(--linea-suave);background:var(--superficie)}
.caja svg.icono--documento{width:2.8rem;height:2.8rem}
.caja__titulo{line-height:1.3;font-size:var(--t-h5);letter-spacing:.06em;text-transform:uppercase;color:var(--blanco)}
.caja .texto-serif{font-size:var(--t-s)}
.docusign{margin:0;font:700 clamp(1.4rem,1.1rem + .8vw,1.9rem)/1 var(--fuente-texto);letter-spacing:-.02em;color:var(--blanco)}
.caja__pronto{margin:0;font-size:var(--t-xs);color:var(--texto-suave);text-align:center}
.caja__pronto svg{width:1rem;height:1rem;vertical-align:-.15em;color:var(--oro)}
/* V12 15:2x: sustituida por la regla común de botones apagados en sistema.css (prio 0 de Víctor, puente 812711) */
.boton-video[aria-disabled="true"]:hover .boton-video__circulo{background:rgba(0,0,0,.35)}   /* el vídeo sin fichero (d13): desactivado como los amarillos sin destino, sin el brillo del círculo */
.boton-documento{display:inline-flex;align-items:center;gap:var(--e-3);font:500 var(--t-s)/1 var(--fuente-texto);letter-spacing:.1em;text-transform:uppercase;color:var(--texto-suave)}
.boton-documento svg{width:1.4rem;height:1.4rem}
.firmado--socios>a{color:inherit;text-decoration:none}.firmado--socios>a:hover span{color:var(--oro)}   /* d10 (5210/5211 sustituyen a la 4457): «Descargar acuerdo firmado» y «Acceso al área de agentes» son texto con icono y enlazan a /socio, como d19 (5140) */
a.boton-documento{text-decoration:none}
.invertir-nota{display:flex;align-items:flex-start;gap:var(--e-3);margin:0;padding:var(--e-3) var(--e-4);border:1px solid rgba(255,255,255,.14);border-radius:4px;background:rgba(255,255,255,.03);font:400 var(--t-xs)/1.5 var(--fuente-texto);color:var(--texto-suave)}   /* D-PRIN-106: como la nota de la diapositiva 19 */
.invertir-nota svg{flex:none;width:1.2rem;height:1.2rem;margin-top:.1em;color:var(--oro)}
/* Diap. 19, paso 04: cuadro «Tras la firma» (borde dorado, check grande a la izquierda y dos botones debajo), como su maqueta. */
.tras-firma{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--e-3) var(--e-4);margin-top:var(--e-4);padding:var(--e-4);border:1px solid var(--linea-oro);border-radius:4px}
.tras-firma>svg{width:2.6rem;height:2.6rem;color:var(--oro)}
.tras-firma h4{margin:.2em 0;font:400 var(--t-s)/1.2 var(--fuente-titulares);letter-spacing:.06em;text-transform:uppercase;color:var(--blanco)}
.tras-firma p{margin:0}
.tras-firma>div>p:last-child{font-size:var(--t-xs);color:var(--texto)}
.tras-firma__botones{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:var(--e-3)}
.tras-firma__botones .boton{flex:1 1 12rem;justify-content:space-between;font-family:inherit;font-size:var(--t-xs);cursor:default}
@media (max-width:600px){.tras-firma__botones{flex-direction:column}.tras-firma__botones .boton{flex:none;width:100%}}
.boton-documento--oro{align-self:flex-start;padding:.85rem 1.4rem;border:1px solid var(--oro);color:var(--blanco)}
.acuerdo-pasos--vende .boton-documento--oro{color:var(--oro)}   /* diap. 15: «Ver acuerdo» y su ojo en el dorado del borde, no en blanco (SEG-cx-p27-2-diap15-1440-3, SEG-cx-p35-3-diap15-1024-3); el Círculo de Socios sigue como estaba */
/* Diap. 15 a 1440 (SEG-cx-p24-2-diap15-1440-4, SEG-cx-p27-2-diap15-1440-3; lámina W7 d15-1440-es-diap-vs-servida-544f84e7f): los títulos de los pasos y el título de la tarjeta 03 van en sans (Jost) como la diapositiva (el texto de la tarjeta 03 sigue en serif, también en la diapositiva), no en serif. Solo Vender. */
.acuerdo-pasos--vende .paso-cabeza h2,.acuerdo-pasos--vende .caja__titulo{font-family:var(--fuente-texto);font-weight:500;text-transform:uppercase}
/* Diap. 15 a 1440 (medida de W11 sobre lo servido pt240; SEG-cx-p24-2-diap15-1440-1/-4, SEG-cx-p27-2-diap15-1440-1/-3): el texto del héroe a la escala de la diapositiva (título y párrafos ≈1,2×, subtítulo ≈1,2×), la línea dorada a la izquierda del lateral, las etiquetas del paso 01 en una línea (columna del 48 %) y «Firmar acuerdo con DocuSign» en una línea. Solo Vender. */
/* Diap. 15 (SEG-cx-p35-3-diap15-1024-2, lámina W7 pt255): el lema del lateral va en serif blanco, como la diapositiva (salía en dorado y sans). Solo Vender. */
.acuerdo-heroe--vende .lema-lateral{color:var(--blanco,#fff);font-family:var(--fuente-titulares);letter-spacing:.12em}
@media (min-width:1100px){
  .acuerdo-heroe--vende .acuerdo-heroe__lado{border-left-color:var(--oro)}
}
@media (min-width:1400px){   /* la escala de la diapositiva es la de 1440: de 1100 a 1399 el héroe y el botón de DocuSign (columna estrecha) quedan como antes */
  .acuerdo-pasos--vende .acuerdo-paso:nth-child(4) .boton{white-space:nowrap;font-size:.72rem;letter-spacing:0;gap:var(--e-2);padding-inline:var(--e-2)}
}
.invertir-acepto{display:flex;align-items:flex-start;gap:var(--e-3);font:400 var(--t-s)/1.4 var(--fuente-texto);cursor:pointer}   /* diap. 19, paso 02: «He leído y acepto…» */
.invertir-acepto input{flex:none;width:1.2rem;height:1.2rem;margin:.1em 0 0;accent-color:var(--oro)}
.invertir-sello{display:flex;align-items:center;justify-content:space-between;gap:var(--e-4);padding:var(--e-3) var(--e-4);border:1px solid rgba(255,255,255,.2);border-radius:4px}   /* diap. 19, paso 04: recuadro con DocuSign y «Seguro · Fiable · Internacional» en tres líneas */
.invertir-sello__texto{margin:0;font:500 var(--t-xs)/1.4 var(--fuente-texto);letter-spacing:.14em;text-transform:uppercase;text-align:left}
.invertir-tras-firma{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--e-3) var(--e-4);align-items:center;padding:var(--e-4);border:1px solid var(--linea-oro);border-radius:4px}   /* diap. 19, paso 04: «Tras la firma» */
.invertir-tras-firma svg{width:2.4rem;height:2.4rem;color:var(--oro)}
.invertir-tras-firma p{margin:0;font:400 var(--t-s)/1.4 var(--fuente-texto)}
.invertir-tras-firma .invertir-tras-firma__titulo{font-weight:500;letter-spacing:.1em;text-transform:uppercase}
.invertir-tras-firma .boton-documento{grid-column:1/-1;justify-content:center;font-size:var(--t-xs)}
.invertir-tras-firma .boton-documento:not(.boton-documento--oro){padding:.85rem 1.4rem;border:1px solid var(--linea-oro);color:var(--blanco)}
.invertir-tras-firma .boton-documento--oro{align-self:stretch;background:var(--oro);color:var(--negro)}
.boton--indicativo[aria-disabled="true"],.boton--indicativo[aria-disabled="true"]:hover{opacity:1;filter:none;cursor:default;transform:none}
.tras-firma__botones .boton[aria-disabled="true"],.tras-firma__botones .boton[aria-disabled="true"]:hover{opacity:1;filter:none;cursor:default;transform:none}   /* W11 (V7 y W8): los botones de «Tras la firma» se ven como en la diapositiva (amarillo y contorno dorado), no apagados; siguen sin acción (aria-disabled, cursor sin mano) */
@media (min-width:601px) and (max-width:1099.98px){.tras-firma__botones .boton{padding-inline:var(--e-2);gap:var(--e-1);letter-spacing:.02em;text-align:left}.tras-firma__botones .boton svg{width:1.1em;height:1.1em}}   /* W11 (nota de V7, puente 21-oct 20:3x; fila SEG-W11-d19-tf-768-desborde): entre 601 y 1099 la columna del paso 04 es estrecha (botón 139 px a 768) y el relleno de 2rem + hueco + flecha dejaban ~58 px: «PROPIETARIOS» se salía del botón (154/139). Relleno, hueco, flecha e interletrado menores; ≥1100 y ≤600 no cambian */
.firmado{display:grid;grid-template-columns:minmax(0,2fr) repeat(3,minmax(0,1fr));align-items:center;border-block:1px solid var(--linea-oro)}
.firmado>*{display:flex;align-items:center;gap:var(--e-4);padding:var(--e-4) var(--e-5)}
.firmado>*+*{border-left:1px solid var(--linea-oro)}
.firmado>:first-child{padding-left:0}
.firmado svg{flex:none;width:2.6rem;height:2.6rem;color:var(--oro)}
.firmado>:first-child svg{width:3.6rem;height:3.6rem}
.firmado h2{font:500 var(--t-m)/1.2 var(--fuente-texto);letter-spacing:.1em;text-transform:uppercase;color:var(--oro)}
.firmado p{margin:.3rem 0 0;font-size:var(--t-s)}
.firmado span{font:500 var(--t-xs)/1.4 var(--fuente-texto);letter-spacing:.08em;text-transform:uppercase}
/* Círculo de Socios (diap. 10, SEG 642-645): la foto detrás del titular (columnas 1-2, oscurecida bajo el texto) y el titular en 3 líneas;
   pasos con el 01 más ancho y sus etiquetas a la izquierda; en el 02, la letra de los desplegables deja ver su valor entero. */
@media (min-width:1100px){
  .acuerdo-heroe--socios{grid-template-columns:minmax(0,46fr) minmax(0,41fr) minmax(min-content,13fr)}
  .acuerdo-heroe--socios .acuerdo-heroe__foto{grid-column:1/3;grid-row:1;position:relative}
  .acuerdo-heroe--socios .acuerdo-heroe__foto::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,9,8,.95) 0,rgba(10,9,8,.88) 40%,rgba(10,9,8,.4) 53%,transparent 66%)}
  .acuerdo-heroe--socios .acuerdo-heroe__texto{grid-column:1;grid-row:1;position:relative;z-index:1}
  .acuerdo-heroe--socios .acuerdo-heroe__titulo{font-size:clamp(1.8rem,.5rem + calc(2*var(--vw)),2.45rem)}
  .acuerdo-heroe--socios .acuerdo-heroe__lado{grid-column:3}
  .acuerdo-pasos.acuerdo-pasos--socios{grid-template-columns:minmax(0,1.25fr) repeat(3,minmax(0,1fr))}
  .acuerdo-pasos--socios .acuerdo-paso:first-child .formulario--filas .campo{grid-template-columns:minmax(0,40%) minmax(0,1fr);gap:var(--e-3)}
}
@media (min-width:600px){
  .acuerdo-pasos--socios .campo input,.acuerdo-pasos--socios .campo select,.acuerdo-pasos--socios .campo textarea{font-size:.8rem}
  .acuerdo-pasos--socios .campo select{padding-inline:.7rem 1.4rem}
}
/* Círculo de Socios, fidelidad a la diapositiva 10 (SEG-VS-d10, 21-oct): pasos 03 y 04, banda «Acuerdo firmado», franja y pie, y el panel lateral. */
.acuerdo-pasos--socios .caja{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:var(--e-3) var(--e-4)}
.acuerdo-pasos--socios .caja>*{grid-column:1/-1}
.acuerdo-pasos--socios .caja>svg.icono--documento{grid-column:1;width:2.4rem;height:2.4rem}
.acuerdo-pasos--socios .caja>.caja__titulo{grid-column:2;margin:0;font:400 var(--t-s)/1.3 var(--fuente-titulares);letter-spacing:.1em}
@media (min-width:1100px){.acuerdo-pasos--socios .acuerdo-paso:nth-child(3) .caja{column-gap:var(--e-3);padding-inline:.6rem}.acuerdo-pasos--socios .acuerdo-paso:nth-child(3) .caja>svg.icono--documento{width:2rem;height:2rem}}   /* W13 (puente 4139/4157, d10 paso 03 a 1440): en la diapositiva 10 «ACUERDO DE COLABORACIÓN» cabe en una línea junto al icono; la tarjeta web es más estrecha (264 px) y el título (190 px, nowrap por la regla de 1280) sobresalía 21 px de su caja de 169: icono 2rem, hueco e-3 y relleno lateral .6rem de la caja del paso 03 le dan ≈197 px, sin cambiar la disposición ni el color */
.acuerdo-pasos--socios .caja>.texto-serif{font:400 .8rem/1.6 var(--fuente-texto);color:var(--texto)}
.acuerdo-pasos--socios .boton-documento{justify-content:center;font-size:.8rem;letter-spacing:.08em}
.acuerdo-pasos--socios .boton-documento--oro{align-self:stretch;padding:.8rem 1rem;color:var(--oro);letter-spacing:.1em}
.acuerdo-pasos--socios .boton-documento--oro svg{color:var(--oro)}
.acuerdo-pasos--socios .boton-documento:not(.boton-documento--oro){color:var(--texto);font-weight:400}
.acuerdo-pasos--socios .docusign{font:600 clamp(1.5rem,1.2rem + .8vw,1.9rem)/1 var(--fuente-texto);letter-spacing:-.05em}
.acuerdo-pasos--socios .marcas{gap:.7rem}
.acuerdo-pasos--socios .marcas li{font-size:.8rem}
.acuerdo-pasos--socios .marcas svg{width:1.45rem;height:1.45rem}
.acuerdo-pasos--socios .boton--indicativo{justify-content:center;gap:.4rem;white-space:nowrap;letter-spacing:0;font-size:clamp(.62rem,.42rem + .4vw,.76rem);padding-inline:.5rem}
.acuerdo-pasos--socios .caja__pronto{display:flex;align-items:center;justify-content:center;gap:.5rem;font-size:.8rem;color:var(--texto)}
.acuerdo-pasos--socios .caja__pronto svg{flex:none;width:1.3rem;height:1.3rem}
@media (min-width:1100px){.acuerdo-pasos--socios .caja__pronto{flex-wrap:nowrap;white-space:nowrap;gap:.35rem;font-size:.72rem;letter-spacing:0}.acuerdo-pasos--socios .caja__pronto svg{width:1.1rem;height:1.1rem}}   /* W13 (medir-d10-pt727, 3): «Seguro. Rápido. Legalmente vinculante.» en 1 línea con el candado al lado, como la diap. 10 (servida: 2 líneas, candado arriba) */
/* Banda «Acuerdo firmado»: una sola fila (icono y texto, y tres ítems con filetes verticales) sobre degradado dorado, también a 768. */
.firmado.firmado--socios{grid-template-columns:minmax(0,1.45fr) repeat(3,minmax(0,1fr));background:linear-gradient(90deg,rgba(242,180,82,.16),rgba(242,180,82,.04) 40%,rgba(242,180,82,.04) 65%,rgba(242,180,82,.14))}
.firmado.firmado--socios>*{padding:var(--e-4) clamp(.6rem,1.4vw,1.5rem)}
.firmado.firmado--socios>:first-child{padding-left:clamp(.6rem,1.4vw,1.5rem);grid-column:auto;border-bottom:0}
.firmado.firmado--socios>:nth-child(2){border-left:1px solid var(--linea-oro);padding-left:clamp(.6rem,1.4vw,1.5rem)}
.firmado.firmado--socios span{font:400 clamp(.62rem,.5rem + .3vw,.8rem)/1.45 var(--fuente-texto);letter-spacing:.03em;text-wrap:balance}
.firmado.firmado--socios svg{width:clamp(1.8rem,1.4rem + 1vw,2.6rem);height:clamp(1.8rem,1.4rem + 1vw,2.6rem)}
.firmado.firmado--socios>:first-child svg{width:clamp(2.4rem,1.6rem + 2vw,3.6rem);height:clamp(2.4rem,1.6rem + 2vw,3.6rem)}
.firmado.firmado--socios h2{letter-spacing:.05em;font-size:clamp(.85rem,.6rem + calc(.6*var(--vw)),1.2rem)}
.firmado.firmado--socios p{font-size:clamp(.7rem,.55rem + .35vw,.88rem)}
@media (max-width:599.98px){.firmado.firmado--socios{grid-template-columns:1fr}.firmado.firmado--socios>*{border-left:0!important}}
/* Franja inferior: una línea con tres grupos y degradado dorado, letras cálidas; el pie no repite el lema ni las ciudades que la franja ya lleva. */
main:has(.acuerdo-pasos--socios) .franja--inmo{background:linear-gradient(90deg,rgba(242,180,82,.14),rgba(242,180,82,.03) 35%,rgba(242,180,82,.03) 65%,rgba(242,180,82,.14)),var(--negro);color:#ece6da}
main:has(.acuerdo-pasos--socios) .franja--inmo .franja__centro{color:var(--oro)}
main:has(.acuerdo-pasos--socios) .franja--inmo .franja__lista{column-gap:0}
main:has(.acuerdo-pasos--socios) .franja--inmo .franja__lista li+li::before{display:inline;content:"|";margin-inline:.8em}
main:has(.acuerdo-pasos--socios)~.pie .pie__frase,main:has(.acuerdo-pasos--socios)~.pie .pie__ciudades{display:none}
@media (min-width:600px) and (max-width:1279.98px){
  main:has(.acuerdo-pasos--socios) .franja--inmo .franja__fila{flex-wrap:nowrap;justify-content:space-between;column-gap:var(--e-3);letter-spacing:.05em;font-size:clamp(.5rem,.2rem + .55vw,.7rem)}
  main:has(.acuerdo-pasos--socios) .franja--inmo .franja__lista,main:has(.acuerdo-pasos--socios) .franja--inmo .franja__centro,main:has(.acuerdo-pasos--socios) .franja--inmo .franja__derecha{flex-wrap:nowrap;white-space:nowrap}
  main:has(.acuerdo-pasos--socios) .franja--inmo .franja__centro{order:0;flex:0 1 auto;letter-spacing:.07em}
  main:has(.acuerdo-pasos--socios) .franja--inmo .franja__derecha{word-spacing:.5em;margin-left:var(--e-3)}
}
/* Panel lateral: ancho y cursiva como la diapositiva (≈13 % de la página, la cita en 6 líneas cortas). */
.acuerdo-heroe--socios .cita-lateral{font-size:clamp(.95rem,.6rem + .6vw,1.1rem)}
@media (min-width:1100px){
  .acuerdo-heroe--socios .acuerdo-heroe__lado{padding:var(--e-5) var(--e-4) var(--e-5) var(--e-4);gap:var(--e-5)}
  .acuerdo-heroe--socios .lema-lateral{font-size:clamp(.72rem,.45rem + .45vw,.95rem)}
  .acuerdo-heroe--socios .acuerdo-heroe__foto::after{background:linear-gradient(90deg,rgba(10,9,8,.93) 0,rgba(10,9,8,.8) 36%,rgba(10,9,8,.3) 50%,transparent 60%)}
  .acuerdo-heroe--socios .acuerdo-heroe__foto img{position:absolute;inset:0;object-position:left 80%}
  .acuerdo-heroe--socios .acuerdo-heroe__texto .texto-serif{max-width:none;font-size:clamp(.82rem,.55rem + .4vw,.98rem);line-height:1.35}
}
/* De 600 a 1399 px, cuatro columnas no dejan ver el valor de los desplegables del 02, y con el 01 a todo el ancho el 04 se quedaba solo
   en media fila (SEG-p10-estudio-diap10-768-4): los pasos van de dos en dos (01|02, 03|04). */
@media (min-width:600px) and (max-width:1399.98px){
  .acuerdo-pasos.acuerdo-pasos--socios{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:var(--e-7)}
  .acuerdo-pasos--socios .acuerdo-paso:nth-child(odd){grid-column:auto;padding-left:0;padding-right:clamp(1rem,1.6vw,1.8rem);border-left:0}
  .acuerdo-pasos--socios .acuerdo-paso:nth-child(even){grid-column:auto;padding-left:clamp(1rem,1.6vw,1.8rem);padding-right:0;border-left:1px solid var(--linea-suave)}
}
/* Diap. 10 a 1440 (proporciones, V6 21-oct 17:1x): héroe de ≈310 px, filas del formulario de ≈30 px, títulos de paso en una línea y cuatro pasos de ≈430 px, como la maqueta (1536×1024 llevada a 1440). */
@media (min-width:1400px){
  .acuerdo-heroe--socios .acuerdo-heroe__texto{padding:var(--e-3) var(--e-4) var(--e-3) var(--margen);gap:var(--e-2)}
  .acuerdo-heroe--socios .acuerdo-heroe__texto .texto-serif{font-size:.82rem;line-height:1.4;max-width:44rem}
  .acuerdo-heroe--socios .acuerdo-heroe__lado{padding-block:var(--e-3);gap:var(--e-4)}
  .acuerdo-heroe--socios .acuerdo-heroe__foto{background:#0a0908}
  .acuerdo-heroe--socios .acuerdo-heroe__foto img{position:absolute;inset:0 0 0 auto;width:auto;max-width:none;height:100%;aspect-ratio:2014/781;object-fit:cover}   /* la foto ENTERA (2014×781) a la derecha, a la altura del texto (≈301 px a 1440): con cover en una caja de 4:1 se cortaban los libros «PERSONAS. PROPIEDADES. POSIBILIDADES.» de abajo a la izquierda, que trae la maqueta (V7, 43fa2827/610e2367) */
  .acuerdo-heroe--socios .acuerdo-heroe__foto img{inset:0 -24px 0 auto}   /* W13 (DECIDIDO 4206, d10 héroe): la foto 24 px más a la derecha (queda bajo el panel lateral opaco), como la diapositiva (alineada por píxeles: misma escala, −24 px en x) */
  .acuerdo-heroe--socios .acuerdo-heroe__foto{overflow:hidden}   /* la foto desplazada 24 px NO invade el panel lateral (V12, cl-v1-5: cortaba la 1.ª letra de cada línea del lema y la cita): se recorta en su figura */
  .acuerdo-heroe--socios .acuerdo-heroe__foto::after{background:linear-gradient(90deg,#0a0908 0,rgba(10,9,8,.95) 28%,rgba(10,9,8,.6) 38%,transparent 49%)}   /* el degradado solo cubre el texto y deja ver los libros y el portátil */
  .acuerdo-heroe--socios .acuerdo-heroe__lado{background:rgba(10,9,8,.92)}   /* el lema de la derecha va en su panel oscuro, no sobre el cielo de la foto (w13-d10-cap7) */
  .acuerdo-pasos--socios{padding-block:var(--e-3)}
  .acuerdo-pasos--socios .acuerdo-paso{gap:var(--e-3)}
  .acuerdo-pasos--socios .paso-cabeza{gap:var(--e-3)}
  .acuerdo-pasos--socios .paso-cabeza__numero{width:2.8rem;height:2.8rem;font-size:1.25rem}
  .acuerdo-pasos--socios .paso-cabeza h2{font-size:.8rem;letter-spacing:.05em;white-space:nowrap}
  .acuerdo-pasos--socios .paso-cabeza p{font-size:.72rem;margin-top:.15rem}
  .acuerdo-pasos--socios .formulario--filas{gap:.3rem}
  .acuerdo-pasos--socios .campo{font-size:.72rem}
  .acuerdo-pasos--socios .campo input,.acuerdo-pasos--socios .campo select{height:1.7rem;min-height:0;padding-block:.1rem;font-size:.72rem}
  .acuerdo-pasos--socios .campo textarea{height:3.4rem;min-height:0;font-size:.72rem}
}   /* W13: cierre del @media anterior (el bloque de abajo se había colado dentro; a 390 dejaba el paso 03/04 fuera, scroll 457/390) */
/* d10 a 900-1099 px (W13, DECIDIDO 4587 por la 3558: «iguales a su diapositiva a 1440», no «diseño de tablet» 2631): el héroe lado a lado (foto detrás del texto, lateral a la derecha; con eso la foto vuelve a media pantalla y la
   foto EN deja de verse ampliada) y los 4 pasos en UNA fila como la maqueta, con letra de formulario del ancho grande para que quepan los desplegables. Solo Círculo de Socios. */
@media (min-width:960px) and (max-width:1099.98px){
  .acuerdo-heroe.acuerdo-heroe--socios{grid-template-columns:minmax(0,46%) minmax(0,41%) minmax(0,13%)}   /* en %, no en fr: con fr/min-content el lateral (lema y cita sin partir, 547 px) se llevaba el 60 % y la columna 2 se colapsaba a 0 (medidas en pod 22-oct) */
  .acuerdo-heroe--socios .acuerdo-heroe__lado{min-width:0;overflow:hidden}
  .acuerdo-heroe--socios .lema-lateral,.acuerdo-heroe--socios .cita-lateral{white-space:normal;overflow-wrap:break-word;hyphens:auto}
  .acuerdo-heroe--socios .lema-lateral{font-size:.6rem;letter-spacing:.06em}
  .acuerdo-heroe--socios .cita-lateral{font-size:.8rem;line-height:1.3}
  .acuerdo-heroe--socios .acuerdo-heroe__foto{grid-column:1/3;grid-row:1;position:relative;overflow:hidden;background:#0a0908}
  .acuerdo-heroe--socios .acuerdo-heroe__foto::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,9,8,.93) 0,rgba(10,9,8,.8) 36%,rgba(10,9,8,.3) 50%,transparent 60%)}
  .acuerdo-heroe--socios .acuerdo-heroe__foto img{position:absolute;inset:0;object-position:left 80%}
  .acuerdo-heroe--socios .acuerdo-heroe__texto{grid-column:1;grid-row:1;position:relative;z-index:1}
  .acuerdo-heroe--socios .acuerdo-heroe__texto .texto-serif{max-width:none;font-size:.82rem;line-height:1.35}
  .acuerdo-heroe--socios .acuerdo-heroe__lado{grid-column:3;grid-row:1;flex-direction:column;flex-wrap:nowrap;border-left:1px solid var(--linea-suave);padding:var(--e-5) var(--e-4);gap:var(--e-5);background:rgba(10,9,8,.92)}   /* la regla de <1100 lo ponía en fila y con wrap: su min-content se comía la rejilla (medida en pod 22-oct) */
  .acuerdo-heroe--socios .acuerdo-heroe__titulo{font-size:1.6rem}
  .acuerdo-pasos.acuerdo-pasos--socios{grid-template-columns:minmax(0,1.25fr) repeat(3,minmax(0,1fr));row-gap:0}
  .acuerdo-pasos--socios .acuerdo-paso:nth-child(n){grid-column:auto;border-left:1px solid var(--linea-suave)}
  .acuerdo-pasos--socios .acuerdo-paso:first-child{border-left:0}
  .acuerdo-pasos--socios .paso-cabeza{gap:var(--e-3)}
  .acuerdo-pasos--socios .paso-cabeza__numero{width:2.8rem;height:2.8rem;font-size:1.25rem}
  .acuerdo-pasos--socios .paso-cabeza h2{font-size:.8rem;letter-spacing:.05em}
  .acuerdo-pasos--socios .paso-cabeza p{font-size:.72rem;margin-top:.15rem}
  .acuerdo-pasos--socios .campo{font-size:.72rem}
  .acuerdo-pasos--socios .campo input,.acuerdo-pasos--socios .campo select{font-size:.72rem}
  .acuerdo-pasos--socios .acuerdo-paso:nth-child(n){padding-left:.5rem;padding-right:.5rem}
  .acuerdo-pasos--socios .acuerdo-paso:first-child{padding-left:0}
  .acuerdo-pasos--socios .acuerdo-paso:last-child{padding-right:0}
  .acuerdo-pasos--socios .acuerdo-paso .campo select,.acuerdo-pasos--socios .acuerdo-paso:nth-child(2) .campo select{padding-inline:.4rem .9rem;font-size:.625rem}   /* 10 px: con la letra de 11,5 px «Barcelona / Nacional / Internacional» y «Al formalizar la compraventa» se cortaban 8-26 px (medida en pod) */
  .acuerdo-pasos.acuerdo-pasos--socios .acuerdo-paso:nth-child(3) .caja .caja__titulo{font-size:.65rem;letter-spacing:.03em}   /* más específico que .acuerdo-paso:nth-child(3) .caja .caja__titulo{.9rem} de 600 px (medida pod) */   /* «ACUERDO DE COLABORACIÓN» se salía de su caja */
  .acuerdo-pasos.acuerdo-pasos--socios .acuerdo-paso:nth-child(4) .boton--indicativo{font-size:.625rem;line-height:1.15;letter-spacing:0;white-space:normal;text-align:center;gap:.25rem;padding-inline:.25rem;min-width:0;max-width:100%}   /* 10 px (suelo 4163): «Firmar acuerdo con DocuSign» partido en 2 líneas si no cabe en la caja de 161-190 px (medidas 9731/9761: a 8,96 px aún salía 2-4 px por lado a 960) */
  .acuerdo-pasos.acuerdo-pasos--socios .acuerdo-paso:nth-child(4) .boton--indicativo>span{white-space:normal;min-width:0}   /* el span del texto trae su propio nowrap: sin esto no parte en 2 líneas (medida 9764 v8) */
}
/* Círculo de Socios (diap. 10, SEG-VS-d10-1440-*): cabeceras de paso en una línea, filas de campos de ~2 rem como la maqueta (antes el doble),
   textarea baja, y la tarjeta del 03 con el icono a la izquierda del título, cuerpo en sans ligera y botones a todo el ancho / centrados. Solo esta página. */
@media (min-width:600px){
  .acuerdo-pasos--socios .acuerdo-paso{gap:var(--e-3)}
  .acuerdo-pasos--socios .paso-cabeza{gap:var(--e-3)}
  .acuerdo-pasos--socios .paso-cabeza__numero{width:2.7rem;height:2.7rem;font-size:1.25rem}
  .acuerdo-pasos--socios .paso-cabeza h2,.acuerdo-pasos--socios .paso-cabeza h3{font-size:.86rem;letter-spacing:.05em;font-weight:400;line-height:1.15}
  .acuerdo-pasos--socios .paso-cabeza p{margin-top:.15rem;font-size:.76rem;line-height:1.2}
  .acuerdo-pasos--socios .formulario{gap:.4rem}
  .acuerdo-pasos--socios .campo{gap:.2rem}
  .acuerdo-pasos--socios .campo input,.acuerdo-pasos--socios .campo select{min-height:1.9rem;padding-block:.2rem}
  .acuerdo-pasos--socios .campo textarea{min-height:3.4rem;padding-block:.35rem}
  .acuerdo-pasos--socios .campo{font-size:.8rem}
  .acuerdo-pasos--socios .acuerdo-paso:nth-child(3) .caja{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:var(--e-3);row-gap:var(--e-3)}
  .acuerdo-pasos--socios .acuerdo-paso:nth-child(3) .caja>.texto-serif,.acuerdo-pasos--socios .acuerdo-paso:nth-child(3) .caja>.boton-documento{grid-column:1/-1}
  .acuerdo-pasos--socios .acuerdo-paso:nth-child(3) .caja .caja__titulo{font-size:.9rem;letter-spacing:.04em;font-weight:400;line-height:1.2}
  .acuerdo-pasos--socios .acuerdo-paso:nth-child(3) .caja .texto-serif{font:300 .82rem/1.5 var(--fuente-texto);font-synthesis:none}
  .acuerdo-pasos--socios .acuerdo-paso:nth-child(3) .boton-documento--oro{align-self:stretch;justify-content:center}
  .acuerdo-pasos--socios .acuerdo-paso:nth-child(3) .boton-documento:not(.boton-documento--oro){justify-self:center;font-weight:400;color:var(--blanco)}
}
@media (min-width:1400px){   /* la maqueta: título y subtítulo de cada paso, cada uno en UNA línea */
  .acuerdo-pasos--socios .paso-cabeza{gap:.6rem}
  .acuerdo-pasos--socios .paso-cabeza__numero{width:2.5rem;height:2.5rem;font-size:1.15rem}
  .acuerdo-pasos--socios .paso-cabeza h2,.acuerdo-pasos--socios .paso-cabeza h3{font-size:.78rem;letter-spacing:.03em;white-space:nowrap}
  .acuerdo-pasos--socios .paso-cabeza p{font-size:.7rem;white-space:nowrap}
  .acuerdo-pasos--socios .acuerdo-paso:nth-child(3) .caja .caja__titulo{font-size:.76rem;letter-spacing:.02em;white-space:nowrap}
}
@media (max-width:599.98px){   /* móvil (sin versión en la diapositiva, SEG-VS-d10-390-*): héroe más corto, para que el formulario empiece antes */
  .acuerdo-heroe--socios .acuerdo-heroe__texto{gap:var(--e-2);padding-block:var(--e-3)}
  .acuerdo-heroe--socios .acuerdo-heroe__titulo{font-size:1.45rem;line-height:1}
  .acuerdo-heroe--socios .acuerdo-heroe__texto .rotulo{font-size:.62rem;letter-spacing:.14em}
  .acuerdo-heroe--socios .acuerdo-heroe__texto .rotulo::after{margin-top:var(--e-2)}
  .acuerdo-heroe--socios .acuerdo-heroe__texto .texto-serif{font-size:.8rem;line-height:1.4}
  .acuerdo-heroe--socios .acuerdo-heroe__lado{padding-block:var(--e-3);gap:var(--e-2);border-left:0}
  .acuerdo-heroe--socios .lema-lateral{font-size:.7rem}
  .acuerdo-heroe--socios .cita-lateral{font-size:.9rem}
}
/* Diap. 15 a 1440 (lámina W7 d15-vende-1440-es-diap-vs-cand-d1678167c): titular en 3 líneas y el formulario compacto como la maqueta: en el 01
   cada etiqueta a la izquierda de su campo y filas de ≈30 px; en el 02 la etiqueta encima, sin aire de más; así los cuatro pasos quedan bajos y las cajas del 03 y el 04 sin hueco. */
@media (min-width:1400px){
  .acuerdo-heroe--vende .acuerdo-heroe__titulo{font-size:2.65rem;max-width:14.6em;text-wrap:balance}   /* «VENDE TU PROPIEDAD / DE LUJO EN BARCELONA / CON THE SEDUCTION.», como la diapositiva (sin balance cortaba tras «DE» y «CON») */
  .acuerdo-heroe--vende .acuerdo-heroe__texto .rotulo{font-size:.85rem;letter-spacing:.04em}   /* subtítulo en una línea, como la diapositiva */
  .acuerdo-heroe--vende .acuerdo-heroe__texto .texto-serif{font-size:.9rem;line-height:1.3;max-width:34rem}   /* columna estrecha como la diapositiva: los párrafos en 4 y 3 líneas, sin pasar sobre la foto */
  .acuerdo-heroe--vende .lema-lateral{font-size:.64rem;line-height:1.45}   /* (SEG-V16-11px-d15-19, 4163: 10,24 px, no 9,92) lema y cita del lateral más pequeños: la columna se estrecha y la foto gana ancho, como la diapositiva */
  .acuerdo-heroe--vende .cita-lateral{font-size:1rem}
  .acuerdo-pasos--vende{padding-block:var(--e-3)}
  .acuerdo-pasos--vende .acuerdo-paso{gap:var(--e-3)}
  .acuerdo-pasos--vende .formulario--filas{gap:.3rem}
  .acuerdo-pasos--vende .paso-cabeza{gap:var(--e-3)}
  .acuerdo-pasos--vende .paso-cabeza__numero{width:2.8rem;height:2.8rem;font-size:1.25rem}
  .acuerdo-pasos--vende .paso-cabeza h2{font-size:.8rem;letter-spacing:.05em;white-space:nowrap}
  .acuerdo-pasos--vende .paso-cabeza p{font-size:.72rem;margin-top:.15rem}
  .acuerdo-pasos--vende .caja__titulo{font-size:.95rem}
  .acuerdo-pasos--vende .acuerdo-paso:nth-child(3) .caja{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:var(--e-4);row-gap:var(--e-3);align-items:start;align-content:start}   /* diap. 15: el icono del documento a la izquierda del título (Codex 9520) */
  .acuerdo-pasos--vende .acuerdo-paso:nth-child(3) .caja>.texto-serif{grid-column:1/-1}   /* el icono solo junto al título; el texto debajo a todo el ancho */
  .acuerdo-pasos--vende .acuerdo-paso:nth-child(3) .caja>.boton-documento{grid-column:1/-1}
  .acuerdo-pasos--vende .boton-documento--oro{align-self:auto;justify-self:stretch;justify-content:center}   /* «Ver acuerdo» a todo el ancho de la caja, como la diapositiva */
  .acuerdo-pasos--vende .acuerdo-paso:first-child .formulario--filas .campo{grid-template-columns:minmax(0,48%) minmax(0,1fr);gap:var(--e-2)}
  .acuerdo-pasos--vende .acuerdo-paso:nth-child(2) .formulario--filas .campo{gap:.15rem}
  .acuerdo-pasos--vende .campo{font-size:.72rem}
  .acuerdo-pasos--vende .campo input,.acuerdo-pasos--vende .campo select{height:1.7rem;min-height:0;padding-block:.1rem;font-size:.72rem}
  .acuerdo-pasos--vende .campo textarea{height:3.4rem;min-height:0;font-size:.72rem}
}
@media (max-width:1099.98px){
  .acuerdo-heroe{grid-template-columns:1fr}
  .acuerdo-heroe__foto{order:-1}
  .acuerdo-heroe__foto img{aspect-ratio:16/9}
  .acuerdo-heroe__lado{flex-direction:row;flex-wrap:wrap;border-left:0;padding-inline:var(--margen);padding-top:0}
  /* Vender (SEG 768-6): la lista y la cita, una bajo otra y alineadas con el margen del texto, no centradas en la fila. */
  .acuerdo-heroe--vende .acuerdo-heroe__lado{flex-direction:column;align-items:flex-start;justify-content:flex-start}
  /* Diap. 15 a 1024: el 01 a todo el ancho y el 02, 03 y 04 en tres columnas con su aire y su línea, no el 03 pegado al 02 y el 04 solo debajo. */
  .acuerdo-pasos{grid-template-columns:minmax(0,1.3fr) repeat(2,minmax(0,1fr));row-gap:var(--e-7)}
  /* El plan de marketing («Plan completo: fotografía, vídeo y dron si procede») se lee entero: letra de 12,8 px y menos relleno (fila 15-390-3). */
  .acuerdo-paso:nth-child(2) .campo select{font-size:.8rem;padding-inline:.7rem .4rem}
  .acuerdo-paso:first-child{grid-column:1/-1;padding-inline:0}
  .acuerdo-paso:nth-child(2){padding-left:0;border-left:0}
  .firmado{grid-template-columns:repeat(3,minmax(0,1fr))}
  .firmado>:first-child{grid-column:1/-1;padding-left:0;border-bottom:1px solid var(--linea-oro)}
  .firmado>:nth-child(2){border-left:0;padding-left:0}
}
/* Diap. 15 de 600 a 1099 (SEG-cx-p35-3-diap15-1024-1, SEG-cx-p34-2-diap15-768-1): la foto del héroe de Vender entera (1991×790 del Drive: dron y terraza de la derecha), no recortada a 16:9. Solo Vender. */
@media (min-width:600px) and (max-width:1099.98px){
  .acuerdo-heroe--vende .acuerdo-heroe__foto img{aspect-ratio:1991/790}
}
@media (max-width:799.98px){
  .acuerdo-pasos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .acuerdo-paso:nth-child(3){padding-right:0}
  .acuerdo-paso:nth-child(4){grid-column:1/-1;padding-inline:0;border-left:0}
  /* Vender (768 y 390): el select del plan de marketing tampoco se corta (SEG 768-2, 390-3). */
  .acuerdo-pasos--vende .acuerdo-paso:nth-child(2) .campo select{font-size:.8rem;letter-spacing:0;padding-inline:.6rem 1.6rem}
}
@media (max-width:599.98px){
  .acuerdo-pasos,.firmado{grid-template-columns:1fr}
  .acuerdo-paso{padding-inline:0!important;border-left:0!important}
  .firmado>*{border-left:0!important;padding-left:0}
}

/* Campos con la etiqueta a la izquierda (04_1C, 04_3B) */
.formulario--filas .campo{display:grid;grid-template-columns:minmax(7rem,38%) minmax(0,1fr);align-items:center;gap:var(--e-3)}
.formulario--filas .campo--largo{align-items:start}
/* Los cuatro pasos en fila (diap. 15): la columna es estrecha, así que la etiqueta va encima del campo, en una línea, como en la diapositiva. */
.acuerdo-paso .formulario--filas .campo{grid-template-columns:minmax(0,1fr);gap:var(--e-2)}
/* Círculo de Socios (diap. 10, puente 2202): «Otra ciudad» abre su campo de texto */
.formulario--filas .campo--otra-ciudad{display:none}
.formulario--filas:has(select[name="city"] option[value="otra"]:checked) .campo--otra-ciudad{display:grid}
.formulario .requerido,.campo__obl{color:var(--oro)}
.campo__fin{white-space:nowrap}
/* Invertir (diap. 18): el asterisco, rojo como en la diapositiva. */
.formulario--dos .campo__obl{color:#e5483a}
/* Invertir (diap. 18): dos columnas; el correo, las ayudas, la información adicional y el envío, a todo el ancho; una columna en móvil. */
.formulario--dos{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--e-4)}
.formulario--dos>*{min-width:0}
.formulario--dos>:not(.campo),.formulario--dos>.campo--ancho,.formulario--dos>.campo--largo{grid-column:1/-1}
@media (max-width:700px){.formulario--dos{grid-template-columns:minmax(0,1fr)}}
/* La subida como la diap. 18: caja de trazos con icono y «Subir fotos»; el input del navegador, encima y transparente. */
.subida{position:relative;display:block}
.campo .subida input[type="file"]{position:absolute;inset:0;width:100%;height:100%;min-height:0;padding:0;opacity:0;cursor:pointer}
.subida__caja{display:flex;align-items:center;justify-content:center;gap:var(--e-2);min-height:3.5rem;padding:.75rem .9rem;border:1px dashed var(--linea);border-radius:var(--radio-s);background:var(--superficie-2);color:var(--texto);font-size:var(--t-s);text-align:center;overflow-wrap:anywhere}
.subida__caja svg.icono{flex:none;width:1.6rem;height:1.6rem;color:var(--oro)}
.subida:hover .subida__caja,.subida:focus-within .subida__caja{border-color:var(--oro)}
.subida input[type="file"]:focus-visible+.subida__caja{outline:2px solid var(--foco);outline-offset:1px}
.campo__ayuda{grid-column:1/-1;margin:0;color:var(--texto-suave);font-size:var(--t-xs)}
/* W7 (d15): la fecha con «Selecciona una fecha» dentro del campo mientras está vacía y sin foco (web.js pone --vacia); el calendario del navegador, a la derecha. */
.campo__fecha{position:relative;display:block;min-width:0}
.campo__fecha>input{color-scheme:dark}   /* el icono del calendario, claro sobre el campo oscuro (como la diapositiva; sin esto salía casi negro) */
.campo__fecha-texto{display:none}
.campo__fecha--vacia>input:not(:focus){color:transparent}
.campo__fecha--vacia>input:not(:focus)+.campo__fecha-texto{display:block;position:absolute;left:calc(.9rem + 1px);right:2.4rem;top:50%;transform:translateY(-50%);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--texto-suave);pointer-events:none}
@media (max-width:520px){.formulario--filas .campo{grid-template-columns:1fr}}

/* ---------- 04_4 · Invertir ---------- */
.invertir-heroe{display:grid;grid-template-columns:minmax(0,44fr) minmax(0,42fr) minmax(0,14fr);min-height:clamp(30rem,40vw,44rem)}
@media (min-width:1100px) and (max-width:1279.98px){.invertir-heroe{grid-template-columns:44% minmax(0,1fr) minmax(min-content,14%)}}
@media (min-width:1280px) and (max-width:1439.98px){html:lang(ru) .invertir-heroe{grid-template-columns:44% minmax(0,1fr) minmax(min-content,14%)}}   /* D-PRIN-098: la palabra más larga del lema lateral (es «EXCEPCIONALES.», fr «EXCEPTIONNELS.», ru «ИСКЛЮЧИТЕЛЬНАЯ») no cabía en la columna de 14 % y sacaba scroll horizontal (es/fr hasta ≈1200, ru hasta ≈1300); la columna lateral no baja de esa palabra, el texto se queda en su 44 % y lo que falta sale de la columna del medio, que solo lleva foto. Desde 1280 (es/en/fr) y 1440 (ru), como antes. */
@media (min-width:1440px){.invertir-heroe{grid-template-columns:minmax(0,44fr) minmax(0,33fr) minmax(min-content,23fr)}.invertir-heroe__lado{padding-left:var(--e-6)}}   /* diap. 16: el lateral con su cita en 5 líneas cortas como la maqueta (antes, 121 px de cita y una palabra por línea) */
.invertir-heroe__texto{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:clamp(.7rem,.4rem + .8vw,1.3rem);margin-right:-8vw;padding:var(--e-6) 0 var(--e-6) var(--margen)}
.invertir-heroe__titulo{font-size:clamp(2rem,1rem + calc(3.06*var(--vw)),4.4rem);line-height:.98;text-transform:uppercase;color:var(--blanco);font-weight:600;text-shadow:0 2px 20px rgba(0,0,0,.6)}
.invertir-heroe__texto>.rotulo:not(.rotulo--oro){text-wrap:balance}.invertir-heroe__texto .texto-serif{text-wrap:pretty}   /* el subtítulo, si se parte (en inglés a 1440), no deja una palabra sola en la 2.ª línea (V6 GAL-invertir-d16-en-huerfana) */
.invertir-heroe__texto .texto-serif{max-width:34em;text-shadow:0 1px 10px rgba(0,0,0,.7)}
/* Diap. 16 (Invertir, 1.er héroe) a ≥1100: el titular en 4 líneas como la maqueta («REVALORIZAMOS / TU PROPIEDAD. / INVERTIMOS EN / SU TRANSFORMACIÓN.»), sin que ninguna se parta */
@media (min-width:1100px){main > section.invertir-heroe .invertir-heroe__titulo{white-space:nowrap}}
/* En inglés la 2.ª línea («WE INVEST IN ITS TRANSFORMATION.», ≈19,4 em) con nowrap pasaba del texto y la tapaba el lateral a 1280-1600 (V9 d16-en-1440-titular-cortado; w10-iv1): tope 3,6vw = que acabe antes del lateral desde 1100 hasta 1920. */
@media (min-width:1100px){html:lang(en) main > section.invertir-heroe .invertir-heroe__titulo{font-size:min(clamp(2rem,1rem + calc(3.06*var(--vw)),4.4rem),calc(3.6*var(--vw)))}}
.invertir-heroe__foto{position:relative;margin:0;grid-column:1/-1;grid-row:1}  /* la foto ocupa todo el héroe y el texto va encima (diapositivas 16 a 18) */
.invertir-hoja{display:flex;flex-direction:column;align-items:center;gap:var(--e-3);padding:var(--e-5);border:1px solid var(--linea-oro);text-align:center;font:500 var(--t-xs)/1.4 var(--fuente-texto);letter-spacing:.12em;text-transform:uppercase}  /* miniatura del acuerdo, paso 03 de la diapositiva 19 */
.invertir-hoja svg{width:2.6rem;height:2.6rem;color:var(--oro)}
.invertir-hoja-foto{margin:0}   /* D-PRIN-102: la miniatura a la medida de la diapositiva 19 (171 px en 352 de columna útil, alineada a la izquierda); como mucho ×1,3 de su tamaño */
.invertir-hoja-foto img{display:block;width:171px;max-width:100%;height:auto}   /* SEG diap. 19 (782): a su tamaño natural (171 px), sin estirarla: nítida */
.invertir-heroe__texto,.invertir-heroe__lado{grid-row:1}
.invertir-heroe__lado{position:relative;z-index:1}   /* por encima de la foto, que ocupa todo el héroe (si no, tapa el lema de la diapositiva 16) */
@media (min-width:1100px){.invertir-heroe__lado{background:rgba(5,5,5,.8)}}   /* la columna lateral de la diapositiva 16 va sobre panel oscuro: legible sobre la parte clara de la foto */
.invertir-heroe__texto{grid-column:1}
.invertir-heroe__lado{grid-column:3}
.invertir-heroe__foto img{width:100%;height:100%;object-fit:cover}
.invertir-heroe__foto::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--fondo) 0%,rgba(5,5,5,.78) 30%,rgba(5,5,5,.25) 62%,rgba(5,5,5,0) 85%)}
@media (min-width:1100px){main > section.invertir-heroe{min-height:min(56.25vw,calc(100svh - var(--alto-cabecera)))}main > section.invertir-heroe > .invertir-heroe__foto img{position:absolute;inset:0;object-position:50% 12%}}   /* D-PRIN-105: el 1.er héroe cabe en la 1.ª pantalla como la diapositiva 16 (16:9, y nunca más alto que la ventana bajo la cabecera); la foto (700×650) ya no marca el alto, lo cubre entero y se recorta por abajo para conservar las torres de la Sagrada Familia */
@media (min-width:1100px){main > section.invertir-heroe.invertir-heroe--entera{min-height:min(45.125vw,calc(100svh - var(--alto-cabecera)))}}
@media (min-width:1100px){.invertir-heroe--entera .invertir-heroe__texto{padding-block:var(--e-5)}}
@media (min-width:1100px) and (max-width:1439.98px){.invertir-heroe--entera{grid-template-columns:minmax(0,44fr) minmax(0,33fr) minmax(min-content,23fr)}.invertir-heroe--entera .invertir-heroe__lado{padding-left:var(--e-4)}}   /* W13 (d16 a 1100-1439): con la columna lateral al 14 % la cita se partía en líneas de 1-2 palabras y el héroe crecía más que su foto (V6 a 1280); mismas columnas que a 1440 */
@media (min-width:1100px) and (max-width:1439.98px){.invertir-heroe--entera .invertir-heroe__texto{padding-block:var(--e-4);gap:.5rem}}   /* W13 (d16 a 1100-1439): el texto medía 613 px a 1280 (medido en el pod, w13-diag16-con) y el héroe pasaba de la proporción de su foto (recorte de lados 5,8 %); menos aire entre sus piezas para que lo marque la foto */   /* W13 (d16 en inglés a 1440): el texto medía 664 px y empujaba el héroe por encima de la proporción de su foto (2,2 % de recorte); 1,5 rem de aire arriba y abajo en vez de 2 */
@media (min-width:1100px) and (max-width:1219.98px){.invertir-heroe--entera .invertir-heroe__titulo{font-size:calc((1rem + calc(3.06*var(--vw)))*.82)}.invertir-heroe--entera .invertir-heroe__texto .texto-serif{font-size:.9em}}   /* W13 (d16 a 1100-1219): aun compacto el texto medía 555 px a 1100 (es) frente a los 496 de la proporción de la foto (w13-diag16b); titular y subtítulo algo menores solo en ese tramo */
.invertir-heroe__lado{display:flex;flex-direction:column;justify-content:center;gap:var(--e-6);padding:var(--e-5) var(--margen) var(--e-5) var(--e-5)}
.banda-rasgos{padding-block:var(--e-5);background:var(--superficie);border-block:1px solid var(--linea-oro)}
.banda-rasgos .contenedor{display:flex;align-items:center;gap:var(--e-6);flex-wrap:wrap}
.banda-rasgos .rasgos{flex:1 1 40rem}
@media (max-width:899.98px){   /* SEG-VS-d16-390-07f318f7: en móvil los 4 roles van 2×2, icono sobre su texto y con los separadores dorados de la diapositiva (antes, una columna de 367 px sin separadores) */
  .banda-rasgos .rasgos--circulo{grid-template-columns:repeat(2,minmax(0,1fr));gap:0}
  .banda-rasgos .rasgos--circulo .rasgo{flex-direction:column;align-items:flex-start;gap:var(--e-2);padding:var(--e-4) var(--e-3)}
  .banda-rasgos .rasgos--circulo .rasgo:nth-child(even){border-left:1px solid var(--linea-oro)}
  .banda-rasgos .rasgos--circulo .rasgo:nth-child(n+3){border-top:1px solid var(--linea-oro)}
  .banda-rasgos .rasgos--circulo .rasgo__titulo{font-size:.78rem}
  .banda-rasgos .rasgos--circulo .rasgo__texto{font-size:.82rem}
}
.invertir-cabeza{display:grid;grid-template-columns:minmax(0,46fr) minmax(0,41fr) minmax(0,13fr);gap:var(--e-6);align-items:center;padding-block:var(--e-6)}
.invertir-cabeza__titulo{font-size:clamp(2.2rem,1rem + calc(3.06*var(--vw)),4.4rem);line-height:.95;text-transform:uppercase;color:var(--blanco);font-weight:600}
.invertir-cabeza .texto-serif{border-right:2px solid var(--oro);padding-right:var(--e-6)}
.columnas-pasos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--columnas,4),minmax(0,1fr));border-block:1px solid var(--linea-oro)}
.columna-paso{display:flex;flex-direction:column;gap:var(--e-4);padding-bottom:var(--e-5)}
.columna-paso+.columna-paso{border-left:1px solid var(--linea-oro)}
.columna-paso__cabeza{display:flex;align-items:center;gap:var(--e-4);padding:var(--e-4) var(--e-5) var(--e-3)}
.columna-paso__numero{font:500 clamp(2.2rem,1.4rem + 2vw,3.4rem)/1 var(--fuente-titulares);color:var(--oro)}
.columna-paso__cabeza>*{min-width:0}
/* El número no se encoge: con min-width 0 se metía debajo del título («01BÚSQUEDA»). */
.columna-paso__numero{flex:none}
.columna-paso__titulo{font-size:clamp(1rem,.8rem + calc(.6*var(--vw)),1.6rem);line-height:1.15;overflow-wrap:break-word;hyphens:auto;text-transform:uppercase;color:var(--blanco)}
.columna-paso__titulo small{display:block;margin-top:.3em;font:400 var(--t-xs)/1.3 var(--fuente-texto);letter-spacing:.08em;color:var(--texto)}
.columna-paso img{width:100%;aspect-ratio:422/258;object-fit:cover}
.columna-paso>p,.columna-paso>.marcas{padding-inline:var(--e-5)}
.columna-paso>p{font-size:clamp(.92rem,.85rem + .25vw,1.08rem)}
.columna-paso__icono{display:grid;place-items:center;width:4.4rem;height:4.4rem;margin:0 auto;border:1.5px solid var(--oro);border-radius:50%;color:var(--oro)}
.columna-paso__icono svg{width:2.2rem;height:2.2rem}
.columna-paso .marcas{margin-top:auto;padding-top:var(--e-3);border-top:1px solid transparent;border-image:linear-gradient(90deg,transparent var(--e-5),var(--oro) var(--e-5) calc(var(--e-5) + 2rem),transparent 0) 1}
.columnas-pasos--modelo .columna-paso__cabeza{min-height:4.6rem;padding-inline:var(--e-4);gap:var(--e-3)}
/* Seis columnas: el número algo menor para que el título quepa en dos líneas sin partir palabras. */
.columnas-pasos--modelo .columna-paso__numero{font-size:clamp(1.9rem,.6rem + 1.8vw,3.4rem)}
.columnas-pasos--modelo .columna-paso__titulo{font-size:clamp(.85rem,.55rem + calc(.55*var(--vw)),1.25rem)}
.columna-paso{min-width:0}
.columnas-pasos--modelo .columna-paso>p{font-size:clamp(.88rem,.82rem + .2vw,1rem)}
.cierre-rasgos{display:flex;align-items:center;gap:var(--e-6);flex-wrap:wrap;padding-block:var(--e-5)}
.cierre-rasgos .rasgos{flex:1 1 52rem}  /* con 44rem los cuatro rasgos se apretaban al lado del botón (títulos en tres líneas) y el botón no bajaba */
.invertir-valoracion{display:grid;grid-template-columns:minmax(0,61fr) minmax(0,39fr);border-block:1px solid var(--linea-oro)}
/* Diap. 18: a la izquierda el texto y, en su propia columna, la foto (que baja hasta detrás de los criterios); debajo, las tres ventajas. */
.invertir-valoracion__texto{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.27fr);gap:var(--e-5) 0}
.invertir-valoracion__texto .invertir-heroe__titulo{font-size:clamp(1.9rem,1rem + calc(3.06*var(--vw)),4.4rem)}
.invertir-valoracion__cuerpo,.invertir-valoracion__texto .rasgos{position:relative;z-index:1}
.invertir-valoracion__cuerpo{grid-column:1;grid-row:1;display:flex;flex-direction:column;justify-content:center;gap:var(--e-4);padding:var(--e-6) var(--e-5) 0 var(--margen)}
.invertir-valoracion__linea{display:block}
.invertir-valoracion__texto .invertir-heroe__titulo{text-shadow:0 0 14px rgba(0,0,0,.85),0 2px 20px rgba(0,0,0,.6)}   /* el final del titular («…MODELO») cae sobre la parte clara del balcón: contraste del dorado 2,0 con el fondo más claro (V6, d18 a 1440) */
.invertir-valoracion__linea.acento{padding-top:.22em;margin-top:-.22em}   /* el degradado dorado se pinta solo dentro de la caja de la línea (background-clip:text) y con line-height .9-.98 recortaba la tilde de la Ó de «INVERSIÓN» (V6, d18 a 390); el relleno la devuelve sin mover la línea */
.invertir-valoracion__foto{margin:0;position:relative;grid-column:1/-1;grid-row:1/3;min-height:0;overflow:hidden}   /* la foto cubre toda el área del texto y el titular va encima (maqueta d18): en una columna de 0,27fr quedaba tras el formulario, recortada y oscura (V6, 1440) */
.invertir-valoracion__foto::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,5,5,.9) 0%,rgba(5,5,5,.72) 38%,rgba(5,5,5,.1) 66%,rgba(5,5,5,0) 100%),linear-gradient(0deg,rgba(5,5,5,.88) 0%,rgba(5,5,5,.5) 22%,rgba(5,5,5,0) 45%),radial-gradient(ellipse 20% 18% at 91% 24%,rgba(5,5,5,.8) 0%,rgba(5,5,5,.55) 55%,rgba(5,5,5,0) 100%)}   /* velo local tras el final del titular («…MODELO»): el cielo del balcón le daba al dorado 2,3:1 (puente: ≥4,5) */
.invertir-valoracion__foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:right center}
.invertir-valoracion__texto .rasgos{grid-column:1/-1;--rasgos:5;padding-inline:var(--margen)}
.invertir-valoracion__texto .rasgos:not(.rasgos--circulo){grid-row:2;align-self:end;padding-bottom:var(--e-5);gap:0}
.invertir-valoracion__texto .rasgos .rasgo>svg{box-sizing:content-box;width:2.6rem;height:2.6rem;padding:1rem;border:1.5px solid var(--oro);border-radius:50%}
.invertir-valoracion__texto .rasgos .rasgo__titulo{font:400 clamp(.9rem,.7rem + .3vw,1.05rem)/1.4 var(--fuente-texto);letter-spacing:.05em}  /* 2-3 líneas por icono, no una etiqueta mínima */
.invertir-valoracion__texto .rasgos:not(.rasgos--circulo) .rasgo+.rasgo{background:linear-gradient(var(--linea-oro),var(--linea-oro)) left center/1px 70% no-repeat}
.invertir-valoracion__texto .rasgos--circulo{--rasgos:3;grid-row:3;padding-block:var(--e-5);border-top:1px solid var(--linea-oro)}
.invertir-valoracion__formulario{padding:var(--e-6) var(--margen) var(--e-5) var(--e-6);background:var(--superficie);border-left:1px solid var(--linea-suave)}
.invertir-valoracion__formulario .boton[type="submit"]{width:100%}
.invertir-acuerdo{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--linea-oro)}
.invertir-acuerdo>li{display:flex;flex-direction:column;gap:var(--e-4);padding:var(--e-5)}
.invertir-acuerdo>li+li{border-left:1px solid var(--linea-oro)}
.invertir-acuerdo .paso-cabeza__numero{width:auto;height:auto;border:0;font-size:clamp(2.2rem,1.4rem + 2vw,3.4rem);font-weight:500}
@media (max-width:1099.98px){
  .invertir-heroe{grid-template-columns:1fr;min-height:0}
  .invertir-heroe__foto,.invertir-heroe__texto,.invertir-heroe__lado{grid-column:auto;grid-row:auto}
  .invertir-heroe__foto{order:-1}
  .invertir-heroe__foto img{aspect-ratio:1600/722}   /* W13 (diap. 16 a 390, p10-estudio): la foto del Drive entera, con el sofá y la mesa de mármol; antes 16/10 la recortaba */
  .invertir-heroe__foto::after{background:linear-gradient(0deg,var(--fondo) 0%,rgba(5,5,5,0) 35%)}
  .invertir-heroe__texto{margin:0;padding:var(--e-4) var(--margen) var(--e-5)}
  .invertir-heroe__lado{flex-direction:row;flex-wrap:wrap;justify-content:flex-start;padding-inline:var(--margen);padding-top:0}   /* D-PRIN-088 (3): en fila, el center de escritorio sangraba los lemas (x=61 y 128 a 390) */
  .invertir-cabeza{grid-template-columns:1fr}
  .invertir-cabeza .texto-serif{border-right:0;padding-right:0}
  .columnas-pasos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .columna-paso:nth-child(odd){border-left:0}
  .columna-paso:nth-child(n+3){border-top:1px solid var(--linea-oro)}
  .invertir-acuerdo{grid-template-columns:repeat(2,minmax(0,1fr))}
  .invertir-acuerdo>li:nth-child(odd){border-left:0}
}
/* Diap. 18: a tablet (768-1099) la diapositiva sigue en dos columnas (el bloque de min-width:768px de más abajo); solo en móvil se apila */
@media (max-width:767.98px){
  .invertir-valoracion{grid-template-columns:1fr}
  .invertir-valoracion__formulario{border-left:0;padding-left:var(--margen)}
}
@media (max-width:599.98px){
  .columnas-pasos,.invertir-acuerdo{grid-template-columns:1fr}
  .columna-paso,.invertir-acuerdo>li{border-left:0!important}
  .columna-paso+.columna-paso{border-top:1px solid var(--linea-oro)}
  .invertir-valoracion__texto{grid-template-columns:1fr}
  .invertir-valoracion__texto>*{grid-column:1!important;grid-row:auto!important}
  .invertir-valoracion__foto{order:-1;position:relative}
  .invertir-valoracion__foto::after{background:linear-gradient(0deg,var(--fondo) 0%,rgba(5,5,5,0) 35%)}
  .invertir-valoracion__foto img{position:static;aspect-ratio:16/10}
  .invertir-valoracion__cuerpo{padding-inline:var(--margen)}
  .invertir-valoracion__texto .rasgos{--rasgos:2}
}
/* SEG diap 16 (1024): el héroe de invertir como la maqueta también entre 900 y 1099 px: foto a todo el ancho con el texto encima (16:9),
   lema, raya y cita en la columna de la derecha. Por debajo de 900 sigue apilado (foto entera arriba, sin fundido). */
@media (min-width:900px) and (max-width:1099.98px){
  .invertir-heroe--entera{grid-template-columns:48% minmax(0,1fr) minmax(min-content,17%);min-height:min(56.25vw,calc(100svh - var(--alto-cabecera)))}
  .invertir-heroe--entera .invertir-heroe__foto{grid-column:1/-1;grid-row:1;order:0}
  .invertir-heroe--entera .invertir-heroe__foto img{position:absolute;inset:0;aspect-ratio:auto;object-position:78% 50%}
  .invertir-heroe--entera .invertir-heroe__foto::after{background:linear-gradient(90deg,var(--fondo) 0%,rgba(5,5,5,.84) 38%,rgba(5,5,5,.52) 56%,rgba(5,5,5,.18) 72%,rgba(5,5,5,0) 90%)}   /* más cubierto bajo el titular dorado: el 10 % más claro del fondo le daba 2,3:1 (V6) */
  .invertir-heroe--entera .invertir-heroe__texto{grid-column:1;grid-row:1;margin-right:-8vw;padding:var(--e-5) 0 var(--e-5) var(--margen)}
  .invertir-heroe--entera .invertir-heroe__lado{grid-column:3;grid-row:1;flex-direction:column;flex-wrap:nowrap;justify-content:center;padding:var(--e-5) var(--margen) var(--e-5) var(--e-5);background:rgba(5,5,5,.8)}
}
/* Diap. 16 desde 900 px, pieza 1 (SEG-p35c-diap16-1024-1/-2, SEG-VS-d16-1440-*; V7/W10 vía puente, DECIDIDO 4113-b): medido por correlación contra DIAPOSITIVA 16 ESPAÑOL, la maqueta pinta la foto del héroe al 79 % del ancho,
   pegada a la derecha, con el héroe a 36vw de alto y la izquierda oscura bajo el texto (la Sagrada Família al 79 % del ancho y más pequeña, no «mucho mayor»); el titular a 3,6vw (1.ª línea 459 px a 1440, igual que la diapositiva).
   De 900 a 1099 el fundido de la izquierda es más corto y el lateral al 62 % (antes un bloque opaco al 80 % que tapaba el borde de la foto; con un degradado .5/.3 el contraste del lema bajaba de 12:1 a 3,8:1 en p99). Solo el héroe entero de Invertir. */
@media (min-width:900px){
  main > section.invertir-heroe.invertir-heroe--entera{min-height:36vw;background:var(--fondo)}
  main > section.invertir-heroe.invertir-heroe--entera > .invertir-heroe__foto img{inset:0 0 auto auto;width:79%;height:auto;aspect-ratio:1600/722}
  .invertir-heroe--entera{grid-template-columns:minmax(0,46fr) minmax(0,41fr) minmax(min-content,13fr)}
  .invertir-heroe--entera .invertir-heroe__titulo{font-size:calc(3.6*var(--vw))}
}
@media (min-width:900px) and (max-width:1099.98px){
  .invertir-heroe--entera{grid-template-columns:minmax(0,46fr) minmax(0,36fr) minmax(min-content,18fr)}
  .invertir-heroe--entera .invertir-heroe__lado{background:rgba(5,5,5,.62)}
  .invertir-heroe--entera .invertir-heroe__lado .lema-lateral,.invertir-heroe--entera .invertir-heroe__lado .cita-lateral{text-shadow:0 1px 10px rgba(0,0,0,.85)}
  .invertir-heroe--entera .invertir-heroe__foto::after{background:linear-gradient(90deg,var(--fondo) 0%,rgba(5,5,5,.8) 34%,rgba(5,5,5,.36) 52%,rgba(5,5,5,.1) 66%,rgba(5,5,5,0) 80%)}
}
/* Diap. 16 desde 900 px, pieza B (SEG-VS-d16-1440-aabf70cf; W10 → W7, DECIDIDO 4113-b): antetítulo y subtítulo del héroe en Jost 500 (la fuente del texto, ya cargada), tracking .16em y en una línea, como la diapositiva
   (hoy TS Didot 400 con .3em: el antetítulo cabía justo y el subtítulo en inglés pasaba a 2 líneas); anchos medidos contra la maqueta a 1440 (antetítulo 426 px, subtítulo 557 px): 16,6 y 17,7 px, en vw. Solo el héroe entero de Invertir. */
@media (min-width:900px){
  .invertir-heroe--entera .invertir-heroe__texto>.rotulo{font-family:var(--fuente-texto);font-weight:500;letter-spacing:.16em;white-space:nowrap;text-wrap:nowrap}
  .invertir-heroe--entera .invertir-heroe__texto .rotulo--oro{font-size:max(12px,1.15vw)}
  .invertir-heroe--entera .invertir-heroe__texto>.rotulo:not(.rotulo--oro){font-size:max(12.5px,1.23vw)}
}
/* Diap. 16 desde 900 px, pieza C (lateral; SEG-VS-d16-1440-c8366752 y SEG-p35c-diap16-1024-2; W10 → W7, DECIDIDO 4113-b; V7 pt317: lateral 226 px frente a ≈174 de la diapositiva y la cita en 6 líneas frente a 5):
   la columna del lema y la cita al 12 % del ancho (la maqueta: el panel empieza en x=1470 de 1672 → 12,1 %), con el aire en vw y lema y cita a su escala (lema .8vw, cita 1,1vw a 1,3 de interlineado). Sin tocar color ni velo. Solo el héroe entero de Invertir. */
@media (min-width:900px){
  .invertir-heroe--entera{grid-template-columns:minmax(0,46fr) minmax(0,42fr) minmax(0,12fr)}
  .invertir-heroe--entera .invertir-heroe__lado{gap:2vw;padding:1.5vw 1vw}
  .invertir-heroe--entera .invertir-heroe__lado .lema-lateral{font-size:max(10px,.8vw)}
  .invertir-heroe--entera .invertir-heroe__lado .cita-lateral{font-size:max(11.5px,1.02vw);line-height:1.3}
}
@media (min-width:900px) and (max-width:1099.98px){
  .invertir-heroe--entera{grid-template-columns:minmax(0,46fr) minmax(0,38fr) minmax(0,16fr)}
}
/* Diap. 16 desde 1100 px, pieza D (alturas; SEG-VS-d16-1440-8ed4feed, DECIDIDO 4206/4113-b; medido en vivo pt329 a 1440: héroe 572 + banda de rasgos 129 + franja 86 = 787 px frente a 724 (810 menos la cabecera) en la diapositiva,
   cortes 86-624 / 624-740 / 740-810): menos aire arriba y abajo del texto del héroe, en la banda de los cuatro roles y en la franja. Solo la página Invertir (héroe entero y lo que le sigue). */
@media (min-width:1100px){
  .invertir-heroe--entera .invertir-heroe__texto{padding-block:1vw;gap:.9vw}
  .invertir-heroe--entera + .banda-rasgos{padding-block:1.2vw}
  .invertir-heroe--entera + .banda-rasgos + .franja .franja__fila{min-height:4.85vw}
}
/* Diap. 16 desde 1100 px, fundido de la foto (V7/V9, fila SEG-p35c-diap16-1024-1 y «foto más a la izquierda»): la foto del héroe empezaba a verse desde x≈21 % y la diapositiva la deja oscura hasta x≈39 % del ancho;
   el fundido de la izquierda llega más lejos (oscuro hasta el 36 %, transparente a partir del 62 %). W7 pt416+ (DECIDIDO 4464): la foto vuelve a verse desde x≈21 % como en la diapositiva (antes ≈37-42 %): .88 al 21 %, .66 al 30 %, .48 al 40 % (párrafo ≥4,5:1 p99), transparente a partir del 62 %. También da más fondo al titular dorado. Solo el héroe entero de Invertir. */
@media (min-width:1100px){
  .invertir-heroe--entera .invertir-heroe__foto::after{background:linear-gradient(90deg,var(--fondo) 0%,rgba(5,5,5,.88) 21%,rgba(5,5,5,.66) 30%,rgba(5,5,5,.48) 40%,rgba(5,5,5,.26) 48%,rgba(5,5,5,.08) 56%,rgba(5,5,5,0) 62%)}
  html[lang=en] main > section.invertir-heroe--entera .invertir-heroe__titulo{white-space:normal;text-wrap:balance;max-width:min(100%,24ch);font-size:calc(3.1*var(--vw))}   /* titular en inglés en 4 líneas dentro de la columna del texto (la diapositiva solo trae el español, 3 líneas): su final dorado ya no cae sobre el cielo claro */
}
@media (max-width:899.98px){.invertir-heroe--entera .invertir-heroe__foto::after{background:none}}   /* sin el fundido negro de abajo: la foto se ve entera */
/* W8 (D-PRIN-073, WCAG 1.4.10): la columna única del héroe y de la valoración crecía hasta la palabra más larga del titular (32 px: «TRANSFORMACIÓN.», «НЕДВИЖИМОСТИ.») y la página medía 333-371 px a 320; de 381 px arriba no cambia nada. */
@media (max-width:380px){
  .invertir-heroe,.invertir-valoracion__texto{grid-template-columns:minmax(0,1fr)}
  .invertir-heroe__titulo,.invertir-valoracion__texto .invertir-heroe__titulo{font-size:clamp(1.5rem,calc(8.2*var(--vw)),2rem)}
}

/* ---------- Gracias (formularios de inmobiliaria) ---------- */
.gracias-inmo{padding-block:var(--e-10);text-align:center}
.gracias-inmo .icono--hecho{width:4.4rem;height:4.4rem;margin:0 auto var(--e-5);color:var(--oro)}
.gracias-inmo .texto-serif{max-width:36em;margin:var(--e-5) auto var(--e-6)}

/* 03.4 Construction: titular blanco y subtítulo espaciado, como su pantalla aprobada */
.servicio--construccion .servicio__titulo{background:none;-webkit-text-fill-color:currentColor;color:var(--blanco);letter-spacing:.03em}
.servicio--construccion .servicio__titulo::after{display:none}
.servicio--construccion .servicio__subtitulo{font-size:clamp(.8rem,.55rem + calc(.7*var(--vw)),1.3rem);letter-spacing:.3em;line-height:1.4}
.servicio--construccion .servicio__foto{align-self:start}  /* la foto de la maqueta (1705x922) entera y apaisada, no recortada de los lados a ~1,5:1 por la altura de la columna del texto */
.servicio--construccion .servicio__foto img{height:auto;min-height:0;aspect-ratio:1705/922}
/* SEG-V7-d6-hueco-1024 (V9/coord, V3): a 900-1099 px la columna de texto (4 rasgos 2×2 y 2 botones) es más alta que la foto y dejaba un hueco negro de ~250 px bajo ella; ahí la foto llena la celda (recortada), como en el resto de servicios. Desde 1100 y por debajo de 900 sigue entera. */
@media (min-width:900px) and (max-width:1099.98px){.servicio--construccion .servicio__foto{align-self:stretch}.servicio--construccion .servicio__foto img{height:100%;aspect-ratio:auto;min-height:18rem}}
@media (min-width:1000px) and (max-width:1100.98px){:is(:lang(es),:lang(en)) .servicio--construccion .servicio__texto .rasgos{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--e-2)}}   /* diap. 6 a 1024: los 4 rasgos en una fila como la maqueta (Codex d06-filas, SEG-p1c-masia-planos-diap6-1024-2); solo es/en y desde 1000 px (a 900 en inglés «MANAGEMENT» tocaba «CONTROL»); en las otras lenguas y por debajo sigue el 2×2 */
/* Diapositiva 6 (W9): el subtítulo en UNA línea a 1440 (la diapositiva lo escribe en ~37 % del ancho); solo es/en, donde cabe. */
@media (min-width:1100px){:is(:lang(es),:lang(en)) .servicio--construccion .servicio__subtitulo{white-space:nowrap;font-size:clamp(.8rem,calc(1.17*var(--vw)),1.3rem)}}
.servicio--construccion .servicio__numero::after{content:"";flex:1;height:1px;background:var(--linea)}
/* Diapositiva 6 a 1100 o más (W12; puente 21-oct): la columna del texto se mide como la maqueta para que acabe con la foto entera (antes
   quedaba una banda negra de ~80 px bajo la foto a 1440). Medidas de la maqueta a 1440: párrafo a ≈16,2 px con paso de 19,5 px (8 líneas),
   botones de 45 px; en unidades de 1/1440 del ancho, con el tope de --ancho-maximo, como crece la foto. */
@media (min-width:1100px){
  .servicio--construccion{--u:calc(min(100vw, var(--ancho-maximo)) / 1440)}
  .servicio--construccion .servicio__texto{gap:calc(9 * var(--u));padding-top:calc(11.5 * var(--u));padding-bottom:0}
  .servicio--construccion .servicio__numero{font-size:calc(20 * var(--u))}
  .servicio--construccion .servicio__intro{font-size:calc(18.2 * var(--u));line-height:calc(19.5 * var(--u))}
  .servicio--construccion .servicio__texto .rasgos{margin-top:0;gap:calc(16 * var(--u))}
  .servicio--construccion .servicio__texto .rasgo{gap:calc(8 * var(--u))}
  .servicio--construccion .servicio__texto .rasgo svg{width:calc(56 * var(--u));height:calc(56 * var(--u))}   /* diap. 6: iconos de ~38 px a 1440 (antes ~24) */
  .servicio--construccion .servicio__texto .rasgo__titulo{font-size:calc(13 * var(--u));font-family:var(--fuente-titulares);font-variation-settings:"opsz" var(--opsz-titulares)}   /* diap. 6: rótulos de los rasgos con serifa (Codex 9544, fila 2) */
  /* los botones, abajo: la columna mide lo que la foto (la fila la marca la foto entera) y acaban con ella */
  .servicio--construccion .servicio__botones{margin-top:auto}
  .servicio--construccion .servicio__botones .boton{min-height:calc(45 * var(--u));padding-block:0;font-size:calc(13 * var(--u))}
}

/* Las cifras en Bodoni Moda: con el tamaño óptico de los titulares, el trazo fino del 4 casi desaparece (se lee «1»). */
.cuadrante__numero,.servicio__numero,.servicio-tarjeta__numero,.servicios__numero,.paso-tarjeta__numero,.paso-cabeza__numero,.columna-paso__numero{font-variation-settings:"opsz" 9;font-weight:500}

/* Pantallas con formulario propio: consulta y visita privada, demostración de Filmbase */
.pagina-formulario{max-width:46rem;padding-block:var(--e-9) var(--e-10)}
.pagina-formulario__cabeza{margin-bottom:var(--e-6)}
.pagina-formulario__cabeza .texto-serif{margin:var(--e-4) 0 0;color:var(--texto-suave)}
.pagina-formulario__ficha{margin:var(--e-3) 0 0;color:var(--oro);font:500 var(--t-s)/1.3 var(--fuente-texto);letter-spacing:.12em;text-transform:uppercase}
.pagina-formulario .formulario__aviso{margin-bottom:var(--e-5)}
.pagina-formulario .formulario__aviso ul{margin:0;padding-left:1.2em}
.pagina-formulario .formulario__aviso--error{border-left-color:#ff7b6b;background:rgba(255,123,107,.08)}
.formulario__nota{margin:0;color:var(--texto-suave);font-size:var(--t-xs)}
/* D-PRIN-074/075 (V16, barrido 20-oct): en fr y ru los titulares de Invertir partían palabra con guion de sílaba (hyphens:auto de .titular).
   Letra medida (v16-inv-diag-96ebd53b1) con la que la palabra más larga cabe entera en su columna; solo desde 1100 px, donde salían. */
@media (min-width:1100px){
  html:is([lang=fr],[lang=ru]) .invertir-valoracion__texto .invertir-heroe__titulo{font-size:min(calc(2.9*var(--vw)),4.4rem)}
}
@media (min-width:1100px) and (max-width:1199px){
  html[lang=ru] .invertir-heroe__titulo{font-size:calc(4.3*var(--vw))}
  html:is([lang=fr],[lang=ru]) .columnas-pasos .columna-paso__titulo{font-size:17.6px}
}
/* D-PRIN-088 (2): el texto de ayuda del reparto de beneficios (54 letras en es) cabe en su campo a 390 y en la rejilla de dos columnas a 599 (e2e recorrido-invertir-390); solo ≤900, el escritorio queda igual (1440: fila aparte); solo baja la letra del placeholder, no la del texto escrito */
@media (max-width:900px){
  .campo__caja{display:block;min-width:0;container-type:inline-size}
  .campo__caja>input::placeholder{font-size:clamp(11px,3.6cqi,16px)}   /* la letra sigue al ancho del campo (cqi), no al de la pantalla: a 599 el campo es más estrecho que a 520 */
}
/* D-PRIN-089 (fr, 1440): el titular del formulario de Invertir no se parte con guiones en trozos y el sello del paso 04 (solo esa página, clase propia) no deja un «·» colgado */
html[lang=fr] .invertir-valoracion__texto .invertir-heroe__titulo{hyphens:manual;overflow-wrap:normal}   /* sin font-size: manda el de D-PRIN-074/075 (min(2.9vw,4.4rem) desde 1100 px, medido contra la diapo) */
html[lang=fr] .rotulo--sello{white-space:nowrap;letter-spacing:.06em;font-size:.85em}
/* D-PRIN-093b: de 1100 a 1279 px la columna del sello es más estrecha (226 px a 1100: con .06em y 85 % medía 253 y se salía) */
@media (max-width:1279px){html[lang=fr] .rotulo--sello{letter-spacing:.02em;font-size:.8em}}

/* SEG diap. 17 (arreglo 2.ª revisión): «Cómo funciona» de Invertir según la maqueta; solo esta sección */
@media (min-width:1100px){.invertir-como .invertir-cabeza{grid-template-columns:minmax(0,54fr) minmax(0,34fr) minmax(0,12fr)}}
.invertir-como .invertir-cabeza .rotulo{letter-spacing:.06em;white-space:nowrap}
.invertir-como .invertir-cabeza .rotulo--oro{margin-bottom:var(--e-2)}
.invertir-como .invertir-cabeza .rotulo:not(.rotulo--oro){letter-spacing:.14em;font-size:clamp(.7rem,.5rem + .62vw,1.2rem)}
.invertir-como .invertir-cabeza__titulo{font-size:clamp(2.6rem,.4rem + calc(4.2*var(--vw)),5.2rem);line-height:.95;font-weight:700;font-variation-settings:"opsz" 11}   /* la maqueta (d17) lo lleva en negrita: con 600 y opsz 18 el Bodoni Moda sale de trazo fino y ≈4 % más estrecho (W5, OK ajeno a 208980944) */
.invertir-como .columna-paso{position:relative;gap:var(--e-3)}
.invertir-como .columna-paso__cabeza{box-sizing:border-box;min-height:max(4.5rem,5vw);background:#0d0b09}   /* W13 (Codex 9562, puente): en la diapositiva 17 la cabecera es una franja opaca (≈72 px a 1440) y la foto va debajo ENTERA (≈360×230), no recortada bajo una banda translúcida */
.invertir-como .columna-paso img{aspect-ratio:1000/640;object-position:center}
.invertir-como .invertir-cabeza .lema-lateral{color:var(--texto)}
/* Diapositiva 16 (SEG-cx-p33-1-diap16-1024-3): el lema del lado del héroe de Invertir va en BLANCO (en lo servido, dorado); la cita sigue como está. */
.invertir-heroe--entera .invertir-heroe__lado .lema-lateral{color:var(--blanco)}
.invertir-como .columna-paso .marcas{margin-top:0;padding-top:0;border:0;border-image:none;gap:.4rem}
.invertir-como .columna-paso .marcas li{font-size:clamp(.9rem,.82rem + .25vw,1.05rem);font-family:var(--fuente-titulares)}   /* W13 (DECIDIDO 3500): en la diapositiva 17 las marcas de las tarjetas van en serif, como su texto (.texto-serif); antes iban en palo seco */
@media (min-width:1100px){.invertir-como .columna-paso>p,.invertir-como .columna-paso .marcas li{font-size:clamp(.8rem,.975vw,1.08rem);line-height:1.4}}   /* W13 (V3 rev2, SEG-V3-rev2-d17-texto-columnas-1440): en la diapositiva 17 el texto de las 4 columnas mide ≈16,5 px a 1672 (≈14,2 a 1440: 1vw) y el párrafo 1 ocupa 3 líneas; a 1440 iba a 17,2 px (4 líneas, viñetas partidas). Solo escritorio: a 390 no hay maqueta */
@media (min-width:1100px){.invertir-como .invertir-cabeza{padding-block:var(--e-4)}.invertir-como .franja__fila{min-height:0;padding-block:var(--e-3)}.invertir-como .cierre-rasgos{padding-block:var(--e-4)}.invertir-como .columna-paso{padding-bottom:var(--e-3)}}   /* W13 (DECIDIDO 4072, pieza 2 de SEG-V3-rev2-d17-texto-columnas-1440): la sección «Cómo funciona» más compacta desde 1100 como la diapositiva (una pantalla): relleno de la cabecera, de la franja, del cierre y bajo las columnas; antes 958 px a 1440 */
@media (min-width:1100px){.invertir-como .invertir-cabeza .texto-serif{font-size:clamp(.95rem,1.2vw,1.2rem)}.invertir-como .columna-paso{gap:var(--e-2);padding-bottom:0}.invertir-como .columna-paso>p{margin-bottom:0;line-height:1.4}.invertir-como .columna-paso .marcas{gap:.2rem}.invertir-como .columna-paso__cabeza{padding-block:.75rem .5rem}.invertir-como .columna-paso img{aspect-ratio:1000/620}.invertir-como .cierre-rasgos{padding-block:var(--e-3)}.invertir-como .cierre-rasgos .boton{padding-block:.5rem}}   /* W13 (DECIDIDO 4206, d17 pieza 3): la sección «Cómo funciona» a la altura de la diapositiva (≈740 px a 1440, una pantalla): párrafo de la banda a 1,2vw (4 líneas como la diapositiva), huecos y relleno de las columnas, foto 1000/620, cierre y botón más bajos; la letra de las columnas (14 px) NO cambia */
.invertir-como .cierre-rasgos .rasgos--circulo .rasgo__titulo,.invertir-como .cierre-rasgos .rasgos--circulo .rasgo__texto{font-family:var(--fuente-titulares)}
.invertir-como .cierre-rasgos .rasgos--circulo .rasgo__texto{font-size:clamp(.8rem,.7rem + .2vw,.95rem);line-height:1.3}
.invertir-como .cierre-rasgos .rasgos--circulo .rasgo{gap:var(--e-3)}
.invertir-como .cierre-rasgos .rasgos--circulo .rasgo>svg{padding:.6rem}
.invertir-como .cierre-rasgos .rasgos--circulo .rasgo+.rasgo{padding-left:var(--e-3)}
/* W13 (e2e invertir-390, lista 1): en una columna (<900) las filas del cierre de la d17 no llevan sangría, como el resto de listas con círculo (D-PRIN-088) */
@media (max-width:899.98px){.invertir-como .cierre-rasgos .rasgos--circulo .rasgo+.rasgo{background:none;padding-left:0}}
.invertir-como .cierre-rasgos .rasgos{flex:1 1 46rem}
/* d17 a 900-1099 (W13, SEG-cl-v7-3-diap17-1024-1/-2; DECIDIDO 3558): «Empieza tu inversión» en la MISMA fila que UN EQUIPO / UNA INVERSIÓN / UN OBJETIVO, a la derecha, como la diapositiva (con 46 rem de base los rasgos no dejaban sitio y el botón caía solo a una 2.ª fila). */
@media (min-width:900px) and (max-width:1099.98px){.invertir-como .cierre-rasgos{flex-wrap:nowrap;gap:var(--e-4)}.invertir-como .cierre-rasgos .rasgos{flex:1 1 0;min-width:0}.invertir-como .cierre-rasgos .boton{flex:none}}
.invertir-como .cierre-rasgos .rasgo>svg path[d^="M10 42V30"]{fill:currentColor}
.invertir-como .cierre-rasgos .boton{background:var(--oro);background-image:none;box-shadow:none;border-radius:0;color:#0a0a0a;flex:none;padding-inline:var(--e-5);font-size:var(--t-s)}
@media (max-width:1099.98px){
  .invertir-como .invertir-cabeza .rotulo{white-space:normal}
}
@media (max-width:599.98px){
  .invertir-como .invertir-cabeza .rotulo--oro{letter-spacing:.04em;font-size:clamp(.65rem,.2rem + 1.7vw,.8rem);white-space:nowrap;margin-bottom:var(--e-3)}
}
/* SEG diap. 17 (691): cabecera sobre el interior del Drive, columna del lema a la derecha con filete dorado, los cuatro pasos en una fila desde 900 px y la franja inferior dentro de la sección */
.invertir-como__banda{position:relative;isolation:isolate;overflow:hidden}
.invertir-como__fondo{position:absolute;z-index:-1;inset:0;margin:0}
.invertir-como__fondo img{width:100%;height:100%;object-fit:cover;object-position:50% 35%}
/* W13 (SEG-R3-d17-06f00fe9/-d09a6064, lámina del VS rev3): la maqueta enseña el salón oscuro con las molduras y solo un trozo del ventanal a la derecha; la foto entera ponía los tres ventanales de fondo. Desde 1100, la foto ampliada sobre la pared con molduras (tramo del 45 al 83 % de su ancho) */
@media (min-width:600px){.invertir-como__fondo img{object-position:50% 30%;transform:scale(2.6);transform-origin:73.1% 30%}}   /* W13 (W5, d17 servida): el recorte del salón con molduras también de 600 a 1099; a 1024 se veía la ciudad del ventanal */
@media (min-width:1100px){.invertir-como__fondo::after{background:linear-gradient(90deg,rgba(5,5,5,.9) 0%,rgba(5,5,5,.62) 50%,rgba(5,5,5,.48) 100%)}}   /* W13 (W5): a 1440 el salón quedaba casi negro; la diapositiva deja ver sus molduras a la derecha */
#como-funciona .rasgo__texto{text-wrap:balance}   /* W13 (W5): «…para crear valor» dejaba «valor» solo en su línea */
.invertir-como__fondo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,5,5,.9) 0%,rgba(5,5,5,.62) 55%,rgba(5,5,5,.8) 100%)}
.invertir-como .franja{border-top:1px solid var(--linea-oro)}
@media (min-width:900px) and (max-width:1099.98px){
  .invertir-como .invertir-cabeza{grid-template-columns:minmax(0,52fr) minmax(0,34fr) minmax(0,14fr);gap:var(--e-5);padding-block:var(--e-5)}
  .invertir-como .invertir-cabeza .texto-serif{border-right:0;padding-right:0;font-size:clamp(.85rem,.5rem + .6vw,1rem)}
  .invertir-como .invertir-cabeza .lema-lateral{border-left:2px solid var(--oro);padding-left:var(--e-4);font-size:var(--t-xs);letter-spacing:.12em}
  .invertir-como .columnas-pasos{grid-template-columns:repeat(4,minmax(0,1fr))}
  .invertir-como .columna-paso:nth-child(odd){border-left:1px solid var(--linea-oro)}
  .invertir-como .columna-paso:first-child{border-left:0}
  .invertir-como .columna-paso:nth-child(n+3){border-top:0}
  .invertir-como .columna-paso__cabeza{padding-inline:var(--e-3);gap:var(--e-3)}
  .invertir-como .columna-paso__titulo{font-size:clamp(.85rem,.4rem + calc(.8*var(--vw)),1rem)}
  .invertir-como .columna-paso>p,.invertir-como .columna-paso>.marcas{padding-inline:var(--e-3)}
}
/* El pie no repite el lema ni las ciudades en la página de Invertir: la franja ya los lleva en el idioma de la página */
main:has(.invertir-como)~.pie .pie__frase,main:has(.invertir-como)~.pie .pie__ciudades{display:none}
/* Diap. 18 (¿Encaja tu propiedad?) a escritorio: la diapositiva entera, 16:9, se ve de una vez a 1440×810 (sección + franja);
   todo en vw para que a 1280 y 1920 sea la misma composición. */
@media (min-width:768px){
  .invertir-valoracion{min-height:46.9vw}
  .invertir-valoracion__foto img{object-position:88% 50%}   /* la ventana con la Sagrada Familia, no el sofá del centro */
  .invertir-valoracion+.franja{min-height:4.6rem;padding-block:0}
  .invertir-valoracion+.franja .franja__fila{min-height:4.6rem;padding-block:0}
  .invertir-valoracion__cuerpo{padding-top:1.5vw;gap:.6vw}
  .invertir-valoracion__texto{row-gap:0}   /* 16:9 a 1440×810: el formulario con su casilla de consentimiento no debe pasar de la altura de la diapositiva */
  .invertir-valoracion__cuerpo .rotulo--oro{font-size:1.05vw;letter-spacing:.2em}
  .invertir-valoracion__texto .invertir-heroe__titulo{line-height:.9;white-space:nowrap;margin:0}
  .invertir-valoracion__linea:first-child{margin-bottom:.14em}   /* el ¿ baja y pisaba la línea de debajo */
  .invertir-valoracion__texto .invertir-heroe__titulo .acento{color:#f8ca5e;background:none;-webkit-text-fill-color:currentColor}
  .invertir-valoracion__cuerpo>.rotulo:not(.rotulo--oro){font-size:1.13vw;letter-spacing:.2em;line-height:1.55;max-width:38em}
  .invertir-valoracion__cuerpo .texto-serif{font-size:1.2vw;line-height:1.28;max-width:29em}
  /* Criterios: cinco iconos en círculo grande, texto fino y sin negrita */
  .invertir-valoracion__texto .rasgos:not(.rasgos--circulo){padding-inline:var(--margen) 1.2vw;padding-bottom:.7vw}
  .invertir-valoracion__texto .rasgos:not(.rasgos--circulo) .rasgo{gap:.7vw;padding-inline:.5vw}
  .invertir-valoracion__texto .rasgos:not(.rasgos--circulo) .rasgo>svg{width:2.9vw;height:2.9vw;padding:.9vw;border-width:1.5px}
  .invertir-valoracion__texto .rasgos:not(.rasgos--circulo) .rasgo__titulo{font-size:max(15px,calc(1.05*var(--vw)));font-weight:300;letter-spacing:.04em;line-height:1.25;text-transform:uppercase}
  /* Ventajas: tres bloques de dos líneas con icono grande y separadores */
  .invertir-valoracion__texto .rasgos--circulo{padding-block:.7vw;padding-inline:var(--margen) 1vw;align-items:center}
  .invertir-valoracion__texto .rasgos--circulo .rasgo{align-items:center;gap:.8vw}
  .invertir-valoracion__texto .rasgos--circulo .rasgo+.rasgo{padding-left:.8vw}
  .invertir-valoracion__texto .rasgos--circulo .rasgo>svg{width:2vw;height:2vw;padding:.8vw}
  .invertir-valoracion__texto .rasgos--circulo .rasgo__titulo{font-size:calc(.95*var(--vw));letter-spacing:.02em;text-transform:uppercase;color:var(--amarillo-18)}
  .invertir-valoracion__texto .rasgos--circulo .rasgo__texto{font:400 .94vw/1.25 var(--fuente-titulares);margin:0}
  /* Color de la maqueta: amarillo-dorado liso, y el botón liso (sin degradado ni sombra) */
  .invertir-valoracion{--amarillo-18:#f8ca5e}
  .invertir-valoracion__formulario .boton--oro{background:#fcd070;box-shadow:none}
  /* Formulario: cabecera en una línea, campos bajos y las dos subidas como en la maqueta */
  .invertir-valoracion__formulario{padding:1.3vw 2.2vw .7vw 2.1vw}
  .invertir-valoracion__formulario .titular--4{font-size:calc(2.05*var(--vw));line-height:1.05;white-space:nowrap;margin:0}
  .invertir-valoracion__formulario>.rotulo{font-size:.78vw;letter-spacing:.13em;margin:.3vw 0 .6vw!important;white-space:nowrap}
  .invertir-valoracion__formulario .formulario--dos{row-gap:.4vw;column-gap:1.4vw}
  .invertir-valoracion__formulario .campo{gap:.2vw;font-size:.95vw}
  .invertir-valoracion__formulario .campo input,.invertir-valoracion__formulario .campo select,.invertir-valoracion__formulario .campo textarea{min-height:2.05vw;padding:.3vw .9vw;font-size:.95vw}
  .invertir-valoracion__formulario .campo textarea{min-height:0;height:3.75vw;resize:none}   /* «Información adicional» como el recuadro de la diap. 18 (~54 px a 1440, antes 2.3vw = una línea); la sección sigue en 16:9 (DECIDIDO 3504) */
  .invertir-valoracion__formulario .casilla{margin:0;gap:.6vw;font-size:.8vw;line-height:1.25}
  .invertir-valoracion__formulario .casilla input{width:.9vw;height:.9vw;margin-top:.1vw}
  .invertir-valoracion__formulario .campo--subida .subida__caja{min-height:2.05vw;padding:.4vw .9vw;font-size:.9vw}
  .invertir-valoracion__formulario .formulario--dos{grid-auto-flow:row dense}
  .invertir-valoracion__formulario .campo--fotos{grid-column:1}
  .invertir-valoracion__formulario .campo--planos{grid-column:2;grid-row:span 2}
  .invertir-valoracion__formulario .campo--planos .subida{flex:1;display:flex}
  .invertir-valoracion__formulario .campo--planos .subida__caja{flex:1;flex-direction:column}
  .invertir-valoracion__formulario .campo--subida .subida__caja svg.icono{width:2.2vw;height:2.2vw}   /* algo mayor, como la diap. 18 (W13, fb39436c8; el blanco va más abajo) */
  .invertir-valoracion__formulario .subida__texto{display:flex;flex-direction:column;align-items:center;line-height:1.3}
  .invertir-valoracion__formulario .campo--fotos .subida__texto{align-items:flex-start}
  .invertir-valoracion__formulario .subida__texto small{font-size:.78vw;color:var(--texto-suave)}
  .invertir-valoracion__formulario .botones{margin-top:.2vw}
  .invertir-valoracion__formulario .boton[type="submit"]{min-height:2.8vw;font-size:1.1vw}
  .invertir-valoracion__formulario form>.rotulo--texto{font-size:.72vw;letter-spacing:.1em;white-space:nowrap;margin:0}
  /* W12 d18 (segunda mirada de Codex frente a DIAPOSITIVA 18 ESPAÑOL a 1440): titular a la medida de la maqueta («EN NUESTRO MODELO» 611 px en la diapositiva:
     ya no llega al cielo del balcón y sobra el velo local que lo oscurecía); subtítulo y párrafo más ligeros (Didot de texto, opsz 11); iconos de criterio en círculos
     de ~61 px con el dibujo mayor y rótulos de ~12,5 px en 500; en las ventajas, el dibujo mayor; flechas de subida en blanco, como la maqueta. */
  .invertir-valoracion__texto .invertir-heroe__titulo{font-size:calc(3.69*var(--vw));font-weight:800;font-variation-settings:"opsz" 6;-webkit-text-stroke:.8px currentColor;letter-spacing:-.015em}   /* en negrita y de trazo de texto como la diapositiva (con 600 y el opsz automático salía fino; medida de W13: 607 px). W11 d18 (SEG-cl-v7b-5-diap18-1440-1): los finos medían ≈1 px frente a ≈2,5-3 px de la maqueta; con 800, opsz 6 y un trazo de .8 px el ancho sigue en 613 px (= maqueta) */
  .invertir-valoracion__foto::after{background:linear-gradient(90deg,rgba(5,5,5,.9) 0%,rgba(5,5,5,.72) 38%,rgba(5,5,5,.1) 66%,rgba(5,5,5,0) 100%),linear-gradient(0deg,rgba(5,5,5,.88) 0%,rgba(5,5,5,.5) 22%,rgba(5,5,5,0) 45%)}
  .invertir-valoracion__cuerpo>.rotulo:not(.rotulo--oro){font-size:1.02vw;text-wrap:balance}   /* dos líneas parejas («…EN LA REFORMA / DE PROPIEDADES…»): partía «REFORMA DE» encima de la foto (W13) */
  .invertir-valoracion__cuerpo .texto-serif,.invertir-valoracion__texto .rasgos--circulo .rasgo__texto{font-variation-settings:"opsz" 11}
  .invertir-valoracion__texto .rasgos:not(.rasgos--circulo) .rasgo>svg{width:2.6vw;height:2.6vw;padding:.8vw}
  .invertir-valoracion__texto .rasgos:not(.rasgos--circulo) .rasgo__titulo{font-size:max(12px,calc(.88*var(--vw)));font-weight:500;letter-spacing:.02em}
  .invertir-valoracion__texto .rasgos--circulo .rasgo>svg{width:2.4vw;height:2.4vw;padding:.7vw}
  .invertir-valoracion__formulario .campo--subida .subida__caja svg.icono{color:var(--texto)}
}
/* SEG diap. 18 a tablet (768-1099, VS 1582737): la diapositiva sigue en dos columnas como la maqueta (texto y foto a la izquierda, formulario a la
   derecha en la misma pantalla). La composición es la del bloque de arriba, en vw; aquí solo los suelos de letra, los hilos de los criterios y la foto. */
@media (min-width:768px) and (max-width:1099.98px){
  .invertir-valoracion{min-height:0}
  .invertir-valoracion__foto::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,5,5,.9) 0%,rgba(5,5,5,.72) 38%,rgba(5,5,5,.1) 66%,rgba(5,5,5,0) 100%),linear-gradient(0deg,rgba(5,5,5,.88) 0%,rgba(5,5,5,.5) 22%,rgba(5,5,5,0) 45%),radial-gradient(ellipse 20% 18% at 91% 24%,rgba(5,5,5,.8) 0%,rgba(5,5,5,.55) 55%,rgba(5,5,5,0) 100%)}   /* a tablet «…MODELO» sí cae sobre el cielo del ventanal: aquí vuelve el velo local (V6, contraste ≥4,5); a ≥1100 ya no llega y se quita */
  .invertir-valoracion__texto .rasgos{grid-template-columns:repeat(var(--rasgos),minmax(0,1fr));row-gap:0;gap:0}   /* las reglas de 899 las pasaban a 2 columnas / 1 */
  .invertir-valoracion__texto .rasgos:not(.rasgos--circulo) .rasgo+.rasgo{background:linear-gradient(var(--linea-oro),var(--linea-oro)) left center/1px 70% no-repeat}
  .invertir-valoracion__texto .rasgos--circulo .rasgo+.rasgo{background:linear-gradient(var(--linea-oro),var(--linea-oro)) left center/1px 80% no-repeat;padding-left:1.2vw}
  .invertir-valoracion__texto .invertir-heroe__titulo{font-size:clamp(1.9rem,min(calc(7.9*var(--vw)) - 31.5px,.4rem + calc(4.2*var(--vw))),3.2rem);line-height:1.06;margin:0}   /* a 768 el titular salía a 5,0 % del ancho y la diapositiva lo lleva a 3,6 %: baja en rampa hasta el suelo de 1.9rem (30 px = 4,0 % a 768) y vuelve a la fórmula de antes en 1024 (min: desde ahí no cambia nada) */
  .invertir-valoracion__linea:first-child{margin-bottom:.28em}   /* el rabo del ¿ rozaba la P de PROPIEDAD a 1024 y 768 (V16, SEG-VS-d18-1024-57a2c4ab) */
  .invertir-valoracion__cuerpo .rotulo--oro{font-size:max(10px,1.05vw)}
  .invertir-valoracion__cuerpo>.rotulo:not(.rotulo--oro){font-size:max(10px,1.13vw);max-width:none;margin-top:max(6px,.9vw)}   /* el subtítulo no queda pegado al titular a 768 */
  .invertir-valoracion__cuerpo .texto-serif{font-size:max(12px,calc(1.3*var(--vw)));max-width:27em}
  .invertir-valoracion__texto .rasgos:not(.rasgos--circulo){padding-inline:var(--margen) .5vw}
  .invertir-valoracion__texto .rasgos:not(.rasgos--circulo) .rasgo{gap:.9vw;padding-inline:1.1vw}
  .invertir-valoracion__texto .rasgos:not(.rasgos--circulo) .rasgo>svg{width:3.4vw;height:3.4vw;padding:1.1vw}
  .invertir-valoracion__texto .rasgos:not(.rasgos--circulo) .rasgo__titulo{font-size:max(9.5px,calc(1.12*var(--vw)));letter-spacing:.01em;hyphens:none;overflow-wrap:normal}
  .invertir-valoracion__texto .rasgos--circulo .rasgo>svg{width:2.9vw;height:2.9vw;padding:1vw}
  .invertir-valoracion__texto .rasgos--circulo .rasgo__titulo{font-size:max(9px,calc(1.05*var(--vw)))}
  .invertir-valoracion__texto .rasgos--circulo .rasgo__texto{font-size:max(10px,1.15vw)}
  .invertir-valoracion__formulario{padding:2vw 2.4vw 1.4vw}
  .invertir-valoracion__formulario .titular--4{font-size:calc(2.05*var(--vw))}
  .invertir-valoracion__formulario>.rotulo{font-size:max(8px,.85vw);letter-spacing:.06em;white-space:normal}
  .invertir-valoracion__formulario .formulario--dos{row-gap:1vw;column-gap:1.6vw}
  .invertir-valoracion__formulario .campo{font-size:max(9.5px,1.1vw);gap:.5vw}
  .invertir-valoracion__formulario .campo input,.invertir-valoracion__formulario .campo select,.invertir-valoracion__formulario .campo textarea{min-height:3.4vw;font-size:max(9.5px,1.1vw);padding:.4vw 1vw}
  .invertir-valoracion__formulario .campo select{padding-inline:.8vw 1.8vw;letter-spacing:0}
  .invertir-valoracion__formulario .campo textarea{min-height:5vw}
  .invertir-valoracion__formulario .campo--subida .subida__caja{min-height:3.6vw;font-size:max(9px,1.05vw)}
  .invertir-valoracion__formulario .campo--subida .subida__caja svg.icono{width:max(14px,2.2vw);height:max(14px,2.2vw)}
  .invertir-valoracion__formulario .subida__texto small{font-size:max(8px,.9vw)}
  .invertir-valoracion__formulario .casilla{font-size:max(9px,1vw);gap:.8vw;line-height:1.3}
  .invertir-valoracion__formulario .casilla input{width:max(11px,1.3vw);height:max(11px,1.3vw);margin-top:0}
  .invertir-valoracion__formulario .boton[type="submit"]{min-height:4vw;font-size:max(9px,1.1vw);letter-spacing:.05em;padding-inline:1vw;gap:.8vw}
  .invertir-valoracion__formulario form>.rotulo--texto{font-size:max(7.5px,.8vw);letter-spacing:.05em;white-space:normal;text-align:center}
}
/* SEG diap. 18 (franja inferior) a 768-899: solo la que va tras la valoración (no es común), en UNA línea con los «|» dorados entre las ciudades; el cuerpo de letra baja con el ancho */
@media (min-width:768px) and (max-width:899.98px){
  .invertir-valoracion+.franja--inmo .franja__fila{flex-wrap:nowrap;justify-content:space-between;column-gap:1.4vw;letter-spacing:.03em;font-size:1.25vw;padding-inline:2vw}
  .invertir-valoracion+.franja--inmo .franja__lista,.invertir-valoracion+.franja--inmo .franja__centro,.invertir-valoracion+.franja--inmo .franja__derecha{flex-wrap:nowrap;white-space:nowrap}
  .invertir-valoracion+.franja--inmo .franja__centro{order:0;flex-basis:auto;letter-spacing:.06em}
  .invertir-valoracion+.franja--inmo .franja__derecha{word-spacing:.2em}
  .invertir-valoracion+.franja--inmo .franja__lista{column-gap:0}
  .invertir-valoracion+.franja--inmo .franja__lista li+li::before{display:inline;margin-inline:.6em}
}
/* Diap. 19, paso 01: los datos registrales, en una columna estrecha (284 px de ayuda en 241 a 1280): letra menor, también la escrita. */
.invertir-acuerdo>li:first-child .campo input[name="registry_data"]{font-size:.8rem}
/* SEG diap. 19 (661): el sello de DocuSign (logotipo en recuadro y el sello en tres líneas) y la caja «Tras la firma» del paso 04 */
.invertir-sello{display:flex;align-items:center;gap:var(--e-3)}
.invertir-sello .docusign{padding:var(--e-3) var(--e-4);border:1px solid var(--linea-oro)}
.invertir-sello .rotulo--sello{font-size:0;display:flex;flex-direction:column;align-items:flex-start;margin:0;white-space:normal}
.invertir-acuerdo>li{min-width:0}.invertir-sello{flex-wrap:wrap;min-width:0}.invertir-sello .rotulo--sello{min-width:0;max-width:100%}.invertir-sello .rotulo--sello span{overflow-wrap:anywhere}.tras-firma{min-width:0}.tras-firma__botones .boton{min-width:0}   /* a 768, 1024 y 1100 el sello «Seguro · Fiable · Internacional» y «Descargar acuerdo firmado» se salían de la tarjeta y daban scroll horizontal (855/768, 1060/1024, 1115/1100; fila SEG-VS-d17-1024-414a6e0b) */
.invertir-sello .rotulo--sello svg{display:none}
.invertir-sello .rotulo--sello span{display:block;font-size:var(--t-xs)}
.invertir-tras-firma{display:flex;flex-direction:column;gap:var(--e-3);padding:var(--e-4);border:1px solid var(--linea-oro)}
.invertir-tras-firma>p{margin:0}
/* SEG diap. 19 (693): el héroe del acuerdo de Invertir como la maqueta (foto nítida de 2041×770 en su columna, sin velo, titular en 2 líneas, cita lateral en 3), los campos del paso 01 y la tabla del paso 02 */
.invertir-paso1{grid-template-columns:repeat(10,minmax(0,1fr));column-gap:var(--e-3);row-gap:var(--e-3)}
.invertir-paso1 .campo{grid-column:span 5;gap:var(--e-1);font-size:var(--t-s)}
.invertir-paso1 .campo input,.invertir-paso1 .campo select{min-height:2.4rem;padding:.4rem .5rem;font-size:.76rem}   /* 0,76 rem = 12,2 px: la letra de la maqueta en su escala (1672 px) */
.invertir-paso1 .campo--ancho{grid-column:1/-1}
/* W11 (puente 21-oct, OK parcial de W8 sobre un recorte): campos como la maqueta a 1440 (esquinas de 4 px, relleno gris, borde fino, rótulo y alto menores, filas más juntas) */
.invertir-paso1{row-gap:var(--e-2)}
.invertir-paso1 .campo{gap:.25rem}
.invertir-paso1 .campo .campo__rotulo{font-size:.72rem}
.invertir-paso1 .campo input,.invertir-paso1 .campo select{min-height:1.95rem;border-radius:4px;background:#222221;border-color:rgba(255,255,255,.16)}
.invertir-paso1 .campo input::placeholder{color:rgba(255,255,255,.72);opacity:1}
.invertir-acuerdo>li>.paso-cabeza h3{font-size:clamp(.8rem,.4rem + calc(.7*var(--vw)),1rem);letter-spacing:.04em;font-weight:400;text-wrap:balance}
.invertir-acuerdo>li>.texto-serif{font:400 clamp(.78rem,.5rem + .4vw,.86rem)/1.32 var(--fuente-titulares);max-width:19.5em;color:var(--texto)}   /* la entradilla de la maqueta: serif regular, pequeña y en dos líneas */
.invertir-acuerdo>li>.paso-cabeza .paso-cabeza__numero{font-size:clamp(1.8rem,1rem + 1.4vw,2.5rem);font-weight:600}
.invertir-acuerdo>li .boton--oro{background:#fdd771;background-image:none;box-shadow:none;border-radius:4px;color:#0a0806;min-height:2.4rem;padding-block:.5rem}   /* CONTINUAR de la maqueta: amarillo plano, sin degradado ni brillo */
.invertir-paso1{row-gap:.15rem}
.invertir-paso1 .campo{gap:.2rem}
/* W11 (V6 + puente 21-oct): como la maqueta, Propietario/Empresa (más ancho) y DNI comparten fila; el texto de ayuda de la maqueta es pequeño y cabe entero */
.invertir-paso1 .campo:nth-child(1){grid-column:span 6}
.invertir-paso1 .campo:nth-child(2){grid-column:span 4}
/* 1100-1365: la letra no baja; la tarjeta cede margen lateral y el campo algo de relleno para que «Tu nombre completo o empresa» (163 px) quepa entero (a 1280, formulario de 272 → ≈304 px; la maqueta escalada, 291) */
@media (min-width:1100px) and (max-width:1439.98px){.invertir-acuerdo>li{padding-inline:.5rem}.invertir-paso1 .campo input,.invertir-paso1 .campo select{padding-inline:.35rem}}
@media (min-width:768px) and (max-width:899.98px){.invertir-paso1 .campo input,.invertir-paso1 .campo select{padding-inline:.35rem;font-size:.7rem}}   /* W11 (d19 a 768-899, SEG-p7-colab-diap19-768-1): con los 4 pasos en fila el campo mide 184 px y «Tu nombre completo o empresa» salía cortado («…o empres»); mismo padding que de 1100 a 1439 y letra de .7rem (la base es .76rem) solo en este tramo */
@media (min-width:768px) and (max-width:899.98px){.invertir-acuerdo>li:first-child .campo input[name="registry_data"]{font-size:.6rem}}   /* W11 (SEG-p7-colab-diap19-768-1): el campo de datos registrales llevaba .8rem aparte y su placeholder «Referencia catastral / Datos registrales» salía cortado a 768-899 */
@media (min-width:768px) and (max-width:899.98px){html:not(:lang(es)) .invertir-acuerdo>li:first-child .campo input[name="registry_data"]{font-size:.54rem}}   /* W11: «Cadastral reference / Land registry details» (en) y sus equivalentes ca/fr/ru son más largos que el español y a .6rem aún se cortaban */
@media (min-width:1100px){
  .invertir-heroe--acuerdo{grid-template-columns:48% minmax(0,1fr) 14%;min-height:0}
  .invertir-heroe--acuerdo .invertir-heroe__texto{margin-right:0;padding-block:var(--e-5);gap:var(--e-2)}
  .invertir-heroe--acuerdo .invertir-heroe__foto{grid-column:2;margin:0}
  .invertir-heroe--acuerdo .invertir-heroe__foto img{position:absolute;inset:0;object-position:50% 50%}
  .invertir-heroe--acuerdo .invertir-heroe__foto::after{background:linear-gradient(90deg,var(--fondo) 0%,rgba(5,5,5,0) 25%)}
  .invertir-heroe--acuerdo .invertir-heroe__titulo{font-size:calc(3.4*var(--vw))}
  .invertir-heroe--acuerdo .invertir-heroe__titulo .acento{display:block}
  .invertir-heroe--acuerdo .invertir-heroe__lado{grid-column:3;padding:var(--e-4);gap:var(--e-4)}
  .invertir-heroe--acuerdo .lema-lateral{letter-spacing:.06em;font-size:1rem;line-height:1.35;color:var(--blanco)}   /* SEG-W11-d19-heroe-lado: en la diapositiva 19 el lema del lado va en blanco y del cuerpo de la cita, no en oro de 12 px */
  .invertir-heroe--acuerdo .cita-lateral{font-size:1.05rem}
}
/* El paso 02 es una tabla de dos columnas (etiqueta | valor), con el valor como texto y no como caja con asa de redimensionar */
.casilla__aviso{margin:var(--e-2) 0 0;font-size:var(--t-s);color:var(--oro)}.casilla__aviso[hidden]{display:none}   /* aviso del paso 02 de Invertir: «Continuar» pide marcar la casilla de las condiciones */
.casilla input[aria-invalid="true"]{outline:2px solid var(--oro);outline-offset:2px}
.invertir-acuerdo .formulario--filas{gap:0;border:1px solid var(--linea)}
.invertir-acuerdo .formulario--filas .campo{grid-template-columns:minmax(0,45%) minmax(0,1fr);gap:0;align-items:stretch;font-size:var(--t-s)}
.invertir-acuerdo .formulario--filas .campo+.campo{border-top:1px solid var(--linea)}
.invertir-acuerdo .formulario--filas .campo__rotulo{padding:.5rem .6rem;border-right:1px solid var(--linea)}
.invertir-acuerdo .formulario--filas .campo input,.invertir-acuerdo .formulario--filas .campo textarea{min-height:0;height:100%;padding:.5rem .6rem;border:0;border-radius:0;background:transparent;resize:none;field-sizing:content;font-size:var(--t-s)}
.invertir-acuerdo .formulario--filas .campo textarea{min-height:0}
.invertir-acuerdo .formulario--filas .campo ::placeholder{color:var(--texto);opacity:1}
/* W11 (paso 02 de la diap. 19, lámina de W13 y mía a 1440): la tabla de condiciones como la maqueta (letra pequeña, rótulos en una línea, filas bajas, esquinas de 4 px, borde fino y relleno gris), la casilla gris redondeada y la entradilla en dos líneas */
.invertir-acuerdo .formulario--filas{border-radius:4px;border-color:rgba(255,255,255,.14);background:#171716;overflow:hidden}
.invertir-acuerdo .formulario--filas .campo{grid-template-columns:minmax(0,59%) minmax(0,1fr);font-size:.72rem}
.invertir-acuerdo .formulario--filas .campo+.campo{border-top-color:rgba(255,255,255,.1)}
.invertir-acuerdo .formulario--filas .campo__rotulo{padding:.35rem .6rem;border-right-color:rgba(255,255,255,.1);line-height:1.25}
.invertir-acuerdo .formulario--filas .campo input,.invertir-acuerdo .formulario--filas .campo textarea{padding:.35rem .6rem;font-size:.72rem;line-height:1.25}
.invertir-acuerdo>li:nth-child(n+2)>.texto-serif{max-width:none}
.invertir-acuerdo .casilla{display:flex;align-items:flex-start;gap:.6rem;font:400 .85rem/1.3 var(--fuente-titulares);color:var(--texto)}
.invertir-acuerdo .casilla input{appearance:none;flex:none;width:1.25rem;height:1.25rem;margin:0;border:1px solid rgba(255,255,255,.3);border-radius:4px;background:#3a3a39;display:grid;place-items:center;cursor:pointer}
.invertir-acuerdo .casilla input:checked{background:#8d8d8b;border-color:#8d8d8b}
.invertir-acuerdo .casilla input:checked::after{content:"";width:.3rem;height:.6rem;margin-top:-.1rem;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.invertir-acuerdo .casilla input:focus-visible{outline:2px solid var(--oro);outline-offset:2px}
.cita-lateral__frase{display:block}
@media (min-width:1100px){
  .invertir-heroe--acuerdo .invertir-heroe__texto .rotulo:not(.rotulo--oro){letter-spacing:.2em;font-size:var(--t-s);white-space:nowrap}
  .invertir-heroe--acuerdo .invertir-heroe__texto .texto-serif{max-width:none;font-size:1.1rem}
  .invertir-acuerdo .boton--indicativo{letter-spacing:.04em;font-size:var(--t-xs);white-space:nowrap}
}
.invertir-tras-firma .boton-documento{line-height:1.5}
/* SEG diap. 19 (782): los cuatro pasos en una fila desde 900 px (cada uno con su columna) y, fuera del castellano, la hoja del acuerdo con logo, título y ciudad como la maqueta */
@media (min-width:900px) and (max-width:1099.98px){
  .invertir-acuerdo{grid-template-columns:repeat(4,minmax(0,1fr))}
  .invertir-acuerdo>li{padding:var(--e-4) var(--e-3)}
  .invertir-acuerdo>li:nth-child(odd){border-left:1px solid var(--linea-oro)}
  .invertir-acuerdo>li:first-child{border-left:0}
}
/* SEG diap. 19 (784): bajo 1100 px la foto del héroe del acuerdo se ve entera (2041×770: cuadro, planta, flores y butacón), sin recortarla a 16:10 */
@media (max-width:1099.98px){.invertir-heroe--acuerdo .invertir-heroe__foto img{aspect-ratio:2041/770;height:auto;object-fit:contain}}
/* SEG diap. 19 (783): la miniatura con «Ver acuerdo» a su derecha y «Descargar PDF» (botón con borde) junto a él; los cuatro pasos en fila también de 768 a 899 px */
/* W11 (V7, 2.ª revisión de la 19): «la 19 de la diapositiva cabe en una pantalla». A ≥1100 px los cuatro pasos miden lo de la diapositiva (≈ 407 px a 1440; antes 691, fijados por el paso 04):
   paddings y huecos menores, ticks y sello compactos, «Tras la firma» como caja baja con los dos botones en FILA, campos y tabla de filas bajas */
@media (min-width:1100px){
  .invertir-acuerdo>li{padding:var(--e-3) var(--e-4);gap:var(--e-2)}
  .invertir-acuerdo .marcas{gap:.2rem}
  .invertir-acuerdo .marcas li{font-size:.7rem;line-height:1.25;gap:.5rem}
  .invertir-acuerdo .marcas svg{width:.95rem;height:.95rem}
  .invertir-acuerdo .invertir-sello{padding:var(--e-2) var(--e-3);gap:var(--e-3)}
  .invertir-acuerdo .invertir-sello .docusign{font-size:1.15rem}
  .invertir-acuerdo>li>.boton,.invertir-acuerdo>li>.boton--indicativo{min-height:2rem;padding-block:.35rem}
  .invertir-acuerdo .tras-firma{margin-top:0;padding:var(--e-2) var(--e-3);gap:var(--e-1) var(--e-3)}
  .invertir-acuerdo .tras-firma>svg{width:1.8rem;height:1.8rem}
  .invertir-acuerdo .tras-firma h4{margin:.1em 0}
  .invertir-acuerdo .tras-firma__botones{flex-wrap:nowrap;gap:var(--e-2)}
  .invertir-acuerdo .tras-firma__botones .boton{flex:1 1 0;min-width:0;min-height:0;padding:.3rem .45rem;gap:.3rem;font-size:.58rem;line-height:1.15;letter-spacing:.03em;text-align:left}
  .invertir-acuerdo .tras-firma__botones .boton svg{width:.9rem;height:.9rem}
  .invertir-paso1 .campo input,.invertir-paso1 .campo select{min-height:1.7rem;padding-block:.2rem}
  .invertir-paso1 .campo{gap:.15rem}
  .invertir-acuerdo .formulario--filas .campo__rotulo,.invertir-acuerdo .formulario--filas .campo input,.invertir-acuerdo .formulario--filas .campo textarea{padding-block:.25rem}
  .invertir-doc>.invertir-hoja-foto{flex-basis:38%}
  .invertir-heroe--acuerdo .invertir-heroe__texto{padding-block:var(--e-3)}
  .invertir-acuerdo .invertir-sello{padding:.3rem var(--e-3)}
  .invertir-acuerdo .tras-firma p,.invertir-acuerdo .tras-firma>div>p:last-child{font-size:.62rem;line-height:1.3}
  .invertir-acuerdo .tras-firma h4{font-size:.72rem}
  .invertir-paso1{row-gap:0}
  .invertir-acuerdo~.cierre-rasgos{padding-block:var(--e-2);gap:var(--e-4)}
  .invertir-acuerdo~.cierre-rasgos .rasgos--circulo .rasgo>svg{padding:.45rem;width:1.4rem;height:1.4rem}
  .invertir-acuerdo~.cierre-rasgos .rasgos--circulo .rasgo__titulo{font-size:.68rem}
  .invertir-acuerdo~.cierre-rasgos .rasgos--circulo .rasgo__texto{font-size:.68rem;line-height:1.25}
  .invertir-acuerdo~.franja .franja__fila{min-height:0;padding-block:.55rem}   /* el pie de la diapositiva 19 mide ≈ 35 px a 1440 (antes 75) */
}
/* W11 (diap. 19, paso 04, 2.ª mirada 21-oct 23:5x): como la diapositiva, la lista en serif al cuerpo de la entradilla (no en palo de .7rem), DocuSign sin recuadro propio con un filete blanco que lo separa del sello, el sello en blanco y pequeño (no en oro), y «Descargar acuerdo firmado» más ancho que «Área de propietarios» para que quepa en un renglón */
@media (min-width:1100px){#paso-acuerdo-4 .marcas li{font:400 .8rem/1.3 var(--fuente-titulares);color:var(--texto)}#paso-acuerdo-4 .invertir-sello .docusign{padding:0;border:0;font-size:1.6rem}#paso-acuerdo-4 .invertir-sello .rotulo--sello{padding-left:var(--e-3);border-left:1px solid rgba(255,255,255,.35);color:var(--blanco)}#paso-acuerdo-4 .invertir-sello .rotulo--sello span{font-size:.55rem;letter-spacing:.08em;line-height:1.3}#paso-acuerdo-4 .tras-firma__botones .boton:first-child{flex:1.6 1 0}}
/* W11 (V9/Codex SEG-cx-p33-1-diap19-390-1, 22-oct 01:4x): por debajo de 1100 también, la lista del paso 04 en serif y DocuSign sin recuadro propio con el sello en blanco, como la diapositiva (los tamaños de ≥1100 no cambian) */
#paso-acuerdo-4 .marcas li{font-family:var(--fuente-titulares);color:var(--texto)}#paso-acuerdo-4 .invertir-sello .docusign{padding:0;border:0}#paso-acuerdo-4 .invertir-sello .rotulo--sello{padding-left:var(--e-3);border-left:1px solid rgba(255,255,255,.35);color:var(--blanco)}
/* W11 (SEG-p7-colab-diap19-768-2/-7/-9, criterio 3558: a 768/1024 la composición de la diapositiva; puente 22-oct 02:4x): de 700 a 1099 px, con los 4 pasos en fila (columna de ≈183 px a 768), el sello de DocuSign lleva su texto a la DERECHA del logo (antes debajo) y el rótulo «TRAS LA FIRMA» cabe en 2 líneas como mucho (antes 3 a 768). Solo ese tramo: 390 y ≥1100 no cambian. */
@media (min-width:700px) and (max-width:1099.98px){
  #paso-acuerdo-4 .invertir-sello{flex-wrap:nowrap;gap:.4rem;padding:.4rem .4rem}
  #paso-acuerdo-4 .invertir-sello .docusign{font-size:1.05rem;white-space:nowrap}
  #paso-acuerdo-4 .invertir-sello .rotulo--sello{padding-left:.45rem}
  #paso-acuerdo-4 .invertir-sello .rotulo--sello span{font-size:.47rem;letter-spacing:.02em;overflow-wrap:normal}
  #paso-acuerdo-4 .tras-firma>svg{width:1.8rem;height:1.8rem}
  #paso-acuerdo-4 .tras-firma .rotulo{font-size:.62rem;letter-spacing:.16em}
}
/* W11 (V7, 2.ª revisión de la 19, 21-oct): como la diapositiva, la hoja a la izquierda (≈42 % de la columna) y a su DERECHA, en una columna, VER ACUERDO, DESCARGAR PDF y la nota del documento debajo */
.invertir-doc{display:flex;flex-wrap:nowrap;align-items:center;gap:var(--e-3)}
.invertir-doc>.invertir-hoja-foto,.invertir-doc>.invertir-hoja{flex:0 0 171px;max-width:45%}
.invertir-doc__botones{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:stretch;gap:var(--e-2)}
.invertir-doc__botones .boton,.invertir-doc__botones .boton-documento{width:100%;justify-content:center;padding:.6rem .5rem;font-size:.66rem;letter-spacing:.05em;gap:.4rem;white-space:nowrap;min-height:0}
.invertir-doc__botones .boton svg,.invertir-doc__botones .boton-documento svg{width:1.1rem;height:1.1rem}
.invertir-doc__botones .boton-documento{flex-direction:row-reverse}   /* en la diapositiva el icono de descarga va a la derecha del texto */
.invertir-doc__botones .invertir-nota{padding:var(--e-2);font-size:.66rem;line-height:1.35}
/* W11 (SEG-V9-d19-768-paso03-estrecho, 22-oct 02:5x): de 700 a 899 px, con los 4 pasos en fila, la columna del paso 03 mide ≈150 px: la hoja a ≈63 px y los botones y la nota a ≈70 px (la nota a una palabra por línea, los botones en 2 líneas). En ese tramo la hoja va arriba a su ancho y debajo, a todo el ancho de la columna, VER ACUERDO, DESCARGAR PDF y la nota. Solo ese tramo: 390 (una columna) y ≥900 no cambian. */
@media (min-width:700px) and (max-width:899.98px){
  .invertir-doc{flex-direction:column;align-items:stretch}
  .invertir-doc>.invertir-hoja-foto,.invertir-doc>.invertir-hoja{flex:0 0 auto;align-self:flex-start;max-width:100%}
  .invertir-doc__botones{flex:0 0 auto}
}
/* W11 (puente 02:5x, paso 04 a 768): de 700 a 1099 px los botones del paso 04 (FIRMAR ACUERDO CON DOCUSIGN, DESCARGAR ACUERDO FIRMADO, ÁREA DE PROPIETARIOS) con el texto en 2 líneas como mucho (antes 3 a 768) y la flecha/icono más pequeños. Siguen apagados (DECIDIDO 651) y apilados: la columna mide 150-215 px. Solo ese tramo: 390 y ≥1100 no cambian. */
@media (min-width:700px) and (max-width:1099.98px){
  #paso-acuerdo-4>.boton--indicativo{font-size:.62rem;letter-spacing:.02em;padding-inline:.5rem;gap:.3rem;line-height:1.2}
  #paso-acuerdo-4 .tras-firma__botones .boton{padding:.3rem .4rem;font-size:.56rem;line-height:1.15;letter-spacing:.02em;min-height:0;gap:.25rem}
  #paso-acuerdo-4 .tras-firma__botones .boton svg,#paso-acuerdo-4>.boton--indicativo svg{width:.85rem;height:.85rem}
  #paso-acuerdo-4 .tras-firma .rotulo{font-size:.56rem;letter-spacing:.1em}   /* «TRAS LA FIRMA» en 1 línea si cabe (puente) */
}
@media (min-width:768px) and (max-width:1439.98px){.invertir-doc>.invertir-hoja-foto,.invertir-doc>.invertir-hoja{flex-basis:42%}}
.invertir-acuerdo a.boton-documento--oro{white-space:nowrap}
/* W11 (21-oct, SEG-p7-colab-diap19-768-2 y -9, medido en lo servido pt182b): a 768 los 4 pasos van en una fila (como la maqueta) y cada columna mide ~175 px: los valores del paso 02 («850.000 €», «1.300.000 €», «Sí (12 meses)») salían cortados en un campo de 71 px y «Ver acuerdo» desbordaba su botón (95/88 es, 103/82 en). Rótulo sobre valor y botones del documento más compactos; a 900-1099 un hueco menos de relleno en el valor. */
@media (min-width:768px) and (max-width:899.98px){
  .invertir-acuerdo .formulario--filas .campo{grid-template-columns:minmax(0,1fr)}
  .invertir-acuerdo .formulario--filas .campo__rotulo{border-right:0;border-bottom:1px solid var(--linea)}
  .invertir-doc__botones>.boton,.invertir-doc__botones>.boton-documento{padding-inline:.3rem;gap:.25rem;font-size:.66rem;letter-spacing:0}
  .invertir-doc__botones>.boton svg,.invertir-doc__botones>.boton-documento svg{width:.8rem;height:.8rem}
  .invertir-doc__botones>.boton,.invertir-doc__botones>a.boton-documento--oro{white-space:normal;text-align:center;line-height:1.15;justify-content:center}   /* «View agreement» (en) mide 96 px en una columna de 82: en dos renglones */
}
@media (min-width:900px) and (max-width:1099.98px){
  .invertir-acuerdo .formulario--filas .campo input,.invertir-acuerdo .formulario--filas .campo select{padding-inline:.35rem}
  .invertir-doc__botones>.boton,.invertir-doc__botones>.boton-documento{padding-inline:.3rem;letter-spacing:0}
  .invertir-doc__botones>.boton,.invertir-doc__botones>a.boton-documento--oro{white-space:normal;text-align:center;line-height:1.15;justify-content:center}
  .invertir-paso1{grid-template-columns:minmax(0,1fr)}.invertir-paso1 .campo,.invertir-paso1 .campo:nth-child(1),.invertir-paso1 .campo:nth-child(2){grid-column:auto}   /* SEG-p22x2-diap19-1024-1: a 1024 cada campo del paso 01 a lo ancho de su columna (como de 768 a 899); en pareja cortaban «Tu nombre completo o empresa», el teléfono y «Selecciona el tipo» */
}
@media (min-width:768px) and (max-width:899.98px){
  .invertir-acuerdo{grid-template-columns:repeat(4,minmax(0,1fr))}
  .invertir-acuerdo>li{padding:var(--e-4) var(--e-2)}
  .invertir-acuerdo>li:nth-child(odd){border-left:1px solid var(--linea-oro)}
  .invertir-acuerdo>li:first-child{border-left:0}
  .invertir-paso1{grid-template-columns:minmax(0,1fr)}
  .invertir-paso1 .campo,.invertir-paso1 .campo:nth-child(1),.invertir-paso1 .campo:nth-child(2){grid-column:auto}
}
.invertir-hoja{width:171px;max-width:100%;min-height:270px;justify-content:center;gap:var(--e-3);padding:var(--e-4);background:#f4efe6;color:#1a1a1a;border:0}
.invertir-hoja__logo{display:block;width:2.6rem;height:2.6rem;object-fit:contain}
.invertir-hoja__titulo{font:600 .68rem/1.4 var(--fuente-texto);letter-spacing:.1em}
.invertir-hoja__ciudad{font:500 .6rem/1.4 var(--fuente-texto);letter-spacing:.2em;color:#6b5b2e}
.invertir-hoja__marca{font:600 .62rem/1.3 var(--fuente-texto);letter-spacing:.1em;text-transform:uppercase}   /* W11 (SEG-cx-p20-4-diap19-390-2): la portada del acuerdo en los idiomas sin la imagen de la maqueta (es) lleva el nombre, el descriptor y el lema como ella */
.invertir-hoja__descriptor{font:500 .4rem/1.4 var(--fuente-texto);letter-spacing:.08em;text-transform:uppercase;text-wrap:balance}
.invertir-hoja__lema{font:500 .42rem/1.4 var(--fuente-texto);letter-spacing:.1em;text-transform:uppercase;color:#6b5b2e;text-wrap:balance}
/* W11 (SEG-cx-p18-3-diap19-768-1, V9: «S enorme y título de palo seco; la maqueta: marca THE SEDUCTION y título serif»): la hoja en los idiomas sin la imagen de la maqueta (es) con su diseño: fondo claro neutro, S pequeña, marca en serif, descriptor fino, título en serif y mayor entre dos filetes dorados, ciudad en negrita y lema fino. Solo esa hoja (.invertir-hoja); 1440 y 390 en es no cambian (usa la imagen). */
.invertir-hoja{background:#f3f3f1;gap:.3rem;padding:.9rem .5rem}
.invertir-hoja__logo{width:1.5rem;height:1.5rem}
.invertir-hoja__marca{font:400 .8rem/1.2 var(--fuente-titulares);letter-spacing:.04em;margin-top:.1rem}
.invertir-hoja__descriptor{color:#1a1a1a;font-size:.38rem;letter-spacing:.06em}
.invertir-hoja__titulo{font:400 1.02rem/1.15 var(--fuente-titulares);letter-spacing:.01em;padding-block:.8rem;margin-block:.5rem;position:relative}
.invertir-hoja__titulo::before,.invertir-hoja__titulo::after{content:"";position:absolute;left:50%;width:40%;height:2px;background:#e0b24c;transform:translateX(-50%)}
.invertir-hoja__titulo::before{top:0}
.invertir-hoja__titulo::after{bottom:0}
.invertir-hoja__ciudad{font:700 .62rem/1.3 var(--fuente-texto);letter-spacing:.06em;color:#1a1a1a}
.invertir-hoja__lema{color:#1a1a1a;font-size:.4rem;letter-spacing:.06em}

.ficha__galeria[hidden]{display:none}   /* Masía (d14): las galerías no se ven en la página, solo en el visor (botones del héroe con data-visor) */

/* ---------- Círculo de Socios (diap. 10), cola común 2044: composición de la maqueta a 1440, 1024 y 768 ----------
   Todo con .acuerdo-heroe--socios, .acuerdo-pasos--socios, .firmado--socios y .franja-socios: Vender y Invertir quedan como estaban. */
/* Titular con sus cortes de la maqueta («Únete a nuestra red / de socios inmobiliarios / EN BARCELONA»); el <br> solo cuenta desde 1100 px. */
@media (max-width:1099.98px){.acuerdo-heroe--socios .acuerdo-heroe__titulo br{display:none}}
@media (min-width:1100px){
  /* Hero (la foto, el texto y las medidas son de c7ca99367, medidas en el pod): aquí solo «EN BARCELONA» en su línea y el panel lateral. */
  .acuerdo-heroe--socios .acuerdo-heroe__titulo .acento{display:block}
  /* Panel lateral: ~13 % de la página (196/1536 en la maqueta), con la cursiva más pequeña (6 líneas, no 7). */
  .acuerdo-heroe--socios .acuerdo-heroe__lado{padding:var(--e-4) 1.1rem var(--e-4) var(--e-4);gap:var(--e-5)}
  .acuerdo-heroe--socios .lema-lateral{font-size:clamp(.62rem,.5rem + .25vw,.8rem);letter-spacing:.15em}
  .acuerdo-heroe--socios .cita-lateral{font-size:clamp(.9rem,.6rem + .35vw,1.1rem)}
}
/* Paso 03: icono y título en una fila, párrafo en sans pequeño, «Ver acuerdo» a ancho de tarjeta (borde dorado) y «Descargar pdf» centrado. */
.acuerdo-pasos--socios .acuerdo-paso:nth-child(3) .caja{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:var(--e-3);row-gap:var(--e-4)}
.acuerdo-pasos--socios .acuerdo-paso:nth-child(3) .caja svg.icono--documento{width:2.4rem;height:2.4rem}
.acuerdo-pasos--socios .acuerdo-paso:nth-child(3) .caja__titulo{font-size:clamp(.85rem,.7rem + calc(.4*var(--vw)),1.1rem);letter-spacing:.07em}
@media (min-width:1280px){.acuerdo-pasos--socios .acuerdo-paso:nth-child(3) .caja__titulo{font-size:clamp(.6rem,calc(.77*var(--vw)),.78rem);letter-spacing:.03em;white-space:nowrap}}   /* en la maqueta «ACUERDO DE COLABORACIÓN» va en UNA línea junto al icono; con 4 columnas la tarjeta es estrecha (V7/coord) */
.acuerdo-pasos--socios .acuerdo-paso:nth-child(3) .caja .texto-serif{grid-column:1/-1;font:400 clamp(.74rem,.65rem + .2vw,.84rem)/1.5 var(--fuente-texto)}
.acuerdo-pasos--socios .acuerdo-paso:nth-child(3) .boton-documento{grid-column:1/-1;justify-content:center}
.acuerdo-pasos--socios .acuerdo-paso:nth-child(3) .boton-documento--oro{align-self:stretch;border-color:var(--oro)}
.acuerdo-pasos--socios .acuerdo-paso:nth-child(3) .boton-documento:not(.boton-documento--oro){font-size:clamp(.78rem,.65rem + .3vw,.95rem);letter-spacing:.06em;color:var(--blanco)}
/* Paso 04: «DocuSign» como logotipo (trazo más fino y apretado, con su ™), lista pequeña, botón en UNA línea y candado dorado grande. */
.acuerdo-pasos--socios .docusign{font-weight:600;letter-spacing:-.05em;font-size:clamp(1.6rem,1.2rem + .9vw,2.1rem)}
.acuerdo-pasos--socios .docusign::after{content:"™";font-size:.3em;font-weight:400;letter-spacing:0;vertical-align:.9em;margin-left:.15em}
.acuerdo-pasos--socios .acuerdo-paso:nth-child(4) .caja .marcas,.acuerdo-pasos--socios .acuerdo-paso:nth-child(4) .caja ul{font-size:clamp(.72rem,.62rem + .22vw,.84rem);line-height:1.35}
.acuerdo-pasos--socios .boton--indicativo{white-space:nowrap;justify-content:center;gap:.5rem;font-size:clamp(.6rem,.45rem + .3vw,.72rem);letter-spacing:.03em;padding-inline:.8rem}
.acuerdo-pasos--socios .boton--indicativo>span{white-space:nowrap}
/* W13 (d10, Codex d10-filas-pt201): a 390 el texto de «Firmar acuerdo con DocuSign» se quedaba en 9,6 px (el mínimo del clamp de arriba); 12 px y sigue en una línea. Los ejemplos de los campos, en gris de 5,4:1 sobre la caja (antes el del navegador, 3,9:1). */
@media (max-width:599.98px){.acuerdo-pasos--socios .boton--indicativo{font-size:.75rem}}
.acuerdo-pasos--socios .campo ::placeholder{color:#918b83;opacity:1}
@media (min-width:1400px){.acuerdo-heroe--socios .acuerdo-heroe__titulo{font-size:clamp(2.6rem,calc(3*var(--vw)),3.6rem)}html[lang=es] .acuerdo-heroe--socios .acuerdo-heroe__titulo{white-space:nowrap}}   /* W13 (Codex d10-filas-pt201): a 1440 el titular iba a 36,8 px y la línea «DE SOCIOS INMOBILIARIOS» medía ≈504 px frente a ≈592 en la diapositiva (−17 %); a 3vw (43,2 px a 1440) mide como ella y sigue en sus 3 líneas, también a 1920, porque la columna también va en % */
@media (min-width:1400px){.acuerdo-heroe--socios .acuerdo-heroe__foto::after{background:linear-gradient(90deg,#0a0908 0,rgba(10,9,8,.95) 46%,rgba(10,9,8,.4) 50%,transparent 55%)}}   /* W13 (puente 2380150, d10 a 1440): la foto va a toda la altura del héroe con su proporción, así que al crecer el titular se ensancha hacia la izquierda y sus libros («PERSONAS…», en inglés «PROPERTIES / OPPORTUNITIES») quedaban bajo la última línea del párrafo, texto sobre texto. El velo cubre ahora toda la columna del texto (≈53 % de la foto) y la foto se ve limpia a su derecha */
.acuerdo-pasos--socios .caja__pronto{font-size:clamp(.74rem,.65rem + calc(.2*var(--vw)),.85rem);color:var(--texto)}
.acuerdo-pasos--socios .caja__pronto svg{width:1.5rem;height:1.5rem;margin-right:.35rem;vertical-align:-.4em}
/* Banda «Acuerdo firmado»: una sola fila (icono + texto | tres ítems con filetes verticales) sobre un fondo con degradado dorado. */
.firmado--socios{grid-template-columns:minmax(0,1.75fr) minmax(0,1.1fr) minmax(0,1.1fr) minmax(0,.8fr);border-block:1px solid var(--linea-oro);background:linear-gradient(180deg,#0a0908 0,#0a0908 45%,rgba(179,127,43,.3) 100%)}
.firmado--socios>:first-child{grid-column:auto;border-bottom:0;padding-left:var(--e-3)}
.firmado--socios>*+*{border-left:1px solid var(--linea-oro)}
.firmado--socios>:nth-child(2){border-left:1px solid var(--linea-oro);padding-left:var(--e-3)}
.firmado--socios>*{padding:var(--e-4) var(--e-3);gap:var(--e-2)}
.firmado--socios span{font-size:clamp(.62rem,.5rem + .3vw,.78rem);letter-spacing:.07em}
.firmado--socios p{font-size:clamp(.7rem,.6rem + .25vw,.9rem)}
.firmado--socios svg{width:clamp(1.8rem,1.4rem + 1vw,2.6rem);height:clamp(1.8rem,1.4rem + 1vw,2.6rem)}
.firmado--socios>:first-child svg{width:clamp(2.4rem,1.8rem + 1.5vw,3.6rem);height:clamp(2.4rem,1.8rem + 1.5vw,3.6rem)}
.firmado--socios h2{font-size:clamp(.74rem,.6rem + calc(.4*var(--vw)),1.15rem);white-space:nowrap}
@media (max-width:599.98px){.firmado--socios{grid-template-columns:1fr;background:linear-gradient(180deg,#0a0908 0,rgba(179,127,43,.25) 100%)}.firmado--socios>*+*{border-left:0}}
/* Franja inferior: degradado dorado, letras blanco cálido (no azuladas) y, a 1024 y 768, las tres partes en UNA línea con aire entre ellas. */
.franja-socios .franja{background:linear-gradient(180deg,#0a0908 0,#0a0908 40%,rgba(179,127,43,.3) 100%)}
.franja-socios .franja__fila{color:#ece6da}
.franja-socios .franja__centro{color:var(--oro)}
@media (min-width:600px) and (max-width:1279.98px){
  .franja-socios .franja--inmo .franja__fila{flex-wrap:nowrap;justify-content:space-between;column-gap:1.6rem;font-size:clamp(.56rem,.2rem + .8vw,.68rem);letter-spacing:.06em}
  .franja-socios .franja--inmo .franja__centro{order:0;flex-basis:auto;letter-spacing:.08em}
  .franja-socios .franja--inmo .franja__derecha{word-spacing:.3em}
  .franja-socios .franja--inmo .franja__lista{column-gap:0;flex-wrap:nowrap}
  .franja-socios .franja--inmo .franja__lista li+li::before{display:inline;content:"|";color:var(--oro);margin-inline:.6em}
}
@media (min-width:1100px){
  .invertir-heroe--acuerdo .invertir-heroe__foto{grid-column:1/3;overflow:hidden}
  .invertir-heroe--acuerdo .invertir-heroe__foto img{inset:0 0 0 auto;width:auto;height:100%;max-width:100%;aspect-ratio:2041/770;object-fit:cover;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 22%);mask-image:linear-gradient(90deg,transparent 0,#000 22%)}
  .invertir-heroe--acuerdo .invertir-heroe__foto::after{background:none}
}   /* W11 (REV3 del VS, SEG-R3-d19-0305313c/-d38e7802): a ≥1100 la foto del héroe del acuerdo se ve ENTERA como en la diapositiva 19 (2041×770: butacón a la izquierda, lámpara a la derecha). Antes iba metida en la columna central (547×235 a 1440) con cover y perdía los lados. Ahora ocupa las columnas 1-2, a la altura del héroe con su proporción, pegada a la columna lateral, y su borde izquierdo se funde bajo el texto (máscara, como la diapositiva) */
/* Diap. 11 (Emiratos): las 5 ventajas se leen sobre el skyline claro (velo propio bajo la fila + sombra de texto) y el titular respira entre sus dos líneas */
.escena--uae .rasgos{position:relative;isolation:isolate}
.escena--uae .rasgos::before{content:"";position:absolute;z-index:-1;inset:-1rem -50vw;background:linear-gradient(180deg,rgba(5,5,5,0) 0%,rgba(5,5,5,.62) 28%,rgba(5,5,5,.62) 78%,rgba(5,5,5,0) 100%)}
.escena--uae .rasgo__titulo,.escena--uae .rasgo__texto{text-shadow:0 1px 10px rgba(0,0,0,.85)}
.escena--uae .escena__titulo{line-height:1.08}
.escena--uae .rasgo__texto{color:var(--crema)}   /* el texto de las ventajas, en crema como la diapositiva (contraste 6,4-9,1:1 frente a 7,3-8,7:1 de la maqueta, medido a 900 px) */
/* V3 rev2 d11: a ≥1280 los cinco rótulos de las ventajas van en una línea, como la diapositiva (a 17,3 px «DEMANDA INTERNACIONAL» medía 263 px en una columna de 265 y partía en 2) */
@media (min-width:1280px){.escena--uae .rasgo__titulo{white-space:nowrap;font-size:min(calc(1.05*var(--vw)),1.05rem)}}
/* d11 a ≥1280, ventajas y botón como la diapositiva 11 (V10, DECIDIDO 4206, medido a 1440 sobre la diap. normalizada): títulos con la letra mayor y menos espaciada (la diap. 163 px de ancho de «CONEXIÓN GLOBAL» con letra mayor; antes 15 px con 0,06 em) y en blanco; texto en columna de 15,5 em (la diap. parte «Conecta Europa, Asia / y Oriente Medio» en 2 líneas; con 12,8 em salía «Calidad de vida…» en 3 líneas (V15, WebUaeRotulosUnaLineaTest)) y algo menor; botón «Explorar promociones» de 58 px de alto (antes 42) */
@media (min-width:1280px){.escena--uae .rasgo__titulo{font-size:min(calc(1.15*var(--vw)),1.12rem);letter-spacing:.02em;color:var(--blanco)}.escena--uae .rasgo__texto{font-size:min(1.05vw,1.02rem);line-height:1.3;max-width:15.5em}.escena--uae .escena__cierre .boton{min-height:3.6rem}}
/* V3 rev2 d11: el texto de «Estilo de vida de lujo» a 2 renglones como la diapositiva a 1440 (3 con la caja estrecha); un margen negativo de .6rem lo ensancha sin tocar las líneas de columna (holgura 7-12 px) */
@media (min-width:1280px) and (max-width:1535.98px){.escena--uae .rasgo__texto{margin-inline:-.6rem}}
/* d11 a ≥1280: los iconos de las 5 ventajas al tamaño de la diapositiva 11 (glifo ≈40 px a 1440: 48 px de caja frente a 37, que dejaban el dibujo en ≈31) */
@media (min-width:1280px){.escena--uae .rasgos--separados .rasgo svg{width:clamp(2rem,min(3.35vw,6vh),4.4rem);height:clamp(2rem,min(3.35vw,6vh),4.4rem)}}
/* V10 (diap. 19, 1440): como la diapositiva, una flecha dorada «›» sobre la línea entre los pasos 01→02→03→04 (solo con los cuatro en fila, desde 900)
   y el título del 03 en dos renglones («ACUERDO DE / INVERSIÓN.»), como el 01 y el 02 */
@media (min-width:900px){.invertir-acuerdo>li{position:relative}.invertir-acuerdo>li+li::before{content:"";position:absolute;left:0;top:45%;width:.75rem;height:1.25rem;transform:translate(-50%,-50%);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'%3E%3Cpath d='M2 2l8 8-8 8' fill='none' stroke='%23f2b452' stroke-width='1.6'/%3E%3C/svg%3E") center/contain no-repeat;pointer-events:none}}
#paso-acuerdo-3>.paso-cabeza h3{max-width:10em}
/* Puente 23:2x (orden de Víctor 18-oct, DECIDIDO 651, y regla del VS de las 22:30: «parece clicable y no hace nada» = fallo): en /invertir, «Firmar acuerdo con DocuSign»,
   «Descargar acuerdo firmado» y «Área de propietarios» no tienen destino hasta que DocuSign esté conectado, así que se VEN desactivados con el estilo de siempre
   (.boton[aria-disabled], arriba), en vez de «como la diapositiva» de las l. 733-734. Solo el paso 04 del acuerdo; posición, tamaño y texto, los de la diapositiva 19. */
#paso-acuerdo-4 .boton[aria-disabled="true"],#paso-acuerdo-4 .boton[aria-disabled="true"]:hover{opacity:.55;cursor:not-allowed;filter:saturate(.6);transform:none}


/* V3 d5 Interiorismo (VS 21:40, dueña V3): a ≥1100 el héroe (texto 3 líneas menos), las 4 fotos y la franja de pie caben en la primera pantalla de 1440x810 como en la diapositiva 5 (héroe 446 px, la maqueta ≈443; franja hasta ≈800). Solo .servicio--interiorismo; Arquitectura y Construcción no cambian. */
@media (min-width:1100px){
  .servicio--interiorismo{padding-top:.5rem}
  .servicio--interiorismo .servicio__texto{gap:.45rem;padding-block:.2rem .2rem}
  .servicio--interiorismo .servicio__subtitulo{font-size:clamp(1.2rem,.5rem + calc(1.35*var(--vw)),2rem);line-height:1.05}
  .servicio--interiorismo .servicio__intro{font-size:clamp(.9rem,.45rem + .8vw,1.05rem);line-height:1.18}
  .servicio--interiorismo .servicio__texto .rasgos{margin-top:0}
  .servicio--interiorismo .servicio__texto .rasgo svg{width:clamp(1.6rem,2.3vw,2.6rem);height:clamp(1.6rem,2.3vw,2.6rem)}   /* diap. 5: iconos de ~33 px a 1440 (antes 25,6) */
  .servicio--interiorismo .servicio__texto .rasgo{gap:.2rem}
  .servicio--interiorismo .servicio__botones .boton{padding-block:.45rem}
  .servicio--interiorismo .galeria-franja{height:9.9rem;gap:.3rem}
  .servicio--interiorismo .galeria-franja figure{height:9.9rem}
  .servicio--interiorismo .galeria-franja img{height:100%;object-position:center 80%}   /* encuadre de la diapositiva 5: la cocina con la isla, los taburetes y la fruta; fotos casi pegadas */
}
/* == d5 letra y miniaturas >1440 (V3) == */
/* d5 Interiorismo a 2356 (V9 medir-d5-2356; puente): UN SOLO MECANISMO de escala de texto (puente 4957): la letra del titular, el subtítulo y el párrafo ya no se fija aquí (ni rampa en px+vw ni tope propio en vh): la gobierna la regla de la ficha (rem y --vw, raíz max(16px,min(100vw/90,100vh/56,25))). Lo que queda es lo que no es letra: las miniaturas pasan de 9,9 rem a min(13,9vw, 19,2vh) (diap. 13,6 % del ancho; a 1216 queda como antes, 233). A 1440 no cambia. */
@media (min-width:1441px){
  .servicio--interiorismo .galeria-franja,.servicio--interiorismo .galeria-franja figure{height:min(13.9vw,19.2vh)}
}
/* == fin d5 letra y miniaturas >1440 (V3) == */
/* == d5 letra por ancho >1440 (V3) == */
/* d5 Interiorismo a 2356x1216 (V9 medir-raiz-d5, puente DECIDIDO 5025): con la raíz sin tope, a 2356x1325 la letra del héroe casa con la diapositiva, pero a 2356x1216 sale por la raíz del alto: el titular al 28,9 % del ancho frente al 33,4 % de la diapositiva (0,86×), subtítulo y párrafo 0,92×. Aquí sale POR ANCHO, como la diapositiva: la letra crece desde el valor de 1440 (35,2 / 27,44 / 16,8 px, igual que a 1440) con el ancho hasta 62,5 / 49,5 / 29,4 px a 2356 (interlíneas de la diapositiva), sin ningún tope por el alto de la ventana. Solo >1440 y solo esta ficha. */
@media (min-width:1441px){
  .servicio--interiorismo .servicio__titulo{font-size:calc(35.2px + (100vw - 1440px) * .0299)}
  .servicio--interiorismo .servicio__subtitulo{font-size:calc(27.44px + (100vw - 1440px) * .0241)}
  .servicio--interiorismo .servicio__intro{font-size:calc(16.8px + (100vw - 1440px) * .01376)}
}
/* == fin d5 letra por ancho >1440 (V3) == */
/* Diap. 4 (Arquitectura): la cita parte en 3 renglones como la maqueta («La arquitectura / como forma / de vivir»); solo esa página. */
.servicio--arquitectura .servicio__cita{white-space:pre-line}
@media (min-width:900px) and (max-width:1099.98px){.servicio--arquitectura .servicio__foto{align-self:stretch}.servicio--arquitectura .servicio__foto img{height:100%;aspect-ratio:auto;min-height:18rem;object-position:30% 50%}}   /* diap. 4 de 900 a 1099 (como d6): la foto llena la altura de la columna del texto; a 1024 quedaba un hueco negro bajo la foto (Codex d04-filas, SEG-cx-p33-2-diap4-1024-1); encuadre al 30 % para que se vea el olivo, como en la diapositiva */
/* diap. 5 Interiorismo (cx-p34-1-1440-4/-5, cx-p34-3-1024-1/-2, cx-p22-1-390-3): iconos blancos, botón de vídeo bajo sin brillo y con la flecha blanca; a 1024, los 4 rasgos en una fila y la foto hasta abajo del texto. */
.servicio--interiorismo .rasgo svg{color:var(--blanco)}
.servicio--interiorismo .boton--barra{min-height:clamp(2.1rem,1.7rem + .5vw,2.4rem);padding-block:0;background:#d89f59;box-shadow:none}
.servicio--interiorismo .boton--barra>svg:last-child{color:var(--blanco)}
@media (min-width:900px) and (max-width:1099.98px){.servicio--interiorismo .servicio__texto .rasgos{grid-template-columns:repeat(4,minmax(0,1fr))}.servicio--interiorismo .servicio__foto{align-self:stretch}.servicio--interiorismo .servicio__foto img{height:100%;aspect-ratio:auto;min-height:18rem}}
/* Diap. 4: el filete dorado bajo «ARQUITECTURA» corre casi todo el título (~380 px a 1440), no el corto común de 17rem. */
.servicio--arquitectura .servicio__titulo::after{width:min(23.75rem,80%)}
@media (min-width:1440px){.servicio--arquitectura .servicio__titulo{font-size:clamp(2.2rem,calc(min(calc(50*var(--vw)),52.5rem) / var(--letras,12)),5.2rem)}}   /* d4 (V9 20:2x; puente: todo por la raíz): el tope de 840 px (fijo) pasa a 52,5rem (=840 a 1440): a 2356 el titular no topa a 70 px (24 % del ancho; la diapositiva 33,5 %); 1440 no cambia */
/* Diap. 4: los iconos de los rasgos van en trazo blanco (Codex 9545, fila 3); en Construcción la diapositiva los lleva dorados. */
.servicio--arquitectura .servicio__texto .rasgo svg{color:var(--blanco)}
@media (min-width:1280px){.escena--uae h1.escena__titulo{font-size:clamp(2rem,min(calc(3.8*var(--vw)),7.4vh),5.6rem)}}   /* d11: la línea más ancha del titular a ≈45 % del ancho como la diapositiva; a 4,2vw se partía en 3 líneas a 1280 (V10, medido en el pod; 84ad439b7) */
@media (min-width:1280px) and (max-width:1439.98px){html[lang=en] .escena--uae h1.escena__titulo{font-size:clamp(2rem,min(calc(3.4*var(--vw)),6vh),5rem)}}   /* en inglés el titular, más largo, pasaba a 3 líneas a 1280 con 3,8vw: entre 1280 y 1439 px se queda en su tamaño de antes (2 líneas) */

/* SEG diap. 16 a 390 (VS fca2fb6e): el héroe de Invertir con la foto a todo el héroe y el texto encima (no una tira arriba), como la diapositiva; velo de arriba a abajo para que el texto se lea (≥4,5:1, medido en pod). Acotado a la página Invertir (.invertir-heroe--entera). */
@media (max-width:599.98px){
  main > section.invertir-heroe--entera{position:relative;isolation:isolate}
  main > section.invertir-heroe--entera > .invertir-heroe__foto{position:absolute;inset:0;z-index:-1;order:0}
  main > section.invertir-heroe--entera > .invertir-heroe__foto img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover;object-position:78% 50%}
  main > section.invertir-heroe--entera > .invertir-heroe__foto::after{background:linear-gradient(180deg,rgba(5,5,5,.78) 0%,rgba(5,5,5,.78) 38%,rgba(5,5,5,.62) 62%,rgba(5,5,5,.5) 100%)}
  /* VS 9840616b: lema y cita DENTRO del héroe, sobre la foto y ANTES del botón (no debajo): el texto se «deshace» en la rejilla del héroe y el lado va entre el párrafo y el botón; antetítulo y subtítulo en una línea y párrafo de 15 px (b3b9791a1) */
  main > section.invertir-heroe--entera{gap:.6rem;padding-top:var(--e-4);padding-bottom:var(--e-5)}
  main > section.invertir-heroe--entera > .invertir-heroe__texto{display:contents}
  main > section.invertir-heroe--entera > .invertir-heroe__texto > *{margin:0;margin-inline:var(--margen);max-width:none}
  main > section.invertir-heroe--entera > .invertir-heroe__texto > .rotulo--oro{order:1;white-space:nowrap;font-size:clamp(.6rem,2.6vw,.8rem);letter-spacing:.12em}
  main > section.invertir-heroe--entera > .invertir-heroe__texto > .invertir-heroe__titulo{order:2}
  main > section.invertir-heroe--entera > .invertir-heroe__texto > .rotulo:not(.rotulo--oro){order:3;white-space:nowrap;font-size:clamp(.6rem,2.6vw,.8rem);letter-spacing:.12em}
  main > section.invertir-heroe--entera > .invertir-heroe__texto > .texto-serif{order:4;font-size:.95rem;line-height:1.45}
  main > section.invertir-heroe--entera > .invertir-heroe__lado{order:5}
  main > section.invertir-heroe--entera > .invertir-heroe__texto > .boton{order:6;width:auto;justify-self:start}
}

/* SEG d8 (cx-p22-1-diap8-1440-2): el peso de letra de los rótulos de los cuatro rasgos y del botón es mayor que en la maqueta (Jost 500 frente a trazo ligero); a 400. Solo la página Círculo de Socios; el párrafo serif y los titulares no se tocan (letra común, 3363). */
.escena--socios .rasgos--separados .rasgo__titulo,.escena--socios .botones .boton,.escena--socios-como .botones .boton{font-weight:400}   /* d9: el mismo botón «Únete…» al final de «Cómo funciona» también a 400 (W12 SEG-W12-d9-boton-unete-peso-500-1440) */

/* d16 a 1440, pieza A (SEG-VS-d16-1440-db5badf4 y -644d0655; DECIDIDO 4044): botón dorado claro y plano (sin degradado ni sombra, flecha fina) y párrafo de 17,6 px, opsz bajo, 33 em. Solo la página Invertir y solo ≥1100 px (a ≤1099 no cambia). */
@media (min-width:1100px){
  main > section.invertir-heroe--entera .invertir-heroe__texto .boton{background:#fbcc7b;box-shadow:none}
  main > section.invertir-heroe--entera .invertir-heroe__texto .boton svg{stroke-width:1.2}
  main > section.invertir-heroe--entera .invertir-heroe__texto .texto-serif{font-size:1.1rem;font-variation-settings:"opsz" 9;max-width:33em}
}

/* d8 a 1440 (DECIDIDO 4206, orden de Víctor; lámina diap | servido b734b6566): en la diapositiva 8 caben en la primera pantalla el título, el vídeo, el párrafo (4 líneas, más pequeño), los cuatro rasgos, el botón y la franja «Invierte. Vive. Forma parte.»; en el servido el botón y la franja quedaban bajo el pliegue (botón a 792-857 de 810, franja a 1695). Todo en vw (1 % de 1440 = 14,4 px) para que escale. Solo la página Círculo de Socios y de 1100 px en adelante. */
@media (min-width:1100px){
  .escena--socios{padding-top:1.2vw;padding-bottom:0}
  .escena--socios .escena__cabeza{gap:.5vw}
  .escena--socios .escena__texto{font-size:1.25vw;max-width:44em}
  .escena--socios .rasgos--separados{margin-block:1.1vw .9vw}
  .escena--socios .rasgos--separados .rasgo svg{width:3.7vw;height:3.7vw}
  .escena--socios .botones{margin-bottom:1.4vw}
  .escena--socios .escena__cabeza>.rotulo{text-shadow:0 0 .5em rgba(0,0,0,.9),0 0 1.2em rgba(0,0,0,.7),0 1px 2px rgba(0,0,0,.8)}   /* el subtítulo queda más arriba, sobre el cielo claro: contraste p99 3,05 → ver medida en el commit */
  .escena--socios > .franja .franja__fila{padding-block:.6vw;min-height:4.4vw}
}
/* == d8 fuente y alto >1440 (V3) == */
/* d8 (puente/V9, medir-d8-2356): la diapositiva 8 lleva el subtítulo del héroe («Red de socios inmobiliarios en Barcelona») y la franja inferior en sans espaciada (Jost), no en Didot (ocupaba el 41 % del ancho frente al 49 % de la diap.), y entre «Ver vídeo» y el párrafo hay ~85 px (en la web 11). Fuente: desde 1100. Alto, solo >1440: separaciones en vh (6,4 vh = 85 px a 1325; 5,2 vh + el hueco = 81 px) y el párrafo (letra por --vw, mecanismo único del puente 4957, sin tope propio en vh) y los iconos de los rasgos, que seguían el ancho, ya no crecen más que la ventana (min con vh) para que la franja quede dentro de la primera pantalla a 2356x1216 (franja a y 1126-1231 de 1216; antes 1086). A 1440 solo cambia la fuente. */
@media (min-width:1100px){
  .escena--socios .escena__cabeza>.rotulo{font-family:var(--fuente-texto);font-weight:400;font-size:calc(1.28*var(--vw));letter-spacing:.41em}
  .escena--socios > .franja .franja__fila{font-family:var(--fuente-texto);font-weight:400;letter-spacing:.2em}
}
@media (min-width:1441px){
  .escena--socios .escena__cabeza>.rotulo{margin-bottom:1.3vh}
  .escena--socios .escena__texto{margin-top:5.2vh;line-height:1.2;font-size:calc(1.25*var(--vw))}
  .escena--socios .rasgos--separados .rasgo svg{width:min(3.7vw,6.4vh);height:min(3.7vw,6.4vh)}
}
/* == fin d8 fuente y alto >1440 (V3) == */
/* == d8 margen superior 1100-1440 (V3) == */
/* d8 (revisión final W11 → V9): a 1440 el título «CÍRCULO DE SOCIOS» quedaba a 17 px bajo la cabecera y la diapositiva 8 lo lleva a ≈56 px (3,9 % del ancho). Solo de 1100 a 1440 (a 2356 la franja ya baja del pliegue a 1216 y no se toca); a 1440 el botón y la franja siguen dentro de 900. */
@media (min-width:1100px) and (max-width:1440px){
  .escena--socios{padding-top:calc(3.9*var(--vw))}
}
/* == fin d8 margen superior 1100-1440 (V3) == */
/* == d8 hueco vídeo→párrafo 1100-1440 (V3) == */
/* d8 (V9 revisión final): el párrafo quedaba ≈49 px más alto que en la diapositiva 8 (el hueco entre «Ver vídeo» y el texto): +3,4 % del ancho de 1100 a 1440 (49 px a 1440). */
@media (min-width:1100px) and (max-width:1440px){
  .escena--socios .escena__texto{margin-top:calc(3.4*var(--vw))}
}
/* == fin d8 hueco vídeo→párrafo 1100-1440 (V3) == */
/* == d8 letra e iconos 1100-1440 (V3) == */
/* d8 (V9 medir-rev2-d8): a 1440 el párrafo del héroe (18 px) y los iconos de los 4 valores (53 px) quedaban ≈4 % por debajo de la diapositiva 8 (≈18,7 px y ≈55 px): 1,3 y 3,84 % del ancho. Con ello la franja sigue dentro de 900 (865). A ≥1441 no se toca: a 2356x1325 la franja (1324) no admite más alto. */
@media (min-width:1100px) and (max-width:1440px){
  .escena--socios .escena__texto{font-size:calc(1.3*var(--vw))}
  .escena--socios .rasgos--separados .rasgo svg{width:calc(3.84*var(--vw));height:calc(3.84*var(--vw))}
}
/* == fin d8 letra e iconos 1100-1440 (V3) == */
/* == d8 letra e iconos ≥1441 (V3) == */
/* d8 (V9 medir-rev2-d8, lógica del VS 5095): a 2356 el párrafo del héroe (29,5 px) y los iconos de los 4 valores (85 px) iban ≈15 % por debajo de la diapositiva 8 (≈34 px y ≈90 px): 1,44 % del ancho y 3,84 % (≈90 px, sin tope de alto). Para que la franja siga DENTRO a 2356x1325 (1325) se quita el relleno vertical de cada valor (el hueco lo da ya el margen del bloque). A 2356x1216 la franja sigue bajo el pliegue como la diapositiva (1318, antes 1310). */
@media (min-width:1441px){
  .escena--socios .escena__texto{font-size:calc(1.44*var(--vw))}
  .escena--socios .rasgos--separados .rasgo svg{width:calc(3.84*var(--vw));height:calc(3.84*var(--vw))}
  .escena--socios .rasgos--separados .rasgo{padding-block:0}
}
/* == fin d8 letra e iconos ≥1441 (V3) == */

/* Textos de /es/invertir por debajo de 10 px a 1100-1439 (V16 barrido 11 px, DECIDIDO 4163 y 4206; filas SEG-V16-11px-d16-20…-32, medidas en pod sobre pt349): a 10 px como mínimo, sin cambiar los que ya pasan de 10 (no se achica ninguno). Paso 04 de la 19 («Seguro · Fiable · Internacional», «Tras la firma», su texto y los dos botones) a 10 px (estaban a 8,8-9,9 px); en la 18 el subtítulo del formulario, «Revisión confidencial…», la casilla, los pies de las subidas y «Subir fotos/plano» con suelo de 10 px; de 1100 a 1279 el espaciado de esos rótulos baja para que quepan en su línea (a 10 px se salían y daban scroll horizontal). */
@media (min-width:1100px){
  #paso-acuerdo-4 .invertir-sello .rotulo--sello span,#paso-acuerdo-4 .tras-firma .rotulo,#paso-acuerdo-4 .tras-firma>div>p:last-child,#paso-acuerdo-4 .tras-firma__botones .boton{font-size:max(10px,.625rem)}   /* W11 v2356b (REGLA 4900): a 2356 px (rem de W10 = 26,18 px) los 10 px fijos no escalaban con la caja (494×50): max(10px,.625rem) vale 10 px hasta 1440 y 16,4 px a 2356 */
  .invertir-valoracion__formulario>.rotulo{font-size:max(10px,.78vw)}
  .invertir-valoracion__formulario form>.rotulo--texto{font-size:max(10px,.72vw)}
  .invertir-valoracion__formulario .subida__texto small{font-size:max(10px,.78vw)}
  .invertir-valoracion__formulario .casilla{font-size:max(10px,.8vw)}
  .invertir-valoracion__formulario .campo--subida .subida__caja{font-size:max(10px,.9vw)}
}
@media (min-width:1100px) and (max-width:1279.98px){
  .invertir-valoracion__formulario p.rotulo--texto,.invertir-valoracion__formulario>.rotulo,.invertir-valoracion__formulario form>.rotulo--texto,.invertir-valoracion__formulario .rotulo--texto.centrado{letter-spacing:.02em;white-space:normal;overflow-wrap:anywhere}
}

/* d9 a 1100+ (DECIDIDO 4206, V9; medido sobre la diap. 9 a 1672 px ×0,861 y en pod sobre pt382): el botón «Únete al Círculo de Socios» de «Cómo funciona» mide 361×53 px a 1440 en la diap. y el servido 386×65 (alto y relleno de .boton--grande). Alto y relleno en vw (1 % de 1440 = 14,4 px) para que escale; la letra no cambia. Solo .escena--socios-como; el de la diap. 8 va en otra pieza. */
@media (min-width:1100px){
  .escena--socios-como .botones .boton--grande{min-height:3.68vw;padding-inline:1.32vw}
}
/* W11 (SEG-V9-revfinal-d19-descriptor-en-6px, DIFERENCIAS-VISIBLES d19): el descriptor, el lema y «Barcelona» de la hoja del acuerdo a 10 px (salían a 6 y 9,9 px en /en/invest); el titular del héroe del acuerdo como la diapositiva 19 (más grueso, oro plano). */
.invertir-hoja__descriptor{font-size:.625rem;letter-spacing:.04em}
.invertir-hoja__lema{font-size:.625rem;letter-spacing:.04em}
.invertir-hoja__ciudad{font-size:.625rem}
.invertir-heroe--acuerdo .invertir-heroe__titulo{font-weight:700;font-variation-settings:"opsz" 12}
@media (min-width:1100px){.invertir-heroe--acuerdo .invertir-heroe__titulo,.invertir-heroe--acuerdo .invertir-heroe__titulo .acento{white-space:nowrap}}
/* Puente 12:0x (norma de Víctor 4249; decisión del puente sobre 651): los 3 botones del paso 04 sin destino: desactivados como los de d10 (DECIDIDO 4457, aplica 3254; .85 para leerse ≥4,5:1, medido 10,4:1); antes opacity:1 (4249) (cursor not-allowed, aria-disabled sin tocar). */
#paso-acuerdo-4 .boton[aria-disabled="true"],#paso-acuerdo-4 .boton[aria-disabled="true"]:hover{opacity:.85;filter:none}
#paso-acuerdo-4 .tras-firma__botones .boton--contorno{color:var(--oro)}
/* W11 (d19, opción A del puente 12:1x, SUPERADA por la revisión final: ahora en fila, ver la regla de debajo). Con grid y min-height: en columna flex los aplasta .invertir-acuerdo .tras-firma__botones .boton{min-height:0} (Descargar salía a 12 px). */
@media (min-width:1100px){#paso-acuerdo-4 .tras-firma__botones{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);align-items:stretch}#paso-acuerdo-4 .tras-firma__botones .boton{width:100%;white-space:normal;min-height:1.9rem}}   /* d19 revisión final (V6 rf-d19; puente): los dos botones en UNA fila como la diap. 19; a 10 px (suelo) «Descargar acuerdo firmado» puede salir en 2 líneas */

/* d8 a 1100+ (DECIDIDO 4206, V9; medido sobre la diap. 8 a 1672 px ×0,861 y en pod sobre pt394): el botón «Únete al Círculo de Socios» del héroe mide 371×57 px a 1440 en la diap. y el servido 386×65 (alto y relleno de .boton--grande). Alto y relleno en vw (1 % de 1440 = 14,4 px) para que escale; la letra no cambia. Solo .escena--socios; el de «Cómo funciona» (361×53) ya está servido. */
@media (min-width:1100px){
  .escena--socios .botones .boton--grande{min-height:3.96vw;padding-inline:1.67vw}
}

/* Diap. 7 desde 1100 px, cuerpo de los cuadrantes (V9/puente 4464; medido sobre la lámina diap|servido a 1440: «Únete a nuestra red exclusiva de agentes» mide ≈275 px en la diapositiva y ≈237 en lo servido (12,8 px), +16 %): cuerpo a 1,03vw (14,8 px a 1440; 11,6 px mínimo), con tope de 1rem; con ese cuerpo el panel pasaba de 705 a 749 px de alto (la diapositiva ≈672): interlínea 1,2, menos aire arriba y abajo y entre elementos. Solo los cuadrantes de /inmobiliaria. */
@media (min-width:1100px){
  .cuadrante__texto .texto-serif{font-size:min(1rem,max(11.6px,1.03vw));line-height:1.2}
  .cuadrante__texto,.cuadrante--derecha .cuadrante__texto{padding-block:.5vw;gap:.35vw}
  .cuadrante__texto .boton{margin-top:.8vw}
}
/* d8 a 390 (SEG-cl-v6c-4-diap8-390-1/-2, V9 2.ª revisión): el botón «Únete al Círculo de Socios» quedaba pegado a la línea dorada de la franja; la maqueta deja hueco bajo él. 2 rem de aire, solo en móvil y solo en d8 (.escena--socios; el de «Cómo funciona» es otra sección). */
@media (max-width:599.98px){
  .escena--socios .botones{margin-bottom:2rem}
}
/* d13 (Propiedades exclusivas): la raya dorada corta entre «BARCELONA | PROPIEDADES EXCLUSIVAS» y el titular, como la diapositiva 13
   (medida por píxel a 1440: 35 px × 1 px, a la x del rótulo y a mitad del hueco hasta el titular; SEG-cl-v3n-2-diap13-1440-2 y
   SEG-cl-v2-1-diap13-768-3). En absoluto, para no mover el titular ni el alto del héroe. */
.heroe--exclusivas .heroe__texto>.rotulo:first-child{position:relative}
.heroe--exclusivas .heroe__texto>.rotulo:first-child::after{content:"";position:absolute;left:0;top:calc(100% + .45em);width:clamp(1.6rem,2.45vw,2.4rem);height:1px;background:var(--oro)}
/* d16 a 1440 (SEG-cl-v6b-3-diap16-1440-1/-2, V9 2.ª revisión): en la maqueta no hay banda: el lema y la cita van SOBRE la foto, que se ve entera, y el lema arranca arriba, a la altura del antetítulo; en lo servido era un panel oscuro con borde (rgba .8, x 1267-1440) y el lema/cita centrados en vertical (~120 px más bajos). Desde 1100 px: velo que nace transparente en el borde, llega a .84 a los 24 px (donde empieza el texto) y .9 a la derecha (algo más cerrado que el panel de antes para que la cita pase de 4,5:1 a 1100 y 1280, sin borde duro): el borde duro desaparece y la foto se ve hasta el final y el lateral alineado arriba. La izquierda (fundido del titular) es de W7 y no se toca. */
@media (min-width:1100px){
  .invertir-heroe--entera .invertir-heroe__lado{background:linear-gradient(90deg,rgba(5,5,5,0) 0,rgba(5,5,5,.84) 14%,rgba(5,5,5,.9) 100%);justify-content:flex-start;padding-top:var(--e-5)}
}
/* d16 a 1024 (SEG-cl-v3n-5-diap16-1024-1/-2, V9 2.ª revisión; el puente reabre 4113 solo de 900 a 1099 px, DECIDIDO 3558: arreglar desde la diapositiva de 1440): la foto del salón acababa a ~442 px (365 px de alto, 79 % del ancho pegada a la derecha) y bajo ella quedaba una banda negra de 120-150 px detrás del párrafo y del botón; en la maqueta la foto cubre todo el héroe. De 900 a 1099 la foto llena el héroe (cover, encuadre a la derecha como a ≥1100); a ≥1100 el 79 % de 4113 se mantiene. */
@media (min-width:900px) and (max-width:1099.98px){
  main > section.invertir-heroe.invertir-heroe--entera > .invertir-heroe__foto img{inset:0;width:100%;height:100%;aspect-ratio:auto;object-fit:cover;object-position:78% 50%}
  .invertir-heroe--entera .invertir-heroe__foto::after{background:linear-gradient(90deg,var(--fondo) 0%,rgba(5,5,5,.92) 30%,rgba(5,5,5,.88) 44%,rgba(5,5,5,.6) 51%,rgba(5,5,5,.3) 58%,rgba(5,5,5,.12) 66%,rgba(5,5,5,0) 76%)}   /* con la foto a todo el ancho el texto va sobre ella: el fundido de la izquierda cerrado hasta el 44 % (el texto ocupa ahí el 50 % del ancho) y que cae del 51 al 76 %: titular blanco, titular dorado, subtítulo y párrafo ≥4,5:1 en p95/p99 a 900-1099 (medido con el texto oculto, el dorado daba 3,0 a 1024 es) y el cielo en x 50-70 % tan claro como la maqueta (SEG-p35c-diap16-1024-1) */
}
/* d16, peso del titular y del párrafo del héroe (SEG-cx-p33-1-diap16-1024-1 «titular fino y párrafo grueso», V6; medido contra DIAPOSITIVA 16 a 1440): la maqueta pinta el titular en una didona robusta de poco contraste (trazo grueso, serifas firmes) y el párrafo más ligero; servido: Bodoni de opsz 18 con hilos finos (el titular «fino») y el párrafo en opsz 9 a 1440 (más recio, «grueso») y sin fijar a 1024. Desde 900 px: titular opsz 9 y peso 700 (con -.025em de interletraje para que la 1.ª línea no pase de su ancho: 477 → ≈461 px frente a los 455-459 de la diap.) y párrafo opsz 28. Solo el héroe de Invertir. */
@media (min-width:900px){
  .invertir-heroe--entera .invertir-heroe__titulo{font-variation-settings:"opsz" 9;font-weight:700;letter-spacing:-.025em}
  .invertir-heroe--entera .invertir-heroe__texto .texto-serif{font-variation-settings:"opsz" 28}
}
/* d6 Construcción (W1; SEG-cl-v2-12-diap6-1024-1/-3, SEG-V16-11px-d6-02/-03/-04; DECIDIDO 3558 y 4163): de 900 a 1279, como la diapositiva 6 de 1440,
   «Ver vídeo 1 / 2» lado a lado (se apilaban a todo el ancho) y, de 900 a 1099, los 4 iconos proporcionales a los 56 px de 1440 (eran 26 px: 1.6rem del 2×2 de D-PRIN-124;
   con los botones en una fila el bloque sigue cabiendo). Letra: suelo de 10 px solo donde bajaba (rótulos de las ventajas a 1100, pies de la galería y franja a 900-1279). */
@media (min-width:900px) and (max-width:1279.98px){
  .servicio--construccion .servicio__botones{grid-template-columns:repeat(2,minmax(0,1fr))}
  .servicio--construccion .galeria-franja figcaption{font-size:clamp(10px,.87vw,.75rem)}
  .franja--construccion .franja__lista li{font-size:max(10px,1em)}
}
@media (min-width:900px) and (max-width:1099.98px){.servicio--construccion .servicio__texto .rasgo svg{width:3.89vw;height:3.89vw}}
@media (min-width:1100px){.servicio--construccion .servicio__texto .rasgo__titulo{font-size:max(10px,calc(13 * var(--u)))}}
/* d15 Vender tu propiedad a <600 (SEG-cl-v5b-1-diap15-390-1/-2, DECIDIDO 4608): la franja inferior se parte en 3 líneas igualmente, así que la
   letra de .56rem de la regla común (pensada para la línea única de d16) no sirve: ≥10 px y el lema a la izquierda, alineado con las otras dos
   (centrado parecía sangrado). Solo esta página; la regla común de .franja--inmo y d16 no cambian. */
@media (max-width:599.98px){main:has(.acuerdo-pasos--vende) .franja--inmo .franja__fila{font-size:.66rem}main:has(.acuerdo-pasos--vende) .franja--inmo .franja__centro{text-align:left}}
/* d13 (Propiedades exclusivas), medido en vivo 07a29ceae con el texto oculto: la cita «Propiedades atemporales. Valor duradero.» daba p99 2,5-2,9
   sobre cielo y monte a 1100-1440 es/en (velo radial .18-.22) y 2,8-3,3 a 1920-2356 (sin velo; regla 4900): velo más oscuro detrás de la cita, solo en su caja, para p99 ≥4,5 (W12). */
@media (min-width:1100px){.heroe--exclusivas .heroe__lado.cita-lateral{isolation:isolate}.heroe--exclusivas .heroe__lado.cita-lateral::before{display:block;content:"";position:absolute;z-index:-1;margin:0;width:auto;height:auto;pointer-events:none;inset:-3.2rem -4.4rem -2.6rem -4.6rem;background:radial-gradient(closest-side,rgba(0,0,0,.42) 0%,rgba(0,0,0,.4) 50%,rgba(0,0,0,.25) 72%,rgba(0,0,0,.08) 88%,rgba(0,0,0,0) 100%)}}
/* d13 a <600: la franja del héroe va en 3 líneas igualmente; la letra de .56rem de la regla común (pensada para la línea única de d16) no se lee:
   ≥10 px y el lema a la izquierda, como d15 (DECIDIDO 4608); solo en el héroe de exclusivas. */
@media (max-width:599.98px){.heroe--exclusivas .franja--inmo .franja__fila{font-size:.66rem}.heroe--exclusivas .franja--inmo .franja__centro{text-align:left}}
/* d13 desde 1100: «EN UBICACIONES EXTRAORDINARIAS» (letra grande) daba p99 2,8-3,0 en es sobre el tejado claro: velo suave y ancho detrás del renglón (W12). */
@media (min-width:1100px){.heroe--exclusivas p.rotulo--grande{position:relative;isolation:isolate}.heroe--exclusivas p.rotulo--grande::before{content:"";position:absolute;z-index:-1;inset:-1.4rem -3rem -1.4rem -2rem;background:radial-gradient(closest-side,rgba(0,0,0,.5) 0%,rgba(0,0,0,.45) 55%,rgba(0,0,0,.18) 85%,rgba(0,0,0,0) 100%);pointer-events:none}}
/* Ficha de Masía de 1100 a 1279: con el suelo de 10 px «RESERVAR VISITA PRIVADA» pasaba a 2 renglones; en uno, con menos interletra (W12). */
@media (min-width:1100px) and (max-width:1279.98px){.ficha__visita .boton{white-space:nowrap;letter-spacing:.04em;padding-inline:.7rem}}
/* d9, afinado (puente: medida por píxel de la diap. 9, 4801): cuerpo a 5,35cqi (≈16 px a 1440, glifo de la diap.) y lh 1,15 (paso 18,1 px; la diap. 18,3) con 7,5cqi laterales para conservar los renglones 4/4/5/6 de 4857; tarjeta de 377 a 333 px (la diap. ≈314). Lo de abajo, 4857: */
/* d9 «Cómo funciona», tarjetas a ≥1100 (orden de Víctor 4857, V16): a igual ancho de tarjeta, el texto y el título como la diapositiva 9: texto a 1,25vw (18 px a 1440; antes 16,3) en 4 / 4 / 5 / 6 renglones como la maqueta (antes 3 / 3 / 4 / 5) y título a 1,63vw (23,5 px; antes 21,4); en unidades de la propia tarjeta (cqi), para que a 1920 y 2356 vayan igual con y sin la escala de W10 (regla 4900) */
@media (min-width:1100px){.escena--socios-como .paso-tarjeta{container-type:inline-size}.escena--socios-como .paso-tarjeta .texto-serif{font-size:5.35cqi;line-height:1.15;padding-inline:7.5cqi}.escena--socios-como .paso-tarjeta__titulo{font-size:8cqi;margin-top:0}.escena--socios-como .paso-tarjeta{gap:.15rem;padding-bottom:.3rem}}
/* Ficha de Masía desde 1100 (medido a 1100, 1200, 1280 y 1440): con nowrap y la columna 1fr, «Aeropuerto Barcelona–El Prat» y «Costa Brava (costa mediterránea)» se montaban
   sobre su tiempo; el destino parte en dos renglones y el tiempo se queda en su columna (W12). */
@media (min-width:1100px){.distancias li>span:first-of-type{white-space:normal;line-height:1.15}}

/* == d7 lámpara 04 (V6) == */
/* Diap. 7 de 960 a 1399 (SEG-cl-v7b-5-diap7-1024-1/-2; puente 4828): la foto del 04 («Invierte con The Seduction») va entera en su mitad y sus lámparas
   colgantes (≈35 % del ancho de la foto) caían detrás del «04» y del titular (medido a 1024, 1100, 1280 y 1366; a 1400+ ya quedan a su izquierda); la
   diapositiva pone el texto sobre la zona limpia. La foto al 130 % y corrida a la izquierda deja las lámparas tras el círculo y el texto sobre el atardecer.
   Sin ampliar: su sizes va al ancho pintado (65vw de 1100 a 1399, inmobiliaria.html.twig) y con DPR 2 carga el original de 1746 px (×2,6 a 1024, ×2,4 a
   1100, ×1,97 a 1366: el máximo del original). */
@media (min-width:960px) and (max-width:1399.98px){
  .cuadrante[aria-labelledby="cuadrante-invertir"] .cuadrante__foto img{width:130%;max-width:none;margin-left:-30%}
}
/* == fin d7 lámpara 04 (V6) == */
/* == d10 registro >1440 (V3) == */
/* Círculo de Socios, registro (diap. 10) a 2356 px (W13 medir-2356-d2-d10-d12: D10-1, -2, -3, -5 y -6; puente: «d10 registro, 6 diferencias»). Solo >1440; a 1440 no cambia. Medido contra la diapositiva a 2356x1325: los círculos 01-04 en x 93/671/1233/1805 (diap. 670/1232/1804 con el margen común), campo de 41 px y paso de 51 (diap. 41 y 49,3), la columna lateral en x 2135 (era 2050) y la cita en 6 líneas, el párrafo a y 367 y 1006 px de ancho en 4 líneas (la letra crece de .91rem a 1,06rem entre 1440 y 2356 px) y la foto desde x 630 con 1426 px (diap. 629, 1427). La foto de la diapositiva es otra toma del mismo cuadro (torre 1,3x mayor, libro menor): con este original no se iguala más. */
@media (min-width:1441px){
  .acuerdo-pasos.acuerdo-pasos--socios{grid-template-columns:539fr 562fr 572fr 497fr}
  .acuerdo-pasos--socios .acuerdo-paso:first-child .formulario--filas .campo input,.acuerdo-pasos--socios .acuerdo-paso:first-child .formulario--filas .campo select{height:max(30.4px,1.74rem);min-height:0}
  .acuerdo-heroe--socios{grid-template-columns:minmax(0,46fr) minmax(0,41fr) minmax(min-content,9fr)}
  .acuerdo-heroe--socios .acuerdo-heroe__foto img{inset:0 auto 0 29.5%;width:66.8%;height:100%;aspect-ratio:auto;object-fit:cover;object-position:50% 0}
  .acuerdo-heroe--socios .acuerdo-heroe__texto .texto-serif{font-size:.82rem;line-height:1.4;max-width:42.7rem}   /* VS-V16: el rem ya crece con el ancho (html 100vw/90 desde 1441): el término en vw lo contaba dos veces (34,4 px y 5 líneas a 2356; diap. 4 líneas) */
}
/* == fin d10 registro >1440 (V3) == */

/* == d15 subtítulo (V6) == */
/* d15 Vender tu propiedad (V9 medir-d15-2356; puente): el subtítulo del héroe («Venta y representación exclusiva…») va en la diapositiva en sans espaciada (Jost),
   no en Didot: desde 1100, Jost a .78rem (12,5 px a 1440; rem, un solo mecanismo de escala) con tracking .2em (632 px de ancho a 1440 frente a ≈620 en la diap.). La franja de pie se queda en Didot: en la diap.
   también es serif (mirada a 4×). Los titulares en vw son de la escala común (W10) y no se tocan. */
@media (min-width:1100px){
  .acuerdo-heroe--vende .acuerdo-heroe__texto>.rotulo{font-family:var(--fuente-texto);font-weight:400;font-size:.78rem;letter-spacing:.2em}
}
/* == fin d15 subtítulo (V6) == */

/* == d17 héroe (V6) == */
/* d17 Cómo funciona (V9 medir-d17-2356): el párrafo del héroe empieza al 47,8 % del ancho (antes 53,5 %), la raya dorada al 87,7 % y el lema lateral al 90,7 %, como la diapositiva 17; solo la cabecera de #como-funciona. */
@media (min-width:1100px){
  .invertir-como .invertir-cabeza{grid-template-columns:minmax(0,599fr) minmax(0,577fr) minmax(0,86fr)}
  .invertir-como .invertir-cabeza .texto-serif{padding-right:11.1vw}
  .invertir-como .invertir-cabeza__titulo{white-space:nowrap}   /* la columna 1 es 4 px más corta que «CÓMO FUNCIONA»: una sola línea como la diapositiva */
}
/* == fin d17 héroe (V6) == */
/* d6 a 1100+ (revisión final W8): en es la columna de texto es más alta que la foto (21 px de franja negra a 1440, 30 a 1100); la foto llena la celda como la diapositiva (recorte lateral ≤5 %); en 2356 ya no había hueco. */
@media (min-width:1100px){.servicio--construccion .servicio__foto{align-self:stretch}.servicio--construccion .servicio__foto img{height:100%;aspect-ratio:auto;min-height:0;object-fit:cover}}

/* d15 tipografía (3685/4142, que mandan sobre la orden de Víctor de 21-oct; PUENTE 23-oct, regla 2321 «lo que pinte la diapositiva»): en la diapositiva 15 el TÍTULO de la tarjeta 03 va en sans (Jost) y su texto («Tu acuerdo se genera automáticamente…») en SERIF; el texto vuelve a serif (TS Didot) y solo el título queda en Jost. Solo Vender, solo la tarjeta 03; desde 600 px */
@media (min-width:600px){
  .acuerdo-pasos--vende .acuerdo-paso:nth-child(3) .caja__titulo{font-family:var(--fuente-texto)}
}
/* d4 Arquitectura desde 1441 (V9 22:2x): a 2356×1325 el contenido empezaba 46 px más abajo que en la diapositiva y la tira de fotos al 75,6 % del alto (diap. 68,9 %), con la franja de enlaces fuera de pantalla: sin el relleno superior de la sección, relleno del texto y bajo el titular más cortos, y los iconos de los rasgos a 1,5rem (la diapositiva los tiene ≈1,4× menores): tira al 68,3 %. Todo en rem. */
@media (min-width:1441px){.servicio--arquitectura{padding-top:0}.servicio--arquitectura .servicio__texto{padding-top:.3rem;padding-bottom:.3rem}.servicio--arquitectura .servicio__titulo{padding-bottom:.45rem}.servicio--arquitectura .servicio__texto .rasgo svg{width:1.5rem;height:1.5rem}}

/* d7 texto de 02 y 04 hacia el borde derecho (revisión final, V9; medido en DOM sobre pt632 a 1440 y 2356×1216): el texto del 02 empezaba en el 65,7 % del ancho y el de la diapositiva 7 en el 76,7 % (ella lo pega al borde: termina en ≈99 % frente a 95,2 %); el del 04, 74,7 % frente a 76,7 %. La letra no cambia: solo se estrecha la caja anclada a la derecha (el contenido va a la izquierda de su caja) y el margen derecho baja a 1-2 vw. 02: contenido 26,6 rem (2 líneas del título a 1,7 rem), caja = contenido + padding izq. + 1 vw. Desde 1400 px (donde el 54 % de caja del 04 es la base; por debajo la base es 72 % y el círculo central llega al 62 % del ancho). — d7 2.ª vuelta (V9, medida final pt651): el 02 empezaba al 69,4 % y la diap. al 76,4 %; contenido de 20,3 rem (título en 3 líneas con balance, línea más larga ≈22 % del ancho como la diapositiva), mismo borde derecho (≈98,9 %). */
@media (min-width:1400px){
  .cuadrante:nth-child(2) .cuadrante__texto{width:calc(20.3rem + var(--e-5) + 1vw);padding-right:1vw}
  .cuadrante:nth-child(4) .cuadrante__texto{width:calc(54% - var(--margen) + 2vw);padding-right:2vw}
}

/* d11 /invierte-en-uae desde 1441 con la escala común (W13, medida 9764 en pod, 1920 y 2356; 1440, 1024 y 390 quedan idénticos píxel a píxel):
   el bloque del héroe quedaba alto y apretado (titular −1,2 rem, iconos −3,0, franja −4,55 rem) y la cita lateral 405 px de ancho frente a 184 px de la diapositiva.
   Con estas reglas: titular/subtítulo/vídeo/iconos/cierre a 0-5 px de la diapositiva escalada; La foto NO se toca (la caja a 2,128/1 recortaba la noria: medida lamina-d11-final) y la cita lateral tampoco (estrecharla, con o sin tinta oscura, la dejaba en 2,4:1 sobre el cielo frente a 4,0-4,3:1 del servido: lamina-d11-v2; va a la lista del VS). */
@media (min-width:1441px){
  .escena--uae .escena__cabeza{padding-top:1.2rem}
  .escena--uae .escena__cabeza>.rotulo{margin-top:.77rem}
  .escena--uae .rasgos{margin-top:2.15rem}
  .escena--uae .escena__cierre{padding-block:.85rem 1rem}
  .escena--uae .franja__fila{min-height:3.9rem;padding-block:0}   /* franja de 73 px de diapositiva (63 px a 1441), no 100: el bloque de arriba ya la bajaba bajo el pliegue (lámina v4) */
}

/* d15 Vender, revisión final (V6/V9, 22-oct; diap. 15 medida en la lámina de W5/W7): desde 1400 px el héroe era ≈3,2 rem más alto que la diapositiva (381 px a 1440, 622 a 2356 frente a ≈330 y ≈539): gaps, relleno y interlineado del texto más justos (todo en rem: crece con la raíz); la línea dorada del lateral a 2 px como la diapositiva y cada frase del lema en su línea con aire. */
@media (min-width:1400px){
  .acuerdo-heroe--vende .acuerdo-heroe__texto{gap:.25rem;padding-block:var(--e-1) var(--e-2)}
  .acuerdo-heroe--vende .acuerdo-heroe__texto .rotulo::after{margin-top:var(--e-2)}
  .acuerdo-heroe--vende .acuerdo-heroe__titulo{line-height:.9}
  .acuerdo-heroe--vende .acuerdo-heroe__texto .texto-serif{line-height:1.2}
  .acuerdo-heroe--vende .acuerdo-heroe__lado{border-left-width:2px}
  .acuerdo-heroe--vende .lema-lateral__frase{display:block;margin-bottom:.7em}
}
/* == d19 hoja y botones a 2356 (W11) == */
/* d19 paso 03 a 2356 (V9 medir-final-d19): la hoja medía 171 px (7,3 % del ancho; la diap. 10,3 %) y «Ver acuerdo»/«Descargar PDF» 14,6 % (diap. 9,9 %). La hoja crece con el rem (10,7rem = 171 px a 1440) y se para en 205 px = ×1,2 del original (REGLA 4912: la imagen no tiene original mayor); los botones se acotan a min(10,5rem, 233 px = 9,9 % de la diap.). Solo >1441, en rem (un solo mecanismo). */
@media (min-width:1441px){
  .invertir-doc>.invertir-hoja-foto,.invertir-doc>.invertir-hoja{flex:0 0 min(10.7rem,205px)}
  .invertir-hoja-foto img,.invertir-hoja{width:min(10.7rem,205px)}
  .invertir-doc__botones{flex:0 1 min(10.5rem,233px)}
}
/* == fin d19 hoja y botones a 2356 (W11) == */

/* d15 Vender, remedida final (V9, medir-final-d15.md): la franja de cierre (BARCELONA | DUBÁI | INTERNACIONAL · lema · INVIERTE. VIVE. FORMA PARTE.) sale ≈25 % más ancha que la diapositiva 15 (BARCELONA 7,2 % del ancho frente a 5,5; INTERNACIONAL 10,0 frente a 7,9; lema 26,9 frente a 24,7; INVIERTE… 22,7 frente a 17,1): en la diapositiva la letra es la misma serif y de igual tamaño, con el espaciado mucho menor (≈.02em en vez de .2em; lema .19em; entre palabras de la derecha 1em en vez de 1.4em). Solo Vender (.franja-vende; la franja se comparte con d8 y d11) desde 1400. */
@media (min-width:1400px){
  .franja-vende .franja--inmo .franja__fila{letter-spacing:.02em}
  .franja-vende .franja--inmo .franja__centro{letter-spacing:.19em}
  .franja-vende .franja--inmo .franja__derecha{word-spacing:1em}
}

/* d15 Vender, 2.ª vuelta de la franja (V9, medir-final-d15.md): el texto de la diapositiva 15 empieza al 2,5 % del ancho y acaba al 97,9 % (la web, con el margen común de página, al 3,9 %), y sus separadores | son una barra dorada más gruesa que el «|» fino de la serif. Solo .franja-vende (el margen --margen de .contenedor es común a toda la página y no se toca), desde 1400. */
@media (min-width:1400px){
  .franja-vende .franja--inmo .franja__fila{padding-inline:2.4vw}
  .franja-vende .franja--inmo .franja__lista li+li::before{content:"";display:inline-block;width:2px;height:1.15em;vertical-align:-.2em;background:var(--oro-oscuro)}
}

/* d15 Vender, matiz de V9: el lema «PERSONAS. PROPIEDADES. POSIBILIDADES.» de la diapositiva 15 va en un dorado más vivo que el --oro del sistema (mediana de sus píxeles: #edbb33 frente a #f2b452). Solo .franja-vende, desde 1400. */
@media (min-width:1400px){
  .franja-vende .franja--inmo .franja__centro{color:#edbb33}
}

/* d6 Construcción desde 1440 (V9 medir-rev2, 23-oct): el titular topaba a 70 px (840 px / 12 letras: 2,97 % del ancho a 2356, 25 % de la caja) frente al 4,17 % de 1440; sin el tope sigue el ancho como a 1440 (4,17 %, ≈98 px a 2356). 1440 no cambia (50 vw / 12 = 60 px). */
@media (min-width:1440px){.servicio--construccion .servicio__titulo{font-size:clamp(2.2rem,calc(calc(50*var(--vw)) / var(--letras,12)),5.2rem)}}
/* == d19 tras la firma con enlaces (W11) == */
/* d19 paso 04 (puente 23-oct, norma 2321): «Descargar acuerdo firmado» y «Área de propietarios» son enlaces de verdad, con la mano al pasar. */
.tras-firma__botones a.boton{cursor:pointer}
/* == fin d19 tras la firma con enlaces (W11) == */
/* == d12 franja inferior (W11) == */
/* d12 (invierte-en-uae#desarrollos), remedida de V9 (medir-rev2): la franja de cierre sale ≈25 % más ancha que la diapositiva 12 (BARCELONA 7,1 % del ancho frente a 5,7; «FORMA PARTE.» partido): la misma diferencia que W7 resolvió en d15 (.franja-vende). Letra y tamaño iguales; lo que sobra es el espaciado (.2em → .02em; lema .19em; entre palabras de la derecha 1em), el texto empieza al 2,4 % del ancho y los separadores | son una barra dorada de 2 px. Solo el contenedor de d12 (.franja--inmo es común a d8, d11 y d15), desde 1400. */
@media (min-width:1400px){
  .franja-uae12 .franja--inmo .franja__fila{letter-spacing:.02em;padding-inline:2.4vw}
  .franja-uae12 .franja--inmo .franja__centro{letter-spacing:.19em}
  .franja-uae12 .franja--inmo .franja__derecha{word-spacing:1em}
  .franja-uae12 .franja--inmo .franja__lista li+li::before{content:"";display:inline-block;width:2px;height:1.15em;vertical-align:-.2em;background:var(--oro-oscuro)}
}
/* == fin d12 franja inferior (W11) == */

/* == d12 franja raya y lema (W11) == */
/* d12 (V9, norma 2321): la diapositiva 12 lleva una raya dorada fina de 1 px encima de la franja, de margen a margen (2,4 % por lado, como la diap.; la web llevaba el borde de borde a borde, que sigue ahí en transparente), y el lema central en un dorado más vivo que el --oro del sistema (#edbb33, el mismo que W7 midió en la diap. 15). Solo .franja-uae12, desde 1400. */
@media (min-width:1400px){
  .franja-uae12 .franja--inmo{border-top-color:transparent}
  .franja-uae12 .franja--inmo .franja__fila{background:linear-gradient(rgba(233,164,55,.75),rgba(233,164,55,.75)) 2.4vw 0/calc(100% - 4.8vw) 1px no-repeat;padding-inline:2.4vw}
  .franja-uae12 .franja--inmo .franja__centro{color:#edbb33}
}
/* == fin d12 franja raya y lema (W11) == */
/* d6 Construcción desde 1100 (W13 rf2, V9 23-oct): el «03.4» en dorado y ≈1,18× mayor, «NUESTROS SERVICIOS» con su subrayado fino dorado y el ▶ de «Ver vídeo 1/2» ≈2,2× (9 → ≈20 px) como la diapositiva 6. En rem/em y en la unidad --u de la sección. */
@media (min-width:1100px){.servicio--construccion .servicio__numero{color:var(--oro);font-size:calc(23.5 * var(--u))}.servicio--construccion .servicio__numero .rotulo{text-decoration:underline;text-decoration-color:var(--oro);text-decoration-thickness:1px;text-underline-offset:.45em}.servicio--construccion .boton-video--plano svg{width:2.2em;height:2.2em;margin-block:-.55em}}
/* d6 Construcción, la «H» de TS Didot a cuerpo pequeño (W13 rf2 QUEDA-5; medido en pod a DPR 1, EN 390): con el opsz automático (≈14-16) la barra de la «H» desaparece («IIIGH-QUALITY», «WATCII VIDEO»); con opsz 9 se ve entera. El 24 de la receta de Palau (titulares grandes) empeoraba el cuerpo pequeño («e» como «c», guion perdido). Solo el texto pequeño de d6, a todos los anchos. */
.servicio--construccion .servicio__texto :is(.servicio__intro,.rasgo__titulo,.servicio__subtitulo),.servicio--construccion .boton-video--plano,.servicio--construccion .galeria-franja figcaption{font-variation-settings:"opsz" 9}
/* d6 Construcción, pies de las fotos (W13 rf2 QUEDA-4): mayúsculas uniformes como la diapositiva (antes versalitas con inicial mayor); y a ≤599 el rótulo de los rasgos con 0,035 em de tracking para que el opsz 9 (más ancho) no cambie los saltos de línea. */
.servicio--construccion .galeria-franja figcaption{text-transform:uppercase;font-variant-caps:normal;font-size:calc(var(--t-xs)*1.05)}
@media (max-width:599.98px){.servicio--construccion .rasgo__titulo{letter-spacing:.035em}}
/* d4 Arquitectura desde 1100 (W13 rf2, V9 23-oct): la cita de la foto ×0,85 (diap. 4 medida por V9 a 2356: tinta 276×123 vs 326×146 servida), 10 px más abajo (y 262 vs 252) y 32 px más a la izquierda (x 1995 vs 1977, borde derecho 2271 vs 2303) y los rótulos de los rasgos con menos tracking, algo mayores y de trazo más firme (versalitas gruesas de la diapositiva). En calc(N*var(--vw)). */
@media (min-width:1100px){.servicio--arquitectura .servicio__cita{font-size:calc(.85 * clamp(1.1rem,.7rem + calc(1.2*var(--vw)),2.1rem));top:calc(10% + .42*var(--vw));right:calc(3.5% + 1.32*var(--vw))}.servicio--arquitectura .servicio__texto .rasgo__titulo{letter-spacing:.03em;font-weight:500;font-size:calc(1.08 * clamp(.7rem,.64rem + calc(.2*var(--vw)),.85rem))}}
/* d6 Construcción a ≤699 (barrido W5, V9 23-oct): la franja de áreas de abajo (Arquitectura · Interiorismo · …) medía 8,92 px (.82em de ≈10,9); suelo de 10 px con tracking .08em (en vez de .14em) para que las 4 áreas no rocen el borde ni cambien de reparto en EN. */
@media (max-width:699.98px){main:has(.servicio--construccion) .franja__lista--areas{font-size:max(10px,.82em);letter-spacing:.08em}}
/* == d12 tarjetas, rótulo y lema (W11) == */
/* d12 (#desarrollos), 2.ª cruzada de W13 (rf2-d12) y V9: a 1440 el texto de las tarjetas medía 14,4 px frente a los 16,5 de la diapositiva (1,15 % del ancho; −13 %), el rótulo del titular ≈786 px frente a 880 (−11 %) y el lema lateral quedaba ≈50 px más a la izquierda (la diap. lo pega al borde derecho, x 1321-1433). En la unidad común --vw (un solo mecanismo), solo esta escena y desde 1400. */
@media (min-width:1400px){
  .escena--desarrollos .desarrollo .texto-serif{font-size:calc(1.15*var(--vw));line-height:1.33}
  .escena--desarrollos .escena__cabeza>.rotulo{font-size:calc(1.18*var(--vw))}
  .escena--desarrollos>.escena__lado.escena__lado--der{right:calc(1.5*var(--vw))}
}
/* == fin d12 tarjetas, rótulo y lema (W11) == */
/* == d5 franja inferior y miniaturas (V3) == */
/* d5 Interiorismo (2.ª revisión W13, V9): la franja inferior «Barcelona · Arquitectura · …» acababa al 59 % del ancho (tracking .2em) y la diapositiva 5 al 51 %: .05em solo en esta página (la franja común de Servicios no se toca). Miniaturas 2 (cocina: abajo, para que asome el sillón verde) y 3 (dormitorio: arriba, para que entre el cuadro) con otro encuadre vertical; mismas fotos. */
main:has(.servicio--interiorismo) .franja--servicios .franja__fila{letter-spacing:.05em}
main:has(.servicio--interiorismo) .galeria-franja li:nth-child(2) img{object-position:50% 100%}
main:has(.servicio--interiorismo) .galeria-franja li:nth-child(3) img{object-position:50% 12%}
@media (min-width:1100px){
  .servicio--interiorismo .galeria-franja,.servicio--interiorismo .galeria-franja figure{height:calc(12.5*var(--vw))}   /* franja de miniaturas al ≈1,8:1 de la diapositiva 5 (180 px a 1440; antes 158): sin vh, como la letra */
}
/* == fin d5 franja inferior y miniaturas (V3) == */
/* == d8 iconos (V3) == */
/* d8 (2.ª revisión W13, V9): iconos de los 4 valores con el trazo de la diapositiva 8 (≈2,2 px a 55 px: stroke-width 1,9 sobre 48 en lugar de 1,1) y el 1 y el 4 con su dibujo (tres siluetas; apretón de manos con puños). Solo .escena--socios. */
.escena--socios .rasgos--separados .rasgo svg{stroke-width:1.9}
/* == fin d8 iconos (V3) == */
/* d15 Vender a <700 px (remedida cruzada de V6/V9; puente 22-oct: zona de toque ≥44 px sin cambiar el aspecto, como W10 en SEG): a 390 las migas («Inmobiliaria», 20 px de alto), «Descargar PDF» (22 px) y la casilla del consentimiento (18 px) quedaban por debajo de 44 px. La zona de toque se amplía con un ::after transparente (migas y «Descargar PDF», sin mover nada) y con el alto mínimo de la etiqueta de la casilla (la etiqueta activa la casilla). Solo Vender. */
@media (max-width:699.98px){
  .acuerdo-heroe--vende .migas a,.acuerdo-pasos--vende a.boton-documento:not(.boton-documento--oro){position:relative}
  .acuerdo-heroe--vende .migas a::after{content:"";position:absolute;inset:-12px -6px}
  .acuerdo-pasos--vende a.boton-documento:not(.boton-documento--oro)::after{content:"";position:absolute;inset:-11px 0}
  .acuerdo-pasos--vende .casilla{min-height:2.75rem}
}

/* d3 Servicios desde 1100 (W13 rf2, V9 23-oct): el «03» del título «03 NUESTROS SERVICIOS» medía lo que «NUESTROS»; en la diapositiva 3 la altura de tinta del «03» es 14 px frente a 18 px de «NUESTROS» a 1440 (0,78; V9 a ojo 0,85: se queda en 0,8). */
@media (min-width:1100px){.servicios__numero>span:first-child{font-size:.8em}}
/* d3 Servicios desde 1100 (V9 23-oct, orden VS 100 %): ≈40 px de aire de más entre el título y las fotos (a 1440 el «03.1» sale 12 px más abajo que en la diapositiva 3, el título de columna 20 y la foto 26): menos hueco bajo la cabecera y más juntos «03.1», título y foto; en vw. */
@media (min-width:1100px){.servicios__cabeza{margin-bottom:.15vw}.servicio-tarjeta__titulo{margin-top:-.4vw;margin-bottom:-.75vw}}
/* == d8 velo del héroe (V3) == */
/* d8 (V9 revisión: velo mucho más fuerte que la diapositiva 8): medido por franjas la web servida quedaba al 59-76 % de la luminancia de la diapositiva en el cielo/sol (derecha) y se aclara solo en la zona media (22-76 % de abajo arriba); arriba (titular y subtítulo) queda igual o algo más oscuro que antes. Contraste del párrafo POR LÍNEA (texto blanco contra el p99 de luminancia del fondo, sin sombra): mín. 6,09 a 1440 y 5,42 a 2356×1325 (antes 9,32 y 8,64; criterio ≥4,5); titular y subtítulo 3,09/3,92 a 1440 y 2,9/3,57 a 2356 (antes 3,04/3,84 y 2,86/3,44). Solo desde 600 px: el móvil tiene su propio velo. */
@media (min-width:600px){
  .escena--socios .escena__fondo::after{background:linear-gradient(0deg,var(--fondo) 0%,rgba(5,5,5,.5) 22%,rgba(5,5,5,.32) 52%,rgba(5,5,5,.37) 76%,rgba(5,5,5,.2) 100%)}
}
/* == fin d8 velo del héroe (V3) == */
/* Suelo de letra <700 px (regla 4163, barrido W5 23-oct): la franja común de Inmobiliaria (ciudades · lema · «Invierte. Vive. Forma parte.») iba a .56rem (8,96 px) en d10, d16, d11 y d19; a ≥10 px sin tocar de 700 en adelante (d13/d15 conservan su .66rem de <600). */
@media (max-width:699.98px){
  .franja--inmo .franja__fila{font-size:max(10px,.56rem)}
}
@media (min-width:600px) and (max-width:699.98px){
  .franja-socios .franja--inmo .franja__fila{font-size:max(10px,clamp(.56rem,.2rem + .8vw,.68rem))}
}

/* d3 Servicios (diapositiva 3) desde 1441 (W8, medida 10185, orden del VS): cabeza, cita, fotos de 482 px y texto a la medida de la diapositiva escalada a 2356 (1 vw = 23,56 px); la franja inferior sube 56 px y deja de cortarse a 2356×1325. Solo la sección de servicios; 1440 no cambia. */
@media (min-width:1441px){
  .servicios{padding-bottom:calc(1.39*var(--vw))}
  .servicios__cabeza{margin-inline:calc(-.6*var(--vw)) calc(-2.05*var(--vw));margin-bottom:calc(1.32*var(--vw))}
  .servicios__titular{align-items:flex-start;gap:calc(1*var(--vw))}
  .servicios__numero{padding-bottom:0;gap:calc(.6*var(--vw));font-size:calc(1.62*var(--vw))}
  .servicios__titular .acento{margin-top:calc(1.43*var(--vw))}
  .servicios__cita{font-size:calc(1.6*var(--vw))}
  .servicios__lista{margin-inline:calc(-1.65*var(--vw))}
  .servicio-tarjeta:first-child{padding-left:0}
  .servicio-tarjeta:last-child{padding-right:0}
  .servicio-tarjeta__titulo{margin-bottom:calc(-.55*var(--vw))}
  .servicio-tarjeta__foto{aspect-ratio:auto;height:calc(20.46*var(--vw))}
  .servicio-tarjeta>:not(.servicio-tarjeta__foto){margin-left:calc(1.17*var(--vw))}
  .servicio-tarjeta__texto{margin-block:calc(-.83*var(--vw)) calc(-.3*var(--vw));font-size:calc(1.22*var(--vw))}
}
/* d16 un solo oro (4428; regla del VS 5193: si la diapositiva fija el color del elemento, vale el de la diapositiva): el botón «Descubre cómo funciona» del héroe de Invertir era #fbcc7b plano desde 1100 px (el de la diap. 16: píxeles ≈ #f8c878) y el degradado del token por debajo (a 390 salía con degradado y sombra). Mismo color plano a todos los anchos. */
main > section.invertir-heroe--entera .invertir-heroe__texto .boton{background:#fbcc7b;box-shadow:none}

/* d7 pieza única (2.ª cruzada W13/V9 y V16 23-oct): (1) subtítulos de las tarjetas 01-03: en la diapositiva 7 van en serif de titulares, peso normal, mayúsculas espaciadas, en UNA línea de ≈21,4 % (01) y ≈24 % (03) del ancho (medido en pod a 1440: 21,35 % y 24,08 % con estos valores; antes sans 500 de 16,0 % y 13,0 % en 2 líneas); el 02 es en la diap. de ≈8,5 px: por el suelo de 10 px se queda en serif a 10 px y 2 líneas; (2) cuadrante 02: el título a 1.32rem (la línea más larga «DE LUJO EN EMIRATOS ÁRABES» mide 29,4 % del ancho a 1.7rem y 22,6 % en la diap. → ×0,77) para que quede en 2 líneas como la diap. dentro del bloque de 20,3 rem, y el párrafo ≈6 % menor (.94em) como la diap. Solo d7, desde 1100 px; la caja del 04 no se toca. */
@media (min-width:1100px){
  .cuadrante:not(:nth-child(4)) .cuadrante__texto .rotulo:not(.rotulo--caja){font-family:var(--fuente-titulares);font-weight:400}
  .cuadrante:nth-child(1) .cuadrante__texto .rotulo{font-size:.88rem;letter-spacing:.12em;white-space:nowrap}
  .cuadrante:nth-child(2) .cuadrante__texto .rotulo{font-size:max(10px,.64rem);letter-spacing:.1em}
  .cuadrante:nth-child(3) .cuadrante__texto .rotulo{font-size:.72rem;letter-spacing:.12em;white-space:nowrap}
}
@media (min-width:1400px){
  .cuadrante:nth-child(2) .cuadrante__titulo{font-size:1.32rem}
  .cuadrante:nth-child(2) .cuadrante__texto .texto-serif{font-size:.94em}
}
/* d15 Vender, lema lateral a todos los anchos (V9, rev3 parte 3): a 390 las 4 frases del lema («Marketing profesional. / Fotografía con dron si es necesario. / Compradores internacionales. / Máximo valor.») salían pegadas en un bloque porque el reparto solo estaba desde 1400 px; ahora cada frase en su línea con aire a cualquier ancho. */
.acuerdo-heroe--vende .lema-lateral__frase{display:block;margin-bottom:.7em}


/* d10 Círculo de Socios (registro) a <700 px (barrido W5/V9, suelo de 10 px): el subtítulo del héroe (9,92 px), los textos de la banda «Acuerdo firmado» (Descargar / Acceso al área / Socio activado, 9,92 px) y «Firmar acuerdo con DocuSign» (9,6 px a 600-699) a 10 px como mínimo; y a 600 px la franja de cierre de Socios desbordaba 2 px (scrollWidth 602): menos hueco entre sus tres bloques. Solo Socios (.acuerdo-heroe--socios, .firmado--socios, .franja-socios, .acuerdo-pasos--socios). */
@media (max-width:699.98px){
  .acuerdo-heroe--socios .acuerdo-heroe__texto .rotulo{font-size:max(10px,.62rem)}
  .firmado.firmado--socios span{font-size:max(10px,clamp(.62rem,.5rem + .3vw,.78rem))}
  .acuerdo-pasos--socios .boton--indicativo{font-size:max(10px,.6rem)}
}
@media (min-width:600px) and (max-width:699.98px){
  main:has(.acuerdo-pasos--socios) .franja-socios .franja--inmo .franja__fila{column-gap:.5rem}
}

/* == contacto aviso de error (V3) == */
/* Contacto (parte 2, V9): el aviso rojo de error quedaba a ≈7 px de la etiqueta «Nombre completo»: el aire del resto del formulario. */
.contacto30__marco .formulario__aviso{margin-bottom:var(--e-5)}
/* == fin contacto aviso de error (V3) == */
/* == d8 velo móvil (V3) == */
/* d8 a 390 (3966 «informe» vs 5097/5105 contraste ≥4,5 manda; V9 y el puente 23-oct): no hay diapositiva móvil, así que el velo del héroe solo se oscurece por debajo de 600 px. Contraste por línea (texto blanco vs p99 del fondo, pod, es/en, antes → después): titular 3,05-3,51 → 4,23-4,84 (es) y 3,06 → 4,25 (en); subtítulo 3,92-4,00 → 5,37-5,48 (es) y 3,33-4,61 → 4,62-6,15 (en); rótulo del vídeo 4,53-4,83 → 6,24-6,63 (es) y 3,89-4,58 → 5,45-6,30 (en); párrafo mín. 4,14 → 5,84 (es) y 4,32 → 6,03 (en). Desde 600 px el velo no cambia (capturas idénticas, md5). */
@media (max-width:599.98px){
  .escena--socios .escena__fondo::after{background:linear-gradient(0deg,var(--fondo) 0%,rgba(5,5,5,.7) 22%,rgba(5,5,5,.58) 50%,rgba(5,5,5,.42) 100%)}
}
/* == fin d8 velo móvil (V3) == */

/* == d19 paso 02, DocuSign e iconos (W11) == */
/* d19 (V9 medir-r2-d19-B, COORD 23-oct): (1) «Firmar acuerdo con DocuSign» en dorado pleno, opacity 1, sin enlace (4360/5211: indicativo, no apagado); (2) las áreas de texto del paso 02 (133×22 px) a 24 px como mínimo; (3) los iconos de la franja de 4 valores a la medida de la diapositiva (39 px → ≈53 a 1440, ≈86 a 2356, en rem; el título de 10,9 → ≈12,1 px). */
#paso-acuerdo-4 .boton--indicativo[aria-disabled="true"],#paso-acuerdo-4 .boton--indicativo[aria-disabled="true"]:hover{opacity:1}
#paso-acuerdo-2 .campo textarea{min-height:max(24px,1.5rem)}
@media (min-width:1100px){
  .invertir-acuerdo~.cierre-rasgos .rasgos--circulo .rasgo>svg{width:2rem;height:2rem;padding:.55rem}
}
@media (min-width:1280px){
  .invertir-acuerdo~.cierre-rasgos .rasgos--circulo .rasgo__titulo{font-size:.76rem}   /* a 1100 con .76rem «Un socio a largo plazo» partía en 2 líneas (medido en pod: 174×32): el título mayor solo desde 1280 */
}
/* == fin d19 paso 02, DocuSign e iconos (W11) == */
/* d19 franja de 4 casillas, lo que no cubren las piezas de W7 (rayas, trazo del anillo y serif; COORD 23-oct): el glifo del icono era pequeño y fino (el 4.º casi apagado) y el texto de cada casilla iba a .68rem en 1 línea donde la diapositiva pone 2 (la 4.ª, 1). Medido en pod, es y en: glifo mayor dentro de un anillo de 52,4 px a 1440 (diap. 52,5); texto .84rem desde 1280 con 2/2/2/1 líneas; de 1100 a 1279 solo el icono (el texto mayor partía en 3 líneas). */
@media (min-width:1100px){
  .invertir-acuerdo~.cierre-rasgos .rasgos--circulo .rasgo>svg{width:2.45rem;height:2.45rem;padding:.35rem;stroke-width:2}
}
@media (min-width:1280px){
  .invertir-acuerdo~.cierre-rasgos .rasgos--circulo .rasgo__texto{font-size:.84rem;max-width:14.8em}
}
/* d6 /construccion (revisión de órdenes V9, 23-oct; 2300 y 5170): (1) la foto del héroe va ENTERA a ≥1100 (la caja medía 1,754 con la foto a 1,849 y el cover recortaba ≈5 % de los lados en es a 2356; en en ≈1 %): la caja con la proporción de la foto (1705/922), sin franjas vacías (V9: mejor que contain); (2) el rótulo «NUESTROS SERVICIOS / OUR SERVICES» en TS Didot como la diapositiva (salía en Jost) y el titular con el opsz 24 de la receta, solo d6. */
@media (min-width:1100px){.servicio--construccion .servicio__foto{align-self:start}.servicio--construccion .servicio__foto img{height:auto;min-height:0;aspect-ratio:1705/922;object-fit:cover}}
.servicio--construccion .servicio__numero .rotulo{font-family:var(--fuente-titulares);font-weight:400;font-variation-settings:"opsz" 9}
@media (min-width:1441px){.servicio--construccion .servicio__titulo{font-variation-settings:"opsz" 24}}
/* d6: sin la banda negra bajo la foto del héroe (DECIDIDO 5451, COORD 23-oct; medido en pod: 24 px a 1440 y 39 a 2356 entre el pie de la foto y el pie de la columna del texto). A ≥1100 el hueco entre los bloques del texto baja de 9 a 4 unidades (--u): la columna acaba con la foto (banda 0 a 1280-2356 en es y en); a 1100-1279 en es sobra 4-11 px y la foto, en lugar de quedarse corta, llena la fila (recorte <3 %). */
@media (min-width:1100px){.servicio--construccion .servicio__texto{gap:calc(4 * var(--u))}}
@media (min-width:1100px) and (max-width:1279.98px){.servicio--construccion .servicio__foto{align-self:stretch}.servicio--construccion .servicio__foto img{height:100%;aspect-ratio:auto;min-height:0}}
/* == d8 velo móvil ancho (V3) == */
/* d8 de 480 a 599 px (V9 y puente 23-oct, 5097/5105 ≥4,5): con el velo móvil de pt693 la 1.ª línea del subtítulo a 599 quedaba en 4,30-4,34 (es/en); de 480 a 599 el velo sube a .75/.62/.46 (subtítulo 4,87-4,92, rótulo del vídeo ≥7,2, párrafo ≥6,5 a 599). A 390 y desde 600 px no cambia (capturas idénticas, md5). */
@media (min-width:480px) and (max-width:599.98px){
  .escena--socios .escena__fondo::after{background:linear-gradient(0deg,var(--fondo) 0%,rgba(5,5,5,.75) 22%,rgba(5,5,5,.62) 50%,rgba(5,5,5,.46) 100%)}
}
/* == fin d8 velo móvil ancho (V3) == */

/* d9 «Cómo funciona», tarjetas de paso (W7 23-oct: sin el tope de 400 px, que era ×1,2 del fichero viejo de 333; con los webp 999/1998 de pt774 y el original de 538 px, a 2356 la foto llena la tarjeta, 481 de 510 = ×0,9 del original, como a 1440) (parte 3 de W13, V9): (1) a 2356 la foto medía 333 px (el <picture> es un hijo flex centrado y medía el ancho de su fuente, 333 px) en una tarjeta de 510 (hueco de 88 px a cada lado; en la diap. llena la tarjeta; a 1440 sí la llena: 293 de 311): ocupa todo el ancho de la tarjeta hasta ×1,2 de su original (400 px; norma 4912: ≥1920 se puede ×1,2, nunca por debajo) y centrada; (2) el último texto de la tarjeta 04 quedaba a 6 px (1440) y 9 px (2356) del borde inferior y la diap. deja ≈20 px: relleno inferior de 1,25 rem desde 1100 px (en rem, crece con la raíz). Solo «Cómo funciona» de Círculo de Socios. */
@media (min-width:1100px){
  .escena--socios-como .paso-tarjeta picture{width:100%;max-width:100%}
  .escena--socios-como .paso-tarjeta{padding-bottom:1.25rem}
}

/* NO CUMPLE de órdenes en mis páginas (V9, NO-CUMPLE-W7.tsv), d12 4577: el degradado ámbar de la franja izquierda de «Promociones seleccionadas» pasa de .5/.3 a .38/.23 de opacidad (≈ −10 puntos de luminancia en esa franja de 0-4 %). Solo ≥1100 px. (El d17 4072, interlineado 1,4, lo hace W10 en e6f3c2c470.) */
@media (min-width:1100px){
  .escena--desarrollos .escena__fondo::after{background:linear-gradient(90deg,rgba(255,176,96,.38) 0,rgba(255,176,96,.23) 2%,rgba(255,176,96,0) 4%),linear-gradient(0deg,rgba(5,5,5,.6) 0%,rgba(5,5,5,.3) 35%,rgba(5,5,5,.12) 65%,rgba(5,5,5,.35) 100%)}
}

/* d7 cuadrante 02, ajuste sobre lo servido (medido en PRUEBAS pt701, V16): el título a 1.32rem seguía en 3 líneas porque «DE LUJO EN EMIRATOS ÁRABES» (22,8 % del ancho) no cabía en los 20,3 rem de la caja (22,6 %): a 1.25rem mide ≈21,6 % y queda en 2 líneas como la diapositiva; y el párrafo del 02 salía a 15,04 px (.94em de la raíz) más grande que el de las tarjetas 01 y 03 (14,83 px): el 94 % del tamaño de las tarjetas (≈13,9 px a 1440), como la diapositiva (≈ −6 %). Solo ≥1400 px. */
@media (min-width:1400px){
  .cuadrante:nth-child(2) .cuadrante__titulo{font-size:1.25rem}
  .cuadrante:nth-child(2) .cuadrante__texto .texto-serif{font-size:calc(min(1rem,max(11.6px,1.03vw)) * .94)}
}


/* d3 Servicios, lema a 1100-1440 (W8, medida tanda-2casos): secciones.css rige la cita con clamp(1.15rem,.8rem + 1.1vw,2rem) hasta 1440 (28,64 px a 1440, ≈23 % mayor que la diapositiva 3) y desde 1441 con 1,6 vw (23,06 px): salto en 1440→1441. La diapositiva la lleva a 1,6 vw en 2 líneas (≈18,2 vw de ancho): mismo 1,6 vw de 1100 a 1440. */
@media (min-width:1100px) and (max-width:1440px){.servicios__cita{font-size:1.6vw}}

/* d9 «Cómo funciona» a 390 (V9 5097/5105, puente 23-oct 06:2x): el párrafo de la introducción, claro sobre la foto clara, daba p99 2,6-3,3 por línea (es y en) a 360/390/430/599 (ES a 360: 4,59); el velo radial de la foto no cubre sus 8 líneas. Velo LOCAL pegado al párrafo (pseudo-elemento detrás, sin mover el texto ni tocar la foto fuera de su caja), α .32: p99 mínimo ≥5,0 a 360/390/430/599, es y en (texto oculto, 60 % central de cada línea). Solo ≤699 px; desde 700 queda lo de siempre. */
@media (max-width:699.98px){
  .escena--socios-como .escena__cabeza .escena__texto{position:relative;isolation:isolate}
  .escena--socios-como .escena__cabeza .escena__texto::before{content:"";position:absolute;z-index:-1;inset:-.7rem -.6rem;border-radius:.5rem;background:rgba(5,5,5,.32);box-shadow:0 0 .9rem .6rem rgba(5,5,5,.32);pointer-events:none}
}

/* d11 (puente 5438, W7 lámina 23-oct): en la diapositiva 11 hay una raya dorada BAJO el bloque izquierdo («DUBÁI | ABU DABI» y sus dos líneas) y la de la cita va DEBAJO de ella, no encima: la de la izquierda faltaba y la de la cita iba arriba. Solo el héroe de Emiratos; por debajo de 1100 px los laterales van centrados y las rayas con ellos. */
.escena--uae .escena__lado--izq::after{content:"";display:block;width:2.8rem;height:1px;margin-top:var(--e-4);background:var(--oro)}
.escena--uae .escena__lado--der .cita-lateral::before{content:none}
.escena--uae .escena__lado--der .cita-lateral::after{content:"";display:block;width:3.2rem;height:1px;margin-top:var(--e-4);background:var(--oro)}
@media (max-width:1099.98px){.escena--uae .escena__lado--izq::after,.escena--uae .escena__lado--der .cita-lateral::after{margin-inline:auto}}
/* d16 héroe de Invertir (orden 4044, DECIDIDO 5456): el panel lateral derecho es una columna oscura translúcida y su texto arranca al 90,4 % del ancho con 9,3 % de ancho (antes 89,0 / 9,9 %, sin fondo)*/
@media (min-width:1366px){.invertir-heroe--entera .invertir-heroe__lado{padding-left:2.4vw;padding-right:.3vw;background:rgba(5,5,5,.85)}}
/* d16 héroe de Invertir (orden 4044 «como la diap.», DECIDIDO 5456): el botón DESCUBRE CÓMO FUNCIONA mide 23,4 × 3,5 % del ancho desde 1366 px (antes 26,3 × 4,5 % es / 24,7 % en); entre 1100 y 1365 px sigue con la medida anterior (con la nueva el texto se salía del botón); el color plano de W1 no se toca */
@media (min-width:1366px){.invertir-heroe--entera .invertir-heroe__texto .boton{width:23.4vw;min-height:3.5vw;padding:0 1.2vw;white-space:nowrap;box-sizing:border-box}}
/* d16 (DECIDIDO 5517): titular, subtítulo, párrafo y botón arrancan juntos al ≈3,1 % del ancho en la diapositiva (la web, 3,9 %): se corre el bloque entero, sin cambiar el ancho del texto ni las líneas del titular */
@media (min-width:1366px){.invertir-heroe--entera .invertir-heroe__texto{padding-left:calc(var(--margen) - .8vw)}}
/* d19 (V9 23-oct, lámina laminas/d19-franja-pt721a.png): la franja de cuatro casillas del acuerdo lleva en la diapositiva una raya dorada fina arriba y otra abajo, a todo el ancho, y el trazo del anillo de sus iconos es oro pleno (a 2356 el 1,5 px fijo de la web queda 2,6 veces más fino que el de la diapositiva escalada): rayas a todo el ancho con ::before/::after (a todo el ancho; body.web ya recorta overflow-x) y anillo proporcional al ancho (mínimo el 1,5 px de siempre). Solo .invertir-acuerdo~.cierre-rasgos. */
.invertir-acuerdo~.cierre-rasgos{position:relative}
.invertir-acuerdo~.cierre-rasgos::before,.invertir-acuerdo~.cierre-rasgos::after{content:"";position:absolute;left:50%;width:100vw;height:1px;transform:translateX(-50%);background:var(--oro);pointer-events:none}
.invertir-acuerdo~.cierre-rasgos::before{top:0}
.invertir-acuerdo~.cierre-rasgos::after{bottom:0}
.invertir-acuerdo~.cierre-rasgos .rasgos--circulo .rasgo>svg{border-width:max(1.5px,.16vw)}

/* d19 (V9 23-oct): el texto de las cuatro casillas de la franja del acuerdo va en la serif de los titulares, como la diapositiva (la franja de d17, .invertir-como, ya lo hacía): «Accede a oportunidades únicas / de inversión en Barcelona.» */
.invertir-acuerdo~.cierre-rasgos .rasgos--circulo .rasgo__texto{font-family:var(--fuente-titulares)}
/* d16 héroe de Invertir (orden 4044, DECIDIDO 5456): entre 1100 y 1365 px el botón también mide 23,4 × 3,5 % del ancho, con la letra a 1,25vw (13,75 px a 1100, 17,06 a 1365) para que el texto quepa en 1 línea sin salirse (medido es/en a 1100, 1180, 1280, 1365) */
@media (min-width:1100px) and (max-width:1365.98px){.invertir-heroe--entera .invertir-heroe__texto .boton{width:23.4vw;min-height:3.5vw;padding:0 .8vw;white-space:nowrap;box-sizing:border-box;font-size:1.25vw}}

/* Orden de Víctor (22-oct 13:36): la foto de la tarjeta lleva al mismo destino que su botón (marcas del Showroom y folletos de Invierte en UAE), sin abrir la imagen; los rótulos de encima no interceptan el clic */
.marca-cat__foto-enlace,.desarrollo__foto-enlace{display:block}
.desarrollo__marco .desarrollo__rotulo{pointer-events:none}

/* d11 (V9 23-oct, lámina real del pod diapositiva-11-es.png, DOM pt723): en la diapositiva 11 el bloque izquierdo del héroe va en 2 líneas («DOS CIUDADES ICÓNICAS / UNA OPORTUNIDAD EXTRAORDINARIA») y la cita en 4 líneas estrechas; la web los partía en 3 y en 2 anchas (a 1440 con el espaciado .2em la línea larga pedía 353 px y la caja eran 272). Con CSS inyectado antes: bloque izquierdo a 20 rem con .1em de espaciado → 2 líneas (307 px a 1440, 495 a 2356, sin tocar el titular que empieza en 397/649); cita a 7,4 em → 4 líneas (160 px a 1440, 262 a 2356). Solo el héroe de Emiratos, desde 1100 px (debajo van centrados y apilados). */
@media (min-width:1100px){
  .escena.escena--uae:has(h1.escena__titulo)>.escena__lado--izq{max-width:20rem}
  .escena--uae .escena__lado--izq .rotulo--texto{letter-spacing:.1em}
  .escena--uae .cita-lateral{max-width:7.4em}
}

/* d19-resto (W7, medido en vivo sobre pruebas, es y en, a 2356 y 1440; diap. 19 escalada ×1,409 y ×0,861): el texto de las cuatro casillas de la franja iba a .84rem y el título a .76rem, 15-20 % mayores que en la diapositiva (título «Oportunidades exclusivas» 310 px frente a 270; descripción 313 frente a 264), y por eso la 2.ª casilla partía «Condiciones claras y / transparencia en cada paso.» donde la diapositiva pone «Condiciones claras y transparencia / en cada paso.». Tamaño de la diapositiva (título .66rem, texto .7rem) y caja de texto de 15em (16.5em en la 2.ª) para que el corte caiga donde la diapositiva: «…únicas / de inversión…», «…transparencia / en cada paso.», «…preparados por / nuestro equipo legal.». Solo .invertir-acuerdo~.cierre-rasgos y desde 1280, como las reglas que corrige. */
@media (min-width:1280px){
  .invertir-acuerdo~.cierre-rasgos .rasgos--circulo .rasgo__titulo{font-size:.66rem}
  .invertir-acuerdo~.cierre-rasgos .rasgos--circulo .rasgo__texto{font-size:.7rem;max-width:15em}
  .invertir-acuerdo~.cierre-rasgos .rasgos--circulo .rasgo:nth-child(2) .rasgo__texto{max-width:16.5em}
}

/* d19 paso 01 (W7; codex/w7/d19-resto.md fila 3, medido en vivo es a 2356 y 1440): en la diapositiva 19 el contenido de la 1.ª columna del acuerdo empieza donde el texto del héroe (su margen lateral) y las cuatro columnas son desiguales (641/557/573/585 px a 2356; aquí 641/589/541/585: la 02 conserva su ancho para que «He leído y acepto…» y «Presupuesto estimado de reforma» no se partan, y lo cede la 03, que va holgada); lo servido las llevaba iguales y con el contenido a 26 px (2356) y 16 px (1440). Desde 1440 (de 1100 a 1439 los formularios van justos y quedan como estaban). */
@media (min-width:1440px){
  .invertir-acuerdo{grid-template-columns:minmax(0,641fr) minmax(0,589fr) minmax(0,541fr) minmax(0,585fr)}
  .invertir-acuerdo>li:first-child{padding-left:var(--margen)}
}

/* Revisión de maqueta (W7, 5527; d13 Propiedades exclusivas a 390, medido en vivo con el CSS inyectado, es y en): por debajo de 700 el texto empezaba bajo la cabecera y el velo (.58-.78) tapaba la foto, de la que apenas asomaba una franja oscura detrás del titular; en la diapositiva la masía con su piscina es lo principal. Como el resto de héroes en móvil: la foto arriba a su proporción (66vw + cabecera), sin velo salvo el fundido de abajo, y el texto debajo sobre negro. Desde 700 no cambia. */
@media (max-width:699.98px){
  .heroe.heroe--exclusivas .heroe__fondo{height:calc(var(--alto-cabecera) + 66vw)}
  .heroe--exclusivas .heroe__fondo img{object-position:60% 50%}
  .heroe.heroe--exclusivas .heroe__fondo::after{background:linear-gradient(0deg,var(--negro) 0%,rgba(0,0,0,.6) 14%,rgba(0,0,0,0) 40%,rgba(0,0,0,0) 78%,rgba(0,0,0,.45) 100%)}
  .heroe--exclusivas .heroe__contenido{padding-top:calc(var(--alto-cabecera) + 54vw)}
}