/* portfolio.css · home: hero, marquesina, proyectos, filas, stack, sobre mí, contacto, cursor, preloader, diagramas.
   Regla de oro (architecture-v2 §3.3): ninguna regla oculta contenido; los estados iniciales los pone motion.js. */
@layer components{
/* ---------- hero ---------- */
.hero{position:relative;min-height:100svh;display:grid;grid-template-rows:auto 1fr auto;gap:var(--space-s);padding:5.5rem var(--gutter) var(--space-s);isolation:isolate;overflow:clip}
html.motion-ok .hero{position:sticky;top:0;z-index:var(--z-bh)}
html.motion-ok .hero~*{position:relative;z-index:var(--z-cover);background:var(--surface-0)}
.mk-bh{position:absolute;inset:0;z-index:var(--z-bh);overflow:hidden;will-change:transform,opacity}
.mk-bh img,.mk-bh canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.mk-bh canvas{opacity:0}
.mk-bh.is-webgl canvas{opacity:1;transition:opacity .9s var(--ease)}
.mk-bh.is-webgl img{opacity:0;transition:opacity .6s .5s linear}
.mk-bh.is-static img{opacity:1}
.mk-bh.is-static canvas{display:none}
.hero-top,.hero-name,.hero-foot{position:relative;z-index:var(--z-hero-text)}
.hero-top{display:grid;gap:var(--space-s);max-width:26rem;justify-items:start}
.hero-role{font-size:var(--step-2);font-weight:600;letter-spacing:-.02em;line-height:1.06;color:var(--ink-strong)}
.hero .lead{font-size:var(--step-0);line-height:1.5;max-width:30em}
.hero-name{align-self:end;font-size:var(--name);line-height:.86;letter-spacing:-.045em;overflow:clip;padding-top:var(--space-s)}
.hero-name .w{display:block}
/* máscaras de SplitText: la caja de recorte cubre ascendentes, tildes y descendentes sin cambiar el interlineado */
.hero-name .char-mask{display:inline-block;line-height:1;padding-block:.14em;margin-block:-.21em}
[data-lines]:has(>.line-mask){display:flex;flex-direction:column;align-items:stretch}
.line-mask{padding-block:.1em;margin-block:-.1em}
.hero-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--space-xs) var(--space-m)}
.hero-top p,.hero-foot p{margin-top:0}
@media (max-width:39.99em){
  .hero{--name:18.6vw;grid-template-rows:auto auto 1fr auto;padding-top:3.5rem}
  .mk-bh{position:relative;inset:auto;height:min(30svh,250px);margin-inline:calc(-1 * var(--gutter));grid-row:1}
  .mk-bh img,.mk-bh canvas{object-position:50% 12%}
  .hero-foot{gap:var(--space-xs)}
  .hero-top{max-width:none;padding-top:var(--space-s)}
  /* sin JS la barra es estática (dos filas): menos aire arriba para que el nombre entre en 390×844 (spec §10-2) */
  html:not(.js) .hero{padding-top:0}
  html:not(.js) .mk-bh{height:min(24svh,200px)}
}
@media (min-width:40em) and (max-width:59.99em){
  /* tablet vertical: poster/encuadre vertical a sangre; el disco ocupa la banda superior y el texto empieza debajo */
  .hero{grid-template-rows:minmax(38svh,auto) auto 1fr auto;padding-top:5rem}
  .hero-top{grid-row:2;max-width:30rem}
  .hero-name{grid-row:3}
  .hero-foot{grid-row:4}
  .mk-bh img,.mk-bh canvas{object-position:50% 30%}
}
/* ---------- marquesina ---------- */
.marquee{overflow:hidden;padding-block:var(--space-s);border-block:1px solid var(--line-1)}
html.motion-ok .marquee{white-space:nowrap}
.marquee-track{display:inline-block;font-size:var(--marquee);font-weight:700;letter-spacing:-.03em;line-height:1.15;color:var(--ink-strong);will-change:transform}
.marquee-item,.marquee .dot{display:inline-block;padding-inline:.225em}
.marquee .dot{color:var(--accent-text);font-weight:400}
.marquee-track[aria-hidden]{display:none}
/* estática (sin JS o con reduce): completa y a un cuerpo que no se coma media pantalla */
html:not(.motion-ok) .marquee-track{font-size:var(--step-2)}
html.motion-ok .marquee-track[aria-hidden]{display:inline-block}
/* ---------- secciones ---------- */
.sec{padding-block:clamp(3rem,6vw,5.5rem);scroll-margin-top:4rem}
.sec-head{display:grid;gap:var(--space-m);margin-bottom:var(--space-m)}
.sec-head h2{font-size:var(--step-4)}
.sec-head .meta{display:grid;gap:var(--space-s);align-content:end}
@media (min-width:60em){.sec-head{grid-template-columns:minmax(min-content,7fr) minmax(0,5fr);gap:var(--space-l);align-items:end}}
/* ---------- proyectos ---------- */
.project{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-l);padding-block:var(--space-l);border-top:1px solid var(--line-1)}
.project>.mono,.project>h3{grid-column:1/-1}
.project>h3{max-width:14ch}
.project h3{font-size:var(--step-5);transition:transform 350ms var(--ease)}
@media (hover:hover){.project:hover h3{transform:translateX(.08em)}}
.project .text{display:grid;gap:var(--space-m);align-content:start;max-width:62ch}
.project .text p{color:var(--ink-1)}
.project .links{display:flex;flex-wrap:wrap;gap:var(--space-s) var(--space-l);align-items:baseline}
.facts{display:grid;grid-template-columns:6.5em minmax(0,1fr);gap:.55rem var(--space-m);padding-top:var(--space-s);border-top:1px solid var(--line-1)}
.facts dt{font-family:var(--font-mono);font-size:var(--step--1);letter-spacing:.02em;color:var(--ink-faint);font-weight:400;padding-top:.15em}
.facts dd{margin:0;color:var(--ink-muted)}
.csp{max-width:100%;overflow:auto;padding:var(--space-s) var(--space-m);border:1px solid var(--line-1);border-radius:var(--r-md);background:var(--surface-1);color:var(--ink-muted);white-space:pre-wrap;overflow-wrap:anywhere}
.panel{padding:var(--space-l);border:1px solid var(--line-1);border-radius:var(--r-md);background:var(--surface-1)}
.panel figcaption{margin-top:var(--space-m)}
@media (min-width:60em){
  .project{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--space-l) var(--space-xl);align-items:start}
  .project .panel{position:sticky;top:6rem}
}
/* diagramas (diagram.css fundido): una sola variante vertical (340 unidades) en todos los anchos, escalada entre 20 y 26 rem
   para que el texto nunca baje de ~12 px (brief §4.8); en < 40em el panel sangra hasta los márgenes y, si aun así no cabe, desplaza */
.diagram-v{width:100%;max-width:26rem;height:auto;display:block;margin-inline:auto;overflow:visible}
.diagram-v .box{fill:var(--surface-0);stroke:var(--line-3);stroke-width:1}
.diagram-v .box.strong{stroke:var(--ink-strong)}
.diagram-v .ln{stroke:var(--line-3);stroke-width:1;fill:none}
.diagram-v .ln.dash{stroke-dasharray:3 4}
.diagram-v .div{stroke:var(--line-3);stroke-dasharray:1 5}
.diagram-v .gate{stroke:var(--accent);stroke-width:1.5;fill:none}
.diagram-v .lbl{font-family:var(--font-body);font-size:13.5px;font-weight:500;fill:var(--ink-1)}
.diagram-v .sub{font-family:var(--font-body);font-size:13px;font-weight:400;fill:var(--ink-muted)}
.diagram-v .gate-lbl{font-family:var(--font-body);font-size:13px;font-weight:500;fill:var(--accent-text)}
.diagram-v .mark circle{fill:var(--surface-0);stroke:var(--line-3);stroke-width:1;r:9}
.diagram-v .mark text{font-family:var(--font-mono);font-size:12px;font-weight:400;fill:var(--ink-1);text-anchor:middle;dominant-baseline:central}
@media (max-width:39.99em){
  .project .panel{margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter);border-inline:0;border-radius:0}
  .dg{overflow-x:auto;overscroll-behavior-x:contain}
  .diagram-v{min-width:20rem}
}
/* ---------- filas (trayectoria, contacto) ---------- */
.sub{font-size:var(--step-3);font-weight:800;margin-top:var(--space-l);margin-bottom:var(--space-s)}
.rows{list-style:none;padding:0;margin:0}
.rows li{display:grid;gap:.25rem var(--space-l);padding:var(--space-m) var(--space-s);margin-inline:calc(-1 * var(--space-s));border-top:1px solid var(--line-1);border-radius:var(--r-sm);transition:background-color var(--dur-1) var(--ease)}
.rows li:last-child{border-bottom:1px solid var(--line-1)}
@media (hover:hover){.rows li:hover{background:var(--surface-2)}.rows li:hover .k{color:var(--ink-muted)}}
.rows .t{font-size:var(--step-2);font-weight:600;letter-spacing:-.02em;line-height:1.1;color:var(--ink-strong)}
.rows .d{color:var(--ink-muted);max-width:62ch}
.rows .k{font-family:var(--font-mono);font-size:var(--step--1);letter-spacing:.02em;color:var(--ink-faint);line-height:1.6;padding-top:.35em}
.rows .mid{font-size:var(--step-1);font-weight:600;letter-spacing:-.01em;line-height:1.2;overflow-wrap:anywhere}
@media (min-width:60em){.rows li{grid-template-columns:12.5rem minmax(0,1fr)}.rows .d{grid-column:2}}
/* ---------- stack ---------- */
.stack-row{display:grid;gap:var(--space-s);padding-block:var(--space-m);border-top:1px solid var(--line-1)}
.stack-row:last-child{border-bottom:1px solid var(--line-1)}
.stack-row h3{font:400 var(--step--1)/1.6 var(--font-mono);letter-spacing:.02em;color:var(--ink-faint);padding-top:.5em}
.stack-row ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.3rem var(--space-m);font-size:var(--step-1);font-weight:600;letter-spacing:-.01em;line-height:1.2;color:var(--ink-strong)}
.stack-row li{display:inline-flex;align-items:center;gap:.4em}
.stk-logo{width:20px;height:20px;flex:none}
@media (min-width:60em){.stack-row{grid-template-columns:12.5rem minmax(0,1fr)}}
/* ---------- sobre mí ---------- */
.about{display:grid;gap:var(--space-l)}
.about .text{display:grid;gap:var(--space-m);max-width:62ch;align-content:start}
.portrait{aspect-ratio:4/5;max-width:28rem;overflow:hidden;border-radius:var(--r-md);background:var(--surface-1)}
.portrait picture{display:block;height:100%}
.portrait img{width:100%;height:100%;object-fit:cover;filter:grayscale(1)}
@media (min-width:60em){.about{grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:var(--space-xl);align-items:start}}
/* ---------- contacto ---------- */
.email-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-s) var(--space-l);margin-bottom:var(--space-l)}
.email{position:relative;display:inline-block;font-size:var(--email);font-weight:800;letter-spacing:-.045em;line-height:1;color:var(--ink-strong);text-decoration:none;overflow-wrap:anywhere;padding-bottom:.08em}
.email::after{content:"";position:absolute;left:0;right:0;bottom:0;height:.06em;background:var(--accent);transform:scaleX(0);transform-origin:right;transition:transform var(--dur-3) var(--ease)}
@media (hover:hover){.email:hover{color:var(--ink-strong)}.email:hover::after{transform:scaleX(1);transform-origin:left}}
.email:focus-visible::after{transform:scaleX(1);transform-origin:left}
.copy{font-size:var(--step-0);font-weight:500;color:var(--accent-text)}
.contact-grid{display:grid;gap:var(--space-l)}
@media (min-width:60em){.contact-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--space-xl)}}
/* ---------- cursor (sólo html.motion-ok.fine) ---------- */
.cursor,.cursor-ring{display:none;position:fixed;top:0;left:0;z-index:var(--z-cursor);pointer-events:none;border-radius:50%;will-change:transform}
html.motion-ok.fine .cursor{display:block}
html.motion-ok.fine .cursor-ring{display:grid}
html.motion-ok.fine .cursor.is-hidden,html.motion-ok.fine .cursor-ring.is-hidden{display:none}
html.motion-ok.fine,html.motion-ok.fine a,html.motion-ok.fine button{cursor:none}
.cursor{width:8px;height:8px;margin:-4px 0 0 -4px;background:var(--accent)}
.cursor-ring{width:36px;height:36px;margin:-18px 0 0 -18px;border:1px solid var(--accent-text);place-items:center;font:500 .55rem/1 var(--font-body);color:var(--on-accent);transition:background-color .2s var(--ease),border-color .2s var(--ease)}
.cursor-ring span{display:none}
.cursor-ring.is-copy{background:var(--accent);border-color:var(--accent)}
.cursor-ring.is-copy span{display:block}
/* ---------- preloader (sólo html.js.pre:not(.reduce)) ---------- */
.preloader{display:none;position:fixed;inset:0;z-index:var(--z-pre);grid-template-rows:1fr auto;align-items:end;padding:var(--gutter);background:var(--surface-0);color:var(--ink-strong)}
html.js.pre:not(.reduce) .preloader{display:grid}
.pre-n{font-size:18vw;font-weight:800;line-height:.86;letter-spacing:-.045em;font-variant-numeric:tabular-nums}
.pre-foot{display:grid;gap:var(--space-s);padding-top:var(--space-m)}
.pre-bar{height:1px;background:var(--ink-strong);transform-origin:left}
}
/* Lenis (antes vendor/lenis.css, MIT · LICENSE-lenis.txt); sin capa para conservar su prioridad */
html.lenis,html.lenis body{height:auto}
.lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip}
.lenis [data-lenis-prevent],.lenis [data-lenis-prevent-wheel],.lenis [data-lenis-prevent-touch],.lenis [data-lenis-prevent-vertical],.lenis [data-lenis-prevent-horizontal]{overscroll-behavior:contain}
.lenis.lenis-smooth iframe{pointer-events:none}
.lenis.lenis-autoToggle{transition-property:overflow;transition-duration:1ms;transition-behavior:allow-discrete}