/* ===========================================================
   LOCPORTO CURVELO — Design system "Placa"
   Asfalto + pista amarela + placa estilizada.
   =========================================================== */

:root{
  --asfalto: #17181A;
  --asfalto-2: #0E0F10;
  --grafite: #232427;
  --grafite-2: #2C2E31;
  --concreto: #EDEAE1;
  --concreto-2: #E1DCCE;
  --pista: #F5B300;
  --pista-deep: #B98600;
  --sinaleira: #D6432B;
  --papel: #FBF9F4;
  --tinta: #101113;
  --fumaca: #9A9C9F;
  --off-white: #F5F3EE;
  --linha: rgba(255,255,255,.10);
  --linha-escura: rgba(16,17,19,.14);

  --f-display: 'Outfit', 'Montserrat', sans-serif;
  --f-body: 'Plus Jakarta Sans', sans-serif;
  --f-mono: 'Outfit', 'Plus Jakarta Sans', sans-serif;

  --container: 1180px;

  /* Motion tokens — consistent easing/duration across every transition */
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-out-soft: cubic-bezier(.25,.8,.35,1);
  --dur-fast: 200ms;
  --dur-base: 280ms;
  --dur-slow: 380ms;

  /* Radius scale — unifies the ad-hoc values that drifted across components */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* Elevation scale — warm-tinted soft shadows, consistent across cards/buttons/modals */
  --shadow-sm: 0 4px 14px rgba(0,0,0,.22);
  --shadow-md: 0 12px 30px rgba(0,0,0,.30);
  --shadow-lg: 0 24px 48px rgba(0,0,0,.38);
  --shadow-xl: 0 30px 70px rgba(0,0,0,.48);
}

/* Sticky header height (~77px) + a little breathing room, used to offset
   anchor-scroll targets so a nav click never lands a section title flush
   against (or hidden under) the sticky header. */
:root{ --header-offset: 100px; }

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--f-body);
  background:var(--asfalto);
  color:var(--off-white);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ margin:0; font-family:var(--f-display); text-transform:uppercase; font-weight:700; line-height:1.08; letter-spacing:.01em; }
p{ margin:0; }
button{ font-family:inherit; }

:focus-visible{ outline:2px solid var(--pista); outline-offset:3px; }

.container{ max-width:var(--container); margin:0 auto; padding:0 24px; }

/* Grid/flex items default to min-width:auto, which lets unbreakable content
   (nowrap buttons, mono digits) force a track wider than its container. */
.card-grid > *, .bike-grid > *, .steps-grid > *, .cluster-grid > *,
.form-grid > *, .hero .container > *, .sobre-grid > *, .contato-grid > *,
.footer-grid > *{ min-width:0; }

.eyebrow{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--f-mono); font-size:.78rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--pista);
}
.eyebrow::before{ content:"—"; color:var(--pista); }
.on-light .eyebrow{ color:var(--pista-deep); }

.section-head{ max-width:640px; margin-bottom:52px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head h2{ font-size:clamp(1.9rem,3.4vw,2.7rem); margin-top:.5rem; color:var(--off-white); }
.on-light .section-head h2{ color:var(--tinta); }
.section-head p{ margin-top:14px; color:var(--fumaca); font-size:1.02rem; max-width:56ch; }
.section-head.center p{ margin-left:auto; margin-right:auto; }
.on-light .section-head p{ color:#5B5D5F; }

.lane-divider{ width:56px; height:3px; margin-top:16px; background-image:repeating-linear-gradient(90deg, var(--pista) 0 10px, transparent 10px 18px); }
.section-head.center .lane-divider{ margin-left:auto; margin-right:auto; }

section{ padding:96px 0; position:relative; scroll-margin-top:var(--header-offset); }
.bg-asfalto{ background:var(--asfalto); }
.bg-grafite{ background:var(--grafite-2); }
.bg-concreto{ background:var(--concreto); color:var(--tinta); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6em; text-align:center;
  font-family:var(--f-mono); font-weight:700; font-size:.85rem; letter-spacing:.06em; text-transform:uppercase;
  padding:16px 28px; border-radius:4px; border:2px solid transparent; cursor:pointer;
  transition:transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
  max-width:100%;
  position:relative; overflow:hidden;
}
.btn-primary{ background:var(--pista); color:var(--tinta); box-shadow:0 6px 0 var(--pista-deep); }
.btn-primary::before{
  content:''; position:absolute; top:0; left:-100%; width:60%; height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
  transform:skewX(-20deg); pointer-events:none;
}
.btn-primary:hover::before{ animation:shineEffect .85s ease-in-out; }
.btn-primary:hover{ transform:translateY(2px); box-shadow:0 4px 0 var(--pista-deep); }
.btn-primary:active{ transform:translateY(6px); box-shadow:0 0 0 var(--pista-deep); }
.btn-ghost{ background:transparent; color:var(--off-white); border-color:var(--linha); }
.btn-ghost:hover{ border-color:var(--pista); color:var(--pista); }
.on-light .btn-ghost{ color:var(--tinta); border-color:var(--linha-escura); }
.btn-block{ width:100%; }

/* Ripple feedback on primary CTAs (transform+opacity only, JS spawns the span on click) */
.btn-primary .ripple{
  position:absolute; border-radius:50%; background:rgba(16,17,19,.28);
  transform:scale(0); opacity:1; pointer-events:none; animation:rippleOut 600ms var(--ease-out) forwards;
}
@keyframes rippleOut{ to{ transform:scale(2.6); opacity:0; } }

/* ---------- Header ---------- */
/* ---------- Header & Topbar Modern System ---------- */
@keyframes dotPulse {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 8px rgba(74, 222, 128, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
}

@keyframes shineEffect {
  0% { left: -100%; }
  100% { left: 200%; }
}

.topbar {
  background: linear-gradient(90deg, #0d0e10 0%, #17181c 50%, #0d0e10 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  font-family: var(--f-mono);
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  color: var(--fumaca);
  position: relative;
  z-index: 201;
}

.topbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 40px;
}

.topbar-status {
  display: flex;
  align-items: center;
  gap: 10px;
}

.badge-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(74, 222, 128, 0.1);
  border: 1px solid rgba(74, 222, 128, 0.25);
  color: #4ADE80;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.topbar-status .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4ADE80;
  animation: dotPulse 2s infinite;
}

.topbar-text {
  color: #94A3B8;
  font-weight: 500;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 22px;
}

.topbar-phone {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #CBD5E1;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: all 0.2s ease;
  text-decoration: none;
}

.topbar-phone:hover {
  color: var(--pista);
  background: rgba(245, 179, 0, 0.08);
  border-color: rgba(245, 179, 0, 0.25);
  transform: translateY(-1px);
}

.topbar-phone i {
  color: #25D366;
  font-size: 0.88rem;
}

.topbar-social {
  display: flex;
  gap: 8px;
}

.topbar-social a {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #94A3B8;
  font-size: 0.8rem;
  transition: all 0.2s ease;
  text-decoration: none;
}

.topbar-social a:hover {
  color: var(--tinta);
  background: var(--pista);
  border-color: var(--pista);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(245, 179, 0, 0.3);
}

/* Glassmorphism Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 200;
  background: rgba(17, 18, 20, 0.85);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  transition: all 0.3s ease;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
}

/* Brand Logo Stacked Layout */
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.brand-logo-wrap {
  display: flex;
  flex-direction: column;
  line-height: 0.92;
}

.brand-top {
  font-family: var(--f-display);
  font-size: 1.38rem;
  font-weight: 900;
  color: #FFFFFF;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.brand-bottom {
  font-family: var(--f-display);
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--pista);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-top: 3px;
  text-shadow: 0 0 14px rgba(245, 179, 0, 0.4);
}

.brand .tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--f-mono);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: #94A3B8;
  text-transform: uppercase;
  margin-top: 3px;
}

.brand .tag i {
  color: var(--pista);
  font-size: 0.65rem;
}

/* Modern Pill Navigation */
.main-nav {
  display: flex;
  align-items: center;
  gap: 3px;
  background: rgba(255, 255, 255, 0.04);
  padding: 4px 5px;
  border-radius: 40px;
  border: 1px solid rgba(255, 255, 255, 0.07);
}

.main-nav a {
  font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #CBD5E1;
  padding: 8px 13px;
  border-radius: 30px;
  position: relative;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
  white-space: nowrap;
}

.main-nav a::after {
  display: none;
}

.main-nav a:hover {
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.1);
}

.main-nav a.active {
  color: var(--tinta);
  background: var(--pista);
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(245, 179, 0, 0.3);
}

/* Modern Button / CTA */
.header-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.btn-header-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  border-radius: 50px;
  background: linear-gradient(135deg, #F5B300 0%, #FFC72C 100%);
  color: var(--tinta);
  font-family: var(--f-mono);
  font-weight: 800;
  font-size: 0.82rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 20px rgba(245, 179, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  cursor: pointer;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
  white-space: nowrap;
}

.btn-header-cta::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transform: skewX(-20deg);
}

.btn-header-cta:hover::before {
  animation: shineEffect 0.85s ease-in-out;
}

.btn-header-cta:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 25px rgba(245, 179, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  background: linear-gradient(135deg, #FFC72C 0%, #F5B300 100%);
  color: var(--tinta);
}

.btn-header-cta i {
  font-size: 1.05rem;
  color: #101113;
  transition: transform 0.25s ease;
}

.btn-header-cta:hover i {
  transform: scale(1.15) rotate(-8deg);
}

/* Mobile Hamburger Toggle */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 0;
  cursor: pointer;
  transition: all 0.2s ease;
}

.nav-toggle:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--pista);
}

.nav-toggle span {
  width: 20px;
  height: 2px;
  background: var(--off-white);
  border-radius: 2px;
  transition: all 0.25s ease;
}

.nav-toggle:hover span {
  background: var(--pista);
}

.mobile-nav {
  position: fixed;
  inset: 0;
  background: rgba(14, 15, 16, 0.98);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  z-index: 300;
  display: flex;
  flex-direction: column;
  padding: 28px 24px;
  transform: translateY(-100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto;
}
.mobile-nav.open { transform: translateY(0); }
.mobile-nav-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 40px; }
.mobile-nav-close { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.15); color: var(--off-white); font-size: 1.8rem; line-height: 1; cursor: pointer; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.mobile-nav a { display: block; font-family: var(--f-display); font-size: 1.6rem; text-transform: uppercase; color: var(--off-white); padding: 14px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); text-decoration: none; font-weight: 700; }
.mobile-nav a:hover { color: var(--pista); }
.mobile-nav .btn { margin-top: 32px; }

/* ---------- Hero ---------- */
.hero{
  padding:64px 0 0;
  background:
    radial-gradient(ellipse at 15% 20%, rgba(245,179,0,.08), transparent 45%),
    var(--asfalto);
  overflow:hidden;
}
/* Vídeo horizontal em cima, informações centralizadas embaixo (empilhado, não em colunas). */
.hero .container{ display:flex; flex-direction:column; align-items:center; gap:44px; padding-bottom:64px; }
.hero-copy{ order:2; max-width:760px; text-align:center; display:flex; flex-direction:column; align-items:center; }
.hero-copy .locporto-badge{
  display:inline-flex; align-items:center; gap:.6em; font-family:var(--f-mono); font-size:.75rem; font-weight:700;
  letter-spacing:.14em; color:var(--tinta); background:var(--pista); padding:8px 16px 8px 12px; border-radius:3px;
  margin-bottom:24px;
}
.hero-copy .locporto-badge .dot{ width:6px; height:6px; border-radius:50%; background:var(--tinta); }
.hero-copy h1{ font-size:clamp(2.6rem,5.2vw,4.1rem); color:var(--off-white); }
.hero-copy h1 span{ color:var(--pista); }
.hero-copy p{ margin-top:24px; color:var(--fumaca); font-size:1.12rem; max-width:52ch; }
.hero-actions{ display:flex; align-items:center; justify-content:center; gap:24px; margin-top:36px; flex-wrap:wrap; }
.hero-secondary{ display:flex; align-items:center; gap:12px; font-family:var(--f-mono); font-size:.85rem; color:var(--off-white); }
.hero-secondary .ring{
  width:44px; height:44px; border-radius:50%; border:1px solid var(--linha); display:flex; align-items:center; justify-content:center;
  color:var(--pista); font-size:1rem; transition:border-color .2s;
}
.hero-secondary:hover .ring{ border-color:var(--pista); }

.hero-media{ position:relative; order:1; width:100%; }
.hero-media .frame{
  position:relative; border-radius:var(--radius-md); overflow:hidden; border:1px solid var(--linha);
  box-shadow:var(--shadow-xl); aspect-ratio:16/9;
}
.hero-media video{ width:100%; height:100%; object-fit:cover; }
.hero-plate{
  position:absolute; left:-18px; bottom:-22px;
}
.hero-media .corner-tape{
  position:absolute; top:-14px; right:24px; width:120px; height:24px;
  background:repeating-linear-gradient(-45deg, var(--pista) 0 10px, var(--tinta) 10px 20px);
  transform:rotate(4deg); border-radius:2px; box-shadow:0 8px 18px rgba(0,0,0,.4);
}

.video-controls{ position:absolute; right:16px; bottom:16px; display:flex; gap:10px; z-index:2; }
.video-btn{
  width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:rgba(16,17,19,.55); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.25);
  color:var(--off-white); font-size:.95rem; cursor:pointer; transition:background .2s ease, border-color .2s ease, transform .2s ease;
}
.video-btn:hover{ border-color:var(--pista); color:var(--pista); transform:translateY(-2px); }

/* Placa (license-plate) signature component */
.placa{
  display:inline-flex; align-items:stretch; background:var(--papel); border-radius:8px; overflow:hidden;
  border:2px solid var(--tinta); box-shadow:0 10px 24px rgba(0,0,0,.4);
  font-family:var(--f-mono); color:var(--tinta);
}
.placa-tab{
  background:var(--pista); color:var(--tinta); writing-mode:vertical-rl; text-orientation:mixed;
  font-weight:800; font-size:.62rem; letter-spacing:.12em; padding:8px 5px; display:flex; align-items:center; justify-content:center;
  border-right:2px solid var(--tinta);
}
.placa-body{ padding:10px 16px; display:flex; flex-direction:column; justify-content:center; gap:2px; }
.placa-body .placa-label{ font-size:.62rem; letter-spacing:.1em; color:#7A6B4A; text-transform:uppercase; }
.placa-body .placa-value{ font-size:1.3rem; font-weight:700; letter-spacing:.03em; }

/* ---------- Stat band (instrument cluster) ---------- */
.cluster{ background:var(--pista); color:var(--tinta); padding:0; position:relative; }
.cluster::before{
  content:""; position:absolute; inset:0 0 auto 0; height:6px;
  background-image:repeating-linear-gradient(90deg, var(--tinta) 0 3px, transparent 3px 22px);
  opacity:.5;
}
.cluster-grid{ display:grid; grid-template-columns:repeat(3,1fr); }
.cluster-item{ text-align:center; padding:40px 20px; border-left:1px solid rgba(16,17,19,.15); }
.cluster-item:first-child{ border-left:0; }
.cluster-item .num{ font-family:var(--f-mono); font-weight:700; font-size:clamp(1.8rem,3vw,2.6rem); }
.cluster-item .label{ font-family:var(--f-mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; margin-top:6px; opacity:.75; }

/* ---------- Sobre ---------- */
.sobre-grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:64px; align-items:center; }
.sobre-media{ position:relative; }
.sobre-media img{ border-radius:12px; background:var(--tinta); padding:28px; }
.sobre-list{ margin-top:28px; display:flex; flex-direction:column; gap:18px; }
.sobre-list li{ display:flex; gap:16px; align-items:flex-start; }
.sobre-list .check{
  flex:0 0 auto; width:26px; height:26px; border-radius:50%; background:var(--tinta); color:var(--pista);
  display:flex; align-items:center; justify-content:center; font-size:.72rem; margin-top:2px;
}
.sobre-list strong{ display:block; font-family:var(--f-body); font-weight:700; color:var(--tinta); }
.sobre-list span{ color:#5B5D5F; font-size:.95rem; }
.sobre-text{ color:#4B4D50; margin-top:18px; font-size:1.02rem; max-width:56ch; }

/* ---------- Diferenciais ---------- */
.card-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.dif-card{
  background:var(--grafite); border:1px solid var(--linha); border-radius:var(--radius-sm); padding:36px 30px;
  position:relative; overflow:hidden;
}
/* Especificidade (.card-grid + .dif-card + [data-reveal] = 0,3,0) vence de
   propósito a regra genérica [data-reveal].reveal-pending (0,2,0): sem isso,
   o reveal "engole" a lista de transition inteira e border-color/box-shadow
   do hover param de animar (viram salto instantâneo). */
.card-grid .dif-card[data-reveal]{
  transition:opacity .6s ease, transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.dif-card::before{
  content:""; position:absolute; top:0; left:0; width:4px; height:100%;
  background:var(--pista); border-radius:4px 0 0 4px; transition:width var(--dur-base) var(--ease-out);
}
.dif-card:hover{ transform:translateY(-4px); border-color:var(--pista); box-shadow:var(--shadow-md); }
.dif-card:hover::before{ width:6px; }
.dif-card h3{
  font-family:var(--f-display);
  text-transform:none;
  font-size:1.35rem;
  font-weight:800;
  color:#FFFFFF;
  letter-spacing:-0.01em;
  line-height:1.3;
}
.dif-card p{ margin-top:12px; color:var(--fumaca); font-size:.98rem; line-height:1.6; }

/* ---------- Modelos (bikes) ---------- */
.bike-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(320px, 420px)); justify-content:center; gap:28px; }
.bike-card{
  background:var(--grafite); border:1px solid var(--linha); border-radius:var(--radius-md); padding:28px; position:relative;
  display:flex; flex-direction:column;
}
/* Ver nota em .card-grid .dif-card[data-reveal]: especificidade precisa
   vencer [data-reveal].reveal-pending pra transição de hover não ser engolida. */
.bike-grid .bike-card[data-reveal]{
  transition:opacity .6s ease, transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.bike-card:hover{ transform:translateY(-6px) scale(1.008); box-shadow:var(--shadow-lg); }
.bike-card.featured{ border-color:var(--pista); }
.bike-tag{
  position:absolute; top:-13px; left:28px; font-family:var(--f-mono); font-size:.68rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; padding:6px 14px; border-radius:20px; color:var(--tinta);
}
.bike-photo{ background:var(--tinta); border-radius:10px; padding:18px; margin:8px 0 22px; }
.bike-photo img{ height:200px; width:100%; object-fit:contain; }
.bike-card h3{ font-family:var(--f-body); text-transform:none; font-weight:700; font-size:1.3rem; color:var(--off-white); letter-spacing:0; text-align:center; }
.bike-price{ display:flex; justify-content:center; margin:18px 0; }
.bike-price .placa-value{ font-size:1.5rem; }
.bike-price .placa-unit{ font-size:.62rem; color:#7A6B4A; }
.bike-specs{ display:flex; flex-direction:column; gap:10px; margin:8px 0 24px; flex:1; }
.bike-specs li{ display:flex; gap:10px; align-items:flex-start; color:#C9CBCE; font-size:.9rem; }
.bike-specs i{ color:var(--pista); margin-top:3px; font-size:.8rem; }

/* ---------- Como funciona ---------- */
.steps-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; counter-reset:step; }
.step-card{ position:relative; padding-top:8px; }
.step-marker{
  font-family:var(--f-mono); font-weight:700; font-size:.8rem; color:var(--tinta); background:var(--pista);
  display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:3px; margin-bottom:18px;
}
.step-card h4{ font-family:var(--f-body); text-transform:none; font-weight:700; font-size:1.08rem; color:var(--tinta); letter-spacing:0; }
.step-card p{ margin-top:8px; color:#5B5D5F; font-size:.92rem; }
.step-rail{ position:absolute; top:14px; left:110%; width:80%; height:2px; background-image:repeating-linear-gradient(90deg, var(--linha-escura) 0 8px, transparent 8px 14px); }

/* ---------- FAQ ---------- */
.faq-list{ max-width:820px; margin:0 auto; }
.faq-item{ border-bottom:1px solid var(--linha); }
.faq-item:first-child{ border-top:1px solid var(--linha); }
.faq-q{
  width:100%; text-align:left; background:none; border:0; color:var(--off-white); cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:20px; padding:24px 4px;
  font-family:var(--f-body); font-weight:600; font-size:1.02rem;
}
.faq-q .idx{ font-family:var(--f-mono); color:var(--pista); font-size:.85rem; margin-right:14px; }
.faq-q .plus{ flex:0 0 auto; font-size:1.3rem; color:var(--pista); transition:transform .25s ease; }
.faq-item.open .plus{ transform:rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .3s ease; }
.faq-a-inner{ padding:0 4px 24px 62px; color:var(--fumaca); font-size:.96rem; max-width:70ch; }
.faq-a-inner strong{ color:var(--pista); }

/* ---------- Contato ---------- */
.contato-grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:28px; align-items:stretch; }
.contato-info{ background:var(--grafite); border-radius:var(--radius-md); padding:36px; display:flex; flex-direction:column; justify-content:space-between; border:1px solid var(--linha); }
/* Ver nota em .card-grid .dif-card[data-reveal]. */
.contato-grid .contato-info[data-reveal]{ transition:opacity .6s ease, border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.contato-info:hover{ border-color:rgba(245,179,0,.3); box-shadow:var(--shadow-md); }
.contato-info h3{ font-family:var(--f-body); text-transform:none; font-weight:700; font-size:1.3rem; letter-spacing:0; color:var(--off-white); }
.contato-info > p{ color:var(--fumaca); margin-top:14px; }
.contato-list{ margin-top:26px; display:flex; flex-direction:column; gap:16px; }
.contato-list li{ display:flex; gap:14px; align-items:flex-start; color:#C9CBCE; font-size:.94rem; }
.contato-list i{ color:var(--pista); margin-top:3px; }
.contato-list strong{ color:var(--off-white); }

.contato-form{ background:var(--papel); border-radius:var(--radius-md); padding:40px; color:var(--tinta); }
.contato-form h3{ font-family:var(--f-body); text-transform:none; font-weight:700; font-size:1.3rem; letter-spacing:0; }
.contato-form > p{ color:#5B5D5F; margin-top:8px; }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px 24px; margin-top:28px; }
.form-field{ display:flex; flex-direction:column; gap:8px; }
.form-field.full{ grid-column:1 / -1; }
.form-field label{ font-family:var(--f-mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:#7A7C7E; }
.form-field input, .form-field select, .form-field textarea{
  border:0; border-bottom:2px solid var(--linha-escura); background:transparent; padding:10px 2px;
  font-family:var(--f-body); font-size:.98rem; color:var(--tinta);
  border-radius:4px 4px 0 0;
  transition:border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.form-field input:hover, .form-field select:hover, .form-field textarea:hover{ background:rgba(16,17,19,.03); }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{ border-color:var(--pista-deep); outline:none; background:rgba(245,179,0,.05); }
.form-field input:focus-visible, .form-field select:focus-visible, .form-field textarea:focus-visible{
  box-shadow:0 1px 0 0 var(--pista-deep), 0 0 0 3px rgba(245,179,0,.22);
}
.form-field textarea{ resize:vertical; }
.contato-form .btn{ margin-top:8px; }
.map-frame{ margin-top:28px; border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--shadow-lg); border:1px solid var(--linha); }
.map-frame iframe{ width:100%; height:340px; border:0; display:block; filter:grayscale(.3) contrast(1.05); }

/* ---------- Footer ---------- */
.site-footer{ background:var(--asfalto-2); padding:72px 0 0; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:48px; padding-bottom:56px; border-bottom:1px solid var(--linha); }
.footer-brand p{ color:var(--fumaca); margin-top:18px; max-width:42ch; font-size:.94rem; }
.footer-col h4{ font-family:var(--f-mono); font-size:.75rem; letter-spacing:.1em; color:var(--fumaca); text-transform:uppercase; margin-bottom:20px; }
.footer-col ul{ display:flex; flex-direction:column; gap:12px; }
.footer-col a{ color:#C9CBCE; font-size:.94rem; }
.footer-col a:hover{ color:var(--pista); }
.footer-social{ display:flex; gap:12px; margin-top:20px; }
.footer-social a{ width:36px; height:36px; border-radius:50%; border:1px solid var(--linha); display:flex; align-items:center; justify-content:center; color:var(--fumaca); }
.footer-social a:hover{ color:var(--pista); border-color:var(--pista); }
.footer-bottom{ padding:24px 0; text-align:center; color:var(--fumaca); font-size:.82rem; font-family:var(--f-mono); }

/* ---------- WhatsApp float ---------- */
.whatsapp-float-btn{
  position:fixed; bottom:28px; right:28px; width:58px; height:58px; background:#25D366; color:#fff;
  border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:28px; z-index:400;
  box-shadow:0 8px 20px rgba(37,211,102,.4); transition:transform .2s ease;
}
.whatsapp-float-btn:hover{ transform:scale(1.08); }
.mobile-nav.open ~ .whatsapp-float-btn{ display:none; }
.whatsapp-pulse{ position:absolute; inset:0; border-radius:50%; background:#25D366; opacity:.6; animation:wa-pulse 1.6s infinite; z-index:-1; }
@keyframes wa-pulse{ 0%{ transform:scale(1); opacity:.6; } 100%{ transform:scale(1.6); opacity:0; } }

/* ---------- Scroll reveal (progressive enhancement: visible by default, JS opts elements into the hidden->reveal transition) ---------- */
[data-reveal].reveal-pending{ opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease; }
[data-reveal].reveal-pending.in-view{ opacity:1; transform:translateY(0); }

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .sobre-grid, .contato-grid{ grid-template-columns:1fr; }
  .card-grid, .bike-grid{ grid-template-columns:repeat(2,1fr); }
  .steps-grid{ grid-template-columns:repeat(2,1fr); row-gap:40px; }
  .step-rail{ display:none; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .footer-brand{ grid-column:1 / -1; }
}
@media (max-width:860px){
  .topbar .gt-social, .topbar-social{ display:none; }
  .main-nav, .header-actions .btn-primary, .header-actions .btn-header-cta{ display:none; }
  .nav-toggle{ display:flex; }
  .cluster-grid{ grid-template-columns:repeat(2,1fr); }
  .cluster-item:nth-child(3){ border-left:0; }
}
@media (max-width:680px){
  section{ padding:64px 0; }
  .card-grid, .bike-grid, .form-grid, .steps-grid, .cluster-grid{ grid-template-columns:1fr; }
  .cluster-item{ border-left:0; border-top:1px solid rgba(16,17,19,.15); }
  .cluster-item:first-child{ border-top:0; }
  .footer-grid{ grid-template-columns:1fr; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  [data-reveal]{ opacity:1; transform:none; transition:none; }
  .btn-primary:hover, .btn-primary:active, .dif-card:hover, .bike-card:hover, .whatsapp-float-btn:hover{ transform:none; }
  .whatsapp-pulse{ animation:none; display:none; }
}

/* ---------- Image Lightbox Popup Modal ---------- */
.image-modal {
  display: none;
  position: fixed;
  z-index: 999999;
  inset: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(11, 15, 25, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor: zoom-out;
  opacity: 0;
  transition: opacity 0.3s ease;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.image-modal.active {
  display: flex;
  opacity: 1;
}

.image-modal-content {
  margin: auto;
  max-width: 92%;
  max-height: 85vh;
  border-radius: 16px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.1);
  object-fit: contain;
  background: #0f172a;
  padding: 16px;
  transform: scale(0.92);
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.image-modal.active .image-modal-content {
  transform: scale(1);
}

.image-modal-caption {
  position: absolute;
  bottom: 25px;
  left: 50%;
  transform: translateX(-50%);
  color: #f8fafc;
  font-size: 1rem;
  font-weight: 600;
  background: rgba(15, 23, 42, 0.8);
  padding: 8px 20px;
  border-radius: 30px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  pointer-events: none;
}

.image-modal-close {
  position: absolute;
  top: 24px;
  right: 24px;
  color: #ffffff;
  font-size: 1.2rem;
  cursor: pointer;
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1000000;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  padding: 0;
}

.image-modal-close:hover {
  background: var(--pista);
  border-color: var(--pista);
  color: var(--tinta);
  transform: scale(1.1) rotate(90deg);
}

.image-modal-close i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

/* Indicador de imagem clicável */
.bike-photo img, .sobre-media img, .bike-card-img, [data-zoom] {
  cursor: zoom-in !important;
  transition: transform 0.3s ease, filter 0.3s ease;
}

.bike-photo img:hover, .sobre-media img:hover, .bike-card-img:hover {
  transform: scale(1.04);
}

/* ---------- Modalidades de Aluguel ---------- */
.modalidades-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  margin-top: 10px;
}

.modalidade-card {
  background: var(--grafite);
  border-radius: var(--radius-lg);
  padding: 40px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
}
/* Ver nota em .card-grid .dif-card[data-reveal]. */
.modalidades-grid .modalidade-card[data-reveal] {
  transition: opacity .6s ease, transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}

.modalidade-card:hover {
  transform: translateY(-4px);
  border-color: rgba(245, 179, 0, 0.4);
  box-shadow: var(--shadow-lg);
}

.modalidade-card.featured {
  background: linear-gradient(145deg, #232427 0%, #1c1d20 100%);
  border: 2px solid var(--pista);
  box-shadow: 0 15px 35px rgba(245, 179, 0, 0.15);
}

.modalidade-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--f-mono);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 20px;
  margin-bottom: 16px;
}

.badge-economico {
  background: rgba(127, 211, 242, 0.12);
  color: #7FD3F2;
  border: 1px solid rgba(127, 211, 242, 0.3);
}

.badge-destaque {
  background: var(--pista);
  color: var(--tinta);
}

.modalidade-header h3 {
  font-size: 1.65rem;
  color: var(--off-white);
  margin-bottom: 8px;
}

.modalidade-subtitle {
  color: var(--fumaca);
  font-size: 0.95rem;
  line-height: 1.45;
}

.modalidade-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  margin: 24px 0;
}

.modalidade-features {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 24px;
}

.modalidade-features li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: #CBD5E1;
  font-size: 0.95rem;
  line-height: 1.4;
}

.modalidade-features li i {
  color: var(--pista);
  font-size: 1.1rem;
  margin-top: 2px;
}

.modalidade-features li strong {
  color: #FFFFFF;
}

@media (max-width: 860px) {
  .modalidades-grid {
    grid-template-columns: 1fr;
  }
}

.modalidade-card .btn-primary {
  background: var(--pista) !important;
  color: var(--tinta) !important;
  box-shadow: 0 6px 0 var(--pista-deep) !important;
  font-weight: 800;
  text-decoration: none;
}

.modalidade-card .btn-primary:hover {
  transform: translateY(2px);
  box-shadow: 0 4px 0 var(--pista-deep) !important;
  color: var(--tinta) !important;
}

/* ---------- Photo Gallery Modal Pop-Up ---------- */
.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(10, 11, 13, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.modal-backdrop.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.modal-card {
  position: relative;
  background: #141518;
  border: 1px solid rgba(245, 179, 0, 0.3);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.8), 0 0 30px rgba(245, 179, 0, 0.15);
  border-radius: 16px;
  max-width: 820px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  transform: scale(0.92);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.modal-backdrop.open .modal-card {
  transform: scale(1);
}

.modal-close-btn {
  position: absolute;
  top: 18px;
  right: 22px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #FFFFFF;
  font-size: 1.15rem;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  z-index: 10;
}

.modal-close-btn:hover {
  background: var(--pista);
  color: var(--tinta);
  border-color: var(--pista);
  transform: scale(1.08) rotate(90deg);
}

.modal-close-btn i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.modal-head {
  text-align: left;
  padding-right: 40px;
}

.modal-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--f-mono);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pista);
  margin-bottom: 6px;
}

.modal-head h2 {
  font-family: var(--f-display);
  font-size: 1.5rem;
  font-weight: 900;
  color: #FFFFFF;
  margin: 0;
}

.modal-head p {
  color: #94A3B8;
  font-size: 0.9rem;
  margin-top: 4px;
}

.modal-main-display {
  position: relative;
  background: #0B0C0E;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 300px;
}

.modal-main-display img {
  max-height: 360px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  padding: 16px;
  transition: opacity 0.25s ease;
}

.modal-caption-bar {
  width: 100%;
  background: rgba(0, 0, 0, 0.85);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: #E2E8F0;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 10px 16px;
  text-align: center;
}

.modal-thumbs-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

.modal-thumb {
  background: #0B0C0E;
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 6px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  transition: all 0.2s ease;
}

.modal-thumb img {
  width: 100%;
  height: 60px;
  object-fit: cover;
  border-radius: 4px;
}

.modal-thumb span {
  font-family: var(--f-mono);
  font-size: 0.65rem;
  font-weight: 700;
  color: #94A3B8;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.1;
}

.modal-thumb:hover {
  border-color: rgba(245, 179, 0, 0.6);
  transform: translateY(-2px);
}

.modal-thumb.active {
  border-color: var(--pista);
  box-shadow: 0 0 12px rgba(245, 179, 0, 0.4);
  background: rgba(245, 179, 0, 0.08);
}

.modal-thumb.active span {
  color: var(--pista);
}

/* Gallery Trigger Button on Bike Card */
.btn-open-gallery {
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 9px 14px;
  background: rgba(245, 179, 0, 0.12);
  border: 1px solid rgba(245, 179, 0, 0.3);
  color: var(--pista);
  font-family: var(--f-mono);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-open-gallery:hover {
  background: var(--pista);
  color: var(--tinta);
  border-color: var(--pista);
}

.sobre-photo-wrap {
  position: relative;
  cursor: pointer;
  border-radius: 12px;
  overflow: hidden;
}

.sobre-photo-wrap .photo-overlay-badge {
  position: absolute;
  bottom: 12px;
  right: 12px;
  background: rgba(16, 17, 19, 0.88);
  border: 1px solid var(--pista);
  color: var(--pista);
  font-family: var(--f-mono);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.sobre-photo-wrap:hover .photo-overlay-badge {
  background: var(--pista);
  color: var(--tinta);
  transform: scale(1.04);
}

@media (max-width: 640px) {
  .modal-thumbs-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ===========================================================
   Microinterações e polish — aditivo, não altera cor/tipografia/estrutura
   =========================================================== */

/* ---------- Scroll progress indicator ---------- */
.scroll-progress{
  position:fixed; top:0; left:0; width:100%; height:3px; z-index:500;
  background:var(--pista); transform:scaleX(0); transform-origin:0 0;
  will-change:transform;
}
@media (prefers-reduced-motion: reduce){ .scroll-progress{ display:none; } }

/* ---------- Stagger: cada grid revela item a item, não tudo de uma vez ----------
   O delay é aplicado só à transição de reveal ([data-reveal].reveal-pending),
   nunca como regra geral do card — senão o delay vazaria pro hover também. */
.card-grid > *[data-reveal].reveal-pending, .bike-grid > *[data-reveal].reveal-pending,
.modalidades-grid > *[data-reveal].reveal-pending, .steps-grid > *[data-reveal].reveal-pending,
.cluster-grid > *[data-reveal].reveal-pending{
  transition-delay:calc(var(--stagger-i, 0) * 70ms);
}
.card-grid > *:nth-child(1),.bike-grid > *:nth-child(1),.modalidades-grid > *:nth-child(1),.steps-grid > *:nth-child(1),.cluster-grid > *:nth-child(1){ --stagger-i:0; }
.card-grid > *:nth-child(2),.bike-grid > *:nth-child(2),.modalidades-grid > *:nth-child(2),.steps-grid > *:nth-child(2),.cluster-grid > *:nth-child(2){ --stagger-i:1; }
.card-grid > *:nth-child(3),.bike-grid > *:nth-child(3),.modalidades-grid > *:nth-child(3),.steps-grid > *:nth-child(3),.cluster-grid > *:nth-child(3){ --stagger-i:2; }
.card-grid > *:nth-child(4),.bike-grid > *:nth-child(4),.modalidades-grid > *:nth-child(4),.steps-grid > *:nth-child(4),.cluster-grid > *:nth-child(4){ --stagger-i:3; }
.card-grid > *:nth-child(5),.bike-grid > *:nth-child(5),.modalidades-grid > *:nth-child(5),.steps-grid > *:nth-child(5),.cluster-grid > *:nth-child(5){ --stagger-i:4; }
.card-grid > *:nth-child(6),.bike-grid > *:nth-child(6),.modalidades-grid > *:nth-child(6),.steps-grid > *:nth-child(6),.cluster-grid > *:nth-child(6){ --stagger-i:5; }

/* ---------- Revelação progressiva de imagens/vídeo + skeleton shimmer ---------- */
.media-loading{ position:relative; overflow:hidden; background:rgba(255,255,255,.04); }
.on-light .media-loading{ background:rgba(16,17,19,.05); }
.media-loading::after{
  content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.10), transparent);
  transform:translateX(-100%);
  animation:shimmerSweep 1.4s infinite;
}
@keyframes shimmerSweep{ to{ transform:translateX(100%); } }

.media-reveal{ opacity:0; filter:blur(8px); transition:opacity var(--dur-slow) var(--ease-out), filter var(--dur-slow) var(--ease-out); }
.media-reveal.is-loaded{ opacity:1; filter:blur(0); }

@media (prefers-reduced-motion: reduce){
  .media-loading::after{ display:none; }
  .media-reveal{ filter:none; transition:opacity var(--dur-fast) linear; }
}

/* ---------- Floating sutil em elementos decorativos do hero ---------- */
@keyframes floatSoft{
  0%, 100%{ transform:translateY(0) rotate(4deg); }
  50%{ transform:translateY(-7px) rotate(4deg); }
}
.hero-media .corner-tape{ animation:floatSoft 5s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce){
  .hero-media .corner-tape{ animation:none; }
}

/* ---------- Parallax discreto (JS aplica translateY via var()) ----------
   Aplicado no .frame interno, não no .hero-media: o .hero-media carrega
   [data-reveal], cuja regra de transform tem especificidade maior e vem
   depois no cascade — um transform solto ali nunca venceria. */
.hero-media .frame{ transform:translateY(var(--parallax-y, 0px)); will-change:transform; }

/* ---------- Hover refinado em links de texto (footer, contato) ---------- */
.footer-col a, .contato-list a{
  background-image:linear-gradient(var(--pista), var(--pista));
  background-repeat:no-repeat; background-position:0 100%; background-size:0% 1px;
  transition:background-size var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.footer-col a:hover{ background-size:100% 1px; }

/* ---------- Skeleton utilitário genérico (reaproveitável) ---------- */
@media (prefers-reduced-motion: reduce){
  .btn-primary::before, .btn-header-cta::before{ display:none; }
}