@font-face{
    font-family:'Digistick';
    src:url('assets/fonts/Digistick.ttf') format('truetype');
    font-style:normal; font-weight:400;
  }
  @font-face{
    font-family:'Digistick';
    src:url('assets/fonts/Digistick Italic.ttf') format('truetype');
    font-style:italic; font-weight:400;
  }
  @font-face{
    font-family:'Digistick Oblique';
    src:url('assets/fonts/Digistick Oblique.ttf') format('truetype');
    font-style:normal; font-weight:400;
  }

  :root{
    --ceiling:#f4f6f9;
    --wall:#b9c5d6;
    --floor-top:#425976;
    --floor-mid:#33455b;
    --floor-bottom:#161e27;
    --white:#ffffff;
    --bg:#ffffff;
    --line:#d9e3ee;
    --blue:#182453;
    --blue-deep:#000000;
    --text:#000000;
    --dim:#000000;
  }

  *{margin:0; padding:0; box-sizing:border-box;}
  html{ scroll-behavior:smooth; overscroll-behavior-y:none; }
  body{
    font-family:'Jost', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color:var(--text);
    background:var(--bg);
    overscroll-behavior-y:none;
  }
  .mono{ font-family:'Jost', 'Helvetica Neue', Helvetica, Arial, sans-serif; }
  a{ color:inherit; }
  button{ font-family:inherit; cursor:pointer; }

  /* ---------- topbar ---------- */
  .topbar{
    position:sticky;
    top:0;
    z-index:200;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:16px clamp(16px,3vw,36px);
    background:#ffffff;
    border-bottom:1px solid var(--line);
  }
  .logo-nav{ height:22px; width:auto; display:block; }
  .topbar nav{ display:flex; gap:clamp(14px,2.4vw,30px); }
  .topbar nav button{
    background:none; border:none;
    font-family:'Jost', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size:0.72rem;
    letter-spacing:0.08em;
    color:var(--dim);
    text-transform:uppercase;
    position:relative;
    padding-bottom:3px;
  }
  .topbar nav button::after{
    content:"";
    position:absolute; left:0; bottom:0;
    width:0; height:2px;
    background:var(--blue);
    transition:width .25s ease;
  }
  .topbar nav button:hover{ color:var(--text); }
  .topbar nav button:hover::after{ width:100%; }

  .topbar-icons{ display:flex; align-items:center; gap:16px; }
  .icon-btn{
    background:none; border:none; padding:0;
    font-family:inherit;
    font-size:0.85rem; font-weight:400; letter-spacing:0;
    color:var(--text);
    display:flex; align-items:center; gap:5px;
    text-decoration:none;
  }
  .icon-btn:hover{ opacity:0.6; }
  .currency-select,
  .lang-select{
    background:none; border:none; border-radius:0;
    font-family:inherit; font-size:0.85rem; font-weight:400; letter-spacing:0;
    color:var(--text); padding:0 2px 0 0; cursor:pointer; appearance:auto;
  }
  .currency-select:hover,
  .lang-select:hover{ opacity:0.6; }
  .currency-select:focus,
  .lang-select:focus{ outline:none; }
  .bag-count{
    display:inline; background:none; color:inherit;
    min-width:auto; height:auto; padding:0;
    border-radius:0; font-size:inherit;
  }

  .search-bar{
    position:absolute;
    top:100%; left:0; right:0;
    background:rgba(255,255,255,0.96);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
    padding:14px clamp(16px,3vw,36px);
    display:none;
  }
  .search-bar.open{ display:block; }
  .search-bar input{
    width:100%;
    max-width:520px;
    border:none;
    border-bottom:1px solid var(--line);
    background:transparent;
    font-family:'Jost', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size:1rem;
    padding:8px 2px;
    outline:none;
  }
  .search-bar input:focus{ border-color:var(--blue); }
  .search-bar-inner{ display:flex; align-items:center; gap:14px; }
  .search-close{ display:none; }

  /* ---------- room (hero atmosférico) ---------- */
  .room{
    position:relative;
    width:100%;
    height:100vh;
    height:100svh;
    overflow:hidden;
    background:linear-gradient(180deg,
      var(--ceiling) 0%, var(--wall) 26%,
      var(--floor-top) 46%, var(--floor-mid) 70%, var(--floor-bottom) 100%);
  }
  .ceiling-lights{
    position:absolute; top:4%; left:0; right:0; height:14%;
    display:flex; justify-content:space-evenly; align-items:center; opacity:0.55;
  }
  .ceiling-lights span{
    width:6px; height:6px; border-radius:50%;
    background:radial-gradient(circle,#fff,rgba(255,255,255,0));
    box-shadow:0 0 10px 3px rgba(255,255,255,0.6);
  }
  .ceiling-strip{
    position:absolute; top:19%; left:0; right:0; height:2px;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,0.9), transparent);
    box-shadow:0 0 24px 6px rgba(255,255,255,0.55); opacity:0.7;
  }
  .wall-panel{
    position:absolute; top:-5%; left:-8%; width:34%; height:130%;
    background:linear-gradient(115deg, rgba(255,255,255,0.55), rgba(255,255,255,0.1) 55%, rgba(255,255,255,0.02));
    clip-path:polygon(0 0, 78% 0, 46% 100%, 0 100%);
  }
  .wall-panel::after{
    content:""; position:absolute; top:0; right:0; width:2px; height:100%;
    background:linear-gradient(180deg, rgba(255,255,255,0), #fff 40%, rgba(255,255,255,0));
    box-shadow:0 0 30px 8px rgba(255,255,255,0.8);
  }
  .cable{ position:absolute; top:0; width:1px; height:46%;
    background:linear-gradient(180deg, rgba(20,30,45,0.4), rgba(20,30,45,0.05)); }
  .c1{ left:16%; } .c2{ left:22%; }

  .glow{ position:absolute; border-radius:50%; filter:blur(40px); pointer-events:none; }
  .glow-a{ width:50vw; height:50vw; top:-10%; left:30%;
    background:radial-gradient(circle, rgba(255,255,255,0.55), rgba(255,255,255,0) 70%);
    animation:breathe 9s ease-in-out infinite; }
  .glow-b{ width:40vw; height:40vw; bottom:-10%; right:5%;
    background:radial-gradient(circle, rgba(150,190,230,0.35), rgba(150,190,230,0) 70%);
    animation:breathe 11s ease-in-out infinite reverse; }
  @keyframes breathe{ 0%,100%{opacity:0.7; transform:scale(1);} 50%{opacity:1; transform:scale(1.06);} }

  .floor-sheen{
    position:absolute; left:0; right:0; bottom:0; height:52%;
    background:
      linear-gradient(100deg, transparent 30%, rgba(255,255,255,0.12) 45%, transparent 60%),
      linear-gradient(80deg, transparent 55%, rgba(255,255,255,0.08) 68%, transparent 80%);
    mix-blend-mode:screen;
  }

  .pedestal{
    position:absolute; left:50%; bottom:30%; width:min(420px,60vw); height:64px;
    transform:translateX(-50%); border-radius:50%;
    background:linear-gradient(180deg, rgba(255,255,255,0.5), rgba(255,255,255,0.05));
    border:1px solid rgba(255,255,255,0.6);
    box-shadow:0 0 40px 6px rgba(255,255,255,0.35), inset 0 6px 14px rgba(255,255,255,0.5);
  }
  .pedestal-stem{
    position:absolute; left:50%; bottom:30%; width:2px; height:14%;
    transform:translateX(-50%);
    background:linear-gradient(180deg, rgba(255,255,255,0.7), rgba(255,255,255,0.1));
  }

  .room-content{
    position:absolute; inset:0;
    display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
    text-align:center; z-index:5; padding:clamp(70px,15vh,150px) 20px 0;
  }
  .hero-logo-img{
    height:clamp(200px, 40vh, 440px); width:auto; max-width:86vw;
    filter:drop-shadow(0 18px 40px rgba(16,29,44,0.25));
    opacity:0; animation:riseIn 1.4s cubic-bezier(.2,.8,.2,1) forwards 0.3s;
  }
  .room-tagline{
    position:absolute; left:50%; bottom:calc(30% + 80px);
    transform:translateX(-50%);
    width:max-content; max-width:90vw;
    font-family:'Jost', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size:clamp(0.7rem,1.3vw,0.85rem); letter-spacing:0.18em; text-transform:uppercase;
    color:var(--blue-deep); opacity:0;
    animation:riseInTagline 1.2s cubic-bezier(.2,.8,.2,1) forwards 0.6s;
  }
  @keyframes riseInTagline{ from{opacity:0; transform:translate(-50%, 12px);} to{opacity:1; transform:translate(-50%, 0);} }
  .room-tagline span{ color:var(--blue); }
  @keyframes riseIn{ from{opacity:0; transform:translateY(12px);} to{opacity:1; transform:translateY(0);} }

  .enter-btn{
    position:absolute; left:50%; bottom:calc(30% + 32px);
    transform:translate(-50%, 50%);
    z-index:5;
    background:var(--text); color:#fff;
    border:none;
    font-family:'Jost', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size:0.72rem; letter-spacing:0.14em; text-transform:uppercase;
    padding:14px 34px;
    text-decoration:none;
    opacity:0;
    animation:riseInBtn 1.2s cubic-bezier(.2,.8,.2,1) forwards 1s;
    transition:background .2s ease, transform .2s ease;
  }
  @keyframes riseInBtn{ from{opacity:0; transform:translate(-50%, calc(50% + 12px));} to{opacity:1; transform:translate(-50%, 50%);} }
  .enter-btn:hover{ background:var(--blue); transform:translate(-50%, 50%) translateY(-2px); }

  .corner-label{
    position:absolute; font-family:'Jost', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:0.6rem;
    letter-spacing:0.1em; color:rgba(16,29,44,0.5); z-index:5; opacity:0;
    animation:riseIn 1s ease forwards 1.2s;
  }
  .cl-tl{ top:20px; left:22px; }
  .cl-tr{ top:20px; right:22px; text-align:right; color:rgba(255,255,255,0.75); }

  /* ---------- filters ---------- */
  .archive-head-right{ display:flex; align-items:center; gap:26px; }
  .filter-toggle{
    font-family:inherit; font-size:0.85rem; font-weight:400;
    letter-spacing:0; text-transform:none; padding:0;
    border:none; border-radius:0; color:var(--text);
    background:none; cursor:pointer;
  }
  .filter-toggle:hover{ opacity:0.6; }
  .filter-toggle.active{ background:none; color:var(--text); text-decoration:underline; text-underline-offset:4px; }

  .filters-panel{
    display:none; flex-direction:column; gap:18px;
    padding:0 clamp(16px,4vw,60px) 28px;
  }
  .filters-panel.open{ display:flex; }
  .filter-group{ display:flex; flex-direction:column; gap:10px; }
  .filter-group-label{
    font-family:inherit; font-size:0.72rem; font-weight:400;
    letter-spacing:0.02em; text-transform:none; color:#8a8a8a;
  }
  .filter-group-row{ display:flex; flex-wrap:wrap; gap:8px 22px; }
  .filter-group + .filter-group{ padding-top:14px; border-top:1px solid var(--line); }
  .chip{
    position:relative; flex:0 0 auto;
    font-family:inherit; font-size:0.85rem; font-weight:400;
    letter-spacing:0; text-transform:none; padding:2px 0;
    border:none; border-radius:0; color:var(--text);
    background:none; box-shadow:none;
    transition:opacity .2s ease;
  }
  .chip:hover{ opacity:0.55; }
  .chip.active{
    color:var(--text); background:none; box-shadow:none;
    text-decoration:underline; text-underline-offset:4px;
  }

  .filters{
    display:flex; align-items:center; flex-wrap:wrap; gap:10px;
    padding:20px clamp(16px,4vw,60px);
    border-bottom:1px solid var(--line);
  }
  .filters .archive-count{
    margin-left:auto; display:inline-flex; align-items:center;
    font-family:inherit; font-size:0.85rem; font-weight:400;
    letter-spacing:0; text-transform:none; color:var(--text);
    background:none; border:none; padding:0; border-radius:0; box-shadow:none;
  }

  /* ---------- magazine hero (Y2K) ---------- */
  .mag-hero{
    position:relative; overflow:hidden;
    padding:70px clamp(16px,4vw,60px) 50px;
    background:
      radial-gradient(circle at 15% 20%, rgba(120,170,255,0.35), transparent 55%),
      radial-gradient(circle at 85% 10%, rgba(200,150,255,0.3), transparent 50%),
      radial-gradient(circle at 60% 90%, rgba(140,255,220,0.28), transparent 55%),
      linear-gradient(135deg, #f4f7ff 0%, #eef1ff 40%, #f5fbff 100%);
    border-bottom:1px solid var(--line);
    text-align:center;
  }
  .mag-blob{
    position:absolute; border-radius:50% 40% 55% 45% / 45% 55% 40% 50%;
    background:linear-gradient(135deg, #ffffff 0%, #b9c9ff 25%, #e9e6ff 50%, #a9e9ff 75%, #ffffff 100%);
    box-shadow: inset -10px -10px 30px rgba(0,0,50,0.15), inset 8px 8px 20px rgba(255,255,255,0.9), 0 20px 40px rgba(80,110,255,0.15);
    opacity:0.9; pointer-events:none;
  }
  .mag-blob1{ width:180px; height:120px; top:-30px; right:8%; transform:rotate(18deg); }
  .mag-blob2{ width:90px; height:60px; bottom:10px; right:22%; transform:rotate(-10deg); }
  .mag-blob3{ width:60px; height:60px; top:40%; left:4%; border-radius:50%; }

  /* twinkling starfield scattered across the whole hero */
  .mag-star{
    position:absolute; width:16px; height:16px; z-index:1;
    color:#8fa3ea; pointer-events:none;
    opacity:0; transform:scale(0.4);
    animation: mag-twinkle 4.5s ease-in-out infinite;
  }
  @keyframes mag-twinkle{
    0%, 100%{ opacity:0; transform:scale(0.3); }
    50%{ opacity:1; transform:scale(1); }
  }
  .mag-star1{ top:14%;  left:6%;   width:14px; color:#a9b8ef; animation-delay:0s;    animation-duration:4s; }
  .mag-star2{ top:8%;   left:44%;  width:10px; color:#7fa3ea; animation-delay:1.2s;  animation-duration:5s; }
  .mag-star3{ top:22%;  left:88%;  width:18px; color:#6c7fe6; animation-delay:2.1s;  animation-duration:4.2s; }
  .mag-star4{ top:62%;  left:14%;  width:12px; color:#8f7ce8; animation-delay:0.6s;  animation-duration:5.4s; }
  .mag-star5{ top:78%;  left:52%;  width:16px; color:#a9b8ef; animation-delay:3s;    animation-duration:4.8s; }
  .mag-star6{ top:68%;  left:92%;  width:10px; color:#7fa3ea; animation-delay:1.8s;  animation-duration:4.6s; }
  .mag-star7{ top:36%;  left:28%;  width:9px;  color:#6c7fe6; animation-delay:2.6s;  animation-duration:5.2s; }
  .mag-star8{ top:10%;  left:70%;  width:12px; color:#8f7ce8; animation-delay:0.3s;  animation-duration:4.3s; }
  .mag-star9{ top:50%;  left:74%;  width:14px; color:#a9b8ef; animation-delay:3.6s;  animation-duration:5s; }
  .mag-eyebrow{
    font-family:'Jost', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:0.68rem; letter-spacing:0.15em;
    text-transform:uppercase; color:var(--blue-deep); display:block; margin-bottom:10px;
  }
  .mag-wordmark-wrap{ position:relative; display:flex; justify-content:center; padding:26px 0 10px; }
  .mag-wordmark-img{ width:min(640px,92%); height:auto; display:block; }
  .mag-tagline{
    font-family:'Digistick', 'Jost', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-style:italic; letter-spacing:0.08em;
    font-size:1.05rem; color:var(--blue); max-width:560px; line-height:1.6;
    margin:18px auto 0;
  }

  /* ---------- sections ---------- */
  section{ padding:clamp(50px,8vw,90px) clamp(16px,4vw,60px); border-bottom:1px solid var(--line); }
  .section-tag{
    font-family:'Jost', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:0.68rem; letter-spacing:0.12em;
    color:var(--blue); text-transform:uppercase; margin-bottom:10px; display:block;
  }
  .section-title{
    font-size:clamp(1.25rem,2.4vw,1.7rem); font-weight:700; text-transform:uppercase;
    letter-spacing:-0.01em; max-width:22ch; color:var(--blue-deep);
  }

  #archivo{ padding-top:clamp(30px,4vw,50px); padding-left:0; padding-right:0; }
  .archive-head{
    display:flex; justify-content:space-between; align-items:flex-end;
    flex-wrap:wrap; gap:16px; margin-bottom:40px;
    padding:0 clamp(16px,4vw,60px);
  }
  .archive-count{ font-family:inherit; font-size:0.85rem; font-weight:400; letter-spacing:0; text-transform:none; color:var(--text); }

  .grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:0; width:100%; }
  @media (max-width:900px){ .grid{ grid-template-columns:repeat(2,1fr); } }
  @media (max-width:540px){ .grid{ grid-template-columns:1fr; } }

  .piece{
    background:var(--white); border:none; border-radius:0;
    position:relative; display:flex; flex-direction:column;
    transition:opacity .25s ease;
  }
  .piece.hidden{ display:none; }

  .piece-photo{ position:relative; display:block; aspect-ratio:3/4; overflow:hidden; cursor:pointer; }
  .piece-photo img,
  .piece-photo .ph-fallback{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
  .piece:hover .piece-photo img,
  .piece:hover .piece-photo .ph-fallback{ transform:scale(1.04); }

  .ph-fallback.p1{ background:linear-gradient(160deg,#eaf3ff,#c6e0ff 70%); }
  .ph-fallback.p2{ background:linear-gradient(160deg,#f2f7fd,#bcd9ff 70%); }
  .ph-fallback.p3{ background:linear-gradient(160deg,#e5f0ff,#a9d0ff 70%); }
  .ph-fallback.p4{ background:linear-gradient(160deg,#eef5ff,#b6d6ff 70%); }
  .ph-fallback.p5{ background:linear-gradient(160deg,#e9f2ff,#cfe4ff 70%); }
  .ph-fallback.p6{ background:linear-gradient(160deg,#f0f6ff,#a3ccff 70%); }
  .ph-fallback.p7{ background:linear-gradient(160deg,#e7f1ff,#bcd9ff 70%); }
  .ph-fallback.p8{ background:linear-gradient(160deg,#eef5ff,#9fc9ff 70%); }

  .piece-tag{
    position:absolute; top:12px; left:12px; font-family:'Jost', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size:0.62rem; color:var(--blue-deep); background:rgba(255,255,255,0.85);
    padding:4px 8px; border:1px solid var(--line);
  }
  .piece-unique{
    position:absolute; top:12px; right:12px; font-family:'Jost', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size:0.6rem; color:#fff; background:var(--blue); padding:3px 7px;
  }
  .piece-info{ padding:10px 4px 24px; display:flex; flex-direction:column; gap:2px; flex:1; }
  .piece-top-row{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
  .piece-name{ font-size:0.8rem; font-weight:400; text-transform:uppercase; cursor:pointer; letter-spacing:0.01em; color:inherit; text-decoration:none; }
  .piece-price{ font-family:inherit; font-size:0.8rem; color:var(--text); white-space:nowrap; }
  .piece-era{ font-family:'Jost', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:0.66rem; color:var(--dim); margin-top:2px; }

  .add-btn{
    margin-top:12px; width:100%;
    background:transparent; color:var(--text); border:1px solid var(--text);
    font-family:'Jost', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:0.64rem; letter-spacing:0.08em;
    text-transform:uppercase; padding:9px; transition:background .2s ease, color .2s ease;
  }
  .add-btn:hover{ background:var(--text); color:#fff; }
  .add-btn.added{ background:#182453; border-color:#182453; color:#fff; }

  .empty-msg{
    display:none; font-family:'Jost', 'Helvetica Neue', Helvetica, Arial, sans-serif; color:var(--dim);
    font-size:0.85rem; padding:30px 0; text-align:center; grid-column:1/-1;
  }

  /* ---------- manifiesto / sistema ---------- */
  .manifesto{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:60px; align-items:start; }
  @media (max-width:820px){ .manifesto{ grid-template-columns:1fr; } }
  .manifesto-num{ font-family:'Jost', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:5.5rem; line-height:1; color:var(--line); font-weight:700; }
  .manifesto-text p{ font-size:clamp(1.15rem,2.3vw,1.5rem); line-height:1.55; color:var(--blue-deep); max-width:34ch; }
  .manifesto-text p + p{ margin-top:20px; color:var(--dim); font-size:1rem; }

  .system-strip{ display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); border:1px solid var(--line); background:var(--white); }
  .system-item{ padding:26px 22px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
  .system-item:last-child{ border-right:none; }
  .system-item .n{ font-family:'Jost', 'Helvetica Neue', Helvetica, Arial, sans-serif; color:var(--blue); font-size:0.72rem; margin-bottom:10px; display:block; }
  .system-item h3{ font-size:1rem; text-transform:uppercase; margin-bottom:8px; font-weight:500; color:var(--blue-deep); }
  .system-item p{ font-size:0.85rem; color:var(--dim); line-height:1.55; }

  /* ---------- system: split two-column block ---------- */
.split-grid{ display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:start; }
@media (max-width:820px){ .split-grid{ grid-template-columns:1fr; gap:40px; } }

/* ---------- system: story block ---------- */
  .story-grid{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:50px; align-items:center; }
  @media (max-width:820px){ .story-grid{ grid-template-columns:1fr; } }
  .story-photo{
    width:100%; aspect-ratio:4/5; background:var(--wall);
    overflow:hidden; border:1px solid var(--line);
  }
  .story-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
  .story-text p{ font-size:1rem; line-height:1.7; color:var(--dim); max-width:52ch; }
  .story-text p + p{ margin-top:18px; }
  .story-text p strong{ color:var(--blue-deep); font-weight:500; }

  /* ---------- footer ---------- */
  footer{ padding:40px clamp(16px,4vw,60px) 28px; display:flex; flex-wrap:wrap; justify-content:space-between; gap:24px; background:var(--white); }
  footer .foot-logo{ height:18px; width:auto; }
  .foot-links{ display:flex; gap:22px; flex-wrap:wrap; align-items:center; }
  .foot-links a, .foot-links button{ font-family:'Jost', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:0.68rem; letter-spacing:0.05em; color:var(--dim); text-transform:uppercase; text-decoration:none; }
  .foot-links a:hover, .foot-links button:hover{ color:var(--blue); }
  .foot-bottom{
    width:100%; margin-top:24px; padding-top:18px; border-top:1px solid var(--line);
    font-family:'Jost', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:0.65rem; color:var(--dim);
    display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;
  }

  /* ---------- cart drawer ---------- */
  .overlay{
    position:fixed; inset:0; background:rgba(10,20,32,0.4);
    z-index:250; opacity:0; pointer-events:none; transition:opacity .3s ease;
  }
  .overlay.open{ opacity:1; pointer-events:auto; }

  .cart-drawer{
    position:fixed; top:0; right:0; height:100%;
    width:min(380px, 92vw);
    background:#fff; z-index:260;
    box-shadow:-20px 0 50px rgba(11,61,140,0.15);
    transform:translateX(100%); transition:transform .35s cubic-bezier(.2,.8,.2,1);
    display:flex; flex-direction:column;
  }
  .cart-drawer.open{ transform:translateX(0); }
  .cart-head{
    display:flex; justify-content:space-between; align-items:center;
    padding:20px; border-bottom:1px solid var(--line);
  }
  .cart-head h3{ font-size:0.85rem; letter-spacing:0.1em; text-transform:uppercase; font-family:'Jost', 'Helvetica Neue', Helvetica, Arial, sans-serif; }
  .cart-close{ background:none; border:none; font-size:1.1rem; color:var(--dim); }
  .cart-close:hover{ color:var(--text); }

  .cart-items{ flex:1; overflow-y:auto; padding:10px 20px; }
  .cart-empty{ font-family:'Jost', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:0.8rem; color:var(--dim); padding:40px 0; text-align:center; }

  .cart-item{
    display:flex; gap:12px; align-items:center; padding:14px 0; border-bottom:1px solid var(--line);
  }
  .cart-item .thumb{ width:52px; height:64px; flex:0 0 auto; border:1px solid var(--line); position:relative; overflow:hidden; }
  .cart-item .thumb img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
  .cart-item .ci-info{ flex:1; min-width:0; }
  .cart-item .ci-name{ font-size:0.85rem; font-weight:500; text-transform:uppercase; }
  .cart-item .ci-meta{ font-family:'Jost', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:0.68rem; color:var(--dim); margin-top:2px; }
  .cart-item .ci-remove{
    background:none; border:none; font-family:'Jost', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size:0.65rem; color:var(--dim); text-decoration:underline; padding:0;
  }
  .cart-item .ci-remove:hover{ color:#c94b3f; }

  .cart-foot{ padding:18px 20px 22px; border-top:1px solid var(--line); }
  .cart-subtotal{ display:flex; justify-content:space-between; font-family:'Jost', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:0.85rem; margin-bottom:14px; }
  .checkout-btn{
    display:block; width:100%; background:var(--text); color:#fff; border:none; padding:14px;
    font-family:'Jost', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase;
    text-align:center; text-decoration:none; cursor:pointer;
    transition:background .2s ease;
  }
  .checkout-btn:hover{ background:var(--blue); }
  .checkout-btn.disabled{ pointer-events:none; opacity:0.45; }

  /* ---------- product modal ---------- */
  .modal{
    position:fixed; inset:0; z-index:270;
    display:none; align-items:center; justify-content:center; padding:20px;
  }
  .modal.open{ display:flex; }
  .modal-card{
    background:#fff; max-width:720px; width:100%; max-height:88vh; overflow-y:auto;
    display:grid; grid-template-columns:1fr 1fr; box-shadow:0 40px 80px rgba(11,61,140,0.3);
  }
  @media (max-width:600px){ .modal-card{ grid-template-columns:1fr; } }
  .modal-photo{ position:relative; aspect-ratio:3/4; overflow:hidden; }
  .modal-photo img,
  .modal-photo .ph-fallback{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
  .modal-info{ padding:26px; display:flex; flex-direction:column; }
  .modal-close{
    align-self:flex-end; background:none; border:none; font-size:1.3rem; color:var(--dim); margin-bottom:10px;
  }
  .modal-close:hover{ color:var(--text); }
  .modal-tag{ font-family:'Jost', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:0.65rem; color:var(--dim); margin-bottom:6px; }
  .modal-name{ font-size:1.3rem; font-weight:700; text-transform:uppercase; margin-bottom:10px; }
  .modal-era{ font-family:'Jost', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:0.75rem; color:var(--dim); margin-bottom:18px; }
  .modal-price{ font-family:inherit; font-size:1.2rem; color:var(--blue); margin-bottom:20px; }
  .modal-desc{ font-size:0.9rem; color:var(--dim); line-height:1.6; margin-bottom:24px; }
  .modal-add{
    margin-top:auto; background:var(--text); color:#fff; border:none; padding:14px;
    font-family:'Jost', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase;
  }
  .modal-add:hover{ background:var(--blue); }
  .modal-add.added{ background:#182453; }

  /* ---------- article page ---------- */
  .article-back{
    display:inline-flex; align-items:center; gap:7px;
    font-family:'Jost', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight:400;
    font-size:0.85rem; color:var(--text); margin-bottom:28px; text-decoration:none;
    background:none; padding:0; border-radius:0; transition:opacity .2s ease;
  }
  .article-back:hover{ background:none; opacity:0.6; }
  .article-divider{ border:none; border-top:1px solid var(--blue); margin:0 0 40px; }
  .article-meta-block{ text-align:center; margin-bottom:18px; }
  .article-meta{
    font-family:'Playfair Display', serif; font-size:0.85rem; letter-spacing:0.04em;
  }
  .article-meta .cat{ font-weight:700; text-transform:uppercase; color:var(--blue); }
  .article-meta .dot{ color:var(--dim); margin:0 8px; }
  .article-meta .date{ font-style:italic; color:var(--dim); }
  .article-logo{
    display:block; font-family:'Playfair Display', serif; font-style:italic; font-weight:600;
    font-size:1.4rem; color:var(--blue); margin:14px 0 30px;
  }
  .article-cover{ position:relative; aspect-ratio:16/9; overflow:hidden; margin-bottom:32px; }
  .article-cover img,
  .article-cover .ph-fallback{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
  .article-body{ max-width:68ch; margin:0 auto; }
  .article-title{
    font-family:'Playfair Display', serif; font-size:clamp(2rem,4.2vw,3.1rem); font-weight:800;
    text-transform:none; letter-spacing:-0.01em; color:var(--blue-deep); margin:0 0 40px;
    text-align:center; line-height:1.2;
  }
  .article-content{ font-size:1rem; color:var(--text); line-height:1.75; white-space:pre-wrap; }

  /* ---------- magazine grid ---------- */
  .mag-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:0; width:100%; }
  @media (max-width:900px){ .mag-grid{ grid-template-columns:repeat(2,1fr); } }
  @media (max-width:540px){ .mag-grid{ grid-template-columns:1fr; } }
  .mag-card{
    background:var(--white); border:none; cursor:pointer;
    display:flex; flex-direction:column; transition:opacity .25s ease;
  }
  .mag-card.hidden{ display:none; }
  .mag-cover{ position:relative; aspect-ratio:4/3; overflow:hidden; }
  .mag-cover img,
  .mag-cover .ph-fallback{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
  .mag-card:hover .mag-cover img,
  .mag-card:hover .mag-cover .ph-fallback{ transform:scale(1.04); }
  .mag-info{ padding:16px 4px 28px; display:flex; flex-direction:column; gap:6px; }
  .mag-cat{ font-family:'Playfair Display', serif; font-weight:700; font-size:0.78rem; letter-spacing:0.02em; text-transform:uppercase; color:var(--blue); }
  .mag-title{ font-family:'Playfair Display', serif; font-size:1.25rem; font-weight:700; text-transform:none; letter-spacing:0; line-height:1.3; margin-top:6px; color:var(--blue-deep); }
  .mag-date{ font-family:'Playfair Display', serif; font-style:italic; font-size:0.75rem; color:var(--dim); }
  .mag-excerpt{ font-size:0.82rem; color:var(--dim); line-height:1.5; margin-top:4px; }

  ::selection{ background:var(--blue); color:#fff; }

  /* ---------- mega menu ---------- */
  .mega-menu{
    position:fixed; top:0; left:0; right:0; z-index:190;
    background:#ffffff;
    border-bottom:1px solid var(--line);
    opacity:0; pointer-events:none;
    transform:translateY(-8px);
    transition:opacity .2s ease, transform .2s ease;
    padding:88px clamp(16px,3vw,36px) 34px;
    box-shadow:0 30px 60px -30px rgba(16,29,44,0.3);
  }
  .mega-menu.open{ opacity:1; pointer-events:auto; transform:translateY(0); }
  .mega-menu-top{
    display:flex; justify-content:space-between; align-items:center;
    padding-bottom:16px; border-bottom:1px solid var(--line); margin-bottom:22px;
    font-family:'Jost', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase;
  }
  .mega-crumb{ color:var(--text); }
  .mega-close{ background:none; border:none; font-family:inherit; font-size:inherit; letter-spacing:inherit; color:var(--dim); text-transform:uppercase; }
  .mega-close:hover{ color:var(--text); }
  .mega-menu-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(160px,1fr)); gap:28px; }
  .mega-col{ display:flex; flex-direction:column; gap:12px; }
  .mega-head{ font-family:'Jost', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:0.68rem; letter-spacing:0.1em; color:var(--dim); text-transform:uppercase; margin-bottom:2px; }
  .mega-col a{ font-size:0.88rem; color:var(--blue-deep); text-decoration:none; }
  .mega-col a:hover{ color:var(--blue); text-decoration:underline; }

  .mega-overlay{
    position:fixed; inset:0; z-index:185;
    background:rgba(8,14,22,0.4);
    opacity:0; pointer-events:none; transition:opacity .2s ease;
  }
  .mega-overlay.open{ opacity:1; pointer-events:auto; }


  /* ---------- home: hero fills the first screen, then the page scrolls to the photo stack ---------- */
  body.home-page .room{ height:100vh; height:100svh; }

  /* ---------- logo in the topbar corner (used on inner pages) ---------- */
  .topbar-left{ display:flex; align-items:center; gap:clamp(20px,3vw,40px); }
  .logo-corner{ display:flex; align-items:center; text-decoration:none; }
  .logo-corner-img{ height:52px; width:auto; display:block; margin:-9px 0; }
  .topbar nav a{
    font-family:'Jost', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:0.72rem; letter-spacing:0.08em;
    color:var(--dim); text-transform:uppercase; text-decoration:none;
    position:relative; padding-bottom:3px;
  }
  .topbar nav a::after{
    content:"";
    position:absolute; left:0; bottom:0;
    width:0; height:2px;
    background:var(--blue);
    transition:width .25s ease;
  }
  .topbar nav a:hover{ color:var(--text); }
  .topbar nav a:hover::after{ width:100%; }

  /* ---------- generic inner page section ---------- */
  .page-section{ padding-top:clamp(30px,4vw,50px); }

  /* ---------- contact page ---------- */
  .contact-block{ max-width:640px; }
  .contact-block p{ font-size:1.05rem; line-height:1.7; color:var(--dim); margin-bottom:26px; }
  .contact-line{ display:flex; gap:14px; align-items:baseline; font-size:1rem !important; color:var(--text) !important; }
  .contact-line .mono{ min-width:110px; font-size:0.7rem; letter-spacing:0.1em; color:var(--blue); }
  .contact-line a{ color:var(--blue-deep); text-decoration:underline; }

  /* ---------- product page (single piece, gallery of all photos, edge-to-edge like a lookbook) ---------- */
  #product-section{
    padding-left:0; padding-right:0; padding-top:28px;
  }
  .product-back{
    display:inline-flex; align-items:center; gap:7px;
    margin:0 0 24px clamp(16px,4vw,60px); padding:0; border-radius:0;
    background:none; color:var(--text);
    font-family:'Jost', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight:400;
    font-size:0.85rem; letter-spacing:0; text-transform:none; text-decoration:none;
    transition:opacity .2s ease;
  }
  .product-back:hover{ background:none; opacity:0.6; }
  .product-page{
    display:grid; grid-template-columns:52% 48%; align-items:start;
  }
  @media (max-width:800px){ .product-page{ grid-template-columns:1fr; } }
  .product-gallery{
    display:flex; flex-direction:column; gap:2px;
  }
  .product-photo-item{
    position:relative; width:100%; min-height:85vh; overflow:hidden;
    background:var(--bg);
  }
  @media (max-width:800px){ .product-photo-item{ min-height:70vh; } }
  /* 'cover' recortaba la prenda por arriba y por abajo para rellenar la
     caja. Con 'contain' se ve la foto entera; el hueco que sobra queda en
     blanco, igual que el fondo de la ficha. */
  .product-photo-item img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; object-position:center; }
  .product-photo-item .ph-fallback{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
  .product-info{
    position:sticky; top:110px; padding:6px clamp(16px,4vw,60px) 40px 40px;
  }
  @media (max-width:800px){ .product-info{ position:static; padding:30px clamp(16px,4vw,60px) 40px; } }
  .product-tag{ font-family:'Jost', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:0.68rem; color:var(--dim); margin-bottom:8px; display:block; }
  .product-name{ font-size:1.6rem; font-weight:700; text-transform:uppercase; margin-bottom:12px; line-height:1.25; }
  .product-era{ font-family:'Jost', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:0.8rem; color:var(--dim); margin-bottom:18px; }
  .product-price{ font-family:inherit; font-size:1.4rem; color:var(--blue); margin-bottom:24px; }
  .product-desc{ font-size:0.92rem; color:var(--dim); line-height:1.7; margin-bottom:28px; white-space:pre-wrap; }
  .product-add{
    width:100%; padding:14px; background:var(--blue-deep); color:#fff; border:none;
    font-family:'Jost', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:0.75rem; letter-spacing:0.08em; text-transform:uppercase;
    cursor:pointer; transition:background .2s ease;
  }
  .product-add:hover{ background:var(--blue); }
  .product-add.added{ background:#182453; }

  /* ---------- checkout page ---------- */
  .checkout-page{
    display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:start;
    padding:0 clamp(16px,4vw,60px) 60px;
  }
  @media (max-width:800px){ .checkout-page{ grid-template-columns:1fr; gap:40px; } }
  .checkout-heading{
    font-size:1.1rem; font-weight:700; text-transform:uppercase; letter-spacing:0.02em;
    margin-bottom:20px;
  }
  .checkout-items{ display:flex; flex-direction:column; gap:16px; margin-bottom:20px; }
  .checkout-item{ display:flex; align-items:center; gap:14px; }
  .checkout-item-thumb{
    position:relative; width:64px; height:80px; flex:0 0 auto; overflow:hidden;
    background:var(--bg);
  }
  .checkout-item-thumb img,
  .checkout-item-thumb .ph-fallback{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
  .checkout-item-info{ flex:1; min-width:0; }
  .checkout-item-name{ font-size:0.85rem; font-weight:500; text-transform:uppercase; margin-bottom:4px; }
  .checkout-item-meta{ font-size:0.68rem; color:var(--dim); }
  .checkout-item-price{ font-size:0.82rem; color:var(--text); white-space:nowrap; }
  .checkout-total{
    display:flex; justify-content:space-between; align-items:baseline;
    font-family:'Jost', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:1rem; font-weight:700;
    padding-top:16px; border-top:1px solid var(--line);
  }
  .checkout-notice{
    font-size:0.82rem; color:var(--dim); line-height:1.6; margin-bottom:22px;
    padding:14px 16px; background:var(--bg); border-left:2px solid var(--blue);
  }
  .checkout-form{ display:flex; flex-direction:column; gap:16px; }
  .checkout-form label{
    display:flex; flex-direction:column; gap:6px;
    font-family:'Jost', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:0.66rem; letter-spacing:0.06em;
    text-transform:uppercase; color:var(--dim);
  }
  .checkout-form input,
  .checkout-form textarea{
    font-family:'Jost', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:0.92rem; color:var(--text);
    padding:10px 12px; border:1px solid var(--line); border-radius:4px; background:#fff;
    resize:vertical;
  }
  .checkout-form input:focus,
  .checkout-form textarea:focus{ outline:none; border-color:var(--blue); }
  .checkout-form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
  .checkout-empty{ padding:60px clamp(16px,4vw,60px); text-align:center; color:var(--dim); }
  .checkout-confirmation{ grid-column:1 / -1; max-width:520px; padding:20px 0 60px; }
  .checkout-confirmation p{ color:var(--dim); line-height:1.7; font-size:0.92rem; }

/* ---------- home page: staggered/interleaved Y2K photo grid ---------- */
/* Edge margin and the gap between the two columns use the same value,
   so screen-edge -> photo -> center -> photo -> screen-edge are all equal. */
.y2k-stack{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(20px,6vw,90px);
  padding:4vh clamp(20px,6vw,90px) calc(8vh + 110px);
}
.y2k-item{
  position:relative;
  width:100%;
  aspect-ratio:3/4;
  overflow:hidden;
  background:#0d1220;
}
.y2k-item img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  display:block;
}
.y2k-item:nth-child(even){
  transform:translateY(clamp(60px,9vw,110px));
}

.y2k-tag{
  position:absolute; left:16px; bottom:16px; z-index:2;
  font-size:0.62rem; letter-spacing:0.1em; color:#fff;
  background:rgba(10,15,30,0.55); padding:6px 10px; border-radius:999px;
  text-transform:uppercase; backdrop-filter:blur(2px);
}

@media (max-width:800px){
  .y2k-stack{ gap:clamp(8px,3vw,24px); padding:4vh clamp(8px,3vw,24px) calc(8vh + 50px); }
  .y2k-item:nth-child(even){ transform:translateY(clamp(30px,7vw,50px)); }
}

/* ---------- legal pages (terms, privacy, shipping & returns) ---------- */
.legal-updated{
  display:block; font-family:'Jost', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:0.68rem;
  color:var(--dim); text-transform:uppercase; letter-spacing:0.05em; margin-bottom:34px;
}
.legal-body{ max-width:700px; }
.legal-body p{ font-size:0.95rem; line-height:1.75; color:var(--dim); margin-bottom:18px; }
.legal-body h3{
  font-size:0.95rem; text-transform:uppercase; letter-spacing:0.03em;
  margin:36px 0 12px; color:var(--text);
}
.legal-body a{ color:var(--blue); }

/* ---------- navegación móvil ---------- */
.topbar nav .nav-home{ display:none; }
.nav-toggle{
  display:none;
  background:none; border:none;
  font-family:'Jost', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size:1.05rem; line-height:1;
  color:var(--text);
  padding:6px 4px;
}
.nav-backdrop{
  position:fixed; inset:0; z-index:205;
  background:rgba(8,14,22,0.45);
  opacity:0; pointer-events:none;
  transition:opacity .25s ease;
}
.nav-close{
  display:none;
  position:absolute; top:18px; right:20px;
  width:auto;
  padding:4px 0;
  background:none; border:none;
  font-family:'Jost', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size:0.68rem; letter-spacing:0.1em;
  text-transform:uppercase;
  color:rgba(233,238,247,0.55);
}
.nav-close:hover{ color:#ffffff; }

@media (max-width:860px){
  .topbar{ padding:12px 16px; gap:10px; }
  .topbar-left{ gap:12px; }
  .nav-toggle{ display:block; }
  .nav-close{ display:block; }
  .topbar nav .nav-home{ display:block; }   /* Home solo en el menú móvil */
  .logo-corner{ align-self:center; }
  .logo-corner-img, .logo-nav{
    height:30px;          /* logo más grande en móvil */
    width:auto;
    display:block;
    margin:0;             /* quita el desplazamiento vertical del escritorio */
  }

  .topbar nav{
    position:fixed;
    top:0; left:0;
    width:min(84vw, 320px);
    height:100vh; height:100svh;
    background:#16253c;
    border-right:1px solid rgba(255,255,255,0.08);
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:64px 24px 32px;
    transform:translateX(-102%);
    transition:transform .28s ease;
    z-index:210;
    overflow-y:auto;
  }
  body.nav-open .topbar nav{ transform:translateX(0); }
  body.nav-open .topbar{ z-index:220; }   /* el panel debe quedar sobre el fondo oscuro */
  body.nav-open .nav-backdrop{ opacity:1; pointer-events:auto; }
  body.nav-open{ overflow:hidden; }

  .topbar nav button:not(.nav-close),
  .topbar nav a{
    display:block;
    width:100%;
    text-align:left;
    padding:18px 0;
    font-family:'Jost', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size:0.82rem;
    line-height:1.2;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:#e9eef7;
    background:none;
    border:none;
    border-bottom:1px solid rgba(233,238,247,0.14);
    text-decoration:none;
  }
  .topbar nav a:last-child{ border-bottom:none; }
  .topbar nav button:not(.nav-close):hover,
  .topbar nav a:hover{ color:#ffffff; }
  .topbar nav button::after,
  .topbar nav a::after{ display:none; }   /* en móvil manda la línea separadora */

  .topbar-icons{ gap:10px; }
  .currency-select, .lang-select{ font-size:0.64rem; padding:4px 2px; }
  .icon-btn{ font-size:0.64rem; gap:4px; }

  .mega-menu{ padding:76px 18px 28px; max-height:100svh; overflow-y:auto; }
  .mega-menu-grid{ grid-template-columns:repeat(2,1fr); gap:20px; }

  /* en móvil el buscador ocupa toda la pantalla: fondo blanco y solo el
     campo arriba, para que nada del resto de la página distraiga. */
  .search-bar{
    position:fixed;
    inset:0;
    background:#ffffff;
    backdrop-filter:none;
    border-bottom:none;
    padding:26px 20px;
    z-index:300;
  }
  .search-bar-inner{ gap:10px; }
  .search-bar input{
    flex:1;
    max-width:none;
    font-size:1.05rem;
    padding:10px 2px;
  }
  .search-close{
    display:block;
    flex:0 0 auto;
    background:none; border:none;
    padding:4px 6px;
    font-size:2rem; line-height:1; font-weight:300;
    color:#000000; cursor:pointer;
  }
  body.search-open{ overflow:hidden; }
  footer{ padding:32px 16px 24px; gap:20px; }
}

@media (max-width:420px){
  .topbar-icons{ gap:8px; }
  .mega-menu-grid{ grid-template-columns:1fr; }
}

/* ---------- cuenta de cliente ---------- */
.account-wrap{ max-width:1100px; }
.account-loading{ color:var(--dim); font-size:0.8rem; padding:40px 0; }

.account-auth{ max-width:420px; margin-top:24px; }
.account-tabs{ display:flex; gap:0; border-bottom:1px solid var(--line); margin-bottom:26px; }
.account-tab{
  background:none; border:none; padding:12px 18px 14px;
  font-family:'Jost', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:0.72rem;
  letter-spacing:0.08em; text-transform:uppercase; color:var(--dim);
  border-bottom:2px solid transparent; margin-bottom:-1px;
}
.account-tab.is-active{ color:var(--text); border-bottom-color:var(--blue); }
.account-tab:hover{ color:var(--text); }

.account-form{ display:flex; flex-direction:column; gap:16px; }
.account-form label{
  display:flex; flex-direction:column; gap:7px;
  font-family:'Jost', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:0.68rem;
  letter-spacing:0.08em; text-transform:uppercase; color:var(--dim);
}
.account-form input{
  font-family:'Jost', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:0.92rem;
  color:var(--text); background:var(--white);
  border:1px solid var(--line); border-radius:6px; padding:11px 12px;
  text-transform:none; letter-spacing:0;
}
.account-form input:focus{ outline:none; border-color:var(--blue); }
.account-form-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.account-hint{ font-size:0.62rem; color:var(--dim); letter-spacing:0.06em; }

.account-msg{
  font-size:0.82rem; padding:12px 14px; border-radius:6px; margin-bottom:20px;
  border:1px solid var(--line);
}
.account-msg.is-ok{ color:var(--blue-deep); background:rgba(24,36,83,0.08); border-color:rgba(24,36,83,0.3); }
.account-msg.is-error{ color:#8d2029; background:rgba(141,32,41,0.06); border-color:rgba(141,32,41,0.25); }

.account-head{
  display:flex; justify-content:space-between; align-items:flex-start;
  gap:20px; flex-wrap:wrap;
  padding-bottom:22px; margin-bottom:28px; border-bottom:1px solid var(--line);
}
.account-name{ font-size:1.3rem; font-weight:500; margin-bottom:4px; }
.account-dim{ color:var(--dim); font-size:0.74rem; letter-spacing:0.04em; }
.account-logout{
  background:none; border:1px solid var(--line); border-radius:6px;
  padding:8px 16px; font-size:0.68rem; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--dim);
}
.account-logout:hover{ border-color:var(--blue); color:var(--blue); }

.account-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:48px; }
.account-block-title{
  font-size:0.7rem; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--dim); margin-bottom:20px;
  padding-bottom:10px; border-bottom:1px solid var(--line);
}
.account-password{ border:1px solid var(--line); border-radius:6px; padding:12px 14px; }
.account-password summary{
  cursor:pointer; font-size:0.68rem; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--dim);
}
.account-password[open] summary{ margin-bottom:16px; color:var(--text); }
.account-password label{ margin-top:12px; }

.account-orders{ display:flex; flex-direction:column; gap:18px; }
.account-empty{ color:var(--dim); font-size:0.88rem; }
.account-order{ border:1px solid var(--line); border-radius:8px; padding:16px 18px; background:var(--white); }
.account-order-head{
  display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap;
  font-size:0.68rem; letter-spacing:0.06em; text-transform:uppercase;
  padding-bottom:12px; border-bottom:1px solid var(--line);
}
.account-status{
  background:rgba(24,36,83,0.1); color:var(--blue-deep);
  border-radius:100px; padding:3px 10px; font-size:0.62rem; letter-spacing:0.08em;
}
.account-order-items{ list-style:none; padding:14px 0; display:flex; flex-direction:column; gap:7px; font-size:0.88rem; }
.account-order-foot{
  display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap;
  padding-top:12px; border-top:1px solid var(--line); font-size:0.72rem;
}

@media (max-width:860px){
  .account-grid{ grid-template-columns:1fr; gap:36px; }
  .account-form-row{ grid-template-columns:1fr; }
  .account-auth{ max-width:100%; }
}

/* ---------- home en móvil: el botón cabe dentro del óvalo ---------- */
@media (max-width:600px){
  .pedestal{ width:min(420px, 72vw); }
  .enter-btn{
    font-size:0.6rem;
    letter-spacing:0.1em;
    padding:11px 22px;
    white-space:nowrap;      /* que no parta "ENTER THE ARCHIVE" en dos líneas */
  }
  .room-tagline{ font-size:0.58rem; letter-spacing:0.12em; }
}

/* ---------- suscripción a la lista VIP (pie de página) ---------- */
.foot-signup{
  width:100%;
  max-width:560px;
  padding-bottom:30px;
  margin-bottom:6px;
}
.foot-signup-title{
  font-size:1rem;
  font-weight:700;
  letter-spacing:0.01em;
  color:var(--text);
  margin-bottom:14px;
}
.foot-signup-text{
  font-size:0.92rem;
  line-height:1.6;
  color:var(--dim);
  margin-bottom:28px;
}
.foot-signup-form{
  display:flex;
  align-items:center;
  gap:12px;
  border-bottom:1px solid var(--line);
  padding-bottom:12px;
}
.foot-signup-form input{
  flex:1;
  min-width:0;
  background:none;
  border:none;
  font-family:'Jost', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size:0.95rem;
  color:var(--text);
  padding:4px 0;
}
.foot-signup-form input::placeholder{ color:var(--dim); }
.foot-signup-form input:focus{ outline:none; }
.foot-signup-btn{
  background:none;
  border:none;
  font-size:1.2rem;
  line-height:1;
  color:var(--text);
  padding:2px 4px;
  transition:transform .2s ease, color .2s ease;
}
.foot-signup-btn:hover{ color:var(--blue); transform:translateX(3px); }
.foot-signup-msg{
  font-family:'Jost', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size:0.68rem;
  letter-spacing:0.04em;
  margin-top:12px;
  min-height:1em;
  color:var(--blue-deep);
}
.foot-signup-msg.is-error{ color:#8d2029; }

@media (max-width:600px){
  .foot-signup{ padding-bottom:22px; }
  .foot-signup-text{ font-size:0.86rem; margin-bottom:22px; }
}

/* foco discreto en los controles de filtro */
.filter-toggle:focus, .chip:focus{ outline:none; }
.filter-toggle:focus-visible, .chip:focus-visible{
  outline:none; text-decoration:underline; text-underline-offset:4px;
}

/* ---------- desplegable de orden (Sort) ---------- */
.sort-wrap{ position:relative; }
.sort-toggle{
  display:inline-flex; align-items:center; gap:7px;
  font-family:inherit; font-size:0.85rem; font-weight:400;
  color:var(--text); background:none; border:none; padding:0; cursor:pointer;
}
.sort-toggle:hover{ opacity:0.6; }
.sort-caret{ font-size:0.7rem; line-height:1; transition:transform .2s ease; }
.sort-menu.open + .sort-toggle .sort-caret,
.sort-wrap:has(.sort-menu.open) .sort-caret{ transform:rotate(180deg); }

.sort-menu{
  display:none;
  position:absolute; top:calc(100% + 14px); right:0; z-index:120;
  min-width:230px; padding:10px 0;
  background:var(--white);
  border:1px solid var(--line);
  box-shadow:0 10px 30px -12px rgba(0,0,0,0.18);
}
.sort-menu.open{ display:block; }
.sort-option{
  display:block; width:100%; text-align:left;
  padding:9px 20px 9px 42px; position:relative;
  font-family:inherit; font-size:0.88rem; font-weight:400;
  color:var(--text); background:none; border:none; cursor:pointer;
}
.sort-option:hover{ background:#f5f5f5; }
.sort-option.active::before{
  content:'\2713'; position:absolute; left:18px; top:50%; transform:translateY(-50%);
  font-size:0.85rem;
}

/* ---------- filtros: selección múltiple y limpiar ---------- */
.chip-multi.active{ text-decoration:underline; text-underline-offset:4px; font-weight:500; }
.filter-actions{ padding-top:14px; border-top:1px solid var(--line); }
.filter-clear{
  font-family:inherit; font-size:0.8rem; font-weight:400;
  color:#8a8a8a; background:none; border:none; padding:0; cursor:pointer;
  text-decoration:underline; text-underline-offset:3px;
}
.filter-clear:hover{ color:var(--text); }

@media (max-width:600px){
  .archive-head-right{ gap:18px; }
  .sort-menu{ min-width:200px; }
}

/* ---------- segunda foto al pasar el ratón por la tarjeta ---------- */
.piece-photo-alt{
  opacity:0;
  transition:opacity .35s ease;
  pointer-events:none;
}
.piece:hover .piece-photo-alt{ opacity:1; }

/* si hay segunda foto, el zoom estorba: se cambia la imagen en vez de ampliarla */
.piece.has-alt:hover .piece-photo img{ transform:none; }

/* en pantallas táctiles no hay ratón: se queda siempre la primera foto */
@media (hover:none){
  .piece-photo-alt{ display:none; }
}

/* ---------- redes sociales en el pie (iconos a la derecha) ---------- */
.foot-links{ flex:1 1 auto; }
.foot-social{
  display:flex; align-items:center; gap:18px;
  margin-left:auto;
}
.foot-social a{
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--text); text-decoration:none;
  line-height:1;
  transition:opacity .2s ease;
}
.foot-social-icon{ display:block; width:20px; height:20px; }
.foot-social a:hover{ opacity:0.55; }

@media (max-width:600px){
  .foot-social{ margin-left:0; gap:20px; }
  .foot-links{ flex:1 1 100%; }
}

/* ---------- texto justificado con partición de palabras ---------- */
/* Justificar sin guiones deja "ríos" de espacios blancos:
   hyphens:auto los evita partiendo las palabras al final de línea. */
.story-text p,
.legal-body p,
.foot-signup-text{
  text-align:justify;
  hyphens:auto;
  -webkit-hyphens:auto;
  text-wrap:pretty;
}

/* en móvil la columna es demasiado estrecha para justificar bien */
@media (max-width:600px){
  .story-text p,
  .legal-body p,
  .foot-signup-text{ text-align:left; hyphens:manual; }
}

/* ---------- piezas vendidas ---------- */
.piece.sold .piece-photo img,
.piece.sold .piece-photo .ph-fallback{
  filter:grayscale(1);
  opacity:0.45;
}
.piece.sold .piece-name{ color:#9a9a9a; }
.piece.sold .piece-price{ color:#9a9a9a; }
.piece.sold:hover .piece-photo img{ transform:none; }
.piece.sold .piece-photo-alt{ display:none; }

/* ficha de producto vendida */
.product-page.sold .product-gallery img{ filter:grayscale(1); opacity:0.5; }
.product-page.sold .product-price{ color:#9a9a9a; }
.product-add:disabled{
  background:#d5d5d5; color:#ffffff; cursor:not-allowed; opacity:1;
}
.product-add:disabled:hover{ background:#d5d5d5; }

/* ---------- subida de fotos (sourcing request) ---------- */
.upload-field{ display:flex; flex-direction:column; gap:9px; }
.upload-label{
  font-family:inherit; font-size:0.68rem; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--text);
}
.upload-hint{ text-transform:none; letter-spacing:0; color:#8a8a8a; font-size:0.72rem; }

.upload-drop{
  display:flex; align-items:center; justify-content:center;
  padding:26px 18px; cursor:pointer;
  border:1px dashed var(--line); border-radius:6px;
  background:none; transition:border-color .2s ease, background .2s ease;
}
.upload-drop:hover,
.upload-drop.dragging{ border-color:var(--blue); background:rgba(24,36,83,0.03); }
.upload-drop-text{ font-size:0.85rem; color:#8a8a8a; text-align:center; }

.upload-error{
  font-size:0.75rem; color:#8d2029; margin:0;
  display:none;
}
.upload-error.visible{ display:block; }

.upload-previews{ display:flex; flex-wrap:wrap; gap:10px; }
.upload-thumb{
  position:relative; width:72px; height:72px; border-radius:4px; overflow:hidden;
  border:1px solid var(--line);
}
.upload-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.upload-remove{
  position:absolute; top:3px; right:3px;
  width:20px; height:20px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  border:none; border-radius:50%;
  background:rgba(0,0,0,0.6); color:#fff; font-size:0.9rem; cursor:pointer;
}
.upload-remove:hover{ background:rgba(0,0,0,0.85); }

/* ---------- alineación vertical de la barra superior ----------
   Los enlaces del menú llevan padding-bottom para el subrayado, los
   selectores tienen su propia altura y los botones otra: eso hacía que
   cada elemento quedase a una altura distinta. Aquí se igualan todos. */
.topbar nav{ align-items:center; }

/* La alineación fina solo aplica en escritorio: en móvil el menú es un
   panel lateral con sus propias medidas, más grandes para el dedo. */
@media (min-width:861px){
  .topbar nav button:not(.nav-close),
  .topbar nav a:not(.nav-home){
    display:inline-flex;
    align-items:center;
    line-height:1;
    padding-top:3px;        /* compensa el padding-bottom del subrayado */
    padding-bottom:3px;
  }
}

/* el botón de cerrar y el enlace Home son solo del menú móvil */
.topbar nav .nav-close{ display:none; }

@media (max-width:860px){
  .topbar nav .nav-close{ display:block; }

  /* --- menú móvil: elementos grandes y bien separados --- */
  .topbar nav{
    width:min(88vw, 360px);
    padding:76px 26px 40px;
  }

  .topbar nav button:not(.nav-close),
  .topbar nav a{
    padding:20px 2px;          /* zona táctil alta y cómoda */
    font-size:0.95rem;
    letter-spacing:0.06em;
    min-height:60px;           /* nunca por debajo del mínimo recomendado */
    display:flex;
    align-items:center;
  }

  /* el enlace Home también lleva su línea separadora */
  .topbar nav .nav-home{
    border-bottom:1px solid rgba(233,238,247,0.14);
  }

  /* botón de cerrar: bien visible y fácil de pulsar */
  .nav-close{
    top:22px; right:22px;
    padding:10px 4px;
    font-size:0.72rem;
    color:rgba(233,238,247,0.75);
  }
}

.topbar-icons{ align-items:center; }
.topbar-icons > *{
  line-height:1;
  margin:0;
  align-self:center;
}
.currency-select,
.lang-select{
  line-height:1;
  height:auto;
  vertical-align:middle;
}
.icon-btn{ line-height:1; }
.bag-count{ line-height:1; }

/* ---------- opciones extra dentro del menú móvil ---------- */
.nav-extras{ display:none; }

@media (max-width:860px){
  /* en la barra superior solo queda la bolsa, con su contador */
  .topbar-icons .account-link,
  .topbar-icons .icon-btn:not(.bag-btn),
  .topbar-icons > .lang-select,
  .topbar-icons > .currency-select{ display:none; }

  /* el resto pasa al panel lateral, como una opción más del menú.
     'width:100%' es imprescindible: el <nav> es un flex con
     align-items:center, así que sin esto el bloque se encoge al ancho de
     su texto y Account/Search quedaban centrados y más estrechos. */
  .nav-extras{
    display:flex;
    flex-direction:column;
    width:100%;
    align-self:stretch;
    margin-top:0;
    padding-top:0;
    border-top:none;
  }
  .nav-extra-link{
    display:flex; align-items:center;
    width:100%; min-height:60px; padding:20px 2px;
    background:none; border:none;
    border-bottom:1px solid rgba(233,238,247,0.14);
    font-family:inherit; font-size:0.95rem; letter-spacing:0.06em;
    text-transform:uppercase; text-align:left;
    color:#e9eef7; text-decoration:none; cursor:pointer;
  }
  .nav-extra-link:hover{ color:#ffffff; }

  .nav-extra-selects{ display:flex; gap:26px; padding:22px 2px 0; }
  .nav-extras .lang-select,
  .nav-extras .currency-select{
    background:none; border:none; padding:6px 0;
    font-family:inherit; font-size:0.95rem; letter-spacing:0.04em;
    color:#e9eef7; cursor:pointer;
  }
  .nav-extras select option{ color:#16253c; }

  /* botón de cerrar: arriba del todo, grande y blanco */
  .nav-close{
    top:14px; right:18px;
    padding:12px 6px;
    font-size:1.5rem; line-height:1;
    letter-spacing:0;
    color:#ffffff;
  }
  .topbar nav{ padding-top:86px; }
}

/* ---------- menú móvil: compacto y sin scroll ---------- */
@media (max-width:860px){
  .topbar nav{
    padding:14px 24px 24px;     /* el botón de cerrar ya va en el flujo */
    gap:0;
  }

  /* la X deja de estar posicionada de forma absoluta: es el primer
     elemento del panel, alineado a la derecha. Así siempre sale arriba.
     El selector lleva 'button' porque '.topbar nav button' (más
     específico que '.nav-close') le estaba imponiendo el color negro
     y un tamaño de 0.72rem: por eso la cruz se veía diminuta y oscura. */
  .topbar nav button.nav-close{
    position:static;
    align-self:flex-end;
    order:-1;
    width:auto;
    margin:0 -8px 4px 0;
    padding:4px 10px;
    font-size:2.4rem;
    line-height:1;
    font-weight:300;
    color:#ffffff;
    border:none;
    background:none;
    text-transform:none;
    letter-spacing:0;
    min-height:0;
  }
  .topbar nav button.nav-close:hover{ color:#ffffff; }
  .topbar nav button.nav-close::after{ content:none; }

  /* opciones más juntas para que quepan todas en pantalla */
  .topbar nav button:not(.nav-close),
  .topbar nav a{
    min-height:52px;
    padding:14px 2px;
    font-size:0.92rem;
  }

  .nav-extras{
    width:100%;
    align-self:stretch;
    margin-top:0;
    padding-top:0;
    border-top:none;
  }
  .nav-extra-link{
    min-height:52px;
    padding:14px 2px;
    font-size:0.92rem;
  }
  .nav-extra-selects{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:22px;
    width:100%;
    padding:16px 2px 0;
  }
}

/* ---------- pie de página (escritorio) ----------
   Se adapta al ancho de la pantalla:
   · pantallas anchas (≥1240px): Sign up a la izquierda; logo, enlaces y
     redes a la derecha, con los enlaces en UNA línea a la altura del email.
   · portátiles pequeños / tablets (861–1239px): Sign up | logo arriba y
     enlaces | redes abajo, para que nada se apriete ni se parta.
   · móvil (≤860px): todo apilado (reglas generales). */
@media (min-width:861px){
  footer{
    display:grid;
    column-gap:clamp(32px, 4vw, 60px);
    row-gap:0;
    align-items:start;
    padding:56px clamp(16px,4vw,60px) 28px;
  }
  footer .foot-signup{ margin:0; padding:0; max-width:560px; }
  /* el SVG del logo es un cuadrado con mucho aire: se amplía y se recorta el margen */
  footer .foot-logo{ justify-self:end; height:clamp(70px, 6.5vw, 90px); width:auto;
                     margin:calc(clamp(70px, 6.5vw, 90px) * -0.38) -8px calc(clamp(70px, 6.5vw, 90px) * -0.38) 0; }
  footer .foot-links{ flex:none; column-gap:clamp(14px, 1.5vw, 22px); row-gap:10px; }
  footer .foot-social{ justify-self:end; margin:0; }
  footer .foot-bottom{ grid-column:1 / -1; margin-top:44px; }
}

@media (min-width:1240px){
  footer{
    grid-template-columns:minmax(320px, 560px) auto;
    grid-template-rows:auto 1fr auto;
    justify-content:space-between;
  }
  footer .foot-signup{ grid-column:1; grid-row:1 / 4; }
  footer .foot-logo{ grid-column:2; grid-row:1; }
  footer .foot-links{ grid-column:2; grid-row:2; align-self:end; justify-content:flex-end;
                      flex-wrap:nowrap; white-space:nowrap; margin-bottom:18px; }
  footer .foot-social{ grid-column:2; grid-row:3; margin-bottom:14px; }
  footer .foot-bottom{ grid-row:4; }
}

@media (min-width:861px) and (max-width:1239px){
  footer{
    grid-template-columns:minmax(0, 1fr) auto;
    row-gap:40px;
  }
  footer .foot-signup{ grid-column:1; grid-row:1; }
  footer .foot-logo{ grid-column:2; grid-row:1; }
  footer .foot-links{ grid-column:1; grid-row:2; align-self:center; justify-content:flex-start; flex-wrap:wrap; }
  footer .foot-social{ grid-column:2; grid-row:2; align-self:center; }
  footer .foot-bottom{ grid-row:3; margin-top:0; }
}