.pagina-catalogos {
    min-height: 100vh;
    background: var(--color-background);
}

.catalogos-contenedor {
    width: min(100% - 2rem, 80rem);
    margin-inline: auto;
}

.catalogos-hero {
    position: relative;
    overflow: hidden;
    padding: 84px 0 96px;
    color: var(--color-primary-contrast);
    background:
        radial-gradient(circle at 82% 15%, rgba(var(--color-primary-fixed-rgb), 0.18), transparent 30%),
        linear-gradient(135deg, var(--color-primary-dark), var(--color-primary) 62%, var(--color-primary));
}

.catalogos-hero::after {
    position: absolute;
    right: max(48px, calc((100vw - 1280px) / 2));
    bottom: -96px;
    width: 320px;
    height: 320px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 50%;
    content: "";
}

.catalogos-hero__encabezado {
    position: relative;
    z-index: 1;
    width: min(100%, 48rem);
}

.catalogos-hero__titulo {
    margin: 0;
    color: var(--color-primary-contrast);
    font-size: clamp(42px, 7vw, 72px);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1;
}

.catalogos-hero__descripcion {
    max-width: 42rem;
    margin: 22px 0 0;
    color: var(--color-primary-contrast);
    font-size: 18px;
    line-height: 1.65;
    opacity: 0.86;
}

.catalogos-listado {
    padding: clamp(2.5rem, 6vw, 5rem) 0;
}

.catalogos-principal {
    padding: clamp(1.75rem, 3vw, 2.75rem) 0 0;
}

.catalogos-principal__contenedor {
    display: flex;
    justify-content: flex-start;
}

.catalogos-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
}

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

@media (max-width: 640px) {
    .catalogos-contenedor {
        width: min(100% - 1.5rem, 80rem);
    }

    .catalogos-grid {
        grid-template-columns: 1fr;
    }

    .catalogos-hero {
        padding: 64px 0 76px;
    }

    .catalogos-hero::after {
        right: -96px;
        bottom: -130px;
    }
}