/* ==========================================================================
   ARQUIVO UNICO DE ESTILO - MS Marmores e Granitos
   --------------------------------------------------------------------------
   Este arquivo reune o que antes eram dois: tokens.css (cores, fontes,
   espacamentos) e style.css (os componentes da pagina).

   Por que foram unidos: em duas requisicoes separadas, o servidor entregava a
   segunda cerca de 140 ms depois da primeira, e a pagina nao podia comecar a
   desenhar antes das duas chegarem. Num arquivo so, e uma viagem de ida e
   volta em vez de duas.

   A divisao continua existindo aqui dentro, nas duas partes abaixo:
     PARTE 1 - TOKENS       cores, fontes, espacamentos, sombras
     PARTE 2 - COMPONENTES  cabecalho, hero, catalogo, formulario, rodape
   ========================================================================== */

/* ==========================================================================
   PARTE 1 - TOKENS
   ========================================================================== */
/* ==========================================================================
   MS Mármores e Granitos — Design System
   Conceito: "Pedra e Luz". Azul petróleo da marca (#11435C) como matéria
   escura, mármore como superfície que recebe luz, latão como acabamento.
   ========================================================================== */

/* ---------- Fontes self-hosted (SIL Open Font License) -------------------- */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/cormorant-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/cormorant-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/jost-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/jost-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* ---------- Azul petróleo — cor institucional ------------------------- */
  --azul-950: #061A24;
  --azul-900: #08222F;
  --azul-800: #0B2E3F;
  --azul-700: #11435C; /* ★ cor oficial da marca */
  --azul-600: #17566F;
  --azul-500: #226F8C;
  --azul-400: #4A93AD;
  --azul-300: #86B7CA;
  --azul-200: #BCD6E1;
  --azul-100: #E2EDF2;

  /* ---------- Mármore — superfícies claras ------------------------------ */
  --pedra-000: #FFFFFE; /* ★ branco oficial da marca */
  --pedra-050: #FAF8F5;
  --pedra-100: #F4F1EC;
  --pedra-200: #E9E4DC;
  --pedra-300: #D8D1C6;
  --pedra-400: #B9AFA1;
  --pedra-500: #8F8579;
  --pedra-600: #6B635A;

  /* ---------- Latão — acabamento, detalhes, destaque -------------------- */
  --latao-700: #7D6236;
  --latao-600: #9A7B45;
  --latao-500: #B8945F;
  --latao-400: #CBAE7E;
  --latao-300: #DFCBA6;
  --latao-100: #F2E9D8;

  /* ---------- Semânticas ------------------------------------------------ */
  --sucesso: #1F7A4C;
  --sucesso-claro: #E6F4EC;
  --erro: #A8322B;
  --erro-claro: #FBEDEC;
  --zap: #25D366;
  --zap-escuro: #128C7E;

  /* ---------- Papéis de cor (usados pelos componentes) ------------------ */
  --bg: var(--pedra-050);
  --bg-alt: var(--pedra-100);
  --bg-escuro: var(--azul-900);
  --superficie: var(--pedra-000);
  --texto: var(--azul-950);
  --texto-suave: #46555E;
  --texto-inverso: var(--pedra-000);
  --texto-inverso-suave: #B9CEDA;
  --borda: rgba(17, 67, 92, 0.14);
  --borda-forte: rgba(17, 67, 92, 0.28);
  --borda-clara: rgba(255, 255, 254, 0.16);

  /* ---------- Tipografia ------------------------------------------------ */
  --fonte-display: 'Cormorant Garamond', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --fonte-ui: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;

  --fs-2xs: clamp(0.6875rem, 0.67rem + 0.09vw, 0.75rem);
  --fs-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
  --fs-sm: clamp(0.875rem, 0.85rem + 0.12vw, 0.9375rem);
  --fs-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --fs-md: clamp(1.0625rem, 1rem + 0.28vw, 1.1875rem);
  --fs-lg: clamp(1.1875rem, 1.09rem + 0.42vw, 1.375rem);
  --fs-xl: clamp(1.375rem, 1.19rem + 0.82vw, 1.875rem);
  --fs-2xl: clamp(1.75rem, 1.42rem + 1.45vw, 2.75rem);
  --fs-3xl: clamp(2.125rem, 1.6rem + 2.35vw, 3.5rem);
  --fs-4xl: clamp(2.5rem, 1.75rem + 3.35vw, 4.5rem);

  --lh-tight: 1.06;
  --lh-titulo: 1.14;
  --lh-medio: 1.4;
  --lh-texto: 1.68;

  --ls-caps: 0.16em;
  --ls-caps-larga: 0.28em;
  --ls-titulo: -0.015em;

  /* ---------- Espaçamento (escala 4px) ---------------------------------- */
  --e-1: 0.25rem;
  --e-2: 0.5rem;
  --e-3: 0.75rem;
  --e-4: 1rem;
  --e-5: 1.5rem;
  --e-6: 2rem;
  --e-7: 2.5rem;
  --e-8: 3rem;
  --e-9: 4rem;
  --e-10: 5rem;
  --e-11: 6.5rem;
  --e-12: 8rem;

  --secao-y: clamp(3.5rem, 2rem + 7vw, 7.5rem);
  --gutter: clamp(1.15rem, 0.6rem + 2.6vw, 2.5rem);
  --largura-max: 78rem;
  --largura-texto: 42rem;

  /* ---------- Formas ---------------------------------------------------- */
  --r-sm: 3px;
  --r-md: 5px;
  --r-lg: 8px;
  --r-xl: 14px;
  --r-pill: 999px;

  /* ---------- Elevação — sombras frias, como pedra sobre pedra ---------- */
  --sombra-1: 0 1px 2px rgba(6, 26, 36, 0.06), 0 1px 3px rgba(6, 26, 36, 0.05);
  --sombra-2: 0 2px 6px rgba(6, 26, 36, 0.07), 0 6px 16px rgba(6, 26, 36, 0.07);
  --sombra-3: 0 4px 12px rgba(6, 26, 36, 0.09), 0 16px 36px rgba(6, 26, 36, 0.11);
  --sombra-4: 0 8px 22px rgba(6, 26, 36, 0.12), 0 30px 64px rgba(6, 26, 36, 0.16);
  --sombra-foco: 0 0 0 3px var(--pedra-000), 0 0 0 6px var(--latao-500);

  /* ---------- Movimento ------------------------------------------------- */
  --t-rapido: 140ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-medio: 260ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-lento: 620ms cubic-bezier(0.16, 0.84, 0.32, 1);

  --z-base: 1;
  --z-sticky: 60;
  --z-header: 70;
  --z-flutuante: 80;
  --z-modal: 90;
}

/* ==========================================================================
   Texturas de pedra. As que já têm foto real da chapa usam .jpg/.webp; as
   demais seguem no SVG procedural até a foto chegar. Tudo servido do
   próprio domínio.
   Para trocar por foto real: coloque o arquivo em img/pedras/ e aponte a
   var(--tex) abaixo para ele (o nome do arquivo segue o slug da pedra).
   ========================================================================== */
.pedra-marmore-carrara            { --tex: url('../img/pedras/marmore-carrara.jpg'); }
.pedra-marmore-calacatta          { --tex: url('../img/pedras/marmore-calacatta.jpg'); }
.pedra-marmore-branco-parana      { --tex: url('../img/pedras/marmore-branco-parana.jpg'); }
.pedra-marmore-travertino         { --tex: url('../img/pedras/marmore-travertino.webp'); }
.pedra-marmore-crema-marfil       { --tex: url('../img/pedras/marmore-crema-marfil.jpg'); }
.pedra-quartzito-taj-mahal        { --tex: url('../img/pedras/quartzito-taj-mahal.jpg'); }
.pedra-granito-branco-dallas      { --tex: url('../img/pedras/granito-branco-dallas.jpg'); }
.pedra-granito-preto-sao-gabriel  { --tex: url('../img/pedras/granito-preto-sao-gabriel.svg'); }
.pedra-granito-preto-via-lactea   { --tex: url('../img/pedras/granito-preto-via-lactea.jpg'); }
.pedra-granito-verde-ubatuba      { --tex: url('../img/pedras/granito-verde-ubatuba.jpg'); }
.pedra-granito-amarelo-ornamental { --tex: url('../img/pedras/granito-amarelo-ornamental.jpg'); }
.pedra-granito-cinza-corumba      { --tex: url('../img/pedras/granito-cinza-corumba.svg'); }

/* ==========================================================================
   PARTE 2 - COMPONENTES
   ========================================================================== */

/* ==========================================================================
   MS Mármores e Granitos — folha principal
   Depende de tokens.css. Sem frameworks, sem CDN, sem estilo inline
   (a CSP bloqueia inline por padrão — ver .htaccess).
   ========================================================================== */

/* ---------- Reset enxuto ------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
}

body {
  font-family: var(--fonte-ui);
  font-size: var(--fs-base);
  font-weight: 400;
  line-height: var(--lh-texto);
  color: var(--texto);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
ul, ol { list-style: none; padding: 0; }
table { border-collapse: collapse; }
address { font-style: normal; }

a { color: var(--azul-700); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--azul-600); }

:focus-visible {
  outline: 3px solid var(--latao-500);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

::selection { background: var(--azul-700); color: var(--pedra-000); }

/* ---------- Utilitários -------------------------------------------------- */
.visualmente-oculto {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.pular {
  position: absolute;
  top: 0; left: 50%;
  transform: translate(-50%, -120%);
  z-index: var(--z-modal);
  padding: var(--e-3) var(--e-5);
  background: var(--azul-700);
  color: var(--pedra-000);
  font-size: var(--fs-sm);
  font-weight: 500;
  text-decoration: none;
  border-radius: 0 0 var(--r-md) var(--r-md);
  transition: transform var(--t-rapido);
}
.pular:focus { transform: translate(-50%, 0); color: var(--pedra-000); }

.env {
  width: 100%;
  max-width: var(--largura-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.env--estreito { max-width: 56rem; }

.ico { flex: none; }

/* ==========================================================================
   TIPOGRAFIA DE SEÇÃO
   ========================================================================== */
.sobretitulo {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  margin-bottom: var(--e-4);
  font-size: var(--fs-2xs);
  font-weight: 500;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  /* latão-700, e não 600: em fundo claro o 600 (#9A7B45) rende 3,5:1, abaixo
     do mínimo de 4,5:1 da WCAG AA para este corpo de texto. O 700 dá 5,1:1
     em seção clara e 5,7:1 em branco. */
  color: var(--latao-700);
}
.sobretitulo--claro { color: var(--latao-400); }
.sobretitulo__risco {
  width: 2.25rem; height: 1px;
  background: currentColor;
  opacity: 0.55;
}

.secao__titulo {
  font-family: var(--fonte-display);
  font-size: var(--fs-3xl);
  font-weight: 500;
  line-height: var(--lh-titulo);
  letter-spacing: var(--ls-titulo);
  text-wrap: balance;
}

.secao__lead {
  max-width: var(--largura-texto);
  margin-top: var(--e-4);
  font-size: var(--fs-md);
  color: var(--texto-suave);
  text-wrap: pretty;
}

.secao__cab { margin-bottom: var(--e-8); }

.secao { padding-block: var(--secao-y); }
.secao--clara { background: var(--bg-alt); }

.secao--escura {
  background: var(--azul-900);
  color: var(--texto-inverso);
  position: relative;
  overflow: hidden;
}
.secao--escura .secao__lead { color: var(--texto-inverso-suave); }
.secao--escura::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(85rem 42rem at 12% -18%, rgba(34, 111, 140, 0.34), transparent 62%),
    radial-gradient(60rem 34rem at 95% 108%, rgba(184, 148, 95, 0.13), transparent 60%);
  pointer-events: none;
}
.secao--escura > * { position: relative; }

/* ==========================================================================
   BOTÕES
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  padding: 0.82rem 1.5rem;
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0.015em;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  transition: background-color var(--t-rapido), border-color var(--t-rapido),
              color var(--t-rapido), transform var(--t-rapido), box-shadow var(--t-rapido);
}
.btn:active { transform: translateY(1px); }
.btn--sm { padding: 0.6rem 1.1rem; font-size: var(--fs-xs); }
.btn--lg { padding: 1.02rem 2rem; font-size: var(--fs-base); }
.btn--bloco { width: 100%; }

.btn--zap {
  background: var(--zap);
  color: #05331B;
  box-shadow: 0 2px 10px rgba(37, 211, 102, 0.3);
}
.btn--zap:hover {
  background: #1FBF5B;
  color: #05331B;
  box-shadow: 0 4px 18px rgba(37, 211, 102, 0.4);
}

/* Botão de destaque que NÃO leva ao WhatsApp. O verde é reservado ao
   WhatsApp em todo o site — usá-lo em outro destino ensina errado o
   visitante e derruba a confiança no clique. */
.btn--marca {
  background: var(--pedra-000);
  color: var(--azul-800);
  box-shadow: var(--sombra-2);
}
.btn--marca:hover { background: var(--latao-100); color: var(--azul-900); }

.btn--contorno {
  border-color: var(--borda-forte);
  color: var(--azul-700);
  background: transparent;
}
.btn--contorno:hover { background: var(--azul-700); color: var(--pedra-000); border-color: var(--azul-700); }

.btn--contorno-claro {
  border-color: var(--borda-clara);
  color: var(--pedra-000);
  background: rgba(255, 255, 254, 0.05);
}
.btn--contorno-claro:hover { background: var(--pedra-000); color: var(--azul-900); border-color: var(--pedra-000); }

.btn--fantasma {
  border-color: rgba(255, 255, 254, 0.34);
  color: var(--pedra-000);
  background: rgba(6, 26, 36, 0.24);
  backdrop-filter: blur(6px);
}
.btn--fantasma:hover { background: var(--pedra-000); color: var(--azul-900); border-color: var(--pedra-000); }

/* ==========================================================================
   CABEÇALHO
   ========================================================================== */
/* O cabeçalho tem dois estados: transparente sobre o hero escuro e sólido
   depois que a página rola. As cores saem de variáveis próprias para que o
   estado possa ser trocado de UM lugar só — o que permite tanto o JS quanto
   a animação de scroll do CSS (mais abaixo) mudarem tudo de uma vez. */
.cab {
  --cab-bg: transparent;
  --cab-borda: transparent;
  --cab-sombra: none;
  --tinta-forte: var(--pedra-000);
  --tinta-suave: rgba(255, 255, 254, 0.78);
  --tinta-nav: rgba(255, 255, 254, 0.88);

  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-header);
  background: var(--cab-bg);
  border-bottom: 1px solid var(--cab-borda);
  box-shadow: var(--cab-sombra);
  transition: background-color var(--t-medio), box-shadow var(--t-medio),
              border-color var(--t-medio);
}
.cab__interno {
  display: flex;
  align-items: center;
  gap: var(--e-5);
  width: 100%;
  max-width: var(--largura-max);
  margin-inline: auto;
  padding: var(--e-3) var(--gutter);
}

/* Marca os primeiros 70px do documento. Enquanto ela está visível, a página
   está no topo e o cabeçalho pode ficar transparente sobre o hero. */
.cab-sentinela {
  position: absolute;
  top: 0; left: 0;
  width: 1px; height: 70px;
  pointer-events: none;
  visibility: hidden;
}

/* Estado sólido — aplicado por JS quando a sentinela sai de vista. */
.cab--solido {
  --cab-bg: rgba(250, 248, 245, 0.93);
  --cab-borda: var(--borda);
  --cab-sombra: var(--sombra-1);
  --tinta-forte: var(--azul-700);
  --tinta-suave: var(--texto-suave);
  --tinta-nav: var(--texto-suave);
  backdrop-filter: saturate(180%) blur(14px);
}

/* NOTA DE MANUTENÇÃO — não troque isto por animation-timeline: scroll().
   Já foi tentado: uma animação de rolagem em CSS puro dispensaria o JS, mas
   animação tem precedência sobre a cascata e passa por cima do .cab--solido
   acima, deixando o menu branco sobre o fundo claro. Se um dia for refeito,
   a animação precisa ser a ÚNICA fonte do estado — o JS teria de parar de
   aplicar a classe nos navegadores que a suportam, e .cab--menu-aberto
   precisaria entrar na animação também. */

.marca {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  text-decoration: none;
  color: inherit;
  flex: none;
}
.marca__logo {
  width: 46px; height: 46px;
  border-radius: var(--r-sm);
  box-shadow: var(--sombra-1);
}
.marca__txt {
  display: flex;
  flex-direction: column;
  line-height: 1.12;
}
.marca__txt strong {
  font-family: var(--fonte-display);
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--tinta-forte);
  transition: color var(--t-medio);
}
.marca__txt span {
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  transition: color var(--t-medio);
}

.cab__nav {
  display: flex;
  align-items: center;
  gap: var(--e-5);
  margin-left: auto;
}
.cab__nav a {
  position: relative;
  font-size: var(--fs-sm);
  font-weight: 400;
  text-decoration: none;
  color: var(--tinta-nav);
  transition: color var(--t-rapido);
  white-space: nowrap;
}
.cab__nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -5px;
  width: 100%; height: 1px;
  background: var(--latao-400);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-medio);
}
.cab__nav a:hover::after { transform: scaleX(1); }
.cab--solido .cab__nav a:hover { color: var(--azul-700); }

.cab__acoes {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  flex: none;
}
.cab__hamburguer { display: none; padding: var(--e-2); border-radius: var(--r-sm); }
.hamburguer { display: block; width: 22px; }
.hamburguer i {
  display: block;
  height: 1.5px;
  background: var(--tinta-forte);
  border-radius: 2px;
  transition: transform var(--t-medio), opacity var(--t-rapido), background-color var(--t-medio);
}
.hamburguer i + i { margin-top: 5px; }
/* Com o menu aberto o painel é branco. Sem forçar as tintas escuras aqui,
   o logo e o próprio botão de fechar sumiriam — branco sobre branco —
   sempre que o menu fosse aberto ainda no topo da página. */
.cab--menu-aberto {
  --cab-bg: var(--pedra-000);
  --cab-borda: transparent;
  --tinta-forte: var(--azul-700);
  --tinta-suave: var(--texto-suave);
  --tinta-nav: var(--texto-suave);
}

.cab--menu-aberto .hamburguer i:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.cab--menu-aberto .hamburguer i:nth-child(2) { opacity: 0; }
.cab--menu-aberto .hamburguer i:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(38rem, 92svh, 54rem);
  padding-block: clamp(7rem, 14vh, 10rem) var(--e-9);
  background: var(--azul-950);
  overflow: hidden;
  isolation: isolate;
}

.hero__pedra {
  position: absolute;
  inset: 0;
  z-index: -2;
}
/* Ampliada e levemente desfocada: vira atmosfera de pedra, não desenho.
   Sem isso, os veios em escala 1:1 competem com o H1 e parecem rachadura. */
.hero__pedra img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 62% 38%;
  opacity: 0.55;
  filter: blur(2.5px) saturate(0.8);
  transform: scale(1.6);
  transform-origin: 65% 40%;
}

/* Vinheta: escurece a esquerda para o texto ter contraste AA sobre a pedra */
/* Escurece a esquerda o suficiente para o texto bater contraste AA, e vai
   liberando a pedra à direita, onde as chapas ficam. */
.hero__vinheta {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(100deg,
      rgba(6, 26, 36, 0.95) 0%,
      rgba(7, 31, 43, 0.9) 30%,
      rgba(9, 40, 55, 0.78) 48%,
      rgba(11, 46, 63, 0.62) 66%,
      rgba(13, 54, 74, 0.5) 100%),
    linear-gradient(to top, rgba(6, 26, 36, 0.5), transparent 38%);
}

.hero__grade {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
  align-items: center;
  gap: var(--e-8);
  width: 100%;
  max-width: var(--largura-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.hero__texto { max-width: 40rem; }

/* ---------- Vitrine de chapas -------------------------------------------
   Três chapas encostadas em leque, como ficam no pátio. Perspectiva leve
   para dar profundidade sem virar "efeito 3D de template".
   ------------------------------------------------------------------------ */
.vitrine {
  position: relative;
  height: 27rem;
  perspective: 1400px;
}
.chapa {
  position: absolute;
  top: 50%;
  width: 15.5rem;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: var(--r-sm);
  background: var(--pedra-200);
  box-shadow: 0 18px 46px rgba(6, 26, 36, 0.5);
  transition: transform var(--t-lento);
}
.chapa::after {
  content: "";
  position: absolute;
  inset: 0;
  /* brilho de luz rasante na chapa polida + borda interna de latão */
  background: linear-gradient(112deg, rgba(255, 255, 254, 0.34) 0%, transparent 40%, rgba(6, 26, 36, 0.22) 100%);
  box-shadow: inset 0 0 0 1px rgba(203, 174, 126, 0.4);
  pointer-events: none;
}
.chapa img { width: 100%; height: 100%; object-fit: cover; }

.chapa__nome {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 1;
  padding: var(--e-6) var(--e-3) var(--e-3);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--pedra-000);
  background: linear-gradient(to top, rgba(6, 26, 36, 0.86), transparent);
}

.chapa--a { left: 2%;  transform: translateY(-52%) rotateY(15deg) rotate(-6deg) scale(0.9); z-index: 1; }
.chapa--b { left: 26%; transform: translateY(-50%) rotateY(9deg)  rotate(-2deg) scale(0.96); z-index: 2; }
.chapa--c { left: 50%; transform: translateY(-46%) rotateY(3deg)  rotate(3deg); z-index: 3; }

.vitrine:hover .chapa--a { transform: translateY(-54%) rotateY(15deg) rotate(-9deg) scale(0.9); }
.vitrine:hover .chapa--c { transform: translateY(-44%) rotateY(3deg) rotate(6deg); }

.hero__h1 {
  font-family: var(--fonte-display);
  font-size: var(--fs-4xl);
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: -0.022em;
  color: var(--pedra-000);
  text-wrap: balance;
  text-shadow: 0 2px 26px rgba(6, 26, 36, 0.45);
}
.hero__h1 em {
  display: block;
  font-style: italic;
  font-weight: 300;
  color: var(--latao-300);
}

.hero__sub {
  max-width: 34rem;
  margin-top: var(--e-5);
  font-size: var(--fs-lg);
  font-weight: 300;
  line-height: 1.58;
  color: rgba(255, 255, 254, 0.92);
  text-wrap: pretty;
}

.hero__ganchos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2) var(--e-5);
  margin-top: var(--e-5);
}
.hero__ganchos li {
  position: relative;
  padding-left: 1.05rem;
  font-size: var(--fs-sm);
  color: rgba(255, 255, 254, 0.82);
}
.hero__ganchos li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.72em;
  width: 5px; height: 5px;
  background: var(--latao-400);
  transform: rotate(45deg);
}
.hero__ganchos strong { font-weight: 500; color: var(--latao-300); }

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
  margin-top: var(--e-7);
}

.hero__nota {
  margin-top: var(--e-5);
  font-size: var(--fs-xs);
  color: rgba(255, 255, 254, 0.66);
}
.hero__nota a { color: rgba(255, 255, 254, 0.86); }
.hero__nota a:hover { color: var(--latao-300); }

/* ==========================================================================
   BARRA DE CONFIANÇA
   ========================================================================== */
.confianca {
  background: var(--azul-700);
  color: var(--pedra-000);
}
.confianca__lista {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--e-5) var(--e-6);
  width: 100%;
  max-width: var(--largura-max);
  margin-inline: auto;
  padding: var(--e-6) var(--gutter);
}
.confianca__lista li {
  display: flex;
  align-items: flex-start;
  gap: var(--e-3);
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: rgba(255, 255, 254, 0.78);
}
.confianca__lista strong {
  display: block;
  margin-bottom: 2px;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--pedra-000);
}
.confianca__ico { flex: none; color: var(--latao-400); margin-top: 2px; }

/* ==========================================================================
   DOIS CAMINHOS
   ========================================================================== */
.caminhos {
  display: grid;
  /* O min() é o que impede a coluna de travar em 20rem (320px) e empurrar a
     página para fora da tela em aparelhos de 320px de largura. */
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
  gap: var(--e-5);
}

.caminho {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--e-7) var(--e-6) var(--e-6);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--r-lg);
  box-shadow: var(--sombra-1);
  transition: box-shadow var(--t-medio), transform var(--t-medio);
}
.caminho:hover { box-shadow: var(--sombra-3); transform: translateY(-3px); }

.caminho--destaque {
  border-color: var(--azul-700);
  box-shadow: var(--sombra-2), inset 0 0 0 1px rgba(17, 67, 92, 0.1);
}

.caminho__selo {
  position: absolute;
  top: -0.72rem; right: var(--e-6);
  padding: 0.3rem 0.85rem;
  font-size: var(--fs-2xs);
  font-weight: 500;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--pedra-000);
  background: var(--azul-700);
  border-radius: var(--r-pill);
}

.caminho__num {
  font-family: var(--fonte-display);
  font-size: 2.6rem;
  font-weight: 300;
  line-height: 1;
  /* pedra-500, e não 300: o 300 (#D8D1C6) é bege sobre branco e rende 1,5:1,
     abaixo do mínimo de 3:1 para texto grande. O 500 dá 3,6:1 e continua
     discreto o bastante para não competir com o título ao lado. */
  color: var(--pedra-500);
}

.caminho__titulo {
  margin-top: var(--e-2);
  font-family: var(--fonte-display);
  font-size: var(--fs-xl);
  font-weight: 500;
  line-height: var(--lh-titulo);
}

.caminho__desc {
  margin-top: var(--e-3);
  font-size: var(--fs-sm);
  color: var(--texto-suave);
}

.lista-check { margin-top: var(--e-5); display: grid; gap: var(--e-2); }
.lista-check li {
  position: relative;
  padding-left: 1.65rem;
  font-size: var(--fs-sm);
  line-height: 1.5;
}
.lista-check li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.4em;
  width: 0.95rem; height: 0.52rem;
  border-left: 1.6px solid var(--latao-600);
  border-bottom: 1.6px solid var(--latao-600);
  transform: rotate(-45deg);
}

.caminho__quem {
  margin-top: var(--e-5);
  padding-top: var(--e-4);
  border-top: 1px solid var(--borda);
  font-size: var(--fs-xs);
  color: var(--texto-suave);
}
.caminho__quem strong { color: var(--texto); font-weight: 500; }

.caminho .btn { margin-top: var(--e-5); }
.caminho > .btn:last-child { margin-top: auto; }

.aviso-honesto {
  display: flex;
  align-items: flex-start;
  gap: var(--e-3);
  max-width: 52rem;
  margin: var(--e-7) auto 0;
  padding: var(--e-4) var(--e-5);
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--texto-suave);
  background: var(--latao-100);
  border-left: 3px solid var(--latao-500);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}
.aviso-honesto svg { flex: none; margin-top: 3px; color: var(--latao-700); }
.aviso-honesto strong { color: var(--texto); font-weight: 500; }

/* ==========================================================================
   CATÁLOGO DE PEDRAS
   ========================================================================== */
.filtros {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  margin-bottom: var(--e-6);
}
.filtro {
  padding: 0.5rem 1.15rem;
  font-size: var(--fs-xs);
  font-weight: 400;
  letter-spacing: 0.03em;
  color: rgba(255, 255, 254, 0.72);
  background: rgba(255, 255, 254, 0.06);
  border: 1px solid var(--borda-clara);
  border-radius: var(--r-pill);
  transition: background-color var(--t-rapido), color var(--t-rapido), border-color var(--t-rapido);
}
.filtro:hover { background: rgba(255, 255, 254, 0.13); color: var(--pedra-000); }
.filtro--ativo {
  background: var(--pedra-000);
  border-color: var(--pedra-000);
  color: var(--azul-900);
  font-weight: 500;
}
.filtro--ativo:hover { background: var(--pedra-000); color: var(--azul-900); }

.pedras {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr));
  gap: var(--e-4);
}

.pedra {
  overflow: hidden;
  background: rgba(255, 255, 254, 0.045);
  border: 1px solid var(--borda-clara);
  border-radius: var(--r-md);
  transition: transform var(--t-medio), border-color var(--t-medio), box-shadow var(--t-medio);
}
.pedra:hover {
  transform: translateY(-4px);
  border-color: rgba(203, 174, 126, 0.5);
  box-shadow: 0 14px 34px rgba(6, 26, 36, 0.45);
}
.pedra[hidden] { display: none; }

.pedra__amostra {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--pedra-200);
}
.pedra__amostra img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--t-lento);
}
.pedra:hover .pedra__amostra img { transform: scale(1.07); }
/* brilho diagonal, como luz de showroom passando pela chapa polida */
.pedra__amostra::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(118deg, rgba(255, 255, 254, 0.3) 0%, transparent 38%, transparent 62%, rgba(6, 26, 36, 0.16) 100%);
  pointer-events: none;
}

.pedra__info { padding: var(--e-4); }
.pedra__nome {
  font-family: var(--fonte-display);
  font-size: var(--fs-lg);
  font-weight: 500;
  line-height: 1.2;
  color: var(--pedra-000);
}
.pedra__tipo {
  margin-top: 2px;
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--latao-400);
}
.pedra__uso {
  margin-top: var(--e-3);
  font-size: var(--fs-xs);
  line-height: 1.45;
  color: rgba(255, 255, 254, 0.62);
}
.pedras__rodape {
  margin-top: var(--e-6);
  font-size: var(--fs-sm);
  color: var(--texto-inverso-suave);
  text-wrap: pretty;
}
.link-claro { color: var(--latao-300); font-weight: 500; }
.link-claro:hover { color: var(--pedra-000); }

/* ==========================================================================
   APLICAÇÕES
   ========================================================================== */
/* Quatro cards: 2x2 fecha o bloco. auto-fit deixaria 3+1 órfão em 1440px. */
.aplicacoes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e-5);
}
@media (max-width: 54rem) {
  .aplicacoes { grid-template-columns: minmax(0, 1fr); }
}

.aplic {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--r-lg);
  box-shadow: var(--sombra-1);
  transition: box-shadow var(--t-medio), transform var(--t-medio);
}
.aplic:hover { box-shadow: var(--sombra-3); transform: translateY(-3px); }

/* Faixa de textura no topo do card — usa a var(--tex) definida em tokens.css */
.aplic__faixa {
  height: 7.5rem;
  background-image: var(--tex);
  background-size: cover;
  background-position: center;
  border-bottom: 1px solid var(--borda);
}

.aplic__corpo { padding: var(--e-6); }
.aplic__titulo {
  font-family: var(--fonte-display);
  font-size: var(--fs-xl);
  font-weight: 500;
  line-height: var(--lh-titulo);
  margin-bottom: var(--e-3);
}
.aplic__corpo > p {
  font-size: var(--fs-sm);
  color: var(--texto-suave);
}

.aplic__dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--e-2) var(--e-4);
  margin-top: var(--e-5);
  padding-top: var(--e-4);
  border-top: 1px solid var(--borda);
  font-size: var(--fs-xs);
  line-height: 1.5;
}
.aplic__dl dt {
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--latao-700);
  white-space: nowrap;
}
.aplic__dl dd { color: var(--texto-suave); }

/* ==========================================================================
   GALERIA / TRABALHOS
   ========================================================================== */
.galeria {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--e-4);
}
.galeria__item--largo { grid-column: span 2; }

.galeria figure {
  position: relative;
  height: 100%;
  min-height: 15rem;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--pedra-200);
  box-shadow: var(--sombra-1);
}
.galeria img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--t-lento);
}
.galeria figure:hover img { transform: scale(1.06); }

.galeria figcaption {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--e-6) var(--e-4) var(--e-4);
  color: var(--pedra-000);
  background: linear-gradient(to top, rgba(6, 26, 36, 0.9) 12%, rgba(6, 26, 36, 0.62) 55%, transparent);
}
.galeria__pedra {
  font-family: var(--fonte-display);
  font-size: var(--fs-lg);
  font-weight: 500;
  line-height: 1.2;
}
.galeria__aplic {
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--latao-300);
}

.insta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-5);
  margin-top: var(--e-7);
  padding: var(--e-6);
  color: var(--pedra-000);
  background: var(--azul-800);
  border-radius: var(--r-lg);
  background-image: radial-gradient(48rem 24rem at 88% -30%, rgba(184, 148, 95, 0.22), transparent 62%);
}
.insta__texto { max-width: 34rem; }
.insta__titulo {
  font-family: var(--fonte-display);
  font-size: var(--fs-xl);
  font-weight: 500;
  line-height: var(--lh-titulo);
  margin-bottom: var(--e-2);
}
.insta__texto p { font-size: var(--fs-sm); color: var(--texto-inverso-suave); }

/* ==========================================================================
   PASSOS
   ========================================================================== */
.passos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--e-5);
  counter-reset: passo;
}
.passo {
  position: relative;
  padding: var(--e-6) var(--e-5);
  background: rgba(255, 255, 254, 0.045);
  border: 1px solid var(--borda-clara);
  border-radius: var(--r-md);
}
.passo__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem; height: 2.6rem;
  margin-bottom: var(--e-4);
  font-family: var(--fonte-display);
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--latao-300);
  border: 1px solid rgba(203, 174, 126, 0.42);
  border-radius: 50%;
}
.passo__titulo {
  font-family: var(--fonte-display);
  font-size: var(--fs-lg);
  font-weight: 500;
  line-height: var(--lh-titulo);
  margin-bottom: var(--e-2);
  color: var(--pedra-000);
}
.passo p { font-size: var(--fs-sm); color: var(--texto-inverso-suave); }

.passos__cta { margin-top: var(--e-7); text-align: center; }

/* ==========================================================================
   TABELA COMPARATIVA
   ========================================================================== */
.tabela-rolagem {
  overflow-x: auto;
  border: 1px solid var(--borda);
  border-radius: var(--r-lg);
  background: var(--superficie);
  box-shadow: var(--sombra-1);
  -webkit-overflow-scrolling: touch;
}
.tabela-rolagem:focus-visible { outline-offset: 0; }

.tabela {
  width: 100%;
  min-width: 44rem;
  font-size: var(--fs-sm);
}
.tabela thead th {
  padding: var(--e-4) var(--e-4);
  font-family: var(--fonte-display);
  font-size: var(--fs-lg);
  font-weight: 500;
  text-align: left;
  color: var(--pedra-000);
  background: var(--azul-700);
}
.tabela thead th:first-child {
  font-family: var(--fonte-ui);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: rgba(255, 255, 254, 0.72);
}
.tabela tbody th {
  padding: var(--e-3) var(--e-4);
  font-weight: 500;
  text-align: left;
  color: var(--texto);
  background: var(--bg-alt);
  white-space: nowrap;
}
.tabela tbody th small {
  display: block;
  font-size: var(--fs-2xs);
  font-weight: 400;
  color: var(--texto-suave);
}
.tabela td {
  padding: var(--e-3) var(--e-4);
  color: var(--texto-suave);
  vertical-align: middle;
}
.tabela tbody tr + tr th,
.tabela tbody tr + tr td { border-top: 1px solid var(--borda); }

.nivel {
  display: inline-block;
  padding: 0.18rem 0.6rem;
  font-size: var(--fs-2xs);
  font-weight: 500;
  border-radius: var(--r-sm);
}
.nivel--alto  { color: #14603A; background: var(--sucesso-claro); }
.nivel--medio { color: var(--latao-700); background: var(--latao-100); }
.nivel--baixo { color: #8C2A24; background: var(--erro-claro); }

.resumo-decisao {
  max-width: 46rem;
  margin-top: var(--e-6);
  padding: var(--e-5) var(--e-6);
  background: var(--azul-100);
  border-radius: var(--r-lg);
}
.resumo-decisao__titulo {
  margin-bottom: var(--e-3);
  font-size: var(--fs-2xs);
  font-weight: 500;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--azul-600);
}
.resumo-decisao ul { display: grid; gap: var(--e-2); }
.resumo-decisao li {
  padding-left: 1.05rem;
  position: relative;
  font-size: var(--fs-sm);
  color: var(--texto-suave);
}
.resumo-decisao li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.68em;
  width: 5px; height: 5px;
  background: var(--azul-500);
  transform: rotate(45deg);
}
.resumo-decisao strong { color: var(--texto); font-weight: 500; }

/* ==========================================================================
   COBERTURA / BAIRROS
   ========================================================================== */
.cobertura {
  display: grid;
  /* Mesmo motivo do .caminhos: sem o min(), vaza em telas de 320px. */
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
  gap: var(--e-7);
}
.cobertura__titulo {
  margin-bottom: var(--e-4);
  font-family: var(--fonte-display);
  font-size: var(--fs-xl);
  font-weight: 500;
}
.chips { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.chips li {
  padding: 0.4rem 0.85rem;
  font-size: var(--fs-xs);
  color: var(--texto-suave);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--r-pill);
}
.chips--alt li { background: var(--azul-100); border-color: rgba(17, 67, 92, 0.1); color: var(--azul-700); }
.cobertura__nota {
  margin-top: var(--e-4);
  font-size: var(--fs-xs);
  color: var(--texto-suave);
}

/* ==========================================================================
   AVALIAÇÕES
   ========================================================================== */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.estrelas { display: inline-flex; line-height: 0; }

.nota {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-4) var(--e-6);
  margin-bottom: var(--e-6);
  padding: var(--e-5) var(--e-6);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--r-lg);
  box-shadow: var(--sombra-1);
}
.nota__numero {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  padding-right: var(--e-6);
  border-right: 1px solid var(--borda);
}
.nota__numero strong {
  font-family: var(--fonte-display);
  font-size: clamp(2.25rem, 1.9rem + 1.5vw, 3rem);
  font-weight: 500;
  line-height: 1;
  color: var(--azul-700);
}
.nota__texto {
  display: grid;
  gap: 2px;
  font-size: var(--fs-sm);
  color: var(--texto);
}
.nota__texto span {
  font-size: var(--fs-xs);
  color: var(--texto-suave);
}
.nota__link { margin-left: auto; }

.depoimentos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: var(--e-4);
}
.depo {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  padding: var(--e-6) var(--e-5) var(--e-5);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--r-lg);
  box-shadow: var(--sombra-1);
  overflow: hidden;
  transition: box-shadow var(--t-medio), transform var(--t-medio);
}
.depo:hover { box-shadow: var(--sombra-3); transform: translateY(-3px); }
.depo__aspas {
  position: absolute;
  top: -1.1rem; right: 0.6rem;
  font-family: var(--fonte-display);
  font-size: 6rem;
  line-height: 1;
  color: var(--pedra-200);
  pointer-events: none;
  user-select: none;
}
.depo__texto { position: relative; margin: 0; }
.depo__texto p {
  font-family: var(--fonte-display);
  font-size: var(--fs-lg);
  font-style: italic;
  font-weight: 400;
  line-height: 1.45;
  color: var(--texto);
  text-wrap: pretty;
}
.depo__fonte {
  margin-top: auto;
  padding-top: var(--e-3);
  border-top: 1px solid var(--borda);
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--texto-suave);
}
/* Quando houver nome real de cliente, ele entra aqui e ganha destaque. */
.depo__autor {
  display: block;
  margin-bottom: 2px;
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
  color: var(--texto);
}

.depoimentos__rodape {
  margin-top: var(--e-5);
  font-size: var(--fs-sm);
  color: var(--texto-suave);
  text-wrap: pretty;
}

@media (max-width: 40rem) {
  .nota { flex-direction: column; align-items: flex-start; gap: var(--e-3); }
  .nota__numero { padding-right: 0; border-right: 0; }
  .nota__link { margin-left: 0; }
}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq {
  border-top: 1px solid var(--borda);
}
.faq__item { border-bottom: 1px solid var(--borda); }
.faq__item summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--e-4);
  padding: var(--e-5) 0;
  font-family: var(--fonte-display);
  font-size: var(--fs-lg);
  font-weight: 500;
  line-height: 1.32;
  cursor: pointer;
  list-style: none;
  transition: color var(--t-rapido);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--azul-700); }
.faq__item summary::after {
  content: "";
  flex: none;
  width: 0.72rem; height: 0.72rem;
  margin-top: 0.42em;
  border-right: 1.6px solid var(--latao-600);
  border-bottom: 1.6px solid var(--latao-600);
  transform: rotate(45deg);
  transition: transform var(--t-medio);
}
.faq__item[open] summary::after { transform: rotate(-135deg); }
.faq__resp {
  padding-bottom: var(--e-5);
  max-width: 46rem;
}
.faq__resp p { font-size: var(--fs-sm); color: var(--texto-suave); }
.faq__resp strong { color: var(--texto); font-weight: 500; }

/* ==========================================================================
   ORÇAMENTO
   ========================================================================== */
.secao--orcamento {
  position: relative;
  background: var(--azul-900);
  color: var(--texto-inverso);
  overflow: hidden;
}
.secao--orcamento::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(72rem 38rem at 8% -10%, rgba(34, 111, 140, 0.36), transparent 60%),
    radial-gradient(52rem 30rem at 100% 100%, rgba(184, 148, 95, 0.14), transparent 58%);
  pointer-events: none;
}
.secao--orcamento > * { position: relative; }

.orc {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: var(--e-8);
  align-items: start;
}

.orc__lead {
  max-width: 30rem;
  margin-top: var(--e-4);
  font-size: var(--fs-md);
  color: var(--texto-inverso-suave);
  text-wrap: pretty;
}
.orc__beneficios {
  display: grid;
  gap: var(--e-3);
  margin: var(--e-6) 0 var(--e-7);
}
.orc__beneficios li {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  font-size: var(--fs-sm);
  color: rgba(255, 255, 254, 0.88);
}
.orc__beneficios svg { flex: none; color: var(--latao-400); }

.orc__caixa {
  padding: var(--e-6);
  background: var(--superficie);
  border-radius: var(--r-xl);
  box-shadow: var(--sombra-4);
  color: var(--texto);
}

/* ---------- Formulário --------------------------------------------------- */
.form { display: grid; gap: var(--e-4); }
.form__grupo { border: 0; padding: 0; }
.form__legenda {
  margin-bottom: var(--e-3);
  padding: 0;
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--texto);
}

.opcoes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-2); }
.opcao { position: relative; display: block; }
.opcao input {
  position: absolute;
  opacity: 0;
  width: 100%; height: 100%;
  margin: 0;
  cursor: pointer;
}
.opcao__caixa {
  display: block;
  padding: var(--e-3) var(--e-4);
  background: var(--bg-alt);
  border: 1.5px solid var(--borda);
  border-radius: var(--r-md);
  transition: border-color var(--t-rapido), background-color var(--t-rapido), box-shadow var(--t-rapido);
}
.opcao__titulo {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: 1.3;
}
.opcao__desc {
  display: block;
  font-size: var(--fs-2xs);
  color: var(--texto-suave);
}
.opcao input:checked + .opcao__caixa {
  border-color: var(--azul-700);
  background: var(--azul-100);
  box-shadow: inset 0 0 0 1px var(--azul-700);
}
.opcao input:focus-visible + .opcao__caixa {
  outline: 3px solid var(--latao-500);
  outline-offset: 2px;
}

.form__linha { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-4); }

.campo { display: grid; gap: var(--e-2); }
.campo[hidden] { display: none; }
.campo__rot {
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.02em;
}
.campo__rot span { color: var(--erro); }

.campo__ent {
  width: 100%;
  padding: 0.72rem 0.9rem;
  font-size: var(--fs-sm);
  background: var(--bg);
  border: 1.5px solid var(--borda);
  border-radius: var(--r-md);
  transition: border-color var(--t-rapido), box-shadow var(--t-rapido), background-color var(--t-rapido);
}
.campo__ent::placeholder { color: var(--pedra-500); }
.campo__ent:hover { border-color: var(--borda-forte); }
.campo__ent:focus {
  outline: none;
  background: var(--superficie);
  border-color: var(--azul-700);
  box-shadow: 0 0 0 3px rgba(17, 67, 92, 0.13);
}
.campo__ent--area { resize: vertical; min-height: 4.5rem; line-height: 1.5; }

select.campo__ent {
  appearance: none;
  padding-right: 2.3rem;
  /* seta em SVG embutido — data: é permitido em img-src pela CSP */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%2346555E' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
}

.campo__ajuda { font-size: var(--fs-2xs); color: var(--texto-suave); }
.campo__erro {
  font-size: var(--fs-2xs);
  font-weight: 500;
  color: var(--erro);
}
.campo__ent[aria-invalid="true"] {
  border-color: var(--erro);
  box-shadow: 0 0 0 3px rgba(168, 50, 43, 0.11);
}

/* Campo auxiliar do formulário, fora da área visível. Ver LEIA-ME.md. */
.mel {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.form__aviso {
  font-size: var(--fs-xs);
  font-weight: 500;
  line-height: 1.5;
}
.form__aviso:empty { display: none; }
.form__aviso[data-tipo="erro"] { color: var(--erro); }
.form__aviso[data-tipo="ok"] { color: var(--sucesso); }

.form__legal {
  font-size: 0.6875rem;
  line-height: 1.5;
  color: var(--texto-suave);
}

/* ==========================================================================
   RODAPÉ
   ========================================================================== */
.rodape {
  padding-block: var(--e-9) var(--e-6);
  background: var(--azul-950);
  color: rgba(255, 255, 254, 0.72);
  font-size: var(--fs-sm);
}
.rodape__grade {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr 1fr;
  gap: var(--e-7) var(--e-6);
}
.rodape a { color: rgba(255, 255, 254, 0.82); text-decoration: none; }
.rodape a:hover { color: var(--latao-300); text-decoration: underline; }

.rodape__logo { width: 62px; height: 62px; border-radius: var(--r-sm); }
.rodape__nome {
  margin-top: var(--e-4);
  font-family: var(--fonte-display);
  font-size: var(--fs-lg);
  font-weight: 500;
  color: var(--pedra-000);
}
.rodape__slogan {
  margin-top: 2px;
  font-size: var(--fs-xs);
  font-style: italic;
  color: var(--latao-300);
}
.rodape__desc {
  margin-top: var(--e-4);
  font-size: var(--fs-xs);
  line-height: 1.65;
  max-width: 24rem;
}
.rodape__social {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  margin-top: var(--e-4);
  font-size: var(--fs-xs);
}

.rodape__titulo {
  margin-bottom: var(--e-4);
  font-size: var(--fs-2xs);
  font-weight: 500;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--pedra-000);
}
.rodape__titulo--esp { margin-top: var(--e-6); }

.rodape__nap { display: grid; gap: var(--e-4); }
.rodape__linha { display: grid; gap: 3px; font-size: var(--fs-xs); line-height: 1.6; }
.rodape__linha strong {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 254, 0.46);
}

.rodape__mapa {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  margin-top: var(--e-4);
  padding: 0.5rem 1rem;
  font-size: var(--fs-xs);
  border: 1px solid var(--borda-clara);
  border-radius: var(--r-pill);
  transition: background-color var(--t-rapido);
}
.rodape__mapa:hover { background: rgba(255, 255, 254, 0.08); text-decoration: none; }

.rodape__horarios { width: 100%; font-size: var(--fs-xs); }
.rodape__horarios th {
  padding: 0.28rem 0;
  font-weight: 400;
  text-align: left;
  color: rgba(255, 255, 254, 0.68);
}
.rodape__horarios td { padding: 0.28rem 0; text-align: right; color: var(--pedra-000); }

.rodape__links { display: grid; gap: var(--e-2); font-size: var(--fs-xs); }
.rodape__links--simples li { color: rgba(255, 255, 254, 0.66); }

.rodape__base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  margin-top: var(--e-8);
  padding-top: var(--e-5);
  border-top: 1px solid rgba(255, 255, 254, 0.1);
  font-size: var(--fs-2xs);
  color: rgba(255, 255, 254, 0.5);
}

/* ==========================================================================
   AÇÕES FIXAS
   ========================================================================== */
.zap-flutuante {
  position: fixed;
  right: clamp(0.9rem, 2.4vw, 1.75rem);
  bottom: clamp(0.9rem, 2.4vw, 1.75rem);
  z-index: var(--z-flutuante);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.6rem; height: 3.6rem;
  color: var(--pedra-000);
  background: var(--zap);
  border-radius: 50%;
  box-shadow: 0 6px 20px rgba(6, 26, 36, 0.28), 0 0 0 8px rgba(37, 211, 102, 0.14);
  transition: transform var(--t-medio), box-shadow var(--t-medio);
}
.zap-flutuante:hover {
  transform: scale(1.07);
  color: var(--pedra-000);
  box-shadow: 0 8px 26px rgba(6, 26, 36, 0.34), 0 0 0 12px rgba(37, 211, 102, 0.18);
}

.barra-movel {
  position: fixed;
  inset: auto 0 0 0;
  z-index: var(--z-sticky);
  display: none;
  gap: 1px;
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--borda);
  box-shadow: 0 -3px 18px rgba(6, 26, 36, 0.16);
}
.barra-movel__acao {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  padding: 0.95rem 0.5rem;
  font-size: var(--fs-xs);
  font-weight: 500;
  text-decoration: none;
}
.barra-movel__acao--zap { color: #05331B; background: var(--zap); }

/* ==========================================================================
   PÁGINA 404
   ========================================================================== */
.erro {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100svh;
  padding: var(--e-8) var(--gutter);
  background: var(--azul-950);
  overflow: hidden;
  isolation: isolate;
  text-align: center;
}
.erro__pedra { position: absolute; inset: 0; z-index: -2; }
.erro__pedra img {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.5;
  filter: blur(3px) saturate(0.8);
  transform: scale(1.5);
}
.erro__vinheta {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(70% 70% at 50% 45%, rgba(8, 34, 47, 0.86), rgba(6, 26, 36, 0.96));
}
.erro__caixa { max-width: 38rem; }
.erro__logo {
  width: 64px; height: 64px;
  margin: 0 auto var(--e-6);
  border-radius: var(--r-sm);
  box-shadow: var(--sombra-2);
}
.erro .sobretitulo { justify-content: center; }
.erro__titulo {
  font-family: var(--fonte-display);
  font-size: var(--fs-3xl);
  font-weight: 400;
  line-height: var(--lh-titulo);
  letter-spacing: var(--ls-titulo);
  color: var(--pedra-000);
  text-wrap: balance;
}
.erro__titulo em { font-style: italic; font-weight: 300; color: var(--latao-300); }
.erro__texto {
  margin-top: var(--e-4);
  font-size: var(--fs-md);
  font-weight: 300;
  color: rgba(255, 255, 254, 0.86);
  text-wrap: pretty;
}
.erro__ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--e-3);
  margin-top: var(--e-7);
}
.erro__contato {
  margin-top: var(--e-6);
  font-size: var(--fs-sm);
  color: rgba(255, 255, 254, 0.66);
}
.erro__contato a { color: var(--latao-300); }
.erro__contato a:hover { color: var(--pedra-000); }

@media (max-width: 30rem) {
  .erro__ctas .btn { width: 100%; }
}

/* ==========================================================================
   ANIMAÇÃO DE ENTRADA (aplicada por JS, some se o usuário pedir menos motion)
   ========================================================================== */
.revelar {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--t-lento), transform var(--t-lento);
}
.revelar--visivel { opacity: 1; transform: none; }

/* ==========================================================================
   RESPONSIVO
   ========================================================================== */
@media (max-width: 68rem) {
  .rodape__grade { grid-template-columns: 1fr 1fr; }
  .orc { grid-template-columns: 1fr; gap: var(--e-7); }
  .orc__lead, .orc__beneficios { max-width: 42rem; }
}

/* Faixa intermediária (notebook): com 7 itens de menu, o respiro entre eles
   precisa encolher para a navegação caber inteira na linha. */
@media (max-width: 84rem) {
  .cab__nav { gap: var(--e-4); }
}

@media (max-width: 72rem) {
  .cab__nav { gap: var(--e-3); }
  .cab__nav a { font-size: var(--fs-xs); }
}

@media (max-width: 66rem) {
  /* A vitrine é adorno: em tela estreita ela roubaria o espaço do texto,
     que é o que converte. */
  .hero__grade { grid-template-columns: minmax(0, 1fr); }
  .vitrine { display: none; }
}

@media (max-width: 60rem) {
  .cab__hamburguer { display: block; }

  /* O painel do menu é fixed e, por ser posicionado, passaria por cima do
     logo e do botão de fechar — que não são posicionados. Trazê-los para
     frente evita que a marca suma justamente quando o menu está aberto. */
  .marca, .cab__acoes { position: relative; z-index: 1; }

  .cab__nav {
    position: fixed;
    inset: 0 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 5.5rem var(--gutter) var(--e-6);
    background: var(--pedra-000);
    box-shadow: var(--sombra-4);
    transform: translateY(-101%);
    visibility: hidden;
    transition: transform var(--t-medio), visibility var(--t-medio);
  }
  .cab--menu-aberto .cab__nav { transform: none; visibility: visible; }
  .cab__nav a {
    padding: var(--e-4) 0;
    font-size: var(--fs-md);
    color: var(--texto);
    border-bottom: 1px solid var(--borda);
  }
  .cab__nav a::after { display: none; }

  .galeria__item--largo { grid-column: span 1; }
}

@media (max-width: 48rem) {
  html { scroll-padding-top: 4.5rem; }
  body { padding-bottom: 3.6rem; } /* espaço da barra fixa */

  .barra-movel { display: flex; }
  /* A barra fixa já entrega o WhatsApp aqui. O botão flutuante só somaria
     ruído e ainda cobriria o CTA do hero. */
  .zap-flutuante { display: none; }

  .hero { min-height: auto; padding-block: 7rem var(--e-8); }
  .hero__pedra img { object-position: 70% 30%; }
  .hero__vinheta {
    background:
      linear-gradient(180deg, rgba(6, 26, 36, 0.9) 0%, rgba(8, 34, 47, 0.88) 45%, rgba(11, 46, 63, 0.82) 100%);
  }
  .hero__ctas .btn { width: 100%; }

  .orc__caixa { padding: var(--e-5) var(--e-4); }
  .form__linha { grid-template-columns: 1fr; }
  .rodape__grade { grid-template-columns: 1fr; }
  .aplic__faixa { height: 6rem; }
  .caminho { padding: var(--e-6) var(--e-5) var(--e-5); }
}

@media (max-width: 30rem) {
  .opcoes { grid-template-columns: 1fr; }
  .pedras { grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); }
  .hero__ganchos { flex-direction: column; gap: var(--e-1); }
}

/* ---------- Preferências do usuário -------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .revelar { opacity: 1; transform: none; }
}

@media (prefers-contrast: more) {
  :root { --texto-suave: #22323B; --borda: rgba(17, 67, 92, 0.4); }
  .btn { border-width: 2px; }
}

/* ---------- Impressão ---------------------------------------------------- */
@media print {
  .cab, .barra-movel, .zap-flutuante, .filtros, .hero__ctas, .insta { display: none !important; }
  body { background: #fff; color: #000; padding: 0; }
  .secao--escura, .secao--orcamento, .rodape { background: #fff !important; color: #000 !important; }
  .secao--escura *, .secao--orcamento *, .rodape * { color: #000 !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.75em; }
}