/* ==========================================
   PORTAFOLIO CINEMATOGRÁFICO — Estilos globales
   Paleta base: Zinc oscuro (equivalente Tailwind)
   ========================================== */
:root {
  --radius-custom: 1rem;
  --color-primary: #6366f1;
  --color-accent: #10b981;
  --color-bg: #09090b;
  --color-card: #18181b;
  --zinc-950: #09090b;
  --zinc-900: #18181b;
  --zinc-800: #27272a;
  --zinc-700: #3f3f46;
  --zinc-500: #71717a;
  --zinc-400: #a1a1aa;
  --zinc-300: #d4d4d8;
  --green-400: #4ade80;
  --green-500: #22c55e;
  --indigo-400: #818cf8;
  --indigo-500: #6366f1;
  --indigo-600: #4f46e5;
  --emerald-400: #34d399;
  --emerald-500: #10b981;
  --sky-400: #38bdf8;
  --red-400: #f87171;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background-color: var(--color-bg);
  color: #fff;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  overflow-x: hidden;
  min-height: 100vh;
}

body.custom-cursor-on, body.custom-cursor-on * { cursor: none !important; }

::selection { background: rgba(99, 102, 241, 0.3); }

.mono { font-family: 'JetBrains Mono', 'Fira Code', Consolas, monospace; }

a { color: inherit; text-decoration: none; }
button { font-family: inherit; border: none; background: none; color: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; }
img { display: block; }

/* ---------- Animaciones ---------- */
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
@keyframes ping { 75%, 100% { transform: scale(2); opacity: 0; } }
@keyframes spinSlow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes slideIn { from { transform: translateX(100%); } to { transform: translateX(0); } }

.animate-fade-in { animation: fadeIn 0.5s ease both; }

/* ---------- Animaciones cinematográficas (estilo Framer Motion) ---------- */
/* Reveal on scroll con spring easing */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition-property: opacity, transform;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  transition-duration: 0.7s;
}
[data-reveal].revealed { opacity: 1; transform: none; }

/* Entrada 3D de ventanas tipo terminal (dolly-in con perspectiva) */
.reveal-3d[data-reveal] {
  transform: perspective(1100px) rotateX(9deg) translateY(44px) scale(0.94);
}
.reveal-3d[data-reveal].revealed { transform: none; }

/* Zoom-through de la terminal de intro: el JS anima transform/filter,
   aquí solo se prepara la capa para que sea fluido */
#section-intro .terminal-window {
  will-change: transform, opacity, filter;
  transform-origin: center 35%;
}

/* Títulos con eco (ghost trails) */
.echo-title { position: relative; z-index: 1; }
.echo-title::before,
.echo-title::after {
  content: attr(data-echo);
  position: absolute; left: 0; top: 0; width: 100%;
  pointer-events: none; z-index: -1;
  opacity: 0; transform: translateY(0);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.25s,
              transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.25s;
}
.revealed .echo-title::before { opacity: 0.13; transform: translateY(0.42em); }
.revealed .echo-title::after { opacity: 0.05; transform: translateY(0.84em); transition-delay: 0.4s; }
body.light .revealed .echo-title::before { opacity: 0.09; }
body.light .revealed .echo-title::after { opacity: 0.04; }

/* Título hero letra por letra */
.hero-char {
  display: inline-block;
  opacity: 0;
  transform: translateY(45px) rotate(5deg) scale(0.9);
  animation: charIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  white-space: pre;
}
@keyframes charIn {
  to { opacity: 1; transform: none; }
}

/* Transición de entrada de sección */
.cinema-in { animation: cinemaIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes cinemaIn {
  from { opacity: 0; transform: translateY(24px) scale(0.995); filter: blur(4px); }
  to { opacity: 1; transform: none; filter: none; }
}

/* Entrada cinematográfica de modales */
.modal-overlay.open .modal-card,
.modal-overlay.open .demo-card {
  animation: modalIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes modalIn {
  from { opacity: 0; transform: translateY(48px) scale(0.96); }
  to { opacity: 1; transform: none; }
}

/* Los botones magnéticos necesitan transición suave al soltar */
.btn-white, .btn-indigo, .btn-green, .btn-solicitar, .btn-compile { transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), background 0.2s, border-color 0.2s, filter 0.2s; }

/* Respeto por usuarios con movimiento reducido */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .hero-char { opacity: 1; transform: none; animation: none; }
  .cinema-in, .modal-overlay.open .modal-card, .modal-overlay.open .demo-card { animation: none; }
  .echo-title::before, .echo-title::after { display: none; }
  .reveal-3d[data-reveal] { transform: none; }
}
.terminal-cursor { animation: blink 0.8s infinite; }
.animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
.animate-ping { animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; }
.spin-slow { animation: spinSlow 6s linear infinite; display: inline-block; }

/* ---------- Cursor personalizado ---------- */
#custom-cursor {
  position: fixed; pointer-events: none; z-index: 9999;
  transition: transform 0.075s;
}
#custom-cursor .ring {
  width: 24px; height: 24px; border-radius: 50%;
  border: 1px solid var(--color-accent);
  box-shadow: 0 0 10px var(--color-accent);
  transition: all 0.3s; transform: translate(-50%, -50%);
}
#custom-cursor.hovering .ring {
  width: 40px; height: 40px; background: rgba(255,255,255,0.1); transform: translate(-50%, -50%) scale(1.25);
}
#custom-cursor .dot {
  position: absolute; top: 0; left: 0; width: 6px; height: 6px;
  background: #fff; border-radius: 50%; transform: translate(-50%, -50%);
}

/* ---------- Canvas de fondo ---------- */
#bg-canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }

/* ---------- Header ---------- */
header {
  position: fixed; top: 0; left: 0; width: 100%; z-index: 40;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  background: rgba(9, 9, 11, 0.4);
  border-bottom: 1px solid rgba(39, 39, 42, 0.4);
}
.header-inner {
  max-width: 80rem; margin: 0 auto; padding: 1rem 1.5rem;
  display: flex; align-items: center; justify-content: space-between;
}
.logo { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; }
.logo-icon {
  width: 2rem; height: 2rem; border-radius: 0.5rem;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-primary); transition: transform 0.3s; color: #fff;
}
.logo:hover .logo-icon { transform: rotate(12deg); }
.logo-text {
  font-weight: 700; letter-spacing: -0.025em; font-size: 1.125rem;
  background: linear-gradient(to right, #fff, var(--zinc-400));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.main-nav {
  display: none; align-items: center; gap: 0.25rem;
  background: rgba(24, 24, 27, 0.6); padding: 0.25rem;
  border-radius: 9999px; border: 1px solid rgba(39, 39, 42, 0.6);
}
@media (min-width: 768px) { .main-nav { display: flex; } }
.nav-tab {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.375rem 1rem; border-radius: 9999px;
  font-size: 0.75rem; font-weight: 500; color: var(--zinc-400); transition: all 0.2s;
}
.nav-tab:hover { color: #fff; }
.nav-tab.active { background: var(--zinc-800); color: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.2); }
.nav-tab.active svg { color: var(--color-accent); }
.nav-tab svg { width: 0.875rem; height: 0.875rem; }

.header-controls { display: flex; align-items: center; gap: 0.5rem; }
.ctrl-btn {
  display: flex; align-items: center; justify-content: center; gap: 0.375rem;
  background: linear-gradient(to right, var(--zinc-800), var(--zinc-900));
  border: 1px solid rgba(63, 63, 70, 0.6);
  color: var(--text-main, #fff); font-size: 0.6875rem; font-weight: 600;
  padding: 0.5rem 0.875rem; border-radius: 0.75rem; transition: all 0.2s; min-height: 2.125rem;
}
.ctrl-btn:hover { border-color: var(--zinc-500); }
.ctrl-btn svg { width: 0.9375rem; height: 0.9375rem; }
.ctrl-btn b { color: var(--color-accent); }

/* ---------- Layout general ---------- */
main { position: relative; z-index: 10; padding-top: 6rem; padding-bottom: 5rem; min-height: 100vh; }
.container { max-width: 80rem; margin: 0 auto; padding: 1rem 1.5rem; }
/* Layout one-page: todas las secciones apiladas con scroll continuo.
   scroll-margin compensa el header fijo al navegar con el menú. */
.section { display: block; scroll-margin-top: 5.5rem; padding: 2.5rem 0; }

/* Barra de progreso de scroll bajo el header */
#scroll-progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 0%;
  background: linear-gradient(to right, var(--color-primary), var(--color-accent));
  z-index: 45; transition: width 0.1s linear;
  box-shadow: 0 0 8px var(--color-accent);
}

/* ---------- Botones genéricos ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; font-size: 0.75rem; font-weight: 700; border-radius: 0.75rem; padding: 0.75rem 1.5rem; transition: all 0.2s; }
.btn:active { transform: scale(0.95); }
.btn svg { width: 1rem; height: 1rem; }
.btn-white { background: #fff; color: var(--zinc-950); box-shadow: 0 10px 15px rgba(0,0,0,0.3); }
.btn-white:hover { background: #f4f4f5; }
.btn-dark { background: var(--zinc-900); border: 1px solid var(--zinc-800); color: #fff; }
.btn-dark:hover { background: var(--zinc-800); border-color: var(--zinc-700); }
.btn-indigo { background: var(--indigo-600); color: #fff; box-shadow: 0 10px 15px rgba(79, 70, 229, 0.1); }
.btn-indigo:hover { background: var(--indigo-500); }
.btn-indigo:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-green { background: var(--green-500); color: var(--zinc-950); }
.btn-green:hover { background: #16a34a; }
.btn-green:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-ghost { background: var(--zinc-800); color: #fff; font-weight: 600; }
.btn-ghost:hover { background: var(--zinc-700); }

/* ---------- Sección INTRO (Terminal) ---------- */
#section-intro { min-height: 85vh; display: flex; align-items: center; justify-content: center; padding: 0 1rem; }
.terminal-window {
  width: 100%; max-width: 42rem; background: rgba(9, 9, 11, 0.9);
  border: 1px solid var(--zinc-800); border-radius: 1rem; overflow: hidden;
  box-shadow: 0 25px 50px rgba(0,0,0,0.5);
}
.terminal-titlebar {
  background: var(--zinc-900); padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--zinc-800);
  display: flex; align-items: center; justify-content: space-between;
}
.traffic-lights { display: flex; align-items: center; gap: 0.375rem; }
.traffic-lights span { width: 0.75rem; height: 0.75rem; border-radius: 50%; }
.tl-red { background: rgba(239, 68, 68, 0.8); }
.tl-yellow { background: rgba(234, 179, 8, 0.8); }
.tl-green { background: rgba(34, 197, 94, 0.8); }
.terminal-title { font-size: 0.75rem; color: var(--zinc-500); }
.terminal-body {
  padding: 1.5rem; font-size: 0.8125rem; color: var(--green-400);
  min-height: 300px; display: flex; flex-direction: column; justify-content: space-between;
}
.terminal-line { margin-bottom: 0.5rem; display: flex; align-items: flex-start; gap: 0.5rem; }
.terminal-line .prompt { color: #52525b; user-select: none; }
.terminal-caret { width: 0.625rem; height: 1rem; background: var(--green-400); display: inline-block; }
.terminal-footer {
  margin-top: 2rem; border-top: 1px solid rgba(39, 39, 42, 0.6); padding-top: 1.5rem;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
}
.terminal-footer .name { color: #fff; font-size: 1rem; font-weight: 700; }
.terminal-footer .role { color: var(--zinc-400); font-size: 0.75rem; }

/* ---------- Sección WORKSPACE ---------- */
.hero-head { text-align: center; margin: 1rem 0 2.5rem; }
.status-pill {
  display: inline-flex; align-items: center; gap: 0.375rem;
  background: rgba(39, 39, 42, 0.4); border: 1px solid rgba(63, 63, 70, 0.6);
  font-size: 0.75rem; color: var(--zinc-300);
  padding: 0.375rem 0.75rem; border-radius: 9999px; margin-bottom: 0.75rem;
}
.status-dot { width: 0.375rem; height: 0.375rem; border-radius: 50%; background: var(--emerald-500); }
.hero-title {
  font-size: 2.5rem; font-weight: 900; letter-spacing: -0.025em; margin-bottom: 1rem;
  background: linear-gradient(to bottom, #fff, #e4e4e7 50%, var(--zinc-500));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
@media (min-width: 640px) { .hero-title { font-size: 3.75rem; } }
.hero-bio { color: var(--zinc-400); font-size: 0.875rem; max-width: 36rem; margin: 0 auto; font-weight: 500; }
@media (min-width: 640px) { .hero-bio { font-size: 1rem; } }

.workspace {
  position: relative; width: 100%; max-width: 64rem; margin: 0 auto;
  background: rgba(9, 9, 11, 0.2); border-radius: 1rem;
  border: 1px solid rgba(39, 39, 42, 0.4); padding: 1rem;
  box-shadow: 0 25px 50px rgba(0,0,0,0.5);
  transition: transform 0.3s ease-out; transform-style: preserve-3d;
}
.workspace-glow {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top right, rgba(168, 85, 247, 0.05), transparent);
}
.ws-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; position: relative; z-index: 10; }
@media (min-width: 768px) { .ws-grid { grid-template-columns: repeat(12, 1fr); } }

.win { background: rgba(24, 24, 27, 0.95); border-radius: 0.75rem; border: 1px solid var(--zinc-800); display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 10px 15px rgba(0,0,0,0.3); }
.win-vscode { grid-column: span 1; }
.win-chrome { grid-column: span 1; }
@media (min-width: 768px) { .win-vscode { grid-column: span 8; } .win-chrome { grid-column: span 4; } }
.win-titlebar {
  background: var(--zinc-950); padding: 0.5rem 1rem;
  border-bottom: 1px solid rgba(39, 39, 42, 0.8);
  display: flex; align-items: center; justify-content: space-between;
}
.win-titlebar .win-title { display: flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; color: var(--zinc-400); }
.win-titlebar svg { width: 1rem; height: 1rem; }
.win-dots { display: flex; align-items: center; gap: 0.375rem; }
.win-dots span { width: 0.625rem; height: 0.625rem; border-radius: 50%; background: var(--zinc-700); }
.vscode-body { flex: 1; padding: 1rem; font-size: 0.8125rem; color: var(--zinc-300); overflow-y: auto; max-height: 360px; line-height: 1.6; }
.vscode-body pre { white-space: pre-wrap; word-break: break-word; }
.code-comment { color: var(--zinc-500); }
.code-keyword { color: #60a5fa; }
.code-import { color: #fde047; }
.code-string { color: var(--emerald-400); }
.vscode-footer { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--zinc-800); display: flex; justify-content: space-between; align-items: center; }
.vscode-footer .meta { font-size: 0.75rem; color: var(--zinc-500); }
.btn-compile {
  background: var(--indigo-600); color: #fff; font-weight: 700; font-size: 0.75rem;
  padding: 0.5rem 1rem; border-radius: 0.5rem;
  display: flex; align-items: center; gap: 0.5rem; box-shadow: 0 4px 6px rgba(0,0,0,0.2); transition: all 0.2s;
}
.btn-compile:hover { background: var(--indigo-500); }
.btn-compile:active { transform: scale(0.95); }
.btn-compile svg { width: 0.875rem; height: 0.875rem; }

.compiled-header { display: flex; justify-content: space-between; align-items: center; padding-bottom: 0.5rem; border-bottom: 1px solid var(--zinc-800); }
.compile-ok { font-size: 0.75rem; color: var(--green-400); display: flex; align-items: center; gap: 0.25rem; }
.compile-ok .dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--green-500); }
.btn-reset { font-size: 0.75rem; color: var(--zinc-500); display: flex; align-items: center; gap: 0.25rem; }
.btn-reset:hover { color: #fff; }
.btn-reset svg { width: 0.75rem; height: 0.75rem; }
.compiled-grid { display: grid; grid-template-columns: 1fr; gap: 0.75rem; margin-top: 1rem; }
@media (min-width: 640px) { .compiled-grid { grid-template-columns: 1fr 1fr; } .compiled-card.full { grid-column: span 2; } }
.compiled-card { padding: 1rem; border-radius: 0.75rem; background: rgba(9, 9, 11, 0.8); border: 1px solid var(--zinc-800); transition: border-color 0.2s; }
.compiled-card:hover { border-color: var(--zinc-700); }
.compiled-card h4 { font-size: 0.75rem; color: var(--zinc-500); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.25rem; font-weight: 400; }
.compiled-card .big { font-size: 1rem; font-weight: 700; color: #fff; }
.compiled-card .sub-indigo { font-size: 0.75rem; color: var(--indigo-400); margin-top: 0.25rem; }
.compiled-card .sub { font-size: 0.75rem; color: var(--zinc-400); margin-top: 0.25rem; }
.skill-tags { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.skill-tag {
  font-size: 0.75rem; padding: 0.25rem 0.625rem;
  background: rgba(99, 102, 241, 0.1); border: 1px solid rgba(99, 102, 241, 0.3);
  color: #a5b4fc; border-radius: 0.375rem;
}

.chrome-body { flex: 1; padding: 1rem; display: flex; flex-direction: column; justify-content: space-between; background: rgba(9, 9, 11, 0.3); }
.chrome-url { background: var(--zinc-800); padding: 0.125rem 0.5rem; border-radius: 0.25rem; font-size: 0.625rem; color: var(--zinc-500); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chrome-profile { text-align: center; padding: 1.5rem 0; }
.avatar { width: 4rem; height: 4rem; margin: 0 auto 0.75rem; border-radius: 50%; overflow: hidden; border: 2px solid var(--zinc-800); box-shadow: 0 4px 6px rgba(0,0,0,0.2); }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.chrome-profile h3 { font-weight: 700; font-size: 0.875rem; }
.chrome-profile p { font-size: 0.6875rem; color: var(--zinc-500); margin-top: 0.125rem; }
.lighthouse { border-top: 1px solid rgba(39, 39, 42, 0.6); padding-top: 0.75rem; }
.lighthouse-row { display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--zinc-400); margin-bottom: 0.5rem; }
.lighthouse-row .score { color: var(--green-400); font-weight: 700; }
.lighthouse-bar { width: 100%; background: var(--zinc-800); height: 0.375rem; border-radius: 9999px; overflow: hidden; }
.lighthouse-bar .fill { background: var(--green-400); height: 100%; width: 100%; }

.stats-row { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 0.5rem; }
@media (min-width: 768px) { .stats-row { grid-template-columns: repeat(4, 1fr); } }
.stat-card {
  padding: 1rem; background: rgba(24, 24, 27, 0.8);
  border: 1px solid rgba(39, 39, 42, 0.5); border-radius: 0.75rem;
  display: flex; align-items: center; justify-content: space-between;
}
.stat-card .label { font-size: 0.75rem; color: var(--zinc-500); font-weight: 500; }
.stat-card .value { font-size: 1.5rem; font-weight: 900; margin-top: 0.25rem; color: var(--color-accent); }
.stat-icon { padding: 0.625rem; border-radius: 0.5rem; background: rgba(9, 9, 11, 0.4); border: 1px solid var(--zinc-800); color: var(--zinc-500); display: flex; }
.stat-icon svg { width: 1rem; height: 1rem; }

.cta-row { margin-top: 3.5rem; text-align: center; }
.cta-label { color: var(--zinc-500); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.15em; margin-bottom: 1rem; }
.cta-buttons { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; }

/* ---------- Sección PROYECTOS ---------- */
.section-head { margin-bottom: 3rem; display: flex; flex-direction: column; gap: 1rem; }
@media (min-width: 768px) { .section-head { flex-direction: row; align-items: flex-end; justify-content: space-between; } }
.section-eyebrow { font-size: 0.75rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--color-accent); }
.section-title { font-size: 1.875rem; font-weight: 900; letter-spacing: -0.025em; margin-top: 0.25rem; }
@media (min-width: 640px) { .section-title { font-size: 3rem; } }
.section-desc { color: var(--zinc-400); font-size: 0.875rem; max-width: 28rem; }

.projects-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 768px) { .projects-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .projects-grid { grid-template-columns: repeat(3, 1fr); } }

.project-card {
  background: rgba(24, 24, 27, 0.6); border: 1px solid rgba(39, 39, 42, 0.8);
  border-radius: 1rem; overflow: hidden; cursor: pointer;
  transition: all 0.3s; display: flex; flex-direction: column; justify-content: space-between;
}
.project-card:hover { border-color: var(--zinc-700); transform: translateY(-4px); box-shadow: 0 25px 50px rgba(0,0,0,0.5); }
.project-cover { height: 13rem; overflow: hidden; position: relative; background: var(--zinc-950); }
.project-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.project-card:hover .project-cover img { transform: scale(1.05); }
.project-cover::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, var(--zinc-950), rgba(9,9,11,0.2) 50%, transparent); opacity: 0.6;
}
.project-category {
  position: absolute; bottom: 1rem; left: 1rem; z-index: 2;
  font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.05em;
  background: rgba(24, 24, 27, 0.9); border: 1px solid var(--zinc-800);
  padding: 0.25rem 0.625rem; border-radius: 0.375rem; color: var(--zinc-300);
}
.project-body { padding: 1.5rem; }
.project-name-row { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.project-dot { width: 0.625rem; height: 0.625rem; border-radius: 50%; flex-shrink: 0; }
.project-name { font-weight: 700; font-size: 1.125rem; transition: color 0.2s; }
.project-card:hover .project-name { color: var(--indigo-400); }
.project-desc {
  color: var(--zinc-400); font-size: 0.8125rem;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.project-footer {
  padding: 0.5rem 1.5rem 1.5rem; border-top: 1px solid rgba(39, 39, 42, 0.4);
  display: flex; flex-wrap: wrap; gap: 0.375rem; align-items: center; justify-content: space-between;
}
.tech-chips { display: flex; gap: 0.25rem; flex-wrap: wrap; }
.tech-chip { font-size: 0.625rem; padding: 0.125rem 0.5rem; background: rgba(39, 39, 42, 0.8); border-radius: 0.25rem; border: 1px solid rgba(63, 63, 70, 0.4); color: var(--zinc-400); }
.explore-link { font-size: 0.6875rem; font-weight: 600; color: #fff; display: flex; align-items: center; gap: 0.125rem; transition: transform 0.2s; }
.explore-link svg { width: 0.75rem; height: 0.75rem; }
.project-card:hover .explore-link { transform: translateX(4px); }

/* ---------- Modal de proyecto ---------- */
.modal-overlay {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(9, 9, 11, 0.95); backdrop-filter: blur(12px);
  overflow-y: auto; padding: 1rem; display: none;
}
.modal-overlay.open { display: block; animation: fadeIn 0.3s ease both; }
@media (min-width: 640px) { .modal-overlay { padding: 2.5rem; } }
.modal-card {
  max-width: 56rem; margin: 0 auto; background: var(--zinc-900);
  border: 1px solid var(--zinc-800); border-radius: 1.5rem; overflow: hidden;
  box-shadow: 0 25px 50px rgba(0,0,0,0.5); position: relative;
}
.modal-close {
  position: absolute; top: 1rem; right: 1rem; z-index: 10;
  width: 2.25rem; height: 2.25rem; border-radius: 50%;
  background: rgba(9, 9, 11, 0.8); border: 1px solid var(--zinc-800);
  color: var(--zinc-400); display: flex; align-items: center; justify-content: center; transition: color 0.2s;
}
.modal-close:hover { color: #fff; }
.modal-banner { height: 18rem; position: relative; background: var(--zinc-950); }
@media (min-width: 640px) { .modal-banner { height: 24rem; } }
.modal-banner img { width: 100%; height: 100%; object-fit: cover; }
.modal-banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, var(--zinc-900), transparent 50%, rgba(9,9,11,0.5)); }
.modal-banner-text { position: absolute; bottom: 1.5rem; left: 1.5rem; right: 1.5rem; z-index: 2; }
.modal-cat {
  font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em;
  padding: 0.25rem 0.75rem; background: rgba(255,255,255,0.1);
  backdrop-filter: blur(12px); border-radius: 9999px;
}
.modal-title-lg { font-size: 1.5rem; font-weight: 900; margin-top: 0.5rem; }
@media (min-width: 640px) { .modal-title-lg { font-size: 2.25rem; } }
.modal-body { padding: 1.5rem; display: flex; flex-direction: column; gap: 2rem; }
@media (min-width: 640px) { .modal-body { padding: 2.5rem; } }
.modal-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding-bottom: 1.5rem; border-bottom: 1px solid rgba(39, 39, 42, 0.8); }
@media (min-width: 640px) { .modal-meta { grid-template-columns: repeat(4, 1fr); } }
.meta-label { font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--zinc-500); font-weight: 400; }
.meta-value { font-size: 0.75rem; font-weight: 600; color: var(--zinc-300); margin-top: 0.25rem; }
.modal-links { display: flex; gap: 0.5rem; align-items: center; }
.modal-link-btn {
  padding: 0.375rem 0.75rem; background: var(--zinc-800); color: #fff;
  border-radius: 0.5rem; font-size: 0.6875rem; font-weight: 700;
  display: inline-flex; align-items: center; gap: 0.25rem; transition: background 0.2s;
}
.modal-link-btn:hover { background: var(--zinc-700); }
.modal-link-btn svg { width: 0.75rem; height: 0.75rem; }
.modal-section h4 { font-size: 1.125rem; font-weight: 700; margin-bottom: 0.5rem; }
.modal-section p { color: var(--zinc-400); font-size: 0.875rem; line-height: 1.7; }
.psr-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 768px) { .psr-grid { grid-template-columns: repeat(3, 1fr); } }
.psr-card { padding: 1.25rem; background: rgba(9, 9, 11, 0.6); border: 1px solid var(--zinc-800); border-radius: 0.75rem; }
.psr-icon { width: 2rem; height: 2rem; border-radius: 0.5rem; display: flex; align-items: center; justify-content: center; margin-bottom: 0.75rem; }
.psr-icon svg { width: 1rem; height: 1rem; }
.psr-icon.red { background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.2); color: var(--red-400); }
.psr-icon.indigo { background: rgba(99, 102, 241, 0.1); border: 1px solid rgba(99, 102, 241, 0.2); color: var(--indigo-400); }
.psr-icon.emerald { background: rgba(16, 185, 129, 0.1); border: 1px solid rgba(16, 185, 129, 0.2); color: var(--emerald-400); }
.psr-card h4 { font-weight: 700; font-size: 0.875rem; margin-bottom: 0.375rem; }
.psr-card p { font-size: 0.75rem; color: var(--zinc-400); line-height: 1.6; }
.gallery-title { font-size: 0.875rem; text-transform: uppercase; color: var(--zinc-500); margin-bottom: 0.75rem; font-weight: 400; }
.gallery-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 640px) { .gallery-grid { grid-template-columns: 1fr 1fr; } }
.gallery-item { height: 12rem; overflow: hidden; border-radius: 0.75rem; border: 1px solid var(--zinc-800); }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; }
.gallery-item img:hover { transform: scale(1.05); }
.modal-footer { padding: 1.5rem; background: var(--zinc-950); border-top: 1px solid rgba(39, 39, 42, 0.6); display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

/* ---------- Sección SERVICIOS ---------- */
.services-head { margin-bottom: 3rem; text-align: center; max-width: 42rem; margin-left: auto; margin-right: auto; }
.services-head .section-desc { max-width: none; margin-top: 1rem; }
.services-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin-bottom: 4rem; }
@media (min-width: 768px) { .services-grid { grid-template-columns: repeat(3, 1fr); } }
.service-card {
  background: rgba(24, 24, 27, 0.6); border: 1px solid var(--zinc-800);
  border-radius: 1rem; padding: 1.5rem; position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between; transition: border-color 0.2s;
}
.service-card:hover { border-color: var(--zinc-700); }
.service-card::before {
  content: ""; position: absolute; top: 0; right: 0; width: 6rem; height: 6rem;
  background: linear-gradient(to bottom right, rgba(255,255,255,0.05), transparent);
  border-bottom-left-radius: 100%; pointer-events: none;
}
.service-card h3 { font-weight: 700; font-size: 1.25rem; margin-bottom: 0.5rem; }
.service-card .desc { color: var(--zinc-400); font-size: 0.8125rem; margin-bottom: 1rem; line-height: 1.6; }
.service-price { margin-bottom: 1.5rem; display: flex; align-items: baseline; gap: 0.25rem; }
.service-price .amount { font-size: 1.875rem; font-weight: 900; }
.service-price .per { color: var(--zinc-500); font-size: 0.75rem; }
.service-features { list-style: none; margin-bottom: 2rem; display: flex; flex-direction: column; gap: 0.625rem; }
.service-features li { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.75rem; color: var(--zinc-300); }
.service-features li svg { width: 1rem; height: 1rem; margin-top: 0.125rem; flex-shrink: 0; }
.btn-hire {
  width: 100%; padding: 0.625rem; background: var(--zinc-800); color: #fff;
  font-weight: 600; border-radius: 0.75rem; font-size: 0.75rem; transition: background 0.2s;
  display: flex; align-items: center; justify-content: center; gap: 0.375rem;
}
.btn-hire:hover { background: var(--zinc-700); }
.btn-hire svg { width: 0.875rem; height: 0.875rem; }

/* ---------- Paquetes (estilo neón devshn) ---------- */
:root { --neon: #2bff88; }
.packages-head { margin: 4rem 0 2rem; }
.pkg-eyebrow { font-size: 0.75rem; letter-spacing: 0.2em; color: var(--neon); }
.packages-head-row { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.5rem; }
@media (min-width: 768px) { .packages-head-row { flex-direction: row; align-items: flex-end; justify-content: space-between; } }
.packages-title { font-size: 2.5rem; font-weight: 900; letter-spacing: -0.03em; }
.packages-sub { font-size: 0.75rem; color: var(--zinc-500); max-width: 18rem; }
.packages-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin-bottom: 5rem; }
@media (min-width: 768px) { .packages-grid { grid-template-columns: repeat(3, 1fr); } }
.pkg-card {
  position: relative; background: #0c0f0d;
  border: 1px solid rgba(43, 255, 136, 0.35); border-radius: 0.75rem;
  padding: 1.5rem; display: flex; flex-direction: column; justify-content: space-between;
  transition: all 0.3s;
}
.pkg-card:hover { border-color: var(--neon); box-shadow: 0 0 30px rgba(43, 255, 136, 0.12); transform: translateY(-3px); }
.pkg-card.muted { border-color: var(--zinc-800); background: #101113; }
.pkg-card.muted:hover { border-color: var(--zinc-700); box-shadow: none; }
.pkg-popular {
  position: absolute; top: -0.75rem; left: 1.25rem;
  background: var(--neon); color: #04130a; font-size: 0.625rem; font-weight: 800;
  letter-spacing: 0.15em; padding: 0.25rem 0.75rem; border-radius: 9999px;
  box-shadow: 0 0 15px rgba(43, 255, 136, 0.5);
}
.pkg-label { font-size: 0.625rem; letter-spacing: 0.2em; color: var(--zinc-500); margin-bottom: 0.5rem; }
.pkg-name { font-size: 1.375rem; font-weight: 800; margin-bottom: 0.75rem; }
.pkg-price { display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 1rem; }
.pkg-price .amount { font-size: 2.25rem; font-weight: 900; color: var(--neon); }
.pkg-price .note { font-size: 0.6875rem; color: var(--zinc-500); }
.pkg-desc { font-size: 0.75rem; color: var(--zinc-400); line-height: 1.7; margin-bottom: 1.25rem; }
.pkg-features { list-style: none; display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1.75rem; }
.pkg-features li { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.75rem; color: var(--zinc-300); }
.pkg-features li .tick { color: var(--neon); font-weight: 700; }
.pkg-actions { display: flex; gap: 0.625rem; }
.btn-demo {
  flex: 1; padding: 0.625rem; background: #17181a; border: 1px solid var(--zinc-800);
  color: var(--zinc-300); font-size: 0.6875rem; border-radius: 0.375rem; transition: all 0.2s;
}
.btn-demo:hover { border-color: var(--neon); color: var(--neon); }
.btn-solicitar {
  flex: 1; padding: 0.625rem; background: var(--neon); color: #04130a;
  font-size: 0.6875rem; font-weight: 700; border-radius: 0.375rem; transition: all 0.2s;
}
.btn-solicitar:hover { box-shadow: 0 0 20px rgba(43, 255, 136, 0.4); }
.pkg-card.muted .btn-solicitar { background: transparent; border: 1px solid var(--neon); color: var(--neon); }

/* ---------- Soporte y mantenimiento ---------- */
.support-head { text-align: center; max-width: 42rem; margin: 0 auto 2.5rem; }
.support-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin-bottom: 5rem; align-items: stretch; }
@media (min-width: 768px) { .support-grid { grid-template-columns: repeat(3, 1fr); } }
.support-card {
  background: rgba(24, 24, 27, 0.6); border: 1px solid var(--zinc-800);
  border-radius: 1rem; padding: 2rem 1.75rem; transition: all 0.3s;
}
.support-card:hover { border-color: var(--zinc-700); transform: translateY(-3px); }
.support-card.featured {
  background: #0b2b2b; border-color: rgba(16, 185, 129, 0.35);
  transform: scale(1.03); box-shadow: 0 20px 40px rgba(0,0,0,0.4);
}
.support-card.featured:hover { transform: scale(1.03) translateY(-3px); }
.support-card h3 { font-size: 1.25rem; font-weight: 800; margin-bottom: 0.75rem; }
.support-price { display: flex; align-items: baseline; gap: 0.375rem; margin-bottom: 1.5rem; }
.support-price .amount { font-size: 2rem; font-weight: 900; color: var(--emerald-400); }
.support-price .period { font-size: 0.75rem; color: var(--zinc-500); }
.support-features { list-style: none; display: flex; flex-direction: column; gap: 0.875rem; }
.support-features li { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.8125rem; color: var(--zinc-300); }
.support-features li::before { content: "•"; color: var(--emerald-400); font-weight: 700; }

/* ---------- Modal demo de paquete (estilo de la web original) ---------- */
.demo-card {
  max-width: 60rem; margin: 0 auto; background: var(--zinc-900);
  border: 1px solid var(--zinc-800); border-radius: 1.5rem; overflow: hidden;
  box-shadow: 0 25px 60px rgba(0,0,0,0.6); position: relative;
}
.demo-body { padding: 1.5rem; display: flex; flex-direction: column; gap: 1.5rem; }
@media (min-width: 640px) { .demo-body { padding: 2.5rem; } }
.demo-eyebrow { font-size: 0.6875rem; letter-spacing: 0.2em; color: var(--color-accent); }
.demo-title { font-size: 2rem; font-weight: 900; letter-spacing: -0.02em; margin-top: 0.25rem; }
@media (min-width: 640px) { .demo-title { font-size: 2.75rem; } }
.demo-price-pill {
  display: inline-flex; align-items: baseline; gap: 0.375rem; margin-top: 0.75rem;
  border: 1px solid var(--zinc-800); background: rgba(9,9,11,0.4); border-radius: 0.75rem; padding: 0.5rem 1rem;
}
.demo-price-pill .amount { color: var(--color-accent); font-weight: 900; font-size: 1.25rem; }
.demo-price-pill .note { font-size: 0.6875rem; color: var(--zinc-500); }
.demo-desc { font-size: 0.8125rem; color: var(--zinc-400); max-width: 34rem; line-height: 1.8; }
.demo-info-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 768px) { .demo-info-grid { grid-template-columns: repeat(3, 1fr); } }
.demo-info-card { background: rgba(9,9,11,0.6); border: 1px solid var(--zinc-800); border-radius: 0.75rem; padding: 1.25rem; transition: border-color 0.2s; }
.demo-info-card:hover { border-color: var(--zinc-700); }
.demo-info-card h5 { font-size: 0.6875rem; letter-spacing: 0.1em; color: var(--color-accent); margin-bottom: 0.625rem; }
.demo-info-card p, .demo-info-card li { font-size: 0.75rem; color: var(--zinc-400); line-height: 1.8; }
.demo-info-card ul { list-style: none; }
.demo-info-card li::before { content: "• "; color: var(--zinc-500); }
.demo-editable-note {
  border: 1px dashed var(--zinc-700); border-radius: 0.75rem; padding: 0.75rem 1rem;
  font-size: 0.6875rem; color: var(--zinc-500);
}
.demo-editable-note b { color: var(--color-accent); }

/* Mockup navegador dentro de la demo */
.demo-browser { border: 1px solid var(--zinc-800); border-radius: 0.75rem; overflow: hidden; background: var(--zinc-950); }
.demo-browser-bar {
  background: var(--zinc-900); padding: 0.625rem 1rem; border-bottom: 1px solid var(--zinc-800);
  display: flex; align-items: center; gap: 0.75rem;
}
.demo-browser-url {
  flex: 1; max-width: 20rem; background: rgba(9,9,11,0.6); border: 1px solid var(--zinc-800);
  border-radius: 0.375rem; padding: 0.25rem 0.75rem; font-size: 0.625rem; color: var(--zinc-500);
}
.demo-mock-nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.75rem 1.5rem; border-bottom: 1px solid rgba(39,39,42,0.6); font-size: 0.6875rem;
}
.demo-mock-nav .brand { display: flex; align-items: center; gap: 0.375rem; color: var(--text-main, #fff); font-weight: 600; }
.demo-mock-nav .brand::before { content: "●"; color: var(--color-accent); font-size: 0.5rem; }
.demo-mock-nav .links { display: flex; gap: 1rem; color: var(--zinc-500); }
.demo-mock-nav .links .hl { color: var(--color-accent); }
.demo-mock-hero { text-align: center; padding: 3rem 1.5rem; }
.demo-mock-badge {
  display: inline-block; font-size: 0.625rem; letter-spacing: 0.2em; color: var(--color-accent);
  border: 1px solid var(--zinc-700); border-radius: 9999px; padding: 0.25rem 0.875rem; margin-bottom: 1.25rem;
}
.demo-mock-title { font-size: 1.75rem; font-weight: 900; letter-spacing: -0.02em; max-width: 26rem; margin: 0 auto 1rem; }
@media (min-width: 640px) { .demo-mock-title { font-size: 2.25rem; } }
.demo-mock-sub { font-size: 0.75rem; color: var(--zinc-500); max-width: 26rem; margin: 0 auto 1.5rem; line-height: 1.8; }
.demo-mock-ctas { display: flex; justify-content: center; gap: 0.75rem; }
.demo-mock-cta {
  padding: 0.625rem 1.25rem; border-radius: 0.75rem; font-size: 0.6875rem; font-weight: 700;
  background: var(--color-primary); color: #fff; box-shadow: 0 8px 20px rgba(0,0,0,0.25); transition: filter 0.2s;
}
.demo-mock-cta:hover { filter: brightness(1.15); }
.demo-mock-cta.alt { background: transparent; border: 1px solid var(--zinc-700); color: var(--zinc-300); box-shadow: none; font-weight: 500; }
.demo-mock-feats { display: grid; grid-template-columns: 1fr; gap: 0.875rem; padding: 0 1.5rem 1.5rem; }
@media (min-width: 640px) { .demo-mock-feats { grid-template-columns: repeat(3, 1fr); } }
.demo-mock-feat { background: var(--zinc-900); border: 1px solid var(--zinc-800); border-radius: 0.75rem; padding: 1rem; transition: border-color 0.2s; }
.demo-mock-feat:hover { border-color: var(--zinc-700); }
.demo-mock-feat .sq { width: 1.75rem; height: 1.75rem; border-radius: 0.5rem; background: var(--color-primary); margin-bottom: 0.625rem; }
.demo-mock-feat h6 { font-size: 0.8125rem; font-weight: 700; margin-bottom: 0.25rem; }
.demo-mock-feat p { font-size: 0.6875rem; color: var(--zinc-500); }
.demo-mock-pricebox {
  max-width: 22rem; margin: 0 auto 2rem; text-align: center;
  border: 1px solid var(--zinc-700); background: var(--zinc-900); border-radius: 1rem; padding: 1.5rem;
}
.demo-mock-pricebox .plan { font-size: 0.625rem; letter-spacing: 0.2em; color: var(--zinc-500); }
.demo-mock-pricebox .price { font-size: 2rem; font-weight: 900; color: var(--color-accent); margin: 0.375rem 0; }
.demo-mock-pricebox .note { font-size: 0.625rem; color: var(--zinc-500); margin-bottom: 1rem; }

/* Mockup dashboard en vivo */
.demo-dash { padding: 1.25rem; }
.demo-dash-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.demo-dash-head .t { font-weight: 800; font-size: 1rem; }
.demo-dash-head .live { font-size: 0.625rem; letter-spacing: 0.15em; color: var(--color-accent); }
.demo-dash-clock { font-size: 0.75rem; color: var(--zinc-500); }
.demo-dash-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-bottom: 1rem; }
@media (min-width: 640px) { .demo-dash-stats { grid-template-columns: repeat(4, 1fr); } }
.demo-dash-stat { background: var(--zinc-900); border: 1px solid var(--zinc-800); border-radius: 0.75rem; padding: 0.875rem; }
.demo-dash-stat .k { font-size: 0.5625rem; letter-spacing: 0.15em; color: var(--zinc-500); }
.demo-dash-stat .v { font-size: 1.375rem; font-weight: 900; color: var(--text-main, #fff); margin: 0.25rem 0; }
.demo-dash-stat .d { font-size: 0.625rem; color: var(--color-accent); }
.demo-dash-cols { display: grid; grid-template-columns: 1fr; gap: 0.75rem; }
@media (min-width: 768px) { .demo-dash-cols { grid-template-columns: 3fr 2fr; } }
.demo-dash-chart { background: var(--zinc-900); border: 1px solid var(--zinc-800); border-radius: 0.75rem; padding: 1rem; }
.demo-dash-chart .lbl { font-size: 0.625rem; color: var(--zinc-500); margin-bottom: 0.75rem; display: flex; justify-content: space-between; }
.demo-dash-bars { display: flex; align-items: flex-end; gap: 4px; height: 90px; }
.demo-dash-bars span { flex: 1; background: linear-gradient(to top, var(--color-accent), transparent); border-radius: 2px 2px 0 0; transition: height 0.6s ease; opacity: 0.8; }
.demo-dash-feed { background: var(--zinc-900); border: 1px solid var(--zinc-800); border-radius: 0.75rem; padding: 1rem; }
.demo-dash-feed .lbl { font-size: 0.625rem; color: var(--zinc-500); margin-bottom: 0.75rem; }
.demo-dash-feed .item { display: flex; justify-content: space-between; gap: 0.5rem; font-size: 0.6875rem; color: var(--zinc-400); padding: 0.375rem 0; border-bottom: 1px solid rgba(39,39,42,0.4); }
.demo-dash-feed .item .time { color: var(--zinc-500); flex-shrink: 0; }

/* Cotizador */
.quoter {
  background: rgba(24, 24, 27, 0.4); border: 1px solid var(--zinc-800);
  border-radius: 1rem; padding: 1.5rem; max-width: 56rem; margin: 0 auto;
  box-shadow: 0 20px 25px rgba(0,0,0,0.3);
}
@media (min-width: 640px) { .quoter { padding: 2.5rem; } }
.quoter-head {
  display: flex; flex-direction: column; gap: 1rem;
  padding-bottom: 1.5rem; border-bottom: 1px solid rgba(39, 39, 42, 0.8); margin-bottom: 2rem;
}
@media (min-width: 768px) { .quoter-head { flex-direction: row; align-items: center; justify-content: space-between; } }
.quoter-head h3 { font-weight: 700; font-size: 1.25rem; display: flex; align-items: center; gap: 0.5rem; }
.quoter-head h3 svg { width: 1.25rem; height: 1.25rem; color: var(--indigo-400); }
.quoter-head .hint { color: var(--zinc-500); font-size: 0.75rem; margin-top: 0.25rem; }
.quoter-price-box { text-align: right; }
.quoter-price-box span { font-size: 0.75rem; color: var(--zinc-400); }
.quoter-price { font-size: 1.875rem; font-weight: 900; color: var(--green-400); margin-top: 0.25rem; }
.quoter-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 768px) { .quoter-grid { grid-template-columns: 1fr 1fr; } }
.field-label { font-size: 0.75rem; color: var(--zinc-400); text-transform: uppercase; letter-spacing: 0.05em; display: block; margin-bottom: 0.625rem; }
.type-buttons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
.type-btn {
  padding: 0.5rem 0.75rem; border-radius: 0.5rem;
  border: 1px solid var(--zinc-800); background: rgba(9, 9, 11, 0.4);
  color: var(--zinc-400); font-size: 0.75rem; font-weight: 500; transition: all 0.2s;
}
.type-btn:hover { border-color: var(--zinc-700); }
.type-btn.active { background: rgba(79, 70, 229, 0.1); border-color: var(--indigo-500); color: #fff; font-weight: 600; }
.feature-options { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1.5rem; }
.feature-option {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.75rem; background: rgba(9, 9, 11, 0.3);
  border: 1px solid var(--zinc-800); border-radius: 0.75rem; cursor: pointer; transition: border-color 0.2s;
}
.feature-option:hover { border-color: var(--zinc-700); }
.feature-option .left { display: flex; align-items: center; gap: 0.75rem; }
.feature-option input { accent-color: var(--indigo-500); width: 1rem; height: 1rem; }
.feature-option .name { font-size: 0.75rem; color: var(--zinc-300); font-weight: 500; }
.feature-option .price { font-size: 0.75rem; color: var(--zinc-500); }
.quote-summary {
  background: rgba(9, 9, 11, 0.6); border: 1px solid var(--zinc-800);
  padding: 1.5rem; border-radius: 1rem; display: flex; flex-direction: column; justify-content: space-between;
}
.quote-summary h4 { font-weight: 700; font-size: 0.875rem; margin-bottom: 1rem; }
.summary-lines { display: flex; flex-direction: column; gap: 0.5rem; border-bottom: 1px solid rgba(39, 39, 42, 0.6); padding-bottom: 1rem; font-size: 0.75rem; color: var(--zinc-400); }
.summary-lines .line { display: flex; justify-content: space-between; }
.summary-lines .line span:last-child { color: #fff; }
.summary-total { display: flex; justify-content: space-between; font-size: 0.875rem; font-weight: 700; padding-top: 0.75rem; }
.summary-total .total { color: var(--green-400); font-size: 1rem; }

/* ---------- Sección CONTACTO ---------- */
.contact-card {
  max-width: 48rem; margin: 0 auto; background: var(--zinc-900);
  border: 1px solid var(--zinc-800); border-radius: 1.5rem; overflow: hidden;
  box-shadow: 0 25px 50px rgba(0,0,0,0.5);
}
.contact-titlebar {
  background: var(--zinc-950); padding: 1.5rem;
  border-bottom: 1px solid var(--zinc-800);
  display: flex; align-items: center; justify-content: space-between;
}
.contact-titlebar .left { display: flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; color: var(--zinc-400); }
.contact-titlebar .left svg { width: 1rem; height: 1rem; color: var(--emerald-400); }
.online-badge { display: flex; align-items: center; gap: 0.25rem; font-size: 0.625rem; color: var(--zinc-500); }
.online-badge .dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--emerald-500); }
.contact-body { padding: 1.5rem; }
@media (min-width: 640px) { .contact-body { padding: 2.5rem; } }

.steps-bar { display: flex; align-items: center; gap: 0.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid rgba(39, 39, 42, 0.6); margin-bottom: 1.5rem; }
.step-item { flex: 1; display: flex; align-items: center; gap: 0.5rem; }
.step-circle {
  width: 1.5rem; height: 1.5rem; border-radius: 50%; font-size: 0.6875rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  background: var(--zinc-800); color: var(--zinc-500); transition: all 0.2s;
}
.step-item.done .step-circle { background: var(--indigo-600); color: #fff; }
.step-label { font-size: 0.75rem; font-weight: 500; color: var(--zinc-400); display: none; }
@media (min-width: 640px) { .step-label { display: block; } }
.step-line { flex: 1; height: 1px; background: var(--zinc-800); }

.form-step { display: none; flex-direction: column; gap: 1rem; }
.form-step.active { display: flex; animation: fadeIn 0.4s ease both; }
.form-step h4 { font-size: 1rem; font-weight: 700; margin-bottom: 0.5rem; }
.form-field label { font-size: 0.75rem; color: var(--zinc-500); display: block; margin-bottom: 0.25rem; }
.form-field input, .form-field textarea {
  width: 100%; background: var(--zinc-950); border: 1px solid var(--zinc-800);
  border-radius: 0.75rem; padding: 0.75rem 1rem; font-size: 0.75rem; color: #fff;
  outline: none; transition: border-color 0.2s; resize: none;
}
.form-field input:focus, .form-field textarea:focus { border-color: var(--indigo-500); box-shadow: 0 0 0 1px var(--indigo-500); }
.form-nav { padding-top: 1rem; display: flex; justify-content: space-between; }
.form-nav.end { justify-content: flex-end; }
.budget-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.budget-btn {
  padding: 0.875rem; border-radius: 0.75rem; border: 1px solid var(--zinc-800);
  background: rgba(9, 9, 11, 0.4); font-size: 0.75rem; color: var(--zinc-400);
  text-align: left; transition: all 0.2s;
}
.budget-btn:hover { border-color: var(--zinc-700); }
.budget-btn.active { background: rgba(79, 70, 229, 0.1); border-color: var(--indigo-500); color: #fff; font-weight: 600; }

.sent-message { text-align: center; padding: 2.5rem 0; display: flex; flex-direction: column; gap: 1rem; align-items: center; }
.sent-icon {
  width: 3rem; height: 3rem; border-radius: 50%;
  background: rgba(34, 197, 94, 0.1); border: 1px solid rgba(34, 197, 94, 0.3);
  display: flex; align-items: center; justify-content: center; margin-bottom: 0.5rem;
}
.sent-icon svg { width: 1.5rem; height: 1.5rem; color: var(--green-400); }
.sent-message h3 { font-weight: 700; font-size: 1.25rem; }
.sent-message p { color: var(--zinc-400); font-size: 0.8125rem; max-width: 28rem; }

.direct-contact { margin-top: 3rem; text-align: center; font-size: 0.75rem; color: var(--zinc-500); }
.direct-contact .details { color: var(--zinc-300); font-weight: 600; margin-top: 0.25rem; }

/* ---------- Footer ---------- */
footer { border-top: 1px solid var(--zinc-900); background: var(--zinc-950); padding: 2rem 0; position: relative; z-index: 10; }
.footer-inner {
  max-width: 80rem; margin: 0 auto; padding: 0 1.5rem;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 1rem;
}
@media (min-width: 768px) { .footer-inner { flex-direction: row; } }
.footer-inner p { font-size: 0.75rem; color: var(--zinc-500); }
.footer-links { display: flex; gap: 1rem; font-size: 0.75rem; color: var(--zinc-400); }
.footer-links a:hover { color: #fff; }

/* ---------- Panel CMS Admin ---------- */
#admin-panel {
  position: fixed; top: 0; right: 0; bottom: 0; width: 100%; max-width: 42rem;
  background: var(--zinc-950); border-left: 1px solid var(--zinc-800);
  z-index: 60; display: none; flex-direction: column; box-shadow: -25px 0 50px rgba(0,0,0,0.5);
}
#admin-panel.open { display: flex; animation: slideIn 0.3s ease both; }
.admin-head {
  background: var(--zinc-900); padding: 1.25rem; border-bottom: 1px solid var(--zinc-800);
  display: flex; align-items: center; justify-content: space-between;
}
.admin-head .info { display: flex; align-items: center; gap: 0.5rem; }
.admin-head .info svg { width: 1.25rem; height: 1.25rem; color: var(--indigo-400); }
.admin-head h3 { font-weight: 700; font-size: 0.875rem; }
.admin-head .sub { font-size: 0.625rem; color: var(--zinc-500); }
.admin-actions { display: flex; align-items: center; gap: 0.5rem; }
.save-ok { font-size: 0.6875rem; color: var(--green-400); font-weight: 700; display: none; align-items: center; gap: 0.25rem; }
.save-ok.show { display: flex; animation: pulse 1s infinite; }
.btn-save {
  background: var(--indigo-600); color: #fff; font-weight: 700; font-size: 0.75rem;
  padding: 0.5rem 1rem; border-radius: 0.5rem;
  display: flex; align-items: center; gap: 0.375rem; transition: background 0.2s;
}
.btn-save:hover { background: var(--indigo-500); }
.btn-close-admin {
  width: 2rem; height: 2rem; border-radius: 0.5rem;
  background: rgba(39, 39, 42, 0.8); color: var(--zinc-400);
  display: flex; align-items: center; justify-content: center; transition: all 0.2s;
}
.btn-close-admin:hover { background: rgba(63, 63, 70, 0.8); color: #fff; }
.admin-body { flex: 1; display: flex; overflow: hidden; }
.admin-tabs {
  width: 33.333%; background: var(--zinc-950); border-right: 1px solid var(--zinc-900);
  padding: 0.5rem; display: flex; flex-direction: column; gap: 0.25rem; overflow-y: auto;
}
.admin-tab {
  width: 100%; display: flex; align-items: center; gap: 0.625rem;
  padding: 0.625rem 0.75rem; border-radius: 0.5rem; text-align: left;
  font-size: 0.6875rem; font-weight: 500; color: var(--zinc-500); transition: all 0.2s;
}
.admin-tab:hover { color: var(--zinc-300); }
.admin-tab.active { background: var(--zinc-900); color: #fff; font-weight: 700; }
.admin-tab svg { width: 1rem; height: 1rem; flex-shrink: 0; }
.admin-tab.active svg { color: var(--color-accent); }
.admin-content { width: 66.666%; padding: 1.5rem; overflow-y: auto; background: rgba(24, 24, 27, 0.4); display: flex; flex-direction: column; gap: 1.5rem; }
.admin-section { display: none; flex-direction: column; gap: 1rem; }
.admin-section.active { display: flex; }
.admin-section-title { font-weight: 700; font-size: 0.75rem; color: var(--zinc-400); text-transform: uppercase; letter-spacing: 0.05em; }
.admin-field label { font-size: 0.625rem; color: var(--zinc-500); display: block; margin-bottom: 0.25rem; }
.admin-field input[type="text"], .admin-field input[type="number"], .admin-field textarea, .admin-field select {
  width: 100%; background: var(--zinc-950); border: 1px solid var(--zinc-800);
  border-radius: 0.5rem; padding: 0.625rem; font-size: 0.75rem; color: #fff; outline: none;
}
.admin-field input:focus, .admin-field textarea:focus { border-color: var(--indigo-500); }
.admin-field input[type="range"] { width: 100%; accent-color: var(--indigo-500); }
.color-row { display: flex; gap: 0.5rem; }
.color-row input[type="color"] { width: 2.5rem; height: 2.5rem; background: transparent; border: 1px solid var(--zinc-800); border-radius: 0.5rem; cursor: pointer; padding: 2px; }
.color-row input[type="text"] { flex: 1; }
.toggle-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.75rem; background: rgba(9, 9, 11, 0.4);
  border: 1px solid var(--zinc-800); border-radius: 0.75rem;
}
.toggle-row .t-title { font-size: 0.75rem; color: var(--zinc-300); font-weight: 700; display: block; }
.toggle-row .t-sub { font-size: 0.625rem; color: var(--zinc-500); }
.toggle-row input { accent-color: var(--indigo-500); width: 1rem; height: 1rem; }
.admin-proj-row {
  padding: 0.75rem; background: rgba(9, 9, 11, 0.4);
  border: 1px solid rgba(39, 39, 42, 0.6); border-radius: 0.75rem;
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; transition: border-color 0.2s;
}
.admin-proj-row:hover { border-color: rgba(63, 63, 70, 0.8); }
.admin-proj-row .left { display: flex; align-items: center; gap: 0.75rem; }
.admin-proj-row .name { font-size: 0.75rem; font-weight: 700; }
.admin-proj-row .cat { font-size: 0.625rem; color: var(--zinc-500); }
.admin-proj-row .actions { display: flex; gap: 0.5rem; }
.icon-btn { padding: 0.375rem; background: var(--zinc-800); border-radius: 0.25rem; color: var(--zinc-300); display: flex; transition: all 0.2s; }
.icon-btn:hover { background: var(--zinc-700); }
.icon-btn.danger:hover { background: rgba(127, 29, 29, 0.4); color: var(--red-400); }
.icon-btn svg { width: 0.875rem; height: 0.875rem; }
.btn-add {
  padding: 0.375rem 0.75rem; background: var(--indigo-600); color: #fff;
  font-weight: 700; border-radius: 0.5rem; font-size: 0.625rem;
  display: flex; align-items: center; gap: 0.375rem; transition: background 0.2s;
}
.btn-add:hover { background: var(--indigo-500); }
.btn-add svg { width: 0.875rem; height: 0.875rem; }
.proj-edit-form {
  padding: 1rem; background: rgba(9, 9, 11, 0.8); border: 1px solid var(--zinc-800);
  border-radius: 0.75rem; display: flex; flex-direction: column; gap: 1rem;
}
.proj-edit-form h5 { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; }
.two-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.form-actions { display: flex; justify-content: flex-end; gap: 0.5rem; padding-top: 0.5rem; border-top: 1px solid var(--zinc-900); }
.srv-edit-card { padding: 1rem; background: rgba(9, 9, 11, 0.4); border: 1px solid var(--zinc-800); border-radius: 0.75rem; display: flex; flex-direction: column; gap: 0.75rem; }
.srv-edit-card .tag { font-size: 0.625rem; font-weight: 700; color: var(--zinc-500); text-transform: uppercase; }

/* Scrollbars */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--zinc-950); }
::-webkit-scrollbar-thumb { background: var(--zinc-800); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--zinc-700); }

@media (max-width: 767px) {
  body.custom-cursor-on, body.custom-cursor-on * { cursor: auto !important; }
  #custom-cursor { display: none; }
}

/* ==========================================
   MODO CLARO
   Invierte la escala zinc y ajusta superficies clave.
   ========================================== */
body.light {
  --zinc-950: #f4f4f5;
  --zinc-900: #ffffff;
  --zinc-800: #e4e4e7;
  --zinc-700: #d4d4d8;
  --zinc-500: #71717a;
  --zinc-400: #52525b;
  --zinc-300: #3f3f46;
  --text-main: #18181b;
  background-color: #fafafa !important;
  color: #18181b;
}
body.light .logo-text,
body.light .hero-title {
  background: linear-gradient(to bottom, #18181b, #3f3f46);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
body.light header { background: rgba(255, 255, 255, 0.7); border-bottom-color: var(--zinc-800); }
body.light .main-nav { background: rgba(244, 244, 245, 0.8); }
body.light .nav-tab.active { background: #fff; color: #18181b; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
body.light .ctrl-btn { background: #fff; color: #18181b; border-color: var(--zinc-800); }
body.light .status-pill { background: #fff; color: #3f3f46; }
body.light .workspace { background: rgba(255,255,255,0.5); box-shadow: 0 25px 50px rgba(0,0,0,0.08); }
body.light .win { background: #fff; }
body.light .win-titlebar { background: var(--zinc-950); }
body.light .vscode-body { color: #27272a; }
body.light .compiled-card,
body.light .chrome-body,
body.light .stat-card { background: #fff; }
body.light .compiled-card .big,
body.light .demo-dash-stat .v { color: #18181b; }
body.light .project-card,
body.light .service-card,
body.light .quoter,
body.light .contact-card,
body.light .modal-card,
body.light .demo-card { background: #fff; box-shadow: 0 20px 40px rgba(0,0,0,0.08); }
body.light .project-name,
body.light .quoter-head h3,
body.light .service-card h3,
body.light .section-title,
body.light .packages-title,
body.light .modal-title-lg,
body.light .demo-title,
body.light h4, body.light h5, body.light h6 { color: #18181b; }
body.light .project-cover::after { background: linear-gradient(to top, rgba(255,255,255,0.9), transparent 60%); }
body.light .project-category { background: rgba(255,255,255,0.9); color: #3f3f46; }
body.light .modal-overlay { background: rgba(244, 244, 245, 0.95); }
body.light .quote-summary,
body.light .feature-option,
body.light .type-btn,
body.light .budget-btn,
body.light .demo-info-card,
body.light .demo-browser-url,
body.light .demo-price-pill { background: var(--zinc-950); }
body.light .form-field input, body.light .form-field textarea,
body.light .admin-field input, body.light .admin-field textarea, body.light .admin-field select { background: #fff; color: #18181b; }
body.light .contact-titlebar,
body.light .modal-footer { background: var(--zinc-950); }
body.light footer { background: var(--zinc-950); border-top-color: var(--zinc-800); }
body.light .btn-white { background: #18181b; color: #fff; }
body.light .btn-white:hover { background: #27272a; }
body.light .btn-dark { background: #fff; color: #18181b; }
body.light .terminal-window, body.light .terminal-titlebar, body.light .terminal-body { /* la terminal se mantiene oscura a propósito */ }
body.light #bg-canvas { opacity: 0.35; }
/* Las tarjetas de paquetes conservan su look neón oscuro también en modo
   claro: se fuerza el texto claro dentro de ellas. */
body.light .pkg-card { color: #e4e4e7; background: #0a0c0b; }
body.light .pkg-card .pkg-name { color: #fff; }
body.light .pkg-card .pkg-desc, body.light .pkg-card .pkg-features li { color: #a1a1aa; }
body.light .pkg-card .btn-demo { color: #d4d4d8; border-color: #3f3f46; }
body.light .support-card { background: #fff; border: 1px solid var(--zinc-800); color: #18181b; }
body.light .support-card h3 { color: #18181b; }
body.light .support-card.featured { background: #0f2e2e; color: #fff; }
body.light .support-card.featured h3, body.light .support-card.featured li { color: #fff; }

/* ==========================================
   ADMIN INDEPENDIENTE (admin.php) + LOGIN
   ========================================== */
.admin-topbar {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--zinc-900); border-bottom: 1px solid var(--zinc-800);
  padding: 0.625rem 1.25rem; font-size: 0.6875rem; color: var(--zinc-500);
}
.admin-topbar a { color: var(--zinc-300); margin-left: 1rem; }
.admin-topbar a:hover { color: #fff; }
.admin-topbar a.logout { color: var(--red-400); }
#admin-panel.standalone {
  position: static; max-width: 100%; width: 100%;
  height: calc(100vh - 2.5rem); border-left: none;
  display: none;
}
#admin-panel.standalone.open { display: flex; animation: none; }
#admin-panel.standalone .btn-close-admin { display: none; }
#admin-panel.standalone .admin-tabs { width: 16rem; flex-shrink: 0; }
#admin-panel.standalone .admin-content { width: auto; flex: 1; max-width: 56rem; }

.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1rem; background: var(--zinc-950); }
.login-card {
  width: 100%; max-width: 22rem; background: var(--zinc-900);
  border: 1px solid var(--zinc-800); border-radius: 1rem; padding: 2rem;
  display: flex; flex-direction: column; gap: 1rem; text-align: center;
}
.login-icon {
  width: 3rem; height: 3rem; margin: 0 auto; border-radius: 0.75rem;
  background: rgba(99, 102, 241, 0.1); border: 1px solid rgba(99, 102, 241, 0.3);
  color: var(--indigo-400); display: flex; align-items: center; justify-content: center;
}
.login-card h1 { font-size: 1.125rem; font-weight: 800; }
.login-card > p { font-size: 0.6875rem; color: var(--zinc-500); }
.login-card .admin-field { text-align: left; }
.login-error {
  background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.3);
  color: var(--red-400); font-size: 0.75rem; border-radius: 0.5rem; padding: 0.625rem;
}
.login-back { font-size: 0.6875rem; color: var(--zinc-500); }
.login-back:hover { color: #fff; }
.pass-form {
  display: none; align-items: center; gap: 0.5rem; flex-wrap: wrap;
  background: var(--zinc-900); border-bottom: 1px solid var(--zinc-800);
  padding: 0.625rem 1.25rem;
}
.pass-form.show { display: flex; }
.pass-form input {
  background: var(--zinc-950); border: 1px solid var(--zinc-800);
  border-radius: 0.5rem; padding: 0.5rem 0.75rem; font-size: 0.75rem; color: #fff; outline: none;
}
.pass-form input:focus { border-color: var(--indigo-500); }
.pass-ok { font-size: 0.6875rem; color: var(--green-400); }
.pass-err { font-size: 0.6875rem; color: var(--red-400); }
.quote-status {
  background: var(--zinc-950); border: 1px solid var(--zinc-800);
  border-radius: 0.375rem; padding: 0.25rem 0.5rem;
  font-size: 0.625rem; color: var(--zinc-300); outline: none;
}