:root {
  interpolate-size: allow-keywords; }

.piki-sanfona .trigger {
  text-decoration: none;
  cursor: pointer;
  text-align: left;
  display: flex;
  font-family: 'Nunito Sans';
  justify-content: space-between;
  width: 100%;
  border: 0;
  color: #171717; }
.piki-sanfona > .item {
  display: block; }
  .piki-sanfona > .item > .trigger .icon {
    display: block;
    position: relative; }
    .piki-sanfona > .item > .trigger .icon:before, .piki-sanfona > .item > .trigger .icon:after {
      content: ''; }
  .piki-sanfona > .item > .content {
    height: 0;
    overflow: hidden;
    transition: height .6s ease-in-out; }
.piki-sanfona.style--1 {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 40px;
  margin: 56px auto 0; }
  .piki-sanfona.style--1 > .item {
    display: block; }
    .piki-sanfona.style--1 > .item > .trigger {
      display: flex;
      gap: 20px;
      align-items: center;
      padding: 20px 24px;
      border-radius: 8px;
      font-weight: 800;
      font-size: 24px;
      line-height: 31px; }
      .piki-sanfona.style--1 > .item > .trigger h2 {
        font-weight: 800; }
      .piki-sanfona.style--1 > .item > .trigger span.icon {
        position: relative;
        min-width: 33px;
        min-height: 33px;
        max-width: 33px;
        max-height: 33px;
        border: 3px solid #000;
        border-radius: 50%; }
        .piki-sanfona.style--1 > .item > .trigger span.icon:before, .piki-sanfona.style--1 > .item > .trigger span.icon:after {
          content: '';
          display: block;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          border-radius: 8px;
          background-color: #000;
          transition: all 1s ease; }
        .piki-sanfona.style--1 > .item > .trigger span.icon:before {
          width: 4px;
          height: 16px; }
        .piki-sanfona.style--1 > .item > .trigger span.icon:after {
          width: 16px;
          height: 4px; }
    .piki-sanfona.style--1 > .item:nth-child(5n + 1) > .trigger {
      background: #FF9C63B2; }
    .piki-sanfona.style--1 > .item:nth-child(5n + 2) > .trigger {
      background: #D443D5B2; }
    .piki-sanfona.style--1 > .item:nth-child(5n + 3) > .trigger {
      background: #8B78F6B2; }
    .piki-sanfona.style--1 > .item:nth-child(5n + 4) > .trigger {
      background: #00AFF8B2; }
    .piki-sanfona.style--1 > .item:nth-child(5n + 5) > .trigger {
      background: #00D292B2; }
    .piki-sanfona.style--1 > .item.opened > .trigger span.icon:before, .piki-sanfona.style--1 > .item.opened > .trigger span.icon:after {
      transform: translate(-50%, -50%) rotate(180deg); }
    .piki-sanfona.style--1 > .item.opened > .trigger span.icon:before {
      opacity: 0; }
.piki-sanfona.style--2 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px 24px 0;
  border-radius: 8px; }
  .piki-sanfona.style--2 > .item {
    padding: 16px 24px 0;
    background: #F3F1FE;
    border-radius: 16px; }
    .piki-sanfona.style--2 > .item > .trigger {
      background-color: transparent;
      padding-bottom: 16px; }
      .piki-sanfona.style--2 > .item > .trigger h3 {
        font-weight: 700;
        font-size: 18px;
        line-height: 19.8px; }
      .piki-sanfona.style--2 > .item > .trigger span.icon {
        position: relative;
        min-width: 23px;
        min-height: 23px; }
        .piki-sanfona.style--2 > .item > .trigger span.icon:before, .piki-sanfona.style--2 > .item > .trigger span.icon:after {
          content: '';
          display: block;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          border-radius: 8px;
          background-color: #00D292;
          transition: all 1s ease; }
        .piki-sanfona.style--2 > .item > .trigger span.icon:before {
          width: 4px;
          height: 16px; }
        .piki-sanfona.style--2 > .item > .trigger span.icon:after {
          width: 16px;
          height: 4px; }
    .piki-sanfona.style--2 > .item > .content {
      padding: 0; }
      .piki-sanfona.style--2 > .item > .content .inner {
        padding: 24px;
        border-top: 2px solid #00AFF8; }
    .piki-sanfona.style--2 > .item.opened > .trigger span.icon:before, .piki-sanfona.style--2 > .item.opened > .trigger span.icon:after {
      transform: translate(-50%, -50%) rotate(180deg); }
    .piki-sanfona.style--2 > .item.opened > .trigger span.icon:before {
      opacity: 0; }
    .piki-sanfona.style--2 > .item.opened > .trigger span.icon:after {
      background-color: #D443D5; }

@media (max-width: 480px) {
  .piki-sanfona.style--1 {
    margin: 40px auto 0;
    gap: 20px; }
    .piki-sanfona.style--1 > .item > .trigger h2 {
      font-size: 20px;
      line-height: 20px; }
  .piki-sanfona.style--2 {
    padding: 24px 0 0; } }

/*# sourceMappingURL=sanfona.css.map */