/* A shared canvas keeps the three original transparent images in proportion. */
.hero-grid{display:grid;grid-template-columns:44% 56%;align-items:start;isolation:isolate}
.hero-copy{position:relative;z-index:2;min-width:0}
.hero-copy h1{max-width:690px;text-shadow:0 0 8px var(--fog),0 0 2px var(--fog)}
.hero-copy .lead{max-width:min(500px,76%)}
.hero-collage{position:relative;width:125%;margin-left:-25%;aspect-ratio:1.4;pointer-events:none;user-select:none}
.hero-collage__layer{position:absolute;display:block;aspect-ratio:2/3;transform:translate3d(var(--hero-mouse-x,0px),calc(var(--hero-offset,0px) + var(--hero-mouse-y,0px)),0)}
.hero-collage__entrance{display:block;width:100%;height:auto;opacity:1;transform:none}
img.hero-collage__entrance{aspect-ratio:2/3;object-fit:contain}
.hero-collage__layer--sketch{width:38%;left:0;top:10%;z-index:0}
.hero-collage__layer--wireframe{width:42%;left:22%;top:4%;z-index:1}
.hero-collage__layer--web{width:46%;left:54%;top:0;z-index:2}
/* Each note has an independent layout/rotation and its screen's parallax speed. */
.hero-note{position:absolute;z-index:3;pointer-events:none;transform:translate3d(var(--hero-mouse-x,0px),calc(var(--hero-offset,0px) + var(--hero-mouse-y,0px)),0)}
.hero-collage{margin-bottom:0}
.hero-note__art{display:block;width:100%;overflow:visible;transform:rotate(var(--note-angle,0deg)) scale(var(--note-scale,1))}
.hero-note--idea{left:7%;top:-1%;width:23%;--note-angle:-9deg}
.hero-note--estructura{left:31%;top:-2%;width:27%;--note-angle:-5deg}
.hero-note--final{left:65%;top:-5%;width:30%;--note-angle:5deg}
.hero-note--detalle{left:27%;top:84%;width:38%;--note-angle:-4deg}
.hero-note__arrow{stroke-dasharray:1;stroke-dashoffset:0}
html.hero-motion .hero-collage:not([data-complete]) .hero-note__text{clip-path:inset(0 100% 0 0)}
html.hero-motion .hero-collage:not([data-complete]) .hero-note__arrow{stroke-dashoffset:1}
html.hero-motion .hero-collage:not([data-initialized]) .hero-collage__entrance,
.hero-collage[data-loading] .hero-collage__entrance{opacity:0}
/* Budget the desktop opening against viewport height, including header and controls. */
@media(min-width:1101px){
 .hero{padding-top:104px;padding-bottom:76px;justify-content:center}
 .hero .eyebrow{margin-bottom:22px}
 .hero-grid{align-items:center}
 .hero-copy h1{font-size:clamp(32px,min(3.2vw,6svh),60px);line-height:1.12}
 .hero-copy .lead{font-size:clamp(16px,min(1.35vw,2.45svh),20px);line-height:1.45;margin:20px 0 22px;max-width:92%}
 .hero-collage{width:min(125%,calc((100svh - 300px)*1.4));margin-left:0;justify-self:end}
 .hero .section-bottom{margin-top:24px;padding-top:14px}
 .hero-experience strong{font-size:clamp(22px,2vw,30px)}
 .hero-experience span{font-size:14px}
}
@media(max-width:1100px){
 .hero-grid{grid-template-columns:minmax(0,1fr);gap:32px}
 .hero-collage{width:min(100%,800px);margin:0 auto}
 .hero-copy h1{text-shadow:none}
 .hero-copy .lead{max-width:600px}
}
@media(max-width:700px){
 .hero-grid{gap:28px}
 .hero-collage{margin-bottom:0}
 .hero-collage__layer{transform:none}
 .hero-note{display:none}
}
@media(prefers-reduced-motion:reduce){
 .hero-collage[data-loading] .hero-collage__entrance{opacity:1}
 .hero-collage__layer,.hero-note{transform:none}
 .hero-note__text{clip-path:none!important}
 .hero-note__arrow{stroke-dashoffset:0!important}
}