/* LANKA Arquitectos
Idea: «del primer trazo a la obra». Las líneas del logo (una horizontal larga que cruzan dos
verticales y que se pasa del cruce) construyen la web: separan boceto y casa, abren cada sección
como un replanteo y subrayan lo importante. Color de marca: verde olivo. Fondos con textura de cal. */
/* Tipografías alojadas aquí (SIL OFL, licencias en /fuentes): sin pedir nada a Google, que recibía la IP de cada visita.
Solo latino y latino extendido; Jost es variable (300–500) y Newsreader variable en peso y tamaño óptico */
@font-face{font-family:'Jost';font-style:normal;font-weight:300 500;font-display:swap;src:url(../fuentes/jost-latin-ext.woff2) format('woff2');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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Jost';font-style:normal;font-weight:300 500;font-display:swap;src:url(../fuentes/jost-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:200 400;font-display:swap;src:url(../fuentes/newsreader-cursiva-latin-ext.woff2) format('woff2');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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:200 400;font-display:swap;src:url(../fuentes/newsreader-cursiva-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:200 400;font-display:swap;src:url(../fuentes/newsreader-latin-ext.woff2) format('woff2');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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:200 400;font-display:swap;src:url(../fuentes/newsreader-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
:root{--bajo:0px;
--cal:#F2EFE8;
--travertino:#E5DACA;
--papel:#EAE4D8;
--olivo:#46513A; /* bandas oscuras */
--olivo-texto:#56633F; /* énfasis sobre fondos claros: 6,3:1 sobre cal */
--arena:#E3C99A; /* énfasis sobre olivo y noche */
--olivo-luz:#A4B07D; /* el mismo olivo, aclarado, para destacar sobre foto oscurecida: ≥3:1 medido en las tres luces */
--noche:#10141A;
--tinta:#1B1B19;
--gris:#66625A;
--linea:#CBC2B3;
--blanco:#FFFFFF;
--f-voz:"Newsreader","Iowan Old Style","Palatino Linotype",Georgia,serif;
--f-texto:"Jost","Futura","Avenir Next","Century Gothic",system-ui,sans-serif;
--ease:cubic-bezier(.22,.7,.12,1);
--suave:cubic-bezier(.65,0,.35,1);
--gl:max(clamp(20px,4.4vw,72px),env(safe-area-inset-left,0px));
--gr:max(clamp(20px,4.4vw,72px),env(safe-area-inset-right,0px));
--barra:calc(max(8px,env(safe-area-inset-top,0px)) + 68px); /* alto de la cabecera fija: el logo (60 px) y 8 px arriba y abajo */
--tinta-sello:url("data:image/svg+xml;utf8,"); /* la tinta del sello (cookies y licencia) */
--grano:url("data:image/svg+xml;utf8,");
--nube:url("data:image/svg+xml;utf8,");
color-scheme:light;
}
*{box-sizing:border-box}
/* Lo marcado como oculto se oculta siempre, aunque su pieza tenga su propio display (grid, flex) */
[hidden]{display:none!important}
/* Sin el recuadro que el móvil pinta al tocar: cada pieza tiene su propia respuesta al pulsar */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;-webkit-tap-highlight-color:transparent}
html.menu-abierto{overflow:hidden}
[tabindex="-1"]:focus{outline:none}
body{margin:0;background:var(--cal) var(--grano);background-image:var(--grano),var(--nube);color:var(--tinta);font-family:var(--f-texto);font-size:17px;line-height:1.6;font-weight:400;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block;max-width:100%;height:auto}
picture{display:contents} /* solo elige el archivo (AVIF o JPEG, por anchos): la caja y los estilos son de su img */
.luz,.alterna__marco img,.estudio__img img,.obra-i__img img,.visor__capa img,.contacto__fotos img{filter:saturate(.86) contrast(.98)}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:1.5px solid currentColor;outline-offset:4px}
h1,h2,h3,p,ul,ol,figure{margin:0}
h1,h2,h3{text-wrap:balance} /* titulares sin una palabra sola en la última línea («… a la / llave.») */
ul,ol{padding:0;list-style:none}
.marco{max-width:1600px;margin-inline:auto;padding-left:var(--gl);padding-right:var(--gr)}
.rotulo{font-size:11.5px;letter-spacing:.32em;text-transform:uppercase;font-weight:400;line-height:1.5}
.voz{font-family:var(--f-voz);font-weight:300;letter-spacing:-.018em;font-optical-sizing:auto}
.voz em{font-style:italic;color:var(--olivo-texto)}
.bloque{padding-block:clamp(96px,11vw,180px)}
.rejilla{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2vw,32px)}
.banda--travertino{--gris:#5E5A52;background-color:var(--travertino);background-image:var(--grano),var(--nube)} /* el gris de siempre da 4,4:1 sobre travertino; este, 5:1 */
.banda--olivo{background-color:var(--olivo);background-image:var(--grano);color:var(--cal)}
.banda--olivo .voz em{color:var(--arena)}
.banda--noche{background-color:var(--noche);background-image:var(--grano);color:var(--cal)}
.banda--noche .voz em{color:var(--arena)}
/* Las líneas que se trazan (enlaces y cabeceras) se dibujan cambiando el tamaño de su fondo, no con transform: así se
repintan ajustadas al píxel en cada fotograma. Escalada, una línea de 1 px que cae entre dos píxeles de pantalla se veía
más gruesa mientras se movía y más fina al parar. */
@property --trazo{syntax:"";inherits:false;initial-value:100%}
@property --fina{syntax:"";inherits:false;initial-value:100%}
@property --gruesa{syntax:"";inherits:false;initial-value:100%}
/* La línea del logo en los enlaces: se traza, se pasa y remata con las dos verticales del logo, a su escala (la fina más
corta y empezando más abajo, la gruesa detrás; las dos acaban igual y la horizontal sigue un poco tras la gruesa) */
.trazo{position:relative;display:inline-block;padding-bottom:5px}
.trazo::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:calc(100% + 14px);--trazo:0%;background:linear-gradient(currentColor,currentColor) 0 0/var(--trazo) 100% no-repeat;transition:--trazo .7s var(--ease)}
.trazo::before{content:"";position:absolute;right:-8px;bottom:-3px;width:6px;height:12px;--fina:0%;--gruesa:0%;background:linear-gradient(currentColor,currentColor) left 0 top 3px/1px calc(var(--fina) * .75) no-repeat,linear-gradient(currentColor,currentColor) right 0 top 0/2px var(--gruesa) no-repeat;transition:--fina .25s var(--ease),--gruesa .25s var(--ease)}
/* Lo que solo hace el ratón lleva html:not(.tactil): con el dedo, el «ratón encima» se quedaba pegado a lo último que se tocaba.
La clase la pone el JS según se use el dedo o el ratón en cada momento (en portátiles táctiles, (hover:hover) daba falso
aunque hubiera ratón, y se perdían los efectos) */
.trazo:focus-visible::after,.trazo[aria-current]::after{--trazo:100%}
.trazo:focus-visible::before,.trazo[aria-current]::before{--fina:100%;--gruesa:100%;transition:--fina .45s var(--ease) .5s,--gruesa .45s var(--ease) .65s}
html:not(.tactil) .trazo:hover::after,html:not(.tactil) a:hover>.trazo::after{--trazo:100%}
html:not(.tactil) .trazo:hover::before,html:not(.tactil) a:hover>.trazo::before{--fina:100%;--gruesa:100%;transition:--fina .45s var(--ease) .5s,--gruesa .45s var(--ease) .65s}
[aria-current]>.trazo::after{--trazo:100%}
[aria-current]>.trazo::before{--fina:100%;--gruesa:100%}
/* Al pulsar un enlace (también con el dedo, donde no hay ratón encima) la línea se traza más deprisa, mientras la página cambia */
.pulsado>.trazo::after,.trazo.pulsado::after{--trazo:100%;transition-duration:.35s}
.pulsado>.trazo::before,.trazo.pulsado::before{--fina:100%;--gruesa:100%;transition:--fina .3s var(--ease) .22s,--gruesa .3s var(--ease) .3s}
/* Tipo · lugar («Sol fuera en verano · dentro en invierno»): cada parte entera. Si no caben en una línea, el JS pone tl--dos: el lugar baja
entero y el punto desaparece, en vez de quedarse colgando al final de la primera línea */
.tl>span{white-space:nowrap}
.tl--dos .tl__sep{display:none}
.tl--dos>span:last-child{display:block;white-space:normal} /* en su propia línea, y si aun así no cabe, se parte */
.flecha-trazo{width:56px;height:14px;flex:none;stroke:currentColor;stroke-width:1.2;fill:none;transition:transform .6s var(--ease)}
html:not(.tactil) a:hover .flecha-trazo,html:not(.tactil) button:hover .flecha-trazo{transform:translateX(8px)}
.pulsado .flecha-trazo{transform:translateX(8px)}
/* Cabecera de sección como un replanteo: número, nombre, línea que se traza y dato */
.replanteo{display:flex;align-items:center;gap:18px;margin-bottom:clamp(44px,5vw,76px)}
.replanteo__n{font-family:var(--f-voz);font-style:italic;font-weight:300;font-size:22px;line-height:1;color:var(--olivo-texto);font-variant-numeric:tabular-nums}
.banda--olivo .replanteo__n,.replanteo--claro .replanteo__n{color:var(--arena)}
.replanteo__l{position:relative;flex:1;height:1px;background:linear-gradient(currentColor,currentColor) 0 0/var(--trazo) 100% no-repeat;opacity:.55;transition:--trazo 1.8s cubic-bezier(.6,0,.3,1)}
/* Las dos verticales del logo, una sola pieza para la portada y las secciones: la fina, más corta (empieza más abajo), y la
gruesa; las dos acaban igual y la horizontal sigue un poco tras la gruesa. Se dibujan de arriba abajo cuando la línea llega */
.desliza__v--fina,.replanteo__l::before{right:21px;top:-12px;width:1px;height:19px}
.desliza__v--gruesa,.replanteo__l::after{right:13px;top:-19px;width:2px;height:26px}
.replanteo__l::before,.replanteo__l::after{content:"";position:absolute;background:linear-gradient(currentColor,currentColor) 0 0/100% var(--gruesa) no-repeat;transition:--gruesa .6s var(--ease) 1.75s}
.replanteo__l::after{transition-delay:2s}
.js .replanteo:not(.visto) .replanteo__l{--trazo:0%}
.js .replanteo:not(.visto) .replanteo__l::before,.js .replanteo:not(.visto) .replanteo__l::after{--gruesa:0%;transition:none}
.replanteo .rotulo{white-space:nowrap}
/* Texto espaciado que acaba en el margen derecho: se recupera el hueco que el espaciado deja tras la última letra */
.replanteo .rotulo:last-child,.indice-cab .rotulo:last-child{margin-right:-.32em}
/* Cabecera */
.cab{position:relative;z-index:30;color:var(--tinta)}
.cab--sobre{position:absolute;inset:0 0 auto}
.cab__in{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:max(26px,env(safe-area-inset-top,0px));padding-bottom:20px}
.logo{display:block;width:clamp(118px,10vw,150px);aspect-ratio:1842.61/930.53;background:currentColor;-webkit-mask:url(../img/logo.svg) center/contain no-repeat;mask:url(../img/logo.svg) center/contain no-repeat}
.menu{--esp:clamp(2.4px,.21vw,3.6px);display:flex;gap:clamp(18px,1.9vw,36px)} /* en pantalla grande, el espaciado de siempre (.3em); menos en las medianas, para que quepan los siete */
.menu a{font-size:12px;letter-spacing:var(--esp);text-transform:uppercase;white-space:nowrap}
.menu a:last-child{margin-right:calc(-1 * var(--esp))} /* como Menú: la última letra acaba en el margen */
/* Menú y Cerrar son la misma pieza en el mismo sitio. El espaciado de letras deja un hueco detrás de la última letra:
se recupera para que la palabra acabe justo en el margen, como las fotos de debajo. La zona de toque llega a 44 px. */
.menu-btn{display:none;min-height:44px;margin-right:-.3em;font-size:12px;letter-spacing:.3em;text-transform:uppercase;transition:opacity .25s var(--ease)}
.menu-btn:active{opacity:.5}
/* Menú en móvil: baja como la regla paralela sobre el tablero, con la línea del logo en el canto, y deja la cabecera
donde estaba: Cerrar ocupa el sitio exacto de Menú. El canto baja cambiando el alto, no con transform, y su línea es un
borde: el navegador lo redondea a píxeles enteros de pantalla, así que no cambia de grosor mientras se mueve (una caja de
1 px en una pantalla de densidad 1,5 o 2,625 alternaba entre uno y dos píxeles). */
.panel{position:fixed;z-index:60;top:0;left:0;right:0;height:0;color:var(--tinta);visibility:hidden;transition:height .6s var(--suave),visibility 0s linear .6s}
.panel.abierto{height:calc(100vh + 40px);height:calc(100lvh + 40px);visibility:visible;transition:height .8s var(--ease),visibility 0s} /* abierto, el canto y sus verticales quedan por debajo de la pantalla */
.panel.ya,.panel.ya *,.panel.ya ::before,.panel.ya ::after{transition:none!important}
.panel__fondo{position:absolute;inset:0;overflow:hidden;border-bottom:1px solid var(--tinta);background-color:var(--cal);background-image:var(--grano),var(--nube);box-shadow:0 16px 34px -22px rgba(16,20,26,.55)}
.panel__in{position:absolute;top:0;left:0;right:0;height:100vh;height:100dvh;display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain}
.panel__in>.marco{width:100%} /* en columna flex, el margen automático de .marco lo encogería y lo centraría */
.panel__cab{flex:none;transform:translateY(var(--cab-y,0))}
.panel__regla{position:absolute;left:0;right:0;bottom:0;height:1px;pointer-events:none} /* solo sitúa las verticales sobre el borde */
.panel__regla::before,.panel__regla::after{content:"";position:absolute;background:var(--tinta)}
.panel__regla::before{right:calc(var(--gr) + 21px);top:-12px;width:1px;height:19px}
.panel__regla::after{right:calc(var(--gr) + 13px);top:-19px;width:2px;height:26px}
.panel__nav{display:grid;margin-block:auto;padding-block:clamp(16px,3svh,32px)}
.panel__nav a{display:grid;grid-template-columns:2.1rem minmax(0,1fr);place-items:baseline start;padding-block:clamp(4px,.9svh,9px);font-family:var(--f-voz);font-weight:300;font-size:clamp(28px,min(9.4vw,5.5svh),56px);line-height:1.12;letter-spacing:-.02em}
.panel__n{font-style:italic;font-size:18px;letter-spacing:0;color:var(--olivo-texto);font-variant-numeric:tabular-nums} /* el número de cada sección, como en su replanteo */
.panel__nav .trazo{padding-bottom:2px} /* la línea, pegada a su palabra y no a medio camino de la siguiente */
.panel__pie{flex:none;display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 28px;padding-bottom:max(32px,env(safe-area-inset-bottom,0px))}
.panel__pie::before{content:"";flex-basis:100%;height:1px;margin-bottom:10px;background:var(--linea)} /* la línea, dentro de los márgenes */
.panel__pie .rotulo{flex-basis:100%;color:var(--gris)}
.panel__pie a{font-family:var(--f-voz);font-weight:300;font-size:20px;line-height:1.3}
/* Cabecera siempre visible, en todas las pantallas. La misma pieza que el menú: baja cambiando el alto, con el canto como
borde (nítido en cualquier pantalla), en cuanto la cabecera de la página empieza a irse. El logo y el menú, más ceñidos
que en la cabecera de la página (8 px arriba y abajo en vez de 26 y 20) */
.barra{position:fixed;z-index:56;top:0;left:0;right:0;height:0;visibility:hidden;transition:height .45s var(--suave),visibility 0s linear .45s}
.barra--vista{height:var(--barra);visibility:visible;transition:height .6s var(--ease),visibility 0s}
.barra__fondo{position:absolute;inset:0;overflow:hidden;background-color:var(--cal);background-image:var(--grano),var(--nube);border-bottom:1px solid var(--linea);box-shadow:0 12px 26px -22px rgba(16,20,26,.55)}
.barra .cab__in{position:absolute;top:0;left:0;right:0;width:100%;padding-top:max(8px,env(safe-area-inset-top,0px));padding-bottom:8px}
.barra .logo{width:118px}
/* Al abrir, los enlaces suben uno tras otro detrás del canto; al cerrar no se mueven: el canto se los lleva */
.panel__nav a,.panel__pie>*{opacity:0;transform:translateY(22px);transition:opacity 0s linear .6s,transform 0s linear .6s}
.panel.abierto .panel__nav a,.panel.abierto .panel__pie>*{opacity:1;transform:none;transition:opacity .6s var(--ease) calc(.22s + var(--i,0) * .07s),transform .9s var(--ease) calc(.22s + var(--i,0) * .07s)}
/* Al elegir: el enlace se subraya con la línea del logo (más deprisa que al pasar el ratón) y los demás se apagan */
/* El movimiento de salida se mantiene con su retardo: sin él, al cerrarse, todo menos lo elegido bajaba 22 px de golpe */
.panel.eligiendo .panel__nav a:not(.pulsado),.panel.eligiendo .panel__pie>*{opacity:.3;transition:opacity .3s var(--ease),transform 0s linear .6s}
.panel.eligiendo .panel__nav a[aria-current]:not(.pulsado)>.trazo::after{--trazo:0%}
.panel.eligiendo .panel__nav a[aria-current]:not(.pulsado)>.trazo::before{--fina:0%;--gruesa:0%}
.panel.eligiendo .panel__cab{transition:transform .32s var(--ease)}
.panel__nav a:active{opacity:.55;transition:opacity .1s}
/* Los siete puntos caben en línea desde este ancho; por debajo, el botón Menú y el panel */
@media (max-width:1139px){.menu{display:none}.menu-btn{display:block}}
/* ——— Portada: del primer trazo a la obra ———
La portada se queda fija mientras se hace scroll por su «pista»; el avance mueve la vertical del logo (--x). */
.portada-pista{position:relative;height:230vh;display:flex;flex-direction:column;--p:0;--fin:calc((230vh - max(560px,100vh)) * .85);--c-portada:var(--blanco);--horizonte:63%}
/* Lo de abajo (titular, mando de luz y la línea que invita a bajar) va en su capa, pegada al borde inferior con sticky: el navegador la
mantiene quieta mientras la barra del móvil entra o sale (el borde de abajo no se mueve). Al final de la pista sale
junto con la escena: las dos acaban en el mismo sitio */
.portada__abajo{position:sticky;bottom:0;margin-top:auto;flex:none;height:100vh;height:100svh;min-height:560px;z-index:2;overflow:clip;pointer-events:none;--bajo:0px}
/* En la capa de abajo nada tapa el boceto: su versión se recorta al revés, solo en la parte que la casa aún no ha cubierto */
.portada__abajo .capa--trazo{overflow:hidden;transform:translateX(calc(var(--p) * 100%));will-change:transform}
.portada__abajo .capa--trazo > .capa__lienzo{transform:translateX(calc(var(--p) * -100%))}
/* En móvil la barra del navegador se esconde al bajar: la pantalla crece y una escena de alto «pequeño» (svh) dejaba una
franja vacía debajo. El escenario mide el alto grande (lvh) y el contenido se queda en el pequeño: --bajo es la diferencia.
Lo de abajo no va en la escena sino en .portada__abajo, pegado al borde inferior */
@supports (height:100lvh){:root{--bajo:calc(100lvh - 100svh)}.portada{--bajo:calc(max(560px,100lvh) - max(560px,100svh))}}
.portada{position:sticky;top:0;flex:none;height:100vh;height:100lvh;min-height:560px;overflow:hidden;background:#EFEAE0;container-type:inline-size}
/* Cabecera según el cielo de cada foto (medido): blanca sobre el azul del día, tinta sobre el cielo claro del atardecer y de la noche */
.portada-pista[data-luz="tarde"],.portada-pista[data-luz="noche"]{--c-portada:var(--tinta)}
.capa{position:absolute;inset:0}
.capa__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:100% 50%}
.capa--casa{overflow:hidden;transform:translateX(calc((var(--p) - 1) * 100%));will-change:transform}
.capa__lienzo{position:absolute;inset:0;transform:translateX(calc((1 - var(--p)) * 100%));will-change:transform}
.luz{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:100% 50%;opacity:0;transition:opacity 2.6s var(--ease)}
.luz.activa{opacity:1}
/* Sombra baja: la esquina del titular y el pie del mando; el resto de la foto queda limpio */
.capa--casa .capa__img::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse max(44vw,620px) max(50svh,460px) at 100% 100%,rgba(8,10,12,.66) 0%,rgba(8,10,12,.46) 50%,rgba(8,10,12,0) 100%),radial-gradient(ellipse 64% 72% at 0% 100%,rgba(8,10,12,.7) 0%,rgba(8,10,12,.55) 40%,rgba(8,10,12,.22) 72%,rgba(8,10,12,0) 100%),linear-gradient(to top,rgba(8,10,12,.6) 0%,rgba(8,10,12,.36) 16%,rgba(8,10,12,.1) 30%,rgba(8,10,12,0) 40%)}
/* Mismo texto, misma posición en las dos capas: titular y pie colocados en absoluto, no por el flujo */
.capa__texto{position:absolute;inset:0 0 var(--bajo)}
.capa--trazo .capa__texto{color:var(--tinta);isolation:isolate}
.capa--casa .capa__texto{color:var(--c-portada);transition:color 1.6s var(--ease)}
.capa--casa .portada__titular{color:var(--blanco);text-shadow:0 1px 22px rgba(0,0,0,.22)}
.capa--casa .cab{color:var(--c-portada);transition:color 1.6s var(--ease)}
.portada__titular{position:absolute;left:0;right:0;bottom:max(30px,env(safe-area-inset-bottom,0px));pointer-events:none}
/* El encabezado principal reúne el rótulo («Estudio de arquitectura · Málaga», lo que se busca) y el titular; a la vista,
los dos siguen siendo dos bloques como antes */
.portada__h1{font:inherit;text-wrap:initial}
.portada__h1>.rotulo,.portada__h1>.titular{display:block}
.portada__titular .rotulo{margin-bottom:22px;opacity:.9}
.titular{font-size:clamp(44px,5.6vw,98px);line-height:.98;max-width:6.4em;width:fit-content;text-wrap:balance}
.capa--casa .titular em{color:var(--olivo-luz)}
.capa--trazo .titular em{color:var(--olivo-texto)}
.portada__pie{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;align-items:flex-end;gap:26px;pointer-events:none;padding-bottom:max(30px,env(safe-area-inset-bottom,0px))}
.portada__luz{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;width:min(340px,100%);pointer-events:auto}
/* Fila del mando: el icono de reiniciar delante del horizonte, la jornada después */
.luz__fila{display:flex;align-items:flex-start;gap:12px}
.luz__fila .jornada{flex:1;min-width:0}
.portada__pie .rotulo{font-size:11px}
/* Estado: la hora real de Málaga */
.luz__estado{text-align:right;white-space:nowrap}
.luz__hora:not(:empty)::before{content:", "}
.jornada__icono{display:none}
/* Reiniciar: a la altura del horizonte; apagado mientras se ve la luz de ahora */
.luz__ahora{flex:none;display:grid;place-items:center;width:28px;height:28px;margin-top:20px;opacity:.9;transition:opacity .4s var(--ease)}
.luz__ahora svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .6s var(--ease)}
html:not(.tactil) .luz__ahora:hover svg{transform:rotate(-120deg)}
.luz__ahora:disabled{opacity:.32;cursor:default}
.luz__ahora:disabled svg{transform:none}
/* Jornada: el horizonte con las tres marcas del logo y la trayectoria del sol, de mediodía a la noche */
.jornada{position:relative;height:80px}
.jornada__traza{position:absolute;left:0;top:0;width:100%;height:60px;overflow:visible;fill:none;stroke:currentColor}
.jornada__traza path{vector-effect:non-scaling-stroke}
.jornada__h{stroke-width:1}
.jornada__m{stroke-width:1}
.jornada__arco{stroke-width:1;stroke-dasharray:2 5;opacity:.7}
.jornada__p{position:absolute;top:0;bottom:0;width:33.334%;display:flex;align-items:flex-end;justify-content:center;font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;opacity:.6;transition:opacity .4s var(--ease)}
.jornada__p span{padding-left:.24em}
.jornada__p[data-luz="dia"]{left:0}.jornada__p[data-luz="tarde"]{left:33.333%}.jornada__p[data-luz="noche"]{left:66.666%}
html:not(.tactil) .jornada__p:hover{opacity:.9}
.jornada__p[aria-pressed="true"]{opacity:1}
.jornada__p:focus-visible{outline-offset:2px}
/* El sol: arriba a mediodía, en el horizonte al atardecer, bajo el horizonte de noche. Recorre la curva (horizontal y vertical con ritmos distintos) */
.jornada__sol{position:absolute;left:16.667%;top:6px;width:13px;height:13px;margin:-6.5px 0 0 -6.5px;border-radius:50%;background:var(--arena);box-shadow:0 0 0 5px rgba(227,201,154,.24);pointer-events:none;transition:left 1.2s cubic-bezier(.3,.7,.4,1),top 1.2s cubic-bezier(.6,0,.7,.3),background-color .8s var(--ease),box-shadow .8s var(--ease)}
.portada-pista[data-luz="tarde"] .jornada__sol{left:50%;top:34px;background:#E9A86B;box-shadow:0 0 0 5px rgba(233,168,107,.28)}
.portada-pista[data-luz="noche"] .jornada__sol{left:83.333%;top:54px;background:transparent;box-shadow:inset 0 0 0 1.5px #D7DEEC,0 0 0 5px rgba(215,222,236,.14)}
.capa--trazo .portada__luz{pointer-events:none} /* sobre el boceto, el mando es dibujo: el que se pulsa es el de la casa */
.capa--trazo .jornada__sol,.portada-pista[data-luz] .capa--trazo .jornada__sol{background:var(--olivo-texto);box-shadow:0 0 0 5px rgba(86,99,63,.16)}
/* Texto sobre la foto: sombra muy suave para que se lea sobre cualquier zona clara */
.capa--casa .portada__pie{color:var(--blanco);text-shadow:0 1px 14px rgba(0,0,0,.35)}
/* Sobre el boceto, el texto se reserva su papel: el lápiz se aparta alrededor de las letras, como en un plano rotulado */
.capa--trazo .titular,.capa--trazo .portada__luz{position:relative}
.capa--trazo .titular::before,.capa--trazo .portada__luz::before{content:"";position:absolute;z-index:-1;pointer-events:none;background:radial-gradient(closest-side,rgba(253,247,238,.97) 45%,rgba(253,247,238,.7) 72%,rgba(253,247,238,0))}
/* Un solo papel para el rótulo y el titular: cubre los dos con un borde muy difuso */
.capa--trazo .titular::before{inset:-1em -.32em -.3em -.4em;background:rgba(253,247,238,.95);border-radius:.5em;filter:blur(18px)}
.capa--trazo .portada__luz::before{inset:-26px -48px -22px -40px}
/* La regla: las dos verticales del logo y su horizontal */
.regla{position:absolute;top:0;bottom:0;left:0;width:8px;transform:translateX(calc(var(--p) * 100cqw - 1px));will-change:transform;pointer-events:none;z-index:5;transition:opacity .4s var(--ease)}
.regla__l{position:absolute;top:0;bottom:0;width:1px;background:var(--tinta);opacity:.82}
.regla__l:first-child{left:0}.regla__l:nth-child(2){left:7px}
.regla__h{position:absolute;top:var(--horizonte);left:-34px;width:76px;height:1px;background:var(--tinta)}
.portada-pista.en-borde .regla{opacity:0}
/* La cortina, ligada al scroll en el propio navegador: la mueve el compositor, sincronizada con el dedo y sin pasar por el JS
(que en un gesto rápido del móvil se saltaba fotogramas). Va del principio de la página (la pista empieza en 0) al 85 %
de su recorrido, con la misma curva que antes. Sin soporte (Firefox), la mueve el JS con --p */
@supports (animation-timeline:scroll()){
.capa--casa,.capa--casa > .capa__lienzo,.portada__abajo .capa--trazo,.portada__abajo .capa--trazo > .capa__lienzo,.regla:not(.regla--visor){animation-duration:1ms;animation-timing-function:cubic-bezier(.455,.03,.515,.955);animation-fill-mode:both;animation-timeline:scroll(root);animation-range:0 var(--fin)}
.capa--casa{animation-name:casa-capa}
.capa--casa > .capa__lienzo{animation-name:casa-lienzo}
.portada__abajo .capa--trazo{animation-name:boceto-capa}
.portada__abajo .capa--trazo > .capa__lienzo{animation-name:boceto-lienzo}
.regla:not(.regla--visor){animation-name:regla-cruza,regla-borde;animation-timing-function:cubic-bezier(.455,.03,.515,.955),linear}
}
/* Mismos valores que con --p: la casa entra desde la izquierda y su lienzo se mueve al revés; el boceto de abajo sale por la derecha */
@keyframes casa-capa{from{transform:translateX(-100%)}to{transform:translateX(0)}}
@keyframes casa-lienzo{from{transform:translateX(100%)}to{transform:translateX(0)}}
@keyframes boceto-capa{from{transform:translateX(0)}to{transform:translateX(100%)}}
@keyframes boceto-lienzo{from{transform:translateX(0)}to{transform:translateX(-100%)}}
@keyframes regla-cruza{from{transform:translateX(-1px)}to{transform:translateX(calc(100cqw - 1px))}}
@keyframes regla-borde{0%,100%{opacity:0}.6%,99.4%{opacity:1}}
.horizonte{position:absolute;left:0;right:0;top:var(--horizonte);height:1px;background:var(--tinta);opacity:0;transform:scaleX(0);transform-origin:left;pointer-events:none;z-index:4}
/* La línea del logo va en las dos versiones de lo de abajo: en tinta sobre el boceto y en blanco sobre la foto; la cortina las recorta */
.capa--casa .desliza{color:var(--blanco)}
.desliza{position:absolute;z-index:6;left:0;right:0;margin-inline:auto;bottom:calc(var(--bajo) + max(44px,env(safe-area-inset-bottom,0px)));width:168px;height:7px;color:var(--tinta);pointer-events:none}
/* Invitación a bajar sin texto: la horizontal se traza una vez y al llegar al final se dibujan las dos verticales del logo,
la fina y luego la gruesa (como en el logo: la fina empieza más abajo, las dos acaban igual y la horizontal sigue un poco tras la gruesa) */
.desliza i{position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(currentColor,currentColor) 0 0/var(--trazo) 100% no-repeat;animation:traza-una 1.8s cubic-bezier(.6,0,.3,1) .5s both}
.desliza__v{position:absolute;background:linear-gradient(currentColor,currentColor) 0 0/100% var(--gruesa) no-repeat;animation:baja-una .6s var(--ease) both}
.desliza__v--fina{animation-delay:2.25s}
.desliza__v--gruesa{animation-delay:2.5s}
/* Entrada: la línea del horizonte se traza y el boceto se dibuja */
.portada-pista.intro .horizonte{animation:horizonte 2.4s var(--ease) forwards}
.portada-pista.intro .capa--trazo .capa__img{animation:dibuja 1.6s var(--suave) .4s both}
.portada-pista.intro .capa--trazo .capa__texto,.portada-pista.intro .desliza{animation:asoma 1.2s var(--ease) 1.2s both}
.portada-pista.intro .desliza i{animation-delay:1.7s}
.portada-pista.intro .desliza__v--fina{animation-delay:3.45s}
.portada-pista.intro .desliza__v--gruesa{animation-delay:3.7s}
@keyframes traza-una{from{--trazo:0%}} /* tamaño del fondo, no transform: la línea se pinta siempre ajustada al píxel */
@keyframes baja-una{from{--gruesa:0%}}
@keyframes horizonte{0%{opacity:.8;transform:scaleX(0)}40%{opacity:.8;transform:scaleX(1)}100%{opacity:0;transform:scaleX(1)}}
@keyframes dibuja{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes asoma{from{opacity:0}to{opacity:1}}
/* 01 · Declaración */
.declaracion__texto{grid-column:2/12;font-size:clamp(32px,3.9vw,64px);line-height:1.12;text-wrap:pretty}
.marca{position:relative;white-space:nowrap;color:var(--olivo-texto)}
.subraya{position:absolute;left:-2%;bottom:-.16em;width:106%;height:.34em;overflow:visible;fill:none;stroke:var(--olivo-texto);stroke-width:1.6;stroke-linecap:round}
.subraya path{stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset 1.3s var(--ease) .3s}
.subraya path:last-child{transition-delay:1.4s;transition-duration:.35s}
.js .declaracion:not(.visto) .subraya path{stroke-dashoffset:1}
/* Soluciones: seis necesidades con su icono, que se dibuja al llegar; el detalle, en una lista corta */
.hacemos{grid-column:2/12;margin-top:clamp(56px,6vw,96px)}
.hacemos__titulo{margin-bottom:clamp(16px,1.6vw,22px);color:var(--gris)}
.hacemos__grupos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px clamp(20px,2vw,32px)} /* seis soluciones: tres por fila */
.hacemos__g{display:grid;align-content:start;gap:12px;padding-top:20px;border-top:1px solid var(--tinta);transition:opacity .8s var(--ease) calc(var(--i) * .09s + .1s),transform .9s var(--ease) calc(var(--i) * .09s + .1s)}
.hacemos__ico{width:26px;height:26px;fill:none;stroke:var(--olivo-texto);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.hacemos__ico path{stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset 1.3s var(--ease) calc(var(--i) * .09s + .35s)}
.js .hacemos:not(.visto) .hacemos__g{opacity:0;transform:translateY(14px)}
.js .hacemos:not(.visto) .hacemos__ico path{stroke-dashoffset:1}
.hacemos__g h3{font-weight:300;font-size:clamp(22px,1.8vw,27px);line-height:1.1;text-wrap:balance}
.hacemos__g ul{display:grid;gap:7px;font-size:14.5px;line-height:1.35;color:var(--gris)}
.hacemos__g li{position:relative;padding-left:17px}
.hacemos__g li::before{content:"";position:absolute;left:0;top:.42em;width:7px;height:7px;background:linear-gradient(currentColor,currentColor) 50%/1px 100% no-repeat,linear-gradient(currentColor,currentColor) 50%/100% 1px no-repeat;color:var(--olivo-texto)}
.por-palabras .pal{display:inline-block;opacity:0;transform:translateY(.32em);transition:opacity .9s var(--ease),transform 1.1s var(--ease);transition-delay:calc(var(--i) * 32ms)}
.declaracion.visto .por-palabras .pal{opacity:1;transform:none}
/* 02 · Obras */
.obras__titulo{font-size:clamp(40px,4.6vw,76px);line-height:1;margin-bottom:clamp(48px,6vw,96px)}
/* 03 · Diseño: confort desde el diseño (luz, aire y materiales sobre la misma casa) */
.orienta__cab{margin-bottom:clamp(48px,6vw,88px);align-items:end;row-gap:20px}
.orienta__cab h2{grid-column:1/9;font-size:clamp(36px,4.2vw,70px);line-height:1.04;text-wrap:balance}
.orienta__cab p{grid-column:9/13;font-size:16px;opacity:.82;max-width:34ch}
.orienta__cuerpo{align-items:center;row-gap:48px}
.orienta .alterna{grid-column:1/8}
.seccion-solar{grid-column:9/13;display:grid;gap:16px} /* una columna libre entre la foto y el dibujo, y el dibujo alineado con el texto de arriba */
.seccion-solar svg{width:100%;height:auto;overflow:visible}
.seccion-solar figcaption{font-size:10.5px;opacity:.7;line-height:1.7;transition:opacity .35s var(--ease)}
.ss-casa path,.ss-casa rect{fill:none;stroke:var(--cal);stroke-width:2}
.ss-casa .ss-volumen{fill:rgba(242,239,232,.07)}
.ss-casa .ss-forjado{stroke-width:5}
.ss-casa .ss-vidrio{stroke-width:1.2;opacity:.75}
.ss-casa .ss-suelo{stroke-width:2.5}
.ss-casa .ss-terreno{stroke-width:1;opacity:.45}
.ss-rayo{transition:opacity .6s var(--ease)}
.ss-rayo path{fill:none;stroke:var(--arena);stroke-width:2.4}
.ss-rayo .ss-mancha{stroke-width:9;stroke-dasharray:none;opacity:.85}
.ss-sol{fill:var(--arena)}
.ss-rayo text,.ss-nota{fill:var(--cal);font-family:var(--f-texto);font-size:26px;letter-spacing:.08em} /* unidades del dibujo: ≥ 12 px en pantalla desde 320 px */
.ss-rayo text{fill:var(--arena)}
.ss-nota{opacity:.75}
.ss-punto{fill:var(--cal)}
.seccion-solar[data-mes="0"] .ss-dic,.seccion-solar[data-mes="1"] .ss-junio{opacity:.18}
/* Confort desde el diseño: la misma sección enseña una capa cada vez (luz, aire, materiales). Solo cambia lo que cambia:
la casa se queda quieta y cada capa aparece en su sitio */
.ss-capa{opacity:0;visibility:hidden;transition:opacity .6s var(--ease),visibility 0s linear .6s}
.seccion-solar[data-capa="luz"] .ss-capa--luz,.seccion-solar[data-capa="aire"] .ss-capa--aire,.seccion-solar[data-capa="materiales"] .ss-capa--materiales{opacity:1;visibility:visible;transition:opacity .7s var(--ease) .15s,visibility 0s}
.ss-casa .ss-alta{stroke-width:1.2;opacity:.75;transition:stroke .5s var(--ease),opacity .5s var(--ease)}
.seccion-solar[data-capa="aire"] .ss-alta{stroke:var(--arena);opacity:1}
.seccion-solar[data-capa="aire"] .ss-vidrio{opacity:.18;transition:opacity .6s var(--ease)} /* los ventanales, abiertos */
.ss-vidrio{transition:opacity .6s var(--ease)}
.ss-nota--viva{opacity:1;fill:var(--arena)}
/* Aire: entra fresco por la terraza y sale caliente por la ventana alta; las líneas avanzan sin parar, despacio */
.ss-flujo{fill:none;stroke:var(--arena);stroke-width:2.2;stroke-linecap:round;stroke-dasharray:18 14;animation:fluye 2.4s linear infinite;animation-delay:var(--d,0s);opacity:.9}
@keyframes fluye{to{stroke-dashoffset:-64}}
.seccion-solar:not([data-capa="aire"]) .ss-flujo{animation-play-state:paused}
/* Materiales: el detalle del muro, como en un plano (llamada en la fachada y sus capas a escala), las mismas de la foto */
.ss-corte{fill:none;stroke:var(--cal);stroke-width:1.5}
/* Mientras se ve el detalle del muro, la casa se aparta */
.ss-casa{transition:opacity .5s var(--ease)}
.seccion-solar[data-capa="materiales"] .ss-casa{opacity:0}
.ss-c rect{stroke:var(--cal);stroke-width:1.5}
.ss-c--1{fill:#EFEAE0}
.ss-c--2 rect{fill:#B4664A}
.ss-c--2 .ss-huecos{fill:var(--olivo);stroke:none}
.ss-c--3 rect{fill:#A88A5B}
.ss-c--3 .ss-fibra{fill:none;stroke:#6F5833;stroke-width:1.2}
.ss-c--4 rect{fill:#D3B588}
.ss-c--4 .ss-veta{fill:none;stroke:#A07F50;stroke-width:1}
.ss-num{fill:var(--cal);font-family:var(--f-voz);font-style:italic;font-size:26px}
/* Las capas entran una tras otra, de fuera adentro, como se construye el muro (solo opacidad: nada se desplaza) */
.ss-c{opacity:0;transition:opacity .45s var(--ease)}
.seccion-solar[data-capa="materiales"] .ss-c{opacity:1}
.seccion-solar[data-capa="materiales"] .ss-c--1{transition-delay:.3s}
.seccion-solar[data-capa="materiales"] .ss-c--2{transition-delay:.45s}
.seccion-solar[data-capa="materiales"] .ss-c--3{transition-delay:.6s}
.seccion-solar[data-capa="materiales"] .ss-c--4{transition-delay:.75s}
.seccion-solar figcaption.cambia{opacity:0}
/* La foto de la luz: los dos días sobre la propia foto, con su línea de progreso (como las historias): se ve que hay dos,
cuál se ve y cuánto le queda; se pueden pulsar. En aire y materiales se retiran */
.confort__dias{position:absolute;z-index:2;left:clamp(14px,1.6vw,22px);right:clamp(14px,1.6vw,22px);bottom:clamp(12px,1.4vw,18px);display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.2vw,16px);transition:opacity .45s var(--ease),visibility 0s}
.confort__dias.fuera{opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility 0s linear .35s}
.confort__dias button{position:relative;display:flex;align-items:flex-end;min-height:40px;padding:0 0 10px;text-align:left;color:#fff;opacity:.72;text-shadow:0 1px 10px rgba(0,0,0,.55);transition:opacity .4s var(--ease)}
.confort__dias button[aria-pressed="true"]{opacity:1}
.confort__dias .rotulo{font-size:12px;letter-spacing:.22em}
.confort__dias button::before{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(255,255,255,.38)}
.confort__dias i{position:absolute;left:0;right:0;bottom:0;height:2px;background:#fff;transform:scaleX(0);transform-origin:left}
.confort__dias button[data-estado="hecho"] i{transform:scaleX(1)}
.confort__dias button[data-estado="ahora"] i{animation:llena var(--dur,5s) linear both}
.confort__dias button:focus-visible{outline:1px solid var(--cal);outline-offset:3px}
.dias__corto{display:none}
/* sombra suave bajo los días para que se lean sobre cualquier foto */
.alterna__marco:has(.confort__dias)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:96px;background:linear-gradient(to top,rgba(10,12,14,.66),rgba(10,12,14,.38) 45%,rgba(10,12,14,0));pointer-events:none;transition:opacity .45s var(--ease)}
.alterna__marco:has(.confort__dias.fuera)::after{opacity:0}
.alterna__pie.confort__pie{grid-template-columns:repeat(3,minmax(0,1fr))}
.confort__nota{display:none}
.alterna__marco img[data-foto="materiales"]{object-position:45% 50%}
.alterna__marco img[data-foto="aire"]{object-position:50% 60%}
/* La foto que cambia en su sitio (Diseño): el marco, sus fotos y el pie con su línea de progreso */
.alterna{grid-column:1/13;display:grid;gap:22px}
.alterna__marco{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--papel)}
.alterna__marco img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 85%;opacity:0;transition:opacity 1.4s var(--ease)}
.alterna__marco img.activa{opacity:1}
.alterna__pie{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.6vw,24px)}
.alterna__pie button{position:relative;display:grid;gap:4px;text-align:left;padding-top:16px;opacity:.5;transition:opacity .5s var(--ease)}
.alterna__pie button[aria-pressed="true"]{opacity:1}
.alterna__pie button::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:currentColor;opacity:.3}
.alterna__pie i{position:absolute;left:0;top:0;height:1px;width:100%;background:currentColor;transform:scaleX(0);transform-origin:left}
.alterna__pie button[aria-pressed="true"] i{animation:llena var(--dur,7s) linear both}
/* Las líneas de lo que falta son animaciones (no transiciones) para poder pararlas: con el ratón encima del dibujo o el
dedo en la casa, el temporizador se para y ellas con él */
@keyframes llena{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.quieto .confort__dias button[data-estado] i,.quieto .alterna__pie button[aria-pressed] i{animation-play-state:paused}
.alterna__pie .voz{font-size:clamp(20px,1.7vw,26px);line-height:1.25}
.alterna__pie .rotulo{font-size:10.5px}
/* 04 · Tecnología: una casa real, del render a la obra, y un dormitorio del día al anochecer */
.modelo__rejilla{align-items:center;row-gap:40px}
.modelo__texto{grid-column:1/5;display:grid;gap:26px;align-content:center}
.modelo__texto h2{font-size:clamp(36px,3.9vw,64px);line-height:1.04;text-wrap:balance}
.modelo__texto>p{font-size:16px;line-height:1.65;opacity:.82;max-width:34ch}
.modelo__modo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.6vw,24px);margin-top:10px}
.modelo__modo button{position:relative;display:grid;gap:4px;text-align:left;padding-top:16px;opacity:.5;transition:opacity .5s var(--ease)}
.modelo__modo button::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:currentColor;opacity:.3}
.modelo__modo button::after{content:"";position:absolute;left:0;top:0;height:1px;width:100%;background:var(--arena);transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease)}
.modelo__modo button[aria-pressed="true"]{opacity:1}
.modelo__modo button[aria-pressed="true"]::after{transform:scaleX(1)}
.modelo__modo .voz{font-size:clamp(20px,1.7vw,26px);line-height:1.25}
.modelo__modo .rotulo{font-size:10.5px}
.modelo__vista{grid-column:6/13;margin:0}
/* Del render a la obra: la obra entra desde la izquierda con la vertical del logo en su canto, la cortina del proceso
(--r la mueve el JS, que deja la regla en un píxel entero de pantalla) */
.proyecta{position:relative;aspect-ratio:16/9;overflow:hidden;background:#1A2028}
.proyecta__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.proyecta__capa{position:absolute;inset:0;overflow:hidden;transform:translateX(calc((var(--r,0) - 1) * 100%))}
.proyecta__lienzo{position:absolute;inset:0;transform:translateX(calc((1 - var(--r,0)) * 100%))}
.proyecta.sin-regla .regla{opacity:0}
html:not(.js) .modelo__modo,html:not(.js) .dentro__vista .modelo__sol{display:none}
/* Y por dentro: el mismo dormitorio de día y al anochecer, que se funden con la línea */
.dentro__texto{grid-column:9/13;grid-row:2;display:grid;gap:18px;align-content:center;margin-top:clamp(40px,6vw,96px)}
.dentro__texto h3{font-size:clamp(28px,2.6vw,42px);line-height:1.08;text-wrap:balance}
.dentro__texto p{font-size:16px;line-height:1.65;opacity:.82;max-width:30ch}
.dentro__vista{grid-column:1/8;grid-row:2;margin:clamp(40px,6vw,96px) 0 0;display:grid;gap:16px}
.dentro__escena{position:relative;aspect-ratio:1600/893;overflow:hidden;background:#1A2028}
.dentro__escena img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dentro__escena .dentro__noche{opacity:var(--k,0)}
.modelo__escena{position:relative;aspect-ratio:1000/640;overflow:hidden;cursor:grab;touch-action:pan-y;outline:none;background:radial-gradient(ellipse 70% 60% at 50% 62%,rgba(227,201,154,.07),rgba(227,201,154,0) 70%)}
.modelo__escena.girando{cursor:grabbing}
.modelo__escena:focus-visible{box-shadow:inset 0 0 0 1px var(--arena)}
.modelo__svg{position:absolute;inset:0;width:100%;height:100%}
.modelo__gira{position:absolute;right:14px;bottom:12px;display:flex;align-items:center;gap:8px;font-size:10px;opacity:.6;transition:opacity .5s var(--ease);pointer-events:none}
.modelo__gira svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.modelo__escena.girando .modelo__gira{opacity:0}
/* Piezas del dibujo */
.m-terraza{fill:#1A2028;stroke:none}
.m-junta{fill:none;stroke:rgba(242,239,232,.09);stroke-width:1}
.m-agua{fill:rgba(140,178,186,.22);stroke:rgba(242,239,232,.4);stroke-width:1}
.m-sombra{fill:rgba(0,0,0,.42)}
.m-sombra--vidrio{fill:rgba(0,0,0,.38)}
.m-plano{stroke:rgba(242,239,232,.9);stroke-width:1.2;stroke-linejoin:round}
.m-cal .m-detalle{stroke:rgba(16,20,26,.55)} /* los huecos, en tinta sobre la cal */
.m-vidrio .m-plano{fill:rgba(120,150,160,.16)}
.m-sol__disco{fill:var(--arena)}
.m-sol__halo{fill:rgba(227,201,154,.18)}
.m-detalle{fill:none;stroke:rgba(242,239,232,.6);stroke-width:1}
.m-vidrio .m-detalle{stroke:rgba(227,201,154,.75)}
.m-tronco{fill:none;stroke:rgba(242,239,232,.45);stroke-width:1.2}
.m-copa{fill:rgba(164,176,125,.2);stroke:rgba(164,176,125,.7);stroke-width:1;stroke-linejoin:round}
/* La línea del día al anochecer; la bola es el sol (la misma de la portada) */
.modelo__sol{display:grid;gap:12px}
.modelo__linea{display:flex;align-items:center;gap:14px}
.modelo__linea .rotulo{font-size:10px;opacity:.6;font-variant-numeric:tabular-nums}
.modelo__hora{flex:1;min-width:0;height:28px;margin:0;background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer}
.modelo__hora::-webkit-slider-runnable-track{height:1px;background:linear-gradient(var(--arena),var(--arena)) 0 0/calc(var(--sol,0) * 100%) 100% no-repeat,rgba(242,239,232,.3)}
.modelo__hora::-moz-range-track{height:1px;background:rgba(242,239,232,.3)}
.modelo__hora::-moz-range-progress{height:1px;background:var(--arena)}
.modelo__hora::-webkit-slider-thumb{-webkit-appearance:none;width:15px;height:15px;margin-top:-7px;border:0;border-radius:50%;background:var(--arena);box-shadow:0 0 0 6px rgba(227,201,154,.2)}
.modelo__hora::-moz-range-thumb{width:15px;height:15px;border:0;border-radius:50%;background:var(--arena);box-shadow:0 0 0 6px rgba(227,201,154,.2)}
.modelo__hora:focus-visible{outline:1px solid var(--arena);outline-offset:4px}
/* El visor de la Luz en Diseño: pestañas (las mismas líneas que los botones de capa, en pequeño) y la casa en 3D (el
modelo de arriba) o en sección. El aire y los materiales se ven solo en sección: las pestañas se apagan */
.vistas__tabs{display:flex;gap:22px;transition:opacity .5s var(--ease),visibility 0s}
.seccion-solar:not([data-capa="luz"]) .vistas__tabs{opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility 0s linear .4s}
.vistas__tabs button{position:relative;padding:6px 0 10px;min-height:44px;opacity:.55;transition:opacity .4s var(--ease)}
.vistas__tabs button[aria-selected="true"]{opacity:1}
.vistas__tabs .rotulo{font-size:10.5px}
.vistas__tabs i{position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--arena);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.vistas__tabs button[aria-selected="true"] i{transform:scaleX(1)}
.vistas__tabs button:focus-visible{outline:1px solid var(--arena);outline-offset:3px}
.vistas{position:relative;aspect-ratio:1000/640;overflow-x:clip} /* la vista que se va no ensancha la página */
.vista{position:absolute;inset:0;display:grid;place-items:center;transition:opacity .55s var(--ease),transform .7s var(--ease),visibility 0s}
.vista--plano{touch-action:pan-y}
.vista--plano>svg{width:100%;height:auto;overflow:visible}
.vista--3d .modelo__escena{width:100%}
.vista--3d .modelo__svg{height:100%;overflow:hidden}
.seccion-solar[data-capa="luz"][data-vista="3d"] .vista--plano{opacity:0;transform:translateX(24px);visibility:hidden;transition:opacity .35s var(--ease),transform .5s var(--ease),visibility 0s linear .5s}
.seccion-solar[data-vista="plano"] .vista--3d,.seccion-solar:not([data-capa="luz"]) .vista--3d{opacity:0;transform:translateX(-24px);visibility:hidden;transition:opacity .35s var(--ease),transform .5s var(--ease),visibility 0s linear .5s}
html:not(.js) .vistas__tabs,html:not(.js) .vista--3d{display:none}
html:not(.js) .seccion-solar[data-capa][data-vista] .vista--plano{opacity:1;transform:none;visibility:visible}
/* 05 · Cómo trabajamos: escena fija a pantalla completa; el scroll barre de una etapa a la siguiente */
.proceso{padding-block:clamp(40px,5vw,80px) 0}
.proceso-pista{position:relative;height:480vh} /* seis momentos: algo más de recorrido para que ninguno pase de golpe */
.proceso__fijo{position:sticky;top:0;height:100vh;height:100lvh;padding-top:var(--barra);padding-bottom:var(--bajo);display:grid;align-items:center;overflow:hidden}
.proceso__in{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(28px,4vh,52px) clamp(16px,2vw,32px);align-items:center;width:100%}
.proceso__in .replanteo{grid-column:1/13;margin-bottom:0}
.proceso__lado{grid-column:1/5;display:grid;gap:clamp(24px,4vh,44px);align-content:center}
.proceso__titulo{font-size:clamp(36px,3.6vw,64px);line-height:1}
.pasos{position:relative;display:grid;padding-left:22px}
.pasos::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:1px;background:currentColor;opacity:.18}
.pasos::after{content:"";position:absolute;left:0;top:6px;bottom:6px;width:1px;background:var(--olivo-texto);transform-origin:top;transform:scaleY(var(--avance,0));transition:transform .2s linear}
.paso{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:16px;align-items:baseline;padding-block:clamp(6px,1.1vh,12px);opacity:.38;transition:opacity .5s var(--ease)}
.paso.activo{opacity:1}
.paso__n{font-style:italic;font-size:clamp(17px,1.3vw,20px);color:var(--olivo-texto);font-variant-numeric:tabular-nums;min-width:1.6em}
.paso__nombre{font-size:clamp(24px,2.1vw,34px);line-height:1.1}
.paso__texto{grid-column:2;display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s var(--ease)}
.paso__texto p{overflow:hidden;font-size:15.5px;color:var(--gris);max-width:32ch;opacity:0;transition:opacity .5s var(--ease)}
.paso.activo .paso__texto{grid-template-rows:1fr}
.paso.activo .paso__texto p{opacity:1;padding-top:10px;transition-delay:.15s}
.proceso__visor{grid-column:5/13;display:grid;gap:14px;container-type:inline-size}
.paso-movil{display:none}
.visor{position:relative;height:clamp(300px,min(64svh,78cqw),900px);container-type:size;overflow:hidden;background:var(--papel);--ancla:72%}
.visor__capa{position:absolute;inset:0;overflow:hidden;transform:translateX(calc((var(--r,0) - 1) * 100%));will-change:transform}
.visor__lienzo{position:absolute;inset:0;transform:translateX(calc((1 - var(--r,0)) * 100%));will-change:transform}
.visor__capa[data-capa="0"]{--r:1}
/* Lienzo con la proporción de las fotos que cubre el visor; --ancla hace de object-position y arrastra también las cotas */
.visor__capa img,.visor__cotas{position:absolute;top:50%;left:var(--ancla);width:max(100cqw,100cqh * 2000 / 1116);height:max(100cqh,100cqw * 1116 / 2000);max-width:none;transform:translate(calc(-1 * var(--ancla)),-50%)}
.visor__capa[data-capa="1"] img,.visor__capa[data-capa="2"] img{filter:none}
.visor__cotas{fill:none;stroke:var(--olivo-texto);stroke-width:2.6;pointer-events:none}
.visor__cotas text{fill:var(--olivo-texto);stroke:none;font-family:var(--f-texto);font-size:30px;letter-spacing:.12em}
/* El cajetín va en la esquina de la lámina (el marco del visor), no en la foto: se ve entero con cualquier recorte */
.cajetin{position:absolute;right:clamp(10px,1.4cqw,20px);bottom:clamp(10px,1.4cqw,20px);display:grid;grid-template-columns:auto auto;border:1px solid var(--tinta);background:rgba(253,247,238,.94);color:var(--tinta);font-size:clamp(9px,1.05cqw,12px);letter-spacing:.06em;line-height:1.3;opacity:0;transition:opacity .8s var(--ease) .5s}
.cajetin>span{padding:.45em .9em;border-top:1px solid rgba(27,27,25,.35)}
.cajetin>span:nth-child(2n+1):not(.cajetin__g){border-left:1px solid rgba(27,27,25,.35)}
.cajetin__g{grid-column:1/-1;border-top:0!important;letter-spacing:.3em;text-transform:uppercase;font-size:.9em}
.visor.cotas .cajetin{opacity:1}
.visor.licencia .cajetin{opacity:1}
/* Licencia: el sello de la web (el de las cookies) cae sobre el cajetín, girado y con la tinta irregular */
/* Anclado al cajetín: el sello pisa solo su esquina, sin tapar su texto */
.sello--licencia{--papel-ck:rgba(253,247,238,.86);position:absolute;z-index:1;right:46%;bottom:calc(100% - .5em);width:max-content;max-width:none;white-space:nowrap;margin:0;padding:.7em 1.5em .6em;gap:2px;opacity:0;pointer-events:none}
.sello--licencia .sello__rotulo{font-size:clamp(8px,.85cqw,10px)}
.sello--licencia .sello__que{font-size:clamp(17px,2.5cqw,30px)}
.visor.licencia .sello--licencia{animation:sella .55s cubic-bezier(.2,.85,.25,1) both}
.visor__cotas path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.4s var(--ease)}
.visor.cotas .visor__cotas path{stroke-dashoffset:0}
.regla--visor{transform:translateX(var(--rpx,-1px));z-index:4} /* --rpx: el JS la deja en un píxel entero de pantalla */
.visor.sin-regla .regla--visor{opacity:0}
.visor__pie{display:flex;align-items:center;gap:18px}
.visor__pie .rotulo{font-size:10.5px;white-space:nowrap;color:var(--gris)}
.visor__barra{position:relative;flex:1;height:1px;background:var(--linea)}
.visor__barra i{position:absolute;left:0;top:0;height:1px;width:100%;background:var(--olivo-texto);transform-origin:left;transform:scaleX(var(--avance,0))}
/* 06 · Estudio */
/* La foto de Cristina, entera y apaisada como es (su mesa, los planos y la obra detrás): seis columnas para que no quede
pequeña al lado del texto */
.estudio__img{grid-column:1/7;position:relative}
.estudio__img img{aspect-ratio:1300/866;object-fit:cover;width:100%}
.estudio__img figcaption{margin-top:16px}
.estudio__texto{grid-column:8/13;align-self:center;display:grid;gap:30px}
.estudio__texto h2{font-size:clamp(36px,3.9vw,64px);line-height:1.06;text-wrap:balance}
.estudio__texto > p{font-size:18px;line-height:1.65;max-width:34em;color:#3d3a35}
.garantias{display:grid;border-top:1px solid var(--linea)}
.garantias li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:2px 16px;padding-block:18px;border-bottom:1px solid var(--linea)}
.garantias .cruz{grid-row:1/3;position:relative;width:16px;height:16px;margin-top:8px;color:var(--olivo-texto)}
.cruz::before,.cruz::after{content:"";position:absolute;background:currentColor}
.cruz::before{left:-3px;right:-3px;top:50%;height:1px}
.cruz::after{top:-3px;bottom:-3px;left:50%;width:1px}
.garantias b{font-weight:300;font-size:23px;line-height:1.2}
.garantias span:last-child{font-size:15px;color:var(--gris)}
/* 07 · Contacto: un solo fondo de noche. Texto a la izquierda; a la derecha la imagen en un marco vertical fijo (sticky)
que no crece con el formulario. Marco 4/5 en 5 columnas: la foto queda por debajo de sus píxeles reales (sin ampliar). */
.contacto{color:var(--blanco);background-color:var(--noche);background-image:var(--grano);padding-block:clamp(110px,12vw,190px) clamp(96px,10vw,160px)}
.contacto__rejilla{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2vw,32px);align-items:start}
.contacto__texto{grid-column:1/7;display:flex;flex-direction:column}
.contacto__vista{grid-column:8/13;position:sticky;top:calc(var(--barra) + clamp(16px,4svh,48px));margin:0}
.contacto__fotos{position:relative;width:100%;aspect-ratio:4/5;max-height:calc(100svh - var(--barra) - 2 * clamp(16px,4svh,48px) - 40px);overflow:hidden;background:var(--papel)}
.contacto__fotos img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.03);transition:opacity 1.1s var(--ease),transform 2.2s var(--ease)}
.contacto__fotos img.activa{opacity:1;transform:none}
.contacto__fotos img[data-via=""]{object-position:46% 50%} /* M-01: la hoja dibujada, las llaves y las fotos dentro del recorte */
.contacto__fotos img[data-via="parcela"]{object-position:20% 50%}
.contacto__fotos img[data-via="reforma"]{object-position:62% 50%} /* R-01: el hueco al patio y la isla en el centro del marco */
.contacto__fotos img[data-via="tramite"]{object-position:50% 50%} /* T-01: los planos sellados en el centro del recorte */
/* Pie de la imagen: la misma cota de las obras (línea con sus remates) y el nombre de lo que se ve */
.contacto__pie{position:relative;margin-top:14px;padding-top:12px;border-top:1px solid rgba(255,255,255,.22)}
.contacto__pie::before,.contacto__pie::after{content:"";position:absolute;top:-5px;width:1px;height:9px;background:rgba(255,255,255,.5)}
.contacto__pie::before{left:0}.contacto__pie::after{right:0}
.contacto__pie .rotulo{display:block;opacity:.8;transition:opacity .4s var(--ease)}
.contacto__pie .rotulo.cambia{opacity:0}
.contacto h2{font-size:clamp(44px,5vw,92px);line-height:.98;letter-spacing:-.03em}
.contacto h2 em{color:var(--arena)}
.contacto__pide{margin-top:clamp(48px,5vw,80px)}
/* Las tres vías como filas de un índice: dibujo, nombre y flecha; la línea de abajo se traza en arena */
.vias{display:grid;border-top:1px solid rgba(255,255,255,.2)}
.via{position:relative;display:grid;grid-template-columns:52px minmax(0,1fr) 40px;column-gap:clamp(14px,1.4vw,22px);align-items:center;width:100%;padding-block:clamp(18px,1.6vw,24px);text-align:left;border-bottom:1px solid rgba(255,255,255,.2);transition:opacity .5s var(--ease)}
.via svg{width:52px;height:52px;fill:none;stroke:currentColor;stroke-width:1.25;stroke-linecap:square;overflow:visible;transition:stroke .5s var(--ease)}
.via svg circle{fill:currentColor;stroke:none}
/* Iconos de dos estados: al pasar el ratón, al enfocar o al elegir, lo de antes se recoge y lo de después se traza.
Al salir, al revés: primero se recoge lo nuevo y luego vuelve lo de antes. */
.via__icono path{stroke-dasharray:1;stroke-dashoffset:0}
/* Con el trazo recogido, el remate cuadrado deja un punto: la línea recogida además se apaga */
.via__icono .antes{transition:stroke-dashoffset .45s var(--ease) calc(.3s + var(--d,0s)),opacity 0s linear calc(.3s + var(--d,0s))}
.via__icono .despues{stroke:var(--arena);stroke-dashoffset:1;opacity:0;transition:stroke-dashoffset .35s var(--ease) var(--d,0s),opacity 0s linear calc(.35s + var(--d,0s))} /* lo nuevo, en arena */
.via__icono .mueve{transition:transform .7s var(--ease) .15s} /* el tabique que se traslada: redistribuir es la reforma */
.via__icono circle.antes{transition:opacity .3s var(--ease) .4s}
.via:is(:hover,:focus-visible,[aria-pressed="true"]) .via__icono .antes{stroke-dashoffset:-1;opacity:0;transition:stroke-dashoffset .4s var(--ease) var(--d,0s),opacity 0s linear calc(.4s + var(--d,0s))}
.via:is(:hover,:focus-visible,[aria-pressed="true"]) .via__icono circle.antes{opacity:0;transition:opacity .3s var(--ease)}
.via:is(:hover,:focus-visible,[aria-pressed="true"]) .via__icono .despues{stroke-dashoffset:0;opacity:1;transition:stroke-dashoffset .6s var(--ease) calc(.3s + var(--d,0s)),opacity 0s linear calc(.3s + var(--d,0s))}
.via:is(:hover,:focus-visible,[aria-pressed="true"]) .via__icono .mueve{transform:translateX(14px);transition:transform .8s var(--ease) .2s}
.via__txt{display:grid;gap:4px}
.via .voz{font-size:clamp(22px,1.9vw,30px);line-height:1.15;transition:color .5s var(--ease)}
.via .rotulo{font-size:11px;opacity:.8;text-wrap:balance}
.via .via__flecha{width:40px;height:16px;justify-self:end;stroke-width:1;transition:transform .7s var(--ease),stroke .5s var(--ease)}
.via__l{position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--arena);transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease)}
.via:hover .via__l,.via:focus-visible .via__l,.via[aria-pressed="true"] .via__l{transform:scaleX(1)}
.via:hover .via__flecha{transform:translateX(6px)}
.via[aria-pressed="true"] .via__flecha{transform:rotate(90deg);stroke:var(--arena)} /* apunta al formulario que se abre debajo */
.via[aria-pressed="true"] .voz,.via[aria-pressed="true"] svg{color:var(--arena)}
.vias:has(.via[aria-pressed="true"]) .via:not([aria-pressed="true"]):not(:hover){opacity:.5}
/* El formulario se abre con suavidad debajo de las vías, como una hoja de encargo: una fila por dato */
.formulario-caja{display:grid;grid-template-rows:0fr;transition:grid-template-rows .8s var(--ease)}
.formulario-caja.abierta{grid-template-rows:1fr}
.formulario-caja > .formulario{min-height:0;overflow:hidden;opacity:0;transform:translateY(-10px);transition:opacity .6s var(--ease),transform .8s var(--ease)}
.formulario-caja.abierta > .formulario{opacity:1;transform:none;transition-delay:.15s}
.formulario{display:grid;padding-top:clamp(32px,3vw,44px)}
.formulario__intro{font-size:clamp(22px,1.9vw,28px);line-height:1.25;margin-bottom:clamp(14px,1.4vw,20px);max-width:24em;transition:opacity .35s var(--ease)}
.formulario__intro.cambia{opacity:0}
.campos{display:grid}
.campos label{position:relative;display:grid;grid-template-columns:minmax(0,15em) minmax(0,1fr);column-gap:24px;align-items:baseline;padding-block:16px 12px;border-bottom:1px solid rgba(255,255,255,.2);cursor:text}
.campos label::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--arena);transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease)}
.campos label:focus-within::after{transform:scaleX(1)}
.campos .rotulo{font-size:11px;opacity:.8;transition:opacity .4s var(--ease),color .4s var(--ease)}
.campos label:focus-within .rotulo{opacity:1;color:var(--arena)}
.campos input,.campos textarea{font:inherit;font-size:18px;color:var(--blanco);background:none;border:0;padding:4px 0;resize:none;border-radius:0;min-width:0}
.campos textarea{field-sizing:content;min-height:3lh;max-height:10lh}
.campos input:focus,.campos textarea:focus{outline:none}
.enviar{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-top:clamp(28px,2.6vw,40px);padding:20px 24px;background:var(--arena);color:var(--noche);font-size:12px;letter-spacing:.3em;text-transform:uppercase;transition:background-color .4s var(--ease)}
.enviar .flecha-trazo{width:64px;height:16px;fill:none;stroke:currentColor;stroke-width:1.2;transition:transform .6s var(--ease)}
.enviar:active{background:#EDD8B2;transition-duration:.1s}
html:not(.tactil) .enviar:hover{background:#EDD8B2}
html:not(.tactil) .enviar:hover .flecha-trazo{transform:translateX(8px)}
.formulario__nota{margin-top:14px;font-size:11px;color:var(--arena);text-wrap:balance}
.formulario__trampa{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} /* campo trampa: invisible, lo rellenan los robots */
.formulario.enviando .enviar{opacity:.6;cursor:progress}
.formulario.enviando .enviar .flecha-trazo{animation:enviando 1.1s var(--ease) infinite}
@keyframes enviando{50%{transform:translateX(8px)}}
/* Consulta recibida: la hoja deja paso al sello de la web (el de las cookies y la licencia), estampado con la fecha */
.formulario-caja>.formulario__hecho{min-height:0;display:grid;justify-items:start;gap:22px;padding-top:clamp(32px,3vw,44px)}
.formulario__hecho:focus{outline:none}
.sello--recibido{--papel-ck:#FDF7EE;animation:sella .55s cubic-bezier(.2,.85,.25,1) .1s both}
.formulario__hecho-txt{max-width:34em;font-size:15px;line-height:1.6;color:rgba(255,255,255,.78)}
/* Lo primero que pide la ley al recoger datos: quién, para qué y dónde están tus derechos */
.formulario__aviso{margin-top:16px;max-width:36em;font-size:13px;line-height:1.55;color:rgba(255,255,255,.72)}
.formulario__aviso a{color:var(--blanco)}
/* O directamente: correo y teléfono, como los datos de la ficha de una obra */
.contacto__datos{display:flex;flex-wrap:wrap;gap:20px clamp(40px,5vw,80px);margin:clamp(56px,6vw,96px) 0 0;padding-top:24px;border-top:1px solid rgba(255,255,255,.2)}
.contacto__datos div{display:grid;gap:8px}
.contacto__datos dt{font-size:11px;opacity:.75}
.contacto__datos dd{margin:0;font-family:var(--f-voz);font-weight:300;font-size:clamp(20px,1.6vw,24px);line-height:1.2}
.pie{border-top:1px solid var(--linea);padding-block:36px max(40px,env(safe-area-inset-bottom,0px))}
.pie__in{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:20px;color:var(--gris)}
.pie .logo{width:clamp(118px,10vw,150px);color:var(--tinta)} /* como en la cabecera: a 96 px ARQUITECTOS no se leía (3,7 px de alto) */
.pie__nota{font-size:12px;letter-spacing:.04em}
.pie__legal{display:flex;flex-wrap:wrap;gap:8px 24px}
/* ——— Cookies: el cajetín de la página ———
Cabecera en olivo con la galleta, la hoja en papel y dos botones gemelos para rechazar y aceptar (la AEPD pide que estén
al mismo nivel: ninguno destaca sobre el otro). Al decidir, la elección se sella con la fecha y la hoja se pliega en un
círculo olivo que se queda en la esquina: el botón de las cookies, que la vuelve a abrir. */
.cookies{--papel-ck:#FDF7EE;--borde:rgba(27,27,25,.14);--velo-olivo:rgba(70,81,58,.07);position:fixed;z-index:58;right:clamp(12px,2.2vw,32px);bottom:calc(clamp(12px,2.2vw,32px) + env(safe-area-inset-bottom,0px));width:min(440px,calc(100vw - 24px));max-height:calc(100svh - 24px);display:flex;flex-direction:column;color:var(--tinta);background:var(--papel-ck) var(--grano);box-shadow:0 34px 70px -30px rgba(16,20,26,.6),0 2px 10px -4px rgba(16,20,26,.2),0 0 0 1px rgba(27,27,25,.1);clip-path:inset(0 0 0 0 round 0);transition:clip-path .7s var(--suave),opacity .45s var(--ease),transform .6s var(--ease),background-color .5s var(--ease)}
.cookies > *{transition:opacity .35s var(--ease) .12s}
/* Entra subiendo; al decidir se pliega en el círculo del botón (o, en la portada, donde el botón no está, baja y se va) */
.cookies.entra{opacity:0;transform:translateY(16px)}
.cookies.pliega,.cookies.abre{clip-path:inset(calc(100% - 48px) 0 0 calc(100% - 48px) round 24px);background-color:var(--olivo)}
.cookies.pliega{transition:clip-path .7s var(--suave),background-color .45s var(--ease)}
.cookies.pliega > *,.cookies.abre > *{opacity:0;transition:opacity .2s linear}
.cookies.abre,.cookies.abre > *{transition:none}
.cookies.se-va{opacity:0;transform:translateY(28px);transition:opacity .45s var(--ease),transform .5s var(--ease)}
/* Cabecera: la galleta se dibuja al aparecer */
.cookies__cab{display:flex;align-items:center;gap:10px;padding:13px 18px;color:var(--cal);background:var(--olivo) var(--grano)}
.cookies__cab .rotulo{font-size:10.5px;letter-spacing:.3em}
.cookies__editor{margin-left:auto;color:rgba(242,239,232,.74)}
.cookies__galleta{width:21px;height:21px;flex:none;overflow:visible;fill:none;stroke:var(--arena);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.cookies__galleta path:first-child,.cookies-boton svg path:first-child{stroke-dasharray:1;stroke-dashoffset:0}
.cookies:not([hidden]) .cookies__galleta path:first-child{animation:traza-ck .9s var(--ease) .3s both}
.cookies:not([hidden]) .cookies__galleta path + path{animation:asoma .3s var(--ease) 1s both}
@keyframes traza-ck{from{stroke-dashoffset:1}}
.cookies__hoja{position:relative;display:flex;flex-direction:column;flex:1 1 auto;min-height:0}
.cookies__desliza{overflow:auto;overscroll-behavior:contain;flex:1 1 auto;min-height:0}
.cookies__cuerpo{display:grid;gap:10px;padding:20px 18px 18px}
.cookies__t{font-size:clamp(25px,2vw,29px);line-height:1.08}
.cookies__t em{color:var(--olivo-texto)}
.cookies__cuerpo p{font-size:14.5px;line-height:1.55;color:#3d3a35;max-width:36em}
/* Segunda capa: cada categoría en su ficha, con su icono */
.cookies__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s var(--ease)}
.cookies.con-panel .cookies__panel{grid-template-rows:1fr}
.cookies__panel > div{overflow:hidden;min-height:0;display:grid;gap:8px;padding-inline:12px}
.cookies__cat{display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:6px 12px;padding:13px 14px;background:var(--velo-olivo);border:1px solid rgba(70,81,58,.16);opacity:0;transform:translateY(6px);transition:opacity .4s var(--ease),transform .5s var(--ease)}
.cookies.con-panel .cookies__cat{opacity:1;transform:none;transition-delay:.15s}
.cookies.con-panel .cookies__cat + .cookies__cat{transition-delay:.25s}
.cookies__ico{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;color:var(--arena);background:var(--olivo)}
.cookies__ico svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.cookies__cat h3{font-family:var(--f-voz);font-weight:300;font-size:19px;letter-spacing:-.01em;line-height:1.2}
.cookies__cat > p,.cookies__cat details{grid-column:2/-1}
.cookies__cat > p{font-size:13.5px;line-height:1.5;color:var(--gris)}
.cookies__fijo{padding:5px 10px 5px 11px;border-radius:999px;font-size:10px;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;color:var(--olivo-texto);background:rgba(70,81,58,.13)}
.cookies__cat summary{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:12px;letter-spacing:.06em;color:var(--olivo-texto);list-style:none;padding-block:4px}
.cookies__cat summary::-webkit-details-marker{display:none}
.cookies__cat summary svg{width:10px;height:10px;fill:none;stroke:currentColor;stroke-width:1.4;transition:transform .4s var(--ease)}
.cookies__cat details[open] summary svg{transform:rotate(90deg)}
.cookies__tabla{margin:8px 0 2px;border-top:1px solid var(--borde)}
.cookies__tabla div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);column-gap:12px;padding-block:8px;border-bottom:1px solid var(--borde);font-size:12.5px;line-height:1.45}
.cookies__tabla dt{font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;font-size:11.5px;color:var(--tinta);overflow-wrap:anywhere}
.cookies__tabla dd{margin:0;color:var(--gris)}
.cookies__mas{padding:4px 2px 14px;font-size:12.5px;line-height:1.5;color:var(--gris)}
.cookies__mas a{color:var(--olivo-texto)}
/* Interruptor: apagado en papel, encendido en olivo */
.interruptor{position:relative;flex:none;width:46px;height:26px;border:1px solid rgba(27,27,25,.28);border-radius:13px;background:#E8E0D2;transition:background-color .4s var(--ease),border-color .4s var(--ease)}
.interruptor::after{content:"";position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;background:var(--blanco);box-shadow:0 1px 3px rgba(16,20,26,.3);transition:transform .45s var(--ease)}
.interruptor[aria-checked="true"]{background:var(--olivo);border-color:var(--olivo)}
.interruptor[aria-checked="true"]::after{transform:translateX(20px);background:var(--arena)}
.interruptor:focus-visible{outline:2px solid var(--olivo-texto);outline-offset:3px}
.cookies__elegir{display:flex;align-items:center;gap:10px;width:100%;padding:13px 18px;border-top:1px solid var(--borde);font-size:13px;letter-spacing:.04em;color:var(--tinta);text-align:left;transition:background-color .3s var(--ease)}
.cookies__elegir span{flex:1}
.cookies__ajustes{width:17px;height:17px;flex:none;fill:none;stroke:var(--olivo-texto);stroke-width:1.7;stroke-linecap:round}
.cookies__flecha{width:30px;height:12px;flex:none;fill:none;stroke:currentColor;stroke-width:1.1;transition:transform .5s var(--ease)}
.cookies__elegir:active{background:var(--velo-olivo)}
html:not(.tactil) .cookies__elegir:hover{background:var(--velo-olivo)}
html:not(.tactil) .cookies__elegir:hover .cookies__flecha{transform:translateX(5px)}
.cookies.con-panel .cookies__flecha,html:not(.tactil) .cookies.con-panel .cookies__elegir:hover .cookies__flecha{transform:rotate(-90deg)}
.cookies__elegir:focus-visible{outline:2px solid var(--olivo-texto);outline-offset:-4px}
/* Rechazar y aceptar: gemelos, en noche; al pasar, olivo */
.cookies__acciones{display:grid;grid-template-columns:repeat(var(--n,2),minmax(0,1fr));gap:8px;padding:0 12px 12px}
.cookies__accion{min-height:50px;padding:0 10px;font-size:11.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--cal);background:var(--noche);transition:background-color .35s var(--ease),color .35s var(--ease)}
.cookies__accion span{padding-left:.28em}
.cookies__accion:active{background:var(--olivo);color:var(--arena);transition-duration:.1s}
html:not(.tactil) .cookies__accion:hover{background:var(--olivo);color:var(--arena)}
.cookies__accion:focus-visible{outline:2px solid var(--olivo-texto);outline-offset:2px}
.cookies__accion[data-ck="guardar"]{display:none}
.cookies.con-panel .cookies__acciones{--n:3}
.cookies.con-panel .cookies__accion[data-ck="guardar"]{display:block}
/* El sello: la elección y su fecha, estampadas en olivo sobre la hoja */
.cookies__sello{position:absolute;inset:0;z-index:2;display:grid;place-items:center;padding:16px;background:rgba(253,247,238,.95);opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility 0s linear .3s}
.cookies.firmada .cookies__sello{opacity:1;visibility:visible;transition:opacity .25s var(--ease)}
.sello{display:grid;justify-items:center;gap:6px;max-width:100%;padding:18px 30px 16px;text-align:center;color:var(--olivo-texto);background:var(--papel-ck);border:2px solid currentColor;outline:1px solid currentColor;outline-offset:4px;transform:rotate(-4deg);-webkit-mask-image:var(--tinta-sello);mask-image:var(--tinta-sello);-webkit-mask-size:160px;mask-size:160px}
.cookies.firmada .sello{animation:sella .55s cubic-bezier(.2,.85,.25,1) .08s both}
@keyframes sella{0%{opacity:0;transform:rotate(-11deg) scale(1.7)}55%{opacity:1;transform:rotate(-3deg) scale(.95)}100%{opacity:1;transform:rotate(-4deg) scale(1)}}
.sello__ico{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sello__rotulo{font-size:10px;letter-spacing:.32em;text-transform:uppercase;padding-left:.32em}
.sello__que{font-size:30px;line-height:1.08;color:var(--olivo)}
.sello__fecha{font-size:11.5px;letter-spacing:.26em;padding-left:.26em;font-variant-numeric:tabular-nums}
/* El botón: la galleta en un círculo olivo, siempre en la esquina */
.cookies-boton{position:fixed;z-index:57;right:clamp(12px,2.2vw,32px);bottom:calc(clamp(12px,2.2vw,32px) + env(safe-area-inset-bottom,0px));width:48px;height:48px;display:grid;place-items:center;border-radius:50%;color:var(--cal);background:var(--olivo) var(--grano);box-shadow:0 14px 30px -12px rgba(16,20,26,.65),inset 0 0 0 1px rgba(255,255,255,.1);transition:opacity .4s var(--ease),transform .5s var(--ease),background-color .3s var(--ease),color .3s var(--ease),visibility 0s linear 0s}
.cookies-boton.fuera{opacity:0;transform:scale(.6);visibility:hidden;transition:opacity .3s var(--ease),transform .4s var(--ease),visibility 0s linear .4s}
.cookies-boton svg{width:23px;height:23px;overflow:visible;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .6s var(--ease)}
.cookies-boton.nace svg path:first-child{animation:traza-ck .8s var(--ease) both}
.cookies-boton.nace svg path + path{animation:asoma .3s var(--ease) .6s both}
.cookies-boton:focus-visible{background:var(--noche);color:var(--arena);outline:2px solid var(--olivo-texto);outline-offset:3px}
.cookies-boton:active{transform:scale(.92);transition-duration:.1s}
html:not(.tactil) .cookies-boton:hover{background:var(--noche);color:var(--arena)}
html:not(.tactil) .cookies-boton:hover svg{transform:rotate(-18deg)}
.cookies-boton__et{position:absolute;right:calc(100% + 10px);top:50%;transform:translate(6px,-50%);padding:7px 11px 7px 14px;font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;white-space:nowrap;color:var(--cal);background:var(--noche);opacity:0;pointer-events:none;transition:opacity .3s var(--ease),transform .4s var(--ease)}
.cookies-boton:focus-visible .cookies-boton__et{opacity:1;transform:translate(0,-50%)}
html:not(.tactil) .cookies-boton:hover .cookies-boton__et{opacity:1;transform:translate(0,-50%)}
@media (max-width:760px){
.cookies{right:12px;left:12px;width:auto;bottom:calc(12px + env(safe-area-inset-bottom,0px))}
.cookies__cab{padding:12px 16px}
.cookies__cuerpo{padding:18px 16px 16px}
.cookies__cuerpo p{font-size:14px}
.cookies__elegir{padding-inline:16px}
.cookies__cat{grid-template-columns:30px minmax(0,1fr) auto;column-gap:10px;padding:12px}
.cookies__ico{width:30px;height:30px}
.cookies__cat > p,.cookies__cat details{grid-column:1/-1}
.cookies__accion{letter-spacing:.2em}
.cookies__accion span{padding-left:.2em}
.cookies-boton{right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px))}
.sello{padding:15px 22px 14px}
.sello__que{font-size:25px}
}
@media (max-width:400px){
.cookies.con-panel .cookies__acciones{gap:6px}
.cookies.con-panel .cookies__accion{letter-spacing:.12em;padding-inline:4px}
.cookies.con-panel .cookies__accion span{padding-left:.12em}
}
@media (prefers-reduced-motion:reduce){
.cookies,.cookies *,.cookies-boton,.cookies-boton *{transition:none!important;animation:none!important}
}
/* Cabecera de página (las legales): título grande y su fecha */
.indice-cab{padding-top:clamp(56px,8vw,120px);padding-bottom:clamp(40px,5vw,72px);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:28px}
.indice-cab h1{font-size:clamp(64px,10vw,168px);line-height:.9;letter-spacing:-.035em}
/* Galería justificada: en cada fila las fotos comparten altura y llenan el ancho, cada una con su proporción (--a).
El JS agrupa las filas según el ancho; flex-grow = proporción hace que la altura salga igual sin calcular píxeles. */
.galeria{--hueco:clamp(16px,2vw,32px);display:grid;gap:clamp(48px,5vw,84px) var(--hueco);border-top:1px solid var(--tinta);padding-top:clamp(32px,3.4vw,56px);margin-bottom:clamp(96px,12vw,200px);transition:opacity .3s var(--ease)}
html:not(.js) .galeria{grid-template-columns:1fr 1fr;column-gap:var(--hueco)}
.galeria--portada{margin-bottom:0}
.galeria__fila{display:flex;gap:var(--hueco);align-items:flex-start}
/* flex-grow ×100: si los factores suman menos de 1 (una foto vertical sola), flex no llenaría la fila */
.obra-i{flex:calc(var(--a) * 100) 1 0;min-width:0;display:grid;gap:16px}
.obra-i__img{position:relative;aspect-ratio:var(--a);overflow:hidden;background:var(--papel)}
.obra-i__img img{width:100%;height:100%;object-fit:cover;transition:transform 1.6s var(--ease)}
/* Variante trazo: un dibujo sobre blanco puro. El blanco desaparece y las líneas quedan sobre la banda, con su grano; sin el filtro de las fotos, que aclararía el blanco y marcaría el rectángulo */
.obra-i__img--trazo{background:none;mix-blend-mode:multiply}
.obra-i__img--trazo img{filter:none}
/* Pie: una cota bajo la foto (línea con sus dos remates) y encima el número y el nombre */
.obra-i__pie{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 14px;align-items:baseline;padding-top:14px;border-top:1px solid var(--linea)}
.obra-i__pie::before,.obra-i__pie::after{content:"";position:absolute;top:-5px;width:1px;height:9px;background:var(--gris)}
.obra-i__pie::before{left:0}.obra-i__pie::after{right:0}
.obra-i__n{font-style:italic;font-size:18px;line-height:1;color:var(--olivo-texto);font-variant-numeric:tabular-nums}
.obra-i__nombre{font-size:clamp(22px,1.8vw,30px);line-height:1.15;transition:color .5s var(--ease)}
.obra-i .rotulo{grid-column:2;color:var(--gris);font-size:11px}
.galeria--portada .rotulo{text-wrap:balance}
/* Variante firma, bajo un retrato: la misma cota, sin número */
.obra-i__pie--firma{grid-template-columns:minmax(0,1fr)}
.obra-i__pie--firma .rotulo{color:var(--gris);font-size:11px}
/* Datos en fila (aviso legal y cookies): nombre y valor */
.datos{grid-column:8/13;align-self:start;border-top:1px solid var(--tinta)}
.datos div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:16px;padding-block:14px;border-bottom:1px solid var(--linea)}
.datos dt{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--gris);padding-top:4px}
.datos dd{margin:0;font-family:var(--f-voz);font-weight:300;font-size:21px;line-height:1.3;text-wrap:balance}
/* Aviso legal: los datos de la titular como la ficha de una obra (a la vista mientras se lee) y el texto en secciones numeradas */
.legal{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2vw,32px);padding-bottom:clamp(88px,9vw,150px)}
.legal__datos{grid-column:1/5;position:sticky;top:calc(var(--barra) + clamp(24px,4vh,48px))}
.legal__datos dd{font-size:clamp(18px,1.4vw,21px);font-variant-numeric:tabular-nums}
.legal__texto{grid-column:6/13;display:grid;gap:clamp(40px,4.4vw,64px);max-width:40em}
.legal__sec{display:grid;gap:14px}
.legal__sec h2{display:flex;align-items:baseline;gap:16px;font-size:clamp(24px,2.1vw,32px);line-height:1.15;margin-bottom:4px}
.legal__sec p{font-size:17px;line-height:1.65;color:#3d3a35}
.legal__enlace{font:inherit;color:var(--tinta);padding-bottom:2px}
.legal__fecha{color:var(--gris)}
/* Página no encontrada (404): un solar sin construir. El replanteo se traza, la foto de la parcela se abre, la cota mide «404»
y cae el cajetín del plano; debajo del titular, las siete secciones para seguir */
.error{padding-block:clamp(56px,8vw,120px) clamp(96px,11vw,180px)}
.error__rejilla{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:48px clamp(16px,2vw,32px);align-items:start}
.error__texto{grid-column:1/6;display:grid;gap:clamp(24px,2.6vw,36px)}
.error__texto h1{font-size:clamp(44px,5vw,84px);line-height:1}
.error__texto p{color:var(--gris);max-width:34ch}
.error__secciones{display:grid;border-top:1px solid var(--linea)}
.error__secciones a{display:grid;grid-template-columns:2.1rem minmax(0,1fr);place-items:baseline start;padding-block:10px;border-bottom:1px solid var(--linea);font-family:var(--f-voz);font-weight:300;font-size:clamp(20px,1.6vw,24px);line-height:1.2}
.error__secciones .trazo{padding-bottom:2px}
.error__solar{grid-column:7/13;position:relative;aspect-ratio:1/1;overflow:hidden;container-type:inline-size;background:var(--papel);margin:0}
.error__solar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.86) contrast(.98)}
.error__cota{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:var(--blanco);stroke-width:3;pointer-events:none}
.error__cota text{fill:var(--blanco);stroke:none;font-family:var(--f-voz);font-style:italic;font-size:64px;opacity:0;transition:opacity .8s var(--ease) 2.1s}
.error__cota path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.4s var(--ease) 1s}
.error__solar.visto .error__cota path,html:not(.js) .error__cota path{stroke-dashoffset:0}
.error__solar.visto .error__cota text,html:not(.js) .error__cota text{opacity:1}
.error__solar .cajetin{transition-delay:2.4s}
.error__solar.visto .cajetin,html:not(.js) .error__solar .cajetin{opacity:1}
@container (max-width:560px){.error__solar .cajetin{display:none}.error__cota{stroke-width:6}.error__cota text{font-size:120px}} /* en una foto estrecha: sin cajetín (taparía la cota) y la cota más gruesa y grande, que se lea */
.sin-partir{white-space:nowrap}
/* Cada uso de los datos, como una ficha: para qué, por qué podemos y cuánto tiempo */
.legal__uso{display:grid;gap:10px;padding-top:clamp(14px,1.4vw,20px)}
.legal__uso h3{font-weight:300;font-size:clamp(20px,1.6vw,23px);line-height:1.2}
.legal__ficha{border-top:1px solid var(--linea)}
.legal__ficha div{display:grid;grid-template-columns:minmax(0,10em) minmax(0,1fr);gap:16px;padding-block:12px;border-bottom:1px solid var(--linea)}
.legal__ficha dt{padding-top:4px;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--gris)}
.legal__ficha dd{margin:0;font-size:16px;line-height:1.55;color:#3d3a35}
.legal__ficha--nombres dt{padding-top:1px;font-size:14.5px;letter-spacing:.02em;text-transform:none;color:var(--tinta)}
.legal__dato{display:block;margin-top:4px;font-size:12px;letter-spacing:.06em;color:var(--gris)}
.legal__esencial{margin-bottom:clamp(4px,1vw,12px)}
/* El panel de cookies a un toque, como la última fila de los datos */
.legal__cambia{display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%;padding-block:16px;border-bottom:1px solid var(--tinta);font-size:12.5px;letter-spacing:.06em;color:var(--tinta);text-align:left}
.legal__cambia svg{width:30px;height:12px;flex:none;fill:none;stroke:currentColor;stroke-width:1.1;transition:transform .5s var(--ease)}
.legal__cambia:focus-visible svg,.legal__cambia:active svg{transform:translateX(5px)}
html:not(.tactil) .legal__cambia:hover svg{transform:translateX(5px)}
.legal__cambia:focus-visible{outline:2px solid var(--olivo-texto);outline-offset:4px}
/* Aparición: la imagen se abre desde una línea horizontal */
.js .revela.oculto{clip-path:inset(50% 0 50% 0)}
.js .revela.oculto img{transform:scale(1.08)}
.js .revela{clip-path:inset(0 0 0 0);transition:clip-path 1.5s var(--ease)}
.js .revela img{transition:transform 2s var(--ease),clip-path 1.1s var(--suave),opacity 1.4s var(--ease)}
/* Paso entre páginas: una línea cruza y la página se cierra y se abre desde ella */
.cortina{position:fixed;inset:0;z-index:100;pointer-events:none;visibility:hidden}
.cortina::before{content:"";position:absolute;inset:0;background:var(--cal);clip-path:inset(50% 0 50% 0)}
.cortina::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--tinta);transform:scaleX(0);transform-origin:left}
.sale .cortina{visibility:visible}
.sale .cortina::after{animation:cruza .45s var(--ease) forwards}
.sale .cortina::before{animation:cierra .55s var(--ease) .35s forwards}
.entra .cortina{visibility:visible}
.entra .cortina::before{clip-path:inset(0);animation:abre .8s var(--ease) .1s forwards}
.entra .cortina::after{transform:scaleX(1);animation:desvanece .5s var(--ease) .4s forwards}
@keyframes cruza{to{transform:scaleX(1)}}
@keyframes cierra{to{clip-path:inset(0)}}
@keyframes abre{to{clip-path:inset(50% 0 50% 0)}}
@keyframes desvanece{to{opacity:0}}
.estrecho{display:none}
@media (max-width:1100px){
/* 404 en tableta y móvil: titular, frase, el solar y luego las secciones */
.error__rejilla{display:flex;flex-direction:column;align-items:stretch;row-gap:clamp(28px,5vw,44px)}
.error__texto{display:contents}
.error__texto h1{order:1}.error__texto p{order:2}.error__solar{order:3;aspect-ratio:2000/1116}.error__texto nav{order:4}
.modelo__texto,.modelo__vista,.dentro__texto,.dentro__vista{grid-column:1/13;grid-row:auto}
.dentro__vista{margin-top:0}
.hacemos__grupos{grid-template-columns:repeat(3,minmax(0,1fr))}
.estudio__texto{grid-column:1/13}.estudio__img{grid-column:1/13;order:2;margin-top:clamp(40px,5vw,56px)} /* en tableta, como en el móvil: el texto y debajo la foto entera */
.seccion-solar{grid-column:2/12}
.orienta__cab h2{grid-column:1/13}.orienta__cab p{grid-column:1/9}
.contacto__rejilla{display:flex;flex-direction:column;align-items:stretch}
.contacto__texto{display:contents}
.contacto h2{order:1}
.contacto__vista{order:2;position:relative;top:auto;width:100%;margin-top:clamp(32px,5vw,56px)}
.contacto__fotos{aspect-ratio:4/3;max-height:none}
.contacto__pide{order:3;margin-top:clamp(24px,4vw,40px)}
.vias{border-top:0}
.contacto__datos{order:4}
}
@media (max-width:760px){
.hacemos__grupos{grid-template-columns:minmax(0,1fr);gap:0}
.hacemos__g{grid-template-columns:28px minmax(0,1fr);gap:8px 14px;padding-block:18px;border-top-color:var(--linea)}
.hacemos__g:first-child{border-top-color:var(--tinta)}
.hacemos__ico{width:24px;height:24px;align-self:center}
.hacemos__g h3{font-size:23px}
.hacemos__g ul{grid-column:2;display:flex;flex-wrap:wrap;gap:4px 16px;font-size:14px}
.hacemos__g li{padding-left:13px}
.hacemos__g li::before{width:6px;height:6px}
body{font-size:16.5px}
.rejilla{display:flex;flex-direction:column;align-items:stretch}
.capa__img,.luz{object-position:47% 50%}
.portada-pista{height:260vh;--fin:calc((260vh - max(560px,100vh)) * .85)} /* más recorrido: un solo gesto del dedo ya no lo hace todo de golpe */
.capa__texto{display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:max(30px,env(safe-area-inset-bottom,0px))}
/* Portada en móvil: titular y una sola fila debajo. En el boceto, una línea que se traza y acaba en las dos verticales del logo; al pasar la vertical, en su sitio, la luz de la casa. */
.portada__titular,.portada__pie{position:relative;bottom:auto;width:100%}
.portada__titular{margin-bottom:26px}
.portada__pie{padding-bottom:0;flex-direction:column;align-items:flex-start;gap:16px}
.titular{font-size:clamp(38px,11vw,56px);max-width:none}
.portada__luz{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:6px;border-top:1px solid transparent} /* su línea es la del logo (.desliza), que sigue en la foto */
.luz__estado{text-align:left}
.luz__lugar{display:none}
.luz__hora:not(:empty)::before{content:none}
.luz__fila{gap:0}
.luz__ahora,.jornada__traza,.jornada__sol{display:none}
.luz__fila .jornada{flex:none;display:flex;height:auto}
.jornada__p{position:relative;width:44px;height:44px;display:grid;place-items:center;opacity:.55}
.jornada__p[aria-pressed="true"]{opacity:1}
/* La luz que se ve, sobre su trozo de horizonte */
.jornada__p[data-luz]{left:auto}
.jornada__p::after{content:"";position:absolute;left:50%;bottom:7px;width:14px;height:1px;margin-left:-7px;background:currentColor;transform:scaleX(0);transition:transform .5s var(--ease)}
.jornada__p[aria-pressed="true"]::after{transform:scaleX(1)}
.jornada__p span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.jornada__icono{display:block;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.capa--trazo .portada__luz{visibility:hidden}
.desliza{left:var(--gl);right:var(--gr);width:auto;height:51px;bottom:calc(var(--bajo) + max(30px,env(safe-area-inset-bottom,0px)))}
/* Papel bajo el rótulo y bajo el titular, cada uno ceñido a sus letras y más ligero (en móvil, uno solo para los dos
ocupaba casi todo el ancho) */
.capa--trazo .titular::before{inset:-.3em -.18em -.22em -.28em;background:rgba(253,247,238,.86);filter:blur(16px)}
.capa--trazo .portada__titular .rotulo{position:relative;width:fit-content}
.capa--trazo .portada__titular .rotulo::before{content:"";position:absolute;z-index:-1;inset:-7px -12px;border-radius:12px;background:rgba(253,247,238,.86);filter:blur(10px);pointer-events:none}
.portada__pie .rotulo,.jornada__p{letter-spacing:.2em}
/* Sombra en móvil solo bajo el titular y la fila de luz, que se desvanece con una curva suave (smootherstep en 220 px, sin corte);
medido ≥4,6:1 en las tres luces de 320 a 430 px, con la barra puesta y escondida */
.capa--casa .capa__img::after{background:none}
.portada__abajo .capa--casa .capa__texto{isolation:isolate}
/* El velo cuelga del titular: empieza --velo por encima del rótulo, sea cual sea la pantalla, y baja hasta el borde (la capa
lo recorta). Antes medía 485 px fijos y oscurecía media foto por encima de un texto que empieza mucho más abajo. */
.portada__abajo .capa--casa .portada__titular{--velo:110px}
.portada__abajo .capa--casa .portada__titular::before{content:"";position:absolute;z-index:-1;left:0;right:0;top:calc(-1 * var(--velo));height:200lvh;pointer-events:none;background:linear-gradient(to bottom,rgba(8,10,12,0),rgba(8,10,12,.004) calc(var(--velo) * .1),rgba(8,10,12,.052) calc(var(--velo) * .25),rgba(8,10,12,.159) calc(var(--velo) * .4),rgba(8,10,12,.297) calc(var(--velo) * .55),rgba(8,10,12,.418) calc(var(--velo) * .7),rgba(8,10,12,.49) calc(var(--velo) * .85),rgba(8,10,12,.51) var(--velo),rgba(8,10,12,.54) calc(var(--velo) + 80px),rgba(8,10,12,.56) calc(var(--velo) + 180px))}
.replanteo{gap:12px}
.legal{display:flex;flex-direction:column;gap:56px}
.legal__datos{position:static}
.legal__datos div{grid-template-columns:minmax(0,1fr);gap:6px;padding-block:12px} /* en móvil cada dato bajo su etiqueta: el correo no cabía en media columna */
.legal__sec p{font-size:16.5px}
.legal__ficha div{grid-template-columns:minmax(0,1fr);gap:4px}
.replanteo .rotulo:last-child:not(:only-child){display:none}
.declaracion__texto{font-size:clamp(30px,8.6vw,40px)}
.proyecta,.dentro__escena,.error__solar{margin-inline:calc(-1 * var(--gl)) calc(-1 * var(--gr))} /* a todo el ancho, como el visor del proceso */
/* La línea a todo el ancho y sus dos extremos debajo: entre los dos rótulos se quedaba en poco más de 100 px */
.dentro__vista .modelo__linea{display:grid;grid-template-columns:1fr 1fr;grid-template-areas:"l l" "a b";row-gap:2px}
.dentro__vista .modelo__hora{grid-area:l;height:36px}
.dentro__vista .modelo__linea .rotulo:first-child{grid-area:a}
.dentro__vista .modelo__linea .rotulo:last-child{grid-area:b;justify-self:end}
.proceso-pista{height:440vh}
.proceso__in{display:flex;flex-direction:column;align-items:stretch;gap:18px}
.proceso__in .replanteo{display:none}
.proceso__lado{display:contents}
.proceso__titulo{order:1;font-size:clamp(32px,9vw,44px)}
.proceso__visor{order:2;margin-inline:calc(-1 * var(--gl)) calc(-1 * var(--gr));gap:10px}
.visor{height:min(calc(52svh - var(--barra)),100cqw);--ancla:68%}
.proceso__visor .visor__pie{padding-inline:var(--gl) var(--gr)}
.pasos{order:3;padding-left:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));column-gap:8px;align-content:start}
.pasos::before,.pasos::after{display:none}
.paso{display:block;padding-block:0;border-top:1px solid var(--linea);padding-top:10px}
.paso.activo{border-top-color:var(--olivo-texto)}
.paso__nombre{display:none}
.paso__n{font-size:18px}
.paso__texto{display:none}
.paso-movil{display:block;order:4;font-size:15.5px;line-height:1.55;color:var(--gris);min-height:4.8em;transition:opacity .35s var(--ease)}
.paso-movil.cambia{opacity:0}
.estudio__img{order:2;margin-top:48px}
.contacto__fotos{aspect-ratio:5/4}
.via{grid-template-columns:36px minmax(0,1fr) 28px;column-gap:14px}
.via svg{width:36px;height:36px}
.via .via__flecha{width:28px}
.campos label{grid-template-columns:1fr;row-gap:4px}
.contacto__datos{flex-direction:column;gap:20px}
.datos{width:100%;margin-top:48px}
/* Confort en móvil: tres botones con su nombre y, debajo, una línea con lo que enseña la capa elegida */
.confort__pie .rotulo{display:none}
.confort__nota{display:block;margin:0;min-height:3.2em;font-size:15px;line-height:1.55;opacity:.82;transition:opacity .35s var(--ease)}
.confort__nota.cambia{opacity:0}
.confort__dias button{min-height:44px}
.dias__largo{display:none}.dias__corto{display:inline}
}
@media (max-width:400px){.ancho{display:none}.estrecho{display:inline}.obra-i .rotulo{letter-spacing:.16em}.via{grid-template-columns:36px minmax(0,1fr) 24px}.via .rotulo{letter-spacing:.2em}.alterna__pie .voz{font-size:18px}}
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation:none!important;transition:none!important}
.ss-flujo{stroke-dasharray:none}
.js .revela.oculto{clip-path:none}
.js .revela.oculto img{transform:none}
.js .replanteo:not(.visto) .replanteo__l{--trazo:100%}
.js .replanteo:not(.visto) .replanteo__l::before,.js .replanteo:not(.visto) .replanteo__l::after{--gruesa:100%}
.js .declaracion:not(.visto) .subraya path{stroke-dashoffset:0}
.js .hacemos:not(.visto) .hacemos__g{opacity:1;transform:none}
.js .hacemos:not(.visto) .hacemos__ico path{stroke-dashoffset:0}
}