/* ==========================================================================
   Techwatts Motors® | Estúdio Automotivo Dark Tech
   HTML5 + CSS3 Puro | Mobile-First | Tipografia Variável Auto-Hospedada Archivo
   ========================================================================== */

@font-face {
  font-family: "Archivo";
  font-style: italic;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("assets/fonts/archivo-1.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: "Archivo";
  font-style: italic;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("assets/fonts/archivo-2.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Archivo";
  font-style: italic;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("assets/fonts/archivo-3.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("assets/fonts/archivo-4.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("assets/fonts/archivo-5.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("assets/fonts/archivo-6.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Paleta Automotiva Dark Tech */
  --asphalt: #07080a;
  --carbon: #0e1116;
  --titanium-bay: #151922;
  --titanium-hover: #1b212d;
  --line: #232a36;
  --line-strong: #343e50;

  /* Cobre Oficial Techwatts (Contraste AAA sobre tinta escura) */
  --copper: #ff6d1f;
  --copper-hover: #ff8542;
  --copper-tint: rgba(255, 109, 31, 0.08);

  /* Tintas Sólidas Calibradas */
  --chalk: #f5f7fb;
  --silver: #b5bfce;
  --muted: #8c97aa;
  --ink-dark: #07080a;

  /* Geometria Usinada & Escala */
  --font-sans: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --shell-max: 78rem;
  --gutter: clamp(1.125rem, 4vw, 2.75rem);
  --radius-machined: 0.25rem;
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --shadow-elevation: 0 12px 28px -8px rgba(0, 0, 0, 0.78);
}

/* ==========================================================================
   Reset Estrutural & Acessibilidade
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  color-scheme: dark;
  scrollbar-color: var(--line-strong) var(--asphalt);
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
  background-color: var(--asphalt);
  color: var(--chalk);
  -webkit-text-size-adjust: 100%;
}

::selection {
  background-color: var(--copper);
  color: var(--ink-dark);
}

body {
  margin: 0;
  min-width: 20rem;
  overflow-x: clip;
  background-color: var(--asphalt);
  color: var(--chalk);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.55;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  padding-bottom: 4.5rem;
}

@media (min-width: 62rem) {
  body {
    padding-bottom: 0;
  }
}

img,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

h1,
h2,
h3,
p,
dl,
dt,
dd,
figure,
ul {
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

address {
  font-style: normal;
}

.tabular,
.hero-spec-cell dd,
.sheet-specs dd,
.spec-table td,
.monument-num {
  font-variant-numeric: tabular-nums;
}

.shell {
  width: min(var(--shell-max), calc(100% - (2 * var(--gutter))));
  margin-inline: auto;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -4rem;
  left: 1rem;
  z-index: 200;
  padding: 0.75rem 1.125rem;
  background: var(--copper);
  color: var(--ink-dark);
  font-weight: 800;
  border-radius: var(--radius-machined);
}

.skip-link:focus {
  top: 0.75rem;
}

a:focus-visible,
summary:focus-visible,
button:focus-visible {
  outline: 2px solid var(--copper);
  outline-offset: 3px;
}

/* ==========================================================================
   Botões Industriais Usinados (4px)
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  min-height: 2.875rem;
  padding: 0.75rem 1.35rem;
  border-radius: var(--radius-machined);
  border: 1px solid transparent;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 800;
  font-stretch: 106%;
  letter-spacing: 0.02em;
  line-height: 1.15;
  text-align: center;
  cursor: pointer;
  transition:
    background-color 0.2s var(--ease-expo),
    border-color 0.2s var(--ease-expo),
    color 0.2s var(--ease-expo),
    transform 0.2s var(--ease-expo);
}

.btn svg {
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
}

.btn:active {
  transform: translateY(1px);
}

.btn-copper {
  background-color: var(--copper);
  color: var(--ink-dark);
  border-color: var(--copper);
  box-shadow: var(--shadow-elevation);
}

.btn-copper:hover {
  background-color: var(--copper-hover);
  border-color: var(--copper-hover);
}

.btn-hairline {
  background-color: rgba(21, 25, 34, 0.72);
  color: var(--chalk);
  border-color: var(--line-strong);
}

.btn-hairline:hover {
  background-color: var(--titanium-hover);
  border-color: var(--chalk);
}

/* ==========================================================================
   Faixa Oficial Exclusiva: #VEM PRO ROLÊ DA TECHWATTS
   ========================================================================== */

.role-ticker {
  position: relative;
  z-index: 60;
  overflow: hidden;
  background-color: var(--copper);
  color: var(--ink-dark);
  border-bottom: 1px solid rgba(7, 8, 10, 0.22);
  padding: 0.5rem 0.75rem;
  user-select: none;
}

.ticker-track {
  display: flex;
  width: max-content;
  animation: role-marquee 26s linear infinite;
}

.role-ticker:hover .ticker-track,
.role-ticker:focus-within .ticker-track {
  animation-play-state: paused;
}

.ticker-group {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding-right: 1.5rem;
}

.ticker-slogan {
  font-size: 0.78rem;
  font-weight: 900;
  font-stretch: 118%;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.ticker-slash {
  width: 0.625rem;
  height: 0.8125rem;
  opacity: 0.5;
  flex-shrink: 0;
}

@keyframes role-marquee {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-50%, 0, 0);
  }
}

/* ==========================================================================
   Cabeçalho Fumê de Estúdio
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: rgba(7, 8, 10, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3.625rem;
}

.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 0.6875rem;
  flex-shrink: 0;
}

.brand-seal {
  width: 2.25rem;
  height: 2.25rem;
  flex-shrink: 0;
}

.brand-text {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.brand-top {
  font-size: 0.875rem;
  font-weight: 900;
  font-stretch: 118%;
  letter-spacing: 0.06em;
  line-height: 1;
  color: var(--chalk);
}

.brand-bottom {
  font-size: 0.75rem;
  font-weight: 700;
  font-stretch: 108%;
  letter-spacing: 0.14em;
  line-height: 1;
  color: var(--copper);
}

.header-nav {
  display: none;
}

.btn.header-cta-desktop {
  display: none;
}

.btn.header-cta-mobile {
  min-height: 2.375rem;
  padding: 0.5rem 0.875rem;
  font-size: 0.8125rem;
}

@media (min-width: 62rem) {
  .header-inner {
    min-height: 4.25rem;
  }

  .brand-seal {
    width: 2.5rem;
    height: 2.5rem;
  }

  .brand-top {
    font-size: 0.9375rem;
  }

  .header-nav {
    display: flex;
    align-items: center;
    gap: 2rem;
  }

  .header-nav a {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--silver);
    transition: color 0.18s ease;
  }

  .header-nav a:hover {
    color: var(--chalk);
  }

  .btn.header-cta-desktop {
    display: inline-flex;
    min-height: 2.625rem;
    padding: 0.625rem 1.15rem;
  }

  .btn.header-cta-mobile {
    display: none;
  }
}

/* ==========================================================================
   HERO PÔSTER AUTOMOTIVO (#topo)
   ========================================================================== */

.hero-poster {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(66% 46% at 68% 44%, rgba(255, 109, 31, 0.15) 0%, rgba(21, 25, 34, 0.52) 48%, rgba(7, 8, 10, 0) 100%),
    linear-gradient(180deg, #07080a 0%, #0b0e14 76%, #07080a 100%);
}

.hero-backdrop-type {
  position: absolute;
  top: 2.25rem;
  left: 50%;
  transform: translateX(-50%);
  width: min(98vw, 90rem);
  height: auto;
  pointer-events: none;
  z-index: 1;
}

.hero-backdrop-type text {
  font-family: var(--font-sans);
  font-weight: 900;
  font-stretch: 122%;
  font-size: 162px;
  letter-spacing: 0.04em;
  fill: rgba(245, 247, 251, 0.028);
  stroke: rgba(245, 247, 251, 0.09);
  stroke-width: 1.25px;
}

.hero-stage-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.6875rem;
  padding-top: 0.625rem;
  padding-bottom: 0.875rem;
}

/* No celular, a scooter recortada entra logo de cara no topo do palco */
.hero-machine {
  order: -1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 11.75rem;
  padding: 0.15rem 0 0.4rem;
  isolation: isolate;
}

.hero-horizon-glow {
  position: absolute;
  inset: 14% 4% 8%;
  z-index: -2;
  background: radial-gradient(54% 52% at 50% 66%, rgba(255, 109, 31, 0.24) 0%, rgba(255, 109, 31, 0.06) 52%, transparent 78%);
  pointer-events: none;
}

.hero-horizon-line {
  position: absolute;
  left: -6%;
  right: -6%;
  bottom: 1.3rem;
  height: 1px;
  z-index: -1;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 109, 31, 0.28) 18%, rgba(255, 138, 76, 0.9) 50%, rgba(255, 109, 31, 0.28) 82%, transparent 100%);
  pointer-events: none;
}

.hero-cutout-img {
  position: relative;
  z-index: 2;
  width: auto;
  max-height: 12.25rem;
  object-fit: contain;
  filter: drop-shadow(0 18px 26px rgba(0, 0, 0, 0.88));
}

.hero-tire-shadow {
  position: absolute;
  bottom: 0.55rem;
  left: 50%;
  transform: translateX(-50%);
  width: min(82%, 25rem);
  height: 1.35rem;
  z-index: 1;
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.55) 58%, transparent 100%);
  pointer-events: none;
}

.hero-copy-block {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.hero-copy-block h1 {
  font-size: clamp(1.85rem, 7.5vw, 4.25rem);
  font-weight: 900;
  font-stretch: 115%;
  line-height: 0.98;
  letter-spacing: -0.025em;
  color: var(--chalk);
  max-width: 15ch;
}

.hero-lead {
  font-size: clamp(0.9375rem, 1.4vw, 1.09375rem);
  line-height: 1.5;
  color: var(--silver);
  max-width: 48ch;
}

.hero-cta-group {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.625rem;
  padding-top: 0.25rem;
}

@media (min-width: 23.75rem) {
  .hero-cta-group {
    grid-template-columns: 1.44fr 1fr;
    gap: 0.5rem;
  }

  .hero-cta-group .btn {
    padding-inline: 0.6875rem;
    font-size: 0.8125rem;
    white-space: nowrap;
  }
}

/* Régua Arquitetônica de 1px na Base do Hero */
.hero-spec-bar {
  position: relative;
  z-index: 3;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background-color: rgba(14, 17, 22, 0.82);
  padding: 0.375rem 0 0.5rem;
}

.hero-spec-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.hero-spec-cell {
  padding: 0.5rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.hero-spec-cell:nth-child(odd) {
  padding-left: 0;
  border-right: 1px solid var(--line);
}

.hero-spec-cell:nth-child(even) {
  padding-left: 0.875rem;
  padding-right: 0;
}

.hero-spec-cell:nth-child(-n + 2) {
  border-bottom: 1px solid var(--line);
}

.hero-spec-cell dt {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.02em;
}

.hero-spec-cell dd {
  font-size: 0.90625rem;
  font-weight: 800;
  font-stretch: 108%;
  color: var(--chalk);
  line-height: 1.2;
}

.hero-spec-footnote {
  margin-top: 0.25rem;
  padding-top: 0.375rem;
  border-top: 1px solid rgba(35, 42, 54, 0.72);
  font-size: 0.75rem;
  color: var(--muted);
  line-height: 1.35;
}

@media (min-width: 48rem) {
  .hero-cutout-img {
    max-height: 19rem;
  }

  .hero-cta-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.875rem;
  }

  .hero-cta-group .btn {
    padding-inline: 1.45rem;
    font-size: 0.875rem;
  }

  .hero-spec-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .hero-spec-bar {
    padding: 0.5rem 0 0.625rem;
  }

  .hero-spec-cell,
  .hero-spec-cell:nth-child(odd),
  .hero-spec-cell:nth-child(even) {
    padding: 0.6875rem 1.25rem;
    border-bottom: 0;
    border-right: 1px solid var(--line);
  }

  .hero-spec-cell:first-child {
    padding-left: 0;
  }

  .hero-spec-cell:last-child {
    padding-right: 0;
    border-right: 0;
  }

  .hero-spec-footnote {
    margin-top: 0.35rem;
    padding-top: 0.45rem;
  }
}

@media (min-width: 62rem) {
  .hero-backdrop-type {
    top: 44%;
    transform: translate(-50%, -50%);
  }

  .hero-stage-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: center;
    gap: 1.5rem;
    min-height: 36.25rem;
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
  }

  .hero-copy-block {
    grid-column: 1 / 7;
    grid-row: 1;
    gap: 1.25rem;
    z-index: 3;
  }

  .hero-copy-block h1 {
    max-width: 12.5ch;
  }

  .hero-cta-group {
    padding-top: 0.5rem;
  }

  .hero-machine {
    order: 0;
    grid-column: 6 / 13;
    grid-row: 1;
    min-height: 32.5rem;
    justify-content: flex-end;
    padding-right: 0.5rem;
  }

  .hero-horizon-line {
    bottom: 2.35rem;
  }

  .hero-cutout-img {
    max-height: 30.5rem;
  }

  .hero-tire-shadow {
    bottom: 1.25rem;
    left: 56%;
    width: 30rem;
    height: 1.95rem;
  }

  .hero-spec-cell dd {
    font-size: 1.0625rem;
  }
}

/* Profundidade Sutil ao Rolar (Progressive Enhancement CSS) */
@supports (animation-timeline: scroll()) {
  @media (min-width: 62rem) and (prefers-reduced-motion: no-preference) {
    .hero-backdrop-type {
      animation: backdrop-drift linear both;
      animation-timeline: scroll(root);
      animation-range: 0 700px;
    }

    @keyframes backdrop-drift {
      from {
        transform: translate3d(-50%, -50%, 0);
      }
      to {
        transform: translate3d(-50%, calc(-50% + 42px), 0);
      }
    }
  }
}

/* ==========================================================================
   SEÇÃO 2: Configurador Interativo dos 3 Modelos (#modelos)
   ========================================================================== */

.configurator-section {
  padding: 3.5rem 0;
  background-color: var(--asphalt);
}

@media (min-width: 62rem) {
  .configurator-section {
    padding: 5.25rem 0;
  }
}

.configurator-top {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-bottom: 1.75rem;
}

.configurator-top h2,
.editorial-intro h2,
.routine-left h2,
.workshop-authority h2 {
  font-size: clamp(1.65rem, 3.4vw, 2.65rem);
  font-weight: 900;
  font-stretch: 112%;
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--chalk);
}

.model-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--line);
  border-radius: 0;
  background-color: var(--carbon);
}

.model-tab {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.2rem;
  min-height: 3.625rem;
  padding: 0.6875rem 0.5rem;
  border-radius: 0;
  border-right: 1px solid var(--line);
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease;
}

.model-tab:last-child {
  border-right: 0;
}

.model-tab:hover {
  background-color: var(--titanium-bay);
}

.model-tab-name {
  font-size: 0.78125rem;
  font-weight: 800;
  font-stretch: 100%;
  color: var(--chalk);
  line-height: 1.15;
  white-space: nowrap;
}

.model-tab-sub {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
  line-height: 1.15;
  white-space: nowrap;
}

@media (min-width: 48rem) {
  .model-tab {
    padding: 0.875rem 1.35rem;
  }

  .model-tab-name {
    font-size: 0.9375rem;
    font-stretch: 108%;
  }
}

@media (min-width: 62rem) {
  .configurator-top {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 2.25rem;
  }

  .configurator-top h2 {
    max-width: 17ch;
  }

  .model-tabs {
    min-width: 31rem;
  }
}

/* Estado Ativo das Abas por :checked */
#bay-x11:checked ~ .shell .model-tab[for="bay-x11"],
#bay-tw1000:checked ~ .shell .model-tab[for="bay-tw1000"],
#bay-x12:checked ~ .shell .model-tab[for="bay-x12"] {
  background-color: var(--titanium-bay);
  border-bottom-color: var(--copper);
}

#bay-x11:checked ~ .shell .model-tab[for="bay-x11"] .model-tab-sub,
#bay-tw1000:checked ~ .shell .model-tab[for="bay-tw1000"] .model-tab-sub,
#bay-x12:checked ~ .shell .model-tab[for="bay-x12"] .model-tab-sub {
  color: var(--copper);
}

#bay-x11:focus-visible ~ .shell .model-tab[for="bay-x11"],
#bay-tw1000:focus-visible ~ .shell .model-tab[for="bay-tw1000"],
#bay-x12:focus-visible ~ .shell .model-tab[for="bay-x12"] {
  outline: 2px solid var(--copper);
  outline-offset: -2px;
}

/* Palco Empilhado sem Salto de Altura */
.model-stage-stack {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 1.75rem 0;
}

.model-panel {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  padding: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(0.5rem);
  transition:
    opacity 0.35s var(--ease-expo),
    transform 0.35s var(--ease-expo),
    visibility 0.35s;
}

#bay-x11:checked ~ .shell .panel-x11,
#bay-tw1000:checked ~ .shell .panel-tw1000,
#bay-x12:checked ~ .shell .panel-x12 {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.model-photo-frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-machined);
  border: 1px solid var(--line);
  background-color: var(--carbon);
  aspect-ratio: 16 / 9;
}

.model-photo-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.model-sheet {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.25rem;
}

.model-sheet-head {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.model-sheet-head h3 {
  font-size: clamp(1.375rem, 2.4vw, 1.85rem);
  font-weight: 900;
  font-stretch: 112%;
  line-height: 1.1;
  color: var(--chalk);
}

.model-sheet-head p {
  font-size: 0.9375rem;
  color: var(--silver);
  line-height: 1.55;
}

/* Barras Técnicas Vivas de Comparação */
.telemetry-bars {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.telemetry-bar-row {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.telemetry-bar-row span {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--silver);
}

.bar-track {
  width: 100%;
  height: 0.3125rem;
  background-color: rgba(245, 247, 251, 0.09);
  overflow: hidden;
}

.bar-fill {
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, var(--copper) 0%, #ffa057 100%);
  transform-origin: left center;
  transform: scaleX(0.15);
  transition: transform 0.65s var(--ease-expo) 0.08s;
}

#bay-x11:checked ~ .shell .panel-x11 .fill-92 {
  transform: scaleX(0.92);
}

#bay-x11:checked ~ .shell .panel-x11 .fill-68 {
  transform: scaleX(0.68);
}

#bay-tw1000:checked ~ .shell .panel-tw1000 .fill-95 {
  transform: scaleX(0.95);
}

#bay-tw1000:checked ~ .shell .panel-tw1000 .fill-90 {
  transform: scaleX(0.90);
}

#bay-x12:checked ~ .shell .panel-x12 .fill-96 {
  transform: scaleX(0.96);
}

#bay-x12:checked ~ .shell .panel-x12 .fill-80 {
  transform: scaleX(0.80);
}

/* Grade Técnica em Fios de 1px */
.sheet-specs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 0.25rem 0;
}

.sheet-specs > div {
  padding: 0.75rem 0.875rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.sheet-specs > div:nth-child(odd) {
  border-right: 1px solid var(--line);
}

.sheet-specs > div:nth-child(even) {
  padding-left: 0.875rem;
}

.sheet-specs > div:nth-child(-n + 2) {
  border-bottom: 1px solid var(--line);
}

.sheet-specs dt {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
}

.sheet-specs dd {
  font-size: 0.9375rem;
  font-weight: 800;
  font-stretch: 106%;
  color: var(--chalk);
}

.sheet-actions {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

@media (min-width: 30rem) {
  .sheet-actions {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

.sheet-note {
  font-size: 0.75rem;
  color: var(--muted);
  line-height: 1.45;
}

@media (min-width: 62rem) {
  .model-stage-stack {
    padding: 2.5rem 0;
  }

  .model-panel {
    grid-template-columns: minmax(0, 1.32fr) minmax(0, 1fr);
    align-items: center;
    gap: 2.75rem;
    padding: 0;
  }
}

/* ==========================================================================
   SEÇÃO 3: Por Dentro da Máquina (Layout Editorial Assimétrico 1 + 2)
   ========================================================================== */

.engineering-section {
  padding: 3.75rem 1.125rem;
  background-color: var(--carbon);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.engineering-section > .shell {
  width: min(var(--shell-max), 100%);
}

@media (min-width: 62rem) {
  .engineering-section {
    padding: 5.5rem 2.5rem;
  }
}

.editorial-intro {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  max-width: 44rem;
  margin-bottom: 2.25rem;
}

.editorial-intro p {
  font-size: 1rem;
  color: var(--silver);
}

/* Destaque Principal em Largura Total */
.feature-lead {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  padding: 2rem 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.feature-lead-media,
.feature-wing-media {
  overflow: hidden;
  border-radius: var(--radius-machined);
  border: 1px solid var(--line);
  background-color: var(--asphalt);
  aspect-ratio: 16 / 9;
}

.feature-lead-media img,
.feature-wing-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.feature-lead-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.125rem;
}

.feature-lead-copy h3,
.feature-wing h3 {
  font-size: clamp(1.25rem, 2.1vw, 1.625rem);
  font-weight: 800;
  font-stretch: 110%;
  line-height: 1.15;
  color: var(--chalk);
}

.feature-lead-copy p,
.feature-wing p {
  font-size: 0.9375rem;
  color: var(--silver);
  line-height: 1.58;
}

.inline-specs {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.875rem;
  padding: 1rem 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

@media (min-width: 34rem) {
  .inline-specs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.inline-specs dt {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
}

.inline-specs dd {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--chalk);
  margin-top: 0.15rem;
}

/* Dupla Editorial Separada por Fio de 1px */
.feature-duo {
  display: grid;
  grid-template-columns: 1fr;
  padding: 1.75rem 0;
  border-bottom: 1px solid var(--line);
}

.feature-wing {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0.5rem 0;
}

.feature-wing h3 {
  margin-top: 1.25rem;
  margin-bottom: 0.5rem;
}

.feature-wing + .feature-wing {
  margin-top: 1.25rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--line);
}

@media (min-width: 62rem) {
  .feature-lead {
    grid-template-columns: minmax(0, 1.22fr) minmax(0, 1fr);
    gap: 2.75rem;
    padding: 2.75rem 0;
  }

  .feature-duo {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    padding: 2.25rem 0;
  }

  .feature-wing {
    padding: 0.5rem 2.25rem 0.5rem 0;
  }

  .feature-wing + .feature-wing {
    margin-top: 0;
    border-top: 0;
    border-left: 1px solid var(--line);
    padding: 0.5rem 0 0.5rem 2.25rem;
  }
}

/* Tabela Comparativa Aberta em Fios de 1px */
.ledger-wrap {
  padding-top: 2.75rem;
}

.ledger-head {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 1.5rem;
}

.ledger-head h3 {
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  font-weight: 800;
  font-stretch: 110%;
  color: var(--chalk);
}

.ledger-head p {
  font-size: 0.875rem;
  color: var(--muted);
}

.spec-table {
  width: 100%;
  border-collapse: collapse;
  border-top: 1px solid var(--line-strong);
}

@media (max-width: 47.99rem) {
  .spec-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }

  .spec-table tbody,
  .spec-table tr,
  .spec-table th,
  .spec-table td {
    display: block;
    width: 100%;
  }

  .spec-table tr {
    padding: 1rem 0;
    border-bottom: 1px solid var(--line);
  }

  .spec-table th[scope="row"] {
    font-size: 0.875rem;
    font-weight: 800;
    font-stretch: 108%;
    color: var(--copper);
    text-align: left;
    margin-bottom: 0.5rem;
  }

  .spec-table td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: 0.375rem 0;
    font-size: 0.875rem;
    color: var(--chalk);
    text-align: right;
  }

  .spec-table td::before {
    content: attr(data-label);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--muted);
    text-align: left;
    flex-shrink: 0;
  }
}

@media (min-width: 48rem) {
  .spec-table th,
  .spec-table td {
    padding: 1rem 1rem;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
  }

  .spec-table th:first-child,
  .spec-table td:first-child {
    padding-left: 0;
  }

  .spec-table th:last-child,
  .spec-table td:last-child {
    padding-right: 0;
  }

  .spec-table thead th {
    font-size: 0.75rem;
    font-weight: 800;
    font-stretch: 112%;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--muted);
  }

  .spec-table tbody th {
    font-size: 0.875rem;
    font-weight: 800;
    color: var(--chalk);
    width: 20%;
  }

  .spec-table tbody td {
    font-size: 0.90625rem;
    color: var(--silver);
  }
}

/* ==========================================================================
   SEÇÃO 4: Guia Prático CONTRAN 996 & Rotina (#guia-cnh)
   ========================================================================== */

.routine-section {
  padding: 3.75rem 0;
  background-color: var(--asphalt);
}

@media (min-width: 62rem) {
  .routine-section {
    padding: 5.5rem 0;
  }
}

.routine-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
}

.routine-left {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.routine-nav {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-bottom: 0;
}

.routine-tab {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1.125rem 1.25rem;
  border-radius: 0;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease;
}

.routine-tab:hover {
  background-color: var(--carbon);
}

.routine-tab strong {
  font-size: 0.96875rem;
  font-weight: 800;
  font-stretch: 106%;
  color: var(--chalk);
  transition: color 0.2s ease;
}

.routine-tab span {
  font-size: 0.8125rem;
  color: var(--muted);
  transition: color 0.2s ease;
}

#rotina-cnh:checked ~ .routine-layout .routine-tab[for="rotina-cnh"],
#rotina-apto:checked ~ .routine-layout .routine-tab[for="rotina-apto"],
#rotina-economia:checked ~ .routine-layout .routine-tab[for="rotina-economia"] {
  background-color: var(--titanium-bay);
  border-bottom-color: var(--copper);
}

#rotina-cnh:checked ~ .routine-layout .routine-tab[for="rotina-cnh"] strong,
#rotina-apto:checked ~ .routine-layout .routine-tab[for="rotina-apto"] strong,
#rotina-economia:checked ~ .routine-layout .routine-tab[for="rotina-economia"] strong {
  color: var(--copper);
}

#rotina-cnh:checked ~ .routine-layout .routine-tab[for="rotina-cnh"] span,
#rotina-apto:checked ~ .routine-layout .routine-tab[for="rotina-apto"] span,
#rotina-economia:checked ~ .routine-layout .routine-tab[for="rotina-economia"] span {
  color: var(--chalk);
}

#rotina-cnh:focus-visible ~ .routine-layout .routine-tab[for="rotina-cnh"],
#rotina-apto:focus-visible ~ .routine-layout .routine-tab[for="rotina-apto"],
#rotina-economia:focus-visible ~ .routine-layout .routine-tab[for="rotina-economia"] {
  outline: 2px solid var(--copper);
  outline-offset: -2px;
}

.routine-right {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  background-color: var(--carbon);
  border: 1px solid var(--line);
  border-radius: var(--radius-machined);
  padding: 1.75rem 1.375rem;
}

@media (min-width: 62rem) {
  .routine-right {
    padding: 2.75rem;
  }
}

.routine-panel {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.125rem;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(0.4rem);
  transition:
    opacity 0.3s var(--ease-expo),
    transform 0.3s var(--ease-expo),
    visibility 0.3s;
}

#rotina-cnh:checked ~ .routine-layout .answer-cnh,
#rotina-apto:checked ~ .routine-layout .answer-apto,
#rotina-economia:checked ~ .routine-layout .answer-economia {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.routine-panel h3 {
  font-size: clamp(1.25rem, 2.1vw, 1.65rem);
  font-weight: 800;
  font-stretch: 110%;
  line-height: 1.15;
  color: var(--chalk);
}

.routine-panel p {
  font-size: 0.9375rem;
  color: var(--silver);
  line-height: 1.6;
}

.clean-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6875rem;
}

.clean-list li {
  position: relative;
  padding-left: 1.15rem;
  font-size: 0.90625rem;
  color: var(--chalk);
  line-height: 1.5;
}

.clean-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.52rem;
  width: 0.375rem;
  height: 0.375rem;
  background-color: var(--copper);
}

@media (min-width: 62rem) {
  .routine-layout {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    align-items: stretch;
    gap: 3rem;
  }
}

/* ==========================================================================
   SEÇÃO 5: Oficina Própria & Autoridade Monumental (#oficina)
   ========================================================================== */

.workshop-section {
  padding: 3.75rem 1.125rem;
  background-color: var(--carbon);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.workshop-section > .shell {
  width: min(var(--shell-max), 100%);
}

@media (min-width: 62rem) {
  .workshop-section {
    padding: 5.5rem 2.5rem;
  }
}

.workshop-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

.workshop-plate {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.workshop-plate img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--radius-machined);
  border: 1px solid var(--line);
}

.workshop-plate figcaption {
  font-size: 0.8125rem;
  color: var(--muted);
  line-height: 1.45;
}

.workshop-authority {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.workshop-authority > p {
  font-size: 0.96875rem;
  color: var(--silver);
  line-height: 1.6;
}

.monument-stats {
  display: flex;
  flex-direction: column;
  margin-top: 0.5rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--line-strong);
}

.monument-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.35rem;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--line);
}

.monument-num {
  font-size: clamp(1.85rem, 3.2vw, 2.5rem);
  font-weight: 900;
  font-stretch: 118%;
  line-height: 0.96;
  letter-spacing: -0.02em;
  color: var(--chalk);
  white-space: nowrap;
}

.monument-row dt {
  font-size: 0.90625rem;
  color: var(--silver);
  line-height: 1.5;
}

@media (min-width: 36rem) {
  .monument-row {
    grid-template-columns: 15.25rem minmax(0, 1fr);
    align-items: center;
    gap: 1.5rem;
  }
}

@media (min-width: 62rem) {
  .workshop-split {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    align-items: center;
    gap: 3.25rem;
  }
}

/* ==========================================================================
   SEÇÃO 6: As 2 Unidades Físicas & Perguntas Rápidas (#lojas)
   ========================================================================== */

.stores-section {
  padding: 3.75rem 0;
  background-color: var(--asphalt);
}

@media (min-width: 62rem) {
  .stores-section {
    padding: 5.5rem 0;
  }
}

.showroom-wings {
  display: grid;
  grid-template-columns: 1fr;
  padding: 1.5rem 0;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
}

.showroom-wing {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 0.75rem 0;
}

.showroom-wing + .showroom-wing {
  margin-top: 1.25rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--line);
}

.showroom-wing h3 {
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
  font-weight: 900;
  font-stretch: 112%;
  color: var(--chalk);
  line-height: 1.1;
}

.wing-address {
  display: block;
  font-size: 0.9375rem;
  color: var(--silver);
  line-height: 1.6;
}

.wing-address strong {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 1rem;
  font-weight: 800;
  color: var(--chalk);
}

.wing-actions {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  padding-top: 0.25rem;
}

@media (min-width: 30rem) {
  .wing-actions {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

@media (min-width: 56rem) {
  .showroom-wings {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 2rem 0;
  }

  .showroom-wing {
    padding: 0.5rem 2.5rem 0.5rem 0;
  }

  .showroom-wing + .showroom-wing {
    margin-top: 0;
    border-top: 0;
    border-left: 1px solid var(--line);
    padding: 0.5rem 0 0.5rem 2.5rem;
  }
}

/* FAQ em Linhas Abertas de 1px */
.faq-ledger {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
  padding-top: 3.25rem;
}

.faq-intro {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.faq-intro h3 {
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
  font-weight: 900;
  font-stretch: 112%;
  color: var(--chalk);
}

.faq-intro p {
  font-size: 0.9375rem;
  color: var(--silver);
}

.faq-rows {
  padding-top: 0.625rem;
  border-top: 1px solid var(--line);
}

.faq-row {
  border-bottom: 1px solid var(--line);
}

.faq-row summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 0;
  font-size: 0.96875rem;
  font-weight: 800;
  font-stretch: 105%;
  color: var(--chalk);
  cursor: pointer;
}

.faq-row summary::-webkit-details-marker {
  display: none;
}

.faq-plus {
  width: 1.15rem;
  height: 1.15rem;
  color: var(--silver);
  flex-shrink: 0;
  transition:
    transform 0.2s var(--ease-expo),
    color 0.2s ease;
}

.faq-row[open] .faq-plus {
  transform: rotate(45deg);
  color: var(--copper);
}

.faq-answer {
  padding-bottom: 1.25rem;
  padding-right: 2rem;
  font-size: 0.90625rem;
  color: var(--silver);
  line-height: 1.6;
}

@media (min-width: 62rem) {
  .faq-ledger {
    grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
    gap: 3rem;
    padding-top: 4rem;
  }
}

/* ==========================================================================
   Rodapé Institucional & Barra Fixa Mobile
   ========================================================================== */

.site-footer {
  padding: 3rem 1.125rem 2.5rem;
  background-color: var(--carbon);
  border-top: 1px solid var(--line);
}

.site-footer > .shell {
  width: min(var(--shell-max), 100%);
}

@media (min-width: 62rem) {
  .site-footer {
    padding: 3.5rem 2.5rem 2.5rem;
  }
}

.footer-columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  padding-bottom: 2.25rem;
  border-bottom: 1px solid var(--line);
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  max-width: 28rem;
}

.footer-brand p {
  font-size: 0.875rem;
  color: var(--silver);
  line-height: 1.55;
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.footer-col h3 {
  font-size: 0.8125rem;
  font-weight: 800;
  font-stretch: 112%;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--chalk);
  margin-bottom: 0.25rem;
}

.footer-col span,
.footer-col a {
  font-size: 0.875rem;
  color: var(--silver);
  line-height: 1.5;
}

.footer-col a:hover {
  color: var(--copper);
}

.footer-bottom {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-top: 1.5rem;
  font-size: 0.75rem;
  color: var(--muted);
}

@media (min-width: 52rem) {
  .footer-columns {
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: 2.5rem;
  }

  .footer-bottom {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
  }
}

/* Barra Fixa Mobile */
.mobile-dock {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 70;
  display: grid;
  grid-template-columns: 1fr 1.65fr;
  gap: 0.5rem;
  padding: 0.625rem 0.875rem calc(0.625rem + env(safe-area-inset-bottom));
  background-color: rgba(7, 8, 10, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--line-strong);
}

.mobile-dock .btn {
  min-height: 2.75rem;
  padding: 0.625rem 0.75rem;
  font-size: 0.8125rem;
}

@media (min-width: 62rem) {
  .mobile-dock {
    display: none;
  }
}

/* ==========================================================================
   Preferência de Movimento Reduzido
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .ticker-track {
    animation: none;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}