/*
Theme Name:  Stop Náutica
Theme URI:   https://stopnautica.com.br
Author:      Stop Náutica
Description: Tema do site da Stop Náutica — revenda FS Yachts e assistência técnica autorizada Yamaha Motor, em Balneário Camboriú (SC). Direção de design "Cota". Sem framework, sem jQuery.
Version:     1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License:     Uso exclusivo do cliente
Text Domain: stopnautica
*/

/* ATENÇÃO: abaixo é a folha validada em HTML, copiada sem alteração.
   Antes de mexer, leia o DESIGN-SYSTEM.md que acompanha o tema. */

/* =========================================================
   Stop Náutica — folha de estilo única
   Direção "Cota": navy da marca, brass do logo, tipografia
   de placa de popa (Archivo expandido) e dados em mono.
   ========================================================= */

:root {
  /* Cores — todas amostradas do logo e do site atual */
  --abyss:   #050B1F;
  --navy:    #01004D;
  --brass:   #CFA33A;
  --brass-d: #A87F22;
  --foam:    #F1F3F6;
  --ink:     #0C1226;
  --ink-60:  #4A5268;
  --ink-30:  #9AA2B4;
  --current: #2C7A86;
  --line:    rgba(12, 18, 38, 0.12);
  --line-lt: rgba(255, 255, 255, 0.18);

  /* Tipografia */
  --display: "Archivo", "Arial Narrow", sans-serif;
  --body:    "Instrument Sans", system-ui, -apple-system, sans-serif;
  --data:    "IBM Plex Mono", ui-monospace, monospace;

  /* Ritmo */
  --gutter:  clamp(1.25rem, 5vw, 5rem);
  --measure: 68ch;
  --shell:   1440px;
  --ease:    cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Base ---------- */

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }

a { color: inherit; }

/* O atributo `hidden` vale (0,0,1) e perde para qualquer classe que defina
   `display` — sem isto, `el.hidden = true` não esconde .post nem .cards.
   Todo componente novo que use `hidden` via JS precisa entrar aqui. */
.post[hidden],
.cards[hidden],
.empty[hidden] { display: none; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-variation-settings: "wdth" 112;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.05;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 1rem; max-width: var(--measure); }

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

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--brass);
  color: var(--navy);
  padding: 0.75rem 1.25rem;
  font-weight: 600;
}
.skip:focus { left: 0; }

.shell {
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- Etiquetas e dados ---------- */

.eyebrow {
  font-family: var(--data);
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--current);
  margin: 0 0 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.eyebrow::before {
  content: "";
  width: 2rem;
  height: 1px;
  background: currentColor;
  flex: none;
}
.eyebrow--light { color: var(--brass); }

/* Home: etiqueta do hero em branco e numa linha só (desktop). */
.home .hero .eyebrow { color: #fff; white-space: nowrap; }

/* Embarcações: etiqueta do hero em branco (mesmo tratamento da home). */
.post-type-archive-embarcacao .hero .eyebrow { color: #fff; }

/* Embarcações: lede um pouco mais largo — em 46ch o "Suporte completo"
   caía sozinho na terceira linha. */
.post-type-archive-embarcacao .hero__lede { max-width: 60ch; }

/* Leitura de instrumento: rótulo pequeno, valor em mono */
.readout { list-style: none; margin: 0; padding: 0; }
.readout li {
  display: grid;
  grid-template-columns: 8.5rem 1fr;
  gap: 1rem;
  padding: 0.5rem 0;
  border-top: 1px solid var(--line);
  align-items: center;
}
.readout dt,
.readout .key {
  font-family: var(--data);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-30);
}
.readout .val { font-family: var(--data); font-size: 0.875rem; color: var(--ink); }
.readout--light li { border-color: var(--line-lt); }
.readout--light .key { color: rgba(255, 255, 255, 0.45); }
.readout--light .val { color: #fff; }

/* ---------- Botões ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-family: var(--data);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.9375rem 1.5rem;
  border: 1px solid transparent;
  background: var(--brass);
  color: var(--navy);
  transition: background 0.25s var(--ease), color 0.25s var(--ease),
              border-color 0.25s var(--ease);
}
.btn:hover { background: var(--brass-d); color: #fff; }

.btn--ghost {
  background: transparent;
  border-color: var(--line-lt);
  color: #fff;
}
.btn--ghost:hover { background: #fff; color: var(--navy); border-color: #fff; }

.btn--ink {
  background: transparent;
  border-color: var(--ink);
  color: var(--ink);
}
.btn--ink:hover { background: var(--navy); border-color: var(--navy); color: #fff; }

.btn__arrow { transition: transform 0.25s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(4px); }

/* Envolve o(s) botão(ões) no fim de um bloco de conteúdo.
   Use sempre isto — nunca margin-top solto num <p>. */
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem;
  margin: 1.75rem 0 0;
}

/* ---------- Cabeçalho ---------- */

.site-head {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease);
}
.site-head__in {
  max-width: var(--shell);
  margin-inline: auto;
  padding: 0.875rem var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.brand { display: block; flex: none; }
.brand img { height: 46px; width: auto; }
.brand__light { display: none; }

/* Sobre hero escuro o cabeçalho fica transparente */
.site-head--over {
  background: transparent;
  border-color: transparent;
  position: fixed;
  left: 0;
  right: 0;
}
.site-head--over .brand__dark { display: none; }
.site-head--over .brand__light { display: block; }
.site-head--over .nav a { color: #fff; }
.site-head--over .nav__burger span { background: #fff; }
.site-head--over.is-stuck {
  background: rgba(1, 0, 77, 0.94);
  backdrop-filter: blur(14px);
  border-color: var(--line-lt);
}

.nav { display: flex; align-items: center; gap: 2rem; }
.nav__list {
  display: flex;
  align-items: center;
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav a {
  font-family: var(--data);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  padding: 0.375rem 0;
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s var(--ease), opacity 0.25s var(--ease);
}
.nav a:hover { border-color: currentColor; }
.nav a[aria-current="page"] { border-color: var(--brass); }

/* O botão do contato também casa com `.nav a`, que é mais específico que
   `.btn` e cancelava o padding dele. Recupera o respiro e dispensa o
   sublinhado — no botão o estado já é o fundo. */
.nav .btn {
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid transparent;
}
.nav .btn:hover,
.nav .btn[aria-current="page"] { border-bottom-color: transparent; }

.nav__burger {
  display: none;
  background: none;
  border: 0;
  padding: 0.5rem;
  cursor: pointer;
  flex-direction: column;
  gap: 5px;
}
.nav__burger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--ink);
  transition: transform 0.3s var(--ease), opacity 0.2s var(--ease);
}
.nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Voltar para a home (pedido do cliente) ---------- */

.backhome {
  border-bottom: 1px solid var(--line);
  background: #fff;
}
.backhome__in {
  max-width: var(--shell);
  margin-inline: auto;
  padding: 0.875rem var(--gutter);
}
.backhome a {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-family: var(--data);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-60);
  transition: color 0.25s var(--ease), gap 0.25s var(--ease);
}
.backhome a:hover { color: var(--navy); gap: 1rem; }

/* ---------- Hero ---------- */

.hero {
  position: relative;
  min-height: 92svh;
  display: flex;
  align-items: flex-end;
  color: #fff;
  background: var(--abyss);
  overflow: hidden;
}
.hero__media {
  position: absolute;
  inset: 0;
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.06);
  animation: drift 18s var(--ease) forwards;
}
@keyframes drift { to { transform: scale(1); } }

.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(5, 11, 31, 0.92) 0%, rgba(5, 11, 31, 0.35) 45%, rgba(5, 11, 31, 0.5) 100%);
}
.hero__in {
  position: relative;
  max-width: var(--shell);
  margin-inline: auto;
  width: 100%;
  /* O topo reserva a altura do cabeçalho fixo: com hero cheio o conteúdo
     fica embaixo, e quando ele cresce nunca encosta no menu. */
  padding: clamp(7rem, 15vh, 10rem) var(--gutter) clamp(3rem, 7vw, 5.5rem);
}
.hero h1 {
  font-size: clamp(2rem, 4.4vw, 3.5rem);
  max-width: 15ch;
  margin-bottom: 1.5rem;
}
.hero__lede {
  font-size: clamp(1rem, 1.6vw, 1.1875rem);
  color: rgba(255, 255, 255, 0.78);
  max-width: 46ch;
  margin-bottom: 2rem;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.875rem; }

.hero--short { min-height: 78svh; }
.hero--short h1 { font-size: clamp(2rem, 4vw, 3.25rem); }

/* ---------- Seções ---------- */

.section { padding-block: clamp(4rem, 9vw, 8rem); }
.section--foam { background: var(--foam); }
.section--navy { background: var(--navy); color: #fff; }
.section--abyss { background: var(--abyss); color: #fff; }
.section--tight { padding-block: clamp(3rem, 6vw, 5rem); }
/* Só o rodapé da seção enxuto — usado após os cards de destaque, onde a
   próxima seção (hélices) já traz respiro pela borda superior. */
.section--tight-b { padding-bottom: clamp(2rem, 4vw, 3.5rem); }

.section--navy p,
.section--abyss p { color: rgba(255, 255, 255, 0.82); }

/* `.stance__body p` pinta o texto de --ink-60 e vem depois daqui com a mesma
   especificidade — sobre fundo escuro isso dava 2,4:1. Estes seletores são
   mais específicos e garantem o texto claro. */
.section--navy .stance__body p,
.section--abyss .stance__body p { color: rgba(255, 255, 255, 0.82); }
.section--navy .stance__body strong,
.section--abyss .stance__body strong { color: #fff; }

.section__head { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section__head h2 { font-size: clamp(1.75rem, 3.4vw, 2.75rem); }

/* Texto de abertura em duas colunas */
.stance {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.stance h2 { font-size: clamp(1.5rem, 2.6vw, 2.125rem); }
.stance__body p { font-size: 1.0625rem; color: var(--ink-60); }
.stance__body strong { color: var(--ink); font-weight: 600; }

/* Coluna esquerda fixa: quando o corpo à direita é longo, o título e a
   etiqueta acompanham a rolagem grudados no topo (offset do cabeçalho fixo).
   No mobile a `.stance` vira 1 coluna e o sticky é desligado (linha ~1156). */
.stance--sticky > :first-child {
  position: sticky;
  top: 96px;
}
.stance--sticky .stance__body > :first-child { margin-top: 0; }
.stance--sticky .stance__body h3 {
  font-size: clamp(1.125rem, 1.8vw, 1.375rem);
  margin: 2rem 0 0.5rem;
}
.stance--sticky .stance__body ul {
  margin: 0.5rem 0 0;
  padding-left: 1.1rem;
  color: var(--ink-60);
}
.stance--sticky .stance__body li { margin-bottom: 0.4rem; }

/* O contrário do `--sticky`: quem gruda é a coluna da direita, porque a da
   esquerda é que é longa (título + foto alta, na Empresa). O bloco de item de
   grid é a área da linha inteira, então o texto acompanha a rolagem até a foto
   acabar. Desligado no mobile, onde vira uma coluna só (linha ~1300). */
.stance--sticky-body .stance__body {
  position: sticky;
  top: 96px;
}

/* Foto na coluna do título (Empresa). Retrato, para acompanhar a altura do
   texto ao lado sem esticar a coluna. Sem foto escolhida no painel, a mesma
   moldura fica vazia e legendada — o layout não muda quando a foto chegar. */
.portrait {
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--foam);
  min-width: 0;
}
.portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.portrait--empty {
  display: grid;
  place-items: center;
  border: 1px dashed var(--line);
  padding: 1rem;
}
.portrait__hint {
  font-family: var(--data);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-30);
  text-align: center;
}

/* ---------- Ícone base (SVG inline dos cards) ---------- */
.ic { width: 100%; height: 100%; display: block; }

/* ---------- Serviços: cards com ícone ---------- */
.svccards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
}
.svc {
  background: #fff;
  padding: clamp(1.5rem, 3vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}
/* Grade de linhas: sem translate (desalinha as células). O card preenche
   navy no hover e o ícone vira brass. */
.svc:hover { background: var(--navy); }
.svc:hover .svc__ic { color: var(--brass); }
.svc:hover h3 { color: #fff; }
.svc__ic {
  width: 2.25rem;
  height: 2.25rem;
  color: var(--current);
  flex: none;
  transition: color 0.3s var(--ease), transform 0.3s var(--ease);
}
.svc:hover .svc__ic { transform: translateY(-2px); }
.svc h3 {
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  margin: 0;
  transition: color 0.3s var(--ease);
}

/* ---------- Destaques: 3 box cards ---------- */
.boxcards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.box {
  background: var(--foam);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
  /* Borda transparente já reservada: hover só a colore, sem deslocar layout. */
  border: 1px solid transparent;
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.box:hover { border-color: var(--navy); transform: translateY(-4px); }
.box:hover .box__ic { color: var(--navy); }
.box__ic {
  width: 2.5rem;
  height: 2.5rem;
  color: var(--brass-d, var(--brass));
  flex: none;
  transition: color 0.3s var(--ease);
}
.box h3 {
  font-size: clamp(1.125rem, 1.8vw, 1.375rem);
  letter-spacing: 0.02em;
  margin: 0;
}
.box__body p { font-size: 0.9375rem; color: var(--ink-60); margin: 0 0 0.75rem; }
.box__body p:last-child { margin-bottom: 0; }

/* ---------- Frota: linhas editoriais ---------- */

.craft {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  padding-block: clamp(3rem, 6vw, 5.5rem);
  border-top: 1px solid var(--line);
  scroll-margin-top: 88px;
}
.craft:nth-child(even) .craft__media { order: 2; }

.craft__media { position: relative; overflow: hidden; background: var(--foam); }
.craft__media img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform 0.8s var(--ease);
}
.craft:hover .craft__media img { transform: scale(1.04); }

/* A foto acompanha a altura da coluna de texto em vez de ficar centralizada
   com sobra em cima e embaixo. Use quando o texto for longo o bastante para
   ficar mais alto que a proporção 16/10 da foto. */
.craft--full { align-items: stretch; }
.craft--full .craft__media img {
  height: 100%;
  min-height: 340px;
  aspect-ratio: auto;
}
/* O `stretch` acima é para a foto, não para o texto: sem isto a coluna de
   texto também esticava e o conteúdo ficava colado no topo quando é mais
   curto que a foto. Só a foto estica; o texto continua centrado nela. */
.craft--full > :not(.craft__media) { align-self: center; }

/* Logo da marca acima da etiqueta (FS Yachts, Yamaha…). Discreta: quem manda
   no bloco é o título. */
.craft__logo {
  width: auto;
  height: clamp(28px, 3.4vw, 40px);
  margin-bottom: 1.5rem;
  object-fit: contain;
}

/* Carrossel: com duas fotos ou mais elas se revezam em fade. Sem seta e sem
   ponto de propósito — é atmosfera, não navegação; e o fade não precisa de
   clone para ser infinito. Para no hover para não brigar com quem lê. */
.craft__media[data-carrossel] { display: grid; }
.craft__media[data-carrossel] > img {
  grid-area: 1 / 1;
  opacity: 0;
  transition: opacity 0.9s var(--ease), transform 0.8s var(--ease);
}
.craft__media[data-carrossel] > img.is-on { opacity: 1; }

/* placa de popa: o nome como está no casco */
.craft__badge {
  position: absolute;
  left: 0;
  bottom: 0;
  background: var(--navy);
  color: #fff;
  font-family: var(--data);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  padding: 0.5rem 0.875rem;
}
.craft h3 {
  font-size: clamp(1.5rem, 3vw, 2.375rem);
  margin-bottom: 0.75rem;
}
.craft__tag {
  font-size: 1.0625rem;
  color: var(--ink-60);
  margin-bottom: 1.75rem;
}
.craft__edge { margin-top: 1.5rem; font-size: 0.9375rem; color: var(--ink-60); }
.craft__edge strong {
  font-family: var(--data);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--current);
  display: block;
  margin-bottom: 0.375rem;
  font-weight: 400;
}

/* ---------- Grades ---------- */

.grid { display: grid; gap: 1px; background: var(--line); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

/* Diferenciais */
.trait {
  background: var(--foam);
  padding: clamp(1.75rem, 3vw, 2.5rem);
}
.trait__n {
  font-family: var(--data);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  color: var(--current);
  margin-bottom: 1.25rem;
  display: block;
}
.trait h3 { font-size: 1.0625rem; letter-spacing: 0.08em; margin-bottom: 0.625rem; }
.trait p { font-size: 0.9375rem; color: var(--ink-60); margin: 0; }

/* Cartões de motor */
.motor {
  background: #fff;
  border: 1px solid var(--line);
  padding: 1.75rem;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease);
  /* Item de grid nasce com `min-width: auto`: sem isto o card não encolhe
     abaixo da largura natural da foto e estoura a tela no celular. */
  min-width: 0;
}
.motor:hover { border-color: var(--navy); transform: translateY(-3px); }
.motor__img {
  background: #fff;
  aspect-ratio: 4 / 5;
  /* Flex, não grid: a moldura tem altura definida pelo `aspect-ratio`, então
     `max-height: 100%` na foto resolve contra ela. Em grid a linha era `auto`,
     `height: 100%` caía para `auto` e a foto vazava por baixo — arquivo mais
     alto que 4/5 (o que o cliente sobe pelo painel) saía cortado. */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1.75rem, 4.5vw, 3.25rem);
  min-width: 0;
  overflow: hidden;
}
.motor__img img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  min-width: 0;
  object-fit: contain;
}
.motor h3 { font-size: 1rem; letter-spacing: 0.08em; }
.motor__more {
  font-family: var(--data);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass-d);
  margin-top: auto;
}

/* Moldura larga: foto de ambiente (barco no mar) preenche a moldura inteira,
   ao contrário do produto recortado, que precisa de fundo e respiro. */
.motor__img--wide {
  aspect-ratio: 16 / 10;
  padding: 0;
  background: var(--foam);
}
.motor__img--wide img {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
}

/* Linha de modelos (Zefir): um grupo por linha, dentro da página da marca */
.linha + .linha { margin-top: clamp(2.5rem, 5vw, 4rem); }
.linha__nome {
  font-size: clamp(1.125rem, 1.8vw, 1.375rem);
  letter-spacing: 0.08em;
  padding-bottom: 0.875rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--line);
}
.linha__texto {
  font-size: 0.9375rem;
  color: var(--ink-60);
  margin: -0.75rem 0 1.5rem;
}
.modelo { background: #fff; gap: 1rem; }
.modelo h3 { font-size: 0.9375rem; }
/* Dentro do card a coluna do rótulo é mais estreita que na ficha grande —
   8,5rem em três colunas espremia o valor. */
.modelo .readout li { grid-template-columns: 6.25rem 1fr; gap: 0.75rem; }
.modelo .readout .val { font-size: 0.8125rem; }
.modelo .motor__more { padding-top: 0.5rem; }

/* Cards de produto (Peças e Yamalube) — frasco menor, com respiro em volta:
   é embalagem alta em moldura 4/5, e cheia de borda a borda ficava pesada. */
.produto .motor__img { padding: clamp(2.25rem, 5.5vw, 4rem); }
.produto .motor__img img { max-height: 88%; }

.produto__sub {
  font-family: var(--data);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--current);
  margin: -0.5rem 0 0;
}
.produto__desc {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--ink-60);
  margin: 0;
}
.produto .motor__more { margin-top: 1rem; }

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }

/* Categorias de motor */
.cat {
  position: relative;
  display: block;
  text-decoration: none;
  background: var(--navy);
  color: #fff;
  padding: clamp(2rem, 4vw, 3rem);
  min-height: 240px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  transition: background 0.35s var(--ease);
}
.cat:hover { background: var(--abyss); }
.cat h3 { font-size: clamp(1.25rem, 2.2vw, 1.75rem); }
.cat p { color: rgba(255, 255, 255, 0.62); font-size: 0.9375rem; margin: 0.75rem 0 0; }
.cat__go {
  font-family: var(--data);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass);
  margin-top: 2rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.cat:hover .cat__go .btn__arrow { transform: translateX(4px); }
.cat--soon { pointer-events: none; opacity: 0.55; }
.cat--soon .cat__go { color: rgba(255, 255, 255, 0.4); }

/* ---------- Vídeo e galeria (páginas de modelo) ---------- */

/* oEmbed vem com iframe de tamanho fixo; aqui ele vira fluido. */
.video {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--abyss);
  overflow: hidden;
}
.video iframe,
.video object,
.video embed,
.video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.galeria {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.galeria__item { margin: 0; overflow: hidden; background: var(--foam); }

/* Todas as fotos no mesmo tamanho: cada uma ocupa uma célula da grade. */
.galeria__item--largo { grid-column: auto; }

.galeria__item img {
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform 0.7s var(--ease);
}
.galeria__item:hover img { transform: scale(1.03); }
.galeria__item a { display: block; cursor: zoom-in; }

/* ---------- Lightbox da galeria ---------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  gap: clamp(0.5rem, 2vw, 1.5rem);
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(6, 12, 22, 0.94);
}
.lightbox.is-open { display: flex; }
.lightbox__stage {
  margin: 0;
  max-width: min(1200px, 88vw);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}
.lightbox__stage img {
  max-width: 100%;
  max-height: 82vh;
  width: auto;
  height: auto;
  object-fit: contain;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.lightbox__count {
  font-family: var(--data);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.7);
}
.lightbox__nav,
.lightbox__close {
  flex: none;
  display: grid;
  place-items: center;
  border: 0;
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  cursor: pointer;
  transition: background 0.2s var(--ease);
}
.lightbox__nav {
  width: clamp(2.75rem, 5vw, 3.5rem);
  height: clamp(2.75rem, 5vw, 3.5rem);
  border-radius: 50%;
  font-size: 1.75rem;
  line-height: 1;
}
.lightbox__nav:hover,
.lightbox__close:hover { background: rgba(255, 255, 255, 0.24); }
.lightbox__close {
  position: absolute;
  top: clamp(0.75rem, 2vw, 1.5rem);
  right: clamp(0.75rem, 2vw, 1.5rem);
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  font-size: 1.75rem;
  line-height: 1;
}

@media (max-width: 640px) {
  .lightbox__nav {
    position: absolute;
    bottom: 1.25rem;
    z-index: 1;
  }
  .lightbox__nav--prev { left: 1.25rem; }
  .lightbox__nav--next { right: 1.25rem; }
  .lightbox__stage img { max-height: 74vh; }
}

/* ---------- Card de resultado (busca) ---------- */

.post {
  background: #fff;
  border-top: 2px solid var(--navy);
  padding-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.post h3 { font-size: 1.0625rem; letter-spacing: 0.06em; line-height: 1.3; }
.post p { font-size: 0.9375rem; color: var(--ink-60); margin: 0; }
.post__link {
  font-family: var(--data);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass-d);
  text-decoration: none;
  margin-top: auto;
  padding-top: 0.5rem;
  align-self: flex-start;
  border-bottom: 1px solid transparent;
}
.post__link:hover { border-color: currentColor; }

/* Tela vazia é convite para agir, não beco sem saída */
.empty {
  border: 1px solid var(--line);
  padding: clamp(2.5rem, 6vw, 4rem);
  text-align: center;
}
.empty h3 { font-size: 1.125rem; margin-bottom: 0.75rem; }
.empty p { color: var(--ink-60); margin-inline: auto; }

/* ---------- Depoimentos ----------

   Quem desenha os cards é o widget de avaliações do Google (Trustindex). Sem
   o shortcode no painel, a seção inteira não é impressa — não há estado vazio
   para estilizar aqui. O que se garante é que o widget não estoure a largura
   da coluna nem force barra horizontal na página. */

.quotes > *,
.quotes img,
.quotes iframe { max-width: 100%; }

/* ---------- Faixa de chamada ---------- */

.summon {
  position: relative;
  color: #fff;
  text-align: center;
  padding-block: clamp(5rem, 12vw, 9rem);
  overflow: hidden;
  background: var(--abyss);
}
.summon__media { position: absolute; inset: 0; overflow: hidden; }
.summon__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Desfoque leve + escala: o scale come a borda clara que o blur
     deixa nas beiradas. O texto é o assunto, a foto é atmosfera. */
  filter: blur(5px);
  transform: scale(1.08);
}
.summon__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(1, 0, 77, 0.76);
}
.summon__in { position: relative; }
.summon h2 { font-size: clamp(1.75rem, 4vw, 3rem); margin-bottom: 1rem; }
.summon p {
  margin-inline: auto;
  color: rgba(255, 255, 255, 0.75);
  max-width: 52ch;
  margin-bottom: 2rem;
}
.summon .eyebrow { justify-content: center; }

/* ---------- Versões Outboard / Inboard ----------
   O seletor de motorização abre a ficha do modelo, antes da foto: é a
   primeira escolha de quem compra. Botão em mono caixa alta, radius 0, sem
   sombra — a mesma linguagem de instrumento do .readout. Sem JS os painéis
   ficam todos visíveis; quem esconde é a classe .is-off, que só o JS põe. */

.vers-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2rem;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 1.5rem 0;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.vers-bar__rotulo {
  font-family: var(--data);
  font-size: 0.8125rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--current);
  margin: 0;
}
/* o .spec__img centraliza os filhos; o painel precisa da largura toda */
.spec__img > .vers__painel { width: 100%; }

/* Os dois botões respiram: são a primeira escolha de quem compra, então
   ganham corpo de botão e espaço entre si — não de abinha de navegação. */
.vers__tabs { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.vers__tab {
  appearance: none;
  background: none;
  border: 1px solid var(--line);
  margin: 0;
  padding: 0.9375rem 1.75rem;
  cursor: pointer;
  font-family: var(--data);
  font-size: 0.875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-60);
  transition: color 0.3s var(--ease), background 0.3s var(--ease),
    border-color 0.3s var(--ease);
}
.vers__tab:hover { color: var(--ink); border-color: var(--ink-30); }
.vers__tab.is-on {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
  position: relative;
  z-index: 1;
}

/* Ficha da versão: entra abaixo da ficha geral e troca junto com a foto */
.ficha-vers { margin-top: 2rem; }
.ficha-vers .eyebrow { margin-bottom: 0.75rem; }

.vers__painel { position: relative; }
.vers__painel img { width: 100%; display: block; }
.vers__painel.is-off { display: none; }

/* Marca da versão sobre a foto, no lugar da placa de popa */
.vers__marca {
  position: absolute;
  left: 0;
  bottom: 0;
  background: var(--navy);
  color: #fff;
  font-family: var(--data);
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.375rem 0.75rem;
}

/* Selo no card da listagem: fica ao lado da placa de popa */
.craft__vers {
  position: absolute;
  right: 0;
  bottom: 0;
  display: flex;
  gap: 1px;
}
.craft__vers-item {
  background: rgba(5, 11, 31, 0.86);
  color: #fff;
  font-family: var(--data);
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.375rem 0.75rem;
}

/* Uma galeria por versão: só a ativa fica na tela */
[data-vers-alvo].is-off { display: none; }

/* ---------- Ficha de produto ---------- */

.spec {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.spec__img {
  background: #fff;
  padding: clamp(1.5rem, 4vw, 3rem);
  display: grid;
  place-items: center;
  position: sticky;
  top: 96px;
}
.spec__img img { max-height: 60svh; width: auto; }
.spec h1 { font-size: clamp(1.75rem, 3.6vw, 2.75rem); margin-bottom: 0.75rem; }
.spec__claim {
  font-family: var(--display);
  font-variation-settings: "wdth" 112;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.875rem;
  color: var(--current);
  margin-bottom: 1.5rem;
}
.spec__lede { font-size: 1.0625rem; color: var(--ink-60); }
.spec__lede strong { color: var(--ink); font-weight: 600; }

.sheet { margin-top: 2.5rem; }
.sheet h2 { font-size: 1.125rem; letter-spacing: 0.08em; margin-bottom: 1.25rem; }

/* ---------- Contato ---------- */

.contact {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.field { margin-bottom: 1.25rem; }
.field label {
  display: block;
  font-family: var(--data);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-60);
  margin-bottom: 0.5rem;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  font-family: var(--body);
  font-size: 1rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 0.875rem 1rem;
  transition: border-color 0.25s var(--ease);
}
.field input:focus,
.field select:focus,
.field textarea:focus { border-color: var(--navy); outline: none; }
.field textarea { min-height: 140px; resize: vertical; }

.form__note {
  font-family: var(--data);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  color: var(--ink-30);
  margin: 1rem 0 0;
}
.form__status {
  font-family: var(--data);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--current);
  margin-top: 1rem;
  min-height: 1.25rem;
}

/* ---------- Contact Form 7 ----------
   O plugin envolve cada campo num <span class="wpcf7-form-control-wrap">
   e injeta as próprias mensagens. Aqui só neutralizamos o visual padrão
   dele: o desenho continua vindo de .field / .btn / .form__note acima. */

.sn-cf7 .wpcf7 { margin: 0; }
.sn-cf7 .wpcf7-form-control-wrap { display: block; }
.sn-cf7 .wpcf7 form .wpcf7-response-output { margin: 1rem 0 0; padding: 0; border: 0; }

/* Campo inválido: o CF7 marca o controle e escreve a dica logo abaixo. */
.sn-cf7 .wpcf7-not-valid { border-color: #B3261E; }
.sn-cf7 .wpcf7-not-valid-tip {
  display: block;
  font-family: var(--data);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  color: #B3261E;
  margin-top: 0.375rem;
}

/* Mensagem de retorno — mesma pegada do .form__status. */
.sn-cf7 .wpcf7-response-output {
  font-family: var(--data);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  line-height: 1.5;
  color: var(--current);
}
.sn-cf7 form.invalid .wpcf7-response-output,
.sn-cf7 form.unaccepted .wpcf7-response-output,
.sn-cf7 form.payment-required .wpcf7-response-output,
.sn-cf7 form.failed .wpcf7-response-output,
.sn-cf7 form.aborted .wpcf7-response-output,
.sn-cf7 form.spam .wpcf7-response-output { color: #B3261E; }
.sn-cf7 form.sent .wpcf7-response-output { color: var(--current); }

/* Botão: o CF7 gera <input type="submit">, que não aceita filho.
   A seta vira ::after do invólucro e mantém o mesmo deslize do .btn. */
.sn-submit {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.sn-submit .wpcf7-submit { padding-right: 2.75rem; cursor: pointer; }
.sn-submit .wpcf7-submit:disabled { opacity: 0.6; cursor: default; }
.sn-submit::after {
  content: "\2192";
  position: absolute;
  right: 1.5rem;
  font-family: var(--data);
  font-size: 0.75rem;
  color: var(--navy);
  pointer-events: none;
  transition: transform 0.25s var(--ease), color 0.25s var(--ease);
}
.sn-submit:hover::after {
  transform: translateX(4px);
  color: #fff;
}

/* Spinner do plugin ao enviar. */
.sn-cf7 .wpcf7-spinner {
  margin: 0 0 0 0.875rem;
  background-color: var(--ink-30);
}

/* Link do WhatsApp que aparece depois do envio (ver assets/js/main.js). */
.sn-cf7 .form__wa {
  display: inline-block;
  font-family: var(--data);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--navy);
  margin-top: 0.75rem;
}

/* O honeypot nunca pode aparecer nem receber foco/leitura. */
.sn-cf7 .wpcf7-form-control-wrap[data-name^="honeypot"],
.sn-cf7 .cf7apps-honeypot,
.sn-cf7 .honeypot-wrapper {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.map {
  border: 1px solid var(--line);
  width: 100%;
  aspect-ratio: 4 / 3;
  filter: grayscale(1) contrast(1.05);
  transition: filter 0.4s var(--ease);
}
.map:hover { filter: none; }

/* ---------- Rodapé ---------- */

.site-foot {
  background: var(--navy);
  color: #fff;
  padding-block: clamp(3rem, 6vw, 5rem) 2rem;
}
.site-foot__top {
  display: grid;
  grid-template-columns: minmax(0, 4fr) repeat(3, minmax(0, 2fr));
  gap: clamp(2rem, 4vw, 3rem);
  padding-bottom: 3rem;
  border-bottom: 1px solid var(--line-lt);
}
.site-foot img { height: 54px; width: auto; margin-bottom: 1.25rem; }

/* A logo do rodapé leva para a home, como a do topo. `inline-block` para o
   alvo do clique parar na imagem em vez de varrer a coluna inteira, e a
   margem sai da imagem para o link — dentro dele viraria vazio clicável. */
.site-foot__logo { display: inline-block; margin-bottom: 1.25rem; }
.site-foot__logo img { margin-bottom: 0; transition: opacity 0.25s var(--ease); }
.site-foot__logo:hover img { opacity: 0.72; }
.site-foot h4 {
  font-family: var(--data);
  font-variation-settings: normal;
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.42);
  margin-bottom: 1rem;
}
.site-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.625rem; }
.site-foot a {
  text-decoration: none;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.9375rem;
  transition: color 0.25s var(--ease);
}
.site-foot a:hover { color: var(--brass); }
.site-foot address { font-style: normal; color: rgba(255, 255, 255, 0.7); font-size: 0.9375rem; }
.site-foot p { color: rgba(255, 255, 255, 0.7); font-size: 0.9375rem; }

/* Contato do rodapé: ícone pequeno à esquerda do dado. Traço fino, sem
   preenchimento — o dado é o assunto, o ícone só orienta. */
.contatos li { display: flex; align-items: center; gap: 0.625rem; }
.contatos a { display: inline-flex; align-items: center; gap: 0.625rem; }
.contatos svg {
  width: 15px;
  height: 15px;
  flex: none;
  fill: none;
  stroke: var(--brass);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 0.25s var(--ease);
}
.contatos a:hover svg { stroke: #fff; }

.site-foot__bot {
  padding-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  font-family: var(--data);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
}

/* ---------- Botão flutuante do WhatsApp ---------- */

.wa {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 90;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25D366;
  display: grid;
  place-items: center;
  box-shadow: 0 8px 28px rgba(5, 11, 31, 0.28);
  transition: transform 0.25s var(--ease);
}
.wa:hover { transform: scale(1.07); }
.wa svg { width: 28px; height: 28px; fill: #fff; }

/* ---------- Entrada por scroll ---------- */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }

/* ---------- Responsivo ---------- */

@media (max-width: 1024px) {
  .site-foot__top { grid-template-columns: 1fr 1fr; }
  .grid--4 { grid-template-columns: 1fr 1fr; }
  .svccards { grid-template-columns: repeat(2, 1fr); }
  .boxcards { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  /* `backdrop-filter` cria bloco de contenção para `position: fixed`: com ele
     o drawer resolvia o `inset` contra o cabeçalho (74px) em vez da tela, e
     virava uma tira no topo com os itens vazando. No mobile o desfoque não faz
     falta — os fundos já são quase opacos —, então sai. */
  .site-head,
  .site-head--over.is-stuck { backdrop-filter: none; }

  /* Logo e burger ficam por cima do painel para dar como fechar. */
  .brand { position: relative; z-index: 2; }
  .nav__burger { display: flex; position: relative; z-index: 2; }

  .nav__list {
    position: fixed;
    inset: 0;
    z-index: 1;
    background: var(--navy);
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 1.75rem;
    padding: 6rem var(--gutter) 2.5rem;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.4s var(--ease);
  }
  .nav__list.is-open { transform: none; }
  .nav__list a { color: #fff; font-size: 1rem; }
  .nav .btn { background: var(--brass); color: var(--navy); }

  /* Painel aberto é navy: a logo vira a clara e o burger, branco. */
  .site-head.is-menu-open .brand__dark { display: none; }
  .site-head.is-menu-open .brand__light { display: block; }
  .site-head.is-menu-open .nav__burger span { background: #fff; }

  .stance,
  .craft,
  .spec,
  .contact { grid-template-columns: 1fr; }
  .craft:nth-child(even) .craft__media { order: 0; }
  .spec__img { position: static; }
  .stance--sticky > :first-child,
  .stance--sticky-body .stance__body { position: static; }

  /* Em 1 coluna o retrato ocuparia quase uma tela inteira antes do texto. */
  .portrait { aspect-ratio: 3 / 2; }

  .grid--3,
  .grid--4,
  .cards,
  .svccards { grid-template-columns: 1fr; }

  /* Galeria: 2 colunas no mobile/tablet. */
  .galeria { grid-template-columns: repeat(2, 1fr); }

  /* Home: no mobile a etiqueta do hero pode quebrar normalmente. */
  .home .hero .eyebrow { white-space: normal; }
}

@media (max-width: 560px) {
  .readout li { grid-template-columns: 1fr; gap: 0.125rem; }
  .site-foot__top { grid-template-columns: 1fr; }

  /* Seletor de motorização: os dois rótulos inteiros não cabem lado a lado */
  .vers__tabs { flex-direction: column; width: 100%; gap: 0.625rem; }
  .vers__tab { text-align: left; font-size: 0.8125rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .hero__media img { transform: none; }
}