:root{
  --paper:#FBF9F5;
  --paper-2:#F4F0EA;
  --ink:#1a1a18;
  --muted:#6a645e;
  --rule:#3a3733;
  --accent:#a8423f;

  --page:1480px;
  --pad:clamp(20px,4vw,64px);
}

*{
  box-sizing:border-box;
}

html{
  background:var(--paper);
  color:var(--ink);
}

body{
  margin:0;
  min-height:100vh;
  background:var(--paper);
  color:var(--ink);
  font-family:"Courier New",Courier,monospace;
}

button,
input,
select,
textarea{
  font:inherit;
}

a{
  color:inherit;
  text-decoration:none;
}

img{
  max-width:100%;
}


/* HEADER */

.site-header{
  position:relative;

  width:min(
    calc(100% - (var(--pad) * 2)),
    var(--page)
  );

  margin:0 auto;

  min-height:94px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  border-bottom:1px solid
    color-mix(
      in srgb,
      var(--rule) 35%,
      transparent
    );
}

.brand{
  position:absolute;
  left:50%;
  top:50%;

  display:flex;
  align-items:center;

  transform:translate(-50%,-50%);
}

.brand img{
  display:block;
  width:132px;
  height:auto;
}

.site-nav{
  display:flex;
  gap:22px;

  font-size:12px;
  letter-spacing:.09em;
  text-transform:uppercase;
}

.site-nav a{
  opacity:.55;
}

.site-nav a:hover,
.site-nav a[aria-current="page"]{
  opacity:1;
}


/* SALA */

.available-room{
  width:min(
    calc(100% - (var(--pad) * 2)),
    var(--page)
  );

  margin:0 auto;
}

.room-intro{
  min-height:72vh;

  display:grid;

  grid-template-columns:
    minmax(0,1fr)
    minmax(260px,.45fr);

  grid-template-rows:
    auto
    1fr
    auto;

  column-gap:80px;

  padding:
    clamp(80px,12vh,160px)
    0
    60px;
}

.eyebrow{
  margin:0 0 20px;

  font-size:9px;
  letter-spacing:.16em;
  text-transform:uppercase;

  color:var(--muted);
}

.room-intro h1{
  grid-column:1;

  max-width:900px;

  margin:0;

  font-family:Georgia,"Times New Roman",serif;
  font-weight:400;

  font-size:clamp(48px,4.9vw,74px);
  line-height:.98;
  letter-spacing:-.03em;
}

.room-intro__text{
  grid-column:2;
  grid-row:2;

  align-self:end;

  max-width:440px;

  margin:0;

  color:var(--muted);

  font-size:clamp(14px,1.05vw,16px);
  line-height:1.7;
}

.room-intro__count{
  grid-column:1 / -1;

  margin-top:60px;

  font-size:9px;
  letter-spacing:.12em;
  text-transform:uppercase;

  color:var(--muted);
}


/* EXHIBIDOR */

.available-grid{
  display:grid;

  grid-template-columns:
    repeat(12,minmax(0,1fr));

  column-gap:clamp(16px,2vw,34px);
  row-gap:clamp(100px,16vw,240px);

  padding:
    60px
    0
    clamp(140px,20vw,300px);
}

.available-card{
  position:relative;

  display:flex;
  flex-direction:column;

  cursor:pointer;
}

.available-card button{
  all:unset;

  display:block;
  cursor:pointer;
}

.available-card__image{
  position:relative;

  display:flex;
  align-items:center;
  justify-content:center;

  min-height:220px;

  overflow:hidden;

  background:
    color-mix(
      in srgb,
      var(--paper-2) 60%,
      transparent
    );
}

.available-card__image img{
  display:block;

  width:100%;
  height:auto;

  transition:transform .65s ease;
}

.available-card:hover
.available-card__image img{
  transform:scale(1.012);
}

.available-card__meta{
  display:grid;

  grid-template-columns:
    1fr auto;

  gap:12px;

  margin-top:15px;

  font-size:10px;
  line-height:1.5;
}

.available-card__title{
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(17px,1.6vw,24px);
}

.available-card__year,
.available-card__state{
  color:var(--muted);
}

.available-card__state{
  margin-top:5px;

  font-size:8px;
  letter-spacing:.1em;
  text-transform:uppercase;
}


/* TAMAÑOS */

.available-card--feature{
  grid-column:2 / span 10;
}

.available-card--large{
  grid-column:span 7;
}

.available-card--medium{
  grid-column:span 5;
}

.available-card--small{
  grid-column:span 4;
}


/* DESFASES */

.available-card--shift-0{
  margin-top:0;
}

.available-card--shift-1{
  margin-top:clamp(50px,7vw,110px);
}

.available-card--shift-2{
  margin-top:clamp(10px,3vw,48px);
}

.available-card--shift-3{
  margin-top:clamp(90px,11vw,170px);
}


/* UNA SOLA OBRA */

.available-grid.is-single
.available-card{
  grid-column:4 / span 6;
  margin-top:0;
}


/* EMPTY / ERROR */

.available-empty,
.available-error{
  width:min(
    calc(100% - (var(--pad) * 2)),
    760px
  );

  margin:120px auto 220px;

  text-align:center;

  color:var(--muted);

  font-size:11px;
}

.available-error button{
  margin-top:20px;

  padding:10px 16px;

  border:1px solid var(--ink);
  background:transparent;

  cursor:pointer;
}


/* FICHA */

.work-view{
  width:min(
    calc(100% - (var(--pad) * 2)),
    var(--page)
  );

  margin:0 auto;

  padding-bottom:clamp(140px,18vw,260px);
}

.work-view__header{
  min-height:100px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  border-bottom:1px solid
    color-mix(
      in srgb,
      var(--rule) 22%,
      transparent
    );
}

.back-button{
  border:0;
  background:none;

  padding:0;

  cursor:pointer;

  font-size:10px;
}

.work-view__state{
  margin:0;

  font-size:9px;
  letter-spacing:.12em;
  text-transform:uppercase;

  color:var(--muted);
}


/* HERO */

.work-view__hero{
  display:grid;

  grid-template-columns:
    minmax(0,1.45fr)
    minmax(280px,.55fr);

  gap:clamp(40px,7vw,120px);

  padding:clamp(70px,9vw,140px) 0;
}

.work-main{
  margin:0;

  display:flex;
  align-items:center;
  justify-content:center;

  min-height:55vh;
}

.work-main img{
  display:block;

  max-width:100%;
  max-height:78vh;

  object-fit:contain;
}

.work-heading{
  align-self:end;
  padding-bottom:6vh;
}

.work-heading h1{
  margin:0;

  font-family:Georgia,"Times New Roman",serif;
  font-weight:400;

  font-size:clamp(50px,6vw,100px);
  line-height:.95;
  letter-spacing:-.04em;
}

.work-year{
  margin:22px 0 0;

  font-size:11px;

  color:var(--muted);
}


/* GALERÍA */

.work-gallery{
  display:grid;

  grid-template-columns:
    repeat(12,minmax(0,1fr));

  gap:clamp(18px,3vw,50px);

  padding:
    clamp(50px,7vw,100px)
    0
    clamp(100px,14vw,210px);
}

.work-gallery__item{
  margin:0;
}

.work-gallery__item:nth-child(4n + 1){
  grid-column:1 / span 5;
}

.work-gallery__item:nth-child(4n + 2){
  grid-column:8 / span 5;
  margin-top:90px;
}

.work-gallery__item:nth-child(4n + 3){
  grid-column:3 / span 4;
  margin-top:20px;
}

.work-gallery__item:nth-child(4n + 4){
  grid-column:7 / span 5;
  margin-top:130px;
}

.work-gallery__item button{
  all:unset;

  display:block;
  width:100%;

  cursor:pointer;
}

.work-gallery__item img{
  display:block;
  width:100%;
}

.work-gallery__caption{
  margin-top:9px;

  color:var(--muted);

  font-size:8px;
  line-height:1.5;
}


/* INFORMACIÓN */

.work-information{
  display:grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap:clamp(50px,12vw,180px);

  max-width:1060px;

  margin:0 auto;

  padding:clamp(70px,9vw,140px) 0;

  border-top:1px solid
    color-mix(
      in srgb,
      var(--rule) 25%,
      transparent
    );

  border-bottom:1px solid
    color-mix(
      in srgb,
      var(--rule) 25%,
      transparent
    );
}

.work-sheet dl{
  margin:0;
}

.work-sheet dl > div{
  display:grid;

  grid-template-columns:
    minmax(100px,.4fr)
    1fr;

  gap:20px;

  padding:10px 0;

  border-bottom:1px solid
    color-mix(
      in srgb,
      var(--rule) 12%,
      transparent
    );
}

.work-sheet dt{
  color:var(--muted);
  font-size:9px;
}

.work-sheet dd{
  margin:0;

  font-size:10px;
  line-height:1.55;
}


/* ADQUISICIÓN */

.work-price{
  margin:0 0 18px;

  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(30px,3vw,45px);
}

.work-type{
  margin:0 0 35px;

  color:var(--muted);
  font-size:10px;
}

.work-delivery{
  display:grid;
  gap:9px;

  font-size:10px;
  line-height:1.6;
}

.work-delivery p{
  margin:0;
}


/* TEXTOS */

.work-description,
.work-note{
  width:min(
    calc(100% - 40px),
    760px
  );

  margin:
    clamp(100px,13vw,190px)
    auto
    0;
}

.work-description > p:last-child,
.work-note > p:last-child{
  margin:0;

  font-family:Georgia,"Times New Roman",serif;

  font-size:clamp(20px,2.5vw,32px);
  line-height:1.55;
}


/* CTA FUTURO */

.acquisition-coming{
  width:min(
    calc(100% - 40px),
    760px
  );

  margin:
    clamp(100px,14vw,200px)
    auto
    0;

  padding:22px 0;

  text-align:center;

  border-top:1px solid var(--ink);
  border-bottom:1px solid var(--ink);

  font-size:10px;
  letter-spacing:.1em;
  text-transform:uppercase;
}


/* FOOTER */

.site-footer{
  position:relative;

  width:min(
    calc(100% - (var(--pad) * 2)),
    var(--page)
  );

  margin:0 auto;

  min-height:210px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-top:1px solid
    color-mix(
      in srgb,
      var(--rule) 20%,
      transparent
    );

  color:var(--muted);

  font-size:10px;
}

.site-footer__center{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  gap:18px;

  text-align:center;
}

.site-footer__logo{
  display:flex;
  align-items:center;
  justify-content:center;
}

.site-footer__logo img{
  display:block;
  width:148px;
  height:auto;
}

.site-footer__note{
  max-width:520px;

  margin:0;

  color:var(--muted);

  font-family:Georgia,"Times New Roman",serif;
  font-size:13px;
  font-style:italic;
  line-height:1.55;

  opacity:.82;
}

.site-footer__credit{
  margin:0;

  color:var(--muted);

  font-size:9px;
  letter-spacing:.1em;
  text-transform:uppercase;

  opacity:.7;
}


/* RESPONSIVE */

@media (max-width:800px){

  .site-header{
    min-height:82px;
  }

  .brand img{
    width:108px;
  }

  .site-nav{
    gap:12px;
  }

  .site-footer{
    min-height:185px;
  }

  .site-footer__logo img{
    width:118px;
  }

  .site-footer__note{
    max-width:320px;
    font-size:12px;
  }

  .room-intro{
    min-height:auto;

    display:block;

    padding:80px 0 100px;
  }

  .room-intro__text{
    margin-top:35px;
  }

  .room-intro__count{
    margin-top:40px;
  }

  .available-grid{
    display:block;
  }

  .available-card,
  .available-grid.is-single
  .available-card{
    width:100%;
    margin:0 0 100px;
  }

  .work-view__hero{
    display:block;
  }

  .work-main{
    min-height:auto;
  }

  .work-heading{
    margin-top:55px;
    padding:0;
  }

  .work-gallery{
    grid-template-columns:
      repeat(2,minmax(0,1fr));

    gap:30px 16px;
  }

  .work-gallery__item:nth-child(n){
    grid-column:auto;
    margin:0;
  }

  .work-information{
    display:block;
  }

  .work-acquisition{
    margin-top:70px;
  }
}

@media (max-width:520px){

  .site-nav a:not(
    [aria-current="page"]
  ){
    display:none;
  }

  .work-gallery{
    display:block;
  }

  .work-gallery__item{
    margin-bottom:45px !important;
  }
}


/* =====================================================
   V2 · REBALANCE DE ESCALA
   Menos monumental, mayor legibilidad
   ===================================================== */


/* ---------- TIPOGRAFÍA GENERAL ---------- */

.site-nav{
  font-size:12px;
}

.eyebrow{
  font-size:10px;
}

.room-intro .eyebrow{
  font-size:11px;
}

.room-intro__text{
  font-size:15px;
  line-height:1.7;
}

.room-intro__count{
  font-size:11px;
}


/* ---------- EXHIBIDOR ---------- */

.available-grid.is-single
.available-card{
  grid-column:5 / span 4;
}

.available-card__title{
  font-size:clamp(20px,1.7vw,27px);
}

.available-card__meta{
  font-size:12px;
}

.available-card__state{
  font-size:9px;
}


/* ---------- FICHA · HERO ---------- */

.work-view__hero{
  grid-template-columns:
    minmax(0,1fr)
    minmax(320px,.72fr);

  gap:clamp(50px,7vw,100px);

  max-width:1180px;
  margin:0 auto;

  padding:
    clamp(70px,8vw,115px)
    0
    clamp(90px,10vw,140px);
}

.work-main{
  min-height:auto;
}

.work-main img{
  width:auto;
  max-width:min(100%,520px);
  max-height:68vh;
}

.work-heading{
  padding-bottom:3vh;
}

.work-heading h1{
  font-size:clamp(48px,5vw,76px);
  line-height:.98;
}

.work-year{
  font-size:13px;
}


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

.work-gallery{
  max-width:1120px;
  margin:0 auto;

  gap:clamp(26px,4vw,60px);

  padding:
    40px
    0
    clamp(100px,11vw,160px);
}

.work-gallery__item:nth-child(4n + 1){
  grid-column:2 / span 4;
}

.work-gallery__item:nth-child(4n + 2){
  grid-column:8 / span 4;
  margin-top:55px;
}

.work-gallery__item:nth-child(4n + 3){
  grid-column:3 / span 3;
  margin-top:15px;
}

.work-gallery__item:nth-child(4n + 4){
  grid-column:8 / span 3;
  margin-top:75px;
}

.work-gallery__item img{
  width:100%;
  max-height:520px;
  object-fit:contain;
}

.work-gallery__caption{
  margin-top:10px;

  font-size:10px;
  line-height:1.5;
}


/* ---------- FICHA + ADQUISICIÓN ---------- */

.work-information{
  max-width:1080px;

  gap:clamp(60px,9vw,130px);

  padding:
    clamp(60px,7vw,100px)
    0;
}

.work-sheet dl > div{
  grid-template-columns:
    minmax(115px,.38fr)
    1fr;

  padding:13px 0;
}

.work-sheet dt{
  font-size:11px;
}

.work-sheet dd{
  font-size:13px;
  line-height:1.55;
}

.work-price{
  font-size:clamp(34px,3.2vw,48px);
}

.work-type{
  font-size:12px;
}

.work-delivery{
  gap:12px;

  font-size:12px;
  line-height:1.65;
}


/* ---------- NAVEGACIÓN FICHA ---------- */

.back-button{
  font-size:11px;
}

.work-view__state{
  font-size:10px;
}


/* ---------- CTA ---------- */

.acquisition-coming{
  max-width:620px;

  font-size:11px;

  padding:24px 0;
}


/* ---------- FOOTER ---------- */

.site-footer{
  font-size:10px;
}


/* =====================================================
   TABLET / MÓVIL
   ===================================================== */

@media (max-width:800px){

  .available-grid.is-single
  .available-card{
    width:min(100%,540px);
    margin-left:auto;
    margin-right:auto;
  }

  .work-view__hero{
    max-width:620px;
  }

  .work-main img{
    max-width:min(100%,460px);
    max-height:none;
  }

  .work-heading h1{
    font-size:clamp(42px,11vw,68px);
  }

  .work-gallery{
    max-width:620px;
  }

  .work-gallery__item img{
    max-height:none;
  }

  .work-sheet dt{
    font-size:11px;
  }

  .work-sheet dd,
  .work-type,
  .work-delivery{
    font-size:12px;
  }
}


/* =====================================================
   V3 · NAVEGACIÓN DE IMÁGENES
   ===================================================== */

.work-main{
  flex-direction:column;
}

.work-media-nav{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;

  margin-top:18px;

  font-size:10px;
  color:var(--muted);
}

.work-media-nav[hidden]{
  display:none;
}

.work-media-nav button{
  width:30px;
  height:30px;

  display:grid;
  place-items:center;

  padding:0;

  border:1px solid
    color-mix(
      in srgb,
      var(--rule) 25%,
      transparent
    );

  background:transparent;
  color:var(--ink);

  cursor:pointer;
}

.work-media-nav button:disabled{
  opacity:.25;
  cursor:default;
}


/* Tira pequeña de imágenes */

.work-gallery{
  display:flex;

  justify-content:center;
  align-items:flex-start;

  gap:12px;

  width:min(100%,720px);

  margin:0 auto;

  padding:
    10px
    0
    clamp(80px,9vw,130px);

  overflow-x:auto;

  scrollbar-width:thin;
}

.work-gallery__item,
.work-gallery__item:nth-child(n){
  flex:0 0 auto;

  width:96px;

  margin:0;
}

.work-gallery__item button{
  display:block;

  width:96px;
  height:96px;

  padding:4px;

  border:1px solid transparent;

  opacity:.55;

  transition:
    opacity .2s ease,
    border-color .2s ease;
}

.work-gallery__item button:hover{
  opacity:1;
}

.work-gallery__item.is-active button{
  opacity:1;

  border-color:
    var(--ink);
}

.work-gallery__item img{
  width:100%;
  height:100%;

  max-height:none;

  object-fit:contain;

  background:#fff;
}

.work-gallery__caption{
  display:none;
}


/* Cambio sutil de imagen principal */

#workMainImage{
  transition:
    opacity .16s ease;
}

#workMainImage.is-changing{
  opacity:.28;
}


/* =====================================================
   CTA DE ADQUISICIÓN
   ===================================================== */

.acquisition-coming{
  display:flex;
  flex-direction:column;

  max-width:620px;

  padding:0;

  border:0;
}

#acquisitionFallback{
  padding:23px 0;

  border-top:1px solid var(--ink);
  border-bottom:1px solid var(--ink);
}

.acquisition-payment-link{
  width:100%;

  display:flex;
  align-items:center;
  justify-content:space-between;

  padding:22px 4px;

  border-top:1px solid var(--ink);
  border-bottom:1px solid var(--ink);

  color:var(--ink);

  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;

  transition:
    padding .2s ease,
    background .2s ease;
}

.acquisition-payment-link:hover{
  padding-left:12px;
  padding-right:12px;

  background:
    color-mix(
      in srgb,
      var(--paper-2) 70%,
      transparent
    );
}

.acquisition-payment-note{
  margin-top:10px;

  text-align:left;

  color:var(--muted);

  font-size:9px;
  letter-spacing:.04em;
  text-transform:none;
}


@media (max-width:520px){

  .work-gallery{
    display:flex;
    justify-content:flex-start;

    width:100%;

    padding-bottom:70px;
  }

  .work-gallery__item,
  .work-gallery__item:nth-child(n){
    width:82px;
    margin:0 !important;
  }

  .work-gallery__item button{
    width:82px;
    height:82px;
  }
}