.demo { display: grid; gap: 1rem; }
.demo__pasos {
  margin: 0; padding: 0; border: 0; min-width: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem;
}
.demo__leyenda { display: none; }
.demo__paso {
  position: relative; display: grid; grid-template-columns: 2rem minmax(0, 1fr);
  gap: .7rem; align-items: start; padding: .8rem .9rem 1.05rem;
  border-radius: var(--radio-g); border: 1px solid var(--linea); background: var(--nieve); cursor: pointer;
  transition: background .2s, border-color .2s, box-shadow .2s, transform .2s;
}
.demo__paso:hover { border-color: var(--linea-fuerte); transform: translateY(-2px); }
.demo__n {
  display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 999px;
  font-family: var(--mono); font-size: .8rem; font-weight: 500;
  border: 1.5px solid var(--linea-fuerte); color: var(--tinta-media); background: var(--nieve);
  transition: background .2s, border-color .2s, color .2s;
}
.demo__txt { display: grid; gap: .15rem; min-width: 0; }
.demo__txt b { font-size: 1rem; color: var(--tinta); line-height: 1.3; }
.demo__txt span { font-size: .86rem; line-height: 1.45; color: var(--tinta-media); }
.demo__paso:has(input:checked) { border-color: var(--morado-claro); box-shadow: var(--sombra); }
.demo__paso:has(input:checked) .demo__n { background: var(--morado); border-color: var(--morado); color: #fff; }
.demo__paso:has(input:checked) .demo__txt b { color: var(--morado-hondo); }
.demo__radio {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0;
  border: 0; border-radius: inherit; background: none; cursor: pointer;
  -webkit-appearance: none; appearance: none;
}
.demo__radio:focus-visible { outline: 3px solid var(--acero-hondo); outline-offset: 2px; }
.demo__reloj {
  position: absolute; left: 1rem; right: 1rem; bottom: .45rem; height: 3px;
  border-radius: 999px; overflow: hidden;
}
.demo__reloj::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: var(--lazo); transform: scaleX(0); transform-origin: left center;
}
.demo__app {
  min-width: 0; container: ventana / inline-size;
  border-radius: 14px; overflow: hidden; background: var(--nieve);
  border: 1px solid var(--ops-borde);
  box-shadow: 0 34px 60px -34px rgba(64, 17, 66, .42), 0 12px 26px -14px rgba(54, 54, 54, .22);
}
.ops-marco { display: grid; grid-template-columns: 10.5rem minmax(0, 1fr); }
.ops-lado {
  display: flex; flex-direction: column; gap: .1rem; padding: .85rem .6rem .7rem;
  background: var(--nieve); border-right: 1px solid var(--ops-borde); font-size: .72rem;
}
.ops-logo { display: flex; align-items: center; gap: .35rem; margin: 0 0 .6rem .2rem; }
.ops-logo img { display: block; width: 7.4rem; height: auto; }
.ops-grupo {
  margin: .5rem 0 .2rem .4rem; font-family: var(--mono); font-size: .54rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ops-tenue);
}
.ops-lado ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.ops-lado li {
  position: relative; display: flex; align-items: center; gap: .45rem; padding: .32rem .45rem;
  border-radius: 7px; color: var(--tinta-media); white-space: nowrap;
}
.ops-lado li svg {
  flex: none; width: 13px; height: 13px; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: .75;
}
.ops-lado li.es { background: var(--niebla); color: var(--morado-hondo); font-weight: 600; }
.ops-lado li.es svg { opacity: 1; }
.ops-lado li.es::after {
  content: ""; position: absolute; left: -.6rem; top: .25rem; bottom: .25rem; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--morado);
}
.ops-yo {
  margin: auto 0 0; padding-top: .6rem; border-top: 1px solid var(--ops-borde);
  display: flex; align-items: center; gap: .4rem; font-weight: 600; color: var(--tinta);
}
.ops-yo span {
  display: grid; place-items: center; width: 1.55rem; height: 1.55rem; border-radius: 50%;
  background: var(--niebla); color: var(--morado-hondo); font-size: .58rem;
}
.demo__hoja { min-width: 0; display: flex; flex-direction: column; background: var(--ops-mesa); container-type: inline-size; }
.ops-barra {
  display: flex; align-items: center; gap: .8rem; padding: .5rem .9rem;
  background: var(--nieve); border-bottom: 1px solid var(--ops-borde);
}
.ops-miga { margin: 0; font-size: .72rem; color: var(--ops-tenue); white-space: nowrap; }
.ops-miga i { font-style: normal; margin: 0 .25rem; }
.ops-miga b { color: var(--tinta); font-weight: 600; }
.ops-buscar {
  flex: 1; min-width: 0; margin: 0; padding: .28rem .75rem; border-radius: 999px; background: var(--ops-mesa);
  border: 1px solid var(--ops-borde); font-size: .66rem; color: var(--ops-tenue);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.demo__ejemplo {
  margin: 0 0 0 auto; font-family: var(--mono); font-size: .6rem; letter-spacing: .04em;
  color: var(--morado-hondo); background: var(--niebla); border: 1px solid var(--morado-claro);
  border-radius: 999px; padding: .12rem .55rem; white-space: nowrap;
}
.ops-cuerpo { padding: .9rem 1rem 1.1rem; }
.ops-portada {
  position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: .5rem 1rem; margin-bottom: .8rem; padding: .85rem 1rem; border-radius: 12px; color: #fff;
  background:
    radial-gradient(circle, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 68%) right -50px top -70px / 200px 200px no-repeat,
    linear-gradient(135deg, var(--morado-hondo) 0%, var(--morado) 100%);
  box-shadow: 0 14px 28px -16px rgba(92, 24, 95, .6);
}
.ops-portada > div { min-width: 0; }
.ops-portada__tit { margin: 0; font-weight: 600; font-size: 1.02rem; line-height: 1.25; color: #fff; }
.ops-portada__sub { margin: .15rem 0 0; font-size: .7rem; color: rgba(255, 255, 255, .88); }
.ops-portada--empleo { justify-content: flex-start; }
.ops-portada--empleo .demo__estado { margin-left: auto; }
.ops-portada__logo {
  display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 10px; flex: none;
  background: var(--nieve); color: var(--morado-hondo); font-weight: 600; font-size: .8rem;
}
.demo__estado { display: flex; flex-wrap: wrap; gap: .3rem; }
.ops-sello {
  display: inline-flex; align-items: center; gap: .4rem; padding: .22rem .7rem; border-radius: 999px;
  background: rgba(255, 255, 255, .95); color: var(--morado-hondo); font-size: .62rem; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase; white-space: nowrap;
}
.ops-sello::before { content: ""; width: .42rem; height: .42rem; border-radius: 50%; background: var(--ops-tenue); }
.ops-sello--2::before { background: var(--acero); }
.ops-sello--3::before { background: var(--ops-ok); }
.ops-sello--4::before { background: var(--morado); }
.demo__escena { min-width: 0; }
.demo__escena + .demo__escena { margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px dashed var(--ops-borde); }
@supports selector(:has(*)) {
  .demo__escenas { display: grid; }
  .demo__escena { grid-area: 1 / 1; visibility: hidden; }
  .demo__escena + .demo__escena { margin-top: 0; padding-top: 0; border-top: 0; }
  .demo__estado .ops-sello { display: none; }
  .demo:has(.demo__paso:nth-of-type(1) input:checked) .demo__escena:nth-child(1),
  .demo:has(.demo__paso:nth-of-type(2) input:checked) .demo__escena:nth-child(2),
  .demo:has(.demo__paso:nth-of-type(3) input:checked) .demo__escena:nth-child(3),
  .demo:has(.demo__paso:nth-of-type(4) input:checked) .demo__escena:nth-child(4) { visibility: visible; }
  .demo:has(.demo__paso:nth-of-type(1) input:checked) .ops-sello:nth-child(1),
  .demo:has(.demo__paso:nth-of-type(2) input:checked) .ops-sello:nth-child(2),
  .demo:has(.demo__paso:nth-of-type(3) input:checked) .ops-sello:nth-child(3),
  .demo:has(.demo__paso:nth-of-type(4) input:checked) .ops-sello:nth-child(4) { display: inline-flex; }
}
.ops-kpi__ic svg, .ops-cinta__ic svg, .ops-medalla svg, .ops-listo__ic svg, .ops-firma__ic svg, .ops-canal svg {
  display: block; width: 14px; height: 14px; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.ops-pildora {
  display: inline-flex; align-items: center; gap: .3rem; padding: .14rem .55rem; border-radius: 999px;
  font-size: .64rem; font-weight: 600; white-space: nowrap; line-height: 1.5; border: 1px solid transparent;
}
.ops-pildora::before { content: ""; width: .36rem; height: .36rem; border-radius: 50%; background: currentColor; }
.ops-pildora--ok { background: var(--ops-ok-suave); color: var(--ops-ok); border-color: rgba(11, 110, 79, .2); }
.ops-pildora--alerta { background: var(--ops-alerta-suave); color: var(--ops-alerta); border-color: rgba(138, 77, 8, .2); }
.ops-pildora--neutro { background: var(--ops-mesa); color: var(--ops-tenue); border-color: var(--ops-borde); }
.ops-av {
  display: inline-grid; place-items: center; flex: none; width: 1.6rem; height: 1.6rem; border-radius: 50%;
  font-size: .56rem; font-weight: 600; letter-spacing: .02em; vertical-align: middle;
}
.ops-av--1 { background: var(--niebla); color: var(--morado-hondo); }
.ops-av--2 { background: var(--ops-info-suave); color: var(--acero-hondo); }
.ops-av--3 { background: var(--ops-ok-suave); color: var(--ops-ok); }
.ops-av--4 { background: var(--ops-alerta-suave); color: var(--ops-alerta); }
.ops-kpis { list-style: none; margin: 0 0 .75rem; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .55rem; }
.ops-kpi {
  display: grid; grid-template-columns: 1.7rem minmax(0, 1fr); gap: .3rem .5rem; align-items: center; min-width: 0;
  padding: .6rem .7rem; background: var(--nieve); border: 1px solid var(--ops-borde); border-radius: 10px;
}
.ops-kpi p { display: contents; }
.ops-kpi__ic { display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; color: #fff; }
.ops-kpi__ic--m { background: linear-gradient(135deg, var(--morado-hondo), var(--morado)); }
.ops-kpi__ic--v { background: var(--ops-ok); }
.ops-kpi small { font-size: .56rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ops-tenue); line-height: 1.25; }
.ops-kpi b { grid-column: 1 / -1; font-family: var(--mono); font-weight: 500; font-size: 1.05rem; color: var(--tinta); font-variant-numeric: tabular-nums; }
.ops-cinta {
  display: flex; align-items: center; flex-wrap: wrap; gap: .3rem .65rem; margin: 0 0 .7rem; padding: .5rem .75rem;
  border-radius: 10px; color: #fff; background: linear-gradient(135deg, var(--morado-hondo), var(--morado));
  box-shadow: 0 10px 22px -12px rgba(92, 24, 95, .65);
}
.ops-cinta__ic { display: grid; place-items: center; flex: none; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: rgba(255, 255, 255, .18); }
.ops-cinta b { font-size: .84rem; font-weight: 600; color: #fff; }
.ops-cinta > span:last-child:not(.ops-cinta__ic) { margin-left: auto; font-size: .68rem; color: rgba(255, 255, 255, .88); }
.ops-tabla {
  width: 100%; border-collapse: separate; border-spacing: 0; font-size: .76rem;
  background: var(--nieve); border: 1px solid var(--ops-borde); border-radius: 10px; overflow: hidden;
}
.ops-tabla th, .ops-tabla td { padding: .5rem .6rem; text-align: left; border-bottom: 1px solid var(--ops-borde); color: var(--tinta); }
.ops-tabla tbody tr:last-child > * { border-bottom: 0; }
.ops-tabla thead th { font-size: .58rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ops-tenue); line-height: 1.3; }
.ops-tabla .ops-cruda { font-family: var(--mono); font-size: .7rem; color: var(--ops-tenue); }
.ops-pie { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; margin: .7rem 0 0; font-size: .74rem; color: var(--ops-tenue); }
.ops-pie b { color: var(--tinta); font-family: var(--mono); font-weight: 500; }
.ops-nota { margin: .6rem 0 0; font-size: .74rem; color: var(--tinta-media); }
.ds-rejilla { min-width: 0; overflow-x: auto; }
.ops-grilla { font-variant-numeric: tabular-nums; }
.ops-grilla td { text-align: right; font-family: var(--mono); font-size: .72rem; white-space: nowrap; }
.ops-grilla thead th { text-align: right; }
.ops-grilla thead th:first-child { text-align: left; }
.ops-grilla tbody th { background: var(--ops-fija); font-size: .64rem; font-weight: 600; letter-spacing: .08em; white-space: nowrap; }
.ops-grilla tbody th .ops-av { margin-right: .45rem; }
.ops-grilla td:nth-child(5) { font-weight: 500; }
.ops-grilla td:last-child { color: var(--morado-hondo); font-weight: 500; background: var(--niebla); }
.ops-grilla tfoot th, .ops-grilla tfoot td { background: var(--ops-mesa); border-top: 2px solid var(--morado-hondo); border-bottom: 0; font-weight: 600; }
.ops-grilla tfoot th { font-family: var(--mono); font-size: .6rem; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.ops-grilla tfoot th span { display: block; font-family: var(--sans); letter-spacing: 0; text-transform: none; font-weight: 400; color: var(--ops-tenue); }
.ops-grilla tfoot td:last-child { background: var(--niebla); }
.ops-familias td { padding: .3rem .6rem; border-bottom: 0; text-align: left; font-size: .56rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; }
.ops-fam::before {
  content: ""; display: inline-block; width: .42rem; height: .42rem; margin-right: .4rem;
  border-radius: 50%; background: currentColor; vertical-align: .05rem;
}
.ops-fam--ing { background: var(--ops-ing); color: var(--ops-ok); border-left: 2px solid var(--ops-ok); }
.ops-fam--desc { background: var(--ops-desc); color: var(--ops-critico); border-left: 2px solid var(--ops-critico); }
.ops-listo, .ops-bandeja {
  display: flex; align-items: center; flex-wrap: wrap; gap: .35rem .6rem; margin: 0 0 .5rem; padding: .45rem .75rem;
  background: var(--nieve); border: 1px solid var(--ops-borde); border-radius: 10px; font-size: .74rem; color: var(--ops-tenue);
}
.ops-listo b, .ops-bandeja b { color: var(--tinta); }
.ops-listo__ic { display: grid; place-items: center; width: 1.35rem; height: 1.35rem; border-radius: 6px; background: var(--ops-ok-suave); color: var(--ops-ok); }
.ops-segs { display: flex; gap: 3px; margin-left: auto; }
.ops-segs i { width: 1.1rem; height: .3rem; border-radius: 999px; background: var(--ops-ok); }
.ops-bandeja { margin-bottom: .7rem; }
.ops-cuenta { padding: .1rem .55rem; border-radius: 999px; background: var(--morado-hondo); color: #fff; font-size: .64rem; font-weight: 600; }
.ops-cuenta--ok { background: var(--ops-ok-suave); color: var(--ops-ok); }
.ds-dos { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: .6rem; }
.ops-desglose {
  padding: .75rem .85rem; background: var(--nieve); border: 1px solid var(--ops-borde); border-radius: 10px;
  box-shadow: 0 16px 30px -18px rgba(64, 17, 66, .45);
}
.ops-desglose__cab {
  margin: 0; display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: .2rem .6rem;
  font-size: .62rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--ops-tenue);
}
.ops-desglose__cab b { font-family: var(--mono); font-size: .92rem; letter-spacing: 0; color: var(--tinta); font-weight: 500; }
.ops-formula {
  margin: .5rem 0 .6rem; padding: .45rem .6rem; border-radius: 8px; background: var(--niebla);
  font-family: var(--mono); font-size: .8rem; color: var(--morado-hondo);
}
.ops-desglose dl { margin: 0; display: grid; gap: .3rem; }
.ops-desglose dl div { display: flex; gap: .6rem; font-size: .74rem; }
.ops-desglose dt {
  flex: none; width: 3.1rem; padding-top: .1rem; font-family: var(--mono); font-size: .6rem;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ops-tenue);
}
.ops-desglose dd { margin: 0; color: var(--tinta); }
.ops-cambios { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; align-content: start; }
.ops-cambios li {
  display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); gap: .35rem .55rem; align-items: start;
  padding: .6rem .7rem; background: var(--nieve); border: 1px solid var(--ops-borde); border-radius: 10px;
}
.ops-cambios p { margin: 0; font-size: .74rem; color: var(--tinta-media); line-height: 1.4; }
.ops-cambios p b { display: block; color: var(--tinta); font-size: .78rem; }
.ops-cambios .ops-pildora { grid-column: 2; justify-self: start; }
.ds-firmas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; margin-bottom: .6rem; }
.ops-firma {
  margin: 0; display: flex; align-items: center; gap: .55rem; padding: .5rem .7rem;
  background: var(--ops-ok-suave); border: 1px solid rgba(11, 110, 79, .2); border-radius: 10px;
}
.ops-firma__ic { display: grid; place-items: center; flex: none; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--ops-ok); color: #fff; }
.ops-firma > span:nth-child(2) { display: grid; min-width: 0; }
.ops-firma small { font-size: .58rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--ops-ok); }
.ops-firma b { font-size: .82rem; color: var(--tinta); }
.ops-firma time { margin-left: auto; font-family: var(--mono); font-size: .7rem; color: var(--ops-ok); }
.ops-medallas { list-style: none; margin: 0 0 .6rem; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; }
.ops-medallas li {
  display: grid; justify-items: center; align-content: start; text-align: center; gap: .15rem; padding: .6rem .4rem .55rem;
  background: var(--nieve); border: 1px solid var(--ops-borde); border-radius: 12px; box-shadow: 0 12px 26px -16px rgba(54, 54, 54, .35);
}
.ops-medalla {
  display: grid; place-items: center; flex: none; width: 2rem; height: 2rem; margin-bottom: .2rem; border-radius: 50%;
  color: #fff; background: linear-gradient(135deg, var(--morado-hondo), var(--morado)); box-shadow: 0 6px 14px -6px rgba(155, 46, 140, .75);
}
.ops-medallas b { font-size: .76rem; color: var(--morado-hondo); line-height: 1.2; }
.ops-medallas small { font-size: .62rem; color: var(--ops-tenue); line-height: 1.3; }
.ops-registro { list-style: none; margin: 0; padding: .3rem .75rem; background: var(--nieve); border: 1px solid var(--ops-borde); border-radius: 10px; }
.ops-registro li { display: flex; gap: .55rem; padding: .32rem 0; border-bottom: 1px dashed var(--ops-borde); font-size: .72rem; color: var(--tinta-media); }
.ops-registro li:last-child { border-bottom: 0; }
.ops-registro time { flex: none; font-family: var(--mono); font-size: .68rem; color: var(--ops-tenue); }
.ops-registro b { color: var(--tinta); font-weight: 600; }
.ops-canal {
  display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; margin-right: .45rem; border-radius: 50%;
  background: var(--niebla); color: var(--morado-hondo); vertical-align: middle;
}
.ds-canales td:first-child { font-weight: 600; white-space: nowrap; }
@container (max-width: 300px) {
  .ops-miga { display: none; }
  .ds-canales td:first-child { white-space: normal; }
  .ds-canales td, .ds-canales th { padding-inline: .35rem; }
}
.ops-ajustes, .ops-reqs { list-style: none; margin: 0; padding: 0; background: var(--nieve); border: 1px solid var(--ops-borde); border-radius: 10px; }
.ops-ajuste {
  display: grid; grid-template-columns: 1.6rem minmax(0, 1fr) auto auto; gap: .3rem .7rem; align-items: center;
  padding: .5rem .75rem; border-bottom: 1px solid var(--ops-borde);
}
.ops-ajuste:last-child, .ops-reqs li:last-child { border-bottom: 0; }
.ops-rango {
  display: grid; place-items: center; width: 1.45rem; height: 1.45rem; border-radius: 50%;
  background: var(--ops-mesa); color: var(--ops-tenue); font-size: .66rem; font-weight: 600;
}
.ops-rango--top { background: linear-gradient(135deg, var(--morado-hondo), var(--morado)); color: #fff; }
.ops-ajuste__nom, .ops-reqs p { margin: 0; display: grid; min-width: 0; }
.ops-ajuste__nom b { font-size: .82rem; color: var(--tinta); }
.ops-ajustes q, .ops-reqs q { font-size: .7rem; color: var(--ops-tenue); quotes: "\00AB" "\00BB"; }
.ops-global { margin: 0; font-size: .64rem; color: var(--ops-tenue); white-space: nowrap; }
.ops-global b { font-family: var(--mono); font-weight: 500; font-size: .92rem; color: var(--tinta); }
.ops-candidato {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .7rem; align-items: center; margin-bottom: .7rem;
  padding: .7rem .9rem; border-radius: 12px; color: #fff;
  background: linear-gradient(115deg, var(--morado-hondo) 0%, var(--morado) 55%, var(--acero) 100%);
}
.ops-candidato .ops-av { width: 2.6rem; height: 2.6rem; font-size: .8rem; background: rgba(255, 255, 255, .16); color: #fff; border: 2px solid rgba(255, 255, 255, .7); }
.ops-candidato p { margin: 0; display: grid; min-width: 0; }
.ops-candidato p b { font-size: .92rem; color: #fff; }
.ops-candidato p span { font-size: .68rem; color: rgba(255, 255, 255, .9); }
.ops-candidato .ops-anillo { justify-items: center; gap: .25rem; }
.ops-anillo span {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 3.2rem; height: 3.2rem; border-radius: 50%;
  font-size: .56rem; color: rgba(255, 255, 255, .9); background: conic-gradient(#fff 0 92%, rgba(255, 255, 255, .25) 0);
}
.ops-anillo span::before { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--acero-hondo); }
.ops-anillo span b { position: relative; font-size: .95rem; color: #fff; line-height: 1; }
.ops-anillo span i { position: relative; font-style: normal; font-size: .5rem; color: rgba(255, 255, 255, .85); }
.ops-anillo small {
  padding: .08rem .45rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .6);
  font-size: .52rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #fff;
}
.ops-reqs { margin-bottom: .6rem; }
.ops-reqs li { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr) auto; gap: .3rem .6rem; align-items: center; padding: .5rem .75rem; border-bottom: 1px solid var(--ops-borde); }
.ops-req__n { display: grid; place-items: center; width: 1.45rem; height: 1.45rem; border-radius: 6px; background: var(--ops-ok); color: #fff; font-size: .68rem; font-weight: 600; font-style: italic; }
.ops-reqs b { font-size: .78rem; color: var(--tinta); }
.ops-pruebas { display: flex; flex-wrap: wrap; gap: .45rem; margin: 0; }
.ops-pruebas span { padding: .28rem .65rem; border-radius: 8px; background: var(--nieve); border: 1px solid var(--ops-borde); font-size: .7rem; color: var(--ops-tenue); }
.ops-pruebas b { font-family: var(--mono); font-weight: 500; color: var(--morado-hondo); margin-left: .2rem; }
.ops-terna { list-style: none; margin: 0 0 .6rem; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; }
.ops-carta {
  display: grid; gap: .4rem; align-content: start; justify-items: start; padding: .7rem;
  background: var(--nieve); border: 1px solid var(--ops-borde); border-radius: 12px;
}
.ops-carta:first-child { border-color: var(--morado-claro); box-shadow: 0 14px 26px -20px rgba(92, 24, 95, .6); }
.ops-carta__cab { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr) auto; gap: .45rem; align-items: center; width: 100%; }
.ops-carta__cab b { font-size: .78rem; color: var(--tinta); line-height: 1.2; }
.ops-carta__global { font-family: var(--mono); font-size: .98rem; color: var(--morado-hondo); }
.ops-carta__global small { font-size: .6rem; color: var(--ops-tenue); }
.ops-carta p { margin: 0; font-size: .72rem; color: var(--tinta-media); line-height: 1.4; }
.ops-carta p small {
  display: block; font-family: var(--mono); font-size: .56rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ops-tenue);
}
.ops-informe {
  display: flex; align-items: center; gap: .65rem; margin: 0; padding: .5rem .75rem;
  background: var(--nieve); border: 1.5px dashed var(--acero-claro); border-radius: 10px;
}
.ops-informe .ops-medalla { margin: 0; }
.ops-informe > span:nth-child(2) { display: grid; min-width: 0; }
.ops-informe b { font-size: .8rem; color: var(--tinta); }
.ops-informe small { font-size: .68rem; color: var(--ops-tenue); }
.ops-informe a {
  margin-left: auto; min-height: 44px; display: inline-flex; align-items: center;
  font-size: .78rem; font-weight: 600; color: var(--morado-hondo); white-space: nowrap;
}
@container ventana (max-width: 780px) {
  .ops-marco { grid-template-columns: minmax(0, 1fr); }
  .ops-lado { display: none; }
}
@container (max-width: 760px) {
  .ds-opc4, .ops-familias { display: none; }
}
@container (max-width: 600px) {
  .ds-opc, .ops-buscar, .ops-segs { display: none; }
  .ds-dos { grid-template-columns: minmax(0, 1fr); }
  .ops-kpis, .ops-medallas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ops-terna { grid-template-columns: minmax(0, 1fr); }
  .ops-carta { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: .8rem; }
  .ops-carta__cab, .ops-carta .ops-pildora { grid-column: 1 / -1; }
  .ops-ajuste { grid-template-columns: 1.6rem minmax(0, 1fr) auto; }
  .ops-ajuste .ops-pildora { grid-column: 2 / -1; justify-self: start; }
}
@container (max-width: 460px) {
  .ds-opc2, .ops-kpis--repite { display: none; }
  .ds-firmas { grid-template-columns: minmax(0, 1fr); }
  .ops-reqs li { grid-template-columns: 1.5rem minmax(0, 1fr); }
  .ops-reqs .ops-pildora { grid-column: 2; justify-self: start; }
  .ops-cuerpo { padding: .75rem .7rem 1rem; }
  .ops-grilla th, .ops-grilla td { padding-inline: .4rem; }
}
@container (max-width: 400px) {
  .ds-opc3 { display: none; }
  .ops-candidato { grid-template-columns: auto minmax(0, 1fr); }
  .ops-candidato .ops-anillo { display: none; }
}
@media (max-width: 960px) {
  .demo { gap: .75rem; }
  .demo__pasos { gap: .4rem; }
  .demo__paso {
    grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center;
    gap: .35rem; padding: .6rem .35rem .85rem;
  }
  .demo__txt span { display: none; }
  .demo__txt b { font-size: .84rem; }
  .demo__reloj { left: .7rem; right: .7rem; bottom: .35rem; }
  .demo__leyenda {
    display: block; margin: 0; min-height: 2.9em; text-align: center;
    font-size: .95rem; line-height: 1.45; color: var(--tinta-media);
  }
  .demo__leyenda span + span { display: none; }
  @supports selector(:has(*)) {
    .demo__leyenda span { display: none; }
    .demo:has(.demo__paso:nth-of-type(1) input:checked) .demo__leyenda span:nth-child(1),
    .demo:has(.demo__paso:nth-of-type(2) input:checked) .demo__leyenda span:nth-child(2),
    .demo:has(.demo__paso:nth-of-type(3) input:checked) .demo__leyenda span:nth-child(3),
    .demo:has(.demo__paso:nth-of-type(4) input:checked) .demo__leyenda span:nth-child(4) { display: inline; }
  }
}
.sellos {
  list-style: none; margin: 2.2rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.2rem 1.4rem;
}
.sellos__item { display: flex; gap: .75rem; align-items: flex-start; }
.sellos__item p { margin: 0; display: grid; gap: .2rem; }
.sellos__item b { font-size: 1rem; color: var(--tinta); }
.sellos__item span { font-size: .9rem; line-height: 1.45; color: var(--tinta-media); }
@media (max-width: 960px) { .sellos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .sellos { grid-template-columns: minmax(0, 1fr); } }
.informe {
  display: grid; grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); gap: 2rem 3rem; align-items: center;
}
.informe__pasos { margin: 0; padding: 0; border: 0; min-width: 0; display: grid; gap: .45rem; }
.informe__pista {
  grid-column: 1 / -1; display: flex; align-items: center; gap: .45rem; margin: 0 0 .2rem; font-size: .82rem;
  font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--morado);
}
.informe__pista::after {
  content: ""; width: .55rem; height: .55rem; border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor; transform: rotate(45deg); animation: informe-pista 1.2s ease-in-out infinite;
}
@keyframes informe-pista { 0%, 100% { transform: translateY(-2px) rotate(45deg); } 50% { transform: translateY(3px) rotate(45deg); } }
@media (prefers-reduced-motion: reduce) { .informe__pista::after { animation: none; } }
.informe:hover .informe__pista::after, .informe:focus-within .informe__pista::after { animation-play-state: paused; }
.informe__paso { position: relative; }
.informe__paso:not(:has(input:checked))::after {
  content: "\203A"; position: absolute; right: .9rem; top: 50%; transform: translateY(-50%);
  font-size: 1.4rem; line-height: 1; color: var(--morado-claro);
}
.informe__paso {
  display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: .7rem; align-items: start;
  padding: .8rem .95rem; border-radius: var(--radio-g); border: 1px solid transparent; cursor: pointer;
  transition: background .2s, border-color .2s, box-shadow .2s;
}
.informe__paso:hover { background: var(--nieve); border-color: var(--linea); }
.informe__paso > span:last-child { display: grid; gap: .15rem; }
.informe__paso b { font-size: 1rem; color: var(--tinta); }
.informe__paso > span:last-child span { font-size: .88rem; line-height: 1.45; color: var(--tinta-media); }
.informe__n {
  display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 999px;
  font-family: var(--mono); font-size: .8rem; border: 1.5px solid var(--linea-fuerte); color: var(--tinta-media); background: var(--nieve);
}
.informe__paso:has(input:checked) { background: var(--nieve); border-color: var(--morado-claro); box-shadow: var(--sombra); }
.informe__paso:has(input:checked) .informe__n { background: var(--morado); border-color: var(--morado); color: #fff; }
.informe__paso:has(input:checked) b { color: var(--morado-hondo); }
.informe__paso:has(input:focus-visible) { outline: 3px solid var(--acero-hondo); outline-offset: 2px; }
.informe__hojas { display: grid; justify-items: center; padding: 1.2rem 2.5rem 2rem; }
.informe__hoja {
  grid-area: 1 / 1; width: min(100%, 26rem); height: auto; border-radius: 6px; background: var(--nieve);
  box-shadow: 0 2px 4px rgba(36, 16, 43, .08), 0 28px 50px -24px rgba(36, 16, 43, .45);
  transition: transform .5s cubic-bezier(.2, .7, .2, 1), box-shadow .5s ease;
}
.informe__hoja:nth-child(1) { transform: rotate(-2deg) translate(-4%, 1%); }
.informe__hoja:nth-child(2) { transform: rotate(2.5deg) translate(4%, 2%); }
.informe__hoja:nth-child(3) { transform: rotate(5deg) translate(8%, 4%); }
.informe__hoja:nth-child(4) { transform: rotate(-5deg) translate(-8%, 4%); }
.informe:has(#inf-1:checked) .informe__hoja:nth-child(1),
.informe:has(#inf-2:checked) .informe__hoja:nth-child(2),
.informe:has(#inf-3:checked) .informe__hoja:nth-child(3),
.informe:has(#inf-4:checked) .informe__hoja:nth-child(4) {
  z-index: 2; transform: none;
  box-shadow: 0 2px 4px rgba(36, 16, 43, .1), 0 40px 70px -28px rgba(36, 16, 43, .55);
}
@media (max-width: 860px) {
  .informe { grid-template-columns: minmax(0, 1fr); }
  .informe__pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .informe__hojas { padding: .5rem 1.4rem 1.4rem; }
  .informe__hoja:nth-child(1) { transform: rotate(-1.5deg) translate(-2%, 1%); }
  .informe__hoja:nth-child(2) { transform: rotate(1.5deg) translate(2%, 1%); }
  .informe__hoja:nth-child(3) { transform: rotate(3deg) translate(4%, 2%); }
  .informe__hoja:nth-child(4) { transform: rotate(-3deg) translate(-4%, 2%); }
}
@media (max-width: 520px) {
  .informe__pasos { grid-template-columns: minmax(0, 1fr); }
  .informe__paso { padding: .6rem .7rem; }
  .informe__paso > span:last-child span { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .demo--corre .demo__paso:has(input:checked) .demo__reloj { background: var(--linea); }
  .demo--corre .demo__paso:has(input:checked) .demo__reloj::after { animation: demo-reloj 7.5s linear forwards; }
  .demo--corre:hover .demo__paso:has(input:checked) .demo__reloj::after,
  .demo--corre:focus-within .demo__paso:has(input:checked) .demo__reloj::after { animation-play-state: paused; }
  .demo--visto .es-activa { animation: demo-aparece .4s ease both; }
  .demo--visto .es-activa .ops-cinta { animation: demo-desliza .5s .1s cubic-bezier(.2, .7, .2, 1) both; }
  .demo--visto .es-activa .ops-kpi { animation: demo-fila .45s ease both; }
  .demo--visto .es-activa .ops-kpi:nth-child(2) { animation-delay: .1s; }
  .demo--visto .es-activa .ops-kpi:nth-child(3) { animation-delay: .2s; }
  .demo--visto .es-activa .ops-kpi:nth-child(4) { animation-delay: .3s; }
  .demo--visto .es-activa .ds-mapa tbody tr { animation: demo-fila .45s ease both; }
  .demo--visto .es-activa .ds-mapa tbody tr:nth-child(1) { animation-delay: .5s; }
  .demo--visto .es-activa .ds-mapa tbody tr:nth-child(2) { animation-delay: .8s; }
  .demo--visto .es-activa .ds-mapa tbody tr:nth-child(3) { animation-delay: 1.1s; }
  .demo--visto .es-activa .ds-mapa tbody tr:nth-child(4) { animation-delay: 1.4s; }
  .demo--visto .es-activa .ds-mapa .ops-pildora { animation: demo-sello .4s ease both; }
  .demo--visto .es-activa .ds-mapa tr:nth-child(1) .ops-pildora { animation-delay: .85s; }
  .demo--visto .es-activa .ds-mapa tr:nth-child(2) .ops-pildora { animation-delay: 1.15s; }
  .demo--visto .es-activa .ds-mapa tr:nth-child(3) .ops-pildora { animation-delay: 1.45s; }
  .demo--visto .es-activa .ds-mapa tr:nth-child(4) .ops-pildora { animation-delay: 1.75s; }
  .demo--visto .es-activa .ds-mapa + .ops-pie { animation: demo-fila .45s 2.1s ease both; }
  .demo--visto .es-activa .ops-grilla tbody td,
  .demo--visto .es-activa .ops-grilla tfoot td { animation: demo-cifra .5s ease both; }
  .demo--visto .es-activa .ops-grilla td:nth-child(2) { animation-delay: .45s; }
  .demo--visto .es-activa .ops-grilla td:nth-child(3) { animation-delay: .65s; }
  .demo--visto .es-activa .ops-grilla td:nth-child(4) { animation-delay: .85s; }
  .demo--visto .es-activa .ops-grilla td:nth-child(5) { animation-delay: 1.05s; }
  .demo--visto .es-activa .ops-grilla td:nth-child(6) { animation-delay: 1.25s; }
  .demo--visto .es-activa .ops-grilla td:nth-child(7) { animation-delay: 1.45s; }
  .demo--visto .es-activa .ops-grilla td:nth-child(8) { animation-delay: 1.65s; }
  .demo--visto .es-activa .ops-grilla tfoot td:nth-child(n) { animation-delay: 2.1s; }
  .demo--visto .es-activa .ops-segs i { animation: demo-crece-x .35s ease both; }
  .demo--visto .es-activa .ops-segs i:nth-child(2) { animation-delay: .1s; }
  .demo--visto .es-activa .ops-segs i:nth-child(3) { animation-delay: .2s; }
  .demo--visto .es-activa .ops-segs i:nth-child(4) { animation-delay: .3s; }
  .demo--visto .es-activa .ops-segs i:nth-child(5) { animation-delay: .4s; }
  .demo--visto .es-activa .ops-segs i:nth-child(6) { animation-delay: .5s; }
  .demo--visto .es-activa .ops-segs i:nth-child(7) { animation-delay: .6s; }
  .demo--visto .es-activa .ops-bandeja { animation: demo-fila .45s .5s ease both; }
  .demo--visto .es-activa .ops-desglose { animation: demo-sube .55s .9s cubic-bezier(.2, .7, .2, 1) both; }
  .demo--visto .es-activa .ops-formula { animation: demo-pulso 1s 1.5s ease-out 2 both; }
  .demo--visto .es-activa .ops-cambios li { animation: demo-fila .45s 1.5s ease both; }
  .demo--visto .es-activa .ops-cambios li + li { animation-delay: 1.8s; }
  .demo--visto .es-activa .ops-firma { animation: demo-sello .5s .4s ease both; }
  .demo--visto .es-activa .ops-firma + .ops-firma { animation-delay: 1s; }
  .demo--visto .es-activa .ops-medallas li { animation: demo-fila .45s ease both; }
  .demo--visto .es-activa .ops-medallas li:nth-child(1) { animation-delay: 1.4s; }
  .demo--visto .es-activa .ops-medallas li:nth-child(2) { animation-delay: 1.6s; }
  .demo--visto .es-activa .ops-medallas li:nth-child(3) { animation-delay: 1.8s; }
  .demo--visto .es-activa .ops-medallas li:nth-child(4) { animation-delay: 2s; }
  .demo--visto .es-activa .ops-registro li { animation: demo-fila .4s ease both; }
  .demo--visto .es-activa .ops-registro li:nth-child(1) { animation-delay: 2.7s; }
  .demo--visto .es-activa .ops-registro li:nth-child(2) { animation-delay: 2.5s; }
  .demo--visto .es-activa .ops-registro li:nth-child(3) { animation-delay: 2.3s; }
  .demo--visto .es-activa .ds-canales tbody tr { animation: demo-fila .45s ease both; }
  .demo--visto .es-activa .ds-canales tbody tr:nth-child(1) { animation-delay: .5s; }
  .demo--visto .es-activa .ds-canales tbody tr:nth-child(2) { animation-delay: .75s; }
  .demo--visto .es-activa .ds-canales tbody tr:nth-child(3) { animation-delay: 1s; }
  .demo--visto .es-activa .ds-canales tbody tr:nth-child(4) { animation-delay: 1.25s; }
  .demo--visto .es-activa .ds-canales .ops-pildora { animation: demo-sello .4s 1.6s ease both; }
  .demo--visto .es-activa .ops-ajuste { animation: demo-fila .45s ease both; }
  .demo--visto .es-activa .ops-ajuste:nth-child(2) { animation-delay: .2s; }
  .demo--visto .es-activa .ops-ajuste:nth-child(3) { animation-delay: .4s; }
  .demo--visto .es-activa .ops-ajuste:nth-child(4) { animation-delay: .6s; }
  .demo--visto .es-activa .ops-ajuste:nth-child(5) { animation-delay: .8s; }
  .demo--visto .es-activa .ops-ajuste .ops-pildora { animation: demo-sello .4s 1.3s ease both; }
  .demo--visto .es-activa .ops-candidato { animation: demo-desliza .6s .1s cubic-bezier(.2, .7, .2, 1) both; }
  .demo--visto .es-activa .ops-anillo span { animation: demo-sello .5s .6s ease both; }
  .demo--visto .es-activa .ops-reqs li { animation: demo-fila .45s ease both; }
  .demo--visto .es-activa .ops-reqs li:nth-child(1) { animation-delay: .8s; }
  .demo--visto .es-activa .ops-reqs li:nth-child(2) { animation-delay: 1.05s; }
  .demo--visto .es-activa .ops-reqs li:nth-child(3) { animation-delay: 1.3s; }
  .demo--visto .es-activa .ops-pruebas { animation: demo-fila .45s 1.7s ease both; }
  .demo--visto .es-activa .ops-carta { animation: demo-sube .55s cubic-bezier(.2, .7, .2, 1) both; }
  .demo--visto .es-activa .ops-carta:nth-child(1) { animation-delay: .3s; }
  .demo--visto .es-activa .ops-carta:nth-child(2) { animation-delay: .55s; }
  .demo--visto .es-activa .ops-carta:nth-child(3) { animation-delay: .8s; }
  .demo--visto .es-activa .ops-informe { animation: demo-fila .45s 1.4s ease both; }
}
@keyframes demo-reloj { to { transform: scaleX(1); } }
@keyframes demo-aparece { from { opacity: 0; transform: translateY(6px); } }
@keyframes demo-fila { from { opacity: 0; transform: translateY(8px); } }
@keyframes demo-desliza { from { opacity: 0; transform: translateX(-18px); } }
@keyframes demo-sube { from { opacity: 0; transform: translateY(18px) scale(.98); } }
@keyframes demo-sello {
  0% { opacity: 0; transform: scale(1.35); }
  70% { opacity: 1; transform: scale(.96); }
}
@keyframes demo-cifra { from { opacity: 0; color: var(--morado); } }
@keyframes demo-crece-x { from { transform: scaleX(0); } }
@keyframes demo-pulso {
  from { box-shadow: 0 0 0 0 rgba(155, 46, 140, .45); }
  to { box-shadow: 0 0 0 10px rgba(155, 46, 140, 0); }
}