/* Portafolio — Carlos Carreón
   Diseño: handoff de Claude Design. El acento (--acc) lo mueve site.js según la sección. */

:root {
  --bg: #0a0b0d;
  --fg: #a3a5a9;
  --fg-strong: #ededea;
  --fg-soft: #d9dad6;
  --fg-mid: #c4c5c1;
  --muted: #7c7f85;
  --muted-2: #9a9ca1;
  --line: #1d1f23;
  --line-2: #26282d;
  --chip-line: #25272c;
  --green: rgb(120 224 160);
  --acc: oklch(0.8 0.13 70);
  --acc-13: color-mix(in oklch, var(--acc) 13%, transparent);
  --acc-45: color-mix(in oklch, var(--acc) 45%, transparent);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --sans: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --pad-x: 48px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 40px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
a { color: var(--fg-strong); text-decoration: none; transition: color .25s; }
a:hover { color: var(--acc); }
img { display: block; max-width: 100%; }
p { margin: 0; text-wrap: pretty; }
h1, h2, h3 { margin: 0; color: var(--fg-strong); font-weight: 600; }
button { font: inherit; color: inherit; }
::selection { background: var(--acc); color: var(--bg); }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; border-radius: 6px; }
.mono { font-family: var(--mono); }
.strong { color: var(--fg-strong); }

/* ---------- Fondo ---------- */
.bg-canvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; display: block; }
.grain { position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .045; background-size: 140px 140px; }
.page { position: relative; z-index: 2; }

/* ---------- Elementos comunes ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 18px; border-radius: 999px;
  background: var(--acc); color: var(--bg);
  font-size: 14px; font-weight: 600; line-height: 1.2;
  transition: box-shadow .3s, transform .3s;
}
.btn:hover { color: var(--bg); box-shadow: 0 12px 32px -10px var(--acc); transform: translateY(-2px); }
.btn-sm { padding: 8px 14px; font-size: 13px; }
.btn-ghost {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 15px; border-radius: 999px; border: 1px solid var(--line-2);
  font-size: 14px; line-height: 1.2; color: var(--fg-soft);
  transition: border-color .25s, color .25s, transform .25s;
}
.btn-ghost:hover { border-color: var(--acc); color: var(--acc); transform: translateY(-2px); }

.tag {
  display: inline-block; font: 500 11.5px/1.4 var(--mono);
  padding: 4px 10px; border-radius: 999px;
  background: var(--acc-13); color: var(--acc);
}
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-block; padding: 7px 13px; border-radius: 999px;
  border: 1px solid var(--chip-line); background: rgba(255,255,255,.025);
  font-size: 13.5px; line-height: 1.3; color: #d0d1cd;
  transition: background .2s, border-color .2s, color .2s, transform .2s, box-shadow .2s;
}
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.label { font: 500 11px/1.5 var(--mono); letter-spacing: .12em; color: var(--muted); text-transform: uppercase; }

.sec-head { display: flex; align-items: center; gap: 14px; margin-bottom: 28px; }
.sec-head .n { font: 500 12px var(--mono); color: var(--acc); }
.sec-head .t { font: 500 12px var(--mono); letter-spacing: .14em; color: var(--fg-strong); text-transform: uppercase; }
.sec-head .rule { flex: 1; height: 1px; background: linear-gradient(90deg, color-mix(in oklch, var(--acc) 55%, transparent), transparent); }

.logo {
  position: relative; flex: none; width: 46px; height: 46px; border-radius: 13px;
  background: #f2f2ef; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 12px 28px -12px var(--acc);
  display: flex; align-items: center; justify-content: center;
  font: 600 15px var(--sans); letter-spacing: -.02em; color: var(--bg);
}
.logo img { width: 32px; height: 32px; object-fit: contain; }
.logo-lg { width: 64px; height: 64px; border-radius: 18px; font-size: 20px; box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 18px 40px -16px var(--acc); }
.logo-lg img { width: 44px; height: 44px; }

/* Brillo que sigue al cursor: site.js escribe --mx / --my en [data-spot] */
[data-spot] { position: relative; }
[data-spot]::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  opacity: 0; transition: opacity .35s;
  background: radial-gradient(520px circle at var(--mx, 30%) var(--my, 40%), color-mix(in oklch, var(--acc) 16%, transparent), transparent 70%), rgba(255,255,255,.02);
}
[data-spot]:hover::before, [data-spot]:focus-visible::before { opacity: 1; }

/* ---------- Home: dos columnas ---------- */
.shell { max-width: 1200px; margin: 0 auto; padding: 0 var(--pad-x); display: flex; flex-direction: column; }
.side { position: relative; padding: 28px 0 0; display: flex; flex-direction: column; }
.hero {
  position: relative; min-height: 620px; padding: 28px; border-radius: 28px; overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 0 0 1px rgba(255,255,255,.07), 0 50px 100px -60px var(--acc);
}
.hero-photo { position: absolute; inset: 0; z-index: 0; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.hero-ov {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(10,11,13,0) 0%, rgba(10,11,13,.1) 26%, rgba(10,11,13,.6) 44%, rgba(10,11,13,.94) 58%, var(--bg) 66%, var(--bg) 100%),
    linear-gradient(90deg, rgba(10,11,13,.4), rgba(10,11,13,0) 60%);
}
.hero-tint {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: soft-light;
  background: radial-gradient(110% 60% at 100% 0%, color-mix(in oklch, var(--acc) 30%, transparent), transparent 65%);
}
.hero-body { position: relative; z-index: 2; flex: 1; display: flex; flex-direction: column; }
.hero-gap { flex: 1 1 auto; min-height: 260px; }
.hero h1 { font-size: clamp(40px, 4.2vw, 52px); line-height: 1.02; letter-spacing: -.045em; }
.hero-role { margin-top: 12px; font-size: 19px; font-weight: 500; letter-spacing: -.01em; color: var(--fg-soft); }
.hero-bio { margin-top: 14px; max-width: 390px; font-size: 15.5px; line-height: 1.6; color: var(--fg-mid); }

.side-nav { display: none; margin-top: clamp(16px, 3.5vh, 32px); flex-direction: column; }
.side-nav a {
  display: flex; align-items: center; gap: 14px; padding: clamp(5px, 1vh, 9px) 0;
  font: 500 12px var(--mono); letter-spacing: .12em; color: var(--muted);
}
.side-nav .num { width: 20px; color: #55585e; transition: color .25s; }
.side-nav .bar { height: 1px; width: 24px; background: #34373c; transition: width .4s var(--ease), background .25s; }
.side-nav a:hover { color: var(--fg-strong); }
.side-nav a:hover .num { color: var(--muted-2); }
.side-nav a:hover .bar { width: 40px; background: var(--fg-strong); }
.side-nav a[aria-current="true"] { color: var(--fg-strong); }
.side-nav a[aria-current="true"] .num { color: var(--acc); }
.side-nav a[aria-current="true"] .bar { width: 56px; background: var(--acc); }

.side-foot { margin-top: 24px; padding-top: 24px; display: flex; flex-direction: column; gap: 16px; }
.side-loc { display: flex; align-items: center; gap: 10px; font: 12px var(--mono); color: var(--muted-2); }
.side-loc .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--acc); flex: none; }
.side-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

.content { padding: 80px 0 56px; min-width: 0; }
.content > section + section { margin-top: 120px; }

@media (min-width: 980px) {
  .shell { flex-direction: row; gap: 80px; }
  .side { flex: 0 0 38%; position: sticky; top: 0; height: 100vh; padding: clamp(20px, 3.5vh, 36px) 0 clamp(22px, 4vh, 36px); }
  .hero { flex: 1 1 auto; min-height: 0; padding: clamp(20px, 3vh, 28px) 28px; }
  .hero-gap { min-height: clamp(90px, 22vh, 280px); }
  .side-nav { display: flex; }
  .side-foot { margin-top: 0; }
  .content { flex: 1 1 0; padding: clamp(40px, 8vh, 72px) 0 64px; }
}
@media (max-width: 599px) {
  :root { --pad-x: 20px; }
  .side { padding-top: 16px; }
  .hero { min-height: 540px; padding: 20px; }
  .hero-gap { min-height: 220px; }
}

/* ---------- Sobre mí ---------- */
.about { display: flex; flex-direction: column; gap: 18px; font-size: 16.5px; line-height: 1.75; }
.about .lead { font-size: 20px; line-height: 1.6; letter-spacing: -.01em; color: #e4e5e1; }
.facts { margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 18px 24px; }
.facts .v { margin-top: 8px; font-size: 15px; color: var(--fg-strong); }
.facts .s { margin-top: 2px; font-size: 13.5px; line-height: 1.5; }

/* ---------- Timeline ---------- */
.tl { position: relative; display: flex; flex-direction: column; gap: 6px; padding-left: 40px; }
.tl-base, .tl-fill { position: absolute; left: 6px; top: 37px; width: 2px; height: 0; border-radius: 2px; pointer-events: none; }
.tl-base { background: #1f2226; }
.tl-fill { z-index: 2; background: linear-gradient(180deg, color-mix(in oklch, var(--acc) 35%, transparent), var(--acc)); box-shadow: 0 0 14px var(--acc); }
.tl-row {
  position: relative; display: grid; grid-template-columns: 144px minmax(0, 1fr); gap: 6px 28px;
  padding: 24px; margin: 0 -24px; border-radius: 18px; border: 1px solid transparent;
  color: inherit;
  transition: opacity .35s, border-color .35s, box-shadow .35s, transform .35s;
}
.tl-row:hover { color: inherit; }
.tl-dot {
  position: absolute; left: -16px; top: 30px; z-index: 3; width: 14px; height: 14px; border-radius: 50%;
  border: 3px solid var(--bg); background: #2c2f34;
  transition: transform .3s, background .3s, box-shadow .3s;
}
.tl-dot.on { background: var(--acc); box-shadow: 0 0 0 5px color-mix(in oklch, var(--acc) 20%, transparent), 0 0 18px var(--acc); }
.tl-when { position: relative; }
.tl-year { font: 600 30px/1 var(--sans); letter-spacing: -.04em; color: var(--fg-strong); transition: color .3s; }
.tl-dates { margin-top: 8px; font: 11.5px/1.5 var(--mono); color: var(--muted); transition: color .3s; }
.tl-main { position: relative; padding-left: 62px; min-height: 46px; }
.tl-main .logo { position: absolute; left: 0; top: -3px; transition: transform .4s var(--ease); }
.tl-title { display: block; font-size: 17px; font-weight: 500; line-height: 1.4; color: var(--fg-strong); transition: color .3s; }
.tl-title .arr { display: inline-block; transition: transform .3s; }
.tl-main p { margin-top: 8px; font-size: 15px; line-height: 1.65; }
.tl-main .tags { margin-top: 14px; }
.promo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.promo .badge { font: 500 10.5px/1.5 var(--mono); letter-spacing: .06em; padding: 3px 9px; border-radius: 999px; border: 1px solid rgba(86,214,140,.35); color: var(--green); }
.promo .path { font-size: 13.5px; color: var(--muted); }
.promo + p { margin-top: 10px; }

.tl:has(.tl-row:hover) .tl-row:not(:hover) { opacity: .38; }
.tl-row:hover, .tl-row:focus-visible {
  border-color: color-mix(in oklch, var(--acc) 40%, transparent);
  box-shadow: 0 30px 70px -40px color-mix(in oklch, var(--acc) 80%, transparent);
  transform: translateY(-2px);
}
.tl-row:hover .tl-year, .tl-row:hover .tl-dates, .tl-row:hover .tl-title { color: var(--acc); }
.tl-row:hover .tl-title .arr { transform: translateX(5px); }
.tl-row:hover .tl-dot { transform: scale(1.35); }
.tl-row:hover .logo { transform: scale(1.1) rotate(-5deg); }
.more-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 28px; font-size: 15px; font-weight: 500; padding-bottom: 3px; border-bottom: 1px solid var(--acc); }

@media (max-width: 599px) {
  .tl { padding-left: 30px; }
  .tl-dot { left: -6px; }
  .tl-row { grid-template-columns: 1fr; }
}

/* ---------- Proyectos ---------- */
.proj {
  position: relative; display: block; height: 100%; border-radius: 20px; border: 1px solid var(--line);
  background: rgba(255,255,255,.018); overflow: hidden; color: inherit;
  transition: opacity .35s, border-color .35s, box-shadow .35s, transform .35s;
}
.proj:hover { color: inherit; border-color: color-mix(in oklch, var(--acc) 40%, transparent); box-shadow: 0 30px 70px -40px color-mix(in oklch, var(--acc) 80%, transparent); transform: translateY(-2px); }
.proj-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-bottom: 1px solid var(--line); background: #111215; }
.proj-media.wide { aspect-ratio: 16 / 9; }
.proj-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; transition: transform .8s var(--ease); }
.proj:hover .proj-media img { transform: scale(1.045); }
.proj-body { position: relative; padding: 20px 22px 22px; }
.proj-feature .proj-body { padding: 26px 28px 28px; }
.proj-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.proj-name { display: inline-flex; align-items: baseline; gap: 6px; font-size: 19px; font-weight: 600; letter-spacing: -.02em; color: var(--fg-strong); transition: color .3s; }
.proj-feature .proj-name { margin-top: 12px; font-size: 30px; letter-spacing: -.035em; }
.proj-name .arr { display: inline-block; transition: transform .3s; }
.proj:hover .proj-name { color: var(--acc); }
.proj:hover .proj-name .arr { transform: translate(3px, -3px); }
.proj-when { font: 11.5px var(--mono); color: var(--muted); }
.proj-kicker { font: 500 11px var(--mono); letter-spacing: .12em; color: var(--acc); }
.proj p { margin-top: 8px; font-size: 14.5px; line-height: 1.6; }
.proj-feature p { margin-top: 10px; max-width: 560px; font-size: 15.5px; line-height: 1.65; }
.proj-stack { margin-top: 14px; font: 12px var(--mono); color: var(--muted); }
.stats { display: flex; flex-wrap: wrap; gap: 28px; margin-top: 22px; }
.stats .v { font-size: 26px; font-weight: 600; letter-spacing: -.03em; color: var(--fg-strong); line-height: 1.2; }
.stats .l { font-size: 13px; color: var(--muted); }
.proj-foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.proj-foot .cta { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 600; color: var(--fg-strong); transition: color .3s; }
.proj:hover .proj-foot .cta { color: var(--acc); }
.proj-grid { margin-top: 14px; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }

/* Portada sin captura (proyectos con datos privados) */
.cover {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 22px;
  background:
    radial-gradient(120% 90% at 100% 0%, color-mix(in oklch, var(--acc) 26%, transparent), transparent 60%),
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px) 0 0 / 100% 28px,
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px) 0 0 / 28px 100%,
    #0f1013;
  transition: transform .8s var(--ease);
}
.proj:hover .cover { transform: scale(1.03); }
.cover .mark { font: 600 44px/1 var(--sans); letter-spacing: -.05em; color: var(--fg-strong); }
.cover .rows { display: flex; flex-direction: column; gap: 6px; font: 11.5px var(--mono); color: var(--muted-2); }
.cover .rows span::before { content: '— '; color: var(--acc); }

.team-label { margin: 44px 0 6px; }
.team { display: flex; flex-direction: column; gap: 4px; }
.team-row { position: relative; display: grid; grid-template-columns: 144px minmax(0, 1fr); gap: 4px 28px; padding: 20px 24px; margin: 0 -24px; border-radius: 16px; border: 1px solid transparent; transition: opacity .35s, border-color .35s, transform .35s; }
.team-row, .team-row:hover { color: var(--fg); }
.team-row .who { font: 12px/1.9 var(--mono); color: var(--muted); transition: color .3s; }
.team-row .what { font-size: 16.5px; font-weight: 500; color: var(--fg-strong); transition: color .3s; }
.team-row p { margin-top: 6px; font-size: 14.5px; line-height: 1.6; }
.team:has(.team-row:hover) .team-row:not(:hover) { opacity: .38; }
.team-row:hover { border-color: color-mix(in oklch, var(--acc) 40%, transparent); transform: translateY(-2px); }
.team-row:hover .who, .team-row:hover .what { color: var(--acc); }
@media (max-width: 599px) { .team-row { grid-template-columns: 1fr; } }

/* ---------- Stack ---------- */
.stack-hint { margin: -14px 0 30px; font: 12.5px/1.6 var(--mono); color: var(--muted); }
.stack { position: relative; display: flex; flex-direction: column; gap: 22px; }
.stack-row { display: grid; grid-template-columns: 144px minmax(0, 1fr); gap: 10px 28px; align-items: start; }
.stack-row .label { padding-top: 9px; }
.stack .chip { cursor: default; }
.stack .chip:hover, .stack .chip[aria-expanded="true"] {
  background: var(--acc); border-color: var(--acc); color: var(--bg);
  transform: translateY(-2px); box-shadow: 0 10px 26px -10px var(--acc);
}
.pop {
  position: absolute; left: 0; top: 0; z-index: 5; width: min(320px, 100%);
  padding: 16px 18px; border-radius: 14px; background: #111215;
  border: 1px solid color-mix(in oklch, var(--acc) 45%, var(--line));
  box-shadow: 0 24px 60px -20px rgba(0,0,0,.8), 0 18px 50px -26px var(--acc);
  pointer-events: none; opacity: 0;
  transform: translate(-50%, calc(-100% - 14px)) scale(.96); transform-origin: 50% 100%;
  transition: opacity .2s, transform .25s, left .3s var(--ease), top .3s var(--ease);
}
.pop.flip { transform: translate(-50%, 14px) scale(.96); transform-origin: 50% 0; }
.pop.on { opacity: 1; transform: translate(-50%, calc(-100% - 14px)) scale(1); }
.pop.flip.on { transform: translate(-50%, 14px) scale(1); }
.pop-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.pop-name { font-size: 15.5px; font-weight: 600; letter-spacing: -.01em; color: var(--fg-strong); }
.pop-since { font: 11px var(--mono); color: var(--acc); }
.pop-use { display: flex; flex-direction: column; gap: 1px; margin-top: 10px; padding-top: 9px; border-top: 1px solid #1f2125; font-size: 13px; line-height: 1.5; }
.pop-use b { font-weight: 500; color: var(--fg-strong); }
@media (max-width: 599px) { .stack-row { grid-template-columns: 1fr; } .stack-row .label { padding-top: 0; } }

/* ---------- Cómo trabajo ---------- */
.ways { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.way {
  position: relative; display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 8px 32px;
  padding: 26px 0; border-bottom: 1px solid var(--line);
}
.way::before {
  content: ''; position: absolute; left: 0; top: -1px; height: 1px; width: 0;
  background: var(--acc); transition: width .6s var(--ease);
}
.way:hover::before { width: 100%; }
.way-head { display: flex; gap: 14px; align-items: baseline; }
.way-n { font: 500 12px var(--mono); color: var(--acc); }
.way h3 { font-size: 17px; line-height: 1.35; letter-spacing: -.015em; transition: color .3s; }
.way:hover h3 { color: var(--acc); }
.way p { font-size: 15px; line-height: 1.7; }
.way .where { margin-top: 10px; font: 12px var(--mono); color: var(--muted); }
@media (max-width: 699px) { .way { grid-template-columns: 1fr; } }

/* ---------- Contacto ---------- */
.contact-mail { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.contact-mail a { font-size: clamp(22px, 3.4vw, 34px); font-weight: 600; letter-spacing: -.03em; line-height: 1.2; overflow-wrap: anywhere; }
.copy {
  flex: none; padding: 8px 14px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--acc); color: var(--bg); font-size: 13px; font-weight: 600;
  transition: background .25s, transform .25s;
}
.copy:hover { transform: translateY(-2px); }
.copy.done { background: rgb(86 214 140); }
.contact-links { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 8px; }
.footer { margin-top: 96px; padding-top: 22px; border-top: 1px solid #1a1c20; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font: 12px var(--mono); color: #6c6f75; }

/* ---------- Páginas de detalle ---------- */
.topbar { position: sticky; top: 0; z-index: 10; background: rgba(10,11,13,.6); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid rgba(255,255,255,.06); }
.topbar-in { max-width: 1040px; margin: 0 auto; padding: 14px var(--pad-x); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.topbar-in.narrow { max-width: 880px; }
.topbar .back { display: inline-flex; align-items: center; gap: 10px; font: 500 13px var(--mono); color: #d0d1cd; }
.topbar .back:hover { color: var(--acc); }
.topbar .count { font: 500 12px var(--mono); letter-spacing: .12em; color: var(--muted); }
.article { max-width: 1040px; margin: 0 auto; padding: 64px var(--pad-x) 96px; }
.article.narrow { max-width: 880px; padding-top: 72px; }
.kicker { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font: 500 12px var(--mono); letter-spacing: .12em; }
.kicker .a { color: var(--acc); }
.kicker .sep { width: 28px; height: 1px; background: #3a3d42; }
.kicker .m { color: var(--muted); }
.title-xl { margin-top: 18px; font-size: clamp(48px, 9vw, 104px); line-height: .95; letter-spacing: -.05em; text-wrap: balance; }
.lede { margin-top: 24px; max-width: 700px; font-size: clamp(18px, 2.2vw, 22px); line-height: 1.55; color: #c9cac6; }
.meta-grid { margin-top: 40px; padding: 20px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 18px 24px; font-size: 14.5px; }
.meta-grid .label { margin-bottom: 6px; }
.meta-grid .v { color: var(--fg-strong); }
.figure { margin: 40px 0 0; position: relative; border-radius: 18px; overflow: hidden; box-shadow: 0 0 0 1px rgba(255,255,255,.07), 0 50px 120px -60px var(--acc); }
.figure img { width: 100%; height: auto; }
.big-stats { margin-top: 52px; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 24px; }
.big-stats .v { font-size: 44px; line-height: 1; font-weight: 600; letter-spacing: -.04em; color: var(--acc); }
.big-stats .l { margin-top: 10px; font-size: 14px; line-height: 1.45; color: var(--muted-2); }
.note { margin-top: 14px; font: 12px var(--mono); color: var(--muted); }
.block { margin-top: 88px; }
.block .sec-head { margin-bottom: 18px; }
.h2 { font-size: clamp(26px, 3vw, 32px); letter-spacing: -.03em; line-height: 1.2; text-wrap: balance; }
.block .body { margin-top: 14px; max-width: 700px; font-size: 16.5px; line-height: 1.75; }
.block .body + .body { margin-top: 14px; }
.block .body a { padding-bottom: 2px; border-bottom: 1px solid var(--acc); }
.arch { margin-top: 22px; display: flex; flex-direction: column; gap: 6px; }
.arch-row { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 4px 24px; padding: 16px 18px; border-radius: 12px; border: 1px solid #17191c; background: rgba(255,255,255,.018); transition: background .25s, border-color .25s, transform .25s; }
.arch-row:hover { background: color-mix(in oklch, var(--acc) 9%, transparent); border-color: color-mix(in oklch, var(--acc) 40%, transparent); transform: translateX(4px); }
.arch-row .k { font: 13px/1.7 var(--mono); color: var(--acc); }
.arch-row .d { font-size: 15px; line-height: 1.6; }
@media (max-width: 599px) { .arch-row { grid-template-columns: 1fr; } }
.cards { margin-top: 22px; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.card { height: 100%; padding: 24px; border-radius: 18px; border: 1px solid var(--line); background: rgba(255,255,255,.018); transition: border-color .3s, transform .3s, box-shadow .3s; }
.card:hover { border-color: var(--acc-45); transform: translateY(-4px); box-shadow: 0 30px 60px -34px color-mix(in oklch, var(--acc) 70%, transparent); }
.card .n { font: 500 12px var(--mono); color: var(--acc); }
.card h3 { margin-top: 22px; font-size: 18px; letter-spacing: -.02em; line-height: 1.3; }
.card p { margin-top: 10px; font-size: 14.5px; line-height: 1.65; }
.end { margin-top: 96px; padding-top: 28px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.end .back-link { font-size: 15px; color: #d0d1cd; }
.end .back-link:hover { color: var(--acc); }
.end .mail { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; text-align: right; }
.end .mail .m { font-size: clamp(17px, 2.4vw, 24px); font-weight: 600; letter-spacing: -.02em; overflow-wrap: anywhere; }

/* Experiencia */
.exp-head { display: flex; align-items: center; gap: 18px; }
.exp-head .when { font: 500 12px var(--mono); letter-spacing: .1em; color: var(--acc); }
.exp-head .role { font-size: 16px; font-weight: 500; color: var(--fg-soft); }
.exp-head > div:last-child { display: flex; flex-direction: column; gap: 4px; }
.exp-head + .title-xl { margin-top: 28px; }
.exp-stats { margin-top: 44px; padding: 24px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 20px 28px; }
.exp-stats .v { font-size: 40px; line-height: 1; font-weight: 600; letter-spacing: -.04em; color: var(--acc); }
.exp-stats .l { margin-top: 10px; font-size: 14px; line-height: 1.45; color: var(--muted-2); }
.exp-grid { margin-top: 72px; display: grid; grid-template-columns: 1fr; gap: 56px 64px; align-items: start; }
.exp-aside { display: flex; flex-direction: column; gap: 40px; }
.exp-aside .label { margin-bottom: 20px; }
@media (min-width: 980px) {
  .exp-grid { grid-template-columns: 280px minmax(0, 1fr); }
  .exp-aside { position: sticky; top: 96px; }
}
.path { list-style: none; margin: 0; padding: 0; }
.path li { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 0 16px; }
.path .rail { display: flex; flex-direction: column; align-items: center; }
.path .pt { margin-top: 3px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--acc); background: var(--bg); box-shadow: 0 0 0 4px color-mix(in oklch, var(--acc) 14%, transparent); }
.path li:last-child .pt { background: var(--acc); }
.path .ln { flex: 1; width: 2px; min-height: 22px; margin: 6px 0; background: linear-gradient(180deg, color-mix(in oklch, var(--acc) 60%, transparent), #1f2226); }
.path li:last-child .ln { display: none; }
.path .txt { padding-bottom: 22px; }
.path .w { font: 500 11.5px var(--mono); letter-spacing: .08em; color: var(--acc); }
.path .x { margin-top: 6px; font-size: 15px; line-height: 1.5; color: var(--fg-strong); }
.exp-aside .chip { font-size: 13px; padding: 6px 12px; }
.team-note { font-size: 15px; line-height: 1.55; color: var(--fg-strong); }
.exp-aside .chips { gap: 6px; }

.built-head { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.built-head .t { font: 500 12px var(--mono); letter-spacing: .14em; color: var(--fg-strong); }
.built-head .rule { flex: 1; height: 1px; background: linear-gradient(90deg, color-mix(in oklch, var(--acc) 55%, transparent), transparent); }
.built { display: flex; flex-direction: column; gap: 10px; }
.item { border-radius: 18px; border: 1px solid var(--line); background: rgba(255,255,255,.015); transition: border-color .35s, box-shadow .35s, background .35s; }
.item:hover { border-color: var(--acc-45); }
.item[open] {
  border-color: var(--acc-45);
  background: radial-gradient(640px circle at 0% 0%, var(--acc-13), transparent 70%), rgba(255,255,255,.025);
  box-shadow: 0 30px 70px -40px color-mix(in oklch, var(--acc) 80%, transparent);
}
.item summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 36px minmax(0, 1fr) 28px; gap: 4px 14px; align-items: start; padding: 22px; }
.item summary::-webkit-details-marker { display: none; }
.item summary:focus-visible { outline-offset: -2px; border-radius: 18px; }
.item .t, .item .s { display: block; }
.item .n { font: 500 12px/2 var(--mono); color: var(--acc); }
.item .t { font-size: 19px; font-weight: 600; letter-spacing: -.02em; line-height: 1.35; color: var(--fg-strong); transition: color .3s; }
.item .s { margin-top: 4px; font-size: 14.5px; line-height: 1.5; color: var(--muted-2); }
.item[open] .t { color: var(--acc); }
.item .plus { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; font-size: 16px; color: var(--fg-strong); transition: transform .35s var(--ease), color .3s, border-color .3s; }
.item[open] .plus { transform: rotate(45deg); color: var(--acc); border-color: var(--acc-45); }
.item .d { padding: 0 22px 24px 72px; }
.item .d p { font-size: 15.5px; line-height: 1.75; color: var(--fg-mid); }
.item .d .tags { margin-top: 16px; }
@media (max-width: 599px) { .item .d { padding-left: 22px; } .item summary { grid-template-columns: 28px minmax(0, 1fr) 28px; } }

.pager { margin-top: 96px; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.pager a { display: flex; flex-direction: column; gap: 6px; padding: 22px 24px; border-radius: 18px; border: 1px solid var(--line); background: rgba(255,255,255,.015); transition: border-color .3s, transform .3s, box-shadow .3s; }
.pager a:hover { border-color: var(--acc-45); transform: translateY(-3px); box-shadow: 0 30px 60px -34px var(--acc); }
.pager a.older { align-items: flex-end; text-align: right; }
.pager .nm { font-size: 22px; font-weight: 600; letter-spacing: -.02em; color: var(--fg-strong); }
.pager .rl { font-size: 14px; color: var(--muted-2); }

@media (max-width: 599px) {
  .article { padding-top: 48px; }
  .topbar .count { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* Tarjeta horizontal de ancho completo (Invitazo para ChatGPT) */
.proj-gap { margin-top: 14px; }
.proj-wide { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); }
.proj-wide .proj-media { aspect-ratio: auto; min-height: 220px; border-bottom: 0; border-right: 1px solid var(--line); }
.proj-wide .proj-body { align-self: center; }
@media (max-width: 699px) {
  .proj-wide { grid-template-columns: 1fr; }
  .proj-wide .proj-media { aspect-ratio: 16 / 10; min-height: 0; border-right: 0; border-bottom: 1px solid var(--line); }
}