/* =========================================================================
   Estilo "poster" — composição ousada para a landing e os slides.
   Paleta PineUp: preto profundo + verde pinheiro de acento.
   Títulos enormes, palavras destacadas, painéis full-bleed, chevrons.
   ========================================================================= */
:root {
  --accent: #22C55E;          /* verde de acento */
  --accent-600: #16A34A;
  --pine: #14532D;            /* verde institucional */
  --pine-deep: #0B2E18;
  --ink: #0A0A0A;             /* preto */
  --ink-2: #131316;
  /* aliases retro-compat (poster antigo usava amber/blue) */
  --amber: #22C55E; --amber-600: #16A34A; --ink-blue: #0A0A0A; --blue-deep: #131316;
}

/* Painel preto profundo (herói / secções de destaque) */
.poster {
  background:
    radial-gradient(1100px 600px at 85% -10%, color-mix(in srgb, var(--pine) 60%, transparent), transparent 60%),
    radial-gradient(900px 700px at -5% 110%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 55%),
    linear-gradient(160deg, #131316, #0A0A0A);
  color: #F4F4F5;
}
.poster--accent, .poster--amber {
  background: linear-gradient(160deg, var(--accent), var(--accent-600));
  color: #06210F;
}
.poster--pine {
  background: linear-gradient(160deg, var(--pine), var(--pine-deep));
  color: #ECFDF5;
}

/* Etiqueta/kicker em verde */
.kicker {
  display: inline-flex; align-items: center; gap: .5rem;
  font: 800 .8rem/1 var(--font-sans); letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent);
}
.poster--accent .kicker, .poster--amber .kicker { color: #06210F; }

/* Títulos gigantes */
.display-xl { font-family: var(--font-display); font-weight: 800; letter-spacing: -.02em;
  line-height: .98; font-size: clamp(2.4rem, 6vw, 5rem); margin: 0; }
.display-lg { font-family: var(--font-display); font-weight: 800; letter-spacing: -.02em;
  line-height: 1.02; font-size: clamp(1.8rem, 4vw, 3rem); margin: 0; }

/* Destaque de palavra (verde) — texto e caixa */
.hl { color: var(--accent); }
.poster--accent .hl, .poster--amber .hl { color: #fff; }
.hl-box { background: var(--accent); color: #06210F; padding: 0 .28em; border-radius: .18em;
  box-decoration-break: clone; -webkit-box-decoration-break: clone; }

.chev { color: var(--accent); display: inline-flex; }

/* Pills / botões */
.btn-accent, .btn-amber { display: inline-flex; align-items: center; gap: .6rem; background: var(--accent); color: #06210F;
  font: 800 1rem/1 var(--font-sans); padding: 1rem 1.5rem; border-radius: 999px; border: 0; cursor: pointer;
  box-shadow: 0 10px 26px rgba(34,197,94,.32); transition: transform .15s var(--ease), filter .15s var(--ease); text-decoration: none; }
.btn-accent:hover, .btn-amber:hover { transform: translateY(-2px); filter: brightness(1.05); }
.btn-outline-light { display: inline-flex; align-items: center; gap: .6rem; background: transparent; color: #fff;
  font: 700 1rem/1 var(--font-sans); padding: 1rem 1.5rem; border-radius: 999px; border: 2px solid rgba(255,255,255,.5);
  cursor: pointer; text-decoration: none; transition: .15s var(--ease); }
.btn-outline-light:hover { background: rgba(255,255,255,.12); border-color: #fff; }

/* Cartão de vidro sobre painel preto */
.glass { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--r-lg); backdrop-filter: blur(8px); }

/* Faixa com cores da bandeira de Moçambique (acento subtil) */
.flag-bar { height: 5px; border-radius: 999px; background:
  linear-gradient(90deg,#16A34A 0 28%,#0A0A0A 28% 44%,#F5B301 44% 60%,#DC2626 60% 76%,#fff 76% 100%); }

/* Numeração de passos */
.step-num { display: inline-flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem;
  border-radius: 50%; background: var(--accent); color: #06210F; font: 800 1.1rem var(--font-display); flex: 0 0 auto; }

.icon { display: inline-block; vertical-align: middle; }