@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,600;0,9..144,700;1,9..144,400;1,9..144,600&family=DM+Sans:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

/* ─── RESET ─── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }

:root {
    --bg:      #08090f;
    --bg2:     #0d0f1a;
    --surface: rgba(255,255,255,0.04);
    --border:  rgba(255,255,255,0.08);
    --border2: rgba(255,255,255,0.13);
    --text:    #d8e2f0;
    --muted:   rgba(200,215,235,0.5);
    --teal:    #1fffd4;
    --blue:    #4d8fff;
    --gold:    #f0c84a;

    --f-head: 'Fraunces', Georgia, serif;
    --f-body: 'DM Sans', sans-serif;
    --f-mono: 'JetBrains Mono', monospace;
}

body {
    font-family: var(--f-body);
    background: var(--bg);
    color: var(--text);
    overflow-x: hidden;
    line-height: 1.65;
}

/* ambient */
body::before {
    content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
    background:
        radial-gradient(ellipse 60% 50% at 80% 10%, rgba(31,255,212,.055) 0%, transparent 60%),
        radial-gradient(ellipse 50% 40% at 10% 90%, rgba(77,143,255,.06) 0%, transparent 55%);
}

a { text-decoration:none; color:inherit; }
img { display:block; }

/* ─── UTILS ─── */
.container { max-width:1120px; margin:0 auto; padding:0 28px; }

.reveal {
    opacity:0; transform:translateY(32px);
    transition:opacity .7s ease, transform .7s ease;
}
.reveal.in { opacity:1; transform:none; }

.sec-tag {
    display:inline-flex; align-items:center; gap:8px;
    font-family:var(--f-mono); font-size:.7rem; letter-spacing:2px;
    text-transform:uppercase; color:var(--teal); margin-bottom:18px;
}

.sec-head { margin-bottom:56px; }
.sec-head h2, .sobre-text h2, .cta-block h2 {
    font-family:var(--f-head);
    font-size:clamp(2.2rem,4vw,3.4rem);
    font-weight:600; line-height:1.1; color:#fff;
    letter-spacing:-.5px; margin-bottom:14px;
}
.sec-head h2 em, .sobre-text h2 em, .cta-block h2 em {
    font-style:italic; color:var(--teal);
}
.sec-head p { font-size:.98rem; color:var(--muted); max-width:440px; line-height:1.75; }

/* BUTTONS */
.btn-main {
    display:inline-flex; align-items:center; gap:7px;
    background:var(--teal); color:#08090f;
    font-family:var(--f-body); font-weight:600; font-size:.9rem;
    padding:12px 26px; border-radius:9px;
    transition:all .25s ease;
}
.btn-main:hover { background:#0eefc3; transform:translateY(-2px); box-shadow:0 10px 24px rgba(31,255,212,.22); }

.btn-sec {
    display:inline-flex; align-items:center; gap:7px;
    background:transparent; color:var(--text);
    font-family:var(--f-body); font-weight:500; font-size:.9rem;
    padding:12px 26px; border-radius:9px;
    border:1.5px solid var(--border2);
    transition:all .25s ease;
}
.btn-sec:hover { border-color:var(--teal); color:var(--teal); background:rgba(31,255,212,.05); }

/* ─── NAV ─── */
#nav {
    position:fixed; top:0; left:0; right:0; z-index:999;
    background:rgba(8,9,15,.85); backdrop-filter:blur(20px);
    border-bottom:1px solid var(--border);
    transition:background .3s;
}
.nav-inner {
    height:64px; display:flex; align-items:center; justify-content:space-between;
}

.brand {
    display:flex; align-items:center; gap:9px;
}
.brand-icon {
    font-family:var(--f-mono); font-size:.95rem; color:var(--teal); font-weight:500;
}
.brand-name {
    font-family:var(--f-head); font-size:1.3rem; font-weight:700; color:#fff;
}
.brand-name em { color:var(--teal); font-style:normal; }

.nav-links { display:flex; gap:32px; }
.nav-links a {
    font-size:.87rem; font-weight:500; color:var(--muted);
    transition:color .2s; letter-spacing:.2px;
}
.nav-links a:hover { color:#fff; }

.nav-cta {
    font-size:.85rem; font-weight:600; color:var(--teal);
    border:1.5px solid rgba(31,255,212,.3); padding:8px 18px;
    border-radius:8px; transition:all .2s;
    background:rgba(31,255,212,.05);
}
.nav-cta:hover { background:rgba(31,255,212,.12); border-color:var(--teal); }

/* ─── HERO ─── */
#hero {
    position:relative; z-index:1;
    min-height:100vh;
    display:flex; flex-direction:column; justify-content:center;
    padding:100px 0 70px;
}

.hero-grid {
    display:grid; grid-template-columns:1fr 420px;
    gap:60px; align-items:center;
}

/* hero text */
.hero-tag {
    display:inline-flex; align-items:center; gap:9px;
    font-family:var(--f-mono); font-size:.75rem; color:var(--teal);
    letter-spacing:1.5px; text-transform:uppercase;
    margin-bottom:26px;
    animation: fadeUp .8s ease both;
}
.live-dot {
    width:8px; height:8px; border-radius:50%; background:var(--teal);
    animation:blink 2s infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.25} }
@keyframes fadeUp {
    from { opacity:0; transform:translateY(24px); }
    to   { opacity:1; transform:none; }
}

h1 {
    font-family:var(--f-head);
    font-size:clamp(3rem,6vw,5.2rem);
    font-weight:700; line-height:1.05;
    letter-spacing:-2px; color:#fff;
    margin-bottom:20px;
    animation: fadeUp .8s .1s ease both;
}
.name-line {
    display:block;
    background:linear-gradient(135deg, var(--teal) 0%, var(--blue) 100%);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent;
    background-clip:text;
}

.hero-sub {
    font-size:1.05rem; color:var(--muted); max-width:480px;
    line-height:1.8; margin-bottom:36px;
    animation: fadeUp .8s .2s ease both;
}

.hero-btns {
    display:flex; gap:14px; margin-bottom:36px; flex-wrap:wrap;
    animation: fadeUp .8s .3s ease both;
}

.hero-badges {
    display:flex; gap:10px; flex-wrap:wrap;
    animation: fadeUp .8s .4s ease both;
}
.badge {
    font-family:var(--f-mono); font-size:.7rem; font-weight:500;
    color:var(--muted); background:rgba(255,255,255,.04);
    border:1px solid var(--border); padding:5px 13px; border-radius:6px;
    letter-spacing:.5px;
}

/* hero photo card */
.hero-photo-wrap {
    display:flex; justify-content:center; align-items:center;
    animation: fadeUp .8s .15s ease both;
}

.photo-card {
    position:relative; width:340px;
}

.photo-glow {
    position:absolute; inset:-2px;
    background:linear-gradient(135deg, var(--teal), var(--blue));
    border-radius:22px; z-index:0;
    filter:blur(18px); opacity:.22;
}

.photo {
    width:100%; height:420px;
    object-fit:cover; object-position:top center;
    border-radius:20px;
    border:1px solid rgba(31,255,212,.2);
    position:relative; z-index:1;
}

.photo-label {
    position:absolute; bottom:16px; left:16px; right:16px; z-index:2;
    background:rgba(8,9,15,.82); backdrop-filter:blur(16px);
    border:1px solid var(--border2); border-radius:12px;
    padding:12px 16px;
}
.pl-top {
    display:flex; align-items:center; justify-content:space-between;
    margin-bottom:2px;
}
.pl-name { font-family:var(--f-head); font-size:1.1rem; font-weight:600; color:#fff; }
.pl-dot {
    width:8px; height:8px; border-radius:50%; background:var(--teal);
    box-shadow:0 0 8px var(--teal); animation:blink 2s infinite;
}
.pl-role { font-family:var(--f-mono); font-size:.68rem; color:var(--teal); letter-spacing:.5px; }

.photo-stat {
    position:absolute; z-index:3;
    background:rgba(13,15,26,.9); backdrop-filter:blur(16px);
    border:1px solid var(--border2); border-radius:11px;
    padding:10px 14px; display:flex; align-items:center; gap:10px;
    white-space:nowrap;
}
.ps1 { top:20px; left:-36px; }
.ps2 { top:100px; right:-36px; }

.ps-num {
    font-family:var(--f-head); font-size:1.4rem; font-weight:700;
    color:var(--teal); line-height:1;
}
.ps-txt { font-size:.7rem; color:var(--muted); line-height:1.4; }

/* scroll hint */
.hero-scroll {
    display:flex; align-items:center; gap:12px;
    margin-top:60px; padding-left:28px;
    font-family:var(--f-mono); font-size:.68rem;
    color:var(--muted); letter-spacing:2px; text-transform:uppercase;
}
.scroll-track {
    width:36px; height:1px; background:var(--muted);
    animation:pulse-track 2s infinite;
}
@keyframes pulse-track { 0%,100%{width:20px;opacity:.4} 50%{width:48px;opacity:1} }

/* ─── PROYECTOS ─── */
#proyectos {
    position:relative; z-index:1;
    padding:110px 0; background:var(--bg2);
}

.proj-grid {
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:18px;
}
.proj-featured { grid-column:span 2; }

.proj-card {
    display:flex; flex-direction:column;
    background:var(--surface); border:1px solid var(--border);
    border-radius:18px; overflow:hidden;
    padding:28px; gap:12px;
    transition:all .35s ease; color:var(--text);
}
.proj-card:hover {
    border-color:rgba(31,255,212,.22);
    background:rgba(31,255,212,.025);
    transform:translateY(-5px);
    box-shadow:0 20px 48px rgba(0,0,0,.45);
}
.proj-featured {
    border-color:rgba(240,200,74,.18);
    background:rgba(240,200,74,.02);
}
.proj-featured:hover {
    border-color:rgba(240,200,74,.38);
    box-shadow:0 20px 48px rgba(0,0,0,.45), 0 0 28px rgba(240,200,74,.07);
}

.proj-top {
    display:flex; align-items:center; justify-content:space-between;
}
.proj-icon { font-size:1.9rem; }

.proj-badge {
    font-family:var(--f-mono); font-size:.62rem; font-weight:500;
    letter-spacing:1.2px; text-transform:uppercase;
    padding:4px 11px; border-radius:50px;
    color:var(--blue); background:rgba(77,143,255,.1); border:1px solid rgba(77,143,255,.2);
}
.proj-badge--gold {
    color:var(--gold); background:rgba(240,200,74,.08); border-color:rgba(240,200,74,.22);
}

.proj-card h3 {
    font-family:var(--f-head); font-size:1.35rem; font-weight:600;
    color:#fff; line-height:1.2;
}
.proj-card p { font-size:.9rem; color:var(--muted); line-height:1.72; flex:1; }

.proj-foot {
    display:flex; align-items:center; justify-content:space-between;
    padding-top:16px; border-top:1px solid var(--border); margin-top:4px;
}
.proj-stack { display:flex; gap:7px; }
.proj-stack span {
    font-family:var(--f-mono); font-size:.65rem; color:var(--muted);
    background:rgba(255,255,255,.05); border:1px solid var(--border);
    padding:3px 9px; border-radius:6px;
}
.proj-link {
    font-family:var(--f-mono); font-size:.8rem; font-weight:500;
    color:var(--teal); transition:transform .2s; display:inline-block;
}
.proj-link--gold { color:var(--gold); }
.proj-card:hover .proj-link { transform:translateX(4px); }

/* ─── SOBRE ─── */
#sobre {
    position:relative; z-index:1; padding:110px 0;
}

.sobre-grid {
    display:grid; grid-template-columns:400px 1fr;
    gap:70px; align-items:start;
}

.sobre-img-wrap {
    position:relative;
}
.sobre-img {
    width:100%; height:480px;
    object-fit:cover; object-position:top center;
    border-radius:20px;
    border:1px solid rgba(31,255,212,.15);
}
.sobre-brand-tag {
    position:absolute; bottom:16px; left:16px;
    font-family:var(--f-mono); font-size:.8rem; font-weight:500;
    color:var(--teal); background:rgba(8,9,15,.88); backdrop-filter:blur(12px);
    border:1px solid rgba(31,255,212,.25); border-radius:9px;
    padding:9px 16px; letter-spacing:.5px;
}

.sobre-text { padding-top:8px; }
.sobre-text p {
    font-size:.97rem; color:var(--muted); line-height:1.8; margin-bottom:14px;
}

.skill-list { margin:32px 0; display:flex; flex-direction:column; gap:18px; }
.sk-row {}
.sk-top {
    display:flex; justify-content:space-between;
    font-family:var(--f-mono); font-size:.78rem; margin-bottom:8px;
}
.sk-top span:last-child { color:var(--teal); }
.sk-bar {
    height:5px; background:rgba(255,255,255,.07); border-radius:5px; overflow:hidden;
}
.sk-fill {
    height:100%; width:0; border-radius:5px;
    background:linear-gradient(90deg, var(--teal), var(--blue));
    transition:width 1.5s cubic-bezier(.4,0,.2,1);
}

.sobre-links { display:flex; gap:14px; flex-wrap:wrap; }

/* ─── CONTACTO ─── */
#contacto {
    position:relative; z-index:1; padding:110px 0; background:var(--bg2);
}
.cta-block {
    text-align:center; max-width:520px; margin:0 auto;
}
.cta-block p {
    font-size:1rem; color:var(--muted); margin-bottom:36px; line-height:1.75;
}
.cta-btns { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* ─── FOOTER ─── */
footer {
    position:relative; z-index:1;
    border-top:1px solid var(--border); padding:28px 0;
}
.footer-inner {
    display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
}
.footer-copy { font-family:var(--f-mono); font-size:.72rem; color:var(--muted); }
.footer-links { display:flex; gap:22px; }
.footer-links a { font-size:.83rem; color:var(--muted); transition:color .2s; }
.footer-links a:hover { color:var(--teal); }

/* ─── RESPONSIVE ─── */
@media(max-width:900px) {
    #nav .nav-links { display:none; }
    .hero-grid { grid-template-columns:1fr; gap:48px; }
    .hero-photo-wrap { order:-1; }
    .photo-card { width:280px; }
    .photo { height:340px; }
    .ps1 { left:-10px; }
    .ps2 { right:-10px; }
    .proj-grid { grid-template-columns:1fr; }
    .proj-featured { grid-column:span 1; }
    .sobre-grid { grid-template-columns:1fr; gap:40px; }
    .sobre-img { height:320px; }
    #hero { padding:90px 0 60px; }
}

@media(max-width:580px) {
    h1 { letter-spacing:-1px; }
    .hero-btns, .sobre-links, .cta-btns { flex-direction:column; }
    .btn-main, .btn-sec { justify-content:center; text-align:center; }
    .footer-inner { flex-direction:column; text-align:center; }
    .footer-links { justify-content:center; }
}