/* Move the criterion cards to the sides while keeping the diagram visible. */
@media (min-width: 851px) {
  #como-trabajamos.methodology-interactive .plan-1 {
    width: 100%;
  }

  #como-trabajamos.methodology-interactive .plan-2 {
    width: 100%;
    justify-self: end;
  }

  #como-trabajamos.methodology-interactive .method-grid:has(.popover-left) .plan-1 {
    width: 65%;
  }

  #como-trabajamos.methodology-interactive .method-grid:has(.popover-top, .popover-right) .plan-2 {
    width: 45%;
  }

  #como-trabajamos.methodology-interactive .criteria-stage {
    height: calc(148px + 63.47cqw + 100px);
  }

  #como-trabajamos.methodology-interactive .criterion-popover {
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    translate: none;
    width: 280px;
    min-height: 0;
    animation: gz-method-panel-side .34s cubic-bezier(.2,.65,.2,1) both;
  }

  #como-trabajamos.methodology-interactive .popover-top {
    left: calc(100% - 103px);
    top: 118px;
    width: 210px;
  }

  #como-trabajamos.methodology-interactive .popover-left {
    right: calc(100% - 108px);
    top: 148px;
    width: 210px;
  }

  #como-trabajamos.methodology-interactive .popover-right {
    left: calc(100% - 103px);
    top: calc(148px + 7cqw);
    width: 210px;
  }
}

#como-trabajamos.methodology-interactive .popover-top { --panel-x: -42px; }
#como-trabajamos.methodology-interactive .popover-left { --panel-x: 42px; }
#como-trabajamos.methodology-interactive .popover-right { --panel-x: -42px; }
#como-trabajamos.methodology-interactive .criterion-popover { animation: gz-method-panel-side .34s cubic-bezier(.2,.65,.2,1) both; }
#como-trabajamos.methodology-interactive .criterion-popover::after { display: none; }

@keyframes gz-method-panel-side {
  from { opacity: 0; transform: translateX(var(--panel-x)) scale(.98); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}

@media (min-width: 750px) and (max-width: 850px) {
  #como-trabajamos.methodology-interactive .criteria-stage {
    height: calc(148px + 63.47cqw + 90px);
  }

  #como-trabajamos.methodology-interactive .criterion-popover {
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    translate: none;
    width: 190px;
    max-width: none;
    min-height: 0;
    padding-right: 22px;
  }

  #como-trabajamos.methodology-interactive .popover-top {
    left: calc(100% - 115px);
    top: 112px;
  }

  #como-trabajamos.methodology-interactive .popover-left {
    right: calc(100% - 115px);
    top: 148px;
  }

  #como-trabajamos.methodology-interactive .popover-right {
    left: calc(100% - 115px);
    top: calc(148px + 6cqw);
  }
}