:root{
  --bg-0:#0f0b07; --bg-1:#14100b;
  --slab:#241a11; --slab-edge:#2e2115;
  --ochre:#d08a3c; --ochre-deep:#a85f22; --red-ochre:#b44a1f;
  --cream:#ecdcb8; --cream-dim:#c3b189;
  --line:rgba(208,138,60,.28);
}
*{ box-sizing:border-box; }
html,body{ margin:0; }
body{
  min-height:100vh; color:var(--cream);
  font-family: Georgia, 'Times New Roman', serif;
  background:
    radial-gradient(1100px 520px at 12% -5%, rgba(200,120,50,.10), transparent 60%),
    radial-gradient(900px 560px at 92% 6%, rgba(150,66,30,.10), transparent 55%),
    radial-gradient(700px 700px at 50% 120%, rgba(120,60,25,.08), transparent 60%),
    linear-gradient(180deg, var(--bg-1), var(--bg-0) 90%);
  padding:24px;
}

/* ---------- Cabecera / logo ---------- */
.top{ display:flex; align-items:center; gap:16px; max-width:1180px; margin:0 auto 30px; }
.logo{
  width:128px; height:128px; object-fit:contain;
  border:1px solid var(--line); border-radius:8px;
  background:rgba(0,0,0,.25); padding:4px; flex:0 0 auto;
}
.top h1{ margin:0; font-size:clamp(1.5rem,3.4vw,2.2rem); letter-spacing:1px;
  text-shadow:0 2px 12px rgba(0,0,0,.5); }
.top .sub{ margin:2px 0 0; color:var(--cream-dim); font-size:.95rem;
  letter-spacing:3px; text-transform:uppercase; }

/* ---------- Galería ---------- */
/* FIX: align-items:flex-start evita que las tarjetas se estiren verticalmente */
.gallery{
  max-width:1180px; margin:0 auto;
  display:flex; flex-wrap:wrap; gap:22px; justify-content:center;
  align-items:flex-start;
}

.card{
  width:288px;
  /* FIX: flex-shrink:0 para que no se compriman */
  flex-shrink:0;
  background:linear-gradient(180deg, var(--slab-edge), var(--slab));
  border:1px solid var(--line); border-radius:10px;
  box-shadow:0 10px 26px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,220,160,.05);
  overflow:hidden; transition:border-color .3s;
  margin:0;  /* reset de <figure> */
}
.card.open{ border-color:rgba(208,138,60,.55); }

/* FIX: altura FIJA que cabe 128x128, 128x256 y 256x128 sin estirarse */
.art-wrap{
  position:relative; display:flex; justify-content:center; align-items:center;
  width:288px; height:288px;        /* 256px imagen máx. + 32px padding total */
  padding:16px;
  background:radial-gradient(120% 90% at 50% 0%, rgba(210,140,60,.09), transparent 70%);
}

/* Imagen en tamaño NATIVO: sin escalar, bordes nítidos */
.art{
  display:block;
  image-rendering:-moz-crisp-edges;
  image-rendering:crisp-edges;
  image-rendering:pixelated;
  background:#000; border:2px solid rgba(180,74,31,.45);
  cursor:pointer; outline:none;
  transition:border-color .25s, box-shadow .25s;
}
.art:hover{ border-color:var(--ochre); box-shadow:0 0 0 2px rgba(208,138,60,.25); }
.art:focus-visible{ box-shadow:0 0 0 3px rgba(208,138,60,.6); }
.card.open .art{ border-color:var(--ochre); }
.art-wrap::after{
  content:"▾"; position:absolute; right:11px; bottom:8px;
  font-size:13px; color:var(--cream-dim); opacity:.85; transition:transform .3s;
}
.card.open .art-wrap::after{ content:"▴"; }

/* ---------- "Persiana" ---------- */
.panel{ height:0; overflow:hidden; transition:height .45s cubic-bezier(.4,0,.2,1); }
.card.open .panel{ height:150px; }

.panel-inner{
  position:relative; height:150px;
  overflow-y:auto;
  padding:14px 15px 15px; border-top:1px solid var(--line);
  background:linear-gradient(180deg,#1c140d,#150f09);
  color:var(--cream); font-size:.92rem; line-height:1.6;
  scrollbar-width:thin; scrollbar-color:var(--ochre-deep) rgba(0,0,0,.25);
}
.panel-inner::before{
  content:""; position:absolute; top:0; left:0; right:0; height:6px;
  background:repeating-linear-gradient(180deg, var(--ochre-deep) 0 2px, transparent 2px 6px);
  opacity:.55;
}
.panel-inner::-webkit-scrollbar{ width:8px; }
.panel-inner::-webkit-scrollbar-track{ background:rgba(0,0,0,.2); }
.panel-inner::-webkit-scrollbar-thumb{ background:var(--ochre-deep); border-radius:4px; }

.panel-inner.redacted{
  display:flex; align-items:center; justify-content:center;
  color:var(--cream-dim); font-family:'Courier New',monospace; letter-spacing:3px; font-size:1rem;
}

.hint{ max-width:520px; margin:40px auto; text-align:center; color:var(--cream-dim); line-height:1.7; }
.hint code{ background:rgba(208,138,60,.15); color:var(--cream); padding:2px 6px; border-radius:4px; }

@media (max-width:420px){ body{ padding:16px; } }