/* ══════════════════════════════════════════════════════════════════
   vvivve · sistema de diseño · V4
   Valores tomados literalmente de la maqueta aprobada: Arial en peso
   300, tracking negativo fuerte en los titulares, etiquetas de 9px con
   tracking amplio. Lo que se añade abajo (páginas interiores) usa esa
   misma escala, no una nueva.
   ══════════════════════════════════════════════════════════════════ */

:root{
  --bg:#f2f0eb;
  --ink:#171715;
  --muted:#74716b;
  --line:#c9c5bd;
  --pad:clamp(22px,3.2vw,52px);
  --hover:#e9e6df;          /* fila del catálogo y fondo de "a medida" */
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:Arial,Helvetica,sans-serif;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{width:100%;display:block}

/* ── Cabecera ── */
header{position:fixed;z-index:10;inset:0 0 auto;padding:22px var(--pad);
  display:flex;justify-content:space-between;color:var(--ink);
  transition:color .45s ease}
/* Sobre la fotografía de portada va en blanco; en cuanto se pasa de largo
   vuelve a la tinta del resto del sitio. */
header.sobre-foto{color:#fff}
.logo{display:inline-flex;align-items:center;min-height:44px}
/* El logotipo se pinta por máscara, así toma el color de la cabecera. */
.logo .marca{display:block;width:116px;height:15px;background-color:currentColor;
  -webkit-mask:url(img/marca/wordmark.png) center/contain no-repeat;
  mask:url(img/marca/wordmark.png) center/contain no-repeat}

/* ── Intro de portada ─────────────────────────────────────
   El rombo se forma sobre la fotografía y se parte por la mitad: la mitad
   de arriba (Λ) se difumina y sube; la de abajo (V) baja a la izquierda,
   encoge y hace de primera letra de "vvivve", mientras el resto del
   logotipo se descubre a su derecha. Después el conjunto vuela al hueco
   real del logo en la cabecera, medido en el momento.
   Geometría y tiempos calcados de la versión anterior. */
#intro{position:fixed;inset:0;z-index:3000;background:rgba(15,20,18,.4);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  pointer-events:none}
#intro .escena{width:min(92vw,720px);height:auto;display:block;overflow:visible;
  filter:drop-shadow(0 3px 18px rgba(0,0,0,.4))}
#intro .i-top,#intro .i-bot{transform-box:fill-box;transform-origin:center;
  will-change:transform,opacity,filter}
#intro .i-top{animation:introTop 2.8s cubic-bezier(.23,1,.32,1) forwards}
#intro .i-bot{animation:introBot 2.8s cubic-bezier(.23,1,.32,1) forwards}
/* En vez de descubrirse de un barrido, el logotipo se escribe: cada letra
   se despliega desde su propio centro, una detrás de otra, mientras la
   mitad de arriba del rombo termina de deshacerse. El recorte de cada letra
   va también en el marcado, así que sin animación se lee igual. */
#intro .i-letra{transform-box:fill-box;transform-origin:50% 100%;opacity:0;
  will-change:transform,opacity,clip-path;
  animation-duration:.76s;animation-timing-function:cubic-bezier(.19,1,.22,1);
  animation-fill-mode:forwards;animation-delay:calc(1.45s + var(--i) * 105ms)}
@keyframes introLetra0{
  from{opacity:0;transform:translateY(9px);clip-path:inset(0 69.5% 0 30.5%)}
  to{opacity:1;transform:none;clip-path:inset(0 58.9% 0 19.9%)}
}
#intro .i-letra:nth-of-type(1){animation-name:introLetra0}
@keyframes introLetra1{
  from{opacity:0;transform:translateY(9px);clip-path:inset(0 55.9% 0 44.1%)}
  to{opacity:1;transform:none;clip-path:inset(0 52.9% 0 41.1%)}
}
#intro .i-letra:nth-of-type(2){animation-name:introLetra1}
@keyframes introLetra2{
  from{opacity:0;transform:translateY(9px);clip-path:inset(0 42.28% 0 57.72%)}
  to{opacity:1;transform:none;clip-path:inset(0 31.65% 0 47.1%)}
}
#intro .i-letra:nth-of-type(3){animation-name:introLetra2}
@keyframes introLetra3{
  from{opacity:0;transform:translateY(9px);clip-path:inset(0 21.12% 0 78.88%)}
  to{opacity:1;transform:none;clip-path:inset(0 10.6% 0 68.35%)}
}
#intro .i-letra:nth-of-type(4){animation-name:introLetra3}
@keyframes introLetra4{
  from{opacity:0;transform:translateY(9px);clip-path:inset(0 5.3% 0 94.7%)}
  to{opacity:1;transform:none;clip-path:inset(0 0.0% 0 89.4%)}
}
#intro .i-letra:nth-of-type(5){animation-name:introLetra4}
@keyframes introTop{
  0%{opacity:0;transform:translate(0,16px)}
  18%{opacity:1;transform:translate(0,0)}
  42%{opacity:1;transform:translate(0,0);filter:blur(0)}
  64%,100%{opacity:0;transform:translate(0,-32px) scale(1.05);filter:blur(9px)}
}
@keyframes introBot{
  0%{opacity:0;transform:translate(0,16px)}
  18%{opacity:1;transform:translate(0,0)}
  42%{opacity:1;transform:translate(0,0)}
  80%,100%{opacity:1;transform:translate(-130.5px,-35px) scale(.641)}
}
/* La cabecera no aparece hasta que el logotipo aterriza en su esquina. */
header{transition:opacity .5s ease}
html.intro-en-marcha header{opacity:0;pointer-events:none}
html.intro-bloqueo{overflow:hidden}
/* Los textos de portada esperan a que el logotipo llegue a su esquina y
   entonces suben uno detrás de otro, como si se destaparan.

   Va por transición y no por animación a propósito: una animación con
   relleno hacia atrás deja el titular invisible mientras está pendiente
   —y en una pestaña que aún no se ha pintado puede no arrancar nunca—.
   Así el estado natural es "visible" y lo excepcional es esconderlo. */
.hero h1 .linea,.hero-bottom p .linea{display:block}
.hero-inner .linea{opacity:1;transform:none;clip-path:inset(0 0 -30% 0);
  transition:opacity .95s cubic-bezier(.19,1,.22,1) calc(var(--i) * 95ms),
             transform .95s cubic-bezier(.19,1,.22,1) calc(var(--i) * 95ms),
             clip-path .95s cubic-bezier(.19,1,.22,1) calc(var(--i) * 95ms)}
html.intro-en-marcha .hero-inner .linea{opacity:0;transform:translateY(.55em);
  clip-path:inset(0 0 106% 0);transition:none}

@media (prefers-reduced-motion:reduce){#intro{display:none}}
.nav{display:flex;gap:30px;font-size:9px;letter-spacing:.19em}
.nav a{display:inline-flex;align-items:center;min-height:44px;transition:opacity .25s}
.nav a:hover{opacity:.6}
.nav a[aria-current="page"]{opacity:.6}
.menu{display:none;background:none;border:0;color:inherit;font-size:9px;
  letter-spacing:.19em;text-transform:uppercase;cursor:pointer;
  min-height:44px;align-items:center}

a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:2px solid currentColor;outline-offset:4px}
.skip{position:absolute;left:-9999px}
.skip:focus{position:fixed;left:var(--pad);top:16px;z-index:50;
  display:inline-flex;align-items:center;min-height:44px;padding:0 20px;
  background:var(--ink);color:var(--bg);font-size:9px;letter-spacing:.2em;
  text-transform:uppercase}

/* Nota sobre las unidades: aquí se usa svh y no vh a propósito. En iOS,
   100vh mide la ventana CON la barra del navegador oculta, así que una caja
   de 100vh es más alta que lo que se ve y aparece hueco de más. svh mide la
   ventana visible siempre. */

/* ── Portada ── */
.hero{height:100vh;height:100svh;min-height:650px;position:relative;color:#fff;overflow:hidden}
.hero-bg{position:absolute;inset:0}
.hero-bg img{height:100%;object-fit:cover}
/* El velo lateral es lo que sostiene el titular sobre la fotografía */
.hero-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,#1119,#1111 70%)}
.hero-inner{position:absolute;inset:0;padding:0 var(--pad) 7svh;
  display:flex;flex-direction:column;justify-content:end}
.eyebrow,.label{font-size:9px;letter-spacing:.2em;text-transform:uppercase;
  font-weight:400;margin:0;line-height:1.5}
.hero h1{font-size:clamp(76px,12vw,185px);line-height:.78;font-weight:300;
  letter-spacing:-.065em;margin:20px 0 0}
.hero-bottom{margin-top:55px;display:flex;justify-content:space-between;
  align-items:end;max-width:900px}
.hero-bottom p{font-size:11px;line-height:1.65;letter-spacing:.05em;
  text-transform:uppercase;margin:0}
.text-link{font-size:9px;letter-spacing:.18em;text-transform:uppercase;
  border-bottom:1px solid currentColor;padding-bottom:8px;
  display:inline-block;transition:opacity .25s}
.text-link:hover{opacity:.55}

/* ── Secciones ── */
.section{padding:105px var(--pad)}
.intro{display:grid;grid-template-columns:1fr 2fr;gap:40px;
  border-bottom:1px solid var(--line)}
.intro h2,.collection h2{font-size:clamp(40px,5.2vw,78px);font-weight:300;
  line-height:.94;letter-spacing:-.05em;margin:0}
.intro p,.collection p{max-width:620px;font-size:14px;line-height:1.7;color:#494640}
.section-top{display:flex;justify-content:space-between;gap:20px;margin-bottom:42px}

/* ── Proyectos ──
   Cada proyecto es una sección de varias pantallas de alto. Dentro, el
   bloque se queda fijo y el vídeo avanza con el scroll: se recorre el
   espacio sin que la composición se mueva. */
.projects{display:flex;flex-direction:column}
.project-scroll{position:relative;height:300vh;height:300svh}
.project-sticky{position:sticky;top:0;height:100vh;height:100svh;display:flex;align-items:center;
  padding-block:90px}
/* Sin scroll suave del sistema no hay recorrido: el vídeo queda en su primer
   fotograma y el bloque se comporta como la versión de imagen. */
@media (prefers-reduced-motion: reduce){
  .project-scroll{height:auto}
  .project-sticky{position:static;height:auto;padding-block:55px}
}
.project{display:grid;grid-template-columns:minmax(0,8fr) minmax(280px,4fr);
  gap:32px;align-items:end;width:100%}
.project-scroll:nth-child(even) .project{
  grid-template-columns:minmax(280px,4fr) minmax(0,8fr)}
.project-scroll:nth-child(even) .p-image{grid-column:2;grid-row:1}
.project-scroll:nth-child(even) .project>div:last-child{grid-column:1;grid-row:1}
.p-image{width:100%;aspect-ratio:16/9;overflow:hidden;background:var(--hover);
  position:relative}
.p-image img,.p-image video{width:100%;height:100%;object-fit:cover;display:block}
.p-image img{transition:transform .9s}
/* El acercamiento al pasar el ratón sólo va en proyectos sin vídeo. Un
   transform promociona la imagen a la capa de elementos posicionados y,
   como va detrás del vídeo en el marcado, acababa pintándose encima: con
   el ratón sobre el bloque —justo donde está al usar la rueda— tapaba el
   recorrido entero. */
.project-scroll:not([data-video]) .project:hover .p-image img{transform:scale(1.025)}
/* El póster cubre el vídeo hasta que hay fotograma que enseñar */
.p-image video{position:absolute;inset:0;z-index:1;opacity:0;transition:opacity .5s}
.p-image video.listo{opacity:1}
/* Barra de recorrido: dice cuánto queda del vídeo sin números ni flechas */
.p-progress{position:absolute;left:0;right:0;bottom:0;height:2px;
  background:rgba(255,255,255,.25);z-index:2}
.p-progress i{display:block;height:100%;width:0;background:#fff;
  transform-origin:left}
.project>div:last-child{padding-bottom:5px}
.p-index,.p-meta{font-size:9px;letter-spacing:.15em;color:var(--muted);
  text-transform:uppercase}
.p-name{font-size:clamp(30px,4vw,60px);font-weight:300;letter-spacing:-.045em;
  margin:18px 0}
.p-arrow{margin-top:45px;font-size:20px}

/* ── Mobiliario: bloque oscuro ── */

/* ── Catálogo ── */
.collection{padding-top:95px}
.collection-intro{display:grid;grid-template-columns:1fr 2fr;gap:40px;margin-bottom:45px}
.collection h2{font-size:clamp(35px,4.7vw,70px)}
.catalogue{border-top:1px solid var(--line)}
.object{display:grid;grid-template-columns:55px 1fr 180px 35px;gap:20px;
  align-items:center;border-bottom:1px solid var(--line);padding:18px 0;
  transition:.3s}
.object:hover{padding-left:14px;background:var(--hover)}
.object span{font-size:9px;letter-spacing:.15em;color:var(--muted)}
.object .name{font-size:17px;color:var(--ink);letter-spacing:0}
.object .mat{text-align:right}
/* Grupos por tipología: ordenan las 65 piezas del repertorio */
.group{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:48px 0 12px}
.group h2{font-size:17px;font-weight:400;letter-spacing:0;margin:0}
.group span{font-size:9px;letter-spacing:.15em;color:var(--muted)}

/* ── A medida ── */
.bespoke{display:grid;grid-template-columns:1fr 1fr;min-height:680px;background:var(--hover)}
.bespoke-image{position:relative;overflow:hidden}
.bespoke-image img{height:100%;object-fit:cover}
.bespoke-copy{padding:100px var(--pad);display:flex;flex-direction:column;
  justify-content:space-between;gap:60px}
.bespoke-copy h2{font-size:clamp(52px,6vw,92px);font-weight:300;line-height:.88;
  letter-spacing:-.055em;margin:20px 0}
.bespoke-copy p{font-size:13px;line-height:1.7;max-width:470px;margin:0 0 24px}

/* ── Estudio ── */
.studio{display:grid;grid-template-columns:1fr 2fr;gap:40px}
.studio h2{font-size:clamp(45px,5.4vw,80px);font-weight:300;line-height:.9;
  letter-spacing:-.05em;margin:0}
.studio-right{display:grid;grid-template-columns:1fr 1fr;gap:45px;align-content:end}
.studio-right p{grid-column:span 2;font-size:13px;line-height:1.75;max-width:550px;margin:0}
.stat{border-top:1px solid var(--line);padding-top:14px;font-size:9px;
  letter-spacing:.14em;text-transform:uppercase;line-height:1.7}
.stat b{display:block;font-size:34px;font-weight:300;letter-spacing:-.04em;
  line-height:1;margin-bottom:10px;text-transform:none}

/* ── Contacto ── */
.contact{border-top:1px solid var(--line);display:grid;
  grid-template-columns:1fr 2fr;gap:40px}
.contact h2{font-size:clamp(70px,10vw,150px);font-weight:300;
  letter-spacing:-.065em;line-height:.78;margin:0}
.contact-right{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-content:end}
.contact-right div{font-size:11px;line-height:1.8}
.contact-right strong{font-size:9px;letter-spacing:.15em;text-transform:uppercase;
  font-weight:400;display:block;color:var(--muted);margin-bottom:5px}
.contact-right a{border-bottom:1px solid var(--line)}

/* Formulario en el mismo registro: líneas, sin cajas */
.form{display:grid;grid-template-columns:1fr;gap:22px;margin-top:55px;max-width:640px}
@media(min-width:700px){ .form{grid-template-columns:1fr 1fr} }
.field{display:flex;flex-direction:column;gap:8px}
.field.wide{grid-column:1/-1}
.field label{font-size:9px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}
.field input,.field textarea{width:100%;min-height:46px;padding:10px 0;border:0;
  border-bottom:1px solid var(--line);background:none;color:var(--ink);
  font-family:inherit;font-size:15px;border-radius:0;transition:border-color .3s}
.field input:focus,.field textarea:focus{outline:none;border-bottom-color:var(--ink)}
.field textarea{min-height:90px;resize:vertical}
.consent{grid-column:1/-1;display:flex;align-items:center;gap:11px;min-height:44px;
  font-size:11px;color:var(--muted);cursor:pointer}
.consent input{width:15px;height:15px;flex:0 0 auto;accent-color:var(--ink);cursor:pointer}
.consent a{border-bottom:1px solid var(--line)}
.send{grid-column:1/-1;justify-self:start;min-height:46px;padding:14px 0;border:0;
  border-bottom:1px solid var(--ink);background:none;color:var(--ink);
  font-family:inherit;font-size:9px;letter-spacing:.18em;text-transform:uppercase;
  cursor:pointer;transition:opacity .25s}
.send:hover{opacity:.55}
.send[disabled]{opacity:.4;cursor:default}
.notice{grid-column:1/-1;font-size:11px;line-height:1.8;margin:0}
.gates{display:flex;flex-wrap:wrap;gap:9px;margin-top:36px}
.gate{min-height:42px;padding:11px 18px;border:1px solid var(--line);background:none;
  font-family:inherit;font-size:9px;letter-spacing:.15em;text-transform:uppercase;
  cursor:pointer;transition:.25s}
.gate:hover,.gate[aria-pressed="true"]{background:var(--ink);color:var(--bg);
  border-color:var(--ink)}

footer{border-top:1px solid var(--line);padding:27px var(--pad);
  display:flex;justify-content:space-between;gap:15px;flex-wrap:wrap;
  font-size:8px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}
footer a:hover{color:var(--ink)}

/* ── Menú a pantalla completa ── */
.overlay{position:fixed;z-index:30;inset:0;background:var(--bg);
  padding:110px var(--pad);transform:translateY(-100%);transition:.5s;
  display:flex;flex-direction:column;justify-content:center}
.overlay.open{transform:none}
.overlay .close{position:absolute;right:var(--pad);top:20px;border:0;background:none;
  font-family:inherit;font-size:9px;letter-spacing:.19em;text-transform:uppercase;
  cursor:pointer;min-height:44px;color:inherit}
.overlay nav{display:flex;flex-direction:column;gap:8px}
.overlay a{font-size:clamp(55px,10vw,140px);font-weight:300;line-height:.85;
  letter-spacing:-.06em}
.overlay .datos{margin-top:55px;font-size:9px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--muted)}

/* ══════════════════════════════════════════════════════════════════
   Páginas interiores. Misma escala: nada de tamaños nuevos.
   ══════════════════════════════════════════════════════════════════ */

/* ── Cabecera de archivo (proyectos, mobiliario, a medida, estudio) ── */
.head{padding:165px var(--pad) 0}
.head h1{font-size:clamp(60px,9vw,150px);font-weight:300;line-height:.82;
  letter-spacing:-.06em;margin:20px 0 0}
.head .intro-text{font-size:14px;line-height:1.7;max-width:620px;
  margin:32px 0 0;color:#494640}

/* ── Publicación de proyecto ── */
.work-head{padding:165px var(--pad) 0;display:grid;
  grid-template-columns:1fr 2fr;gap:40px}
.work-head h1{font-size:clamp(60px,9vw,150px);font-weight:300;line-height:.82;
  letter-spacing:-.06em;margin:0}
.work-meta{display:flex;flex-wrap:wrap;gap:8px 30px;margin-top:38px;
  font-size:9px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}
.plate{margin:75px 0}
.plate .frame{width:100%;aspect-ratio:16/9;overflow:hidden;background:var(--hover)}
.plate .frame img{height:100%;object-fit:cover}
.story{display:grid;grid-template-columns:minmax(0,8fr) minmax(280px,4fr);gap:32px;
  align-items:end;padding:0 var(--pad) 75px}
.story .frame{width:100%;aspect-ratio:4/3;overflow:hidden;background:var(--hover)}
.story .frame img{height:100%;object-fit:cover}
.story .text{font-size:13px;line-height:1.75;padding-bottom:5px}
.story .text .label{display:block;margin-bottom:16px;color:var(--muted)}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:32px;padding:0 var(--pad)}
.pair .frame{width:100%;aspect-ratio:4/3;overflow:hidden;background:var(--hover)}
.pair .frame img{height:100%;object-fit:cover}
.specs{display:grid;grid-template-columns:1fr 2fr;gap:40px;
  padding:105px var(--pad);border-top:1px solid var(--line)}
.specs dl{margin:0}
.specs dl > div{display:grid;gap:3px 24px;padding:14px 0;
  border-bottom:1px solid var(--line)}
@media(min-width:600px){ .specs dl > div{grid-template-columns:150px 1fr;align-items:baseline} }
.specs dt{font-size:9px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}
.specs dd{margin:0;font-size:13px;line-height:1.7}
.next{position:relative;display:block;height:58svh;min-height:330px;overflow:hidden}
.next img{height:100%;object-fit:cover;transition:transform .9s}
.next:hover img{transform:scale(1.025)}
.next::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,#111c,#1112)}
.next .over{position:absolute;left:var(--pad);right:var(--pad);bottom:42px;
  z-index:2;color:#fff}
.next h2{font-size:clamp(40px,6vw,92px);font-weight:300;line-height:.86;
  letter-spacing:-.055em;margin:12px 0 0}

/* ── Ficha de pieza ── */
.piece{padding:150px var(--pad) 0;display:grid;grid-template-columns:1fr;gap:40px}
@media(min-width:900px){
  .piece{grid-template-columns:minmax(0,7fr) minmax(300px,5fr);gap:52px;align-items:start}
}
.crumbs{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px 9px;margin-bottom:18px;
  font-size:9px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}
.crumbs a:hover{color:var(--ink)}
.shots{display:grid;gap:22px}
.shots .frame{width:100%;aspect-ratio:1/1;overflow:hidden;background:var(--hover)}
.shots .frame + .frame{aspect-ratio:4/3}
.shots .frame img{height:100%;object-fit:cover}
.piece-info h1{font-size:clamp(34px,4.4vw,62px);font-weight:300;line-height:.92;
  letter-spacing:-.05em;margin:18px 0 0}
@media(min-width:900px){ .piece-info{position:sticky;top:120px} }
.piece-info .lead{font-size:14px;line-height:1.7;color:#494640;max-width:40ch;margin:24px 0 0}
.piece-info .body{font-size:13px;line-height:1.75;max-width:40ch;margin:18px 0 0}
.piece-info .body b{font-weight:400;border-bottom:1px solid var(--line)}
.piece-info dl{margin:34px 0 0}
.piece-info dl > div{display:grid;gap:3px 20px;padding:13px 0;
  border-bottom:1px solid var(--line)}
@media(min-width:600px){ .piece-info dl > div{grid-template-columns:120px 1fr;align-items:baseline} }
.piece-info dt{font-size:9px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}
.piece-info dd{margin:0;font-size:12.5px;line-height:1.7}
.request{display:inline-block;margin-top:34px;min-height:46px;padding:15px 26px;
  background:var(--ink);color:var(--bg);font-size:9px;letter-spacing:.18em;
  text-transform:uppercase;transition:opacity .25s}
.request:hover{opacity:.82}
.terms{margin-top:20px;font-size:8px;letter-spacing:.13em;line-height:2.1;
  text-transform:uppercase;color:var(--muted)}
.bridge{grid-column:1/-1;margin-top:90px;padding-top:26px;
  border-top:1px solid var(--line);display:flex;flex-wrap:wrap;
  align-items:baseline;justify-content:space-between;gap:14px 30px}
.bridge p{font-size:13px;line-height:1.7;max-width:46ch;color:#494640;margin:0}
.siblings{padding:100px var(--pad)}
.strip{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
@media(min-width:760px){ .strip{grid-template-columns:repeat(4,1fr)} }
.strip .frame{width:100%;aspect-ratio:1/1;overflow:hidden;background:var(--hover)}
.strip .frame img{height:100%;object-fit:cover;transition:transform .9s}
.strip a:hover .frame img{transform:scale(1.025)}
.strip .cap{display:flex;justify-content:space-between;gap:10px;padding-top:12px;
  font-size:11px}
.strip .cap span:last-child{font-size:9px;letter-spacing:.15em;color:var(--muted)}

/* ── Disciplinas: enlazan las páginas que sostienen el SEO ── */
.fields{border-top:1px solid var(--line)}
.field-row{display:grid;grid-template-columns:55px 1fr 35px;gap:20px;
  align-items:center;border-bottom:1px solid var(--line);padding:20px 0;transition:.3s}
.field-row:hover{padding-left:14px;background:var(--hover)}
.field-row .n{font-size:9px;letter-spacing:.15em;color:var(--muted)}
.field-row .name{font-size:clamp(19px,2.4vw,30px);font-weight:300;letter-spacing:-.035em}
.field-row .go{text-align:right;font-size:16px}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
}

/* ── Móvil ── */
@media(max-width:760px){
  header{padding-top:18px}
  .nav{display:none}
  .menu{display:inline-flex}
  /* En vertical el recorte se come casi toda la foto: lo desplazamos para
     que caiga dentro el arco de madera y el mostrador, no las estanterías. */
  .hero-bg img{object-position:62% 50%}
  .hero h1{font-size:23vw}
  .hero-bottom{display:block;margin-top:24px}
  .hero-bottom .text-link{display:inline-block;margin-top:16px}
  .intro,.studio,.contact,.collection-intro{display:block}
  .intro h2{margin-top:18px}
  .section{padding:48px var(--pad)}
  .projects{gap:0}
  /* Una pantalla justa por proyecto: el bloque se clava mientras el vídeo
     avanza —así hay que bajar más para verlo entero— y como el tramo mide
     exactamente una pantalla, el siguiente proyecto está asomando todo el
     rato por debajo: se gana recorrido sin abrir hueco. */
  /* Un gesto corto en el móvil se lleva mil píxeles: con un tramo de una
     pantalla el vídeo entero pasaba de un manotazo. Tres pantallas por
     proyecto dan 2,5 veces más tiempo para mirar el espacio. */
  .project-scroll{height:300vh;height:300svh}
  /* Y el bloque llena la pantalla: si no, todo el recorrido que se gana
     anclando se ve como hueco debajo. La imagen se queda con lo que dejan
     el rótulo y los márgenes. */
  .project-sticky{position:sticky;top:0;height:100vh;height:100svh;
    padding-block:18px}
  .project,.project-scroll:nth-child(even) .project{display:flex;flex-direction:column;
    gap:11px;height:100%}
  .project-scroll:nth-child(even) .p-image,
  .project-scroll:nth-child(even) .project>div:last-child{order:initial}
  .p-image{aspect-ratio:auto;flex:1;min-height:0}
  .p-arrow{margin-top:14px}
  .collection h2{margin:16px 0}
  .object{grid-template-columns:34px 1fr 25px}
  .object .mat{display:none}
  .bespoke{display:block}
  .bespoke-image{min-height:48svh}
  .bespoke-copy{min-height:auto;padding:52px var(--pad)}
  .studio-right{display:block;margin-top:34px}
  .studio-right p{margin-bottom:28px}
  .stat{margin-bottom:22px}
  .contact h2{margin:22px 0 44px}
  .contact-right{grid-template-columns:1fr 1fr}
  footer{flex-wrap:wrap;gap:24px}
  /* Interiores */
  .head,.work-head,.piece{padding-top:96px}
  .work-head,.specs,.story,.pair{display:block}
  .work-head h1{margin-bottom:0}
  .story .frame,.pair .frame{margin-bottom:16px}
  .story .text{padding-bottom:0}
  .specs dl{margin-top:18px}
  .plate{margin:30px 0}
}

/* ══════════════════════════════════════════════════════════════════
   Intermedio de mobiliario. Se cuela entre el segundo proyecto y el
   tercero: una tira de piezas que se recorre en horizontal y el vídeo
   del mostrador, con el mismo mecanismo fijo que los proyectos.
   ══════════════════════════════════════════════════════════════════ */
.furniture{background:var(--hover)}
.furniture-head{padding:105px var(--pad) 0;display:flex;flex-wrap:wrap;
  justify-content:space-between;align-items:baseline;gap:18px 30px}
.furniture-head h2{font-size:clamp(40px,5.2vw,78px);font-weight:300;
  line-height:.94;letter-spacing:-.05em;margin:16px 0 0;max-width:14ch}

/* Tira horizontal atada al scroll vertical: la sección se queda fija y
   las piezas desfilan de derecha a izquierda. */
.rail-scroll{position:relative;height:620vh;height:620svh}
.rail-sticky{position:sticky;top:0;height:100vh;height:100svh;display:flex;flex-direction:column;
  justify-content:center;gap:0;overflow:hidden}

/* Todas las piezas comparten altura; el ancho lo pone su proporción, así
   que la tira lleva un ritmo en vez de ir a cuadrícula. */
.rail{--tira-h:clamp(260px,52svh,470px);
  display:flex;align-items:center;gap:26px;padding-inline:var(--pad);
  will-change:transform}
.rail-item{flex:0 0 auto}
/* El ancho sale de una multiplicación, no de aspect-ratio: Safari no
   siempre resuelve un aspect-ratio que viene de una variable y el marco se
   quedaba con altura pero sin anchura, en una tira. */
.rail-item .frame{position:relative;height:var(--tira-h);
  width:calc(var(--tira-h) * var(--r,.75));
  overflow:hidden;background:#ded9d0}
.rail-item .frame img{width:100%;height:100%;object-fit:cover;transition:transform .9s}
.rail-item:hover .frame img{transform:scale(1.03)}
.rail-item .cap{display:flex;justify-content:space-between;gap:12px;padding-top:13px;
  font-size:11px;letter-spacing:.02em}
.rail-item .cap span:last-child{font-size:9px;letter-spacing:.15em;color:var(--muted)}

/* El vídeo cierra la tira: congelado en su primer fotograma mientras
   desfila, y abierto a pantalla cuando el recorrido llega a él. */
.rail-film .frame{background:#000}
.rail-film video{position:absolute;inset:0;z-index:1;width:100%;height:100%;
  object-fit:cover;opacity:0;transition:opacity .45s}
.rail-film.abierto video.listo{opacity:1}
.rail-film .quieto{position:absolute;inset:0;transition:opacity .45s}
.rail-film.abierto .quieto{opacity:0}
.rail-film:hover .frame img{transform:none}
.rail-film .p-progress{position:absolute;left:0;right:0;bottom:0;height:2px;z-index:2;
  background:rgba(255,255,255,.2);opacity:0;transition:opacity .45s}
.rail-film.abierto .p-progress{opacity:1}
.rail-film .p-progress i{display:block;height:100%;width:0;background:#fff}


/* El texto que acompaña a la pieza, en la columna que le deja el vídeo.
   Discreto: cuerpo pequeño, mucho aire entre líneas y una sola frase en
   tinta al final. Los bloques se ponen de uno en uno con el recorrido. */
.rail-relato{position:absolute;right:var(--pad);top:50%;width:244px;
  transform:translate(0,calc(-50% + var(--ajuste,0px)))}
.rail-relato p{margin:0;opacity:0;transform:translateY(13px);
  transition:opacity .6s ease,transform .85s cubic-bezier(.19,1,.22,1)}
.rail-relato p.puesta{opacity:1;transform:none}
.rail-relato p + p{margin-top:17px}
.rr-lead{font-size:14px;line-height:1.55;letter-spacing:-.005em;color:var(--ink)}
.rail-relato p:not(.rr-lead):not(.rr-cierre){font-size:11.5px;line-height:1.8;
  color:#5c5952}
.rr-cierre{margin-top:22px!important;padding-top:18px;
  border-top:1px solid var(--line);
  font-size:11.5px;line-height:1.7;color:var(--ink)}
/* Fuera del flujo, para que la tira quede centrada de verdad y la llamada
   de la derecha caiga a su misma altura. */


/* ── Flechas ──────────────────────────────────────────────
   Trazadas, no escritas: el carácter de flecha sale como emoji de color en
   bastantes equipos. Heredan el color y el tamaño de su línea. */
.flecha{display:inline-block;vertical-align:-.1em;width:1em;height:1em;
  flex:0 0 auto;transition:transform .4s cubic-bezier(.19,1,.22,1)}
.text-link .flecha,.link .flecha{margin-left:.45em;width:.95em;height:.95em}
.text-link:hover .flecha-der,.link:hover .flecha-der{transform:translateX(4px)}
.text-link:hover .flecha-abajo{transform:translateY(3px)}
.text-link:hover .flecha-diag,.link:hover .flecha-diag{transform:translate(2px,-2px)}
.p-arrow .flecha{width:18px;height:18px}
.vitrina-pie .flecha{width:1.1em;height:1.1em}
.vitrina-centro:hover .vitrina-pie .flecha{transform:translateX(7px)}

/* ── Catálogo ────────────────────────────────────────────
   Las 65 piezas en lista, no en fichas: se compara de un vistazo. Filas
   ceñidas y separadas por un pelo de línea. */
.grupo-catalogo{display:block}
.group-head{display:flex;justify-content:space-between;align-items:baseline;
  gap:16px;padding:44px 0 10px;border-bottom:1px solid var(--line)}
.group-head h2{font-size:15px;font-weight:400;letter-spacing:.02em;margin:0}
.group-head span{font-size:9px;letter-spacing:.15em;color:var(--muted)}
.object-list{display:block}
.object-row{display:grid;grid-template-columns:46px 1fr 170px 20px;gap:18px;
  align-items:center;padding:11px 0;border-bottom:1px solid var(--line);
  transition:background .25s,padding-left .25s}
.object-row:hover{background:var(--hover);padding-left:12px}
.object-number{font-size:9px;letter-spacing:.15em;color:var(--muted)}
.object-name{font-size:14px;letter-spacing:0;color:var(--ink)}
.object-material{font-size:9px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--muted);text-align:right}
.object-arrow{display:flex;justify-content:flex-end;color:var(--muted);
  opacity:0;transition:opacity .25s}
.object-row:hover .object-arrow{opacity:1}
@media(max-width:760px){
  .group-head{padding:30px 0 8px}
  .object-row{grid-template-columns:38px 1fr 18px;gap:12px;padding:10px 0}
  .object-material{display:none}
  .object-arrow{opacity:1}
}

/* ── Vitrina ────────────────────────────────────────────
   Tras la pieza grande asoma el catálogo entero, desenfocado y bajo un
   velo: se intuye cuánto hay sin enfrentar al visitante con 65 fichas. El
   desenfoque lo gobierna el scroll — entra muy borroso y se acerca sin
   llegar a definirse — y baja más al pasar el ratón, como si asomara. */
.vitrina{position:relative;height:220vh;height:220svh;background:var(--hover)}
.vitrina-fija{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;
  display:flex;align-items:center;justify-content:center}
.vitrina-malla{position:absolute;inset:-7%;display:grid;
  grid-template-columns:repeat(8,1fr);grid-auto-rows:1fr;gap:8px;
  filter:blur(var(--desenfoque,16px));will-change:filter;transition:filter .6s ease}
.vitrina-fija:hover .vitrina-malla{filter:blur(calc(var(--desenfoque,16px) * .5))}
/* Las portadas no llegan de golpe: se van poniendo de izquierda a derecha
   según se baja, hasta llenar la pantalla. Cada una espera su turno. */
.vitrina-malla img{width:100%;height:100%;object-fit:cover;display:block;
  opacity:0;transform:scale(1.07);
  transition:opacity .5s ease,transform .85s cubic-bezier(.19,1,.22,1)}
.vitrina-malla img.puesta{opacity:1;transform:none}
/* El velo es del color del sitio: deja el conjunto en un murmullo y sostiene
   el texto sin cajas ni sombras. */
.vitrina-fija::after{content:"";position:absolute;inset:0;background:var(--bg);
  opacity:.5;pointer-events:none}
.vitrina-centro{position:relative;z-index:2;display:flex;flex-direction:column;
  align-items:center;text-align:center;gap:18px;padding:0 var(--pad)}
.vitrina-eyebrow{font-size:9px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted)}
.vitrina-titulo{font-size:clamp(48px,7.4vw,124px);line-height:.84;font-weight:300;
  letter-spacing:-.055em}
.vitrina-pie{position:relative;display:inline-flex;align-items:center;gap:16px;
  margin-top:8px;padding-bottom:10px;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;border-bottom:1px solid var(--line)}
.vitrina-pie::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;
  width:0;background:var(--ink);transition:width .55s cubic-bezier(.19,1,.22,1)}
.vitrina-centro:hover .vitrina-pie::after{width:100%}
.vitrina-pie i{font-style:normal;transition:transform .4s cubic-bezier(.19,1,.22,1)}
.vitrina-centro:hover .vitrina-pie i{transform:translateX(7px)}
@media (prefers-reduced-motion:reduce){
  .vitrina{height:auto}
  .vitrina-fija{position:static;height:auto;padding:110px 0}
  .vitrina-malla img{opacity:1;transform:none}
}
.rail-note{position:absolute;left:0;bottom:34px;margin:0;padding:0 var(--pad);
  font-size:9px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}


/* Vídeo del mostrador: mismo mecanismo que los proyectos */

@media (prefers-reduced-motion: reduce){
  .rail-scroll{height:auto}
  .rail-sticky{position:static;height:auto;overflow:visible;padding-block:55px}
  .rail{overflow-x:auto;transform:none!important;--tira-h:clamp(220px,42svh,340px)}
  .rail-relato{position:static;transform:none;width:auto;margin:30px var(--pad) 0;
    max-width:52ch}
  .rail-relato p{opacity:1;transform:none}
}

/* Por debajo de 1024 el vídeo no se abre a pantalla: entonces manda el ancho
   útil, no la altura de la tira, o se sale por el lado. */
@media(max-width:1023px){
  .rail-film .frame{width:calc(100vw - var(--pad) * 2);
    height:calc((100vw - var(--pad) * 2) * 9 / 16)}
  /* Mismo corte que usa el guión para decidir si el vídeo se abre: si
     no coinciden, entre 761 y 1023 el texto se queda en columna — y
     encima de la tira, porque nadie le da posición. Aquí baja al flujo,
     debajo de las piezas. */
  .rail-relato{position:static;transform:none;width:auto;max-width:none;
    margin:20px 0 0;padding:0 var(--pad)}
  .rail-relato p{font-size:11px;line-height:1.6}
  .rr-lead{font-size:13px;line-height:1.45}
  .rr-cierre{margin-top:16px!important;padding-top:14px}
  .rail-relato p + p{margin-top:12px}
  .rail-note{position:static;margin:12px 0 0}
  .rail-sticky{justify-content:center;padding-block:0}
  /* Zonas de toque: un enlace de 19px de alto no se acierta con el pulgar,
     y en tableta se toca igual que en móvil. */
  .text-link,.link{min-height:44px;display:inline-flex;align-items:center}
  /* Enlaces sueltos dentro de frases — correo, teléfono, privacidad —: el
     relleno vertical agranda la zona de toque sin mover la maquetación.
     Viven fuera del pie, cada uno en su bloque. */
  footer a,.contact-right a,.consent a{padding-block:11px;margin-block:-11px}
  footer{gap:24px}
  .contact-right div{margin-bottom:8px}
}

@media(max-width:760px){
  .furniture-head{padding:48px var(--pad) 0}
  /* La tira también va atada al scroll aquí: el recorrido es obligado,
     no algo que haya que descubrir arrastrando. El vídeo no se abre en
     pantallas pequeñas — no cabe —, avanza al cruzar como el resto. */
  .rail-scroll{height:760vh;height:760svh}
  /* La tira, centrada y sola. El texto de Kairos y el recuento se sacan
     del flujo: sólo aparecen cuando llega el vídeo, y mientras tanto
     estaban reservando media pantalla de hueco invisible. */
  .rail-sticky{justify-content:center;padding-block:0}
  /* Las piezas llenan la pantalla de alto: a 287px en una pantalla de 844
     la pieza ocupaba un tercio y el resto era vacío. Y para que piezas más
     grandes no aceleren el desfile —más anchas, más recorrido— aquí se
     enseñan cinco en vez de nueve. */
  .rail{--tira-h:clamp(200px,min(56svh,100svh - 330px),520px);gap:12px}
  .rail-item:not(.rail-film):nth-of-type(n+6){display:none}
  .rail-item .cap{padding-top:9px;font-size:10px}
  /* El vídeo no puede ser tan alto como las fotos: a esta anchura se saldría
     de la pantalla. Se le da el ancho útil y su proporción hace el resto. */
  .rail-film .frame{width:calc(100vw - var(--pad) * 2);
    height:calc((100vw - var(--pad) * 2) * 9 / 16)}

  .vitrina{height:260vh;height:260svh}
  .vitrina-malla{grid-template-columns:repeat(4,1fr);gap:6px}
  .vitrina-centro{gap:12px}
}