.problem-lens{
  display:grid;
  grid-template-columns:minmax(220px,.8fr) minmax(360px,1.2fr);
  gap:20px;
  align-items:center;
  margin-top:28px;
  padding:18px 20px;
  border:1px solid var(--sand3);
  border-radius:14px;
  background:rgba(255,255,255,.46);
}
.problem-lens>div:first-child span{
  display:block;
  margin-bottom:6px;
  color:var(--ember);
  font:700 .59rem/1.2 var(--f-m);
  letter-spacing:.11em;
  text-transform:uppercase;
}
.problem-lens>div:first-child strong{
  color:var(--ink);
  font-size:.86rem;
  line-height:1.4;
}
.problem-lens-controls{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:wrap;
}
.problem-lens-controls button{
  min-height:40px;
  padding:9px 14px;
  border:1px solid rgba(0,40,85,.2);
  border-radius:999px;
  background:transparent;
  color:var(--ink);
  cursor:pointer;
  font:700 .68rem/1.2 var(--f-d);
  transition:color .25s ease,background .25s ease,border-color .25s ease,transform .25s ease;
}
.problem-lens-controls button:hover{transform:translateY(-2px);border-color:var(--ember)}
.problem-lens-controls button[aria-pressed="true"]{
  border-color:var(--navy);
  background:var(--navy);
  color:var(--sand);
}
.problem-lens-controls button:focus-visible{outline:3px solid rgba(245,158,59,.3);outline-offset:2px}
#problema [data-problem-card]{
  transition:opacity .35s ease,transform .35s cubic-bezier(.22,1,.36,1),border-color .35s ease,filter .35s ease;
}
#problema [data-problem-card]>.ic,
#problema [data-problem-card]>h3,
#problema [data-problem-card]>p,
#problema [data-problem-card]>.sol{
  transition:opacity .32s ease,transform .35s cubic-bezier(.22,1,.36,1),background .32s ease,border-color .32s ease;
}
#problema.is-problem-view [data-problem-card]>.sol{
  opacity:.34;
  transform:translateY(4px);
}
#problema.is-problem-view [data-problem-card]{border-color:rgba(226,112,42,.45)}
#problema.is-solution-view [data-problem-card]>.ic,
#problema.is-solution-view [data-problem-card]>h3,
#problema.is-solution-view [data-problem-card]>p{
  opacity:.38;
}
#problema.is-solution-view [data-problem-card]>.sol{
  opacity:1;
  transform:translateY(-3px);
  padding:13px 12px;
  border-top-color:rgba(63,185,124,.48);
  border-radius:8px;
  background:rgba(63,185,124,.08);
}
#problema.is-solution-view [data-problem-card]{border-color:rgba(63,185,124,.5)}
@media(max-width:760px){
  .problem-lens{grid-template-columns:1fr}
  .problem-lens-controls{justify-content:flex-start}
}
@media(max-width:520px){
  .problem-lens-controls{display:grid;grid-template-columns:1fr;width:100%}
  .problem-lens-controls button{width:100%;text-align:left}
}
@media(prefers-reduced-motion:reduce){
  .problem-lens-controls button,
  #problema [data-problem-card],
  #problema [data-problem-card]>.ic,
  #problema [data-problem-card]>h3,
  #problema [data-problem-card]>p,
  #problema [data-problem-card]>.sol{transition:none!important;transform:none!important}
}