:root{ --bg:#0C0D10; --panel:#15161A; --text:#EAEAEC; --muted:#9B9DA3; --faint:#888A91; --line:#23242A; --accent:#5B82FF; --display:"Space Grotesk", system-ui, sans-serif; --body:"IBM Plex Sans", system-ui, sans-serif; --mono:"JetBrains Mono", ui-monospace, monospace; } /* tema claro: se activa con el botón (data-theme="light" en ) */ :root[data-theme="light"]{ --bg:#F7F7F5; --panel:#FFFFFF; --text:#1A1B1E; --muted:#56585F; --faint:#6A6C73; --line:#E4E4E1; --accent:#3B5BDB; } *{ box-sizing:border-box; margin:0; padding:0 } html{ -webkit-text-size-adjust:100% } body{ background:var(--bg); color:var(--text); font-family:var(--body); font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; transition:background-color .2s ease, color .2s ease; } @media (prefers-reduced-motion: reduce){ body{ transition:none } } a{ color:inherit; text-decoration:none } ::selection{ background:rgba(91,130,255,.3) } .wrap{ max-width:920px; margin:0 auto; padding:0 28px } /* ---------- hero ---------- */ .top{ padding:34px 0 0 } .hero{ display:grid; grid-template-columns:1fr auto; gap:40px; align-items:start } h1{ font-family:var(--display); font-weight:700; font-size:clamp(2.1rem,5vw,2.8rem); letter-spacing:-.02em; line-height:1.05 } .role{ font-family:var(--display); font-weight:600; font-size:1.18rem; margin-top:14px } .loc{ font-family:var(--mono); font-size:.8rem; color:var(--muted); margin-top:6px } #clock{ font-variant-numeric:tabular-nums } .socials{ display:flex; gap:16px; margin-top:104px } .socials a{ color:var(--muted); display:inline-flex; transition:color .16s ease } .socials a:hover{ color:var(--text) } .socials svg{ width:21px; height:21px } .photo-col{ justify-self:end; text-align:right } .photo{ width:248px; max-width:42vw; aspect-ratio:1/1; display:grid; place-items:center; background:var(--panel); border:1px solid var(--line); border-radius:6px; overflow:hidden; cursor:pointer; padding:0; color:var(--faint); font-family:var(--mono); font-size:.74rem; transition:border-color .16s ease, transform .16s ease; } .photo:hover{ border-color:#33353c } .photo:active{ transform:scale(.99) } .photo img{ width:100%; height:100%; object-fit:cover; display:block; transition:opacity .18s ease } @media (prefers-reduced-motion: reduce){ .photo img{ transition:none } } .click{ font-family:var(--mono); font-size:.8rem; color:var(--muted); margin-top:12px; transition:color .16s ease } .photo-col:hover .click{ color:var(--text) } /* ---------- experiencia / educación / proyectos ---------- */ .cols{ display:grid; grid-template-columns:1fr 1fr; gap:48px; margin-top:72px; padding-bottom:80px } h2{ font-family:var(--display); font-weight:600; font-size:1.5rem; margin-bottom:26px } .entry{ margin-bottom:24px } .entry:last-child{ margin-bottom:0 } .ehead{ display:flex; align-items:center; gap:8px; margin-bottom:4px } .ehead h3{ font-family:var(--display); font-weight:600; font-size:1.14rem } .gh{ color:var(--faint); display:inline-flex; transition:color .16s ease } .gh:hover{ color:var(--text) } .gh svg{ width:15px; height:15px } .desc{ color:var(--muted); font-size:.95rem } .desc a.link-emp{ color:var(--muted); border-bottom:1px solid var(--line); transition:color .16s ease, border-color .16s ease } .desc a.link-emp:hover{ color:var(--text); border-color:var(--faint) } .stack{ font-family:var(--mono); font-size:.78rem; color:var(--faint); margin-top:3px } /* ---------- stack (ocupa el ancho completo, debajo de las dos columnas) ---------- */ .stk{ grid-column:1 / -1 } .stk-list{ display:grid; gap:14px; max-width:560px } .stk-row{ display:grid; grid-template-columns:120px 1fr; gap:18px; align-items:baseline } .stk-row dt{ font-family:var(--mono); font-size:.78rem; color:var(--faint) } .stk-row dd{ color:var(--muted); font-size:.95rem } @media (max-width:640px){ .stk-row{ grid-template-columns:1fr; gap:2px } } footer{ border-top:1px solid var(--line); padding:22px 0 56px; font-family:var(--mono); font-size:.74rem; color:var(--faint) } footer a{ color:var(--muted); border-bottom:1px solid var(--line) } footer a:hover{ color:var(--text) } /* ---------- accesibilidad ---------- */ a:focus-visible, .photo:focus-visible, button:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:4px } /* ---------- movimiento ---------- */ @media (prefers-reduced-motion: no-preference){ .reveal{ opacity:0; transform:translateY(10px); animation:rise .55s ease forwards } } @keyframes rise{ to{ opacity:1; transform:none } } /* ---------- barra de controles (tema + blog) ---------- */ .controls{ display:flex; justify-content:flex-end; align-items:center; gap:20px; padding-top:26px } .ctrl-theme{ color:var(--muted); background:none; border:none; padding:0; display:inline-flex; cursor:pointer; transition:color .16s ease; } .ctrl-theme:hover{ color:var(--text) } .ctrl-theme svg{ width:20px; height:20px } .ctrl-blog{ color:var(--muted); background:none; border:none; cursor:pointer; font-family:var(--mono); font-size:.82rem; padding:0 0 2px; border-bottom:1px solid var(--line); transition:color .16s ease, border-color .16s ease; } .ctrl-blog:hover{ color:var(--text); border-color:var(--faint) } /* ---------- vista blog ---------- */ .blog{ padding:8px 0 80px } .blog-head{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:34px } .blog-head h2{ margin-bottom:0 } .back{ font-family:var(--mono); font-size:.8rem; color:var(--muted); background:none; border:none; cursor:pointer; padding:0; transition:color .16s ease } .back:hover{ color:var(--text) } .post-list{ display:grid; gap:4px } .post-link{ display:grid; grid-template-columns:1fr auto; gap:18px; align-items:baseline; padding:16px 0; border-bottom:1px solid var(--line); cursor:pointer; text-align:left; background:none; border-left:none; border-right:none; border-top:none; width:100%; } .post-link:first-child{ border-top:1px solid var(--line) } .post-link h3{ font-family:var(--display); font-weight:600; font-size:1.14rem; color:var(--text); transition:color .16s ease } .post-link:hover h3{ color:var(--accent) } .post-link .date{ font-family:var(--mono); font-size:.76rem; color:var(--faint); white-space:nowrap } .post{ max-width:680px } .post h2{ font-size:1.7rem; margin-bottom:6px } .post .date{ font-family:var(--mono); font-size:.78rem; color:var(--faint); display:block; margin-bottom:26px } .post p{ color:var(--muted); margin-bottom:16px } .post p:last-child{ margin-bottom:0 } .post a{ color:var(--accent); border-bottom:1px solid var(--line) } .post figure{ margin:0 0 20px } .post img{ display:block; max-width:100%; height:auto; border:1px solid var(--line); border-radius:6px } .post figcaption{ font-family:var(--mono); font-size:.76rem; color:var(--faint); margin-top:8px } @media (max-width:640px){ .post-link{ grid-template-columns:1fr; gap:3px } .post-link .date{ order:-1 } } @media (max-width:640px){ .hero{ grid-template-columns:1fr; gap:28px } .photo-col{ justify-self:start; text-align:left } .photo{ max-width:248px } .click{ text-align:left } .socials{ margin-top:24px } .cols{ grid-template-columns:1fr; gap:44px } }