.cabecera { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 1rem; padding: .7rem clamp(16px, 4vw, 48px);
  background: color-mix(in srgb, var(--pared) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--linea); }
.marca { display: flex; align-items: center; gap: .55rem; font-weight: 800; font-variation-settings: "wdth" 112; text-decoration: none; letter-spacing: -.01em; }
.marca-cuadro { width: 18px; height: 18px; background: linear-gradient(90deg, var(--tinta) 0 2px, transparent 2px 5px) 0 0/5px 100%, var(--cobalto); }
.cabecera-sala { color: var(--gris); font-size: .9rem; margin-right: auto; }

/* Hero: el campo cinético es el gesto principal */
.hero { position: relative; min-height: min(86vh, 820px); display: grid; align-items: end; overflow: hidden; background: var(--pared); }
.hero-campo { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-bloque { position: relative; margin: 0 clamp(16px, 4vw, 48px) clamp(24px, 6vh, 64px); background: var(--pared); padding: clamp(20px, 3vw, 40px) clamp(20px, 3vw, 44px) clamp(24px, 3vw, 40px);
  max-width: 760px; border-left: 10px solid var(--tinta); animation: bloqueIn 1s .5s cubic-bezier(.2,.7,.2,1) both; }
@keyframes bloqueIn { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.hero h1 { margin: 0 0 .9rem; font-family: var(--display); font-weight: 900; font-variation-settings: "wdth" 125; font-size: clamp(3rem, 9.5vw, 7.4rem);
  line-height: .86; letter-spacing: -.035em; }
.hero-texto { margin: 0 0 1.4rem; font-size: clamp(1.02rem, 1.5vw, 1.18rem); max-width: 54ch; color: #333a48; }
.hero-texto strong { font-variant-numeric: tabular-nums; color: var(--tinta); }

.catalogo { padding: clamp(28px, 5vw, 64px) clamp(16px, 4vw, 48px) 40px; scroll-margin-top: 50px; }
.barra { position: sticky; top: 53px; z-index: 10; display: grid; grid-template-columns: 1fr auto; gap: .8rem 1rem; padding: .9rem 0;
  background: var(--pared); border-bottom: 2px solid var(--tinta); }
.buscador { position: relative; }
.buscador svg { position: absolute; left: .8rem; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); color: var(--gris); }
.buscador input { width: 100%; padding: .75em .9em .75em 2.5rem; border: 1.5px solid var(--linea); border-radius: var(--r); background: var(--papel); font-size: 1rem; }
.buscador input:focus { border-color: var(--cobalto); outline: none; }
.barra-ctrl { display: flex; gap: .6rem; }
.barra-ctrl select { padding: .7em .8em; border: 1.5px solid var(--linea); border-radius: var(--r); background: var(--papel); }
.chips { grid-column: 1 / -1; display: flex; gap: .45rem; overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin; }
.chip { flex: none; border: 1.5px solid var(--tinta); background: transparent; border-radius: 999px; padding: .32em .85em; font-size: .86rem; cursor: pointer; white-space: nowrap; }
.chip span { color: var(--gris); font-variant-numeric: tabular-nums; margin-left: .3em; }
.chip[aria-pressed="true"] { background: var(--tinta); color: var(--papel); }
.chip[aria-pressed="true"] span { color: var(--amarillo); }
.resultado { color: var(--gris); font-size: .9rem; margin: 1.2rem 0 1rem; min-height: 1.4em; }

.rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: clamp(18px, 2.4vw, 34px) clamp(14px, 2vw, 28px); }
.obra { all: unset; cursor: pointer; display: grid; gap: .7rem; align-content: start; }
.obra-img { aspect-ratio: 4 / 5; overflow: hidden; background: var(--papel); box-shadow: var(--sombra); }
.obra-img img, .obra-img svg { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.obra:hover .obra-img img, .obra:hover .obra-img svg { transform: scale(1.035); }
.obra:focus-visible { outline: 2px solid var(--cobalto); outline-offset: 4px; }
.obra-cartela { display: grid; gap: .1rem; padding-left: .7rem; border-left: 3px solid var(--tinta); }
.obra-autor { font-weight: 700; font-size: .95rem; line-height: 1.25; }
.obra-titulo { font-size: 1.18rem; line-height: 1.2; }
.obra-meta { font-size: .8rem; color: var(--gris); }
.obra-meta b { font-weight: 600; color: var(--tinta); }

.vacio { text-align: center; padding: 60px 0; }
.mas { display: flex; justify-content: center; margin: 2.5rem 0 1rem; }

/* Ficha de obra, con forma de cartela de sala */
.ficha { border: 0; padding: 0; width: min(1100px, 94vw); max-height: 92vh; background: var(--papel); color: var(--tinta); display: none;
  grid-template-columns: 1.25fr 1fr; box-shadow: 0 30px 80px -20px rgba(0,0,0,.5); }
.ficha[open] { display: grid; animation: fichaIn .3s cubic-bezier(.2,.7,.2,1); }
@keyframes fichaIn { from { opacity: 0; transform: scale(.97); } }
.ficha::backdrop { background: rgba(25,30,42,.72); backdrop-filter: blur(3px); }
.ficha-img { background: var(--pared); min-height: 320px; max-height: 92vh; display: grid; place-items: center; }
.ficha-img img { max-height: 92vh; width: 100%; object-fit: contain; }
.ficha-img svg { width: 100%; height: 100%; max-height: 92vh; }
.ficha-cartela { position: relative; padding: clamp(24px, 3vw, 44px); overflow-y: auto; display: flex; flex-direction: column; }
.ficha-cerrar { position: absolute; top: 10px; right: 12px; width: 40px; height: 40px; border: 0; background: none; font-size: 1.9rem; cursor: pointer; line-height: 1; }
.ficha-autor { margin: 0; font-weight: 800; font-variation-settings: "wdth" 115; font-size: 1.3rem; }
.ficha-titulo { margin: .2rem 0 1.5rem; font-size: clamp(1.8rem, 3vw, 2.5rem); line-height: 1.08; }
.ficha-datos { margin: 0 0 auto; display: grid; grid-template-columns: max-content 1fr; gap: .55rem 1.2rem; border-top: 1px solid var(--linea); padding-top: 1.2rem; }
.ficha-datos dt { color: var(--gris); font-size: .86rem; }
.ficha-datos dd { margin: 0; }
.ficha-nav { display: flex; justify-content: space-between; margin-top: 2rem; }

.pie { padding: 36px clamp(16px, 4vw, 48px); border-top: 2px solid var(--tinta); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; color: var(--gris); font-size: .88rem; }
.pie p { margin: 0; }
.pie strong { color: var(--tinta); }

@media (max-width: 760px) {
  .cabecera-sala { display: none; }
  .marca { margin-right: auto; }
  .barra { grid-template-columns: 1fr; top: 53px; }
  .barra-ctrl select { flex: 1; min-width: 0; }
  .rejilla { grid-template-columns: repeat(2, 1fr); }
  .obra-titulo { font-size: 1.02rem; }
  .ficha { grid-template-columns: 1fr; max-height: 94vh; overflow-y: auto; }
  .ficha-img { min-height: 0; max-height: 52vh; }
  .ficha-img img { max-height: 52vh; }
}

@media (max-width: 760px) { .cabecera .logo-sm { height: 28px; } .cabecera .marca-texto { font-size: .92rem; } }
.cabecera .logo-sm { height: 42px; }
.barra { top: 66px; }
@media (max-width: 760px) { .cabecera .logo-sm { height: 28px; } .barra { top: 51px; } }