:root{
  --bg:#f7f9ff; --bg2: rgba(247,249,255,.82); --card:#ffffff;
  --text:#0c1220; --muted:#4b5b78; --border:rgba(12,18,32,.12);
  --shadow: 0 10px 26px rgba(12,18,32,.10);
  --brand:#2563eb; --brand2:#16a34a; --wa:#25D366; --btnbg: rgba(12,18,32,.04);
  --radius:18px;
}
[data-theme="dark"]{
  --bg:#0b0f19; --bg2: rgba(11,15,25,.60); --card:#121a2a;
  --text:#e8eefc; --muted:#a9b7d6; --border:rgba(255,255,255,.10);
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --brand:#6ea8fe; --brand2:#58f0c5; --wa:#25D366; --btnbg: rgba(255,255,255,.06);
}

/* REMOVIDO: era redundante e agora a logo base já é a transparente em todos os temas
[data-theme="dark"] .logo{background-image:url("./assets/img/logo_nc4_fundo_transparente.png");}
*/

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background: radial-gradient(1200px 700px at 10% -10%, rgba(37,99,235,.18), transparent 60%),
              radial-gradient(900px 600px at 90% 10%, rgba(22,163,74,.12), transparent 55%),
              var(--bg);
  color:var(--text); line-height:1.55;
}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
.container{max-width:1120px; margin:0 auto; padding:0 18px}

.nav{position:sticky; top:0; z-index:50; backdrop-filter: blur(10px); background: var(--bg2); border-bottom:1px solid var(--border);}
.nav-inner{display:flex; align-items:center; justify-content:space-between; padding:14px 0; gap:14px;}

/* Header: grande no topo, compacto no scroll */
.nav{transition: padding .22s ease, background .22s ease}
.nav-inner{transition: padding .22s ease, gap .22s ease}
.logo{transition: width .22s ease, height .22s ease, border-radius .22s ease, box-shadow .22s ease, filter .22s ease}
.brand span:last-child{transition: font-size .22s ease, letter-spacing .22s ease}

.nav.is-top .nav-inner{padding:18px 0}
.nav.is-top .logo{width:56px; height:56px; border-radius:16px}
.nav.is-top .brand span:last-child{font-size:1.18rem; letter-spacing:.2px}

.nav.is-shrink .nav-inner{padding:10px 0}
.nav.is-shrink .logo{width:34px; height:34px; border-radius:10px}
.nav.is-shrink .brand span:last-child{font-size:1rem}

.nav.is-compact .menu,
.nav.is-compact .cta{
  opacity:0;
  transform: translateY(-6px);
  pointer-events:none;
}

.menu{transition: opacity .18s ease, transform .18s ease}
.cta{transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease, opacity .18s ease}

.brand{display:flex; gap:10px; align-items:center; font-weight:800; letter-spacing:.2px;}

/* =========================================================
   LOGO (AJUSTE)
   - Sempre usa a transparente (logo do tema escuro)
   - Tema claro: aplica sombra via drop-shadow
   - Tema escuro: remove a sombra
   ========================================================= */
.logo{
  width:34px; height:34px; border-radius:10px;
  background: url("./assets/img/logo_nc4_fundo_transparente.png") center/contain no-repeat;
  background-color: transparent;

  /* tema claro: efeito sombreado na própria imagem */
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.45));

  /* evita sombra "quadrada" do container */
  box-shadow: none;
}
[data-theme="dark"] .logo{
  filter: none;
}

.menu{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.menu a{color:var(--muted); padding:8px 10px; border-radius:12px;}
.menu a:hover{background:var(--btnbg); color:var(--text)}
.header-actions{display:flex; align-items:center; gap:10px; flex-wrap:wrap}

/* Interatividade somente em elementos clicaveis */
.cta, .btn, .theme-toggle, .quote-float, .wa-float, .logo-chip, .work-actions a {
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.cta:hover, .btn:hover, .theme-toggle:hover, .quote-float:hover, .wa-float:hover, .logo-chip:hover, .work-actions a:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  filter: brightness(1.05);
}

.cta{
  display:inline-flex; align-items:center; gap:10px; padding:10px 14px;
  background: var(--wa); color:#07130b; border-radius:14px;
  font-weight:900; box-shadow: var(--shadow); border: 1px solid rgba(0,0,0,.06);
}
.theme-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:14px; border:1px solid var(--border);
  background: var(--btnbg); cursor:pointer;
}

/* =========================================================
   LÂMPADA AMARELA (AJUSTE)
   ========================================================= */
.theme-toggle svg{
  width:20px; height:20px;
  color:#fbbf24;
}

.hero{padding:54px 0 26px}
.hero-grid{display:grid; grid-template-columns: 1.15fr .85fr; gap:18px; align-items:stretch;}
@media (max-width: 900px){ .hero-grid{grid-template-columns:1fr} }

.card{background: var(--card); border:1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow);}
.card-box{background: var(--card); border:1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow);padding: 22px;}
.hero-left{padding:26px}
.hero-right{padding:18px}
.kicker{color:var(--brand2); font-weight:800; font-size:.95rem}
h1{margin:10px 0 10px; font-size:2.15rem; line-height:1.15}
.subtitle{color:var(--muted); margin:0 0 14px}
.hero-actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:14px}
.btn{display:inline-flex; align-items:center; justify-content:center; padding:10px 14px; border-radius:14px; border:1px solid var(--border); background: var(--btnbg); color:var(--text); font-weight:700; cursor:pointer;}
.btn-wa{background: var(--wa); border-color: rgba(0,0,0,.05); color:#07130b; font-weight:900;}

.badges{display:flex; gap:10px; flex-wrap:wrap; margin-top:12px}
.pill{display:inline-flex; gap:8px; align-items:center; padding:8px 10px; border:1px solid var(--border); border-radius:999px; background: var(--btnbg); color:var(--muted); font-size:.9rem;}
.pill svg{width:16px;height:16px}
.notice{padding:12px 14px; border-radius:16px; border:1px solid var(--border); background:var(--btnbg)}

.section{padding:22px 0}
.section h2{margin:0 0 10px; font-size:1.5rem}
.grid-3{display:grid; grid-template-columns: repeat(3, 1fr); gap:14px;}
@media (max-width: 900px){ .grid-3{grid-template-columns:1fr} }

/* Cards estaveis, sem hover no container (evita pulo e distorcao) */
.feature{
  padding:16px;
  box-shadow: var(--shadow);
  transition: box-shadow .25s ease;
}

.feature h3{margin:10px 0 6px; font-size:1.06rem}
.feature p{margin:0; color:var(--muted)}

.icon{width:42px; height:42px; border-radius:14px; display:flex; align-items:center; justify-content:center; border:1px solid rgba(37,99,235,.18); background: rgba(37,99,235,.10); color: var(--brand);}
.icon svg{width:22px; height:22px}
.icon.icon-ads{ color:#2563eb; background:rgba(37,99,235,.10); border-color:rgba(37,99,235,.18); }
.icon.icon-meta{ color:#7c3aed; background:rgba(124,58,237,.10); border-color:rgba(124,58,237,.18); }
.icon.icon-seo{ color:#16a34a; background:rgba(22,163,74,.10); border-color:rgba(22,163,74,.18); }
.icon.icon-site{ color:#ea580c; background:rgba(234,88,12,.10); border-color:rgba(234,88,12,.18); }
.icon.icon-track{ color:#0ea5e9; background:rgba(14,165,233,.10); border-color:rgba(14,165,233,.18); }

.media{overflow:hidden; border-radius: var(--radius); border:1px solid var(--border); box-shadow: var(--shadow);}
.media img{width:100%; height:260px; object-fit:cover;}
@media (max-width: 900px){ .media img{height:220px} }

.portfolio-head{display:flex; align-items:flex-end; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:12px;}
.search{ width:min(420px, 100%); display:flex; gap:10px; }
.search input{width:100%; padding:10px 12px; border-radius:14px; border:1px solid var(--border); background: var(--btnbg); color:var(--text); outline:none;}

.portfolio-grid{display:grid; grid-template-columns: repeat(3, 1fr); gap:14px;}
@media (max-width: 980px){ .portfolio-grid{grid-template-columns: repeat(2, 1fr);} }
@media (max-width: 640px){ .portfolio-grid{grid-template-columns: 1fr;} }

.work{overflow:hidden}
.thumb{width:100%; aspect-ratio: 16/10; background: var(--btnbg); border-bottom:1px solid var(--border); object-fit:cover;}
.work-body{padding:14px}
.work-title{margin:0 0 4px; font-weight:900}
.work-meta{color:var(--muted); font-size:.92rem; margin:0 0 10px}
.work-actions{display:flex; gap:10px; flex-wrap:wrap}
.favicon{width:22px; height:22px; border-radius:7px; background: var(--btnbg); border:1px solid var(--border);}
.work-head{display:flex; align-items:center; gap:10px; margin-bottom:8px}

.chart{border-radius: var(--radius); border:1px solid var(--border); background: linear-gradient(180deg, rgba(37,99,235,.06), transparent 55%); padding:12px;}

.footer{margin-top:22px; border-top:1px solid var(--border); padding:18px 0 28px; color:var(--muted); font-size:.92rem;}
.footer a{color:var(--muted); text-decoration:underline}

/* Floating Elements */
.wa-float{
  position: fixed; right: 18px; bottom: 18px; z-index: 999;
  width: 56px; height: 56px; border-radius: 18px;
  display:flex; align-items:center; justify-content:center;
  background: var(--wa); color:#07130b; border: 1px solid rgba(0,0,0,.08);
  box-shadow: var(--shadow);
}
.wa-float .wa-pulse{
  position:absolute; inset:-6px; border-radius: 22px;
  border: 2px solid rgba(37, 211, 102, .35);
  animation: waPulse 2.2s ease-out infinite; pointer-events:none;
}
@keyframes waPulse{
  0%{transform:scale(.85); opacity:.0}
  25%{opacity:.55}
  100%{transform:scale(1.15); opacity:0}
}

.quote-float{
  position: fixed; left: 18px; bottom: 18px; z-index: 997; padding: 12px 14px; border-radius: 16px;
  background: linear-gradient(135deg, rgba(37,99,235,.95), rgba(22,163,74,.85));
  color:#071221; border: 1px solid rgba(0,0,0,.08); box-shadow: var(--shadow);
  font-weight: 900; display:inline-flex; align-items:center; gap:10px;
}

/* Modal e LGPD mantidos */
.lgpd-banner{ position: fixed; left: 18px; right: 18px; bottom: 18px; z-index: 998; max-width: 1120px; margin: 0 auto; }
.lgpd-card{ display:flex; gap:12px; align-items:flex-start; justify-content:space-between; padding:14px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--border); box-shadow: var(--shadow); }
.modal{ position:fixed; inset:0; background: rgba(0,0,0,.45); display:none; align-items:center; justify-content:center; padding:18px; z-index: 1000; }
.modal[aria-hidden="false"]{display:flex}
.modal-card{ width:min(760px, 100%); background: var(--card); border:1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow:hidden; }

.logo-chip{ display:inline-flex; align-items:center; gap:10px; padding:10px 12px; border-radius:999px; border:1px solid var(--border); background: var(--btnbg); color:var(--muted); font-size:.92rem; }

.home-float{
  position: fixed; right: 18px; bottom: 92px; z-index: 998; width: 54px; height: 54px; border-radius: 18px;
  background: #ffffff; border: 1px solid rgba(0,0,0,.10); box-shadow: var(--shadow);
  display:flex; align-items:center; justify-content:center; color: #0f172a;
}

/* Form (modal e paginas): grid estavel e alinhado */
.modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 14px;
  border-bottom:1px solid var(--border);
  background: linear-gradient(180deg, rgba(37,99,235,.06), transparent 70%);
}
.modal-body{padding:14px}
.form-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}
@media (max-width: 640px){
  .form-grid{grid-template-columns:1fr}
}
.field label{
  display:block;
  font-weight:800;
  margin:0 0 6px;
  color:var(--muted);
  font-size:.92rem;
}
.field input,
.field select,
.field textarea{
  width:100%;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid var(--border);
  background: var(--btnbg);
  color:var(--text);
  outline:none;
}
.field textarea{min-height:110px; resize:vertical}
.field input:focus,
.field select:focus,
.field textarea:focus{
  border-color: rgba(37,99,235,.45);
  box-shadow: 0 0 0 4px rgba(37,99,235,.12);
}
.modal-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
  margin-top:12px;
}

/* Hover somente para cards marcados como hoverable (sem afetar formulário/modais) */
.card.feature.is-hoverable{
  cursor: pointer;
  transform: translateZ(0);
  will-change: transform, box-shadow, filter;
  transition: transform .22s ease, box-shadow .22s ease, filter .22s ease;
}

.card.feature.is-hoverable:hover{
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(12,18,32,.14);
  filter: brightness(1.02);
}

[data-theme="dark"] .card.feature.is-hoverable:hover{
  box-shadow: 0 16px 40px rgba(0,0,0,.45);
}

/* =================================================
   HOVER SOMENTE PARA CARDS PEQUENOS INTERATIVOS
   ================================================= */

@media (hover: hover) and (pointer: fine) {

  .card-mini{
    transform: translateZ(0);
    will-change: transform, box-shadow;
    transition: transform .22s ease, box-shadow .22s ease;
    cursor: pointer;
  }

  .card-mini:hover{
    transform: translateY(-4px);
    box-shadow: 0 14px 34px rgba(12,18,32,.14);
  }

  [data-theme="dark"] .card-mini:hover{
    box-shadow: 0 16px 40px rgba(0,0,0,.45);
  }
}

/* =========================================================
   CHIPS DE CLIENTES (favicon + texto bem ajustado)
   ========================================================= */

.logo-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}

.logo-chip{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid var(--border);
  background: var(--btnbg);
  color:var(--muted);
  font-size:.95rem;
  line-height:1;
  max-width: 100%;
  white-space: nowrap;
}

.logo-chip img{
  width:20px;
  height:20px;
  border-radius:6px;
  flex:0 0 20px;
}

.logo-chip span{
  overflow:hidden;
  text-overflow:ellipsis;
  max-width: 260px;
}

@media (max-width: 640px){
  .logo-chip span{ max-width: 180px; }
}

/* Ajuste extra: os cards "work" (portfólio) também ficam consistentes */
.work{
  overflow:hidden;
}