/* Proyectos / sistemas de marca y experiencias web. No altera las páginas de servicios. */
.pfb-chapter { background:radial-gradient(ellipse at 15% 2%,#1b102f,transparent 45%),#09080c; }
.pfb-intro,.pfb-controls,.pfb-grid,.pfw-intro,.pfw-projects { width:min(1600px,100%); margin-inline:auto; }
.pfb-intro { display:flex; justify-content:space-between; gap:25px; align-items:center; border-top:1px solid #fff6e02e; padding:25px 0 18px; }
.pfb-intro>span:first-child { font:900 clamp(17px,2.2vw,31px)/1.5 var(--font-title); text-transform:uppercase; }
.pfb-intro>span:last-child { display:flex; align-items:center; gap:20px; color:#b9a7c7; font:500 9px/1.8 var(--font-body); letter-spacing:.08em; text-transform:uppercase; }
.pfb-intro i { color:#ffae00; font:400 20px/1 var(--font-body); }
.pfb-controls { display:flex; align-items:center; justify-content:space-between; gap:25px; margin-bottom:28px; }
.pfb-controls>p { margin:0; color:#a591b4; font:400 11px/1.8 var(--font-body); }
[data-pf-chapters-v2] [data-pf-chapter-motion] { display:inline-flex; gap:15px; align-items:center; flex:none; padding:10px 0; min-height:44px; background:none; border:0; color:#c6b5d3; font:500 9px/1.6 var(--font-body); cursor:pointer; }
[data-pf-chapters-v2] [data-pf-chapter-motion]>span { color:#ffae00; font-size:15px; }
[data-pf-chapters-v2] [data-pf-chapter-motion][hidden] { display:none; }
.pfb-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:57px 38px; }
.pfb-card { min-width:0; scroll-margin-top:25px; }
.pfb-card:nth-child(4n+2) { padding-top:65px; }
.pfb-board-link { display:block; }
.pfb-board { position:relative; height:clamp(330px,31vw,500px); min-width:0; overflow:hidden; border:1px solid #fff6e02c; background:var(--pfb-color,#151020); isolation:isolate; }
.pfb-board::before { content:""; position:absolute; inset:0; z-index:-1; background:var(--pfb-client-spectrum); opacity:.55; }
.pfb-board::after { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:linear-gradient(transparent 48%,#0001 49%,#0001 50%,transparent 51%),linear-gradient(90deg,transparent 48%,#0001 49%,#0001 50%,transparent 51%); background-size:38px 38px; }
.pfb-registration { position:absolute; z-index:3; color:#fff9; font:300 22px/1 var(--font-body); }
.pfb-registration--tl { left:13px; top:12px; }.pfb-registration--br { right:13px; bottom:13px; }
.pfb-board-heading { position:absolute; z-index:2; top:21px; left:42px; right:20px; color:#fff6e0d9; mix-blend-mode:difference; font:600 8px/1.6 var(--font-body); letter-spacing:.1em; text-transform:uppercase; }
.pfb-watermark { position:absolute; z-index:-1; bottom:15%; left:-5%; right:-5%; font:900 clamp(44px,7.5vw,110px)/.95 var(--font-title); letter-spacing:-.05em; text-transform:uppercase; color:#fff; opacity:.13; overflow-wrap:anywhere; }
.pfb-pieces { position:absolute; inset:48px 25px 52px; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); grid-template-rows:1fr 1fr; gap:12px; }
.pfb-piece { position:relative; min-width:0; min-height:0; border:1px solid #fff6e038; background:#121014; box-shadow:0 10px 25px #0003; transform-origin:center; }
.pfb-piece[data-surface=light] { background:#f5f3ee; }
.pfb-piece--1 { grid-row:1/3; transform:rotate(-3deg); z-index:1; }
.pfb-piece--2 { transform:rotate(4deg) translate(0,5px); z-index:2; }
.pfb-piece--3 { transform:rotate(-2deg) translate(-5px,0); z-index:2; }
.pfb-board[data-pieces="1"] .pfb-piece--1 { grid-column:1/3; }
.pfb-board[data-pieces="2"] .pfb-piece--2 { grid-row:1/3; }
.pfb-piece>img { display:block; width:100%; height:100%; object-fit:contain; padding:5px; }
.pfb-piece>span { position:absolute; left:5px; bottom:5px; max-width:calc(100% - 10px); padding:4px 5px; background:#07070acf; color:#fff6e0; font:500 6px/1.4 var(--font-body); letter-spacing:.08em; text-transform:uppercase; }
.pfb-open { position:absolute; z-index:3; bottom:14px; left:26px; right:40px; display:flex; align-items:center; justify-content:space-between; min-height:27px; color:#fff6e0; font:600 9px/1.6 var(--font-body); text-transform:uppercase; letter-spacing:.08em; text-shadow:0 1px 3px #0009; }
.pfb-open>b { font-size:23px; font-weight:400; }
.pfb-palette { display:flex; width:100%; height:12px; overflow:hidden; background:var(--pfb-color); }
.pfb-palette>i { display:block; flex:1; background:var(--pfb-swatch); }
.pfb-caption { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.85fr); gap:25px; padding:23px 0 18px; align-items:start; }
.pfb-caption>div>span { color:#a58db5; font:500 8px/1.6 var(--font-body); letter-spacing:.12em; text-transform:uppercase; }
.pfb-caption h3 { margin:11px 0 0; font:900 clamp(19px,2vw,29px)/1.25 var(--font-title); text-transform:uppercase; }
.pfb-caption>p { margin:1px 0 0; color:#b7a6c4; font:400 11px/1.85 var(--font-body); }
.pfb-project-link { display:flex; justify-content:space-between; align-items:center; gap:20px; width:100%; min-height:44px; border-top:1px solid #fff6e02b; color:#d7c7e2; font:500 9px/1.7 var(--font-body); }
.pfb-project-link>span { color:#ffae00; font-size:22px; }
.pfb-card:hover .pfb-board { border-color:#fff6e080; }
.pfb-card:hover .pfb-piece--1 { transform:rotate(-1deg) scale(1.025); }.pfb-card:hover .pfb-piece--2 { transform:rotate(1deg) translate(0,5px); }.pfb-card:hover .pfb-piece--3 { transform:rotate(0) translate(-5px,0); }
.pfb-piece { transition:transform .6s cubic-bezier(.2,.7,.2,1); }

.pfw-chapter { background:radial-gradient(ellipse at 90% 0,#100b2c,transparent 35%),#090a0f; }
.pfw-intro { display:flex; align-items:center; justify-content:space-between; gap:30px; border-top:1px solid #fff6e02b; padding:20px 0 30px; }
.pfw-intro>p { display:flex; align-items:center; gap:20px; margin:0; color:#b7aac5; font:400 11px/1.8 var(--font-body); }
.pfw-intro>p>span { font:600 25px/1.4 var(--font-body); color:#bda2ff; }
.pfw-project { display:grid; grid-template-columns:minmax(0,.67fr) minmax(0,1.33fr); gap:clamp(35px,6vw,100px); align-items:center; padding:50px 0 65px; border-top:1px solid #fff6e02b; scroll-margin-top:25px; }
.pfw-project:nth-child(even) { grid-template-columns:minmax(0,1.33fr) minmax(0,.67fr); }.pfw-project:nth-child(even) .pfw-copy { order:2; }.pfw-project:nth-child(even) .pfw-experience { order:1; }
.pfw-copy { min-width:0; }.pfw-copy>.pf-eyebrow { display:block; margin-bottom:18px; color:#a991bb; }.pfw-copy>h3 { margin:0 0 22px; font:900 clamp(25px,3vw,44px)/1.2 var(--font-title); text-transform:uppercase; }
.pfw-copy>.pf-body { font-size:13px; line-height:1.85; }.pfw-status { display:block; width:fit-content; margin-top:22px; padding:7px 10px; max-width:100%; border:1px solid #776286; color:#bea7ce; font:400 8px/1.7 var(--font-body); letter-spacing:.07em; text-transform:uppercase; }.pfw-copy>.pf-text-link { margin-top:20px; }
.pfw-experience { min-width:0; position:relative; }
.pfw-experience::before { content:""; position:absolute; inset:-15px; pointer-events:none; z-index:0; border:1px solid #fff6e012; background-image:linear-gradient(90deg,#fff6e009 1px,transparent 1px),linear-gradient(#fff6e009 1px,transparent 1px); background-size:24px 24px; }
.pfw-guide { position:relative; display:flex; justify-content:space-between; align-items:center; gap:15px; color:#9c8bab; font:400 7px/1.6 var(--font-body); letter-spacing:.07em; text-transform:uppercase; }.pfw-guide--top { padding:0 0 12px; }.pfw-guide--top>i { height:1px; flex:1; max-width:90px; background:#736081; }.pfw-guide--bottom { padding-top:12px; }.pfw-guide--bottom>span:last-child { color:#bda6ce; }
.pfw-browser { display:block; position:relative; width:100%; border:1px solid #70617b; border-radius:8px 8px 0 0; overflow:hidden; background:#111016; box-shadow:0 20px 70px #0006; isolation:isolate; }
.pfw-browser:hover { border-color:#cfb8ff; }.pfw-browser-bar { display:flex; align-items:center; justify-content:space-between; min-height:37px; gap:20px; padding:9px 13px; border-bottom:1px solid #fff6e024; color:#c8b8d4; font:400 8px/1.6 var(--font-body); }
.pfw-browser-dots { display:flex; gap:6px; flex:none; }.pfw-browser-dots>i { width:5px; height:5px; border:1px solid #ae99bc; border-radius:50%; }.pfw-browser-bar>span:last-child { font-size:18px; color:#ffae00; }.pfw-address { min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }.pfw-address>span { color:#665571; margin-inline:5px; }
.pfw-screen { position:relative; aspect-ratio:1.72; overflow:hidden; background:var(--pfw-color,#130c22); }
.pfw-site-image { position:relative; display:block; width:100%; height:100%; object-fit:contain; object-position:center top; }
.pfw-wireframe { position:absolute; z-index:2; inset:0; padding:7%; display:grid; grid-template-columns:1.5fr 1fr; grid-template-rows:.15fr 1fr .35fr; gap:8%; pointer-events:none; opacity:0; background:#0d0a15; }
.pfw-wireframe>span { border:1px solid #a179ed; background:linear-gradient(130deg,#5b2cb61a,#6b41c00a); }.pfw-wireframe>span:first-child { grid-column:1/3; }.pfw-wireframe>span:nth-child(2) { border-color:#705ca0; }.pfw-wireframe>span:nth-child(3) { background:linear-gradient(140deg,transparent 49%,#a179ed55 49.5%,#a179ed55 50%,transparent 50.5%),linear-gradient(40deg,transparent 49%,#a179ed55 49.5%,#a179ed55 50%,transparent 50.5%); }.pfw-wireframe>span:nth-child(6) { display:none; }
.pfw-cursor { position:absolute; z-index:3; left:65%; top:67%; display:flex; align-items:flex-end; gap:6px; pointer-events:none; filter:drop-shadow(0 2px 5px #0008); }.pfw-cursor>svg { width:21px; height:26px; fill:#fff6e0; stroke:#3d1d68; stroke-width:1.2; }.pfw-cursor>i { background:#6a00ff; color:#fff6e0; padding:4px 7px; font:400 6px/1.5 var(--font-body); font-style:normal; letter-spacing:.03em; }
.pfw-screen-scan { position:absolute; z-index:2; top:0; bottom:0; width:10%; left:-15%; background:linear-gradient(90deg,transparent,#ffffff0b,transparent); pointer-events:none; }
.pfw-browser-bottom { display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:34px; padding:8px 13px; color:#a996b7; font:400 7px/1.6 var(--font-body); letter-spacing:.05em; text-transform:uppercase; }.pfw-browser-bottom>span:last-child { color:#dfcfeb; }.pfw-browser-bottom b { margin-left:10px; color:#ffae00; font-size:17px; font-weight:400; }
.pfw-render-line { height:2px; overflow:hidden; background:#2b1c3c; position:relative; }.pfw-render-line>span { position:absolute; inset:0; background:var(--pf-spectrum); }

/* Motion is opt-in after JS observes the section. Original images stay intact. */
[data-pf-chapters-ready] .pfb-card[data-pf-inview=true] .pfb-piece--1 { animation:pfbAssembleOne 1.1s cubic-bezier(.2,.7,.2,1) both; }
[data-pf-chapters-ready] .pfb-card[data-pf-inview=true] .pfb-piece--2 { animation:pfbAssembleTwo 1.2s .12s cubic-bezier(.2,.7,.2,1) both; }
[data-pf-chapters-ready] .pfb-card[data-pf-inview=true] .pfb-piece--3 { animation:pfbAssembleThree 1.3s .22s cubic-bezier(.2,.7,.2,1) both; }
[data-pf-chapters-ready] .pfb-card[data-pf-inview=true] .pfb-watermark { animation:pfbWordDrift 16s ease-in-out infinite alternate; }
[data-pf-chapters-ready] .pfb-card[data-pf-inview=true] .pfb-palette>i { animation:pfbSwatchIn .8s .3s ease both; }
[data-pf-chapters-ready] .pfw-project[data-pf-inview=true] .pfw-wireframe { animation:pfwBuild 1.9s ease both; }
[data-pf-chapters-ready] .pfw-project[data-pf-inview=true] .pfw-cursor { animation:pfwExplore 11s 1.7s cubic-bezier(.25,.4,.3,1) infinite; }
[data-pf-chapters-ready] .pfw-project[data-pf-inview=true] .pfw-screen-scan { animation:pfwScan 9s 2s linear infinite; }
[data-pf-chapters-ready] .pfw-project[data-pf-inview=true] .pfw-render-line>span { animation:pfwRender 2s cubic-bezier(.2,.7,.2,1) both; }
[data-pf-chapters-v2][data-pf-chapters-paused=true] *,[data-pf-chapters-v2][data-pf-chapters-paused=true] *::before,[data-pf-chapters-v2][data-pf-chapters-paused=true] *::after { animation-play-state:paused!important; }
[data-pf-chapters-v2][data-pf-chapters-paused=true] .pfw-wireframe { opacity:0!important; }
@keyframes pfbAssembleOne { from { opacity:.2; transform:translate(-50px,35px) rotate(-13deg) scale(.9); } to { opacity:1; transform:translate(0,0) rotate(-3deg) scale(1); } }
@keyframes pfbAssembleTwo { from { opacity:.2; transform:translate(55px,-20px) rotate(14deg) scale(.9); } to { opacity:1; transform:translate(0,5px) rotate(4deg) scale(1); } }
@keyframes pfbAssembleThree { from { opacity:.2; transform:translate(45px,55px) rotate(-15deg) scale(.9); } to { opacity:1; transform:translate(-5px,0) rotate(-2deg) scale(1); } }
@keyframes pfbWordDrift { from { transform:translateX(0); } to { transform:translateX(9%); } }
@keyframes pfbSwatchIn { from { transform:scaleY(.05); } to { transform:scaleY(1); } }
@keyframes pfwBuild { 0%,34% { opacity:1; } 100% { opacity:0; } }
@keyframes pfwExplore { 0%,15%,100% { transform:translate(0,0); } 37%,52% { transform:translate(-90%,-85%); } 72%,85% { transform:translate(18%,-35%); } }
@keyframes pfwScan { from { transform:translateX(0); } to { transform:translateX(1300%); } }
@keyframes pfwRender { from { transform:scaleX(0); transform-origin:left; } to { transform:scaleX(1); transform-origin:left; } }
@media(max-width:1050px) { .pfb-grid { gap:43px 25px; }.pfb-board { height:345px; }.pfb-pieces { inset:47px 18px 49px; gap:9px; }.pfb-caption { grid-template-columns:1fr; gap:12px; }.pfb-caption h3 { font-size:24px; }.pfb-intro>span:last-child { gap:12px; font-size:8px; }.pfw-project,.pfw-project:nth-child(even) { gap:34px; grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr); }.pfw-project:nth-child(even) { grid-template-columns:minmax(0,1.28fr) minmax(0,.72fr); }.pfw-copy>h3 { font-size:30px; }.pfw-copy>.pf-body { font-size:12px; }.pfw-guide { font-size:6px; gap:8px; } }
@media(max-width:760px) { .pfb-intro { align-items:flex-start; flex-direction:column; gap:13px; padding-top:22px; }.pfb-intro>span:first-child { font-size:24px; }.pfb-controls { align-items:flex-start; gap:15px; }.pfb-controls>p { font-size:10px; max-width:280px; }.pfb-board { height:320px; }.pfb-pieces { inset:45px 15px 47px; gap:7px; }.pfb-board-heading { left:35px; font-size:6px; }.pfb-piece>span { font-size:5px; }.pfb-open { left:19px; font-size:8px; }.pfb-card:nth-child(4n+2) { padding-top:35px; }.pfb-caption h3 { font-size:22px; }.pfb-caption>p { font-size:11px; }.pfw-intro { align-items:flex-start; gap:20px; }.pfw-intro>p { align-items:flex-start; gap:12px; font-size:10px; }.pfw-intro>p>span { font-size:22px; }.pfw-project,.pfw-project:nth-child(even) { grid-template-columns:1fr; gap:28px; padding:36px 0 50px; }.pfw-project:nth-child(even) .pfw-copy,.pfw-project:nth-child(even) .pfw-experience { order:initial; }.pfw-copy>h3 { font-size:33px; }.pfw-copy>.pf-body { font-size:13px; }.pfw-status { margin-top:16px; }.pfw-copy>.pf-text-link { margin-top:12px; }.pfw-guide { font-size:7px; }.pfw-experience::before { inset:-9px; } }
@media(max-width:540px) { .pfb-grid { grid-template-columns:1fr; gap:38px; }.pfb-card:nth-child(4n+2) { padding-top:0; }.pfb-board { height:clamp(330px,100vw,420px); }.pfb-pieces { inset:48px 24px 53px; gap:10px; }.pfb-board-heading { left:40px; font-size:7px; }.pfb-watermark { font-size:75px; }.pfb-piece>span { font-size:6px; }.pfb-caption { gap:12px; padding-top:20px; }.pfb-caption h3 { font-size:27px; }.pfb-controls { flex-direction:column; gap:2px; margin-bottom:20px; }.pfb-controls>p { max-width:none; }.pfb-intro>span:first-child { font-size:23px; }.pfb-intro>span:last-child { font-size:8px; gap:17px; }.pfw-intro { flex-direction:column; gap:5px; padding-bottom:22px; }.pfw-browser-bar { gap:12px; min-height:32px; padding:7px 10px; font-size:7px; }.pfw-address { max-width:210px; }.pfw-browser-bottom { padding:7px 10px; font-size:6px; }.pfw-guide { font-size:6px; }.pfw-cursor>svg { width:16px; height:21px; }.pfw-cursor>i { font-size:5px; padding:3px 5px; }.pfw-copy>h3 { font-size:31px; } }
@media(prefers-reduced-motion:reduce) { [data-pf-chapters-v2] *,[data-pf-chapters-v2] *::before,[data-pf-chapters-v2] *::after { animation:none!important; transition:none!important; }.pfw-wireframe { display:none; }.pfw-screen-scan { display:none; }.pfb-piece--1 { transform:rotate(-3deg); }.pfb-piece--2 { transform:rotate(4deg) translate(0,5px); }.pfb-piece--3 { transform:rotate(-2deg) translate(-5px,0); } }