/* ============================================================================
   BegPet — sistema visual v5 ("balcão editorial")
   ----------------------------------------------------------------------------
   A virada em relação à v4: saiu o vidro, o bento, o selo d'água e o cartão
   flutuante; entrou a régua fina, a coluna de rótulo, o índice em linhas e a
   tipografia como estrutura. A página passa a ler como uma ficha impressa de
   distribuidora — papel, tinta, uma cor de marca usada com parcimônia.
   Nenhum seletor foi renomeado: o HTML do gerador e os blocos montados por
   app.js (gondola, pilar, linha-prod, numeros-faixa__item) continuam válidos.
   ========================================================================== */

/* ---------------------------------------------------------------- tokens -- */
:root {
  /* papel e tinta */
  --paper: #FFFFFF;
  --canvas: #FAF8F5;
  --creme: #F2EEE7;
  --ink: #15191B;
  --ink-soft: #2B3336;
  --deep: #0E1416;
  --muted: #5F686D;

  /* réguas */
  --line: #E5E1D9;
  --line-strong: #CCC6BA;

  /* marca (o laranja é SUPERFÍCIE; texto pequeno usa --brand-ink) */
  --brand: #FF940B;
  --brand-600: #E9830B;
  --brand-ink: #A95203;
  --brand-wash: #FFF3E0;
  --on-brand: #24180A;
  --accent: var(--brand-600);
  --erro: #B3261E;

  /* geometria */
  --altura-cabecalho: 68px;
  --r-xs: 3px;
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 10px;
  --curva: cubic-bezier(.2, .6, .3, 1);
  --sombra-suave: 0 1px 2px rgba(16, 20, 22, .05), 0 10px 24px -14px rgba(16, 20, 22, .25);
  --sombra-alta: 0 2px 6px rgba(16, 20, 22, .06), 0 28px 48px -26px rgba(16, 20, 22, .35);

  /* escala tipográfica */
  --t-2xs: 11px;
  --t-xs: 12px;
  --t-sm: 13.5px;
  --t-base: 15.5px;
  --t-md: 17px;
  --t-lg: 20px;
  --t-2xl: 28px;
  --t-3xl: 36px;
  --t-4xl: 48px;
  --medida: 68ch;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--altura-cabecalho) + 18px);
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) var(--canvas);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: var(--t-base);
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, svg, iframe { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button { font: inherit; }

h1, h2, h3, h4 {
  margin: 0;
  font-family: Manrope, Inter, system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: -.028em;
  line-height: 1.06;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

::selection { background: var(--brand); color: var(--on-brand); }

:focus-visible {
  outline: 2px solid var(--brand-600);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

/* ------------------------------------------------------------- tipografia -- */
.display-1 {
  font-size: clamp(2.25rem, 5.4vw, 4.4rem);
  font-weight: 600;
  letter-spacing: -.038em;
  line-height: .99;
}

.display-2 {
  font-size: clamp(1.65rem, 3vw, 2.6rem);
  font-weight: 600;
  letter-spacing: -.032em;
  line-height: 1.06;
}

.display-3 {
  font-size: clamp(1.25rem, 1.8vw, 1.6rem);
  font-weight: 600;
  letter-spacing: -.022em;
  line-height: 1.18;
}

/* rótulo de seção: caixa alta pequena, régua curta */
.olho {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin: 0;
  font-family: Inter, sans-serif;
  font-size: var(--t-2xs);
  font-weight: 600;
  letter-spacing: .155em;
  text-transform: uppercase;
  color: var(--brand-ink);
  line-height: 1.3;
}

.olho::before {
  content: "";
  flex: none;
  width: 18px;
  height: 1px;
  background: var(--brand);
}

.olho--claro { color: #F3C48C; }
.olho--claro::before { background: rgba(255, 148, 11, .8); }

.num {
  font-family: Manrope, Inter, sans-serif;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: -.03em;
}

.prose { color: var(--ink-soft); max-width: var(--medida); }
.prose p { font-size: var(--t-base); line-height: 1.72; }
.prose p + p { margin-top: 1em; }
.prose strong { color: var(--ink); font-weight: 600; }

.ico { width: 20px; height: 20px; flex: none; }
.ico--g { width: 21px; height: 21px; }
.ico--gg { width: 26px; height: 26px; }

.caixa-ico {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: none;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--paper);
  color: var(--brand-ink);
}

/* ---------------------------------------------------------------- layout -- */
.caixa {
  width: 100%;
  max-width: 1264px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 44px);
}

.secao { padding: clamp(64px, 8vw, 104px) 0; }
.secao--papel { background: var(--paper); }
.secao--creme { background: var(--canvas); }
.secao--tinta { background: var(--deep); color: #fff; }

.recuo-topo { padding-top: 0; }
.recuo-topo > section:first-child { padding-top: clamp(56px, 7vw, 88px); }

/* ---------------------------------------------------------------- botões -- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  height: 46px;
  padding: 0 1.35rem;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .005em;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background .18s var(--curva), border-color .18s var(--curva),
              color .18s var(--curva), transform .18s var(--curva);
}

.btn:active { transform: translateY(1px); }
.btn .ico { width: 17px; height: 17px; }
.btn--sm { height: 38px; padding: 0 .95rem; font-size: 13px; }
.btn--lg { height: 50px; padding: 0 1.6rem; font-size: 14.5px; }

.btn--brand { background: var(--brand); color: var(--on-brand); }
.btn--brand:hover { background: var(--brand-600); }

.btn--tinta { background: var(--ink); color: #fff; }
.btn--tinta:hover { background: #000; }

.btn--linha { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn--linha:hover { border-color: var(--ink); background: rgba(21, 25, 27, .03); }

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

.btn--vidro { background: rgba(255, 255, 255, .08); color: #fff; border-color: rgba(255, 255, 255, .44); }
.btn--vidro:hover { background: rgba(255, 255, 255, .16); border-color: #fff; }

.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* link com seta: sublinhado fino, seta que anda */
.link-seta {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--line-strong);
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: border-color .2s var(--curva), color .2s var(--curva);
}

.link-seta .ico { width: 15px; height: 15px; transition: transform .25s var(--curva); }
.link-seta:hover { border-color: var(--brand); color: var(--brand-ink); }
.link-seta:hover .ico { transform: translateX(3px); }
.link-seta--claro { color: rgba(255, 255, 255, .92); border-color: rgba(255, 255, 255, .4); }
.link-seta--claro:hover { color: #fff; border-color: var(--brand); }

/* ------------------------------------------------------------- progresso -- */
.progresso {
  position: fixed;
  inset: 0 0 auto 0;
  height: 2px;
  z-index: 120;
  pointer-events: none;
}

.progresso span {
  display: block;
  height: 100%;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: left center;
}

/* -------------------------------------------------------------- cabeçalho -- */
.cabecalho {
  position: sticky;
  top: 0;
  z-index: 90;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

.cabecalho__barra {
  display: flex;
  align-items: center;
  gap: clamp(.75rem, 2vw, 1.75rem);
  height: var(--altura-cabecalho);
}

.cabecalho__logo { display: inline-flex; align-items: center; flex: none; }
.cabecalho__logo img { height: 36px; width: auto; }

.nav-principal {
  display: none;
  align-items: center;
  gap: clamp(1rem, 2vw, 1.9rem);
  font-size: 14px;
  font-weight: 500;
}

.nav-principal a {
  position: relative;
  padding: 6px 0;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color .18s var(--curva);
}

.nav-principal a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .28s var(--curva);
}

.nav-principal a:hover { color: var(--ink); }
.nav-principal a:hover::after,
.nav-principal a[aria-current="page"]::after { transform: scaleX(1); }
.nav-principal a[aria-current="page"] { color: var(--ink); font-weight: 600; }

.cabecalho__acoes {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-left: auto;
}

.cabecalho__acesso {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  height: 38px;
  padding: 0 .9rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color .18s var(--curva), background .18s var(--curva);
}

.cabecalho__acesso .ico { width: 16px; height: 16px; color: var(--brand-ink); }
.cabecalho__acesso:hover { border-color: var(--ink); background: var(--canvas); }

.botao-menu {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  transition: border-color .18s var(--curva);
}

.botao-menu:hover { border-color: var(--line-strong); }

/* menu do celular */
.menu-mobile {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--sombra-alta);
  max-height: calc(100vh - var(--altura-cabecalho));
  overflow: auto;
}

.menu-mobile[hidden] { display: none; }

.menu-mobile a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 52px;
  padding: .85rem 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-family: Manrope, Inter, sans-serif;
  font-size: 17px;
  font-weight: 500;
  text-decoration: none;
}

.menu-mobile a .ico { width: 16px; height: 16px; color: var(--muted); }
.menu-mobile a[aria-current="page"] { color: var(--brand-ink); }

@media (min-width: 1080px) {
  .nav-principal { display: flex; margin-left: auto; }
  /* sem o botão de acesso, a caixa de ações fica vazia: fora do fluxo, senão o
     `gap` da barra deixa 28px de sobra e o menu não encosta na direita */
  .cabecalho__acoes { display: none; }
}

@media (max-width: 479px) {
  .cabecalho__acesso-rotulo { display: none; }
  .cabecalho__acesso { width: 40px; padding: 0; justify-content: center; }
}

/* --------------------------------------------------------------- abertura -- */
.abertura {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  min-height: min(82vh, 660px);
  padding: calc(var(--altura-cabecalho) + 72px) 0 0;
  background: var(--deep);
  color: #fff;
}

.abertura__foto { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
/* foto direta dentro da camada (heróis sem carrossel) precisa cobrir a caixa:
   sem isso o navegador desenha no tamanho natural e o corte é o canto superior */
.abertura__foto > img { width: 100%; height: 100%; object-fit: cover; }

.abertura__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1s var(--curva);
}

.abertura__slide.esta-visivel { opacity: 1; }
.abertura__slide img { width: 100%; height: 100%; object-fit: cover; }

.abertura__veu {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(8, 12, 13, .58) 0%, rgba(8, 12, 13, .12) 34%, rgba(8, 12, 13, .88) 100%),
    linear-gradient(92deg, rgba(8, 12, 13, .78) 0%, rgba(8, 12, 13, .32) 52%, rgba(8, 12, 13, 0) 100%);
}

.abertura__conteudo { position: relative; z-index: 2; width: 100%; }

.hero-texto { max-width: 780px; padding-bottom: clamp(2.5rem, 5vw, 3.5rem); }

.abertura__marca {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin: 0;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  /* branco cheio: com a foto clara do hero o .84 caía para ~3,2:1 no pior pixel */
  color: #fff;
}

.abertura__linha {
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #fff;
}

.abertura__traco { flex: none; width: 34px; height: 1px; background: var(--brand); }

.abertura__titulo { margin-top: 1.35rem; color: #fff; max-width: 24ch; }

.abertura__apoio {
  margin-top: 1.35rem;
  max-width: 54ch;
  font-size: clamp(15px, 1.2vw, 16.5px);
  font-weight: 300;
  line-height: 1.62;
  color: rgba(255, 255, 255, .8);
}

.abertura__acoes { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: clamp(1.6rem, 3vw, 2.25rem); }

/* a palavra destacada: régua sólida da marca, sem rabisco */
.marca { position: relative; white-space: nowrap; }
.marca__risco {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -.08em;
  height: 3px;
  background: var(--brand);
  transform-origin: left center;
}

/* índice de atalhos na base da abertura */
.hero-indice {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid rgba(255, 255, 255, .22);
}

.hero-indice__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "rotulo seta" "valor seta";
  align-items: center;
  gap: .1rem 1rem;
  padding: 1.15rem clamp(.75rem, 2vw, 1.6rem) 1.35rem;
  border-left: 1px solid rgba(255, 255, 255, .22);
  color: #fff;
  text-decoration: none;
  transition: background .22s var(--curva);
}

.hero-indice__item:first-child { border-left: 0; padding-left: 0; }
.hero-indice__item:hover { background: rgba(255, 255, 255, .07); }

.hero-indice__rotulo {
  grid-area: rotulo;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .62);
}

.hero-indice__valor {
  grid-area: valor;
  font-family: Manrope, Inter, sans-serif;
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: -.01em;
  color: #fff;
}

.hero-indice__seta { grid-area: seta; color: rgba(255, 255, 255, .72); }
.hero-indice__seta .ico { width: 17px; height: 17px; }
.hero-indice__item:hover .hero-indice__seta { color: var(--brand); }

/* controles do carrossel: réguas curtas no alto da foto */
.abertura__pontos {
  position: absolute;
  z-index: 3;
  top: calc(var(--altura-cabecalho) + 26px);
  right: clamp(20px, 4vw, 44px);
  display: flex;
  gap: .4rem;
}

.abertura__ponto {
  position: relative;
  width: 30px;
  height: 34px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.abertura__ponto::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, .42);
  transition: background .25s var(--curva);
}

.abertura__ponto:hover::before { background: rgba(255, 255, 255, .8); }
.abertura__ponto.esta-ativo::before { background: var(--brand); }

/* interna com foto */
.abertura--curta { min-height: min(60vh, 560px); }

/* contato: texto centralizado na vertical (o header é sticky no fluxo, então o
   padding pode ser simétrico — é ele que garante o centro real da seção) */
.abertura--centrada {
  align-items: center;
  padding-top: clamp(48px, 7vh, 88px);
  padding-bottom: clamp(48px, 7vh, 88px);
}

/* quem somos: abertura em TINTA — sem foto (a pedido), o peso vem do tipo e do
   índice da própria página na base da seção */
.abertura--quem {
  min-height: min(56vh, 660px);
  padding: 81px;
  background: var(--deep);
}

/* duas classes: o `@media (max-width: 760px)` de `.abertura` (min-height 90vh/700px)
   vem depois no arquivo e venceria o empate de especificidade */
.abertura.abertura--quem { min-height: min(56vh, 660px); }

/* o padding lateral de 81px somava ao gutter do `.caixa` e jogava o conteúdo 81px
   para dentro em relação às seções de baixo; abaixo de 1426px o caixa ocupa a
   largura toda e devolve o padding nas laterais (acima disso ele já é max-width
   e centralizado, então alinha sozinho). */
@media (max-width: 1425px) {
  .abertura--quem .caixa { max-width: none; margin-left: -81px; margin-right: -81px; }
}

.abertura--quem .hero-texto { padding-bottom: clamp(2.25rem, 4vw, 3rem); }
.abertura--quem .abertura__titulo { max-width: 20ch; }

.hero-indice--quem { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* o índice da página virou faixa de NÚMEROS: o valor grande é o número, o
   rótulo pequeno embaixo explica */
.hero-indice--quem .hero-indice__item {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "rotulo" "valor";
  align-content: start;
  gap: .35rem;
  padding: 1.35rem clamp(.75rem, 2vw, 1.6rem) 1.45rem;
}

.hero-indice--quem .hero-indice__rotulo {
  font-family: Manrope, Inter, sans-serif;
  font-size: clamp(1.45rem, 2.1vw, 2rem);
  font-weight: 600;
  letter-spacing: -.03em;
  text-transform: none;
  line-height: 1;
  color: #fff;
}

.hero-indice--quem .hero-indice__valor {
  font-family: Inter, sans-serif;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .05em;
  line-height: 1.35;
  color: rgba(255, 255, 255, .72);
}

@media (min-width: 1024px) {
  .hero-indice--quem { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* interna sem foto: folha de papel, não painel escuro */
.abertura--sem-foto {
  display: block;
  min-height: 0;
  padding: calc(var(--altura-cabecalho) + clamp(64px, 8vw, 104px)) 0 clamp(56px, 7vw, 84px);
  background: var(--canvas);
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}

.abertura--sem-foto .abertura__conteudo { padding-bottom: 0; }
.abertura--sem-foto .abertura__marca { color: var(--muted); }
.abertura--sem-foto .abertura__titulo { color: var(--ink); max-width: 21ch; }
.abertura--sem-foto .abertura__apoio { color: var(--muted); font-weight: 400; }

@media (max-width: 760px) {
  .abertura { min-height: min(86vh, 620px); }
  .abertura--curta { min-height: min(64vh, 480px); }
  .abertura--sem-foto { min-height: 0; }
  .hero-indice__valor { display: none; }
  .hero-indice__item { padding: .95rem 0 .95rem .75rem; }
}

@media (max-width: 560px) {
  .abertura__pontos { display: none; }
  .abertura__titulo { max-width: none; }
}

/* ------------------------------------------------------ faixa em movimento -- */
/* fora do uso desde a v5 (a home abre no hero e vai direto ao sortimento);
   fica pronta caso o cliente queira a faixa de volta */
.faixa-rolante {
  overflow: hidden;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  background: var(--canvas);
}

.faixa-rolante__trilha { display: flex; gap: 2.5rem; width: max-content; will-change: transform; }

.faixa-rolante__item {
  position: relative;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

.faixa-rolante__item::after {
  content: "";
  position: absolute;
  right: -1.4rem;
  top: 50%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--brand);
}

/* ------------------------------------------------------- cabeça de seção -- */
.cabeca-secao {
  display: grid;
  gap: 1rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
  margin-bottom: clamp(2.25rem, 4vw, 3.5rem);
}

.cabeca-secao h2 { max-width: 26ch; }
.cabeca-secao__apoio { font-size: 15px; line-height: 1.7; color: var(--muted); max-width: 40ch; }

/* apoio da seção de espécies em peso fino (Inter 300, já importado) */
.secao--especies .cabeca-secao__apoio { font-weight: 300; }

/* sem o fio no topo do cabeçalho de espécies (a pedido) */
.secao--especies .cabeca-secao { border-top: 0; }

/* apoio dos compromissos também em peso fino */
.secao--compromissos .cabeca-secao__apoio { font-weight: 300; }

/* variante: título encostado no canto esquerdo da caixa (rótulo sobe uma linha
   e fica na MESMA coluna), com o apoio ainda na coluna da direita */
.cabeca-secao--ponta { row-gap: .55rem; }

@media (min-width: 900px) {
  .cabeca-secao {
    grid-template-columns: 186px minmax(0, 1fr) minmax(0, 320px);
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: start;
  }

  .cabeca-secao__apoio { padding-top: .3rem; }

  .cabeca-secao--ponta { grid-template-columns: minmax(0, 1fr) minmax(0, 320px); row-gap: .35rem; }
  .cabeca-secao--ponta .olho { grid-column: 1; grid-row: 1; }
  .cabeca-secao--ponta h2 { grid-column: 1; grid-row: 2; }
  .cabeca-secao--ponta .cabeca-secao__apoio { grid-column: 2; grid-row: 2; padding-top: .55rem; }
}

/* -------------------------------------------------------------- espécies -- */
/* prateleira de espécies: foto em pé, nome e o que mais sai embaixo do fio —
   sete colunas quando cabe, quatro/durante o meio, duas no celular */
.indice-especies {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: clamp(1.5rem, 3vw, 2.25rem) clamp(.85rem, 1.6vw, 1.35rem);
}

.gondola {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 0;
  color: var(--ink);
  text-decoration: none;
}

.gondola img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--r-sm);
  clip-path: inset(0 round 4px);
  transition: transform .5s var(--curva), filter .5s var(--curva);
}

.gondola__veu { display: none; }

.gondola__rodape {
  display: grid;
  gap: .2rem;
  min-width: 0;
  margin-top: .85rem;
  padding-top: .7rem;
  border-top: 1px solid var(--line);
}

.gondola__nome {
  font-family: Manrope, Inter, sans-serif;
  font-size: clamp(1rem, 1.15vw, 1.15rem);
  font-weight: 600;
  letter-spacing: -.02em;
  transition: color .2s var(--curva);
}

.gondola__desc { font-size: 12.5px; line-height: 1.5; color: var(--muted); }

.gondola__conta { display: none; }

.gondola:hover .gondola__nome { color: var(--brand-ink); }
.gondola:hover img { transform: scale(1.035); }

/* ----------------------------------------------------------------- sobre -- */
.sobre-grade { display: grid; gap: clamp(2rem, 4vw, 3.25rem); }

.sobre-foto { margin: 0; }
/* a foto entra na proporção natural do arquivo: sem caixa fixa e sem corte */
.sobre-foto img { width: 100%; height: auto; border-radius: var(--r-md); }

.sobre-foto figcaption {
  margin-top: .8rem;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--muted);
}

.sobre-texto h2 { margin-top: 1rem; max-width: 24ch; }

.citacao {
  margin-top: 1.5rem;
  padding-top: 1.35rem;
  border-top: 1px solid var(--line);
  max-width: 32ch;
  font-family: Manrope, Inter, sans-serif;
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -.02em;
  color: var(--ink);
}

.sobre-texto .prose { margin-top: 1.5rem; }
.sobre-texto .link-seta,
.sobre-texto .btn { margin-top: 1.75rem; }

.sobre-fatos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  border-top: 1px solid var(--line);
}

.sobre-fatos li { padding: 1rem 0; border-bottom: 1px solid var(--line); }

.sobre-fato__rotulo {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--muted);
}

.sobre-fato__valor {
  display: block;
  margin-top: .3rem;
  font-family: Manrope, Inter, sans-serif;
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--ink);
}

@media (min-width: 900px) {
  .sobre-grade {
    grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
    column-gap: clamp(2rem, 4vw, 3.5rem);
    row-gap: 2.5rem;
  }

  .sobre-foto { grid-column: 1; grid-row: 1 / span 2; align-self: start; }
  .sobre-texto { grid-column: 2; grid-row: 1; }
  .sobre-fatos { grid-column: 2; grid-row: 2; grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .sobre-fatos li {
    padding: 1rem 1.15rem 0;
    border-bottom: 0;
    border-left: 1px solid var(--line);
  }

  .sobre-fatos li:first-child { padding-left: 0; border-left: 0; }
  .sobre-fatos li:last-child { padding-right: 0; }

  .sobre-grade--invertida .sobre-foto { grid-column: 2; }
  .sobre-grade--invertida .sobre-texto,
  .sobre-grade--invertida .sobre-fatos { grid-column: 1; }
}

/* ---------------------------------------------------------- história (quem) -- */
/* texto em três tempos (abertura, corpo, fecho) e duas fotos: a de retrato com
   a do depósito encaixada por cima, como numa página de revista */
.historia { display: grid; gap: clamp(2rem, 4vw, 3.5rem); }
.historia__texto { display: grid; gap: 1.1rem; align-content: start; }

.historia__texto h2 {
  margin-top: .35rem;
  max-width: 18ch;
  font-size: clamp(1.9rem, 3.2vw, 2.7rem);
}

.historia__lead { max-width: 46ch; font-size: clamp(17px, 1.5vw, 19.5px); line-height: 1.55; color: var(--ink); }
.historia__prose { display: grid; gap: 1em; max-width: 62ch; }
.historia__prose p { font-size: 15.5px; line-height: 1.75; font-weight: 300; color: var(--ink-soft); }

.historia__fecho {
  margin-top: .6rem;
  padding-top: 1.15rem;
  border-top: 1px solid var(--line);
  max-width: 42ch;
  font-family: Manrope, Inter, sans-serif;
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -.02em;
  color: var(--ink);
}

.historia__fotos { position: relative; display: grid; gap: 1rem; }
.historia__foto { margin: 0; overflow: hidden; border-radius: var(--r-md); }
.historia__foto img { width: 100%; height: 100%; }

.historia__foto--secundaria {
  width: 62%;
  margin-left: auto;
  margin-top: -22%;
  position: relative;
  z-index: 2;
  border: 6px solid var(--paper);
  border-radius: calc(var(--r-md) + 4px);
}

.historia__foto--secundaria img { aspect-ratio: 4 / 3; }

/* uma foto ao lado do texto (a colagem de duas saiu); no celular empilha */
@media (min-width: 900px) {
  .historia {
    grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
    align-items: start;
    column-gap: clamp(2.5rem, 4vw, 4rem);
  }
}

/* ------------------------------------------------------- linhas de produto -- */
.linhas-grade { display: grid; gap: clamp(2rem, 4vw, 3.25rem); }
.linhas-lista { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }

.linha-prod {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: baseline;
  gap: 1rem;
  padding: 1.05rem 0;
  border-bottom: 1px solid var(--line);
  transition: padding-left .28s var(--curva), background .2s var(--curva);
}

.linha-prod__barra {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--brand);
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform .28s var(--curva);
}

.linha-prod__nome {
  font-family: Manrope, Inter, sans-serif;
  font-size: clamp(1.02rem, 1.6vw, 1.28rem);
  font-weight: 500;
  letter-spacing: -.018em;
  color: var(--ink);
  transition: color .2s var(--curva);
}

.linha-prod__conta { display: flex; align-items: baseline; gap: .35rem; font-size: 12px; color: var(--muted); white-space: nowrap; }
.linha-prod__conta .num { font-size: clamp(1rem, 1.3vw, 1.15rem); font-weight: 600; color: var(--ink); }

.linha-prod:hover { padding-left: 1.1rem; }
.linha-prod:hover .linha-prod__barra { transform: scaleY(1); }
.linha-prod:hover .linha-prod__nome { color: var(--brand-ink); }

.linhas-lado { display: flex; flex-direction: column; gap: 1.25rem; }
.linhas-foto { margin: 0; }

.linhas-foto img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--r-md);
}

.linhas-foto figcaption {
  margin-top: .8rem;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--muted);
}

@media (min-width: 900px) {
  .linhas-grade { grid-template-columns: minmax(0, 1.32fr) minmax(0, .68fr); }
  .linhas-lado { position: sticky; top: calc(var(--altura-cabecalho) + 28px); }
}

/* prévia que segue o mouse */
.previa {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 70;
  width: 208px;
  overflow: hidden;
  border-radius: var(--r-sm);
  box-shadow: var(--sombra-alta);
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.previa img { width: 100%; height: 260px; object-fit: cover; }

/* ----------------------------------------------------------- compromissos -- */
.secao--compromissos { background: var(--canvas); }

.pilares { display: grid; border-top: 1px solid var(--line); }

.pilar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "indice ico" "titulo titulo" "texto texto";
  align-items: center;
  gap: .35rem .9rem;
  padding: 1.6rem 0;
  border-bottom: 1px solid var(--line);
}

.pilar__indice {
  grid-area: indice;
  font-family: Manrope, Inter, sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--brand-ink);
}

.pilar .caixa-ico {
  grid-area: ico;
  justify-self: end;
  width: 34px;
  height: 34px;
  border: 0;
  background: none;
  padding: 0;
  color: var(--brand-ink);
}

.pilar h3 { grid-area: titulo; margin-top: .5rem; font-size: clamp(1.02rem, 1.4vw, 1.16rem); font-weight: 600; }
.pilar p { grid-area: texto; font-size: 14.5px; line-height: 1.66; color: var(--muted); max-width: 36ch; }

@media (min-width: 900px) {
  .pilares { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(1.5rem, 3.5vw, 3rem); }

  .pilar {
    border-bottom: 0;
    border-left: 1px solid var(--line);
    padding: 1.5rem 0 0 clamp(1.25rem, 2.4vw, 2rem);
  }

  .pilar:first-child { border-left: 0; padding-left: 0; }
}

/* ---------------------------------------------------------------- números -- */
.secao--numeros { background: var(--deep); color: #fff; border-top: 2px solid var(--brand); }
.ficha-grade { display: grid; gap: clamp(2.25rem, 4vw, 3.5rem); }
.ficha-texto .display-2 { margin-top: 1.1rem; color: #fff; max-width: 20ch; }

.ficha-apoio {
  margin-top: 1.25rem;
  max-width: 42ch;
  font-size: 15px;
  line-height: 1.7;
  color: rgba(255, 255, 255, .72);
}

.ficha-apoio strong { color: #fff; font-weight: 600; }
.ficha-texto .btn { margin-top: 2rem; }

.numeros-faixa {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid rgba(255, 255, 255, .18);
  border-left: 1px solid rgba(255, 255, 255, .18);
}

.numeros-faixa__item {
  padding: clamp(1.2rem, 2.4vw, 1.9rem);
  border-right: 1px solid rgba(255, 255, 255, .18);
  border-bottom: 1px solid rgba(255, 255, 255, .18);
}

.numeros-faixa__item .num {
  display: block;
  font-size: clamp(1.9rem, 3vw, 2.8rem);
  font-weight: 600;
  line-height: 1;
  color: #fff;
}

.numeros-faixa__item p {
  margin-top: .6rem;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .05em;
  line-height: 1.45;
  color: rgba(255, 255, 255, .66);
}

@media (min-width: 700px) {
  .ficha-grade { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; column-gap: clamp(2rem, 4vw, 4rem); }
}

/* ----------------------------------------------------------------- chamada -- */
/* Fecho da página: painel de foto à esquerda (altura do próprio texto) e a
   proposta à direita, sobre papel branco, com o fio da marca selando a seção
   que vem depois da faixa tinta dos números. */
.chamada {
  position: relative;
  overflow: hidden;
  padding: clamp(3.5rem, 7vw, 6rem) 0;
  background: var(--paper);
  border-top: 2px solid var(--brand);
}

.chamada__interno {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: stretch;
}

.chamada__foto {
  order: 2;
  margin: 0;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--creme);
}

.chamada__foto img {
  width: 100%;
  height: 100%;
  min-height: 240px;
  object-fit: cover;
}

.chamada__veu { display: none; }

.chamada__cartao {
  order: 1;
  display: grid;
  gap: 1.2rem;
  align-content: center;
}

.chamada__cartao .display-2 {
  max-width: 21ch;
  font-size: clamp(1.7rem, 2.5vw, 2.35rem);
  color: var(--ink);
}

.chamada__texto { max-width: 46ch; font-size: var(--t-base); line-height: 1.7; color: var(--muted); }
.chamada__acoes { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: .35rem; }

.chamada__contatos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: .5rem 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.chamada__contatos li {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: 1.05rem 0;
  font-size: 14px;
  color: var(--muted);
}

.chamada__contatos li + li { border-left: 1px solid var(--line); padding-left: 1.25rem; }
.chamada__contatos .ico { width: 17px; height: 17px; color: var(--brand-ink); }
.chamada__contatos a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line-strong); }
.chamada__contatos a:hover { border-color: var(--brand); color: var(--brand-ink); }

@media (min-width: 901px) {
  .chamada__interno { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); }
  .chamada__foto { order: 0; min-height: 380px; }

  .chamada__cartao {
    border-left: 1px solid var(--line);
    padding-left: clamp(1.75rem, 3vw, 3rem);
  }
}

@media (max-width: 520px) {
  .chamada__contatos { grid-template-columns: minmax(0, 1fr); }
  .chamada__contatos li + li { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); }
}

/* ------------------------------------------------------------------ blog -- */
/* índice: um destaque em duas colunas + o resto em LINHAS (a mesma linguagem do
   sortimento e do romaneio — nada de grade de cartões iguais) */
.blog-destaque {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem);
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
  border-top: 1px solid var(--line);
  margin-bottom: clamp(3rem, 6vw, 4.75rem);
}

.blog-destaque__texto { display: grid; gap: 1rem; align-content: center; }

.blog-destaque__titulo {
  font-size: clamp(1.7rem, 3.15vw, 2.75rem);
  max-width: 22ch;
  letter-spacing: -.034em;
  line-height: 1.05;
}

.blog-destaque__titulo a { color: inherit; text-decoration: none; transition: color .2s var(--curva); }
.blog-destaque__titulo a:hover { color: var(--brand-ink); }
.blog-destaque__resumo { max-width: 48ch; font-size: 16px; line-height: 1.7; color: var(--muted); }

.blog-destaque__meta {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted);
}

.blog-destaque__acao { justify-self: start; margin-top: .35rem; }

.blog-destaque__foto {
  display: block;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--creme);
}

.blog-destaque__foto img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform .6s var(--curva);
}

.blog-destaque__foto:hover img { transform: scale(1.03); }

@media (min-width: 900px) {
  .blog-destaque { grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr); align-items: center; }
}

/* o destaque encosta no cabeçalho da página: o vão de 104px dobrava o respiro */
/* 50px de padding vertical. Nas laterais fica 0 de propósito: o padding
   horizontal somava ao gutter do `.caixa` e jogava o título para dentro do
   resto da página (desvio de 3 a 50px conforme a largura) — o respiro lateral
   quem dá é o próprio `.caixa`. */
.abertura--blog { padding: 30px 0; border-bottom: 0; background: var(--paper); }
/* fundo branco a pedido; o hover da linha acende no creme para continuar visível */
.secao--blog { padding-top: clamp(40px, 5vw, 64px); background: #fff; }

/* cabeçalho do blog: título de capa à esquerda e o índice de temas à direita */
.abertura--blog .abertura__titulo { font-size: clamp(3rem, 7.5vw, 5.4rem); }
.blog-cabeca { display: grid; gap: clamp(2rem, 4vw, 3.5rem); }
.blog-cabeca__texto { display: grid; gap: 1.25rem; align-content: end; }
.blog-cabeca__texto .abertura__apoio { margin-top: 0; }

.blog-cabeca__temas { font-size: 13px; }

.blog-cabeca__rotulo {
  margin: 0 0 .75rem;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--muted);
}

.blog-cabeca__temas ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }

.blog-cabeca__temas li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: .6rem 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink-soft);
}

.blog-cabeca__temas li .num { font-size: 12px; font-weight: 600; color: var(--brand-ink); }
.blog-cabeca__temas .blog-cabeca__total { color: var(--ink); font-weight: 600; }
.blog-cabeca__temas .blog-cabeca__total .num { color: var(--ink); }

/* o índice de temas saiu do hero a pedido: o cabeçalho é só título + apoio
   (as regras de .blog-cabeca__temas ficaram como caminho de volta) */

.blog-lista__rotulo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin: 0;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--muted);
}

.blog-lista__conta { font-family: Manrope, Inter, sans-serif; letter-spacing: 0; color: var(--ink); }
.blog-lista { list-style: none; margin: 0; padding: 0; }

.blog-filtro {
  margin: 0 0 clamp(1.25rem, 2.5vw, 1.75rem);
  font-size: 13px;
  color: var(--ink-soft);
}

.blog-filtro strong { font-weight: 600; color: var(--ink); }
.blog-filtro a { color: var(--brand-ink); text-decoration: underline; text-underline-offset: 3px; }

.blog-mais { display: flex; justify-content: center; margin-top: clamp(1.75rem, 3vw, 2.5rem); }
.blog-mais[hidden] { display: none; }
.blog-mais .btn { min-width: 200px; }

.blog-mais__conta {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 .35rem;
  margin-left: .15rem;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
}

.blog-item__link {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  align-items: start;
  gap: 1.15rem;
  margin: 0 -1rem;
  padding: 1.4rem 1rem;
  border-bottom: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--ink);
  text-decoration: none;
  transition: background .2s var(--curva);
}

/* fundo branco: o hover acende a linha no creme */
.blog-item__link:hover { background: var(--canvas); }

/* sem coluna de categoria/data: a imagem fica à esquerda e a data desce para
   baixo do resumo, em corpo menor e mais fino */
.blog-item__data {
  margin-top: .15rem;
  font-size: 11px;
  font-weight: 300;
  letter-spacing: .04em;
  color: var(--muted);
}

.blog-item__corpo { display: grid; gap: .3rem; min-width: 0; }

.blog-item__titulo {
  font-family: Manrope, Inter, sans-serif;
  font-size: clamp(1.1rem, 1.7vw, 1.4rem);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.26;
  transition: color .2s var(--curva);
}

.blog-item__resumo { font-size: 13.5px; line-height: 1.6; color: var(--muted); max-width: 68ch; }

.blog-item__thumb {
  width: 112px;
  height: 84px;
  object-fit: cover;
  clip-path: inset(0 round 4px);
  transition: transform .5s var(--curva);
}

.blog-item__link:hover .blog-item__titulo { color: var(--brand-ink); }
.blog-item__link:hover .blog-item__thumb { transform: scale(1.05); }

@media (min-width: 820px) {
  .blog-item__link { grid-template-columns: 224px minmax(0, 1fr); gap: 2rem; align-items: center; }
  .blog-item__thumb { width: 224px; height: 150px; }
}

/* artigo */
.artigo { padding-bottom: clamp(3rem, 6vw, 5rem); }

.artigo__cabeca {
  display: grid;
  gap: 1.1rem;
  padding-top: clamp(36px, 5vw, 60px);
  padding-bottom: clamp(1.75rem, 3vw, 2.5rem);
}

.artigo__trilha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .55rem;
  margin: 0;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

.artigo__trilha a { color: var(--muted); text-decoration: none; border-bottom: 1px solid transparent; }
.artigo__trilha a:hover { color: var(--brand-ink); border-color: var(--brand); }
.artigo__trilha span[aria-hidden] { color: var(--line-strong); }
.artigo__trilha span:last-child { color: var(--brand-ink); }

.artigo__titulo {
  font-size: clamp(2rem, 3.9vw, 3.25rem);
  font-weight: 800;
  letter-spacing: -.038em;
  line-height: 1.03;
  /* o `text-wrap: balance` do h1 base reparte as linhas no meio: aqui o título
     só quebra quando chega no fim da coluna */
  text-wrap: wrap;
}

.artigo__resumo { font-size: clamp(15.5px, 1.4vw, 18px); line-height: 1.6; color: var(--muted); }

.artigo__assinatura {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .55rem;
  margin-top: .35rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}

.artigo__assinatura span[aria-hidden] { color: var(--line-strong); }

/* capa + menu de categorias lado a lado; o menu ocupa a mesma coluna do
   sumário lá embaixo (262px), então as duas colunas ficam alinhadas */
.artigo__capa { display: grid; gap: 1.5rem; align-items: start; }

.artigo__temas {
  padding: 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--canvas);
}

.artigo__temas ul { list-style: none; margin: 0; padding: 0; }

.artigo__temas a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  padding: .55rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color .2s var(--curva);
}

.artigo__temas li:last-child a { border-bottom: 0; padding-bottom: 0; }
.artigo__temas a:hover { color: var(--brand-ink); }
.artigo__temas a[aria-current] { color: var(--brand-ink); font-weight: 600; }

.artigo__temas .num {
  font-family: Manrope, Inter, sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
}

.artigo__temas a[aria-current] .num { color: var(--brand-ink); }

@media (min-width: 1024px) {
  .artigo__capa { grid-template-columns: minmax(0, 1fr) 262px; gap: 2rem; }
  /* o `margin: 0 auto` de `.artigo__foto` vira margem automática no item de
     grade e a figura NÃO estica (encolhia para 467px); aqui a foto ocupa a
     coluna inteira e a altura fica fixa em 350px */
  .artigo__capa .artigo__foto { margin: 0; }
  .artigo__capa .artigo__foto img { width: 100%; height: 350px; aspect-ratio: auto; }
}

.artigo__foto { margin: 0 auto; }
/* capa menor que a largura da caixa: fica alinhada à esquerda, na medida do
   texto, sem dominar a página */
.artigo__foto img {
  width: 100%;
  max-width: 880px;
  max-height: 350px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--r-md);
}

.artigo__corpo { display: grid; gap: clamp(2rem, 4vw, 3.5rem); padding-top: clamp(2.25rem, 4vw, 3.25rem); }
.artigo__texto { display: grid; gap: 1.15rem; max-width: 700px; }

.artigo__texto p { font-size: 16.5px; line-height: 1.8; color: var(--ink-soft); }

.artigo__texto h2 {
  margin-top: .9rem;
  font-size: clamp(1.25rem, 1.9vw, 1.5rem);
  letter-spacing: -.022em;
  color: var(--ink);
  scroll-margin-top: calc(var(--altura-cabecalho) + 28px);
}

.artigo__texto ul { display: grid; gap: .55rem; margin: 0; padding: 0; list-style: none; }

.artigo__texto li {
  position: relative;
  padding-left: 1.15rem;
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-soft);
}

.artigo__texto li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .68em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--brand);
}

.artigo__lado { display: grid; gap: 1.5rem; align-content: start; }

.artigo__lado-rotulo {
  margin: 0 0 .85rem;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--brand-ink);
}

.artigo__sumario ol { list-style: none; margin: 0; padding: 0; display: grid; counter-reset: sumario; }

.artigo__sumario li { counter-increment: sumario; }

.artigo__sumario a {
  display: grid;
  grid-template-columns: 1.6rem minmax(0, 1fr);
  gap: .35rem;
  padding: .6rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color .2s var(--curva);
}

.artigo__sumario a::before {
  content: counter(sumario, decimal-leading-zero);
  font-family: Manrope, Inter, sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--brand-ink);
  padding-top: .15rem;
}

.artigo__sumario a:hover { color: var(--brand-ink); }

.artigo__lado-cta {
  display: grid;
  gap: .7rem;
  padding: 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--canvas);
}

.artigo__lado-cta p { font-size: 13px; line-height: 1.6; color: var(--muted); }
.artigo__lado-cta .artigo__lado-rotulo { margin: 0; }
.artigo__lado-cta .btn { width: 100%; }

@media (min-width: 1024px) {
  .artigo__corpo { grid-template-columns: minmax(0, 1fr) 262px; align-items: start; }
  .artigo__lado { position: sticky; top: calc(var(--altura-cabecalho) + 28px); }
}

.artigo__fim { max-width: none; padding-top: 1.5rem; }

.artigo__relacionados {
  padding-top: clamp(2.5rem, 5vw, 4rem);
  padding-bottom: clamp(1rem, 2vw, 2rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid var(--line);
}

.artigo__relacionados-titulo { font-size: clamp(1.1rem, 1.6vw, 1.35rem); margin-bottom: clamp(1.25rem, 2.5vw, 2rem); }

.artigo__relacionados-grade { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }

.rel-card { display: grid; gap: .55rem; color: var(--ink); text-decoration: none; }

.rel-card img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  clip-path: inset(0 round 4px);
  transition: transform .5s var(--curva);
}

.rel-card__cat {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brand-ink);
}

.rel-card__titulo {
  font-family: Manrope, Inter, sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.015em;
  transition: color .2s var(--curva);
}

.rel-card:hover .rel-card__titulo { color: var(--brand-ink); }
.rel-card:hover img { transform: scale(1.03); }

@media (min-width: 700px) { .artigo__relacionados-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .artigo__relacionados-grade { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ------------------------------------------------------------------ contato -- */
.contato-grade { display: grid; gap: clamp(2.25rem, 4vw, 3.5rem); }
.contato-ficha .display-3 { margin-top: 1rem; max-width: 24ch; }

.bloco-contato {
  display: flex;
  gap: .9rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--line);
}

.bloco-contato:first-of-type { border-top: 1px solid var(--line); }

.bloco-contato h3 {
  font-family: Inter, sans-serif;
  margin: 0;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--muted);
}

.bloco-contato p, .bloco-contato a {
  display: block;
  margin-top: .3rem;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink);
}

.bloco-contato a { text-decoration: none; border-bottom: 1px solid var(--line-strong); width: fit-content; }
.bloco-contato a:hover { border-color: var(--brand); color: var(--brand-ink); }

.veiculo-mapa {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--canvas);
  aspect-ratio: 16 / 10;
}

.veiculo-mapa iframe { width: 100%; height: 100%; border: 0; }

.formulario {
  display: grid;
  gap: 1.05rem;
  align-content: start;
  padding: clamp(1.4rem, 3vw, 2.25rem);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

.formulario .display-3 { margin-top: .9rem; max-width: 22ch; }
.formulario__apoio { font-size: 13.5px; color: var(--muted); line-height: 1.6; }

.campo { display: grid; gap: .35rem; }

.campo__rotulo { font-size: 12.5px; font-weight: 600; letter-spacing: .01em; color: var(--ink); }
.campo__obrig { color: var(--brand-ink); }

.campo input, .campo select, .campo textarea {
  width: 100%;
  height: 46px;
  padding: 0 .85rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 14.5px;
  transition: border-color .18s var(--curva), box-shadow .18s var(--curva);
}

.campo textarea { height: auto; min-height: 124px; padding: .7rem .85rem; resize: vertical; line-height: 1.6; }
.campo input::placeholder, .campo textarea::placeholder { color: #6E777D; }

.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none;
  border-color: var(--brand-600);
  box-shadow: 0 0 0 3px rgba(255, 148, 11, .18);
}

.campo__aviso { font-size: 12px; line-height: 1.4; color: var(--erro); }
.campo--erro input, .campo--erro select, .campo--erro textarea { border-color: var(--erro); }
.campo--erro .campo__aviso:empty::before { content: "Confira este campo."; }

.formulario__nota { font-size: 12.5px; line-height: 1.6; color: var(--muted); }
.formulario .btn { width: 100%; margin-top: .25rem; }

@media (min-width: 980px) {
  .contato-grade { grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); align-items: start; }
  .formulario { position: sticky; top: calc(var(--altura-cabecalho) + 28px); }
}

/* ------------------------------------------------------------ duas colunas -- */
.dupla { display: grid; gap: clamp(2rem, 4vw, 3.5rem); }

@media (min-width: 980px) {
  .dupla { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
}

.moldura-video {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--deep);
}

.moldura-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.area-reservada {
  display: grid;
  gap: .9rem;
  max-width: 58ch;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
}

.etiqueta-vazia {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}

.area-reservada p { font-size: var(--t-md); line-height: 1.6; color: var(--ink-soft); }

/* ------------------------------------------------------------------ modal -- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 1.25rem;
  background: rgba(10, 14, 15, .62);
}

.modal[hidden] { display: none; }

.modal__caixa {
  display: grid;
  gap: .8rem;
  width: 100%;
  max-width: 430px;
  padding: clamp(1.5rem, 3vw, 2.1rem);
  background: var(--paper);
  border-radius: var(--r-md);
  box-shadow: var(--sombra-alta);
}

.modal__marca {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--brand-wash);
  color: var(--brand-ink);
}

.modal__caixa h3 { font-size: 20px; }
.modal__caixa p { font-size: 14.5px; line-height: 1.65; color: var(--muted); }
.modal__caixa .btn { justify-self: start; margin-top: .5rem; }

/* ----------------------------------------------------------------- rodapé -- */
.rodape {
  background: var(--deep);
  color: rgba(255, 255, 255, .74);
  font-size: 14px;
  border-top: 1px solid rgba(255, 255, 255, .12);
}

.rodape__topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem 2rem;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
}

.rodape__selo img { height: 30px; width: auto; }
.rodape__assinatura { font-size: 12.5px; color: rgba(255, 255, 255, .56); }

.rodape__grade { display: grid; gap: 2.25rem; }

.rodape h3 {
  margin: 0 0 .95rem;
  font-family: Inter, sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #fff;
}

.rodape a { color: rgba(255, 255, 255, .74); text-decoration: none; transition: color .18s var(--curva); }
.rodape a:hover { color: #fff; }

.rodape__texto { max-width: 34ch; font-size: 13.5px; line-height: 1.7; color: rgba(255, 255, 255, .64); }

.rodape__links { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; font-size: 13.5px; }
.rodape__links a { display: inline-block; transition: transform .2s var(--curva), color .18s var(--curva); }
.rodape__links a:hover { transform: translateX(2px); }

.rodape__endereco { font-size: 13.5px; line-height: 1.7; color: rgba(255, 255, 255, .64); }

.rodape__contato { list-style: none; margin: 0; padding: 0; display: grid; gap: .65rem; font-size: 13.5px; }
.rodape__contato li { display: flex; align-items: center; gap: .6rem; }

.rodape__contato-ico {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: none;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 50%;
  color: var(--brand);
}

.rodape__contato-ico .ico { width: 13px; height: 13px; }
.rodape .btn { margin-top: 1.4rem; }
.rodape__marca { display: none; }

.rodape__base { border-top: 1px solid rgba(255, 255, 255, .12); background: rgba(0, 0, 0, .2); }

.rodape__base-linha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem 1rem;
  padding-top: 1.15rem;
  padding-bottom: 1.15rem;
  font-size: 12.5px;
  color: rgba(255, 255, 255, .58);
}

.rodape__base-nota { font-weight: 300; }
.rodape__base-nota::before { content: "·"; margin-right: .75rem; color: rgba(255, 255, 255, .4); }

.rodape__credito {
  margin-left: auto;
  font-size: 12px;
  color: rgba(255, 255, 255, .6);
  text-decoration: none;
}

.rodape__credito strong { font-weight: 600; color: rgba(255, 255, 255, .82); }
.rodape__credito:hover { color: #fff; }

@media (min-width: 900px) {
  .rodape__grade { grid-template-columns: 1.45fr .75fr 1fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); }
}

@media (max-width: 640px) {
  .rodape__base-nota { display: none; }
  .rodape__credito { margin-left: 0; }
}

/* ------------------------------------------- botão flutuante do WhatsApp -- */
.zap-fixo {
  position: fixed;
  right: clamp(1rem, 2.5vw, 1.75rem);
  bottom: clamp(1rem, 2.5vw, 1.75rem);
  z-index: 95;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  height: 3.5rem;
  padding: 0 1.35rem 0 1.15rem;
  border-radius: 999px;
  background: #25D366;
  color: #fff;
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: -.01em;
  line-height: 1;
  text-decoration: none;
  border: 0;
  box-shadow: 0 14px 30px -12px rgba(7, 61, 33, .55), 0 3px 10px rgba(10, 14, 15, .18);
  transition: transform .25s cubic-bezier(.22, 1, .36, 1), box-shadow .25s ease;
}

.zap-fixo:hover {
  color: #fff;
  text-decoration: none;
  transform: translateY(-3px);
  box-shadow: 0 18px 34px -12px rgba(7, 61, 33, .6), 0 4px 12px rgba(10, 14, 15, .22);
}

.zap-fixo:focus-visible { outline: 3px solid #073D21; outline-offset: 3px; }

.zap-fixo__ico { display: grid; place-items: center; width: 24px; height: 24px; flex: none; color: #fff; }
.zap-fixo__ico svg { width: 24px; height: 24px; fill: currentColor; stroke: none; }
.zap-fixo__txt { white-space: nowrap; text-decoration: none; }

@media (max-width: 640px) {
  .zap-fixo { width: 3.5rem; height: 3.5rem; padding: 0; justify-content: center; }

  /* no celular fica só o ícone: o texto continua no DOM para leitor de tela */
  .zap-fixo__txt {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* --------------------------------------------------- movimento reduzido --- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}