/* ==========================================================================
   Kawasaki Jet — sistema de design
   Celular primeiro. Tudo abaixo é escrito para 360px e cresce a partir daí.
   ========================================================================== */

/* --- Fontes: auto-hospedadas. Nada de Google Fonts, que custa meio segundo
   de DNS + conexão logo no caminho crítico. swap para o texto nunca sumir. --- */
@font-face{font-family:'Barlow';src:url('../fontes/barlow-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow';src:url('../fontes/barlow-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow';src:url('../fontes/barlow-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow Condensed';src:url('../fontes/cond-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow Condensed';src:url('../fontes/cond-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

:root{
  /* cor */
  --verde:#5FB52B;          /* só sobre fundo escuro ou como preenchimento */
  --verde-esc:#4C921F;
  /* Branco sobre #5FB52B dá 2,58:1 e reprova na WCAG AA. Este tom escuro dá
     5,11:1 no branco e é o verde de TEXTO e de botão sobre fundo claro. */
  --verde-texto:#3F7C1A;
  --preto:#0A0A0A;
  --grafite:#1A1A1A;
  --grafite-2:#262626;
  --tinta:#141414;
  --cinza:#6E6E6E;
  --cinza-c:#9A9A9A;
  --linha:#E2E2E2;
  --fundo:#F2F2F2;
  --branco:#FFFFFF;
  --zebra:#EDEDED;
  --vermelho:#C4161C;

  /* tipografia */
  --cond:'Barlow Condensed','Arial Narrow',Impact,sans-serif;
  --texto:'Barlow',system-ui,-apple-system,'Segoe UI',sans-serif;

  /* Escala de 7 degraus. Cada passo é perceptivelmente maior que o anterior;
     tamanho fora desta lista é bug, não escolha. */
  --t1:0.75rem;    /* 12 — etiqueta, legenda, nota de rodapé */
  --t2:0.875rem;   /* 14 — apoio, tabela, rodapé */
  --t3:1rem;       /* 16 — corpo */
  --t4:1.125rem;   /* 18 — corpo destacado, chamada */
  --t5:1.5rem;     /* 24 — título de cartão */
  --t6:2rem;       /* 32 — título de bloco */
  --t7:clamp(2rem,5.4vw,3.4rem);   /* título de seção */
  --t8:clamp(2.4rem,8vw,5rem);     /* hero */

  /* espaço — escala de 4 degraus, sem valor solto no meio do caminho */
  --e1:8px; --e2:16px; --e3:24px; --e4:40px; --e5:64px; --e6:96px;

  /* a sombra 3D dos cards, que é a assinatura da grade */
  --sombra-3d:0 18px 30px -12px rgba(0,0,0,.28), 0 4px 8px rgba(0,0,0,.06);
  --sombra-3d-alta:0 28px 44px -14px rgba(0,0,0,.36), 0 6px 12px rgba(0,0,0,.08);
  --sombra-menu:0 6px 24px rgba(0,0,0,.18);

  --topo:64px;          /* altura do menu */
  /* Medido no navegador: a barra fecha em 74px com o botão de 48px dentro.
     Se ficar menor que a altura real, ela come o fim da página. */
  --barra:74px;
  --largura:1340px;
  --curva:6px;
}

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

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--topo) + 16px)}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

body{
  font-family:var(--texto);
  font-size:16px;line-height:1.6;
  color:var(--tinta);background:var(--branco);
  -webkit-font-smoothing:antialiased;
  /* a barra fixa do celular não pode comer o fim da página */
  padding-bottom:var(--barra);
  overflow-x:hidden;
}
@media(min-width:900px){body{padding-bottom:0}}

img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul{list-style:none}

/* Foco visível de verdade — teclado tem que enxergar onde está. */
:focus-visible{outline:3px solid var(--verde);outline-offset:2px}

/* --- tipografia -------------------------------------------------------- */
h1,h2,h3,h4,.cond{font-family:var(--cond);font-weight:700;line-height:.98;text-transform:uppercase;letter-spacing:.005em}
h1{font-size:var(--t8)}
h2{font-size:var(--t7)}
h3{font-size:var(--t6)}
h4{font-size:var(--t4)}

.olho{font-family:var(--cond);font-weight:600;text-transform:uppercase;letter-spacing:.14em;font-size:var(--t2);color:var(--verde-texto)}
/* no escuro o verde claro volta, porque lá ele contrasta de sobra */
.secao--escura .olho,.tarja .olho,.hero .olho{color:var(--verde)}
.leve{font-weight:400;color:var(--cinza)}
strong,b{font-weight:700}

/* --- estrutura --------------------------------------------------------- */
.env{width:100%;max-width:var(--largura);margin:0 auto;padding:0 var(--e2)}
@media(min-width:720px){.env{padding:0 var(--e3)}}

.secao{padding:var(--e5) 0}
@media(min-width:900px){.secao{padding:var(--e6) 0}}
@media(min-width:900px){#modelos{padding:var(--e6) 0}}
.secao--escura{background:var(--grafite);color:var(--branco)}
.secao--escura .leve{color:var(--cinza-c)}
.secao--cinza{background:var(--fundo)}

.cabeca{margin-bottom:var(--e4);max-width:60ch}
.cabeca h2{margin:var(--e1) 0}
/* A página inteira usa cabeçalho centralizado. Misturar centralizado com
   alinhado à esquerda faz a leitura pular de lado a cada seção. */
.cabeca.centro{text-align:center;max-width:76ch}
.cabeca.centro p{margin-left:auto;margin-right:auto}
/* Título de seção precisa de largura para respirar; travado em 60ch de CORPO
   ele quebrava em quatro linhas, porque o condensado rende muito mais letra
   por linha que o texto. */
@media(min-width:900px){
  .cabeca{max-width:72ch}
  .cabeca h2{max-width:20ch}
  .cabeca.centro h2{max-width:26ch;margin-left:auto;margin-right:auto}
  .cabeca p{font-size:var(--t4);max-width:62ch}
  .cabeca.centro p{margin-left:auto;margin-right:auto}
}
.centro{text-align:center;margin-left:auto;margin-right:auto}

/* --- botões ------------------------------------------------------------ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--cond);font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;font-size:1.05rem;
  padding:15px 28px;min-height:52px;
  border-radius:100px;
  transition:transform .16s ease,background .16s ease,box-shadow .16s ease;
  text-align:center;
}
.btn--verde{background:var(--verde-texto);color:var(--branco);box-shadow:0 6px 16px rgba(63,124,26,.34)}
.btn--verde:hover{background:#356816;box-shadow:0 8px 20px rgba(63,124,26,.34)}
.btn--preto{background:var(--preto);color:var(--branco);border-radius:var(--curva)}
.btn--preto:hover{background:var(--grafite-2)}
.btn--linha{border:2px solid currentColor}
.btn--linha:hover{background:var(--preto);color:var(--branco);border-color:var(--preto)}
.btn--cheio{width:100%}
.btn:active{transform:translateY(0)}

/* ==========================================================================
   MENU — pílula branca flutuante sobre o hero
   ========================================================================== */
/* Sticky: nasce no rodapé do hero e desce junto ao rolar, sempre em pílula.
   A forma nunca muda — só a sombra ganha peso quando ela encosta no topo. */
.topo{
  position:sticky;top:10px;z-index:60;
  pointer-events:none;padding:10px 0;
}
.topo--sobre-hero{margin-top:calc(-1 * (var(--topo) + 20px))}
/* Na home ele sobe sobre a base do hero pela margem negativa. */
/* A margem negativa precisa valer a altura TOTAL do menu — padding incluso —
   senão sobra uma faixa branca entre a base do hero e a seção seguinte. */
.topo--sobre-hero{margin-top:calc(-1 * (var(--topo) + 20px));position:sticky}
.topo--sobre-hero + *{margin-top:0}
/* Ao rolar, a pílula só ganha sombra — a forma nunca muda. */
.topo[data-grudado='sim'] .topo__pilula{box-shadow:0 10px 32px rgba(0,0,0,.24)}
.topo__caixa{
  max-width:var(--largura);margin:0 auto;padding:0 var(--e2);
}
.topo__pilula{
  pointer-events:auto;
  display:flex;align-items:center;gap:var(--e2);
  background:var(--branco);
  border-radius:100px;
  box-shadow:var(--sombra-menu);
  padding:10px 10px 10px 20px;
  height:var(--topo);
}
.topo__marca{display:flex;align-items:center;gap:10px;margin-right:auto;min-width:0;min-height:44px}
.topo__marca img,.topo__marca svg{height:26px;width:auto;flex:none}
.topo__marca span{
  font-family:var(--cond);font-weight:700;text-transform:uppercase;
  font-size:1.05rem;line-height:.95;letter-spacing:.01em;white-space:nowrap;
}
.topo__marca small{display:block;font-size:.62rem;letter-spacing:.16em;color:var(--cinza);font-weight:600}

.topo__links{display:none}
.topo__cta{display:none}

/* hambúrguer */
.topo__menu{
  display:grid;place-items:center;width:44px;height:44px;flex:none;
  border-radius:100px;background:var(--fundo);
}
.topo__menu span{
  display:block;width:20px;height:2px;background:var(--preto);position:relative;
  transition:background .2s;
}
.topo__menu span::before,.topo__menu span::after{
  content:'';position:absolute;left:0;width:20px;height:2px;background:var(--preto);
  transition:transform .24s ease;
}
.topo__menu span::before{top:-6px}
.topo__menu span::after{top:6px}
.topo[data-aberto='sim'] .topo__menu span{background:transparent}
.topo[data-aberto='sim'] .topo__menu span::before{transform:translateY(6px) rotate(45deg)}
.topo[data-aberto='sim'] .topo__menu span::after{transform:translateY(-6px) rotate(-45deg)}

/* gaveta do celular */
.gaveta{
  pointer-events:auto;
  position:fixed;inset:calc(var(--topo) + var(--e2) + 8px) var(--e2) auto var(--e2);
  background:var(--branco);border-radius:18px;box-shadow:var(--sombra-menu);
  padding:var(--e2);
  max-height:calc(100dvh - var(--topo) - var(--e4));overflow-y:auto;
  opacity:0;visibility:hidden;transform:translateY(-10px);
  transition:opacity .2s ease,transform .2s ease,visibility .2s;
}
.topo[data-aberto='sim'] .gaveta{opacity:1;visibility:visible;transform:translateY(0)}
.gaveta a{
  display:block;padding:13px 12px;font-family:var(--cond);font-weight:700;
  text-transform:uppercase;font-size:1.12rem;border-radius:8px;
}
.gaveta a:hover,.gaveta a[aria-current='page']{background:var(--fundo)}
.gaveta__grupo{border-top:1px solid var(--linha);margin-top:var(--e1);padding-top:var(--e1)}
.gaveta__rot{font-family:var(--cond);font-weight:600;text-transform:uppercase;letter-spacing:.12em;font-size:.72rem;color:var(--cinza);padding:8px 12px 4px}
.gaveta .btn{margin-top:var(--e2)}

@media(min-width:1040px){
  .topo__menu,.gaveta{display:none}
  .topo__links{display:flex;align-items:center;gap:4px}
  .topo__links>li{position:relative}
  .topo__links a{
    display:block;padding:10px 14px;border-radius:100px;
    font-family:var(--cond);font-weight:700;text-transform:uppercase;
    font-size:1.02rem;letter-spacing:.02em;white-space:nowrap;
    transition:background .16s;
  }
  .topo__links a:hover,.topo__links a[aria-current='page']{background:var(--fundo)}
  .topo__cta{display:inline-flex;flex:none}
  .topo__cta.btn{padding:13px 22px;min-height:44px;font-size:.98rem}

  /* submenu de modelos */
  .subm{
    position:absolute;top:calc(100% + 10px);left:0;min-width:230px;
    background:var(--branco);border-radius:14px;box-shadow:var(--sombra-menu);
    padding:10px;opacity:0;visibility:hidden;transform:translateY(-6px);
    transition:opacity .18s,transform .18s,visibility .18s;
  }
  .topo__links li:hover .subm,.topo__links li:focus-within .subm{opacity:1;visibility:visible;transform:translateY(0)}
  .subm a{font-size:.95rem;padding:9px 12px}
}

/* ==========================================================================
   HERO — foto cinematográfica de borda a borda
   ========================================================================== */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;color:var(--branco);overflow:hidden}
@media(min-width:900px){.hero{min-height:100svh}}

.hero__foto{position:absolute;inset:0;z-index:0}
.hero__foto img{width:100%;height:100%;object-fit:cover}
/* Gradiente em duas paradas: escurece a base para o texto e preserva o céu. */
.hero__foto::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.86) 0%,rgba(0,0,0,.55) 34%,rgba(0,0,0,.12) 68%,rgba(0,0,0,.28) 100%);
}
@media(min-width:900px){
  .hero__foto::after{
    background:linear-gradient(to top,rgba(0,0,0,.88) 0%,rgba(0,0,0,.5) 30%,rgba(0,0,0,.08) 62%,rgba(0,0,0,.3) 100%);
  }
}

.hero__corpo{position:relative;z-index:1;width:100%;text-align:center;padding-top:var(--e5);padding-bottom:calc(var(--e6) + var(--barra))}
/* No desktop a barra fixa some, então o respiro volta ao normal. */
@media(min-width:900px){.hero__corpo{padding-top:var(--e6);padding-bottom:calc(var(--e6) + var(--e5))}}
/* A foto é a protagonista, como no site global da Kawasaki: o texto fica
   centralizado, curto e na base, sem caixa pesada roubando a imagem. */
.hero__texto{max-width:none;margin:0 auto}
/* Sem margin-inline:auto a caixa do título encosta à esquerda e só o texto
   dentro dela fica centralizado — o efeito é um hero visivelmente torto. */
.hero h1,.hero__sub,.hero__faixa,.hero .olho{margin-inline:auto}
.hero h1{max-width:none;white-space:nowrap;font-size:clamp(1.5rem,8.4vw,4.4rem)}
.hero .olho{display:block}
@media(min-width:900px){
  .hero h1{font-size:clamp(3rem,5.6vw,4.6rem)}
  .hero .olho{white-space:nowrap}
}
.hero h1{margin:10px auto var(--e2);text-shadow:0 2px 30px rgba(0,0,0,.5)}
.hero__corpo .env{display:flex;flex-direction:column;align-items:center}
.hero__sub{font-size:var(--t4);font-weight:500;max-width:38ch;margin:0 auto var(--e3);color:#EDEDED}
@media(min-width:900px){.hero__sub{font-size:var(--t5);max-width:56ch;font-weight:400}}

/* a faixa de preço: responde "quanto custa" sem sujar a grade de cards */
.hero__faixa{
  display:inline-flex;align-items:baseline;gap:8px;flex-wrap:wrap;
  background:rgba(255,255,255,.13);
  border:1px solid rgba(255,255,255,.26);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border-radius:100px;padding:9px 18px;margin-bottom:var(--e3);
}
.hero__faixa .rot{font-family:var(--cond);font-weight:600;text-transform:uppercase;letter-spacing:.1em;font-size:.76rem;color:#E4E4E4}
.hero__faixa .val{font-family:var(--cond);font-weight:700;font-size:1.4rem;line-height:1}

.hero__acoes{display:flex;flex-direction:column;gap:10px;align-items:center}
@media(min-width:560px){.hero__acoes{flex-direction:row;flex-wrap:wrap;justify-content:center}}
.hero__acoes .btn--linha{color:var(--branco);border-color:rgba(255,255,255,.7);backdrop-filter:blur(4px)}
.hero__acoes .btn--linha:hover{background:var(--branco);color:var(--preto);border-color:var(--branco)}

/* etiqueta do modelo, no canto — igual ao site global */
.hero__modelo{
  position:absolute;right:var(--e2);bottom:calc(var(--e5) + var(--e2));z-index:1;
  font-family:var(--cond);font-weight:600;font-style:italic;
  text-transform:uppercase;letter-spacing:.06em;font-size:.8rem;
  color:rgba(255,255,255,.72);
}
@media(min-width:900px){.hero__modelo{right:var(--e4);bottom:calc(var(--e4) + var(--e3));font-size:.95rem}}

/* ==========================================================================
   MANIFESTO — bloco escuro logo abaixo do hero
   ========================================================================== */
.manifesto{background:var(--grafite);color:var(--branco);text-align:center;padding:var(--e5) 0}
.manifesto h2{max-width:18ch;margin:0 auto var(--e3)}
@media(min-width:900px){
  .manifesto h2{max-width:24ch;font-size:clamp(2.6rem,4.6vw,4rem)}
  .manifesto p{font-size:1.16rem;max-width:64ch}
}
.manifesto p{max-width:56ch;margin:0 auto;color:#D4D4D4;font-size:1.04rem}
.manifesto .verde{color:var(--verde)}

/* ==========================================================================
   CARD DE MODELO — sombra 3D do site Brasil + tabela de infos do global
   ========================================================================== */
.familia{margin-bottom:var(--e5)}
/* Título em cima, chamada embaixo — lado a lado o texto ficava espremido
   contra o condensado do título e quebrava em duas linhas curtas. */
.familia__cabeca{margin-bottom:var(--e3)}
.familia__cabeca.centro{text-align:center}
.familia__cabeca h3{margin-bottom:6px}
.familia__cabeca p{color:var(--cinza);font-size:var(--t3);max-width:none;margin:0 auto}
@media(min-width:900px){
  .familia__cabeca{margin-bottom:var(--e4)}
  .familia__cabeca p{font-size:var(--t4)}
}
.familia__cabeca h3{font-size:clamp(1.6rem,6vw,2.4rem)}

/* Duas colunas em toda largura. As três famílias têm 2, 4 e 6 modelos —
   par em todas — então nunca sobra um card sozinho fechando a linha. */
.grade{display:grid;gap:var(--e2);grid-template-columns:repeat(2,1fr)}
@media(min-width:640px){.grade{gap:var(--e3)}}
/* Duas colunas na largura cheia davam card de 650px — a foto virava pôster.
   A grade é travada em 880px e centralizada: card de ~430px, que é tamanho de
   card. A seção continua usando a largura toda; só a grade encolhe. */
@media(min-width:1000px){
  .grade{gap:var(--e4) var(--e3);max-width:880px;margin-left:auto;margin-right:auto}
  .card__nome{font-size:1.5rem}
  .card__topo{padding:var(--e2) var(--e3)}
  .card__pe{padding:var(--e2) var(--e3) var(--e3)}
  .card__ficha th,.card__ficha td{padding:12px var(--e3)}
}

.card{
  display:flex;flex-direction:column;
  background:var(--branco);
  border-radius:var(--curva);
  box-shadow:var(--sombra-3d);
  overflow:hidden;position:relative;
  transition:transform .22s ease,box-shadow .22s ease;
}
.card:hover{transform:translateY(-3px);box-shadow:var(--sombra-3d-alta)}

.card__selo{
  position:absolute;top:0;left:0;z-index:2;
  background:var(--verde);color:var(--branco);
  font-family:var(--cond);font-weight:700;text-transform:uppercase;
  font-size:.72rem;letter-spacing:.1em;
  padding:26px 26px 6px;
  /* a etiqueta diagonal do site Brasil */
  clip-path:polygon(0 0,100% 0,0 100%);
  width:88px;height:88px;line-height:1;
  display:block;
  transform-origin:top left;
}
.card__selo span{display:block;transform:rotate(-45deg) translate(-16px,-4px)}
@media(min-width:640px){.card__selo{width:104px;height:104px}.card__selo span{transform:rotate(-45deg) translate(-14px,-2px)}}

.card__foto{background:var(--branco);padding:12px 12px 0;position:relative}
@media(min-width:640px){.card__foto{padding:var(--e2) var(--e2) 0}}
.card__foto img{width:100%;aspect-ratio:4/3;object-fit:contain}
@media(min-width:1000px){.card__foto img{aspect-ratio:16/11}}

/* Em 2 colunas de celular o card tem ~166px: tudo encolhe um degrau para o
   nome não quebrar em quatro linhas e a tabela não virar sanfona. */
.card__topo{padding:12px}
@media(min-width:640px){.card__topo{padding:var(--e2)}}
.card__ano{font-family:var(--cond);font-weight:600;text-transform:uppercase;letter-spacing:.1em;font-size:var(--t1);color:var(--verde-texto);display:block;margin-bottom:2px}
.card__nome{font-family:var(--cond);font-weight:700;text-transform:uppercase;font-size:1.05rem;line-height:1.04}
@media(min-width:640px){.card__nome{font-size:1.32rem}}
/* O card inteiro vira alvo. O link do nome tinha 25px de altura — passa no
   mínimo do WCAG por pouco, mas no polegar é mira, não toque. Esticando o link
   sobre o card, a área útil sai de 25px para o card todo. */
.card__nome a::after{content:'';position:absolute;inset:0;z-index:1}
.card__pe .btn,.card__foto{position:relative;z-index:2}

/* a tabela zebrada — é o que faz o card informar em vez de só enfeitar */
.card__ficha{width:100%;border-collapse:collapse;font-size:var(--t1);margin-top:auto;font-variant-numeric:tabular-nums}
@media(min-width:640px){.card__ficha{font-size:var(--t2)}}
.card__ficha tr:nth-child(odd){background:var(--zebra)}
.card__ficha th{
  text-align:left;font-family:var(--texto);font-weight:700;font-size:var(--t1);
  text-transform:none;letter-spacing:0;color:var(--tinta);
  padding:7px 12px;width:42%;vertical-align:top;
}
.card__ficha td{padding:7px 12px;color:var(--cinza);vertical-align:top;line-height:1.3}
@media(min-width:640px){
  .card__ficha th{font-size:var(--t2);padding:10px 12px;width:38%}
  .card__ficha td{padding:10px 12px;line-height:1.35}
}

.card__pe{padding:12px}
.card__pe .btn{width:100%;font-size:.86rem;padding:12px 10px;min-height:46px}
@media(min-width:640px){
  .card__pe{padding:var(--e2)}
  .card__pe .btn{font-size:1.05rem;padding:15px 28px;min-height:52px}
}

/* ==========================================================================
   PÁGINA DE PRODUTO
   ========================================================================== */
.prod{padding-top:calc(var(--topo) + var(--e4))}
.prod__migalha{font-size:.82rem;color:var(--cinza);margin-bottom:var(--e2)}
.prod__migalha a:hover{color:var(--verde)}

.prod__grade{display:grid;gap:var(--e3)}
/* Item de grid tem min-width auto: a foto de 648px esticava a coluna e vazava
   a ficha inteira em 360px. Sem isto, o overflow-x das miniaturas nunca vale. */
.prod__grade>*{min-width:0}
@media(min-width:900px){.prod__grade{grid-template-columns:1.1fr .9fr;gap:var(--e5);align-items:start}}
@media(min-width:1200px){.prod__grade{gap:var(--e6)}}

/* galeria */
.gal__palco{background:var(--fundo);border-radius:var(--curva);overflow:hidden;position:relative}
.gal__palco img{width:100%;aspect-ratio:4/3;object-fit:contain;background:var(--branco)}
.gal__tiras{display:flex;gap:8px;margin-top:10px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin;max-width:100%}
.gal__tira{
  flex:none;width:74px;height:58px;border-radius:4px;overflow:hidden;
  border:2px solid transparent;background:var(--fundo);cursor:pointer;
  transition:border-color .16s;
}
.gal__tira img{width:100%;height:100%;object-fit:contain}
.gal__tira[aria-selected='true']{border-color:var(--verde)}

/* coluna de compra */
.compra__ano{font-family:var(--cond);font-weight:600;text-transform:uppercase;letter-spacing:.12em;font-size:.8rem;color:var(--verde-texto)}
.compra h1{font-size:clamp(2rem,7vw,3rem);margin:6px 0 var(--e2)}
.compra__desc{color:var(--cinza);margin-bottom:var(--e3)}

.preco{border-top:1px solid var(--linha);border-bottom:1px solid var(--linha);padding:var(--e3) 0;margin-bottom:var(--e3)}
.preco__rot{font-family:var(--cond);font-weight:600;text-transform:uppercase;letter-spacing:.1em;font-size:var(--t2);color:var(--cinza)}
.preco__val{font-family:var(--cond);font-weight:700;font-size:var(--t6);line-height:1;margin:6px 0;font-variant-numeric:tabular-nums}
.preco__obs{font-size:var(--t2);color:var(--cinza)}
.preco__cond{margin-top:var(--e2);font-size:var(--t3)}
.preco__cond strong{color:var(--tinta)}

.compra__acoes{display:flex;flex-direction:column;gap:10px;margin-bottom:var(--e3)}
.compra__cor{margin-bottom:var(--e3)}
.compra__cor .rot{font-family:var(--cond);font-weight:700;text-transform:uppercase;font-size:.84rem;letter-spacing:.06em;display:block;margin-bottom:8px}
.compra__cor .nome{font-size:.92rem;color:var(--cinza)}

/* navegação interna da ficha */
.abas{position:sticky;top:calc(var(--topo) + var(--e2) + 8px);z-index:20;background:var(--branco);border-bottom:1px solid var(--linha);margin-top:var(--e5)}
.abas ul{display:flex;gap:var(--e3);overflow-x:auto;scrollbar-width:none}
.abas ul::-webkit-scrollbar{display:none}
.abas a{
  display:block;padding:16px 2px;white-space:nowrap;
  font-family:var(--cond);font-weight:700;text-transform:uppercase;font-size:1rem;
  border-bottom:3px solid transparent;color:var(--cinza);
}
.abas a:hover,.abas a[aria-current='true']{color:var(--tinta);border-color:var(--verde)}

/* grade de recursos */
.recursos{display:grid;gap:var(--e3);grid-template-columns:1fr}
@media(min-width:640px){.recursos{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.recursos{grid-template-columns:repeat(3,1fr)}}
.rec{background:var(--branco);border-radius:var(--curva);box-shadow:var(--sombra-3d);overflow:hidden;display:flex;flex-direction:column}
.rec__foto{background:var(--fundo)}
.rec__foto img{width:100%;aspect-ratio:16/10;object-fit:cover}
.rec__corpo{padding:var(--e2);display:flex;flex-direction:column;flex:1}
.rec h4{margin-bottom:8px;font-size:var(--t4)}
.rec__txt{font-size:var(--t3);color:var(--cinza);line-height:1.6}
/* "mostrar mais" sem JS: recorta em 4 linhas e abre no clique */
.rec__txt[data-cortado]{display:-webkit-box;-webkit-line-clamp:4;line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.rec__mais{margin-top:10px;align-self:flex-start;font-family:var(--cond);font-weight:700;text-transform:uppercase;font-size:.82rem;letter-spacing:.06em;color:var(--verde-texto)}
.rec__mais:hover{color:#356816;text-decoration:underline}
.rec__legenda{font-size:.7rem;color:var(--cinza-c);margin-top:8px;font-style:italic}

/* tabela de especificação */
.espec{margin-top:var(--e3)}
.espec__grupo{font-family:var(--cond);font-weight:700;text-transform:uppercase;font-size:1.2rem;padding:var(--e2) 0 8px;border-bottom:2px solid var(--preto)}
.espec table{width:100%;border-collapse:collapse;font-size:var(--t3);font-variant-numeric:tabular-nums}
.espec tr{border-bottom:1px solid var(--linha)}
.espec tr:nth-child(even){background:var(--fundo)}
.espec th{text-align:left;font-weight:600;padding:11px 12px;width:44%;font-family:var(--texto);text-transform:none;letter-spacing:0;vertical-align:top}
.espec td{padding:11px 12px;color:var(--cinza);vertical-align:top}
.espec td.vazio{color:var(--cinza-c)}
.espec__notas{margin-top:var(--e2);font-size:var(--t2);color:var(--cinza);line-height:1.6}
.espec__notas li{margin-bottom:4px}

/* ==========================================================================
   BLOCOS DE CONVERSÃO
   ========================================================================== */
/* "compro de longe?" — a objeção que o site atual nem tenta responder */
.longe{display:grid;gap:var(--e3);grid-template-columns:1fr}
@media(min-width:760px){.longe{grid-template-columns:repeat(3,1fr)}}
.longe__item{background:var(--branco);border-radius:var(--curva);padding:var(--e3);box-shadow:var(--sombra-3d)}
@media(min-width:900px){.longe__item{padding:var(--e4) var(--e3)}.longe{gap:var(--e4)}}
.secao--escura .longe__item{background:var(--grafite-2);box-shadow:none;border:1px solid #333;border-left:3px solid var(--verde)}
.longe__item h4{margin-bottom:10px;font-size:var(--t4)}
.longe__item p{font-size:var(--t3);color:var(--cinza)}
.secao--escura .longe__item p{color:#C6C6C6}
.longe__ico{width:40px;height:40px;display:grid;place-items:center;background:var(--verde);border-radius:100px;margin-bottom:var(--e2)}
.longe__ico svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:2}

/* formulário */
.form{display:grid;gap:var(--e2)}
.campo{display:flex;flex-direction:column;gap:6px}
.campo label{font-family:var(--cond);font-weight:700;text-transform:uppercase;font-size:var(--t2);letter-spacing:.05em}
.campo input,.campo select,.campo textarea{
  font:inherit;font-size:16px; /* 16px trava o zoom automático do iOS */
  padding:13px 14px;border:2px solid var(--linha);border-radius:var(--curva);
  background:var(--branco);color:var(--tinta);width:100%;min-height:50px;
  transition:border-color .16s;
}
/* Nunca apagar o anel de foco: a borda verde é reforço, não substituto. */
.campo input:focus-visible,.campo select:focus-visible,.campo textarea:focus-visible{border-color:var(--verde-texto);outline:3px solid var(--preto);outline-offset:2px}
.campo input:focus,.campo select:focus,.campo textarea:focus{border-color:var(--verde-texto)}
.campo small{font-size:var(--t2);color:var(--cinza)}
.campo--erro input,.campo--erro select{border-color:var(--vermelho)}
.campo__erro{font-size:var(--t2);color:var(--vermelho);font-weight:600}
.form__par{display:grid;gap:var(--e2)}
@media(min-width:560px){.form__par{grid-template-columns:1fr 1fr}}
.form__nota{font-size:var(--t2);color:var(--cinza)}

/* ==========================================================================
   BARRA FIXA DE CTA — celular. O polegar sempre alcança.
   ========================================================================== */
.barra{
  position:fixed;left:0;right:0;bottom:0;z-index:55;
  display:flex;gap:8px;align-items:center;
  background:var(--branco);border-top:1px solid var(--linha);
  padding:10px var(--e2);
  padding-bottom:calc(10px + env(safe-area-inset-bottom));
  box-shadow:0 -4px 20px rgba(0,0,0,.1);
}
.barra__preco{flex:1;min-width:0;line-height:1.15}
.barra__preco .rot{display:block;font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;color:var(--cinza);font-weight:600}
.barra__preco .val{font-family:var(--cond);font-weight:700;font-size:1.28rem}
.barra .btn{flex:none;padding:13px 20px;min-height:48px}
@media(min-width:900px){.barra{display:none}}

/* ==========================================================================
   RODAPÉ — escuro, em colunas
   ========================================================================== */
.pe{background:var(--preto);color:#C9C9C9;padding:var(--e5) 0 0}
.pe__grade{display:grid;gap:var(--e3) var(--e2);grid-template-columns:1fr}
@media(min-width:560px){.pe__grade{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.pe__grade{grid-template-columns:repeat(3,1fr)}}
/* Cinco colunas: Serviços deixa de ficar empilhado embaixo de Comprar e a
   última coluna, com os endereços, ganha mais largura que as de links. */
@media(min-width:1120px){.pe__grade{grid-template-columns:repeat(4,1fr) 1.5fr;gap:var(--e3)}}
.pe h4{color:var(--branco);font-size:1.05rem;padding-bottom:8px;margin-bottom:10px;border-bottom:1px solid #333;white-space:nowrap}
.pe li{margin-bottom:0}
/* Área de toque de 44px no celular, onde o dedo precisa; no desktop aperta,
   porque ali o alvo é o ponteiro e o vão só afastava os links. */
.pe li a{display:block;font-size:var(--t2);padding:10px 0;min-height:44px;transition:color .16s}
@media(min-width:900px){.pe li a{padding:5px 0;min-height:0}}
.pe a{transition:color .16s}
.pe a:hover{color:var(--verde)}
.pe__loja{font-size:var(--t2);line-height:1.6;margin-bottom:var(--e2)}
.pe__loja strong{color:var(--branco);display:block;font-family:var(--cond);text-transform:uppercase;font-size:1.02rem;letter-spacing:.03em}
.pe__zap{display:inline-flex;align-items:center;gap:7px;color:var(--verde);font-weight:600;font-size:.94rem;margin-top:4px}
.pe__zap svg{width:16px;height:16px;fill:currentColor}
.pe__baixo{font-size:var(--t1);
  border-top:1px solid #2A2A2A;margin-top:var(--e3);padding:var(--e3) 0;
  display:flex;flex-wrap:wrap;gap:var(--e2);justify-content:space-between;align-items:center;
  font-size:.82rem;color:#8A8A8A;
}
.pe__redes{display:flex;gap:var(--e2)}
.pe__redes a{display:grid;place-items:center;width:38px;height:38px;border-radius:100px;background:#1C1C1C;transition:background .16s}
.pe__redes a:hover{background:var(--verde)}
.pe__redes svg{width:17px;height:17px;fill:#C9C9C9}
.pe__redes a:hover svg{fill:#fff}
.pe__aviso{
  font-size:var(--t1);color:#6E6E6E;line-height:1.6;
  max-width:none;                     /* corre a largura toda do rodapé */
  border-top:1px solid #232323;
  margin-top:var(--e4);padding:var(--e3) 0 0;
}

/* ==========================================================================
   utilitários
   ========================================================================== */
.so-leitor{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.pula{position:absolute;left:-999px;top:0;z-index:100;background:var(--verde);color:#fff;padding:12px 20px;font-weight:700}
.pula:focus{left:var(--e2);top:var(--e2)}

/* aviso de imagem ilustrativa: uma vez por seção, não em cada card */
.secao__aviso{margin-top:var(--e3);font-size:var(--t1);color:var(--cinza);font-style:italic}

/* entrega nacional junto do preço: a objeção de quem é de fora morre aqui,
   não lá embaixo numa seção que talvez ele não role até ver */
.preco__entrega{margin-top:8px;font-size:var(--t3);color:var(--tinta)}
/* CTA fechando seção: nenhum bloco longo termina sem uma ação possível */
.longe__cta{margin-top:var(--e4);text-align:center}


/* ==========================================================================
   Barra verde — o detalhe de acabamento do site global da Kawasaki.
   Filete à esquerda do texto de apoio. Só em bloco alinhado à esquerda:
   ao lado de texto centralizado ela fica torta.
   ========================================================================== */
.filete{border-left:3px solid var(--verde);padding-left:16px}
.longe__item{border-left:3px solid var(--verde)}
.rec__corpo{border-left:3px solid var(--verde)}
.espec__grupo{border-left:3px solid var(--verde);padding-left:14px;border-bottom:2px solid var(--preto)}
.preco{border-left:3px solid var(--verde);padding-left:18px}
.compra__desc{border-left:3px solid var(--verde);padding-left:16px}
.secao--escura .longe__item{border-left:3px solid var(--verde)}


/* ==========================================================================
   Subpáginas — conteúdo em cartões, perguntas frequentes e passos
   ========================================================================== */
.blocos{display:grid;gap:var(--e2);grid-template-columns:1fr;margin-top:var(--e4)}
@media(min-width:700px){.blocos{grid-template-columns:repeat(2,1fr);gap:var(--e3)}}
@media(min-width:1040px){.blocos--3{grid-template-columns:repeat(3,1fr)}}

.bloco{
  background:var(--branco);border-radius:var(--curva);
  border-left:3px solid var(--verde);
  box-shadow:var(--sombra-3d);
  padding:var(--e3);display:flex;flex-direction:column;
}
.bloco h3{font-size:var(--t5);margin-bottom:10px;line-height:1.05}
.bloco p{color:var(--cinza);font-size:var(--t3);margin:0}
.bloco__link{margin-top:auto;padding-top:var(--e2)}
.bloco__link a{
  font-family:var(--cond);font-weight:700;text-transform:uppercase;
  font-size:.86rem;letter-spacing:.05em;color:var(--verde-texto);
}
.bloco__link a:hover{text-decoration:underline}

/* perguntas frequentes: sanfona nativa, sem JS */
.faq{max-width:78ch;margin:var(--e4) auto 0;text-align:left}
.faq details{
  background:var(--branco);border-radius:var(--curva);
  border-left:3px solid var(--verde);box-shadow:var(--sombra-3d);
  margin-bottom:12px;overflow:hidden;
}
.faq summary{
  cursor:pointer;list-style:none;padding:18px var(--e3);
  font-family:var(--cond);font-weight:700;text-transform:uppercase;
  font-size:var(--t4);line-height:1.14;display:flex;gap:14px;align-items:flex-start;
  min-height:56px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:'+';margin-left:auto;font-size:1.5rem;line-height:1;
  color:var(--verde-texto);flex:none;transition:transform .2s;
}
.faq details[open] summary::after{content:'−'}
.faq summary:hover{background:var(--fundo)}
.faq .resposta{padding:0 var(--e3) var(--e3);color:var(--cinza);font-size:var(--t3)}

/* bloco de destaque em fundo escuro */
.destaque{
  background:var(--grafite);color:var(--branco);border-radius:var(--curva);
  border-left:3px solid var(--verde);
  padding:var(--e4) var(--e3);margin-top:var(--e4);text-align:left;
}
.destaque h3{color:var(--branco);margin-bottom:8px}
.destaque p{color:#C9C9C9;margin-bottom:var(--e3);max-width:60ch}

/* lojas */
.lojas{display:grid;gap:var(--e3);grid-template-columns:1fr;margin-top:var(--e4);text-align:left}
@media(min-width:760px){.lojas{grid-template-columns:repeat(2,1fr)}}
.loja{background:var(--branco);border-radius:var(--curva);border-left:3px solid var(--verde);box-shadow:var(--sombra-3d);padding:var(--e3)}
.loja h3{margin-bottom:10px}
.loja address{font-style:normal;color:var(--cinza);font-size:.96rem;line-height:1.65;margin-bottom:var(--e2)}
.loja .acoes{display:flex;flex-direction:column;gap:10px}
@media(min-width:520px){.loja .acoes{flex-direction:row;flex-wrap:wrap}}
.loja .acoes .btn{flex:1;min-width:150px}


/* ==========================================================================
   ACABAMENTO — os detalhes que fazem a página parecer cara.
   Filete verde, régua sob os títulos, pontos separadores e ícones.
   ========================================================================== */

/* logo Kawasaki no hero, no lugar do wordmark em inglês da foto original */
.hero__marca{
  width:min(70vw,300px);height:auto;margin:0 auto var(--e2);
  filter:drop-shadow(0 4px 18px rgba(0,0,0,.55));
}
@media(min-width:900px){.hero__marca{width:min(38vw,420px);margin-bottom:var(--e3)}}

/* ponto verde separando as partes do olho ("autorizada · Rio de Janeiro") */
.olho .pt{display:inline-block;width:5px;height:5px;background:var(--verde);
  border-radius:100px;margin:0 9px 3px 0;vertical-align:middle}
.olho .pt + .pt,.olho .pt:not(:first-child){margin-left:9px}

/* régua sob o título de seção: dois traços, o de dentro verde */
.cabeca.centro h2::after{
  content:'';display:block;width:52px;height:3px;margin:16px auto 0;
  background:linear-gradient(to right,var(--verde) 0 32px,var(--preto) 32px 64px);
}
.secao--escura .cabeca.centro h2::after,.tarja .cabeca.centro h2::after{
  background:linear-gradient(to right,var(--verde) 0 32px,#fff 32px 64px);
}


/* barra de confiança: a faixa de ícones verdes logo abaixo do hero */
/* Dentro do hero ela é uma âncora na base, não um item da coluna de texto —
   como item flex ela herdava o alinhamento e escorregava para a direita. */
/* Fita de confiança: primeira barra da página. */
.fita{background:var(--preto);color:#E6E6E6}
.fita__lista{
  display:grid;grid-template-columns:repeat(2,1fr);
  font-family:var(--cond);font-weight:600;text-transform:uppercase;
  letter-spacing:.04em;font-size:var(--t1);
}
@media(min-width:900px){.fita__lista{grid-template-columns:repeat(4,1fr);font-size:var(--t2)}}
.fita__lista li{
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 8px;text-align:center;line-height:1.1;position:relative;
}
@media(min-width:900px){
  .fita__lista li + li::before{content:'';position:absolute;left:0;top:24%;bottom:24%;width:1px;background:#2C2C2C}
}
.fita__lista svg{width:17px;height:17px;flex:none;fill:none;stroke:var(--verde);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.confianca{background:var(--preto);color:#E6E6E6;border-bottom:1px solid #232323}
.confianca__lista{
  display:grid;grid-template-columns:repeat(2,1fr);gap:2px;
  font-family:var(--cond);font-weight:600;text-transform:uppercase;
  letter-spacing:.04em;font-size:.82rem;
}
@media(min-width:900px){
  .confianca__lista{grid-template-columns:repeat(4,1fr);font-size:.95rem}
}
.confianca__lista li{
  display:flex;align-items:center;justify-content:center;gap:9px;
  padding:16px 10px;text-align:center;line-height:1.1;
  position:relative;
}
@media(min-width:900px){
  .confianca__lista li + li::before{
    content:'';position:absolute;left:0;top:22%;bottom:22%;width:1px;background:#2C2C2C;
  }
}
.confianca__lista svg{
  width:20px;height:20px;flex:none;fill:none;stroke:var(--verde);
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
}

/* título de família com régua verde à esquerda no desktop */
.familia__cabeca h3{position:relative;display:inline-block}
.familia__cabeca h3::before,.familia__cabeca h3::after{
  content:'';position:absolute;top:50%;width:26px;height:2px;background:var(--verde);
  display:none;
}
@media(min-width:760px){
  .familia__cabeca h3::before,.familia__cabeca h3::after{display:block}
  .familia__cabeca h3::before{right:calc(100% + 18px)}
  .familia__cabeca h3::after{left:calc(100% + 18px)}
}

/* cartão de modelo: filete verde no topo aparece ao passar o mouse */
.card{border-top:2px solid transparent;transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.card:hover{border-top-color:var(--verde)}

/* linha divisória com respiro entre as famílias */
.familia + .familia{border-top:1px solid var(--linha);padding-top:var(--e5)}

/* rótulo da tabela do card em versalete, com o valor destacado */
.card__ficha th{letter-spacing:.02em}
.card__ficha td{color:var(--tinta);font-weight:600}

/* etiqueta NOVO: triângulo cheio no canto, como no site oficial */
.card__selo{overflow:hidden}
.card__selo span{
  font-size:.74rem;letter-spacing:.12em;
  text-shadow:0 1px 2px rgba(0,0,0,.25);
}

/* preço da ficha: filete verde grosso e número em destaque */
.preco{position:relative}
.preco__val{letter-spacing:-.01em}

/* aba ativa da ficha ganha peso */
.abas a[aria-current='true']{color:var(--tinta)}

/* botão fantasma no escuro fica com borda verde */
.secao--escura .btn--linha{border-color:var(--verde);color:#fff}
.secao--escura .btn--linha:hover{background:var(--verde);border-color:var(--verde)}


/* ==========================================================================
   Capa das páginas internas — faixa escura de largura cheia no topo,
   para a página não começar direto no branco.
   ========================================================================== */
.capa{
  background:var(--preto);color:var(--branco);text-align:center;
  padding:calc(var(--topo) + var(--e5)) 0 var(--e5);
  border-bottom:3px solid var(--verde);
}
.capa .olho{color:var(--verde)}
.capa h1{font-size:clamp(2.2rem,7vw,4rem);margin:10px auto var(--e2);max-width:20ch}
.capa__sub{color:#C9C9C9;max-width:64ch;margin:0 auto;font-size:var(--t4)}
@media(min-width:900px){
  .capa{padding:calc(var(--topo) + var(--e6)) 0 var(--e6)}
  .capa__sub{font-size:var(--t5);font-weight:400}
}
.capa + .secao{padding-top:var(--e5)}


/* ==========================================================================
   Tarja cinza logo abaixo do hero — uma frase só, sem virar seção.
   ========================================================================== */
.tarja{background:var(--grafite);color:var(--branco);border-bottom:3px solid var(--verde);padding:var(--e5) 0;text-align:center}
.tarja .cabeca{margin-bottom:0}
.tarja p{max-width:76ch;margin:0 auto;color:#C9C9C9;font-size:var(--t3);line-height:1.7}
@media(min-width:900px){
  .tarja{padding:var(--e6) 0}
  .tarja p{font-size:var(--t4)}
}

/* ==========================================================================
   TÍTULOS EM UMA LINHA
   Todo título de seção e de capa fica numa linha só, em qualquer largura.
   Em vez de deixar quebrar, a fonte encolhe: o vw da escala foi calculado
   para o título mais longo do site (~28 caracteres em condensado) caber em
   360px com folga. Título novo acima disso precisa ser encurtado no texto,
   não no CSS — por isso a regra vale para todos de uma vez.
   ========================================================================== */
.cabeca h1,.cabeca h2,.capa h1,.uma-linha{
  white-space:nowrap;max-width:none!important;
  font-size:clamp(1.15rem,6.6vw,3.2rem);
}
.capa h1{font-size:clamp(1.3rem,7vw,3.6rem)}
@media(min-width:900px){
  .cabeca h1,.cabeca h2,.uma-linha{font-size:clamp(2rem,3.6vw,3.2rem)}
  .capa h1{font-size:clamp(2.2rem,4.2vw,3.8rem)}
}
/* O nome do modelo na ficha é longo e pode quebrar — ali a regra não vale. */
.compra h1,.card__nome,.bloco h3,.faq summary,.longe__item h4{white-space:normal}

/* ==========================================================================
   ALTERNÂNCIA DE FUNDO
   Duas seções da mesma cor coladas viram um bloco só e a leitura perde o
   ritmo. Quando isso acontecer, um filete verde marca a emenda.
   ========================================================================== */
.secao--escura + .secao--escura,
.secao--cinza + .secao--cinza,
.tarja + .secao--cinza,
.capa + .secao--escura{border-top:3px solid var(--verde)}
.secao--escura + .secao--escura{padding-top:var(--e5)}

/* ==========================================================================
   HERO — o título como peça gráfica
   Referência: o wordmark JET SKI do site global. Condensado pesado, itálico,
   tracking apertado e sombra em duas camadas — uma difusa que descola da
   água e uma curta que dá borda. Sem isso o texto branco sobre foto clara
   some; com isso ele vira objeto.
   ========================================================================== */
@font-face{
  font-family:'Barlow Condensed';
  src:url('../fontes/cond-700-italico.woff2') format('woff2');
  font-weight:700;font-style:italic;font-display:swap;
}

.hero h1{
  font-family:var(--cond);
  font-weight:700;
  font-size:var(--t8);
  /* Apertado de propósito: o condensado só transmite solidez quando as
     letras se tocam. Com tracking neutro ele vira texto comprido. */
  letter-spacing:-.014em;
  line-height:.92;
  text-transform:uppercase;
  text-shadow:0 6px 30px rgba(0,0,0,.5);
}
@media(min-width:900px){
  .hero h1{font-size:clamp(3.2rem,5.6vw,4.8rem);letter-spacing:-.016em}
}

/* O olho e a chamada ganham a mesma sombra difusa, senão eles boiam sobre a
   foto enquanto o título parece colado nela. */
.hero .olho{text-shadow:0 2px 12px rgba(0,0,0,.6)}
.hero__sub{text-shadow:0 2px 14px rgba(0,0,0,.7)}

/* faixa de preço: número em destaque, com figura tabular */
.hero__faixa .val{font-variant-numeric:tabular-nums;letter-spacing:-.01em}

/* ==========================================================================
   RITMO — a grade de modelos era um bloco branco de 5.486px (63% da home).
   Alternando o fundo por família, o mesmo conteúdo vira três blocos com
   respiro entre eles, e o olho ganha onde descansar.
   ========================================================================== */
.familia{margin-bottom:0;padding:0 0 var(--e5)}
@media(min-width:900px){.familia{padding:0 0 var(--e6)}}

.familia + .familia{border-top:0;padding-top:var(--e5)}
@media(min-width:900px){.familia + .familia{padding-top:var(--e6)}}
/* a seção que abriga as famílias não pode ter padding próprio, senão o fundo
   alternado de cada família não encosta na borda da anterior */
#modelos{padding:var(--e5) 0}
#modelos > .env{max-width:none;padding:0}
.familia > .env{max-width:var(--largura);margin:0 auto;padding:0 var(--e2)}
@media(min-width:720px){.familia > .env{padding:0 var(--e3)}}

/* ==========================================================================
   CTA — uma ação primária por tela.
   A home tinha 16 botões e 4 verdes competindo entre si; o verde deixa de
   significar "a ação" quando se repete. Verde é o CTA da seção; dentro da
   grade, o botão do card é secundário e fica preto.
   ========================================================================== */
.card__pe .btn--preto{background:transparent;color:var(--tinta);border:2px solid var(--linha)}
.card__pe .btn--preto:hover{background:var(--preto);color:var(--branco);border-color:var(--preto)}

/* ==========================================================================
   MICRO-INTERAÇÕES
   O charme mora aqui: a linha verde que preenche, a cor que troca, o card
   que levanta. Regra única — 180ms, ease-out na entrada. Tudo respeita
   prefers-reduced-motion pela regra global lá do topo.
   ========================================================================== */

/* --- menu: filete verde crescendo do centro --- */
.topo__links a{position:relative;overflow:hidden}
.topo__links a::after{
  content:'';position:absolute;left:50%;right:50%;bottom:6px;height:3px;
  background:var(--verde);border-radius:2px;
  transition:left .22s cubic-bezier(.2,.7,.3,1),right .22s cubic-bezier(.2,.7,.3,1);
}
.topo__links a:hover::after,
.topo__links a:focus-visible::after,
.topo__links a[aria-current='page']::after{left:14px;right:14px}
.topo__links a:hover,.topo__links a[aria-current='page']{background:transparent;color:var(--verde-texto)}

/* --- submenu: item desliza e ganha barra --- */
.subm a{position:relative;transition:padding-left .18s ease,color .18s ease,background .18s ease}
.subm a::before{
  content:'';position:absolute;left:6px;top:50%;transform:translateY(-50%);
  width:3px;height:0;background:var(--verde);border-radius:2px;transition:height .18s ease;
}
.subm a:hover{padding-left:20px;color:var(--verde-texto);background:var(--fundo)}
.subm a:hover::before{height:60%}

/* --- gaveta do celular: mesma lógica, sem depender de hover --- */
.gaveta a{position:relative;transition:padding-left .18s ease,background .18s ease}
.gaveta a::before{
  content:'';position:absolute;left:4px;top:50%;transform:translateY(-50%);
  width:3px;height:0;background:var(--verde);border-radius:2px;transition:height .18s ease;
}
.gaveta a:active::before,.gaveta a[aria-current='page']::before{height:56%}
.gaveta a[aria-current='page']{padding-left:18px}

/* --- card: sobe, ganha filete no topo e a foto respira --- */
.card__foto img{transition:transform .4s cubic-bezier(.2,.7,.3,1)}
.card:hover .card__foto img{transform:scale(1.02)}
.card__nome a{transition:color .18s ease}
.card:hover .card__nome a{color:var(--verde-texto)}


/* --- botões: brilho que atravessa --- */
.btn{position:relative;overflow:hidden}


/* --- blocos e cartões de conteúdo --- */
.bloco,.longe__item,.rec,.loja{
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
.bloco:hover,.rec:hover,.loja:hover{transform:translateY(-2px);box-shadow:var(--sombra-3d-alta)}
.longe__item:hover{border-left-color:var(--branco)}


/* --- perguntas frequentes: a barra verde cresce ao abrir --- */
.faq details{transition:box-shadow .2s ease,border-left-width .2s ease}
.faq details[open]{box-shadow:var(--sombra-3d-alta);border-left-width:4px}
.faq summary::after{transition:transform .22s ease,color .18s ease}


/* --- links do rodapé: deslizam --- */
.pe li a{transition:color .18s ease,transform .18s ease}
.pe li a:hover{color:var(--verde);transform:translateX(3px)}
.pe__redes a{transition:background .2s ease,transform .2s ease}
.pe__redes a:hover{transform:translateY(-2px)}

/* --- miniaturas da galeria --- */
.gal__tira{transition:border-color .18s ease,transform .18s ease}
.gal__tira:hover{transform:translateY(-2px);border-color:var(--verde)}

/* --- fita: o ícone pulsa de leve ao passar --- */
.fita__lista li{transition:color .2s ease}
.fita__lista li:hover{color:#fff}


/* --- entrada das seções ao rolar (JS liga a classe) --- */
[data-revela]{opacity:0;transform:translateY(10px)}
[data-revela='sim']{opacity:1;transform:none;transition:opacity .42s ease,transform .42s cubic-bezier(.2,.7,.3,1)}
@media(prefers-reduced-motion:reduce){
  [data-revela]{opacity:1;transform:none}
}

/* cartão com capa: a foto sangra até a borda, o texto respira dentro */
.bloco--foto{padding:0;overflow:hidden}
.bloco__foto{background:var(--fundo);border-bottom:1px solid var(--linha)}
.bloco__foto img{width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform .4s cubic-bezier(.2,.7,.3,1)}
.bloco--foto:hover .bloco__foto img{transform:scale(1.03)}
.bloco__corpo{padding:var(--e3);display:flex;flex-direction:column;flex:1}