/* befirst.pt · site.css
   Referência de implementação do desenho aprovado (canvas befirst.pt, 17/10/2026).
   Sem estilos inline: tudo o que a página precisa está aqui. */

/* ---------- Fontes (alojadas no próprio site, OFL 1.1) ---------- */
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('/assets/fonts/schibstedGrotesk/schibstedGroteskLatin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/instrumentSans/instrumentSansLatin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Tokens ---------- */
:root {
  color-scheme: light;

  --bf-ground: #FBF9FF;      /* fundo e theme-color */
  --bf-lilac: #D6C8FF;       /* secções alternadas */
  --bf-violet: #5B2EE0;      /* traço, botões, números */
  --bf-violet-deep: #4320B8; /* hover; traço sobre lilás */
  --bf-ink: #1C1238;         /* texto */
  --bf-ink-soft: #4F4670;    /* texto secundário */
  --bf-error: #8C1D40;       /* só no formulário */
  --bf-line: #8A80B0;        /* contornos de campos; nunca texto */
  --bf-white: #FFFFFF;
  --bf-dot: #DDD3FF;         /* decorativo: pontos do fundo */
  --bf-rule: #E4DCFF;        /* decorativo: filetes */
  --bf-tint: #F1ECFF;        /* decorativo: hover de botões secundários */

  --bf-font-display: 'Schibsted Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --bf-font-text: 'Instrument Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

  --bf-ease-draw: cubic-bezier(.65, 0, .35, 1);
  --bf-section-pad: clamp(72px, 8vw, 120px);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bf-ground);
  color: var(--bf-ink);
  font-family: var(--bf-font-text);
  font-size: 18px;
  line-height: 1.5;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--bf-violet-deep); }
a:hover { color: var(--bf-ink); }
a:focus-visible, button:focus-visible { outline: 3px solid var(--bf-violet); outline-offset: 4px; }
h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { list-style: none; padding: 0; }

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

.bf-wrap { max-width: 1200px; margin: 0 auto; }
.bf-dots {
  background-color: var(--bf-ground);
  background-image: radial-gradient(var(--bf-dot) 1.2px, transparent 1.4px);
  background-size: 24px 24px;
}

/* ---------- Botões ---------- */
.bf-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 0 32px;
  border: 0; border-radius: 999px;
  background: var(--bf-violet); color: var(--bf-white);
  font-family: var(--bf-font-text); font-size: 19px; font-weight: 600; line-height: 1;
  text-decoration: none; cursor: pointer;
}
.bf-btn:hover { background: var(--bf-violet-deep); color: var(--bf-white); }
.bf-btn[disabled] { opacity: .6; cursor: default; }
.bf-btn svg { width: 20px; height: 20px; }

.bf-ghost {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 14px;
  border: 0; border-radius: 999px; background: transparent;
  color: var(--bf-ink); font-family: var(--bf-font-text); font-size: 16px; font-weight: 600;
  text-decoration: none; cursor: pointer;
}
.bf-ghost:hover { background: var(--bf-tint); color: var(--bf-ink); }
.bf-ghost svg { width: 18px; height: 18px; }

/* ---------- Logótipo pequeno (cabeçalhos, rodapé, formulário) ---------- */
.bf-brand {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
  color: var(--bf-ink); text-decoration: none;
  font-family: var(--bf-font-display); font-weight: 700; font-size: 20px; letter-spacing: -0.01em;
}
.bf-brand:hover { color: var(--bf-ink); }
.bf-brand img { width: 34px; height: 34px; }

/* ---------- Topo ---------- */
.bf-hero {
  min-height: 860px;
  padding: var(--bf-section-pad) 16px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 40px; text-align: center;
}
.bf-lockup { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.bf-lockup-mark { width: clamp(150px, 16vw, 230px); height: auto; overflow: visible; }
.bf-wordmark {
  display: flex; gap: 0.26em; align-items: baseline;
  font-family: var(--bf-font-display); font-weight: 700;
  font-size: clamp(44px, 5vw, 68px); line-height: 1; letter-spacing: -0.02em;
}
.bf-wordmark-first { position: relative; display: inline-block; }
.bf-wordmark-underline {
  position: absolute; left: -2%; bottom: -0.3em; width: 104%; height: 0.3em; overflow: visible;
}
.bf-hero-text { display: flex; flex-direction: column; align-items: center; gap: 20px; max-width: 900px; }
.bf-hero h1 {
  font-family: var(--bf-font-display); font-weight: 800;
  font-size: clamp(44px, 5.6vw, 80px); line-height: 1.02; letter-spacing: -0.035em;
  text-wrap: balance;
}
.bf-dot-accent { color: var(--bf-violet); }
.bf-lead { font-size: clamp(19px, 1.7vw, 24px); line-height: 1.4; color: var(--bf-ink-soft); text-wrap: balance; }
/* «Por convite · porta aberta» por cima do lema (acrescento ao caderno, pedido do Nuno a 17/10/2026). */
.bf-invite {
  font-family: var(--bf-font-text); font-size: 15px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--bf-violet-deep);
  margin-bottom: -6px;
}

/* ---------- Língua: pt-PT na raiz, en-US em /en/, zh-Hans em /zh/ e nl em /nl/. As outras três
   línguas, cada uma no seu nome, discretas no canto do topo e no rodapé (acrescento ao caderno, que
   só tinha o inglês). */
.bf-hero { position: relative; }
.bf-langs { display: flex; flex-wrap: wrap; justify-content: flex-end; }
.bf-lang, .bf-footer-link {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px;
  border-radius: 999px; color: var(--bf-ink); text-decoration: none;
  font-family: var(--bf-font-text); font-size: 16px; font-weight: 600;
}
.bf-lang:hover, .bf-footer-link:hover { background: var(--bf-tint); color: var(--bf-ink); }
.bf-hero .bf-langs { position: absolute; top: 16px; right: max(16px, calc((100% - 1200px) / 2)); left: 16px; }
/* Nos telemóveis mais estreitos (320 px) as três línguas cabem numa linha só com menos margem. */
@media (max-width: 400px) { .bf-lang { padding: 0 8px; } }
.bf-footer .bf-wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }

/* ---------- Secções ---------- */
.bf-section { padding: var(--bf-section-pad) 16px; }
.bf-section--lilac { background: var(--bf-lilac); }
.bf-section-inner { display: flex; flex-direction: column; gap: 56px; }
.bf-h2 {
  font-family: var(--bf-font-display); font-weight: 700;
  font-size: clamp(36px, 4vw, 56px); line-height: 1.05; letter-spacing: -0.02em;
}
.bf-intro { display: flex; flex-direction: column; gap: 16px; max-width: 720px; }
.bf-intro p { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.5; }
.bf-h3 {
  font-family: var(--bf-font-display); font-weight: 700;
  font-size: clamp(24px, 2vw, 28px); line-height: 1.15;
}
.bf-body { font-size: clamp(18px, 1.4vw, 20px); line-height: 1.5; }

/* Three seats */
.bf-seats {
  display: grid; gap: 56px; align-items: center;
  grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr));
}
.bf-seats-drawing { width: 100%; max-width: 480px; height: auto; justify-self: center; overflow: visible; }
.bf-seats-list { display: flex; flex-direction: column; gap: 36px; }
.bf-seats-list li { display: flex; flex-direction: column; gap: 8px; }

/* How it works */
.bf-steps {
  display: grid; gap: 48px 40px;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
}
.bf-steps li { display: flex; flex-direction: column; gap: 14px; }
.bf-step-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.bf-step-num {
  font-family: var(--bf-font-display); font-weight: 800; font-size: 56px; line-height: 1;
  color: var(--bf-violet);
}
.bf-icon { width: 64px; height: 64px; overflow: visible; }
.bf-icon--lg { width: 72px; height: 72px; }
.bf-steps .bf-h3 { font-size: clamp(22px, 1.8vw, 26px); line-height: 1.2; }
.bf-steps p { font-size: 18px; line-height: 1.55; color: var(--bf-ink-soft); }

/* What we share */
.bf-share {
  display: grid; gap: 48px 40px;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}
.bf-share li { display: flex; flex-direction: column; gap: 14px; }

/* Principles */
.bf-principles {
  display: grid; gap: 0 56px;
  grid-template-columns: repeat(auto-fit, minmax(min(500px, 100%), 1fr));
}
.bf-principles li {
  display: flex; gap: 18px; align-items: flex-start;
  padding: 26px 0; border-top: 2px solid var(--bf-rule);
}
.bf-tick { width: 30px; height: 30px; flex: 0 0 30px; margin-top: 2px; overflow: visible; }
.bf-principles p {
  font-family: var(--bf-font-display); font-weight: 600;
  font-size: clamp(21px, 1.9vw, 27px); line-height: 1.25;
}
.bf-section--principles .bf-section-inner { gap: 48px; }

/* Perguntas frequentes */
.bf-faq {
  display: grid; gap: 40px 56px;
  grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr));
}
.bf-faq li { display: flex; flex-direction: column; gap: 10px; }
.bf-faq .bf-h3 { font-size: clamp(21px, 1.7vw, 24px); line-height: 1.25; }
/* Depois de uma secção lilás, o cartão lilás do contacto precisa de fundo claro por cima. */
.bf-section--lilac + .bf-cta-section { padding-top: var(--bf-section-pad); }

/* Get in touch */
.bf-cta-section { padding: 0 16px var(--bf-section-pad); }
.bf-cta {
  background: var(--bf-lilac); border-radius: 32px;
  padding: clamp(48px, 6vw, 88px) clamp(24px, 6vw, 88px);
  display: flex; flex-direction: column; align-items: flex-start; gap: 36px;
}
.bf-cta h2 {
  max-width: 900px;
  font-family: var(--bf-font-display); font-weight: 700;
  font-size: clamp(30px, 3.6vw, 52px); line-height: 1.12; letter-spacing: -0.02em;
  text-wrap: balance;
}
.bf-cta h2 span { color: var(--bf-violet-deep); }
.bf-cta-row { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.bf-cta-arrow { width: 110px; height: 44px; overflow: visible; }

/* Rodapé */
.bf-footer { padding: 32px 16px 48px; }
.bf-footer .bf-brand { font-size: 22px; }
.bf-footer .bf-brand img { width: 36px; height: 36px; }
/* A privacidade fica encostada às línguas, à direita. */
.bf-footer-link { margin-left: auto; }

/* ---------- Formulário (dialog) ---------- */
.bf-dialog {
  width: min(560px, calc(100% - 32px));
  max-height: calc(100dvh - 48px);
  padding: 0; overflow: auto;
  border: 2px solid var(--bf-ink); border-radius: 24px;
  box-shadow: 10px 10px 0 var(--bf-violet);
  background: var(--bf-white); color: var(--bf-ink);
}
.bf-dialog::backdrop {
  background: rgba(214, 200, 255, .82);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}
/* Sem JavaScript (ou sem suporte de <dialog>): /#contact mostra o formulário na página. */
html:not(.has-dialog) .bf-dialog:target { display: block; position: static; margin: 48px auto; max-height: none; }

.bf-form { display: flex; flex-direction: column; }
.bf-form-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 28px 28px 0 36px; }
.bf-form-body { display: flex; flex-direction: column; gap: 22px; padding: 22px 36px; }
.bf-form-title {
  font-family: var(--bf-font-display); font-weight: 700;
  font-size: 36px; line-height: 1.05; letter-spacing: -0.02em;
}
.bf-field { display: flex; flex-direction: column; gap: 8px; }
.bf-field label { font-size: 16px; font-weight: 600; }
.bf-input {
  width: 100%; min-height: 52px; padding: 12px 16px;
  border: 2px solid var(--bf-line); border-radius: 12px;
  background: var(--bf-white); color: var(--bf-ink);
  font-family: var(--bf-font-text); font-size: 18px; line-height: 1.45; /* >= 16 px: sem zoom no iPhone */
}
textarea.bf-input { min-height: 150px; resize: vertical; }
.bf-input:focus { outline: none; border-color: var(--bf-violet); box-shadow: 0 0 0 4px var(--bf-lilac); }
.bf-input[aria-invalid="true"] { border-color: var(--bf-error); }
.bf-error { display: flex; align-items: center; gap: 8px; font-size: 15px; line-height: 1.4; color: var(--bf-error); }
.bf-error[hidden] { display: none; }
.bf-error svg { width: 18px; height: 18px; flex: 0 0 18px; }
.bf-field-foot { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.bf-count { margin-left: auto; flex: 0 0 auto; font-size: 15px; color: var(--bf-ink-soft); }
/* Pistas do email e do telefone («Quis dizer …?», o país do indicativo): vazias, não ocupam lugar. */
.bf-hint { font-size: 15px; line-height: 1.4; color: var(--bf-ink-soft); }
.bf-hint:empty { display: none; }
.bf-turnstile { display: flex; flex-direction: column; gap: 10px; }
.bf-turnstile .cf-turnstile { min-height: 65px; max-width: 100%; }
.bf-note { font-size: 15px; color: var(--bf-ink-soft); }
.bf-form-foot { display: flex; justify-content: flex-end; padding: 0 36px 36px; }
.bf-form-foot .bf-btn { min-width: 160px; }

@media (max-width: 640px) {
  .bf-dialog {
    width: 100%; max-width: 100%;
    height: 100dvh; max-height: 100dvh;
    margin: 0; border: 0; border-radius: 0; box-shadow: none;
  }
  .bf-form { min-height: 100%; }
  .bf-form-head { padding: 10px 8px 10px 16px; border-bottom: 2px solid var(--bf-rule); }
  .bf-form-head .bf-brand { font-size: 19px; }
  .bf-form-head .bf-brand img { width: 30px; height: 30px; }
  .bf-form-body { flex: 1 1 auto; gap: 20px; padding: 24px 16px; }
  .bf-form-title { font-size: 32px; }
  .bf-form-foot {
    position: sticky; bottom: 0;
    padding: 12px 16px 20px;
    background: var(--bf-white); border-top: 2px solid var(--bf-rule);
  }
  .bf-form-foot .bf-btn { width: 100%; }
}

/* ---------- Páginas de resposta (/thanks/, /sorry/) ---------- */
.bf-reply { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.bf-reply-top { padding: 20px 16px; }
.bf-reply-main {
  flex: 1 1 auto; padding: 32px 16px 96px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 28px; text-align: center;
}
.bf-reply-drawing { width: clamp(200px, 22vw, 300px); height: auto; overflow: visible; }
.bf-reply-drawing--loop { width: clamp(140px, 13vw, 180px); }
.bf-reply h1 {
  font-family: var(--bf-font-display); font-weight: 800;
  font-size: clamp(48px, 6vw, 88px); line-height: 1; letter-spacing: -0.035em;
}
.bf-reply p { max-width: 560px; font-size: clamp(19px, 1.7vw, 23px); line-height: 1.45; color: var(--bf-ink-soft); text-wrap: balance; }
@media (max-width: 640px) {
  .bf-reply-top { padding: 12px 16px; }
  .bf-reply-main { gap: 24px; padding: 24px 16px 88px; }
}

/* ---------- Privacidade (/privacy/) ---------- */
.bf-legal { padding: 24px 16px var(--bf-section-pad); }
.bf-legal-inner { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }
.bf-legal h1 {
  margin-bottom: 8px;
  font-family: var(--bf-font-display); font-weight: 800;
  font-size: clamp(44px, 5vw, 72px); line-height: 1; letter-spacing: -0.035em;
}
.bf-legal h2 {
  margin-top: 18px;
  font-family: var(--bf-font-display); font-weight: 700;
  font-size: clamp(22px, 1.8vw, 26px); line-height: 1.2;
}
.bf-legal p { font-size: 18px; line-height: 1.6; }
.bf-legal .bf-legal-lead { font-size: clamp(19px, 1.7vw, 23px); line-height: 1.45; color: var(--bf-ink-soft); }
.bf-legal .bf-legal-date { margin-top: 18px; font-size: 15px; color: var(--bf-ink-soft); }

/* ---------- Chinês simplificado (/zh/ e a ligação «中文» das outras línguas) ----------
   As duas fontes do site só têm latim: os caracteres chineses vêm da fonte do sistema, na versão
   simplificada (macOS e iOS, Windows, Android e Linux, por esta ordem). Sem o aperto das letras dos
   títulos (os caracteres chineses colavam-se) e com mais entrelinha (ocupam a altura toda). */
:lang(zh) {
  --bf-font-display: 'Schibsted Grotesk', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans SC', 'Noto Sans CJK SC', 'Source Han Sans SC', sans-serif;
  --bf-font-text: 'Instrument Sans', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans SC', 'Noto Sans CJK SC', 'Source Han Sans SC', sans-serif;
}
:lang(zh) h1, :lang(zh) h2 { letter-spacing: 0; line-height: 1.25; }
/* O lema só quebra depois de cada «。» (os <wbr> da página), nunca a meio de uma palavra. */
:lang(zh) .bf-hero h1 { word-break: keep-all; }
:lang(zh) .bf-invite { letter-spacing: 0.08em; }

/* ---------- Animação ----------
   Só com JavaScript (classe .js no <html>) os traços começam escondidos.
   Sem JavaScript, tudo aparece já desenhado.
   Cada bloco .bf-anim desenha uma vez, quando ganha .is-drawn (ao abrir ou ao entrar no ecrã). */
@keyframes bfDraw { to { stroke-dashoffset: 0; } }
@keyframes bfIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.js .bf-anim .bf-draw { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.js .bf-anim .bf-in { opacity: 0; }
.js .bf-anim.is-drawn .bf-draw {
  animation: bfDraw var(--bf-dur, .6s) var(--bf-ease-draw) var(--bf-delay, 0s) forwards;
}
.js .bf-anim.is-drawn .bf-in {
  animation: bfIn .5s ease-out var(--bf-delay, 0s) forwards;
}

/* Atrasos (--bf-delay) */
.bf-d015 { --bf-delay: .15s; } .bf-d02 { --bf-delay: .2s; }  .bf-d03 { --bf-delay: .3s; }
.bf-d04 { --bf-delay: .4s; }   .bf-d045 { --bf-delay: .45s; } .bf-d05 { --bf-delay: .5s; }
.bf-d06 { --bf-delay: .6s; }   .bf-d07 { --bf-delay: .7s; }  .bf-d075 { --bf-delay: .75s; }
.bf-d08 { --bf-delay: .8s; }   .bf-d09 { --bf-delay: .9s; }  .bf-d1 { --bf-delay: 1s; }
.bf-d11 { --bf-delay: 1.1s; }  .bf-d12 { --bf-delay: 1.2s; } .bf-d13 { --bf-delay: 1.3s; }
.bf-d14 { --bf-delay: 1.4s; }  .bf-d15 { --bf-delay: 1.5s; } .bf-d16 { --bf-delay: 1.6s; }
.bf-d17 { --bf-delay: 1.7s; }  .bf-d19 { --bf-delay: 1.9s; } .bf-d21 { --bf-delay: 2.1s; }
/* Durações (--bf-dur) */
.bf-t03 { --bf-dur: .3s; }  .bf-t035 { --bf-dur: .35s; } .bf-t04 { --bf-dur: .4s; }
.bf-t07 { --bf-dur: .7s; }  .bf-t08 { --bf-dur: .8s; }   .bf-t09 { --bf-dur: .9s; }
.bf-t1 { --bf-dur: 1s; }

/* «Reduzir movimento»: EM ABERTO (ponto 1 da Parte 2 do briefing).
   Hoje segue a decisão do nunovelho.com: a animação corre sempre.
   Se o Nuno decidir que aqui os desenhos aparecem já feitos, descomentar:
@media (prefers-reduced-motion: reduce) {
  .js .bf-anim .bf-draw { stroke-dashoffset: 0; animation: none !important; }
  .js .bf-anim .bf-in { opacity: 1; animation: none !important; }
}
*/