/* css/tokens.css */
/* Serravero — tokens do design system.
   Origem de cada valor: [BB-IV x.y] = Brand Book de Identidade Visual; [REF:xx] = engenharia reversa
   (research/_sintese/SINTESE.md); [A11Y] = ajuste de acessibilidade medido (docs/DESIGN-SYSTEM.md §2). */

@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/fonts/cormorant-garamond-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/fonts/cormorant-garamond-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 500; font-display: swap;
  src: url("/fonts/cormorant-garamond-latin-500-italic.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/fonts/manrope-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/fonts/manrope-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/fonts/manrope-latin-600-normal.woff2") format("woff2"); }

:root {
  /* Cor — núcleo [BB-IV 02.1] */
  --verde: #17372D;          /* institucional: botão principal, títulos, faixas */
  --marfim: #F4F0E6;         /* fundo prioritário do site (substitui o branco) */
  --madeira: #18211E;        /* profundidade: hero, rodapé, seções escuras; texto corrido sobre marfim */
  /* Cor — apoio [BB-IV 02.2] */
  --dourado: #B29562;        /* ≤ 5%: filete, marcador, detalhe plano. NUNCA texto sobre marfim (2,5:1) */
  --taupe: #D8D0C0;          /* fundo editorial de apoio, fios, estado desabilitado */
  --salvia: #65716B;         /* texto secundário ≥ 18px / ícones / linhas (4,47:1 sobre marfim) */
  --salvia-texto: #59645F;   /* [A11Y] sálvia um passo mais escura p/ texto < 18px: ≥ 5,3:1 sobre marfim */
  --marfim-2: #EDE7DA;       /* [derivado] marfim um passo abaixo, p/ superfície de card/estúdio claro */
  --madeira-2: #202B27;      /* [derivado] madeira um passo acima, p/ camadas sobre madeira */

  /* Papéis */
  --fundo: var(--marfim);
  --texto: var(--madeira);
  --texto-2: var(--salvia-texto);
  --titulo: var(--verde);
  --acao: var(--verde);
  --acao-texto: var(--marfim);
  --fio: rgba(24, 33, 30, .16);       /* fio de 1 px sobre marfim */
  --fio-escuro: rgba(244, 240, 230, .18); /* fio de 1 px sobre madeira/verde */
  --foco: var(--verde);               /* [Sol fase 4] anel de foco verde em fundo claro; dourado em fundo escuro (.escuro/.verde) */

  /* Tipografia [BB-IV 03] */
  --serif: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
  --sans: "Manrope", "Helvetica Neue", Arial, sans-serif;
  --display: clamp(3rem, 2rem + 4.2vw, 5.5rem);   /* 48 → 88 px  [BB-IV 03.4 Display 64–88] */
  --h1: clamp(2.5rem, 1.9rem + 2.4vw, 3.5rem);    /* 40 → 56 px  [H1 44–56] */
  --h2: clamp(1.875rem, 1.6rem + 1.1vw, 2.375rem); /* 30 → 38 px [H2 30–38] */
  --h3: clamp(1.25rem, 1.15rem + .45vw, 1.5rem);   /* 20 → 24 px [H3 22–26, Manrope Semibold] */
  --body-l: clamp(1.0625rem, 1rem + .3vw, 1.1875rem); /* 17 → 19 px [Body L 18–20] */
  --body: 1rem;                                    /* 16 px [Body 16–18] */
  --small: .875rem;                                /* 14 px [Small 13–14] */
  --label: .75rem;                                 /* 12 px [Label 11–13, caixa alta] */
  --track-label: .1em;                             /* +10% [BB-IV 03.3: +6% a +12%] [REF:BF 0,10–0,15] */
  --lh-titulo: 1.05;                               /* [BB-IV 03.2 90–110%] */
  --lh-texto: 1.55;                                /* [BB-IV 03.3 145–160%] */

  /* Espaço — múltiplos de 8 [BB-IV 03.5] */
  --s1: .5rem; --s2: 1rem; --s3: 1.5rem; --s4: 2rem; --s5: 3rem; --s6: 4rem; --s7: 6rem; --s8: 8rem;
  --secao: clamp(4rem, 2.5rem + 5vw, 7.5rem);      /* respiro vertical entre seções (rodada 2: vãos menores) */
  --margem: clamp(1.25rem, .6rem + 3.2vw, 4rem);   /* gutter lateral 20 → 64 px */
  --container: 82.5rem;                            /* 1320 px [REF:DU 91,7% em 1440] */
  --texto-max: 38rem;                              /* ~65 caracteres [BB-IV 03.5 45–70] */

  /* Forma [REF P2: raio 0; sem sombra] */
  --raio: 0;
  --sombra-painel: 0 18px 40px -24px rgba(24, 33, 30, .45); /* só painéis flutuantes (menu, gaveta) */

  /* Movimento [REF:VV reveal; BF cross-fade] */
  --ease: cubic-bezier(.2, .6, .2, 1);
  --t-rapida: .2s;
  --t-media: .4s;
  --t-lenta: .6s;
  --header-h: 5.5rem;          /* 88 px desktop */
  --header-h-compacto: 4rem;   /* 64 px ao rolar / celular */
}

@media (max-width: 767px) {
  :root { --header-h: 4rem; }
}

/* ---------- Extensões do construtor (não alteram os valores acima) ---------- */
:root {
  --erro: #7A2E22;            /* [A11Y] terracota escuro p/ mensagem de erro: 8,1:1 sobre marfim; sempre com texto, nunca só cor */
  --costura: 2px;             /* [REF:VV] costura entre mídias de um mosaico */
  --wordmark: clamp(8.25rem, 6.5rem + 4.4vw, 12rem);   /* 132 → 192 px [DESIGN-SYSTEM §4: 132 celular, 168–200 desktop] */
  --wordmark-compacto: 9.5rem;                          /* 152 px ao rolar (≥ 120 px [BB-IV 01]) */
  --toque: 2.75rem;           /* 44 px: alvo mínimo de toque */
  --card-proporcao: 4 / 5;    /* [DESIGN-SYSTEM §4 card retrato 4:5] */
  --topo-fixo: calc(var(--header-h-compacto) + var(--s3)); /* deslocamento de elementos sticky sob o header compacto */
}

/* css/base.css */
/* Serravero — base: reset, tipografia, links, botões, layout, foco e movimento.
   Regras: camada mais alta primeiro (token → base → componente → página); nada de literal fora de token nos
   componentes; raio 0; sem sombra exceto --sombra-painel. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h-compacto) + var(--s2)); }
body {
  margin: 0; background: var(--fundo); color: var(--texto);
  font: 400 var(--body)/var(--lh-texto) var(--sans);
  font-kerning: normal; font-feature-settings: "kern", "liga";
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
ul[role="list"], ol[role="list"] { list-style: none; margin: 0; padding: 0; }
:where(h1, h2, h3, h4, p, figure, blockquote, dl, dd) { margin: 0; }
hr { border: 0; border-top: 1px solid var(--fio); margin: 0; }

/* ---------- Tipografia ---------- */
.display, .h1, .h2, h1, h2 {
  font-family: var(--serif); font-weight: 600; color: var(--titulo);
  line-height: var(--lh-titulo); letter-spacing: -.005em; text-wrap: balance;
  hyphens: manual;
}
.display { font-size: var(--display); line-height: .98; }
h1, .h1 { font-size: var(--h1); }
h2, .h2 { font-size: var(--h2); line-height: 1.08; }
h3, .h3 { font: 600 var(--h3)/1.25 var(--sans); color: var(--texto); text-wrap: balance; }
.serif-italico { font-family: var(--serif); font-style: italic; font-weight: 500; }
.lead { font-size: var(--body-l); line-height: 1.55; color: var(--texto); max-width: var(--texto-max); text-wrap: pretty; }
p { max-width: var(--texto-max); text-wrap: pretty; }
.small, small { font-size: var(--small); line-height: 1.5; }
.label {
  font: 600 var(--label)/1.3 var(--sans); letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--texto-2);
}
.texto-2 { color: var(--texto-2); }
.numero { font-variant-numeric: lining-nums tabular-nums; }

/* Título → texto ≈ 0,5× a altura do título [BB-IV 03.5] */
.pilha > * + * { margin-top: var(--s2); }
.pilha > :is(h1, h2, .display, .h1, .h2) + * { margin-top: .5em; }
.pilha-l > * + * { margin-top: var(--s4); }

/* ---------- Links ---------- [BB-IV 02.3: não depender só de cor] */
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .22em; }
.link {
  display: inline-flex; align-items: center; gap: .6em;
  font: 600 var(--small)/1.2 var(--sans); letter-spacing: .04em; color: var(--acao);
  text-decoration: none; padding-block: .35em;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  transition: background-size var(--t-media) var(--ease);
}
.link:hover { background-size: 35% 1px; }
.link .seta { transition: transform var(--t-media) var(--ease); }
.link:hover .seta { transform: translateX(.25em); }

/* ---------- Botões ---------- [BB-IV 02.3: principal = verde/marfim] [REF:DU sólido + contorno que inverte] */
.botao {
  --b-bg: var(--acao); --b-fg: var(--acao-texto); --b-bd: var(--acao);
  display: inline-flex; align-items: center; justify-content: center; gap: .75em;
  min-height: 3.25rem; padding: .9rem 1.75rem; border: 1px solid var(--b-bd); border-radius: var(--raio);
  background: var(--b-bg); color: var(--b-fg); text-decoration: none; text-align: center;
  font: 600 var(--small)/1.2 var(--sans); letter-spacing: .06em;
  transition: background-color var(--t-media) var(--ease), color var(--t-media) var(--ease), border-color var(--t-media) var(--ease);
}
.botao:not([disabled]):not([aria-disabled="true"]):hover { --b-bg: var(--madeira); --b-bd: var(--madeira); }
.botao--contorno { --b-bg: transparent; --b-fg: var(--acao); --b-bd: var(--acao); }
.botao--contorno:not([disabled]):not([aria-disabled="true"]):hover { --b-bg: var(--acao); --b-fg: var(--acao-texto); }
/* sobre fundo escuro */
.escuro .botao { --b-bg: var(--marfim); --b-fg: var(--madeira); --b-bd: var(--marfim); }
.escuro .botao:not([disabled]):not([aria-disabled="true"]):hover { --b-bg: var(--taupe); --b-bd: var(--taupe); }
.escuro .botao--contorno { --b-bg: transparent; --b-fg: var(--marfim); --b-bd: rgba(244, 240, 230, .55); }
.escuro .botao--contorno:not([disabled]):not([aria-disabled="true"]):hover { --b-bg: var(--marfim); --b-fg: var(--madeira); --b-bd: var(--marfim); }
.botao[disabled], .botao[aria-disabled="true"] { --b-bg: var(--taupe); --b-fg: var(--salvia-texto); --b-bd: var(--taupe); cursor: not-allowed; }
.botao--bloco { width: 100%; }

/* ---------- Superfícies ---------- */
.escuro { background: var(--madeira); color: var(--marfim); --foco: var(--dourado); --texto: var(--marfim); --texto-2: var(--taupe); --titulo: var(--marfim); --fio: var(--fio-escuro); --acao: var(--marfim); --acao-texto: var(--madeira); }
.verde { background: var(--verde); color: var(--marfim); --foco: var(--dourado); --texto: var(--marfim); --texto-2: var(--taupe); --titulo: var(--marfim); --fio: var(--fio-escuro); --acao: var(--marfim); --acao-texto: var(--verde); }
.verde .botao:not([disabled]):not([aria-disabled="true"]):hover { --b-bg: var(--taupe); }
/* superfícies claras redefinem os papéis (não herdam texto claro de um .escuro/.verde ao redor) */
.marfim, .marfim-2, .taupe {
  color: var(--madeira); --texto: var(--madeira); --texto-2: var(--salvia-texto); --titulo: var(--verde);
  --fio: rgba(24, 33, 30, .16); --acao: var(--verde); --acao-texto: var(--marfim); --foco: var(--verde);
}
.marfim { background: var(--marfim); }
.taupe { background: var(--taupe); --texto-2: var(--madeira); }
.marfim-2 { background: var(--marfim-2); }
.filete { display: block; width: 2.5rem; height: 1px; background: var(--dourado); border: 0; } /* dourado ≤ 5% */

/* ---------- Layout ---------- */
.container { width: min(100% - 2 * var(--margem), var(--container)); margin-inline: auto; }
.container--estreito { width: min(100% - 2 * var(--margem), 56rem); margin-inline: auto; }
.secao { padding-block: var(--secao); }
.secao--curta { padding-block: calc(var(--secao) * .6); }
.grade-12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s3); }
.visualmente-oculto { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.pular { position: absolute; left: var(--s2); top: -10rem; z-index: 100; background: var(--verde); color: var(--marfim); padding: var(--s1) var(--s2); }
.pular:focus { top: var(--s2); }

/* ---------- Foco ---------- */
:focus-visible { outline: 3px solid var(--foco); outline-offset: 3px; }
.escuro :focus-visible, .verde :focus-visible { outline-color: var(--dourado); }
.escuro :is(.marfim, .marfim-2, .taupe) :focus-visible, .verde :is(.marfim, .marfim-2, .taupe) :focus-visible { outline-color: var(--verde); }

/* ---------- Mídia ---------- */
.midia { position: relative; overflow: hidden; background: var(--marfim-2); }
.escuro .midia, .midia--escura { background: var(--madeira-2); }
.midia img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Movimento ---------- [REF:VV reveal 0,6 s escalonado; uma vez] */
/* visível por padrão; só esconde quando o JS marca <html class="js"> com o observer ativo [Sol fase 4] */
.revelar { transition: opacity var(--t-lenta) var(--ease), transform var(--t-lenta) var(--ease); transition-delay: calc(var(--ordem, 0) * 70ms); }
.js .revelar:not(.visivel) { opacity: 0; transform: translateY(16px); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .js .revelar:not(.visivel) { opacity: 1; transform: none; }
}

/* css/componentes/topo.css */
/* Header: marfim, wordmark verde, nav em label; 88 → 64 px ao rolar, com fio de 1 px [DESIGN-SYSTEM §4] */
.topo {
  position: sticky; top: 0; z-index: 50;
  background: var(--marfim); border-bottom: 1px solid transparent;
  transition: border-color var(--t-media) var(--ease);
}
.topo.rolado { border-bottom-color: var(--fio); }
.topo__barra {
  display: flex; align-items: center; gap: var(--s4);
  height: var(--header-h); transition: height var(--t-media) var(--ease);
}
.topo.rolado .topo__barra { height: var(--header-h-compacto); }

.topo__marca { display: block; flex: none; color: inherit; padding-block: var(--s1); }
.topo__marca .wordmark { width: var(--wordmark); height: auto; transition: width var(--t-media) var(--ease); }
.topo.rolado .topo__marca .wordmark { width: var(--wordmark-compacto); }

.topo__nav { margin-left: auto; }
.topo__nav ul { display: flex; gap: clamp(var(--s3), 2.2vw, var(--s5)); }
.topo__nav a {
  display: inline-block; padding-block: var(--s1);
  font: 600 var(--label)/1.3 var(--sans); letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--texto); text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size var(--t-media) var(--ease);
}
.topo__nav a:hover, .topo__nav a[aria-current="page"] { background-size: 100% 1px; }

.botao--compacto { min-height: var(--toque); padding: .6rem 1.1rem; font-size: var(--label); letter-spacing: var(--track-label); text-transform: uppercase; }
.topo__lista { flex: none; }

/* Botão "Menu": só abaixo de 1024 px */
.topo__menu {
  display: none; align-items: center; gap: .6em; margin-left: auto;
  min-height: var(--toque); padding: 0 var(--s1); border: 0; background: none;
  color: var(--texto); text-decoration: none;
}
.topo__menu::before {
  content: ""; width: 1.25rem; height: 7px;
  border-top: 1px solid currentColor; border-bottom: 1px solid currentColor;
}
[data-menu-fechar].topo__menu::before, [data-filtros-fechar].topo__menu::before {
  width: .9rem; height: .9rem; border: 0;
  background: linear-gradient(45deg, transparent calc(50% - .5px), currentColor calc(50% - .5px), currentColor calc(50% + .5px), transparent calc(50% + .5px)),
              linear-gradient(-45deg, transparent calc(50% - .5px), currentColor calc(50% - .5px), currentColor calc(50% + .5px), transparent calc(50% + .5px));
}

@media (max-width: 1023px) {
  .topo__nav, .topo__lista { display: none; }
  .com-js .topo__menu--js { display: inline-flex; }
  .sem-js .topo__menu--sem-js, .js-falhou .topo__menu--sem-js { display: inline-flex; }
  .js-falhou .topo__menu--js { display: none; }
}

/* css/componentes/menu.css */
/* Menu do celular: painel em tela cheia madeira, links em Cormorant H2, foco preso [DESIGN-SYSTEM §4] */
.menu {
  position: fixed; inset: 0; z-index: 70;
  display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain;
  opacity: 0; transition: opacity var(--t-media) var(--ease);
}
.menu[hidden] { display: none; }
.menu.aberto { opacity: 1; }
.menu .topo__menu { display: inline-flex; color: var(--marfim); }
.menu__barra { display: flex; align-items: center; justify-content: space-between; min-height: var(--header-h); }
.menu__barra .wordmark { width: var(--wordmark); }
.menu__nav { flex: 1; display: flex; align-items: center; padding-block: var(--s5); }
.menu__nav ul { display: grid; gap: var(--s2); }
.menu__nav a {
  font: 600 clamp(2rem, 1.5rem + 2.5vw, 2.75rem)/1.1 var(--serif); color: var(--marfim); text-decoration: none;
  display: inline-block; padding-block: .15em;
  transform: translateY(8px); opacity: 0;
  transition: opacity var(--t-lenta) var(--ease), transform var(--t-lenta) var(--ease);
}
.menu.aberto .menu__nav a { transform: none; opacity: 1; }
.menu__nav li:nth-child(2) a { transition-delay: 40ms; }
.menu__nav li:nth-child(3) a { transition-delay: 80ms; }
.menu__nav li:nth-child(4) a { transition-delay: 120ms; }
.menu__nav li:nth-child(5) a { transition-delay: 160ms; }
.menu__nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
.menu__rodape { padding-block: var(--s4); color: var(--taupe); border-top: 1px solid var(--fio-escuro); }
html.menu-aberto { overflow: hidden; }

/* css/componentes/rodape.css */
/* Rodapé: madeira; wordmark marfim grande (≥ 60% da largura útil) [REF:VV]; colunas; nada de bandeira de cartão */
.rodape { padding-top: var(--secao); }
.rodape__topo {
  display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--s4);
  padding-bottom: var(--s6); border-bottom: 1px solid var(--fio);
}
.rodape__frase { max-width: 18ch; }
.rodape__colunas {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5) var(--s3);
  padding-block: var(--s6);
}
@media (min-width: 900px) { .rodape__colunas { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.rodape__colunas .label { margin-bottom: var(--s2); }
.rodape__colunas ul { display: grid; gap: .25rem; font-size: var(--small); color: var(--taupe); }
.rodape__colunas li { padding-block: .3rem; }
.rodape__colunas a { color: var(--marfim); text-decoration: none; display: inline-block; }
.rodape__colunas a:hover { text-decoration: underline; }
/* wordmark em tamanho de assinatura, não gigante [BB: proíbe logos gigantes; Sol fase 4] */
.rodape__marca { padding-block: var(--s4) var(--s3); }
.rodape__marca .wordmark { width: clamp(13.75rem, 12rem + 2vw, 17.5rem); height: auto; }
.rodape__base {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s1) var(--s4);
  padding-block: var(--s3) var(--s4); border-top: 1px solid var(--fio); color: var(--taupe);
}

/* css/componentes/secoes.css */
/* Blocos de seção reutilizados entre páginas: cabeças, migalhas, grades editoriais, listas, passos */
.secao--sem-topo { padding-top: 0; }

.cabeca-secao {
  display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--s3) var(--s6);
  margin-bottom: clamp(var(--s4), 4vw, var(--s6));
}
.cabeca-secao > .lead { flex: 0 1 30rem; }

.pagina-cabeca { padding-bottom: clamp(var(--s5), 5vw, var(--s7)); }
.pagina-cabeca__titulo { display: grid; gap: var(--s3); padding-top: clamp(var(--s3), 3vw, var(--s5)); }
@media (min-width: 1024px) {
  .pagina-cabeca__titulo { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; column-gap: var(--s6); }
}

/* Migalhas */
.migalhas { padding-top: var(--s3); font-size: var(--small); color: var(--texto-2); }
.migalhas ol { display: flex; flex-wrap: wrap; gap: .25rem .5rem; }
.migalhas li + li::before { content: "/"; margin-right: .5rem; color: var(--salvia); }
.migalhas a { color: inherit; text-decoration: none; }
.migalhas a:hover { text-decoration: underline; }
.migalhas [aria-current] { color: var(--texto); }

/* Duas colunas editoriais: rótulo/título à esquerda (4/12), conteúdo à direita (7/12) */
.grade-dupla { display: grid; gap: var(--s4); }
@media (min-width: 900px) {
  .grade-dupla { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s3); }
  .grade-dupla > :first-child { grid-column: 1 / span 4; }
  .grade-dupla > :last-child { grid-column: 6 / -1; }
}

/* Listas */
.lista-fina { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s1); }
.lista-fina li { padding-left: 1.25rem; position: relative; max-width: var(--texto-max); }
.lista-fina li::before { content: ""; position: absolute; left: 0; top: .78em; width: .6rem; height: 1px; background: var(--dourado); }

.lista-numerada { display: grid; }
.lista-numerada li {
  display: grid; grid-template-columns: 3rem 1fr; gap: var(--s2); align-items: baseline;
  padding-block: var(--s3); border-top: 1px solid var(--fio);
  font: 500 clamp(1.375rem, 1.2rem + .8vw, 1.75rem)/1.25 var(--serif); color: var(--titulo);
}
.lista-numerada li:last-child { border-bottom: 1px solid var(--fio); }
.lista-numerada .numero { font: 600 var(--small)/1 var(--sans); color: var(--texto-2); letter-spacing: .04em; }

.lista-nao { display: grid; }
.lista-nao li {
  padding-block: var(--s3); border-top: 1px solid var(--fio);
  font: 500 clamp(1.375rem, 1.2rem + .8vw, 1.75rem)/1.25 var(--serif); color: var(--marfim);
}
.lista-nao li:last-child { border-bottom: 1px solid var(--fio); }

/* Passos (curadoria) */
.passos { display: grid; gap: var(--s4) var(--s3); margin-bottom: var(--s5); }
@media (min-width: 640px) { .passos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .passos { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 768px) { .passos--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .passos--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.passos__item { display: grid; gap: var(--s1); align-content: start; padding-top: var(--s3); border-top: 1px solid var(--fio); }
.passos__num { font: 600 2.5rem/1 var(--serif); color: var(--dourado); margin-bottom: var(--s2); }
.passos--claro .passos__num { color: var(--verde); }
.passos__item h3 { color: var(--titulo); }
.passos__item p { color: var(--texto-2); }

/* Pilares (propósito / missão / promessa) */
.pilares { display: grid; gap: var(--s5) var(--s4); }
@media (min-width: 900px) { .pilares { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pilares__item { display: grid; gap: var(--s2); align-content: start; padding-top: var(--s3); border-top: 1px solid var(--fio); }
.pilares__item dd { margin: 0; font: 500 clamp(1.375rem, 1.2rem + .7vw, 1.75rem)/1.3 var(--serif); color: var(--titulo); text-wrap: pretty; }

/* Canais */
.canais { display: grid; gap: var(--s4) var(--s3); }
@media (min-width: 768px) { .canais { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); } }
.canais__item { display: grid; gap: var(--s1); align-content: start; padding-top: var(--s3); border-top: 1px solid var(--fio); }
.canais__item p { color: var(--texto-2); }
.canais__item .link { justify-self: start; margin-top: var(--s1); }

/* Índice interno (ocasiões) */
.indice { margin-top: var(--s5); border-top: 1px solid var(--fio); border-bottom: 1px solid var(--fio); }
.indice ol { display: flex; flex-wrap: wrap; gap: 0 var(--s4); }
.indice a {
  display: inline-flex; gap: .5em; align-items: baseline; padding-block: var(--s2);
  font: 600 var(--label)/1.3 var(--sans); letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--texto); text-decoration: none;
}
.indice a .numero { color: var(--texto-2); }
.indice a:hover { text-decoration: underline; text-underline-offset: .35em; }

/* Texto longo */
.texto-longo .h3 { color: var(--titulo); }
.link--discreto { background-size: 100% 1px; font-size: var(--small); padding: 0; border: 0; background-color: transparent; }

/* Estado vazio e erro */
.erro { min-height: 50svh; display: grid; align-items: center; }
.erro__acoes, .vazio__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin-top: var(--s2); }
button.link { border: 0; background-color: transparent; padding-inline: 0; cursor: pointer; }

/* css/componentes/card.css */
/* Card de produto: mídia retrato 4:5; hover (ponteiro fino) = cross-fade lento e atrasado para o 1º detalhe + zoom 1,02 [REF:BF];
   toque = as mesmas vistas por rolagem horizontal com scroll-snap e 2 marcadores [errata Sol] */
.grade-produtos {
  display: grid; grid-template-columns: repeat(var(--colunas, 2), minmax(0, 1fr));
  gap: var(--s5) var(--s3);
}
@media (min-width: 768px) { .grade-produtos { --colunas: 3; } }
@media (min-width: 1200px) { .grade-produtos { --colunas: 4; } }
@media (min-width: 768px) and (max-width: 1199px) { .grade-produtos--4 { --colunas: 2; } }
@media (min-width: 900px) and (max-width: 1199px) { .grade-produtos--4 { --colunas: 4; } }
.grade-produtos--3 { --colunas: 2; }
@media (min-width: 768px) { .grade-produtos--3 { --colunas: 3; } }
.grade-produtos--look { grid-template-columns: repeat(auto-fit, minmax(min(6.75rem, 45%), 1fr)); column-gap: var(--s2); }
@media (max-width: 479px) { .grade-produtos { column-gap: var(--s2); row-gap: var(--s4); } }

.card { display: flex; flex-direction: column; min-width: 0; container-type: inline-size; }
.card__midia { display: block; aspect-ratio: var(--card-proporcao); }
.card__vistas { display: block; position: relative; width: 100%; height: 100%; }
.card__vista { position: absolute; inset: 0; display: block; }
.card__vista picture, .card__vista img { width: 100%; height: 100%; }
.card__vista img { object-fit: cover; transition: transform var(--t-lenta) var(--ease); }
.card__vista + .card__vista { opacity: 0; transition: opacity var(--t-lenta) var(--ease) .15s; }
.card__marcas { display: none; } /* antes do @media de toque, que o liga */

@media (hover: hover) and (pointer: fine) {
  .card:hover .card__vista + .card__vista { opacity: 1; }
  .card:hover .card__vista img { transform: scale(1.02); }
}
@media (hover: none), (pointer: coarse) {
  .card__vistas--duas {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .card__vistas--duas::-webkit-scrollbar { display: none; }
  .card__vistas--duas .card__vista { position: relative; flex: 0 0 100%; scroll-snap-align: start; opacity: 1; }
  .card__marcas { display: flex; }
}
.card__marcas {
  position: absolute; left: 50%; bottom: .75rem; transform: translateX(-50%);
  gap: 6px; pointer-events: none;
}
.card__marcas span { width: 14px; height: 2px; background: var(--madeira); opacity: .28; transition: opacity var(--t-rapida) var(--ease); }
.card__marcas span.ativo { opacity: .9; }
.midia--escura .card__marcas span { background: var(--marfim); }

.card__info {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s2); row-gap: .2rem;
  padding-top: var(--s2);
}
.card__nome { grid-column: 1; font: 500 var(--body)/1.35 var(--sans); color: var(--texto); text-wrap: balance; }
.card__nome a { color: inherit; text-decoration: none; }
.card__nome a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; }
.card__preco { grid-column: 2; grid-row: 1; font: 500 var(--body)/1.35 var(--sans); white-space: nowrap; }
.card__meta { grid-column: 1 / -1; font-size: var(--small); color: var(--texto-2); }
.card__cores { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; margin-top: .35rem; }
.amostra { width: 10px; height: 10px; background: var(--amostra); border: 1px solid var(--fio); }

/* Card estreito (≤ 13 rem): preço vai para baixo do nome — tamanho pelo card, não pela tela [LIÇÕES #19] */
@container (max-width: 17rem) {
  .card__info { grid-template-columns: minmax(0, 1fr); }
  .card__preco { grid-column: 1; grid-row: auto; }
}
@container (max-width: 12rem) { .card__nome, .card__preco { font-size: var(--small); } }

/* Densidade escolhida no catálogo */
.grade-produtos[data-colunas-escolhidas="1"] { --colunas: 1; }
@media (max-width: 767px) { .grade-produtos[data-colunas-escolhidas="2"] { --colunas: 2; } }
@media (min-width: 768px) {
  .grade-produtos[data-colunas-escolhidas="2"] { --colunas: 2; }
  .grade-produtos[data-colunas-escolhidas="3"] { --colunas: 3; }
  .grade-produtos[data-colunas-escolhidas="4"] { --colunas: 4; }
}
.card[hidden] { display: none; }
@container (max-width: 8rem) { .card__meta { display: none; } }
@media (min-width: 900px) { .grade-produtos--look-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* css/componentes/filtros.css */
/* Filtros do catálogo: coluna fixa ≥ 1024 px; gaveta abaixo disso. Sem JS: escondidos (a grade mostra tudo). */
.colecao__barra {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3);
  padding-block: var(--s2); margin-bottom: var(--s4);
  border-top: 1px solid var(--fio); border-bottom: 1px solid var(--fio);
}
.colecao__contador { font-size: var(--small); color: var(--texto-2); margin-right: auto; }
.colecao__contador .numero { color: var(--texto); font-weight: 600; }
.colecao__ativos {
  display: inline-grid; place-items: center; min-width: 1.4rem; height: 1.4rem; margin-left: .5rem;
  background: var(--verde); color: var(--marfim); font-size: .6875rem; letter-spacing: 0;
}
.colecao__ativos[hidden] { display: none; }
.colecao__escolhas { display: flex; flex-wrap: wrap; gap: var(--s1); order: 3; width: 100%; }
.colecao__escolhas:empty { display: none; }
.escolha {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 2.25rem; padding: .3rem .75rem;
  border: 1px solid var(--salvia); background: transparent; font-size: var(--small); color: var(--texto);
}
.escolha::after { content: "×"; font-size: 1.1em; line-height: 1; color: var(--texto-2); }
.escolha:hover { border-color: var(--verde); }
.escolha--limpar { border-color: transparent; text-decoration: underline; text-underline-offset: .25em; }
.escolha--limpar::after { content: none; }

.densidade { display: flex; align-items: center; gap: .25rem; }
.densidade__rotulo { margin-right: .25rem; }
.densidade__op {
  display: inline-grid; place-items: center; width: var(--toque); height: var(--toque);
  border: 1px solid transparent; background: none; font: 600 var(--small)/1 var(--sans); color: var(--texto-2);
}
.densidade__op:hover { color: var(--texto); border-color: var(--fio); }
.densidade__op[aria-pressed="true"] { color: var(--texto); border-color: var(--verde); }
.densidade__op--largo { display: none; }
@media (min-width: 768px) { .densidade__op--largo { display: inline-grid; } .densidade__op--celular { display: none; } }

.colecao { padding-bottom: var(--secao); }
.colecao__corpo { display: grid; gap: var(--s5); }

.filtros__grupos { display: grid; gap: var(--s4); }
.filtros__grupo { border: 0; margin: 0; padding: 0; min-width: 0; }
.filtros__grupo legend { padding: 0; margin-bottom: var(--s1); }
.filtros__opcoes { display: grid; }
.opcao {
  position: relative; display: flex; align-items: baseline; gap: var(--s1);
  min-height: 2.5rem; padding: .55rem 0 .55rem 1rem; cursor: pointer;
  font-size: var(--small); color: var(--texto-2);
}
.opcao input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.opcao::before { content: ""; position: absolute; left: 0; top: 50%; width: .5rem; height: 1px; background: transparent; transition: background-color var(--t-rapida) var(--ease), width var(--t-rapida) var(--ease); }
.opcao:hover { color: var(--texto); }
.opcao:has(input:checked) { color: var(--texto); font-weight: 600; }
.opcao:has(input:checked)::before { background: var(--verde); width: .65rem; }
.opcao:has(input:focus-visible) { outline: 3px solid var(--foco); outline-offset: 2px; }
.opcao__qtd { margin-left: auto; font-weight: 400; color: var(--texto-2); font-size: var(--label); }
.opcao--vazia { cursor: default; text-decoration: line-through; text-decoration-thickness: 1px; }
.opcao--vazia input { cursor: default; }
.opcao--vazia:hover { color: var(--texto-2); }

.filtros__cabeca, .filtros__pe { display: none; }

.sem-js .filtros, .sem-js .colecao__filtrar, .sem-js .densidade,
.js-falhou .filtros, .js-falhou .colecao__filtrar, .js-falhou .densidade { display: none; }

@media (min-width: 1024px) {
  .colecao__corpo { grid-template-columns: 13.5rem minmax(0, 1fr); column-gap: clamp(var(--s4), 3.5vw, var(--s6)); }
  .sem-js .colecao__corpo { grid-template-columns: minmax(0, 1fr); }
  .colecao__filtrar { display: none; }
  .filtros { position: sticky; top: var(--topo-fixo); align-self: start; max-height: calc(100svh - var(--topo-fixo) - var(--s3)); overflow-y: auto; scrollbar-width: thin; }
}

/* Gaveta (< 1024 px) */
@media (max-width: 1023px) {
  .filtros {
    position: fixed; z-index: 80; top: 0; right: 0; bottom: 0; width: min(26rem, 100%);
    display: flex; flex-direction: column; background: var(--marfim); box-shadow: var(--sombra-painel);
    transform: translateX(100%); visibility: hidden;
    transition: transform var(--t-media) var(--ease), visibility 0s linear var(--t-media);
  }
  .filtros.aberto { transform: none; visibility: visible; transition: transform var(--t-media) var(--ease), visibility 0s; }
  .filtros__cabeca {
    display: flex; align-items: center; justify-content: space-between;
    min-height: var(--header-h-compacto); padding-inline: var(--margem); border-bottom: 1px solid var(--fio);
  }
  .filtros__cabeca .topo__menu { display: inline-flex; margin-left: 0; }
  .filtros__grupos { flex: 1; overflow-y: auto; padding: var(--s3) var(--margem); }
  .filtros__pe {
    display: grid; grid-template-columns: 1fr 1.6fr; gap: var(--s2);
    padding: var(--s2) var(--margem) max(var(--s2), env(safe-area-inset-bottom)); border-top: 1px solid var(--fio);
  }
  .filtros__pe .botao { padding-inline: var(--s2); }
}
.veu {
  position: fixed; inset: 0; z-index: 75; background: rgba(24, 33, 30, .45);
  opacity: 0; transition: opacity var(--t-media) var(--ease);
}
.veu.visivel { opacity: 1; }
.veu[hidden] { display: none; }

.vazio { padding-block: var(--s6); display: grid; gap: var(--s2); justify-items: start; border-top: 1px solid var(--fio); }
.vazio[hidden] { display: none; }

/* css/componentes/galeria.css */
/* Galeria da peça: foto principal grande + faixa de detalhes no tamanho real (sem ampliar recortes pequenos).
   Desktop: detalhes em grade sob a principal. Abaixo de 1024 px: faixa com rolagem horizontal, scroll-snap e marcadores. */
.galeria[hidden] { display: none; }
.galeria { display: grid; gap: var(--s3); }
/* principal na proporção natural da foto: inteira, sem corte */
.galeria__principal { margin: 0; }
.galeria__principal img { width: 100%; height: auto; }

.galeria__detalhes { display: grid; gap: var(--s1); }
.galeria__trilho { display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 12rem)); gap: var(--costura); }
.galeria__item { aspect-ratio: 6 / 7; }
.galeria__item picture, .galeria__item img { width: 100%; height: 100%; }
.galeria__item img { object-fit: cover; }
.galeria__marcas { display: none; }

@media (max-width: 1023px) {
  .galeria__principal { margin-inline: calc(var(--margem) * -1); }
  .galeria__trilho {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    scrollbar-width: none; margin-inline: calc(var(--margem) * -1); padding-inline: var(--margem); scroll-padding-inline: var(--margem);
  }
  .galeria__trilho::-webkit-scrollbar { display: none; }
  .galeria__item { flex: 0 0 min(38%, 11.5rem); scroll-snap-align: start; }
  .galeria__marcas { display: flex; gap: 6px; padding-top: var(--s1); }
  .galeria__marcas span { width: 14px; height: 2px; background: var(--madeira); opacity: .25; transition: opacity var(--t-rapida) var(--ease); }
  .galeria__marcas span.ativo { opacity: .9; }
}
@media (min-width: 640px) and (max-width: 1023px) {
  .galeria__principal { margin-inline: 0; max-width: 34rem; }
}


/* css/componentes/seletores.css */
/* Seletores da peça: cor (quadrados com a cor + nome visível) e tamanho (rádio sem pré-seleção) [DESIGN-SYSTEM §4] */
.seletor-cor, .seletor-tamanho { border: 0; margin: 0; padding: 0; min-width: 0; }
.seletor-cor legend, .seletor-tamanho legend { display: flex; align-items: baseline; gap: .75rem; padding: 0; margin-bottom: var(--s2); }
.seletor-cor legend, .seletor-tamanho legend { min-height: 1.4rem; }
.seletor-cor__nome, .seletor-tamanho__nome { font-size: var(--small); line-height: 1.4rem; color: var(--texto); }

.seletor-cor__opcoes { display: flex; flex-wrap: wrap; gap: .5rem; }
.amostra-op {
  position: relative; display: block; width: var(--toque); height: var(--toque); padding: 3px;
  border: 1px solid transparent; cursor: pointer; transition: border-color var(--t-rapida) var(--ease);
}
.amostra-op input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.amostra-op__cor { display: block; width: 100%; height: 100%; background: var(--amostra); border: 1px solid var(--salvia); }
.amostra-op:hover { border-color: var(--salvia); }
.amostra-op:has(input:checked) { border-color: var(--verde); }
.amostra-op:has(input:focus-visible) { outline: 3px solid var(--foco); outline-offset: 2px; }

.seletor-tamanho__opcoes { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: var(--s1); }
.tamanho-op { position: relative; display: block; cursor: pointer; }
.tamanho-op input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.tamanho-op span {
  display: grid; place-items: center; min-width: 3rem; height: 3rem; padding-inline: .75rem;
  border: 1px solid var(--salvia); font: 500 var(--small)/1 var(--sans); color: var(--texto);
  transition: border-color var(--t-rapida) var(--ease), background-color var(--t-rapida) var(--ease), color var(--t-rapida) var(--ease);
}
.tamanho-op:hover span { border-color: var(--verde); }
.tamanho-op input:checked + span { background: var(--verde); border-color: var(--verde); color: var(--marfim); }
.tamanho-op input:focus-visible + span { outline: 3px solid var(--foco); outline-offset: 2px; }
.seletor-tamanho__unico { display: flex; align-items: baseline; gap: .75rem; font-size: var(--small); }
.tamanho-op[hidden] { display: none; }

/* css/componentes/acordeao.css */
/* Acordeão nativo (<details>): fio de 1 px, título Manrope 600, ícone + / −, altura animada onde há suporte */
.acordeoes { border-bottom: 1px solid var(--fio); }
.acordeao { border-top: 1px solid var(--fio); interpolate-size: allow-keywords; }
.acordeao summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s2);
  min-height: 3.5rem; padding-block: var(--s2); cursor: pointer; list-style: none;
  font: 600 var(--small)/1.3 var(--sans); letter-spacing: .02em; color: var(--texto);
}
.acordeao summary::-webkit-details-marker { display: none; }
.acordeao summary::after {
  content: ""; flex: none; width: .75rem; height: .75rem;
  background: linear-gradient(currentColor, currentColor) center / 100% 1px no-repeat,
              linear-gradient(currentColor, currentColor) center / 1px 100% no-repeat;
  transition: background-size var(--t-media) var(--ease);
}
.acordeao[open] summary::after { background-size: 100% 1px, 1px 0; }
.acordeao summary:hover span { text-decoration: underline; text-underline-offset: .3em; text-decoration-thickness: 1px; }
.acordeao__corpo { padding-bottom: var(--s3); display: grid; gap: var(--s2); color: var(--texto); }
.acordeao::details-content { block-size: 0; overflow: clip; transition: block-size .3s var(--ease), content-visibility .3s allow-discrete; }
.acordeao[open]::details-content { block-size: auto; }

.ficha { display: grid; gap: var(--s1); margin: 0; }
.ficha > div { display: grid; grid-template-columns: 7.5rem 1fr; gap: var(--s2); font-size: var(--small); }
.ficha dt { color: var(--texto-2); }
.ficha dd { margin: 0; }

/* css/componentes/formulario.css */
/* Formulário: rótulo visível acima; campo com fio inferior 1 px madeira; foco = fio verde 2 px; erro em texto [DESIGN-SYSTEM §4] */
.formulario { display: grid; gap: var(--s4); }
.campo { display: grid; gap: .4rem; border: 0; margin: 0; padding: 0; min-width: 0; }
.campo > label, .campo legend { font: 600 var(--small)/1.3 var(--sans); color: var(--texto); padding: 0; }
.campo__dica { font-weight: 400; color: var(--texto-2); margin-left: .35rem; }
.campo input:not([type="checkbox"]), .campo textarea, .campo select {
  width: 100%; min-height: 3rem; padding: .7rem 0; border: 0; border-radius: var(--raio);
  border-bottom: 1px solid var(--madeira); background: transparent; color: var(--texto);
  font: 400 var(--body)/1.4 var(--sans);
  transition: border-color var(--t-rapida) var(--ease), box-shadow var(--t-rapida) var(--ease);
}
.campo textarea { resize: vertical; min-height: 6rem; }
.campo input::placeholder, .campo textarea::placeholder { color: var(--salvia-texto); opacity: 1; }
.campo input:not([type="checkbox"]):focus-visible, .campo textarea:focus-visible, .campo select:focus-visible {
  outline: none; border-bottom-color: var(--verde); box-shadow: 0 1px 0 0 var(--verde);
}
.campo [aria-invalid="true"] { border-bottom-color: var(--erro) !important; box-shadow: 0 1px 0 0 var(--erro); }
.campo__erro { font-size: var(--small); color: var(--erro); font-weight: 600; }
.campo__erro::before { content: "Atenção: "; }
.campo__erro[hidden] { display: none; }

.campo__select { position: relative; }
.campo__select select { appearance: none; -webkit-appearance: none; padding-right: 2rem; cursor: pointer; }
.campo__select::after {
  content: ""; position: absolute; right: .25rem; top: 50%; width: .5rem; height: .5rem; pointer-events: none;
  border-right: 1px solid var(--texto); border-bottom: 1px solid var(--texto); transform: translateY(-75%) rotate(45deg);
}

.campo--check { grid-template-columns: auto 1fr; align-items: start; gap: var(--s2); }
.campo--check input { width: 1.25rem; height: 1.25rem; margin: .15rem 0 0; accent-color: var(--verde); cursor: pointer; }
.campo--check label { font: 400 var(--small)/1.55 var(--sans); color: var(--texto); cursor: pointer; }
.campo--check a { text-decoration: underline; text-underline-offset: .2em; }

.campo--peca[hidden], .campo[hidden] { display: none; }
.campo__peca { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem var(--s2); padding: var(--s2); background: var(--marfim-2); font-size: var(--small); }
.formulario[hidden] { display: none; }

/* css/paginas/home.css */
/* Início */

/* Hero: madeira; texto alinhado ao container à esquerda; foto editorial sangrando à direita (lado oposto ao texto) */
.hero { position: relative; overflow: hidden; }
.hero__grade {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s3);
  width: min(100% - 2 * var(--margem), var(--container)); margin-inline: auto;
  min-height: clamp(32rem, calc(100svh - var(--header-h)), 58rem);
}
.hero__texto { grid-column: 1 / span 6; align-self: center; padding-block: var(--s7); padding-right: var(--s5); display: grid; gap: var(--s3); justify-items: start; }
.hero__titulo { font-size: min(var(--display), 12.5svh); max-width: 9.5em; }
.hero__lead { color: var(--taupe); max-width: 30rem; }
.hero__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4); margin-top: var(--s2); }
.hero__midia { position: absolute; top: 0; right: 0; bottom: 0; width: 50%; margin: 0; }
.hero__midia picture, .hero__midia img { width: 100%; height: 100%; }
.hero__midia img { object-fit: cover; }

@media (max-width: 899px) {
  .hero__grade { display: flex; flex-direction: column; min-height: 0; width: 100%; }
  .hero__midia { position: relative; width: 100%; aspect-ratio: 4 / 5; max-height: 72svh; order: -1; }
  .hero__texto { padding: var(--s5) var(--margem) var(--s6); }
  .hero__titulo { font-size: var(--display); }
}
@media (min-width: 900px) and (max-width: 1199px) {
  .hero__texto { grid-column: 1 / span 6; padding-right: var(--s3); }
}

/* Manifesto curto */
.manifesto__rotulo { grid-column: 1 / span 3; padding-top: .9rem; }
.manifesto__corpo { grid-column: 4 / -1; display: grid; gap: var(--s4); }
.manifesto__frase {
  max-width: 16ch; font: 500 clamp(2.25rem, 1.4rem + 3.4vw, 4.25rem)/1.04 var(--serif); color: var(--titulo);
  letter-spacing: -.01em; text-wrap: balance;
}
.manifesto__texto { max-width: 36rem; color: var(--texto); }
@media (min-width: 1024px) {
  .manifesto__corpo { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: end; column-gap: var(--s6); }
}
@media (max-width: 767px) {
  .manifesto__rotulo, .manifesto__corpo { grid-column: 1 / -1; }
  .manifesto__rotulo { padding-top: 0; margin-bottom: var(--s2); }
}

/* Capítulo I por categoria */
.mosaico { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4) var(--s3); }
@media (min-width: 900px) { .mosaico { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 479px) { .mosaico { column-gap: var(--s2); } }
.mosaico__item { display: flex; }
.mosaico__link { display: flex; flex-direction: column; gap: var(--s2); width: 100%; color: inherit; text-decoration: none; }
.mosaico__midia { display: block; aspect-ratio: var(--card-proporcao); }
.mosaico__midia picture, .mosaico__midia img { width: 100%; height: 100%; }
.mosaico__midia img { object-fit: cover; transition: transform var(--t-lenta) var(--ease); }
.mosaico__link:hover .mosaico__midia img { transform: scale(1.02); }
.mosaico__texto { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 var(--s1); }
.mosaico__nome { font: 600 clamp(1.25rem, 1.1rem + .6vw, 1.625rem)/1.15 var(--serif); color: var(--titulo); }
.mosaico__link:hover .mosaico__nome { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.mosaico__qtd { font-size: var(--small); color: var(--texto-2); white-space: nowrap; }
.mosaico__link--cta { justify-content: space-between; padding: clamp(var(--s2), 2vw, var(--s3)); gap: var(--s4); min-width: 0; }
.mosaico__cta-titulo { font: 600 clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem)/1.1 var(--serif); color: var(--marfim); max-width: 10ch; }
.mosaico__link--cta:hover .link { background-size: 35% 1px; }

/* A medida da ocasião (faixa verde) */
.lista-ocasioes { display: grid; margin-bottom: var(--s5); }
@media (min-width: 640px) { .lista-ocasioes { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s4); } }
@media (min-width: 1024px) { .lista-ocasioes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.lista-ocasioes a {
  display: grid; grid-template-columns: 2.75rem 1fr; gap: .35rem var(--s2); align-content: start; height: 100%;
  padding-block: var(--s3) var(--s4); border-top: 1px solid var(--fio); color: inherit; text-decoration: none;
}
.lista-ocasioes__num { grid-row: 1 / span 2; font: 600 1.75rem/1 var(--serif); color: var(--dourado); }
.lista-ocasioes__titulo { font: 600 var(--body)/1.3 var(--sans); color: var(--marfim); }
.lista-ocasioes__msg { font: 500 clamp(1.1875rem, 1.1rem + .35vw, 1.375rem)/1.3 var(--serif); color: var(--taupe); text-wrap: pretty; }
.lista-ocasioes a:hover .lista-ocasioes__titulo { text-decoration: underline; text-underline-offset: .25em; text-decoration-thickness: 1px; }

/* Dossiê de matéria e construção — três detalhes em tamanho nativo ou menor (nada ampliado) */
.dossie__grade { display: grid; gap: var(--s6); }
@media (min-width: 900px) {
  .dossie__grade { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s3); align-items: center; }
  .dossie__midias { grid-column: 1 / span 6; }
  .dossie__texto { grid-column: 8 / -1; }
}
.dossie__midias { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--costura); }
.dossie__fig { margin: 0; aspect-ratio: 4 / 5; }
.dossie__fig picture, .dossie__fig img { width: 100%; height: 100%; }
.dossie__fig img { object-fit: cover; }
.dossie__texto { display: grid; gap: var(--s5); }
.criterios { display: grid; margin: 0; }
.criterios__item { padding-block: var(--s2) var(--s3); border-top: 1px solid var(--fio); display: grid; gap: .3rem; }
.criterios__item:last-child { border-bottom: 1px solid var(--fio); }
.criterios dt { font: 600 var(--body)/1.3 var(--sans); color: var(--titulo); display: flex; gap: .75rem; align-items: baseline; }
.criterios dt .numero { font-size: var(--label); color: var(--texto-2); letter-spacing: .06em; }
.criterios dd { margin: 0; color: var(--texto-2); max-width: 34rem; }

/* Fortaleza, em breve */
.em-breve__grade { display: grid; gap: var(--s5); align-items: end; }
@media (min-width: 900px) { .em-breve__grade { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--s6); } }
.em-breve__acoes { display: flex; flex-wrap: wrap; gap: var(--s2); }
@media (min-width: 900px) { .em-breve__acoes { justify-content: flex-end; } }

/* A camisaria no centro */
.camisaria__grade { display: grid; gap: var(--s5); }
@media (min-width: 900px) {
  .camisaria__grade { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s3); align-items: center; }
  .camisaria__foto { grid-column: 1 / span 6; }
  .camisaria__texto { grid-column: 8 / -1; }
}
.camisaria__foto { margin: 0; }
.camisaria__foto img { width: 100%; height: auto; }
.camisaria__texto { display: grid; gap: var(--s4); align-content: center; }
.camisaria__detalhes { display: grid; grid-template-columns: repeat(4, minmax(0, 7.5rem)); gap: var(--costura); }
.camisaria__detalhes li { aspect-ratio: 1; }
.camisaria__detalhes picture, .camisaria__detalhes img { display: block; width: 100%; height: 100%; }
.camisaria__detalhes img { object-fit: cover; }
.camisaria__usos { display: grid; gap: var(--s1); }
.camisaria__usos ul { display: grid; }
.camisaria__usos li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem var(--s2); padding-block: .7rem; border-top: 1px solid var(--fio); }
.camisaria__usos li:last-child { border-bottom: 1px solid var(--fio); }
.camisaria__ocasiao { font: 500 1.375rem/1.2 var(--serif); color: var(--titulo); }
.camisaria__par { font-size: var(--small); color: var(--texto-2); }
.camisaria__par a { color: var(--texto); text-underline-offset: .2em; }
.camisaria__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4); }
.camisaria + .manifesto { padding-top: 0; }

/* miniaturas do look em cada ocasião */
.lista-ocasioes__look { grid-column: 2; display: flex; gap: var(--costura); margin-top: var(--s1); }
.lista-ocasioes__mini { width: 3.25rem; aspect-ratio: 4 / 5; flex: none; }
.lista-ocasioes__mini picture, .lista-ocasioes__mini img { width: 100%; height: 100%; }
.lista-ocasioes__mini img { object-fit: cover; }

/* css/paginas/institucionais.css */
/* Ocasiões, A marca, Lista */

/* Ocasiões: foto de presença (5/12) alternando lado + texto e look (6/12) */
.ocasiao { scroll-margin-top: var(--header-h-compacto); }
.ocasiao__grade { display: grid; gap: var(--s5); }
.ocasiao__foto { margin: 0; aspect-ratio: 4 / 5; }
.ocasiao__foto picture, .ocasiao__foto img { width: 100%; height: 100%; }
.ocasiao__foto img { object-fit: cover; }
.ocasiao__corpo { display: grid; gap: var(--s4); align-content: center; justify-items: start; }
.ocasiao__look { display: grid; gap: var(--s2); width: 100%; }
@media (min-width: 900px) {
  .ocasiao__grade { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s3); align-items: center; }
  .ocasiao__foto { grid-column: 1 / span 5; }
  .ocasiao__corpo { grid-column: 7 / -1; }
  .ocasiao--inversa .ocasiao__foto { grid-column: 8 / -1; grid-row: 1; }
  .ocasiao--inversa .ocasiao__corpo { grid-column: 1 / span 6; grid-row: 1; }
}
@media (max-width: 899px) { .ocasiao__foto { max-height: 70svh; } }
.ocasiao__msg { font: 500 clamp(1.375rem, 1.2rem + .8vw, 1.875rem)/1.25 var(--serif); color: var(--titulo); text-wrap: pretty; }
.ocasiao__servico { display: grid; gap: .3rem; font-size: var(--small); padding-top: var(--s2); border-top: 1px solid var(--fio); width: 100%; }

/* A marca */
.marca-manifesto { padding-bottom: var(--secao); }
.marca-manifesto__rotulo { grid-column: 1 / span 3; padding-top: 1rem; }
.marca-manifesto__corpo { grid-column: 4 / -1; display: grid; gap: var(--s5); }
.marca-manifesto__frase { font: 600 var(--display)/.98 var(--serif); color: var(--titulo); max-width: 10ch; text-wrap: balance; letter-spacing: -.01em; }
.marca-manifesto__texto p { font-size: var(--body-l); }
@media (max-width: 767px) {
  .marca-manifesto__rotulo, .marca-manifesto__corpo { grid-column: 1 / -1; }
  .marca-manifesto__rotulo { padding-top: 0; margin-bottom: var(--s2); }
}
.fundador__marca { display: flex; align-items: center; }
.fundador__marca .monograma { width: clamp(4rem, 3rem + 4vw, 7rem); height: auto; }

/* Lista de interesse */
.lista-pagina { display: grid; gap: var(--s6); padding-bottom: var(--secao); }
.lista-pagina__texto { display: grid; gap: var(--s3); align-content: start; }
.lista-pagina__texto h1 { margin-top: var(--s3); }
@media (min-width: 1024px) {
  .lista-pagina { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s3); }
  .lista-pagina__texto { grid-column: 1 / span 5; position: sticky; top: var(--topo-fixo); align-self: start; }
  .lista-pagina__form { grid-column: 7 / -1; padding-top: var(--s7); }
}
.confirmacao { display: grid; gap: var(--s3); padding: var(--s4); background: var(--marfim-2); border-top: 2px solid var(--verde); }
.confirmacao[hidden] { display: none; }
.confirmacao:focus { outline: none; }
.confirmacao__msg {
  width: 100%; padding: var(--s2); border: 1px solid var(--fio); background: var(--marfim);
  font: 400 var(--small)/1.55 var(--sans); color: var(--texto); resize: vertical;
}
.confirmacao__acoes { display: flex; flex-wrap: wrap; gap: var(--s2); }
.confirmacao .link { justify-self: start; border: 0; background-color: transparent; }
.frases { display: grid; gap: var(--s1); margin-top: var(--s4) !important; padding-top: var(--s3); border-top: 1px solid var(--fio); }
.frases li { font: 500 clamp(1.25rem, 1.1rem + .6vw, 1.625rem)/1.3 var(--serif); color: var(--titulo); }
.aviso-canal { padding: var(--s2) var(--s3); background: var(--marfim-2); border-left: 2px solid var(--verde); color: var(--texto); max-width: none; }

/* css/paginas/peca.css */
/* Página de peça (~58/42), coluna de informação sticky no desktop [REF:VV] */
.colecao-topo { padding-bottom: var(--s5); }
.colecao-topo__titulo { display: grid; gap: var(--s3); padding-top: clamp(var(--s3), 3vw, var(--s5)); }
@media (min-width: 1024px) { .colecao-topo__titulo { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; column-gap: var(--s6); } }

.peca-topo { padding-bottom: var(--s3); }
.peca { display: grid; gap: var(--s4); padding-bottom: var(--secao); }
@media (min-width: 1024px) {
  .peca { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(var(--s5), 4.5vw, var(--s7)); align-items: start; }
  .peca__fixa { position: sticky; top: var(--topo-fixo); }
}
.peca__fixa { display: grid; gap: var(--s3); }
.peca__linha { margin-bottom: calc(var(--s1) * -1); }
.peca__nome { font-size: clamp(2.25rem, 1.7rem + 1.9vw, 3.25rem); line-height: 1.04; }
.peca__preco { font: 500 1.25rem/1.2 var(--sans); color: var(--texto); }
.peca__resumo { color: var(--texto-2); font-size: var(--small); padding-bottom: var(--s1); }
.consulta { display: grid; gap: var(--s4); padding-block: var(--s3) var(--s1); border-top: 1px solid var(--fio); }
.consulta__nota { margin-top: calc(var(--s3) * -1); }
.peca__nota { display: grid; gap: .25rem; padding-top: var(--s1); }

.compoe { border-top: 1px solid var(--fio); }

/* gerado pelo build: amostras de cor e foco de imagem */
.cor-branco{--amostra:#f2f0ea}
.cor-azul-claro{--amostra:#a9c2da}
.cor-listrado-azul{--amostra:repeating-linear-gradient(90deg, #b9cce1 0 2px, #F4F0E6 2px 5px)}
.cor-preto{--amostra:#1c1c1a}
.cor-chumbo{--amostra:#4a4d4f}
.cor-azul-petroleo{--amostra:#1f4a55}
.cor-off-white{--amostra:#ebe5d6}
.cor-areia{--amostra:#cdbb9b}
.cor-verde-oliva{--amostra:#5a5d38}
.cor-cafe{--amostra:#4a3326}
.cor-verde-floresta{--amostra:#1b3a2f}
.cor-cinza-medio{--amostra:#8a8c8b}
.cor-caramelo{--amostra:#9e6430}
.cor-marinho{--amostra:#1f2a3d}
.cor-azul-ceu{--amostra:#9dbfdf}
.cor-branco-optico{--amostra:#f8f8f5}
.cor-bordo{--amostra:#5c1f2b}
.cor-bege{--amostra:#c8b28c}
.cor-indigo-escuro{--amostra:#1c2741}
.cor-grafite{--amostra:#3a3d3f}
.cor-azul-medio{--amostra:#4e6e93}
.cor-cinza-lavado{--amostra:#9b9d99}
.cor-preto-cafe{--amostra:linear-gradient(135deg, #1c1c1a 50%, #4a3326 50%)}
.cor-preto-caramelo{--amostra:linear-gradient(135deg, #1c1c1a 50%, #9e6430 50%)}
.cor-onix{--amostra:#151515}
.cor-olho-de-tigre{--amostra:#8a5a24}
.foco-50-15{object-position:50% 15%}