:root{color-scheme:dark;font-family:Arial,sans-serif;background:#0d0e10;color:#eee}*{box-sizing:border-box}body{margin:0}button,a{-webkit-tap-highlight-color:transparent;color:inherit;font:inherit}button{cursor:pointer;border:0;background:none}a{text-decoration:none}button:focus-visible,a:focus-visible{outline:1px solid white;outline-offset:7px}::selection{background:#eee;color:#111}#space{position:fixed;inset:0;width:100%;height:100%;pointer-events:none}header{position:fixed;top:28px;left:26px;right:32px;display:flex;justify-content:space-between;z-index:8;font-size:11px}header a{font-weight:bold}header button,footer,#motion-toggle,#close,#video-counter{font-size:10px;letter-spacing:.05em}main{height:850svh}.stage{height:100svh;position:sticky;top:0;overflow:hidden}.world{position:absolute;inset:0;perspective:950px;perspective-origin:50% 50%}#scene{position:absolute;inset:0;transform-style:preserve-3d}.panel{position:absolute;top:48%;left:50%;width:350px;height:280px;padding:0;transform-style:preserve-3d;will-change:transform}.surface{position:absolute;inset:0;box-shadow:0 14px 35px #0006;overflow:hidden;background:#111;transition:filter .3s;filter:brightness(.8)}.surface img{width:100%;height:100%;object-fit:cover}.panel:hover .surface,.panel:focus-visible .surface{filter:brightness(1.1)}.reflection{position:absolute;left:0;top:calc(100% + 15px);width:100%;height:100%;background-size:cover;background-position:center;transform:scaleY(-1);mask-image:linear-gradient(to top,#0009,transparent 85%);opacity:.22;pointer-events:none}#hover-title{position:absolute;z-index:4;top:15%;left:10%;width:80%;text-align:center;font-weight:400;font-size:clamp(24px,4vw,56px);letter-spacing:-.025em;opacity:0;filter:blur(5px);transition:opacity .35s,filter .35s;text-shadow:0 0 16px #fff8,0 0 50px #fff3;pointer-events:none}#hover-title.visible{opacity:1;filter:none}footer{position:absolute;bottom:30px;left:26px;right:32px;display:flex;justify-content:space-between;text-transform:uppercase}#motion-toggle{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);color:#a5a5a5;padding:6px}#index{position:fixed;inset:0;background:#101114f5;z-index:7;padding:100px max(25px,12vw);overflow:auto}#index button{display:block;font-size:clamp(22px,4vw,45px);padding:12px 0;text-align:left}dialog{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;border:0;padding:0;margin:0;background:var(--tint,#474747);color:white;overflow:hidden}dialog::backdrop{background:#111a}#close{position:absolute;right:32px;top:28px;z-index:3;padding:8px}.viewer-main{position:absolute;left:22%;top:15%;width:58%;height:68%;display:flex;align-items:center;justify-content:center}video{display:block;width:100%;height:100%;object-fit:contain;background:transparent}#thumbs{position:absolute;right:2.5%;top:20%;width:7%;height:62%;overflow-y:auto;scrollbar-width:thin}#thumbs button{width:100%;padding:5px;margin-bottom:8px;border:1px solid transparent}#thumbs button.active{border-color:#eee}#thumbs img{width:100%;height:56px;object-fit:cover;display:block}.video-caption{position:absolute;bottom:6%;left:26px;width:19%;overflow-wrap:anywhere}h1{font-size:13px;font-weight:400;line-height:1.5;margin:0 0 14px}.video-caption p{font-size:11px;line-height:1.5;color:#ddd}#video-counter{position:absolute;bottom:30px;right:32px}#video-error{font-size:14px;position:absolute;background:#222;padding:20px}.static main{height:auto}.static .stage{height:auto;min-height:100svh;padding:130px 25px 100px}.static .world,.static #scene{position:relative;perspective:none}.static #scene{display:grid;grid-template-columns:repeat(3,1fr);gap:35px}.static .panel{position:relative;top:auto;left:auto;width:100%;aspect-ratio:1.25;height:auto;transform:none!important;opacity:1!important;pointer-events:auto!important}.static .reflection{display:none}.static .panel::after{content:attr(aria-label);position:absolute;top:100%;left:0;font-size:11px;margin-top:8px}.static #hover-title{display:none}@media(max-width:650px){.panel{width:230px;height:290px}.viewer-main{left:5%;top:13%;width:90%;height:58%}#thumbs{display:flex;top:auto;bottom:15%;left:5%;width:90%;height:65px;overflow-x:auto;overflow-y:hidden}#thumbs button{width:75px;flex-shrink:0;margin:0 5px 0 0}#thumbs img{height:48px}.video-caption{left:5%;bottom:4%;width:75%}.video-caption p{margin:0}h1{font-size:11px;margin-bottom:5px}.static #scene{grid-template-columns:1fr 1fr;gap:45px 20px}footer{font-size:9px}#motion-toggle{bottom:55px;font-size:8px}}@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
/* Una única cámara y dos paredes paralelas con títulos sobre el mismo plano. */
.world{perspective-origin:50% 49%}.panel{top:49%;width:390px;height:290px;isolation:auto}.panel-title{position:absolute;bottom:calc(100% + 22px);left:0;width:100%;font-size:23px;font-weight:400;text-align:left;line-height:1.2;color:#fff;text-shadow:0 0 12px #fff3;transition:text-shadow .25s;transform:translateZ(.2px)}.panel:hover .panel-title,.panel:focus-visible .panel-title{text-shadow:0 0 12px #fff9,0 0 30px #fff5}.surface{filter:none;box-shadow:none;overflow:visible;-webkit-box-reflect:below 14px linear-gradient(transparent 15%,#0002 100%)}.panel:hover .surface,.panel:focus-visible .surface{filter:none}.surface video.preview{width:100%;height:100%;object-fit:cover;pointer-events:none;background:#111}#video-description{font-size:12px;line-height:1.65;color:#eee}.static .panel-title{font-size:15px;bottom:calc(100% + 8px)}.static .panel::after{display:none}.static .surface{-webkit-box-reflect:unset}.static #scene{gap:65px 35px}@media(max-width:650px){.panel{width:250px;height:280px}.panel-title{font-size:19px;bottom:calc(100% + 15px)}.video-caption{bottom:4%;width:80%}#video-description{font-size:10px;line-height:1.4;margin-top:5px}.viewer-main{height:53%}#thumbs{bottom:24%}.static #scene{gap:60px 20px}}
.panel-art{position:absolute;inset:0;display:block;transform-origin:center;overflow:visible;-webkit-box-reflect:below 13px linear-gradient(transparent 7%,#0001 30%,#0006 100%)}
.surface{-webkit-box-reflect:unset!important;transition:filter .45s cubic-bezier(.16,1,.3,1);filter:brightness(.78)!important}
.panel:hover .surface,.panel:focus-visible .surface{filter:brightness(1.13)!important}
.panel-title{transition:text-shadow .4s,color .4s;color:#dedee2;text-shadow:0 0 8px #fff2}
.panel:hover .panel-title,.panel:focus-visible .panel-title{color:#fff;text-shadow:0 0 12px #fffa,0 0 28px #fff5}
.static .panel-art{-webkit-box-reflect:unset;filter:none!important;transform:none!important}
@media(prefers-reduced-motion:reduce){.panel-art{filter:none!important;transform:none!important}}
/* Portadas panorámicas: proporción 16:9 en ambos tamaños. */
.panel{width:520px;height:292.5px}
@media(max-width:650px){.panel{width:340px;height:191.25px}}
.static .panel{aspect-ratio:16/9;height:auto}
/* La portada y su rótulo comparten una malla curva de 24 segmentos. */
.panel-art{transform-style:preserve-3d}
.sheet{position:absolute;inset:0;display:block;transform-style:preserve-3d;pointer-events:none;transition:filter .4s;filter:brightness(.8)}
.sheet-strip{position:absolute;top:-67.5px;left:0;display:block;transform-origin:center center;backface-visibility:hidden}
.has-sheet>.surface,.has-sheet>.panel-title{opacity:0}
.panel:hover .sheet,.panel:focus-visible .sheet{filter:brightness(1.1)}
.static .sheet{display:none}.static .has-sheet>.surface,.static .has-sheet>.panel-title{opacity:1}
.sheet-strip{backface-visibility:visible}
.panel::before{content:'';position:absolute;inset:5px -8px;background:#fff;opacity:.1;filter:blur(30px);transform:translateZ(-7px);pointer-events:none;transition:opacity .4s}
.panel:hover::before,.panel:focus-visible::before{opacity:.2}
.static .panel::before{opacity:.07}
.panel-art{perspective:700px;perspective-origin:50% 50%}
/* GIF de portada: sin texturas de vídeo ni repintado de 24 lienzos por obra. */
.surface img.preview{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}
.panel-title{font-family:Arial,sans-serif;font-size:66px;font-weight:700;line-height:.96;letter-spacing:-.035em;text-transform:uppercase;bottom:calc(100% + 16px);overflow-wrap:normal;color:#fff;max-width:100%}
.panel:nth-child(4) .panel-title,.panel:nth-child(7) .panel-title,.panel:nth-child(8) .panel-title{font-size:42px}
@media(max-width:650px){.panel-title{font-size:44px}.panel:nth-child(4) .panel-title,.panel:nth-child(7) .panel-title,.panel:nth-child(8) .panel-title{font-size:29px}}
.static .panel-title{font-size:22px!important}
.panel-title{font-size:110px}
.panel:nth-child(2) .panel-title{font-size:100px}
.panel:nth-child(3) .panel-title{font-size:70px}
@media(max-width:650px){.panel-title{font-size:72px}.panel:nth-child(2) .panel-title{font-size:65px}.panel:nth-child(3) .panel-title{font-size:46px}}
.header-actions{display:flex;align-items:center;gap:28px;font-size:10px;letter-spacing:.05em}
.panel.about-panel .panel-title{font-size:62px}
.panel:nth-child(3) .panel-title{font-size:100px}.panel:nth-child(4) .panel-title{font-size:70px}.panel:nth-child(5) .panel-title{font-size:42px}.panel:nth-child(6) .panel-title,.panel:nth-child(7) .panel-title{font-size:110px}.panel:nth-child(8) .panel-title,.panel:nth-child(9) .panel-title{font-size:42px}
@media(max-width:650px){.header-actions{gap:15px;font-size:9px}.panel.about-panel .panel-title{font-size:40px}.panel:nth-child(3) .panel-title{font-size:65px}.panel:nth-child(4) .panel-title{font-size:46px}.panel:nth-child(5) .panel-title,.panel:nth-child(8) .panel-title,.panel:nth-child(9) .panel-title{font-size:29px}.panel:nth-child(6) .panel-title,.panel:nth-child(7) .panel-title{font-size:72px}}
/* Orden del recorrido: Acerca de mí, Marcas, Eventos… */
.panel:nth-child(2) .panel-title{font-size:110px}.panel:nth-child(3) .panel-title{font-size:100px}
@media(max-width:650px){.panel:nth-child(2) .panel-title{font-size:72px}.panel:nth-child(3) .panel-title{font-size:65px}}
/* Título y firma según la referencia, a la derecha del recorrido. */
.world{right:36%}
.portfolio-heading{position:absolute;z-index:3;right:3.5%;top:16%;width:30%;pointer-events:none}
.portfolio-heading h1{margin:0;font-family:Arial,sans-serif;font-weight:600;font-size:clamp(64px,8.5vw,150px);line-height:.88;letter-spacing:-.04em;color:#f1f1f2}
.portfolio-heading h1 span{display:block}
.portfolio-heading p{font-size:12px;text-align:right;margin:19px 3px 0;letter-spacing:.015em;color:#ccc}
#explore-arrow{display:block;margin-top:28px;width:100%;padding:0;pointer-events:auto;color:#eee;transition:transform .3s,opacity .3s}
#explore-arrow svg{display:block;width:100%;height:auto;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
#explore-arrow:hover{transform:translate(-5px,-3px);opacity:.75}
.surface{border-radius:8px;overflow:hidden}
.surface img.preview{border-radius:8px}
.static .portfolio-heading{position:relative;top:auto;right:auto;margin:0 0 70px auto;width:35%}
.static .world{right:auto}
@media(max-width:650px){.world{right:0}.portfolio-heading{top:12%;right:6%;width:39%}.portfolio-heading h1{font-size:clamp(44px,12vw,74px)}.portfolio-heading p{font-size:10px;margin-top:12px}#explore-arrow{margin-top:12px;width:85%;margin-left:auto}.surface,.surface img.preview{border-radius:6px}.static .portfolio-heading{width:65%;margin-bottom:80px}}
@media(prefers-reduced-motion:reduce){#explore-arrow{transition:none}}
/* Même caméra et même horizon pour le titre mural et la flèche au sol. */
.architecture{position:absolute;inset:0 36% 0 0;perspective:950px;perspective-origin:50% 49%;pointer-events:none;z-index:3}
#title-scene{position:absolute;inset:0;transform-style:preserve-3d}
.portfolio-heading{left:50%;top:49%;right:auto;width:660px;transform-style:preserve-3d}
.portfolio-heading h1{font-size:128px;font-weight:700;line-height:.88;letter-spacing:-.035em}
.portfolio-heading p{font-size:17px;margin-top:22px;margin-right:10px}
#explore-arrow{position:absolute;top:49%;left:50%;margin:0;width:200px;height:360px;padding:0;transform-origin:center;pointer-events:auto;transition:opacity .25s}
#explore-arrow svg{width:100%;height:100%;fill:#eee;stroke:none}
#explore-arrow:hover{opacity:.7}
.static .architecture{position:relative;inset:auto;perspective:none;width:100%;height:230px;margin-bottom:50px}
.static .portfolio-heading{position:relative;left:auto;top:auto;width:100%;transform:none!important;margin:0;text-align:right}
.static .portfolio-heading h1{font-size:70px}.static .portfolio-heading h1 span{display:inline}
.static #explore-arrow{display:none}
@media(max-width:650px){.architecture{right:0}.portfolio-heading{width:340px}.portfolio-heading h1{font-size:65px}.portfolio-heading p{font-size:12px}#explore-arrow{width:110px;height:220px}}
.portfolio-heading h1{font-size:180px;line-height:.88}
.portfolio-heading p{margin-top:18px}
@media(max-width:650px){.portfolio-heading h1{font-size:105px}}
/* Horizonte y punto de fuga compartidos en el centro de la pantalla. */
.world,.architecture{right:0;perspective-origin:50% 49%}
.portfolio-heading h1{color:#fff;text-shadow:0 0 12px #ffffff70,0 0 32px #ffffff30}
.portfolio-heading p{color:#e9e9ee;text-shadow:0 0 10px #ffffff50}
.portfolio-heading::before{content:'';position:absolute;inset:12px 40px;background:#fff;opacity:.065;filter:blur(38px);transform:translateZ(-5px);pointer-events:none}
/* Le carrousel est dans le même espace sombre que le couloir. */
#viewer{background:transparent;overflow:hidden}#viewer::backdrop{background:#0d0e1080;backdrop-filter:blur(1px)}
#close{left:27px;right:auto;top:23px;width:44px;height:44px;padding:6px;color:white}
#close svg,.carousel-nav svg{width:32px;height:32px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.carousel-stage{position:absolute;inset:0;perspective:950px;perspective-origin:50% 49%;overflow:hidden}
#carousel-track{position:absolute;inset:0;transform-style:preserve-3d}
.carousel-slide{position:absolute;left:50%;top:49%;width:min(66vw,900px);aspect-ratio:16/9;border-radius:9px;background:#0d0e10;transform-style:preserve-3d;transition:transform 850ms cubic-bezier(.22,.7,.18,1),filter 850ms,opacity 650ms,box-shadow 850ms;filter:brightness(.32) blur(2px);cursor:pointer;overflow:hidden}
.carousel-slide.is-active{filter:brightness(1) blur(0);box-shadow:0 0 45px #ffffff25,0 0 100px #ffffff10;cursor:default}
.carousel-slide>img{width:100%;height:100%;object-fit:cover;display:block}
#video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#0d0e10;opacity:0;transition:opacity 450ms}
#video.ready{opacity:1}
.carousel-nav{position:absolute;top:49%;transform:translateY(-50%);z-index:3;color:white;padding:15px}
.carousel-nav.previous{left:3%}.carousel-nav.next{right:3%}.carousel-nav:disabled{opacity:.18;cursor:default}
#viewer .video-caption{left:17%;top:calc(49% + min(18.56vw,253px) + 24px);bottom:auto;width:66%;pointer-events:none}
#viewer .video-caption h1{font-size:clamp(18px,2vw,28px);line-height:1.25;margin:0 0 12px;font-weight:500;letter-spacing:-.025em;text-shadow:0 0 15px #ffffff20}
#viewer .video-caption p{font-size:11px;line-height:1.6;margin:5px 0;color:#b9b9c2}
#viewer #video-error{top:18%;left:20%;z-index:4}
@media(max-width:650px){.carousel-slide{width:82vw}.carousel-nav.previous{left:0}.carousel-nav.next{right:0}.carousel-nav{padding:3px}.carousel-nav svg{width:24px}#viewer .video-caption{left:9%;width:82%;top:calc(49% + 23.1vw + 22px)}#close{left:15px;top:18px}}
@media(prefers-reduced-motion:reduce){.carousel-slide,#video{transition:none}}
#viewer .video-caption{top:calc(49% - min(18.56vw,253px) - 94px)}
#viewer .video-caption #video-description{display:none}
@media(max-width:650px){#viewer .video-caption{top:calc(49% - 23.1vw - 85px)}}
@keyframes carousel-shade-in{from{background:transparent;backdrop-filter:blur(0)}to{background:#0d0e1080;backdrop-filter:blur(1px)}}
#viewer[open]::backdrop{animation:carousel-shade-in 650ms ease-out both}
@media(prefers-reduced-motion:reduce){#viewer[open]::backdrop{animation:none}}
/* Galerie de formats mixtes, alignés sur une même ligne de regard. */
.carousel-slide{aspect-ratio:auto;border-radius:13px;filter:brightness(.5) blur(1.2px);transition:transform 850ms cubic-bezier(.22,.7,.18,1),width 650ms,height 650ms,filter 850ms,opacity 650ms,box-shadow 850ms}
.carousel-slide.is-active{filter:brightness(1) blur(0)}
.carousel-player{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#0d0e10;opacity:0;transition:opacity 450ms;border-radius:13px}
.carousel-player.ready{opacity:1}
.carousel-slide:not(.is-active) .carousel-player{pointer-events:none}
#viewer .video-caption{top:auto;bottom:8%;left:17%;width:66%}
#viewer .video-caption h1{font-size:20px}
#viewer::backdrop{background:#0d0e1033;backdrop-filter:blur(.5px)}
@keyframes carousel-shade-in{from{background:transparent;backdrop-filter:blur(0)}to{background:#0d0e1033;backdrop-filter:blur(.5px)}}
@media(max-width:650px){#viewer .video-caption{bottom:10%;left:10%;width:80%}.carousel-slide,.carousel-player{border-radius:10px}}
/* Acerca de mí: texto breve y una única película vertical. */

.about-layout{display:none}
#viewer.about-view{overflow-y:auto}
#viewer.about-view::backdrop{background:#0d0e10f7;backdrop-filter:blur(5px);animation:none}
.about-view .carousel-stage,.about-view .carousel-nav,.about-view .video-caption,.about-view #video-counter{display:none!important}
.about-view .about-layout{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:clamp(40px,7vw,140px);width:min(1760px,88vw);min-height:100svh;margin:0 auto;padding:80px 0}
.about-copy{position:relative;left:auto;top:auto;transform:none;width:auto;max-width:950px;font-family:Arial,sans-serif}
.about-copy h1{font-size:clamp(56px,6.6vw,128px);font-weight:700;text-transform:uppercase;letter-spacing:-.04em;line-height:.92;margin:0 0 35px;color:white;text-shadow:0 0 15px #ffffff35,0 0 38px #ffffff12}
.about-copy p{font-size:clamp(20px,1.35vw,26px);line-height:1.55;max-width:42ch;margin:0 0 24px;color:#bfc0c9}
.about-copy .about-intro{font-size:clamp(24px,2.1vw,36px);line-height:1.35;letter-spacing:-.02em;font-weight:500;color:#efeff3;margin-bottom:30px;max-width:33ch}
.about-specialties{font-size:clamp(12px,.8vw,16px);text-transform:uppercase;letter-spacing:.06em;color:#d0d0d8;margin-top:32px}
.about-links{display:flex;gap:38px;margin-top:32px;font-size:clamp(14px,1vw,18px);text-transform:uppercase;letter-spacing:.035em}
.about-links a{color:white;font-weight:600;padding:8px 0}.about-links span{margin-left:10px}.about-links a:hover{color:#c2b7e0}
.about-film{position:relative;left:auto;top:auto;transform:none;height:min(78svh,900px);aspect-ratio:9/16;border-radius:14px;overflow:hidden;box-shadow:0 0 55px #ffffff0d;background:#151518}
.about-film>img,.about-film>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
#about-video{opacity:0;transition:opacity 500ms}#about-video.ready{opacity:1}
@media(max-width:1000px) and (min-width:751px){.about-view .about-layout{gap:40px;width:90vw}.about-film{height:min(68svh,650px)}.about-copy h1{font-size:60px}.about-copy .about-intro{font-size:23px}.about-copy p{font-size:18px}}
@media(max-width:750px){.about-view .about-layout{display:flex;flex-direction:column;gap:40px;align-items:stretch;width:86vw;padding:110px 0 55px}.about-copy h1{font-size:clamp(52px,11vw,78px);margin-bottom:27px}.about-copy .about-intro{font-size:24px}.about-copy p{font-size:19px;line-height:1.55}.about-specialties{font-size:12px;margin-top:26px}.about-links{font-size:14px;gap:30px;margin-top:24px}.about-film{height:auto;width:min(100%,400px);aspect-ratio:9/16;align-self:center;flex-shrink:0}}
@media(prefers-reduced-motion:reduce){#about-video{transition:none}}
/* Rótulos de las ocho categorías acordadas. */
.panel[data-category] .panel-title{font-size:var(--category-font,82px)}
@media(max-width:650px){.panel[data-category] .panel-title{font-size:calc(var(--category-font,82px)*.65)}}