/* SYM Brasília — landing page
   Paleta: amarelo SYM #FFBF00, vermelho SYM #DF1A2B, preto, branco.
   Sem travessões. Links somente em CTAs explícitos. */

/* Fallbacks com métricas casadas (Arial ajustado): quando a fonte web entra,
   o texto não reflui — elimina o CLS do swap. */
@font-face{font-family:'Inter Fallback';src:local('Arial');size-adjust:107.52%;ascent-override:90.10%;descent-override:22.43%;line-gap-override:0%}
@font-face{font-family:'Poppins Fallback';src:local('Arial');size-adjust:115.27%;ascent-override:91.09%;descent-override:30.36%;line-gap-override:8.68%}
@font-face{font-family:'Saira Condensed Fallback';src:local('Arial');size-adjust:82.08%;ascent-override:138.29%;descent-override:53.49%;line-gap-override:0%}
/* Saira Condensed (título do hero/botões) inline + preload: presente no 1º
   paint, sem reflow. Inter/Poppins ficam no fonts.css async. */
@font-face{font-family:'Saira Condensed';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/saira-condensed-500.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:'Saira Condensed';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/saira-condensed-700.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:'Saira Condensed';font-style:normal;font-weight:800;font-display:swap;src:url('assets/fonts/saira-condensed-800.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:'Saira Condensed';font-style:normal;font-weight:900;font-display:swap;src:url('assets/fonts/saira-condensed-900.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 {
  --sym-amarelo: #FFBF00;
  --sym-amarelo-escuro: #E5AB00;
  --sym-champanhe: #F5C870;
  --sym-vermelho: #DF1A2B;
  --preto: #0B0B0C;
  --preto-suave: #161618;
  --cinza-2: #595B61;
  --cinza-3: #8A8E96;
  --cinza-4: #C9CCD3;
  --cinza-5: #E8EAEE;
  --branco: #FFFFFF;
  --branco-suave: #F8F7F5;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --shadow-sm: 0 1px 2px rgba(11,11,12,0.06), 0 1px 3px rgba(11,11,12,0.04);
  --shadow-md: 0 8px 24px rgba(11,11,12,0.08), 0 2px 6px rgba(11,11,12,0.04);
  --shadow-lg: 0 24px 64px rgba(11,11,12,0.18), 0 4px 12px rgba(11,11,12,0.06);
  --max-w: 1240px;
  --font-display: "Saira Condensed", "Saira Condensed Fallback", system-ui, sans-serif;
  --font-body: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--preto);
  background: var(--branco);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; }

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

/* ---------- BUTTONS ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 999px;
  text-decoration: none;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.2,0.7,0.2,1),
              background 0.2s ease,
              color 0.2s ease,
              border-color 0.2s ease,
              box-shadow 0.25s ease;
  position: relative;
  overflow: hidden;
}
.btn-primary {
  background: var(--sym-amarelo);
  color: var(--preto);
  border-color: var(--sym-amarelo);
  box-shadow: 0 8px 22px rgba(255,191,0,0.28);
}
.btn-primary:hover {
  background: var(--sym-amarelo-escuro);
  border-color: var(--sym-amarelo-escuro);
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(255,191,0,0.34);
}
.btn-ghost {
  background: transparent;
  color: var(--branco);
  border-color: rgba(255,255,255,0.55);
  backdrop-filter: blur(8px);
}
.btn-ghost:hover {
  background: rgba(255,255,255,0.10);
  border-color: var(--branco);
  transform: translateY(-2px);
}
.btn-sm { padding: 10px 16px; font-size: 12px; min-height: 40px; }
.header-cta .cta-short { display: none; }
.btn-lg { padding: 16px 32px; font-size: 14.5px; }
.btn-block { width: 100%; }

/* ---------- HEADER ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(11,11,12,0.85);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  color: var(--branco);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.site-header::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--sym-amarelo) 50%, transparent 100%);
  opacity: 0.5;
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 84px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 30px;
  text-decoration: none;
  color: var(--branco);
  font-weight: 800;
  letter-spacing: 0.02em;
}
.brand-sym-logo {
  height: 42px;
  width: auto;
  display: block;
  filter: brightness(0) invert(1);
}
.brand-sym-logo-footer { height: 48px; }
/* Lockup recriado no header: emblema SYM vetorial + "Brasília" em texto,
   na mesma altura visual (texto nítido e escalável, sem raster borrado). */
/* margin-right negativo "deleta" o whitespace interno da direita do SVG (viewBox 425.2x203,
   letras "SYM" terminam em x~360); resultado: gap visual M→separador = gap separador→BRASÍLIA. */
.site-header .brand-sym-logo { height: 76px; margin-right: -24px; }
.brand-sep {
  width: 1px;
  height: 26px;
  background: rgba(255,255,255,0.30);
  flex: none;
}
.brand-v12 {
  font-family: 'Poppins', 'Poppins Fallback', sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--branco);
  white-space: nowrap;
}
.header-nav {
  display: flex;
  align-items: center;
  gap: 18px;
}
.header-link {
  color: var(--cinza-4);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}
.header-link:hover { color: var(--sym-amarelo); }

.header-phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--branco);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
}
.header-phone svg { color: var(--sym-amarelo); flex-shrink: 0; }
.header-phone:hover { color: var(--sym-amarelo); }

/* ---------- HERO ---------- */
.hero {
  position: relative;
  min-height: 640px;
  display: flex;
  align-items: center;
  color: var(--branco);
  overflow: hidden;
  background: var(--preto);
}
.hero-bg {
  position: absolute;
  inset: 0;
  background: url("assets/hero-beach.webp") center center / cover no-repeat;
  z-index: 0;
  transform: scale(1.02);
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(11,11,12,0.80) 0%, rgba(11,11,12,0.42) 38%, rgba(11,11,12,0) 65%),
    linear-gradient(180deg, rgba(11,11,12,0.10) 0%, rgba(11,11,12,0.55) 100%);
  z-index: 1;
}
.hero-inner {
  position: relative;
  z-index: 2;
  padding: 120px 24px 104px;
  width: 100%;
}
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--sym-champanhe);
  margin-bottom: 22px;
}
.hero-eyebrow::before {
  content: "";
  width: 32px;
  height: 1px;
  background: var(--sym-champanhe);
}
.hero-title {
  font-family: var(--font-display);
  font-size: clamp(48px, 6.4vw, 84px);
  line-height: 0.96;
  margin: 0 0 22px;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  max-width: 760px;
  text-shadow: 0 2px 24px rgba(0,0,0,0.45);
}
.hero-sub {
  font-size: 17px;
  color: rgba(255,255,255,0.82);
  max-width: 520px;
  margin: 0 0 40px;
  line-height: 1.55;
  text-shadow: 0 1px 8px rgba(0,0,0,0.45);
}
.hero-ctas {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

/* ---------- RÉGUA DE BENEFÍCIOS ---------- */
.regua {
  background: var(--preto);
  color: var(--branco);
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  position: relative;
  /* Reserva a altura preenchida (régua é montada por JS): evita que o conteúdo
     abaixo seja empurrado quando os itens entram — mata o CLS sob rede lenta. */
  min-height: 98px;
}
.regua::before,
.regua::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 56px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--sym-amarelo), transparent);
  opacity: 0.5;
}
.regua::before { top: -1px; }
.regua::after { bottom: -1px; }
.regua-list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  list-style: none;
  padding: 26px 0;
  margin: 0;
}
.regua-item {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 13.5px;
  letter-spacing: 0.01em;
  color: rgba(255,255,255,0.92);
  line-height: 1.35;
}
.regua-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--sym-amarelo) 0%, var(--sym-champanhe) 100%);
  color: var(--preto);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 6px 18px rgba(255,191,0,0.22), inset 0 -2px 4px rgba(0,0,0,0.10);
}
.regua-icon svg {
  width: 22px;
  height: 22px;
  display: block;
}
/* Texto título + sub: desktop renderiza inline (parece um label normal),
   o mobile empilha em 2 linhas via override no media query. */
.regua-text {
  display: inline-flex;
  flex-wrap: wrap;
  column-gap: 5px;
}
.regua-title, .regua-sub { font-weight: inherit; }

/* ---------- BLOCO MODELO ---------- */
.modelos {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,191,0,0.06) 0%, transparent 60%),
    var(--branco-suave);
  padding: 72px 0 96px;
}

/* Lineup carrossel */
.lineup-wrap {
  position: relative;
  margin-bottom: 16px;
}
.lineup-wrap::before,
.lineup-wrap::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 1px;
  width: 56px;
  z-index: 2;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.lineup-wrap::before {
  left: -1px;
  background: linear-gradient(90deg, var(--branco-suave) 0%, transparent 100%);
}
.lineup-wrap::after {
  right: -1px;
  background: linear-gradient(270deg, var(--branco-suave) 0%, transparent 100%);
}
.lineup-wrap.is-at-start::before { opacity: 0; }
.lineup-wrap.is-at-end::after { opacity: 0; }

.lineup-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--branco);
  border: 1px solid var(--cinza-4);
  box-shadow: var(--shadow-md);
  color: var(--preto);
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  cursor: pointer;
  transition: opacity 0.25s ease,
              background 0.2s ease,
              color 0.2s ease,
              border-color 0.2s ease,
              transform 0.25s cubic-bezier(0.2,0.7,0.2,1),
              box-shadow 0.25s ease;
}
.lineup-arrow:hover:not(:disabled) {
  background: var(--preto);
  color: var(--branco);
  border-color: var(--preto);
  transform: translateY(-50%) scale(1.06);
  box-shadow: var(--shadow-lg);
}
.lineup-arrow:disabled {
  opacity: 0;
  pointer-events: none;
}
.lineup-arrow-prev { left: -16px; }
.lineup-arrow-next { right: -16px; }

/* Lineup: abas de texto com sublinhado (desktop) + dropdown (mobile) */
.lineup {
  display: flex;
  gap: 0;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  border-bottom: 1px solid var(--cinza-5);
  padding: 0 4px;
}
.lineup::-webkit-scrollbar { display: none; }
.lineup-tab {
  flex: none;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 14px 4px 16px;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px; /* sobrepõe a hairline do container */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  min-width: 234px;
  transition: border-color 0.2s ease;
}
.lineup-tab img {
  width: 100%;
  max-width: 238px;
  height: 170px;
  object-fit: contain;
}
.lineup-tab-name {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cinza-3);
  white-space: nowrap;
  transition: color 0.2s ease;
}
.lineup-tab:hover .lineup-tab-name { color: var(--preto); }
.lineup-tab.is-active { border-bottom-color: var(--sym-amarelo); }
.lineup-tab.is-active .lineup-tab-name { color: var(--preto); }
/* Dropdown de modelos (substitui as abas no mobile) */
.lineup-select {
  display: none;
  width: 100%;
  padding: 12px 38px 12px 14px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  color: var(--preto);
  background-color: var(--branco);
  border: 1px solid var(--cinza-4);
  border-radius: var(--radius-md);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="%230b0b0c"><path d="M5 8l5 5 5-5z"/></svg>');
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 18px 18px;
}
@media (max-width: 720px) {
  /* Mobile: lineup vira chips compactas que QUEBRAM em 2 linhas
     (sem scroll horizontal) — garante que TODAS as opções fiquem visíveis
     sem o usuário precisar deslizar. Setas e select nativo somem. */
  .lineup-arrow,
  .lineup-select { display: none; }
  .lineup-wrap { margin-bottom: 12px; }
  .lineup {
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    padding: 4px 8px;
    overflow: visible;
    border-bottom: 0;
  }
  /* Cada .lineup-tab vira uma pílula: texto compacto, sem imagem,
     ativo destacado em amarelo SYM com texto preto. */
  .lineup-tab {
    flex-direction: row;
    align-items: center;
    min-width: 0;
    padding: 9px 16px;
    gap: 0;
    border: 1px solid var(--cinza-4);
    border-radius: 999px;
    background: var(--branco);
    transition: background .2s ease, border-color .2s ease, color .2s ease;
  }
  .lineup-tab img { display: none; }
  .lineup-tab-name {
    font-size: 12.5px;
    letter-spacing: .04em;
    color: var(--cinza-2);
  }
  .lineup-tab.is-active {
    background: var(--sym-amarelo);
    border-color: var(--sym-amarelo);
    border-bottom-color: var(--sym-amarelo);
  }
  .lineup-tab.is-active .lineup-tab-name { color: var(--preto); }
}

/* Modelo grid (esquerda ficha/diferenciais, direita modelo+cor) */
.modelo-grid { display: block; }

/* Wrapper do quadro — sem visual: cada slide é um card autônomo agora */
.modelo-info {
  display: flex;
  flex-direction: column;
}

/* Cabeçalho fixo (label da seção): nome + CTA acima dos cards */
.modelo-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding: 0 8px 18px;
  margin-bottom: 4px;
}
.modelo-head-eyebrow {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sym-vermelho);
  margin-bottom: 6px;
}
.modelo-head-title {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(28px, 3.4vw, 42px);
  line-height: 1;
  color: var(--preto);
  margin: 0;
}
.modelo-head-tagline { color: var(--cinza-2); font-size: 14px; margin: 8px 0 0; }
.modelo-head-buy { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.modelo-head-buy .btn { white-space: nowrap; }
@media (max-width: 720px) {
  .modelo-head { flex-direction: column; align-items: flex-start; gap: 16px; }
  .modelo-head-buy { width: 100%; justify-content: space-between; }
}

.pager-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 0;
  background: var(--preto);
  color: var(--branco);
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  padding: 0 0 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(11,11,12,0.18), 0 1px 3px rgba(11,11,12,0.10);
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  transition: all 0.2s cubic-bezier(0.2,0.7,0.2,1);
}
.pager-btn:hover:not(:disabled) {
  background: var(--sym-amarelo);
  color: var(--preto);
  transform: scale(1.08);
  box-shadow: 0 10px 24px rgba(255,191,0,0.35), 0 2px 6px rgba(11,11,12,0.10);
}
.pager-btn:active:not(:disabled) { transform: scale(0.96); }
.pager-btn:disabled {
  background: var(--branco);
  color: var(--cinza-3);
  border: 1px solid var(--cinza-5);
  box-shadow: none;
  cursor: not-allowed;
  opacity: 0.7;
}

/* Carrossel: modelo-page em cima, setas+progress (.modelo-controls) embaixo.
   Em desktop (≥721px), as setas saem do flow e flutuam nas laterais do page
   via position: absolute. */
.modelo-carousel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.modelo-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.modelo-controls .modelo-progress { margin-top: 0; }

/* Viewport do Embla — overflow:hidden é obrigatório pra esconder os slides
   fora da janela enquanto a track é animada via transform. */
.modelo-page {
  width: 100%;
  height: 496px;
  overflow: hidden;
  background: transparent;
  /* sombra dos cards adjacentes precisa "vazar" pra fora do trilho */
  padding: 8px 0;
  margin: -8px 0;
}

/* Container do Embla — display:flex é obrigatório. Gap + flex-basis < 100%
   no .slide cria o peek lateral em desktop. */
.slide-track {
  display: flex;
  height: 100%;
  gap: 24px;
  padding: 0 48px;            /* desktop: deixa ~32px de cada vizinho aparecer */
  touch-action: pan-y pinch-zoom;  /* libera vertical pra Embla capturar drag horizontal */
}

/* ===== QUADRO (capa FICHA + diferenciais) =====
   Cada slide é um card autônomo: fundo branco, sombra, borda arredondada. */
.slide {
  position: relative;
  flex: 0 0 calc(100% - 96px);  /* desktop: janela - 2*padding, deixando peek */
  min-width: 0;                 /* permite que o flex item encolha (Embla precisa) */
  height: 100%;
  background: var(--branco);
  border: 1px solid var(--cinza-5);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  padding: 32px;
  isolation: isolate;           /* contém o blend-mode multiply dentro do card */
}

.blend { position: relative; width: 100%; height: 100%; }
.blend img {
  width: 100%; height: 100%; object-fit: contain;
  mix-blend-mode: multiply;                 /* dissolve o fundo branco de estúdio no card */
  filter: contrast(1.04) saturate(1.03);
}

/* ===== SLIDE HERO (entrada artística do modelo) =====
   Foto full-bleed do card com overlay pra contraste; conteúdo + CTA
   posicionados embaixo-esquerda. Anula o padding herdado de .slide. */
.slide-hero { padding: 0; overflow: hidden; }
.slide-hero-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* --hero-pos é setado por modelo via inline style (data.js → script.js).
     Default 22% center serve só de fallback. No mobile, --hero-pos-mobile
     sobrescreve quando definido (composição muda em portrait). */
  object-position: var(--hero-pos, 22% center);
  transform: scale(1.02);
  transition: transform 6s ease-out;
  z-index: 0;
}
.slide-hero:hover .slide-hero-bg { transform: scale(1.06); }
.slide-hero-overlay {
  position: absolute; inset: 0;
  /* Influencer fica sempre à esquerda da foto; overlay escurece a direita
     (onde mora o texto/CTA) e deixa o lado dela limpo. */
  background:
    linear-gradient(180deg, transparent 0%, transparent 55%, rgba(11,11,12,0.30) 100%),
    linear-gradient(90deg, transparent 0%, transparent 38%, rgba(11,11,12,0.60) 100%);
  z-index: 1;
}
.slide-hero-content {
  position: absolute;
  right: 0; bottom: 0;
  z-index: 2;
  padding: 36px 44px 32px;
  max-width: 58%;
  display: flex; flex-direction: column; align-items: flex-end;
  text-align: right;
  color: var(--branco);
}
.slide-hero-eyebrow {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--sym-amarelo);
  margin-bottom: 12px;
  position: relative;
  padding-right: 38px;
}
.slide-hero-eyebrow::before {
  content: "";
  position: absolute;
  right: 0; top: 50%;
  width: 28px; height: 2px;
  background: var(--sym-amarelo);
  transform: translateY(-50%);
}
.slide-hero-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(38px, 5vw, 64px);
  line-height: 0.95;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin: 0;
  text-shadow: 0 2px 24px rgba(0,0,0,0.45);
}
.slide-hero-sub {
  font-family: var(--font-text, var(--font-display));
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.45;
  margin: 12px 0 22px;
  color: rgba(255,255,255,0.92);
  text-shadow: 0 1px 12px rgba(0,0,0,0.55);
}
.slide-hero-cta {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 13px 22px;
  background: var(--sym-amarelo);
  color: var(--preto);
  border: 0;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(255,191,0,0.30);
  transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s ease, background .2s ease;
}
.slide-hero-cta svg {
  transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
.slide-hero-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(255,191,0,0.40);
}
.slide-hero-cta:hover svg { transform: translateX(4px); }

/* capa: ficha + moto + seletor de cores */
.cover { display: grid; grid-template-columns: 1.05fr .95fr; gap: 34px; align-items: center; height: 100%; }
.cover-info { min-width: 0; }
.cover-kicker {
  font-family: var(--font-display); font-size: 12px; font-weight: 800;
  letter-spacing: .22em; text-transform: uppercase; color: var(--sym-amarelo-escuro); margin-bottom: 14px;
}
/* Ficha no card: prévia com os 5 primeiros specs + botão "Ver ficha completa"
   que abre o modal com a lista inteira. Lista completa cresce com o modelo,
   logo ela é tratada como conteúdo do modal (não do card). */
.spec { display: grid; grid-template-columns: 1fr; gap: 0; }
.spec .row { padding: 10px 0; border-bottom: 1px solid var(--cinza-5); display: flex; flex-direction: column; gap: 3px; }
.spec .row:nth-child(n+6) { display: none; }
.spec .row:nth-child(5) { border-bottom: none; }
.spec .k { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--cinza-3); font-weight: 700; }
.spec .v { font-size: 14.5px; font-weight: 600; color: var(--preto); }

/* Botão "Ver ficha completa" — visível em todas as telas (abre o modal) */
.spec-fullbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 18px;
  padding: 11px 18px;
  background: transparent;
  color: var(--preto);
  border: 1.5px solid var(--cinza-4);
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.spec-fullbtn:hover,
.spec-fullbtn:active {
  background: var(--preto);
  color: var(--branco);
  border-color: var(--preto);
}
.cover-media { display: flex; flex-direction: column; justify-content: center; }
.cover-figure { position: relative; height: 320px; }
.cover-colors { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 18px; flex-wrap: wrap; }
.cover-colors-label { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--cinza-3); font-weight: 700; }
.cover-swatches { display: flex; gap: 8px; }
.cover-color-name { font-size: 13px; color: var(--cinza-2); font-weight: 600; }

/* diferenciais: 1 por slide, foto em destaque (coluna maior + altura maior) */
.feats { display: flex; flex-direction: column; justify-content: center; height: 100%; }
.feat { display: grid; grid-template-columns: 1.55fr 1fr; gap: 40px; align-items: center; }
/* Foto é a estrela: ocupa praticamente toda a altura útil do card. */
.feat-media {
  position: relative;
  height: 420px;
  border-radius: var(--radius-md);
  overflow: hidden;
}
.feat-media .blend,
.feat-media .blend img { width: 100%; height: 100%; }
.feat-media .blend img { object-fit: cover; }
.feat-no { font-family: var(--font-display); font-weight: 900; font-size: 13px; letter-spacing: .2em; color: var(--sym-amarelo-escuro); }
.feat-text h3 {
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(26px,2.8vw,36px); line-height: 1.05; margin: 10px 0 14px; color: var(--preto);
}
.feat-text p { font-size: 16px; line-height: 1.6; color: var(--cinza-2); margin: 0; }

/* progresso (pontos) */
.modelo-progress { display: flex; gap: 7px; justify-content: center; margin-top: 12px; }
.modelo-progress button {
  width: 30px; height: 6px; border-radius: 3px; border: none; padding: 0; cursor: pointer;
  background: rgba(11,11,12,.20); transition: all .3s cubic-bezier(.22,.61,.36,1);
}
.modelo-progress button:hover { background: rgba(11,11,12,.34); }
.modelo-progress button.on { background: var(--sym-amarelo); width: 48px; }

@media (max-width: 1024px) {
  .cover { grid-template-columns: 1fr; gap: 22px; }
  .cover-media { order: -1; }
  .cover-figure { height: 280px; }
  .modelo-page { min-height: 0; }
}
@media (max-width: 720px) {
  .feat { grid-template-columns: 1fr; gap: 18px; }
  .feat-media { height: 280px; }
}
/* Swatches de cor (usados na capa FICHA via .cover-swatches > .swatch) */
.swatch {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--cinza-4);
  cursor: pointer;
  padding: 0;
  position: relative;
  outline: none;
  transition: transform 0.25s cubic-bezier(0.2,0.7,0.2,1), box-shadow 0.2s ease;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.10), 0 2px 6px rgba(11,11,12,0.10);
}
.swatch:hover { transform: scale(1.12); }
.swatch.is-active {
  box-shadow: 0 0 0 3px var(--sym-amarelo), inset 0 2px 4px rgba(0,0,0,0.10);
  border-color: var(--branco);
  transform: scale(1.05);
}

/* ---------- CONTATO ---------- */
.contato {
  background:
    radial-gradient(ellipse at 100% 0%, rgba(255,191,0,0.05), transparent 50%),
    var(--branco);
  padding: 88px 0 96px;
  border-top: 1px solid var(--cinza-5);
}
.contato-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 44px;
}
.contato-title {
  font-family: var(--font-display);
  font-size: clamp(34px, 3.6vw, 48px);
  font-weight: 800;
  margin: 0 0 12px;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  line-height: 1.05;
}
.contato-sub {
  color: var(--cinza-2);
  margin: 0 0 28px;
  font-size: 15.5px;
  max-width: 460px;
}
.unidade-card {
  display: flex;
  gap: 14px;
  background: var(--branco-suave);
  padding: 18px 20px;
  border-radius: var(--radius-lg);
  margin-bottom: 16px;
  border: 1px solid var(--cinza-5);
  box-shadow: var(--shadow-sm);
}
.unidade-pin {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: var(--sym-amarelo);
  color: var(--preto);
}
.unidade-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.unidade-text strong { font-size: 15px; letter-spacing: 0.01em; }
.unidade-text span { font-size: 13px; color: var(--cinza-2); }
.unidade-text .unidade-rua { color: var(--preto); font-weight: 500; }
.unidade-text .unidade-sep { color: var(--cinza-3, #999); font-weight: 400; }
.unidade-text .unidade-tel { color: var(--preto); font-weight: 500; }
.unidade-link {
  margin-top: 8px;
  align-self: flex-start;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--preto);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}
.unidade-link:hover { color: var(--sym-amarelo-escuro, #b58200); }

.mapa {
  width: 100%;
  height: 300px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--cinza-5);
  border: 1px solid var(--cinza-5);
  box-shadow: var(--shadow-sm);
}
.mapa iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  filter: grayscale(20%) contrast(1.02);
}
/* Facade do mapa: captura estática (lazy, self-hosted); a iframe real entra no clique */
.mapa-facade {
  position: relative;
  width: 100%;
  height: 100%;
  border: 0;
  margin: 0;
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  background: #e8eaed;
}
.mapa-facade-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.mapa-facade-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, rgba(11,11,12,0.04) 0%, rgba(11,11,12,0.16) 100%);
  transition: background 0.2s ease;
}
.mapa-facade-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: 999px;
  background: rgba(11,11,12,0.82);
  color: var(--branco, #fff);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  box-shadow: 0 6px 18px rgba(11,11,12,0.28);
  transition: transform 0.2s ease, background 0.2s ease;
}
.mapa-facade-pill svg { color: var(--sym-amarelo, #ffce00); flex: none; }
.mapa-facade:hover .mapa-facade-overlay { background: linear-gradient(180deg, rgba(11,11,12,0.10) 0%, rgba(11,11,12,0.24) 100%); }
.mapa-facade:hover .mapa-facade-pill { transform: translateY(-1px); background: var(--preto, #0b0b0c); }
.mapa-facade:focus-visible { outline: 3px solid var(--sym-amarelo, #ffce00); outline-offset: -3px; }

/* Form */
.form-fixo {
  background:
    radial-gradient(ellipse at 100% 0%, rgba(255,191,0,0.10), transparent 50%),
    linear-gradient(160deg, var(--preto-suave) 0%, var(--preto) 100%);
  color: var(--branco);
  border-radius: var(--radius-xl);
  padding: 36px 32px;
  position: sticky;
  top: 100px;
  align-self: start;
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(255,255,255,0.06);
}
.form-title {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 800;
  margin: 0 0 6px;
  text-transform: uppercase;
  letter-spacing: -0.005em;
}
.form-sub { font-size: 13px; color: rgba(255,255,255,0.65); margin: 0 0 22px; }
.field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.field > span {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--cinza-4);
  font-weight: 600;
}
.field input,
.field select {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--branco);
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  outline: none;
  font-family: inherit;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
/* Lista do dropdown nativo: popup tem fundo claro do SO, então
   forçamos fundo escuro + texto claro para as opções ficarem visíveis. */
.field select option,
.field select optgroup {
  background: var(--preto-suave);
  color: var(--branco);
}
.field select option:disabled {
  color: var(--cinza-3);
}
.field input:hover,
.field select:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.20);
}
.field input:focus,
.field select:focus {
  background: rgba(255,255,255,0.08);
  border-color: var(--sym-amarelo);
  box-shadow: 0 0 0 3px rgba(255,191,0,0.18);
}
.field > span {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgba(255,255,255,0.55);
  font-weight: 600;
}
.checkbox {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 12.5px;
  color: var(--cinza-4);
  margin: 6px 0 14px;
}
.checkbox input { margin-top: 2px; }
.form-status { font-size: 13px; margin: 10px 0 0; min-height: 18px; }
.form-status.is-success { color: #6EE7B7; }
.form-status.is-error { color: #FCA5A5; }

/* ---------- FOOTER ---------- */
.site-footer {
  background: linear-gradient(180deg, var(--preto-suave) 0%, var(--preto) 100%);
  color: rgba(255,255,255,0.65);
  padding: 64px 0 36px;
  border-top: 1px solid rgba(255,191,0,0.30);
  position: relative;
}
.site-footer::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 64px;
  height: 2px;
  background: var(--sym-amarelo);
  box-shadow: 0 0 18px rgba(255,191,0,0.6);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr 1fr 1.4fr;
  gap: 40px;
}
.footer-col h4 {
  color: var(--branco);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  margin: 0 0 16px;
  font-weight: 700;
}
.footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.footer-col li a {
  color: rgba(255,255,255,0.65);
  text-decoration: none;
  font-size: 14px;
  transition: color 0.2s ease, transform 0.2s ease;
  display: inline-block;
}
.footer-col li a:hover { color: var(--sym-amarelo); transform: translateX(2px); }
.footer-selos { display: flex; gap: 18px; align-items: center; }
.footer-selos img { width: 84px; height: auto; }
.footer-legal { font-size: 13px; color: rgba(255,255,255,0.55); max-width: 280px; margin: 16px 0 0; line-height: 1.6; }
.footer-legal-block p { font-size: 12.5px; color: rgba(255,255,255,0.55); margin: 0 0 10px; line-height: 1.6; }
.site-footer .footer-copy { color: rgba(255,255,255,0.40); font-size: 11.5px; letter-spacing: 0.04em; margin-top: 14px; }

/* ---------- MODAL FICHA TÉCNICA ---------- */
.ficha-dialog {
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--branco);
  padding: 0;
  max-width: 560px;
  width: calc(100% - 32px);
  max-height: 90vh;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.ficha-dialog::backdrop {
  background: rgba(11,11,12,0.55);
  backdrop-filter: blur(2px);
}
.ficha-dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--cinza-5);
}
.ficha-dialog-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--preto);
}
.ficha-dialog-close {
  width: 36px; height: 36px;
  border: 0; background: transparent;
  font-size: 26px; line-height: 1;
  color: var(--cinza-2); cursor: pointer;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, color 0.2s ease;
}
.ficha-dialog-close:hover { background: var(--cinza-5); color: var(--preto); }
.ficha-dialog-body {
  padding: 16px 24px 24px;
  overflow-y: auto;
  max-height: calc(90vh - 70px);
}
.ficha-dialog-body .spec { grid-template-columns: 1fr; }
/* Modal mostra TODAS as rows, anulando a regra mobile que esconde no card */
.ficha-dialog-body .spec .row:nth-child(n+6) { display: flex; }
.ficha-dialog-body .spec .row { border-bottom: 1px solid var(--cinza-5); }
.ficha-dialog-body .spec .row:last-child { border-bottom: none; }

/* ---------- RESPONSIVE ---------- */
/* ===== TABLET + MOBILE (até 1024px): slide full-bleed sem peek =====
   Cobre todo o range "não-desktop". Acima de 1024 a LP volta pro layout
   com peek lateral e card menor. Em 721–1024 o conteúdo interno do slide
   continua usando os layouts desktop (cover/feat horizontais); só o
   contêiner do slide vira full-width. */
@media (max-width: 1024px) {
  .modelo-grid { grid-template-columns: 1fr; }
  /* Trilho do carrossel full-bleed: width estendido + margin negativo combinados.
     Só margin negativo não amplia o box; precisa do width calc pra realmente
     ocupar a largura inteira da viewport (escapando do padding 24px do .container). */
  .modelo-page {
    height: auto;
    /* reserva a altura do carrossel (montado por JS) p/ não empurrar o conteúdo (anti-CLS) */
    min-height: 479px;
    width: calc(100% + 48px);
    margin: 0 -24px;
  }
  .slide-track { gap: 0; padding: 0; }
  /* Slide ocupa 100% da largura sem peek; min-height genérico que dá altura
     adequada pro conteúdo do hero (que é todo position: absolute). */
  .slide {
    flex: 0 0 100%;
    height: auto;
    min-height: 580px;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    box-shadow: none;
  }
  /* Setas e progress empilhados embaixo, navegação discreta — swipe nativo
     já cobre a troca de slide. Em desktop (≥1025) as setas voltam pras laterais. */
  .modelo-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
  }
  .modelo-controls .modelo-progress { flex: 1; margin-top: 0; }
  .pager-btn {
    width: 38px; height: 38px;
    font-size: 18px;
    background: transparent;
    border: 1px solid var(--cinza-5);
    color: var(--cinza-2);
    box-shadow: none;
  }
  .pager-btn:hover:not(:disabled),
  .pager-btn:active:not(:disabled) {
    background: var(--cinza-6, var(--branco-suave));
    color: var(--preto);
  }
  .pager-btn:disabled { opacity: 0.35; }
  /* Dots compactos pra caber até 9 slides na faixa entre as duas setas
     (largura útil ~234px com a régua de container 342 + 2×38 setas + 32 gap). */
  .modelo-progress { gap: 5px; }
  .modelo-progress button { width: 18px; height: 14px; }
  .modelo-progress button.on { width: 28px; }

  .contato-grid { grid-template-columns: 1fr; }
  .form-fixo { position: static; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  /* ===== HEADER COMPACTO ===== */
  html { scroll-padding-top: 68px; }
  .header-inner { height: 56px; }
  .header-nav .header-link { display: none; }
  .site-header .brand-sym-logo { height: 44px; }
  .brand-sep,
  .brand-v12 { display: none; }
  .header-cta .cta-long { display: none; }
  .header-cta .cta-short { display: inline; }
  .header-phone span { display: none; }
  .header-phone { gap: 0; }
  .header-phone svg { width: 20px; height: 20px; }
  .btn-sm { padding: 9px 14px; font-size: 12.5px; }

  /* ===== HERO ===== */
  .hero { min-height: 420px; }
  .hero-bg { background-position: 65% center; }
  .hero-overlay { background: linear-gradient(180deg, rgba(10,10,10,0.55) 0%, rgba(10,10,10,0.78) 100%); }
  .hero-inner { padding: 48px 20px; }

  /* ===== RÉGUA (mobile) =====
     Manchete (1º item) em largura total + 2x2 grid pros outros 4.
     Hierarquia substitui simetria — sem orfão, com argumento de venda em destaque. */
  .regua { min-height: 243px; } /* reserva a altura preenchida no mobile (anti-CLS) */
  .regua-list {
    display: grid;
    grid-template-columns: repeat(2, 150px);
    justify-content: center;
    column-gap: 24px;
    row-gap: 18px;
    padding: 32px 0;
  }
  .regua-item {
    gap: 14px;
    font-size: 13px;
    line-height: 1.25;
    align-items: center;
  }
  /* Mobile: empilha título e sub em 2 linhas (padrão título) — altura uniforme entre cards. */
  .regua-text {
    flex-direction: column;
    column-gap: 0;
    line-height: 1.15;
  }
  .regua-title {
    font-weight: 500;
    font-size: 14px;
  }
  .regua-sub {
    font-weight: 500;
    font-size: 12px;
    color: rgba(255,255,255,0.72);
    margin-top: 1px;
  }
  /* Manchete: span 2 colunas, caixa alta centralizada, separador hairline embaixo. */
  .regua-item:first-child {
    grid-column: 1 / -1;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding-bottom: 16px;
    margin-bottom: 2px;
    border-bottom: 1px solid rgba(255,255,255,0.10);
  }
  .regua-item:first-child .regua-icon { width: 46px; height: 46px; }
  .regua-item:first-child .regua-icon svg { width: 23px; height: 23px; }
  /* Anula a regra antiga do 5º item (centralizava na grade 2x3 antiga);
     o justify-content agora vem do .regua-item base (center). */
  .regua-item:nth-child(5):last-child { grid-column: auto; }
  .regua-icon { width: 38px; height: 38px; }
  .regua-icon svg { width: 19px; height: 19px; }

  /* ===== QUADRO DE MODELO ===== */
  /* Padding generoso da seção desktop não cabe no mobile; comprime pra liberar
     altura útil pro card do carrossel. */
  .modelos { padding: 24px 0 32px; }
  .modelo-head { gap: 10px; padding: 0 6px 10px; margin-bottom: 0; }
  .modelo-head-tagline { margin-top: 2px; min-height: 22px; } /* reserva 1 linha (anti-CLS) */
  .modelo-head-buy { width: 100%; }
  .modelo-head-buy .btn { width: 100%; text-align: center; padding: 12px 18px; font-size: 13.5px; min-height: 46px; }
  .modelo-carousel { gap: 12px; }

  /* Slide mobile: min-height bem enxuto e padding interno menor
     (full-bleed/borda/shadow já vêm do bloco max-1024). */
  .slide {
    min-height: 460px;
    padding: 18px 16px;
  }
  /* .cover (FICHA) centraliza verticalmente quando o card é mais alto que o conteúdo */
  .cover { align-content: center; }

  /* Cover mobile: foto compacta; ficha mostra 3 specs (resto via modal). */
  .cover { gap: 8px; }
  .cover-figure { height: 110px; }
  .cover-kicker { font-size: 11px; margin-bottom: 4px; }
  .cover-colors { margin-top: 6px; }
  .spec .row { padding: 6px 0; }
  .spec .row:nth-child(n+4) { display: none; }
  .spec .row:nth-child(3) { border-bottom: none; }
  .spec-fullbtn { margin-top: 8px; padding: 8px 14px; font-size: 11.5px; }

  /* Diferenciais compactos: foto + texto bem condensado pra caber em 460px. */
  .feats { gap: 14px; }
  .feat + .feat { padding-top: 14px; }
  .feat-media { height: 190px; }
  .feat-text h3 { font-size: clamp(18px,4.5vw,22px); margin: 6px 0 6px; line-height: 1.1; }
  .feat-text p { font-size: 13.5px; line-height: 1.45; }
  .feat-no { font-size: 11px; }

  /* Hero mobile: mais largura pro texto, padding menor */
  .slide-hero-content { padding: 22px 20px 22px; max-width: 72%; }
  .slide-hero-eyebrow { padding-right: 24px; font-size: 11px; margin-bottom: 8px; }
  .slide-hero-eyebrow::before { width: 18px; }
  .slide-hero-sub { margin: 8px 0 16px; }
  .slide-hero-cta { padding: 12px 18px; font-size: 12px; }
  /* Override do crop pra mobile (composição portrait pede ponto diferente
     do desktop). Cai pro --hero-pos do desktop se mobile não definido. */
  .slide-hero-bg { object-position: var(--hero-pos-mobile, var(--hero-pos, 22% center)); }

  /* Modal fullscreen no mobile */
  .ficha-dialog {
    width: 100%;
    max-width: none;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
    margin: 0;
  }
  .ficha-dialog-body { max-height: calc(100vh - 70px); }

  /* Swatches: 40px (≥44 com hit area do botão) */
  .swatch { width: 40px; height: 40px; }
  .cover-colors { gap: 14px; margin-top: 14px; }

  /* ===== CONTATO / FORM ===== */
  .contato { padding: 56px 0 64px; }
  .contato-grid { gap: 24px; }
  .unidade-card { padding: 14px 16px; gap: 12px; margin-bottom: 12px; }
  .unidade-pin { width: 32px; height: 32px; }
  .unidade-pin svg { width: 18px; height: 18px; }
  .unidade-text strong { font-size: 14.5px; }
  .unidade-text .unidade-rua { font-size: 13.5px; }
  .unidade-text .unidade-cidade { font-size: 12.5px; }
  .unidade-link { font-size: 12px; margin-top: 6px; }
  .mapa { height: 260px; border-radius: 14px; }
  .form-fixo { padding: 28px 22px; }
  .field input,
  .field select { padding: 13px 14px; font-size: 16px; }  /* 16px previne zoom no iOS */
  .checkbox { gap: 12px; align-items: flex-start; }
  .checkbox input { width: 20px; height: 20px; margin-top: 1px; flex: none; }
  .btn-lg { padding: 14px 22px; font-size: 14px; min-height: 48px; }

  /* ===== FOOTER ===== */
  .footer-grid { grid-template-columns: 1fr; }
}

/* DESKTOP only: setas como overlay lateral sobre o modelo-page,
   centradas verticalmente na altura fixa de 496px (top: 248 - btn/2).
   Em ≤1024 (tablet/mobile) o pager fica empilhado embaixo (no fluxo). */
@media (min-width: 1025px) {
  #pager-prev,
  #pager-next {
    position: absolute;
    top: 224px;  /* 248 (centro) - 24 (metade da seta 48px) */
    z-index: 2;
  }
  #pager-prev { left: -24px; }
  #pager-next { right: -24px; }
}

/* Foco visível para acessibilidade */
.btn:focus-visible,
.lineup-tab:focus-visible,
.swatch:focus-visible,
.pager-btn:focus-visible,
.modelo-progress button:focus-visible,
.spec-fullbtn:focus-visible,
.ficha-dialog-close:focus-visible {
  outline: 3px solid var(--sym-amarelo);
  outline-offset: 2px;
}

/* Respeito a prefers-reduced-motion: desativa animações e scroll smooth */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}