/* ---------- Ícones SVG (sprite assets/icons.svg) — substituem emoji em
   toda a interface pra dar cara de app premium, não de link-in-bio
   genérico. Tamanho por contexto, cor sempre herdada (currentColor). ---------- */
.ic{ width:20px; height:20px; flex:none; fill:none; }
.menu-toggle .ic, .header-call .ic{ width:19px; height:19px; }
.link-item .icon .ic{ width:21px; height:21px; }
.link-item .arrow .ic{ width:18px; height:18px; }
.service-card .icon .ic{ width:24px; height:24px; }
.diff-item .icon .ic{ width:22px; height:22px; }
.diff-item.sm .icon{ width:44px; height:44px; }
.diff-item.sm .icon .ic{ width:19px; height:19px; }
.diff-item.sm h4{ font-size:0.85rem; }
.cert-badge .icon .ic{ width:24px; height:24px; }
.contact-item .icon .ic{ width:18px; height:18px; }
.socials a .ic{ width:18px; height:18px; }
.fab-whatsapp .ic{ width:26px; height:26px; }
.btn .ic{ width:17px; height:17px; }

/* ---------- Link item (botão premium do hub) — navy sólido por padrão,
   igual à referência; os 2 CTAs "featured" (Orçamento/Serviços) viram
   brancos com borda dourada pra se destacar dos demais. ---------- */
.link-item{
  position:relative; overflow:hidden;
  display:flex; align-items:center; gap:var(--sp-4);
  width:100%; padding:var(--sp-4) var(--sp-5);
  background:var(--navy-800); border:1px solid var(--navy-800); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
  transition:transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
  text-align:left;
}
.link-item:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); background:var(--navy-700); }
.link-item:active{ transform:translateY(0) scale(0.99); }
.link-item .icon{
  flex:none; width:44px; height:44px; border-radius:14px;
  display:flex; align-items:center; justify-content:center; font-size:20px;
  background:#fff; color:var(--navy-800); box-shadow:0 2px 6px rgba(0,0,0,0.12);
}
.link-item .body{ flex:1; min-width:0; }
.link-item .body .title{ font-weight:800; font-size:0.98rem; color:#fff; }
.link-item .body .desc{ font-size:var(--fs-small); color:rgba(255,255,255,0.62); }
.link-item .arrow{ flex:none; color:rgba(255,255,255,0.5); font-size:18px; transition:transform var(--dur-fast) var(--ease); }
.link-item:hover .arrow{ transform:translateX(3px); color:#fff; }
.link-item.featured{ background:var(--surface); border:1.5px solid var(--gold); }
.link-item.featured:hover{ background:var(--surface-alt); }
.link-item.featured .icon{ background:var(--gold); color:#fff; box-shadow:none; }
.link-item.featured .body .title{ color:var(--text); }
.link-item.featured .body .desc{ color:var(--text-mute); }
.link-item.featured .arrow{ color:var(--gold-600); }
.link-item.disabled{ opacity:.5; cursor:not-allowed; }
.link-item.disabled:hover{ transform:none; box-shadow:var(--shadow-sm); background:var(--navy-800); }

/* Ripple */
.ripple{ position:absolute; border-radius:50%; background:rgba(47,95,214,0.18); transform:scale(0); animation:ripple 550ms var(--ease); pointer-events:none; }
@keyframes ripple{ to{ transform:scale(3); opacity:0; } }

/* ---------- Card de link branco (grade de contatos) — ícone em círculo,
   título, descrição de 1 linha, seta que anima no hover. ---------- */
.cards-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-4); }
@media (max-width:820px){ .cards-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .cards-grid{ grid-template-columns:1fr; } }
.link-card{
  display:flex; align-items:center; gap:var(--sp-4);
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md);
  padding:var(--sp-4) var(--sp-5); box-shadow:var(--shadow-sm); text-align:left;
  transition:transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.link-card:hover{ transform:translateY(-3px) scale(1.01); box-shadow:var(--shadow-md); border-color:var(--gray-300); }
.link-card .icon{
  width:46px; height:46px; border-radius:50%; flex:none;
  background:var(--gray-100); color:var(--accent);
  display:flex; align-items:center; justify-content:center;
}
.link-card .body{ flex:1; min-width:0; }
.link-card .body .title{ font-weight:800; font-size:0.95rem; color:var(--text); }
.link-card .body .desc{ font-size:var(--fs-tiny); color:var(--text-mute); }
.link-card .arrow{ flex:none; color:var(--gray-300); transition:transform var(--dur-fast) var(--ease); }
.link-card:hover .arrow{ transform:translateX(3px); color:var(--accent-2); }
.link-card.featured{ background:linear-gradient(135deg, var(--gold), var(--gold-600)); border-color:var(--gold-600); }
.link-card.featured .icon{ background:rgba(255,255,255,0.28); color:#fff; }
.link-card.featured .body .title, .link-card.featured .body .desc{ color:#fff; }
.link-card.featured .body .desc{ color:rgba(255,255,255,0.85); }
.link-card.featured .arrow{ color:rgba(255,255,255,0.7); }

/* ---------- Banner do catálogo — navy full-width com CTA dourado. ---------- */
.catalog-banner{
  display:flex; align-items:center; gap:var(--sp-5); flex-wrap:wrap;
  background:linear-gradient(135deg, var(--navy-800), var(--navy-900));
  border-radius:var(--radius-lg); padding:var(--sp-6); color:#fff;
}
.catalog-banner .icon{
  width:54px; height:54px; flex:none; border-radius:var(--radius-sm);
  background:rgba(240,180,41,0.16); color:var(--gold);
  display:flex; align-items:center; justify-content:center;
}
.catalog-banner .body{ flex:1; min-width:220px; }
.catalog-banner h4{ color:#fff; font-size:1.05rem; margin-bottom:2px; }
.catalog-banner p{ color:rgba(255,255,255,0.68); font-size:var(--fs-small); }

/* ---------- Mini-portfólio (prévia, quadradinhos) ---------- */
.mini-portfolio-track{ display:flex; gap:var(--sp-3); overflow-x:auto; scrollbar-width:none; padding-bottom:4px; }
.mini-portfolio-track::-webkit-scrollbar{ display:none; }
.mini-card{ flex:0 0 auto; width:150px; aspect-ratio:1/1; border-radius:var(--radius-md); overflow:hidden; position:relative;
  background:linear-gradient(135deg, var(--navy-800), var(--blue-500)); box-shadow:var(--shadow-sm); }
.mini-card .cap{ position:absolute; left:0; right:0; bottom:0; padding:var(--sp-2) var(--sp-3); background:linear-gradient(0deg, rgba(10,21,51,0.9), transparent); color:#fff; }
.mini-card .cap .ic{ width:16px; height:16px; color:var(--gold); margin-bottom:2px; }
.mini-card .cap .t{ font-size:0.72rem; font-weight:700; line-height:1.2; }
.mini-card .cap .s{ font-size:0.62rem; color:rgba(255,255,255,0.7); }

/* ---------- Botões genéricos ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2);
  padding:var(--sp-3) var(--sp-6); border-radius:var(--radius-pill); font-weight:700; font-size:var(--fs-small);
  transition:transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.btn-primary{ background:var(--accent); color:#fff; box-shadow:var(--shadow-sm); }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); }
.btn-gold{ background:var(--gold); color:var(--navy-900); }
.btn-gold:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); }
.btn-ghost{ border:1.5px solid var(--border); color:var(--text); }
.btn-ghost:hover{ border-color:var(--accent-2); color:var(--accent-2); }
.btn-block{ width:100%; }

/* ---------- Service card ---------- */
.service-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md);
  padding:var(--sp-5); text-align:center;
  transition:transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.service-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.service-card .icon{ width:52px; height:52px; margin:0 auto var(--sp-3); border-radius:var(--radius-sm);
  background:var(--gray-100); display:flex; align-items:center; justify-content:center; font-size:24px; color:var(--accent); }
.service-card h4{ font-size:0.95rem; margin-bottom:var(--sp-1); }
.service-card p{ font-size:var(--fs-small); margin-bottom:var(--sp-3); }
.service-card .more{ font-size:var(--fs-tiny); font-weight:700; color:var(--accent-2); text-transform:uppercase; letter-spacing:.04em; }

/* ---------- Diferenciais ---------- */
.diff-item .icon{ width:56px; height:56px; margin:0 auto var(--sp-3); border-radius:50%;
  background:var(--navy-800); color:#fff; display:flex; align-items:center; justify-content:center; font-size:22px; }
.diff-item h4{ font-size:0.92rem; margin-bottom:2px; }
.diff-item p{ font-size:var(--fs-tiny); }

/* Variante escura (dentro de .section-dark) — ícone "nu" (sem badge de
   fundo) com um selinho dourado de check no canto, igual referência. */
.section-dark .diff-item .icon{
  position:relative; width:auto; height:auto; background:none; border-radius:0;
  display:inline-flex; margin:0 auto var(--sp-4);
}
.section-dark .diff-item .icon .ic{ width:34px; height:34px; }
.section-dark .diff-item .icon .mini-badge{
  position:absolute; right:-8px; bottom:-6px; width:18px; height:18px; border-radius:50%;
  background:var(--gold); display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 2px var(--navy-900);
}
.section-dark .diff-item .icon .mini-badge .ic{ width:11px; height:11px; color:var(--navy-900); }
.section-dark .diff-item h4{ color:#fff; font-size:0.95rem; }
.section-dark .diff-item p{ color:rgba(255,255,255,0.62); }

/* ---------- Portfolio carousel — 1 slide por vez, setas sobre a
   imagem (como na referência), dots embaixo. ---------- */
.carousel{ position:relative; }
.carousel-track{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; border-radius:var(--radius-lg); }
.carousel-track::-webkit-scrollbar{ display:none; }
.carousel-slide{ flex:0 0 100%; width:100%; scroll-snap-align:start; }
.portfolio-card{ border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-md); position:relative; aspect-ratio:4/3; background:linear-gradient(135deg, var(--navy-800), var(--blue-500)); }
.portfolio-card img{ width:100%; height:100%; object-fit:cover; }
.portfolio-card .caption{ position:absolute; left:0; right:0; bottom:0; padding:var(--sp-4); background:linear-gradient(0deg, rgba(10,21,51,0.85), transparent); color:#fff; }
.portfolio-card .caption .tag{ font-size:var(--fs-tiny); color:var(--gold); font-weight:700; text-transform:uppercase; }
.portfolio-card.placeholder{ display:flex; flex-direction:column; align-items:center; justify-content:center; color:rgba(255,255,255,0.75); text-align:center; padding:var(--sp-6); font-size:var(--fs-small); border:2px dashed rgba(255,255,255,0.35); }
.portfolio-card.placeholder .ic{ color:rgba(255,255,255,0.6); }
.carousel-nav button{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:40px; height:40px; border-radius:50%; background:#fff; box-shadow:var(--shadow-md);
  display:flex; align-items:center; justify-content:center; font-size:18px; color:var(--accent);
  transition:transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.carousel-nav button:hover{ background:var(--gray-100); }
.carousel-nav button[data-carousel-prev]{ left:var(--sp-3); }
.carousel-nav button[data-carousel-next]{ right:var(--sp-3); }
.carousel-dots{ display:flex; justify-content:center; gap:6px; margin-top:var(--sp-4); }
.carousel-dots span{ width:6px; height:6px; border-radius:50%; background:var(--gray-300); }
.carousel-dots span.active{ background:var(--accent-2); width:18px; border-radius:3px; }

/* ---------- Clientes (placeholder) ---------- */
.client-logo{
  height:88px; display:flex; align-items:center; justify-content:center;
  border:1.5px dashed var(--border); border-radius:var(--radius-md); background:var(--surface-alt);
  color:var(--text-mute); font-size:var(--fs-tiny); text-align:center; padding:var(--sp-3);
}
.client-logo img{ max-height:44px; width:auto; }

/* ---------- Certificações — cartão centralizado, ícone quadrado em cima
   (igual referência), com badge de cor por tipo. ---------- */
.cert-badge{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:var(--sp-2);
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:var(--sp-6) var(--sp-4);
}
.cert-badge .icon{
  width:52px; height:52px; border-radius:var(--radius-sm);
  display:flex; align-items:center; justify-content:center; font-size:22px; font-weight:800;
  background:var(--gray-100); color:var(--accent);
}
.cert-badge:nth-child(1) .icon{ background:rgba(47,95,214,0.12); color:var(--accent-2); }
.cert-badge:nth-child(2) .icon{ background:rgba(240,180,41,0.16); color:var(--gold-600); }
.cert-badge:nth-child(3) .icon{ background:rgba(34,197,94,0.14); color:#16924f; }
.cert-badge h4{ font-size:0.95rem; margin-bottom:2px; }
.cert-badge p{ font-size:var(--fs-tiny); }

/* ---------- Contato ---------- */
.contact-list{ display:flex; flex-direction:column; gap:var(--sp-3); }
.contact-item{ display:flex; align-items:center; gap:var(--sp-4); padding:var(--sp-4); background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); }
.contact-item .icon{ width:40px; height:40px; flex:none; border-radius:50%; background:var(--gray-100); color:var(--accent); display:flex; align-items:center; justify-content:center; }
.contact-item .body .label{ font-size:var(--fs-tiny); color:var(--text-mute); text-transform:uppercase; letter-spacing:.04em; }
.contact-item .body .value{ font-weight:700; }
.contact-item .arrow{ margin-left:auto; color:var(--gray-300); }

/* ---------- Badges ---------- */
.badge{ display:inline-block; padding:2px 10px; border-radius:var(--radius-pill); font-size:var(--fs-tiny); font-weight:700; }
.badge-soon{ background:var(--gray-100); color:var(--text-mute); }

/* ---------- QR box ---------- */
.qr-box{ display:flex; flex-direction:column; align-items:center; gap:var(--sp-3); padding:var(--sp-6); background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); }
#qrcode img{ border-radius:var(--radius-sm); }

/* ---------- Toast ---------- */
.toast{
  position:fixed; left:50%; bottom:calc(var(--sp-5) + 70px); transform:translateX(-50%) translateY(20px);
  background:var(--navy-900); color:#fff; padding:var(--sp-3) var(--sp-5); border-radius:var(--radius-pill);
  font-size:var(--fs-small); font-weight:600; opacity:0; pointer-events:none; z-index:var(--z-toast);
  transition:opacity var(--dur-normal) var(--ease), transform var(--dur-normal) var(--ease);
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ---------- Divider ---------- */
.divider{ height:1px; background:var(--border); border:none; margin:var(--sp-8) 0; }

/* ---------- Reveal on scroll ---------- */
[data-reveal]{ opacity:0; transform:translateY(16px); transition:opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); }
[data-reveal].in{ opacity:1; transform:translateY(0); }