/* ================================================
   PROGRAMADORJ — Light Mode (v6 Red/Cyan/Black)
   ================================================ */

h1, h2, h3 { font-family: 'Roboto Mono', monospace; }
html { scroll-behavior: smooth; }
::selection { background: rgba(239,68,68,0.15); color: #000; }

:root {
  --hero-accent-rgb: 239, 68, 68; /* Rojo 500 */
}

/* Clases para el tema dinámico con opacidades originales */
.dynamic-text { color: rgb(var(--hero-accent-rgb)) !important; transition: color 0.4s ease; }
.dynamic-bg-solid { background-color: rgb(var(--hero-accent-rgb)) !important; transition: background-color 0.4s ease; }
.dynamic-bg-10 { background-color: rgba(var(--hero-accent-rgb), 0.1) !important; transition: background-color 0.4s ease; }
.dynamic-bg-5 { background-color: rgba(var(--hero-accent-rgb), 0.05) !important; transition: background-color 0.4s ease; }
.dynamic-border-30 { border-color: rgba(var(--hero-accent-rgb), 0.3) !important; transition: border-color 0.4s ease; }
.dynamic-border-15 { border-color: rgba(var(--hero-accent-rgb), 0.15) !important; transition: border-color 0.4s ease; }
.dynamic-shadow { filter: drop-shadow(0 0 30px rgba(var(--hero-accent-rgb), 0.4)); transition: filter 0.4s ease; }

/* Technical Grid Pattern for Light Backgrounds */
.bg-white, .bg-gray-100 {
  background-image: 
    radial-gradient(circle at 2px 2px, rgba(0,0,0,0.03) 1px, transparent 0);
  background-size: 24px 24px;
}

/* Neon glow for accent colors */
.text-accent { color: #ef4444; }
.text-cyber { color: #06b6d4; }
.text-neon-yellow { color: #eab308; }
.text-neon-green { color: #22c55e; }

.logo-black { filter: grayscale(1) brightness(0); }

/* Hero Selection Prevention */
#inicio, #inicio * {
  user-select: none;
  -webkit-user-drag: none;
}

.dark-glass {
  background: rgba(0, 0, 0, 0.92);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.6);
}

.monitor-scanlines::before {
  content: " ";
  position: absolute; top: 0; left: 0; bottom: 0; right: 0;
  background: repeating-linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.2) 50%);
  background-size: 100% 4px; z-index: 10; pointer-events: none;
  opacity: 0.4;
}

.tv-glitch {
  animation: tv-distort 0.4s steps(2) infinite;
  filter: contrast(1.5) brightness(1.2);
  position: relative;
}

@keyframes tv-distort {
  0% { transform: translate(2px, 1px) scale(1.01); filter: hue-rotate(90deg) blur(1px); }
  25% { transform: translate(-2px, -1px) scale(0.99); filter: hue-rotate(180deg) saturate(2); }
  50% { transform: translate(-1px, 2px) scale(1.02); text-shadow: 3px 0 red, -3px 0 cyan; }
  75% { transform: translate(1px, -2px) scale(0.98); opacity: 0.8; }
  100% { transform: translate(0); filter: none; }
}

::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: #f3f4f6; }
::-webkit-scrollbar-thumb { background: #9ca3af; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #ef4444; }

@keyframes fadeIn { to { opacity: 1; } }

/* Nav */
.nav-link {
  font-size: 14px; font-weight: 700;
  color: #000000; transition: color 0.3s; position: relative;
}
.nav-link:hover, .nav-link.active { color: #ef4444; }
.nav-link.active::after {
  content: ''; position: absolute;
  bottom: -8px; left: 0; right: 0;
  height: 2px; background: #ef4444; border-radius: 1px;
}

.mobile-nav-link {
  font-size: 18px; font-weight: 700; letter-spacing: 0.15em;
  color: #111; transition: color 0.3s; text-transform: uppercase;
}
.mobile-nav-link:hover { color: #ef4444; }

/* Tags */
.tag {
  padding: 4px 12px;
  border: 2px solid rgba(239,68,68,0.3);
  color: #dc2626; font-size: 9px; font-weight: 700;
  font-family: 'Roboto Mono', monospace;
  border-radius: 4px; background: rgba(239,68,68,0.06);
}
.tag-cyan {
  padding: 4px 12px; border: 2px solid rgba(6,182,212,0.3);
  color: #0891b2; font-size: 9px; font-weight: 700;
  font-family: 'Roboto Mono', monospace;
  border-radius: 4px; background: rgba(6,182,212,0.06);
}
.tag-yellow {
  padding: 4px 12px; border: 2px solid rgba(234,179,8,0.3);
  color: #ca8a04; font-size: 9px; font-weight: 700;
  font-family: 'Roboto Mono', monospace;
  border-radius: 4px; background: rgba(234,179,8,0.06);
}
.tag-green {
  padding: 4px 12px; border: 2px solid rgba(34,197,94,0.3);
  color: #16a34a; font-size: 9px; font-weight: 700;
  font-family: 'Roboto Mono', monospace;
  border-radius: 4px; background: rgba(34,197,94,0.06);
}

/* Scan Line — RED */
.scan-line {
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, #ef4444, transparent);
  box-shadow: 0 0 15px rgba(239,68,68,0.5);
  animation: scanMove 3s ease-in-out infinite; z-index: 10;
}
@keyframes scanMove {
  0%, 100% { top: 0; }
  50% { top: calc(100% - 2px); }
}

/* Timeline — RED dots */
.timeline-dot {
  position: absolute; left: -41px; top: 3px;
  width: 14px; height: 14px;
  border: 3px solid #ef4444; background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(239,68,68,0.15);
  transition: all 0.3s;
}
@media (max-width: 767px) {
  .timeline-dot { left: -29px; width: 12px; height: 12px; }
}
.timeline-entry { position: relative; }
.timeline-entry:hover .timeline-dot {
  background: #ef4444;
  box-shadow: 0 0 0 6px rgba(239,68,68,0.2);
}

/* Portfolio Cards */
.portfolio-card {
  position: relative; aspect-ratio: 1 / 1; overflow: hidden;
  border-radius: 10px; border: 2px solid #d1d5db; cursor: pointer;
  transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.portfolio-card:hover {
  border-color: #ef4444;
  box-shadow: 0 12px 30px rgba(0,0,0,0.15);
  transform: translateY(-4px);
}
.portfolio-card-inner {
  width: 100%; height: 100%; position: relative;
  background: #f3f4f6; transition: transform 0.6s cubic-bezier(0.2, 1, 0.3, 1);
}
.portfolio-card:hover .portfolio-card-inner { transform: scale(1.05); }

.portfolio-card-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 30%, transparent 60%);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 1.25rem; opacity: 0; transition: opacity 0.3s;
}
.portfolio-card:hover .portfolio-card-overlay { opacity: 1; }
.portfolio-card-overlay h3 { color: #fff !important; }
.portfolio-card-overlay .ver-mas-btn { color: #ef4444 !important; }

/* Stat Box */
.stat-box { position: relative; overflow: hidden; }
.stat-box::before {
  content: ''; position: absolute; top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(239,68,68,0.06), transparent);
  transition: left 0.6s ease;
}
.stat-box:hover::before { left: 100%; }

/* Reveals - Faster for better fluidity */
.section-header {
  opacity: 0; transform: translateY(15px);
  transition: opacity 0.4s ease-out, transform 0.4s ease-out;
  will-change: opacity, transform;
}
.section-header.visible { opacity: 1; transform: translateY(0); }

.reveal-item {
  opacity: 0; transform: translateY(15px);
  transition: opacity 0.4s ease-out, transform 0.4s ease-out;
  will-change: opacity, transform;
}
.reveal-item.visible { opacity: 1; transform: translateY(0); }

/* Glitch */
.glitch-active { animation: glitch 0.25s ease; }
/* Skill Bars - shorter and centered */
.skill-bar { max-width: 450px; margin-left: auto; margin-right: auto; }

.skill-icon {
  width: 24px; height: 24px; color: #fff;
  transition: transform 0.3s;
}
.skill-bar:hover .skill-icon { transform: scale(1.2); }