.framework-sequence{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-top:28px;
  color:var(--td);
}
.framework-sequence span{
  padding:8px 11px;
  border:1px solid rgba(246,239,227,.16);
  border-radius:999px;
  background:rgba(246,239,227,.05);
  font:700 .67rem/1.2 var(--f-d);
}
.framework-sequence i{
  color:var(--amber);
  font-style:normal;
}
#metodologia [data-framework-stage]{
  --framework-accent:var(--amber);
  display:flex;
  flex-direction:column;
  position:relative;
  overflow:hidden;
  transition:opacity .4s ease,transform .4s cubic-bezier(.22,1,.36,1),border-color .35s ease,box-shadow .35s ease,filter .35s ease;
}
#metodologia [data-framework-stage="1"]{--framework-accent:var(--ember)}
#metodologia [data-framework-stage="2"]{--framework-accent:var(--verde)}
#metodologia [data-framework-stage]::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(110deg,transparent 28%,rgba(255,255,255,.055) 50%,transparent 72%);
  transform:translateX(-115%);
}
#metodologia [data-framework-stage].is-framework-pending{
  opacity:.58;
  transform:translateY(10px);
  filter:saturate(.68);
}
#metodologia [data-framework-stage].is-framework-active{
  opacity:1;
  transform:translateY(-6px);
  filter:none;
  border-color:var(--framework-accent);
  box-shadow:0 18px 42px rgba(0,0,0,.2),0 0 26px rgba(245,158,59,.07);
}
#metodologia [data-framework-stage].is-framework-active::after{
  animation:framework-sweep .8s cubic-bezier(.22,1,.36,1) both;
}
#metodologia [data-framework-stage].is-framework-complete{
  opacity:1;
  filter:none;
  border-color:color-mix(in srgb,var(--framework-accent) 45%,transparent);
}
@keyframes framework-sweep{to{transform:translateX(115%)}}
.phase-strip,
.hitl-strip{
  display:grid;
  gap:6px;
  margin-top:auto;
  padding:18px 0 0;
  list-style:none;
}
.phase-strip{
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:8px;
}
.phase-strip li:nth-child(-n+3){grid-column:span 2}
.phase-strip li:nth-child(n+4){grid-column:span 3}
.hitl-strip{grid-template-columns:repeat(3,minmax(0,1fr))}
.phase-strip li,
.hitl-strip li{
  display:grid;
  place-items:center;
  min-height:42px;
  padding:7px 5px;
  border:1px solid rgba(246,239,227,.14);
  border-radius:8px;
  background:rgba(246,239,227,.045);
  color:var(--td);
  font:650 .58rem/1.25 var(--f-m);
  text-align:center;
  margin:0;
  margin-bottom:0;
}
.phase-strip li{
  min-width:0;
  overflow-wrap:normal;
  word-break:normal;
}
.opportunity-strip{
  display:grid;
  gap:7px;
  margin-top:auto;
  padding-top:18px;
}
.opportunity-strip strong{
  color:var(--ember);
  font:700 .58rem/1.2 var(--f-m);
  letter-spacing:.09em;
  text-transform:uppercase;
}
.opportunity-strip span{
  padding:9px 11px;
  border-left:2px solid var(--ember);
  background:rgba(226,112,42,.07);
  color:var(--td);
  font-size:.68rem;
}
#metodologia [data-framework-stage].is-framework-active .phase-strip li,
#metodologia [data-framework-stage].is-framework-active .hitl-strip li{
  border-color:color-mix(in srgb,var(--framework-accent) 55%,transparent);
  color:var(--sand);
}
@media(max-width:960px){
  #metodologia [data-framework-stage].is-framework-pending,
  #metodologia [data-framework-stage].is-framework-active{transform:none}
}
@media(max-width:560px){
  .framework-sequence{display:grid;grid-template-columns:1fr}
  .framework-sequence i{display:none}
}
@media(prefers-reduced-motion:reduce){
  #metodologia [data-framework-stage]{transition:none!important;opacity:1!important;transform:none!important;filter:none!important}
  #metodologia [data-framework-stage]::after{display:none!important;animation:none!important}
}