/* =========================================================
   Layout — header, footer, grid, sections
   ========================================================= */

.secao       { padding-block: var(--ritmo) }
.secao-borda { border-top: 1px solid var(--linha) }

/* ---------- topo ---------- */
.topo {
  position: sticky; top: 0; z-index: 40;
  background: rgba(8,20,13,.96);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(237,228,207,.1);
  transition: border-color .3s;
}
.topo.deslocado { border-bottom-color: rgba(237,228,207,.22) }

.info-barra {
  display: flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .5rem 1rem;
  background: #061009; color: var(--salvia-clara);
  border-top: 1px solid rgba(237,228,207,.08);
  font-size: .76rem; font-weight: 600; letter-spacing: .02em; text-align: center;
}
.info-barra svg {
  width: .95rem; height: .95rem; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
#infoBarraTexto { display: inline-block; transition: opacity .4s ease }
#infoBarraTexto.trocando { opacity: 0 }
@media (max-width:560px) { .info-barra { font-size: .7rem; padding: .45rem .75rem } }

@media (max-width:560px) {
  .faixa { padding-block: .55rem }
  .marca-logo { width: 3.25rem; height: 3.25rem }
}

.faixa {
  width: min(100% - 2.5rem, var(--cerca)); margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding-block: 1rem;
}

.marca { display: flex; align-items: center; gap: .55rem; text-decoration: none; line-height: 1 }
.marca-nome      { font-size: 1.15rem; font-weight: 800; letter-spacing: -.02em; color: var(--musgo) }
.marca-nome-lima { color: var(--folha) }
.marca-logo      { width: 4.4rem; height: 4.4rem; object-fit: contain; flex: none }
.marca-logo-rodape { width: 5.5rem; height: 5.5rem }

.menu   { display: flex; align-items: center; gap: 1.8rem }
.menu a { font-size: .84rem; font-weight: 500; text-decoration: none; color: rgba(247,242,230,.76); transition: color .2s }
.menu a:hover { color: #FFFFFF }
.menu .menu-cta { color: var(--noite); background: #A7CF55 }
.menu .menu-cta:hover { color: var(--noite); background: #B9DF69 }

.menu-botao {
  display: none; align-items: center; gap: .5rem;
  background: none; border: 1px solid rgba(237,228,207,.35); border-radius: 8px;
  font-family: var(--display); font-size: .82rem; font-weight: 600; color: var(--areia);
  padding: .55rem 1rem; cursor: pointer; text-transform: uppercase; letter-spacing: .06em;
}
.menu-botao span { width: 14px; height: 9px; position: relative }
.menu-botao span::before,
.menu-botao span::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1.5px;
  background: currentColor; transition: transform .3s var(--curva);
}
.menu-botao span::before { top: 0 }
.menu-botao span::after  { bottom: 0 }
.menu-botao[aria-expanded="true"] span::before { transform: translateY(3.75px) rotate(45deg) }
.menu-botao[aria-expanded="true"] span::after  { transform: translateY(-3.75px) rotate(-45deg) }

@media (max-width:920px) {
  .menu-botao { display: inline-flex }
  .menu {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--noite); border-bottom: 1px solid var(--linha-clara);
    padding: .25rem 1.25rem 1.5rem; display: none;
  }
  .menu.aberto { display: flex }
  .menu a { padding: .95rem 0; border-bottom: 1px solid var(--linha-clara); font-size: 1rem }
  .menu .menu-cta { margin-top: 1.2rem; border-bottom: none; justify-content: center }
}

/* ---------- rodapé ---------- */
.rodape {
  background: var(--musgo-fundo); color: var(--areia);
  padding-block: clamp(3rem,6vw,4.5rem) 6.5rem;
}
.rodape-grade {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px,1fr));
  gap: clamp(2rem,4vw,3.5rem);
}
.rodape-links { display: flex; flex-direction: column; gap: 1.05rem }
.rodape-links a { text-decoration: none; color: rgba(236,227,206,.78); font-size: .97rem; transition: color .2s }
.rodape-links a:hover { color: var(--salvia-clara) }

.rodape-contato { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.35rem }
.rodape-contato li {
  display: grid; grid-template-columns: 1.35rem 1fr; gap: .8rem;
  color: rgba(236,227,206,.78); font-size: .95rem; line-height: 1.5; align-items: start;
}
.rodape-contato svg {
  width: 1.15rem; height: 1.15rem; margin-top: .18rem;
  fill: none; stroke: var(--salvia-clara); stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.rodape-contato a { text-decoration: none; transition: color .2s; word-break: break-word }
.rodape-contato a:hover { color: var(--salvia-clara) }

.rodape-base {
  margin-top: clamp(3rem,6vw,4.5rem); padding-top: 2.2rem;
  border-top: 1px solid var(--linha-clara);
  display: flex; flex-wrap: wrap; gap: 1.8rem;
  align-items: end; justify-content: space-between;
}
.rodape .marca-nome      { color: var(--areia) }
.rodape .marca-nome-lima { color: var(--salvia-clara) }
.marca-rodape .marca-nome { font-size: 1.6rem }
.rodape-fim { text-align: right; margin-left: auto }
@media (max-width:640px) { .rodape-fim { text-align: left; margin-left: 0 } .rodape-aviso { margin-left: 0 } }
.rodape-fim p { margin: 0; font-size: .82rem; color: rgba(236,227,206,.6) }
.rodape-aviso { margin-top: .5rem !important; max-width: 56ch; margin-left: auto }

.sociais { display: flex; gap: .7rem; justify-content: flex-end; margin-bottom: 1.1rem }
@media (max-width:640px) { .sociais { justify-content: flex-start } }
.sociais a {
  width: 2.4rem; height: 2.4rem; border-radius: 8px;
  border: 1px solid var(--linha-clara); display: grid; place-items: center;
  transition: border-color .2s, background-color .2s;
}
.sociais a:hover { border-color: var(--salvia-clara); background: rgba(236,227,206,.08) }
.sociais svg {
  width: 1.15rem; height: 1.15rem;
  fill: none; stroke: var(--areia); stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.sociais a:hover svg { stroke: var(--salvia-clara) }