/* ============================================================
   styles.css — Niten Cutelaria
   Reset único no topo. Classes prefixadas por seção (.hero__*)
   para consolidar várias seções sem conflito.
   ============================================================ */

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

body {
  background-color: #000;
}


/* ============================================================
   SEÇÃO HERO
   Fundo: mobile por padrão, troca para desktop em >=1024px.
   Fonte do título: Oswald (aproximação da condensada industrial
   da imagem). Subtítulo/selos/botão: Inter.
   ============================================================ */

.hero {
  position: relative;
  width: 100%;
  /* svh = small viewport height: trava a altura com a barra de URL visível,
     evitando o "pulo" do fundo quando a barra do navegador some/aparece no mobile.
     min-height 100vh como fallback para navegadores sem suporte a svh. */
  min-height: 100vh;
  min-height: 100svh;
  background-image: url("imagens/hero-fundo-mobile.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: flex-start;      /* mobile: bloco ancorado no topo */
  color: #F3EFE7;
  font-family: "Inter", system-ui, -apple-system, sans-serif;
}

/* Container central: no mobile ocupa a largura com padding confortável;
   no desktop vira coluna esquerda dentro de um max-width central. */
.hero__container {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding: clamp(1.75rem, 6vw, 3rem) clamp(1.25rem, 5vw, 2.5rem);
}

/* ---- Título ---- */
.hero__title {
  font-family: "Oswald", "Inter", sans-serif; /* aprox. da condensada da imagem */
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.02;            /* respira o acento do "NÃO" sem descolar as linhas */
  letter-spacing: 0.5px;
  color: #EDE7DA;
  font-size: clamp(2.75rem, 13vw, 5rem);
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55);
}

/* ---- Subtítulo ---- */
.hero__subtitle {
  margin-top: clamp(1rem, 3.5vw, 1.5rem);
  max-width: 34ch;
  font-weight: 400;
  font-size: clamp(0.92rem, 3.9vw, 1.25rem);   /* reduzido um tico no mobile */
  line-height: 1.55;                            /* mais respiro entre linhas */
  color: #E7E1D6;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6);
}

/* ---- Linha de selos (prova/procedência) ---- */
.hero__seals {
  margin-top: clamp(0.85rem, 3vw, 1.25rem);
  font-size: clamp(0.72rem, 2.9vw, 0.85rem);
  letter-spacing: 0.2px;
  color: #C9C2B4;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
}
.hero__sep { opacity: 0.6; margin-inline: 0.15rem; }

/* ---- Botão (CTA) ---- */
.hero__cta {
  display: inline-block;
  margin-top: clamp(1.1rem, 4vw, 1.6rem);
  padding: clamp(0.85rem, 3.5vw, 1.05rem) clamp(1.75rem, 7vw, 2.5rem);
  background-color: #C9A24B;           /* dourado da imagem (aprox.) */
  color: #1A1305;
  font-family: "Oswald", "Inter", sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: clamp(0.95rem, 3.8vw, 1.1rem);
  text-decoration: none;
  border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
  transition: background-color 0.2s ease, transform 0.15s ease;
}
.hero__cta:hover { background-color: #D8B25C; transform: translateY(-1px); }
.hero__cta:active { transform: translateY(0); }


/* ============================================================
   DESKTOP (>=1024px)
   Troca o fundo para a versão wide e reposiciona o bloco na
   coluna ESQUERDA (onde o fundo desktop tem o espaço negativo).
   OBS: layout desktop INFERIDO — sem imagem completa desktop
   de referência. Pode precisar de ajuste fino.
   ============================================================ */
@media (min-width: 1024px) {
  .hero {
    background-image: url("imagens/hero-fundo-desktop.webp");
    align-items: flex-start;             /* headline mais ao topo (não centralizada) */
    position: relative;
  }

  /* Degradê preto da esquerda p/ a direita, ATRÁS do texto, para dar
     contraste com a fonte clara. Termina antes da faca (~55% da largura). */
  .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to right,
      rgba(0,0,0,0.82) 0%,
      rgba(0,0,0,0.72) 28%,
      rgba(0,0,0,0.40) 44%,
      rgba(0,0,0,0) 58%
    );
    pointer-events: none;
    z-index: 0;
  }
  /* conteúdo acima do degradê */
  .hero__container { position: relative; z-index: 1; }

  .hero__container {
    /* padding-top reduzido ~pela metade em relação ao mobile,
       subindo a headline logo abaixo do header. */
    padding-top: clamp(1.5rem, 4vw, 2.5rem);
    padding-inline: clamp(2.5rem, 5vw, 4rem);
  }

  /* bloco na coluna esquerda; largura maior no título p/ caber em 2 linhas */
  .hero__subtitle,
  .hero__seals,
  .hero__cta {
    max-width: 46%;
  }
  .hero__title {
    max-width: 60%;                       /* largura p/ "NÃO PODE FALHAR" numa linha só */
    font-size: clamp(3.25rem, 4.6vw, 5rem);
  }
  /* impede que "não pode falhar" quebre em duas no desktop (mantém 2 linhas no total) */
  .hero__title-nowrap { white-space: nowrap; }
  .hero__subtitle{ max-width: 42ch; font-size: 1.2rem; }
}


/* ============================================================
   SEÇÃO DOR
   Título em Oswald (igual ao hero). Corpo em PT Serif (aprox.
   da serif old-style da imagem). Selo redondo recriado em CSS.
   Mobile fiel (bloco ancorado à esquerda/topo, coluna estreita
   ao lado da faca). Desktop INFERIDO: bloco na coluna esquerda
   sobre o vazio preto do fundo wide.
   ============================================================ */

.dor {
  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;   /* trava altura no mobile: evita o "pulo" ao sumir a barra de URL */
  background-image: url("imagens/dor-fundo-mobile.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: flex-start;
  color: #F3EFE7;
  font-family: "Inter", system-ui, -apple-system, sans-serif;
}

.dor__container {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding: clamp(1.75rem, 6vw, 3rem) clamp(1.25rem, 5vw, 2.5rem);
}

/* Card de contraste (mobile): fundo semitransparente atrás do texto,
   para as letras não se confundirem com a lâmina clara ao fundo.
   No desktop ele é neutralizado (o degradê cuida do contraste). */
.dor__panel {
  background: rgba(0, 0, 0, 0.55);
  border-radius: 12px;
  padding: clamp(1.1rem, 5vw, 1.6rem);
  backdrop-filter: blur(1.5px);
  max-width: 46ch;
}

/* ---- Selo redondo "USO PROFISSIONAL REAL" ---- */
.dor__badge {
  position: absolute;
  top: clamp(1.25rem, 5vw, 2rem);
  right: clamp(1.25rem, 5vw, 2rem);
  width: clamp(74px, 20vw, 96px);
  height: clamp(74px, 20vw, 96px);
  border-radius: 50%;
  border: 1px solid rgba(190, 180, 160, 0.55);
  display: grid;
  place-items: center;
  text-align: center;
  background: rgba(20, 16, 12, 0.35);
  backdrop-filter: blur(1px);
}
.dor__badge span {
  font-family: "Oswald", sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1.15;
  font-size: clamp(0.6rem, 2.3vw, 0.72rem);
  color: #D8CFBE;
}

/* ---- Título ---- */
.dor__title {
  font-family: "Oswald", "Inter", sans-serif;
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: 0.3px;
  color: #EDE7DA;
  text-align: center;
  font-size: clamp(1.75rem, 8vw, 3.25rem);   /* mobile levemente menor */
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.55);
}

/* ---- Corpo (dois parágrafos) ---- */
.dor__body {
  margin-top: clamp(1rem, 4vw, 1.75rem);
  max-width: 46ch;
}
.dor__p {
  font-family: "PT Serif", Georgia, "Times New Roman", serif;
  font-weight: 400;
  font-size: clamp(0.95rem, 3.9vw, 1.05rem);
  line-height: 1.5;
  color: #E7E1D6;
  text-align: justify;                        /* justificado no mobile */
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
}
.dor__p + .dor__p { margin-top: 1.25rem; }


/* ---- DOR desktop (>=1024px) — INFERIDO ---- */
@media (min-width: 1024px) {
  .dor {
    background-image: url("imagens/dor-fundo-desktop.webp");
    align-items: flex-start;
  }

  /* degradê de contraste da esquerda p/ a direita, atrás do texto,
     terminando antes da faca (à direita) — mesma lógica do Hero. */
  .dor::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to right,
      rgba(0,0,0,0.82) 0%,
      rgba(0,0,0,0.70) 30%,
      rgba(0,0,0,0.35) 46%,
      rgba(0,0,0,0) 60%
    );
    pointer-events: none;
    z-index: 0;
  }
  .dor__container { position: relative; z-index: 1; padding-inline: clamp(2.5rem, 5vw, 4rem); }

  /* no desktop o degradê cuida do contraste: painel fica transparente */
  .dor__panel { background: transparent; backdrop-filter: none; padding: 0; max-width: none; }

  .dor__title { font-size: clamp(2rem, 3.2vw, 2.75rem); max-width: 60%; text-align: left; }  /* menor + alinhado à esquerda no desktop */
  .dor__body  { max-width: 54%; }                                            /* corpo com mais espaço */
  .dor__p { text-align: left; font-size: clamp(0.9rem, 1.1vw, 1rem); }       /* corpo menor no desktop */
}


/* ============================================================
   SEÇÃO SOLUÇÃO
   Título + intro centralizados no topo. 3 cards empilhados no
   mobile (1 coluna), 3 colunas no desktop. Cada card: PLACEHOLDER
   de imagem (troque por <img> ou background) + corpo de texto.
   Fundo: textura preta com brasas (mobile -> desktop wide).
   ============================================================ */

.solucao {
  width: 100%;
  background-image: url("imagens/solucao-fundo-mobile.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #F3EFE7;
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  padding-block: clamp(2.5rem, 8vw, 4.5rem);
}

.solucao__container {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 2.5rem);
}

/* ---- Cabeçalho (título + intro centralizados) ---- */
.solucao__head { text-align: center; max-width: 68ch; margin-inline: auto; }
.solucao__title {
  font-family: "Oswald", "Inter", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.02;
  letter-spacing: 0.4px;
  color: #EDE7DA;
  font-size: clamp(1.7rem, 6.5vw, 3rem);
  text-shadow: 0 2px 16px rgba(0,0,0,0.55);
}
.solucao__intro {
  margin-top: clamp(0.85rem, 3vw, 1.25rem);
  font-size: clamp(0.95rem, 3.6vw, 1.1rem);
  line-height: 1.5;
  color: #E2DCD0;
  text-align: justify;
  text-shadow: 0 1px 8px rgba(0,0,0,0.6);
}

/* ---- Grade de cards ---- */
.solucao__cards {
  margin-top: clamp(1.75rem, 6vw, 3rem);
  display: grid;
  grid-template-columns: 1fr;      /* mobile: 1 coluna */
  gap: clamp(1.25rem, 4vw, 1.75rem);
}

.solucao__card {
  background: rgba(12, 9, 7, 0.55);
  border: 1px solid rgba(150, 120, 80, 0.28);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
  display: flex;
  flex-direction: column;
}

/* PLACEHOLDER de imagem — substitua por <img> ou background-image */
.solucao__card-img {
  aspect-ratio: 16 / 9;
  width: 100%;
  display: grid;
  place-items: center;
  background:
    repeating-linear-gradient(45deg,
      rgba(120,90,50,0.10) 0 12px,
      rgba(120,90,50,0.16) 12px 24px);
  border-bottom: 1px solid rgba(150,120,80,0.25);
}
.solucao__ph-label {
  font-family: "Oswald", sans-serif;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.8rem;
  color: rgba(230, 210, 180, 0.65);
  border: 1px dashed rgba(230,210,180,0.4);
  padding: 0.4rem 0.8rem;
  border-radius: 6px;
}
/* Quando trocar por <img>, ela herda a mesma proporção: */
img.solucao__card-img { object-fit: cover; }

/* ---- Corpo de texto do card ---- */
.solucao__card-body {
  padding: clamp(1rem, 4vw, 1.5rem);
  background: rgba(0, 0, 0, 0.92);   /* quase preto, transparência levíssima */
  flex: 1;                            /* estica p/ todos os cards terminarem na mesma altura */
}
.solucao__card-title {
  font-family: "Oswald", "Inter", sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #EDE7DA;
  font-size: clamp(1.15rem, 4.5vw, 1.5rem);
}
.solucao__card-text {
  margin-top: 0.6rem;
  font-size: clamp(0.9rem, 3.6vw, 1rem);
  line-height: 1.5;
  color: #D9D3C6;
}

/* ---- SOLUÇÃO desktop (>=1024px) ---- */
@media (min-width: 1024px) {
  .solucao {
    background-image: url("imagens/solucao-fundo-desktop.jpg");
  }
  .solucao__cards {
    grid-template-columns: repeat(3, 1fr);   /* 3 colunas lado a lado */
    align-items: stretch;                    /* cards da linha com a mesma altura */
  }
  /* fontes no mesmo tamanho da seção Dor (desktop) */
  .solucao__title { font-size: clamp(2rem, 3.2vw, 2.75rem); }
  .solucao__card-title { font-size: clamp(1.15rem, 1.6vw, 1.35rem); }
  .solucao__card-text { font-size: clamp(0.9rem, 1.1vw, 1rem); }
}


/* ============================================================
   SEÇÃO LINHA PROFISSIONAL
   Título + intro centralizados. 3 cards de linha: PLACEHOLDER de
   foto no topo + corpo (nome, descrição, preço) e botão "Ver peça".
   Mobile: 1 coluna, com foto larga (como na arte). Desktop: mantém
   empilhado em largura contida (cards horizontais amplos), pois o
   layout da arte é vertical/lista. Rodapé de selos centralizado.
   ============================================================ */

.linha {
  width: 100%;
  background-image: url("imagens/linha-fundo-mobile.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #F3EFE7;
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  padding-block: clamp(2.5rem, 8vw, 4.5rem);
}

.linha__container {
  width: 100%;
  max-width: 1040px;
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2rem);
}

/* ---- Cabeçalho ---- */
.linha__head { text-align: center; max-width: 62ch; margin-inline: auto; }
.linha__title {
  font-family: "Oswald", "Inter", sans-serif;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 0.3px;
  color: #EDE7DA;
  font-size: clamp(1.7rem, 6.5vw, 2.85rem);
  text-shadow: 0 2px 16px rgba(0,0,0,0.55);
}
.linha__intro {
  margin-top: clamp(0.75rem, 2.5vw, 1.1rem);
  font-size: clamp(0.92rem, 3.4vw, 1.05rem);
  line-height: 1.5;
  color: #D9C9AE;                         /* bege claro como na arte */
  text-align: justify;
  text-shadow: 0 1px 8px rgba(0,0,0,0.6);
}

/* ---- Lista de cards ---- */
.linha__cards {
  margin-top: clamp(1.5rem, 5vw, 2.5rem);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.1rem, 3.5vw, 1.6rem);
}

.linha__card {
  background: rgba(10, 8, 6, 0.55);
  border: 1px solid rgba(170, 130, 70, 0.35);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.45);
}

/* PLACEHOLDER de imagem — substituir por <img> */
.linha__card-img {
  width: 100%;
  aspect-ratio: 16 / 7;                    /* foto larga como na arte */
  display: grid;
  place-items: center;
  background:
    repeating-linear-gradient(45deg,
      rgba(120,90,50,0.10) 0 12px,
      rgba(120,90,50,0.16) 12px 24px);
  border-bottom: 1px solid rgba(170,130,70,0.30);
}
.linha__ph-label {
  font-family: "Oswald", sans-serif;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.78rem;
  color: rgba(230,210,180,0.65);
  border: 1px dashed rgba(230,210,180,0.4);
  padding: 0.4rem 0.8rem;
  border-radius: 6px;
}
img.linha__card-img { object-fit: cover; }

/* ---- Corpo do card: info à esquerda + botão à direita ---- */
.linha__card-body {
  padding: clamp(1rem, 4vw, 1.5rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: rgba(0, 0, 0, 0.92);   /* quase preto, transparência levíssima (igual à Solução) */
}
.linha__card-info { flex: 1 1 60%; min-width: 240px; }
.linha__card-title {
  font-family: "Oswald", "Inter", sans-serif;
  font-weight: 600;
  color: #F1EBDD;
  font-size: clamp(1.3rem, 5vw, 1.7rem);
  line-height: 1.1;
}
.linha__card-text {
  margin-top: 0.5rem;
  font-size: clamp(0.88rem, 3.4vw, 0.98rem);
  line-height: 1.45;
  color: #CFC7B8;
  text-align: justify;
}
.linha__price {
  margin-top: 0.7rem;
  font-family: "Oswald", "Inter", sans-serif;
  font-weight: 600;
  font-size: clamp(1.15rem, 4.6vw, 1.5rem);
  color: #C9A24B;                          /* dourado */
}

/* ---- Botão "Ver peça" (outline dourado, como na arte) ---- */
.linha__cta {
  flex: 0 0 auto;
  display: inline-block;
  padding: 0.8rem 1.8rem;
  border: 1px solid #C9A24B;
  border-radius: 6px;
  background: transparent;
  color: #E7CF95;
  font-family: "Oswald", "Inter", sans-serif;
  font-weight: 600;
  font-size: clamp(0.95rem, 3.6vw, 1.1rem);
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.linha__cta:hover { background: #C9A24B; color: #1A1305; }

/* ---- Rodapé de selos ---- */
.linha__foot {
  margin-top: clamp(1.5rem, 5vw, 2.25rem);
  text-align: center;
  max-width: 60ch;
  margin-inline: auto;
  font-size: clamp(0.82rem, 3vw, 0.92rem);
  line-height: 1.45;
  color: #C4BCAD;
}

/* ---- LINHA desktop (>=1024px) ---- */
@media (min-width: 1024px) {
  .linha { background-image: url("imagens/linha-fundo-desktop.webp"); }
  .linha__card-img { aspect-ratio: 21 / 6; }   /* foto ainda mais panorâmica */
  /* título e corpo no mesmo tamanho da seção Dor (desktop) */
  .linha__title { font-size: clamp(2rem, 3.2vw, 2.75rem); }
  .linha__card-text { font-size: clamp(0.9rem, 1.1vw, 1rem); }
}


/* ============================================================
   SEÇÃO PARA QUEM É
   Título serif display (aprox. Playfair Display — ADICIONAR ao
   <link> das fontes). Lista de 5 itens com check circulado dourado
   (CSS + SVG). Fundo já traz os ornamentos verticais/losangos, então
   deixamos padding vertical generoso pra não colidir com eles.
   ============================================================ */

.paraquem {
  width: 100%;
  background-image: url("imagens/paraquem-fundo-mobile.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #F3EFE7;
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  /* padding-top maior: dá espaço pro ornamento vertical do topo */
  padding-block: clamp(4rem, 12vw, 6rem) clamp(3.5rem, 10vw, 5rem);
}

.paraquem__container {
  width: 100%;
  max-width: 760px;
  margin-inline: auto;
  padding-inline: clamp(1.5rem, 6vw, 3rem);
}

/* ---- Título (serif display) ---- */
.paraquem__title {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 700;
  line-height: 1.02;
  color: #F1ECE1;
  font-size: clamp(2rem, 3.2vw, 2.75rem);   /* padronizado com os títulos das seções corrigidas */
  text-align: center;                        /* centralizado */
  margin-bottom: clamp(1.25rem, 4vw, 1.75rem);
}

/* ---- Lista ---- */
.paraquem__list { list-style: none; display: grid; gap: clamp(1.5rem, 5vw, 2rem); }
.paraquem__item {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: clamp(1rem, 4vw, 1.5rem);
}

/* ---- Check circulado dourado ---- */
.paraquem__check {
  flex: 0 0 auto;
  width: clamp(34px, 8vw, 42px);
  height: clamp(34px, 8vw, 42px);
  border-radius: 50%;
  border: 1.5px solid #C9A24B;
  color: #E0BE6B;
  display: grid;
  place-items: center;
}
.paraquem__check svg { width: 58%; height: 58%; display: block; }

/* ---- Texto do item ---- */
.paraquem__text {
  font-size: clamp(0.95rem, 1.6vw, 1.05rem);   /* padronizado com o corpo das seções corrigidas */
  line-height: 1.5;
  color: #EDE7DB;
  align-self: center;
}

/* ---- Rodapé ---- */
.paraquem__foot {
  margin-top: clamp(2.5rem, 9vw, 4rem);
  text-align: center;
  font-size: clamp(0.82rem, 3vw, 0.95rem);
  letter-spacing: 0.3px;
  color: #C9BFA9;
}

/* ---- PARA QUEM É desktop (>=1024px) ---- */
@media (min-width: 1024px) {
  .paraquem { background-image: url("imagens/paraquem-fundo-desktop.jpg"); }
  .paraquem__container { max-width: 820px; }
}


/* ============================================================
   SEÇÃO DIFERENCIAIS
   Título + 2 parágrafos no topo. Abaixo, os dois rótulos de coluna
   sobre o fundo split (importada à esquerda / Niten à direita).
   O fundo carrega a comparação visual; aqui só posicionamos texto.
   ============================================================ */

.diferenciais {
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;   /* trava altura no mobile: evita o "pulo" ao sumir a barra de URL */
  background-image: url("imagens/diferenciais-fundo-mobile.webp");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  color: #F3EFE7;
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  display: flex;
  flex-direction: column;
}

.diferenciais__container {
  width: 100%;
  max-width: 1100px;
  margin-inline: auto;
  padding: clamp(2rem, 7vw, 3.5rem) clamp(1.25rem, 5vw, 2.5rem) 0;
}

/* ---- Título ---- */
.diferenciais__title {
  font-family: "Oswald", "Inter", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.05;
  letter-spacing: 0.4px;
  color: #EDE7DA;
  text-align: center;
  max-width: 22ch;
  margin-inline: auto;
  font-size: clamp(2rem, 3.2vw, 2.75rem);   /* padronizado com as seções corrigidas */
  text-shadow: 0 2px 16px rgba(0,0,0,0.6);
}

/* ---- Duas colunas (esquerda: importada / direita: Niten) ---- */
.diferenciais__cols {
  margin-top: clamp(1.5rem, 5vw, 2.5rem);
  display: grid;
  grid-template-columns: 1fr;       /* mobile: empilhado */
  gap: clamp(1rem, 4vw, 1.5rem);
}

/* card semitransparente atrás de cada bloco de texto */
.diferenciais__card {
  background: rgba(0, 0, 0, 0.55);   /* escuro o bastante p/ legibilidade, sem esconder a imagem */
  border-radius: 12px;
  padding: clamp(1.1rem, 4vw, 1.6rem);
  backdrop-filter: blur(1.5px);
}

.diferenciais__label {
  display: block;
  font-family: "Oswald", "Inter", sans-serif;
  font-weight: 600;
  font-size: clamp(1rem, 4vw, 1.35rem);
  margin-bottom: clamp(0.5rem, 2vw, 0.75rem);
  text-shadow: 0 2px 10px rgba(0,0,0,0.8);
}
.diferenciais__label--frio  { color: #E9E9EC; }   /* lado importada (frio) */
.diferenciais__label--niten { color: #D9A84E; }   /* lado Niten (dourado) */

.diferenciais__p {
  font-size: clamp(0.9rem, 3.5vw, 1rem);
  line-height: 1.5;
  color: #E4DED2;
  text-align: justify;
}

/* ---- DIFERENCIAIS desktop (>=1024px) ---- */
@media (min-width: 1024px) {
  .diferenciais { background-image: url("imagens/diferenciais-fundo-desktop.webp"); }
  .diferenciais__cols { grid-template-columns: 1fr 1fr; }   /* duas colunas lado a lado */
  .diferenciais__p { font-size: clamp(0.9rem, 1.1vw, 1rem); }  /* corpo padronizado (Dor) */
  .diferenciais__label { font-size: clamp(1.2rem, 2vw, 1.6rem); }
}


/* ============================================================
   SEÇÃO AUTORIDADE
   Título serif display (Playfair). Corpo em coluna estreita à
   ESQUERDA (sobre o vazio escuro do fundo, longe da faca à direita).
   Termos MS/JS destacados em dourado. Assinatura no rodapé,
   centralizada, com divisores.
   ============================================================ */

.autoridade {
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;   /* trava altura no mobile: evita o "pulo" ao sumir a barra de URL */
  background-image: url("imagens/autoridade-fundo-mobile.webp");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  color: #F3EFE7;
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  display: flex;
  flex-direction: column;
}

.autoridade__container {
  width: 100%;
  max-width: 1120px;
  margin-inline: auto;
  padding: clamp(2rem, 7vw, 3.5rem) clamp(1.25rem, 5vw, 2.5rem);
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Card de contraste (mobile): fundo semitransparente atrás do texto.
   No desktop fica transparente (o fundo já dá contraste). */
.autoridade__panel {
  background: rgba(0, 0, 0, 0.55);
  border-radius: 12px;
  padding: clamp(1.1rem, 5vw, 1.6rem);
  backdrop-filter: blur(1.5px);
}

/* ---- Título ---- */
.autoridade__title {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 700;
  line-height: 1.05;
  color: #F1ECE1;
  text-align: left;
  max-width: 100%;
  font-size: clamp(1.75rem, 8vw, 3.25rem);   /* mobile menor */
  text-shadow: 0 2px 18px rgba(0,0,0,0.7);
  margin-bottom: clamp(1.25rem, 4vw, 2rem);
}

/* ---- Corpo ---- */
.autoridade__body { max-width: 100%; }
.autoridade__p {
  font-size: clamp(0.92rem, 3.6vw, 1.02rem);
  line-height: 1.5;
  color: #E4DED2;
  text-align: justify;
  text-shadow: 0 1px 8px rgba(0,0,0,0.7);
}
.autoridade__p + .autoridade__p { margin-top: 1.25rem; }

/* termos certificados destacados */
.autoridade__hl { color: #D9A84E; font-weight: 500; }

/* ---- Assinatura: faixa escura full-width ---- */
.autoridade__sign {
  margin-top: auto;
  width: 100%;
  background: rgba(0, 0, 0, 0.88);   /* quase preto, leve transparência */
  padding: clamp(0.9rem, 3vw, 1.25rem) clamp(1.25rem, 5vw, 2.5rem);
  text-align: center;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(0.9rem, 3.4vw, 1.1rem);
  letter-spacing: 0.3px;
  color: #D9A84E;
}
.autoridade__sign-inner { display: inline-block; max-width: 1120px; }
.autoridade__dot { opacity: 0.7; margin-inline: 0.4rem; }

/* ---- AUTORIDADE desktop (>=1024px) ---- */
@media (min-width: 1024px) {
  .autoridade { background-image: url("imagens/autoridade-fundo-desktop.webp"); position: relative; }

  /* degradê de contraste da esquerda p/ a direita, atrás do texto,
     terminando antes da faca (à direita) — mesma lógica da Dor. */
  .autoridade::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to right,
      rgba(0,0,0,0.82) 0%,
      rgba(0,0,0,0.70) 30%,
      rgba(0,0,0,0.35) 46%,
      rgba(0,0,0,0) 60%
    );
    pointer-events: none;
    z-index: 0;
  }
  .autoridade__container { position: relative; z-index: 1; }
  .autoridade__sign { position: relative; z-index: 1; }

  /* no desktop o degradê cuida do contraste: painel transparente */
  .autoridade__panel { background: transparent; backdrop-filter: none; padding: 0; }

  .autoridade__title { font-size: clamp(2rem, 3.2vw, 2.75rem); max-width: 54%; }  /* mesma largura do corpo → 2 linhas */
  .autoridade__body  { max-width: 54%; }
  .autoridade__p { text-align: justify; font-size: clamp(0.9rem, 1.1vw, 1rem); }        /* corpo menor no desktop */
}


/* ============================================================
   SEÇÃO GARANTIA E PROCEDÊNCIA
   Título condensado (Oswald). 6 cards com moldura dourada dupla
   (borda + ::before recuado, evocando o ornamento da arte) e ícone
   de linha (SVG) em dourado. Mobile: 2 colunas (como na arte).
   Desktop: mantém 2 colunas em container central mais largo.
   ============================================================ */

.garantia {
  width: 100%;
  background-image: url("imagens/garantia-fundo-mobile.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #F3EFE7;
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  padding-block: clamp(3.5rem, 10vw, 5.5rem);
}

.garantia__container {
  width: 100%;
  max-width: 900px;
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2rem);
}

/* ---- Título ---- */
.garantia__title {
  font-family: "Oswald", "Inter", sans-serif;
  font-weight: 700;
  text-transform: none;
  line-height: 1.02;
  color: #EFE9DC;
  font-size: clamp(1.75rem, 8vw, 2.75rem);
  text-align: left;
  margin-bottom: clamp(1.75rem, 6vw, 2.5rem);
}

/* ---- Grade de cards ---- */
.garantia__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;      /* 2 colunas, como na arte */
  gap: clamp(0.75rem, 3vw, 1.25rem);
}

/* ---- Card com moldura dourada ornamentada ---- */
.garantia__card {
  position: relative;
  padding: clamp(1.1rem, 4vw, 1.75rem);
  border: 1px solid rgba(180, 140, 75, 0.55);
  background: rgba(8, 7, 5, 0.5);
}
/* segunda linha interna (moldura dupla) */
.garantia__card::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(180, 140, 75, 0.28);
  pointer-events: none;
}

.garantia__icon {
  display: block;
  width: clamp(40px, 11vw, 52px);
  height: clamp(40px, 11vw, 52px);
  color: #C9A24B;
  margin-bottom: clamp(0.75rem, 3vw, 1.1rem);
}
.garantia__icon svg { width: 100%; height: 100%; display: block; }

.garantia__card-title {
  font-family: "PT Serif", Georgia, serif;
  font-weight: 700;
  color: #F1ECE1;
  font-size: clamp(1.1rem, 4.4vw, 1.45rem);
  line-height: 1.1;
  margin-bottom: 0.5rem;
}
.garantia__card-text {
  font-size: clamp(0.85rem, 3.4vw, 0.98rem);
  line-height: 1.45;
  color: #D5CFC2;
}

/* ---- Rodapé ---- */
.garantia__foot {
  margin-top: clamp(2rem, 7vw, 3rem);
  text-align: center;
  font-size: clamp(0.8rem, 3vw, 0.92rem);
  color: #BCB3A2;
}

/* ---- GARANTIA desktop (>=1024px) ---- */
@media (min-width: 1024px) {
  .garantia { background-image: url("imagens/garantia-fundo-desktop.webp"); }
  .garantia__container { max-width: 1000px; }
  .garantia__title { text-align: center; font-size: clamp(2rem, 3.2vw, 2.75rem); }
  .garantia__card-title { font-size: clamp(1.1rem, 1.6vw, 1.35rem); }
  .garantia__card-text { font-size: clamp(0.9rem, 1.1vw, 1rem); }
}


/* ============================================================
   SEÇÃO FAQ
   Accordion nativo <details>/<summary>, sem JS. Eyebrow dourado +
   título serif condensado (na arte é uma serif pesada/condensada;
   usamos Playfair Display 900 como aproximação). Itens com moldura
   dourada fina; marcador "+" que vira "−" ao abrir.
   ============================================================ */

.faq {
  width: 100%;
  background-image: url("imagens/faq-fundo-mobile.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #F3EFE7;
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  padding-block: clamp(3.5rem, 10vw, 5.5rem);
}

.faq__container {
  width: 100%;
  max-width: 860px;
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2rem);
}

/* ---- Cabeçalho ---- */
.faq__eyebrow {
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 4px;
  font-size: clamp(0.7rem, 2.6vw, 0.85rem);
  color: #C9A24B;
  margin-bottom: 0.5rem;
}
.faq__title {
  text-align: center;
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 900;
  line-height: 0.98;
  color: #EFE9DC;
  font-size: clamp(2rem, 8vw, 2.75rem);
}
.faq__sub {
  text-align: center;
  max-width: 46ch;
  margin: clamp(0.75rem, 3vw, 1.1rem) auto 0;
  font-size: clamp(0.92rem, 3.6vw, 1.05rem);
  line-height: 1.45;
  color: #D9D3C6;
}

/* ---- Lista ---- */
.faq__list {
  margin-top: clamp(1.75rem, 6vw, 2.75rem);
  display: grid;
  gap: clamp(0.6rem, 2.5vw, 0.9rem);
}

/* ---- Item ---- */
.faq__item {
  border: 1px solid rgba(180, 140, 75, 0.4);
  background: rgba(8, 7, 5, 0.45);
  padding: clamp(0.9rem, 3.5vw, 1.25rem) clamp(1rem, 4vw, 1.5rem);
}

/* pergunta (summary) */
.faq__q {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-family: "Oswald", "Inter", sans-serif;
  font-weight: 600;
  font-size: clamp(0.98rem, 4vw, 1.2rem);
  color: #F1ECE1;
  line-height: 1.2;
}
.faq__q::-webkit-details-marker { display: none; }   /* remove seta padrão (Safari) */
.faq__q::after {
  content: "+";
  flex: 0 0 auto;
  font-family: "Oswald", sans-serif;
  font-weight: 400;
  font-size: 1.6em;
  line-height: 1;
  color: #C9A24B;
  transition: transform 0.2s ease;
}
.faq__item[open] .faq__q::after { content: "−"; }

/* linha divisória sutil sob a pergunta quando aberto */
.faq__item[open] .faq__q {
  border-bottom: 1px solid rgba(180,140,75,0.25);
  padding-bottom: 0.75rem;
  margin-bottom: 0.75rem;
}

/* resposta */
.faq__a p {
  font-size: clamp(0.88rem, 3.5vw, 1rem);
  line-height: 1.5;
  color: #D2CCBE;
}

/* ---- Rodapé ---- */
.faq__foot {
  margin-top: clamp(2rem, 7vw, 3rem);
  text-align: center;
  max-width: 52ch;
  margin-inline: auto;
  font-size: clamp(0.82rem, 3vw, 0.95rem);
  line-height: 1.45;
  color: #C4BCAD;
}

/* ---- FAQ desktop (>=1024px) ---- */
@media (min-width: 1024px) {
  .faq { background-image: url("imagens/faq-fundo-desktop.webp"); }
  .faq__title { font-size: clamp(2rem, 3.2vw, 2.75rem); }
  .faq__q { font-size: clamp(1rem, 1.4vw, 1.15rem); }
  .faq__a p { font-size: clamp(0.9rem, 1.1vw, 1rem); }
}


/* ============================================================
   SEÇÃO OFERTA FINAL (CTA de fechamento)
   Bloco de texto + botão ancorado no TOPO (onde o fundo tem o vazio;
   a faca ocupa o meio/base). Botão dourado sólido, destaque máximo.
   ============================================================ */

.oferta {
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;   /* trava altura no mobile: evita o "pulo" ao sumir a barra de URL */
  background-image: url("imagens/oferta-fundo-mobile.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #F3EFE7;
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  display: flex;
  flex-direction: column;               /* empilha: conteúdo em cima, faixa no rodapé */
}

.oferta__container {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding: clamp(1.75rem, 6vw, 3rem) clamp(1.25rem, 5vw, 2.5rem);
  text-align: center;
}

/* ---- Título ---- */
.oferta__title {
  font-family: "Oswald", "Inter", sans-serif;
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: 0.3px;
  color: #EFE9DC;
  font-size: clamp(2.1rem, 9vw, 3.5rem);
  text-shadow: 0 2px 18px rgba(0,0,0,0.7);
}

/* ---- Parágrafo ---- */
.oferta__text {
  margin-top: clamp(0.85rem, 3vw, 1.25rem);
  font-size: clamp(0.95rem, 3.7vw, 1.1rem);
  line-height: 1.5;
  color: #E7E1D5;
  text-shadow: 0 1px 8px rgba(0,0,0,0.7);
}

/* ---- Botão principal (dourado sólido) ---- */
.oferta__cta {
  display: block;
  width: 100%;
  margin-top: clamp(1.25rem, 4.5vw, 1.9rem);
  padding: clamp(1rem, 4vw, 1.3rem) 1.5rem;
  background-color: #C9A24B;
  color: #1A1305;
  font-family: "Oswald", "Inter", sans-serif;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0.3px;
  font-size: clamp(1.05rem, 4.6vw, 1.6rem);
  text-decoration: none;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  transition: background-color 0.2s ease, transform 0.15s ease;
}
.oferta__cta:hover { background-color: #D8B25C; transform: translateY(-1px); }
.oferta__cta:active { transform: translateY(0); }

/* ---- Linha de reforço (com card semitransparente atrás do texto) ---- */
.oferta__reinforce {
  margin-top: clamp(0.85rem, 3vw, 1.1rem);
  font-size: clamp(0.85rem, 3.3vw, 1rem);
  color: #E4DCCB;
}
.oferta__reinforce-inner {
  display: inline-block;
  background: rgba(0, 0, 0, 0.55);
  border-radius: 8px;
  padding: 0.5rem 0.9rem;
  backdrop-filter: blur(1.5px);
}

/* ---- Rodapé: faixa escura full-width ---- */
.oferta__foot {
  width: 100%;
  margin-top: auto;
  background: rgba(0, 0, 0, 0.88);
  padding: clamp(0.8rem, 3vw, 1.1rem) clamp(1.25rem, 5vw, 2.5rem);
  text-align: center;
  font-size: clamp(0.78rem, 3vw, 0.9rem);
  color: #C4BCAD;
}
.oferta__foot-inner { display: inline-block; max-width: 760px; }
.oferta__dot { opacity: 0.7; margin-inline: 0.35rem; }

/* ---- OFERTA desktop (>=1024px) ---- */
@media (min-width: 1024px) {
  .oferta { background-image: url("imagens/oferta-fundo-desktop.webp"); position: relative; }

  /* degradê de contraste da esquerda p/ a direita (mesma lógica do Hero) */
  .oferta::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to right,
      rgba(0,0,0,0.82) 0%,
      rgba(0,0,0,0.70) 28%,
      rgba(0,0,0,0.40) 44%,
      rgba(0,0,0,0) 58%
    );
    pointer-events: none;
    z-index: 0;
  }
  .oferta__container { position: relative; z-index: 1; padding-top: clamp(1.5rem, 4vw, 2.5rem); padding-inline: clamp(2.5rem, 5vw, 4rem); text-align: left; }
  .oferta__foot { position: relative; z-index: 1; margin-top: auto; }   /* cola no rodapé da seção */

  /* no desktop, o degradê cuida do contraste: dispensa os cards do mobile */
  .oferta__reinforce-inner { background: transparent; backdrop-filter: none; padding: 0; }

  /* conteúdo na coluna esquerda, como no Hero */
  .oferta__text,
  .oferta__cta,
  .oferta__reinforce { max-width: 46%; }
  .oferta__cta { width: auto; display: inline-block; }
  .oferta__title { font-size: clamp(2rem, 3.2vw, 2.75rem); max-width: 60%; }   /* padronizado (menor), largura do Hero */
  .oferta__text { font-size: clamp(0.9rem, 1.1vw, 1rem); }     /* corpo menor no desktop */
}


/* ============================================================
   HEADER FIXO (barra superior preta)
   Logo à esquerda · título centralizado · botão "Ver Peças" à direita.
   Fixo no topo; as seções recebem scroll-margin p/ âncoras não ficarem
   sob a barra. Altura ~64–76px.
   ============================================================ */

:root { --header-h: clamp(60px, 12vw, 76px); }

.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  height: var(--header-h);
  background: #0A0A0A;
  border-bottom: 1px solid rgba(180, 140, 75, 0.35);
  display: flex;
  align-items: center;
}
.site-header__inner {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: clamp(0.9rem, 3vw, 2rem);
  display: grid;
  grid-template-columns: 1fr auto 1fr;   /* logo | título | botão */
  align-items: center;
  gap: 1rem;
}

/* logo à esquerda (placeholder — trocar por <img>) */
.site-header__logo {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  height: calc(var(--header-h) - 24px);
}
.site-header__logo img { height: 100%; width: auto; display: block; }
.site-header__logo--ph {                 /* placeholder textual do logo */
  font-family: "Oswald", sans-serif;
  font-weight: 700;
  letter-spacing: 1px;
  color: #EFE9DC;
  font-size: clamp(1rem, 4vw, 1.3rem);
}

/* título central */
.site-header__title {
  justify-self: center;
  text-align: center;
  font-family: "Oswald", sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1.05;
  color: #EDE7DA;
  font-size: clamp(0.72rem, 2.6vw, 1rem);
}
.site-header__title small { display: block; font-weight: 400; color: #C9A24B; font-size: 0.85em; letter-spacing: 1px; }

/* botão à direita */
.site-header__cta {
  justify-self: end;
  display: inline-block;
  padding: clamp(0.5rem, 2vw, 0.7rem) clamp(0.9rem, 3vw, 1.5rem);
  background: #C9A24B;
  color: #1A1305;
  font-family: "Oswald", sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: clamp(0.72rem, 2.7vw, 0.95rem);
  text-decoration: none;
  border-radius: 6px;
  white-space: nowrap;
  transition: background-color 0.2s ease;
}
.site-header__cta:hover { background: #D8B25C; }

/* compensar a barra fixa: empurra o conteúdo pra baixo */
body { padding-top: var(--header-h); }

/* em telas bem estreitas, esconder o título pra não espremer */
@media (max-width: 380px) {
  .site-header__title { display: none; }
}


/* ============================================================
   BOTÃO FLUTUANTE DE WHATSAPP (canto inferior direito)
   ============================================================ */

.wa-float {
  position: fixed;
  right: clamp(0.9rem, 3vw, 1.5rem);
  bottom: clamp(0.9rem, 3vw, 1.5rem);
  z-index: 1000;
  width: clamp(52px, 14vw, 62px);
  height: clamp(52px, 14vw, 62px);
  border-radius: 50%;
  background: #25D366;              /* verde WhatsApp */
  display: grid;
  place-items: center;
  box-shadow: 0 6px 20px rgba(0,0,0,0.45);
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.wa-float:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 10px 28px rgba(0,0,0,0.55); }
.wa-float svg { width: 58%; height: 58%; fill: #fff; display: block; }


/* ============================================================
   RODAPÉ (centralizado, estilo institucional)
   Logo → responsável/registro → links → disclaimer → redes → copyright.
   Fundo preto fechado.
   ============================================================ */

.site-footer {
  background: #050505;               /* preto mais fechado */
  color: #C9C2B4;
  font-family: "Inter", system-ui, sans-serif;
  border-top: 1px solid rgba(180,140,75,0.25);
}
.site-footer__inner {
  max-width: 820px;
  margin-inline: auto;
  padding: clamp(2.5rem, 7vw, 4rem) clamp(1.25rem, 5vw, 2.5rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(1.25rem, 4vw, 1.75rem);
}

/* logo centralizada */
.site-footer__logo {
  height: clamp(56px, 14vw, 84px);
  width: auto;
  display: block;
}

/* linha de responsável/registro */
.site-footer__legal {
  font-size: clamp(0.85rem, 3.2vw, 0.98rem);
  line-height: 1.7;
  color: #D6CFC2;
}
.site-footer__legal a { color: #D6CFC2; text-decoration: none; }
.site-footer__legal a:hover { color: #fff; }

/* links institucionais em linha */
.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}
.site-footer__links a {
  font-size: clamp(0.9rem, 3.4vw, 1rem);
  color: #E7E1D5;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.site-footer__links a:hover { color: #fff; }
.site-footer__links-sep { color: rgba(201,162,75,0.6); }

/* bloco de disclaimer emoldurado */
.site-footer__disclaimer {
  width: 100%;
  border: 1px solid rgba(180,140,75,0.25);
  border-radius: 12px;
  padding: clamp(1.1rem, 4vw, 1.6rem);
  background: rgba(255,255,255,0.02);
}
.site-footer__disclaimer p {
  font-size: clamp(0.78rem, 2.9vw, 0.9rem);
  line-height: 1.7;
  color: #9E978A;
}
.site-footer__disclaimer strong { color: #C9C2B4; }

/* selos de pagamento */
.site-footer__pay img {
  display: block;
  width: 100%;
  max-width: 340px;
  height: auto;
  margin-inline: auto;
}

/* redes sociais */
.site-footer__social { display: flex; gap: 0.9rem; justify-content: center; }
.site-footer__social a {
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(230,225,213,0.4);
  display: grid; place-items: center;
  color: #E7E1D5;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.site-footer__social a:hover { background: #E7E1D5; color: #050505; }
.site-footer__social svg { width: 20px; height: 20px; fill: currentColor; }

/* barra de copyright */
.site-footer__copy {
  background: #000;
  color: #8A8378;
  text-align: center;
  padding: clamp(0.9rem, 3vw, 1.15rem) 1rem;
  font-size: clamp(0.8rem, 3vw, 0.92rem);
  border-top: 1px solid rgba(255,255,255,0.05);
}


/* ============================================================
   SEPARADOR ENTRE SEÇÕES
   Faixa preta com linha dourada fina + losango central. Suaviza o
   corte seco de uma imagem de fundo para a outra e ecoa os
   ornamentos (losango) já presentes em Para Quem É / Garantia / FAQ.
   Uso: <div class="section-sep" aria-hidden="true"></div> entre as seções.
   ============================================================ */

.section-sep {
  background: #000;
  height: clamp(48px, 9vw, 84px);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
/* linha dourada horizontal */
.section-sep::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(70%, 760px);
  height: 1px;
  background: linear-gradient(
    to right,
    rgba(201,162,75,0) 0%,
    rgba(201,162,75,0.55) 25%,
    rgba(201,162,75,0.55) 75%,
    rgba(201,162,75,0) 100%
  );
}
/* losango central */
.section-sep::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  width: clamp(8px, 2vw, 11px);
  height: clamp(8px, 2vw, 11px);
  background: #C9A24B;
  box-shadow: 0 0 0 4px #000;   /* "corta" a linha atrás do losango */
}


/* ============================================================
   AJUSTE FINAL DO RODAPÉ — cor de fonte discreta + fonte menor
   (vale mobile e desktop). Colado ao final para sobrepor as
   regras anteriores do rodapé.
   ============================================================ */

/* cor de fonte cinza fechado em todo o rodapé */
.site-footer,
.site-footer__legal,
.site-footer__legal a,
.site-footer__links a,
.site-footer__disclaimer p,
.site-footer__disclaimer strong,
.site-footer__copy,
.site-footer__social a {
  color: #7A756B;
}

/* hover um pouco mais claro, mantendo a discrição */
.site-footer__legal a:hover,
.site-footer__links a:hover { color: #9E978A; }

/* fonte menor (~75% do atual) em todo o rodapé */
.site-footer__legal   { font-size: clamp(0.64rem, 2.4vw, 0.74rem); }
.site-footer__links a  { font-size: clamp(0.68rem, 2.6vw, 0.75rem); }
.site-footer__disclaimer p { font-size: clamp(0.6rem, 2.2vw, 0.68rem); }
.site-footer__copy     { font-size: clamp(0.6rem, 2.2vw, 0.7rem); }

/* logo e ícones sociais também um pouco menores, p/ acompanhar */
.site-footer__logo { height: clamp(44px, 11vw, 66px); }
.site-footer__social a { width: 36px; height: 36px; }
.site-footer__social svg { width: 17px; height: 17px; }