/*=====================================================================
  PORTFÓLIO LEVY ANDRADE — STYLE.CSS
  Dark Mode Cyberpunk | Roxo Neon | Refatorado
======================================================================*/

/* ─── RESET ─────────────────────────────────────────────────────── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;font-size:16px;-webkit-text-size-adjust:100%;}
body{min-height:100vh;overflow-x:hidden;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
img{display:block;max-width:100%;height:auto;}
svg,picture{display:block;}
button{border:none;outline:none;background:none;cursor:pointer;font-family:inherit;}
input,textarea,select{border:none;outline:none;font-family:inherit;background:none;}
textarea{resize:none;}
a{text-decoration:none;color:inherit;}
ul,ol{list-style:none;}
table{border-collapse:collapse;}
iframe,fieldset{border:none;}
::placeholder{color:inherit;}
hr{border:none;}

/* ─── CSS VARIABLES ─────────────────────────────────────────────── */
:root{
  --primary:#8b5cf6;
  --primary-light:#a855f7;
  --primary-dark:#6d28d9;
  --secondary:#c084fc;
  --accent:#9333ea;
  --white:#ffffff;
  --black:#000000;
  --gray-400:#a1a1aa;
  --gray-500:#71717a;
  --gray-600:#52525b;
  --gray-700:#3f3f46;
  --gray-800:#27272a;
  --gray-900:#18181b;
  --dark:#09090b;
  --dark-2:#0f0f12;
  --dark-3:#13131a;
  --dark-4:#18181f;
  --success:#22c55e;
  --warning:#facc15;
  --body-bg:#09090b;
  --surface:#121218;
  --surface-2:#181820;
  --surface-3:#1f1f28;
  --glass:rgba(255,255,255,.04);
  --glass-border:rgba(255,255,255,.08);
  --text-primary:#ffffff;
  --text-secondary:#d4d4d8;
  --text-muted:#8b8b95;
  --gradient-primary:linear-gradient(135deg,#6d28d9 0%,#9333ea 40%,#a855f7 100%);
  --glow-sm:0 0 10px rgba(139,92,246,.35);
  --glow-md:0 0 20px rgba(139,92,246,.45);
  --glow-lg:0 0 40px rgba(139,92,246,.60);
  --glow-xl:0 0 80px rgba(139,92,246,.75);
  --shadow-sm:0 8px 20px rgba(0,0,0,.20);
  --shadow-md:0 12px 40px rgba(0,0,0,.30);
  --shadow-lg:0 20px 60px rgba(0,0,0,.45);
  --border:1px solid rgba(255,255,255,.08);
  --border-purple:1px solid rgba(168,85,247,.35);
  --radius-xs:6px;
  --radius-sm:12px;
  --radius-md:18px;
  --radius-lg:24px;
  --radius-pill:999px;
  --font-title:"Syne",sans-serif;
  --font-body:"Inter",sans-serif;
  --font-code:"JetBrains Mono",monospace;
  --transition-fast:.2s ease;
  --transition:.35s ease;
  --transition-slow:.55s ease;
  --container:1380px;
  --section-gap:140px;
}

/* ─── LIGHT MODE ────────────────────────────────────────────────── */
[data-theme="light"]{
  --body-bg:#ffffff;
  --surface:#ffffff;
  --surface-2:#fafafa;
  --surface-3:#ffffff;
  --glass:rgba(255,255,255,.70);
  --glass-border:rgba(0,0,0,.08);
  --text-primary:#4e4e4e;
  --text-secondary:#575757;
  --text-muted:#6b7280;
  --shadow-sm:0 8px 30px rgba(0,0,0,.08);
  --shadow-md:0 12px 40px rgba(0,0,0,.10);
  --shadow-lg:0 20px 60px rgba(0,0,0,.15);
}

/* ─── LIGHT MODE — Correções de contraste em textos hardcoded ───── */

/* Skill cards: h3 e p usam color:#fff fixo — precisa escurecer */
[data-theme="light"] .skill-card h3 {
  color: #111116;
}
[data-theme="light"] .skill-card p {
  color: #374151;
}

/* Skills: card rodapé ("Evolução Contínua") */
[data-theme="light"] .skills-footer-card h3 {
  color: #111116;
}
[data-theme="light"] .skills-footer-card p {
  color: #374151;
}

/* About-stat (seção Sobre e Zyntek): h4 usa color:#fff fixo */
[data-theme="light"] .about-stat h4 {
  color: #111116;
}

/* Formação — highlight card */
[data-theme="light"] .edu-highlight-card h3 {
  color: #111116;
}

/* Contato — título do card e formulário */
[data-theme="light"] .contact-card-title {
  color: #111116;
}
[data-theme="light"] .form-group label {
  color: #374151;
}
[data-theme="light"] .form-input-wrapper input,
[data-theme="light"] .form-input-wrapper textarea {
  color: #111116;
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(139, 92, 246, 0.35);
}
[data-theme="light"] .form-input-wrapper input::placeholder,
[data-theme="light"] .form-input-wrapper textarea::placeholder {
  color: rgba(0, 0, 0, 0.35);
}

/* Hub digital — cabeçalho e ícone GitHub */
[data-theme="light"] .social-hub-header h3 {
  color: #111116;
}
[data-theme="light"] .social-icon-github {
  color: #111116;
}

/* Botão secundário: fundo semitransparente escuro vira quase branco em light */
[data-theme="light"] .btn-secondary {
  background: rgba(139, 92, 246, 0.08);
  color: var(--primary-dark);
  border-color: rgba(139, 92, 246, 0.45);
}
[data-theme="light"] .btn-secondary:hover {
  background: var(--gradient-primary);
  color: #fff;
  border-color: transparent;
}

/* Terminal JSON (seção Sobre): color:#fff no pre */
[data-theme="light"] .t-json {
  color: #111116;
}
[data-theme="light"] .tj-key {
  color: #6d28d9;
}
[data-theme="light"] .tj-str {
  color: #16a34a;
}
[data-theme="light"] .t-output {
  color: #374151;
}
[data-theme="light"] .t-online {
  color: #15803d;
  text-shadow: none;
}

/* Card de skill com --skill-color:#ffffff (GitHub):
   O ícone branco fica invisível no fundo claro */
[data-theme="light"] .skill-card[style*="--skill-color:#ffffff"] .skill-logo img,
[data-theme="light"] .skill-card[style*="--skill-color: #ffffff"] .skill-logo img {
  filter: invert(1) brightness(0.15);
}

/* ─── BODY ───────────────────────────────────────────────────────── */
body{
  background:var(--body-bg);
  color:var(--text-primary);
  font-family:var(--font-body);
  font-weight:400;
  line-height:1.7;
  transition:background .4s ease,color .4s ease;
}

/* ─── TYPOGRAPHY ────────────────────────────────────────────────── */
h1,h2,h3,h4,h5,h6{font-family:var(--font-title);color:var(--text-primary);font-weight:700;line-height:1.1;}
p{color:var(--text-secondary);font-size:1rem;line-height:1.8;}
code,pre,.terminal-body{font-family:var(--font-code);}
strong{font-weight:700;}

/* ─── SELECTION ─────────────────────────────────────────────────── */
::selection{background:var(--primary);color:#fff;}
::-moz-selection{background:var(--primary);color:#fff;}

/* ─── SCROLLBAR ─────────────────────────────────────────────────── */
::-webkit-scrollbar{width:8px;}
::-webkit-scrollbar-track{background:#0d0d11;}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#6d28d9,#a855f7);border-radius:999px;}
::-webkit-scrollbar-thumb:hover{background:#c084fc;}

/* ─── GLOBAL UTILITIES ──────────────────────────────────────────── */
.container{width:min(100% - 48px,var(--container));margin-inline:auto;}
.section{position:relative;padding:var(--section-gap) 0;}
.hl{color:var(--primary-light);font-weight:700;}
.text-gradient{background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}

/* ─── GLOBAL OVERFLOW-X GUARD ───────────────────────────────────── */
html, body { overflow-x: hidden; }
#app { overflow-x: hidden; }

/* ─── NOISE OVERLAY ─────────────────────────────────────────────── */
.noise-overlay{position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.025;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");background-size:200px;}
.particles-background{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden;}

/* ─── PRELOADER ─────────────────────────────────────────────────── */
.preloader{position:fixed;inset:0;background:var(--dark);z-index:9999;display:flex;align-items:center;justify-content:center;transition:opacity .6s ease,visibility .6s ease;}
.preloader.hide{opacity:0;visibility:hidden;}
.preloader-wrapper{text-align:center;display:flex;flex-direction:column;align-items:center;gap:24px;}
.preloader-logo{display:flex;align-items:center;gap:10px;}
.preloader-code{font-family:var(--font-code);font-size:2rem;color:var(--primary-light);font-weight:700;}
.preloader-name{font-family:var(--font-title);font-size:1.5rem;color:var(--text-primary);font-weight:700;letter-spacing:.04em;}
.preloader-bar{width:280px;height:3px;background:rgba(255,255,255,.08);border-radius:999px;overflow:hidden;}
.preloader-fill{height:100%;width:0%;background:var(--gradient-primary);border-radius:999px;transition:width .1s linear;}
.preloader-status{display:flex;align-items:center;gap:16px;font-family:var(--font-code);font-size:.75rem;color:var(--text-muted);}

/* ─── CURSOR ────────────────────────────────────────────────────── */
.cursor-dot{width:8px;height:8px;background:var(--primary-light);border-radius:50%;position:fixed;pointer-events:none;z-index:9998;transform:translate(-50%,-50%);transition:transform .1s ease,opacity .2s ease;}
.cursor-outline{width:36px;height:36px;border:1.5px solid rgba(139,92,246,.5);border-radius:50%;position:fixed;pointer-events:none;z-index:9997;transform:translate(-50%,-50%);transition:transform .12s ease,width .2s ease,height .2s ease,border-color .2s ease;}
@media(hover:none){.cursor-dot,.cursor-outline{display:none;}}

/* ─── FLOATING WHATSAPP ─────────────────────────────────────────── */
.floating-whatsapp{position:fixed;bottom:28px;right:28px;z-index:999;width:58px;height:58px;background:var(--gradient-primary);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.6rem;color:#fff;box-shadow:0 8px 30px rgba(139,92,246,.45);transition:transform .3s ease,box-shadow .3s ease;border:1px solid rgba(168,85,247,.4);}
.floating-whatsapp:hover{transform:scale(1.12) translateY(-3px);box-shadow:var(--glow-xl);}
.float-tooltip{position:absolute;right:68px;background:var(--surface-2);border:var(--border-purple);color:var(--primary-light);padding:6px 14px;border-radius:var(--radius-sm);font-size:.8rem;font-weight:600;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .25s ease;font-family:var(--font-code);}
.floating-whatsapp:hover .float-tooltip{opacity:1;}

/* ─── SCROLL TOP ────────────────────────────────────────────────── */
.scroll-top-btn{position:fixed;bottom:96px;right:28px;z-index:998;width:44px;height:44px;background:var(--surface);border:var(--border-purple);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-size:1.1rem;color:var(--primary-light);box-shadow:var(--glow-sm);opacity:0;visibility:hidden;transform:translateY(12px);transition:all .3s ease;}
.scroll-top-btn.visible{opacity:1;visibility:visible;transform:translateY(0);}
.scroll-top-btn:hover{background:var(--primary);color:#fff;box-shadow:var(--glow-md);}

/* ─── SECTION PILL (MARCADOR) ───────────────────────────────────── */
.section-pill{display:inline-block;font-family:var(--font-code);font-size:.78rem;font-weight:600;letter-spacing:.12em;color:var(--primary-light);background:rgba(139,92,246,.12);border:var(--border-purple);border-radius:var(--radius-pill);padding:6px 20px;margin-bottom:20px;}
.section-header{text-align:center;max-width:760px;margin-inline:auto;margin-bottom:72px;}
.section-title{font-size:clamp(1.8rem,4vw,3rem);margin-bottom:16px;letter-spacing:-.02em;}
.section-desc{font-size:1.05rem;color:var(--text-muted);max-width:600px;margin-inline:auto;}

/* ─── BUTTONS ───────────────────────────────────────────────────── */
.btn-primary{display:inline-flex;align-items:center;gap:10px;padding:14px 28px;background:var(--gradient-primary);color:#fff;border-radius:var(--radius-sm);font-family:var(--font-title);font-size:.95rem;font-weight:700;letter-spacing:.04em;box-shadow:var(--glow-sm);transition:all .3s ease;position:relative;overflow:hidden;}
.btn-primary:hover{box-shadow:var(--glow-lg);transform:translateY(-2px);}
.btn-secondary{display:inline-flex;align-items:center;gap:10px;padding:13px 26px;background:transparent;color:var(--primary-light);border:var(--border-purple);border-radius:var(--radius-sm);font-family:var(--font-title);font-size:.95rem;font-weight:700;letter-spacing:.04em;transition:all .3s ease;}
.btn-secondary:hover{background:rgba(139,92,246,.12);box-shadow:var(--glow-sm);transform:translateY(-2px);}
.btn-full{width:100%;justify-content:center;}
.btn-code{font-family:var(--font-code);font-size:.9rem;opacity:.7;}

/* ─── REVEAL ANIMATION ──────────────────────────────────────────── */
[data-reveal]{opacity:0;transform:translateY(30px);transition:opacity .7s ease,transform .7s ease;}
[data-reveal].revealed{opacity:1;transform:translateY(0);}

/* ═══════════════════════════════════════════════════════════════════
   HEADER
═══════════════════════════════════════════════════════════════════ */
.site-header{position:fixed;top:0;left:0;right:0;z-index:900;transition:all .4s ease;}
.site-header.scrolled{background:rgba(9,9,11,.85);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);box-shadow:0 1px 0 rgba(139,92,246,.2);}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;width:min(100% - 48px,var(--container));margin-inline:auto;height:72px;}
.header-line{position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(139,92,246,.4),transparent);}

.logo{display:flex;align-items:center;gap:8px;font-family:var(--font-title);font-weight:800;font-size:1.1rem;letter-spacing:-.02em;}
.logo-code{color:var(--primary-light);font-family:var(--font-code);font-size:1rem;}
.logo-text{color:var(--text-primary);}

.desktop-nav{display:flex;}
.nav-list{display:flex;align-items:center;gap:4px;}
.nav-link{
  font-family:var(--font-title);
  font-size:.88rem;
  font-weight:600;
  color: rgba(255, 255, 255, 0.75); /* Linha alterada: Mais contraste para o texto */
  padding:7px 14px;
  border-radius:var(--radius-xs);
  transition:all .25s ease;
}
.nav-link:hover, .nav-link.active{
  color:var(--primary-light);
  background:rgba(139,92,246,.15); /* Linha alterada: Fundo levemente mais visível no hover */
}

.header-controls{display:flex;align-items:center;gap:10px;}
.ctrl-btn{width:38px;height:38px;border-radius:var(--radius-xs);border:var(--border);display:flex;align-items:center;justify-content:center;color:var(--text-muted);font-size:1rem;background:var(--glass);transition:all .25s ease;}
.ctrl-btn:hover{color:var(--primary-light);border-color:rgba(139,92,246,.4);background:rgba(139,92,246,.1);}

.lang-wrap{position:relative;}
.lang-btn{display:flex;align-items:center;gap:5px;padding:0 12px;width:auto;font-family:var(--font-code);font-size:.78rem;font-weight:600;}
.lang-dropdown{position:absolute;top:calc(100% + 8px);right:0;background:var(--surface-2);border:var(--border-purple);border-radius:var(--radius-sm);padding:8px;display:flex;flex-direction:column;gap:4px;min-width:150px;opacity:0;visibility:hidden;transform:translateY(-8px);transition:all .25s ease;box-shadow:var(--shadow-md);}
.lang-dropdown.open{opacity:1;visibility:visible;transform:translateY(0);}
.lang-option{padding:8px 14px;border-radius:var(--radius-xs);font-size:.85rem;color:var(--text-secondary);text-align:left;transition:all .2s ease;}
.lang-option:hover,.lang-option.active{background:rgba(139,92,246,.15);color:var(--primary-light);}

.header-cta-btn{display:flex;align-items:center;gap:8px;padding:9px 20px;background:rgba(139,92,246,.15);border:var(--border-purple);border-radius:var(--radius-sm);font-family:var(--font-title);font-size:.85rem;font-weight:700;color:var(--primary-light);transition:all .3s ease;}
.header-cta-btn .btn-code{font-family:var(--font-code);font-size:.8rem;opacity:.7;}
.header-cta-btn:hover{background:var(--gradient-primary);color:#fff;border-color:transparent;box-shadow:var(--glow-sm);}

.mobile-menu-btn{display:none;flex-direction:column;gap:5px;padding:8px;border-radius:var(--radius-xs);}
.mobile-menu-btn span{display:block;width:22px;height:2px;background:var(--text-muted);border-radius:2px;transition:all .3s ease;}
.mobile-menu-btn.open span:nth-child(1){transform:rotate(45deg) translate(5px,5px);}
.mobile-menu-btn.open span:nth-child(2){opacity:0;}
.mobile-menu-btn.open span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px);}

/* Menu mobile — Drawer lateral da direita */
.mobile-menu{
  display:none; /* só aparece em mobile via media query */
  position:fixed;
  top:0;
  right:0;
  width:85%;
  max-width:360px;
  height:100vh;
  z-index:1100;
  overflow:hidden;
  transform:translateX(100%);
  transition:transform .3s ease, visibility .3s ease;
  visibility:hidden;
}
.mobile-menu.open{
  transform:translateX(0);
  visibility:visible;
}

/* Overlay escuro atrás do drawer */
.mobile-menu-backdrop{
  display:none;
  position:fixed;
  inset:0;
  z-index:1099;
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  opacity:0;
  transition:opacity .3s ease;
}
.mobile-menu-backdrop.open{
  opacity:1;
}

/* Vídeo de fundo do menu mobile */
.mobile-menu-bg{position:absolute;inset:0;z-index:0;overflow:hidden;}
.mobile-menu-video{position:absolute;top:50%;left:50%;width:100%;height:100%;min-width:100%;min-height:100%;transform:translate(-50%,-50%);object-fit:cover;}
.mobile-menu-overlay{position:absolute;inset:0;background:rgba(9,9,11,.86);}
[data-theme="light"] .mobile-menu-overlay{background:rgba(255,255,255,.88);}

/* Conteúdo do menu (acima do vídeo) com rolagem própria */
.mobile-menu-scroll{
  position:relative;
  z-index:1;
  height:100%;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  gap:28px;
  padding:80px 28px 40px;
}

/* Botão X para fechar o drawer */
.mobile-menu-close{
  position:absolute;
  top:18px;
  right:18px;
  z-index:10;
  width:40px;
  height:40px;
  border-radius:50%;
  background:rgba(139,92,246,.12);
  border:1px solid rgba(168,85,247,.3);
  color:var(--text-secondary);
  font-size:1.3rem;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:all .25s ease;
  cursor:pointer;
}
.mobile-menu-close:hover{
  background:rgba(139,92,246,.25);
  border-color:rgba(168,85,247,.6);
  color:var(--primary-light);
  transform:rotate(90deg);
}

.mobile-nav{display:flex;flex-direction:column;gap:4px;}
.mobile-link{font-family:var(--font-title);font-size:1.4rem;font-weight:600;color:var(--text-secondary);padding:13px 16px;border-radius:var(--radius-sm);transition:all .2s ease;display:block;}
.mobile-link:hover,.mobile-link:active{color:var(--primary-light);background:rgba(139,92,246,.1);}
.mobile-link.active{color:var(--primary-light);}

.mobile-menu-controls{display:flex;flex-direction:column;gap:16px;padding-top:8px;border-top:var(--border-purple);}

.mobile-ctrl-btn{display:flex;align-items:center;gap:10px;padding:13px 16px;background:rgba(139,92,246,.08);border:var(--border-purple);border-radius:var(--radius-sm);font-family:var(--font-title);font-size:.95rem;font-weight:600;color:var(--text-secondary);transition:all .2s ease;}
.mobile-ctrl-btn:hover{background:rgba(139,92,246,.15);color:var(--primary-light);}

.mobile-lang-group{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.mobile-lang-label{display:flex;align-items:center;color:var(--text-muted);font-size:1.1rem;margin-right:4px;}
.mobile-lang-group .lang-option{padding:9px 14px;border:var(--border-purple);border-radius:var(--radius-sm);background:rgba(139,92,246,.06);}
.mobile-lang-group .lang-option.active{background:var(--gradient-primary);color:#fff;}

.mobile-cta{display:flex;align-items:center;justify-content:center;gap:10px;padding:14px 16px;background:rgba(139,92,246,.12);border:var(--border-purple);border-radius:var(--radius-sm);font-family:var(--font-title);font-weight:700;color:var(--primary-light);margin-top:4px;transition:all .3s ease;}
.mobile-cta:hover{background:var(--gradient-primary);color:#fff;}

/* Trava o scroll do body enquanto o menu mobile está aberto */
body.mobile-menu-active{overflow:hidden;}

/* ═══════════════════════════════════════════════════════════════════
   HERO
═══════════════════════════════════════════════════════════════════ */
.hero-section{position:relative;min-height:100vh;display:flex;align-items:center;padding:140px 0 100px;overflow:hidden;}
.hero-bg{position:absolute;inset:0;pointer-events:none;}
.hero-grid-overlay{position:absolute;inset:0;background-image:linear-gradient(rgba(139,92,246,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(139,92,246,.05) 1px,transparent 1px);background-size:60px 60px;}
.hero-radial{position:absolute;top:-20%;left:50%;transform:translateX(-50%);width:900px;height:700px;background:radial-gradient(ellipse at center,rgba(139,92,246,.15) 0%,transparent 70%);pointer-events:none;}

.hero-content-wrap{width:min(100% - 48px,var(--container));margin-inline:auto;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;}

.hero-badge{display:inline-flex;align-items:center;gap:10px;background:rgba(139,92,246,.12);border:var(--border-purple);border-radius:var(--radius-pill);padding:8px 18px;font-family:var(--font-code);font-size:.8rem;font-weight:600;color:var(--primary-light);margin-bottom:24px;}
.badge-dot{width:8px;height:8px;border-radius:50%;background:var(--success);box-shadow:0 0 8px rgba(34,197,94,.7);animation:pulse-dot 2s infinite;}
@keyframes pulse-dot{0%,100%{opacity:1;}50%{opacity:.4;}}

.hero-name{font-family:var(--font-title);font-size:clamp(2rem,5vw,3.8rem);font-weight:800;letter-spacing:-.03em;margin-bottom:18px;min-height:1.2em;}
.typing-cursor{color:var(--primary-light);animation:blink-cursor .6s step-end infinite;}
@keyframes blink-cursor{0%,100%{opacity:1;}50%{opacity:0;}}

.hero-stack{font-family:var(--font-code);font-size:clamp(.8rem,2vw,1rem);font-weight:400;color:var(--primary-light);opacity:.8;margin-bottom:24px;letter-spacing:.02em;}
.hero-desc{font-size:1.05rem;color:var(--text-secondary);line-height:1.9;margin-bottom:36px;max-width:540px;}
.hero-btns{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:28px;}
.hero-status{display:flex;align-items:center;gap:10px;font-size:.85rem;color:var(--text-muted);}
.status-dot{width:9px;height:9px;border-radius:50%;background:var(--success);box-shadow:0 0 10px rgba(34,197,94,.6);animation:pulse-dot 2s infinite;}

/* CYBER FRAME */
.hero-image-area{position:relative;display:flex;align-items:center;justify-content:center;}
.cyber-frame{position:relative;width:380px;height:460px;transform-style:preserve-3d;transition:transform .12s ease;}
.profile-wrap{position:relative;width:100%;height:100%;border-radius:var(--radius-md);overflow:hidden;}
.profile-img{width:100%;height:100%;object-fit:cover;object-position:top;}
.profile-gradient{position:absolute;bottom:0;left:0;right:0;height:35%;background:linear-gradient(to top,rgba(9,9,11,.9),transparent);}

.cf-corner{position:absolute;width:26px;height:26px;z-index:5;}
.cf-tl{top:-2px;left:-2px;border-top:2.5px solid var(--primary-light);border-left:2.5px solid var(--primary-light);}
.cf-tr{top:-2px;right:-2px;border-top:2.5px solid var(--primary-light);border-right:2.5px solid var(--primary-light);}
.cf-bl{bottom:-2px;left:-2px;border-bottom:2.5px solid var(--primary-light);border-left:2.5px solid var(--primary-light);}
.cf-br{bottom:-2px;right:-2px;border-bottom:2.5px solid var(--primary-light);border-right:2.5px solid var(--primary-light);}
.cf-glow{position:absolute;inset:-1px;border-radius:var(--radius-md);box-shadow:0 0 30px rgba(139,92,246,.4),inset 0 0 30px rgba(139,92,246,.08);animation:frame-pulse 3s ease-in-out infinite;}
@keyframes frame-pulse{0%,100%{box-shadow:0 0 30px rgba(139,92,246,.4),inset 0 0 30px rgba(139,92,246,.08);}50%{box-shadow:0 0 60px rgba(139,92,246,.7),inset 0 0 40px rgba(139,92,246,.15);}}
.cf-scan-line{position:absolute;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,rgba(139,92,246,.7),transparent);animation:scan-move 3s linear infinite;pointer-events:none;}
@keyframes scan-move{0%{top:0;opacity:0;}10%{opacity:1;}90%{opacity:1;}100%{top:100%;opacity:0;}}

.float-tag{position:absolute;display:flex;align-items:center;gap:6px;background:rgba(9,9,11,.9);border:var(--border-purple);border-radius:var(--radius-sm);padding:8px 14px;font-family:var(--font-code);font-size:.8rem;font-weight:600;color:var(--text-primary);box-shadow:var(--glow-sm);z-index:10;}
.float-tag i{color:var(--primary-light);}
/* SUBSTITUA ESTE BLOCO NO SEU CSS: */
.float-one{top: -15px; left: -25px; animation:float-a 3s ease-in-out infinite;} /* Java: Topo-Esquerda */
.float-two{top: 35%; right: -25px; animation:float-b 3.5s ease-in-out infinite;} /* JS: Meio-Direita */
.float-three{bottom: 110px; right: -20px; animation:float-a 4s ease-in-out infinite .5s;} /* MySQL: Baixo-Direita */
.float-four{bottom: -15px; left: 50%; transform: translateX(-50%); animation:float-b 3.2s ease-in-out infinite .8s;} /* Full Stack: Centralizado Abaixo */
@keyframes float-a{0%,100%{transform:translateY(0);}50%{transform:translateY(-10px);}}
@keyframes float-b {
  0%, 100% {
    transform: translateX(-50%) translateY(0);
  }
  50% {
    transform: translateX(-50%) translateY(-8px);
  }
}
.orbit{position:absolute;border-radius:50%;border:1px solid rgba(139,92,246,.15);}
.orbit-one{width:500px;height:500px;top:50%;left:50%;transform:translate(-50%,-50%);animation:spin-slow 20s linear infinite;}
.orbit-two{width:620px;height:620px;top:50%;left:50%;transform:translate(-50%,-50%);animation:spin-slow 30s linear infinite reverse;}
@keyframes spin-slow{from{transform:translate(-50%,-50%) rotate(0deg);}to{transform:translate(-50%,-50%) rotate(360deg);}}

.hero-scroll-indicator{position:absolute;bottom:36px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;font-family:var(--font-code);font-size:.75rem;color:var(--text-muted);letter-spacing:.08em;}
.scroll-mouse{width:22px;height:35px;border:1.5px solid rgba(139,92,246,.4);border-radius:12px;display:flex;justify-content:center;padding-top:6px;}
.scroll-wheel{width:3px;height:8px;background:var(--primary-light);border-radius:2px;animation:scroll-wheel 1.8s ease-in-out infinite;}
@keyframes scroll-wheel{0%{transform:translateY(0);opacity:1;}100%{transform:translateY(10px);opacity:0;}}

.btn-secondary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: rgba(9, 9, 11, 0.5); /* Fundo escuro semitransparente */
  border: 1px solid rgba(139, 92, 246, 0.4); /* Borda roxa sutil */
  border-radius: var(--radius-sm);
  font-family: var(--font-title);
  font-size: .9rem;
  font-weight: 700;
  color: #fff; /* Texto totalmente branco para leitura perfeita */
  backdrop-filter: blur(8px); /* Efeito vidro fosco */
  -webkit-backdrop-filter: blur(8px);
  transition: all 0.3s ease;
}

.btn-secondary:hover {
  background: rgba(139, 92, 246, 0.2);
  border-color: var(--primary-light);
  box-shadow: 0 0 15px rgba(139, 92, 246, 0.3);
}

/* ═══════════════════════════════════════════════════════════════════
   SOBRE MIM
═══════════════════════════════════════════════════════════════════ */
.about-section {
  background: var(--body-bg);
  position: relative;
  overflow: hidden;
}

.about-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Criando dois pontos de luz roxa sutis nas pontas para dar profundidade sem precisar de vídeo */
.about-gradient {
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(circle at 10% 20%, rgba(139, 92, 246, 0.06) 0%, transparent 40%),
    radial-gradient(circle at 90% 80%, rgba(139, 92, 246, 0.05) 0%, transparent 45%);
}

.about-grid-lines {
  position: absolute;
  inset: 0;
  opacity: 0.6; /* Deixa as linhas levemente mais visíveis contra o preto */
  background-image: linear-gradient(rgba(139, 92, 246, 0.03) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(139, 92, 246, 0.03) 1px, transparent 1px);
  background-size: 60px 60px; /* Reduzi o grid para bater com os 60px da Home */
}

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center; /* Alinha o terminal verticalmente ao centro com o texto */
}

/* TERMINAL */
.terminal-card {
  background: rgba(15, 11, 28, 0.6); /* Efeito vidro escuro */
  border: 1px solid rgba(139, 92, 246, 0.2); /* Borda roxa tecnológica */
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.terminal-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 18px;
  background: rgba(20, 16, 36, 0.9);
  border-bottom: 1px solid rgba(139, 92, 246, 0.15);
}

.terminal-dots {
  display: flex;
  gap: 6px;
}

.td {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.td-red { background: #ff5f57; }
.td-yellow { background: #febc2e; }
.td-green { background: #28c840; }

.terminal-title {
  font-family: var(--font-code);
  font-size: .78rem;
  color: var(--text-muted);
  flex: 1;
  text-align: center;
}

.terminal-body {
  padding: 24px;
  font-family: var(--font-code);
  font-size: .85rem;
  line-height: 1.8;
}

.t-line {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.t-prompt { color: #5af78e; }
.t-sep { color: var(--text-muted); }
.t-dir { color: #578bf7; }
.t-dollar { color: var(--primary-light); margin-left: 6px; }
.t-cmd { color: var(--text-primary); font-weight: 600; }
.t-output { padding-left: 2px; color: var(--text-secondary); }
.t-online { color: var(--success); text-shadow: 0 0 8px rgba(34, 197, 94, 0.3); }
.t-cursor-blink { color: var(--primary-light); animation:blink-cursor .7s step-end infinite; }

/* Calibragem das cores internas do JSON para dar contraste perfeito */
.t-json {
  color: #fff;
  margin: 6px 0;
  padding-left: 2px;
  white-space: pre;
}

.tj-key {
  color: #c084fc; /* Roxo claro/lilás para destacar as chaves */
}

.tj-str {
  color: #5af78e; /* Verde brilhante para destacar os seus valores/stacks */
}

/* ABOUT CONTENT */
.about-content {
  display: flex;
  flex-direction: column;
  gap: 20px; /* Aumentei um pouco o respiro do texto */
}

.about-name {
  font-family: var(--font-title);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 800;
  margin-bottom: 4px;
  color: var(--text-primary);
}

.about-content p {
  font-size: 1.02rem;
  color: var(--text-secondary);
  line-height: 1.8;
}

/* Grifar as palavras-chave (<span class="hl">) */
.about-content .hl {
  color: var(--primary-light);
  font-weight: 600;
}

/* ABOUT STATS (Cards Inferiores) */
.about-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  margin-top:80px;
}

.about-stat{
  background:rgba(15,15,25,.85);
  border:1px solid rgba(139,92,246,.15);
  border-radius:18px;
  padding:32px;
  text-align:center;
  transition:.4s;
}

.about-stat:hover{
  transform:translateY(-8px);
  border-color:rgba(139,92,246,.5);
  box-shadow:0 0 30px rgba(139,92,246,.18);
}

.about-stat:hover {
  background: rgba(139, 92, 246, 0.08);
  border-color: rgba(139, 92, 246, 0.35);
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.about-stat h4 {
  font-family: var(--font-title);
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff; /* Título do card em branco para saltar aos olhos */
  margin-bottom: 4px;
}

.about-stat span {
  font-size: .8rem;
  color: var(--text-muted);
  font-weight: 500;
}

/* ═══════════════════════════════════════════════════════════════════
   FORMAÇÃO (TIMELINE) - CORRIGIDA E TOTALMENTE SIMÉTRICA
═══════════════════════════════════════════════════════════════════ */
.education-section {
  background: var(--body-bg);
  position: relative;
  overflow: hidden;
}

.edu-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Pontos de luz estáticos */
.edu-gradient {
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(circle at 85% 20%, rgba(139, 92, 246, 0.05) 0%, transparent 45%),
    radial-gradient(circle at 15% 75%, rgba(139, 92, 246, 0.06) 0%, transparent 40%);
}

.edu-grid {
  position: absolute;
  inset: 0;
  opacity: 0.6;
  background-image: linear-gradient(rgba(139, 92, 246, 0.03) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(139, 92, 246, 0.03) 1px, transparent 1px);
  background-size: 60px 60px;
}

.timeline {
  position: relative;
  padding: 40px 0;
  display: flex;
  flex-direction: column;

  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

/* Linha central exata */
.timeline::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, 
    transparent 0%, 
    rgba(139, 92, 246, 0.4) 15%, 
    rgba(139, 92, 246, 0.4) 85%, 
    transparent 100%
  );
  transform: translateX(-50%);
}

.tl-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 80px minmax(0, 1fr);

  align-items: center;

  width: 100%;

  margin: 0 auto 40px;
}

/* Correção de simetria: forçando largura idêntica nos dois lados */
.tl-item.tl-left .tl-card{
    grid-column:1;
    justify-self:end;
    width:min(100%,480px);
}

.tl-item.tl-right .tl-card{
    grid-column:3;
    justify-self:start;
    width:min(100%,480px);
}

.tl-item.tl-right .tl-node { grid-column: 2; grid-row: 1; }
.tl-item.tl-left .tl-node { grid-column: 2; grid-row: 1; }

/* Ícones centrais da Linha do Tempo */
.tl-node {
  width: 52px;
  height: 52px;
  background: rgba(15, 11, 28, 0.9);
  border: 2px solid rgba(139, 92, 246, 0.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-light);
  font-size: 1.25rem;
  z-index: 2;
  margin: 0 auto;
  transition: all .3s ease;
  box-shadow: 0 0 15px rgba(139, 92, 246, 0.1);
}

.tl-item:hover .tl-node {
  border-color: var(--primary-light);
  box-shadow: 0 0 20px rgba(139, 92, 246, 0.4);
  color: #fff;
  transform: scale(1.05);
}

.tl-node-future {
  border-color: rgba(139, 92, 246, 0.15);
  color: var(--text-muted);
  box-shadow: none;
}

/* Cards de Conteúdo */
.tl-card {
  background: rgba(20, 16, 36, 0.4);
  border: 1px solid rgba(139, 92, 246, 0.15);
  border-radius: var(--radius-md);
  padding: 24px 28px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: all .3s ease;
  text-align: left;
}

.tl-card:hover {
  border-color: rgba(139, 92, 246, 0.35);
  background: rgba(20, 16, 36, 0.6);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
  transform: translateY(-2px);
}

.tl-future {
  border-color: rgba(139, 92, 246, 0.1);
  background: rgba(139, 92, 246, 0.02);
  opacity: 0.85;
}

/* Badges de Status ajustados */
.tl-period {
  font-family: var(--font-code);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  display: inline-block;
  margin-bottom: 12px;
  padding: 3px 10px;
  border-radius: 4px;
  text-transform: uppercase;
}

.status-done {
  background: rgba(34, 197, 94, 0.1);
  color: #5af78e;
  border: 1px solid rgba(34, 197, 94, 0.2);
}

.status-doing {
  background: rgba(139, 92, 246, 0.12);
  color: var(--primary-light);
  border: 1px solid rgba(139, 92, 246, 0.25);
}

.status-future {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-muted);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.tl-card h3 {
  font-family: var(--font-title);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.tl-card h4 {
  font-size: .85rem;
  color: var(--primary-light);
  font-weight: 500;
  margin-bottom: 12px;
  font-family: var(--font-code);
}

.tl-card p {
  font-size: .9rem;
  line-height: 1.7;
  color: var(--text-secondary);
}

/* CARD INFERIOR (Footer) */
.edu-footer {
  margin-top: 50px;
}

.edu-highlight-card {
  display: flex;
  align-items: center;
  gap: 24px;
  background: rgba(15, 11, 28, 0.4);
  border: 1px solid rgba(139, 92, 246, 0.2);
  border-radius: var(--radius-lg);
  padding: 28px 32px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.edu-hl-icon {
  width: 52px;
  height: 52px;
  min-width: 52px;
  background: rgba(139, 92, 246, 0.1);
  border: 1px solid rgba(139, 92, 246, 0.25);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: var(--primary-light);
  box-shadow: 0 0 15px rgba(139, 92, 246, 0.1);
}

.edu-highlight-card h3 {
  font-family: var(--font-title);
  font-size: 1.15rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 6px;
}

.edu-highlight-card p {
  font-size: .92rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

/* ════════════════════════════════════════════════════════════════
   SKILLS PREMIUM
════════════════════════════════════════════════════════════════ */

.skills-section{
    position:relative;
    background:var(--body-bg);
    overflow:hidden;
}

.skills-bg{
    position:absolute;
    inset:0;
    pointer-events:none;
}

.skills-gradient{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:900px;
    height:700px;
    background:
    radial-gradient(circle,
    rgba(139,92,246,.10),
    transparent 70%);
}

.skills-glow{
    position:absolute;
    top:0;
    left:50%;
    transform:translateX(-50%);
    width:650px;
    height:280px;
    background:
    radial-gradient(circle,
    rgba(139,92,246,.08),
    transparent 70%);
}

.skills-grid-overlay{
    position:absolute;
    inset:0;
    background-image:
    linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);

    background-size:60px 60px;
}

/*══════════════════════════════════════*/

.skills-grid{
    display:grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    /* Garante que todos os cards de uma mesma linha tenham EXATAMENTE a mesma altura */
    grid-auto-rows: 1fr; 
    gap:24px;
    margin-top:60px;
}

/*══════════════════════════════════════*/

.skill-card{
    --skill-color:#8b5cf6;
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    /* Alterado para space-between ou mantido para distribuir o espaço internamente */
    justify-content:flex-start;
    text-align:center;
    overflow:hidden;
    padding:36px 28px;
    border-radius:22px;
    background:
    linear-gradient(
    180deg,
    rgba(255,255,255,.035),
    rgba(255,255,255,.015)
    );

    border:
    1px solid rgba(255,255,255,.06);

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);

    transition:
    transform .45s ease,
    border-color .45s ease,
    box-shadow .45s ease;

    transform-style:preserve-3d;
    cursor:default;
    /* Garante que o card ocupe 100% da altura da linha determinada pelo Grid */
    height: 100%; 
}

/*══════════════════════════════════════*/

.skill-card::before{
    content:"";
    position:absolute;
    inset:0;
    opacity:0;
    transition:.45s;
    background:
    radial-gradient(
    circle at top,
    var(--skill-color),
    transparent 75%
    );
}

.skill-card::after{
    content:"";
    position:absolute;
    inset:-1px;
    border-radius:22px;
    border:1px solid var(--skill-color);
    opacity:0;
    transition:.45s;
    pointer-events:none;
}

/*══════════════════════════════════════*/

.skill-card:hover{
    transform:
    translateY(-8px)
    scale(1.02);

    border-color:var(--skill-color);

    box-shadow:
    0 0 20px rgba(255,255,255,.03),
    0 0 30px color-mix(in srgb,var(--skill-color) 28%,transparent),
    0 0 70px color-mix(in srgb,var(--skill-color) 12%,transparent);
}

.skill-card:hover::before{
    opacity:.12;
}

.skill-card:hover::after{
    opacity:1;
}

/*══════════════════════════════════════*/

.skill-glow{
    position:absolute;
    width:180px;
    height:180px;
    top:-90px;
    left:50%;
    transform:translateX(-50%);
    background:
    radial-gradient(
    circle,
    var(--skill-color),
    transparent 70%
    );

    opacity:.05;
    transition:.45s;
    pointer-events:none;
}

.skill-card:hover .skill-glow{
    opacity:.16;
    transform:
    translateX(-50%)
    scale(1.4);
}

/*══════════════════════════════════════*/

.skill-logo{
    width:72px;
    height:72px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:22px;
    transition:.4s;
}

.skill-logo img{
    width:62px;
    height:62px;
    object-fit:contain;
    transition:.4s;
    filter:
    drop-shadow(0 0 0 transparent);
}

.skill-card:hover .skill-logo img{
    transform:
    translateY(-4px)
    scale(1.08);
    filter:
    drop-shadow(0 0 14px var(--skill-color));
}

/*══════════════════════════════════════*/

.skill-card h3{
    font-family:var(--font-title);
    font-size:1.12rem;
    font-weight:700;
    color:#fff;
    margin-bottom:14px;
    transition:.35s;
}

.skill-card:hover h3{
    color:var(--skill-color);
}

/*══════════════════════════════════════*/

.skill-card p{
    font-size:.88rem;
    line-height:1.8;
    color:var(--text-muted);
    max-width:290px;
    /* Faz com que o parágrafo empurre o alinhamento e preencha a área vertical disponível */
    flex-grow: 1; 
    display: flex;
    align-items: flex-start; /* Mantém o texto alinhado no topo da sua caixa de texto */
}

/*══════════════════════════════════════*/

.skills-footer-card{
    display:flex;
    align-items:center;
    gap:24px;
    margin-top:70px;
    padding:34px;
    border-radius:22px;
    background:
    linear-gradient(
    180deg,
    rgba(255,255,255,.03),
    rgba(255,255,255,.015)
    );

    border:
    1px solid rgba(139,92,246,.15);

    backdrop-filter:blur(14px);
}

.skills-footer-card:hover{
    border-color:
    rgba(139,92,246,.35);
}

.sfc-icon{
    width:62px;
    height:62px;
    min-width:62px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:18px;
    font-size:1.5rem;
    color:var(--primary-light);
    background:
    rgba(139,92,246,.12);
    border:
    1px solid rgba(139,92,246,.25);
}

.skills-footer-card h3{
    font-size:1.15rem;
    margin-bottom:8px;
    color:#fff;
}

.skills-footer-card p{
    color:var(--text-muted);
    line-height:1.8;
    font-size:.92rem;
}

/*══════════════════════════════════════*/

@media(max-width:1100px){
    .skills-grid{
        grid-template-columns: repeat(2,1fr);
    }
}

/*══════════════════════════════════════*/

@media(max-width:768px){
    .skills-grid{
        grid-template-columns:1fr;
        grid-auto-rows: auto; /* Desfaz a altura fixa estrita no mobile para evitar overflow caso o texto quebre muito */
        gap:20px;
    }

    .skill-card{
        padding:32px 24px;
    }

    .skill-logo{
        width:64px;
        height:64px;
    }

    .skill-logo img{
        width:56px;
        height:56px;
    }

    .skills-footer-card{
        flex-direction:column;
        text-align:center;
    }
}

/*══════════════════════════════════════*/

@media(max-width:480px){
    .skill-card{
        padding:28px 22px;
    }

    .skill-card p{
        font-size:.84rem;
    }
}


/* ═══════════════════════════════════════════════════════════════════
   ZYNTEK — CSS LIMPO E REORGANIZADO
   Estrutura:
     PARTE 1 — foto esq / texto dir   (.zyntek-block--img-left)
     PARTE 2 — texto esq / foto dir   (.zyntek-block--img-right)
     PARTE 3 — cards + botões         (.zyntek-bottom)

   Pilha z-index:
     0  .zyntek-bg
     1  .zyntek-video-bg
     2  .zyntek-video-overlay
     3  .container  ← todo o conteúdo
═══════════════════════════════════════════════════════════════════ */

/* ─── SECTION ───────────────────────────────────────────────────── */
.zyntek-section {
  position: relative;
  background: var(--surface);
  overflow: hidden;
  padding: 100px 0;
}

/* ─── FUNDO DECORATIVO (z 0) ────────────────────────────────────── */
.zyntek-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.zyntek-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(139,92,246,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(139,92,246,.04) 1px, transparent 1px);
  background-size: 80px 80px;
}
.zyntek-gradient {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 70% 50%, rgba(109,40,217,.08) 0%, transparent 60%);
}
.zyntek-blur-one {
  position: absolute;
  top: 20%; left: 5%;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(139,92,246,.06), transparent);
  border-radius: 50%;
}
.zyntek-blur-two {
  position: absolute;
  bottom: 10%; right: 5%;
  width: 350px; height: 350px;
  background: radial-gradient(circle, rgba(147,51,234,.06), transparent);
  border-radius: 50%;
}

/* ─── VÍDEO (z 1) ───────────────────────────────────────────────── */
.zyntek-video-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  opacity: .35;
}

/* ─── OVERLAY (z 2) ─────────────────────────────────────────────── */
.zyntek-video-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.65);
  z-index: 2;
}

/* ─── CONTAINER (z 3) ───────────────────────────────────────────── */
.zyntek-section .container {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 80px;
}

/* ─── HEADER ────────────────────────────────────────────────────── */
.zyntek-section .section-header {
  margin-bottom: 0; /* gap do container já cuida do espaço */
}

/* ═══════════════════════════════════════════════════════════════════
   BLOCOS — layout base (2 colunas iguais, alinhadas ao centro)
═══════════════════════════════════════════════════════════════════ */
.zyntek-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

/* PARTE 1: foto esq, texto dir — ordem natural */
.zyntek-block--img-left  { /* padrão, nada a mudar */ }

/* PARTE 2: texto esq, foto dir — card vai para a 2ª coluna */
.zyntek-block--img-right .zynk-ai-content { order: 1; }
.zyntek-block--img-right .zynk-ai-visual  { order: 2; }

/* ═══════════════════════════════════════════════════════════════════
   PARTE 1 — MASCOTE
═══════════════════════════════════════════════════════════════════ */

/* .mascot-area é o contexto das tags absolutas */
.mascot-area {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 28px 24px;      /* espaço para as tags não cortarem */
}

.mascot-frame {
  position: relative;
  width: 340px;
  height: 340px;
  border-radius: 24px;
  background: rgba(10,10,15,.75);
  backdrop-filter: blur(12px);
  flex-shrink: 0;
  /* SEM overflow:hidden — as tags precisam aparecer fora do frame */
}

/* Borda animada */
.mascot-border-anim {
  position: absolute;
  inset: 0;
  border: 2px solid rgba(139,92,246,.3);
  border-radius: 24px;
  pointer-events: none;
  animation: mascot-border-spin 6s linear infinite;
}
@keyframes mascot-border-spin {
  0%   { border-color: rgba(139,92,246,.3); box-shadow: 0 0 20px rgba(139,92,246,.2); }
  50%  { border-color: rgba(168,85,247,.6); box-shadow: 0 0 40px rgba(168,85,247,.35); }
  100% { border-color: rgba(139,92,246,.3); box-shadow: 0 0 20px rgba(139,92,246,.2); }
}

/* Glow pulsante */
.mascot-glow-pulse {
  position: absolute;
  inset: 10%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(139,92,246,.12), transparent);
  animation: mascot-glow-p 3s ease-in-out infinite;
  pointer-events: none;
}
@keyframes mascot-glow-p {
  0%,100% { transform: scale(1); }
  50%     { transform: scale(1.12); }
}

/* Scan line */
.mascot-scan {
  position: absolute;
  left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, rgba(139,92,246,.6), transparent);
  animation: scan-move 4s linear infinite;
  pointer-events: none;
  z-index: 2;
}
@keyframes scan-move {
  0%   { top: 0; }
  100% { top: 100%; }
}

/* Glitch bars */
.mascot-glitch { position: absolute; background: rgba(139,92,246,.06); border-radius: 4px; pointer-events: none; }
.mg-one { top: 15%; left: 5%; right: 50%; height: 4px; animation: glitch-mv 4s infinite; }
.mg-two { bottom: 20%; left: 30%; right: 10%; height: 3px; animation: glitch-mv 6s infinite 2s; }
@keyframes glitch-mv { 0%,90%,100% { opacity:0; } 92%,98% { opacity:1; } }

/* Imagem */
.mascot-img-wrap {
  position: absolute;
  inset: 20px;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mascot-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform .5s;
}
.mascot-frame:hover .mascot-img { transform: scale(1.05); }

/* Tags — filhas de .mascot-area */
.mascot-tag {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 5px;
  background: rgba(9,9,11,.92);
  border: 1px solid rgba(139,92,246,.4);
  border-radius: 6px;
  padding: 6px 12px;
  font-family: var(--font-code);
  font-size: .78rem;
  font-weight: 600;
  color: var(--text-primary);
  box-shadow: 0 0 12px rgba(139,92,246,.25);
  white-space: nowrap;
  z-index: 5;
}
.mascot-tag i { color: var(--primary-light); }
.mt-tl { top:  6px; left:  0; }
.mt-tr { top:  6px; right: 0; }
.mt-bl { bottom: 6px; left:  0; }
.mt-br { bottom: 6px; right: 0; }

/* ─── CONTEÚDO TEXTO (parte 1) ──────────────────────────────────── */
.zyntek-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.company-eyebrow {
  font-family: var(--font-code);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .15em;
  color: var(--primary-light);
  opacity: .7;
  text-transform: uppercase;
}
.company-title {
  font-size: clamp(1.7rem, 2.8vw, 2.6rem);
  line-height: 1.15;
  font-weight: 800;
}
.zyntek-content p {
  color: var(--text-secondary);
  line-height: 1.9;
  font-size: 1rem;
}
.hl {
  color: var(--primary-light);
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════════
   DIVISOR
═══════════════════════════════════════════════════════════════════ */
.zynk-divider {
  display: flex;
  align-items: center;
  gap: 16px;
}
.zynk-divider-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(139,92,246,.35), transparent);
}
.zynk-divider-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-code);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--primary-light);
  white-space: nowrap;
}
.zynk-divider-label i { font-size: 1rem; }

/* ═══════════════════════════════════════════════════════════════════
   PARTE 2 — ZYNK AI
═══════════════════════════════════════════════════════════════════ */

/* Texto */
.zynk-ai-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.zynk-ai-boot {
  font-family: var(--font-code);
  font-size: .75rem;
  color: var(--primary-light);
  opacity: .6;
  letter-spacing: .06em;
}
.zynk-ai-name {
  font-size: clamp(1.8rem, 2.8vw, 2.6rem);
  font-weight: 800;
  line-height: 1.1;
}
.zynk-ai-subtitle {
  font-family: var(--font-code);
  font-size: .9rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--primary-light);
}
.zynk-ai-desc {
  color: var(--text-secondary);
  font-size: 1rem;
  line-height: 1.9;
}
.zynk-ai-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}
.zynk-ai-tag {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(139,92,246,.1);
  border: 1px solid rgba(139,92,246,.25);
  border-radius: 6px;
  padding: 6px 12px;
  font-family: var(--font-code);
  font-size: .74rem;
  color: var(--primary-light);
  transition: border-color .3s, background .3s;
}
.zynk-ai-tag:hover {
  background: rgba(139,92,246,.18);
  border-color: rgba(168,85,247,.5);
}
.zynk-ai-tag i { font-size: .9rem; }

/* Card foto */
.zynk-ai-visual {
  display: flex;
  justify-content: center;
}
.zynk-ai-frame {
  position: relative;
  width: 280px;
  background: rgba(9,9,11,.7);
  border: 1px solid rgba(139,92,246,.3);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 0 40px rgba(139,92,246,.15), inset 0 0 30px rgba(139,92,246,.04);
}

/* Scanlines */
.zynk-ai-scanlines {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg, transparent, transparent 3px,
    rgba(0,0,0,.08) 3px, rgba(0,0,0,.08) 4px
  );
  pointer-events: none;
  z-index: 3;
}

/* Cantos HUD */
.zynk-ai-corner { position: absolute; width: 18px; height: 18px; z-index: 4; }
.zynk-ai-corner--tl { top:8px;    left:8px;  border-top:2px solid rgba(139,92,246,.8); border-left:2px solid rgba(139,92,246,.8); }
.zynk-ai-corner--tr { top:8px;    right:8px; border-top:2px solid rgba(139,92,246,.8); border-right:2px solid rgba(139,92,246,.8); }
.zynk-ai-corner--bl { bottom:8px; left:8px;  border-bottom:2px solid rgba(139,92,246,.8); border-left:2px solid rgba(139,92,246,.8); }
.zynk-ai-corner--br { bottom:8px; right:8px; border-bottom:2px solid rgba(139,92,246,.8); border-right:2px solid rgba(139,92,246,.8); }

/* HUD bar */
.zynk-ai-hud-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: rgba(139,92,246,.1);
  border-bottom: 1px solid rgba(139,92,246,.2);
  position: relative;
  z-index: 2;
}
.zynk-ai-hud-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(139,92,246,.5);
  animation: hud-dot-blink 2s ease-in-out infinite;
}
.zynk-ai-hud-dot:nth-child(2) { animation-delay: .4s; }
.zynk-ai-hud-dot:nth-child(3) { animation-delay: .8s; }
@keyframes hud-dot-blink {
  0%,100% { opacity: .4; }
  50%     { opacity: 1; background: #a855f7; }
}
.zynk-ai-hud-label {
  font-family: var(--font-code);
  font-size: .65rem;
  color: var(--primary-light);
  letter-spacing: .1em;
  margin-left: 4px;
}
.zynk-ai-img { width: 100%; display: block; position: relative; z-index: 1; }

/* Status badge */
.zynk-ai-status {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  background: rgba(139,92,246,.08);
  border-top: 1px solid rgba(139,92,246,.2);
  font-family: var(--font-code);
  font-size: .68rem;
  color: var(--primary-light);
  letter-spacing: .1em;
  position: relative;
  z-index: 2;
}
.zynk-ai-status-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 8px rgba(34,197,94,.7);
  animation: status-pulse 2s ease-in-out infinite;
}
@keyframes status-pulse {
  0%,100% { box-shadow: 0 0 8px rgba(34,197,94,.7); }
  50%     { box-shadow: 0 0 16px rgba(34,197,94,1); }
}

/* ═══════════════════════════════════════════════════════════════════
   PARTE 3 — CARDS + BOTÕES
═══════════════════════════════════════════════════════════════════ */
.zyntek-bottom {
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: center;
}

/* Cards */
.about-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  width: 100%;
}
.about-stat {
  background: var(--surface-2);
  border: 1px solid rgba(139,92,246,.2);
  border-radius: 12px;
  padding: 24px 16px;
  text-align: center;
  transition: border-color .3s, transform .3s;
}
.about-stat:hover {
  border-color: rgba(168,85,247,.5);
  transform: translateY(-4px);
}
.about-stat h4 {
  font-size: 1.15rem;
  color: var(--primary-light);
  margin-bottom: 6px;
}
.about-stat span {
  font-size: .82rem;
  color: var(--text-secondary);
}

/* Botões */
.company-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVO
═══════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .zyntek-block {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  /* parte 1: foto sobe, texto desce */
  .zyntek-block--img-left .mascot-area  { order: 1; }
  .zyntek-block--img-left .zyntek-content { order: 2; }
  /* parte 2: foto sobe, texto desce */
  .zyntek-block--img-right .zynk-ai-visual  { order: 1; }
  .zyntek-block--img-right .zynk-ai-content { order: 2; }

  .mascot-frame { width: 300px; height: 300px; margin: 0 auto; }
  .mascot-area  { padding: 28px 24px; }
}

@media (max-width: 768px) {
  .zyntek-section { padding: 70px 0; }
  .zyntek-section .container { gap: 56px; }
  .mascot-frame { width: 260px; height: 260px; }
  .mascot-tag   { font-size: .66rem; padding: 4px 8px; }
  .about-stats  { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .zyntek-section { padding: 56px 0; }
  .company-actions { flex-direction: column; align-items: center; }
  .zyntek-block { gap: 36px; }
}

/* ═══════════════════════════════════════════════════════════════════
   PROJETOS (CARROSSEL) — VERSÃO PREMIUM CORRIGIDA
   ═══════════════════════════════════════════════════════════════════
   CORREÇÕES APLICADAS:
   • Padding/overflow no outer para não cortar o card central elevado
   • Transição fluida via cubic-bezier(0.25, 1, 0.5, 1)
   • Aura neon dinâmica no card central + bordas acesas
   • Box-shadow duplo volumoso no pc-center e hover
═══════════════════════════════════════════════════════════════════ */

.projects-section {
  background: var(--body-bg);
}
.projects-bg { position: absolute; inset: 0; pointer-events: none; }
.projects-gradient {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 30% 60%, rgba(109,40,217,.07) 0%, transparent 60%);
}
.projects-grid-lines {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(139,92,246,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(139,92,246,.03) 1px, transparent 1px);
  background-size: 80px 80px;
}
.projects-blur-l {
  position: absolute; top: 30%; left: -100px;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(139,92,246,.05), transparent);
  border-radius: 50%;
}
.projects-blur-r {
  position: absolute; bottom: 20%; right: -100px;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(147,51,234,.05), transparent);
  border-radius: 50%;
}

/* ══════════════════════════════════════════════════════════
   CARROSSEL — Container externo
   CORREÇÃO: padding vertical garante que o scale(1.05) do
   card central não seja cortado pelo overflow:hidden
═══════════════════════════════════════════════════════════ */
.pcarousel-outer {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  /* CORREÇÃO CRÍTICA: padding compensa o scale(1.05) do card central
     sem esse espaço o topo/baixo do card ativo é cortado */
  padding: 20px 0;
  overflow: visible;
}

/* Palco dos cards */
.pcarousel-stage {
  flex: 1;
  min-width: 0;
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  /* CORREÇÃO: overflow:visible para não cortar o card elevado */
  overflow: visible;
  min-height: 360px;
}

/* ══════════════════════════════════════════════════════════
   PROJECT CARD — Base
   MELHORIA: transição fluida com cubic-bezier(0.25, 1, 0.5, 1)
═══════════════════════════════════════════════════════════ */
.project-card {
  position: absolute;
  width: var(--card-w, 30%);
  background: var(--surface);
  border: var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* MELHORIA: cubic-bezier fluido substitui a transição robótica */
  transition:
    transform   .55s cubic-bezier(0.25, 1, 0.5, 1),
    opacity     .55s cubic-bezier(0.25, 1, 0.5, 1),
    box-shadow  .45s cubic-bezier(0.25, 1, 0.5, 1),
    border-color .35s ease,
    left        .55s cubic-bezier(0.25, 1, 0.5, 1),
    width       .55s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform, opacity, left;
  opacity: 0;
  pointer-events: none;
  top: 0;
  left: 0;
}

/* Estado: card da ESQUERDA */
.project-card.pc-left {
  opacity: .72;
  pointer-events: auto;
  transform: translateX(0) scale(.93);
  z-index: 1;
  border-color: rgba(139,92,246,.15);
}

/* ══════════════════════════════════════════════════════════
   CARD CENTRAL ATIVO — Aura Neon Dinâmica
   MELHORIA: box-shadow duplo volumoso + bordas acesas
   A animação @keyframes cria pulsação contínua da aura
═══════════════════════════════════════════════════════════ */
.project-card.pc-center {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1.05);
  z-index: 2;
  border-color: rgba(139,92,246,.75);
  /* Sombra dupla: glow interno suave + halo externo volumoso */
  box-shadow:
    0 0  0 1px rgba(139,92,246,.35),
    0 0 18px rgba(139,92,246,.30),
    0 0 45px rgba(109,40,217,.20),
    0 8px 40px rgba(0,0,0,.35);
  animation: card-center-pulse 3s ease-in-out infinite;
}

/* Pulsação suave da aura do card central */
@keyframes card-center-pulse {
  0%, 100% {
    box-shadow:
      0 0  0 1px rgba(139,92,246,.35),
      0 0 18px rgba(139,92,246,.30),
      0 0 45px rgba(109,40,217,.20),
      0 8px 40px rgba(0,0,0,.35);
    border-color: rgba(139,92,246,.75);
  }
  50% {
    box-shadow:
      0 0  0 1px rgba(167,139,250,.55),
      0 0 28px rgba(139,92,246,.50),
      0 0 65px rgba(109,40,217,.32),
      0 8px 40px rgba(0,0,0,.35);
    border-color: rgba(167,139,250,.95);
  }
}

/* Estado: card da DIREITA */
.project-card.pc-right {
  opacity: .72;
  pointer-events: auto;
  transform: translateX(0) scale(.93);
  z-index: 1;
  border-color: rgba(139,92,246,.15);
}

/* Hover nos cards laterais */
.project-card.pc-left:hover,
.project-card.pc-right:hover {
  border-color: rgba(139,92,246,.45);
  box-shadow:
    0 0 18px rgba(139,92,246,.18),
    var(--shadow-lg);
  opacity: .9;
  transform: scale(.96);
}

/* Mobile: 1 card, sem scale reduzido */
@media (max-width: 640px) {
  .project-card.pc-center {
    transform: scale(1);
    animation: card-center-pulse-mobile 3s ease-in-out infinite;
  }

  @keyframes card-center-pulse-mobile {
    0%, 100% {
      box-shadow:
        0 0 0 1px rgba(139,92,246,.35),
        0 0 16px rgba(139,92,246,.28),
        0 0 32px rgba(109,40,217,.18);
    }
    50% {
      box-shadow:
        0 0 0 1px rgba(167,139,250,.55),
        0 0 24px rgba(139,92,246,.45),
        0 0 48px rgba(109,40,217,.28);
    }
  }
}

/* ── Área da imagem ── */
.project-img-wrap {
  position: relative;
  height: 200px;
  overflow: hidden;
  background: var(--surface-3);
  flex-shrink: 0;
}
.project-img-placeholder {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--surface-2), var(--surface-3));
  z-index: 0;
}
.project-img-placeholder i { font-size: 2.8rem; color: rgba(139,92,246,.25); }
.project-img-wrap img {
  position: relative; z-index: 1;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center top;
  display: block;
  transition: transform .55s cubic-bezier(0.25, 1, 0.5, 1);
  color: transparent; font-size: 0;
}
.project-card:hover .project-img-wrap img { transform: scale(1.06); }

.project-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(9,9,11,.85) 0%, rgba(9,9,11,.1) 55%, transparent 100%);
  pointer-events: none;
}

/* Pílula de categoria */
.project-cat {
  position: absolute; top: 12px; left: 12px;
  font-family: var(--font-code); font-size: .7rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: #fff;
  background: rgba(109,40,217,.85);
  border: 1px solid rgba(168,85,247,.5);
  border-radius: var(--radius-pill);
  padding: 4px 12px; line-height: 1;
  z-index: 2; pointer-events: none; white-space: nowrap;
}
.project-cat-featured { background: var(--gradient-primary); border-color: transparent; }
.project-card-featured { border-color: rgba(139,92,246,.3); }

/* ── Corpo do card ── */
.project-body {
  padding: 20px 22px 22px;
  display: flex; flex-direction: column; flex: 1; gap: 0;
}
.project-body h3 {
  font-size: 1.05rem; font-weight: 700;
  margin-bottom: 10px; line-height: 1.3;
  white-space: normal; word-wrap: break-word;
}
.project-body p {
  font-size: .84rem; color: var(--text-muted);
  line-height: 1.65; margin-bottom: 14px;
  white-space: normal; word-wrap: break-word; overflow-wrap: break-word;
  display: -webkit-box; -webkit-line-clamp: 3;
  -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;
}
.project-tags {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 16px; margin-top: auto;
}
.project-tags span {
  font-family: var(--font-code); font-size: .7rem;
  color: var(--primary-light);
  background: rgba(139,92,246,.1);
  border: var(--border-purple);
  border-radius: var(--radius-pill); padding: 3px 10px; white-space: nowrap;
}
.project-actions { display: flex; gap: 10px; margin-top: 4px; }
.btn-project {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 18px;
  border: var(--border-purple); border-radius: var(--radius-sm);
  font-family: var(--font-title); font-size: .82rem; font-weight: 700;
  color: var(--primary-light); background: transparent; cursor: pointer;
  transition: all .3s cubic-bezier(0.25, 1, 0.5, 1); white-space: nowrap;
}
.btn-project:hover {
  background: var(--gradient-primary); color: #fff;
  border-color: transparent; box-shadow: var(--glow-sm);
}

/* Setas do carrossel */
.carousel-arrow {
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--surface); border: var(--border-purple);
  color: var(--primary-light); font-size: 1.3rem;
  display: flex; align-items: center; justify-content: center;
  transition: all .3s cubic-bezier(0.25, 1, 0.5, 1); flex-shrink: 0;
}
.carousel-arrow:hover {
  background: var(--gradient-primary); color: #fff;
  border-color: transparent; box-shadow: var(--glow-sm);
  transform: scale(1.08);
}
.carousel-arrow:disabled { opacity: .3; pointer-events: none; }

/* Dots */
.carousel-dots { display: flex; justify-content: center; gap: 8px; margin-top: 8px; }
.c-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(139,92,246,.25); border: 1px solid rgba(139,92,246,.35);
  transition: all .3s cubic-bezier(0.25, 1, 0.5, 1); cursor: pointer;
}
.c-dot.active {
  width: 28px; border-radius: var(--radius-pill);
  background: var(--primary-light); border-color: transparent;
}

/* CTA card */
.projects-cta-card {
  display: flex; align-items: center; gap: 28px;
  background: var(--surface); border: var(--border-purple);
  border-radius: var(--radius-lg); padding: 36px; margin-top: 56px; flex-wrap: wrap;
}
.pcc-icon {
  width: 60px; height: 60px; min-width: 60px;
  background: rgba(139,92,246,.15); border: var(--border-purple);
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; color: var(--primary-light);
}
.pcc-text { flex: 1; }
.pcc-text h3 { font-size: 1.2rem; margin-bottom: 8px; }
.pcc-text p { font-size: .9rem; color: var(--text-muted); }


/* ═══════════════════════════════════════════════════════════════════
   MODAL DE PROJETOS — LAYOUT DUAS COLUNAS
   CORREÇÕES APLICADAS:
   • Layout desktop: coluna esq. = vídeo em destaque, col. dir. = texto
   • Mobile: empilha perfeitamente
   • 3 botões estilizados premium na base da coluna de texto
   • Removida barra horizontal extra abaixo do texto descritivo
═══════════════════════════════════════════════════════════════════ */

.pmodal-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  opacity: 0; pointer-events: none;
  transition: opacity .35s ease;
}
.pmodal-backdrop.pmodal-open {
  opacity: 1; pointer-events: auto;
}

/* Container principal do modal */
.pmodal-container {
  position: relative;
  width: 100%; max-width: 1000px;
  max-height: 90vh;
  background: var(--surface);
  border: 1px solid rgba(139,92,246,.4);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(139,92,246,.2),
    0 0 60px rgba(139,92,246,.15),
    0 32px 80px rgba(0,0,0,.6);
  display: flex;
  flex-direction: column;
  transition: transform .35s cubic-bezier(0.25, 1, 0.5, 1), opacity .35s ease;
  transform: translateY(20px) scale(.97);
}
.pmodal-backdrop.pmodal-open .pmodal-container {
  transform: translateY(0) scale(1);
}

/* Botão fechar */
.pmodal-close {
  position: absolute; top: 14px; right: 14px; z-index: 10;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(139,92,246,.15);
  border: 1px solid rgba(139,92,246,.35);
  color: var(--primary-light);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; cursor: pointer;
  transition: all .25s ease;
}
.pmodal-close:hover {
  background: rgba(139,92,246,.35);
  box-shadow: 0 0 12px rgba(139,92,246,.4);
  transform: rotate(90deg) scale(1.1);
}

/* Cabeçalho do modal */
.pmodal-header {
  padding: 22px 26px 16px;
  border-bottom: 1px solid rgba(139,92,246,.15);
  flex-shrink: 0;
}
.pmodal-cat {
  font-family: var(--font-code); font-size: .7rem;
  font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--primary-light);
  background: rgba(139,92,246,.12);
  border: 1px solid rgba(139,92,246,.3);
  border-radius: var(--radius-pill); padding: 3px 12px;
  display: inline-block; margin-bottom: 10px;
}
.pmodal-title {
  font-size: 1.4rem; font-weight: 800; line-height: 1.25;
  margin-bottom: 10px;
}
.pmodal-tags {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.pmodal-tags span {
  font-family: var(--font-code); font-size: .68rem;
  color: var(--primary-light);
  background: rgba(139,92,246,.08);
  border: 1px solid rgba(139,92,246,.25);
  border-radius: var(--radius-pill); padding: 3px 10px;
}

/* ══════════════════════════════════════════════════════════
   CORPO DO MODAL — DUAS COLUNAS (Desktop)
   Esquerda: vídeo/mídia em destaque
   Direita: texto + botões de ação
═══════════════════════════════════════════════════════════ */
.pmodal-body-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  flex: 1;
  overflow: hidden;
  min-height: 0;
}

/* Coluna esquerda — Vídeo */
.pmodal-media-col {
  position: relative;
  background: #000;
  overflow: hidden;
}
.pmodal-media {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  min-height: 280px;
}
.pmodal-media video,
.pmodal-media iframe {
  width: 100%; height: 100%;
  object-fit: cover; display: block; border: none;
}
.pmodal-media img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.pmodal-media-placeholder {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 12px; width: 100%; height: 100%;
  min-height: 280px;
  color: rgba(139,92,246,.35);
}
.pmodal-media-placeholder i { font-size: 3rem; }
.pmodal-media-placeholder span { font-size: .85rem; color: var(--text-muted); }

/* Coluna direita — Texto e botões */
.pmodal-text-col {
  display: flex;
  flex-direction: column;
  padding: 24px 26px;
  overflow-y: auto;
  max-height: 100%;
  gap: 16px;
}

/* Texto descritivo */
.pmodal-desc {
  font-size: .92rem;
  color: var(--text-muted);
  line-height: 1.75;
  flex: 1;
}

/* Detalhes técnicos */
.pmodal-details {
  font-size: .82rem;
  color: rgba(139,92,246,.75);
  font-family: var(--font-code);
  background: rgba(139,92,246,.06);
  border: 1px solid rgba(139,92,246,.18);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  line-height: 1.8;
}

/* ══════════════════════════════════════════════════════════
   BOTÕES DE AÇÃO DO MODAL — 3 botões premium uniformes
   CORREÇÃO: sem barra separadora acima, espaçamento via gap
═══════════════════════════════════════════════════════════ */
.pmodal-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: auto;
  padding-top: 4px;
  /* CORREÇÃO: sem border-top — removida a barra horizontal indesejada */
}

/* Botão base compartilhado — estilo premium uniforme */
.pmodal-btn-deploy,
.pmodal-btn-github,
.pmodal-btn-contact {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 18px;
  border-radius: var(--radius-sm);
  font-family: var(--font-title);
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all .3s cubic-bezier(0.25, 1, 0.5, 1);
  isolation: isolate;
}

/* Efeito fill no hover via pseudo-elemento */
.pmodal-btn-deploy::before,
.pmodal-btn-github::before,
.pmodal-btn-contact::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--gradient-primary);
  opacity: 0;
  transition: opacity .3s ease;
  z-index: -1;
}
.pmodal-btn-deploy:hover::before,
.pmodal-btn-github:hover::before,
.pmodal-btn-contact:hover::before { opacity: 1; }

/* Botão "Acessar Deploy" — destaque primário */
.pmodal-btn-deploy {
  background: var(--gradient-primary);
  color: #fff;
  border: 1px solid transparent;
  box-shadow: 0 0 16px rgba(139,92,246,.25);
}
.pmodal-btn-deploy:hover {
  box-shadow: 0 0 28px rgba(139,92,246,.5), 0 4px 20px rgba(0,0,0,.3);
  transform: translateY(-2px);
}
.pmodal-btn-deploy::before { background: rgba(255,255,255,.12); }

/* Botão "Repositório GitHub" — secundário */
.pmodal-btn-github {
  background: transparent;
  color: var(--primary-light);
  border: 1px solid rgba(139,92,246,.45);
}
.pmodal-btn-github:hover {
  color: #fff;
  border-color: transparent;
  box-shadow: 0 0 20px rgba(139,92,246,.35);
  transform: translateY(-2px);
}

/* Botão "Entre em Contato" — terciário sutil */
.pmodal-btn-contact {
  background: rgba(139,92,246,.06);
  color: var(--primary-light);
  border: 1px solid rgba(139,92,246,.25);
}
.pmodal-btn-contact:hover {
  color: #fff;
  border-color: transparent;
  box-shadow: 0 0 20px rgba(139,92,246,.3);
  transform: translateY(-2px);
}

/* ── Mobile: empilha as duas colunas ── */
@media (max-width: 768px) {
  .pmodal-body-grid {
    grid-template-columns: 1fr;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
  }
  .pmodal-media-col {
    min-height: 200px;
    max-height: 220px;
  }
  .pmodal-media { min-height: 200px; }
  .pmodal-text-col {
    overflow-y: visible;
    max-height: none;
  }
  .pmodal-container {
    max-height: 95vh;
    overflow-y: auto;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   SEÇÃO DE CONTATO — VERSÃO PREMIUM CORRIGIDA
   CORREÇÕES APLICADAS:
   • Título/subtítulo consistentes com demais seções (section-header)
   • Parallax elegante com gradiente cyberpunk sobre imagem/vídeo
   • Inputs e botões com glow neon uniforme
   • Sem "fundo preto desunido" — gradiente multi-layer conectado
═══════════════════════════════════════════════════════════════════ */

.contact-section {
  position: relative;
  overflow: hidden;
  padding: 130px 8% 110px;
  /* PARALLAX: gradiente cyberpunk sobre fundo escuro */
  background:
    radial-gradient(ellipse at 20% 50%, rgba(109,40,217,.08) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 20%, rgba(139,92,246,.06) 0%, transparent 50%),
    radial-gradient(ellipse at 60% 80%, rgba(88,28,135,.07) 0%, transparent 50%),
    var(--body-bg);
}

/* Efeito parallax: camada de imagem de fundo
   ════════════════════════════════════════════════════════
   IMAGEM DE FUNDO: altere a URL abaixo para personalizar.
   Ex: url('assets/img/contact-bg.webp') ou url('assets/video/...')
   Mantenha o gradiente overlay para legibilidade.
   ════════════════════════════════════════════════════════ */
.contact-section::before {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  /* URL DA IMAGEM DE FUNDO — ALTERE AQUI: */
  background-image: url('');
  /* Caso não use imagem, este gradiente já cria profundidade cyberpunk */
  background: linear-gradient(
    135deg,
    rgba(9,9,11,1)    0%,
    rgba(15,10,30,1)  30%,
    rgba(9,9,11,1)    60%,
    rgba(20,8,40,.95) 100%
  );
  background-size: cover;
  background-position: center;
  /* Efeito parallax via transform no scroll — ativado pelo JS */
  will-change: transform;
}

/* Grid de linhas sutil — conecta visualmente com seções anteriores */
.contact-section::after {
  content: "";
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image:
    linear-gradient(rgba(139,92,246,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(139,92,246,.025) 1px, transparent 1px);
  background-size: 80px 80px;
}

/* Vídeo de fundo (mantido para compatibilidade) */
.contact-bg-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; z-index: 2;
  opacity: 150;
}

.contact-overlay {
  position: absolute; inset: 0; z-index: 3;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,.88) 0%,
    rgba(0,0,0,.82) 50%,
    rgba(0,0,0,.90) 100%
  );
}

.contact-container {
  position: relative; z-index: 5;
  max-width: 1100px; margin: 0 auto;
}

/* ══════════════════════════════════════════════════════════
   CABEÇALHO DE CONTATO — Alinhado ao padrão do site
   CORREÇÃO: usa as mesmas classes/estilos de section-header
   das seções Projetos e Zyntek
═══════════════════════════════════════════════════════════ */
.contact-header {
  text-align: center;
  margin-bottom: 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Pílula de badge — idêntica às demais seções */
.contact-header .section-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-code);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--primary-light);
  background: rgba(139,92,246,.1);
  border: 1px solid rgba(139,92,246,.3);
  border-radius: var(--radius-pill);
  padding: 6px 18px;
  margin-bottom: 24px;
}

/* Título principal — igual ao section-title das demais seções */
.contact-header h2 {
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: 16px;
  /* Gradiente de texto consistente com o resto do site */
  background: var(--gradient-primary, linear-gradient(135deg, #a78bfa, #7c3aed));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Subtítulo — idêntico ao section-desc */
.contact-header p {
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1.7;
  max-width: 560px;
}
.contact-header p .text-purple {
  color: var(--primary-light);
  font-weight: 600;
}

/* Grid de cards */
.contact-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 30px;
  align-items: start;
}

/* Card base */
.contact-card {
  position: relative;
  padding: 40px 36px;
  border-radius: 22px;
  background: rgba(8,8,12,.85);
  border: 1px solid rgba(139,92,246,.20);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition:
    border-color .35s cubic-bezier(0.25, 1, 0.5, 1),
    box-shadow .35s cubic-bezier(0.25, 1, 0.5, 1);
}
.contact-card:hover {
  border-color: rgba(139,92,246,.50);
  box-shadow:
    0 0 30px rgba(139,92,246,.12),
    0 0 60px rgba(109,40,217,.08);
}

/* Título dos cards — centralizado com ícone roxo */
.contact-card-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 1.3rem; font-weight: 700;
  margin-bottom: 20px; color: #fff;
  text-align: center; width: 100%;
}

.icon-purple {
  color: var(--primary-light) !important;
  font-size: 1.2rem; font-weight: 700;
  filter: drop-shadow(0 0 6px rgba(139,92,246,.55));
  transition: filter .3s ease;
  flex-shrink: 0;
}
.icon-purple:hover { filter: drop-shadow(0 0 12px rgba(139,92,246,.85)); }
.icon-purple i { color: var(--primary-light); font-size: 1.2rem; }

.contact-form-header p {
  color: var(--text-muted);
  font-size: .9rem; margin-bottom: 24px; text-align: center;
}

/* Grupos de formulário */
.form-group { margin-bottom: 16px; position: relative; }
.form-group label {
  display: block; font-size: .88rem; font-weight: 500;
  color: rgba(255,255,255,.72); margin-bottom: 7px;
}
.form-input-wrapper {
  position: relative; display: flex; align-items: center;
}
.form-icon {
  position: absolute; left: 14px;
  font-size: 1rem; color: var(--primary-light); opacity: .85;
  z-index: 2; pointer-events: none;
  transition: color .25s ease, opacity .25s ease, filter .25s ease;
  filter: drop-shadow(0 0 4px rgba(139,92,246,.3));
}
.form-input-wrapper:focus-within .form-icon {
  opacity: 1;
  filter: drop-shadow(0 0 10px rgba(139,92,246,.75));
}

/* ══════════════════════════════════════════════════════════
   INPUTS — Hover e focus com glow neon uniforme
   MELHORIA: mesmo padrão de animação dos botões do site
═══════════════════════════════════════════════════════════ */
.form-input-wrapper input,
.form-input-wrapper textarea {
  width: 100%;
  padding: 14px 18px 14px 42px;
  border-radius: 12px;
  border: 1px solid rgba(139,92,246,.22);
  background: rgba(255,255,255,.04);
  color: #fff; font-size: .96rem;
  font-family: inherit; outline: none; resize: none;
  transition:
    border-color .3s cubic-bezier(0.25, 1, 0.5, 1),
    box-shadow .3s cubic-bezier(0.25, 1, 0.5, 1),
    background .3s ease;
}
.textarea-wrapper { align-items: flex-start; }
.textarea-wrapper .form-icon { top: 15px; align-self: flex-start; }

.form-input-wrapper input::placeholder,
.form-input-wrapper textarea::placeholder { color: rgba(255,255,255,.35); }

/* Hover — glow suave */
.form-input-wrapper input:hover,
.form-input-wrapper textarea:hover {
  border-color: rgba(139,92,246,.42);
  background: rgba(255,255,255,.05);
}

/* Focus — glow neon forte, consistente com hover dos botões */
.form-input-wrapper input:focus,
.form-input-wrapper textarea:focus {
  border-color: rgba(139,92,246,.75);
  box-shadow:
    0 0 0 3px rgba(139,92,246,.12),
    0 0 16px rgba(139,92,246,.18);
  background: rgba(255,255,255,.06);
}

.form-input-wrapper input.invalid,
.form-input-wrapper textarea.invalid {
  border-color: rgba(255,80,80,.65);
  box-shadow: 0 0 0 3px rgba(255,80,80,.1);
}

.form-error {
  display: block; color: rgba(255,100,100,.9);
  font-size: .78rem; margin-top: 5px; min-height: 1em;
}

/* ══════════════════════════════════════════════════════════
   BOTÃO DO FORMULÁRIO — Neon glow uniforme
   MELHORIA: mesma animação dos botões principais do site
═══════════════════════════════════════════════════════════ */
.contact-btn {
  width: 100%; margin-top: 6px;
  padding: 15px 28px; border-radius: 14px;
  font-size: .96rem; font-weight: 700;
  font-family: var(--font-title);
  display: flex; align-items: center; justify-content: center;
  gap: 10px; cursor: pointer;
  position: relative; overflow: hidden; isolation: isolate;
  border: 1px solid rgba(139,92,246,.45);
  background: transparent; color: #fff;
  transition: all .35s cubic-bezier(0.25, 1, 0.5, 1);
}
.contact-btn::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--gradient-primary, linear-gradient(135deg, #7c3aed, #a855f7));
  opacity: 0;
  transition: opacity .35s ease;
  z-index: -1;
}
.contact-btn:hover::before { opacity: 1; }
.contact-btn:hover {
  border-color: rgba(139,92,246,.85);
  transform: translateY(-3px);
  box-shadow:
    0 0 24px rgba(139,92,246,.45),
    0 8px 32px rgba(0,0,0,.3);
}
.contact-btn:active { transform: translateY(-1px); }

/* btn-zyntek compartilhado */
.btn-zyntek {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px; cursor: pointer;
  position: relative; overflow: hidden; isolation: isolate;
  background: transparent; color: #fff;
  transition: all .35s cubic-bezier(0.25, 1, 0.5, 1);
}
.btn-zyntek::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  opacity: 0;
  transition: opacity .35s ease;
  z-index: -1;
}
.btn-zyntek:hover::before { opacity: 1; }
.btn-zyntek:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 24px rgba(139,92,246,.45), 0 8px 32px rgba(0,0,0,.3);
}

/* Hub digital */
.social-hub-header { margin-bottom: 0; }
.social-hub-header h3 { font-size: 1.3rem; font-weight: 700; color: #fff; }

.social-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 16px; margin-bottom: 28px; margin-top: 24px;
}
.social-grid--5col {
  grid-template-columns: repeat(5, 1fr); gap: 10px;
}

.social-item {
  display: flex; flex-direction: column;
  align-items: center; gap: 8px;
  padding: 12px 6px; border-radius: 14px;
  border: 1px solid rgba(255,255,255,.07);
  background: rgba(255,255,255,.03);
  transition:
    border-color .3s cubic-bezier(0.25, 1, 0.5, 1),
    box-shadow .3s cubic-bezier(0.25, 1, 0.5, 1),
    transform .3s cubic-bezier(0.25, 1, 0.5, 1),
    background .3s ease;
  text-align: center;
}
.social-item:hover {
  border-color: rgba(139,92,246,.55);
  box-shadow: 0 0 18px rgba(139,92,246,.25);
  transform: translateY(-4px);
  background: rgba(139,92,246,.07);
}
.social-item img {
  width: 28px; height: 28px; object-fit: contain;
  transition: filter .3s ease, transform .3s ease;
}
.social-item:hover img {
  filter: drop-shadow(0 0 8px rgba(139,92,246,.7));
  transform: scale(1.12);
}
.social-icon-github {
  width: 28px; height: 28px; font-size: 28px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.88);
  transition: filter .3s ease, transform .3s ease, color .3s ease;
}
.social-item-github:hover .social-icon-github {
  filter: drop-shadow(0 0 8px rgba(139,92,246,.7));
  transform: scale(1.12); color: #fff;
}
.social-item span {
  font-size: .68rem; font-weight: 500; color: var(--text-muted);
  transition: color .3s ease; white-space: nowrap;
}
.social-item:hover span { color: var(--primary-light); }

.hub-mascot-wrapper {
  display: flex; justify-content: center; align-items: center;
  margin: 20px 0; padding: 0 12px;
}
.hub-mascot-img {
  width: 100%; max-width: 180px;
  filter: drop-shadow(0 0 18px rgba(139,92,246,.35));
  animation: floatingElement 5s ease-in-out infinite;
  display: block; margin: 0 auto;
}

.social-info {
  padding-top: 16px; border-top: 1px solid rgba(255,255,255,.07);
}
.social-info p {
  color: var(--text-muted); font-size: .9rem;
  line-height: 1.7; margin-bottom: 16px;
}

/* Botão "Conhecer Zyntek" */
.btn-conhecer {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px; padding: 14px 28px; border-radius: 12px;
  font-size: .95rem; font-weight: 600; cursor: pointer;
  border: 1px solid rgba(139,92,246,.45);
  background: transparent; color: #fff;
  width: 100%; text-align: center; text-decoration: none;
  position: relative; overflow: hidden; isolation: isolate;
  transition: all .35s cubic-bezier(0.25, 1, 0.5, 1);
}
.btn-conhecer::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  width: 0; z-index: -1;
  transition: width .4s ease; border-radius: inherit; pointer-events: none;
}
.btn-conhecer:hover::before { width: 100%; }
.btn-conhecer:hover {
  border-color: rgba(167,139,250,.85);
  transform: translateY(-3px);
  box-shadow: 0 0 24px rgba(139,92,246,.4);
}

/* Seção hero (mantida) */
.hero-section { position: relative; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero-video {
  position: absolute; top: 50%; left: 50%;
  width: 100%; height: 100%; object-fit: cover;
  transform: translate(-50%, -50%); z-index: -3;
}
.hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.70)); z-index: -2;
}

.logo { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.logo-image { width: 48px; height: 48px; object-fit: contain; transition: all .3s ease; }
.logo:hover .logo-image { transform: rotate(8deg) scale(1.08); }

/* ── Responsivo — Contato ── */
@media (max-width: 900px) {
  .contact-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 640px) {
  .contact-section { padding: 80px 6% 80px; }
  .contact-card { padding: 28px 22px; }
  .social-grid--5col {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* =============================================================
   ZYNTEK — MELHORIAS v5
   1. Preloader Animado
   2. Painel Acessibilidade (Dark/Purple Theme)
   3. Navbar Extras (Engrenagem + Idioma)
   4. Vídeo Autoplay no Modal de Projetos
============================================================= */


/* ── 1. PRELOADER ───────────────────────────────────────────── */

#zyntek-preloader {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 36px;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}

#zyntek-preloader.preloader-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Núcleo com anel giratório */
.preloader-core {
  position: relative;
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.preloader-glow-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: var(--primary);
  border-right-color: rgba(163, 0, 255, 0.35);
  animation: preloaderSpin 1.1s linear infinite;
  box-shadow: 0 0 22px rgba(163, 0, 255, 0.5);
}

.preloader-glow-ring::after {
  content: '';
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  border: 1px solid rgba(163, 0, 255, 0.18);
  border-bottom-color: var(--primary-lt);
  animation: preloaderSpin 1.8s linear infinite reverse;
}

@keyframes preloaderSpin {
  to { transform: rotate(360deg); }
}

/* Letra Z */
.preloader-z {
  font-size: 4rem;
  font-weight: 900;
  color: var(--primary);
  line-height: 1;
  letter-spacing: -2px;
  animation: preloaderPulse 1.5s ease-in-out infinite;
  text-shadow:
    0 0 14px rgba(163, 0, 255, 0.9),
    0 0 32px rgba(163, 0, 255, 0.6),
    0 0 60px rgba(163, 0, 255, 0.35);
  user-select: none;
}

@keyframes preloaderPulse {
  0%, 100% {
    text-shadow:
      0 0 10px rgba(163,0,255,.7),
      0 0 24px rgba(163,0,255,.45),
      0 0 50px rgba(163,0,255,.25);
  }
  50% {
    text-shadow:
      0 0 18px rgba(163,0,255,1),
      0 0 40px rgba(163,0,255,.75),
      0 0 80px rgba(163,0,255,.5),
      0 0 120px rgba(163,0,255,.25);
  }
}

/* Barra de progresso */
.preloader-bar-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 220px;
}

.preloader-bar-track {
  width: 100%;
  height: 3px;
  background: rgba(163, 0, 255, 0.14);
  border-radius: var(--r-full);
  overflow: hidden;
  position: relative;
}

.preloader-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--primary-dk), var(--primary), var(--primary-lt));
  border-radius: var(--r-full);
  transition: width 0.06s linear;
  box-shadow: 0 0 10px rgba(163, 0, 255, 0.7), 0 0 20px rgba(163, 0, 255, 0.4);
  position: relative;
}

/* Faísca na ponta da barra */
.preloader-bar-fill::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 8px var(--primary), 0 0 16px var(--primary-lt);
}

.preloader-percent {
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 2px;
  font-variant-numeric: tabular-nums;
}

/* ═══════════════════════════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════════════════════════ */
.site-footer{position:relative;background:var(--dark);padding:80px 0 0;border-top:var(--border);}
.footer-bg{position:absolute;inset:0;pointer-events:none;}
.footer-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(139,92,246,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(139,92,246,.03) 1px,transparent 1px);background-size:80px 80px;}
.footer-gradient{position:absolute;top:0;left:50%;transform:translateX(-50%);width:800px;height:300px;background:radial-gradient(ellipse,rgba(109,40,217,.06) 0%,transparent 70%);}
.footer-grid-layout{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:48px;margin-bottom:60px;position:relative;}
.footer-logo{display:flex;align-items:center;gap:8px;font-family:var(--font-title);font-size:1.1rem;font-weight:800;margin-bottom:16px;}
.footer-brand-desc{font-size:.88rem;color:var(--text-muted);line-height:1.8;margin-bottom:20px;}
.footer-social{display:flex;gap:10px;}
.footer-social a{width:36px;height:36px;background:var(--surface);border:var(--border);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-size:1rem;color:var(--text-muted);transition:all .25s ease;}
.footer-social a:hover{color:var(--primary-light);border-color:rgba(139,92,246,.4);background:rgba(139,92,246,.1);}
.footer-col h3{font-size:.95rem;color:var(--text-primary);margin-bottom:18px;font-family:var(--font-code);letter-spacing:.04em;}
.footer-col ul{display:flex;flex-direction:column;gap:10px;}
.footer-col li{font-size:.85rem;color:var(--text-muted);display:flex;align-items:center;gap:8px;transition:color .2s ease;}
.footer-col li:hover{color:var(--primary-light);}
.footer-col a{transition:color .2s ease;}
.footer-col a:hover{color:var(--primary-light);}
.footer-cta{display:flex;align-items:center;gap:28px;background:var(--surface);border:var(--border-purple);border-radius:var(--radius-lg);padding:32px 40px;margin-bottom:48px;flex-wrap:wrap;position:relative;}
.footer-cta-icon{width:52px;height:52px;min-width:52px;background:rgba(139,92,246,.15);border:var(--border-purple);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-size:1.4rem;color:var(--primary-light);}
.footer-cta-text{flex:1;}
.footer-cta-text h3{font-size:1.15rem;margin-bottom:6px;}
.footer-cta-text p{font-size:.88rem;color:var(--text-muted);}
.footer-divider{height:1px;background:linear-gradient(90deg,transparent,rgba(139,92,246,.3),transparent);margin-bottom:24px;}
.footer-bottom{padding-bottom:40px;}
.footer-bottom-inner{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;}
.footer-bottom-inner p{font-size:.82rem;color:var(--text-muted);}
.footer-bottom-inner a{color:var(--primary-light);transition:color .2s ease;}
.footer-bottom-inner a:hover{color:var(--secondary);}

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE — TABLET
═══════════════════════════════════════════════════════════════════ */
@media(max-width:1024px){
  .hero-content-wrap{grid-template-columns:1fr;gap:48px;text-align:center;}
  .hero-text{display:flex;flex-direction:column;align-items:center;}
  .hero-btns{justify-content:center;}
  .hero-status{justify-content:center;}
  .hero-image-area{justify-content:center;}
  .about-grid{grid-template-columns:1fr;}
  .zyntek-layout{grid-template-columns:1fr;text-align:center;}
  .mascot-area{justify-content:center;}
  .company-actions{justify-content:center;}
  .contact-layout{grid-template-columns:1fr;}
  .footer-grid-layout{grid-template-columns:1fr 1fr;gap:36px;}
  .skills-grid{grid-template-columns:repeat(3,1fr);}
  /* .project-card min-width: calculado pelo JS com base no breakpoint */
  .about-stats{grid-template-columns:repeat(3,1fr);}
  .tl-item{grid-template-columns:1fr 56px 1fr;}
  .feature-list{grid-template-columns:1fr;}
}

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE — MOBILE
═══════════════════════════════════════════════════════════════════ */
@media(max-width:768px){
  :root{--section-gap:90px;}
  .desktop-nav{display:none;}
  .header-cta-btn{display:none;}
  .lang-wrap{display:none;}
  .mobile-menu-btn{display:flex;width:44px;height:44px;justify-content:center;align-items:center;}
  /* Ativa o drawer e o backdrop em mobile */
  .mobile-menu{display:block;}
  .mobile-menu-backdrop{display:block;}
  /* Área de toque confortável (mín. 44px) para os controles do header em mobile */
  .ctrl-btn{width:44px;height:44px;}
  .mobile-link{min-height:44px;display:flex;align-items:center;}
  .mobile-cta{min-height:48px;}
  .carousel-arrow{width:48px;height:48px;}
  .scroll-top-btn{width:48px;height:48px;}
  .floating-whatsapp{width:54px;height:54px;}
  /* Cyber frame responsivo sem largura fixa */
  .cyber-frame{width:min(280px,80vw);height:auto;aspect-ratio:0.82;}
  .float-tag{display:none;}
  .orbit{display:none;}
  .skills-grid{grid-template-columns:repeat(2,1fr);}
  .timeline::before{left:28px;}
  .tl-item{grid-template-columns:56px 1fr;gap:0;}
  .tl-item.tl-right .tl-node,.tl-item.tl-left .tl-node{grid-column:1;grid-row:1;}
  .tl-item.tl-right .tl-card{grid-column:2;padding-left:20px;text-align:left;}
  .tl-item.tl-left .tl-card{grid-column:2;grid-row:1;text-align:left;padding-right:0;padding-left:20px;}
  .tl-item.tl-left .tl-node{grid-row:1;}
  /* Timeline cards: sem largura fixa, usa o espaço disponível */
  .tl-item.tl-left .tl-card,
  .tl-item.tl-right .tl-card{width:100%;max-width:100%;}
  .footer-grid-layout{grid-template-columns:1fr;}
  .footer-cta{flex-direction:column;text-align:center;}
  .footer-bottom-inner{flex-direction:column;text-align:center;}
  .projects-cta-card{flex-direction:column;text-align:center;}
  .edu-highlight-card{flex-direction:column;}
  .skills-footer-card{flex-direction:column;}
  .about-stats{grid-template-columns:1fr 1fr 1fr;}
  /* .project-card min-width: calculado pelo JS com base no breakpoint */
  .social-grid{grid-template-columns:repeat(3,1fr);}
  .company-stats{grid-template-columns:repeat(3,1fr);}
  .mascot-frame{width:min(280px,80vw);height:min(280px,80vw);}
  .hero-name{font-size:2rem;}
  /* About grid em mobile */
  .about-grid{grid-template-columns:1fr;}
  /* Zyntek blocks em mobile */
  .zyntek-block{grid-template-columns:1fr;}
  /* Mascot area: sem overflow lateral */
  .mascot-area{padding:40px 16px;}
  /* Floating tags do mascot: reorganizar para não sair da tela */
  .mascot-tag{position:relative;top:auto!important;left:auto!important;right:auto!important;bottom:auto!important;transform:none!important;}
  /* Hero grid em mobile */
  .hero-content-wrap{grid-template-columns:1fr;text-align:center;}
  .hero-image-area{justify-content:center;}
  .hero-desc{max-width:100%;}
  .hero-btns{justify-content:center;}
  .hero-status{justify-content:center;}
}

@media(max-width:480px){
  :root{--section-gap:70px;}
  .container{width:calc(100% - 32px);}
  .mobile-menu{width:100%;max-width:100%;}
  .skills-grid{grid-template-columns:1fr;}
  .about-stats{grid-template-columns:1fr;}
  .company-stats{grid-template-columns:1fr}
  .hero-btns{flex-direction:column;width:100%;}
  .btn-primary,.btn-secondary{justify-content:center;}
  /* Skill cards: padding menor para caber em telas pequenas */
  .skill-card{padding:24px 16px;}
  /* Header controls: ocultar CTA extra em telas muito pequenas */
  .header-cta-btn{display:none;}
}

/* ═══════════════════════════════════════════════════════════════════
   MODAL DE PROJETO
═══════════════════════════════════════════════════════════════════ */
.pmodal-backdrop{
  position:fixed;inset:0;z-index:1100;
  background:rgba(0,0,0,.75);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  display:flex;align-items:center;justify-content:center;
  padding:20px;
  opacity:0;
  transition:opacity .35s ease;
}
.pmodal-backdrop.pmodal-open{opacity:1;}
.pmodal-backdrop[hidden]{display:none;}

.pmodal-container{
  position:relative;
  background:var(--surface-2);
  border:1px solid rgba(168,85,247,.45);
  border-radius:var(--radius-lg);
  width:100%;
  max-width:860px;
  max-height:90vh;
  overflow-y:auto;
  padding:40px;
  box-shadow:0 0 60px rgba(139,92,246,.25),var(--shadow-lg);
  transform:translateY(28px) scale(.97);
  transition:transform .35s cubic-bezier(.4,0,.2,1),opacity .35s ease;
  scrollbar-width:thin;
  scrollbar-color:rgba(139,92,246,.4) transparent;
}
.pmodal-backdrop.pmodal-open .pmodal-container{
  transform:translateY(0) scale(1);
}

/* linha de brilho neon no topo do container */
.pmodal-container::before{
  content:"";
  position:absolute;top:0;left:10%;right:10%;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(168,85,247,.8),transparent);
  border-radius:999px;
}

.pmodal-close{
  position:absolute;top:16px;right:16px;
  width:36px;height:36px;
  border-radius:50%;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  color:var(--text-muted);
  font-size:1.1rem;
  display:flex;align-items:center;justify-content:center;
  transition:all .25s ease;
  z-index:10;
}
.pmodal-close:hover{
  background:rgba(139,92,246,.25);
  border-color:rgba(168,85,247,.5);
  color:var(--primary-light);
  transform:rotate(90deg);
}

/* HEADER DO MODAL */
.pmodal-header{margin-bottom:22px;}
.pmodal-cat{
  font-family:var(--font-code);font-size:.72rem;font-weight:700;
  letter-spacing:.12em;color:var(--primary-light);
  background:rgba(139,92,246,.12);border:var(--border-purple);
  border-radius:var(--radius-pill);padding:4px 14px;
  display:inline-block;margin-bottom:12px;
}
.pmodal-title{
  font-size:clamp(1.4rem,4vw,2rem);
  letter-spacing:-.02em;
  margin-bottom:14px;
  background:var(--gradient-primary);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.pmodal-tags{display:flex;flex-wrap:wrap;gap:8px;}
.pmodal-tags span{
  font-family:var(--font-code);font-size:.72rem;
  color:var(--primary-light);
  background:rgba(139,92,246,.1);border:var(--border-purple);
  border-radius:var(--radius-pill);padding:3px 12px;
}

/* ÁREA DE MÍDIA */
.pmodal-media{
  width:100%;aspect-ratio:16/9;
  background:var(--dark-3);border:var(--border);
  border-radius:var(--radius-md);overflow:hidden;
  margin-bottom:24px;position:relative;
}
.pmodal-media video{width:100%;height:100%;object-fit:cover;display:block;}
.pmodal-media iframe{width:100%;height:100%;border:none;display:block;}
.pmodal-media img{width:100%;height:100%;object-fit:cover;display:block;}

/* placeholder quando não há mídia */
.pmodal-media-placeholder{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;color:var(--text-muted);
}
.pmodal-media-placeholder i{font-size:2.5rem;color:var(--primary-dark);}
.pmodal-media-placeholder span{font-family:var(--font-code);font-size:.8rem;}

/* CORPO DO MODAL */
.pmodal-body{margin-bottom:24px;}
.pmodal-desc{
  font-size:.95rem;color:var(--text-secondary);
  line-height:1.85;margin-bottom:16px;
}
.pmodal-details{
  font-family:var(--font-code);font-size:.8rem;
  color:var(--primary-light);
  background:rgba(139,92,246,.06);
  border:var(--border-purple);
  border-radius:var(--radius-sm);
  padding:12px 16px;
  letter-spacing:.03em;
}

/* BOTÕES DO MODAL */
.pmodal-actions{
  display:flex;gap:12px;flex-wrap:wrap;
  border-top:var(--border);padding-top:24px;
}
.pmodal-btn-deploy{flex:1;min-width:160px;justify-content:center;}
.pmodal-btn-github{
  display:inline-flex;align-items:center;gap:8px;
  padding:13px 22px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius-sm);
  font-family:var(--font-title);font-size:.9rem;font-weight:700;
  color:var(--text-secondary);
  transition:all .3s ease;
}
.pmodal-btn-github:hover{
  background:rgba(255,255,255,.1);
  color:var(--text-primary);
  border-color:rgba(255,255,255,.25);
}
.pmodal-btn-github i{font-size:1.1rem;}
.pmodal-btn-contact{justify-content:center;}

/* SCROLLBAR DO MODAL */
.pmodal-container::-webkit-scrollbar{width:5px;}
.pmodal-container::-webkit-scrollbar-track{background:transparent;}
.pmodal-container::-webkit-scrollbar-thumb{background:rgba(139,92,246,.4);border-radius:999px;}

/* RESPONSIVO DO MODAL */
@media(max-width:640px){
  .pmodal-container{padding:24px 20px;}
  .pmodal-actions{flex-direction:column;}
  .pmodal-btn-deploy,.pmodal-btn-github,.pmodal-btn-contact{width:100%;justify-content:center;}
  .pmodal-btn-github{justify-content:center;}
}

/* Ajusta o contêiner da imagem */
.footer-logo {
    display: flex;
    flex-direction: column;
    gap: 15px; /* Espaçamento entre o título e a imagem */
}

/* Ajusta o tamanho da logo */
.logo-footer {
    width: 100px; /* Ajuste o tamanho conforme necessário */
    height: auto;
    transition: transform 0.3s ease;
}

/* Efeito ao passar o mouse */
.logo-footer:hover {
    transform: scale(1.05);
    opacity: 0.8;
}

/* Deixa os títulos das colunas roxos */
.footer-title-purple {
  color: #a855f7 !important; /* Cor do seu roxo neon */
  font-weight: 600;
  margin-bottom: 1.5rem;
}

/* Alinha a logo, descrição e ícones sociais ao centro na coluna */
.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Garante que os links sociais fiquem centralizados horizontalmente */
.footer-social {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.5rem;
}

/* Estilização básica para o tamanho da nova imagem da logo */
.brand-logo-img {
  width: 40px; /* Ajuste o tamanho conforme preferir */
  height: auto;
  margin-bottom: 0.5rem;
}

/* Força o link de texto da logo a quebrar os itens em coluna para alinhar */
.footer-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
}

/* Container do Link para isolar os efeitos */
.footer-zyntek-link {
  display: inline-block;
  position: relative;
  perspective: 1000px; /* Cria profundidade para o efeito 3D */
  text-decoration: none;
}

/* Estado Inicial do Zynk */
.logo-footer {
  display: block;
  transition: 
    transform 0.5s cubic-bezier(0.25, 1, 0.5, 1), 
    filter 0.5s ease,
    opacity 0.3s ease;
  
  /* Filtro de espera: Brilho sutil e contraste cibernético */
  filter: 
    drop-shadow(0 0 8px rgba(168, 85, 247, 0.4)) 
    brightness(0.9) 
    contrast(1.1);
  
  /* Animação contínua sutil: flutuação magnética e pulso de energia */
  animation: zynkQuantumIdle 4s ease-in-out infinite;
}

/* EFEITO ULTRA PREMIUM NO HOVER (Passar o Mouse) */
.footer-zyntek-link:hover .logo-footer {
  /* 1. Efeito de projeção: Ele avança levemente em direção ao usuário e inclina */
  transform: scale(1.05) translateZ(20px) rotate(1deg);
  
  /* 2. Sobrecarga Neon: O robô acende intensamente, simulando ativação de IA */
  filter: 
    drop-shadow(0 0 25px rgba(168, 85, 247, 0.95)) 
    drop-shadow(0 0 50px rgba(139, 92, 246, 0.4))
    brightness(1.25) 
    contrast(1.2);
  
  cursor: pointer;
}

/* 3. Linha de Scanner Holográfico (Elemento extra opcional, mas espetacular) */
/* Cria uma linha horizontal de laser roxo que passa pelo robô ao passar o mouse */
.footer-zyntek-link::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #c084fc, #a855f7, transparent);
  opacity: 0;
  transform: translateY(0);
  pointer-events: none;
}

.footer-zyntek-link:hover::after {
  animation: holographicScan 1.2s linear infinite;
}

/* ═══════════════════════════════════════════════════════ */
/* KEYFRAMES (As Animações)                                */
/* ═══════════════════════════════════════════════════════ */

/* Flutuação Magnética em Espera */
@keyframes zynkQuantumIdle {
  0%, 100% {
    transform: translateY(0) scale(1);
    filter: drop-shadow(0 0 8px rgba(168, 85, 247, 0.4)) brightness(0.9);
  }
  50% {
    transform: translateY(-6px) scale(0.99); /* Levita sutilmente */
    filter: drop-shadow(0 0 18px rgba(168, 85, 247, 0.7)) brightness(1.05);
  }
}

/* Varredura de Laser no Hover */
@keyframes holographicScan {
  0% {
    top: 10%;
    opacity: 0;
  }
  10%, 90% {
    opacity: 0.8;
  }
  100% {
    top: 90%;
    opacity: 0;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   MODAL DE PROJETO — REESTRUTURAÇÃO: COLUNA ÚNICA FLUIDA
   Ordem: Título + Tags → Mídia (w-full) → Descrição/Detalhes → Botões
═══════════════════════════════════════════════════════════════════ */

.pmodal-container {
  width: 100%;
  max-width: 920px;
  max-height: 92vh;
  padding: 0;
  overflow-y: auto;
  display: block;
}

/* Cabeçalho: título grande + badges logo abaixo */
.pmodal-header {
  padding: 32px 32px 0;
  margin-bottom: 20px;
  border-bottom: none;
}
.pmodal-title {
  font-size: clamp(1.6rem, 4.5vw, 2.4rem);
  line-height: 1.2;
  margin-bottom: 14px;
}
.pmodal-cat {
  margin-bottom: 14px;
}
.pmodal-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Remove grid de duas colunas — fluxo único em coluna */
.pmodal-body-grid {
  display: flex;
  flex-direction: column;
  overflow: visible;
  min-height: 0;
  padding: 0 32px 32px;
  gap: 28px;
}

/* MÍDIA — largura total, retangular, destaque central */
.pmodal-media-col {
  width: 100%;
  background: transparent;
}
.pmodal-media {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  min-height: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--dark-3);
  border: var(--border);
}
.pmodal-media video,
.pmodal-media iframe,
.pmodal-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border: none;
}

/* DESCRIÇÃO — largura total, fluida */
.pmodal-text-col {
  width: 100%;
  padding: 0;
  overflow-y: visible;
  max-height: none;
  gap: 20px;
}
.pmodal-desc {
  font-size: 1rem;
  line-height: 1.85;
  flex: none;
}
.pmodal-details {
  font-size: .85rem;
  line-height: 1.9;
  padding: 14px 18px;
}

/* AÇÕES — 3 botões lado a lado no desktop */
.pmodal-actions {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 4px;
  padding-top: 24px;
  border-top: var(--border);
}
.pmodal-btn-deploy,
.pmodal-btn-github,
.pmodal-btn-contact {
  flex: 1;
  min-width: 180px;
  justify-content: center;
}

/* Remove scrollbar interna do container antigo */
.pmodal-container::-webkit-scrollbar { width: 5px; }
.pmodal-container::-webkit-scrollbar-track { background: transparent; }
.pmodal-container::-webkit-scrollbar-thumb { background: rgba(139,92,246,.4); border-radius: 999px; }

/* RESPONSIVO — mobile */
@media (max-width: 768px) {
  .pmodal-container {
    max-height: 95vh;
    padding: 0;
  }
  .pmodal-header { padding: 24px 20px 0; }
  .pmodal-body-grid { padding: 0 20px 24px; gap: 20px; }
  .pmodal-media { aspect-ratio: 16 / 10; }
  .pmodal-media-col { min-height: 0; max-height: none; }
  .pmodal-actions { flex-direction: column; }
  .pmodal-btn-deploy,
  .pmodal-btn-github,
  .pmodal-btn-contact { width: 100%; min-width: 0; }
}

/* ═══════════════════════════════════════════════════════════════════
   CORREÇÕES MOBILE — Levy Andrade Portfolio
   Bugs corrigidos: menu hambúrguer, seção Sobre, seção Zyntek,
   carrossel de projetos
═══════════════════════════════════════════════════════════════════ */

/* ─── 1. MENU LATERAL (HAMBÚRGUER) ──────────────────────────────── */
/* Garante que o botão esteja clicável e visível em mobile */
@media (max-width: 768px) {
  /* z-index do header garante que o botão fique acima de tudo */
  .site-header {
    z-index: 950;
  }

  /* Botão hambúrguer: visível, com área de toque adequada */
  .mobile-menu-btn {
    display: flex !important;
    position: relative;
    z-index: 960;
    width: 44px;
    height: 44px;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 5px;
    padding: 10px 8px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  /* Drawer: visível mas fora da tela até .open */
  .mobile-menu {
    display: block !important;
    position: fixed;
    top: 0;
    right: 0;
    width: 85%;
    max-width: 360px;
    height: 100dvh; /* dynamic viewport height para iOS */
    z-index: 1100;
    overflow: hidden;
    transform: translateX(100%);
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1),
                visibility 0.32s ease;
    visibility: hidden;
  }

  .mobile-menu.open {
    transform: translateX(0) !important;
    visibility: visible !important;
  }

  /* Backdrop */
  .mobile-menu-backdrop {
    display: block !important;
    position: fixed;
    inset: 0;
    z-index: 1099;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.32s ease;
  }

  .mobile-menu-backdrop.open {
    opacity: 1;
    pointer-events: auto;
  }

  /* Bloqueia scroll do body quando drawer aberto */
  body.mobile-menu-active {
    overflow: hidden;
    touch-action: none;
  }
}

@media (max-width: 480px) {
  .mobile-menu {
    width: 100%;
    max-width: 100%;
  }
}

/* ─── 2. SEÇÃO "SOBRE MIM" ───────────────────────────────────────── */
@media (max-width: 768px) {
  .about-section {
    overflow: hidden;
  }

  /* Força coluna única */
  .about-grid {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }

  /* Terminal: evita overflow lateral do JSON pre */
  .terminal-card {
    max-width: 100%;
    overflow: hidden;
  }

  .terminal-body {
    padding: 16px 14px;
    font-size: 0.78rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* O pre do JSON usa scroll horizontal em vez de quebrar o layout */
  .t-json {
    white-space: pre;
    overflow-x: auto;
    display: block;
    max-width: 100%;
    font-size: 0.74rem;
  }

  /* Textos da seção Sobre */
  .about-content {
    gap: 16px;
    width: 100%;
  }

  .about-content p {
    font-size: 0.95rem;
    line-height: 1.75;
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
  }

  .about-name {
    font-size: clamp(1.4rem, 6vw, 1.9rem);
    word-break: break-word;
  }

  /* Stats: 3 colunas menores ou 1 coluna em telas muito pequenas */
  .about-stats {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 12px;
  }

  .about-stat {
    padding: 14px 10px;
  }

  .about-stat h4 {
    font-size: 0.9rem;
  }

  .about-stat span {
    font-size: 0.75rem;
  }
}

@media (max-width: 420px) {
  .about-stats {
    grid-template-columns: 1fr !important;
  }

  .about-stat {
    padding: 14px 16px;
    flex-direction: row;
    align-items: center;
    gap: 10px;
  }

  /* Terminal: fonte ainda menor em telas muito estreitas */
  .terminal-body {
    font-size: 0.72rem;
    padding: 12px 10px;
  }
}

/* ─── 3. SEÇÃO "ZYNTEK" ─────────────────────────────────────────── */
@media (max-width: 768px) {
  .zyntek-section {
    overflow: hidden;
  }

  /* Blocos: empilhados verticalmente */
  .zyntek-block {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }

  /* Parte 1: mascote acima, texto abaixo */
  .zyntek-block--img-left .mascot-area {
    order: 1;
  }
  .zyntek-block--img-left .zyntek-content {
    order: 2;
  }

  /* Parte 2: card Zynk acima, texto abaixo em mobile */
  .zyntek-block--img-right .zynk-ai-content {
    order: 2 !important;
  }
  .zyntek-block--img-right .zynk-ai-visual {
    order: 1 !important;
  }

  /* Mascot: centralizado, tamanho responsivo sem overflow */
  .mascot-area {
    padding: 20px 16px !important;
    overflow: visible;
  }

  .mascot-frame {
    width: min(260px, 80vw) !important;
    height: min(260px, 80vw) !important;
  }

  /* Tags do mascot: ocultas em mobile para não vazar */
  .mascot-tag {
    display: none !important;
  }

  /* Textos Zyntek: sem overflow */
  .zyntek-content,
  .zynk-ai-content {
    width: 100%;
    overflow-wrap: break-word;
    word-break: break-word;
  }

  .zyntek-content p,
  .zynk-ai-desc {
    font-size: 0.95rem;
    line-height: 1.75;
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
  }

  .company-title,
  .zynk-ai-name {
    font-size: clamp(1.5rem, 6vw, 2rem) !important;
    word-break: break-word;
  }

  /* Card Zynk AI: largura responsiva */
  .zynk-ai-visual {
    width: 100%;
    justify-content: center;
  }

  .zynk-ai-frame {
    width: min(260px, 80vw) !important;
  }

  /* Tags Zynk AI */
  .zynk-ai-tags {
    gap: 8px;
  }

  .zynk-ai-tag {
    font-size: 0.7rem;
    padding: 5px 10px;
  }

  /* Botões Zyntek */
  .company-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .company-actions .btn-primary,
  .company-actions .btn-secondary {
    justify-content: center;
    width: 100%;
  }

  /* Stats Zyntek */
  .zyntek-bottom .about-stats {
    grid-template-columns: 1fr !important;
    gap: 12px;
  }

  /* Divisor */
  .zynk-divider {
    gap: 10px;
  }

  .zynk-divider-label {
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    white-space: nowrap;
  }
}


/* ─── 4. CARROSSEL DE PROJETOS ───────────────────────────────────── */
/* NOTA: os cards usam position:absolute dentro do stage, então o
   stage precisa de min-height explícita — sem ela ele colapsa para
   zero e o CTA card sobe e sobrepõe o carrossel. */
@media (max-width: 900px) {
  .pcarousel-outer {
    gap: 10px;
    padding: 16px 0 24px;
    align-items: center;
    margin-bottom: 8px;
  }

  /* min-height garante espaço para o card (imagem + corpo + botões) */
  .pcarousel-stage {
    min-height: 480px;
    overflow: visible;
  }

  .carousel-arrow {
    width: 40px !important;
    height: 40px !important;
    font-size: 1.1rem;
    flex-shrink: 0;
    position: relative;
    z-index: 10;
  }

  /* Card central: sem scale em mobile */
  .project-card.pc-center {
    transform: none !important;
    animation: none !important;
    box-shadow:
      0 0 0 1px rgba(139,92,246,.4),
      0 0 20px rgba(139,92,246,.25),
      0 8px 32px rgba(0,0,0,.35);
    border-color: rgba(139,92,246,.6);
  }

  .project-img-wrap {
    height: 180px;
  }

  /* Dots: respiro antes do CTA card */
  .carousel-dots {
    margin-top: 16px;
    margin-bottom: 0;
  }

  /* CTA card: margem explícita para não colidir com o stage */
  .projects-cta-card {
    margin-top: 40px;
  }
}

@media (max-width: 640px) {
  .pcarousel-stage {
    min-height: 440px;
  }

  .pcarousel-outer {
    gap: 8px;
    padding: 10px 0 20px;
  }

  .carousel-arrow {
    width: 36px !important;
    height: 36px !important;
    font-size: 1rem;
  }

  .project-body {
    padding: 14px 16px 18px;
  }

  .project-body h3 {
    font-size: 1rem;
  }

  .project-body p {
    font-size: 0.82rem;
    -webkit-line-clamp: 3;
  }

  .project-tags {
    gap: 5px;
  }

  .project-tags span {
    font-size: 0.66rem;
    padding: 2px 8px;
  }

  .project-actions {
    gap: 8px;
    flex-wrap: wrap;
  }

  .btn-project {
    font-size: 0.78rem;
    padding: 8px 14px;
    flex: 1;
    justify-content: center;
    min-width: 0;
  }

  .c-dot {
    width: 10px !important;
    height: 10px !important;
  }

  .carousel-dots {
    gap: 10px;
    margin-top: 16px;
  }

  .project-img-wrap {
    height: 160px;
  }

  /* CTA card: layout vertical limpo */
  .projects-cta-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    padding: 28px 20px;
    margin-top: 36px;
  }

  .projects-cta-card .pcc-icon {
    width: 48px;
    height: 48px;
    min-width: 48px;
    font-size: 1.3rem;
  }

  .projects-cta-card .pcc-text h3 {
    font-size: 1.05rem;
  }

  .projects-cta-card .pcc-text p {
    font-size: 0.85rem;
    line-height: 1.7;
  }

  .projects-cta-card .btn-primary {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 400px) {
  .carousel-arrow {
    width: 32px !important;
    height: 32px !important;
    font-size: 0.9rem;
  }

  .pcarousel-outer {
    gap: 6px;
  }

  .project-actions {
    flex-direction: column;
  }

  .btn-project {
    width: 100%;
    justify-content: center;
  }
}