/* ============================================================

   TOTUSTUUS BRECHÓ — Main Stylesheet

   Paleta: Azul Degradê | Branco #FFFFFF | Bege #D8C3A5 | Dourado #C9A227

   ============================================================ */



@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=Jost:wght@300;400;500;600&display=swap');



/* ── Reset & Base ─────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }



:root {

  --bg-gradient: linear-gradient(135deg, #071f44 0%, #196bdf 50%, #051d41 100%);

  --black:    #0A192F; /* Atualizado para Azul Escuro */

  --white:    #FFFFFF;

  --beige:    #D8C3A5;

  --beige-light: #EDE3D6;

  --beige-dark:  #B8A48A;

  --gold:     #C9A227;

  --gold-dark: #9E7F1D;

  --gold-light: #E4C35C;

  --gray:     #202122;

  --gray-mid: #272626;

  --gray-light: #888888;

  --font-serif: 'Cormorant Garamond', Georgia, serif;

  --font-sans:  'Jost', system-ui, sans-serif;

  --transition: 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);

  --radius: 4px;

  --radius-lg: 12px;

  --shadow: 0 4px 24px rgba(0,0,0,0.12);

  --shadow-lg: 0 12px 48px rgba(0,0,0,0.22);

}



html { scroll-behavior: smooth; font-size: 16px; }



body {

  font-family: var(--font-sans);

  background: var(--bg-gradient); /* Aplicado degradê */

  color: var(--white);

  line-height: 1.6;

  overflow-x: hidden;

}



img { max-width: 100%; height: auto; display: block; }

a   { text-decoration: none; color: inherit; }

ul  { list-style: none; }

button { cursor: pointer; border: none; background: none; font-family: inherit; }



/* ── Scrollbar ────────────────────────────────────────────── */

::-webkit-scrollbar { width: 6px; }

::-webkit-scrollbar-track { background: var(--black); }

::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 3px; }



/* ── Typography helpers ───────────────────────────────────── */

.serif { font-family: var(--font-serif); }

.gold-text { color: var(--gold); }



/* ── Utility ──────────────────────────────────────────────── */

.container { width: 100%; max-width: 1100px; margin: 0 auto; padding: 0 20px; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

.hidden { display: none !important; }



/* ── Loader ───────────────────────────────────────────────── */

#page-loader {

  position: fixed; inset: 0;

  background: var(--black);

  display: flex; align-items: center; justify-content: center;

  z-index: 9999;

  transition: opacity 0.6s ease, visibility 0.6s ease;

}

#page-loader.fade-out { opacity: 0; visibility: hidden; }

.loader-inner {

  display: flex; flex-direction: column; align-items: center; gap: 20px;

}

.loader-logo {

  font-family: var(--font-serif);

  font-size: 2rem;

  color: var(--gold);

  letter-spacing: 0.15em;

  animation: pulse-gold 1.5s ease-in-out infinite;

}

.loader-bar {

  width: 140px; height: 2px;

  background: var(--gray);

  border-radius: 2px;

  overflow: hidden;

  position: relative;

}

.loader-bar::after {

  content: '';

  position: absolute; left: -100%; top: 0;

  width: 100%; height: 100%;

  background: linear-gradient(90deg, transparent, var(--gold), transparent);

  animation: slide-bar 1.4s ease-in-out infinite;

}

@keyframes pulse-gold {

  0%, 100% { opacity: 1; }

  50% { opacity: 0.5; }

}

@keyframes slide-bar {

  0%   { left: -100%; }

  100% { left: 100%; }

}



/* ── Header / Navbar ──────────────────────────────────────── */

#header {

  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;

  background: rgba(10, 25, 47, 0.92); /* Azul escuro semi-transparente */

  backdrop-filter: blur(14px);

  -webkit-backdrop-filter: blur(14px);

  border-bottom: 1px solid rgba(201,162,39,0.2);

  transition: var(--transition);

}

#header.scrolled { border-bottom-color: rgba(201,162,39,0.4); }



.nav-inner {

  display: flex; align-items: center; justify-content: space-between;

  height: 70px;

}

.nav-brand {

  display: flex; flex-direction: column; line-height: 1.1;

}

.nav-brand .brand-name {

  font-family: var(--font-serif);

  font-size: 1.5rem;

  font-weight: 600;

  color: var(--gold);

  letter-spacing: 0.08em;

}

.nav-brand .brand-sub {

  font-size: 0.6rem;

  letter-spacing: 0.25em;

  color: var(--beige);

  text-transform: uppercase;

}

.nav-links {

  display: flex; align-items: center; gap: 32px;

}

.nav-links a {

  font-size: 0.78rem;

  letter-spacing: 0.15em;

  text-transform: uppercase;

  color: var(--beige);

  transition: color var(--transition);

  position: relative;

}

.nav-links a::after {

  content: '';

  position: absolute; bottom: -4px; left: 0; right: 0;

  height: 1px; background: var(--gold);

  transform: scaleX(0); transform-origin: right;

  transition: transform var(--transition);

}

.nav-links a:hover { color: var(--gold); }

.nav-links a:hover::after { transform: scaleX(1); transform-origin: left; }



.nav-admin-btn {

  font-size: 0.72rem;

  letter-spacing: 0.12em;

  text-transform: uppercase;

  color: var(--gold);

  border: 1px solid var(--gold);

  padding: 8px 18px;

  border-radius: var(--radius);

  transition: var(--transition);

}

.nav-admin-btn:hover {

  background: var(--gold);

  color: var(--black);

}



/* Hamburger */

.hamburger {

  display: none;

  flex-direction: column; gap: 5px;

  padding: 8px; cursor: pointer;

}

.hamburger span {

  display: block; width: 24px; height: 2px;

  background: var(--beige);

  border-radius: 2px;

  transition: var(--transition);

}

.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }

.hamburger.open span:nth-child(2) { opacity: 0; }

.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }



/* Mobile nav */
.mobile-nav {
  display: none;
  flex-direction: column;
  background: #0a192f; /* Cor do cabeçalho */
  position: absolute;
  top: 70px; /* Distância exata do topo (altura do header) */
  left: 0;
  width: 100%;
  z-index: 999;
  padding: 20px 0;
  border-bottom: 1px solid rgba(201,162,39,0.2);
}

.mobile-nav.open {
  display: flex;
}

.mobile-nav a {
  font-size: 1.1rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--beige);
  padding: 20px 30px; /* Aumenta a área clicável */
  border-bottom: 1px solid rgba(255,255,255,0.05);
  display: block;
}

.mobile-nav a:hover { color: var(--gold); }



/* ── Hero / Banner ────────────────────────────────────────── */

#hero {

  position: relative;

  min-height: 100vh;

  display: flex; align-items: center;

  background: var(--bg-gradient); /* Degradê aplicado */

  overflow: hidden;

  padding-top: 70px;

}

.hero-bg {

  position: absolute; inset: 0;

  background: var(--bg-gradient); /* Degradê aplicado */

}

.hero-bg::before {

  content: '';

  position: absolute; inset: 0;

  background:

    radial-gradient(ellipse 60% 50% at 70% 40%, rgba(201,162,39,0.12) 0%, transparent 70%),

    radial-gradient(ellipse 40% 60% at 20% 80%, rgba(216,195,165,0.06) 0%, transparent 60%);

}

.hero-grid-overlay {

  position: absolute; inset: 0;

  background-image:

    linear-gradient(rgba(201,162,39,0.04) 1px, transparent 1px),

    linear-gradient(90deg, rgba(201,162,39,0.04) 1px, transparent 1px);

  background-size: 60px 60px;

}

.hero-content {

  position: relative; z-index: 2;

  max-width: 620px;

  animation: fadeInUp 0.9s ease both;

}

.hero-badge {

  display: inline-flex; align-items: center; gap: 8px;

  font-size: 0.65rem;

  letter-spacing: 0.3em;

  text-transform: uppercase;

  color: var(--gold);

  border: 1px solid rgba(201,162,39,0.4);

  padding: 6px 16px;

  border-radius: 100px;

  margin-bottom: 24px;

}

.hero-badge::before {

  content: '';

  width: 6px; height: 6px;

  border-radius: 50%;

  background: var(--gold);

  animation: blink 2s ease-in-out infinite;

}

@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }



.hero-title {

  font-family: var(--font-serif);

  font-size: clamp(2.8rem, 8vw, 5.5rem);

  font-weight: 300;

  line-height: 1.05;

  color: var(--white);

  margin-bottom: 16px;

}

.hero-title em {

  font-style: italic;

  color: var(--gold);

}

.hero-tagline {

  font-size: 1rem;

  color: var(--beige);

  letter-spacing: 0.05em;

  margin-bottom: 40px;

  max-width: 420px;

  line-height: 1.7;

}

.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; }



.btn-primary {

  display: inline-flex; align-items: center; gap: 10px;

  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);

  color: var(--black);

  font-size: 0.78rem;

  font-weight: 600;

  letter-spacing: 0.15em;

  text-transform: uppercase;

  padding: 16px 36px;

  border-radius: var(--radius);

  border: none;

  transition: var(--transition);

  box-shadow: 0 4px 20px rgba(201,162,39,0.35);

}

.btn-primary:hover {

  transform: translateY(-2px);

  box-shadow: 0 8px 30px rgba(201,162,39,0.5);

  background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 100%);

}

.btn-primary svg { width: 16px; height: 16px; }



.btn-outline {

  display: inline-flex; align-items: center; gap: 10px;

  background: transparent;

  color: var(--beige);

  font-size: 0.78rem;

  font-weight: 500;

  letter-spacing: 0.15em;

  text-transform: uppercase;

  padding: 16px 32px;

  border-radius: var(--radius);

  border: 1px solid rgba(216,195,165,0.4);

  transition: var(--transition);

}

.btn-outline:hover {

  border-color: var(--beige);

  color: var(--white);

  transform: translateY(-2px);

}



.hero-image {

  position: absolute; right: -40px; top: 50%; bottom: 0;

  transform: translateY(-50%);

  width: 50%; max-width: 560px;

  opacity: 0.65;

  animation: fadeInRight 1.1s ease 0.2s both;

}

.hero-image img {

  width: 100%; height: 100%;

  object-fit: cover;

  mask-image: linear-gradient(to left, rgba(0,0,0,0.9) 0%, transparent 100%);

  -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,0.9) 0%, transparent 100%);

}



/* ── Filters ──────────────────────────────────────────────── */

#catalogo { padding: 80px 0 40px; background: var(--white); }

.section-header { text-align: center; margin-bottom: 48px; }

.section-eyebrow {

  display: inline-block;

  font-size: 0.65rem;

  letter-spacing: 0.3em;

  text-transform: uppercase;

  color: var(--gold);

  margin-bottom: 12px;

}

.section-title {

  font-family: var(--font-serif);

  font-size: clamp(2rem, 5vw, 3.2rem);

  font-weight: 400;

  line-height: 1.15;

  color: var(--black);

}

.section-title em { color: var(--gold); font-style: italic; }

.section-divider {

  display: flex; align-items: center; justify-content: center;

  gap: 12px; margin-top: 16px;

}

.section-divider::before, .section-divider::after {

  content: ''; flex: 1; max-width: 80px; height: 1px;

  background: linear-gradient(to right, transparent, var(--beige-dark));

}

.section-divider::after {

  background: linear-gradient(to left, transparent, var(--beige-dark));

}

.section-divider span {

  display: block; width: 6px; height: 6px;

  border: 1px solid var(--gold); border-radius: 50%;

}



.filters-bar {

  display: flex; align-items: center; justify-content: center;

  flex-wrap: wrap; gap: 10px;

  margin-bottom: 48px;

}

.filter-btn {

  font-size: 0.72rem;

  letter-spacing: 0.15em;

  text-transform: uppercase;

  padding: 10px 24px;

  border-radius: 100px;

  border: 1px solid var(--beige-dark);

  color: var(--gray-mid);

  background: transparent;

  transition: var(--transition);

}

.filter-btn:hover {

  border-color: var(--gold);

  color: var(--gold);

}

.filter-btn.active {

  background: var(--black);

  color: var(--gold);

  border-color: var(--black);

}



/* ── Products Grid ────────────────────────────────────────── */

.products-grid {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));

  gap: 28px;

}



.product-card {

  background: var(--white);

  border: 1px solid var(--beige-light);

  border-radius: var(--radius-lg);

  overflow: hidden;

  transition: var(--transition);

  animation: fadeInUp 0.5s ease both;

}

.product-card:hover {

  transform: translateY(-6px);

  box-shadow: var(--shadow-lg);

  border-color: rgba(201,162,39,0.3);

}



.product-img-wrap {

  position: relative;

  aspect-ratio: 3/4;

  overflow: hidden;

  background: var(--beige-light);

}

.product-img-wrap img {

  width: 100%; height: 100%;

  object-fit: cover;

  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);

}

.product-card:hover .product-img-wrap img { transform: scale(1.06); }



.product-badge {

  position: absolute; top: 12px; left: 12px;

  font-size: 0.6rem;

  letter-spacing: 0.2em;

  text-transform: uppercase;

  background: var(--gold);

  color: var(--black);

  padding: 4px 10px;

  border-radius: 100px;

  font-weight: 600;

}

.product-badge.promo { background: #C0392B; color: var(--white); }



.product-info { padding: 18px; }

.product-category {

  font-size: 0.6rem;

  letter-spacing: 0.25em;

  text-transform: uppercase;

  color: var(--gold);

  margin-bottom: 6px;

}

.product-name {

  font-family: var(--font-serif);

  font-size: 1.15rem;

  font-weight: 500;

  color: var(--black);

  margin-bottom: 6px;

  line-height: 1.3;

}

.product-desc {

  font-size: 0.8rem;

  color: var(--gray-light);

  margin-bottom: 12px;

  display: -webkit-box;

  -webkit-line-clamp: 2;

  -webkit-box-orient: vertical;

  overflow: hidden;

}

.product-meta {

  display: flex; align-items: center; gap: 12px;

  margin-bottom: 16px;

}

.product-size {

  font-size: 0.7rem;

  letter-spacing: 0.1em;

  color: var(--gray-mid);

  background: var(--beige-light);

  padding: 3px 10px;

  border-radius: 100px;

}

.product-price {

  font-family: var(--font-serif);

  font-size: 1.3rem;

  font-weight: 600;

  color: var(--black);

}



.btn-whatsapp {

  display: flex; align-items: center; justify-content: center; gap: 8px;

  width: 100%;

  background: linear-gradient(135deg, #25D366, #128C7E);

  color: var(--white);

  font-size: 0.72rem;

  font-weight: 600;

  letter-spacing: 0.12em;

  text-transform: uppercase;

  padding: 12px;

  border-radius: var(--radius);

  border: none;

  transition: var(--transition);

}

.btn-whatsapp:hover {

  transform: translateY(-1px);

  box-shadow: 0 6px 20px rgba(37,211,102,0.35);

}

.btn-whatsapp svg { width: 18px; height: 18px; }



/* Empty state */

.empty-state {

  grid-column: 1/-1;

  text-align: center;

  padding: 80px 20px;

}

.empty-state .empty-icon {

  font-size: 3rem; margin-bottom: 16px; opacity: 0.3;

}

.empty-state p {

  font-family: var(--font-serif);

  font-size: 1.3rem;

  color: var(--gray-light);

}



/* Skeleton loader */

.skeleton-card {

  background: var(--white);

  border: 1px solid var(--beige-light);

  border-radius: var(--radius-lg);

  overflow: hidden;

}

.skeleton-img {

  aspect-ratio: 3/4;

  background: linear-gradient(90deg, var(--beige-light) 25%, #EDE3D6 50%, var(--beige-light) 75%);

  background-size: 200% 100%;

  animation: shimmer 1.4s ease-in-out infinite;

}

.skeleton-info { padding: 18px; }

.skeleton-line {

  height: 12px; border-radius: 6px; margin-bottom: 10px;

  background: linear-gradient(90deg, var(--beige-light) 25%, #EDE3D6 50%, var(--beige-light) 75%);

  background-size: 200% 100%;

  animation: shimmer 1.4s ease-in-out infinite;

}

.skeleton-line.short { width: 60%; }

.skeleton-line.btn { height: 40px; margin-top: 16px; }

@keyframes shimmer {

  0%   { background-position: 200% 0; }

  100% { background-position: -200% 0; }

}



/* ── About Strip ──────────────────────────────────────────── */

#sobre {

  padding: 80px 0;

  background: var(--bg-gradient); /* Degradê aplicado */

  position: relative; overflow: hidden;

}

#sobre::before {

  content: '';

  position: absolute; inset: 0;

  background: radial-gradient(ellipse 70% 80% at 50% 50%, rgba(201,162,39,0.07) 0%, transparent 70%);

}

.sobre-grid {

  display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center;

}

.sobre-text { position: relative; z-index: 1; }

.sobre-text .section-eyebrow { color: var(--gold); }

.sobre-text .section-title { color: var(--white); }

.sobre-text .section-title em { color: var(--gold); }

.sobre-body {

  margin-top: 24px;

  color: var(--beige);

  line-height: 1.8;

  font-size: 0.95rem;

}

.sobre-features {

  display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 32px;

}

.feature-item {

  display: flex; flex-direction: column; gap: 6px;

}

.feature-icon { font-size: 1.4rem; }

.feature-label {

  font-size: 0.7rem;

  letter-spacing: 0.2em;

  text-transform: uppercase;

  color: var(--gold);

  font-weight: 500;

}

.feature-desc { font-size: 0.82rem; color: var(--beige); }

.sobre-visual {

  position: relative; z-index: 1;

  border: 1px solid rgba(201,162,39,0.25);

  border-radius: var(--radius-lg);

  overflow: hidden;

  aspect-ratio: 4/5;

}

.sobre-visual img { width: 100%; height: 100%; object-fit: cover; }



/* ── Footer ───────────────────────────────────────────────── */

#footer {

  background: #020C1B; /* Azul profundo */

  border-top: 1px solid rgba(201,162,39,0.2);

  padding: 60px 0 30px;

}

.footer-grid {

  display: grid;

  grid-template-columns: 2fr 1fr 1fr;

  gap: 48px;

  margin-bottom: 48px;

}

.footer-brand .brand-name {

  font-family: var(--font-serif);

  font-size: 1.8rem;

  color: var(--gold);

  display: block;

  margin-bottom: 4px;

}

.footer-brand .brand-tagline {

  font-size: 0.72rem;

  color: var(--beige);

  letter-spacing: 0.15em;

  margin-bottom: 20px;

}

.footer-desc {

  font-size: 0.85rem;

  color: var(--gray-light);

  line-height: 1.7;

  margin-bottom: 24px;

}

.social-links { display: flex; gap: 12px; }

.social-link {

  display: flex; align-items: center; justify-content: center;

  width: 40px; height: 40px;

  border: 1px solid rgba(201,162,39,0.3);

  border-radius: 50%;

  color: var(--beige);

  transition: var(--transition);

}

.social-link:hover {

  border-color: var(--gold);

  color: var(--gold);

  transform: translateY(-3px);

}

.social-link svg { width: 18px; height: 18px; }



.footer-heading {

  font-size: 0.65rem;

  letter-spacing: 0.3em;

  text-transform: uppercase;

  color: var(--gold);

  margin-bottom: 20px;

}

.footer-info-item {

  display: flex; align-items: flex-start; gap: 10px;

  margin-bottom: 14px;

}

.footer-info-item svg { width: 16px; height: 16px; color: var(--gold); flex-shrink: 0; margin-top: 2px; }

.footer-info-item span { font-size: 0.82rem; color: var(--beige); line-height: 1.5; }

.footer-link-list { display: flex; flex-direction: column; gap: 12px; }

.footer-link-list a {

  font-size: 0.82rem;

  color: var(--gray-light);

  transition: color var(--transition);

}

.footer-link-list a:hover { color: var(--gold); }



.footer-bottom {

  border-top: 1px solid rgba(255,255,255,0.05);

  padding-top: 28px;

  display: flex; align-items: center; justify-content: space-between;

  flex-wrap: wrap; gap: 12px;

}

.footer-copyright {

  font-size: 0.75rem;

  color: var(--gray-light);

}

.footer-copyright a { color: var(--gold); }



/* ── Toast notification ───────────────────────────────────── */

.toast-container {

  position: fixed; bottom: 24px; right: 24px;

  display: flex; flex-direction: column; gap: 10px;

  z-index: 9998;

}

.toast {

  display: flex; align-items: center; gap: 12px;

  background: var(--black);

  border: 1px solid rgba(201,162,39,0.3);

  color: var(--white);

  padding: 14px 20px;

  border-radius: var(--radius-lg);

  font-size: 0.83rem;

  box-shadow: var(--shadow-lg);

  animation: slideInToast 0.4s ease;

  max-width: 340px;

}

.toast.success { border-left: 3px solid #25D366; }

.toast.error   { border-left: 3px solid #E74C3C; }

.toast.info    { border-left: 3px solid var(--gold); }

@keyframes slideInToast {

  from { opacity: 0; transform: translateX(40px); }

  to   { opacity: 1; transform: translateX(0); }

}



/* ── Animations ───────────────────────────────────────────── */

@keyframes fadeInUp {

  from { opacity: 0; transform: translateY(30px); }

  to   { opacity: 1; transform: translateY(0); }

}

@keyframes fadeInRight {

  from { opacity: 0; transform: translate(40px, -50%); }

  to   { opacity: 0.65; transform: translate(0, -50%); }

}

.fade-in-up {

  opacity: 0;

  transform: translateY(30px);

  transition: opacity 0.6s ease, transform 0.6s ease;

}

.fade-in-up.visible { opacity: 1; transform: translateY(0); }



/* ── WhatsApp FAB ─────────────────────────────────────────── */

.whatsapp-fab {

  position: fixed; bottom: 28px; left: 28px;

  width: 56px; height: 56px;

  background: linear-gradient(135deg, #25D366, #128C7E);

  border-radius: 50%;

  display: flex; align-items: center; justify-content: center;

  box-shadow: 0 4px 24px rgba(37,211,102,0.45);

  z-index: 990;

  transition: var(--transition);

  animation: fab-bounce 2s ease-in-out 3s infinite;

}

.whatsapp-fab:hover {

  transform: scale(1.12);

  box-shadow: 0 8px 32px rgba(37,211,102,0.6);

}

.whatsapp-fab svg { width: 28px; height: 28px; color: white; }

@keyframes fab-bounce {

  0%, 100% { transform: translateY(0); }

  50% { transform: translateY(-6px); }

}



/* ── Responsive ───────────────────────────────────────────── */

@media (max-width: 900px) {

  .nav-admin-btn { display: none; }

  .hamburger { display: flex; }

  .sobre-grid { grid-template-columns: 1fr; gap: 40px; }

  .sobre-visual { aspect-ratio: 16/9; }

  .footer-grid { grid-template-columns: 1fr; gap: 36px; }

  .hero-image { display: none; }

}

@media (max-width: 640px) {

  .products-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }

  .hero-title { font-size: clamp(2.2rem, 10vw, 3rem); }

  .hero-actions { flex-direction: column; }

  .btn-primary, .btn-outline { width: 100%; justify-content: center; }

  .sobre-features { grid-template-columns: 1fr; }

}

@media (max-width: 380px) {

  .products-grid { grid-template-columns: 1fr; }

}



/* ── Back to top ──────────────────────────────────────────── */

#back-to-top {

  position: fixed; bottom: 100px; right: 24px;

  width: 44px; height: 44px;

  background: var(--black);

  border: 1px solid rgba(201,162,39,0.4);

  border-radius: 50%;

  display: none; align-items: center; justify-content: center;

  color: var(--gold);

  z-index: 989;

  transition: var(--transition);

}

#back-to-top.visible { display: flex; }

#back-to-top:hover {

  background: var(--gold);

  color: var(--black);

  transform: translateY(-3px);

}

/* Modal de Imagem Ampliada */

/* ── Modal de Visualização Ampliada (Versão Corrigida) ── */

.image-modal {

  display: none;

  position: fixed;

  z-index: 99999;

  left: 0;

  top: 0;

  width: 100%;

  height: 100%;

  background-color: rgba(0,0,0,0.95);

  align-items: center;

  justify-content: center;

  cursor: zoom-out;

}



.modal-content {

  max-width: 90vw !important;

  max-height: 90vh !important;

  width: auto !important;

  height: auto !important;

  object-fit: contain;

  border-radius: 4px;

  box-shadow: 0 0 40px rgba(0,0,0,0.8);

}



.close-modal {

  position: absolute;

  top: 20px;

  right: 30px;

  color: #fff;

  font-size: 50px;

  cursor: pointer;

  text-shadow: 0 0 10px rgba(0,0,0,0.5);

  z-index: 100000;

}



/* Área Secreta Admin */

.secret-click-area {

  position: fixed;

  bottom: 0;

  left: 0;

  width: 50px;

  height: 50px;

  background: transparent;

  z-index: 9999;

  cursor: pointer;

}

/* Esconder o botão no computador */

.menu-hamburguer { display: none; background: none; border: none; font-size: 30px; color: white; }



/* Estilo do menu mobile */

@media (max-width: 768px) {

    .menu-hamburguer { display: block; } /* Mostrar barrinhas no celular */

   

    .menu-nav {

        display: none; /* Escondido por padrão */

        flex-direction: column;

        position: absolute;

        top: 60px; right: 0;

        background: #001f3f; /* Ajuste a cor conforme o seu projeto */

        width: 100%;

    }

   

    .menu-nav.menu-aberto { display: flex; } /* Classe que o JS vai adicionar */

}

/* Estilos para Mobile */

@media (max-width: 768px) {

  .nav-links {

    display: none; /* Esconde no celular */

    position: absolute;

    top: 70px;

    left: 0;

    width: 100%;

    background-color: #0a192f;

    flex-direction: column;

    text-align: center;

    padding: 20px 0;

    z-index: 1000;

  }



  .nav-links.active {

    display: flex; /* Mostra quando o hambúrguer é clicado */

  }



  .hamburger {

    display: block; /* Mostra o botão hambúrguer no celular */

    cursor: pointer;

  }

}



/* Esconde o hambúrguer no Desktop */

@media (min-width: 769px) {

  .hamburger { display: none; }

}