/* ── COLECCIONES ── */
#view-index  { display: block; }
#view-coleccion { display: none; }

.page-head { padding: var(--spacing-lg) var(--page-pad) var(--spacing-md); }
.page-title { font-family: var(--font-display); font-size: clamp(32px,5vw,56px); font-weight: 300; font-style: italic; margin: 0 0 6px; }
.page-sub { font-size: 14px; color: var(--color-ink-dim); letter-spacing: .15em; }

/* DESTACADA */
.col-featured { margin: 0 var(--page-pad) var(--spacing-sm); cursor: pointer; }
.col-featured-img { width: 100%; aspect-ratio: 21/6; overflow: hidden; position: relative; }
.col-featured-img .ph { width: 100%; height: 100%; transition: transform .8s var(--ease-out); }
.col-featured:hover .col-featured-img .ph { transform: scale(1.02); }
.col-featured-info { display: flex; justify-content: space-between; align-items: flex-end; padding: 16px 0; border-bottom: 0.5px solid var(--color-ink-faint); }
.col-featured-name { font-family: var(--font-display); font-size: 28px; font-weight: 300; font-style: italic; margin: 0 0 4px; }
.col-featured-count { font-size: 14px; color: var(--color-ink-dim); letter-spacing: .12em; margin-bottom: 8px; }
.col-featured-desc { font-size: 14px; color: var(--color-ink-dim); line-height: 1.7; max-width: 400px; }

/* GRILLA 2 */
.cols-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: var(--spacing-sm) var(--page-pad); }
.col-card { position: relative; overflow: hidden; cursor: pointer; aspect-ratio: 4/3; }
.col-card .ph { width: 100%; height: 100%; transition: transform .8s var(--ease-out); }
.col-card:hover .ph { transform: scale(1.04); }
.col-card-overlay { position: absolute; inset: 0; background: linear-gradient(transparent 30%, var(--color-overlay-end) 100%); display: flex; flex-direction: column; justify-content: flex-end; padding: 20px; opacity: 0; transition: opacity .4s var(--ease-out); }
.col-card:hover .col-card-overlay { opacity: 1; }
.col-card-name { font-family: var(--font-display); font-size: 22px; font-weight: 300; font-style: italic; margin-bottom: 3px; }
.col-card-count { font-size: 14px; color: var(--color-ink-dim); letter-spacing: .1em; }

/* GRILLA 3 */
.cols-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin: 0 var(--page-pad) var(--spacing-xl); }
.col-card-sm { position: relative; overflow: hidden; cursor: pointer; aspect-ratio: 1/1; }
.col-card-sm .ph { width: 100%; height: 100%; transition: transform .8s var(--ease-out); }
.col-card-sm:hover .ph { transform: scale(1.04); }
.col-card-sm-overlay { position: absolute; inset: 0; background: linear-gradient(transparent 40%, var(--color-overlay-end) 100%); display: flex; flex-direction: column; justify-content: flex-end; padding: 16px; opacity: 0; transition: opacity .4s var(--ease-out); }
.col-card-sm:hover .col-card-sm-overlay { opacity: 1; }
.col-card-sm-name { font-family: var(--font-display); font-size: 16px; font-weight: 300; font-style: italic; margin-bottom: 2px; }
.col-card-sm-count { font-size: 14px; color: var(--color-ink-dim); letter-spacing: .08em; }

/* VISTA COLECCIÓN INDIVIDUAL */
.coleccion-hero { width: 100%; aspect-ratio: 21/5; position: relative; overflow: hidden; }
.coleccion-hero .ph { width: 100%; height: 100%; }
.coleccion-hero-overlay { display: none; }
.coleccion-head { padding: var(--spacing-md) var(--page-pad) 0; display: flex; justify-content: space-between; align-items: flex-end; }
.coleccion-titulo { font-family: var(--font-display); font-size: clamp(28px,4vw,48px); font-weight: 300; font-style: italic; margin: 0 0 4px; }
.coleccion-sub { font-size: 14px; color: var(--color-ink-dim); letter-spacing: .12em; }
.btn-back { font-size: 14px; color: var(--color-ink-dim); letter-spacing: .1em; cursor: pointer; transition: color .3s; }
.btn-back:hover { color: var(--color-ink); }
.coleccion-desc { font-size: 14px; color: var(--color-ink-dim); line-height: 1.9; padding: var(--spacing-sm) var(--page-pad) var(--spacing-md); max-width: 560px; }
.obras-label { font-size: 14px; letter-spacing: .2em; color: var(--color-ink-dim); margin-bottom: var(--spacing-md); padding: 0 var(--page-pad); }
.obras-row { display: grid; gap: 8px; padding: 0 var(--page-pad); margin-bottom: 8px; }
.obras-row-4 { grid-template-columns: repeat(4,1fr); }
.obras-row-5 { grid-template-columns: repeat(5,1fr); }
.obra-item { aspect-ratio: 1/1; position: relative; overflow: hidden; cursor: pointer; display: block; }
.obra-item .ph { width: 100%; height: 100%; transition: transform .8s var(--ease-out); }
.obra-item:hover .ph { transform: scale(1.04); }
.obra-overlay { position: absolute; inset: 0; background: linear-gradient(transparent 40%, var(--color-overlay-end) 100%); opacity: 0; transition: opacity .4s var(--ease-out); display: flex; flex-direction: column; justify-content: flex-end; padding: 12px; }
.obra-item:hover .obra-overlay { opacity: 1; }
.obra-item-title { font-family: var(--font-display); font-size: 14px; font-weight: 300; font-style: italic; margin-bottom: 2px; }
.obra-item-price { font-size: 14px; color: var(--color-ink-dim); }

@media (max-width: 767px) {
  .cols-grid-2 { grid-template-columns: 1fr; }
  .cols-grid-3 { grid-template-columns: 1fr 1fr; }
  .obras-row-4, .obras-row-5 { grid-template-columns: repeat(2,1fr); }
}