/* ENGSA — sistema visual base (HTML/CSS estático) */
:root{
  --bg:#F4F2EE; --ink:#0E0E0E; --ink-2:#2A2A2A; --muted:#8C8C8C;
  --line:#DCD8D0; --paper:#ECE8E0;
  --display:'Inter Tight',system-ui,sans-serif;
  --body:'Inter',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --serif:'Fraunces',Georgia,serif;
  --pad:clamp(20px,4vw,64px);
}
*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ background:var(--bg); color:var(--ink); font-family:var(--body); -webkit-font-smoothing:antialiased; }
body{ overflow-x:hidden; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
/* font-size:16px no input/select evita o auto-zoom de teclado no iOS */
input,select,textarea{ font:inherit; color:inherit; font-size:16px; }
::selection{ background:var(--ink); color:var(--bg); }

/* Type */
.display{ font-family:var(--display); font-weight:300; letter-spacing:-0.03em; line-height:0.92; }
.display-bold{ font-family:var(--display); font-weight:700; letter-spacing:-0.035em; line-height:0.9; }
.eyebrow{ font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:0.18em; text-transform:uppercase; color:var(--muted); }
.label{ font-family:var(--mono); font-size:10.5px; letter-spacing:0.16em; text-transform:uppercase; color:var(--muted); }
.body{ font-family:var(--body); font-size:15px; line-height:1.55; color:var(--ink-2); }
.small{ font-family:var(--body); font-size:13px; line-height:1.5; color:var(--muted); }
em.serif{ font-family:var(--serif); font-style:italic; font-weight:300; }
.outlined{ -webkit-text-stroke:1px currentColor; color:transparent; }

/* Placeholder com legenda */
.ph{
  position:relative; overflow:hidden;
  background:
    repeating-linear-gradient(135deg, rgba(0,0,0,0.035) 0 2px, transparent 2px 12px),
    var(--paper);
}
.ph::after{
  content:attr(data-label);
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(0,0,0,0.32); padding:8px; text-align:center;
}
.ph.dark{
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.05) 0 2px, transparent 2px 12px),
    #1a1a1a;
}
.ph.dark::after{ color:rgba(255,255,255,.4); }

/* Header */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:9000;
  padding:18px var(--pad);
  display:flex; align-items:center; justify-content:space-between;
  transition: background .3s ease, border-color .3s ease, color .3s ease;
  border-bottom:1px solid transparent;
}
/* Logo branca: inverte para preto quando o header está sobre fundo claro */
.site-header:not(.on-dark) .brand img{ filter: invert(1); }
.site-header.scrolled{
  background:rgba(244,242,238,.85);
  backdrop-filter:blur(14px) saturate(150%);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  border-bottom-color:var(--line);
}
.site-header.on-dark{ color:#F4F2EE; }
.site-header.on-dark.scrolled{ background:rgba(14,14,14,.85); border-bottom-color:#23211E; }
.site-header.on-dark .nav-link{ color:rgba(244,242,238,.75); }
.site-header.on-dark .nav-link:hover{ color:#F4F2EE; opacity:1; }
.site-header.on-dark .nav-link.active{ color:#F4F2EE; border-color:#F4F2EE; }
.site-header.on-dark .btn-outline{ border-color:#F4F2EE; color:#F4F2EE; }

.brand{ display:flex; align-items:center; gap:1px; font-family:var(--display); letter-spacing:-0.02em; font-size:22px; }
.brand img{ height:54px; width:auto; }
.brand .b1{ font-weight:900; }
.brand .b2{ font-weight:700; opacity:.78; }
.brand .b3{ font-weight:700; -webkit-text-stroke:1px currentColor; color:transparent; }

.nav{ display:flex; gap:36px; align-items:center; }
.nav-link{
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); padding:6px 0; border-bottom:1px solid transparent;
  transition: color .2s ease, opacity .2s ease, border-color .2s ease;
}
.nav-link:hover{ color:var(--ink); opacity:1; }
.nav-link.active{ color:var(--ink); border-color:var(--ink); }

.btn-outline{
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  padding:10px 16px; border:1px solid var(--ink); color:var(--ink);
  white-space:nowrap;
}

/* Bloco direito do header: Agendar visita + hamburger */
.header-actions{ display:flex; align-items:center; gap:16px; }

/* Botão hamburger (default oculto no desktop) */
.hamburger{
  display:none;
  width:44px; height:44px; padding:0;
  background:transparent; border:0;
  cursor:pointer;
  flex-direction:column; justify-content:center; gap:5px;
  color:inherit;
}
.hamburger span{
  display:block; height:1.5px; width:22px; margin:0 auto;
  background:currentColor;
  transition: transform .3s ease, opacity .25s ease;
}
.site-header.menu-open .hamburger span:nth-child(1){ transform: translate(0, 6.5px) rotate(45deg); }
.site-header.menu-open .hamburger span:nth-child(2){ opacity:0; }
.site-header.menu-open .hamburger span:nth-child(3){ transform: translate(0, -6.5px) rotate(-45deg); }
.btn-outline-lg{ padding:18px 24px; font-size:11px; }
.btn-solid{
  padding:18px 24px; background:var(--ink); color:var(--bg);
  font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
}

/* Footer */
.site-footer{ background:var(--ink); color:#D9D5CE; padding:80px var(--pad) 64px; margin-top:0; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:64px; padding-bottom:0; border-bottom:0; }
.footer-col h4{ font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:#7C7873; margin-bottom:18px; font-weight:500; }
.footer-col li{ list-style:none; padding:8px 0; font-size:14px; color:#D9D5CE; }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding-top:28px; }
.footer-bottom span{ font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:#7C7873; }

/* Barra da agência (após o footer) */
.agency-bar{
  background:#FFFFFF; padding:14px var(--pad);
  display:flex; align-items:center; justify-content:center; gap:18px;
}
.agency-label{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
}
.agency-logo{ height:32px; width:auto; max-width:240px; filter:brightness(0); }

/* Botão flutuante de WhatsApp */
.whatsapp-fab{
  position:fixed; bottom:24px; right:24px; z-index:9500;
  width:60px; height:60px; border-radius:50%;
  background:var(--ink); color:#FFFFFF;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 24px rgba(0,0,0,.25);
  opacity:0; transform: translateY(20px); pointer-events:none;
  transition: opacity .3s ease, transform .3s ease, box-shadow .2s ease, background-color .2s ease;
}
.whatsapp-fab.visible{
  opacity:1; transform: translateY(0); pointer-events:auto;
}
.whatsapp-fab:hover{
  transform: scale(1.06);
  box-shadow:0 12px 28px rgba(0,0,0,.32);
  background:#000000;
}
.whatsapp-fab svg{ width:30px; height:30px; }
@media (max-width: 480px){
  .whatsapp-fab{ width:52px; height:52px; bottom:16px; right:16px; }
  .whatsapp-fab svg{ width:26px; height:26px; }
}

/* Section utilities */
section{ padding:120px var(--pad); }
.section-tight{ padding:80px var(--pad); }
/* .divider: marca uma seção com fundo branco para alternar com o bege (var(--bg)) */
.divider{ background:#FFFFFF; }
.dark-section{ background:#0E0E0E; color:#F4F2EE; }
.dark-section .eyebrow, .dark-section .label, .dark-section .small{ color:#7C7873; }
.dark-section .body{ color:#A8A39B; }

/* Tablet intermediário — section padding mais enxuto */
@media (max-width: 1024px){
  section{ padding:96px var(--pad); }
  .section-tight{ padding:64px var(--pad); }
}
/* Mobile — padding compacto */
@media (max-width: 768px){
  section{ padding:72px var(--pad); }
  .section-tight{ padding:48px var(--pad); }
}

/* Section head */
.sect-head{ display:grid; grid-template-columns:1fr auto; gap:32px; align-items:end; padding-bottom:48px; border-bottom:1px solid var(--line); margin-bottom:48px; }
.dark-section .sect-head{ border-bottom-color:#23211E; }
.sect-head h2{ font-size:clamp(22px,3vw,48px); }

.manifesto h2{ font-size:clamp(22px,4vw,60px); }

@keyframes kb { from{transform:scale(1.05)} to{transform:scale(1.12)} }
.kb{ animation:kb 12s ease-in-out alternate infinite; }

/* Responsivo — quebra do menu para hamburger */
@media (max-width: 900px){
  .hamburger{ display:flex; }

  /* Nav vira painel deslizante abaixo do header */
  .site-header .nav{
    position:fixed;
    top:64px; left:0; right:0;
    flex-direction:column;
    gap:0;
    padding:8px var(--pad) 24px;
    transform: translateY(-12px);
    opacity:0;
    pointer-events:none;
    transition: transform .35s ease, opacity .25s ease;
    background: rgba(244,242,238,.98);
    backdrop-filter: blur(14px) saturate(150%);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    border-bottom:1px solid var(--line);
    align-items:stretch;
    max-height: calc(100vh - 64px);
    overflow-y:auto;
  }
  .site-header.on-dark .nav{
    background: rgba(14,14,14,.96);
    border-bottom-color:#23211E;
  }
  .site-header.menu-open .nav{
    transform: translateY(0);
    opacity:1;
    pointer-events:auto;
  }
  .site-header .nav-link{
    padding:16px 4px;
    font-size:13px;
    border-bottom:1px solid var(--line);
    border-bottom-color: var(--line);
  }
  .site-header.on-dark .nav-link{
    border-bottom-color:#23211E;
  }
  .site-header .nav-link:last-child{ border-bottom:0; }
  .site-header .nav-link.active{ border-bottom-color:var(--ink); }
  .site-header.on-dark .nav-link.active{ border-bottom-color:#F4F2EE; }

  body.menu-open{ overflow:hidden; }
}

/* Tablet — footer em 2 colunas */
@media (max-width: 1024px) and (min-width: 769px){
  .footer-grid{ grid-template-columns:1fr 1fr; gap:48px; }
}

@media (max-width: 768px){
  /* Rodapé empilhado no mobile */
  .footer-grid{ grid-template-columns:1fr; gap:40px; padding-bottom:0; }
  .site-footer{ padding:64px var(--pad) 48px; }
  .footer-col{ padding-bottom:32px; border-bottom:1px solid #23211E; }
  .footer-col:last-child{ border-bottom:0; padding-bottom:0; }
  .footer-col li{ padding:10px 0; }
  .footer-col li a{ display:inline-block; padding:2px 0; }

  /* Barra da agência empilhada */
  .agency-bar{ padding:18px var(--pad); }

  /* Sect-head — título acima, filtros/tabs abaixo */
  .sect-head{ grid-template-columns:1fr; gap:24px; align-items:start; padding-bottom:32px; margin-bottom:32px; }
}

@media (max-width: 480px){
  /* Versão mais compacta do CTA em telas estreitas */
  .btn-outline{ padding:8px 12px; font-size:10px; letter-spacing:.12em; }
  .header-actions{ gap:10px; }
}