:root {
  --paper: #d9c6a8;
  --paper-2: #cdb894;
  --ink: #1b1917;
  --ink-soft: #46403a;
  --muted: #655d4f;
  --line: rgba(27, 25, 23, .14);
  --terra: #b8563f;
  --teal: #3f7d8c;
  --ochre: #c9963f;
  --rose: #c98a92;
  --shadow: 0 1px 2px rgba(27, 25, 23, .06), 0 12px 34px -18px rgba(27, 25, 23, .45);
  --shadow-lift: 0 2px 6px rgba(27, 25, 23, .08), 0 30px 60px -26px rgba(27, 25, 23, .55);
  --serif: "Fraunces", "Georgia", "Times New Roman", serif;
  --sans: "Jost", "Segoe UI", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 17.5px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; }

::selection { background: rgba(184, 86, 63, .22); }

/* ---------- HERO ---------- */

.hero {
  position: relative;
  min-height: 92svh;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: clamp(4rem, 10vh, 7rem) 1.5rem 5rem;
  text-align: center;
  background:
    radial-gradient(120% 90% at 50% 0%, #e6d7bd 0%, var(--paper) 55%, var(--paper-2) 100%);
}

.wash { position: absolute; inset: 0; filter: blur(70px); opacity: .55; pointer-events: none; }

.blob { position: absolute; border-radius: 50%; mix-blend-mode: multiply; animation: drift 26s ease-in-out infinite alternate; }
.b1 { width: 42vw; height: 42vw; left: -8vw; top: 4vh;  background: radial-gradient(circle at 35% 35%, rgba(63,125,140,.55), transparent 68%); }
.b2 { width: 38vw; height: 38vw; right: -6vw; top: 0;   background: radial-gradient(circle at 60% 40%, rgba(201,150,63,.5), transparent 66%); animation-delay: -8s; }
.b3 { width: 46vw; height: 46vw; left: 18vw; bottom: -18vh; background: radial-gradient(circle at 50% 50%, rgba(184,86,63,.42), transparent 68%); animation-delay: -14s; }
.b4 { width: 30vw; height: 30vw; right: 14vw; bottom: -6vh; background: radial-gradient(circle at 45% 55%, rgba(201,138,146,.45), transparent 65%); animation-delay: -4s; }

@keyframes drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(3vw, -3vh, 0) scale(1.12); }
}

.hero-inner { position: relative; max-width: 46rem; }

.eyebrow {
  margin: 0 0 1.6rem;
  font-size: .78rem;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--muted);
}

.hero h1 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 430;
  font-variation-settings: "opsz" 120;
  font-size: clamp(3.2rem, 13vw, 8.5rem);
  line-height: .92;
  letter-spacing: -.035em;
}

.hero h1 em {
  font-style: italic;
  font-weight: 360;
  color: var(--terra);
}

.lede {
  margin: 1.8rem auto 0;
  max-width: 34rem;
  color: var(--ink-soft);
  font-size: clamp(1.06rem, 1.7vw, 1.22rem);
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .85rem;
  margin-top: 2.2rem;
  font-size: .82rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}

.hero-meta i { width: 4px; height: 4px; border-radius: 50%; background: var(--ochre); display: inline-block; }

.cta {
  display: inline-block;
  margin-top: 2.6rem;
  padding: .95rem 2.3rem;
  border: 1px solid var(--ink);
  border-radius: 999px;
  color: var(--ink);
  text-decoration: none;
  font-size: .87rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  transition: background .35s ease, color .35s ease, transform .35s ease;
}

.cta:hover { background: var(--ink); color: var(--paper); transform: translateY(-2px); }

.scroll-hint {
  position: absolute;
  bottom: 2rem; left: 50%;
  width: 1px; height: 54px;
  background: var(--line);
  overflow: hidden;
}
.scroll-hint span {
  position: absolute; inset: 0;
  background: var(--terra);
  animation: drop 2.4s cubic-bezier(.7, 0, .3, 1) infinite;
}
@keyframes drop {
  0%   { transform: translateY(-100%); }
  60%  { transform: translateY(0); }
  100% { transform: translateY(100%); }
}

/* ---------- FILTROS ---------- */

.filtros {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(217, 198, 168, .9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}

.filtros-inner {
  max-width: 1500px;
  margin: 0 auto;
  padding: .9rem clamp(1rem, 4vw, 3rem);
  display: flex;
  align-items: center;
  gap: 1.2rem;
  flex-wrap: wrap;
}

.filtros-label {
  font-size: .7rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--muted);
}

.chips { display: flex; gap: .5rem; flex-wrap: wrap; }

.chip {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-soft);
  border-radius: 999px;
  padding: .45rem 1.1rem;
  font: inherit;
  font-size: .85rem;
  letter-spacing: .04em;
  cursor: pointer;
  transition: all .25s ease;
}

.chip sup { font-size: .65rem; color: var(--muted); margin-left: .35rem; }
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip.activo { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.chip.activo sup { color: rgba(217, 198, 168, .65); }

.visibles { margin-left: auto; font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }

/* ---------- GALERÍA ---------- */

.galeria {
  max-width: 1500px;
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 3.5rem) clamp(1rem, 4vw, 3rem) 5rem;
  columns: 4 300px;
  column-gap: 1.5rem;
}

.obra {
  break-inside: avoid;
  margin: 0 0 1.5rem;
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: zoom-in;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .3, 1);
}

.obra.visible { opacity: 1; transform: none; }

.obra-frame {
  display: block;
  position: relative;
  overflow: hidden;
  background: var(--paper-2);
  box-shadow: var(--shadow);
  transition: box-shadow .45s ease, transform .45s ease;
}

.obra:hover .obra-frame,
.obra:focus-visible .obra-frame {
  box-shadow: var(--shadow-lift);
  transform: translateY(-5px);
}

.obra-frame img {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity .6s ease, transform .9s cubic-bezier(.2, .7, .3, 1);
}

.obra-frame img.cargada { opacity: 1; transform: none; }

.obra-overlay {
  position: absolute;
  inset: auto 0 0 0;
  padding: 2.6rem 1rem .95rem;
  background: linear-gradient(to top, rgba(20, 18, 15, .78), rgba(20, 18, 15, 0));
  color: #f7f3ec;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .4s ease, transform .4s ease;
}

.obra:hover .obra-overlay,
.obra:focus-visible .obra-overlay { opacity: 1; transform: none; }

.obra-overlay .t {
  display: block;
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1.25;
}

.obra-overlay .c {
  display: block;
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(247, 243, 236, .68);
  margin-top: .28rem;
}

.obra-num {
  position: absolute;
  top: .7rem; left: .8rem;
  font-size: .66rem;
  letter-spacing: .16em;
  color: rgba(27, 25, 23, .55);
  background: rgba(217, 198, 168, .92);
  padding: .18rem .5rem;
  border-radius: 999px;
  opacity: 0;
  transition: opacity .35s ease;
}

.obra:hover .obra-num { opacity: 1; }

.vacio {
  grid-column: 1 / -1;
  padding: 4rem 0;
  text-align: center;
  color: var(--muted);
}

/* ---------- LIGHTBOX ---------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  background: rgba(18, 16, 14, .95);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .35s ease;
}

.lightbox[hidden] { display: none; }
.lightbox.abierto { opacity: 1; }

.lb-fig { margin: 0; max-width: min(92vw, 1400px); text-align: center; padding-bottom: 3rem; }

.lb-fig img {
  max-width: 100%;
  max-height: 82svh;
  object-fit: contain;
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .9);
  animation: lbin .45s cubic-bezier(.2, .7, .3, 1);
}

@keyframes lbin { from { opacity: 0; transform: scale(.975); } to { opacity: 1; transform: none; } }

.lb-fig figcaption { margin-top: 1.4rem; color: #f2ede4; }
.lb-fig figcaption span:first-child { display: block; font-family: var(--serif); font-size: 1.34rem; }
.lb-fig figcaption span:last-child {
  display: block;
  margin-top: .3rem;
  font-size: .7rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(242, 237, 228, .55);
}

.lb-close, .lb-nav {
  position: absolute;
  border: 0;
  background: transparent;
  color: rgba(242, 237, 228, .75);
  cursor: pointer;
  transition: color .25s ease, transform .25s ease;
}

.lb-close { top: .8rem; right: 1.1rem; font-size: 2.4rem; line-height: 1; padding: .4rem; }
.lb-nav { top: 50%; transform: translateY(-50%); font-size: 3rem; line-height: 1; padding: 1rem .8rem; }
.lb-nav.prev { left: .4rem; }
.lb-nav.next { right: .4rem; }
.lb-close:hover, .lb-nav:hover { color: #fff; }
.lb-nav.prev:hover { transform: translate(-4px, -50%); }
.lb-nav.next:hover { transform: translate(4px, -50%); }

.lb-counter {
  position: absolute;
  bottom: 1.2rem; left: 50%;
  transform: translateX(-50%);
  font-size: .72rem;
  letter-spacing: .26em;
  color: rgba(242, 237, 228, .55);
}

/* ---------- PIE ---------- */

.pie { border-top: 1px solid var(--line); background: var(--paper-2); }

.pie-inner { max-width: 1500px; margin: 0 auto; padding: clamp(2.5rem, 6vw, 4rem) clamp(1rem, 4vw, 3rem); text-align: center; }

.pie-title { margin: 0; font-family: var(--serif); font-size: 1.8rem; font-weight: 420; }
.pie-title em { font-style: italic; color: var(--terra); }
.pie-nota { margin: .5rem 0 0; font-size: .84rem; color: var(--ink-soft); }
.pie-nota.dim { color: var(--muted); font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; }

/* ---------- RESPONSIVE ---------- */

@media (max-width: 900px) {
  .galeria { columns: 2 220px; column-gap: 1.1rem; }
  .obra { margin-bottom: 1.1rem; }
  .visibles { display: none; }
}

@media (max-width: 520px) {
  .galeria { columns: 1; }
  .lb-nav { font-size: 2.2rem; padding: .6rem .4rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition-duration: .01ms !important; }
  .obra { opacity: 1; transform: none; }
  .obra-frame img { opacity: 1; transform: none; }
}