/* Kit Growft — base de todo site (1.3: grid de 12, escala fluida, espaço de 8 pt, motion por tokens).
   Contrato: o site carrega o tokens.css do cliente ANTES deste arquivo. Os papéis que os tokens.css já
   usam (--bg, --bg-alt, --surface, --text, --text-muted, --accent, --accent-hover, --on-accent) alimentam
   as variáveis do kit; os valores depois da vírgula são só para a demo. Nenhuma cor de marca fixa aqui. */
:root {
  --cor-fundo: var(--bg, #f6f3ee);
  --cor-fundo-alt: var(--bg-alt, #ebe4d8);
  --cor-superficie: var(--surface, #fffdf9);
  --cor-texto: var(--text, #1b1714);
  --cor-texto-suave: var(--text-muted, #5a524b);
  --cor-acento: var(--accent, #7a3e1d);
  --cor-acento-hover: var(--accent-hover, #5c2e15);
  --cor-sobre-acento: var(--on-accent, #ffffff);
  --cor-linha: color-mix(in srgb, var(--cor-texto) 14%, transparent);

  --fonte-titulo: var(--font-display, Georgia, "Times New Roman", serif);
  --fonte-texto: var(--font-body, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);

  /* Escala tipográfica fluida (390 → 1440): o h1 fica 6 a 10× o texto. */
  --t-sm: clamp(.875rem, .85rem + .1vw, .9375rem);
  --t-base: clamp(1rem, .96rem + .18vw, 1.125rem);
  --t-md: clamp(1.25rem, 1.1rem + .6vw, 1.625rem);
  --t-lg: clamp(1.75rem, 1.4rem + 1.5vw, 2.75rem);
  --t-xl: clamp(2.5rem, 1.8rem + 3.2vw, 4.75rem);
  --t-hero: clamp(3rem, 1.6rem + 6.2vw, 8.5rem);

  /* Espaço: múltiplos de 8 px. */
  --e-1: .5rem; --e-2: 1rem; --e-3: 1.5rem; --e-4: 2rem; --e-5: 3rem; --e-6: 4rem; --e-7: 6rem; --e-8: 8rem;
  --secao: clamp(4.5rem, 3rem + 7vw, 10rem);
  --margem: clamp(1.25rem, .8rem + 2.4vw, 3.5rem);
  --largura: 82rem;

  --raio: 4px;
  --sombra: 0 1px 2px color-mix(in srgb, var(--cor-texto) 8%, transparent), 0 12px 32px -12px color-mix(in srgb, var(--cor-texto) 22%, transparent);

  /* Motion: definidos uma vez e usados em tudo (o kit-motion.js lê --motion-stagger). */
  --dur-1: 140ms; --dur-2: 240ms; --dur-3: 700ms;
  --curva: cubic-bezier(.2, .8, .2, 1);
  --motion-stagger: .075;
}

/* Reset enxuto */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--cor-fundo); color: var(--cor-texto); font: var(--t-base)/1.6 var(--fonte-texto); -webkit-font-smoothing: antialiased; }
img, svg, video { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
a { color: inherit; }
button { font: inherit; }
:focus-visible { outline: 3px solid var(--cor-acento); outline-offset: 3px; }

/* Tipografia */
h1, h2, h3 { font-family: var(--fonte-titulo); font-weight: 600; line-height: 1.04; letter-spacing: -.02em; text-wrap: balance; }
h1 { font-size: var(--t-hero); }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-md); line-height: 1.2; letter-spacing: -.01em; }
p { max-width: 65ch; text-wrap: pretty; }
.sobretitulo { font: 600 var(--t-sm)/1.3 var(--fonte-texto); letter-spacing: .14em; text-transform: uppercase; color: var(--cor-acento); }
.texto-suave { color: var(--cor-texto-suave); }
.texto-grande { font-size: var(--t-md); line-height: 1.45; }

/* Layout */
.conteiner { width: min(100% - 2 * var(--margem), var(--largura)); margin-inline: auto; }
.secao { padding-block: var(--secao); position: relative; }
.secao--alt { background: var(--cor-fundo-alt); }
.secao--escura { background: var(--cor-texto); color: var(--cor-fundo); }
.secao--escura .texto-suave { color: color-mix(in srgb, var(--cor-fundo) 72%, transparent); }
.grade { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--e-4) var(--e-3); }
.pilha > * + * { margin-top: var(--e-3); }
.pilha-curta > * + * { margin-top: var(--e-2); }
@media (max-width: 767px) { .grade > * { grid-column: 1 / -1 !important; } }

/* Botões e links */
.botao { display: inline-flex; align-items: center; justify-content: center; gap: .6em; min-height: 48px; padding: .85em 1.5em; border: 2px solid transparent; border-radius: 999px; font: 600 var(--t-base)/1 var(--fonte-texto); text-decoration: none; cursor: pointer; transition: transform var(--dur-1) var(--curva), background-color var(--dur-2) var(--curva), color var(--dur-2) var(--curva); }
.botao:hover { transform: translateY(-2px); }
.botao:active { transform: translateY(0) scale(.98); }
.botao--cheio { background: var(--cor-acento); color: var(--cor-sobre-acento); }
.botao--cheio:hover { background: var(--cor-acento-hover); }
.botao--contorno { border-color: currentColor; background: transparent; }
.botao .icone { width: 1.25em; height: 1.25em; }
.link-traco { text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat; transition: background-size var(--dur-2) var(--curva); padding-block: .6rem; display: inline-block; }
.link-traco:hover, .link-traco:focus-visible { background-size: 100% 2px; }
.icone { width: 1.5rem; height: 1.5rem; fill: currentColor; flex: none; }

/* Imagem: moldura com aproximação 1,03 no hover; o parallax mexe no <img> de dentro. */
.moldura { overflow: hidden; border-radius: var(--raio); background: var(--cor-fundo-alt); }
.moldura img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-3) var(--curva); }
.moldura:hover img { transform: scale(1.03); }
/* A sobra de 18 % fica metade em cima e metade embaixo: o deslocamento do parallax nunca descobre a borda da moldura. */
.moldura[data-parallax] img { height: 118%; position: relative; top: -9%; }

/* Cabeçalho e WhatsApp fixo */
.pular { position: absolute; left: var(--e-2); top: -4rem; z-index: 100; padding: var(--e-2); background: var(--cor-acento); color: var(--cor-sobre-acento); }
.pular:focus { top: var(--e-2); }
.topo { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--cor-fundo) 88%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--cor-linha); }
.topo__barra { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); min-height: 4.5rem; }
.topo__marca { font: 700 var(--t-md)/1 var(--fonte-titulo); text-decoration: none; display: inline-flex; align-items: center; min-height: 48px; }
.topo__nav { display: flex; gap: var(--e-3); }
.topo__nav a { display: inline-flex; align-items: center; min-height: 48px; text-decoration: none; }
@media (max-width: 900px) { .topo__nav { display: none; } }
.zap-fixo { position: fixed; right: var(--e-2); bottom: var(--e-2); z-index: 60; display: none; width: 56px; height: 56px; border-radius: 50%; align-items: center; justify-content: center; background: var(--cor-acento); color: var(--cor-sobre-acento); box-shadow: var(--sombra); }
@media (max-width: 767px) { .zap-fixo { display: inline-flex; } body { padding-bottom: 5rem; } }

/* Textura: grão SVG a 3 %, por cima de tudo e sem pegar clique. */
.grao::after { content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: .03; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* Faixa contínua (data-marquee): o JS duplica o conteúdo; aqui só o movimento, pausado no hover. */
[data-marquee] { overflow: hidden; }
.marquee__trilho { display: flex; width: max-content; gap: var(--e-5); animation: kit-marquee var(--marquee-dur, 32s) linear infinite; }
[data-marquee]:hover .marquee__trilho { animation-play-state: paused; }
@keyframes kit-marquee { to { transform: translateX(-50%); } }

/* Galeria horizontal (data-pin): no celular e no movimento reduzido vira rolagem lateral nativa. */
.trilho { display: flex; gap: var(--e-3); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--e-2); }
.trilho > * { flex: 0 0 min(78vw, 26rem); scroll-snap-align: start; }

/* Perguntas (details nativo, sem JS) */
.perguntas details { border-top: 1px solid var(--cor-linha); }
.perguntas details:last-child { border-bottom: 1px solid var(--cor-linha); }
.perguntas summary { display: flex; justify-content: space-between; align-items: center; gap: var(--e-2); min-height: 56px; padding-block: var(--e-2); cursor: pointer; font: 600 var(--t-md)/1.3 var(--fonte-titulo); list-style: none; }
.perguntas summary::-webkit-details-marker { display: none; }
.perguntas summary::after { content: "+"; font-size: 1.5em; transition: transform var(--dur-2) var(--curva); }
.perguntas details[open] summary::after { transform: rotate(45deg); }
.perguntas details > div { padding-bottom: var(--e-3); }

/* Cartão de serviço/depoimento */
.cartao-kit { background: var(--cor-superficie); border: 1px solid var(--cor-linha); border-radius: var(--raio); padding: var(--e-4); transition: transform var(--dur-2) var(--curva), box-shadow var(--dur-2) var(--curva); }
.cartao-kit:hover { transform: translateY(-2px); box-shadow: var(--sombra); }

/* Movimento reduzido: nada se move; o conteúdo já está no estado final (o JS nem roda). */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation: none !important; }
  .moldura[data-parallax] img { height: 100%; top: 0; }
}