:root {
  --color-supernova-50: #fffee7;
  --color-supernova-100: #fffdc1;
  --color-supernova-200: #fff786;
  --color-supernova-300: #ffea41;
  --color-supernova-400: #ffd80d;
  --color-supernova-500: #f8c300;
  --color-supernova-600: #d19200;
  --color-supernova-700: #a66802;
  --color-supernova-800: #89510a;
  --color-supernova-900: #74420f;
  --color-supernova-950: #442204;

  --color-broom-50: #fdfee8;
  --color-broom-100: #fbffc2;
  --color-broom-200: #faff87;
  --color-broom-300: #fffe43;
  --color-broom-400: #fff212;
  --color-broom-500: #efd803;
  --color-broom-600: #ceaa00;
  --color-broom-700: #a47a04;
  --color-broom-800: #885f0b;
  --color-broom-900: #734d10;
  --color-broom-950: #432905;

  --color-iron-50: #f7f7f7;
  --color-iron-100: #ededed;
  --color-iron-200: #dfdfdf;
  --color-iron-300: #cccccc;
  --color-iron-400: #adadad;
  --color-iron-500: #999999;
  --color-iron-600: #888888;
  --color-iron-700: #7b7b7b;
  --color-iron-800: #676767;
  --color-iron-900: #545454;
  --color-iron-950: #363636;
}

body{
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

html {
    scroll-behavior: smooth;
  }



  @keyframes clientes-marquee {
      from { transform: translateX(0); }
      to { transform: translateX(-50%); }
    }

    .clientes-slider {
      position: relative;
      overflow: hidden;
      mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
    }

    .clientes-track {
      display: flex;
      align-items: center;
      width: max-content;
      animation: clientes-marquee 24s linear infinite;
      animation-play-state: running;
    }

    .cliente-item {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 176px;
      height: 96px;
      margin-right: 1.5rem;
      border-radius: 0.75rem;
      border: 1px solid #e5e7eb;
      background: #ffffff;
      box-shadow: 0 6px 18px rgba(17, 24, 39, 0.08);
      transition: transform 200ms ease, box-shadow 200ms ease;
      outline: none;
    }

    .cliente-item:hover,
    .cliente-item:focus-visible {
      transform: translateY(-3px);
      box-shadow: 0 12px 28px rgba(248, 195, 0, 0.28);
    }

    .cliente-item img {
      width: 130px;
      height: 58px;
      max-height: 58px;
      max-width: 130px;
      object-fit: contain;
    }

    .cliente-tooltip {
      position: absolute;
      left: 50%;
      bottom: calc(100% + 10px);
      transform: translateX(-50%) translateY(6px);
      padding: 0.35rem 0.65rem;
      border-radius: 0.5rem;
      background: #111827;
      color: #f9fafb;
      font-size: 0.75rem;
      font-weight: 600;
      white-space: nowrap;
      opacity: 0;
      pointer-events: none;
      transition: opacity 180ms ease, transform 180ms ease;
      z-index: 20;
    }

    .cliente-tooltip::after {
      content: "";
      position: absolute;
      left: 50%;
      top: 100%;
      transform: translateX(-50%);
      border: 5px solid transparent;
      border-top-color: #111827;
    }

    .cliente-item:hover .cliente-tooltip,
    .cliente-item:focus-visible .cliente-tooltip {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
    }

    .marcas-slider {
      position: relative;
      overflow: hidden;
      mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
    }

    .marcas-track {
      display: flex;
      align-items: center;
      width: max-content;
      animation: clientes-marquee 30s linear infinite;
    }

    .marca-item {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 170px;
      height: 92px;
      margin-right: 1.5rem;
      border-radius: 0.75rem;
      border: 1px solid #d1d5db;
      background: #f3f4f6;
      box-shadow: 0 4px 16px rgba(17, 24, 39, 0.1);
      transition: transform 200ms ease, box-shadow 200ms ease;
    }

    .marca-item:hover,
    .marca-item:focus-visible {
      transform: translateY(-2px);
      box-shadow: 0 10px 24px rgba(17, 24, 39, 0.16);
      outline: none;
    }

    .marca-item img {
      max-height: 54px;
      max-width: 124px;
      width: auto;
      height: auto;
      object-fit: contain;
      filter: grayscale(100%) contrast(1.08) brightness(0.92);
      opacity: 0.95;
    }
    @media (prefers-reduced-motion: reduce) {
      .clientes-track,
      .marcas-track {
        animation: none;
      }
    }