@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;550;600;650;700&display=swap');
:root{--paper:#ffffff;--ink:#20211f;--muted:#777970;--line:#e6e6e1;--font:Helvetica,'Helvetica Neue',Arial,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.5 var(--font)}button,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}button{font:inherit;cursor:pointer;color:inherit;background:none;border:0}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:2px solid #256aa1;outline-offset:5px}button:disabled{opacity:.4;cursor:default}img{max-width:100%;display:block}button:hover,a:hover{color:#000}.skip{position:fixed;top:-100px;left:20px;z-index:100;background:white;padding:12px}.skip:focus{top:10px}[hidden]{display:none!important}
.topbar{height:82px;padding:0 4.7%;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:30;background:rgba(255,255,255,.35);backdrop-filter:blur(10px);gap:18px}.brand{display:flex;align-items:center;gap:12px;white-space:nowrap;font-size:21px;letter-spacing:-.8px}.brand-flower{width:43px;height:47px;object-fit:contain;animation:hello-flower 1.6s cubic-bezier(.22,.61,.36,1);transition:transform 1s cubic-bezier(.22,.61,.36,1)}body:has(.mood:hover) .brand-flower{transform:rotate(150deg)}.brand:hover .brand-flower{transform:rotate(360deg)}@keyframes hello-flower{from{transform:rotate(-180deg);opacity:.2}to{transform:rotate(0);opacity:1}}.topbar nav{display:flex;gap:5px;align-items:center}.topbar nav a{background:#f0f0ed;border-radius:30px;padding:8px 14px;font-size:13px;transition:background .2s}.topbar nav a:hover{background:#e6e6e0}.topbar nav a>span{font-size:10px;margin-left:5px;color:#74766a}.topbar nav .contact-link{background:#22241f;color:white;padding:8px 18px}.topbar nav .mini-flower{color:#d9ef80;font-size:13px;margin-left:9px}
.hero{position:relative;height:calc(100svh - 82px);min-height:660px;max-height:1050px;isolation:isolate;overflow:hidden;transition:background .5s;background:#ffffff}.hero-title{position:absolute;left:50%;top:45%;transform:translate(-50%,-50%);width:700px;text-align:center;pointer-events:none;z-index:2}.hero-title h1{font-size:34px;line-height:1.2;font-weight:450;letter-spacing:-1.3px;margin:0}.hero-title p{font-size:13px;font-weight:400;margin:12px 0 0 190px;color:#6c6f65}.canvas-stage{position:absolute;inset:0 0 80px;overflow:hidden;cursor:grab;touch-action:pan-y}.canvas-stage.panning{cursor:grabbing}.scene{width:1440px;height:720px;position:absolute;transform-origin:0 0;will-change:transform}.folders,.moods{display:contents}.piece{position:absolute;user-select:none;touch-action:none}.piece.dragging{z-index:12;cursor:grabbing}.folder{width:116px;display:flex;align-items:center;flex-direction:column;text-align:center;gap:8px;padding:0;cursor:pointer}.folder-icon{width:62px;height:51px;display:block;filter:drop-shadow(0 3px 3px #11649218);transition:transform .25s}.folder-icon svg{width:100%;height:100%;overflow:visible}.folder>span:last-child{font-size:12px;line-height:1.3}.folder small{display:block;font-size:10px;color:#8b8d84;margin-top:4px}.folder:hover .folder-icon{transform:translateY(-7px) rotate(-5deg)}.mood{width:var(--w);height:var(--h);padding:0;overflow:visible;text-align:left;background:#efefeb;transition:transform .3s,box-shadow .3s;cursor:pointer}.mood:hover{transform:scale(1.075) rotate(-2deg);box-shadow:0 12px 30px #171b1a16;z-index:10}.mood>span:last-child{position:absolute;left:0;top:calc(100% + 7px);font-size:10px;letter-spacing:.015em;color:#797d72;opacity:0;transition:opacity .2s;white-space:nowrap}.mood:hover>span:last-child,.mood:focus-visible>span:last-child{opacity:1}.image-tile img{width:100%;height:100%;object-fit:cover}.image-tile{overflow:visible}.flower-detail img{object-position:70% 20%;object-fit:cover}.chrome-detail img{object-position:68% 50%}.type-tile{padding:13px 16px;display:flex;flex-direction:column;justify-content:center}.blue-tile{background:#467480;color:#e6eeb4}.tile-type{font:400 25px/.91 var(--font);letter-spacing:-.7px}.tiny-label{font-size:8px;letter-spacing:.1em;line-height:1.3;display:block;margin-bottom:8px}.paper-tile{background:#f0e8d8;color:#433c31}.serif-type{font:italic 30px/.9 var(--font);letter-spacing:-1px}.black-tile{background:#23251f;padding:17px}.black-tile img{filter:invert(1);opacity:.9;mix-blend-mode:screen;width:100%;height:100%;object-fit:contain}.red-tile{background:#a94537;color:#f7e8d5}.red-tile .serif-type{font-size:36px}.green-tile{background:#dce5a8;color:#3b4929}.green-tile .serif-type{font-size:28px}.hero-bottom{position:absolute;bottom:39px;left:4.7%;right:4.7%;display:flex;justify-content:space-between;align-items:center;z-index:6}.view-switch{display:flex;gap:2px;background:#ededeb;padding:4px;border-radius:30px;position:absolute;left:50%;transform:translateX(-50%);box-shadow:0 3px 14px #00000004}.view-switch button{border-radius:30px;font-size:12px;padding:7px 17px}.view-switch button[aria-pressed=true]{background:#22241f;color:#fff;box-shadow:0 2px 6px #0002}.background-picker{display:flex;align-items:center;gap:6px}.background-picker button{font-size:11px;display:flex;gap:6px;align-items:center;padding:5px 7px;border-radius:20px;background:#ffffff70}.background-picker button[aria-pressed=true]{background:#eaeae5}.swatch{width:17px;height:17px;border-radius:50%;border:1px solid #d0d4c9}.swatch.white{background:#fff}.swatch.landscape{background:linear-gradient(160deg,#a4bdc9 45%,#8b9a57 46%,#526444)}.reset{font-size:11px;color:#888a80;padding:8px}.reset span{font-size:17px;margin-left:5px}.hero-hint{position:absolute;bottom:11px;left:4.7%;font-size:10px;color:#9b9c95}.hero.nature{background-image:linear-gradient(#ffffff16,#ffffff08),url('assets/mountain-meadow.png');background-position:center;background-size:cover}.hero.nature .moods{display:none}.hero.nature .hero-title{background:#ffffff73;backdrop-filter:blur(20px);border:1px solid #ffffff7a;border-radius:22px;padding:24px;width:610px;box-shadow:0 12px 35px #283b4710}.hero.nature .hero-title p{margin-left:0;color:#37412f}.hero.nature .folder{padding:14px 8px;border-radius:20px;background:#ffffff73;backdrop-filter:blur(18px);border:1px solid #ffffff80;width:130px}.hero.nature .folder small{color:#55664a}.hero.nature .hero-hint{color:#243b22}.hero.nature .reset{color:#243b22}
.hero.index-mode{min-height:660px;height:auto;padding:40px 6% 110px;max-height:none}.index-mode .hero-title{position:relative;left:auto;top:auto;transform:none;text-align:left;width:auto;pointer-events:auto;margin:0 auto 32px;max-width:1210px}.index-mode .hero-title h1{font-size:30px}.index-mode .hero-title p{margin:9px 0 0}.index-mode .canvas-stage{position:relative;inset:auto;overflow:visible;cursor:auto;touch-action:auto}.index-mode .scene{position:relative;width:100%;height:auto;max-width:1210px;margin:auto;transform:none!important;display:block}.index-mode .folders{display:flex;gap:24px;margin-bottom:34px}.index-mode .moods{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:28px 20px}.index-mode .piece{position:relative;left:auto!important;top:auto!important;translate:none!important;touch-action:auto}.index-mode .mood{width:100%;height:145px}.index-mode .folder{width:116px}.index-mode .mood>span:last-child{opacity:1;font-size:10px}.index-mode .hero-hint,.index-mode .reset{visibility:hidden}.index-mode.nature{min-height:660px}.index-mode.nature .hero-title{padding:22px;width:100%;max-width:1210px}.index-mode.nature .folders{margin-top:45px;gap:35px}.index-mode.nature .moods{display:none}
.section{padding:95px 6%;position:relative;isolation:isolate;overflow:hidden;scroll-margin-top:0}.section-heading{display:flex;align-items:center;justify-content:space-between;margin:0 0 35px;gap:20px}.section-heading h2{font-size:30px;font-weight:450;letter-spacing:-1px;margin:0}.section-heading>span{font-size:10px;letter-spacing:.1em;color:#93958a}.section-flower{position:absolute;width:950px;height:950px;object-fit:contain;right:-420px;top:10%;opacity:.035;z-index:-1;pointer-events:none;transform:rotate(28deg)}.projects-section{border-top:1px solid #eeeeea;background:#ffffff}.project-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:20px}.project-feature{display:flex;position:relative;flex-direction:column;justify-content:space-between;text-align:left;min-height:490px;padding:25px 30px;overflow:hidden;transition:transform .3s}.project-feature:hover{transform:translateY(-5px)}.project-a{background:#e6e8df;color:#434d3b}.project-b{background:#e9e1d8;color:#67564b}.project-overline{font-size:10px;letter-spacing:.13em;z-index:2}.project-art{position:relative;display:flex;flex:1;align-items:center;padding:40px 0;min-height:320px}.art-word{font:400 clamp(48px,5.8vw,95px)/.96 var(--font);letter-spacing:-5px;z-index:1}.art-word em{font-family:var(--font);font-weight:400}.project-a .project-art img{position:absolute;right:-40px;width:215px;opacity:.13;transform:rotate(40deg)}.project-b .art-word{font-size:clamp(40px,4.7vw,75px);letter-spacing:-3.5px}.project-caption{display:flex;align-items:center;justify-content:space-between;gap:15px;padding-top:22px;border-top:1px solid #545c4520;z-index:2}.project-caption strong{display:block;font-size:19px;font-weight:450;letter-spacing:-.4px}.project-caption small{display:block;font-size:12px;margin-top:3px;opacity:.65}.round-plus{font-size:23px;border-radius:50%;height:34px;width:34px;line-height:34px;text-align:center;background:#ffffff60}.project-art.has-image{padding:20px 0}.project-art.has-image img{position:relative;width:100%;height:310px;object-fit:cover;opacity:1;transform:none;right:auto}
.about-section{padding-bottom:115px;background:#ffffff}.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;min-height:720px}.portrait{position:relative;min-height:680px;background:#edeee8;overflow:hidden;padding:28px;display:flex;flex-direction:column;justify-content:space-between}.portrait-top{font-size:10px;letter-spacing:.1em;color:#8b9081;z-index:1}.portrait-flower{width:340px;opacity:.09;position:absolute;left:50%;top:44%;transform:translate(-50%,-50%) rotate(-10deg)}.portrait-placeholder{font:400 45px/1.1 var(--font);color:#747c6a;letter-spacing:-1.5px;z-index:1}.portrait-placeholder small{display:block;font:13px/1.5 var(--font);letter-spacing:0;margin-top:19px;color:#969d8c}.portrait.has-photo{padding:0}.portrait.has-photo img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;opacity:1;transform:none}.about-panels{display:grid;grid-template-rows:1fr 1fr 1fr;gap:18px}.about-panels article{padding:29px 35px;background:#f1f1ec}.panel-number{font-size:10px;letter-spacing:.1em;color:#8c8f82}.about-panels h3{font-size:24px;line-height:1.2;letter-spacing:-.8px;font-weight:450;margin:16px 0 12px}.about-panels p{font-size:16px;color:#818579;margin:0;line-height:1.65;max-width:460px}.inline-link{padding:12px 0 0;font-size:13px;border-bottom:1px solid #a6ad96;margin-top:4px}.inline-link span{margin-left:18px}.about-section>.section-flower{right:-150px;top:30%;width:1100px;height:1100px;opacity:.028}.contact-section{padding-top:90px;padding-bottom:36px;background:#ffffff}.contact-eyebrow{font-size:10px;letter-spacing:.12em;color:#858e78}.contact-main{display:flex;align-items:center;justify-content:space-between;gap:50px;padding:28px 0 95px}.contact-main h2{font:400 clamp(70px,9vw,135px)/1.1 var(--font);letter-spacing:-7px;margin:0}.contact-main h2>span{font:400 50px/1 var(--font);margin-left:24px;vertical-align:middle;color:#758061}.contact-links{display:flex;flex-direction:column;min-width:230px}.contact-links button,.contact-links a{display:flex;justify-content:space-between;padding:15px 0;text-align:left;border-bottom:1px solid #cbd0c1;font-size:16px;gap:65px}.contact-links button:hover,.contact-links a:hover{color:#647847}.footer-bottom{display:flex;justify-content:space-between;gap:20px;border-top:1px solid #d8dccc;padding-top:24px;font-size:12px;color:#869077}.contact-section>.section-flower{top:-90%;right:4%;opacity:.04}
dialog{position:fixed;border:1px solid #d5d8cc;border-radius:15px;padding:0;background:#ffffff;color:var(--ink);width:min(880px,calc(100vw - 36px));max-height:calc(100dvh - 45px);box-shadow:0 25px 100px #252c2125;overflow:auto}dialog::backdrop{background:#34372a25;backdrop-filter:blur(12px)}.dialog-bar{position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;padding:10px 18px;background:#f0f1ebeF;backdrop-filter:blur(15px);border-bottom:1px solid #e2e4d9;z-index:2;font-size:11px;letter-spacing:.06em}.dialog-bar button{width:30px;height:30px;background:#e5e8dd;border-radius:50%;font-size:14px}#dialog-content{padding:38px 44px 45px}.detail-kicker{font-size:11px;letter-spacing:.1em;color:#8b907f;text-transform:uppercase;margin:0 0 12px}.detail-title{font:450 clamp(35px,5vw,60px)/1.08 var(--font);letter-spacing:-2px;margin:0 0 20px}.detail-summary{font-size:18px;line-height:1.6;max-width:650px;color:#7d8471}.case-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;padding:22px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:28px 0}.case-meta span{display:block;color:#8c9382;font-size:10px;letter-spacing:.07em;text-transform:uppercase;margin-bottom:5px}.case-section{display:grid;grid-template-columns:130px 1fr;gap:25px;padding:23px 0;border-bottom:1px solid var(--line)}.case-section h3{font-size:16px;margin:0}.case-section p{margin:0;color:#7c8371;font-size:16px}.case-visual{margin:28px 0;min-height:210px;background:#e9ece0;display:flex;justify-content:center;align-items:center;text-align:center;font:400 34px/1.15 var(--font);padding:32px}.case-visual img{width:100%;height:auto}.case-visual.has-image{padding:0;background:none}.case-visual small{display:block;font:10px/1.5 var(--font);letter-spacing:.1em;margin-bottom:12px}.case-actions{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:30px}.pill{display:inline-block;padding:11px 20px;background:#2c3327;color:white!important;border-radius:30px;text-decoration:none;font-size:14px}.pill.light{background:#e9ebdf;color:#4a5440!important}.empty-note{border:1px dashed #c9cfbc;border-radius:8px;padding:26px;margin:28px 0;color:#838b77;font-size:16px}.sample-label{font-size:11px;color:#848c78;background:#ecefe3;border-radius:20px;padding:5px 10px;display:inline-block}.mood-preview{display:flex;align-items:center;justify-content:center;min-height:290px;max-height:480px;background:#efefe9;margin-bottom:28px;overflow:hidden}.mood-preview img{max-height:480px;width:100%;object-fit:contain}.mood-preview .mood{position:relative;left:auto!important;top:auto!important;translate:none!important;transform:scale(1.8);pointer-events:none}.mood-preview .mood>span:last-child{display:none}.experiment-list{display:grid;gap:15px}.experiment-list article{padding:20px;background:#edf0e5}.experiment-list h3{margin:0 0 8px;font-size:20px}.experiment-list p{color:#78856b}.external-link{display:inline-block;border-bottom:1px solid #99a58a;padding:5px 0}
@media(max-width:1000px){.section{padding:75px 5%}.hero-title h1{font-size:29px}.hero-title p{font-size:12px}.project-feature{padding:22px;min-height:430px}.project-art{min-height:270px}.about-panels article{padding:25px}.portrait-placeholder{font-size:38px}.contact-main h2{letter-spacing:-4px}.contact-main h2>span{font-size:35px;margin-left:10px}.contact-links{min-width:185px}}
@media(max-width:700px){html{scroll-padding-top:75px}.topbar{height:70px;padding:0 18px;gap:12px}.brand{font-size:17px;gap:5px;letter-spacing:-.5px}.brand-flower{width:30px;height:35px}.topbar nav{gap:3px}.topbar nav a{font-size:11px;padding:7px 9px}.topbar nav .contact-link{padding:7px 10px}.topbar nav a>span{display:none}.hero{height:auto;min-height:0;max-height:none;padding:48px 24px 115px}.hero-title,.index-mode .hero-title{position:relative;left:auto;top:auto;transform:none;text-align:left;width:100%;margin:0 0 35px}.hero-title h1,.index-mode .hero-title h1{font-size:30px;max-width:320px;letter-spacing:-1.1px}.hero-title p,.index-mode .hero-title p{font-size:11px;margin:13px 0 0;max-width:300px}.canvas-stage,.index-mode .canvas-stage{position:relative;inset:auto;overflow:visible;touch-action:pan-y;cursor:auto}.scene,.index-mode .scene{width:100%;height:auto;position:relative;transform:none!important;display:block}.folders,.index-mode .folders{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin-bottom:35px}.piece,.index-mode .piece{position:relative;left:auto!important;top:auto!important;translate:none!important;touch-action:pan-y}.folder,.index-mode .folder{width:100%;gap:8px}.folder-icon{width:45px;height:38px}.folder>span:last-child{font-size:9px;max-width:72px}.folder small{display:none}.moods,.index-mode .moods{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px 12px}.mood,.index-mode .mood{width:100%;height:110px}.mood:nth-child(3n+2){margin-top:17px}.mood>span:last-child,.index-mode .mood>span:last-child{display:none}.type-tile{padding:10px}.tile-type{font-size:19px}.serif-type{font-size:22px}.tiny-label{font-size:7px}.red-tile .serif-type{font-size:25px}.green-tile .serif-type{font-size:23px}.black-tile{padding:15px}.hero-bottom{left:24px;right:24px;bottom:35px}.view-switch{display:none}.reset,.hero-hint{display:none}.background-picker button{font-size:12px}.hero.nature{min-height:670px}.hero.nature .hero-title,.index-mode.nature .hero-title{width:100%;margin-top:35px;padding:23px 20px;border-radius:18px}.hero.nature .hero-title h1{font-size:28px}.hero.nature .folders,.index-mode.nature .folders{grid-template-columns:repeat(2,1fr);gap:18px;max-width:280px;margin:45px auto}.hero.nature .folder{width:100%;padding:18px 10px}.hero.nature .folder>span:last-child{max-width:none;font-size:11px}.hero.nature .folder-icon{width:53px;height:43px}.hero.index-mode{padding:48px 24px 115px;min-height:0}.section{padding:60px 24px}.section-heading{margin-bottom:25px}.section-heading h2{font-size:27px}.section-heading>span{display:none}.project-grid{grid-template-columns:1fr;gap:18px}.project-feature{min-height:360px;padding:22px}.project-art{min-height:230px}.art-word{font-size:62px;letter-spacing:-3px}.project-b .art-word{font-size:46px;letter-spacing:-2px}.project-caption strong{font-size:18px}.project-caption small{font-size:11px}.project-a .project-art img{width:160px;right:-30px}.about-grid{grid-template-columns:1fr;gap:20px;min-height:0}.portrait{min-height:440px}.portrait-placeholder{font-size:38px}.portrait-flower{width:245px}.about-panels{grid-template-rows:none;gap:13px}.about-panels article{padding:27px}.about-panels h3{font-size:23px}.about-panels p{font-size:16px}.contact-main{display:block;padding:27px 0 50px}.contact-main h2{font-size:66px;letter-spacing:-4px}.contact-main h2>span{font-size:31px}.contact-links{margin-top:35px}.footer-bottom{flex-wrap:wrap;font-size:11px;gap:12px}.footer-bottom>span:nth-child(2){display:none}.footer-bottom>a{margin-left:auto}.contact-section{padding-bottom:80px}.section-flower{width:750px;right:-500px}.contact-section>.section-flower{top:-20%;right:-90%;width:900px}dialog{width:calc(100vw - 20px);max-height:calc(100dvh - 24px)}#dialog-content{padding:28px 23px}.detail-title{font-size:35px;letter-spacing:-1.5px}.detail-summary{font-size:17px}.case-meta{font-size:14px;gap:10px}.case-section{grid-template-columns:1fr;gap:10px}.case-actions{flex-wrap:wrap}.case-visual{font-size:28px}.mood-preview{min-height:230px;max-height:360px}.mood-preview .mood{width:150px;height:130px;transform:scale(1.3)}.mood-preview img{max-height:360px}.mood-preview .tile-type{font-size:28px}.mood-preview .serif-type{font-size:33px}}
@media(max-width:360px){.topbar{padding:0 12px;gap:5px}.brand{font-size:15px}.brand-flower{width:25px}.topbar nav a{padding:7px}.topbar nav .contact-link{padding:7px}.hero,.hero.index-mode{padding-left:18px;padding-right:18px}.mood,.index-mode .mood{height:98px}.hero-title h1{font-size:27px}.contact-main h2{font-size:57px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}

/* Revisión 03: fondo blanco, cursores contextuales y carrusel vertical. */
.section-flower,.portrait-flower{display:none}
#portfolio-cursor{position:fixed;left:0;top:0;z-index:90;pointer-events:none;display:none;max-width:calc(100vw - 24px)}
#portfolio-cursor>span{display:block;font-size:12px;line-height:1.3;white-space:nowrap;color:#42483c;padding:7px 10px;border-radius:20px;background:#ffffffb8;backdrop-filter:blur(7px)}
#portfolio-cursor>img{display:none;width:48px;height:48px;object-fit:contain}
#portfolio-cursor.is-visible{display:block}
#portfolio-cursor.is-project>span{display:none}
#portfolio-cursor.is-project>img{display:block}
@media(hover:hover) and (pointer:fine){body.project-cursor-active .project-feature,body.project-cursor-active .project-feature *{cursor:none}}
.about-grid{min-height:0;align-items:start;--about-height:clamp(440px,68vh,640px)}
.portrait{height:var(--about-height);min-height:0}
.about-carousel{min-width:0}
.about-panels{height:calc(var(--about-height) - 46px);display:block;overflow-y:auto;scroll-snap-type:y proximity;scrollbar-width:thin;scrollbar-color:#bfc3b8 transparent;scroll-behavior:smooth;padding-right:8px}
.about-panels article{min-height:72%;margin-bottom:18px;scroll-snap-align:start;display:flex;flex-direction:column;justify-content:center}
.about-panels article:last-child{min-height:100%;margin-bottom:0}
.about-panels .inline-link{align-self:flex-start}
.carousel-controls{height:46px;display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:11px;color:#7e8474}
.carousel-controls>div{display:flex;align-items:center;gap:9px}
.carousel-controls button{width:30px;height:30px;border:1px solid #e3e5df;border-radius:50%;font-size:18px}
.carousel-controls button:disabled{opacity:.3}
#about-position{font-size:11px;font-variant-numeric:tabular-nums}
@media(max-width:700px){.about-grid{--about-height:440px}.about-panels{height:420px}.about-panels article{min-height:85%;padding:25px}.about-panels article:last-child{min-height:100%}.carousel-controls>span{font-size:10px}}
@media(hover:none),(pointer:coarse){#portfolio-cursor{display:none!important}}
@media(prefers-reduced-motion:reduce){.about-panels{scroll-behavior:auto}}

/* Sistema compartido: tipografía, espaciado, superficies y estados. */
:root{--surface:#f5f5f5;--surface-hover:#ebebeb;--ink:#222;--muted:#666;--line:#dedede;--radius:12px;--control-radius:10px;--control-height:42px;--space:8px;--shadow:0 8px 28px #0000000c;--focus:#245c96}
.brand{font-family:'DM Sans',Arial,sans-serif}
input,select,textarea,button{font-family:var(--font)}
.art-word em{font-family:var(--font);font-style:normal}
.portrait-placeholder,.case-visual,.contact-main h2>span{font-family:var(--font)}
:where(h1,h2,h3,strong){font-weight:500}
.hero-title h1,.section-heading h2,.about-panels h3,.detail-title,.project-caption strong{font-weight:500}
:is(.ui-control,.topbar nav a,.pill,.inline-link,.external-link,.contact-links button,.contact-links a,.footer-bottom>a,.carousel-controls button,.dialog-bar button,.icon-control){display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--control-height);padding:10px 16px;border:1px solid var(--line);border-radius:var(--control-radius);background:var(--surface);color:var(--ink);font-size:14px;font-weight:400;line-height:1.25;text-decoration:none;transition:background .18s,border-color .18s,box-shadow .18s}
:is(.ui-control,.topbar nav a,.pill,.inline-link,.external-link,.contact-links button,.contact-links a,.footer-bottom>a,.carousel-controls button,.dialog-bar button,.icon-control):hover{background:var(--surface-hover);border-color:#c4c4c4;color:var(--ink)}
:is(button,a,summary,[tabindex]):focus-visible{outline:2px solid var(--focus);outline-offset:3px}
button:disabled{opacity:.4;cursor:not-allowed}
.topbar nav{gap:8px}.topbar nav .contact-link{background:var(--surface);color:var(--ink);padding:10px 16px}.topbar nav .mini-flower{color:var(--muted)}
.pill,.pill.light{color:var(--ink)!important;background:var(--surface)}
.inline-link,.external-link{margin-top:16px}.inline-link span{margin-left:0}
.contact-links{gap:8px}.contact-links button,.contact-links a{justify-content:space-between;width:100%;gap:24px}.contact-links button:hover,.contact-links a:hover{color:var(--ink)}
.carousel-controls button,.dialog-bar button,.icon-control{width:42px;height:42px;padding:0;border-radius:var(--control-radius);font-size:20px;flex-shrink:0}
.carousel-controls{height:54px;font-size:12px}.about-panels{height:calc(var(--about-height) - 54px)}
:is(.project-feature,.portrait,.about-panels article,.experiment-list article,.empty-note,.case-visual,.mood-preview,.customize-panel,dialog){border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);color:var(--ink)}
.project-a,.project-b{background:var(--surface);color:var(--ink)}
.project-feature:hover{transform:translateY(-3px);border-color:#bcbcbc;box-shadow:var(--shadow)}
.project-caption{border-color:var(--line)}
.project-b .art-word,.art-word{font-size:clamp(42px,5vw,76px);letter-spacing:-.05em;line-height:1.05}
.round-plus{border:1px solid var(--line);background:white;border-radius:var(--control-radius)}
.about-panels article{padding:32px;margin-bottom:16px}.portrait{padding:32px}.portrait.has-photo{padding:0}
.mood{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}.mood img{border-radius:calc(var(--radius) - 1px)}
.folder{border:1px solid transparent;border-radius:var(--radius);padding:8px}.folder:hover{border-color:var(--line);background:#f5f5f5c9}
.hero.nature .folder,.hero.nature .hero-title{border-radius:var(--radius);border-color:var(--line);background:#ffffffa6}
:is(.about-panels p,.detail-summary,.case-section p,.portrait-placeholder,.empty-note,.footer-bottom,.experiment-list p,.project-caption small){color:var(--muted)}
:is(.section-heading>span,.project-overline,.portrait-top,.panel-number,.contact-eyebrow,.detail-kicker,.case-meta span){font-size:12px;letter-spacing:.06em;color:var(--muted)}
:is(.project-caption small,.folder>span:last-child,.sample-label){font-size:14px}
.folder small,.folder .mood>span:last-child{font-size:12px;color:var(--muted)}
.sample-label{background:var(--surface);color:var(--muted);border:1px solid var(--line);border-radius:var(--control-radius);padding:6px 10px}
dialog{background:#fff}.dialog-bar{background:#ffffffde;border-color:var(--line);font-size:12px}
#portfolio-cursor>span{border:1px solid var(--line);border-radius:var(--control-radius);font-family:var(--font);color:var(--ink)}
.hero-bottom{bottom:36px;justify-content:flex-start;pointer-events:none}.customize{pointer-events:auto;position:relative}.customize summary{cursor:pointer;list-style:none;user-select:none}.customize summary::-webkit-details-marker{display:none}.customize summary>span{font-size:18px;transition:transform .18s}.customize[open] summary>span{transform:rotate(45deg)}
.customize-panel{position:absolute;bottom:calc(100% + 12px);left:0;width:336px;padding:20px;background:#fffffff5;backdrop-filter:blur(18px);box-shadow:var(--shadow)}
.customize-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px}.customize-heading strong{font-size:18px;font-weight:500}
.customize fieldset{padding:0;margin:0 0 20px;border:0;min-width:0}.customize legend{font-size:14px;font-weight:500;padding:0;margin-bottom:4px}.customize fieldset p{font-size:14px;line-height:1.4;color:var(--muted);margin:0 0 12px}
.customize .view-switch,.customize .background-picker{position:static;transform:none;display:grid;grid-template-columns:1fr 1fr;gap:4px;border:1px solid var(--line);border-radius:var(--control-radius);background:var(--surface);padding:4px;box-shadow:none}
.customize :is(.view-switch,.background-picker) button{display:flex;align-items:center;justify-content:center;gap:8px;font:400 14px/1.25 var(--font);min-height:42px;padding:10px 12px;border:1px solid transparent;border-radius:7px;background:transparent;color:var(--ink);box-shadow:none}
.customize :is(.view-switch,.background-picker) button:hover:not(:disabled){background:var(--surface-hover)}
.customize :is(.view-switch,.background-picker) button[aria-pressed=true]{background:var(--ink);color:white;border-color:var(--ink)}
.customize .reset{display:flex;width:100%;visibility:visible;color:var(--ink);font-size:14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--control-radius)}
.mobile-view-note{display:none}.swatch{width:16px;height:16px;flex-shrink:0}.hero-hint{font-size:12px;color:var(--muted)}
@media(max-width:700px){.topbar{flex-wrap:wrap;height:auto;min-height:112px;padding:12px 18px;gap:10px}.brand{font-family:'DM Sans',Arial,sans-serif}.topbar nav{width:100%;gap:6px}.topbar nav a,.topbar nav .contact-link{flex:1;font-size:14px;min-height:40px;padding:8px 10px}.hero,.hero.index-mode{padding-bottom:116px}.hero-bottom{bottom:32px}.customize-panel{width:min(336px,calc(100vw - 48px));padding:16px}.mobile-view-note{display:block;color:var(--muted);font-size:12px;margin-top:8px;line-height:1.4}.folder>span:last-child{font-size:11px}.folder{padding:4px}.folder-icon{width:42px}.hero.nature .folder>span:last-child{font-size:12px}.project-b .art-word,.art-word{font-size:44px}.about-panels{height:420px}.about-panels article,.portrait{padding:24px}.carousel-controls>span{font-size:12px}.contact-main h2{font-size:62px}.footer-bottom{align-items:center}html{scroll-padding-top:125px}}
@media(prefers-reduced-motion:reduce){.customize summary>span{transition:none}}

/* Revisión 05: superficies planas y preferencias visibles. */
:root{--radius:0px;--control-radius:0px;--shadow:none}
.topbar nav a,.topbar nav .contact-link,.topbar nav a:hover,.topbar nav .contact-link:hover{border:0;background:transparent;box-shadow:none;color:var(--ink)}
.topbar nav a:hover{text-decoration:underline;text-underline-offset:5px}
:is(.project-feature,.portrait,.about-panels article,.experiment-list article,.empty-note,.case-visual,.mood-preview,dialog,.mood,.mood img,.folder,.folder:hover,.hero.nature .folder,.hero.nature .hero-title,.sample-label,.round-plus){border:0;border-radius:0;box-shadow:none}
.project-feature,.project-feature:hover,.project-feature:active{transform:none;transition:none;animation:none;box-shadow:none;background:var(--surface);color:var(--ink);border:0}
.project-feature *{transition:none;animation:none}
.hero,.hero.index-mode,.hero.nature,.hero.index-mode.nature{height:clamp(660px,calc(100svh - 82px),1050px);min-height:0;max-height:none;padding:0}
.hero.index-mode .hero-title{position:absolute;left:6%;top:35px;transform:none;width:88%;max-width:none;margin:0;padding:0;text-align:left}
.hero.index-mode.nature .hero-title{padding:20px;width:88%;margin:0}
.hero.index-mode .canvas-stage{position:absolute;inset:112px 6% 130px;overflow:auto;scrollbar-width:thin}
.hero.index-mode.nature .canvas-stage{top:140px}
.hero.index-mode .scene{width:100%;max-width:none;margin:0;height:auto;position:relative;transform:none!important}
.hero.index-mode .folders,.hero.index-mode.nature .folders{margin:0 0 24px;gap:24px}
.hero.index-mode .moods{gap:28px 20px}
.hero.index-mode .mood{height:110px}
.hero-bottom{left:6%;right:6%;bottom:32px;pointer-events:none;z-index:6}
.preferences{display:flex;align-items:center;justify-content:center;gap:32px;pointer-events:auto;margin:0 auto;background:#ffffffc9;padding:10px 20px;backdrop-filter:blur(10px)}
.preferences fieldset{border:0;padding:0;margin:0;display:flex;align-items:center;gap:12px;min-width:0;position:relative}
.preferences legend{float:left;padding:0;font-size:12px;color:var(--muted);line-height:42px}
.preferences .view-switch,.preferences .background-picker{display:flex;position:static;transform:none;border:0;border-radius:0;background:transparent;padding:0;gap:4px;box-shadow:none}
.preferences :is(.view-switch,.background-picker) button{display:block;border:0;border-radius:0;padding:10px 12px;min-height:42px;font:400 14px/1.25 var(--font);background:transparent;color:var(--muted);box-shadow:none}
.preferences :is(.view-switch,.background-picker) button[aria-pressed=true]{background:transparent;color:var(--ink);text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}
.preferences :is(.view-switch,.background-picker) button:hover:not(:disabled){color:var(--ink)}
.preferences .reset{display:block;visibility:visible;border:0;border-radius:0;background:transparent;color:var(--muted);font:400 12px/1.25 var(--font);padding:12px 8px;min-height:42px}
.preferences .reset:hover{color:var(--ink)}
.hero-hint{display:none}
.carryon-placeholder{grid-column:1/-1;position:relative;display:flex;flex-direction:column;justify-content:space-between;min-height:320px;aspect-ratio:16/7;max-height:620px;margin:0;padding:30px;background:var(--surface);border:0;border-radius:0}
.carryon-center{text-align:center}.carryon-center h3{font:400 clamp(40px,6vw,80px)/1.1 var(--font);letter-spacing:-.04em;margin:0 0 12px}.carryon-center p,.carryon-placeholder figcaption{font-size:14px;color:var(--muted);margin:0}
#portfolio-cursor>span{border:0;border-radius:0;background:none;backdrop-filter:none;box-shadow:none;padding:0;font:300 italic 13px/1.4 var(--font);color:#555}
@media(max-width:850px){.preferences{gap:16px;padding:8px 12px}.preferences fieldset{gap:6px}.preferences :is(.view-switch,.background-picker) button{padding:10px 8px}}
@media(max-width:700px){.hero,.hero.index-mode,.hero.nature,.hero.index-mode.nature{height:max(780px,calc(100svh - 112px));min-height:0;max-height:none;padding:0}.hero .hero-title,.hero.index-mode .hero-title,.hero.nature .hero-title,.hero.index-mode.nature .hero-title{position:absolute;left:24px;top:36px;width:calc(100% - 48px);margin:0;transform:none;padding:0}.hero.nature .hero-title,.hero.index-mode.nature .hero-title{padding:16px}.hero .canvas-stage,.hero.index-mode .canvas-stage,.hero.index-mode.nature .canvas-stage{position:absolute;inset:165px 24px 170px;overflow:auto}.hero .folders,.hero.index-mode .folders,.hero.nature .folders,.hero.index-mode.nature .folders{margin:0 0 28px}.hero .mood,.hero.index-mode .mood{height:100px}.hero-bottom{left:16px;right:16px;bottom:34px}.preferences{width:100%;display:grid;grid-template-columns:1fr;justify-items:center;gap:0;padding:4px 8px}.preferences fieldset{gap:12px}.preferences legend{width:40px}.preferences .reset{min-height:32px;padding:8px}.preferences .mobile-view-note{display:none}.carryon-placeholder{min-height:260px;aspect-ratio:4/3;padding:24px}.carryon-center h3{font-size:44px}}

/* Lienzo periódico: solo se mueve el conjunto mediante scroll. */
.canvas-stage,.canvas-stage.panning{cursor:default}
.piece,.folder,.mood{touch-action:pan-y}
.hero .mood,.hero .mood:hover,.hero .folder,.hero .folder:hover{transform:none;transition:none;animation:none;box-shadow:none;z-index:auto}
.hero .folder:hover{background:transparent}
.hero .folder-icon,.hero .folder:hover .folder-icon{transform:none;transition:none}
body:has(.mood:hover) .brand-flower{transform:none}
.index-mode [data-repeat]{display:none!important}
.canvas-exit{font-size:12px;line-height:42px;color:var(--ink);white-space:nowrap;text-decoration:underline;text-underline-offset:4px}
.hero-hint{display:block;left:0;right:0;text-align:center;bottom:8px;font-size:11px;pointer-events:none}
@media(max-width:700px){[data-repeat]{display:none!important}.hero-hint{display:none}.preferences{grid-template-columns:1fr 1fr}.preferences fieldset{grid-column:1/-1}.canvas-exit{line-height:32px}.hero.nature .folder:hover{background:#ffffffa6}}

/* Revisión 07: un único switch de fondo; la composición no cambia. */
.hero.nature{background-image:url('assets/landscape-flow.png');background-position:center;background-size:cover}
.hero.nature .moods{display:contents}
.hero.index-mode.nature .moods{display:grid}
.preferences{display:flex;width:auto;gap:0;padding:6px 14px;background:#ffffffb3}
.background-toggle{display:flex;align-items:center;gap:12px;min-height:44px;padding:0 4px;font:400 13px/1.4 var(--font);border:0;background:transparent}
.switch-track{display:block;position:relative;width:38px;height:22px;border-radius:20px;background:#b9b9b9}
.switch-track>span{position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:white}
.background-toggle[aria-checked=true] .switch-track{background:#20211f}
.background-toggle[aria-checked=true] .switch-track>span{left:19px}
.hero.nature .folder,.hero.nature .folder:hover{width:116px;padding:8px;background:#ffffffa6}
.hero.nature .hero-title{width:700px;padding:0;background:transparent;backdrop-filter:none;box-shadow:none}
@media(max-width:700px){.hero.nature .hero-title,.hero.index-mode.nature .hero-title{width:calc(100% - 48px);padding:0}.hero .canvas-stage,.hero.index-mode .canvas-stage,.hero.index-mode.nature .canvas-stage{bottom:100px}.preferences{display:flex;width:auto}.hero.nature .folder,.hero.nature .folder:hover{padding:4px}}

/* Revisión 08: composición inicial según la referencia de Mafer. */
@media(min-width:701px){
 .hero:not(.index-mode) .hero-title{top:calc(47.5% - 38px);left:50%;width:min(700px,70%)}
 .hero:not(.index-mode) .hero-title h1{font-size:clamp(26px,2.64vw,38px);letter-spacing:-1px}
 .hero:not(.index-mode) .folder-icon{width:74px;height:61px}
 .hero:not(.index-mode) .folder{gap:4px;padding:8px 0}
 .hero:not(.index-mode) .folder small{display:none}
 .hero:not(.index-mode) .folder>span:last-child{font-size:11px;white-space:nowrap}
}

/* Revisión 10 · detalles de interacción */
.preferences{border-radius:999px;padding:7px 18px;background:rgba(245,245,247,.85);box-shadow:0 4px 20px #0000000a;backdrop-filter:blur(16px)}
.background-toggle{border-radius:999px;gap:12px;min-height:42px}
.switch-track{width:44px;height:26px;background:#d1d1d6;transition:background .2s}
.switch-track>span{width:22px;height:22px;top:2px;left:2px;box-shadow:0 2px 4px #0003;transition:transform .2s}
.background-toggle[aria-checked=true] .switch-track{background:#34c759}
.background-toggle[aria-checked=true] .switch-track>span{left:2px;transform:translateX(18px)}
.contact-links button,.contact-links a,.contact-links button:hover,.contact-links a:hover{background:transparent;border:0;border-radius:0;box-shadow:none;justify-content:space-between;padding:12px 0;min-height:44px;text-align:left}
.contact-links button:hover,.contact-links a:hover{text-decoration:underline;text-underline-offset:5px}
.contact-links span{font-size:20px}
.logo-trail{position:fixed;left:0;top:0;width:38px;height:42px;object-fit:contain;pointer-events:none;z-index:49;opacity:0;will-change:transform,opacity}
body.contact-cursor-active #contacto,body.contact-cursor-active #contacto *{cursor:none!important}
@media(max-width:800px){.experiment-card{width:230px;margin-left:-115px}.experiment-card-1{--offset:-150px}.experiment-card-3{--offset:150px}.experiment-fan:hover .experiment-card-1,.experiment-fan:focus-within .experiment-card-1{--offset:-165px}.experiment-fan:hover .experiment-card-3,.experiment-fan:focus-within .experiment-card-3{--offset:165px}}
@media(max-width:600px){.ai-experiments{margin-top:65px}.experiment-fan{display:grid;grid-template-columns:1fr;gap:20px;height:auto;margin:30px 0 0}.experiment-card{position:relative;inset:auto;margin:0;width:100%;height:320px;transform:none!important}.experiment-card:hover,.experiment-card:focus-visible{transform:none}.logo-trail{display:none}}
@media(prefers-reduced-motion:reduce){.experiment-card,.switch-track,.switch-track>span{transition:none}.experiment-card:hover,.experiment-card:focus-visible{transform:translateX(var(--offset)) rotate(var(--angle))}.logo-trail{display:none}}

/* Revisión 12 · controles y páginas de proyecto */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
#inicio .folder,#inicio .folder:hover,#inicio .folder:focus-visible{background:transparent;backdrop-filter:none;border:0;box-shadow:none}
#inicio.nature .hero-title,#inicio.nature .folder,#inicio.nature .folder small,#inicio.nature .hero-hint{color:#fff;text-shadow:0 1px 5px #0009}
#portfolio-cursor.on-image>span{color:#fff;text-shadow:0 1px 5px #0009}
#inicio.nature{background-image:linear-gradient(#00000028,#00000028),url('assets/landscape-flow.png')}
.background-swatch{display:block;width:25px;height:25px;border-radius:50%;box-shadow:0 0 0 1px #0002}
.swatch-white{background:#fff}.swatch-image{background:url('assets/landscape-flow.png') center 70%/cover}
#contacto .contact-eyebrow{font-size:15px;letter-spacing:0;text-transform:none}
#contacto .contact-links{display:flex;flex-direction:column;gap:8px;min-width:180px;align-items:stretch}
#contacto .contact-links>button,#contacto .contact-links>a{display:flex;align-items:center;justify-content:space-between;gap:36px;width:100%;min-height:48px;padding:10px 0;border:0;border-radius:0;background:transparent;box-shadow:none;color:var(--ink);font:400 18px/1.4 var(--font);text-decoration:none;text-align:left;transition:none}
#contacto .contact-links>button:hover,#contacto .contact-links>a:hover{background:transparent;text-decoration:underline;text-underline-offset:6px}
#contacto .contact-links>button>span,#contacto .contact-links>a>span{font:400 20px/1 var(--font);margin:0;flex-shrink:0}
#contacto .footer-bottom>a{background:transparent;border:0;padding:10px 0;border-radius:0}
.project-caption{flex-wrap:wrap;align-items:flex-end}
.case-cta{display:inline-flex;align-items:center;gap:8px;min-height:44px;font:400 13px/1.4 var(--font);white-space:nowrap;text-decoration:none;text-underline-offset:4px}
.ai-experiments{margin-top:64px;padding:clamp(28px,8vw,110px);background:url('assets/landscape-flow.png') center/cover}
.experiments-panel{display:grid;grid-template-columns:1fr 1fr;background:#fff;min-height:410px}
.experiments-intro{padding:clamp(24px,4vw,55px);border-right:1px solid #dedede}
.experiments-intro h2{font-size:clamp(24px,2.4vw,36px);font-weight:400;line-height:1.15;letter-spacing:-.8px;margin:25px 0}
.experiments-intro p{font-size:15px;line-height:1.6;color:var(--muted);max-width:300px}
.experiments-mosaic{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,1fr);gap:20px;padding:42px;align-items:start}
.experiment-tile{padding:0;width:100%;aspect-ratio:1;background:#eee;border:0;border-radius:0}
.experiment-tile:nth-child(3){grid-column:2;grid-row:2}.experiment-tile:nth-child(4){grid-column:1;grid-row:3}
.experiment-tile .experiment-art{display:block;width:100%;height:100%;margin:0}
.experiment-tile img{width:100%;height:100%;object-fit:cover}
.case-page-main{max-width:1100px;margin:auto;padding:50px 6% 90px}.case-back,.case-next{display:inline-flex;align-items:center;min-height:44px;text-decoration:underline;text-underline-offset:5px}
.case-back{margin-bottom:45px}.case-page-footer{display:flex;justify-content:space-between;gap:30px;padding:30px 6%;border-top:1px solid var(--line)}
@media(max-width:700px){.experiments-panel{grid-template-columns:1fr}.experiments-intro{border-right:0;border-bottom:1px solid #dedede}.experiments-mosaic{padding:28px;gap:20px}.ai-experiments{padding:24px}.case-page-main{padding:28px 6% 60px}#contacto .contact-links{width:100%;min-width:0;max-width:320px}}

/* Revisión 13: una única superficie de escritorio, con cabecera superpuesta. */
.home-page{--header-height:82px}
.home-page>.topbar{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;border:0;margin-bottom:calc(-1 * var(--header-height))}
.home-page #inicio{height:calc(clamp(660px,calc(100svh - var(--header-height)),1050px) + var(--header-height))}
.home-page #inicio:not(.index-mode) .canvas-stage{top:var(--header-height)}
.home-page #inicio:not(.index-mode) .hero-title{top:calc(47.5% + 5px);width:min(760px,70%)}
.home-page #inicio .hero-title h1{text-wrap:balance}
#inicio .hero-bottom{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:24px;bottom:32px}
#inicio .hero-hint{position:static;display:block;margin:0;text-align:left;font-size:11px;line-height:1.5;max-width:330px;grid-column:1;pointer-events:none}
#inicio .preferences{grid-column:2;margin:0}
#inicio .folder .folder-icon{transition:transform .18s ease-out;transform-origin:50% 80%}
@media(hover:hover) and (pointer:fine){#inicio .folder:hover .folder-icon{transform:translateY(-5px) scale(1.06)}}
#inicio .folder:focus-visible .folder-icon{transform:translateY(-5px) scale(1.06)}
@media(max-width:700px){
 .home-page{--header-height:112px}
 .home-page #inicio{height:calc(max(780px,calc(100svh - var(--header-height))) + var(--header-height))}
 .home-page #inicio .hero-title,.home-page #inicio.index-mode .hero-title{top:calc(var(--header-height) + 36px)}
 .home-page #inicio .canvas-stage,.home-page #inicio.index-mode .canvas-stage{top:calc(var(--header-height) + 165px)}
 #inicio .hero-bottom{grid-template-columns:minmax(0,1fr) auto;gap:16px;bottom:24px}
 #inicio .hero-hint{font-size:10px;max-width:220px}
 #inicio .preferences{padding:7px 12px}
}
@media(prefers-reduced-motion:reduce){#inicio .folder .folder-icon{transition:none}#inicio .folder:hover .folder-icon,#inicio .folder:focus-visible .folder-icon{transform:none}}

/* Revisión 14 · selector segmentado y selección de carpetas */
#inicio .preferences{padding:0;border-radius:999px;background:transparent;box-shadow:none;backdrop-filter:none}
.ambience-control{display:flex;gap:4px;padding:6px;background:#ededf0;border-radius:999px}
.ambience-control button{display:flex;align-items:center;justify-content:center;gap:12px;min-height:48px;min-width:145px;padding:10px 20px;border:0;border-radius:999px;background:transparent;color:#171717;font:400 14px/1.3 var(--font)}
.ambience-control button[aria-pressed=true]{background:white;box-shadow:0 3px 8px #0000000c}
.ambience-control svg{width:21px;height:21px;fill:none;stroke:#40464f;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
#inicio .folder>span:last-child{border-radius:7px;padding:4px 7px;line-height:1.25}
#inicio .folder.is-selected>span:last-child,#inicio .folder:focus-visible>span:last-child{background:#0667db;color:#fff;text-shadow:none}
#inicio .folder.is-selected small,#inicio .folder:focus-visible small{color:#fff}
@media(hover:hover) and (pointer:fine){#inicio .folder:hover>span:last-child{background:#0667db;color:#fff;text-shadow:none}#inicio .folder:hover small{color:#fff}}
@media(max-width:700px){.ambience-control{padding:4px;gap:2px}.ambience-control button{min-width:0;min-height:44px;padding:8px 12px;gap:6px;font-size:12px}.ambience-control svg{width:18px;height:18px}}

/* Revisión 15 · jerarquía discreta y legibilidad */
.home-page>.topbar{background:rgba(255,255,255,.78);backdrop-filter:blur(20px) saturate(125%);-webkit-backdrop-filter:blur(20px) saturate(125%);box-shadow:0 1px 0 #20211f06;color:#20211f}
.home-page>.topbar nav a,.home-page>.topbar nav a:hover{color:#20211f}
#inicio .ambience-control{padding:3px;gap:2px;background:rgba(239,239,237,.9);border-radius:999px}
#inicio .ambience-control button{min-width:0;min-height:34px;padding:6px 12px;gap:7px;font:400 11px/1.3 var(--font);color:#5f605b}
#inicio .ambience-control button[aria-pressed=true]{color:#20211f;background:#fff;box-shadow:0 1px 3px #00000008}
#inicio .ambience-control svg{width:15px;height:15px;stroke:currentColor}
@media(pointer:coarse){#inicio .ambience-control button{min-height:44px}}
@supports not (backdrop-filter:blur(1px)){.home-page>.topbar{background:rgba(255,255,255,.94)}}

/* Revisión 16 · cápsula de ambiente, sin animar el contenido */
.home-page>.topbar{background:rgba(255,255,255,.15);backdrop-filter:blur(20px) saturate(125%);-webkit-backdrop-filter:blur(20px) saturate(125%)}
.home-page #inicio,.home-page #inicio.nature{background:#fff;background-image:none;transition:none}
.home-page #inicio::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(#00000028,#00000028),url('assets/landscape-flow.png') center/cover;opacity:0;transition:opacity 450ms ease-out}
.home-page #inicio.nature::before{opacity:1}
#inicio .landscape-switch{--capsule-w:232px;--capsule-h:72px;--knob:58px;--inset:7px;position:relative;isolation:isolate;overflow:hidden;display:block;width:var(--capsule-w);height:var(--capsule-h);padding:0;border:0;border-radius:999px;background:#eceeec;box-shadow:inset 0 1px 3px #20211f12,0 1px 0 #fff9;color:#242923;font:400 15px/1.2 var(--font);cursor:pointer;text-shadow:none;touch-action:manipulation}
#inicio .landscape-switch:focus-visible{outline:2px solid #256aa1;outline-offset:5px}
.capsule-scene{position:absolute;inset:0;background:linear-gradient(90deg,#e6eddfef 0%,#e6eddfb0 48%,#e6eddf00 100%),url('assets/landscape-flow.png') center 65%/cover;opacity:0;transform:translateY(7px) scale(1.06);transition:opacity 450ms ease-out,transform 480ms cubic-bezier(.2,.8,.25,1);pointer-events:none}
.capsule-hill{position:absolute;left:-10%;right:-10%;bottom:-19px;height:40px;border-radius:50% 50% 0 0;background:#7e987e2b;opacity:0;transform:translateY(12px);transition:opacity 450ms ease-out,transform 480ms ease-out;pointer-events:none}
.capsule-label{position:absolute;top:0;bottom:0;left:calc(var(--knob) + var(--inset) + 10px);right:14px;display:flex;align-items:center;justify-content:center;z-index:2;pointer-events:none}
.capsule-knob{position:absolute;left:var(--inset);top:var(--inset);width:var(--knob);height:var(--knob);z-index:3;transition:transform 460ms cubic-bezier(.22,.8,.3,1.025);pointer-events:none}
.capsule-knob>span{display:block;width:100%;height:100%;border-radius:50%;background:radial-gradient(circle at 34% 24%,#fff 0%,#fafbf8 50%,#e2e5df 100%);box-shadow:inset 0 1px 2px #fff,0 3px 7px #26322126,0 0 12px #fff7;transition:transform 140ms ease-out}
#inicio .landscape-switch:active .capsule-knob>span{transform:scale(.94,.97)}
.landscape-switch[aria-checked=true] .capsule-knob{transform:translateX(calc(var(--capsule-w) - var(--knob) - 2 * var(--inset)))}
.landscape-switch[aria-checked=true] .capsule-label{left:14px;right:calc(var(--knob) + var(--inset) + 10px)}
.landscape-switch[aria-checked=true] .capsule-scene,.landscape-switch[aria-checked=true] .capsule-hill{opacity:1;transform:translateY(0) scale(1)}
@media(max-width:700px){#inicio .landscape-switch{--capsule-w:176px;--capsule-h:56px;--knob:44px;--inset:6px;font-size:13px}#inicio .hero-bottom{gap:12px}}
@media(prefers-reduced-motion:reduce){.home-page #inicio::before,.capsule-scene,.capsule-hill,.capsule-knob,.capsule-knob>span{transition:none!important}#inicio .landscape-switch:active .capsule-knob>span{transform:none}.capsule-scene,.capsule-hill{transform:none}}
/* La etiqueta espera a que el círculo haya despejado su zona. */
.capsule-label{animation:capsule-label-lienzo 460ms ease-out}
.landscape-switch[aria-checked=true] .capsule-label{animation-name:capsule-label-paisaje}
@keyframes capsule-label-lienzo{0%,85%{opacity:0}100%{opacity:1}}
@keyframes capsule-label-paisaje{0%,85%{opacity:0}100%{opacity:1}}
@media(prefers-reduced-motion:reduce){.capsule-label{animation:none!important}}

/* Revisión 17 · controles secundarios equilibrados */
#inicio .landscape-switch{--capsule-w:196px;--capsule-h:56px;--knob:44px;--inset:6px;font-size:13px}
@media(max-width:700px){#inicio .landscape-switch{--capsule-w:160px;--capsule-h:48px;--knob:38px;--inset:5px;font-size:12px}}


/* Revisión 18 · controles de ambiente discretos */
#inicio .landscape-switch{--capsule-w:140px;--capsule-h:40px;--knob:30px;--inset:5px;font-size:11px;box-shadow:inset 0 1px 2px #20211f0c}
@media(pointer:coarse){#inicio .landscape-switch{--capsule-h:44px;--knob:32px;--inset:6px}}

/* Revisión 20 · cabecera integrada en el lienzo */
.home-page>.topbar{isolation:isolate;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;border:0}
.home-page>.topbar::before{content:"";position:absolute;inset:0 0 -24px;z-index:-1;pointer-events:none;background:rgba(255,255,255,.15);backdrop-filter:blur(20px) saturate(125%);-webkit-backdrop-filter:blur(20px) saturate(125%);mask-image:linear-gradient(#000 0%,#000 65%,transparent 100%);-webkit-mask-image:linear-gradient(#000 0%,#000 65%,transparent 100%);opacity:var(--glass-opacity,0)}

/* Revisión 21 · organización de secciones */
.carryon-section{padding-bottom:0}
.projects-section{border-top:0}
.editorial-photo{display:grid;place-items:center;margin:0;aspect-ratio:3826/2160;background:var(--surface);color:var(--muted);font-size:13px}
@media(max-width:700px){.carryon-section{padding-bottom:0}}

/* TENZ · portada del primer caso de estudio */
.project-feature.tenz-project{background:radial-gradient(ellipse at 85% 10%,#f6f8f1,transparent 70%),#e4ecdb;color:#3f5233}
.tenz-project .project-overline{display:flex;align-items:center;justify-content:space-between;gap:16px;color:#5e7150;font-size:10px}
.tenz-card-award{font-size:9px;letter-spacing:0;text-align:right;padding:6px 10px;border-radius:99px;background:#ffffff85;backdrop-filter:blur(10px);border:1px solid #ffffffb3}
.tenz-project .project-art{position:relative;flex-direction:column;justify-content:center;align-items:flex-start;gap:30px}
.tenz-card-word{font-size:clamp(70px,8vw,124px);letter-spacing:-.065em;line-height:.85}
.tenz-card-word small{display:block;font-size:clamp(18px,2vw,26px);letter-spacing:-.025em;line-height:1.3;margin-top:18px}
.tenz-card-manifesto{font-size:12px;letter-spacing:-.01em;color:#6e8062}
.tenz-project .project-caption{border-color:#c8d5bc}.tenz-project .project-caption strong{font-size:20px;letter-spacing:-.025em}.tenz-project .project-caption small{color:#637258;font-size:12px}.tenz-project .case-cta{font-size:12px}
@media(max-width:700px){.tenz-card-word{font-size:90px}.tenz-project .project-overline{font-size:9px}.tenz-card-award{font-size:8px}.tenz-project .project-art{min-height:250px}.tenz-project .project-caption{gap:18px}}

/* LUMIX · portada del segundo caso de estudio */
.project-feature.lumix-project{background:radial-gradient(ellipse at 85% 10%,#faf9f6,transparent 70%),#e7ebf6;color:#485474}
.lumix-project .project-overline{display:flex;align-items:center;justify-content:space-between;gap:16px;color:#606e8d;font-size:10px}
.lumix-card-research{font-size:9px;letter-spacing:0;text-align:right;padding:6px 10px;border-radius:99px;background:#ffffff85;backdrop-filter:blur(10px);border:1px solid #ffffffb3}
.lumix-project .project-art{isolation:isolate;flex-direction:column;justify-content:center;align-items:flex-start;gap:30px}
.lumix-card-word{font-size:clamp(68px,7.7vw,116px);letter-spacing:-.07em;line-height:.85;z-index:1}
.lumix-card-word small{display:block;font-size:clamp(18px,2vw,26px);letter-spacing:-.025em;line-height:1.3;margin-top:18px}
.lumix-card-manifesto{font-size:12px;letter-spacing:-.01em;color:#697999;z-index:1}
.lumix-card-orbit{position:absolute;width:290px;height:290px;right:-125px;top:15%;border:1px solid #ffffff8a;background:radial-gradient(circle at 25% 20%,#ffffff77,transparent 60%);border-radius:50%;box-shadow:0 0 0 30px #ffffff18,0 0 0 60px #ffffff14;z-index:-1;pointer-events:none}
.lumix-project .project-caption{border-color:#ccd4e5}.lumix-project .project-caption strong{font-size:20px;letter-spacing:-.025em}.lumix-project .project-caption small{color:#63718d;font-size:12px}.lumix-project .case-cta{font-size:12px}
@media(max-width:700px){.lumix-card-word{font-size:clamp(64px,23vw,90px)}.lumix-project .project-overline{font-size:9px}.lumix-card-research{font-size:8px}.lumix-project .project-art{min-height:250px}.lumix-project .project-caption{gap:18px}}

/* Revisión 24 · iconos de acción con tamaño y alineación consistentes. */
.action-icon{display:block;width:16px;height:16px;flex:0 0 16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.case-cta,.inline-link,.external-link{column-gap:8px}
#contacto .contact-links>button,#contacto .contact-links>a{justify-content:flex-start;gap:8px;width:fit-content}
.carousel-controls .action-icon,.dialog-bar .action-icon{width:18px;height:18px;flex-basis:18px}

/* Revisión 25 · invitaciones a explorar y conversar. */
.contact-title-link{display:inline-block;color:inherit;text-decoration:none;transition:color .2s ease}
.contact-title-link:focus-visible{color:#647847;border-radius:4px}
@media(hover:hover){
 .project-feature:hover .case-cta{text-decoration:underline}
 .contact-title-link:hover{color:#647847}
}
@media(prefers-reduced-motion:reduce){.contact-title-link{transition:none}}

/* Vídeo editorial previo a Experimentos. */
.editorial-photo{overflow:hidden}
.editorial-photo video{display:block;width:100%;height:100%;min-width:0;object-fit:contain;background:#111}

/* Pieza editorial integrada: controles secundarios de cristal. */
.editorial-photo{position:relative;background:#e5e9df}
.editorial-photo video{object-fit:contain;background:transparent}
.editorial-video-controls{position:absolute;right:20px;bottom:20px;display:flex;align-items:center;gap:8px}
.editorial-video-controls button{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:44px;padding:0 17px;border:1px solid #ffffff80;border-radius:999px;background:#ffffffe0;color:#30382a;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);font:400 12px/1 var(--font);cursor:pointer;transition:background .2s}
.editorial-video-controls button:hover{background:#fff}
.editorial-video-controls .editorial-playback{width:44px;padding:0;font-size:17px}
@media(max-width:700px){.editorial-video-controls{right:10px;bottom:10px;gap:6px}.editorial-video-controls button{font-size:11px;padding:0 12px}}

/* People Watching · a single editorial frame. */
.people-watching{max-width:1050px;margin:60px auto 0;padding:24px;border:0;border-radius:22px;background:var(--paper);scroll-margin-top:110px}
.people-watching-intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);grid-template-rows:auto 1fr;column-gap:40px;row-gap:12px;margin-bottom:24px;text-align:left;align-items:start}
.people-watching-intro .detail-kicker{grid-column:1;grid-row:1;display:block;margin:0;font-size:11px;letter-spacing:.06em}
.people-watching-intro h2{grid-column:1;grid-row:2;font:400 clamp(28px,3.2vw,42px)/1.12 var(--font);letter-spacing:-1.3px;margin:0}
.people-watching-description{grid-column:2;grid-row:1 / 3;max-width:620px;color:var(--muted);font-size:14px;line-height:1.55;padding-top:2px}
.people-watching-description p{margin:0 0 10px}
.people-watching-description p:last-child{margin-bottom:0}
.people-watching .editorial-photo{border-radius:12px}
.people-watching-credits{margin:12px 0 0;font-size:11px;line-height:1.5;color:var(--muted)}
@media(max-width:700px){
 .people-watching{margin-top:32px;padding:16px;border-radius:18px;scroll-margin-top:136px}
 .people-watching-intro{display:flex;flex-direction:column;gap:12px;margin-bottom:18px}
 .people-watching-intro h2{font-size:32px}
 .people-watching-description{font-size:14px;padding-top:0}
 .people-watching .editorial-photo{border-radius:8px}
 .people-watching-credits{font-size:10px;line-height:1.6}
}

/* About page and contact links */
.about-actions{display:flex;flex-wrap:wrap;gap:12px 24px;margin-top:16px}
.about-actions .inline-link,.about-story .inline-link{border:0;background:transparent;box-shadow:none;padding:8px 0;display:inline-flex;align-items:center;gap:8px;min-height:44px}
.about-actions .inline-link:hover,.about-story .inline-link:hover{color:#809ed2}
#inicio .hero-hint{visibility:visible;grid-column:3;grid-row:1;justify-self:end;display:flex;align-items:center;gap:12px;text-align:right}
#inicio .hero-hint .action-icon{flex-shrink:0}
#inicio .preferences{grid-row:1}
#inicio .landscape-switch{--capsule-w:120px}
.about-editorial{padding-top:160px}
.about-editorial h1{font-size:clamp(38px,5vw,64px);letter-spacing:-2px;line-height:1.1;font-weight:400;margin:0}
.about-editorial-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.about-editorial .portrait{position:sticky;top:110px;min-height:560px}
.about-story article{padding:0 0 48px;margin-bottom:40px;border-bottom:1px solid var(--line)}
.about-story h3{font-size:clamp(25px,2.5vw,34px);font-weight:450;line-height:1.2;letter-spacing:-.8px;margin:18px 0}
.about-story p{font-size:17px;line-height:1.7;color:var(--muted);margin:0;max-width:600px}
@media(max-width:700px){
 #inicio .hero-bottom{grid-template-columns:auto minmax(0,1fr);gap:16px}
 #inicio .preferences{grid-column:1;padding:0}
 #inicio .hero-hint{grid-column:2;max-width:220px}
 .about-editorial{padding-top:135px}
 .about-editorial-grid{grid-template-columns:1fr;gap:36px}
 .about-editorial .portrait{position:relative;top:auto;min-height:360px}
 .about-story article{padding-bottom:30px;margin-bottom:30px}
}

/* Separate canvas and page-scroll guidance. */
#inicio .hero-drag-hint{grid-column:1;justify-self:start;text-align:left;white-space:nowrap;max-width:none}
#inicio .hero-scroll-hint{grid-column:3;white-space:nowrap;max-width:none;gap:10px}
@media(max-width:700px){
 #inicio .hero-bottom{grid-template-columns:1fr 1fr;row-gap:14px}
 #inicio .hero-drag-hint{grid-column:1;grid-row:1}
 #inicio .preferences{grid-column:2;grid-row:1;justify-self:end}
 #inicio .hero-scroll-hint{grid-column:1/-1;grid-row:2;justify-self:end}
}

.portrait.has-photo img{object-position:50% 60%}

@media(min-width:701px){.portrait.has-photo{background:#f3f3f3}.portrait.has-photo img{object-fit:contain;object-position:center}}
/* Mobile: a small, decorative desktop composition instead of an interactive grid. */
@media(max-width:700px){
 .home-page #inicio.index-mode{height:max(640px,100svh);padding:0}
 .home-page #inicio.index-mode .canvas-stage{inset:calc(var(--header-height) + 22px) 20px 124px;overflow:hidden;pointer-events:none;touch-action:pan-y}
 .home-page #inicio.index-mode .scene{position:relative;width:100%;height:100%;display:block}
 .home-page #inicio.index-mode .folders,.home-page #inicio.index-mode .moods{display:contents}
 .home-page #inicio.index-mode .piece{position:absolute;pointer-events:none;transform:none!important;translate:none!important;padding:0;margin:0}
 .home-page #inicio.index-mode .folder{width:78px;gap:4px;background:none;border:0}
 .home-page #inicio.index-mode .folder-icon{width:38px;height:32px}
 .home-page #inicio.index-mode .folder>span:last-child{font-size:8px;line-height:1.2;white-space:nowrap}
 .home-page #inicio.index-mode .folder small,.home-page #inicio.index-mode .mood>span:last-child{display:none}
 .home-page #inicio.index-mode .mood{width:70px;height:48px}
 .home-page #inicio.index-mode .mood img{width:100%;height:100%;object-fit:contain}
 .home-page #inicio.index-mode .folder:nth-child(1){left:38%!important;top:5%!important}
 .home-page #inicio.index-mode .folder:nth-child(2){left:5%!important;top:76%!important}
 .home-page #inicio.index-mode .folder:nth-child(3){left:73%!important;top:61%!important}
 .home-page #inicio.index-mode .folder:nth-child(4),.home-page #inicio.index-mode .mood:nth-child(n+7){display:none}
 .home-page #inicio.index-mode .mood:nth-child(1){left:1%!important;top:12%!important}
 .home-page #inicio.index-mode .mood:nth-child(2){left:76%!important;top:3%!important;width:48px}
 .home-page #inicio.index-mode .mood:nth-child(3){left:68%!important;top:26%!important}
 .home-page #inicio.index-mode .mood:nth-child(4){left:8%!important;top:35%!important;width:48px}
 .home-page #inicio.index-mode .mood:nth-child(5){left:40%!important;top:76%!important;width:48px}
 .home-page #inicio.index-mode .mood:nth-child(6){left:72%!important;top:88%!important}
 .home-page #inicio.index-mode .hero-title{left:6%;top:49%;width:88%;padding:0;transform:translateY(-50%);text-align:center;background:none}
 .home-page #inicio.index-mode .hero-title h1{font-size:clamp(23px,6vw,30px);line-height:1.15;letter-spacing:-1px}
 #inicio .hero-bottom{grid-template-columns:1fr;justify-items:center;gap:14px;bottom:24px}
 #inicio .preferences{grid-column:1;grid-row:1;justify-self:center}
 #inicio .hero-scroll-hint{grid-column:1;grid-row:2;justify-self:center;white-space:normal;text-align:center;font-size:10px}
}

/* Portada de producto LUMIX en la landing. */
.lumix-project .project-art.lumix-cover-art{padding:22px 0;gap:0;justify-content:center}
.lumix-cover-art img{display:block;width:100%;height:auto;object-fit:contain;border-radius:12px}
/* La entrada a TENZ comparte la paleta del caso. */
.project-feature.tenz-project{background:#392327;color:#fff3b5}
.tenz-project .project-overline,.tenz-project .tenz-card-manifesto,.tenz-project .project-caption small{color:#eadbd7}
.tenz-project .tenz-card-award{background:#fff3b51a;border-color:#fff3b530;color:#fff3b5}
.tenz-project .project-caption{border-color:#ffffff25}

.tenz-project .project-art.tenz-cover-art{padding:22px 0;gap:0;justify-content:center}
.tenz-project .tenz-cover-art img{position:relative;display:block;right:auto;width:100%;height:auto;max-width:100%;object-fit:contain;opacity:1;transform:none;border-radius:12px}