.pagina-catalogo { background: var(--color-marfil); }

.cabecera-catalogo {
    position: relative;
    padding: 72px 0 82px;
    overflow: hidden;
    color: white;
    background:
        radial-gradient(circle at 83% 18%, rgba(185, 144, 86, .25), transparent 27%),
        linear-gradient(118deg, var(--color-vino-oscuro), #5a1b2a 68%, #341017);
}

.cabecera-catalogo::after {
    position: absolute;
    width: 340px;
    height: 340px;
    right: 9%;
    bottom: -255px;
    content: "";
    border: 1px solid rgba(222, 184, 125, .22);
    border-radius: 50%;
}

.cabecera-catalogo .contenedor { position: relative; z-index: 1; }

.migas-catalogo {
    margin-bottom: 52px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #cdbfc0;
    font-size: 10px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.migas-catalogo a { transition: color .2s; }
.migas-catalogo a:hover { color: white; }
.migas-catalogo strong { color: #f4e9df; font-weight: 500; }

.cabecera-catalogo h1 {
    max-width: 850px;
    margin: 0;
    font-family: Georgia, serif;
    font-size: clamp(48px, 7vw, 82px);
    font-weight: 400;
    line-height: .98;
    letter-spacing: -.045em;
}

.cabecera-catalogo > .contenedor > p:last-child {
    max-width: 590px;
    margin: 22px 0 0;
    color: #d7cac4;
    font-size: 14px;
    line-height: 1.75;
}

.catalogo-productos { padding-top: 38px; padding-bottom: 105px; }

.barra-catalogo {
    margin-bottom: 35px;
    padding-bottom: 19px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    border-bottom: 1px solid var(--color-linea);
}

.barra-catalogo > p {
    margin: 0;
    color: #736763;
    font-size: 10px;
    letter-spacing: .1em;
    text-transform: uppercase;
    white-space: nowrap;
}

.barra-catalogo > p strong { color: var(--color-vino); font-size: 12px; }

.filtros-genero { display: flex; align-items: center; justify-content: flex-end; gap: 7px; }
.filtros-genero > span { margin-right: 4px; color: #8d817a; font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }

.filtros-genero button {
    min-height: 35px;
    padding: 0 15px;
    color: #6f635e;
    background: transparent;
    border: 1px solid var(--color-linea);
    border-radius: 20px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color .2s, background .2s, border-color .2s, transform .2s;
}

.filtros-genero button:hover { border-color: var(--color-vino); transform: translateY(-1px); }
.filtros-genero button.activo { color: white; background: var(--color-vino); border-color: var(--color-vino); }

.grilla-catalogo {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 50px 18px;
}

.grilla-catalogo .tarjeta-producto { position: relative; }
.grilla-catalogo .imagen-producto { background-color: #f0e9df; box-shadow: 0 15px 40px rgba(46, 27, 20, .06); }
.grilla-catalogo .imagen-producto > img { transition: transform .45s ease; }
.grilla-catalogo .tarjeta-producto:hover .imagen-producto > img { transform: scale(1.025); }
.grilla-catalogo .datos-producto h3 { font-size: 22px; }
.grilla-catalogo .pie-producto > span { color: #8d817a; font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }

.catalogo-vacio { padding: 95px 20px 40px; text-align: center; }
.catalogo-vacio > span { color: var(--color-oro); font-size: 38px; }
.catalogo-vacio h2 { margin: 15px 0 8px; font-family: Georgia, serif; font-size: 34px; font-weight: 400; }
.catalogo-vacio p { margin: 0; color: #7d716c; font-size: 12px; }
.catalogo-vacio a { display: inline-block; margin-top: 22px; padding-bottom: 6px; color: var(--color-vino); border-bottom: 1px solid var(--color-vino); font-size: 9px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }

.pie-catalogo { background: #211a17; }
.pie-catalogo .legal { margin-top: 0; padding-top: 0; align-items: center; border: 0; }

@media (max-width: 980px) {
    .grilla-catalogo { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
    .barra-catalogo { align-items: flex-start; flex-direction: column; }
    .filtros-genero { width: 100%; justify-content: flex-start; overflow-x: auto; padding-bottom: 3px; scrollbar-width: none; }
    .filtros-genero::-webkit-scrollbar { display: none; }
    .grilla-catalogo { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 42px 12px; }
}

@media (max-width: 520px) {
    .cabecera-catalogo { padding: 45px 0 58px; }
    .migas-catalogo { margin-bottom: 35px; }
    .cabecera-catalogo h1 { font-size: 48px; }
    .catalogo-productos { padding-top: 28px; padding-bottom: 75px; }
    .barra-catalogo { margin-bottom: 25px; }
    .filtros-genero { margin-right: -14px; width: calc(100% + 14px); }
    .filtros-genero button { padding-inline: 13px; }
    .grilla-catalogo .datos-producto { padding-top: 14px; }
    .grilla-catalogo .datos-producto h3 { font-size: 18px; }
    .grilla-catalogo .etiqueta { top: 9px; left: 9px; padding: 6px 7px; font-size: 7px; }
    .grilla-catalogo .corazon { top: 8px; right: 8px; width: 32px; height: 32px; }
    .pie-catalogo .legal { align-items: flex-start; }
}