/* =========================================================
   Tema CINZA CLARO — carregado depois dos outros estilos
   ========================================================= */
:root {
  --bg: #eceef2;
  --bg-rgb: 236, 238, 242;
  --bg-2: #e2e5ea;
  --card: #ffffff;
  --card-2: #f5f6f8;
  --line: rgba(20, 18, 30, 0.10);
  --text: #17141d;
  --muted: #5d5868;
  --p1: #ff6a00;
  --p1-rgb: 255, 106, 0;
  --p2: #f0257d;
  --p2-rgb: 240, 37, 125;
  --p3: #ff3d3d;
  --soft: #c2410c;
  --shadow: 0 22px 50px -24px rgba(40, 30, 60, 0.28);
}
body { background: radial-gradient(1100px 560px at 100% -10%, rgba(var(--p2-rgb), .10), transparent 60%), radial-gradient(900px 500px at -10% 0%, rgba(var(--p1-rgb), .10), transparent 60%), var(--bg); }
.btn-ghost { background: #fff; border-color: rgba(20,18,30,.14); }
.btn-ghost:hover { background: #fff; border-color: rgba(var(--p1-rgb), .6); }
.hero::before { background-image: linear-gradient(rgba(20,18,30,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(20,18,30,.06) 1px, transparent 1px); }
.glow-1, .glow-2 { opacity: .18; }
.pill { color: #9a3412; background: rgba(var(--p1-rgb), .10); }
.art-card { background: #ffffff; border-color: rgba(20,18,30,.08); box-shadow: 0 30px 70px -30px rgba(var(--p2-rgb), .35); }
.code { background: #17141d; color: #f3eef7; }
.c1 { color: #ffb27a; } .c2 { color: #ffd166; } .c3 { color: #ff7ab6; } .c4 { color: #86efac; }
.float-badge { background: #fff; box-shadow: 0 12px 30px -14px rgba(40,30,60,.35); }
.nav.scrolled { background: rgba(255,255,255,.85); }
.marquee { background: #fff; }
.section-alt { background: linear-gradient(180deg, #e4e7ec, var(--bg)); }
.service, .project, .contact-list a, .assist-card, .skill, .contact-form { box-shadow: 0 10px 30px -22px rgba(40,30,60,.35); }
.project .thumb .badge, .project .thumb .count { background: rgba(255,255,255,.9); color: var(--text); }
.project .thumb::after { color: #fff; background: linear-gradient(180deg, rgba(var(--p2-rgb), .25), rgba(23,20,29,.65)); }
.no-img { color: #fff; }
.chip { background: #fff; }
.about-card { background: radial-gradient(circle at 30% 20%, rgba(var(--p1-rgb), .22), transparent 60%), radial-gradient(circle at 80% 90%, rgba(var(--p2-rgb), .18), transparent 55%), #fff; }
input, select, textarea { background: var(--card-2); }
.modal-backdrop { background: rgba(23,20,29,.55); }
.modal-close, .g-nav { background: rgba(255,255,255,.92); color: var(--text); }
.gallery { background: #e9ebef; }
.socials a { background: #fff; }
/* Atendimento */
.assist-preview { background: var(--card-2); }
.assist-chips span, .qc { border-color: rgba(var(--p1-rgb), .45); color: #c2410c; background: #fff; }
.qc.on { background: rgba(var(--p1-rgb), .14); color: #9a3412; }
.qc.ok { color: #fff; }
.chat { background: var(--bg); box-shadow: 0 30px 80px -24px rgba(40,30,60,.45); }
.chat-head { background: linear-gradient(135deg, rgba(var(--p1-rgb), .14), rgba(var(--p2-rgb), .10)), #fff; }
.chat-head button { background: rgba(20,18,30,.06); }
.chat-head button:hover { background: rgba(20,18,30,.12); }
.msg.bot { background: #fff; box-shadow: 0 4px 14px -10px rgba(40,30,60,.4); }
.summary { color: var(--text); background: var(--card-2); }
.chat-input { background: #fff; }
.chat-float-tip { background: #fff; }

/* =========================================================
   BOTÕES verde esmeralda: degradê clareando, sombra flutuante,
   hover e brilho piscando bem devagar
   ========================================================= */
:root {
  --em-1: #047857;
  --em-2: #10b981;
  --em-3: #34d399;
  --em-4: #a7f3d0;
  --em-rgb: 16, 185, 129;
  --btn-grad: linear-gradient(120deg, var(--em-1) 0%, var(--em-2) 38%, var(--em-3) 72%, var(--em-4) 100%);
}
@keyframes btn-breathe {
  0%, 100% { box-shadow: 0 14px 28px -12px rgba(var(--em-rgb), .55), 0 4px 10px -4px rgba(4, 120, 87, .35), 0 0 0 0 rgba(var(--em-rgb), .0); }
  50% { box-shadow: 0 18px 36px -12px rgba(var(--em-rgb), .70), 0 6px 14px -4px rgba(4, 120, 87, .40), 0 0 0 7px rgba(var(--em-rgb), .12); }
}
@keyframes btn-sweep { 0%, 72% { transform: translateX(-130%) skewX(-18deg); } 100% { transform: translateX(230%) skewX(-18deg); } }
@keyframes btn-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes btn-twinkle { 0%, 100% { opacity: .15; transform: scale(.6); } 50% { opacity: 1; transform: scale(1); } }

.btn-primary, .qc.ok, .chat-input button, .chip.active {
  background: var(--btn-grad);
  background-size: 160% 100%;
  background-position: 0% 50%;
  color: #fff;
  text-shadow: 0 1px 2px rgba(4, 80, 58, .45);
  border: 1px solid rgba(255, 255, 255, .55);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  animation: btn-breathe 3.6s ease-in-out infinite;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), background-position .6s ease, filter .35s;
}
/* Reflexo branco no topo do botão */
.btn-primary::before, .qc.ok::before, .chat-input button::before {
  content: ''; position: absolute; inset: 0 0 50% 0; z-index: -1;
  background: linear-gradient(180deg, rgba(255,255,255,.38), rgba(255,255,255,0));
  border-radius: inherit; pointer-events: none;
}
/* Faixa de luz que passa devagar sozinha */
.btn-primary::after, .qc.ok::after, .chat-input button::after {
  content: ''; position: absolute; top: -20%; bottom: -20%; left: 0; width: 38%; z-index: 1;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  animation: btn-sweep 5.5s ease-in-out infinite; transform: translateX(-130%) skewX(-18deg);
  pointer-events: none;
}
.btn-primary:hover::after { transform: none; }
.btn-primary:hover, .qc.ok:hover, .chat-input button:hover, .chip.active:hover {
  transform: translateY(-4px) scale(1.02);
  background-position: 100% 50%;
  filter: saturate(1.15) brightness(1.04);
  box-shadow: 0 24px 44px -14px rgba(var(--em-rgb), .80), 0 10px 18px -8px rgba(4, 120, 87, .45), 0 0 0 8px rgba(var(--em-rgb), .14);
  animation-play-state: paused;
}
.btn-primary:active, .qc.ok:active, .chat-input button:active { transform: translateY(-1px) scale(.99); }
/* Estrelinha piscando no canto dos botões principais */
.hero-actions .btn-primary, .assist-card .btn-primary, .menu .btn-primary { padding-right: 34px; }
.btn-primary > span { position: relative; z-index: 2; }
.btn-primary .spark, .menu .btn-primary .spark { position: absolute; right: 13px; top: 50%; width: 10px; height: 10px; margin-top: -5px; z-index: 2; animation: btn-twinkle 2.8s ease-in-out infinite; }
.btn-primary .spark::before, .btn-primary .spark::after { content: ''; position: absolute; inset: 0; margin: auto; background: #fff; border-radius: 2px; }
.btn-primary .spark::before { width: 2px; height: 10px; }
.btn-primary .spark::after { width: 10px; height: 2px; }

/* Botão branco (secundário) com borda esmeralda */
.btn-ghost {
  background: linear-gradient(180deg, #ffffff, #f0fdf8);
  border: 1px solid rgba(var(--em-rgb), .45);
  color: #065f46;
  box-shadow: 0 12px 24px -16px rgba(4, 120, 87, .45);
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, border-color .35s, background .35s;
}
.btn-ghost:hover {
  background: linear-gradient(180deg, #ffffff, #d1fae5);
  border-color: var(--em-2);
  transform: translateY(-4px);
  box-shadow: 0 20px 36px -16px rgba(var(--em-rgb), .6), 0 0 0 6px rgba(var(--em-rgb), .10);
}

/* Botão flutuante do atendimento */
.chat-float {
  background: var(--btn-grad);
  border: 2px solid rgba(255,255,255,.7);
  animation: btn-float 4s ease-in-out infinite, btn-breathe 3.6s ease-in-out infinite;
}
.chat-float::after { border-color: var(--em-3); animation: pulse 3.2s ease-out infinite; }
.chat-float:hover { transform: scale(1.08); animation-play-state: paused; }

/* Opções do assistente e filtros */
.qc, .assist-chips span { border-color: rgba(var(--em-rgb), .45); color: #047857; background: #fff; transition: transform .25s, box-shadow .25s, background .25s; }
.qc:hover { background: #ecfdf5; transform: translateY(-2px); box-shadow: 0 10px 18px -12px rgba(var(--em-rgb), .7); }
.qc.on { background: #d1fae5; color: #065f46; }
.chip { transition: transform .25s, box-shadow .25s, border-color .25s; }
.chip:hover { transform: translateY(-2px); border-color: rgba(var(--em-rgb), .5); color: #047857; }
.chat-input input:focus { border-color: var(--em-2); }
.contact-list .ci { background: var(--btn-grad); }
.service .num { background: var(--btn-grad); box-shadow: 0 10px 22px -8px rgba(var(--em-rgb), .6); }
@media (max-width: 560px) {
  .hero-actions { gap: 10px; }
  .hero-actions .btn { font-size: 14.5px; padding: 14px 12px; }
  .hero-actions .btn-primary { padding-right: 30px; }
  .hero-actions .btn-primary .spark { right: 11px; }
}

/* Painel */
.pill-s { background: rgba(20,18,30,.06); }
.pill-s.star { background: #fef3c7; color: #a16207; }
.pill-s.off { background: #fee2e2; color: #b91c1c; }
.tab.active { background: rgba(var(--em-rgb), .14); color: #065f46; }
.icon-btn { background: #fff; }
.icon-btn:hover { border-color: var(--em-2); }
.drop.over, .drop:hover { border-color: var(--em-2); background: #ecfdf5; }
.im.cover { border-color: var(--em-2); }

/* =========================================================
   FUNDO cinza puxando pra verde clarinho (sem laranja/rosa)
   ========================================================= */
:root { --bg: #eaf0ed; --bg-rgb: 234, 240, 237; --bg-2: #e0e9e4; --card-2: #f3f7f5; --mint-rgb: 110, 231, 183; --sea-rgb: 94, 234, 212; }
body {
  background:
    radial-gradient(1100px 560px at 100% -10%, rgba(var(--sea-rgb), .16), transparent 60%),
    radial-gradient(900px 500px at -10% 0%, rgba(var(--mint-rgb), .20), transparent 60%),
    linear-gradient(180deg, #e6f2ec 0%, var(--bg) 45%, #edf0ef 100%);
}
.glow-1 { background: #6ee7b7; opacity: .22; }
.glow-2 { background: #99f6e4; opacity: .22; }
.pill { color: #065f46; background: rgba(var(--mint-rgb), .18); border-color: rgba(16, 185, 129, .35); }
.section-alt { background: linear-gradient(180deg, #dfeae5, var(--bg)); }
.art-card { box-shadow: 0 30px 70px -30px rgba(16, 185, 129, .35); }
.about-card { background: radial-gradient(circle at 30% 20%, rgba(var(--mint-rgb), .30), transparent 60%), radial-gradient(circle at 80% 90%, rgba(var(--sea-rgb), .22), transparent 55%), #fff; }
.chat-head { background: linear-gradient(135deg, rgba(var(--mint-rgb), .22), rgba(var(--sea-rgb), .14)), #fff; }
.project .thumb::after { background: linear-gradient(180deg, rgba(16, 185, 129, .22), rgba(23,20,29,.65)); }
.gallery { background: #e4ebe7; }