/* =============================================================================================
   ALL in ONE Spain · Real Estate Investment — hoja de estilo del sitio público
   ---------------------------------------------------------------------------------------------
   Creado por Ignacio Albacete el 26/09/26
   Última actualización: 26/09/26 — ALL in ONE Spain v0.6

   Tipografía:  Nunito, de Vernon Adams, Cyreal y Jacques Le Bailly (SIL Open Font License 1.1).
                Es la misma de avilesmadrid.com, por decisión de Ignacio el 26/09/26, y son sus
                mismos ficheros. Se sirven desde /Scripts/Fuentes/: la página NO pide nada a
                ningún servidor de fuera.
   Colores:     medidos sobre el logotipo original, no elegidos a ojo.
   ============================================================================================= */

/* ── Tipografía ───────────────────────────────────────────────────────────────────────────
   26/09/26 — Ignacio: «la tipografía no me gusta, pon mejor la de avilesmadrid.com». La de
   avilesmadrid.com es **Nunito**, y es la que se pone aquí: la misma familia y los mismos
   ficheros que ya sirve el dominio padre, copiados a nuestra carpeta. Fuera Cormorant Garamond
   y fuera Jost.

   Son ficheros VARIABLES: uno solo cubre del peso 200 al 1000, así que con cuatro ficheros
   (normal y cursiva × latín y latín extendido) está todo, y no hacen falta diez. Se sirven desde
   aquí, como todo: esta página no le pide nada a ningún servidor de fuera. */
@font-face{font-family:'Nunito';src:url('/Scripts/Fuentes/nunito-latin.woff2') format('woff2');
  font-weight:200 1000;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Nunito';src:url('/Scripts/Fuentes/nunito-latin-ext.woff2') format('woff2');
  font-weight:200 1000;font-style:normal;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Nunito';src:url('/Scripts/Fuentes/nunito-cursiva-latin.woff2') format('woff2');
  font-weight:200 1000;font-style:italic;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Nunito';src:url('/Scripts/Fuentes/nunito-cursiva-latin-ext.woff2') format('woff2');
  font-weight:200 1000;font-style:italic;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ── Los colores salen del LOGOTIPO, pero medidos, no a ojo: el azul noche del fondo y el oro de
   las letras. Y se usan con cuentagotas —el oro solo en filetes y rótulos pequeños— porque una
   página entera de azul y oro cansa a los tres segundos. El golpe visual lo dan la foto, el aire
   y la tipografía. ─────────────────────────────────────────────────────────────────────────── */
:root{
  --fondo:#FFFFFF; --fondo-2:#F4F5F7; --papel:#FFFFFF;   /* 30/10/26: fondo BLANCO (antes crema #F7F6F3, «un toque amarillo»); el gris de las secciones, neutro */
  --tinta:#101A2E; --tinta-2:#3C465A; --apagado:#8B909C;
  --oro:#B08D57; --oro-claro:#D8C39B;
  --noche:#0D1730;
  --linea:#E3E5E9; --linea-suave:#EDEFF2;
  --ancho:1280px; --gutter:clamp(20px,5vw,64px);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--fondo);color:var(--tinta);
  font-family:'Nunito',-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;font-weight:300;
  font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:'Nunito',Georgia,'Times New Roman',serif;font-weight:300;
  letter-spacing:-.005em;text-wrap:balance;margin:0}
h1{font-size:clamp(38px,6.2vw,80px);line-height:1.04}
h2{font-size:clamp(28px,3.9vw,52px);line-height:1.1}
h3{font-size:clamp(19px,2vw,25px);line-height:1.22}
p{margin:0}
.env{max-width:var(--ancho);margin-inline:auto;padding-inline:var(--gutter)}
.rotulo{font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--oro);
  display:inline-flex;align-items:center;gap:10px}
.rotulo::before{content:'';width:26px;height:2px;background:var(--noche);flex:0 0 auto}
.filete{height:1px;background:var(--linea);border:0;margin:0}

/* ── Cabecera ─────────────────────────────────────────────────────────────────────────────
   Dos vidas. Arriba del todo vive DENTRO de la portada, centrada, justo encima del buscador.
   En cuanto se hace scroll se despega y sube a la barra de siempre. El salto que dejaría al
   irse lo tapa `#hueco-cab`, que crece exactamente lo que medía. (Ignacio, 26/09/26.)
   ─────────────────────────────────────────────────────────────────────────────────────────── */
.cab{width:100%;z-index:50;transition:background .4s,box-shadow .4s,padding .4s}
.cab .env{display:flex;flex-direction:column;align-items:center;gap:16px}
.cab img{height:64px;width:auto;transition:height .4s,opacity .25s}
.cab .claro{opacity:1} .cab .oscuro{opacity:0;position:absolute;pointer-events:none}
#hueco-cab{height:0;transition:height .4s}

.cab.pegada{position:fixed;inset:0 0 auto;background:rgba(255,255,255,.94);
  backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--linea);padding-block:12px}
.cab.pegada .env{flex-direction:row;gap:28px}
.cab.pegada img{height:34px}
.cab.pegada .claro{opacity:0;position:absolute;pointer-events:none}
.cab.pegada .oscuro{opacity:1;position:static;pointer-events:auto}

nav{display:flex;align-items:center;gap:clamp(14px,2.2vw,30px)}
.cab.pegada nav{margin-left:auto}
nav a{font-size:13.5px;letter-spacing:.04em;color:var(--tinta);opacity:.86;padding-block:6px;
  border-bottom:1px solid transparent;text-shadow:0 1px 12px rgba(255,255,255,1),0 0 22px rgba(255,255,255,.95);
  transition:opacity .25s,border-color .25s,color .25s}
nav a:hover{opacity:1;border-bottom-color:var(--oro)}
.cab.pegada nav a{color:var(--tinta);opacity:.78;text-shadow:none}
.idiomas{display:flex;gap:9px;align-items:center;font-size:11.5px;letter-spacing:.12em;
  color:var(--tinta)}
.idiomas button{background:none;border:0;padding:3px 1px;cursor:pointer;color:inherit;font:inherit;
  letter-spacing:.12em;opacity:.65;transition:opacity .25s,color .25s}
.idiomas button[aria-current="true"]{opacity:1;color:var(--oro)}
.cab.pegada .idiomas{color:var(--tinta)}
.cab.pegada .idiomas button[aria-current="true"]{color:var(--oro)}
.idiomas span{opacity:.35}
.acceso{font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid rgba(16,26,46,.35);padding:9px 16px;color:var(--tinta);background:rgba(255,255,255,.55);
  transition:border-color .3s,background .3s,color .3s}
.acceso:hover{border-color:var(--oro);background:rgba(255,255,255,.85)}
.cab.pegada .acceso{border-color:var(--linea);color:var(--tinta)}
.cab.pegada .acceso:hover{border-color:var(--oro);background:transparent}
.menu-btn{display:none;background:none;border:0;cursor:pointer;padding:8px}
.menu-btn span{display:block;width:24px;height:1px;background:var(--tinta);margin:6px 0}
.cab.pegada .menu-btn span{background:var(--tinta)}

/* ── Portada ──────────────────────────────────────────────────────────────────────────────
   Foto clara y velo suave: la idea es que se vea LUMINOSA, no un filtro azul encima. El texto
   blanco se sostiene con una sombra difusa, no oscureciendo la foto entera.
   ─────────────────────────────────────────────────────────────────────────────────────────── */
.portada{position:relative;min-height:clamp(620px,92vh,950px);display:flex;align-items:center;
  color:var(--tinta);overflow:hidden;text-align:center}
.portada>picture{position:absolute;inset:0}
.portada>picture img{width:100%;height:100%;object-fit:cover}
.portada::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.42) 0%,rgba(255,255,255,.10) 34%,
             rgba(255,255,255,.04) 62%,rgba(255,255,255,.30) 100%)}
.capa{position:relative;z-index:2;width:100%;padding-block:34px}
.centro{padding-top:clamp(26px,5vh,60px)}
.portada .rotulo{color:#96733F;margin-bottom:14px;
  text-shadow:0 1px 10px rgba(255,255,255,1),0 0 22px rgba(255,255,255,1),0 0 40px rgba(255,255,255,.9)}
.portada h1{margin-inline:auto;max-width:16ch;font-size:clamp(34px,5.2vw,64px);
  text-shadow:0 2px 26px rgba(255,255,255,.96),0 0 60px rgba(255,255,255,.7)}
.portada h1 em{font-style:italic;color:var(--oro)}
.portada .bajada{margin:18px auto 0;max-width:54ch;font-size:clamp(14.5px,1.4vw,17px);
  color:var(--tinta-2);text-shadow:0 1px 14px rgba(255,255,255,1),0 0 34px rgba(255,255,255,.9)}

/* ── Buscador, en el centro de la portada ───────────────────────────────────────────────── */
.buscador{margin:clamp(30px,5vh,52px) auto 0;max-width:1000px;text-align:left}
.buscador form{background:var(--papel);box-shadow:0 30px 70px -30px rgba(13,23,48,.55);
  display:grid;grid-template-columns:repeat(4,1fr) auto;align-items:stretch}
.campo{padding:16px 20px;border-right:1px solid var(--linea-suave);min-width:0}
.campo:first-child{border-left:3px solid var(--oro)}
.campo label{display:block;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--apagado);margin-bottom:5px}
.campo select,.campo input{width:100%;border:0;background:none;font:inherit;font-size:15px;
  color:var(--tinta);padding:0;outline-offset:4px;appearance:none;cursor:pointer}
.campo input{cursor:text}
.buscador form button{border:0;background:var(--noche);color:#fff;font:inherit;font-size:12.5px;
  letter-spacing:.18em;text-transform:uppercase;padding-inline:clamp(24px,3vw,44px);cursor:pointer;
  transition:background .3s}
.buscador form button:hover{background:var(--oro)}
.pista{font-size:11.5px;color:var(--tinta-2);margin-top:14px;letter-spacing:.02em;text-align:center;
  background:rgba(255,255,255,.82);display:inline-block;padding:5px 14px;border-radius:2px}
.buscador .pista{margin-inline:auto;display:block;width:fit-content}

/* ── Promesa ────────────────────────────────────────────────────────────────────────────── */
.promesa{padding-block:clamp(72px,11vh,140px)}
.promesa .rejilla{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,7vw,110px);align-items:start}
.promesa p.grande{font-family:'Nunito',-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;font-size:clamp(22px,2.6vw,34px);
  line-height:1.35;color:var(--tinta)}
.promesa p.chica{color:var(--tinta-2);font-size:16px;margin-top:22px;max-width:52ch}
.cifras{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--linea);
  margin-top:clamp(48px,7vh,80px)}
.cifra{background:var(--fondo);padding:30px 4px 26px}
.cifra b{display:block;font-family:'Nunito',-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;font-weight:400;
  font-variant-numeric:lining-nums tabular-nums;font-feature-settings:'lnum' 1,'tnum' 1;
  font-size:clamp(34px,4.6vw,56px);line-height:1;color:var(--tinta)}
.cifra span{display:block;font-size:12px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--apagado);margin-top:10px}

/* ── Viviendas ──────────────────────────────────────────────────────────────────────────── */
.seccion-cab{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  padding-bottom:26px;border-bottom:1px solid var(--linea);margin-bottom:clamp(30px,4.5vh,48px)}
.seccion-cab .rotulo{margin-bottom:12px}
.mas{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;
  border-bottom:1px solid var(--oro);padding-bottom:4px;color:var(--tinta)}
.viviendas{padding-block:clamp(56px,8vh,96px)}
.tarjetas{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.6vw,38px)}
.tarjeta{display:block;background:var(--papel);border:1px solid transparent;
  transition:border-color .4s,box-shadow .4s,transform .4s}
.tarjeta:hover{border-color:var(--linea);box-shadow:0 26px 60px -40px rgba(16,26,46,.5);transform:translateY(-3px)}
.marco{position:relative;overflow:hidden;aspect-ratio:4/3;background:var(--fondo-2)}
.marco img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
.tarjeta:hover .marco img{transform:scale(1.045)}
.sello{position:absolute;top:14px;left:14px;background:rgba(255,255,255,.94);color:var(--tinta);
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;padding:6px 11px}
.datos{padding:20px 22px 24px}
.datos .sitio{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--oro)}
.datos h3{margin:8px 0 12px}
.rasgos{display:flex;flex-wrap:wrap;gap:14px;font-size:13px;color:var(--tinta-2);
  padding-top:14px;border-top:1px solid var(--linea-suave)}
.precio{margin-top:14px;font-family:'Nunito',-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;font-size:24px;color:var(--tinta);
  font-variant-numeric:lining-nums;font-feature-settings:'lnum' 1}

/* ── Gestión integral ───────────────────────────────────────────────────────────────────── */
.integral{background:var(--fondo-2);padding-block:clamp(72px,11vh,140px)}
.integral .rejilla{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(36px,7vw,110px);align-items:start}
.integral .lado{position:sticky;top:120px}
.integral h2{margin-bottom:22px}
.integral .lado p{color:var(--tinta-2);max-width:42ch}
/* La lista de 8 trámites de la portada es un <ol>; la de «Vender» (más abajo) es un <ul>: cada una con sus reglas (ver el 🪤 de «Vender»). */
ol.pasos{list-style:none;margin:0;padding:0;counter-reset:p}
ol.pasos li{counter-increment:p;display:grid;grid-template-columns:auto 1fr;gap:20px;
  padding:22px 0;border-top:1px solid var(--linea)}
ol.pasos li:last-child{border-bottom:1px solid var(--linea)}
ol.pasos li::before{content:counter(p,decimal-leading-zero);font-size:11.5px;letter-spacing:.1em;
  color:var(--oro);padding-top:5px;font-variant-numeric:tabular-nums}
ol.pasos b{display:block;font-weight:400;font-size:17px;margin-bottom:3px}
ol.pasos span{color:var(--tinta-2);font-size:14.5px}

/* ── Zonas ──────────────────────────────────────────────────────────────────────────────── */
.zonas{padding-block:clamp(56px,8vh,96px)}
.zonas .tarjetas{grid-template-columns:repeat(3,1fr)}
.zona{position:relative;overflow:hidden;aspect-ratio:3/4;display:flex;align-items:flex-end;color:#fff}
.zona img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.zona::after{content:'';position:absolute;inset:0;
  background:linear-gradient(to top,rgba(13,23,48,.86) 0%,rgba(13,23,48,.30) 46%,rgba(13,23,48,.04) 100%)}
.zona:hover img{transform:scale(1.05)}
.zona div{position:relative;z-index:2;padding:26px}
.zona h3{color:#fff}
.zona em{display:block;font-style:normal;font-size:11.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--oro-claro);margin-bottom:8px}

/* ── Ventajas ───────────────────────────────────────────────────────────────────────────── */
.ventajas{padding-block:clamp(56px,8vh,96px)}
.ventajas .rejilla{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--linea)}
.ventaja{background:var(--fondo);padding:34px 26px 38px}
.ventaja b{display:block;font-family:'Nunito',-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;font-weight:400;font-size:21px;
  margin:14px 0 10px}
.ventaja p{color:var(--tinta-2);font-size:14.5px}
.ventaja i{font-style:normal;font-size:11px;letter-spacing:.2em;color:var(--oro)}

/* ── Llamada ────────────────────────────────────────────────────────────────────────────── */
.llamada{position:relative;color:#fff;overflow:hidden;background:var(--noche)}
.llamada img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.16}
.llamada .env{position:relative;z-index:2;padding-block:clamp(72px,11vh,130px);text-align:center}
.llamada h2{max-width:20ch;margin-inline:auto}
.llamada p{margin:20px auto 0;max-width:52ch;color:rgba(255,255,255,.8)}
.boton{display:inline-block;margin-top:34px;border:1px solid var(--oro-claro);color:#fff;
  font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;padding:15px 38px;
  transition:background .35s,color .35s}
.boton:hover{background:var(--oro-claro);color:var(--noche)}

/* ── Pie ────────────────────────────────────────────────────────────────────────────────── */
footer{background:var(--noche);color:rgba(255,255,255,.72);padding-block:clamp(56px,8vh,86px) 0;
  font-size:14px}
footer .rejilla{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:clamp(28px,4vw,60px)}
footer img{height:56px;width:auto;margin-bottom:18px}
footer h4{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--oro-claro);
  font-weight:500;margin:0 0 16px}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
footer a:hover{color:#fff}
.contacto li{display:flex;gap:10px;align-items:baseline}
.contacto span{color:rgba(255,255,255,.45);min-width:64px;font-size:13px}
.hueco{font-weight:400;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--oro-claro);border:1px dashed rgba(216,195,155,.45);padding:1px 8px}
.hueco-link{border-bottom:1px dashed rgba(255,255,255,.28)}
.legal{margin-top:clamp(40px,6vh,64px);border-top:1px solid rgba(255,255,255,.14);
  /* sitio abajo para que el botón del asistente no se siente encima del copyright */
  padding-block:22px 104px;display:flex;flex-wrap:wrap;gap:8px 26px;font-size:12.5px;color:rgba(255,255,255,.5)}
.legal span{margin-left:auto}

/* ── Asistente ──────────────────────────────────────────────────────────────────────────── */
.asistente{position:fixed;right:clamp(16px,3vw,34px);bottom:clamp(16px,3vw,34px);z-index:60;
  display:flex;align-items:center;gap:11px;background:var(--tinta);color:#fff;border:0;
  font:inherit;font-size:13px;letter-spacing:.06em;padding:13px 20px;cursor:pointer;
  box-shadow:0 16px 40px -18px rgba(16,26,46,.7);transition:background .3s}
.asistente:hover{background:var(--oro)}
.asistente i{width:6px;height:6px;border-radius:50%;background:var(--oro-claro);flex:none}
.asistente:hover i{background:#fff}

/* ── Aparecer al bajar. Parte VISIBLE: si el JS no corre, se ve todo igual. ─────────────── */
.js .sube{opacity:0;transform:translateY(20px)}
.js .sube.dentro{opacity:1;transform:none;transition:opacity .85s ease,transform .85s cubic-bezier(.2,.7,.2,1)}
@media print{ .js .sube{opacity:1!important;transform:none!important} }
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .sube{opacity:1;transform:none}
  *{transition-duration:.01ms!important;animation-duration:.01ms!important}
}

/* ── Pantallas estrechas ────────────────────────────────────────────────────────────────── */
@media (max-width:1020px){
  .cifras{grid-template-columns:repeat(2,1fr)}
  .tarjetas{grid-template-columns:repeat(2,1fr)}
  .ventajas .rejilla{grid-template-columns:repeat(2,1fr)}
  .integral .rejilla,.promesa .rejilla{grid-template-columns:1fr}
  .integral .lado{position:static}
  footer .rejilla{grid-template-columns:1fr 1fr}
  .buscador form{grid-template-columns:1fr 1fr}
  .campo:first-child{border-left:0;border-top:3px solid var(--oro)}
  .buscador form button{grid-column:1/-1;padding-block:16px}
  .cab img{height:52px}
}
@media (max-width:720px){
  .cab .env{flex-direction:row;justify-content:center;position:relative}
  .cab .menu-btn{position:absolute;right:0;top:50%;transform:translateY(-50%)}
  .cab img{height:44px}
  .cab.pegada img{height:30px}
  nav{display:none}
  nav.abierto{display:flex;position:fixed;inset:0;background:var(--noche);flex-direction:column;
    justify-content:center;gap:22px;font-size:20px;z-index:70;padding:var(--gutter)}
  nav.abierto a{color:#fff;opacity:.9;font-size:19px}
  nav.abierto .idiomas{color:#fff;margin-top:14px}
  nav.abierto .acceso{border-color:rgba(255,255,255,.4);color:#fff}
  .menu-btn{display:block}
  .cerrar{position:absolute;top:22px;right:22px;font-size:28px;color:#fff}
  .tarjetas{grid-template-columns:1fr}
  .ventajas .rejilla{grid-template-columns:1fr}
  .cifras{grid-template-columns:1fr 1fr}
  .buscador form{grid-template-columns:1fr}
  .campo{border-right:0;border-bottom:1px solid var(--linea-suave);padding:11px 18px}
  .buscador{margin-top:clamp(20px,3vh,30px)}
  footer .rejilla{grid-template-columns:1fr}
  .legal span{margin-left:0;flex-basis:100%}
  .asistente span{display:none}
  .asistente{padding:15px}
}


/* ── Páginas de texto (legal, privacidad, cookies) ───────────────────────────────────────── */
body.doc{background:var(--fondo)}
.texto{padding-block:150px clamp(60px,9vh,110px);max-width:820px}
.texto h1{margin:14px 0 6px}
.texto .fecha{color:var(--apagado);font-size:13px;margin-bottom:34px}
.texto h2{font-size:clamp(21px,2.4vw,27px);margin:42px 0 12px}
.texto p{margin-bottom:14px;color:var(--tinta-2)}
.texto ul{margin:0 0 18px;padding-left:20px;color:var(--tinta-2)}
.texto li{margin-bottom:7px}
.texto b{color:var(--tinta);font-weight:500}
.destacado{background:var(--papel);border-left:3px solid var(--oro);padding:20px 24px;margin:26px 0 8px}
.destacado p{margin:0;color:var(--tinta);font-size:17px}
.texto table{width:100%;border-collapse:collapse;margin:8px 0 22px;font-size:14.5px}
.texto th{text-align:left;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--apagado);font-weight:500;padding:10px 12px 10px 0;border-bottom:1px solid var(--linea)}
.texto td{padding:12px 12px 12px 0;border-bottom:1px solid var(--linea-suave);
  color:var(--tinta-2);vertical-align:top}
.texto td:first-child{color:var(--tinta);width:32%}
.texto .hueco{color:var(--oro);border-color:rgba(176,141,87,.5)}
.aparte{background:var(--fondo-2);padding:18px 22px;font-size:14.5px}

/* ── Ventana de acceso al gestor. NO es una página aparte: se abre encima. ───────────────────
   30/10/26 — Nacho: «esa pantalla de login es muy fea, dale rollo cristal y redondea bordes». Es la receta de las
   pestañas y de «¿Le ayudamos?»: velo translúcido con tinte azul noche, `backdrop-filter: saturate(150%) blur`,
   borde fino claro, brillo arriba y sombra baja; campos y botones también de cristal, esquinas de 12 px y la
   ventana de 24 px. El fondo (la foto de la portada o la página blanca) se oscurece y se difumina para que el
   cristal se lea igual en todas las páginas.
   🪤 NO poner `backdrop-filter` en `.velo`: un elemento con filtro es «raíz de fondo» y el `backdrop-filter` de
   sus hijos solo vería SU fondo, no la página de detrás → el cristal saldría plano. Por eso el difuminado del
   fondo va en `.velo::before` (hermano de la ventana, no su padre). */
.velo{position:fixed;inset:0;z-index:100;
  display:flex;align-items:center;justify-content:center;padding:var(--gutter)}
.velo::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 40%,rgba(13,23,48,.26),rgba(13,23,48,.58));
  backdrop-filter:blur(8px) saturate(120%);-webkit-backdrop-filter:blur(8px) saturate(120%)}
.velo[hidden]{display:none}
.ventana{position:relative;width:min(440px,100%);max-height:calc(100dvh - 2*var(--gutter));overflow-y:auto;
  padding:clamp(28px,4vw,42px);border-radius:24px;color:#fff;
  background:linear-gradient(145deg,rgba(70,108,190,.46) 0%,rgba(20,36,82,.62) 100%);
  border:1px solid rgba(255,255,255,.26);
  backdrop-filter:saturate(160%) blur(22px);-webkit-backdrop-filter:saturate(160%) blur(22px);
  box-shadow:0 30px 80px -24px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.30);
  animation:ventana-entra .35s cubic-bezier(.2,.7,.2,1)}
.ventana::before{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:radial-gradient(90% 55% at 15% 0%,rgba(255,255,255,.22),transparent 60%)}
@keyframes ventana-entra{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
.ventana h2{font-size:27px;font-weight:300;letter-spacing:.01em;margin-bottom:8px;color:#fff}
.ventana .rotulo{margin-bottom:16px;padding-right:44px;color:var(--oro-claro)}
.ventana .rotulo::before{background:var(--oro-claro)}
.ventana p{color:rgba(255,255,255,.80);font-size:14.5px;margin-bottom:24px}
.ventana label{display:block;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.66);margin-bottom:7px}
.ventana input{width:100%;border:1px solid rgba(255,255,255,.28);border-radius:12px;
  background:rgba(255,255,255,.10);font:inherit;font-size:15px;padding:14px 16px;color:#fff;margin-bottom:16px;
  transition:border-color .25s,background .25s,box-shadow .25s}
.ventana input::placeholder{color:rgba(255,255,255,.48)}
.ventana input:focus{outline:none;border-color:var(--oro-claro);background:rgba(255,255,255,.15);
  box-shadow:0 0 0 4px rgba(216,195,155,.22)}
/* El autorrelleno del navegador pinta su propio fondo (amarillo/blanco): se tapa con uno del color del cristal. */
.ventana input:-webkit-autofill{-webkit-text-fill-color:#fff;caret-color:#fff;
  -webkit-box-shadow:0 0 0 100px #2A4382 inset;transition:background-color 9999s ease-out 0s}
.ventana .principal{width:100%;border:1px solid rgba(255,255,255,.55);border-radius:12px;
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,255,255,.84));color:var(--noche);
  font:inherit;font-size:12.5px;font-weight:700;letter-spacing:.14em;line-height:1.4;text-transform:uppercase;
  padding:16px;cursor:pointer;box-shadow:0 8px 22px -10px rgba(0,0,0,.45);
  transition:background .25s,box-shadow .25s,transform .15s}
.ventana .principal:hover{background:#fff;box-shadow:0 12px 28px -10px rgba(0,0,0,.5)}
.ventana .principal:active{transform:translateY(1px)}
.ventana .otra{width:100%;border:1px solid rgba(255,255,255,.32);border-radius:12px;background:rgba(255,255,255,.08);
  color:#fff;font:inherit;font-size:13.5px;padding:14px;margin-top:2px;cursor:pointer;
  transition:background .25s,border-color .25s}
.ventana .otra:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.55)}
.ventana .principal:disabled,.ventana .otra:disabled{opacity:.6;cursor:progress}
.ventana .principal:focus-visible,.ventana .otra:focus-visible,.ventana .cerrar-v:focus-visible{
  outline:2px solid var(--oro-claro);outline-offset:2px}
.ventana .o{display:flex;align-items:center;gap:14px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.62);margin:20px 0 18px}
.ventana .o::before,.ventana .o::after{content:'';flex:1;height:1px;background:rgba(255,255,255,.22)}
.ventana .cerrar-v{position:absolute;top:14px;right:14px;width:36px;height:36px;display:grid;place-items:center;
  padding:0;border-radius:50%;border:1px solid rgba(255,255,255,.20);background:rgba(255,255,255,.08);
  font-size:22px;line-height:1;color:rgba(255,255,255,.8);cursor:pointer;
  transition:background .25s,color .25s,border-color .25s}
.ventana .cerrar-v:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.4);color:#fff}
.ventana .nota{font-size:12px;color:rgba(255,255,255,.62);margin:18px 0 0;text-align:center}
.ventana .aviso{margin:16px 0 0;padding:10px 14px;border-radius:12px;font-size:13.5px;text-align:center;
  color:#fff;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.18)}
.ventana .aviso:empty{display:none}
.ventana .aviso.mal{background:rgba(214,84,66,.24);border-color:rgba(255,160,146,.50);color:#FFE1DC}
@media (max-width:480px){
  .ventana{border-radius:20px;padding:30px 22px}
  .ventana .rotulo{letter-spacing:.15em}
}
@media (prefers-reduced-motion:reduce){ .ventana{animation:none} }
/* Sin `backdrop-filter` (navegadores viejos) un cristal translúcido no se leería: se vuelve casi opaco. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .ventana{background:rgba(20,36,82,.95)}
  .velo::before{background:rgba(13,23,48,.80)}
}


/* ══════════════════════════════════════════════════════════════════════════════════════════
   PORTADA MINIMALISTA — v0.2
   26/09/26. Ignacio: «hay demasiada cosa en la página de inicio... solo foto, buscador y menú
   simple... todo minimalista». Una pantalla y punto.

   La portada puede ir sobre foto CLARA (`.portada` a secas, texto en tinta) o sobre foto OSCURA
   (`.portada.oscura`, texto en blanco). Cambiar de foto es cambiar esa clase: nada más.
   ══════════════════════════════════════════════════════════════════════════════════════════ */
body.inicio{overflow-x:hidden}
.inicio .portada{min-height:100vh;min-height:100svh}

/* ── Sobre foto oscura ─────────────────────────────────────────────────────────────────── */
.portada.oscura{color:#fff}
.portada.oscura::after{background:linear-gradient(180deg,rgba(6,12,28,.66) 0%,
  rgba(6,12,28,.50) 22%,rgba(6,12,28,.34) 38%,rgba(6,12,28,.26) 58%,rgba(6,12,28,.72) 100%)}
.portada.oscura h1{color:#fff;text-shadow:0 2px 40px rgba(6,12,28,.6)}
.portada.oscura h1 em{color:var(--oro-claro)}

/* 🚨 TODO lo que sigue vale SOLO mientras la cabecera está dentro de la portada: `:not(.pegada)`.
   Sin eso, estas reglas —que van más abajo en el fichero— le ganaban a las de la barra pegada y
   dejaban el logotipo BLANCO y el texto BLANCO sobre la barra CLARA. Ilegible. No es cuestión de
   especificidad sino de orden: a igual peso, gana la última. */
.portada.oscura .cab:not(.pegada) nav a{color:#fff;opacity:1;
  text-shadow:0 1px 3px rgba(6,12,28,.85),0 2px 22px rgba(6,12,28,.9)}
.portada.oscura .cab:not(.pegada) nav a:hover{opacity:1}
.portada.oscura .cab:not(.pegada) .idiomas{color:#fff;text-shadow:0 1px 3px rgba(6,12,28,.85)}
.portada.oscura .cab:not(.pegada) .idiomas button{opacity:.85}
.portada.oscura .cab:not(.pegada) .idiomas button[aria-current="true"]{opacity:1;color:var(--oro-claro)}
.portada.oscura .cab:not(.pegada) .acceso{border-color:rgba(255,255,255,.7);color:#fff;
  background:rgba(6,12,28,.22);text-shadow:0 1px 3px rgba(6,12,28,.8)}
.portada.oscura .cab:not(.pegada) .acceso:hover{border-color:var(--oro-claro);background:rgba(255,255,255,.1)}
.portada.oscura .cab:not(.pegada) .menu-btn span{background:#fff}
.portada.oscura .cab:not(.pegada) .claro{opacity:1;position:static}
.portada.oscura .cab:not(.pegada) .oscuro{opacity:0;position:absolute;pointer-events:none}

/* Y en la barra pegada, lo de siempre: fondo claro, logotipo y texto en tinta. */
.portada.oscura .cab.pegada .claro{opacity:0;position:absolute;pointer-events:none}
.portada.oscura .cab.pegada .oscuro{opacity:1;position:static;pointer-events:auto}
.portada.oscura .cab.pegada nav a{color:var(--tinta);opacity:.8;text-shadow:none}
.portada.oscura .cab.pegada nav a:hover{opacity:1}
.portada.oscura .cab.pegada .idiomas{color:var(--tinta);text-shadow:none}
.portada.oscura .cab.pegada .idiomas button{opacity:.6}
.portada.oscura .cab.pegada .idiomas button[aria-current="true"]{opacity:1;color:var(--oro)}
.portada.oscura .cab.pegada .acceso{border-color:var(--linea);color:var(--tinta);
  background:transparent;text-shadow:none}
.portada.oscura .cab.pegada .acceso:hover{border-color:var(--oro);background:transparent}
.portada.oscura .cab.pegada .menu-btn span{background:var(--tinta)}

/* ── Menú simple: una línea, centrada, sin adornos ─────────────────────────────────────── */
.inicio .cab{padding-top:clamp(18px,3vh,34px)}
.inicio .cab .env{gap:clamp(18px,3.4vh,30px)}
.inicio .cab img{height:clamp(52px,7vh,72px)}
.inicio nav a{font-size:14px;letter-spacing:.06em}

/* ── El buscador, en el centro y con pestañas como las de una agencia ──────────────────── */
.inicio .centro{padding-top:clamp(30px,7vh,80px)}
.inicio .portada h1{font-size:clamp(28px,4.35vw,60px);max-width:none;margin-bottom:6px}
/* En una sola línea mientras quepa (Ignacio, 26/09/26). Por debajo de 900 px no cabe sin dejar
   la letra ridícula, así que ahí se parte. El tamaño se ata al ancho de la ventana para que la
   línea llegue justa, no para que se salga. */
@media (min-width:900px){ .inicio .portada h1{white-space:nowrap} }
/* ── Las pestañas del buscador ────────────────────────────────────────────────────────────
   26/09/26 — Ignacio: «ese menú que sea como el menú de areadeserviciodemolina.com con fondo
   cristal». Copiado de allí tal cual: una píldora translúcida con `backdrop-filter:blur`, borde
   fino claro y sombra baja; dentro, cada opción es otra píldora que se enciende al elegirla.
   Allí es `nav ul` + `.route-picker`; aquí es esto mismo.

   🪤 Y «Vender» es un <a>, no un <button>: TODAS las reglas de aquí apuntaban a `button` y ese
   se quedaba sin estilo —salía en minúsculas, con otro tamaño y sin espaciado, en medio de las
   otras tres—. Se ve en la foto que mandó Ignacio. Ahora los selectores dicen `button, a`. */
/* 🪤 `inline-flex` + `margin:auto` NO centra dentro de un contenedor flex en columna: se queda
   pegado a la izquierda. Hace falta `align-self:center`, o `width:fit-content` con `margin`
   automático. Se ve en la foto: la píldora arrancaba en el borde izquierdo del buscador. */
/* 🪤 `margin:auto` solo centra cajas de NIVEL BLOQUE: con `inline-flex` la píldora seguía la
   alineación del padre (`text-align:left`) y se quedaba pegada a la izquierda del buscador.
   Con `flex` + `width:fit-content` + `margin-inline:auto` sí centra. */
.pestanas{display:flex;align-items:stretch;flex-wrap:wrap;gap:2px;
  padding:4px;width:fit-content;margin:clamp(26px,4.5vh,44px) auto 16px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.22);
  border-radius:14px;
  backdrop-filter:saturate(150%) blur(10px);
  -webkit-backdrop-filter:saturate(150%) blur(10px);
  box-shadow:0 6px 20px rgba(0,0,0,.14)}
.pestanas button,.pestanas a{display:inline-flex;align-items:center;background:none;border:0;
  font:inherit;font-size:12.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:#fff;opacity:.8;cursor:pointer;padding:9px 18px;border-radius:10px;text-decoration:none;
  white-space:nowrap;transition:background .18s,opacity .18s,color .18s}
.pestanas button:hover,.pestanas a:hover{background:rgba(255,255,255,.15);opacity:1;color:#fff}
.pestanas button[aria-selected="true"]{background:var(--noche);color:#fff;opacity:1;
  box-shadow:0 2px 10px rgba(13,23,48,.35)}
.pestanas button:focus{outline:none}
.pestanas button:focus-visible,.pestanas a:focus-visible{outline:2px solid var(--oro-claro);
  outline-offset:1px}

/* Sobre la foto clara de la portada el cristal se tiñe de azul en vez de blanco: si no, no se
   ve nada. El azul es el del logotipo. */
.portada:not(.oscura) .pestanas{background:rgba(13,23,48,.07);border-color:rgba(13,23,48,.12);
  box-shadow:0 4px 16px rgba(13,23,48,.10)}
.portada:not(.oscura) .pestanas button,
.portada:not(.oscura) .pestanas a{color:var(--noche);opacity:.72}
.portada:not(.oscura) .pestanas button:hover,
.portada:not(.oscura) .pestanas a:hover{background:rgba(13,23,48,.08);color:var(--noche);opacity:1}
.portada:not(.oscura) .pestanas button[aria-selected="true"]{background:var(--noche);color:#fff;
  opacity:1}

/* 30/10/26 — Nacho (captura a 150 %): «eso ahora es demasiado grande: o se espacia más o se hace un poco más pequeño; lo que sí hay
   que hacer es redondear un poco los bordes». Era 860×75 px (casi el triple de ancho que las pestañas, 332×49) y de esquinas
   rectas. Ahora ≈720×56: menos ancho, menos alto (relleno y rótulo más ajustados), 10 px de hueco entre piezas, esquinas de 12 px
   —las de las pestañas son de 14 px, que envuelven a las suyas de 10— y una sombra suave para que se despeguen de la foto. */
.inicio .buscador{max-width:720px;margin-top:0}
.inicio .buscador form{grid-template-columns:1fr 1.25fr auto;background:transparent;
  box-shadow:none;gap:10px}
.inicio .campo{background:rgba(255,255,255,.94);border:0;padding:9px 16px;border-radius:12px;
  box-shadow:0 12px 30px -16px rgba(6,12,28,.6)}
.inicio .campo:first-child{border-left:0}
.inicio .campo label{margin-bottom:2px;font-size:10px;line-height:1.3}
.inicio .campo select,.inicio .campo input{font-size:14.5px;line-height:1.3}
.inicio .buscador form button{background:var(--noche);padding-inline:18px;min-width:56px;border-radius:12px;
  box-shadow:0 12px 30px -16px rgba(6,12,28,.6);
  display:flex;align-items:center;justify-content:center}
/* Las sugerencias de «Dónde» cuelgan separadas del campo, con las mismas esquinas */
.inicio .campo .sugerencias{top:calc(100% + 6px);border:1px solid var(--linea);border-radius:12px;overflow:auto}
.inicio .buscador form button:hover{background:var(--oro)}
.lupa{width:17px;height:17px;border:1.6px solid #fff;border-radius:50%;position:relative;display:block}
.lupa::after{content:'';position:absolute;right:-6px;bottom:-4px;width:8px;height:1.6px;
  background:#fff;transform:rotate(45deg)}

/* ── Franja legal, abajo del todo y sin hacer ruido ────────────────────────────────────── */
.pie-portada{position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;flex-wrap:wrap;
  justify-content:center;gap:6px 22px;padding:16px var(--gutter);font-size:12px;
  color:rgba(255,255,255,.62)}
.pie-portada a{border-bottom:1px solid transparent;transition:color .25s,border-color .25s}
.pie-portada a:hover{color:#fff;border-bottom-color:var(--oro-claro)}
.portada:not(.oscura) .pie-portada{color:var(--apagado)}
.portada:not(.oscura) .pie-portada a:hover{color:var(--tinta)}

/* ── Páginas interiores: la cabecera ya nace pegada ────────────────────────────────────── */
body.interior{padding-top:0}
body.interior main>section:first-child{padding-top:clamp(110px,14vh,150px)}
body.interior .cab{position:fixed;inset:0 0 auto}

@media (max-width:900px){
  .inicio .buscador form{grid-template-columns:1fr auto}
  .inicio .campo:first-child{grid-column:1/-1}
}
@media (max-width:720px){
  .inicio .portada h1{font-size:clamp(27px,7vw,36px)}
  .pestanas{margin-top:clamp(18px,3vh,28px)}
  .pestanas{gap:1px;padding:3px}
  .pestanas button,.pestanas a{padding:8px 12px;font-size:11px;letter-spacing:.08em}
  .inicio .buscador form{grid-template-columns:1fr;gap:9px}
  .inicio .buscador form button{padding-block:14px}
  /* 🪤 Al sacar la franja legal de `position:absolute` se convierte en HERMANA del contenido
     dentro de un flex EN FILA: se ponía al lado y dejaba la columna en 193 px de 400. La portada
     pasa a columna. Medido en el navegador, que leyendo el CSS esto no se ve. */
  .inicio .portada{min-height:auto;padding-bottom:10px;flex-direction:column;
    justify-content:center}
  .inicio .capa{width:100%}
  .pie-portada{position:static;width:100%;margin-top:22px;padding-bottom:26px}
}

/* El titular cae sobre la franja del atardecer, que es la parte MÁS clara de la foto. En vez de
   oscurecer la foto entera —que se cargaría justo lo bonito—, un velo suave y redondo detrás de
   la columna central. La puesta de sol se sigue viendo a los lados. */
.portada.oscura .capa::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 46% at 50% 56%,rgba(6,12,28,.50) 0%,rgba(6,12,28,.30) 48%,
             rgba(6,12,28,0) 78%)}
.portada .capa{position:relative;isolation:isolate}
/* 🪤 Aquí había `.portada .capa>*{position:relative}` para que el contenido quedara por encima
   del velo. Pero eso pisa por especificidad al `position:fixed` de `.cab.pegada` (0,2,1 contra
   0,2,0): la barra dejaba de quedarse arriba al bajar y se iba con la portada. En vez de forzar
   posición a TODOS los hijos, el velo se manda al fondo con z-index -1 dentro de su propio
   contexto (`isolation:isolate`), y a los hijos no se les toca nada. */
.portada.oscura .capa::before,.portada .capa::before{z-index:-1}

/* Hay página debajo, así que conviene decirlo: una rayita que baja despacio. Sin parpadeos.
   Con el movimiento reducido activado se queda quieta, pero se sigue viendo. */
.sigue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:3;
  width:34px;height:44px;display:flex;align-items:flex-end;justify-content:center}
.sigue span{width:1px;height:30px;background:linear-gradient(180deg,rgba(255,255,255,0),
  rgba(255,255,255,.85));animation:baja 2.4s ease-in-out infinite}
@keyframes baja{0%,100%{opacity:.35;transform:translateY(-5px)}50%{opacity:1;transform:translateY(0)}}
.portada:not(.oscura) .sigue span{background:linear-gradient(180deg,rgba(16,26,46,0),rgba(16,26,46,.7))}
@media (prefers-reduced-motion:reduce){ .sigue span{animation:none;opacity:.8} }
@media (max-width:720px){ .sigue{display:none} }

/* ── El acceso es un monigote, no una palabra (Ignacio, 26/09/26) ───────────────────────── */
.acceso{width:42px;height:42px;padding:0;border-radius:50%;display:grid;place-items:center;
  flex:none;line-height:0}
.acceso svg{display:block}
.inicio .cab.pegada .acceso{width:36px;height:36px}
.acceso svg{width:19px;height:19px}
.inicio .cab.pegada .acceso svg{width:17px;height:17px}

/* ── En la portada NO hay menú ──────────────────────────────────────────────────────────────
   26/09/26. Ignacio: «ese menú no se ve al principio, solo cuando empieza el scroll».
   Primera pantalla: logotipo, titular y buscador. Nada más. El menú —enlaces, idiomas y el
   acceso— aparece al bajar, dentro de la barra que se queda arriba.
   Se oculta con `visibility`, no con `display`, para que se desvanezca con suavidad; y como
   `visibility:hidden` también lo saca del orden del tabulador, el teclado tampoco cae en enlaces
   invisibles. ───────────────────────────────────────────────────────────────────────────────── */
.inicio .cab nav,.inicio .cab .menu-btn{transition:opacity .4s ease,visibility .4s}
.inicio .portada .cab:not(.pegada) nav,
.inicio .portada .cab:not(.pegada) .menu-btn{opacity:0;visibility:hidden;pointer-events:none}
@media (min-width:721px){ .inicio .portada .cab:not(.pegada) nav{position:absolute} }

/* ── Ajustes de la portada (Ignacio, 26/09/26) ───────────────────────────────────────────────
   «Sube el buscador, que al hacer focus no se marquen los input, amplía el logo un poco y que
   aparezca todo más unido.»
   ─────────────────────────────────────────────────────────────────────────────────────────── */

/* 1 · El logotipo, más grande.
   30/10/26 — Nacho: «el logo más grande, más espacio entre líneas y sube un poco el texto». El logo pasa de 64–92 px a 84–132 px. */
.inicio .cab img{height:clamp(84px,12.4vh,132px)}
@media (max-width:720px){ .inicio .cab img{height:clamp(72px,10vh,92px)} }
.inicio .cab.pegada img{height:34px}

/* 2 · Todo más junto: menos aire entre el logotipo, el titular, las pestañas y el buscador. */
.inicio .cab .env{gap:clamp(10px,1.8vh,16px)}
/* Hueco entre el logo y el titular. 🪤 Antes salía 63–80 px SIN que nadie lo hubiera pedido: el menú, invisible en la portada
   (`visibility:hidden`), seguía ocupando su fila de ~42 px entre el logo y el titular. En escritorio ahora se saca del flujo
   mientras la barra no está pegada (más abajo), y el hueco es el que se escribe aquí. `web.js` mide la cabecera justo antes de
   pegarla y reserva ESE alto, así que al hacer scroll no hay salto. */
.inicio .centro{padding-top:clamp(26px,4.6vh,50px)}
.inicio .portada h1{margin-bottom:0}
/* El `0` de los lados mataba el `auto` que centra: aquí solo se toca el margen de arriba
   y el de abajo, y el horizontal se deja en automático. */
/* Más aire entre titular, pestañas y buscador (estaban a 14–17 px, apretados). */
.inicio .pestanas{margin:clamp(22px,4vh,40px) auto clamp(16px,2.6vh,28px)}
.inicio .buscador{margin-top:0}

/* 3 · El buscador, más arriba. El bloque va centrado en la portada, así que se le da aire por
       ABAJO y sube el conjunto entero sin descolgar nada. */
.inicio .capa{padding-block:30px clamp(100px,21vh,220px)}

/* 4 · Nada de recuadro al pinchar en los campos.
       ⚠️ Solo con el RATÓN. Con el tabulador sí queda una marca fina: sin ella, quien navega con
       el teclado no sabe en qué campo está escribiendo, y eso no es un detalle de gusto. */
.inicio .campo input:focus,.inicio .campo select:focus,
.inicio .buscador form button:focus{outline:none;box-shadow:none}
.inicio .campo input:focus-visible,.inicio .campo select:focus-visible{
  outline:none;box-shadow:inset 0 -2px 0 var(--oro)}
.inicio .buscador form button:focus-visible{outline:2px solid var(--oro-claro);outline-offset:2px}
/* ══════════════════════════════════════════════════════════════════════════════════════════
   LISTADO Y FICHA DE VIVIENDA — v0.3
   Creado por Ignacio Albacete el 26/09/26 · Última actualización: 26/09/26
   ══════════════════════════════════════════════════════════════════════════════════════════ */
.resultados{padding-block:clamp(110px,14vh,150px) clamp(60px,9vh,110px)}
.filtros{display:grid;grid-template-columns:1fr 1.5fr 1fr auto;gap:12px;
  margin-bottom:clamp(28px,4vh,44px)}
.filtros .campo{background:var(--papel);border:1px solid var(--linea);padding:12px 18px}
.filtros .campo:first-child{border-left:3px solid var(--oro)}
.filtros button{border:0;background:var(--tinta);color:#fff;font:inherit;font-size:12.5px;
  letter-spacing:.18em;text-transform:uppercase;padding-inline:32px;cursor:pointer;
  transition:background .3s}
.filtros button:hover{background:var(--oro)}
.filtros input:focus,.filtros select:focus{outline:none}
.filtros input:focus-visible,.filtros select:focus-visible{outline:none;box-shadow:inset 0 -2px 0 var(--oro)}
.rasgos .ref{margin-left:auto;color:var(--apagado);font-variant-numeric:tabular-nums}
.sin-nada,.aviso-fallo{padding:40px 0;color:var(--tinta-2);font-size:16px}
.aviso-fallo{border-left:3px solid #C0392B;padding-left:18px;background:var(--papel)}
.sin-nada a{border-bottom:1px solid var(--oro)}
.paginas{display:flex;gap:6px;justify-content:center;margin-top:clamp(34px,5vh,54px)}
.paginas a,.paginas span{min-width:38px;height:38px;display:grid;place-items:center;font-size:14px;
  border:1px solid var(--linea);font-variant-numeric:tabular-nums}
.paginas span[aria-current]{background:var(--tinta);color:#fff;border-color:var(--tinta)}
.paginas a:hover{border-color:var(--oro)}

/* ── Ficha ─────────────────────────────────────────────────────────────────────────────── */
/* ══ FICHA DE UNA VIVIENDA · v0.6 ═════════════════════════════════════════════════════════
   Rehecha el 26/09/26: antes se veía una sola foto y los datos estaban escondidos en una tabla
   al final. Ahora manda la galería, y debajo lo que la gente mira: cuántos dormitorios, cuántos
   metros, cuánto cuesta. ═══════════════════════════════════════════════════════════════════ */
.ficha{padding-block:clamp(104px,13vh,142px) clamp(60px,9vh,110px)}
.migas{font-size:12.5px;color:var(--apagado);margin-bottom:20px}
.migas a{border-bottom:1px solid transparent}
.migas a:hover{border-bottom-color:var(--oro);color:var(--tinta)}

.ficha-cab{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;
  padding-bottom:26px;border-bottom:1px solid var(--linea)}
.ficha .sitio{color:var(--oro);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase}
.ficha h1{font-size:clamp(28px,3.8vw,48px);margin:10px 0 8px;max-width:24ch;text-wrap:balance}
.ficha .refbig{font-size:12.5px;color:var(--apagado);letter-spacing:.06em}
/* 🪤 Esto se llamaba `.ficha .sello`, y `.sello` ya era la chapa de «Destacada» de las
   tarjetas: al meter tarjetas dentro de la ficha (la sección «Más en …») mi regla, más
   específica, les pisaba el estilo y la chapa salía torcida. Con nombre propio no choca. */
.ficha .reservada{display:inline-block;margin-left:8px;padding:2px 9px;background:var(--oro);
  color:#fff;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;vertical-align:1px}
.ficha-precio{text-align:right;flex:0 0 auto}
.ficha-precio span{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--apagado);margin-bottom:4px}
.ficha-precio b{font-family:'Nunito',-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;font-weight:500;
  font-size:clamp(26px,3vw,38px);color:var(--tinta);font-variant-numeric:lining-nums;
  line-height:1;white-space:nowrap}

/* ── Galería ─────────────────────────────────────────────────────────────────────────────── */
.mosaico{margin:clamp(24px,4vh,40px) 0 10px;display:grid;gap:8px}
.mosaico.sola{grid-template-columns:1fr}
.mosaico.dos{grid-template-columns:1fr 1fr}
.mosaico.muchas{grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr}
.mosaico.muchas .tal:first-child{grid-row:span 2}
.mosaico .tal{position:relative;padding:0;border:0;background:var(--fondo-2);cursor:zoom-in;
  overflow:hidden;display:block}
.mosaico.sola .tal{aspect-ratio:21/9}
.mosaico.dos .tal,.mosaico.muchas .tal{aspect-ratio:4/3}
.mosaico.muchas .tal:first-child{aspect-ratio:auto;min-height:100%}
.mosaico .tal img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.mosaico .tal:hover img{transform:scale(1.035)}
.mosaico .tal:focus-visible{outline:2px solid var(--oro);outline-offset:2px}
.mosaico .mas{position:absolute;inset:0;display:grid;place-items:center;
  background:rgba(13,23,48,.55);color:#fff;font-family:'Nunito',-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;font-size:32px;
  font-variant-numeric:lining-nums}

.tira-fotos{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}
.tira-fotos .tal-min{flex:0 0 96px;aspect-ratio:4/3;padding:0;border:0;cursor:pointer;
  background:var(--fondo-2);overflow:hidden;opacity:.55;transition:opacity .25s}
.tira-fotos .tal-min img{width:100%;height:100%;object-fit:cover;display:block}
.tira-fotos .tal-min:hover,.tira-fotos .tal-min.aqui{opacity:1}
.tira-fotos .tal-min.aqui{box-shadow:inset 0 0 0 2px var(--oro)}

/* ── La banda de datos de la vivienda ────────────────────────────────────────────────────────
   🪤 26/09/26 — Esto se llamaba `.cifras` y `.cifras` YA ERA la rejilla de cuatro números de la
   portada (8 trámites, 1 equipo, 0 intermediarios, 4 idiomas). Mi regla iba después en la hoja,
   le ganaba el `display`, y la portada se desarmaba. Es la segunda vez hoy que choco por
   reutilizar un nombre: un nombre propio y se acabó. */
.datos-viv{list-style:none;margin:clamp(30px,5vh,48px) 0;padding:0;display:flex;flex-wrap:wrap;
  border-top:1px solid var(--linea);border-bottom:1px solid var(--linea)}
.datos-viv li{flex:1 1 150px;padding:22px 8px 22px 0;display:flex;align-items:baseline;gap:9px}
.datos-viv li+li{padding-left:28px;border-left:1px solid var(--linea-suave)}
.datos-viv b{font-family:'Nunito',-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;font-weight:500;font-size:34px;
  color:var(--tinta);font-variant-numeric:lining-nums;line-height:1}
.datos-viv span{font-size:12.5px;color:var(--apagado);letter-spacing:.04em}

/* ── Los dos lados ───────────────────────────────────────────────────────────────────────── */
.ficha .rejilla{display:grid;grid-template-columns:1.55fr 1fr;gap:clamp(30px,5vw,70px);
  align-items:start}
.cuerpo-ficha .prosa{font-size:16.5px;line-height:1.85;color:var(--tinta-2);max-width:62ch}
.cuerpo-ficha .pendiente{color:var(--apagado);font-style:italic}
.cuerpo-ficha h2{font-size:22px;margin:clamp(30px,5vh,46px) 0 12px}
.datos-tabla{width:100%;border-collapse:collapse;font-size:15px}
.datos-tabla td{padding:13px 0;border-bottom:1px solid var(--linea-suave);color:var(--tinta-2)}
.datos-tabla tr:last-child td{border-bottom:0}
.datos-tabla td:first-child{color:var(--tinta);width:46%}
.datos-tabla td:last-child{font-variant-numeric:lining-nums tabular-nums}
.avisito{font-size:12.5px;color:var(--apagado);margin-top:16px;line-height:1.6;max-width:56ch}

.caja-precio{background:var(--papel);border:1px solid var(--linea);padding:26px;position:sticky;
  top:104px}
.caja-precio .q{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--apagado);
  margin-bottom:8px}
.caja-precio .p{font-family:'Nunito',-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;font-size:34px;color:var(--tinta);
  font-variant-numeric:lining-nums;line-height:1.1}
.caja-precio .ref-caja{font-size:12px;color:var(--apagado);margin-top:6px;letter-spacing:.06em}
.caja-precio .boton-oscuro{display:block;text-align:center;margin-top:20px;background:var(--noche);
  color:#fff;font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;padding:14px;
  transition:background .3s}
.caja-precio .boton-oscuro:hover{background:var(--oro)}
.caja-precio .boton-claro{display:block;width:100%;margin-top:8px;background:transparent;
  border:1px solid var(--linea);color:var(--tinta);font-size:12.5px;letter-spacing:.14em;
  text-transform:uppercase;padding:13px;cursor:pointer;transition:border-color .3s,color .3s}
.caja-precio .boton-claro:hover{border-color:var(--oro);color:var(--oro)}
.caja-precio .incluye{list-style:none;margin:22px 0 0;padding:20px 0 0;
  border-top:1px solid var(--linea-suave)}
.caja-precio .incluye li{font-size:13.5px;color:var(--tinta-2);padding:5px 0 5px 18px;
  position:relative;line-height:1.5}
/* Para que salga un tic y no un galón, el rectángulo tiene que ser más ancho que alto. */
.caja-precio .incluye li::before{content:'';position:absolute;left:0;top:9px;width:9px;height:5px;
  border-left:1.5px solid var(--oro);border-bottom:1.5px solid var(--oro);
  transform:rotate(-45deg)}
.caja-precio .nota{font-size:12px;color:var(--apagado);margin-top:16px;line-height:1.6}

/* ── Otras del mismo sitio. Mismas tarjetas que el listado, no unas nuevas ───────────────── */
.otras{margin-top:clamp(56px,9vh,100px);padding-top:clamp(40px,6vh,64px);
  border-top:1px solid var(--linea)}
.otras h2{font-size:clamp(22px,2.6vw,30px);margin-bottom:28px}
.otras .datos{padding:18px 20px 22px}
.otras .datos h3{font-size:18px;margin:6px 0 10px}

/* ── El visor de fotos a pantalla completa ───────────────────────────────────────────────
   🪤 26/09/26 — Esto se llamaba `.lupa`, y `.lupa` YA ERA el icono del botón de buscar de la
   portada. Mi regla iba después en la hoja y le ganaba: el iconito de 17 px se convertía en un
   `position:fixed;inset:0` y salía como un círculo negro de 122 px en la esquina de arriba.
   Tercera colisión de nombres del mismo día, después de `.zona` y `.cifras`. Nombre propio.
   ── ─────────────────────────────────────────────────────────────────────────────── */
.visor{position:fixed;inset:0;z-index:200;background:rgba(9,14,28,.94);display:flex;
  align-items:center;justify-content:center;padding:clamp(16px,5vw,60px)}
/* 🪤 Un `display:` puesto en una clase le GANA al `hidden` del HTML, que es del navegador y pesa
   menos. La lupa salía como un cuadro negro de 122 px en la esquina, encima del logotipo, con la
   × dentro. Cualquier cosa que nazca `hidden` y lleve `display:` necesita esta línea. */
.visor[hidden]{display:none}
.visor figure{margin:0;max-width:100%;max-height:100%;display:flex;flex-direction:column;gap:12px}
.visor img{max-width:100%;max-height:82vh;object-fit:contain;display:block;margin:auto}
.visor figcaption{color:rgba(255,255,255,.72);font-size:13px;text-align:center;line-height:1.5}
.visor button{background:transparent;border:0;color:#fff;cursor:pointer;line-height:1}
.visor-x{position:absolute;top:clamp(10px,2vw,24px);right:clamp(10px,2vw,24px);font-size:38px;
  width:48px;height:48px}
.visor-ant,.visor-sig{font-size:52px;width:60px;height:60px;flex:0 0 auto;opacity:.72;
  transition:opacity .2s}
.visor-ant:hover,.visor-sig:hover,.visor-x:hover{opacity:1;color:var(--oro-claro)}
.visor button:focus-visible{outline:2px solid var(--oro-claro);outline-offset:2px}

@media(max-width:900px){
  .ficha .rejilla{grid-template-columns:1fr}
  .caja-precio{position:static;order:-1}
  .ficha-cab{flex-direction:column;align-items:flex-start;gap:14px}
  .ficha-precio{text-align:left}
  .mosaico.muchas{grid-template-columns:1fr 1fr;grid-template-rows:auto}
  .mosaico.muchas .tal:first-child{grid-row:auto;grid-column:span 2;aspect-ratio:16/9;min-height:0}
}
@media(max-width:560px){
  .mosaico.dos,.mosaico.muchas{grid-template-columns:1fr}
  .mosaico.muchas .tal:first-child{grid-column:auto}
  .datos-viv li{flex:1 1 44%}
  .datos-viv li+li{padding-left:16px}
  .datos-viv b{font-size:27px}
  .visor-ant,.visor-sig{font-size:36px;width:40px}
}

/* ── Sugerencias del buscador ──────────────────────────────────────────────────────────── */
.campo{position:relative}
.sugerencias{position:absolute;left:0;right:0;top:100%;z-index:20;background:var(--papel);
  border:1px solid var(--linea);border-top:0;box-shadow:0 20px 40px -24px rgba(16,26,46,.45);
  max-height:260px;overflow:auto}
.sugerencias[hidden]{display:none}
.sugerencias li{list-style:none;padding:11px 18px;cursor:pointer;font-size:14.5px;color:var(--tinta-2)}
.sugerencias li:hover,.sugerencias li[aria-selected="true"]{background:var(--fondo-2);color:var(--tinta)}
.sugerencias ul{margin:0;padding:0}

@media (max-width:900px){
  .filtros{grid-template-columns:1fr 1fr}
  .filtros button{grid-column:1/-1;padding-block:14px}
  .ficha .rejilla{grid-template-columns:1fr}
  .caja-precio{position:static}
}
@media (max-width:600px){ .filtros{grid-template-columns:1fr} }

/* ── El asistente ───────────────────────────────────────────────────────────────
   30/10/26 — Nacho: «el asistente virtual también hay que darle una vuelta al diseño». Mismo cristal que el acceso al gestor,
   las pestañas y el botón «¿Le ayudamos?»: velo azul noche translúcido con `backdrop-filter`, borde claro fino, brillo arriba y
   sombra baja; burbujas de cristal (las del asistente) y claras (las de quien escribe), campo y botón redondos.
   El panel flota sobre páginas blancas y sobre la foto oscura de la portada: por eso el tinte es más cerrado (≈80-90 %) que el
   del botón; a menos, el texto blanco no se lee sobre fondo claro. */
.chat{position:fixed;right:clamp(16px,3vw,34px);bottom:clamp(16px,3vw,34px);z-index:70;
  width:min(392px,calc(100vw - 32px));max-height:min(620px,calc(100dvh - 48px));
  display:flex;flex-direction:column;overflow:hidden;border-radius:24px;color:#fff;
  background:linear-gradient(160deg,rgba(50,82,156,.80) 0%,rgba(16,30,70,.90) 100%);
  border:1px solid rgba(255,255,255,.26);
  backdrop-filter:saturate(160%) blur(22px);-webkit-backdrop-filter:saturate(160%) blur(22px);
  box-shadow:0 30px 80px -24px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.28);
  transform-origin:100% 100%;animation:chat-entra .32s cubic-bezier(.2,.75,.2,1)}
.chat::before{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:radial-gradient(90% 40% at 15% 0%,rgba(255,255,255,.20),transparent 62%)}
@keyframes chat-entra{from{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:none}}

.chat-cab{display:flex;align-items:center;gap:12px;padding:16px 14px 14px 18px;border-bottom:1px solid rgba(255,255,255,.14)}
.chat-av{position:relative;flex:none;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28)}
.chat-av i{width:9px;height:9px;border-radius:50%;background:var(--oro-claro);animation:chat-pulso 2.8s ease-out infinite}
@keyframes chat-pulso{0%{box-shadow:0 0 0 0 rgba(216,195,155,.55)}70%,100%{box-shadow:0 0 0 12px rgba(216,195,155,0)}}
.chat-tit{flex:1;min-width:0}
.chat-tit b{display:block;font-size:16px;font-weight:600;letter-spacing:.01em;line-height:1.25}
.chat-tit small{display:flex;align-items:center;gap:6px;margin-top:3px;font-size:12px;color:rgba(255,255,255,.72)}
.chat-tit small::before{content:'';flex:none;width:7px;height:7px;border-radius:50%;background:#6FD39B;box-shadow:0 0 0 3px rgba(111,211,155,.2)}
.chat-x{flex:none;width:34px;height:34px;display:grid;place-items:center;padding:0;border-radius:50%;
  border:1px solid rgba(255,255,255,.20);background:rgba(255,255,255,.08);color:rgba(255,255,255,.85);
  font-size:22px;line-height:1;cursor:pointer;transition:background .25s,border-color .25s,color .25s}
.chat-x:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.4);color:#fff}

.chat-hilo{flex:1 1 auto;min-height:190px;overflow-y:auto;overscroll-behavior:contain;padding:18px 16px 8px;
  display:flex;flex-direction:column;gap:10px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.3) transparent}
.msg{max-width:86%;padding:11px 15px;font-size:14.5px;line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere;
  animation:msg-entra .28s ease-out}
@keyframes msg-entra{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.msg-asistente{align-self:flex-start;border-radius:18px 18px 18px 6px;background:rgba(255,255,255,.13);
  border:1px solid rgba(255,255,255,.18)}
.msg-yo{align-self:flex-end;border-radius:18px 18px 6px 18px;background:rgba(255,255,255,.95);color:var(--tinta)}
.msg-mal{background:rgba(214,84,66,.26);border-color:rgba(255,160,146,.5);color:#FFE1DC}
.msg a{color:var(--oro-claro);text-decoration:underline;text-underline-offset:2px;word-break:break-all}
.msg-yo a{color:#6B4F1F}
.msg .enlace-ficha{display:inline-block;margin:2px 0 2px 6px;padding:4px 12px;border-radius:999px;font-size:13px;color:#fff;
  text-decoration:none;word-break:normal;background:rgba(216,195,155,.20);border:1px solid rgba(216,195,155,.55);
  transition:background .2s}
.msg .enlace-ficha::after{content:' ↗'}
.msg .enlace-ficha:hover{background:rgba(216,195,155,.34)}
.msg.escribiendo{display:flex;align-items:center;gap:5px;padding:15px 16px}
.msg.escribiendo span{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.78);animation:chat-punto 1.2s infinite ease-in-out}
.msg.escribiendo span:nth-child(2){animation-delay:.16s}
.msg.escribiendo span:nth-child(3){animation-delay:.32s}
@keyframes chat-punto{0%,60%,100%{opacity:.35;transform:none}30%{opacity:1;transform:translateY(-3px)}}

.chat-sug{display:flex;flex-wrap:wrap;gap:8px;padding:6px 16px 12px}
.chat-sug button{font:inherit;font-size:13px;line-height:1.25;padding:8px 14px;border-radius:999px;color:#fff;cursor:pointer;
  border:1px solid rgba(255,255,255,.30);background:rgba(255,255,255,.08);text-align:left;
  transition:background .2s,border-color .2s}
.chat-sug button:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.5)}

.chat-pie{display:flex;gap:8px;align-items:center;padding:10px 12px 8px 14px}
.chat-pie input{flex:1;min-width:0;font:inherit;font-size:15px;color:#fff;padding:12px 18px;border-radius:999px;
  border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.10);
  transition:border-color .25s,background .25s,box-shadow .25s}
.chat-pie input::placeholder{color:rgba(255,255,255,.55)}
.chat-pie input:focus{outline:none;border-color:var(--oro-claro);background:rgba(255,255,255,.15);box-shadow:0 0 0 4px rgba(216,195,155,.20)}
.chat-pie button{flex:none;width:44px;height:44px;display:grid;place-items:center;padding:0;border-radius:50%;cursor:pointer;
  border:1px solid rgba(255,255,255,.55);color:var(--noche);
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,255,255,.84));box-shadow:0 8px 20px -10px rgba(0,0,0,.5);
  transition:background .25s,transform .15s}
.chat-pie button:hover{background:#fff}
.chat-pie button:active{transform:translateY(1px)}
.chat-pie button:disabled{opacity:.55;cursor:progress}
.chat-pie button svg{width:19px;height:19px;display:block}
.chat-x:focus-visible,.chat-sug button:focus-visible,.chat-pie button:focus-visible,.msg a:focus-visible{outline:2px solid var(--oro-claro);outline-offset:2px}
.chat-nota{margin:0;padding:2px 18px 14px;font-size:11px;line-height:1.4;color:rgba(255,255,255,.58);text-align:center}

@media (max-width:640px){
  /* En el móvil, casi todo el ancho y pegado abajo, como una hoja. */
  .chat{left:10px;right:10px;bottom:10px;width:auto;max-height:calc(100dvh - 20px);border-radius:22px}
  .chat-hilo{min-height:150px}
}
@media (prefers-reduced-motion:reduce){ .chat,.msg{animation:none} .chat-av i{animation:none} .msg.escribiendo span{animation:none;opacity:.7} }
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .chat{background:rgba(20,36,82,.96)} }

/* ── Pie de las páginas interiores ────────────────────────────────────────────────────────── */
/* Era una banda oscura con una sola línea al fondo y un hueco enorme encima. */
.pie-corto .pie-arriba{display:flex;align-items:center;justify-content:space-between;gap:26px;
  flex-wrap:wrap;padding-bottom:26px}
.pie-corto .pie-arriba img{height:44px;width:auto}
.pie-corto .pie-arriba nav{display:flex;gap:26px;flex-wrap:wrap}
.pie-corto .pie-arriba nav a{font-size:13.5px;color:rgba(255,255,255,.72);transition:color .25s}
.pie-corto .pie-arriba nav a:hover{color:var(--oro-claro)}
@media(max-width:600px){ .pie-corto .pie-arriba{flex-direction:column;align-items:flex-start;gap:16px} }

/* ── Listas de las páginas legales ────────────────────────────────────────────────────────── */
.aparte-lista{margin:14px 0 0;padding:20px 24px;background:var(--fondo-2);
  border-left:2px solid var(--oro);list-style:none}
.aparte-lista li{font-size:15px;line-height:1.75;color:var(--tinta-2);padding:7px 0 7px 18px;
  position:relative}
.aparte-lista li::before{content:'';position:absolute;left:0;top:16px;width:5px;height:5px;
  background:var(--oro);border-radius:50%}
.aparte-lista b{color:var(--tinta)}

/* ── El azul del logotipo, donde estructura ───────────────────────────────────────────────
   26/09/26 — Ignacio: «tampoco encuentro toques del azul por la página». Tenía razón: el azul
   noche estaba SOLO en el pie, y el logotipo es oro sobre ese azul. Aquí va donde manda: lo que
   se pulsa, lo que separa y lo que marca dónde está uno. El oro se queda para los filetes finos
   y los rótulos, que es lo que era. */
.datos-viv{border-top-color:var(--noche);border-top-width:2px}
.ficha-precio b,.caja-precio .p{color:var(--noche)}
.ficha h1,.cuerpo-ficha h2,.otras h2{color:var(--noche)}
.migas a:hover{color:var(--noche)}
.tarjeta:hover{border-color:rgba(13,23,48,.22)}
.tarjeta .precio{color:var(--noche);font-weight:600}
.lista-paginas .aqui,.paginas .aqui{background:var(--noche);color:#fff}
.seccion-cab{border-bottom:1px solid var(--linea)}
.pie-corto .pie-arriba{border-bottom:1px solid rgba(255,255,255,.12)}

/* ── Utilidades de separación ─────────────────────────────────────────────────────────────
   🪤 26/09/26 — Esto estaba escrito como `style="..."` dentro del HTML, y la CSP del sitio dice
   `style-src 'self'`: el navegador los BLOQUEABA y no se aplicaban. No se veía como un error, se
   veía como que la separación no estaba puesta, y la consola echaba humo. Con la CSP que tenemos
   —que es la que queremos— los estilos van en la hoja, siempre. */
.centrado{text-align:center}
.logo-404{height:70px;margin:0 auto 26px;width:auto}
.sep-6{margin-top:6px}
.sep-12{margin-top:12px}
.sep-14{margin-top:14px}
.sep-18{margin-top:18px}
.sep-22{margin-top:22px}
.sep-26{margin-top:26px}
.ancho-32{max-width:32ch}
.legal.legal-suelta{margin-top:0;border-top:0}

/* ══ VENDER SU CASA · v0.8 ════════════════════════════════════════════════════════════════
   26/09/26 — Ignacio: «el apartado vender debería permitir vender una casa a la gente». Un
   formulario largo asusta, así que va partido en tres pasos numerados y con el campo obligatorio
   marcado: se ve de un vistazo cuánto queda. ═══════════════════════════════════════════════ */
.vender-cab{padding-block:clamp(110px,14vh,150px) 0;max-width:860px}
.vender-cab h1{font-size:clamp(30px,4.4vw,52px);margin:12px 0 18px;max-width:18ch;
  text-wrap:balance;color:var(--noche)}
.entrada{font-size:17px;line-height:1.8;color:var(--tinta-2);max-width:62ch}

/* 🪤 30/10/26 — Estas reglas son de «Vender» (`<ul class="pasos">`, cuatro columnas con el número en un círculo). Se llamaban igual que las de la
   portada (`<ol class="pasos">`, la lista de 8 trámites) y, al ir después, las pisaban: la descripción salía como un círculo oscuro de
   26 px con letra blanca. Ahora cada una se aplica solo a su tipo de lista. */
ul.pasos{list-style:none;margin:clamp(34px,5vh,54px) 0 0;padding:0;display:grid;
  grid-template-columns:repeat(4,1fr);gap:1px;background:var(--linea)}
ul.pasos li{background:var(--fondo);padding:22px 20px 24px;display:flex;gap:13px;align-items:flex-start}
ul.pasos span{flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:var(--noche);
  color:#fff;display:grid;place-items:center;font-size:12.5px;font-weight:600}
ul.pasos b{display:block;font-weight:600;font-size:15px;color:var(--noche);margin-bottom:4px}
ul.pasos p{margin:0;font-size:13.5px;line-height:1.6;color:var(--apagado)}

.vender-form{padding-block:clamp(40px,6vh,64px) clamp(60px,9vh,110px);max-width:860px}
.vender-form fieldset{border:0;border-top:1px solid var(--linea);margin:0;
  padding:clamp(26px,4vh,38px) 0 clamp(30px,5vh,46px)}
.vender-form fieldset:first-of-type{border-top:0;padding-top:0}
.vender-form legend{padding:0;display:flex;align-items:center;gap:12px;font-size:20px;
  font-weight:500;color:var(--noche);margin-bottom:8px}
.vender-form legend .n{flex:0 0 auto;width:28px;height:28px;border-radius:50%;
  border:1.5px solid var(--oro);color:var(--oro);display:grid;place-items:center;
  font-size:13px;font-weight:600}
.pista-fs{font-size:13.5px;color:var(--apagado);margin:0 0 18px 40px}

.vender-form .rej{display:grid;grid-template-columns:1fr 1fr;gap:16px 20px;margin-bottom:16px}
.vender-form .rej.tres{grid-template-columns:repeat(3,1fr)}
.vender-form .rej.cuatro{grid-template-columns:repeat(4,1fr)}
.vender-form label{display:block}
.vender-form label.ancho{margin-bottom:16px}
.vender-form .et{display:block;font-size:12px;font-weight:600;letter-spacing:.06em;
  color:var(--tinta-2);margin-bottom:6px}
.vender-form input,.vender-form select,.vender-form textarea{width:100%;font:inherit;
  font-size:15px;padding:11px 13px;border:1px solid var(--linea);background:var(--papel);
  color:var(--tinta);border-radius:2px;transition:border-color .2s,box-shadow .2s}
.vender-form textarea{resize:vertical;line-height:1.65}
.vender-form input:focus,.vender-form select:focus,.vender-form textarea:focus{outline:0;
  border-color:var(--noche);box-shadow:0 0 0 3px rgba(13,23,48,.08)}
.vender-form small{display:block;font-size:12px;color:var(--apagado);margin-top:5px;
  line-height:1.5}

/* La trampa para robots. No se ve, no se tabula y no la lee un lector de pantalla. */
.trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.acepto{display:flex;gap:11px;align-items:flex-start;margin-top:8px;font-size:14px;
  line-height:1.65;color:var(--tinta-2);cursor:pointer}
.acepto input{width:17px;height:17px;flex:0 0 auto;margin-top:3px;accent-color:var(--noche);
  padding:0;border:0}
.acepto a{color:var(--noche);border-bottom:1px solid var(--oro)}
.letra-clara{font-size:12.5px;color:var(--apagado);line-height:1.65;margin-top:14px;
  max-width:64ch;padding-left:28px}
.enviar{margin-top:26px}
.vender-form .boton-oscuro{display:inline-block;background:var(--noche);color:#fff;border:0;
  font:inherit;font-size:12.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  padding:16px 34px;cursor:pointer;transition:background .3s}
.vender-form .boton-oscuro:hover{background:var(--oro)}
.aviso-form{background:var(--fondo-2);border-left:3px solid var(--oro);padding:14px 18px;
  font-size:14.5px;color:var(--tinta-2);margin:0 0 26px}
.aviso-form.mal{border-left-color:#B03A2E;color:#8E2F24}

/* ── Recibida ────────────────────────────────────────────────────────────────────────────── */
.recibida{padding-block:clamp(130px,18vh,190px) clamp(70px,10vh,120px);max-width:620px;
  text-align:center}
.sobre-ok{color:var(--oro);margin-bottom:22px}
.sobre-ok svg{width:56px;height:auto;margin:0 auto;display:block}
.recibida h1{font-size:clamp(28px,3.8vw,44px);margin:10px 0 16px;color:var(--noche);
  text-wrap:balance}
.recibida .entrada{margin-inline:auto}

@media(max-width:900px){
  ul.pasos{grid-template-columns:1fr 1fr}
  .vender-form .rej.cuatro{grid-template-columns:1fr 1fr}
  .vender-form .rej.tres{grid-template-columns:1fr}
}
@media(max-width:600px){
  ul.pasos{grid-template-columns:1fr}
  .vender-form .rej,.vender-form .rej.cuatro{grid-template-columns:1fr}
  .pista-fs,.letra-clara{margin-left:0;padding-left:0}
  .vender-form .boton-oscuro{width:100%}
}

/* ── Aviso de traducción en las páginas legales ───────────────────────────────────────────── */
.traduccion-legal{background:var(--fondo-2);border-left:3px solid var(--oro);padding:13px 18px;
  font-size:13.5px;line-height:1.6;color:var(--tinta-2);margin:0 0 30px}

/* ── El selector de idioma ────────────────────────────────────────────────────────────────── */
.idiomas a{font-size:12px;letter-spacing:.1em;padding:3px 2px;opacity:.6;transition:opacity .2s,color .2s}
.idiomas a:hover{opacity:1}
.idiomas a[aria-current="true"]{opacity:1;font-weight:600;border-bottom:1px solid var(--oro)}


/* ═══ 30/10/26 · Ficha pública con cabecera de foto, tarjetas y caja de precio fija ═══════════════════
   Nacho: «las fichas públicas no me gustan nada… podemos usar el diseño de propertyco.es». Se toma
   la ESTRUCTURA (foto grande con título y precio encima, tarjeta de galería, tarjeta de características,
   tabla de unidades de la promoción, descripción y caja fija a la derecha), no su código ni sus
   imágenes, y con la tipografía y los colores de ALL in ONE. Todo en este fichero: la política de
   contenido no admite estilos en línea. ═══════════════════════════════════════════════════════════ */
.ficha-nueva{padding-block:64px clamp(50px,8vh,100px)}
.ficha-hero{position:relative;min-height:clamp(340px,52vh,540px);display:flex;color:#fff;
  background:var(--noche);overflow:hidden}
.ficha-hero .hero-img,.ficha-hero .hero-img img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block}
.hero-vel{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(13,23,48,.38) 0%,rgba(13,23,48,.05) 38%,rgba(13,23,48,.80) 100%)}
.hero-cont{position:relative;z-index:2;width:100%;display:flex;flex-direction:column;
  justify-content:space-between;padding-block:22px clamp(22px,4vh,40px)}
.hero-volver{align-self:flex-start;font-size:12.5px;letter-spacing:.06em;color:#fff;
  background:rgba(13,23,48,.45);backdrop-filter:blur(6px);padding:8px 14px;border-radius:999px;
  border:1px solid rgba(255,255,255,.25);transition:background .25s}
.hero-volver:hover{background:rgba(13,23,48,.75)}
.hero-pie h1{font-size:clamp(30px,4.6vw,56px);line-height:1.08;margin:0 0 6px;max-width:22ch;
  text-wrap:balance;color:#fff;text-shadow:0 2px 22px rgba(0,0,0,.35)}
.hero-sub{font-size:clamp(15px,1.5vw,19px);margin:0 0 14px;color:rgba(255,255,255,.92);max-width:60ch}
.hero-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:0;font-size:14px}
.meta-sitio{display:inline-flex;align-items:center;gap:6px;color:#fff}
.pastilla{display:inline-block;background:rgba(255,255,255,.94);color:var(--tinta);padding:6px 14px;
  border-radius:999px;font-size:13.5px;font-weight:600;letter-spacing:.02em}
.pastilla.reservada{background:var(--oro);color:#fff}
.hero-fotos{position:absolute;right:var(--gutter);bottom:clamp(22px,4vh,40px);border:1px solid rgba(255,255,255,.55);
  background:rgba(13,23,48,.55);backdrop-filter:blur(6px);color:#fff;font:inherit;font-size:13px;
  letter-spacing:.04em;padding:10px 18px;border-radius:999px;cursor:pointer;transition:background .25s}
.hero-fotos:hover{background:var(--noche)}
.ficha-nueva .migas{margin:22px 0 18px}

.ficha-dos{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:clamp(22px,3vw,40px);align-items:start}
.ficha-col{display:flex;flex-direction:column;gap:22px;min-width:0}
.tarjeta-f{background:var(--papel);border:1px solid var(--linea-suave);border-radius:10px;
  padding:clamp(18px,2.4vw,28px);box-shadow:0 14px 40px -34px rgba(16,26,46,.45)}
.tf-t{font-size:clamp(19px,1.8vw,23px);margin:0 0 18px;font-weight:600;display:flex;align-items:baseline;gap:10px}
.tf-t small{font-size:14px;font-weight:400;color:var(--apagado)}
.tf-t .cont{font-size:12.5px;font-weight:600;background:var(--fondo-2);color:var(--tinta-2);
  border-radius:999px;padding:2px 10px}

.rej-fotos{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.rej-fotos .tal-min{position:relative;display:block;padding:0;border:0;background:var(--fondo-2);cursor:pointer;
  aspect-ratio:4/3;overflow:hidden;border-radius:6px}
.rej-fotos .tal-min img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s}
.rej-fotos .tal-min:hover img{transform:scale(1.05)}
.rej-fotos .mas-fotos span{position:absolute;inset:0;display:grid;place-items:center;
  background:rgba(13,23,48,.62);color:#fff;font-size:24px;font-weight:600}
.rej-fotos .tal-min.aqui{outline:0}

.cifras-f{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px;margin:0 0 4px;padding:0}
.cifras-f li{background:var(--fondo);border-radius:8px;padding:14px 16px;display:flex;flex-direction:column;gap:2px}
.cifras-f b{font-size:clamp(24px,2.6vw,32px);font-weight:600;line-height:1.1;color:var(--tinta);
  font-variant-numeric:lining-nums}
.cifras-f span{font-size:12.5px;color:var(--apagado)}
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 0;padding:0}
.chips li{background:#EEF2F8;color:#27406B;border:1px solid #DCE4F1;border-radius:999px;
  padding:5px 13px;font-size:13px}
.chips li:nth-child(3n+2){background:#EFF6F0;color:#2B5A36;border-color:#DCEBDD}
.chips li:nth-child(3n){background:#F7F1E6;color:#6B4F1C;border-color:#DDE4F0}

.tabla-env{overflow-x:auto;margin:0 -4px}
.tabla-u{width:100%;border-collapse:collapse;font-size:13.5px;min-width:640px}
.tabla-u th{text-align:left;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--apagado);
  font-weight:600;padding:10px 10px;border-bottom:1px solid var(--linea);background:var(--fondo)}
.tabla-u td{padding:11px 10px;border-bottom:1px solid var(--linea-suave);vertical-align:middle}
.tabla-u .der{text-align:right;white-space:nowrap}
.tabla-u td.der{font-weight:600}
.tabla-u td:first-child a{font-weight:600;border-bottom:1px solid var(--oro)}
.tabla-u tr.esta td{background:#F6F8FC}
.tabla-u tr:hover td{background:var(--fondo)}
.rasgos-u{max-width:260px}
.rasgos-u span{display:inline-block;background:#EEF2F8;color:#27406B;border-radius:999px;padding:2px 9px;
  font-size:11.5px;margin:0 4px 4px 0;white-space:nowrap}

.ficha-nueva .prosa{max-width:none;font-size:16px;line-height:1.8;color:var(--tinta-2)}
.ficha-lateral{position:sticky;top:88px}
.ficha-lateral .caja-precio{position:static;padding:clamp(18px,2.4vw,26px)}
.lat-datos{list-style:none;margin:16px 0 0;padding:14px 0 0;border-top:1px solid var(--linea-suave);
  font-size:13.5px;color:var(--tinta-2)}
.lat-datos li{display:flex;align-items:center;gap:7px;padding:4px 0}
.lat-datos svg{flex:0 0 auto;color:var(--oro)}

@media (max-width:1000px){
  .ficha-dos{grid-template-columns:1fr}
  .ficha-lateral{position:static;order:-1}
  .rej-fotos{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:560px){
  .rej-fotos{grid-template-columns:repeat(2,1fr)}
  .hero-fotos{position:static;align-self:flex-start;margin-top:12px}
  .ficha-nueva{padding-top:56px}
}

/* Títulos de tarjeta «Promoción · Tipo de N dormitorios en Sitio»: el « · » pasa a salto de línea */
.datos h3{white-space:pre-line}
/* La tabla de unidades cabe en la tarjeta sin recortar el precio */
.tabla-u{min-width:0;table-layout:auto}
.tabla-u th,.tabla-u td{padding-inline:7px}
.tabla-u th{letter-spacing:.06em}
.rasgos-u{max-width:170px}
.rasgos-u span:nth-child(n+3){display:none}
.tabla-u td.der{padding-right:4px}
@media (max-width:700px){.tabla-u{min-width:560px}}


/* ═══ 30/10/26 · Selector de idioma desplegable ═══════════════════════════════════════════════ */
.idiomas-sel{position:relative;display:block;font-size:12.5px;letter-spacing:.1em}
.idiomas-sel summary{list-style:none;display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  padding:7px 11px;border:1px solid rgba(16,26,46,.28);border-radius:999px;color:inherit;
  background:rgba(255,255,255,.45);transition:border-color .2s,background .2s;user-select:none}
.idiomas-sel summary::-webkit-details-marker{display:none}
.idiomas-sel summary:hover,.idiomas-sel[open] summary{border-color:var(--oro);background:rgba(255,255,255,.85)}
.idiomas-sel summary:focus-visible{outline:2px solid var(--oro);outline-offset:2px}
.idiomas-sel .cod{font-weight:600}
.idiomas-sel .flecha{transition:transform .2s}
.idiomas-sel[open] .flecha{transform:rotate(180deg)}
.idiomas-sel ul{position:absolute;right:0;top:calc(100% + 8px);z-index:80;min-width:150px;margin:0;padding:6px;
  list-style:none;background:var(--papel);border:1px solid var(--linea);border-radius:10px;
  box-shadow:0 18px 40px -18px rgba(13,23,48,.45)}
.idiomas-sel li a{display:block;padding:9px 12px;border-radius:7px;font-size:14px;letter-spacing:0;
  color:var(--tinta);opacity:1;border:0;font-weight:400}
.idiomas-sel li a:hover{background:var(--fondo)}
.idiomas-sel li a[aria-current="true"]{font-weight:600;color:var(--oro);border:0}
/* Sobre la foto de la portada, con la cabecera aún transparente, la píldora va en claro */
.portada.oscura .cab:not(.pegada) .idiomas-sel summary{color:#fff;border-color:rgba(255,255,255,.55);
  background:rgba(13,23,48,.35);text-shadow:none}
.portada.oscura .cab:not(.pegada) .idiomas-sel summary:hover,
.portada.oscura .cab:not(.pegada) .idiomas-sel[open] summary{background:rgba(13,23,48,.6);border-color:#fff}
.portada.oscura .cab:not(.pegada) .idiomas-sel li a{color:var(--tinta)}
@media (max-width:900px){
  nav.abierto .idiomas-sel summary{color:#fff;border-color:rgba(255,255,255,.45);background:transparent}
  nav.abierto .idiomas-sel ul{position:static;margin-top:10px;background:rgba(255,255,255,.08);
    border-color:rgba(255,255,255,.25);box-shadow:none}
  nav.abierto .idiomas-sel li a{color:#fff;font-size:17px;opacity:.9}
  nav.abierto .idiomas-sel li a:hover{background:rgba(255,255,255,.12)}
  nav.abierto .idiomas-sel li a[aria-current="true"]{color:var(--oro-claro)}
}

/* 🪤 30/10/26 — El menú móvil abierto es `position:fixed; inset:0`, pero la cabecera pegada lleva
   `backdrop-filter`, y un filtro convierte a la cabecera en el «bloque contenedor» de lo fijo que lleva dentro:
   el menú se quedaba en 54 px de alto en vez de ocupar la pantalla. Con el menú abierto se quita el filtro. */
.cab:has(nav.abierto){backdrop-filter:none;-webkit-backdrop-filter:none}
@media (max-width:900px){
  /* Con la cabecera pegada, `.cab.pegada nav a` (más específico) pintaba los enlaces en oscuro sobre el fondo oscuro del menú abierto */
  .cab.pegada nav.abierto a{color:#fff;opacity:.92}
  .cab.pegada nav.abierto a.acceso{border-color:rgba(255,255,255,.4)}
  .cab.pegada nav.abierto a:hover{border-bottom-color:var(--oro-claro)}
  .cab.pegada nav.abierto .idiomas-sel li a{font-size:17px}
}


/* ═══ 30/10/26 · Menú con degradado, como el de serviman.eu, y con el texto más grande ═══════════════
   Nacho: «al menú le damos un degradado como el de serviman.eu, y hacemos más grande el texto» y «cuando el
   menú pasa de la imagen de cabecera que se convierta a blanco». Igual que Serviman: un degradado vertical
   (color sólido hasta el 68 % del alto y transparente al final), AZUL NOCHE mientras la barra está sobre la
   imagen de cabecera (clase `.sobre-hero`, que pone web.js) y BLANCO/crema con texto oscuro cuando ya la ha
   pasado, o en las páginas que no tienen imagen de cabecera. Sin desenfoque ni línea: el degradado hace de borde.
   ═════════════════════════════════════════════════════════════════════════════════════════════════ */
/* — Estado base: BLANCO (el que ve cualquier navegador sin `color-mix`, y las páginas sin imagen de cabecera) — */
.cab.pegada{background:linear-gradient(180deg,rgba(255,255,255,1) 0%,rgba(255,255,255,1) 68%,rgba(255,255,255,0) 100%);
  backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;padding-block:14px 34px}
.cab.pegada img{height:38px}
.cab.pegada nav,.portada.oscura .cab.pegada nav{gap:clamp(18px,2.6vw,38px)}
.cab.pegada nav a,.portada.oscura .cab.pegada nav a{font-size:17px;letter-spacing:.02em;font-weight:400;
  color:var(--tinta);opacity:.9;text-shadow:none;padding-block:7px}
.cab.pegada nav a:hover,.portada.oscura .cab.pegada nav a:hover{opacity:1;border-bottom-color:var(--oro)}
.cab.pegada .acceso,.portada.oscura .cab.pegada .acceso{border-color:rgba(16,26,46,.3);color:var(--tinta);background:transparent}
.cab.pegada .acceso:hover,.portada.oscura .cab.pegada .acceso:hover{border-color:var(--oro);background:rgba(16,26,46,.04)}
.cab.pegada .menu-btn span,.portada.oscura .cab.pegada .menu-btn span{background:var(--tinta)}
.cab.pegada .idiomas,.portada.oscura .cab.pegada .idiomas{color:var(--tinta);text-shadow:none}
.cab.pegada .idiomas-sel summary,.portada.oscura .cab.pegada .idiomas-sel summary{font-size:14.5px;color:var(--tinta);
  border-color:rgba(16,26,46,.28);background:transparent}
.cab.pegada .idiomas-sel summary:hover,.cab.pegada .idiomas-sel[open] summary,
.portada.oscura .cab.pegada .idiomas-sel summary:hover,.portada.oscura .cab.pegada .idiomas-sel[open] summary{
  border-color:var(--oro);background:rgba(16,26,46,.04)}
.cab.pegada .idiomas-sel li a{font-size:15px}

/* — Del azul al blanco, PAULATINO (Nacho, 30/10/26: «que los cambios de tamaño y color del menú sean paulatinos, no tan
     bruscos»). `--t` va de 1 (barra sobre la imagen de cabecera: azul) a 0 (ya la ha pasado: blanca) y la calcula web.js
     según lo lejos que está el borde de la imagen: el color se mezcla a medida que se hace scroll, sin saltos. Solo en
     navegadores con `color-mix`; los demás se quedan con el blanco de arriba. — */
@supports (background: color-mix(in srgb, red 50%, blue)) {
  .cab.pegada{--t:0;--pc:calc(var(--t) * 100%);
    --c-fondo:color-mix(in srgb, rgb(13 23 48) var(--pc), rgb(255 255 255));
    --c-fondo0:color-mix(in srgb, rgb(13 23 48 / 0) var(--pc), rgb(255 255 255 / 0));
    /* El FONDO se mezcla despacio (de 0 a 1); el TEXTO cruza de oscuro a claro rápido alrededor de la mitad (0,46–0,54): a media
       mezcla el fondo es gris y un texto también gris no se leería; así siempre hay contraste. */
    --pt:clamp(0%, calc((var(--t) - 0.46) * 1250%), 100%);
    --c-texto:color-mix(in srgb, rgb(255 255 255) var(--pt), rgb(16 26 46));
    --c-linea:color-mix(in srgb, rgb(255 255 255 / .45) var(--pt), rgb(16 26 46 / .3));
    --c-velo:color-mix(in srgb, rgb(255 255 255 / .08) var(--pt), rgb(16 26 46 / .04));
    background:linear-gradient(180deg,var(--c-fondo) 0%,var(--c-fondo) 68%,var(--c-fondo0) 100%)}
  .cab.pegada nav a,.portada.oscura .cab.pegada nav a{color:var(--c-texto)}
  .cab.pegada .acceso,.portada.oscura .cab.pegada .acceso{color:var(--c-texto);border-color:var(--c-linea)}
  .cab.pegada .acceso:hover,.portada.oscura .cab.pegada .acceso:hover{background:var(--c-velo)}
  .cab.pegada .menu-btn span,.portada.oscura .cab.pegada .menu-btn span{background:var(--c-texto)}
  .cab.pegada .idiomas,.portada.oscura .cab.pegada .idiomas{color:var(--c-texto)}
  .cab.pegada .idiomas-sel summary,.portada.oscura .cab.pegada .idiomas-sel summary{color:var(--c-texto);border-color:var(--c-linea)}
  .cab.pegada .idiomas-sel summary:hover,.cab.pegada .idiomas-sel[open] summary,
  .portada.oscura .cab.pegada .idiomas-sel summary:hover,.portada.oscura .cab.pegada .idiomas-sel[open] summary{background:var(--c-velo)}
}

/* — Al empezar a bajar en la portada, la barra APARECE con una entrada suave (se desvanece y baja unos píxeles)
     en vez de plantarse de golpe. La clase `entra` la pone web.js solo en ese momento. — */
@keyframes cabEntra{from{opacity:0;transform:translateY(-16px)}to{opacity:1;transform:translateY(0)}}
.cab.pegada.entra{animation:cabEntra .55s cubic-bezier(.22,.61,.36,1) both}

/* — La portada SIN desplazar no lleva menú (regla de Ignacio, 26/09/26; Nacho lo confirma el 30/10/26): la regla que lo
     oculta, más arriba, vuelve a mandar. El menú aparece al bajar, ya como barra fija azul y luego blanca. — */
@media (max-width:720px){
  .cab.pegada{padding-block:10px 26px}
  .cab.pegada img{height:32px}
  /* El menú abierto a pantalla completa siempre es azul: texto blanco, gane quien gane arriba */
  .cab.pegada nav.abierto a,.portada.oscura .cab.pegada nav.abierto a{color:#fff;opacity:.92}
  .cab.pegada nav.abierto .acceso,.portada.oscura .cab.pegada nav.abierto .acceso{border-color:rgba(255,255,255,.45);color:#fff}
  .cab.pegada nav.abierto .idiomas-sel summary,.portada.oscura .cab.pegada nav.abierto .idiomas-sel summary{color:#fff;border-color:rgba(255,255,255,.45)}
  .cab.pegada nav.abierto .idiomas-sel li a{color:#fff;font-size:17px}
}
/* La cabecera de la portada sin desplazar: el texto también crece */
.cab:not(.pegada) nav a{font-size:16.5px}

/* ═══ El pie de página, con degradado por arriba (Nacho, 30/10/26: «ponle un degradado también al pie de página
   por arriba»): el azul noche entra desde el fondo de la página con un difuminado, en vez de un corte seco. ═══ */
footer{position:relative}
footer::before{content:'';position:absolute;left:0;right:0;bottom:100%;height:clamp(70px,11vh,120px);
  background:linear-gradient(180deg,rgba(13,23,48,0) 0%,rgba(13,23,48,1) 100%);pointer-events:none}


/* ═══ 30/10/26 · El botón «¿Le ayudamos?» = el cristal de las pestañas Comprar / Vender / Alquilar ═════════════════
   Nacho: «con el efecto glass, pero con un toque azul cabecera» → «no es muy glass morph» → (enseñando las pestañas)
   «ese menú es el glass morph, hazlo igual sin el azul opaco, solo un ligero toque de azul». Es la receta de `.pestanas`:
   velo translúcido, `backdrop-filter: saturate(150%) blur(10px)`, borde fino claro y sombra baja; letra de 12,5 px en
   mayúsculas con espaciado ancho; sin píldora interior sólida (al pasar el ratón se enciende un velo blanco, como en las
   pestañas). El «ligero toque de azul» es un tinte azul noche al ~46 %: a menos, sobre el fondo claro de las páginas el
   texto blanco no se lee (las pestañas solo viven sobre la foto oscura). ═════════════════════════════════════════ */
.asistente{display:grid;align-items:center;padding:4px;gap:0;border-radius:14px;
  border:1px solid rgba(255,255,255,.26);color:#fff;font:inherit;letter-spacing:.13em;
  background:linear-gradient(135deg,rgba(56,92,172,.50) 0%,rgba(20,36,82,.60) 100%);
  backdrop-filter:saturate(150%) blur(10px);-webkit-backdrop-filter:saturate(150%) blur(10px);
  box-shadow:0 6px 20px rgba(13,23,48,.22);
  transition:background .25s,border-color .25s,box-shadow .25s}
.asistente span{grid-area:1/1;display:block;padding:9px 18px 9px 34px;border-radius:10px;background:none;border:0;
  font-size:12.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;white-space:nowrap;
  text-shadow:0 1px 6px rgba(13,23,48,.5);opacity:.92;transition:background .18s,opacity .18s}
.asistente i{grid-area:1/1;z-index:1;justify-self:start;margin-left:16px;width:6px;height:6px;border-radius:50%;
  background:var(--oro-claro);transition:background .18s}
.asistente:hover{border-color:rgba(255,255,255,.42);background:linear-gradient(135deg,rgba(66,106,192,.56) 0%,rgba(24,42,92,.66) 100%)}
.asistente:hover span{background:rgba(255,255,255,.15);opacity:1}
.asistente:hover i{background:#fff}
.asistente:focus{outline:none}
.asistente:focus-visible{outline:2px solid var(--oro-claro);outline-offset:2px}
@media (max-width:720px){
  /* En el móvil, solo el punto, dentro de un cuadradito de cristal */
  .asistente{padding:4px}
  .asistente span{display:block;font-size:0;letter-spacing:0;padding:0;width:34px;height:34px}
  .asistente i{justify-self:center;margin-left:0}
}


/* ═══ 30/10/26 · Buscador de viviendas en dos columnas: MAPA + filtros + lista en horizontal ═══════════════════
   Nacho enseñó gilmar.es/comprar: «el buscador de viviendas, ¿podemos hacer algo así?» y «que salgan en el mapa las casas y
   los números de casas que hay en cada sitio». Se toma la ESTRUCTURA (mapa a la izquierda, rejilla de filtros, título con el
   total y el orden, tarjetas horizontales), con nuestros colores y tipografía. El mapa lo pinta mapa.js. ═══════════════ */
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.buscar-split{display:grid;grid-template-columns:minmax(300px,42%) minmax(0,1fr);min-height:100vh;align-items:start}
.buscar-mapa{position:sticky;top:0;height:100vh;background:#e9eef5}
#mapa{position:absolute;inset:0;z-index:1}
.mapa-nojs{position:absolute;inset:auto 16px 16px;margin:0;font-size:13px;color:var(--apagado)}
.buscar-lista{min-width:0;padding:clamp(86px,12vh,110px) clamp(18px,3vw,44px) clamp(50px,8vh,90px)}

/* Filtros: rejilla de desplegables; el primer texto de cada uno es su nombre */
.filtros-v{margin:0}
.fgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.fsel{position:relative;display:block;margin:0}
.fsel select,.fsel input{width:100%;height:46px;padding:0 34px 0 14px;font:inherit;font-size:14.5px;color:var(--tinta);
  background:var(--papel);border:1px solid var(--linea);border-radius:6px;appearance:none;-webkit-appearance:none;
  transition:border-color .2s,box-shadow .2s;text-overflow:ellipsis}
.fsel input{padding-right:12px}
.fsel select{background-image:linear-gradient(45deg,transparent 50%,var(--apagado) 50%),linear-gradient(135deg,var(--apagado) 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;cursor:pointer}
.fsel select:hover,.fsel input:hover{border-color:#c9cdd6}
.fsel select:focus,.fsel input:focus{outline:0;border-color:var(--oro);box-shadow:0 0 0 3px rgba(176,141,87,.18)}
.fsel select:has(option[value=""]:checked){color:var(--tinta-2)}
.facciones{display:flex;align-items:center;gap:16px;margin-top:12px}
.facciones button{height:42px;padding:0 26px;border:0;border-radius:6px;background:var(--noche);color:#fff;font:inherit;font-size:12.5px;
  letter-spacing:.16em;text-transform:uppercase;cursor:pointer;transition:background .25s}
.facciones button:hover{background:var(--oro)}
.limpiar{font-size:13.5px;color:var(--tinta-2);border-bottom:1px solid var(--oro)}
.limpiar:hover{color:var(--tinta)}

.buscar-h1{font-size:clamp(28px,3.2vw,40px);margin:30px 0 8px;font-weight:400}
.buscar-barra{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin:6px 0 18px}
.buscar-barra .total{margin:0;font-size:15px;color:var(--tinta-2)}
.buscar-barra .total b{color:var(--tinta)}
.orden{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--tinta-2)}
.orden select{height:42px;padding:0 34px 0 12px;font:inherit;font-size:14px;color:var(--tinta);background:var(--papel);border:1px solid var(--linea);border-radius:6px;
  appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--apagado) 50%),linear-gradient(135deg,var(--apagado) 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.orden select:focus{outline:0;border-color:var(--oro)}

/* Lista en horizontal */
.lista-h{display:flex;flex-direction:column;gap:16px}
.fila{display:grid;grid-template-columns:clamp(190px,32%,300px) minmax(0,1fr);background:var(--papel);border:1px solid var(--linea-suave);
  border-radius:10px;overflow:hidden;color:inherit;transition:box-shadow .3s,border-color .3s,transform .3s}
.fila:hover{border-color:var(--linea);box-shadow:0 18px 44px -28px rgba(16,26,46,.5);transform:translateY(-2px)}
.fila-foto{position:relative;min-height:190px;background:var(--fondo-2)}
.fila-foto picture,.fila-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.fila-foto .sello{z-index:2}
.fila-cuerpo{display:flex;flex-direction:column;padding:16px 20px 14px;min-width:0}
.fila-cuerpo .sitio{margin:0 0 4px;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--oro)}
.fila-cuerpo h2{margin:0 0 8px;font-size:clamp(18px,1.7vw,22px);line-height:1.2;font-weight:600;color:var(--noche)}
.fila-cuerpo h2 small{display:block;margin-top:3px;font-size:14.5px;font-weight:400;color:var(--tinta-2)}
.fila-cuerpo .resumen{margin:0 0 12px;font-size:14px;line-height:1.6;color:var(--tinta-2);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.fila-pie{margin-top:auto;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:8px 14px;
  padding-top:10px;border-top:1px solid var(--linea-suave)}
.fila-pie .rasgos{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:13px;color:var(--tinta-2)}
.fila-pie .rasgos .ref{color:var(--apagado)}
.fila-pie .precio{margin:0;font-size:clamp(18px,1.7vw,22px);font-weight:600;color:var(--tinta);white-space:nowrap}

/* El mapa: marcadores con precio y grupos con el número de casas */
.leaflet-container{font:inherit;background:#e9eef5}
.mk-precio{background:none;border:0}
.mk-precio span{display:block;box-sizing:border-box;min-width:54px;padding:5px 10px;border-radius:999px;background:var(--papel);color:var(--noche);
  border:1.5px solid var(--noche);font-size:12.5px;font-weight:700;letter-spacing:.02em;text-align:center;white-space:nowrap;
  box-shadow:0 4px 12px rgba(13,23,48,.28);transition:background .2s,color .2s,transform .2s}
.mk-precio span::after{content:'';position:absolute;left:50%;bottom:-6px;width:9px;height:9px;margin-left:-5px;background:var(--papel);
  border-right:1.5px solid var(--noche);border-bottom:1.5px solid var(--noche);transform:rotate(45deg)}
.mk-precio:hover span,.mk-precio.resalta span{background:var(--noche);color:#fff;transform:translateY(-2px) scale(1.06)}
.mk-precio:hover span::after,.mk-precio.resalta span::after{background:var(--noche)}
.mc-n{background:none;border:0}
.mc-n span{display:grid;place-items:center;border-radius:50%;background:var(--noche);color:#fff;font-weight:700;
  border:3px solid rgba(255,255,255,.92);box-shadow:0 0 0 3px rgba(176,141,87,.85),0 8px 18px rgba(13,23,48,.4);transition:transform .2s}
.mc-p span{width:38px;height:38px;margin:4px;font-size:14px}
.mc-m span{width:46px;height:46px;margin:0;font-size:15.5px}
.mc-g span{width:54px;height:54px;margin:-4px;font-size:17px}
.mc-n:hover span{transform:scale(1.1)}
.leaflet-popup-content-wrapper{padding:0;border-radius:12px;overflow:hidden;box-shadow:0 16px 40px rgba(13,23,48,.35)}
.leaflet-popup-content{margin:0;width:auto!important}
.pop{display:grid;grid-template-columns:104px 1fr;color:var(--tinta);min-width:250px}
.pop img{width:104px;height:100%;min-height:96px;object-fit:cover;display:block}
.pop-c{display:flex;flex-direction:column;gap:2px;padding:10px 14px 10px 12px;font-size:13px;line-height:1.35}
.pop-c b{font-size:14px;color:var(--noche)}
.pop-s{color:var(--tinta-2);font-size:12.5px}
.pop-m{color:var(--oro);font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.pop-c strong{font-size:16px;margin-top:2px}
.pop-c em{font-style:normal;font-size:12px;color:var(--oro);margin-top:2px}
.leaflet-bar a{color:var(--noche)}
.leaflet-control-attribution{font-size:10.5px}

@media (max-width:1180px){.fgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){
  .buscar-split{grid-template-columns:1fr}
  .buscar-mapa{position:relative;height:clamp(280px,46vh,420px);margin-top:62px}
  .buscar-lista{padding-top:22px}
  .fgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:640px){
  .fgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fila{grid-template-columns:1fr}
  .fila-foto{min-height:0;aspect-ratio:4/3}
}


/* ═══ 30/10/26 · Buscador: mapa más estrecho, panel de búsqueda más grande, iconos y «Búsqueda avanzada» desplegable ═══
   Nacho: «reduce un poco el mapa y amplía el buscador y ponle iconos a los desplegables… también estaría bien no tener
   tantos desplegables y tener una línea separadora horizontal que se pueda desplegar que ponga búsqueda avanzada».
   Cuatro desplegables a la vista (comprar/alquilar, tipo, provincia, municipio) y el resto dentro de un <details> cuyo
   «título» es una línea horizontal con el rótulo en medio. Si hay algún filtro avanzado puesto, queda abierto. ═══════ */
.buscar-split{grid-template-columns:minmax(280px,34%) minmax(0,1fr)}
.buscar-lista{padding-inline:clamp(20px,3.4vw,56px)}
.filtros-v{background:var(--papel);border:1px solid var(--linea-suave);border-radius:14px;padding:clamp(16px,1.8vw,24px);
  box-shadow:0 20px 56px -38px rgba(16,26,46,.5)}
.fbasica{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) auto;gap:12px;align-items:stretch}
.fsel{position:relative}
.fsel select,.fsel input{height:54px;font-size:15.5px;padding-left:46px;padding-right:36px;border-radius:9px}
.fsel input{padding-right:12px}
.fsel .fi{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:var(--oro);pointer-events:none;
  transition:color .2s}
.fsel:hover .fi,.fsel:focus-within .fi{color:var(--noche)}
.fsel select{background-position:calc(100% - 20px) 50%,calc(100% - 15px) 50%}
.fbuscar{height:54px;padding:0 30px;border:0;border-radius:9px;background:var(--noche);color:#fff;font:inherit;font-size:13px;
  letter-spacing:.16em;text-transform:uppercase;cursor:pointer;transition:background .25s}
.fbuscar:hover{background:var(--oro)}

/* La línea horizontal que despliega la búsqueda avanzada */
.avanzada{margin-top:14px}
.avanzada summary{display:flex;align-items:center;gap:16px;list-style:none;cursor:pointer;user-select:none;padding:6px 0}
.avanzada summary::-webkit-details-marker{display:none}
.avanzada summary::before,.avanzada summary::after{content:'';flex:1;height:1px;background:var(--linea);transition:background .2s}
.avanzada summary:hover::before,.avanzada summary:hover::after{background:var(--oro)}
.avanzada .etq{display:inline-flex;align-items:center;gap:9px;padding:7px 16px;border:1px solid var(--linea);border-radius:999px;
  font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-2);background:var(--papel);transition:border-color .2s,color .2s}
.avanzada summary:hover .etq,.avanzada[open] .etq{border-color:var(--oro);color:var(--tinta)}
.avanzada .etq b{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--noche);
  color:#fff;font-size:11.5px;letter-spacing:0}
.avanzada .flecha{transition:transform .25s}
.avanzada[open] .flecha{transform:rotate(180deg)}
.avanzada summary:focus-visible .etq{outline:2px solid var(--oro);outline-offset:2px}
.avanzada .fgrid{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:16px}
.facciones{margin:12px 2px 0}
.buscar-h1{margin-top:34px}

@media (max-width:1300px){.fbasica{grid-template-columns:repeat(2,minmax(0,1fr))}.fbuscar{grid-column:1 / -1}}
@media (max-width:1180px){.avanzada .fgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){
  .buscar-split{grid-template-columns:1fr}
  .fbasica{grid-template-columns:repeat(2,minmax(0,1fr))}
  .avanzada .fgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:480px){
  .fbasica,.avanzada .fgrid{grid-template-columns:1fr}
}

/* Ajustes del buscador: columnas con más sitio para «Tipo de vivienda», rótulos que no se cortan y una sola línea en el pie de la tarjeta */
.fbasica{grid-template-columns:1fr 1.32fr 1fr 1fr auto}
.fsel select,.fsel input{font-size:15px;padding-left:44px;padding-right:30px}
.fsel select{background-position:calc(100% - 17px) 50%,calc(100% - 12px) 50%}
.fbuscar{padding:0 24px}
.fila-pie .rasgos{border:0;padding:0;margin:0}
@media (max-width:1440px){
  /* Dos filas de desplegables y el botón a la derecha, ocupando las dos filas */
  .fbasica{grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto}
  .fbuscar{grid-column:3;grid-row:1 / span 2;height:auto;padding:0 26px}
}
@media (max-width:480px){
  .fbasica{grid-template-columns:1fr}
  .fbuscar{grid-column:1;grid-row:auto;height:54px}
}

/* Sin el círculo (la pastilla con borde) alrededor de «Búsqueda avanzada»: solo la línea y el texto (Nacho, 30/10/26) */
.avanzada .etq{border:0;background:none;padding:6px 4px;border-radius:0}
.avanzada summary:hover .etq,.avanzada[open] .etq{border:0;color:var(--tinta)}
.avanzada summary:hover .flecha,.avanzada[open] .flecha{color:var(--oro)}

/* Scroll infinito: el indicador de debajo de la lista */
.lista-estado{min-height:56px;display:flex;align-items:center;justify-content:center;margin-top:8px;font-size:13.5px;color:var(--apagado);letter-spacing:.04em}
.lista-estado.cargando::before{content:'';width:18px;height:18px;margin-right:10px;border-radius:50%;border:2px solid var(--linea);border-top-color:var(--oro);
  animation:giro .8s linear infinite}
.lista-estado.fin{padding-top:14px;border-top:1px solid var(--linea-suave);margin-top:22px}
.lista-estado.error button{border:1px solid var(--linea);background:var(--papel);color:var(--tinta);font:inherit;font-size:13.5px;padding:10px 18px;border-radius:999px;cursor:pointer}
.lista-estado.error button:hover{border-color:var(--oro)}
@keyframes giro{to{transform:rotate(360deg)}}
.paginas[hidden]{display:none!important}


/* ═══ 30/10/26 · «Vender» con el mismo diseño que el resto de la web ═════════════════════════════════════════
   Nacho: «esa página no tiene el diseño del resto». Cabecera con foto grande (la misma pieza que las fichas: el menú
   también pasa de azul a blanco al salir de ella), los cuatro pasos como tarjetas, y el formulario en tres tarjetas con los
   mismos campos que el buscador (54 px, esquinas de 9 px, aro dorado al enfocar) y el mismo botón. ══════════════════ */
body.interior main>section.vender-hero:first-child{padding-top:0;margin-top:62px}
.vender-hero{min-height:clamp(300px,44vh,440px)}
.vender-hero .hero-vel{background:linear-gradient(180deg,rgba(13,23,48,.60) 0%,rgba(13,23,48,.52) 42%,rgba(13,23,48,.88) 100%)}
.vender-hero .hero-pie h1{max-width:20ch}
.vender-hero .hero-sub{max-width:64ch;line-height:1.6;margin-bottom:0}
.hero-rotulo{display:flex;align-items:center;gap:12px;margin:0 0 12px;font-size:12px;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--oro-claro)}
.hero-rotulo::before{content:'';width:30px;height:2px;background:var(--oro-claro)}

.vender-pasos{padding-block:clamp(22px,3.4vh,36px) 0}
.vender-pasos ul.pasos{margin:0;gap:16px;background:none;grid-template-columns:repeat(4,minmax(0,1fr))}
.vender-pasos ul.pasos li{background:var(--papel);border:1px solid var(--linea-suave);border-radius:12px;padding:20px 20px 22px;
  box-shadow:0 16px 44px -36px rgba(16,26,46,.5);align-items:flex-start;gap:14px}
.vender-pasos ul.pasos span{width:32px;height:32px;font-size:13.5px;box-shadow:0 0 0 4px rgba(13,23,48,.08)}
.vender-pasos ul.pasos b{font-size:16px}
.vender-pasos ul.pasos p{font-size:14px;color:var(--tinta-2);margin-top:2px}

.vender-form{max-width:var(--ancho);padding-block:clamp(26px,4vh,40px) clamp(60px,9vh,110px)}
.vender-form form{max-width:980px;margin-inline:auto}
.vender-form fieldset{background:var(--papel);border:1px solid var(--linea-suave);border-radius:14px;margin:0 0 22px;
  padding:clamp(20px,2.6vw,32px);box-shadow:0 22px 60px -42px rgba(16,26,46,.5)}
.vender-form fieldset:first-of-type{padding-top:clamp(20px,2.6vw,32px)}
.vender-form legend{float:left;width:100%;padding:0;margin:0 0 20px;font-size:clamp(19px,1.8vw,22px);font-weight:600;gap:14px}
.vender-form legend+*{clear:both}
.vender-form legend .n{width:32px;height:32px;font-size:14px;background:#FBF6EC;background:rgba(176,141,87,.10)}
.pista-fs{margin:-6px 0 18px 46px}
.vender-form .rej{gap:16px 18px}
.vender-form .et{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:7px}
.vender-form input,.vender-form select{height:54px;padding:0 14px;border-radius:9px;font-size:15.5px}
.vender-form textarea{padding:14px;border-radius:9px;font-size:15.5px}
.vender-form select{appearance:none;-webkit-appearance:none;padding-right:36px;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--apagado) 50%),linear-gradient(135deg,var(--apagado) 50%,transparent 50%);
  background-position:calc(100% - 20px) 50%,calc(100% - 15px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.vender-form input:hover,.vender-form select:hover,.vender-form textarea:hover{border-color:#c9cdd6}
.vender-form input:focus,.vender-form select:focus,.vender-form textarea:focus{border-color:var(--oro);box-shadow:0 0 0 3px rgba(176,141,87,.18)}
.vender-form .acepto input{height:18px;width:18px;border-radius:4px;padding:0}
.acepto{padding:14px 16px;background:var(--fondo-2);border-radius:9px;margin-top:14px}
.letra-clara{padding-left:2px;margin-top:12px}
.enviar{margin-top:22px}
.vender-form .boton-oscuro{height:56px;padding:0 40px;border-radius:9px;font-size:13px}
.aviso-form{border-radius:9px;background:var(--fondo-2)}

@media (max-width:1000px){.vender-pasos ul.pasos{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){
  .vender-pasos ul.pasos{grid-template-columns:1fr}
  .vender-hero{min-height:300px}
  .pista-fs{margin-left:0}
}

/* «Vender»: formulario a la izquierda y, a la derecha, la tarjeta fija «Cómo funciona» con los cuatro pasos (como en las fichas) */
.vender-dos{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:clamp(22px,3vw,40px);align-items:start;
  padding-block:clamp(26px,4vh,40px) clamp(60px,9vh,110px)}
.vender-dos .vender-form{padding:0;max-width:none;min-width:0}
.vender-dos .vender-form form{max-width:none}
.vender-lado{position:sticky;top:88px}
.vender-lado ul.pasos{margin:0;display:flex;flex-direction:column;gap:0;background:none}
.vender-lado ul.pasos li{background:none;padding:14px 0;border-bottom:1px solid var(--linea-suave);display:flex;gap:14px;align-items:flex-start}
.vender-lado ul.pasos li:last-child{border-bottom:0;padding-bottom:0}
.vender-lado ul.pasos span{width:30px;height:30px;font-size:13px;box-shadow:0 0 0 4px rgba(13,23,48,.08);flex:0 0 auto}
.vender-lado ul.pasos b{font-size:15.5px}
.vender-lado ul.pasos p{font-size:13.5px;color:var(--tinta-2);margin-top:2px}
@media (max-width:1000px){
  .vender-dos{grid-template-columns:1fr}
  .vender-lado{position:static;order:-1}
  .vender-lado.lado-despues{order:0}
}

/* ═══ Desplegable de idiomas legible con la barra pegada (30/10/26, Nacho: «los idiomas no se ven») ═══
   🪤 El panel del desplegable es BLANCO, pero `.cab.pegada nav a{color:var(--c-texto)}` (el menú que se funde del azul al blanco)
   pinta de blanco TODOS los enlaces del <nav>, también los del desplegable: texto blanco sobre panel blanco, y no se veía ningún
   idioma. Las opciones llevan texto oscuro pase lo que pase con la barra; el menú móvil abierto (fondo azul, texto blanco) queda
   fuera con `:not(.abierto)`. Y el «ES» de la píldora salía apagado porque `.idiomas span{opacity:.35}` (pensado para el viejo
   «ES | EN») le llegaba también. */
.cab nav:not(.abierto) .idiomas-sel li a,
.cab.pegada nav:not(.abierto) .idiomas-sel li a,
.portada.oscura .cab.pegada nav:not(.abierto) .idiomas-sel li a,
.portada.oscura .cab:not(.pegada) nav:not(.abierto) .idiomas-sel li a{
  color:var(--tinta);opacity:1;text-shadow:none;font-size:14.5px;font-weight:400;letter-spacing:0;padding:9px 12px;border-bottom:0}
.cab nav:not(.abierto) .idiomas-sel li a:hover,
.cab.pegada nav:not(.abierto) .idiomas-sel li a:hover,
.portada.oscura .cab.pegada nav:not(.abierto) .idiomas-sel li a:hover,
.portada.oscura .cab:not(.pegada) nav:not(.abierto) .idiomas-sel li a:hover{background:var(--fondo-2);color:var(--tinta);opacity:1;border-bottom:0}
.cab nav:not(.abierto) .idiomas-sel li a[aria-current="true"],
.cab.pegada nav:not(.abierto) .idiomas-sel li a[aria-current="true"],
.portada.oscura .cab.pegada nav:not(.abierto) .idiomas-sel li a[aria-current="true"],
.portada.oscura .cab:not(.pegada) nav:not(.abierto) .idiomas-sel li a[aria-current="true"]{color:var(--oro);font-weight:600}
.idiomas-sel .cod{opacity:1}

/* ── 07/11/26 · cambios pedidos por el cliente ──────────────────────────────────────────────
   · Dos de las cifras de la portada ya no son números («todos los trámites», «varios idiomas»):
     llevan una marca dorada en el hueco del número.
   · Precios SIN impuestos: coletilla en bloque bajo cada precio (tarjetas y caja de la ficha).
   · Texto informativo y de precios (Ley 10/2025) debajo de la descripción de cada ficha. */
.cifra b.si{color:var(--oro)}
.cifra b.si svg{width:.82em;height:.82em;vertical-align:-.06em}
.sin-imp{display:block;font-family:'Jost',-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  font-size:10.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--apagado);
  line-height:1.3;margin-top:3px}
.caja-precio .sin-imp{font-size:11.5px;margin:4px 0 12px}
.aviso-inmueble{margin-top:22px;padding-top:18px;border-top:1px solid var(--linea);
  font-size:12.5px;line-height:1.65;color:var(--apagado);max-width:72ch}
.aviso-inmueble h3{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-2);
  margin:0 0 10px;font-weight:600}
.aviso-inmueble p{margin:0 0 10px}
.aviso-inmueble .traduccion-legal{font-style:italic}
/* 07/11/26 · documentos PDF en la ficha pública */
.docs-f ul{list-style:none;margin:0;padding:0}
.docs-f li{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--linea-suave);font-size:14px}
.docs-f li:last-child{border-bottom:0}
.docs-f a{color:var(--tinta);text-decoration:none;font-weight:500;display:flex;align-items:center;gap:8px;min-width:0}
.docs-f a svg{flex:none;color:var(--oro)}
.docs-f a:hover{text-decoration:underline}
.docs-f small{color:var(--apagado);margin-left:auto;white-space:nowrap;font-size:12px}