/* ============================================================
   SERBA TECH — Modernização Dark-Tech (override do iPortfolio)
   Carregado DEPOIS do main.css. Não altera o template original.
   ============================================================ */

:root {
  --default-font: "Inter", system-ui, sans-serif;
  --heading-font: "Space Grotesk", sans-serif;
  --nav-font: "Space Grotesk", sans-serif;

  --background-color: #070d18;
  --default-color: #c3d0e0;
  --heading-color: #ffffff;
  --accent-color: #22d3ee;         /* cyan Serba Tech */
  --accent-2: #0e7c86;             /* teal */
  --gold: #f5c542;
  --surface-color: #0d1a2b;
  --surface-2: #101f34;
  --contrast-color: #061019;
  --line: rgba(120, 160, 200, .14);
}

/* Alterna o "light-background" para um tom escuro levemente diferente */
.light-background {
  --background-color: #0a1424;
  --surface-color: #0f1e33;
  --default-color: #c3d0e0;
  --heading-color: #ffffff;
}
.dark-background {
  --background-color: #060b14;
  --surface-color: #0d1a2b;
  --default-color: #d5e0ee;
  --heading-color: #ffffff;
  --accent-color: #22d3ee;
}

body {
  background-color: var(--background-color);
  color: var(--default-color);
  background-image:
    radial-gradient(900px 500px at 85% -5%, rgba(34,211,238,.10), transparent 60%),
    radial-gradient(700px 400px at -10% 20%, rgba(14,124,134,.12), transparent 55%);
  background-attachment: fixed;
}

/* Textura de grade sutil global */
.main::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(circle at 50% 30%, #000 0%, transparent 75%);
  opacity: .5;
}

/* ---------- HEADER / SIDEBAR ---------- */
.header {
  background: linear-gradient(180deg, #08111f 0%, #060b14 100%) !important;
  border-right: 1px solid var(--line);
}
.header .logo .sitename,
.header .sitename {
  font-family: var(--heading-font);
  background: linear-gradient(90deg, #ffffff, #22d3ee);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  letter-spacing: .5px;
}
.header .profile-img img {
  border: 3px solid transparent;
  background: linear-gradient(#0b1626,#0b1626) padding-box,
              linear-gradient(135deg, #22d3ee, #0e7c86) border-box;
  box-shadow: 0 0 0 6px rgba(34,211,238,.06), 0 10px 30px rgba(0,0,0,.4);
}
.header .social-links a {
  color: #9fb2c8; border: 1px solid var(--line); border-radius: 10px;
  width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
  margin: 0 4px; transition: .25s;
}
.header .social-links a:hover {
  color: #061019; background: var(--accent-color); border-color: var(--accent-color);
  transform: translateY(-3px); box-shadow: 0 8px 20px rgba(34,211,238,.35);
}
.navmenu a, .navmenu a:focus { font-family: var(--nav-font); color: var(--nav-color); font-weight: 500; }
.navmenu a i { color: var(--accent-color); }
.navmenu a:hover, .navmenu .active, .navmenu .active:focus {
  color: #061019 !important; background: linear-gradient(90deg,#22d3ee,#0e9fb0) !important;
  border-radius: 10px; box-shadow: 0 6px 18px rgba(34,211,238,.28);
}
.navmenu a:hover i, .navmenu .active i { color: #061019 !important; }
.header-toggle { color: var(--accent-color) !important; }

/* ---------- HERO ---------- */
#hero:before { content:""; position:absolute; inset:0; background:
  linear-gradient(180deg, rgba(6,11,20,.72), rgba(6,11,20,.92)); z-index:2; }
#hero img { filter: saturate(1.05) contrast(1.02); opacity:.5; }
#hero .container { position: relative; z-index: 3; }
#hero h2 {
  font-family: var(--heading-font); font-weight: 700; font-size: clamp(2.4rem, 6vw, 4rem);
  background: linear-gradient(90deg, #ffffff 20%, #22d3ee 80%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  text-shadow: 0 0 40px rgba(34,211,238,.25);
}
#hero p { font-family: "JetBrains Mono", monospace; color: #b9c7d8; font-size: 1.05rem; }
#hero p .typed { color: var(--accent-color); font-weight: 600; }
.typed-cursor { color: var(--accent-color); }

/* halo animado no hero */
#hero .container::after {
  content:""; position:absolute; left:50%; top:-40px; transform:translateX(-50%);
  width:520px; height:220px; z-index:-1;
  background: radial-gradient(circle, rgba(34,211,238,.22), transparent 60%);
  filter: blur(20px); animation: pulseGlow 5s ease-in-out infinite;
}
@keyframes pulseGlow { 0%,100%{opacity:.5} 50%{opacity:1} }

/* ---------- SECTION TITLES ---------- */
.section-title h2 {
  font-family: var(--heading-font); color: #fff; position: relative;
  text-transform: none; letter-spacing: .5px;
}
.section-title h2::before {
  content: "// "; font-family: "JetBrains Mono", monospace; color: var(--accent-color); font-weight: 700;
}
.section-title h2::after { background: linear-gradient(90deg,#22d3ee,#0e7c86); height:3px; border-radius:3px; }
.section-title p { color: #9fb0c4; }

/* ---------- ABOUT ---------- */
.about .content h2 { color: #fff; font-family: var(--heading-font); }
.about .content .fst-italic { color: #9fb0c4; }
.about .content ul li { color: var(--default-color); }
.about .content ul strong { color: #fff; }
.about .content i { color: var(--accent-color); }
.about img { border-radius: 16px; box-shadow: 0 20px 50px rgba(0,0,0,.45); border:1px solid var(--line); }

/* ---------- SKILLS ---------- */
.skills .progress { background: transparent; }
.skills .progress .skill { color: #fff; font-family: var(--heading-font); }
.skills .progress .skill .val { color: var(--accent-color); }
.skills .progress-bar-wrap { background: #12233a; border-radius: 20px; }
.skills .progress-bar { background: linear-gradient(90deg,#0e7c86,#22d3ee); border-radius:20px;
  box-shadow: 0 0 16px rgba(34,211,238,.4); }

/* ---------- RESUME ---------- */
.resume .resume-title { color:#fff; font-family: var(--heading-font);
  position: relative; padding-left: 14px; }
.resume .resume-title::before { content:""; position:absolute; left:0; top:2px; bottom:2px; width:4px;
  background: linear-gradient(#22d3ee,#0e7c86); border-radius:4px; }
.resume .resume-item {
  border-left: 2px solid var(--line);
  background: linear-gradient(90deg, rgba(34,211,238,.04), transparent);
  padding: 16px 18px; border-radius: 0 12px 12px 0; margin-bottom: 20px;
}
.resume .resume-item h4 { color: var(--accent-color); font-family: var(--heading-font); text-transform:none; }
.resume .resume-item h5 { background: rgba(34,211,238,.12); color:#bfeff6; font-family:"JetBrains Mono",monospace;
  display:inline-block; padding:3px 10px; border-radius:6px; font-size:12px; }
.resume .resume-item ul li, .resume .resume-item p { color: var(--default-color); }
.resume .resume-item::before { background: var(--accent-color) !important;
  box-shadow: 0 0 0 4px rgba(34,211,238,.18); }

/* ---------- PROJECTS ---------- */
.projects .project-card {
  position: relative; height: 100%; padding: 28px 26px; border-radius: 16px;
  background: linear-gradient(180deg, rgba(19,35,58,.9), rgba(11,22,38,.9));
  border: 1px solid var(--line); overflow: hidden;
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.projects .project-card::before {
  content:""; position:absolute; inset:0; padding:1px; border-radius:16px; pointer-events:none;
  background: linear-gradient(135deg, rgba(34,211,238,.6), transparent 40%, transparent 60%, rgba(14,124,134,.5));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; opacity:.5; transition:.28s;
}
.projects .project-card:hover { transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(0,0,0,.5), 0 0 0 1px rgba(34,211,238,.3);
  border-color: rgba(34,211,238,.45); }
.projects .project-card:hover::before { opacity: 1; }
.projects .project-card .p-icon {
  width: 54px; height: 54px; border-radius: 14px; display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, #0e7c86, #0b3a44); color: #4be3f0; font-size: 25px; margin-bottom: 16px;
  box-shadow: inset 0 0 0 1px rgba(34,211,238,.25), 0 8px 20px rgba(0,0,0,.35);
}
.projects .project-card h4 { font-family: var(--heading-font); font-size: 19px; color:#fff; margin-bottom:6px; }
.projects .project-card .tag {
  display:inline-block; font-family:"JetBrains Mono",monospace; font-size:11px; font-weight:600;
  color:#7fe9f4; background: rgba(34,211,238,.10); border:1px solid rgba(34,211,238,.25);
  border-radius:20px; padding:3px 12px; margin-bottom:12px;
}
.projects .project-card p { font-size:14.5px; color:#9fb0c4; margin:0; line-height:1.6; }
.projects .part-badge {
  display:inline-block; font-family:"JetBrains Mono",monospace; font-size:10px; font-weight:700;
  color:#061019; background: var(--gold); border-radius:6px; padding:1px 7px; margin-left:6px; vertical-align: middle;
}

/* ---------- SERVICES ---------- */
.services .service-item {
  background: linear-gradient(180deg, rgba(15,30,51,.85), rgba(10,20,36,.85));
  border: 1px solid var(--line); border-radius: 16px; padding: 26px; transition:.28s;
}
.services .service-item:hover { transform: translateY(-5px); border-color: rgba(34,211,238,.4);
  box-shadow: 0 16px 36px rgba(0,0,0,.45); }
.services .service-item .icon { background: transparent; }
.services .service-item .icon i {
  width:54px; height:54px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg,#0e7c86,#0b3a44); color:#4be3f0; font-size:24px;
  box-shadow: inset 0 0 0 1px rgba(34,211,238,.25);
}
.services .service-item .title, .services .service-item .title a { color:#fff; font-family:var(--heading-font); }
.services .service-item:hover .title a { color: var(--accent-color); }
.services .service-item .description { color:#9fb0c4; }

/* ---------- CONTACT ---------- */
.contact .info-item {
  background: linear-gradient(180deg, rgba(15,30,51,.85), rgba(10,20,36,.85));
  border:1px solid var(--line); border-radius:14px; padding:18px 20px; margin-bottom:16px;
}
.contact .info-item i { color: var(--accent-color); background: rgba(34,211,238,.1);
  width:48px; height:48px; border-radius:12px; display:flex; align-items:center; justify-content:center; }
.contact .info-item h3 { color:#fff; font-family:var(--heading-font); }
.contact .info-item p { color:#9fb0c4; }
.contact .map-container iframe { border-radius:14px; border:1px solid var(--line) !important; filter: grayscale(.3) invert(.9) hue-rotate(180deg) contrast(.9); }
.wa-cta {
  display:inline-flex; align-items:center; gap:10px; margin-top:6px;
  background: linear-gradient(90deg,#22d3ee,#0e9fb0); color:#061019 !important; font-weight:700;
  font-family:var(--heading-font); padding:12px 22px; border-radius:12px; text-decoration:none; transition:.25s;
  box-shadow: 0 10px 24px rgba(34,211,238,.3);
}
.wa-cta:hover { transform: translateY(-3px); color:#061019 !important; box-shadow:0 14px 30px rgba(34,211,238,.45); }

/* ---------- FOOTER ---------- */
.footer { background: #060b14 !important; border-top:1px solid var(--line); color:#8195ab; }
.footer .copyright, .footer .credits { color:#8195ab; }
.footer .sitename { color: var(--accent-color); }

/* ---------- SCROLL TOP ---------- */
.scroll-top { background: var(--accent-color) !important; }
.scroll-top:hover { background: var(--accent-2) !important; }

/* ---------- NINA SDR — Launcher flutuante ---------- */
#nina-launcher {
  position: fixed; right: 22px; bottom: 22px; z-index: 1000;
  display:flex; align-items:center; gap:10px; cursor:pointer;
  background: linear-gradient(135deg,#22d3ee,#0e7c86); color:#061019;
  font-family: var(--heading-font); font-weight:700; font-size:15px;
  padding: 13px 20px 13px 16px; border-radius: 50px; border:none;
  box-shadow: 0 12px 30px rgba(34,211,238,.4); transition:.25s;
}
#nina-launcher:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(34,211,238,.55); }
#nina-launcher .nina-dot { width:10px; height:10px; border-radius:50%; background:#061019;
  box-shadow:0 0 0 3px rgba(6,16,25,.25); animation: ninaPulse 1.6s infinite; }
@keyframes ninaPulse { 0%,100%{opacity:1} 50%{opacity:.4} }
#nina-launcher .bi { font-size:20px; }

#nina-panel {
  position: fixed; right: 22px; bottom: 88px; z-index: 1000; width: 360px; max-width: calc(100vw - 44px);
  height: 520px; max-height: calc(100vh - 130px); display:none; flex-direction:column; overflow:hidden;
  background: #0c1a2b; border:1px solid rgba(34,211,238,.3); border-radius: 18px;
  box-shadow: 0 24px 60px rgba(0,0,0,.55);
}
#nina-panel.open { display:flex; animation: ninaIn .25s ease; }
@keyframes ninaIn { from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:none} }
#nina-panel .nina-head {
  background: linear-gradient(135deg,#0e7c86,#0b3a44); padding:16px 18px; display:flex; align-items:center; gap:12px;
}
#nina-panel .nina-head .av { width:42px;height:42px;border-radius:50%;
  background: linear-gradient(135deg,#22d3ee,#0e7c86); display:flex; align-items:center; justify-content:center;
  color:#061019; font-size:20px; font-weight:800; font-family:var(--heading-font); }
#nina-panel .nina-head h5 { margin:0; color:#fff; font-family:var(--heading-font); font-size:16px; }
#nina-panel .nina-head span { color:#bfeff6; font-size:12px; font-family:"JetBrains Mono",monospace; }
#nina-panel .nina-head .nina-close { margin-left:auto; color:#fff; background:none; border:none; font-size:22px; cursor:pointer; opacity:.8; }
#nina-panel .nina-body { flex:1; overflow-y:auto; padding:18px; display:flex; flex-direction:column; gap:12px; }
#nina-panel .nina-msg { background:#12233a; color:#d5e0ee; padding:12px 14px; border-radius:14px 14px 14px 4px;
  font-size:14px; max-width:85%; }
#nina-panel .nina-embed { flex:1; border:0; width:100%; height:100%; }
#nina-panel .nina-foot { padding:12px 14px; border-top:1px solid var(--line); }
#nina-panel .nina-foot a { display:block; text-align:center; background:linear-gradient(90deg,#22d3ee,#0e9fb0);
  color:#061019; font-weight:700; font-family:var(--heading-font); padding:11px; border-radius:12px; text-decoration:none; }

/* Responsivo: reduz textura em telas pequenas */
@media (max-width: 768px){
  #nina-launcher span.txt { display:none; }
  #nina-launcher { padding:14px; border-radius:50%; }
}