/* CarbonWise — página provisória (novo website em breve)
   Fundo: terra_base (body.fundo-terra) — logótipo no céu, mensagem sobre a Terra. */

@font-face { font-family: "Inter"; src: url("fonts/inter-light.woff") format("woff"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/inter-regular.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/inter-medium.woff") format("woff"); font-weight: 500; font-style: normal; font-display: swap; }

:root {
  --espaco: #000000;              /* céu das imagens */
  --folha: #9abb91;               /* folha do logótipo */
  --folha-escura: #102012;        /* texto sobre a folha (botão em hover) */
  --branco: #ffffff;
  --nevoa: rgba(255, 255, 255, 0.78);
  --nevoa-fraca: rgba(255, 255, 255, 0.58);
  --gutter: clamp(16px, 4vw, 48px);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: dark;
}

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

html {
  background: var(--espaco);
  color: var(--branco);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
}

body {
  position: relative;
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-x: clip; /* sem fundo aqui: o preto fica no html, senão tapa a foto (z-index -1) */
}

img { display: block; max-width: 100%; height: auto; }

/* textos traduzidos: só o idioma ativo aparece */
html[data-lang="pt"] .tr[lang="en"],
html[data-lang="en"] .tr[lang|="pt"] { display: none; }

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

/* ---------------- fundo (foto da Terra) ---------------- */
/* absoluto (não fixed): em telemóvel um fundo fixed mede a altura sem a barra do browser
   e o horizonte descia para fora do ecrã. Assim acompanha sempre a área visível da página. */
.fundo {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: var(--espaco);
}
.fundo picture,
.fundo img { display: block; width: 100%; height: 100%; max-width: none; }
.fundo img { object-fit: cover; }
.fundo::after { content: ""; position: absolute; inset: 0; pointer-events: none; }

/* horizonte em cima, logótipo no céu, texto sobre a Terra */
.fundo-terra .fundo img { object-position: 50% 0%; }
.fundo-terra .fundo picture,
.fundo-terra .fundo img { transform-origin: 50% 24%; }
.fundo-terra .fundo::after {
  background:
    radial-gradient(ellipse 64% 44% at 50% 57%, rgba(0, 0, 0, 0.68), rgba(0, 0, 0, 0.22) 72%, transparent),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.15) 55%, rgba(0, 0, 0, 0.72) 100%);
}

/* ---------------- topo: idioma ---------------- */
.topo {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  padding: calc(8px + env(safe-area-inset-top)) calc(var(--gutter) - 8px) 0 0;
}
.idioma { display: flex; align-items: center; font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.06em; }
.idioma button {
  appearance: none;
  position: relative;
  min-width: 44px;
  min-height: 44px;
  padding: 0 8px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--nevoa-fraca);
  font: inherit;
  letter-spacing: inherit;
  cursor: pointer;
  transition: color 0.2s ease;
}
.idioma button:hover { color: var(--branco); }
.idioma button[aria-pressed="true"] { color: var(--branco); cursor: default; }
.idioma button[aria-pressed="true"]::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 9px;
  width: 14px;
  height: 2px;
  margin-left: -7px;
  border-radius: 1px;
  background: var(--folha);
}
.idioma-sep { width: 1px; height: 12px; background: rgba(255, 255, 255, 0.3); }

/* ---------------- conteúdo ---------------- */
.palco {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 72px var(--gutter) 28px;
}
.mensagem { display: flex; flex-direction: column; align-items: center; }

.logo { width: clamp(176px, 21vw, 296px); }

.titulo {
  margin: 0;
  max-width: 20ch;
  font-size: clamp(2.6rem, 1.1rem + 5.6vw, 6rem);
  font-weight: 300; /* Inter Light, branco, "Value" na cor da folha (indicação do Pedro) */
  line-height: 1.04;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.titulo .palavra { display: inline-block; white-space: nowrap; }
.titulo .valor { color: var(--folha); }
.titulo .letra { display: inline-block; }

.lead {
  margin: clamp(18px, 3svh, 28px) 0 0;
  max-width: 44ch;
  font-size: clamp(1.125rem, 0.95rem + 0.8vw, 1.5rem);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.texto {
  margin: 10px 0 0;
  max-width: 60ch;
  color: var(--nevoa);
  font-size: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);
  line-height: 1.6;
  text-wrap: pretty;
}

.cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  margin-top: clamp(22px, 3.6svh, 34px);
  padding: 0 22px 0 18px;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--branco);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.cta svg { flex: none; }
.cta:hover { background: var(--folha); border-color: var(--folha); color: var(--folha-escura); }

.contacto {
  margin: clamp(12px, 2svh, 18px) 0 0;
  color: var(--nevoa-fraca);
  font-size: 0.9375rem;
}
.contacto a {
  display: inline-block;
  padding: 8px 2px; /* área de toque maior no telemóvel */
  color: var(--branco);
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.35);
  text-underline-offset: 4px;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
.contacto a:hover { color: var(--folha); text-decoration-color: var(--folha); }

:focus-visible { outline: 2px solid var(--folha); outline-offset: 3px; }

/* logótipo na faixa de céu acima do horizonte, mensagem sobre a Terra */
.fundo-terra .palco { padding-top: 0; }
.fundo-terra .marca {
  height: clamp(112px, 20svh, 240px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.fundo-terra .logo { width: clamp(160px, 17vw, 250px); }
.fundo-terra .mensagem { flex: 1; justify-content: center; padding: 28px 0 8px; }
.fundo-terra .titulo,
.fundo-terra .lead { text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45); }

/* ---------------- base: parceiros (como na intro do vídeo) ---------------- */
.base {
  position: relative;
  padding: 0 var(--gutter) calc(18px + env(safe-area-inset-bottom));
  text-align: center;
}
.base::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -36px;
  bottom: 0; /* não passa do fundo da página (senão aparece barra de scroll) */
  width: min(980px, 100%); /* nunca mais largo que o ecrã: em telemóvel fazia a página encolher */
  transform: translateX(-50%);
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(0, 0, 0, 0.5), transparent);
  pointer-events: none;
  z-index: -1;
}
.parceiros {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.parceiros img { width: auto; }
.p-itgest img { height: 28px; }
.p-ct img { height: 31px; }
.p-prr img { height: 30px; }
.p-sep { width: 1px; height: 26px; background: rgba(255, 255, 255, 0.35); }

.copy {
  margin: clamp(24px, 3.5svh, 34px) 0 0; /* logos dos parceiros um pouco acima do © (pedido do Pedro) */
  color: var(--nevoa-fraca);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
}

@media (max-width: 600px) {
  .palco { padding-top: 64px; }
  .parceiros { gap: 14px 20px; }
  .p-itgest img { height: 23px; }
  .p-ct img { height: 26px; }
  .p-sep { height: 22px; }
  .p-prr { flex-basis: 100%; display: flex; justify-content: center; }
  .p-prr img { height: auto; width: min(100%, 300px); }
}

@media (max-height: 560px) and (orientation: landscape) {
  .fundo-terra .marca { height: 96px; }
  .titulo { font-size: clamp(2rem, 1rem + 4vw, 3.25rem); }
}

/* ---------------- animação de entrada (uma só sequência) ---------------- */
@media (prefers-reduced-motion: no-preference) {
  .fundo { animation: aparece 1.6s ease-out both; }
  .fundo picture { animation: assenta 7s var(--ease-out) both; }
  .fundo img { animation: deriva 38s ease-in-out 7s infinite alternate; }

  .logo { animation: foca 1.4s var(--ease-out) 0.45s both; }
  html:not(.js) .titulo { animation: foca 1.2s var(--ease-out) 0.9s both; }
  .js .titulo .letra { animation: letra 1.1s var(--ease-out) both; animation-delay: calc(0.95s + var(--i) * 34ms); }
  .lead { animation: sobe 1s var(--ease-out) 1.75s both; }
  .texto { animation: sobe 1s var(--ease-out) 1.9s both; }
  .cta { animation: sobe 1s var(--ease-out) 2.05s both; }
  .contacto { animation: sobe 1s var(--ease-out) 2.2s both; }
  .parceiros > li { animation: sobe 0.9s var(--ease-out) both; animation-delay: calc(2.35s + var(--i, 0) * 90ms); }
  .copy, .topo { animation: aparece 1.2s ease-out 2.7s both; }

  /* troca de idioma: o texto novo aparece suavemente */
  .trocou .tr { animation: aparece 0.45s ease-out both; }
}

@keyframes aparece { from { opacity: 0; } }
@keyframes assenta { from { transform: scale(1.14); } to { transform: scale(1); } }
@keyframes deriva { from { transform: scale(1); } to { transform: scale(1.045) translateY(-0.5%); } }
@keyframes foca { from { opacity: 0; transform: translateY(14px); filter: blur(10px); } }
@keyframes letra { from { opacity: 0; transform: translateY(0.38em); filter: blur(8px); } }
@keyframes sobe { from { opacity: 0; transform: translateY(14px); } }