/* 1ª Ação Rangel S1000 — base resets, keyframes e estados de foco/hover.
   O layout usa estilos inline no HTML (idêntico ao design aprovado). */
html { scroll-behavior: smooth; }
  body { margin: 0; background: #050609; color: #F7F9FC; font-family: Manrope, system-ui, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
  * { box-sizing: border-box; }
  :focus-visible { outline: 2px solid #087DFF; outline-offset: 3px; border-radius: 2px; }
  ::selection { background: #087DFF; color: #fff; }
  img { max-width: 100%; }
  @keyframes rs-marquee { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
  @keyframes rs-shine { 0% { background-position: -120% 0; } 55%, 100% { background-position: 240% 0; } }
  @keyframes rs-beam { 0%, 100% { opacity: .38; } 50% { opacity: .72; } }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    [data-anim] { animation: none !important; }
    [data-reveal] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  }

  @media (max-width: 999px) {
    #hero {
      align-items: flex-start !important;
      padding-top: 112px !important;
    }
    [data-ref="heroGrid"] {
      grid-template-areas: "top" "photo" "bottom" !important;
      gap: 18px !important;
    }
    [data-ref="heroText"] {
      width: 100%;
    }
    [data-ref="heroIntro"] {
      display: none !important;
    }
    [data-ref="heroBike"] {
      width: 100% !important;
      max-width: 100% !important;
      margin-top: 2px;
    }
    [data-ref="heroBike"] > span {
      display: none !important;
    }
    [data-ref="heroBike"] figure {
      width: 100% !important;
      gap: 7px !important;
    }
    [data-ref="heroBike"] img {
      width: 100% !important;
      height: clamp(210px, 57vw, 252px) !important;
      max-height: none !important;
      object-fit: cover !important;
      object-position: center 36% !important;
    }
    [data-ref="heroBike"] figcaption {
      text-align: center;
    }
    [data-ref="heroOffer"] {
      width: 100%;
      flex-direction: column !important;
      align-items: center !important;
      justify-content: center !important;
    }
    [data-ref="heroPrice"] {
      flex: none !important;
      width: min(100%, 300px);
      margin-inline: auto !important;
      text-align: center;
    }
    [data-ref="heroCta"] {
      flex: none !important;
      width: 100%;
    }
  }

/* hover/focus states ported from the design source */
.xf1:focus{left:12px !important;top:12px !important}
.xh2:hover{color:#F7F9FC !important}
.xh3:hover{color:#F7F9FC !important}
.xh4:hover{color:#F7F9FC !important}
.xh5:hover{color:#F7F9FC !important}
.xh6:hover{color:#F7F9FC !important}
.xh7:hover{color:#F7F9FC !important;border-color:#087DFF !important;background:rgba(8,125,255,.12) !important}
.xh8:hover{color:#F7F9FC !important;border-color:#087DFF !important;background:rgba(8,125,255,.12) !important}
.xh9:hover{transform:translateY(-2px) !important;filter:brightness(1.12) !important;box-shadow:0 14px 38px rgba(8,125,255,.42) !important}
.xh10:hover{transform:translateY(-3px) !important;filter:brightness(1.12) !important;box-shadow:0 20px 54px rgba(8,125,255,.5) !important}
.xh11:hover{transform:scale(1.025) !important;border-color:rgba(8,125,255,.75) !important;color:#087DFF !important;box-shadow:0 40px 90px rgba(3,6,15,.7) !important}
.xh12:hover{transform:scale(1.025) !important;border-color:rgba(8,125,255,.75) !important;color:#087DFF !important}
.xh13:hover{transform:scale(1.025) !important;border-color:rgba(8,125,255,.75) !important;color:#087DFF !important}
.xh14:hover{transform:scale(1.025) !important;border-color:rgba(8,125,255,.75) !important;color:#087DFF !important}
.xh15:hover{transform:translateY(-3px) !important;filter:brightness(1.12) !important;box-shadow:0 20px 54px rgba(8,125,255,.46) !important}
.xh16:hover{border-color:#087DFF !important;background:rgba(8,125,255,.12) !important}
.xh17:hover{border-color:#087DFF !important;background:rgba(8,125,255,.12) !important}
.xh18:hover{border-color:#087DFF !important;background:rgba(8,125,255,.12) !important}
.xh19:hover{border-color:#087DFF !important;background:rgba(8,125,255,.12) !important}
.xh20:hover{border-color:#087DFF !important;background:rgba(8,125,255,.12) !important}
.xh21:hover{border-color:#087DFF !important;background:rgba(8,125,255,.14) !important}
.xh22:hover{border-color:#087DFF !important;background:rgba(8,125,255,.14) !important}
.xh23:hover{transform:translateY(-3px) !important;filter:brightness(1.12) !important}
.xh24:hover{transform:translateY(-3px) !important;filter:brightness(1.12) !important}
.xh25:hover{border-color:#087DFF !important;background:rgba(8,125,255,.1) !important;transform:translateY(-3px) !important}
.xh26:hover{color:#087DFF !important}
.xh27:hover{color:#087DFF !important}
.xh28:hover{color:#087DFF !important}
.xh29:hover{color:#087DFF !important}
.xh30:hover{color:#087DFF !important}
.xh31:hover{color:#087DFF !important}
.xh32:hover{color:#087DFF !important}
.xh33:hover{transform:translateY(-3px) !important;filter:brightness(1.14) !important;box-shadow:0 24px 64px rgba(8,125,255,.56) !important}
.xh34:hover{color:#087DFF !important}
.xh35:hover{color:#087DFF !important}
.xh36:hover{color:#087DFF !important}
.xh37:hover{color:#087DFF !important}
.xh38:hover{border-color:#087DFF !important}
.xh39:hover{border-color:#087DFF !important}