:root{color-scheme:dark;--bg:#090909;--surface:rgba(22,22,21,.9);--surface-solid:#171715;--text:#f5f3eb;--muted:#aaa79c;--line:rgba(255,255,255,.13);--accent:#f5c842;--accent-ink:#15130c;--header:rgba(9,9,9,.92);--preview:#1d1c19;--shadow:0 24px 70px #0008}
:root[data-theme="light"]{color-scheme:light;--bg:#f7f4ea;--surface:rgba(255,255,252,.92);--surface-solid:#fffef9;--text:#171715;--muted:#666258;--line:rgba(23,23,21,.15);--accent:#8b5e00;--accent-ink:#fff;--header:rgba(247,244,234,.94);--preview:#e7e0ce;--shadow:0 24px 70px #33250d1a}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:110px}
body{margin:0;isolation:isolate;background:var(--bg);color:var(--text);font-family:Inter,"Segoe UI",Arial,sans-serif;font-size:15px;line-height:1.65;transition:background-color .25s,color .25s}
a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}button,a{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:5px}::selection{background:var(--accent);color:var(--accent-ink)}
#animated-background{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.42}#animated-background:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--bg) 0%,color-mix(in srgb,var(--bg) 76%,transparent) 44%,transparent 100%)}
.container{max-width:1160px;width:calc(100% - 96px);margin:auto}
.site-header{position:sticky;top:0;z-index:20;background:var(--header);border-bottom:1px solid var(--line);backdrop-filter:blur(20px)}.header-inner{max-width:1320px;margin:auto;min-height:86px;padding:0 48px;display:flex;align-items:center;gap:35px}
.brand{font-weight:800;font-size:33px;display:inline-flex;align-items:baseline;letter-spacing:-2px;white-space:nowrap}.brand>span:first-child{color:var(--accent)}.brand-name{font-size:15px;letter-spacing:-.4px;margin-left:12px;font-weight:650}
nav{margin-left:auto;display:flex;align-items:center;gap:25px}nav a{font-size:12px;font-weight:550;color:var(--muted);position:relative;padding:12px 0}nav a:hover,nav a[aria-current]{color:var(--accent)}nav a[aria-current]:after{content:"";position:absolute;bottom:3px;left:0;right:0;height:2px;background:var(--accent)}.header-actions{display:flex;gap:8px}.icon-button{display:grid;place-items:center;height:38px;width:38px;border:1px solid var(--line);border-radius:50%;background:var(--surface);color:var(--text);font-size:20px}.menu-toggle{display:none}
.skip-link{position:fixed;top:-80px;left:16px;z-index:50;background:var(--accent);color:var(--accent-ink);padding:12px}.skip-link:focus{top:12px}
.hero{position:relative;min-height:720px;display:grid;grid-template-columns:1.3fr 1fr;align-items:center;gap:80px;padding:85px 0 115px}.hero-copy{min-width:0}.eyebrow{font-size:10px;font-weight:650;letter-spacing:2.4px;color:var(--accent);margin:0 0 22px;display:flex;align-items:center;gap:10px}.flag-canarias{display:inline-block;width:18px;height:12px;flex:0 0 auto;border:1px solid #fff6;border-radius:2px;background:linear-gradient(90deg,#fff 0 33.333%,#1762a5 33.333% 66.666%,#f4c542 66.666%);box-shadow:0 0 8px #0003}.status-dot{width:7px;height:7px;display:inline-block;flex-shrink:0;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 10%,transparent)}h1,h2,h3,p{margin-top:0}h1{font-size:clamp(52px,6.2vw,82px);line-height:1.07;font-weight:650;letter-spacing:-4.5px;margin-bottom:28px}.hero-line{display:inline-block;min-height:1em}.hero-greeting{color:var(--text)}.hero-name{min-width:12.2ch;color:var(--accent)}.hero-line.is-typing:after,.rotating-hello.is-typing:after{content:"";display:inline-block;width:.055em;height:.82em;margin-left:.09em;background:currentColor;vertical-align:-.04em;animation:caret-blink .72s steps(1) infinite}.hero-role{max-width:540px;font-size:19px;font-weight:500;letter-spacing:-.4px;line-height:1.45;margin-bottom:14px}.hero-description{max-width:520px;color:var(--muted);font-size:14px;line-height:1.8}.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:29px}.button{display:inline-flex;align-items:center;justify-content:center;padding:13px 20px;font-size:12px;font-weight:650;border-radius:7px;border:1px solid var(--line);transition:transform .2s}.button:hover{transform:translateY(-3px)}.button-primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}.button-secondary{background:var(--surface)}.hero-footnote{font-size:10px;color:var(--muted);margin-top:36px;letter-spacing:.3px}.hero-footnote span{margin-right:8px;color:var(--accent);font-family:monospace}@keyframes caret-blink{50%{opacity:0}}
.portrait-wrap{position:relative;max-width:350px;width:100%;justify-self:center;transform:rotate(3deg)}.portrait-card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:15px;padding:12px;box-shadow:var(--shadow),18px 18px 0 -10px var(--accent)}.portrait-card:before{content:"";position:absolute;inset:12px 12px 56px;border-radius:9px;box-shadow:inset 0 0 0 1px #fff2;pointer-events:none;z-index:1}.portrait-image{display:block;width:100%;height:350px;object-fit:cover;object-position:50% 35%;filter:saturate(.88) contrast(1.04);border-radius:9px}.portrait-caption{display:flex;justify-content:space-between;align-items:center;padding:17px 5px 6px;font-size:11px}.mono{font-family:monospace;color:var(--muted);font-size:10px}.floating-label{position:absolute;bottom:40px;left:-33px;transform:rotate(-3deg);background:var(--surface-solid);box-shadow:var(--shadow);border:1px solid var(--line);border-radius:7px;padding:12px 18px;display:flex;align-items:center;gap:12px;font-size:10px}.portrait-decoration{position:absolute;right:-26px;top:-38px;color:var(--accent);font-size:45px;font-weight:200}.scroll-cue{position:absolute;bottom:28px;left:0;display:flex;align-items:center;gap:13px;letter-spacing:2px;font-size:9px;color:var(--muted)}.scroll-cue>span{font-size:19px;color:var(--accent)}
.section{padding:64px 0;border-top:1px solid var(--line);min-width:0}.section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-bottom:30px}.section-heading .eyebrow{margin-bottom:10px}h2{font-size:36px;line-height:1.15;font-weight:550;letter-spacing:-1.5px;margin:0}h2 span{color:var(--accent)}.section-heading>p{max-width:260px;font-size:12px;color:var(--muted);margin:0 0 3px}.editor-note{font-size:11px;color:var(--muted);margin-bottom:19px}.stack-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}.stack-card{position:relative;background:var(--surface);border:1px solid var(--line);padding:24px 20px;border-radius:9px;min-width:0}.tech-symbol{display:grid;place-items:center;width:39px;height:39px;font-family:monospace;font-size:21px;font-weight:700;margin-bottom:23px;border-radius:8px}.html-symbol{color:#ed996e;background:#cb75451a}.css-symbol{color:#7cafec;background:#558ecc1a}.js-symbol{color:#b7a232;background:#c8b0431a}.git-symbol{color:#b59ad7;background:#a17bc51a}h3{font-size:16px;font-weight:600;letter-spacing:-.3px;margin-bottom:5px}.stack-card p{font-size:11px;color:var(--muted);margin:0}.tech-category{position:absolute;top:28px;right:16px;font-size:7px;letter-spacing:1px;color:var(--muted)}
.journey-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px}.timeline-card{padding:27px;background:var(--surface);border:1px solid var(--line);border-radius:10px}.entry-label{font-size:8px;letter-spacing:1.4px;color:var(--muted);display:block;margin-bottom:25px}.timeline-entry{position:relative;margin-left:4px;padding:0 0 30px 23px;border-left:1px solid var(--line)}.timeline-entry:last-child{padding-bottom:0}.timeline-dot{position:absolute;left:-4px;top:7px;width:7px;height:7px;background:var(--accent);border-radius:50%}.entry-date{font-family:monospace;font-size:10px;color:var(--accent);margin-bottom:10px}.entry-place{font-size:12px;color:var(--muted);margin-bottom:14px}.timeline-entry>p:last-of-type{font-size:12px;color:var(--muted);line-height:1.8}.tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:19px}.tags span{font-size:9px;padding:4px 10px;border-radius:4px;background:color-mix(in srgb,var(--accent) 6%,transparent);border:1px solid var(--line);color:var(--muted)}
.projects-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.project-card{min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:11px;overflow:hidden}.project-preview{height:240px;position:relative;display:grid;place-items:center;overflow:hidden;background:var(--preview);border-bottom:1px solid var(--line)}.preview-web{background:radial-gradient(ellipse at 60% 70%,color-mix(in srgb,var(--accent) 18%,var(--preview)),var(--preview))}.preview-number{position:absolute;bottom:12px;left:17px;font-family:monospace;font-size:9px;color:var(--muted)}.mini-browser{width:67%;background:var(--surface-solid);border:1px solid var(--line);border-radius:6px;transform:rotate(-5deg);box-shadow:var(--shadow);padding:11px}.browser-dots{font-size:6px;letter-spacing:3px;color:var(--muted);border-bottom:1px solid var(--line);padding-bottom:8px}.mini-layout{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:22px;padding:20px 8px}.mini-layout i{display:block;height:7px;background:var(--text);opacity:.55;margin-bottom:8px;border-radius:2px}.mini-layout i:nth-child(2){width:70%}.mini-layout i:nth-child(3){width:90%;height:3px;opacity:.2}.mini-layout b{display:block;width:42px;height:13px;background:var(--accent);border-radius:2px;margin-top:15px}.mini-orbit{color:var(--accent);font-size:80px;line-height:1;text-align:center}.mini-dashboard{display:flex;width:70%;height:145px;transform:rotate(4deg);border:1px solid var(--line);background:var(--surface-solid);border-radius:7px;box-shadow:var(--shadow);padding:13px;gap:15px}.dashboard-sidebar{width:20%;border-right:1px solid var(--line);padding-right:10px}.dashboard-sidebar i{display:block;height:4px;background:var(--muted);opacity:.4;margin:10px 0}.dashboard-main{flex:1;min-width:0}.dashboard-stats{display:flex;gap:8px}.dashboard-stats i{height:24px;background:var(--preview);border:1px solid var(--line);border-radius:3px;flex:1}.chart{display:flex;align-items:flex-end;height:76px;gap:9px;border-bottom:1px solid var(--line);padding:10px 5px 0}.chart b{flex:1;background:var(--accent);opacity:.6;height:40%}.chart b:nth-child(2n){height:60%}.chart b:nth-child(3n){height:50%}.chart b:nth-child(5){height:75%}.chart b:last-child{height:95%;opacity:1}.project-copy{padding:26px}.project-copy .entry-label{margin-bottom:12px}.project-copy h3{font-size:20px;margin-bottom:12px}.project-copy>p{font-size:12px;color:var(--muted);max-width:350px}.project-copy .project-pending{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding-top:18px;margin:23px 0 0;max-width:none;font-size:10px}
.contact-card{display:grid;grid-template-columns:1.3fr 1fr;gap:60px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:48px}.contact-card h2{font-size:47px;line-height:1.15;margin-bottom:22px}.rotating-hello{display:inline-block;min-width:7.6ch;white-space:nowrap}.contact-card p{font-size:13px;color:var(--muted);margin-bottom:0}.contact-details{border-left:1px solid var(--line);padding-left:45px;align-self:center}.contact-icon{display:block;color:var(--accent);font-size:40px;line-height:1;margin-bottom:22px}.contact-details p{max-width:260px}.contact-details .entry-label{margin:24px 0 0;font-size:7px}.site-footer{border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:28px;padding-bottom:30px}.site-footer .brand{font-size:27px}.site-footer .brand-name{font-size:12px}.site-footer p,.back-top{font-size:9px;color:var(--muted);margin:0}.back-top:hover{color:var(--accent)}
@media(min-width:1500px){.hero{min-height:780px}}
@media(max-width:1050px){.header-inner{padding:0 28px;gap:20px}nav{gap:16px}.container{width:calc(100% - 64px)}.hero{gap:45px}h1{font-size:65px}.portrait-wrap{max-width:290px}.portrait-placeholder,.portrait-image{height:310px}.tech-category{position:static;display:block;margin-top:20px}.journey-grid{gap:24px}}
@media(max-width:800px){.header-inner{min-height:72px;justify-content:space-between}.header-actions{margin-left:auto}.menu-toggle{display:grid}nav{display:none;position:absolute;top:100%;left:0;right:0;margin:0;padding:18px 28px;background:var(--surface-solid);border-bottom:1px solid var(--line);box-shadow:var(--shadow);grid-template-columns:1fr 1fr;gap:8px 25px}nav.is-open{display:grid}nav a{font-size:14px}.hero{min-height:650px;gap:30px;padding-top:65px}h1{font-size:53px;letter-spacing:-3px}.hero-role{font-size:17px}.hero-description{font-size:13px}.portrait-placeholder,.portrait-image{height:275px}.portrait-wrap{max-width:245px}.portrait-caption{flex-wrap:wrap;gap:6px}.floating-label{left:-15px;padding:9px 12px;font-size:9px}.stack-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.tech-category{position:absolute;margin:0}.contact-card{gap:30px;padding:32px}.contact-details{padding-left:25px}.contact-card h2{font-size:39px}.section-heading>p{max-width:200px}}
@media(max-width:600px){.container{width:calc(100% - 40px)}.header-inner{padding:0 20px}.hero{grid-template-columns:1fr;gap:50px;padding:55px 0 85px}.hero-copy{max-width:450px}h1{font-size:clamp(44px,12vw,68px)}.hero-role{font-size:18px}.hero-description{font-size:14px}.hero-actions{gap:10px}.button{padding:12px 16px}.hero-footnote{margin-top:26px}.portrait-wrap{max-width:min(275px,calc(100% - 32px));margin-bottom:18px}.portrait-placeholder,.portrait-image{height:280px}.portrait-caption{flex-wrap:nowrap}.scroll-cue{bottom:23px}.section{padding:42px 0}.section-heading{align-items:flex-start;flex-direction:column;gap:14px;margin-bottom:24px}.section-heading>p{max-width:none}h2{font-size:32px}.eyebrow{font-size:9px;letter-spacing:1.8px}.stack-grid{gap:10px}.stack-card{padding:18px 15px}.tech-category{position:static;margin-top:16px;font-size:7px}.tech-symbol{margin-bottom:17px}.stack-card h3{font-size:15px}.stack-card p{font-size:10px}.journey-grid,.projects-grid{grid-template-columns:1fr;gap:0}.timeline-card{padding:23px}.projects-grid{gap:20px}.project-preview{height:210px}.project-copy{padding:23px}.contact-card{grid-template-columns:1fr;gap:30px;padding:27px}.contact-card h2{font-size:40px}.contact-details{border-left:0;border-top:1px solid var(--line);padding:25px 0 0}.contact-icon{float:right;margin:0}.site-footer{flex-wrap:wrap;gap:15px}.site-footer p{order:3;width:100%;font-size:9px}.site-footer .back-top{margin-left:auto}.editor-note{font-size:10px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}}

/* Colores de las tecnologías del perfil de Marco */
.java-symbol{color:#ef8c63;background:#d66b3c1a}.kotlin-symbol{color:#d98cbf;background:#bf68a21a}.spring-symbol{color:#7dc766;background:#63ad4c1a}.net-symbol{color:#b295e8;background:#8158bd1a}.mysql-symbol{color:#67b7d1;background:#3a96b51a}.db-symbol{color:#76bde1;background:#4e9dc41a}.jq-symbol{color:#6aaee8;background:#438cc91a}
.contact-links{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}.contact-links a{display:inline-flex;gap:16px;align-items:center;padding:9px 13px;border:1px solid var(--line);border-radius:6px;font-size:10px;font-weight:650;background:color-mix(in srgb,var(--accent) 5%,transparent)}.contact-links a:hover{border-color:var(--accent);color:var(--accent)}

/* Un acento único da ritmo visual sin competir con el contenido. */
.stack-card,.timeline-card,.project-card,.contact-card{box-shadow:0 12px 40px #0002}.stack-card,.project-card{transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease}.project-preview{background-image:linear-gradient(145deg,color-mix(in srgb,var(--accent) 8%,transparent),transparent 55%)}
@media(hover:hover){.stack-card:hover,.project-card:hover{transform:translateY(-5px);border-color:color-mix(in srgb,var(--accent) 55%,var(--line));box-shadow:0 18px 50px #0004}}

/* Cursor personalizado: solo ratón preciso, nunca pantallas táctiles. */
.cursor-dot,.cursor-ring,.cursor-trail{position:fixed;top:0;left:0;z-index:9999;pointer-events:none;opacity:0;will-change:transform;transform:translate3d(-100px,-100px,0);transition:opacity .18s ease,width .18s ease,height .18s ease,background-color .18s ease,border-color .18s ease}
.cursor-dot{width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:var(--accent);box-shadow:0 0 16px color-mix(in srgb,var(--accent) 80%,transparent)}
.cursor-ring{width:32px;height:32px;margin:-16px 0 0 -16px;border:1px solid color-mix(in srgb,var(--accent) 82%,transparent);border-radius:50%;background:color-mix(in srgb,var(--accent) 4%,transparent);backdrop-filter:blur(1px)}
.cursor-trail{width:4px;height:4px;margin:-2px 0 0 -2px;border-radius:50%;background:var(--accent)}
.cursor-dot.is-visible,.cursor-ring.is-visible{opacity:1}.cursor-trail.is-visible{opacity:var(--trail-opacity)}.cursor-ring.is-interactive{width:48px;height:48px;margin:-24px 0 0 -24px;background:color-mix(in srgb,var(--accent) 13%,transparent);border-color:var(--accent)}.cursor-ring.is-pressed{width:25px;height:25px;margin:-12.5px 0 0 -12.5px}.cursor-dot.is-interactive{transform-origin:center}
@media(pointer:fine) and (hover:hover){html.custom-cursor-enabled,html.custom-cursor-enabled *{cursor:none!important}}
@media(pointer:coarse),(hover:none),(prefers-reduced-motion:reduce){.cursor-dot,.cursor-ring,.cursor-trail{display:none!important}}
.hero-greeting{min-width:7.3ch}