:root{
  color-scheme: dark;
  --bg: #08080a;
  --bg-elevated: #0e0e11;
  --surface: rgba(255,255,255,.05);
  --surface-strong: rgba(255,255,255,.08);
  --glass-fill: rgba(20,20,20,.6);
  --glass-fill-strong: rgba(28,28,28,.68);
  --border: rgba(255,255,255,.05);
  --border-strong: rgba(255,255,255,.14);
  --text: #f5f5f7;
  --muted: #98989f;
  --muted-2: #6e6e73;
  --accent: #ff2a2a;
  --accent-2: #ff7a45;
  --accent-soft: rgba(255,42,42,.16);
  --success: #30d158;
  --danger: #ff453a;
  --shadow-lg: 0 24px 70px rgba(0,0,0,.45);
  --shadow-sm: 0 10px 30px rgba(0,0,0,.3);
  --shadow-glow: 0 8px 24px rgba(255,50,50,.3);
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 24px;
  --radius-full: 999px;
  --ease: cubic-bezier(.16,1,.3,1);
  --ease-oppo: cubic-bezier(.25,.8,.25,1);
  --ease-glow: cubic-bezier(.25,1,.5,1);
  --ease-reveal: cubic-bezier(.22,1,.36,1);
  --blur-nav: blur(24px) saturate(180%);
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --display: 'Space Grotesk', 'Inter', sans-serif;
}

[data-theme="light"]{
  color-scheme: light;
  --bg: #f8f9fa;
  --bg-elevated: #ffffff;
  --surface: rgba(255,255,255,.6);
  --surface-strong: rgba(255,255,255,.8);
  --glass-fill: rgba(255,255,255,.72);
  --glass-fill-strong: rgba(255,255,255,.85);
  --border: rgba(10,10,15,.07);
  --border-strong: rgba(10,10,15,.14);
  --text: #1d1d1f;
  --muted: #5b5b62;
  --muted-2: #86868c;
  --shadow-lg: 0 20px 40px rgba(0,0,0,.05);
  --shadow-sm: 0 12px 28px rgba(0,0,0,.04);
  --shadow-glow: 0 8px 24px rgba(255,50,50,.22);
}

*{ box-sizing: border-box; margin:0; padding:0; }
html{ scroll-behavior: smooth; }
body{
  min-width: 320px; min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.65 var(--font);
  overflow-x: hidden;
  transition: background-color .4s var(--ease), color .4s var(--ease);
}
a{ color: inherit; text-decoration: none; }
button, input, textarea, select{ font: inherit; color: inherit; }
button{ cursor:pointer; }
img{ max-width: 100%; display:block; }
.container{ width: min(90vw, 1200px); margin: 0 auto; position: relative; z-index: 1; }

.liquid-bg{ position: fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.orb{ position:absolute; border-radius:50%; filter: blur(90px); opacity:.35; mix-blend-mode: screen; will-change: transform; }
[data-theme="light"] .orb{ opacity:.28; mix-blend-mode: multiply; filter: blur(110px); }
.orb-a{ width:46vw; height:46vw; top:-14vw; right:-10vw; background: radial-gradient(circle, var(--accent), transparent 70%); animation: drift-a 22s var(--ease) infinite; }
.orb-b{ width:38vw; height:38vw; bottom:-12vw; left:-8vw; background: radial-gradient(circle, var(--accent-2), transparent 70%); animation: drift-b 26s var(--ease) infinite; }
.orb-c{ width:26vw; height:26vw; top:40%; left:55%; background: radial-gradient(circle, #ff5a5a, transparent 72%); opacity:.2; animation: drift-c 30s var(--ease) infinite; }
.grain{ position:absolute; inset:0; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.025'/%3E%3C/svg%3E"); }

@keyframes drift-a{ 0%,100%{ transform:translate(0,0) scale(1);} 50%{ transform:translate(-6%,8%) scale(1.08);} }
@keyframes drift-b{ 0%,100%{ transform:translate(0,0) scale(1);} 50%{ transform:translate(8%,-6%) scale(1.1);} }
@keyframes drift-c{ 0%,100%{ transform:translate(0,0);} 50%{ transform:translate(-10%,-10%);} }

.glass{
  background: var(--glass-fill);
  border: 1px solid var(--border);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.06);
}
.surface{
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform .4s var(--ease-oppo), box-shadow .4s var(--ease-oppo), border-color .4s var(--ease-oppo);
}

.site-header{ position: fixed; top:16px; left:0; right:0; z-index: 50; pointer-events:none; }
.nav{
  width: min(90vw, 960px); margin: auto;
  padding: 10px 10px 10px 22px;
  border-radius: var(--radius-full);
  display:flex; align-items:center; justify-content:space-between;
  transition: box-shadow .3s var(--ease);
  position: relative; z-index: 51; pointer-events:auto;
  backdrop-filter: var(--blur-nav);
  -webkit-backdrop-filter: var(--blur-nav);
}
.hero-title, .section-title, h1, h2, h3{ font-family: var(--display); }
.logo{ display:flex; align-items:center; gap:8px; font-size:1.25rem; font-weight:700; letter-spacing:-.01em; font-family: var(--display); }
.nav-logo{
  height:34px; width:auto; max-width:none;
  object-fit:contain; display:block;
}
.nav-logo.is-missing{ display:none; }
.nav-logo.is-missing ~ .logo-text{ display:inline-flex; }
.logo-text{ display:none; }
.highlight{ color: var(--accent); }
.nav-links{ display:flex; gap:24px; }
.nav-links a{ color: var(--muted); font-weight:500; font-size:.92rem; position:relative; padding:4px 0; transition: color .25s; }
.nav-links a::after{ content:''; position:absolute; left:0; right:0; bottom:-2px; height:2px; background: var(--accent); border-radius:2px; transform: scaleX(0); transition: transform .3s var(--ease); }
.nav-links a:hover, .nav-links a.active{ color: var(--text); }
.nav-links a.active::after, .nav-links a:hover::after{ transform: scaleX(1); }
.nav-actions{ display:flex; align-items:center; gap:8px; }
.icon-button{
  width:38px; height:38px; display:grid; place-items:center;
  border:1px solid var(--border); border-radius:50%;
  background: var(--surface-strong); color: var(--text);
  transition: transform .2s var(--ease), background .2s;
}
.icon-button:hover{ transform: translateY(-2px) scale(1.04); background: var(--accent-soft); }
.icon-button:active{ transform: scale(.94); }
.nav-burger{ display:none; }
.mobile-panel{
  display:none; flex-direction:column; gap:4px;
  width:min(90vw,960px); margin:10px auto 0; padding:10px; border-radius: var(--radius-md);
  opacity:0; transform: translateY(-8px); pointer-events:none; transition: opacity .25s var(--ease), transform .25s var(--ease);
  position: relative; z-index: 51;
}
.mobile-panel.is-open{ opacity:1; transform:translateY(0); pointer-events:auto; }
.mobile-panel a{ padding:12px 14px; border-radius: var(--radius-sm); color: var(--muted); font-weight:600; }
.mobile-panel a:hover{ background: var(--surface-strong); color: var(--text); }

.hero{
  min-height: 640px; padding: 128px 0 90px;
  display:grid; grid-template-columns: 1.05fr .95fr; gap:60px; align-items:center;
}
.eyebrow{
  display:inline-flex; align-items:center; gap:10px; padding:6px 14px;
  border:1px solid rgba(255,42,42,.35); border-radius:var(--radius-full);
  background:var(--accent-soft); color:#ff7373; font-size:.72rem;
  font-weight:700; letter-spacing:.12em; line-height:1; margin-bottom:10px;
  text-transform:uppercase; box-shadow:0 6px 18px rgba(255,42,42,.08);
}
.eyebrow::before{
  content:''; width:6px; height:6px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 10px rgba(255,42,42,.8);
}
.hero-title{ font-size: clamp(3rem, 7vw, 6.2rem); line-height:.98; margin:22px 0; letter-spacing:-.02em; }
.hero-title-word{
  display:inline-block; min-width:1ch;
  background: linear-gradient(135deg, var(--text) 8%, var(--accent) 55%, var(--accent-2) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  transition: opacity .35s var(--ease-oppo), transform .35s var(--ease-oppo), filter .35s var(--ease-oppo);
}
.hero-title-word.is-swapping{ opacity:0; transform: translateY(10px); filter: blur(4px); }
.hero-description{ max-width:520px; color: var(--muted); font-size:1.12rem; }
.stats{ display:flex; gap:12px; margin:34px 0; }
.stat{ padding:16px 20px; min-width:104px; border-radius: var(--radius-md); }
.stat strong{ display:block; font:700 1.4rem var(--display); }
.stat span{ color: var(--muted); font-size:.74rem; }
.actions{ display:flex; align-items:center; gap:24px; flex-wrap:wrap; }
.button{
  display:inline-flex; align-items:center; gap:8px; padding:13px 22px;
  border:1px solid rgba(255,255,255,.1); border-radius: var(--radius-full);
  font-weight:600; font-size:.92rem;
  transition: all .3s var(--ease-glow);
  background: linear-gradient(180deg, var(--surface-strong), var(--surface));
}
.button-primary{
  background: linear-gradient(180deg, var(--accent-2), var(--accent));
  border-color: rgba(255,255,255,.14); color:#fff;
  box-shadow: 0 10px 30px rgba(255,42,42,.35);
}
.button:hover{ transform: translateY(-3px); box-shadow: var(--shadow-glow), 0 0 40px rgba(255,50,50,.15); }
.button-primary:hover{ box-shadow: 0 0 20px rgba(255,50,50,.4), 0 0 40px rgba(255,50,50,.2); }
.button:active{ transform: translateY(-1px) scale(.95); }
.socials{ display:flex; gap:14px; color: var(--muted); font-size:1.35rem; }
.socials a{ transition: color .2s, transform .2s var(--ease); }
.socials a:hover{ color: var(--accent); transform: translateY(-2px); }

.hero-art{ display:flex; align-items:center; justify-content:center; position:relative; perspective:1200px; }
.hero-monitor{ position:relative; width:min(100%,500px); margin:0 auto; }
.terminal{
  width:100%; overflow:hidden; border-radius: var(--radius-lg);
  transform-style: preserve-3d; transition: transform .1s linear;
}
.terminal-bar{ padding:13px 16px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:8px; }
.dot{ width:10px; height:10px; border-radius:50%; display:inline-block; }
.dot-r{ background:#ff5f57; } .dot-y{ background:#febc2e; } .dot-g{ background:#28c840; }
.terminal-title{ margin-left:6px; color: var(--muted); font-size:.8rem; }
.terminal-body{ padding:32px; color:#cbd5e1; font:14px/2 'SFMono-Regular', ui-monospace, Menlo, monospace; min-height:220px; }
[data-theme="light"] .terminal-body{ color:#3a3a3f; }
.terminal-body .red{ color:#ff7373; }
.muted-line{ color: var(--muted-2); }
.caret{ display:inline-block; width:8px; height:16px; background: var(--accent); margin-left:4px; vertical-align:-3px; animation: blink 1s step-end infinite; }
@keyframes blink{ 50%{ opacity:0; } }

.avatar-stage{
  position:absolute; inset:0; z-index:2;
  transform-style: preserve-3d;
  transition: transform .1s linear;
  pointer-events:none;
}
.hero-avatar{
  position: absolute; 
  right: 6%; 
  bottom: 0; 
  width: 48%; 
  z-index: 3;
  
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 55%, rgba(0,0,0,0) 98%),
                      radial-gradient(ellipse 70% 70% at 50% 40%, black 50%, transparent 95%);
  -webkit-mask-composite: source-in;
  
  mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 55%, rgba(0,0,0,0) 98%),
              radial-gradient(ellipse 70% 70% at 50% 40%, black 50%, transparent 95%);
  mask-composite: intersect;
  
  -webkit-mask-repeat: no-repeat; 
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%; 
  mask-size: 100% 100%;
  
  filter: drop-shadow(0px 10px 20px rgba(255, 50, 50, 0.3));
  animation: float-avatar 6s ease-in-out infinite;
  transform-style: preserve-3d;
}
.hero-avatar.is-missing{ display:none; }

.avatar-ring{
  position:absolute; right:1%; bottom:-6%; width:48%; aspect-ratio:1; z-index:1;
  border-radius:50%;
  background: radial-gradient(circle, rgba(255,42,42,.38), rgba(255,122,69,.18) 45%, transparent 72%);
  filter: blur(34px);
  animation: pulse-glow 5s ease-in-out infinite;
}
@keyframes float-avatar{
  0%,100%{ transform: translateY(0) rotate(-2deg); }
  50%{ transform: translateY(-20px) rotate(1.5deg); }
}
@keyframes pulse-glow{
  0%,100%{ opacity:.55; transform: scale(1); }
  50%{ opacity:.9; transform: scale(1.08); }
}

.section{ padding:70px 0; }
.section-heading{ display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:28px; }
.section-title{ font-size: clamp(2rem, 4vw, 3.2rem); letter-spacing:-.01em; }
.section-copy{ color: var(--muted); max-width:600px; }

.stack{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.5rem; margin-top:34px; }
.stack-group{
  padding:22px; border-radius: var(--radius-md);
  background: var(--surface); border:1px solid var(--border);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.stack-title{ display:flex; align-items:center; gap:8px; font-size:1rem; margin-bottom:4px; }
.stack-title i{ color: var(--accent); }
.stack-note{ color: var(--muted); font-size:.82rem; margin-bottom:14px; }
.stack-pills{ display:flex; flex-wrap:wrap; gap:10px; perspective:600px; }
.stack-pill{
  padding:8px 16px; border-radius: var(--radius-full);
  border:1px solid rgba(255,255,255,.1);
  background: var(--surface-strong);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-size:.8rem; font-weight:600; color: var(--text);
  transition: transform .35s var(--ease-oppo), box-shadow .35s var(--ease-oppo), border-color .25s;
}
.stack-pill:hover{
  transform: translateY(-2px) rotateX(3deg) rotateY(3deg);
  box-shadow: 0 10px 22px rgba(255,42,42,.16);
  border-color: var(--accent-soft);
}
[data-theme="light"] .stack-pill{ border-color: rgba(10,10,15,.08); }

.project-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; perspective:1000px; }
.project-card{
  overflow:hidden; border-radius: var(--radius-md);
  transform-style: preserve-3d;
  transition: transform .4s var(--ease-oppo), border-color .4s var(--ease-oppo), box-shadow .4s var(--ease-oppo);
}
.project-card:hover{
  transform: translateY(-5px) rotateX(2deg) rotateY(2deg);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-lg), 0 0 30px rgba(255,42,42,.12);
}
.project-card:hover .project-content > *{ transform: translateZ(20px); }
.project-cover{ position:relative; aspect-ratio:16/10; background: var(--bg-elevated); overflow:hidden; }
.cover-media{ width:100%; height:100%; object-fit:cover; transition: transform .5s var(--ease); }
.project-card:hover .cover-media{ transform: scale(1.05); }
.links{ display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.link-button{ display:inline-flex; align-items:center; gap:6px; padding:7px 10px; border:1px solid rgba(255,42,42,.42); border-radius:8px; color:#ff8a8a; font-size:.76rem; transition:background .2s, color .2s; }
.link-button:hover{ background:var(--accent); color:#fff; }
.placeholder{ height:100%; display:grid; place-items:center; color: var(--accent); font-size:2.6rem; }
.project-content{ padding:20px; transform-style: preserve-3d; }
.project-content > *{ transition: transform .4s var(--ease-oppo); }
.project-meta-row{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.project-tag{ display:inline-block; color:#ff7373; font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.07em; }
.project-card h3{ margin:8px 0; font-size:1.25rem; }
.project-card p{ color: var(--muted); font-size:.88rem; }
.tech-list{ display:flex; flex-wrap:wrap; gap:7px; margin-top:15px; perspective:600px; }
.tech-list span{
  padding:4px 9px; border:1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--muted); font-size:.72rem;
  transition: transform .35s var(--ease-oppo), box-shadow .35s var(--ease-oppo), color .25s;
}
.tech-list span:hover{
  transform: translateY(-3px) rotateX(4deg) rotateY(4deg);
  box-shadow: 0 8px 18px rgba(255,42,42,.18);
  color: var(--text);
}

.status-badge{
  display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius: var(--radius-full);
  font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
}
.status-badge i{ font-size:.9rem; }
.status-renderizando{ background: rgba(120,120,255,.15); color:#8f8fff; }
.status-en-edicion{ background: rgba(255,159,10,.15); color:#ff9f0a; }
.status-publicado{ background: rgba(48,209,88,.15); color: var(--success); }
.status-completado{ background: rgba(48,209,88,.15); color: var(--success); }
.status-en-desarrollo{ background: rgba(255,159,10,.15); color:#ff9f0a; }
.status-prototipo{ background: rgba(152,152,159,.18); color: var(--muted); }

.play-overlay{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background: rgba(0,0,0,.32); border:none; padding:0; cursor:pointer;
  transition: background .25s var(--ease);
}
.play-overlay i{
  font-size:3.2rem; color:#fff; filter: drop-shadow(0 6px 16px rgba(0,0,0,.55));
  transition: transform .25s var(--ease);
}
.play-overlay:hover{ background: rgba(0,0,0,.5); }
.play-overlay:hover i{ transform: scale(1.15); }
.project-cover iframe,
.project-cover .embed-player{ width:100%; height:100%; border:0; display:block; background:#000; }

[data-reveal], .reveal-hidden{ opacity:0; transform: translateY(40px); transition: opacity .8s var(--ease-reveal), transform .8s var(--ease-reveal); }
[data-reveal].in-view, .reveal-visible{ opacity:1; transform:none; }
[data-reveal-group] .project-card{ opacity:0; transform: translateY(40px); transition: opacity .8s var(--ease-reveal), transform .8s var(--ease-reveal); }
[data-reveal-group].in-view .project-card{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  [data-reveal], [data-reveal-group] .project-card{ opacity:1 !important; transform:none !important; transition:none !important; }
  .hero-avatar, .orb, .avatar-ring, .caret{ animation:none !important; }
}

.contact-panel{
  padding:40px; border-radius: var(--radius-lg);
  display:grid; grid-template-columns: .9fr 1.1fr; gap:40px; align-items:start;
}
.contact-intro{ display:flex; flex-direction:column; gap:14px; align-self:center; }
.contact-direct{ display:inline-flex; align-items:center; gap:8px; color: var(--accent); font-weight:600; margin-top:6px; }
.contact-form{ display:grid; gap:16px; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field{ display:grid; gap:7px; position:relative; }
.field span{ color: var(--muted); font-size:.8rem; font-weight:600; }
.field input, .field textarea{
  width:100%; padding:12px 14px; background: rgba(0,0,0,.2);
  border:1px solid var(--border); border-bottom:2px solid transparent;
  border-radius: var(--radius-sm); outline:none; resize:vertical;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
[data-theme="light"] .field input, [data-theme="light"] .field textarea{ background: rgba(0,0,0,.03); }
.field input:focus, .field textarea:focus{ box-shadow:0 0 0 3px var(--accent-soft); }
.field::after{
  content:''; position:absolute; left:50%; right:50%; bottom:0; height:2px;
  background: var(--accent); border-radius: 2px;
  transition: left .3s var(--ease-oppo), right .3s var(--ease-oppo);
  pointer-events:none;
}
.field:focus-within::after{ left:0; right:0; }
.field:focus-within span{ color: var(--accent); transform: translateY(-1px); transition: color .2s, transform .2s; }
.form-submit{ position:relative; justify-self:start; min-width:190px; justify-content:center; }
.form-submit .state{ display:inline-flex; align-items:center; gap:8px; }
.form-submit .state-sending{ display:none; }
.form-submit[data-state="sending"] .state-idle{ display:none; }
.form-submit[data-state="sending"] .state-sending{ display:inline-flex; }
.form-submit[disabled]{ opacity:.85; cursor:progress; }
.form-feedback{ font-size:.88rem; min-height:1.2em; }
.form-feedback[data-status="success"]{ color: var(--success); display:flex; align-items:center; gap:6px; }
.form-feedback[data-status="error"]{ color: var(--danger); }

.site-footer{ padding:32px 0 40px; color: var(--muted); text-align:center; font-size:.82rem; }
.empty-state{ padding:40px; text-align:center; color: var(--muted); border:1px dashed var(--border); border-radius: var(--radius-md); }
.loading{ color: var(--muted); padding:25px 0; }

@media(max-width:900px){
  .contact-panel{ grid-template-columns:1fr; }
}
@media(max-width:800px){
  .nav-links{ display:none; }
  .nav-burger{ display:grid; }
  .mobile-panel{ display:flex; }
  .hero{ grid-template-columns:1fr; padding-top:118px; text-align:left; }
  .hero-art{ min-height:280px; margin-top:20px; }
  .project-grid{ grid-template-columns:repeat(2,1fr); }
  .stack{ grid-template-columns:1fr; }
}
@media(max-width:560px){
  .container{ width:min(92vw,1200px); }
  .hero-title{ font-size:3.4rem; }
  .stats{ flex-wrap:wrap; }
  .field-row{ grid-template-columns:1fr; }
  .project-grid{ grid-template-columns:1fr; }
  .contact-panel{ padding:26px; }
  .nav{ padding-inline:14px; }
}