/* Página de colección. Se apoya en styles.css del sitio y solo agrega
   lo propio de esta plantilla. */
.col-main { max-width: 1180px; margin: 0 auto; padding: 0 1.5rem 5rem; }

.miga { font-size: .8rem; color: #8a8074; padding: 1.5rem 0 1rem; }
.miga a { color: #6b6157; text-decoration: none; }
.miga a:hover { color: #b08d57; }
.miga span { margin: 0 .35rem; opacity: .5; }
.miga strong { color: #1f1b16; font-weight: 600; }

/* El hero es la foto de ambiente: es lo que vende la colección. */
.col-hero { position: relative; border-radius: 8px; overflow: hidden; }
.col-hero img { width: 100%; height: clamp(280px, 46vw, 520px); object-fit: cover; display: block; }
/* El degradado tenía que llegar más arriba y más opaco: sobre una foto de
   follaje al sol el texto blanco desaparecía. Se probó con Coco, que es la
   más clara de las once. */
.col-hero-txt {
    position: absolute; inset: auto 0 0 0;
    padding: 5rem 2rem 1.75rem;
    background: linear-gradient(to top,
        rgba(18,15,11,.92) 0%, rgba(18,15,11,.78) 35%,
        rgba(18,15,11,.42) 68%, transparent 100%);
    color: #fff;
}
.col-hero-txt h1 { text-shadow: 0 1px 12px rgba(0,0,0,.35); }
.col-fam {
    display: block; font-size: .7rem; letter-spacing: .16em;
    text-transform: uppercase; color: #d9c39c; margin-bottom: .35rem;
}
.col-hero-txt h1 {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(2rem, 5vw, 3.4rem); font-weight: 400; margin: 0; line-height: 1.05;
}

.col-intro { max-width: 62ch; margin: 2.5rem 0 3rem; }
.col-intro p { font-size: 1.05rem; line-height: 1.75; color: #4a4137; margin: 0 0 .75rem; }
.col-meta { font-size: .82rem !important; color: #8a8074 !important; }

.col-piezas h2, .col-amb h2, .col-cta h2 {
    font-family: Georgia, serif; font-weight: 400;
    font-size: 1.5rem; margin: 0 0 1.25rem;
}
.col-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 1px; background: #e8e1d3;
    border: 1px solid #e8e1d3; border-radius: 8px; overflow: hidden;
}
/* Los packshots vienen recortados sobre crema: la celda lleva el mismo
   color o se ve el borde del recorte. */
.col-pieza { margin: 0; background: #f7f6f1; }
.col-pieza img { width: 100%; aspect-ratio: 1; object-fit: contain; display: block; }
.col-pieza figcaption {
    display: flex; justify-content: space-between; align-items: baseline; gap: .5rem;
    padding: .6rem .75rem .8rem; font-size: .78rem; color: #4a4137; background: #fff;
}
.col-pieza figcaption .mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .68rem; color: #8a8074;
}

.col-amb { margin-top: 3.5rem; }
.col-amb-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1rem; }
.col-amb-grid img { width: 100%; height: 280px; object-fit: cover; border-radius: 8px; display: block; }

.col-cta {
    margin-top: 4rem; padding: 2.5rem 2rem; text-align: center;
    background: #1f1b16; color: #fff; border-radius: 8px;
}
.col-cta h2 { color: #fff; }
.col-cta p { color: rgba(255,255,255,.72); margin: 0 0 1.5rem; }
.btn-cta {
    display: inline-block; margin: 0 .35rem;
    padding: .8rem 1.5rem; border-radius: 4px;
    background: #b08d57; color: #fff; text-decoration: none;
    font-size: .9rem; transition: background .15s;
}
.btn-cta:hover { background: #c9a06a; }
.btn-cta.ghost { background: transparent; border: 1px solid rgba(255,255,255,.3); }
.btn-cta.ghost:hover { background: rgba(255,255,255,.1); }

.col-nav {
    display: flex; justify-content: space-between; gap: 1rem;
    margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid #e8e1d3;
    font-size: .9rem;
}
.col-nav a { color: #6b6157; text-decoration: none; }
.col-nav a:hover { color: #b08d57; }

@media (max-width: 640px) {
    .col-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
    .col-nav { font-size: .8rem; }
}