/* servicios: the head splits on the bento's own columns */
@media (min-width:1081px){
  #servicios .sec-head{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:40px}
  #servicios h2{grid-column:1/3}
  #servicios .t2{grid-column:3;font-size:17px}
}
@media (min-width:861px) and (max-width:1080px){
  #servicios .sec-head{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:40px}
}
/* subgrid: instruments in a row share their top and bottom edges, however long the copy */
#servicios .card{display:grid;grid-row:span 2;grid-template-rows:subgrid;row-gap:0}
#servicios .card.wide .body{grid-template-rows:1fr}
#servicios .sub{text-wrap:balance}
/* keeps the instruments at a readable size on tablets instead of stretching them full width */
@media (min-width:701px) and (max-width:860px){
  .svc{grid-template-columns:repeat(2,minmax(0,1fr))}
  .card.wide{grid-column:span 2}
  .card.wide .inst{grid-template-columns:300px minmax(0,1fr)}
}

#cifras .figs{margin-top:0}
/* subgrid: a label that wraps can't push its figure and meter out of line */
.figs li{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:0;justify-content:stretch}
.figs b{align-self:end}

/* home: the Plataforma band */
.fams{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
/* subgrid: descriptions start on one line even when a title wraps */
.fam{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:0;justify-items:start;padding:24px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);text-decoration:none;transition:border-color .18s var(--ease),box-shadow .18s var(--ease)}
.fam:hover{border-color:var(--tick);box-shadow:var(--e2)}
.fam:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.fam h3{margin-top:16px;font-size:18px;font-weight:600;line-height:1.25}
.fam p{margin-top:8px;color:var(--mute);font-size:15px;line-height:1.45;text-wrap:balance}

@media (min-width:701px) and (max-width:1080px){
  .fams{grid-template-columns:repeat(6,minmax(0,1fr))}
  .fam{grid-column:span 2}
  .fam:nth-child(n+4){grid-column:span 3}
}
@media (max-width:700px){
  .fams{grid-template-columns:1fr}
  /* theme's 16px phone padding leaves a gap over the console bar and lets its -20px margins overhang */
  #servicios .inst{padding:0 20px 22px}
}