/* ==========================================================================
   Sagrada Geometria — Landing page
   Folha de estilo principal
   --------------------------------------------------------------------------
   Organização (do mais genérico para o mais específico):
     1. Tokens de design (cores, tipografia, espaçamento, movimento)
     2. Reset e base
     3. Utilitários e layout (container, seções, títulos)
     4. Componentes reutilizáveis (botões, chips, cards, diálogos, toast)
     5. Seções da página, na ordem em que aparecem no HTML
     6. Animações de entrada (scroll reveal)
     7. Acessibilidade: movimento reduzido

   Abordagem MOBILE-FIRST: os estilos base valem para telas pequenas e os
   blocos @media (min-width: …) acrescentam ajustes para telas maiores.
   Breakpoints usados: 640px (tablet), 900px (desktop), 1200px (wide).
   ========================================================================== */


/* ==========================================================================
   1. TOKENS DE DESIGN
   Alterar a identidade visual do site inteiro começa (e quase sempre
   termina) aqui.
   ========================================================================== */
:root {
  /* --- Cores --- */
  --bg: #0a0908;            /* fundo principal: preto quente */
  --surface: #141210;       /* superfícies elevadas (cards, painéis) */
  --surface-2: #1c1915;     /* superfície de segundo nível (inputs, linhas de preço) */
  --line: #2a2620;          /* bordas e divisórias */
  --gold: #c9a15a;          /* cor de marca / ação principal */
  --gold-strong: #ddb874;   /* hover do dourado */
  --gold-soft: rgba(201, 161, 90, .12);
  --cream: #ece6d8;         /* texto principal */
  --stone: #9a9385;         /* texto secundário (contraste AA sobre --bg) */

  /* --- Tipografia --- */
  --font-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-sans: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;

  /* Escala fluida: clamp(mínimo, preferido, máximo) cresce com a viewport */
  --fs-xs: .75rem;
  --fs-sm: .875rem;
  --fs-md: 1rem;
  --fs-lg: clamp(1.125rem, 1rem + .5vw, 1.375rem);
  --fs-xl: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);
  --fs-2xl: clamp(2rem, 1.4rem + 3vw, 3.25rem);
  --fs-hero: clamp(2.5rem, 1.5rem + 5.5vw, 5.5rem);

  /* --- Espaçamento (múltiplos de 4px) --- */
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --section-y: clamp(5rem, 3rem + 8vw, 9rem); /* respiro vertical entre seções */

  /* --- Formas, sombras e camadas --- */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --shadow: 0 14px 32px rgba(0, 0, 0, .5);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, .6);
  --z-header: 30;
  --z-mobile-bar: 35;
  --z-toast: 60;

  /* --- Movimento --- */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --dur-fast: .18s;
  --dur: .35s;

  /* --- Layout --- */
  --container: 1180px;
  --gutter: clamp(1rem, .5rem + 2.5vw, 2rem); /* margem lateral, nunca < 16px */
  --header-h: 72px;

  color-scheme: dark; /* controles nativos (scrollbar, select) em modo escuro */
}


/* ==========================================================================
   2. RESET E BASE
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Compensa o header fixo ao navegar por âncoras (#colecao, #faq…) */
  scroll-padding-top: calc(var(--header-h) + 8px);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--cream);
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img,
svg { display: block; max-width: 100%; }
img { height: auto; }
/* <picture> só escolhe o arquivo (WebP/JPG); quem define o layout é a <img> */
picture { display: contents; }

a { color: inherit; text-decoration: none; }

button,
input,
select { font: inherit; color: inherit; }

button { cursor: pointer; }

h1, h2, h3, p { margin: 0; }

/* Equilibra a quebra de linha de títulos (evita uma palavra sozinha na
   última linha). Navegadores sem suporte simplesmente ignoram. */
h1, h2, h3, .eyebrow, .section-lead, .hero__lead { text-wrap: balance; }

/* Foco visível apenas para navegação por teclado (não aparece no clique) */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--gold); color: var(--bg); }

/* Impede rolagem do fundo enquanto um painel/modal está aberto */
body.is-locked { overflow: hidden; }

[hidden] { display: none !important; }


/* ==========================================================================
   3. UTILITÁRIOS E LAYOUT
   ========================================================================== */

/* Texto disponível apenas para leitores de tela */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Link "pular para o conteúdo": invisível até receber foco pelo teclado */
.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -100px;
  z-index: 100;
  background: var(--gold);
  color: var(--bg);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  font-weight: 600;
}
.skip-link:focus { top: var(--space-4); }

/* Contêiner central com largura máxima e margens laterais fluidas */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }
.section--alt { background: var(--surface); border-block: 1px solid var(--line); }

/* Cabeçalho padrão de seção: sobretítulo + título + parágrafo de apoio */
.section-head {
  max-width: 640px;
  margin-bottom: var(--space-7);
}
.section-head--center { margin-inline: auto; text-align: center; }

.eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--space-4);
}

.section-title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--fs-2xl);
  line-height: 1.1;
  letter-spacing: -.01em;
  margin-bottom: var(--space-4);
}

.section-lead {
  color: var(--stone);
  font-size: var(--fs-lg);
  line-height: 1.6;
}


/* ==========================================================================
   4. COMPONENTES
   ========================================================================== */

/* --- 4.1 Botões ----------------------------------------------------------
   .btn é a base; modificadores definem a hierarquia visual:
   --primary (ação principal), --ghost (secundária), --sm (compacto).
   Altura mínima de 48px = área de toque confortável (WCAG 2.5.5).       */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 48px;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-pill);
  border: 1.5px solid transparent;
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1.2;
  text-align: center;
  transition: background-color var(--dur-fast), color var(--dur-fast),
              border-color var(--dur-fast), transform var(--dur-fast);
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 18px; height: 18px; flex-shrink: 0; }

.btn--primary { background: var(--gold); color: var(--bg); }
.btn--primary:hover { background: var(--gold-strong); }

.btn--ghost { border-color: var(--gold); color: var(--gold); background: transparent; }
.btn--ghost:hover { background: var(--gold-soft); }

.btn--block { width: 100%; }
.btn--sm { min-height: 40px; padding: var(--space-2) var(--space-4); }

/* Link de texto com seta (ação terciária) */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-xs);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
  border-bottom: 1px solid currentColor;
  padding-bottom: 3px;
}
.link-arrow:hover { color: var(--gold-strong); }

/* Botão quadrado só com ícone (carrinho, menu, fechar) */
.icon-btn {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: transparent;
  color: var(--cream);
  transition: border-color var(--dur-fast), background-color var(--dur-fast);
}
.icon-btn:hover { border-color: var(--gold); }
.icon-btn svg { width: 20px; height: 20px; }

/* Contador sobre o botão do orçamento */
.count-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 19px;
  height: 19px;
  padding: 0 4px;
  border-radius: var(--radius-pill);
  background: var(--gold);
  color: var(--bg);
  font-size: 11px;
  font-weight: 700;
  display: grid;
  place-items: center;
}
/* Pequeno "pulo" quando um item é adicionado (classe aplicada via JS) */
.count-badge.is-bump { animation: bump .4s var(--ease-out); }
@keyframes bump { 50% { transform: scale(1.35); } }

/* --- 4.2 Chips / abas de filtro ----------------------------------------- */
.chip {
  min-height: 40px;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: transparent;
  color: var(--stone);
  font-size: var(--fs-sm);
  font-weight: 500;
  white-space: nowrap;
  transition: background-color var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
.chip:hover { border-color: var(--gold); color: var(--cream); }
.chip[aria-pressed="true"],
.chip[aria-selected="true"] { background: var(--gold); border-color: var(--gold); color: var(--bg); }

/* --- 4.3 "Poço" — miniatura circular que simula o efeito infinito ------ */
.well {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: inset 0 12px 30px rgba(0, 0, 0, .6), inset 0 0 0 7px var(--surface-2);
}
.well img { width: 100%; height: 100%; object-fit: cover; }

/* --- 4.4 Card de produto ------------------------------------------------ */
.product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--space-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow);
  transition: transform var(--dur) var(--ease-out), border-color var(--dur-fast);
}
.product-card:hover { transform: translateY(-4px); border-color: #3a342b; }
.product-card.is-selected { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), var(--shadow); }

/* Imagem clicável que abre os detalhes */
.product-card__media {
  display: block;
  width: 100%;
  max-width: 170px;
  margin: var(--space-2) auto var(--space-3);
  padding: 0;
  border: 0;
  background: none;
}
.product-card__media .well { transition: transform var(--dur) var(--ease-out); }
.product-card__media:hover .well { transform: scale(1.04); }

.product-card__badge {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  z-index: 1;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--gold);
  color: var(--bg);
  font-family: var(--font-mono);
  font-size: .65rem;
  font-weight: 500;
}

.product-card__note {
  font-family: var(--font-mono);
  font-size: .65rem;
  color: var(--stone);
  text-align: center;
  min-height: 1.2em;
  margin-bottom: var(--space-2);
}

.product-card__name {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 600;
  text-align: center;
  margin-bottom: var(--space-2);
}
/* O nome é um botão "disfarçado" de título: abre os detalhes do produto */
.product-card__name button {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  transition: color var(--dur-fast);
}
.product-card__name button:hover { color: var(--gold); }

.product-card__theme {
  color: var(--stone);
  font-size: var(--fs-sm);
  line-height: 1.45;
  text-align: center;
  margin-bottom: var(--space-4);
  /* Limita a 2 linhas para os cards ficarem alinhados */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.9em;
}

.price-row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  font-family: var(--font-mono);
  font-size: .78rem;
  color: var(--stone);
}
.price-row strong { color: var(--gold); font-weight: 500; }

.product-card .btn { margin-top: auto; }

/* Esqueleto exibido enquanto os produtos carregam (evita salto de layout) */
.product-card--skeleton { min-height: 420px; overflow: hidden; }
.product-card--skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .04) 50%, transparent 70%);
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
}
@keyframes shimmer { to { background-position: -200% 0; } }

/* --- 4.5 Diálogos (modal de produto e gaveta do orçamento) --------------
   Usamos o elemento nativo <dialog>: ele já entrega foco preso dentro
   do painel, fechamento com Esc e fundo inerte — sem bibliotecas.       */
dialog {
  padding: 0;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--cream);
  box-shadow: var(--shadow-lg);
}
dialog::backdrop {
  background: rgba(6, 5, 4, .8);
  backdrop-filter: blur(3px);
}

/* Modal centralizado */
.modal {
  width: min(640px, calc(100% - 2 * var(--gutter)));
  max-height: min(90vh, 900px);
  border-radius: var(--radius-lg);
  overflow-y: auto;
}
.modal[open] { animation: modal-in var(--dur) var(--ease-out); }
@keyframes modal-in { from { opacity: 0; transform: translateY(16px) scale(.98); } }

.modal__close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  z-index: 2;
  background: rgba(0, 0, 0, .5);
  border-color: transparent;
  border-radius: 50%;
}

.modal__media {
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  background: var(--surface-2);
  overflow: hidden;
}
.modal__media img { width: 100%; height: 100%; object-fit: cover; }
.modal__media .well { width: 65%; }

.modal__body { padding: var(--space-6) var(--space-5); }
@media (min-width: 640px) { .modal__body { padding: var(--space-6); } }

.modal__badge {
  display: inline-block;
  margin-bottom: var(--space-3);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--gold);
  color: var(--bg);
  font-family: var(--font-mono);
  font-size: .7rem;
}
.modal__title {
  font-family: var(--font-serif);
  font-size: var(--fs-xl);
  font-weight: 600;
  line-height: 1.15;
  margin-bottom: var(--space-3);
}
.modal__desc { color: var(--stone); margin-bottom: var(--space-5); }

.spec-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  padding: 0;
  margin: 0 0 var(--space-5);
  list-style: none;
  font-size: var(--fs-sm);
  color: var(--stone);
}
.spec-list strong { color: var(--cream); font-weight: 500; }

.price-tag { color: var(--gold); font-size: 1.35rem; font-weight: 500; }
.price-tag small { display: block; color: var(--stone); font-size: var(--fs-xs); font-weight: 400; margin-top: var(--space-1); }

.modal__actions { display: grid; gap: var(--space-3); margin-top: var(--space-5); }
@media (min-width: 640px) { .modal__actions { grid-template-columns: 1fr 1fr; } }

/* Gaveta lateral "Meu Orçamento" */
.drawer {
  margin: 0 0 0 auto;          /* encosta o diálogo na direita */
  width: min(420px, 100%);
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  border-width: 0 0 0 1px;
  border-radius: 0;
}
.drawer[open] { display: flex; flex-direction: column; animation: drawer-in var(--dur) var(--ease-out); }
@keyframes drawer-in { from { transform: translateX(100%); } }

.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5);
  /* respeita o "notch" de celulares */
  padding-top: calc(var(--space-5) + env(safe-area-inset-top, 0px));
  border-bottom: 1px solid var(--line);
}
.drawer__title { font-family: var(--font-serif); font-size: 1.3rem; font-weight: 500; }

.drawer__list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  margin: 0;
  list-style: none;
}

.drawer__footer {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-5);
  padding-bottom: calc(var(--space-5) + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line);
}

.drawer__empty { text-align: center; color: var(--stone); padding-block: var(--space-7); }
.drawer__empty p { margin-bottom: var(--space-4); }

.quote-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.quote-item .well { width: 48px; flex-shrink: 0; box-shadow: none; }
.quote-item__info { flex: 1; min-width: 0; }
.quote-item__name { font-weight: 500; font-size: var(--fs-sm); }
.quote-item__price { font-size: var(--fs-xs); color: var(--stone); }

.qty {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}
.qty button {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--surface);
  line-height: 1;
}
.qty button:hover { border-color: var(--gold); }
.qty output { min-width: 20px; text-align: center; font-size: var(--fs-sm); }

.quote-item__remove {
  width: 32px;
  height: 32px;
  border: 0;
  background: none;
  color: var(--stone);
}
.quote-item__remove:hover { color: var(--cream); }

/* --- 4.6 Toast (aviso temporário) ---------------------------------------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(88px + env(safe-area-inset-bottom, 0px));
  z-index: var(--z-toast);
  max-width: calc(100% - 2 * var(--gutter));
  padding: var(--space-3) var(--space-5);
  border: 1px solid var(--gold);
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: var(--shadow);
  font-size: var(--fs-sm);
  font-weight: 500;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 10px);
  transition: opacity var(--dur), transform var(--dur) var(--ease-out);
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
@media (min-width: 900px) { .toast { bottom: var(--space-6); } }


/* ==========================================================================
   5. SEÇÕES DA PÁGINA
   ========================================================================== */

/* --- 5.1 Header fixo ------------------------------------------------------
   Transparente sobre o hero; ganha fundo sólido quando a página rola
   (classe .is-scrolled aplicada via JS).                                 */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: var(--z-header);
  padding-top: env(safe-area-inset-top, 0px);
  transition: background-color var(--dur), border-color var(--dur), backdrop-filter var(--dur);
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled {
  background: rgba(10, 9, 8, .88);
  border-bottom-color: var(--line);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.brand svg { width: 24px; height: 24px; }

.header-actions { display: flex; align-items: center; gap: var(--space-2); }
.header-actions .btn { display: none; } /* CTA do header só aparece no desktop */

/* Navegação: painel lateral no mobile, linha horizontal no desktop */
.main-nav {
  position: fixed;
  inset: 0 0 0 auto;
  z-index: 40;
  width: min(320px, 82vw);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-5);
  padding: var(--space-7) var(--space-6);
  background: var(--bg);
  border-left: 1px solid var(--line);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform var(--dur) var(--ease-out), visibility 0s linear var(--dur);
}
.main-nav.is-open {
  transform: none;
  visibility: visible;
  transition: transform var(--dur) var(--ease-out);
}
.main-nav a {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  color: var(--cream);
  transition: color var(--dur-fast);
}
.main-nav a:hover,
.main-nav a[aria-current="true"] { color: var(--gold); }

/* Fundo escurecido atrás do menu mobile */
.nav-scrim {
  position: fixed;
  inset: 0;
  z-index: 39;
  background: rgba(0, 0, 0, .55);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur);
}
.nav-scrim.is-visible { opacity: 1; pointer-events: auto; }

/* Ícone hambúrguer que vira "X" quando aberto */
.menu-toggle span,
.menu-toggle span::before,
.menu-toggle span::after {
  display: block;
  width: 18px;
  height: 1.5px;
  background: currentColor;
  transition: transform var(--dur) var(--ease-out), background-color var(--dur-fast);
}
.menu-toggle span { position: relative; }
.menu-toggle span::before,
.menu-toggle span::after { content: ""; position: absolute; left: 0; }
.menu-toggle span::before { top: -6px; }
.menu-toggle span::after { top: 6px; }
.menu-toggle[aria-expanded="true"] span { background: transparent; }
.menu-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }
.menu-toggle { z-index: 41; }

@media (min-width: 900px) {
  .main-nav {
    position: static;
    width: auto;
    flex-direction: row;
    gap: var(--space-6);
    padding: 0;
    background: none;
    border: 0;
    transform: none;
    visibility: visible;
    transition: none;
  }
  .main-nav a { font-family: var(--font-sans); font-size: var(--fs-sm); color: var(--stone); letter-spacing: .04em; }
  .menu-toggle,
  .nav-scrim { display: none; }
  .header-actions .btn { display: inline-flex; }
}

/* --- 5.2 Hero ---------------------------------------------------------------
   Ocupa a altura da tela. O "túnel" ao fundo são anéis que crescem do
   centro (gerados por JS), reforçando a ideia de profundidade infinita.  */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding-block: calc(var(--header-h) + var(--space-7)) var(--space-8);
  overflow: hidden;
  isolation: isolate;
}

.tunnel {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: grid;
  place-items: center;
  pointer-events: none;
}
/* Brilho central quente */
.tunnel::before {
  content: "";
  position: absolute;
  width: 60vmin;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201, 161, 90, .14) 0%, transparent 65%);
}
.ring {
  position: absolute;
  width: 20px;
  height: 20px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  opacity: 0;
  animation: tunnel 7s linear infinite;
}
/* Anima largura/altura (e não scale) para a linha continuar com 1px.
   O "contain" no .tunnel isola esse recálculo do resto da página.     */
.tunnel { contain: strict; }
@keyframes tunnel {
  0%   { width: 20px;   height: 20px;   opacity: 0; }
  10%  { opacity: .5; }
  80%  { opacity: .1; }
  100% { width: 1600px; height: 1600px; opacity: 0; }
}

.hero__content { text-align: center; max-width: 860px; }

.hero__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--fs-hero);
  line-height: 1.02;
  letter-spacing: -.02em;
  margin-bottom: var(--space-5);
}
.hero__title em { font-style: italic; font-weight: 300; color: var(--gold); }

.hero__lead {
  max-width: 540px;
  margin: 0 auto var(--space-6);
  color: var(--stone);
  font-size: var(--fs-lg);
}

.hero__ctas {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  justify-content: center;
  max-width: 340px;
  margin-inline: auto;
}
@media (min-width: 640px) {
  .hero__ctas { flex-direction: row; max-width: none; }
}

/* Faixa de garantias logo abaixo dos CTAs (prova / redução de risco) */
.trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3) var(--space-5);
  margin: var(--space-7) 0 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--stone);
  letter-spacing: .04em;
}
.trust li { display: inline-flex; align-items: center; gap: var(--space-2); }
.trust li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
}

.scroll-cue {
  position: absolute;
  bottom: var(--space-5);
  left: 50%;
  transform: translateX(-50%);
  display: none;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  font-size: .7rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--stone);
}
.scroll-cue::before {
  content: "";
  width: 1px;
  height: 36px;
  background: linear-gradient(var(--gold), transparent);
}
@media (min-width: 900px) and (min-height: 760px) { .scroll-cue { display: flex; } }

/* --- 5.3 Manifesto --------------------------------------------------------- */
.manifesto { text-align: center; }
.manifesto blockquote { max-width: 760px; margin: 0 auto; }
.manifesto blockquote p {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: var(--fs-xl);
  line-height: 1.45;
}
.manifesto cite {
  display: block;
  margin-top: var(--space-5);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-style: normal;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--stone);
}

/* --- 5.4 Benefícios / como o efeito funciona ------------------------------- */
.features {
  display: grid;
  gap: var(--space-4);
  padding: 0;
  margin: 0;
  list-style: none;
}
@media (min-width: 640px) { .features { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .features { grid-template-columns: repeat(4, 1fr); } }

.feature {
  padding: var(--space-6) var(--space-5);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  transition: border-color var(--dur-fast);
}
.feature:hover { border-color: #3a342b; }
.feature__icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: var(--space-5);
  border-radius: 50%;
  background: var(--gold-soft);
  color: var(--gold);
}
.feature__icon svg { width: 22px; height: 22px; }
.feature h3 { font-family: var(--font-serif); font-size: 1.2rem; font-weight: 500; margin-bottom: var(--space-2); }
.feature p { color: var(--stone); font-size: var(--fs-sm); }

/* --- 5.5 Peças reais (vitrine com fotos) --------------------------------- */
.showcase {
  display: grid;
  gap: var(--space-4);
}
@media (min-width: 760px) { .showcase { grid-template-columns: 1fr 1fr; } }

.showcase__item {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface);
  aspect-ratio: 1;
  text-align: left;
}
.showcase__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(.75) saturate(.95);
  transition: transform .8s var(--ease-out), filter var(--dur);
}
.showcase__item:hover img { transform: scale(1.04); filter: brightness(.9) saturate(1); }
.showcase__caption {
  position: absolute;
  inset: auto 0 0;
  padding: var(--space-8) var(--space-5) var(--space-5);
  background: linear-gradient(0deg, rgba(10, 9, 8, .92) 10%, transparent);
}
.showcase__caption > span { display: block; }
.showcase__caption > .link-arrow { display: inline-flex; }
.showcase__title {
  font-family: var(--font-serif);
  font-size: var(--fs-xl);
  font-weight: 500;
  line-height: 1.2;
  margin-bottom: var(--space-1);
}
.showcase__text { color: var(--stone); font-size: var(--fs-sm); margin-bottom: var(--space-3); }

/* --- 5.6 Coleção (catálogo) ---------------------------------------------- */
.catalog-toolbar {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
@media (min-width: 900px) {
  .catalog-toolbar { flex-direction: row; align-items: center; justify-content: space-between; }
}

/* Abas Mesas / Quadros: rolagem horizontal no mobile se não couber */
.tabs,
.filters {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
}
.tabs::-webkit-scrollbar,
.filters::-webkit-scrollbar { display: none; }

.tabs {
  padding: var(--space-1);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  align-self: flex-start;
}
.tabs .chip { border-color: transparent; }

.catalog-controls { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }

.select {
  min-height: 40px;
  padding: var(--space-2) var(--space-6) var(--space-2) var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23c9a15a' fill='none' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 14px center;
  font-size: var(--fs-sm);
  appearance: none;
}

.results-count {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--stone);
  margin-bottom: var(--space-4);
}

/* Flex com quebra + centralização: funciona bem tanto com 2 quanto com
   10 produtos (a última linha incompleta fica centralizada, sem buracos). */
.product-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-5);
  padding: 0;
  margin: 0;
  list-style: none;
}
.product-grid > li { flex: 1 1 280px; max-width: 360px; }

.catalog-note {
  margin-top: var(--space-6);
  font-size: var(--fs-xs);
  color: var(--stone);
  text-align: center;
}

.empty-state { grid-column: 1 / -1; text-align: center; color: var(--stone); padding-block: var(--space-7); }

/* --- 5.7 Processo (passo a passo) ---------------------------------------- */
.steps {
  display: grid;
  gap: var(--space-4);
  padding: 0;
  margin: 0;
  list-style: none;
  counter-reset: step;
}
@media (min-width: 640px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .steps { grid-template-columns: repeat(4, 1fr); } }

.step {
  position: relative;
  padding: var(--space-6) var(--space-5);
  border-top: 1px solid var(--gold);
  counter-increment: step;
}
/* Numeração automática via CSS counter (01, 02, …) */
.step::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  margin-bottom: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--gold);
}
.step h3 { font-family: var(--font-serif); font-size: 1.25rem; font-weight: 500; margin-bottom: var(--space-2); }
.step p { color: var(--stone); font-size: var(--fs-sm); }

/* --- 5.8 Sobre + números --------------------------------------------------- */
.about {
  display: grid;
  gap: var(--space-7);
  align-items: center;
}
@media (min-width: 900px) { .about { grid-template-columns: 1fr 1.2fr; gap: var(--space-8); align-items: start; } }

.about__text p { color: var(--stone); margin-bottom: var(--space-4); }
.about__text .section-lead { color: var(--cream); font-family: var(--font-serif); font-weight: 300; }

.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin: var(--space-6) 0 0;
  padding-top: var(--space-6);
  border-top: 1px solid var(--line);
}
.stats dt { order: 2; font-size: var(--fs-xs); color: var(--stone); }
.stats dd { order: 1; margin: 0; font-family: var(--font-serif); font-size: var(--fs-xl); color: var(--gold); line-height: 1.1; }
.stats div { display: flex; flex-direction: column; gap: var(--space-1); }

/* --- 5.9 FAQ (acordeão nativo com <details>) ------------------------------ */
.faq { max-width: 820px; margin-inline: auto; }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-of-type { border-top: 1px solid var(--line); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) 0;
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
/* Sinal de "+" que gira para "×" quando aberto */
.faq summary::after {
  content: "+";
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 50%;
  font-family: var(--font-sans);
  color: var(--gold);
  transition: transform var(--dur) var(--ease-out);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--gold); }
.faq details p { padding-bottom: var(--space-5); color: var(--stone); max-width: 68ch; }

/* --- 5.10 CTA final -------------------------------------------------------- */
.cta-final {
  position: relative;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}
/* Anéis concêntricos estáticos ao fundo, ecoando o hero */
.cta-final::before {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  z-index: -1;
  width: 900px;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: repeating-radial-gradient(circle, transparent 0 38px, rgba(201, 161, 90, .08) 38px 39px);
  -webkit-mask-image: radial-gradient(circle, #000 20%, transparent 70%);
  mask-image: radial-gradient(circle, #000 20%, transparent 70%);
}
.cta-final .section-title { max-width: 720px; margin-inline: auto; }
.cta-final .section-lead { max-width: 520px; margin: 0 auto var(--space-6); }

/* --- 5.11 Rodapé ------------------------------------------------------------ */
.site-footer {
  border-top: 1px solid var(--line);
  padding-block: var(--space-8) var(--space-6);
  font-size: var(--fs-sm);
  color: var(--stone);
}
.footer-grid { display: grid; gap: var(--space-6); margin-bottom: var(--space-7); }
@media (min-width: 760px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr; } }

.footer-brand p { margin-top: var(--space-3); max-width: 320px; }
.footer-title {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--space-3);
}
.footer-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-2); }
.footer-list a:hover { color: var(--cream); }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
  font-size: var(--fs-xs);
}

/* --- 5.12 Barra fixa de WhatsApp (somente mobile) ------------------------
   Mantém a ação principal sempre ao alcance do polegar.                 */
.mobile-bar {
  position: fixed;
  inset: auto 0 0;
  z-index: var(--z-mobile-bar);
  display: flex;
  gap: var(--space-2);
  padding: var(--space-2) var(--gutter);
  padding-bottom: calc(var(--space-2) + env(safe-area-inset-bottom, 0px));
  background: rgba(10, 9, 8, .94);
  border-top: 1px solid var(--line);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  /* Fica escondida enquanto o hero está visível (o hero já tem CTAs) */
  transform: translateY(110%);
  transition: transform var(--dur) var(--ease-out);
}
.mobile-bar.is-visible { transform: none; }
.mobile-bar .btn { flex: 1; }
body { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }

@media (min-width: 900px) {
  .mobile-bar { display: none; }
  body { padding-bottom: 0; }
}


/* ==========================================================================
   6. ANIMAÇÕES DE ENTRADA (scroll reveal)
   Elementos com [data-reveal] começam levemente deslocados e aparecem
   quando entram na tela (IntersectionObserver no main.js).
   A classe .js no <html> garante que, sem JavaScript, nada fique oculto.
   ========================================================================== */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
  transition-delay: var(--reveal-delay, 0s);
}
.js [data-reveal].is-revealed { opacity: 1; transform: none; }


/* ==========================================================================
   7. ACESSIBILIDADE — MOVIMENTO REDUZIDO
   Respeita quem configurou o sistema para reduzir animações.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .ring { display: none; }
  .js [data-reveal] { opacity: 1; transform: none; }
}

/* ==========================================================================
   8. VITRINE EDITORIAL — identidade clara, acolhedora e de alto padrão
   ========================================================================== */
:root {
  color-scheme: light;
  --bg: #f7f6f2;
  --surface: #fff;
  --surface-2: #efeee8;
  --line: #e5e1d8;
  --gold: #947148;
  --gold-strong: #76582f;
  --gold-soft: rgba(148, 113, 72, .1);
  --cream: #292922;
  --stone: #746f66;
  --shadow: 0 12px 32px rgba(50, 45, 35, .08);
  --shadow-lg: 0 24px 60px rgba(50, 45, 35, .18);
  --header-h: 68px;
}

body { background: var(--bg); }

.service-strip {
  display: flex;
  justify-content: center;
  gap: clamp(1rem, 4vw, 3.5rem);
  padding: 8px var(--gutter);
  background: #3e4339;
  color: #f7f6f2;
  font-size: .7rem;
  letter-spacing: .08em;
  text-align: center;
}

.site-header {
  position: sticky;
  inset: auto 0 auto;
  background: rgba(247, 246, 242, .97);
  border-bottom: 1px solid var(--line);
}
.site-header.is-scrolled {
  background: rgba(247, 246, 242, .96);
  border-bottom-color: var(--line);
  box-shadow: 0 6px 18px rgba(50, 45, 35, .05);
}
.brand { color: var(--cream); }
.main-nav { background: var(--bg); }
.main-nav a { color: var(--cream); }
.icon-btn { color: var(--cream); }
.nav-scrim { background: rgba(36, 34, 29, .4); }

.hero {
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
  width: min(100%, 1600px);
  min-height: min(760px, calc(100svh - var(--header-h) - 34px));
  margin-inline: auto;
  padding: clamp(3.5rem, 7vw, 7rem) clamp(1.5rem, 6vw, 6rem);
}
.tunnel { display: none; }
.hero__media {
  position: relative;
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  width: 100%;
  aspect-ratio: 1.06;
  margin: 0;
  overflow: hidden;
  background: #242721;
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.48);
}
.hero__media-label {
  position: absolute;
  inset: auto 0 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 4rem 1.5rem 1.5rem;
  background: linear-gradient(transparent, rgba(22, 24, 21, .72));
  color: #fff;
}
.hero__media-label span:first-child {
  font-family: var(--font-serif);
  font-size: 1.35rem;
}
.hero__media-label span:last-child { font-size: .82rem; color: rgba(255, 255, 255, .82); }
.hero__content {
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  max-width: 590px;
  margin-inline: auto 0;
  padding-inline: 0;
  text-align: left;
}
.hero__content .eyebrow { color: var(--gold); }
.hero__title {
  max-width: 610px;
  font-size: clamp(3rem, 5.5vw, 5.5rem);
  line-height: 1.02;
  letter-spacing: -.035em;
}
.hero__title em { color: var(--gold); }
.hero__lead { margin-inline: 0; color: var(--stone); }
.hero__ctas { justify-content: flex-start; margin-inline: 0; }
.hero .trust {
  justify-content: flex-start;
  gap: .75rem 1.25rem;
  font-family: var(--font-sans);
  letter-spacing: 0;
}
.hero .trust li::before { width: 5px; height: 5px; }
.scroll-cue { display: none; }

.section--alt {
  background: #efeee8;
  border-color: #e6e3da;
}
.section-title { color: var(--cream); }
.feature {
  background: var(--bg);
  border-color: var(--line);
  border-radius: 2px;
}
.feature:hover,
.product-card:hover { border-color: #c9b99f; }
.feature__icon { background: var(--gold-soft); color: var(--gold); }

.showcase { gap: clamp(1rem, 2vw, 2rem); }
.showcase__item {
  aspect-ratio: 1.15;
  border: 0;
  border-radius: 0;
  background: #242721;
}
.showcase__caption {
  padding: 6rem clamp(1.25rem, 3vw, 2rem) 1.5rem;
  background: linear-gradient(0deg, rgba(22, 24, 21, .9), transparent);
}
.showcase__text { color: rgba(255, 255, 255, .76); }

.catalog-toolbar { align-items: center; }
.tabs { background: rgba(255, 255, 255, .55); border-color: var(--line); }
.chip { color: var(--stone); }
.chip[aria-pressed="true"],
.chip[aria-selected="true"] { background: #3e4339; border-color: #3e4339; color: #fff; }
.select { background-color: var(--surface); }
.product-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(.75rem, 2vw, 1.5rem);
}
.product-grid > li { min-width: 0; max-width: none; }
.product-card {
  padding: clamp(.75rem, 1.5vw, 1.25rem);
  border-radius: 2px;
  box-shadow: 0 3px 14px rgba(50, 45, 35, .04);
}
.product-card__media {
  max-width: none;
  margin: 0 0 .75rem;
}
.well {
  aspect-ratio: 1.12;
  border-radius: 0;
  background-color: var(--surface-2);
  box-shadow: none;
}
.product-card__badge { top: 1rem; left: 1rem; }
.product-card__name { font-size: 1.2rem; }
.product-card__theme { text-align: left; }
.price-row { background: var(--surface-2); }
.product-card .btn--ghost { border-color: var(--gold); color: var(--gold-strong); }
.product-card .btn--ghost:hover { background: var(--gold-soft); }
.empty-state { grid-column: 1 / -1; }

.step { border-color: #aa987a; }
.stats { border-color: var(--line); }
.stats dd { color: var(--gold-strong); }
.faq details,
.faq details:first-of-type { border-color: var(--line); }
.faq summary::after { border-color: #d5cfc3; }
.cta-final {
  background: #3e4339;
  color: #f7f6f2;
}
.cta-final .section-title,
.cta-final .section-lead { color: #f7f6f2; }
.cta-final .eyebrow { color: #d7bd91; }
.cta-final::before {
  background: repeating-radial-gradient(circle, transparent 0 38px, rgba(239, 230, 212, .08) 38px 39px);
}
.site-footer { background: #f0efe9; border-color: var(--line); }
.footer-title { color: var(--gold-strong); }
.footer-bottom { border-color: var(--line); }
.mobile-bar {
  background: rgba(247, 246, 242, .96);
  border-color: var(--line);
}
.mobile-bar .btn--ghost { color: var(--gold-strong); }
dialog { border-color: var(--line); }
dialog::backdrop { background: rgba(36, 34, 29, .48); }

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

@media (max-width: 899px) {
  .hero {
    grid-template-columns: 1fr;
    gap: 0;
    min-height: auto;
    padding: 1.5rem var(--gutter) 4rem;
  }
  .hero__media {
    grid-column: 1;
    grid-row: 1;
    aspect-ratio: 1.12;
    margin-bottom: 2rem;
  }
  .hero__content {
    grid-column: 1;
    grid-row: 2;
    max-width: 680px;
    margin-inline: auto;
  }
  .hero__title { font-size: clamp(2.75rem, 8vw, 4.5rem); }
  .hero__lead { max-width: 600px; }
}

@media (max-width: 560px) {
  .service-strip { gap: .35rem 1rem; flex-wrap: wrap; font-size: .63rem; }
  .site-header__inner { height: 60px; }
  .brand { gap: .5rem; font-size: .67rem; letter-spacing: .12em; }
  .brand svg { width: 21px; height: 21px; }
  .header-actions { gap: .35rem; }
  .hero { padding-top: 1rem; }
  .hero__media { aspect-ratio: .98; margin-bottom: 1.75rem; }
  .hero__media img { transform: scale(1.58); }
  .hero__title { font-size: clamp(2.65rem, 12vw, 3.7rem); }
  .hero__ctas { flex-direction: column; align-items: stretch; }
  .hero .trust { justify-content: flex-start; }
  .product-card { padding: .7rem; }
  .product-card__badge { top: .85rem; left: .85rem; padding: 4px 8px; font-size: .58rem; }
  .product-card__name { font-size: 1.05rem; }
  .price-row { padding: .6rem; gap: .3rem; font-size: .68rem; }
  .product-card .btn { padding-inline: .6rem; font-size: .75rem; }
}

@media (min-width: 640px) and (max-width: 899px) {
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero__ctas { justify-content: flex-start; }
}