*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#f6f6f3;color:#111;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}.topbar{height:72px;padding:0 clamp(20px,4vw,64px);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #deded9;background:rgba(246,246,243,.92);backdrop-filter:blur(16px);position:sticky;top:0;z-index:40}.brand{display:flex;align-items:center;gap:12px;color:#111;text-decoration:none}.brand span{width:34px;height:34px;border-radius:50%;background:#111;color:#fff;display:grid;place-items:center;font-size:12px}.brand strong{font-size:15px}.topbar nav{display:flex;gap:26px}.topbar nav a{color:#555;text-decoration:none;font-size:14px}.eyebrow{font-size:11px;letter-spacing:.18em;font-weight:750;color:#777}.btn{border:0;border-radius:999px;padding:14px 22px;text-decoration:none;font-weight:700;font-size:14px;cursor:pointer;display:inline-flex;justify-content:center;align-items:center}.primary{background:#111;color:#fff}.ghost{background:#e9e9e4;color:#111}.full{width:100%}
.projector{max-width:1500px;margin:auto;padding:clamp(24px,4vw,60px) clamp(20px,4vw,64px) 58px;display:grid;grid-template-columns:minmax(0,1.75fr) minmax(320px,.65fr);gap:clamp(34px,5vw,82px);min-height:calc(100vh - 72px);align-items:center}.projector-stage{position:relative;min-width:0}.projector-image-wrap{height:min(78vh,880px);min-height:520px;display:grid;place-items:center;background:#ecece8;overflow:hidden}.projector-image-wrap img{width:100%;height:100%;object-fit:contain;transition:opacity .28s ease,transform .5s ease}.projector-image-wrap.is-changing img{opacity:.12;transform:scale(.992)}.projector-placeholder{width:100%;height:100%;background:#e5e5e0}.projector-controls{display:flex;align-items:center;justify-content:space-between;margin-top:15px}.projector-controls button{width:42px;height:42px;border:1px solid #d1d1cb;border-radius:50%;background:transparent;font-size:19px;cursor:pointer}.projector-count{display:flex;align-items:center;gap:10px;color:#777;font-size:12px}.projector-count i{width:48px;height:1px;background:#c8c8c2}.projector-copy{max-width:430px}.projector-copy h1{font-size:clamp(48px,5.2vw,84px);line-height:.93;letter-spacing:-.065em;margin:16px 0 18px;overflow-wrap:anywhere}.projector-artist{display:inline-block;color:#111;text-decoration:none;font-size:20px;font-weight:650;margin-bottom:10px}.projector-tech,.projector-desc{color:#777;line-height:1.6}.projector-desc{display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}.projector-actions{display:flex;gap:10px;margin-top:28px}.projector-dots{display:flex;gap:7px;flex-wrap:wrap;margin-top:34px}.projector-dots button{width:7px;height:7px;padding:0;border:0;border-radius:50%;background:#c7c7c0;cursor:pointer}.projector-dots button.active{background:#111}.projector-empty{grid-column:1/-1;min-height:65vh;display:flex;flex-direction:column;justify-content:center}.projector-empty h1{font-size:clamp(54px,8vw,112px);letter-spacing:-.06em;line-height:.92;max-width:950px;margin:18px 0}
.round-strip{border-top:1px solid #d8d8d2;border-bottom:1px solid #d8d8d2;background:#fff}.round-strip-inner{max-width:1500px;margin:auto;padding:18px clamp(20px,4vw,64px);display:grid;grid-template-columns:auto minmax(100px,1fr) auto minmax(220px,.85fr) auto;gap:24px;align-items:center}.round-mini,.round-price{display:flex;flex-direction:column;gap:3px}.round-mini span,.round-price span{font-size:10px;letter-spacing:.12em;color:#777}.round-mini strong,.round-price strong{font-size:17px}.round-progress{height:3px;background:#e7e7e2;overflow:hidden}.round-progress i{display:block;height:100%;background:#111}.round-strip p{margin:0;color:#666;font-size:13px}.round-strip p strong{color:#111}
.works,.grid-section,.how,.artist-page,.admin-page,.statement{max-width:1320px;margin:auto;padding-left:clamp(20px,4vw,64px);padding-right:clamp(20px,4vw,64px)}.works{padding-top:110px;padding-bottom:120px}.section-head{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:36px}.section-head h2{font-size:clamp(38px,4vw,62px);line-height:1;letter-spacing:-.045em;margin:12px 0 0}.section-head p{color:#777}.works-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:34px 18px}.work-card{grid-column:span 4}.work-card:nth-child(5n+1){grid-column:span 5}.work-card:nth-child(5n+2){grid-column:span 3}.work-card:nth-child(5n+3){grid-column:span 4}.work-image{border:0;padding:0;background:#e9e9e5;width:100%;aspect-ratio:4/5;overflow:hidden;cursor:pointer}.work-image img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}.work-card:hover .work-image img{transform:scale(1.018)}.placeholder{width:100%;height:100%;background:#e5e5e0}.work-meta{display:flex;justify-content:space-between;gap:15px;padding-top:14px}.work-meta h3{font-size:17px;margin:4px 0}.work-meta p{font-size:13px;color:#777;margin:0}.artist-link{font-size:12px;color:#777;text-decoration:none}.like{border:0;background:transparent;display:flex;align-items:center;gap:6px;font-size:14px;cursor:pointer}.like span{font-size:24px}.like.liked span{color:#111}
.statement{padding-top:20px;padding-bottom:120px;display:grid;grid-template-columns:1fr 1.25fr;gap:7vw;align-items:start}.statement h2{font-size:clamp(46px,5vw,78px);line-height:.96;letter-spacing:-.055em;margin:12px 0}.statement p{font-size:19px;line-height:1.7;color:#666;max-width:620px;margin-top:40px}
.grid-section{background:#fff;border-radius:34px;padding-top:58px;padding-bottom:58px;margin-bottom:115px}.availability{font-size:14px;color:#777}.availability strong{font-size:30px;color:#111}.number-grid{display:grid;grid-template-columns:repeat(10,1fr);gap:8px}.num{aspect-ratio:1;border:1px solid #dcdcd7;background:#fff;border-radius:10px;font-weight:700;cursor:pointer}.num{transition:background .14s ease,color .14s ease,border-color .14s ease}.num>span{display:inline-block;transition:transform .16s ease}.num.available:not(.selected):hover{background:#fff;color:#111;border-color:#c8c8c2}.num.available:hover>span{transform:scale(1.12)}.num.selected{background:#111;color:white;border-color:#111}.num.selected:hover{background:#111;color:#fff;border-color:#111}.num.reservado{background:#ecece7;color:#aaa}.num.pagado{background:#111;color:white}.legend{display:flex;gap:22px;margin-top:22px;color:#777;font-size:12px}.l{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;background:white;border:1px solid #bbb}.l.reserved{background:#e5e5df}.l.paid{background:#111}.how{padding-bottom:130px}.how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:26px}.how-grid div{border-top:1px solid #ccc;padding:22px 0}.how-grid b{font-size:12px;color:#888}.how-grid h3{font-size:25px;margin:24px 0 10px}.how-grid p{color:#777}
.selection{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:50;background:#111;color:#fff;border-radius:18px;padding:12px 12px 12px 20px;display:flex;align-items:center;gap:32px;box-shadow:0 18px 60px #0004;min-width:min(560px,calc(100vw - 28px))}.selection[hidden]{display:none}.selection div{display:flex;flex-direction:column;min-width:0}.selection span{font-size:12px;color:#bbb;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.selection button{margin-left:auto;border:0;border-radius:12px;background:white;padding:14px 22px;font-weight:700}.modal{position:fixed;inset:0;background:#0007;display:none;place-items:center;padding:20px;z-index:60}.modal.open{display:grid}.dialog{width:min(600px,100%);max-height:92vh;overflow:auto;background:#f8f8f5;border-radius:28px;padding:32px;position:relative}.dialog h2{font-size:38px;letter-spacing:-.04em;margin:12px 0}.dialog>p{color:#777}.close{position:absolute;right:18px;top:16px;border:0;background:none;font-size:30px;cursor:pointer}.dialog label{display:block;font-size:12px;color:#666;margin-top:16px}.dialog input,.dialog textarea{width:100%;border:1px solid #d7d7d2;background:white;border-radius:12px;padding:14px;margin-top:6px;font:inherit}.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}.participant{display:grid!important;grid-template-columns:54px 1fr;align-items:center;gap:8px}.participant span{font-weight:800;color:#111}.form-total{display:flex;justify-content:space-between;border-top:1px solid #ddd;margin:24px 0;padding-top:18px}.error{color:#a22;font-size:13px;margin:8px 0}.work-dialog{width:min(1060px,100%);padding:0;overflow:hidden}.work-detail{display:grid;grid-template-columns:1.05fr .95fr;min-height:620px}.work-detail-image{background:#e8e8e4;min-height:620px}.work-detail-image img{width:100%;height:100%;object-fit:contain}.work-detail-copy{padding:50px}.work-detail-copy h2{font-size:52px}.artist-big{font-size:20px;color:#111;text-decoration:none}.tech,.desc{color:#777;line-height:1.65}.work-actions{display:flex;gap:10px;margin:30px 0}.comment-box textarea{min-height:110px}.artist-page{padding-top:80px;padding-bottom:100px}.artist-hero{display:grid;grid-template-columns:220px 1fr;gap:60px;max-width:1000px;margin-bottom:90px}.artist-avatar{width:220px;height:220px;border-radius:50%;overflow:hidden;background:#111;color:#fff;display:grid;place-items:center;font-size:80px}.artist-avatar img{width:100%;height:100%;object-fit:cover}.artist-hero h1{font-size:70px;letter-spacing:-.05em;margin:12px 0}.artist-bio{max-width:700px;color:#555;font-size:18px;line-height:1.7}.artist-links a{margin-right:18px;color:#111}.admin-page{padding-top:70px}.admin-page h1{font-size:64px}.admin-table article{display:grid;grid-template-columns:1fr auto auto;gap:24px;align-items:center;padding:20px 0;border-top:1px solid #ddd}.admin-table article>div{display:flex;flex-direction:column;gap:4px}.admin-table span{color:#777;font-size:13px}.admin-table form{display:flex;gap:8px}.admin-table button{border:0;border-radius:8px;padding:10px 12px}.admin-table .danger{color:#922}.status.pagado{color:#08783f}.status.cancelado{color:#999}
@media(max-width:980px){.projector{grid-template-columns:1fr;min-height:auto}.projector-image-wrap{height:62vh;min-height:440px}.projector-copy{max-width:700px}.round-strip-inner{grid-template-columns:auto 1fr auto}.round-strip p{display:none}.round-strip .btn{grid-column:auto}.statement{grid-template-columns:1fr;gap:0}.statement p{margin-top:8px}}
@media(max-width:800px){.topbar nav a:not(:last-child){display:none}.projector{padding-top:22px;gap:26px}.projector-image-wrap{height:56vh;min-height:360px}.projector-copy h1{font-size:52px}.projector-desc{display:none}.projector-actions{margin-top:20px}.round-strip-inner{grid-template-columns:1fr auto;gap:14px}.round-progress{grid-column:1/-1;grid-row:2}.round-price{display:none}.works{padding-top:80px}.works-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px 10px}.work-card,.work-card:nth-child(n){grid-column:auto}.section-head{align-items:start;flex-direction:column}.grid-section{border-radius:24px;margin-left:10px;margin-right:10px}.number-grid{grid-template-columns:repeat(5,1fr)}.how-grid{grid-template-columns:1fr}.work-detail{grid-template-columns:1fr}.work-detail-image{min-height:420px}.work-detail-copy{padding:28px}.work-detail-copy h2{font-size:40px}.artist-hero{grid-template-columns:1fr}.artist-avatar{width:150px;height:150px}.artist-hero h1{font-size:48px}.two{grid-template-columns:1fr}.admin-table article{grid-template-columns:1fr}.selection{bottom:10px}.projector-actions{flex-wrap:wrap}}

/* V3 — Portada editorial: texto a la izquierda, obras a la derecha */
.site-hero{max-width:1600px;min-height:calc(100vh - 72px);padding:clamp(44px,6vw,92px) clamp(20px,5vw,80px) clamp(54px,6vw,96px);display:grid;grid-template-columns:minmax(340px,.8fr) minmax(0,1.35fr);gap:clamp(48px,7vw,120px);align-items:center;margin:auto}
.hero-intro{max-width:590px;align-self:center}.hero-intro .eyebrow{display:block;margin-bottom:24px;color:#5d5d58}.hero-intro h1{font-size:clamp(56px,6.2vw,108px);line-height:.91;letter-spacing:-.07em;font-weight:760;margin:0;max-width:680px}.hero-intro h1 em{font-style:normal;font-weight:420;color:#777}.hero-lead{font-size:clamp(17px,1.4vw,21px);line-height:1.55;color:#64645f;max-width:520px;margin:34px 0 0}.hero-actions{display:flex;gap:10px;margin-top:30px}.hero-round{margin-top:54px;padding-top:18px;border-top:1px solid #d6d6d0;display:grid;grid-template-columns:auto auto;gap:7px 18px;align-items:center;max-width:430px}.hero-round>span{font-size:10px;letter-spacing:.16em;font-weight:800;color:#777}.hero-round>strong{justify-self:end;font-size:13px}.hero-round>i{grid-column:1/-1;display:block;height:2px;background:#deded8;overflow:hidden}.hero-round>i b{display:block;height:100%;background:#111}.hero-round>small{grid-column:1/-1;color:#7a7a74;font-size:12px}
.hero-showcase{position:relative;min-width:0}.hero-showcase .projector-stage{display:block}.hero-showcase .projector-image-wrap{height:min(72vh,820px);min-height:560px;background:#e9e9e4;display:flex;align-items:center;justify-content:center;overflow:hidden}.hero-showcase .projector-image-wrap img{width:100%;height:100%;object-fit:contain;display:block;transition:opacity .18s ease,transform .35s ease}.hero-showcase .projector-image-wrap.is-changing img{opacity:.15;transform:scale(.995)}.hero-art-meta{display:flex;justify-content:space-between;align-items:flex-start;gap:28px;padding-top:18px}.hero-art-copy{min-width:0}.hero-art-copy h2{font-size:clamp(25px,2.4vw,38px);letter-spacing:-.04em;margin:4px 0 5px;line-height:1}.hero-art-copy .projector-artist{font-size:13px;color:#6d6d68;text-decoration:none}.hero-art-copy .projector-tech{margin:0;color:#7b7b76;font-size:13px;white-space:normal}.hero-showcase .projector-controls{display:flex;align-items:center;gap:12px;flex:0 0 auto}.hero-showcase .projector-controls button{width:38px;height:38px;border:1px solid #d4d4cf;background:transparent;border-radius:50%;font-size:16px;cursor:pointer}.hero-showcase .projector-count{display:flex;align-items:center;gap:8px;font-size:11px;color:#777}.hero-showcase .projector-count i{width:28px;height:1px;background:#c7c7c1}.hero-showcase .projector-dots{display:flex;gap:5px;margin-top:12px}.hero-showcase .projector-dots button{width:20px;height:2px;border:0;padding:0;background:#d4d4cf;cursor:pointer}.hero-showcase .projector-dots button.active{background:#111}.hero-view-work{position:absolute;right:18px;top:18px;border:0;background:rgba(246,246,243,.92);backdrop-filter:blur(8px);border-radius:999px;padding:10px 14px;font:inherit;font-size:12px;font-weight:750;cursor:pointer}.site-hero+.works{padding-top:24px}.round-strip{margin-top:40px}
@media(max-width:1100px){.site-hero{grid-template-columns:minmax(300px,.8fr) minmax(0,1.2fr);gap:50px}.hero-intro h1{font-size:clamp(52px,7vw,78px)}.hero-showcase .projector-image-wrap{height:60vh;min-height:500px}}
@media(max-width:820px){.site-hero{grid-template-columns:1fr;min-height:auto;padding-top:42px;gap:42px}.hero-intro{max-width:none}.hero-intro h1{font-size:clamp(54px,15vw,82px)}.hero-lead{font-size:17px;max-width:620px}.hero-round{margin-top:34px}.hero-showcase .projector-image-wrap{height:62vh;min-height:420px}.hero-art-meta{gap:16px}.hero-art-copy h2{font-size:30px}.hero-showcase .projector-controls{gap:8px}.hero-showcase .projector-controls button{width:34px;height:34px}.site-hero+.works{padding-top:8px}}
@media(max-width:560px){.site-hero{padding-left:16px;padding-right:16px}.hero-intro h1{font-size:clamp(50px,16vw,68px)}.hero-actions{flex-wrap:wrap}.hero-showcase .projector-image-wrap{height:54vh;min-height:360px}.hero-art-meta{display:grid;grid-template-columns:1fr auto}.hero-showcase .projector-count{display:none}.hero-view-work{right:12px;top:12px}.hero-round{max-width:none}}


/* =========================================================
   V4 · PORTADA / OBRA ÚNICA SOBRE ESCRITORIO
   Las imágenes son exactamente las mismas obras de la galería.
   Aparecen una a una, se desvanecen y cambian con una leve
   variación de posición y rotación.
========================================================= */
.site-hero{
  grid-template-columns:minmax(390px,1fr) minmax(0,1.12fr);
  gap:clamp(44px,5.5vw,94px);
}
.hero-intro{
  max-width:680px;
}
.hero-intro h1{
  max-width:760px;
  font-size:clamp(62px,6.5vw,112px);
}
.hero-lead{
  max-width:585px;
}
.hero-showcase{
  min-height:min(76vh,840px);
  display:grid;
  grid-template-rows:minmax(0,1fr) auto auto;
  align-items:center;
}
.hero-showcase .projector-stage{
  position:relative;
  min-height:min(68vh,760px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(24px,4vw,62px);
  overflow:hidden;
  background:
    radial-gradient(circle at 20% 10%,rgba(255,255,255,.58),transparent 34%),
    linear-gradient(145deg,#ebe5db 0%,#e2dbd0 100%);
}
.hero-showcase .projector-stage::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.42;
  background:
    repeating-linear-gradient(0deg,rgba(63,50,35,.018) 0 1px,transparent 1px 5px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.08) 0 1px,transparent 1px 8px);
}
.hero-showcase .projector-image-wrap{
  --photo-rot:-2.2deg;
  --photo-x:-8px;
  --photo-y:3px;
  position:relative;
  z-index:2;
  width:auto;
  height:auto;
  min-height:0;
  max-width:92%;
  padding:clamp(8px,1vw,13px);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  overflow:visible;
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 30px 64px rgba(28,23,18,.20),0 3px 10px rgba(28,23,18,.10);
  transform:translate(var(--photo-x),var(--photo-y)) rotate(var(--photo-rot));
  transform-origin:50% 54%;
  transition:opacity .62s ease,transform .85s cubic-bezier(.2,.75,.15,1),filter .62s ease;
  opacity:1;
  filter:blur(0);
}
.hero-showcase .projector-image-wrap img{
  width:auto;
  height:auto;
  max-width:100%;
  max-height:min(62vh,690px);
  object-fit:contain;
  display:block;
  background:#f4f3ef;
  transition:none;
}
.hero-showcase .projector-image-wrap.is-changing{
  opacity:0;
  filter:blur(3px);
  transform:translate(calc(var(--photo-x) * .25),calc(var(--photo-y) * .25)) rotate(calc(var(--photo-rot) * .35)) scale(.975);
}
.hero-showcase .projector-image-wrap.is-changing img{
  opacity:1;
  transform:none;
}
.hero-art-meta{
  padding-top:15px;
}
.hero-art-copy h2{
  font-size:clamp(23px,2vw,34px);
  margin-top:3px;
}
.hero-art-copy .projector-artist,
.hero-art-copy .projector-tech{
  font-size:12px;
}
.hero-showcase .projector-dots{
  margin-top:10px;
}
.hero-view-work{
  top:18px;
  right:18px;
  z-index:5;
}
@media(max-width:1100px){
  .site-hero{
    grid-template-columns:minmax(330px,.95fr) minmax(0,1.05fr);
    gap:42px;
  }
  .hero-intro h1{font-size:clamp(56px,7vw,84px)}
  .hero-showcase .projector-stage{min-height:58vh}
  .hero-showcase .projector-image-wrap img{max-height:52vh}
}
@media(max-width:820px){
  .site-hero{grid-template-columns:1fr;gap:34px}
  .hero-intro{max-width:none}
  .hero-showcase{min-height:0}
  .hero-showcase .projector-stage{min-height:54vh;padding:28px 18px}
  .hero-showcase .projector-image-wrap{max-width:94%}
  .hero-showcase .projector-image-wrap img{max-height:47vh}
}
@media(max-width:560px){
  .hero-showcase .projector-stage{min-height:48vh;padding:22px 12px}
  .hero-showcase .projector-image-wrap{padding:7px;max-width:96%}
  .hero-showcase .projector-image-wrap img{max-height:42vh}
  .hero-art-meta{padding-top:12px}
}


/* ===== V5 portada limpia + galería variable ===== */
body{background:#fbfbf9}
.site-hero{background:#fff;border-bottom:1px solid #efeee8}
.hero-intro{max-width:620px}
.hero-intro h1{max-width:9.5ch}
.hero-lead{max-width:52ch}
.hero-showcase{display:flex;flex-direction:column;justify-content:center}
.hero-showcase .projector-stage{
  min-height:62vh;
  padding:clamp(18px,2vw,30px);
  background:transparent !important;
  box-shadow:none !important;
}
.hero-showcase .projector-stage::before{display:none !important}
.hero-showcase .projector-image-wrap{
  background:#f7f3ea !important;
  border:1px solid rgba(46,36,24,.08);
  box-shadow:0 22px 46px rgba(24,23,20,.08), 0 6px 16px rgba(24,23,20,.04) !important;
}
.hero-showcase .projector-image-wrap img{
  background:#fff !important;
}
.hero-view-work{
  background:rgba(255,255,255,.94) !important;
  border:1px solid rgba(17,17,17,.08);
  box-shadow:0 10px 24px rgba(24,23,20,.06);
}
.works{padding-top:48px}
.works-grid{align-items:start}
.work-card{position:relative}
.work-image{
  background:transparent !important;
  overflow:visible;
  aspect-ratio:auto;
}
.work-image img,.work-image .placeholder{
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  display:block;
  background:#fff;
  padding:8px;
  border:1px solid rgba(46,36,24,.08);
  box-shadow:0 14px 34px rgba(24,23,20,.08), 0 3px 10px rgba(24,23,20,.04);
  transform:translateY(var(--card-shift,0px)) rotate(var(--card-rot,0deg));
  transform-origin:50% 50%;
  transition:transform .45s ease, box-shadow .45s ease;
}
.work-image .placeholder{background:#efefe9}
.work-card:hover .work-image img,
.work-card:hover .work-image .placeholder{
  transform:translateY(calc(var(--card-shift,0px) - 4px)) rotate(var(--card-rot,0deg)) scale(1.012);
  box-shadow:0 18px 40px rgba(24,23,20,.10), 0 6px 16px rgba(24,23,20,.05);
}
@media(max-width:820px){
  .hero-showcase .projector-stage{min-height:50vh;padding:14px}
  .hero-showcase .projector-image-wrap{max-width:96%}
  .works{padding-top:28px}
  .work-image img,.work-image .placeholder{padding:6px}
}


/* =========================================================
   V6 FIX ESTABLE
   - Portada: texto solicitado + obra protagonista más grande.
   - Galería: mantiene orden aleatorio por carga, pero SIN giros
     ni desplazamientos visuales.
   - No modifica la lógica JS funcional de V5.
========================================================= */

.site-hero{
  grid-template-columns:minmax(360px,.88fr) minmax(0,1.12fr);
  gap:clamp(46px,6vw,96px);
}

.hero-intro{
  max-width:570px;
}

.hero-intro h1{
  max-width:10.5ch;
  font-size:clamp(68px,7.4vw,126px);
  line-height:.90;
  letter-spacing:-.075em;
}

.hero-lead{
  margin-top:24px;
  max-width:30ch;
  font-size:clamp(19px,1.55vw,24px);
  line-height:1.45;
}

.hero-showcase .projector-stage{
  min-height:70vh;
  padding:clamp(8px,1.2vw,18px);
  background:transparent !important;
}

.hero-showcase .projector-image-wrap{
  max-width:98%;
  padding:10px;
  background:#f7f3ea !important;
  box-shadow:
    0 30px 60px rgba(24,23,20,.10),
    0 8px 22px rgba(24,23,20,.05) !important;
}

.hero-showcase .projector-image-wrap img{
  max-height:min(72vh,850px);
  background:#fff !important;
}

.hero-art-meta{
  padding-top:18px;
}

.hero-art-copy h2{
  font-size:clamp(27px,2.5vw,40px);
}

/* Galería ordenada visualmente: sin rotación ni desniveles.
   El JS de V5 puede seguir reordenando las obras aleatoriamente
   en cada carga, pero no altera la alineación visual. */
.work-image img,
.work-image .placeholder{
  transform:none !important;
}

.work-card:hover .work-image img,
.work-card:hover .work-image .placeholder{
  transform:scale(1.012) !important;
}

@media(max-width:1100px){
  .site-hero{
    grid-template-columns:minmax(320px,.9fr) minmax(0,1.1fr);
    gap:42px;
  }
  .hero-intro h1{
    font-size:clamp(58px,7vw,96px);
  }
  .hero-showcase .projector-stage{
    min-height:62vh;
  }
  .hero-showcase .projector-image-wrap img{
    max-height:60vh;
  }
}

@media(max-width:820px){
  .site-hero{
    grid-template-columns:1fr;
    gap:30px;
  }
  .hero-intro{
    max-width:none;
  }
  .hero-intro h1{
    max-width:none;
    font-size:clamp(54px,15vw,82px);
  }
  .hero-lead{
    max-width:none;
    font-size:18px;
  }
  .hero-showcase .projector-stage{
    min-height:56vh;
    padding:10px;
  }
  .hero-showcase .projector-image-wrap{
    max-width:100%;
  }
  .hero-showcase .projector-image-wrap img{
    max-height:50vh;
  }
}

@media(max-width:560px){
  .hero-showcase .projector-stage{
    min-height:50vh;
  }
  .hero-showcase .projector-image-wrap img{
    max-height:44vh;
  }
}


/* =========================================================
   V7 POLAROID EN MOVIMIENTO
   - tipografía algo menor a la izquierda
   - palabra gana en gris
   - proyector más grande
   - marco blanco hueso tipo polaroid con base inferior amplia
   - solo artista bajo la imagen
   - galería inferior recta y ordenada
========================================================= */
.word-muted{color:#9a9a96;font-weight:650}
.site-hero{
  grid-template-columns:minmax(340px,.78fr) minmax(0,1.22fr);
  gap:clamp(38px,5vw,80px);
}
.hero-intro{max-width:535px}
.hero-intro h1{
  max-width:10.8ch;
  font-size:clamp(58px,6.3vw,102px);
  line-height:.92;
  letter-spacing:-.068em;
}
.hero-lead{
  margin-top:22px;
  font-size:clamp(18px,1.4vw,22px);
  max-width:31ch;
}
.hero-showcase .projector-stage{
  min-height:72vh;
  padding:clamp(4px,.8vw,12px);
  background:transparent !important;
  overflow:visible;
}
.hero-showcase .projector-image-wrap{
  --photo-rot:-1.2deg;
  --photo-x:-3px;
  --photo-y:1px;
  max-width:99%;
  padding:12px 12px 64px !important;
  background:#fffdf8 !important;
  border:1px solid rgba(20,20,18,.055);
  box-shadow:0 30px 64px rgba(15,15,13,.11),0 10px 24px rgba(15,15,13,.055) !important;
  transition:opacity .58s ease,transform .82s cubic-bezier(.2,.75,.15,1),filter .58s ease !important;
}
.hero-showcase .projector-image-wrap img{
  max-height:min(74vh,860px);
  background:#fff !important;
  object-fit:contain;
}
.hero-showcase .projector-image-wrap.is-changing{
  opacity:0;
  filter:blur(2.5px);
  transform:translate(calc(var(--photo-x) * .25),calc(var(--photo-y) * .25)) rotate(calc(var(--photo-rot) * .35)) scale(.985) !important;
}
.hero-art-meta-only{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  padding-top:14px;
}
.hero-art-meta-only .projector-artist{
  font-size:14px;
  color:#23211e;
  font-weight:700;
  margin:0;
}
.hero-art-meta-only .projector-controls{margin:0}
.hero-art-meta-only + .projector-dots{margin-top:10px}
/* Galería inferior: sin giros ni desniveles */
.work-image img,.work-image .placeholder{transform:none !important}
.work-card:hover .work-image img,.work-card:hover .work-image .placeholder{transform:translateY(-3px) scale(1.01) !important}
@media(max-width:1100px){
  .site-hero{grid-template-columns:minmax(300px,.82fr) minmax(0,1.18fr);gap:36px}
  .hero-intro h1{font-size:clamp(54px,6.6vw,88px)}
  .hero-showcase .projector-stage{min-height:64vh}
  .hero-showcase .projector-image-wrap img{max-height:62vh}
}
@media(max-width:820px){
  .site-hero{grid-template-columns:1fr;gap:28px}
  .hero-intro{max-width:none}
  .hero-intro h1{font-size:clamp(50px,14vw,76px);max-width:none}
  .hero-showcase .projector-stage{min-height:56vh;padding:6px}
  .hero-showcase .projector-image-wrap{max-width:100%;padding:8px 8px 48px !important}
  .hero-showcase .projector-image-wrap img{max-height:50vh}
}

/* =========================================================
   EXPERIENCIA ARTISTA + POLAROID V8
   Ajustes finales de portada, móvil, video y ficha de obra.
========================================================= */

/* Portada: artista integrado al marco inferior */
.hero-showcase .projector-stage{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  padding-left:58px;
  padding-right:58px;
}

.hero-showcase .projector-image-wrap{
  position:relative;
  display:flex !important;
  flex-direction:column;
  width:min(100%,760px);
  height:auto !important;
  min-height:0 !important;
  max-width:100%;
  padding:12px 12px 58px !important;
  background:#fff !important;
  overflow:visible !important;
  border:1px solid rgba(18,18,18,.045);
  box-shadow:0 28px 62px rgba(22,22,20,.11),0 8px 22px rgba(22,22,20,.05) !important;
  transform:translate(var(--photo-x,0),var(--photo-y,0)) rotate(var(--photo-rot,0deg));
  transform-origin:center center;
  transition:opacity .42s ease,transform .7s cubic-bezier(.2,.7,.2,1),box-shadow .4s ease;
}

.projector-photo-area{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:#fff;
}

.hero-showcase .projector-image-wrap img,
.hero-showcase .projector-placeholder{
  display:block;
  width:100% !important;
  height:auto !important;
  max-height:min(72vh,820px) !important;
  object-fit:contain !important;
  background:#fff !important;
}

.hero-showcase .projector-image-wrap.is-changing{
  opacity:.08;
  transform:translate(var(--photo-x,0),calc(var(--photo-y,0) + 7px)) rotate(var(--photo-rot,0deg)) scale(.992);
}

.projector-polaroid-caption{
  position:absolute;
  left:18px;
  right:18px;
  bottom:14px;
  min-height:28px;
  display:flex;
  align-items:flex-end;
  justify-content:flex-start;
}

.projector-polaroid-caption .projector-artist{
  margin:0;
  color:#373633;
  text-decoration:none;
  font-size:12px;
  line-height:1.2;
  font-weight:560;
  letter-spacing:.015em;
}

.projector-polaroid-caption .projector-artist:hover{
  color:#111;
}

.projector-side-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:5;
  width:42px;
  height:42px;
  border-radius:50%;
  border:1px solid #deddd7;
  background:rgba(255,255,255,.94);
  color:#222;
  display:grid;
  place-items:center;
  cursor:pointer;
  font-size:16px;
  box-shadow:0 7px 20px rgba(0,0,0,.055);
  transition:transform .2s ease,box-shadow .2s ease;
}

.projector-side-arrow:hover{
  transform:translateY(-50%) scale(1.04);
  box-shadow:0 10px 26px rgba(0,0,0,.08);
}

.projector-side-arrow.prev{left:4px}
.projector-side-arrow.next{right:4px}

.hero-art-meta-only{
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  padding-top:12px !important;
  min-height:28px;
}

.hero-art-meta-only .projector-count{
  display:flex;
  align-items:center;
  gap:8px;
  color:#85827c;
  font-size:11px;
}

.hero-art-meta-only .projector-count i{
  display:block;
  width:28px;
  height:1px;
  background:#d2d0ca;
}

/* Video discreto bajo la obra */
.work-video-link{
  margin-top:10px;
  padding:0;
  border:0;
  background:transparent;
  color:#5c5953;
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  font-weight:650;
  cursor:pointer;
}

.play-dot{
  width:25px;
  height:25px;
  border:1px solid #d5d2ca;
  border-radius:50%;
  display:inline-grid;
  place-items:center;
  font-size:9px;
  padding-left:1px;
  background:#fff;
  color:#222;
}

.work-video-link:hover .play-dot{
  border-color:#222;
}

/* Ficha de obra: nunca corta la información */
.work-modal{
  align-items:center;
  overflow-y:auto;
}

.work-dialog{
  width:min(1080px,100%);
  max-height:calc(100dvh - 28px) !important;
  overflow:auto !important;
  overscroll-behavior:contain;
}

.work-detail{
  min-height:0 !important;
  align-items:stretch;
}

.work-detail-image{
  min-height:0 !important;
  display:flex;
  align-items:center;
  justify-content:center;
}

.work-detail-image img{
  width:100%;
  height:auto !important;
  max-height:calc(100dvh - 80px);
  object-fit:contain;
}

.work-detail-copy{
  min-width:0;
  overflow:visible;
}

.work-actions{
  display:flex;
  flex-wrap:wrap;
}

.comments-thread{
  margin-top:26px;
  padding-top:20px;
  border-top:1px solid #e2e0da;
}

.comments-thread-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}

.comments-thread-head strong{font-size:14px}
.comments-thread-head span{font-size:12px;color:#8a867e}
.comment-list{display:grid;gap:10px}
.comment-item{
  padding:13px 14px;
  background:#fff;
  border:1px solid #ebe9e3;
  border-radius:14px;
}
.comment-item header{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  margin-bottom:6px;
}
.comment-item header strong{font-size:13px}
.comment-item header time{font-size:11px;color:#98948c}
.comment-item p{margin:0;color:#504d47;line-height:1.5;font-size:13px}
.artist-reply{
  margin-top:10px;
  padding:10px 12px;
  border-left:2px solid #111;
  background:#f7f6f1;
  color:#45423d;
  font-size:12px;
  line-height:1.5;
}
.artist-reply b{display:block;margin-bottom:3px;color:#111}
.comment-empty{font-size:13px;color:#8b877f}

.video-dialog{
  width:min(880px,100%);
  background:#111;
  padding:18px;
  border-radius:24px;
}
.video-dialog .close{color:#fff;z-index:2}
.video-dialog video{
  display:block;
  width:100%;
  max-height:78vh;
  background:#000;
  border-radius:14px;
}
.video-dialog p{
  margin:10px 2px 0;
  color:#ddd;
  font-size:13px;
}

/* Perfil público del artista */
.artist-page{
  max-width:1400px;
  margin:0 auto;
  padding:clamp(48px,7vw,100px) clamp(20px,5vw,72px) 110px;
}
.artist-hero{
  display:grid;
  grid-template-columns:minmax(170px,240px) minmax(0,1fr);
  gap:clamp(34px,6vw,84px);
  align-items:start;
  max-width:1100px;
  margin-bottom:80px;
}
.artist-avatar{
  width:100%;
  aspect-ratio:1;
  height:auto;
  border-radius:0;
  background:#efeee9;
  overflow:hidden;
  display:grid;
  place-items:center;
  color:#555;
  font-size:72px;
}
.artist-avatar img{
  width:100%;height:100%;object-fit:cover;
  object-position:var(--profile-photo-x,50%) var(--profile-photo-y,50%);
  transform:scale(1.12);
  transform-origin:var(--profile-photo-x,50%) var(--profile-photo-y,50%);
}
.artist-profile-copy h1{
  margin:8px 0 10px;
  font-size:clamp(46px,6.5vw,88px);
  line-height:.94;
  letter-spacing:-.065em;
}
.artist-city{margin:0 0 24px;color:#858078}
.artist-bio{max-width:720px;color:#4f4b45;font-size:17px;line-height:1.72}
.artist-socials{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:22px;
}
.artist-socials a{
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:34px;
  padding:7px 12px;
  border:1px solid #dedbd3;
  border-radius:999px;
  background:#fff;
  color:#292824;
  font-size:12px;
  font-weight:650;
}
.artist-socials a::after{content:'↗';font-size:10px;color:#8e8a82}
.artist-video-trigger{
  margin-top:22px;
  border:0;
  background:transparent;
  padding:0;
  display:inline-flex;
  align-items:center;
  gap:9px;
  color:#33312e;
  font-weight:650;
  cursor:pointer;
}
.artist-section{margin-top:56px}

@media(max-width:820px){
  /* Portada móvil: máxima anchura y ninguna inclinación */
  .site-hero{
    padding-left:10px !important;
    padding-right:10px !important;
  }
  .hero-showcase{
    width:100%;
  }
  .hero-showcase .projector-stage{
    width:100%;
    min-height:0 !important;
    padding:8px 34px 0 !important;
  }
  .hero-showcase .projector-image-wrap{
    width:100% !important;
    max-width:none !important;
    padding:8px 8px 48px !important;
    transform:none !important;
    --photo-rot:0deg !important;
    --photo-x:0px !important;
    --photo-y:0px !important;
  }
  .hero-showcase .projector-image-wrap.is-changing{
    transform:translateY(5px) scale(.994) !important;
  }
  .hero-showcase .projector-image-wrap img,
  .hero-showcase .projector-placeholder{
    width:100% !important;
    height:auto !important;
    max-height:none !important;
  }
  .projector-polaroid-caption{
    left:14px;
    right:14px;
    bottom:12px;
  }
  .projector-polaroid-caption .projector-artist{
    font-size:11px;
  }
  .projector-side-arrow{
    width:34px;height:34px;
    font-size:13px;
  }
  .projector-side-arrow.prev{left:-1px}
  .projector-side-arrow.next{right:-1px}

  /* Modal de obra: imagen proporcionada + contenido y botones accesibles */
  .modal.work-modal{
    display:none;
    align-items:flex-start;
    padding:8px;
    overflow-y:auto;
  }
  .modal.work-modal.open{display:flex}
  .work-dialog{
    width:100%;
    max-height:none !important;
    min-height:0;
    margin:0;
    border-radius:20px;
    overflow:visible !important;
  }
  .work-detail{
    display:block !important;
  }
  .work-detail-image{
    min-height:0 !important;
    max-height:none;
    padding:0;
  }
  .work-detail-image img{
    width:100%;
    max-height:58vh !important;
    height:auto !important;
    object-fit:contain;
  }
  .work-detail-copy{
    padding:24px 18px 30px !important;
  }
  .work-detail-copy h2{
    font-size:34px !important;
    line-height:1 !important;
  }
  .work-actions{
    display:grid !important;
    grid-template-columns:1fr;
    gap:9px;
    margin:22px 0 !important;
  }
  .work-actions .btn{
    width:100%;
    justify-content:center;
    text-align:center;
  }
  .comment-box textarea{min-height:120px}
  .comments-thread{margin-top:22px}

  .artist-page{padding:42px 16px 90px}
  .artist-hero{grid-template-columns:1fr;gap:24px;margin-bottom:52px}
  .artist-avatar{width:min(68vw,240px)}
  .artist-profile-copy h1{font-size:clamp(48px,14vw,72px)}
}

@media(max-width:520px){
  .site-hero{padding-left:6px !important;padding-right:6px !important}
  .hero-showcase .projector-stage{padding-left:28px !important;padding-right:28px !important}
  .hero-showcase .projector-image-wrap{padding:6px 6px 46px !important}
  .projector-polaroid-caption{left:12px;bottom:11px}
}
@media(max-width:800px){
  .topbar nav a[href="registro.php"]{display:inline-flex !important}
}


/* FIX FAVORITOS */
.like{
  transition:transform .18s ease, opacity .18s ease;
}
.like span{
  display:inline-block;
  line-height:1;
  transition:transform .18s ease, opacity .18s ease;
}
.like.liked span{
  color:#111;
}
.like.is-saving{
  opacity:.55;
  pointer-events:none;
}
.like.like-ok span{
  transform:scale(1.18);
}
.like.like-error{
  animation:ldaLikeError .22s ease 0s 2 alternate;
}
@keyframes ldaLikeError{
  from{transform:translateX(0)}
  to{transform:translateX(3px)}
}


/* CORAZÓN · MISMA FORMA VACÍO / LLENO */
.like{
  gap:6px;
  min-width:auto;
  padding:9px 10px;
}
.like .heart-icon{
  width:19px;
  height:19px;
  display:grid;
  place-items:center;
  flex:0 0 19px;
  line-height:0;
}
.like .heart-icon svg{
  width:19px;
  height:19px;
  display:block;
  overflow:visible;
}
.like .heart-icon path{
  fill:transparent;
  stroke:#111;
  stroke-width:1.75;
  stroke-linecap:round;
  stroke-linejoin:round;
  transition:fill .18s ease, stroke .18s ease, transform .18s ease;
  transform-origin:50% 50%;
}
.like.liked{
  background:transparent;
  color:#111;
  border-color:transparent;
  box-shadow:none;
}
.like.liked .heart-icon path{
  fill:#111;
  stroke:#111;
}
.like.like-ok .heart-icon path{
  transform:scale(1.08);
}

/* =========================================================
   NAVEGACIÓN PÚBLICA · ACCESO DE ARTISTAS
========================================================= */
.topbar .public-nav{
  display:flex;
  align-items:center;
  gap:24px;
}
.topbar .public-nav a{
  white-space:nowrap;
}
@media(max-width:800px){
  .topbar{
    padding-left:14px;
    padding-right:14px;
    gap:14px;
  }
  .topbar .brand strong{
    display:none;
  }
  .topbar nav.public-nav{
    display:flex!important;
    align-items:center;
    justify-content:flex-end;
    gap:14px;
    margin-left:auto;
  }
  .topbar nav.public-nav a{
    display:inline-flex!important;
    font-size:12px;
  }
}

/* =========================================================
   VISTA 360° · SOLO OBRAS DE GALERÍA
   No modifica el proyector ni la portada.
========================================================= */
.work-360-link{position:absolute;z-index:9;top:12px;right:12px;display:inline-flex;align-items:center;gap:7px;border:1px solid rgba(20,20,20,.10);border-radius:999px;background:rgba(255,255,255,.91);color:#222;padding:9px 11px;box-shadow:0 8px 26px rgba(0,0,0,.07);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);font:800 10px/1 Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;letter-spacing:.05em;cursor:pointer}
.work-360-orbit{display:inline-block;width:15px;height:10px;border:1px solid currentColor;border-radius:50%;position:relative;opacity:.72}.work-360-orbit:before,.work-360-orbit:after{content:"";position:absolute;top:50%;width:3px;height:3px;border-radius:50%;background:currentColor;transform:translateY(-50%)}.work-360-orbit:before{left:-2px}.work-360-orbit:after{right:-2px}
.spin360-modal{position:fixed;inset:0;z-index:150;display:none;place-items:center;padding:clamp(8px,2vw,24px);background:rgba(18,18,18,.28);backdrop-filter:blur(22px) saturate(75%);-webkit-backdrop-filter:blur(22px) saturate(75%)}
.spin360-modal.open{display:grid}
.spin360-dialog{position:relative;width:min(1180px,100%);max-height:calc(100dvh - 24px);overflow:auto;background:#fff;border:1px solid rgba(25,25,25,.08);border-radius:20px;padding:12px;box-shadow:0 28px 100px rgba(0,0,0,.19)}
.spin360-frame{overflow:hidden;border-radius:12px;background:#fff}.spin360-frame arte-360{display:block;width:100%;--arte360-max-height:calc(100dvh - 116px);--arte360-bg:#fff}
.spin360-close{position:absolute;z-index:20;top:19px;right:19px;width:38px;height:38px;display:grid;place-items:center;border:1px solid rgba(20,20,20,.09);border-radius:50%;background:rgba(255,255,255,.90);color:#222;font:300 25px/1 Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;cursor:pointer;box-shadow:0 7px 24px rgba(0,0,0,.06)}
.spin360-caption{display:flex;align-items:baseline;justify-content:space-between;gap:20px;padding:11px 5px 2px}.spin360-caption strong{font-size:13px;font-weight:650;color:#504d47;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.spin360-loading{padding:60px 20px;text-align:center;color:#77736d;font-size:13px}
@media(max-width:640px){.work-360-link{top:8px;right:8px;padding:8px 9px}.spin360-modal{padding:6px}.spin360-dialog{max-height:calc(100dvh - 12px);padding:7px;border-radius:15px}.spin360-frame{border-radius:10px}.spin360-frame arte-360{--arte360-max-height:calc(100dvh - 88px)}.spin360-close{top:12px;right:12px;width:36px;height:36px}.spin360-caption{padding:9px 4px 2px}}

/* =========================================================
   GALERÍA ACTUAL · 2 OBRAS POR FILA / 1 EN MÓVIL
========================================================= */
.works-grid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:clamp(42px,5vw,72px) clamp(18px,2.8vw,38px)!important;
  align-items:start!important;
}
.work-card,.work-card:nth-child(n){grid-column:auto!important}
@media(max-width:720px){
  .works-grid{grid-template-columns:1fr!important;gap:42px!important}
}

@media(max-width:800px){
  .topbar .public-nav a{display:none!important}
  .topbar .public-nav a[href="#artistas-inicio"],
  .topbar .public-nav a[href="artistas.php"]{display:inline-flex!important}
  .topbar .public-nav{gap:12px}
}


/* =========================================================
   GALERÍA · CONTROL VISUAL 2 / 3 / 4 COLUMNAS
========================================================= */
.works-section-head{align-items:flex-end}
.works-head-tools{display:flex;align-items:center;justify-content:flex-end;gap:16px;min-width:0}
.works-availability{margin:0!important;white-space:nowrap}
.works-grid-controls{display:inline-flex;align-items:center;gap:3px;padding:3px;border:1px solid #dedbd4;border-radius:999px;background:rgba(255,255,255,.58)}
.grid-view-button{width:34px;height:30px;border:0;border-radius:999px;background:transparent;color:#aaa69e;display:grid;place-items:center;padding:0;cursor:pointer;transition:background .18s ease,color .18s ease}
.grid-view-button:hover,.grid-view-button.is-active{background:#fff;color:#171717}
.grid-view-button:focus-visible{outline:2px solid #111;outline-offset:2px}
.grid-symbol{display:grid;gap:2px;align-items:center;justify-content:center}
.grid-symbol-2{grid-template-columns:repeat(2,5px)}
.grid-symbol-3{grid-template-columns:repeat(3,5px)}
.grid-symbol-4{grid-template-columns:repeat(4,4px)}
.grid-symbol i{display:block;width:100%;aspect-ratio:1;background:currentColor;border-radius:1px}
.works-grid[data-columns="2"]{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.works-grid[data-columns="3"]{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:clamp(34px,4vw,58px) clamp(15px,2vw,28px)!important}
.works-grid[data-columns="4"]{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:clamp(28px,3vw,46px) clamp(12px,1.5vw,22px)!important}
.works-grid[data-columns="3"] .work-meta h3{font-size:16px}
.works-grid[data-columns="4"] .work-meta h3{font-size:15px}
.works-grid[data-columns="4"] .work-meta p,.works-grid[data-columns="4"] .artist-link{font-size:11px}

/* =========================================================
   FICHA DE OBRA · CARRUSEL MINIMALISTA
========================================================= */
.work-detail-image{position:relative;overflow:hidden;background:#efeee9}
.work-carousel{width:100%;height:100%;min-height:0;touch-action:pan-y;user-select:none}
.work-carousel-stage{position:relative;width:100%;height:100%;min-height:620px;display:flex;align-items:center;justify-content:center;background:#efeee9;overflow:hidden}
.work-carousel-image{display:block;width:100%!important;height:100%!important;max-height:calc(100dvh - 80px)!important;object-fit:contain;opacity:1;transition:opacity .14s ease;user-select:none;-webkit-user-drag:none}
.work-carousel-image.is-changing{opacity:.58}
.work-carousel-arrow{position:absolute;z-index:3;top:50%;transform:translateY(-50%);width:42px;height:42px;border:1px solid rgba(20,20,20,.08);border-radius:50%;background:rgba(255,255,255,.82);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:#252525;font:300 30px/1 Arial,sans-serif;display:grid;place-items:center;padding:0;cursor:pointer;opacity:.88;transition:opacity .18s ease,background .18s ease}
.work-carousel-arrow:hover{opacity:1;background:#fff}
.work-carousel-arrow.is-prev{left:16px;padding-right:2px}.work-carousel-arrow.is-next{right:16px;padding-left:2px}
.work-carousel-status{position:absolute;z-index:3;left:18px;bottom:17px;display:flex;align-items:center;gap:7px;padding:7px 9px;border-radius:999px;background:rgba(255,255,255,.84);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);font-size:10px;font-weight:700;letter-spacing:.04em;color:#4f4b45}
.work-carousel-status i{width:14px;height:1px;background:#aaa69e}
.work-carousel-dots{position:absolute;z-index:3;left:50%;bottom:20px;transform:translateX(-50%);display:flex;align-items:center;gap:7px}
.work-carousel-dot{width:5px;height:5px;border:0;border-radius:50%;padding:0;background:rgba(30,30,30,.24);cursor:pointer;transition:transform .18s ease,background .18s ease}
.work-carousel-dot.is-active{background:#181818;transform:scale(1.45)}
.work-carousel-empty{width:100%;min-height:620px;background:#efeee9}

/* =========================================================
   FICHA DE OBRA · CONVERSACIÓN PLEGADA
========================================================= */
.comments-accordion{margin-top:24px;border-top:1px solid #e2e0da;border-bottom:1px solid #e2e0da}
.comments-toggle{width:100%;min-height:54px;display:flex;align-items:center;justify-content:space-between;gap:18px;border:0;background:transparent;padding:0;color:#171717;font:inherit;cursor:pointer;text-align:left}
.comments-toggle>span:first-child{font-size:13px;font-weight:700}
.comments-toggle-side{display:flex;align-items:center;gap:11px;color:#8a867e}
.comments-toggle-side small{font-size:11px}
.comments-toggle-side i{display:block;width:7px;height:7px;border-right:1px solid #555;border-bottom:1px solid #555;transform:rotate(45deg) translateY(-2px);transition:transform .18s ease}
.comments-toggle[aria-expanded="true"] .comments-toggle-side i{transform:rotate(225deg) translate(-1px,-1px)}
.comments-thread{margin-top:0!important;padding:2px 0 18px!important;border-top:0!important}
.comments-thread[hidden]{display:none!important}
.comment-box[hidden]{display:none!important}

@media(max-width:720px){
  .works-section-head{align-items:flex-start}
  .works-head-tools{width:100%;justify-content:flex-start}
  .works-grid-controls{display:none}
  .works-grid,.works-grid[data-columns="2"],.works-grid[data-columns="3"],.works-grid[data-columns="4"]{grid-template-columns:1fr!important;gap:42px!important}
  .work-carousel-stage,.work-carousel-empty{min-height:420px}
  .work-carousel-arrow{width:38px;height:38px;font-size:27px}
  .work-carousel-arrow.is-prev{left:10px}.work-carousel-arrow.is-next{right:10px}
  .work-carousel-status{left:11px;bottom:11px}
  .work-carousel-dots{bottom:14px}
}


/* =========================================================
   FICHA DE OBRA · POPUP CONTENIDO EN PANTALLA + CARRUSEL V2
   2026-08-30
========================================================= */
.work-carousel-status{display:none!important}
.work-carousel-arrow{width:32px!important;height:32px!important;border-color:rgba(20,20,20,.07)!important;background:rgba(255,255,255,.62)!important;color:#272622!important;opacity:.66!important;box-shadow:0 5px 18px rgba(0,0,0,.04);padding:0!important;font-size:0!important}
.work-carousel-arrow svg{width:15px;height:15px;display:block;fill:none;stroke:currentColor;stroke-width:1.55;stroke-linecap:round;stroke-linejoin:round;margin:auto}
.work-carousel-arrow:hover,.work-carousel-arrow:focus-visible{opacity:.96!important;background:rgba(255,255,255,.88)!important}
.work-carousel-arrow.is-prev{left:12px!important}.work-carousel-arrow.is-next{right:12px!important}
.work-carousel-dots{bottom:15px!important;gap:6px!important;padding:7px 9px;border-radius:999px;background:rgba(255,255,255,.34);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.work-carousel-dot{width:4px!important;height:4px!important;background:rgba(25,25,25,.24)!important}
.work-carousel-dot.is-active{background:#181818!important;transform:scale(1.35)!important}
.work-dialog>.close{z-index:20}
@media(min-width:821px){
  .modal.work-modal{padding:18px!important;align-items:center!important;overflow:hidden!important}
  .work-dialog{width:min(1340px,calc(100vw - 36px))!important;height:min(820px,calc(100vh - 36px));height:min(820px,calc(100dvh - 36px));max-height:calc(100vh - 36px)!important;max-height:calc(100dvh - 36px)!important;overflow:hidden!important;border-radius:30px!important}
  .work-detail{height:100%;min-height:0!important;grid-template-columns:minmax(0,1.08fr) minmax(380px,.92fr);overflow:hidden}
  .work-detail-image,.work-carousel,.work-carousel-stage{height:100%!important;min-height:0!important}
  .work-carousel-image{width:100%!important;height:100%!important;max-height:none!important;object-fit:contain!important}
  .work-detail-copy{height:100%;min-height:0;overflow:auto!important;padding:clamp(38px,4vw,58px)!important;overscroll-behavior:contain}
}
@media(max-width:820px){
  .modal.work-modal.open{display:flex!important;align-items:center!important;justify-content:center!important;padding:8px!important;overflow:hidden!important}
  .work-dialog{width:100%!important;max-height:calc(100vh - 16px)!important;max-height:calc(100dvh - 16px)!important;overflow:auto!important;border-radius:22px!important;margin:0!important}
  .work-carousel-stage,.work-carousel-empty{height:min(56vh,520px);height:min(56dvh,520px);min-height:300px!important}
  .work-carousel-image{width:100%!important;height:100%!important;max-height:none!important;object-fit:contain!important}
  .work-carousel-arrow{width:30px!important;height:30px!important}
  .work-carousel-arrow.is-prev{left:8px!important}.work-carousel-arrow.is-next{right:8px!important}
  .work-carousel-dots{bottom:10px!important}
}

/* =========================================================
   CABECERA FIJA · ANCLAS Y POPUPS BAJO EL MENÚ
   2026-08-30
========================================================= */
:root{--site-header-h:72px;--popup-gap:14px;--popup-space:28px}
html{scroll-padding-top:calc(var(--site-header-h) + 14px)}
section[id],main[id],article[id]{scroll-margin-top:calc(var(--site-header-h) + 14px)}

/* El menú queda siempre visible; el área modal comienza justo debajo. */
.modal{inset:var(--site-header-h) 0 0 0!important;padding:var(--popup-gap)!important;z-index:150}
.modal .dialog{max-height:calc(100vh - var(--site-header-h) - var(--popup-space))!important;max-height:calc(100dvh - var(--site-header-h) - var(--popup-space))!important}
.spin360-modal{inset:var(--site-header-h) 0 0 0!important;padding:var(--popup-gap)!important}
.spin360-dialog{max-height:calc(100vh - var(--site-header-h) - var(--popup-space))!important;max-height:calc(100dvh - var(--site-header-h) - var(--popup-space))!important}
.video-dialog video{max-height:calc(100vh - var(--site-header-h) - 110px)!important;max-height:calc(100dvh - var(--site-header-h) - 110px)!important}

@media(min-width:821px){
  .modal.work-modal{padding:var(--popup-gap)!important}
  .work-dialog{
    width:min(1340px,calc(100vw - var(--popup-space)))!important;
    height:min(800px,calc(100vh - var(--site-header-h) - var(--popup-space)))!important;
    height:min(800px,calc(100dvh - var(--site-header-h) - var(--popup-space)))!important;
    max-height:calc(100vh - var(--site-header-h) - var(--popup-space))!important;
    max-height:calc(100dvh - var(--site-header-h) - var(--popup-space))!important;
    border-radius:30px!important;
  }
  .work-detail-image,.work-carousel,.work-carousel-stage{min-height:0!important}
}

@media(max-width:820px){
  :root{--popup-gap:8px;--popup-space:16px}
  .modal.work-modal.open{padding:var(--popup-gap)!important}
  .work-dialog{
    max-height:calc(100vh - var(--site-header-h) - var(--popup-space))!important;
    max-height:calc(100dvh - var(--site-header-h) - var(--popup-space))!important;
    border-radius:22px!important;
    overflow:auto!important;
  }
  .spin360-dialog{max-height:calc(100dvh - var(--site-header-h) - 16px)!important}
}


/* =========================================================
   FICHA DE OBRA · IMAGEN INDEPENDIENTE + CONVERSACIÓN OVERLAY
   2026-08-30
========================================================= */
@media(min-width:821px){
  .work-dialog{overflow:hidden!important}
  .work-detail{height:100%!important;min-height:0!important;grid-template-columns:minmax(0,1.18fr) minmax(390px,.82fr)!important;align-items:stretch!important;overflow:hidden!important}
  .work-detail-image{height:100%!important;min-height:0!important;overflow:hidden!important;display:block!important}
  .work-carousel,.work-carousel-stage{width:100%!important;height:100%!important;min-height:0!important}
  .work-carousel-stage{display:grid!important;place-items:center!important;padding:0!important}
  .work-carousel-image{display:block!important;width:auto!important;height:auto!important;max-width:100%!important;max-height:100%!important;object-fit:contain!important;object-position:center center!important;margin:auto!important}
  .work-detail-copy{position:relative!important;height:100%!important;min-height:0!important;overflow:auto!important;overscroll-behavior:contain}
  .comments-accordion.is-open{position:absolute!important;inset:0!important;z-index:18!important;margin:0!important;padding:clamp(30px,3.6vw,52px)!important;background:#f8f8f5!important;border:0!important;display:flex!important;flex-direction:column!important;min-height:0!important;overflow:hidden!important}
  .comments-accordion.is-open .comments-toggle{flex:0 0 auto!important;min-height:48px!important;border-bottom:1px solid #e2e0da!important;margin-bottom:14px!important}
  .comments-accordion.is-open .comments-thread{display:block!important;flex:1 1 auto!important;min-height:0!important;overflow-y:auto!important;overscroll-behavior:contain;padding:0 8px 18px 0!important;scrollbar-width:thin;scrollbar-color:#c8c5bd transparent}
  .comments-accordion.is-open .comments-thread::-webkit-scrollbar{width:7px}
  .comments-accordion.is-open .comments-thread::-webkit-scrollbar-track{background:transparent}
  .comments-accordion.is-open .comments-thread::-webkit-scrollbar-thumb{background:#c8c5bd;border-radius:999px}
}
@media(max-width:820px){
  .work-carousel-stage{display:grid!important;place-items:center!important}
  .work-carousel-image{width:auto!important;height:auto!important;max-width:100%!important;max-height:100%!important;object-fit:contain!important;object-position:center center!important}
}
.estimated-price-input input.is-invalid{outline:2px solid #a4382c!important;outline-offset:2px}
.estimated-price-required{display:block;margin-top:7px;font-size:11px;color:#8b3d31;line-height:1.35}


/* =========================================================
   FICHA OBRA · COLUMNA DERECHA AUTÓNOMA (V3)
========================================================= */
@media(min-width:821px){
  .work-detail-copy{padding:0!important;display:flex!important;flex-direction:column!important;overflow:hidden!important;background:#f8f8f5}
  .work-detail-info{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:clamp(38px,4vw,58px);scrollbar-width:thin;scrollbar-color:#cbc7bf transparent}
  .work-detail-info::-webkit-scrollbar{width:7px}.work-detail-info::-webkit-scrollbar-track{background:transparent}.work-detail-info::-webkit-scrollbar-thumb{background:#cbc7bf;border-radius:999px}
  .comments-accordion{flex:0 0 auto;margin:0 clamp(38px,4vw,58px)!important}
  .work-detail-copy.has-comments-open .work-detail-info{display:none!important}
  .work-detail-copy .comments-accordion.is-open{position:static!important;inset:auto!important;flex:1 1 auto!important;width:auto!important;min-height:0!important;margin:0!important;padding:clamp(28px,3.7vw,54px)!important;background:#f8f8f5!important;display:flex!important;flex-direction:column!important;overflow:hidden!important}
  .work-detail-copy .comments-accordion.is-open .comments-thread{flex:1 1 auto!important;min-height:0!important;overflow-y:auto!important;padding:0 8px 18px 0!important}
}


/* =========================================================
   FICHA DE OBRA · GEOMETRÍA BLOQUEADA + CONVERSACIÓN V4
   La columna izquierda jamás participa del flujo de comentarios.
   2026-08-30
========================================================= */
@media (min-width:821px){
  .work-dialog{
    overflow:hidden!important;
  }
  .work-detail{
    height:100%!important;
    min-height:0!important;
    overflow:hidden!important;
    align-items:stretch!important;
  }

  /* IZQUIERDA: lienzo fijo. Nada de la columna derecha puede redimensionarlo. */
  .work-detail-image{
    position:relative!important;
    height:100%!important;
    min-height:0!important;
    min-width:0!important;
    overflow:hidden!important;
    display:block!important;
    background:#efeee9!important;
  }
  .work-detail-image .work-carousel{
    position:absolute!important;
    inset:0!important;
    width:auto!important;
    height:auto!important;
    min-height:0!important;
    overflow:hidden!important;
  }
  .work-detail-image .work-carousel-stage{
    position:absolute!important;
    inset:0!important;
    width:auto!important;
    height:auto!important;
    min-height:0!important;
    overflow:hidden!important;
    display:block!important;
    background:#efeee9!important;
  }
  .work-detail-image .work-carousel-image{
    position:absolute!important;
    inset:0!important;
    display:block!important;
    width:100%!important;
    height:100%!important;
    max-width:none!important;
    max-height:none!important;
    margin:0!important;
    object-fit:contain!important;
    object-position:center center!important;
  }

  /* DERECHA: superficie autónoma. */
  .work-detail-copy{
    position:relative!important;
    height:100%!important;
    min-height:0!important;
    min-width:0!important;
    overflow:hidden!important;
    display:flex!important;
    flex-direction:column!important;
    background:#f8f8f5!important;
    padding:0!important;
  }
  .work-detail-info{
    flex:1 1 auto!important;
    min-height:0!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
    padding:clamp(38px,4vw,58px)!important;
  }

  /* Cerrada: solo la barra de Conversación al pie. */
  .work-detail-copy .comments-accordion:not(.is-open){
    position:relative!important;
    flex:0 0 auto!important;
    inset:auto!important;
    width:auto!important;
    height:auto!important;
    min-height:0!important;
    margin:0 clamp(38px,4vw,58px)!important;
    padding:0!important;
    background:transparent!important;
    overflow:visible!important;
  }

  /* Abierta: overlay absoluto SOLO dentro de la columna derecha. */
  .work-detail-copy .comments-accordion.is-open{
    position:absolute!important;
    inset:0!important;
    z-index:40!important;
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    margin:0!important;
    padding:clamp(28px,3.5vw,50px)!important;
    box-sizing:border-box!important;
    background:#f8f8f5!important;
    border:0!important;
    display:flex!important;
    flex-direction:column!important;
    overflow:hidden!important;
  }
  .work-detail-copy.has-comments-open .work-detail-info{
    display:block!important;
    visibility:hidden!important;
    pointer-events:none!important;
  }
  .work-detail-copy .comments-accordion.is-open .comments-toggle{
    flex:0 0 50px!important;
    min-height:50px!important;
    margin:0 0 14px!important;
    padding:0!important;
    border-bottom:1px solid #e2e0da!important;
  }
  .work-detail-copy .comments-accordion.is-open .comments-thread{
    display:block!important;
    flex:1 1 0%!important;
    height:0!important;
    min-height:0!important;
    max-height:none!important;
    margin:0!important;
    padding:0 8px 18px 0!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
    scrollbar-gutter:stable!important;
    scrollbar-width:thin!important;
    scrollbar-color:#c8c5bd transparent!important;
  }
  .work-detail-copy .comments-accordion.is-open .comments-thread::-webkit-scrollbar{width:7px!important}
  .work-detail-copy .comments-accordion.is-open .comments-thread::-webkit-scrollbar-track{background:transparent!important}
  .work-detail-copy .comments-accordion.is-open .comments-thread::-webkit-scrollbar-thumb{background:#c8c5bd!important;border-radius:999px!important}
}

/* =========================================================
   FICHA DE OBRA · PANELES FÍSICAMENTE INDEPENDIENTES V5
   2026-08-30
   Izquierda y derecha no participan del flujo entre sí.
========================================================= */
.work-modal-like{
  border:0;background:transparent;color:#181818;display:inline-flex;align-items:center;
  justify-content:center;gap:7px;min-width:52px;height:48px;padding:0 12px;border-radius:999px;
  cursor:pointer;font:inherit;font-weight:700;transition:background .18s ease,transform .18s ease,opacity .18s ease
}
.work-modal-like:hover{background:#ecebe6}
.work-modal-like .heart-icon{width:23px;height:23px;display:grid;place-items:center}
.work-modal-like .heart-icon svg{width:22px;height:22px;fill:transparent;stroke:currentColor;stroke-width:1.55;transition:fill .18s ease,transform .18s ease}
.work-modal-like.liked .heart-icon svg{fill:currentColor}
.work-modal-like.liked .heart-icon{transform:scale(1.04)}
.work-modal-like b{font-size:13px;min-width:1ch;text-align:left}
.work-modal-like.is-saving{opacity:.55;pointer-events:none}

@media(min-width:821px){
  .work-dialog{position:relative!important;overflow:hidden!important}
  #workModalContent{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;overflow:hidden!important}
  #workModalContent>.work-detail{position:absolute!important;inset:0!important;display:block!important;width:100%!important;height:100%!important;min-height:0!important;overflow:hidden!important}

  /* LIENZO: ancho y alto propios. Nunca depende de comentarios. */
  #workModalContent .work-detail-image{
    position:absolute!important;left:0!important;top:0!important;bottom:0!important;width:58%!important;height:auto!important;
    min-width:0!important;min-height:0!important;margin:0!important;padding:0!important;overflow:hidden!important;background:#efeee9!important
  }
  #workModalContent .work-detail-image .work-carousel,
  #workModalContent .work-detail-image .work-carousel-stage{
    position:absolute!important;inset:0!important;width:100%!important;height:100%!important;min-height:0!important;margin:0!important;padding:0!important;
    overflow:hidden!important;background:#efeee9!important
  }
  #workModalContent .work-detail-image .work-carousel-stage{display:flex!important;align-items:center!important;justify-content:center!important}
  #workModalContent .work-detail-image .work-carousel-image{
    position:static!important;display:block!important;width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;
    object-fit:contain!important;object-position:center center!important;margin:0!important
  }

  /* INFORMACIÓN: segundo panel absoluto e independiente. */
  #workModalContent .work-detail-copy{
    position:absolute!important;right:0!important;top:0!important;bottom:0!important;width:42%!important;height:auto!important;
    min-width:0!important;min-height:0!important;margin:0!important;padding:0!important;overflow:hidden!important;background:#f8f8f5!important;
    display:flex!important;flex-direction:column!important
  }
  #workModalContent .work-detail-info{
    position:relative!important;flex:1 1 auto!important;min-height:0!important;overflow-y:auto!important;overflow-x:hidden!important;
    padding:clamp(38px,4vw,58px)!important;overscroll-behavior:contain!important
  }
  #workModalContent .comments-accordion:not(.is-open){
    position:relative!important;inset:auto!important;flex:0 0 auto!important;width:auto!important;height:auto!important;
    margin:0 clamp(38px,4vw,58px)!important;padding:0!important;background:transparent!important;overflow:visible!important
  }

  /* Conversación: una capa dentro del panel derecho, con scroll propio. */
  #workModalContent .comments-accordion.is-open{
    position:absolute!important;inset:0!important;z-index:60!important;width:100%!important;height:100%!important;min-height:0!important;
    margin:0!important;padding:clamp(30px,3.5vw,50px)!important;box-sizing:border-box!important;background:#f8f8f5!important;border:0!important;
    display:flex!important;flex-direction:column!important;overflow:hidden!important
  }
  #workModalContent .comments-accordion.is-open .comments-toggle{
    flex:0 0 50px!important;min-height:50px!important;margin:0 0 14px!important;border-bottom:1px solid #e2e0da!important
  }
  #workModalContent .comments-accordion.is-open .comments-thread{
    display:block!important;position:relative!important;flex:1 1 0!important;height:auto!important;min-height:0!important;max-height:none!important;
    margin:0!important;padding:0 9px 18px 0!important;overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior:contain!important;
    scrollbar-gutter:stable!important;scrollbar-width:thin!important;scrollbar-color:#c8c5bd transparent!important
  }
  #workModalContent .comments-accordion.is-open .comments-thread::-webkit-scrollbar{width:7px!important}
  #workModalContent .comments-accordion.is-open .comments-thread::-webkit-scrollbar-track{background:transparent!important}
  #workModalContent .comments-accordion.is-open .comments-thread::-webkit-scrollbar-thumb{background:#c8c5bd!important;border-radius:999px!important}
  #workModalContent .work-detail-copy.has-comments-open .work-detail-info{visibility:hidden!important;pointer-events:none!important}
}

@media(max-width:820px){
  .work-modal-like{height:44px;min-width:48px;padding:0 10px;background:#ecebe6}
}


/* Menú Artistas: el ancla comienza antes de Historias para mostrar Historias + Artistas en continuidad. */
.artists-entry-anchor{height:0!important;min-height:0!important;margin:0!important;padding:0!important;border:0!important;scroll-margin-top:calc(var(--site-header-h) + 14px)}