/* ============================================================
   Viviane Tavares — Finanças Empresariais
   Estilos do cabeçalho / menu (compartilhado por todas as páginas)
   Edite AQUI para mudar logo, cores do topo e menu mobile.
   ============================================================ */

.site-header{
  background:#10382e;
  padding:16px 56px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  position:relative;
  box-sizing:border-box;
}

/* --- Logo / marca --- */
.brand{display:flex;align-items:center;gap:14px;color:#f7f2e7;text-decoration:none}
.brand .mark{
  flex:0 0 52px;width:52px;height:52px;
  border:1.5px solid #cfa14f;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:'Cormorant Garamond',serif;font-size:24px;color:#f7f2e7;letter-spacing:1px;
}
.brand .brand-text{display:flex;flex-direction:column;line-height:1.15}
.brand .brand-name{font-family:'Cormorant Garamond',serif;font-size:21px;letter-spacing:3.5px;font-weight:500}
.brand .brand-sub{font-size:10.5px;letter-spacing:3px;color:#cfa14f;font-weight:500}

/* --- Navegação (desktop) --- */
.nav{display:flex;align-items:center;gap:34px;font-size:14px;letter-spacing:1.5px;font-weight:400}
.nav a{color:#f7f2e7;text-decoration:none;transition:color .15s ease}
.nav a:hover{color:#cfa14f}
.nav a.active{color:#cfa14f;border-bottom:1px solid #cfa14f;padding-bottom:3px}
.nav a.cta{
  background:#b78d3e;color:#10382e;
  padding:11px 24px;border-radius:999px;
  font-weight:600;letter-spacing:1px;font-size:13px;
  transition:background .15s ease;
}
.nav a.cta:hover{background:#cfa14f;color:#10382e}

/* checkbox some sempre; controla o menu só via CSS (sem JS) */
.nav-toggle{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.burger{display:none}

/* ============================================================
   Mobile / tablet — menu hambúrguer
   ============================================================ */
@media (max-width:820px){
  .site-header{padding:14px 22px}

  .brand .brand-name{font-size:18px;letter-spacing:2.5px}
  .brand .brand-sub{font-size:9.5px;letter-spacing:2.5px}

  .burger{
    display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
    width:46px;height:46px;box-sizing:border-box;padding:12px;
    border:1px solid rgba(207,161,79,.5);border-radius:12px;
    background:transparent;cursor:pointer;
  }
  .burger span{display:block;height:2px;width:100%;background:#f7f2e7;border-radius:2px;transition:transform .25s ease,opacity .2s ease}

  .nav{
    display:none;
    position:absolute;top:100%;left:0;right:0;z-index:60;
    flex-direction:column;align-items:stretch;gap:0;
    background:#0c2b23;
    border-top:1px solid rgba(207,161,79,.25);
    box-shadow:0 18px 40px rgba(0,0,0,.28);
    padding:6px 22px 18px;
  }
  .nav-toggle:checked ~ .nav{display:flex}

  .nav a{padding:15px 4px;font-size:14px;border-bottom:1px solid rgba(207,161,79,.12)}
  .nav a.active{border-bottom:1px solid rgba(207,161,79,.12);padding-bottom:15px}
  .nav a.cta{margin-top:16px;text-align:center;padding:15px 24px;border-bottom:none}

  /* hambúrguer vira X quando aberto */
  .nav-toggle:checked ~ .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav-toggle:checked ~ .burger span:nth-child(2){opacity:0}
  .nav-toggle:checked ~ .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}

/* ============================================================
   Layout responsivo global do CORPO das páginas
   (o design original usa grids fixos inline; aqui empilhamos
   tudo em 1 coluna e reduzimos as margens laterais no mobile)
   ============================================================ */
@media (max-width:820px){
  html,body{overflow-x:hidden}

  /* qualquer grid inline vira coluna única */
  [style*="grid-template-columns"]{grid-template-columns:1fr !important}

  /* respiro lateral menor nas seções */
  section{padding-left:22px !important;padding-right:22px !important}

  /* caixas com padding grande encolhem */
  [style*="padding:64px"]{padding:34px 26px !important}
  [style*="padding:56px 64px"]{padding:34px 26px !important}
  [style*="padding:44px 48px"]{padding:30px 24px !important}

  /* rodapé em coluna */
  footer{padding:44px 22px !important}
}

@media (max-width:520px){
  /* títulos gigantes do hero cabem melhor em telas pequenas */
  h1{font-size:40px !important}
}