/* Ajustes por seção */

/* ---------- O que desenvolvemos: cartões alinhados e na mesma família de cores ----------
   Antes: três cores diferentes (grafite, azul, branco) e alturas desencontradas.
   Agora: os três cartões começam na mesma linha e têm a mesma altura; o do meio
   (Lojas virtuais) fica em grafite como destaque e os laterais em branco. Todos os
   botões são amarelos, os ícones e etiquetas seguem a mesma regra. */
#servicos .svc{margin-top:0!important;border-radius:24px}
#servicos > div > .grid{align-items:stretch}
/* ícones centralizados na caixa */
#servicos .svc > span:first-child{display:grid;place-items:center;align-items:center;justify-items:center}
#servicos .svc > span:first-child svg{width:24px;height:24px;display:block}
/* quatro serviços: 2 colunas no tablet, 4 no computador */
/* quatro serviços: 2 por linha a partir do tablet */
@media (min-width:768px){#servicos > div > .grid.md\:grid-cols-3{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}}
#servicos .svc > a:last-child{margin-top:auto}
#servicos .svc > p + ul{margin-bottom:28px}

/* laterais: branco com borda */
#servicos .svc.bg-navy-950,#servicos .svc.bg-surface{background:var(--surface);color:var(--ink);border:1px solid var(--line);box-shadow:0 1px 2px rgba(17,18,22,.04),0 18px 40px -28px rgba(17,18,22,.25)}
#servicos .svc.bg-navy-950 .text-navy-200{color:var(--soft)}
#servicos .svc.bg-navy-950 > span:first-child,#servicos .svc.bg-surface > span:first-child{background:#111216;color:#ffc83d}
#servicos .svc.bg-navy-950 ul li,#servicos .svc.bg-surface ul li{background:var(--prisoft);color:var(--ink)}
/* centro: grafite em destaque */
#servicos .svc.bg-navy-600{background:#111216;color:#fff;border:1px solid #111216;box-shadow:0 30px 60px -30px rgba(17,18,22,.55)}
#servicos .svc.bg-navy-600 .text-navy-100{color:#b9bac3}
#servicos .svc.bg-navy-600 > span:first-child{background:#ffc83d;color:#241a00}
#servicos .svc.bg-navy-600 ul li{background:rgba(255,255,255,.1);color:#f2f0ea}
/* botão do 3º cartão (era contorno) vira amarelo como os outros */
#servicos .svc a.border-2{background:#ffc83d;border-color:#ffc83d;color:#241a00;border-width:0}
#servicos .svc a.border-2:hover{background:#ffd45e}
/* complementares: mesmos cartões brancos, alinhados */
#servicos .svc.bg-prisoft{background:var(--surface);border:1px solid var(--line)}
#servicos .svc ul li.bg-surface{background:var(--prisoft)}
#servicos .svc a.underline{color:var(--ink);text-decoration-color:#ffc83d;text-decoration-thickness:2px}
#servicos .svc a.underline:hover{text-decoration-color:var(--ink)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme=light]) #servicos .svc.bg-navy-950 > span:first-child,
  :root:not([data-theme=light]) #servicos .svc.bg-surface > span:first-child{background:#ffc83d;color:#241a00}
  :root:not([data-theme=light]) #servicos .svc.bg-navy-600{background:#1d1e26;border-color:#2c2d37}
  :root:not([data-theme=light]) #servicos .svc a.underline{color:var(--ink)}
}

/* ---------- Para quem é?: imagens sem fundo ---------- */
#conteudo article img[src*="publico-"]{object-fit:contain;background:var(--paper)}

/* ---------- Quebras de linha dos títulos ----------
   A quebra manual só vale do tablet para cima; no celular o texto quebra sozinho. */
br.qb{display:none}
@media (min-width:768px){br.qb{display:inline}}
#conteudo h2{text-wrap:balance}

/* ---------- WhatsApp: "Estamos online" sempre visível ---------- */
.wa-float .wa-label{display:inline-flex!important;align-items:center;gap:8px;opacity:1;transform:none;animation:wa-entra .6s cubic-bezier(.2,.75,.25,1) 1.4s both}
.wa-on{position:relative;width:8px;height:8px;border-radius:50%;background:#25d366;flex:none}
.wa-on:after{content:"";position:absolute;inset:0;border-radius:50%;background:#25d366;animation:wa-on 1.8s ease-out infinite}
@keyframes wa-on{0%{transform:scale(1);opacity:.7}100%{transform:scale(2.6);opacity:0}}
@keyframes wa-entra{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:none}}
@media (max-width:767px){.wa-float .wa-label{font-size:.78rem;padding:7px 12px}}
@media (prefers-reduced-motion:reduce){.wa-float .wa-label,.wa-on:after{animation:none}}

/* ---------- ícones animados abaixo do topo: traço preto ---------- */
.fx-icone.text-pri{color:#111216}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .fx-icone.text-pri{color:var(--ink)}}

/* ---------- O que desenvolvemos: ícones animados ----------
   Só se mexem enquanto os cartões estão na tela (classe .fx-ativo) */
#servicos .fx-svc svg{transform-origin:50% 55%}
.fx-ativo .fx-tela svg{animation:fx-tela 3s ease-in-out infinite}
.fx-ativo .fx-carrinho svg{animation:fx-carrinho 3s cubic-bezier(.4,.1,.3,1) infinite}
.fx-ativo .fx-landing svg{animation:fx-landing 3s ease-in-out infinite}
.fx-ativo .fx-codigo svg{animation:fx-codigo 3s ease-in-out infinite}
@keyframes fx-tela{0%,60%,100%{transform:none}15%{transform:translateY(-3px) scale(1.12)}30%{transform:translateY(0) scale(.96)}42%{transform:scale(1.04)}}
@keyframes fx-carrinho{0%,100%{transform:none}20%{transform:translateX(5px) rotate(-8deg)}38%{transform:translateX(-4px) rotate(5deg)}52%{transform:translateX(2px)}64%{transform:none}}
@keyframes fx-landing{0%,55%,100%{transform:none}14%{transform:scale(1.18)}26%{transform:scale(.92)}38%{transform:scale(1.06)}}
@keyframes fx-codigo{0%,60%,100%{transform:none}12%{transform:rotate(-14deg)}24%{transform:rotate(12deg)}36%{transform:rotate(-6deg)}48%{transform:rotate(3deg)}}
@media (prefers-reduced-motion:reduce){#servicos .fx-svc svg{animation:none!important}}