.catalogo {
position: relative;
overflow: hidden;
padding: 100px 0 80px;
background: linear-gradient(160deg, var(--fondo) 0%, #dff0e4 50%, var(--verde-claro) 100%);
}
.catalogo::before,
.catalogo::after {
content: "";
position: absolute;
border-radius: 50%;
pointer-events: none;
}
.catalogo::before {
top: -140px;
right: -100px;
width: 450px;
height: 450px;
background: radial-gradient(circle, rgba(0, 166, 75, 0.10) 0%, transparent 70%);
}
.catalogo::after {
bottom: -80px;
left: -60px;
width: 300px;
height: 300px;
background: radial-gradient(circle, rgba(151, 201, 235, 0.12) 0%, transparent 70%);
}
.catalogo > .container {
position: relative;
z-index: 1;
}
.catalogo__cabecera {
margin-bottom: 48px;
}
.catalogo__titulo {
font-size: 48px;
}
.catalogo__texto {
max-width: 640px;
margin: 16px auto 0;
font-size: 15px;
line-height: 1.7;
}
.catalogo__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 28px;
}
.catalogo__vacio {
text-align: center;
font-size: 15px;
}
@media (max-width: 1024px) {
.catalogo__grid {
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
}
@media (max-width: 768px) {
.catalogo { padding: 80px 0 60px; }
.catalogo__titulo { font-size: 34px; }
.catalogo__grid {
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
}
@media (max-width: 480px) {
.catalogo__titulo { font-size: 28px; }
}