/* Barcelona Co. Power Generation Solutions: componentes */

/* ============================ HEADER ============================
   Transparente sobre o heroi, que e escuro e sangra ate o topo.
   Vira barra clara solida so depois que a pagina rola.

   Sem fio nenhum na base, em estado nenhum: a separacao vem da sombra
   difusa e do desfoque do que passa por baixo. Decisao do cliente. */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  color: var(--text-lt);
  transition: background var(--t-mid) var(--ease),
              color var(--t-mid) var(--ease),
              box-shadow var(--t-mid) var(--ease);
}
.header.is-stuck {
  background: rgba(230,232,225,.92);
  backdrop-filter: blur(14px) saturate(150%);
  color: var(--text);
  box-shadow: 0 16px 36px -24px rgba(15,25,19,.55);
}

/* menu aberto: o painel e escuro e ocupa a tela inteira, entao a barra
   volta pro estado transparente mesmo que a pagina esteja rolada. Sem
   isso o cabecalho fica claro em cima de um menu escuro.

   `.header` entra na cadeia de todas estas regras de proposito: sem ele
   o seletor perde por especificidade pro `.header.is-stuck` que esta
   justamente desfazendo, e o menu abre com a marca verde apagada sobre
   o painel preto. */
body.nav-open .header {
  background: transparent;
  backdrop-filter: none;
  color: var(--text-lt);
  box-shadow: none;
}

.header__in {
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
}

/* Logo no cabecalho: a marca completa do cliente, com as tres faixas que
   ele desenhou (wordmark, aqueduto, descritor). O header e transparente
   sobre o heroi escuro e so fica solido claro depois que a pagina rola,
   entao a marca precisa de duas versoes empilhadas com crossfade, nao
   uma cor so. A altura manda na medida, porque e a altura que a barra
   limita: a largura sai dela. */
.brand { position: relative; display: flex; align-items: center; flex-shrink: 0; text-decoration: none; }
.brand__mark {
  height: var(--brand-h);
  width: auto;
  display: block;
  transition: opacity var(--t-mid) var(--ease);
}
.brand__mark--dark {
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  opacity: 0;
}
.header.is-stuck .brand__mark--light { opacity: 0; }
.header.is-stuck .brand__mark--dark  { opacity: 1; }

body.nav-open .header .brand__mark--light { opacity: 1; }
body.nav-open .header .brand__mark--dark  { opacity: 0; }

.nav { display: flex; align-items: center; gap: var(--sp-6); }

.nav__link {
  text-decoration: none;
  font-size: var(--fs-small);
  font-weight: 500;
  color: inherit;
  padding: var(--sp-2) 0;
  position: relative;
  white-space: nowrap;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-mid) var(--ease);
}
.nav__link:hover::after,
.nav__link[aria-current="page"]::after { transform: scaleX(1); }

.header__cta { display: flex; align-items: center; gap: var(--sp-4); }

@media (max-width: 1040px) { .nav, .header__cta .btn { display: none; } }

/* burger */
.burger {
  display: none;
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid currentColor;
  border-radius: var(--r-md);
  cursor: pointer;
  color: inherit;
  opacity: .8;
}
@media (max-width: 1040px) { .burger { display: flex; } }

.burger span {
  display: block;
  width: 19px; height: 1.6px;
  background: currentColor;
  position: relative;
  transition: background var(--t-fast) var(--ease);
}
.burger span::before, .burger span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 19px; height: 1.6px;
  background: currentColor;
  transition: transform var(--t-mid) var(--ease);
}
.burger span::before { top: -6px; }
.burger span::after  { top: 6px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span::after  { transform: translateY(-6px) rotate(-45deg); }

/* ---------------------------- MENU MOBILE ----------------------------
   O painel vive fora do <header> de proposito. Enquanto era filho dele,
   o `backdrop-filter` que entra junto com `.is-stuck` transformava o
   cabecalho em bloco de contencao do `position:fixed`, e o menu colapsava
   pra altura da barra: abria mostrando so o primeiro link e vazava o
   conteudo da pagina por baixo. Filtro em ancestral faz isso com todo
   descendente fixo, entao a correcao e a irmandade, nao trocar o filtro. */
.mnav {
  position: fixed;
  inset: 0;
  z-index: 99;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--sp-7);
  background: var(--ink);
  color: var(--text-lt);
  padding: calc(var(--header-h) + var(--sp-6)) 0 max(var(--sp-8), env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--t-mid) var(--ease),
              visibility 0s linear var(--t-mid);
}
.mnav.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity var(--t-mid) var(--ease), visibility 0s;
}
body.no-scroll { overflow: hidden; }

.mnav__nav { display: block; }

.mnav__link {
  display: flex;
  align-items: baseline;
  gap: var(--sp-4);
  text-decoration: none;
  font-family: var(--font-head);
  font-stretch: var(--wdth-head);
  font-size: clamp(1.6rem, 7vw, 2.15rem);
  font-weight: 700;
  letter-spacing: var(--ls-head);
  color: var(--white);
  padding: var(--sp-4) 0;
  border-top: 1px solid var(--green-line);
  transition: color var(--t-fast) var(--ease);
}
.mnav__nav > .mnav__link:last-child { border-bottom: 1px solid var(--green-line); }
.mnav__link:hover,
.mnav__link[aria-current="page"] { color: var(--gold-hi); }

.mnav__foot {
  display: grid;
  gap: var(--sp-5);
  padding-top: var(--sp-7);
}
.mnav__foot .btn { width: 100%; }
/* sem botao acima, o fio da lista de links ja separa: dois fios colados
   viram sujeira */
.mnav__foot > .mnav__tel:first-child { border-top: 0; padding-top: 0; }
.mnav__tel {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  text-decoration: none;
  padding-top: var(--sp-5);
  border-top: 1px solid var(--green-line);
}
.mnav__tel small {
  font-family: var(--font-mono);
  font-size: var(--fs-plate);
  letter-spacing: var(--ls-plate);
  text-transform: uppercase;
  color: var(--text-lt-mut);
}
.mnav__tel strong {
  font-family: var(--font-head);
  font-stretch: var(--wdth-head);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: -0.014em;
  color: var(--white);
}

/* entrada escalonada, so na abertura */
.mnav.is-open .mnav__link,
.mnav.is-open .mnav__foot { animation: mnavUp 460ms var(--ease-out) both; }
.mnav.is-open .mnav__link:nth-child(1) { animation-delay: 40ms; }
.mnav.is-open .mnav__link:nth-child(2) { animation-delay: 80ms; }
.mnav.is-open .mnav__link:nth-child(3) { animation-delay: 120ms; }
.mnav.is-open .mnav__link:nth-child(4) { animation-delay: 160ms; }
.mnav.is-open .mnav__link:nth-child(5) { animation-delay: 200ms; }
.mnav.is-open .mnav__foot { animation-delay: 250ms; }
@keyframes mnavUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ============================ BOTOES ============================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 1;
  padding: .95rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease);
}

.btn--gold  { background: var(--gold); color: #201500; }
.btn--gold:hover { background: var(--gold-hi); }

.btn--green { background: var(--green); color: var(--white); }
.btn--green:hover { background: var(--ink); }

.btn--ghost { background: none; color: var(--green); border-color: var(--concrete); }
.btn--ghost:hover { border-color: var(--green); }

.btn--onDark { background: none; color: var(--text-lt); border-color: rgba(233,236,231,.4); }
.btn--onDark:hover { background: rgba(255,255,255,.08); border-color: var(--text-lt); }

.btn--lg { padding: 1.1rem 1.9rem; font-size: 1rem; }

/* ============================ HEROI ============================
   A foto cobre a secao inteira, sem moldura e sem caixa. A legibilidade
   do texto vem de um gradiente por cima da foto, nunca de baixar a
   opacidade dela: a imagem continua nitida e o equipamento fica visivel
   inteiro do lado direito, que e onde o gradiente ja se dissolveu. */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(36rem, 86vh, 50rem);
  background: var(--ink);
  color: var(--text-lt);
  overflow: hidden;
  /* o cabecalho e sticky e fica transparente aqui: puxar o heroi por baixo
     dele e o que deixa a foto sangrar ate a barra do sistema */
  margin-top: calc(var(--header-h) * -1);
  padding-top: calc(var(--header-h) + clamp(2.5rem, 6vw, 4.5rem));
  padding-bottom: clamp(3rem, 6vw, 5rem);
}

.hero__media { position: absolute; inset: 0; }
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* enquadra pelo equipamento, nao pelo centro geometrico: o corte
     vertical cai no ceu e na base da estrutura, nunca nos isoladores */
  object-position: 70% 46%;
  /* o ceu da foto e um azul saturado que briga com o verde da marca.
     Isso e correcao de cor, nao opacidade: a imagem continua nitida e
     nada nela e apagado, so sai do registro de cartao-postal */
  filter: saturate(.72) contrast(1.04);
  animation: heroZoom 1600ms var(--ease-out) both;
}
@keyframes heroZoom { from { transform: scale(1.06); } to { transform: scale(1); } }

/* Tres camadas com papeis distintos: a de cima escurece so a faixa do
   cabecalho, pra marca ler sobre o ceu; o foco no canto inferior esquerdo
   cobre a viga clara da foto, que e onde o trilho de dados cai e o unico
   ponto que reprovava no contraste; e a diagonal e a rampa de leitura,
   densa onde o texto vive e quase ausente no terco direito. */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom,
      rgba(15,25,19,.86) 0%,
      rgba(15,25,19,.62) 9%,
      rgba(15,25,19,.20) 20%,
      rgba(15,25,19,0) 34%),
    radial-gradient(115% 78% at 0% 100%,
      rgba(15,25,19,.72) 0%,
      rgba(15,25,19,.42) 42%,
      rgba(15,25,19,0) 72%),
    linear-gradient(97deg,
      rgba(15,25,19,.97) 0%,
      rgba(15,25,19,.94) 24%,
      rgba(15,25,19,.84) 40%,
      rgba(15,25,19,.56) 56%,
      rgba(15,25,19,.30) 72%,
      rgba(15,25,19,.16) 100%);
}

.hero__wrap { position: relative; }
.hero__in { max-width: 35rem; }
.hero h1 {
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  color: var(--white);
}
.hero__lead {
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: #C4CEC7;
  margin-top: var(--sp-5);
  max-width: 33rem;
}
.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-top: var(--sp-7);
}

/* trilho de dados, no espirito da chapa de identificacao do equipamento */
.hero__rail {
  display: flex;
  flex-wrap: wrap;
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: 1px solid rgba(233,236,231,.22);
}
.hero__rail li {
  font-family: var(--font-mono);
  font-size: var(--fs-plate);
  font-weight: 500;
  letter-spacing: var(--ls-plate);
  text-transform: uppercase;
  /* um degrau mais claro que o secundario padrao do escuro: em 11px sobre
     foto o `--text-lt-mut` fica em 3.5:1, abaixo do minimo de corpo */
  color: #C4CEC7;
  padding-inline: var(--sp-4);
  border-left: 1px solid rgba(233,236,231,.22);
  white-space: nowrap;
}
.hero__rail li:first-child { padding-left: 0; border-left: 0; }

/* sequencia de entrada, uma so vez, na primeira dobra */
.hero__in > * { animation: heroUp 720ms var(--ease-out) both; }
.hero__in > :nth-child(1) { animation-delay: 170ms; }
.hero__in > :nth-child(2) { animation-delay: 280ms; }
.hero__in > :nth-child(3) { animation-delay: 380ms; }
.hero__in > :nth-child(4) { animation-delay: 470ms; }
@keyframes heroUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }

@media (max-width: 900px) {
  /* no celular nao existe "a direita": a rampa gira pra vertical, a foto
     fica limpa na parte de cima da tela e o texto entra na base, sobre a
     parte densa do gradiente */
  .hero {
    align-items: flex-end;
    min-height: clamp(34rem, 92vh, 46rem);
    /* o texto comeca mais abaixo de proposito: e o que abre uma janela
       limpa de foto no alto da tela e ao mesmo tempo poe o titulo ja
       dentro da parte densa da rampa */
    padding-top: calc(var(--header-h) + clamp(9rem, 34vw, 14rem));
    padding-bottom: var(--sp-9);
  }
  .hero__media img { object-position: 96% 46%; }
  /* a faixa do cabecalho tem que ficar densa: o aqueduto do logo tem
     partes semitransparentes e pega o azul do ceu por tras se o topo
     ficar claro demais */
  .hero__media::after {
    background: linear-gradient(to bottom,
      rgba(15,25,19,.90) 0%,
      rgba(15,25,19,.74) 7%,
      rgba(15,25,19,.28) 15%,
      rgba(15,25,19,.26) 22%,
      rgba(15,25,19,.62) 30%,
      rgba(15,25,19,.88) 37%,
      rgba(15,25,19,.96) 46%,
      rgba(15,25,19,.99) 60%,
      var(--ink) 100%);
  }
  .hero__in { max-width: none; }
}
@media (max-width: 720px) {
  .hero__cta .btn { width: 100%; }
  /* sem os fios verticais a lista quebrava em duas linhas encostadas e
     com vao irregular; vira empilhada, cada termo na sua linha */
  .hero__rail { display: grid; gap: var(--sp-3); justify-items: start; }
  .hero__rail li { border-left: 0; padding-inline: 0; }
}

/* ============================ A LACUNA ============================ */
.gap-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-8) var(--sp-6);
  margin-top: var(--sp-9);
}
.gap-item .plate { margin-bottom: var(--sp-2); }
.gap-item p { color: var(--text-mut); font-size: 1rem; line-height: 1.62; }

@media (max-width: 900px) { .gap-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .gap-grid { grid-template-columns: 1fr; gap: var(--sp-6); } }

.closer {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding-top: var(--sp-6);
  border-top: 2px solid var(--gold);
  font-family: var(--font-head);
  font-stretch: var(--wdth-head);
  font-size: clamp(1.35rem, 2.5vw, 2.05rem);
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: -0.02em;
  color: var(--green);
  max-width: 46rem;
}

/* ============================ DIAGRAMA UNIFILAR ============================
   Assinatura da pagina. E o desenho padrao da engenharia eletrica: um
   barramento com os equipamentos pendurados nele, na ordem em que a energia
   percorre. E a unica secao onde a numeracao carrega informacao de verdade,
   porque aqui a ordem e a propria informacao. */
.oneline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-7);
  margin-top: clamp(3rem, 6vw, 5rem);
  padding-top: 3.5rem;
}
.oneline::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1000ms var(--ease-out);
}
.oneline.is-in::before { transform: scaleX(1); }

.step { position: relative; }
.step__node {
  position: absolute;
  left: 0;
  top: -3.5rem;
  width: 13px; height: 13px;
  margin-top: -5.5px;
  border: 2px solid var(--gold);
  background: var(--ink);
  border-radius: 1px;
  opacity: 0;
  transform: scale(.4);
  transition: opacity var(--t-mid) var(--ease-out), transform var(--t-mid) var(--ease-out);
}
.step__stem {
  position: absolute;
  left: 6px;
  top: -3.5rem;
  width: 1px;
  height: 3.5rem;
  background: rgba(240,168,0,.42);
  opacity: 0;
  transition: opacity var(--t-mid) var(--ease);
}
.oneline.is-in .step__node { opacity: 1; transform: none; }
.oneline.is-in .step__stem { opacity: 1; }
.oneline.is-in .step:nth-child(1) .step__node, .oneline.is-in .step:nth-child(1) .step__stem { transition-delay: 240ms; }
.oneline.is-in .step:nth-child(2) .step__node, .oneline.is-in .step:nth-child(2) .step__stem { transition-delay: 420ms; }
.oneline.is-in .step:nth-child(3) .step__node, .oneline.is-in .step:nth-child(3) .step__stem { transition-delay: 600ms; }
.oneline.is-in .step:nth-child(4) .step__node, .oneline.is-in .step:nth-child(4) .step__stem { transition-delay: 780ms; }

.step .plate { color: var(--gold-hi); margin-bottom: var(--sp-3); }
.step h3 { color: var(--white); }
.step p { margin-top: var(--sp-3); color: var(--text-lt-mut); font-size: var(--fs-small); }

@media (max-width: 900px) {
  /* o barramento gira: desce pela esquerda, com as etapas penduradas nele */
  .oneline {
    grid-template-columns: 1fr;
    gap: var(--sp-8);
    padding-top: 0;
    padding-left: var(--sp-7);
  }
  .oneline::before {
    left: 6px; right: auto; top: 0; bottom: 0;
    width: 2px; height: auto;
    transform: scaleY(0);
    transform-origin: top;
  }
  .oneline.is-in::before { transform: scaleY(1); }
  .step__node { left: calc(var(--sp-7) * -1); top: .55rem; margin-top: 0; }
  .step__stem { display: none; }
}

/* modos de aplicacao, logo abaixo do diagrama */
.modes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-6);
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding-top: var(--sp-7);
  border-top: 1px solid var(--green-line);
}
.modes .plate { margin-bottom: var(--sp-2); }
.modes p { color: var(--text-lt-mut); font-size: var(--fs-small); }

@media (max-width: 780px) { .modes { grid-template-columns: 1fr; gap: var(--sp-5); } }

/* ============================ CARROSSEL ============================ */
.carou {
  --carou-card: clamp(15rem, 32vw, 29rem);
  position: relative;
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
@media (min-width: 901px) and (max-width: 1200px) { .carou { --carou-card: 40vw; } }
/* no celular a medida e percentual da propria trilha, nao vw: o .wrap tem
   goteira, entao vw estoura e o card seguinte deixa de espiar na borda */
@media (max-width: 900px)  { .carou { --carou-card: 86%; } }

.carou__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--carou-card);
  gap: var(--sp-6);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: var(--sp-2);
}
.carou__track::-webkit-scrollbar { display: none; }
.carou__track:focus-visible { outline-offset: 6px; }

.ccard { scroll-snap-align: start; }
.ccard__fig {
  aspect-ratio: 5 / 4;
  overflow: hidden;
  background: var(--concrete);
  border-radius: var(--r-lg);
}
.ccard__fig img { width: 100%; height: 100%; object-fit: cover; }
.ccard .plate { display: block; margin-top: var(--sp-5); }
.ccard h3 { margin-top: var(--sp-3); color: var(--green); }
.ccard p { margin-top: var(--sp-3); color: var(--text-mut); font-size: var(--fs-small); }

/* setas na altura do meio da imagem do card, nao no topo da secao */
.carou__nav {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: calc(var(--carou-card) * .8);
  pointer-events: none;
}
.carou__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: auto;
  width: 48px; height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ink);
  color: var(--gold-hi);
  border: 0;
  border-radius: var(--r-md);
  cursor: pointer;
  box-shadow: var(--shadow-md);
  transition: background var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}
.carou__btn:hover { background: var(--green); }
.carou__btn[disabled] { opacity: .3; cursor: default; }
.carou__btn--prev { left: -14px; }
.carou__btn--next { right: -14px; }

@media (max-width: 900px) {
  /* no celular a navegacao e o proprio arrasto, com o card seguinte
     aparecendo na borda. Seta sobre o card brigaria com o scroll da pagina */
  .carou__nav { display: none; }
}

.carou__hint {
  display: none;
  margin-top: var(--sp-5);
  font-family: var(--font-mono);
  font-size: var(--fs-plate);
  letter-spacing: var(--ls-plate);
  text-transform: uppercase;
  color: var(--text-mut);
}
@media (max-width: 900px) { .carou__hint { display: block; } }

/* ============================ APLICACOES ============================ */
.appcards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-5);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.appcard {
  background: var(--white);
  border-radius: var(--r-lg);
  padding: var(--sp-7) var(--sp-7) var(--sp-8);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  box-shadow: var(--shadow-sm);
  transition: transform var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease);
}
.appcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.appcard h3 { color: var(--green); }
.appcard p { color: var(--text-mut); font-size: 1rem; }

@media (max-width: 980px) { .appcards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .appcards { grid-template-columns: 1fr; } }

/* ============================ CHAMADA DE INVESTIDOR ============================ */
.invite {
  position: relative;
  background: var(--ink);
  color: var(--text-lt);
  overflow: hidden;
}
.invite__media { position: absolute; inset: 0; }
.invite__media img { width: 100%; height: 100%; object-fit: cover; }
.invite__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(96deg, rgba(15,25,19,.94) 0%, rgba(15,25,19,.82) 46%,
                              rgba(15,25,19,.38) 100%);
}
/* o limite de largura vive num filho, nunca no .wrap: somar max-width ao
   margin-inline:auto do .wrap centraliza a secao e quebra o eixo da pagina */
.invite__wrap { position: relative; z-index: 1; }
.invite__in { max-width: 42rem; }
.invite h2 { color: var(--white); }
.invite__cta { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-top: var(--sp-7); }

@media (max-width: 720px) { .invite__cta .btn { width: 100%; } }

/* ============================ CONTATO ============================ */
.contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: start;
}
@media (max-width: 860px) { .contact { grid-template-columns: 1fr; } }

.cline {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-5) 0;
  border-bottom: 1px solid var(--concrete);
}
.cline:first-child { border-top: 1px solid var(--concrete); }
.cline dt {
  font-family: var(--font-mono);
  font-size: var(--fs-plate);
  font-weight: 500;
  letter-spacing: var(--ls-plate);
  text-transform: uppercase;
  color: var(--text-mut);
}
.cline dd {
  margin: 0;
  font-family: var(--font-head);
  font-stretch: var(--wdth-head);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: -0.014em;
  color: var(--green);
}
.cline dd a { text-decoration: none; }
.cline dd a:hover { color: var(--gold-ink); }

/* ============================ FORMULARIO ============================ */
.form { display: grid; gap: var(--sp-5); }

.form__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-5);
  align-items: start;
}
@media (max-width: 700px) { .form__row { grid-template-columns: 1fr; } }

.field { display: grid; gap: var(--sp-2); }
.field label { font-size: var(--fs-small); font-weight: 600; color: var(--text); }
.field .req { color: var(--gold-ink); }

.field input, .field select, .field textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: .975rem;
  color: var(--text);
  background: var(--white);
  border: 1px solid var(--concrete);
  border-radius: var(--r-md);
  padding: .85rem .95rem;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
  appearance: none;
}
.field textarea { min-height: 7.5rem; resize: vertical; }

.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%2355625B' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
  cursor: pointer;
}

.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(44,78,61,.16);
}

.field.has-error input, .field.has-error select, .field.has-error textarea {
  border-color: #B3261E;
}
.field__err {
  font-size: .8rem;
  color: #B3261E;
  display: none;
  align-items: center;
  gap: .35em;
}
.field.has-error .field__err { display: flex; }
.field__hint { font-size: .8rem; color: var(--text-mut); }

/* honeypot: campo isca pra bot, fora da tela e fora da ordem de foco */
.form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.btn[data-loading="true"] { pointer-events: none; opacity: .72; }
.btn__spin { display: none; width: 15px; height: 15px; animation: spin .7s linear infinite; }
.btn[data-loading="true"] .btn__spin { display: block; }
@keyframes spin { to { transform: rotate(360deg); } }

.form__msg {
  display: none;
  gap: var(--sp-4);
  padding: var(--sp-5);
  border-radius: var(--r-md);
  font-size: var(--fs-small);
  align-items: flex-start;
  line-height: 1.55;
}
.form__msg.is-on { display: flex; }
.form__msg strong { display: block; margin-bottom: var(--sp-1); }
.form__msg--ok   { background: rgba(44,78,61,.09);  border: 1px solid rgba(44,78,61,.30);  color: var(--green); }
.form__msg--err  { background: rgba(179,38,30,.08); border: 1px solid rgba(179,38,30,.30); color: #B3261E; }
.form__msg--note { background: rgba(240,168,0,.12); border: 1px solid rgba(240,168,0,.42); color: var(--gold-ink); }

.form__submit { display: flex; flex-direction: column; gap: var(--sp-4); }
.form__note { font-size: .82rem; color: var(--text-mut); margin: 0; }

/* ============================ PAGINA INTERNA ============================ */
.phero {
  background: var(--ink);
  color: var(--text-lt);
  padding-block: calc(var(--header-h) + clamp(3rem, 6vw, 5rem)) clamp(3.25rem, 7vw, 5.5rem);
  margin-top: calc(var(--header-h) * -1);
  position: relative;
  overflow: hidden;
}
.phero__media { position: absolute; inset: 0; }
.phero__media img { width: 100%; height: 100%; object-fit: cover; }
.phero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(98deg, rgba(15,25,19,.95) 0%, rgba(15,25,19,.88) 48%,
                              rgba(15,25,19,.58) 100%);
}
.phero__wrap { position: relative; z-index: 1; }
.phero__in { max-width: 44rem; }
.phero h1 { color: var(--white); }

.crumb {
  font-family: var(--font-mono);
  font-size: var(--fs-plate);
  letter-spacing: var(--ls-plate);
  text-transform: uppercase;
  color: var(--text-lt-mut);
  margin-bottom: var(--sp-5);
}
.crumb a { text-decoration: none; }
.crumb a:hover { color: var(--gold-hi); }

/* nota institucional discreta */
.disclaimer {
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--concrete);
  font-size: .82rem;
  line-height: 1.62;
  color: var(--text-mut);
}

/* ============================ RODAPE ============================ */
.footer {
  background: var(--ink);
  color: var(--text-lt-mut);
  padding-block: var(--sp-10) var(--sp-7);
  font-size: var(--fs-small);
}
.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) repeat(2, minmax(0, 1fr));
  gap: var(--sp-8);
  padding-bottom: var(--sp-8);
  border-bottom: 1px solid var(--green-line);
}
@media (max-width: 820px) { .footer__top { grid-template-columns: 1fr; gap: var(--sp-7); } }

.footer__brand img { width: 224px; height: auto; }
.footer__brand p { margin-top: var(--sp-5); max-width: 26rem; }

.footer h3 {
  font-family: var(--font-mono);
  font-size: var(--fs-plate);
  font-weight: 500;
  font-stretch: normal;
  letter-spacing: var(--ls-plate);
  text-transform: uppercase;
  color: var(--text-lt-mut);
  margin-bottom: var(--sp-4);
}
.footer li + li { margin-top: var(--sp-3); }
.footer a { text-decoration: none; transition: color var(--t-fast) var(--ease); }
.footer a:hover { color: var(--gold-hi); }

.footer__btm {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4) var(--sp-6);
  justify-content: space-between;
  align-items: center;
  padding-top: var(--sp-6);
  font-size: .82rem;
}
.footer__btm p { margin: 0; }

/* ============================ 404 ============================ */
.nf {
  min-height: 58vh;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}