/* ── PAGE NAV ── */
.page-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  position: relative;
  z-index: 10;
}

.page-nav__back {
  font-family: var(--font-pixel);
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--cream-dim);
  text-decoration: none;
  transition: color 0.15s;
}
.page-nav__back:hover { color: var(--cream); }

.page-nav__title {
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 4px;
  color: var(--cream-low);
}

/* ── PROJECT HERO TEXT ── */
.proj-hero {
  padding: 0 4px;
  overflow: hidden;
}

.proj-hero__name {
  font-family: var(--font-display);
  font-size: 10vw; /* fallback — JS refines to exact fit */
  color: var(--cream);
  letter-spacing: -0.02em;
  line-height: 0.88;
  white-space: nowrap;
  text-shadow: 2px 2px 0 rgba(0,0,0,0.5);
  display: block;
}

/* ── PROJECT META ── */
.proj-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  position: relative;
  z-index: 5;
}

.proj-meta__item {
  padding: 10px 20px;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.proj-meta__label {
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 3px;
  color: var(--cream-low);
  text-transform: uppercase;
}

.proj-meta__value {
  font-family: var(--font-display);
  font-size: 16px;
  color: var(--cream);
  letter-spacing: 1px;
}

/* ── IMAGES ── */
.proj-images {
  padding: 32px 48px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: relative;
  z-index: 5;
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
}

.proj-image {
  width: 100%;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border-dim);
  border-radius: 4px;
}

.proj-image img {
  width: 100%;
  display: block;
  filter: sepia(0.08) contrast(1.04) brightness(0.9) saturate(0.75);
}

.proj-image video {
  width: 100%;
  display: block;
}

.proj-image__vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(13,11,10,0.4) 100%);
  pointer-events: none;
}

/* ── THIRDS GRID (redes sociales / piezas pequeñas) ── */
.proj-images--thirds {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px;
  padding: 32px 48px;
}

.proj-images--thirds .proj-image {
  flex: 0 0 calc(33.333% - 7px);
  width: calc(33.333% - 7px);
}

@media (max-width: 700px) {
  .proj-images { padding: 20px 20px; gap: 16px; }
  .proj-images--thirds { padding: 20px 20px; }
  .proj-images--thirds .proj-image {
    flex: 0 0 calc(50% - 5px);
    width: calc(50% - 5px);
  }
}

@media (max-width: 480px) {
  .proj-images { padding: 14px 14px; gap: 12px; }
  .proj-images--thirds .proj-image {
    flex: 0 0 100%;
    width: 100%;
  }
}

/* ── DESCRIPTION ── */
.proj-desc {
  padding: 28px 32px;
  max-width: 640px;
  position: relative;
  z-index: 5;
}

.proj-desc__text {
  font-family: var(--font-serif);
  font-size: 18px;
  line-height: 1.9;
  color: var(--cream-dim);
}

/* ── BACK TO TOP ── */
.proj-top {
  display: flex;
  justify-content: center;
  padding: 24px 16px;
  border-top: 1px solid var(--border);
}

.proj-top__btn {
  font-family: var(--font-pixel);
  font-size: 11px;
  letter-spacing: 3px;
  color: var(--cream-low);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 10px 20px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.proj-top__btn:hover {
  color: var(--cream);
  border-color: var(--border-med);
  background: rgba(232, 226, 208, 0.04);
}

/* ── NEXT / PREV NAV ── */
.proj-pagination {
  display: flex;
  border-top: 1px solid var(--border);
  position: relative;
  z-index: 5;
}

.proj-pagination__btn {
  flex: 1;
  padding: 16px 24px;
  font-family: var(--font-pixel);
  font-size: 11px;
  letter-spacing: 3px;
  color: var(--cream-dim);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: background 0.15s, color 0.15s;
}

.proj-pagination__btn:hover {
  background: var(--bg-card);
  color: var(--cream);
}

.proj-pagination__btn--next {
  justify-content: flex-end;
  border-left: 1px solid var(--border);
}

/* ── SIMPLE PAGE HERO (about / contacto) ── */
.hero {
  padding: 56px 32px 44px;
  border-bottom: 1px solid var(--border);
}
.hero__text {
  font-family: var(--font-display);
  font-size: clamp(52px, 9vw, 120px);
  color: var(--cream);
  letter-spacing: -0.02em;
  line-height: 0.88;
  font-weight: normal;
  text-transform: uppercase;
}

/* ── HOW I WORK STEPS ── */
.work-steps {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--border);
  margin-top: 40px;
}
.work-step {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 0 20px;
  align-items: baseline;
  padding: 22px 0;
  border-bottom: 1px solid var(--border-dim);
}
.work-step__num {
  font-family: var(--font-pixel);
  font-size: 9px;
  letter-spacing: 2px;
  color: var(--cream-low);
  padding-top: 3px;
}
.work-step__body {}
.work-step__title {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--cream);
  letter-spacing: 0.5px;
  display: block;
  margin-bottom: 6px;
}
.work-step__desc {
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 0.5px;
  line-height: 1.8;
  color: var(--cream-dim);
}

/* ── SOCIAL GRID ── */
.social-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 36px;
}
.social-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border: 1px solid var(--border);
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 2.5px;
  color: var(--cream-dim);
  text-decoration: none;
  text-transform: uppercase;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.social-link:hover {
  color: var(--cream);
  border-color: var(--border-med);
  background: rgba(200,255,0,0.03);
}
.social-link__icon {
  font-size: 14px;
  line-height: 1;
}

/* ── CONTACT BLOCK ── */
.contact-block {
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--border);
}
.contact-block__label {
  font-family: var(--font-pixel);
  font-size: 9px;
  letter-spacing: 3px;
  color: var(--cream-low);
  text-transform: uppercase;
  display: block;
  margin-bottom: 14px;
}
.contact-block__email {
  font-family: var(--font-display);
  font-size: clamp(18px, 2.5vw, 28px);
  color: var(--cream);
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--border);
  transition: border-color 0.15s;
  display: inline-block;
}
.contact-block__email:hover { border-color: var(--cream); }
.contact-block__location {
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--cream-low);
  display: block;
  margin-top: 12px;
}

/* ── ABOUT / CONTACT PAGES ── */
.simple-page {
  padding: 40px 32px;
  max-width: 680px;
  margin: 0 auto;
  position: relative;
  z-index: 5;
}

.simple-page__body {
  font-family: var(--font-serif);
  font-size: 18px;
  line-height: 2;
  color: var(--cream-dim);
}

.simple-page__body a {
  color: var(--cream);
  border-bottom: 1px solid var(--border);
  transition: border-color 0.15s;
}
.simple-page__body a:hover { border-color: var(--cream); }

.contact-link {
  display: inline-block;
  margin-top: 28px;
  font-family: var(--font-pixel);
  font-size: 11px;
  letter-spacing: 3px;
  color: var(--cream);
  padding: 10px 20px;
  border: 1px solid var(--border);
  transition: background 0.15s, color 0.15s;
}
.contact-link:hover { background: var(--cream); color: var(--bg); }

/* ══════════════════════════════════
   ARCHIVE PAGE — text list + hover-reveal cursor image
   ══════════════════════════════════ */

.arch-nav {
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 80;
  border-bottom: 1px solid var(--border);
}

/* ── Header ── */
.arch-header {
  padding: 80px 48px 64px;
  border-bottom: 1px solid var(--border);
}

.arch-header__label {
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 4px;
  color: var(--cream-low);
  display: block;
  margin-bottom: 22px;
  text-transform: uppercase;
}

.arch-header__title {
  font-family: var(--font-display);
  font-size: clamp(67px, 13vw, 163px);
  color: var(--cream);
  line-height: 0.86;
  letter-spacing: -0.02em;
  display: block;
}

.arch-header__sub {
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 3px;
  color: var(--cream-low);
  display: block;
  margin-top: 28px;
}

/* ── Column headers ── */
.arch-cols {
  display: grid;
  grid-template-columns: 56px 1fr 260px 80px;
  gap: 0 24px;
  padding: 14px 48px;
  border-bottom: 1px solid var(--border);
}

.arch-col {
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 3px;
  color: var(--cream-low);
  text-transform: uppercase;
}

/* ── Project row ── */
.arch-row {
  display: grid;
  grid-template-columns: 56px 1fr 260px 80px;
  gap: 0 24px;
  align-items: center;
  padding: 22px 48px;
  border-bottom: 1px solid var(--border-dim);
  text-decoration: none;
  cursor: none;             /* hide default cursor — JS cursor takes over */
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s ease, transform 0.5s ease, background 0.2s ease;
  position: relative;
}

.arch-row--visible {
  opacity: 1;
  transform: translateY(0);
}

.arch-row:hover {
  background: rgba(232, 226, 208, 0.02);
}

.arch-row:hover .arch-row__name {
  color: var(--cream);
  letter-spacing: -0.015em;
}

.arch-row:hover .arch-row__num,
.arch-row:hover .arch-row__cat,
.arch-row:hover .arch-row__year {
  color: var(--cream-dim);
}

.arch-row__num {
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--cream-low);
  transition: color 0.2s;
}

.arch-row__name {
  font-family: var(--font-display);
  font-size: clamp(25px, 3vw, 45px);
  color: rgba(232, 226, 208, 0.55);
  letter-spacing: -0.01em;
  line-height: 1;
  transition: color 0.2s ease, letter-spacing 0.3s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.arch-row__cat {
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 1.5px;
  color: var(--cream-low);
  text-transform: uppercase;
  transition: color 0.2s;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.arch-row__year {
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--cream-low);
  text-align: right;
  transition: color 0.2s;
}

/* ── Cursor image preview ── */
#arch-cursor {
  position: fixed;
  width: 380px;
  aspect-ratio: 4 / 3;
  pointer-events: none;
  z-index: 500;
  opacity: 0;
  transform: scale(0.9) translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  filter: url(#card-bloom);
  top: 0;
  left: 0;
  will-change: left, top;
}

#arch-cursor.active {
  opacity: 1;
  transform: scale(1) translateY(0);
}

.arch-cursor__wrap {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 1px solid rgba(232, 226, 208, 0.08);
  position: relative;
}

#arch-cursor-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(1) contrast(1.18) brightness(0.86);
}

.arch-cursor__vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 46%, transparent 32%, rgba(0,0,0,0.72) 100%);
  pointer-events: none;
}

/* Custom cursor dot */
#arch-dot {
  position: fixed;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cream-dim);
  pointer-events: none;
  z-index: 600;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: opacity 0.2s;
  top: 0;
  left: 0;
}

/* Blur edges */
.blur-edge { position: fixed; pointer-events: none; z-index: 60; }
.blur-edge--top    { top: 0;    left: 0; right: 0; height: 160px; }
.blur-edge--bottom { bottom: 0; left: 0; right: 0; height: 160px; }
.bl { position: absolute; inset: 0; pointer-events: none; }

.blur-edge--top .bl-1 {
  backdrop-filter: blur(3px) brightness(0.96);
  -webkit-backdrop-filter: blur(3px) brightness(0.96);
  mask-image: linear-gradient(to bottom, black 0%, black 50%, rgba(0,0,0,0.25) 75%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 50%, rgba(0,0,0,0.25) 75%, transparent 100%);
}
.blur-edge--bottom .bl-1 {
  backdrop-filter: blur(3px) brightness(0.96);
  -webkit-backdrop-filter: blur(3px) brightness(0.96);
  mask-image: linear-gradient(to top, black 0%, black 50%, rgba(0,0,0,0.25) 75%, transparent 100%);
  -webkit-mask-image: linear-gradient(to top, black 0%, black 50%, rgba(0,0,0,0.25) 75%, transparent 100%);
}
.blur-edge--top .bl-2 {
  backdrop-filter: blur(8px) brightness(0.94);
  -webkit-backdrop-filter: blur(8px) brightness(0.94);
  mask-image: linear-gradient(to bottom, black 0%, black 28%, rgba(0,0,0,0.18) 55%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 28%, rgba(0,0,0,0.18) 55%, transparent 100%);
}
.blur-edge--bottom .bl-2 {
  backdrop-filter: blur(8px) brightness(0.94);
  -webkit-backdrop-filter: blur(8px) brightness(0.94);
  mask-image: linear-gradient(to top, black 0%, black 28%, rgba(0,0,0,0.18) 55%, transparent 100%);
  -webkit-mask-image: linear-gradient(to top, black 0%, black 28%, rgba(0,0,0,0.18) 55%, transparent 100%);
}
.blur-edge--top .bl-3 {
  backdrop-filter: blur(18px) brightness(0.91);
  -webkit-backdrop-filter: blur(18px) brightness(0.91);
  mask-image: linear-gradient(to bottom, black 0%, black 10%, rgba(0,0,0,0.12) 32%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 10%, rgba(0,0,0,0.12) 32%, transparent 100%);
}
.blur-edge--bottom .bl-3 {
  backdrop-filter: blur(18px) brightness(0.91);
  -webkit-backdrop-filter: blur(18px) brightness(0.91);
  mask-image: linear-gradient(to top, black 0%, black 10%, rgba(0,0,0,0.12) 32%, transparent 100%);
  -webkit-mask-image: linear-gradient(to top, black 0%, black 10%, rgba(0,0,0,0.12) 32%, transparent 100%);
}
.blur-edge--top .bl-tint {
  background: linear-gradient(to bottom, rgba(18,18,18,0.26) 0%, rgba(18,18,18,0.10) 55%, transparent 100%);
}
.blur-edge--bottom .bl-tint {
  background: linear-gradient(to top, rgba(18,18,18,0.26) 0%, rgba(18,18,18,0.10) 55%, transparent 100%);
}

@media (max-width: 960px) {
  .arch-cols,
  .arch-row { grid-template-columns: 48px 1fr 80px; gap: 0 16px; padding: 20px 28px; }
  .arch-row__cat { display: none; }
  .arch-cols .arch-col:nth-child(3) { display: none; }
  #arch-cursor { width: 280px; }
}

@media (max-width: 600px) {
  .arch-header { padding: 52px 20px 40px; }
  .arch-cols,
  .arch-row { padding: 18px 20px; }
  .arch-row { cursor: pointer; }
  #arch-cursor, #arch-dot { display: none; }
}

/* ══════════════════════════════════
   PROYECTO PAGE — light cream theme, stacked gallery
   ══════════════════════════════════ */

body.proj-page {
  background: #020302;
  color: rgba(200,255,0,0.92);
  overflow: hidden;

  --p-bg:         #020302;
  --p-bg-alt:     #060806;
  --p-text:       rgba(200,255,0,0.92);
  --p-text-mid:   rgba(200,255,0,0.58);
  --p-text-dim:   rgba(90,122,0,0.55);
  --p-border:     #1a2a02;
  --p-border-med: #2e4a05;
  --p-hud:        rgba(200,255,0,0.45);
}

/* Horizontal distortion lines over entire background */
body.proj-page::before {
  content: '';
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    180deg,
    transparent 0px, transparent 3px,
    rgba(0, 0, 0, 0.038) 3px, rgba(0, 0, 0, 0.038) 4px
  );
  pointer-events: none;
  z-index: 50;
}

/* ── HEADER ── */
.proj-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  border-bottom: 1px solid var(--p-border);
  background: var(--p-bg);
  z-index: 100;
  gap: 16px;
}

.proj-header__back {
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--p-text);
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  transition: opacity 0.15s;
  flex-shrink: 0;
}
.proj-header__back:hover { opacity: 0.5; }

.proj-header__mid {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
  flex: 1;
  justify-content: center;
}

.proj-header__name {
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 3px;
  color: var(--p-text);
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.proj-header__sep {
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--p-text-dim);
  flex-shrink: 0;
}

.proj-header__cat {
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--p-text-dim);
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


.proj-header__clock {
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--p-text-dim);
  flex-shrink: 0;
}

/* ── MAIN LAYOUT ── */
.proj-layout {
  position: fixed;
  top: 46px;
  bottom: 42px;
  left: 0; right: 0;
  display: grid;
  grid-template-columns: 240px 1fr 110px;
  overflow: hidden;
}

/* ── LEFT: description + numbered image index ── */
.proj-index {
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0;
  gap: 0;
  scrollbar-width: none;
  background: var(--p-bg);
  border-right: none;
}
.proj-index::-webkit-scrollbar { display: none; }

/* Description text at top of left panel */
.proj-index__desc {
  width: 100%;
  padding: 84px 20px 20px 24px;
  font-family: var(--font-ui);
  font-size: 12px;
  line-height: 1.85;
  letter-spacing: 0.4px;
  color: var(--p-text-mid);
  border-bottom: 1px solid var(--p-border);
  margin-bottom: 12px;
  overflow-wrap: break-word;
}

.proj-index__item {
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 1.5px;
  color: var(--p-text-dim);
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px 20px 10px 24px;
  transition: color 0.18s;
  text-align: left;
  line-height: 1;
  border-left: 1px solid transparent;
  width: 100%;
  display: block;
  white-space: nowrap;
}
.proj-index__item:hover { color: var(--p-text-mid); }
.proj-index__item--active {
  color: var(--p-text);
  border-left-color: var(--p-text);
}

/* ── CENTER — uniform background, no separate tint ── */
.proj-center {
  position: relative;
  overflow: hidden;
  background: var(--p-bg);
}

/* Gallery: stacked slides, fills entire center column */
.proj-gallery {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* All slides stacked on top of each other */
.proj-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  z-index: 0;
}

/* Current visible slide */
.proj-slide--active {
  opacity: 1;
  pointer-events: auto;
  z-index: 1;
}

/* New slide animating in on top */
.proj-slide--incoming {
  opacity: 1;
  z-index: 2;
}

/* Mask animation layer — fills entire slide, clip-path reveals card from center */
.proj-slide__wrap {
  position: absolute;
  inset: 0;
  clip-path: inset(42% 28%);
}

/* Triggered by JS when slide enters view */
.proj-slide--visible .proj-slide__wrap {
  animation: proj-mask-reveal 0.75s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes proj-mask-reveal {
  0%   { clip-path: inset(42% 28%); }
  100% { clip-path: inset(0% 0%);   }
}

/* Visual card — chamfered corners, adapts to each image's aspect ratio */
.proj-slide__card {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: auto;
  width: auto;
  max-height: 65vh;
  max-width: calc(100% - 32px);
  overflow: hidden;
  border-radius: 0.2em;
  clip-path: polygon(
    0 18px, 18px 0, calc(100% - 18px) 0,
    100% 18px, 100% calc(100% - 18px),
    calc(100% - 18px) 100%, 18px 100%, 0 calc(100% - 18px)
  );
  border: 1px solid var(--p-border-med);
}

.proj-slide__card img,
.proj-slide__card video {
  height: auto;
  width: auto;
  max-height: 65vh;
  max-width: 100%;
  display: block;
  border-radius: 0.2em;
}

/* Scroll-card variant: fixed 600px wide, internal vertical scroll */
.proj-slide__card--scroll {
  width: 600px;
  max-width: calc(100% - 32px);
  height: calc(100vh - 200px);
  max-height: none;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--p-border-med) transparent;
}
.proj-slide__card--scroll img,
.proj-slide__card--scroll video {
  width: 100%;
  height: auto;
  max-height: none;
}

/* HUD corner marks — dark-theme, matching test-grid.html chamfer */
.proj-hud {
  position: absolute;
  pointer-events: none;
  z-index: 10;
  background: var(--p-hud);
}
.proj-hud--tl { top: 0;    left: 18px;   width: 36px; height: 1px;  }
.proj-hud--tr { top: 0;    right: 18px;  width: 36px; height: 1px;  }
.proj-hud--bl { bottom: 0; left: 18px;   width: 36px; height: 1px;  }
.proj-hud--br { bottom: 0; right: 18px;  width: 36px; height: 1px;  }
.proj-hud--lt { left: 0;   top: 18px;    width: 1px;  height: 28px; }
.proj-hud--rt { right: 0;  top: 18px;    width: 1px;  height: 28px; }
.proj-hud--lb { left: 0;   bottom: 18px; width: 1px;  height: 28px; }
.proj-hud--rb { right: 0;  bottom: 18px; width: 1px;  height: 28px; }

/* ── DESCRIPTION BAR — siempre visible bajo la galería ── */
.proj-desc-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 64px;
  padding: 12px 28px 16px;
  border-top: 1px solid var(--p-border);
  font-family: var(--font-ui);
  font-size: 12px;
  line-height: 1.8;
  letter-spacing: 0.5px;
  color: var(--p-text);
  overflow-y: auto;
  scrollbar-width: none;
  background: var(--p-bg);
  z-index: 5;
}

/* List view (INFO mode) */
.proj-listview {
  flex: 1;
  overflow-y: auto;
  padding: 48px 52px;
  background: var(--p-bg);
}

.proj-lv__title {
  font-family: var(--font-display);
  font-size: clamp(31px, 4vw, 59px);
  color: var(--p-text);
  letter-spacing: -0.02em;
  line-height: 0.9;
  margin-bottom: 32px;
  font-weight: normal;
}

.proj-lv__meta {
  display: flex;
  flex-wrap: wrap;
  border-top: 1px solid var(--p-border);
  border-bottom: 1px solid var(--p-border);
  margin-bottom: 32px;
}

.proj-lv__meta-item {
  padding: 10px 20px;
  border-right: 1px solid var(--p-border);
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.proj-lv__meta-label {
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 3px;
  color: var(--p-text-dim);
  text-transform: uppercase;
}

.proj-lv__meta-value {
  font-family: var(--font-ui);
  font-size: 13px;
  letter-spacing: 1px;
  color: var(--p-text);
  text-transform: uppercase;
}

.proj-lv__desc {
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.9;
  color: var(--p-text-mid);
  letter-spacing: 0.5px;
  max-width: 600px;
  margin-bottom: 28px;
}

.proj-lv__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.proj-lv__tag {
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--p-text-dim);
  border: 1px solid var(--p-border-med);
  padding: 5px 10px;
  text-transform: uppercase;
}

/* ── RIGHT: minimap — thumbnails bottom-aligned, scroll upward as gallery advances ── */
.proj-filmstrip {
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;   /* stack from bottom */
  align-items: stretch;
  gap: 5px;
  padding: 40px 18px 24px 10px;
  scrollbar-width: none;
  background: var(--p-bg);
  border-left: 1px solid var(--p-border);
  position: relative;
}
.proj-filmstrip::-webkit-scrollbar { display: none; }

.proj-film-thumb {
  width: 100%;
  flex-shrink: 0;
  overflow: hidden;
  cursor: pointer;
  opacity: 0.25;
  transition: opacity 0.25s, border-color 0.25s;
  border-left: 2px solid transparent;
  position: relative;
  aspect-ratio: 4/5;
}

.proj-film-thumb:hover { opacity: 0.55; }

.proj-film-thumb--active {
  opacity: 1;
  border-left-color: var(--p-text);
}

.proj-film-thumb img,
.proj-film-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(0.5) contrast(0.92);
  transition: filter 0.25s;
}
.proj-film-thumb--active img,
.proj-film-thumb--active video {
  filter: none;
}

/* ── FOOTER ── */
.proj-footer {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  border-top: 1px solid var(--p-border);
  background: var(--p-bg);
  z-index: 100;
}

.proj-footer__left,
.proj-footer__right {
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--p-text-dim);
  text-transform: uppercase;
  min-width: 140px;
}
.proj-footer__right { text-align: right; }

.proj-footer__social {
  display: flex;
  align-items: center;
  gap: 0;
}

.proj-footer__social-link {
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 2.5px;
  color: var(--p-text-dim);
  text-decoration: none;
  text-transform: uppercase;
  padding: 0 10px;
  transition: color 0.15s;
}
.proj-footer__social-link:hover { color: var(--p-text); }

.proj-footer__social-sep {
  font-family: var(--font-ui);
  font-size: 10px;
  color: var(--p-border-med);
  user-select: none;
}

/* ── BLUR EDGES — light theme, top/bottom of gallery ── */
.proj-blur-edge {
  position: fixed;
  left: 0; right: 0;
  pointer-events: none;
  z-index: 98;
  height: 72px;
}
.proj-blur-edge--top { top: 46px; }
.proj-blur-edge--bot { bottom: 42px; }

.proj-blur-edge .bl-1 {
  backdrop-filter: blur(3px) brightness(1.0);
  -webkit-backdrop-filter: blur(3px) brightness(1.0);
}
.proj-blur-edge--top .bl-1 {
  mask-image: linear-gradient(to bottom, black 0%, black 50%, rgba(0,0,0,0.25) 75%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 50%, rgba(0,0,0,0.25) 75%, transparent 100%);
}
.proj-blur-edge--bot .bl-1 {
  mask-image: linear-gradient(to top, black 0%, black 50%, rgba(0,0,0,0.25) 75%, transparent 100%);
  -webkit-mask-image: linear-gradient(to top, black 0%, black 50%, rgba(0,0,0,0.25) 75%, transparent 100%);
}

.proj-blur-edge .bl-2 {
  backdrop-filter: blur(8px) brightness(1.0);
  -webkit-backdrop-filter: blur(8px) brightness(1.0);
}
.proj-blur-edge--top .bl-2 {
  mask-image: linear-gradient(to bottom, black 0%, black 28%, rgba(0,0,0,0.18) 55%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 28%, rgba(0,0,0,0.18) 55%, transparent 100%);
}
.proj-blur-edge--bot .bl-2 {
  mask-image: linear-gradient(to top, black 0%, black 28%, rgba(0,0,0,0.18) 55%, transparent 100%);
  -webkit-mask-image: linear-gradient(to top, black 0%, black 28%, rgba(0,0,0,0.18) 55%, transparent 100%);
}

.proj-blur-edge .bl-3 {
  backdrop-filter: blur(16px) brightness(1.0);
  -webkit-backdrop-filter: blur(16px) brightness(1.0);
}
.proj-blur-edge--top .bl-3 {
  mask-image: linear-gradient(to bottom, black 0%, black 10%, rgba(0,0,0,0.12) 32%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 10%, rgba(0,0,0,0.12) 32%, transparent 100%);
}
.proj-blur-edge--bot .bl-3 {
  mask-image: linear-gradient(to top, black 0%, black 10%, rgba(0,0,0,0.12) 32%, transparent 100%);
  -webkit-mask-image: linear-gradient(to top, black 0%, black 10%, rgba(0,0,0,0.12) 32%, transparent 100%);
}

.proj-blur-edge--top .bl-tint {
  background: linear-gradient(to bottom, rgba(2,3,2,0.55) 0%, rgba(2,3,2,0.18) 55%, transparent 100%);
}
.proj-blur-edge--bot .bl-tint {
  background: linear-gradient(to top, rgba(2,3,2,0.55) 0%, rgba(2,3,2,0.18) 55%, transparent 100%);
}

/* ══════════════════════════════════
   PROJ ARTBOARD — drag grid con fisheye en .proj-center
   Tamaño natural: portrait por altura del centro,
   landscape por ancho del centro. Fondo blanco = fin de contenido.
   ══════════════════════════════════ */

/* Contenedor de perspectiva; cubre todo .proj-gallery */
.proj-artboard {
  position: absolute;
  inset: 0;
  overflow: hidden;
  cursor: grab;
  user-select: none;
  perspective: 1000px;
  perspective-origin: 50% 50%;
  background: #fff; /* espacio vacío blanco al terminar la grilla */
}
.proj-artboard.is-dragging { cursor: grabbing; }

/* Objetivo del translate; preserve-3d aplicado por JS */
.proj-artboard-wrap {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  will-change: transform;
}

/*
  Grid flex-wrap sin columnas fijas.
  Los tamaños de cada pieza los define el media (max-width/max-height en JS):
  - Portrait → max-height = altura del artboard → ancho auto
  - Landscape → max-width  = ancho del artboard  → alto auto
  El flex-wrap los ordena según los tamaños resultantes.
*/
.proj-artboard-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: flex-start;
  gap: 6px;
  padding: 40px 40px 0;
  min-height: 100%;
}

/* Espaciador final — fondo blanco visible cuando el contenido termina */
.proj-artboard-spacer {
  flex-basis: 100%;
  height: 70vh;
  flex-shrink: 0;
  pointer-events: none;
}

/* ── MEDIA CARD ── */
.proj-mc {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  background: #020302;
  isolation: isolate;
  flex-shrink: 0;
  flex-grow: 0;
  display: flex;          /* altura = frame, la barra flota arriba */
  flex-direction: column;
}

/* Líneas CRT */
.proj-mc::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    180deg,
    transparent 0px, transparent 2px,
    rgba(0,0,0,0.08) 2px, rgba(0,0,0,0.08) 3px
  );
  pointer-events: none;
  z-index: 10;
  mix-blend-mode: multiply;
}

/* Viñeta perimetral */
.proj-mc::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 46%, transparent 32%, rgba(0,0,0,0.72) 100%);
  pointer-events: none;
  z-index: 9;
}

/* Barra de estado superior */
.proj-mc__bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 11;
  display: flex;
  align-items: center;
  padding: 10px 12px 18px;
  background: linear-gradient(to bottom, rgba(0,0,0,0.68) 0%, transparent 100%);
  overflow: hidden;
  gap: 0;
  pointer-events: none;
}
.proj-mc__bar-lbl {
  font-family: 'Share Tech Mono', monospace;
  font-size: 11px;
  letter-spacing: 2px;
  color: rgba(200,255,0,0.85);
  padding-right: 10px;
  white-space: nowrap;
  flex-shrink: 0;
  text-shadow: 0 1px 6px rgba(0,0,0,0.9);
}
.proj-mc__bar-sep {
  display: block;
  width: 1px;
  height: 11px;
  background: rgba(200,255,0,0.35);
  flex-shrink: 0;
}
.proj-mc__bar-type {
  font-family: 'Share Tech Mono', monospace;
  font-size: 10px;
  letter-spacing: 1.5px;
  color: rgba(200,255,0,0.65);
  padding-left: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 6px rgba(0,0,0,0.9);
}

/* Botón de audio flotante sobre cada video */
.proj-mc__audio-btn {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 2px;
  color: rgba(200,255,0,0.55);
  background: rgba(2,3,2,0.72);
  border: 1px solid rgba(200,255,0,0.28);
  padding: 7px 20px;
  cursor: pointer;
  white-space: nowrap;
  backdrop-filter: blur(6px);
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.proj-mc__audio-btn:hover {
  color: rgba(200,255,0,1);
  border-color: rgba(200,255,0,0.65);
  background: rgba(2,3,2,0.88);
}
.proj-mc__audio-btn.is-on {
  color: rgba(200,255,0,1);
  border-color: rgba(200,255,0,0.70);
  background: rgba(10,20,2,0.88);
}

/*
  Marco: sin tamaño forzado ni aspect-ratio.
  El media define el tamaño (max-width / max-height setteados por JS
  según el ancho o altura real del artboard en ese momento).
*/
.proj-mc__frame {
  display: block;
  overflow: hidden;
  line-height: 0; /* elimina gap bajo inline-block */
}

/*
  Media sin filter — colores reales.
  max-width y max-height se asignan por JS al vuelo
  según las dimensiones reales del artboard.
*/
.proj-mc__media {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;   /* fallback antes de que JS asigne el valor real */
  max-height: 100vh; /* fallback */
  object-fit: unset; /* sin recorte — tamaño natural */
}

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
  body.proj-page { overflow-y: auto; }
  .proj-layout {
    position: static;
    grid-template-columns: 1fr;
    min-height: calc(100vh - 88px);
  }
  .proj-index { flex-direction: row; justify-content: flex-start; overflow-x: auto; overflow-y: hidden; height: 44px; border-bottom: 1px solid var(--p-border); padding: 0 12px; }
  .proj-index__item { width: auto; border-left: none; border-bottom: 2px solid transparent; padding: 0 12px; line-height: 44px; }
  .proj-index__item--active { border-left-color: transparent; border-bottom-color: var(--p-text); }
  .proj-blur-edge { display: none; }
  .proj-gallery { position: relative; inset: auto; bottom: auto; min-height: 60vw; }
  .proj-desc-bar { position: relative; bottom: auto; left: auto; right: auto; height: auto; max-height: none; }
  .proj-slide { position: relative; inset: auto; min-height: 60vw; opacity: 1; pointer-events: auto; display: none; }
  .proj-slide--active, .proj-slide--incoming { display: flex; }
  .proj-slide__wrap { position: relative; inset: auto; clip-path: none; width: 100%; }
  .proj-slide__card { position: relative; top: auto; left: auto; transform: none; height: auto; width: 100%; }
  .proj-slide__card img,
  .proj-slide__card video { height: auto; width: 100%; }
  .proj-filmstrip { display: none; }
}