:root {
  --bg: #0a0e14;
  --bg2: #0f141d;
  --panel: #131a25;
  --border: #1f2836;
  --text: #e6edf5;
  --muted: #93a1b5;
  --accent: #ff7a1a;
  --accent-2: #ffb703;
  --mono: 'JetBrains Mono', monospace;
  --sans: 'Space Grotesk', sans-serif;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  line-height:1.6;
  overflow-x:hidden;
}
a { color: var(--accent); text-decoration:none; }
a:hover { color: var(--accent-2); }
h1,h2,h3 { line-height:1.15; }
section { padding: 90px 5vw; max-width:1200px; margin:0 auto; }

/* ═══ NAV ═══ */
.nav {
  position: fixed; top:0; left:0; right:0; z-index:100;
  background: rgba(10,14,20,.85);
  backdrop-filter: blur(12px);
  border-bottom:1px solid var(--border);
}
.nav-inner {
  max-width:1200px; margin:0 auto; padding:16px 5vw;
  display:flex; align-items:center; justify-content:space-between;
}
.logo { font-family:var(--mono); font-weight:700; font-size:1.4rem; letter-spacing:-1px; color:var(--text); }
.logo .dot { color:var(--accent); }
.nav-links { display:flex; gap:28px; align-items:center; }
.nav-links a { color:var(--muted); font-size:.95rem; font-family:var(--mono); }
.nav-links a:hover { color:var(--text); }
.nav-links .nav-cta { color:var(--accent); }
.nav-right { display:flex; gap:12px; align-items:center; }
.lang-toggle {
  background:var(--panel); color:var(--text); border:1px solid var(--border);
  padding:6px 14px; border-radius:999px; cursor:pointer; font-family:var(--mono); font-size:.85rem;
}
.lang-toggle:hover { border-color:var(--accent); color:var(--accent); }
.menu-btn { display:none; background:none; border:none; color:var(--text); font-size:1.5rem; cursor:pointer; }

/* ═══ HERO ═══ */
.hero {
  min-height:100vh; display:flex; flex-direction:column; justify-content:center;
  position:relative; padding:120px 5vw 60px; max-width:1200px; margin:0 auto;
}
.hero-bg {
  position:fixed; inset:0; z-index:-1;
  background:
    radial-gradient(600px 300px at 20% 10%, rgba(255,122,26,.08), transparent 60%),
    radial-gradient(800px 400px at 90% 90%, rgba(255,122,26,.05), transparent 60%),
    var(--bg);
}
.hero-num {
  font-family:var(--mono); color:var(--accent); font-size:.9rem; letter-spacing:3px; margin-bottom:20px;
}
.hero-title .line {
  display:block; font-weight:700; font-size:clamp(2rem,6vw,4.5rem); letter-spacing:-2px;
  opacity:0; transform:translateY(30px);
}
.hero-title .line.big { font-size:clamp(2.6rem,8.5vw,6.5rem); }
.accent { color:var(--accent); }
.accent-2 { color:var(--accent-2); }
.hero-sub { color:var(--muted); max-width:520px; margin-top:24px; font-size:1.15rem; }
.hero-cta { display:flex; gap:16px; flex-wrap:wrap; margin-top:32px; }
.hero-meta { margin-top:48px; display:flex; gap:12px; align-items:center; color:var(--muted); font-family:var(--mono); font-size:.85rem; flex-wrap:wrap; }
.pulse-dot { width:8px; height:8px; background:var(--accent); border-radius:50%; animation:pulse 1.6s infinite; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(255,122,26,.5);} 100%{box-shadow:0 0 0 10px rgba(255,122,26,0);} }
.scroll-hint { position:absolute; bottom:24px; left:50%; transform:translateX(-50%); color:var(--muted); font-family:var(--mono); font-size:.8rem; animation:bob 1.5s infinite; }
@keyframes bob { 0%,100%{transform:translateX(-50%) translateY(0);} 50%{transform:translateX(-50%) translateY(6px);} }

.btn {
  display:inline-block; padding:12px 26px; border-radius:8px; font-family:var(--mono);
  font-size:.95rem; font-weight:700; cursor:pointer; transition:all .2s; border:1px solid transparent;
}
.btn-primary { background:var(--accent); color:#0a0e14; }
.btn-primary:hover { background:var(--accent-2); color:#0a0e14; transform:translateY(-2px); }
.btn-ghost { border:1px solid var(--border); color:var(--text); background:transparent; }
.btn-ghost:hover { border-color:var(--accent); color:var(--accent); transform:translateY(-2px); }
.btn-site { background:linear-gradient(135deg, #d4a017, #f0c43c); color:#fff; border:none; text-shadow:0 1px 2px rgba(0,0,0,.25); box-shadow:0 4px 14px rgba(212,160,23,.35); }
.btn-site:hover { background:linear-gradient(135deg, #e0b52a, #f7d45e); color:#fff; transform:translateY(-2px); box-shadow:0 6px 18px rgba(212,160,23,.5); }

/* ═══ SECCIONES ═══ */
.sec-head { display:flex; align-items:baseline; gap:16px; margin-bottom:50px; }
.sec-index { font-family:var(--mono); color:var(--accent); font-size:1rem; }
.sec-head h2 { font-size:clamp(1.8rem,4vw,2.8rem); font-weight:700; }

/* ═══ PROCESO ═══ */
.steps { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:24px; }
.step {
  background:var(--panel); border:1px solid var(--border); border-radius:14px; padding:28px;
  transition:transform .3s, border-color .3s; position:relative; overflow:hidden;
}
.step:hover { transform:translateY(-4px); border-color:var(--accent); }
.step-num { font-family:var(--mono); color:var(--muted); font-size:.85rem; opacity:.6; }
.step-icon { font-size:2rem; margin:12px 0; }
.step h3 { font-size:1.2rem; margin-bottom:8px; }
.step p { color:var(--muted); font-size:.95rem; }

/* ═══ CHAT ═══ */
.chat-wrap { max-width:640px; margin:0 auto; }
.chat { display:flex; flex-direction:column; gap:14px; }
.msg {
  max-width:80%; padding:14px 18px; border-radius:16px; font-size:.98rem;
  opacity:0; transform:translateY(12px);
}
.msg.client { align-self:flex-start; background:var(--panel); border:1px solid var(--border); border-bottom-left-radius:4px; }
.msg.me { align-self:flex-end; background:rgba(255,122,26,.12); border:1px solid rgba(255,122,26,.4); border-bottom-right-radius:4px; }
.msg.strong { background:var(--accent); color:#0a0e14; font-weight:700; }
.replay { margin-top:28px; }
.chat-wrap .btn { display:block; margin-left:auto; margin-right:auto; }

/* ═══ PROYECTOS ═══ */
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); gap:32px; }
.proj { background:var(--panel); border:1px solid var(--border); border-radius:16px; overflow:hidden; transition:transform .3s, border-color .3s, box-shadow .3s; }
.proj:hover { transform:translateY(-4px); border-color:var(--accent); box-shadow:0 10px 30px rgba(0,0,0,.25); }
.mock { padding:24px; background:radial-gradient(400px 200px at 50% 0%, var(--bg2), var(--bg)); border-bottom:1px solid var(--border); cursor:pointer; }
.mock-site { border:1px solid var(--border); border-radius:10px; overflow:hidden; background:var(--bg); }
.mock-bar { padding:10px 14px; font-family:var(--mono); font-size:.8rem; color:var(--muted); border-bottom:1px solid var(--border); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mock-cats { display:flex; gap:6px; padding:10px; flex-wrap:wrap; }
.mock-cats span { background:var(--panel); border:1px solid var(--border); color:var(--muted); padding:3px 8px; border-radius:999px; font-family:var(--mono); font-size:.62rem; }
.mock-items { display:flex; gap:10px; padding:0 10px 12px; }
.mock-items span { flex:1; height:64px; background:linear-gradient(135deg, var(--panel), var(--bg2)); border-radius:8px; border:1px solid var(--border); }
.proj-info { padding:24px; }
.proj-info h3 { font-size:1.3rem; margin-bottom:8px; }
.proj-info p { color:var(--muted); font-size:.95rem; margin-bottom:14px; }
.tags { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
.tags span { font-family:var(--mono); font-size:.68rem; color:var(--accent); border:1px solid rgba(255,122,26,.3); padding:3px 8px; border-radius:6px; }

/* ═══ PRECIOS ═══ */
.price-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:24px; }
.price-card { background:var(--panel); border:1px solid var(--border); border-radius:16px; padding:32px; display:flex; flex-direction:column; }
.price-card.featured { border:1px solid var(--accent); box-shadow:0 0 30px rgba(255,122,26,.1); }
.price-card h3 { font-size:1.1rem; font-family:var(--mono); color:var(--accent); text-transform:uppercase; letter-spacing:1px; margin-bottom:16px; }
.price { font-size:2.8rem; font-weight:700; margin-bottom:20px; }
.price span { font-size:1.4rem; color:var(--accent); vertical-align:super; margin-right:4px; }
.price em { font-size:1rem; font-family:var(--mono); color:var(--muted); font-style:normal; font-weight:400; vertical-align:super; margin-left:6px; }
.price small { display:block; font-size:.85rem; color:var(--muted); font-weight:400; }
.price-card ul { list-style:none; margin-bottom:24px; flex:1; }
.price-card li { padding:7px 0; color:var(--muted); border-bottom:1px dashed var(--border); font-size:.95rem; }
.price-card li::before { content:"✓ "; color:var(--accent); }
.price-note { text-align:center; color:var(--muted); margin-top:28px; font-size:.85rem; font-family:var(--mono); }

/* ═══ TESTIMONIOS ═══ */
.t-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:24px; }
.t-card { background:var(--panel); border:1px solid var(--border); border-radius:16px; padding:28px; }
.stars { color:var(--accent-2); letter-spacing:3px; margin-bottom:14px; }
.t-card p { color:var(--muted); font-size:.98rem; margin-bottom:20px; }
.t-who { display:flex; align-items:center; gap:12px; }
.avatar { width:44px; height:44px; border-radius:50%; background:linear-gradient(135deg, var(--accent), var(--accent-2)); display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-weight:700; color:#0a0e14; }
.t-who strong { display:block; font-size:.95rem; }
.t-who span { color:var(--muted); font-size:.82rem; }

/* ═══ SOBRE ═══ */
.sobre-inner { display:grid; grid-template-columns:280px 1fr; gap:48px; align-items:center; }
.avatar-big {
  width:280px; height:340px; border-radius:20px; border:1px solid var(--border);
  background:linear-gradient(160deg, var(--panel), var(--bg));
  display:flex; align-items:center; justify-content:center; text-align:center;
  color:var(--muted); font-family:var(--mono); padding:24px; position:relative; overflow:hidden;
}
.avatar-big::after { content:""; position:absolute; inset:0; border-radius:20px; box-shadow:inset 0 0 40px rgba(255,122,26,.05); }
.sobre-text h3 { font-size:1.8rem; margin-bottom:14px; }
.sobre-text p { color:var(--muted); margin-bottom:20px; }
.skills { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:24px; }
.skills span { font-family:var(--mono); font-size:.75rem; padding:5px 12px; border:1px solid var(--border); border-radius:999px; color:var(--text); }
.skills span:hover { border-color:var(--accent); color:var(--accent); }
.sobre-contact { display:flex; gap:12px; flex-wrap:wrap; }

/* ═══ FOOTER ═══ */
footer { border-top:1px solid var(--border); padding:48px 5vw; }
.footer-inner { max-width:1200px; margin:0 auto; display:flex; flex-direction:column; align-items:center; gap:16px; text-align:center; }
.socials { display:flex; gap:20px; }
.socials a { color:var(--muted); font-size:.9rem; }
.socials a:hover { color:var(--accent); }
footer p { color:var(--muted); font-size:.85rem; font-family:var(--mono); }

/* ═══ PANEL CONTACTO ═══ */
.contact-panel {
  position:fixed; top:0; right:0; bottom:0; width:420px; max-width:95vw; z-index:200;
  background:var(--panel); border-left:1px solid var(--border); padding:32px;
  transform:translateX(100%); transition:transform .35s ease; overflow-y:auto;
}
.contact-panel.open { transform:translateX(0); }
.panel-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:28px; }
.panel-head h3 { font-size:1.4rem; }
.panel-close { background:none; border:none; color:var(--muted); font-size:1.4rem; cursor:pointer; }
.panel-close:hover { color:var(--accent); }
.contact-panel .btn { width:100%; margin-bottom:12px; display:flex; justify-content:center; }
.contact-form { margin-top:24px; }
.contact-form label { display:block; color:var(--muted); font-size:.85rem; margin-bottom:6px; font-family:var(--mono); }
.contact-form input {
  width:100%; padding:12px 14px; margin-bottom:16px; background:var(--bg); border:1px solid var(--border);
  border-radius:8px; color:var(--text); font-family:var(--sans);
}
.contact-form input:focus { outline:none; border-color:var(--accent); }
.form-note { color:var(--muted); font-size:.78rem; margin-top:8px; text-align:center; font-family:var(--mono); }
.overlay { position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:150; opacity:0; pointer-events:none; transition:opacity .3s; }
.overlay.show { opacity:1; pointer-events:auto; }

/* ═══ COOKIE ═══ */
.cookie {
  position:fixed; bottom:20px; left:50%; transform:translateX(-50%); z-index:300;
  background:var(--panel); border:1px solid var(--border); border-radius:14px; padding:16px 24px;
  display:flex; gap:20px; align-items:center; max-width:560px; box-shadow:0 10px 40px rgba(0,0,0,.5);
  opacity:0; pointer-events:none; transform:translateX(-50%) translateY(20px); transition:opacity .3s, transform .3s;
}
.cookie.show { opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0); }
.cookie p { color:var(--muted); font-size:.85rem; }
.cookie .btn { white-space:nowrap; }

/* ═══ ANIMACIONES ═══ */
.reveal { opacity:0; transform:translateY(30px); transition:opacity .6s, transform .6s; }
.reveal.in { opacity:1; transform:translateY(0); }
.msg.show { animation:msgIn .5s forwards; }
@keyframes msgIn { to { opacity:1; transform:translateY(0); } }

/* ═══ RESPONSIVE ═══ */
@media (max-width:900px) {
  .nav-links { display:none; position:fixed; top:60px; left:0; right:0; background:var(--panel); flex-direction:column; padding:24px; gap:18px; border-bottom:1px solid var(--border); }
  .nav-links.open { display:flex; }
  .menu-btn { display:block; }
  section { padding:70px 6vw; }
  .sobre-inner { grid-template-columns:1fr; justify-items:center; }
  .grid { grid-template-columns:1fr; }
}