/*
 * layout.css — Header fixo, navegação, footer e estrutura global
 */

/* ═══════════════════════════════════════════════════════
   HEADER — fixo, transparente → escurece ao scrollar
═══════════════════════════════════════════════════════ */
#hd {
  position: fixed;
  top:      0;
  left:     0;
  right:    0;
  z-index:  900;
}

.hd-inner {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  height:          72px;
  padding:         0 40px;
  transition:
    background var(--t) var(--ease),
    box-shadow var(--t) var(--ease),
    height     var(--t) var(--ease);
}

/* Estado scrollado: fundo carvão semitransparente */
#hd.scrolled .hd-inner {
  height:            62px;
  background:        rgba(30, 30, 30, .96);
  backdrop-filter:   blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow:        0 2px 30px rgba(0, 0, 0, .25);
}

/* ── Logo: apenas texto ─────────────────────────────── */
.logo {
  display:        flex;
  flex-direction: column;
  line-height:    1;
  text-decoration:none;
}

.logo-main {
  font-family:   var(--f-display);
  font-size:     20px;
  font-weight:   700;
  color:         #fff;
  letter-spacing:.04em;
}

/* O ponto âmbar referencia o "." do logotipo original */
.logo-main .dot { color: var(--amber); }

.logo-sub {
  font-family:    var(--f-display);
  font-size:      8px;
  font-weight:    400;
  color:          rgba(255, 255, 255, .4);
  letter-spacing: .22em;
  text-transform: uppercase;
  margin-top:     1px;
}

/* ── Navegação desktop ──────────────────────────────── */
.nav-desktop {
  display:     flex;
  align-items: center;
  gap:         4px;
}

.nav-desktop a {
  font-family:    var(--f-display);
  font-size:      13px;
  font-weight:    500;
  color:          rgba(255, 255, 255, .7);
  padding:        8px 14px;
  border-radius:  20px;
  letter-spacing: .02em;
  transition:     color var(--t), background var(--t);
}
.nav-desktop a:hover {
  color:      #fff;
  background: rgba(255, 255, 255, .08);
}

/* Botão CTA no nav */
.nav-cta {
  background:    var(--amber);
  color:         var(--charcoal) !important;
  font-weight:   700 !important;
  padding:       8px 20px !important;
  margin-left:   8px;
  border-radius: var(--r-xl) !important;
  transition:    background var(--t), box-shadow var(--t), transform var(--t) !important;
}
.nav-cta:hover {
  background:  var(--amber-dark) !important;
  box-shadow:  var(--sh-amber) !important;
  transform:   translateY(-1px) !important;
}

/* ── Botão hamburguer (mobile) ──────────────────────── */
.hamburger {
  display:        none;
  flex-direction: column;
  gap:            5px;
  padding:        8px;
  cursor:         pointer;
  background:     none;
  border:         none;
}
.hamburger span {
  display:       block;
  width:         24px;
  height:        2px;
  background:    #fff;
  border-radius: 2px;
  transition:    var(--t) var(--ease);
}

/* ── Navegação mobile ───────────────────────────────── */
.nav-mobile {
  display:         none;
  flex-direction:  column;
  gap:             3px;
  position:        fixed;
  top:             62px;
  left:            0;
  right:           0;
  background:      var(--dark-section);
  padding:         18px 24px 26px;
  border-top:      1px solid rgba(255, 255, 255, .06);
  z-index:         899;
}
.nav-mobile.open { display: flex; }

.nav-mobile a {
  font-family:   var(--f-display);
  font-size:     15px;
  font-weight:   500;
  color:         rgba(255, 255, 255, .78);
  padding:       13px 16px;
  border-radius: var(--r-sm);
  transition:    background var(--t), color var(--t);
}
.nav-mobile a:hover {
  background: rgba(255, 255, 255, .06);
  color:      #fff;
}
.nav-mobile .nav-cta {
  background:    var(--amber) !important;
  color:         var(--charcoal) !important;
  font-weight:   700 !important;
  text-align:    center;
  margin-top:    8px;
  border-radius: var(--r-xl) !important;
}

/* ═══════════════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════════════ */
#ft {
  background: #111111;
  padding:    60px 0 28px;
}

.ft-grid {
  display:               grid;
  grid-template-columns: 1.8fr 1fr 1fr 1fr;
  gap:                   44px;
  padding-bottom:        44px;
  border-bottom:         1px solid rgba(255, 255, 255, .06);
  margin-bottom:         28px;
}

/* Logo no footer */
.ft-logo-wrap { margin-bottom: 16px; }

.ft-logo-main {
  font-family:    var(--f-display);
  font-size:      19px;
  font-weight:    700;
  color:          #fff;
  letter-spacing: .04em;
  margin-bottom:  2px;
}
.ft-logo-main .dot { color: var(--amber); }

.ft-logo-sub {
  font-family:    var(--f-display);
  font-size:      8px;
  font-weight:    400;
  color:          rgba(255, 255, 255, .28);
  letter-spacing: .22em;
  text-transform: uppercase;
}

.ft-brand p {
  font-size:   14px;
  color:       rgba(255, 255, 255, .3);
  line-height: 1.72;
  max-width:   240px;
  margin-top:  14px;
}

/* Colunas do footer */
.ft-col h4 {
  font-family:    var(--f-display);
  font-size:      11px;
  font-weight:    700;
  color:          rgba(255, 255, 255, .3);
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom:  18px;
}
.ft-col ul {
  display:        flex;
  flex-direction: column;
  gap:            9px;
}
.ft-col a {
  font-size:  14px;
  color:      rgba(255, 255, 255, .38);
  transition: color var(--t);
}
.ft-col a:hover { color: var(--amber); }

/* Rodapé inferior */
.ft-bottom {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  flex-wrap:       wrap;
  gap:             14px;
}
.ft-bottom p {
  font-size: 13px;
  color:     rgba(255, 255, 255, .18);
}
.ft-bottom p .highlight { color: var(--amber); opacity: .7; }

/* Redes sociais */
.social-links { display: flex; gap: 9px; }

.social-btn {
  width:           34px;
  height:          34px;
  background:      rgba(255, 255, 255, .04);
  border:          1px solid rgba(255, 255, 255, .07);
  border-radius:   9px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           rgba(255, 255, 255, .3);
  transition:      background var(--t), border-color var(--t), color var(--t);
  text-decoration: none;
}
.social-btn:hover {
  background:   rgba(245, 185, 66, .12);
  border-color: rgba(245, 185, 66, .3);
  color:        var(--amber);
}

/* ═══════════════════════════════════════════════════════
   RESPONSIVO — LAYOUT
═══════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .ft-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}

@media (max-width: 768px) {
  .hd-inner       { padding: 0 20px; }
  .nav-desktop    { display: none; }
  .hamburger      { display: flex; }
  .ft-grid        { grid-template-columns: 1fr; }
  .ft-bottom      { flex-direction: column; text-align: center; }
}