.animated {
        -webkit-animation-duration: 1s;
        animation-duration: 1s;
        -webkit-animation-fill-mode: none!important;
        animation-fill-mode: none!important;
    }

 *, *:before, *:after {
        position: relative;
        box-sizing: border-box;
        --duration: 0.6s;
        --delay: 0s;
        --timing-function: cubic-bezier(0.5, 0, 0.5, 1);
        animation-delay: var(--delay);
        animation-duration: var(--duration);
        animation-timing-function: var(--timing-function);
        animation-fill-mode: both;
        transition-property: none;
        transition-delay: var(--delay);
        transition-duration: var(--duration);
        transition-timing-function: var(--timing-function);
    }

    :root {
        --easing: cubic-bezier(0.6, 0, 0.4, 1);
        --color-bg: #e4e4e4;
    }
    #tree > form {
        display: grid;
    }
    #tree > form > * {
        grid-area: 1/1;
    }

    .tree-module label {
        overflow: hidden;
    }
    .tree-module .radio {
        display: block;
        margin: 0 0 2em;
        cursor: pointer;
    }
    .tree-module .radio > span {
        font-weight: bold;
        font-size: 2rem;
        display: grid;
        grid-template-columns: auto auto;
        grid-template-rows: auto;
        grid-template-areas: 'radio label';
        grid-column-gap: 0.25em;
        transition-property: transform;
        text-align: center;
    }
    .tree-module .radio.min > span {
        font-size: 1.25rem;
    }
    .tree-module .radio > span:before, .radio > span:after {
        content: '';
        height: 1em;
        width: 1em;
        border-radius: 50%;
        border: 1px solid #fff;
        align-self: center;
        justify-self: center;
        grid-area: radio;
    }
    .tree-module .radio > span:after {
        transition: clip-path 0.6s var(--easing);
        border: none;
        width: 0.8em;
        height: 0.8em;
        background: #00FF00;
        clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
    }
    .tree-module .radio > input[type="radio"] {
        position: absolute;
        opacity: 0;
    }
    .tree-module .radio > input[type="radio"]:checked ~ span:after {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }
    .tree-module .radio > span {
        animation-name: clip-in;
        --duration: calc(0.8s + var(--i) * 0.3s);
        --delay: 0.2s;
    }
     @keyframes clip-in {
        from {
            transform: translateY(110%);
        }
    }
    /* Hover effect */
    .tree-module .radio-group:hover > .radio > span, .radio-group:focus > .radio > span {
         color: var(--color-bg);
    }
    .tree-module .radio-group:hover > .radio:hover > span, .radio-group:focus > .radio:hover > span {
        color: #00FF00;
        text-shadow: none;
    }

    .tree-module input[type="result-tree"]::placeholder,
    .tree-module input[type="result-tree-empresa"]::placeholder,
    .tree-module input[type="result-tree-gobierno-no"]::placeholder,
    .tree-module input[type="result-tree-gobierno-si"]::placeholder
    {
        color: black;
    }

    #tree [data-group] {
        pointer-events: none;
        opacity: 0;
        transition-property: opacity;
        --delay: calc(var(--duration) * 0.5);
    }
    #tree[data-state="decision"] [data-group="decision"],
    #tree[data-state="gobierno"] [data-group="gobierno"], 
    #tree[data-state="empresas-industria"] [data-group="empresas-industria"],
    #tree[data-state="empresas"] [data-group="empresas"],
    #tree[data-state="result-tree"] [data-group="result-tree"],
    #tree[data-state="result-tree-empresa"] [data-group="result-tree-empresa"],
    #tree[data-state="result-tree-gobierno-no"] [data-group="result-tree-gobierno-no"],
    #tree[data-state="result-tree-gobierno-si"] [data-group="result-tree-gobierno-si"]
    {
        opacity: 1;
        pointer-events: auto;
        --delay: calc(var(--duration) * 0.7);
    }
    #tree .radio > span {
        animation-fill-mode: backwards;
        transition-property: transform;
        transform: translateY(100%);
        --duration: calc(0.8s + var(--i) * 0.3s);
    }

     #tree[data-state="decision"] .radio > span {
        transform: translateY(0);
    }
     #tree[data-state="gobierno"] .radio > span {
        transform: translateY(0);
    }
     #tree[data-state="empresas"] .radio > span {
        transform: translateY(0);
    }
    #tree[data-state="empresas-industria"] .radio > span,
    {
        transform: translateY(0);
    }
     #tree[data-state="result-tree"] .radio > span,
     #tree[data-state="result-tree-empresa"] .radio > span,
     #tree[data-state="result-tree-gobierno-no"] .radio > span,
     #tree[data-state="result-tree-gobierno-si"] .radio > span
     {
        transform: translateY(-100%);
    }
    .back {
        appearance: none;
        background: transparent;
        border: none;
    }
     .back:focus {
        outline: none;
    }

    /* /////// GLITCH 404 //////// */
    /* /////////////////////////// */

    .wrong{
        animation: glitch 1s linear infinite;
    }

    @keyframes glitch{
      2%,64%{
        transform: translate(2px,0) skew(0deg);
      }
      4%,60%{
        transform: translate(-2px,0) skew(0deg);
      }
      62%{
        transform: translate(0,0) skew(5deg); 
      }
    }

    .wrong:before,
    .wrong:after{
      content: attr(title);
      position: absolute;
      left: 0;
    }

    .wrong:before{
      animation: glitchTop 1s linear infinite;
      clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
      -webkit-clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
    }

    @keyframes glitchTop{
      2%,64%{
        transform: translate(2px,-2px);
      }
      4%,60%{
        transform: translate(-2px,2px);
      }
      62%{
        transform: translate(13px,-1px) skew(-13deg); 
      }
    }

    .wrong:after{
      animation: glitchBotom 1.5s linear infinite;
      clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%);
      -webkit-clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%);
    }
    @keyframes glitchBotom{
      2%,64%{
        transform: translate(-2px,0);
      }
      4%,60%{
        transform: translate(-2px,0);
      }
      62%{
        transform: translate(-22px,5px) skew(21deg); 
      }
    }

    /* /////// TOGGLE //////// */
    /* /////////////////////////// */

    .title-toggle::after, .title-toggle::before {
         content: '';
         position: absolute;
         right: 1.25em;
         top: 1em;
         width: 2px;
         height: 0.75em;
         background-color: #7a7572;
         transition: all 0.2s;
    }
    .title-toggle::after {
         transform: rotate(90deg);
    }
    .content-toggle {
         max-height: 0;
         transition: max-height 0.2s;
    }
    .toggle:checked + .title-toggle {
        order: 3;
        transition: all 1s;
    }

    .toggle:checked + .title-toggle + .content-toggle {
         max-height: 500px;
    }
    .toggle:checked + .title-toggle .more {
        display: none;
    }
    .toggle + .title-toggle .more {
        display: block;
    }
    .toggle + .title-toggle .minus {
        display: none;
    }
    .toggle:checked + .title-toggle .minus {
        display: block;
    }
    .toggle:checked + .title-toggle::before {
         transform: rotate(90deg) !important;
    }