:root{
  --black:#0a0b0a;
  --black-soft:#101210;
  --surface:#171a18;
  --surface-2:#20231f;
  --border:#30352f;
  --text:#f0f1ed;
  --muted:#a8ada5;
  --muted-2:#7f857d;
  --green-dark:#344d3b;
  --green:#4CBB17;
  --green-bright:#68d52a;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Open Sans",Helvetica,Arial,sans-serif;
  color:var(--text);
  background:var(--black);
  line-height:1.7;
}
a{color:var(--green);text-decoration:none}
a:hover{color:var(--green-bright)}
.site-header{
  max-width:1100px;
  margin:auto;
  padding:24px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid var(--border);
  background:rgba(10,11,10,.94);
}
.brand{font-size:1.15rem;font-weight:700;color:var(--text);text-decoration:none;letter-spacing:-.02em}
.site-header nav{display:flex;gap:24px}
.site-header nav a{color:var(--muted);text-decoration:none;font-size:.95rem}
.site-header nav a:hover{color:var(--green-bright)}
main{max-width:1100px;margin:auto;padding:0 24px}

.hero{
  padding:100px 0 90px;
  display:grid;
  gap:50px;
  align-items:center;
}
.hero--text-only{max-width:900px}
.hero--with-image{grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr)}
.hero-content{min-width:0}
.eyebrow{
  display:inline-block;
  color:var(--green-bright);
  background:var(--green-dark);
  border:1px solid #45634d;
  padding:5px 10px;
  border-radius:999px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:.72rem;
}
.hero h1{
  font-size:clamp(3rem,8vw,6.5rem);
  line-height:.95;
  margin:20px 0 30px;
  letter-spacing:-.06em;
  color:var(--text);
}
.hero p{font-size:1.3rem;color:var(--muted);max-width:720px}
.hero-media,.profile-media{margin:0;overflow:hidden;background:var(--surface);border:1px solid var(--border)}
.hero-media{border-radius:18px;aspect-ratio:4/3}
.profile-media{border-radius:14px;aspect-ratio:4/3}
.hero-media img,.profile-media img{width:100%;height:100%;display:block;object-fit:cover}
.section{padding:80px 0;border-top:1px solid var(--border)}
.section h2{font-size:2rem;margin-top:0;color:var(--text);letter-spacing:-.03em}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{
  background:var(--surface);
  border:1px solid var(--border);
  padding:28px;
  border-radius:12px;
  transition:transform .2s ease,border-color .2s ease,background .2s ease;
}
.card:hover{transform:translateY(-3px);border-color:#45634d;background:var(--surface-2)}
.card h3{margin-top:0;color:var(--text)}
.card p{color:var(--muted)}
.profile-layout{max-width:900px}
.profile-layout--with-image{display:grid;grid-template-columns:minmax(240px,.8fr) minmax(0,1.2fr);gap:50px;align-items:start}
.profile-copy p{white-space:pre-line}
.profile-media{position:sticky;top:30px}
.contact{background:var(--surface);border:1px solid var(--border);color:var(--text);padding:50px;border-radius:14px}
.contact a{color:var(--green-bright);font-weight:600}
footer{max-width:1100px;margin:0 auto;padding:30px 24px;display:flex;justify-content:space-between;color:var(--muted-2);font-size:.9rem;border-top:1px solid var(--border)}
footer a{color:var(--muted)}
::selection{background:var(--green-dark);color:var(--text)}
@media(max-width:800px){
  .site-header{align-items:flex-start;gap:20px}
  .site-header nav{gap:12px;font-size:.9rem}
  .hero--with-image,.profile-layout--with-image{grid-template-columns:1fr}
  .hero{padding:75px 0}
  .hero p{font-size:1.1rem}
  .hero-media{order:-1;max-width:620px}
  .profile-media{position:static;max-width:620px}
  .grid{grid-template-columns:1fr}
  .contact{padding:30px}
}
@media(max-width:520px){
  .site-header{padding:20px 16px}
  main{padding:0 16px}
  .site-header nav{gap:10px}
  .hero h1{font-size:clamp(2.7rem,16vw,4.5rem)}
}

.button{display:inline-flex;align-items:center;gap:8px;margin-top:22px;padding:10px 16px;border:1px solid var(--green);border-radius:8px;color:var(--text);background:transparent;font-weight:700}
.button:hover{background:var(--green);color:#071006}
.card-kicker{color:var(--green-bright);font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;font-weight:700;min-height:1.2em}
.section-heading{max-width:760px;margin-bottom:30px}.section-heading p{color:var(--muted)}
.page-intro{padding:90px 0 60px;max-width:850px}.page-intro h1{font-size:clamp(3rem,7vw,5.5rem);line-height:1;margin:20px 0;letter-spacing:-.06em}.page-intro>p{font-size:1.2rem;color:var(--muted);max-width:760px}
.narrow{max-width:820px}.prose{font-size:1.12rem;color:var(--muted)}.prose br+br{display:block;content:"";margin-top:1em}
.split-callout{display:flex;justify-content:space-between;align-items:center;gap:30px;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:38px}.split-callout h2{margin-bottom:8px}.split-callout p{color:var(--muted);max-width:700px}
.timeline,.education-list{display:grid;gap:0}.timeline-item,.education-item{display:grid;grid-template-columns:150px minmax(0,1fr);gap:35px;padding:30px 0;border-top:1px solid var(--border)}.timeline-item:first-child,.education-item:first-child{border-top:0}.timeline-date{color:var(--green-bright);font-weight:700;font-size:.9rem}.timeline-item h2,.education-item h2{margin:0 0 8px;font-size:1.35rem}.timeline-item p,.education-item p{color:var(--muted);margin:0}.contact-email{font-size:1.3rem;font-weight:700}
@media(max-width:800px){.split-callout{display:block}.timeline-item,.education-item{grid-template-columns:1fr;gap:8px}}

/* Portfolio de proyectos */
.project-card{padding:16px}.project-image{display:block;aspect-ratio:16/10;overflow:hidden;border-radius:9px;background:var(--black-soft);border:1px solid var(--border)}.project-image img{width:100%;height:100%;object-fit:cover;display:block}.project-card h3{margin:16px 10px 5px}.project-card p{margin:12px 10px;color:var(--muted)}.project-domain{margin:0 10px;color:var(--green-bright);font:0.8rem ui-monospace,SFMono-Regular,Menlo,monospace;overflow-wrap:anywhere}.project-card .card-kicker{margin:14px 10px 0}.project-card .button{margin-left:10px}.project-detail{padding:65px 0 100px;max-width:1050px}.project-detail h1{font-size:clamp(2.8rem,7vw,6rem);line-height:.98;letter-spacing:-.06em;margin:18px 0}.project-domain-large{font-size:.95rem;margin-bottom:20px}.project-lead{font-size:1.3rem;color:var(--muted);max-width:800px}.project-images{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:24px;align-items:end;margin:55px 0}.project-images figure{margin:0;background:var(--surface);border:1px solid var(--border);border-radius:14px;overflow:hidden}.project-screen{aspect-ratio:16/10}.project-phone{aspect-ratio:9/16;max-height:600px}.project-images img{width:100%;height:100%;object-fit:cover;display:block}.project-meta{display:flex;gap:8px;flex-wrap:wrap;margin:25px 0}.project-meta span,.tag-list span{padding:6px 10px;border:1px solid var(--border);border-radius:999px;background:var(--surface);color:var(--muted);font-size:.8rem}.project-detail-grid{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:70px;border-top:1px solid var(--border);padding-top:55px;margin-top:45px}.project-sidebar{display:grid;align-content:start;gap:22px}.project-sidebar h2{font-size:1rem}.tag-list{display:flex;flex-wrap:wrap;gap:7px}.prose{font-size:1.1rem;color:var(--muted)}@media(max-width:700px){.project-images,.project-detail-grid{grid-template-columns:1fr}.project-phone{width:65%;max-height:none;margin:auto}.project-detail{padding-top:45px}.project-lead{font-size:1.1rem}}