/* /proyectos/ only: everything here is scoped to this page. Header, footer and control tokens come from style.css. */
.pf-page{position:relative}
nav a[aria-current=page],.footer-links a[aria-current=page]{color:var(--cyan)}
.pf-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* The sky: one canvas a little taller than the screen rides along the page (currents.js); the flying horneros share that canvas. */
.pf-sky{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.pf-sky canvas{position:absolute;left:0;top:0;width:100%;height:0;will-change:transform}
/* Opening: a large title on the left, the nest drawn in the open space to its right. */
.pf-hero{position:relative;padding:calc(var(--head) + clamp(72px,10vh,108px)) var(--pad-x) clamp(24px,4.5vh,52px)}
.pf-intro{position:relative;z-index:1;width:fit-content;max-width:100%}
.pf-eyebrow{width:fit-content;margin:0 0 clamp(14px,2.6vh,26px);font:var(--label)/1.4 monospace;letter-spacing:.34em;color:#9c7cf8}
.pf-title{margin:0;font-size:clamp(50px,min(7vw,11.4vh),136px);font-weight:500;line-height:.98;letter-spacing:-.055em}
.pf-line{display:block;width:fit-content}
.pf-accent{color:var(--cyan)}
.pf-lead{margin:clamp(16px,3vh,30px) 0 0;width:fit-content;font-size:clamp(16px,1.4vw,22px);font-weight:300;line-height:1.5;color:#c9cfdc}
/* Where currents.js draws each nest: the box the dome sits in, its base on the bottom edge. */
.pf-nest{position:absolute;aspect-ratio:2.4/1.75;pointer-events:none}
.pf-nest-hero{width:clamp(250px,26vw,440px);left:auto;right:clamp(8px,1vw,16px);top:calc(var(--head) + 30px);bottom:auto}
@keyframes pf-settle{from{opacity:.35;transform:translateY(.3em)}}
.pf-js:not(.pf-settled) :is(.pf-eyebrow,.pf-line,.pf-lead){animation:pf-settle 1s cubic-bezier(.2,.7,.2,1) backwards}
.pf-js:not(.pf-settled) .pf-line:nth-child(2){animation-delay:.08s}
.pf-js:not(.pf-settled) .pf-line:nth-child(3){animation-delay:.16s}
.pf-js:not(.pf-settled) .pf-lead{animation-delay:.26s}

/* Works: a twelve-column frame to align against, filled differently by every row. */
.pf-works{position:relative;padding:0 var(--pad-x)}
.pf-row{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2.2vw,32px);align-items:start}
.pf-row+.pf-row{margin-top:clamp(110px,13vw,200px)}
.pf-work{position:relative;min-width:0}
.pf-shots{position:relative}
/* Screens float on the shared sky: a thin bezel and a deep, soft shadow, no panel behind them. */
.pf-screen{position:relative;margin:0;padding:clamp(4px,.42vw,7px);border-radius:clamp(10px,1vw,15px);background:linear-gradient(155deg,#252d41,#0c111d 52%,#141b2d);border:1px solid #ffffff1f;box-shadow:0 60px 110px -50px #000,0 26px 50px -26px #000d}
.pf-phone{position:absolute;z-index:1;margin:0;padding:clamp(3px,.3vw,5px);border-radius:clamp(15px,1.7vw,26px);background:#0a0e19;border:1px solid #ffffff2b;box-shadow:0 34px 60px -24px #000,0 10px 24px -12px #000c}
.pf-screen img,.pf-screen .pf-pending{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top;border-radius:clamp(6px,.62vw,10px)}
.pf-phone img,.pf-phone .pf-pending{display:block;width:100%;height:auto;aspect-ratio:390/844;object-fit:cover;object-position:top;border-radius:clamp(12px,1.45vw,22px)}
/* A slot waiting for its screenshots keeps the size and framing of a real one. */
.pf-screen .pf-pending,.pf-phone .pf-pending{display:grid;place-content:center;gap:10px;padding:8%;text-align:center;font:var(--label)/1.5 monospace;letter-spacing:.18em;text-transform:uppercase;color:#a9b3c8;background:repeating-radial-gradient(ellipse at 112% 128%,transparent 0 26px,#8b5cf61c 27px,transparent 28.5px),repeating-radial-gradient(ellipse at -18% -30%,transparent 0 34px,#22d3ee14 35px,transparent 36.5px),radial-gradient(110% 90% at 75% 15%,#2b2152,transparent 62%),#090e1a}
.pf-pending small{display:block;font-size:.86em;letter-spacing:.12em;color:#66728c}
.pf-phone .pf-pending{gap:6px;padding:12%;font-size:8px;letter-spacing:.12em}
.pf-info{position:relative;z-index:1}
.pf-info>*{width:fit-content;max-width:100%}
.pf-num{margin:0 0 14px;font:var(--label)/1.4 monospace;letter-spacing:.22em;text-transform:uppercase;color:var(--cyan)}
.pf-name{margin:0;font-size:clamp(28px,2.7vw,44px);font-weight:500;line-height:1.04;letter-spacing:-.035em}
.pf-row-featured .pf-name,.pf-row-wide .pf-name{font-size:clamp(34px,3.5vw,58px)}
.pf-meta{margin:12px 0 0;font-size:14px;letter-spacing:.03em;color:#99a3b9}
.pf-desc{margin:12px 0 0;max-width:min(100%,29em)!important;font-size:clamp(14px,1.05vw,16px);line-height:1.6;color:#bcc4d5}
.pf-services{margin:12px 0 0;font:var(--label)/1.6 monospace;letter-spacing:.1em;text-transform:uppercase;color:#7f8aa3}
/* The screenshots and the name open the project; "Ver proyecto" says so. */
.pf-shots[href]{display:block}
.pf-name a{transition:color .3s}
.pf-name a:hover,.pf-work:has(.pf-shots:hover) .pf-name a{color:var(--cyan)}
.pf-open{display:flex;align-items:center;gap:9px;margin-top:20px;padding-bottom:7px;border-bottom:1px solid #22d3ee80;color:var(--cyan);font-size:14px;font-weight:500;letter-spacing:.04em;transition:gap .35s,border-color .35s}
.pf-open:hover,.pf-work:hover .pf-open{gap:14px;border-color:var(--cyan)}
.is-placeholder .pf-num,.is-placeholder .pf-name{color:#8792ab}

/* Entrance: a short rise as each project or screenshot reaches the screen. The copy is never hidden. */
.pf-screen,.pf-phone{transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.pf-js :is(.pf-work,.pf-piece) .pf-screen,.pf-js .pf-piece.pf-screen{opacity:0;translate:0 26px;transition:opacity .8s ease,translate 1s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.pf-js :is(.pf-work,.pf-piece) .pf-phone,.pf-js .pf-piece.pf-phone{opacity:0;translate:0 40px;transition:opacity .8s ease .14s,translate 1.15s cubic-bezier(.2,.7,.2,1) .14s,transform .7s cubic-bezier(.2,.7,.2,1)}
.pf-js :is(.pf-work,.pf-piece).is-in :is(.pf-screen,.pf-phone),.pf-js .pf-piece.is-in:is(.pf-screen,.pf-phone){opacity:1;translate:0 0}
@media(hover:hover){
 .pf-work:hover .pf-screen,.pf-work:focus-within .pf-screen{transform:translateY(-6px)}
 .pf-work:hover .pf-phone,.pf-work:focus-within .pf-phone{transform:translateY(-11px)}
}

/* Wide screens */
@media(min-width:1100px){
 /* The featured project starts below the introduction as its own content block. */
 .pf-row-featured{margin-top:clamp(36px,4vw,64px)}
 .pf-row-featured .pf-work,.pf-row-wide .pf-work{grid-column:1/-1;display:grid;grid-template-columns:subgrid;align-items:center}
 .pf-row-featured .pf-info{grid-column:1/4;grid-row:1;padding-right:13%}
 .pf-row-featured .pf-shots{grid-column:4/11;grid-row:1;position:relative;left:clamp(80px,6.5vw,100px)}
 .pf-row-featured .pf-phone{left:-6%;bottom:-8%;width:18%}
 /* 04 mirrors it at a larger scale: the screen leads from the left, the copy closes on the right. */
 .pf-row-wide .pf-shots{grid-column:1/9;grid-row:1}
 .pf-row-wide .pf-info{grid-column:10/13;grid-row:1}
 .pf-row-wide .pf-phone{right:-8%;bottom:-10%;width:16.5%}
 /* Pairs: two pieces of different size, offset in height. Three variants alternate down the page. */
 .pf-row-pair .pf-info{margin-top:clamp(36px,3.4vw,48px)}
 .pf-row-pair .pf-info>*:not(.pf-open){max-width:min(100%,32em)}
 .pf-row-pair .pf-phone{right:-4%;bottom:-13%;width:21%}
 .pf-row-pair .pf-work .pf-info{max-width:76%}
 .pf-row-a>:nth-child(1){grid-column:1/8}
 .pf-row-a>:nth-child(2){grid-column:9/13;margin-top:clamp(120px,13vw,210px)}
 .pf-row-b>:nth-child(1){grid-column:2/6;margin-top:clamp(10px,2vw,30px)}
 .pf-row-b>:nth-child(2){grid-column:7/13;margin-top:clamp(150px,16vw,260px)}
 .pf-row-b>.pf-work:nth-child(1) .pf-phone{right:auto;left:-7%}
 .pf-row-b>.pf-work:nth-child(1) .pf-info{margin-left:auto}
 .pf-row-c>:nth-child(1){grid-column:1/7;margin-top:clamp(110px,12vw,190px)}
 .pf-row-c>:nth-child(2){grid-column:8/12}
 .pf-row-solo>:nth-child(1){grid-column:3/10;margin-top:0}
}

/* Tablets and phones: one column, but every project keeps its own side, width and offset. The phone sits low on the
   bottom-right corner, where these screenshots show imagery rather than headlines. */
@media(max-width:1099px){
 .pf-title{font-size:clamp(32px,4.8vw,52px)}
 .pf-row{display:block}
 .pf-row+.pf-row,.pf-work+.pf-work{margin-top:clamp(84px,14vw,128px)}
 .pf-shots{width:88%}
 .pf-phone{bottom:-17%;width:22%;right:-3%}
 .pf-info{margin-top:clamp(56px,10vw,86px);max-width:72%}
 .pf-work[data-side=r] .pf-shots,.pf-work[data-side=r] .pf-info{margin-left:auto}
 .pf-row-featured .pf-shots,.pf-row-wide .pf-shots{width:100%}
 .pf-row-featured .pf-phone{bottom:-16%;width:23%}
 .pf-row-featured .pf-info{margin-left:12%}
}
@media(max-width:699px){
 /* The nest takes the band above the title, on the right, so the two never meet. */
 .pf-hero{padding-top:calc(var(--head) + 96px);padding-bottom:40px}
 .pf-title{font-size:clamp(26px,8vw,54px);line-height:1.05}
 .pf-lead{font-size:16px}
 .pf-nest-hero{width:min(46vw,200px);left:auto;right:8px;bottom:auto;top:calc(var(--head) - 28px)}
 .pf-row+.pf-row,.pf-work+.pf-work{margin-top:92px}
 .pf-shots{width:94%}
 .pf-phone{width:26%;bottom:-22%;right:-2%}
 .pf-info{margin-top:56px;max-width:74%}
 .pf-row-featured .pf-shots,.pf-row-wide .pf-shots{width:100%}
 .pf-row-featured .pf-phone{width:27%;bottom:-20%}
 .pf-row-featured .pf-info{margin-left:0;max-width:74%}
 .pf-name,.pf-row-featured .pf-name,.pf-row-wide .pf-name{font-size:clamp(30px,9vw,40px)}
 .pf-meta{font-size:13px}
 .pf-desc{font-size:15px}
}

/* A project's own view (/proyectos/#<id>): name and a small nest, the cover beside its facts, the story in two
   columns, then the gallery in the same offset rhythm as the list, and the way on to the next project. */
.pf [hidden]{display:none!important}
.pf-project{position:relative;padding:calc(var(--head) + clamp(16px,3.5vh,36px)) var(--pad-x) 0}
.pf-back{display:inline-flex;align-items:center;gap:10px;font:var(--label)/1.4 monospace;letter-spacing:.22em;text-transform:uppercase;color:#aab3c7;transition:color .25s,gap .25s}
.pf-back:hover{color:var(--cyan);gap:14px}
.pf-project-head{position:relative;margin:clamp(26px,5vh,52px) 0 clamp(40px,6vh,70px)}
.pf-project-head>:not(.pf-nest){position:relative;z-index:1;width:fit-content;max-width:100%}
.pf-project-name{margin:0;font-size:clamp(48px,min(7vw,12vh),124px);font-weight:500;line-height:.98;letter-spacing:-.05em;outline:none}
.pf-project-head .pf-meta{font-size:clamp(14px,1.2vw,17px)}
.pf-nest-project{width:clamp(210px,21vw,340px);right:6%;bottom:-6%}
.pf-project-intro{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2.2vw,32px);align-items:end}
.pf-project-intro .pf-shots{grid-column:1/10}
.pf-project-intro .pf-phone{right:-6%;bottom:-9%;width:17%}
.pf-facts{grid-column:11/13;display:grid;gap:26px;margin:0}
.pf-facts dt{margin-bottom:8px;font:var(--label)/1.4 monospace;letter-spacing:.22em;text-transform:uppercase;color:var(--cyan)}
.pf-facts dd{margin:0;font-size:15px;line-height:1.65;color:#c9cfdc}
.pf-project-story{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2.2vw,32px);margin-top:clamp(96px,10vw,150px)}
.pf-project-lead{grid-column:1/6;margin:0;font-size:clamp(22px,2vw,32px);line-height:1.35;letter-spacing:-.02em;font-weight:400}
.pf-project-body{grid-column:7/12}
.pf-project-body p{margin:0 0 1.1em;font-size:clamp(15px,1.1vw,17px);line-height:1.7;color:#bcc4d5}
.pf-gallery{margin-top:clamp(110px,12vw,190px)}
.pf-gallery .pf-row+.pf-row{margin-top:clamp(100px,11vw,170px)}
.pf-row-wide-shot>.pf-piece{grid-column:1/11}
.pf-row-wide-shot.is-right>.pf-piece{grid-column:3/13}
.pf-phone.pf-phone-solo{position:relative;z-index:auto}
.pf-row-phones{display:flex;justify-content:center;align-items:flex-start;gap:clamp(28px,5vw,80px)}
.pf-row-phones.is-right{justify-content:flex-end;padding-right:8%}
.pf-row-phones>.pf-phone{width:clamp(150px,17vw,260px)}
.pf-row-phones>.pf-phone:nth-child(2){margin-top:clamp(50px,7vw,110px)}
.pf-row-phones>.pf-phone:nth-child(3){margin-top:clamp(20px,3vw,40px)}
.pf-next{display:flex;justify-content:flex-end;margin-top:clamp(120px,13vw,200px)}
.pf-next a{display:grid;justify-items:end;gap:12px}
.pf-next strong{font-size:clamp(40px,5vw,84px);font-weight:500;line-height:1;letter-spacing:-.045em;transition:color .3s}
.pf-next .pf-num{margin:0}
.pf-next-arrow{font-size:clamp(26px,2.6vw,40px);color:var(--cyan);transition:translate .35s}
.pf-next a:hover strong{color:var(--cyan)}
.pf-next a:hover .pf-next-arrow{translate:8px 0}
@media(max-width:1099px){
 .pf-project-head{margin-top:clamp(120px,22vw,170px)}
 .pf-nest-project{width:min(44vw,220px);right:2%;bottom:auto;top:calc(-1 * clamp(130px,24vw,190px))}
 .pf-project-intro{display:block}
 .pf-project-intro .pf-shots{width:100%}
 .pf-project-intro .pf-phone{right:-2%;bottom:-18%;width:24%}
 .pf-facts{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin-top:clamp(64px,13vw,104px);max-width:72%}
 .pf-project-story{display:block;margin-top:clamp(56px,9vw,80px)}
 .pf-project-lead{font-size:clamp(21px,5.4vw,28px)}
 .pf-project-body{margin-top:28px;max-width:40em}
 .pf-gallery .pf-row>.pf-piece.pf-screen{width:92%}
 .pf-gallery .pf-row>.pf-piece.pf-screen:nth-child(2){margin:clamp(48px,9vw,72px) 0 0 auto}
 .pf-row-wide-shot.is-right>.pf-piece{margin-left:auto}
 .pf-row-phones,.pf-row-phones.is-right{justify-content:center;padding-right:0}
 .pf-row-phones>.pf-phone{width:min(40%,230px)}
 .pf-next{justify-content:flex-start}
 .pf-next a{justify-items:start}
}

/* Closing: the currents meet in a smaller nest beside the invitation. */
.pf-close{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2.2vw,32px);align-items:center;padding:clamp(150px,17vw,260px) var(--pad-x) clamp(110px,13vw,190px)}
.pf-nest-close{position:relative;grid-column:2/5;width:100%;max-width:300px;justify-self:center}
.pf-close-copy{position:relative;z-index:1;grid-column:6/12}
.pf-close h2{margin:0;font-size:clamp(40px,4.7vw,74px);font-weight:500;line-height:1.02;letter-spacing:-.045em}
.pf-close h2 span{color:var(--cyan)}
.pf-cta{display:inline-flex;align-items:center;gap:24px;margin-top:clamp(26px,3vw,38px);min-height:56px;padding:16px 22px;border-radius:var(--control-radius);background:var(--violet);color:#fff;font-family:var(--control-font);font-size:var(--control-primary-size);font-weight:500;line-height:1.4;letter-spacing:0;transition:background .2s}
.pf-cta:hover{background:#9b74f6}
@media(max-width:1099px){
 .pf-close{grid-template-columns:1fr;justify-items:start;padding-top:clamp(120px,18vw,170px)}
 .pf-nest-close{grid-column:1;width:min(46vw,250px);margin:0 0 28px 6%}
 .pf-close-copy{grid-column:1}
}

@media(prefers-reduced-motion:reduce){
 .pf-js .pf-work .pf-screen,.pf-js .pf-work .pf-phone{opacity:1;translate:none}
}

/* This page has flying birds between its nests; the footer needs no landing space. */
@media(max-width:900px){.pf-page footer{margin-top:0}}

/* Captured heroes keep their original motion without embedding entire sites. */
.pf-preview{position:relative;display:block;overflow:hidden;border-radius:clamp(6px,.62vw,10px)}
.pf-phone .pf-preview{border-radius:clamp(12px,1.45vw,22px)}
.pf-preview video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;opacity:0;border-radius:inherit;transition:opacity .25s}
.pf-preview.is-playing video{opacity:1}
@media(prefers-reduced-motion:reduce){.pf-preview video{display:none}}