/* ============================================================
   NOVA ARTE'S TECH S.A. — CSS V1.6
   Paleta fiel às artes:
   Fundo:  #080810 / #0C0C1A / #14142A
   Roxo:   #7B18E0 → #B45CFF
   Azul:   #00A6E6 → #35E0FF
   Dourado:#916212 → #F1D370
   ============================================================ */

/* Fontes carregadas via <link> no <head> (evita cadeia de requisição do @import) */

/* ── RESET & ROOT ─────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  /* Cores base fiéis às artes */
  --bg-deep:    #080810;
  --bg-dark:    #0C0C1A;
  --bg-card:    #10101E;
  --bg-card2:   #14142A;

  /* Roxo — mais vivo */
  --purple-deep: #5411B4;
  --purple:      #7B18E0;
  --purple-mid:  #9B2FF0;
  --purple-light:#B45CFF;
  --purple-glow: rgba(123,24,224,0.6);

  /* Azul elétrico — mais nítido */
  --blue-deep:   #0080C0;
  --blue:        #00A6E6;
  --blue-mid:    #12C8F5;
  --blue-light:  #35E0FF;
  --blue-neon:   #5CF0FF;
  --blue-glow:   rgba(0,200,245,0.5);

  /* Dourado — mais rico e brilhante */
  --gold-deep:   #916212;
  --gold:        #C99A2E;
  --gold-mid:    #DCB84E;
  --gold-light:  #F1D370;
  --gold-bright: #FCEB9A;
  --gold-glow:   rgba(220,184,78,0.5);

  /* Branco / Textos — mais contraste */
  --white:       #F6F5FF;
  --white-soft:  #D6D4F0;
  --gray:        #7C7AB0;
  --gray-light:  #A6A3D6;

  /* Gradientes — mais saturados */
  --grad-logo:    linear-gradient(135deg, #00A6E6 0%, #7B18E0 50%, #B45CFF 100%);
  --grad-gold:    linear-gradient(135deg, #916212 0%, #DCB84E 40%, #F1D370 60%, #DCB84E 100%);
  --grad-gold-h:  linear-gradient(90deg,  #916212, #F1D370, #916212);
  --grad-purple:  linear-gradient(135deg, #5411B4, #9B2FF0);
  --grad-blue:    linear-gradient(135deg, #0080C0, #35E0FF);
  --grad-hero:    radial-gradient(ellipse at 28% 45%, #240A55 0%, #0A0818 46%, #001E33 100%);
  --grad-card:    linear-gradient(145deg, rgba(123,24,224,0.14) 0%, rgba(0,166,230,0.09) 100%);
  --grad-cta-final: linear-gradient(135deg, #0E0428 0%, #14083C 40%, #08182C 100%);

  /* Sombras */
  --shadow-purple: 0 0 40px rgba(123,24,224,0.5), 0 0 80px rgba(123,24,224,0.2);
  --shadow-blue:   0 0 30px rgba(18,200,245,0.4), 0 0 60px rgba(18,200,245,0.15);
  --shadow-gold:   0 0 25px rgba(201,168,76,0.5), 0 0 50px rgba(220,184,78,0.3);
  --shadow-logo:   0 0 60px rgba(123,24,224,0.6), 0 0 120px rgba(0,166,230,0.3);

  --font-title:  'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:   'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-script: 'Nunito', system-ui, sans-serif;

  --radius:    18px;
  --radius-sm: 10px;
  --radius-xs: 6px;
  --transition: 0.35s cubic-bezier(0.4,0,0.2,1);
}

html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: var(--font-body);
  background: var(--bg-deep);
  color: var(--white);
  overflow-x: hidden;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Títulos: quebra equilibrada para leitura limpa */
.section-title, .hero-title, .sobre-heading, .cta-title, .cta-sub,
.section-subtitle, .lb-name, h1, h2, h3 {
  text-wrap: balance;
}

/* Acessibilidade: respeitar quem prefere menos movimento */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* Desliga apenas animações em loop / de entrada — as microinterações
     de hover continuam ativas para dar retorno visual ao usuário. */
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }
  .reveal, .reveal-left, .reveal-right, .reveal-zoom {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
}

/* Foco visível para navegação por teclado */
:focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Scrollbar */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--bg-dark); }
::-webkit-scrollbar-thumb { background: var(--purple); border-radius: 3px; }

/* ── UTILITY ─────────────────────────────────────────────── */
.container { max-width: 1220px; margin: 0 auto; padding: 0 28px; }
section { padding: 96px 0; position: relative; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* Pular para o conteúdo: fora da tela até receber foco (navegação por teclado) */
.skip-link {
  position: absolute; top: -60px; left: 12px; z-index: 9999;
  background: var(--bg-card); color: var(--white);
  padding: 12px 20px; border-radius: var(--radius-sm);
  font-family: var(--font-title); font-weight: 700; font-size: 0.9rem;
  text-decoration: none; border: 1px solid var(--gold-light);
  transition: top 0.2s ease;
}
.skip-link:focus {
  top: 12px;
}

/* Ícones SVG inline (substituem emojis de interface) */
.ic { width: 1.15em; height: 1.15em; flex-shrink: 0; vertical-align: -0.18em; color: currentColor; }
.svc-icon .ic { width: 24px; height: 24px; color: var(--gold-light); }
.val-ico { display: inline-flex; }
.val-ico .ic { width: 22px; height: 22px; color: var(--gold-light); }
.cta-trust-item .ic { width: 17px; height: 17px; color: var(--gold-mid); }
#cookie .ic { color: var(--gold-mid); }

.gold-text {
  background: var(--grad-gold);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.blue-text { color: var(--blue-mid); }
.purple-text { color: var(--purple-light); }

.section-eyebrow {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin-bottom: 14px;
}
.section-eyebrow::before,
.section-eyebrow::after {
  content: ''; flex: 1; max-width: 60px; height: 1px;
  background: var(--grad-gold);
}
.eyebrow-text {
  font-family: var(--font-title); font-size: 0.72rem;
  letter-spacing: 0.25em; text-transform: uppercase;
  background: var(--grad-gold);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.section-title {
  font-family: var(--font-title);
  font-size: clamp(1.7rem, 4vw, 2.6rem); font-weight: 900;
  letter-spacing: 0.06em; text-align: center;
  background: var(--grad-gold);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 20px rgba(201,168,76,0.4));
  margin-bottom: 10px;
}
.section-subtitle {
  font-family: var(--font-script);
  font-style: italic; font-size: 1.15rem; text-align: center;
  color: var(--blue-mid); margin-bottom: 60px; letter-spacing: 0.03em;
}

/* ── NAVBAR ──────────────────────────────────────────────── */
#navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  padding: 14px 0;
  background: rgba(8,8,16,0.5);
  backdrop-filter: blur(24px) saturate(1.5);
  -webkit-backdrop-filter: blur(24px) saturate(1.5);
  border-bottom: 1px solid rgba(220,184,78,0.17);
  transition: var(--transition), top .2s ease;
}

/* ── AVISO DO SITE (configurável no admin) ──────────────────
   Fica fixo acima do navbar, que desce pra abrir espaço (ver
   body.has-announcement abaixo). */
.site-announcement {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1001;
  background: linear-gradient(90deg, var(--purple-deep), var(--purple));
  color: #fff; font-family: var(--font-body); font-size: 0.82rem; font-weight: 700;
  text-align: center; padding: 10px 44px; line-height: 1.4;
  box-shadow: 0 2px 14px rgba(0,0,0,0.3);
}
.site-announcement[hidden] { display: none; }
.site-announcement .site-announcement-close {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: #fff; font-size: 1.2rem; line-height: 1;
  cursor: pointer; opacity: 0.75; padding: 4px;
}
.site-announcement .site-announcement-close:hover { opacity: 1; }
body.has-announcement { padding-top: 38px; }
body.has-announcement #navbar { top: 38px; }
@media (max-width: 580px) {
  .site-announcement { font-size: 0.76rem; padding: 8px 38px; }
  body.has-announcement { padding-top: 46px; }
  body.has-announcement #navbar { top: 46px; }
}
#navbar.scrolled {
  background: rgba(8,8,16,0.92);
  border-bottom-color: rgba(220,184,78,0.36);
  box-shadow: 0 4px 50px rgba(0,0,0,0.7);
  padding: 10px 0;
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; }

/* Logo nav */
.nav-logo { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.nav-logo-emblem {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  overflow: hidden; background: #07070e;
  border: 1.5px solid rgba(201,168,76,0.4);
  box-shadow: 0 0 20px rgba(123,24,224,0.4);
  transition: var(--transition);
}
.nav-logo-emblem img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nav-logo:hover .nav-logo-emblem { box-shadow: var(--shadow-logo); border-color: var(--gold-mid); }
.nav-logo-text {
  font-family: var(--font-title); font-size: 1rem; font-weight: 900;
  background: var(--grad-gold);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text; letter-spacing: 0.04em; line-height: 1.1;
}
.nav-logo-text small {
  display: block; font-size: 0.55rem; letter-spacing: 0.22em;
  color: var(--blue-mid); -webkit-text-fill-color: var(--blue-mid);
  font-family: var(--font-body); font-weight: 700; text-transform: uppercase;
}

/* Nav links */
/* ── MENU LATERAL (drawer) ───────────────────────────────── */
.nav-hamburger {
  display: flex; flex-direction: column; gap: 5px;
  background: none; border: none; cursor: pointer; padding: 6px;
  z-index: 1002;
}
.nav-hamburger span {
  display: block; width: 22px; height: 2px;
  background: var(--gold-mid); border-radius: 2px;
  transition: transform .3s ease, opacity .2s ease;
}
body.nav-open .nav-hamburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.nav-open .nav-hamburger span:nth-child(2) { opacity: 0; }
body.nav-open .nav-hamburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

body.nav-open { overflow: hidden; }
.nav-backdrop {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(4,4,10,0.6); backdrop-filter: blur(2px);
  opacity: 0; transition: opacity .3s ease;
}
.nav-backdrop[hidden] { display: none; }
body.nav-open .nav-backdrop { opacity: 1; }

.nav-drawer {
  position: fixed; top: 0; right: 0; z-index: 1001;
  width: min(300px, 84vw); height: 100vh; height: 100dvh;
  background: var(--bg-dark);
  border-left: 1px solid rgba(220,184,78,0.36);
  box-shadow: -20px 0 60px rgba(0,0,0,0.5);
  transform: translateX(100%); transition: transform .32s cubic-bezier(.4,0,.2,1);
  display: flex; flex-direction: column; padding: 20px 22px 28px;
  overflow-y: auto;
}
body.nav-open .nav-drawer { transform: translateX(0); }

.nav-drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 18px; margin-bottom: 12px;
  border-bottom: 1px solid rgba(220,184,78,0.24);
}
.nav-drawer-brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-title); font-size: 0.9rem; font-weight: 700;
  letter-spacing: 0.06em; color: var(--gold-light);
}
.nav-drawer-brand img {
  width: 34px; height: 34px; border-radius: 50%; object-fit: cover;
  background: #07070e; border: 1px solid rgba(220,184,78,0.42); flex-shrink: 0;
}
.nav-drawer-close {
  background: none; border: none; color: var(--gray-light);
  font-size: 1.7rem; line-height: 1; cursor: pointer; padding: 0 4px;
  transition: color .2s ease;
}
.nav-drawer-close:hover { color: var(--gold-mid); }

.nav-links { list-style: none; display: flex; flex-direction: column; gap: 2px; }
.nav-links a {
  display: block; font-family: var(--font-body); font-size: 0.9rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--gray-light); text-decoration: none;
  padding: 13px 12px; border-radius: var(--radius-sm);
  transition: color .2s ease, background .2s ease; position: relative;
}
.nav-links a::before {
  content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 0; background: var(--grad-gold); border-radius: 2px;
  transition: height .25s ease;
}
.nav-links a:hover { color: var(--gold-light); background: rgba(201,168,76,0.06); }
.nav-links a.active { color: var(--gold-light); }
.nav-links a.active::before { height: 60%; }

.nav-drawer-cta {
  margin-top: 16px; display: flex; align-items: center; justify-content: center;
  padding: 13px; border-radius: var(--radius-sm); text-decoration: none;
  font-family: var(--font-body); font-weight: 700; font-size: 0.82rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--white);
  background: linear-gradient(135deg, var(--purple), var(--purple-mid));
  box-shadow: 0 0 25px rgba(123,24,224,0.4); transition: box-shadow .2s ease;
}
.nav-drawer-cta:hover { box-shadow: 0 0 40px rgba(123,24,224,0.7); }
@media (prefers-reduced-motion: reduce) {
  .nav-drawer, .nav-backdrop, .nav-hamburger span { transition: none; }
}

/* Ferramentas da navbar: instalar app + idioma + tema */
.nav-tools { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }

/* Acesso ao painel admin - canto superior direito, cor forte (dourado) pra
   ser fácil de achar, mas sem texto chamativo (só o ícone de cadeado). */
.nav-admin { display: inline-flex; align-items: center; color: var(--gold); transition: color .2s ease, transform .2s ease; }
.nav-admin svg { width: 20px; height: 20px; }
.nav-admin:hover { color: var(--gold-bright); transform: scale(1.08); }

.nav-install {
  display: inline-flex; align-items: center; gap: 6px;
  font: 700 0.74rem var(--font-body); letter-spacing: 0.06em; text-transform: uppercase;
  padding: 7px 14px; border-radius: 100px; cursor: pointer;
  color: var(--bg-deep); background: var(--grad-gold);
  border: none; box-shadow: 0 2px 14px rgba(201,168,76,0.4);
  transition: transform .2s ease, box-shadow .2s ease; white-space: nowrap;
}
.nav-install::before {
  content: ''; width: 13px; height: 13px; flex-shrink: 0;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3v11m0 0l-4-4m4 4l4-4M5 20h14' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3v11m0 0l-4-4m4 4l4-4M5 20h14' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
.nav-install:hover { transform: translateY(-1px); box-shadow: 0 4px 22px rgba(201,168,76,0.6); }
.nav-install[hidden] { display: none; }

.nat-lang { display: flex; gap: 3px; }
.nat-lang-btn {
  width: 26px; height: 20px; padding: 0; border-radius: 3px; cursor: pointer;
  background: none; border: 1px solid transparent; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  opacity: 0.5; transition: opacity .2s ease, border-color .2s ease;
}
.nat-lang-btn svg { width: 100%; height: 100%; display: block; }
.nat-lang-btn:hover { opacity: 0.85; }
.nat-lang-btn[aria-pressed="true"] { opacity: 1; border-color: var(--gold-mid); box-shadow: 0 0 0 1px var(--gold-mid); }

/* ── HERO ────────────────────────────────────────────────── */
#hero {
  min-height: 100vh; display: flex; align-items: center;
  background: var(--grad-hero); padding-top: 80px; overflow: hidden;
}

/* Glows do hero baseados nas artes */
.hero-glow {
  position: absolute; border-radius: 50%; pointer-events: none;
  animation: breathe 7s ease-in-out infinite;
}
.hero-glow-purple {
  width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(123,24,224,0.22) 0%, transparent 65%);
  top: -150px; left: -150px;
}
.hero-glow-blue {
  width: 550px; height: 550px;
  background: radial-gradient(circle, rgba(0,166,230,0.18) 0%, transparent 65%);
  bottom: -100px; right: -80px;
  animation-delay: -3.5s;
}
.hero-glow-gold {
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(220,184,78,0.17) 0%, transparent 70%);
  top: 40%; left: 50%;
  animation-delay: -1.5s;
}
@keyframes breathe {
  0%,100% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.2); opacity: 1; }
}

.hero-content {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1.1fr 0.9fr;
  gap: 64px; align-items: center;
}

/* Texto hero */
.hero-text {}
.hero-badge {
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  background: var(--grad-gold);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero-badge-wrap {
  display: inline-flex; align-items: center; gap: 9px; max-width: 100%;
  border: 1px solid rgba(220,184,78,0.42);
  background: rgba(201,168,76,0.05);
  padding: 7px 18px; border-radius: 100px;
  margin-bottom: 28px;
}
.hero-badge-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--gold-mid); box-shadow: 0 0 10px var(--gold-mid);
  animation: blink 2s ease-in-out infinite; flex-shrink: 0;
}
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: 0.2; } }

.hero-title {
  font-family: var(--font-title);
  font-size: clamp(2.4rem, 5.5vw, 4rem);
  font-weight: 900; line-height: 1.0; letter-spacing: 0.04em;
  margin-bottom: 22px;
}
.hero-title .t1 { display: block; color: var(--white); }
.hero-title .t2 {
  display: block;
  background: var(--grad-gold);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text; filter: drop-shadow(0 0 20px rgba(201,168,76,0.5));
}
.hero-title .t3 {
  display: block; font-size: 0.34em; letter-spacing: 0.26em;
  text-transform: uppercase; font-weight: 600;
  color: var(--blue-mid); margin-top: 12px;
  font-family: var(--font-body);
}

.hero-tagline {
  font-family: var(--font-script);
  font-style: italic; font-size: 1.3rem;
  color: var(--blue-mid); margin-bottom: 14px; letter-spacing: 0.03em;
}
.hero-tagline span { color: var(--gold-light); }

.hero-desc {
  font-size: 0.95rem; color: var(--gray-light); line-height: 1.8;
  margin-bottom: 40px; max-width: 480px;
}

.hero-btns { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 52px; }

/* Botões */
.btn-primary {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 34px; border-radius: var(--radius);
  background: linear-gradient(135deg, var(--purple), var(--purple-mid));
  color: var(--white); font-family: var(--font-body);
  font-weight: 700; font-size: 0.88rem; letter-spacing: 0.1em;
  text-transform: uppercase; text-decoration: none; border: none; cursor: pointer;
  box-shadow: 0 0 30px rgba(123,24,224,0.5); transition: var(--transition);
}
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 0 55px rgba(123,24,224,0.8); }

.btn-outline {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 34px; border-radius: var(--radius);
  background: transparent; color: var(--gold-mid);
  border: 1.5px solid rgba(201,168,76,0.45);
  font-family: var(--font-body); font-weight: 700;
  font-size: 0.88rem; letter-spacing: 0.1em; text-transform: uppercase;
  text-decoration: none; cursor: pointer; transition: var(--transition);
}
.btn-outline:hover { background: rgba(220,184,78,0.17); border-color: var(--gold-mid); box-shadow: var(--shadow-gold); }

/* Stats */
.hero-stats {
  display: flex; gap: 36px; padding-top: 36px;
  border-top: 1px solid rgba(220,184,78,0.2);
}
.stat-num {
  font-family: var(--font-title); font-size: 2rem; font-weight: 900;
  background: var(--grad-gold);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text; display: block;
}
.stat-lbl { font-size: 0.7rem; color: var(--gray); letter-spacing: 0.12em; text-transform: uppercase; }

/* Logo visual hero */
.hero-visual {
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.logo-ring-outer {
  position: relative; width: 420px; height: 420px;
  display: flex; align-items: center; justify-content: center;
}

/* Anel externo dourado girando */
.logo-ring-outer::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  border: 1.5px solid transparent;
  background:
    linear-gradient(var(--bg-deep), var(--bg-deep)) padding-box,
    linear-gradient(0deg, var(--gold-deep), var(--gold-light), var(--purple-light), var(--blue-mid), var(--gold-light)) border-box;
  animation: spin 14s linear infinite;
}
/* Anel interno azul girando ao contrário */
.logo-ring-outer::after {
  content: ''; position: absolute; inset: 22px; border-radius: 50%;
  border: 1px dashed rgba(18,200,245,0.2);
  animation: spin 9s linear infinite reverse;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Medalhão central com a logo oficial */
.logo-core {
  width: 320px; height: 320px; border-radius: 50%; position: relative; z-index: 1;
  overflow: hidden;
  border: 2px solid transparent;
  background:
    linear-gradient(#07070e, #07070e) padding-box,
    linear-gradient(140deg, var(--gold-deep), var(--gold-light), var(--purple-light), var(--blue-mid), var(--gold-light)) border-box;
  box-shadow: 0 0 70px rgba(123,24,224,0.35), 0 0 140px rgba(0,166,230,0.12),
              inset 0 0 50px rgba(0,0,0,0.5);
  animation: logo-pulse 5s ease-in-out infinite;
}
.nat-logo-img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
@keyframes logo-pulse {
  0%,100% { box-shadow: 0 0 60px rgba(123,24,224,0.30), 0 0 120px rgba(0,166,230,0.10), inset 0 0 50px rgba(0,0,0,0.5); }
  50%     { box-shadow: 0 0 90px rgba(123,24,224,0.55), 0 0 170px rgba(0,166,230,0.22), inset 0 0 50px rgba(0,0,0,0.5); }
}
@media (prefers-reduced-motion: reduce) { .logo-core { animation: none; } }

/* Ícones orbitando */
.orbit-dots {
  position: absolute; inset: 0; animation: spin 20s linear infinite;
}
.orbit-dot {
  position: absolute; width: 10px; height: 10px; border-radius: 50%;
  background: var(--blue-mid); box-shadow: 0 0 12px var(--blue-mid);
}
.orbit-dot:nth-child(1) { top: 8px; left: 50%; transform: translateX(-50%); background: var(--gold-mid); box-shadow: 0 0 12px var(--gold-mid); }
.orbit-dot:nth-child(2) { bottom: 8px; left: 50%; transform: translateX(-50%); }
.orbit-dot:nth-child(3) { left: 8px; top: 50%; transform: translateY(-50%); background: var(--purple-light); box-shadow: 0 0 12px var(--purple-light); }
.orbit-dot:nth-child(4) { right: 8px; top: 50%; transform: translateY(-50%); background: var(--gold-mid); box-shadow: 0 0 12px var(--gold-mid); }

/* Ícones serviços ao redor do logo */
.service-orbits {
  position: absolute; inset: -10px;
  animation: spin 30s linear infinite reverse;
}
.svc-icon {
  position: absolute; width: 52px; height: 52px; border-radius: 50%;
  background: var(--bg-card2); border: 1.5px solid rgba(220,184,78,0.36);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; box-shadow: 0 0 20px rgba(123,24,224,0.3);
  animation: spin 30s linear infinite; /* contra-rotação para ficar reto */
}
.svc-icon:nth-child(1) { top: -26px; left: 50%; transform: translateX(-50%); }
.svc-icon:nth-child(2) { bottom: -26px; left: 50%; transform: translateX(-50%); }
.svc-icon:nth-child(3) { left: -26px; top: 50%; transform: translateY(-50%); }
.svc-icon:nth-child(4) { right: -26px; top: 50%; transform: translateY(-50%); }

/* ── SERVIÇOS ─────────────────────────────────────────────── */
#servicos { background: var(--bg-dark); }
.servicos-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
}
.servico-card {
  background: var(--grad-card); border-radius: var(--radius);
  border: 1px solid rgba(220,184,78,0.17);
  padding: 36px 26px; text-align: center;
  position: relative; overflow: hidden; transition: var(--transition);
}
.servico-card::before {
  content: ''; position: absolute; inset: 0; border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(123,24,224,0.18) 0%, rgba(0,166,230,0.08) 100%);
  opacity: 0; transition: var(--transition);
}
/* Linha superior dourada ao hover */
.servico-card::after {
  content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 0; height: 2px; background: var(--grad-gold); transition: width 0.5s ease;
  border-radius: 0 0 2px 2px;
}
.servico-card:hover { transform: translateY(-9px); border-color: rgba(201,168,76,0.35); box-shadow: var(--shadow-purple); }
.servico-card:hover::before { opacity: 1; }
.servico-card:hover::after { width: 70%; }

.servico-icon {
  width: 72px; height: 72px; border-radius: 50%; margin: 0 auto 22px;
  background: rgba(123,24,224,0.15); border: 1.5px solid rgba(220,184,78,0.3);
  display: flex; align-items: center; justify-content: center; font-size: 1.9rem;
  transition: var(--transition); position: relative; z-index: 1;
}
.servico-card:hover .servico-icon { border-color: var(--gold-mid); box-shadow: var(--shadow-gold); background: rgba(123,24,224,0.25); }
.servico-title {
  font-family: var(--font-title); font-size: 0.85rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  background: var(--grad-gold); -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; background-clip: text;
  margin-bottom: 12px; position: relative; z-index: 1;
}
.servico-desc { font-size: 0.87rem; color: var(--gray-light); line-height: 1.75; position: relative; z-index: 1; }

/* ── PORTFÓLIO ────────────────────────────────────────────── */
#portfolio { background: var(--bg-deep); }
.portfolio-filters {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-bottom: 44px;
}
.filter-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 20px; border-radius: 100px; cursor: pointer; transition: var(--transition);
  background: transparent; font-family: var(--font-body); font-weight: 700;
  font-size: 0.8rem; letter-spacing: 0.1em;
  border: 1px solid rgba(220,184,78,0.3); color: var(--gray-light);
}
.filter-btn .ic { color: var(--gold-mid); }
.filter-btn.active .ic, .filter-btn:hover .ic { color: var(--gold-light); }
.filter-btn.active, .filter-btn:hover {
  background: var(--purple); border-color: var(--purple-mid); color: var(--white);
  box-shadow: 0 0 20px rgba(123,24,224,0.4);
}
.portfolio-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.portfolio-item {
  position: relative; border-radius: var(--radius); overflow: hidden;
  aspect-ratio: 1; border: 1px solid rgba(220,184,78,0.17);
  cursor: pointer; transition: var(--transition);
}
.portfolio-item:hover { border-color: rgba(201,168,76,0.4); transform: scale(1.03); box-shadow: var(--shadow-purple); }
.portfolio-placeholder {
  width: 100%; height: 100%; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px;
  background: var(--grad-card);
}
.p-icon { font-size: 2.8rem; }
.p-label {
  font-family: var(--font-title); font-size: 0.72rem; letter-spacing: 0.18em;
  background: var(--grad-gold); -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; background-clip: text; text-transform: uppercase;
}
.portfolio-overlay {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 50%, transparent 40%, rgba(8,8,16,0.35) 100%);
  opacity: 0; transition: var(--transition);
}
.portfolio-item:hover .portfolio-overlay { opacity: 1; }
.portfolio-item::after {
  content: ''; position: absolute; right: 12px; bottom: 12px; z-index: 2;
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(8,8,16,0.62) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' fill='none' stroke='%23E8C96A' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='6.5' cy='6.5' r='4.5'/%3E%3Cpath d='M10 10l4 4'/%3E%3C/svg%3E") center/15px no-repeat;
  border: 1px solid rgba(201,168,76,0.4);
  opacity: 0; transition: opacity .3s ease;
}
.portfolio-item:hover::after { opacity: 1; }
.portfolio-overlay h4, .portfolio-overlay p {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ── SOBRE ────────────────────────────────────────────────── */
#sobre { background: var(--bg-dark); }
.sobre-grid {
  display: grid; grid-template-columns: 1fr 1.1fr; gap: 80px; align-items: center;
}
.sobre-visual { position: relative; }

/* Cartão de visita estilizado baseado na arte */
.card-visita {
  position: relative; border-radius: 20px;
  background: linear-gradient(135deg, #0C0C1E 0%, #18103A 50%, #0A1428 100%);
  border: 1px solid rgba(220,184,78,0.3);
  padding: 36px 28px; overflow: hidden;
  box-shadow: 0 20px 80px rgba(0,0,0,0.6), 0 0 60px rgba(123,24,224,0.2);
}
/* Borda dourada topo */
.card-visita::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--grad-gold-h);
}
.cv-logo-area {
  display: flex; align-items: flex-end; justify-content: center; gap: 4px;
  margin-bottom: 16px;
}
.cv-emblema { flex-shrink: 0; }
.cv-emblema img {
  width: 128px; height: 128px; border-radius: 50%; object-fit: cover;
  border: 2px solid rgba(201,168,76,0.35); background: #07070e;
  box-shadow: 0 0 40px rgba(123,24,224,0.3); display: block;
}
.cv-mascote { flex-shrink: 0; width: 74px; }
.cv-mascote img { width: 100%; height: auto; object-fit: contain; display: block;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,0.4)); }
.cv-mascote-l { margin-right: -8px; }
.cv-mascote-r { margin-left: -8px; }
@media (max-width: 400px) { .cv-mascote { width: 58px; } .cv-emblema img { width: 108px; height: 108px; } }
.cv-nat-text {
  font-family: var(--font-title); font-size: 3.2rem; font-weight: 900;
  background: var(--grad-gold); -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; background-clip: text;
  filter: drop-shadow(0 0 15px rgba(201,168,76,0.5));
}
.cv-brand-name {
  font-family: var(--font-title); font-size: 1.1rem; font-weight: 700;
  text-align: center; letter-spacing: 0.1em;
  background: var(--grad-gold); -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; background-clip: text;
  margin-bottom: 4px;
}
.cv-tech { font-family: var(--font-title); font-size: 0.7rem; letter-spacing: 0.3em; color: var(--blue-mid); text-align: center; margin-bottom: 12px; }
.cv-tagline { font-family: var(--font-script); font-style: italic; text-align: center; color: var(--blue-mid); font-size: 0.9rem; margin-bottom: 22px; }
.cv-divider { height: 1px; background: linear-gradient(90deg, transparent, var(--gold-mid), transparent); margin-bottom: 22px; }
.cv-services {
  list-style: none; display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 14px 8px; margin-bottom: 22px;
}
.cv-svc { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.cv-svc svg { width: 24px; height: 24px; color: var(--gold-light); }
.cv-svc span { font-size: 0.58rem; color: var(--gray-light); letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.3; }
.cv-contacts { display: flex; flex-direction: column; gap: 8px; }
.cv-contact-row {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-size: 0.8rem; color: var(--white-soft); text-decoration: none;
  padding: 9px 14px; border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
  transition: border-color .2s ease, background .2s ease;
}
.cv-contact-row:hover { border-color: rgba(201,168,76,0.4); background: rgba(201,168,76,0.06); }
.cv-contact-row svg { width: 17px; height: 17px; color: var(--gold-mid); flex-shrink: 0; }
.cv-contact-row.wa svg { color: #25D366; }
.cv-contact-row.ig svg { color: #E1306C; }
.cv-contact-row em { font-style: normal; color: var(--gray); font-size: 0.72rem; }
.cv-slogan {
  text-align: center; margin-top: 18px; font-family: var(--font-script);
  font-style: italic; font-size: 0.85rem; color: var(--gray);
}

/* Sobre texto */
.sobre-eyebrow {
  font-family: var(--font-title); font-size: 0.72rem; letter-spacing: 0.25em;
  color: var(--blue-mid); text-transform: uppercase; margin-bottom: 14px;
}
.sobre-heading {
  font-family: var(--font-title);
  font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 900;
  background: var(--grad-gold); -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; background-clip: text;
  margin-bottom: 24px; line-height: 1.15;
}
.sobre-p { font-size: 0.93rem; color: var(--gray-light); line-height: 1.85; margin-bottom: 18px; }
.sobre-valores {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 30px;
}
.val-item {
  display: flex; gap: 12px; padding: 14px;
  border-radius: var(--radius-sm); background: var(--grad-card);
  border: 1px solid rgba(220,184,78,0.17); transition: var(--transition);
}
.val-item:hover { border-color: rgba(220,184,78,0.42); }
.val-ico { font-size: 1.3rem; flex-shrink: 0; margin-top: 1px; }
.val-title { font-family: var(--font-title); font-size: 0.78rem; letter-spacing: 0.08em; background: var(--grad-gold); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 3px; }
.val-desc { font-size: 0.76rem; color: var(--gray); }

/* ── CONTATO ──────────────────────────────────────────────── */
#contato { background: var(--bg-deep); }
.contato-grid { display: grid; grid-template-columns: 1fr 1fr; max-width: 980px; margin: 0 auto; gap: 60px; align-items: start; }

.contato-form { background: var(--grad-card); border: 1px solid rgba(220,184,78,0.17); border-radius: var(--radius-sm); padding: 28px; }
.contato-field { margin-bottom: 16px; }
.contato-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.contato-field label { display: block; font-family: var(--font-body); font-size: 0.82rem; font-weight: 700; color: var(--white-soft); margin-bottom: 6px; }
.contato-field input, .contato-field textarea, .contato-field select {
  width: 100%; padding: 12px 14px; border-radius: 10px; box-sizing: border-box;
  background: var(--bg-card); border: 1px solid rgba(220,184,78,0.2); color: var(--white);
  font-family: var(--font-body); font-size: 0.92rem;
}
.contato-field input:focus, .contato-field textarea:focus, .contato-field select:focus { outline: none; border-color: var(--gold-mid); }
.contato-field select { cursor: pointer; }
.contato-field select option { background: var(--bg-card); color: var(--white); }
.contato-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.contato-form-status { margin-top: 14px; font-family: var(--font-body); font-size: 0.85rem; text-align: center; }
.contato-form-status.ok { color: var(--blue, #12C8F5); }
.contato-form-status.error { color: #ff6b6b; }
@media (max-width: 700px) { .contato-field-row { grid-template-columns: 1fr; } }
.contato-info-title {
  font-family: var(--font-title); font-size: 1.4rem; font-weight: 700;
  background: var(--grad-gold); -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; background-clip: text;
  margin-bottom: 10px;
}
.contato-info-sub { font-size: 0.88rem; color: var(--gray-light); margin-bottom: 28px; }
.contato-link {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px; border-radius: var(--radius-sm);
  background: var(--grad-card); border: 1px solid rgba(220,184,78,0.17);
  text-decoration: none; color: var(--white); margin-bottom: 12px;
  transition: var(--transition);
}
.contato-link:hover { border-color: rgba(201,168,76,0.35); box-shadow: 0 4px 30px rgba(123,24,224,0.2); }
.ct-icon {
  width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 1.2rem;
}
.ct-icon.wpp  { background: rgba(37,211,102,0.12); border: 1px solid rgba(37,211,102,0.2); }
.ct-icon.insta { background: rgba(180,40,200,0.12); border: 1px solid rgba(180,40,200,0.2); }
.ct-lbl { font-size: 0.72rem; color: var(--gray); margin-bottom: 2px; letter-spacing: 0.08em; }
.ct-val { font-weight: 700; font-size: 0.9rem; }
.ct-sub { font-size: 0.72rem; color: var(--gray); margin-top: 2px; }

/* mascotes nos cards de contato */
.ct-mascote-link { align-items: center; }
.ct-mascote {
  width: 58px; height: 58px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  border: 1px solid rgba(220,184,78,0.36);
}
.ct-mascote img {
  width: 100%; height: 100%;
  object-fit: contain; object-position: center;
  padding: 4px;
  box-sizing: border-box;
}
.ct-mascote.lumi { background: radial-gradient(circle at 50% 70%, rgba(180,92,255,0.35), rgba(180,92,255,0.06) 72%); }
.ct-mascote.lux  { background: radial-gradient(circle at 50% 70%, rgba(0,166,230,0.35), rgba(0,166,230,0.06) 72%); }
.ct-mascote-link:hover .ct-mascote { border-color: rgba(201,168,76,0.5); }

/* Form */
.form-card {
  background: var(--grad-card); border-radius: var(--radius);
  border: 1px solid rgba(220,184,78,0.2); padding: 40px;
  position: relative; overflow: hidden;
}
.form-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--purple), var(--blue-mid), var(--gold-mid));
}
.form-title {
  font-family: var(--font-title); font-size: 1.1rem; font-weight: 700;
  background: var(--grad-gold); -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; background-clip: text;
  margin-bottom: 28px; letter-spacing: 0.06em;
}
.fg { margin-bottom: 18px; }
.fg label {
  display: block; font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--gray); margin-bottom: 7px;
}
.fg input, .fg textarea, .fg select {
  width: 100%; padding: 11px 15px;
  background: rgba(255,255,255,0.035); border: 1px solid rgba(201,168,76,0.18);
  border-radius: var(--radius-sm); color: var(--white);
  font-family: var(--font-body); font-size: 0.9rem;
  outline: none; transition: var(--transition);
}
.fg input:focus, .fg textarea:focus, .fg select:focus {
  border-color: var(--purple-light); box-shadow: 0 0 0 3px rgba(123,24,224,0.15);
}
.fg textarea { resize: vertical; min-height: 110px; }
.fg select option { background: var(--bg-card2); }
.fg-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-status { text-align: center; font-size: 0.85rem; margin-top: 10px; min-height: 20px; }
.form-status.ok  { color: #4ade80; }
.form-status.err { color: #f87171; }

/* ── FOOTER ──────────────────────────────────────────────── */
footer {
  background: var(--bg-dark);
  border-top: 1px solid rgba(220,184,78,0.17);
  padding: 56px 0 28px;
}
.footer-inner {
  display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 52px; margin-bottom: 44px;
}
.footer-logo-area { margin-bottom: 16px; }
.footer-brand-name {
  font-family: var(--font-title); font-size: 1.3rem; font-weight: 900;
  background: var(--grad-gold); -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; background-clip: text; display: block; margin-bottom: 4px;
}
.footer-brand-tag { font-family: var(--font-script); font-style: italic; color: var(--blue-mid); font-size: 0.9rem; }
.footer-desc { font-size: 0.86rem; color: var(--gray); margin-top: 12px; max-width: 300px; line-height: 1.7; }
.footer-address { font-size: 0.8rem; color: var(--gray-light); margin-top: 8px; max-width: 300px; line-height: 1.5; }
.footer-address[hidden] { display: none; }
.footer-social { display: flex; flex-direction: column; gap: 9px; margin-top: 16px; }
/* Rodapés simples (checkout/carrinho, sem colunas de navegação) - ícones
   lado a lado, acima da linha de copyright, em vez de empilhados. */
.footer-social--inline { flex-direction: row; flex-wrap: wrap; gap: 20px; margin: 0 0 16px; justify-content: center; }
.footer-social a {
  display: inline-flex; align-items: center; gap: 9px; width: fit-content;
  font-size: 0.82rem; color: var(--gray-light); text-decoration: none;
  transition: color .2s ease;
}
.footer-social a:hover { color: var(--gold-light); }
.footer-social svg { width: 18px; height: 18px; color: var(--gold-mid); flex-shrink: 0; }
.footer-social .fs-wa svg { color: #25D366; }
.footer-col h4 {
  font-family: var(--font-title); font-size: 0.72rem; letter-spacing: 0.2em;
  background: var(--grad-gold); -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; background-clip: text;
  text-transform: uppercase; margin-bottom: 20px; font-weight: 700;
}
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 10px; }
.footer-col a { font-size: 0.87rem; color: var(--gray); text-decoration: none; transition: var(--transition); }
.footer-col a:hover { color: var(--blue-mid); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.05); padding-top: 24px;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 0.76rem; color: var(--gray); flex-wrap: wrap; gap: 8px;
}
.footer-bottom a { color: var(--gold-mid); text-decoration: none; }
.footer-admin-link { color: var(--gray) !important; font-size: 0.72rem; opacity: 0.7; transition: opacity .2s ease; }
.footer-admin-link:hover { opacity: 1; }

/* ── CHATBOT DE ATENDIMENTO (LUMI) ───────────────────────── */
.chat-widget { position: fixed; bottom: 28px; right: 28px; z-index: 999; }

.cw-fab {
  position: relative;
  width: 60px; height: 60px; border-radius: 50%; border: none; cursor: pointer;
  background: linear-gradient(135deg, var(--purple), var(--blue));
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 26px rgba(123,24,224,0.55);
  transition: transform .25s ease, box-shadow .25s ease;
  animation: cw-bounce 3.5s ease-in-out infinite;
}
.cw-fab:hover { transform: scale(1.1); box-shadow: 0 10px 40px rgba(123,24,224,0.7); animation: none; }
.cw-fab-ico { transition: transform .3s ease; }
.chat-widget.open .cw-fab { animation: none; }
.chat-widget.open .cw-fab-ico { transform: rotate(-8deg) scale(0.9); }
.cw-fab-dot {
  position: absolute; top: 4px; right: 4px; width: 12px; height: 12px;
  background: #25D366; border: 2px solid var(--bg-deep); border-radius: 50%;
}
.chat-widget.open .cw-fab-dot { display: none; }
@keyframes cw-bounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@media (prefers-reduced-motion: reduce) { .cw-fab { animation: none; } .cw-panel { animation: none; } }

.cw-panel {
  position: absolute; bottom: 74px; right: 0; width: 344px; max-width: calc(100vw - 36px);
  background: var(--bg-card2); border: 1px solid rgba(201,168,76,0.22);
  border-radius: 18px; overflow: hidden;
  display: flex; flex-direction: column; max-height: min(76vh, 560px);
  box-shadow: 0 20px 55px rgba(0,0,0,0.55);
  transform-origin: bottom right;
  animation: cw-pop .22s cubic-bezier(.2,.9,.3,1.2);
}
.cw-panel[hidden] { display: none; }
@keyframes cw-pop { from { opacity: 0; transform: scale(.85) translateY(10px); } to { opacity: 1; transform: none; } }

.cw-head {
  display: flex; align-items: center; gap: 11px; padding: 13px 14px;
  background: linear-gradient(135deg, rgba(123,24,224,0.35), rgba(0,166,230,0.2));
  border-bottom: 1px solid rgba(220,184,78,0.24); flex-shrink: 0;
}
.cw-head-av { width: 40px; height: 40px; border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle at 50% 60%, rgba(180,92,255,.4), transparent 70%); flex-shrink: 0; }
.cw-head-av img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.cw-head-txt { flex: 1; min-width: 0; line-height: 1.3; }
.cw-head-txt strong { display: block; font-family: var(--font-title); font-size: 0.95rem; color: var(--white); letter-spacing: .04em; }
.cw-head-txt span { font-size: 0.7rem; color: var(--gray-light); }
.cw-on { color: #25D366; font-style: normal; }
.cw-x {
  background: none; border: none; color: var(--gray-light); font-size: 1.4rem;
  line-height: 1; cursor: pointer; padding: 0 2px; transition: color .2s ease; align-self: flex-start;
}
.cw-x:hover { color: var(--gold-mid); }

.cw-body {
  padding: 16px 14px 6px; overflow-y: auto; flex: 1;
  display: flex; flex-direction: column; gap: 9px;
  background:
    radial-gradient(circle at 12% 0%, rgba(123,24,224,0.08), transparent 60%),
    radial-gradient(circle at 90% 100%, rgba(0,166,230,0.06), transparent 55%);
}
.cw-msg {
  max-width: 84%; padding: 9px 13px; border-radius: 14px; font-size: 0.84rem;
  line-height: 1.5; animation: cw-msg-in .25s ease;
}
@keyframes cw-msg-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.cw-msg.bot  { align-self: flex-start; background: var(--bg-card); color: var(--white-soft);
  border: 1px solid rgba(220,184,78,0.2); border-bottom-left-radius: 4px; }
.cw-msg.user { align-self: flex-end; background: linear-gradient(135deg, var(--purple), var(--purple-mid));
  color: #fff; border-bottom-right-radius: 4px; }
.cw-typing { align-self: flex-start; display: flex; gap: 4px; padding: 11px 14px;
  background: var(--bg-card); border-radius: 14px; border-bottom-left-radius: 4px; }
.cw-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--gray-light);
  animation: cw-blink 1s infinite; }
.cw-typing i:nth-child(2) { animation-delay: .2s; }
.cw-typing i:nth-child(3) { animation-delay: .4s; }
@keyframes cw-blink { 0%,60%,100% { opacity: .3; } 30% { opacity: 1; } }

.cw-opts {
  display: flex; flex-wrap: wrap; gap: 7px; padding: 10px 14px 14px;
  border-top: 1px solid rgba(255,255,255,0.05); flex-shrink: 0;
}
.cw-opts:empty { display: none; }
.cw-opt-btn {
  font: inherit; font-size: 0.8rem; cursor: pointer;
  padding: 8px 13px; border-radius: 100px;
  background: rgba(123,24,224,0.14); border: 1px solid rgba(201,168,76,0.28);
  color: var(--white); transition: background .2s ease, border-color .2s ease;
}
.cw-opt-btn:hover { background: rgba(123,24,224,0.3); border-color: var(--gold-mid); }
.cw-opt-btn.wa { background: rgba(37,211,102,0.14); border-color: rgba(37,211,102,0.4); }
.cw-opt-btn.wa:hover { background: rgba(37,211,102,0.28); }
.cw-opt-btn.back { background: transparent; border-color: rgba(255,255,255,0.14); color: var(--gray-light); }
.cw-foot { padding: 0 14px 12px; font-size: 0.66rem; color: var(--gray); text-align: center; flex-shrink: 0; }
.cw-text-form {
  display: flex; gap: 8px; padding: 10px 14px;
  border-top: 1px solid rgba(255,255,255,0.05); flex-shrink: 0;
}
.cw-text-input {
  flex: 1; min-width: 0; font: inherit; font-size: 0.84rem;
  background: var(--bg-card); border: 1px solid rgba(201,168,76,0.22); border-radius: 100px;
  padding: 9px 14px; color: var(--white);
}
.cw-text-input::placeholder { color: var(--gray); }
.cw-text-input:focus { outline: none; border-color: var(--gold-mid); }
.cw-text-send {
  font: inherit; font-size: 0.8rem; font-weight: 600; cursor: pointer;
  padding: 8px 16px; border-radius: 100px; border: none; flex-shrink: 0;
  background: var(--grad-purple); color: #fff; transition: opacity .2s ease;
}
.cw-text-send:hover { opacity: 0.85; }
.cw-text-send:disabled { opacity: 0.5; cursor: default; }
.cw-msg.bot a { color: var(--gold-light); text-decoration: underline; }
.cw-msg.bot strong { color: var(--gold-bright); }
.cw-msg.bot ul { margin: 6px 0 0; padding-left: 18px; }
.cw-msg.bot p { margin: 0 0 6px; }
.cw-msg.bot p:last-child { margin-bottom: 0; }

/* ── TOUR GUIADO ─────────────────────────────────────────────
   Canto inferior esquerdo, empilhado acima do banner de cookies (que
   também mora nesse canto) pra não sobrepor o texto/botão dele. */
.tour-toggle {
  position: fixed; left: 24px; bottom: 180px; z-index: 900;
  width: 52px; height: 52px; border-radius: 50%;
  border: 2px solid var(--gold-mid); background: var(--bg-card2); color: var(--gold-mid);
  cursor: pointer; box-shadow: 0 10px 30px rgba(0,0,0,0.4);
  display: flex; align-items: center; justify-content: center; padding: 0;
  transition: transform .15s ease, opacity .2s ease;
}
.tour-toggle:hover { transform: scale(1.06); }
.tour-toggle--hidden { opacity: 0; pointer-events: none; transform: scale(0.85); }

.tour-overlay { position: fixed; inset: 0; z-index: 2147482990; background: rgba(8,8,16,0.6); }

/* Efeito "holofote": a própria caixa de sombra do elemento em destaque
   escurece o resto da tela, sem precisar de canvas/SVG de máscara. */
.tour-highlight {
  position: relative;
  box-shadow: 0 0 0 6px var(--bg-card2), 0 0 0 9999px rgba(8,8,16,0.68);
  border-radius: 6px; transition: box-shadow .2s ease;
}

.tour-tooltip {
  position: fixed; z-index: 2147483000;
  max-width: min(320px, calc(100vw - 2rem));
  background: var(--bg-card2); border: 1px solid rgba(201,168,76,0.3);
  border-radius: var(--radius); box-shadow: 0 20px 55px rgba(0,0,0,0.55);
  padding: 18px 20px 16px;
}
.tour-tooltip__close {
  position: absolute; top: 8px; right: 10px; background: none; border: none;
  color: var(--gray-light); cursor: pointer; padding: 2px;
}
.tour-tooltip__close:hover { color: var(--gold-mid); }
.tour-tooltip__step {
  display: inline-block; font-size: 0.7rem; color: var(--gold-mid); font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; margin-bottom: 5px;
}
.tour-tooltip h4 { font-family: var(--font-title); font-size: 1.05rem; margin: 0 0 6px; color: var(--white); }
.tour-tooltip p { font-size: 0.86rem; color: var(--white-soft); line-height: 1.5; margin: 0 0 14px; }
.tour-tooltip__actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.tour-tooltip__actions .btn-outline,
.tour-tooltip__actions .btn-primary { padding: 7px 14px; font-size: 0.8rem; }
.tour-tooltip__nav { display: flex; gap: 8px; }

@media (max-width: 580px) {
  .tour-toggle { left: 16px; bottom: 170px; width: 48px; height: 48px; }
}

/* ── COOKIE ──────────────────────────────────────────────── */
#cookie {
  position: fixed; bottom: 20px; left: 20px; z-index: 9999;
  width: min(340px, calc(100vw - 104px));
  background: rgba(10,10,24,0.98); backdrop-filter: blur(14px);
  border: 1px solid rgba(220,184,78,0.28); border-radius: 14px;
  padding: 16px 18px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
  box-shadow: 0 16px 44px rgba(0,0,0,0.5);
  transform: translateY(calc(100% + 24px)); transition: transform 0.4s ease;
}
#cookie.show { transform: translateY(0); }
#cookie .cookie-btn { align-self: stretch; text-align: center; }
#cookie p { font-size: 0.83rem; color: var(--gray-light); }
#cookie a { color: var(--gold-mid); }
.cookie-btn {
  padding: 8px 24px; border: none; border-radius: var(--radius-sm);
  background: var(--purple); color: white; font-family: var(--font-body);
  font-weight: 700; font-size: 0.82rem; cursor: pointer; transition: var(--transition);
}
.cookie-btn:hover { background: var(--purple-mid); }

/* ── TOAST ───────────────────────────────────────────────── */
/* Avisos (ex.: "Modo claro ativado.") — canto superior direito, abaixo da navbar */
#toasts { position: fixed; top: 88px; right: 24px; z-index: 9997; display: flex; flex-direction: column; gap: 10px; max-width: min(320px, calc(100vw - 32px)); }
.toast-item {
  background: var(--bg-card2); border-left: 4px solid var(--purple);
  padding: 12px 20px; border-radius: var(--radius-sm); font-size: 0.87rem;
  min-width: 240px; box-shadow: 0 8px 35px rgba(0,0,0,0.5); color: var(--white);
  animation: toast-slide .3s ease;
}
.toast-item.ok  { border-color: #4ade80; }
.toast-item.err { border-color: #f87171; }
@keyframes toast-slide { from { transform: translateX(110%); opacity: 0; } }

/* ── ANIMAÇÕES SCROLL ────────────────────────────────────── */
.reveal { transition: opacity 0.75s ease, transform 0.75s ease; }
.js .reveal { opacity: 0; transform: translateY(35px); }
.reveal.in { opacity: 1; transform: translateY(0); }
.js .reveal:nth-child(1) { transition-delay: 0.07s; }
.js .reveal:nth-child(2) { transition-delay: 0.15s; }
.js .reveal:nth-child(3) { transition-delay: 0.22s; }
.js .reveal:nth-child(4) { transition-delay: 0.30s; }
.js .reveal:nth-child(5) { transition-delay: 0.37s; }
.js .reveal:nth-child(6) { transition-delay: 0.44s; }

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 1100px) {
  .servicos-grid { grid-template-columns: repeat(2, 1fr); }
  .portfolio-grid { grid-template-columns: repeat(2, 1fr); }
  .hero-content { gap: 44px; }
  .logo-ring-outer { width: 340px; height: 340px; }
  .logo-core { width: 250px; height: 250px; }
  .nat-logo-img { }
}
@media (max-width: 860px) {
  section { padding: 72px 0; }
  .hero-content { grid-template-columns: 1fr; text-align: center; gap: 52px; }
  .hero-visual { order: -1; }
  .logo-ring-outer { width: 290px; height: 290px; }
  .logo-core { width: 210px; height: 210px; }
  .nat-logo-img { }
  .hero-btns { justify-content: center; }
  .hero-stats { justify-content: center; }
  .hero-desc { margin: 0 auto 40px; }
  .nav-inner { gap: 10px; }
  .nav-logo { gap: 9px; }
  .nav-logo-text { font-size: 0.82rem; }
  .nav-logo-text small { font-size: 0.5rem; letter-spacing: 0.14em; }
  .nav-tools { gap: 8px; }
  .nav-install { font-size: 0; gap: 0; padding: 8px; }
  .nav-install::before { width: 15px; height: 15px; }
  .nat-lang-btn { width: 22px; height: 17px; }
  .theme-toggle { width: 34px; }
  .sobre-grid { grid-template-columns: 1fr; }
  .contato-grid { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .sobre-valores { grid-template-columns: 1fr; }
}
@media (max-width: 580px) {
  .servicos-grid { grid-template-columns: 1fr; }
  .portfolio-grid { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .fg-row { grid-template-columns: 1fr; }
  .logo-ring-outer { width: 260px; height: 260px; }
  .logo-core { width: 190px; height: 190px; }
  .container { padding: 0 20px; }
  .nav-logo-text { display: none; }
  #toasts { top: 74px; right: 12px; left: 12px; max-width: none; }
  .toast-item { min-width: 0; }
}

/* ============================================================
   SEÇÃO PRODUTOS / CATÁLOGO — V1.2
   ============================================================ */

#produtos { background: var(--bg-dark); }

/* ── Filtros ─────────────────────────────────────────────── */
.prod-filters {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-bottom: 48px;
}
.prod-filter-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 22px; border-radius: 100px; cursor: pointer;
  background: transparent; font-family: var(--font-body); font-weight: 700;
  font-size: 0.8rem; letter-spacing: 0.1em; transition: var(--transition);
  border: 1px solid rgba(201,168,76,0.22); color: var(--gray-light);
}
.prod-filter-btn .ic { color: var(--gold-mid); }
.prod-filter-btn.active .ic, .prod-filter-btn:hover .ic { color: var(--gold-light); }
.prod-filter-btn.active,
.prod-filter-btn:hover {
  background: linear-gradient(135deg, var(--purple), var(--purple-mid));
  border-color: var(--purple-mid); color: var(--white);
  box-shadow: 0 0 22px rgba(123,24,224,0.45);
}

/* ── Grid de produtos ────────────────────────────────────── */
.produtos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.prod-card {
  position: relative; border-radius: var(--radius);
  background: var(--bg-card2);
  border: 1px solid rgba(220,184,78,0.17);
  overflow: hidden; cursor: pointer;
  transition: var(--transition);
  display: flex; flex-direction: column;
}
.prod-card:hover {
  border-color: rgba(201,168,76,0.38);
  transform: translateY(-8px);
  box-shadow: var(--shadow-purple);
}

/* Badge novo/destaque */
.prod-badge {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  padding: 4px 12px; border-radius: 100px; font-size: 0.68rem;
  font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
}
.prod-badge.novo    { background: var(--purple); color: white; }
.prod-badge.top     { background: var(--grad-gold); color: var(--bg-deep); }
.prod-badge.kit     { background: rgba(18,200,245,0.25); color: var(--blue-mid); border: 1px solid var(--blue-mid); }

/* Imagem */
.prod-img-wrap {
  position: relative; overflow: hidden; aspect-ratio: 1;
  background: linear-gradient(135deg, #0a0820, #0c1428);
}
.prod-img-wrap img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.55s cubic-bezier(0.4,0,0.2,1);
  display: block;
}
/* Vela Cenário e Caixinhas Personalizadas: fotos em retrato (mais altas
   que largas) - cover cortaria as bordas, então mostra a foto inteira só
   nessas duas (as outras 5 são quadradas de verdade, cover já preenche
   certinho sem sobrar nem cortar nada). */
.prod-card[data-id="5"] .prod-img-wrap img,
.prod-card[data-id="6"] .prod-img-wrap img {
  object-fit: contain;
}
.prod-card:hover .prod-img-wrap img { transform: scale(1.08); }

/* Overlay zoom */
.prod-zoom-btn {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(8,8,16,0.55); opacity: 0; transition: var(--transition);
}
.prod-zoom-btn svg { width: 44px; height: 44px; color: white; filter: drop-shadow(0 0 12px white); }
.prod-card:hover .prod-zoom-btn { opacity: 1; }

/* Rodapé do card: só o botão de orçamento (o resto já está na arte) */
.prod-body {
  padding: 16px; display: flex; flex-direction: column;
  border-top: 1px solid rgba(220,184,78,0.14);
}
.prod-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 11px; border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--purple), var(--purple-mid));
  color: white; font-family: var(--font-body); font-weight: 700;
  font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase;
  border: none; cursor: pointer; transition: var(--transition);
  text-decoration: none;
}
.prod-btn:hover { box-shadow: 0 0 30px rgba(123,24,224,0.65); transform: translateY(-1px); }

/* ── LIGHTBOX ────────────────────────────────────────────── */
#lightbox {
  position: fixed; inset: 0; z-index: 99990;
  background: rgba(4,4,12,0.94); backdrop-filter: blur(16px);
  display: flex; align-items: center; justify-content: center; padding: 24px;
  opacity: 0; pointer-events: none;
  transition: opacity 0.35s ease;
}
#lightbox.open { opacity: 1; pointer-events: all; }

.lb-box {
  position: relative; max-width: 900px; width: 100%;
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  border-radius: var(--radius); overflow: hidden;
  background: var(--bg-card);
  border: 1px solid rgba(220,184,78,0.3);
  box-shadow: 0 0 80px rgba(123,24,224,0.3), 0 0 160px rgba(0,0,0,0.7);
  transform: scale(0.92); transition: transform 0.35s ease;
}
#lightbox.open .lb-box { transform: scale(1); }

.lb-img-side {
  position: relative; overflow: hidden; min-height: 380px;
  background: linear-gradient(135deg, #0a0820, #0c1428);
}
.lb-img-side img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

.lb-info {
  padding: 36px 32px; display: flex; flex-direction: column; gap: 14px;
  overflow-y: auto; max-height: 560px;
}
.lb-category {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--blue-mid);
}
.lb-name {
  font-family: var(--font-title); font-size: 1.3rem; font-weight: 900;
  background: var(--grad-gold); -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; background-clip: text; line-height: 1.2;
}
.lb-desc { font-size: 0.88rem; color: var(--gray-light); line-height: 1.75; }
.lb-divider { height: 1px; background: linear-gradient(90deg, transparent, rgba(220,184,78,0.36), transparent); }
.lb-sizes-title {
  font-family: var(--font-title); font-size: 0.72rem; letter-spacing: 0.18em;
  background: var(--grad-gold); -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; background-clip: text;
  text-transform: uppercase;
}
.lb-sizes { display: flex; gap: 10px; flex-wrap: wrap; }
.lb-size-item {
  padding: 10px 14px; border-radius: var(--radius-sm);
  background: rgba(123,24,224,0.1); border: 1px solid rgba(220,184,78,0.3);
  text-align: center;
}
.lb-size-item .ls-lbl {
  font-family: var(--font-title); font-weight: 900; font-size: 1rem;
  background: var(--grad-gold); -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; background-clip: text; display: block;
}
.lb-size-item .ls-dim { font-size: 0.72rem; color: var(--gray-light); display: block; margin-top: 3px; }
.lb-feats { display: flex; flex-wrap: wrap; gap: 8px; }
.lb-feat {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px 5px 10px; border-radius: 100px; font-size: 0.72rem; font-weight: 600;
  background: rgba(18,200,245,0.1); border: 1px solid rgba(18,200,245,0.25);
  color: var(--blue-mid);
}
.lb-feat::before {
  content: ''; width: 11px; height: 11px; flex-shrink: 0;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12l5 5L20 6' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12l5 5L20 6' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
.lb-wpp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px; border-radius: var(--radius-sm);
  background: #25D366; color: white;
  font-family: var(--font-body); font-weight: 700; font-size: 0.88rem;
  letter-spacing: 0.06em; text-decoration: none; border: none; cursor: pointer;
  transition: var(--transition); margin-top: 4px;
}
.lb-wpp-btn:hover { background: #1da855; box-shadow: 0 0 30px rgba(37,211,102,0.5); }
.lb-close {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  width: 36px; height: 36px; border-radius: 50%; border: none;
  background: rgba(8,8,16,0.7); color: var(--gray-light);
  font-size: 1.3rem; cursor: pointer; display: flex; align-items: center;
  justify-content: center; transition: var(--transition);
}
.lb-close:hover { color: var(--gold-mid); background: rgba(220,184,78,0.24); }

/* Prev/Next no lightbox */
.lb-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 3; width: 40px; height: 40px; border-radius: 50%;
  background: rgba(8,8,16,0.7); border: 1px solid rgba(220,184,78,0.3);
  color: var(--gold-mid); font-size: 1.2rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: var(--transition);
}
.lb-nav:hover { background: rgba(123,24,224,0.5); border-color: var(--purple); }
.lb-prev { left: 12px; }
.lb-next { right: 12px; }

/* ── RESPONSIVE PRODUTOS ─────────────────────────────────── */
@media (max-width: 1100px) {
  .produtos-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .lb-box { grid-template-columns: 1fr; }
  .lb-img-side { min-height: 240px; max-height: 280px; }
  .lb-info { max-height: 320px; padding: 24px 20px; }
}
@media (max-width: 580px) {
  .produtos-grid { grid-template-columns: 1fr; }
  .lb-name { font-size: 1.1rem; }
}

/* ============================================================
   PORTFÓLIO COM IMAGENS REAIS — V1.3
   ============================================================ */

/* Cards com foto real */
.portfolio-item img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.55s cubic-bezier(0.4,0,0.2,1);
  display: block;
}
.portfolio-item:hover img { transform: scale(1.07); }

/* Overlay aprimorado */
.portfolio-overlay {
  background: linear-gradient(
    to top,
    rgba(8,8,16,0.97) 0%,
    rgba(123,24,224,0.55) 60%,
    rgba(0,166,230,0.2) 100%
  );
}

/* ── LIGHTBOX PORTFÓLIO ──────────────────────────────────── */
#pf-lightbox {
  position: fixed; inset: 0; z-index: 99992;
  background: rgba(4,4,12,0.96); backdrop-filter: blur(20px);
  display: flex; align-items: center; justify-content: center; padding: 24px;
  opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
}
#pf-lightbox.open { opacity: 1; pointer-events: all; }

.pf-lb-wrap {
  position: relative; max-width: 820px; width: 100%;
  transform: scale(0.9); transition: transform 0.35s ease;
}
#pf-lightbox.open .pf-lb-wrap { transform: scale(1); }

.pf-lb-img {
  width: 100%; border-radius: var(--radius);
  border: 1px solid rgba(220,184,78,0.36);
  box-shadow: 0 0 80px rgba(123,24,224,0.4), 0 0 160px rgba(0,0,0,0.8);
  display: block;
}
.pf-lb-caption {
  text-align: center; margin-top: 20px;
}
.pf-lb-caption h3 {
  font-family: var(--font-title); font-size: 1.2rem;
  background: var(--grad-gold); -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; background-clip: text;
  margin-bottom: 4px;
}
.pf-lb-caption p { font-size: 0.88rem; color: var(--blue-mid); }

.pf-lb-close {
  position: absolute; top: -16px; right: -16px;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(123,24,224,0.8); border: 1px solid rgba(220,184,78,0.42);
  color: white; font-size: 1.2rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: var(--transition); z-index: 2;
}
.pf-lb-close:hover { background: var(--purple-mid); box-shadow: var(--shadow-purple); }

.pf-lb-nav {
  position: fixed; top: 50%; transform: translateY(-50%);
  width: 50px; height: 50px; border-radius: 50%;
  background: rgba(8,8,16,0.8); border: 1px solid rgba(220,184,78,0.36);
  color: var(--gold-mid); font-size: 1.5rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: var(--transition); z-index: 3;
}
.pf-lb-nav:hover { background: rgba(123,24,224,0.6); border-color: var(--purple); }
.pf-lb-prev { left: 20px; }
.pf-lb-next { right: 20px; }

.pf-lb-counter {
  position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 8px; z-index: 3;
}
.pf-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(220,184,78,0.42); border: 1px solid rgba(201,168,76,0.4);
  cursor: pointer; transition: var(--transition);
}
.pf-dot.active { background: var(--gold-mid); box-shadow: 0 0 8px var(--gold-mid); }

/* ── SERVIÇOS — Cards com imagem de fundo ────────────────── */
/* Cards de serviço: a arte já é o card completo — mostra a imagem limpa */
.servico-card.has-img {
  padding: 0; overflow: hidden; aspect-ratio: 1;
  position: relative; cursor: pointer; display: block;
}
.servico-card.has-img .svc-bg-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; transition: transform 0.5s ease; z-index: 0;
}
.servico-card.has-img:hover .svc-bg-img { transform: scale(1.05); }
.servico-card.has-img:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 3px; }
.servico-card.has-img .svc-overlay { /* conteúdo textual só para leitores de tela */
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* selo "ampliar" no hover (substitui a linha dourada do topo nos cards com arte) */
.servico-card.has-img::after {
  content: ''; position: absolute; right: 14px; bottom: 14px; top: auto; left: auto;
  transform: none; z-index: 2;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(8,8,16,0.6) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23E8C96A' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='7' cy='7' r='5'/%3E%3Cpath d='M11 11l4 4M7 5v4M5 7h4'/%3E%3C/svg%3E") center/16px no-repeat;
  border: 1px solid rgba(201,168,76,0.4);
  opacity: 0; transition: opacity .3s ease;
}
.servico-card.has-img:hover::after { opacity: 1; }

/* ============================================================
   MELHORIAS V1.5 — Todos os 20 itens
   ============================================================ */

/* ── 11. ::selection personalizada ──────────────────────── */
::selection { background: rgba(123,24,224,0.5); color: #F0D878; }
::-moz-selection { background: rgba(123,24,224,0.5); color: #F0D878; }

/* ── 12. scroll-margin-top (navbar fixo offset) ─────────── */
section[id], #hero, #servicos, #portfolio, #sobre, #depoimentos, #faq, #contato, #produtos {
  scroll-margin-top: 80px;
}

/* ── 8. Scroll Progress Bar ─────────────────────────────── */
#scroll-progress {
  position: fixed; top: 0; left: 0; z-index: 1001;
  height: 3px; width: 0%;
  background: linear-gradient(90deg, var(--purple), var(--blue-mid), var(--gold-mid));
  transition: width 0.1s linear;
  box-shadow: 0 0 8px rgba(18,200,245,0.6);
}

/* ── 4. Botão Voltar ao Topo ────────────────────────────── */
#back-to-top {
  position: fixed; bottom: 96px; right: 28px; z-index: 998;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--bg-card2); border: 1.5px solid rgba(220,184,78,0.42);
  color: var(--gold-mid); font-size: 1.2rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
  opacity: 0; transform: translateY(20px);
  transition: opacity 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  pointer-events: none;
}
#back-to-top.visible { opacity: 1; transform: translateY(0); pointer-events: all; }
#back-to-top:hover { background: rgba(123,24,224,0.3); border-color: var(--purple); box-shadow: var(--shadow-purple); }


/* ── 14. Skeleton Loading ───────────────────────────────── */
.skeleton {
  background: linear-gradient(90deg, var(--bg-card2) 25%, rgba(255,255,255,0.05) 50%, var(--bg-card2) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s infinite;
  border-radius: var(--radius-sm);
}
@keyframes skeleton-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

.prod-img-wrap .skeleton-img,
.portfolio-item .skeleton-img {
  position: absolute; inset: 0; z-index: 1;
}
.prod-img-wrap img.loaded + .skeleton-img,
.portfolio-item img.loaded + .skeleton-img { display: none; }

/* ── 15. Animações variadas por seção ───────────────────── */
/* Serviços: stagger com delay */
#servicos .servico-card:nth-child(1) .reveal { transition-delay: 0.05s; }
#servicos .servico-card:nth-child(2) .reveal { transition-delay: 0.12s; }
#servicos .servico-card:nth-child(3) .reveal { transition-delay: 0.19s; }
#servicos .servico-card:nth-child(4) .reveal { transition-delay: 0.26s; }
#servicos .servico-card:nth-child(5) .reveal { transition-delay: 0.33s; }
#servicos .servico-card:nth-child(6) .reveal { transition-delay: 0.40s; }

/* Portfólio: zoom-in */
.reveal-zoom { transition: opacity 0.6s ease, transform 0.6s ease; }
.js .reveal-zoom { opacity: 0; transform: scale(0.88); }
.reveal-zoom.in { opacity: 1; transform: scale(1); }

/* Sobre: slide lateral */
.reveal-left, .reveal-right { transition: opacity 0.7s ease, transform 0.7s ease; }
.js .reveal-left  { opacity: 0; transform: translateX(-40px); }
.js .reveal-right { opacity: 0; transform: translateX( 40px); }
.reveal-left.in, .reveal-right.in { opacity: 1; transform: translateX(0); }
/* no mobile o slide lateral vira vertical, para não empurrar a página */
@media (max-width: 640px) {
  .js .reveal-left, .js .reveal-right { transform: translateY(28px); }
}

/* ── 9. Cards produto hover slide-up ────────────────────── */
.prod-card-details {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: linear-gradient(to top, rgba(8,8,16,0.98) 0%, rgba(123,24,224,0.6) 100%);
  padding: 20px; transform: translateY(100%); transition: transform 0.4s cubic-bezier(0.4,0,0.2,1);
  border-radius: 0 0 var(--radius) var(--radius);
}
.prod-card:hover .prod-card-details { transform: translateY(0); }
.prod-card-details .pcd-title {
  font-family: var(--font-title); font-size: 0.88rem; font-weight: 700;
  background: var(--grad-gold); -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 6px;
}
.prod-card-details .pcd-sizes { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.pcd-size {
  font-size: 0.68rem; padding: 3px 8px; border-radius: 100px;
  background: rgba(220,184,78,0.24); border: 1px solid rgba(220,184,78,0.42);
  color: var(--gold-light);
}
.prod-card-details .pcd-cta {
  display: inline-flex; align-items: center; gap: 6px; font-size: 0.75rem;
  font-weight: 700; color: #25D366; letter-spacing: 0.08em; text-transform: uppercase;
  background: none; border: none; cursor: pointer; padding: 0; font-family: var(--font-body);
}
.prod-card-details .pcd-cta:hover { color: var(--gold-mid); }

/* ── 1. DEPOIMENTOS ─────────────────────────────────────── */
#depoimentos { background: var(--bg-dark); }

.depo-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; }

.depo-card {
  background: var(--grad-card); border-radius: var(--radius);
  border: 1px solid rgba(220,184,78,0.17); padding: 28px 24px;
  position: relative; overflow: hidden; transition: var(--transition);
}
.depo-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--grad-gold); transform: scaleX(0); transform-origin: left;
  transition: transform 0.4s ease;
}
.depo-card:hover { border-color: rgba(220,184,78,0.42); transform: translateY(-6px); box-shadow: var(--shadow-purple); }
.depo-card:hover::before { transform: scaleX(1); }

.depo-stars { display: flex; gap: 3px; margin-bottom: 14px; }
.depo-star { color: var(--gold-mid); font-size: 1rem; }

.depo-text {
  font-size: 0.9rem; color: var(--white-soft); line-height: 1.75;
  font-style: italic; margin-bottom: 20px; position: relative;
}
.depo-text::before {
  content: '"'; position: absolute; top: -10px; left: -8px;
  font-size: 3rem; color: var(--purple-mid); opacity: 0.4; font-family: Georgia,serif;
  line-height: 1;
}

.depo-author { display: flex; align-items: center; gap: 12px; }
.depo-avatar {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-title); font-weight: 900; font-size: 1rem;
  border: 2px solid rgba(220,184,78,0.42);
}
.depo-name { font-family: var(--font-title); font-size: 0.85rem; font-weight: 700; background: var(--grad-gold); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.depo-role { font-size: 0.72rem; color: var(--blue-mid); margin-top: 1px; }

/* Carrossel depoimentos mobile */
.depo-nav { display: flex; justify-content: center; gap: 8px; margin-top: 28px; }
.depo-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(220,184,78,0.36); border: 1px solid rgba(220,184,78,0.42); cursor: pointer; transition: var(--transition); }
.depo-dot.active { background: var(--gold-mid); box-shadow: 0 0 8px var(--gold-mid); }

/* ── 2. FAQ ─────────────────────────────────────────────── */
#faq { background: var(--bg-deep); }
.faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 960px; margin: 0 auto; }

.faq-item {
  border-radius: var(--radius-sm); overflow: hidden;
  border: 1px solid rgba(220,184,78,0.2); transition: var(--transition);
}
.faq-item:hover { border-color: rgba(220,184,78,0.42); }

.faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 18px 20px; background: var(--grad-card);
  border: none; cursor: pointer; text-align: left; transition: var(--transition);
}
.faq-q-text {
  font-family: var(--font-title); font-size: 0.85rem; font-weight: 700;
  letter-spacing: 0.04em; color: var(--white); line-height: 1.35;
}
.faq-icon {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  background: rgba(123,24,224,0.2); border: 1px solid rgba(220,184,78,0.3);
  display: flex; align-items: center; justify-content: center;
  color: var(--gold-mid); font-size: 1.1rem; font-weight: 300;
  transition: transform 0.35s ease, background 0.35s ease;
}
.faq-item.open .faq-icon { transform: rotate(45deg); background: var(--purple); }
.faq-item.open .faq-q { background: rgba(123,24,224,0.12); }

.faq-a {
  max-height: 0; overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.4,0,0.2,1), padding 0.3s ease;
  background: rgba(255,255,255,0.02);
}
.faq-item.open .faq-a { max-height: 300px; }
.faq-a-inner { padding: 0 20px 18px; font-size: 0.86rem; color: var(--gray-light); line-height: 1.75; }
.faq-a-inner strong { color: var(--gold-light); }

/* ── 5. CTA Final ───────────────────────────────────────── */
#cta-final {
  background: var(--grad-cta-final);
  position: relative; overflow: hidden; padding: 80px 0;
}

.cta-final-inner { position: relative; z-index: 2; text-align: center; max-width: 700px; margin: 0 auto; }

.cta-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(220,184,78,0.17); border: 1px solid rgba(220,184,78,0.42);
  padding: 6px 18px; border-radius: 100px; margin-bottom: 24px;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
  background: var(--grad-gold); -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; background-clip: text;
}
.cta-badge-wrap {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid rgba(220,184,78,0.42); background: rgba(201,168,76,0.06);
  padding: 6px 18px; border-radius: 100px; margin-bottom: 24px;
}
.cta-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold-mid); box-shadow: 0 0 10px var(--gold-mid); animation: blink 1.5s ease-in-out infinite; }

.cta-title {
  font-family: var(--font-title);
  font-size: clamp(1.8rem, 4.5vw, 3rem);
  font-weight: 900; line-height: 1.1; letter-spacing: 0.04em;
  background: var(--grad-gold); -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; background-clip: text;
  filter: drop-shadow(0 0 20px rgba(201,168,76,0.4));
  margin-bottom: 16px;
}
.cta-sub { font-size: 1rem; color: var(--white-soft); margin-bottom: 12px; line-height: 1.6; }
.cta-urgency {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-script); font-style: italic; font-size: 0.95rem;
  color: var(--blue-mid); margin-bottom: 36px;
}
.cta-urgency-dot { width: 6px; height: 6px; border-radius: 50%; background: #25D366; box-shadow: 0 0 8px #25D366; animation: blink 1s ease-in-out infinite; }

.cta-btns { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-bottom: 36px; }
.cta-btn-wpp {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 36px; border-radius: var(--radius);
  background: #25D366; color: white;
  font-family: var(--font-body); font-weight: 700; font-size: 0.95rem;
  letter-spacing: 0.08em; text-transform: uppercase;
  text-decoration: none; border: none; cursor: pointer;
  box-shadow: 0 0 30px rgba(37,211,102,0.5); transition: var(--transition);
}
.cta-btn-wpp:hover { transform: translateY(-3px); box-shadow: 0 0 55px rgba(37,211,102,0.7); background: #1da855; }

.cta-trust {
  display: flex; align-items: center; justify-content: center; gap: 24px;
  flex-wrap: wrap;
}
.cta-trust-item { display: flex; align-items: center; gap: 7px; font-size: 0.8rem; color: var(--gray-light); }
.cta-trust-item .ti-ico { font-size: 1rem; }

/* ── 6. Validação form feedback ─────────────────────────── */
.fg.has-error input,
.fg.has-error textarea,
.fg.has-error select { border-color: #f87171 !important; box-shadow: 0 0 0 3px rgba(248,113,113,0.15) !important; }
.fg.has-success input,
.fg.has-success textarea,
.fg.has-success select { border-color: #4ade80 !important; box-shadow: 0 0 0 3px rgba(74,222,128,0.1) !important; }
.fg-error-msg { font-size: 0.72rem; color: #f87171; margin-top: 5px; display: none; }
.fg.has-error .fg-error-msg { display: block; }

/* ── 10. Dark/Light mode toggle ─────────────────────────── */
.theme-toggle {
  width: 38px; height: 20px; border-radius: 100px; position: relative;
  background: rgba(123,24,224,0.3); border: 1px solid rgba(220,184,78,0.42);
  cursor: pointer; transition: var(--transition); flex-shrink: 0;
  display: flex; align-items: center; padding: 2px;
}
.theme-toggle-knob {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--gold-mid); box-shadow: 0 0 8px var(--gold-mid);
  transition: transform 0.3s ease;
}
body.light-mode .theme-toggle-knob { transform: translateX(18px); background: var(--purple); box-shadow: 0 0 8px var(--purple); }

/* ── TEMA CLARO (marfim + dourado, fiel à identidade) ───── */
body.light-mode {
  --bg-deep:    #F5F2EA;
  --bg-dark:    #EDE9DD;
  --bg-card:    #FFFFFF;
  --bg-card2:   #FBF8F1;

  --white:      #1C1B26;
  --white-soft: #38364A;
  --gray:       #6A6880;
  --gray-light: #514F63;

  /* dourado mais fechado para contraste em fundo claro */
  --gold-deep:   #5E3F0A;
  --gold:        #8A6A16;
  --gold-mid:    #8A6A16;
  --gold-light:  #A9861F;
  --gold-bright: #C79A2A;
  --gold-glow:   rgba(138,106,22,0.25);

  --blue-mid:    #0A6E96;
  --purple-light:#7A34C4;

  --grad-gold:   linear-gradient(135deg, #5E3F0A 0%, #8A6A16 45%, #A9861F 100%);
  --grad-gold-h: linear-gradient(90deg, #5E3F0A, #A9861F, #5E3F0A);
  --grad-hero:   radial-gradient(ellipse at 30% 45%, #FBEFD8 0%, #F5F2EA 45%, #E6EDF1 100%);
  --grad-card:   linear-gradient(145deg, rgba(123,24,224,0.05) 0%, rgba(0,166,230,0.04) 100%);
  --grad-cta-final: linear-gradient(135deg, #FBEFD8 0%, #F0ECDD 45%, #E6EDF1 100%);

  --shadow-purple: 0 10px 40px rgba(123,24,224,0.14);
  --shadow-blue:   0 10px 36px rgba(0,166,230,0.14);
  --shadow-gold:   0 10px 34px rgba(138,106,22,0.18);
  --shadow-logo:   0 20px 60px rgba(123,24,224,0.18);
}
body.light-mode { background: var(--bg-deep); color: var(--white); }
body.light-mode #navbar {
  background: rgba(245,242,234,0.82);
  border-bottom-color: rgba(138,106,22,0.18);
}
body.light-mode #navbar.scrolled {
  background: rgba(245,242,234,0.96);
  box-shadow: 0 4px 30px rgba(28,27,38,0.10);
}
body.light-mode .servico-card:not(.has-img),
body.light-mode .depo-card,
body.light-mode .faq-item,
body.light-mode .form-card,
body.light-mode .prod-card,
body.light-mode .val-item,
body.light-mode .cw-panel,
body.light-mode .cookie,
body.light-mode #cookie {
  background: var(--bg-card);
  border-color: rgba(138,106,22,0.16);
}
body.light-mode .faq-q { background: transparent; }
body.light-mode input,
body.light-mode select,
body.light-mode textarea {
  background: #FFFFFF;
  border-color: rgba(28,27,38,0.14);
  color: var(--white);
}
body.light-mode ::-webkit-scrollbar-track { background: var(--bg-dark); }
/* Card "cartão de visita" (seção Sobre) tinha fundo fixo (nunca acompanhava
   o tema) - as cores de texto/ícone lá dentro já usam variável e se
   adaptam sozinhas, só faltava soltar o fundo escuro fixo. */
body.light-mode .card-visita {
  background: linear-gradient(135deg, #FFFFFF 0%, #FBF8F1 50%, #F5F2EA 100%);
  border-color: rgba(138,106,22,0.28);
  box-shadow: 0 20px 60px rgba(28,27,38,0.10), 0 0 40px rgba(138,106,22,0.08);
}

/* ── RESPONSIVE MELHORIAS ───────────────────────────────── */
@media (max-width: 860px) {
  .depo-grid { grid-template-columns: 1fr; }
  .faq-grid  { grid-template-columns: 1fr; }
  .cta-btns  { flex-direction: column; align-items: center; }
  .cta-trust { gap: 16px; }
}
@media (max-width: 580px) {
  .chat-widget { bottom: 16px; right: 16px; }
  #back-to-top { bottom: 84px; right: 18px; }
  .cw-fab { width: 56px; height: 56px; }
  .cw-panel {
    position: fixed; bottom: 0; right: 0; left: 0;
    width: 100%; max-width: 100%;
    height: 88dvh; max-height: 88dvh;
    border-radius: 20px 20px 0 0;
    animation: cw-slide-up .28s cubic-bezier(.2,.9,.3,1);
  }
  @keyframes cw-slide-up { from { transform: translateY(100%); } to { transform: none; } }
  .cw-body { font-size: 0.9rem; }
  .cw-msg { max-width: 88%; font-size: 0.9rem; }
  .cw-opt-btn { font-size: 0.86rem; padding: 10px 15px; }
  .cw-head { padding: 15px 16px; }
  .cw-text-input { font-size: 0.9rem; }
}


/* ============================================================
   CSS3 — MICROINTERAÇÕES / HOVER EM TODO O SITE — V1.6
   ============================================================ */

/* Retorno visual padrão para qualquer link/botão/ícone */
a, button, .ic, svg { transition: color .25s ease, background-color .25s ease,
  border-color .25s ease, transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s ease, opacity .25s ease; }

/* Botões — brilho que atravessa + pressionar */
.btn-primary, .btn-outline, .cta-btn-wpp, .cta-btn-orc, .nav-install, .nav-drawer-cta {
  position: relative; overflow: hidden;
}
.btn-primary::after, .cta-btn-wpp::after, .nav-install::after {
  content: ''; position: absolute; top: 0; left: -75%; width: 50%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.35), transparent);
  transform: skewX(-18deg); pointer-events: none; transition: left .55s ease;
}
.btn-primary:hover::after, .cta-btn-wpp:hover::after, .nav-install:hover::after { left: 130%; }
.btn-primary:active, .btn-outline:active, .cta-btn-wpp:active,
.filter-btn:active, .prod-filter-btn:active, .nav-install:active,
.cw-opt-btn:active, .nav-drawer-cta:active { transform: translateY(1px) scale(0.98); }

/* Ícone do serviço gira levemente ao passar o mouse */
.servico-card:hover .servico-icon .ic,
.servico-card:hover .svc-icon .ic { transform: rotate(-8deg) scale(1.12); }

/* Chips de filtro */
.filter-btn:hover, .prod-filter-btn:hover { transform: translateY(-2px); }

/* Lupa do portfólio gira ao revelar */
.portfolio-item::after { transition: opacity .3s ease, transform .45s cubic-bezier(.2,.9,.3,1.2); transform: rotate(-90deg) scale(.6); }
.portfolio-item:hover::after { transform: rotate(0) scale(1); }

/* Links do rodapé — sublinhado que desliza */
.footer-col a { position: relative; }
.footer-col a::after {
  content: ''; position: absolute; left: 0; bottom: -2px; width: 0; height: 1px;
  background: var(--blue-mid); transition: width .3s ease;
}
.footer-col a:hover::after { width: 100%; }
.footer-col a:hover { transform: translateX(3px); }

/* Redes sociais / contatos — desliza e destaca o ícone */
.footer-social a:hover, .cv-contact-row:hover { transform: translateX(4px); }
.footer-social a:hover svg, .cv-contact-row:hover svg { transform: scale(1.18); }

/* Itens do menu lateral */
.nav-links a { position: relative; transition: color .25s ease, background-color .25s ease, padding-left .25s ease; }
.nav-links a:hover { padding-left: 26px; }

/* Campos do formulário — leve elevação ao focar */
.fg input:focus, .fg textarea:focus, .fg select:focus { transform: translateY(-2px); }

/* Cartão de depoimento / FAQ — transição mais suave */
.depo-card, .faq-item { transition: transform .35s cubic-bezier(.4,0,.2,1), border-color .3s ease, box-shadow .35s ease; }

/* Logo da navbar pulsa de leve ao passar o mouse */
.nav-logo:hover .nav-logo-emblem { transform: scale(1.06) rotate(3deg); }

/* Botão voltar ao topo */
#back-to-top:hover { transform: translateY(-4px) scale(1.06); }

@media (prefers-reduced-motion: reduce) {
  .btn-primary::after, .cta-btn-wpp::after, .nav-install::after { display: none; }
  .nav-links a:hover { padding-left: 20px; }
  a, button, .ic, svg,
  .footer-social a:hover, .cv-contact-row:hover, .footer-col a:hover,
  .nav-logo:hover .nav-logo-emblem, .fg input:focus, .fg textarea:focus, .fg select:focus,
  .servico-card:hover .servico-icon .ic { transform: none !important; }
}