/*
Theme Name: Temperos Vianda
Theme URI: https://temperosvianda.com.br
Author: Agência Homi
Author URI: https://agenciahomi.com
Description: Tema codificado da Temperos Vianda, a partir do design aprovado. Cinco páginas, flexbox, variáveis no :root, cabeçalho e rodapé únicos.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: vianda
*/

/* ---------- Fontes hospedadas no próprio tema ---------- */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url("assets/fonts/archivo-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url("assets/fonts/archivo-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("assets/fonts/source-serif-4-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("assets/fonts/source-serif-4-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Cores */
  --cor-verde: #0f6b3a;
  --cor-verde-escuro: #0a4f2b;
  --cor-verde-suave: #f0f6f1;
  --cor-verde-suave-hover: #dfecdf;
  --cor-verde-borda: #bfdcc6;
  --cor-verde-texto-claro: #e8f3ea;
  --cor-amarelo: #f6c519;
  --cor-amarelo-hover: #ffd633;
  --cor-amarelo-texto: #3a2a00;
  --cor-fundo: #fbf9f4;
  --cor-branco: #ffffff;
  --cor-creme: #f0ebe0;
  --cor-borda: #e6e0d4;
  --cor-texto: #211e1a;
  --cor-texto-2: #3a342c;
  --cor-texto-3: #5d574f;
  --cor-texto-suave: #6e6659;
  --cor-escuro: #211e1a;
  --cor-escuro-2: #2a2521;
  --cor-escuro-borda: #3a342c;
  --cor-escuro-borda-2: #4a443c;
  --cor-escuro-texto: #d9d4ca;
  --cor-escuro-texto-2: #c9c3b9;
  --cor-escuro-suave: #a9a29a;
  --cor-aviso-fundo: #fdf8ec;
  --cor-aviso-borda: #c9b98a;
  --cor-erro: #a4181e;
  --cor-erro-fundo: #fdf1f0;
  --cor-sucesso-fundo: #f0f6f1;
  --altura-zero: 0;
  --cor-branco-meio: rgba(255, 255, 255, 0.5);
  --cor-branco-leve: rgba(255, 255, 255, 0.1);
  --cor-sombra: rgba(33, 30, 26, 0.1);
  --cor-foco: #2c6fd6;
  /* Cor de cada tempero (faixa dos cards) */
  --cor-completo: #6b3a24;
  --cor-pimenta: #a4181e;
  --cor-ervas: #2e7d32;
  --cor-alho: #3b3182;

  /* Fontes */
  --fonte-ui: "Archivo", "Helvetica Neue", "Arial", sans-serif;
  --fonte-serif: "Source Serif 4", "Georgia", serif;
  --fonte-mono: "SFMono-Regular", "Menlo", "Consolas", monospace;

  /* Tamanhos de fonte */
  --fonte-hero: clamp(34px, 5.2vw, 56px);
  --fonte-h1: clamp(30px, 4.4vw, 44px);
  --fonte-h2-grande: clamp(26px, 3.4vw, 36px);
  --fonte-h2: clamp(24px, 3vw, 32px);
  --fonte-h2-pequeno: clamp(23px, 2.6vw, 29px);
  --fonte-cta: clamp(26px, 3.6vw, 38px);
  --fonte-lead-hero: clamp(17px, 2.1vw, 21px);
  --fonte-serif-grande: 19px;
  --fonte-serif-media: 18px;
  --fonte-serif-normal: 17px;
  --fonte-serif-pequena: 16px;
  --fonte-serif-xs: 15px;
  --fonte-card-titulo: 19px;
  --fonte-card-titulo-2: 17px;
  --fonte-card-titulo-3: 16px;
  --fonte-h3-painel: 22px;
  --fonte-h3-painel-2: 20px;
  --fonte-botao: 17px;
  --fonte-botao-2: 16px;
  --fonte-ui-normal: 15px;
  --fonte-ui-pequena: 14px;
  --fonte-ui-xs: 13px;
  --fonte-mono-normal: 12px;
  --fonte-mono-pequena: 11px;
  --fonte-estat: 22px;
  --fonte-preco: 28px;
  --altura-linha-titulo: 1.03;
  --altura-linha-h2: 1.1;
  --altura-linha-card: 1.25;
  --altura-linha-serif: 1.55;
  --altura-linha-serif-curta: 1.45;
  --altura-linha-ui: 1.5;
  --altura-linha-1: 1;
  --peso-medio: 500;
  --peso-semi: 600;
  --peso-forte: 700;
  --peso-extra: 800;
  --espaco-letra-titulo: -0.02em;
  --espaco-letra-h2: -0.015em;
  --espaco-letra-mono: 0.1em;
  --espaco-letra-mono-largo: 0.14em;
  --espaco-letra-caps: 0.12em;
  --espaco-letra-leve: 0.04em;
  --espaco-letra-topo: 0.02em;

  /* Espaçamentos (em px, nome = valor) */
  --esp-2: 2px;
  --esp-4: 4px;
  --esp-6: 6px;
  --esp-8: 8px;
  --esp-9: 9px;
  --esp-10: 10px;
  --esp-12: 12px;
  --esp-14: 14px;
  --esp-16: 16px;
  --esp-18: 18px;
  --esp-20: 20px;
  --esp-22: 22px;
  --esp-24: 24px;
  --esp-26: 26px;
  --esp-28: 28px;
  --esp-32: 32px;
  --esp-36: 36px;
  --esp-40: 40px;
  --esp-44: 44px;
  --esp-48: 48px;
  --esp-52: 52px;
  --esp-56: 56px;
  --esp-60: 60px;

  /* Medidas */
  --largura-max: 1180px;
  --largura-texto-hero: 30em;
  --largura-texto-h2: 26em;
  --largura-texto: 34em;
  --largura-texto-b2b: 32em;
  --largura-texto-rodape: 24em;
  --largura-card: clamp(228px, 76vw, 258px);
  --largura-card-minima: 280px;
  --largura-card-pilar: 180px;
  --largura-card-escuro: 200px;
  --largura-coluna: 300px;
  --peso-hero-imagem: 1.25;
  --deslocamento-potes-celular: 40px;
  --largura-coluna-larga: 320px;
  --largura-botao-inicio: 190px;
  --largura-miniatura: 54px;
  --largura-traco: 28px;
  --largura-traco-b2b: 26px;
  --largura-hamburguer: 18px;
  --altura-logo: 46px;
  --altura-logo-rodape: 60px;
  --altura-toque: 44px;
  --altura-botao: 52px;
  --altura-botao-menu: 46px;
  --altura-faixa: 5px;
  --altura-traco: 2px;
  --altura-galeria: 280px;
  --altura-topbar: 40px;
  --altura-admin-bar: 32px;
  --altura-admin-bar-celular: 46px;
  --raio-6: 6px;
  --raio-8: 8px;
  --raio-10: 10px;
  --raio-12: 12px;
  --raio-14: 14px;
  --largura-borda: 1px;
  --largura-borda-2: 2px;
  --largura-borda-foco: 3px;
  --deslocamento-hover: -4px;
  --deslocamento-hover-pequeno: -3px;
  --sombra-hover: 0 10px 26px var(--cor-sombra);
  --sombra-hover-pequena: 0 8px 20px var(--cor-sombra);
  --transicao: 0.2s ease;
  --transicao-botao: 0.18s ease;
  --deslocamento-botao: -2px;
  --sombra-botao: 0 6px 16px var(--cor-sombra);
  --largura-ponto: 8px;
  --altura-toque-minima: 24px;
  --largura-ponto-ativo: 22px;
  --esp-7: 7px;
  --deslocamento-revelar: 14px;
  --deslocamento-numero: 8px;
  --duracao-revelar: 0.55s;
  --passo-revelar: 0.12s;
  --atraso-numero: 0.25s;
  --curva-revelar: cubic-bezier(0.22, 0.61, 0.36, 1);
  --opacidade-separador: 0.5;
  --proporcao-pote: 3 / 4;
  --proporcao-quadrado: 1 / 1;
  --proporcao-catalogo: 4 / 5;
  --proporcao-foto: 4 / 3;
  --posicao-foto: 50% 45%;
  --proporcao-ambiente: 13 / 10;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: var(--fonte-ui);
  font-size: var(--fonte-ui-normal);
  line-height: var(--altura-linha-ui);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

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

a { color: var(--cor-verde); text-decoration: none; }
a:hover { color: var(--cor-verde-escuro); }

h1, h2, h3 { margin: 0; font-family: var(--fonte-ui); text-wrap: balance; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font-family: var(--fonte-ui); }

[id] { scroll-margin-top: var(--altura-botao-menu); }

:focus-visible {
  outline: var(--largura-borda-foco) solid var(--cor-foco);
  outline-offset: var(--esp-2);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* ---------- Estrutura ---------- */
.conteudo-principal { flex: 1; display: flex; flex-direction: column; }

.secao { display: flex; justify-content: center; }
.secao-verde { background: var(--cor-verde); color: var(--cor-branco); }
.secao-escura { background: var(--cor-escuro); color: var(--cor-branco); }
.secao-branca {
  background: var(--cor-branco);
  border-top: var(--largura-borda) solid var(--cor-borda);
  border-bottom: var(--largura-borda) solid var(--cor-borda);
}

.container {
  width: 100%;
  max-width: var(--largura-max);
  padding-inline: var(--esp-20);
  display: flex;
  flex-direction: column;
}

.container-marca { padding-block: var(--esp-56) var(--esp-8); gap: var(--esp-24); }
.container-portfolio { padding-block: var(--esp-44); gap: var(--esp-22); }
.container-aplicacoes { padding-block: var(--esp-52); gap: var(--esp-8); }
.container-pilares { padding-block: var(--esp-48); gap: var(--esp-20); }
.container-b2b { padding-block: var(--esp-56); }
.container-cta { padding-block: var(--esp-56); align-items: center; text-align: center; gap: var(--esp-14); }
.container-pagina { padding-block: var(--esp-40) var(--esp-60); gap: var(--esp-28); }
.container-faixa { padding-block: var(--esp-48); gap: var(--esp-14); }

/* ---------- Tipografia ---------- */
.titulo-hero {
  font-size: var(--fonte-hero);
  line-height: var(--altura-linha-titulo);
  font-weight: var(--peso-extra);
  letter-spacing: var(--espaco-letra-titulo);
}

.titulo-pagina {
  font-size: var(--fonte-h1);
  line-height: var(--altura-linha-titulo);
  font-weight: var(--peso-extra);
  letter-spacing: var(--espaco-letra-titulo);
}

.titulo-secao {
  font-size: var(--fonte-h2);
  line-height: var(--altura-linha-h2);
  font-weight: var(--peso-forte);
  letter-spacing: var(--espaco-letra-h2);
}

.titulo-secao-grande {
  font-size: var(--fonte-h2-grande);
  line-height: var(--altura-linha-h2);
  font-weight: var(--peso-forte);
  letter-spacing: var(--espaco-letra-h2);
  max-width: var(--largura-texto-h2);
}

.titulo-secao-pequeno {
  font-size: var(--fonte-h2-pequeno);
  font-weight: var(--peso-forte);
  letter-spacing: var(--espaco-letra-h2);
}

.titulo-cta {
  font-size: var(--fonte-cta);
  line-height: var(--altura-linha-h2);
  font-weight: var(--peso-extra);
  letter-spacing: var(--espaco-letra-titulo);
}

.titulo-card {
  font-size: var(--fonte-card-titulo);
  font-weight: var(--peso-forte);
  line-height: var(--altura-linha-card);
}

.titulo-card-pequeno {
  font-size: var(--fonte-card-titulo-3);
  font-weight: var(--peso-forte);
  line-height: var(--altura-linha-card);
}

.titulo-painel {
  font-size: var(--fonte-h3-painel);
  font-weight: var(--peso-forte);
  line-height: var(--altura-linha-card);
}

.lead {
  font-family: var(--fonte-serif);
  font-size: var(--fonte-serif-grande);
  line-height: var(--altura-linha-serif);
  color: var(--cor-texto-3);
  max-width: var(--largura-texto);
  text-wrap: pretty;
}

.lead-hero {
  font-family: var(--fonte-serif);
  font-size: var(--fonte-lead-hero);
  line-height: var(--altura-linha-serif);
  color: var(--cor-verde-texto-claro);
  max-width: var(--largura-texto-hero);
  text-wrap: pretty;
}

.texto-serif {
  font-family: var(--fonte-serif);
  font-size: var(--fonte-serif-media);
  line-height: var(--altura-linha-serif);
  color: var(--cor-texto-2);
  text-wrap: pretty;
}

.texto-serif-suave {
  font-family: var(--fonte-serif);
  font-size: var(--fonte-serif-media);
  line-height: var(--altura-linha-serif);
  color: var(--cor-texto-3);
  max-width: var(--largura-texto);
  text-wrap: pretty;
}

.texto-card {
  font-family: var(--fonte-serif);
  font-size: var(--fonte-serif-pequena);
  line-height: var(--altura-linha-serif-curta);
  color: var(--cor-texto-3);
}

.texto-card-escuro {
  font-family: var(--fonte-serif);
  font-size: var(--fonte-serif-normal);
  line-height: var(--altura-linha-serif-curta);
  color: var(--cor-texto-2);
}

.texto-pequeno {
  font-size: var(--fonte-ui-pequena);
  line-height: var(--altura-linha-ui);
  color: var(--cor-texto-suave);
}

.rotulo-mono {
  font-family: var(--fonte-mono);
  font-size: var(--fonte-mono-pequena);
  letter-spacing: var(--espaco-letra-mono);
  text-transform: uppercase;
  color: var(--cor-texto-suave);
}

.rotulo-caps {
  font-size: var(--fonte-mono-normal);
  font-weight: var(--peso-forte);
  letter-spacing: var(--espaco-letra-caps);
  text-transform: uppercase;
  color: var(--cor-texto-suave);
}

.tamanhos {
  font-size: var(--fonte-ui-xs);
  font-weight: var(--peso-semi);
  color: var(--cor-texto-suave);
  letter-spacing: var(--espaco-letra-leve);
}

.texto-coluna { display: flex; flex-direction: column; gap: var(--esp-14); }

/* ---------- Botões ---------- */
.button-primary,
.button-amarelo,
.button-contorno,
.button-secundario,
.button-suave,
.button-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--fonte-ui);
  font-size: var(--fonte-botao);
  font-weight: var(--peso-forte);
  min-height: var(--altura-botao);
  padding-block: var(--esp-14);
  padding-inline: var(--esp-26);
  border-radius: var(--raio-10);
  border: var(--largura-borda) solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transicao-botao), border-color var(--transicao-botao), color var(--transicao-botao), transform var(--transicao-botao), box-shadow var(--transicao-botao);
}

.button-primary:hover,
.button-amarelo:hover,
.button-contorno:hover,
.button-secundario:hover,
.button-suave:hover,
.button-nav:hover {
  transform: translateY(var(--deslocamento-botao));
  box-shadow: var(--sombra-botao);
}

.button-primary:active,
.button-amarelo:active,
.button-contorno:active,
.button-secundario:active,
.button-suave:active,
.button-nav:active {
  transform: none;
  box-shadow: none;
}

.button-primary { background: var(--cor-verde); color: var(--cor-branco); border-color: var(--cor-verde); }
.button-primary:hover { background: var(--cor-verde-escuro); border-color: var(--cor-verde-escuro); color: var(--cor-branco); }

.button-amarelo { background: var(--cor-amarelo); color: var(--cor-amarelo-texto); border-color: var(--cor-amarelo); }
.button-amarelo:hover { background: var(--cor-amarelo-hover); border-color: var(--cor-amarelo-hover); color: var(--cor-amarelo-texto); }

.button-contorno {
  background: transparent;
  color: var(--cor-branco);
  font-weight: var(--peso-semi);
  border: var(--largura-borda-2) solid var(--cor-branco-meio);
}
.button-contorno:hover { border-color: var(--cor-branco); background: var(--cor-branco-leve); color: var(--cor-branco); }

.button-secundario {
  background: var(--cor-branco);
  color: var(--cor-verde);
  font-weight: var(--peso-semi);
  border-color: var(--cor-verde-borda);
  font-size: var(--fonte-botao-2);
}
.button-secundario:hover { background: var(--cor-verde-suave); border-color: var(--cor-verde); color: var(--cor-verde); }

.button-suave {
  background: var(--cor-verde-suave);
  color: var(--cor-verde);
  font-weight: var(--peso-semi);
  font-size: var(--fonte-ui-normal);
  min-height: var(--altura-toque);
  padding-block: var(--esp-12);
  padding-inline: var(--esp-12);
  border-radius: var(--raio-8);
  width: 100%;
}
.button-suave:hover { background: var(--cor-verde-suave-hover); color: var(--cor-verde); }

.button-nav {
  background: var(--cor-verde);
  color: var(--cor-branco);
  font-size: var(--fonte-ui-normal);
  font-weight: var(--peso-semi);
  min-height: var(--altura-toque);
  padding-block: var(--esp-10);
  padding-inline: var(--esp-18);
  border-radius: var(--raio-8);
}
.button-nav:hover { background: var(--cor-verde-escuro); color: var(--cor-branco); }

.button-largo { width: 100%; }

.button-medio { font-size: var(--fonte-botao-2); }

.grupo-botoes { display: flex; flex-wrap: wrap; gap: var(--esp-12); }

.link-seta {
  font-size: var(--fonte-botao-2);
  font-weight: var(--peso-semi);
  color: var(--cor-verde);
  min-height: var(--altura-toque);
  display: inline-flex;
  align-items: center;
}

.link-inline {
  font-size: var(--fonte-ui-pequena);
  font-weight: var(--peso-semi);
  color: var(--cor-verde);
  text-decoration: underline;
}

/* ---------- Barra do topo + cabeçalho ---------- */
.barra-topo {
  background: var(--cor-verde);
  color: var(--cor-branco);
  padding-block: var(--esp-9);
  padding-inline: var(--esp-20);
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-10);
  justify-content: center;
  align-items: center;
  font-size: var(--fonte-ui-xs);
  letter-spacing: var(--espaco-letra-topo);
}

.barra-topo-separador { opacity: var(--opacidade-separador); }

.cabecalho {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--cor-fundo);
  border-bottom: var(--largura-borda) solid var(--cor-borda);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cabecalho-interno {
  width: 100%;
  max-width: var(--largura-max);
  padding-block: var(--esp-10);
  padding-inline: var(--esp-20);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-14);
}

.marca { display: flex; flex: none; }
.marca img { height: var(--altura-logo); width: auto; }

.navegacao {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-4);
}

.link-nav {
  font-size: var(--fonte-ui-normal);
  font-weight: var(--peso-medio);
  color: var(--cor-texto-2);
  padding-block: var(--esp-10);
  padding-inline: var(--esp-12);
  min-height: var(--altura-toque);
  display: inline-flex;
  align-items: center;
  border-radius: var(--raio-6);
}
.link-nav:hover, .link-nav-ativo { background: var(--cor-creme); color: var(--cor-verde); }

.navegacao .button-nav { margin-left: var(--esp-6); }

.botao-menu {
  display: none;
  align-items: center;
  gap: var(--esp-9);
  font-size: var(--fonte-ui-normal);
  font-weight: var(--peso-semi);
  color: var(--cor-texto);
  background: var(--cor-branco);
  border: var(--largura-borda) solid var(--cor-borda);
  border-radius: var(--raio-10);
  padding-block: var(--esp-10);
  padding-inline: var(--esp-14);
  min-height: var(--altura-botao-menu);
  cursor: pointer;
  flex: none;
}

.hamburguer { display: flex; flex-direction: column; gap: var(--esp-4); width: var(--largura-hamburguer); }
.hamburguer-linha { height: var(--altura-traco); background: var(--cor-texto); border-radius: var(--esp-2); }

.menu-celular {
  display: none;
  width: 100%;
  flex-direction: column;
  border-top: var(--largura-borda) solid var(--cor-borda);
  background: var(--cor-branco);
}
.menu-celular-aberto { display: flex; }

.link-menu-celular {
  font-size: var(--fonte-botao);
  font-weight: var(--peso-semi);
  color: var(--cor-texto);
  border-bottom: var(--largura-borda) solid var(--cor-creme);
  padding-block: var(--esp-14);
  padding-inline: var(--esp-20);
  min-height: var(--altura-botao);
  display: flex;
  align-items: center;
}
.link-menu-celular:hover { background: var(--cor-creme); color: var(--cor-verde); }

.menu-celular-acao { padding: var(--esp-16) var(--esp-20); display: flex; }

body.admin-bar .cabecalho { top: var(--altura-admin-bar); }

/* Conteúdo genérico (páginas sem template próprio, posts, busca) */
.conteudo-generico { display: flex; flex-direction: column; gap: var(--esp-16); }
.conteudo-generico p, .conteudo-generico li { font-family: var(--fonte-serif); font-size: var(--fonte-serif-media); line-height: var(--altura-linha-serif); color: var(--cor-texto-2); max-width: var(--largura-texto); }
.conteudo-generico h2 { font-size: var(--fonte-h2); font-weight: var(--peso-forte); letter-spacing: var(--espaco-letra-h2); }
.conteudo-generico h3 { font-size: var(--fonte-card-titulo); font-weight: var(--peso-forte); }
.conteudo-generico ul { padding-left: var(--esp-20); list-style: disc; }
.conteudo-generico a { text-decoration: underline; }

/* ---------- Hero ---------- */
.hero {
  width: 100%;
  max-width: var(--largura-max);
  padding-inline: var(--esp-20);
  padding-top: var(--esp-56);
  display: flex;
  gap: var(--esp-36);
  align-items: flex-end;
}

.hero-texto {
  flex: 1 1 var(--largura-coluna);
  padding-bottom: var(--esp-56);
  display: flex;
  flex-direction: column;
  gap: var(--esp-18);
}

.hero-texto .grupo-botoes { margin-top: var(--esp-10); }

.hero-imagem {
  flex: var(--peso-hero-imagem) 1 var(--largura-coluna);
  display: block;
}

.hero-imagem img { width: 100%; }

/* ---------- Segunda dobra: a marca ---------- */
.bloco-marca { display: flex; flex-wrap: wrap; gap: var(--esp-32); align-items: flex-start; }

.bloco-marca-foto { flex: 1 1 var(--largura-card-minima); display: flex; }
.bloco-marca-foto img {
  width: 100%;
  aspect-ratio: var(--proporcao-foto);
  object-fit: cover;
  object-position: var(--posicao-foto);
  border-radius: var(--raio-14);
}

.bloco-marca-texto { flex: 1 1 var(--largura-card-minima); display: flex; flex-direction: column; gap: var(--esp-14); }

.por-onde-comecar {
  margin-top: var(--esp-12);
  padding-top: var(--esp-22);
  border-top: var(--largura-borda) solid var(--cor-borda);
  display: flex;
  flex-direction: column;
  gap: var(--esp-10);
}

.por-onde-comecar-botoes { display: flex; flex-wrap: wrap; gap: var(--esp-10); }
.por-onde-comecar-botoes .button-primary,
.por-onde-comecar-botoes .button-secundario {
  flex: 1 1 var(--largura-botao-inicio);
  font-size: var(--fonte-botao-2);
  padding-inline: var(--esp-20);
}

/* ---------- Cabeçalho de seção em linha ---------- */
.cabecalho-linha {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-12);
  align-items: baseline;
  justify-content: space-between;
}

/* ---------- Carrossel de cards ---------- */
.carrossel {
  display: flex;
  gap: var(--esp-18);
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
  justify-content: safe center;
  padding: var(--esp-4) var(--esp-4) var(--esp-16);
}
.carrossel::-webkit-scrollbar { display: none; }

.carrossel-pontos {
  display: flex;
  gap: var(--esp-2);
  justify-content: center;
  align-items: center;
  padding-block: var(--esp-6) var(--esp-2);
}
.carrossel-pontos-ocultos { display: none; }

/* Botao com area de toque de 24px; o ponto visual e o span interno. */
.carrossel-ponto {
  width: var(--altura-toque-minima);
  height: var(--altura-toque-minima);
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.carrossel-ponto-visual {
  width: var(--largura-ponto);
  height: var(--largura-ponto);
  border-radius: var(--largura-ponto);
  background: var(--cor-borda);
  transition: width var(--transicao), background var(--transicao);
}
.carrossel-ponto-ativo .carrossel-ponto-visual { width: var(--largura-ponto-ativo); background: var(--cor-verde); }

.card-produto {
  flex: 0 0 var(--largura-card);
  scroll-snap-align: start;
  background: var(--cor-branco);
  border: var(--largura-borda) solid var(--cor-borda);
  border-radius: var(--raio-14);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--transicao), border-color var(--transicao), box-shadow var(--transicao);
}
.card-produto:hover { transform: translateY(var(--deslocamento-hover)); border-color: var(--cor-verde); box-shadow: var(--sombra-hover); }

.card-produto-foto { width: 100%; aspect-ratio: var(--proporcao-quadrado); object-fit: contain; }
.card-produto-foto-alta { width: 100%; aspect-ratio: var(--proporcao-catalogo); object-fit: contain; }

.card-produto-corpo { padding: var(--esp-18); display: flex; flex-direction: column; gap: var(--esp-8); flex: 1; }
.card-produto-corpo .texto-card { flex: 1; }

/* Catálogo em grade (página Serviços) */
.grade-produtos { display: flex; flex-wrap: wrap; gap: var(--esp-18); }
.grade-produtos .card-produto { flex: 1 1 var(--largura-card-minima); }

/* ---------- Aplicações (card com faixa de cor) ---------- */
.card-uso {
  flex: 0 0 var(--largura-card);
  scroll-snap-align: start;
  background: var(--cor-fundo);
  border: var(--largura-borda) solid var(--cor-borda);
  border-radius: var(--raio-14);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  color: var(--cor-texto);
  transition: border-color var(--transicao), background var(--transicao);
}
.card-uso:hover { background: var(--cor-branco); color: var(--cor-texto); }
.card-uso-completo:hover { border-color: var(--cor-completo); }
.card-uso-pimenta:hover { border-color: var(--cor-pimenta); }
.card-uso-ervas:hover { border-color: var(--cor-ervas); }
.card-uso-alho:hover { border-color: var(--cor-alho); }

.faixa-cor { height: var(--altura-faixa); width: 100%; }
.faixa-completo { background: var(--cor-completo); }
.faixa-pimenta { background: var(--cor-pimenta); }
.faixa-ervas { background: var(--cor-ervas); }
.faixa-alho { background: var(--cor-alho); }

.card-uso-corpo { padding: var(--esp-18); display: flex; flex-direction: column; gap: var(--esp-12); flex: 1; }
.card-uso-corpo .texto-card-escuro { flex: 1; }

.card-uso-topo { display: flex; gap: var(--esp-12); align-items: center; }
.card-uso-topo img { width: var(--largura-miniatura); height: var(--largura-miniatura); object-fit: contain; flex: none; }
.card-uso-titulos { display: flex; flex-direction: column; }

.eyebrow {
  font-size: var(--fonte-mono-pequena);
  font-weight: var(--peso-forte);
  letter-spacing: var(--espaco-letra-caps);
  text-transform: uppercase;
  color: var(--cor-texto-suave);
}

.card-uso-nome { font-size: var(--fonte-card-titulo-2); font-weight: var(--peso-forte); line-height: var(--altura-linha-card); }

.link-card { font-size: var(--fonte-ui-pequena); font-weight: var(--peso-semi); color: var(--cor-verde); }

/* ---------- Pilares ---------- */
.lista-pilares { display: flex; flex-wrap: wrap; gap: var(--esp-14); }

.card-pilar {
  flex: 1 1 var(--largura-card-pilar);
  background: var(--cor-branco);
  border: var(--largura-borda) solid var(--cor-borda);
  border-radius: var(--raio-12);
  padding: var(--esp-20);
  display: flex;
  flex-direction: column;
  gap: var(--esp-10);
  transition: transform var(--transicao), border-color var(--transicao), box-shadow var(--transicao);
}
.card-pilar:hover { transform: translateY(var(--deslocamento-hover-pequeno)); border-color: var(--cor-verde); box-shadow: var(--sombra-hover-pequena); }

.card-pilar-topo { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-10); }

.pilar-valor {
  font-size: var(--fonte-estat);
  font-weight: var(--peso-forte);
  color: var(--cor-verde);
  line-height: var(--altura-linha-1);
  letter-spacing: var(--espaco-letra-h2);
}

.numero-mono {
  font-family: var(--fonte-mono);
  font-size: var(--fonte-mono-pequena);
  color: var(--cor-texto-suave);
  letter-spacing: var(--espaco-letra-leve);
  flex: none;
}

.traco-amarelo { height: var(--altura-traco); width: var(--largura-traco); background: var(--cor-amarelo); border-radius: var(--esp-2); flex: none; }
.traco-amarelo-curto { width: var(--largura-traco-b2b); }

.texto-pilar {
  font-family: var(--fonte-serif);
  font-size: var(--fonte-serif-xs);
  line-height: var(--altura-linha-ui);
  color: var(--cor-texto-3);
}

/* ---------- B2B (fundo escuro) ---------- */
.b2b { display: flex; flex-wrap: wrap; gap: var(--esp-36); align-items: flex-start; }

.b2b-texto { flex: 1 1 var(--largura-coluna-larga); display: flex; flex-direction: column; gap: var(--esp-16); }

.eyebrow-linha { display: flex; align-items: center; gap: var(--esp-10); }

.eyebrow-amarelo {
  font-family: var(--fonte-mono);
  font-size: var(--fonte-mono-pequena);
  font-weight: var(--peso-semi);
  letter-spacing: var(--espaco-letra-mono-largo);
  text-transform: uppercase;
  color: var(--cor-amarelo);
}

.texto-escuro {
  font-family: var(--fonte-serif);
  font-size: var(--fonte-serif-media);
  line-height: var(--altura-linha-serif);
  color: var(--cor-escuro-texto);
  max-width: var(--largura-texto-b2b);
}

.estatisticas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-20);
  border-top: var(--largura-borda) solid var(--cor-escuro-borda);
  padding-top: var(--esp-18);
}

.estat { display: flex; flex-direction: column; gap: var(--esp-4); }
.estat-valor { font-size: var(--fonte-estat); font-weight: var(--peso-extra); color: var(--cor-amarelo); line-height: var(--altura-linha-1); }
.estat-rotulo { font-size: var(--fonte-ui-xs); color: var(--cor-escuro-suave); }

.lista-escura { flex: 1 1 var(--largura-coluna-larga); display: flex; flex-wrap: wrap; gap: var(--esp-14); }

.card-escuro {
  flex: 1 1 var(--largura-card-escuro);
  border: var(--largura-borda) solid var(--cor-escuro-borda);
  border-radius: var(--raio-12);
  padding: var(--esp-18);
  background: var(--cor-escuro-2);
  display: flex;
  flex-direction: column;
  gap: var(--esp-10);
}

.card-escuro-topo { display: flex; align-items: baseline; justify-content: space-between; gap: var(--esp-10); }
.card-escuro .titulo-card-pequeno { color: var(--cor-branco); }
.card-escuro .numero-mono { color: var(--cor-amarelo); }

.texto-card-claro {
  font-family: var(--fonte-serif);
  font-size: var(--fonte-serif-pequena);
  line-height: var(--altura-linha-serif-curta);
  color: var(--cor-escuro-texto-2);
}

.button-contorno-escuro { border-color: var(--cor-escuro-borda-2); }

/* ---------- Entrada em cascata dos cards numerados ---------- */
.revelar {
  opacity: 0;
  transform: translateY(var(--deslocamento-revelar));
  transition:
    opacity var(--duracao-revelar) var(--curva-revelar),
    transform var(--duracao-revelar) var(--curva-revelar),
    border-color var(--transicao),
    box-shadow var(--transicao);
  transition-delay: calc(var(--ordem, 0) * var(--passo-revelar));
}
.revelar .numero-mono {
  opacity: 0;
  transform: translateX(var(--deslocamento-numero));
  transition: opacity var(--duracao-revelar) var(--curva-revelar), transform var(--duracao-revelar) var(--curva-revelar);
  transition-delay: calc(var(--ordem, 0) * var(--passo-revelar) + var(--atraso-numero));
}
.revelar-visivel { opacity: 1; transform: none; transition-delay: calc(var(--ordem, 0) * var(--passo-revelar)); }
.revelar-visivel .numero-mono { opacity: 1; transform: none; }
.revelar-visivel:hover { transition-delay: 0s; }

.card-escuro { transition: transform var(--transicao), border-color var(--transicao), box-shadow var(--transicao); }
.card-escuro:hover { transform: translateY(var(--deslocamento-hover-pequeno)); border-color: var(--cor-escuro-borda-2); box-shadow: var(--sombra-hover-pequena); }

/* ---------- CTA final ---------- */
.container-cta .lead-hero { margin-inline: auto; }
.container-cta .grupo-botoes { justify-content: center; margin-top: var(--esp-12); }

/* ---------- Painéis, listas e fichas ---------- */
.painel {
  background: var(--cor-branco);
  border: var(--largura-borda) solid var(--cor-borda);
  border-radius: var(--raio-14);
  padding: var(--esp-24);
  display: flex;
  flex-direction: column;
  gap: var(--esp-12);
}

.colunas { display: flex; flex-wrap: wrap; gap: var(--esp-32); align-items: flex-start; }
.coluna { flex: 1 1 var(--largura-coluna); display: flex; flex-direction: column; gap: var(--esp-16); }
.coluna-estreita { flex: 1 1 var(--largura-card-minima); display: flex; flex-direction: column; gap: var(--esp-16); }

.lista-precos { display: flex; flex-wrap: wrap; gap: var(--esp-14); }
.preco {
  border: var(--largura-borda) solid var(--cor-borda);
  border-radius: var(--raio-10);
  padding: var(--esp-16) var(--esp-22);
  display: flex;
  flex-direction: column;
  gap: var(--esp-4);
  flex: 1 1 var(--largura-card-pilar);
}
.preco-valor { font-size: var(--fonte-preco); font-weight: var(--peso-extra); color: var(--cor-verde); line-height: var(--altura-linha-1); }

.lista-pontos { display: flex; flex-direction: column; gap: var(--esp-8); }
.lista-pontos li {
  font-family: var(--fonte-serif);
  font-size: var(--fonte-serif-normal);
  color: var(--cor-texto-2);
  display: flex;
  gap: var(--esp-10);
  align-items: baseline;
}
.ponto { color: var(--cor-verde); font-weight: var(--peso-forte); flex: none; }

.lista-beneficios { display: flex; flex-direction: column; gap: var(--esp-12); }
.card-beneficio {
  background: var(--cor-branco);
  border: var(--largura-borda) solid var(--cor-borda);
  border-radius: var(--raio-12);
  padding: var(--esp-18);
  display: flex;
  flex-direction: column;
  gap: var(--esp-6);
}

.ficha { display: flex; flex-direction: column; gap: var(--esp-10); }
.ficha-linha {
  display: flex;
  justify-content: space-between;
  gap: var(--esp-12);
  border-bottom: var(--largura-borda) solid var(--cor-borda);
  padding-bottom: var(--esp-10);
}
.ficha-linha-ultima { border-bottom: 0; padding-bottom: 0; }
.ficha-chave { font-family: var(--fonte-serif); font-size: var(--fonte-serif-normal); color: var(--cor-texto-3); }
.ficha-valor { font-size: var(--fonte-serif-normal); font-weight: var(--peso-forte); text-align: right; }

.aviso-mockup {
  border: var(--largura-borda) dashed var(--cor-aviso-borda);
  background: var(--cor-aviso-fundo);
  border-radius: var(--raio-12);
  padding: var(--esp-14) var(--esp-18);
  font-size: var(--fonte-ui-pequena);
  line-height: var(--altura-linha-ui);
  color: var(--cor-texto-2);
}

/* ---------- Contato ---------- */
.lista-contato { display: flex; flex-wrap: wrap; gap: var(--esp-18); }
.card-contato {
  flex: 1 1 var(--largura-card-minima);
  background: var(--cor-branco);
  border: var(--largura-borda) solid var(--cor-borda);
  border-radius: var(--raio-14);
  padding: var(--esp-22);
  display: flex;
  flex-direction: column;
  gap: var(--esp-10);
}
.card-contato .texto-card-escuro { flex: 1; }
.card-contato .button-primary, .card-contato .button-suave { align-self: flex-start; width: auto; font-size: var(--fonte-botao-2); }

.formulario { display: flex; flex-direction: column; gap: var(--esp-14); }
.linha-campos { display: flex; flex-wrap: wrap; gap: var(--esp-14); }
.campo { display: flex; flex-direction: column; gap: var(--esp-6); flex: 1 1 var(--largura-card-escuro); min-width: 0; }
.campo-rotulo { font-size: var(--fonte-ui-pequena); font-weight: var(--peso-semi); color: var(--cor-texto); }
.campo input, .campo select, .campo textarea {
  width: 100%;
  min-width: 0;
  font-family: var(--fonte-ui);
  font-size: var(--fonte-botao-2);
  color: var(--cor-texto);
  background: var(--cor-fundo);
  border: var(--largura-borda) solid var(--cor-borda);
  border-radius: var(--raio-10);
  padding: var(--esp-12) var(--esp-14);
  min-height: var(--altura-toque);
}
.campo textarea { resize: vertical; }
.campo-consentimento { display: flex; gap: var(--esp-10); align-items: flex-start; font-size: var(--fonte-ui-pequena); color: var(--cor-texto-3); }
.campo-consentimento input { margin: 0; }

/* Estados do formulário (o script do Homi Leads liga e desliga estas classes) */
.erro-campo { display: none; font-size: var(--fonte-ui-xs); color: var(--cor-erro); line-height: var(--altura-linha-ui); }
.erro-campo.is-visible { display: block; }
.homi-leads-field.is-invalid input,
.homi-leads-field.is-invalid select,
.homi-leads-field.is-invalid textarea { border-color: var(--cor-erro); }

.mensagem-formulario {
  display: none;
  padding: var(--esp-14) var(--esp-18);
  border-radius: var(--raio-10);
  border: var(--largura-borda) solid var(--cor-borda);
  font-size: var(--fonte-ui-pequena);
  line-height: var(--altura-linha-ui);
}
.mensagem-formulario.is-visible { display: block; }
.mensagem-formulario.is-success { background: var(--cor-sucesso-fundo); border-color: var(--cor-verde-borda); color: var(--cor-verde-escuro); }
.mensagem-formulario.is-error { background: var(--cor-erro-fundo); border-color: var(--cor-erro); color: var(--cor-erro); }

.formulario.is-sending .button-primary { opacity: var(--opacidade-separador); cursor: progress; }

/* Campo armadilha para robôs: fica no fluxo, sem altura e sem foco; humanos não veem */
.campo-armadilha { height: var(--altura-zero); overflow: hidden; opacity: var(--altura-zero); pointer-events: none; }

/* ---------- Galeria ---------- */
.galeria { display: flex; flex-wrap: wrap; gap: var(--esp-18); }
.foto-galeria {
  flex: 1 1 var(--largura-card);
  margin: 0;
  background: var(--cor-branco);
  border: var(--largura-borda) solid var(--cor-borda);
  border-radius: var(--raio-14);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.foto-galeria-moldura { height: var(--altura-galeria); display: flex; align-items: center; justify-content: center; padding: var(--esp-16); }
.foto-galeria-moldura picture { display: flex; height: 100%; align-items: center; justify-content: center; }
.foto-galeria-moldura img { max-height: 100%; max-width: 100%; width: auto; height: auto; object-fit: contain; }
.foto-galeria-larga { flex: 1 1 100%; }
.foto-galeria-larga .foto-galeria-moldura { height: auto; padding: 0; }
.foto-galeria-larga img { width: 100%; max-height: none; aspect-ratio: var(--proporcao-foto); object-fit: cover; object-position: var(--posicao-foto); }
.foto-galeria-cheia .foto-galeria-moldura { height: auto; padding: 0; }
.foto-galeria-cheia img { width: 100%; max-height: none; aspect-ratio: var(--proporcao-ambiente); object-fit: cover; }
.foto-galeria figcaption { padding: var(--esp-14) var(--esp-18); display: flex; justify-content: space-between; gap: var(--esp-10); border-top: var(--largura-borda) solid var(--cor-borda); }

/* ---------- Rodapé ---------- */
.rodape { background: var(--cor-escuro); color: var(--cor-escuro-texto); display: flex; flex-direction: column; align-items: center; }

.rodape-colunas {
  width: 100%;
  max-width: var(--largura-max);
  padding: var(--esp-40) var(--esp-20) var(--esp-28);
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-28);
}

.rodape-coluna { flex: 1 1 var(--largura-card-escuro); display: flex; flex-direction: column; gap: var(--esp-6); align-items: flex-start; }
.rodape-coluna img { height: var(--altura-logo-rodape); width: auto; margin-bottom: var(--esp-8); }

.rodape-texto {
  font-family: var(--fonte-serif);
  font-size: var(--fonte-serif-pequena);
  line-height: var(--altura-linha-ui);
  color: var(--cor-escuro-suave);
  max-width: var(--largura-texto-rodape);
}

.rodape-titulo {
  font-size: var(--fonte-ui-xs);
  font-weight: var(--peso-forte);
  letter-spacing: var(--espaco-letra-caps);
  text-transform: uppercase;
  color: var(--cor-amarelo);
  margin-bottom: var(--esp-6);
}

.rodape-link { font-size: var(--fonte-ui-normal); color: var(--cor-escuro-texto); padding-block: var(--esp-6); }
.rodape-link:hover { color: var(--cor-branco); }

.rodape-contato { font-size: var(--fonte-ui-normal); line-height: var(--altura-linha-ui); color: var(--cor-escuro-suave); margin-bottom: var(--esp-4); }

.rodape .button-amarelo { font-size: var(--fonte-ui-normal); font-weight: var(--peso-semi); min-height: var(--altura-toque); padding-block: var(--esp-10); padding-inline: var(--esp-16); border-radius: var(--raio-8); }

.rodape-base { width: 100%; border-top: var(--largura-borda) solid var(--cor-escuro-borda); display: flex; justify-content: center; }
.rodape-base-interno { width: 100%; max-width: var(--largura-max); padding: var(--esp-16) var(--esp-20); font-size: var(--fonte-ui-xs); color: var(--cor-escuro-suave); }

/* =========================================================
   Responsivo · até 859px celular · 860 a 1099 tablet · 1100+ desktop
   ========================================================= */

@media (max-width: 1099px) {
  .card-pilar { flex-basis: calc(50% - var(--esp-14)); }
  .grade-produtos .card-produto { flex-basis: calc(50% - var(--esp-18)); }
  .foto-galeria { flex-basis: calc(50% - var(--esp-18)); }
  .foto-galeria-larga { flex-basis: 100%; }
}

@media (max-width: 859px) {
  body.admin-bar .cabecalho { top: var(--altura-admin-bar-celular); }
  .barra-topo { display: none; }
  .navegacao { display: none; }
  .botao-menu { display: flex; }
  .menu-celular-aberto { display: flex; }

  .hero { flex-direction: column; align-items: stretch; gap: var(--esp-48); padding-top: var(--esp-36); padding-bottom: 0; }
  .hero-texto { text-align: center; align-items: center; padding-bottom: 0; }
  .hero-texto, .hero-imagem { flex: none; }
  .hero-imagem { width: 100%; transform: translateY(var(--deslocamento-potes-celular)); }
  .hero-texto .grupo-botoes { flex-direction: column; align-self: stretch; }
  .hero-texto .grupo-botoes .button-amarelo,
  .hero-texto .grupo-botoes .button-contorno { width: 100%; }
  .barra-topo-separador { display: none; }

  .titulo-secao-grande, .bloco-marca-texto .rotulo-mono, .bloco-marca-texto .texto-pequeno { text-align: center; }
  .bloco-marca-texto { align-items: stretch; }

  .cabecalho-linha { justify-content: center; text-align: center; }
  .container-aplicacoes { text-align: center; }
  .b2b-texto { text-align: center; align-items: center; }
  .b2b-texto .grupo-botoes, .b2b-texto .eyebrow-linha, .estatisticas { justify-content: center; }
  .estat { align-items: center; }

  .card-pilar, .grade-produtos .card-produto, .card-escuro, .foto-galeria, .card-contato { flex-basis: 100%; }

  .rodape-colunas { flex-direction: column; align-items: center; text-align: center; padding-block: var(--esp-32) var(--esp-22); }
  .rodape-coluna { align-items: center; width: 100%; }
  .rodape-coluna .button-amarelo, .rodape-coluna .button-contorno-escuro { width: 100%; min-height: var(--altura-botao); }
  .rodape-link { width: 100%; justify-content: center; display: flex; border-bottom: var(--largura-borda) solid var(--cor-escuro-borda); padding-block: var(--esp-12); }
  .rodape-base-interno { text-align: center; }

  .ficha-linha { flex-direction: column; gap: var(--esp-2); }
  .ficha-valor { text-align: left; }
  .card-contato .button-primary, .card-contato .button-suave { align-self: stretch; }
}