/* ============================================================
   LAYOUT - container, header, cabeçalhos de secção, footer
   ============================================================ */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
}

/* ------------------------------------------------------------
   HEADER - barra fixa com "pill" central
   Fica fora de qualquer wrapper com overflow, como filho
   direto do body, para não quebrar o position:fixed.
   ------------------------------------------------------------ */
.header {
  position: fixed;
  top: 0;
  left: 0;
  /* width:100% num elemento fixed resolve contra o viewport (sem a
     barra de scroll). 100vw incluiria a barra e criaria overflow
     horizontal no desktop; `right:0` pode ser calculado a partir do
     documento quando há overflow. */
  width: 100%;
  z-index: 100;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  transition: transform var(--t-base) var(--e-out);
}

.header.is-hidden { transform: translate3d(0, -140%, 0); }

.header__bar {
  position: relative;
  z-index: 2;             /* acima do overlay da nav mobile (z-index 1) */
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 32px var(--gutter);
  transition: padding var(--t-base) var(--e-out);
}
.header.is-stuck .header__bar { padding-block: 16px; }

.header__pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  max-width: var(--header-pill);
  /* Mais respiro nos lados do que em cima e em baixo: a logo é arte
     aberta e encosta à margem do PNG (só ~2px de folga), enquanto o
     CTA é uma forma sólida. Com 8px iguais a logo parecia colada. */
  padding: 8px 20px;
  border-radius: 56px;
  background: var(--c-white);
  overflow: hidden;
  transition: box-shadow var(--t-base) var(--e-out),
              background var(--t-base) var(--e-out);
}
.header.is-stuck .header__pill {
  box-shadow: var(--shadow-soft);
}

/* a logo é limitada pela altura, não pela largura: assim a caixa
   adapta-se a qualquer proporção sem sair da barra */
.header__logo {
  flex: 0 0 auto;
  color: var(--c-deep);
}
.header__logo img { height: 46px; width: auto; }

.header__nav {
  display: flex;
  align-items: center;
}

.header__menu {
  display: flex;
  align-items: center;
}

/* Peças exclusivas do overlay mobile: CTA duplicado, topo com logo
   e fechar, e as redes sociais. Especificidade 0,2,0 para vencer
   .btn { display:inline-flex }. */
.header__nav > .header__nav-cta,
.header__nav > .header__nav-top,
.header__nav > .header__social { display: none; }

/* ------------------------------------------------------------
   Cabeçalhos de secção
   ------------------------------------------------------------ */
.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  width: 100%;
}

.section-head__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  max-width: 680px;
}

.section-head--stack {
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.section-head--center {
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}
.section-head--center .h2 { max-width: 780px; }
.section-head--center p   { max-width: 620px; }

/* ------------------------------------------------------------
   Bloco final - CTA + Footer partilham a mesma imagem de fundo
   ------------------------------------------------------------ */
.outro {
  position: relative;
  padding: 80px 0 60px;
  overflow: hidden;
  isolation: isolate;
}

.outro__media {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.outro__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.outro__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(42, 37, 32, .78) 0%, rgba(42, 37, 32, .62) 100%);
}

/* --- CTA --- */
.cta { padding: 0 var(--gutter) 80px; }

.cta__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}

/* --- Footer --- */
.footer { padding-inline: var(--gutter); }

.footer__container {
  max-width: 1380px;
  padding: 48px;
  border-radius: var(--r-lg);
  background: var(--c-white);
  display: flex;
  flex-direction: column;
  gap: 52px;
}

.footer__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  width: 100%;
}

.footer__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  max-width: 344px;
  flex: 1 1 280px;
}
.footer__logo { color: var(--c-deep); }
.footer__logo img { height: 52px; width: auto; }

.footer__col {
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex: 0 1 auto;
}
.footer__col-title { font-weight: 600; }

.footer__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer__bottom {
  padding-top: 12px;
  border-top: 1px solid var(--c-deep-10);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
  width: 100%;
}