/* ==========================================================================
   BAMBU Agromarketing — sistema de design
   Paleta e elementos vêm de Bambu_Agromarketing_Proposta.pdf (identidade
   oficial, 10/09/2026). Acumin em todo o site; Acherus só no logotipo.
   ========================================================================== */

@font-face {
  font-family: 'Acumin';
  src: url('../fonts/web/acumin-var.woff2') format('woff2-variations');
  font-weight: 300 800; font-stretch: 50% 105%; font-display: swap;
}
@font-face {
  font-family: 'Acherus';           /* exclusiva do logotipo */
  src: url('../fonts/web/acherus-bold.woff2') format('woff2');
  font-weight: 700; font-display: swap;
}

:root {
  /* Cor — os seis hexadecimais da identidade, mais derivadas de trabalho. */
  --papel:  #fbfaf2;
  --creme:  #f8e4af;
  --limao:  #abcd30;
  --mata:   #2e4e05;
  --vinho:  #5a1b30;
  --carvao: #1d1d1d;

  --mata-claro: #3f6a08;
  --mata-fundo: #1f3603;
  --creme-2:    #f3ead2;
  --tinta:      #56663f;   /* texto de apoio sobre papel */
  --fio:        #e3e0cf;   /* única borda do tema claro */
  --fio-escuro: rgba(248,228,175,.16);

  /* Tipo — sete degraus. Nada entre eles. */
  --t-xs:   .75rem;
  --t-sm:   .875rem;
  --t-base: 1.0625rem;
  --t-md:   1.1875rem;
  --t-lg:   clamp(1.25rem, 1.12rem + .55vw, 1.5rem);
  --t-xl:   clamp(1.5rem, 1.31rem + .85vw, 2rem);
  --t-2xl:  clamp(2rem, 1.65rem + 1.6vw, 3rem);
  --t-3xl:  clamp(2.5rem, 1.95rem + 2.6vw, 4.25rem);

  /* Espaço — múltiplos de 4. */
  --e1: 4px;  --e2: 8px;   --e3: 12px;  --e4: 16px;  --e5: 24px;
  --e6: 32px; --e7: 48px;  --e8: 64px;  --e9: 96px;  --e10: 128px;

  --r-sm: 6px; --r-md: 14px; --r-lg: 24px; --r-pill: 999px;

  --sombra-1: 0 1px 2px rgba(31,54,3,.05), 0 4px 14px rgba(31,54,3,.05);
  --sombra-2: 0 18px 48px rgba(31,54,3,.14);

  --fonte: 'Acumin', ui-sans-serif, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --fonte-logo: 'Acherus', var(--fonte);

  --rapido: 160ms; --medio: 280ms; --lento: 520ms;
  --curva: cubic-bezier(.22,.7,.3,1);

  --largura: 1180px;
  --gutter: var(--e5);
  --header-h: 108px;
}

/* ── Base ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + var(--e5)); }
body {
  margin: 0; background: var(--papel); color: var(--carvao);
  font-family: var(--fonte); font-size: var(--t-base); line-height: 1.65;
  font-variation-settings: 'wght' 400, 'wdth' 100;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { max-width: 100%; display: block; }
img { height: auto; }
::selection { background: var(--limao); color: var(--mata-fundo); }
:focus-visible { outline: 3px solid var(--limao); outline-offset: 3px; border-radius: 2px; }

/* ── Tipografia ───────────────────────────────────────────────────────── */
h1, h2, h3, h4 { margin: 0 0 var(--e4); color: var(--mata); text-wrap: balance; }
h1 { font-size: var(--t-3xl); font-variation-settings: 'wght' 700, 'wdth' 66; line-height: 1.02; letter-spacing: -.022em; }
h2 { font-size: var(--t-2xl); font-variation-settings: 'wght' 700, 'wdth' 72; line-height: 1.08; letter-spacing: -.016em; }
h3 { font-size: var(--t-xl);  font-variation-settings: 'wght' 650, 'wdth' 86; line-height: 1.2;  letter-spacing: -.008em; }
h4 { font-size: var(--t-lg);  font-variation-settings: 'wght' 650, 'wdth' 92; line-height: 1.3; }
p { margin: 0 0 var(--e4); max-width: 68ch; }
p:last-child { margin-bottom: 0; }
strong, b { font-variation-settings: 'wght' 650, 'wdth' 98; }
small { font-size: var(--t-sm); }
a { color: var(--mata); text-decoration: underline; text-decoration-thickness: 1.5px;
    text-decoration-color: var(--limao); text-underline-offset: 4px;
    transition: color var(--rapido), text-decoration-color var(--rapido); }
a:hover { color: var(--mata-claro); text-decoration-color: var(--mata-claro); }

.lead { font-size: var(--t-lg); line-height: 1.5; color: var(--tinta); max-width: 52ch; }
.meta { font-size: var(--t-sm); color: var(--tinta); }

/* Sobrelinha: marcador da seção. O ponto limão é o acento, não o texto. */
.olho {
  display: inline-flex; align-items: center; gap: var(--e3);
  font-size: var(--t-xs); font-variation-settings: 'wght' 650, 'wdth' 92;
  letter-spacing: .14em; text-transform: uppercase; color: var(--mata);
  margin: 0 0 var(--e5);
}
.olho::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--limao); flex: none; }

/* ── Layout ───────────────────────────────────────────────────────────── */
.container { width: min(100% - (var(--gutter) * 2), var(--largura)); margin-inline: auto; }
.secao { padding-block: var(--e9); }
.secao--curta { padding-block: var(--e8); }
.secao--mata { background: var(--mata); color: var(--creme); }
.secao--fundo { background: var(--mata-fundo); color: var(--creme); }
.secao--creme { background: var(--creme-2); }
.secao--mata h2, .secao--mata h3, .secao--fundo h2, .secao--fundo h3 { color: var(--creme); }
.secao--mata .lead, .secao--fundo .lead { color: rgba(248,228,175,.82); }
.secao--mata .olho, .secao--fundo .olho { color: var(--limao); }
.secao--mata a, .secao--fundo a { color: var(--creme); }

/* Cabeçalho de seção: limite de medida também vale para título. */
.cabeca { max-width: 62rem; margin-bottom: var(--e8); }
.cabeca h2 { max-width: 20ch; }

.grade { display: grid; gap: var(--e5); }
.grade--2 { grid-template-columns: repeat(2, 1fr); }
.grade--3 { grid-template-columns: repeat(3, 1fr); }
.grade--auto { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
/* Cinco módulos não cabem numa grade automática sem deixar um órfão na
   segunda linha. Os pontos de quebra são explícitos: 5, depois 3+2, depois 1. */
.grade--modulos { grid-template-columns: repeat(5, 1fr); gap: var(--e4); }
.grade--modulos .cartao { padding: var(--e5); }
.grade--modulos .cartao h3 { font-size: var(--t-lg); }
.grade--modulos .cartao__pe { font-size: var(--t-xs); }

/* ── Elementos da marca ───────────────────────────────────────────────── */

/* A moeda: círculo creme com anel limão. Vem da página 5 da identidade. */
.moeda {
  display: inline-grid; place-items: center; flex: none;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--creme); box-shadow: inset 0 0 0 2.5px var(--limao);
  color: var(--mata); font-size: var(--t-sm);
  font-variation-settings: 'wght' 700, 'wdth' 88; letter-spacing: .02em;
}
.moeda--sm { width: 36px; height: 36px; font-size: var(--t-xs); }

/* ── Botões ───────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e2);
  padding: 15px 28px; border: 0; border-radius: var(--r-sm);
  background: var(--mata); color: var(--creme);
  font-family: var(--fonte); font-size: var(--t-base);
  font-variation-settings: 'wght' 650, 'wdth' 92;
  line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer;
  transition: background var(--rapido), color var(--rapido), box-shadow var(--rapido);
}
.btn:hover { background: var(--mata-claro); color: var(--creme); box-shadow: var(--sombra-1); }
.btn--limao { background: var(--limao); color: var(--mata-fundo); }
.btn--limao:hover { background: #bcdd45; color: var(--mata-fundo); }
.btn--linha { background: transparent; color: var(--mata); box-shadow: inset 0 0 0 1.5px var(--fio); }
.btn--linha:hover { background: transparent; color: var(--mata); box-shadow: inset 0 0 0 1.5px var(--mata); }
.btn--claro { background: var(--creme); color: var(--mata); }
.btn--claro:hover { background: #fff; color: var(--mata); }
.btn--lg { padding: 18px 34px; font-size: var(--t-md); }
.btn--bloco { width: 100%; }

/* Sobre fundo escuro o contorno precisa de outra cor de fio. */
.secao--mata .btn--linha, .secao--fundo .btn--linha, .cena .btn--linha {
  color: var(--creme); box-shadow: inset 0 0 0 1.5px var(--fio-escuro);
}
.secao--mata .btn--linha:hover, .secao--fundo .btn--linha:hover, .cena .btn--linha:hover {
  color: var(--creme); box-shadow: inset 0 0 0 1.5px var(--creme);
}

.acoes { display: flex; flex-wrap: wrap; gap: var(--e4); margin-top: var(--e7); }

/* ── Cabeçalho ────────────────────────────────────────────────────────── */
.topo { position: sticky; top: 0; z-index: 100; }

.topo__grupo { background: var(--mata-fundo); color: var(--creme); }
.topo__grupo .container { display: flex; align-items: center; gap: var(--e4); min-height: 38px; flex-wrap: wrap; }
.grupo-nome { font-size: var(--t-xs); letter-spacing: .16em; text-transform: uppercase;
              font-variation-settings: 'wght' 650, 'wdth' 92; opacity: .72; }
.frentes { display: flex; gap: var(--e1); margin-left: auto; }
.frentes a {
  padding: 4px 14px; border-radius: var(--r-pill); text-decoration: none;
  font-size: var(--t-xs); font-variation-settings: 'wght' 600, 'wdth' 94;
  color: var(--creme); opacity: .66; transition: opacity var(--rapido), background var(--rapido);
}
.frentes a:hover { opacity: 1; color: var(--creme); }
.frentes a[aria-current] { background: var(--limao); color: var(--mata-fundo); opacity: 1; }

.topo__barra { background: var(--mata); color: var(--creme); }
.topo__barra .container { display: flex; align-items: center; gap: var(--e6); min-height: 70px; }

.marca { display: flex; align-items: center; gap: var(--e3); text-decoration: none; flex: none; }
.marca img { height: 40px; width: auto; }
.marca__nome { display: grid; line-height: 1; }
.marca__nome b { font-family: var(--fonte-logo); font-size: 1.15rem; letter-spacing: .06em; color: var(--creme); font-weight: 700; }
.marca__nome span { font-size: var(--t-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--limao); margin-top: 4px; }

.nav { display: flex; gap: var(--e5); margin-left: auto; }
.nav a {
  color: var(--creme); opacity: .78; text-decoration: none; font-size: var(--t-sm);
  font-variation-settings: 'wght' 550, 'wdth' 95; padding-block: 6px;
  border-bottom: 2px solid transparent; transition: opacity var(--rapido), border-color var(--rapido);
}
.nav a:hover { opacity: 1; color: var(--creme); }
.nav a[aria-current] { opacity: 1; border-bottom-color: var(--limao); }

.topo .btn { flex: none; padding: 11px 20px; font-size: var(--t-sm); }

.menu-btn {
  display: none; margin-left: auto; width: 44px; height: 44px; padding: 0;
  background: none; border: 0; cursor: pointer; position: relative;
}
.menu-btn span, .menu-btn::before, .menu-btn::after {
  content: ''; position: absolute; left: 10px; right: 10px; height: 2px;
  background: var(--creme); border-radius: 2px; transition: transform var(--rapido) var(--curva), opacity var(--rapido);
}
.menu-btn::before { top: 15px; } .menu-btn span { top: 21px; } .menu-btn::after { top: 27px; }
.menu-btn[aria-expanded="true"]::before { transform: translateY(6px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span { opacity: 0; }
.menu-btn[aria-expanded="true"]::after { transform: translateY(-6px) rotate(-45deg); }

.menu { display: none; background: var(--mata); border-top: 1px solid var(--fio-escuro); }
.menu.aberto { display: block; }
.menu .container { display: grid; gap: var(--e2); padding-block: var(--e5); }
.menu a { color: var(--creme); text-decoration: none; font-size: var(--t-md);
          font-variation-settings: 'wght' 600, 'wdth' 90; padding: var(--e3) 0;
          border-bottom: 1px solid var(--fio-escuro); }
.menu .btn { margin-top: var(--e4); }

.pular { position: absolute; left: -9999px; }
.pular:focus { left: var(--e4); top: var(--e4); z-index: 200; background: var(--creme);
               color: var(--mata); padding: 12px 20px; border-radius: var(--r-sm); }

/* ── Cena: fotografia em sangria com texto por cima ───────────────────── */
.cena { position: relative; isolation: isolate; background: var(--mata-fundo); color: var(--papel); overflow: hidden; }
.cena__foto { position: absolute; inset: 0; z-index: -2; }
.cena__foto img { width: 100%; height: 100%; object-fit: cover; }
/* Véu lateral: escurece o lado do texto e deixa a foto respirar do outro. */
.cena::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(96deg, rgba(20,34,2,.93) 0%, rgba(20,34,2,.80) 38%,
                                     rgba(20,34,2,.38) 66%, rgba(20,34,2,.16) 100%);
}
.cena .container { position: relative; padding-block: var(--e10); }
.cena .olho { color: var(--limao); }
.cena h1, .cena h2 { color: var(--papel); }
.cena .lead { color: rgba(251,250,242,.88); }
.cena__texto { max-width: 40rem; }
.cena--curta .container { padding-block: var(--e9); }

/* ── O colmo: trilho do método ────────────────────────────────────────────
   Cada etapa é um gomo. O verde clareia conforme se avança — a mesma
   "idade do colmo" da identidade, usada como barra de progresso. */
.colmo { display: grid; gap: 0; }
.passo { display: grid; grid-template-columns: 72px 1fr; column-gap: var(--e7); }
.passo__trilho { position: relative; }
.passo__gomo {
  position: absolute; left: 50%; translate: -50% 0; top: 0; bottom: 0;
  width: 30px; border-radius: 12px / 8px; background: var(--gomo, var(--mata));
}
/* O anel: a junta do bambu, não um vão. */
.passo__gomo::before {
  content: ''; position: absolute; left: -3px; right: -3px; top: -3px;
  height: 4px; border-radius: 3px; background: var(--limao);
}
.passo:first-child .passo__gomo::before { display: none; }
.passo:first-child .passo__gomo { border-start-start-radius: 15px; border-start-end-radius: 15px; }
.passo:last-child .passo__gomo { bottom: 18px; border-end-start-radius: 15px; border-end-end-radius: 15px; }
.passo__num { position: absolute; left: 50%; translate: -50% 0; top: 0; z-index: 2; }
.passo__corpo { padding-bottom: var(--e8); padding-top: 2px; }
.passo:last-child .passo__corpo { padding-bottom: 0; }
.passo__corpo h3 { margin-bottom: var(--e3); }
.passo__corpo p { color: var(--tinta); }
.passo__saida {
  display: inline-block; margin-top: var(--e4); font-size: var(--t-sm);
  background: var(--creme); color: var(--mata); border-radius: var(--r-sm);
  padding: 8px 14px; font-variation-settings: 'wght' 600, 'wdth' 94;
}
.passo--1 { --gomo: #1f3603; } .passo--2 { --gomo: #2e4e05; }
.passo--3 { --gomo: #3f6a08; } .passo--4 { --gomo: #55880c; }
.passo--5 { --gomo: #6ea312; }

/* ── Cartões ──────────────────────────────────────────────────────────── */
.cartao {
  background: #fff; border: 1px solid var(--fio); border-radius: var(--r-md);
  padding: var(--e6); display: flex; flex-direction: column; gap: var(--e3);
}
.cartao h2, .cartao h3, .cartao h4 { margin: 0; }
.cartao p { color: var(--tinta); font-size: var(--t-sm); margin: 0; }
.cartao__pe { margin-top: auto; padding-top: var(--e4); font-size: var(--t-sm);
              color: var(--mata); border-top: 1px solid var(--fio);
              font-variation-settings: 'wght' 600, 'wdth' 94; }
.secao--mata .cartao, .secao--fundo .cartao {
  background: rgba(248,228,175,.06); border-color: var(--fio-escuro);
}
.secao--mata .cartao p, .secao--fundo .cartao p { color: rgba(248,228,175,.76); }
.secao--mata .cartao__pe, .secao--fundo .cartao__pe { color: var(--limao); border-top-color: var(--fio-escuro); }

/* ── A cadeia do problema: onde o crescimento vaza ────────────────────── */
.cadeia { display: grid; gap: var(--e3); max-width: 40rem; list-style: none; margin: 0; padding: 0; }
.cadeia li {
  display: flex; align-items: center; gap: var(--e4);
  background: rgba(90,27,48,.06); border-left: 3px solid var(--vinho);
  border-radius: 0 var(--r-sm) var(--r-sm) 0; padding: var(--e4) var(--e5);
  font-size: var(--t-md); font-variation-settings: 'wght' 550, 'wdth' 96;
}
.cadeia li::before { content: ''; width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--vinho); }
.secao--mata .cadeia li, .secao--fundo .cadeia li {
  background: rgba(248,228,175,.05); border-left-color: #a33f5e; color: var(--creme);
}
.secao--mata .cadeia li::before, .secao--fundo .cadeia li::before { background: #a33f5e; }

/* ── FAQ ──────────────────────────────────────────────────────────────── */
.faq { max-width: 54rem; border-top: 1px solid var(--fio); }
.faq details { border-bottom: 1px solid var(--fio); }
.faq summary {
  display: flex; align-items: center; gap: var(--e4); cursor: pointer;
  list-style: none; padding: var(--e5) 0; color: var(--mata);
  font-size: var(--t-md); font-variation-settings: 'wght' 650, 'wdth' 90;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ''; margin-left: auto; flex: none; width: 11px; height: 11px;
  border-right: 2.5px solid var(--limao); border-bottom: 2.5px solid var(--limao);
  transform: rotate(45deg) translate(-3px,-3px); transition: transform var(--rapido) var(--curva);
}
.faq details[open] summary::after { transform: rotate(-135deg) translate(-3px,-3px); }
.faq details > p { padding: 0 0 var(--e5); color: var(--tinta); max-width: 62ch; }

/* ── Formulário ───────────────────────────────────────────────────────── */
.form { display: grid; gap: var(--e5); }
.campo { display: grid; gap: var(--e2); }
.campo label { font-size: var(--t-sm); color: var(--mata); font-variation-settings: 'wght' 600, 'wdth' 94; }
.campo input, .campo textarea, .campo select {
  font-family: var(--fonte); font-size: var(--t-base); color: var(--carvao);
  background: #fff; border: 1.5px solid var(--fio); border-radius: var(--r-sm);
  padding: 13px 16px; width: 100%; transition: border-color var(--rapido);
}
.campo textarea { min-height: 120px; resize: vertical; }
.campo input:focus, .campo textarea:focus, .campo select:focus { outline: none; border-color: var(--mata); }
.campo input::placeholder, .campo textarea::placeholder { color: #a8ad98; }
.consentimento { display: flex; gap: var(--e3); align-items: flex-start; font-size: var(--t-sm); color: var(--tinta); }
.consentimento input { width: 18px; height: 18px; flex: none; margin-top: 3px; accent-color: var(--mata); }
.form__nota { font-size: var(--t-sm); color: var(--tinta); margin: 0; }

/* ── Lista de contato ─────────────────────────────────────────────────── */
.contatos { list-style: none; margin: 0 0 var(--e6); padding: 0; display: grid; gap: var(--e4); }
.contatos li { display: grid; gap: 2px; }
.contatos dt, .contatos .rot { font-size: var(--t-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--tinta); }
.contatos a, .contatos strong { font-size: var(--t-md); font-variation-settings: 'wght' 600, 'wdth' 94; }

/* ── Rodapé ───────────────────────────────────────────────────────────── */
.rodape { background: var(--mata-fundo); color: var(--creme); padding-block: var(--e9) var(--e6); }
.rodape__grade { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: var(--e8) var(--e6); }
.rodape h2 { font-size: var(--t-xs); letter-spacing: .14em; text-transform: uppercase;
             color: var(--limao); margin-bottom: var(--e5); font-variation-settings: 'wght' 650, 'wdth' 92; }
.rodape ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e3); }
.rodape a { color: var(--creme); opacity: .78; text-decoration: none; font-size: var(--t-sm); }
.rodape a:hover { opacity: 1; color: var(--creme); text-decoration: underline; text-decoration-color: var(--limao); }
.rodape__marca img { height: 44px; width: auto; margin-bottom: var(--e5); }
.rodape__marca p { font-size: var(--t-sm); color: rgba(248,228,175,.72); max-width: 34ch; }
.rodape__pe {
  margin-top: var(--e8); padding-top: var(--e5); border-top: 1px solid var(--fio-escuro);
  display: flex; flex-wrap: wrap; gap: var(--e4); justify-content: space-between;
  font-size: var(--t-xs); color: rgba(248,228,175,.6);
}

/* ── Entrada em cena ──────────────────────────────────────────────────────
   O conteúdo é visível por padrão. Só esconde se o JS estiver vivo para
   revelá-lo de novo — assim nenhuma seção pode sumir por falha de suporte. */
.js .surge { opacity: 0; transform: translateY(18px); }
.js .surge.dentro { opacity: 1; transform: none;
  transition: opacity var(--lento) var(--curva), transform var(--lento) var(--curva); }

/* ── Responsivo ───────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .grade--modulos { grid-template-columns: repeat(3, 1fr); }
}
/* No celular o texto ocupa a largura toda, então o véu lateral deixaria
   metade da frase sobre a parte clara da foto. Aqui ele vira vertical. */
@media (max-width: 820px) {
  .cena::before {
    background: linear-gradient(180deg, rgba(20,34,2,.90) 0%, rgba(20,34,2,.78) 55%, rgba(20,34,2,.88) 100%);
  }
}
@media (max-width: 980px) {
  :root { --e9: 72px; --e10: 88px; }
  .nav, .topo__barra .btn { display: none; }
  .menu-btn { display: block; }
  .grade--3 { grid-template-columns: repeat(2, 1fr); }
  .rodape__grade { grid-template-columns: 1fr 1fr; }
  .cena .container { padding-block: var(--e9); }
}
@media (max-width: 820px) {
  .grade--modulos { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  :root { --gutter: var(--e4); --e9: 64px; --e10: 72px; }
  .grade--2, .grade--3, .grade--modulos { grid-template-columns: 1fr; }
  .rodape__grade { grid-template-columns: 1fr; gap: var(--e7); }
  .passo { grid-template-columns: 52px 1fr; column-gap: var(--e5); }
  .passo__gomo { width: 22px; }
  .moeda { width: 40px; height: 40px; }
  .passo__corpo { padding-bottom: var(--e7); }
  .acoes .btn { width: 100%; }
  .topo__grupo .container { min-height: 0; padding-block: 6px; }
  .grupo-nome { display: none; }
  .frentes { margin-left: 0; width: 100%; }
  .frentes a { flex: 1; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .js .surge { opacity: 1; transform: none; }
}

@media print {
  .topo, .menu, .rodape, .acoes { display: none; }
  body { background: #fff; color: #000; }
}

/* ── Variantes A/B ────────────────────────────────────────────────────────
   O documento nasce com data-v="a" no HTML; o script do <head> troca antes
   da primeira pintura. Sem JavaScript, a variante A continua servida. */
[data-variante] { display: none; }
html[data-v="a"] [data-variante~="a"],
html[data-v="b"] [data-variante~="b"] { display: block; }

/* ══ PIXEL ART ═════════════════════════════════════════════════════════════
   Os gomos da página 5 da identidade, redesenhados pixel a pixel: topo
   côncavo, base convexa, junta creme. Entram só como DETALHE — o trilho do
   método, a moeda, a sobrelinha e os marcadores. Tipografia, grade, cor e
   fotografia ficam como estão; é o miúdo que muda de textura.

   O CORPO do gomo é faixa vertical de cor, então é gradiente de paradas
   duras: sem imagem, sem distorcer ao esticar, e a cor de cada etapa é uma
   variável. Só as PONTAS viram sprite, porque são curvas. Os sprites são SVG
   de retângulos com shape-rendering="crispEdges": borda dura em qualquer
   tamanho, sem depender de escala inteira. */

.passo__gomo {
  width: 46px; border-radius: 0;
  /* as 16 colunas do sprite, em porcentagem: 100/16 = 6.25 */
  /* Luz vindo da direita, como nos sprites: sombra à esquerda, brilho à
     direita. Com as duas orientações misturadas, a página tinha duas fontes
     de luz ao mesmo tempo. */
  background: linear-gradient(to right,
    transparent 0 6.25%,
    var(--g-k) 6.25% 25%,
    var(--g-v) 25% 68.75%,
    var(--g-a) 68.75% 87.5%,
    var(--g-c) 87.5% 93.75%,
    transparent 93.75% 100%);
}
.passo__gomo::before {          /* a junta côncava, recortando o topo */
  content: ''; position: absolute; left: 0; right: 0; top: 0;
  aspect-ratio: 16 / 7; height: auto;
  background: url('../images/pixel/junta.svg') center top / 100% 100% no-repeat;
  border-radius: 0;
}
.passo:last-child .passo__gomo { bottom: 20px; }
.passo:last-child .passo__gomo::after {   /* a barriga convexa, só no último */
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  aspect-ratio: 16 / 3;
  background: url('../images/pixel/base.svg') center bottom / 100% 100% no-repeat;
}

/* A rampa de verdes: o colmo clareia conforme o método avança. */
.passo--1 { --g-k:#16200c; --g-v:#1f3603; --g-c:#2e4e05; --g-a:#3f6a08; }
.passo--2 { --g-k:#1f3603; --g-v:#2e4e05; --g-c:#3f6a08; --g-a:#4a7d0a; }
.passo--3 { --g-k:#2e4e05; --g-v:#3f6a08; --g-c:#4a7d0a; --g-a:#5b9a0d; }
.passo--4 { --g-k:#3f6a08; --g-v:#4a7d0a; --g-c:#5b9a0d; --g-a:#74b414; }
.passo--5 { --g-k:#4a7d0a; --g-v:#5b9a0d; --g-c:#74b414; --g-a:#8fc41e; }

/* A moeda: creme com anel de mata a limão, como no desenho da identidade. */
.moeda {
  background: url('../images/pixel/moeda.svg') center / 100% 100% no-repeat;
  box-shadow: none; border-radius: 0;
  color: var(--mata); font-variation-settings: 'wght' 700, 'wdth' 88;
}
/* Menor que o colmo, de propósito: é o que deixa a junta côncava aparecer
   dos dois lados em vez de ficar escondida atrás do número. */
.passo__num.moeda { width: 34px; height: 34px; font-size: 11px; }

/* A sobrelinha ganha o broto no lugar do ponto redondo. */
.olho::before {
  width: 12px; height: 14px; border-radius: 0;
  background: url('../images/pixel/broto.svg') center / contain no-repeat;
}
.secao--mata .olho::before, .secao--fundo .olho::before, .cena .olho::before { filter: brightness(1.4); }

/* Marcador da cadeia do problema: um pixel, não um círculo. */
.cadeia li::before { width: 9px; height: 9px; border-radius: 0; }

/* A etapa sob os olhos acende: a moeda vira limão e sobe um pixel. É o
   "pulo" de dois quadros do pixel art — curto, sem balanço. */
/* Usa a propriedade `translate`, não `transform`: o .passo__num já centraliza
   com `translate: -50% 0`, e um transform por cima somaria os dois e jogaria
   a moeda 100% da largura para a esquerda. */
.passo .moeda { transition: translate var(--rapido) steps(2, end); }
.passo.ativo .moeda { background-image: url('../images/pixel/moeda-ativa.svg'); color: var(--mata-fundo); translate: -50% -3px; }
.passo.ativo .passo__saida { background: var(--limao); color: var(--mata-fundo); }
.passo__saida { transition: background var(--medio), color var(--medio); border-radius: 0; }

@media (max-width: 640px) {
  .passo__gomo { width: 36px; }
  .passo__num.moeda { width: 26px; height: 26px; font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .passo.ativo .moeda { translate: -50% 0; }
}

/* ── A cerca ──────────────────────────────────────────────────────────────
   Fileira de colmos que fecha uma seção, no lugar da mudança seca de cor.
   É um PNG de pixel art de 1,4 KB, exibido em dez fatias: cada uma cresce de
   baixo para cima no seu tempo, e o bambuzal sobe da esquerda para a direita.

   Foi SVG inline antes, com um <g> por colmo. Ficava bonito e custava 64 KB
   mais ~100ms de parse — embutido duas vezes, o peso da página ia de 358 KB
   para 1 MB. Rasterizar resolveu; `image-rendering: pixelated` é
   nearest-neighbour, então a borda continua dura ao ampliar.

   Ancorada no rodapé da seção, não empurrada por margem negativa: assim fica
   exatamente sobre a fronteira, qualquer que seja o respiro da seção. A
   seção que recebe cerca reserva o espaço dela por CLASSE, não por :has(),
   que deixaria o texto debaixo do bambu onde não houvesse suporte. */
.secao { position: relative; }
.secao--cerca { padding-bottom: calc(var(--e9) + 8vw); }

.cerca-faixa {
  position: absolute; left: 0; right: 0; bottom: 0;
  aspect-ratio: 828 / 108;
  display: flex; line-height: 0; pointer-events: none;
}
.cerca-faixa i {
  flex: 1 1 0; height: 100%; display: block;
  background-repeat: no-repeat;
  background-size: 1000% 100%;      /* dez fatias da mesma imagem */
  image-rendering: pixelated;
  transform-origin: bottom;
}
.cerca-faixa--clara i  { background-image: url('../images/pixel/cerca-clara.png'); }
.cerca-faixa--escura i { background-image: url('../images/pixel/cerca-escura.png'); }
.cerca-faixa i:nth-child(1) { background-position-x: 0; }
.cerca-faixa i:nth-child(2) { background-position-x: 11.111%; }
.cerca-faixa i:nth-child(3) { background-position-x: 22.222%; }
.cerca-faixa i:nth-child(4) { background-position-x: 33.333%; }
.cerca-faixa i:nth-child(5) { background-position-x: 44.444%; }
.cerca-faixa i:nth-child(6) { background-position-x: 55.556%; }
.cerca-faixa i:nth-child(7) { background-position-x: 66.667%; }
.cerca-faixa i:nth-child(8) { background-position-x: 77.778%; }
.cerca-faixa i:nth-child(9) { background-position-x: 88.889%; }
.cerca-faixa i:nth-child(10){ background-position-x: 100%; }

.js .cerca-faixa i { transform: scaleY(0); }
.js .cerca-faixa.dentro i { animation: crescer 460ms var(--curva) both; animation-delay: calc(var(--n) * 45ms); }
@keyframes crescer { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* A folha brota na junta da etapa que está sendo lida. */
.passo__trilho::after {
  content: ''; position: absolute; left: 50%; top: 4px;
  width: 20px; height: 18px; margin-left: 14px;
  background: url('../images/pixel/folha.svg') center / contain no-repeat;
  opacity: 0; transform: scale(.3) rotate(-18deg); transform-origin: left bottom;
  transition: opacity var(--medio) var(--curva), transform var(--medio) var(--curva);
}
.passo.ativo .passo__trilho::after { opacity: 1; transform: scale(1) rotate(0); }

/* ── Ar de jogo, sem perder a seriedade ───────────────────────────────────
   Só duas coisas: o botão afunda um pixel ao ser apertado, e os fundos
   escuros ganham a fibra vertical que a capa da identidade usa. Nada pisca,
   nada balança em laço. */
.btn:active { translate: 0 2px; }

.secao--mata, .secao--fundo, .rodape {
  background-image: repeating-linear-gradient(90deg,
    rgba(248,228,175,.028) 0 1px, transparent 1px 3px,
    rgba(0,0,0,.03) 3px 4px, transparent 4px 7px);
}

@media (prefers-reduced-motion: reduce) {
  .js .cerca-faixa i { transform: none; animation: none; }
  .passo__trilho::after { transition: none; }
}
@media (max-width: 640px) {
  .passo__trilho::after { width: 14px; height: 13px; margin-left: 10px; }
}

/* ══ O COLMO DEITADO ═══════════════════════════════════════════════════════
   O mesmo gomo do trilho do método, girado: luz em cima, sombra embaixo, e a
   junta — que em pé é uma linha horizontal — virando linha VERTICAL. É a
   versão que se estica pela largura da página, e é onde o bambu se move.

   Três peças compõem qualquer colmo deitado, e as três moram aqui como
   variáveis para não haver cinco cópias do mesmo gradiente pelo arquivo:

     --colmo-tinta   o corpo: faixas horizontais de cor, em paradas duras.
                     Faixa de cor não precisa de imagem e não distorce ao
                     esticar — o mesmo raciocínio do gomo em pé.
     --colmo-junta   a articulação, ladrilho que repete a cada 9,375 × altura.
     --colmo-ponta   a ponta arredondada, em MÁSCARA e não em tinta: recorta
                     o gradiente do próprio colmo, então serve sobre papel,
                     creme ou mata sem virar três sprites.

   As paradas do gradiente são as 16 linhas do sprite (1/16 = 6,25%): a
   primeira e a última transparentes, que é o que arredonda a silhueta. */
:root {
  --ch-k: #1f3603;   /* sombra, embaixo */
  --ch-v: #2e4e05;   /* corpo */
  --ch-c: #3f6a08;   /* a aresta de cima */
  --ch-a: #55880c;   /* luz */

  --colmo-junta: url('../images/pixel/junta-h.svg');
  --colmo-ponta: url('../images/pixel/ponta-h.svg');
}

/* A receita do corpo é declarada AQUI, na lista de quem a usa, e não no
   `:root`. Um `var()` dentro de um custom property é substituído no elemento
   que DECLARA a variável, não no que a consome: posta no `:root`, a tinta
   congelaria com os verdes do `:root` e todos os colmos do site sairiam da
   mesma cor, por mais que cada um redefinisse `--ch-v`. Declarada em cada
   consumidor, cada colmo resolve a própria rampa. */
.colmo-h::before, .esteira i, .leitura i,
.cabeca::after, .faq details::after, .rodape__pe::before {
  --colmo-tinta: linear-gradient(to bottom,
    transparent 0 6.25%,
    var(--ch-c) 6.25% 12.5%,
    var(--ch-a) 12.5% 31.25%,
    var(--ch-v) 31.25% 75%,
    var(--ch-k) 75% 93.75%,
    transparent 93.75% 100%);
}

/* A ponta arredondada, pela mesma razão agrupada: são oito linhas de máscara
   que não mudam de um colmo para o outro. A camada sólida cobre tudo menos a
   última fatia, e o sprite recorta essa fatia — `--ch / 4` porque o ladrilho
   da ponta é 4 de largura por 16 de altura. */
.colmo-h::before, .leitura i, .cabeca::after, .faq details::after {
  -webkit-mask-image: var(--colmo-ponta), linear-gradient(#000 0 0);
          mask-image: var(--colmo-ponta), linear-gradient(#000 0 0);
  -webkit-mask-repeat: no-repeat, no-repeat;
          mask-repeat: no-repeat, no-repeat;
  -webkit-mask-position: right center, left center;
          mask-position: right center, left center;
  -webkit-mask-size: auto 100%, calc(100% - var(--ch, 12px) / 4) 100%;
          mask-size: auto 100%, calc(100% - var(--ch, 12px) / 4) 100%;
}

/* ── O componente ─────────────────────────────────────────────────────────
   `--ch` é a altura, e TUDO deriva dela: o ladrilho da junta é dimensionado
   por `auto 100%`, então o espaçamento entre juntas é 150/16 = 9,375 vezes a
   altura. Um colmo de 14px tem junta a cada 131px. É esse número que a
   animação usa para crescer de gomo em gomo em vez de deslizar liso. */
.colmo-h {
  --ch: 14px;
  --passos: 7;
  position: relative;
  height: var(--ch); border: 0; margin: 0; padding: 0; flex: none;
}
/* O colmo é pintado no `::before`, não no próprio elemento — ver "Crescer". */
.colmo-h::before {
  content: ''; position: absolute; inset: 0;
  background:
    var(--colmo-junta) repeat-x var(--deriva, 0px) center / auto 100%,
    var(--colmo-tinta);
}
.colmo-h--clara { --ch-k:#4a7d0a; --ch-v:#5b9a0d; --ch-c:#74b414; --ch-a:#8fc41e; }

/* A assinatura do herói: um pedaço de colmo sob as ações, com a folha
   brotando na ponta quando termina de crescer. */
.colmo-h--assinatura { --ch: 13px; width: min(26rem, 70%); margin-top: var(--e8); }

/* ── Crescer ──────────────────────────────────────────────────────────────
   Bambu cresce de baixo para cima e de gomo em gomo, nunca liso. Deitado, é
   da esquerda para a direita — e o `steps()` é o que devolve o salto: a
   ponta avança um gomo, para, avança o próximo.

   Por que `transition` e não `@keyframes`: o número de passos vem do
   JavaScript (`--passos`, medido da largura real). Se o navegador não souber
   substituir a variável dentro de `steps()`, a declaração inteira cai — e
   com `animation` o elemento ficaria preso no estado inicial, invisível para
   sempre. Com transição, o que cai é só o escalonamento: o colmo cresce liso
   e termina visível. É a mesma lição do `animation-timeline` que apagou
   seções no Firefox.

   E o recorte NUNCA mora no elemento observado. Um elemento com
   `clip-path: inset(0 100% 0 0)` tem área visível zero, e para o
   IntersectionObserver isso é estar fora da tela: ele não recebe `.dentro`,
   não cresce, e só aparece três segundos depois, pela rede de segurança. A
   armadilha do `animation-timeline` de novo, por outro caminho. Por isso o
   observado é sempre a caixa inteira e o recortado é um filho dela — o
   `::before` no colmo solto, os gomos na esteira.

   Os recortes de cima e de baixo ficam em -100%, fora da caixa: sem isso o
   clip comeria a folha que brota acima do colmo.

   Sem JavaScript nada disso existe: o colmo já nasce inteiro. */
.js .colmo-h.cresce::before { clip-path: inset(-100% 100% -100% 0); }
.js .colmo-h.cresce.dentro::before {
  clip-path: inset(-100% 0 -100% 0);
  transition: clip-path var(--lento) steps(var(--passos, 7), end);
}

/* A folha brota na ponta, depois que o colmo chega lá. */
.colmo-h--folha::after {
  content: ''; position: absolute;
  right: 0; bottom: calc(var(--ch) * 0.45);
  width: calc(var(--ch) * 1.5); height: calc(var(--ch) * 1.3);
  background: url('../images/pixel/folha.svg') center / contain no-repeat;
  transform-origin: left bottom;
  opacity: 0; transform: scale(.25) rotate(-24deg);
}
.js .colmo-h--folha.dentro::after {
  opacity: 1; transform: scale(1) rotate(0);
  transition: opacity var(--medio) var(--curva), transform var(--medio) var(--curva);
  transition-delay: var(--lento);
}

/* ── A esteira: os cinco gomos deitados ───────────────────────────────────
   O trilho do método está em pé porque o método é uma sequência que se sobe.
   Na seção "onde você entra" a mesma sequência vira ESCOLHA, e escolha se
   apresenta lado a lado — então o colmo deita e corre por baixo dos cinco
   cartões, um gomo por módulo.

   Reaproveita as classes `.passo--1..5`: elas não posicionam nada, só
   definem a rampa de verdes que clareia conforme se avança. A mesma cor da
   etapa em pé e da etapa deitada, declarada uma vez só. */
.esteira {
  --ch: 16px;
  display: flex; height: var(--ch); margin-bottom: var(--e7);
}
.esteira i {
  flex: 1 1 0; position: relative; height: 100%;
  --ch-k: var(--g-k); --ch-v: var(--g-v); --ch-c: var(--g-c); --ch-a: var(--g-a);
  /* a junta fecha o gomo à DIREITA; no último ela some e entra a ponta */
  background: var(--colmo-junta) no-repeat right center / auto 100%, var(--colmo-tinta);
  transition: filter var(--medio) var(--curva);
}
.esteira i:last-child { background: var(--colmo-tinta); }

/* Cada gomo espera o anterior fechar, como o bambu faz. */
.js .esteira.cresce i { clip-path: inset(-100% 100% -100% 0); }
.js .esteira.cresce.dentro i {
  clip-path: inset(-100% 0 -100% 0);
  transition: clip-path 420ms steps(3, end), filter var(--medio) var(--curva);
  transition-delay: calc(var(--n) * 260ms);
}

/* O gomo do cartão sob o cursor acende e bota folha. Aceso é `filter`, não
   troca de cor: gradiente não interpola, e a mudança seca de cor pisca. */
.esteira i.aceso { filter: brightness(1.5) saturate(1.2); }
.esteira i::after {
  content: ''; position: absolute; right: 10px; bottom: calc(var(--ch) * 0.55);
  width: 26px; height: 23px;
  background: url('../images/pixel/folha.svg') center / contain no-repeat;
  transform-origin: left bottom;
  opacity: 0; transform: scale(.25) rotate(-24deg);
  transition: opacity var(--medio) var(--curva), transform var(--medio) var(--curva);
}
.esteira i.aceso::after { opacity: 1; transform: scale(1) rotate(0); }

@media (max-width: 860px) {
  /* Com os cartões empilhados a esteira perde o sentido: ela existe para
     ligar cinco colunas que, aqui, não existem mais. */
  .esteira { display: none; }
}

/* ── A régua de leitura ───────────────────────────────────────────────────
   Um colmo deitado no pé do cabeçalho fixo, crescendo com a rolagem. É o
   único movimento contínuo do site, e não é enfeite: mede quanto da página
   já foi lida. Cada junta que aparece é um gomo de leitura vencido.

   Só existe com JavaScript — sem ele a largura seria zero e sobraria uma
   tira escura sem função. */
.leitura { display: none; }
.js .leitura { display: block; height: 10px; background: var(--mata-fundo); }
.leitura i {
  --ch: 10px;
  display: block; height: 100%; width: calc(var(--lido, 0) * 100%);
  background: var(--colmo-junta) repeat-x left center / auto 100%, var(--colmo-tinta);
  --ch-k:#4a7d0a; --ch-v:#5b9a0d; --ch-c:#74b414; --ch-a:#8fc41e;
}

/* ── Na FAQ, o colmo deitado é a divisória ────────────────────────────────
   Fechada, a divisória está meio apagada. Aberta, o colmo CRESCE da esquerda
   para a direita — a pergunta abre e o bambu acompanha. */
.faq { border-top: 0; }
.faq details { border-bottom: 0; position: relative; }
.faq details::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 11px;
  --ch: 11px; --ch-k:#2e4e05; --ch-v:#3f6a08; --ch-c:#4a7d0a; --ch-a:#5b9a0d;
  background: var(--colmo-junta) repeat-x left center / auto 100%, var(--colmo-tinta);
  opacity: .45; transition: opacity var(--medio);
}
.faq details:hover::after { opacity: .8; }
.faq details[open]::after { opacity: 1; }
.js .faq details[open]::after { animation: brotar-h var(--lento) steps(5, end) both; }
@keyframes brotar-h {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}
.faq summary { padding-bottom: var(--e6); }
.faq details > p { padding-bottom: var(--e6); }

/* ── O remate do rodapé ───────────────────────────────────────────────────
   Colmo deitado em creme sobre o verde, com as juntas DERIVANDO na rolagem.
   É o único deslize contínuo que o site tem, e é lento de propósito: dá a
   impressão de que o colmo segue crescendo para fora da página, sem nada
   piscando nem balançando em laço. */
.rodape__pe { border-top: 0; position: relative; padding-top: var(--e6); }
.rodape__pe::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 11px;
  --ch: 11px; --ch-k:#4a7d0a; --ch-v:#74b414; --ch-c:#8fc41e; --ch-a:#abcd30;
  background: var(--colmo-junta) repeat-x var(--deriva, 0px) center / auto 100%,
              var(--colmo-tinta);
  opacity: .6;
}

/* ── O remate do cabeçalho de seção ───────────────────────────────────────
   Um pedaço de colmo deitado fecha cada `.cabeca`. É o que amarra a
   horizontal com a vertical do trilho — e cresce junto com a seção que
   entra, atrasado o suficiente para o título chegar antes. */
.cabeca::after {
  content: ''; display: block; width: 190px; height: 12px; margin-top: var(--e6);
  --ch: 12px; --ch-k:#2e4e05; --ch-v:#3f6a08; --ch-c:#4a7d0a; --ch-a:#5b9a0d;
  background: var(--colmo-junta) repeat-x var(--deriva, 0px) center / auto 100%,
              var(--colmo-tinta);
}
.secao--mata .cabeca::after, .secao--fundo .cabeca::after {
  --ch-k:#4a7d0a; --ch-v:#8fc41e; --ch-c:#bcdd45; --ch-a:#abcd30;
}
.js .cabeca.surge::after { clip-path: inset(0 100% 0 0); }
.js .cabeca.surge.dentro::after {
  clip-path: inset(0 0 0 0);
  transition: clip-path 640ms steps(2, end) 220ms;
}

@media (max-width: 640px) {
  .colmo-h { --ch: 12px; }
  .colmo-h--assinatura { width: 100%; margin-top: var(--e7); }
  .cabeca::after { width: 140px; }
}

/* Movimento é convite, não obrigação: quem pede menos recebe o mesmo
   desenho, inteiro, parado. */
@media (prefers-reduced-motion: reduce) {
  /* A especificidade tem de bater com a das regras acima (`:not(.esteira)`
     e `.dentro`), senão o desligamento não vence o recorte e o colmo some. */
  .js .colmo-h.cresce::before, .js .colmo-h.cresce.dentro::before,
  .js .esteira.cresce i, .js .esteira.cresce.dentro i {
    clip-path: none; transition: none;
  }
  .js .colmo-h--folha.dentro::after { transition: none; }
  .js .faq details[open]::after { animation: none; }
  .js .cabeca.surge::after { clip-path: none; transition: none; }
  .esteira i::after { transition: none; }
}