/* Inversalia — hoja de estilo (v9, 22-oct-2026)
   Base: la v8 (la web publicada, «Decisiones inmobiliarias»), con tres cosas de la v7:
   el logotipo grande en la primera pantalla que se encoge hasta la cabecera, las llamadas a la acción
   en mayúsculas con una línea debajo y la frase que se queda quieta mientras el bloque siguiente la tapa.
   · Fondos claros en Parchment y Greige; bandas en azul noche.
   · Cabecera a pantalla completa con foto en gris y titular abajo a la izquierda; la sección siguiente sube por encima con esquinas redondeadas.
   · Ranade 300 en titulares, Source Sans 3 en el texto; numeración en Sandy Clay.
   · Llamadas a la acción en mayúsculas con línea debajo (la de arriba se dibuja al pasar el ratón); los enlaces llevan además flecha.
   Valores sacados del kit de Elementor de la web anterior (site-settings.json). */

:root{
  --orilla:clamp(16px,2.5vw,40px);       /* margen de las tiras (Oportunidades y equipo) */
  --indigo:#112A55;
  --arena:#DBB07E;
  --arena-osc:#775934;                    /* 4-nov: antes #9A7444; sobre el gris nuevo daba 3,4:1 (Lighthouse). Ahora 5,2:1 sobre --niebla y 4,6:1 sobre --greige */
                                          /* arena legible sobre claro (texto pequeño) */
  --pergamino:#F7F5F2;                    /* claro para texto sobre azul (3-nov: ya no es fondo) */
  --niebla:#E6E7E9;                       /* 3-nov (documento de cambios de Inversalia): el fondo gris de toda la web, en lugar del blanco/marfil */
  --greige:#D6D9DE;                       /* 3-nov: gris un punto más oscuro que el fondo (antes #DCD8D0, cálido) */
  --pizarra:#37496C;
  --noche:#101F38;
  --tinta:#0E141B;
  --gris:#424E66;                          /* texto secundario sobre claro (28-oct: más oscuro, por contraste) */
  --linea:rgba(17,42,85,.22);
  --linea-suave:rgba(17,42,85,.12);
  --linea-clara:rgba(247,245,242,.55);
  --titular:"Ranade","Helvetica Neue",Arial,sans-serif;
  --texto:"Source Sans 3",system-ui,-apple-system,sans-serif;
  --ancho:1100px;                          /* el container_width de la web anterior */
  --ancho-g:1240px;
  --borde:clamp(16px,3.4vw,40px);
  --cabecera:84px;
  --radio:2px;                           /* bordes rectos en toda la web (v10) */
  --aire:clamp(80px,10vw,140px);
  --suave:cubic-bezier(.2,.7,.2,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;overflow-x:clip;scroll-behavior:smooth;scroll-padding-top:var(--cabecera)}
body{background:var(--niebla);color:var(--indigo);font-family:var(--texto);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul,ol{list-style:none}
h1,h2,h3{font-family:var(--titular);font-weight:300;line-height:1.18;letter-spacing:0}
h2{font-size:clamp(28px,3.4vw,40px)}
h3{font-size:clamp(20px,2vw,25px)}
b,strong{font-weight:600}
:focus-visible{outline:2px solid var(--arena);outline-offset:3px}

.marco{width:100%;max-width:calc(var(--ancho) + 2*var(--borde));margin:0 auto;padding:0 var(--borde)}
.marco.ancho{max-width:calc(var(--ancho-g) + 2*var(--borde))}
.centro{text-align:center}
.apoyo{color:var(--gris);font-size:clamp(16px,1.25vw,18px);font-weight:300;line-height:1.6;max-width:62ch}
.centro .apoyo{margin-left:auto;margin-right:auto}

/* ---------- Botones y enlaces (de la v7: mayúsculas, línea debajo y línea arriba al pasar el ratón) ---------- */
.boton,.enlace{position:relative;display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:12px 0 11px;border:0;border-bottom:1px solid currentColor;border-radius:0;
  background:none;color:inherit;font-family:var(--texto);font-size:13.5px;font-weight:600;letter-spacing:.09em;line-height:1.25;text-transform:uppercase;text-align:left;cursor:pointer;
  transition:color .3s var(--suave),gap .3s var(--suave)}
.boton::before,.enlace::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:0 50%;transition:transform .45s var(--suave)}
.boton:hover::before,.boton:focus-visible::before,.enlace:hover::before,.enlace:focus-visible::before{transform:scaleX(1)}
.boton:hover,.enlace:hover{color:var(--arena-osc)}
.oscuro .boton:hover,.oscuro .enlace:hover,.sobre-foto .boton:hover,.sobre-foto .enlace:hover{color:var(--arena)}
.enlace{font-weight:500}
.enlace::after{content:"";width:12px;height:12px;flex:none;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M0 5.2h9.2L5.6 1.6 6.7.5 12 6l-5.3 5.5-1.1-1.1 3.6-3.6H0z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M0 5.2h9.2L5.6 1.6 6.7.5 12 6l-5.3 5.5-1.1-1.1 3.6-3.6H0z'/%3E%3C/svg%3E") center/contain no-repeat}
.enlace:hover{gap:14px}
.subrayado{text-decoration:underline;text-underline-offset:3px}
.subrayado:hover{color:var(--arena-osc)}
.provisional{display:inline-block;margin:0 0 10px;padding:3px 8px;border:1px dashed currentColor;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--arena-osc)}
.oscuro .provisional{color:var(--arena)}

/* ---------- Cabecera ---------- */
.cabecera{position:fixed;inset:0 0 auto 0;z-index:50;height:var(--cabecera);color:var(--pergamino);
  transition:background .4s var(--suave),color .4s var(--suave),box-shadow .4s var(--suave),height .4s var(--suave)}
.cabecera .marco{height:100%;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;max-width:none;padding:0 clamp(16px,3.4vw,48px)}
.cabecera .logo{grid-column:2}
.cabecera .logo svg,.cabecera .hueco-logo{display:block;width:clamp(132px,12.5vw,172px);height:auto;aspect-ratio:1358/142}
/* Portada: el logotipo grande vive fuera de la cabecera y se encoge hasta el hueco (sitio.js); el menú aparece cuando llega */
.logo-grande{position:fixed;z-index:51;left:0;top:0;color:var(--pergamino);transform-origin:50% 50%;will-change:transform;transition:color .4s var(--suave)}
.logo-grande svg{display:block;width:100%;height:auto}
/* 29-oct: con el selector de sede e idioma abierto arriba del todo, la cabecera (transparente) pasa por encima del logotipo
   grande, que tapaba «PT» y parte de «ES» en portátiles de unos 1280 px. Con la cabecera sólida no hace falta y lo taparía */
.idiomas-abiertos .cabecera:not(.solida){z-index:52}
.logo-grande.tinta{color:var(--indigo)}
.portada .cabecera nav{opacity:var(--menu,0);visibility:visible}
.portada:not(.menu-visible) .cabecera nav{pointer-events:none}
.sin-js .logo-grande{display:none}
.sin-js .portada .cabecera nav{opacity:1}
.js-logo .cabecera .logo svg{opacity:0}
.cabecera nav{display:flex;gap:clamp(24px,3vw,46px);font-family:var(--texto);font-weight:400;font-size:16.5px;letter-spacing:.02em}
.cabecera nav.dcha{justify-content:flex-end}
.cabecera nav .pendiente{cursor:default}
.cabecera nav a::after,.cabecera nav button::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:0 50%;transition:transform .45s var(--suave)}
.cabecera nav a:hover::after,.cabecera nav button:hover::after,.cabecera nav a:focus-visible::after{transform:scaleX(1)}
.cabecera nav a,.cabecera nav button{position:relative;padding:6px 0;transition:color .25s}
.cabecera nav a:hover,.cabecera nav button:hover,.cabecera nav [aria-current]{color:var(--arena)}
.cabecera.solida{background:rgba(230,231,233,.96);color:var(--indigo);box-shadow:0 1px 0 var(--linea-suave);height:70px;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.cabecera.solida nav [aria-current]{color:var(--arena-osc)}
/* Sede e idioma (29-oct): «España · ES» a la derecha de Contacto; al hacer clic, una caja con las sedes y, debajo, los idiomas */
.cabecera .idioma{position:relative;display:flex;align-items:center}
.cabecera nav .idioma-actual{display:flex;align-items:center;gap:7px;color:inherit}
.cabecera .idioma-actual i{font-style:normal;opacity:.55}
.cabecera .idioma-actual svg{width:9px;height:6px;fill:none;stroke:currentColor;stroke-width:1.3;margin-left:2px;transition:transform .35s var(--suave)}
.cabecera .idioma-actual[aria-expanded="true"] svg{transform:rotate(180deg)}
.cabecera .idiomas{position:absolute;top:calc(100% + 14px);right:-20px;min-width:270px;padding-top:8px;
  background:var(--niebla);color:var(--indigo);border:1px solid var(--linea-suave);box-shadow:0 14px 34px rgba(17,42,85,.12)}
.cabecera .lista-sedes{list-style:none;margin:0;padding:0 0 8px}
.cabecera nav .lista-sedes a,.cabecera .lista-sedes .sin-web{display:flex;justify-content:space-between;align-items:baseline;gap:28px;padding:10px 20px;font-size:15.5px;white-space:nowrap}
.cabecera .lista-sedes b{font-weight:400}
.cabecera .lista-sedes b + span{font-size:13.5px;color:var(--gris)}
.cabecera .lista-sedes .sin-web{cursor:default}
.cabecera nav .lista-sedes a::after{left:20px;right:20px;bottom:6px}
.cabecera .lista-idiomas{display:flex;gap:24px;padding:10px 20px 12px;border-top:1px solid var(--linea-suave)}
.cabecera nav .lista-idiomas a{font-size:13.5px;letter-spacing:.12em}
/* 29-oct (2): «Idioma» a la derecha, como la ciudad o «Próximamente» en las sedes */
.cabecera .lista-idiomas span{margin-left:auto;align-self:center;font-size:13.5px;color:var(--gris)}
.cabecera nav .idiomas a:hover,.cabecera nav .idiomas [aria-current]{color:var(--arena-osc)}
.boton-menu{display:none;grid-column:3;justify-self:end;width:44px;height:44px;position:relative}
.boton-menu span,.boton-menu span::before,.boton-menu span::after{position:absolute;left:10px;width:24px;height:1.5px;background:currentColor;content:""}
.boton-menu span{top:21px}.boton-menu span::before{left:0;top:-7px}.boton-menu span::after{left:0;top:7px}

/* ---------- 1. Primera pantalla ---------- */
.portada-foto{position:relative;height:100svh;min-height:560px;color:var(--pergamino);overflow:hidden;background:#6d6f72}
.portada-foto img,.portada-foto video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(.95) brightness(.78);transform:scale(1.04);transition:transform 2.6s var(--suave)}
.portada-foto.lista img,.portada-foto.lista video{transform:none}
/* 3-nov (noche): el vídeo de fondo nunca enseña controles ni el botón de play de Safari (sale cuando el iPhone no lo deja
   arrancar solo, p. ej. en modo de bajo consumo: entonces se ve su primer fotograma y arranca con el primer toque) */
.video-portada{pointer-events:none}
.video-portada::-webkit-media-controls,.video-portada::-webkit-media-controls-panel,.video-portada::-webkit-media-controls-overlay-play-button,
.video-portada::-webkit-media-controls-start-playback-button{display:none!important;-webkit-appearance:none;opacity:0}
/* 29-oct: el vídeo se ve desde el principio, con su primer fotograma de póster (sitio.js); antes esperaba invisible y en iPhone no arrancaba */
/* 28-oct (tarde): vídeo y su primer fotograma centrados a lo alto y a lo ancho; para subirlo o bajarlo, --foco-video */
.portada-foto video,.portada-foto picture img{object-position:50% var(--foco-video,50%)}
.portada-foto::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,20,27,.35) 0%,rgba(14,20,27,0) 26%,rgba(14,20,27,0) 50%,rgba(14,20,27,.45) 100%)}
.portada-foto .texto{position:absolute;z-index:1;left:0;right:0;bottom:clamp(84px,11vh,120px)}
.portada-foto h1{font-size:clamp(30px,3.4vw,48px);line-height:1.16;max-width:900px;text-wrap:balance}
.portada-foto .lema{max-width:58ch;margin-top:14px;font-family:var(--titular);font-weight:300;font-size:clamp(18px,1.6vw,23px);line-height:1.35;color:rgba(247,245,242,.86)}
.portada-foto.corta{height:74svh;min-height:480px}
/* Firma (28-oct): portada en azul noche, sin foto */
.portada-foto.noche{height:62svh;min-height:420px;background:var(--noche)}
.portada-foto.noche::after{display:none}
.escena{position:relative}
.escena > .portada-foto{position:sticky;top:0}
.portada-foto .titular-portada{position:absolute;z-index:1;left:50%;top:62%;width:min(92vw,34em);translate:-50% 0;text-align:center;
  font-family:var(--titular);font-weight:300;font-size:clamp(20px,1.9vw,30px);line-height:1.2;letter-spacing:-.005em}
.portada-foto .titular-portada small{display:block;margin-top:14px;font-size:.62em;line-height:1.4;letter-spacing:.01em;color:rgba(247,245,242,.88)}
/* 28-oct: el titular y el botón «Hablar con nuestro equipo» van juntos; el h1 toma la letra del bloque */
.portada-foto .titular-portada h1{font:inherit;line-height:inherit;letter-spacing:inherit;max-width:none}
.portada-foto .titular-portada .boton{margin-top:clamp(18px,2.6vh,26px)}
/* En ordenador, el titular en una sola línea y algo más pequeño.
   28-oct (tarde): portada más corta (93 % de la pantalla) y el logotipo con el texto, juntos y centrados en lo que
   se ve entre la cabecera y el bloque que sube (sitio.js pone el top). El menú se ve desde el principio, sin fondo */
@media (min-width:821px){
  .escena > .portada-foto{height:93svh;min-height:560px}
  .portada .cabecera nav{opacity:1}
  .portada:not(.menu-visible) .cabecera nav{pointer-events:auto}
  .portada-foto .titular-portada{top:62%;bottom:auto;width:max-content;max-width:94vw;white-space:nowrap;font-size:clamp(17px,1.65vw,26px)}
  .portada-foto .titular-portada br{display:none}
  .portada-foto .titular-portada small{font-size:.72em}
}
.portada-foto .acciones{margin-top:clamp(24px,3.4vh,36px);display:flex;gap:28px;flex-wrap:wrap;align-items:center}
.portada-foto .acciones{gap:18px 40px}

/* La sección siguiente sube por encima de la cabecera, con esquinas redondeadas */
.sube{position:relative;z-index:2;margin-top:-56px;border-radius:var(--radio) var(--radio) 0 0}

/* La idea central y las operaciones van juntas (de la v7; 29-oct, antes con «Proceso de un NPL»): la idea se queda
   quieta (el tope lo pone sitio.js), las operaciones suben por encima y, como van dentro de .pareja, se marchan a la vez */
.pareja{position:relative;z-index:2;margin-top:-56px}
.pareja .idea{position:sticky;top:var(--tope-idea,0px);border-radius:var(--radio) var(--radio) 0 0}
.pareja .oportunidades{position:relative;z-index:1;border-radius:var(--radio) var(--radio) 0 0;box-shadow:0 -30px 60px rgba(14,20,27,.10)}
/* 3-nov (documento de cambios de Inversalia): en ordenador, sin el corte claro al pie del vídeo. El bloque sube un poco
   más (12vh) y su parte de arriba es un fundido del vídeo al gris, que viaja con él al bajar; el texto no se mueve
   (el padding crece lo mismo) y sitio.js sigue centrando la portada con los 56 px de siempre */
@media (min-width:821px){
  .escena > .pareja{margin-top:calc(-56px - 12vh);background:none}
  .pareja .oportunidades:first-child{--fundido:calc(56px + 12vh);padding-top:calc(var(--aire) + 12vh);border-radius:0;box-shadow:none;
    background:linear-gradient(180deg,rgba(230,231,233,0) 0,rgba(230,231,233,.12) calc(var(--fundido)*.3),rgba(230,231,233,.42) calc(var(--fundido)*.55),rgba(230,231,233,.8) calc(var(--fundido)*.8),var(--niebla) var(--fundido))}
}
/* 3-nov (noche, pedido de Sebastián: todo lo del documento también en móvil): el mismo fundido, más corto (28 px + 7svh);
   el texto y el botón suben lo mismo para quedar por encima */
@media (max-width:820px){
  .escena > .pareja{margin-top:calc(-28px - 7svh);background:none}
  .pareja .oportunidades:first-child{--fundido:calc(28px + 7svh);padding-top:calc(var(--aire) + 7svh);border-radius:0;box-shadow:none;
    background:linear-gradient(180deg,rgba(230,231,233,0) 0,rgba(230,231,233,.12) calc(var(--fundido)*.3),rgba(230,231,233,.42) calc(var(--fundido)*.55),rgba(230,231,233,.8) calc(var(--fundido)*.8),var(--niebla) var(--fundido))}
}

/* ---------- 2. La idea central: información a la izquierda, VSL a la derecha ---------- */
.idea{background:var(--greige);padding:clamp(64px,7vw,110px) 0}
.idea .rejilla{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(36px,6vw,96px);align-items:center}
/* 28-oct (tarde): titular centrado encima de las dos columnas */
.idea .titular-idea{font-size:clamp(28px,3.4vw,40px);line-height:1.18;text-align:center;margin:0 auto clamp(36px,4.4vw,64px);max-width:none}
.idea .texto h3{font-size:clamp(24px,2.3vw,32px);max-width:18ch}
.idea .apoyo{margin:24px 0 34px;color:var(--pizarra)}
.vsl{position:relative;aspect-ratio:16/9;background:var(--noche);border-radius:var(--radio);display:grid;place-items:center;overflow:hidden;color:var(--pergamino)}
.vsl .play{display:grid;place-items:center;width:78px;height:78px;border:1px solid rgba(247,245,242,.5)}
.vsl .play svg{width:20px;height:22px;margin-left:4px;color:var(--arena)}
.vsl .nota{position:absolute;left:20px;bottom:16px;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:rgba(247,245,242,.6)}

/* ---------- 5. Cómo trabajamos (29-oct): la línea de tiempo con el proceso completo, en las tres áreas ---------- */
/* ---------- 5. Cómo trabajamos (29-oct, tarde): el proceso en horizontal ----------
   En ordenador, el interior se queda quieto a pantalla completa y al bajar la pista avanza hacia la izquierda (sitio.js
   le da a la sección el alto que hace falta). Cada paso aparece al llegar (.visto) y la línea que lo une con el
   siguiente se dibuja según avanza (--relleno). Las áreas van encima de su primer paso, con una raya que abarca los suyos */
.proceso{position:relative;background:var(--niebla)}
.proceso-fijo{position:sticky;top:0;height:100vh;height:100svh;min-height:600px;display:flex;flex-direction:column;justify-content:center;
  gap:clamp(22px,4vh,48px);overflow:hidden;padding:calc(70px + 3vh) 0 3vh}
.proceso header{text-align:center}
.proceso header .apoyo{max-width:84ch;margin:16px auto 0;text-wrap:pretty}
.proceso-pista{--ancho-paso:clamp(300px,29vw,420px);--hueco-paso:clamp(32px,3.4vw,56px);--alto-c:clamp(40px,3.6vw,56px);
  display:flex;width:max-content;padding:46px max(var(--borde),calc((100vw - var(--ancho-g))/2)) 0;will-change:transform}
.paso-h{position:relative;flex:none;width:var(--ancho-paso);padding-right:var(--hueco-paso)}
@media (min-width:821px) and (prefers-reduced-motion:no-preference){ .proceso-pista{transition:transform .8s var(--suave)} }   /* 3-nov: el salto de paso en paso (sitio.js) */
.paso-h .area{position:absolute;left:0;top:-46px;width:calc(var(--grupo,1)*var(--ancho-paso) - var(--hueco-paso));padding-bottom:10px;
  border-bottom:1px solid var(--linea);font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--arena-osc)}
.paso-h .cifra{display:block;height:var(--alto-c);font-family:var(--titular);font-weight:300;font-size:var(--alto-c);line-height:1;color:var(--arena-osc)}
.paso-h .hito{position:relative;z-index:1;display:block;width:11px;height:11px;margin:22px 0 28px;background:var(--niebla);border:1px solid var(--arena-osc);
  rotate:45deg;transition:background .4s,border-color .4s}
.paso-h.visto .hito{background:var(--arena);border-color:var(--arena)}
.paso-h::before,.paso-h::after{content:"";position:absolute;left:0;top:calc(var(--alto-c) + 27px);width:100%;height:1px}
.paso-h::before{background:var(--linea)}
.paso-h::after{background:var(--indigo);transform:scaleX(var(--relleno,0));transform-origin:0 50%}
.paso-h:last-child::before,.paso-h:last-child::after{display:none}
.paso-h > :not(.hito){opacity:0;translate:0 14px;transition:opacity .7s var(--suave),translate .7s var(--suave)}
.paso-h.visto > :not(.hito),.sin-js .paso-h > :not(.hito){opacity:1;translate:0 0}
.paso-h h3{font-size:clamp(21px,1.8vw,26px);margin-bottom:10px}
.paso-h p{color:var(--gris);font-size:16px;line-height:1.55;max-width:34ch}
.pie-proceso{display:flex;justify-content:center}
.mandos-proceso{display:none}
.marco.completo{max-width:none;padding:0 clamp(16px,2.4vw,40px)}
/* Línea de tiempo (27-oct): cada paso dibuja el tramo de línea que lo une con el siguiente. Al llegar al bloque
   (.visto) aparecen uno tras otro el rombo, el tramo y el texto. El tramo hasta el REO, discontinuo, y su rombo, hueco */
.linea-tiempo{--alto-cifra:clamp(44px,4vw,60px);--hueco-lt:clamp(20px,2.4vw,40px);--cadencia:.22s;   /* 28-oct: antes .4s */
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:0 var(--hueco-lt);max-width:var(--ancho-g);margin:0 auto}   /* 29-oct: tantas columnas como pasos */
.linea-tiempo li{position:relative;display:flex;flex-direction:column;align-items:flex-start}
.linea-tiempo .cifra{height:var(--alto-cifra);font-family:var(--titular);font-weight:300;font-size:var(--alto-cifra);line-height:1;color:var(--arena-osc)}
.linea-tiempo .hito{position:relative;z-index:1;width:11px;height:11px;margin:22px 0 30px;background:var(--arena);rotate:45deg;scale:0;
  transition:scale .45s var(--suave) calc(.1s + var(--n)*var(--cadencia))}
.linea-tiempo .reo .hito{background:var(--niebla);border:1px solid var(--arena-osc)}
.linea-tiempo li::before{content:"";position:absolute;left:0;top:calc(var(--alto-cifra) + 27px);width:calc(100% + var(--hueco-lt));height:1px;background:var(--indigo);
  transform:scaleX(0);transform-origin:0 50%;transition:transform var(--cadencia) linear calc(.2s + var(--n)*var(--cadencia))}
.linea-tiempo li:has(+ .reo)::before{background:repeating-linear-gradient(90deg,var(--indigo) 0 5px,transparent 5px 10px)}
.linea-tiempo li:last-child::before{display:none}
.linea-tiempo li > :not(.hito){opacity:0;translate:0 10px;transition:opacity .5s var(--suave) calc(.12s + var(--n)*var(--cadencia)),translate .5s var(--suave) calc(.12s + var(--n)*var(--cadencia))}
.linea-tiempo.visto .hito,.sin-js .linea-tiempo .hito{scale:1}
.linea-tiempo.visto li::before,.sin-js .linea-tiempo li::before{transform:none}
.linea-tiempo.visto li > :not(.hito),.sin-js .linea-tiempo li > :not(.hito){opacity:1;translate:0 0}
.linea-tiempo h3{font-size:clamp(20px,1.7vw,24px);margin-bottom:10px}
.linea-tiempo p{color:var(--gris);font-size:16px;font-weight:300;line-height:1.55}
.linea-tiempo .enlace{margin-top:14px}
h2{text-wrap:balance}
.carrusel{position:relative}
.carrusel .pista{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 2*28px)/3);gap:28px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:2px}
.carrusel .pista::-webkit-scrollbar{display:none}
.carrusel .flecha{position:absolute;top:50%;translate:0 -50%;width:44px;height:44px;display:grid;place-items:center;color:var(--indigo);transition:color .2s,opacity .2s}
.carrusel .flecha:hover{color:var(--arena-osc)}
.carrusel .flecha[disabled]{opacity:.25;cursor:default}
.carrusel .flecha.antes{left:calc(-1*clamp(12px,4vw,58px))}
.carrusel .flecha.despues{right:calc(-1*clamp(12px,4vw,58px))}
.carrusel .flecha svg{width:12px;height:20px}
.paso{scroll-snap-align:start;border:1px solid var(--indigo);border-radius:2px;padding:6px;background:transparent;display:flex;flex-direction:column}
.paso .cifra{display:flex;align-items:flex-end;aspect-ratio:16/7;padding:22px 24px;background:var(--greige);border-radius:1px;
  font-family:var(--titular);font-weight:300;font-size:clamp(56px,6vw,84px);line-height:.9;color:var(--arena)}
.paso.reo .cifra{background:var(--noche);color:var(--arena)}
.paso .cuerpo{padding:26px 18px 18px;display:flex;flex-direction:column;gap:14px;flex:1}
.paso p{color:var(--pizarra);font-size:16px;font-weight:300;line-height:1.55}
.paso .enlace{margin-top:auto;align-self:flex-start}
.proceso .mas{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:16px 48px}

/* ---------- 4. El método (bloque fijo + pasos 01–05) ---------- */
.metodo{background:var(--noche);padding:clamp(28px,3vw,40px) clamp(10px,3vw,40px)}
.metodo .panel{background:var(--niebla);max-width:calc(var(--ancho-g) + 2*var(--borde));margin:0 auto;border-radius:2px;padding:var(--aire) 0}
.metodo .rejilla{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:clamp(40px,7vw,110px)}
.metodo .fijo{position:sticky;top:calc(var(--cabecera) + 48px);align-self:start}
.metodo .fijo h2{max-width:13ch}
.metodo .fijo .apoyo{margin:26px 0 34px;max-width:36ch}
.metodo .equipos{display:flex;flex-wrap:wrap;gap:8px 18px;margin:-12px 0 34px;font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--gris)}
.metodo .equipos li{display:flex;align-items:center;gap:8px}
.metodo .equipos li::before{content:"";width:6px;height:6px;rotate:45deg;background:var(--arena)}
.metodo ol{display:grid;gap:clamp(70px,10vw,150px);padding:20px 0}
.metodo li.etapa{max-width:440px}
.metodo li.etapa:nth-child(even){justify-self:end;text-align:right}
.metodo .num{display:block;font-family:var(--titular);font-weight:300;font-size:clamp(38px,3.6vw,48px);line-height:1;color:var(--arena)}
.metodo .etapa h3{font-size:clamp(30px,3vw,40px);margin:10px 0 14px}
.metodo .etapa p{color:var(--gris);font-weight:300;font-size:17px}
.metodo .etapa .quien{display:block;margin-top:12px;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--arena-osc)}

/* ---------- 5. Lo que obtiene (banda azul noche + tarjetas que se apilan) ---------- */
.obtiene{background:var(--noche);color:var(--pergamino);padding:var(--aire) 0 calc(var(--aire) * .9)}
.obtiene > .marco > h2{text-align:center;font-size:clamp(26px,3vw,38px);max-width:30ch;margin:0 auto clamp(56px,7vw,96px)}
.pila{display:grid;gap:clamp(24px,3vw,40px);max-width:840px;margin:0 auto}
.pila .carta{position:sticky;top:calc(var(--cabecera) + 24px + var(--n) * 14px);background:var(--niebla);color:var(--indigo);border-radius:var(--radio);
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,48px);align-items:center;padding:clamp(28px,4.4vw,52px) clamp(24px,5vw,70px);
  box-shadow:0 -1px 0 rgba(17,42,85,.25)}
.pila .carta h3{font-size:clamp(28px,3.2vw,40px);line-height:1.12}
.pila .carta p{margin:18px 0 28px;color:var(--gris);font-weight:300}
.pila .carta .foto{border-radius:var(--radio);overflow:hidden;aspect-ratio:5/4}
.pila .carta .foto img{width:100%;height:100%;object-fit:cover}
/* En ordenador (26-oct), las cuatro en fila con el efecto de «Proceso de un NPL» (sitio.js, [data-acordeon]):
   la primera abierta; al pasar el ratón crece la que está debajo y las demás se quedan con la foto y el título */
@media (min-width:821px){
  .pila{--hueco-pila:clamp(10px,1vw,16px);display:flex;gap:var(--hueco-pila);max-width:none;height:clamp(480px,54vh,520px);container-type:inline-size}
  /* 28-oct: el alto lo pone sitio.js: el justo para que, en la tarjeta con más texto, el botón quede pegado al texto.
     Para medirlo (.midiendo), cada tarjeta toma el alto de su contenido y sin transiciones; el de arriba, por si falta JS */
  .pila.midiendo{height:auto;align-items:flex-start}
  .pila.midiendo .carta,.pila.midiendo .carta p,.pila.midiendo .carta .boton{transition:none}
  .pila .carta{position:static;flex:1 1 0;min-width:0;overflow:hidden;display:flex;flex-direction:column;gap:0;align-items:stretch;
    padding:6px;box-shadow:none;cursor:default;transition:flex-grow .7s var(--suave)}
  .pila .carta.abierta{flex-grow:2}   /* 28-oct: antes 2.8; las cerradas partían el titular en cuatro o cinco líneas */
  .pila .carta .foto{order:-1;flex:none;height:clamp(180px,14vw,230px);aspect-ratio:auto;border-radius:1px}
  .pila .carta > div:not(.foto){display:flex;flex-direction:column;flex:1;min-height:0;padding:22px 18px 26px}
  .pila .carta h3{font-size:clamp(20px,1.6vw,24px);line-height:1.2;text-wrap:balance}
  /* El texto mide lo que la tarjeta abierta (2 de 5 partes del ancho, menos los huecos y los 48 px de márgenes),
     así no se recoloca mientras crece y llena la tarjeta al abrirse (28-oct: antes, ancho fijo y hueco a la derecha) */
  .pila .carta p{width:calc((100cqw - 3*var(--hueco-pila))*.4 - 48px);margin:14px 0 8px}
  .pila .carta .boton{width:max-content;margin-top:auto}   /* siempre abajo; el mínimo, los 8 px del texto más el aire del propio botón */
  .pila .carta p,.pila .carta .boton{opacity:0;transition:opacity .25s}
  .pila .carta.abierta p,.pila .carta.abierta .boton{opacity:1;transition:opacity .45s .3s}
}

/* ---------- 6. Oportunidades (un inmueble destacado con puntos) ---------- */
.oportunidades{background:var(--niebla);padding:var(--aire) 0}
.oportunidades .titulo{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:clamp(28px,3.4vw,44px)}
.oportunidades .titulo .apoyo{margin-top:12px}
.oportunidades .titulo .provisional{margin:14px 0 0}
.destacado{position:relative;border:1px solid var(--linea);border-radius:2px;padding:6px}
.destacado .pista{display:grid;grid-auto-flow:column;grid-auto-columns:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.destacado .pista::-webkit-scrollbar{display:none}
.ficha{scroll-snap-align:start;display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,40px);align-items:center;background:var(--niebla)}
.ficha .foto{aspect-ratio:4/3;overflow:hidden}
.ficha .foto img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--suave)}
.ficha:hover .foto img{transform:scale(1.03)}
.ficha .boton{margin-top:4px}
.ficha .datos{padding:24px clamp(8px,2vw,28px) 24px 0;display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.ficha .etiqueta{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:6px 10px;border:1px solid var(--linea);color:var(--pizarra)}
.ficha h3{font-size:clamp(26px,2.8vw,34px)}
.ficha .lugar{display:flex;align-items:center;gap:12px;font-size:15px;letter-spacing:.04em;color:var(--pizarra)}
.ficha .lugar i{width:7px;height:7px;rotate:45deg;background:var(--arena)}
.ficha .precio{font-family:var(--titular);font-size:clamp(24px,2.4vw,30px);font-weight:300}
.ficha .precio small{display:block;font-family:var(--texto);font-size:13px;color:var(--gris);letter-spacing:.02em;margin-top:2px}
.puntos{display:flex;justify-content:center;gap:16px;margin:26px 0 30px}
.puntos button{width:9px;height:9px;border-radius:0;background:var(--greige);transition:background .3s,transform .3s}
.puntos button[aria-current="true"]{background:var(--arena);transform:scale(1.15)}
.oportunidades .todas{text-align:center}
.nota{font-size:13px;color:var(--gris);text-align:center;margin-top:18px}

/* Tira: la ficha activa es la grande; al avanzar, la siguiente crece y la anterior encoge (sitio.js fija los anchos) */
.oportunidades{overflow:hidden}
.mandos-tira{display:flex;gap:8px;padding-inline:var(--orilla);margin-bottom:20px}
.mandos-tira button{width:48px;height:48px;border:1px solid var(--indigo);border-radius:var(--radio);font-size:18px;transition:background .3s,color .3s,opacity .3s}
.mandos-tira button:hover{background:var(--indigo);color:var(--pergamino)}
.mandos-tira button:disabled{opacity:.28;pointer-events:none}
.oscuro .mandos-tira button{border-color:rgba(247,245,242,.6);color:var(--pergamino)}
.oscuro .mandos-tira button:hover{background:var(--niebla);color:var(--indigo)}
.tira{overflow:hidden;padding-inline:var(--orilla);--peq:clamp(220px,20vw,300px);--grande:clamp(300px,34vw,520px);--hueco:clamp(14px,1.6vw,24px);--paso-tira:.8s cubic-bezier(.6,0,.3,1)}
.tira .pista{display:flex;align-items:flex-start;gap:var(--hueco);transition:transform var(--paso-tira);will-change:transform}
.tira .pista > *{flex:none;width:var(--peq);transition:width var(--paso-tira);outline-offset:4px}
.tira .pista > .activa{width:var(--grande)}
.oferta .foto{position:relative;overflow:hidden;border-radius:var(--radio);aspect-ratio:4/3;background:#D6D9DE}
.oferta .foto img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--suave)}
.oferta:hover .foto img,.oferta:focus-within .foto img{transform:scale(1.07)}
.oferta .capa{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:10px;padding:clamp(18px,2vw,28px);
  color:var(--pergamino);background:linear-gradient(180deg,rgba(16,31,56,.1) 0%,rgba(16,31,56,.55) 45%,rgba(16,31,56,.92));opacity:0;transition:opacity .5s var(--suave)}
.oferta.activa:hover .capa,.oferta.activa:focus-within .capa{opacity:1}
.oferta .capa .etiqueta{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--arena)}
.oferta .capa .precio{font-family:var(--titular);font-weight:300;font-size:clamp(24px,2.2vw,32px);line-height:1.1}
.oferta .capa .precio small{display:block;font-family:var(--texto);font-size:13px;color:rgba(247,245,242,.7);margin-top:4px}
.oferta .capa .nota{text-align:left;margin:0;font-size:14px;font-weight:300;color:rgba(247,245,242,.8);max-width:40ch}
/* 3-nov (noche): en móvil y en pantallas táctiles no hay «pasar el ratón»: el texto del NDA va bajo los datos */
.oferta .nota-tactil{display:none;margin-top:12px;font-size:13px;line-height:1.5;color:var(--gris)}
@media (max-width:820px),(hover:none){.oferta .nota-tactil{display:block}}
/* 28-oct: tipo de operación y «precio del crédito» siempre a la vista; debajo, los datos clave de la ficha */
.oferta .tipo{margin-top:16px;font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--arena-osc)}
.oferta .dato{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;margin-top:6px;font-size:14px;color:var(--pizarra)}
.oferta .dato b{font-family:var(--titular);font-weight:300;font-size:clamp(22px,1.8vw,26px);color:var(--indigo)}
.oferta .claves{display:grid;grid-template-columns:1fr 1fr;gap:8px 16px;margin-top:14px;padding-top:12px;border-top:1px solid var(--linea-suave);font-size:14px}
.oferta .claves dt{font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--gris)}
.oferta .claves dd{color:var(--indigo)}
.oferta h3{margin-top:8px;font-size:clamp(22px,1.9vw,28px)}
.oferta .lugar{margin-top:4px;font-size:15px;color:var(--pizarra)}
/* 29-oct (feedback del cliente: las fichas estaban planas): rasgos del inmueble con su icono y, debajo, el precio del
   crédito junto a la valoración del inmueble que lo garantiza */
.rasgos{display:flex;flex-wrap:wrap;gap:12px clamp(16px,1.6vw,26px);margin-top:16px;padding-top:14px;border-top:1px solid var(--linea-suave)}
.rasgos li{display:grid;grid-template-columns:auto 1fr;column-gap:9px;align-items:center}
.rasgos svg{grid-row:1/3;width:21px;height:21px;color:var(--arena-osc)}
.rasgos b{font-family:var(--titular);font-weight:300;font-size:18px;line-height:1.1;color:var(--indigo)}
.rasgos span{font-size:10.5px;font-weight:600;letter-spacing:.08em;line-height:1.3;text-transform:uppercase;color:var(--gris)}
.cifras{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:14px;padding-top:14px;border-top:1px solid var(--linea-suave)}
.cifras .dato{display:flex;flex-direction:column;align-items:flex-start;gap:3px;margin:0;font-size:12.5px;line-height:1.3;color:var(--pizarra)}
.cifras .dato b{font-family:var(--titular);font-weight:300;font-size:clamp(22px,1.8vw,26px);line-height:1.1;white-space:nowrap;color:var(--indigo)}
.cifras .valor{padding-left:16px;border-left:1px solid var(--linea-suave)}
.cifras .valor b{color:var(--arena-osc)}
/* 29-oct, noche (pedido del cliente): el contraste entre precio del crédito y valoración, más destacado: sube justo debajo de la
   ubicación y va en negrita (Ranade 500, la más gruesa incrustada; las etiquetas, en seminegrita) */
.cifras .dato b{font-weight:500}
.cifras .dato span{font-weight:600;color:var(--indigo)}
.cifras .valor span{color:var(--arena-osc)}
.vendidas .cifras .dato span{color:rgba(247,245,242,.85)}
@media (hover:none){.oferta .capa{opacity:1;background:linear-gradient(180deg,rgba(16,31,56,0) 35%,rgba(16,31,56,.85))}.oferta .capa .nota{display:none}}

/* ---------- 4. Operaciones cerradas (29-oct): la misma tira, con todas las fichas iguales, en blanco y negro ---------- */
.vendidas{background:var(--noche);color:var(--pergamino);padding:var(--aire) 0;overflow:hidden}
.oportunidades .titulo,.vendidas .titulo{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:clamp(28px,3.4vw,44px)}
.vendidas .titulo .apoyo{margin-top:12px}
.vendidas .titulo .provisional{margin:14px 0 0}
.vendidas .oferta{cursor:pointer}
.vendidas .oferta:not(.activa) > :not(.foto){opacity:1;visibility:visible}
.vendidas .oferta .foto{background:#2a3446}
/* 29-oct: las fotos reales de las vendidas, con la saturación al 25 % (grisáceas, sin llegar al blanco y negro); también en su ficha emergente (.es-vendida) */
.vendidas .oferta .foto img{filter:saturate(.25)}
.vendidas .oferta .capa{justify-content:center;align-items:center;background:rgba(16,31,56,.55)}
.vendidas .oferta:hover .capa,.vendidas .oferta:focus-visible .capa{opacity:1}
.vendidas .oferta .tipo{color:var(--arena)}
.vendidas .oferta h3{color:var(--pergamino)}
.vendidas .oferta .lugar,.vendidas .cifras .dato{color:rgba(247,245,242,.78)}
.vendidas .cifras{border-color:rgba(247,245,242,.18)}
.vendidas .cifras .dato b{color:var(--pergamino)}
.vendidas .cifras .dato + .dato{padding-left:16px;border-left:1px solid rgba(247,245,242,.18)}

/* ---------- 7. La firma y el equipo, como Drumelia (27-oct): a la izquierda, título y botón arriba y el texto abajo;
   a la derecha, los retratos en una tira que sale por el borde de la pantalla, con nombre y cargo debajo ---------- */
.modelo{position:relative;overflow:hidden;color:var(--pergamino);background:var(--noche);padding:var(--aire) 0}
.modelo h2{font-size:clamp(32px,3.6vw,50px);max-width:15ch;margin-bottom:28px}
.modelo .apoyo{color:rgba(247,245,242,.82);max-width:46ch}
.modelo .apoyo + .apoyo{margin-top:18px}
.firma-equipo{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:clamp(36px,5vw,80px);
  padding-left:max(var(--borde),calc((100% - var(--ancho-g))/2))}
.firma-equipo .lado{display:flex;flex-direction:column;gap:44px}
.firma-equipo .pista{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(240px,23vw,360px);column-gap:clamp(10px,1vw,16px);
  overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-right:var(--orilla)}
.firma-equipo .pista::-webkit-scrollbar{display:none}
.miembro{scroll-snap-align:start;text-align:center}
.miembro .foto{position:relative;overflow:hidden;border-radius:var(--radio);aspect-ratio:9/14;background:var(--greige)}
.miembro .foto img,.miembro .hueco-foto{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--suave)}
.miembro .hueco-foto{display:grid;place-items:center;color:var(--indigo)}
.miembro .hueco-foto .rombo{width:22%;height:auto;aspect-ratio:360/401;color:rgba(17,42,85,.14)}
.miembro .hueco-foto span{position:absolute;left:14px;top:12px;font-size:12px;letter-spacing:.06em;color:var(--gris)}
.miembro:hover .foto img,.miembro:hover .hueco-foto{transform:scale(1.04)}
.miembro h3{margin-top:26px;font-size:clamp(17px,1.4vw,21px);letter-spacing:.08em;text-transform:uppercase}
.miembro p{margin-top:8px;font-size:15.5px;font-weight:300;color:rgba(247,245,242,.75)}

/* ---------- 7. La firma (foto + tarjeta centrada sobre greige) ---------- */
.firma-banda{position:relative;height:clamp(300px,46vh,460px);color:var(--pergamino);display:grid;place-items:center;text-align:center;overflow:hidden}
.firma-banda img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.6) saturate(.8)}
.firma-banda h2{position:relative;font-size:clamp(30px,4vw,50px);max-width:20ch;padding:0 var(--borde);margin-top:-40px}
.firma{background:var(--greige);padding:0 0 var(--aire)}
.firma .tarjeta{position:relative;z-index:2;margin-top:clamp(-90px,-8vw,-60px);background:var(--niebla);border-radius:var(--radio);
  padding:clamp(48px,7vw,96px) clamp(24px,8vw,120px);text-align:center}
.firma .tarjeta .previa{font-size:16px;font-weight:300;color:var(--gris);max-width:68ch;margin:0 auto}
.firma .tarjeta .detras{font-size:15px;color:var(--gris);margin:0 auto 26px}
.firma .tarjeta .grande{font-family:var(--titular);font-weight:300;font-size:clamp(21px,2.1vw,27px);line-height:1.4;margin:28px auto 40px;max-width:44ch}

/* ---------- 8. Preguntas ---------- */
.preguntas{background:var(--niebla);padding:var(--aire) 0}
.preguntas .rejilla{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);gap:clamp(36px,6vw,96px)}
.preguntas .apoyo{margin:20px 0 28px}
/* 27-oct: numeradas (01, 02…), se abren con clic (despacio, sitio.js) y al pasar el ratón el título crece un poco */
.preguntas .rejilla > div:last-child{counter-reset:pregunta}
.preguntas details{counter-increment:pregunta}
.preguntas details{border-top:1px solid var(--linea)}
.preguntas details:last-child{border-bottom:1px solid var(--linea)}
/* Interlineado fijo: al crecer la letra (ratón encima o abierta) la fila no cambia de alto y las demás no se mueven */
.preguntas summary{list-style:none;cursor:pointer;display:flex;gap:24px;align-items:center;padding:20px 0;line-height:28px;
  font-family:var(--titular);font-weight:300;font-size:clamp(16px,1.3vw,18px);transition:font-size .4s var(--suave),padding .4s var(--suave),color .3s}
.preguntas summary::before{content:counter(pregunta,decimal-leading-zero);flex:none;width:28px;font-size:16px;color:var(--arena-osc)}
.preguntas summary:hover,.preguntas details[open] summary{font-size:clamp(18px,1.5vw,21px)}
.preguntas summary::-webkit-details-marker{display:none}
.preguntas summary::after{content:"";flex:none;width:14px;height:14px;margin-left:auto;background:
  linear-gradient(var(--arena-osc),var(--arena-osc)) center/14px 1.5px no-repeat,
  linear-gradient(var(--arena-osc),var(--arena-osc)) center/1.5px 14px no-repeat;transition:rotate .3s var(--suave)}
.preguntas details[open] summary::after{rotate:45deg}
.preguntas details p{padding:0 0 22px 52px;max-width:calc(62ch + 52px);color:var(--gris);font-weight:300}

/* ---------- 9. Formulario (banda azul noche, campos con línea) ---------- */
.contacto{background:var(--noche);color:var(--pergamino);padding:var(--aire) 0}
.contacto .rejilla{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,7vw,110px);align-items:start}
.contacto h2{font-size:clamp(28px,3vw,38px);max-width:16ch}
.contacto .apoyo{color:rgba(247,245,242,.75);margin:22px 0 34px}
.contacto .datos{display:grid;gap:12px;font-size:16px}
.contacto .datos a{display:flex;align-items:center;gap:14px;width:fit-content;transition:color .2s}
.contacto .datos a:hover{color:var(--arena)}
.contacto .datos svg{width:17px;height:17px;flex:none;color:var(--arena)}
.formulario{display:grid;grid-template-columns:1fr 1fr;gap:26px 28px}
.campo{display:grid;gap:4px}
.campo.ancho,.formulario .ancho{grid-column:1/-1}
.campo label,.campo legend{font-size:13px;letter-spacing:.03em;color:rgba(247,245,242,.72)}
.campo input,.campo select,.campo textarea{width:100%;font:inherit;font-size:16px;color:var(--pergamino);background:transparent;border:0;border-bottom:1.5px solid var(--linea-clara);
  border-radius:0;padding:10px 0;outline:0;transition:border-color .25s;-webkit-appearance:none;appearance:none}
.campo textarea{resize:vertical;min-height:44px}
.campo select{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23DBB07E' stroke-width='1.4'/%3E%3C/svg%3E") right 2px center/12px no-repeat}
.campo select option{color:var(--indigo)}
.campo input:focus,.campo select:focus,.campo textarea:focus{border-color:var(--arena)}
fieldset.campo{border:0}
.opciones{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.opciones label{position:relative;display:inline-flex}
.opciones input{position:absolute;opacity:0;inset:0;cursor:pointer}
.opciones span{display:inline-block;padding:9px 14px;border:1px solid var(--linea-clara);font-size:14px;color:rgba(247,245,242,.85);transition:all .2s}
.opciones input:checked + span{border-color:var(--arena);color:var(--arena)}
.opciones input:focus-visible + span{outline:2px solid var(--arena);outline-offset:2px}
.casilla{display:flex;gap:12px;align-items:flex-start;font-size:14px;color:rgba(247,245,242,.75)}
.casilla input{margin-top:3px;accent-color:var(--arena);width:16px;height:16px;flex:none}
.casilla a{text-decoration:underline;text-underline-offset:3px}
.envio{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.aviso{font-size:14px;color:var(--arena)}
.siguientes{margin-top:clamp(40px,5vw,60px);display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding-top:28px;border-top:1px solid rgba(247,245,242,.14)}
.siguientes li{font-size:15px;color:rgba(247,245,242,.72);font-weight:300}
.siguientes b{display:block;font-family:var(--titular);font-weight:300;font-size:30px;color:var(--arena);margin-bottom:6px}

/* Formulario por pasos: una pregunta por pantalla, contador y avance con Enter */
.pasos-form{position:relative;display:flex;flex-direction:column;min-height:360px}
.pasos-form[hidden]{display:none}
.pasos-form .cabeza{display:flex;align-items:center;gap:18px;font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:rgba(247,245,242,.6)}
.pasos-form .cabeza b{color:var(--arena);font-weight:600}
.pasos-form .barra{flex:1;height:1px;background:rgba(247,245,242,.18);position:relative}
.pasos-form .barra i{position:absolute;left:0;top:-.5px;height:2px;width:var(--avance,0%);background:var(--arena);transition:width .5s var(--suave)}
.sobre-operacion{display:inline-flex;align-items:center;gap:10px;margin-top:22px;padding:7px 12px;border:1px solid var(--arena);font-size:13px;color:var(--arena);width:fit-content}
.sobre-operacion button{font-size:18px;line-height:1;color:inherit;opacity:.8}
.sobre-operacion[hidden]{display:none}
.pantalla{display:none}
.pantalla.activa{display:block;animation:entra .55s var(--suave)}
.sin-js .pantalla{display:block;margin-bottom:28px}
@keyframes entra{from{opacity:0;translate:0 16px}to{opacity:1;translate:0 0}}
.pregunta{display:block;margin:30px 0 22px;font-family:var(--titular);font-weight:300;font-size:clamp(24px,2.4vw,32px);line-height:1.22;color:var(--pergamino)}
.pantalla input[type=text],.pantalla input[type=email],.pantalla input[type=tel]{width:100%;font:inherit;font-size:clamp(18px,1.6vw,22px);color:var(--pergamino);background:transparent;
  border:0;border-bottom:1.5px solid var(--linea-clara);border-radius:0;padding:10px 0;outline:0;transition:border-color .25s;-webkit-appearance:none;appearance:none}
.pantalla input:focus{border-color:var(--arena)}
.eleccion{display:grid;gap:10px}
.eleccion label{position:relative;display:flex;align-items:center;gap:14px;padding:13px 16px;border:1px solid var(--linea-clara);font-size:16px;color:rgba(247,245,242,.9);cursor:pointer;transition:border-color .2s,color .2s,background .2s}
.eleccion label:hover{border-color:rgba(247,245,242,.85)}
.eleccion input{position:absolute;opacity:0;inset:0;cursor:pointer}
.eleccion .letra{flex:none;display:grid;place-items:center;width:26px;height:26px;border:1px solid var(--linea-clara);font-size:12px;font-weight:600}
.eleccion label.marcada,.eleccion label:has(input:checked){border-color:var(--arena);color:var(--arena);background:rgba(219,176,126,.06)}
.eleccion label.marcada .letra,.eleccion label:has(input:checked) .letra{border-color:var(--arena);background:var(--arena);color:var(--noche)}
.eleccion input:focus-visible + .letra{outline:2px solid var(--arena);outline-offset:3px}
.pantalla .ayuda{margin-top:16px;font-size:14px;line-height:1.5;color:rgba(247,245,242,.62);max-width:52ch}
.pantalla .casilla{margin-top:18px}
.pasos-form .error{min-height:22px;margin-top:12px;font-size:14px;color:var(--arena)}
.pasos-form .error a{color:inherit;text-decoration:underline;text-underline-offset:2px;white-space:nowrap}
/* Campo trampa contra el spam (3-nov): fuera de la vista; solo lo rellenan los robots */
.pasos-form .trampa{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);opacity:0;pointer-events:none}
/* 27-oct: el botón, justo debajo de los campos (antes, al fondo del formulario con margin-top:auto) */
.pasos-form .mandos{display:flex;align-items:center;flex-wrap:wrap;gap:14px 28px;padding-top:14px}
.pasos-form .volver{font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:rgba(247,245,242,.6);padding:12px 0;transition:color .2s}
.pasos-form .volver:hover{color:var(--pergamino)}
.pasos-form .volver[hidden]{display:none}
.pasos-form .pista-enter{font-size:13px;color:rgba(247,245,242,.45)}
.recibido{animation:entra .6s var(--suave)}
.recibido[hidden]{display:none}
.recibido h3{font-size:clamp(28px,3vw,38px);margin:8px 0 18px}
.recibido > p{color:rgba(247,245,242,.78);font-weight:300;max-width:52ch}
.recibido ol{display:grid;gap:18px;margin:32px 0;padding-top:26px;border-top:1px solid rgba(247,245,242,.14)}
.recibido li{display:grid;grid-template-columns:44px 1fr;gap:6px;font-size:15.5px;font-weight:300;color:rgba(247,245,242,.78)}
.recibido li b{font-family:var(--titular);font-weight:300;font-size:24px;line-height:1;color:var(--arena)}
.recibido li strong{display:block;font-weight:600;color:var(--pergamino);margin-bottom:2px}
.recibido .no-es{font-size:15px;color:rgba(247,245,242,.7);padding:18px 20px;border:1px solid rgba(247,245,242,.16)}
.contacto .primera-vez{margin-top:30px}

/* ---------- 10. España y México ---------- */
.mapa{background:var(--niebla);padding:var(--aire) 0 clamp(48px,6vw,90px)}
.mapa h2{font-size:clamp(24px,2.4vw,30px)}
.mapa .apoyo{margin-top:12px}
.mundo{position:relative;margin-top:clamp(24px,3vw,40px);aspect-ratio:var(--proporcion);overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent),linear-gradient(transparent,#000 6%,#000 94%,transparent);
  -webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent),linear-gradient(transparent,#000 6%,#000 94%,transparent);mask-composite:intersect}
/* 29-oct: mapa de las sedes (MapaSedes.astro). La sede de esta web, en arena y con su nombre siempre a la vista; las
   demás, en arena clara. Al pasar por un país se marca en arena y aparece su nombre, en el mar, unido por una línea
   de puntos (sitio.js). El lienzo es el mundo entero; los nombres se colocan en % sobre él */
.mundo .lienzo{position:absolute;inset:0}
.mundo svg{position:absolute;inset:0;width:100%;height:100%}
.mundo svg path{vector-effect:non-scaling-stroke;stroke:var(--niebla);stroke-width:.6px;stroke-linejoin:round}
.mundo .tierra{fill:var(--greige)}
.mundo .pais{fill:#EBD6BC;transition:fill .35s}
.mundo .pais.elegida,.mundo .pais.activa{fill:var(--arena)}
/* 29-oct (5): en «Dónde operamos», toda la tierra de un gris, sin fronteras (MapaMundo.astro la une en una figura) */
.mundo svg.sin-fronteras .tierra,.mundo svg.sin-fronteras .pais{stroke:none}
.mundo svg .zona{fill:transparent;stroke:transparent;stroke-width:10px;pointer-events:all}
.mundo svg .zona.enlazada{cursor:pointer}
.mundo .guia{opacity:0;transition:opacity .35s}
.mundo svg .guia path{fill:none;stroke:var(--indigo);stroke-width:1.5px;stroke-linecap:round;stroke-dasharray:0 5}
.mundo .guia circle{fill:var(--indigo)}
.mundo .etiqueta{position:absolute;left:var(--x);top:var(--y);transform:translate(calc(-100% - 10px),-50%);text-align:right;white-space:nowrap;
  opacity:0;pointer-events:none;transition:opacity .35s}
.mundo .etiqueta.derecha{transform:translate(10px,-50%);text-align:left}
.mundo .etiqueta.abajo{transform:translate(-50%,6px);text-align:center}
.mundo .guia.elegida,.mundo .etiqueta.elegida,.mundo .etiqueta:focus-within{opacity:1;pointer-events:auto}
.mundo .etiqueta b{display:block;font-family:var(--titular);font-weight:300;font-size:21px;line-height:1.15;color:var(--indigo)}
.mundo .etiqueta span{display:block;margin-top:3px;font-size:13px;color:var(--gris)}
.mundo .etiqueta .enlace{min-height:0;padding:4px 0 3px;font-size:13px}
/* 29-oct (3): los países del subtítulo son enlaces al mapa: al pasar por encima lo marcan y al pulsarlos el mapa se
   acerca (sitio.js, que entonces coloca el lienzo y los nombres). Acercado, fuera las líneas y los nombres, que se
   quedarían fuera del recuadro, y «Ver el mundo» debajo; su hueco está siempre reservado */
.mundo.con-js .lienzo{inset:0;left:0;top:0;width:100%;height:100%}
.mapa .mundo.acercado .guia,.mapa .mundo.acercado .etiqueta{opacity:0;pointer-events:none}
.ver-mundo{display:block;margin:14px auto 0;padding:6px 0;font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  border-bottom:1px solid currentColor;visibility:hidden;opacity:0;transition:opacity .35s,color .25s}
.mapa:has(.mundo.acercado) .ver-mundo{visibility:visible;opacity:1}
.ver-mundo:hover{color:var(--arena-osc)}

/* 29-oct (5): «Dónde operamos» en dos columnas en ordenador: a la izquierda el título, el subtítulo, las sedes una
   debajo de otra (la elegida, en arena y con su información abierta) y «Ver el mundo»; a la derecha, el mapa, no más
   alto de lo que deja la pantalla. En móvil, en columna, con las sedes una al lado de otra y la información debajo */
.rejilla-mapa{display:grid;gap:clamp(20px,3vw,32px)}
.marco.rejilla-mapa{max-width:calc(1440px + 2*var(--borde))}
.sedes-mapa{list-style:none;margin:28px 0 0;padding:0;border-top:1px solid var(--linea-suave)}
.sedes-mapa li{border-bottom:1px solid var(--linea-suave)}
.mapa .ir-sede{display:block;width:100%;text-align:left;padding:14px 0;font-family:var(--titular);font-weight:300;font-size:22px;line-height:1.2;color:var(--indigo);transition:color .25s}
.mapa .ir-sede:hover,.mapa .ir-sede[aria-pressed="true"]{color:var(--arena-osc)}
.info-sede{display:grid;gap:4px;padding:0 0 16px;font-size:15px;color:var(--gris)}
.info-sede[hidden]{display:none}
.info-sede a{transition:color .25s}
.info-sede a:hover{color:var(--arena-osc)}
.lado-mapa .ver-mundo{margin:22px 0 0}
@media (min-width:821px){
  .rejilla-mapa{grid-template-columns:minmax(240px,280px) 1fr;column-gap:clamp(32px,4vw,72px);align-items:center}
  .mapa:not(.entrada-sedes) .mundo{width:min(100%,calc((100svh - 200px)*var(--ar)));margin:0;justify-self:end}
}
@media (max-width:820px){
  .lado-mapa{text-align:center}
  .lado-mapa .apoyo{margin-left:auto;margin-right:auto}
  .sedes-mapa{display:grid;grid-template-columns:repeat(3,auto);justify-content:center;column-gap:28px;margin-top:22px;border:0}
  .sedes-mapa li{display:contents}
  .mapa .ir-sede{grid-row:1;width:auto;padding:6px 0;font-size:20px;border-bottom:1px solid transparent}
  .mapa .ir-sede[aria-pressed="true"]{border-bottom-color:currentColor}
  .info-sede{grid-row:2;grid-column:1/-1;justify-items:center;padding:12px 0 0}
  /* 29-oct (6): «Ver el mundo», debajo del mapa: la columna de la izquierda se deshace (display:contents) y el botón
     pasa al final de la rejilla */
  .rejilla-mapa{gap:0}
  .lado-mapa{display:contents}
  .lado-mapa .ver-mundo{order:1;margin:14px auto 0}
  .rejilla-mapa .mundo{margin-top:24px}
}

/* ---------- Prototipo de pantalla de entrada (29-oct, src/pages/entrada.astro) ----------
   Solo el mapa del mundo, tan grande como quepa. Las tres sedes con su nombre y su línea a la vista; al pasar por
   encima, el país en arena; al pulsarlo, el mapa se acerca y, si tiene web, fundido a la carga (sitio.js). Debajo, sobre
   el mapa, «Próximamente» y «Ver el mundo» cuando se ha acercado a una sede sin web */
.solo-lectores{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mapa.entrada-sedes{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;justify-content:center;padding:24px 0}
.entrada-sedes .mundo{width:min(100%,calc((100svh - 48px)*var(--ar)));margin:0}
.entrada-sedes .guia,.entrada-sedes .etiqueta{opacity:1;pointer-events:auto}
.entrada-sedes .zona,.entrada-sedes .etiqueta b{cursor:pointer}
.entrada-sedes .etiqueta b,.mundo .etiqueta .nombre{display:block;font-family:var(--titular);font-weight:300;font-size:clamp(20px,1.8vw,26px);line-height:1.15;color:var(--indigo);transition:color .25s}
.entrada-sedes .etiqueta.activa b,.mundo .etiqueta.activa .nombre{color:var(--arena-osc)}
.entrada-sedes .etiqueta span{opacity:0;transition:opacity .3s}
.entrada-sedes .etiqueta.activa span{opacity:1}
.pie-entrada{position:absolute;left:0;right:0;bottom:clamp(16px,4vh,40px);display:flex;flex-direction:column;align-items:center;gap:4px;pointer-events:none}
.pie-entrada > *{pointer-events:auto}
.aviso-sede{font-size:15px;color:var(--gris)}
.aviso-sede b{font-family:var(--titular);font-weight:300;font-size:22px;color:var(--indigo);margin-right:6px}
.entrada-sedes .ver-mundo{margin:0}
.entrada-sedes:has(.acercado) .ver-mundo{visibility:visible;opacity:1}
@media (max-width:820px){
  .entrada-sedes .mundo{width:100%;margin:0}
  .entrada-sedes .etiqueta b,.mundo .etiqueta .nombre{font-size:18px}
}

/* ---------- 11. Cierre ---------- */
.cierre{background:var(--niebla);padding:clamp(24px,3vw,40px) 0 clamp(64px,7vw,96px);text-align:center}

/* ---------- Pie ---------- */
.pie{background:var(--niebla);border-top:1px solid var(--linea-suave);padding:clamp(48px,6vw,72px) 0 40px;color:var(--indigo)}
.pie .arriba{display:grid;grid-template-columns:1.3fr 1fr;gap:40px;align-items:start}
.pie .logo-pie{width:clamp(180px,20vw,246px);height:auto;display:block}
.pie .frase{font-family:var(--titular);font-weight:300;font-size:18px;line-height:1.4;margin-top:40px;max-width:42ch}
.pie .datos{display:grid;gap:14px;justify-items:end;font-family:var(--titular);font-weight:300;font-size:18px}
.pie .datos a{display:flex;align-items:center;gap:18px;transition:color .2s}
.pie .datos a:hover{color:var(--arena-osc)}
.pie .datos svg{width:19px;height:19px;flex:none}
.pie .medio{margin-top:clamp(32px,4vw,44px);text-align:center;font-size:14px;color:var(--pizarra);display:grid;gap:22px;justify-items:center}
.pie .legales{display:flex;flex-wrap:wrap;justify-content:center;gap:12px clamp(28px,6vw,80px)}
.pie .legales a:hover,.pie .medio a:hover{color:var(--arena-osc)}
/* 4-nov: una fila de logotipos, Inverstone · Fondos Europeos · BGI Law, centrada y del mismo peso a la vista. Sin efecto
   al pasar el ratón. Fondos Europeos y BGI Law llevan fondo blanco: multiply lo funde con el gris del pie */
.pie .logos-pie{list-style:none;margin:0;padding:0;display:flex;align-items:center;justify-content:center;gap:clamp(18px,4.5vw,64px)}
.pie .logos-pie a{display:block}
.pie .logos-pie img{display:block;width:auto}
.pie .logos-pie .inverstone{height:24px}
.pie .logos-pie .fondos-logo{width:244px;height:auto;mix-blend-mode:multiply}
.pie .logos-pie .bgi{height:40px;mix-blend-mode:multiply}
@media (max-width:560px){
  .pie .logos-pie .inverstone{height:16px}
  .pie .logos-pie .fondos-logo{width:136px}
  .pie .logos-pie .bgi{height:28px}
}
.pie .fondos{font-size:12px;line-height:1.5;color:var(--gris);max-width:880px;margin:0 auto}
.pie .credito{font-size:12.5px;color:var(--gris)}

/* ---------- Menú de móvil ---------- */
.menu-movil{position:fixed;inset:0;z-index:70;background:var(--noche);color:var(--pergamino);display:flex;flex-direction:column;justify-content:center;gap:10px;
  padding:0 28px;opacity:0;pointer-events:none;transition:opacity .35s}
/* 29-oct (3): si no cabe (iPhone pequeño con las barras de Safari), se desplaza en vez de cortarse por arriba y por abajo;
   centrado con márgenes automáticos, que no se salen de la pantalla como «justify-content:center» */
.menu-movil{justify-content:flex-start;overflow-y:auto;overscroll-behavior:contain;padding:72px 28px 28px}
.menu-movil > a:first-of-type{margin-top:auto}
.menu-movil > :last-child{margin-bottom:auto}
.menu-movil.visible{opacity:1;pointer-events:auto}
/* 28-oct: la × de cerrar, en el sitio de la hamburguesa (cabecera de 68 px) */
.menu-movil .cerrar{position:absolute;top:12px;right:6px;width:44px;height:44px;display:grid;place-items:center;font-family:var(--titular);font-weight:300;font-size:36px;line-height:1;color:inherit}
.menu-movil a,.menu-movil .entrada-menu{font-family:var(--titular);font-weight:300;font-size:34px;text-align:left;padding:6px 0}
.menu-movil [aria-current]{color:var(--arena)}
/* 29-oct: las sedes, una por fila, y debajo los idiomas */
.menu-movil .sedes-menu{list-style:none;margin:28px 0 0;padding-top:16px;border-top:1px solid rgba(247,245,242,.16)}
.menu-movil .sedes-menu a,.menu-movil .sedes-menu li > span{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--texto);font-size:16px;padding:7px 0}
.menu-movil .sedes-menu b{font-weight:400}
.menu-movil .sedes-menu b + span{font-size:14px;color:rgba(247,245,242,.6)}
.menu-movil .sedes-menu li > span{color:rgba(247,245,242,.8)}
.menu-movil .idiomas-menu{display:flex;gap:10px;margin:10px -12px 0}
.menu-movil .idiomas-menu span{margin-left:auto;padding-right:12px;align-self:center;font-size:14px;color:rgba(247,245,242,.6)}
/* 29-oct (3): cada idioma, con una zona de toque de 44 px (antes 20 px de ancho: se fallaba al tocar PT) */
.menu-movil .idiomas-menu a{font-family:var(--texto);font-weight:400;font-size:15px;letter-spacing:.14em;min-width:44px;min-height:44px;padding:12px;display:flex;align-items:center;justify-content:center;color:rgba(247,245,242,.7)}
.menu-movil .idiomas-menu a[aria-current]{color:var(--arena)}
.menu-movil .datos-menu{margin-top:36px;font-size:15px;color:rgba(247,245,242,.7);display:grid;gap:6px}
/* 29-oct: el teléfono y el correo, pequeños (la regla de los enlaces grandes del menú los dejaba a 34 px) */
.menu-movil .datos-menu a{font-family:var(--texto);font-size:15px;padding:2px 0}
@media (max-height:700px){
  .menu-movil > a{font-size:28px;padding:3px 0}
  .menu-movil .sedes-menu{margin-top:18px;padding-top:10px}
  .menu-movil .sedes-menu a,.menu-movil .sedes-menu li > span{padding:5px 0}
  .menu-movil .datos-menu{margin-top:18px}
}

/* ---------- Páginas interiores ---------- */
/* Sin foto de cabecera, la cabecera va sólida desde el principio */
.interior .cabecera{background:var(--niebla);color:var(--indigo);box-shadow:0 1px 0 var(--linea-suave);height:70px}   /* 28-oct: opaca y del alto de la portada ya pasada */
.interior .cabecera nav [aria-current]{color:var(--arena-osc)}
.tramo{padding:var(--aire) 0}
.tramo.greige{background:var(--greige)}
.tramo.noche{background:var(--noche);color:var(--pergamino)}
.tramo .encabezado{max-width:760px;margin-bottom:clamp(40px,5vw,64px)}
.tramo .encabezado .apoyo{margin-top:20px}
.tramo.noche .apoyo{color:rgba(247,245,242,.72)}
.etiqueta-seccion{display:block;margin-bottom:16px;font-size:12.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--arena-osc)}
.tramo.noche .etiqueta-seccion{color:var(--arena)}

/* Firma: quiénes somos */
.quienes{background:var(--greige);padding:clamp(56px,6vw,90px) 0 var(--aire)}
.quienes .rejilla{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(36px,6vw,96px);align-items:center}   /* 28-oct: foto a la izquierda */
.quienes h2{margin-bottom:24px}
.quienes .lado .grande{font-weight:300;font-size:clamp(22px,2vw,28px);color:var(--indigo);margin-bottom:26px}
/* Hueco para una foto que aún no está */
.hueco-imagen{position:relative;display:grid;place-items:center;aspect-ratio:4/5;background:var(--niebla);border-radius:var(--radio)}
.hueco-imagen svg{width:22%;height:auto;aspect-ratio:360/401;color:rgba(17,42,85,.13)}
.hueco-imagen span{position:absolute;left:14px;top:12px;font-size:12px;letter-spacing:.06em;color:var(--gris)}
.quienes .grande{font-family:var(--titular);font-weight:300;font-size:clamp(24px,2.5vw,33px);line-height:1.32}
.quienes .lado p{color:var(--pizarra);font-weight:300}
.quienes .lado p + p{margin-top:16px}
.quienes .grupo{margin-top:26px;padding-top:20px;border-top:1px solid var(--linea)}
.metodo.firma-metodo .etapa p{max-width:46ch}

/* Firma: el trato */
.trato .citas{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,40px)}
.trato blockquote{padding:clamp(32px,4vw,52px);border:1px solid rgba(247,245,242,.18);border-radius:2px;display:flex;flex-direction:column;gap:26px;justify-content:space-between}
.trato blockquote p{font-family:var(--titular);font-weight:300;font-size:clamp(23px,2.3vw,31px);line-height:1.3}
.trato blockquote footer{font-size:14px;font-weight:300;color:rgba(247,245,242,.68)}
.trato .nota-trato{margin-top:clamp(32px,4vw,48px);max-width:62ch;color:rgba(247,245,242,.72);font-weight:300}

/* Firma: quién hay detrás */
.equipo .personas{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,3vw,40px)}   /* cuatro desde el 27-oct (sin Jorge) */
.persona .retrato{position:relative;aspect-ratio:4/5;background:var(--greige);border-radius:2px;display:grid;place-items:center;overflow:hidden}
.persona .retrato svg{width:28%;height:auto;aspect-ratio:360/401;color:rgba(17,42,85,.13)}
.persona .retrato span{position:absolute;left:14px;bottom:12px;font-size:12px;letter-spacing:.06em;color:var(--gris)}
.persona h3{margin-top:18px;font-size:clamp(19px,1.6vw,24px)}
.persona .cargo{margin-top:6px;font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--arena-osc)}
.persona .cargo.falta{color:var(--gris);font-weight:500}

/* Firma: la oficina */
.oficina .rejilla{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,90px);align-items:center}
.oficina .foto{border-radius:var(--radio);overflow:hidden;aspect-ratio:9/7}
.oficina .foto img{width:100%;height:100%;object-fit:cover}
.oficina h2{margin-bottom:22px}
.oficina .apoyo{color:var(--pizarra);margin-bottom:28px}
.oficina address{font-style:normal;display:grid;gap:4px;margin-bottom:30px;font-family:var(--titular);font-weight:300;font-size:20px}
.oficina address small{font-family:var(--texto);font-size:15px;color:var(--gris)}

.cierre-grande{background:var(--niebla);padding:var(--aire) 0;text-align:center}
.cierre-grande h2{max-width:22ch;margin:0 auto 30px;font-size:clamp(30px,3.6vw,46px)}
.cierre-grande .acciones{display:flex;justify-content:center;flex-wrap:wrap;gap:16px 48px}

/* Qué es un NPL (la guía) */
.guia-cabecera{background:var(--greige);padding:calc(var(--cabecera) + clamp(56px,8vw,110px)) 0 clamp(52px,6vw,84px)}
.guia-cabecera h1{font-size:clamp(42px,5.4vw,72px);line-height:1.08}
.guia-cabecera .apoyo{margin-top:24px;font-size:clamp(18px,1.6vw,22px);color:var(--pizarra);max-width:56ch}
.indice{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:clamp(36px,4vw,52px);padding-top:22px;border-top:1px solid var(--linea)}
.indice a{font-size:14px;font-weight:500;letter-spacing:.04em;color:var(--pizarra);transition:color .2s}
.indice a:hover{color:var(--arena-osc)}
.comparativa{width:100%;border-collapse:collapse;font-size:16px}
.comparativa th,.comparativa td{text-align:left;vertical-align:top;padding:20px 22px 20px 0;border-bottom:1px solid var(--linea)}
.comparativa thead th{font-family:var(--titular);font-weight:300;font-size:clamp(22px,2vw,28px);border-bottom:1px solid var(--indigo);padding-bottom:16px}
.comparativa tbody th{width:22%;font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--arena-osc);padding-top:23px}
.comparativa td{color:var(--pizarra);font-weight:300;width:39%}
.finales{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,2.4vw,28px)}
.finales li{border:1px solid var(--linea-clara);border-radius:2px;padding:clamp(26px,3vw,38px)}
.finales .num{display:block;font-family:var(--titular);font-weight:300;font-size:38px;line-height:1;color:var(--arena);margin-bottom:18px}
.finales h3{margin-bottom:12px}
.finales p{color:rgba(247,245,242,.74);font-weight:300}
.tramo.noche .cierre-nota{margin-top:clamp(28px,3vw,40px);max-width:62ch;color:rgba(247,245,242,.8);font-family:var(--titular);font-weight:300;font-size:clamp(20px,1.9vw,25px);line-height:1.4}
.riesgos{display:grid;gap:0}
.riesgos li{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);gap:clamp(20px,4vw,64px);padding:28px 0;border-top:1px solid var(--linea)}
.riesgos li:last-child{border-bottom:1px solid var(--linea)}
.riesgos h3{font-size:clamp(21px,2vw,26px)}
.riesgos p{color:var(--gris);font-weight:300}
.porque{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,44px);margin-bottom:clamp(36px,4vw,52px)}
.porque li{padding-top:22px;border-top:1px solid var(--indigo)}
.porque h3{font-size:clamp(21px,2vw,26px);margin-bottom:10px}
.porque p{color:var(--gris);font-weight:300}
.glosario{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(32px,5vw,80px)}
.glosario details{padding:22px 0;border-top:1px solid var(--linea)}
.glosario summary{list-style:none;cursor:default;font-family:var(--titular);font-weight:300;font-size:21px;margin-bottom:6px}
.glosario summary::-webkit-details-marker{display:none}
.glosario details p{color:var(--gris);font-weight:300;font-size:16px}
.aviso-recibido{background:var(--noche);color:var(--pergamino);padding:calc(var(--cabecera) + 22px) 0 24px}
.aviso-recibido[hidden]{display:none}
.aviso-recibido .marco{display:flex;align-items:center;justify-content:space-between;gap:24px}
.aviso-recibido p{font-size:16px}
.aviso-recibido p b{display:block;font-family:var(--titular);font-weight:300;font-size:clamp(22px,2.2vw,28px);color:var(--arena);margin-bottom:4px}
.aviso-recibido button{flex:none;width:44px;height:44px;font-size:28px;font-weight:300;line-height:1}
.aviso-recibido:not([hidden]) + .guia-cabecera{padding-top:clamp(56px,8vw,110px)}

/* Contacto y primera inversión */
.pagina-contacto{padding-top:calc(var(--cabecera) + var(--aire))}
.pagina-contacto h1{font-size:clamp(32px,3.6vw,48px);max-width:16ch;line-height:1.15}
/* 28-oct: datos a la izquierda y formulario a la derecha, separados por una línea */
.pagina-contacto .rejilla{gap:0}
.pagina-contacto .lado-datos{padding-right:clamp(40px,5vw,80px)}
.pagina-contacto .lado-form{padding-left:clamp(40px,5vw,80px)}
/* Datos de contacto, grandes (28-oct) */
.pagina-contacto .lado-datos .datos{margin-top:clamp(36px,4vw,56px);gap:20px;font-family:var(--titular);font-weight:300;font-size:clamp(17px,1.35vw,20px)}
.pagina-contacto .lado-datos .datos a{gap:18px}
.pagina-contacto .lado-datos .datos svg{width:20px;height:20px}
/* Formulario: título breve y el formulario en un marco redondeado; debajo, la entrada al de primera inversión */
.pagina-contacto .lado-form h2{font-size:clamp(24px,2.2vw,30px)}
.pagina-contacto .lado-form .apoyo{margin:12px 0 28px}
/* 3-nov: el marco del formulario de Contacto, en todos los formularios (portada, Contacto, primera inversión y ficha de
   cada operación), en ordenador y en móvil */
.pasos-form,.ficha-inmueble .pasos-form{min-height:0;padding:clamp(24px,2.8vw,40px);border:1px solid rgba(247,245,242,.22);border-radius:14px;background:rgba(247,245,242,.03)}
.pasos-form .pregunta{margin-top:24px}
.recibido{padding:clamp(24px,2.8vw,40px);border:1px solid rgba(247,245,242,.22);border-radius:14px}
.pagina-contacto .lado-datos .primera-vez{margin-top:clamp(40px,4.4vw,60px)}
.pagina-contacto .lado-datos .primera-vez p{font-size:15.5px;color:rgba(247,245,242,.8)}
.pagina-contacto .lado-datos .primera-vez .enlace{margin-top:4px}

/* ---------- Pantalla de carga (27-oct) ----------
   Fundido a azul noche, el contorno del logotipo (donde va en la portada) se relinea con una luz dorada y la pantalla
   se funde. Al ir a otra página de la web, el fundido a azul noche se hace antes de salir (.saliendo) y en la nueva
   se relinea el rombo, en el centro. Todo en sitio.js */
.carga{display:none;position:fixed;inset:0;z-index:200;background:var(--niebla);transition:background-color .45s ease,opacity .8s var(--suave)}
.con-carga .carga,.saliendo .carga{display:block}
.carga.noche,.carga-noche .carga{background:var(--noche)}
.carga.fuera{opacity:0}
.saliendo .carga{background:var(--noche);animation:carga-entra .42s ease both}
@keyframes carga-entra{from{opacity:0}}
/* 3-nov, móvil: fundido rápido después de la primera visita y entre páginas (sitio.js) */
.carga.rapida{transition:background-color .3s ease,opacity .5s var(--suave)}
.saliendo-rapido .carga{animation-duration:.25s}
.cargando{overflow:hidden}
.carga-logo{position:absolute}
.carga-logo svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;fill:none;stroke-linecap:round;stroke-linejoin:round}
.carga-trazo{stroke:var(--pergamino);opacity:.72}
.carga-luz{stroke:#F6E3C3}   /* el halo, con un filtro SVG (sitio.js) */

/* ---------- Aparición suave ---------- */
/* 28-oct: más corta, más cerca y solo en piezas pequeñas (títulos, textos), para que no queden bloques vacíos */
.aparece{opacity:0;translate:0 16px;transition:opacity .6s var(--suave),translate .6s var(--suave);transition-delay:calc(var(--i,0) * 70ms)}
.aparece.visto{opacity:1;translate:0 0}
.sin-js .aparece{opacity:1;translate:none}

/* ---------- Legibilidad (28-oct, feedback): el texto corrido pasa de 300 a 400 y lo claro sobre azul noche, más opaco ---------- */
.apoyo,.linea-tiempo p,.pila .carta p,.preguntas details p,.metodo .etapa p,.quienes .lado p,.recibido > p,.recibido li,.finales p,
.riesgos p,.porque p,.glosario details p,.comparativa td,.trato .nota-trato,.trato blockquote footer,.miembro p,.siguientes li,.oferta .capa .nota{font-weight:400}
.vendidas .apoyo,.modelo .apoyo,.contacto .apoyo,.tramo.noche .apoyo,.finales p{color:rgba(247,245,242,.88)}
.miembro p,.casilla,.recibido > p,.recibido li{color:rgba(247,245,242,.85)}
.pasos-form .cabeza,.pasos-form .volver,.pantalla .ayuda,.vsl .nota,.trato blockquote footer{color:rgba(247,245,242,.78)}
.metodo .etapa .quien{font-size:12.5px}
.pie .fondos{color:var(--pizarra)}

/* ---------- Tableta ---------- */
@media (max-width:1024px){
  .carrusel .pista{grid-auto-columns:calc((100% - 24px)/2);gap:24px}
  .carrusel .flecha.antes{left:-14px}.carrusel .flecha.despues{right:-14px}
  .pila .carta{grid-template-columns:1.1fr .9fr}
}

/* ---------- Móvil ---------- */
@media (max-width:820px){
  :root{--cabecera:68px}
  body{font-size:16px}
  .cabecera nav{display:none}
  .idea .rejilla{grid-template-columns:1fr}
  /* En móvil la línea de tiempo baja en vertical, a la izquierda */
  .linea-tiempo{--alto-cifra:40px;grid-auto-flow:row;grid-template-columns:1fr;gap:40px}
  .linea-tiempo li{padding-left:34px}
  .linea-tiempo .hito{position:absolute;left:0;top:calc(var(--alto-cifra)/2 - 5.5px);margin:0}
  .linea-tiempo .cifra{margin-bottom:12px}
  .linea-tiempo li::before{left:5px;top:calc(var(--alto-cifra)/2);width:1px;height:calc(100% + 40px);transform:scaleY(0);transform-origin:50% 0}
  .linea-tiempo li:has(+ .reo)::before{background:repeating-linear-gradient(180deg,var(--indigo) 0 5px,transparent 5px 10px)}
  .linea-tiempo.visto li::before,.sin-js .linea-tiempo li::before{transform:none}
  .solo-ancho{display:none}
  .mandos-tira{display:none}
  .firma-equipo{grid-template-columns:1fr;gap:40px;padding-left:0}
  .firma-equipo .lado{gap:28px;padding:0 var(--borde)}
  .firma-equipo .pista{grid-auto-columns:64vw;padding-inline:var(--borde);scroll-padding-inline:var(--borde)}
  .boton-menu{display:block}
  .cabecera.solida,.interior .cabecera{height:64px}
  /* 28-oct: cabecera de móvil como la de Gunni & Trentino: logotipo pequeño a la izquierda y la hamburguesa a la derecha.
     En la portada no hay logotipo grande: está en la cabecera desde el principio, en blanco, y pasa a índigo con ella */
  .cabecera .marco{grid-template-columns:1fr auto}
  .cabecera .logo{grid-column:1;justify-self:start}
  .cabecera .logo svg,.cabecera .hueco-logo{width:150px}
  .boton-menu{grid-column:2;margin-right:-10px}
  .logo-grande{display:none}
  .js-logo .cabecera .logo svg{opacity:1}
  /* Portada: el vídeo de fondo y el texto con el botón abajo, centrados, por encima de lo que tapa el bloque que sube */
  .portada-foto .titular-portada{top:auto;bottom:calc(28px + 7svh + clamp(28px,4svh,44px))}   /* 3-nov (noche): por encima del fundido */
  .portada-foto .titular-portada small{font-size:.7em}
  .escena > .portada-foto::after{background:linear-gradient(180deg,rgba(14,20,27,.4) 0%,rgba(14,20,27,0) 22%,rgba(14,20,27,0) 40%,rgba(14,20,27,.62) 100%)}
  .portada-foto .texto{bottom:96px}
  .sube{margin-top:-28px}
  .idea .foto{aspect-ratio:4/3}
  .carrusel .pista{grid-auto-columns:84%;gap:16px}
  .carrusel .flecha{display:none}
  .paso .cifra{aspect-ratio:auto;height:120px;font-size:56px}
  .paso .cuerpo{padding:22px 14px 14px}
  .metodo{padding:12px 8px}
  .metodo .rejilla{grid-template-columns:1fr}
  .metodo .fijo{position:static}
  .metodo ol{gap:56px}
  .metodo li.etapa:nth-child(even){justify-self:start;text-align:left}
  .pila .carta{grid-template-columns:1fr;top:calc(var(--cabecera) + 12px + var(--n) * 10px);padding:28px 22px}
  .pila .carta .foto{order:-1;aspect-ratio:16/10}
  .pila .carta p{margin:14px 0 22px}
  .oportunidades .titulo{flex-direction:column;align-items:flex-start}
  .oportunidades .titulo .boton{display:none}
  .ficha{grid-template-columns:1fr}
  .ficha .datos{padding:4px 14px 22px}
  .firma .tarjeta{padding:44px 22px}
  .preguntas .rejilla,.contacto .rejilla{grid-template-columns:1fr}
  .formulario{grid-template-columns:1fr}
  .siguientes{grid-template-columns:1fr;gap:16px}
        .pie .arriba{grid-template-columns:1fr}
  .pie .datos{justify-items:start}
  .pie .datos a{flex-direction:row-reverse}
  .pareja{margin-top:-28px}
  .portada-foto .acciones{flex-direction:column;align-items:flex-start;gap:6px}
  .quienes .rejilla,.oficina .rejilla,.trato .citas{grid-template-columns:1fr}
  .pagina-contacto .lado-datos{padding-right:0}
  .pagina-contacto .lado-form{padding:0;margin-top:56px}
  .equipo .personas{grid-template-columns:1fr 1fr}
  .comparativa thead{display:none}
  .comparativa tr{display:grid;padding:18px 0;border-bottom:1px solid var(--linea)}
  .comparativa th,.comparativa td,.comparativa tbody th{display:block;width:auto;border:0;padding:4px 0}
  .comparativa td::before{content:attr(data-col) ": ";font-weight:600;color:var(--indigo)}
  .finales,.porque,.glosario{grid-template-columns:1fr}
  .riesgos li{grid-template-columns:1fr;gap:10px}
}

/* ---------- Ficha de inmueble (28-oct, tarde) ----------
   Se abre con «Me interesa» (sitio.js). En ordenador, casi a pantalla completa con el resto difuminado: fotos y datos a la
   izquierda, el formulario a la derecha en azul noche. En móvil, a pantalla completa: fotos, datos y formulario */
.tira .oferta .claves{display:none}   /* los datos de la operación, en la ficha */
/* 29-oct (tarde): en la tira, los datos de cada ficha miden lo que la ficha grande, para que no se recoloquen mientras
   la ficha crece o encoge (era el «movimiento raro» del móvil); en las pequeñas no se ven. sitio.js fija el alto de la pista */
.tira .datos-oferta{width:var(--grande)}
/* En la tira (28-oct), solo la ficha grande lleva los datos; las demás, la foto */
.oferta > :not(.foto){transition:opacity .45s .3s}
.oferta:not(.activa) > :not(.foto){opacity:0;visibility:hidden;transition:opacity .2s,visibility 0s .2s}
html.con-ficha{overflow:hidden}
/* Ficha emergente de las operaciones (28-oct; 29-oct, noche: otra vez también para las de venta, a pedido del cliente).
   Arriba, a la izquierda, la foto con sus miniaturas debajo, sobre azul noche; a la derecha, los datos. Debajo, en una
   banda greige, la descripción y el botón que abre el formulario (no se ve de primeras). Si no cabe, se desplaza.
   Más color (pedido del cliente: «que no sea tan blanca»): las dos cifras en un bloque azul noche, los datos clave sobre
   arena clara y el botón en arena */
.ficha-inmueble{--pad-f:clamp(20px,2.6vw,36px);position:fixed;inset:0;margin:auto;width:min(1080px,92vw);height:fit-content;max-height:90vh;max-width:none;padding:0;border:0;
  border-radius:var(--radio);background:var(--niebla);color:var(--indigo);overflow-y:auto;overscroll-behavior:contain}
.ficha-inmueble::backdrop{background:rgba(16,31,56,.4);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.ficha-inmueble[open]{animation:ficha-entra .55s var(--suave)}
.ficha-inmueble[open]::backdrop{animation:ficha-fondo .45s ease}
@keyframes ficha-entra{from{opacity:0;transform:translateY(18px) scale(.985)}}
@keyframes ficha-fondo{from{opacity:0}}
.ficha-inmueble.es-venta .si-vendida,.ficha-inmueble.es-vendida .si-venta{display:none}
.ficha-inmueble .cuerpo-ficha{padding:var(--pad-f) var(--pad-f) 0}
.ficha-inmueble .ficha-arriba{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1fr);gap:clamp(22px,3vw,40px);align-items:start}
/* La foto: en fila, una a una, con imán; las verticales, enteras (30-oct: sin el fondo azul noche, como pidió) */
.ficha-inmueble .ficha-galeria{position:relative;aspect-ratio:4/3;max-height:46vh;width:100%;overflow:hidden;border-radius:var(--radio);background:#D6D9DE}
.ficha-inmueble .ficha-galeria{clip-path:inset(0 1px)}   /* con anchos de medio píxel, asomaba un filo de la foto siguiente */
.ficha-inmueble .ficha-fotos{position:absolute;inset:0;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.ficha-inmueble .ficha-fotos::-webkit-scrollbar{display:none}
.ficha-inmueble .ficha-fotos img{flex:none;width:100%;height:100%;object-fit:cover;scroll-snap-align:start}
.ficha-inmueble .ficha-fotos img.vertical{object-fit:contain}
.ficha-inmueble.es-vendida .ficha-fotos img,.ficha-inmueble.es-vendida .minis-pista img{filter:saturate(.25)}
/* Las miniaturas (29-oct, noche): pequeñas y apagadas; la que se ve, entera y con un filo arena. Flechas a los lados.
   30-oct: sin fondo, sobre el de la ficha */
.ficha-minis{display:grid;grid-template-columns:30px minmax(0,1fr) 30px;align-items:center;gap:4px;padding:8px 0 0}
.ficha-minis[hidden]{display:none}
.minis-pista{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
.minis-pista::-webkit-scrollbar{display:none}
.minis-pista button{flex:none;width:50px;height:36px;padding:0;border:0;border-radius:var(--radio);overflow:hidden;opacity:.45;background:#D6D9DE;cursor:pointer;transition:opacity .3s}
.minis-pista button:hover{opacity:.7}
.minis-pista button[aria-current="true"]{opacity:1;outline:2px solid var(--arena);outline-offset:-2px}
.minis-pista img{width:100%;height:100%;object-fit:cover}
.ficha-minis > button{width:30px;height:36px;display:grid;place-items:center;color:var(--indigo);opacity:.65;cursor:pointer;transition:opacity .2s,color .2s}
.ficha-minis > button:hover:not(:disabled){opacity:1;color:var(--arena-osc)}
.ficha-minis > button:disabled{opacity:.15;cursor:default}
.ficha-minis svg{width:8px;height:14px}
.ficha-minis .mini-despues svg{rotate:180deg}
.ficha-inmueble .ficha-datos{padding:2px 48px 0 0}
.ficha-inmueble .tipo{font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--arena-osc)}   /* 30-oct: sin fondo */
.ficha-inmueble h3{font-size:clamp(28px,2.6vw,38px);margin-top:8px}
.ficha-inmueble .lugar{margin-top:4px;font-size:15.5px;color:var(--pizarra)}
.ficha-inmueble .direccion{margin-top:8px}
.ficha-inmueble .cifras{margin-top:16px;padding:14px 18px;border:0;border-radius:var(--radio);background:var(--noche)}
.ficha-inmueble .cifras .dato b{color:var(--pergamino)}
.ficha-inmueble .cifras .dato span{color:rgba(247,245,242,.82)}
.ficha-inmueble .cifras .valor,.ficha-inmueble .cifras .dato + .dato{border-left:1px solid rgba(247,245,242,.2);padding-left:16px}
.ficha-inmueble .cifras .valor b,.ficha-inmueble .cifras .valor span{color:var(--arena)}
.ficha-inmueble .rasgos{margin-top:16px;padding-top:0;border-top:0}
.ficha-inmueble .claves{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 18px;margin-top:16px;padding:14px 16px;border-top:0;
  border-left:3px solid var(--arena);border-radius:var(--radio);background:var(--greige);font-size:15px}
.ficha-inmueble .claves dt{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--gris);margin-bottom:2px}
.ficha-inmueble .claves dd{color:var(--indigo)}
.ficha-inmueble .ficha-abajo{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px 40px;align-items:end;margin:clamp(20px,2.4vw,30px) calc(-1*var(--pad-f)) 0;
  padding:clamp(20px,2.2vw,28px) var(--pad-f) var(--pad-f);background:var(--greige)}
.ficha-inmueble .ficha-descripcion{max-width:78ch}
.ficha-descripcion p{color:var(--pizarra);font-size:15.5px;line-height:1.55}
.ficha-descripcion p + p{margin-top:8px}
.ficha-descripcion b{margin-right:6px;font-weight:600;color:var(--indigo)}
.ficha-descripcion .provisional{margin-bottom:8px;font-size:11px;line-height:1.5}
.ficha-inmueble .ficha-pie{display:flex;justify-content:flex-end}
.ficha-inmueble .ficha-pie .boton{padding:13px 20px 12px;border:0;border-radius:var(--radio);background:var(--arena);color:var(--noche);transition:background .3s,color .3s}
.ficha-inmueble .ficha-pie .boton::before{display:none}
.ficha-inmueble .ficha-pie .boton:hover{background:var(--noche);color:var(--arena)}
.ficha-inmueble .ficha-pie[hidden],.ficha-inmueble .ficha-form[hidden]{display:none}
/* 3-nov (documento de cambios de Inversalia): las vendidas vuelven a llevar descripción, como las disponibles. Sus dos
   bloques de cifras: arriba, la venta (azul noche); debajo, los datos de cuando estaba a la venta, en gris */
.ficha-inmueble .cifras-antes{margin-top:10px;background:var(--greige)}
.ficha-inmueble .cifras-antes .dato b{color:var(--indigo)}
.ficha-inmueble .cifras-antes .dato span{color:var(--gris)}
.ficha-inmueble .cifras-antes .dato + .dato{border-left-color:var(--linea)}
.ficha-inmueble .cifras-antes .valor b,.ficha-inmueble .cifras-antes .valor span{color:var(--arena-osc)}
.ficha-inmueble .cifras-antes .dato:first-child{border-left:0;padding-left:0}
.ficha-inmueble.es-vendida .ficha-abajo:not(:has(.ficha-descripcion > *)){padding-top:0;background:none}
/* 3-nov (tarde, pedido de Sebastián): en las vendidas, una sola foto sin miniaturas y, justo debajo, la descripción y el
   botón (sitio.js los pasa a la columna de la foto); la ficha tiene que caber sin desplazarse, así que los datos de la
   derecha van más juntos */
.ficha-inmueble.es-vendida .ficha-galeria{max-height:40vh}
.ficha-inmueble.es-vendida .ficha-visor .ficha-descripcion{margin-top:14px}
.ficha-inmueble.es-vendida .ficha-descripcion p{font-size:15px;line-height:1.5}
.ficha-inmueble.es-vendida .ficha-visor .ficha-pie{margin-top:16px;justify-content:flex-start}
@media (min-width:821px){
  .ficha-inmueble.es-vendida .ficha-abajo{display:none}
  .ficha-inmueble.es-vendida .cuerpo-ficha{padding-bottom:var(--pad-f)}
}
.ficha-inmueble.es-vendida h3{margin-top:4px}
.ficha-inmueble.es-vendida .cifras{margin-top:12px;padding:10px 16px}
.ficha-inmueble.es-vendida .cifras-antes{margin-top:8px}
.ficha-inmueble.es-vendida .rasgos{flex-wrap:nowrap;gap:10px 16px;margin-top:12px}
.ficha-inmueble.es-vendida .rasgos b{font-size:16px}
.ficha-inmueble.es-vendida .claves{margin-top:12px;padding:10px 14px;gap:8px 16px;font-size:14px;line-height:1.35}
.ficha-inmueble .ficha-form{margin:0 calc(-1*var(--pad-f));background:var(--noche);color:var(--pergamino);
  padding:clamp(28px,3.4vw,48px) var(--pad-f);scroll-margin-top:20px;text-align:center}   /* 29-oct (noche): centrado */
.ficha-inmueble .ficha-form h2{font-size:clamp(24px,2.2vw,30px)}
.ficha-inmueble .ficha-form > .apoyo{margin:8px auto 0;color:rgba(247,245,242,.8);font-size:15.5px}
.ficha-inmueble .pasos-form{min-height:0;margin:clamp(14px,2vh,22px) auto 0;max-width:600px;text-align:left}
.ficha-inmueble .recibido{max-width:600px;margin-inline:auto;text-align:left}
.ficha-inmueble .recibido{margin-top:18px}
.ficha-inmueble .recibido h3{font-size:clamp(22px,2vw,28px);margin:0 0 12px}
.ficha-inmueble .recibido .no-es{margin-top:18px}
.ficha-inmueble:focus{outline:none}
.ficha-inmueble .cerrar-ficha{position:absolute;top:14px;right:14px;z-index:3;width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--linea);border-radius:var(--radio);
  background:var(--niebla);color:var(--indigo);font-family:var(--titular);font-weight:300;font-size:30px;line-height:1}
.eleccion.dos{grid-template-columns:1fr 1fr}
.ficha-aviso{margin-top:16px;padding-left:12px;border-left:2px solid var(--arena);font-size:14px;line-height:1.5;color:var(--gris)}
/* La banda «Vendido» (operaciones cerradas), sobre la foto de la tira y de la ficha */
.banda{position:absolute;z-index:1;left:0;right:0;top:clamp(16px,9%,30px);padding:8px 0;background:var(--arena);color:var(--noche);text-align:center;
  font-size:12.5px;font-weight:600;letter-spacing:.34em;text-indent:.34em;text-transform:uppercase;pointer-events:none}
@media (max-width:820px){
  .ficha-inmueble{width:100%;height:100%;height:100dvh;max-height:none;border-radius:0}
  .ficha-inmueble::backdrop{-webkit-backdrop-filter:none;backdrop-filter:none}   /* 30-oct: tapa la pantalla; el desenfoque solo frenaba la entrada */
  .ficha-inmueble .cuerpo-ficha{padding:0}
  .ficha-inmueble .ficha-arriba{display:block}
  .ficha-inmueble .ficha-galeria{border-radius:0}
  .ficha-minis{padding:8px var(--borde) 0}
  .ficha-inmueble .ficha-galeria{max-height:none}
  .ficha-inmueble .ficha-datos{padding:22px var(--borde) 0}
  .ficha-inmueble .claves{grid-template-columns:1fr 1fr}
  .ficha-inmueble .ficha-abajo{display:block;margin:24px 0 0;padding:24px var(--borde) 40px}
  .ficha-inmueble .ficha-pie{margin-top:22px}
  .ficha-inmueble.es-vendida .ficha-pie{margin-top:0}
  .ficha-inmueble .ficha-pie .boton{width:100%;justify-content:center}
  .ficha-inmueble .ficha-form{margin:0;padding:36px var(--borde) 52px}
  .ficha-inmueble .cerrar-ficha{position:fixed;top:12px;right:12px}
}

/* Dirección de cada operación (29-oct, de Idealista): en la tira y en su ficha. La página de cada operación (29-oct,
   tarde) se quitó el 29-oct por la noche: el cliente la prefiere en ficha emergente, como las vendidas */
.direccion{display:flex;align-items:flex-start;gap:7px;margin-top:6px;font-size:14px;line-height:1.4;color:var(--pizarra)}
.direccion svg{flex:none;width:14px;height:14px;margin-top:2px;color:var(--arena-osc)}

/* ---------- Móvil, 28-oct (tarde): bloques 2 a 5 ---------- */
.avance-pila,.oferta .ir{display:none}
@media (max-width:820px){
  /* 2. Título, vídeo y botón, en ese orden; fuera «Qué es un NPL y qué hacemos» y su texto */
  .idea .rejilla{display:flex;flex-direction:column;align-items:stretch;gap:28px}
  .idea .texto{display:contents}
  .idea .texto h3,.idea .texto .apoyo{display:none}
  .idea .titular-idea{margin-bottom:28px}
  .idea .vsl{order:1}
  .idea .texto .boton{order:2;align-self:center}

  /* 4. Qué hacemos por usted (29-oct, tarde): como estaba «Cómo analizamos»: tarjetas claras con su foto, que al bajar
     se quedan quietas bajo la cabecera y se apilan, cada una un poco más abajo; la tapada se apaga (sitio.js pone el
     alto común --alto-carta-m y --tapado). Si no caben en la pantalla (.sin-pausa), una detrás de otra */
  .obtiene > .marco > h2{margin-bottom:40px}
  .pila{counter-reset:carta;display:grid;gap:16px;max-width:none;margin:0;padding:0 0 8px}
  .pila .carta{counter-increment:carta;position:sticky;top:calc(64px + 16px + var(--n)*14px);height:var(--alto-carta-m,auto);display:flex;flex-direction:column;align-items:stretch;gap:0;
    padding:8px 8px 22px;background:var(--niebla);color:var(--indigo);border:1px solid var(--noche);border-radius:var(--radio);box-shadow:0 -12px 30px rgba(14,20,27,.25)}
  .pila .carta > *{opacity:calc(1 - var(--tapado,0))}
  .pila .carta .foto{display:block;order:-1;aspect-ratio:16/9;border-radius:1px}
  .pila .carta::before{content:counter(carta,decimal-leading-zero);font-family:var(--titular);font-weight:300;font-size:34px;line-height:1;color:var(--arena-osc);margin:18px 14px 12px;
    opacity:calc(1 - var(--tapado,0))}
  .pila .carta > div:not(.foto){display:flex;flex-direction:column;flex:1;padding:0 14px}
  .pila .carta h3{font-size:24px;line-height:1.2}
  .pila .carta p{margin:12px 0 16px;color:var(--gris);line-height:1.6}
  .pila .carta .boton{margin-top:auto;align-self:flex-start}
  .pila.sin-pausa .carta{position:relative;top:auto;height:auto}
  .pila.sin-pausa .carta > *,.pila.sin-pausa .carta::before{opacity:1}
  .obtiene .avance-pila{display:none}
  .avance-pila{display:block;position:relative;width:50%;height:1px;margin:30px auto 0;background:rgba(247,245,242,.22)}
  .avance-pila i{position:absolute;left:0;top:-1px;height:3px;width:var(--tam,25%);translate:var(--pos,0) 0;background:var(--niebla)}

  /* Cómo trabajamos (29-oct, tarde): en móvil, un carrusel que se pasa con el dedo; abajo van la barra de avance y las
     flechas. 3-nov (noche, documento de cambios: que no se corte ningún texto): un paso entero cada vez, sin que asome el
     siguiente */
  .proceso-fijo{position:static;height:auto;min-height:0;overflow:visible;padding:var(--aire) 0;gap:28px}
  .proceso-pista{--ancho-paso:calc(100vw - var(--borde));--hueco-paso:var(--borde);width:auto;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;
    padding:46px var(--borde) 0;scroll-padding-inline:var(--borde)}
  .proceso-pista::-webkit-scrollbar{display:none}
  .paso-h{scroll-snap-align:start}
  /* 29-oct (noche): en móvil nada se mueve hacia arriba o hacia abajo: los pasos están siempre a la vista y solo cambia
     su opacidad, según lo lejos que estén de su sitio (sitio.js, --op) */
  .paso-h > :not(.hito),.paso-h.visto > :not(.hito){translate:none;opacity:var(--op,1);transition:opacity .15s linear}
  .proceso-pista{overscroll-behavior-y:none}
  .proceso .avance-pila{margin-top:-4px;background:var(--linea)}
  .proceso .avance-pila i{background:var(--indigo)}
  .pie-proceso{flex-direction:column;align-items:stretch;gap:22px}
  .mandos-proceso{display:flex;justify-content:flex-end;gap:8px}
  .mandos-proceso button{width:50px;height:50px;border-radius:var(--radio);background:var(--noche);color:var(--pergamino);font-size:18px;transition:opacity .3s}
  .mandos-proceso button:disabled{opacity:.25}
  .proceso .mas{flex-direction:column;gap:6px}

  /* Dónde operamos: el mapa a todo el ancho, recortado entre México y la península (el lienzo se agranda y se
     desplaza con las medidas que calcula MapaSedes.astro); sin ratón, los tres nombres a la vista */
  .mundo{aspect-ratio:var(--proporcion-movil);margin-inline:calc(-1*var(--borde))}
  .mundo .lienzo{inset:auto;left:var(--l-movil);top:var(--t-movil);width:var(--w-movil);height:var(--h-movil)}
  .mundo .etiqueta b{font-size:17px}
  .mundo .etiqueta span,.mundo .etiqueta .enlace{font-size:12px}

  /* 5. Operaciones, como Luxury Places: título centrado, sin botón; fichas con la foto vertical. La primera es la grande
     y la única con los datos; las demás, más pequeñas. Se pasa con el dedo o con las flechas de abajo a la derecha
     (sitio.js mueve la tira como en ordenador, con data-peq-movil y data-grande-movil). La flecha ↗ abre la ficha */
  .oportunidades,.vendidas{display:flex;flex-direction:column}
  .oportunidades .titulo,.vendidas .titulo{align-items:center;text-align:center;margin-bottom:36px}
  .oportunidades .titulo .apoyo,.vendidas .titulo .apoyo{margin-inline:auto}
  .rasgos{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px}
  .cifras{gap:12px}
  .cifras .dato b{font-size:20px}
  .cifras .valor,.vendidas .cifras .dato + .dato{padding-left:12px}
  .vendidas .oferta .ir{color:var(--pergamino)}
  .vendidas .mandos-tira button{background:var(--niebla);color:var(--noche)}
  .oportunidades .titulo .boton{display:none}
  .tira{touch-action:pan-y}
  .oferta .foto{aspect-ratio:4/5}
  .oferta .capa{display:none}
  .datos-oferta{display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:12px}
  .datos-oferta > *{grid-column:1/-1}
  .datos-oferta .lugar{grid-column:1}
  .oferta .ir{display:grid;place-items:center;grid-column:2;width:40px;height:40px;margin-right:-10px;color:var(--indigo)}
  .oferta .ir svg{width:18px;height:18px}
  .mandos-tira{display:flex;order:3;justify-content:flex-end;margin:24px 0 0}
  .mandos-tira button{border:0;background:var(--noche);color:var(--pergamino);width:50px;height:50px}
  .mandos-tira button:disabled{opacity:.25}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .aparece{opacity:1;translate:none}
  .portada-foto img{transform:none}
  .pila .carta{position:static}
}

/* Páginas legales */
.texto-legal{max-width:760px}
.texto-legal h2{font-size:clamp(22px,2vw,28px);margin:48px 0 14px}
.texto-legal h2:first-child{margin-top:0}
.texto-legal p,.texto-legal li{color:var(--pizarra);line-height:1.7}
.texto-legal p{margin:0 0 14px}
.texto-legal ul{margin:0 0 14px;padding-left:20px}
.texto-legal a{text-decoration:underline;text-underline-offset:3px}

/* ---------- Catálogo de operaciones (3-nov, /operaciones/) ----------
   Como la «sélection de propriétés» de Luxury Places: foto vertical, tipo, lugar y datos debajo, sin cajas. Antes, el
   mensaje «Se adquiere la deuda, no el inmueble» con tres claves numeradas como las de la portada */
.que-se-compra .rejilla{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(40px,6vw,110px);align-items:start}
.que-se-compra h2{max-width:16ch}
.que-se-compra .apoyo{margin:24px 0 26px;color:var(--pizarra)}
.claves-compra{list-style:none;margin:0;padding:0;display:grid;gap:0}
.claves-compra li{display:grid;grid-template-columns:56px 1fr;column-gap:20px;padding:24px 0;border-top:1px solid var(--linea-suave)}
.claves-compra li:last-child{border-bottom:1px solid var(--linea-suave)}
.claves-compra .num{grid-row:1/3;font-family:var(--titular);font-weight:300;font-size:26px;line-height:1.1;color:var(--arena-osc)}
.claves-compra h3{font-size:clamp(20px,1.7vw,24px)}
.claves-compra p{margin-top:6px;color:var(--pizarra);font-weight:400}

.catalogo-cabeza{display:flex;justify-content:space-between;align-items:baseline;gap:24px;margin-bottom:26px}
.cabeza-dcha{display:flex;align-items:baseline;gap:clamp(24px,3vw,44px)}
.cabeza-dcha .orden[hidden]{display:none}
.catalogo-pagina .portada-foto.noche{height:46svh;min-height:360px}
.recuento{font-size:15px;color:var(--pizarra)}
.recuento b{font-family:var(--titular);font-weight:300;font-size:22px;color:var(--indigo)}
.filtros{display:flex;flex-wrap:wrap;align-items:center;gap:10px clamp(24px,3vw,44px);padding:16px 0;margin-bottom:clamp(32px,4vw,52px);
  border-top:1px solid var(--linea-suave);border-bottom:1px solid var(--linea-suave)}
.filtros[hidden]{display:none}
.filtro{display:flex;flex-wrap:wrap;gap:4px 18px}
.filtro button,.orden span{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--gris)}
.filtro button{position:relative;padding:6px 0;transition:color .25s}
.filtro button::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .35s var(--suave)}
.filtro button:hover{color:var(--indigo)}
.filtro button[aria-pressed="true"]{color:var(--indigo)}
.filtro button[aria-pressed="true"]::after{transform:scaleX(1)}
.orden{display:flex;align-items:center;gap:10px}
.orden select{appearance:none;border:0;border-bottom:1px solid var(--linea-suave);background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23112A55'/%3E%3C/svg%3E") no-repeat right 2px center/10px;
  padding:6px 20px 6px 0;font:inherit;font-size:15px;color:var(--indigo);cursor:pointer}

.rejilla-catalogo{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(44px,5vw,72px) clamp(20px,2.4vw,36px)}
.rejilla-catalogo .oferta{cursor:pointer}
.rejilla-catalogo .oferta[hidden]{display:none}
.rejilla-catalogo .oferta > :not(.foto){opacity:1;visibility:visible}
.rejilla-catalogo .oferta .foto{aspect-ratio:4/5}
.rejilla-catalogo .oferta:hover .capa,.rejilla-catalogo .oferta:focus-visible .capa{opacity:1}
.rejilla-catalogo .oferta .claves{display:none}
.rejilla-catalogo .oferta.entra{animation:entra-tarjeta .55s var(--suave) both}
@keyframes entra-tarjeta{from{opacity:0;transform:translateY(14px)}}
/* Las cerradas, sobre claro: foto apagada y la banda «Vendido», como en la portada */
.rejilla-catalogo .vendida .foto{background:#2a3446}
.rejilla-catalogo .vendida .foto img{filter:saturate(.25)}
.rejilla-catalogo .vendida .capa{justify-content:center;align-items:center;background:rgba(16,31,56,.55)}
.rejilla-catalogo .vendida .cifras .dato + .dato{padding-left:16px;border-left:1px solid var(--linea-suave)}
.sin-resultados{padding:40px 0;color:var(--pizarra)}
.sin-resultados .enlace{margin-left:8px}

@media (max-width:1024px){
  .rejilla-catalogo{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:820px){
  .que-se-compra .rejilla{grid-template-columns:1fr;gap:36px}
  .catalogo-cabeza{flex-direction:column;align-items:flex-start;gap:6px}
  .filtros{flex-direction:column;align-items:stretch;gap:14px}
  .filtro{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 calc(-1 * var(--borde));padding:0 var(--borde)}
  .filtro::-webkit-scrollbar{display:none}
  .filtro button{white-space:nowrap}
  .cabeza-dcha{width:100%;justify-content:space-between}
  .rejilla-catalogo{grid-template-columns:1fr;gap:48px}
}
.rejilla-catalogo .rasgos{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px}

/* ---------- Páginas interiores con foto (3-nov, segunda vuelta: Firma, guía y operaciones) ----------
   Como la portada y la web publicada de Inversalia: foto a sangre en gris con la cabecera transparente encima (sitio.js
   la pasa a sólida al bajar, la misma cuenta que en la portada sin logotipo grande), un título corto y centrado, y el
   bloque siguiente pasa por encima de la foto (.escena). Referencias: Luxury Places, Olivia Harper, Drumelia */
.portada-foto.interior-hero{height:82svh;min-height:520px}
.portada-foto.interior-hero.baja{height:70svh;min-height:460px}
.portada-foto.interior-hero .texto{bottom:clamp(64px,10vh,110px);text-align:center}
.portada-foto.interior-hero h1{margin:0 auto;font-size:clamp(32px,3.8vw,54px);max-width:22ch}
.portada-foto.interior-hero .lema{margin:18px auto 0;font-family:var(--texto);font-size:clamp(15px,1.15vw,17px);font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:rgba(247,245,242,.82)}
.portada-foto.interior-hero .bajada{margin:20px auto 0;max-width:52ch;font-size:clamp(16px,1.25vw,19px);font-weight:300;line-height:1.55;color:rgba(247,245,242,.88)}
.portada-foto.interior-hero .boton{margin-top:28px}
.escena > :where(:not(.portada-foto)){position:relative;z-index:2;background:var(--niebla)}

/* Declaración centrada (Firma, «Quiénes somos») */
.declaracion{padding:var(--aire) 0;text-align:center}
.declaracion h2{max-width:28ch;margin:0 auto;font-size:clamp(26px,2.9vw,40px);line-height:1.28}
.declaracion .apoyo{margin:28px auto 0;color:var(--pizarra);max-width:64ch}
.declaracion .grupo{margin-top:22px;font-size:15px;color:var(--gris)}

/* Tres áreas con foto vertical (Firma) */
.areas .encabezado{text-align:center;margin-left:auto;margin-right:auto}
.areas ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.6vw,40px)}
.area .foto{aspect-ratio:4/5;overflow:hidden;border-radius:var(--radio);background:var(--greige)}
.area .foto img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--suave)}
.area:hover .foto img{transform:scale(1.05)}
.area .num{display:block;margin-top:22px;font-family:var(--titular);font-weight:300;font-size:22px;color:var(--arena-osc)}
.area h3{margin-top:6px;font-size:clamp(22px,1.9vw,28px)}
.area p{margin-top:10px;color:var(--pizarra);max-width:38ch}

/* 4-nov: en Firma, las tres áreas van en azul noche (gris y azul intercalados) */
.tramo.noche .area .foto{background:rgba(247,245,242,.08)}
.tramo.noche .area .num{color:var(--arena)}
.tramo.noche .area p{color:rgba(247,245,242,.8)}

/* Lista numerada con líneas (catálogo y Firma) */
.lista-numerada{list-style:none;margin:0;padding:0}
.lista-numerada li{display:grid;grid-template-columns:56px 1fr;column-gap:20px;padding:24px 0;border-top:1px solid var(--linea-suave)}
.lista-numerada li:last-child{border-bottom:1px solid var(--linea-suave)}
.lista-numerada .num{grid-row:1/3;font-family:var(--titular);font-weight:300;font-size:26px;line-height:1.1;color:var(--arena-osc)}
.lista-numerada h3{font-size:clamp(20px,1.7vw,24px)}
.lista-numerada p{margin-top:6px;color:var(--pizarra);font-weight:400}

/* Foto y texto en dos columnas, la foto se queda quieta mientras baja el texto (Firma y guía) */
.con-foto .rejilla{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(40px,6vw,110px);align-items:start}
.con-foto .foto-fija{position:sticky;top:110px;aspect-ratio:4/5;overflow:hidden;border-radius:var(--radio)}
.con-foto .foto-fija img{width:100%;height:100%;object-fit:cover}
.con-foto .encabezado{margin-bottom:clamp(28px,3vw,40px)}

/* Franja con foto de fondo y frase (Firma) */
.franja-foto{position:relative;min-height:78svh;display:grid;align-items:center;padding:var(--aire) 0;color:var(--pergamino);overflow:hidden;background:var(--noche)}
.franja-foto > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.franja-foto::after{content:"";position:absolute;inset:0;background:rgba(16,31,56,.62)}
.franja-foto .marco{position:relative;z-index:1;text-align:center}
.franja-foto h2{max-width:20ch;margin:0 auto;font-size:clamp(32px,3.8vw,54px);line-height:1.18}
.franja-foto .citas{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,80px);max-width:900px;margin:clamp(40px,5vw,64px) auto 0;text-align:left}
.franja-foto .citas p{padding-top:18px;border-top:1px solid rgba(247,245,242,.3);font-weight:300;line-height:1.6;color:rgba(247,245,242,.88)}

/* Equipo de Firma: retratos más altos, como la tira de la portada */
.equipo .persona .retrato{aspect-ratio:3/4}

/* Guía: sin cajas con borde en los finales; índice bajo la foto */
.indice-guia{padding:22px 0;border-bottom:1px solid var(--linea-suave)}
.indice-guia .indice{margin:0;padding-top:0;border-top:0;justify-content:center}
.tramo.noche .finales li{border:0;border-top:1px solid rgba(247,245,242,.22);border-radius:0;padding:24px 0 0;background:none}

@media (max-width:820px){
  .portada-foto.interior-hero{height:86svh}
  .portada-foto.interior-hero.baja{height:72svh}
  .areas ol{grid-template-columns:1fr;gap:44px}
  .con-foto .rejilla{grid-template-columns:1fr}
  .con-foto .foto-fija{position:relative;top:0;aspect-ratio:4/3}
  .franja-foto .citas{grid-template-columns:1fr}
  .indice-guia .indice{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto}
  /* 4-nov: el índice se corta a la derecha: fundido en el borde para que se vea que se desliza; se quita al llegar al final (sitio.js) */
  .indice-guia .indice{scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 56px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 56px),transparent)}
  .indice-guia .indice::-webkit-scrollbar{display:none}
  .indice-guia .indice.al-final{-webkit-mask-image:none;mask-image:none}
}

/* Catálogo, segunda vuelta (3-nov): la rejilla empieza justo bajo la portada y los filtros son desplegables, como el
   selector de idioma de la cabecera: etiqueta pequeña en mayúsculas + valor elegido + flecha; al abrir, una lista corta */
.catalogo{padding-top:clamp(36px,4vw,56px)}
.catalogo .filtros{display:flex;flex-wrap:wrap;align-items:center;gap:12px clamp(20px,2.6vw,40px);padding:0 0 18px;margin-bottom:clamp(32px,4vw,52px);border-top:0;border-bottom:1px solid var(--linea)}
.desplegable{position:relative}
.desplegable > button{display:flex;align-items:baseline;gap:10px;padding:10px 0;color:var(--indigo)}
.desplegable .etq{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--gris)}
.desplegable .valor{font-family:var(--titular);font-weight:300;font-size:18px}
.desplegable.con-valor .valor{color:var(--arena-osc)}
.desplegable > button svg{align-self:center;width:10px;height:6px;fill:none;stroke:currentColor;stroke-width:1.3;transition:transform .35s var(--suave)}
.desplegable.abierto > button svg{transform:rotate(180deg)}
.desplegable ul{position:absolute;z-index:20;top:calc(100% + 8px);left:-18px;min-width:calc(100% + 36px);list-style:none;margin:0;padding:8px 0;
  background:var(--niebla);box-shadow:0 18px 40px rgba(16,31,56,.14),0 0 0 1px var(--linea-suave);border-radius:var(--radio)}
.desplegable ul[hidden]{display:none}
.desplegable.a-la-derecha{margin-left:auto}
.desplegable.a-la-derecha ul{left:auto;right:-18px}
.desplegable li button{display:block;width:100%;padding:10px 18px;text-align:left;white-space:nowrap;font-size:15.5px;color:var(--pizarra);transition:color .2s,background .2s}
.desplegable li button:hover{background:rgba(17,42,85,.07);color:var(--indigo)}
.desplegable li button[aria-pressed="true"]{color:var(--arena-osc)}
.catalogo .recuento{order:5;font-size:14px}
.catalogo .recuento b{font-size:18px}
@media (max-width:820px){
  .catalogo .filtros{display:grid;grid-template-columns:1fr 1fr;gap:4px 18px;flex-direction:initial}
  .desplegable > button{flex-direction:column;gap:2px;align-items:flex-start;position:relative;width:100%;padding-right:18px}
  .desplegable > button svg{position:absolute;right:0;bottom:16px}
  .desplegable.a-la-derecha{margin-left:0}
  .desplegable ul,.desplegable.a-la-derecha ul{left:0;right:auto;min-width:min(280px,88vw)}
  .desplegable:nth-child(even) ul{left:auto;right:0}
  .catalogo .recuento{grid-column:1/-1;margin-top:6px}
}
.con-foto .riesgos li{grid-template-columns:1fr;gap:6px}
/* Ajustes tras verlo (3-nov): más sombra abajo para que el texto se lea en fotos claras; lema en una línea; filtros de
   móvil con el valor a la izquierda y sin partirse; índice de la guía sin cortar palabras */
.portada-foto.interior-hero::after{background:linear-gradient(180deg,rgba(14,20,27,.38) 0%,rgba(14,20,27,.12) 28%,rgba(14,20,27,.3) 58%,rgba(14,20,27,.72) 100%)}
.portada-foto.interior-hero.clara img{filter:grayscale(1) contrast(.95) brightness(.6)}
.portada-foto.interior-hero .lema{max-width:none}
.desplegable > button{text-align:left}
.indice-guia .indice a{white-space:nowrap}
@media (max-width:820px){
  .desplegable .valor{font-size:16px;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .desplegable > button{min-width:0}
  .catalogo .filtros > *{min-width:0}
}
.franja-foto::after{background:rgba(16,31,56,.74)}
.franja-foto .citas p{font-size:17px;color:rgba(247,245,242,.94)}

/* ---------- 3-nov, tercera vuelta (cambios de Sebastián) ---------- */
/* Titulares de las portadas interiores en dos líneas, y el subtítulo de Operaciones también */
.portada-foto.interior-hero h1{max-width:30ch}
.portada-foto.interior-hero .bajada{max-width:76ch;text-wrap:balance}
/* Firma: la presentación, más ancha */
.declaracion h2{max-width:44ch}
.declaracion .apoyo{max-width:86ch}
/* Firma: fotos de las tres áreas, menos altas */
.area .foto{aspect-ratio:1/1}

/* Equipo sin fotos: nombre, cargo y texto breve, en columnas separadas por una línea arriba */
.lista-equipo{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(32px,3.4vw,52px) clamp(28px,3vw,48px)}
.lista-equipo li{padding-top:22px;border-top:1px solid var(--linea)}
.lista-equipo h3{font-size:clamp(22px,1.9vw,28px)}
.lista-equipo .cargo{margin-top:8px;font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--arena-osc)}
.lista-equipo .texto{margin-top:14px;color:var(--pizarra);max-width:46ch}
.lista-equipo .texto + .texto{margin-top:10px}   /* 4-nov: textos de Inverstone, en varios párrafos */
.modelo .lista-equipo{align-self:center;padding-right:clamp(16px,3.4vw,48px)}
.modelo .lista-equipo li{border-color:rgba(247,245,242,.22)}
.modelo .lista-equipo h3{color:var(--pergamino)}
.modelo .lista-equipo .cargo{color:var(--arena)}
.modelo .lista-equipo .texto{color:rgba(247,245,242,.8)}
.equipo .lista-equipo{grid-template-columns:repeat(3,minmax(0,1fr))}   /* 4-nov: cinco personas, 3 + 2 */
/* 4-nov (pedido de Sebastián): en la portada, en ordenador con ratón, el equipo va como las preguntas: una persona
   debajo de otra, con nombre y cargo en la misma línea; al pasar el ratón la fila se aclara, el nombre crece y se
   despliega el resumen. En móvil y en tabletas sin ratón sigue como estaba (tira o columnas con el texto a la vista) */
@media (min-width:821px) and (hover:hover){
  .modelo .lista-equipo.equipo-resumen{grid-template-columns:1fr;gap:0;align-self:start}   /* arriba, con el título: al abrirse una fila, la lista crece hacia abajo y no se mueve */
  .equipo-resumen li{padding:20px 22px;border-top:1px solid rgba(247,245,242,.22);transition:background-color .4s var(--suave)}
  .equipo-resumen li:last-child{border-bottom:1px solid rgba(247,245,242,.22)}
  .equipo-resumen .fila{display:flex;align-items:baseline;justify-content:space-between;gap:24px}
  .equipo-resumen h3{line-height:34px;font-size:clamp(20px,1.7vw,24px);transition:font-size .4s var(--suave)}
  .equipo-resumen .cargo{margin-top:0;text-align:right}
  .equipo-resumen .desplegable{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--suave)}
  .equipo-resumen .desplegable > div{overflow:hidden}
  .equipo-resumen .texto{margin-top:0;padding-top:12px;opacity:0;transition:opacity .4s var(--suave)}
  .equipo-resumen li:hover{background:rgba(247,245,242,.05)}
  .equipo-resumen li:hover h3{font-size:clamp(24px,2.1vw,30px)}
  .equipo-resumen li:hover .desplegable{grid-template-rows:1fr}
  .equipo-resumen li:hover .texto{opacity:1}
}

/* Catálogo: foto menos alta y los datos de cada operación en su propia tarjeta clara, como en la web publicada */
.rejilla-catalogo{gap:clamp(24px,2.4vw,36px)}
.rejilla-catalogo .oferta{background:var(--niebla);border-radius:var(--radio);overflow:hidden;transition:box-shadow .4s var(--suave)}
.rejilla-catalogo .oferta:hover{box-shadow:0 18px 40px rgba(16,31,56,.12)}
.rejilla-catalogo .oferta .foto{aspect-ratio:1/1;border-radius:0}
.rejilla-catalogo .datos-oferta{padding:4px clamp(18px,1.6vw,24px) clamp(20px,1.8vw,26px)}
.rejilla-catalogo .oferta .tipo{margin-top:18px}

@media (max-width:1024px){ .equipo .lista-equipo{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:820px){
  .lista-equipo,.equipo .lista-equipo{grid-template-columns:1fr}
  .modelo .lista-equipo{padding:0 var(--borde)}
  .rejilla-catalogo .oferta .foto{aspect-ratio:4/3}
}
.portada-foto.interior-hero h1.largo{max-width:36ch}
/* 3-nov, sexta vuelta: el de Firma lleva «Inversalia,» delante (para no repetir el H1 de la portada) y sigue en dos líneas en ordenador */
@media (min-width:821px){.portada-foto.interior-hero h1.largo{max-width:none;font-size:clamp(30px,3.3vw,48px)}}

/* ---------- 3-nov, cuarta vuelta: móvil (cambios de Sebastián) ---------- */
@media (max-width:820px){
  /* Tiras que se deslizan con el dedo, de borde a borde, con la siguiente asomando: equipo, áreas de Firma y vías de
     resolución de la guía */
  .lista-equipo,.equipo .lista-equipo,.areas ol,.finales{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:80%;gap:16px;
    overflow-x:auto;overflow-y:hidden;touch-action:pan-x pan-y;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;padding-inline:var(--borde);scroll-padding-inline:var(--borde)}
  .lista-equipo::-webkit-scrollbar,.areas ol::-webkit-scrollbar,.finales::-webkit-scrollbar{display:none}
  .lista-equipo li,.areas .area,.finales li{scroll-snap-align:start}
  .equipo .lista-equipo,.areas ol,.finales{margin-inline:calc(-1*var(--borde))}
  .area .foto{aspect-ratio:5/4}

  /* Portada, equipo: título, texto de qué es Inversalia, las personas y, al final, el botón */
  .modelo .firma-equipo{display:flex;flex-direction:column;gap:0}
  .modelo .firma-equipo .lado,.modelo .firma-equipo .lado > div{display:contents}
  .modelo .firma-equipo h2{order:1;margin:0 var(--borde) 28px}
  .modelo .firma-equipo .apoyo{order:2;margin-inline:var(--borde)}
  .modelo .lista-equipo{order:3;align-self:stretch;margin-top:44px}
  .modelo .firma-equipo .boton{order:4;align-self:center;margin:44px var(--borde) 0}

  /* Portada, contacto: todo centrado. Título y subtítulo, el formulario en su marco (como en Contacto), la entrada a
     primera inversión y, al final, teléfono y correo */
  .contacto:not(.pagina-contacto) .rejilla{display:flex;flex-direction:column;align-items:center;gap:0;text-align:center}
  .contacto:not(.pagina-contacto) .rejilla > div:first-child{display:contents}
  .contacto:not(.pagina-contacto) h2{order:1;margin-inline:auto}
  .contacto:not(.pagina-contacto) .apoyo{order:2;margin:18px auto 32px}
  .contacto:not(.pagina-contacto) .caja-form{order:3;width:100%;text-align:left}
  .contacto:not(.pagina-contacto) .primera-vez{order:4;margin-top:36px}
  .contacto:not(.pagina-contacto) .datos{order:5;margin-top:28px;justify-items:center}
  .pasos-form,.ficha-inmueble .pasos-form,.recibido{padding:24px 20px}

  /* Contacto: los datos, el formulario y, debajo, la entrada a primera inversión.
     Primera inversión: título y subtítulo, el formulario, el enlace a la guía y los datos de contacto */
  .pagina-contacto .rejilla{display:flex;flex-direction:column;align-items:stretch}
  .pagina-contacto .rejilla > div:first-child{display:contents}
  .pagina-contacto h1{order:1}
  .pagina-contacto .lado-primera .apoyo{order:2}
  .pagina-contacto .lado-datos .datos{order:2}
  .pagina-contacto .rejilla > div:last-child{order:3}
  .pagina-contacto .primera-vez{order:4}
  .pagina-contacto .lado-primera .datos{order:5;margin-top:28px}
  .pagina-contacto .lado-form{margin-top:48px}

  /* Guía, glosario: como las preguntas de la portada, numerado y con el «+» */
  .glosario{display:block;counter-reset:pregunta}
  .glosario details{padding:0;counter-increment:pregunta}
  .glosario details:last-child{border-bottom:1px solid var(--linea)}
  .glosario summary{cursor:pointer;display:flex;gap:24px;align-items:center;margin:0;padding:20px 0;line-height:28px;font-size:16px;
    transition:font-size .4s var(--suave),color .3s}
  .glosario summary::before{content:counter(pregunta,decimal-leading-zero);flex:none;width:28px;font-size:16px;color:var(--arena-osc)}
  .glosario details[open] summary{font-size:18px}
  .glosario summary::after{content:"";flex:none;width:14px;height:14px;margin-left:auto;background:
    linear-gradient(var(--arena-osc),var(--arena-osc)) center/14px 1.5px no-repeat,
    linear-gradient(var(--arena-osc),var(--arena-osc)) center/1.5px 14px no-repeat;transition:rotate .3s var(--suave)}
  .glosario details[open] summary::after{rotate:45deg}
  .glosario details p{padding:0 0 22px 52px}
}

/* ---------- 3-nov, quinta vuelta (cambios de Sebastián) ---------- */
/* Contacto: «Solicite una conversación con el equipo» a todo el ancho, en dos líneas como mucho */
.pagina-contacto .lado-form h2{max-width:none}
@media (max-width:820px){
  /* Sin flechas en las tiras de operaciones ni en «Cómo trabajamos» (se pasan con el dedo); en «Cómo trabajamos», un
     solo botón, centrado */
  .mandos-tira,.mandos-proceso{display:none}
  .proceso .mas{align-items:center}
  .proceso .mas .enlace{display:none}
  /* Contacto: el título, centrado */
  .pagina-contacto .lado-datos h1{margin-inline:auto;text-align:center}
}
/* 3-nov: en móvil, el pie sin logotipo (en ordenador se queda) */
@media (max-width:820px){
  .pie .logo-pie{display:none}
  .pie .frase{margin:0 auto;text-align:center}
  /* 3-nov (noche, pedido de Sebastián): en móvil, la frase y las tres filas de contacto, centradas y más pequeñas */
  .pie .datos{justify-items:center;gap:10px;font-size:16px}
  .pie .datos a{gap:12px}
  .pie .datos svg{width:16px;height:16px}
}

/* 3-nov, sexta vuelta. Información básica de protección de datos junto a cada formulario (primera capa de la AEPD),
   alineada con el texto de la casilla */
.capa-datos{margin-top:12px;padding-left:28px;font-size:12.5px;line-height:1.5;color:rgba(247,245,242,.6);max-width:60ch}
.capa-datos a{text-decoration:underline;text-underline-offset:3px}
/* 3-nov (noche): fuera el alto fijo de los formularios; cada pregunta, con su alto (sitio.js lo anima) */