:root{
--gcc-marron:#ad8c62;
--gcc-marron-oscuro:#755b3e;
--gcc-crema:#f8f4ee;
--gcc-borde:#e5d9ca;
}
.gcc-relacionados{
clear:both;
margin:42px 0 28px;
padding:28px;
background:#fff;
border:1px solid var(--gcc-borde);
border-radius:12px;
box-shadow:0 4px 16px rgba(90,70,50,.06);
}
.gcc-kicker{
display:block;
color:var(--gcc-marron);
font-size:12px;
font-weight:700;
text-transform:uppercase;
letter-spacing:1.2px;
margin-bottom:5px;
}
.gcc-relacionados h2{
margin:0 0 20px;
color:var(--gcc-marron-oscuro);
font-size:26px;
}
.gcc-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:18px;
}
.gcc-card{
overflow:hidden;
border:1px solid var(--gcc-borde);
border-radius:10px;
background:var(--gcc-crema);
transition:.18s ease;
}
.gcc-card:hover{
transform:translateY(-3px);
box-shadow:0 7px 18px rgba(90,70,50,.12);
}
.gcc-card-link{
display:block;
height:100%;
color:inherit!important;
text-decoration:none!important;
}
.gcc-card-img{
position:relative;
min-height:170px;
background:#e9dfd2 center/cover no-repeat;
}
.gcc-card-img:after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(to top,rgba(59,43,30,.42),transparent 65%);
}
.gcc-card-img.no-img:before{
content:"✦";
position:absolute;
inset:0;
display:flex;
align-items:center;
justify-content:center;
color:rgba(117,91,62,.35);
font-size:42px;
}
.gcc-card-cat{
position:absolute;
z-index:2;
left:12px;
bottom:12px;
padding:5px 9px;
border-radius:20px;
background:rgba(173,140,98,.95);
color:#fff;
font-size:11px;
}
.gcc-card-body{padding:16px;}
.gcc-card-body h3{
margin:0 0 11px;
color:var(--gcc-marron-oscuro);
font-size:17px;
line-height:1.35;
}
.gcc-more{
color:var(--gcc-marron);
font-size:13px;
font-weight:700;
}
@media(max-width:900px){
.gcc-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:600px){
.gcc-relacionados{padding:20px 16px;}
.gcc-grid{grid-template-columns:1fr;}
.gcc-card-img{min-height:190px;}
}