/* hecho por r3k1 */
@layer ilustra {
  .abanico { width: 100%; height: auto; overflow: visible; }
  .aros { transform-box: view-box; transform-origin: 220px 250px; }
  .aro { fill: none; stroke: var(--oro); stroke-linecap: round; stroke-dasharray: 0 100; animation: aro 2.4s var(--suave) forwards; }
  .aro--1 { stroke-width: 5; opacity: .85; --t: 78 22; animation-delay: .2s; }
  .aro--2 { stroke-width: 1.4; opacity: .6; --t: 62 38; animation-delay: .5s; }
  .aro--3 { stroke-width: 2.6; opacity: .35; --t: 44 56; animation-delay: .8s; }
  [data-tonos]:not(.is-abierto) .aro { animation-play-state: paused; }
  @keyframes aro { to { stroke-dasharray: var(--t); } }

  .anilla { fill: none; stroke: var(--oro); stroke-width: 6; }
  .anilla__brillo { fill: none; stroke: var(--oro-hi); stroke-width: 2; stroke-linecap: round; }

  .mechon { transform-box: view-box; transform-origin: 220px 60px; transform: rotate(0deg); outline: none; cursor: pointer;
    transition: transform 1.6s var(--lento) var(--d), opacity .5s; }
  .is-abierto .mechon { transform: rotate(var(--a)); }
  .is-listo .mechon { transition: transform .9s var(--lento), opacity .5s; }
  .mechon__pelo { filter: drop-shadow(0 6px 10px rgb(0 0 0 / .35)); }
  .mechon__pinza { fill: var(--oro); }
  .mechon__ojo { fill: var(--bg); }
  .mechones.tiene-sel .mechon { opacity: .55; }
  .mechones.tiene-sel .mechon.is-sel { opacity: 1; transform: rotate(var(--a)) translateY(12px); }
  .mechon:focus-visible .mechon__pinza { fill: var(--tinta); }

  .silueta { position: relative; aspect-ratio: 300 / 460; width: min(100%, 360px); margin-inline: auto; transition: --len 1.1s var(--muelle); }
  .silueta > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
  .piel { fill: var(--piel); }
  .capa__a { stop-color: var(--capa); }
  .capa__b { stop-color: var(--capa); stop-opacity: 0; }
  .capa__cuello { fill: none; stroke: var(--oro); stroke-width: 1.2; opacity: .5; }
  .silueta__pelo { -webkit-mask: linear-gradient(#000 calc(var(--len) - 5%), transparent var(--len)); mask: linear-gradient(#000 calc(var(--len) - 5%), transparent var(--len)); }
  .silueta__linea { position: absolute; left: -6%; right: -6%; top: calc(var(--len) - 2.5%); height: 0; border-top: 1px dashed var(--oro); opacity: .7; }
  .silueta > .tijera { inset: auto; position: absolute; width: 18%; height: auto; right: -14%; top: calc(var(--len) - 2.5%); translate: 0 -50%; scale: -1 1; overflow: visible; fill: none; stroke: var(--oro); stroke-width: 2.4; stroke-linecap: round; }
  .tijera g { transform-box: view-box; transform-origin: 30px 15px; }
  .silueta.is-corta .tijera__a { animation: corte-a .5s var(--suave) 2; }
  .silueta.is-corta .tijera__b { animation: corte-b .5s var(--suave) 2; }
  @keyframes corte-a { 50% { transform: rotate(9deg); } }
  @keyframes corte-b { 50% { transform: rotate(-9deg); } }
}