/* css/tokens.css */
/* Serravero — tokens do design system · Piloto 1 (contrato §3 + ERRATA v2).
   Origem: [BB-IV x.y] Brand Book de Identidade Visual; [REF:xx] engenharia reversa (research/_sintese/SINTESE.md);
   [P1 §x] docs/CONTRATO-PILOTO-1.md; [E#] errata v2 do contrato. Relações das referências, nunca o número fixo: clamp().

   CONTRASTE (WCAG 2.x, calculado; AA = 4,5 texto normal · 3 texto ≥ 24 px ou 19 px negrito · 3 componente de UI)
   ┌─────────────────────────────┬────────┬─────────────────────────────────────────────────────────┐
   │ par (texto / fundo)          │ razão  │ uso permitido                                           │
   ├─────────────────────────────┼────────┼─────────────────────────────────────────────────────────┤
   │ madeira  / branco            │ 16,47  │ texto corrido (AAA)                                      │
   │ madeira  / superficie        │ 15,12  │ texto corrido (AAA)                                      │
   │ madeira  / marfim            │ 14,47  │ texto corrido (AAA)                                      │
   │ madeira  / estudio           │ 13,01  │ texto sobre o fundo da foto de produto (AAA)             │
   │ verde    / branco            │ 12,96  │ títulos, links, botão contorno (AAA)                     │
   │ verde    / superficie        │ 11,89  │ idem (AAA)                                               │
   │ verde    / marfim            │ 11,39  │ idem (AAA)                                               │
   │ verde    / estudio           │ 10,23  │ coração/ícones sobre foto de produto (AAA)               │
   │ texto-2  / branco            │  6,15  │ texto secundário, parcela, legenda (AA)                  │
   │ texto-2  / superficie        │  5,65  │ idem (AA)                                                │
   │ texto-2  / marfim            │  5,41  │ idem (AA)                                                │
   │ texto-2  / estudio (#E8E4DE) │  4,86  │ idem (AA)                                                │
   │ salvia   / branco            │  5,09  │ ícones e fios funcionais (AA)                            │
   │ marfim   / verde             │ 11,39  │ botão primário, barra de avisos, rodapé (AAA)            │
   │ branco   / verde             │ 12,96  │ idem (AAA)                                               │
   │ marfim   / madeira           │ 14,47  │ faixas escuras com foto (AAA)                            │
   │ taupe    / madeira           │ 10,75  │ texto secundário no escuro (AAA)                         │
   │ taupe    / verde             │  8,45  │ texto secundário no verde (AAA)                          │
   │ dourado  / madeira           │  5,78  │ foco e filete no escuro; texto ≥ 14 px no escuro (AA)    │
   │ dourado  / verde             │  4,55  │ anel de foco no verde (UI ≥ 3); texto só ≥ 19 px         │
   │ dourado  / branco            │  2,85  │ REPROVA p/ texto: só acabamento (progresso, filete, número│
   │                              │        │ grande ≥ 48 px = decorativo, sempre com texto real ao lado)│
   │ dourado  / superficie        │  2,62  │ idem: nunca texto                                         │
   │ erro     / branco            │  9,37  │ mensagem de erro (sempre com texto, nunca só cor)         │
   │ texto-2  / taupe             │  4,02  │ só estado desabilitado (isento pelo WCAG 1.4.3)           │
   │ --fio-forte / branco         │  1,81  │ borda decorativa (o controle se identifica pelo ícone)    │
   │ madeira (fio do campo)/branco│ 16,47  │ fio inferior do campo de formulário (UI ≥ 3)              │
   └─────────────────────────────┴────────┴─────────────────────────────────────────────────────────┘ */

@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: paleta da marca [BB-IV 02] ---------- */
  --verde: #17372D;          /* acento institucional: avisos, botão principal, wordmark, links, rodapé */
  --madeira: #18211E;        /* texto corrido; faixas escuras COM foto */
  --marfim: #F4F0E6;         /* superfícies de marca: gaveta da seleção, guia de medidas, mega-menu */
  --dourado: #B29562;        /* acabamento ≤ 5%: progresso do carrossel, sublinhado ativo, filete. Nunca texto pequeno em claro */
  --taupe: #D8D0C0;          /* desabilitado; texto secundário no escuro */
  --salvia: #65716B;         /* ícones e fios funcionais */
  --salvia-texto: #59645F;   /* texto secundário (6,15:1 no branco) */

  /* ---------- Cor: superfícies do Piloto 1 [P1 §3.1, decisão R4 do dono: fundo branco] ---------- */
  --branco: #FFFFFF;
  --superficie: #F7F5F0;     /* faixas de respiro (serviços, consultivo, newsletter); derivado do marfim, nunca azulado */
  /* Fundo da foto de produto — valor FINAL medido pelo agente fotos-produto (L* 90,7; 1,27:1 contra o branco).
     O card usa a mesma cor por trás da imagem. */
  --estudio: #E8E4DE;

  /* ---------- Papéis (redefinidos por .escuro / .verde / .marfim etc. em base.css) ---------- */
  --fundo: var(--branco);
  --texto: var(--madeira);
  --texto-2: var(--salvia-texto);
  --titulo: var(--verde);
  --acao: var(--verde);
  --acao-hover: var(--madeira);
  --acao-texto: var(--marfim);
  --fio: rgba(24, 33, 30, .12);           /* fio de 1 px sobre claro */
  --fio-forte: rgba(24, 33, 30, .28);     /* contorno de controle discreto (setas, caixas de tamanho) */
  --fio-escuro: rgba(244, 240, 230, .18); /* fio de 1 px sobre madeira/verde */
  --foco: var(--verde);                   /* anel verde no claro; dourado no escuro (.escuro/.verde) */
  --erro: #7A2E22;                        /* terracota escuro: 9,37:1 no branco; sempre com texto */

  /* ---------- Nomes antigos (v0) remapeados — continuam funcionando ---------- */
  --marfim-2: var(--estudio);             /* era #EDE7DA (superfície de card/estúdio claro) → fundo de foto */
  --madeira-2: #202B27;                   /* camada sobre madeira */

  /* ---------- Tipografia [P1 §3.2 + E2: dentro do manual BB-IV 03.4] ----------
     Cormorant 500/600 só em título; Manrope em texto, interface, preço, botão. clamp() entre 390 e 1440 px. */
  --serif: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
  --sans: "Manrope", "Helvetica Neue", Arial, sans-serif;
  --display: clamp(2.75rem, .32rem + 5.769vw, 5.5rem);   /* E33: 44 (390) · 49 (768) · 64,2 (1024) · 88 (1440) [manual 64–88 a partir de 1024; mín. 44] */
  --h1: clamp(2.25rem, .91rem + 2.885vw, 3.5rem);        /* E33: 36 (390) · 36,7 (768) · 44,1 (1024) · 56 (1440) [manual 44–56; mín. 36] */
  --h2: clamp(1.75rem, .65rem + 1.923vw, 2.375rem);      /* E33: 28 (390) · 30,1 (1024) · 38 (1440) [manual 30–38, Cormorant 600; mín. 28] */
  --h3: clamp(1.25rem, .765rem + .9615vw, 1.625rem);     /* E33: 20 (390) · 22,1 (1024) · 26 (1440) [manual 22–26, Manrope 600; mín. 20] */
  --h4: clamp(1.0625rem, 1.04rem + .1vw, 1.125rem);      /* 17 → 18 [título de bloco, Manrope 600] */
  --body-l: clamp(1.125rem, 1.08rem + .19vw, 1.25rem);   /* 18 → 20 [Body L 18–20] */
  --body: 1rem;                                          /* 16 [Body 16–18] */
  --ui: .875rem;                                         /* 14 [Small 13–14]: interface, nome no card */
  --label: .75rem;                                       /* 12 [Label 11–13]: caixa alta com tracking; nunca acima de título */
  --botao-fonte: .8125rem;                               /* 13: botão e menu em caixa alta [REF:BF 13 px, 0,115 em] */
  --track-label: .1em;                                   /* +10% [BB-IV 03.3: +6 a +12%] [REF:BF 0,10–0,15] */
  --track-ui: .02em;
  --lh-titulo: 1.05;                                     /* [BB-IV 03.2 90–110%] */
  --lh-texto: 1.6;                                       /* [BB-IV 03.3 145–160%] */
  --small: var(--ui);                                    /* nome antigo */
  /* Preço [E30, matriz §d]: Manrope 500 tabular; parcela abaixo, regular, --texto-2, ≈ 0,72 do preço */
  --preco-card: clamp(.9375rem, .91rem + .1vw, 1rem);    /* 15 → 16 */
  --parcela-card: clamp(.6875rem, .66rem + .1vw, .75rem);/* 11 → 12 (≈ 0,72) */
  --preco-pdp: clamp(1.375rem, 1.33rem + .19vw, 1.5rem); /* 22 → 24 */
  --parcela-pdp: clamp(.75rem, .73rem + .1vw, .8125rem); /* 12 → 13 */

  /* ---------- Espaço, grade, forma [P1 §3.3] ---------- */
  --s1: .5rem; --s2: 1rem; --s3: 1.5rem; --s4: 2rem; --s5: 3rem; --s6: 4rem; --s7: 6rem; --s8: 8rem;
  --secao: clamp(4rem, 2.7rem + 5.333vw, 7.5rem);        /* 64 → 120 entre seções */
  --secao-cabeca: clamp(2rem, 1.63rem + 1.52vw, 3rem);   /* 32 → 48 entre o título da seção e o conteúdo */
  --margem: clamp(1rem, 4.571vw - .114rem, 4rem);        /* margem lateral 16 (390) · 33 (768) · 45 (1024) · 64 (1440) */
  --gutter: clamp(1rem, .81rem + .76vw, 1.5rem);         /* espaço da grade 16 → 24 */
  --gutter-card: clamp(1rem, .9rem + .4vw, 1.25rem);     /* entre cards 16 → 20 */
  --container: 82.5rem;                                  /* 1320 [REF:DU 91,7% em 1440] */
  --texto-max: 38rem;                                    /* ≈ 65–70 caracteres [BB-IV 03.5] */
  --raio: 0;
  --sombra-painel: 0 24px 48px -28px rgba(24, 33, 30, .38); /* só mega-menu, gavetas, busca */

  /* ---------- Alturas do topo [P1 §3.3; REF:BF/VV header ≈ 9–10% da tela] ---------- */
  --avisos-h: 2.25rem;            /* 36 px: barra de avisos (T1) */
  --header-h: 4.75rem;            /* 76 px no desktop (72–80) */
  --header-h-compacto: 4rem;      /* 64 px ao rolar */
  --busca-m-h: 0px;               /* linha de busca sob o header: só no celular */
  --topo-total: calc(var(--avisos-h) + var(--header-h) + var(--busca-m-h));

  /* ---------- Movimento [P1 §3.5] ---------- */
  --ease: cubic-bezier(.2, .6, .2, 1);
  --t-rapida: .2s;                /* mega-menu, hover de controle */
  --t-media: .35s;                /* reveal, sublinhado */
  --t-lenta: .5s;                 /* cross-fade do card */
  --t-carrossel: .45s;
  --reveal-y: 12px;

  /* ---------- Extensões (nomes mantidos da v0) ---------- */
  --costura: 2px;                 /* [REF:VV] costura entre mídias de um mosaico */
  --wordmark: clamp(8.25rem, 6.5rem + 4.4vw, 12rem);   /* header */
  --wordmark-compacto: 9.5rem;                          /* ≥ 120 px [BB-IV 01] */
  --toque: 2.75rem;               /* 44 px: alvo mínimo */
  --card-proporcao: 2 / 3;        /* E14: proporção nativa das fotos (refs 0,58–0,73) */
  --topo-fixo: calc(var(--header-h-compacto) + var(--s3)); /* deslocamento de sticky sob o header compacto */
}

@media (max-width: 1023px) {
  :root { --header-h: 4.5rem; }   /* 72 */
}
@media (max-width: 767px) {
  :root {
    --header-h: 3.625rem;         /* 58 px (56–60) */
    --header-h-compacto: 3.625rem;
    --busca-m-h: 3.25rem;         /* 52 px: linha de busca extra no celular (T2) */
    --avisos-h: 2.125rem;         /* 34 */
  }
}

/* css/base.css */
/* Serravero — base · Piloto 1: reset, tipografia, links, botões, superfícies, layout, foco e reveal.
   Camadas: token → base → componente → página. Raio 0; sombra só em painel flutuante; fundo branco (R4). */

*, *::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));
  background: var(--fundo);
}
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;
  overflow-x: clip;   /* sangrias de 100vw (carrossel, hero) nunca criam rolagem lateral; clip não quebra o sticky */
}
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, h5, p, figure, blockquote, dl, dd) { margin: 0; }
hr { border: 0; border-top: 1px solid var(--fio); margin: 0; }
::selection { background: var(--verde); color: var(--marfim); }

/* ---------- Tipografia [P1 §3.2 + E2] ---------- */
.display, .h1, .h2, h1, h2 {
  font-family: var(--serif); font-weight: 600; color: var(--titulo);
  line-height: var(--lh-titulo); letter-spacing: -.01em; text-wrap: balance; hyphens: manual;
}
.display { font-size: var(--display); line-height: .98; letter-spacing: -.015em; }
h1, .h1 { font-size: var(--h1); }
h2, .h2 { font-size: var(--h2); line-height: 1.08; }
/* H3 e H4 em Manrope 600 (E2): o subtítulo informa; a serifa fica nos títulos de página e de seção */
h3, .h3 { font: 600 var(--h3)/1.25 var(--sans); letter-spacing: -.005em; color: var(--titulo); text-wrap: balance; }
h4, .h4 { font: 600 var(--h4)/1.35 var(--sans); color: var(--texto); text-wrap: balance; }
.titulo-serif { font-family: var(--serif); font-weight: 500; letter-spacing: 0; }   /* subtítulo editorial em Cormorant 500 */
.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, .ui { font-size: var(--ui); line-height: 1.5; }
.label, .etiqueta {
  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; }
/* Preço [P1 §3.4 + E7 + E30]: valor em Manrope 500 tabular; parcela logo ABAIXO, menor, regular, texto-2.
   Padrão = card (15–16 / 11–12). Na PDP: .preco--pdp / .parcela--pdp (22–24 / 12–13). Nunca Cormorant. */
.preco { font: 500 var(--preco-card)/1.3 var(--sans); font-variant-numeric: lining-nums tabular-nums; color: var(--texto); letter-spacing: .005em; }
.parcela { display: block; margin-top: .1rem; font: 400 var(--parcela-card)/1.4 var(--sans); font-variant-numeric: lining-nums tabular-nums; color: var(--texto-2); }
.preco--pdp { font-size: var(--preco-pdp); line-height: 1.2; }
.parcela--pdp { font-size: var(--parcela-pdp); margin-top: .25rem; }

/* Título → texto ≈ 0,4–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: .45em; }
.pilha-s > * + * { margin-top: var(--s1); }
.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; }
a:hover { text-decoration-color: var(--dourado); }
/* .link: sublinhado de 1 px que RECOLHE para a direita no hover e volta pela esquerda ao sair */
.link {
  display: inline-flex; align-items: center; gap: .55em;
  font: 600 var(--ui)/1.25 var(--sans); letter-spacing: var(--track-ui); 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), color var(--t-rapida) var(--ease);
}
.link:hover { background-position: 100% 100%; background-size: 0 1px; }
.link .seta, .link .icone { transition: transform var(--t-media) var(--ease); }
.link:hover .seta, .link:hover .icone { transform: translateX(.25em); }
.link--etiqueta { font: 600 var(--label)/1.3 var(--sans); letter-spacing: var(--track-label); text-transform: uppercase; }
.link--discreto { font-weight: 500; color: inherit; }
button.link { border: 0; background-color: transparent; padding-inline: 0; cursor: pointer; }

/* ---------- Botões ---------- [BB-IV 02.3 principal verde/marfim] [REF:DU sólido + contorno que inverte; BF caixa alta 0,1 em]
   Altura 48; 13 px caixa alta, tracking .1em; Manrope 600 (nunca Cormorant). */
.botao {
  --b-bg: var(--acao); --b-fg: var(--acao-texto); --b-bd: var(--acao);
  --b-bg-h: var(--acao-hover); --b-fg-h: var(--acao-texto); --b-bd-h: var(--acao-hover);
  display: inline-flex; align-items: center; justify-content: center; gap: .7em;
  min-height: 3rem; padding: .75rem 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(--botao-fonte)/1.2 var(--sans); letter-spacing: var(--track-label); text-transform: uppercase;
  transition: background-color var(--t-rapida) var(--ease), color var(--t-rapida) var(--ease), border-color var(--t-rapida) var(--ease);
}
.botao:not([disabled]):not([aria-disabled="true"]):hover { background: var(--b-bg-h); color: var(--b-fg-h); border-color: var(--b-bd-h); }
.botao .icone { inline-size: 1.125rem; block-size: 1.125rem; }
/* contorno verde que inverte */
.botao--contorno { --b-bg: transparent; --b-fg: var(--acao); --b-bd: var(--acao); --b-bg-h: var(--acao); --b-fg-h: var(--acao-texto); --b-bd-h: var(--acao); }
/* para fundo escuro ou foto (também automático dentro de .escuro/.verde, que redefinem --acao) */
.botao--claro { --b-bg: var(--marfim); --b-fg: var(--verde); --b-bd: var(--marfim); --b-bg-h: var(--branco); --b-fg-h: var(--madeira); --b-bd-h: var(--branco); }
.botao--claro.botao--contorno, .botao--contorno-claro { --b-bg: transparent; --b-fg: var(--marfim); --b-bd: rgba(244, 240, 230, .6); --b-bg-h: var(--marfim); --b-fg-h: var(--madeira); --b-bd-h: var(--marfim); }
.botao--pequeno { min-height: var(--toque); padding: .55rem 1.25rem; }
.botao--bloco { width: 100%; }
.botao[disabled], .botao[aria-disabled="true"] { --b-bg: var(--taupe); --b-fg: var(--salvia-texto); --b-bd: var(--taupe); cursor: not-allowed; }

/* ---------- Superfícies ---------- [R4: fundo branco; a marca nos acentos] */
.superficie, .secao--superficie { background: var(--superficie); }
.escuro, .verde {
  color: var(--marfim); --foco: var(--dourado); --texto: var(--marfim); --texto-2: var(--taupe); --titulo: var(--marfim);
  --fio: var(--fio-escuro); --fio-forte: rgba(244, 240, 230, .4);
  --acao: var(--marfim); --acao-hover: var(--branco); --acao-texto: var(--verde);
}
.escuro { background: var(--madeira); --acao-texto: var(--madeira); }
.verde { background: var(--verde); }
/* superfícies claras redefinem os papéis (não herdam o texto claro de um .escuro/.verde ao redor) */
.claro, .marfim, .marfim-2, .taupe, .superficie, .secao--superficie {
  color: var(--madeira); --texto: var(--madeira); --texto-2: var(--salvia-texto); --titulo: var(--verde);
  --fio: rgba(24, 33, 30, .12); --fio-forte: rgba(24, 33, 30, .28);
  --acao: var(--verde); --acao-hover: var(--madeira); --acao-texto: var(--marfim); --foco: var(--verde);
}
.claro { background: var(--fundo); }
.marfim { background: var(--marfim); }
.marfim-2 { background: var(--superficie); }   /* v0: marfim um passo abaixo → hoje a faixa de respiro */
.taupe { background: var(--taupe); --texto-2: var(--madeira); }
.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; }
.container--texto { width: min(100% - 2 * var(--margem), 44rem); margin-inline: auto; }
.container--total { width: 100%; }
.sangria { width: 100vw; margin-inline: calc(50% - 50vw); }   /* foge do container até a borda da tela */
.secao { padding-block: var(--secao); }
.secao--curta { padding-block: calc(var(--secao) * .6); }
.secao--sem-topo { padding-top: 0; }
.secao--sem-base { padding-bottom: 0; }
.secao--fio { border-top: 1px solid var(--fio); }
.secao--colada { padding-top: 0; }   /* segunda seção branca seguida: não soma vão (use quando a anterior também é branca) */
.cabeca { margin-bottom: var(--secao-cabeca); }
.grade-12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
.grade { display: grid; gap: var(--gutter); grid-template-columns: repeat(var(--colunas, 1), minmax(0, 1fr)); }
.grade--2 { --colunas: 1; }
.grade--3, .grade--4 { --colunas: 2; }
@media (min-width: 768px) { .grade--2 { --colunas: 2; } .grade--3 { --colunas: 3; } .grade--4 { --colunas: 3; } }
@media (min-width: 1200px) { .grade--4 { --colunas: 4; } }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); }
.entre { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--s2) var(--s4); }
.proporcao-2x3 { aspect-ratio: 2 / 3; }
.proporcao-4x5 { aspect-ratio: 4 / 5; }
.proporcao-3x2 { aspect-ratio: 3 / 2; }
.proporcao-16x9 { aspect-ratio: 16 / 9; }
.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 ---------- verde no claro, dourado no escuro; só no teclado */
:focus-visible { outline: 2px solid var(--foco); outline-offset: 3px; }
:focus:not(:focus-visible) { outline: none; }
.escuro :focus-visible, .verde :focus-visible { outline-color: var(--dourado); }
:is(.escuro, .verde) :is(.claro, .marfim, .marfim-2, .taupe, .superficie) :focus-visible { outline-color: var(--verde); }

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

/* ---------- Reveal [P1 §3.5; REF:VV curto] ----------
   0,35 s, 12 px, dispara 20% ANTES de entrar na tela. Visível por padrão: só esconde com <html class="js">,
   que revelar.js põe depois de liberar a 1ª dobra. Rolagem rápida: o que já passou ou já está na tela aparece sem
   transição (nunca há bloco vazio). Reduced-motion: sem animação. */
.revelar { transition: opacity var(--t-media) var(--ease), transform var(--t-media) var(--ease); transition-delay: calc(var(--ordem, 0) * 60ms); }
.js .revelar:not(.visivel) { opacity: 0; transform: translateY(var(--reveal-y)); }
.revelar.instantaneo { transition: none; }

@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; }
}
@media print {
  .js .revelar:not(.visivel) { opacity: 1; transform: none; }
}

/* ---------- Véu das gavetas e painéis (movido de filtros.css — usado por menu, seleção, guia e filtros) ---------- */
.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; }

/* css/componentes/topo.css */
/* Header (T2) — dono: topo-menu.
   Branco e fixo como as 3 referências; ~10% da tela no desktop (88 px em 900, VV 89, BF 97) e compacta ao rolar (64).
   Desktop: wordmark verde à esquerda · menu central em caixa alta 13 px/.1em · busca visível · Minha seleção.
   Celular: menu à esquerda · wordmark ao centro · seleção à direita · linha de busca sob o header (BF/VV/DU).
   Sem ícone de conta (exceção proposta ao dono: não existe login). */
.topo {
  --topo-fundo: #FFFFFF;
  --topo-link: 0.8125rem;              /* 13 px */
  position: sticky; top: 0; z-index: 60;
  background: var(--topo-fundo); color: var(--texto);
  border-bottom: 1px solid var(--fio);
}
/* sem sombra de elevação: a separação é o fio de 1 px (E36) */

.topo__barra {
  display: grid; align-items: center; column-gap: clamp(1rem, 2vw, 2rem);
  grid-template-columns: auto 1fr auto auto;
  grid-template-areas: "marca nav busca selecao";
  height: var(--header-h); transition: height var(--t-media) var(--ease);
}
.topo.rolado .topo__barra { height: var(--header-h-compacto); }

/* Wordmark do kit (partes.mjs) — ≥ 120 px [BB-IV 01] */
.topo__marca { grid-area: marca; display: flex; align-items: center; min-height: var(--toque); color: inherit; line-height: 0; }
.topo__marca .wordmark { width: clamp(8.5rem, 7rem + 2.8vw, 10.5rem); height: auto; transition: width var(--t-media) var(--ease); }
.topo.rolado .topo__marca .wordmark { width: clamp(8rem, 7rem + 1.6vw, 9rem); }

/* Menu central */
.topo__nav { grid-area: nav; justify-self: center; height: 100%; }
.topo__nav > ul { display: flex; align-items: stretch; height: 100%; gap: clamp(1.1rem, 2.1vw, 2.25rem); }
.topo__item { display: flex; align-items: stretch; }
.topo__link {
  position: relative; display: inline-flex; align-items: center; min-height: var(--toque);
  padding: 0; border: 0; background: none; cursor: pointer;
  font: 600 var(--topo-link)/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
  color: var(--texto); text-decoration: none;
}
/* sublinhado de acabamento: dourado (≤ 5%), cresce do centro (VV) — nunca é o único sinal: o item atual ganha peso */
.topo__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: calc(50% - 1.05em); height: 2px;
  background: var(--dourado); transform: scaleX(0); transition: transform var(--t-rapida) var(--ease);
}
.topo__link:hover::after, .topo__link[aria-current="page"]::after, .topo__link[data-atual]::after,
.topo__link[aria-expanded="true"]::after { transform: scaleX(1); }
.topo__link[aria-current="page"], .topo__link[data-atual] { color: var(--verde); }
.topo__link--mega { display: none; }
.com-js .topo__link--mega { display: inline-flex; }
.com-js .topo__link--sem-js { display: none; }
.js-falhou .topo__link--mega { display: none; }
.js-falhou .topo__link--sem-js { display: inline-flex; }

/* Botões de ícone (44 × 44) */
.topo__icone {
  position: relative; display: inline-grid; place-items: center;
  width: var(--toque); height: var(--toque); padding: 0; border: 0; background: none; color: var(--texto); cursor: pointer;
}
.topo__icone .icone { width: 22px; height: 22px; }
.topo__icone:hover { color: var(--verde); }
.topo__selecao { grid-area: selecao; margin-right: -.6rem; }
.topo__contador {
  position: absolute; top: 4px; right: 1px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 0;
  background: var(--verde); color: #FFFFFF; font: 600 .6875rem/18px var(--sans); text-align: center;
  font-variant-numeric: tabular-nums;
}
.topo__contador[hidden] { display: none; }
.topo__menu-bt, .topo__busca-bt, .topo__menu-sem-js { display: none; }

/* ---------- 1024–1279: menu inteiro, busca vira campo curto ---------- */
@media (min-width: 1024px) and (max-width: 1279px) {
  .topo { --topo-link: .75rem; }
  .topo__nav > ul { gap: 1.1rem; }
  .topo__barra { column-gap: 1rem; }
  .topo__marca .wordmark, .topo.rolado .topo__marca .wordmark { width: 8rem; }
}

/* ---------- Celular e tablet (< 1024) ---------- */
@media (max-width: 1023px) {
  .topo__barra {
    height: auto; min-height: 0; column-gap: .25rem; row-gap: 0;
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas: "esq marca selecao" "busca busca busca";
  }
  .topo.rolado .topo__barra { height: auto; }
  .topo__nav { display: none; }
  .topo__menu-bt { grid-area: esq; justify-self: start; margin-left: -.6rem; }
  .com-js .topo__menu-bt { display: inline-grid; }
  .sem-js .topo__menu-sem-js, .js-falhou .topo__menu-sem-js {
    grid-area: esq; justify-self: start; display: inline-flex; align-items: center; min-height: var(--toque); color: var(--texto);
  }
  .js-falhou .topo__menu-bt { display: none; }
  /* lupa só aparece quando a linha de busca recolhe (rolando para baixo) */
  .topo__busca-bt { grid-area: esq; justify-self: start; margin-left: calc(var(--toque) - .6rem); }
  .topo__marca { justify-self: center; height: var(--header-h-compacto); display: flex; align-items: center; padding: 0; }
  .topo__marca .wordmark, .topo.rolado .topo__marca .wordmark { width: clamp(8.25rem, 7rem + 3vw, 9.5rem); }
  .topo__selecao { justify-self: end; }
  .topo .busca { grid-area: busca; margin-bottom: .5rem; transition: opacity var(--t-rapida) var(--ease), transform var(--t-rapida) var(--ease), visibility 0s; }
  /* A linha de busca recolhe sem mudar a altura do header (sem pulo nem laço de ancoragem de rolagem): o header fica
     transparente e duas faixas brancas (barra e busca) desenham o fundo; ao recolher, só a faixa da busca some. */
  .topo { background: transparent; border-bottom: 0; overflow-x: clip; pointer-events: none; }
  .topo__barra { position: relative; isolation: isolate; }
  .topo__barra > * { pointer-events: auto; }
  .topo__barra::before, .topo__barra::after {
    content: ""; position: absolute; z-index: -1; left: 50%; width: 100vw; transform: translateX(-50%); background: var(--topo-fundo);
  }
  .topo__barra::before { top: 0; height: var(--header-h-compacto); border-bottom: 1px solid var(--fio); }
  .topo__barra::after { top: var(--header-h-compacto); bottom: 0; border-bottom: 1px solid var(--fio); transition: opacity var(--t-rapida) var(--ease); }
  .com-js .topo.busca-recolhida:not(.busca-aberta) .topo__barra::after { opacity: 0; }
  .com-js .topo.busca-recolhida:not(.busca-aberta) .busca { opacity: 0; transform: translateY(-6px); visibility: hidden; transition: opacity var(--t-rapida) var(--ease), transform var(--t-rapida) var(--ease), visibility 0s linear var(--t-rapida); }
  .com-js .topo.busca-recolhida:not(.busca-aberta) .topo__busca-bt { display: inline-grid; }
}
@media (max-width: 1023px) and (min-width: 768px) {
  .topo .busca { max-width: 40rem; justify-self: center; width: 100%; }
}

/* Compatibilidade: botões de texto "Menu/Fechar" ainda usados fora do header (gaveta de filtros). */
.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-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));
}
.botao--compacto { min-height: var(--toque); padding: .6rem 1.1rem; font-size: var(--label); letter-spacing: var(--track-label); text-transform: uppercase; }

/* css/componentes/menu.css */
/* Menu do celular (E21) — dono: topo-menu. Gaveta da esquerda (as 3), lista vertical em caixa alta, linhas de 52 px
   separadas por fio, seta para submenu, sem fotos. Foco preso e Esc pelo painel() do núcleo; véu atrás. */
.menu {
  position: fixed; top: 0; bottom: 0; left: 0; z-index: 80;
  display: flex; flex-direction: column; width: min(88vw, 26rem);
  background: #FFFFFF; color: var(--texto); box-shadow: var(--sombra-painel);
  transform: translateX(-100%); transition: transform var(--t-media) var(--ease);
}
.menu[hidden] { display: none; }
.menu.aberto { transform: none; }
.menu__barra {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex: none;
  min-height: var(--header-h-compacto); padding-inline: 1.25rem .5rem; border-bottom: 1px solid var(--fio);
}
.menu__marca { line-height: 0; color: inherit; }
.menu__marca .wordmark { width: 8.5rem; height: auto; }
.menu__fechar { display: grid; place-items: center; width: var(--toque); height: var(--toque); padding: 0; border: 0; background: none; color: var(--texto); cursor: pointer; }
.menu__fechar .icone { width: 22px; height: 22px; }
.menu__nav { position: relative; flex: 1; overflow-y: auto; overscroll-behavior: contain; }
.menu__raiz, .menu__sub { padding: .5rem 1.25rem 2.5rem; }
.menu__raiz[hidden], .menu__sub[hidden] { display: none; }
.menu__sub { animation: menu-entra var(--t-media) var(--ease); }
@keyframes menu-entra { from { transform: translateX(16px); opacity: 0; } to { transform: none; opacity: 1; } }
.menu__lista { display: grid; }
.menu__linha {
  display: flex; align-items: center; gap: .75rem; width: 100%; min-height: 3.25rem; padding: 0; margin: 0;
  border: 0; border-bottom: 1px solid var(--fio); background: none; cursor: pointer; text-align: left;
  font: 600 .8125rem/1.25 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--texto); text-decoration: none;
}
.menu__linha .menu__seta { margin-left: auto; width: 18px; height: 18px; color: var(--texto-2); }
.menu__linha:hover { color: var(--verde); }
.menu__linha[aria-current="page"] { color: var(--verde); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .3em; }
.menu__linha--forte { color: var(--verde); }
.menu__linha--selecao .icone { width: 20px; height: 20px; }
.menu__selecao-qtd { margin-left: auto; min-width: 1.5rem; height: 1.5rem; padding: 0 .4rem; border-radius: 0; background: var(--verde); color: #FFFFFF; font-size: .75rem; line-height: 1.5rem; text-align: center; letter-spacing: 0; }
.menu__selecao-qtd[hidden] { display: none; }
.menu__voltar {
  display: inline-flex; align-items: center; gap: .5rem; min-height: var(--toque); margin-left: -.35rem; padding: 0 .35rem; border: 0; background: none; cursor: pointer;
  font: 500 var(--small)/1 var(--sans); color: var(--texto-2);
}
.menu__voltar .icone { width: 18px; height: 18px; }
.menu__sub-titulo { margin: .25rem 0 .5rem; font: 600 1.75rem/1.1 var(--serif); color: var(--verde); }
.menu__grupo { margin: 1.5rem 0 .25rem; font: 600 var(--label)/1.2 var(--sans); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--texto-2); }
.menu__sub .menu__lista .menu__linha:not(.menu__linha--forte) { text-transform: none; letter-spacing: .01em; font-weight: 500; font-size: .9375rem; min-height: 3rem; }
html.menu-aberto { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .menu { transition: none; } .menu__sub { animation: none; } }

/* css/componentes/rodape.css */
/* Rodapé (F1). Dono: agente rodape-institucionais.
   Fundo verde #17372D, texto marfim; lista de interesse inline; colunas → acordeão no celular (< 768 px);
   wordmark marfim grande (100% da largura útil ≥ 60% [VV]). Contrastes medidos sobre #17372D:
   marfim 11,3:1 · taupe 9,0:1 · erro #F3C1B4 8,0:1 · fio do campo (marfim 55%) 4,6:1 · foco dourado 4,5:1. */
.rodape {
  --rod-fundo: var(--verde, #17372D);
  --rod-texto: var(--marfim, #F4F0E6);
  --rod-texto-2: var(--taupe, #D8D0C0);
  --rod-fio: rgba(244, 240, 230, .2);
  --rod-campo: rgba(244, 240, 230, .55);
  --rod-erro: #F3C1B4;
  background: var(--rod-fundo); color: var(--rod-texto);
  font-family: var(--sans, "Manrope", sans-serif);
}
.rodape a { color: var(--rod-texto); }
.rodape :focus-visible { outline: 2px solid var(--dourado, #B29562); outline-offset: 3px; }

/* ---------- Lista de interesse (newsletter das referências) ---------- */
.rodape__lista { border-bottom: 1px solid var(--rod-fio); }
.pagina-lista .rodape__lista { display: none; } /* a página /lista/ já é o formulário completo */
.rodape__lista-grade {
  display: grid; gap: var(--s4, 2rem);
  padding-block: clamp(3rem, 2rem + 3vw, 5rem);
}
.rodape__lista-texto { display: grid; gap: var(--s2, 1rem); align-content: start; max-width: 30rem; }
.rodape__lista-titulo {
  font: 600 var(--h2)/1.1 var(--serif, "Cormorant Garamond", serif);
  color: var(--rod-texto); margin: 0; letter-spacing: -.005em;
}
.rodape__lista-texto p { color: var(--rod-texto-2); font-size: var(--body, 1rem); line-height: 1.55; margin: 0; }

.rodape__form { display: grid; gap: var(--s3, 1.5rem); min-width: 0; }
.rodape__form[hidden] { display: none; }
.rodape__campos { display: grid; gap: var(--s3, 1.5rem); align-items: start; }
.rodape .campo > label { color: var(--rod-texto); font: 600 var(--ui)/1.3 var(--sans, sans-serif); }
.rodape .campo__dica { color: var(--rod-texto-2); font-weight: 400; margin-left: .35rem; }
.rodape .campo input:not([type="checkbox"]) {
  width: 100%; min-height: 3rem; padding: .7rem 0; border: 0; border-radius: 0;
  border-bottom: 1px solid var(--rod-campo); background: transparent; color: var(--rod-texto);
  font: 400 var(--body, 1rem)/1.4 var(--sans, sans-serif);
  transition: border-color .2s var(--ease, ease), box-shadow .2s var(--ease, ease);
}
.rodape .campo input::placeholder { color: var(--rod-texto-2); opacity: .85; }
.rodape .campo input:not([type="checkbox"]):focus-visible {
  outline: none; border-bottom-color: var(--rod-texto); box-shadow: 0 1px 0 0 var(--rod-texto);
}
.rodape .campo [aria-invalid="true"] { border-bottom-color: var(--rod-erro) !important; box-shadow: 0 1px 0 0 var(--rod-erro); }
.rodape .campo__erro { color: var(--rod-erro); font-size: var(--ui); font-weight: 600; margin: 0; }
.rodape .campo__erro[hidden] { display: none; }

.rodape__optin { display: grid; grid-template-columns: auto 1fr; gap: var(--s2, 1rem); align-items: start; }
.rodape__optin input { width: 1.25rem; height: 1.25rem; margin: .15rem 0 0; accent-color: var(--rod-texto); cursor: pointer; }
.rodape__optin label { font: 400 var(--ui)/1.55 var(--sans, sans-serif); color: var(--rod-texto-2); cursor: pointer; max-width: 46rem; }
.rodape__optin a { color: var(--rod-texto); text-decoration: underline; text-underline-offset: .2em; }
.rodape__nota { margin: 0; font-size: var(--label); line-height: 1.5; color: var(--rod-texto-2); }

/* Botão claro sobre o verde (inverso do botão principal [BB-IV 02.3]); alvo ≥ 48 px */
.rodape__enviar {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 3rem; padding: .75rem 1.75rem; border: 1px solid var(--rod-texto); border-radius: 0;
  background: var(--rod-texto); color: var(--rod-fundo); cursor: pointer; white-space: nowrap;
  font: 600 var(--label)/1 var(--sans, sans-serif); letter-spacing: .1em; text-transform: uppercase;
  transition: background-color .2s var(--ease, ease), color .2s var(--ease, ease);
}
.rodape__enviar:not([disabled]):hover { background: transparent; color: var(--rod-texto); }
.rodape__enviar[disabled] { opacity: .55; cursor: not-allowed; }
.rodape__link-botao {
  min-height: 3rem; padding: .75rem .25rem; border: 0; background: none; color: var(--rod-texto); cursor: pointer;
  font: 500 var(--ui)/1 var(--sans, sans-serif); text-decoration: underline; text-underline-offset: .25em;
}

.rodape__confirmacao { display: grid; gap: var(--s2, 1rem); padding: var(--s3, 1.5rem); background: rgba(244, 240, 230, .06); border-top: 2px solid var(--dourado, #B29562); }
.rodape__confirmacao[hidden] { display: none; }
.rodape__confirmacao:focus { outline: none; }
.rodape__confirmacao p { margin: 0; color: var(--rod-texto-2); font-size: var(--ui); line-height: 1.55; }
.rodape__confirmacao strong { color: var(--rod-texto); }
.rodape__conf-titulo { margin: 0; font: 600 var(--h3)/1.25 var(--sans, sans-serif); color: var(--rod-texto); }
.rodape__conf-msg {
  width: 100%; padding: var(--s2, 1rem); border: 1px solid var(--rod-campo); border-radius: 0;
  background: rgba(0, 0, 0, .12); color: var(--rod-texto); font: 400 var(--ui)/1.55 var(--sans, sans-serif); resize: vertical;
}
.rodape__conf-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2, 1rem); }

/* celular: consentimento antes do botão (campos → opt-in → enviar → nota) */
@media (max-width: 767px) {
  .rodape__campos { display: contents; }
  .rodape__campo { order: 0; }
  .rodape__optin { order: 1; }
  .rodape__enviar[type="submit"] { order: 2; width: 100%; }
  .rodape__nota { order: 3; }
}
@media (min-width: 768px) {
  .rodape__campos { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
  .rodape__enviar[type="submit"] { margin-top: 1.55rem; } /* alinha com a linha dos campos (altura do rótulo) */
}
@media (min-width: 1024px) {
  .rodape__lista-grade { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s3, 1.5rem); align-items: start; }
  .rodape__lista-texto { grid-column: 1 / span 4; }
  .rodape__form, .rodape__confirmacao { grid-column: 6 / -1; }
}

/* ---------- Colunas → acordeão no celular ---------- */
.rodape__colunas { display: grid; padding-block: var(--s3, 1.5rem) var(--s4, 2rem); }
.rodape__titulo { margin: 0; font: 600 var(--label)/1.3 var(--sans, sans-serif); letter-spacing: .12em; text-transform: uppercase; color: var(--rod-texto); }
.rodape__links { display: grid; gap: .125rem; margin: 0; padding: 0 0 var(--s3, 1.5rem); list-style: none; }
.rodape__links li { font-size: var(--ui); line-height: 1.4; }
.rodape__links a, .rodape__estado {
  display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--rod-texto-2); text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 calc(50% + .8em) / 0 1px no-repeat;
  transition: background-size .3s var(--ease, ease), color .2s var(--ease, ease);
}
.rodape__estado { background: none; }
.rodape__links a:hover, .rodape__links a:focus-visible { color: var(--rod-texto); background-size: 100% 1px; }

/* celular: o título vira botão de acordeão (as 3 referências) */
.rodape__alternar {
  display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 3.5rem;
  padding: 0; border: 0; background: none; color: inherit; cursor: pointer; font: inherit; letter-spacing: inherit; text-transform: inherit; text-align: left;
}
.rodape__sinal { display: inline-grid; place-items: center; flex: none; width: 1.25rem; height: 1.25rem; }
.rodape__sinal .icone { width: 1.125rem; height: 1.125rem; }
.rodape .rodape__sinal .rodape__menos, .rodape .rodape__alternar[aria-expanded="true"] .rodape__mais { display: none; }
.rodape .rodape__alternar[aria-expanded="true"] .rodape__menos { display: inline-block; }
.rodape__titulo-texto { display: none; }
.rodape__coluna { border-bottom: 1px solid var(--rod-fio); }
.com-js .rodape__coluna:not(.aberta) .rodape__links { display: none; }
.sem-js .rodape__alternar .rodape__sinal, .js-falhou .rodape__alternar .rodape__sinal { display: none; }
.js-falhou .rodape__coluna .rodape__links { display: grid; }

@media (min-width: 768px) {
  .rodape__colunas { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--s3, 1.5rem); padding-block: clamp(3rem, 2rem + 2vw, 4.5rem) var(--s4, 2rem); }
  .rodape__coluna { border-bottom: 0; }
  .rodape__alternar { display: none; }
  .rodape__titulo-texto { display: block; margin-bottom: var(--s2, 1rem); }
  .com-js .rodape__coluna:not(.aberta) .rodape__links, .rodape__links { display: grid; padding-bottom: 0; }
  .rodape__links a, .rodape__estado { min-height: 2.25rem; }
}

/* ---------- Wordmark grande + base ---------- */
.rodape__marca { padding-block: clamp(2rem, 1rem + 4vw, 4.5rem) clamp(1.5rem, 1rem + 2vw, 3rem); }
.rodape__marca .wordmark { display: block; width: 100%; height: auto; }
.rodape__base {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem var(--s4, 2rem);
  padding-block: var(--s3, 1.5rem) var(--s4, 2rem); border-top: 1px solid var(--rod-fio);
  font-size: var(--label); line-height: 1.5; color: var(--rod-texto-2);
}
.rodape__base p { margin: 0; }

/* Desktop compacto (pedido da home: teto de 6.750 px): menos respiro, Coleção em 2 subcolunas, wordmark com menos margem */
@media (min-width: 1024px) {
  .rodape__lista-grade { padding-block: 2.5rem; align-items: center; }
  .rodape__lista-texto { gap: .5rem; }
  .rodape__form { gap: 1rem; }
  .rodape__colunas { padding-block: 2.5rem 1rem; }
  .rodape__titulo-texto { margin-bottom: .75rem; }
  .rodape__links a, .rodape__estado { min-height: 2rem; }
  #rod-l-colecao { grid-template-rows: repeat(5, auto); grid-auto-flow: column; column-gap: var(--s3, 1.5rem); }
  .rodape__marca { padding-block: 2.5rem 1.25rem; }
  .rodape__base { padding-block: 1rem 1.5rem; }
}

/* css/componentes/secoes.css */
/* Blocos de seção reutilizados entre páginas: cabeças, migalhas, grades editoriais, listas, passos.
   Piloto 1: sem rótulo acima de título, sem números decorativos 01–05 (checklist §3.6); hierarquia por tamanho e espaço. */
.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: var(--secao-cabeca);
}
.cabeca-secao > :is(h2, .h2) { flex: 1 1 18rem; }
.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(--label); letter-spacing: .04em; color: var(--texto-2); }
.migalhas ol { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .5rem; }
.migalhas li + li::before { content: "/"; margin-right: .5rem; color: var(--fio-forte); }
.migalhas a { color: inherit; text-decoration: none; }
.migalhas :is(a, [aria-current]) { display: inline-block; padding-block: .25rem; }
.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: block;
  padding-block: var(--s3); border-top: 1px solid var(--fio);
  font: 500 var(--h3)/1.3 var(--serif); color: var(--titulo);
}
.lista-numerada li:last-child { border-bottom: 1px solid var(--fio); }
/* checklist §3.6-2: o número decorativo 01–05 sai da tela; a ordem continua no <ol> */
.lista-numerada .numero { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.lista-nao { display: grid; }
.lista-nao li {
  padding-block: var(--s3); border-top: 1px solid var(--fio);
  font: 500 var(--h3)/1.3 var(--serif); color: var(--texto);
}
.lista-nao li:last-child { border-bottom: 1px solid var(--fio); }

/* Passos (curadoria) */
.passos { display: grid; gap: var(--s4) var(--gutter); 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); }
/* etapa real de uma jornada: discreta, em etiqueta (não é numeral decorativo grande) */
.passos__num { font: 600 var(--label)/1.3 var(--sans); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--texto-2); margin-bottom: var(--s1); }
.passos--claro .passos__num { color: var(--texto-2); }
.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(--gutter); }
@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 var(--h3)/1.3 var(--serif); color: var(--titulo); text-wrap: pretty; }

/* Canais */
.canais { display: grid; gap: var(--s4) var(--gutter); }
@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: center; min-height: var(--toque); 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;
}
.indice a .numero { display: none; }   /* sem 01–06 decorativo (§3.6-2) */
.indice a:hover { text-decoration: underline; text-underline-offset: .35em; }

/* Texto longo */
.texto-longo .h3 { color: var(--titulo); }
.texto-longo > * + * { margin-top: var(--s2); }
.texto-longo > :is(h2, h3, .h3) { margin-top: var(--s5); }
.link--discreto { background-size: 100% 1px; font-size: var(--ui); 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); }


/* css/componentes/card.css */
/* Card de produto (C1) — dono: catalogo-card.
   Foto retrato 2:3 [ERRATA E14] sobre o fundo do estúdio (sem bloco vazio: a foto entra com fade de 0,3 s);
   ponteiro fino: 2ª vista em cross-fade de 0,5 s com 0,15 s de atraso + zoom 1,02 [REF:BF .5s atrasado; VV scale];
   toque: as 2 vistas em scroll-snap horizontal com 2 marcadores [REF:VV/DU celular];
   coração "Minha seleção" no canto superior direito, fora do link [E11];
   hierarquia nome > preço > parcela > cores [REF:DU 4.5; VV]. Sem botão comprar, sem selo, sem riscado. */
.grade-produtos {
  --card-gap: clamp(1rem, .75rem + .5vw, 1.25rem);       /* 16 → 20 px */
  --colunas: 2;                                           /* celular: 2 colunas [nos 3: BF 2×190, VV 2×172, DU 2×177] */
  display: grid; grid-template-columns: repeat(var(--colunas), minmax(0, 1fr));
  gap: clamp(2rem, 1.6rem + 1vw, 2.75rem) var(--card-gap);
}
/* Grade padrão por largura [padrão "nos 3": 4 ou mais colunas em 1440 — BF 4×273, VV 4×317, DU 5×267]:
   2 colunas até 719 px, 3 de 720 a 1119 px, 4 a partir de 1120 px. Os cortes saem do teto de nitidez (E38): o arquivo
   mais curto do catálogo tem 536 px, e card ≤ 335 px CSS fica a ≤ 1,25× em DPR 2 (3 colunas em 1119 px = 329 px; em 1199 px
   seriam 349 px). Em 1440 px: 4 × 313,6 px (vão 20), ≈ 24% da largura do container, na faixa 18–24% das referências. */
@media (min-width: 720px) { .grade-produtos { --colunas: 3; } }
@media (min-width: 1120px) { .grade-produtos { --colunas: 4; } }

/* Alternador de grade da listagem (colecao.js): "padrão" (acima) ou "densa" = 1 coluna a mais (3 · 4 · 5; a DU usa 5).
   Nunca uma grade com cards maiores que a padrão. */
@media (min-width: 720px) { .grade-produtos[data-grade-modo="denso"] { --colunas: 4; } }
@media (min-width: 1120px) { .grade-produtos[data-grade-modo="denso"] { --colunas: 5; } }

.card { position: relative; display: flex; flex-direction: column; min-width: 0; height: 100%; container-type: inline-size; }
.card[hidden] { display: none; }

/* ---------- Mídia ---------- */
.card__midia {
  position: relative; aspect-ratio: 2 / 3; overflow: hidden;
  background: var(--estudio, #E8E4DE);
}
.card__vistas { display: block; position: relative; width: 100%; height: 100%; color: inherit; }
.card__vista { position: absolute; inset: 0; display: block; overflow: hidden; }
.card__vista picture, .card__vista img { display: block; width: 100%; height: 100%; }
.card__vista img {
  object-fit: cover;
  transition: opacity .3s ease-out, transform .5s var(--ease);
}
/* fade de entrada só com JS ativo (sem JS ou JS falho: a foto aparece direto) */
.com-js:not(.js-falhou) .card__vista img:not(.carregada) { opacity: 0; }
.card__vista--2 { opacity: 0; transition: opacity .5s var(--ease) .15s; }

@media (hover: hover) and (pointer: fine) {
  .card:hover .card__vista--2 { opacity: 1; }
  .card:hover .card__vista img { transform: scale(1.02); }
  .card:not(:hover) .card__vista--2 { transition-delay: 0s; }
}

.card__marcas { display: none; }
@media (hover: none), (pointer: coarse) {
  .card__vistas--duas {
    display: flex; overflow-x: auto; overflow-y: hidden; 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; scroll-snap-stop: always; opacity: 1; transition: none; }
  .card__marcas {
    display: flex; position: absolute; left: 50%; bottom: .75rem; transform: translateX(-50%);
    gap: 6px; pointer-events: none;
  }
}
.card__marcas span { width: 16px; height: 2px; background: var(--madeira); box-shadow: 0 0 0 1px rgba(255, 255, 255, .45); opacity: .3; transition: opacity var(--t-rapida) var(--ease); }
.card__marcas span.ativo { opacity: .85; }
.midia--escura .card__marcas span { background: var(--marfim); }

/* ---------- Coração "Minha seleção": comportamento e estilo base são do topo-menu (selecao.js / selecao.css);
   aqui só a posição. A reserva visual usa :where() (especificidade 0) para nunca brigar com o selecao.css. ---------- */
.card__midia .card__favoritar { position: absolute; z-index: 3; top: .25rem; right: .25rem; color: var(--madeira); }
.card__midia.midia--escura .card__favoritar { color: var(--marfim); }
:where(.card__midia) :where(.favoritar) {
  display: inline-grid; place-items: center; width: var(--toque, 2.75rem); height: var(--toque, 2.75rem);
  padding: 0; border: 0; background: transparent; color: var(--madeira); cursor: pointer;
}
:where(.favoritar) :where(.icone) { grid-area: 1 / 1; }
:where(.favoritar) :where(.favoritar__cheio) { opacity: 0; }
:where(.favoritar[aria-pressed="true"]) { color: var(--verde); }
:where(.favoritar[aria-pressed="true"]) :where(.favoritar__cheio) { opacity: 1; }
@container (max-width: 11rem) { .card__midia .card__favoritar { top: 0; right: 0; } }

/* ---------- Selo da linha [E24a]: caixa alta 10–11 px, conteúdo verdadeiro (Signature, Resort, Executivo, Flex) ---------- */
.card__selo {
  position: absolute; z-index: 2; top: .75rem; left: .75rem; pointer-events: none;
  padding: .3rem .45rem .25rem; background: rgba(255, 255, 255, .92); border: 1px solid rgba(24, 33, 30, .14);
  font: 600 .625rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--madeira);
}
@container (max-width: 11rem) { .card__selo { top: .5rem; left: .5rem; } }
/* grade densa de 3 colunas no celular (≈ 109 px): o selo desce para baixo do coração, sem encostar nele */
@container (max-width: 7.5rem) { .card__selo { top: 2.75rem; left: .375rem; } }

/* ---------- Ação rápida [E24b + D11]: no hover ou com o foco (ponteiro fino), faixa de tamanhos na base da foto;
   clicar guarda peça+cor+tamanho na Minha seleção. Alvos de 44×44 px; em card estreito a faixa sai (o coração fica).
   Fica focável o tempo todo (opacidade, não visibility), para o teclado chegar e o :focus-within revelar. ---------- */
.card__rapida { display: none; }
@media (hover: hover) and (pointer: fine) {
  .card__rapida {
    display: block; position: absolute; z-index: 2; left: 0; right: 0; bottom: 0;
    padding: .5rem; background: var(--veu-claro, rgba(255, 255, 255, .94));
    opacity: 0; transform: translateY(.5rem); pointer-events: none;
    transition: opacity .25s var(--ease), transform .25s var(--ease);
  }
  .card:hover .card__rapida, .card__rapida:focus-within {
    opacity: 1; transform: none; pointer-events: auto;
    transition: opacity .25s var(--ease) .1s, transform .25s var(--ease) .1s;
  }
}
@container (max-width: 13.5rem) { .card__rapida { display: none !important; } }
.card__rapida-rotulo { margin: 0 0 .375rem; font: 500 .75rem/1.2 var(--sans); letter-spacing: .04em; color: var(--texto-2); }
.card__rapida.confirmado .card__rapida-rotulo { color: var(--verde); font-weight: 600; }
.card__tamanhos { display: flex; flex-wrap: wrap; gap: 2px; margin: 0; padding: 0; list-style: none; }
.card__tamanho {
  min-width: var(--toque, 2.75rem); height: var(--toque, 2.75rem); padding: 0 .5rem; border: 1px solid var(--fio-forte, rgba(24, 33, 30, .22)); border-radius: 0;
  background: transparent; color: var(--madeira); font: 500 .8125rem/1 var(--sans); font-variant-numeric: tabular-nums; cursor: pointer;
  transition: border-color var(--t-rapida) var(--ease), background-color var(--t-rapida) var(--ease), color var(--t-rapida) var(--ease);
}
.card__tamanho:hover { border-color: var(--madeira); }
.card__tamanho:focus-visible { outline: 2px solid var(--foco, var(--verde)); outline-offset: -3px; }
.card__tamanho[aria-pressed="true"] { background: var(--verde); border-color: var(--verde); color: var(--marfim); }
.sem-js .card__rapida, .js-falhou .card__rapida { display: none; }

/* 2ª vista "cena de uso" (fundo escuro próprio, só no hover): coração e selo passam a marfim enquanto ela aparece */
@media (hover: hover) and (pointer: fine) {
  .card--cena:hover .card__midia .card__favoritar, .card--cena:hover .card__favoritar .favoritar__cheio { color: var(--marfim); }
}

.card--cena.card--na-vista2 .card__midia .card__favoritar, .card--cena.card--na-vista2 .card__favoritar .favoritar__cheio { color: var(--marfim); }

/* ---------- Informação ---------- */
.card__info { display: flex; flex: 1 1 auto; flex-direction: column; padding-top: .875rem; }
.card__nome {
  margin: 0; font: 500 var(--ui, .875rem)/1.4 var(--sans); letter-spacing: .005em; color: var(--texto);
  text-wrap: balance;
}
/* Card estreito (≤ 184 px: vitrine e listagem no celular): o nome pode ocupar 2 linhas (3 na grade densa de 3 colunas).
   Reserva a altura, para o preço e a parcela ficarem na mesma linha em todos os cards da fileira [Q3-06]. */
@container (max-width: 11.5rem) { .card__nome { min-height: 2.8em; } }
@container (max-width: 7.5rem) { .card__nome { min-height: 4.2em; } }
.card__nome a { color: inherit; text-decoration: none; }
.card__nome a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; }
/* o link do nome cobre a área de texto do card (alvo maior, sem aninhar interativos) */
.card__nome a::after { content: ""; position: absolute; inset: auto 0 0 0; height: calc(100% - 100cqw * 1.5); }
.card__preco {
  margin: .3rem 0 0; font: 500 var(--preco-card)/1.35 var(--sans); color: var(--texto); /* 15–16 px [E30, D16] */
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.card__parcela { margin: .0625rem 0 0; font: 400 var(--parcela-card)/1.4 var(--sans); letter-spacing: .01em; /* ≈ 0,72 do preço [E30, D16] */ color: var(--texto-2); font-variant-numeric: tabular-nums; }
/* Amostras ancoradas na base do card (margin-top: auto): numa linha de cards com nomes de 1 e de 2 linhas, ficam alinhadas
   e nunca cortadas. O respiro de 6 px abaixo cobre o contorno da amostra atual (3 px) dentro do overflow do carrossel [Q3-06]. */
.card__info .card__cores { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: auto 0 0; padding: .625rem 0 6px 2px; list-style: none; }
.amostra { display: inline-block; width: 10px; height: 10px; background: var(--amostra); box-shadow: inset 0 0 0 1px rgba(24, 33, 30, .16); }
.amostra--atual { outline: 1px solid var(--texto-2); outline-offset: 2px; }
.card__mais-cores { font: 400 .75rem/1 var(--sans); color: var(--texto-2); margin-left: 2px; }

/* Card estreito: o preço e o selo não encolhem [D12]; quem sai é a faixa de tamanhos (acima). */

@media (prefers-reduced-motion: reduce) {
  .card__vista img, .card__vista--2, .card__rapida { transition: none !important; }
  .card:hover .card__vista img { transform: none; }
}

/* css/componentes/filtros.css */
/* Filtros da listagem (L1) — dono: catalogo-card.
   Barra: Filtrar · contador · filtros aplicados · ordenação · densidade [REF:VV "Filtrar & Ordenar" + contador; BF FILTRAR +
   contador + ordenação; DU "Relevância" à direita]. Gaveta lateral em todas as larguras, com véu [REF:VV ~1/3 no desktop,
   tela cheia no celular; BF painel]. Sem JS: barra e gaveta ocultas, a grade mostra tudo. */
.colecao__barra {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: .75rem var(--s2);
  padding-block: .75rem; border-block: 1px solid var(--fio);
}
.colecao__lado { display: flex; align-items: center; gap: var(--s2); min-width: 0; }
.colecao__lado--dir { justify-content: flex-end; }
@media (max-width: 899px) {
  /* celular/tablet: [Filtrar | Ordenar] em cima; [contador | densidade] embaixo */
  .colecao__lado { display: contents; }
  .colecao__filtrar { grid-column: 1; grid-row: 1; }
  .ordenar { grid-column: 2; grid-row: 1; }
  .colecao__contador { grid-column: 1; grid-row: 2; }
  .densidade { grid-column: 2; grid-row: 2; justify-self: end; }
  .colecao__escolhas { grid-column: 1 / -1; grid-row: 3; }
}
@media (min-width: 900px) {
  .colecao__barra { display: flex; flex-wrap: wrap; gap: .75rem var(--s3); }
  .colecao__escolhas { flex: 1 1 18rem; }
  .colecao__lado--dir { margin-left: auto; }
}

.colecao__filtrar {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: var(--toque, 2.75rem); padding: 0 1.25rem; min-width: 8.5rem;
  border: 1px solid var(--texto); background: transparent; color: var(--texto);
  font: 500 var(--ui, .875rem)/1 var(--sans); letter-spacing: .02em; cursor: pointer;
  transition: background-color var(--t-rapida) var(--ease), color var(--t-rapida) var(--ease), border-color var(--t-rapida) var(--ease);
}
.colecao__filtrar:hover { background: var(--verde); border-color: var(--verde); color: var(--marfim); }
.colecao__ativos {
  display: inline-grid; place-items: center; min-width: 1.25rem; height: 1.25rem; padding-inline: .25rem;
  background: var(--verde); color: var(--marfim); font: 600 .6875rem/1 var(--sans);
}
.colecao__filtrar:hover .colecao__ativos { background: var(--marfim); color: var(--verde); }
.colecao__ativos[hidden] { display: none; }
.colecao__contador { margin: 0; font: 400 var(--ui, .875rem)/1.3 var(--sans); color: var(--texto-2); white-space: nowrap; }
.colecao__contador .numero { color: var(--texto); font-weight: 600; display: inline-block; min-width: 2ch; text-align: right; }

/* Filtros aplicados */
.colecao__escolhas { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0; padding: 0; list-style: none; min-width: 0; }
.colecao__escolhas:empty { display: none; }
.escolha {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 2.25rem; padding: .25rem .5rem .25rem .75rem;
  border: 1px solid var(--fio); background: var(--superficie, #F7F5F0); color: var(--texto);
  font: 400 .8125rem/1.2 var(--sans); cursor: pointer; max-width: 100%;
  transition: border-color var(--t-rapida) var(--ease);
}
.escolha::after {
  content: ""; width: .75rem; height: .75rem; flex: none;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='m2 2 8 8M10 2 2 10' stroke='%23000' stroke-width='1.25'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='m2 2 8 8M10 2 2 10' stroke='%23000' stroke-width='1.25'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: .7;
}
.escolha:hover { border-color: var(--texto); }
.escolha--limpar { border-color: transparent; background: transparent; padding-inline: .5rem; text-decoration: underline; text-underline-offset: .25em; text-decoration-thickness: 1px; }
.escolha--limpar::after { content: none; }

/* Ordenação: select nativo (teclado e leitor de tela de graça), com seta de traço */
.ordenar { display: inline-flex; align-items: center; gap: .5rem; min-width: 0; }
.ordenar__rotulo { font: 400 var(--ui, .875rem)/1 var(--sans); color: var(--texto-2); white-space: nowrap; }
.ordenar__campo {
  appearance: none; -webkit-appearance: none; min-width: 0; width: 100%;
  min-height: var(--toque, 2.75rem); padding: 0 2rem 0 .75rem; border: 1px solid var(--fio); border-radius: 0;
  background: var(--fundo) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2318211E' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9.5 6 6 6-6'/%3E%3C/svg%3E") right .5rem center / 1.125rem no-repeat;
  color: var(--texto); font: 500 var(--ui, .875rem)/1 var(--sans); cursor: pointer;
}
.ordenar__campo:hover { border-color: var(--texto); }
@media (max-width: 899px) {
  .ordenar__rotulo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ordenar { display: flex; }
}
@media (min-width: 900px) { .ordenar__campo { width: auto; min-width: 10.5rem; } }

/* Densidade: desenho de colunas (não números) */
.densidade { display: flex; align-items: center; gap: 0; }
.densidade__op {
  display: none; place-items: center; width: var(--toque, 2.75rem); height: var(--toque, 2.75rem);
  padding: 0; border: 0; background: none; color: var(--texto-2); cursor: pointer;
  transition: color var(--t-rapida) var(--ease);
}
.densidade__desenho { display: flex; gap: 2px; height: 14px; }
.densidade__desenho i { display: block; width: 4px; height: 100%; border: 1px solid currentColor; }
.densidade__op:hover { color: var(--texto); }
.densidade__op[aria-pressed="true"] { color: var(--texto); }
.densidade__op[aria-pressed="true"] .densidade__desenho i { background: currentColor; }
/* Dois botões por largura: grade padrão | grade densa (1 coluna a mais). Celular 2 | 3 · de 720 a 1119 px 3 | 4 · a partir
   de 1120 px 4 | 5 (a DU usa 5). Nunca um botão que deixe os cards maiores que na grade padrão. */
.densidade__op--2, .densidade__op--3 { display: inline-grid; }
@media (min-width: 720px) { .densidade__op--2 { display: none; } .densidade__op--4 { display: inline-grid; } }
@media (min-width: 1120px) { .densidade__op--3 { display: none; } .densidade__op--5 { display: inline-grid; } }
/* abaixo de 720 px a grade densa (3 colunas de 85–108 px) aperta nome, preço e parcela: fica só a padrão de 2 colunas
   (padrão "nos 3" no celular), sem alternador */
@media (max-width: 719px) { .densidade { display: none; } }

.sem-js .colecao__barra, .js-falhou .colecao__barra { display: none; }

/* ---------- Gaveta ---------- */
.filtros {
  position: fixed; z-index: 90; top: 0; right: 0; bottom: 0; width: min(27rem, 100%);
  display: flex; flex-direction: column; background: var(--fundo); color: var(--texto); box-shadow: var(--sombra-painel);
  transform: translateX(100%); visibility: hidden;
  transition: transform .3s var(--ease), visibility 0s linear .3s;
}
.filtros.aberto { transform: none; visibility: visible; transition: transform .3s var(--ease), visibility 0s; }
.filtros[hidden] { display: none; }
.filtros__cabeca {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s2);
  min-height: 4rem; padding: 0 .5rem 0 var(--s3); border-bottom: 1px solid var(--fio);
}
.filtros__titulo { margin: 0; font: 600 1.125rem/1.2 var(--sans); color: var(--texto); }
.filtros__fechar {
  display: inline-grid; place-items: center; width: var(--toque, 2.75rem); height: var(--toque, 2.75rem);
  padding: 0; border: 0; background: none; color: var(--texto); cursor: pointer;
}
.filtros__fechar:hover { color: var(--verde); }
.filtros__grupos { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: var(--s1) var(--s3) var(--s3); margin: 0; }
.filtros__grupo { border: 0; margin: 0; padding: 1.25rem 0 .75rem; min-width: 0; }
.filtros__grupo + .filtros__grupo { border-top: 1px solid var(--fio); }
.filtros__grupo:first-child { padding-top: .75rem; }
.filtros__legenda {
  float: left; width: 100%; padding: 0; margin: 0 0 .375rem;
  font: 600 var(--label, .75rem)/1.2 var(--sans); letter-spacing: var(--track-label, .1em); text-transform: uppercase; color: var(--texto);
}
.filtros__opcoes { clear: both; display: grid; margin: 0; padding: 0; list-style: none; }
.filtros__grupo--cores .filtros__opcoes { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s2); }
.filtros__grupo--cores .filtros__opcoes > li:first-child { grid-column: 1 / -1; }

.opcao {
  position: relative; display: flex; align-items: center; gap: .75rem;
  min-height: var(--toque, 2.75rem); cursor: pointer;
  font: 400 var(--ui, .875rem)/1.3 var(--sans); color: var(--texto);
}
.opcao input {
  appearance: none; -webkit-appearance: none; flex: none; margin: 0;
  width: 1rem; height: 1rem; border: 1px solid var(--texto-2); border-radius: 0; background: var(--fundo);
  display: grid; place-items: center; cursor: pointer;
  transition: border-color var(--t-rapida) var(--ease), background-color var(--t-rapida) var(--ease);
}
.opcao input::before { content: ""; width: .375rem; height: .375rem; background: var(--fundo); transform: scale(0); transition: transform var(--t-rapida) var(--ease); }
.opcao input:checked { border-color: var(--verde); background: var(--verde); }
.opcao input:checked::before { transform: scale(1); }
.opcao input:focus-visible { outline: 2px solid var(--foco, var(--verde)); outline-offset: 3px; }
.opcao:hover input:not(:disabled) { border-color: var(--texto); }
.opcao:has(input:checked) .opcao__nome { font-weight: 600; }
.opcao__nome { min-width: 0; }
.opcao__qtd { margin-left: auto; font: 400 .75rem/1 var(--sans); color: var(--texto-2); }
.opcao .amostra { width: 1rem; height: 1rem; flex: none; }
.opcao--vazia { cursor: default; color: var(--texto-2); }
.opcao--vazia input { border-color: var(--fio); cursor: default; }
.opcao--vazia .amostra { opacity: .45; }
/* Tipo depende da família: tipos sem peça na combinação atual saem da lista (em vez de 20 linhas apagadas) */
.filtros__grupo--tipo li:has(.opcao--vazia) { display: none; }

.filtros__pe {
  display: grid; grid-template-columns: 1fr 1.6fr; gap: .75rem;
  padding: var(--s2) var(--s3) max(var(--s2), env(safe-area-inset-bottom)); border-top: 1px solid var(--fio); background: var(--fundo);
}
.filtros__pe .botao { padding-inline: var(--s2); }

/* Véu dos painéis (usado também por outras gavetas via painel() do núcleo) */
/* .veu movido para base.css (orquestrador, Piloto 1): é usado por todas as gavetas */
.filtros.aberto ~ .veu, body:has(.filtros.aberto) > .veu { z-index: 85; }

@media (prefers-reduced-motion: reduce) {
  .filtros, .filtros.aberto { transition: none; }
}

/* css/componentes/galeria.css */
/* Galeria da peça (P1). Dono: agente peca.
   GRADE FIXA (Q3-02): a galeria ocupa sempre a mesma coluna (≈ 55–58%), seja qual for a cor, e a coluna de compra não se
   mexe (peca.css). ≥ 640 px: miniaturas verticais à esquerda [REF:BF 77×132] + moldura que preenche o resto da coluna.
   A foto principal fica CENTRADA na moldura no tamanho nítido (atributo width = maior arquivo ÷ 1,6, E38), sem ampliar.
   "Larga" (4 bordas limpas): moldura na cor do estúdio, sem emenda. "Justa" (borda não limpa): a foto assenta no branco
   da página (um fundo de estúdio atrás mostraria a emenda). Foto de fundo próprio (cena) fica sobre madeira, inteira.
   Miniaturas: sempre `contain`, nunca cortam (R4-02). < 640 px: moldura de largura total + marcador de posição.
   Zoom: só nas fotos em que amplia ≥ 1,3× (peca.js); tamanho nativo com rolagem, teto E38 por densidade (CSS abaixo). */
.galeria, .zoom { --veu-claro: rgba(255, 255, 255, .9); } /* fundo dos botões sobre foto (único literal translúcido do componente) */
.galeria { --galeria-mini: 5.25rem; display: grid; gap: var(--s2); }
.galeria[hidden] { display: none; }
/* ≥ 640: a moldura tem a altura da foto principal no tamanho nítido (--foto-h, do template), nunca mais alta que a tela;
   a foto encosta no topo e na base da moldura e fica centrada na horizontal */
@media (min-width: 640px) {
  .galeria__slide { aspect-ratio: auto; height: min(var(--foto-h, 40rem), calc(100svh - var(--topo-fixo) - 2rem)); }
}

/* ---------- Palco (carrossel 1 por vez) ---------- */
.galeria__palco { min-width: 0; }
.galeria__slide {
  position: relative; margin: 0; width: 100%; aspect-ratio: 2 / 3; max-height: calc(100svh - var(--topo-fixo) - 2rem); overflow: hidden;
  display: grid; place-items: center; background: var(--estudio, #EAE6E0);
}
.galeria__slide.midia--escura { background: var(--madeira-2); }
.galeria--justa .galeria__slide { background: transparent; }
.galeria--justa .galeria__slide.midia--escura { background: var(--madeira-2); }
.galeria__slide--escura, .galeria--justa .galeria__slide--escura { background: var(--madeira); }

/* altura definida para o max-height: 100% da foto valer mesmo quando a moldura é limitada pela altura da tela */
.galeria__ampliar {
  position: absolute; inset: 0; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center;
  width: 100%; height: 100%; color: var(--madeira);
}
.galeria__ampliar picture { display: contents; }
/* com <picture> em display: contents, os <source> virariam itens da grade (linhas vazias acima da foto) */
.galeria__ampliar source, .zoom__item source { display: none; }
/* largura do arquivo ÷ 1,6 (atributo width) como teto; nunca esticar, nunca cortar */
.galeria__ampliar img { max-width: 100%; max-height: 100%; height: auto; object-fit: contain; }
/* controle de ampliar: <button> criado pelo peca.js só quando a foto amplia ≥ 1,3×; cobre a foto */
.galeria__zoom-botao { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; cursor: zoom-in; }
.galeria__zoom-botao:focus-visible { outline: 2px solid var(--foco); outline-offset: -4px; }
/* lupa só quando há zoom (sem zoom: sem lupa, sem cursor, sem promessa) */
.galeria__lupa {
  position: absolute; right: var(--s2); bottom: var(--s2); display: none; place-items: center;
  width: var(--toque); height: var(--toque); background: var(--veu-claro); color: var(--madeira);
  opacity: 0; transition: opacity var(--t-rapida) var(--ease);
}
.galeria__ampliar--zoom .galeria__lupa { display: grid; }
.galeria__ampliar--zoom:is(:hover, :focus-within) .galeria__lupa { opacity: 1; }
@media (hover: none) { .galeria__lupa { opacity: 1; width: 2.25rem; height: 2.25rem; right: var(--s1); bottom: var(--s1); } }

/* ---------- Miniaturas ---------- */
.galeria__miniaturas { display: flex; gap: var(--s1); min-width: 0; }
.galeria__mini { flex: none; }
.galeria__mini-botao {
  position: relative; display: block; width: var(--galeria-mini); aspect-ratio: 2 / 3; padding: 0; overflow: hidden;
  border: 0; background: var(--estudio, #EAE6E0); cursor: pointer; color: var(--madeira);
}
.galeria__mini-botao.midia--escura { background: var(--madeira-2); }
.galeria__mini-botao--propria { background: var(--madeira); }
.galeria__mini-botao picture { display: contents; }
/* R4-02 (E38): TODAS as miniaturas em contain (há fotos paisagem em moldura retrato); o fundo acima aparece nas sobras */
.galeria__mini-botao img { width: 100%; height: 100%; object-fit: contain; transition: opacity var(--t-rapida) var(--ease); }
/* contorno: hover = fio; atual = traço madeira de 1 px + base de 2 px verde; foco = anel */
.galeria__mini-botao::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 0 1px transparent; transition: box-shadow var(--t-rapida) var(--ease);
}
.galeria__mini-botao:hover::after { box-shadow: inset 0 0 0 1px var(--fio-forte, rgba(24, 33, 30, .28)); }
.galeria__mini-botao[aria-current="true"]::after { box-shadow: inset 0 0 0 1px var(--madeira), inset 0 -2px 0 0 var(--verde); }
.galeria__mini-botao:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.galeria__mini-lupa {
  position: absolute; right: 4px; bottom: 4px; display: grid; place-items: center; width: 1.375rem; height: 1.375rem;
  background: var(--veu-claro); color: var(--madeira);
}
.galeria__dica { margin: 0; }

/* ---------- ≥ 640 px: miniaturas verticais + moldura que preenche a coluna ---------- */
@media (min-width: 640px) {
  .galeria { grid-template-columns: var(--galeria-mini) minmax(0, 1fr); column-gap: var(--s2); align-items: start; }
  .galeria:not(:has(.galeria__miniaturas)) { grid-template-columns: minmax(0, 1fr); }
  .galeria__palco { grid-column: -2 / -1; grid-row: 1; }
  /* a coluna acompanha a altura da foto e rola por dentro quando há muitas vistas */
  .galeria__miniaturas {
    grid-column: 1; grid-row: 1; flex-direction: column; height: 0; min-height: 100%;
    overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none;
  }
  .galeria__miniaturas::-webkit-scrollbar { display: none; }
  .galeria__dica { display: none; }
  /* navegação pelas miniaturas; setas finas sobre a foto ao passar o mouse; sem barra de progresso */
  .galeria .carrossel__controles { margin: 0; }
  .galeria .carrossel__progresso { display: none; }
}
@media (min-width: 640px) and (hover: hover) and (pointer: fine) {
  .galeria .carrossel--laterais :is([data-ant], [data-prox]) { top: 50%; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .galeria { --galeria-mini: 5rem; column-gap: .75rem; }
}

/* ---------- < 640 px: moldura de largura total + fila de miniaturas ---------- */
@media (max-width: 639px) {
  .galeria__palco { margin-inline: calc(var(--margem) * -1); }
  .galeria .carrossel__controles { margin: var(--s2) var(--margem) 0; }
  .galeria .carrossel__controles button { display: none; }
  .galeria .carrossel__progresso { margin-right: 0; }
  /* no celular a fila mostra só os detalhes (as fotos grandes já estão no carrossel) */
  .galeria__miniaturas {
    order: 2; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
    margin-inline: calc(var(--margem) * -1); padding-inline: var(--margem); scroll-padding-inline: var(--margem);
  }
  .galeria__miniaturas::-webkit-scrollbar { display: none; }
  .galeria__mini { scroll-snap-align: start; }
  .galeria__mini--grande { display: none; }
  .galeria:not(.galeria--detalhes) .galeria__miniaturas { display: none; }
  .galeria__mini-botao { width: 4.5rem; }
  .galeria__dica { order: 3; margin-top: calc(var(--s1) * -1); }
}

/* ---------- Zoom em tela cheia ---------- */
.zoom {
  position: fixed; inset: 0; z-index: 100; display: grid; grid-template-rows: auto minmax(0, 1fr);
  background: var(--fundo, #fff); color: var(--texto); box-shadow: var(--sombra-painel);
  opacity: 0; transition: opacity .25s var(--ease);
}
.zoom[hidden] { display: none; }
.zoom.aberto { opacity: 1; }
.zoom__barra {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s2);
  min-height: var(--header-h-compacto); padding: .5rem calc(var(--margem) * .75) .5rem var(--margem);
}
.zoom__contador { margin: 0; font: 500 var(--ui)/1 var(--sans); color: var(--texto-2); }
.zoom__fechar, .zoom__seta {
  display: inline-grid; place-items: center; width: var(--toque); height: var(--toque); padding: 0;
  border: 1px solid transparent; background: var(--fundo, #fff); color: var(--texto); cursor: pointer;
  transition: border-color var(--t-rapida) var(--ease), opacity var(--t-rapida) var(--ease);
}
.zoom__fechar:hover, .zoom__seta:hover { border-color: var(--fio-forte, rgba(24, 33, 30, .28)); }
.zoom__fechar:focus-visible, .zoom__seta:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.zoom__trilho {
  display: flex; min-height: 0; overflow-x: auto; overflow-y: hidden; overscroll-behavior: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none;
}
.zoom__trilho::-webkit-scrollbar { display: none; }
.zoom__trilho:focus-visible { outline: 2px solid var(--foco); outline-offset: -4px; }
/* Zoom = tamanho NATIVO com rolagem (Q3-03): a <img> leva as dimensões do maior arquivo e a largura exibida é
   arquivo × k, com k o teto E38 da faixa de densidade (DPR ≤ 1: 1,0 · ≤ 1,25: 0,85 · ≤ 1,5: 0,75 · acima: 0,625 =
   1,25× em DPR 2 e < 1,9× em DPR 3), nunca maior que a largura útil da tela. Mais alta que a tela, rola dentro do item. */
.zoom { --zoom-k: 1; }
@media (min-resolution: 1.01dppx) { .zoom { --zoom-k: .85; } }
@media (min-resolution: 1.26dppx) { .zoom { --zoom-k: .75; } }
@media (min-resolution: 1.51dppx) { .zoom { --zoom-k: .625; } }
.zoom__item {
  flex: 0 0 100%; height: 100%; margin: 0; scroll-snap-align: center; scroll-snap-stop: always;
  display: flex; overflow: auto; overscroll-behavior: contain; padding: 0 calc(var(--margem) + var(--toque)) var(--s3); min-height: 0;
  scrollbar-width: thin;
}
.zoom__item picture { display: contents; }
.zoom__item img { flex: none; margin: auto; width: min(calc(var(--arq) * var(--zoom-k)), 100%); height: auto; max-width: none; }
.zoom__seta { position: absolute; top: 50%; transform: translateY(-50%); }
.zoom__seta--ant { left: calc(var(--margem) * .5); }
.zoom__seta--prox { right: calc(var(--margem) * .5); }
.zoom__seta[aria-disabled="true"] { opacity: .3; cursor: default; }
.zoom--unica .zoom__seta, .zoom--unica .zoom__contador { visibility: hidden; }
@media (max-width: 639px) {
  .zoom__item { padding-inline: 0; }
  .zoom__seta { top: auto; bottom: var(--s2); transform: none; background: var(--veu-claro); }
}

@media (prefers-reduced-motion: reduce) {
  .zoom, .galeria__lupa, .galeria__mini-botao::after { transition: none; }
}

/* css/componentes/seletores.css */
/* Seletores da peça (P1). Dono: agente peca.
   Cor: amostra quadrada + nome visível na legenda. Tamanho: caixas de 48 px, sem pré-seleção [REF:DU traço fino; evitar
   BF/VV hover = selecionado]. Estados distintos: hover = fio madeira + fundo superfície · foco = anel verde afastado ·
   selecionado = fundo verde, texto marfim. */
.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: .4rem; min-height: 1.4rem; padding: 0; margin-bottom: .75rem;
  font: 400 var(--ui)/1.4 var(--sans); color: var(--texto);
}
.seletor__rotulo { font-weight: 600; }
.seletor-cor__nome, .seletor-tamanho__nome { color: var(--texto); }

/* ---------- Cor ---------- */
.seletor-cor__opcoes { display: flex; flex-wrap: wrap; gap: .375rem; }
.amostra-op {
  position: relative; display: block; width: var(--toque); height: var(--toque); padding: 4px;
  border: 1px solid transparent; cursor: pointer; transition: border-color var(--t-rapida) var(--ease);
}
.amostra-op input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.amostra-op__cor { display: block; width: 100%; height: 100%; background: var(--amostra); box-shadow: inset 0 0 0 1px rgba(24, 33, 30, .18); }
.amostra-op:hover { border-color: var(--fio-forte, rgba(24, 33, 30, .28)); }
.amostra-op:has(input:checked) { border-color: var(--madeira); }
.amostra-op:has(input:focus-visible) { outline: 2px solid var(--foco); outline-offset: 2px; }

/* ---------- Tamanho ---------- */
.seletor-tamanho__opcoes { display: flex; flex-wrap: wrap; gap: .5rem; }
.tamanho-op { position: relative; display: block; cursor: pointer; }
.tamanho-op[hidden] { display: none; }
.tamanho-op input { position: absolute; inset: 0; width: 100%; height: 100%; 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(--fio-forte, rgba(24, 33, 30, .28)); background: var(--fundo, #fff);
  font: 500 var(--ui)/1 var(--sans); font-variant-numeric: lining-nums tabular-nums; 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 input:not(:checked) + span { border-color: var(--madeira); background: var(--superficie, #F7F5F0); }
.tamanho-op input:checked + span { background: var(--verde); border-color: var(--verde); color: var(--marfim); }
.tamanho-op input:focus-visible + span { outline: 2px solid var(--foco); outline-offset: 3px; }
.seletor-tamanho__unico { display: flex; align-items: baseline; gap: .4rem; margin: 0; font-size: var(--ui); }

.seletor-tamanho__rodape { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-top: .5rem; }
.seletor-tamanho__ajuda { margin: .25rem 0 0; }
/* link "Guia de medidas" com régua: texto sublinhado (não depende só de cor) */
.guia-link {
  display: inline-flex; align-items: center; gap: .5rem; min-height: var(--toque); padding: 0; border: 0; background: none;
  font: 500 var(--ui)/1.2 var(--sans); color: var(--texto); cursor: pointer;
}
.guia-link span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .3em; text-decoration-color: var(--fio-forte, rgba(24, 33, 30, .28)); transition: text-decoration-color var(--t-rapida) var(--ease); }
.guia-link:hover span { text-decoration-color: currentColor; }
.guia-link:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.guia-link .icone { color: var(--verde); }

/* css/componentes/acordeao.css */
/* Acordeão nativo (<details>) [REF:BF fio 1 px; DU rótulo em caixa alta]: fio de 1 px, rótulo em etiqueta
   (Manrope 600, 13 px, caixa alta, tracking .1em), ícone + / − de traço, 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(--botao-fonte)/1.3 var(--sans); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--texto);
}
.acordeao summary::-webkit-details-marker { display: none; }
.acordeao summary::after {
  content: ""; flex: none; width: .875rem; height: .875rem;
  background: linear-gradient(currentColor, currentColor) center / 100% 1.25px no-repeat,
              linear-gradient(currentColor, currentColor) center / 1.25px 100% no-repeat;
  transition: background-size var(--t-media) var(--ease);
}
.acordeao[open] summary::after { background-size: 100% 1.25px, 1.25px 0; }
.acordeao summary:hover { color: var(--acao); }
.acordeao summary:focus-visible { outline-offset: -2px; }
.acordeao__corpo { padding-bottom: var(--s3); display: grid; gap: var(--s2); color: var(--texto); font-size: var(--body); }
.acordeao__corpo p { 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 técnica (pares rótulo/valor) */
.ficha { display: grid; gap: var(--s1); margin: 0; }
.ficha > div { display: grid; grid-template-columns: 8rem 1fr; gap: var(--s2); padding-block: .35rem; border-bottom: 1px solid var(--fio); font-size: var(--ui); }
.ficha > div:last-child { border-bottom: 0; }
.ficha dt { color: var(--texto-2); }
.ficha dd { margin: 0; }

/* css/componentes/formulario.css */
/* Formulário [P1 §3; DESIGN-SYSTEM §4]: rótulo SEMPRE visível acima; campo com fio inferior (sem caixa, raio 0);
   foco = fio de 2 px na cor de foco; erro escrito em texto (nunca só cor). Funciona no claro e no escuro (.verde/.escuro). */
.formulario { display: grid; gap: var(--s4); }
.formulario__linha { display: grid; gap: var(--s4) var(--gutter); }
@media (min-width: 768px) { .formulario__linha { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.campo { display: grid; align-content: start; gap: .35rem; border: 0; margin: 0; padding: 0; min-width: 0; }
.campo > label, .campo legend {
  font: 600 var(--label)/1.3 var(--sans); letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--texto); padding: 0;
}
.campo__dica { font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--texto-2); margin-left: .35rem; }
.campo input:not([type="checkbox"]):not([type="radio"]), .campo textarea, .campo select {
  width: 100%; min-height: 3rem; padding: .65rem 0; border: 0; border-radius: var(--raio);
  border-bottom: 1px solid var(--texto-2); 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(--texto-2); opacity: 1; }
.campo input:not([type="checkbox"]):not([type="radio"]):hover, .campo textarea:hover, .campo select:hover { border-bottom-color: var(--texto); }
.campo input:not([type="checkbox"]):not([type="radio"]):focus-visible, .campo textarea:focus-visible, .campo select:focus-visible {
  outline: none; border-bottom-color: var(--foco); box-shadow: 0 1px 0 0 var(--foco);
}
.campo [aria-invalid="true"] { border-bottom-color: var(--erro) !important; box-shadow: 0 1px 0 0 var(--erro); }
.escuro .campo [aria-invalid="true"], .verde .campo [aria-invalid="true"] { border-bottom-color: var(--dourado) !important; box-shadow: 0 1px 0 0 var(--dourado); }
.campo__erro { font-size: var(--ui); color: var(--erro); font-weight: 600; }
.campo__erro::before { content: "Atenção: "; }
.escuro .campo__erro, .verde .campo__erro { color: var(--marfim); }
.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; bottom: 1.35rem; width: .5rem; height: .5rem; pointer-events: none;
  border-right: 1.25px solid var(--texto); border-bottom: 1.25px solid var(--texto); transform: 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: .1rem 0 0; accent-color: var(--verde); cursor: pointer; }
.escuro .campo--check input, .verde .campo--check input { accent-color: var(--marfim); }
.campo--check label { font: 400 var(--ui)/1.55 var(--sans); letter-spacing: 0; text-transform: none; 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(--superficie); font-size: var(--ui); }
.formulario[hidden] { display: none; }
.formulario__nota { font-size: var(--ui); color: var(--texto-2); }

/* css/componentes/avisos.css */
/* Barra de avisos (T1) — dono: topo-menu. Verde da marca, texto marfim 12,5 px; nada promocional (ERRATA E6).
   Cabe numa linha → todas as mensagens ficam paradas, lado a lado (VV). Não cabe → uma por vez, troca a cada 6 s
   com fade lento, pausa no hover/foco e no botão; estática com prefers-reduced-motion (JS em topo.js). */
.avisos {
  position: relative; z-index: 61;
  background: var(--verde); color: var(--marfim);
  font: 500 .78125rem/1.3 var(--sans); letter-spacing: .04em;
}
.avisos__caixa { position: relative; display: flex; align-items: center; justify-content: center; min-height: 2.25rem; }
.avisos__lista { display: flex; align-items: center; justify-content: center; flex-wrap: nowrap; gap: 0; margin: 0; padding: 0; min-width: 0; }
.avisos__item { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.avisos__item + .avisos__item::before {
  content: ""; display: inline-block; width: 4px; height: 4px; margin: 0 1.5rem; vertical-align: middle;
  background: var(--dourado); transform: rotate(45deg) translateY(-1px);
}
.avisos a { color: inherit; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size var(--t-media) var(--ease); }
.avisos a:hover { background-size: 100% 1px; }
.avisos a { position: relative; }
.avisos a::after { content: ""; position: absolute; inset: -14px -6px; } /* alvo de 44 px dentro da barra de 36 */
.avisos :focus-visible { outline-color: var(--dourado); outline-offset: 2px; }

/* medição (JS): itens no tamanho natural */
.avisos.medindo .avisos__item { flex: none; overflow: visible; }
.avisos.medindo .avisos__lista { min-width: max-content; }

/* modo rotação (classe posta pelo JS quando as mensagens não cabem lado a lado) */
.avisos.rotacao .avisos__lista { display: grid; width: 100%; padding: 0 2.5rem; }
.avisos.rotacao .avisos__item { grid-area: 1 / 1; align-self: center; text-align: center; opacity: 0; visibility: hidden; transition: opacity .35s var(--ease), visibility 0s linear .35s; }
.avisos.rotacao .avisos__item::before { display: none; }
/* troca em sequência (sai, depois entra): os dois textos nunca se sobrepõem no meio do fade */
.avisos.rotacao .avisos__item.ativo { opacity: 1; visibility: visible; transition: opacity .6s var(--ease) .4s, visibility 0s linear .35s; }
.avisos:not(.rotacao):not(.cabe) .avisos__item:not(.ativo) { display: none; }

/* pausar/retomar (WCAG 2.2.2): 44 × 44 de alvo, desenho discreto */
.avisos__pausa {
  position: absolute; right: calc(var(--margem) * -.5); top: 50%; transform: translateY(-50%);
  width: var(--toque); height: var(--toque); padding: 0; border: 0; background: none; color: var(--marfim); cursor: pointer;
  display: grid; place-items: center; opacity: .85;
}
.avisos__pausa[hidden] { display: none; }
.avisos__pausa::before, .avisos__pausa::after { content: ""; grid-area: 1 / 1; }
.avisos__pausa::before { width: 8px; height: 10px; border-inline: 2px solid currentColor; }
.avisos__pausa[aria-pressed="true"]::before { width: 0; height: 0; border: 0; border-left: 8px solid currentColor; border-block: 5px solid transparent; }
.avisos__pausa:hover { opacity: 1; }
/* versão curta só em telas estreitas: 1 linha, 34 px em 390 */
.avisos__curto { display: none; }
@media (max-width: 767px) {
  .avisos__pausa { right: -.5rem; }
  .avisos { font-size: .75rem; letter-spacing: .02em; }
  .avisos__caixa { min-height: 2.125rem; }
  .avisos__longo { display: none; }
  .avisos__curto { display: inline; }
}
.avisos.medindo .avisos__item { transition: none !important; }
@media (prefers-reduced-motion: reduce) { .avisos.rotacao .avisos__item { transition: none; } }

/* css/componentes/blocos.css */
/* Blocos da home (Piloto 1) — dono: agente home. Markup em templates/blocos.mjs.
   Regras: fundo branco; foto como cor; raio 0; costura de 2 px entre mídias; Cormorant só em título (h2/display);
   rótulos de interface em Manrope; nada de rótulo acima de título; nada de lista numerada. */

/* ============ Hero (H1) ============ */
.hero { --hero-h: clamp(32rem, 80svh, 52rem); position: relative; background: var(--fundo); }
.hero .carrossel__item, .hero__unico { position: relative; }
.hero__slide { position: relative; height: var(--hero-h); overflow: hidden; background: var(--estudio); }
.hero__midia { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--costura, 2px); height: 100%; background: var(--fundo); }
.hero__painel-foto { position: relative; min-width: 0; overflow: hidden; background: var(--estudio); }
.hero__painel-foto picture, .hero__painel-foto img { width: 100%; height: 100%; }
.hero__painel-foto img { object-fit: cover; }

.hero__texto { display: grid; justify-items: start; gap: var(--s2); }
.hero__titulo { font-size: var(--display); color: var(--titulo); max-width: 12em; text-wrap: balance; } /* escala única do sistema (E33) */
.hero__frase { font-size: var(--body-l); line-height: 1.5; color: var(--texto); max-width: 30rem; text-wrap: pretty; }
.hero__cta { margin-top: var(--s1); }

/* Composição: painel branco ancorado na base, do lado escolhido; não ocupa a altura toda (não é "metade bloco") */
.hero__slide--composicao .hero__texto {
  position: absolute; bottom: 0; left: var(--margem); z-index: 1;
  width: min(42rem, 46%); padding: clamp(1.75rem, 1rem + 2vw, 2.75rem) clamp(1.75rem, 1rem + 2.2vw, 3rem) clamp(1.75rem, 1rem + 2vw, 2.5rem);
  background: var(--fundo);
}
.hero__slide--composicao.hero__slide--dir .hero__texto { left: auto; right: var(--margem); }

/* Foto única (campanha horizontal): véu só do lado do texto; texto marfim */
.hero__slide--foto .hero__midia::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(24, 33, 30, .76) 0%, rgba(24, 33, 30, .7) 54%, rgba(24, 33, 30, 0) 80%);
}
.hero__slide--foto.hero__slide--dir .hero__midia::after { background: linear-gradient(270deg, rgba(24, 33, 30, .76) 0%, rgba(24, 33, 30, .7) 54%, rgba(24, 33, 30, 0) 80%); }
.hero__slide--foto .hero__texto {
  position: absolute; inset-block: 0; left: var(--margem); z-index: 1; width: min(48rem, 50%);
  align-content: center; --titulo: var(--marfim); --texto: var(--marfim); color: var(--marfim);
}
.hero__slide--foto.hero__slide--dir .hero__texto { left: auto; right: var(--margem); }
.hero__slide--foto .hero__cta { --b-bg: var(--marfim); --b-fg: var(--madeira); --b-bd: var(--marfim); }
.hero__slide--foto .hero__cta:hover { --b-bg: var(--taupe); --b-bd: var(--taupe); }
.hero__slide--foto :focus-visible { outline-color: var(--dourado); }

/* Controles do hero: faixa branca logo abaixo da foto, alinhada ao container */
.hero .carrossel__controles { width: min(100% - 2 * var(--margem), var(--container)); margin: .75rem auto 0; }

/* Celular (A3): foto 4:5 com título + CTA SOBRE o terço inferior (como as 3 referências), véu só embaixo;
   a frase fica para o desktop. Todos os slides têm a mesma altura (a da foto): sem vão sob o slide. */
@media (max-width: 767px) {
  .hero__slide { height: auto; aspect-ratio: 4 / 5; }
  .hero__midia { display: block; height: 100%; }
  .hero__painel-foto { height: 100%; }
  .hero__painel-foto--extra { display: none; }
  .hero__slide .hero__midia::after, .hero__slide--foto.hero__slide--dir .hero__midia::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(0deg, rgba(24, 33, 30, .82) 0%, rgba(24, 33, 30, .72) 50%, rgba(24, 33, 30, 0) 80%);
  }
  .hero__slide .hero__texto, .hero__slide--composicao .hero__texto, .hero__slide--foto .hero__texto,
  .hero__slide--foto.hero__slide--dir .hero__texto, .hero__slide--composicao.hero__slide--dir .hero__texto {
    position: absolute; inset: auto var(--margem) var(--s3) var(--margem); width: auto; padding: 0; background: none;
    align-content: end; gap: var(--s2);
    --titulo: var(--marfim); --texto: var(--marfim); color: var(--marfim);
  }
  .hero__titulo { max-width: 10em; }
  .hero__frase { display: none; }
  .hero__slide .hero__cta { --b-bg: var(--marfim); --b-fg: var(--madeira); --b-bd: var(--marfim); margin-top: 0; }
  .hero__slide :focus-visible { outline-color: var(--dourado); }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .hero { --hero-h: clamp(30rem, 64svh, 40rem); }
  .hero__slide--composicao .hero__texto { width: min(32rem, 62%); }
  .hero__slide--foto .hero__texto { width: 58%; }
  .hero__slide--foto .hero__midia::after { background: linear-gradient(90deg, rgba(24, 33, 30, .78) 0%, rgba(24, 33, 30, .72) 62%, rgba(24, 33, 30, 0) 90%); }
  .hero__slide--foto.hero__slide--dir .hero__midia::after { background: linear-gradient(270deg, rgba(24, 33, 30, .78) 0%, rgba(24, 33, 30, .72) 62%, rgba(24, 33, 30, 0) 90%); }
}

/* ============ Faixa de serviços (H2) ============ */
.servicos { background: var(--superficie); border-block: 1px solid var(--fio); }
/* Fundo de borda a borda; conteúdo dentro do container (alinhado ao logo e aos títulos). Seletores com 2 classes:
   o reset `ul[role="list"]` do base.css (0,1,1) venceria uma classe só. */
.servicos .servicos__lista {
  list-style: none; margin: 0; padding: 0; width: 100%;
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
}
.servicos__item + .servicos__item { border-left: 1px solid var(--fio); }
.servicos__link {
  display: flex; align-items: center; gap: var(--s2); height: 100%;
  padding: clamp(1rem, .8rem + .6vw, 1.375rem) clamp(1rem, .5rem + 1.2vw, 1.75rem);
  color: var(--texto); text-decoration: none;
}
.servicos__item:first-child .servicos__link { padding-left: 0; }
.servicos__item:last-child .servicos__link { padding-right: 0; }
.servicos__icone { flex: none; color: var(--verde); }
.servicos__textos { display: grid; gap: .125rem; min-width: 0; }
.servicos__titulo { font: 600 var(--ui)/1.35 var(--sans); color: var(--madeira); }
.servicos__texto { font: 400 .8125rem/1.45 var(--sans); color: var(--texto-2); }
a.servicos__link:hover .servicos__titulo { text-decoration: underline; text-underline-offset: .25em; text-decoration-thickness: 1px; }
a.servicos__link:focus-visible { outline-offset: -3px; }
/* ≤ 1023 px: trilho rolável que sangra até a borda, mas o 1º item começa na margem do container */
@media (max-width: 1023px) {
  .servicos .servicos__lista {
    width: auto; margin-inline: calc(-1 * var(--margem)); padding-inline: var(--margem); scroll-padding-inline: var(--margem);
    grid-auto-columns: minmax(16.5rem, 1fr); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  }
  .servicos .servicos__lista::-webkit-scrollbar { display: none; }
  .servicos__item { scroll-snap-align: start; }
  .servicos__item:last-child .servicos__link { padding-right: clamp(1rem, .5rem + 1.2vw, 1.75rem); }
}
@media (max-width: 767px) { .servicos .servicos__lista { grid-auto-columns: 78%; } }

/* ============ Vitrine (H4) ============ */
.vitrine__cabeca {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3);
  margin-bottom: var(--secao-cabeca, var(--s5));
}
.vitrine__titulo { margin: 0; }
.vitrine__tudo { flex: none; font-size: var(--ui); font-weight: 500; }

/* ============ Categorias (H3) — mosaico editorial único: 1 grande + 2 médias + 4 menores ============ */
.categorias__cabeca { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s1) var(--s4); margin-bottom: var(--secao-cabeca, var(--s5)); }
.categorias__texto { color: var(--texto-2); font-size: var(--body); }
.categorias .mosaico-cat {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--costura, 2px); grid-template-columns: repeat(8, minmax(0, 1fr)); grid-auto-flow: row dense;
}
.mosaico-cat__item--grande { grid-column: span 4; grid-row: span 2; }
.mosaico-cat__item--media { grid-column: span 2; aspect-ratio: 4 / 5; }
.mosaico-cat__item--menor { grid-column: span 1; aspect-ratio: 4 / 5; }
.mosaico-cat__link { position: relative; display: block; height: 100%; color: var(--madeira); text-decoration: none; overflow: hidden; }
.mosaico-cat__midia { position: absolute; inset: 0; background: var(--estudio); }
.mosaico-cat__midia picture, .mosaico-cat__midia img { width: 100%; height: 100%; }
.mosaico-cat__midia img { object-fit: cover; object-position: 50% 30%; transition: transform .6s var(--ease); }
.mosaico-cat__item--grande .mosaico-cat__midia img { object-position: 50% 8%; }
.mosaico-cat__link:hover .mosaico-cat__midia img { transform: scale(1.03); }
.mosaico-cat__rotulo {
  position: absolute; left: 0; bottom: 0; max-width: 100%;
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .625rem .875rem; background: var(--fundo);
  font: 600 var(--ui)/1.25 var(--sans); color: var(--madeira);
}
.mosaico-cat__item--grande .mosaico-cat__rotulo { padding: .875rem 1.25rem; font-size: var(--h4); }
.mosaico-cat__item--menor .mosaico-cat__rotulo { padding: .5rem .625rem; font-size: .8125rem; gap: .375rem; }
.mosaico-cat__rotulo .icone { flex: none; transition: transform var(--t-media) var(--ease); }
.mosaico-cat__link:hover .mosaico-cat__rotulo .icone { transform: translateX(.2em); }
.mosaico-cat__link:hover .mosaico-cat__nome { text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
.mosaico-cat__link:focus-visible { outline-offset: -3px; }
/* tablet e desktop estreito: as 4 menores ficariam < 120 px na grade de 8 → grade de 4 (grande 2×2, médias empilhadas) */
@media (min-width: 768px) and (max-width: 1199px) {
  .categorias .mosaico-cat { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mosaico-cat__item--grande { grid-column: span 2; grid-row: span 2; }
  .mosaico-cat__item--media { grid-column: span 2; aspect-ratio: 4 / 3; }
  .mosaico-cat__item--menor { grid-column: span 1; aspect-ratio: 4 / 5; }
}
@media (max-width: 767px) {
  .categorias .mosaico-cat { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mosaico-cat__item--grande { grid-column: span 2; grid-row: auto; aspect-ratio: 4 / 3; }
  .mosaico-cat__item--media { grid-column: span 1; aspect-ratio: 4 / 5; }
  .mosaico-cat__item--menor { grid-column: span 1; aspect-ratio: 1 / 1; }
  .mosaico-cat__item--grande .mosaico-cat__midia img { object-position: 50% 22%; }
  .mosaico-cat__item--menor .mosaico-cat__rotulo { font-size: var(--ui); padding: .5rem .75rem; }
}

/* ============ Consultivo (H5) ============ */
.consultivo { background: var(--superficie); }
.consultivo__cabeca {
  display: grid; gap: var(--s2) var(--s6); margin-bottom: var(--secao-cabeca, var(--s5));
}
@media (min-width: 1024px) {
  .consultivo__cabeca { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); align-items: end; }
  .consultivo__intro { grid-column: 2; grid-row: 1; }
  .consultivo__link { grid-column: 2; }
}
.consultivo__link { justify-self: start; font-size: var(--ui); font-weight: 500; }
.consultivo__intro { font-size: var(--body-l); line-height: 1.5; color: var(--texto); max-width: 30rem; }
.consultivo .consultivo__lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); }
.consultivo__fig { margin: 0; }
.consultivo__midia { display: block; aspect-ratio: 4 / 5; background: var(--estudio); }
.consultivo__midia picture, .consultivo__midia img { width: 100%; height: 100%; }
.consultivo__midia img { object-fit: cover; }
.consultivo__legenda { display: grid; gap: .5rem; padding-top: var(--s3); }
.consultivo__nome { font: 600 var(--h3)/1.25 var(--sans); color: var(--madeira); }
.consultivo__legenda p { font-size: var(--body); line-height: 1.55; color: var(--texto); max-width: 34rem; }
@media (max-width: 767px) {
  .consultivo .consultivo__lista {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 80%; gap: var(--s2);
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(-1 * var(--margem)); padding-inline: var(--margem); scroll-padding-inline: var(--margem);
  }
  .consultivo__lista::-webkit-scrollbar { display: none; }
  .consultivo__item { scroll-snap-align: start; }
  .consultivo__midia { aspect-ratio: 1 / 1; }
}

/* ============ Ocasiões ============ */
.oc-card { display: grid; gap: var(--s2); color: var(--texto); text-decoration: none; }
/* [E38/R3-02] --teto = floor(maior arquivo / 1,6), definido por foto no HTML: a mídia nunca passa dele (centrada, proporção preservada). */
.oc-card__midia { display: block; aspect-ratio: 5 / 6; background: var(--estudio); max-width: var(--teto, none); margin-inline: auto; }
@media (max-width: 767px) { .oc-card__midia { aspect-ratio: 4 / 5; } }
/* Celular largo: com 1,15 item a foto passaria do teto (arquivos de 573–683 px) → mais itens por tela, o 2º/3º cortado convida a arrastar. */
@media (min-width: 440px) and (max-width: 599px) { .ocasioes-home .carrossel.carrossel--m1-15 { --por-pagina: 1.6; } }
@media (min-width: 600px) and (max-width: 767px) { .ocasioes-home .carrossel.carrossel--m1-15 { --por-pagina: 2.2; } }
.oc-card__midia picture, .oc-card__midia img { width: 100%; height: 100%; }
.oc-card__midia img { object-fit: cover; object-position: 50% 30%; }
/* R4-01: sem zoom no hover (o teto E38 já usa toda a folga do arquivo); o hover fica no sublinhado do "ver" */
.oc-card__texto { display: grid; gap: .375rem; }
.oc-card__titulo { font: 600 var(--h3)/1.25 var(--sans); color: var(--madeira); }
.oc-card__msg { font-size: var(--body); line-height: 1.5; color: var(--texto); }
.oc-card__look { font-size: .8125rem; line-height: 1.45; color: var(--texto-2); }
.oc-card__ver {
  justify-self: start; margin-top: .25rem; font: 500 var(--ui)/1.4 var(--sans); color: var(--verde);
  text-decoration: underline; text-underline-offset: .3em; text-decoration-thickness: 1px;
}
.oc-card:hover .oc-card__ver { text-decoration-thickness: 2px; }
.oc-card:focus-visible { outline-offset: 4px; }

/* ============ Marca (H6) ============ */
.marca-home__grade { display: grid; gap: var(--s5) var(--s3); align-items: center; }
@media (min-width: 768px) {
  .marca-home__grade { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .marca-home__foto { grid-column: 1 / span 4; }
  .marca-home__texto { grid-column: 6 / -1; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .marca-home__foto { grid-column: 1 / span 6; }
  .marca-home__texto { grid-column: 7 / -1; }
}
.marca-home__foto { margin: 0; aspect-ratio: 4 / 5; max-height: 40rem; }
.marca-home__foto picture, .marca-home__foto img { width: 100%; height: 100%; }
.marca-home__foto img { object-fit: cover; object-position: 50% 20%; }
.marca-home__texto { display: grid; justify-items: start; gap: var(--s3); }
.marca-home__lead { font-size: var(--body-l); line-height: 1.55; max-width: 34rem; text-wrap: pretty; }
.marca-home__fatos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); width: 100%; max-width: 34rem; margin: var(--s1) 0 var(--s2); padding-top: var(--s3); border-top: 1px solid var(--fio); }
.marca-home__fatos dt { font: 500 var(--label)/1.4 var(--sans); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--texto-2); }
.marca-home__fatos dd { margin: .375rem 0 0; font: 500 var(--body)/1.45 var(--sans); color: var(--madeira); }
.marca-home__papel { display: block; font-weight: 400; font-size: var(--ui); color: var(--texto-2); }
@media (max-width: 767px) {
  .marca-home__foto { aspect-ratio: 1 / 1; }
}

@media (prefers-reduced-motion: reduce) {
  .mosaico-cat__midia img, .oc-card__midia img, .mosaico-cat__rotulo .icone { transition: none; }
  .mosaico-cat__link:hover .mosaico-cat__midia img, .oc-card:hover .oc-card__midia img { transform: none; }
}

/* css/componentes/busca.css */
/* Busca (G1) — dono: topo-menu. Campo visível como linha (BF/DU), painel instantâneo sob o header (as 3):
   sugestões de categoria à esquerda, peças com foto, nome e preço à direita; "Ver todas as peças". */
.busca {
  grid-area: busca; position: relative; display: flex; align-items: center;
  width: clamp(12rem, 17vw, 16.5rem); min-height: var(--toque);
  border-bottom: 1px solid rgba(24, 33, 30, .45);
  transition: border-color var(--t-rapida) var(--ease);
}
.busca:focus-within { border-bottom-color: var(--verde); }
.busca__lupa { display: grid; place-items: center; width: 1.75rem; flex: none; color: var(--texto); }
.busca__lupa .icone { width: 18px; height: 18px; }
.busca__campo {
  flex: 1; min-width: 0; height: var(--toque); padding: 0 .25rem; border: 0; border-radius: 0; background: transparent;
  font: 400 var(--small)/1 var(--sans); color: var(--texto); -webkit-appearance: none; appearance: none;
}
.busca__campo::placeholder { color: var(--texto-2); opacity: 1; }
.busca__campo::-webkit-search-cancel-button, .busca__campo::-webkit-search-decoration { -webkit-appearance: none; display: none; }
.busca__campo:focus { outline: none; }
.busca:focus-within { outline: 2px solid transparent; }
.busca__campo:focus-visible { outline: none; }
.busca:has(.busca__campo:focus-visible) { box-shadow: 0 2px 0 0 var(--verde); }
.busca__limpar { display: grid; place-items: center; width: var(--toque); height: var(--toque); margin-right: -.6rem; padding: 0; border: 0; background: none; color: var(--texto-2); cursor: pointer; }
.busca__limpar[hidden] { display: none; }
.busca__limpar .icone { width: 16px; height: 16px; }
@media (min-width: 1024px) and (max-width: 1279px) { .busca { width: 9.5rem; } }
@media (max-width: 1023px) {
  .busca { width: 100%; border: 1px solid rgba(24, 33, 30, .28); border-bottom-color: rgba(24, 33, 30, .28); padding-left: .5rem; background: #FFFFFF; }
  .busca:focus-within { border-color: var(--verde); }
  .busca__campo { font-size: 1rem; } /* 16 px: o iOS não dá zoom no foco */
}

/* Termos sugeridos (E22) */
.busca-painel__termos { margin-bottom: var(--s4); }
.busca-painel__termos[hidden] { display: none; }
.busca-painel__sugestoes .busca-painel__termos ul { display: flex; flex-wrap: wrap; gap: .5rem; }
.busca-painel__termos button {
  display: inline-flex; align-items: center; min-height: 2.25rem; padding: 0 .875rem; border: 1px solid var(--fio); background: #FFFFFF; cursor: pointer;
  font: 500 .8125rem/1 var(--sans); color: var(--texto);
}
.busca-painel__termos button:hover { border-color: var(--verde); color: var(--verde); }
@media (pointer: coarse) { .busca-painel__termos button { min-height: var(--toque); } }

/* Termos que contêm o texto digitado (B-4), acima dos resultados */
.busca-painel__vivos { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 var(--s3); padding: 0; list-style: none; }
.busca-painel__vivos[hidden] { display: none; }
.busca-painel__vivos button {
  display: inline-flex; align-items: center; min-height: 2.25rem; padding: 0 .875rem; border: 1px solid var(--fio); background: #FFFFFF; cursor: pointer;
  font: 500 .8125rem/1 var(--sans); color: var(--texto);
}
.busca-painel__vivos button:hover { border-color: var(--verde); color: var(--verde); }
@media (pointer: coarse) { .busca-painel__vivos button { min-height: var(--toque); } }

/* Painel */
.busca-painel {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 58;
  background: #FFFFFF; border-top: 1px solid var(--fio);
  box-shadow: var(--sombra-painel);
  opacity: 0; transition: opacity var(--t-rapida) var(--ease);
}
.busca-painel[hidden] { display: none; }
.busca-painel.aberto { opacity: 1; }
.busca-painel__caixa {
  display: grid; grid-template-columns: 16rem minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem);
  padding-block: var(--s4) var(--s5); max-height: calc(100svh - var(--header-h) - 2.5rem); overflow-y: auto; overscroll-behavior: contain;
}
.busca-painel__titulo {
  margin: 0 0 .75rem; font: 600 var(--label)/1.2 var(--sans); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--verde);
}
.busca-painel__sugestoes ul { display: grid; }
.busca-painel__sugestoes a {
  display: flex; align-items: center; min-height: 2.5rem; font: 400 var(--small)/1.3 var(--sans); color: var(--texto); text-decoration: none;
}
.busca-painel__sugestoes a:hover { color: var(--verde); text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
.busca-painel__status { margin: 0 0 var(--s2); font: 400 var(--small)/1.4 var(--sans); color: var(--texto-2); min-height: 1.4em; }
.busca-painel__status strong { color: var(--texto); font-weight: 600; }
.busca-painel ul { list-style: none; margin: 0; padding: 0; }
.busca-painel__lista { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s4) 1.25rem; }
.busca-painel__lista:empty { display: none; }
.busca-res {
  display: grid; gap: .625rem; align-content: start; color: var(--texto); text-decoration: none; outline-offset: 4px;
}
.busca-res__foto { display: block; aspect-ratio: 2 / 3; overflow: hidden; background: var(--estudio, #E9E5DF); }
.busca-res__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.busca-res__nome { font: 500 var(--small)/1.35 var(--sans); }
.busca-res__nome mark { background: none; color: inherit; font-weight: 700; text-decoration: underline; text-decoration-color: var(--dourado); text-decoration-thickness: 2px; text-underline-offset: .2em; }
.busca-res__meta { font: 400 .75rem/1.3 var(--sans); color: var(--texto-2); }
.busca-res__preco { font: 500 var(--small)/1.2 var(--sans); font-variant-numeric: tabular-nums; }
.busca-res:hover .busca-res__foto img, .busca-res[aria-selected="true"] .busca-res__foto img { transform: scale(1.03); }
.busca-res[aria-selected="true"] { outline: 2px solid var(--verde); }
.busca-res[aria-selected="true"] .busca-res__nome, .busca-res:hover .busca-res__nome { color: var(--verde); }
.busca-painel__todas { display: inline-flex; align-items: center; min-height: var(--toque); margin-top: var(--s3); font-weight: 600; font-size: var(--small); }
.busca-painel__todas[hidden] { display: none; }

@media (max-width: 1279px) { .busca-painel__lista { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1023px) {
  .busca-painel { position: fixed; top: var(--busca-topo, 7.5rem); bottom: 0; overflow-y: auto; overscroll-behavior: contain; }
  .busca-painel__caixa { grid-template-columns: 1fr; gap: var(--s3); max-height: none; height: 100%; padding-block: var(--s3) var(--s5); }
  .busca-painel__resultados { order: -1; }
  .busca-painel.vazio-termo .busca-painel__resultados { order: 0; }
  .busca-painel__lista { grid-template-columns: 1fr; gap: 0; }
  .busca-res { grid-template-columns: 5rem minmax(0, 1fr); grid-template-rows: auto auto auto; column-gap: 1rem; row-gap: .2rem; padding-block: .625rem; border-bottom: 1px solid var(--fio); align-items: center; }
  .busca-res__foto { grid-row: 1 / 4; width: 5rem; }
  .busca-res__nome { align-self: end; }
  .busca-res[aria-selected="true"] { outline-offset: -2px; }
  .busca-painel__categorias { display: flex !important; flex-wrap: wrap; gap: .5rem; }
  .busca-painel__categorias a { padding: 0 .875rem; border: 1px solid var(--fio); min-height: var(--toque); }
}
@media (prefers-reduced-motion: reduce) { .busca-painel, .busca-res__foto img { transition: none; } }

/* css/componentes/carrossel.css */
/* Carrossel — primitivo do sistema (contrato §7, ERRATA v2 · E10). Markup: util.mjs carrossel(); motor: js/carrossel.js.
   Itens por vista: .carrossel--1..5 (desktop) → 3 em ≤ 1023 px → 2,2 no celular (o 3º cortado convida a arrastar).
   Quem usa só define aparência; quantidade fina por variável: .minha-vitrine .carrossel { --por-pagina: 4; }
   Progresso dourado: posição (modo pagina) ou segmento do slide + tempo (modo slide com autoplay). */
.carrossel {
  --por-pagina: 4;
  --carrossel-gap: clamp(.75rem, .45rem + .8vw, 1.25rem);   /* 12 → 20 px (cards: 16–20 px, §3.3) */
  --carrossel-recuo: 0px;
  position: relative; min-width: 0;
}
.carrossel--1 { --por-pagina: 1; --carrossel-gap: 0px; }
.carrossel--2 { --por-pagina: 2; }
.carrossel--3 { --por-pagina: 3; }
.carrossel--5 { --por-pagina: 5; }
@media (max-width: 1023px) { .carrossel--4, .carrossel--5 { --por-pagina: 3; } }
@media (max-width: 767px) {
  .carrossel--3, .carrossel--4, .carrossel--5 { --por-pagina: 2.2; }
  .carrossel--2 { --por-pagina: 1.15; }
  /* porPaginaCelular (independente do desktop) */
  .carrossel.carrossel--m1 { --por-pagina: 1; }
  .carrossel.carrossel--m1-15 { --por-pagina: 1.15; }
  .carrossel.carrossel--m1-5 { --por-pagina: 1.5; }
  .carrossel.carrossel--m2 { --por-pagina: 2; }
  .carrossel.carrossel--m2-2 { --por-pagina: 2.2; }
}

/* Sangria: começa alinhado ao container e corre até a borda da tela (o carrossel pode estar dentro de .container) */
.carrossel--sangria .carrossel__trilho {
  margin-inline: calc(50% - 50vw);
  --carrossel-recuo: max(var(--margem), (100vw - var(--container)) / 2);
}

.carrossel__trilho {
  position: relative; display: flex; gap: var(--carrossel-gap);
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--carrossel-recuo);
  padding-inline: var(--carrossel-recuo);
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.carrossel__trilho::-webkit-scrollbar { display: none; }
.carrossel__trilho:focus-visible { outline-offset: -3px; }
.carrossel__item {
  flex: 0 0 calc((100% - (var(--por-pagina) - 1) * var(--carrossel-gap)) / var(--por-pagina));
  min-width: 0; scroll-snap-align: start;
}
.carrossel--animando .carrossel__trilho, .carrossel--arrastando .carrossel__trilho { scroll-snap-type: none; }
@media (hover: hover) and (pointer: fine) {
  .carrossel--ligado:not(.carrossel--estatico) .carrossel__trilho { cursor: grab; }
  .carrossel--arrastando .carrossel__trilho { cursor: grabbing; user-select: none; }
  .carrossel--arrastando .carrossel__trilho * { pointer-events: none; }
}

/* ---------- Controles: [——— progresso ———] [‹] [❚❚] [›] ---------- */
.carrossel__controles {
  display: flex; align-items: center; gap: var(--s1);
  margin-top: clamp(1rem, .7rem + 1vw, 1.75rem);
}
.carrossel--estatico .carrossel__controles { display: none; }
.carrossel__progresso {
  order: -1; flex: 1 1 auto; position: relative; height: 2px; margin-right: var(--s3);
  background: var(--fio); overflow: hidden;
}
.carrossel__progresso > span {
  position: absolute; top: 0; bottom: 0;
  width: calc(var(--progresso-tam, .25) * 100%);
  left: calc(var(--progresso-pos, 0) * (1 - var(--progresso-tam, .25)) * 100%);
  background: var(--dourado); transform-origin: left center;
}
/* modo slide com autoplay: o segmento do slide atual enche no tempo do intervalo */
.carrossel--temporal .carrossel__progresso > span { animation: sv-carrossel-tempo var(--intervalo, 7000ms) linear both; }
.carrossel--parado .carrossel__progresso > span { animation-play-state: paused; }
@keyframes sv-carrossel-tempo { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.carrossel__botao {
  display: inline-grid; place-items: center; flex: none;
  inline-size: var(--toque); block-size: var(--toque); padding: 0;
  border: 1px solid var(--fio-forte); border-radius: var(--raio); background: transparent; color: var(--texto);
  transition: background-color var(--t-rapida) var(--ease), color var(--t-rapida) var(--ease), border-color var(--t-rapida) var(--ease), opacity var(--t-rapida) var(--ease);
}
.carrossel__botao:hover:not([aria-disabled="true"]) { background: var(--acao); border-color: var(--acao); color: var(--acao-texto); }
.carrossel__botao[aria-disabled="true"] { opacity: .32; cursor: default; }
.carrossel__pausa .icone-tocar { display: none; }
.carrossel__pausa[aria-pressed="true"] .icone-pausa { display: none; }
.carrossel__pausa[aria-pressed="true"] .icone-tocar { display: inline; }
.carrossel__pausa[hidden] { display: none; }

/* Setas laterais sobre as bordas (desktop com mouse); progresso continua abaixo */
@media (hover: hover) and (pointer: fine) and (min-width: 1024px) {
  .carrossel--laterais :is([data-ant], [data-prox]) {
    position: absolute; z-index: 2; top: calc((100% - var(--toque) - clamp(1rem, .7rem + 1vw, 1.75rem)) / 2);
    transform: translateY(-50%); background: var(--fundo); border-color: transparent; opacity: 0;
  }
  .carrossel--laterais [data-ant] { left: var(--s2); }
  .carrossel--laterais [data-prox] { right: var(--s2); }
  .carrossel--laterais:is(:hover, :focus-within) :is([data-ant], [data-prox]):not([aria-disabled="true"]) { opacity: 1; }
  .carrossel--laterais .carrossel__progresso { margin-right: 0; }
}

/* Sem JS: o trilho continua rolável (snap nativo); setas e pausa somem */
.sem-js .carrossel__controles button { display: none; }

/* css/componentes/guia.css */
/* Guia de medidas — gaveta marfim à direita (P1). Dono: agente peca.
   Tabela só com medidas documentadas (ficha técnica); sem medida: "Como medir" + consultor. Foco preso e Esc (nucleo.js). */
.guia {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 90;
  display: flex; flex-direction: column; width: min(100%, 30rem);
  background: var(--marfim); color: var(--texto); box-shadow: var(--sombra-painel);
  transform: translateX(100%); transition: transform .3s var(--ease);
}
.guia[hidden] { display: none; }
.guia.aberto { transform: none; }
.guia__cabeca {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s2);
  min-height: var(--header-h-compacto); padding: .5rem calc(var(--margem) * .75) .5rem var(--margem);
  border-bottom: 1px solid var(--fio);
}
.guia__titulo { margin: 0; font: 600 1.75rem/1.1 var(--serif); color: var(--verde); }
.guia__fechar {
  display: inline-grid; place-items: center; width: var(--toque); height: var(--toque); padding: 0;
  border: 1px solid transparent; background: none; color: var(--texto); cursor: pointer;
}
.guia__fechar:hover { border-color: var(--fio-forte, rgba(24, 33, 30, .28)); }
.guia__fechar:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.guia__corpo { flex: 1; overflow-y: auto; overscroll-behavior: contain; display: grid; align-content: start; gap: var(--s3); padding: var(--s4) var(--margem) var(--s5); }
@media (min-width: 768px) { .guia__cabeca, .guia__corpo { padding-inline: 2rem; } }
.guia__peca { margin: 0; font: 600 var(--body)/1.4 var(--sans); }
.guia__subtitulo { margin: var(--s1) 0 0; font: 600 var(--h4, 1.0625rem)/1.35 var(--sans); color: var(--texto); }

.guia__tabela-rolagem { overflow-x: auto; margin-inline: calc(var(--margem) * -1); padding-inline: var(--margem); }
@media (min-width: 768px) { .guia__tabela-rolagem { margin-inline: -2rem; padding-inline: 2rem; } }
.guia__tabela-rolagem:focus-visible { outline: 2px solid var(--foco); outline-offset: -2px; }
.guia__tabela { width: 100%; border-collapse: collapse; font: 400 var(--ui)/1.3 var(--sans); background: var(--fundo, #fff); }
.guia__tabela :is(th, td) { padding: .7rem .75rem; text-align: left; border-bottom: 1px solid var(--fio); white-space: nowrap; }
.guia__tabela thead th { font-weight: 600; font-size: var(--label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--texto-2); }
.guia__tabela tbody th { font-weight: 600; position: sticky; left: 0; background: var(--fundo, #fff); }

.guia__passos { display: grid; gap: .75rem; margin: 0; padding: 0; counter-reset: passo; }
.guia__passos li {
  position: relative; padding-left: 2rem; font-size: var(--ui); line-height: 1.55; counter-increment: passo;
}
.guia__passos li::before {
  content: counter(passo) "."; position: absolute; left: 0; top: 0;
  width: 1.5rem;
  font: 600 var(--ui)/1.55 var(--sans); color: var(--texto-2);
}
.guia__consultor { display: grid; grid-template-columns: auto 1fr; gap: var(--s2); padding: var(--s3); background: var(--fundo, #fff); }
.guia__consultor-icone { color: var(--verde); }
.guia__consultor-icone .icone { width: 1.5rem; height: 1.5rem; }
.guia__consultor-titulo { margin: 0 0 .25rem; font: 600 var(--ui)/1.4 var(--sans); }
.guia__consultor .small { margin: 0; }

/* véu da gaveta (criado pelo painel() do núcleo, no fim do <body>) */
.pagina-peca > .veu {
  position: fixed; inset: 0; z-index: 85; background: rgba(24, 33, 30, .42);
  opacity: 0; transition: opacity .3s var(--ease);
}
.pagina-peca > .veu.visivel { opacity: 1; }

@media (prefers-reduced-motion: reduce) { .guia, .pagina-peca > .veu { transition: none; } }

/* css/componentes/icones.css */
/* Ícones de traço (src/lib/icones.mjs): 20 px, traço 1,25 px em qualquer tamanho, cor do texto. */
.icone { display: inline-block; flex: none; inline-size: 1.25rem; block-size: 1.25rem; vertical-align: middle; overflow: visible; }
.icone :is(path, circle, rect, line, polyline) { vector-effect: non-scaling-stroke; }
.icone--16 { inline-size: 1rem; block-size: 1rem; }
.icone--24 { inline-size: 1.5rem; block-size: 1.5rem; }
.icone--32 { inline-size: 2rem; block-size: 2rem; }
.icone--dourado { color: var(--dourado); }   /* só em ícone ≥ 24 px ou sobre fundo escuro (dourado ≤ 5%) */
/* botão só com ícone: alvo de 44 px, rótulo acessível no aria-label do botão */
.botao-icone {
  position: relative; display: inline-grid; place-items: center; inline-size: var(--toque); block-size: var(--toque);
  padding: 0; border: 0; background: transparent; color: inherit; border-radius: var(--raio);
  transition: color var(--t-rapida) var(--ease);
}
.botao-icone:hover { color: var(--acao); }

/* css/componentes/megamenu.css */
/* Mega-menu (T3) — dono: topo-menu. Núcleo comum das 3: colunas sob o header; adaptação BF/VV: 1 foto editorial com
   legenda. Superfície marfim (contrato §3.1), --sombra-painel (painel flutuante) e véu sobre a página (BF/DU).
   Coleção: largura do container (4 listas + foto à direita). Camisaria/Alfaiataria: painel compacto do tamanho do
   conteúdo, sob o próprio item (BF 549×344). Altura ≤ 380 px. Abre em 0,2 s; hover com intenção (topo.js). */
.megamenu {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 59;
  background: var(--marfim); border-top: 1px solid var(--fio);
  box-shadow: var(--sombra-painel);
  opacity: 0; transform: translateY(-6px);
  transition: opacity var(--t-rapida) var(--ease), transform var(--t-rapida) var(--ease);
}
.megamenu[hidden] { display: none; }
.megamenu.aberto { opacity: 1; transform: none; }
.megamenu__caixa {
  display: grid; grid-template-columns: minmax(0, 1fr) 16rem; gap: clamp(2rem, 4vw, 4rem);
  padding-block: 1.75rem; max-height: min(23.75rem, calc(100svh - var(--header-h) - 3rem)); overflow-y: auto;
}
.megamenu__conteudo { display: grid; gap: 1rem; align-content: start; }
.megamenu__colunas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3) clamp(1.5rem, 3vw, 3rem); align-content: start; }
.megamenu__titulo {
  margin: 0 0 .5rem; padding-bottom: .625rem; border-bottom: 1px solid var(--fio);
  font: 600 var(--label)/1.2 var(--sans); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--verde);
}
.megamenu ul { list-style: none; margin: 0; padding: 0; display: grid; }
.megamenu__coluna a {
  display: inline-flex; align-items: center; min-height: 1.875rem;
  font: 400 var(--small)/1.3 var(--sans); color: var(--texto); text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 calc(100% - .3rem) / 0 1px no-repeat;
  transition: background-size var(--t-rapida) var(--ease), color var(--t-rapida) var(--ease);
}
@media (pointer: coarse) { .megamenu__coluna a { min-height: var(--toque); } }
.megamenu__coluna a:hover, .megamenu__coluna a:focus-visible { color: var(--verde); background-size: 100% 1px; }
.megamenu__tudo { justify-self: start; font-weight: 600; font-size: var(--small); min-height: 2rem; display: inline-flex; align-items: center; }

.megamenu__destaque { display: grid; grid-template-rows: auto auto; gap: .625rem; align-content: start; color: var(--texto); text-decoration: none; }
.megamenu__foto { display: block; height: 15.5rem; overflow: hidden; background: var(--estudio, #E9E5DF); }
.megamenu__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; transition: transform .6s var(--ease); }
.megamenu__destaque:hover .megamenu__foto img { transform: scale(1.03); }
.megamenu__legenda { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; }
.megamenu__legenda-titulo { font: 600 1.25rem/1.15 var(--serif); color: var(--verde); }
.megamenu__legenda-texto { font: 400 .8125rem/1.4 var(--sans); color: var(--texto-2); white-space: nowrap; }

/* Compacto (Camisaria, Alfaiataria): sob o item, largura do conteúdo; o JS corrige se passar da borda (--mega-x) */
.topo__item--compacto { position: relative; }
.megamenu--compacto { left: calc(-2rem + var(--mega-x, 0px)); right: auto; width: max-content; }
.megamenu--compacto .megamenu__caixa { width: auto; margin: 0; padding: 1.75rem 2rem; grid-template-columns: auto 13.5rem; gap: 3rem; }
.megamenu--compacto .megamenu__colunas { grid-template-columns: repeat(2, minmax(9rem, max-content)); column-gap: 2.5rem; }
.megamenu--compacto .megamenu__foto { height: auto; aspect-ratio: 4 / 5; }
.megamenu--compacto .megamenu__foto img { object-position: 50% 50%; }

/* Véu sobre a página enquanto um mega-menu está aberto (o header fica acima) */
.mega-veu {
  position: fixed; inset: 0; z-index: 55; background: rgba(24, 33, 30, .25);
  opacity: 0; transition: opacity var(--t-rapida) var(--ease);
}
.mega-veu[hidden] { display: none; }
.mega-veu.visivel { opacity: 1; }

@media (max-width: 1023px) { .megamenu, .mega-veu { display: none !important; } }
@media (max-width: 1279px) { .megamenu__caixa { grid-template-columns: minmax(0, 1fr) 13rem; } }
@media (prefers-reduced-motion: reduce) { .megamenu, .mega-veu { transition: none; transform: none; } .megamenu__foto img { transition: none; } }

/* css/componentes/selecao.css */
/* Minha seleção (G2) — dono: topo-menu. Botão coração (.favoritar) para o site inteiro + gaveta lateral marfim.
   Card e PDP só POSICIONAM o botão (ex.: .card__favoritar { position: absolute; top: .5rem; right: .5rem }). */
.favoritar {
  display: inline-grid; place-items: center; grid-auto-flow: column; gap: .5rem;
  min-width: var(--toque); height: var(--toque); padding: 0; border: 0; background: none; color: var(--texto); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.favoritar .icone { grid-area: 1 / 1; width: 22px; height: 22px; transition: transform var(--t-rapida) var(--ease), opacity var(--t-rapida) var(--ease); }
.favoritar .favoritar__cheio { opacity: 0; color: var(--verde); }
.favoritar[aria-pressed="true"] .favoritar__cheio { opacity: 1; }
.favoritar[aria-pressed="true"] .favoritar__vazio { opacity: 0; }
.favoritar:hover .icone { transform: scale(1.08); }
.favoritar:active .icone { transform: scale(.92); }
.favoritar__texto { grid-area: 1 / 2; font: 600 var(--label)/1.2 var(--sans); letter-spacing: var(--track-label); text-transform: uppercase; }
.favoritar:has(.favoritar__texto) { padding-inline: .75rem 1rem; border: 1px solid var(--fio); }
.favoritar:has(.favoritar__texto):hover { border-color: var(--verde); }
/* sobre foto: base branca translúcida para o traço não sumir em foto escura */
.favoritar--sobre-foto { background: rgba(255, 255, 255, .82); } /* raio 0 (marca); quem posiciona decide position */
/* sem JS não há como guardar */
.sem-js .favoritar, .js-falhou .favoritar { display: none !important; }

/* ---------- Gaveta ---------- */
.selecao {
  --selecao-x: clamp(1.25rem, 4vw, 2rem);
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 80;
  display: flex; flex-direction: column; width: min(100%, 27rem);
  background: var(--marfim); color: var(--texto); box-shadow: var(--sombra-painel);
  transform: translateX(100%); transition: transform var(--t-media) var(--ease);
}
.selecao[hidden] { display: none; }
.selecao.aberto { transform: none; }
.selecao__topo {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: var(--header-h-compacto); padding: .5rem .75rem .5rem var(--selecao-x); border-bottom: 1px solid var(--fio);
}
.selecao__titulo { margin: 0; font: 600 1.75rem/1.1 var(--serif); color: var(--verde); }
.selecao__qtd { display: inline-block; margin-left: .5rem; font: 500 var(--small)/1 var(--sans); color: var(--texto-2); vertical-align: middle; }
.selecao__fechar { display: grid; place-items: center; width: var(--toque); height: var(--toque); padding: 0; border: 0; background: none; color: var(--texto); cursor: pointer; }
.selecao__fechar .icone { width: 22px; height: 22px; }
.selecao__corpo { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: var(--s3) var(--selecao-x); }
.selecao__memoria { margin: 0 0 var(--s2); padding: .75rem 1rem; border-left: 2px solid var(--dourado); background: #FFFFFF; font-size: var(--small); color: var(--texto-2); }
.selecao__memoria[hidden] { display: none; }
.selecao__vazio { display: grid; gap: var(--s2); justify-items: start; }
.selecao__vazio[hidden] { display: none; }
.selecao__vazio > p:first-child { margin: 0; font: 600 1.375rem/1.2 var(--serif); color: var(--verde); }
.selecao__dica { margin: 0; color: var(--texto-2); font-size: var(--small); }
.selecao__dica-icone { width: 16px; height: 16px; vertical-align: -3px; }
.selecao__lista { display: grid; gap: 0; }
.selecao__lista[hidden] { display: none; }
.selecao__item { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: 1rem; padding-block: 1rem; border-bottom: 1px solid var(--fio); }
.selecao__item:first-child { padding-top: 0; }
.selecao__foto { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--estudio, #E9E5DF); }
.selecao__foto img { width: 100%; height: 100%; object-fit: cover; }
.selecao__info { display: grid; align-content: start; gap: .25rem; min-width: 0; }
.selecao__nome { font: 600 var(--small)/1.35 var(--sans); color: var(--texto); text-decoration: none; }
.selecao__nome:hover { color: var(--verde); text-decoration: underline; text-underline-offset: .2em; }
.selecao__meta { margin: 0; font-size: .8125rem; color: var(--texto-2); }
.selecao__preco { margin: 0; font: 500 var(--small)/1.3 var(--sans); font-variant-numeric: tabular-nums; }
.selecao__remover {
  justify-self: start; display: inline-flex; align-items: center; min-height: var(--toque); margin-top: -.25rem; padding: 0; border: 0; background: none; cursor: pointer;
  font: 500 .8125rem/1 var(--sans); color: var(--texto); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em;
}
.selecao__remover:hover { color: var(--verde); }
.selecao__rodape { display: grid; gap: .75rem; padding: var(--s2) var(--selecao-x) max(var(--s2), env(safe-area-inset-bottom)); border-top: 1px solid var(--fio); background: var(--marfim); }
.selecao__rodape[hidden] { display: none; }
.selecao__rodape .botao .icone { width: 18px; height: 18px; }
.selecao__mensagem { display: grid; gap: .75rem; }
.selecao__mensagem[hidden] { display: none; }
.selecao__aviso { margin: 0; padding-left: .75rem; border-left: 2px solid var(--dourado); font-size: .8125rem; color: var(--texto); }
.selecao__mensagem textarea {
  width: 100%; min-height: 7.5rem; max-height: 30svh; padding: .75rem; border: 1px solid var(--fio); border-radius: 0; resize: vertical;
  background: #FFFFFF; font: 400 .8125rem/1.5 var(--sans); color: var(--texto);
}
.selecao__copiado { margin: 0; font-size: .8125rem; color: var(--verde); font-weight: 600; }
.selecao__copiado[hidden] { display: none; }
.selecao__nota { margin: 0; font-size: .8125rem; color: var(--texto-2); text-align: center; }
@media (prefers-reduced-motion: reduce) { .selecao { transition: none; } .favoritar .icone { transition: none; } }
.selecao__acoes { display: grid; gap: .75rem; }
.selecao__acoes[hidden] { display: none; }

/* css/paginas/colecao.css */
/* Página /colecao/ (L1) — dono: catalogo-card.
   Migalhas → título (Cormorant, --h1) + 1 linha → barra → grade. Sem rótulo acima do título, sem bloco chapado. */
.colecao-topo { padding-bottom: clamp(1.5rem, 1rem + 1.5vw, 2.5rem); }
.colecao-topo__titulo { margin-top: clamp(1.25rem, .8rem + 1.5vw, 2.25rem); font-size: var(--h1); line-height: var(--lh-titulo, 1.05); }
/* título → texto ≈ 0,45 × a altura do título */
.colecao-topo__texto {
  margin-top: calc(var(--h1) * .45); max-width: 38rem;
  font: 400 var(--body-l)/1.5 var(--sans); color: var(--texto-2);
}

.colecao { padding-bottom: var(--secao); }
.colecao__resultado { margin-top: clamp(1.5rem, 1rem + 1.2vw, 2.25rem); }
/* a altura só fica presa durante a troca do filtro (colecao.js), para o rodapé não saltar; depois segue o conteúdo */
.grade-produtos--colecao.grade--entrando { animation: colecao-entra .28s var(--ease); }
@keyframes colecao-entra { from { opacity: .35; } to { opacity: 1; } }
.grade-produtos[hidden] { display: none; }

/* Estado vazio: diz o que aconteceu e oferece o próximo passo (famílias, ver tudo, consultor) */
.vazio { display: grid; gap: var(--s2); justify-items: start; max-width: 40rem; padding-block: var(--s5) var(--s6); }
.vazio[hidden] { display: none; }
.vazio__titulo { font-size: clamp(1.75rem, 1.5rem + 1vw, 2.25rem); line-height: 1.1; }
.vazio__texto { color: var(--texto-2); font-size: var(--body); }
.vazio__familias { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.vazio__familia {
  display: inline-flex; align-items: center; min-height: var(--toque, 2.75rem); padding: 0 1rem;
  border: 1px solid var(--fio); color: var(--texto); text-decoration: none; font: 500 var(--ui, .875rem)/1 var(--sans);
  transition: border-color var(--t-rapida) var(--ease);
}
.vazio__familia:hover { border-color: var(--texto); }
.vazio__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); margin-top: var(--s1); }

@media (max-width: 599px) {
  .colecao-topo__texto { font-size: var(--body); margin-top: .75rem; }
  .colecao-topo__titulo { margin-top: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .grade-produtos--colecao.grade--entrando { animation: none; }
}

/* "Ver mais" em lotes de 12 [E25]: contagem + progresso (filete dourado = acabamento) + botão */
.colecao__mais { display: grid; justify-items: center; gap: .875rem; margin-top: clamp(2.5rem, 2rem + 1.5vw, 3.5rem); }
.colecao__mais[hidden] { display: none; }
.colecao__mostrando { margin: 0; font: 400 var(--ui, .875rem)/1.3 var(--sans); color: var(--texto-2); font-variant-numeric: tabular-nums; }
.colecao__progresso { display: block; width: min(15rem, 70%); height: 2px; background: var(--fio); }
.colecao__progresso span { display: block; height: 100%; width: 0; background: var(--dourado); transition: width .35s var(--ease); }
.colecao__ver-mais { min-width: 15rem; }
.colecao__ver-mais[hidden] { display: none; }
.sem-js .colecao__mais, .js-falhou .colecao__mais { display: none; }

/* css/paginas/home.css */
/* Início (Piloto 1) — dono: agente home. Ritmo vertical da página; os blocos ficam em componentes/blocos.css.
   Ordem: hero → serviços → vitrine "Capítulo I" → categorias → consultivo → vitrine "Camisaria" → ocasiões → marca.
   Orçamento de altura (E13): ≤ 6.750 px em 1440 × 900 e ≤ 7.500 px em 390. */
.pagina-home main { background: var(--fundo); }
.pagina-home { --ritmo: clamp(3rem, 2.2rem + 2.4vw, 4.5rem); } /* 48 (390) → 72 (1440) */

.pagina-home :is(.vitrine, .categorias, .consultivo, .ocasioes-home, .marca-home) { padding-block: var(--ritmo); }
/* duas seções brancas seguidas não somam respiro dobrado */
.pagina-home .vitrine + .categorias,
.pagina-home .vitrine + .ocasioes-home { padding-top: 0; }
.pagina-home .servicos + .vitrine { padding-top: calc(var(--ritmo) * .6); }
.pagina-home .ocasioes-home + .marca-home { padding-top: calc(var(--ritmo) * .5); }

/* css/paginas/institucionais.css */
/* Institucionais (A marca, Atendimento, Lista, Privacidade, 404) e Ocasiões. Dono: agente rodape-institucionais.
   Fundo branco; títulos em Cormorant 600 (H1 44–56, H2 30–38); H3 em Manrope 600 [ERRATA E2]; fotos grandes em
   retrato 4:5 (nunca acima de ~1,25× da largura nativa: coluna ≤ 540 px no desktop); fios de 1 px; sem rótulo acima
   de título e sem números decorativos [CONTRATO §3.6]. Tokens com reserva: o sistema publica os nomes finais. */
.pagina-inst {
  --inst-gap: clamp(1rem, .6rem + 1.2vw, 1.5rem);
  --inst-secao: var(--secao, clamp(4rem, 2.5rem + 5vw, 7.5rem));
  --inst-titulo: var(--titulo, var(--verde, #17372D));
  --inst-fio: var(--fio, rgba(24, 33, 30, .12));
  --inst-texto-2: var(--texto-2, #59645F);
  --inst-topo: calc(var(--header-h-compacto, 4rem) + 1.5rem);
}
.pagina-inst main h1 {
  font: 600 var(--h1)/1.04 var(--serif, "Cormorant Garamond", serif);
  color: var(--inst-titulo); letter-spacing: -.01em; margin: 0; text-wrap: balance;
}
.pagina-inst main h2 {
  font: 600 var(--h2)/1.1 var(--serif, "Cormorant Garamond", serif);
  color: var(--inst-titulo); margin: 0; text-wrap: balance;
}
.inst-lead { font-size: var(--body-l); line-height: 1.55; max-width: 38rem; margin: 0; text-wrap: pretty; }

/* ---------- Cabeça de página (sem foto) ---------- */
.inst-cabeca { display: grid; gap: var(--s3, 1.5rem); padding-bottom: clamp(2rem, 1rem + 3vw, 3.5rem); }
.inst-cabeca > h1 { margin-top: clamp(1rem, .5rem + 2vw, 2.5rem); }

/* ---------- Seções ---------- */
.inst-secao { padding-block: var(--inst-secao); }
.inst-secao--colada { padding-top: 0; }
.inst-secao--fio { padding-top: 0; }
.inst-secao--fio > .container { border-top: 1px solid var(--inst-fio); padding-top: var(--inst-secao); }
.inst-secao--superficie { background: var(--superficie, #F7F5F0); }
.inst-titulo-secao { margin-bottom: clamp(2rem, 1.5rem + 1.5vw, 3rem) !important; }

/* ---------- Par foto + texto (foto grande em retrato) ---------- */
.inst-abertura { padding-bottom: var(--inst-secao); }
.inst-par { display: grid; gap: clamp(2rem, 1.5rem + 2vw, 3.5rem); margin-top: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.inst-secao .inst-par { margin-top: 0; }
.inst-foto { margin: 0; aspect-ratio: 4 / 5; }
.inst-foto picture, .inst-foto img { display: block; width: 100%; height: 100%; }
.inst-foto img { object-fit: cover; }
.inst-par__texto { display: grid; gap: var(--s3, 1.5rem); align-content: start; min-width: 0; }
.inst-par__texto > h2 + .inst-lead, .inst-par__texto > h1 + .inst-frase { margin-top: calc(var(--s2, 1rem) * -.25); }
.inst-par__texto p { margin: 0; max-width: 38rem; }
@media (min-width: 768px) {
  .inst-par { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--inst-gap); align-items: start; }
  .inst-par__foto { grid-column: 1 / span 6; }
  .inst-par__texto { grid-column: 7 / -1; }
  .inst-par--inverso .inst-par__foto { grid-column: 7 / -1; grid-row: 1; }
  .inst-par--inverso .inst-par__texto { grid-column: 1 / span 6; grid-row: 1; }
  .inst-par--sem-foto .inst-par__texto { grid-column: 1 / span 10; }
}
@media (min-width: 1024px) {
  .inst-par { align-items: center; }
  .inst-par__foto { grid-column: 1 / span 5; }
  .inst-par__texto { grid-column: 7 / -1; }
  .inst-par--inverso .inst-par__foto { grid-column: 8 / -1; }
  .inst-par--inverso .inst-par__texto { grid-column: 1 / span 6; }
  .inst-par--jornada { align-items: start; }
  .inst-par__foto--fixa { position: sticky; top: var(--inst-topo); }
}

/* Frase da marca (a única desta página) e pilares */
.inst-frase {
  font: 500 var(--h2)/1.15 var(--serif, "Cormorant Garamond", serif);
  font-style: italic; color: var(--inst-titulo); text-wrap: balance;
}
.inst-pilares { display: grid; margin: var(--s2, 1rem) 0 0; border-bottom: 1px solid var(--inst-fio); }
.inst-pilares > div { display: grid; gap: .35rem; padding-block: var(--s2, 1rem); border-top: 1px solid var(--inst-fio); }
.inst-pilares dt { font: 600 var(--body)/1.3 var(--sans, sans-serif); color: var(--inst-titulo); }
.inst-pilares dd { margin: 0; line-height: 1.55; }
@media (min-width: 768px) { .inst-pilares > div { grid-template-columns: 8.5rem 1fr; column-gap: var(--s3, 1.5rem); } }

/* Princípios · Não somos: duas colunas de linhas em Cormorant (sem numeração) */
.inst-duas { display: grid; gap: clamp(3rem, 2rem + 3vw, 4.5rem); }
@media (min-width: 768px) { .inst-duas { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2rem, 1rem + 4vw, 6rem); } }
.inst-bloco { display: grid; gap: clamp(1.5rem, 1rem + 1.5vw, 2.5rem); align-content: start; }
.inst-linhas { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--inst-fio); }
.inst-linhas li {
  padding-block: .95rem; border-top: 1px solid var(--inst-fio);
  font: 500 var(--h3)/1.3 var(--serif, "Cormorant Garamond", serif); color: var(--madeira, #18211E);
}
.inst-linhas--nao li { color: var(--inst-texto-2); }

.inst-fundador { display: grid; gap: .35rem; padding-top: var(--s3, 1.5rem); border-top: 1px solid var(--inst-fio); }
.inst-fundador h3 { margin: 0; font: 600 var(--h3)/1.25 var(--sans, sans-serif); color: var(--inst-titulo); }
.inst-par__texto > .link { justify-self: start; }

/* ---------- Atendimento: passos sem números (título | texto), perguntas, canais ---------- */
.inst-passos { margin: var(--s2, 1rem) 0 0; padding: 0; list-style: none; border-bottom: 1px solid var(--inst-fio); }
.inst-passos li { display: grid; gap: .5rem; padding-block: clamp(1.25rem, 1rem + .8vw, 1.75rem); border-top: 1px solid var(--inst-fio); scroll-margin-top: var(--inst-topo); }
.inst-passos h3 { margin: 0; font: 600 var(--h3)/1.25 var(--sans, sans-serif); color: var(--inst-titulo); }
.inst-passos p { margin: 0; line-height: 1.6; }
@media (min-width: 1200px) { .inst-passos li { grid-template-columns: 11rem 1fr; column-gap: var(--s4, 2rem); align-items: baseline; } }

.inst-lado { display: grid; gap: clamp(2rem, 1.5rem + 2vw, 3rem); }
.inst-lado__cabeca { display: grid; gap: var(--s2, 1rem); align-content: start; }
.inst-lado__cabeca p { margin: 0; color: var(--inst-texto-2); max-width: 26rem; line-height: 1.55; }
@media (min-width: 1024px) {
  .inst-lado { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--inst-gap); }
  .inst-lado__cabeca { grid-column: 1 / span 4; position: sticky; top: var(--inst-topo); align-self: start; }
  .inst-lado > :last-child { grid-column: 6 / -1; }
}
.inst-perguntas { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--inst-fio); }
.inst-perguntas li {
  padding-block: 1.1rem; border-top: 1px solid var(--inst-fio);
  font: 500 var(--h3)/1.3 var(--serif, "Cormorant Garamond", serif); font-style: italic; color: var(--madeira, #18211E);
}

.inst-canais { display: grid; gap: var(--s4, 2rem); margin: 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .inst-canais { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); column-gap: var(--inst-gap); } }
.inst-canais li { display: grid; gap: .6rem; align-content: start; padding-top: var(--s3, 1.5rem); border-top: 1px solid var(--verde, #17372D); }
.inst-canais h3 { margin: 0; font: 600 var(--h3)/1.25 var(--sans, sans-serif); color: var(--inst-titulo); }
.inst-canais p { margin: 0; color: var(--inst-texto-2); line-height: 1.55; max-width: 24rem; }
.inst-canais .link { justify-self: start; }
.inst-canais__icone { width: 1.5rem; height: 1.5rem; color: var(--verde, #17372D); }

/* ---------- Lista de interesse ---------- */
.lista-pagina { display: grid; gap: clamp(2.5rem, 2rem + 2vw, 4rem); padding-bottom: var(--inst-secao); }
.lista-pagina__texto { display: grid; gap: var(--s3, 1.5rem); align-content: start; }
.lista-pagina__texto h1 { margin-top: clamp(1rem, .5rem + 2vw, 2.5rem) !important; }
.lista-pagina__foto { display: none; }
@media (min-width: 1024px) {
  .lista-pagina { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--inst-gap); }
  .lista-pagina__texto { grid-column: 1 / span 5; }
  .lista-pagina__form { grid-column: 7 / -1; padding-top: clamp(4rem, 3rem + 3vw, 6rem); }
  .lista-pagina__foto { display: block; margin-top: var(--s3, 1.5rem); max-width: 30rem; }
}
.lista-fina { display: grid; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.lista-fina li { position: relative; padding-left: 1.5rem; line-height: 1.5; }
.lista-fina li::before { content: ""; position: absolute; left: 0; top: .75em; width: .75rem; height: 1px; background: var(--dourado, #B29562); }
.aviso-canal {
  margin: 0; padding: var(--s2, 1rem) var(--s3, 1.5rem); background: var(--superficie, #F7F5F0);
  border-left: 2px solid var(--verde, #17372D); color: var(--texto, #18211E); font-size: var(--ui); line-height: 1.55; max-width: none;
}
.confirmacao { display: grid; gap: var(--s3, 1.5rem); padding: var(--s4, 2rem); background: var(--superficie, #F7F5F0); border-top: 2px solid var(--verde, #17372D); }
.confirmacao[hidden] { display: none; }
.confirmacao:focus { outline: none; }
.confirmacao p { margin: 0; line-height: 1.55; }
.confirmacao__rotulo { font: 600 var(--ui)/1.3 var(--sans, sans-serif); }
.confirmacao__msg {
  width: 100%; padding: var(--s2, 1rem); border: 1px solid var(--inst-fio); border-radius: 0; background: var(--fundo, #FFF);
  font: 400 var(--ui)/1.55 var(--sans, sans-serif); color: var(--texto, #18211E); resize: vertical;
}
.confirmacao__acoes { display: flex; flex-wrap: wrap; gap: var(--s2, 1rem); }
.confirmacao .link { justify-self: start; border: 0; background-color: transparent; cursor: pointer; }

/* ---------- Privacidade ---------- */
.inst-texto-longo { display: grid; gap: var(--s4, 2rem); max-width: 46rem; margin-inline: 0; }
.inst-texto-longo__bloco { display: grid; gap: .6rem; padding-top: var(--s3, 1.5rem); border-top: 1px solid var(--inst-fio); }
.pagina-inst main .inst-texto-longo__bloco h2 { font: 600 var(--h3)/1.3 var(--sans, sans-serif); }
.inst-texto-longo p { margin: 0; line-height: 1.65; }

/* ---------- 404 ---------- */
.inst-erro { padding-block: clamp(3rem, 2rem + 5vw, 7rem) var(--inst-secao); }
.inst-erro .container { display: grid; gap: var(--s3, 1.5rem); justify-items: start; }
.inst-erro__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2, 1rem) var(--s4, 2rem); margin-top: var(--s2, 1rem); }

/* Reserva do carrossel (só se o primitivo do sistema faltar) */
.inst-trilho { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(12rem, 1fr); gap: var(--inst-gap); overflow-x: auto; scroll-snap-type: x mandatory; }
.inst-trilho > * { scroll-snap-align: start; }

/* ---------- Ocasiões ---------- */
.inst-cabeca--ocasioes { padding-bottom: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.oc-indice ul { display: flex; flex-wrap: wrap; gap: .5rem; margin: var(--s2, 1rem) 0 0; padding: 0; list-style: none; }
.oc-indice a {
  display: inline-flex; align-items: center; min-height: 2.75rem; padding: .5rem 1.1rem;
  border: 1px solid var(--fio-forte, rgba(24, 33, 30, .28)); color: var(--texto, #18211E); text-decoration: none;
  font: 500 var(--ui)/1.2 var(--sans, sans-serif); transition: border-color .2s var(--ease, ease), background-color .2s var(--ease, ease), color .2s var(--ease, ease);
}
.oc-indice a:hover { border-color: var(--verde, #17372D); background: var(--verde, #17372D); color: var(--marfim, #F4F0E6); }

.ocasiao { scroll-margin-top: var(--header-h-compacto, 4rem); padding-bottom: clamp(3rem, 2rem + 3vw, 5.5rem); }
.ocasiao > .container { border-top: 1px solid var(--inst-fio); padding-top: clamp(3rem, 2rem + 3vw, 5.5rem); }
.ocasiao__grade { display: grid; gap: clamp(1.5rem, 1rem + 1.5vw, 2.5rem); }
.ocasiao__foto { margin: 0; aspect-ratio: 4 / 5; }
.ocasiao__foto picture, .ocasiao__foto img { display: block; width: 100%; height: 100%; }
.ocasiao__foto img { object-fit: cover; }
.ocasiao__texto { display: grid; gap: var(--s2, 1rem); align-content: start; min-width: 0; }
.ocasiao__texto p { margin: 0; max-width: 36rem; line-height: 1.6; }
.ocasiao__texto > .link { justify-self: start; margin-top: var(--s1, .5rem); }
.ocasiao__msg { font-size: var(--body-l); line-height: 1.55; color: var(--texto, #18211E); }
.ocasiao__pecas { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--inst-fio); max-width: 36rem; }
.ocasiao__pecas li { display: grid; gap: .15rem; padding-block: .7rem; border-top: 1px solid var(--inst-fio); }
.ocasiao__pecas strong { font: 600 var(--ui)/1.35 var(--sans, sans-serif); color: var(--texto, #18211E); }
.ocasiao__pecas span { font-size: var(--ui); line-height: 1.5; color: var(--inst-texto-2); }
.ocasiao__servico { font-size: var(--ui); color: var(--inst-texto-2); padding-top: var(--s2, 1rem); border-top: 1px solid var(--inst-fio); }
.ocasiao__servico strong { color: var(--texto, #18211E); font-weight: 600; }
.ocasiao__look { min-width: 0; }
.ocasiao__look-titulo { margin: 0 0 var(--s2, 1rem); font: 600 var(--h4)/1.3 var(--sans, sans-serif); color: var(--texto, #18211E); }
@media (max-width: 767px) { .ocasiao__foto { max-height: 72svh; } }
@media (min-width: 768px) {
  .ocasiao__grade { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--inst-gap); }
  .ocasiao__foto { grid-column: 1 / span 6; grid-row: 1; }
  .ocasiao__texto { grid-column: 7 / -1; grid-row: 1; align-self: center; }
  .ocasiao__look { grid-column: 1 / -1; grid-row: 2; }
  .ocasiao--inversa .ocasiao__foto { grid-column: 7 / -1; }
  .ocasiao--inversa .ocasiao__texto { grid-column: 1 / span 6; }
  .ocasiao--sem-foto .ocasiao__texto { grid-column: 1 / span 10; }
}
@media (min-width: 1024px) {
  .ocasiao__foto { grid-column: 1 / span 5; grid-row: 1 / span 2; position: sticky; top: var(--inst-topo); align-self: start; }
  .ocasiao__texto { grid-column: 7 / -1; grid-row: 1; align-self: start; }
  .ocasiao__look { grid-column: 7 / -1; grid-row: 2; align-self: start; }
  .ocasiao--inversa .ocasiao__foto { grid-column: 8 / -1; }
  .ocasiao--inversa .ocasiao__texto, .ocasiao--inversa .ocasiao__look { grid-column: 1 / span 6; }
  .ocasiao--sem-foto .ocasiao__look { grid-column: 1 / -1; }
}

/* celular: na abertura de página, o título vem antes da foto (H1 na 1ª dobra) */
@media (max-width: 767px) { .inst-abertura .inst-par__foto { order: 2; } }

/* [E38] moldura limitada pela resolução do arquivo (classe gerada por limiteFoto) */
.foto-max-320 { max-width: 320px; } .foto-max-360 { max-width: 360px; } .foto-max-400 { max-width: 400px; }
.foto-max-440 { max-width: 440px; } .foto-max-480 { max-width: 480px; } .foto-max-520 { max-width: 520px; }
:is(.inst-par__foto, .ocasiao__foto)[class*="foto-max-"] { width: 100%; }
@media (min-width: 768px) {
  .inst-par--inverso .inst-par__foto[class*="foto-max-"], .ocasiao--inversa .ocasiao__foto[class*="foto-max-"] { justify-self: end; }
}
/* [E38/B2] nos looks, a 2ª vista do card não pode ser ampliada por cover (detalhes em paisagem): contain sobre o estúdio */
.ocasiao__look .card__vista--2 { background: var(--estudio, #E8E4DE); }
.ocasiao__look .card__vista--2 img { object-fit: contain; }
/* foto limitada pela resolução: coluna de foto mais estreita (4/12) e texto + look mais largos (8/12) */
@media (min-width: 1024px) {
  .ocasiao--estreita .ocasiao__foto { grid-column: 1 / span 4; }
  .ocasiao--estreita .ocasiao__texto, .ocasiao--estreita .ocasiao__look { grid-column: 5 / -1; }
  .ocasiao--estreita.ocasiao--inversa .ocasiao__foto { grid-column: 9 / -1; }
  .ocasiao--estreita.ocasiao--inversa .ocasiao__texto, .ocasiao--estreita.ocasiao--inversa .ocasiao__look { grid-column: 1 / span 8; }
}

/* css/paginas/peca.css */
/* Página de peça (P1). Dono: agente peca.
   ≥ 1024 px: grade FIXA galeria (miniaturas + moldura) | coluna de compra (≈ 57/43 em 1440) [REF:BF 58/42, DU 54/45];
   a coluna de compra tem a mesma posição e largura em todas as cores e peças (Q3-02).
   As duas colunas são sticky sob o header: a mais curta acompanha a rolagem até o fim da outra [REF:VV], então
   nunca sobra coluna vazia. < 1024 px: uma coluna; no celular, barra fixa com preço + "Consultar". */
.peca-topo { padding-bottom: var(--s3); }
.peca-topo .migalhas { padding-top: var(--s2); }
.peca { display: grid; gap: var(--s4); padding-bottom: var(--secao); }
.peca__galerias { min-width: 0; }
/* a linha de cima (galeria + compra) é o bloco de contenção do sticky: sem ela o Chrome deixa a galeria descer sobre a faixa de
   detalhes, o serviço e os acordeões, que vêm na linha de baixo */
.peca__linha { display: contents; }

@media (min-width: 1024px) {
  .peca { grid-template-columns: minmax(0, 1fr) 21rem; column-gap: clamp(var(--s4), 3.5vw, var(--s6)); row-gap: var(--s6); align-items: start; }
  /* M1: só o núcleo da compra (título → preço → cor → tamanho → CTA → seleção) é sticky, ao lado da galeria;
     serviço e acordeões vêm abaixo, fora do sticky: serviço sob a galeria, acordeões sob a compra (subgrid) */
  .peca__linha { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: start; }
  .peca__galerias, .peca__compra { grid-row: 1; position: sticky; top: var(--topo-fixo); }
  .peca__galerias { grid-column: 1; }
  .peca__compra { grid-column: 2; }
  .peca__mais { grid-row: 2; grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: start; }
  .peca__mais > .peca__apoio { grid-column: 1; grid-row: 1 / span 2; display: grid; gap: var(--s3); align-content: start; min-width: 0; }
  .peca__mais > :not(.peca__apoio) { grid-column: 2; }
}

@media (min-width: 1280px) {
  .peca { grid-template-columns: minmax(0, 1fr) minmax(22rem, 30rem); column-gap: clamp(var(--s5), 5.5vw, 6rem); }
}
@media (max-width: 1023px) {
  .peca__compra { width: 100%; max-width: 40rem; margin-inline: auto; }
}

/* ---------- Coluna de compra ---------- */
.peca__fixa { display: grid; gap: var(--s3); }
.peca__cabeca { display: grid; gap: .5rem; }
.peca__meta { margin: 0; }
/* H1 da PDP: Cormorant 600, 44–52 px (E2: H1 44–56) */
.peca__nome { margin: 0; font: 600 clamp(2.75rem, 2.35rem + .8vw, 3.25rem)/1.04 var(--serif); color: var(--titulo); text-wrap: balance; }
.peca__ref-linha { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 var(--s2); min-height: var(--toque); }
/* linha · categoria · Ref. numa linha pequena em caixa normal, abaixo do título [Sol D03] */
.peca__ref { margin: 0; font: 400 var(--ui)/1.4 var(--sans); color: var(--texto-2); font-variant-numeric: lining-nums tabular-nums; }
.peca__ref-sku[hidden] { display: none; }
.peca__compartilhar {
  display: inline-flex; align-items: center; gap: .4rem; min-height: var(--toque); margin-left: auto; padding: 0 .25rem;
  border: 0; background: none; color: var(--texto); font: 500 var(--label)/1 var(--sans); letter-spacing: var(--track-label);
  text-transform: uppercase; cursor: pointer;
}
.peca__compartilhar .icone { width: 1.125rem; height: 1.125rem; }
.peca__compartilhar:hover .peca__compartilhar-texto { text-decoration: underline; text-underline-offset: .3em; }
.peca__compartilhar:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.peca__aviso { flex-basis: 100%; margin: 0; color: var(--texto-2); }
.peca__aviso:empty { display: none; }

/* preço 22–24 px; parcela 12–13 px logo abaixo (E30) */
.peca__valor { display: grid; gap: .2rem; }
.peca__preco { margin: 0; font: 500 var(--preco-pdp)/1.2 var(--sans); color: var(--texto); letter-spacing: .005em; }
.peca__parcela { margin: 0; font: 400 var(--parcela-pdp)/1.4 var(--sans); color: var(--texto-2); }

.consulta { display: grid; gap: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--fio); }
.consulta__acao { display: grid; gap: .625rem; }
.consulta__botao { min-height: 3.5rem; }
.consulta .peca__favoritar { width: 100%; min-height: 3rem; height: auto; justify-content: center; border-color: var(--fio-forte, rgba(24, 33, 30, .28)); }
.consulta__nota { margin: .125rem 0 0; }

/* bloco de serviço [REF:BF caixa "ajuste"; VV serviço] — só serviços documentados (d.servicos) */
.peca-servicos { display: grid; gap: var(--s2); margin: 0; padding: var(--s3); list-style: none; background: var(--superficie, #F7F5F0); }
.peca-servicos__item { display: grid; grid-template-columns: 1.5rem 1fr; gap: .875rem; align-items: start; }
.peca-servicos__icone { color: var(--verde); padding-top: .1rem; }
.peca-servicos__icone .icone { width: 1.5rem; height: 1.5rem; }
.peca-servicos__titulo { margin: 0; font: 600 var(--ui)/1.4 var(--sans); color: var(--texto); }
.peca-servicos__titulo a { color: inherit; }
.peca-servicos__texto { margin: .15rem 0 0; font: 400 var(--ui)/1.5 var(--sans); color: var(--texto-2); }

.peca__nota { margin: 0; }
.peca__mais { display: grid; row-gap: var(--s3); } /* sem column-gap: o subgrid herda o da .peca */
@media (min-width: 1024px) { .peca__mais { row-gap: var(--s3); } }

/* ---------- Recomendações ---------- */
.peca-recomenda { border-top: 1px solid var(--fio); }
.peca-recomenda + .peca-recomenda { border-top: 0; padding-top: 0; }
.peca-recomenda__cabeca h2 { margin: 0; }

/* ---------- Barra fixa do celular (aparece depois que o CTA principal sai da tela; some sobre o rodapé) ---------- */
.peca-barra { display: none; }
@media (max-width: 1023px) {
  .peca-barra {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    display: flex; align-items: center; justify-content: space-between; gap: var(--s2);
    padding: .625rem var(--margem) calc(.625rem + env(safe-area-inset-bottom, 0px));
    background: var(--fundo, #fff); border-top: 1px solid var(--fio);
    transform: translateY(100%); visibility: hidden;
    transition: transform .3s var(--ease), visibility 0s linear .3s;
  }
  .peca-barra.visivel { transform: none; visibility: visible; transition: transform .3s var(--ease), visibility 0s; }
  .peca-barra__valor { min-width: 0; }
  .peca-barra__preco { margin: 0; font: 500 var(--preco-pdp)/1.2 var(--sans); }
  .peca-barra__parcela { margin: 0; font: 400 var(--parcela-pdp)/1.35 var(--sans); color: var(--texto-2); }
  .peca-barra__botao { flex: none; min-height: 3rem; padding-inline: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) { .peca-barra, .peca-barra.visivel { transition: none; } }

/* B-1: no celular a trilha vira uma linha só: "‹ Camisaria" */
@media (max-width: 639px) {
  .peca-topo .migalhas li { display: none; }
  .peca-topo .migalhas li:nth-last-child(2) { display: block; }
  .peca-topo .migalhas li:nth-last-child(2)::before { content: "‹"; margin-right: .4rem; }
  .peca-topo .migalhas li:nth-last-child(2) a { display: inline-flex; align-items: center; min-height: var(--toque); }
}

/* ≥ 1024: núcleo compacto (depois das regras-base para valer na cascata) */
@media (min-width: 1024px) {
  /* núcleo compacto: o CTA cabe na primeira tela também em 1024×768 (a ajuda segue lida pelo aria-describedby) */
  .peca__fixa, .consulta { gap: var(--s2); }
  .consulta { padding-top: var(--s2); }
  .seletor-tamanho__ajuda { display: none; }
  /* Compartilhar só com ícone na coluna estreita, para a linha da Ref. não quebrar (o nome segue no aria-label) */
  .peca__compartilhar-texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .peca__compartilhar { min-width: var(--toque); justify-content: center; }
  .peca__ref-linha { flex-wrap: nowrap; }
}
@media (min-width: 1280px) {
  .peca__compartilhar-texto { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
}

/* ---------- Faixa "Detalhes da peça" (Q3-03): arquivos pequenos em tamanho nativo, sem zoom ---------- */
.peca-detalhes[hidden] { display: none; }
/* R6-01: a fileira rola na horizontal no celular; focável por teclado (setas) e com foco visível */
.peca-detalhes__lista:focus-visible { outline: 2px solid var(--foco); outline-offset: 4px; }
.peca-detalhes__titulo { margin: 0 0 var(--s2); font: 600 1rem/1.4 var(--sans); color: var(--texto); letter-spacing: 0; text-transform: none; }
.peca-detalhes__lista { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--s2); margin: 0; padding: 0; list-style: none; }
.peca-detalhes__item { flex: 0 1 auto; min-width: 0; margin: 0; }
.peca-detalhes__item picture { display: contents; }
/* o atributo width é o teto (arquivo ÷ 1,6): só encolhe, nunca amplia; proporção do arquivo, sem recorte */
.peca-detalhes__img { display: block; max-width: 100%; height: var(--det-h, auto); width: auto; object-fit: contain; }
/* celular e tablet: uma só linha de tiles, arrastável */
@media (max-width: 1023px) {
  .peca__apoio { display: contents; }
  .peca__mais > .peca-servicos { order: 1; }
  .peca__mais > .acordeoes { order: 2; }
  .peca__mais > .peca__nota { order: 3; }
  .peca__mais .peca-detalhes { order: 4; }
  .peca-detalhes__lista { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--margem) * -1); padding-inline: var(--margem); scroll-padding-inline: var(--margem); scroll-snap-type: x proximity; }
  .peca-detalhes__lista::-webkit-scrollbar { display: none; }
  .peca-detalhes__item { flex: none; scroll-snap-align: start; }
}

/* gerado pelo build: amostras de cor e foco de imagem */
.cor-areia{--amostra:#cdbb9b}
.cor-off-white{--amostra:#ebe5d6}
.cor-cafe{--amostra:#4a3326}
.cor-azul-petroleo{--amostra:#1f4a55}
.cor-branco{--amostra:#f2f0ea}
.cor-azul-claro{--amostra:#a9c2da}
.cor-listrado-azul{--amostra:repeating-linear-gradient(90deg, #b9cce1 0 2px, #F4F0E6 2px 5px)}
.cor-verde-oliva{--amostra:#5a5d38}
.cor-preto{--amostra:#1c1c1a}
.cor-chumbo{--amostra:#4a4d4f}
.cor-cinza-medio{--amostra:#8a8c8b}
.cor-caramelo{--amostra:#9e6430}
.cor-verde-floresta{--amostra:#1b3a2f}
.cor-marinho{--amostra:#1f2a3d}
.cor-branco-optico{--amostra:#f8f8f5}
.cor-bordo{--amostra:#5c1f2b}
.cor-azul-ceu{--amostra:#9dbfdf}
.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-70-30{object-position:70% 30%}
.foco-22-30{object-position:22% 30%}
.foco-65-35{object-position:65% 35%}
.foco-55-40{object-position:55% 40%}
.foco-50-35{object-position:50% 35%}
.foco-55-45{object-position:55% 45%}
.foco-40-35{object-position:40% 35%}
.foco-50-28{object-position:50% 28%}
.foco-50-30{object-position:50% 30%}
.foco-55-70{object-position:55% 70%}
.foco-45-60{object-position:45% 60%}
.foco-50-40{object-position:50% 40%}
.foco-50-15{object-position:50% 15%}
.foco-65-30{object-position:65% 30%}
.foco-65-25{object-position:65% 25%}