/* style.css - variáveis e estilos principais */
:root{
  --bg: #0b0b0b;
  --card: #111;
  --text: #e9e9e9;
  --muted: #bfc3c7;
  --accent: #caa34a;
  --accent-2: #6dd3ff;
  --glass: rgba(255,255,255,0.03);
}
[data-theme="light"]{
  --bg: #ffffff;
  --card: #f8f9fa;
  --text: #111827;
  --muted: #6b7280;
  --accent: #b07a2b;
  --accent-2: #0b76a8;
  --glass: rgba(0,0,0,0.03);
}

/* Base */
html,body{
  height:100%;
  background: var(--bg);
  color:var(--text);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  transition: color .35s ease;
}

/* Header */
.site-header{ background: transparent; }
.site-brand .logo{ height:48px; width:auto; display:block; }
.nav-link{ color:var(--muted); transition: color .2s; }
.nav-link.active, .nav-link:hover{ color:var(--text); font-weight:600; }

html[data-theme="light"] .nav-link.active,
html[data-theme="light"] .nav-link:hover {
  color: #19a9f3;    /* var(--text); claro: mantém preto/escuro definido no tema */
  font-weight: 600;
}

html:not([data-theme="light"]) .nav-link.active,
html:not([data-theme="light"]) .nav-link:hover {
  color: #f812df;       /* escuro: cor magenta desejada */
  font-weight: 600;
}

/* Hero */
.hero { padding-top: 2rem; padding-bottom: 3rem; }
.hero-card{ background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent); border: 1px solid rgba(255,255,255,0.03); }
.hero-title{ color:var(--accent-2); letter-spacing: 0.4px; }

.spotlight-card{ background: var(--glass); border:1px solid rgba(255,255,255,0.03); }

/* Vitrine */
.vitrine-item{ position: relative; height: 260px; display:flex; flex-direction:column; justify-content:flex-end; }
.vitrine-img{ object-fit:cover; width:100%; height:100%; position:absolute; inset:0; }
.vitrine-caption{ position:relative; backdrop-filter: blur(6px); background: linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0.5)); color: #fff; }

/* WhatsApp floating button */
.whatsapp-fab{
  position: fixed;
  right: 18px;
  bottom: 18px;
  background: var(--accent-2);
  color: #fff;
  width:60px;height:60px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  box-shadow: 0 6px 18px rgba(0,0,0,0.3);
  transform: translateY(0);
  transition: transform .15s ease;
  z-index: 1200;
}
.whatsapp-fab:hover{ transform: translateY(-6px); }
.whatsapp-dot{
  position:absolute;
  top:8px; right:8px;
  width:10px;height:10px;border-radius:50%;
  background:#2ee06f;
  box-shadow: 0 0 14px rgba(46,224,111,0.9);
  animation: pulse 1.6s infinite;
  border: 2px solid rgba(255,255,255,0.18);
}

/* small animations */
@keyframes pulse {
  0% { transform: scale(.9); opacity: .8; }
  50% { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(.9); opacity: .8; }
}

/* Forms & cards */
.vitrine-caption, .hero-card { background: var(--glass); background: var(--glass); transition: background .35s, border-color .35s; }

.card { transition: background .35s, border-color .35s; }

/* Responsive adjustments */
@media (max-width: 991px){
  .vitrine-item{ height: 200px; }
}

[data-theme="light"] {
  /* Remover transition aqui também, pois já está definida no html/body */
  --bg: #ffffff;
  --card: #f8f9fa;
  --text: #111827;
  --muted: #6b7280;
  --accent: #b07a2b;
  --accent-2: #0b76a8;
  --glass: rgba(0,0,0,0.03);
}

.hr-gradient {
  height:4px;
  border: none;
  background-image: linear-gradient(90.27deg, #f926e1 0.22%, #2ab5fb 99.76%);
  margin: 0.1rem auto;
  opacity: 1;
  border-radius: 4px;
}

.site-footer {
  color: var(--text);
}
.site-footer .text-muted {
  color: var(--muted);
}

.text-muted {
  color: var(--muted) !important;
}

.btn-mybutton {
  background-image: linear-gradient(90.27deg, #f926e1 0.22%, #2ab5fb 99.76%);
  border: none;
  color: #fff;
  padding: 12px 28px;
  font-weight: 600;
  border-radius: 8px;
  text-transform: uppercase;
  font-size: 0.95rem;
  letter-spacing: 0.5px;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(249, 38, 225, 0.25);
}

.btn-mybutton:hover {
  background-image: linear-gradient(90.27deg, #f812df 0.22%, #19a9f3 99.76%);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(249, 38, 225, 0.35);
}

.btn-mybutton:active {
  transform: translateY(0);
  box-shadow: 0 4px 8px rgba(249, 38, 225, 0.2);
}

.whatsapp-fab {
  position: fixed;
  right: 18px;
  bottom: 18px;
  background: #25D366; /* Cor verde padrão do WhatsApp */
  color: #fff;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(37, 211, 102, 0.3); /* Sombra ajustada para cor verde */
  transform: translateY(0);
  transition: transform .15s ease;
  z-index: 1200;
}

.whatsapp-fab:hover {
  transform: translateY(-6px);
  background: #22c15e; /* Verde um pouco mais escuro no hover */
}

/* Novo efeito pulsante para o ícone */
.pulse-icon {
  animation: iconPulse 2s infinite;
}

@keyframes iconPulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.8;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.navbar-toggler {
  border-color: rgba(255,255,255,0.3);
}
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba%28255,255,255,0.8%29' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

html[data-theme="light"] .navbar-toggler {
  background: #19a9f3;
  width: 48px;
  height: 48px;
  padding: .25rem;
}
html[data-theme="light"] .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba%28255,255,255,1%29' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
  background-size: 18px 18px;
  background-position: center;
  background-repeat: no-repeat;
}

/* Modo escuro: fundo #f812df, borda #19a9f3, traços brancos */
html:not([data-theme="light"]) .navbar-toggler {
  background: #f812df;
  width: 48px;
  height: 48px;
  padding: .25rem;
}
html:not([data-theme="light"]) .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba%28255,255,255,1%29' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
  background-size: 18px 18px;
  background-position: center;
  background-repeat: no-repeat;
}

/* Ajustes finos para garantir aparência consistente */
.navbar-toggler { display: inline-flex; align-items: center; justify-content: center; }

/* Remover borda/outline ao clicar/foocar no toggler */
.navbar-toggler,
html[data-theme="light"] .navbar-toggler,
html:not([data-theme="light"]) .navbar-toggler {
  border: 2px solid transparent; /* mantém tamanho sem mostrar borda */
  outline: none;
}

.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler:focus-visible {
  outline: none;
  box-shadow: none;
  border-color: transparent !important;
}

/* Traços mais intensos (brancos e mais grossos) para ambos os temas */
html[data-theme="light"] .navbar-toggler-icon,
html:not([data-theme="light"]) .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%23ffffff' stroke-width='3' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
  background-size: 18px 18px;
  background-position: center;
  background-repeat: no-repeat;
}

/* opcional: aumentar contraste ao hover/active sem mudar o comportamento de clique */
.navbar-toggler:hover { transform: translateY(-1px); transition: transform .12s; }

.logo-container {
  position: relative;
  z-index: 2;
}

.logo {
  height: 60px;
  width: auto;
  transition: opacity 0.3s ease;
}

.dark-logo {
  display: block;
}

.light-logo {
  display: none;
}

/* Logo theme switching */
html[data-theme="light"] .dark-logo {
  display: none;
}

html[data-theme="light"] .light-logo {
  display: block;
}

.site-header {
  position: relative;
  z-index: 1;
  background: transparent;
  margin-bottom: -12px; /* Ajuste conforme necessário */
}

.hr-gradient {
  position: relative;
  z-index: 0;
  margin-top: 0;
  height: 4px;
}

/* Ensure navbar elements stay above gradient */
.navbar-toggler,
.form-switch,
.navbar-collapse {
  position: relative;
  z-index: 2;
}

/* Instagram floating button */
.instagram-fab {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  transform: translateY(0);
  transition: all 0.2s ease-out;
  margin-right: 15px;
}

/* Tema claro */
html[data-theme="light"] .instagram-fab {
  background: #000000;
  color: #ffffff;
}

/* Tema escuro */
html:not([data-theme="light"]) .instagram-fab {
  background: #ffffff;
  color: #000000;
}

.instagram-fab:hover {
  transform: translateY(-2px);
}

.instagram-fab:active {
  transform: translateY(0);
}

html[data-theme="light"] .hero-card {
  border: 1px solid rgba(0,0,0,0.1);
  box-shadow: 0 1rem 3rem rgba(0,0,0,0.1);
}

/* Tema escuro */
html:not([data-theme="light"]) .hero-card {
  border: 1px solid rgb(255, 255, 255);
  background: rgba(255,255,255,0.03);
}

/* Content area visibility fix */
.content-area,
.container > section {
  background: var(--bg);
  border: 1px solid rgba(255,255,255,0.05);

}

/* Tema escuro */
html:not([data-theme="light"]) .content-area,
html:not([data-theme="light"]) .container > section {
  background: rgba(255,255,255,0.02);
}

/* Tema claro - mantém comportamento atual */
html[data-theme="light"] .content-area,
html[data-theme="light"] .container > section {
  background: var(--bg);
}

.progress-container {
  position: fixed;             /* faz flutuar */
  top: 100px;                  /* distância do topo */
  left: 50%;                   /* centraliza horizontalmente */
  transform: translateX(-50%); /* completa a centralização */
  width: 80%;
  max-width: 500px;
  height: 20px;
  background: #2b2b2b;
  border-radius: 50px;
  z-index: 9999;         /* garante que fique acima de tudo */
  overflow: hidden;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
}

.progress-bar {
  height: 100%;
  width: 0%;
  background-image: linear-gradient(90.27deg, #f926e1 0.22%, #2ab5fb 99.76%);
  border-radius: 50px;
  transition: width 0.4s ease;
}

/* Animação de carregamento contínuo */
@keyframes loading {
  0% { width: 0%; }
  100% { width: 100%; }
}

.progress-animated {
  animation: loading 3s ease-in-out infinite alternate;
}