/* Componentes reutilizáveis: chip, carrossel, cursor "Arraste" */
.chips { display: flex; flex-wrap: wrap; gap: 10px }
    .chip {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      height: 40px;
      padding: 0 16px;
      border-radius: 999px;
      background: #fff;
      color: var(--petroleo);
      font-family: var(--display);
      font-weight: 500;
      font-size: 15px;
      border: 0;
      transition: background .3s, color .3s, transform .3s var(--ease)
    }

    .chip:hover {
      transform: translateY(-2px)
    }

    .chip.on {
      background: var(--petroleo);
      color: #fff
    }


    .car {
      margin-top: 44px;
      position: relative
    }

    .car-track {
      display: flex;
      gap: 20px;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scroll-behavior: smooth;
      padding: 6px max(48px, calc((100% - 1184px) / 2)) 18px;
      scroll-padding-left: max(48px, calc((100% - 1184px) / 2));
      scrollbar-width: none;
      cursor: grab
    }

    .car-track::-webkit-scrollbar {
      display: none
    }

    .car-track.dragging {
      cursor: grabbing;
      scroll-snap-type: none;
      scroll-behavior: auto
    }

    .car-track>* {
      scroll-snap-align: start;
      flex: none
    }

    .car-ui {
      display: flex;
      align-items: center;
      gap: 22px;
      margin-top: 22px
    }

    .car-btn {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: none;
      border: 0;
      padding: 0;
      font-family: var(--display);
      font-weight: 500;
      font-size: 15px;
      color: var(--petroleo)
    }

    .car-btn i {
      width: 46px;
      height: 46px;
      border-radius: 50%;
      border: 2px solid var(--petroleo);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background .3s, color .3s, transform .3s var(--ease)
    }

    .car-btn:hover i {
      background: var(--petroleo);
      color: #fff;
      transform: scale(1.06)
    }

    .car-btn[disabled] {
      opacity: .35;
      pointer-events: none
    }

    .car-count {
      font-family: var(--display);
      font-weight: 600;
      color: var(--petroleo);
      font-size: 15px;
      min-width: 44px;
      text-align: center
    }

    .car-bar {
      flex: 1;
      height: 4px;
      border-radius: 4px;
      background: rgba(38, 70, 81, .12);
      position: relative;
      overflow: hidden
    }

    .car-bar b {
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: var(--w, 20%);
      transform: translateX(var(--x, 0));
      border-radius: 4px;
      background: var(--laranja);
      transition: transform .3s var(--ease), width .3s
    }

    .drag-cur {
      position: fixed;
      left: 0;
      top: 0;
      width: 86px;
      height: 86px;
      margin: -43px 0 0 -43px;
      border-radius: 50%;
      background: var(--petroleo);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--display);
      font-weight: 500;
      font-size: 14px;
      pointer-events: none;
      z-index: 60;
      transform: scale(0);
      transition: transform .3s var(--ease)
    }

    .drag-cur.on {
      transform: scale(1)
    }


/* Mobile */
@container page (max-width: 760px) {
  .car { margin-top: 28px }
  .car-track { gap: 12px; padding: 4px 20px 14px; scroll-padding-left: 20px }
  .car-ui { gap: 14px }
  .car-btn span { display: none }
}