/* Formulários e Navegação – Comando 5.1 e 5.2 */

/* Campos de formulário: estado padrão e foco */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
textarea,
select {
  border: 1px solid var(--border-color, #E0E0E0);
  background: #FFFFFF;
  color: var(--text-color, #1A1A1A);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--primary-color, #C0A062);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 192,160,98), 0.15);
}

/* Placeholder mais suave */
::placeholder {
  color: #888888;
}

/* Tópico 18.3 – Formulários em tema claro: inputs/textarea/select com superfície branca */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
textarea,
select {
  background: #FFFFFF !important;
  color: #1A1A1A !important;
  border: 1px solid var(--border-color, #E0E0E0) !important;
  border-radius: 8px;
}
input::placeholder,
textarea::placeholder {
  color: #888888 !important;
}

/* Estados de validação e mensagens de feedback */
input:required:invalid,
textarea:required:invalid,
select:required:invalid {
  border-color: var(--primary-color) !important;
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.15) !important;
}
.error-message {
  margin-top: 6px;
  font-size: 0.875rem;
  color: #ff9a9a;
}
.success-message {
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(0, 255, 153, 0.35);
  border-radius: 8px;
  color: #d9ffe8;
  background: rgba(0, 255, 153, 0.07);
}
.form-message { margin-top: 10px; }

/* Labels e agrupamentos */
label { color: var(--muted-text); font-size: 0.95rem; }
.checkbox-group { display: flex; align-items: center; gap: 10px; }
.checkbox-group a { color: var(--primary-color); }
input:focus,
textarea:focus,
select:focus {
  border-color: #C0A062 !important;
  box-shadow: 0 0 0 3px rgba(192, 160, 98, 0.15) !important;
}

/* Navegação: hover com dourado e sublinhado sutil */
nav a,
.navbar a,
.menu a,
header a.nav-link {
  color: var(--text-color, #1A1A1A);
  text-decoration: none;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

/* Navegação principal (header) em tema escuro com estados modernos */
.header .main-nav { gap: 18px; }
.header .main-nav a {
  color: var(--text-color);
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid transparent;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.header .main-nav a:hover {
  color: var(--primary-color);
  border-color: var(--border-color);
  background: rgba(255,255,255,0.04);
}
.header .main-nav a.active {
  color: var(--text-color);
  border-color: rgba(var(--primary-rgb), 0.35);
  background: rgba(var(--primary-rgb), 0.12);
  box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.12) inset;
}

nav a:hover,
.navbar a:hover,
.menu a:hover,
header a.nav-link:hover {
  color: var(--primary-color, #C0A062);
  text-decoration: underline;
  text-decoration-color: var(--primary-color, #C0A062);
  text-underline-offset: 4px;
}

/* Estados ativos e foco visível padronizados em dourado */
nav a:active,
.navbar a:active,
.menu a:active,
header a.nav-link:active,
nav a:focus-visible,
.navbar a:focus-visible,
.menu a:focus-visible,
header a.nav-link:focus-visible {
  color: var(--primary-color, #C0A062);
  text-decoration: underline;
  text-decoration-color: var(--primary-color, #C0A062);
  text-underline-offset: 4px;
  outline: none;
}

/* Fallback de sublinhado via borda inferior */
nav a:hover,
.navbar a:hover,
.menu a:hover {
  border-bottom: 2px solid var(--primary-color, #C0A062);
}
nav a:active,
.navbar a:active,
.menu a:active,
nav a:focus-visible,
.navbar a:focus-visible,
.menu a:focus-visible {
  border-bottom: 2px solid var(--primary-color, #C0A062);
}

/* Header sticky com efeito de vidro fosco quando rola */
header,
header.site-header {
  position: sticky;
  top: 0;
  z-index: 999;
  background: #FFFFFF;
  border-bottom: 1px solid var(--border-color, #E0E0E0);
  transition: background-color 0.25s ease, box-shadow 0.25s ease, backdrop-filter 0.25s ease;
}

header.header--scrolled,
header.site-header.header--scrolled {
  background: rgba(255, 255, 255, 0.75);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
  border-bottom: 1px solid var(--border-color, #E0E0E0);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* Ajuste para tema claro premium */
header.header--scrolled,
header.site-header.header--scrolled {
  background: rgba(255, 255, 255, 0.85) !important;
  border-bottom-color: var(--border-color, #E0E0E0) !important;
}

/* Comando 12.1 – Barra superior em tema claro */
.topbar {
  background: #FFFFFF;
  color: var(--text-color, #1A1A1A);
}
.topbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 38px;
  padding: 6px 0;
}
.topbar .left, .topbar .right {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.topbar a { color: var(--text-color, #1A1A1A); opacity: 0.95; text-decoration: none; }
.topbar a:hover { opacity: 1; text-decoration: underline; text-decoration-color: rgba(0,0,0,0.35); text-underline-offset: 3px; }
.topbar i { color: var(--primary-color, #D4AF37); opacity: 0.9; margin-right: 6px; }
.topbar .sep { color: var(--muted-text, #666666); opacity: 0.6; }

/* Comando 12.2 – Otimização da Logo */
/* Aumenta a área de exibição em ~25% e mantém adaptação em telas menores */
:root { --logo-max-height: 52px; }
.logo img#site-logo,
.header .logo img {
  height: var(--logo-max-height);
  max-height: var(--logo-max-height);
}

/* Responsividade: reduz levemente em telas menores para preservar layout */
@media (max-width: 768px) {
  :root { --logo-max-height: 36px; }
}
@media (max-width: 480px) {
  :root { --logo-max-height: 32px; }
}

/* Menu mobile: ícone aparece e menu vira painel escuro */
@media (max-width: 900px) {
  .header .main-nav { position: fixed; top: 60px; right: 16px; left: 16px; display: none; flex-direction: column; padding: 12px; gap: 8px; background: #FFFFFF; border: 1px solid var(--border-color); border-radius: var(--radius-ui); box-shadow: var(--shadow-lg); }
  .header .main-nav.active { display: flex; }
  .header .nav-toggle { display: block; color: var(--text-color); }
}

/* Comando 14.2 – Estilo moderno dos campos e botão na seção de contato (tema claro) */
.contact-section .contact-form input,
.contact-section .contact-form select,
.contact-section .contact-form textarea {
  border-radius: 8px !important;
  background: #FFFFFF !important;
  color: #1A1A1A !important;
  border: 1px solid var(--border-color, #E0E0E0) !important;
}
.contact-section .contact-form input:focus,
.contact-section .contact-form select:focus,
.contact-section .contact-form textarea:focus {
  border-color: var(--primary-color, #D4AF37) !important;
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 212,175,55), 0.15) !important;
}
/* Botão Enviar dourado com texto preto na seção de contato */
.contact-form-section .btn.btn-primary,
.contact-form-section button[type="submit"] {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: #000;
}

.contact-form-section .btn.btn-primary:hover,
.contact-form-section button[type="submit"]:hover {
  filter: brightness(0.95);
}
.contact-section .contact-form .btn.btn-primary:hover {
  filter: brightness(1.05);
}
/* Tema claro – Campos de formulário na seção de contato (Tópico 28.3) */
.contact-form-section .contact-form input,
.contact-form-section .contact-form select,
.contact-form-section .contact-form textarea {
  background: #FFFFFF !important;
  border: 1px solid #E0E0E0 !important;
  color: #1A1A1A !important;
}
.contact-form-section .contact-form input::placeholder,
.contact-form-section .contact-form textarea::placeholder {
  color: #777777 !important;
}
.contact-form-section .contact-form input:focus,
.contact-form-section .contact-form select:focus,
.contact-form-section .contact-form textarea:focus {
  border-color: #C0A062 !important;
  box-shadow: 0 0 0 3px rgba(192, 160, 98, 0.20) !important;
  outline: none !important;
}
/* Tópico 28.1 – Fundo do site escuro, card branco interno */
.contact-form-section { background: #FFFFFF !important; }
#cta, .cta-section { display: block !important; }

/* Header – Ícones sociais dourados (Comando 20.4) */
.header .header-socials { display: flex; align-items: center; gap: 12px; }
.header .header-socials a { color: #C0A062; font-size: 1.15rem; padding: 6px; }
.header .header-socials a:hover { color: #d6b879; }

/* Header sticky – Comando 20.5: efeito fosco e redução de altura */
.header .container { transition: height 0.25s ease; }
header.header--scrolled,
header.site-header.header--scrolled {
  background: #121212CC !important;
  -webkit-backdrop-filter: blur(10px) !important;
  backdrop-filter: blur(10px) !important;
  color: #F5F5F5 !important;
}
.header.header--scrolled .container { height: 64px; }
.header.header--scrolled .logo span { color: #F5F5F5; }
.header.header--scrolled .main-nav a { color: #F5F5F5; }
.header.header--scrolled .main-nav a:hover { color: var(--primary-color); background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.18); }
.header.header--scrolled .nav-toggle { color: #F5F5F5; }
/* Tópico 28.1 – Fundo do site escuro, card branco interno */
.contact-form-section { background: #FFFFFF !important; }
#cta, .cta-section { display: block !important; }

/* Header – Ícones sociais dourados (Comando 20.4) */
.header .header-socials { display: flex; align-items: center; gap: 12px; }
.header .header-socials a { color: #C0A062; font-size: 1.15rem; padding: 6px; }
.header .header-socials a:hover { color: #d6b879; }

/* Tópico 36 — Header: Marca e Ícones Sociais */
.header .logo img#site-logo { display: none !important; }
.header #site-title {
  text-transform: uppercase !important;
  font-size: 1.95rem !important; /* +50% */
  color: #1A1A1A !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em;
}
.header .header-socials a {
  color: #1A1A1A !important;
  font-size: 1.5rem !important; /* +30% */
  padding: 8px !important;
}

/* Header sticky — estado ao rolar */
header.header--scrolled,
header.site-header.header--scrolled {
  background: rgba(255, 255, 255, 0.80) !important;
  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.05) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  backdrop-filter: blur(10px) !important;
}
.header.header--scrolled .logo span,
.header.header--scrolled .main-nav a,
.header.header--scrolled .nav-toggle {
  color: #1A1A1A !important;
}
.header.header--light {
  background: #ffffff !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.header.header--light #site-title,
.header.header--light .main-nav a,
.header.header--light .header-socials a {
  color: #C0A062 !important;
}
.header.header--light .main-nav a:hover {
  color: #b19150 !important; /* leve escurecimento no hover */
}

/* Tópico 30.4 — Destaque de link ativo em dourado */
.header .main-nav a.active,
.header .main-nav a[aria-current="page"] {
  color: #C0A062 !important;
}

/* Comando 23.3 – Header sticky com fundo #1E1E1E e sombra */
header.header--scrolled,
header.site-header.header--scrolled {
  background: #1E1E1E !important;
  box-shadow: 0 8px 18px rgba(0,0,0,0.18) !important;
  backdrop-filter: none !important;
  transition: background 240ms ease, box-shadow 240ms ease !important;
}
.header.header--scrolled .container { height: 64px; }
.header.header--scrolled .logo span { color: #F5F5F5; }
.header.header--scrolled .main-nav a { color: #F5F5F5; }
.header.header--scrolled .main-nav a:hover { color: var(--primary-color); background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.18); }
.header.header--scrolled .nav-toggle { color: #F5F5F5; }
/* Tópico 28.1 – Fundo do site escuro, card branco interno */
.contact-form-section { background: #121212 !important; }
#cta, .cta-section { display: block !important; }

/* Header – Ícones sociais dourados (Comando 20.4) */
.header .header-socials { display: flex; align-items: center; gap: 12px; }
.header .header-socials a { color: #C0A062; font-size: 1.15rem; padding: 6px; }
.header .header-socials a:hover { color: #d6b879; }
/* Padronização da seção de contato: fundo branco e formulário sem contorno dourado */
#contact.contact-form-section { background: #FFFFFF !important; }
.contact-form-container {
  background: #FFFFFF !important;
  border: 1px solid var(--border-color, #E0E0E0) !important; /* neutro */
  box-shadow: 0 8px 24px rgba(0,0,0,0.06) !important; /* sutil e moderno */
}
.contact-left .social-icons a { color: #1A1A1A !important; }
.contact-left .social-icons a:hover { color: var(--primary-color, #C0A062) !important; }
.contact-form-section .contact-form input,
.contact-form-section .contact-form select,
.contact-form-section .contact-form textarea {
  background: #FFFFFF !important;
  border: 1px solid #E0E0E0 !important;
  color: #1A1A1A !important;
}
.contact-form-section .contact-form input::placeholder,
.contact-form-section .contact-form textarea::placeholder {
  color: #777777 !important;
}
.contact-form-section .contact-form input:focus,
.contact-form-section .contact-form select:focus,
.contact-form-section .contact-form textarea:focus {
  border-color: #C0A062 !important;
  box-shadow: 0 0 0 3px rgba(192, 160, 98, 0.20) !important;
  outline: none !important;
}
/* Tópico 28.1 – Fundo do site escuro, card branco interno */
.contact-form-section { background: #121212 !important; }
#cta, .cta-section { display: none !important; }

/* Header – Ícones sociais dourados (Comando 20.4) */
.header .header-socials { display: flex; align-items: center; gap: 12px; }
.header .header-socials a { color: #C0A062; font-size: 1.15rem; padding: 6px; }
.header .header-socials a:hover { color: #d6b879; }
/* Tópico 36.1 — Header sempre branco com degradê sutil */
header,
header.site-header,
.header {
  background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0.98) 60%, rgba(255,255,255,0.96) 100%) !important;
  color: #1A1A1A !important;
  border-bottom: 1px solid var(--border-color, #E0E0E0) !important;
}
header.header--scrolled,
header.site-header.header--scrolled,
.header.header--scrolled {
  background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(255,255,255,0.96) 70%, rgba(255,255,255,0.94) 100%) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  backdrop-filter: blur(10px) !important;
  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.05) !important;
  border-bottom: 1px solid var(--border-color, #E0E0E0) !important;
  color: #1A1A1A !important;
}
/* Garantir cores de itens no estado scrolled */
.header.header--scrolled .logo span { color: #1A1A1A !important; }
.header.header--scrolled .main-nav a { color: #1A1A1A !important; }
.header.header--scrolled .nav-toggle,
.header.header--scrolled .nav-toggle i { color: #1A1A1A !important; }
.header.header--light {
  background: #ffffff !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.header.header--light #site-title,
.header.header--light .main-nav a,
.header.header--light .header-socials a {
  color: #C0A062 !important;
}
.header.header--light .main-nav a:hover {
  color: #b19150 !important; /* leve escurecimento no hover */
}

/* Tópico 30.4 — Destaque de link ativo em dourado */
.header .main-nav a.active,
.header .main-nav a[aria-current="page"] {
  color: #C0A062 !important;
}

/* Comando 23.3 – Header sticky com fundo #1E1E1E e sombra */
header.header--scrolled,
header.site-header.header--scrolled {
  background: #1E1E1E !important;
  box-shadow: 0 8px 18px rgba(0,0,0,0.18) !important;
  backdrop-filter: none !important;
  transition: background 240ms ease, box-shadow 240ms ease !important;
}
.header.header--scrolled .container { height: 64px; }
.header.header--scrolled .logo span { color: #F5F5F5; }
.header.header--scrolled .main-nav a { color: #F5F5F5; }
.header.header--scrolled .main-nav a:hover { color: var(--primary-color); background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.18); }
.header.header--scrolled .nav-toggle { color: #F5F5F5; }
/* Tópico 28.1 – Fundo do site escuro, card branco interno */
.contact-form-section { background: #121212 !important; }
#cta, .cta-section { display: none !important; }

/* Header – Ícones sociais dourados (Comando 20.4) */
.header .header-socials { display: flex; align-items: center; gap: 12px; }
.header .header-socials a { color: #C0A062; font-size: 1.15rem; padding: 6px; }
.header .header-socials a:hover { color: #d6b879; }