/*
 * ============================================================
 * Estilos adicionais da aplicação
 * ============================================================
 *
 * A identidade esportiva abaixo é aplicada somente aos blocos
 * da Home que estiverem dentro de .home-sport-ui.
 *
 * A seção dinâmica de motos em destaque e as páginas do catálogo
 * não recebem essas regras e permanecem com o visual atual.
 */

@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,600;0,700;0,800;0,900;1,700;1,800&display=swap");

/* ============================================================
   Tipografia esportiva da Home
   ============================================================ */

.home-sport-ui #inicio,
.home-sport-ui #locacao,
.home-sport-ui #servicos,
.home-sport-ui #contato {
  font-family:
    "Inter",
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}

.home-sport-ui #inicio h1,
.home-sport-ui #locacao h2,
.home-sport-ui #locacao h3,
.home-sport-ui #servicos h2,
.home-sport-ui #servicos h3,
.home-sport-ui #contato h2,
.home-sport-ui #contato h3,
.home-sport-ui #inicio a,
.home-sport-ui #locacao a,
.home-sport-ui #servicos a {
  font-family:
    "Barlow Condensed",
    "Arial Narrow",
    sans-serif;
}

.home-sport-ui #inicio h1,
.home-sport-ui #locacao h2,
.home-sport-ui #servicos h2,
.home-sport-ui #contato h2 {
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.home-sport-ui #locacao h3,
.home-sport-ui #servicos h3,
.home-sport-ui #contato h3 {
  letter-spacing: -0.012em;
}

/* ============================================================
   Hero — card principal
   ============================================================ */

.home-sport-ui #inicio [class*="bg-black/45"] {
  position: relative;
  overflow: hidden;

  border-color:
    color-mix(
      in srgb,
      var(--site-accent) 42%,
      transparent
    );

  background:
    linear-gradient(
      145deg,
      color-mix(
        in srgb,
        var(--site-secondary) 86%,
        transparent
      ),
      rgba(0, 0, 0, 0.82)
    );

  box-shadow:
    0 28px 75px rgba(0, 0, 0, 0.58),
    0 0 0 1px
      color-mix(
        in srgb,
        var(--site-accent) 18%,
        transparent
      ),
    0 0 42px
      color-mix(
        in srgb,
        var(--site-accent) 15%,
        transparent
      ),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/*
  Faixa superior do card da Hero.

  Usa automaticamente as cores da paleta escolhida
  nas configurações do sistema.
*/

.home-sport-ui #inicio [class*="bg-black/45"]::before {
  position: absolute;
  top: 0;
  left: 8%;

  width: 58%;
  height: 4px;

  content: "";

  border-radius: 0 0 999px 999px;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--site-accent),
      var(--site-button-bg),
      transparent
    );

  box-shadow:
    0 0 20px
      color-mix(
        in srgb,
        var(--site-accent) 48%,
        transparent
      );
}

/* Card interno com os textos da Hero */

.home-sport-ui #inicio [class*="bg-black/35"] {
  border-color:
    color-mix(
      in srgb,
      var(--site-accent) 22%,
      transparent
    );

  background:
    linear-gradient(
      135deg,
      color-mix(
        in srgb,
        var(--site-secondary) 78%,
        transparent
      ),
      rgba(0, 0, 0, 0.68)
    );

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 12px 28px rgba(0, 0, 0, 0.22);
}

.home-sport-ui #inicio h1 {
  font-weight: 900;

  text-shadow:
    0 3px 18px rgba(0, 0, 0, 0.72),
    0 0 24px
      color-mix(
        in srgb,
        var(--site-accent) 12%,
        transparent
      );
}

/* Destaque da logo da Hero */

.home-sport-ui #inicio img {
  filter:
    drop-shadow(
      0 16px 26px rgba(0, 0, 0, 0.55)
    )
    drop-shadow(
      0 0 14px
        color-mix(
          in srgb,
          var(--site-accent) 15%,
          transparent
        )
    );
}

/* ============================================================
   Botões da Hero
   ============================================================ */

.home-sport-ui #inicio .site-primary-button,
.home-sport-ui #inicio .site-secondary-button {
  position: relative;
  overflow: hidden;

  border-width: 2px;

  font-weight: 900;
  letter-spacing: 0.075em;

  box-shadow:
    0 13px 28px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

/* Botão configurável principal */

.home-sport-ui #inicio .site-primary-button {
  border-color:
    color-mix(
      in srgb,
      var(--site-accent) 78%,
      white 8%
    );

  background:
    linear-gradient(
      135deg,
      var(--site-button-bg),
      color-mix(
        in srgb,
        var(--site-button-bg) 72%,
        black
      )
    );

  color: var(--site-button-text);
}

.home-sport-ui #inicio .site-primary-button:hover {
  border-color: var(--site-accent);

  background:
    linear-gradient(
      135deg,
      var(--site-button-hover-bg),
      color-mix(
        in srgb,
        var(--site-button-hover-bg) 70%,
        black
      )
    );

  color: var(--site-button-hover-text);

  transform: translateY(-3px);

  box-shadow:
    0 18px 38px rgba(0, 0, 0, 0.42),
    0 0 0 3px
      color-mix(
        in srgb,
        var(--site-accent) 16%,
        transparent
      ),
    0 0 28px
      color-mix(
        in srgb,
        var(--site-accent) 24%,
        transparent
      ),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

/* Botão de catálogo da Hero */

.home-sport-ui #inicio .site-secondary-button {
  border-color:
    color-mix(
      in srgb,
      var(--site-accent) 56%,
      transparent
    );

  background:
    linear-gradient(
      135deg,
      color-mix(
        in srgb,
        var(--site-secondary) 90%,
        white 5%
      ),
      rgba(4, 4, 4, 0.96)
    );

  color: #ffffff;
}

.home-sport-ui #inicio .site-secondary-button:hover {
  border-color: var(--site-accent);
  background: var(--site-accent);
  color: var(--site-accent-text);

  transform: translateY(-3px);

  box-shadow:
    0 18px 38px rgba(0, 0, 0, 0.42),
    0 0 0 3px
      color-mix(
        in srgb,
        var(--site-accent) 16%,
        transparent
      ),
    0 0 28px
      color-mix(
        in srgb,
        var(--site-accent) 24%,
        transparent
      );
}

/* ============================================================
   Destaques compartilhados das seções
   ============================================================ */

.home-sport-ui #locacao h2 span,
.home-sport-ui #servicos h2 span,
.home-sport-ui #contato h2 span {
  color: var(--site-accent);

  text-shadow:
    0 0 24px
      color-mix(
        in srgb,
        var(--site-accent) 24%,
        transparent
      );
}

/* Badges dos títulos das seções */

.home-sport-ui #locacao [class*="rounded-full"][class*="border"],
.home-sport-ui #servicos [class*="rounded-full"][class*="border"],
.home-sport-ui #contato [class*="rounded-full"][class*="border"] {
  border-color:
    color-mix(
      in srgb,
      var(--site-accent) 36%,
      transparent
    );

  background:
    color-mix(
      in srgb,
      var(--site-accent) 11%,
      transparent
    );

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 22px
      color-mix(
        in srgb,
        var(--site-accent) 10%,
        transparent
      );
}

.home-sport-ui #locacao [class*="rounded-full"] > span,
.home-sport-ui #servicos [class*="rounded-full"] > span,
.home-sport-ui #contato [class*="rounded-full"] > span {
  background-color: var(--site-accent);

  box-shadow:
    0 0 12px
      color-mix(
        in srgb,
        var(--site-accent) 68%,
        transparent
      );
}

.home-sport-ui #locacao [class*="rounded-full"] p,
.home-sport-ui #servicos [class*="rounded-full"] p,
.home-sport-ui #contato [class*="rounded-full"] p {
  color:
    color-mix(
      in srgb,
      var(--site-accent) 82%,
      white
    );
}

/* ============================================================
   Locação — benefícios rápidos
   ============================================================ */

.home-sport-ui #locacao .mb-8.grid > div {
  border-color:
    color-mix(
      in srgb,
      var(--site-accent) 24%,
      transparent
    );

  background:
    linear-gradient(
      135deg,
      color-mix(
        in srgb,
        var(--site-secondary) 88%,
        white 4%
      ),
      color-mix(
        in srgb,
        var(--site-secondary) 94%,
        black
      )
    );

  box-shadow:
    0 10px 26px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);

  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.home-sport-ui #locacao .mb-8.grid > div:hover {
  transform: translateY(-2px);

  border-color:
    color-mix(
      in srgb,
      var(--site-accent) 58%,
      transparent
    );

  box-shadow:
    0 15px 32px rgba(0, 0, 0, 0.32),
    0 0 22px
      color-mix(
        in srgb,
        var(--site-accent) 12%,
        transparent
      ),
    inset 0 1px 0 rgba(255, 255, 255, 0.09);
}

.home-sport-ui #locacao .mb-8.grid > div > span {
  border:
    1px solid
      color-mix(
        in srgb,
        var(--site-accent) 34%,
        transparent
      );

  background:
    color-mix(
      in srgb,
      var(--site-accent) 13%,
      transparent
    );

  color: var(--site-accent);

  box-shadow:
    0 0 18px
      color-mix(
        in srgb,
        var(--site-accent) 11%,
        transparent
      );
}

/* ============================================================
   Locação — cards principais
   ============================================================ */

.home-sport-ui #locacao article {
  position: relative;
  overflow: hidden;

  border-color:
    color-mix(
      in srgb,
      var(--site-accent) 24%,
      transparent
    );

  background:
    linear-gradient(
      145deg,
      color-mix(
        in srgb,
        var(--site-secondary) 88%,
        white 5%
      ),
      color-mix(
        in srgb,
        var(--site-secondary) 94%,
        black
      )
    );

  box-shadow:
    0 18px 46px rgba(0, 0, 0, 0.34),
    0 0 0 1px
      color-mix(
        in srgb,
        var(--site-accent) 8%,
        transparent
      ),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.home-sport-ui #locacao article::before {
  position: absolute;
  top: 0;
  left: 24px;

  width: 74px;
  height: 3px;

  content: "";

  border-radius: 0 0 999px 999px;
  background: var(--site-accent);

  box-shadow:
    0 0 16px
      color-mix(
        in srgb,
        var(--site-accent) 54%,
        transparent
      );
}

.home-sport-ui #locacao article:hover {
  border-color:
    color-mix(
      in srgb,
      var(--site-accent) 58%,
      transparent
    );

  box-shadow:
    0 24px 54px rgba(0, 0, 0, 0.42),
    0 0 30px
      color-mix(
        in srgb,
        var(--site-accent) 13%,
        transparent
      ),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Ícones dos cards de locação */

.home-sport-ui #locacao article > div:first-child {
  border-color:
    color-mix(
      in srgb,
      var(--site-accent) 36%,
      transparent
    );

  background:
    color-mix(
      in srgb,
      var(--site-accent) 13%,
      transparent
    );

  color: var(--site-accent);

  box-shadow:
    0 0 0 1px
      color-mix(
        in srgb,
        var(--site-accent) 9%,
        transparent
      ),
    0 0 20px
      color-mix(
        in srgb,
        var(--site-accent) 12%,
        transparent
      );
}

.home-sport-ui #locacao article svg,
.home-sport-ui #locacao .mb-8.grid svg {
  color: var(--site-accent);
}

.home-sport-ui #locacao article p[class*="uppercase"] {
  color: var(--site-accent);
}

/* ============================================================
   Botão principal da locação
   ============================================================ */

.home-sport-ui #locacao a[href*="wa.me"] {
  border:
    2px solid
      color-mix(
        in srgb,
        var(--site-accent) 78%,
        white 6%
      );

  background:
    linear-gradient(
      135deg,
      var(--site-button-bg),
      color-mix(
        in srgb,
        var(--site-button-bg) 70%,
        black
      )
    );

  color: var(--site-button-text);

  font-weight: 900;
  letter-spacing: 0.065em;

  box-shadow:
    0 16px 34px rgba(0, 0, 0, 0.34),
    0 0 26px
      color-mix(
        in srgb,
        var(--site-accent) 14%,
        transparent
      ),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.home-sport-ui #locacao a[href*="wa.me"]:hover {
  border-color: var(--site-accent);
  background: var(--site-accent);
  color: var(--site-accent-text);

  transform: translateY(-3px);

  box-shadow:
    0 20px 42px rgba(0, 0, 0, 0.42),
    0 0 0 3px
      color-mix(
        in srgb,
        var(--site-accent) 16%,
        transparent
      ),
    0 0 32px
      color-mix(
        in srgb,
        var(--site-accent) 25%,
        transparent
      );
}

.home-sport-ui #locacao a[href*="wa.me"] svg {
  color: currentColor;
}

/* ============================================================
   Serviços — cards técnicos
   ============================================================ */

.home-sport-ui #servicos article {
  position: relative;
  overflow: hidden;

  border-color:
    color-mix(
      in srgb,
      var(--site-accent) 24%,
      transparent
    );

  background:
    linear-gradient(
      145deg,
      color-mix(
        in srgb,
        var(--site-secondary) 87%,
        white 5%
      ),
      color-mix(
        in srgb,
        var(--site-secondary) 95%,
        black
      )
    );

  box-shadow:
    0 18px 46px rgba(0, 0, 0, 0.34),
    0 0 0 1px
      color-mix(
        in srgb,
        var(--site-accent) 7%,
        transparent
      ),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Detalhe circular nos cards de serviços */

.home-sport-ui #servicos article::after {
  position: absolute;
  right: -22px;
  bottom: -22px;

  width: 74px;
  height: 74px;

  content: "";

  border:
    1px solid
      color-mix(
        in srgb,
        var(--site-accent) 22%,
        transparent
      );

  border-radius: 50%;

  box-shadow:
    0 0 0 12px
      color-mix(
        in srgb,
        var(--site-accent) 4%,
        transparent
      ),
    0 0 32px
      color-mix(
        in srgb,
        var(--site-accent) 9%,
        transparent
      );

  pointer-events: none;
}

.home-sport-ui #servicos article:hover {
  border-color:
    color-mix(
      in srgb,
      var(--site-accent) 62%,
      transparent
    );

  transform: translateY(-5px);

  box-shadow:
    0 26px 58px rgba(0, 0, 0, 0.44),
    0 0 32px
      color-mix(
        in srgb,
        var(--site-accent) 14%,
        transparent
      ),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Caixas dos ícones */

.home-sport-ui #servicos article
  [class*="shrink-0"][class*="rounded-2xl"] {
  border-color:
    color-mix(
      in srgb,
      var(--site-accent) 40%,
      transparent
    );

  background:
    color-mix(
      in srgb,
      var(--site-accent) 14%,
      transparent
    );

  color: var(--site-accent);

  box-shadow:
    0 0 0 1px
      color-mix(
        in srgb,
        var(--site-accent) 8%,
        transparent
      ),
    0 0 22px
      color-mix(
        in srgb,
        var(--site-accent) 13%,
        transparent
      ),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.home-sport-ui #servicos article svg,
.home-sport-ui #servicos article p[class*="uppercase"] {
  color: var(--site-accent);
}

/* ============================================================
   Botões das duas lojas na seção de serviços
   ============================================================ */

.home-sport-ui #servicos a[href*="wa.me"] {
  border-color:
    color-mix(
      in srgb,
      var(--site-accent) 78%,
      white 7%
    );

  background:
    linear-gradient(
      135deg,
      var(--site-button-bg),
      color-mix(
        in srgb,
        var(--site-button-bg) 68%,
        black
      )
    );

  color: var(--site-button-text);

  font-weight: 900;
  letter-spacing: 0.035em;

  box-shadow:
    0 16px 34px rgba(0, 0, 0, 0.36),
    0 0 28px
      color-mix(
        in srgb,
        var(--site-accent) 14%,
        transparent
      ),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.home-sport-ui #servicos a[href*="wa.me"] > span:first-child {
  border-color:
    color-mix(
      in srgb,
      white 24%,
      transparent
    );

  background: rgba(0, 0, 0, 0.2);
  color: currentColor;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.home-sport-ui #servicos a[href*="wa.me"]:hover {
  border-color: var(--site-accent);
  background: var(--site-accent);
  color: var(--site-accent-text);

  transform: translateY(-4px);

  box-shadow:
    0 22px 44px rgba(0, 0, 0, 0.44),
    0 0 0 3px
      color-mix(
        in srgb,
        var(--site-accent) 17%,
        transparent
      ),
    0 0 34px
      color-mix(
        in srgb,
        var(--site-accent) 25%,
        transparent
      );
}

.home-sport-ui #servicos a[href*="wa.me"]:hover span,
.home-sport-ui #servicos a[href*="wa.me"]:hover svg {
  color: var(--site-accent-text);
}

/* ============================================================
   Unidades — cards principais das lojas
   ============================================================ */

.home-sport-ui #contato > div > div.grid > div {
  position: relative;
  overflow: hidden;

  border-color:
    color-mix(
      in srgb,
      var(--site-accent) 28%,
      transparent
    );

  background:
    linear-gradient(
      145deg,
      color-mix(
        in srgb,
        var(--site-secondary) 86%,
        white 5%
      ),
      color-mix(
        in srgb,
        var(--site-secondary) 95%,
        black
      )
    );

  box-shadow:
    0 22px 54px rgba(0, 0, 0, 0.4),
    0 0 0 1px
      color-mix(
        in srgb,
        var(--site-accent) 8%,
        transparent
      ),
    0 0 34px
      color-mix(
        in srgb,
        var(--site-accent) 8%,
        transparent
      ),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);

  transition:
    transform 200ms ease,
    border-color 200ms ease,
    box-shadow 200ms ease;
}

/* Faixa superior dos cards das lojas */

.home-sport-ui #contato > div > div.grid > div::before {
  position: absolute;
  top: 0;
  left: 0;

  width: 42%;
  height: 4px;

  content: "";

  background:
    linear-gradient(
      90deg,
      var(--site-accent),
      transparent
    );

  box-shadow:
    0 0 18px
      color-mix(
        in srgb,
        var(--site-accent) 48%,
        transparent
      );
}

.home-sport-ui #contato > div > div.grid > div:hover {
  transform: translateY(-5px);

  border-color:
    color-mix(
      in srgb,
      var(--site-accent) 62%,
      transparent
    );

  box-shadow:
    0 28px 64px rgba(0, 0, 0, 0.48),
    0 0 38px
      color-mix(
        in srgb,
        var(--site-accent) 14%,
        transparent
      ),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Blocos internos de endereço, telefone e horário */

.home-sport-ui #contato .space-y-5 > div,
.home-sport-ui #contato .space-y-5 > .grid > div {
  border-color:
    color-mix(
      in srgb,
      var(--site-accent) 19%,
      transparent
    );

  background:
    linear-gradient(
      135deg,
      color-mix(
        in srgb,
        var(--site-secondary) 91%,
        white 3%
      ),
      color-mix(
        in srgb,
        var(--site-secondary) 97%,
        black
      )
    );

  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.23),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* Destaques dos cards das unidades */

.home-sport-ui #contato p[class*="text-yellow-400"] {
  color: var(--site-accent);
}

.home-sport-ui #contato [class*="bg-red-600"] {
  border:
    1px solid
      color-mix(
        in srgb,
        var(--site-accent) 58%,
        transparent
      );

  background: var(--site-button-bg);
  color: var(--site-button-text);

  box-shadow:
    0 9px 20px rgba(0, 0, 0, 0.28),
    0 0 20px
      color-mix(
        in srgb,
        var(--site-accent) 15%,
        transparent
      ),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.home-sport-ui #contato .space-y-5 p[class*="uppercase"] {
  color:
    color-mix(
      in srgb,
      var(--site-accent) 62%,
      white 28%
    );
}

/* ============================================================
   Acessibilidade
   ============================================================ */

.home-sport-ui a:focus-visible {
  outline:
    3px solid
      color-mix(
        in srgb,
        var(--site-accent) 82%,
        white 8%
      );

  outline-offset: 3px;
}

/* ============================================================
   Ajustes para celulares
   ============================================================ */

@media (max-width: 640px) {
  .home-sport-ui #inicio [class*="bg-black/45"] {
    box-shadow:
      0 22px 54px rgba(0, 0, 0, 0.52),
      0 0 0 1px
        color-mix(
          in srgb,
          var(--site-accent) 16%,
          transparent
        ),
      0 0 28px
        color-mix(
          in srgb,
          var(--site-accent) 11%,
          transparent
        ),
      inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }

  .home-sport-ui #locacao article,
  .home-sport-ui #servicos article,
  .home-sport-ui #contato > div > div.grid > div {
    box-shadow:
      0 16px 38px rgba(0, 0, 0, 0.34),
      0 0 0 1px
        color-mix(
          in srgb,
          var(--site-accent) 7%,
          transparent
        ),
      inset 0 1px 0 rgba(255, 255, 255, 0.07);
  }
}

/* ============================================================
   Usuários que desativaram animações
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .home-sport-ui *,
  .home-sport-ui *::before,
  .home-sport-ui *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}