:root {
  --ink: #0c0f14;
  --muted: #69707d;
  --line: #dfe3e8;
  --paper: #f7f8fa;
  --white: #fff;
  --blue: #172554;
  --blue-deep: #0b132b;
  --lime: #c9ff45;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: Arial, Helvetica, sans-serif; }
a { color: inherit; text-decoration: none; }
svg { width: 1.1em; height: 1.1em; flex: 0 0 auto; }

.site-header { position: absolute; z-index: 10; top: 0; left: 0; right: 0; height: 88px; padding: 0 clamp(24px, 6vw, 96px); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,.16); color: #fff; }
.brand { font-size: 1.5rem; font-weight: 900; letter-spacing: -.08em; }
.brand span { color: var(--lime); }
.site-header nav { display: flex; gap: 34px; font-size: .86rem; }
.site-header nav a { opacity: .75; transition: .2s; }
.site-header nav a:hover { opacity: 1; }
.header-github { width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; display: grid; place-items: center; }
.menu-button { display: none; background: transparent; color: white; border: 1px solid rgba(255,255,255,.25); border-radius: 8px; width: 42px; height: 42px; font-size: 1.35rem; cursor: pointer; }

.hero { min-height: 760px; background: linear-gradient(135deg, #080f20 0%, #111d3e 48%, #182a58 100%); color: white; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(360px, .8fr); align-items: center; padding: 138px clamp(24px, 7vw, 112px) 72px; overflow: hidden; position: relative; }
.hero::before { content: ""; position: absolute; width: 620px; height: 620px; border-radius: 50%; border: 1px solid rgba(255,255,255,.09); right: -80px; top: 70px; box-shadow: 0 0 0 100px rgba(255,255,255,.025), 0 0 0 200px rgba(255,255,255,.02); }
.hero-copy { position: relative; z-index: 2; max-width: 790px; }
.eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 28px; font-size: .78rem; text-transform: uppercase; font-weight: 800; letter-spacing: .14em; }
.eyebrow span { width: 8px; height: 8px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 5px rgba(201,255,69,.18); }
.hero h1 { margin: 0; font-size: clamp(3.2rem, 6vw, 6.6rem); line-height: .98; letter-spacing: -.065em; font-weight: 500; }
.hero h1 strong { color: var(--lime); font-weight: 800; }
.hero-description { max-width: 630px; margin: 32px 0 0; color: rgba(255,255,255,.76); font-size: clamp(1rem, 1.5vw, 1.18rem); line-height: 1.7; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 52px; padding: 0 22px; border-radius: 8px; font-size: .9rem; font-weight: 800; transition: transform .2s, background .2s; }
.button:hover { transform: translateY(-2px); }
.button-primary { background: var(--lime); color: #131820; }
.button-secondary { border: 1px solid rgba(255,255,255,.32); }
.hero-meta { display: flex; align-items: center; gap: 16px; margin-top: 42px; color: rgba(255,255,255,.6); font-size: .78rem; text-transform: uppercase; letter-spacing: .09em; }
.hero-meta i { width: 3px; height: 3px; background: rgba(255,255,255,.5); border-radius: 50%; }

.portrait-wrap { position: relative; z-index: 2; width: min(430px, 36vw); justify-self: end; }
.portrait-backdrop { position: absolute; inset: -30px -45px 20px 35px; background: #101b3b; border-radius: 48% 48% 12px 12px; transform: rotate(4deg); }
.portrait-wrap img { position: relative; width: 100%; aspect-ratio: 4/5; object-fit: cover; object-position: center 25%; border-radius: 220px 220px 14px 14px; filter: saturate(.9) contrast(1.02); box-shadow: 0 28px 70px rgba(8,25,85,.35); }
.floating-code { position: absolute; left: -52px; top: 26%; width: 78px; height: 78px; display: grid; place-items: center; background: var(--lime); color: var(--ink); border-radius: 16px; font-size: 1.45rem; font-weight: 900; transform: rotate(-7deg); box-shadow: 0 16px 35px rgba(0,0,0,.18); }

.section { padding: 110px clamp(24px, 7vw, 112px); }
.section-label { color: var(--blue); font-size: .72rem; font-weight: 900; letter-spacing: .16em; margin-bottom: 55px; }
.section h2, .contact h2 { margin: 0; font-size: clamp(2.7rem, 5vw, 5.3rem); letter-spacing: -.06em; line-height: 1; font-weight: 650; }
.section h2 em, .contact h2 em { color: var(--blue); font-style: normal; }
.about { background: white; }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9vw; }
.about-copy { max-width: 620px; }
.about-copy > p { margin: 0 0 22px; color: var(--muted); font-size: 1.06rem; line-height: 1.8; }
.about-points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 42px; border-top: 1px solid var(--line); padding-top: 25px; }
.about-points span { font-size: .82rem; font-weight: 700; }
.about-points b { display: block; color: var(--blue); margin-bottom: 8px; }

.skills { background: var(--paper); }
.section-heading-row { display: flex; align-items: end; justify-content: space-between; gap: 40px; }
.section-heading-row > p { max-width: 410px; color: var(--muted); line-height: 1.7; margin: 0 0 4px; }
.skills-grid { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 65px; border: 1px solid var(--line); }
.skill-card { min-height: 360px; padding: 35px; background: white; border-right: 1px solid var(--line); transition: transform .25s, box-shadow .25s; }
.skill-card:last-child { border-right: 0; }
.skill-card:hover { transform: translateY(-7px); box-shadow: 0 18px 50px rgba(20,31,60,.09); }
.skill-number { color: var(--blue); font-size: .72rem; font-weight: 900; }
.skill-card h3 { font-size: 1.55rem; margin: 65px 0 26px; }
.skill-card ul { list-style: none; padding: 0; margin: 0; }
.skill-card li { border-top: 1px solid var(--line); padding: 11px 0; color: var(--muted); font-size: .9rem; }

.projects { background: #0d1118; color: white; }
.projects .section-label, .projects h2 em { color: var(--lime); }
.text-link { display: flex; align-items: center; gap: 10px; color: var(--lime); font-size: .84rem; font-weight: 800; border-bottom: 1px solid rgba(201,255,69,.5); padding-bottom: 7px; }
.projects-list { margin-top: 75px; }
.project { display: grid; grid-template-columns: 1.12fr .88fr; gap: clamp(40px, 7vw, 100px); align-items: center; padding: 55px 0; border-top: 1px solid rgba(255,255,255,.12); }
.project-visual { min-height: 390px; border-radius: 4px; position: relative; display: grid; place-items: center; overflow: hidden; }
.project-visual.restaurant { background: linear-gradient(135deg, #2444ff, #7290ff); }
.project-visual.willka { background: linear-gradient(135deg, #ff7f3f, #ffbc69); }
.project-visual.electoral { background: linear-gradient(135deg, #7757ff, #b5a5ff); }
.project-visual.ventas { background: linear-gradient(135deg, #21b989, #8ee6bc); }
.project-number { position: absolute; top: 25px; left: 28px; font-size: .74rem; font-weight: 900; color: rgba(255,255,255,.72); }
.ventas .project-number { color: rgba(12,15,20,.6); }
.project-window { width: 72%; background: white; color: var(--ink); border-radius: 10px; box-shadow: 0 28px 55px rgba(15,25,55,.3); transform: rotate(-3deg); }
.electoral .project-window, .ventas .project-window { transform: rotate(3deg); }
.window-dots { height: 34px; border-bottom: 1px solid #e6e9ee; display: flex; align-items: center; gap: 5px; padding-left: 14px; }
.window-dots i { width: 6px; height: 6px; border-radius: 50%; background: #c9ced7; }
.window-body { padding: 35px; }
.window-body b { display: block; color: var(--blue); font-size: clamp(1.5rem, 3vw, 2.7rem); letter-spacing: -.06em; }
.ventas .window-body b { color: var(--ink); }
.window-body span { display: block; color: #838b98; font-size: .72rem; margin-top: 8px; }
.window-lines { margin-top: 32px; }
.window-lines i { display: block; height: 6px; width: 100%; background: #edf0f3; margin-top: 8px; border-radius: 5px; }
.window-lines i:nth-child(2) { width: 75%; }
.window-lines i:nth-child(3) { width: 42%; }
.project-type { color: var(--lime); font-size: .7rem; text-transform: uppercase; font-weight: 900; letter-spacing: .14em; }
.project-copy h3 { margin: 14px 0 18px; font-size: clamp(2rem, 3.5vw, 3.8rem); letter-spacing: -.05em; }
.project-copy > p { color: #aab0bb; line-height: 1.75; font-size: .97rem; }
.tag-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 25px 0 32px; }
.tag-list span { border: 1px solid rgba(255,255,255,.16); color: #c2c7d0; border-radius: 30px; padding: 7px 12px; font-size: .72rem; }
.project-link { display: inline-flex; align-items: center; gap: 10px; font-size: .82rem; font-weight: 800; }
.project-link svg:last-child { color: var(--lime); margin-left: 4px; }

.contact { background: linear-gradient(135deg, #080f20, #172554); color: white; padding: 115px clamp(24px, 7vw, 112px); text-align: center; }
.contact-inner { max-width: 900px; margin: auto; }
.contact .eyebrow { justify-content: center; }
.contact h2 em { color: var(--lime); }
.contact-mail { display: inline-flex; align-items: center; gap: 12px; margin-top: 45px; padding-bottom: 7px; border-bottom: 1px solid rgba(255,255,255,.5); font-size: clamp(1rem, 2vw, 1.25rem); }
.social-links { display: flex; justify-content: center; gap: 32px; margin-top: 48px; color: rgba(255,255,255,.68); font-size: .82rem; }
.social-links a:hover { color: var(--lime); }
footer { padding: 28px clamp(24px, 7vw, 112px); display: flex; justify-content: space-between; gap: 25px; color: var(--muted); font-size: .72rem; background: white; }
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }

@media (max-width: 900px) {
  .site-header { position: absolute; }
  .menu-button { display: block; margin-left: auto; margin-right: 12px; }
  .site-header nav { display: none; position: absolute; top: 72px; left: 20px; right: 20px; flex-direction: column; gap: 0; padding: 12px; border-radius: 12px; background: #0b132b; box-shadow: 0 16px 35px rgba(0,0,0,.3); }
  .site-header nav.active { display: flex; }
  .site-header nav a { padding: 14px 12px; }
  .hero { grid-template-columns: 1fr; padding-top: 130px; }
  .portrait-wrap { width: min(390px, 72vw); margin: 75px auto 0; justify-self: center; }
  .about-grid, .project { grid-template-columns: 1fr; }
  .about-copy { margin-top: 10px; }
  .skills-grid { grid-template-columns: 1fr; }
  .skill-card { min-height: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .skill-card h3 { margin-top: 35px; }
  .project { gap: 40px; }
}

@media (max-width: 600px) {
  .site-header { height: 72px; }
  .hero { min-height: auto; padding-top: 115px; }
  .hero h1 { font-size: 3.15rem; }
  .hero-meta { flex-wrap: wrap; }
  .floating-code { left: -24px; width: 58px; height: 58px; }
  .section { padding-top: 80px; padding-bottom: 80px; }
  .section-heading-row { align-items: start; flex-direction: column; }
  .about-points { grid-template-columns: 1fr; }
  .project-visual { min-height: 285px; }
  .project-window { width: 80%; }
  .social-links { flex-wrap: wrap; }
  footer { flex-direction: column; text-align: center; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } .reveal { opacity: 1; transform: none; } }