/* ==========================================================================
   Mil Malhas — Folha de estilo principal
   Atacado de tecidos e malhas · Goiânia/GO
   --------------------------------------------------------------------------
   Sumário
   01. Tokens              06. Hero
   02. Reset / base        07. Seções de conteúdo
   03. Tipografia          08. Rodapé e CTA
   04. Componentes         09. Animação (estados de entrada)
   05. Cabeçalho           10. Responsivo
   ========================================================================== */

/* ==========================================================================
   01. TOKENS
   ========================================================================== */

:root {
  /* — Marca: violeta extraído do logotipo Mil Malhas — */
  --violeta-50:  #f9f0fd;
  --violeta-100: #f1ddfb;
  --violeta-200: #e2bcf6;
  --violeta-300: #cb90ee;
  --violeta-400: #b055e5;
  --violeta-500: #8f00d0;  /* cor institucional */
  --violeta-600: #7a00b0;
  --violeta-700: #5f0089;
  --violeta-800: #430060;
  --violeta-900: #2c0040;
  --violeta-950: #17001f;

  /* — Neutros quentes (base têxtil, não cinza frio) — */
  --areia-50:  #fdfcfb;
  --areia-100: #f7f4f2;
  --areia-200: #ece7e4;
  --areia-300: #dad2ce;
  --areia-400: #b5aab3;
  --areia-500: #8b8090;
  --areia-600: #6b6172;
  --areia-700: #4e4655;
  --areia-800: #332d39;
  --areia-900: #1d1822;

  /* — Papéis semânticos — */
  --cor-fundo:        var(--areia-100);
  --cor-superficie:   #ffffff;
  --cor-superficie-2: var(--areia-50);
  --cor-texto:        var(--areia-900);
  --cor-texto-suave:  var(--areia-700);
  --cor-texto-fraco:  var(--areia-600);
  --cor-borda:        var(--areia-300);
  --cor-borda-sutil:  var(--areia-200);
  --cor-acento:       var(--violeta-500);
  --cor-acento-texto: var(--violeta-700); /* violeta legível sobre fundo claro */
  --cor-escuro:       var(--violeta-950);

  --zap: #1da851;       /* verde WhatsApp, escurecido p/ contraste AA */
  --zap-hover: #17903f;

  /* — Tipografia — */
  --fonte-titulo: "Playfair Display", "Times New Roman", Georgia, serif;
  --fonte-texto:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --t-xs:   0.75rem;    /* 12px — apenas legendas/kickers */
  --t-sm:   0.875rem;   /* 14px */
  --t-base: 1rem;       /* 16px */
  --t-md:   1.0625rem;  /* 17px — corpo */
  --t-lg:   1.1875rem;  /* 19px */
  --t-xl:   1.5rem;     /* 24px */
  --t-2xl:  clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
  --t-3xl:  clamp(2.125rem, 1.5rem + 2.8vw, 3.5rem);
  --t-4xl:  clamp(2.75rem, 1.4rem + 6vw, 6rem);

  /* — Espaçamento (escala 4/8) — */
  --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(4rem, 3rem + 5vw, 8rem);
  --gutter: clamp(1.25rem, 0.5rem + 3vw, 4.5rem);
  --largura-max: 1240px;
  --medida: 62ch;

  /* — Forma e profundidade — */
  --raio-sm: 4px;
  --raio-md: 10px;
  --raio-lg: 18px;
  --raio-pill: 999px;

  --sombra-sm: 0 1px 2px rgba(29, 24, 34, 0.06), 0 2px 6px rgba(29, 24, 34, 0.04);
  --sombra-md: 0 4px 12px rgba(29, 24, 34, 0.07), 0 12px 32px rgba(29, 24, 34, 0.06);
  --sombra-lg: 0 8px 24px rgba(29, 24, 34, 0.09), 0 28px 64px rgba(44, 0, 64, 0.12);
  --sombra-violeta: 0 8px 28px rgba(143, 0, 208, 0.22);

  /* — Movimento — */
  --dur-rapida: 160ms;
  --dur-media: 260ms;
  --dur-lenta: 420ms;
  --ease-saida: cubic-bezier(0.22, 1, 0.36, 1);   /* entrada de elementos */
  --ease-padrao: cubic-bezier(0.4, 0, 0.2, 1);

  /* — Camadas — */
  --z-base: 1;
  --z-flutuante: 60;
  --z-menu: 80;
  --z-sticky: 90;   /* acima do painel: o botão de fechar precisa ficar acessível */
  --z-topo: 100;
}

/* ==========================================================================
   02. RESET / BASE
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: var(--fonte-texto);
  font-size: var(--t-md);
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-wrap: pretty;
  overflow-x: hidden;
}

img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }

a { color: var(--cor-acento-texto); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--violeta-500); }

button { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--violeta-500);
  outline-offset: 3px;
  border-radius: var(--raio-sm);
}
.secao-escura :focus-visible { outline-color: var(--violeta-200); }

::selection { background: var(--violeta-200); color: var(--violeta-900); }

/* Pular para o conteúdo (acessibilidade por teclado) */
.pular-link {
  position: absolute;
  left: var(--e-4);
  top: var(--e-4);
  z-index: var(--z-topo);
  padding: var(--e-3) var(--e-5);
  background: var(--violeta-700);
  color: #fff;
  border-radius: var(--raio-md);
  font-size: var(--t-sm);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform var(--dur-media) var(--ease-saida);
}
.pular-link:focus-visible { transform: translateY(0); color: #fff; }

.so-leitor-tela {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   03. TIPOGRAFIA
   ========================================================================== */

h1, h2, h3, h4 {
  font-family: var(--fonte-titulo);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: var(--t-4xl); line-height: 1.02; letter-spacing: -0.03em; }
h2 { font-size: var(--t-3xl); letter-spacing: -0.022em; }
h3 { font-size: var(--t-xl); line-height: 1.25; letter-spacing: -0.012em; }

p { margin: 0 0 var(--e-4); }
p:last-child { margin-bottom: 0; }

.kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--e-3);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cor-acento-texto);
  margin: 0 0 var(--e-5);
}
.kicker::before {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
  opacity: 0.55;
}
.secao-escura .kicker { color: var(--violeta-300); }

.chamada {
  font-size: var(--t-lg);
  line-height: 1.6;
  color: var(--cor-texto-suave);
  max-width: var(--medida);
}

.texto-corpo { color: var(--cor-texto-suave); max-width: var(--medida); }

/* ==========================================================================
   04. COMPONENTES
   ========================================================================== */

/* — Envelope de largura — */
.envelope {
  width: 100%;
  max-width: var(--largura-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.secao { padding-block: var(--secao-y); }

.secao-escura {
  background: var(--cor-escuro);
  color: var(--areia-100);
}
.secao-escura h1, .secao-escura h2, .secao-escura h3 { color: #fff; }
.secao-escura .texto-corpo, .secao-escura .chamada { color: rgba(247, 244, 242, 0.76); }

/* — Botões — */
.btn {
  --btn-bg: var(--violeta-600);
  --btn-cor: #fff;
  --btn-borda: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-3);
  min-height: 48px;
  padding: 0.75rem 1.5rem;
  border: 1px solid var(--btn-borda);
  border-radius: var(--raio-pill);
  background: var(--btn-bg);
  color: var(--btn-cor);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background-color var(--dur-media) var(--ease-padrao),
    border-color var(--dur-media) var(--ease-padrao),
    color var(--dur-media) var(--ease-padrao),
    box-shadow var(--dur-media) var(--ease-padrao),
    transform var(--dur-rapida) var(--ease-padrao);
}
.btn:hover { color: var(--btn-cor); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primario { box-shadow: var(--sombra-violeta); }
.btn-primario:hover { --btn-bg: var(--violeta-500); box-shadow: 0 10px 34px rgba(143, 0, 208, 0.32); }
.btn-primario:active { --btn-bg: var(--violeta-700); }

.btn-secundario {
  --btn-bg: transparent;
  --btn-cor: var(--cor-texto);
  --btn-borda: var(--cor-borda);
  box-shadow: none;
}
.btn-secundario:hover { --btn-bg: var(--violeta-50); --btn-borda: var(--violeta-300); --btn-cor: var(--violeta-700); }
.btn-secundario:active { --btn-bg: var(--violeta-100); }

.secao-escura .btn-secundario {
  --btn-cor: #fff;
  --btn-borda: rgba(255, 255, 255, 0.3);
}
.secao-escura .btn-secundario:hover {
  --btn-bg: rgba(255, 255, 255, 0.1);
  --btn-borda: rgba(255, 255, 255, 0.55);
  --btn-cor: #fff;
}

.hero .btn-secundario {
  --btn-cor: #fff;
  --btn-borda: rgba(255, 255, 255, 0.32);
}
.hero .btn-secundario:hover {
  --btn-bg: rgba(255, 255, 255, 0.12);
  --btn-borda: rgba(255, 255, 255, 0.6);
  --btn-cor: #fff;
}

.btn-claro { --btn-bg: #fff; --btn-cor: var(--violeta-700); box-shadow: var(--sombra-md); }
.btn-claro:hover { --btn-bg: var(--violeta-50); --btn-cor: var(--violeta-800); }

.btn-zap { --btn-bg: var(--zap); box-shadow: 0 8px 24px rgba(29, 168, 81, 0.26); }
.btn-zap:hover { --btn-bg: var(--zap-hover); }

.btn svg { width: 18px; height: 18px; flex: none; }

/* — Grupo de ações — */
.acoes { display: flex; flex-wrap: wrap; gap: var(--e-3); }

/* — Selo / etiqueta — */
.selo {
  display: inline-flex;
  font-family: var(--fonte-texto);
  align-items: center;
  gap: var(--e-2);
  padding: 0.3rem 0.75rem;
  border-radius: var(--raio-pill);
  background: var(--violeta-50);
  border: 1px solid var(--violeta-100);
  color: var(--violeta-700);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
}
html:not(.js-ativo) [data-status-loja] { display: none; }

.selo--vivo { background: rgba(29, 168, 81, 0.1); border-color: rgba(29, 168, 81, 0.28); color: #146b35; }
.selo--fechado { background: var(--areia-200); border-color: var(--cor-borda); color: var(--cor-texto-suave); }

.ponto {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.selo--vivo .ponto { animation: pulsar 2.4s var(--ease-padrao) infinite; }
@keyframes pulsar {
  0%, 100% { box-shadow: 0 0 0 0 rgba(29, 168, 81, 0.45); }
  50%      { box-shadow: 0 0 0 6px rgba(29, 168, 81, 0); }
}

/* ==========================================================================
   05. CABEÇALHO
   ========================================================================== */

.cabecalho {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-sticky);
  padding-top: env(safe-area-inset-top, 0px);
  transition: background-color var(--dur-lenta) var(--ease-padrao),
              box-shadow var(--dur-lenta) var(--ease-padrao),
              border-color var(--dur-lenta) var(--ease-padrao);
  border-bottom: 1px solid transparent;
}
.cabecalho__interno {
  max-width: var(--largura-max);
  margin-inline: auto;
  padding: var(--e-3) var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-5);
}

/* Estado inicial: sobre o hero escuro */
.cabecalho__marca img { height: 40px; width: auto; transition: opacity var(--dur-media) var(--ease-padrao); }
.cabecalho__marca { display: flex; align-items: center; text-decoration: none; }
.cabecalho__marca .logo-claro { display: block; }
.cabecalho__marca .logo-escuro { display: none; }

.cabecalho__nav { display: flex; align-items: center; gap: clamp(0.75rem, 1.6vw, 2rem); }
.cabecalho__nav a:not(.btn) {
  position: relative;
  font-size: var(--t-sm);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.88);
  text-decoration: none;
  padding: var(--e-2) 0;
  transition: color var(--dur-media) var(--ease-padrao);
}
.cabecalho__nav a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-media) var(--ease-saida);
}
.cabecalho__nav a:not(.btn):hover { color: #fff; }
.cabecalho__nav a:not(.btn):hover::after,
.cabecalho__nav a[aria-current="true"]::after { transform: scaleX(1); }

/* Estado rolado: fundo claro */
.cabecalho.is-rolado {
  background: rgba(253, 252, 251, 0.88);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  border-bottom-color: var(--cor-borda-sutil);
  box-shadow: var(--sombra-sm);
}
.cabecalho.is-rolado .cabecalho__marca img { height: 34px; }
.cabecalho.is-rolado .cabecalho__marca .logo-claro { display: none; }
.cabecalho.is-rolado .cabecalho__marca .logo-escuro { display: block; }
.cabecalho.is-rolado .cabecalho__nav a:not(.btn) { color: var(--cor-texto-suave); }
.cabecalho.is-rolado .cabecalho__nav a:not(.btn):hover,
.cabecalho.is-rolado .cabecalho__nav a[aria-current="true"] { color: var(--violeta-700); }

.cabecalho.menu-aberto {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
  border-bottom-color: transparent;
}
.cabecalho.menu-aberto .logo-claro  { display: block; }
.cabecalho.menu-aberto .logo-escuro { display: none; }
.cabecalho.menu-aberto .menu-btn { color: #fff; border-color: rgba(255, 255, 255, 0.28); }
.cabecalho.menu-aberto .menu-btn:hover { background: rgba(255, 255, 255, 0.12); }

/* Botão do menu (mobile) */
.menu-btn {
  display: none;
  width: 46px; height: 46px;
  align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--raio-md);
  color: #fff;
  cursor: pointer;
  transition: background-color var(--dur-media) var(--ease-padrao),
              border-color var(--dur-media) var(--ease-padrao);
}
.menu-btn:hover { background: rgba(255, 255, 255, 0.12); }
.cabecalho.is-rolado .menu-btn { color: var(--cor-texto); border-color: var(--cor-borda); }
.cabecalho.is-rolado .menu-btn:hover { background: var(--violeta-50); }
.menu-btn svg { width: 22px; height: 22px; }
.menu-btn .icone-fechar { display: none; }
.menu-btn[aria-expanded="true"] .icone-abrir { display: none; }
.menu-btn[aria-expanded="true"] .icone-fechar { display: block; }

/* Painel mobile */
.menu-painel {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  display: none;
  flex-direction: column;
  padding: calc(5.5rem + env(safe-area-inset-top, 0px)) var(--gutter) calc(var(--e-8) + env(safe-area-inset-bottom, 0px));
  background: var(--cor-escuro);
  overflow-y: auto;
}
.menu-painel[data-aberto="true"] { display: flex; }
.menu-painel a:not(.btn) {
  display: block;
  padding: var(--e-4) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  font-family: var(--fonte-titulo);
  font-size: 1.5rem;
  color: #fff;
  text-decoration: none;
}
.menu-painel a:not(.btn):hover { color: var(--violeta-300); }
.menu-painel .acoes { margin-top: var(--e-7); }
.menu-painel .btn { width: 100%; }

/* ==========================================================================
   06. HERO
   ========================================================================== */

.hero {
  --hero-saida: 0;          /* 0 → 1 na reta final da rolagem do hero (JS) */
  --hero-fim: 0;            /* 0 → 1: o véu some antes do tecido escuro se desfazer no pano */
  position: relative;
  isolation: isolate;
  background: var(--cor-escuro);
  color: #fff;
  overflow: clip;           /* clip (não hidden): mantém o position: sticky funcionando */
}

/* Palco do tecido: fica preso à tela enquanto o hero rola e não ocupa espaço
   no fluxo (margin negativa). Fundo = o mesmo estúdio que o WebGL desenha. */
.hero__cena {
  position: sticky;
  top: 0;
  z-index: -1;
  height: 100vh;
  height: 100lvh;
  margin-bottom: -100vh;
  margin-bottom: -100lvh;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(60% 55% at 70% 38%, #3a0d54 0%, transparent 70%),
    var(--violeta-950);
}

/* Poster: fotografia do mesmo tecido. Aparece de imediato e é o plano B
   sem WebGL; sai de cena quando o canvas já está visível. */
/* Mesmo enquadramento que o WebGL usa no primeiro quadro (tecido-config.js:
   `ancora` de cada foto), para o canvas entrar sem salto. */
.hero__poster img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 95% 50%;
}
@media (max-aspect-ratio: 1/1) {
  /* em pé: a foto começa mais baixa e o texto fica sobre o fundo */
  .hero__poster img { top: 26%; object-position: 62% 50%; }
}
.hero__poster { position: absolute; inset: 0; display: block; }
/* a mesma queda de luz que o WebGL aplica atrás do texto (troca sem salto) */
.hero__poster::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(23, 0, 31, 0.65) 0%, rgba(23, 0, 31, 0.3) 45%, rgba(23, 0, 31, 0) 70%);
}
@media (min-width: 861px) and (min-aspect-ratio: 1/1) {
  .hero__poster::after {
    background: linear-gradient(to right, rgba(23, 0, 31, 0.9) 0%, rgba(23, 0, 31, 0.9) 40%, rgba(23, 0, 31, 0) 70%);
  }
}
.hero--tecido-vivo .hero__poster { visibility: hidden; }

/* Com o WebGL vivo, o tecido é desenhado num canvas fixo atrás da página
   (só o hero desenha nele). O hero fica transparente para mostrá-lo. */
.tecido-camada {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100vh;
  height: 100lvh;
  pointer-events: none;
  opacity: 0;
  transition: opacity 700ms var(--ease-padrao);
}
.tecido-camada.is-pronta { opacity: 1; }

/* O fundo creme é tecido: o pano fica atrás de tudo (as seções claras são
   transparentes e parecem impressas nele). Esta é a versão estática; com o
   WebGL pronto, o canvas desenha o mesmo pano vivo e esta camada some. */
.fundo-tecido {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
}
.fundo-tecido img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0;
}
/* a trama da malha, repetida (16 pontos de 4,5 px por ladrilho) */
.fundo-tecido::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../img/tecido/trama.webp") 0 0 / 72px 79px repeat;
  mix-blend-mode: overlay;
  opacity: 0.55;
}
.tecido-camada.com-fundo ~ .fundo-tecido { visibility: hidden; }
.tecido-camada canvas { display: block; width: 100%; height: 100%; }
.hero--tecido-vivo,
.hero--tecido-vivo .hero__cena { background: transparent; }

.hero__tela {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 900ms var(--ease-padrao);
}
.hero__tela.is-pronta { opacity: 1; }

/* Véu de contraste: escurece só onde há texto (coluna da esquerda / topo). */
.hero__veu {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(23, 0, 31, 0.55) 0%, rgba(23, 0, 31, 0) 16%),
    linear-gradient(to top, rgba(23, 0, 31, 0.9) 0%, rgba(23, 0, 31, 0.6) 38%, rgba(23, 0, 31, 0.25) 70%, rgba(23, 0, 31, 0.1) 100%);
  opacity: calc((1 - var(--hero-saida) * 0.85) * (1 - var(--hero-fim)));
}

.hero__conteudo {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  padding-top: calc(7rem + env(safe-area-inset-top, 0px));
  padding-bottom: var(--e-8);
}

/* — Layout lado a lado: texto à esquerda (~45%), tecido à direita — */
@media (min-width: 861px) and (min-aspect-ratio: 1/1) {
  .hero__veu {
    background:
      linear-gradient(to bottom, rgba(23, 0, 31, 0.55) 0%, rgba(23, 0, 31, 0) 16%),
      linear-gradient(to right, rgba(23, 0, 31, 0.55) 0%, rgba(23, 0, 31, 0.35) 30%, rgba(23, 0, 31, 0) 50%),
      linear-gradient(to top, rgba(23, 0, 31, 0.45) 0%, rgba(23, 0, 31, 0) 22%);
  }
  .hero__conteudo { justify-content: center; }
  .hero__conteudo > * { max-width: min(100%, 44vw, 40rem); }
  .hero h1 { font-size: clamp(2.75rem, 5.2vw, 5.5rem); }
  .hero .hero__acoes { margin-bottom: var(--e-8); }
  .hero .hero__numeros {
    width: 100%;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--e-4);
  }
}
@media (min-width: 861px) and (min-aspect-ratio: 1/1) and (max-height: 780px) {
  .hero__conteudo { padding-top: calc(5.75rem + env(safe-area-inset-top, 0px)); padding-bottom: var(--e-6); }
  .hero .hero__kicker { margin-bottom: var(--e-4); }
  .hero .hero__acoes { margin-bottom: var(--e-6); }
}

/* — Rolagem do tecido (só com WebGL ativo e movimento permitido) —
   O hero ganha um trecho extra de rolagem; o palco fica preso enquanto o
   tecido desenrola. A rolagem é a nativa: nada é sequestrado. */
/* espaçador (e não padding): o sticky só anda dentro da caixa de conteúdo do pai */
.hero--3d::after { content: ""; display: block; height: 70svh; }

@media (min-width: 861px) and (min-aspect-ratio: 1/1) {
  .hero--3d::after { height: 95svh; }
  /* o texto fica junto do tecido; se for mais alto que a tela, fixa pelo pé */
  .hero--3d .hero__conteudo {
    position: sticky;
    top: var(--conteudo-topo, 0px);
    opacity: calc(1 - var(--hero-saida));
    transform: translate3d(0, calc(var(--hero-saida) * -2.5vh), 0);
  }
  .hero--saindo .hero__conteudo { pointer-events: none; }
  .hero--3d .hero__conteudo:focus-within { opacity: 1; pointer-events: auto; }
}

.hero__kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--e-3);
  padding: 0.4rem 0.9rem 0.4rem 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--raio-pill);
  background: rgba(255, 255, 255, 0.07);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
  margin-bottom: var(--e-5);
}
.hero__kicker .selo--fechado {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.26);
  color: rgba(255, 255, 255, 0.88);
  padding: 0.15rem 0.6rem;
}
.hero__kicker .selo--vivo {
  background: rgba(29, 168, 81, 0.18);
  border-color: rgba(29, 168, 81, 0.4);
  color: #7ee2a4;
  padding: 0.15rem 0.6rem;
}

.hero h1 { margin-bottom: var(--e-5); max-width: 16ch; }
.hero h1 .linha {
  display: block;
  overflow: hidden;
  padding-bottom: 0.1em;   /* espaço para descendentes e para o itálico */
  margin-bottom: -0.1em;
}
.hero h1 .linha > span { display: block; }
.hero h1 em {
  font-style: italic;
  color: var(--violeta-300);
  font-weight: 400;
}

.hero__texto {
  font-size: var(--t-lg);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
  max-width: 52ch;
  margin-bottom: var(--e-6);
}

.hero__acoes { margin-bottom: var(--e-9); }

/* Faixa de números no pé do hero */
.hero__numeros {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--e-5) var(--e-6);
  padding-top: var(--e-6);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.hero__numeros li { margin: 0; }

.numero__valor {
  display: block;
  font-family: var(--fonte-titulo);
  font-size: clamp(2rem, 1.4rem + 2.2vw, 3rem);
  font-weight: 400;
  line-height: 1;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.numero__rotulo {
  display: block;
  margin-top: var(--e-2);
  font-size: var(--t-xs);
  line-height: 1.45;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

/* ==========================================================================
   07. SEÇÕES DE CONTEÚDO
   ========================================================================== */

/* — Cabeçalho de seção — */
.secao__topo { max-width: 68ch; margin-bottom: var(--e-8); }
.secao__topo h2 { margin-bottom: var(--e-4); }

/* — História (texto + foto) — */
.historia {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.historia__figura {
  position: relative;
  margin: 0;
}
.historia__figura img {
  width: 100%;
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-lg);
}
.historia__figura::before {
  content: "";
  position: absolute;
  inset: auto -18px -18px auto;
  width: 62%;
  height: 62%;
  border: 1px solid var(--violeta-200);
  border-radius: var(--raio-lg);
  z-index: -1;
}
.historia__figura figcaption {
  margin-top: var(--e-4);
  font-size: var(--t-sm);
  color: var(--cor-texto-fraco);
}
.historia__lista {
  list-style: none;
  margin: var(--e-6) 0 0;
  padding: 0;
  display: grid;
  gap: var(--e-3);
}
.historia__lista li {
  display: flex;
  align-items: flex-start;
  gap: var(--e-3);
  color: var(--cor-texto-suave);
}
.historia__lista svg {
  width: 20px; height: 20px;
  flex: none;
  margin-top: 4px;
  color: var(--violeta-500);
}

/* — Linhas de produto — */
.linhas { display: grid; gap: 1px; background: var(--cor-borda-sutil); border-block: 1px solid var(--cor-borda-sutil); grid-template-columns: repeat(auto-fit, minmax(clamp(260px, 30%, 380px), 1fr)); }
.linha-item {
  background: var(--cor-fundo);
  padding: var(--e-7) var(--e-6) var(--e-8);
  transition: background-color var(--dur-media) var(--ease-padrao);
}
.linha-item:hover { background: var(--cor-superficie); }
.linha-item__num {
  font-family: var(--fonte-titulo);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--violeta-400);
  display: block;
  margin-bottom: var(--e-4);
}
.linha-item h3 { margin-bottom: var(--e-3); }
.linha-item p { color: var(--cor-texto-suave); font-size: var(--t-base); margin-bottom: var(--e-4); }
.linha-item__tags { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.linha-item__tags span {
  font-size: var(--t-xs);
  padding: 0.2rem 0.6rem;
  border-radius: var(--raio-sm);
  background: var(--areia-200);
  color: var(--cor-texto-suave);
  transition: background-color var(--dur-media) var(--ease-padrao), color var(--dur-media) var(--ease-padrao);
}
.linha-item:hover .linha-item__tags span { background: var(--violeta-50); color: var(--violeta-700); }

/* — Cartela de cores — */
.cartela {
  display: grid;
  grid-template-columns: repeat(4, 1fr);   /* 16 amostras => filas cheias */
  gap: var(--e-4);
}
@media (min-width: 760px) { .cartela { grid-template-columns: repeat(8, 1fr); } }

.amostra { margin: 0; }
.amostra__cor {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--raio-md);
  background-color: var(--c);
  background-image:
    repeating-linear-gradient(45deg,  rgba(255,255,255,0.10) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,0.10)      0 1px, transparent 1px 4px);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.09), var(--sombra-sm);
  transition: transform var(--dur-media) var(--ease-saida), box-shadow var(--dur-media) var(--ease-saida);
}
.amostra:hover .amostra__cor {
  transform: translateY(-4px) scale(1.02);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.09), var(--sombra-md);
}
.amostra figcaption {
  margin-top: var(--e-3);
  font-size: var(--t-xs);
  letter-spacing: 0.06em;
  color: var(--cor-texto-fraco);
  text-align: center;
}

/* — Passos — */
.passos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(clamp(250px, 28%, 340px), 1fr));
  gap: var(--e-6);
  counter-reset: passo;
}
.passo { position: relative; padding-top: var(--e-6); border-top: 2px solid var(--violeta-100); }
.passo::before {
  counter-increment: passo;
  content: "0" counter(passo);
  position: absolute;
  top: calc(-1 * var(--e-4));
  left: 0;
  padding-right: var(--e-3);
  background: var(--cor-fundo);
  font-family: var(--fonte-titulo);
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--violeta-500);
}
.passo h3 { margin-bottom: var(--e-3); }
.passo p { color: var(--cor-texto-suave); font-size: var(--t-base); }

/* — Depoimentos — */
.depoimentos { display: grid; grid-template-columns: repeat(auto-fit, minmax(clamp(280px, 40%, 460px), 1fr)); gap: var(--e-6); }
.depoimento {
  margin: 0;
  padding: var(--e-7) var(--e-6);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--raio-lg);
}
.secao-escura .depoimento blockquote { color: #fff; }

.depoimento__aspas {
  font-family: var(--fonte-titulo);
  font-size: 3rem;
  line-height: 0.6;
  color: var(--violeta-400);
  display: block;
  margin-bottom: var(--e-4);
}
.depoimento blockquote {
  margin: 0 0 var(--e-5);
  font-family: var(--fonte-titulo);
  font-size: var(--t-xl);
  line-height: 1.4;
  letter-spacing: -0.01em;
}
.depoimento figcaption { font-size: var(--t-sm); color: rgba(255, 255, 255, 0.6); }
.depoimento figcaption strong { display: block; color: #fff; font-weight: 600; }

/* — Loja: endereço, horário, mapa — */
.loja { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.loja__dados { display: grid; gap: var(--e-6); }
.loja__bloco h3 { margin-bottom: var(--e-3); }
.loja__endereco { font-style: normal; color: var(--cor-texto-suave); }
.loja__contato { display: grid; gap: var(--e-2); margin-top: var(--e-4); }
.loja__contato a {
  display: inline-flex;
  align-items: center;
  gap: var(--e-3);
  font-weight: 500;
  text-decoration: none;
}
.loja__contato a:hover { text-decoration: underline; }
.loja__contato svg { width: 18px; height: 18px; color: var(--violeta-500); flex: none; }

.horarios { width: 100%; border-collapse: collapse; margin-top: var(--e-4); }
.horarios th { text-align: left; font-weight: 400; }
.horarios th, .horarios td {
  padding: var(--e-3) 0;
  border-bottom: 1px solid var(--cor-borda-sutil);
  font-size: var(--t-base);
  color: var(--cor-texto-suave);
}
.horarios td { text-align: right; font-variant-numeric: tabular-nums; }
.horarios tr[data-hoje="true"] th,
.horarios tr[data-hoje="true"] td { color: var(--violeta-700); font-weight: 600; }
.horarios tr[data-hoje="true"] th::after {
  content: "hoje";
  margin-left: var(--e-3);
  padding: 0.1rem 0.45rem;
  border-radius: var(--raio-sm);
  background: var(--violeta-100);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.loja__mapa {
  border: 1px solid var(--cor-borda-sutil);
  border-radius: var(--raio-lg);
  overflow: hidden;
  box-shadow: var(--sombra-md);
  background: var(--areia-200);
}
.loja__mapa iframe { display: block; width: 100%; height: 420px; border: 0; }

/* — FAQ — */
.faq { max-width: 860px; }
.faq details {
  border-bottom: 1px solid var(--cor-borda-sutil);
}
.faq details:first-of-type { border-top: 1px solid var(--cor-borda-sutil); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-5);
  padding: var(--e-5) 0;
  list-style: none;
  cursor: pointer;
  font-family: var(--fonte-titulo);
  font-size: var(--t-lg);
  font-weight: 500;
  line-height: 1.35;
  transition: color var(--dur-media) var(--ease-padrao);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--violeta-700); }
.faq summary .cruz {
  position: relative;
  width: 20px; height: 20px;
  flex: none;
  transition: transform var(--dur-media) var(--ease-saida);
}
.faq summary .cruz::before,
.faq summary .cruz::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1.5px;
  background: var(--violeta-500);
  border-radius: 2px;
  transition: transform var(--dur-media) var(--ease-saida);
}
.faq summary .cruz::after { transform: rotate(90deg); }
.faq details[open] summary .cruz::after { transform: rotate(0deg); }
.faq__resposta { overflow: hidden; }
.faq__resposta p {
  padding-bottom: var(--e-5);
  color: var(--cor-texto-suave);
  max-width: 68ch;
  margin: 0;
}

/* — Instagram — */
.insta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-6);
  padding: var(--e-8);
  border-radius: var(--raio-lg);
  background:
    radial-gradient(90% 140% at 100% 0%, var(--violeta-800) 0%, transparent 60%),
    linear-gradient(120deg, var(--violeta-950), var(--violeta-900));
  color: #fff;
}
.insta h2 { color: #fff; font-size: var(--t-2xl); margin-bottom: var(--e-3); max-width: 20ch; }
.insta p { color: rgba(255, 255, 255, 0.74); max-width: 46ch; margin: 0; }
.insta__perfil {
  font-family: var(--fonte-titulo);
  font-size: var(--t-lg);
  color: var(--violeta-300);
  margin-bottom: var(--e-2);
  display: block;
}

/* ==========================================================================
   08. CTA FINAL, RODAPÉ, WHATSAPP FLUTUANTE
   ========================================================================== */

.cta-final {
  position: relative;
  isolation: isolate;
  background: var(--violeta-700);
  color: #fff;
  overflow: hidden;
}
.cta-final::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(70% 120% at 15% 0%, var(--violeta-500) 0%, transparent 55%),
    radial-gradient(60% 100% at 95% 100%, var(--violeta-900) 0%, transparent 60%);
}
.cta-final h2 { font-size: var(--t-3xl); color: #fff; margin-bottom: var(--e-5); max-width: 18ch; }
.cta-final p { color: rgba(255, 255, 255, 0.8); max-width: 52ch; margin-bottom: var(--e-7); }

.rodape { background: var(--violeta-950); color: rgba(247, 244, 242, 0.7); padding-block: var(--e-9) var(--e-6); }
.rodape__grade {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--e-7) var(--e-6);
  padding-bottom: var(--e-8);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.rodape img { width: 210px; margin-bottom: var(--e-5); }
.rodape h4 {
  font-family: var(--fonte-texto);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: var(--e-4);
}
.rodape ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-3); }
.rodape a { color: rgba(247, 244, 242, 0.78); text-decoration: none; font-size: var(--t-base); }
.rodape a:hover { color: #fff; text-decoration: underline; }
.rodape__fim {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-4) var(--e-6);
  justify-content: space-between;
  padding-top: var(--e-6);
  font-size: var(--t-sm);
  color: rgba(247, 244, 242, 0.5);
}
.rodape__fim p { margin: 0; }

/* Botão flutuante do WhatsApp */
.zap-flutuante {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: calc(clamp(1rem, 3vw, 2rem) + env(safe-area-inset-bottom, 0px));
  z-index: var(--z-flutuante);
  display: inline-flex;
  align-items: center;
  gap: var(--e-3);
  min-height: 56px;
  padding: 0 1.25rem;
  border-radius: var(--raio-pill);
  background: var(--zap);
  color: #fff;
  font-size: var(--t-sm);
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 8px 28px rgba(29, 168, 81, 0.36);
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px) scale(0.94);
  transition:
    opacity var(--dur-lenta) var(--ease-saida),
    transform var(--dur-lenta) var(--ease-saida),
    visibility var(--dur-lenta),
    background-color var(--dur-media) var(--ease-padrao);
}
.zap-flutuante.is-visivel { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.zap-flutuante:hover { background: var(--zap-hover); color: #fff; }
.zap-flutuante svg { width: 24px; height: 24px; flex: none; }

/* ==========================================================================
   09. ANIMAÇÃO — estados de entrada
   Elementos com [data-revelar] começam ocultos e são animados pelo anime.js.
   A classe .js-ativo só existe quando o JS roda: sem JS, nada fica invisível.
   ========================================================================== */

.js-ativo [data-revelar] {
  opacity: 0;
  transform: translateY(22px);
  will-change: opacity, transform;
}
.js-ativo [data-revelar].is-visivel { will-change: auto; }

.js-ativo .hero h1 .linha > span { transform: translateY(105%); }

/* ==========================================================================
   10. RESPONSIVO
   ========================================================================== */

@media (max-width: 1024px) {
  .historia { grid-template-columns: 1fr; }
  .historia__figura { max-width: 460px; }
  .loja { grid-template-columns: 1fr; }
  .loja__mapa iframe { height: 340px; }
}

@media (max-width: 860px) {
  .cabecalho__nav { display: none; }
  .menu-btn { display: inline-flex; }
  .hero__conteudo { min-height: auto; padding-bottom: var(--e-7); }
  .hero__acoes { margin-bottom: var(--e-8); }
  .hero__acoes .btn { flex: 1 1 100%; }
  .rodape__grade { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}

@media (max-width: 560px) {
  :root {
    --t-md: 1rem;
    --t-4xl: clamp(1.95rem, 1.05rem + 3.8vw, 2.6rem);
  }

  /* O selo de status e a localização não cabem lado a lado dentro de uma
     pílula nesta largura — viram duas linhas sem a moldura. */
  .hero__kicker {
    display: grid;
    justify-items: start;
    gap: var(--e-3);
    padding: 0;
    border: 0;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .hero__numeros { grid-template-columns: repeat(2, 1fr); }
  .insta { padding: var(--e-6) var(--e-5); }
  .depoimento { padding: var(--e-6) var(--e-5); }
  .zap-flutuante span { display: none; }
  .zap-flutuante { padding: 0; width: 56px; justify-content: center; }
}

/* ==========================================================================
   MOVIMENTO REDUZIDO
   ========================================================================== */

@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;
  }
  .js-ativo [data-revelar] { opacity: 1; transform: none; }
  .js-ativo .hero h1 .linha > span { transform: none; }
}

/* ==========================================================================
   IMPRESSÃO
   ========================================================================== */

@media print {
  .cabecalho, .zap-flutuante, .hero__cena, .menu-painel, .tecido-camada, .fundo-tecido { display: none !important; }
  .hero--3d::after { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .hero, .secao-escura, .cta-final, .rodape, .insta { background: #fff !important; color: #000 !important; }
  .hero h1, .secao-escura h2, .cta-final h2, .insta h2 { color: #000 !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}