/* =====================================================================
   Ocre Estudio Prediseño de home (interiorismo, Barcelona)
   Revista de arquitectura: yeso pétreo, tinta cálida, oliva de segundo
   tono y el ocre solo como acento. Instrument Serif para titulares,
   Instrument Sans para lectura. Mucho aire y fotografía grande.
   ===================================================================== */
:root{
  --yeso:#E4DED4; --blanco:#F3F0EA; --tinta:#24211E; --oliva:#5B5B45;
  --ocre:#A86A2C; --ocre-d:#8A5520; --ocre-l:#C48A4C;
  --tinta-2:rgba(36,33,30,.74); --tinta-3:rgba(36,33,30,.56);
  --linea:rgba(36,33,30,.15); --linea-l:rgba(228,222,212,.18);
  --yeso-2:rgba(228,222,212,.76);
  --serif:'Instrument Serif', 'Iowan Old Style', 'Times New Roman', serif;
  --sans:'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --pad:clamp(20px,4.4vw,64px); --max:1440px; --gut:clamp(16px,2.2vw,32px);
  --sec:clamp(96px,11vw,176px); --hd-h:84px;
  --ease:cubic-bezier(.22,.7,.15,1);
  --sr-accent:#C48A4C; --sr-font:'Instrument Sans', system-ui, sans-serif;
  --sr-bg:rgba(36,33,30,.97); --sr-radius:14px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{margin:0; background:var(--yeso); color:var(--tinta); font-family:var(--sans); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden}
img,svg{display:block; max-width:100%}
a{color:inherit; text-decoration:none}
h1,h2,h3,h4{margin:0; font-weight:400; text-wrap:balance}
p,figure,blockquote{margin:0}
ul,ol{margin:0; padding:0; list-style:none}
button{font:inherit}
.wrap{width:100%; max-width:var(--max); margin:0 auto; padding:0 var(--pad)}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
:focus-visible{outline:2px solid var(--ocre-d); outline-offset:3px}

/* ---------- Botones y enlaces ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; white-space:nowrap; font:500 15px/1 var(--sans); letter-spacing:.005em; padding:18px 30px; border-radius:999px; border:0; cursor:pointer; transition:background .35s, color .35s, transform .45s var(--ease)}
.btn-ink{background:var(--tinta); color:var(--blanco)}
.btn-ink:hover{background:var(--ocre-d)}
.btn-light{background:var(--yeso); color:var(--tinta)}
.btn-light:hover{background:var(--blanco)}
.link-arrow{display:inline-flex; align-items:center; gap:10px; white-space:nowrap; font-weight:500; font-size:15px; padding-bottom:6px; background:linear-gradient(currentColor,currentColor) left bottom/100% 1px no-repeat; transition:background-size .5s var(--ease)}
.link-arrow svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.5; transition:transform .4s var(--ease)}
.link-arrow:hover{background-size:30% 1px}
.link-arrow:hover svg{transform:translateX(5px)}

/* ---------- Cabecera ---------- */
.hd{position:sticky; top:0; z-index:90; color:var(--tinta); background:var(--yeso); border-bottom:1px solid transparent; transition:background .4s, border-color .4s, color .4s}
.hd.is-scrolled{background:rgba(228,222,212,.95); -webkit-backdrop-filter:blur(14px) saturate(1.2); backdrop-filter:blur(14px) saturate(1.2); border-bottom-color:var(--linea)}
.hd-in{display:flex; align-items:center; gap:clamp(20px,3vw,48px); height:var(--hd-h)}
.brand{display:flex; align-items:last baseline; gap:14px; flex:0 0 auto}
.brand-word{font-family:var(--serif); font-size:56px; line-height:1; letter-spacing:-.025em}
.brand-sub{font-size:11.5px; line-height:1.25; letter-spacing:.01em; color:var(--tinta-2); padding-left:14px; border-left:1px solid var(--linea); transition:color .4s, border-color .4s}
.hd-links{margin-left:auto; display:flex; align-items:center; gap:32px; transition:opacity .35s, visibility 0s}
.hd-links a{position:relative; white-space:nowrap; font-size:14.5px; font-weight:500; padding:8px 0}
.hd-links a::after{content:""; position:absolute; left:0; right:0; bottom:3px; height:1px; background:currentColor; transform:scaleX(0); transform-origin:right; transition:transform .45s var(--ease)}
.hd-links a:hover::after{transform:scaleX(1); transform-origin:left}
.hd-actions{display:flex; align-items:center; gap:14px; flex:0 0 auto}
.hd-sr .sr-trigger{font-size:14px; font-weight:500; --sr-dot-ring:var(--yeso); padding:.66em 1.05em .66em .9em}
.menu-btn{all:unset; box-sizing:border-box; cursor:pointer; display:inline-flex; align-items:center; gap:12px; height:46px; padding:0 20px 0 22px; border-radius:999px; background:var(--tinta); color:var(--blanco); font:500 14.5px/1 var(--sans); white-space:nowrap; transition:background .4s, color .4s}
.menu-btn:hover{background:var(--ocre-d)}
.menu-btn:focus-visible{outline:2px solid var(--ocre-d); outline-offset:3px}
.menu-lbl{display:grid}
.menu-lbl > span{grid-area:1/1; text-align:center; transition:opacity .3s, transform .4s var(--ease)}
.menu-lbl .l-close{opacity:0; transform:translateY(60%)}
.menu-ico{position:relative; width:18px; height:8px}
.menu-ico i{position:absolute; left:0; width:100%; height:1.5px; background:currentColor; transition:transform .45s var(--ease), top .45s var(--ease), bottom .45s var(--ease)}
.menu-ico i:first-child{top:0}
.menu-ico i:last-child{bottom:0}

/* Estado: menú abierto */
html.menu-open body{overflow:hidden}
html.menu-open .hd{background:var(--tinta); -webkit-backdrop-filter:none; backdrop-filter:none; border-bottom-color:transparent; color:var(--yeso)}
html.menu-open .brand-sub{color:var(--yeso-2); border-left-color:var(--linea-l)}
html.menu-open .hd-links{opacity:0; visibility:hidden; transition:opacity .25s, visibility 0s .25s}
html.menu-open .hd-sr .sr-trigger{--sr-dot-ring:var(--tinta)}
html.menu-open .menu-btn{background:var(--yeso); color:var(--tinta)}
html.menu-open .menu-btn:focus-visible{outline-color:var(--yeso)}
html.menu-open .menu-lbl .l-open{opacity:0; transform:translateY(-60%)}
html.menu-open .menu-lbl .l-close{opacity:1; transform:none}
html.menu-open .menu-ico i:first-child{top:3.25px; transform:rotate(45deg)}
html.menu-open .menu-ico i:last-child{bottom:3.25px; transform:rotate(-45deg)}

@media (max-width:900px){ .hd-links{display:none} .hd-actions{margin-left:auto} }
@media (max-width:640px){
  :root{--hd-h:72px}
  .hd-sr{display:none}
  .brand-word{font-size:48px}
  .brand{gap:11px}
  .brand-sub{padding-left:11px; font-size:11px}
  .menu-btn{height:42px; padding:0 16px 0 18px; gap:10px}
}

/* ---------- Menú a pantalla completa ---------- */
.fmenu{position:fixed; inset:0; z-index:85; background:var(--tinta); color:var(--yeso); overflow-y:auto; overscroll-behavior:contain; visibility:hidden; clip-path:inset(0 0 100% 0); transition:clip-path .8s var(--ease), visibility 0s .8s}
html.menu-open .fmenu{visibility:visible; clip-path:inset(0 0 0 0); transition:clip-path .8s var(--ease), visibility 0s}
.fmenu-in{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,.8fr) minmax(0,.72fr); gap:clamp(32px,4vw,72px); align-items:start; padding-top:calc(var(--hd-h) + clamp(28px,6vh,72px)); padding-bottom:56px}
.fm-nav li{opacity:0; transform:translateY(40px); transition:opacity .5s, transform .7s var(--ease)}
html.menu-open .fm-nav li{opacity:1; transform:none; transition-delay:calc(.22s + var(--i) * .055s)}
.fm-nav a{position:relative; display:inline-flex; align-items:center; font-family:var(--serif); font-size:clamp(46px,min(6.6vw,10.6vh),108px); line-height:1.04; letter-spacing:-.02em; transition:padding .5s var(--ease), color .3s}
.fm-nav a::before{content:""; position:absolute; left:0; top:54%; width:0; height:1px; background:var(--ocre-l); transition:width .5s var(--ease)}
.fm-nav a:hover{font-style:italic; padding-left:.62em}
.fm-nav a:hover::before{width:.42em}
.fm-info{padding-top:12px; opacity:0; transition:opacity .5s}
html.menu-open .fm-info{opacity:1; transition:opacity .6s .45s}
.fm-block + .fm-block{margin-top:30px}
.fm-block h2{font:500 13px/1.3 var(--sans); color:var(--yeso-2); margin-bottom:10px}
.fm-block p{font-size:17px; line-height:1.6}
.fm-block a{background:linear-gradient(currentColor,currentColor) left bottom/0 1px no-repeat; transition:background-size .4s var(--ease)}
.fm-block a:hover{background-size:100% 1px}
.fm-block .fm-muted{margin-top:6px; font-size:15px; color:var(--yeso-2)}
.fm-cta{margin-top:34px}
.fmenu .srm{--srm-line:var(--linea-l); margin-top:40px}
.fmenu :focus-visible{outline-color:var(--yeso)}
.fm-media{position:sticky; top:calc(var(--hd-h) + 28px); height:calc(100vh - var(--hd-h) - 84px); min-height:380px; max-height:780px; overflow:hidden; background:#3a3530; opacity:0; transition:opacity .6s}
html.menu-open .fm-media{opacity:1; transition:opacity .8s .35s}
.fm-media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transform:scale(1.08); transition:opacity .8s ease, transform 1.6s var(--ease)}
.fm-media img.is-on{opacity:1}
html.menu-open .fm-media img.is-on{transform:none}
.fm-media::after{content:""; position:absolute; inset:auto 0 0 0; height:40%; background:linear-gradient(0deg, rgba(36,33,30,.55), transparent); pointer-events:none}
.fm-media figcaption{position:absolute; z-index:1; left:20px; right:20px; bottom:18px; display:grid; font-family:var(--serif); font-style:italic; font-size:19px; color:var(--blanco)}
.fm-media figcaption span{grid-area:1 / 1; opacity:0; transform:translateY(8px); transition:opacity .5s, transform .6s var(--ease)}
.fm-media figcaption span.is-on{opacity:1; transform:none}
@media (max-width:1100px){
  .fmenu-in{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
  .fm-media{display:none}
}
@media (max-width:700px){
  .fmenu-in{grid-template-columns:1fr; gap:36px; padding-top:calc(var(--hd-h) + 20px)}
  .fm-nav a{font-size:clamp(44px,15vw,72px); line-height:1.04}
  .fm-info{padding-top:24px; border-top:1px solid var(--linea-l)}
  .fm-cta{width:100%}
}

/* ---------- Hero editorial ---------- */
.hero{--h1:clamp(54px,9.4vw,140px); padding-top:clamp(24px,5.5vh,72px); overflow:clip}
.hero > .wrap{position:relative}
.hero-t{font-family:var(--serif); font-size:var(--h1); line-height:.92; letter-spacing:-.028em}
.hero-t .ln{display:block}
.hero-t.is-split .swi{transition-duration:1.05s}
/* Portada flotante: de la altura de las mayúsculas a la línea base del titular, alineada al margen derecho */
.hero-cover{position:absolute; top:calc(var(--h1) * .068); right:var(--pad); display:block; width:calc(var(--h1) * 1.34); height:calc(var(--h1) * 1.65); background:#D3CBBF; box-shadow:0 30px 60px -36px rgba(36,33,30,.45)}
.hc-ph{position:absolute; inset:0; overflow:hidden}
.hc-ph img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transform:scale(1.06); transition:opacity 1.6s ease, transform 6s linear}
.hc-ph img.is-on{opacity:1; transform:scale(1)}
.hc-cap{position:absolute; left:10px; bottom:10px; max-width:calc(100% - 20px); display:flex; flex-direction:column; gap:1px; padding:8px 11px 9px; background:var(--blanco)}
.hc-cap small{font-size:12px; line-height:1.3; letter-spacing:.01em; color:var(--tinta-2)}
.hc-names{display:grid; font-family:var(--serif); font-style:italic; font-size:clamp(15px,1.2vw,18px); line-height:1.15; color:var(--tinta); white-space:nowrap}
.hc-names span{grid-area:1 / 1; opacity:0; transform:translateY(6px); transition:opacity .7s .3s, transform .8s var(--ease) .3s}
.hc-names span.is-on{opacity:1; transform:none}
html.js .hero-cover{clip-path:inset(100% 0 0 0); transition:clip-path 1.3s cubic-bezier(.77,0,.18,1)}
html.js .hero-cover .hc-ph img.is-on{transform:scale(1.14)}
html.js .hero-cover.is-in{clip-path:inset(0 0 0 0)}
html.js .hero-cover.is-in .hc-ph img.is-on{transform:scale(1); transition:opacity 1.6s ease, transform 2.2s var(--ease)}
.hero-cover:hover .hc-ph img.is-on{transform:scale(1.04)}
@media (max-width:1180px){ .hc-cap small{display:none} }
@media (max-width:900px){ .hero-cover{display:none} }
@keyframes lineUp{from{transform:translateY(108%)}to{transform:none}}
.hero-row{display:flex; align-items:flex-end; justify-content:space-between; gap:28px 56px; margin-top:clamp(28px,4.4vh,52px); animation:fadeUp .9s var(--ease) .42s both}
@keyframes fadeUp{from{opacity:0; transform:translateY(18px)}to{opacity:1; transform:none}}
.hero-sub{max-width:50ch; text-wrap:pretty; font-size:clamp(17px,1.32vw,19.5px); line-height:1.55; color:var(--tinta-2)}
.hero-cta{display:flex; align-items:center; gap:30px; flex:0 0 auto}

/* Galería en marquesina */
.mq{--mq-h:clamp(250px,44vh,500px); --mq-gap:clamp(14px,1.6vw,24px); margin-top:clamp(36px,5.5vh,72px); overflow:hidden; animation:mqIn 1.3s var(--ease) .32s both}
@keyframes mqIn{from{opacity:0; transform:translate3d(9vw,0,0)}to{opacity:1; transform:none}}
.mq-track{display:flex; width:max-content; animation:mqMove 95s linear infinite}
.mq:hover .mq-track{animation-play-state:paused}
.mq.mq-js{touch-action:pan-y; -webkit-user-select:none; user-select:none; cursor:grab}
.mq.mq-js .mq-track{animation:none; will-change:transform}
.mq.is-drag{cursor:grabbing}
.mq img{-webkit-user-drag:none; pointer-events:none}
.mq-item img{transition:transform 1.2s var(--ease)}
.mq.is-drag .mq-item img{transform:scale(.97)}
@keyframes mqMove{to{transform:translate3d(-50%,0,0)}}
.mq-item{flex:0 0 auto; margin-right:var(--mq-gap)}
.mq-item{overflow:hidden}
.mq-item img{display:block; width:calc(var(--mq-h) * var(--r)); height:var(--mq-h); object-fit:cover; background:#D3CBBF}
.mq-item figcaption{display:flex; justify-content:space-between; align-items:baseline; gap:16px; margin-top:12px; font-size:14px; color:var(--tinta-2)}
.mq-item figcaption span{font-family:var(--serif); font-style:italic; font-size:19px; color:var(--tinta)}
/* Ritmo fijo: vertical 4:5 y horizontal 3:2 alternos, misma altura */
.r1,.r3,.r5{--r:.8} .r2,.r4,.r6{--r:1.5}

@media (max-width:900px){
  .hero-t{font-size:11.4vw}
  .hero-row{flex-direction:column; align-items:flex-start}
}
@media (max-width:640px){
  .hero-t{font-size:13.6vw}
  .hero-cta{flex-wrap:wrap; gap:18px 26px}
  .mq{--mq-h:clamp(240px,38vh,320px)}
  .mq-item figcaption span{font-size:17px}
}

/* ---------- Encabezados de sección ---------- */
.sec-head{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px 64px; align-items:end; margin-bottom:clamp(48px,6vw,88px)}
.sec-head h2{font-family:var(--serif); font-size:clamp(42px,5.4vw,84px); line-height:.98; letter-spacing:-.022em; max-width:14ch}
.sec-head p{justify-self:end; max-width:46ch; color:var(--tinta-2)}
@media (max-width:860px){ .sec-head{grid-template-columns:1fr} .sec-head p{justify-self:start} }

/* ---------- Declaración ---------- */
.manifesto{padding:var(--sec) 0}
.manifesto-in{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--gut); align-items:stretch}
.manifesto-copy{grid-column:1 / 9}
.manifesto-lead{font-family:var(--serif); font-size:clamp(32px,3.9vw,60px); line-height:1.12; letter-spacing:-.008em; text-wrap:pretty}
.manifesto-foot{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:24px 56px; align-items:end; margin-top:clamp(40px,4.4vw,64px); padding-top:26px; border-top:1px solid var(--linea)}
.manifesto-foot > p:first-child{max-width:54ch; font-size:17px; color:var(--tinta-2)}
.sign{font-size:15px; color:var(--tinta-2); text-align:right}
.sign b{display:block; font-family:var(--serif); font-weight:400; font-size:28px; line-height:1.1; color:var(--tinta)}
.manifesto-media{position:relative; grid-column:10 / 13; min-height:360px; overflow:hidden; background:#D3CBBF}
.par{position:absolute; left:0; right:0; top:-14%; height:128%; display:block}
.par img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
@media (max-width:1000px){
  .manifesto-copy{grid-column:1 / -1}
  .manifesto-media{grid-column:1 / -1; margin-top:48px; min-height:0; aspect-ratio:16/9}
}
@media (max-width:640px){
  .manifesto-foot{grid-template-columns:1fr}
  .sign{text-align:left}
  .manifesto-media{aspect-ratio:4/3}
}

/* ---------- Servicios ---------- */
.services{background:var(--blanco); padding:var(--sec) 0}
.svc-list{border-top:1px solid var(--linea)}
.svc-list li{border-bottom:1px solid var(--linea)}
.svc{--x:56%; position:relative; display:grid; grid-template-columns:minmax(0,6fr) minmax(0,4fr) 58px; gap:20px clamp(28px,4vw,64px); align-items:center; padding:clamp(28px,3.2vw,46px) 0}
.svc h3{position:relative; z-index:2; font-family:var(--serif); font-size:clamp(34px,4.2vw,64px); line-height:1; letter-spacing:-.018em; transition:transform .6s var(--ease)}
.svc p{position:relative; z-index:2; max-width:44ch; font-size:16.5px; color:var(--tinta-2)}
.svc-go{display:grid; place-items:center; width:58px; height:58px; border-radius:50%; border:1px solid var(--linea); justify-self:end; transition:background .35s, color .35s, border-color .35s}
.svc-go svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.5; transition:transform .45s var(--ease)}
.svc-img{position:absolute; z-index:3; top:50%; left:var(--x); width:clamp(190px,16vw,248px); aspect-ratio:4/5; overflow:hidden; pointer-events:none; opacity:0; transform:translate(-50%,-50%) scale(.88); transition:opacity .35s, transform .6s var(--ease), left .55s var(--ease); background:#D3CBBF; box-shadow:0 30px 60px -30px rgba(36,33,30,.45)}
.svc-img img{width:100%; height:100%; object-fit:cover; transform:scale(1.18); transition:transform 1s var(--ease)}
.svc-wrap{position:relative}
.svc-float{display:none}
@media (hover:hover) and (min-width:901px){
  .svc-wrap.has-float .svc-img{display:none}
  .svc-float{display:block; position:absolute; z-index:3; left:0; top:0; width:clamp(200px,17vw,262px); aspect-ratio:4/5; margin:calc(clamp(200px,17vw,262px) * -.625) 0 0 calc(clamp(200px,17vw,262px) * -.5); pointer-events:none; will-change:transform}
  .svc-float::before{content:""; position:absolute; inset:0; background:#D3CBBF; box-shadow:0 34px 70px -34px rgba(36,33,30,.5); opacity:0; transform:scale(.86); transition:opacity .35s, transform .6s var(--ease)}
  .svc-float.is-on::before{opacity:1; transform:none}
  .svc-float img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transform:scale(1.12); clip-path:inset(8% 8% 8% 8%); transition:opacity .45s ease, transform .9s var(--ease), clip-path .7s var(--ease)}
  .svc-float.is-on img.is-on{opacity:1; transform:none; clip-path:inset(0 0 0 0)}
  .svc-list li{position:relative}
  .svc-list li::after{content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px; background:var(--tinta); transform:scaleX(0); transform-origin:left; transition:transform .8s var(--ease)}
  .svc-list li:hover::after{transform:scaleX(1)}
  .svc:hover h3{font-style:italic; transform:translateX(12px)}
  .svc:hover .svc-img{opacity:1; transform:translate(-50%,-50%) scale(1)}
  .svc:hover .svc-img img{transform:none}
  .svc:hover .svc-go{background:var(--tinta); border-color:var(--tinta); color:var(--blanco)}
  .svc:hover .svc-go svg{transform:rotate(-45deg)}
}
@media (max-width:900px), (hover:none){
  .svc{grid-template-columns:clamp(96px,17vw,170px) minmax(0,1fr); grid-template-rows:auto 1fr; gap:10px 22px; align-items:start}
  .svc-img{position:relative; z-index:auto; top:auto; left:auto; grid-row:1 / 3; width:100%; opacity:1; transform:none; box-shadow:none}
  .svc-img img{transform:none}
  .svc h3{font-size:clamp(28px,5.4vw,46px); align-self:end}
  .svc p{grid-column:2; font-size:16px}
  .svc-go{display:none}
}
@media (max-width:420px){
  .svc{grid-template-columns:96px minmax(0,1fr); gap:8px 18px}
  .svc h3{font-size:27px}
  .svc p{font-size:15.5px}
}

/* ---------- Proyectos seleccionados ----------
   Retícula de 12 columnas en dos filas espejo (7 + 5 y 5 + 7).
   Dentro de cada fila las dos imágenes comparten altura exacta,
   así que bordes superiores, inferiores y pies de foto coinciden. */
.works{padding:var(--sec) 0}
.works-intro{justify-self:end; max-width:46ch}
.works-intro p{margin-bottom:24px; color:var(--tinta-2)}
.works-grid{--row-h:clamp(380px,43vw,640px); display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--gut); row-gap:clamp(56px,6vw,96px)}
.work{min-width:0}
.work a{display:block}
.w-lg{grid-column:span 7}
.w-sm{grid-column:span 5}
.work-ph{position:relative; display:block; height:var(--row-h); overflow:hidden; background:#D3CBBF}
.work-ph img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1.4s var(--ease)}
.work-cap{position:relative; display:block; margin-top:18px; padding-top:16px; padding-right:40px; border-top:1px solid var(--linea)}
.work-cap::before{content:""; position:absolute; left:0; right:0; top:-1px; height:1px; background:var(--tinta); transform:scaleX(0); transform-origin:left; transition:transform .9s var(--ease)}
.work-go{position:absolute; right:0; top:22px; width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.5; opacity:.45; transition:transform .5s var(--ease), opacity .3s}
.work a:hover .work-cap::before{transform:scaleX(1)}
.work a:hover .work-go{opacity:1; transform:translateX(6px)}
.work h3{font-family:var(--serif); font-size:clamp(26px,2.3vw,34px); line-height:1.08}
.work-cap p{margin-top:6px; font-size:15px; color:var(--tinta-2)}
.work a:hover .work-ph img{transform:scale(1.05); transition-duration:2.4s}
.work a:hover h3{font-style:italic}
@media (max-width:860px){ .works-intro{justify-self:start} }
@media (max-width:900px){
  .works-grid{row-gap:48px}
  .w-lg,.w-sm{grid-column:span 6}
  .work-ph{height:auto; aspect-ratio:4/5}
}
@media (max-width:560px){
  .w-lg,.w-sm{grid-column:1 / -1}
  .work-ph{aspect-ratio:4/3}
}

/* ---------- Método ---------- */
.method{background:var(--tinta); color:var(--yeso); padding:var(--sec) 0}
.method-in{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(48px,7vw,120px); align-items:start}
.method-side{position:sticky; top:calc(var(--hd-h) + 40px)}
.method-side h2{font-family:var(--serif); font-size:clamp(40px,4.6vw,72px); line-height:1; letter-spacing:-.02em; max-width:13ch}
.method-side > p{margin-top:26px; max-width:42ch; color:var(--yeso-2)}
.method-side .method-time{margin-top:28px; padding-top:20px; border-top:1px solid var(--linea-l); font-size:16px}
.method-side .btn{margin-top:34px}
.steps{border-bottom:1px solid var(--linea-l)}
.steps li{position:relative; display:grid; grid-template-columns:68px minmax(0,1fr) auto; gap:8px 28px; padding:clamp(28px,3vw,40px) 0; border-top:1px solid var(--linea-l)}
.steps li::before{content:""; position:absolute; left:0; right:0; top:-1px; height:1px; background:var(--ocre-l); transform:scaleX(0); transform-origin:left; transition:transform 1.2s var(--ease)}
.steps li.is-active::before,.steps li.is-done::before{transform:scaleX(1)}
.step-n,.step-txt h3{transition:color .6s}
.steps li.is-active .step-n,.steps li.is-done .step-n{color:var(--ocre-l)}
.step-n{font-family:var(--serif); font-size:28px; line-height:1; color:rgba(228,222,212,.58); padding-top:8px}
.step-txt h3{font-family:var(--serif); font-size:clamp(32px,3vw,46px); line-height:1.02; letter-spacing:-.015em}
.step-txt p{margin-top:12px; max-width:52ch; font-size:16.5px; color:var(--yeso-2)}
.step-d{align-self:start; margin-top:6px; white-space:nowrap; font-size:14px; color:var(--yeso-2); padding:7px 14px; border:1px solid var(--linea-l); border-radius:999px}
.method :focus-visible{outline-color:var(--yeso)}
@media (max-width:960px){
  .method-in{grid-template-columns:1fr}
  .method-side{position:static}
}
@media (max-width:560px){
  .steps li{grid-template-columns:44px minmax(0,1fr); gap:6px 14px}
  .step-n{font-size:22px; padding-top:9px}
  .step-d{grid-column:2; justify-self:start; margin-top:12px}
}

/* ---------- Detalles ---------- */
.details{padding:var(--sec) 0 clamp(72px,8vw,120px)}
.details .sec-head h2{max-width:15ch}
.det-strip{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--gut)}
.det-strip figure{position:relative; aspect-ratio:1/1; overflow:hidden; background:#D3CBBF}
.det-strip img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transform:scale(1.08); transition:opacity 1.8s ease, transform 4s var(--ease)}
.det-strip img.is-on{opacity:1; transform:scale(1)}
.det-strip figure:hover img.is-on{transform:scale(1.045); transition:opacity 1.8s ease, transform 1.4s var(--ease)}
@media (max-width:700px){ .det-strip{grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px} }

/* ---------- Prensa ---------- */
.press{border-top:1px solid var(--linea); border-bottom:1px solid var(--linea)}
.press-in{display:flex; align-items:center; gap:28px 64px; padding-top:clamp(36px,4vw,56px); padding-bottom:clamp(36px,4vw,56px)}
.press h2{flex:0 0 auto; max-width:15ch; font:400 16px/1.45 var(--sans); color:var(--tinta-2)}
.press-list{flex:1; display:flex; align-items:center; justify-content:space-between; gap:28px 40px; color:rgba(36,33,30,.62)}
.press-list li{display:flex; align-items:baseline; white-space:nowrap; line-height:1; transition:color .3s}
.press-list li:hover{color:var(--tinta)}
.pr-ad b{font-family:var(--serif); font-weight:400; font-size:54px; letter-spacing:-.04em}
.pr-ad small{margin-left:7px; font-size:10.5px; font-weight:600; letter-spacing:.22em; text-transform:uppercase}
.pr-elle{font-weight:600; font-size:17px; letter-spacing:.34em}
.pr-ne{font-family:var(--serif); font-style:italic; font-size:37px}
.pr-mueble{font-weight:600; font-size:25px; letter-spacing:-.025em}
.press-list .pr-vogue{flex-direction:column; align-items:center}
.pr-vogue b{font-family:var(--serif); font-weight:400; font-size:36px; letter-spacing:.16em; padding-left:.16em}
.pr-vogue small{margin-top:3px; font-size:9px; font-weight:600; letter-spacing:.6em; padding-left:.6em}
.pr-int{font-size:20px; letter-spacing:.26em}
@media (max-width:1380px){
  .press-in{flex-direction:column; align-items:flex-start}
  .press h2{max-width:none}
  .press-list{width:100%}
}
@media (max-width:1080px){
  .press-list{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:36px 16px; justify-items:center}
  .press-in{align-items:center; text-align:center}
}
@media (max-width:600px){
  .press-list{grid-template-columns:repeat(2,minmax(0,1fr)); gap:34px 12px}
  .pr-ad b{font-size:48px}
  .pr-ne{font-size:33px}
  .pr-vogue b{font-size:32px}
}

/* ---------- Testimonios ---------- */
.voices{background:var(--oliva); color:var(--yeso); padding:var(--sec) 0}
.vo-stage{display:grid}
.vo-slide{grid-area:1 / 1; display:flex; flex-direction:column; opacity:0; visibility:hidden; transition:opacity .45s ease, visibility 0s .45s}
.vo-slide.is-active{opacity:1; visibility:visible; transition:opacity 1s ease .5s, visibility 0s}
.vo-slide blockquote{transform:translateY(18px); transition:transform 1.2s var(--ease)}
.vo-slide.is-active blockquote{transform:none; transition:transform 1.4s var(--ease) .2s}
.vo-slide figcaption img{clip-path:inset(0 0 100% 0); transition:clip-path .6s ease}
.vo-slide.is-active figcaption img{clip-path:inset(0 0 0 0); transition:clip-path 1s cubic-bezier(.77,0,.18,1) .55s}
html:not(.js) .vo-slide figcaption img{clip-path:none}
html:not(.js) .vo-slide:first-child{opacity:1; visibility:visible}
.vo-slide blockquote{max-width:20.5em; font-family:var(--serif); font-style:italic; font-size:clamp(34px,5.2vw,82px); line-height:1.06; text-wrap:pretty; letter-spacing:-.012em}
.vo-slide figcaption{display:flex; align-items:center; gap:18px; margin-top:auto; padding-top:clamp(32px,3.6vw,48px); font-size:16px; line-height:1.45; color:rgba(228,222,212,.86)}
.vo-slide figcaption img{flex:0 0 auto; width:56px; height:68px; object-fit:cover; background:rgba(228,222,212,.15)}
.vo-slide figcaption b{display:block; font-weight:500; font-size:17px; color:var(--yeso)}
.vo-ctrl{display:flex; align-items:center; justify-content:space-between; gap:24px; margin-top:clamp(44px,5vw,72px); padding-top:24px; border-top:1px solid rgba(228,222,212,.24)}
.vo-dots{display:flex; gap:12px}
.vo-dots button{all:unset; cursor:pointer; display:flex; align-items:center; width:clamp(44px,6vw,72px); height:28px}
.vo-dots i{position:relative; display:block; width:100%; height:2px; overflow:hidden; background:rgba(228,222,212,.3)}
.vo-dots i::after{content:""; position:absolute; inset:0; background:var(--yeso); transform:scaleX(0); transform-origin:left}
.vo-dots .is-active i::after{animation:voBar var(--slider-interval,7500ms) linear forwards}
@keyframes voBar{to{transform:scaleX(1)}}
.vo-arrows{display:flex; gap:10px}
.vo-arrows button{all:unset; box-sizing:border-box; cursor:pointer; display:grid; place-items:center; width:54px; height:54px; border-radius:50%; border:1px solid rgba(228,222,212,.4); transition:background .3s, color .3s, border-color .3s}
.vo-arrows button:hover{background:var(--yeso); border-color:var(--yeso); color:var(--oliva)}
.vo-arrows svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.5}
.voices :focus-visible{outline:2px solid var(--yeso); outline-offset:4px}

/* ---------- Materiales ---------- */
.materials{background:var(--blanco); padding:var(--sec) 0}
.mat-in{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--gut); align-items:stretch}
.mat-media{position:relative; grid-column:1 / 8; min-height:440px; overflow:hidden; background:#D3CBBF}

.mat-copy{grid-column:9 / 13}
.mat-copy h2{font-family:var(--serif); font-size:clamp(40px,4.4vw,68px); line-height:1; letter-spacing:-.02em}
.mat-copy > p{margin-top:24px; color:var(--tinta-2)}
.mat-list{margin:30px 0 34px; border-top:1px solid var(--linea)}
.mat-list li{position:relative; display:flex; align-items:center; gap:14px; padding:13px 0; border-bottom:1px solid var(--linea); font-size:16px}
html.js .mat-list li{border-bottom-color:transparent}
html.js .mat-list li::after{content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px; background:var(--linea); transform:scaleX(0); transform-origin:left; transition:transform 1s var(--ease) calc(.25s + var(--i,0) * .12s)}
html.js .mat-list.is-in li::after{transform:scaleX(1)}
.mat-list li::before{content:""; flex:0 0 auto; width:16px; height:1px; background:var(--ocre)}
@media (max-width:1000px){
  .mat-media{grid-column:1 / -1; min-height:0; aspect-ratio:16/10}
  .mat-copy{grid-column:1 / -1; margin-top:48px; max-width:620px}
}

/* ---------- Llamada final y formulario ---------- */
.contact{padding:var(--sec) 0}
.contact-in{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.04fr); gap:clamp(48px,7vw,120px); align-items:stretch}
.contact-copy{display:flex; flex-direction:column}
.contact-copy h2{font-family:var(--serif); font-size:clamp(60px,9.6vw,150px); line-height:.92; letter-spacing:-.028em; max-width:7.5em}
.contact-copy > p{margin-top:30px; max-width:44ch; font-size:18px; color:var(--tinta-2)}
.contact-data{margin:auto 0 0; padding-top:0; border-top:1px solid var(--linea)}
.contact-copy > p{margin-bottom:44px}
.contact-data div{display:grid; grid-template-columns:118px minmax(0,1fr); gap:16px; padding:15px 0; border-bottom:1px solid var(--linea)}
.contact-data dt{font-size:15px; color:var(--tinta-2); padding-top:1px}
.contact-data dd{margin:0; font-size:16.5px}
.contact-data a{background:linear-gradient(currentColor,currentColor) left bottom/0 1px no-repeat; transition:background-size .4s var(--ease)}
.contact-data a:hover{background-size:100% 1px}
.form{display:flex; flex-direction:column; background:var(--blanco); padding:clamp(28px,3.6vw,56px)}
.form .btn{align-self:flex-start; margin-top:auto}
.f{display:flex; flex-direction:column; gap:6px; margin-bottom:26px; min-width:0}
.f label{font-size:14px; font-weight:500}
.f input,.f select,.f textarea{width:100%; height:48px; font:400 16px/1.4 var(--sans); color:var(--tinta); background:transparent; border:0; border-bottom:1px solid rgba(36,33,30,.32); border-radius:0; padding:10px 0 12px; transition:border-color .25s, box-shadow .25s; -webkit-appearance:none; appearance:none}
.f select{cursor:pointer; padding-right:28px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2324211E' stroke-width='1.6'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 2px center/18px no-repeat}
.f textarea{height:auto; resize:vertical; min-height:112px}
.f input::placeholder,.f textarea::placeholder{color:rgba(36,33,30,.5)}
.f input,.f textarea{background:linear-gradient(var(--ocre-d),var(--ocre-d)) left bottom / 0 2px no-repeat; transition:border-color .25s, background-size .6s var(--ease)}
.f select{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2324211E' stroke-width='1.6'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 2px center/18px no-repeat, linear-gradient(var(--ocre-d),var(--ocre-d)) left bottom / 0 2px no-repeat; transition:border-color .25s, background-size .6s var(--ease)}
.f input:focus,.f textarea:focus{outline:none; background-size:100% 2px}
.f select:focus{outline:none; background-size:18px, 100% 2px}
.f input[type=number]{-moz-appearance:textfield}
.f input[type=number]::-webkit-inner-spin-button,.f input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none; margin:0}
.f-row{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:28px}
.f-row-b{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}
.f-check{display:flex; align-items:flex-start; gap:12px; margin:4px 0 30px; font-size:14.5px; line-height:1.5; color:var(--tinta-2); cursor:pointer}
.f-check input{margin:3px 0 0; width:16px; height:16px; accent-color:var(--tinta); flex:0 0 auto}
.f-check a{text-decoration:underline; text-underline-offset:2px}
@media (max-width:960px){ .contact-in{grid-template-columns:1fr} }
@media (max-width:520px){
  .f-row,.f-row-b{grid-template-columns:1fr}
  .contact-data div{grid-template-columns:1fr; gap:2px}
  .form .btn{width:100%}
}

/* ---------- Pie ---------- */
.ft{background:var(--tinta); color:rgba(228,222,212,.86); padding:clamp(72px,8vw,120px) 0 28px; font-size:16px}
.ft-top{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:36px 32px}
.ft h2{font:500 13px/1.3 var(--sans); color:rgba(228,222,212,.58); margin-bottom:12px}
.ft p{line-height:1.6}
.ft-col a{background:linear-gradient(currentColor,currentColor) left bottom/0 1px no-repeat; transition:background-size .4s var(--ease)}
.ft-col a:hover{background-size:100% 1px}
.ft-ig{display:inline-flex; align-items:center; gap:9px}
.ft-ig svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.5}
.ft-word{margin:clamp(56px,7vw,110px) 0 0; overflow:hidden}
.ft-word span{display:block; width:max-content; font-family:var(--serif); font-size:37vw; line-height:.62; letter-spacing:-.04em; color:var(--yeso); white-space:nowrap; text-box:trim-both ex alphabetic; padding:.03em 0}
.ft-word .fl{font-style:normal}
.ft-anim .fl{display:inline-block; transform:translateY(.82em); transition:transform 1.3s cubic-bezier(.2,.75,.15,1) calc(var(--li) * .11s)}
.ft-anim.is-in .fl{transform:none}
.ft-bot{display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px 32px; margin-top:clamp(36px,4vw,56px); padding-top:24px; border-top:1px solid var(--linea-l); font-size:14px; color:rgba(228,222,212,.66)}
.ft-bot nav{display:flex; gap:22px}
.ft-bot a:hover{color:var(--yeso)}
.ft :focus-visible{outline-color:var(--yeso)}
@media (max-width:900px){ .ft-top{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:460px){ .ft-top{grid-template-columns:1fr} .ft-bot{flex-direction:column} }

/* ---------- Revelado de imágenes con cortinilla (data-clipin) ---------- */
html.clip-ready [data-clipin]{clip-path:inset(0 0 100% 0); transition:clip-path 1.25s cubic-bezier(.77,0,.18,1) var(--cd,0ms)}
html.clip-ready [data-clipin="left"]{clip-path:inset(0 100% 0 0)}
html.clip-ready [data-clipin].is-in{clip-path:inset(0 0 0 0)}
html.clip-ready [data-clipin] img{transform:scale(1.16)}
html.clip-ready [data-clipin].is-in img{transform:none; transition:transform 1.9s cubic-bezier(.2,.75,.15,1) var(--cd,0ms), opacity 1.8s ease}
html.clip-ready .det-strip figure.is-in img:not(.is-on){transform:scale(1.08)}
html.clip-ready .work a:hover [data-clipin].is-in img{transform:scale(1.05); transition:transform 2.4s cubic-bezier(.2,.75,.15,1)}
html.clip-ready .det-strip figure.is-in:hover img.is-on{transform:scale(1.045); transition:opacity 1.8s ease, transform 1.4s var(--ease)}

/* ---------- Cursor "lupa editorial" ----------
   Aro grande muy fino en tinta y punto pequeño. Sobre enlaces el aro se
   cierra como una lupa que enfoca y el punto toma el ocre; sobre proyectos
   y galería aparece una burbuja con texto en serif cursiva. */
html.cursor-interiorismo{
  --cur-dot:5px; --cur-dot-bg:var(--tinta); --cur-ring:60px; --cur-ring-border:1px solid rgba(36,33,30,.6); --cur-ring-bg:transparent;
  --cur-link-scale:.66; --cur-link-bg:rgba(36,33,30,.05); --cur-link-dot:1.3; --cur-lerp:.14;
  --cur-label-size:112px; --cur-label-bg:var(--tinta); --cur-label-fg:var(--blanco);
  --cur-dark-dot:var(--yeso); --cur-dark-ring:1px solid rgba(228,222,212,.66)
}
.cursor-interiorismo .cur-ring::before{box-shadow:0 0 0 1px rgba(243,240,234,.16); -webkit-backdrop-filter:contrast(1.05) saturate(1.1); backdrop-filter:contrast(1.05) saturate(1.1)}
.cursor-interiorismo .cur-dot::before{box-shadow:0 0 0 1px rgba(243,240,234,.35)}
.cursor-interiorismo .cur-label{font:italic 400 20px/1.1 var(--serif); letter-spacing:0; box-shadow:0 18px 40px -18px rgba(36,33,30,.55)}
html.has-cur.cursor-interiorismo.cur-link{--cur-dot-bg:var(--ocre)}
html.has-cur.cursor-interiorismo.cur-dark{--cur-label-bg:var(--yeso); --cur-label-fg:var(--tinta)}
html.has-cur.cursor-interiorismo.cur-dark.cur-link{--cur-dot-bg:var(--ocre-l); --cur-link-bg:rgba(228,222,212,.06)}
html.has-cur.cursor-interiorismo.menu-open{--cur-dot-bg:var(--yeso); --cur-ring-border:1px solid rgba(228,222,212,.66)}
html.has-cur.cursor-interiorismo.menu-open.cur-link{--cur-dot-bg:var(--ocre-l)}

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero-row,.mq{animation:none}
  html.js .hero-cover{clip-path:none; transition:none}
  .vo-slide blockquote,.vo-slide figcaption img{transform:none; clip-path:none; transition:none}
  .hc-ph img,.hc-names span,.det-strip img,.fm-media img,.fm-media figcaption span,.svc-float img,.steps li::before,.mat-list li::after,.work-cap::before{transition:none}
  .mq img{pointer-events:auto}
  .mq-track{animation:none}
  .mq{overflow-x:auto; scrollbar-width:thin}
  .fmenu,.fm-nav li,.fm-info,.fm-media,.fm-media img{transition:none}
  .vo-slide,.vo-slide.is-active{transition:none}
  .vo-dots .is-active i::after{animation:none; transform:scaleX(1)}
  .work-ph img,.det-strip img,.svc-img,.svc-img img{transition:none}
}