.rubros__layout{ display:grid; grid-template-columns:.78fr 1.22fr; gap:clamp(2.5rem,5vw,4.5rem); align-items:start; }
.rubros__aside p{ margin-top:1.2rem; color:var(--text-2); font-size:.95rem; line-height:1.65; max-width:34ch; }
.rubros__aside .link-u{ margin-top:1.6rem; }

.rubros{
  display:grid; grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--paper-3); border-left:1px solid var(--paper-3);
  background:var(--paper);
}
.rubro{
  position:relative; display:flex; align-items:center; gap:.85rem;
  padding:1.35rem 1.25rem;
  border-right:1px solid var(--paper-3); border-bottom:1px solid var(--paper-3);
  font-size:.92rem; color:var(--text-2); overflow:hidden;
  transition:color .35s var(--ease), background .45s var(--ease);
}
.rubro::before{
  content:""; position:absolute; inset:auto 0 0 0; height:2px; background:var(--gold);
  transform:scaleX(0); transform-origin:0 50%; transition:transform .5s var(--ease-out);
}
.rubro:hover{ color:var(--text); background:var(--paper-2); }
.rubro:hover::before{ transform:scaleX(1); }
.rubro__ic{
  width:34px; height:34px; flex:none; border-radius:50%;
  border:1px solid var(--paper-3); display:grid; place-items:center;
  transition:border-color .4s var(--ease), background .4s var(--ease), transform .5s var(--ease-out);
}
.rubro__ic svg{ width:16px; height:16px; color:var(--gold); transition:color .4s var(--ease); }
.rubro:hover .rubro__ic{ border-color:var(--gold); background:var(--gold); transform:scale(1.06); }
.rubro:hover .rubro__ic svg{ color:var(--ink); }

@media (max-width:1080px){
  .rubros__layout{ grid-template-columns:1fr; }
  .rubros{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px){
  .rubros{ grid-template-columns:1fr; }
}