html {
  scroll-behavior: smooth;
}
a {
  color: inherit;
  text-decoration: none;
}
body {
  font-family: 'Inter', sans-serif;
  background-color: #000000;
  color: #ffffff;
}
.nav-link {
  position: relative;
  transition: opacity 0.25s ease;
}
.nav-link:hover {
  opacity: 0.7;
}
.nav-link.active {
  color: #C29B5D;
  font-size: 15px;
  font-weight: 500;
}
.nav-link.active::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -8px;
  height: 1px;
  background-color: #C29B5D;
}
header.compact .header-inner {
  height: 4rem;
}
header.compact .logo-img {
  height: 2.7rem;
}
header.compact {
  box-shadow: 0 2px 12px rgba(0,0,0,0.5);
}
.btn-gold {
  background-color: #C29B5D;
  transition: background-color 0.25s ease;
}
.btn-gold:hover {
  background-color: #AD8A4F;
}
.hero-font {
  font-family: 'Poppins', sans-serif;
}

/* ===== Campos do formulário de contato =====
   A borda mora aqui, e não nas classes utilitárias: na folha estática o
   .border-0 vem depois do .border-b, com a mesma especificidade, e zerava
   a borda dos campos em todos os estados (por isso o focus:border-black
   nunca apareceu — ele só troca a cor de uma borda de largura zero).

   Em repouso a linha fica na cor do fundo da seção: invisível, mas
   ocupando o mesmo 1px, então nada se desloca ao receber o foco. */
.campo-form {
  /* zera os outros três lados: sem isto volta a borda que o navegador
     desenha por padrão em input/textarea, que o antigo .border-0 escondia */
  border: 0;
  border-bottom: 1px solid #C29B5D;
  transition: border-color 0.2s ease;
}
.campo-form:focus {
  border-bottom-color: #000000;
}

/* Mensagem: nasce com a altura de um input (rows="1") e cresce uma linha
   por vez via JS, até o teto — daí em diante rola dentro do campo, para
   não empurrar o botão Enviar para fora da tela. */
textarea.campo-form {
  box-sizing: border-box;
  display: block;
  max-height: 200px;
  overflow-y: hidden;
}
textarea.campo-form.rolando {
  overflow-y: auto;
}

/* ===== Contador de caracteres do formulário ===== */
.contador-caracteres {
  display: block;
  margin-top: 6px;
  text-align: right;
  font-size: 12px;
  line-height: 1;
  color: rgba(0, 0, 0, 0.55);
  font-variant-numeric: tabular-nums; /* o número não "dança" ao digitar */
  /* Só aparece com o campo em uso. Escondido por opacity, e não por
     display, para o espaço ficar reservado e o botão Enviar não subir e
     descer a cada foco. */
  opacity: 0;
  transition: opacity 0.2s ease;
}
#contatoMensagem:focus ~ .contador-caracteres {
  opacity: 1;
}
.contador-caracteres.no-limite {
  color: #7F1D1D;
  font-weight: 500;
}

/* ===== Aviso "abrindo seu programa de e-mail" (links mailto) ===== */
.mail-toast {
  position: fixed;
  /* left/right + margin auto em vez de left:50% + translateX: ancorado só
     à esquerda, a largura disponível seria metade da tela e o aviso ficava
     espremido no celular. */
  left: 16px;
  right: 16px;
  margin-inline: auto;
  width: fit-content;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background-color: #1a1a1a;
  border: 1px solid rgba(194, 155, 93, 0.5);
  border-radius: 4px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6);
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  line-height: 1.4;
  color: #ffffff;
  transform: translateY(12px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}
.mail-toast.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
/* No celular ocupa toda a faixa disponível, para o texto não quebrar em
   várias linhas dentro de uma caixa estreita. */
@media (max-width: 560px) {
  .mail-toast {
    width: auto;
    flex-wrap: wrap;
    padding-right: 42px;
  }
  /* fora do fluxo, no canto: assim o texto usa a linha inteira e o
     endereço fica numa linha própria, sem virar três linhas */
  .mail-toast__close {
    position: absolute;
    top: 8px;
    right: 8px;
    margin: 0;
  }
  .mail-toast__mail {
    flex-basis: 100%;
  }
}
.mail-toast__spinner {
  flex: none;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(194, 155, 93, 0.3);
  border-top-color: #C29B5D;
  border-radius: 50%;
  animation: mail-toast-spin 0.8s linear infinite;
}
.mail-toast--fallback .mail-toast__spinner {
  display: none;
}
.mail-toast__mail {
  color: #C29B5D;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}
.mail-toast__close {
  flex: none;
  margin-left: 4px;
  padding: 2px 6px;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: color 0.2s ease;
}
.mail-toast__close:hover {
  color: #ffffff;
}
@keyframes mail-toast-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .mail-toast {
    transition: none;
  }
  .mail-toast__spinner {
    animation-duration: 2s;
  }
}

/* ===== Static utility stylesheet (replaces Tailwind CDN — works 100% offline) ===== */
.absolute{position:absolute}
.relative{position:relative}
.sticky{position:-webkit-sticky;position:sticky}
.hidden{display:none}
.flex{display:flex}
.inline-flex{display:inline-flex}
.flex-col{flex-direction:column}
.grid{display:grid}
.inline-block{display:inline-block}
.block{display:block}
.overflow-hidden{overflow:hidden}
.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}
.items-center{align-items:center}
.items-start{align-items:flex-start}
.justify-center{justify-content:center}
.justify-between{justify-content:space-between}
.flex-1{flex:1 1 0%}
.flex-shrink-0{flex-shrink:0}
.inset-0{top:0;right:0;bottom:0;left:0}
.top-0{top:0}
.z-10{z-index:10}
.z-50{z-index:50}
.w-auto{width:auto}
.w-full{width:100%}
.w-fit{width:fit-content}
.w-5{width:1.25rem}
.w-\[18px\]{width:18px}
.w-7{width:1.75rem}
.w-10{width:2.5rem}
.w-16{width:4rem}
.h-5{height:1.25rem}
.h-\[18px\]{height:18px}
.h-7{height:1.75rem}
.h-20{height:5rem}
.h-24{height:6rem}
.h-full{height:100%}
.h-px{height:1px}
.h-\[3\.6rem\]{height:3.6rem}
.min-h-\[calc\(100dvh-6rem\)\]{min-height:calc(100dvh - 6rem)}
.max-w-2xl{max-width:42rem}
.max-w-\[260px\]{max-width:260px}
.max-w-\[280px\]{max-width:280px}
.max-w-3xl{max-width:48rem}
.max-w-5xl{max-width:64rem}
.max-w-6xl{max-width:72rem}
.max-w-7xl{max-width:80rem}
.mx-auto{margin-left:auto;margin-right:auto}
.ml-auto{margin-left:auto}
.mr-auto{margin-right:auto}
.mb-10{margin-bottom:2.5rem}
.space-y-8>*+*{margin-top:2rem}
.mt-0\.5{margin-top:0.125rem}
.mt-1{margin-top:0.25rem}
.mt-2{margin-top:0.5rem}
.mt-3{margin-top:0.75rem}
.mt-4{margin-top:1rem}
.mt-5{margin-top:1.25rem}
.mt-6{margin-top:1.5rem}
.mt-8{margin-top:2rem}
.mt-10{margin-top:2.5rem}
.mt-12{margin-top:3rem}
.mt-16{margin-top:4rem}
.scroll-mt-24{scroll-margin-top:6rem}
.mb-4{margin-bottom:1rem}
.mb-5{margin-bottom:1.25rem}
.mb-6{margin-bottom:1.5rem}
.mb-8{margin-bottom:2rem}
.p-6{padding:1.5rem}
.px-4{padding-left:1rem;padding-right:1rem}
.px-6{padding-left:1.5rem;padding-right:1.5rem}
.px-8{padding-left:2rem;padding-right:2rem}
.px-10{padding-left:2.5rem;padding-right:2.5rem}
.py-2{padding-top:0.5rem;padding-bottom:0.5rem}
.py-4{padding-top:1rem;padding-bottom:1rem}
.py-6{padding-top:1.5rem;padding-bottom:1.5rem}
.py-8{padding-top:2rem;padding-bottom:2rem}
.py-10{padding-top:2.5rem;padding-bottom:2.5rem}
.py-16{padding-top:4rem;padding-bottom:4rem}
.py-20{padding-top:5rem;padding-bottom:5rem}
.pt-4{padding-top:1rem}
.pt-20{padding-top:5rem}
.pb-14{padding-bottom:3.5rem}
.pb-16{padding-bottom:4rem}
.pb-2{padding-bottom:0.5rem}
.pt-2{padding-top:0.5rem}
.gap-3{gap:0.75rem}
.gap-4{gap:1rem}
.gap-5{gap:1.25rem}
.gap-6{gap:1.5rem}
.gap-2{gap:0.5rem}
.gap-8{gap:2rem}
.gap-12{gap:3rem}
.gap-x-14{column-gap:3.5rem}
.gap-y-16{row-gap:4rem}
.space-x-6 > :not([hidden]) ~ :not([hidden]){margin-left:1.5rem}
.font-light{font-weight:300}
.font-normal{font-weight:400}
.font-medium{font-weight:500}
.font-semibold{font-weight:600}
.text-xs{font-size:0.75rem;line-height:1rem}
.text-sm{font-size:0.875rem;line-height:1.25rem}
.text-base{font-size:1rem;line-height:1.5rem}
.text-lg{font-size:1.125rem;line-height:1.75rem}
.text-xl{font-size:1.25rem;line-height:1.75rem}
.text-2xl{font-size:1.5rem;line-height:2rem}
.text-3xl{font-size:1.875rem;line-height:2.25rem}
.text-4xl{font-size:2.25rem;line-height:2.5rem}
.text-\[12px\]{font-size:12px}
.text-\[13px\]{font-size:13px}
.text-\[15px\]{font-size:15px}
.text-center{text-align:center}
.text-left{text-align:left}
.text-white{color:#ffffff}
.text-white\/30{color:rgba(255,255,255,0.3)}
.text-white\/40{color:rgba(255,255,255,0.4)}
.text-white\/50{color:rgba(255,255,255,0.5)}
.text-white\/60{color:rgba(255,255,255,0.6)}
.text-white\/70{color:rgba(255,255,255,0.7)}
.text-white\/90{color:rgba(255,255,255,0.9)}
.text-black{color:#000000}
.text-black\/80{color:rgba(0,0,0,0.8)}
.text-red-700{color:#b91c1c}
.leading-tight{line-height:1.25}
.leading-relaxed{line-height:1.625}
.tracking-wide{letter-spacing:0.025em}
.tracking-\[0\.1em\]{letter-spacing:0.1em}
.tracking-\[0\.15em\]{letter-spacing:0.15em}
.tracking-\[0\.2em\]{letter-spacing:0.2em}
.tracking-\[0\.25em\]{letter-spacing:0.25em}
.uppercase{text-transform:uppercase}
.underline{text-decoration-line:underline}
.underline-offset-2{text-underline-offset:2px}
.whitespace-nowrap{white-space:nowrap}
a.hover\:text-white:hover{color:#ffffff}
.bg-black{background-color:#000000}
.bg-black\/60{background-color:rgba(0,0,0,0.6)}
.bg-black\/65{background-color:rgba(0,0,0,0.65)}
.bg-black\/95{background-color:rgba(0,0,0,0.95)}
.bg-\[\#111111\]{background-color:#111111}
.bg-\[\#C29B5D\]{background-color:#C29B5D}
.bg-cover{background-size:cover}
.bg-center{background-position:center}
.object-contain{object-fit:contain}
.object-cover{object-fit:cover}
.border-t{border-top-width:1px;border-top-style:solid}
.border-b{border-bottom-width:1px;border-bottom-style:solid}
.border-0{border-width:0}
.border-black\/40{border-color:rgba(0,0,0,0.4)}
.border-white\/10{border-color:rgba(255,255,255,0.1)}
.border-white\/40{border-color:rgba(255,255,255,0.4)}
.outline-none{outline:2px solid transparent;outline-offset:2px}
.bg-transparent{background-color:transparent}
.resize-none{resize:none}
.placeholder-black\/40::placeholder{color:rgba(0,0,0,0.4)}
input.focus\:border-black:focus,textarea.focus\:border-black:focus{border-bottom-color:#000000}
.decoration-white\/30{text-decoration-color:rgba(255,255,255,0.3)}
.shadow-lg{box-shadow:0 10px 15px -3px rgba(0,0,0,0.3),0 4px 6px -4px rgba(0,0,0,0.3)}
.drop-shadow-\[0_1px_4px_rgba\(0\,0\,0\,0\.6\)\]{filter:drop-shadow(0 1px 4px rgba(0,0,0,0.6))}
.drop-shadow-\[0_2px_6px_rgba\(0\,0\,0\,0\.6\)\]{filter:drop-shadow(0 2px 6px rgba(0,0,0,0.6))}
.aspect-\[4\/3\]{aspect-ratio:4/3}
.transition-colors{transition-property:color,background-color,border-color;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}
.transition-shadow{transition-property:box-shadow;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}
.transition-opacity{transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}
.transition-\[height\]{transition-property:height;transition-timing-function:cubic-bezier(.4,0,.2,1)}
.duration-200{transition-duration:.2s}
.duration-300{transition-duration:.3s}
a.hover\:opacity-70:hover{opacity:0.7}
button.hover\:bg-\[\#111111\]:hover{background-color:#111111}

/* sm: >=640px */
@media (min-width:640px){
.sm\:h-\[4\.2rem\]{height:4.2rem}
.sm\:flex-row{flex-direction:row}
.sm\:p-8{padding:2rem}
.sm\:px-10{padding-left:2.5rem;padding-right:2.5rem}
.sm\:px-12{padding-left:3rem;padding-right:3rem}
.sm\:py-4{padding-top:1rem;padding-bottom:1rem}
.sm\:py-10{padding-top:2.5rem;padding-bottom:2.5rem}
.sm\:py-14{padding-top:3.5rem;padding-bottom:3.5rem}
.sm\:max-w-\[300px\]{max-width:300px}
.sm\:text-2xl{font-size:1.5rem;line-height:2rem}
.sm\:text-3xl{font-size:1.875rem;line-height:2.25rem}
.sm\:text-4xl{font-size:2.25rem;line-height:2.5rem}
.sm\:text-5xl{font-size:3rem;line-height:1}
.sm\:text-6xl{font-size:3.75rem;line-height:1}
.sm\:text-base{font-size:1rem;line-height:1.5rem}
.sm\:text-lg{font-size:1.125rem;line-height:1.75rem}
.sm\:text-sm{font-size:0.875rem;line-height:1.25rem}
.sm\:text-xl{font-size:1.25rem;line-height:1.75rem}
}
/* md: >=768px */
@media (min-width:768px){
.md\:flex{display:flex}
.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.md\:hidden{display:none}
.md\:items-center{align-items:center}
.md\:py-14{padding-top:3.5rem;padding-bottom:3.5rem}
.md\:py-16{padding-top:4rem;padding-bottom:4rem}
.md\:py-20{padding-top:5rem;padding-bottom:5rem}
.md\:py-24{padding-top:6rem;padding-bottom:6rem}
.md\:py-28{padding-top:7rem;padding-bottom:7rem}
.md\:pt-28{padding-top:7rem}
.md\:pb-16{padding-bottom:4rem}
.md\:text-4xl{font-size:2.25rem;line-height:2.5rem}
.md\:text-6xl{font-size:3.75rem;line-height:1}
.md\:text-xl{font-size:1.25rem;line-height:1.75rem}
.md\:w-\[65\%\]{width:65%}
.md\:w-\[62\%\]{width:62%}
}
/* lg: >=1024px */
@media (min-width:1024px){
.lg\:px-10{padding-left:2.5rem;padding-right:2.5rem}
.lg\:text-7xl{font-size:4.5rem;line-height:1}
.lg\:w-\[48\%\]{width:48%}
.lg\:w-\[54\%\]{width:54%}
}