/* ---- Tokens ----
   Cores retiradas da assinatura de email do cliente (brand/source/assinatura-basp.jpeg):
   verde escuro #006600 e verde-lima #b7ff00. */
:root {
  --brand-green: #006600;
  --brand-lime: #b7ff00;

  --ground: #04240f;
  --ink: #eef8e8;
  --ink-muted: #a8c8a2;
  /* a frase principal cai numa zona mais clara da fotografia; #a8c8a2 dava
     3,5:1 de contraste, abaixo dos 4,5:1 exigidos pela WCAG AA */
  --ink-soft: #dcefd7;

  --font-body: system-ui, -apple-system, "Segoe UI", sans-serif;
  --space: 1rem;
  --measure: 42ch;
}

/* ---- Reset mínimo ---- */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
img { max-width: 100%; height: auto; display: block; }

html, body { height: 100%; }

body {
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;

  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  justify-items: center;
  text-align: center;
  padding: clamp(1.5rem, 5vw, 3rem);
}

/* ---- Fundo ---- */
.backdrop { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: var(--ground); }

/* Fotografia de fundo (images/hero-*.webp / .jpg). Removida por JS se não carregar. */
.backdrop-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* mostra mais campo e menos céu, que é a parte pálida da fotografia */
  object-position: 50% 62%;
  /* o céu esbatido fica acinzentado depois de escurecido; isto devolve-lhe cor */
  filter: saturate(1.14) contrast(1.05);
}

/* Fundo desenhado em CSS — usado enquanto não houver fotografia */
.backdrop-fallback {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 80% at 76% 14%, rgba(183, 255, 0, .34) 0%, rgba(183, 255, 0, 0) 58%),
    linear-gradient(180deg, #0a3d1a 0%, #073016 52%, #04240f 100%);
}
/* Painéis em fuga — grelha em perspetiva */
.backdrop-fallback::after {
  content: "";
  position: absolute;
  left: -50%;
  right: -50%;
  bottom: -8%;
  height: 62%;
  background-image:
    repeating-linear-gradient(90deg, rgba(183, 255, 0, .26) 0 2px, transparent 2px 44px),
    repeating-linear-gradient(0deg,  rgba(183, 255, 0, .17) 0 2px, transparent 2px 32px),
    linear-gradient(180deg, rgba(12, 70, 30, .40), rgba(3, 24, 12, .94));
  transform: perspective(680px) rotateX(66deg);
  transform-origin: bottom center;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 100%);
}

/* Véu escuro por cima do fundo, para o texto ser sempre legível.
   Um véu uniforme deixava a fotografia cinzenta e baça. Em vez disso: um foco
   escuro atrás do texto, deixando os cantos respirar, mais um escurecimento
   em cima e em baixo. */
.backdrop-veil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(62% 50% at 50% 46%,
      rgba(2, 14, 7, .74) 0%,
      rgba(2, 14, 7, .40) 56%,
      rgba(2, 14, 7, .06) 100%),
    linear-gradient(180deg,
      rgba(2, 14, 7, .62) 0%,
      rgba(2, 14, 7, .24) 40%,
      rgba(2, 14, 7, .20) 60%,
      rgba(2, 14, 7, .74) 100%);
}

/* ---- Conteúdo ---- */
.holding {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--space) * 1.1);
}

.mark {
  width: clamp(64px, 13vw, 96px);
  height: auto;
  margin-bottom: calc(var(--space) * .4);
}

/* O logótipo original usa um degradê contínuo do verde escuro para o verde-lima.
   Em fundo escuro o verde escuro desapareceria, por isso aqui vai de branco para lima. */
.wordmark {
  margin: 0;
  font-size: clamp(2.3rem, 8.5vw, 4.25rem);
  line-height: 1.05;
  letter-spacing: .01em;
  font-weight: 700;
  text-transform: uppercase;
  text-wrap: balance;

  background: linear-gradient(90deg, var(--ink) 0%, var(--brand-lime) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

.tagline {
  margin: 0;
  font-size: clamp(.72rem, 2.2vw, .84rem);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--brand-lime);
}

.lede {
  margin: calc(var(--space) * .6) 0 0;
  max-width: var(--measure);
  color: var(--ink-soft);
  font-size: clamp(1rem, 2.5vw, 1.15rem);
}

/* ---- Indicador de carregamento ---- */
.status {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
  margin-top: calc(var(--space) * .5);
}

.bar {
  width: min(260px, 70vw);
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .16);
  overflow: hidden;
}
.bar span {
  display: block;
  width: 40%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--brand-green), var(--brand-lime));
  animation: slide 1.9s ease-in-out infinite;
}

@keyframes slide {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(250%); }
}

.status-text {
  margin: 0;
  font-size: .9rem;
  letter-spacing: .04em;
  color: var(--ink-muted);
}
.dots::after {
  content: "";
  animation: dots 1.6s steps(4, end) infinite;
}
@keyframes dots {
  0%   { content: ""; }
  25%  { content: "."; }
  50%  { content: ".."; }
  75%  { content: "..."; }
}

.contact { margin: 0; color: var(--ink-muted); font-size: .95rem; }
.contact a { color: var(--ink); }

/* ---- Rodapé ---- */
.site-footer {
  padding-top: calc(var(--space) * 2);
  color: rgba(168, 200, 162, .6);
  font-size: .8rem;
}
.site-footer p { margin: 0; }

/* ---- Acessibilidade ---- */
:focus-visible { outline: 2px solid var(--brand-lime); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  /* Sem animação, a barra fica parcialmente preenchida e legível */
  .bar span { width: 55%; }
  .dots::after { content: "..."; }
}