/* Menu do site: header fixo, dropdown de áreas e aba "Menu" no celular */
.site-header { position: sticky; top: 0; z-index: 100; background: #3a3a3a; font-family: var(--font-display, system-ui, sans-serif); }
.site-header .bar { position: relative; max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px clamp(20px, 5vw, 72px); }
.site-header .brand { color: #c9a875; font-weight: 800; font-size: 18px; text-decoration: none; white-space: nowrap; }
.menu { display: flex; align-items: center; gap: clamp(14px, 2vw, 26px); }
.menu a, .dd-btn { color: #fff; text-decoration: none; font-family: inherit; font-size: 15px; font-weight: 600; background: none; border: 0; padding: 6px 0; cursor: pointer; white-space: nowrap; transition: color .18s ease; }
.menu a:hover, .menu a:focus-visible, .dd-btn:hover, .dd-btn:focus-visible { color: #c9a875; outline: none; }
.dd-btn::after { content: " \25BE"; font-size: 12px; }
.menu a.cta { background: #c9a875; color: #fff; padding: 9px 18px; border-radius: 4px; }
.menu a.cta:hover { background: #9d7d42; color: #fff; }
.dropdown { position: relative; }
.dd-panel { display: none; position: absolute; top: 100%; left: -12px; min-width: 250px; background: #fff; border: 1px solid #e8e4dd; border-radius: 6px; padding: 8px; box-shadow: 0 12px 32px rgba(0, 0, 0, .18); }
.dd-panel a { display: block; color: #3a3a3a; padding: 10px 14px; border-radius: 4px; }
.dd-panel a:hover, .dd-panel a:focus-visible { background: #f7f6f4; color: #9d7d42; }
.dropdown.open .dd-panel { display: block; }
.menu-toggle { display: none; align-items: center; background: none; border: 1px solid #c9a875; color: #fff; border-radius: 4px; padding: 8px 16px; font-family: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
@media (min-width: 901px) { .dropdown:hover .dd-panel { display: block; } }
@media (max-width: 900px) {
  .menu-toggle { display: inline-flex; }
  .menu { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0; background: #3a3a3a; padding: 4px clamp(20px, 5vw, 72px) 18px; border-top: 1px solid #4f4f4f; }
  .menu.open { display: flex; }
  .menu a, .dd-btn { display: block; width: 100%; text-align: left; padding: 14px 0; border-bottom: 1px solid #4f4f4f; }
  .menu a.cta { text-align: center; margin-top: 14px; border-bottom: 0; }
  .dd-panel { position: static; min-width: 0; background: none; border: 0; box-shadow: none; padding: 0 0 0 14px; }
  .dd-panel a { color: #fff; padding: 12px 0; border-bottom: 1px solid #5a5a5a; border-radius: 0; }
  .dd-panel a:hover, .dd-panel a:focus-visible { background: none; color: #c9a875; }
}

/* Animação de entrada (só ativa com JavaScript; respeita reduzir movimento) */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none; } }

/* Capas dos cards: proporção 16:9 mesmo com o atributo height do HTML */
.card figure img { height: auto; aspect-ratio: 16 / 9; object-fit: cover; }

/* Logotipo como botão de volta à página inicial */
.site-header .brand { display: inline-flex; align-items: center; gap: 10px; border-radius: 4px; padding: 4px 6px 4px 0; transition: opacity .18s ease; }
.site-header .brand img { width: 38px; height: 38px; border-radius: 6px; display: block; }
.site-header .brand span { color: #c9a875; font-weight: 800; font-size: 18px; white-space: nowrap; }
.site-header .brand:hover { opacity: .85; cursor: pointer; }
.site-header .brand:focus-visible { outline: 2px solid #c9a875; outline-offset: 3px; }
@media (max-width: 480px) { .site-header .brand span { font-size: 16px; } }