html .klaro {
  --border-radius: 8px;
  --border-style: solid;
  --border-width: 1px;
  --box-shadow-color: rgba(0, 0, 0, 0.5);
  --button-text-color: #ffffff;
  --dark1: #1e212d;
  --dark2: #262a35;
  --dark3: #b1b8c5;
  --font-family: inherit;
  --font-size: 15px;
  --green1: #ff2540;
  --green2: #d91e35;
  --green3: #b0182b;
  --light1: #e8ebee;
  --light2: #c2cbd0;
  --light3: #b1b8c5;
  --notice-bottom: 1.5rem;
  --notice-left: 1.5rem;
  --notice-max-width: 26rem;
  --notice-position: fixed;
  --notice-right: 1.5rem;
  --title-font-family: inherit;
  --white2: #3c444e;
  --white3: #e8ebee;


  /* Toast */

  .cookie-notice {
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--border-radius);
    color: var(--light1);
    padding: 0;

    &:not(.cookie-modal-notice) .cn-body {
      padding: 1.25rem;

      .cn-buttons {
        display: flex;
        gap: .5rem;
      }
    }

    .cn-body {
      h2 {
        color: #ffffff;
        font-size: 1.05rem;
        font-weight: 700;
        line-height: 1.3;
        margin-block: 0 0.5rem;
      }

      p {
        color: var(--light3);
        font-size: 0.875rem;
        line-height: 1.55;
        margin-block: 0 0.75rem;
      }

      .cn-learn-more {
        color: var(--light2);
        margin-inline-end: auto;
        text-decoration: underline;
        text-underline-offset: 0.2em;

        &:hover {
          color: #ffffff;
        }
      }
    }

    &:not(.cookie-modal-notice) .cn-body .cn-ok {
      align-items: center;
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
      justify-content: flex-end;
      margin-block-start: 0;
    }
  }


  /* Modal */

  .cookie-modal {
    /* O véu atrás do modal. O padrão do Klaro é rgba(0,0,0,.5) sem blur;
       aqui escurece mais e desfoca o conteúdo por trás, para o painel se
       destacar sem precisar de borda forte. */
    .cm-bg {
      backdrop-filter: blur(6px);
      background: rgba(0, 0, 0, 0.72);
    }

    .cm-modal.cm-klaro {
      background-color: var(--color-surface-sunken, #15171f);
      border: 1px solid rgba(255, 255, 255, 0.12);
      color: var(--light1);
    }

    .cm-modal {
      .cm-header {
        padding: 1.25rem 1.5rem;

        h1 {
          font-size: 1.5rem;
          line-height: 1.25;
        }

        p {
          color: var(--color-text-muted);
        }

        a {
          color: inherit;
          text-decoration: underline;
        }
      }

      .cm-body {
        padding: 1.25rem 1.5rem;

        p {
          color: var(--color-text-muted, #b1b8c5);
          line-height: 1.55;
          margin-block: 0 0.75rem;

          a {
            color: inherit;
            text-decoration: underline;
            text-underline-offset: 0.2em;

            &:hover {
              color: #ffffff;
            }
          }
        }

        ul.cm-services li.cm-service,
        ul.cm-purposes li.cm-purpose {
          line-height: 1.5;
          min-height: 2.5rem;
          padding-inline-start: 60px;
        }

        ul.cm-services li.cm-service {
          margin-inline-start: 1rem;
        }

        ul.cm-services li.cm-service + li.cm-service,
        ul.cm-purposes li.cm-purpose + li.cm-purpose {
          border-top: 1px solid rgba(255, 255, 255, 0.16);
        }

        .cm-list-title {
          color: #ffffff;
          display: block;
          font-size: 0.95rem;
          font-weight: 600;
          line-height: 1.4;
          margin-block-end: 0.25rem;
        }

        .cm-list-description {
          color: var(--light3);
          font-size: 0.875rem;
          line-height: 1.55;
          margin: 0;
          padding: 0;
        }

        ul.cm-services li.cm-service p.purposes,
        ul.cm-purposes li.cm-purpose p.purposes {
          color: var(--light3);
          font-size: 0.8rem;
          margin-block: 0.15rem 0;
          opacity: 0.7;
        }

        .cm-services .cm-caret {
          margin-block-start: 0.5rem;

          a {
            color: var(--light2);
            font-size: 0.8rem;
            text-decoration: none;

            &:hover {
              color: #ffffff;
            }
          }
        }
      }

      .cm-footer {
        padding: 1rem 1.5rem;

        .cm-footer-buttons {
          align-items: center;
          gap: 0.5rem;
        }
      }
    }
  }


  /* Buttons */

  .cookie-notice .cm-btn,
  .cookie-modal .cm-btn {
    border-radius: var(--border-radius);
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.2;
    padding: 0.6rem 1.1rem;
    transition: background-color 150ms, border-color 150ms, color 150ms;
  }

  .cookie-notice .cm-btn {
    margin: 0;

    &.cm-btn-success,
    &.cm-btn-success.cm-btn-info {
      background-color: #ff2540;
      color: #ffffff;
    }

    &.cm-btn-success:hover,
    &.cm-btn-success.cm-btn-info:hover {
      background-color: #d91e35;
    }

    &.cm-btn-danger,
    &.cm-btn-info {
      background-color: transparent;
      border: 1px solid rgba(255, 255, 255, 0.2);
      color: var(--light2);
    }

    &.cm-btn-danger:hover,
    &.cm-btn-info:hover {
      border-color: rgba(255, 255, 255, 0.4);
      color: #ffffff;
    }
  }

  .cookie-modal .cm-btn {
    &.cm-btn-success,
    &.cm-btn-success.cm-btn-info {
      background-color: #ff2540;
      color: #ffffff;
    }

    &.cm-btn-success:hover,
    &.cm-btn-success.cm-btn-info:hover {
      background-color: #d91e35;
    }

    &.cm-btn-danger {
      background-color: transparent;
      border: 0;
      color: var(--light2);
      padding-inline: 0;
      text-decoration: underline;
      text-underline-offset: 0.2em;

      &:hover {
        color: #ffffff;
      }
    }

    &.cm-btn-success.cm-btn-info {
      background-color: transparent;
      border: 1px solid rgba(255, 255, 255, 0.3);
      color: #ffffff;

      &:hover {
        background-color: rgba(255, 255, 255, 0.08);
        border-color: rgba(255, 255, 255, 0.5);
      }
    }
  }


  /* Switch */

  .cm-list-label .cm-switch,
  .cm-list-input {
    inset-block-start: 0;
  }

  .cookie-notice .cm-list-label .slider,
  .cookie-modal .cm-list-label .slider,
  .cookie-notice .cm-list-input:focus + .cm-list-label .slider,
  .cookie-modal .cm-list-input:focus + .cm-list-label .slider {
    box-shadow: none;
  }

  .cookie-notice .cm-list-input:checked:checked + .cm-list-label .slider,
  .cookie-modal .cm-list-input:checked:checked + .cm-list-label .slider {
    background-color: #ff2540;
  }
}