/* ==========================================================================
   EMIGÊ — Design System (site novo)
   Base: Brand System v1.1 · 2026
   Mobile-first · persona 35–54 · corpo ≥17px · alvos ≥48px · contraste AA
   ========================================================================== */

/* ---- TOKENS ------------------------------------------------------------- */
:root {
  /* Paleta (papéis, não decoração) */
  --offwhite:  #FAF9F2;  /* fundo padrão · nunca branco puro */
  --green:     #E7ECB4;  /* assinatura + fundo · NUNCA texto/botão */
  --black:     #000000;  /* texto, títulos, logo */
  --terracota: #945F49;  /* ação: CTA, botão, preço, links */
  --musgo:     #4B4E1F;  /* texto sobre verde */
  --concreto:  #675C5A;  /* texto secundário, bordas */

  /* Derivados (só sombreamento de estados, mesma família) */
  --terracota-dark: #7c4d3b; /* hover/press do terracota */
  --terracota-ink:  #5f3a2c; /* terracota sobre verde, contraste extra */
  --line:      color-mix(in srgb, var(--concreto) 22%, transparent);
  --line-strong: color-mix(in srgb, var(--concreto) 40%, transparent);
  --shadow: 0 1px 2px rgba(43,32,28,.06), 0 12px 32px -12px rgba(43,32,28,.18);
  --shadow-lg: 0 2px 4px rgba(43,32,28,.08), 0 30px 60px -24px rgba(43,32,28,.28);

  /* Tipografia */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Space Mono", ui-monospace, "SFMono-Regular", monospace;

  /* Escala (mobile-first, corpo 17px) */
  --fs-display: clamp(2.4rem, 10.5vw, 4rem);
  --fs-h1:      clamp(2rem, 7.5vw, 3rem);
  --fs-h2:      clamp(1.45rem, 5vw, 2rem);
  --fs-h3:      clamp(1.2rem, 4vw, 1.5rem);
  --fs-body:    1.0625rem;   /* 17px */
  --fs-lead:    1.1875rem;   /* 19px */
  --fs-legenda: 0.9375rem;   /* 15px */
  --fs-rotulo:  0.75rem;     /* 12px mono */

  /* Espaço (marketing: generoso) */
  --space-1: .5rem;  --space-2: 1rem;  --space-3: 1.5rem;
  --space-4: 2rem;   --space-5: 3rem;  --space-6: 4rem;
  --space-7: 6rem;   --space-8: 8rem;
  --gutter: clamp(1.25rem, 5vw, 2rem);
  --maxw: 1180px;
  --maxw-text: 62ch;

  --radius: 14px;
  --radius-sm: 10px;
  --tap: 48px;                 /* alvo de toque mínimo */

  /* Arco: dome dos arcos da loja usado como moldura */
  --arch: 50% 50% var(--radius) var(--radius) / 26% 26% var(--radius) var(--radius);
  --arch-tall: 50% 50% var(--radius) var(--radius) / 16% 16% var(--radius) var(--radius);

  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --dur: 380ms;
}

/* ---- RESET -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--black);
  background: var(--offwhite);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
/* grain global sutil (≤ .04) */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 2000; pointer-events: none; opacity: .03;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 240px 240px;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--terracota); text-decoration-thickness: 1px; text-underline-offset: 3px; }
button, input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--terracota); outline-offset: 3px; border-radius: 4px; }

/* ---- TIPOGRAFIA --------------------------------------------------------- */
h1, h2, h3, h4, .display {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--black);
  text-wrap: balance;
}
.display { font-weight: 600; font-size: var(--fs-display); line-height: 1.02; }
/* itálico de destaque em títulos: sempre terracota (nunca verde) */
h1 em, h2 em, .display em { color: var(--terracota); font-style: italic; }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: 600; }
p { max-width: var(--maxw-text); }
.lead { font-size: var(--fs-lead); line-height: 1.55; color: color-mix(in srgb, var(--black) 88%, var(--concreto)); }
.legenda { font-size: var(--fs-legenda); color: var(--concreto); }

/* Rótulo mono — preço, etiqueta, eyebrow (≤5 palavras) */
.rotulo {
  font-family: var(--font-mono);
  font-size: var(--fs-rotulo);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--concreto);
}
.rotulo--terra { color: var(--terracota); }
.preco { font-family: var(--font-mono); color: var(--terracota); font-weight: 700; }

/* ---- LAYOUT ------------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--space-6); }
.section--tight { padding-block: var(--space-5); }
.stack > * + * { margin-top: var(--space-3); }
.eyebrow { display: inline-flex; align-items: center; gap: .5rem; margin-bottom: var(--space-2); }
.eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--terracota); }

/* Fundo verde de assinatura */
.bg-green { background: var(--green); color: var(--musgo); }
.bg-green h1, .bg-green h2, .bg-green h3 { color: var(--musgo); }
.bg-green .rotulo { color: var(--terracota-ink); }
.bg-ink { background: #16130f; color: var(--offwhite); }
.bg-ink h1, .bg-ink h2, .bg-ink h3 { color: var(--offwhite); }
.bg-ink .legenda { color: color-mix(in srgb, var(--offwhite) 74%, transparent); }

/* ---- BOTÕES ------------------------------------------------------------- */
.btn {
  --fill: var(--terracota);
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: var(--tap);
  padding: .85rem 1.5rem;
  border: 1.5px solid var(--terracota);
  border-radius: 999px;
  background: var(--terracota);
  color: var(--offwhite);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
/* micro-preenchimento no hover: camada que sobe de baixo */
.btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--terracota-dark);
  transform: translateY(101%);
  transition: transform var(--dur) var(--ease-out);
}
.btn:hover::after, .btn:focus-visible::after { transform: translateY(0); }

.btn--ghost {
  background: transparent; color: var(--terracota);
}
.btn--ghost::after { background: var(--terracota); }
.btn--ghost:hover, .btn--ghost:focus-visible { color: var(--offwhite); }

.btn--onlight { box-shadow: var(--shadow); }
.btn--lg { padding: 1.05rem 1.9rem; font-size: 1.06rem; }
.btn--block { display: flex; width: 100%; }
.btn svg { width: 1.2em; height: 1.2em; }

/* link com afeto */
.tlink { color: var(--terracota); font-weight: 600; text-decoration: none;
  border-bottom: 1.5px solid color-mix(in srgb, var(--terracota) 40%, transparent);
  transition: border-color var(--dur) var(--ease-out); }
.tlink:hover { border-color: var(--terracota); }

/* ---- CORAÇÃO desenhado (terracota, nunca emoji) ------------------------- */
.heart { display: inline-block; width: 1em; height: 1em; color: var(--terracota); vertical-align: -0.12em; }

/* ---- MOLDURA EM ARCO (foto com máscara) --------------------------------- */
.arch {
  border-radius: var(--arch);
  overflow: hidden;
  position: relative;
  background:
    radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--terracota) 16%, var(--offwhite)), transparent 60%),
    linear-gradient(160deg, #efe7d6, #e3d6c4 60%, #d8c6b1);
}
.arch img, .arch video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.arch--tall { border-radius: var(--arch-tall); }
/* fina moldura interna que evoca o batente do arco */
.arch::after {
  content: ""; position: absolute; inset: 6px; border-radius: inherit;
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--offwhite) 55%, transparent);
  pointer-events: none;
}
/* Placeholder de foto: texto de apoio enquanto a foto real não entra */
.photo-note {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .4rem; text-align: center; padding: 1rem; color: var(--concreto);
}
.photo-note .rotulo { color: var(--terracota); }

/* ---- CARTÃO ------------------------------------------------------------- */
.card {
  background: var(--offwhite);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-3);
  box-shadow: var(--shadow);
}

/* ---- MOTION: reveal no scroll ------------------------------------------- */
.reveal { opacity: 0; transform: translateY(20px); }
.reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.reveal[data-delay="1"].is-in { transition-delay: 70ms; }
.reveal[data-delay="2"].is-in { transition-delay: 140ms; }
.reveal[data-delay="3"].is-in { transition-delay: 210ms; }

/* ---- MARQUEE (Space Mono, lento) ---------------------------------------- */
.marquee {
  overflow: hidden; border-block: 1px solid var(--line);
  background: var(--green); color: var(--musgo);
  padding-block: .8rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
  display: inline-flex; gap: 2.5rem; white-space: nowrap;
  font-family: var(--font-mono); font-size: .8rem; letter-spacing: .22em; text-transform: uppercase;
  will-change: transform;
  animation: marquee 42s linear infinite;
}
.marquee__track span { display: inline-flex; align-items: center; gap: 2.5rem; }
.marquee__track span::after { content: "·"; color: var(--terracota); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ==========================================================================
   LANÇAMENTO DA CALCULADORA — tag "novo" no menu e barra fina
   (tag-novo: remover após 30 dias do lançamento, até 11/08/2026;
    launch-bar: auto-expira em 26/07/2026 via DATA_FIM_BANNER no emige.js)
   ========================================================================== */
.tag-novo {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--terracota);
  border: 1px solid color-mix(in srgb, var(--terracota) 45%, transparent);
  border-radius: 999px;
  padding: .1rem .45rem;
  margin-left: .3rem;
  vertical-align: middle;
  white-space: nowrap;
}

/* Barra em fluxo normal, acima do header: empurra a página, nunca sobrepõe.
   O header sticky assume o topo assim que ela rola pra fora. */
.launch-bar {
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  padding: .35rem var(--gutter);
  background: var(--offwhite);
  border-bottom: 1px solid var(--line);
  color: var(--terracota);
  font-size: .875rem; /* 14px */
  line-height: 1.35;
  text-align: center;
}
.launch-bar[hidden] { display: none; }
.launch-bar p { max-width: none; }
.launch-bar a { color: var(--terracota); font-weight: 600; }
.launch-bar__close {
  flex: none; display: grid; place-items: center;
  width: 40px; height: 40px; margin-block: -.35rem;
  background: transparent; border: 0; cursor: pointer; color: var(--terracota);
  border-radius: 999px;
}
.launch-bar__close svg { width: 16px; height: 16px; }
.launch-bar__close:hover { background: color-mix(in srgb, var(--terracota) 10%, transparent); }

/* Tag de papelão da home (bloco permanente da calculadora): mesma tag da
   calculadora, com "?" dentro e balanço sutil */
.tag-pegada { display: grid; justify-items: center; }
.tag-pegada__string { width: 1.5px; height: 30px; background: var(--concreto); }
.tag-pegada__body {
  position: relative;
  display: grid; place-items: center;
  width: 190px; height: 326px;
  background: var(--offwhite);
  border-radius: 95px 95px 10px 10px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%);
  filter: drop-shadow(0 6px 10px rgba(43,32,28,.16));
  transform-origin: 50% -30px;
  animation: tag-pegada-sway 3.6s ease-in-out infinite;
}
.tag-pegada__outline { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.tag-pegada__outline path { fill: none; stroke: var(--terracota); stroke-width: 1.5; }
.tag-pegada__outline circle { fill: var(--offwhite); stroke: var(--musgo); stroke-width: 1.5; }
.tag-pegada__q {
  font-family: var(--font-display); font-weight: 600;
  font-size: 7rem; line-height: 1; color: var(--terracota);
}
@keyframes tag-pegada-sway {
  0%, 100% { transform: rotate(-2.4deg); }
  50% { transform: rotate(2.4deg); }
}

/* ==========================================================================
   HEADER / NAV
   ========================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 100; /* acima da cortina (z 40) */
  background: color-mix(in srgb, #FAF9F2 92%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease-out);
}
.site-header.is-stuck { border-color: var(--line); }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 64px; }
.brandmark {
  font-family: var(--font-display); font-weight: 600; font-size: 1.5rem;
  letter-spacing: .02em; color: var(--black); text-decoration: none; line-height: 1;
  display: inline-flex; align-items: center; min-height: 48px; /* alvo de toque */
}
.brandmark sup { font-size: .5em; font-weight: 500; top: -.9em; }
.brandmark img { height: 32px; width: auto; display: block; } /* 28–36px, alinhada aos links */
.footer-brand .brandmark img { height: 38px; }
.nav__links { display: none; }
.nav__cta { display: none; }
.nav__toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--tap); height: var(--tap); margin-right: -.6rem;
  background: transparent; border: 0; cursor: pointer; color: var(--black);
}
.nav__toggle svg { width: 26px; height: 26px; }

/* menu mobile (drawer simples) */
.menu {
  position: fixed; inset: 0; z-index: 120;
  background: var(--offwhite);
  transform: translateX(100%); visibility: hidden;
  transition: transform var(--dur) var(--ease-out), visibility var(--dur);
  display: flex; flex-direction: column;
  padding: var(--gutter);
}
.menu.is-open { transform: none; visibility: visible; }
.menu__top { display: flex; align-items: center; justify-content: space-between; min-height: 64px; }
.menu__links { display: flex; flex-direction: column; gap: .25rem; margin-top: var(--space-3); }
.menu__links a {
  font-family: var(--font-display); font-size: 1.9rem; color: var(--black);
  text-decoration: none; padding: .55rem 0; border-bottom: 1px solid var(--line);
}
.menu__links a[aria-current="page"] { color: var(--terracota); }
.menu__foot { margin-top: auto; padding-top: var(--space-3); }

@media (min-width: 880px) {
  .nav__toggle { display: none; }
  .nav__links { display: flex; align-items: center; gap: .35rem; }
  .nav__links a {
    text-decoration: none; color: var(--black); font-weight: 500;
    padding: .6rem .8rem; border-radius: 999px; font-size: .98rem;
    transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
  }
  .nav__links a:hover { background: color-mix(in srgb, var(--terracota) 10%, transparent); color: var(--terracota); }
  .nav__links a[aria-current="page"] { color: var(--terracota); }
  .nav__cta { display: inline-flex; }
}
/* com 6 itens + tag "novo", entre 880 e 1120px o menu aperta:
   reduzir gap e padding dos links, nunca o tamanho da fonte */
@media (min-width: 880px) and (max-width: 1120px) {
  .nav__links { gap: 0; }
  .nav__links a { padding: .6rem .5rem; }
}

/* ==========================================================================
   HERO — palco off-white; cortina abre UMA vez no load e nunca volta.
   Conteúdo é REVELADO (cortina em camada acima), nunca sobreposto.
   CSS puro (@keyframes + forwards): funciona mesmo sem JS.
   ========================================================================== */
.hero { position: relative; overflow: hidden; background: var(--offwhite); min-height: 100svh; display: grid; }
.hero__inner {
  position: relative; z-index: 2;
  align-content: center;
  padding-block: clamp(var(--space-5), 12vw, var(--space-7));
  display: grid; gap: var(--space-4);
}
.hero .display { max-width: 16ch; } /* itálicos herdam de "h1 em, h2 em" (tipografia) · AA ~5:1 */
.hero__sub { max-width: 46ch; }
.hero__cta { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }
@media (min-width: 880px) { .hero__inner { max-width: 72%; } }

/* --- Palco do hero: foto real atrás do conteúdo, revelada pela cortina.
       Véu off-white (.62–.78) garante AA do texto por cima. --- */
.hero__stage { position: absolute; inset: 0; z-index: 1; }
.hero__stage img { width: 100%; height: 100%; object-fit: cover; }
/* faixa de legibilidade: mobile cobre mais área (texto sobre base sólida) */
.hero__stage::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(250,249,242,.94) 0%,
    rgba(250,249,242,.88) 60%,
    rgba(250,249,242,.72) 100%);
}
/* desktop: sólido à esquerda (~55%), esmaecendo pra direita */
@media (min-width: 880px) {
  .hero__stage::after {
    background: linear-gradient(90deg,
      var(--offwhite) 0%,
      var(--offwhite) 40%,
      rgba(250,249,242,.86) 55%,
      rgba(250,249,242,.35) 78%,
      rgba(250,249,242,.08) 100%);
  }
}

/* --- Cortina: duas folhas ACIMA do conteúdo; abrem em t=0,4s e somem --- */
.curtain-leaf {
  position: absolute; top: 0; bottom: 0; width: 51%;
  z-index: 40; pointer-events: none;
  background: repeating-linear-gradient(90deg,
    #a06952 0 12px, #8a5843 12px 24px, #77492f 24px 31px, #8a5843 31px 44px);
  will-change: transform;
}
.curtain-leaf::before { /* sombreamento do tecido */
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.30), transparent 24%, transparent 74%, rgba(0,0,0,.34)),
    radial-gradient(140% 55% at 50% -8%, rgba(255,240,225,.18), transparent 55%);
}
.curtain--left  { left: 0;  box-shadow: 6px 0 18px -6px rgba(43,32,28,.35);
  animation: curtain-open-l 1.4s cubic-bezier(.2,.7,.2,1) .4s forwards; }
.curtain--right { right: 0; box-shadow: -6px 0 18px -6px rgba(43,32,28,.35);
  animation: curtain-open-r 1.4s cubic-bezier(.2,.7,.2,1) .4s forwards; }
@keyframes curtain-open-l { to { transform: translateX(-101%); visibility: hidden; } }
@keyframes curtain-open-r { to { transform: translateX(101%);  visibility: hidden; } }

/* --- Coreografia do conteúdo: palavras do H1 (t=0,9s, stagger 80ms) --- */
.hero .display .w {
  display: inline-block; opacity: 0; transform: translateY(.6em);
  animation: word-in .55s var(--ease-out) forwards;
  animation-delay: calc(.9s + var(--i, 0) * 80ms);
}
@keyframes word-in { to { opacity: 1; transform: none; } }
/* lead, CTAs e meta (t≈1,6s) */
.hero-in { opacity: 0; animation: fade-up .6s var(--ease-out) forwards; animation-delay: var(--d, 1.6s); }
@keyframes fade-up { from { transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* --- Convite ao scroll: "fio de linha" — aparece após a cortina abrir --- */
.scroll-thread {
  position: absolute; left: 50%; bottom: 20px; z-index: 2;
  width: 1.5px; height: 62px; transform: translateX(-50%);
  background: linear-gradient(180deg, var(--terracota), transparent);
  opacity: 0; animation: fade-up .8s ease-out 2s forwards;
}
.scroll-thread::before { content: ""; position: absolute; top: -5px; left: 50%; transform: translateX(-50%);
  width: 7px; height: 7px; border-radius: 50%; background: var(--terracota); }
.scroll-thread.is-gone { animation: none; opacity: 0; transition: opacity .4s ease; }

/* --- HERO CURTO (páginas internas: sem cortina, entrada cinética antecipada) --- */
.hero--short { min-height: 0; }
.hero--short .hero__inner { padding-block: clamp(var(--space-5), 10vw, var(--space-7)) var(--space-5); }
.hero--short .display .w { animation-delay: calc(.15s + var(--i, 0) * 80ms); }

/* ==========================================================================
   OS TRÊS CAMINHOS (como comprar)
   ========================================================================== */
.paths { display: grid; gap: var(--space-3); }
.path-card { display: flex; flex-direction: column; align-items: flex-start; gap: .8rem; }
.path-card h2 { font-size: var(--fs-h3); font-weight: 600; }
.path-card p { color: var(--concreto); }
.path-card .btn { margin-top: .4rem; }
@media (min-width: 900px) {
  .paths { grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
  .path-card .btn { margin-top: auto; }
}

/* ==========================================================================
   SACOLINHA — passos costurados por um fio (desenha no scroll)
   ========================================================================== */
.sewsteps { position: relative; display: grid; gap: var(--space-4); counter-reset: step; }
.sewsteps .step { position: relative; z-index: 1; }
.sew {
  position: absolute; top: 22px; bottom: 22px; left: 0; width: 44px;
  z-index: 0; pointer-events: none; overflow: visible;
}
.sew path { fill: none; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.sew__line { stroke: var(--terracota); stroke-dasharray: 5 6; } /* linha de costura */
.sew__reveal { stroke: #fff; stroke-width: 6; }
/* números apoiados no fundo verde, com contraste reforçado */
.bg-green .step__n { background: var(--green); color: var(--terracota-ink); border-color: var(--terracota-ink); }

/* ==========================================================================
   PAGAMENTO E RECEBIMENTO — duas colunas
   ========================================================================== */
.duo { display: grid; gap: var(--space-3); }
.duo__item { display: flex; gap: var(--space-2); align-items: flex-start; }
.duo__icon {
  flex: none; width: 48px; height: 48px; display: grid; place-items: center;
  border: 1.5px solid var(--terracota); border-radius: 999px; color: var(--terracota);
}
.duo__icon svg { width: 22px; height: 22px; }
.duo__item p { color: var(--concreto); }
@media (min-width: 880px) { .duo { grid-template-columns: 1fr 1fr; gap: var(--space-5); } }

/* link terracota sobre fundo escuro */
.bg-ink .tlink { color: var(--offwhite); border-color: rgba(250,249,242,.4); }
.bg-ink .tlink:hover { border-color: var(--offwhite); }

/* ==========================================================================
   IMPRENSA — logos reais clicáveis (grayscale → cor no hover/foco)
   ========================================================================== */
.press-logos {
  display: grid; grid-template-columns: repeat(2, auto);
  gap: var(--space-3) var(--space-5); justify-content: center; align-items: center;
}
.press-logos a { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; min-width: 48px; }
.press-logos img {
  height: 28px; width: auto; display: block;
  filter: grayscale(1); opacity: .7;
  transition: filter var(--dur) var(--ease-out), opacity var(--dur) var(--ease-out);
}
.press-logos a:hover img, .press-logos a:focus-visible img { filter: none; opacity: 1; }
@media (min-width: 720px) { .press-logos { display: flex; justify-content: center; gap: var(--space-6); } }

/* linha de luxo da arara: texto corrido, tipografia menor */
.lux-line { font-size: .95rem; color: var(--concreto); max-width: 60ch; }

/* ==========================================================================
   POLÍTICAS — página de texto legível
   ========================================================================== */
.prose { max-width: 70ch; }
.prose p + p { margin-top: var(--space-2); }
.prose ul { margin: var(--space-2) 0 0 1.2rem; padding: 0; display: grid; gap: .6rem; }
.prose strong { font-weight: 600; }

/* ==========================================================================
   DESAPEGUE — mini-cards da curadoria (sobre verde) + trio de razões
   ========================================================================== */
.minis { display: grid; gap: var(--space-2); grid-template-columns: 1fr 1fr; }
.mini {
  background: color-mix(in srgb, var(--offwhite) 55%, transparent);
  border: 1px solid color-mix(in srgb, var(--musgo) 20%, transparent);
  border-radius: var(--radius-sm);
  padding: var(--space-2);
  display: grid; gap: .35rem; align-content: start;
}
.mini h3 { font-size: 1.15rem; }
@media (min-width: 880px) { .minis { grid-template-columns: repeat(4, 1fr); gap: var(--space-3); } }

.trio { display: grid; gap: var(--space-3); }
@media (min-width: 880px) { .trio { grid-template-columns: repeat(3, 1fr); gap: var(--space-4); } }

/* ==========================================================================
   PROVA SOCIAL REAL — âncora 4,8★ + depoimentos
   ========================================================================== */
.rating-anchor { display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem 1.2rem; }
.rating-anchor .num { font-family: var(--font-display); font-weight: 600; font-size: clamp(3rem, 12vw, 4.5rem); color: var(--terracota); line-height: 1; }
.rating-anchor .num .u { font-size: .45em; }
.tgrid { display: grid; gap: var(--space-3); }
.tcard {
  position: relative; padding: var(--space-3);
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--offwhite); box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: .8rem; height: 100%;
}
.tcard .stars { display: inline-flex; gap: 3px; color: var(--terracota); }
.tcard .stars svg { width: 16px; height: 16px; }
.tcard blockquote { text-wrap: pretty; }
.tcard .who { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--concreto); margin-top: auto; padding-top: .4rem; }
@media (min-width: 900px) { .tgrid { grid-template-columns: repeat(3, 1fr); align-items: stretch; } }

/* ==========================================================================
   IMPACTO — faixa fina (home) + big numbers (nossa história)
   ========================================================================== */
.impact-band {
  background: var(--green); color: var(--musgo);
  border-bottom: 1px solid color-mix(in srgb, var(--musgo) 22%, transparent);
  padding-block: clamp(4rem, 9vw, 5rem);   /* respiro generoso */
  text-align: center;
}
.impact-band .wrap { display: grid; justify-items: center; gap: .4rem; max-width: 44ch; }
.impact-band__label {
  font-family: var(--font-mono); font-size: var(--fs-rotulo);
  letter-spacing: .2em; text-transform: uppercase; color: var(--musgo);
}
.impact-band__num {
  max-width: none; margin-top: .3rem; line-height: .95;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(3.5rem, 12vw, 6rem); color: var(--terracota);
  font-variant-numeric: tabular-nums;      /* menos jitter no count-up */
}
.impact-band__desc {
  max-width: none;
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.15rem, 3.4vw, 1.5rem); color: var(--musgo);
}
.impact-band__link {
  display: inline-flex; align-items: center; gap: .5rem;
  margin-top: 1.1rem; padding-block: .4rem;
  color: var(--terracota); font-weight: 600; text-decoration: none;
  border-bottom: 1.5px solid color-mix(in srgb, var(--terracota) 40%, transparent);
}
.impact-band__link svg { width: 1em; height: 1em; }
.impact-band__link:hover, .impact-band__link:focus-visible { border-color: var(--terracota); }

.proof__sub { margin-top: .3rem; font-size: .85rem; color: var(--concreto); }

/* Big numbers do impacto: ritmo tipográfico, sem caixas nem sombras */
.impact-grid { display: grid; gap: var(--space-4) var(--space-3); grid-template-columns: 1fr 1fr; text-align: center; }
@media (min-width: 880px) { .impact-grid { grid-template-columns: repeat(4, 1fr); } }
.impact-item .n { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.9rem, 7vw, 2.6rem); color: var(--terracota-ink); line-height: 1; }
.impact-item .n .u { font-size: .55em; }
.impact-item .lbl { margin-top: .5rem; }
.impact-item .sub { margin-top: .35rem; font-size: .85rem; color: var(--concreto); max-width: none; }
.impact-item .sub [data-count] { font-weight: 600; color: var(--terracota-ink); }

/* ==========================================================================
   NOSSA HISTÓRIA — fio de costura vertical + capítulos
   ========================================================================== */
.story { position: relative; --thread-x: 22px; --pad: 40px; padding-left: var(--pad); }
@media (min-width: 900px) { .story { --pad: 96px; --thread-x: 44px; } }
.storythread { position: absolute; left: calc(var(--thread-x) - 10px); top: 0; width: 20px; height: 100%; z-index: 1; pointer-events: none; overflow: visible; }
.storythread path { fill: none; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.storythread__line { stroke: var(--terracota); stroke-dasharray: 3 7; }      /* ponto de costura */
.storythread__reveal { stroke: #fff; stroke-width: 6; }                       /* máscara: cheia por padrão (sem JS = desenhado) */

.chapter { position: relative; z-index: 2; }
.chapter + .chapter { margin-top: var(--space-6); }
/* nó terracota sobre o fio, alinhado ao marcador */
.chapter::before {
  content: ""; position: absolute; top: .45rem;
  left: calc(var(--thread-x) - var(--pad)); margin-left: -5.5px;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--offwhite); border: 1.5px solid var(--terracota); z-index: 3;
}
.chapter__mark {
  display: block; margin-bottom: var(--space-2);
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--terracota);
}
.chapter__body { max-width: var(--maxw-text); }
.chapter__body > * + * { margin-top: var(--space-2); }
.chapter__media { margin-top: var(--space-3); max-width: 400px; }
.chapter--green .chapter__body {
  background: var(--green); color: var(--musgo);
  border-radius: var(--radius); padding: var(--space-4); max-width: none;
}
.chapter--green .chapter__body h2 { color: var(--musgo); }
.chapter__transition { font-family: var(--font-display); font-style: italic; font-size: var(--fs-h3); color: var(--terracota); max-width: 24ch; margin-bottom: var(--space-3); }
@media (prefers-reduced-motion: reduce) {
  .storythread__reveal { stroke-dasharray: none; stroke-dashoffset: 0; }
}

/* Pictogramas de linha única: desenham no reveal (dasharray/dashoffset) */
.picto { display: block; width: 42px; height: 42px; margin: 0 auto .7rem; color: var(--terracota-ink); overflow: visible; }
.picto path {
  fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: var(--len); stroke-dashoffset: var(--len); /* sem JS, --len não existe: linha já desenhada */
  transition: stroke-dashoffset 900ms var(--ease-out);
}
.picto.is-drawn path { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) {
  .picto path { stroke-dasharray: none; stroke-dashoffset: 0; transition: none; }
}

/* ==========================================================================
   A LOJA — galeria com parallax sutil (≤12px, JS) + prova com 2 itens
   ========================================================================== */
.gallery { display: grid; gap: var(--space-2); }
.gallery .arch { aspect-ratio: 3 / 4; will-change: transform; }
@media (min-width: 880px) { .gallery { grid-template-columns: repeat(3, 1fr); gap: var(--space-3); } }

.proof--2 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 720px) { .proof--2 { grid-template-columns: repeat(2, 1fr); } }

/* ==========================================================================
   PROVA SOCIAL — count-up
   ========================================================================== */
.proof { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border-block: 1px solid var(--line); }
.proof__item { background: var(--offwhite); padding: var(--space-3) var(--space-2); text-align: center; }
.proof__num { font-family: var(--font-display); font-weight: 600; font-size: clamp(2rem, 8vw, 2.8rem); color: var(--terracota); line-height: 1; }
.proof__num .u { font-size: .5em; }
.proof__label { margin-top: .5rem; }
.press { display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; align-items: center; justify-content: center; }
.press span { font-family: var(--font-display); font-weight: 500; color: var(--concreto); font-size: 1.05rem; letter-spacing: .01em; }
@media (min-width: 720px) { .proof { grid-template-columns: repeat(4, 1fr); } }

/* ==========================================================================
   ARARA DE ETIQUETAS — trilho + swing tags de marca (só texto, sem logo)
   Balanço sutil via --sway (JS, máx 4°, decai a zero). Snap no touch.
   ========================================================================== */
.arara { position: relative; margin-top: var(--space-4); }
.arara__rail {
  position: absolute; top: 10px; left: var(--gutter); right: var(--gutter);
  height: 5px; border-radius: 999px;
  background: linear-gradient(180deg, #a29a93, var(--concreto));
  box-shadow: 0 1px 2px rgba(43,32,28,.3);
}
.arara__track {
  list-style: none; margin: 0; display: flex; gap: 1.1rem;
  overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
  padding: 0 var(--gutter) var(--space-3);
  scrollbar-width: thin; scrollbar-color: var(--terracota) transparent;
}
.arara__track li { flex: none; scroll-snap-align: center; }
.tag {
  display: block; text-decoration: none; color: inherit;
  transform: rotate(calc(var(--sway, 0) * 1deg));
  transform-origin: 50% 60px; /* giro a partir do furo do cordão */
  will-change: transform;
}
.arara__track li:nth-child(even) .tag { transform: rotate(calc(var(--sway, 0) * -0.8deg)); }
.tag__string { display: block; width: 1.5px; height: 26px; margin: 0 auto; background: var(--concreto); position: relative; }
.tag__string::before { /* gancho no trilho */
  content: ""; position: absolute; top: -9px; left: 50%; transform: translateX(-50%);
  width: 10px; height: 10px; border: 1.5px solid var(--concreto); border-radius: 50%;
}
/* réplica da swing tag física: verde, topo em arco, furo, chanfro inferior direito */
.tag__body {
  position: relative;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  width: 190px; height: 326px;                 /* proporção ~0,58 da tag real */
  padding: 62px 18px 24px;
  background: var(--green);
  border-radius: 95px 95px 10px 10px;          /* laterais retas + domo no topo */
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%); /* chanfro */
  filter: drop-shadow(0 6px 10px rgba(43,32,28,.16));
  transition: filter var(--dur) var(--ease-out);
}
.tag:hover .tag__body, .tag:focus-visible .tag__body { filter: drop-shadow(0 10px 16px rgba(43,32,28,.28)); }
.tag__outline { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.tag__outline path { fill: none; stroke: var(--terracota); stroke-width: 1.5; }
.tag__outline circle { fill: var(--offwhite); stroke: var(--musgo); stroke-width: 1.5; }
.tag__logo { height: 19px; width: auto; display: block; }  /* terracota, +27% */
.tag__brand {
  margin: auto 0;                              /* protagonista, centro da tag */
  height: 58px;                                /* bloco travado: nomes alinham na mesma altura */
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 600;
  font-size: 1.7rem; line-height: 1.05; color: var(--terracota);
  white-space: nowrap;
}
.tag__brand--long { font-size: 1.26rem; }      /* duas palavras longas: cabe em 1 linha */
.tag__cat {
  min-height: 32px;                            /* 1 ou 2 linhas ocupam o mesmo bloco */
  display: flex; align-items: flex-end; justify-content: center;
  font-family: var(--font-mono); font-size: .64rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--musgo); max-width: 100%;
}

/* ==========================================================================
   COMO FUNCIONA — 3 passos
   ========================================================================== */
.steps { display: grid; gap: var(--space-3); counter-reset: step; }
.step { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2); align-items: start; }
.step__n {
  counter-increment: step;
  width: 44px; height: 44px; flex: none;
  display: grid; place-items: center;
  border: 1.5px solid var(--terracota); border-radius: 999px;
  font-family: var(--font-mono); font-weight: 700; color: var(--terracota);
}
.step__n::before { content: counter(step, decimal-leading-zero); }
@media (min-width: 720px) { .steps { grid-template-columns: repeat(3, 1fr); } }

/* ==========================================================================
   BLOCO LIVE / LOJA / DESAPEGUE / CAPTURA
   ========================================================================== */
.split { display: grid; gap: var(--space-4); align-items: center; }
@media (min-width: 880px) { .split { grid-template-columns: 1fr 1fr; gap: var(--space-6); } .split--media-first > .split__media { order: -1; } }

.map-embed { border: 0; width: 100%; aspect-ratio: 4 / 3; border-radius: var(--radius); filter: grayscale(.15) contrast(1.02); }

/* Cartão de localização (auto-suficiente, sempre renderiza) */
.mapcard {
  position: relative; display: block; text-decoration: none; color: inherit;
  aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg, color-mix(in srgb,var(--green) 40%, var(--offwhite)), var(--offwhite)),
    var(--offwhite);
  box-shadow: var(--shadow);
  transition: transform var(--dur) var(--ease-out);
}
.mapcard:hover { transform: translateY(-3px); }
.mapcard::before { /* malha de ruas sutil */
  content: ""; position: absolute; inset: 0; opacity: .5;
  background:
    linear-gradient(90deg, transparent 49.5%, color-mix(in srgb,var(--concreto) 22%, transparent) 50%, transparent 50.5%) 0 0/64px 64px,
    linear-gradient(0deg, transparent 49.5%, color-mix(in srgb,var(--concreto) 18%, transparent) 50%, transparent 50.5%) 0 0/64px 64px,
    linear-gradient(35deg, transparent 49%, color-mix(in srgb,var(--terracota) 30%, transparent) 50%, transparent 51%) -20px 0/220px 220px;
}
.mapcard__pin { position: absolute; top: 42%; left: 50%; transform: translate(-50%,-50%);
  width: 46px; height: 46px; color: var(--terracota); filter: drop-shadow(0 6px 8px rgba(43,32,28,.3)); }
.mapcard__label { position: absolute; left: 12px; right: 12px; bottom: 12px;
  background: color-mix(in srgb, var(--offwhite) 94%, transparent); border: 1px solid var(--line);
  border-radius: 10px; padding: .7rem .9rem; display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.mapcard__label .place { font-family: var(--font-display); font-weight: 600; color: var(--black); font-size: 1.05rem; line-height: 1.15; }
.mapcard__label .addr { color: var(--concreto); font-size: .82rem; }
.mapcard__label .go { flex: none; color: var(--terracota); width: 22px; height: 22px; }

.capture form { display: flex; flex-direction: column; gap: .8rem; max-width: 460px; }
.capture .row { display: flex; flex-direction: column; gap: .4rem; }
.capture label { font-weight: 600; font-size: .98rem; }
.capture input {
  min-height: var(--tap); padding: .7rem 1rem;
  border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--offwhite);
}
.capture input:focus-visible { border-color: var(--terracota); outline-offset: 1px; }
.capture .hint { font-size: .85rem; color: var(--concreto); }

/* ==========================================================================
   FAQ acordeão
   ========================================================================== */
.faq { border-top: 1px solid var(--line); max-width: 760px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.15rem 0; min-height: var(--tap);
  font-family: var(--font-display); font-size: 1.15rem; color: var(--black);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .chev {
  flex: none; width: 11px; height: 11px; margin-top: -5px;
  border-right: 1.5px solid var(--terracota); border-bottom: 1.5px solid var(--terracota);
  transform: rotate(45deg);
  transition: transform var(--dur) var(--ease-out), margin var(--dur) var(--ease-out);
}
.faq details[open] summary .chev { transform: rotate(225deg); margin-top: 5px; }
.faq details > div { padding-bottom: 1.2rem; }
.faq details > div p { color: var(--concreto); max-width: 60ch; }

/* ==========================================================================
   WHATSAPP flutuante global
   ========================================================================== */
.wa-float {
  position: fixed; z-index: 130;
  right: clamp(1rem, 4vw, 1.5rem); bottom: clamp(1rem, 4vw, 1.5rem);
  display: inline-flex; align-items: center; gap: .6rem;
  min-height: var(--tap); padding: .7rem .95rem;
  background: var(--terracota); color: var(--offwhite);
  border-radius: 999px; text-decoration: none; font-weight: 600;
  box-shadow: var(--shadow-lg);
  transition: transform var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
}
.wa-float:hover { background: var(--terracota-dark); transform: translateY(-2px); }
.wa-float svg { width: 24px; height: 24px; flex: none; }
.wa-float .label { display: none; }
@media (min-width: 560px) { .wa-float .label { display: inline; padding-right: .3rem; } }

/* ==========================================================================
   AVISO DE COOKIES (LGPD) — discreto, tokens da marca
   ========================================================================== */
.cookie-note {
  position: fixed; z-index: 140;
  left: clamp(1rem, 4vw, 1.5rem); bottom: clamp(1rem, 4vw, 1.5rem);
  max-width: min(360px, calc(100vw - 2rem));
  display: flex; align-items: center; gap: .9rem;
  padding: .9rem 1.1rem;
  background: var(--offwhite); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
}
.cookie-note[hidden] { display: none; }   /* o atributo hidden vence o display:flex acima */
.cookie-note p { font-size: .9rem; line-height: 1.45; max-width: none; }
.cookie-note .btn { min-height: 44px; padding: .55rem 1.15rem; flex: none; }
/* em telas estreitas, sobe pra não cobrir o botão flutuante do WhatsApp */
@media (max-width: 560px) {
  .cookie-note { right: clamp(1rem, 4vw, 1.5rem); bottom: calc(clamp(1rem, 4vw, 1.5rem) + 68px); }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer { background: #16130f; color: var(--offwhite); padding-block: var(--space-6) var(--space-4); }
.site-footer a { color: var(--offwhite); }
.footer-grid { display: grid; gap: var(--space-4); }
.footer-brand .brandmark { color: var(--offwhite); font-size: 1.8rem; }
.footer-col h2 { color: var(--offwhite); font-family: var(--font-body); font-weight: 600; font-size: .95rem; letter-spacing: .04em; text-transform: uppercase; margin-bottom: .8rem; opacity: .8; }
.footer-col ul { list-style: none; padding: 0; display: grid; gap: .5rem; }
.footer-col a { text-decoration: none; opacity: .86; }
.footer-col a:hover { opacity: 1; text-decoration: underline; }
.footer-bottom { margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid rgba(255,255,255,.14);
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; align-items: center; justify-content: space-between;
  font-size: .85rem; opacity: .7; }
@media (min-width: 720px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space-5); } }

/* ==========================================================================
   REDUCED MOTION — TODA animação desligada; site 100% funcional parado
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .reveal.is-in { opacity: 1; transform: none; transition: none; }
  .marquee__track { animation: none; transform: none; }
  .curtain-leaf, .scroll-thread { display: none; }
  .hero .display .w, .hero-in { opacity: 1; transform: none; animation: none; }
  .tag, .arara__track li:nth-child(even) .tag { transform: none !important; }
  .tag-pegada__body { animation: none; transform: none; }
  .btn::after { transition: none; }
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}