/* ==========================================================================
   Giorgio Pagliari · propuesta de nueva web
   Paleta mineral sacada de las obras: penumbra, ceniza, cal, sal, sedimento
   y el amarillo de las juntas de «Costuras de cal».
   ========================================================================== */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url(../fonts/archivo-latin-wdth-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url(../fonts/archivo-latin-ext-wdth-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  font-style: italic;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url(../fonts/archivo-latin-wdth-italic.woff2) format('woff2-variations');
}

:root {
  --penumbra: #1d1e1c;
  --graphite: #2b2c29;
  --ash: #8b8c87;
  --ash-2: #a9a9a2;
  --lime: #e3e2db;
  --salt: #f3f3ef;
  --sediment: #ac9375;
  --sulphur: #c9b22e;

  --bg: var(--penumbra);
  --fg: var(--salt);
  --fg-2: #b9b9b1;
  --line: rgba(243, 243, 239, 0.16);

  --gutter: clamp(16px, 4vw, 64px);
  --rail: 168px;
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

body[data-theme="dawn"] { --bg: #6f6f69; --fg: var(--salt); --fg-2: #e7e6df; --line: rgba(243, 243, 239, 0.22); }
body[data-theme="gallery"] { --bg: #221e1a; --fg: #f4eee4; --fg-2: #cfc5b6; --line: rgba(244, 238, 228, 0.18); }
body[data-theme="day"] { --bg: var(--lime); --fg: #22231f; --fg-2: #55564f; --line: rgba(34, 35, 31, 0.16); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: 'Archivo', system-ui, sans-serif;
  font-stretch: 100%;
  font-weight: 360;
  font-size: 17px;
  line-height: 1.6;
  transition: background-color 1.1s var(--ease), color 1.1s var(--ease);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, p, ol, ul, figure, blockquote { margin: 0; }
ol, ul { padding: 0; list-style: none; }

:focus-visible { outline: 2px solid var(--sulphur); outline-offset: 3px; border-radius: 2px; }

.skip {
  position: fixed; left: 16px; top: -60px; z-index: 100;
  background: var(--salt); color: var(--penumbra); padding: 8px 12px; text-decoration: none;
}
.skip:focus { top: 16px; }

/* ---------- tipografía ---------- */
.h-xl {
  font-stretch: 125%;
  font-weight: 260;
  font-size: clamp(2.2rem, 4.6vw, 4.8rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-wrap: balance;
  max-width: 15em;
}
.lede {
  font-size: clamp(1.05rem, 1.35vw, 1.3rem);
  line-height: 1.55;
  font-weight: 340;
  color: var(--fg-2);
  max-width: 34em;
  text-wrap: pretty;
  margin-top: 1.25rem;
}
.note {
  font-stretch: 88%;
  font-size: 0.85rem;
  color: var(--fg-2);
  max-width: 34em;
  margin-top: 1rem;
}
em { font-style: italic; }

/* ---------- prólogo ---------- */
.prologue {
  position: fixed; inset: 0; z-index: 90; pointer-events: none;
}
.prologue__half {
  position: absolute; left: 0; right: 0; height: 50.2%;
  background: var(--penumbra);
}
.prologue__half--top { top: 0; }
.prologue__half--bottom { bottom: 0; }
.prologue__line {
  position: absolute; left: 0; right: 0; top: 50%; height: 1px;
}
.prologue__line span {
  position: absolute; inset: 0; background: var(--salt);
  transform-origin: 50% 50%; transform: scaleX(0);
}
.prologue__dates {
  position: absolute; left: var(--gutter); right: var(--gutter); top: calc(50% + 18px);
  display: flex; justify-content: space-between;
  font-stretch: 85%; font-size: 0.8rem; color: var(--ash-2); letter-spacing: 0.02em;
}
.prologue.is-done { display: none; }
html.no-js .prologue { display: none; }

/* ---------- lienzo de relieve y grano ---------- */
.relief {
  position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: 0; opacity: 0; pointer-events: none;
  background: var(--penumbra);
}
.relief.is-on { opacity: 1; }
.relief.is-off { display: none; }
.grain {
  position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1.2s steps(6) infinite;
}
@keyframes grain {
  0% { background-position: 0 0; } 20% { background-position: -37px 23px; } 40% { background-position: 29px -51px; }
  60% { background-position: -61px -13px; } 80% { background-position: 43px 41px; } 100% { background-position: 0 0; }
}
@media (pointer: coarse), (max-width: 820px) { .grain { display: none; } }

/* ---------- barra superior ---------- */
.bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px var(--gutter);
  color: var(--fg);
  transition: color 1.1s var(--ease);
  pointer-events: none;
}
.bar > * { pointer-events: auto; }
.bar__brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.bar__brand .mark { width: 28px; height: 28px; flex: none; }
.bar__brand span { font-stretch: 112%; font-weight: 380; font-size: 0.95rem; letter-spacing: 0.01em; }
.bar__tools { display: flex; align-items: center; gap: 8px; }
.tool, .lang summary {
  border: 1px solid var(--line); background: transparent; border-radius: 999px;
  padding: 7px 14px; font-size: 0.8rem; font-stretch: 90%; cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; gap: 8px;
  transition: background-color .5s var(--ease), border-color .5s var(--ease), color .5s var(--ease);
}
.tool:hover, .lang summary:hover, .lang[open] summary { border-color: var(--fg); }
.tool--cta { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.tool--cta:hover { background: transparent; color: var(--fg); }
.lang { position: relative; }
.lang summary { list-style: none; padding: 7px 12px; gap: 6px; }
.lang summary::-webkit-details-marker { display: none; }
.lang summary svg { width: 9px; height: 6px; transition: transform .4s var(--ease); }
.lang[open] summary svg { transform: rotate(180deg); }
.lang ul { position: absolute; right: 0; top: calc(100% + 8px); min-width: 150px; padding: 6px; background: var(--bg); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 18px 40px rgba(0,0,0,.18); display: grid; }
.lang a { display: block; padding: 8px 12px; border-radius: 9px; text-decoration: none; font-size: .88rem; }
.lang a:hover { background: color-mix(in srgb, var(--fg) 8%, transparent); }
.lang a[aria-current] { font-weight: 560; }
.tool--plain { border-color: transparent; }
.tool__wave { display: inline-flex; align-items: center; gap: 2px; height: 12px; }
.tool__wave i { width: 2px; height: 3px; background: currentColor; border-radius: 1px; transition: height .3s; }
.tool--sound[aria-pressed="true"] .tool__wave i { animation: wave 1.4s var(--ease) infinite; }
.tool--sound[aria-pressed="true"] .tool__wave i:nth-child(2) { animation-delay: .2s; }
.tool--sound[aria-pressed="true"] .tool__wave i:nth-child(3) { animation-delay: .4s; }
.tool--sound[aria-pressed="true"] .tool__wave i:nth-child(4) { animation-delay: .6s; }
@keyframes wave { 0%, 100% { height: 3px; } 50% { height: 12px; } }

/* ---------- raíl de capítulos ---------- */
.rail {
  position: fixed; left: var(--gutter); top: 50%; transform: translateY(-50%);
  z-index: 40; display: flex; gap: 16px; align-items: stretch;
  font-stretch: 88%; font-size: 0.78rem;
  opacity: 0; transition: opacity .8s var(--ease);
}
.rail.is-on { opacity: 1; }
.rail__seam { width: 2px; background: var(--line); position: relative; border-radius: 2px; }
.rail__seam span { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: var(--sulphur); transform-origin: top; transform: scaleY(0); border-radius: 2px; }
.rail ol { display: flex; flex-direction: column; gap: 6px; }
.rail a { text-decoration: none; color: var(--fg-2); opacity: 0; transform: translateX(-6px); transition: opacity .5s var(--ease), transform .5s var(--ease), color .4s; display: block; padding: 2px 0; }
.rail:hover a, .rail:focus-within a { opacity: .6; transform: none; }
.rail a:hover { opacity: 1; }
.rail a.is-current, .rail:hover a.is-current { opacity: 1; transform: none; color: var(--fg); }

/* ---------- escenas ---------- */
.scene { position: relative; z-index: 2; }

/* 1 · LUZ */
.hero { height: 360vh; }
.hero__pin {
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
  padding: 0 var(--gutter);
}
.hero__pin::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to top, rgba(29, 30, 28, .78) 0%, rgba(29, 30, 28, 0) 52%),
    radial-gradient(ellipse 50% 45% at 88% 22%, rgba(29, 30, 28, .62), rgba(29, 30, 28, 0));
}
.hero__title {
  position: absolute; left: var(--gutter); right: var(--gutter); bottom: 15vh;
  font-weight: 200; line-height: 0.8; margin: 0;
}
.hero__first {
  display: block; font-stretch: 112%; font-weight: 300; font-size: clamp(1rem, 1.6vw, 1.5rem);
  letter-spacing: 0.04em; margin-bottom: 1.2vw; color: var(--salt);
}
.hero__name {
  display: block; position: relative;
  font-stretch: 125%; font-weight: 200; font-size: min(21.5vw, 40vh);
  letter-spacing: -0.045em; line-height: 0.82; color: var(--salt);
  perspective: 900px; white-space: nowrap;
}
.hero__name .band {
  position: absolute; left: 0; top: 0; display: block; width: 100%;
  backface-visibility: hidden; will-change: transform;
}
.hero__name .band:first-child { position: relative; }
.hero__lead {
  position: absolute; right: var(--gutter); top: 22vh; max-width: 19em;
  font-stretch: 100%; font-weight: 320; font-size: clamp(1.1rem, 1.7vw, 1.6rem); line-height: 1.35;
  color: var(--salt); text-wrap: balance;
}
.hero__meta { position: absolute; right: var(--gutter); top: calc(22vh + 7.5em); font-stretch: 88%; font-size: .85rem; color: var(--ash-2); }
.hero__hint {
  position: absolute; left: 50%; bottom: 4.5vh; transform: translateX(-50%);
  display: flex; align-items: center; gap: 14px; white-space: nowrap;
  font-stretch: 88%; font-size: .8rem; color: var(--ash-2);
}
.hero__hint-line { width: 56px; height: 1px; background: currentColor; transform-origin: left; animation: hint 2.6s var(--ease) infinite; }
@keyframes hint { 0% { transform: scaleX(0); } 50% { transform: scaleX(1); transform-origin: left; } 51% { transform-origin: right; } 100% { transform: scaleX(0); transform-origin: right; } }
.hero__quote {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(88vw, 1100px); text-align: center; pointer-events: none;
}
.hero__quote p {
  font-stretch: 118%; font-weight: 260; font-size: clamp(1.6rem, 3.4vw, 3.4rem); line-height: 1.15;
  letter-spacing: -0.015em; text-wrap: balance; color: var(--salt);
}
.hero__quote .w { opacity: .14; transition: opacity .6s var(--ease); }
.hero__after {
  position: absolute; left: 50%; bottom: 12vh; transform: translateX(-50%);
  width: min(88vw, 34em); text-align: center; color: var(--fg-2); font-size: clamp(1rem, 1.2vw, 1.15rem);
  opacity: 0; text-wrap: balance;
}
.hero__credit {
  position: absolute; right: var(--gutter); bottom: 4.5vh; font-stretch: 88%; font-size: .78rem; color: var(--ash-2);
}

/* 2 · VIDA */
.life { height: 520vh; }
.life__pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.life__track, .life__horizon { -webkit-mask-image: linear-gradient(90deg, transparent calc(var(--gutter) + var(--rail) * .6), #000 calc(var(--gutter) + var(--rail) + 24px)); mask-image: linear-gradient(90deg, transparent calc(var(--gutter) + var(--rail) * .6), #000 calc(var(--gutter) + var(--rail) + 24px)); }
.life__head { position: absolute; left: calc(var(--gutter) + var(--rail)); top: 14vh; right: var(--gutter); }
.life__track {
  position: absolute; left: 0; top: 47vh; display: flex; gap: clamp(32px, 5vw, 96px);
  padding-left: calc(var(--gutter) + var(--rail)); padding-right: 30vw;
  will-change: transform;
}
.stop { flex: 0 0 clamp(260px, 26vw, 400px); position: relative; padding-top: 0; }
.stop__year {
  font-stretch: 125%; font-weight: 180; font-size: clamp(4rem, 8.5vw, 8.6rem); line-height: .9; letter-spacing: -0.04em;
  color: var(--salt); font-variant-numeric: lining-nums;
}
.stop__place { font-stretch: 100%; font-weight: 520; font-size: 1rem; margin: 18px 0 6px; color: var(--salt); }
.stop p:not(.stop__year) { color: var(--fg-2); font-size: .98rem; max-width: 26em; }
.stop__works { display: flex; gap: 10px; align-items: flex-end; margin-top: 18px; }
.stop__works img { height: 120px; width: auto; box-shadow: 0 14px 30px rgba(0,0,0,.45); }
.stop--portrait { flex-basis: clamp(420px, 46vw, 720px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 32px; align-items: start; }
.stop--portrait > :not(.print) { grid-column: 1; }
.stop--portrait .print { grid-column: 2; grid-row: 1 / span 3; margin-top: 8px; }
.print { margin-top: 18px; width: min(100%, 340px); background: #f1f0ea; padding: 10px 10px 12px; transform: rotate(-1.6deg); box-shadow: 0 18px 40px rgba(0,0,0,.5); }
.print img { width: 100%; filter: grayscale(1) contrast(1.05); }
.print figcaption { color: #3a3b36; font-size: .75rem; font-stretch: 88%; margin-top: 8px; }
.stop--now .stop__year { color: var(--sulphur); }
.life__horizon { position: absolute; left: 0; right: 0; top: 45vh; height: 1px; background: var(--line); }
.life__horizon span { position: absolute; inset: 0; background: var(--salt); transform-origin: left; transform: scaleX(0); }

/* 3 · MÉTODO */
.method { height: 620vh; }
.method__pin {
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: center; gap: 4vw;
  padding: 12vh var(--gutter) 6vh calc(var(--gutter) + var(--rail));
}
.method__copy .h-xl { font-size: clamp(2rem, 3.6vw, 3.8rem); }
.steps { margin-top: 3vh; display: grid; gap: 4px; }
.step { display: grid; grid-template-columns: 2.2em 1fr; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); opacity: .32; transition: opacity .6s var(--ease); }
.step.is-on { opacity: 1; }
.step__n { font-stretch: 125%; font-weight: 300; font-size: 1.1rem; color: var(--sulphur); line-height: 1.5; }
.step h3 { font-weight: 520; font-size: 1.02rem; }
.step p { color: var(--fg-2); font-size: .94rem; max-height: 0; overflow: hidden; transition: max-height .8s var(--ease); }
.step.is-on p { max-height: 7em; }
.method__stage { position: relative; height: 100%; display: grid; place-items: center; perspective: 1600px; }
.model {
  position: relative; height: min(70vh, 62vw * 1.368); aspect-ratio: 106 / 145;
  transform-style: preserve-3d; will-change: transform;
}
.model__base { position: absolute; inset: 0; background: #d9d6cb; opacity: 0; box-shadow: 0 40px 80px rgba(0,0,0,.45); transform: translateZ(-2px); }
.model__strips { position: absolute; inset: 0; transform-style: preserve-3d; }
.strip {
  position: absolute; left: 0; width: 100%;
  transform-style: preserve-3d; transform-origin: 50% 0;
  will-change: transform;
}
.strip__face {
  position: absolute; inset: 0; background-repeat: no-repeat;
  backface-visibility: hidden;
}
.strip__card { background: #b7a283; background-image: repeating-linear-gradient(90deg, rgba(0,0,0,.06) 0 2px, transparent 2px 7px); }
.strip__paint { opacity: 0; }
.strip__shade { background: linear-gradient(to bottom, rgba(0,0,0,.55), rgba(0,0,0,0)); opacity: 0; }
.model__cuts { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; transform: translateZ(4px); }
.model__cuts line { stroke: var(--salt); stroke-width: .25; stroke-dasharray: 1.4 1; vector-effect: non-scaling-stroke; }
.model__final { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: translateZ(6px); }
.model__dust { position: absolute; inset: -10% -10%; width: 120%; height: 120%; pointer-events: none; transform: translateZ(10px); }
.method__result { position: absolute; bottom: 2vh; left: 0; right: 0; text-align: center; font-size: .85rem; color: var(--fg-2); opacity: 0; }

/* 4 · ARCHIVO */
.archive { height: 900vh; }
.archive__pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.archive__intro { position: absolute; z-index: 3; left: calc(var(--gutter) + var(--rail)); top: 14vh; pointer-events: none; }
.corridor { position: absolute; inset: 0; overflow: hidden; }
.corridor__world { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; }
.cw {
  position: absolute; left: 0; top: 0; transform-style: preserve-3d; cursor: pointer;
  backface-visibility: hidden;
}
.cw img { width: 100%; height: 100%; object-fit: fill; max-width: none; filter: drop-shadow(0 12px 14px rgba(36, 24, 12, .42)); }
.corridor__bg, .corridor__fg { position: absolute; inset: 0; width: 100%; height: 100%; }
.corridor__fg { pointer-events: none; }
.corridor.glow .cw::before {
  /* charco de luz del foco sobre el muro */
  content: ''; position: absolute; left: -48%; right: -48%; top: -62%; bottom: -34%;
  background: radial-gradient(ellipse 50% 50% at 50% 36%, rgba(255, 243, 222, .66), rgba(255, 236, 206, .26) 46%, rgba(255, 236, 206, 0) 74%);
  transform: translateZ(-1px); pointer-events: none;
}
.cw-refl { position: absolute; left: 0; top: 0; pointer-events: none; opacity: .34; }
.cw-refl img {
  width: 100%; height: 100%; object-fit: fill; max-width: none;
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,.95), rgba(0,0,0,0) 62%); mask-image: linear-gradient(to top, rgba(0,0,0,.95), rgba(0,0,0,0) 62%);
}
.cw-label {
  position: absolute; left: 0; top: 0; width: 240px; height: 120px; padding: 16px 18px; overflow: hidden;
  background: #f8f4ec; color: #2a2621; box-shadow: 0 6px 14px rgba(30, 20, 10, .22);
  font-size: 15px; line-height: 1.25; pointer-events: none; backface-visibility: hidden;
}
.cw-label b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-weight: 600; font-size: 19px; margin-bottom: 6px; font-stretch: 105%; }
.cw-label span { color: #6b6358; font-variant-numeric: tabular-nums; }
.figure { position: absolute; left: 0; top: 0; transform-style: preserve-3d; }
.figure svg { width: 100%; height: 100%; display: block; }
.figure span { position: absolute; left: 50%; bottom: 104%; transform: translateX(-50%); font-size: 13px; color: #6f685d; white-space: nowrap; font-stretch: 88%; }
.hud {
  position: absolute; z-index: 3; left: calc(var(--gutter) + var(--rail)); bottom: 6vh;
  max-width: 30em; transition: opacity .5s var(--ease);
}
.hud__title { font-stretch: 118%; font-weight: 300; font-size: clamp(1.4rem, 2.4vw, 2.2rem); line-height: 1.1; }
.hud__meta { color: var(--fg-2); font-size: .9rem; margin: 6px 0 12px; font-variant-numeric: tabular-nums; }
.hud__title, .hud__meta { text-shadow: 0 1px 14px rgba(20, 14, 8, .55); }
.hud__actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.pill--light { background: #f4eee4; color: #221e1a; border-color: #f4eee4; }
.pill--light:hover { background: transparent; color: #f4eee4; }
.pill:disabled { opacity: .4; pointer-events: none; }
.hud, .archive__tools, .archive__depth { transition: opacity .5s var(--ease); }
.archive__pin.is-look .hud, .archive__pin.is-look .archive__tools, .archive__pin.is-look .archive__depth, .archive__pin.is-look .archive__intro { opacity: 0; pointer-events: none; }
.corridor { transition: transform .9s var(--ease); }
.archive__pin::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 150px; z-index: 2; pointer-events: none; background: linear-gradient(rgba(26, 22, 19, .62), rgba(26, 22, 19, 0)); }
/* vista de frente: mini-ficha junto a la obra */
.look {
  position: absolute; z-index: 4; right: var(--gutter); top: 50%; width: min(380px, 32vw);
  transform: translate3d(24px, -50%, 0); opacity: 0; transition: opacity .6s var(--ease), transform .6s var(--ease);
  background: rgba(26, 22, 19, .86); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  color: #f4eee4; border: 1px solid rgba(244, 238, 228, .1); border-radius: 4px; padding: 28px 28px 22px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, .35);
}
.look.is-on { opacity: 1; transform: translate3d(0, -50%, 0); }
.look[hidden] { display: none; }
.look__no { font-size: .72rem; letter-spacing: .14em; color: #c9b98a; font-variant-numeric: tabular-nums; }
.look__title { font-stretch: 118%; font-weight: 300; font-size: clamp(1.5rem, 2.2vw, 2.1rem); line-height: 1.08; margin: 12px 0 6px; }
.look__meta { color: #cfc5b6; font-size: .88rem; font-variant-numeric: tabular-nums; }
.look__facts { margin: 18px 0 0; border-top: 1px solid rgba(244, 238, 228, .14); }
.look__facts div { display: grid; grid-template-columns: 7em 1fr; gap: 10px; padding: 8px 0; border-bottom: 1px solid rgba(244, 238, 228, .1); font-size: .82rem; }
.look__facts dt { color: #a99f90; text-transform: uppercase; letter-spacing: .08em; font-size: .7rem; padding-top: 2px; }
.look__facts dd { margin: 0; }
.look__summary { margin-top: 16px; font-size: .95rem; line-height: 1.55; color: #e9e1d4; }
.look__nav { display: flex; gap: 8px; margin-top: 22px; }
.look__btn { flex: 0 0 auto; min-width: 44px; height: 42px; padding: 0 14px; border: 1px solid rgba(244, 238, 228, .28); background: transparent; color: #f4eee4; border-radius: 999px; cursor: pointer; font-size: .82rem; transition: background-color .3s, color .3s; }
.look__btn--wide { flex: 1; }
.look__btn:hover { background: #f4eee4; color: #221e1a; }
.look__more { display: flex; gap: 20px; margin-top: 16px; }
.look__more .link-btn { color: #f4eee4; }
.look__keys { margin-top: 14px; font-size: .72rem; color: #8f8576; }
.link-btn { background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--sulphur); font-size: .9rem; }
.archive__tools { position: absolute; z-index: 3; right: var(--gutter); bottom: 6vh; display: flex; gap: 8px; }
.pill { border: 1px solid var(--fg); background: var(--fg); color: var(--bg); border-radius: 999px; padding: 9px 16px; font-size: .85rem; font-stretch: 92%; text-decoration: none; cursor: pointer; transition: background-color .4s, color .4s; }
.pill:hover { background: transparent; color: var(--fg); }
.pill--ghost { background: transparent; color: var(--fg); }
.pill--ghost:hover { background: var(--fg); color: var(--bg); }
.archive__depth { position: absolute; z-index: 3; left: 50%; bottom: 3vh; width: 140px; height: 1px; margin-left: -70px; background: var(--line); }
.archive__depth span { position: absolute; inset: 0; background: var(--sulphur); transform-origin: left; transform: scaleX(0); }

/* 5 · MATERIA */
.materia { padding: 22vh var(--gutter) 18vh calc(var(--gutter) + var(--rail)); min-height: 100vh; }
.materia__head .h-xl { max-width: 17em; }

/* 6 · ESPACIOS */
.spaces { padding-top: 18vh; }
.spaces__head { padding: 0 var(--gutter) 10vh calc(var(--gutter) + var(--rail)); }
.spaces__scroller { position: relative; height: 760vh; }
.spaces__pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: #cfcdc4; }
.spaces__stage { position: absolute; inset: 0; }
.room { position: absolute; inset: 0; overflow: hidden; opacity: 0; display: none; }
.room.is-live { display: block; }
.room.is-first { opacity: 1; display: block; }
.room__img {
  position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; max-width: none;
  user-select: none;
}
.spaces__caption {
  position: absolute; z-index: 2; left: var(--gutter); bottom: 6vh; width: min(30em, calc(100vw - 2 * var(--gutter)));
  background: rgba(243, 243, 239, .94); color: #22231f; padding: 22px 24px 20px;

}
.spaces__who { font-stretch: 88%; font-size: .8rem; color: #6a6b63; }
.spaces__name { font-stretch: 118%; font-weight: 300; font-size: clamp(1.5rem, 2.4vw, 2.2rem); line-height: 1.1; margin-top: 4px; }
.spaces__text { font-size: .95rem; color: #4a4b45; margin-top: 8px; }
.spaces__work { font-size: .82rem; margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(34,35,31,.14); color: #3a3b36; }
.spaces__dots { position: absolute; z-index: 2; right: var(--gutter); top: 50%; transform: translateY(-50%); display: grid; gap: 10px; }
.spaces__dots li { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.45); box-shadow: 0 0 0 1px rgba(0,0,0,.15); transition: background-color .4s, transform .4s; }
.spaces__dots li.is-on { background: #fff; transform: scale(1.4); }
.spaces__note { position: absolute; z-index: 2; right: var(--gutter); bottom: 3vh; font-stretch: 88%; font-size: .72rem; color: rgba(255,255,255,.85); text-shadow: 0 1px 6px rgba(0,0,0,.5); }

/* 7 · LENGUAJE */
.language { height: 420vh; }
.language__pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.language__head { position: absolute; left: calc(var(--gutter) + var(--rail)); top: 13vh; width: min(30em, 36vw); z-index: 2; }
.language__head .h-xl { font-size: clamp(2.2rem, 4.2vw, 4.4rem); }
.language__track {
  position: absolute; top: 14vh; bottom: 8vh; left: 0; display: flex; gap: clamp(20px, 2.4vw, 40px); align-items: stretch;
  padding-left: calc(var(--gutter) + var(--rail) + min(30em, 36vw) + 6vw); padding-right: 12vw; will-change: transform;
}
.concept { flex: 0 0 auto; width: clamp(260px, 26vw, 420px); display: flex; flex-direction: column; }
.concept__media { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; background: #d2d0c7; }
.concept__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); }
.concept__media .fold { position: absolute; inset: 0; display: flex; flex-direction: column; pointer-events: none; }
.concept__media .fold i { flex: 1; background: var(--lime); transform-origin: top; }
.concept h3 { margin-top: 14px; font-stretch: 112%; font-weight: 400; font-size: 1.15rem; }
.concept p { color: var(--fg-2); font-size: .9rem; margin-top: 4px; max-width: 28em; }
.concept__tag { display: inline-block; margin-top: 8px; font-size: .72rem; font-stretch: 88%; color: var(--fg-2); border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px; align-self: flex-start; }

/* 8 · COLABORAR */
.collab { padding: 22vh var(--gutter) 16vh calc(var(--gutter) + var(--rail)); position: relative; }
.audiences { margin-top: 8vh; border-top: 1px solid var(--line); }
.aud {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 4vw; align-items: baseline;
  padding: 22px 0; border-bottom: 1px solid var(--line); cursor: default; position: relative;
}
.aud h3 { font-stretch: 118%; font-weight: 280; font-size: clamp(1.4rem, 2.6vw, 2.5rem); line-height: 1.08; transition: transform .7s var(--ease); }
.aud p { color: var(--fg-2); max-width: 30em; }
.aud:hover h3 { transform: translateX(14px); }
.aud-preview {
  position: fixed; left: 0; top: 0; width: 300px; aspect-ratio: 4 / 3; z-index: 30; pointer-events: none;
  opacity: 0; transform: translate(-50%, -50%) scale(.9); transition: opacity .4s var(--ease), transform .6s var(--ease);
  overflow: hidden; box-shadow: 0 30px 60px rgba(0,0,0,.25);
}
.aud-preview img { width: 100%; height: 100%; object-fit: cover; }
.aud-preview.is-on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.contact { margin-top: 12vh; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 4vw; align-items: start; }
.contact__side { display: grid; gap: 14px; padding-top: 8px; }
.contact__who { font-stretch: 112%; font-size: 1.05rem; }
.contact__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 10px 22px;
  border: 1px solid var(--fg); border-radius: 999px; text-decoration: none; font-weight: 450; font-stretch: 100%;
  transition: background-color .5s var(--ease), color .5s var(--ease), transform .2s;
  background: transparent; color: var(--fg); cursor: pointer;
}
.btn:hover { background: var(--fg); color: var(--bg); }
.btn:active { transform: translateY(1px); }
.btn--solid { background: var(--fg); color: var(--bg); }
.btn--solid:hover { background: transparent; color: var(--fg); }
.contact__lines { display: grid; gap: 6px; color: var(--fg-2); font-size: .92rem; }
.contact__lines a { text-decoration: none; }
.contact__lines a:hover { text-decoration: underline; }

/* 9 · OCASO */
.dusk { min-height: 90vh; position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; padding: 20vh var(--gutter) 12vh calc(var(--gutter) + var(--rail)); }
.dusk__line { font-stretch: 125%; font-weight: 220; font-size: clamp(2.4rem, 6.4vw, 6.8rem); line-height: 1; letter-spacing: -0.03em; max-width: 12em; text-wrap: balance; }
.dusk__line .w { opacity: .15; transition: opacity .6s var(--ease); }
/* ---------- hojas (índice, ficha) ---------- */
.sheet {
  position: fixed; inset: 0; z-index: 80; background: #171816; color: var(--salt);
  display: flex; flex-direction: column; overflow: hidden;
}
.sheet[hidden] { display: none; }
.sheet__bar { display: flex; align-items: baseline; gap: 24px; padding: 22px var(--gutter); border-bottom: 1px solid rgba(243,243,239,.12); flex-wrap: wrap; }
.sheet__bar h2 { font-stretch: 118%; font-weight: 300; font-size: 1.5rem; }
.sheet__bar p { color: #b9b9b1; font-size: .9rem; flex: 1; }
.close {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(243,243,239,.3); background: transparent; color: var(--salt);
  font-size: 1.5rem; line-height: 1; cursor: pointer; display: grid; place-items: center; transition: background-color .3s, color .3s;
}
.close:hover { background: var(--salt); color: var(--penumbra); }
.elevation {
  flex: 1; overflow-x: auto; overflow-y: hidden; display: flex; align-items: flex-end; gap: var(--gap, 24px);
  padding: 4vh var(--gutter) 9vh; position: relative; overscroll-behavior: contain;
}
.elevation::after { content: ''; position: sticky; }
.ev { flex: 0 0 auto; position: relative; cursor: pointer; }
.ev img { width: 100%; height: 100%; object-fit: fill; box-shadow: 0 10px 24px rgba(0,0,0,.5); transition: transform .5s var(--ease); }
.ev:hover img { transform: translateY(-6px); }
.ev span { position: absolute; left: 0; top: 100%; margin-top: 8px; font-size: .7rem; color: #b9b9b1; white-space: nowrap; font-stretch: 88%; }
.ev--figure img { box-shadow: none; }
.ev--figure svg { display: block; width: 100%; height: 100%; }
.elevation__floor { position: absolute; left: 0; right: 0; height: 1px; background: rgba(243,243,239,.3); }

.noscript { padding: 20px; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  :root { --rail: 0px; }
  .rail { display: none; }
}
@media (max-width: 820px) {
  body { font-size: 16px; }
  .bar { padding: 12px 16px; }
  .bar__brand span { display: none; }
  .tool--sound span:not(.tool__wave) { display: none; }
  .tool { padding: 7px 11px; }
  .hero__lead { top: 14vh; left: var(--gutter); right: auto; font-size: 1.15rem; }
  .hero__meta { top: calc(14vh + 5.5em); left: var(--gutter); right: auto; }
  .hero__title { bottom: 17vh; }
  .hero__name { font-size: 23vw; }
  .hero__credit { left: var(--gutter); right: auto; bottom: 9vh; }
  .hero__hint { bottom: 3vh; }
  .life__head { top: 11vh; }
  .life__track { top: 46vh; }
  .life__horizon { top: 44vh; }
  .stop { flex-basis: 76vw; }
  .stop__year { font-size: 4.4rem; }
  .method__pin { grid-template-columns: 1fr; grid-template-rows: auto 1fr; padding: 9vh var(--gutter) 3vh; gap: 2vh; align-items: start; }
  .method__copy .h-xl { font-size: 1.8rem; }
  .method__copy .lede { display: none; }
  .steps { margin-top: 1.5vh; }
  .step { padding: 6px 0; }
  .step:not(.is-on) { display: none; }
  .model { height: min(46vh, 70vw * 1.368); }
  .archive__intro { top: 11vh; right: var(--gutter); }
  .hud { bottom: 12vh; right: var(--gutter); }
  .look { left: 12px; right: 12px; top: auto; bottom: 12px; width: auto; max-height: 48vh; overflow: auto; padding: 18px 18px 14px; transform: translate3d(0, 24px, 0); }
  .look.is-on { transform: none; }
  .look__title { margin-top: 6px; }
  .look__summary { font-size: .9rem; }
  .archive__pin.is-look .corridor { transform: translate3d(0, -17vh, 0); }
  .archive__tools { left: var(--gutter); right: auto; bottom: 4vh; }
  .archive__depth { display: none; }
  .aud { grid-template-columns: 1fr; gap: 6px; }
  .aud-preview { display: none; }
  .language__head { position: absolute; width: auto; right: var(--gutter); top: 10vh; }
  .language__head .lede { font-size: 1rem; }
  .language__head .note { display: none; }
  .language__track { top: 48vh; bottom: 5vh; padding-left: var(--gutter); }
  .concept { width: 68vw; }
  .spaces__caption { left: 12px; right: 12px; width: auto; bottom: 12px; padding: 16px 18px; }
  .spaces__dots { top: 76px; right: 16px; display: flex; transform: none; }
  .spaces__note { bottom: auto; top: 96px; right: 16px; }
}

/* ---------- movimiento reducido: todo estático y legible ---------- */
@media (pointer: coarse), (max-width: 820px) {
}
@media (max-width: 480px) {
  .tool--cta { display: none; }
  .hero__pin::before {
    background:
      linear-gradient(to top, rgba(29, 30, 28, .8) 0%, rgba(29, 30, 28, 0) 50%),
      linear-gradient(to bottom, rgba(29, 30, 28, .7) 0%, rgba(29, 30, 28, 0) 40%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .grain { animation: none; }
  .hero__hint-line { animation: none; }
}
html.static .hero, html.static .life, html.static .method, html.static .archive, html.static .language { height: auto; }
html.static .spaces__scroller { height: auto; }
html.static .hero__pin, html.static .life__pin, html.static .method__pin, html.static .language__pin { height: auto; min-height: 100vh; overflow: visible; }
html.static .hero__quote { position: relative; left: auto; top: auto; transform: none; margin: 0 auto; }
html.static .hero__quote .w, html.static .dusk__line .w { opacity: 1; }
html.static .hero__after { position: relative; left: auto; bottom: auto; transform: none; opacity: 1; margin: 2rem auto 20vh; }
html.static .life__track, html.static .language__track { position: relative; top: auto; flex-wrap: wrap; padding: 4vh var(--gutter); transform: none !important; }
html.static .life__head, html.static .language__head { position: relative; left: auto; top: auto; padding: 14vh var(--gutter) 0; width: auto; }
html.static .life__horizon { display: none; }
html.static .step { opacity: 1; display: grid; }
html.static .step p { max-height: none; }
html.static .model__final { opacity: 1; }
html.static .model__strips, html.static .model__cuts { display: none; }
html.static .concept__media .fold { display: none; }

html.static .relief { position: absolute; height: 100vh; }
html.static .hero__title { position: relative; left: auto; right: auto; bottom: auto; padding-top: 52vh; }
html.static .hero__quote { padding-top: 12vh; }
html.static .hero__lead, html.static .hero__meta { position: absolute; }
html.static .life__track, html.static .life__horizon { -webkit-mask-image: none; mask-image: none; }

/* =====================================================================
   Web oficial: materia, ficha de obra, formularios, páginas interiores
   ===================================================================== */

/* ---------- materia: muestrario con los detalles reales de las obras ---------- */
.materia { padding-bottom: 14vh; }
.swatch-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 7vh; }
.swatch-filters button {
  display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: transparent;
  border-radius: 999px; padding: 7px 14px; font-size: .85rem; cursor: pointer; color: var(--fg);
  transition: background-color .4s var(--ease), border-color .4s var(--ease), color .4s var(--ease);
}
.swatch-filters button:hover { border-color: var(--fg); }
.swatch-filters button[aria-pressed="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.swatch-filters i { width: 12px; height: 12px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(255,255,255,.35); }
.swatch-filters small { font-size: .72rem; opacity: .7; font-variant-numeric: tabular-nums; }
.swatches {
  margin-top: 4vh; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: clamp(8px, 1vw, 14px);
}
.swatch {
  position: relative; aspect-ratio: 1; padding: 0; border: 0; cursor: pointer; overflow: hidden; background: #8a8a83;
  box-shadow: 0 14px 30px rgba(0,0,0,.22); transition: transform .7s var(--ease), box-shadow .7s var(--ease), opacity .6s var(--ease);
}
.swatch img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.swatch:hover img, .swatch:focus-visible img { transform: scale(1.12); }
.swatch:hover { transform: translateY(-4px); box-shadow: 0 24px 44px rgba(0,0,0,.3); }
.swatch__info {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 10px 9px; text-align: left; color: #fff;
  background: linear-gradient(to top, rgba(20,20,18,.78), rgba(20,20,18,0)); font-size: .74rem; line-height: 1.3;
  opacity: 0; transform: translateY(6px); transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.swatch__info b { display: block; font-weight: 520; font-size: .8rem; }
.swatch__info span { font-variant-numeric: tabular-nums; opacity: .85; }
.swatch:hover .swatch__info, .swatch:focus-visible .swatch__info { opacity: 1; transform: none; }
.swatch.is-hidden { display: none; }
.swatch.is-in { animation: swatchIn .9s var(--ease) both; }
@keyframes swatchIn { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: none; } }
.materia__hint { margin-top: 3vh; }

/* ---------- formulario ---------- */
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.form__title { grid-column: 1 / -1; font-stretch: 112%; font-weight: 380; font-size: 1.3rem; }
.field { display: grid; gap: 6px; font-size: .82rem; color: var(--fg-2); }
.field--wide { grid-column: 1 / -1; }
.field input, .field select, .field textarea {
  font: inherit; font-size: 1rem; color: var(--fg); background: transparent; border: 0; border-bottom: 1px solid var(--line);
  padding: 9px 0; border-radius: 0; transition: border-color .4s var(--ease); width: 100%;
}
.field textarea { resize: vertical; min-height: 6em; line-height: 1.5; }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 10px) 55%, calc(100% - 5px) 55%; background-size: 5px 5px; background-repeat: no-repeat; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-bottom-color: var(--fg); }
.field.is-invalid input, .field.is-invalid textarea { border-bottom-color: #b5452f; }
.form__note { grid-column: 1 / -1; font-size: .78rem; color: var(--fg-2); }
.form .btn { justify-self: start; }
.form__status { grid-column: 1 / -1; font-size: .92rem; min-height: 1.4em; }
.form__status.is-ok { color: #3f6b3a; }
.form__status.is-error { color: #a53c27; }
.form__hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form.is-sent .field, .form.is-sent .form__note, .form.is-sent .btn { display: none; }

/* ---------- ficha de obra (hoja y página) ---------- */
.sheet--work { background: #ecebe5; color: #22231f; z-index: 85; overflow-y: auto; overscroll-behavior: contain; display: block;
  --bg: #ecebe5; --fg: #22231f; --fg-2: #5b5c55; --line: rgba(34,35,31,.18); }
.sheet--work .close { border-color: rgba(34,35,31,.3); color: #22231f; }
.sheet--work .close:hover { background: #22231f; color: #ecebe5; }
.ws__top { position: sticky; top: 0; z-index: 3; display: flex; justify-content: flex-end; gap: 8px; padding: 16px var(--gutter) 22px; pointer-events: none; background: linear-gradient(#ecebe5 62%, rgba(236,235,229,0)); }
.ws__top > * { pointer-events: auto; }
.ws__nav { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(34,35,31,.3); background: rgba(236,235,229,.85); color: #22231f; display: grid; place-items: center; cursor: pointer; transition: background-color .3s, color .3s; }
.ws__nav svg { width: 18px; height: 18px; }
.ws__nav:hover { background: #22231f; color: #ecebe5; }
.ws { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 5vw; padding: 0 var(--gutter) 10vh; align-items: start; }
.ws__media { position: sticky; top: 76px; display: grid; gap: 14px; }
.ws__stage { height: calc(100vh - 190px); min-height: 320px; display: grid; place-items: center; }
.ws__stage img { max-height: calc(100vh - 190px); max-width: 100%; width: auto; height: auto; object-fit: contain; filter: drop-shadow(0 22px 26px rgba(60, 46, 30, .25)); transition: opacity .45s var(--ease); }
.ws__stage img.is-loading { opacity: .25; }
.ws__thumbs { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.ws__thumb { position: relative; width: 66px; height: 66px; padding: 0; border: 1px solid rgba(34,35,31,.18); background: #f6f5f1; cursor: pointer; overflow: hidden; border-radius: 10px; transition: border-color .3s; }
.ws__thumb img { width: 100%; height: 100%; object-fit: cover; }
.ws__thumb.is-side img, .ws__thumb.is-front img { object-fit: contain; padding: 4px; }
.ws__thumb span { position: absolute; left: 0; right: 0; bottom: 0; font-size: .58rem; background: rgba(236,235,229,.9); padding: 1px 0; text-align: center; }
.ws__thumb[aria-pressed="true"] { border-color: #22231f; box-shadow: 0 0 0 1px #22231f; }
.ws__info { padding-top: 6vh; max-width: 34em; }
.ws__info h1, .ws__info h2#wsTitle { font-stretch: 118%; font-weight: 280; font-size: clamp(2rem, 3.4vw, 3.4rem); line-height: 1.05; letter-spacing: -0.015em; }
.ws__meta { color: #5b5c55; margin-top: 10px; font-variant-numeric: tabular-nums; }
.ws__facts { margin: 26px 0 0; display: grid; gap: 0; border-top: 1px solid rgba(34,35,31,.16); }
.ws__facts div { display: grid; grid-template-columns: 8.5em 1fr; gap: 12px; padding: 11px 0; border-bottom: 1px solid rgba(34,35,31,.16); font-size: .92rem; }
.ws__facts dt { color: #6a6b63; }
.ws__facts dd { margin: 0; }
.ws__summary { margin-top: 22px; font-size: 1.08rem; line-height: 1.55; color: #2f302b; }
.ws__actions { display: flex; align-items: center; gap: 20px; margin: 26px 0 8px; flex-wrap: wrap; }
.ws__actions .btn { --fg: #22231f; --bg: #ecebe5; }
.form--work { margin: 18px 0 8px; padding: 22px; border: 1px solid rgba(34,35,31,.16); border-radius: 16px; background: rgba(255,255,255,.35); }
.ws__about { margin-top: 36px; }
.ws__about h2, .ws__about h3 { font-stretch: 112%; font-weight: 400; font-size: 1.05rem; margin-bottom: 10px; }
.ws__about p { color: #3a3b36; line-height: 1.7; margin-bottom: 1em; text-wrap: pretty; }
.ws__about:empty, .ws__about.is-empty { display: none; }

/* ---------- pie ---------- */
.foot {
  position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); gap: 28px;
  padding: 7vh var(--gutter) 5vh calc(var(--gutter) + var(--rail)); border-top: 1px solid var(--line); color: var(--fg-2); font-size: .86rem;
}
.foot__brand { display: flex; gap: 14px; align-items: flex-start; }
.foot__brand .mark { width: 30px; height: 30px; color: var(--fg); flex: none; }
.foot__name { color: var(--fg); font-stretch: 112%; font-size: 1rem; }
.foot__contact, .foot__legal { display: grid; gap: 6px; align-content: start; }
.foot a { text-decoration: none; }
.foot a:hover { text-decoration: underline; text-underline-offset: 3px; }
.foot__copy { grid-column: 1 / -1; font-size: .78rem; opacity: .75; }

/* ---------- páginas interiores ---------- */
.page { --rail: 0px; }
.page main { position: relative; z-index: 2; }
.catalog { padding: 18vh var(--gutter) 12vh; }
.catalog__head { max-width: 46em; }
.cat-grid { margin-top: 8vh; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 44px 28px; }
.cat-card { display: grid; grid-template-rows: auto auto auto; align-content: start; gap: 6px; min-width: 0; text-decoration: none; }
/* la imagen se encaja siempre dentro de la casilla (4:5), sea cual sea su proporción */
.cat-card__img { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: #e6e4dd; border-radius: 4px; transition: background-color .6s var(--ease); }
.cat-card__img img { position: absolute; inset: 9%; width: 82%; height: 82%; max-width: none; object-fit: contain; filter: drop-shadow(0 12px 14px rgba(60,46,30,.22)); transition: transform .8s var(--ease); }
.cat-card:hover .cat-card__img { background: #dedbd2; }
.cat-card:hover .cat-card__img img { transform: translateY(-4px) scale(1.02); }
.cat-card__title { margin-top: 8px; font-stretch: 112%; font-size: 1.02rem; line-height: 1.25; }
.cat-card__meta { color: var(--fg-2); font-size: .82rem; font-variant-numeric: tabular-nums; }
.obra { padding: 14vh 0 10vh; }
.obra__back { display: inline-block; margin: 0 var(--gutter) 3vh; text-decoration: none; color: var(--fg-2); font-size: .9rem; }
.obra__back:hover { color: var(--fg); }
.ws--page .ws__stage { height: min(66vh, 820px); }
.ws--page .ws__stage img { max-height: min(66vh, 820px); }
.ws--page .ws__thumb img { object-fit: cover; }
.form--work[hidden] { display: none; }
.obra__more { padding: 6vh var(--gutter) 0; }
.obra__more h2 { font-stretch: 112%; font-weight: 340; font-size: 1.5rem; }
.obra__more .cat-grid { margin-top: 4vh; }
.legal-main, .simple-state { padding: 20vh var(--gutter) 12vh; max-width: 52em; }
.legal-main h1, .simple-state h1 { font-stretch: 118%; font-weight: 280; font-size: clamp(2rem, 4vw, 3.6rem); line-height: 1.05; margin: 10px 0 24px; }
.legal-main h2 { font-stretch: 112%; font-weight: 420; font-size: 1.15rem; margin: 32px 0 8px; }
.legal-main p, .simple-state p { color: var(--fg-2); line-height: 1.7; margin-bottom: 1em; }
.section-kicker { font-size: .82rem; color: var(--fg-2); }
.simple-state .btn { margin-top: 20px; }

@media (max-width: 960px) {
  .ws { grid-template-columns: 1fr; gap: 24px; }
  .ws__media { position: relative; top: 0; }
  .ws__stage, .ws--page .ws__stage { height: 52vh; }
  .ws__stage img, .ws--page .ws__stage img { max-height: 52vh; }
  .ws__info { padding-top: 0; }
  .foot { grid-template-columns: 1fr 1fr; }
  .foot__brand { grid-column: 1 / -1; }
  .contact { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .swatches { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
  .swatch__info { opacity: 1; transform: none; padding-top: 20px; font-size: .66rem; }
  .swatch__info span { display: none; }
  .form { grid-template-columns: 1fr; }
  .catalog { padding-top: 14vh; }
  .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 14px; }
  .lang ul { right: -60px; }
  .ws__top { padding: 12px 16px; }
}
@media (pointer: coarse), (max-width: 820px) {
  .swatch:hover { transform: none; }
}
.page .bar { background: color-mix(in srgb, var(--bg) 90%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }

/* galería: los textos van sobre una placa translúcida para leerse sobre los muros claros */
.archive__intro, .hud {
  background: rgba(28, 23, 19, .58); -webkit-backdrop-filter: blur(10px) saturate(1.1); backdrop-filter: blur(10px) saturate(1.1);
  border: 1px solid rgba(244, 238, 228, .08); border-radius: 6px; box-shadow: 0 18px 40px rgba(20, 14, 8, .18);
}
.archive__intro { padding: 26px 32px 28px; max-width: min(46rem, calc(100vw - 2 * var(--gutter) - var(--rail))); }
.archive__intro .lede { color: #ece4d6; }
.hud { padding: 18px 22px 18px; }
.hud:empty, .hud:has(.hud__title:empty) { background: none; border-color: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.hud__meta { color: #e2d8c8; }
.hud__title, .hud__meta { text-shadow: none; }
@media (max-width: 820px) {
  .archive__intro { left: var(--gutter); padding: 18px 20px; }
  .hud { left: var(--gutter); padding: 14px 16px; }
}
.archive__tools .pill--ghost { background: rgba(28, 23, 19, .58); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-color: rgba(244, 238, 228, .35); color: #f4eee4; }
.archive__tools .pill--ghost:hover { background: #f4eee4; color: #221e1a; }