/* Portfolio jabregu.com.ar — hoja de estilos única, sin dependencias.
   Reset base equivalente al preflight de Tailwind que usaba el diseño original. */
*, *::before, *::after { box-sizing: border-box; border: 0 solid var(--border); }
html { line-height: 1.5; -webkit-text-size-adjust: 100%; tab-size: 4; }
body { margin: 0; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-size: inherit; font-weight: inherit; }
p, pre, figure, blockquote, dl, dd, fieldset { margin: 0; }
img, svg, video, canvas { display: block; vertical-align: middle; }
img, video { max-width: 100%; height: auto; }
button, input, select, textarea { margin: 0; padding: 0; font: inherit; color: inherit; background: transparent; }
button { cursor: pointer; }
[hidden] { display: none !important; }

:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Space Grotesk", var(--font-sans);
  --background: oklch(0.105 0.012 260);
  --foreground: oklch(0.97 0.006 255);
  --card: oklch(0.16 0.016 260 / 72%);
  --card-foreground: oklch(0.97 0.006 255);
  --primary: oklch(0.64 0.23 28);
  --primary-foreground: oklch(0.99 0.005 255);
  --secondary: oklch(0.68 0.18 244);
  --secondary-foreground: oklch(0.99 0.005 255);
  --muted: oklch(0.2 0.015 260);
  --muted-foreground: oklch(0.68 0.02 255);
  --accent: oklch(0.74 0.17 58);
  --accent-foreground: oklch(0.12 0.01 260);
  --border: oklch(0.94 0.01 255 / 12%);
  --input: oklch(0.94 0.01 255 / 14%);
  --ring: oklch(0.68 0.18 244);
  --surface: oklch(0.14 0.014 260);
  --surface-raised: oklch(0.19 0.017 260);
  --brand-red: oklch(0.64 0.23 28);
  --brand-orange: oklch(0.74 0.17 58);
  --brand-blue: oklch(0.68 0.18 244);
  --radius: 0.5rem;
  color-scheme: dark;
}

* { box-sizing: border-box; border-color: var(--border); }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--background); color: var(--foreground); font-family: var(--font-sans); }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
::selection { background: color-mix(in oklab, var(--brand-red) 60%, transparent); color: var(--foreground); }

.portfolio-shell { min-height: 100vh; overflow: hidden; background: radial-gradient(circle at 85% 11%, color-mix(in oklab, var(--brand-blue) 13%, transparent), transparent 28%), var(--background); }
.section-pad { position: relative; padding: 8rem max(1.5rem, calc((100vw - 1200px) / 2)); }
.floating-nav { position: fixed; z-index: 50; top: 1.15rem; left: 50%; width: min(calc(100% - 2rem), 1180px); height: 68px; transform: translateX(-50%); display: flex; align-items: center; gap: 2rem; padding: .55rem .65rem .55rem 1rem; border: 1px solid var(--border); border-radius: .65rem; background: color-mix(in oklab, var(--background) 78%, transparent); backdrop-filter: blur(18px); box-shadow: 0 22px 70px oklch(0 0 0 / 35%); }
.brand { display: inline-flex; align-items: center; gap: .7rem; white-space: nowrap; }
.brand-mark { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid color-mix(in oklab, var(--brand-red) 55%, var(--border)); border-radius: .35rem; color: var(--brand-red); font-family: var(--font-display); font-size: .78rem; font-weight: 700; }
.brand-name { font-family: var(--font-display); font-size: 1.08rem; font-weight: 700; }
.brand-name span { color: var(--brand-red); }
.nav-links { display: flex; align-items: center; gap: 1.7rem; margin-left: auto; }
.nav-links > a:not(.cv-link) { color: var(--muted-foreground); font-size: .78rem; font-weight: 600; }
.nav-links > a:not(.cv-link):hover { color: var(--foreground); }
.cv-link, .primary-link { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 44px; padding: .7rem 1.1rem; border-radius: .35rem; background: linear-gradient(135deg, var(--brand-red), color-mix(in oklab, var(--brand-red) 72%, var(--brand-orange))); color: var(--primary-foreground); font-size: .78rem; font-weight: 750; box-shadow: 0 12px 35px color-mix(in oklab, var(--brand-red) 23%, transparent); }
.cv-link:hover, .primary-link:hover { transform: translateY(-2px); box-shadow: 0 16px 42px color-mix(in oklab, var(--brand-red) 35%, transparent); }
.mobile-cv, .menu-button { display: none; }
.focus-ring:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; }

.hero { min-height: 900px; display: grid; grid-template-columns: minmax(0, 1.03fr) minmax(420px, .97fr); align-items: center; gap: 5rem; padding-top: 10rem; padding-bottom: 6rem; }
.hero-grid { position: absolute; inset: 0; pointer-events: none; opacity: .18; background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px); background-size: 64px 64px; mask-image: linear-gradient(to bottom, transparent, black 20%, transparent 90%); }
.hero-copy, .terminal-wrap { position: relative; z-index: 1; }
.availability { display: inline-flex; align-items: center; gap: .55rem; margin-bottom: 2rem; padding: .48rem .75rem; border: 1px solid var(--border); border-radius: 999px; background: color-mix(in oklab, var(--surface-raised) 70%, transparent); color: var(--muted-foreground); font-size: .69rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; }
.availability span, .terminal-status i { width: 7px; height: 7px; border-radius: 50%; background: oklch(0.75 0.19 145); box-shadow: 0 0 15px oklch(0.75 0.19 145); animation: pulse 2s infinite; }
h1, h2, h3 { margin: 0; font-family: var(--font-display); letter-spacing: 0; }
.hero h1 { max-width: 720px; font-size: clamp(3.4rem, 6vw, 6.6rem); line-height: .92; font-weight: 600; }
h1 em, h2 em { color: var(--brand-red); font-style: normal; }
.hero-lead { max-width: 650px; margin: 2rem 0 0; color: var(--muted-foreground); font-size: 1.05rem; line-height: 1.8; }
.hero-lead strong { color: var(--foreground); }
.hero-actions { display: flex; align-items: center; gap: 1.5rem; margin-top: 2rem; }
.text-link { display: inline-flex; align-items: center; gap: .35rem; color: var(--foreground); font-size: .84rem; font-weight: 700; }
.text-link:hover { color: var(--brand-blue); }
.stats { display: flex; gap: 2.5rem; margin-top: 3.4rem; padding-top: 1.8rem; border-top: 1px solid var(--border); }
.stats > div { display: flex; align-items: center; gap: .7rem; }
.stats strong { font-family: var(--font-display); font-size: 2.1rem; line-height: 1; }
.stats sup { color: var(--brand-red); font-size: .9rem; }
.stats span { color: var(--muted-foreground); font-size: .67rem; line-height: 1.45; text-transform: uppercase; letter-spacing: .08em; }
.terminal-wrap { min-height: 540px; display: grid; place-items: center; perspective: 1200px; }
.terminal-card { width: min(100%, 570px); overflow: hidden; border: 1px solid color-mix(in oklab, var(--brand-blue) 28%, var(--border)); border-radius: .65rem; background: color-mix(in oklab, var(--surface) 87%, transparent); backdrop-filter: blur(22px); box-shadow: 0 40px 100px oklch(0 0 0 / 50%), 0 0 80px color-mix(in oklab, var(--brand-blue) 10%, transparent); transform: rotateY(-3deg) rotateX(2deg); animation: terminal-float 7s ease-in-out infinite; }
.terminal-top { height: 46px; display: flex; align-items: center; justify-content: space-between; padding: 0 1rem; border-bottom: 1px solid var(--border); color: var(--muted-foreground); font-family: ui-monospace, monospace; font-size: .68rem; }
.traffic { display: flex; gap: .4rem; }
.traffic span { width: 8px; height: 8px; border-radius: 50%; background: var(--muted-foreground); opacity: .5; }
.traffic span:first-child { background: var(--brand-red); opacity: 1; }
.terminal-tabs { display: flex; gap: .25rem; padding: .65rem .75rem 0; border-bottom: 1px solid var(--border); }
.terminal-tabs button { border: 0; border-bottom: 2px solid transparent; background: transparent; padding: .55rem .75rem .7rem; color: var(--muted-foreground); font-family: ui-monospace, monospace; font-size: .66rem; cursor: pointer; }
.terminal-tabs button.active { border-bottom-color: var(--brand-blue); color: var(--foreground); }
.code-window { min-height: 305px; padding: 2rem 1.6rem; }
.code-window pre { margin: 0; color: var(--foreground); font-family: ui-monospace, monospace; font-size: .78rem; line-height: 2; white-space: pre-wrap; }
.c-muted { color: var(--muted-foreground); opacity: .45; }.c-red { color: var(--brand-red); }.c-blue { color: var(--brand-blue); }.c-gold { color: var(--brand-orange); }
.terminal-status { display: flex; justify-content: space-between; padding: .75rem 1rem; border-top: 1px solid var(--border); color: var(--muted-foreground); font-family: ui-monospace, monospace; font-size: .62rem; }
.terminal-status span:first-child { display: flex; align-items: center; gap: .5rem; }
.orbit { position: absolute; border: 1px solid var(--border); border-radius: 50%; pointer-events: none; }
.orbit-one { width: 560px; height: 560px; animation: spin 24s linear infinite; }.orbit-two { width: 430px; height: 430px; border-color: color-mix(in oklab, var(--brand-red) 20%, transparent); animation: spin 18s linear infinite reverse; }
.orbit::after { content: ""; position: absolute; width: 7px; height: 7px; top: 12%; left: 17%; border-radius: 50%; background: var(--brand-blue); box-shadow: 0 0 16px var(--brand-blue); }
.floating-badge { position: absolute; z-index: 3; display: flex; align-items: center; gap: .65rem; min-width: 152px; padding: .75rem .8rem; border: 1px solid var(--border); border-radius: .5rem; background: color-mix(in oklab, var(--surface-raised) 88%, transparent); backdrop-filter: blur(14px); box-shadow: 0 18px 35px oklch(0 0 0 / 35%); font-size: .7rem; font-weight: 700; }
.floating-badge > svg:first-child { color: var(--brand-blue); }.floating-badge > svg:last-child { margin-left: auto; color: oklch(0.75 0.19 145); }
.floating-badge small { display: block; margin-top: .15rem; color: var(--muted-foreground); font-size: .56rem; font-weight: 500; }.badge-db { top: 5%; right: -2%; }.badge-api { bottom: 5%; left: -2%; }

.section-number { margin-bottom: 3.5rem; color: var(--muted-foreground); font-family: ui-monospace, monospace; font-size: .65rem; letter-spacing: .15em; }
.about, .experience { background: color-mix(in oklab, var(--surface) 66%, transparent); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.about-layout { display: grid; grid-template-columns: minmax(320px, .8fr) minmax(0, 1.2fr); gap: 7rem; align-items: center; }
.portrait-card { position: relative; min-height: 630px; overflow: hidden; border-radius: .5rem; background: var(--surface-raised); box-shadow: 0 35px 80px oklch(0 0 0 / 35%); }
.portrait-card::before { content: ""; position: absolute; z-index: 2; inset: .8rem; border: 1px solid color-mix(in oklab, var(--foreground) 18%, transparent); pointer-events: none; }
.portrait-card img { width: 100%; height: 100%; min-height: 630px; object-fit: cover; filter: saturate(.8) contrast(1.05); }
.portrait-scrim { position: absolute; inset: 0; background: linear-gradient(to top, var(--background), transparent 62%); }
.portrait-caption { position: absolute; z-index: 3; left: 2rem; bottom: 2rem; }
.portrait-caption span { color: var(--brand-red); font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .14em; }.portrait-caption strong { display: block; margin-top: .65rem; font-family: var(--font-display); font-size: 2rem; line-height: 1.02; }.portrait-caption small { display: block; margin-top: .75rem; color: var(--muted-foreground); font-size: .58rem; }
.eyebrow { display: flex; align-items: center; gap: .65rem; color: var(--brand-red); font-size: .65rem; font-weight: 800; text-transform: uppercase; letter-spacing: .16em; }.eyebrow > span { width: 30px; height: 1px; background: var(--brand-red); }
.section-heading h2, .contact h2 { margin-top: 1.1rem; font-size: clamp(2.6rem, 5vw, 5.2rem); line-height: .98; font-weight: 550; }.section-heading > p { max-width: 570px; margin: 1.4rem 0 0; color: var(--muted-foreground); line-height: 1.75; }
.about-lead { margin: 2rem 0 1rem; color: var(--foreground); font-size: 1.16rem; line-height: 1.75; }.about-content > p:not(.about-lead) { color: var(--muted-foreground); line-height: 1.8; }
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 3rem; border-top: 1px solid var(--border); }
.pillars article { position: relative; padding: 1.6rem 1.1rem 0 0; border-right: 1px solid var(--border); }.pillars article + article { padding-left: 1.1rem; }.pillars article:last-child { border: 0; }.pillars article > span { position: absolute; top: .7rem; right: .7rem; color: var(--muted-foreground); font-family: ui-monospace, monospace; font-size: .55rem; }.pillars svg { color: var(--brand-blue); }.pillars h3 { margin-top: 1rem; font-size: .92rem; }.pillars p { color: var(--muted-foreground); font-size: .72rem; line-height: 1.6; }

.skills > .section-heading { display: grid; grid-template-columns: 1fr 1fr; align-items: end; }.skills > .section-heading p { justify-self: end; }
.skills-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 4rem; }
.skill-card { padding: 2rem; border: 1px solid var(--border); border-radius: .5rem; background: linear-gradient(145deg, color-mix(in oklab, var(--surface-raised) 75%, transparent), color-mix(in oklab, var(--surface) 65%, transparent)); transition: .3s ease; }.skill-card:hover { transform: translateY(-5px); border-color: color-mix(in oklab, var(--brand-blue) 36%, var(--border)); }.skill-card-head { display: flex; justify-content: space-between; color: var(--brand-blue); }.skill-card-head span { color: var(--muted-foreground); font-family: ui-monospace, monospace; font-size: .6rem; }.skill-card h3 { margin: 1.4rem 0 2rem; font-size: 1.3rem; }.skill-list { display: grid; gap: 1.25rem; }.skill-row > div:first-child { display: flex; justify-content: space-between; margin-bottom: .6rem; font-size: .7rem; }.skill-row strong { color: var(--muted-foreground); font-family: ui-monospace, monospace; font-size: .62rem; }.skill-track { height: 3px; background: var(--muted); }.skill-track i { display: block; width: var(--skill); height: 100%; background: linear-gradient(90deg, var(--brand-red), var(--brand-orange)); box-shadow: 0 0 12px color-mix(in oklab, var(--brand-red) 40%, transparent); }

.tech { padding-top: 6rem; }.tech-heading-row { display: grid; grid-template-columns: 1.2fr .8fr; align-items: end; gap: 3rem; }.tech-heading-row > p { max-width: 420px; justify-self: end; color: var(--muted-foreground); line-height: 1.75; }.tech-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .85rem; margin-top: 4rem; }.tech-card { position: relative; min-height: 390px; overflow: hidden; padding: 1.7rem; border: 1px solid var(--border); border-radius: .5rem; background: color-mix(in oklab, var(--surface) 74%, transparent); transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease; }.tech-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(150deg, color-mix(in oklab, var(--brand-blue) 9%, transparent), transparent 42%); opacity: 0; transition: opacity .35s; }.tech-card:hover { transform: translateY(-7px); border-color: color-mix(in oklab, var(--brand-blue) 48%, var(--border)); box-shadow: 0 25px 55px oklch(0 0 0 / 30%), inset 0 0 35px color-mix(in oklab, var(--brand-blue) 6%, transparent); }.tech-card:hover::before { opacity: 1; }.tech-code { position: absolute; top: -.6rem; right: .8rem; color: color-mix(in oklab, var(--foreground) 5%, transparent); font-family: var(--font-display); font-size: 6.5rem; font-weight: 800; }.tech-icon { position: relative; color: var(--brand-blue); }.tech-version { position: relative; display: block; margin-top: 4.2rem; color: var(--brand-red); font-size: .58rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; }.tech-card h3 { position: relative; margin-top: .6rem; font-size: 1.45rem; }.tech-card p { position: relative; color: var(--muted-foreground); font-size: .77rem; line-height: 1.7; }.tag-row { position: absolute; bottom: 1.7rem; left: 1.7rem; display: flex; flex-wrap: wrap; gap: .4rem; }.tag-row span { padding: .35rem .5rem; border: 1px solid var(--border); border-radius: .25rem; color: var(--muted-foreground); font-family: ui-monospace, monospace; font-size: .52rem; }.card-arrow { position: absolute; right: 1.5rem; bottom: 1.7rem; color: var(--muted-foreground); transition: transform .3s, color .3s; }.tech-card:hover .card-arrow { transform: translateX(4px); color: var(--brand-red); }

.experience-layout { display: grid; grid-template-columns: .9fr 1.1fr; gap: 8rem; }.experience-intro { position: sticky; top: 8rem; align-self: start; }.experience-intro > p { max-width: 440px; color: var(--muted-foreground); line-height: 1.8; }.timeline { position: relative; }.timeline::before { content: ""; position: absolute; top: 20px; bottom: 20px; left: 24px; width: 1px; background: linear-gradient(var(--brand-red), var(--brand-blue), transparent); }.timeline-item { position: relative; display: grid; grid-template-columns: 50px 1fr; gap: 1.5rem; padding-bottom: 4rem; }.timeline-marker { z-index: 1; display: grid; place-items: center; width: 50px; height: 50px; border: 1px solid color-mix(in oklab, var(--brand-red) 40%, var(--border)); border-radius: 50%; background: var(--surface); box-shadow: 0 0 28px color-mix(in oklab, var(--brand-red) 15%, transparent); }.timeline-marker span { color: var(--brand-red); font-family: ui-monospace, monospace; font-size: .6rem; }.period { color: var(--brand-red); font-size: .6rem; font-weight: 800; text-transform: uppercase; letter-spacing: .14em; }.timeline-copy h3 { margin: .65rem 0 .35rem; font-size: 1.5rem; }.timeline-copy strong { color: var(--brand-blue); font-size: .76rem; }.timeline-copy p { color: var(--muted-foreground); font-size: .84rem; line-height: 1.75; }

.contact { padding-top: 9rem; padding-bottom: 2rem; text-align: center; background: var(--background); }.contact-glow { position: absolute; width: 500px; height: 300px; top: 22%; left: 50%; transform: translateX(-50%); background: radial-gradient(ellipse, color-mix(in oklab, var(--brand-red) 16%, transparent), transparent 65%); pointer-events: none; }.contact-inner { position: relative; max-width: 850px; margin: 0 auto 8rem; }.contact-inner .eyebrow { justify-content: center; }.contact h2 { font-size: clamp(3.2rem, 7vw, 7rem); }.contact-inner > p { max-width: 620px; margin: 1.8rem auto; color: var(--muted-foreground); line-height: 1.8; }.contact-actions { display: flex; justify-content: center; gap: .8rem; margin-top: 2rem; }.social-link { display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid var(--border); border-radius: .35rem; background: var(--surface-raised); }.social-link:hover { border-color: var(--brand-blue); color: var(--brand-blue); }.contact-inner > small { display: block; margin-top: 1rem; color: var(--muted-foreground); font-size: .6rem; }.footer-line { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--border); color: var(--muted-foreground); font-size: .65rem; }.footer-line .brand { color: var(--foreground); }.footer-line > span:last-child { justify-self: end; }

@keyframes pulse { 50% { opacity: .4; transform: scale(.8); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes terminal-float { 50% { transform: rotateY(2deg) rotateX(-1deg) translateY(-8px); } }

@media (max-width: 1024px) {
  .section-pad { padding-left: 2rem; padding-right: 2rem; }.nav-links { gap: 1rem; }.hero { grid-template-columns: 1fr; padding-top: 10rem; }.hero-copy { text-align: center; }.hero h1, .hero-lead { margin-left: auto; margin-right: auto; }.availability { margin-left: auto; margin-right: auto; }.hero-actions, .stats { justify-content: center; }.terminal-wrap { width: min(680px, 100%); margin: 0 auto; }.about-layout { gap: 3.5rem; }.pillars { grid-template-columns: 1fr; }.pillars article, .pillars article + article { padding: 1.2rem 0; border-right: 0; border-bottom: 1px solid var(--border); }.skills > .section-heading { display: block; }.skills > .section-heading p { margin-top: 1.5rem; }.tech-grid { grid-template-columns: repeat(2, 1fr); }.experience-layout { gap: 4rem; }
}

@media (max-width: 760px) {
  .section-pad { padding: 6.5rem 1.25rem; }.floating-nav { width: calc(100% - 1rem); top: .5rem; height: 60px; }.desktop-cv { display: none; }.menu-button { display: grid; place-items: center; margin-left: auto; width: 40px; height: 40px; border: 1px solid var(--border); border-radius: .35rem; background: var(--surface-raised); }.nav-links { position: absolute; top: calc(100% + .5rem); left: 0; right: 0; display: none; align-items: stretch; flex-direction: column; padding: 1rem; border: 1px solid var(--border); border-radius: .5rem; background: color-mix(in oklab, var(--background) 94%, transparent); backdrop-filter: blur(18px); }.nav-links.is-open { display: flex; }.nav-links > a:not(.cv-link) { padding: .75rem; }.mobile-cv { display: inline-flex; }.hero { min-height: auto; padding-top: 8.5rem; gap: 2.5rem; }.hero h1 { font-size: clamp(2.65rem, 13.5vw, 3.5rem); }.hero-lead { font-size: .92rem; }.hero-actions { flex-direction: column; align-items: stretch; }.text-link { justify-content: center; }.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem .8rem; }.stats > div { flex-direction: column; gap: .35rem; text-align: center; justify-content: flex-start; }.stats strong { font-size: 1.7rem; }.stats span { font-size: .55rem; }.terminal-wrap { min-height: 430px; }.terminal-card { transform: none; animation: none; }.code-window { min-height: 260px; padding: 1.25rem .9rem; }.code-window pre { font-size: .62rem; }.floating-badge, .orbit { display: none; }.about-layout, .experience-layout, .tech-heading-row { grid-template-columns: 1fr; }.portrait-card, .portrait-card img { min-height: 520px; }.about-content { margin-top: 1rem; }.section-heading h2 { font-size: 2.8rem; }.skills-grid, .tech-grid { grid-template-columns: 1fr; }.tech-heading-row > p { justify-self: start; }.tech-card { min-height: 340px; }.experience-intro { position: static; }.experience-layout { gap: 3rem; }.footer-line { grid-template-columns: 1fr; justify-items: center; }.footer-line > span:last-child { justify-self: center; }.footer-line .brand { display: none; }.contact-inner { margin-bottom: 5rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
/* ===== Proyectos ===== */
.projects { background: color-mix(in oklab, var(--surface) 66%, transparent); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.projects-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .85rem; margin-top: 4rem; }
.project-card { display: flex; flex-direction: column; padding: 1.7rem; border: 1px solid var(--border); border-radius: .5rem; background: color-mix(in oklab, var(--surface) 74%, transparent); transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease; }
.project-card:hover { transform: translateY(-6px); border-color: color-mix(in oklab, var(--brand-blue) 45%, var(--border)); box-shadow: 0 22px 50px oklch(0 0 0 / 28%); }
.project-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.4rem; }
.project-head svg { flex: none; color: var(--brand-blue); }
.project-kind { max-width: 15rem; color: var(--brand-red); font-size: .56rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; line-height: 1.6; }
.project-card h3 { font-size: 1.25rem; }
.project-card p { margin-top: .7rem; color: var(--muted-foreground); font-size: .77rem; line-height: 1.7; }
.tags-inline { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: auto; padding-top: 1.4rem; }
.tags-inline span { padding: .35rem .5rem; border: 1px solid var(--border); border-radius: .25rem; color: var(--muted-foreground); font-family: ui-monospace, monospace; font-size: .52rem; }

/* ===== Stack completo (dentro de Tecnologías) ===== */
.stack-full { margin-top: 4.5rem; padding-top: 2.6rem; border-top: 1px solid var(--border); }
.stack-title { font-family: var(--font-display); font-size: .95rem; font-weight: 600; }
.stack-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem 2rem; margin-top: 1.8rem; }
.stack-col h4 { margin: 0 0 1rem; padding-bottom: .6rem; border-bottom: 1px solid var(--border); color: var(--brand-blue); font-family: var(--font-display); font-size: .8rem; font-weight: 600; }
.stack-item { display: flex; align-items: baseline; gap: .5rem; margin-bottom: .72rem; font-size: .72rem; }
.stack-item > span { color: var(--foreground); }
.stack-item i { flex: 1; height: 1px; background: var(--border); }
.stack-item b { color: var(--brand-red); font-family: ui-monospace, monospace; font-size: .55rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.stack-item b.adv { color: var(--brand-blue); }

/* ===== Método ===== */
.method .section-heading > p { max-width: 640px; }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 3.5rem; border-top: 1px solid var(--border); }
.steps article { position: relative; padding: 1.8rem 1.4rem 0 0; border-right: 1px solid var(--border); }
.steps article + article { padding-left: 1.4rem; }
.steps article:last-child { border-right: 0; }
.step-num { color: var(--brand-red); font-family: ui-monospace, monospace; font-size: .62rem; font-weight: 700; letter-spacing: .1em; }
.steps h3 { margin: .85rem 0 .6rem; font-size: 1.05rem; }
.steps p { color: var(--muted-foreground); font-size: .75rem; line-height: 1.65; }

@media (max-width: 1024px) {
  .projects-grid, .stack-cols, .steps { grid-template-columns: repeat(2, 1fr); }
  .steps article:nth-child(2) { border-right: 0; }
  .steps article:nth-child(3), .steps article:nth-child(4) { margin-top: 1.6rem; border-top: 1px solid var(--border); }
  .steps article:nth-child(3) { padding-left: 0; }
}

@media (max-width: 760px) {
  .projects-grid, .stack-cols, .steps { grid-template-columns: 1fr; }
  .steps article, .steps article + article { padding: 1.4rem 0; border-right: 0; border-top: 0; margin-top: 0; border-bottom: 1px solid var(--border); }
  .steps article:last-child { border-bottom: 0; }
  .stack-full { margin-top: 3rem; padding-top: 2rem; }
}