/* ==========================================
   ZAIMOON — CAMILO ZAPATA PORTFOLIO
   ========================================== */

:root {
  --cyan:         #00e5ff;
  --cyan-light:   #80f0ff;
  --sky:          #38bdf8;
  --sky-light:    #bae6fd;
  --dark:         #020c18;
  --dark-2:       #041427;
  --dark-3:       #071e35;
  --glass:        rgba(0,229,255,0.06);
  --glass-border: rgba(0,229,255,0.18);
  --text:         #d0eeff;
  --text-muted:   #6fa8c0;
  --white-soft:   rgba(255,255,255,0.88);
  --font-main:    'Exo 2', sans-serif;
  --font-mono:    'Space Mono', monospace;
  --tr:           0.35s cubic-bezier(.4,0,.2,1);
  --glow:         0 0 24px rgba(0,229,255,.35), 0 0 48px rgba(0,229,255,.15);
  --glow-sm:      0 0 12px rgba(0,229,255,.4);
  --navbar-h:     70px;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:16px; scroll-padding-top: var(--navbar-h); }
body {
  font-family: var(--font-main);
  background: var(--dark);
  color: var(--text);
  overflow-x: hidden;
  cursor: none;
}
/* Solo ocultar cursor en elementos interactivos para no afectar todo */
a, button, input, textarea, select, label { cursor: none !important; }
a { text-decoration:none; color:inherit; }
ul { list-style:none; }
img { display:block; max-width:100%; }
.accent { color:var(--cyan); }

/* ---- CANVAS (CRÍTICO: pointer-events none en ambos) ---- */
#particles-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none; /* NUNCA bloquear interacciones */
}
#cursor-canvas {
  position: fixed;
  inset: 0;
  z-index: 9997;
  pointer-events: none; /* NUNCA bloquear interacciones */
}

/* ---- CURSOR: MEDIA LUNA ---- */
/*
  FIX: El JS usa cursor.style.transform = translate(mouseX, mouseY)
  Por eso el CSS NO debe tener transform propio (conflicto con moon-spin).
  Usamos top:0; left:0 y dejamos que el JS maneje la posición con transform.
  La rotación se añade dentro del JS junto con el translate.
*/
#cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 22px;
  height: 22px;
  pointer-events: none;
  z-index: 9999;
  /* El JS maneja: translate(x,y) rotate(deg) scale(s)
     El translate ya centra el elemento en el puntero,
     NO usar margin-left/top porque desplaza el origen de scale */
  will-change: transform;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M58,8 A44,44,0,1,0,58,92 A32,32,0,1,1,58,8Z' fill='%2300e5ff'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  filter: drop-shadow(0 0 6px rgba(0,229,255,.9)) drop-shadow(0 0 14px rgba(0,229,255,.5));
  /* Centrar respecto al puntero usando translate fijo de -50% en el JS no es posible
     porque el JS sobrescribe transform completo. Lo centramos con negative margin: */
  transform-origin: center center;
  /* Sin margin — el centrado lo maneja el JS restando CURSOR_HALF en el translate */
  /* transition solo en filter, NO en transform (el RAF ya es suave) */
  transition: filter .15s ease;
}

/* ---- SCROLLBAR ---- */
::-webkit-scrollbar { width:5px; }
::-webkit-scrollbar-track { background:var(--dark); }
::-webkit-scrollbar-thumb { background:var(--cyan); border-radius:4px; }

/* ==========================================
   NAVBAR
   ========================================== */
.navbar {
  position: fixed; top:0; left:0; right:0;
  z-index: 1000; /* por debajo del cursor pero sobre todo lo demás */
  display: flex; align-items:center; justify-content:space-between;
  padding: 1.1rem 5%;
  height: var(--navbar-h);
  transition: background var(--tr), backdrop-filter var(--tr);
}
.navbar.scrolled {
  background: rgba(2,12,24,.92);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--glass-border);
}
.nav-logo-link { display:flex; align-items:center; gap:10px; }
.nav-logo-img  { height:36px; width:auto; mix-blend-mode:screen; filter:drop-shadow(0 0 8px rgba(0,229,255,.5)); }
.nav-brand     { font-family:var(--font-mono); font-size:1.1rem; font-weight:700; color:var(--cyan); letter-spacing:3px; text-shadow:0 0 10px rgba(0,229,255,.5); }

.nav-links { display:flex; gap:2.2rem; }
.nav-link  {
  font-family: var(--font-mono); font-size:.82rem; letter-spacing:1.5px;
  color: var(--text-muted); text-transform:uppercase;
  position: relative; transition:color var(--tr);
}
.nav-link::after {
  content:''; position:absolute; bottom:-4px; left:0;
  width:0; height:1.5px; background:var(--cyan); transition:width var(--tr);
}
.nav-link:hover, .nav-link.active { color:var(--cyan); }
.nav-link:hover::after, .nav-link.active::after { width:100%; }

.menu-btn { display:none; flex-direction:column; gap:5px; background:none; border:none; padding:4px; }
.menu-btn span { display:block; width:26px; height:2px; background:var(--cyan); transition:var(--tr); }

/* ==========================================
   HERO
   ========================================== */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex; align-items:center; justify-content:space-between;
  padding: 0 8%;
  overflow: hidden;
  z-index: 1; /* sobre el particles-canvas (z-index:0) */
  padding-top: var(--navbar-h); /* compensar navbar fijo */
}
.hero::before {
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(ellipse at 80% 50%, rgba(56,189,248,.07) 0%,transparent 60%),
    radial-gradient(ellipse at 20% 80%, rgba(0,229,255,.05) 0%,transparent 50%);
  pointer-events: none;
  z-index: 0;
}
.hero-grid-lines {
  position: absolute; inset:0;
  background-image:
    linear-gradient(rgba(0,229,255,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,229,255,.04) 1px,transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
  z-index: 0;
}
.hero-glow-white {
  position: absolute; top:5%; left:3%; width:600px; height:600px;
  background: radial-gradient(circle,rgba(255,255,255,.06) 0%,transparent 70%);
  pointer-events: none; z-index:0;
}

/* FIX CRÍTICO: el contenido del hero debe tener z-index > 0 */
.hero-content {
  flex: 1; max-width:600px;
  position: relative; /* necesario para que z-index funcione */
  z-index: 2;
  padding-top: 2rem;
}
.hero-visual {
  flex: 0 0 auto; display:flex; justify-content:center; align-items:center;
  position: relative;
  z-index: 2;
  animation: fadeInRight 1s ease .3s both;
}

.hero-tag {
  display: inline-flex; align-items:center; gap:8px;
  font-family: var(--font-mono); font-size:.78rem; color:var(--cyan); letter-spacing:2px;
  background: rgba(0,229,255,.08); border:1px solid rgba(0,229,255,.25);
  padding: 6px 16px; border-radius:100px; margin-bottom:1.2rem;
  animation: fadeInDown .7s ease both;
}
.tag-dot {
  width:7px; height:7px; border-radius:50%;
  background:var(--cyan); box-shadow:0 0 8px var(--cyan);
  animation: pulse-dot 1.8s infinite;
}
@keyframes pulse-dot { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(1.4)} }

.hero-brand {
  display: flex; align-items:center; gap:12px;
  margin-bottom: .8rem;
  animation: fadeInDown .6s ease both;
}
.brand-moon {
  font-size: 2.4rem; color:var(--cyan);
  animation: moon-glow 3s ease-in-out infinite;
}
@keyframes moon-glow {
  0%,100%{ text-shadow:0 0 20px rgba(0,229,255,.8),0 0 40px rgba(0,229,255,.4); }
  50%    { text-shadow:0 0 30px rgba(0,229,255,1),0 0 60px rgba(0,229,255,.6); }
}
.brand-name {
  font-family: var(--font-mono); font-size:1.7rem; font-weight:700;
  letter-spacing:5px; color:#fff;
}

.hero-title {
  font-size: clamp(3rem,7vw,5.5rem); font-weight:900;
  line-height:1.05; letter-spacing:-1px; margin-bottom:1rem;
  animation: fadeInUp .8s ease .1s both;
}
.title-line { display:block; color:rgba(255,255,255,.95); }
.title-line.accent {
  background: linear-gradient(135deg,var(--cyan),var(--sky-light));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}

.hero-role {
  font-family: var(--font-mono); font-size:clamp(1rem,2.5vw,1.4rem);
  color: var(--sky); margin-bottom:1.5rem;
  animation: fadeInUp .8s ease .2s both;
}
.role-prefix { color:var(--text-muted); margin-right:4px; }
.cursor-blink { animation:blink .9s step-end infinite; color:var(--cyan); }
@keyframes blink { 50%{opacity:0} }

.hero-desc {
  font-size:1.05rem; color:var(--text-muted); line-height:1.8;
  max-width:500px; margin-bottom:2.5rem;
  animation: fadeInUp .8s ease .3s both;
}
.hero-desc strong { color:#fff; }

.hero-cta {
  display: flex; gap:1rem; flex-wrap:wrap;
  animation: fadeInUp .8s ease .4s both; margin-bottom:3rem;
}
.btn-primary {
  display: inline-flex; align-items:center; gap:10px;
  padding: 14px 32px; background:linear-gradient(135deg,var(--cyan),var(--sky));
  color: var(--dark); font-family:var(--font-mono); font-size:.85rem; font-weight:700;
  letter-spacing:1px; border-radius:6px; transition:var(--tr);
  box-shadow: 0 0 20px rgba(0,229,255,.3);
}
.btn-primary:hover { transform:translateY(-3px); box-shadow:var(--glow); }
.btn-primary i { transition:transform var(--tr); }
.btn-primary:hover i { transform:translateX(4px); }
.btn-secondary {
  display: inline-flex; align-items:center; padding:14px 32px;
  border: 1.5px solid rgba(0,229,255,.45); color:var(--cyan);
  font-family: var(--font-mono); font-size:.85rem; letter-spacing:1px;
  border-radius:6px; transition:var(--tr);
}
.btn-secondary:hover { background:rgba(0,229,255,.1); border-color:var(--cyan); transform:translateY(-3px); }

.hero-stats {
  display:flex; align-items:center; gap:2rem;
  animation: fadeInUp .8s ease .5s both;
}
.stat { text-align:center; }
.stat-number { font-family:var(--font-mono); font-size:2rem; font-weight:700; color:var(--cyan); text-shadow:var(--glow-sm); }
.stat-plus   { font-family:var(--font-mono); font-size:1.2rem; color:var(--cyan); }
.stat-label  { display:block; font-size:.72rem; color:var(--text-muted); letter-spacing:2px; text-transform:uppercase; margin-top:2px; }
.stat-divider{ width:1px; height:45px; background:rgba(0,229,255,.2); }

/* PHOTO CONTAINER */
.photo-container { position:relative; width:340px; height:340px; display:flex; align-items:center; justify-content:center; }
.photo-ring { position:absolute; border-radius:50%; border:1px solid rgba(0,229,255,.2); animation:rotate-ring 20s linear infinite; }
.ring-1 { width:100%; height:100%; animation-duration:18s; }
.ring-2 { width:85%; height:85%; animation-direction:reverse; animation-duration:24s; border-color:rgba(56,189,248,.2); }
.ring-3 { width:70%; height:70%; animation-duration:14s; border-color:rgba(0,229,255,.15); border-style:dashed; }
@keyframes rotate-ring { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }

.photo-frame {
  width:260px; height:260px; border-radius:50%;
  overflow:hidden; position:relative;
  border:2.5px solid rgba(0,229,255,.4);
  box-shadow:0 0 40px rgba(0,229,255,.25),inset 0 0 20px rgba(0,229,255,.05);
}
.hero-photo { width:100%; height:100%; object-fit:cover; object-position:top; }
.photo-overlay { position:absolute; inset:0; background:linear-gradient(to bottom,transparent 60%,rgba(0,229,255,.1)); pointer-events:none; }

.tech-badge {
  position:absolute; width:46px; height:46px;
  background:var(--dark-3); border:1.5px solid rgba(0,229,255,.3);
  border-radius:12px; display:flex; align-items:center; justify-content:center;
  font-size:1.3rem; color:var(--cyan); box-shadow:var(--glow-sm);
  animation:float-badge 3s ease-in-out infinite;
}
.badge-1 { top:20px;   right:10px;  animation-delay:0s; }
.badge-2 { bottom:60px; right:-5px; animation-delay:.8s; }
.badge-3 { bottom:20px; left:10px;  animation-delay:1.6s; }
.badge-4 { top:60px;   left:-5px;   animation-delay:2.4s; }
@keyframes float-badge { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }

.scroll-indicator {
  position:absolute; bottom:2rem; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:.62rem; letter-spacing:3px; color:var(--text-muted);
  z-index: 2;
}
.scroll-line { width:1.5px; height:40px; background:linear-gradient(to bottom,var(--cyan),transparent); animation:scroll-pulse 1.8s ease-in-out infinite; }
@keyframes scroll-pulse { 0%,100%{opacity:1;transform:scaleY(1)} 50%{opacity:.3;transform:scaleY(.5)} }

/* ==========================================
   SECCIONES — COMUNES
   ========================================== */
section { position:relative; z-index:1; padding:6rem 8%; }
.section-header { display:flex; align-items:center; gap:1.2rem; margin-bottom:4rem; }
.section-number  { font-family:var(--font-mono); font-size:.82rem; color:var(--cyan); opacity:.5; letter-spacing:2px; }
.section-title   { font-size:clamp(1.8rem,4vw,2.8rem); font-weight:800; letter-spacing:-.5px; color:rgba(255,255,255,.95); }
.section-line    { flex:1; height:1px; background:linear-gradient(to right,rgba(0,229,255,.3),transparent); max-width:300px; }

/* ==========================================
   MARCA ZAIMOON
   ========================================== */
.brand-section {
  position:relative; z-index:1; padding:7rem 8%;
  background:var(--dark-2); overflow:hidden;
}
.brand-bg-glow {
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse at 30% 50%, rgba(0,229,255,0.08) 0%,transparent 55%),
    radial-gradient(ellipse at 70% 50%, rgba(56,189,248,0.06) 0%,transparent 50%);
  pointer-events:none;
}
.brand-section::before {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(to right, transparent, rgba(0,229,255,0.4), transparent);
}
.brand-section::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:1px;
  background:linear-gradient(to right, transparent, rgba(0,229,255,0.4), transparent);
}
.brand-content {
  display:grid; grid-template-columns:1fr 1fr; gap:5rem;
  align-items:center; max-width:1200px; margin:0 auto;
}
.brand-logo-wrap {
  position:relative; display:flex; align-items:center; justify-content:center;
  width:420px; height:420px; margin:0 auto;
}
.brand-logo-ring {
  position:absolute; border-radius:50%; border:1px solid rgba(0,229,255,.2);
  animation:brand-ring-spin 20s linear infinite;
}
.ring-outer { width:100%; height:100%; border-color:rgba(0,229,255,.15); animation-duration:25s; }
.ring-inner { width:78%; height:78%; border-color:rgba(56,189,248,.2); border-style:dashed; animation-direction:reverse; animation-duration:18s; }
@keyframes brand-ring-spin { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
.brand-logo-img {
  width:320px; height:auto; position:relative; z-index:2;
  mix-blend-mode:screen;
  filter:drop-shadow(0 0 20px rgba(0,229,255,.5)) drop-shadow(0 0 50px rgba(0,229,255,.2)) brightness(1.05);
  animation:brand-logo-float 4s ease-in-out infinite;
}
@keyframes brand-logo-float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
.brand-eyebrow { display:flex; align-items:center; gap:14px; margin-bottom:1.2rem; }
.brand-eyebrow-text { font-family:var(--font-mono); font-size:.75rem; color:var(--cyan); letter-spacing:4px; text-transform:uppercase; white-space:nowrap; }
.brand-line { flex:1; height:1px; background:linear-gradient(to right,rgba(0,229,255,.4),transparent); max-width:80px; }
.brand-title { display:flex; align-items:center; gap:14px; font-family:var(--font-mono); font-size:clamp(2.5rem,5vw,4rem); font-weight:900; letter-spacing:6px; margin-bottom:.5rem; line-height:1; }
.brand-moon-icon { font-size:clamp(2rem,4vw,3.2rem); color:var(--cyan); filter:drop-shadow(0 0 12px rgba(0,229,255,.8)); animation:moon-glow 3s ease-in-out infinite; }
.brand-highlight { background:linear-gradient(135deg,#ffffff 0%,var(--cyan) 50%,var(--sky-light) 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.brand-tagline { font-family:var(--font-mono); font-size:.88rem; color:var(--sky); letter-spacing:2px; margin-bottom:1.8rem; opacity:.85; }
.brand-desc { font-size:1.05rem; color:var(--text-muted); line-height:1.9; margin-bottom:2rem; }
.brand-desc strong { color:#fff; font-weight:700; }
.brand-pillars { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-bottom:2.5rem; }
.brand-pillar { display:flex; align-items:center; gap:10px; padding:12px 16px; background:var(--glass); border:1px solid var(--glass-border); border-radius:10px; transition:var(--tr); }
.brand-pillar:hover { border-color:rgba(0,229,255,.4); background:rgba(0,229,255,.08); transform:translateX(4px); }
.brand-pillar i { font-size:1rem; color:var(--cyan); width:20px; text-align:center; }
.brand-pillar span { font-family:var(--font-mono); font-size:.78rem; color:var(--text); letter-spacing:.5px; }
.brand-cta { display:inline-flex; align-items:center; gap:10px; padding:14px 32px; background:linear-gradient(135deg,var(--cyan),var(--sky)); color:var(--dark); font-family:var(--font-mono); font-size:.85rem; font-weight:700; letter-spacing:1px; border-radius:8px; transition:var(--tr); box-shadow:0 0 20px rgba(0,229,255,.3); }
.brand-cta:hover { transform:translateY(-3px); box-shadow:var(--glow); }
.brand-cta i { transition:transform var(--tr); }
.brand-cta:hover i { transform:translateX(5px); }

/* ==========================================
   SOBRE MÍ
   ========================================== */
.about { background:linear-gradient(180deg,transparent,rgba(4,20,39,.6) 50%,transparent); }
.about-content { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:start; }
.about-intro { font-size:1.2rem; font-weight:600; color:#fff; line-height:1.7; margin-bottom:1.2rem; }
.about-text p { font-size:1rem; color:var(--text-muted); line-height:1.9; margin-bottom:1.5rem; }
.about-tags { display:flex; flex-wrap:wrap; gap:10px; margin-top:1.5rem; }
.tag { font-family:var(--font-mono); font-size:.75rem; padding:6px 14px; border:1px solid rgba(0,229,255,.25); border-radius:4px; color:var(--sky); background:rgba(0,229,255,.05); letter-spacing:1px; transition:var(--tr); }
.tag:hover { background:rgba(0,229,255,.12); border-color:var(--cyan); color:var(--cyan); box-shadow:var(--glow-sm); }

/* CODE WINDOW */
.code-window { background:var(--dark-2); border:1px solid var(--glass-border); border-radius:12px; overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,.5); }
.code-header { display:flex; align-items:center; gap:8px; padding:12px 16px; background:rgba(0,229,255,.04); border-bottom:1px solid rgba(0,229,255,.08); }
.dot { width:11px; height:11px; border-radius:50%; }
.dot.red    { background:#ff5f56; }
.dot.yellow { background:#ffbd2e; }
.dot.green  { background:#27c93f; }
.code-title { font-family:var(--font-mono); font-size:.75rem; color:var(--text-muted); margin-left:6px; }
.code-body  { padding:1.5rem 1.8rem; font-family:var(--font-mono); font-size:.82rem; line-height:2; color:var(--text); white-space:pre; overflow-x:auto; min-height:260px; }
.code-keyword { color:#ff7edb; }
.code-var     { color:var(--cyan); }
.code-prop    { color:var(--sky-light); }
.code-str     { color:#a8ff78; }
.code-bool    { color:#ffb347; }
.code-cursor-type { color:var(--cyan); animation:blink .8s step-end infinite; font-weight:700; }

/* ==========================================
   HABILIDADES
   ========================================== */
.skills { background:var(--dark-2); }
.skills-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; margin-bottom:4rem; }
.skill-category { background:var(--glass); border:1px solid var(--glass-border); border-radius:14px; padding:1.8rem; transition:var(--tr); }
.skill-category:hover { border-color:rgba(0,229,255,.4); box-shadow:0 0 30px rgba(0,229,255,.08); transform:translateY(-4px); }
.skill-cat-header { display:flex; align-items:center; gap:12px; margin-bottom:1.8rem; }
.skill-cat-header i { font-size:1.4rem; color:var(--cyan); text-shadow:var(--glow-sm); }
.skill-cat-header h3 { font-size:1rem; font-weight:700; color:#fff; letter-spacing:1px; }
.skill-items { display:flex; flex-direction:column; gap:1.1rem; }
.skill-info  { display:flex; justify-content:space-between; font-size:.83rem; color:var(--text); margin-bottom:5px; }
.skill-pct   { font-family:var(--font-mono); color:var(--cyan); font-size:.78rem; }
.skill-bar   { height:5px; background:rgba(0,229,255,.1); border-radius:10px; overflow:hidden; }
.skill-fill  { height:100%; width:0; background:linear-gradient(90deg,var(--sky),var(--cyan)); border-radius:10px; transition:width 1.5s cubic-bezier(.4,0,.2,1); box-shadow:0 0 8px rgba(0,229,255,.5); }

.tech-cloud { display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; }
.tech-icon-item { display:flex; flex-direction:column; align-items:center; gap:6px; padding:1rem 1.2rem; background:var(--glass); border:1px solid var(--glass-border); border-radius:12px; min-width:72px; transition:var(--tr); }
.tech-icon-item i    { font-size:1.8rem; color:var(--sky); transition:var(--tr); }
.tech-icon-item span { font-family:var(--font-mono); font-size:.65rem; color:var(--text-muted); letter-spacing:1px; }
.tech-icon-item:hover { border-color:var(--cyan); background:rgba(0,229,255,.1); transform:translateY(-5px); box-shadow:var(--glow-sm); }
.tech-icon-item:hover i { color:var(--cyan); }

/* ==========================================
   PROYECTOS
   ========================================== */
.projects { background:var(--dark); }
.projects-typewriter-wrap { display:flex; align-items:center; gap:4px; margin-top:-2.5rem; margin-bottom:2.5rem; min-height:28px; }
.projects-typewriter { font-family:var(--font-mono); font-size:.88rem; color:var(--sky); letter-spacing:1.5px; }
.tw-cursor { font-family:var(--font-mono); color:var(--cyan); font-size:1rem; animation:blink .8s step-end infinite; }

.projects-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.8rem; }
.project-card { background:var(--glass); border:1px solid var(--glass-border); border-radius:14px; overflow:hidden; transition:var(--tr); }
.project-card:hover { border-color:rgba(0,229,255,.45); transform:translateY(-8px); box-shadow:0 20px 50px rgba(0,0,0,.4),0 0 30px rgba(0,229,255,.1); }
.project-card-inner { padding:1.8rem; height:100%; display:flex; flex-direction:column; }
.project-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:1.2rem; }
.project-icon { width:48px; height:48px; background:rgba(0,229,255,.1); border:1px solid rgba(0,229,255,.2); border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1.3rem; color:var(--cyan); }
.project-links { display:flex; gap:10px; }
.project-link { width:34px; height:34px; display:flex; align-items:center; justify-content:center; border:1px solid rgba(0,229,255,.2); border-radius:8px; color:var(--text-muted); font-size:.9rem; transition:var(--tr); }
.project-link:hover { color:var(--cyan); border-color:var(--cyan); background:rgba(0,229,255,.1); box-shadow:var(--glow-sm); }
.project-title { font-size:1.05rem; font-weight:700; color:#fff; margin-bottom:.7rem; }
.project-desc  { font-size:.88rem; color:var(--text-muted); line-height:1.7; flex:1; margin-bottom:1.2rem; }
.project-desc code { background:rgba(0,229,255,.1); color:var(--cyan); padding:1px 5px; border-radius:3px; font-family:var(--font-mono); font-size:.78rem; }
.project-tech  { display:flex; flex-wrap:wrap; gap:7px; }
.project-tech span { font-family:var(--font-mono); font-size:.68rem; color:var(--cyan); background:rgba(0,229,255,.07); border:1px solid rgba(0,229,255,.18); padding:3px 10px; border-radius:4px; letter-spacing:.5px; }

/* ==========================================
   CONTACTO
   ========================================== */
.contact { background:var(--dark-2); }
.contact-wrapper { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:start; }
.contact-info h3 { font-size:1.5rem; font-weight:700; color:#fff; margin-bottom:1rem; }
.contact-info > p { color:var(--text-muted); line-height:1.8; margin-bottom:2rem; }
.contact-details { display:flex; flex-direction:column; gap:1rem; margin-bottom:2rem; font-style:normal; }
.contact-item { display:flex; align-items:center; gap:1rem; padding:1rem 1.2rem; background:var(--glass); border:1px solid var(--glass-border); border-radius:10px; transition:var(--tr); color:inherit; }
.contact-item:hover { border-color:rgba(0,229,255,.4); background:rgba(0,229,255,.07); transform:translateX(6px); }
.contact-icon  { width:42px; height:42px; display:flex; align-items:center; justify-content:center; background:rgba(0,229,255,.1); border-radius:10px; color:var(--cyan); font-size:1rem; flex-shrink:0; }
.contact-text  { display:flex; flex-direction:column; gap:2px; overflow:hidden; }
.contact-label { font-size:.72rem; color:var(--text-muted); letter-spacing:1.5px; text-transform:uppercase; }
.contact-value { font-size:.88rem; color:var(--text); font-weight:500; word-break:break-all; }
.social-links  { display:flex; gap:12px; }
.social-btn    { width:44px; height:44px; display:flex; align-items:center; justify-content:center; border:1.5px solid rgba(0,229,255,.25); border-radius:10px; color:var(--text-muted); font-size:1rem; transition:var(--tr); }
.social-btn:hover { color:var(--cyan); border-color:var(--cyan); background:rgba(0,229,255,.1); transform:translateY(-4px); box-shadow:var(--glow-sm); }
.social-wa { background:rgba(37,211,102,.08) !important; border-color:rgba(37,211,102,.4) !important; color:#25d366 !important; }
.social-wa:hover { background:rgba(37,211,102,.2) !important; border-color:#25d366 !important; box-shadow:0 0 14px rgba(37,211,102,.5) !important; }

.contact-form  { display:flex; flex-direction:column; gap:1.2rem; }
.form-group    { display:flex; flex-direction:column; gap:7px; }
.form-group label { font-family:var(--font-mono); font-size:.75rem; color:var(--text-muted); letter-spacing:1.5px; text-transform:uppercase; }
.form-group input,
.form-group textarea { background:var(--glass); border:1px solid var(--glass-border); border-radius:8px; padding:12px 16px; color:var(--text); font-family:var(--font-main); font-size:.92rem; outline:none; transition:var(--tr); resize:none; }
.form-group input:focus,
.form-group textarea:focus { border-color:var(--cyan); background:rgba(0,229,255,.05); box-shadow:0 0 0 3px rgba(0,229,255,.08); }
.form-group input::placeholder,
.form-group textarea::placeholder { color:rgba(111,168,192,.5); }
.btn-submit { display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:14px 28px; background:linear-gradient(135deg,var(--cyan),var(--sky)); color:var(--dark); font-family:var(--font-mono); font-size:.85rem; font-weight:700; letter-spacing:1px; border:none; border-radius:8px; transition:var(--tr); box-shadow:0 0 20px rgba(0,229,255,.25); margin-top:.5rem; }
.btn-submit:hover { transform:translateY(-3px); box-shadow:var(--glow); }
.btn-submit i.fa-whatsapp { color:#25d366; font-size:1.1rem; }

/* FIX: form-success usa hidden nativo, mostrar con JS quitando hidden */
.form-success {
  display: none;
  align-items:center; gap:10px; padding:14px;
  background:rgba(0,229,255,.08); border:1px solid rgba(0,229,255,.3);
  border-radius:8px; color:var(--cyan); font-size:.88rem;
  animation:fadeInUp .4s ease;
}
.form-success:not([hidden]) { display:flex; }
/* compatibilidad con clase .show también */
.form-success.show { display:flex; }
.form-success i { font-size:1.2rem; }

/* ==========================================
   FOOTER
   ========================================== */
.footer { position:relative; z-index:1; padding:3rem 8% 2rem; text-align:center; background:var(--dark); }
.footer-line   { height:1px; background:linear-gradient(to right,transparent,rgba(0,229,255,.25),transparent); }
.footer-content { padding-top:2rem; }
.footer-logo-wrap { display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:.8rem; }
.footer-logo-img  { height:40px; mix-blend-mode:screen; filter:drop-shadow(0 0 6px rgba(0,229,255,.4)); }
.footer-brand     { font-family:var(--font-mono); font-size:1.2rem; font-weight:700; color:var(--cyan); letter-spacing:3px; }
.footer-text { font-size:.9rem; color:var(--text-muted); margin-bottom:.4rem; }
.footer-copy { font-family:var(--font-mono); font-size:.75rem; color:rgba(111,168,192,.4); letter-spacing:1px; }

/* ==========================================
   ANIMACIONES
   ========================================== */
@keyframes fadeInUp    { from{opacity:0;transform:translateY(25px)}  to{opacity:1;transform:translateY(0)} }
@keyframes fadeInDown  { from{opacity:0;transform:translateY(-20px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeInRight { from{opacity:0;transform:translateX(40px)}  to{opacity:1;transform:translateX(0)} }

.reveal { opacity:0; transform:translateY(30px); transition:opacity .7s ease,transform .7s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }

/* Sr-only para accesibilidad */
.sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border-width:0;
}

/* ==========================================
   RESPONSIVE
   ========================================== */
@media (max-width:1100px) {
  .skills-grid   { grid-template-columns:1fr 1fr; }
  .projects-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:900px) {
  .hero { flex-direction:column; text-align:center; padding-top:calc(var(--navbar-h) + 2rem); padding-bottom:4rem; }
  .hero-content { max-width:100%; }
  .hero-desc { margin:0 auto 2.5rem; }
  .hero-cta, .hero-stats { justify-content:center; }
  .hero-visual { margin-top:3rem; }
  .about-content   { grid-template-columns:1fr; }
  .contact-wrapper { grid-template-columns:1fr; }
  .brand-content   { grid-template-columns:1fr; gap:3rem; text-align:center; }
  .brand-logo-wrap { width:300px; height:300px; }
  .brand-logo-img  { width:230px; }
  .brand-eyebrow   { justify-content:center; }
  .brand-title     { justify-content:center; }
  .brand-cta       { margin:0 auto; }
  .nav-links {
    display:none; flex-direction:column;
    position:absolute; top:100%; left:0; right:0;
    background:rgba(2,12,24,.97); padding:1.5rem 5%;
    border-bottom:1px solid var(--glass-border);
    z-index: 999;
  }
  .nav-links.open { display:flex; }
  .menu-btn { display:flex; }
  .projects-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:580px) {
  section { padding:4rem 5%; }
  .skills-grid   { grid-template-columns:1fr; }
  .projects-grid { grid-template-columns:1fr; }
  .hero-title { font-size:2.8rem; }
  .photo-container { width:260px; height:260px; }
  .photo-frame     { width:185px; height:185px; }
  .brand-name      { font-size:1.2rem; }
  .brand-pillars   { grid-template-columns:1fr; }
  .brand-logo-wrap { width:240px; height:240px; }
  .brand-logo-img  { width:180px; }
}