/* mauriciorivas.dev — sitio estático, sin dependencias externas.
   Tipografía: Instrument Serif (display) · Instrument Sans (texto) · JetBrains Mono (acentos técnicos). OFL, en assets/fonts/. */

@font-face{font-family:"Instrument Serif";src:url(fonts/instrument-serif-latin-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(fonts/instrument-serif-latin-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url(fonts/instrument-sans-latin-wght-normal.woff2) format("woff2");font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(fonts/jetbrains-mono-latin-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(fonts/jetbrains-mono-latin-500-normal.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}

/* ── tokens ── */
:root{
  --bg:#f5f3ee;--surface:#fbfaf7;--ink:#121417;--muted:#5a5f66;--faint:#7c8086;
  --line:#dfdbd2;--line-2:#cbc6ba;--accent:#b8391a;--accent-soft:rgba(184,57,26,.12);
  --grid:rgba(18,20,23,.08);--shadow:0 1px 0 rgba(18,20,23,.04),0 18px 40px -24px rgba(18,20,23,.25);
  --serif:"Instrument Serif","Iowan Old Style",Georgia,serif;
  --sans:"Instrument Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --gutter:16px;--max:1200px;--ease:cubic-bezier(.2,.7,.2,1);
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#0e0f11;--surface:#15171a;--ink:#ecebe6;--muted:#9a9ea4;--faint:#80848a;
  --line:#24272c;--line-2:#363a40;--accent:#ff6a3d;--accent-soft:rgba(255,106,61,.14);
  --grid:rgba(236,235,230,.07);--shadow:0 1px 0 rgba(0,0,0,.3),0 24px 48px -28px rgba(0,0,0,.8);
}}
@media (min-width:760px){:root{--gutter:40px}}

/* ── base ── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:72px}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1.0625rem/1.65 var(--sans);font-feature-settings:"kern","liga";-webkit-font-smoothing:antialiased;overflow-x:clip}
::selection{background:var(--accent);color:var(--bg)}
a{color:inherit;text-decoration-color:var(--line-2);text-underline-offset:.22em;text-decoration-thickness:1px;transition:color .2s,text-decoration-color .2s}
a:hover{color:var(--accent);text-decoration-color:currentColor}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.skip{position:absolute;left:var(--gutter);top:-48px;z-index:20;background:var(--ink);color:var(--bg);padding:8px 12px;font:500 .8125rem var(--mono)}
.skip:focus{top:8px}
.mono{font-family:var(--mono);font-size:.75rem;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}

/* ── barra superior ── */
.bar{position:sticky;top:0;z-index:10;background:color-mix(in srgb,var(--bg) 82%,transparent);-webkit-backdrop-filter:saturate(1.4) blur(12px);backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--line)}
.bar-in{position:relative;display:flex;align-items:center;gap:24px;height:56px}
.mark{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font:500 .75rem var(--mono);letter-spacing:.06em;text-transform:uppercase}
.mark-glyph{display:block;width:30px;height:30px;border-radius:50%;overflow:hidden;box-shadow:0 0 0 1px var(--line-2);transition:box-shadow .25s}
.mark-glyph img{display:block;width:100%;height:100%}
.mark:hover{color:var(--ink)}
.mark:hover .mark-glyph{box-shadow:0 0 0 1px var(--accent)}
.mark-name{display:none}
.nav{display:none;margin-left:auto;gap:28px}
.nav a{font:400 .75rem var(--mono);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;color:var(--muted);position:relative;padding:4px 0}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.nav a:hover,.nav a.is-active{color:var(--ink)}
.nav a.is-active::after,.nav a:hover::after{transform:scaleX(1)}
.lang{margin-left:auto;font:500 .75rem var(--mono);letter-spacing:.06em}
.lang a{display:inline-block;padding:6px 10px;border:1px solid var(--line-2);text-decoration:none}
.lang a:hover{border-color:var(--accent)}
.progress{position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--accent);transform-origin:left;transform:scaleX(0)}
@media (min-width:560px){.mark-name{display:inline}}
@media (min-width:900px){.nav{display:flex}.lang{margin-left:8px}}

/* ── hero ── */
.hero{position:relative;padding:48px 0 72px;border-bottom:1px solid var(--line);isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background-image:radial-gradient(var(--grid) 1px,transparent 1.3px);background-size:24px 24px;-webkit-mask-image:radial-gradient(ellipse 80% 70% at 70% 40%,#000 30%,transparent 78%);mask-image:radial-gradient(ellipse 80% 70% at 70% 40%,#000 30%,transparent 78%)}
.hero-copy{min-width:0}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:48px}
.portrait{display:block;width:112px;height:112px;border-radius:50%;margin:0 0 32px 4px;box-shadow:0 0 0 1px var(--line-2),0 0 0 6px var(--bg),0 0 0 8px color-mix(in srgb,var(--accent) 35%,transparent);background:var(--surface)}
@media (max-width:559px){.portrait{width:88px;height:88px;margin-bottom:28px}}
.eyebrow{display:flex;align-items:center;gap:12px;margin-bottom:28px}
.live{position:relative;width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none}
.live::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid var(--accent);opacity:0;animation:ping 2.8s var(--ease) infinite}
@keyframes ping{0%{transform:scale(.6);opacity:.8}80%,100%{transform:scale(1.8);opacity:0}}
.name{font:400 clamp(3.4rem,15vw,7.75rem)/.9 var(--serif);letter-spacing:-.025em;margin:0}
.name em{font-style:italic;color:var(--accent);padding-right:.04em}
.headline{margin-top:32px;max-width:34rem;font-size:1.125rem;line-height:1.55;color:var(--muted)}
.headline .role{display:block;color:var(--ink);font-weight:500;margin-bottom:4px}
.headline .sep{display:none}
.headline .clouds{display:block;margin-top:16px;font:500 .8125rem var(--mono);letter-spacing:.1em;color:var(--ink)}
@media (min-width:1000px){
  .hero{padding:96px 0 120px}
  .hero-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:center;gap:72px}
}

/* firma: la especificación que se reconcilia */
.spec{margin:0;position:relative;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);--mx:50%;--my:0%}
.spec::before{content:"";position:absolute;inset:-1px;pointer-events:none;padding:1px;background:radial-gradient(240px circle at var(--mx) var(--my),var(--accent),transparent 70%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);opacity:0;transition:opacity .4s}
.spec:hover::before{opacity:.7}
.spec-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line)}
.spec-file{font:500 .75rem var(--mono);color:var(--ink);letter-spacing:.02em}
.spec-state{display:inline-flex;align-items:center;gap:8px;font:500 .6875rem var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.spec-state::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent)}
.spec-code{margin:0;padding:18px 16px 14px;font:400 .75rem/1.75 var(--mono);color:var(--ink);overflow-x:auto;tab-size:2;font-variant-ligatures:none}
.spec-code code{font:inherit}
.ln{display:block;min-height:1.75em;white-space:pre}
.t-c{color:var(--faint)}
.t-k{color:var(--muted)}
.t-s{color:var(--accent)}
.topo{display:block;width:100%;height:auto;border-top:1px dashed var(--line-2);padding:10px 8px 4px}
.topo .edge{fill:none;stroke:var(--line-2);stroke-width:1}
.topo .fed{stroke-dasharray:3 4}
.topo .flow{fill:none;stroke:var(--accent);stroke-width:1.6;stroke-linecap:round;stroke-dasharray:2 22}
.topo .node rect{fill:var(--bg);stroke:var(--ink);stroke-width:1}
.topo .core rect{fill:var(--ink)}
.topo text{font:500 10px var(--mono);fill:var(--ink);letter-spacing:.06em}
.topo .core text{fill:var(--bg)}
.topo .cap{font:400 8.5px var(--mono);fill:var(--muted);letter-spacing:.04em}
.spec-status{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center;padding:12px 16px 14px;border-top:1px solid var(--line);font:400 .75rem var(--mono);color:var(--muted)}
.spec-status strong{color:var(--accent);font-weight:500}
@media (min-width:760px){.spec-code{font-size:.8125rem}}

/* estados animados (sólo con JS y movimiento permitido: clase .anim en <html>) */
.anim .spec .ln{visibility:hidden}
.anim .spec .ln.on{visibility:visible;animation:type var(--d,.4s) steps(var(--n,20),end) both}
.anim .spec .ln.cur::after{content:"";display:inline-block;width:.55em;height:1.1em;margin-left:2px;vertical-align:-.2em;background:var(--accent);animation:blink 1s steps(1) infinite}
@keyframes type{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 -1em 0 0)}}
@keyframes blink{50%{opacity:0}}
.anim .spec .topo .edge{stroke-dasharray:240;stroke-dashoffset:240;transition:stroke-dashoffset 1.1s var(--ease)}
.anim .spec .topo .node{opacity:0;transition:opacity .6s}
.anim .spec .topo .flow{opacity:0}
.anim .spec .spec-status{opacity:0;transition:opacity .6s}
.anim .spec.done .topo .edge{stroke-dashoffset:0}
.anim .spec.done .topo .fed{stroke-dasharray:3 4}
.anim .spec.done .topo .node{opacity:1}
.anim .spec.done .topo .node.d1{transition-delay:.15s}
.anim .spec.done .topo .node.d2{transition-delay:.3s}
.anim .spec.done .topo .node.d3{transition-delay:.45s}
.anim .spec.done .spec-status{opacity:1;transition-delay:.7s}
.anim .spec.done .topo .flow{opacity:1;animation:flow 2.8s linear infinite;transition:opacity .6s 1.1s}
.anim .spec.done .topo .flow.d1{animation-delay:-.9s}
.anim .spec.done .topo .flow.d2{animation-delay:-1.8s}
@keyframes flow{to{stroke-dashoffset:-48}}

/* ── secciones ── */
.sec{padding:80px 0;border-bottom:1px solid var(--line)}
.sec-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:28px}
.label{margin:0;display:flex;gap:12px;align-items:baseline;font:500 .75rem var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.label b{font-weight:500;color:var(--accent);font-variant-numeric:tabular-nums}
.display{font:400 clamp(2.1rem,7vw,3.5rem)/1.04 var(--serif);letter-spacing:-.015em;margin:0 0 28px}
.display em{font-style:italic;color:var(--accent)}
.h3{font:500 .75rem var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:72px 0 20px;padding-top:20px;border-top:1px solid var(--line)}
.lead{font:400 clamp(1.5rem,4.8vw,2.4rem)/1.24 var(--serif);letter-spacing:-.005em;max-width:46rem}
.lead em{font-style:italic;color:var(--accent)}
@media (min-width:1000px){
  .sec{padding:128px 0}
  .sec-grid{grid-template-columns:220px minmax(0,1fr);gap:48px}
  .sec-grid > .label{position:sticky;top:104px;align-self:start}
}

/* ahora */
.now-tag{display:inline-flex;align-items:center;gap:10px;padding:6px 12px;margin-bottom:24px;border:1px solid var(--line-2);font:500 .6875rem var(--mono);letter-spacing:.1em;text-transform:uppercase}
.quote{margin-top:28px;font:italic 400 clamp(1.25rem,3.6vw,1.75rem)/1.3 var(--serif);color:var(--accent);padding-left:18px;border-left:1px solid var(--accent)}
.uses{display:grid;border-top:1px solid var(--line);margin-top:40px}
.uses li{display:flex;align-items:baseline;gap:16px;padding:14px 0;border-bottom:1px solid var(--line);font-size:1rem}
.uses .mono{min-width:4.5rem;color:var(--accent);font-variant-numeric:tabular-nums}
@media (min-width:760px){.uses{grid-template-columns:repeat(3,1fr)}.uses li{flex-direction:column;gap:10px;padding:18px 20px 20px 0}}

.cards{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.card{position:relative;background:var(--bg);padding:24px 20px 28px;display:flex;flex-direction:column;gap:20px;min-height:200px;transition:background .3s}
.card::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.card:hover{background:var(--surface)}
.card:hover::before{transform:scaleX(1)}
.card-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.card-top b{color:var(--ink);font-weight:500}
.card p{font-size:1.0625rem;line-height:1.55;margin-top:auto}
.card .fig{margin-top:0;font:400 4.5rem/.9 var(--serif);letter-spacing:-.02em;color:var(--accent);font-variant-numeric:tabular-nums lining-nums}
.card .fig small{display:block;font:500 .6875rem var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.stack{display:flex;flex-wrap:wrap;gap:6px}
.stack span{font:400 .75rem var(--mono);padding:3px 8px;border:1px solid var(--line-2);color:var(--muted)}
@media (min-width:760px){.cards{grid-template-columns:repeat(2,1fr)}.card{padding:32px 28px 36px;min-height:270px}}

/* experiencia — eras */
.years{display:grid;gap:24px;align-items:end;margin-bottom:64px}
.big{font:400 clamp(7.5rem,34vw,15rem)/.78 var(--serif);letter-spacing:-.045em;font-variant-numeric:tabular-nums lining-nums;margin:0}
.big span{color:var(--accent)}
.years .display{max-width:24rem;margin:0}
@media (min-width:760px){.years{grid-template-columns:auto 1fr;gap:48px}}
.eras{position:relative;display:grid}
.eras::before,.eras::after{content:"";position:absolute;left:5px;top:10px;bottom:34px;width:1px;background:var(--line-2)}
.eras::after{background:var(--accent);transform-origin:top;transform:scaleY(var(--p,1))}
.era{position:relative;padding:0 0 28px 34px}
.era::before{content:"";position:absolute;left:0;top:6px;width:11px;height:11px;border-radius:50%;background:var(--bg);border:1px solid var(--ink);z-index:1}
.era .mono{display:block;font-variant-numeric:tabular-nums}
.era-name{font:400 1.5rem/1.15 var(--serif);margin-top:6px}
.era-note{font:400 .8125rem/1.5 var(--mono);color:var(--muted);margin-top:8px}
.era.now::before{background:var(--accent);border-color:var(--accent);box-shadow:0 0 0 5px var(--accent-soft)}
.era.now .era-name{font-style:italic;color:var(--accent)}
@media (min-width:900px){
  .eras{grid-template-columns:repeat(5,1fr)}
  .eras::before,.eras::after{left:0;right:20%;top:5px;bottom:auto;width:auto;height:1px}
  .eras::after{transform-origin:left;transform:scaleX(var(--p,1))}
  .era{padding:36px 24px 0 0}
  .era::before{top:0}
}

/* certificaciones */
.certs{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);margin:0}
.cert-group{background:var(--bg);padding:22px 20px 24px;transition:background .3s}
.cert-group:hover{background:var(--surface)}
.cert-group dt{display:flex;justify-content:space-between;align-items:baseline;font:500 .75rem var(--mono);letter-spacing:.08em;text-transform:uppercase;margin-bottom:18px}
.cert-group dt span{color:var(--faint);font-variant-numeric:tabular-nums}
.cert-group dd{margin:0;display:flex;flex-wrap:wrap;gap:8px}
.badge{display:inline-flex;align-items:center;gap:9px;padding:7px 12px 7px 10px;border:1px solid var(--line-2);background:var(--surface);font-size:.875rem;line-height:1.25;transition:border-color .25s,transform .25s var(--ease)}
.badge::before{content:"";width:5px;height:5px;flex:none;background:var(--accent);transform:rotate(45deg)}
.badge:hover{border-color:var(--accent);transform:translateY(-1px)}
@media (min-width:760px){.certs{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.certs{grid-template-columns:repeat(4,1fr)}}

/* contacto */
.contact-links a{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:24px 0;border-bottom:1px solid var(--line);text-decoration:none;font:400 clamp(1.4rem,6vw,3rem)/1.1 var(--serif);overflow-wrap:anywhere}
.contact-links li:first-child a{border-top:1px solid var(--line)}
.arrow{flex:none;font:400 1.25rem var(--mono);color:var(--muted);transition:transform .35s var(--ease),color .2s}
.contact-links a:hover .arrow{transform:translate(4px,-4px);color:var(--accent)}

/* pie */
.foot{padding:32px 0 48px}
.foot-in{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px}

/* revelado al hacer scroll — sólo transform/opacity: sin layout shift */
.anim .rv{opacity:0;transform:translateY(18px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.anim .rv.in{opacity:1;transform:none}
.anim .rv-2{transition-delay:.1s}
.anim .rv-3{transition-delay:.2s}
.anim .rv-4{transition-delay:.3s}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .live::after{display:none}
}
.anim .eras{--p:0}