/* LANKA Arquitectos · propuesta 02
   Idea: «del primer trazo a la casa». 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. */
: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));
  --grano:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .32  0 0 0 0 .28  0 0 0 0 .22  0 0 0 .09 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --nube:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='900' height='900'><filter id='m'><feTurbulence type='fractalNoise' baseFrequency='.004' numOctaves='3' seed='4'/><feColorMatrix values='0 0 0 0 .55  0 0 0 0 .5  0 0 0 0 .42  0 0 0 .07 0'/></filter><rect width='100%' height='100%' filter='url(%23m)'/></svg>");
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
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}
.luz,.capa__img,.obra__img img,.alterna__marco img,.estudio__img img,.ficha-portada img,.obra-i__img img,.visor__img,.contacto__fotos img{filter:saturate(.86) contrast(.98)}
.capa--trazo .capa__img,.boceto,.visor__img[data-paso="1"],.visor__img[data-paso="2"]{filter:none}
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}
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)}

/* La línea del logo en los enlaces: se traza, se pasa y remata con un corte vertical */
.trazo{position:relative;display:inline-block;padding-bottom:5px}
.trazo::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:calc(100% + 12px);background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease)}
.trazo::before{content:"";position:absolute;right:-12px;bottom:-4px;width:1px;height:9px;background:currentColor;transform:scaleY(0);transition:transform .25s var(--ease)}
.trazo:hover::after,.trazo:focus-visible::after,a:hover>.trazo::after,.trazo[aria-current="page"]::after{transform:scaleX(1)}
.trazo:hover::before,.trazo:focus-visible::before,a:hover>.trazo::before,.trazo[aria-current="page"]::before{transform:scaleY(1);transition-delay:.5s}
.cota{display:flex;align-items:center;gap:14px}
.cota::before{content:"";flex:none;width:40px;height:1px;background:currentColor}
.cota--corta::before{width:24px}
.flecha-trazo{width:56px;height:14px;flex:none;stroke:currentColor;stroke-width:1.2;fill:none;transition:transform .6s var(--ease)}
a:hover .flecha-trazo,button:hover .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:currentColor;opacity:.55;transform-origin:left;transition:transform 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:currentColor;transform-origin:top;transition:transform .6s var(--ease) 1.75s}
.replanteo__l::after{transition-delay:2s}
.js .replanteo:not(.visto) .replanteo__l{transform:scaleX(0)}
.js .replanteo:not(.visto) .replanteo__l::before,.js .replanteo:not(.visto) .replanteo__l::after{transform:scaleY(0);transition:none}
.replanteo .rotulo{white-space:nowrap}

/* 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{display:flex;gap:clamp(24px,3vw,48px)}
.menu a{font-size:12px;letter-spacing:.3em;text-transform:uppercase}
.menu-btn{display:none;font-size:12px;letter-spacing:.3em;text-transform:uppercase;padding:10px 0}
.panel{position:fixed;inset:0;z-index:60;background:var(--cal);color:var(--tinta);display:grid;align-content:center;gap:10px;padding-left:var(--gl);padding-right:var(--gr);clip-path:inset(0 0 100% 0);transition:clip-path .7s var(--ease);visibility:hidden}
.panel.abierto{clip-path:inset(0);visibility:visible}
.panel a{font-family:var(--f-voz);font-weight:300;font-size:clamp(40px,11vw,64px);line-height:1.15}
.panel .cerrar{position:absolute;top:max(26px,env(safe-area-inset-top,0px));right:var(--gr);font-size:12px;letter-spacing:.3em;text-transform:uppercase;padding:10px 0}
.panel .rotulo{margin-top:28px;color:var(--gris)}

/* ——— Portada: del primer trazo a la casa ———
   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%}
div.capa__img{filter:none}
.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 .cab--sobre{position:absolute;inset:0 0 auto}
.capa--trazo .capa__texto{color:var(--tinta)}
.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}
.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))}
.capa--casa .portada__pie{color:var(--blanco)}
.portada__luz{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;width:min(340px,100%)}
/* 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__luz,.portada__obra{pointer-events:auto}
.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)}
.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%}
.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 .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)}
.portada__obra{display:grid;justify-items:end;gap:6px;text-align:right}
.portada__obra .voz{font-size:24px;line-height:1.2}
/* 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 .capa__texto{isolation:isolate}
.capa--trazo .titular,.capa--trazo .portada__luz,.capa--trazo .portada__obra{position:relative}
.capa--trazo .titular::before,.capa--trazo .portada__luz::before,.capa--trazo .portada__obra::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}
.capa--trazo .portada__obra::before{inset:-22px -36px -22px -44px}

/* 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:50%;bottom:calc(var(--bajo) + max(44px,env(safe-area-inset-bottom,0px)));transform:translateX(-50%);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:currentColor;transform-origin:left;animation:traza-una 1.8s cubic-bezier(.6,0,.3,1) .5s both}
.desliza__v{position:absolute;background:currentColor;transform-origin:top;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{transform:scaleX(0)}}
@keyframes baja-una{from{transform:scaleY(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}
.declaracion .servicios{grid-column:2/12;display:flex;flex-wrap:wrap;gap:12px 40px;margin-top:clamp(44px,5vw,72px);color:var(--gris)}
.servicios li{display:flex;align-items:center;gap:12px}
.servicios li::before{content:"";width:13px;height:13px;flex:none;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)}
.obra{display:grid;gap:18px;align-content:start}
.obra__img{position:relative;overflow:hidden;background:var(--papel)}
.obra__img img{width:100%;height:100%;object-fit:cover;transition:transform 1.6s var(--ease)}
.obra:hover .obra__img>img:first-child{transform:scale(1.025)}
.con-boceto .boceto{position:absolute;inset:0;clip-path:inset(0 100% 0 0);transition:clip-path 1.1s var(--suave)}
.obra:hover .con-boceto .boceto{clip-path:inset(0 0 0 0)}
.con-boceto .cotas{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:var(--tinta);stroke-width:2.2;opacity:0;transition:opacity .6s var(--ease) .6s}
.con-boceto .cotas text{fill:var(--tinta);stroke:none;font-family:var(--f-texto);font-size:30px;letter-spacing:.1em}
.obra:hover .con-boceto .cotas{opacity:1}
.obra__pie{display:grid;gap:6px}
.obra__pie h3{font-family:var(--f-voz);font-weight:300;font-size:clamp(22px,1.8vw,28px);line-height:1.15;letter-spacing:-.01em}
.obra__pie .rotulo{color:var(--gris);font-size:11px}
.obras__lista{row-gap:clamp(72px,9vw,150px)}
.o1{grid-column:1/9}.o1 .obra__img{aspect-ratio:2000/1116}
.o1-texto{grid-column:9/13;align-self:end;display:grid;gap:22px;padding-bottom:6px;padding-left:clamp(0px,2vw,32px)}
.o1-texto > p{font-size:15.5px;color:var(--gris);max-width:30ch}
.obras__fila{grid-column:1/13;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,32px);align-items:start}
.obras__fila .obra__img{aspect-ratio:3/4}
.obras__final{grid-column:1/13;display:flex;justify-content:flex-end;border-top:1px solid var(--linea);padding-top:28px}
.ver-todas{display:inline-flex;align-items:center;gap:18px;font-family:var(--f-voz);font-weight:300;font-size:clamp(26px,2.4vw,36px);line-height:1.2}

/* 03 · Orientación */
.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:8/13;display:grid;gap:16px}
.seccion-solar svg{width:100%;height:auto;overflow:visible}
.seccion-solar figcaption{font-size:10.5px;opacity:.7;line-height:1.7}
.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;stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset 1.4s var(--ease)}
.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:20px;letter-spacing:.08em}
.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}

/* Junio y diciembre: la misma foto cambia de luz en su sitio */
.alterna{grid-column:1/13;display:grid;gap:22px}
.alterna__marco{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--papel)}
.luzcasa .alterna__marco{width:100%;max-height:max(320px,calc(100svh - 170px))} /* con width fijo, el tope de alto recorta la foto en vez de estrecharla */
.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{transform:scaleX(1);transition:transform var(--dur,7s) linear}
.alterna__pie .voz{font-size:clamp(20px,1.7vw,26px);line-height:1.25}
.alterna__pie .rotulo{font-size:10.5px}

/* 04 · Proceso: 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:420vh}
.proceso__fijo{position:sticky;top:0;height:100vh;height:100lvh;padding-bottom:var(--bajo);display:grid;align-items:center;overflow:hidden}
.proceso__in{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2vw,32px);row-gap:clamp(28px,4vh,52px);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__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(calc(var(--rp,0) * 100cqw - 1px));z-index:4}
.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))}

/* 05 · Estudio */
.estudio__img{grid-column:1/6;position:relative}
.estudio__img img{aspect-ratio:4/5;object-fit:cover;width:100%}
.estudio__img figcaption{margin-top:16px}
.estudio__texto{grid-column:7/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);column-gap:16px;row-gap:2px;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)}

/* 06 · Contacto, de noche */
/* 06 · 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:clamp(40px,9svh,110px);margin:0}
.contacto__fotos{position:relative;width:100%;aspect-ratio:4/5;max-height:calc(100svh - 2 * clamp(40px,9svh,110px) - 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:62% 50%}
.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="rehabilitar"]{object-position:50% 50%}
/* 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: número, 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}
.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:hover{background:#EDD8B2}
.enviar:hover .flecha-trazo{transform:translateX(8px)}
.formulario__nota{margin-top:14px;font-size:11px;color:var(--arena)}
/* 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}

/* Mira de replanteo: el cursor sobre las fotos */
.mira{position:fixed;left:0;top:0;z-index:50;pointer-events:none;opacity:0;transition:opacity .3s var(--ease);mix-blend-mode:difference;color:#fff}
.mira::before,.mira::after{content:"";position:absolute;background:currentColor}
.mira::before{left:-30px;top:0;width:76px;height:1px}
.mira::after{left:0;top:-30px;width:1px;height:76px}
.mira span{position:absolute;left:16px;top:12px;white-space:nowrap;font-size:10.5px;letter-spacing:.3em;text-transform:uppercase}
.mira.visible{opacity:1}
.con-mira [data-mira]{cursor:none}

/* Índice de obras */
.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}
.filtros{display:flex;flex-wrap:wrap;gap:8px 26px}
.filtros button{font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--gris);padding:6px 0;transition:color .3s var(--ease)}
.filtros button[aria-pressed="true"]{color:var(--olivo-texto)}
/* 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;column-gap:var(--hueco);row-gap:clamp(48px,5vw,84px);border-top:1px solid var(--tinta);padding-top:clamp(32px,3.4vw,56px);margin-bottom:clamp(96px,12vw,200px);transition:opacity .3s var(--ease)}
.galeria.cambia{opacity:0}
html:not(.js) .galeria{grid-template-columns:1fr 1fr;column-gap:var(--hueco)}
.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[hidden]{display:none!important}
.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)}
/* 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);column-gap:14px;row-gap:6px;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}
/* 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}
.obra-i .rotulo span{white-space:nowrap} /* si no cabe, se parte en el «·», no dentro del lugar */
a.obra-i:hover .obra-i__img img{transform:scale(1.035)}
a.obra-i:hover .obra-i__nombre{color:var(--olivo-texto)}

/* Ficha de obra */
.ficha-portada{position:relative;height:100svh;min-height:600px;overflow:hidden;color:var(--blanco)}
.ficha-portada img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ficha-portada::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(10,12,14,.5),rgba(10,12,14,0) 42%),linear-gradient(to bottom,rgba(10,12,14,.28),rgba(10,12,14,0) 22%)}
.ficha-portada .cab{position:absolute;inset:0 0 auto;color:var(--blanco)}
.ficha-titulo{position:absolute;z-index:2;inset:auto 0 0;padding-bottom:max(44px,env(safe-area-inset-bottom,0px));display:grid;gap:18px}
.ficha-titulo h1{font-size:clamp(52px,8vw,136px);line-height:.95;letter-spacing:-.03em}
.ficha-intro__texto{grid-column:1/7;display:grid;gap:22px}
.ficha-intro__texto p.voz{font-size:clamp(24px,2.2vw,34px);line-height:1.25}
.ficha-intro__texto p:not(.voz){color:var(--gris);max-width:36em}
.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}
.dia-cab{display:flex;justify-content:space-between;align-items:baseline;gap:24px;margin-bottom:clamp(40px,5vw,72px)}
.dia-cab h2{font-size:clamp(34px,3.6vw,58px);line-height:1.04}
.dia-cab p{color:var(--gris);max-width:30ch;font-size:15.5px}
.dia{padding-bottom:clamp(96px,11vw,180px)}
.dia__filas{--hueco:clamp(16px,2vw,32px);display:grid;row-gap:clamp(48px,5vw,84px)}
.obra-i__n--hora{font-size:clamp(22px,1.8vw,28px)}
.luzcasa{background-color:var(--olivo);background-image:var(--grano);color:var(--cal)}
.luzcasa .voz em{color:var(--arena)}
.luzcasa__cab{grid-column:1/13;display:grid;grid-template-columns:subgrid;align-items:end;margin-bottom:clamp(40px,5vw,72px);row-gap:20px}
.luzcasa__cab .rotulo{grid-column:1/4;opacity:.7}
.luzcasa__cab h2{grid-column:4/10;font-size:clamp(34px,3.6vw,58px);line-height:1.04;text-wrap:balance}
.luzcasa__cab p{grid-column:10/13;font-size:15.5px;opacity:.8}
.mas{--hueco:clamp(16px,2vw,32px);border-top:1px solid var(--linea);padding-block:clamp(72px,8vw,128px)}
.mas__cab{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:12px 24px;margin-bottom:clamp(32px,3.4vw,56px)}
.mas__cab h2{font-size:clamp(34px,3.6vw,58px);line-height:1.04}
.mas__cab>*{white-space:nowrap}

/* 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){
  .o1{grid-column:1/13}.o1-texto{grid-column:1/10;align-self:start;padding-left:0}
  .orienta .alterna{grid-column:1/13}.seccion-solar{grid-column:2/12}
  .orienta__cab h2{grid-column:1/13}.orienta__cab p{grid-column:1/9}
  .luzcasa__cab h2{grid-column:1/10}.luzcasa__cab p{grid-column:1/9}.luzcasa__cab .rotulo{grid-column:1/13}
  .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){
  body{font-size:16.5px}
  .rejilla{display:flex;flex-direction:column;align-items:stretch}
  .menu{display:none}.menu-btn{display:block}
  .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__titular,.portada__pie{position:relative;bottom:auto}
  .portada__titular{margin-bottom:36px}
  .portada__pie{padding-bottom:0}
  .luz__estado{text-align:left}
  .titular{font-size:clamp(38px,11vw,56px);max-width:none}
  .portada__titular,.portada__pie{width:100%}
  .portada__pie{flex-direction:column;align-items:flex-start;gap:16px}
  /* 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.
     El nombre de la obra solo en pantallas anchas */
  .portada__obra{display:none}
  .portada__titular{margin-bottom:26px}
  .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{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{position:relative}
  .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;transform:none;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}
  .portada__abajo .capa--casa .capa__texto::before{content:"";position:absolute;z-index:-1;left:0;right:0;bottom:0;height:485px;pointer-events:none;background:linear-gradient(to top,rgba(8,10,12,.56),rgba(8,10,12,.53) 130px,rgba(8,10,12,.5) 265px,rgba(8,10,12,.487) 298px,rgba(8,10,12,.418) 331px,rgba(8,10,12,.297) 364px,rgba(8,10,12,.159) 397px,rgba(8,10,12,.052) 430px,rgba(8,10,12,.004) 463px,rgba(8,10,12,0) 485px)}
  .replanteo{gap:12px}
  .replanteo .rotulo:last-child:not(:only-child){display:none}
  .declaracion__texto{font-size:clamp(30px,8.6vw,40px)}
  .obras__lista{gap:48px}
  /* En móvil, las tres obras se pasan con el dedo */
  .obras__fila{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gl);margin-inline:calc(-1 * var(--gl)) calc(-1 * var(--gr));padding-inline:var(--gl) var(--gr);scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .obras__fila::-webkit-scrollbar{display:none}
  .obras__fila .obra{flex:0 0 76%;scroll-snap-align:start}
  .obras__final{justify-content:flex-start}
  .proceso-pista{height:380vh}
  .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(46svh,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:1.6em 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}
  .filtros{gap:8px 20px}
  .filtros button{letter-spacing:.2em}
  .ficha-intro__texto,.datos{width:100%}
  .datos{margin-top:48px}
  .dia-cab{flex-direction:column;align-items:flex-start;gap:14px}
  /* Un día: una foto por fila a todo el ancho */
  .dia .galeria__fila{flex-direction:column;gap:48px}
  .dia .obra-i{flex:none;width:100%}
  /* Más obras: tira con desplazamiento lateral, como las obras de la portada */
  .mas__fila{gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gl);margin-inline:calc(-1 * var(--gl)) calc(-1 * var(--gr));padding-inline:var(--gl) var(--gr);scrollbar-width:none}
  .mas .obra-i{flex:none;width:calc(var(--a) * min(320px,82vw));scroll-snap-align:start}
  /* Junio y diciembre: foto más alta, centrada en el suelo del salón, donde entra el sol */
  .luzcasa .alterna__marco{aspect-ratio:4/5}
  .luzcasa .alterna__marco img{object-position:35% 85%}
  .luzcasa__cab{display:grid;gap:16px}
  .rotulo.cota{flex-wrap:nowrap}
}
@media (max-width:400px){.ancho{display:none}.estrecho{display:inline}.obra-i .rotulo,.ficha-titulo .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}
  .js .revela.oculto{clip-path:none}
  .js .revela.oculto img{transform:none}
  .js .replanteo:not(.visto) .replanteo__l,.js .replanteo:not(.visto) .replanteo__l::before,.js .replanteo:not(.visto) .replanteo__l::after{transform:none}
  .js .declaracion:not(.visto) .subraya path{stroke-dashoffset:0}
}