/* ==========================================================================
   YADEA · sistema de design
   Tokens e componentes do "YADEA Campinas — Styleguide v1.0" (o mesmo de
   todas as unidades) (tokens.css é a
   fonte), sobre a estrutura do framework estático KOM/Urbana/Green.
   Tese visual: tecnologia nº 1 do mundo, atendimento do bairro. Grafite e
   papel, UMA cor de ação (o laranja do símbolo), Archivo expandida ecoando
   as letras largas do logotipo. O produto é o herói de cada tela.
   Ordem: tokens · base · tipografia · layout · componentes · seções ·
   overlays · motion
   ========================================================================== */

/* Archivo variável (latin), do próprio domínio. `swap`: o texto aparece na
   hora; com o preload do <head>, a fonte quase sempre chega antes. */
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-latin-var.woff2") format("woff2");
  font-weight: 400 800;
  font-stretch: 100% 125%;
  font-style: normal;
  font-display: swap;
}

/* Fallback com as medidas da Archivo, para a troca de fonte não mexer no
   layout (CLS). Medido (06/11/2026): na largura 100 a Archivo tem ~100% da
   largura da Arial; na 125 (títulos), ~127%. Uma face por largura: o
   navegador escolhe pela font-stretch do elemento. Sem descritor de peso, o
   negrito é sintetizado da Arial regular — no Windows, peso 800 viraria a
   Arial Black, bem mais larga. Roboto cobre o Android, que não tem Arial. */
@font-face {
  font-family: "Archivo Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Helvetica"), local("Roboto");
  font-stretch: 100%;
  size-adjust: 100%;
}
@font-face {
  font-family: "Archivo Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Helvetica"), local("Roboto");
  font-stretch: 125%;
  size-adjust: 127%;
}

:root {
  /* Cores — marca (tokens.css do styleguide, sem alteração) */
  --yd-orange-500: #EB5F1B;  /* ação, símbolo, números */
  --yd-orange-700: #BF4509;  /* laranja como texto sobre claro (5.2:1) */
  --yd-orange-400: #F47B3F;  /* hover do botão primário */
  --yd-orange-100: #FDEADF;  /* fundos de badge, blocos suaves */
  --yd-ink: #171717;
  --yd-ink-800: #222222;
  --yd-ink-700: #333333;
  --yd-black: #000000;
  /* Neutros e sistema */
  --yd-paper: #F6F5F3;
  --yd-mist: #ECEAE7;
  --yd-line: #E2DFDB;
  --yd-stone: #6B6B6B;
  --yd-slate: #474747;
  --yd-white: #FFFFFF;
  --yd-whatsapp: #25D366;
  --yd-star: #F5B301;
  --yd-danger: #D23C3C;
  /* Texto sobre superfícies escuras */
  --yd-on-dark: #FFFFFF;
  --yd-on-dark-2: #C8C8C8;
  --yd-on-dark-3: #9A9A9A;
  /* Derivados (bordas sobre escuro, vidro) */
  --yd-line-dark: rgba(255, 255, 255, .12);
  --yd-ink-92: rgba(23, 23, 23, .92);
  --yd-danger-claro: #F08080; /* danger sobre grafite, 6.2:1 */

  /* Tipografia — Archivo (eixos wdth 100–125, wght 400–800) */
  --yd-font: "Archivo", "Archivo Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  --yd-wide: 125%;
  --yd-normal: 100%;
  --fs-display: clamp(2.25rem, 1.1rem + 4vw, 5rem);
  --fs-h1: clamp(1.75rem, 1.2rem + 2.4vw, 3.5rem);
  --fs-h2: clamp(1.375rem, 1.05rem + 1.6vw, 2.5rem);
  --fs-h3: clamp(1.25rem, 1rem + .8vw, 1.75rem);
  --fs-h4: clamp(1.0625rem, .9rem + .4vw, 1.25rem);
  --fs-body-l: 1.125rem;
  --fs-body: 1rem;
  --fs-small: .8125rem;
  --fs-eyebrow: .75rem;

  /* Espaçamento (base 4) */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-6: 24px; --sp-8: 32px;
  --sp-12: 48px; --sp-16: 64px; --sp-24: 96px; --sp-32: 128px;
  --section-y: clamp(64px, 8vw, 128px);
  --container: 1280px;
  --gutter: clamp(20px, 4vw, 40px);

  /* Raios — família do ícone de app */
  --r-sm: 8px; --r-md: 12px; --r-lg: 24px; --r-xl: 32px; --r-icon: 26%; --r-pill: 999px;

  /* Sombras */
  --sh-sm: 0 1px 2px rgba(23, 23, 23, .06), 0 2px 8px rgba(23, 23, 23, .04);
  --sh-md: 0 8px 24px rgba(23, 23, 23, .08);
  --sh-lg: 0 24px 60px rgba(23, 23, 23, .14);
  --sh-glow: 0 10px 30px rgba(235, 95, 27, .35);

  /* Movimento */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur-1: 150ms; --dur-2: 250ms; --dur-3: 320ms;

  /* Foco */
  --focus: 3px solid var(--yd-orange-500);
  --focus-offset: 3px;

  /* Layout */
  --yd-header: 80px;
}

@media (max-width: 860px) {
  :root { --yd-header: 64px; }
}
/* Abaixo de 360 px (iPhone SE 1ª geração e similares): uma palavra longa em
   caixa alta expandida ("AUTOPROPELIDOS") passava de 280 px úteis. */
@media (max-width: 359px) {
  :root { --fs-h2: 1.3125rem; --fs-h1: 1.5rem; --fs-h3: 1.125rem; }
}

/* Escala do celular: menos grito, mais respiro. Texto de apoio em 16 px,
   eyebrows menores e mais juntos (não quebram em duas linhas), cabeçalhos
   de seção com menos margem. */
@media (max-width: 560px) {
  :root { --fs-body-l: 1rem; --fs-eyebrow: .6875rem; }
  .eyebrow { letter-spacing: .12em; gap: 8px; }
  .eyebrow::before { width: 14px; }
  .cabecalho { gap: var(--sp-3); margin-bottom: var(--sp-8); }
  .t-lead { line-height: 1.6; }
}

/* ── base ──────────────────────────────────────────────────────────────── */

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

/* Componentes com display próprio venceriam o [hidden] do user-agent. */
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--yd-header) + var(--sp-6));
  -webkit-text-size-adjust: 100%;
  background: var(--yd-ink);
}

/* Lenis ativo (desktop): o smooth nativo sai, senão os dois disputam. */
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }
html.lenis { scroll-behavior: auto !important; }

body {
  margin: 0;
  background: var(--yd-paper);
  color: var(--yd-ink);
  font-family: var(--yd-font);
  font-size: var(--fs-body);
  font-weight: 400;
  font-stretch: var(--yd-normal);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
body.is-locked { overflow: hidden; }

img, svg, video { display: block; max-width: 100%; }
img, video { height: auto; }
button { font: inherit; color: inherit; cursor: pointer; }
strong, b { font-weight: 700; }

a { color: var(--yd-orange-700); text-underline-offset: 4px; text-decoration-thickness: 1px; }
a:hover { color: var(--yd-ink); }

::selection { background: var(--yd-orange-500); color: var(--yd-ink); }

/* Foco visível do styleguide: 3 px laranja, afastado 3 px. Laranja sobre
   branco dá 3.4:1 (passa o 3:1 de componente); sobre grafite, 5.3:1. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: var(--focus);
  outline-offset: var(--focus-offset);
  border-radius: 6px;
}

.u-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.u-skip {
  position: absolute;
  left: var(--sp-4);
  top: -120px;
  z-index: 200;
  padding: var(--sp-3) var(--sp-6);
  border-radius: var(--r-md);
  background: var(--yd-orange-500);
  color: var(--yd-ink);
  font-weight: 700;
  font-size: var(--fs-small);
  text-decoration: none;
  transition: top var(--dur-2) var(--ease);
}
.u-skip:focus { top: var(--sp-4); }

/* ── tipografia ────────────────────────────────────────────────────────── */

/* Largura 125 em títulos, números, botões e eyebrows (ecoa o logotipo);
   largura 100 no texto corrido. A hierarquia vem de largura, peso e caixa. */
.t-display, .t-h1, .t-h2, .t-h3, .btn, .eyebrow { font-stretch: var(--yd-wide); }

.t-display, .t-h1, .t-h2, .t-h3, .t-h4 { margin: 0; color: inherit; text-wrap: balance; }
.t-display { font-size: var(--fs-display); font-weight: 800; line-height: .95; text-transform: uppercase; }
.t-h1 { font-size: var(--fs-h1); font-weight: 800; line-height: 1; text-transform: uppercase; }
.t-h2 { font-size: var(--fs-h2); font-weight: 800; line-height: 1.05; text-transform: uppercase; }
.t-h3 { font-size: var(--fs-h3); font-weight: 700; line-height: 1.15; text-transform: uppercase; }
.t-h4 { font-size: var(--fs-h4); font-weight: 700; line-height: 1.3; }

.t-lead {
  margin: 0;
  max-width: 62ch;
  font-size: var(--fs-body-l);
  line-height: 1.65;
  color: var(--yd-slate);
  text-wrap: pretty;
}
.t-body { margin: 0; max-width: 66ch; color: var(--yd-slate); text-wrap: pretty; }
.t-small { margin: 0; font-size: var(--fs-small); line-height: 1.6; color: var(--yd-stone); }

/* Laranja em título: só a partir de 24 px sobre claro (3.4:1); sobre
   grafite, qualquer tamanho (5.3:1). */
.t-laranja { color: var(--yd-orange-500); }

/* Eyebrow: Archivo expandida 700, 12 px, +0.16em, com o traço do símbolo. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  margin: 0;
  color: var(--yd-orange-700);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.eyebrow::before {
  content: "";
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--yd-orange-500);
  flex: none;
}
.eyebrow--escuro, .s-escura .eyebrow { color: var(--yd-orange-500); }

/* Superfícies: o fundo alterna grafite e claro para marcar o ritmo
   (styleguide, seção 09). */
.s-clara { background: var(--yd-paper); color: var(--yd-ink); }
.s-branca { background: var(--yd-white); color: var(--yd-ink); }
.s-escura { background: var(--yd-ink); color: var(--yd-on-dark); }
.s-escura .t-lead,
.s-escura .t-body { color: var(--yd-on-dark-2); }
.s-escura .t-small { color: var(--yd-on-dark-3); }
.s-escura a:not(.btn) { color: var(--yd-orange-500); }
.s-escura a:not(.btn):hover { color: var(--yd-orange-400); }

/* ── layout ────────────────────────────────────────────────────────────── */

.u-container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.u-secao { padding-block: var(--section-y); }

.cabecalho {
  display: grid;
  gap: var(--sp-4);
  max-width: 760px;
  margin-bottom: var(--sp-12);
}
.cabecalho--centro { margin-inline: auto; text-align: center; justify-items: center; }
.cabecalho--centro .t-lead { margin-inline: auto; }

.u-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }

.link-seta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  text-decoration: none;
}
.link-seta svg { width: 16px; height: 16px; transition: transform var(--dur-2) var(--ease); }
.link-seta:hover svg { transform: translateX(3px); }

/* ── botões ────────────────────────────────────────────────────────────── */

/* Altura mínima 48 px; Archivo expandida 700, caixa alta, +0.06em; raio 12
   (styleguide, seção 06). No laranja o texto é GRAFITE (5.3:1): branco sobre
   laranja não passa no contraste em tamanho de botão. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  max-width: 100%;
  padding: 0 26px;
  border: 1.5px solid transparent;
  border-radius: var(--r-md);
  font-family: var(--yd-font);
  font-weight: 700;
  font-size: 13px;
  line-height: 1.1;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease),
              border-color var(--dur-1) var(--ease), box-shadow var(--dur-2) var(--ease),
              transform var(--dur-2) var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn .seta { transition: transform var(--dur-2) var(--ease); }
.btn:hover .seta { transform: translateX(3px); }

/* Estados: hover = clarear + elevar 2 px. */
.btn--primario { background: var(--yd-orange-500); color: var(--yd-ink); }
.btn--primario:hover { background: var(--yd-orange-400); color: var(--yd-ink); box-shadow: var(--sh-glow); transform: translateY(-2px); }

.btn--escuro { background: var(--yd-ink); color: var(--yd-white); }
.btn--escuro:hover { background: var(--yd-ink-700); color: var(--yd-white); transform: translateY(-2px); }

.btn--contorno { border-color: var(--yd-ink); color: var(--yd-ink); background: transparent; }
.btn--contorno:hover { background: var(--yd-ink); color: var(--yd-white); transform: translateY(-2px); }

/* Contorno laranja: ação secundária sobre escuro. */
.btn--contorno-claro { border-color: var(--yd-orange-500); color: var(--yd-orange-500); background: transparent; }
.btn--contorno-claro:hover { background: var(--yd-orange-500); color: var(--yd-ink); transform: translateY(-2px); }

.btn--whats { background: var(--yd-whatsapp); color: var(--yd-ink); }
.btn--whats:hover { background: #3EE07D; color: var(--yd-ink); transform: translateY(-2px); }

.btn--link {
  min-height: 44px;
  padding: 0 2px;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--yd-orange-700);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}
.btn--link:hover { color: var(--yd-ink); }

.btn[aria-disabled="true"], .btn:disabled { opacity: .4; pointer-events: none; }

/* Telas estreitas: botão nenhum impõe largura mínima ao layout. */
@media (max-width: 379px) {
  .btn { white-space: normal; text-align: center; padding-inline: 18px; }
  /* O CTA do hero continua numa linha só: largura 112 e tracking menor
     ("QUERO CONHECER OS MODELOS" passava da borda a 320 e 360 px). */
  .hero .u-acoes > .btn.btn--primario { font-size: 11.5px; font-stretch: 112%; letter-spacing: .03em; padding-inline: 16px; }
}
@media (max-width: 359px) {
  .hero .u-acoes > .btn.btn--primario { white-space: normal; text-align: left; }
}

/* No celular os CTAs de seção ocupam a largura e o rótulo pode quebrar. */
@media (max-width: 560px) {
  .u-acoes > .btn,
  .depoimentos__cta .btn,
  .rodape__rota .btn { width: 100%; }
  .u-acoes > .btn { white-space: normal; text-align: center; padding-block: 12px; }
}

/* ── selos legais ──────────────────────────────────────────────────────── */

/* Substituem os SVGs cnh_0/1 e emplacamento_0/1: texto é acessível,
   indexável e não custa requisição. Laranja claro = liberdade; grafite com
   ponto âmbar = obrigação. */
.selos { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.selo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: var(--r-pill);
  font-size: 10px;
  font-weight: 700;
  font-stretch: var(--yd-wide);
  line-height: 1.2;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.selo::before { content: ""; width: 6px; height: 6px; border-radius: 50%; flex: none; }
.selo--livre { background: var(--yd-orange-100); color: var(--yd-ink); }
.selo--livre::before { background: var(--yd-orange-500); }
.selo--exige { background: var(--yd-ink); color: var(--yd-white); }
.selo--exige::before { background: var(--yd-star); }

/* ── header ────────────────────────────────────────────────────────────── */

/* Fixo, largura toda, sem raio. Nasce transparente sobre o vídeo do hero
   (que sobe por baixo dele) e, depois de 24 px, vira grafite 92% com vidro. */
.header {
  position: sticky;
  top: 0;
  z-index: 95;
  color: var(--yd-white);
  background: linear-gradient(180deg, rgba(23, 23, 23, .6), rgba(23, 23, 23, 0));
  border-bottom: 1px solid transparent;
  transition: background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.header.is-fixo,
body.menu-aberto .header {
  background: var(--yd-ink-92);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
  border-bottom-color: var(--yd-line-dark);
}

.header__barra { height: var(--yd-header); display: flex; align-items: center; gap: var(--sp-6); }

/* Assinatura: no styleguide, 184 px no desktop e 150 no celular (abaixo
   disso a linha da cidade fica ilegível — seção 02). A de Itapetininga (609×161,
   quase igual à de Sorocaba, 605×161) é ~10% mais larga que a de Campinas:
   204/166 px mantêm o símbolo e o YADEA do tamanho do styleguide. */
.header__logo { display: flex; align-items: center; flex: none; }
.header__logo img { width: 204px; height: auto; }
@media (max-width: 860px) { .header__logo img { width: 166px; } }

.header__nav { display: flex; align-items: center; gap: clamp(18px, 2.2vw, 34px); margin-inline: auto; }
.header__link {
  position: relative;
  padding: 10px 0;
  color: var(--yd-white);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur-1) var(--ease);
}
.header__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 4px;
  height: 2px;
  border-radius: 2px;
  background: var(--yd-orange-500);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-2) var(--ease);
}
.header__link:hover { color: var(--yd-white); }
.header__link[aria-current="true"] { color: var(--yd-white); font-weight: 700; }
.header__link[aria-current="true"]::after,
.header__link:hover::after { transform: none; }

.header__acoes { display: flex; align-items: center; gap: var(--sp-3); flex: none; }
.header__acoes .btn { min-height: 44px; padding: 0 20px; font-size: 12px; }

.redes { display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; }
.redes a {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: var(--r-md);
  color: var(--yd-white);
  transition: color var(--dur-1), background var(--dur-1);
}
.redes a:hover { color: var(--yd-orange-500); background: rgba(255, 255, 255, .06); }
.redes svg { width: 20px; height: 20px; }

.header__toggle {
  display: none;
  align-items: center;
  gap: var(--sp-2);
  min-height: 44px;
  padding: 0 16px 0 14px;
  border: 1.5px solid rgba(255, 255, 255, .28);
  border-radius: var(--r-md);
  background: rgba(23, 23, 23, .35);
  color: var(--yd-white);
  font-size: 12px;
  font-weight: 700;
  font-stretch: var(--yd-wide);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.header__toggle-icone { position: relative; width: 18px; height: 12px; flex: none; }
.header__toggle-icone span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--dur-2) var(--ease), opacity var(--dur-1);
}
.header__toggle-icone span:nth-child(1) { top: 0; }
.header__toggle-icone span:nth-child(2) { top: 5px; }
.header__toggle-icone span:nth-child(3) { top: 10px; }
.header__toggle[aria-expanded="true"] { border-color: var(--yd-orange-500); color: var(--yd-orange-500); }
.header__toggle[aria-expanded="true"] .header__toggle-icone span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.header__toggle[aria-expanded="true"] .header__toggle-icone span:nth-child(2) { opacity: 0; }
.header__toggle[aria-expanded="true"] .header__toggle-icone span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }
.header__toggle-rotulo { display: block; height: 14px; overflow: hidden; }
.header__toggle-rotulo span { display: block; height: 14px; line-height: 14px; transition: transform var(--dur-2) var(--ease); }
.header__toggle[aria-expanded="true"] .header__toggle-rotulo span { transform: translateY(-14px); }

@media (max-width: 1180px) {
  .header__nav { display: none; }
  .header__toggle { display: inline-flex; }
  .header__acoes { margin-left: auto; }
}
@media (max-width: 600px) {
  .header__acoes .btn--desktop { display: none; }
}
/* 320–379 px: logo no mínimo do styleguide (150) + botão com rótulo + vãos
   passavam da tela, e o navegador alargava a página inteira. Fica o ícone
   (o rótulo continua para o leitor de tela no .u-visually-hidden). */
@media (max-width: 379px) {
  .header__barra { gap: var(--sp-3); }
  .header__toggle { width: 48px; padding: 0; justify-content: center; }
  .header__toggle-rotulo { display: none; }
}

/* ── menu mobile (gaveta com cortinas) ─────────────────────────────────── */

.menu {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  visibility: hidden;
  background: rgba(23, 23, 23, 0);
  transition: background 300ms ease, visibility 0s linear 420ms;
}
.menu.is-aberto {
  pointer-events: auto;
  visibility: visible;
  background: rgba(23, 23, 23, .6);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  transition-delay: 0s;
}
.menu__cortina, .menu__painel { width: min(440px, 88%); }

/* Entrando, a cortina laranja varre primeiro e o painel chega atrás; saindo,
   o painel some primeiro. */
.menu__cortina {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  transform: translateX(100%);
  will-change: transform;
  transition: transform 320ms cubic-bezier(.4, 0, .2, 1);
}
.menu__cortina--1 { background: var(--yd-orange-500); transition-delay: 120ms; }
.menu__cortina--2 { background: var(--yd-ink-800); transition-delay: 70ms; }
.menu.is-aberto .menu__cortina { transition-duration: 460ms; transition-timing-function: cubic-bezier(.2, .8, .2, 1); }
.menu.is-aberto .menu__cortina--1 { transform: none; transition-delay: 0ms; }
.menu.is-aberto .menu__cortina--2 { transform: none; transition-delay: 55ms; }

.menu__painel {
  position: absolute;
  top: 0; right: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  padding: calc(var(--yd-header) + var(--sp-8)) var(--sp-8) var(--sp-8);
  overflow-y: auto;
  background: var(--yd-ink);
  color: var(--yd-white);
  transform: translateX(100%);
  will-change: transform;
  transition: transform 300ms cubic-bezier(.4, 0, .2, 1);
}
.menu.is-aberto .menu__painel { transform: none; transition: transform 460ms cubic-bezier(.2, .8, .2, 1) 100ms; }

.menu__lista { display: grid; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; }
.menu__item-wrap { overflow: hidden; padding-block: 2px; }
.menu__item {
  display: block;
  color: var(--yd-white);
  font-size: clamp(22px, 6vw, 28px);
  font-weight: 800;
  font-stretch: var(--yd-wide);
  line-height: 1.2;
  text-transform: uppercase;
  text-decoration: none;
  transform: translateY(140%);
  transition: color var(--dur-1), transform 200ms ease-in;
}
.menu.is-aberto .menu__item {
  transform: none;
  transition: color var(--dur-1), transform 520ms cubic-bezier(.2, .8, .2, 1) calc(170ms + var(--i, 0) * 55ms);
}
.menu__item:hover { color: var(--yd-orange-500); }
.menu__numero {
  margin-right: var(--sp-3);
  color: var(--yd-orange-500);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  vertical-align: super;
}
.menu__rodape { display: grid; gap: var(--sp-4); margin-top: auto; }
.menu__contato { display: grid; gap: 4px; font-size: var(--fs-small); color: var(--yd-on-dark-2); }
.menu__contato strong { color: var(--yd-white); font-size: 18px; font-stretch: var(--yd-wide); }

/* ── hero ──────────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  isolation: isolate;
  min-height: max(660px, 100svh);
  margin-top: calc(var(--yd-header) * -1);
  padding: calc(var(--yd-header) + var(--sp-12)) 0 var(--sp-8);
  display: grid;
  /* minmax(0, 1fr): sem isso a coluna cresce até o tamanho mínimo do
     conteúdo e vaza a 360 px. */
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 1fr auto;
  align-items: center;
  overflow: hidden;
  background: var(--yd-ink);
  color: var(--yd-white);
}

.hero__midia { position: absolute; inset: 0; z-index: -2; transform-origin: 50% 30%; }
.hero__midia img,
.hero__midia video {
  /* Os dois ocupam a MESMA caixa, senão o vídeo empilha abaixo do pôster. */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% 50%;
}
.hero__midia video { opacity: 0; transition: opacity 900ms var(--ease); }
.hero__midia video.is-pronto { opacity: 1; }

/* O véu reforça a esquerda, onde mora o título, e a base, onde mora a
   faixa de resumo. O vídeo tem 1024 px: o véu também esconde a maciez. */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(23, 23, 23, .9) 0%, rgba(23, 23, 23, .66) 40%, rgba(23, 23, 23, .18) 78%),
    linear-gradient(180deg, rgba(23, 23, 23, .45) 0%, rgba(23, 23, 23, 0) 28%, rgba(23, 23, 23, .2) 60%, rgba(23, 23, 23, .95) 100%);
}

.hero__conteudo { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); max-width: 960px; }

/* Duas larguras de voz: "Líder global" em display 800 expandido; o resto da
   frase em h1 de peso 500. Em 800 a frase inteira virava sete linhas. */
.hero__titulo {
  margin: 0;
  font-size: var(--fs-h1);
  font-weight: 500;
  font-stretch: var(--yd-wide);
  line-height: 1.06;
  text-transform: uppercase;
  text-wrap: balance;
}
.hero__forte { display: inline-block; font-size: calc(var(--fs-display) * 1.02); font-weight: 800; line-height: .98; letter-spacing: -.01em; }
.hero__destaque { color: var(--yd-orange-500); font-weight: 800; }
/* Máscara de linha criada pelo motion.js. */
.hero__linha { display: block; overflow: hidden; padding-bottom: .06em; }
.hero__linha > span { display: block; }

/* Barra de "carga" sob o título: enche UMA vez, como uma bateria. */
.hero__carga,
.destaque__carga {
  display: block;
  width: 112px;
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--yd-orange-500), var(--yd-orange-400));
  transform-origin: left;
}

.hero__lead {
  margin: 0;
  max-width: 50ch;
  color: var(--yd-on-dark-2);
  font-size: clamp(16px, .9rem + .35vw, 19px);
  line-height: 1.6;
  text-wrap: pretty;
}

/* Faixa de resumo: só fatos que o próprio site afirma. */
.prova {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: var(--sp-16) 0 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--yd-line-dark);
  border-radius: var(--r-lg);
  background: rgba(23, 23, 23, .5);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
}
.prova__item { display: grid; gap: 4px; align-content: start; padding: 20px 26px; }
.prova__item + .prova__item { border-left: 1px solid var(--yd-line-dark); }
.prova__numero {
  display: flex;
  align-items: baseline;
  gap: 6px;
  color: var(--yd-orange-500);
  font-size: clamp(24px, 1rem + 1.1vw, 32px);
  font-weight: 800;
  font-stretch: var(--yd-wide);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.prova__numero small { font-size: .5em; font-weight: 700; color: var(--yd-white); letter-spacing: .02em; text-transform: uppercase; }
.prova__rotulo { margin: 0; color: var(--yd-on-dark-2); font-size: 13px; line-height: 1.45; }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .prova { background: rgba(23, 23, 23, .9); }
}

@media (max-width: 760px) {
  /* Ancorado no topo (não centralizado): centralizado, qualquer diferença de
     altura do título na troca de fonte re-centralizava o bloco inteiro
     (CLS 0,05 medido a 390 px). */
  /* padding-bottom = altura do botão flutuante + folga: a faixa de resumo
     não fica embaixo dele. */
  .hero { min-height: max(620px, 100svh); padding: calc(var(--yd-header) + var(--sp-8)) 0 88px; align-items: start; }
  .hero__midia img, .hero__midia video { object-position: 50% 50%; }
  .hero__scrim {
    background: linear-gradient(180deg, rgba(23, 23, 23, .78) 0%, rgba(23, 23, 23, .5) 38%, rgba(23, 23, 23, .7) 68%, rgba(23, 23, 23, .96) 100%);
  }
  /* Duas vozes: "LÍDER GLOBAL" grande, em caixa alta expandida, numa linha
     só (9vw cabe de 320 a 760 px); o resto vira subtítulo em texto corrido,
     largura normal, 16 px — lê-se como apoio, não como mais um grito. Antes
     eram 7 linhas em caixa alta expandida. */
  .hero__conteudo { gap: var(--sp-4); }
  /* Subtítulo em texto corrido, maiúsculas, 16 px (pedido do cliente,
     06/11/2026): sem as quebras à mão, cabe em 2 linhas de 360 px para cima.
     Sem JS, o <br> some aqui; com JS, o motion.js junta as linhas. */
  .hero__titulo {
    font-size: 1rem;
    font-weight: 600;
    font-stretch: var(--yd-normal);
    line-height: 1.45;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--yd-on-dark-2);
  }
  .hero__titulo br { display: none; }
  .hero__forte {
    display: block;
    margin-bottom: 8px;
    font-size: 9vw;
    font-stretch: var(--yd-wide);
    line-height: 1;
    text-transform: uppercase;
    color: var(--yd-white);
  }
  .hero__destaque { font-weight: 700; }
  .hero__carga { width: 72px; height: 3px; margin-top: 4px; }
  .hero__lead { max-width: 34ch; font-size: 15px; line-height: 1.55; }
  .hero__eyebrow .hero__local { display: none; }

  /* Uma ação principal; o test ride vira link secundário (mesmo destino). */
  .hero .u-acoes { flex-direction: column; align-items: stretch; gap: 4px; margin-top: var(--sp-2); }
  .hero .u-acoes > .btn { width: 100%; white-space: nowrap; font-size: 12.5px; letter-spacing: .05em; padding-inline: 16px; }
  .hero .u-acoes > .hero__secundario { min-height: 44px; border-color: transparent; background: none; }
  .hero .u-acoes > .btn--primario { justify-content: space-between; padding-inline: 20px; }
  .hero .u-acoes > .hero__secundario:hover { background: none; color: var(--yd-orange-400); transform: none; }

  /* Faixa de resumo em 3 colunas compactas (eram 3 linhas altas). */
  .prova { margin-top: var(--sp-8); border-radius: var(--r-md); }
  .prova__item { gap: 4px; padding: 12px 10px; }
  .prova__item + .prova__item { border-left: 1px solid var(--yd-line-dark); }
  .prova__numero { gap: 4px; font-size: 20px; }
  .prova__numero small { font-size: 9px; letter-spacing: .04em; }
  .prova__rotulo { font-size: 11px; line-height: 1.35; }
}

/* ── vitrine (papel) ───────────────────────────────────────────────────── */

/* Sem overflow:hidden aqui: mataria o `sticky` do filtro. */
.vitrine { position: relative; }
.vitrine .cabecalho { margin-bottom: var(--sp-8); }
.vitrine__instrucao { margin: 0; font-size: var(--fs-small); color: var(--yd-slate); }

.filtro-sentinela { height: 1px; margin-bottom: -1px; }

/* Pílulas com contagem (substituem os ícones-imagem do site atual). Soltas
   são uma fileira; grudadas embaixo do header viram barra de vidro. */
.filtro {
  position: sticky;
  top: calc(var(--yd-header) + var(--sp-2));
  z-index: 40;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-2);
  width: fit-content;
  max-width: calc(100% - var(--gutter) * 2);
  margin: 0 auto var(--sp-4);
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  /* `padding` fora da transição: a compensação de altura do app.js é medida
     no instante em que gruda. */
  transition: background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.filtro.is-fixo {
  flex-wrap: nowrap;
  justify-content: flex-start;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  padding: 5px;
  background: rgba(255, 255, 255, .88);
  -webkit-backdrop-filter: blur(16px) saturate(170%);
  backdrop-filter: blur(16px) saturate(170%);
  border-color: var(--yd-line);
  box-shadow: var(--sh-md);
}
.filtro.is-fixo::-webkit-scrollbar { display: none; }
.filtro.is-fixo .filtro__btn { flex: 0 0 auto; padding: 5px 14px 5px 5px; min-height: 40px; }

.filtro__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 8px 20px 8px 8px;
  border: 1.5px solid var(--yd-line);
  border-radius: var(--r-pill);
  background: var(--yd-white);
  color: var(--yd-ink);
  font-size: 12px;
  font-weight: 700;
  font-stretch: var(--yd-wide);
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
}
.filtro__btn:hover { border-color: var(--yd-ink); }
.filtro__btn[aria-pressed="true"] { background: var(--yd-ink); border-color: var(--yd-ink); color: var(--yd-white); }
.filtro__contagem {
  display: grid;
  place-items: center;
  min-width: 30px;
  height: 30px;
  padding: 0 6px;
  border-radius: var(--r-pill);
  background: var(--yd-paper);
  color: var(--yd-ink);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  transition: background var(--dur-2) var(--ease);
}
.filtro__btn[aria-pressed="true"] .filtro__contagem { background: var(--yd-orange-500); color: var(--yd-ink); }

@media (max-width: 560px) {
  .filtro { gap: 6px; }
  .filtro__btn { min-height: 44px; padding: 6px 14px 6px 6px; font-size: 10.5px; gap: 8px; }
  .filtro__contagem { min-width: 28px; height: 28px; font-size: 11px; }
  /* Grudada no celular, sem a contagem: as três abas cabem numa linha (com
     ela, "Autopropelido" ficava cortado). A contagem segue na barra solta. */
  .filtro.is-fixo { gap: 4px; }
  .filtro.is-fixo .filtro__btn { padding: 4px 12px; min-height: 40px; }
  .filtro.is-fixo .filtro__contagem { display: none; }
}

.filtro__nota {
  min-height: 3.4em;
  max-width: 70ch;
  margin: 0 auto var(--sp-6);
  color: var(--yd-slate);
  font-size: var(--fs-small);
  line-height: 1.7;
  text-align: center;
}

/* Grade em flex com base fixa: a última linha e as categorias com poucos
   modelos ficam centralizadas, com o mesmo tamanho de card. 1 a 3 colunas
   (styleguide, seção 07). */
.vitrine__grade {
  --colunas: 1;
  --vao: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--vao);
  margin: 0;
  padding: 0;
  list-style: none;
}
.vitrine__grade > li { display: grid; flex: 0 0 calc((100% - (var(--colunas) - 1) * var(--vao)) / var(--colunas)); }
@media (max-width: 639.98px) { .vitrine__grade > li { flex-basis: 100%; max-width: 460px; } }
@media (min-width: 640px) { .vitrine__grade { --colunas: 2; } }
@media (min-width: 1000px) { .vitrine__grade { --colunas: 3; --vao: 24px; } }

.vitrine__vazio {
  max-width: 640px;
  margin: 0 auto var(--sp-6);
  padding: var(--sp-12) var(--sp-6);
  border: 1.5px dashed var(--yd-line);
  border-radius: var(--r-lg);
  text-align: center;
  color: var(--yd-slate);
}
.vitrine__legenda { margin-top: var(--sp-8); text-align: center; }

/* ── card de modelo (styleguide, seção 07) ─────────────────────────────── */

.card {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  border: 1px solid var(--yd-line);
  border-radius: var(--r-lg);
  background: var(--yd-white);
  color: var(--yd-ink);
  box-shadow: var(--sh-sm);
  /* Contêiner de consulta: números e botões medem-se pela largura do CARD. */
  container-type: inline-size;
  transition: box-shadow var(--dur-2) var(--ease), transform var(--dur-2) var(--ease), border-color var(--dur-2);
  --brilho: 0;
  --angulo: 180deg;
}
.card:hover { box-shadow: var(--sh-lg); transform: translateY(-4px); border-color: transparent; }

/* Fio de luz laranja na borda, que segue o cursor (app.js alimenta as
   variáveis). Sutil: só aparece perto da borda. */
.card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  padding: 1.5px;
  border-radius: inherit;
  background: conic-gradient(from var(--angulo) at 50% 50%,
    var(--yd-orange-500) 0deg, var(--yd-orange-400) 30deg, transparent 80deg,
    transparent 280deg, var(--yd-orange-500) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: calc(var(--brilho) * .8);
  transition: opacity var(--dur-2);
  pointer-events: none;
}

/* Palco na cor do modelo, esmaecendo até o branco (styleguide). Nada de
   texto sobre o palco: só os selos, que têm fundo próprio. */
.card__midia {
  --palco: var(--yd-mist);
  position: relative;
  background: linear-gradient(180deg, var(--palco) 0%, color-mix(in srgb, var(--palco) 55%, #fff) 52%, #fff 100%);
}
.card__foto {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 736 / 616;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  min-height: 0;
  padding: 14% 6% 0;
  border: 0;
  background: none;
  appearance: none;
  cursor: zoom-in;
}
.card__foto img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: 50% 100%;
  filter: drop-shadow(0 16px 14px rgba(23, 23, 23, .18));
  transition: transform 520ms var(--ease);
}
.card:hover .card__foto img { transform: scale(1.04) translateY(-3px); }
.card__selos { position: absolute; top: 14px; left: 14px; z-index: 2; }

/* Coluna com os botões no pé: nome, números e preço ficam na mesma altura
   nos cards da fileira, mesmo quando um preço tem menos linhas (Keeness sem
   parcela, GFX6 sem campanha). */
.card__corpo {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 18px clamp(16px, 7cqi, 24px) clamp(18px, 7cqi, 24px);
}
.card__cabeca { display: grid; gap: 6px; }
/* Tags em laranja 700 sobre branco (5.2:1), como eyebrow. */
.card__tags {
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--yd-orange-700);
  font-size: clamp(10px, 3.4cqi, 11.5px);
  font-weight: 700;
  font-stretch: var(--yd-wide);
  line-height: 1.4;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.card__nome {
  margin: 0;
  font-size: clamp(22px, 8.6cqi, 30px);
  font-weight: 800;
  font-stretch: var(--yd-wide);
  line-height: 1;
  text-transform: uppercase;
}

/* Três números num quadro com divisórias. Valor 800 expandido + unidade. */
.specs {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  margin: 0;
  border: 1px solid var(--yd-line);
  border-radius: var(--r-md);
}
.spec {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: 4px;
  min-width: 0;
  padding: 12px clamp(8px, 3.6cqi, 12px);
}
.spec + .spec { border-left: 1px solid var(--yd-line); }
.spec dt {
  color: var(--yd-stone);
  font-size: clamp(8.5px, 2.9cqi, 10px);
  line-height: 1.2;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.spec dd { display: flex; align-items: baseline; gap: 3px; margin: 0; white-space: nowrap; }
.spec dd b { font-size: clamp(16px, 6.4cqi, 22px); font-weight: 800; font-stretch: var(--yd-wide); line-height: 1; font-variant-numeric: tabular-nums; }
.spec dd span { font-size: clamp(9px, 3cqi, 11px); font-weight: 700; }

.card__pendente { margin: 0; font-size: var(--fs-small); line-height: 1.5; color: var(--yd-slate); }
.card__pendente strong { display: block; color: var(--yd-ink); }

/* Preço (loja, 06/11/2026): rótulo → valor com o antigo riscado ao lado →
   parcela. O selo da campanha é grafite com ponto laranja no card branco e
   laranja com texto grafite no modal escuro (o par do botão primário). */
.preco { display: grid; gap: 3px; margin: 0; }
.preco__topo { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.preco__rotulo { color: var(--yd-stone); font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.preco__selo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px 3px 8px;
  border-radius: var(--r-pill);
  background: var(--yd-ink);
  color: var(--yd-white);
  font-size: 9.5px;
  font-weight: 800;
  font-stretch: var(--yd-wide);
  line-height: 1.35;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
}
.preco__selo::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--yd-orange-500); }
.preco__linha { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px; }
.preco__valor { font-size: clamp(20px, 7.6cqi, 24px); font-weight: 800; font-stretch: var(--yd-wide); line-height: 1.15; font-variant-numeric: tabular-nums; white-space: nowrap; }
.preco__de { color: var(--yd-stone); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; text-decoration-thickness: 1.5px; }
.preco__parcelas { color: var(--yd-slate); font-size: 12px; line-height: 1.4; }

/* Duas metades iguais, fonte e ícone medidos pela largura do CARD (cqi). */
.card__acoes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: auto; }
.btn--card {
  min-height: 48px;
  padding: 0 clamp(10px, 4.5cqi, 18px);
  gap: clamp(6px, 2cqi, 8px);
  font-size: clamp(10px, 3.6cqi, 12.5px);
  letter-spacing: .06em;
}
.btn--card svg { width: clamp(14px, 4.8cqi, 16px); height: clamp(14px, 4.8cqi, 16px); }

/* ── sobre (grafite, sobre o showroom da GFX6) ─────────────────────────── */

.sobre { position: relative; isolation: isolate; overflow: hidden; }
.sobre__fundo { position: absolute; inset: 0; z-index: -2; }
.sobre__fundo img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; }
/* A moto fica à esquerda da foto; o texto mora no espaço escuro da direita. */
.sobre::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(23, 23, 23, 0) 22%, rgba(23, 23, 23, .78) 52%, rgba(23, 23, 23, .94) 72%),
    linear-gradient(180deg, rgba(23, 23, 23, .35), rgba(23, 23, 23, 0) 30%, rgba(23, 23, 23, 0) 70%, rgba(23, 23, 23, .6));
}
.sobre__grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.sobre__texto { grid-column: 2; display: grid; gap: var(--sp-6); align-content: start; }
.sobre__titulo {
  margin: 0;
  font-size: var(--fs-h2);
  font-weight: 800;
  font-stretch: var(--yd-wide);
  line-height: 1.05;
  text-transform: uppercase;
  text-wrap: balance;
}
.sobre__lead { margin: 0; color: var(--yd-white); font-size: var(--fs-body-l); font-weight: 500; line-height: 1.55; max-width: 46ch; }
.sobre__loja { margin: 0; padding-top: var(--sp-6); border-top: 1px solid var(--yd-line-dark); color: var(--yd-on-dark-2); font-size: 15px; line-height: 1.7; }
.sobre__loja strong { color: var(--yd-white); }
.sobre__loja .link-seta { margin-top: var(--sp-3); display: flex; width: fit-content; }

/* Números da marca: o valor final mora no HTML (SEO e leitor de tela); a
   contagem anima de 0 ao valor uma vez (motion.js). */
.numeros {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: var(--sp-2) 0 0;
  border-block: 1px solid var(--yd-line-dark);
}
.numeros__item { display: flex; flex-direction: column-reverse; gap: 6px; padding: 20px 16px 20px 0; }
.numeros__item + .numeros__item { padding-left: 20px; border-left: 1px solid var(--yd-line-dark); }
.numeros dt { color: var(--yd-on-dark-2); font-size: 13px; line-height: 1.35; }
.numeros dd {
  display: flex;
  align-items: baseline;
  margin: 0;
  color: var(--yd-orange-500);
  font-size: clamp(28px, 1.2rem + 1.6vw, 44px);
  font-weight: 800;
  font-stretch: var(--yd-wide);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.numeros dd small { font-size: .55em; font-weight: 700; }

@media (max-width: 860px) {
  .sobre { padding-top: 0; }
  .sobre__fundo { position: relative; inset: auto; height: min(110vw, 520px); }
  .sobre__fundo img { object-position: 50% 60%; }
  .sobre::before { background: linear-gradient(180deg, rgba(23, 23, 23, 0) 0, rgba(23, 23, 23, 0) min(70vw, 340px), var(--yd-ink) min(110vw, 520px)); }
  .sobre__grade { grid-template-columns: minmax(0, 1fr); margin-top: calc(min(110vw, 520px) * -.18); }
  .sobre__texto { grid-column: 1; }
}
@media (max-width: 480px) {
  .numeros__item { padding-right: 8px; }
  .numeros__item + .numeros__item { padding-left: 12px; }
  .numeros dt { font-size: 11.5px; }
}

/* ── por que YADEA (branca) ────────────────────────────────────────────── */

.porque__grade {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.porque__lado { display: grid; gap: var(--sp-8); }
.porque__lado .cabecalho { margin-bottom: 0; }
.porque__foto {
  margin: 0;
  overflow: hidden;
  border-radius: var(--r-xl);
  aspect-ratio: 900 / 970;
  background: var(--yd-mist);
}
.porque__foto img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 1001px) {
  .porque__lado { position: sticky; top: calc(var(--yd-header) + var(--sp-8)); }
}

.porque__lista {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--sp-8);
  margin: 0;
  padding: 0;
  list-style: none;
}
.porque__item {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: var(--sp-3);
  padding: 24px 0;
  border-top: 1px solid var(--yd-line);
}
.porque__n {
  color: var(--yd-orange-700);
  font-size: 13px;
  font-weight: 800;
  font-stretch: var(--yd-wide);
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
}
.porque__item h3 {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 800;
  font-stretch: var(--yd-wide);
  line-height: 1.35;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.porque__item p { margin: 0; color: var(--yd-slate); font-size: 15px; line-height: 1.6; text-wrap: pretty; }

@media (max-width: 1000px) {
  .porque__grade { grid-template-columns: minmax(0, 1fr); }
  .porque__foto { aspect-ratio: 16 / 10; }
  .porque__foto img { object-position: 50% 35%; }
}
@media (max-width: 640px) {
  .porque__lista { grid-template-columns: minmax(0, 1fr); }
  .porque__item { padding: 18px 0; }
}

/* ── destaque Keeness (grafite): o momento marcante ───────────────────── */

.destaque { position: relative; background: var(--yd-ink); color: var(--yd-white); }
.destaque__palco {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  min-height: max(640px, 100svh);
  padding-block: calc(var(--yd-header) + var(--sp-8)) var(--sp-16);
  overflow: hidden;
}
.destaque__fundo { position: absolute; inset: 0; z-index: -2; }
.destaque__fundo img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; transform-origin: 72% 60%; }
/* Véu: o céu da esquerda vira o "papel" escuro do texto; o piloto, à
   direita, fica limpo. O motion.js alivia o véu enquanto a foto abre. */
.destaque__veu {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(23, 23, 23, .96) 0%, rgba(23, 23, 23, .82) 34%, rgba(23, 23, 23, .2) 62%, rgba(23, 23, 23, 0) 80%),
    linear-gradient(180deg, rgba(23, 23, 23, .7) 0%, rgba(23, 23, 23, 0) 30%, rgba(23, 23, 23, 0) 70%, rgba(23, 23, 23, .85) 100%);
}
.destaque__conteudo { display: grid; gap: var(--sp-6); justify-items: start; }
.destaque__conteudo > * { max-width: 560px; }
.destaque__titulo {
  margin: 0;
  /* Proporcional à tela no celular: "KEENESS" em 52 px fixos media 313 px
     e não cabia em 320. */
  font-size: clamp(2.5rem, min(12.5vw, 1.4rem + 7vw), 8rem);
  font-weight: 800;
  font-stretch: var(--yd-wide);
  line-height: .9;
  letter-spacing: -.02em;
  text-transform: uppercase;
}
.destaque__lead { margin: 0; color: var(--yd-on-dark-2); font-size: var(--fs-body-l); line-height: 1.6; text-wrap: pretty; }
@media (max-width: 560px) { .destaque__conteudo { gap: var(--sp-4); } .destaque__nota { font-size: 12px; } }
/* Colunas do tamanho do conteúdo: "5.500 W" é o mais largo e encostava na
   divisória com três colunas iguais. */
.destaque__conteudo > .destaque__numeros { max-width: 680px; }
.destaque__numeros {
  display: grid;
  grid-template-columns: repeat(3, max-content);
  gap: 0;
  margin: 0;
  border-block: 1px solid var(--yd-line-dark);
}
.destaque__numeros > div { display: flex; flex-direction: column-reverse; gap: 6px; padding: 18px 28px 18px 0; }
.destaque__numeros > div + div { padding-left: 28px; border-left: 1px solid var(--yd-line-dark); }
.destaque__numeros dt { color: var(--yd-on-dark-2); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.destaque__numeros dd { display: flex; align-items: baseline; gap: 6px; margin: 0; white-space: nowrap; }
.destaque__numeros b {
  color: var(--yd-orange-500);
  font-size: clamp(30px, 1.2rem + 2vw, 48px);
  font-weight: 800;
  font-stretch: var(--yd-wide);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.destaque__numeros span { font-size: 14px; font-weight: 700; }
.destaque__nota { margin: 0; color: var(--yd-on-dark-3); font-size: 13px; line-height: 1.6; }

/* Celular: o texto mora sobre grafite liso; a foto em pé (moto embaixo,
   topo já escuro) fica na base da seção, fundida por um degradê. Com a foto
   cobrindo a seção inteira, os botões caíam sobre o asfalto claro. */
@media (max-width: 860px) {
  .destaque__palco { align-items: start; min-height: 0; padding-block: var(--section-y) min(96vw, 440px); }
  .destaque__fundo { top: auto; height: min(178vw, 820px); }
  .destaque__fundo img { object-position: 50% 100%; }
  .destaque__veu {
    top: auto;
    height: min(178vw, 820px);
    background: linear-gradient(180deg, var(--yd-ink) 0%, rgba(23, 23, 23, .6) 30%, rgba(23, 23, 23, 0) 52%, rgba(23, 23, 23, 0) 88%, rgba(23, 23, 23, .6) 100%);
  }
  .destaque__numeros { grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
  .destaque__numeros > div { padding-right: 12px; }
  .destaque__numeros > div + div { padding-left: 12px; }
  .destaque__numeros b { font-size: clamp(24px, 6.4vw, 34px); }
}
@media (max-width: 420px) {
  .destaque__numeros dt { font-size: 10px; letter-spacing: .04em; }
  .destaque__numeros span { font-size: 12px; }
}

/* ── depoimentos (papel) ───────────────────────────────────────────────── */

.depoimentos .cabecalho { margin-bottom: var(--sp-8); }

/* O trilho sangra até a borda da tela, mas o primeiro card alinha com o
   container; o scroll-padding repete a conta para o snap parar alinhado. */
.carrossel { position: relative; }
.carrossel__trilho {
  --sobra: max(var(--gutter), calc((100% - var(--container)) / 2));
  display: flex;
  gap: 20px;
  margin: 0;
  padding: var(--sp-4) var(--sobra) var(--sp-8);
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--sobra);
  scrollbar-width: none;
}
.carrossel__trilho::-webkit-scrollbar { display: none; }
.carrossel__trilho > * { flex: none; scroll-snap-align: start; }
.carrossel__trilho.is-arrastando { scroll-snap-type: none; cursor: grabbing; user-select: none; }
.carrossel__trilho.is-arrastando * { pointer-events: none; }
@media (hover: hover) and (pointer: fine) { .carrossel__trilho { cursor: grab; } }

.carrossel__controles { display: flex; align-items: center; justify-content: center; gap: var(--sp-4); }
.carrossel__seta {
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  padding: 0;
  border: 1.5px solid var(--yd-line);
  border-radius: var(--r-md);
  background: var(--yd-white);
  color: var(--yd-ink);
  transition: border-color var(--dur-1), background var(--dur-1), color var(--dur-1), opacity var(--dur-1);
}
.carrossel__seta:hover { border-color: var(--yd-ink); background: var(--yd-ink); color: var(--yd-white); }
.carrossel__seta:disabled { opacity: .35; cursor: default; background: var(--yd-white); color: var(--yd-ink); border-color: var(--yd-line); }
.carrossel__seta svg { width: 16px; height: 16px; }
.carrossel__pontos { display: flex; align-items: center; gap: 2px; }
.carrossel__ponto { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; background: none; }
.carrossel__ponto::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 8px;
  background: #CFCAC4;
  transition: width var(--dur-2) var(--ease), background var(--dur-2);
}
.carrossel__ponto[aria-current="true"]::before { width: 22px; background: var(--yd-orange-500); }
.carrossel__contador { min-width: 7ch; text-align: center; font-size: var(--fs-small); font-weight: 700; color: var(--yd-slate); font-variant-numeric: tabular-nums; }

.depoimentos__trilho > * { width: clamp(288px, 84vw, 400px); }

.depoimento {
  display: flex;
  flex-direction: column;
  gap: 18px;
  height: 100%;
  margin: 0;
  padding: 28px;
  border: 1px solid var(--yd-line);
  border-radius: var(--r-lg);
  background: var(--yd-white);
  box-shadow: var(--sh-sm);
}
.depoimento__estrelas { color: var(--yd-star); font-size: 15px; letter-spacing: 3px; line-height: 1; }
.depoimento__texto { margin: 0; color: var(--yd-ink); font-size: 15px; line-height: 1.7; text-wrap: pretty; }
.depoimento__autor { display: flex; align-items: center; gap: 12px; margin-top: auto; }
/* Avatar no raio do ícone de app (26%). */
.depoimento__avatar { width: 46px; height: 46px; flex: none; border-radius: var(--r-icon); object-fit: cover; background: var(--yd-mist); }
.depoimento__avatar--inicial {
  display: grid;
  place-items: center;
  background: var(--yd-ink);
  color: var(--yd-orange-500);
  font-weight: 800;
  font-stretch: var(--yd-wide);
  font-size: 14px;
  letter-spacing: .04em;
}
.depoimento__quem { display: grid; gap: 1px; min-width: 0; }
.depoimento__nome { font-size: 14px; font-weight: 700; line-height: 1.35; }
.depoimento__fonte { color: var(--yd-stone); font-size: 12px; }
.depoimento__origem { width: 20px; height: 20px; flex: none; margin-left: auto; }

.depoimentos__cta { display: flex; justify-content: center; margin-top: var(--sp-8); }

/* ── FAQ e guia (acordeão) ─────────────────────────────────────────────── */

.faq__grade {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}
.faq__cabeca { display: grid; gap: var(--sp-6); justify-items: start; }
.faq__cabeca .cabecalho { margin-bottom: 0; }
@media (min-width: 941px) {
  .faq__cabeca { position: sticky; top: calc(var(--yd-header) + var(--sp-8)); }
}
@media (max-width: 940px) {
  .faq__grade { grid-template-columns: minmax(0, 1fr); gap: var(--sp-8); }
}

.faq {
  padding: 6px clamp(18px, 3vw, 32px);
  border: 1px solid var(--yd-line);
  border-radius: var(--r-lg);
  background: var(--yd-white);
}
.s-branca .faq { background: var(--yd-paper); border-color: transparent; }
.faq__item + .faq__item { border-top: 1px solid var(--yd-line); }
.faq__pergunta { margin: 0; font: inherit; }
.faq__botao {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 32px;
  gap: var(--sp-4);
  align-items: center;
  width: 100%;
  min-height: 64px;
  padding: 18px 0;
  border: 0;
  background: none;
  color: var(--yd-ink);
  font-size: var(--fs-h4);
  font-size: clamp(15px, .9rem + .2vw, 17px);
  font-weight: 700;
  line-height: 1.4;
  text-align: left;
}
/* + / − num quadrado de cantos do ícone: laranja quando aberto. */
.faq__sinal {
  position: relative;
  width: 32px; height: 32px;
  border-radius: 10px;
  background: var(--yd-mist);
  transition: background var(--dur-2) var(--ease);
}
.faq__sinal::before,
.faq__sinal::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 12px; height: 2px;
  border-radius: 2px;
  background: var(--yd-ink);
  transform: translate(-50%, -50%);
  transition: transform var(--dur-2) var(--ease);
}
.faq__sinal::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq__botao:hover .faq__sinal { background: var(--yd-orange-100); }
.faq__item.is-aberto .faq__sinal { background: var(--yd-orange-500); }
.faq__item.is-aberto .faq__sinal::after { transform: translate(-50%, -50%) rotate(0deg); }

.faq__resposta { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-2) var(--ease); }
.faq__item.is-aberto .faq__resposta { grid-template-rows: 1fr; }
.faq__resposta > div { overflow: hidden; }
.faq__resposta p { margin: 0; padding: 0 48px 22px 0; color: var(--yd-slate); font-size: 15px; line-height: 1.75; max-width: 72ch; }
@media (max-width: 560px) { .faq__resposta p { padding-right: 0; } }

.faq__mais { margin-top: var(--sp-4); }

/* ── CTA final (faixa laranja) ─────────────────────────────────────────── */

.cta-final {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding-block: clamp(56px, 7vw, 112px);
  background: var(--yd-orange-500);
  color: var(--yd-ink);
}
/* O símbolo em marca-d'água, cortado pela borda (mono branco sobre laranja). */
.cta-final::before {
  content: "";
  position: absolute;
  right: -3%;
  top: 50%;
  z-index: -1;
  width: min(520px, 62vw);
  aspect-ratio: 39.5 / 38.1;
  background: url("../img/brand/simbolo-branco.svg") center / contain no-repeat;
  opacity: .16;
  transform: translateY(-50%) rotate(-8deg);
}
.cta-final__grade { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-8); }
.cta-final__texto { display: grid; gap: var(--sp-3); max-width: 760px; }
/* Grafite sobre laranja: 5.3:1. */
.cta-final__titulo {
  margin: 0;
  font-size: clamp(1.625rem, 1.1rem + 2vw, 3rem);
  font-weight: 800;
  font-stretch: var(--yd-wide);
  line-height: 1.02;
  text-transform: uppercase;
  text-wrap: balance;
}
.cta-final p { margin: 0; font-size: var(--fs-body-l); font-weight: 500; line-height: 1.55; color: var(--yd-ink); max-width: 56ch; }
.cta-final :where(a, button):focus-visible { outline-color: var(--yd-ink); }
.cta-final .btn--escuro { min-height: 58px; padding-inline: 30px; }
@media (max-width: 560px) {
  .cta-final__titulo { font-size: 1.5rem; line-height: 1.08; }
  .cta-final .btn--escuro { width: 100%; }
}
.cta-final .btn--escuro svg { color: var(--yd-whatsapp); }

/* ── rodapé (grafite) ──────────────────────────────────────────────────── */

.rodape { padding-top: var(--section-y); }
.rodape__grade {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(40px, 6vw, 96px);
  padding-bottom: var(--sp-12);
}
@media (max-width: 860px) { .rodape__grade { grid-template-columns: minmax(0, 1fr); } }

.rodape__grade > *, .institucional__corpo > *, .faq__grade > *, .porque__grade > * { min-width: 0; }
.rodape__contato { display: grid; gap: var(--sp-8); align-content: start; }
.rodape__logo { width: 203px; height: auto; }
.rodape__blocos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-8) var(--sp-6); }
@media (max-width: 420px) { .rodape__blocos { grid-template-columns: minmax(0, 1fr); } }
.rodape__bloco { display: grid; gap: 6px; align-content: start; }
.rodape__rotulo { margin: 0; color: var(--yd-orange-500); font-size: 11px; font-weight: 700; font-stretch: var(--yd-wide); letter-spacing: .16em; text-transform: uppercase; }
.rodape__valor { display: inline-flex; align-items: center; gap: 8px; width: fit-content; color: var(--yd-white); font-size: 19px; font-weight: 800; font-stretch: var(--yd-wide); text-decoration: none; white-space: nowrap; }
.rodape__valor svg { width: 18px; height: 18px; color: var(--yd-whatsapp); }
/* Segundo contato de vendas (ligação): menor que o WhatsApp, que é o principal. */
.rodape__valor--fone { font-size: 16px; }
.rodape__valor--fone svg { width: 16px; height: 16px; color: var(--yd-orange-500); }
.s-escura a.rodape__valor { color: var(--yd-white); }
.s-escura a.rodape__valor:hover { color: var(--yd-orange-500); }
.rodape__detalhe { margin: 0; color: var(--yd-on-dark-2); font-size: 13px; line-height: 1.6; }

.rodape__endereco { display: grid; gap: var(--sp-4); align-content: start; }
.rodape__endereco-texto { display: flex; gap: 10px; margin: 0; font-size: 16px; line-height: 1.6; color: var(--yd-white); }
.rodape__endereco-texto svg { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--yd-orange-500); }

/* Mapa: o iframe do Google entra quando o rodapé se aproxima; até lá fica a
   grade com o brilho laranja no lugar do pino. */
.mapa {
  position: relative;
  aspect-ratio: 16 / 8;
  overflow: hidden;
  border: 1px solid var(--yd-line-dark);
  border-radius: var(--r-lg);
  background:
    radial-gradient(circle at 50% 46%, rgba(235, 95, 27, .2), transparent 26%),
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px) 0 0 / 28px 28px,
    var(--yd-ink-800);
}
.mapa iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  opacity: 0;
  transition: opacity var(--dur-3) var(--ease);
}
.mapa.is-carregado iframe { opacity: 1; }
@media (max-width: 560px) { .mapa { aspect-ratio: 4 / 3; } }

.rodape__rota { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

.rodape__inst { border-top: 1px solid var(--yd-line-dark); }
.rodape__institucional {
  margin: 0;
  padding-block: var(--sp-8);
  color: var(--yd-on-dark-3);
  font-size: 12.5px;
  line-height: 1.7;
  max-width: 110ch;
}

.rodape__legal {
  padding: 20px 0 calc(20px + 76px);
  background: #0F0F0F;
  border-top: 1px solid var(--yd-line-dark);
}
@media (min-width: 761px) { .rodape__legal { padding-bottom: 20px; } }
.rodape__legal-linha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  color: var(--yd-on-dark-3);
  font-size: 12px;
  line-height: 1.6;
}
.rodape__legal-marca { display: inline-flex; align-items: center; gap: 12px; }
.rodape__legal-marca img { width: 24px; height: auto; }
.rodape__legal-links { display: inline-flex; flex-wrap: wrap; gap: 6px 20px; }
.rodape__legal-links a,
.rodape__link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--yd-on-dark-2);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.s-escura .rodape__legal-links a { color: var(--yd-on-dark-2); }
.rodape__legal-links a:hover, .rodape__link:hover { color: var(--yd-orange-500); }

/* ── comunicado de segurança (herdado; desligado no config.js) ─────────── */

.aviso {
  position: fixed;
  left: var(--sp-4);
  bottom: var(--sp-4);
  z-index: 80;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  max-width: 400px;
  padding: 16px;
  border: 1px solid var(--yd-line-dark);
  border-radius: var(--r-lg);
  background: var(--yd-ink-92);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  color: var(--yd-white);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .4);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.aviso.is-visivel { opacity: 1; transform: none; }
.aviso__icone svg { width: 22px; height: 22px; color: var(--yd-orange-500); }
.aviso__selo { margin: 0; color: var(--yd-orange-500); font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.aviso__titulo { margin: 2px 0 4px; font-size: 14px; font-weight: 700; }
.aviso__texto { margin: 0; color: var(--yd-on-dark-2); font-size: 12.5px; line-height: 1.5; }
.aviso__acoes { display: flex; gap: 8px; margin-top: 10px; }
.aviso__botao { min-height: 36px; padding: 0 12px; border: 1px solid var(--yd-line-dark); border-radius: var(--r-sm); background: none; color: var(--yd-white); font-size: 12px; font-weight: 700; }
.aviso__botao--detalhes { border-color: var(--yd-orange-500); color: var(--yd-orange-500); }
.aviso__fechar { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; background: none; color: var(--yd-on-dark-2); }
.aviso__fechar svg { width: 16px; height: 16px; }
@media (max-width: 560px) { .aviso { left: var(--sp-3); right: 84px; max-width: none; } }

.alerta { position: fixed; inset: 0; z-index: 105; display: grid; place-items: center; padding: var(--sp-4); visibility: hidden; opacity: 0; transition: opacity var(--dur-2), visibility 0s linear 250ms; }
.alerta.is-aberto { visibility: visible; opacity: 1; transition: opacity var(--dur-2), visibility 0s; }
.alerta__scrim { position: absolute; inset: 0; background: rgba(23, 23, 23, .78); }
.alerta__caixa { position: relative; display: grid; gap: var(--sp-4); width: min(560px, 100%); max-height: 90vh; overflow-y: auto; padding: var(--sp-8); border-radius: var(--r-lg); background: var(--yd-ink); color: var(--yd-white); border: 1px solid var(--yd-line-dark); }
.alerta__fechar { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: var(--r-md); background: rgba(255, 255, 255, .06); color: var(--yd-white); }
.alerta__fechar svg { width: 18px; height: 18px; }
.alerta__selo { margin: 0; color: var(--yd-orange-500); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.alerta__titulo { margin: 0; font-size: 22px; font-weight: 800; font-stretch: var(--yd-wide); line-height: 1.15; text-transform: uppercase; }
.alerta__titulo:focus { outline: none; }
.alerta__texto { margin: 0; color: var(--yd-on-dark-2); font-size: 14.5px; line-height: 1.65; }
.alerta__dominios { display: grid; gap: 8px; }
.alerta__dominio { display: grid; gap: 4px; padding: 12px 14px; border-radius: var(--r-md); background: rgba(255, 255, 255, .04); border: 1px solid var(--yd-line-dark); }
.alerta__dominio-rotulo { color: var(--yd-on-dark-3); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.alerta__dominio-valor, .alerta__dominio-lista li { display: flex; align-items: center; gap: 8px; }
.alerta__dominio-valor svg { width: 18px; height: 18px; color: var(--yd-whatsapp); }
.alerta__dominio-lista { margin: 0; padding: 0; list-style: none; color: var(--yd-danger-claro); }
.alerta__dominio-lista svg { width: 16px; height: 16px; }
.alerta__lista { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.alerta__item { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; font-size: 13.5px; color: var(--yd-on-dark-2); }
.alerta__item p { margin: 0; }
.alerta__item svg { width: 18px; height: 18px; }
.alerta__item--ok svg { color: var(--yd-whatsapp); }
.alerta__item--nao svg { color: var(--yd-star); }
.alerta__acoes { display: flex; flex-wrap: wrap; gap: 10px; }

/* ── modal de detalhes ─────────────────────────────────────────────────── */

.modal {
  --palco: var(--yd-mist);
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: var(--sp-6);
  visibility: hidden;
  opacity: 0;
  /* Visível NA HORA ao abrir e só no fim do fade ao fechar: com visibility em
     transição nos dois sentidos o navegador recusava o focus(). */
  transition: opacity var(--dur-2) var(--ease), visibility 0s linear 250ms;
}
.modal.is-aberto { visibility: visible; opacity: 1; transition: opacity var(--dur-2) var(--ease), visibility 0s; }
.modal__scrim { position: absolute; inset: 0; background: rgba(23, 23, 23, .74); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }

/* Altura DEFINIDA (não só max-height): no Safari o painel crescia além da
   caixa e o botão de compra sumia. */
.modal__caixa {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  grid-template-rows: minmax(0, 1fr);
  width: min(1280px, 100%);
  height: min(90vh, 820px);
  overflow: hidden;
  border-radius: var(--r-xl);
  background: var(--yd-white);
  box-shadow: var(--sh-lg), 0 30px 80px rgba(0, 0, 0, .35);
  transform: translateY(16px) scale(.985);
  transition: transform var(--dur-3) var(--ease);
}
.modal.is-aberto .modal__caixa { transform: none; }

/* A galeria leva o palco da cor escolhida numa faixa no topo: o modal troca
   o tom junto com a foto (styleguide). */
.modal__galeria {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  min-height: 0;
  background: var(--yd-white);
}
.modal__galeria::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  z-index: 1;
  height: 6px;
  background: var(--palco);
  transition: background var(--dur-3) var(--ease);
  pointer-events: none;
}

.modal__slider {
  display: flex;
  min-height: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  cursor: grab;
}
.modal__slider::-webkit-scrollbar { display: none; }
.modal__slider.is-arrastando { cursor: grabbing; scroll-snap-type: none; }
.modal__slider:focus-visible { outline-offset: -4px; }

.modal__slide {
  position: relative;
  isolation: isolate;
  flex: 0 0 100%;
  display: grid;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  place-items: center;
  min-width: 0;
  overflow: hidden;
  scroll-snap-align: center;
  background: var(--fundo, var(--yd-white));
}
/* Foto de ambiente: a sobra do `contain` é a própria foto, desfocada. */
.modal__slide.is-ambiente::before {
  content: "";
  position: absolute;
  inset: -40px;
  z-index: -1;
  background: var(--foto) center / cover no-repeat;
  filter: blur(28px) saturate(1.1) brightness(.85);
  transform: scale(1.1);
}
.modal__slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  cursor: zoom-in;
  -webkit-user-drag: none;
  user-select: none;
}

/* Setas do slider: só onde há mouse; no toque o dedo resolve. */
.modal__seta-slide {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: none;
  place-items: center;
  width: 44px; height: 44px;
  margin-top: -44px;
  padding: 0;
  border: 1px solid rgba(23, 23, 23, .1);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .88);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--yd-ink);
  transition: background var(--dur-1), color var(--dur-1);
}
.modal__seta-slide:hover { background: var(--yd-ink); color: var(--yd-white); }
.modal__seta-slide svg { width: 16px; height: 16px; }
.modal__seta-slide--anterior { left: 16px; }
.modal__seta-slide--proxima { right: 16px; }
@media (hover: hover) and (pointer: fine) {
  .modal__galeria.tem-miniaturas .modal__seta-slide { display: grid; }
}

.modal__miniaturas {
  display: flex;
  gap: var(--sp-2);
  padding: var(--sp-3);
  overflow-x: auto;
  scrollbar-width: thin;
  border-top: 1px solid var(--yd-line);
  background: var(--yd-paper);
}
.modal__mini {
  flex: none;
  width: 76px;
  aspect-ratio: 180 / 127;
  padding: 0;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: 10px;
  background: var(--yd-white);
  opacity: .72;
  transition: border-color var(--dur-1), opacity var(--dur-1);
}
.modal__mini img { width: 100%; height: 100%; object-fit: cover; }
.modal__mini:hover { opacity: 1; }
.modal__mini[aria-current="true"] { border-color: var(--yd-orange-500); opacity: 1; }

/* Painel grafite em três faixas: cabeçalho parado, miolo rolando, base
   parada com cor e as duas saídas (a conversão). */
.modal__painel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-height: 0;
  overflow: hidden;
  background: var(--yd-ink);
  color: var(--yd-white);
}
.modal__topo { display: grid; gap: 10px; padding: var(--sp-8) var(--sp-8) var(--sp-4); }
.modal__eyebrow { margin: 0; color: var(--yd-orange-500); font-size: 11px; font-weight: 700; font-stretch: var(--yd-wide); letter-spacing: .16em; text-transform: uppercase; }
.modal__nome { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.modal__titulo { margin: 0; font-size: clamp(28px, 2.6vw, 38px); font-weight: 800; font-stretch: var(--yd-wide); line-height: 1; text-transform: uppercase; }
.modal__titulo:focus { outline: none; }
.selos--modal .selo--exige { background: var(--yd-ink-700); }
.modal__tags-texto { margin: 0; color: var(--yd-on-dark-3); font-size: 12px; font-weight: 700; font-stretch: var(--yd-wide); letter-spacing: .12em; text-transform: uppercase; }

.modal__corpo {
  display: grid;
  gap: 22px;
  align-content: start;
  min-height: 0;
  padding: 0 var(--sp-8) var(--sp-6);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .2) transparent;
}
.specs--modal { border-color: var(--yd-line-dark); }
.specs--modal .spec { padding: 14px 14px; }
.specs--modal .spec + .spec { border-left-color: var(--yd-line-dark); }
.specs--modal .spec dd b { color: var(--yd-orange-500); font-size: 26px; }
.specs--modal .spec dd span { color: var(--yd-white); font-size: 11px; }
.specs--modal .spec dt { color: var(--yd-on-dark-3); font-size: 10px; }

.modal__secao-rotulo { margin: 0 0 6px; color: var(--yd-orange-500); font-size: 11px; font-weight: 700; font-stretch: var(--yd-wide); letter-spacing: .16em; text-transform: uppercase; }

.modal__ficha { display: grid; margin: 0; font-size: 13.5px; }
/* O rótulo fica com até 45% da linha; o valor quebra linha em vez de passar
   por cima do rótulo no celular. */
.modal__ficha div {
  display: grid;
  grid-template-columns: fit-content(45%) minmax(0, 1fr);
  gap: var(--sp-4);
  padding-block: 10px;
  border-bottom: 1px solid var(--yd-line-dark);
}
.modal__ficha dt { color: var(--yd-on-dark-3); }
.modal__ficha dd { margin: 0; text-align: right; font-weight: 600; line-height: 1.5; }
.ficha__nota { display: block; margin-top: 2px; color: var(--yd-on-dark-3); font-size: 12px; font-weight: 400; line-height: 1.45; }

.modal__equipamentos ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.modal__equipamentos li {
  padding: 7px 12px;
  border: 1px solid var(--yd-line-dark);
  border-radius: var(--r-pill);
  color: var(--yd-on-dark-2);
  font-size: 12.5px;
  line-height: 1.4;
}
.modal__legal { margin: 0; color: var(--yd-on-dark-3); font-size: 12px; line-height: 1.6; }

.modal__base {
  display: grid;
  gap: 14px;
  padding: var(--sp-4) var(--sp-8) 20px;
  border-top: 1px solid var(--yd-line-dark);
  background: #101010;
}
.modal__linha { display: grid; gap: 12px; }
.modal__linha > div:empty { display: none; }
.preco--modal .preco__rotulo { color: var(--yd-on-dark-3); }
.preco--modal .preco__valor { font-size: 26px; color: var(--yd-white); }
.preco--modal .preco__parcelas { color: var(--yd-on-dark-2); font-size: 13px; }
.preco--modal .preco__de { color: var(--yd-on-dark-3); font-size: 14px; }
.preco--modal .preco__selo { background: var(--yd-orange-500); color: var(--yd-ink); }
.preco--modal .preco__selo::before { background: var(--yd-ink); }
.modal__cores { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 10px; }
.modal__cores-rotulo { margin: 0; color: var(--yd-on-dark-3); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.modal__cores-rotulo strong { color: var(--yd-white); white-space: nowrap; }
.modal__swatches { display: flex; gap: 2px; margin-right: -5px; }
.modal__swatch { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: none; }
.modal__swatch i {
  width: 24px; height: 24px;
  overflow: hidden;
  border-radius: 50%;
  background-repeat: no-repeat;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3);
  transition: box-shadow var(--dur-1), transform var(--dur-1);
}
.modal__swatch:hover i { transform: scale(1.12); }
.modal__swatch[aria-pressed="true"] i { box-shadow: 0 0 0 2px #101010, 0 0 0 4px var(--yd-orange-500), inset 0 0 0 1px rgba(255, 255, 255, .3); }

.modal__acoes { display: grid; grid-template-columns: 1.15fr .85fr; gap: 10px; }
.modal__acoes .btn { min-height: 52px; padding: 0 14px; }
.modal__acoes .btn--contorno { border-color: rgba(255, 255, 255, .5); color: var(--yd-white); }
.modal__acoes .btn--contorno:hover { background: var(--yd-white); border-color: var(--yd-white); color: var(--yd-ink); }
.modal__microcopy { margin: 0; color: var(--yd-on-dark-3); font-size: 12px; line-height: 1.45; text-align: center; }

.modal__navegacao {
  position: absolute;
  top: var(--sp-4);
  left: var(--sp-4);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 4px;
  border-radius: var(--r-md);
  background: rgba(23, 23, 23, .78);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.modal__passo { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: var(--r-sm); background: none; color: var(--yd-white); transition: background var(--dur-1), color var(--dur-1); }
.modal__passo:hover { background: var(--yd-orange-500); color: var(--yd-ink); }
.modal__passo svg { width: 16px; height: 16px; }
.modal__posicao { min-width: 6ch; text-align: center; color: var(--yd-white); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }

.modal__fechar {
  position: absolute;
  top: var(--sp-4);
  right: var(--sp-4);
  z-index: 3;
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  padding: 0;
  border: 1px solid var(--yd-line-dark);
  border-radius: var(--r-md);
  background: rgba(23, 23, 23, .78);
  color: var(--yd-white);
  transition: background var(--dur-1), color var(--dur-1);
}
.modal__fechar:hover { background: var(--yd-orange-500); color: var(--yd-ink); }
.modal__fechar svg { width: 18px; height: 18px; }

@media (max-width: 900px) {
  .modal { padding: 0; align-items: stretch; }
  .modal__caixa {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    width: 100%;
    height: 100vh;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
  }
  /* Altura EXPLÍCITA (não aspect-ratio): o Safari não dimensiona a trilha 1fr
     da galeria pelo aspect-ratio do slider e a foto sumia. */
  .modal__slider { height: min(70vw, 38vh); height: min(70vw, 38dvh); }
  .modal__galeria.tem-miniaturas .modal__slider { height: min(70vw, calc(38vh - 56px)); height: min(70vw, calc(38dvh - 56px)); }
  .modal__miniaturas { padding: var(--sp-2) var(--sp-3); }
  .modal__mini { width: 56px; }
  .modal__topo { padding: 18px var(--sp-6) var(--sp-3); }
  .modal__corpo { padding: 0 var(--sp-6) var(--sp-4); gap: var(--sp-4); }
  .modal__base { padding: var(--sp-3) var(--sp-6) calc(14px + env(safe-area-inset-bottom)); gap: 10px; }
  .specs--modal .spec dd b { font-size: 21px; }
}
/* Celular: com o preço na base, as três faixas fixas deixavam 16 px para a
   ficha a 360 × 740. A caixa inteira rola (galeria, título, ficha) e só a
   base, com preço, cor e os dois botões, fica presa embaixo — como na
   página do modelo. */
@media (max-width: 900px) {
  /* max-content nas duas linhas, não auto: com a caixa na altura da tela,
     uma linha auto encolhia até caber (a galeria chegava a 0 px e a base não
     tinha por onde grudar). */
  .modal:not(.modal--pagina) .modal__caixa {
    grid-template-rows: max-content max-content;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  /* O X acompanha a rolagem; as setas de modelo ficam com a galeria. */
  .modal:not(.modal--pagina) .modal__fechar { position: fixed; top: calc(var(--sp-4) + env(safe-area-inset-top)); right: var(--sp-4); }
  .modal:not(.modal--pagina) .modal__painel { grid-template-rows: auto auto auto; overflow: visible; }
  .modal:not(.modal--pagina) .modal__corpo { overflow: visible; }
  .modal:not(.modal--pagina) .modal__base {
    position: sticky;
    bottom: 0;
    z-index: 2;
    background: rgba(16, 16, 16, .96);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
}
@media (max-width: 339px) {
  .modal__acoes { grid-template-columns: minmax(0, 1fr); }
}

/* ── página do modelo (/modelos-de-motos/<slug>/) ─────────────────────────
   O MESMO bloco do modal, fixo na página (`.modal--pagina`, gerado pelo
   tools/gerar-seo.js). Desktop: a caixa do modal na altura da tela.
   Celular: a página corre, e a base com o "Comprar" gruda embaixo enquanto
   a ficha passa; solta ao chegar no "Compare com". */
.produto {
  margin-top: calc(var(--yd-header) * -1);
  padding: calc(var(--yd-header) + var(--sp-4)) 0 var(--sp-16);
  background: var(--yd-ink);
  color: var(--yd-white);
}
.trilha { margin: 0 0 var(--sp-4); }
.trilha ol { display: flex; flex-wrap: wrap; gap: 4px 8px; margin: 0; padding: 0; list-style: none; color: var(--yd-on-dark-3); font-size: 12.5px; line-height: 1.5; }
.trilha li + li::before { content: "/"; margin-right: 8px; color: rgba(255, 255, 255, .3); }
.trilha a { color: var(--yd-on-dark-2); text-decoration: none; }
.trilha a:hover { color: var(--yd-orange-500); }
.trilha [aria-current="page"] { color: var(--yd-white); font-weight: 700; }

.modal--pagina { position: relative; inset: auto; z-index: auto; display: block; padding: 0; visibility: visible; opacity: 1; transition: none; }
.modal--pagina .modal__caixa {
  height: min(calc(100vh - var(--yd-header) - 88px), 820px);
  min-height: 560px;
  transform: none;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
}
/* O "Comprar" da própria página faz o papel do botão flutuante. */
.pagina-modelo .flutuante { display: none; }

.comparar__topo { margin-bottom: var(--sp-8); }
.comparar__mais { display: flex; justify-content: center; margin-top: var(--sp-8); }

@media (max-width: 900px) {
  .produto { padding-bottom: var(--sp-12); }
  /* `overflow: clip` (não hidden) mantém o canto arredondado SEM virar
     caixa de rolagem: com hidden, o `sticky` da base não grudava. */
  .modal--pagina .modal__caixa { height: auto; min-height: 0; max-height: none; border-radius: var(--r-lg); overflow: clip; }
  .modal--pagina .modal__painel { grid-template-rows: auto auto auto; overflow: visible; }
  .modal--pagina .modal__corpo { overflow: visible; }
  .modal--pagina .modal__base {
    position: sticky;
    bottom: 0;
    z-index: 2;
    background: rgba(16, 16, 16, .95);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
}

/* ── página institucional (/concessionaria-yadea-itapetininga/) ────────────── */

.institucional__topo {
  margin-top: calc(var(--yd-header) * -1);
  padding: calc(var(--yd-header) + var(--sp-16)) 0 var(--sp-16);
  background: var(--yd-ink);
  color: var(--yd-white);
}
.institucional__topo .t-h1 { max-width: 18ch; margin-top: var(--sp-4); }
.institucional__topo .t-lead { margin-top: var(--sp-6); color: var(--yd-on-dark-2); }
.institucional__corpo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: clamp(32px, 6vw, 96px); align-items: start; }
.institucional__texto { display: grid; gap: var(--sp-12); }
.institucional__texto section { display: grid; gap: var(--sp-4); }
.institucional__texto h2 { margin: 0; font-size: var(--fs-h3); font-weight: 800; font-stretch: var(--yd-wide); line-height: 1.15; text-transform: uppercase; }
.institucional__texto p { margin: 0; color: var(--yd-slate); line-height: 1.75; max-width: 68ch; }
.ficha-loja {
  display: grid;
  gap: var(--sp-4);
  padding: var(--sp-8);
  border-radius: var(--r-lg);
  background: var(--yd-white);
  border: 1px solid var(--yd-line);
}
.ficha-loja dl { display: grid; gap: var(--sp-4); margin: 0; }
.ficha-loja dt { color: var(--yd-orange-700); font-size: 11px; font-weight: 700; font-stretch: var(--yd-wide); letter-spacing: .14em; text-transform: uppercase; }
.ficha-loja dd { margin: 2px 0 0; font-weight: 600; line-height: 1.5; }
@media (min-width: 941px) { .ficha-loja { position: sticky; top: calc(var(--yd-header) + var(--sp-8)); } }
.ficha-loja dd { overflow-wrap: anywhere; }
@media (max-width: 560px) { .ficha-loja { padding: var(--sp-6) var(--sp-4); } }
@media (max-width: 940px) { .institucional__corpo { grid-template-columns: minmax(0, 1fr); } }

/* ── lightbox ──────────────────────────────────────────────────────────── */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-4);
  padding: clamp(16px, 4vw, 48px);
  background: rgba(12, 12, 12, .96);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--dur-2), visibility 0s linear 250ms;
}
.lightbox.is-aberto { visibility: visible; opacity: 1; transition: opacity var(--dur-2), visibility 0s; }
.lightbox__foto { grid-column: 2; justify-self: center; max-width: 100%; max-height: 86vh; object-fit: contain; border-radius: var(--r-md); background: var(--yd-white); cursor: zoom-out; transform: scale(.97); transition: transform var(--dur-3) var(--ease); }
.lightbox.is-aberto .lightbox__foto { transform: none; }
.lightbox__seta,
.lightbox__fechar {
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .06);
  color: var(--yd-white);
  transition: background var(--dur-1), color var(--dur-1), border-color var(--dur-1);
}
.lightbox__seta:hover, .lightbox__fechar:hover { background: var(--yd-orange-500); border-color: var(--yd-orange-500); color: var(--yd-ink); }
.lightbox__seta svg, .lightbox__fechar svg { width: 18px; height: 18px; }
.lightbox__seta--anterior { grid-column: 1; }
.lightbox__seta--proxima { grid-column: 3; }
.lightbox__fechar { position: absolute; top: var(--sp-4); right: var(--sp-4); }
.lightbox__contador { position: absolute; left: 50%; bottom: var(--sp-4); margin: 0; transform: translateX(-50%); color: var(--yd-on-dark-2); font-size: 12px; font-weight: 700; letter-spacing: .14em; }
@media (max-width: 700px) {
  .lightbox { grid-template-columns: minmax(0, 1fr); padding: var(--sp-4); }
  .lightbox__foto { grid-column: 1; max-height: 76vh; }
  .lightbox__seta { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; }
  .lightbox__seta--anterior { left: var(--sp-3); }
  .lightbox__seta--proxima { right: var(--sp-3); }
}

/* ── consentimento ─────────────────────────────────────────────────────── */

.consentimento {
  position: fixed;
  left: var(--sp-4);
  bottom: var(--sp-4);
  z-index: 96;
  display: grid;
  gap: 12px;
  max-width: 380px;
  padding: 16px 18px;
  border: 1px solid var(--yd-line-dark);
  border-radius: var(--r-lg);
  background: var(--yd-ink-92);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .4);
  color: var(--yd-white);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.consentimento.is-visivel { opacity: 1; transform: none; }
.consentimento__texto p { margin: 0; color: var(--yd-on-dark-2); font-size: 13px; line-height: 1.6; }
.consentimento__texto a { color: var(--yd-orange-500); }
.consentimento__acoes { display: flex; gap: var(--sp-2); }
.consentimento__acoes .btn { min-height: 42px; padding: 0 16px; font-size: 11px; }
@media (max-width: 560px) {
  .consentimento { left: var(--sp-3); right: var(--sp-3); bottom: var(--sp-3); max-width: none; }
  /* Sobe por transform, não por `bottom`: mudar `bottom` sem interação
     conta como deslocamento de layout (CLS 0,022 medido). */
  body:has(.consentimento.is-visivel) .flutuante.is-visivel { transform: translateY(-134px); }
}

/* ── botão flutuante de WhatsApp ───────────────────────────────────────── */

/* 56 px, #25D366, canto inferior direito, aria-label obrigatório (styleguide). */
.flutuante {
  position: fixed;
  right: var(--sp-6);
  bottom: var(--sp-6);
  z-index: 70;
  display: grid;
  place-items: center;
  width: 58px; height: 58px;
  border-radius: 50%;
  background: var(--yd-whatsapp);
  color: var(--yd-white);
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(37, 211, 102, .35);
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease), visibility var(--dur-2), box-shadow var(--dur-1);
}
.flutuante.is-visivel { opacity: 1; visibility: visible; transform: none; }
.flutuante:hover { color: var(--yd-white); box-shadow: 0 10px 30px rgba(37, 211, 102, .55); transform: translateY(-2px); }
.flutuante svg { width: 30px; height: 30px; }
/* Um anel que se expande poucas vezes e para: chama atenção sem virar
   animação infinita de decoração. */
@keyframes yd-radar {
  0% { transform: scale(1); opacity: .5; }
  80%, 100% { transform: scale(1.8); opacity: 0; }
}
.flutuante::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--yd-whatsapp);
  animation: yd-radar 2.6s var(--ease) 1.5s 4 both;
}
@media (max-width: 560px) { .flutuante { right: var(--sp-4); bottom: var(--sp-4); width: 56px; height: 56px; } }

/* ── motion: estado inicial das entradas ───────────────────────────────── */

/* Só esconde depois que o <head> confirmou JS. Se o GSAP não vier, motion.js
   (ou o relógio do <head>) põe `sem-anima` e tudo aparece. */
.js:not(.sem-anima) [data-anima] { opacity: 0; }
.js:not(.sem-anima) .hero__titulo[data-anima-linhas] { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .js [data-anima], .js .hero__titulo[data-anima-linhas] { opacity: 1 !important; transform: none !important; }
  .flutuante::before { display: none; }
}

@media print {
  .header, .flutuante, .menu, .modal, .lightbox, .consentimento, .hero__midia, .destaque__fundo { display: none !important; }
}