/* Trasteros Urbión 14 · estilos. Los del prototipo v2 con el diseño de Cowork (portada oscura,
   apartados numerados, bandas y movimiento), que es la referencia.
   Cambios respecto al prototipo, marcados con «arreglo»: contraste AA del plano y de los
   estados apagados, objetivo táctil del plano en móvil, rótulo «nº» de las tarjetas,
   fotos servidas con <picture>, el aviso legal, el formulario y que la página se vea entera
   aunque el JavaScript no llegue a cargar. */
:root{
 --tinta:#0F172A; --tinta2:#44536A; --tinta3:#5A6880;
 --papel:#F4F7F9; --blanco:#fff; --borde:#DBE3EA; --suave:#E9EFF4;
 --acento:#0E7C4A; --acento-osc:#0A5C37; --acento-suave:#E4F3EB; --acento-claro:#3DD68C;
 --oscuro:#111C30; --sobre-oscuro:#C6D2E0;
 --r:10px; --rs:8px; --ancho:1180px;
 --sombra:0 1px 2px rgba(15,23,42,.05),0 10px 28px -18px rgba(15,23,42,.28);
 --tipo:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
 color-scheme:light;
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
.p-vta{display:none}
body.modo-vta .p-alq{display:none}
body.modo-vta .p-vta{display:inline}
html{-webkit-text-size-adjust:100%}
body{font:400 17px/1.6 var(--tipo);color:var(--tinta);background:var(--papel);
 -webkit-font-smoothing:antialiased;padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))}
img{max-width:100%;display:block}
h1,h2,h3{line-height:1.15;font-weight:650;letter-spacing:-.02em}
h1{font-size:clamp(30px,6.4vw,50px)}
h2{font-size:clamp(24px,4.4vw,34px)}
h3{font-size:19px;letter-spacing:-.01em}
a{color:inherit}
button{font:inherit;color:inherit}
.env{max-width:var(--ancho);margin:0 auto;padding:0 20px}
.eyebrow{font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--acento);
 font-weight:600}
.lead a{color:var(--acento);font-weight:600}
.lead{color:var(--tinta2);font-size:clamp(16px,2.4vw,19px);margin-top:14px;max-width:46ch}
.nota{font-size:13.5px;color:var(--tinta3);line-height:1.55}
:focus-visible{outline:3px solid var(--acento);outline-offset:2px;border-radius:4px}

/* ── botones ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:50px;
 padding:13px 22px;border-radius:var(--rs);border:1.5px solid transparent;text-decoration:none;
 font-weight:600;font-size:16px;cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.btn svg{width:19px;height:19px;flex:none}
.btn-1{background:var(--acento);color:#fff}
.btn-1:hover{background:var(--acento-osc)}
.btn-2{background:var(--blanco);border-color:var(--borde);color:var(--tinta)}
.btn-2:hover{border-color:var(--tinta3)}

/* ── cabecera: oscura, se encoge al bajar y marca en qué apartado estás ── */
.cab{position:sticky;top:0;z-index:50;background:var(--oscuro);color:#fff;
 border-bottom:1px solid transparent;transition:box-shadow .25s ease,border-color .25s ease}
.cab .env{display:flex;align-items:center;gap:16px;height:68px;transition:height .25s ease}
.cab.fijada{border-bottom-color:rgba(255,255,255,.12);box-shadow:0 8px 24px -16px rgba(0,0,0,.7)}
.cab.fijada .env{height:56px}
/* barra fina que va marcando cuánto se lleva recorrido de la página */
.avance{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--acento-claro);
 transform-origin:0 50%;transform:scaleX(var(--avance,0));pointer-events:none}
.logo{display:flex;align-items:center;gap:8px;text-decoration:none;font-weight:700;font-size:18.5px;
 letter-spacing:-.015em;min-height:44px;color:#fff}
.logo .n{font-weight:700;color:#fff}
.logo b{color:var(--acento-claro)}
.logo .s{font-weight:400;font-size:12.5px;color:#93A3B8;letter-spacing:.02em;
 border-left:1px solid rgba(255,255,255,.18);padding-left:9px;margin-left:3px}
.cab nav{margin-left:auto;display:flex;gap:2px}
.cab nav a{position:relative;text-decoration:none;font-size:14.5px;color:var(--sobre-oscuro);padding:12px 13px;
 border-radius:6px;min-height:44px;display:inline-flex;align-items:center}
.cab nav a:hover{background:rgba(255,255,255,.09);color:#fff}
.cab nav a.aqui{color:#fff;background:rgba(255,255,255,.13);font-weight:600}
.cab nav a.aqui:after{content:"";position:absolute;left:13px;right:13px;bottom:6px;height:2px;
 background:var(--acento-claro);border-radius:2px}
.cab .tel{margin-left:14px;background:var(--acento);color:#fff;border:0;font-size:15.5px;
 font-weight:650;padding:11px 18px;min-height:44px;border-radius:999px}
/* arreglo: el verde claro del hover dejaba el texto blanco en 3,3:1 */
.cab .tel:hover{background:var(--acento-osc);color:#fff}
.cab .tel svg{width:18px;height:18px}
@media(max-width:899px){.cab nav:not(.menu-lista){display:none}.cab .tel{margin-left:auto}}
@media(max-width:400px){.logo .s{display:none}.cab .tel{font-size:14.5px;padding:11px 14px}}

/* menú de secciones del móvil: el botón ≡ de la cabecera y la lista que despliega */
.menu{position:relative;margin-left:10px;flex:none}
.menu summary{list-style:none;display:grid;place-items:center;width:44px;height:44px;border-radius:12px;
 background:rgba(255,255,255,.12);color:#fff;cursor:pointer;-webkit-tap-highlight-color:transparent}
.menu summary::-webkit-details-marker{display:none}
.menu summary svg{width:23px;height:23px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.menu summary:hover,.menu[open] summary{background:rgba(255,255,255,.22)}
.menu summary:focus-visible{outline:2px solid #fff;outline-offset:2px}
.menu-lista{position:absolute;right:0;top:calc(100% + 12px);min-width:212px;z-index:70;
 background:var(--oscuro);border:1px solid rgba(255,255,255,.18);border-radius:14px;padding:6px;
 box-shadow:0 20px 44px -18px rgba(0,0,0,.95);display:flex;flex-direction:column}
.menu-lista a{display:flex;align-items:center;min-height:46px;padding:0 14px;border-radius:10px;
 color:var(--sobre-oscuro);text-decoration:none;font-size:15.5px}
.menu-lista a:hover{background:rgba(255,255,255,.1);color:#fff}
.menu-lista a.aqui{background:rgba(255,255,255,.15);color:#fff;font-weight:600}
@media(min-width:900px){.menu{display:none}}
@media(max-width:420px){.cab .tel .num{display:none}.cab .tel{padding:11px 13px}}

/* ── barra fija de móvil ── */
.barra{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;gap:10px;
 padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));
 background:var(--papel);border-top:1px solid var(--borde)}
.barra .btn{flex:1;margin:0;font-size:15px;white-space:nowrap;padding:13px 12px}
.barra .btn-1{flex:1.9}
@media(min-width:900px){.barra{display:none}body{padding-bottom:0}}
/* arreglo móvil en horizontal: con tan poca altura, la barra se quita (el WhatsApp sigue arriba) */
@media(max-height:500px) and (orientation:landscape) and (max-width:899px){
 .barra{display:none}body{padding-bottom:0}.cab .env,.cab.fijada .env{height:54px}
}

/* ── portada: banda oscura a sangre completa ── */
.hero{position:relative;background:var(--oscuro);color:#fff;overflow:hidden;isolation:isolate;
 padding:clamp(48px,9vw,96px) 0 clamp(48px,8vw,84px)}
.hero-fondo{position:absolute;inset:0;z-index:-1;pointer-events:none}
/* arreglo: la foto va como <picture> optimizada y solo si existe (en el prototipo era un fondo CSS que daba 404) */
.hero-foto{position:absolute;inset:-8% 0;background:#0B1424;opacity:.38;will-change:transform}
.hero-foto picture,.hero-foto img{display:block;width:100%;height:100%;object-fit:cover}
.hero-plano{position:absolute;top:50%;right:-5%;width:min(58%,720px);transform:translateY(-50%);opacity:.55}
.hero-velo{position:absolute;inset:0;background:
 linear-gradient(97deg,#111C30 6%,rgba(17,28,48,.94) 40%,rgba(17,28,48,.55) 100%)}
@media(max-width:899px){
 .hero-plano{right:-42%;top:auto;bottom:-10%;width:150%;transform:none;opacity:.2}
 .hero-velo{background:linear-gradient(175deg,#111C30 22%,rgba(17,28,48,.9) 62%,rgba(17,28,48,.75) 100%)}
}
.hero-cu{position:relative}
.hero .eyebrow{color:var(--acento-claro)}
.hero h1{font-size:clamp(33px,6vw,60px);letter-spacing:-.03em;margin-top:13px;line-height:1.08}
/* arreglo: en móvil el salto forzado dejaba «llave,» sola en una línea */
@media(max-width:699px){.hero h1 br{display:none}}
.hero .lead{color:#C2D0E0;max-width:44ch;margin-top:16px}
.cifras{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;
 gap:clamp(22px,5vw,56px);margin:clamp(26px,4vw,38px) 0 4px}
.cifras b{display:block;font-size:clamp(27px,4.4vw,42px);font-weight:650;letter-spacing:-.03em;
 line-height:1;font-variant-numeric:tabular-nums}
/* arreglo: el guion quedaba pegado a las cifras y parecía un tachado */
.cifras i{font-style:normal;opacity:.45;margin:0 .14em}
.cifras>div>span{display:block;font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;
 color:#8FA0B6;margin-top:10px;font-weight:600}
@media(max-width:560px){.cifras{grid-template-columns:auto auto;gap:20px 26px}}
.modo{display:inline-flex;background:var(--suave);border:1px solid var(--borde);
 border-radius:var(--rs);padding:3px;margin:clamp(22px,3.4vw,30px) 0 clamp(18px,2.6vw,24px)}
.modo button{border:0;background:none;padding:11px 22px;border-radius:6px;font-weight:600;
 font-size:15px;cursor:pointer;color:var(--tinta2);min-height:44px}
.modo button[aria-pressed=true]{background:var(--blanco);color:var(--tinta);
 box-shadow:0 1px 2px rgba(15,23,42,.10)}
.hero .modo{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.2)}
.hero .modo button{color:#C2D0E0}
.hero .modo button[aria-pressed=true]{background:#fff;color:var(--oscuro);box-shadow:none}
.btn-claro{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.3)}
.btn-claro:hover{background:rgba(255,255,255,.2);color:#fff}
.acc{display:flex;flex-wrap:wrap;gap:12px}

/* ── banda de ventajas, cosida bajo la portada ── */
.ventajas-banda{background:var(--blanco);border-bottom:1px solid var(--borde);
 padding:clamp(20px,3vw,26px) 0}
.vent{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;list-style:none}
@media(min-width:620px){.vent{grid-template-columns:repeat(4,1fr);gap:14px}}
.vent li{background:var(--papel);border:1px solid var(--borde);border-radius:var(--rs);
 padding:14px;display:flex;flex-direction:column;gap:8px}
.vent li>div{display:flex;flex-direction:column;gap:3px;min-width:0}
@media(min-width:900px){.vent li{flex-direction:row;align-items:flex-start;gap:13px;padding:15px 17px}}
.vent svg{width:22px;height:22px;stroke:var(--acento);fill:none;stroke-width:1.6;
 stroke-linecap:round;stroke-linejoin:round;flex:none}
.vent b{font-size:14.5px;font-weight:650;line-height:1.3}
.vent span{font-size:12.5px;color:var(--tinta3);line-height:1.4}

/* ── tarjeta de escala ── */
.escala{background:var(--blanco);border:1px solid var(--borde);border-radius:var(--r);
 padding:20px;margin-bottom:18px}
/* las dos columnas TIENEN que medir lo mismo: si no, los dibujos dejan de estar a la misma
   escala y el pie de foto miente (con 1fr 1.7fr el grande salía 4,09 veces el pequeño y no 2,40) */
.escala-g{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,3vw,34px);
 align-items:end;max-width:660px;margin:0 auto}
.escala figcaption{font-size:12.5px;color:var(--tinta3);margin-top:6px;text-align:center;line-height:1.45}
.escala .tit{font-size:13px;font-weight:650;color:var(--tinta2);margin-bottom:14px}

/* ── el plano de fondo de la portada ── */
.plano.hero{width:100%;height:auto;display:block}
.plano.hero .local{fill:none;stroke:var(--acento-claro);stroke-width:5;opacity:.85}
.plano.hero .patio,.plano.hero .comun{fill:none;stroke:rgba(255,255,255,.22);stroke-width:2.5}
.plano.hero .sw path{stroke:rgba(255,255,255,.18)}
.plano.hero .ud rect{fill:rgba(255,255,255,.07);stroke:rgba(255,255,255,.45);stroke-width:2.5}
.plano.hero .ud.libre rect{fill:rgba(61,214,140,.16);stroke:var(--acento-claro)}

/* ── dibujos a escala ── */
.dib{width:100%;height:auto;display:block;overflow:visible}
.dib .suelo{fill:var(--suave)}
.dib .muro{fill:none;stroke:var(--tinta);stroke-width:6;stroke-linecap:square}
.dib .barrido{fill:none;stroke:var(--tinta3);stroke-width:2;stroke-dasharray:7 6;opacity:.65}
.dib .cota line{stroke:var(--acento);stroke-width:2}
.dib .cota line.ref{stroke:var(--tinta3);stroke-width:1.5;stroke-dasharray:5 5}
.dib .cota text{font:650 21px var(--tipo);fill:var(--acento-osc);text-anchor:middle}
.dib.ancho .cota text{font-size:44px}
.dib.ancho .cota line{stroke-width:4}
.dib.ancho .muro{stroke-width:9}

/* ── secciones: apartados numerados ── */
section{padding:46px 0}
@media(min-width:900px){section{padding:66px 0}}
.sec-cab{margin-bottom:26px;max-width:56ch}
.capitulo{display:flex;align-items:center;gap:13px;margin-bottom:15px;
 font-size:12.5px;font-weight:700;letter-spacing:.15em;color:var(--acento);
 font-variant-numeric:tabular-nums}
/* arreglo: sin JavaScript la raya se ve entera; solo con movimiento empieza en 0 y se traza */
.capitulo em{display:block;height:2px;width:52px;background:var(--acento);border-radius:2px;
 transition:width .75s cubic-bezier(.2,.7,.3,1) .12s}
.sec-cab p{color:var(--tinta2);margin-top:10px;font-size:16px}

/* ── selector de tamaño ── */
.tramos{display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:620px){.tramos{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.tramos{grid-template-columns:repeat(4,1fr)}}
.tramo{background:var(--blanco);border:1px solid var(--borde);border-radius:var(--r);padding:0 0 16px;
 display:flex;flex-direction:column;gap:9px;text-align:left;cursor:pointer;overflow:hidden;
 transition:border-color .15s,box-shadow .15s}
.tramo>:not(.marco){margin:0 16px}
/* arreglo: marco vertical, como la mayoría de fotos de interior; con tope de altura para el móvil */
.tramo .marco{width:100%;aspect-ratio:3/4;max-height:380px;margin-bottom:6px}
/* en las tarjetas de tamaño la foto llena el marco: las verticales ya tienen su forma exacta y no
   pierden nada; la apaisada (extra grande) se recorta por los lados en vez de quedarse con franjas,
   para que las cuatro tarjetas se vean iguales. La foto entera sigue estando en la ficha */
.tramo .marco picture:not(.fondo) img{object-fit:cover}
.tramo .marco .fondo{display:none}
/* la de extra grande es la única apaisada: se encuadra un poco a la izquierda para que se vea
   entero el número del trastero, como en las otras tres */
.tramo .marco img[src*="extra-grande"]{object-position:35% center}
.tramo:hover{border-color:var(--acento);box-shadow:var(--sombra)}
.tramo .t3{font-size:19px;font-weight:650;letter-spacing:-.01em;display:block}
.tramo .rango,.tramo .eq{display:block}
.tramo .rango{font-size:13px;color:var(--tinta3)}
.tramo .eq{font-size:14px;color:var(--tinta2);line-height:1.45;flex:1}
.tramo .pie{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
 border-top:1px solid var(--suave);padding-top:11px;margin-top:2px}
.tramo .pie b{font-size:16px;font-weight:650;white-space:nowrap}
.tramo .pie>span{font-size:13.5px;color:var(--acento);font-weight:600;white-space:nowrap}
/* arreglo: el tramo agotado iba con opacity .5, que dejaba el texto por debajo de AA */
.tramo[disabled]{cursor:default;background:var(--papel);padding-top:16px}
.tramo[disabled]:hover{border-color:var(--borde);box-shadow:none}
.tramo[disabled] .t3,.tramo[disabled] .eq{color:var(--tinta3)}

/* ── barra de filtros ── */
.filtros{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:8px}
.chip{background:var(--blanco);border:1px solid var(--borde);border-radius:999px;padding:10px 16px;
 font-size:14.5px;cursor:pointer;min-height:44px}
.chip:hover{border-color:var(--tinta3)}
.chip[aria-pressed=true]{background:var(--tinta);color:#fff;border-color:var(--tinta)}
.orden{margin-left:auto;display:flex;align-items:center;gap:8px;font-size:14px;color:var(--tinta2)}
@media(max-width:700px){
 .chip{padding:10px 13px;font-size:14px}
 .orden{margin-left:0;width:100%;margin-top:4px}
 .orden select{flex:1}
}
.orden select{font:inherit;font-size:14.5px;padding:10px 12px;min-height:44px;border-radius:var(--rs);
 border:1px solid var(--borde);background:var(--blanco);color:var(--tinta)}
.cuenta{font-size:14px;color:var(--tinta3);margin:14px 0 18px}

/* ── rejilla de trasteros ── */
.rej{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.tj{background:var(--blanco);border:1px solid var(--borde);border-radius:var(--r);overflow:hidden;
 display:flex;flex-direction:column;text-align:left;cursor:pointer;padding:0;
 transition:border-color .15s,box-shadow .15s,transform .15s}
.tj:hover{border-color:var(--acento);box-shadow:var(--sombra);transform:translateY(-2px)}
/* arreglo: 34 px arriba para que la planta de los mayores no pise el «nº» */
.tj .lienzo{background:var(--papel);padding:34px 14px 10px;border-bottom:1px solid var(--suave);
 position:relative}
.tj .num{position:absolute;top:10px;left:12px;font-size:13px;font-weight:700;color:var(--tinta3)}
.tj .cu{padding:14px 16px 16px;display:flex;flex-direction:column;gap:4px;flex:1}
.tj .med{font-size:14px;color:var(--tinta2)}
.tj .m2{font-size:19px;font-weight:650;letter-spacing:-.01em}
.tj .cap{font-size:13px;color:var(--tinta3);margin-top:2px}
.tj .precio{margin-top:auto;padding-top:12px;display:flex;align-items:baseline;gap:6px}
.tj .precio b{font-size:24px;font-weight:650;letter-spacing:-.02em}
.tj .precio span{font-size:14px;color:var(--tinta3)}
.tj .ver{background:none;border:0;padding:11px 0 1px;text-align:left;cursor:pointer;
 color:var(--acento);font-weight:600;font-size:14px;margin-top:6px;min-height:44px;
 display:inline-flex;align-items:center}
.tj .ver:hover{text-decoration:underline}
/* arreglo móvil: en pantallas estrechas cada disponible es una fila, planta a la izquierda y datos a
   la derecha. La lista ocupa la mitad y las plantas siguen todas a la misma escala entre sí */
@media(max-width:599px){
 .rej{grid-template-columns:1fr;gap:10px}
 .tj{display:grid;grid-template-columns:118px 1fr}
 .tj:hover{transform:none}
 .tj .lienzo{padding:24px 8px 8px;border-bottom:0;border-right:1px solid var(--suave);display:flex;align-items:center}
 .tj .num{top:6px;left:9px;font-size:12px}
 .tj .cu{padding:10px 14px 2px;gap:1px}
 .tj .m2{font-size:17px}
 .tj .med{font-size:13px}
 .tj .cap{font-size:12.5px;margin-top:0}
 .tj .precio{padding-top:4px}
 .tj .precio b{font-size:21px}
 .tj .ver{padding:0;font-size:13.5px;margin-top:0}
}

/* ── ficha ── */
.velo{position:fixed;inset:0;z-index:100;background:rgba(28,25,23,.45);display:none;
 align-items:flex-end;justify-content:center;backdrop-filter:blur(2px)}
.velo.abierto{display:flex}
@media(min-width:760px){.velo{align-items:center;padding:24px}}
.ficha{background:var(--papel);width:100%;max-width:760px;max-height:92vh;overflow:auto;
 border-radius:20px 20px 0 0;padding:0 0 calc(20px + env(safe-area-inset-bottom,0px))}
@media(min-width:760px){.ficha{border-radius:var(--r);max-height:88vh}}
.fi-cab{position:sticky;top:0;background:var(--papel);display:flex;align-items:center;gap:14px;
 padding:18px 20px 14px;border-bottom:1px solid var(--borde);z-index:2}
.fi-cab h2{font-size:22px;flex:1}
.fi-cab .et{font-size:15px;font-weight:700;color:var(--acento-osc);background:var(--acento-suave);
 padding:7px 13px;border-radius:999px;white-space:nowrap}
.cerrar{width:44px;height:44px;border-radius:50%;border:1px solid var(--borde);background:var(--blanco);
 cursor:pointer;font-size:20px;line-height:1;display:grid;place-items:center}
.fi-cu{padding:20px}
.fi-dib{background:var(--blanco);border:1px solid var(--borde);border-radius:var(--r);padding:18px 20px 12px;
 margin-top:14px}
.fi-dib figcaption{font-size:12.5px;color:var(--tinta3);text-align:center;margin-top:8px}
.fi-foto{background:var(--blanco);border:1px solid var(--borde);border-radius:var(--r);overflow:hidden}
/* width:100% hace falta: con aspect-ratio, el tope de altura estrecharía también el marco */
.fi-foto .marco{width:100%;aspect-ratio:3/4;max-height:min(58vh,440px)}
.fi-foto figcaption{font-size:13px;color:var(--tinta2);padding:12px 14px}
.fi-foto figcaption b{font-weight:650}
/* carrusel de fotos de la ficha: deslizable con el dedo (scroll-snap) y con flechas */
.fi-galeria{position:relative}
.fi-carrusel{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
 scrollbar-width:none;border-bottom:1px solid var(--borde)}
.fi-carrusel::-webkit-scrollbar{display:none}
.fi-slide{flex:0 0 100%;min-width:0;scroll-snap-align:start;scroll-snap-stop:always}
.fi-slide .marco{border-bottom:0}
.fi-flecha{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;
 border:0;background:rgba(255,255,255,.94);color:var(--tinta);box-shadow:0 2px 12px rgba(15,23,42,.28);
 display:grid;place-items:center;cursor:pointer;transition:opacity .15s}
.fi-flecha svg{width:22px;height:22px}
.fi-flecha:hover{background:#fff}
.fi-flecha.ant{left:10px}
.fi-flecha.sig{right:10px}
.fi-flecha[disabled]{opacity:0;pointer-events:none}
.fi-cuenta{position:absolute;right:10px;bottom:10px;background:rgba(17,28,48,.8);color:#fff;
 font-size:13px;font-weight:600;padding:3px 10px;border-radius:999px;pointer-events:none;
 font-variant-numeric:tabular-nums}
.datos{list-style:none;margin:18px 0 0;border:1px solid var(--borde);border-radius:var(--r);
 background:var(--blanco);overflow:hidden}
.datos li{display:flex;justify-content:space-between;gap:16px;padding:13px 16px;font-size:15px;
 border-bottom:1px solid var(--suave)}
.datos li:last-child{border-bottom:0}
.datos span{color:var(--tinta2)}
.datos b{font-weight:600;text-align:right}
.fi-pr{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-end;margin:20px 0 4px}
.fi-pr .p1 b{font-size:34px;font-weight:650;letter-spacing:-.02em;display:block;line-height:1.05}
.fi-pr .p1 span,.fi-pr .p2{font-size:14px;color:var(--tinta3)}
.fi-pr .p2{padding-bottom:4px}
.fi-acc{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.fi-acc .btn{flex:1;min-width:150px;white-space:nowrap}
.fi-plano{margin-top:22px;background:var(--blanco);border:1px solid var(--borde);
 border-radius:var(--r);padding:16px}
.fi-plano p{font-size:13px;color:var(--tinta3);margin-bottom:10px}

/* ── plano ── */
.plano{width:100%;height:auto;display:block}
.plano .local{fill:var(--blanco);stroke:var(--tinta);stroke-width:3.4}
.plano .patio{fill:#EFEAE2}
.plano .comun{fill:none;stroke:#C9C0B4;stroke-width:2.4}
.plano .sw path{fill:none;stroke:#D5CCC0;stroke-width:1.6}
.plano text{font-family:var(--tipo);text-anchor:middle;pointer-events:none}
.plano .rot{font-size:28px;font-weight:650;fill:var(--tinta2);letter-spacing:.06em}
.plano .ud.el-local text{fill:var(--acento-osc)}
.plano .el-local rect{stroke-dasharray:none}
.plano .ud rect{fill:var(--blanco);stroke:var(--tinta);stroke-width:2.4;transition:fill .12s}
.plano .ud text{fill:var(--tinta2);font-weight:600}
.plano .ud.libre{cursor:pointer}
.plano .ud.libre:hover rect{fill:var(--acento-suave)}
.plano .ud.libre.sel rect{fill:var(--acento);stroke:var(--acento)}
.plano .ud.libre.sel text{fill:#fff}
.plano .ud.ocupada rect{fill:#EDE8E0;stroke:#CFC6B9;stroke-width:1.6}
/* arreglo: el número de los ocupados iba en #B3AA9E (1,88:1); este da 4,96:1 */
.plano .ud.ocupada text{fill:#6B6154}
/* arreglo: el filtro apagaba con opacity .25, que dejaba el número ilegible */
.plano .ud.apagada rect{fill:var(--papel);stroke:var(--borde)}
.plano .ud.apagada text{fill:var(--tinta3)}
.plano .ud.apagada .sw{opacity:.4}
.plano.mini .ud rect{stroke-width:2}
.plano.mini .ud.sel rect{fill:var(--acento);stroke:var(--acento)}
.lienzo-plano{background:var(--blanco);border:1px solid var(--borde);border-radius:var(--r);
 padding:16px;overflow-x:auto;-webkit-overflow-scrolling:touch}
/* arreglo: a 600 px el nº 17 medía 38,8 px de alto; a 720 px, 46,6 */
.lienzo-plano>.plano{min-width:720px}
@media(min-width:900px){.lienzo-plano>.plano{min-width:0}}
.ley{display:flex;flex-wrap:wrap;gap:18px;margin-top:14px;font-size:13.5px;color:var(--tinta2)}
.ley i{width:14px;height:14px;display:inline-block;vertical-align:-2px;margin-right:7px;
 border:2px solid var(--tinta);background:var(--blanco);border-radius:2px}
.ley i.oc{background:#EDE8E0;border-color:#CFC6B9}
.ley i.se{background:var(--acento);border-color:var(--acento)}

/* ── puertas / alzado ── */
.puertas{display:grid;gap:18px}
@media(min-width:860px){.puertas{grid-template-columns:.85fr 1.15fr;align-items:center}}
.alz{width:100%;max-width:360px;height:auto;margin:0 auto;display:block}
.alz .muro{fill:var(--blanco);stroke:var(--tinta);stroke-width:6}
.alz .puerta{fill:var(--acento-suave);stroke:var(--acento);stroke-width:5}
.alz .persona{fill:#DCD4C8}
.alz .suelo{stroke:var(--tinta);stroke-width:5}
.alz .cota line{stroke:var(--tinta3);stroke-width:2}
.alz .cota text{font:600 21px var(--tipo);fill:var(--tinta2)}
.alz .cota text.c{text-anchor:middle}
.alz .cota.acc line{stroke:var(--acento)}
.alz .cota.acc text{fill:var(--acento-osc)}
.medidas{list-style:none;display:grid;gap:10px}
.medidas li{background:var(--blanco);border:1px solid var(--borde);border-radius:var(--rs);
 padding:14px 16px;display:flex;justify-content:space-between;gap:14px;align-items:baseline}
.medidas b{font-weight:650;white-space:nowrap}
.medidas small{display:block;color:var(--tinta3);font-size:13px;font-weight:400}

/* ── fotos y huecos ── */
.gal{display:grid;gap:12px;grid-template-columns:repeat(2,1fr)}
@media(min-width:760px){.gal{grid-template-columns:repeat(3,1fr);gap:16px}}
.foto{background:var(--blanco);border:1px solid var(--borde);border-radius:var(--r);overflow:hidden}
.marco{position:relative;display:grid;place-items:center;aspect-ratio:4/3;background:var(--suave);
 border-bottom:1px solid var(--borde);overflow:hidden}
.marco picture{position:absolute;inset:0}
/* arreglo: la foto se ve ENTERA (contain), nunca recortada. Si no tiene la forma del marco, lo que
   sobra lo rellena la misma foto desenfocada detrás (.fondo), para que no queden franjas vacías */
.marco img{width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .2s}
.marco .fondo img{object-fit:cover;filter:blur(22px) saturate(.85);transform:scale(1.2)}
.con .marco img{opacity:1}
.con .aus{display:none}
.aus{position:absolute;font-size:12.5px;color:var(--tinta3);text-align:center;
 padding:0 12px;line-height:1.4;display:flex;flex-direction:column;align-items:center;gap:8px}
.aus svg{width:24px;height:24px;stroke:#C4BBAE;fill:none;stroke-width:1.5}
.foto figcaption{padding:11px 13px;font-size:13.5px;color:var(--tinta2)}

/* ── el local ── */
/* ritmo de bandas: portada oscura → ventajas blanco → papel → blanco → papel → suave → blanco
   → «El sitio» oscuro → suave → papel (formulario) → pie oscuro */
#disponibles{background:var(--blanco)}
/* sobre banda blanca las tarjetas pierden borde: se refuerza */
#disponibles .tj,#plano .lienzo-plano{border-color:#CDD8E3}
#plano{background:var(--blanco)}
#local{background:var(--papel);border-top:1px solid var(--borde);border-bottom:1px solid var(--borde)}
/* la banda oscura parte la página en dos y hace de respiro antes del final */
#sitio{background:var(--oscuro);color:#fff}
#sitio h2{color:#fff}
#sitio .sec-cab p{color:#C2D0E0}
#sitio .capitulo{color:var(--acento-claro)}
#sitio .capitulo em{background:var(--acento-claro)}
#sitio .foto{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.14)}
#sitio .marco{background:rgba(255,255,255,.06);border-bottom-color:rgba(255,255,255,.12)}
#sitio .aus{color:#94A5BA}
#sitio .aus svg{stroke:#5C6C82}
#sitio figcaption{color:#C2D0E0}
.local-g{display:grid;gap:20px}
@media(min-width:900px){.local-g{grid-template-columns:.95fr 1.05fr;align-items:start}}
.local-foto{background:var(--papel);border:1px solid var(--borde);border-radius:var(--r);overflow:hidden}
.local-foto .marco{aspect-ratio:4/3}
.local-foto figcaption{padding:12px 14px;font-size:13.5px;color:var(--tinta2)}
.local-dib{background:var(--papel);border:1px solid var(--borde);border-radius:var(--r);padding:18px 20px 12px}
.local-dib figcaption{font-size:12.5px;color:var(--tinta3);text-align:center;margin-top:8px}
.local-pr{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:18px 0 2px}
.local-pr b{font-size:26px;font-weight:650;letter-spacing:-.02em}
.local-pr span{font-size:14px;color:var(--tinta3)}
.usos{list-style:none;display:grid;gap:9px;margin:16px 0 0}
.usos li{position:relative;padding-left:24px;font-size:15px;color:var(--tinta2);line-height:1.5}
.usos b{color:var(--tinta);font-weight:650}
.usos li:before{content:"";position:absolute;left:0;top:9px;width:9px;height:9px;border-radius:2px;
 background:var(--acento)}

/* ── llegar ── */
.llegar{display:grid;gap:22px;align-items:start}
@media(min-width:860px){.llegar{grid-template-columns:1fr 1fr}}
.dir{background:var(--blanco);border:1px solid var(--borde);border-radius:var(--r);padding:22px}
.dir h3{margin-bottom:10px}
.dir p{color:var(--tinta2);font-size:16px}
.dir .acc{margin-top:18px}

/* ── pie ── */
footer{background:var(--oscuro);color:var(--sobre-oscuro);padding:48px 0 36px;margin-top:0}
footer a{color:#fff;text-decoration:none}
footer .g{display:grid;gap:26px}
@media(min-width:760px){footer .g{grid-template-columns:1.2fr 1fr 1fr}}
footer .big{font-size:27px;font-weight:650;letter-spacing:-.02em}
footer h4{font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:#8395AC;
 font-weight:650;margin-bottom:10px}
footer li{list-style:none;font-size:15px}
footer li a{display:inline-flex;align-items:center;min-height:44px}
footer .legal{border-top:1px solid rgba(255,255,255,.12);margin-top:32px;padding-top:20px;
 font-size:12.5px;color:#8395AC;line-height:1.65}
footer .legal a{display:inline-flex;align-items:center;min-height:44px;color:#fff;
 text-decoration:underline;text-underline-offset:3px}

/* ── aviso legal ── */
.pag-legal{background:var(--blanco);border-bottom:1px solid var(--borde);padding:40px 0 56px}
.pag-legal .env{max-width:760px}
.pag-legal h1{font-size:clamp(28px,5.4vw,40px);margin:8px 0 18px}
.pag-legal h2{font-size:21px;margin:34px 0 10px}
.pag-legal p{color:var(--tinta2);font-size:16px;margin-top:10px;max-width:64ch}
.pag-legal .datos{margin-top:14px}
.borrador{background:var(--suave);border:1px dashed var(--tinta3);border-radius:var(--rs);
 padding:12px 16px;font-size:15px;color:var(--tinta);margin-bottom:6px}
.pend{display:inline-block;border:1px dashed var(--tinta3);border-radius:6px;padding:0 8px;
 font-weight:600;color:var(--tinta2);background:var(--suave)}
.volver{display:inline-flex;align-items:center;min-height:44px;margin-top:26px;color:var(--acento);
 font-weight:600;text-decoration:none}
.volver:hover{text-decoration:underline}

/* ── formulario de contacto (solo si contenido.json › formulario.activo) ── */
.contacto{max-width:640px}
.form{background:var(--blanco);border:1px solid var(--borde);border-radius:var(--r);padding:22px;
 display:grid;gap:16px}
.campo{display:grid;gap:6px}
.campo label{font-size:15px;font-weight:600}
/* borde de los campos a 3,5:1 sobre blanco, para que se vea dónde se escribe */
.campo input,.campo textarea{font:inherit;font-size:16px;color:var(--tinta);background:var(--blanco);width:100%;
 border:1.5px solid #7D8A9C;border-radius:var(--rs);padding:11px 14px;min-height:48px}
.campo textarea{resize:vertical;min-height:132px;line-height:1.5}
.campo input:focus-visible,.campo textarea:focus-visible{border-color:var(--acento)}
.trampa{display:none}
.priv{font-size:13.5px;color:var(--tinta3);line-height:1.55}
.priv a{display:inline-flex;align-items:center;min-height:44px;color:var(--acento);font-weight:600}
.form .btn-1{justify-self:start}
@media(max-width:620px){.form .btn-1{justify-self:stretch}}
.form .btn-1:disabled{opacity:1;background:var(--acento-osc);cursor:progress}
.estado{font-size:15px;color:var(--tinta);border-left:3px solid var(--tinta3);padding:4px 0 4px 12px}
.estado:empty{border:0;padding:0}
.enviado{background:var(--acento-suave);border:1px solid var(--acento);border-radius:var(--r);padding:22px}
.enviado h3{color:var(--acento-osc)}
.enviado p{margin-top:6px}

/* ── movimiento: todo cuelga de la clase «anim», que pone un script en <head> ──
   arreglo: si app.js no llega a cargar, ese mismo script la quita a los 2,5 s y la página se ve entera */
.anim .sec-cab,.anim .tramo,.anim .foto,.anim .escala,.anim .lienzo-plano,.anim .rej,
.anim .filtros,.anim .local-g>*,.anim .dir,.anim .vent li,.anim .medidas li,
.anim .puertas figure,.anim .hero .rv,.anim .gal figure,.anim .contacto{
 opacity:0;transform:translateY(16px);
 transition:opacity .5s ease,transform .55s cubic-bezier(.22,.7,.28,1)}
.anim .visible{opacity:1!important;transform:none!important}
.anim .hero .rv:nth-child(2){transition-delay:.06s}
.anim .hero .rv:nth-child(3){transition-delay:.12s}
.anim .hero .rv:nth-child(4){transition-delay:.18s}
.anim .hero .rv:nth-child(5){transition-delay:.24s}
.anim .hero .rv:nth-child(6){transition-delay:.3s}
.anim .tramo:nth-child(2),.anim .vent li:nth-child(2),.anim .gal figure:nth-child(2){transition-delay:.07s}
.anim .tramo:nth-child(3),.anim .vent li:nth-child(3),.anim .gal figure:nth-child(3){transition-delay:.14s}
.anim .tramo:nth-child(4),.anim .vent li:nth-child(4),.anim .gal figure:nth-child(4){transition-delay:.21s}
.anim .gal figure:nth-child(5){transition-delay:.28s}
.anim .gal figure:nth-child(6){transition-delay:.35s}
.anim .capitulo em{width:0}
.anim .visible .capitulo em{width:52px}
.anim .marco picture:not(.fondo) img{transform:scale(1.05);transition:opacity .35s ease,transform .9s cubic-bezier(.22,.7,.28,1)}
.anim .visible .marco picture:not(.fondo) img,.anim .fi-foto .marco picture:not(.fondo) img{transform:scale(1)}
.anim .plano.hero .local{stroke-dasharray:var(--p);stroke-dashoffset:var(--p);
 animation:trazo 1.9s cubic-bezier(.4,0,.2,1) .15s forwards}
.anim .plano.hero .ud{opacity:0;animation:surge .5s ease forwards;
 animation-delay:calc(.7s + var(--i) * 26ms)}
@keyframes trazo{to{stroke-dashoffset:0}}
@keyframes surge{to{opacity:1}}
/* al entrar en un apartado: el número llega desde la izquierda, la raya se traza, el título se
   destapa de abajo arriba y después la entradilla. Suave, pero se nota el cambio de apartado */
.anim .sec-cab .capitulo{opacity:0;transform:translateX(-14px);
 transition:opacity .5s ease,transform .6s cubic-bezier(.22,.7,.28,1)}
.anim .sec-cab h2{clip-path:inset(0 0 100% 0);transform:translateY(22px);
 transition:clip-path .85s cubic-bezier(.22,.7,.28,1) .1s,transform .85s cubic-bezier(.22,.7,.28,1) .1s}
.anim .sec-cab h2+p{opacity:0;transform:translateY(12px);
 transition:opacity .6s ease .3s,transform .7s cubic-bezier(.22,.7,.28,1) .3s}
.anim .sec-cab.visible .capitulo,.anim .sec-cab.visible h2+p{opacity:1;transform:none}
.anim .sec-cab.visible h2{clip-path:inset(0 0 0 0);transform:none}

/* al pasar el ratón por una tarjeta de tamaño, su foto se acerca un poco */
@media(hover:hover) and (prefers-reduced-motion:no-preference){
 .tramo .marco img{transition:opacity .2s ease,transform .6s cubic-bezier(.22,.7,.28,1)}
 .tramo:not([disabled]):hover .marco picture:not(.fondo) img{transform:scale(1.06)}
 .tramo:not([disabled]):hover .marco .fondo img{transform:scale(1.28)}
}

/* las fotos del sitio y la del local: se acercan con el ratón encima y, en el móvil, mientras
   se mantiene el dedo sobre ellas (app.js pone «pulsada»; el ratón no la pone) */
@media(prefers-reduced-motion:no-preference){
 .gal .foto .marco img,.local-foto .marco img{transition:opacity .2s ease,transform .5s cubic-bezier(.22,.7,.28,1)}
 .gal .foto.pulsada picture:not(.fondo) img,.local-foto.pulsada picture:not(.fondo) img{transform:scale(1.07)}
 .gal .foto.pulsada .fondo img,.local-foto.pulsada .fondo img{transform:scale(1.3)}
}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
 .gal .foto:hover picture:not(.fondo) img,.local-foto:hover picture:not(.fondo) img{transform:scale(1.07)}
 .gal .foto:hover .fondo img,.local-foto:hover .fondo img{transform:scale(1.3)}
}

@media(prefers-reduced-motion:reduce){
 *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
 .anim .sec-cab .capitulo,.anim .sec-cab h2+p{opacity:1;transform:none}
 .anim .sec-cab h2{clip-path:none;transform:none}
 .anim .sec-cab,.anim .tramo,.anim .foto,.anim .escala,.anim .lienzo-plano,.anim .rej,
 .anim .filtros,.anim .local-g>*,.anim .dir,.anim .vent li,.anim .medidas li,
 .anim .puertas figure,.anim .hero .rv,.anim .gal figure,.anim .contacto{opacity:1;transform:none}
 .anim .capitulo em{width:52px}
 .anim .plano.hero .local{stroke-dashoffset:0}
 .anim .plano.hero .ud{opacity:1}
 .anim .marco picture:not(.fondo) img{transform:none}
}
html{scroll-behavior:smooth;scroll-padding-top:78px}