/* Productos: índice fijo y fichas alternas */
.catalog {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: clamp(32px, 4vw, 72px);
    padding-block: clamp(48px, 6vw, 88px) var(--section-y);
}
.catalog__index { position: sticky; top: calc(var(--header-h) + 40px); align-self: start; }
.catalog__index-title { margin-bottom: 12px; font-size: .8125rem; font-weight: 600; font-stretch: 88%; letter-spacing: .14em; text-transform: uppercase; color: var(--color-stone); }
.catalog__index a {
    display: flex;
    gap: 10px;
    padding-block: 10px;
    border-top: 1px solid var(--color-sand);
    line-height: 1.25;
    text-decoration: none;
    font-stretch: 88%;
    font-weight: 500;
    transition: color .2s var(--ease), padding-left .25s var(--ease);
}
.catalog__index a span { font-size: .75rem; padding-top: 2px; color: var(--color-stone); }
.catalog__index a:hover { color: var(--color-primary); padding-left: 6px; }
.catalog__index a.is-current { color: var(--color-primary); font-weight: 700; padding-left: 6px; }

.product {
    display: grid;
    grid-template-columns: minmax(0, 11fr) minmax(0, 12fr);
    gap: clamp(24px, 3.4vw, 56px);
    padding-block: clamp(32px, 4vw, 64px);
    border-top: 1px solid var(--color-ink);
    scroll-margin-top: calc(var(--header-h) + 8px);
}
.product:first-child { border-top: 0; padding-top: 0; }
.product--flip .product__photo { order: 2; }
.product__photo { align-self: start; aspect-ratio: 4 / 5; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 44px), calc(100% - 44px) 100%, 0 100%); }
.product--flip .product__photo { clip-path: polygon(0 0, 100% 0, 100% 100%, 44px 100%, 0 calc(100% - 44px)); }
.product__num { font-family: var(--font-accent); font-style: italic; font-size: 1.5rem; color: var(--color-secondary-deep); }
.product__name { margin-block: 4px var(--space-2); font-size: clamp(2rem, 3.7vw, 3.5rem); text-transform: uppercase; }
.product__desc { margin-bottom: var(--space-3); font-size: 1.125rem; line-height: 1.5; }
.product__specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin-bottom: var(--space-4); }
.product__specs h3 { margin-bottom: 10px; font-family: var(--font-body); font-size: .8125rem; font-stretch: 88%; font-weight: 600; letter-spacing: .1em; line-height: 1.3; text-transform: uppercase; color: var(--color-primary); }
.product__feats li { position: relative; padding: 6px 0 6px 20px; line-height: 1.35; font-size: 1rem; }
.product__feats li::before { content: ''; position: absolute; left: 0; top: 12px; width: 9px; height: 9px; background: var(--color-accent); clip-path: var(--diamond); }
.product__uses { display: flex; flex-wrap: wrap; gap: 6px; }
.product__uses li { padding: 4px 10px; background: var(--color-travertine); font-size: .9375rem; line-height: 1.35; }
.product__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }

/* Diagrama: SPC dentro de la familia Luxury Vinyl */
.family { margin-bottom: 12px; }
.family__outer { padding: 12px; background: var(--color-primary-deep); color: var(--color-white); }
.family__label { display: block; margin-bottom: 10px; font-weight: 600; font-stretch: 88%; }
.family__inner { padding: 12px; margin-left: 24px; background: var(--color-white); color: var(--color-ink); font-weight: 500; line-height: 1.3; }
.product__clarify { margin-bottom: var(--space-3); padding-left: 12px; border-left: 3px solid var(--color-accent); font-size: 1rem; line-height: 1.45; }

.catalog__note { padding-top: var(--space-3); border-top: 1px solid var(--color-ink); max-width: 72ch; color: var(--color-stone); font-size: .9375rem; }

@media (max-width: 1100px) {
    .catalog { grid-template-columns: minmax(0, 1fr); }
    /* El índice pasa a ser una franja horizontal bajo el encabezado */
    .catalog__index { position: sticky; top: var(--header-h); z-index: 5; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); background: var(--color-bg); border-bottom: 1px solid var(--color-sand); }
    .catalog__index-title { display: none; }
    .catalog__index ul { display: flex; gap: 18px; overflow-x: auto; scrollbar-width: none; }
    .catalog__index a, .catalog__index a:hover, .catalog__index a.is-current { padding: 14px 0; border-top: 0; white-space: nowrap; }
    .catalog__index a span { display: none; }
}

@media (max-width: 1023px) {
    .product, .product--flip { grid-template-columns: 1fr; }
    .product--flip .product__photo { order: 0; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 32px), calc(100% - 32px) 100%, 0 100%); }
    .product__photo { aspect-ratio: 16 / 10; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 32px), calc(100% - 32px) 100%, 0 100%); }
}

@media (max-width: 767px) {
    .product__specs { grid-template-columns: 1fr; }
    .family__inner { margin-left: 12px; }
}
