/* ==========================================================================
   1. CONFIGURAÇÃO GLOBAL E VARIÁVEIS
   ========================================================================== */
:root {
    --bg-color: #121212;
    --bg-secondary: #1E1E1E;
    --nav-bg: #1C1C1E;
    --accent-color: #00FFFF;
    --accent-darker: #00D1D1;
    --text-color: #F2F2F2;
    --text-muted: #A4A4A4;
    --border-color: #333333;
    --project-card-bg: #1C1C1E;
    --font-main: 'Poppins', sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background-color: var(--bg-color); color: var(--text-color); font-family: var(--font-main); overflow-x: hidden; }
#page { flex: 1; }

img { user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; }
.container { max-width: 1100px; margin: 0 auto; padding: 0 20px; }
h2 { font-size: 2.5rem; color: var(--text-color); text-align: center; margin-bottom: 50px; font-weight: 700; }
h2 span { color: var(--accent-color); }


/* ==========================================================================
   3. SEÇÃO PRINCIPAL (LANDING)
   ========================================================================== */
.landing-section { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; height: 80vh; min-height: 500px; padding: 40px 20px; position: relative; background: linear-gradient(180deg, #121212 0%, #0A0A0A 100%); }
.landing-content { animation: fadeInContent 1.5s 0.5s ease-out forwards; opacity: 0; }
@keyframes fadeInContent { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.profile-picture { width: 150px; height: 150px; border-radius: 50%; object-fit: cover; margin: 0 auto 2rem auto; border: 3px solid var(--accent-color); box-shadow: 0 0 25px rgba(0, 255, 255, 0.4); animation: pulse-shadow 4s infinite ease-in-out; }
@keyframes pulse-shadow { 0%, 100% { box-shadow: 0 0 25px rgba(0, 255, 255, 0.4); } 50% { box-shadow: 0 0 40px rgba(0, 255, 255, 0.6); } }
.landing-title { font-size: 3rem; font-weight: 700; color: var(--text-color); margin-bottom: 0.8rem; }
.landing-subtitle { font-size: 1.1rem; color: var(--text-muted); max-width: 500px; margin: 0 auto 2rem auto; line-height: 1.7; }
.social-icons { display: flex; justify-content: center; gap: 25px; }
.social-icons a { position: relative; font-size: 1.5rem; color: var(--text-muted); transition: color 0.3s ease, transform 0.3s ease; }
.social-icons a:hover { color: var(--accent-color); transform: translateY(-4px); }
.scroll-down-indicator { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); width: 26px; height: 42px; border: 2px solid var(--text-muted); border-radius: 20px; opacity: 0; animation: fadeInContent 1.5s 1s ease-out forwards; }
.scroll-down-indicator::before { content: ''; position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 4px; height: 8px; background: var(--text-muted); border-radius: 4px; animation: scroll-wheel-animation 2s infinite ease-in-out; }
@keyframes scroll-wheel-animation { 0% { top: 8px; opacity: 1; } 50% { top: 20px; opacity: 0; } 100% { top: 8px; opacity: 1; } }

.pulsing-text { animation: pulse-and-color-change 4s infinite ease-in-out; }
@keyframes pulse-and-color-change {
    0%, 100% { color: var(--text-color); transform: scale(1); text-shadow: none; }
    50% { color: var(--accent-color); transform: scale(1.05); text-shadow: 0 0 15px rgba(0, 255, 255, 0.5); }
}

.social-icons a::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: -35px;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--bg-secondary);
  color: var(--text-muted);
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, bottom 0.3s ease;
  pointer-events: none;
}
.social-icons a:hover::after { opacity: 1; visibility: visible; bottom: -40px; }

/* ==========================================================================
   4. SEÇÕES PADRÃO E ESPAÇAMENTO
   ========================================================================== */
section { padding: 120px 0; position: relative; z-index: 1; }
#projetos { background-color: var(--bg-color); }
#counters { background-color: var(--bg-secondary); }
.about-contact-section { background-color: var(--bg-color); }
.project-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 30px; }
.project-item { background-color: var(--project-card-bg); border: 1px solid var(--border-color); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; }
.project-card-header { display: flex; align-items: center; gap: 15px; padding: 20px; }
.project-avatar { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.project-header-info { display: flex; flex-direction: column; font-size: 0.8rem; line-height: 1.5; }
.project-header-name { font-size: 1.2rem; font-weight: 600; color: var(--text-color); }
.project-header-handle, .project-header-contact { color: var(--text-muted); }
.project-tag-wrapper { padding: 0 20px 20px 20px; }
.project-item > .project-tag-wrapper { padding-top: 20px; padding-bottom: 0; }
.project-tag { display: inline-block; background-color: #0A0A0A; color: var(--text-color); padding: 8px 15px; border-radius: 20px; font-size: 0.9rem; font-weight: 500; }
.project-image-container { position: relative; height: 180px; overflow: hidden; }
.project-bg-image { width: 100%; height: 100%; object-fit: cover; }
.project-item-content { padding: 25px; flex-grow: 1; display: flex; flex-direction: column; }
.project-item > .project-tag-wrapper + .project-item-content { padding-top: 15px; }
.project-item-content h3 { color: var(--text-color); margin-bottom: 10px; font-size: 1.4rem; }
.project-item-content p { color: var(--text-muted); margin-bottom: 25px; line-height: 1.6; font-size: 0.95rem; flex-grow: 1; }
.project-item-content a { display: inline-block; text-decoration: none; text-align: center; color: #000; background-color: var(--accent-color); padding: 12px 20px; border-radius: 8px; font-weight: 600; transition: background-color 0.3s ease; margin-top: auto; }
.project-item-content a:hover { background-color: var(--accent-darker); }

/* ==========================================================================
   5. SEÇÃO CONTADORES
   ========================================================================== */
#live-timestamp { color: var(--text-muted); text-align: center; margin-top: -30px; margin-bottom: 40px; font-size: 1rem; font-weight: 500; }
#live-timestamp .highlight-date { color: #6fc2d1; font-weight: 600; }

.counter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 25px; justify-content: center; }
.counter-link { text-decoration: none; color: inherit; display: block; }
.counter-box { background-color: var(--project-card-bg); border: 1px solid var(--border-color); border-radius: 12px; padding: 20px; transition: transform 0.3s ease, border-color 0.3s ease; user-select: none; }
.counter-box:hover { transform: translateY(-8px); border-color: var(--accent-color); }
.counter-content { display: flex; align-items: center; gap: 15px; }
.counter-avatar { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.counter-info { display: flex; flex-direction: column; gap: 10px; width: 100%; min-width: 0; }
.counter-username-wrapper { display: flex; align-items: center; gap: 8px; }
.counter-username { font-size: 1.1rem; color: var(--text-color); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.counter-username-wrapper i { margin-left: auto; font-size: 1.2rem; color: var(--text-muted); }
.youtube-box .fa-youtube { color: #FF0000; }
.instagram-box .fa-instagram { color: #E1306C; }
.tiktok-box .fa-tiktok { color: #FFFFFF; }
.verified-badge { width: 16px; height: 16px; flex-shrink: 0; }
.youtube-verified-badge { display: inline-block; width: 16px; height: 16px; background-color: #888; border-radius: 50%; position: relative; flex-shrink: 0; }
.youtube-verified-badge::after { content: ''; position: absolute; left: 5px; top: 2px; width: 4px; height: 7px; border: solid #1E1E1E; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.iframe-container { filter: invert(1); width: 100%; height: 45px; overflow: hidden; position: relative; border-radius: 8px; pointer-events: none; }
.iframe-container iframe { position: absolute; top: -22px; left: -33px; width: 400px; height: 160px; transform: scale(1.5); mix-blend-mode: mask; filter: brightness(1.2) contrast(2); }
.instagram-box .iframe-container iframe { top: -29px; left: -45px; width: 400px; height: 160px; transform: scale(1.4); }

/* ==========================================================================
   7. LAYOUT SOBRE & CONTATO
   ========================================================================== */
.about-contact-grid { display: grid; grid-template-columns: 1fr; gap: 60px; align-items: flex-start; }

/* ── JANELA STATUS ANIME/RPG ─────────────────────────────────────────────── */
.sobre {
  text-align: center;
  display: flex;
  justify-content: center;
}

.sobre .status-window {
  position: relative;
  background: linear-gradient(170deg, #050d0d 0%, #081212 60%, #040e0e 100%);
  border: 1px solid rgba(0,255,255,0.5);
  border-radius: 3px;
  overflow: visible; /* IMPORTANTE: precisa ser visible para os raios saírem */
  box-shadow:
    0 0 0 1px rgba(0,255,255,0.08),
    0 0 50px rgba(0,255,255,0.06),
    inset 0 0 60px rgba(0,0,0,0.7);
  width: 100%;
  max-width: 360px;
  font-family: 'Rajdhani', 'Poppins', sans-serif;
  transition: box-shadow 0.4s ease, border-color 0.4s ease;
  cursor: default;
  isolation: isolate;
}

/* Clip interno para conteúdo que precisa respeitar borda */
.status-window-inner {
  overflow: hidden;
  border-radius: 3px;
  position: relative;
  z-index: 1;
}

.sobre .status-window:hover {
  border-color: rgba(0,255,255,0.9);
  box-shadow:
    0 0 0 1px rgba(0,255,255,0.2),
    0 0 30px rgba(0,255,255,0.35),
    0 0 80px rgba(0,255,255,0.15),
    0 0 140px rgba(0,255,255,0.08),
    inset 0 0 40px rgba(0,255,255,0.03);
}

/* Cantos decorativos */
.status-window::before,
.status-window::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  border-color: #00FFFF;
  border-style: solid;
  z-index: 2;
  transition: width 0.4s ease, height 0.4s ease;
}
.status-window::before { top: -1px; left: -1px; border-width: 2px 0 0 2px; }
.status-window::after  { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; }
.status-window:hover::before,
.status-window:hover::after { width: 22px; height: 22px; }

/* ── RAIOS ELÉTRICOS (CANVAS) ───────────────────────────────────────────── */
.lightning-canvas {
  position: absolute;
  top: -60px;
  left: -60px;
  width: calc(100% + 120px);
  height: calc(100% + 120px);
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.status-window:hover .lightning-canvas {
  opacity: 1;
}

/* Runas de canto */
.rune {
  position: absolute;
  color: rgba(0,255,255,0.15);
  font-size: 0.65rem;
  z-index: 3;
  transition: color 0.4s ease, transform 0.4s ease;
  pointer-events: none;
}
.rune-tl { top: 18px; left: 18px; transform: rotate(0deg); }
.rune-tr { top: 18px; right: 18px; transform: rotate(90deg); }
.rune-bl { bottom: 18px; left: 18px; transform: rotate(270deg); }
.rune-br { bottom: 18px; right: 18px; transform: rotate(180deg); }
.status-window:hover .rune { color: rgba(0,255,255,0.55); }
.status-window:hover .rune-tl { transform: rotate(-15deg); }
.status-window:hover .rune-tr { transform: rotate(105deg); }
.status-window:hover .rune-bl { transform: rotate(255deg); }
.status-window:hover .rune-br { transform: rotate(195deg); }

/* Scan line */
.scan-line {
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(0,255,255,0.3), transparent);
  z-index: 10;
  pointer-events: none;
  animation: scan 6s linear infinite;
}
@keyframes scan {
  0%   { top: -5%; opacity: 0; }
  5%   { opacity: 1; }
  95%  { opacity: 0.5; }
  100% { top: 105%; opacity: 0; }
}

/* Runa central (aparece no hover) */
.center-rune-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.status-window:hover .center-rune-overlay { opacity: 1; }
.center-rune-svg {
  width: 200px;
  height: 200px;
  animation: rune-spin-slow 20s linear infinite;
}
@keyframes rune-spin-slow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* Header */
.status-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(90deg, rgba(0,255,255,0.12) 0%, rgba(0,255,255,0.03) 100%);
  border-bottom: 1px solid rgba(0,255,255,0.35);
  padding: 8px 14px;
  position: relative;
  z-index: 2;
}
.status-header-left { display: flex; align-items: center; gap: 8px; }
.status-blink { color: #00FFFF; font-size: 0.85rem; animation: status-blink 1.5s infinite; }
@keyframes status-blink { 0%,100% { opacity: 1; } 50% { opacity: 0.15; } }
.status-title-text {
  color: #00FFFF;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 6px;
  text-shadow: 0 0 12px rgba(0,255,255,0.7);
}
.status-header-right { display: flex; gap: 8px; }
.win-btn { color: rgba(0,255,255,0.4); font-size: 0.8rem; cursor: default; }

/* Identidade */
.status-identity {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 16px 12px;
  position: relative;
  z-index: 2;
}

/* Avatar */
.status-avatar-wrap { position: relative; flex-shrink: 0; }
.status-avatar {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #00FFFF;
  box-shadow: 0 0 16px rgba(0,255,255,0.3);
  display: block;
  position: relative;
  z-index: 1;
  transition: box-shadow 0.4s ease, transform 0.4s ease;
}
.status-window:hover .status-avatar {
  box-shadow: 0 0 30px rgba(0,255,255,0.6), 0 0 60px rgba(0,255,255,0.2);
  transform: scale(1.05);
}

.status-avatar-ring {
  position: absolute;
  top: -5px; left: -5px;
  width: calc(100% + 10px);
  height: calc(100% + 10px);
  border-radius: 50%;
  border: 1px solid rgba(0,255,255,0.25);
  animation: ring-spin 8s linear infinite;
}
.ring-2 {
  top: -10px; left: -10px;
  width: calc(100% + 20px);
  height: calc(100% + 20px);
  border: 1px dashed rgba(0,255,255,0.1);
  animation: ring-spin 14s linear infinite reverse;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.status-window:hover .ring-2 { opacity: 1; }
@keyframes ring-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* Orbs mágicos orbitais */
.magic-orb {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #00FFFF;
  box-shadow: 0 0 6px #00FFFF, 0 0 12px rgba(0,255,255,0.5);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: 3;
  top: 50%; left: 50%;
}
.status-window:hover .magic-orb { opacity: 1; }
.orb-1 { animation: orbit-1 3s linear infinite; }
.orb-2 { animation: orbit-2 4.5s linear infinite; animation-delay: -1.5s; }
.orb-3 { animation: orbit-3 3.8s linear infinite; animation-delay: -0.8s; }
@keyframes orbit-1 {
  from { transform: translate(-50%,-50%) rotate(0deg) translateX(42px); }
  to   { transform: translate(-50%,-50%) rotate(360deg) translateX(42px); }
}
@keyframes orbit-2 {
  from { transform: translate(-50%,-50%) rotate(120deg) translateX(50px); }
  to   { transform: translate(-50%,-50%) rotate(480deg) translateX(50px); }
}
@keyframes orbit-3 {
  from { transform: translate(-50%,-50%) rotate(240deg) translateX(38px); }
  to   { transform: translate(-50%,-50%) rotate(600deg) translateX(38px); }
}

/* Info de identidade */
.status-id-info { display: flex; flex-direction: column; gap: 5px; min-width: 0; width: 100%; }
.status-name-row { display: flex; flex-direction: column; gap: 1px; }
.status-label { color: rgba(0,255,255,0.45); font-size: 0.6rem; font-weight: 700; letter-spacing: 3px; }
.status-value { color: #e8f8f8; font-size: 0.95rem; font-weight: 700; letter-spacing: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.status-value.small { font-size: 0.78rem; color: rgba(232,248,248,0.75); font-weight: 500; }

/* Glitch no título */
.status-value.accent {
  color: #00FFFF;
  text-shadow: 0 0 10px rgba(0,255,255,0.5);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 1px;
  position: relative;
}
.glitch-text { animation: glitch-idle 8s infinite; }
@keyframes glitch-idle {
  0%, 92%, 100% { text-shadow: 0 0 10px rgba(0,255,255,0.5); transform: none; }
  93% { text-shadow: -2px 0 #ff00ff, 2px 0 #00ffff; transform: translate(-1px, 0); }
  94% { text-shadow: 2px 0 #ff00ff, -2px 0 #00ffff; transform: translate(1px, 0); }
  95% { text-shadow: 0 0 10px rgba(0,255,255,0.5); transform: none; }
  96% { text-shadow: -1px 0 #ff00ff; transform: translate(-1px, 1px); }
  97% { text-shadow: 0 0 10px rgba(0,255,255,0.5); transform: none; }
}
.status-window:hover .glitch-text { animation: glitch-hover 0.4s steps(1) infinite; }
@keyframes glitch-hover {
  0%   { text-shadow: -2px 0 #ff00ff, 2px 0 #00ffff; transform: translate(-1px, 0); }
  25%  { text-shadow: 2px 0 #ff00ff, -2px 0 #00ffff; transform: translate(1px, 0); }
  50%  { text-shadow: 0 0 10px rgba(0,255,255,0.7); transform: none; }
  75%  { text-shadow: -1px 1px #ff00ff; transform: translate(0, -1px); }
  100% { text-shadow: 1px -1px #00ffff; transform: translate(1px, 1px); }
}

/* ── LEVEL COM BARRA SEGMENTADA ────────────────────────────────────────── */
.level-value-col {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 100%;
  min-width: 0;
}
.level-top-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.level-num {
  color: #00FFFF;
  font-family: 'Rajdhani', monospace;
  font-size: 1rem;
  font-weight: 900;
  text-shadow: 0 0 12px rgba(0,255,255,0.8);
  animation: level-pulse 3s ease-in-out infinite;
  letter-spacing: 1px;
}
@keyframes level-pulse {
  0%,100% { text-shadow: 0 0 8px rgba(0,255,255,0.6); }
  50%      { text-shadow: 0 0 20px rgba(0,255,255,1), 0 0 40px rgba(0,255,255,0.4); }
}
.level-next {
  color: rgba(0,255,255,0.35);
  font-family: 'Rajdhani', monospace;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 1px;
  white-space: nowrap;
}

/* Barra segmentada do level */
.level-seg-wrap {
  position: relative;
  height: 8px;
  width: 100%;
}
.level-seg-track {
  width: 100%;
  height: 100%;
  background: rgba(0,255,255,0.07);
  border: 1px solid rgba(0,255,255,0.15);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}
.level-seg-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #006666 0%, #00cccc 70%, #00FFFF 100%);
  border-radius: 1px;
  position: relative;
  transition: width 1.8s cubic-bezier(.4,0,.2,1);
  box-shadow: 0 0 8px rgba(0,255,255,0.4);
}
.level-seg-fill::after {
  content: '';
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 8px;
  background: rgba(255,255,255,0.85);
  filter: blur(2px);
  border-radius: 2px;
  animation: tip-pulse 1.5s ease-in-out infinite;
}
@keyframes tip-pulse {
  0%,100% { opacity: 0.7; }
  50%      { opacity: 1; }
}
.level-seg-marks {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  display: flex;
  pointer-events: none;
}
.level-seg-marks span { flex: 1; border-right: 1px solid rgba(0,0,0,0.5); }
.level-seg-marks span:last-child { border-right: none; }

/* Divisor */
.status-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,255,255,0.4), transparent);
  margin: 0 14px;
  position: relative;
  z-index: 2;
}

/* ── STATS TEXTO RPG — FORMATO X/100 ───────────────────────────────────── */
.status-stats-grid {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  z-index: 2;
}

.status-section-tag--stats {
  display: block;
  margin-bottom: 4px;
}

.stats-text-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 12px;
}

.stat-text-item {
  display: flex;
  flex-direction: column;
  gap: 1px;
  cursor: default;
  transition: transform 0.2s ease;
}
.stat-text-item:hover { transform: translateX(2px); }

.stat-text-label {
  font-family: 'Rajdhani', monospace;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 2px;
  color: rgba(160, 164, 164, 0.75);
  text-transform: uppercase;
}

/* Linha de valor com o formato X/100 */
.stat-val-row {
  display: flex;
  align-items: baseline;
  gap: 2px;
  line-height: 1;
}

.stat-text-val {
  font-family: 'Rajdhani', monospace;
  font-size: 1.25rem;
  font-weight: 900;
  color: #00FFFF;
  text-shadow: 0 0 10px rgba(0,255,255,0.55);
  letter-spacing: 1px;
  transition: text-shadow 0.3s ease;
}

.stat-max {
  font-family: 'Rajdhani', monospace;
  font-size: 0.7rem;
  font-weight: 700;
  color: rgba(0, 255, 255, 0.35);
  letter-spacing: 1px;
  transition: color 0.3s ease;
}

.stat-text-item:hover .stat-text-val {
  text-shadow: 0 0 18px rgba(0,255,255,1), 0 0 30px rgba(0,255,255,0.4);
}
.stat-text-item:hover .stat-text-label {
  color: rgba(200, 210, 210, 0.9);
}
.stat-text-item:hover .stat-max {
  color: rgba(0, 255, 255, 0.6);
}

/* ── BIO ─────────────────────────────────────────────────────────────────── */
.status-bio-section { padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; position: relative; z-index: 2; }
.status-section-tag { color: #00FFFF; font-size: 0.65rem; letter-spacing: 3px; font-weight: 700; opacity: 0.8; }
.status-bio-text { color: rgba(232,248,248,0.62); font-size: 0.82rem; line-height: 1.75; font-family: 'Poppins', sans-serif; font-weight: 400; text-align: left; }

/* ── HABILIDADES ─────────────────────────────────────────────────────────── */
.status-skills-section { padding: 14px 16px 20px; display: flex; flex-direction: column; gap: 10px; position: relative; z-index: 2; }
.status-skills-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.skill-badge {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, rgba(0,255,255,0.04) 0%, rgba(0,255,255,0.08) 100%);
  border: 1px solid rgba(0,255,255,0.2);
  border-radius: 4px;
  padding: 8px 10px;
  overflow: hidden;
  cursor: default;
  transition: border-color 0.3s, transform 0.25s, box-shadow 0.3s;
}
.skill-badge:hover {
  border-color: rgba(0,255,255,0.7);
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(0,255,255,0.15), inset 0 0 12px rgba(0,255,255,0.04);
}
.skill-badge::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,255,255,0.5), transparent);
  opacity: 0;
  transition: opacity 0.3s;
}
.skill-badge:hover::before { opacity: 1; }

.skill-icon {
  font-size: 1rem;
  color: #00FFFF;
  text-shadow: 0 0 8px rgba(0,255,255,0.6);
  flex-shrink: 0;
  transition: text-shadow 0.3s, transform 0.3s;
}
.skill-badge:hover .skill-icon {
  text-shadow: 0 0 16px rgba(0,255,255,1);
  transform: scale(1.2) rotate(-5deg);
}
.skill-name {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: rgba(232,248,248,0.8);
  text-transform: uppercase;
  transition: color 0.3s;
}
.skill-badge:hover .skill-name { color: #fff; }

.skill-glow {
  position: absolute;
  top: 0; left: -80%;
  width: 60%;
  height: 100%;
  background: linear-gradient(105deg, transparent, rgba(0,255,255,0.12), transparent);
  transform: skewX(-15deg);
  transition: left 0.5s ease;
  pointer-events: none;
}
.skill-badge:hover .skill-glow { left: 160%; }

/* ── PARTÍCULAS ──────────────────────────────────────────────────────────── */
.status-particles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.status-particles span {
  position: absolute;
  width: 1.5px;
  height: 1.5px;
  background: #00FFFF;
  border-radius: 50%;
  opacity: 0;
  animation: float-particle 7s infinite;
}
.status-particles span:nth-child(1) { left: 8%;  animation-delay: 0s; }
.status-particles span:nth-child(2) { left: 18%; animation-delay: 0.8s; }
.status-particles span:nth-child(3) { left: 28%; animation-delay: 1.4s; }
.status-particles span:nth-child(4) { left: 40%; animation-delay: 2s; }
.status-particles span:nth-child(5) { left: 52%; animation-delay: 2.8s; }
.status-particles span:nth-child(6) { left: 64%; animation-delay: 1.1s; }
.status-particles span:nth-child(7) { left: 78%; animation-delay: 3.3s; }
.status-particles span:nth-child(8) { left: 91%; animation-delay: 0.4s; }
@keyframes float-particle {
  0%   { bottom: 0; opacity: 0; }
  10%  { opacity: 0.8; }
  80%  { opacity: 0.3; }
  100% { bottom: 100%; opacity: 0; }
}

/* ── CANVAS DE RAIOS NO FUNDO ────────────────────────────────────────────── */
#bg-lightning-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity 0.4s ease;
}
#bg-lightning-canvas.active {
  opacity: 1;
}
.about-contact-section {
  position: relative;
  overflow: hidden;
}
.about-contact-grid {
  position: relative;
  z-index: 1;
}

/* ── CONTATO ─────────────────────────────────────────────────────────────── */
.contact-section .form-title { text-align: left; margin-bottom: 10px; }
.contact-section .form-subtitle { text-align: left; color: var(--text-muted); margin-bottom: 30px; }
.contact-form { display: flex; flex-direction: column; gap: 20px; }
.form-group input, .form-group textarea { width: 100%; padding: 15px; font-size: 1rem; background-color: var(--bg-secondary); border: 1px solid var(--border-color); color: var(--text-color); border-radius: 8px; transition: border-color 0.3s ease, box-shadow 0.3s ease; font-family: var(--font-main); }
.form-group input::placeholder, .form-group textarea::placeholder { color: var(--text-muted); }
.form-group input:focus, .form-group textarea:focus { outline: none; border-color: var(--accent-color); box-shadow: 0 0 10px rgba(0, 255, 255, 0.2); }
.form-group textarea { min-height: 150px; resize: vertical; }
.submit-btn { background-color: var(--accent-color); color: #000; border: none; padding: 15px 25px; font-size: 1rem; font-weight: 600; cursor: pointer; border-radius: 8px; transition: background-color 0.3s ease; }
.submit-btn:hover { background-color: var(--accent-darker); }
.discord-contact-link { text-align: center; margin-top: 30px; color: var(--text-muted); }
.discord-contact-link a { color: var(--text-color); font-weight: 600; text-decoration: none; transition: color 0.3s; }
.discord-contact-link a:hover { color: var(--accent-color); }
.discord-contact-link i { color: #7289DA; margin-left: 5px; }

/* ==========================================================================
   10. FOOTER E UTILITÁRIOS
   ========================================================================== */
.verified-icon { width: 20px; height: 20px; }
.verified-icon path { fill: var(--accent-color); }
#back-to-top { position: fixed; bottom: -50px; right: 20px; width: 45px; height: 45px; background-color: var(--accent-color); color: #000; border-radius: 50%; display: flex; justify-content: center; align-items: center; box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3); z-index: 1001; transition: bottom 0.4s ease, background-color 0.3s ease, transform 0.3s ease; visibility: hidden; }
#back-to-top.visible { bottom: 20px; visibility: visible; }
#back-to-top:hover { background-color: var(--accent-darker); transform: scale(1.1); }
.tooltip-feedback { position: absolute; bottom: 120%; left: 50%; transform: translateX(-50%); background-color: var(--accent-color); color: var(--bg-color); padding: 6px 12px; border-radius: 8px; font-size: 0.9rem; font-weight: 600; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease, bottom 0.3s ease; white-space: nowrap; z-index: 10; }
.tooltip-feedback.visible { opacity: 1; visibility: visible; bottom: 130%; }

/* ==========================================================================
   12. RESPONSIVIDADE
   ========================================================================== */
@media (min-width: 992px) {
    .about-contact-grid { grid-template-columns: 1fr 1fr; }
    .sobre .status-window { max-width: 360px; margin: 0 auto; }
}
@media (max-width: 991px) {
    .hamburger-btn { background: none; border: 1px solid var(--border-color); color: var(--text-muted); width: 40px; height: 40px; border-radius: 8px; font-size: 1.2rem; cursor: pointer; transition: color 0.3s, border-color 0.3s; }
    .hamburger-btn:hover { color: var(--text-color); border-color: var(--accent-color); }
    .mobile-menu-panel { display: block; position: fixed; top: 0; right: 0; width: 280px; height: 100%; background-color: var(--project-card-bg); z-index: 1001; transform: translateX(100%); transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1); padding: 20px; border-left: 1px solid var(--border-color); }
    .mobile-menu-panel.is-open { transform: translateX(0); }
    .close-menu-btn { background: none; border: none; color: var(--text-muted); font-size: 1.5rem; position: absolute; top: 20px; right: 20px; cursor: pointer; }
    .mobile-menu-panel ul { list-style: none; margin-top: 80px; }
    .mobile-menu-panel ul li a { display: flex; align-items: center; gap: 15px; padding: 15px; text-decoration: none; color: var(--text-muted); font-size: 1.1rem; font-weight: 500; border-radius: 8px; transition: color 0.3s, background-color 0.3s; }
    .mobile-menu-panel ul li a:hover { background-color: var(--bg-secondary); color: var(--text-color); } 
}
@media (max-width: 768px) {
    section { padding: 100px 0; }
    h2 { font-size: 2rem; }
    .profile-picture { width: 120px; height: 120px; }
    .landing-title { font-size: 2.2rem; }
    .landing-subtitle { font-size: 1rem; }
    .contact-section .form-title, .contact-section .form-subtitle { text-align: center; }
}
@media (max-width: 480px) {
    .profile-picture { width: 100px; height: 100px; }
    .landing-title { font-size: 1.8rem; }
    .landing-subtitle { font-size: 0.9rem; }
    .project-grid { grid-template-columns: 1fr; }
}