*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

:root {
  --blush:     #e8c4b8;
  --rose:      #e5989b;
  --warm-gray: #9e8f85;
  --ink:       #2a1e16;
  --museum-bg: #f7f4f0;
  --wall:      #edeae5;
}

html, body { background: #ffffff; }
body {
  color: var(--ink);
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  overflow-x: hidden;
  animation: fadeInPage 0.5s ease forwards;
}
@keyframes fadeInPage { from{opacity:0} to{opacity:1} }

/* ═══════════ PAGE FADE ═══════════ */
#page-fade {
  position: fixed; inset: 0;
  background: #fff; z-index: 9999;
  opacity: 0; pointer-events: none;
  transition: opacity 0.45s ease;
}
#page-fade.fade-out { opacity: 1; pointer-events: all; }

/* ═══════════ PARTICLES ═══════════ */
.particle {
  position: fixed; border-radius: 50%;
  pointer-events: none; z-index: 99999;
  animation: particleBurst 0.7s ease-out forwards;
}
@keyframes particleBurst {
  0%   { transform: translate(0,0) scale(1); opacity: 1; }
  100% { transform: translate(var(--tx), var(--ty)) scale(0); opacity: 0; }
}

/* ═══════════ NAVBAR ═══════════ */
#navbar {
  position: fixed;
  top: 18px; left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  width: 94%; max-width: 1400px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 36px; height: 56px;
  background: transparent;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border-radius: 100px;
  border: 1px solid transparent;
  box-shadow: none;
  transition:
    width 0.65s cubic-bezier(.22,1,.36,1),
    max-width 0.65s cubic-bezier(.22,1,.36,1),
    top 0.55s ease, background 0.5s ease,
    backdrop-filter 0.5s ease, -webkit-backdrop-filter 0.5s ease,
    border-color 0.5s ease, box-shadow 0.5s ease;
  will-change: width, background;
  opacity: 0;
  overflow: visible;
}
#navbar.ready { opacity: 1; transition: opacity 0.4s ease; }

.nav-logo {
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px; font-weight: 400; letter-spacing: 3px;
  color: var(--ink); text-decoration: none; cursor: pointer;
  white-space: nowrap; transition: color 0.45s ease;
}
.nav-logo em { font-style: italic; color: var(--rose); transition: color 0.45s ease; }

.nav-links { display:flex; align-items:center; gap:36px; list-style:none; }
.nav-links a {
  font-family: 'Jost', sans-serif; font-weight:300; font-size:11px;
  letter-spacing:2.5px; text-transform:uppercase;
  color: var(--warm-gray); text-decoration:none;
  transition: color 0.4s ease; white-space:nowrap;
}
.nav-links a:hover { color: var(--ink); }

/* ═══════════ HAMBURGER & DRAWER ═══════════ */
.nav-burger {
  display:none; flex-direction:column; justify-content:center;
  gap:5px; cursor:pointer; padding:6px; flex-shrink:0; z-index:1002;
}
.nav-burger span {
  display:block; width:22px; height:2px; background:var(--ink);
  border-radius:2px; transition:transform .3s,opacity .3s,background .4s;
}
.nav-burger.open span:nth-child(1){ transform:rotate(45deg) translate(5px,5px); }
.nav-burger.open span:nth-child(2){ opacity:0; }
.nav-burger.open span:nth-child(3){ transform:rotate(-45deg) translate(5px,-5px); }

.nav-drawer {
  display:none; position:fixed; inset:0; z-index:9998;
  background:rgba(249,244,238,.97);
  backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  flex-direction:column; align-items:center; justify-content:center; gap:32px;
}
.nav-drawer.open { display:flex; animation:drawerIn .3s ease forwards; }
@keyframes drawerIn { from{opacity:0;transform:translateY(-6px)} to{opacity:1;transform:none} }

.nav-drawer a {
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(32px,8vw,52px); font-weight:300;
  color:var(--ink); text-decoration:none; letter-spacing:2px; transition:color .2s;
}
.nav-drawer a:hover { color:var(--rose); }

.nav-drawer-close {
  position:absolute; top:12px; right:16px;
  background:none; border:none;
  font-size:48px; line-height:1; color:var(--warm-gray);
  cursor:pointer; z-index:9999;
  padding:12px 18px; min-width:64px; min-height:64px;
  display:flex; align-items:center; justify-content:center;
  transition:color .2s;
}
.nav-drawer-close:hover { color:var(--ink); }

/* ═══════════ MUSEUM HERO ═══════════ */
.museum-hero {
  height: 100vh;
  background: var(--ink);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  position: relative; overflow: hidden;
}

.museum-hero::before {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  opacity: 0.4; pointer-events: none;
}

.museum-hero-content { position: relative; z-index: 2; text-align: center; }

.museum-tag {
  font-family: 'Jost', sans-serif; font-weight: 200;
  font-size: 10px; letter-spacing: 6px; text-transform: uppercase;
  color: rgba(255,255,255,.4); margin-bottom: 32px;
  display: flex; align-items: center; gap: 16px; justify-content: center;
}
.museum-tag::before,
.museum-tag::after {
  content: ''; display: inline-block;
  width: 40px; height: 1px;
  background: rgba(255,255,255,.2);
}

.museum-hero-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(52px, 9vw, 110px);
  font-weight: 300; color: #fff;
  line-height: 1; letter-spacing: -2px;
  margin-bottom: 24px;
}
.museum-hero-title em { font-style: italic; color: var(--blush); }

.museum-hero-sub {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic; font-size: clamp(16px, 2vw, 22px);
  color: rgba(255,255,255,.45); letter-spacing: 1px;
}

.museum-corner {
  position: absolute;
  font-size: 10px; letter-spacing: 3px;
  text-transform: uppercase; color: rgba(255,255,255,.25);
  font-family: 'Jost', sans-serif; font-weight: 200;
}
.museum-corner.tl { top: 32px; left: 40px; }
.museum-corner.tr { top: 32px; right: 40px; text-align: right; }
.museum-corner.bl { bottom: 32px; left: 40px; }
.museum-corner.br { bottom: 32px; right: 40px; text-align: right; }

.museum-scroll {
  position: absolute; bottom: 40px; left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  color: rgba(255,255,255,.3);
  font-size: 9px; letter-spacing: 3px; text-transform: uppercase;
}
.museum-scroll-line {
  width: 1px; height: 40px;
  background: rgba(255,255,255,.15);
  position: relative; overflow: hidden;
}
.museum-scroll-line::after {
  content: ''; position: absolute; top: -100%; left: 0;
  width: 100%; height: 100%; background: var(--rose);
  animation: linedown 1.8s ease-in-out infinite;
}
@keyframes linedown { 0%{top:-100%} 100%{top:100%} }

/* ═══════════ SALA DIVIDER ═══════════ */
.sala-divider {
  background: var(--museum-bg);
  padding: 80px 60px 60px;
  display: flex; align-items: center; gap: 32px;
  border-top: 1px solid rgba(0,0,0,.06);
}
.sala-number {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(80px, 12vw, 140px);
  font-weight: 300; color: rgba(0,0,0,.06);
  line-height: 1; flex-shrink: 0;
  user-select: none;
}
.sala-info { flex: 1; }
.sala-label {
  font-size: 10px; letter-spacing: 5px; text-transform: uppercase;
  color: var(--rose); margin-bottom: 8px;
}
.sala-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 300; color: var(--ink); line-height: 1.1;
}
.sala-title em { font-style: italic; }
.sala-desc {
  font-size: 14px; color: var(--warm-gray);
  line-height: 1.8; margin-top: 12px; max-width: 480px;
}
.sala-divider-line {
  flex: 1; height: 1px;
  background: linear-gradient(to right, rgba(0,0,0,.1), transparent);
}

/* ═══════════ MUSEUM WALL ═══════════ */
.museum-wall {
  background: var(--wall);
  padding: 60px 60px 80px;
  position: relative;
  contain: layout style;
}

.wall-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
}

/* ═══════════ ARTWORK ═══════════ */
.artwork {
  position: relative;
  cursor: pointer;
  transition: transform 0.4s cubic-bezier(.22,1,.36,1);
  will-change: transform;
}
.artwork:hover { transform: translateY(-6px); }

.artwork-frame {
  background: #fff;
  padding: 16px 16px 52px 16px;
  box-shadow:
    0 2px 0 rgba(0,0,0,.04),
    0 8px 32px rgba(0,0,0,.10),
    0 24px 64px rgba(0,0,0,.06);
}

.artwork-img {
  width: 100%; display: block;
  overflow: hidden;
}
.artwork-img img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform 0.6s ease;
}
.artwork:hover .artwork-img img { transform: scale(1.03); }

.artwork-cedula {
  position: absolute;
  bottom: 10px; left: 16px; right: 16px;
  display: flex; flex-direction: column; gap: 2px;
}
.cedula-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 13px; font-weight: 400;
  color: var(--ink); letter-spacing: 0.5px;
}
.cedula-date {
  font-family: 'Jost', sans-serif;
  font-size: 10px; letter-spacing: 2px;
  color: var(--warm-gray); text-transform: uppercase;
}

.art-xl  { grid-column: span 6; }
.art-lg  { grid-column: span 5; }
.art-md  { grid-column: span 4; }
.art-sm  { grid-column: span 3; }

.sala1-right {
  grid-column: span 6;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.art-xl  .artwork-img { aspect-ratio: 4/3; }
.art-lg  .artwork-img { aspect-ratio: 3/4; }
.art-md  .artwork-img { aspect-ratio: 4/3; }
.art-sm  .artwork-img { aspect-ratio: 3/4; }

.artwork.tilt-l { transform: rotate(-1.2deg); }
.artwork.tilt-r { transform: rotate(1deg); }
.artwork.tilt-l:hover { transform: rotate(-1.2deg) translateY(-6px); }
.artwork.tilt-r:hover { transform: rotate(1deg) translateY(-6px); }

/* ═══════════ SALA FINAL ═══════════ */
.sala-final {
  background: var(--ink);
  padding: 120px 60px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; position: relative; overflow: hidden;
}

.sala-final-frame {
  background: #fff;
  padding: 20px 20px 70px 20px;
  box-shadow: 0 32px 120px rgba(0,0,0,.5);
  max-width: 600px; width: 100%;
  margin-bottom: 60px;
  position: relative; z-index: 2;
}
.sala-final-frame img {
  width: 100%; aspect-ratio: 4/3;
  object-fit: cover; display: block;
}
.sala-final-cedula {
  position: absolute;
  bottom: 14px; left: 20px; right: 20px;
  display: flex; justify-content: space-between; align-items: flex-end;
}
.sala-final-cedula .cedula-title { font-size: 15px; }

.sala-final-quote {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(22px, 3.5vw, 42px);
  font-weight: 300; font-style: italic;
  color: rgba(255,255,255,.85);
  max-width: 680px; line-height: 1.4;
  position: relative; z-index: 2;
}
.sala-final-quote em { color: var(--blush); font-style: normal; }

.sala-final-attr {
  margin-top: 24px;
  font-size: 11px; letter-spacing: 4px; text-transform: uppercase;
  color: rgba(255,255,255,.3);
  position: relative; z-index: 2;
}

.sala-final::before {
  content: '';
  position: absolute;
  top: 0; left: 50%; transform: translateX(-50%);
  width: 600px; height: 600px;
  background: radial-gradient(ellipse, rgba(229,152,155,.12), transparent 70%);
  pointer-events: none;
}

/* ═══════════ REVEAL ANIMATION ═══════════ */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.8s ease, transform 0.8s ease;
  will-change: opacity, transform;
}
.reveal.visible {
  opacity: 1;
  transform: none;
  will-change: auto;
}
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* ═══════════ RESPONSIVE ═══════════ */
@media (max-width:640px) {
  .nav-links { display:none !important; }
  .nav-burger { display:flex; }
  #navbar { overflow:visible !important; }
}

@media (min-width:641px) and (max-width:860px) {
  #navbar { width:94% !important; padding:0 20px !important; height:50px; }
  .nav-links { gap:16px; }
  .nav-links a { font-size:10px; letter-spacing:1.5px; }
  .nav-logo { font-size:17px; }
}

@media (max-width:768px) {
  .museum-corner.tr,
  .museum-corner.bl { display: none; }
  .museum-corner.tl { font-size:9px; left:20px; top:80px; }
  .museum-corner.br { font-size:9px; right:20px; bottom:20px; }
  .museum-hero-title { letter-spacing: -1px; }
  .museum-tag { font-size: 9px; letter-spacing: 4px; }
  .sala-divider { padding:50px 24px 40px; gap:16px; }
  .sala-number  { font-size:clamp(60px,15vw,100px); }
  .sala-title   { font-size:clamp(22px,5vw,36px); }
  .sala-divider-line { display:none; }
  .museum-wall  { padding:40px 24px 60px; }
  .sala-final   { padding:80px 24px; }
  .sala-final-frame { max-width:100%; }
  .sala-final-quote { font-size:clamp(18px,4vw,28px); }
}

@media (max-width:480px) {
  .museum-corner { display: none; }
  .wall-grid { grid-template-columns:1fr; gap:20px; }
  .art-xl,.art-lg,.art-md,.art-sm { grid-column:span 1; }
  .artwork-frame { padding:10px 10px 44px; }
  .museum-wall  { padding:30px 16px 50px; }
  .sala1-right  { grid-column:span 1; }
}

@media (max-width:900px) {
  .wall-grid { grid-template-columns:repeat(6,1fr); gap:16px; }
  .art-xl, .art-lg { grid-column:span 6; }
  .art-md  { grid-column:span 3; }
  .art-sm  { grid-column:span 3; }
  .artwork.tilt-l, .artwork.tilt-r { transform:none; }
  .artwork.tilt-l:hover, .artwork.tilt-r:hover { transform:translateY(-4px); }
  .sala1-right { grid-column:span 6; gap:16px; }
}