:root {
  --bg: #05070d;
  --surface: #0b111d;
  --text: #f6f8fc;
  --muted: #a8b3c7;
  --muted-2: #76839a;
  --gold: #f5a623;
  --blue: #21b8ff;
  --line: rgba(255,255,255,.10);
  --line-strong: rgba(255,255,255,.18);
  --shadow: 0 30px 90px rgba(0,0,0,.42);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: Inter, Arial, Helvetica, sans-serif;
  background:
    radial-gradient(circle at 18% 8%, rgba(245,166,35,.10), transparent 28%),
    radial-gradient(circle at 82% 12%, rgba(33,184,255,.11), transparent 30%),
    linear-gradient(180deg, #05070d 0%, #070b13 46%, #05070d 100%);
  color: var(--text);
  min-height: 100vh;
}
a { color: inherit; text-decoration: none; }
.container { width: min(1180px, 92%); margin: 0 auto; }
.header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(5, 7, 13, .82);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--line);
}
.nav {
  height: 84px; display: flex; align-items: center;
  justify-content: space-between; gap: 28px;
}
.brand { display: flex; align-items: center; gap: 14px; min-width: max-content; }
.brand-mark {
  width: 54px; height: 38px; object-fit: cover; border-radius: 10px;
  box-shadow: 0 0 22px rgba(33,184,255,.13);
}
.brand-name { font-weight: 800; font-size: 1.14rem; letter-spacing: .2px; }
.brand-name strong { color: var(--gold); }
.menu { display: flex; align-items: center; gap: 24px; color: var(--muted); font-size: .94rem; }
.menu a { transition: .2s ease; }
.menu a:hover, .menu a.active { color: var(--text); }
.nav-cta {
  padding: 10px 16px; border: 1px solid rgba(33,184,255,.35);
  border-radius: 999px; color: var(--blue); background: rgba(33,184,255,.06);
}
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 22px; border-radius: 999px; font-weight: 800;
  letter-spacing: .1px; background: linear-gradient(90deg, var(--gold), var(--blue));
  color: #06101d; box-shadow: 0 18px 40px rgba(33,184,255,.15);
  transition: .2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn.secondary {
  background: transparent; color: var(--text); border: 1px solid var(--line-strong); box-shadow: none;
}
.hero { padding: 96px 0 72px; }
.hero-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: 58px; align-items: center; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px; color: var(--blue);
  background: rgba(33,184,255,.07); border: 1px solid rgba(33,184,255,.24);
  border-radius: 999px; padding: 8px 14px; margin-bottom: 24px; font-size: .9rem;
}
.eyebrow::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 18px rgba(245,166,35,.65);
}
h1 {
  font-size: clamp(2.7rem, 6vw, 5.25rem);
  line-height: 1.02; letter-spacing: -2.8px; margin-bottom: 24px;
}
h1 span, .section-title span {
  background: linear-gradient(90deg, var(--gold), var(--blue));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lead {
  color: var(--muted); font-size: 1.16rem; line-height: 1.78;
  max-width: 720px; margin-bottom: 32px;
}
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.trust-row {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 14px; margin-top: 34px; max-width: 760px;
}
.trust-item {
  border: 1px solid var(--line); background: rgba(255,255,255,.035);
  border-radius: 18px; padding: 16px;
}
.trust-item strong { display: block; font-size: 1.2rem; color: var(--text); }
.trust-item span { color: var(--muted-2); font-size: .9rem; }
.visual-panel {
  background:
    linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.025)),
    linear-gradient(135deg, rgba(245,166,35,.08), rgba(33,184,255,.09));
  border: 1px solid var(--line); border-radius: 34px; padding: 28px;
  box-shadow: var(--shadow); position: relative; overflow: hidden;
}
.visual-panel img { width: 100%; border-radius: 24px; display: block; opacity: .94; }
.section { padding: 82px 0; }
.section.alt {
  background: rgba(255,255,255,.025);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.section-head {
  display: flex; justify-content: space-between; gap: 32px;
  align-items: flex-end; margin-bottom: 34px;
}
.section-title {
  font-size: clamp(2rem, 4vw, 3.45rem);
  letter-spacing: -1.7px; line-height: 1.08;
}
.section-text {
  color: var(--muted); line-height: 1.78; font-size: 1.04rem; max-width: 760px;
}
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.card {
  background: linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.032));
  border: 1px solid var(--line); border-radius: 24px; padding: 26px; min-height: 190px;
}
.card small {
  color: var(--blue); font-weight: 800; letter-spacing: .8px; text-transform: uppercase;
}
.card h3 { margin: 12px 0; font-size: 1.23rem; }
.card p { color: var(--muted); line-height: 1.68; }
.page-hero { padding: 78px 0 46px; border-bottom: 1px solid var(--line); }
.page-hero h1 { max-width: 980px; }
.band {
  border: 1px solid var(--line); border-radius: 28px; padding: 34px;
  background: linear-gradient(90deg, rgba(245,166,35,.08), rgba(33,184,255,.08));
  display: flex; justify-content: space-between; gap: 26px; align-items: center;
}
.footer { padding: 42px 0; border-top: 1px solid var(--line); color: var(--muted-2); }
.footer-grid { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.footer strong { color: var(--text); }
@media (max-width: 960px) {
  .nav { height: auto; padding: 18px 0; align-items: flex-start; flex-direction: column; }
  .menu { flex-wrap: wrap; gap: 14px; }
  .hero-grid, .grid-2, .grid-3, .trust-row { grid-template-columns: 1fr; }
  .section-head, .band { align-items: flex-start; flex-direction: column; }
  .hero { padding-top: 54px; }
}

/* =========================
   MELION TECH V3 — INTERAÇÕES PREMIUM
   ========================= */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1;
  background-image: linear-gradient(rgba(33,184,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(33,184,255,.035) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(circle at 65% 22%, black, transparent 68%);
}
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 40%), rgba(33,184,255,.13), transparent 22rem);
  transition: background .2s ease;
}
.menu a {
  position: relative; padding: 10px 13px; border: 1px solid transparent;
  border-radius: 999px; transform: translateZ(0);
}
.menu a:hover, .menu a.active {
  color: var(--blue); border-color: rgba(33,184,255,.35); background: rgba(33,184,255,.075);
  box-shadow: 0 0 28px rgba(33,184,255,.12); transform: translateY(-2px) scale(1.075);
}
.menu a::after {
  content: ""; position: absolute; left: 18px; right: 18px; bottom: 5px; height: 2px;
  border-radius: 999px; background: linear-gradient(90deg, var(--gold), var(--blue));
  transform: scaleX(0); transform-origin: center; transition: transform .22s ease;
}
.menu a:hover::after, .menu a.active::after { transform: scaleX(1); }
a, button, .btn, .card, .trust-item {
  transition: transform .24s ease, border-color .24s ease, box-shadow .24s ease, background .24s ease, color .24s ease, opacity .24s ease;
}
.btn { position: relative; overflow: hidden; }
.btn::before {
  content: ""; position: absolute; top: -60%; left: -45%; width: 40%; height: 220%;
  background: rgba(255,255,255,.32); transform: rotate(25deg) translateX(-260%); transition: transform .65s ease;
}
.btn:hover::before { transform: rotate(25deg) translateX(560%); }
.btn:hover { transform: translateY(-4px) scale(1.045); box-shadow: 0 24px 60px rgba(33,184,255,.25); }
.btn.secondary:hover { border-color: rgba(33,184,255,.45); color: var(--blue); background: rgba(33,184,255,.065); }
.card:hover, .trust-item:hover {
  transform: translateY(-8px) scale(1.015); border-color: rgba(33,184,255,.32);
  box-shadow: 0 26px 70px rgba(0,0,0,.36), 0 0 34px rgba(33,184,255,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.038));
}
.card:hover h3 { color: var(--blue); }
.visual-panel { animation: floatPanel 6s ease-in-out infinite; }
.visual-panel::before {
  content: ""; position: absolute; inset: 16px; border-radius: 28px;
  border: 1px solid rgba(33,184,255,.16); pointer-events: none;
}
.visual-panel img { transition: transform .45s ease, filter .45s ease; }
.visual-panel:hover img { transform: scale(1.035); filter: saturate(1.12) contrast(1.04); }
@keyframes floatPanel { 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-12px);} }
.hero, .page-hero { position: relative; overflow: hidden; }
.hero::after, .page-hero::after {
  content: ""; position: absolute; width: 520px; height: 520px; right: -180px; top: 40px;
  border-radius: 45% 55% 60% 40%; background: linear-gradient(135deg, rgba(33,184,255,.16), rgba(245,166,35,.08), transparent);
  filter: blur(2px); opacity: .46; z-index: -1; animation: morphBlob 10s ease-in-out infinite;
}
@keyframes morphBlob { 0%,100%{ border-radius:45% 55% 60% 40%; transform:rotate(0deg) scale(1);} 50%{ border-radius:60% 40% 38% 62%; transform:rotate(8deg) scale(1.08);} }
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.card, .trust-item, .band, .visual-panel { position: relative; }
.card::after, .trust-item::after, .band::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at var(--x, 50%) var(--y, 50%), rgba(33,184,255,.17), transparent 34%);
  transition: opacity .25s ease;
}
.card:hover::after, .trust-item:hover::after, .band:hover::after { opacity: 1; }
.nav-cta:hover { color: #06101d !important; background: linear-gradient(90deg, var(--gold), var(--blue)) !important; border-color: transparent !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }


/* MEL — agente assistente fixa */
.mel-assistant{
  position:fixed;right:28px;bottom:26px;z-index:999;
  display:flex;align-items:flex-end;gap:14px;pointer-events:none;
}
.mel-bubble{
  max-width:270px;padding:14px 16px;border-radius:20px 20px 6px 20px;
  background:rgba(7,12,24,.86);border:1px solid rgba(33,184,255,.28);
  color:var(--text,#f6f8fc);box-shadow:0 20px 60px rgba(0,0,0,.38),0 0 28px rgba(33,184,255,.10);
  backdrop-filter:blur(14px);pointer-events:auto;
}
.mel-bubble strong{display:block;color:var(--gold,#f5a623);font-size:.92rem;margin-bottom:4px}
.mel-bubble span{display:block;color:var(--muted,#a8b3c7);font-size:.86rem;line-height:1.45}
.mel-avatar{
  width:132px;height:132px;border-radius:50%;object-fit:contain;cursor:pointer;pointer-events:auto;
  filter:drop-shadow(0 20px 36px rgba(0,0,0,.45)) drop-shadow(0 0 22px rgba(245,166,35,.22));
  animation:melFloat 4.8s ease-in-out infinite;transition:transform .25s ease,filter .25s ease;
}
.mel-avatar:hover{
  transform:translateY(-7px) scale(1.07);
  filter:drop-shadow(0 24px 46px rgba(0,0,0,.48)) drop-shadow(0 0 30px rgba(33,184,255,.28));
}
.mel-close{
  position:absolute;top:-10px;right:102px;width:26px;height:26px;border-radius:999px;
  border:1px solid rgba(255,255,255,.18);background:rgba(7,12,24,.9);
  color:var(--muted,#a8b3c7);cursor:pointer;pointer-events:auto;transition:.2s ease;
}
.mel-close:hover{color:var(--blue,#21b8ff);border-color:rgba(33,184,255,.42);transform:scale(1.08)}
.mel-assistant.is-minimized .mel-bubble,.mel-assistant.is-minimized .mel-close{display:none}
@keyframes melFloat{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-10px) rotate(1deg)}}
@media(max-width:760px){
  .mel-assistant{right:16px;bottom:16px}
  .mel-avatar{width:92px;height:92px}
  .mel-bubble,.mel-close{display:none}
}


/* =========================
   MEL V5 — SEM FUNDO + FLUTUANTE PREMIUM
   ========================= */
.mel-assistant{position:fixed!important;right:28px!important;bottom:24px!important;z-index:9999!important;display:flex!important;flex-direction:column!important;align-items:flex-end!important;gap:12px!important;pointer-events:none!important}.mel-stage{position:relative;width:158px;height:158px;pointer-events:auto;cursor:pointer;animation:melDrift 5.4s ease-in-out infinite}.mel-stage::before{content:"";position:absolute;inset:18px 12px 8px 12px;border-radius:50%;background:radial-gradient(circle,rgba(245,166,35,.28),rgba(33,184,255,.12),transparent 66%);filter:blur(14px);opacity:.88;animation:melPulse 3.2s ease-in-out infinite}.mel-stage::after{content:"";position:absolute;left:22px;right:22px;bottom:0;height:18px;border-radius:50%;background:rgba(0,0,0,.36);filter:blur(10px);transform:scaleX(.86);animation:melShadow 5.4s ease-in-out infinite}.mel-avatar{position:relative!important;z-index:2!important;width:150px!important;height:150px!important;border-radius:0!important;object-fit:contain!important;background:transparent!important;box-shadow:none!important;filter:drop-shadow(0 18px 30px rgba(0,0,0,.42)) drop-shadow(0 0 18px rgba(245,166,35,.32)) drop-shadow(0 0 24px rgba(33,184,255,.16))!important;transition:transform .28s ease,filter .28s ease!important;animation:none!important}.mel-stage:hover .mel-avatar{transform:translateY(-8px) scale(1.08) rotate(2deg)!important;filter:drop-shadow(0 24px 42px rgba(0,0,0,.48)) drop-shadow(0 0 28px rgba(245,166,35,.42)) drop-shadow(0 0 34px rgba(33,184,255,.28))!important}.mel-bubble{max-width:290px!important;padding:14px 16px!important;border-radius:20px 20px 6px 20px!important;background:rgba(7,12,24,.80)!important;border:1px solid rgba(33,184,255,.30)!important;backdrop-filter:blur(16px)!important;pointer-events:auto!important;transform-origin:bottom right!important;animation:melBubbleIn .55s ease both!important}.mel-actions{display:flex;gap:8px;margin-top:11px;flex-wrap:wrap}.mel-action{display:inline-flex;align-items:center;justify-content:center;padding:8px 11px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.055);color:var(--text,#f6f8fc);font-size:.78rem;font-weight:800;pointer-events:auto}.mel-action:hover{transform:translateY(-2px) scale(1.04);color:#06101d;border-color:transparent;background:linear-gradient(90deg,var(--gold,#f5a623),var(--blue,#21b8ff))}.mel-close{top:auto!important;right:142px!important;bottom:142px!important}.mel-assistant.is-minimized .mel-bubble,.mel-assistant.is-minimized .mel-close{display:none!important}@keyframes melDrift{0%,100%{transform:translate3d(0,0,0) rotate(-1deg)}50%{transform:translate3d(0,-15px,0) rotate(1.4deg)}}@keyframes melPulse{0%,100%{transform:scale(.92);opacity:.70}50%{transform:scale(1.08);opacity:.98}}@keyframes melShadow{0%,100%{opacity:.28;transform:scaleX(.92)}50%{opacity:.14;transform:scaleX(.66)}}@keyframes melBubbleIn{from{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
.hero-orbit{position:absolute;right:8%;top:26%;width:360px;height:360px;border-radius:50%;border:1px solid rgba(33,184,255,.08);pointer-events:none;animation:orbitRotate 22s linear infinite}.hero-orbit span{position:absolute;display:block;padding:9px 12px;border-radius:999px;background:rgba(7,12,24,.70);border:1px solid rgba(33,184,255,.18);color:var(--muted,#a8b3c7);font-size:.78rem;font-weight:800;backdrop-filter:blur(12px);box-shadow:0 18px 50px rgba(0,0,0,.25)}.hero-orbit span:nth-child(1){left:-10px;top:70px}.hero-orbit span:nth-child(2){right:-8px;top:142px}.hero-orbit span:nth-child(3){left:88px;bottom:18px}@keyframes orbitRotate{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}@media(max-width:760px){.mel-stage{width:104px;height:104px}.mel-avatar{width:102px!important;height:102px!important}.mel-bubble,.mel-close{display:none!important}.hero-orbit{display:none}}


/* Ajuste v5.1 — remove/desativa menu rotativo do Hero */
.hero-orbit,
.hero-orbit span {
  display: none !important;
}


/* =========================
   V6 — MAGIC NAVIGATION MENU
   ========================= */

.magic-header {
  background: rgba(5, 7, 13, .72) !important;
  backdrop-filter: blur(20px) !important;
}

.magic-nav-wrap {
  justify-content: space-between !important;
}

.magic-menu {
  position: relative;
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 58px;
  padding: 8px 12px;
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.82));
  border: 1px solid rgba(255,255,255,.55);
  box-shadow:
    0 18px 55px rgba(0,0,0,.26),
    inset 0 1px 0 rgba(255,255,255,.85);
}

.magic-menu a {
  position: relative;
  z-index: 2;
  width: 46px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  color: #617084;
  font-weight: 900;
  border: 1px solid transparent;
  transition:
    transform .25s ease,
    color .25s ease,
    background .25s ease,
    box-shadow .25s ease;
}

.magic-menu a span {
  display: grid;
  place-items: center;
  font-size: 1.05rem;
  line-height: 1;
  transition: transform .25s ease;
}

.magic-menu a::after {
  content: attr(data-label);
  position: absolute;
  top: 52px;
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 800;
  color: #07101f;
  background: linear-gradient(90deg, var(--gold,#f5a623), var(--blue,#21b8ff));
  box-shadow: 0 12px 30px rgba(33,184,255,.18);
  transition: opacity .22s ease, transform .22s ease;
}

.magic-menu a:hover::after,
.magic-menu a.active::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.magic-menu a:hover {
  color: #07101f;
  transform: translateY(-8px) scale(1.12);
}

.magic-menu a:hover span {
  transform: scale(1.12);
}

.magic-menu a.active {
  color: #07101f !important;
  transform: translateY(-12px) scale(1.08);
  background: linear-gradient(135deg, var(--gold,#f5a623), var(--blue,#21b8ff));
  border-color: rgba(255,255,255,.88);
  box-shadow:
    0 16px 32px rgba(33,184,255,.24),
    0 0 0 7px rgba(5,7,13,.96);
}

.magic-menu a.active span {
  transform: scale(1.08);
}

.magic-indicator {
  position: absolute;
  z-index: 1;
  left: var(--indicator-left, 12px);
  top: 8px;
  width: 46px;
  height: 42px;
  border-radius: 16px;
  background: rgba(33,184,255,.10);
  border: 1px solid rgba(33,184,255,.22);
  box-shadow: 0 0 26px rgba(33,184,255,.12);
  opacity: 0;
  transition: left .28s cubic-bezier(.2,.8,.2,1), opacity .2s ease;
}

.magic-menu:hover .magic-indicator {
  opacity: 1;
}

.magic-menu a:hover ~ .magic-indicator {
  opacity: 1;
}

/* Remove estilo antigo do menu apenas dentro do magic menu */
.magic-menu a::before {
  display: none !important;
}

.magic-menu a:hover,
.magic-menu a.active {
  border-color: rgba(255,255,255,.88) !important;
}

@media (max-width: 860px) {
  .magic-nav-wrap {
    align-items: center !important;
  }

  .magic-menu {
    width: 100%;
    justify-content: center;
    overflow-x: auto;
    padding: 10px;
    border-radius: 20px;
  }

  .magic-menu a {
    min-width: 44px;
  }

  .magic-menu a::after {
    display: none;
  }
}


/* =========================
   V6.1 — MENU INTEGRADO AO CABEÇALHO
   ========================= */

.magic-header {
  background:
    linear-gradient(90deg,
      rgba(5,7,13,.96) 0%,
      rgba(7,12,24,.96) 50%,
      rgba(5,7,13,.96) 100%) !important;
  border-bottom: 1px solid rgba(33,184,255,.08) !important;
  backdrop-filter: blur(18px) !important;
}

.magic-nav-wrap {
  min-height: 82px;
}

.magic-menu {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  padding: 0 !important;
  min-height: auto !important;
  gap: 10px !important;
}

.magic-menu a {
  width: 50px !important;
  height: 50px !important;
  border-radius: 15px !important;
  color: rgba(255,255,255,.55) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
}

.magic-menu a span {
  font-size: 1rem !important;
}

.magic-menu a:hover {
  color: #ffffff !important;
  background:
    linear-gradient(180deg,
      rgba(33,184,255,.12),
      rgba(33,184,255,.04)) !important;
  border-color: rgba(33,184,255,.18) !important;
  box-shadow:
    0 10px 24px rgba(33,184,255,.10),
    inset 0 1px 0 rgba(255,255,255,.06) !important;
}

.magic-menu a.active {
  color: #ffffff !important;
  background:
    linear-gradient(135deg,
      rgba(245,166,35,.18),
      rgba(33,184,255,.18)) !important;
  border-color: rgba(255,255,255,.10) !important;
  box-shadow:
    0 12px 28px rgba(33,184,255,.14),
    0 0 0 1px rgba(255,255,255,.03) inset !important;
  transform: translateY(-5px) scale(1.04) !important;
}

.magic-menu a::after {
  top: 60px !important;
  background:
    linear-gradient(90deg,
      rgba(245,166,35,.95),
      rgba(33,184,255,.95)) !important;
  color: #04101f !important;
  box-shadow: 0 10px 22px rgba(33,184,255,.16) !important;
}

.magic-indicator {
  background:
    linear-gradient(135deg,
      rgba(245,166,35,.10),
      rgba(33,184,255,.10)) !important;
  border: 1px solid rgba(33,184,255,.10) !important;
  box-shadow: none !important;
  top: 4px !important;
  height: 50px !important;
  border-radius: 15px !important;
}

.magic-menu:hover .magic-indicator {
  opacity: .95 !important;
}

/* deixa mais alinhado com identidade do header */
.brand {
  position: relative;
}

.brand::after {
  content: "";
  position: absolute;
  left: -18px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 42px;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(33,184,255,.18),
    transparent
  );
  opacity: .7;
}


/* V7 — Ecossistema Amazônico: substitui a logo por um painel com propósito */
.ecosystem-panel{min-height:470px;padding:0!important;overflow:hidden;border-radius:34px;isolation:isolate;transform-style:preserve-3d;background:radial-gradient(circle at 65% 18%,rgba(33,184,255,.20),transparent 34%),linear-gradient(145deg,rgba(4,8,16,.95),rgba(5,19,28,.92))}
.ecosystem-panel::before{content:"";position:absolute;inset:18px;border-radius:26px;border:1px solid rgba(33,184,255,.22);box-shadow:inset 0 0 38px rgba(33,184,255,.08),0 0 26px rgba(245,166,35,.08);pointer-events:none;z-index:6}
.eco-bg,.eco-orb,.eco-tree,.data-stream,.holo-card,.eco-caption{position:absolute}
.eco-bg{inset:0;z-index:1;background:linear-gradient(to bottom,rgba(1,8,16,.10),rgba(1,4,9,.94)),radial-gradient(circle at 52% 25%,rgba(33,184,255,.16),transparent 28%)}
.eco-bg::before{content:"";position:absolute;inset:0;opacity:.34;background-image:linear-gradient(rgba(33,184,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(33,184,255,.08) 1px,transparent 1px);background-size:44px 44px;transform:perspective(500px) rotateX(62deg) translateY(90px) scale(1.3);transform-origin:bottom}
.eco-moon{position:absolute;width:210px;height:210px;right:8%;top:10%;border-radius:50%;background:radial-gradient(circle,rgba(33,184,255,.16),rgba(33,184,255,.04),transparent 68%);filter:blur(2px)}
.eco-river{position:absolute;left:28%;bottom:-16%;width:42%;height:76%;border-radius:55% 45% 0 0;background:linear-gradient(90deg,transparent,rgba(33,184,255,.85),rgba(245,166,35,.34),rgba(33,184,255,.75),transparent);filter:blur(8px);opacity:.50;transform:rotate(18deg);animation:riverPulse 4.8s ease-in-out infinite}
.eco-river::after{content:"";position:absolute;inset:0;border-radius:inherit;background:repeating-linear-gradient(0deg,transparent 0 22px,rgba(255,255,255,.34) 23px,transparent 25px);animation:dataFlow 2.6s linear infinite}
.eco-forest{position:absolute;left:0;right:0;bottom:0;height:46%;background-repeat:repeat-x;background-size:180px 100%;opacity:.72}
.eco-forest-back{bottom:18%;height:36%;opacity:.34;background-image:radial-gradient(ellipse at 20% 100%,#0a2c20 0 28%,transparent 29%),radial-gradient(ellipse at 45% 100%,#123827 0 34%,transparent 35%),radial-gradient(ellipse at 70% 100%,#0b2f27 0 30%,transparent 31%)}
.eco-forest-front{background-image:radial-gradient(ellipse at 18% 100%,#041b16 0 36%,transparent 37%),radial-gradient(ellipse at 38% 100%,#08251b 0 42%,transparent 43%),radial-gradient(ellipse at 62% 100%,#061f18 0 40%,transparent 41%),radial-gradient(ellipse at 85% 100%,#09281d 0 38%,transparent 39%)}
.eco-orb{z-index:2;width:315px;height:315px;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;border:1px solid rgba(33,184,255,.30);background:radial-gradient(circle,rgba(33,184,255,.12),transparent 58%);box-shadow:0 0 70px rgba(33,184,255,.12),inset 0 0 70px rgba(33,184,255,.08);animation:orbBreath 4.2s ease-in-out infinite}
.eco-orb::before,.eco-orb::after{content:"";position:absolute;inset:-18px;border-radius:50%;border:1px dashed rgba(33,184,255,.22);animation:rotateOrb 18s linear infinite}.eco-orb::after{inset:34px;border-color:rgba(245,166,35,.22);animation-duration:12s;animation-direction:reverse}
.eco-tree{z-index:3;width:330px;height:330px;left:50%;top:50%;transform:translate(-50%,-49%);overflow:visible}
.tree-line{fill:none;stroke:url(#treeGlow);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;filter:url(#glow);stroke-dasharray:460;stroke-dashoffset:460;animation:drawTree 3.4s ease forwards,treePulse 3.2s ease-in-out infinite 3.4s}.branch,.root{stroke-width:4}.branch{animation-delay:.25s,3.4s}.root{animation-delay:.55s,3.4s}
.node{fill:#35c7ff;filter:url(#glow);opacity:0;animation:nodePop .6s ease forwards 2.2s,nodeBlink 2.4s ease-in-out infinite 3s}
.data-stream{z-index:2;height:2px;border-radius:999px;background:linear-gradient(90deg,transparent,rgba(33,184,255,.9),rgba(245,166,35,.85),transparent);opacity:.65;animation:streamMove 3.4s linear infinite}.stream-1{width:58%;left:10%;top:31%;transform:rotate(7deg)}.stream-2{width:54%;right:6%;top:57%;transform:rotate(-6deg);animation-delay:.8s}.stream-3{width:36%;left:28%;bottom:22%;transform:rotate(2deg);animation-delay:1.4s}
.holo-card{z-index:5;width:172px;min-height:88px;padding:13px 14px;border-radius:16px;border:1px solid rgba(33,184,255,.34);background:linear-gradient(180deg,rgba(5,12,24,.78),rgba(5,12,24,.42));box-shadow:0 18px 42px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.08);backdrop-filter:blur(10px);animation:holoFloat 5.2s ease-in-out infinite}
.holo-card span{color:var(--blue,#21b8ff);text-transform:uppercase;font-size:.66rem;font-weight:900;letter-spacing:.7px}.holo-card strong{display:block;color:var(--text,#f6f8fc);font-size:.92rem;margin:6px 0 4px}.holo-card small{color:var(--muted,#a8b3c7);font-size:.70rem;line-height:1.35}
.holo-card:hover{transform:translateY(-8px) scale(1.04);border-color:rgba(245,166,35,.46);box-shadow:0 22px 54px rgba(0,0,0,.36),0 0 28px rgba(33,184,255,.12)}.holo-ai{left:7%;top:17%}.holo-data{left:8%;bottom:18%;animation-delay:.7s}.holo-web{right:6%;top:30%;animation-delay:1.1s}
.eco-caption{z-index:7;left:38px;right:38px;bottom:28px;display:flex;align-items:center;gap:12px;color:rgba(246,248,252,.78);font-size:.88rem;letter-spacing:.2px}.eco-caption span{width:9px;height:9px;border-radius:999px;background:var(--gold,#f5a623);box-shadow:0 0 20px rgba(245,166,35,.8)}
@keyframes drawTree{to{stroke-dashoffset:0}}@keyframes treePulse{0%,100%{opacity:.82}50%{opacity:1}}@keyframes nodePop{to{opacity:1;transform:scale(1)}}@keyframes nodeBlink{0%,100%{opacity:.55}50%{opacity:1}}@keyframes orbBreath{0%,100%{transform:translate(-50%,-50%) scale(.96);opacity:.72}50%{transform:translate(-50%,-50%) scale(1.04);opacity:1}}@keyframes rotateOrb{from{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes streamMove{from{background-position:-260px 0}to{background-position:260px 0}}@keyframes dataFlow{from{background-position:0 0}to{background-position:0 80px}}@keyframes riverPulse{0%,100%{opacity:.36}50%{opacity:.64}}@keyframes holoFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@media(max-width:960px){.ecosystem-panel{min-height:520px}.holo-card{width:155px}.holo-web{right:4%}.eco-tree{width:300px;height:300px}}@media(max-width:620px){.ecosystem-panel{min-height:460px}.holo-card{display:none}.eco-caption{left:24px;right:24px;font-size:.78rem}}


/* =========================
   V13 — Correções finais Melion Tech
   - mapa correto como imagem isolada
   - agente Mel restaurado
   - rodapé fino
   ========================= */

.map-hero-panel {
  padding: 18px !important;
  min-height: 440px;
  border-radius: 34px;
  overflow: hidden;
  background: rgba(3, 8, 18, .78);
  border: 1px solid rgba(33,184,255,.18);
  box-shadow: 0 30px 90px rgba(0,0,0,.42), 0 0 55px rgba(33,184,255,.08);
}

.map-hero-panel::before {
  content: "";
  position: absolute;
  inset: 16px;
  border-radius: 28px;
  border: 1px solid rgba(33,184,255,.16);
  pointer-events: none;
  z-index: 4;
}

.amazon-map-image {
  width: 100%;
  height: 100%;
  min-height: 405px;
  object-fit: cover;
  border-radius: 24px;
  opacity: .98;
  display: block;
}

.map-hotspot {
  position: absolute;
  z-index: 8;
  border-radius: 50%;
  cursor: pointer;
}

.hotspot-sede {
  left: 27%;
  top: 40%;
  width: 92px;
  height: 92px;
}

.hotspot-ai {
  left: 16%;
  top: 18%;
  width: 150px;
  height: 130px;
}

.hotspot-web {
  right: 20%;
  top: 24%;
  width: 170px;
  height: 140px;
}

.hotspot-data {
  right: 30%;
  bottom: 22%;
  width: 170px;
  height: 130px;
}

.map-info-card {
  position: absolute;
  z-index: 9;
  width: 285px;
  padding: 18px 20px;
  border-radius: 20px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(14px) scale(.96);
  transition: opacity .28s ease, transform .28s ease;
  border: 1px solid rgba(33,184,255,.30);
  background: rgba(3, 10, 22, .88);
  backdrop-filter: blur(14px);
  box-shadow: 0 22px 60px rgba(0,0,0,.36), 0 0 28px rgba(33,184,255,.10);
}

.map-info-card span {
  display: block;
  color: var(--gold);
  font-size: .76rem;
  text-transform: uppercase;
  letter-spacing: .8px;
  font-weight: 900;
  margin-bottom: 8px;
}

.map-info-card strong {
  display: block;
  color: #fff;
  font-size: 1rem;
  margin-bottom: 10px;
}

.map-info-card small {
  display: block;
  color: var(--muted);
  line-height: 1.55;
  font-size: .86rem;
}

.map-card-sede {
  left: 35%;
  bottom: 25%;
  border-color: rgba(245,166,35,.40);
}

.map-card-ai {
  left: 7%;
  top: 15%;
}

.map-card-web {
  right: 5%;
  top: 14%;
}

.map-card-data {
  right: 7%;
  bottom: 3%;
}

.hotspot-sede:hover ~ .map-card-sede,
.hotspot-ai:hover ~ .map-card-ai,
.hotspot-web:hover ~ .map-card-web,
.hotspot-data:hover ~ .map-card-data {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.trust-icon {
  display: block;
  font-size: 1.9rem;
  margin-bottom: 12px;
}

.mel-stage {
  width: 150px !important;
  height: 150px !important;
}

.mel-avatar {
  width: 148px !important;
  height: 148px !important;
  object-fit: contain !important;
}

.compact-footer {
  margin-top: 40px !important;
  padding: 14px 20px !important;
  min-height: 42px;
  text-align: center;
  border-top: 1px solid rgba(255,255,255,.08);
  background: rgba(3, 7, 14, .96);
}

.compact-footer p {
  margin: 0;
  color: #8fa1b8;
  font-size: .86rem;
  line-height: 1.4;
}

@media(max-width: 960px) {
  .map-hero-panel {
    min-height: 380px;
  }

  .amazon-map-image {
    min-height: 350px;
  }

  .map-info-card {
    width: 235px;
  }
}

@media(max-width: 620px) {
  .map-info-card {
    display: none;
  }

  .mel-stage {
    width: 104px !important;
    height: 104px !important;
  }

  .mel-avatar {
    width: 102px !important;
    height: 102px !important;
  }
}


/* =========================
   V14 — Ajustes finais solicitados
   ========================= */

/* Logo: Melion dourado, Tech azul */
.brand-name em {
  color: var(--blue);
  font-style: normal;
}

/* Deixa o painel mais parecido com a referência: imagem inteira, sem corte agressivo */
.map-hero-panel {
  min-height: 440px !important;
  padding: 16px !important;
  background: rgba(3, 8, 18, .80) !important;
  border: 1px solid rgba(33,184,255,.16) !important;
}

.amazon-map-image {
  width: 100% !important;
  height: 100% !important;
  min-height: 400px !important;
  object-fit: contain !important;
  object-position: center center !important;
  background: #030914;
  border-radius: 24px !important;
  opacity: .98 !important;
}

/* A caixa da sede só aparece ao passar o mouse no ponto de Coari */
.map-card-sede {
  opacity: 0 !important;
  transform: translateY(14px) scale(.96) !important;
  pointer-events: none !important;
  left: 27% !important;
  bottom: 11% !important;
}

.hotspot-sede {
  left: 24% !important;
  top: 39% !important;
  width: 105px !important;
  height: 105px !important;
}

.hotspot-sede:hover ~ .map-card-sede {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
}

/* Ícones modernos dos cards inferiores, sem emojis */
.tech-icon {
  display: inline-flex;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  border-radius: 14px;
  background: rgba(33,184,255,.065);
  border: 1px solid rgba(33,184,255,.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 22px rgba(33,184,255,.06);
}

.tech-icon svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-ai {
  color: #35c7ff;
}

.icon-web {
  color: #b86cff;
}

.icon-data {
  color: #f5a623;
}

/* Garante que a Mel seja a abelhinha correta */
.mel-avatar {
  content: url("../assets/mel-assistente-transparente.png");
}

/* Rodapé fino */
.compact-footer,
.footer.compact-footer {
  padding: 10px 20px !important;
  min-height: 36px !important;
  margin-top: 30px !important;
}

.compact-footer p,
.footer.compact-footer p {
  font-size: .82rem !important;
  line-height: 1.35 !important;
}

@media(max-width: 960px) {
  .amazon-map-image {
    min-height: 340px !important;
  }
}

@media(max-width: 620px) {
  .amazon-map-image {
    min-height: 300px !important;
  }
}


/* =========================
   V15 — Back-end, formulário e painel
   ========================= */

.contact-backend-grid {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 34px;
  align-items: start;
}

.contact-shortcuts {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 26px;
}

.contact-form,
.admin-form {
  display: grid;
  gap: 16px;
  padding: 28px;
  border-radius: 26px;
  border: 1px solid rgba(33,184,255,.16);
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.028));
  box-shadow: 0 24px 70px rgba(0,0,0,.30);
}

.contact-form label {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: .92rem;
  font-weight: 700;
}

.contact-form input,
.contact-form textarea,
.admin-form input {
  width: 100%;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  padding: 14px 16px;
  outline: none;
  color: var(--text);
  background: rgba(3, 8, 18, .78);
  font: inherit;
  transition: border-color .22s ease, box-shadow .22s ease, background .22s ease;
}

.contact-form input:focus,
.contact-form textarea:focus,
.admin-form input:focus {
  border-color: rgba(33,184,255,.45);
  box-shadow: 0 0 0 4px rgba(33,184,255,.08);
  background: rgba(3, 8, 18, .94);
}

.form-status {
  min-height: 22px;
  color: var(--muted);
  font-size: .92rem;
}

.form-status.success {
  color: #61f0b8;
}

.form-status.error {
  color: #ff8a8a;
}

.admin-page {
  min-height: 100vh;
  padding: 110px 0 70px;
}

.admin-panel {
  max-width: 920px;
}

.admin-form {
  grid-template-columns: 1fr auto;
  margin: 30px 0;
}

.admin-result {
  display: grid;
  gap: 16px;
}

.lead-card {
  padding: 22px;
  border-radius: 20px;
  border: 1px solid rgba(33,184,255,.14);
  background: rgba(255,255,255,.04);
}

.lead-card h3 {
  margin-bottom: 10px;
  color: var(--blue);
}

.lead-card p {
  margin-bottom: 8px;
  color: var(--muted);
  line-height: 1.55;
}

.lead-card small {
  color: var(--muted-2);
}

@media (max-width: 860px) {
  .contact-backend-grid,
  .admin-form {
    grid-template-columns: 1fr;
  }
}


/* =========================
   V16 — Contato premium ajustado
   ========================= */

.contact-layout-premium {
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  gap: 34px;
  align-items: start;
}

.contact-info-card {
  position: sticky;
  top: 110px;
  padding: 30px;
  border-radius: 28px;
  border: 1px solid rgba(33,184,255,.16);
  background:
    radial-gradient(circle at 12% 0%, rgba(245,166,35,.10), transparent 34%),
    radial-gradient(circle at 100% 18%, rgba(33,184,255,.10), transparent 32%),
    linear-gradient(180deg, rgba(255,255,255,.060), rgba(255,255,255,.030));
  box-shadow: 0 26px 80px rgba(0,0,0,.34);
  overflow: hidden;
}

.contact-info-card::before {
  content: "";
  position: absolute;
  inset: 16px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.055);
  pointer-events: none;
}

.contact-kicker {
  display: inline-flex;
  margin-bottom: 14px;
  color: var(--blue);
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .8px;
  text-transform: uppercase;
}

.contact-info-card h2 {
  font-size: 2rem;
  margin-bottom: 12px;
  background: linear-gradient(90deg, var(--gold), var(--blue));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.contact-info-lead {
  color: var(--muted);
  line-height: 1.7;
  margin-bottom: 24px;
}

.contact-info-list {
  display: grid;
  gap: 14px;
}

.contact-info-item {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 13px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(3, 8, 18, .42);
  border: 1px solid rgba(255,255,255,.065);
  transition: transform .24s ease, border-color .24s ease, background .24s ease;
}

.contact-info-item:hover {
  transform: translateY(-3px);
  border-color: rgba(33,184,255,.26);
  background: rgba(33,184,255,.055);
}

.contact-info-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: var(--gold);
  background: rgba(245,166,35,.08);
  border: 1px solid rgba(245,166,35,.16);
  box-shadow: 0 0 20px rgba(245,166,35,.06);
  font-weight: 900;
}

.contact-info-item strong {
  display: block;
  margin-bottom: 4px;
  color: var(--text);
}

.contact-info-item p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
  font-size: .92rem;
}

.contact-info-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 24px;
}

.contact-form-area {
  display: grid;
  gap: 24px;
}

.contact-form-head {
  padding: 4px 0 0;
}

.contact-form-head .section-title {
  margin-top: 12px;
  margin-bottom: 14px;
  max-width: 760px;
}

.contact-form-head .section-text {
  max-width: 720px;
}

.contact-form {
  margin-top: 0;
}

@media (max-width: 960px) {
  .contact-layout-premium {
    grid-template-columns: 1fr;
  }

  .contact-info-card {
    position: relative;
    top: auto;
  }
}


/* =========================
   V19 — Magic Navigation integrada ao cabeçalho
   ========================= */

.brand-name em {
  color: var(--blue);
  font-style: normal;
}

.magic-header {
  --active-a: var(--gold);
  --active-b: var(--blue);
  background: linear-gradient(90deg, rgba(5,7,13,.97), rgba(7,12,24,.97), rgba(5,7,13,.97)) !important;
}

.magic-header.menu-home { --active-a: #f5a623; --active-b: #21b8ff; }
.magic-header.menu-about { --active-a: #6ee7b7; --active-b: #21b8ff; }
.magic-header.menu-solutions { --active-a: #f5a623; --active-b: #8ee6ff; }
.magic-header.menu-projects { --active-a: #9b7cff; --active-b: #21b8ff; }
.magic-header.menu-innovation { --active-a: #f5a623; --active-b: #b6ff7a; }
.magic-header.menu-contact { --active-a: #21b8ff; --active-b: #f5a623; }

.magic-menu-v19 {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 9px 12px !important;
  border-radius: 24px !important;
  min-height: 62px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.080), rgba(255,255,255,.035)) !important;
  border: 1px solid rgba(255,255,255,.075) !important;
  box-shadow: 0 18px 54px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.075) !important;
  backdrop-filter: blur(18px) !important;
}

.magic-menu-v19 .magic-tab {
  position: relative !important;
  z-index: 2 !important;
  width: 52px !important;
  height: 46px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 17px !important;
  color: rgba(246,248,252,.62) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  transition: transform .24s ease, color .24s ease, background .24s ease, border-color .24s ease, box-shadow .24s ease !important;
}

.magic-menu-v19 .magic-tab span {
  font-size: 1rem !important;
  line-height: 1 !important;
  transition: transform .24s ease !important;
}

.magic-menu-v19 .magic-tab:hover {
  color: #fff !important;
  transform: translateY(-4px) scale(1.08) !important;
  background: rgba(33,184,255,.070) !important;
  border-color: rgba(33,184,255,.18) !important;
  box-shadow: 0 14px 30px rgba(33,184,255,.10) !important;
}

.magic-menu-v19 .magic-tab:hover span {
  transform: scale(1.14) !important;
}

.magic-menu-v19 .magic-tab.active {
  color: #06101d !important;
  transform: translateY(-8px) scale(1.06) !important;
  border-color: rgba(255,255,255,.52) !important;
  background: linear-gradient(135deg, var(--active-a), var(--active-b)) !important;
  box-shadow: 0 15px 35px rgba(33,184,255,.22), 0 0 0 7px rgba(5,7,13,.96) !important;
}

.magic-menu-v19 .magic-tab::after {
  content: attr(data-label) !important;
  position: absolute !important;
  top: 54px !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(-4px) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  white-space: nowrap !important;
  padding: 7px 10px !important;
  border-radius: 999px !important;
  font-size: .72rem !important;
  font-weight: 900 !important;
  color: #06101d !important;
  background: linear-gradient(90deg, var(--active-a), var(--active-b)) !important;
  box-shadow: 0 12px 28px rgba(33,184,255,.16) !important;
  transition: opacity .22s ease, transform .22s ease !important;
}

.magic-menu-v19 .magic-tab:hover::after,
.magic-menu-v19 .magic-tab.active::after {
  opacity: 1 !important;
  transform: translateX(-50%) translateY(0) !important;
}

.magic-menu-v19 .magic-indicator {
  position: absolute !important;
  z-index: 1 !important;
  left: var(--indicator-left, 12px) !important;
  top: 9px !important;
  width: 52px !important;
  height: 46px !important;
  border-radius: 17px !important;
  opacity: 0 !important;
  background: linear-gradient(135deg, rgba(245,166,35,.16), rgba(33,184,255,.16)) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  transition: left .28s cubic-bezier(.2,.8,.2,1), opacity .2s ease !important;
}

.magic-menu-v19:hover .magic-indicator {
  opacity: .92 !important;
}

@media (max-width: 768px) {
  .magic-menu-v19 {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(6, minmax(42px, 1fr)) !important;
    gap: 6px !important;
    padding: 7px !important;
    border-radius: 18px !important;
  }

  .magic-menu-v19 .magic-tab {
    width: 100% !important;
    min-width: 0 !important;
    height: 42px !important;
    border-radius: 13px !important;
  }

  .magic-menu-v19 .magic-tab.active {
    transform: translateY(0) scale(1) !important;
    box-shadow: 0 10px 24px rgba(33,184,255,.12) !important;
  }

  .magic-menu-v19 .magic-tab::after,
  .magic-menu-v19 .magic-indicator {
    display: none !important;
  }
}

@media (max-width: 420px) {
  .magic-menu-v19 {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}


/* =========================
HEADER + MENU INTEGRADOS
========================= */

.magic-header{
    position: sticky !important;
    top: 0;
    z-index: 999;
    backdrop-filter: blur(18px);
    background:
        linear-gradient(
            90deg,
            rgba(3,8,18,.96),
            rgba(5,12,28,.94),
            rgba(3,8,18,.96)
        ) !important;
    border-bottom: 1px solid rgba(255,255,255,.05);
}

.magic-nav-wrap{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:24px !important;
    min-height:92px !important;
}

.magic-menu-v19{
    margin:0 !important;
    background: rgba(255,255,255,.03) !important;
    border:1px solid rgba(255,255,255,.04) !important;
    box-shadow:none !important;
    backdrop-filter:none !important;
}

.magic-menu-v19::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:24px;
    background:
      linear-gradient(
        90deg,
        rgba(255,255,255,.03),
        rgba(255,255,255,.015)
      );
    pointer-events:none;
}

.brand{
    position:relative;
    z-index:3;
}

.magic-header::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:-1px;
    height:1px;
    background:
      linear-gradient(
        90deg,
        transparent,
        rgba(33,184,255,.18),
        transparent
      );
}

@media(max-width:768px){

    .magic-nav-wrap{
        flex-direction:column !important;
        justify-content:center !important;
        padding:12px 0 !important;
        min-height:auto !important;
    }

    .magic-menu-v19{
        width:100% !important;
    }
}


/* =========================
MAPA AMAZONAS — AJUSTE FINAL
========================= */

.hero-visual,
.map-card,
.amazon-map-box,
.map-container{
    border:none !important;
    outline:none !important;
    box-shadow:none !important;
    background:transparent !important;
}

.hero-visual{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    overflow:hidden !important;
}

.hero-visual img,
.hero-visual svg,
.map-card img,
.map-container img{
    display:block !important;
    margin:auto !important;
    max-width:92% !important;
    max-height:92% !important;
    object-fit:contain !important;
}

.map-card,
.amazon-map-box{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding:0 !important;
}



/* =========================
   V22 — Ajustes finais solicitados
   ========================= */

/* 1. Remove os cards inferiores da home */
.hero .trust-row {
  display: none !important;
}

/* 2. Cabeçalho/menu transparente: só ícones e botão ativo */
.magic-menu-v19,
.magic-menu-v19::before,
.magic-menu,
.magic-menu::before {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.magic-menu-v19 .magic-tab:not(.active),
.magic-menu a:not(.active) {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.magic-menu-v19 .magic-tab:not(.active):hover,
.magic-menu a:not(.active):hover {
  background: rgba(33,184,255,.055) !important;
  border-color: rgba(33,184,255,.12) !important;
  box-shadow: 0 10px 24px rgba(33,184,255,.08) !important;
}

.magic-menu-v19 .magic-indicator,
.magic-indicator {
  display: none !important;
}

/* 3. Mapa: remove bordas internas e centraliza melhor a imagem */
.map-hero-panel,
.visual-panel.map-hero-panel {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 34px !important;
  background: rgba(3, 8, 18, .72) !important;
}

.map-hero-panel::before,
.map-hero-panel::after,
.visual-panel.map-hero-panel::before,
.visual-panel.map-hero-panel::after {
  display: none !important;
  content: none !important;
}

.map-hero-panel .amazon-map-image {
  width: 100% !important;
  height: 100% !important;
  min-height: 410px !important;
  object-fit: contain !important;
  object-position: center center !important;
  border-radius: 0 !important;
  transform: scale(.92) translateX(0) !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

.compass-cover,
.clean-compass {
  display: none !important;
}

/* 4. Chatbot da Mel */
.mel-bubble {
  display: none !important;
}

.mel-chatbot {
  width: 330px;
  max-width: calc(100vw - 32px);
  border-radius: 24px;
  overflow: hidden;
  background: rgba(5, 10, 22, .92);
  border: 1px solid rgba(33,184,255,.28);
  box-shadow:
    0 26px 80px rgba(0,0,0,.45),
    0 0 34px rgba(33,184,255,.12);
  backdrop-filter: blur(18px);
  pointer-events: auto;
  transform-origin: bottom right;
  animation: melBubbleIn .35s ease both;
}

.mel-assistant.is-minimized .mel-chatbot,
.mel-assistant.is-minimized .mel-close {
  display: none !important;
}

.mel-chatbot-head {
  padding: 16px 18px;
  background:
    linear-gradient(90deg, rgba(245,166,35,.16), rgba(33,184,255,.13));
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.mel-chatbot-head strong {
  display: block;
  color: #fff;
  font-size: .98rem;
}

.mel-chatbot-head span {
  display: block;
  color: var(--muted);
  margin-top: 3px;
  font-size: .80rem;
}

.mel-chatbot-body {
  padding: 16px;
  display: grid;
  gap: 12px;
}

.mel-msg {
  padding: 12px 14px;
  border-radius: 16px;
  line-height: 1.45;
  font-size: .88rem;
}

.mel-msg-bot {
  background: rgba(255,255,255,.06);
  color: var(--text);
  border: 1px solid rgba(255,255,255,.07);
}

.mel-chat-options {
  display: grid;
  gap: 8px;
}

.mel-chat-options a {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 38px;
  padding: 9px 12px;
  border-radius: 999px;
  background: rgba(33,184,255,.07);
  border: 1px solid rgba(33,184,255,.18);
  color: var(--text);
  font-size: .82rem;
  font-weight: 800;
}

.mel-chat-options a:hover {
  transform: translateY(-2px);
  color: #06101d;
  background: linear-gradient(90deg, var(--gold), var(--blue));
}

.mel-chatbot-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.14);
}

.mel-chatbot-form input {
  min-width: 0;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 999px;
  padding: 10px 12px;
  background: rgba(3,8,18,.82);
  color: var(--text);
  outline: none;
  font: inherit;
  font-size: .86rem;
}

.mel-chatbot-form input:focus {
  border-color: rgba(33,184,255,.45);
}

.mel-chatbot-form button {
  border: none;
  border-radius: 999px;
  padding: 10px 13px;
  background: linear-gradient(90deg, var(--gold), var(--blue));
  color: #06101d;
  font-weight: 900;
  cursor: pointer;
}

.mel-close {
  right: 310px !important;
  bottom: 322px !important;
  z-index: 3 !important;
}

@media(max-width: 760px) {
  .mel-chatbot {
    width: 300px;
  }

  .mel-close {
    right: 278px !important;
    bottom: 300px !important;
  }

  .map-hero-panel .amazon-map-image {
    min-height: 320px !important;
    transform: scale(.98) !important;
  }
}


/* =========================
V23 — MAPA FLUTUANTE LIMPO
========================= */

.map-hero-panel,
.visual-panel.map-hero-panel,
.hero-visual,
.amazon-map-box,
.map-container {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

.map-hero-panel::before,
.map-hero-panel::after,
.visual-panel.map-hero-panel::before,
.visual-panel.map-hero-panel::after,
.hero-visual::before,
.hero-visual::after {
    display: none !important;
    content: none !important;
}

.map-hero-panel {
    padding: 0 !important;
    overflow: visible !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.map-hero-panel .amazon-map-image,
.amazon-map-image {
    width: 108% !important;
    max-width: 108% !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: center center !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    transform: scale(1.08) translateY(-6px) !important;
    filter:
      drop-shadow(0 0 18px rgba(33,184,255,.10))
      drop-shadow(0 0 28px rgba(245,166,35,.08));
}

.clean-compass,
.compass-cover {
    display: none !important;
}



/* =========================
V24 — REMOVER FUNDO DO MAPA
========================= */

.amazon-map-image,
.map-hero-panel img,
.hero-visual img {
    mix-blend-mode: screen !important;
    opacity: 1 !important;
    background: transparent !important;
    filter:
      brightness(1.05)
      contrast(1.08)
      drop-shadow(0 0 18px rgba(33,184,255,.12))
      drop-shadow(0 0 24px rgba(245,166,35,.10));
}

/* mascara visual para esconder fundo escuro residual */
.map-hero-panel {
    position: relative !important;
}

.map-hero-panel::before {
    content: "" !important;
    position: absolute !important;
    inset: 8% !important;
    background:
      radial-gradient(circle at center,
      transparent 0%,
      transparent 62%,
      rgba(1,7,20,0.00) 70%,
      rgba(1,7,20,0.75) 100%);
    pointer-events: none !important;
    z-index: 2 !important;
}

.amazon-map-image {
    position: relative !important;
    z-index: 1 !important;
}



/* =========================
   V25 — Mapa final aplicado sem caixa aparente
   ========================= */

.map-hero-panel,
.visual-panel.map-hero-panel {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 0 !important;
  overflow: visible !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.map-hero-panel::before,
.map-hero-panel::after,
.visual-panel.map-hero-panel::before,
.visual-panel.map-hero-panel::after,
.compass-cover,
.clean-compass {
  display: none !important;
  content: none !important;
}

.map-hero-panel .amazon-map-image,
.amazon-map-image {
  width: 112% !important;
  max-width: 112% !important;
  height: auto !important;
  min-height: auto !important;
  object-fit: contain !important;
  object-position: center center !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  mix-blend-mode: normal !important;
  opacity: 1 !important;
  transform: translateY(-4px) scale(1.03) !important;
  filter:
    drop-shadow(0 0 22px rgba(33,184,255,.16))
    drop-shadow(0 0 28px rgba(245,166,35,.12)) !important;
}

.map-info-card {
  z-index: 10 !important;
}

@media(max-width: 960px) {
  .map-hero-panel .amazon-map-image,
  .amazon-map-image {
    width: 106% !important;
    max-width: 106% !important;
    transform: translateY(0) scale(1) !important;
  }
}

/* =========================
   V26 — Ajuste responsivo mobile final
   Mantém o site bonito no celular, sem quebrar layout
   ========================= */
html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

img, svg, video, canvas {
  max-width: 100%;
}

@media (max-width: 768px) {
  .container {
    width: min(100% - 32px, 1180px) !important;
  }

  .magic-header {
    position: sticky !important;
  }

  .magic-nav-wrap {
    gap: 14px !important;
    padding: 14px 0 12px !important;
  }

  .brand {
    width: 100%;
    justify-content: center;
    gap: 12px !important;
  }

  .brand::after {
    display: none !important;
  }

  .brand-mark {
    width: 48px !important;
    height: 36px !important;
  }

  .brand-name {
    font-size: 1.08rem !important;
  }

  .magic-menu-v19 {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 6px !important;
    padding: 6px !important;
    border-radius: 18px !important;
  }

  .magic-menu-v19 .magic-tab {
    width: 100% !important;
    min-width: 0 !important;
    height: 40px !important;
    border-radius: 13px !important;
  }

  .magic-menu-v19 .magic-tab span {
    font-size: .95rem !important;
  }

  .magic-menu-v19 .magic-tab.active {
    transform: none !important;
    box-shadow: 0 8px 20px rgba(33,184,255,.14) !important;
  }

  .magic-menu-v19 .magic-tab::after,
  .magic-menu-v19 .magic-indicator {
    display: none !important;
  }

  .hero,
  .page-hero {
    padding: 42px 0 34px !important;
  }

  .page-hero h1,
  .hero h1,
  h1 {
    font-size: clamp(2.05rem, 10.5vw, 2.95rem) !important;
    line-height: 1.07 !important;
    letter-spacing: -1.4px !important;
    margin-bottom: 18px !important;
  }

  .lead {
    font-size: 1rem !important;
    line-height: 1.65 !important;
    margin-bottom: 22px !important;
  }

  .eyebrow {
    margin-bottom: 18px !important;
    font-size: .84rem !important;
    max-width: 100%;
  }

  .section {
    padding: 46px 0 !important;
  }

  .section-title {
    font-size: clamp(1.85rem, 8.5vw, 2.45rem) !important;
    letter-spacing: -1px !important;
    line-height: 1.1 !important;
  }

  .hero-grid,
  .contact-layout-premium,
  .contact-backend-grid,
  .grid-2,
  .grid-3 {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  .contact-info-card,
  .contact-form,
  .admin-form,
  .card,
  .band {
    padding: 22px !important;
    border-radius: 22px !important;
  }

  .contact-info-card h2 {
    font-size: 1.7rem !important;
  }

  .contact-info-item {
    grid-template-columns: 38px 1fr !important;
    padding: 12px !important;
  }

  .contact-info-icon {
    width: 38px !important;
    height: 38px !important;
  }

  .contact-info-actions,
  .hero-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .btn {
    width: 100%;
    min-height: 46px;
    padding: 13px 18px !important;
    text-align: center;
  }

  .contact-form input,
  .contact-form textarea,
  .admin-form input {
    font-size: 16px !important;
  }

  .map-hero-panel {
    min-height: auto !important;
    margin-top: 8px !important;
  }

  .map-hero-panel .amazon-map-image,
  .amazon-map-image {
    width: 100% !important;
    max-width: 100% !important;
    transform: none !important;
  }

  .mel-assistant {
    right: 12px !important;
    bottom: 12px !important;
  }

  .mel-stage {
    width: 82px !important;
    height: 82px !important;
  }

  .mel-avatar {
    width: 82px !important;
    height: 82px !important;
  }

  .mel-chatbot {
    width: min(300px, calc(100vw - 24px)) !important;
  }

  .mel-close {
    right: 260px !important;
    bottom: 292px !important;
  }

  .compact-footer,
  .footer.compact-footer {
    padding: 14px 16px !important;
  }
}

@media (max-width: 380px) {
  .container {
    width: min(100% - 24px, 1180px) !important;
  }

  .magic-menu-v19 {
    gap: 4px !important;
    padding: 5px !important;
  }

  .magic-menu-v19 .magic-tab {
    height: 38px !important;
  }

  .page-hero h1,
  .hero h1,
  h1 {
    font-size: 2rem !important;
  }

  .contact-info-card,
  .contact-form,
  .admin-form,
  .card,
  .band {
    padding: 18px !important;
  }
}

/* =========================================================
   MELION TECH - CORREÇÃO FINAL MOBILE HOSTINGER
   Corrige título escuro, menu, largura e assistente no celular
   ========================================================= */
@media (max-width: 768px) {
  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  body {
    min-width: 0 !important;
  }

  .container,
  .nav,
  .magic-nav-wrap,
  .hero-grid,
  main,
  section {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .container {
    width: calc(100% - 28px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .magic-nav-wrap {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 14px !important;
  }

  .brand {
    width: 100% !important;
    justify-content: center !important;
  }

  .magic-menu,
  .magic-menu-v19 {
    width: 100% !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 6px !important;
    padding: 6px !important;
    overflow: hidden !important;
  }

  .magic-menu a,
  .magic-menu-v19 .magic-tab {
    width: 100% !important;
    min-width: 0 !important;
    height: 38px !important;
    padding: 0 !important;
  }

  .hero {
    padding: 42px 0 26px !important;
  }

  .hero-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  .hero h1,
  .hero h1 span,
  .page-hero h1,
  .page-hero h1 span {
    background: none !important;
    background-image: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: #f4f8ff !important;
    color: #f4f8ff !important;
    opacity: 1 !important;
    filter: none !important;
    text-shadow: 0 8px 30px rgba(0,0,0,.34) !important;
  }

  .hero h1,
  .page-hero h1 {
    font-size: clamp(2.05rem, 10vw, 2.75rem) !important;
    line-height: 1.08 !important;
    letter-spacing: -1.2px !important;
    margin-bottom: 18px !important;
  }

  .lead {
    width: 100% !important;
    max-width: 100% !important;
    font-size: 1rem !important;
    line-height: 1.62 !important;
  }

  .hero-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .btn {
    width: 100% !important;
    max-width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
  }

  .visual-panel,
  .map-hero-panel {
    width: 100% !important;
    max-width: 100% !important;
    min-height: auto !important;
    overflow: hidden !important;
  }

  .amazon-map-image {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    transform: none !important;
  }

  .mel-assistant {
    right: 8px !important;
    bottom: 8px !important;
    transform: scale(.72) !important;
    transform-origin: bottom right !important;
  }
}

@media (max-width: 390px) {
  .container {
    width: calc(100% - 22px) !important;
  }

  .hero h1,
  .page-hero h1 {
    font-size: 2rem !important;
  }

  .brand-mark {
    width: 44px !important;
    height: 32px !important;
  }

  .brand-name {
    font-size: 1rem !important;
  }
}

/* =========================================================
   V31 — CORREÇÃO DEFINITIVA: TÍTULO HOME + RESPONSIVO
   - Evita texto escuro/invisível no desktop e no mobile.
   - Mantém visual colorido no PC sem depender de texto transparente.
   - No celular, deixa o destaque branco para máxima legibilidade.
   ========================================================= */
.hero h1 .title-gradient-safe {
  display: block !important;
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  color: inherit !important;
  -webkit-text-fill-color: initial !important;
  opacity: 1 !important;
  filter: none !important;
}

.hero h1 .title-gold,
.hero h1 .title-blue {
  display: block !important;
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  opacity: 1 !important;
  filter: none !important;
  text-shadow: 0 10px 30px rgba(0,0,0,.25) !important;
}

.hero h1 .title-gold {
  color: #f5b833 !important;
  -webkit-text-fill-color: #f5b833 !important;
}

.hero h1 .title-blue {
  color: #28c1ff !important;
  -webkit-text-fill-color: #28c1ff !important;
}

@media (min-width: 769px) {
  .hero h1 {
    color: #f6f8fc !important;
    -webkit-text-fill-color: #f6f8fc !important;
  }

  .hero h1 .title-gradient-safe,
  .hero h1 .title-gold,
  .hero h1 .title-blue {
    line-height: 1.02 !important;
  }
}

@media (max-width: 768px) {
  .hero h1,
  .page-hero h1 {
    font-size: clamp(2.08rem, 10vw, 2.65rem) !important;
    line-height: 1.08 !important;
    letter-spacing: -1.15px !important;
    color: #f6f8fc !important;
    -webkit-text-fill-color: #f6f8fc !important;
  }

  .hero h1 span,
  .hero h1 .title-gradient-safe,
  .hero h1 .title-gold,
  .hero h1 .title-blue,
  .page-hero h1 span {
    background: none !important;
    background-image: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    color: #f6f8fc !important;
    -webkit-text-fill-color: #f6f8fc !important;
    opacity: 1 !important;
    filter: none !important;
    text-shadow: 0 8px 28px rgba(0,0,0,.34) !important;
  }

  .hero h1 .title-gradient-safe,
  .hero h1 .title-gold,
  .hero h1 .title-blue {
    display: inline !important;
  }

  .hero-grid {
    grid-template-columns: 1fr !important;
  }

  .map-hero-panel,
  .visual-panel.map-hero-panel {
    min-height: 260px !important;
  }

  .map-hero-panel .amazon-map-image,
  .amazon-map-image {
    min-height: 230px !important;
    height: auto !important;
    object-fit: contain !important;
  }
}


/* =========================
   V34 — CORREÇÃO FINAL PÁGINAS INTERNAS
   Mantém a home correta e aplica o mesmo tratamento visual nas demais páginas.
   ========================= */

@media (min-width: 769px) {
  .hero h1 .title-gradient-safe,
  .page-hero h1 .title-gradient-safe {
    display: inline !important;
    background: none !important;
    color: inherit !important;
    -webkit-text-fill-color: inherit !important;
  }

  .hero h1 .title-gold,
  .page-hero h1 .title-gold {
    display: inline !important;
    background: linear-gradient(90deg, var(--gold), #e8d98c) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
  }

  .hero h1 .title-blue,
  .page-hero h1 .title-blue {
    display: inline !important;
    background: linear-gradient(90deg, #a9e8ff, var(--blue)) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
  }
}

@media (max-width: 768px) {
  .hero h1,
  .page-hero h1 {
    font-size: 2.35rem !important;
    line-height: 1.08 !important;
    letter-spacing: -1.1px !important;
  }

  .hero h1 span,
  .page-hero h1 span,
  .hero h1 .title-gradient-safe,
  .page-hero h1 .title-gradient-safe,
  .hero h1 .title-gold,
  .hero h1 .title-blue,
  .page-hero h1 .title-gold,
  .page-hero h1 .title-blue {
    display: inline !important;
    background: none !important;
    background-image: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    color: #f6f8fc !important;
    -webkit-text-fill-color: #f6f8fc !important;
  }
}

/* Corrige títulos que estavam ficando transparentes em cards das páginas internas */
.contact-info-card h2,
.contact-form-head .section-title,
.section-title,
.card h3 {
  -webkit-text-fill-color: currentColor;
}

.contact-info-card h2 {
  background: none !important;
  color: #f6f8fc !important;
  -webkit-text-fill-color: #f6f8fc !important;
}

/* Garante o telefone final em qualquer texto visível atualizado pelo HTML */


/* =========================================================
   V35 — PADRONIZAÇÃO VISUAL DOS TÍTULOS PRINCIPAIS
   Aplica em Home, Sobre, Soluções, Projetos, Inovação e Contato
   o mesmo padrão: texto branco + destaque dourado + destaque azul.
   ========================================================= */
.hero h1,
.page-hero h1 {
  color: #f6f8fc !important;
  -webkit-text-fill-color: #f6f8fc !important;
  font-weight: 900 !important;
  letter-spacing: -2.8px !important;
  line-height: 1.02 !important;
  text-shadow: 0 10px 32px rgba(0,0,0,.26) !important;
}

.hero h1 .title-gradient-safe,
.page-hero h1 .title-gradient-safe {
  display: block !important;
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  color: inherit !important;
  -webkit-text-fill-color: initial !important;
  opacity: 1 !important;
  filter: none !important;
}

.hero h1 .title-gold,
.page-hero h1 .title-gold,
.hero h1 .title-blue,
.page-hero h1 .title-blue {
  display: block !important;
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  opacity: 1 !important;
  filter: none !important;
  text-shadow: 0 10px 30px rgba(0,0,0,.25) !important;
}

.hero h1 .title-gold,
.page-hero h1 .title-gold {
  color: #f5b833 !important;
  -webkit-text-fill-color: #f5b833 !important;
}

.hero h1 .title-blue,
.page-hero h1 .title-blue {
  color: #28c1ff !important;
  -webkit-text-fill-color: #28c1ff !important;
}

@media (max-width: 768px) {
  .hero h1,
  .page-hero h1 {
    font-size: clamp(2.15rem, 10vw, 2.75rem) !important;
    line-height: 1.08 !important;
    letter-spacing: -1.15px !important;
  }

  .hero h1 .title-gradient-safe,
  .page-hero h1 .title-gradient-safe,
  .hero h1 .title-gold,
  .page-hero h1 .title-gold,
  .hero h1 .title-blue,
  .page-hero h1 .title-blue {
    display: block !important;
  }
}


/* =========================================================
   V36 — PADRÃO FINAL DE TÍTULOS + AGENTE MEL
   - Todos os títulos principais seguem o visual da Home.
   - Evita quebra isolada do ponto final.
   - Corrige carregamento/visual da imagem da agente Mel.
   ========================================================= */

.hero h1,
.page-hero h1 {
  color: #f6f8fc !important;
  -webkit-text-fill-color: #f6f8fc !important;
  font-weight: 900 !important;
  letter-spacing: -2.8px !important;
  line-height: 1.02 !important;
  text-shadow: 0 10px 32px rgba(0,0,0,.28) !important;
}

.hero h1 .title-gradient-safe,
.page-hero h1 .title-gradient-safe {
  display: block !important;
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
  opacity: 1 !important;
  filter: none !important;
}

.hero h1 .title-gold,
.page-hero h1 .title-gold,
.hero h1 .title-blue,
.page-hero h1 .title-blue {
  display: block !important;
  white-space: nowrap !important;
  opacity: 1 !important;
  filter: none !important;
  text-shadow: 0 10px 30px rgba(0,0,0,.25) !important;
}

.hero h1 .title-gold,
.page-hero h1 .title-gold {
  background: linear-gradient(90deg, #f5a623 0%, #ffd46b 48%, #d9cf90 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: #f5b833 !important;
  -webkit-text-fill-color: transparent !important;
}

.hero h1 .title-blue,
.page-hero h1 .title-blue {
  background: linear-gradient(90deg, #a8f0ff 0%, #28c1ff 45%, #1ea8ff 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: #28c1ff !important;
  -webkit-text-fill-color: transparent !important;
}

@media (max-width: 768px) {
  .hero h1,
  .page-hero h1 {
    font-size: clamp(2.12rem, 9.4vw, 2.75rem) !important;
    line-height: 1.08 !important;
    letter-spacing: -1.15px !important;
  }

  .hero h1 .title-gradient-safe,
  .page-hero h1 .title-gradient-safe,
  .hero h1 .title-gold,
  .page-hero h1 .title-gold,
  .hero h1 .title-blue,
  .page-hero h1 .title-blue {
    display: block !important;
    white-space: normal !important;
  }
}

/* Agente virtual Mel: usa imagem própria recortada e evita pseudo-imagem quebrada */
.mel-assistant,
.mel-assistant * {
  box-sizing: border-box !important;
}

.mel-assistant::before,
.mel-assistant::after,
.mel-avatar::before,
.mel-avatar::after {
  content: none !important;
  display: none !important;
}

.mel-stage {
  width: 132px !important;
  height: 132px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
}

.mel-avatar {
  content: normal !important;
  display: block !important;
  width: 132px !important;
  height: 132px !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.mel-assistant.is-minimized .mel-chatbot,
.mel-assistant.is-minimized .mel-close {
  display: none !important;
}

@media (max-width: 768px) {
  .mel-stage {
    width: 86px !important;
    height: 86px !important;
  }
  .mel-avatar {
    width: 86px !important;
    height: 86px !important;
  }
}


/* =========================================================
   V37 — GRADIENTE ÚNICO E CONTÍNUO EM TODOS OS TÍTULOS
   - Remove o efeito de cores sólidas separadas.
   - Aplica o mesmo gradiente premium da Home em h1 e section-title.
   - Mantém legibilidade no mobile.
   ========================================================= */
.hero h1,
.page-hero h1,
.section-title {
  background: linear-gradient(
    100deg,
    #f6f8fc 0%,
    #f6f8fc 42%,
    #f5a623 66%,
    #28c1ff 100%
  ) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  font-weight: 900 !important;
  text-shadow: none !important;
}

.hero h1 span,
.page-hero h1 span,
.section-title span,
.hero h1 .title-gradient-safe,
.page-hero h1 .title-gradient-safe,
.hero h1 .title-gold,
.page-hero h1 .title-gold,
.hero h1 .title-blue,
.page-hero h1 .title-blue {
  display: inline !important;
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
  white-space: normal !important;
  opacity: 1 !important;
  filter: none !important;
  text-shadow: none !important;
}

@media (max-width: 768px) {
  .hero h1,
  .page-hero h1 {
    font-size: clamp(2.15rem, 9.4vw, 2.85rem) !important;
    line-height: 1.08 !important;
    letter-spacing: -1.15px !important;
  }

  .section-title {
    font-size: clamp(2rem, 8vw, 2.75rem) !important;
    line-height: 1.08 !important;
    letter-spacing: -1px !important;
  }
}

/* Mel fixa e consistente em todas as páginas */
.mel-assistant {
  position: fixed !important;
  right: 26px !important;
  bottom: 22px !important;
  z-index: 9999 !important;
}

.mel-stage {
  width: 128px !important;
  height: 128px !important;
}

.mel-avatar {
  width: 126px !important;
  height: 126px !important;
  object-fit: contain !important;
  content: url('../assets/mel-assistente-transparente.png') !important;
}

@media (max-width: 768px) {
  .mel-assistant {
    right: 10px !important;
    bottom: 10px !important;
    transform: scale(.78) !important;
    transform-origin: bottom right !important;
  }
}

/* =========================================================
   V39 — GRADIENTE OFICIAL DOS TÍTULOS
   Pedido: aplicar SOMENTE nos títulos/textos, sem alterar logo.
   Gradiente: branco → dourado/amarelo → azul.
   ========================================================= */
:root {
  --melion-title-white: #ffffff;
  --melion-title-gold: #f2ca02;
  --melion-title-blue: #00abfa;
  --melion-title-gradient: linear-gradient(
    90deg,
    var(--melion-title-white) 0%,
    var(--melion-title-white) 18%,
    var(--melion-title-gold) 55%,
    var(--melion-title-blue) 100%
  );
}

/* Títulos principais de todas as páginas e seções */
.hero h1,
.page-hero h1,
.admin-page h1,
.section-title {
  background: var(--melion-title-gradient) !important;
  background-image: var(--melion-title-gradient) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  text-shadow: none !important;
  opacity: 1 !important;
  filter: none !important;
  font-weight: 900 !important;
}

/* Mantém spans internos sem quebrar o gradiente do título inteiro */
.hero h1 span,
.page-hero h1 span,
.admin-page h1 span,
.section-title span,
.hero h1 .title-gradient-safe,
.page-hero h1 .title-gradient-safe,
.hero h1 .title-gold,
.page-hero h1 .title-gold,
.hero h1 .title-blue,
.page-hero h1 .title-blue {
  background: transparent !important;
  background-image: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: inherit !important;
  color: inherit !important;
  display: inline !important;
  opacity: 1 !important;
  filter: none !important;
  text-shadow: none !important;
}

/* Garante que a logo continue original e não receba gradiente de título */
.brand,
.brand *,
.brand-name,
.brand-name strong,
.brand-name em,
.brand-mark {
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: initial;
}

.brand-name strong {
  color: var(--gold) !important;
}

.brand-name em {
  color: var(--blue) !important;
  font-style: normal !important;
}

/* Mobile: mantém legibilidade e evita título estourado */
@media (max-width: 768px) {
  .hero h1,
  .page-hero h1,
  .admin-page h1 {
    font-size: clamp(2.15rem, 9.2vw, 2.85rem) !important;
    line-height: 1.08 !important;
    letter-spacing: -1.15px !important;
  }

  .section-title {
    font-size: clamp(2rem, 8vw, 2.75rem) !important;
    line-height: 1.08 !important;
    letter-spacing: -1px !important;
  }
}


/* =========================================================
   V43 — TÍTULOS VISÍVEIS NA HOSTINGER (sem texto transparente)
   Correção: remove background-clip transparente dos títulos e usa
   spans com cores sólidas em sequência branco → dourado → azul.
   Isso evita o problema do texto sumir na hospedagem/extensões.
   ========================================================= */

.hero h1.title-gradient-safe,
.page-hero h1.title-gradient-safe,
.admin-page h1.title-gradient-safe,
.section-title.title-gradient-safe,
.title-gradient-safe {
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  color: #ffffff !important;
  -webkit-text-fill-color: currentColor !important;
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  text-shadow: 0 0 18px rgba(255,255,255,.04) !important;
}

.hero h1.title-gradient-safe span,
.page-hero h1.title-gradient-safe span,
.admin-page h1.title-gradient-safe span,
.section-title.title-gradient-safe span,
.title-gradient-safe span {
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: currentColor !important;
  color: currentColor !important;
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  text-shadow: inherit !important;
}

/* Simulação segura de gradiente: branco → dourado → azul */
.title-gradient-safe .tg-white {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

.title-gradient-safe .tg-cream {
  color: #fff3bc !important;
  -webkit-text-fill-color: #fff3bc !important;
}

.title-gradient-safe .tg-gold {
  color: #f2ca02 !important;
  -webkit-text-fill-color: #f2ca02 !important;
}

.title-gradient-safe .tg-mint {
  color: #9ed69c !important;
  -webkit-text-fill-color: #9ed69c !important;
}

.title-gradient-safe .tg-blue {
  color: #00abfa !important;
  -webkit-text-fill-color: #00abfa !important;
}

/* Hover/seleção sem quebrar legibilidade */
.title-gradient-safe::selection,
.title-gradient-safe span::selection {
  background: rgba(0,171,250,.35);
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
}