/* Fluvimar — componentes.
   Composição conferida contra o site original (fundo claro, header e footer
   escuros, títulos centralizados em caixa alta). */

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

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-6);
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  text-align: center;
  transition:
    background-color var(--dur-rapida) var(--ease-entrada),
    color var(--dur-rapida) var(--ease-entrada);
}

.botao--primario {
  /* Não é --c-primaria: texto branco sobre o azul da marca dá 3,74:1, abaixo
     do 4,5:1 da WCAG AA para texto normal (este botão é 16px, peso 400). */
  background: var(--c-primaria-aa);
  color: var(--c-branco);
}

.botao--primario:hover { background: var(--c-primaria-aa-escura); }

.botao--vazado {
  background: transparent;
  border-color: currentColor;
  color: inherit;
}

.botao--vazado:hover { background: var(--c-branco); color: var(--c-escura); }

.botao--largo { width: 100%; }

/* ---------------------------------------------------------------------------
   Cabeçalho — faixa escura #00081d com blur
   --------------------------------------------------------------------------- */

/* Figma: bg #00081d sólido (não translúcido) com backdrop-blur de 4px. */
.cabecalho {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #00081d;
  backdrop-filter: blur(4px);
  color: var(--c-branco);
}

/* Figma: py-24px com o CTA de 40px de altura => nav de 88px.
   O padding lateral do nav é 80px, não os 120px das seções. */
.cabecalho__interno {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding: var(--sp-6) 80px;
  min-height: 88px;
}

.cabecalho__logo img { width: 186px; height: auto; }

/* Menu centralizado, CTA à direita. */
.cabecalho__nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 1;
  gap: var(--sp-8);
}

/* Figma: gap 8 entre os itens; cada link tem padding 8. */
.cabecalho__lista {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-inline: auto;
}

.cabecalho__link {
  display: inline-block;
  padding: var(--sp-2);
  font-size: var(--fs-base);   /* 16px, não 14 */
  line-height: 20px;
  letter-spacing: -0.32px;
  color: var(--c-txt-inv-85);
  transition: color var(--dur-rapida) var(--ease-entrada);
}

.cabecalho__link:hover,
.cabecalho__link.esta-ativo { color: var(--c-branco); }

/* Figma: h-40, px-16 py-12, 16px peso 400, tracking -0.48px. */
.cabecalho__cta {
  flex-shrink: 0;
  height: 40px;
  padding: 12px 16px;
  font-size: var(--fs-base);
  font-weight: 400;
  line-height: 16px;
  letter-spacing: -0.48px;
}

.cabecalho__hamburguer {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
}

.cabecalho__barras,
.cabecalho__barras::before,
.cabecalho__barras::after {
  display: block;
  width: 22px;
  height: 2px;
  margin-inline: auto;
  background: currentColor;
}

.cabecalho__barras::before,
.cabecalho__barras::after { content: ""; position: relative; }
.cabecalho__barras::before { top: -7px; }
.cabecalho__barras::after  { top: 5px; }

@media (max-width: 1199.98px) {
  .cabecalho__hamburguer { display: block; }

  .cabecalho__nav {
    position: fixed;
    inset: 64px 0 0;
    flex-direction: column;
    justify-content: flex-start;
    gap: var(--sp-8);
    padding: var(--sp-8) var(--gutter);
    background: var(--c-escura);
    overflow-y: auto;
    transform: translateX(100%);
    visibility: hidden;
    transition:
      transform var(--dur-base) var(--ease-saida),
      visibility var(--dur-base);
  }

  .cabecalho__nav.esta-aberto { transform: translateX(0); visibility: visible; }

  .cabecalho__lista {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-4);
    margin-inline: 0;
  }

  .cabecalho__link { font-size: var(--fs-lg); }
}

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

.secao--cinza { background: var(--c-cinza-bg); }

.secao__titulo {
  margin-bottom: var(--sp-8);
  font-size: var(--fs-4xl);
  text-transform: uppercase;
}

.secao__titulo--centro { text-align: center; }

.secao__intro { max-width: 60ch; color: rgba(0, 0, 0, 0.65); }

/* ---------------------------------------------------------------------------
   Hero de produto — fundo claro com faixas diagonais
   --------------------------------------------------------------------------- */

.produto-hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* O Framer fixa a altura desta seção em 480px, sobrando espaço vazio
     abaixo do conteúdo — ver "armadilhas" no CLAUDE.md. */
  min-height: 480px;
  padding-block: var(--sp-16) var(--sp-10);
  text-align: center;
  /* Faixas diagonais claríssimas, como no original. */
  background:
    repeating-linear-gradient(
      -68deg,
      #ffffff 0 62px,
      #f4f4f4 62px 124px
    );
}

.produto-hero__titulo {
  max-width: 16ch;
  margin: 0 auto var(--sp-10);
  font-size: var(--fs-5xl);
  text-transform: uppercase;
  text-wrap: balance;
}

.produto-hero__imagem {
  width: 100%;
  max-width: 720px;
  margin-inline: auto;
  object-fit: contain;
}

.linha-hero {
  padding-block: var(--sp-16) var(--sp-10);
  text-align: center;
}

.linha-hero__titulo {
  font-size: var(--fs-5xl);
  text-transform: uppercase;
}

/* ---------------------------------------------------------------------------
   Hero de categoria — imagem de fundo com texto sobreposto à esquerda
   ---------------------------------------------------------------------------
   Medidas lidas do original (viewport 1440):
     pílula 14/15 · h1 64/70 alinhado à esquerda, caixa normal · sub 24/36 */

.hero-categoria {
  position: relative;
  display: flex;
  align-items: center;
  height: 600px;            /* Figma: h-[600px] */
  overflow: hidden;
  color: var(--c-branco);
}

.hero-categoria__fundo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* "Fumaça" — gradiente exato do Figma. Preto, não azul-marinho. */
.hero-categoria::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.82) 0%,
    rgba(0, 0, 0, 0.73) 13%,
    rgba(0, 0, 0, 0.61) 27%,
    rgba(0, 0, 0, 0) 89%
  );
}

.hero-categoria__conteudo {
  position: relative;
  z-index: 2;
  padding-block: var(--sp-16);
}

/* Figma: gap de 15.3px entre pílula, título e subtítulo. */
.hero-categoria__conteudo > * + * { margin-top: 15.3px; }

.hero-categoria__titulo {
  width: 651px;             /* Figma: w-[651px] */
  max-width: 100%;
  font-size: 4rem;          /* 64px */
  line-height: 70.4px;
  letter-spacing: -1.28px;
  font-weight: 700;
  text-transform: none;     /* o original NÃO usa caixa alta aqui */
  text-align: left;
}

.hero-categoria__sub {
  width: 707px;             /* Figma: w-[707px] */
  max-width: 100%;
  font-size: var(--fs-xl);  /* 24px */
  line-height: 36px;
  letter-spacing: -0.48px;
  color: var(--c-txt-inv-70);
}

/* Pílula do eyebrow — "hat" no Figma */
.pilula {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 4px 8px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.16);
  /* Sombra interna, não `border`: no original a borda é um filho absoluto e
     não entra na altura — a pílula tem 24px, não 26. */
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  font-size: var(--fs-sm);  /* 14px */
  line-height: 15.26px;
  letter-spacing: -0.28px;
  color: rgba(255, 255, 255, 0.8);
}

/* Selo exportado do Figma (16×17). Container de tamanho fixo para a imagem
   não estourar até o tamanho intrínseco. */
.pilula__icone {
  width: 16px;
  height: 17px;
  flex-shrink: 0;
}

@media (max-width: 809.98px) {
  .hero-categoria { min-height: 420px; }
  .hero-categoria__titulo { font-size: 2.25rem; line-height: 1.15; }
  .hero-categoria__sub { font-size: var(--fs-md); line-height: 1.5; }
}

/* ---------------------------------------------------------------------------
   Introdução da categoria
   --------------------------------------------------------------------------- */

/* Figma: seção py-80 com gap-32 entre os blocos internos. */
.secao-categoria { padding-block: var(--sp-20); }

.secao-categoria__conteudo {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
}

@media (max-width: 809.98px) {
  .secao-categoria { padding-block: var(--sp-10); }
}

.intro-categoria__titulo {
  font-size: 2.5rem;        /* 40px */
  line-height: 56px;
  letter-spacing: -0.4px;
  color: var(--c-cinza-txt);
  text-align: center;
  text-transform: none;
  text-wrap: balance;
}

/* Figma: marca e texto lado a lado, com o texto em 776px. */
.intro-categoria {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-10);
  padding-block: var(--sp-6);
}

/* Faixas diagonais — SVG exportado do Figma (110×35 e 110×36).
   O degradê entre os traços já vem no arquivo; não aplicar opacity aqui. */
.intro-categoria__marca,
.intermezzo__marca {
  display: block;
  width: 110px;
  height: auto;
  flex-shrink: 0;
}

/* Bloco de texto solto entre os cards de modelo. */
.intermezzo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-10);
  padding-block: var(--sp-6);
}

.intermezzo__texto {
  width: 771px;
  max-width: 100%;
  font-size: var(--fs-lg);
  line-height: 30px;
  letter-spacing: 0.2px;
  color: rgba(0, 0, 0, 0.7);
}

@media (max-width: 809.98px) {
  .intermezzo { flex-direction: column; align-items: flex-start; gap: var(--sp-4); }
  .intermezzo__texto { font-size: var(--fs-base); line-height: 1.6; }
}

.intro-categoria__texto {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5, 1.25rem);   /* Figma: pt-20px entre os parágrafos */
  width: 776px;
  max-width: 100%;
}

.intro-categoria__texto p {
  font-size: var(--fs-lg);  /* 20px */
  line-height: 30px;
  letter-spacing: 0.2px;
  color: rgba(0, 0, 0, 0.7);
}

@media (max-width: 809.98px) {
  .intro-categoria { flex-direction: column; align-items: flex-start; gap: var(--sp-4); }
  .intro-categoria__titulo { font-size: var(--fs-3xl); line-height: 1.2; text-align: left; }
  .intro-categoria__texto p { font-size: var(--fs-base); line-height: 1.6; }
}

/* ---------------------------------------------------------------------------
   Modelos em ziguezague
   --------------------------------------------------------------------------- */

/* Figma: cada modelo é uma caixa rounded-32 com borda #f3f3f3,
   altura 393px, padding 64/32 e gap 40. Espaçamento entre caixas: 32px. */
.modelos {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
}

/* Nas páginas de linha o espaçamento entre caixas é 24, não 32 — medido no
   original (cards a cada 417px, com 393 de altura). */
.modelos--compacto { gap: var(--sp-6); }

/* A foto do produto é maior nestas páginas: 413px de altura contra os 265 de
   área útil do card. No original ela TRANSBORDA e é cortada pelo overflow,
   sem esticar o card — daí o posicionamento absoluto, que a tira do fluxo. */
/* As colunas não são iguais aqui: a foto ocupa 668px e o texto 428
   (668 + 40 de gap + 428 = 1136, a largura útil do card). */
.modelos--compacto .modelo {
  grid-template-columns: 1fr 428px;
}

.modelos--compacto .modelo--invertido {
  grid-template-columns: 428px 1fr;
}

.modelos--compacto .modelo__midia {
  position: relative;
  height: 265px;
}

/* Absoluta para transbordar na vertical sem esticar o card. */
.modelos--compacto .modelo__midia img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 413px;
  object-fit: contain;
  max-width: none;
}

@media (max-width: 809.98px) {
  .modelos--compacto .modelo,
  .modelos--compacto .modelo--invertido { grid-template-columns: 1fr; }

  .modelos--compacto .modelo__midia { height: auto; }

  .modelos--compacto .modelo__midia img {
    position: static;
    transform: none;
    height: auto;
    width: 100%;
    max-width: 100%;
  }
}

.modelo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-10);        /* 40px */
  align-items: center;
  min-height: 393px;
  padding: 64px 32px;
  background: rgba(243, 243, 243, 0.25);
  border: 1px solid #f3f3f3;
  border-radius: 32px;
  overflow: hidden;
}

/* Inverte a ordem visual sem mexer na ordem do DOM — a leitura por
   leitor de tela continua título antes de imagem. */
.modelo--invertido .modelo__midia { order: 2; }
.modelo--invertido .modelo__texto { order: 1; text-align: right; }
.modelo--invertido .modelo__link { margin-left: auto; }

/* Figma: a imagem tem aspecto 1.619 e altura 264.41px. `contain` porque
   são recortes do barco inteiro — cortar as pontas descaracteriza o modelo. */
.modelo__midia img {
  width: 100%;
  height: 264.41px;
  object-fit: contain;
}

.modelo__texto {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);         /* 32px entre o bloco de texto e o botão */
  align-items: flex-start;
  width: 428px;
  max-width: 100%;
  margin-inline: auto;
}

.modelo--invertido .modelo__texto { align-items: flex-end; }

/* Título + descrição: gap 16. O botão fica fora, a 32 do bloco. */
.modelo__bloco {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  width: 100%;
}

.modelo--invertido .modelo__bloco { text-align: right; }

.modelo__titulo {
  font-size: 2.5rem;            /* 40px */
  line-height: 56px;
  letter-spacing: -0.4px;
  text-transform: none;
}

.modelo__descricao {
  font-size: var(--fs-lg);      /* 20px */
  line-height: 30px;
  letter-spacing: 0.2px;
  color: rgba(0, 0, 0, 0.7);
}

/* "Explorar →" é um botão pílula com borda preta, não um link sublinhado. */
.modelo__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 12px 16px;
  border: 1px solid var(--c-preto);
  border-radius: var(--r-pill);
  font-size: var(--fs-base);    /* 16px */
  line-height: 16px;
  letter-spacing: -0.48px;
  color: var(--c-preto);
  transition:
    background-color var(--dur-rapida) var(--ease-entrada),
    color var(--dur-rapida) var(--ease-entrada);
}

.modelo__link:hover {
  background: var(--c-preto);
  color: var(--c-branco);
}

@media (max-width: 809.98px) {
  .modelos { gap: var(--sp-6); }

  .modelo {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
    min-height: 0;
    padding: var(--sp-8) var(--sp-6);
    border-radius: var(--r-lg);
  }

  /* No mobile todos alinham igual — o ziguezague não faz sentido em coluna. */
  .modelo--invertido .modelo__midia { order: 0; }
  .modelo--invertido .modelo__texto { order: 0; align-items: flex-start; }

  .modelo__midia img { height: auto; aspect-ratio: 1.62 / 1; }
  .modelo__titulo { font-size: var(--fs-3xl); line-height: 1.2; }
  .modelo__descricao { font-size: var(--fs-base); line-height: 1.6; }
}

/* ---------------------------------------------------------------------------
   Ficha técnica — header preto, linhas zebradas, valores centralizados
   --------------------------------------------------------------------------- */

.tabela-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid #e6e6e6;
  border-radius: var(--r-sm);
}

.ficha-tecnica {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}

.ficha-tecnica thead th {
  padding: var(--sp-4);
  background: #0a0a0a;
  color: var(--c-branco);
  font-family: var(--font-body);
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
}

.ficha-tecnica thead th:first-child { text-align: left; }

.ficha-tecnica tbody th {
  padding: var(--sp-4);
  font-weight: 400;
  text-align: left;
  border-right: 1px solid #ececec;
}

.ficha-tecnica tbody td {
  padding: var(--sp-4);
  text-align: center;
  border-right: 1px solid #ececec;
}

.ficha-tecnica tbody td:last-child { border-right: 0; }

/* Zebra igual à do original. */
.ficha-tecnica tbody tr:nth-child(even) { background: #f5f5f5; }

/* ---------------------------------------------------------------------------
   Planta — caixa lavanda
   --------------------------------------------------------------------------- */

.planta {
  /* +16px: no original as três seções (ficha, planta, acordeão) são uma
     única faixa flex com gap 56 entre itens; aqui cada uma é uma <section>
     própria com seu padding-block — o total bate mas sobra 16px de vão
     entre as bordas que o padding sozinho não cobre. */
  margin-top: 16px;
  padding: var(--sp-4);
  background: var(--c-lavanda);
  border: 1px solid #e6e9f7;
  border-radius: var(--r-sm);
}

.planta img {
  width: 100%;
  /* Altura fixa como no Framer — as plantas exportadas têm proporções
     naturais diferentes entre si (cada modelo tem seu próprio desenho),
     mas a caixa não muda de tamanho: contain encaixa cada uma dentro do
     mesmo quadro. */
  height: 377px;
  margin-inline: auto;
  object-fit: contain;
}

/* ---------------------------------------------------------------------------
   Acordeão — "Itens de Série" e FAQ
   --------------------------------------------------------------------------- */

.acordeao { border-bottom: 1px solid #e6e6e6; }

.acordeao__gatilho {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) 0;
  cursor: pointer;
  list-style: none;
  font-size: var(--fs-base);
}

/* Remove o triângulo padrão do <details>. */
.acordeao__gatilho::-webkit-details-marker { display: none; }

.acordeao__icone {
  position: relative;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--c-azul-claro);
}

/* Sinal de + que vira − quando aberto. */
.acordeao__icone::before,
.acordeao__icone::after {
  content: "";
  position: absolute;
  inset: 50% 6px auto;
  height: 1.5px;
  background: var(--c-escura);
  transform: translateY(-50%);
  transition: transform var(--dur-base) var(--ease-entrada);
}

.acordeao__icone::after { transform: translateY(-50%) rotate(90deg); }

.acordeao[open] .acordeao__icone::after { transform: translateY(-50%) rotate(0deg); }

.acordeao__corpo { padding-bottom: var(--sp-6); }

.itens-serie {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: var(--sp-2) var(--sp-8);
}

.itens-serie__item {
  position: relative;
  padding-left: var(--sp-4);
  font-size: var(--fs-sm);
  color: rgba(0, 0, 0, 0.75);
}

.itens-serie__item::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--c-primaria);
}

.itens-serie__grupo {
  grid-column: 1 / -1;
  margin-top: var(--sp-3);
  font-size: var(--fs-base);
}

/* ---------------------------------------------------------------------------
   Cards
   --------------------------------------------------------------------------- */

.card-produto__area {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  height: 100%;
  padding: var(--sp-6);
  background: var(--c-branco);
  border-radius: var(--r-sm);
  text-align: center;
  transition:
    transform var(--dur-base) var(--ease-saida),
    box-shadow var(--dur-base) var(--ease-saida);
}

/* Cards sem link viram <div> e não devem parecer clicáveis. */
a.card-produto__area:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0, 8, 29, 0.1);
}

.card-produto__imagem {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
}

.card-produto__nome {
  margin-top: auto;
  font-family: var(--font-heading);
  font-size: var(--fs-md);
  font-weight: 700;
}

/* Card de revenda — 588×170 no original, com gap 16 entre os três blocos.
   A altura sai sozinha do conteúdo: 14 + 33.6 + 16 + 52 + 16 + 24 + 14. */
.card-revenda {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: 14px;
  background: rgba(0, 0, 0, 0.04);
  border-radius: var(--r-md);
}

.card-revenda__nome {
  font-size: var(--fs-xl);      /* 24px */
  line-height: 33.6px;
  letter-spacing: -0.48px;
}

/* Cidade e endereço andam juntos, com gap 4 — por isso o bloco interno, em
   vez de deixar o gap 16 do card valer para os dois. */
.card-revenda__local {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.card-revenda__cidade,
.card-revenda__endereco {
  font-style: normal;
  font-size: var(--fs-base);    /* 16px */
  line-height: 24px;
  letter-spacing: 0.4px;
  color: rgba(0, 0, 0, 0.7);
}

.card-revenda__contatos {
  margin-top: auto;
  font-size: var(--fs-base);
  line-height: 24px;
  letter-spacing: 0.4px;
  color: var(--c-primaria-escura);
}

.card-revenda__contato { color: inherit; }
.card-revenda__contato:hover { text-decoration: underline; }
.card-revenda__sep { opacity: 0.6; }

/* ---------------------------------------------------------------------------
   Formulário de contato
   --------------------------------------------------------------------------- */

.formulario {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5, 1.25rem);
  max-width: 620px;
}

.campo { display: flex; flex-direction: column; gap: var(--sp-2); }

.campo__rotulo { font-size: var(--fs-sm); font-weight: 500; }

.campo__entrada {
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-branco);
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: var(--r-sm);
  transition: border-color var(--dur-rapida) var(--ease-entrada);
}

.campo__entrada:focus {
  border-color: var(--c-primaria);
  outline: none;
  box-shadow: 0 0 0 3px rgba(2, 135, 230, 0.15);
}

.campo__area { resize: vertical; min-height: 140px; }

/* Só marca erro depois que o campo foi tocado, não ao carregar a página. */
.campo__entrada:user-invalid { border-color: #d33; }

.alerta {
  padding: var(--sp-4);
  margin-bottom: var(--sp-6);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
}

.alerta--erro { background: #fdecec; color: #8a1f1f; }

/* Dentro do CTA o espaçamento vem do gap do .cta__conteudo — sem isto o
   margin-bottom próprio do .alerta somaria por cima. */
.cta__alerta { margin-bottom: 0; }

/* ---------------------------------------------------------------------------
   CTA de newsletter
   --------------------------------------------------------------------------- */

/* Medidas do Figma (node 2102:1364), conferidas no original: seção py-80,
   gap 40 entre texto e formulário, bloco de texto com 593px e gap 16.
   Os valores anteriores eram estimativa — o título era 36px em vez de 48 e o
   campo tinha 380px em vez de 280. */
.cta { padding-block: var(--sp-20); text-align: center; }

.cta__conteudo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-10);
}

.cta__textos {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  width: 593px;
  max-width: 100%;
}

.cta__titulo {
  font-size: var(--fs-5xl);   /* 48px */
  line-height: 52.8px;
  letter-spacing: -0.96px;
  text-transform: uppercase;
}

.cta__texto {
  font-size: var(--fs-lg);    /* 20px */
  line-height: 30px;
  letter-spacing: 0.2px;
  color: rgba(0, 0, 0, 0.7);
}

.newsletter {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  width: 280px;
  max-width: 100%;
  height: 42px;
  padding-right: 1px;
  margin-inline: auto;
  background: var(--c-branco);
  border: 1px solid rgba(0, 0, 0, 0.5);
  border-radius: var(--r-pill);
  overflow: hidden;
}

.newsletter:focus-within { border-color: var(--c-primaria); }

.newsletter__campo {
  flex: 1;
  min-width: 0;
  padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-4);
  border: 0;
  background: none;
  font-size: var(--fs-sm);    /* 14px */
  color: rgba(0, 0, 0, 0.7);
}

.newsletter__campo:focus { outline: none; }

/* O botão é o SVG inteiro (círculo + seta) exportado do Figma — o círculo
   vem em #0070E0 no arquivo, que não é o azul primário do resto do site. */
.newsletter__botao {
  display: block;
  flex-shrink: 0;
  width: 39px;
  height: 40px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transition: opacity var(--dur-rapida) var(--ease-entrada);
}

.newsletter__botao:hover { opacity: 0.85; }

.newsletter__botao img { width: 39px; height: 40px; }

@media (max-width: 809.98px) {
  .cta { padding-block: var(--sp-10); }
  .cta__titulo { font-size: var(--fs-3xl); line-height: 1.15; }
  .cta__texto { font-size: var(--fs-base); line-height: 1.6; }
}


/* ---------------------------------------------------------------------------
   Rodapé — todos os valores vêm do Figma (node 2064:417)
   ---------------------------------------------------------------------------
   bg #1b1b1b · pt-80 pb-24 · px-120 · gap-32 entre "Up" e "Down"
   Up: gap-64 entre o conteúdo e o copyright */

.rodape {
  padding-block: var(--sp-20) var(--sp-6);
  background: #1b1b1b;
  color: var(--c-branco);
}

.rodape__interno {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
}

.rodape__up {
  display: flex;
  flex-direction: column;
  gap: var(--sp-16);
}

.rodape__topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-10);
}

/* Coluna da esquerda: 285px, gap 24 entre logo, texto, redes e idioma. */
.rodape__marca {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  align-items: flex-start;
  width: 285px;
}

.rodape__logo { width: 186px; height: auto; }

.rodape__razao {
  font-size: var(--fs-base);   /* 16px */
  line-height: 24px;
  letter-spacing: -0.32px;
  color: var(--c-txt-inv-60);
}

/* "FLUVIMAR F-BOAT LTDA." e o rótulo "CNPJ" vêm em peso médio. */
.rodape__razao-forte { font-weight: 500; }

.rodape__redes {
  display: flex;
  align-items: center;
  gap: var(--sp-4);            /* 16px */
}

.rodape__rede {
  display: grid;
  place-items: center;
  opacity: 0.75;
  transition: opacity var(--dur-rapida) var(--ease-entrada);
}

a.rodape__rede:hover { opacity: 1; }

/* O 1º ícone não é link no original. */
.rodape__rede--inerte { cursor: default; }

.rodape__idioma select {
  width: 120px;
  padding: 10px;
  background: #eee;
  color: var(--c-preto);
  border: 0;
  border-radius: 10px;
  font-size: var(--fs-sm);     /* 14px */
  line-height: 21px;
}

/* Colunas de links: gap 48 entre elas, 12 do título para a lista, 4 entre itens. */
.rodape__colunas {
  display: flex;
  gap: 48px;
  justify-content: flex-end;
  flex: 1;
}

.rodape__coluna ul {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  margin-top: var(--sp-3);
}

.rodape__coluna li { padding-block: var(--sp-1); }

.rodape__titulo {
  font-family: var(--font-body);
  font-size: var(--fs-base);   /* 16px */
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0.4px;
  color: var(--c-branco);
  text-transform: none;
}

.rodape__link {
  font-size: var(--fs-base);   /* 16px */
  line-height: 20px;
  letter-spacing: -0.32px;
  color: var(--c-txt-inv-60);
  transition: color var(--dur-rapida) var(--ease-entrada);
}

a.rodape__link:hover { color: var(--c-branco); }

/* "Meio Ambiente" e "Imprensa" não são links no original. */
.rodape__link--inerte { cursor: default; }

.rodape__base {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}

.rodape__copy {
  font-size: var(--fs-base);
  line-height: 20px;
  letter-spacing: -0.32px;
  color: var(--c-txt-inv-50);
}

.rodape__contato {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}

.rodape__contato-item {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-base);
  line-height: 20px;
  letter-spacing: -0.32px;
  color: var(--c-txt-inv-70);
  transition: color var(--dur-rapida) var(--ease-entrada);
}

.rodape__contato-item:hover { color: var(--c-branco); }

.rodape__separador {
  font-size: var(--fs-base);
  color: var(--c-txt-inv-50);
}

/* Bloco final: linha divisória + assinatura, gap 16. */
.rodape__down {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.rodape__linha {
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
}

.rodape__assinatura {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: var(--fs-base);
  line-height: 20px;
  letter-spacing: -0.32px;
  color: var(--c-txt-inv-50);
  transition: color var(--dur-rapida) var(--ease-entrada);
}

/* O logo é PNG branco, então acompanha o hover por opacidade — `color` não o
   afeta. O arquivo do Figma vinha com a opacidade da camada embutida (alfa
   máximo 103 de 255); foi normalizado para 255 para que o tom seja controlado
   só aqui e case exatamente com o texto ao lado. */
.rodape__assinatura img {
  height: 22px;
  width: auto;
  opacity: 0.5;                /* mesmo tom do texto em repouso */
  transition: opacity var(--dur-rapida) var(--ease-entrada);
}

.rodape__assinatura:hover,
.rodape__assinatura:focus-visible { color: var(--c-txt-inv-70); }

.rodape__assinatura:hover img,
.rodape__assinatura:focus-visible img { opacity: 0.7; }

@media (max-width: 809.98px) {
  .rodape__topo { flex-direction: column; }
  .rodape__marca { width: 100%; }
  .rodape__colunas { justify-content: flex-start; gap: var(--sp-10); }
  .rodape__base { flex-direction: column; align-items: flex-start; }
  .rodape__contato { flex-wrap: wrap; }
}

/* ---------------------------------------------------------------------------
   Hero de página de linha — imagem de fundo com o nome centralizado
   --------------------------------------------------------------------------- */

/* 400px medido no original: com os 88 do cabeçalho e os 80 de padding da
   seção, o primeiro card cai exatamente em 568. */
.hero-linha {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 400px;
  overflow: hidden;
  color: var(--c-branco);
}

.hero-linha__fundo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* Mesmo gradiente do hero de categoria: escurece à esquerda, onde fica o
   título, e libera a foto à direita. */
.hero-linha::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.82) 0%,
    rgba(0, 0, 0, 0.73) 13%,
    rgba(0, 0, 0, 0.61) 27%,
    rgba(0, 0, 0, 0) 89%
  );
}

/* O título é alinhado à esquerda no original, não centralizado. */
.hero-linha__conteudo {
  position: relative;
  z-index: 2;
  width: 100%;
  text-align: left;
}

.hero-linha__titulo {
  font-size: 4rem;          /* 64px */
  line-height: 70.4px;
  letter-spacing: -1.28px;
  text-transform: uppercase;
}

@media (max-width: 809.98px) {
  .hero-linha { height: 340px; }
  .hero-linha__titulo { font-size: 2.25rem; line-height: 1.15; }
}

/* ---------------------------------------------------------------------------
   Home — hero de campanha
   ---------------------------------------------------------------------------
   700px de altura no original, imagem full-bleed. O lettering ("Chama a
   Fluvimar junto com Zé Neto") faz parte da arte, não é texto sobreposto. */

/* A arte é 1,9066:1 (fonte em 2560x1343). Numa caixa de altura fixa, quanto mais larga
   a tela, mais o `cover` corta em cima e embaixo — em ~2000px de largura o
   corte de topo chega em 16,6% e come o começo da manchete (medido: o rosto
   começa em 12,5% da altura da arte, a manchete em 17,5%).

   Por isso a altura cresce com a largura em vez de ser fixa. Os números:
   48.6vw é exatamente os 700px do original em 1440 (700/1440), então até
   1440 nada muda; daí pra cima cresce na mesma proporção da arte, e trava em
   880 pra não engolir a dobra em tela grande. */
.hero-home {
  position: relative;
  height: clamp(700px, 48.6vw, 880px);
  overflow: hidden;
}

.hero-home__fundo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Alturas medidas no original em cada faixa: 700 / 577 / 532. Abaixo de 1200
   o clamp acima não vale — estas vêm depois e ganham. */
@media (max-width: 1199.98px) { .hero-home { height: 577px; } }
@media (max-width:  809.98px) { .hero-home { height: 532px; } }

/* Depois que a altura trava em 880 o `cover` volta a cortar, e centralizado
   ele tira metade em cima — bem onde está o rosto. Puxar a janela pro topo
   joga o corte pra água do rodapé da arte, que não tem conteúdo. Os valores
   mantêm o corte de topo abaixo dos 12,5% do rosto em cada faixa. */
@media (min-width: 1600px) { .hero-home__fundo { object-position: center 35%; } }
@media (min-width: 2400px) { .hero-home__fundo { object-position: center 22%; } }

/* A arte do hero é um banner 1,9:1; a caixa do celular é 0,77:1, então o
   `cover` mostra só os ~41% centrais da imagem. Com o padrão (`center`) a
   janela cai em x 611–1447 do original — o que corta o começo da manchete
   ("…A FLUVIMAR" em vez de "CHAMA A FLUVIMAR") e ainda perde o Zé Neto,
   que está em x 62–412.

   33% põe o centro da janela em cima do centro da manchete (x 824), que
   passa a aparecer inteira. Rosto e manchete não cabem juntos nessa
   proporção — a solução completa é uma arte recomposta pra vertical. */
@media (max-width: 809.98px) {
  .hero-home__fundo { object-position: 33% center; }
}

/* ---------------------------------------------------------------------------
   Home — "Escolha Fluvimar"
   ---------------------------------------------------------------------------
   Duas colunas: 458 (título + foto 458×458) e 452 (4 cards com gap 16).
   A altura da coluna da esquerda vem da direita — daí o space-between, que é
   o que empurra a foto para o pé da coluna como no original. */

.secao-escolha {
  padding-block: var(--sp-20);
  background: var(--c-cinza-bg);
}

.secao-escolha__conteudo {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: var(--sp-10);
}

.escolha__visual {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-shrink: 0;
  width: 458px;
}

.escolha__titulo {
  font-size: var(--fs-5xl);   /* 48px */
  line-height: 52.8px;
  letter-spacing: -0.96px;
  text-transform: uppercase;
  white-space: nowrap;
}

.escolha__moldura {
  border-radius: var(--r-lg);
  overflow: hidden;
}

.escolha__moldura img {
  width: 100%;
  height: 458px;
  object-fit: cover;
}

.escolha__cards {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  flex-shrink: 0;
  width: 452px;
}

.escolha-card {
  display: flex;
  gap: var(--sp-4);
  padding: var(--sp-4);
  background: rgba(0, 8, 29, 0.05);
  /* Sombra interna em vez de `border`: no original a borda é um filho
     absoluto e não entra na altura. Com border de verdade cada card ficava
     2px mais alto — 8px acumulados na seção. */
  box-shadow: inset 0 0 0 1px rgba(0, 8, 29, 0.05);
  border-radius: var(--r-md);
}

/* Ícone exportado do Figma. O círculo de fundo já vem no arquivo com a
   opacidade certa — não aplicar opacity aqui. */
.escolha-card__icone {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
}

.escolha-card__texto {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  min-width: 0;
}

.escolha-card__titulo {
  font-family: var(--font-body);
  font-size: var(--fs-xl);    /* 24px */
  font-weight: 500;
  line-height: 26.16px;
  letter-spacing: -0.48px;
  color: var(--c-cinza-txt);
}

.escolha-card__sub {
  font-size: var(--fs-lg);    /* 20px */
  font-weight: 300;
  line-height: 30px;
  letter-spacing: -0.4px;
  color: rgba(30, 30, 30, 0.9);
}

@media (max-width: 1199.98px) {
  .secao-escolha__conteudo { flex-direction: column; gap: var(--sp-8); }
  .escolha__visual,
  .escolha__cards { width: 100%; }
  .escolha__visual { gap: var(--sp-6); }
  .escolha__moldura img { height: auto; aspect-ratio: 1 / 1; }
}

@media (max-width: 809.98px) {
  .secao-escolha { padding-block: var(--sp-10); }
  .escolha__titulo { font-size: var(--fs-3xl); line-height: 1.15; white-space: normal; }
  .escolha-card__titulo { font-size: var(--fs-md); line-height: 1.3; }
  .escolha-card__sub { font-size: var(--fs-base); line-height: 1.6; }
}

/* ---------------------------------------------------------------------------
   Home — "Conheça nossa linha"
   ---------------------------------------------------------------------------
   Ziguezague diferente do das páginas de categoria: aqui o card é só a
   moldura da foto (629×338) e o texto fica FORA dela, na coluna vizinha.
   A linha tem 341px no original — 1,5px sobrando acima e abaixo do card. */

.secao-linha-home { padding-block: var(--sp-20); }

.secao-linha-home__conteudo {
  display: flex;
  flex-direction: column;
  gap: var(--sp-16);          /* 64px entre o título e a lista */
}

.secao-linha-home__titulo {
  font-size: var(--fs-5xl);
  line-height: 52.8px;
  letter-spacing: -0.96px;
  text-align: center;
  text-transform: uppercase;
}

.linha-home {
  display: flex;
  flex-direction: column;
  gap: var(--sp-16);          /* 64px entre as linhas */
}

.linha-home__item {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  min-height: 341px;
}

.linha-home__card {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 629px;
  height: 338px;
  padding: var(--sp-6) 48px;
  background: rgba(243, 243, 243, 0.25);
  /* Sombra interna em vez de `border` — como no original, a borda não come
     largura útil: com border de verdade a foto ficava 2px menor. */
  box-shadow: inset 0 0 0 1px #f3f3f3;
  border-radius: var(--r-lg);
  overflow: hidden;
}

/* A moldura da foto tem tamanho próprio em cada categoria (533×255, 483×231,
   533×255) — vem do inline --largura/--altura. `contain` como no original:
   são recortes do barco inteiro, cortar as pontas descaracteriza o modelo.
   No card de BARCOS a moldura é mais estreita que a área útil e encosta à
   direita — daí o justify-content por variante, e não um centralizar geral. */
.linha-home__card img {
  width: var(--largura, 533px);
  max-width: 100%;
  height: var(--altura, 255px);
  object-fit: contain;
}

.linha-home__item--invertido .linha-home__card { justify-content: flex-end; }

.linha-home__texto {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-8);           /* 32px entre o bloco de texto e o link */
  flex: 1;
  min-width: 0;
  align-self: stretch;
}

/* Inverte a ordem visual sem mexer na ordem do DOM. */
.linha-home__item--invertido .linha-home__card { order: 2; }
.linha-home__item--invertido .linha-home__texto { order: 1; text-align: right; }
.linha-home__item--invertido .linha-home__link-area { text-align: right; }

.linha-home__bloco {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.linha-home__nome {
  font-size: var(--fs-3xl);   /* 32px */
  line-height: 44.8px;
  letter-spacing: -0.64px;
  text-transform: uppercase;
}

.linha-home__descricao {
  font-size: var(--fs-lg);    /* 20px */
  line-height: 30px;
  letter-spacing: 0.2px;
  color: rgba(0, 0, 0, 0.7);
}

/* O container do link tem py-8/pr-8 no original — é o que dá os 34px da caixa. */
.linha-home__link-area { padding: var(--sp-2) var(--sp-2) var(--sp-2) 0; }
.linha-home__item--invertido .linha-home__link-area { padding: var(--sp-2) 0 var(--sp-2) var(--sp-2); }

/* Aqui o "Explorar modelos →" é link sublinhado, não o botão pílula das
   páginas de categoria. */
.link-explorar {
  font-size: var(--fs-base);  /* 16px */
  font-weight: 300;
  line-height: 17.44px;
  letter-spacing: -0.32px;
  color: #0099ff;
  text-decoration: underline;
  text-underline-position: from-font;
}

.link-explorar:hover { color: var(--c-primaria-escura); }

@media (max-width: 1199.98px) {
  .linha-home__item { min-height: 0; }
  .linha-home__card { width: 58%; height: auto; padding: var(--sp-6) var(--sp-8); }
  .linha-home__card img { width: 100%; height: auto; }
}

@media (max-width: 809.98px) {
  .secao-linha-home { padding-block: var(--sp-10); }
  .secao-linha-home__conteudo,
  .linha-home { gap: var(--sp-8); }
  .secao-linha-home__titulo { font-size: var(--fs-3xl); line-height: 1.15; }

  .linha-home__item { flex-direction: column; align-items: stretch; gap: var(--sp-6); }
  .linha-home__card { width: 100%; }

  /* No mobile todos alinham igual — o ziguezague não faz sentido em coluna. */
  .linha-home__item--invertido .linha-home__card { order: 0; }
  .linha-home__item--invertido .linha-home__texto { order: 0; text-align: left; }
  .linha-home__item--invertido .linha-home__link-area { text-align: left; padding: var(--sp-2) var(--sp-2) var(--sp-2) 0; }

  .linha-home__nome { font-size: var(--fs-2xl); line-height: 1.2; }
  .linha-home__descricao { font-size: var(--fs-base); line-height: 1.6; }
}

/* ---------------------------------------------------------------------------
   Home — FAQ
   ---------------------------------------------------------------------------
   Coluna de texto (431px) + lista de acordeões. Visual próprio, diferente do
   .acordeao dos "Itens de Série": cada item é uma caixa r16 com fundo. */

.secao-faq {
  padding-block: var(--sp-20);
  background: var(--c-cinza-bg);
}

.secao-faq__conteudo {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-8);
}

.faq__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-4);
  flex-shrink: 0;
  width: 431px;
}

/* A pílula da home é azul sobre fundo claro, não branca sobre escuro. */
.pilula--faq {
  gap: var(--sp-1);
  background: rgba(0, 112, 224, 0.16);
  box-shadow: inset 0 0 0 1px rgba(0, 112, 224, 0.05);
  color: #0070e0;
}

.pilula--faq .pilula__icone { height: 16px; }

.faq__texto {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.faq__titulo {
  font-size: var(--fs-5xl);
  line-height: 52.8px;
  letter-spacing: -0.96px;
  text-transform: uppercase;
}

.faq__sub {
  font-size: var(--fs-lg);
  line-height: 30px;
  letter-spacing: 0.2px;
  color: rgba(0, 0, 0, 0.7);
}

.faq__lista {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  flex: 1;
  min-width: 0;
}

.faq-item {
  padding: var(--sp-3) var(--sp-4);
  background: rgba(0, 0, 0, 0.05);
  border-radius: var(--r-md);
}

.faq-item__pergunta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  cursor: pointer;
  list-style: none;
  font-size: var(--fs-lg);    /* 20px */
  line-height: 30px;
  letter-spacing: 0.2px;
}

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

/* Ícone exportado do Figma: + fechado, − aberto (ambos #0070E0 sobre um
   círculo preto a 6%). São dois arquivos porque girar o + daria um ×. */
.faq-item__icone {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  background: url("/assets/img/icones/faq-mais.svg") center / contain no-repeat;
}

.faq-item[open] .faq-item__icone {
  background-image: url("/assets/img/icones/faq-menos.svg");
}

.faq-item__resposta {
  margin-top: var(--sp-2);
  max-width: 351px;           /* largura da resposta no original */
  font-size: var(--fs-base);  /* 16px */
  line-height: 24px;
  letter-spacing: 0.4px;
  color: rgba(0, 0, 0, 0.7);
}

@media (max-width: 1199.98px) {
  .secao-faq__conteudo { flex-direction: column; }
  .faq__intro { width: 100%; }
  .faq__lista { width: 100%; }
  .faq-item__resposta { max-width: none; }
}

@media (max-width: 809.98px) {
  .secao-faq { padding-block: var(--sp-10); }
  .faq__titulo { font-size: var(--fs-3xl); line-height: 1.15; }
  .faq__sub,
  .faq-item__pergunta { font-size: var(--fs-base); line-height: 1.5; }
}

/* ---------------------------------------------------------------------------
   Revendas — hero, mapa e grade
   ---------------------------------------------------------------------------
   Hero de 400px com foto clara e o título em PRETO alinhado à direita: é o
   único hero do site sem texto branco sobre imagem escura. */

.hero-revendas {
  position: relative;
  display: flex;
  align-items: center;
  height: 502px;            /* medido no Framer de referência */
  overflow: hidden;
  color: var(--c-branco);
}

/* Gradiente exato do Framer de referência — azul-marinho da marca, não o
   preto do .hero-categoria. Só existe porque o título agora é branco e fica
   sobre a parte clara da água. */
.hero-revendas::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(0, 8, 29, 0.7) 0%, rgba(0, 0, 0, 0) 100%);
}

.hero-revendas__fundo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* 1400px, não os 1440 do container padrão — medido no original. */
.hero-revendas__conteudo {
  position: relative;
  z-index: 2;               /* acima do ::after */
  width: 100%;
  max-width: 1400px;
  margin-inline: auto;
  padding-inline: var(--gutter);
  text-align: left;
}

/* Mesmo ritmo vertical do .hero-categoria, pros dois heros com hat lerem
   igual. */
.hero-revendas__conteudo > * + * { margin-top: 15.3px; }

.hero-revendas__titulo {
  font-size: 4rem;              /* 64px */
  line-height: 70.4px;
  letter-spacing: -1.28px;
  color: var(--c-branco);
  text-transform: none;
}

.hero-revendas__sub {
  width: 707px;                 /* mesma medida do .hero-categoria__sub */
  max-width: 100%;
  font-size: var(--fs-xl);      /* 24px */
  line-height: 36px;
  letter-spacing: -0.48px;
  color: var(--c-txt-inv-70);
}

.secao-revendas { padding-block: var(--sp-16); }

.secao-revendas__conteudo {
  display: flex;
  flex-direction: column;
  gap: var(--sp-16);            /* 64px entre o mapa e a grade */
}

/* Mapa "Fluvimar Revendas" (Google My Maps). Altura fixa de 560 como no
   original; o iframe não tem borda própria. */
.mapa-revendas {
  display: block;
  width: 100%;
  height: 560px;
  border: 0;
}

.revendas-grade {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-6);             /* 24px */
}

@media (max-width: 1199.98px) {
  .mapa-revendas { height: 460px; }
}

@media (max-width: 809.98px) {
  /* 300px bastavam quando o hero era só o título. Com hat + título +
     subtítulo passa a ser min-height, igual ao .hero-categoria, pra caixa
     crescer se o texto traduzido embrulhar em mais linhas. */
  .hero-revendas { height: auto; min-height: 420px; }
  .hero-revendas__conteudo { padding-block: var(--sp-10); }
  .hero-revendas__titulo { font-size: 2.25rem; line-height: 1.15; }
  .hero-revendas__sub { font-size: var(--fs-md); line-height: 1.5; }
  .secao-revendas { padding-block: var(--sp-10); }
  .secao-revendas__conteudo { gap: var(--sp-8); }
  .mapa-revendas { height: 360px; }
  .revendas-grade { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
   Pontoon — hero
   ---------------------------------------------------------------------------
   480px, véu preto CHAPADO a 40% (não o gradiente lateral dos outros heros),
   título branco à esquerda e centralizado na vertical. */

.hero-pontoon {
  position: relative;
  display: flex;
  align-items: center;
  height: var(--altura-hero, 480px);
  /* Só vertical: o horizontal fica no __conteudo, que NÃO é .container. */
  padding-block: var(--sp-20);
  overflow: hidden;
  color: var(--c-branco);
}

.hero-pontoon__fundo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.hero-pontoon::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0.4);
}

/* Não usa .container de propósito: no original o título do hero fica a 80px
   da borda da VIEWPORT, não alinhado ao conteúdo centralizado de 1440px, e o
   valor é o mesmo em qualquer largura — medido nos 6 pontoons, de 375px a
   1920px. Era 120px (o --gutter padrão) até o cliente trocar pra 80 no
   Framer em 17/08/2026. */
.hero-pontoon__conteudo {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-inline: var(--sp-20);
}

.hero-pontoon__titulo {
  font-size: 4rem;              /* 64px */
  line-height: 70.4px;
  letter-spacing: -1.28px;
  text-transform: uppercase;
}

/* ---------------------------------------------------------------------------
   Pontoon — corpo
   --------------------------------------------------------------------------- */

.secao-pontoon { padding: 48px 0 var(--sp-16); }

.secao-pontoon__conteudo {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
}

/* Bloco "Por que escolher", exclusivo da F-Boat X: título de 40/56, e abaixo
   a lista de argumentos (388px) à esquerda com os selos das marcas à direita,
   distribuídos pela largura restante. */
.pontoon-marcas {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
}

.pontoon-marcas__titulo {
  font-size: 2.5rem;            /* 40px */
  line-height: 56px;
  letter-spacing: -0.4px;
  text-transform: none;
}

.pontoon-marcas__corpo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-8);
  padding-block: var(--sp-6);
}

.pontoon-marcas__lista {
  flex-shrink: 0;
  width: 388px;
  font-size: var(--fs-lg);      /* 20px */
  line-height: 30px;
  letter-spacing: 0.2px;
  color: rgba(0, 0, 0, 0.7);
}

.pontoon-marcas__lista li { position: relative; padding-left: 26px; }
.pontoon-marcas__lista li::before { content: "•"; position: absolute; left: 6px; }

.pontoon-marcas__selos {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1;
  gap: var(--sp-8);
}

.pontoon-marcas__selos img { width: auto; height: auto; object-fit: contain; }

/* Destaque: foto 388×310 e a frase ao lado, com 61px entre as duas. */
.pontoon-destaque {
  display: flex;
  align-items: center;
  gap: 61px;
  padding-block: var(--sp-8);
}

.pontoon-destaque__midia {
  flex-shrink: 0;
  width: 388px;
  border-radius: var(--r-md);
  overflow: hidden;
}

.pontoon-destaque__midia img {
  width: 100%;
  height: 310px;
  object-fit: cover;
}

/* 511px no original — a frase não ocupa o resto da linha. */
.pontoon-destaque__titulo {
  width: 511px;
  max-width: 100%;
  font-size: var(--fs-3xl);     /* 32px */
  line-height: 44.8px;
  letter-spacing: -0.64px;
  text-transform: none;
}

.pontoon-texto {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  padding-block: var(--sp-8);
}

.pontoon-texto__chamada {
  font-size: var(--fs-xl);      /* 24px */
  line-height: 36px;
  letter-spacing: -0.48px;
}

.pontoon-texto__corpo {
  width: 960px;
  max-width: 100%;
  font-size: var(--fs-lg);      /* 20px */
  line-height: 30px;
  letter-spacing: 0.2px;
}

/* Galeria em marquee. No original a faixa anda ~100px/s; aqui é uma
   translação em CSS, sem JS. A faixa é duplicada para o laço fechar. */
.pontoon-galeria {
  height: 317px;
  overflow: hidden;
  /* Transborda o container de propósito, como no original. */
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
}

.pontoon-galeria__faixa {
  display: flex;
  gap: var(--sp-6);
  width: max-content;
  padding-block: 4px;
  animation: pontoon-marquee 26.7s linear infinite;
}

.pontoon-galeria__faixa img {
  width: 310px;
  height: 310px;
  border-radius: var(--r-md);
  object-fit: cover;
}

/* Desloca exatamente meia faixa: as 4 fotos mais os 4 gaps. */
@keyframes pontoon-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-1336px); }
}

.pontoon-galeria:hover .pontoon-galeria__faixa { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .pontoon-galeria { overflow-x: auto; }
  .pontoon-galeria__faixa { animation: none; }
}

/* ---------------------------------------------------------------------------
   Pontoon — ficha técnica e características
   --------------------------------------------------------------------------- */

.pontoon-specs {
  display: flex;
  flex-direction: column;
  gap: var(--sp-16);            /* 64px entre a ficha e as características */
}

.pontoon-ficha {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
}

.pontoon-ficha__titulos {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}

/* 32px por padrão, 40px onde o conteúdo pedir — a entrelinha acompanha em
   1.4 e o tracking muda junto (-0.64 contra -0.4). */
.pontoon-ficha__titulo {
  font-size: var(--ficha-titulo, 2rem);
  line-height: calc(var(--ficha-titulo, 2rem) * 1.4);
  letter-spacing: -0.64px;
  text-transform: none;
}

.pontoon-ficha[style*="40px"] .pontoon-ficha__titulo { letter-spacing: -0.4px; }

.pontoon-ficha__sub {
  font-size: var(--fs-xl);      /* 24px */
  line-height: 33.6px;
  letter-spacing: -0.48px;
  text-transform: none;
}

/* Linhas de 48px com gap 4. O rótulo é uma caixa cinza de 248px; o valor
   fica solto ao lado, sem fundo — diferente da ficha zebrada das páginas
   de produto. */
.ficha-pontoon {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.ficha-pontoon__linha {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  /* Filete #e3e3e3 embaixo. Sombra interna e não border-bottom: no original
     é um ::after sobreposto, e 1px por linha somaria 7px na lista. */
  box-shadow: inset 0 -1px 0 #e3e3e3;
}

.ficha-pontoon__rotulo,
.ficha-pontoon__valor {
  font-size: var(--fs-lg);      /* 20px */
  line-height: 24px;
  letter-spacing: -0.4px;
}

.ficha-pontoon__rotulo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  width: 248px;
  min-height: 48px;
  padding: var(--sp-3) var(--sp-4);
  background: #e3e3e3;
}

.ficha-pontoon__valor { margin: 0; }

.pontoon-caracteristicas {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
}

.pontoon-acordeoes { display: flex; flex-direction: column; }

/* Aqui o ícone fica à ESQUERDA do título, ao contrário do FAQ da home.
   Mesmo caso do filete da ficha: sobreposto, não somado à altura. */
.acordeao-pontoon {
  padding: var(--sp-3) var(--sp-2);
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.3);
}

.acordeao-pontoon__gatilho {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  cursor: pointer;
  list-style: none;
}

.acordeao-pontoon__gatilho::-webkit-details-marker { display: none; }

.acordeao-pontoon__icone {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  background: url("/assets/img/icones/faq-mais.svg") center / contain no-repeat;
}

.acordeao-pontoon[open] .acordeao-pontoon__icone {
  background-image: url("/assets/img/icones/faq-menos.svg");
}

.acordeao-pontoon__titulo {
  font-size: var(--fs-lg);      /* 20px */
  line-height: 30px;
  letter-spacing: 0.2px;
}

/* Alinha o corpo com o título, não com o ícone: 30 do ícone + 16 do gap. */
.acordeao-pontoon__corpo {
  display: flex;
  flex-direction: column;
  padding-top: var(--sp-4);
  padding-left: 46px;
  font-size: var(--fs-lg);
  line-height: 30px;
  letter-spacing: 0.2px;
}

.acordeao-pontoon__lista li { position: relative; padding-left: 1.1em; }
.acordeao-pontoon__lista li::before { content: "•"; position: absolute; left: 0; }

/* A linha em branco antes do parágrafo existe no original. */
.acordeao-pontoon__intermezzo { margin-top: 30px; }

.acordeao-pontoon__plantas {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-6);
  margin-top: var(--sp-8);
}

.acordeao-pontoon__plantas img {
  height: 188px;
  width: auto;
  object-fit: contain;
}

/* ---------------------------------------------------------------------------
   Pontoon — CTA com dois botões
   ---------------------------------------------------------------------------
   Não é o CTA de newsletter: aqui são dois links, sobre fundo #fafafa. */

.cta-pontoon {
  padding-block: var(--sp-20);
  background: var(--c-cinza-bg);
  text-align: center;
}

.cta-pontoon__conteudo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-8);
}

.cta-pontoon__textos {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  width: 796px;
  max-width: 100%;
}

.cta-pontoon__titulo {
  font-size: var(--fs-5xl);     /* 48px */
  line-height: 52.8px;
  letter-spacing: -0.96px;
  text-transform: uppercase;
}

.cta-pontoon__texto {
  /* 514px no original — mais estreito que os 796 do bloco, o que muda onde a
     frase quebra. */
  width: 514px;
  max-width: 100%;
  margin-inline: auto;
  font-size: var(--fs-xl);      /* 24px */
  line-height: 36px;
  letter-spacing: -0.48px;
}

.cta-pontoon__acoes {
  display: flex;
  justify-content: center;
  gap: var(--sp-8);
}

.cta-pontoon__botao {
  height: 40px;
  padding: var(--sp-3) var(--sp-4);
  font-weight: 400;
  font-size: var(--fs-base);
  line-height: 16px;
  letter-spacing: -0.48px;
}

/* O segundo botão é vazado: sem fundo, com contorno preto de 1px. No
   original a borda é um ::after — aqui basta o border, que com box-sizing
   border-box não muda os 40px de altura. */
.cta-pontoon__botao--simples {
  background: none;
  border-color: var(--c-preto);
  color: var(--c-preto);
}

.cta-pontoon__botao--simples:hover { background: rgba(0, 0, 0, 0.06); }

/* ---------------------------------------------------------------------------
   Pontoon — produtos relacionados
   --------------------------------------------------------------------------- */

/* A altura de 501px é fixa no original, não sai do conteúdo: com o padding de
   64 e os 323 do bloco interno daria 451, e o Framer reserva 50px de sobra
   antes do rodapé. Reproduzido com min-height para o conteúdo ainda poder
   crescer no mobile. */
.relacionados-pontoon {
  padding-block: var(--sp-16);
  min-height: 501px;
}

.relacionados-pontoon__conteudo {
  display: flex;
  flex-direction: column;
  gap: var(--sp-20);            /* 80px entre o título e os cards */
}

.relacionados-pontoon__titulo {
  font-size: var(--fs-5xl);
  line-height: 52.8px;
  letter-spacing: -0.96px;
  text-align: center;
  text-transform: none;         /* "Produtos Relacionados", não caixa alta */
}

.relacionados-pontoon__lista {
  display: flex;
  justify-content: center;
  gap: var(--sp-6);
}

/* Contorno #f3f3f3 vindo de um ::after no original: sombra interna aqui,
   para não comer os 271px úteis da imagem. Conteúdo centralizado. */
.card-relacionado {
  display: block;
  width: 303px;
  padding: var(--sp-4);
  background: rgba(255, 255, 255, 0.5);
  box-shadow: inset 0 0 0 1px #f3f3f3;
  border-radius: var(--r-md);
  overflow: hidden;
  text-align: center;
  transition: transform var(--dur-base) var(--ease-saida);
}

.card-relacionado:hover { transform: translateY(-3px); }

.card-relacionado__imagem {
  width: 271px;
  height: 124px;
  object-fit: contain;
}

.card-relacionado__nome {
  font-size: var(--fs-xl);      /* 24px */
  line-height: 33.6px;
  letter-spacing: -0.48px;
  text-transform: none;
}

/* --------------------------------------------------------------------------- */

@media (max-width: 1199.98px) {
  .pontoon-destaque { gap: var(--sp-8); }
  .pontoon-destaque__midia { width: 320px; }
  .pontoon-destaque__titulo,
  .pontoon-texto__corpo { width: 100%; }
  .relacionados-pontoon__lista { flex-wrap: wrap; }
}

@media (max-width: 809.98px) {
  .hero-pontoon { height: 340px; }
  /* No original só o 9500-dd afrouxa pra 24px aqui (os outros 5 seguem em
     80px), mas 80px sobra pouco pra um título de 38px num celular — decidido
     uniformizar em 24px nos 6. Divergência consciente do Framer. */
  .hero-pontoon__conteudo { padding-inline: var(--sp-6); }
  .pontoon-marcas__corpo { flex-direction: column; align-items: flex-start; }
  .pontoon-marcas__lista { width: 100%; font-size: var(--fs-base); line-height: 1.6; }
  .pontoon-marcas__selos { flex-wrap: wrap; justify-content: flex-start; gap: var(--sp-6); }
  .pontoon-marcas__titulo { font-size: var(--fs-2xl); line-height: 1.25; }
  .hero-pontoon__titulo { font-size: 2.25rem; line-height: 1.15; }

  .secao-pontoon { padding-block: var(--sp-8) var(--sp-10); }
  .pontoon-destaque { flex-direction: column; align-items: flex-start; }
  .pontoon-destaque__midia { width: 100%; }
  .pontoon-destaque__titulo { font-size: var(--fs-2xl); line-height: 1.25; }
  .pontoon-texto__chamada { font-size: var(--fs-md); line-height: 1.5; }
  .pontoon-texto__corpo { font-size: var(--fs-base); line-height: 1.6; }

  .pontoon-specs { gap: var(--sp-10); }

  /* A caixa do rótulo vira linha própria: 248px não cabe ao lado do valor. */
  .ficha-pontoon__linha { flex-direction: column; align-items: stretch; gap: var(--sp-1); }
  .ficha-pontoon__rotulo { width: 100%; min-height: 0; }
  .ficha-pontoon__valor { padding-inline: var(--sp-4); }

  .acordeao-pontoon__corpo { padding-left: 0; font-size: var(--fs-base); line-height: 1.6; }
  .acordeao-pontoon__plantas { flex-direction: column; align-items: center; }

  .cta-pontoon { padding-block: var(--sp-10); }
  .cta-pontoon__titulo { font-size: var(--fs-3xl); line-height: 1.15; }
  .cta-pontoon__texto { font-size: var(--fs-base); line-height: 1.6; }
  .cta-pontoon__acoes { flex-direction: column; align-items: center; gap: var(--sp-4); }

  .relacionados-pontoon { padding-block: var(--sp-10); min-height: 0; }
  .relacionados-pontoon__conteudo { gap: var(--sp-8); }
  .relacionados-pontoon__titulo { font-size: var(--fs-3xl); line-height: 1.15; }
  .relacionados-pontoon__lista { flex-direction: column; align-items: center; }
}

/* ---------------------------------------------------------------------------
   Sobre nós — redesenhada (ver app/conteudo/sobre.php para o histórico).
   Reaproveita .hero-categoria, .secao, .itens-serie e .cta já existentes;
   só os blocos abaixo são novos.
   --------------------------------------------------------------------------- */

.secao-sobre-historia__conteudo { display: flex; flex-direction: column; gap: var(--sp-8); }

.secao-sobre-historia__texto {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-8) var(--sp-10);
  font-size: var(--fs-lg);      /* 20px */
  line-height: 30px;
  letter-spacing: -0.4px;
  color: rgba(0, 0, 0, 0.75);
}

/* Missão / Visão / Valores — três cards no estilo do card de "Escolha
   Fluvimar" (bg translúcido, raio médio), mas sem ícone: aqui o destaque é
   o título, não uma marca gráfica que não existe no Figma da página. */
.sobre-proposito {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
}

.sobre-proposito__card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  height: 100%;
  padding: var(--sp-8);
  background: var(--c-branco);
  border-radius: var(--r-md);
  box-shadow: inset 0 0 0 1px rgba(0, 8, 29, 0.06);
}

.sobre-proposito__titulo {
  font-size: var(--fs-2xl);
  text-transform: uppercase;
}

.sobre-proposito__card p {
  font-size: var(--fs-base);
  line-height: 1.6;
  color: rgba(0, 0, 0, 0.7);
}

.sobre-proposito__lista {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding-left: var(--sp-4);
  font-size: var(--fs-base);
  line-height: 1.6;
  color: rgba(0, 0, 0, 0.7);
}

.sobre-proposito__lista li { position: relative; }

.sobre-proposito__lista li::before {
  content: "•";
  position: absolute;
  left: calc(-1 * var(--sp-4));
  color: var(--c-primaria);
}

/* Diferenciais reaproveita .itens-serie (produto/acordeão), só em coluna
   dupla mais larga que o padrão de 230px — o texto aqui é mais longo. */
.itens-serie--sobre {
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  gap: var(--sp-4) var(--sp-10);
  margin-top: var(--sp-8);
}

.itens-serie--sobre .itens-serie__item {
  font-size: var(--fs-base);
  line-height: 1.6;
}

/* "Comunidade": texto + dois números lado a lado, dentro da mesma faixa
   cinza que já existe no resto do site — nada de bloco cheio em navy fora
   do cabeçalho/rodapé, que destoava do resto da página. */
.secao-sobre-comunidade__conteudo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-10);
}

.secao-sobre-comunidade__conteudo > div { max-width: 640px; }

.secao-sobre-comunidade__conteudo h2 { margin-bottom: var(--sp-4); }

.secao-sobre-comunidade__conteudo p {
  font-size: var(--fs-lg);
  line-height: 30px;
  letter-spacing: -0.4px;
  color: rgba(0, 0, 0, 0.75);
}

.sobre-numeros {
  display: flex;
  gap: var(--sp-10);
  flex-shrink: 0;
}

.sobre-numeros__numero {
  font-family: var(--font-heading);
  font-size: var(--fs-4xl);
  color: var(--c-primaria);
}

.sobre-numeros__texto {
  margin-top: var(--sp-1);
  font-size: var(--fs-sm);
  line-height: 1.4;
  color: rgba(0, 0, 0, 0.6);
}

@media (max-width: 1199.98px) {
  .sobre-proposito { grid-template-columns: 1fr; }
  .secao-sobre-historia__texto { grid-template-columns: 1fr; }
  .secao-sobre-comunidade__conteudo { flex-direction: column; align-items: flex-start; }
  .secao-sobre-comunidade__conteudo > div { max-width: none; }
}

@media (max-width: 809.98px) {
  .secao-sobre-historia__texto,
  .secao-sobre-comunidade__conteudo p { font-size: var(--fs-base); line-height: 1.6; }
  .sobre-proposito__card { padding: var(--sp-6); }
  .sobre-numeros { gap: var(--sp-8); }
  .sobre-numeros__numero { font-size: var(--fs-3xl); }
}

/* ---------------------------------------------------------------------------
   Contato (/form) — medido no original (ver app/conteudo/form.php).
   Hero próprio: 333px (não os 600 de .hero-categoria) com degradê diferente,
   por isso não reaproveita a classe das páginas de categoria.
   --------------------------------------------------------------------------- */

.hero-contato {
  position: relative;
  display: flex;
  align-items: center;
  height: 333px;
  overflow: hidden;
  color: var(--c-branco);
}

.hero-contato__fundo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.hero-contato::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(270deg, rgba(84, 84, 84, 0) 45%, rgb(0, 0, 0) 105%);
}

.hero-contato__conteudo {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.hero-contato__titulo {
  max-width: 630px;
  font-size: 4rem;         /* 64px */
  line-height: 70.4px;
  letter-spacing: -1.28px;
  font-weight: 700;
}

@media (max-width: 809.98px) {
  .hero-contato { height: 320px; }
  .hero-contato__titulo { font-size: 2.25rem; line-height: 1.15; }
}

.secao-contato-form {
  padding: var(--sp-16) 0 var(--sp-8);
  background: var(--c-cinza-bg);
}

.secao-contato-form__conteudo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-8);
}

.contato-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  max-width: 634px;
  text-align: center;
}

.contato-intro__titulo {
  font-family: var(--font-heading);
  font-weight: 400;           /* o peso 400 do arquivo Bold já é o negrito */
  font-size: 2.5rem;          /* 40px — não é nenhum token da escala */
  line-height: 56px;
  letter-spacing: -0.4px;
}

.contato-intro__texto {
  font-size: var(--fs-lg);    /* 20px */
  line-height: 30px;
  letter-spacing: 0.2px;
  color: rgba(0, 0, 0, 0.7);
}

.contato-cartao {
  width: 100%;
  max-width: 488px;
  padding: 20px;
  background: var(--c-branco);
  border-radius: var(--r-lg);
}

.contato-form {
  display: flex;
  flex-direction: column;
  gap: 19px;
}

.contato-campo {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* O Figma usa Inter para os rótulos, que o projeto não carrega — Outfit no
   mesmo peso/tamanho é a aproximação mais próxima. Line-height explícito:
   o padrão herdado do body (1.5) deixava cada grupo de campo 9px mais alto
   que o original. */
.contato-campo__rotulo {
  font-size: 12px;
  line-height: 14.4px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.7);
}

.contato-campo__entrada {
  height: 40px;
  padding: 12px;
  background: #f2f2f2;
  border: 1px solid rgba(136, 136, 136, 0.1);
  border-radius: var(--r-sm);
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--c-preto);
  transition: border-color var(--dur-rapida) var(--ease-entrada);
}

.contato-campo__entrada::placeholder { color: #999; }

.contato-campo__entrada:focus-visible {
  outline: none;
  border-color: var(--c-primaria);
}

.contato-campo__area { height: 100px; resize: vertical; }

.campo-senha { position: relative; }

.campo-senha input { width: 100%; padding-right: 72px; }

.campo-senha__alternar {
  position: absolute;
  top: 50%;
  right: var(--sp-3, 0.75rem);
  transform: translateY(-50%);
  background: none;
  border: 0;
  padding: 0;
  font-size: var(--fs-sm, 0.875rem);
  /* 14px sobre fundo claro — texto normal, precisa de 4,5:1. */
  color: var(--c-primaria-aa);
  cursor: pointer;
}

.contato-form__botao {
  height: 40px;
  padding: 12px 16px;
  background: var(--c-preto);
  border: 0;
  border-radius: var(--r-sm);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--c-branco);
  cursor: pointer;
  transition: opacity var(--dur-rapida) var(--ease-entrada);
}

.contato-form__botao:hover { opacity: 0.85; }

@media (max-width: 809.98px) {
  .secao-contato-form { padding: var(--sp-10) 0 var(--sp-6); }
  .contato-intro__titulo { font-size: var(--fs-3xl); line-height: 1.2; }
  .contato-intro__texto { font-size: var(--fs-base); line-height: 1.6; }
  .contato-cartao { padding: var(--sp-4); }
}

/* ---------------------------------------------------------------------------
   Modal "obrigado" — elemento novo do port Next.js, sem equivalente na base
   PHP (lá era página própria, /obrigado; aqui vira modal dentro de /form).
   --------------------------------------------------------------------------- */

.modal-obrigado__fundo {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
  background: rgba(0, 8, 29, 0.6);
}

.modal-obrigado {
  position: relative;
  width: 100%;
  max-width: 420px;
  padding: var(--sp-8);
  background: var(--c-branco);
  border-radius: var(--r-lg);
  text-align: center;
}

.modal-obrigado__fechar {
  position: absolute;
  top: var(--sp-4);
  right: var(--sp-4);
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: var(--c-cinza-bg);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.modal-obrigado__titulo {
  margin-bottom: var(--sp-2);
  font-size: var(--fs-2xl);
}

.modal-obrigado__texto {
  margin-bottom: var(--sp-6);
  color: rgba(0, 0, 0, 0.7);
}


/* ---------------------------------------------------------------------------
   Botão flutuante de WhatsApp
   ---------------------------------------------------------------------------
   Canto inferior direito, acima de tudo menos das camadas modais. Respeita a
   área segura do iPhone (a barra inferior come ~34px em tela cheia). */
.zap {
  position: fixed;
  right: max(var(--sp-6), env(safe-area-inset-right));
  bottom: max(var(--sp-6), env(safe-area-inset-bottom));
  z-index: 90;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25d366;   /* verde oficial do WhatsApp */
  color: #fff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.24);
  transition:
    transform var(--dur-rapida) var(--ease-entrada),
    box-shadow var(--dur-rapida) var(--ease-entrada);
}

.zap:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3); }
.zap:focus-visible { outline: 3px solid var(--c-branco); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .zap { transition: none; }
  .zap:hover { transform: none; }
}


/* ---------------------------------------------------------------------------
   Página 404
   ---------------------------------------------------------------------------
   Sem vocabulário visual novo: usa .botao e .container que já existem. */
.erro-404 {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-4);
  padding-block: var(--sp-16);
}

.erro-404__codigo {
  font-family: var(--font-heading);
  font-size: 96px;
  line-height: 1;
  color: var(--c-primaria);   /* decorativo e enorme: 3:1 basta */
  margin: 0;
}

.erro-404__titulo { font-family: var(--font-heading); font-size: var(--fs-3xl); margin: 0; }
.erro-404__texto { max-width: 46ch; color: var(--c-txt-secundario, #555); margin: 0; }

.erro-404__acoes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}

@media (max-width: 809.98px) {
  .erro-404__codigo { font-size: 72px; }
}