@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{--bg:#141b20;--fg:#f5f6f7;--muted:#b2bbc1;--line:#3b464e;--accent:#e0e6ea}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0;background:var(--bg);color:var(--fg);font-family:'DM Sans',Arial,sans-serif}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:6px}.skip{position:absolute;left:20px;top:-60px}.skip:focus{top:10px;z-index:20;background:var(--bg)}header{height:100px;display:flex;align-items:center;justify-content:space-between;margin:0 5%;border-bottom:1px solid var(--line)}.logo{font-family:'Space Grotesk',Arial,sans-serif;font-weight:700;font-size:30px;letter-spacing:-2px}.logo span{font-size:11px;vertical-align:top;letter-spacing:0;margin-left:4px}nav{display:flex;align-items:center;gap:36px;font-size:14px}.contact-nav{border:1px solid var(--line);border-radius:30px;padding:13px 21px}.contact-nav span{margin-left:30px;color:var(--accent)}.hero{padding:58px 5% 0}.eyebrow{font-size:11px;letter-spacing:1.7px;font-weight:600}.dot{display:inline-block;width:7px;height:7px;background:var(--accent);border-radius:50%;margin-right:9px}h1,h2,h3,p{margin:0}h1,h2,h3{font-family:'Space Grotesk',Arial,sans-serif}h1{font-size:clamp(54px,7.6vw,126px);font-weight:500;letter-spacing:-.065em;line-height:1.03;margin-top:35px}h1>span{color:var(--muted)}.hero-bottom{display:flex;justify-content:space-between;align-items:end;margin:30px 0 40px}.hero-bottom p{color:var(--muted);font-size:16px;line-height:1.7}.text-link{font-size:14px;border-bottom:1px solid var(--line);padding:0 0 12px;display:inline-flex;gap:46px;align-items:center}.text-link span{color:var(--accent);font-size:22px}.reel{position:relative;border:0;padding:0;display:block;width:100%;height:440px;color:var(--fg);overflow:hidden;background:#464e54;text-align:left}.reel-art{position:absolute;inset:0;background:radial-gradient(ellipse at 15% 80%,#ffffff30,transparent 55%),#30393f}.outline{position:absolute;font-family:'Space Grotesk',sans-serif;font-size:480px;letter-spacing:-50px;line-height:.9;color:var(--accent);left:2%;top:0;transform:rotate(-10deg);opacity:.8}.frames{position:absolute;inset:0;display:flex;align-items:center;justify-content:flex-end;gap:20px;transform:rotate(-9deg) translate(10%,2%)}.frames img{width:48%;height:300px;object-fit:cover;box-shadow:0 10px 70px #0009}.reel:after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 60%,#0009)}.play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:82px;height:82px;border-radius:50%;background:var(--accent);color:#14232b;display:grid;place-content:center;font-size:23px;z-index:2;padding-left:4px;transition:transform .2s}.reel:hover .play{transform:translate(-50%,-50%) scale(1.1)}.reel-caption{position:absolute;bottom:25px;left:30px;right:30px;display:flex;justify-content:space-between;z-index:2;font-size:11px;letter-spacing:2px}.section{padding:110px 5%;border-bottom:1px solid var(--line)}.section-top{display:flex;justify-content:space-between;align-items:end}.section-top p{color:var(--muted);line-height:1.6;font-size:14px}h2{font-size:clamp(40px,5vw,78px);font-weight:500;letter-spacing:-.055em;line-height:1.07;margin-top:23px}.filters{display:flex;gap:12px;margin:38px 0 28px;flex-wrap:wrap}.filters button{border:1px solid var(--line);border-radius:30px;background:transparent;color:var(--muted);padding:12px 20px;font-size:12px}.filters button[aria-pressed=true]{background:var(--accent);color:var(--bg);border-color:var(--accent)}sup{margin-left:7px;font-size:9px}.grid{display:grid;grid-template-columns:1fr 1fr;gap:38px 24px}.project[hidden]{display:none}.project .image{overflow:hidden;aspect-ratio:16/10;position:relative;background:#eaeaea}.project img{width:100%;height:100%;object-fit:cover;transition:transform .5s}.project:hover img{transform:scale(1.035)}.project .arrow{position:absolute;bottom:16px;right:16px;width:42px;height:42px;background:var(--fg);color:var(--bg);border-radius:50%;display:grid;place-content:center;font-size:23px}.project h3{font-size:23px;font-weight:500;margin:17px 0 7px;letter-spacing:-.6px}.project p{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:1.4px}.archive-note{font-size:12px;color:var(--muted);margin-top:34px}.services{background:#f9f9f9;color:var(--fg)}.services h2{margin-bottom:55px}.service{display:grid;grid-template-columns:55px 1fr 1fr;gap:25px;padding:28px 0;border-top:1px solid #d9dde0;align-items:start}.service>span{font-size:12px;padding-top:8px}.service h3{font-size:27px;letter-spacing:-1px;font-weight:500}.service p{font-size:15px;line-height:1.65;color:#61686d;max-width:430px}.about{display:grid;grid-template-columns:1fr 1fr;gap:8%}.about em,.contact em{font-style:normal;color:var(--accent)}.bio{padding-top:38px}.bio p{font-size:16px;line-height:1.75;color:var(--muted);margin-bottom:20px}.bio .intro{font-size:23px;color:var(--fg);line-height:1.5;letter-spacing:-.5px}.bio .text-link{margin-top:12px}.tools{font-size:10px;letter-spacing:1.4px;color:var(--muted);border-top:1px solid var(--line);padding-top:25px;margin-top:32px;line-height:1.8}.contact h2{font-size:clamp(64px,9vw,140px);margin-bottom:45px}.email{font-family:'Space Grotesk',sans-serif;font-size:clamp(23px,4.2vw,65px);letter-spacing:-.04em;display:flex;justify-content:space-between;padding-bottom:20px;border-bottom:1px solid var(--line)}.email span{color:var(--accent)}.contact-bottom{display:flex;justify-content:space-between;margin-top:25px;font-size:14px;line-height:1.6;color:var(--muted)}footer{margin:0 5%;padding:35px 0;display:flex;justify-content:space-between;align-items:center}footer>span,footer>a:last-child{font-size:11px;color:var(--muted)}dialog{width:min(960px,94vw);padding:20px;border:1px solid var(--line);background:var(--bg);color:var(--fg)}dialog::backdrop{background:#000d}dialog iframe{width:100%;aspect-ratio:16/9;border:0}.close{display:block;margin-left:auto;background:transparent;border:0;color:var(--fg);padding:8px 0 18px}dialog p{font-size:12px;color:var(--muted);margin-top:15px}dialog a{text-decoration:underline}@media(min-width:1600px){body{max-width:1700px;margin:auto}}@media(max-width:700px){header{height:80px}.logo{font-size:25px}nav{gap:16px;font-size:12px}.contact-nav{padding:9px 12px}.contact-nav span{margin-left:8px}.hero{padding-top:35px}h1{font-size:clamp(45px,9vw,68px);margin-top:26px}.hero-bottom{display:block}.hero-bottom p{font-size:14px;margin-bottom:20px}.reel{height:290px}.outline{font-size:320px}.frames img{height:210px;width:65%}.reel-caption{left:18px;right:18px;font-size:9px;letter-spacing:1px}.reel-caption span:last-child{display:none}.section{padding-top:65px;padding-bottom:65px}.section-top{display:block}.section-top p{margin-top:20px}.grid{gap:26px 15px}.project h3{font-size:18px}.project p{font-size:9px;letter-spacing:.6px;line-height:1.5}.project .arrow{width:32px;height:32px;font-size:18px;bottom:10px;right:10px}.filters{gap:7px;margin-top:27px}.filters button{font-size:10px;padding:10px 13px}.service{grid-template-columns:28px 1fr;gap:10px}.service h3{font-size:23px}.service p{grid-column:2;font-size:14px}.about{grid-template-columns:1fr;gap:5px}.bio{padding-top:25px}.bio .intro{font-size:21px}.email{font-size:clamp(22px,6vw,39px)}footer{flex-wrap:wrap;gap:20px}footer>span{display:none}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

.grid{align-content:start}.filter-status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.filters button{transition:background-color .2s,color .2s,border-color .2s}

/* Paleta oscura: azul carbón y gris pizarra de fcrespo.es. */
:root{color-scheme:dark}
.hero{background:#1c252c;color:var(--fg);padding-bottom:0}.hero .reel{margin-bottom:0}
.services,.contact{background:#202a32;color:var(--fg)}
.service{border-color:var(--line)}.service p{color:var(--muted)}
.filters button[aria-pressed=true]{background:#464e54;color:#fff;border-color:#75818a}
.play{background:#f5f6f7;color:#14232b}.reel-caption{color:#fff}
.project .image{background:#27323a}.project .arrow{background:#f5f6f7;color:#14232b}
.about em,.contact em{color:#c6d0d7}

/* Original portfolio fitRows layout; spacing is part of each item. */
.grid{display:block;margin-right:-24px}.grid .project{width:33.333333%;padding-right:24px;padding-bottom:38px}.grid .project[aria-hidden=true]{pointer-events:none}@media(max-width:700px){.grid{margin-right:-15px}.grid .project{padding-right:15px;padding-bottom:26px}}

.catalog-toolbar{display:flex;gap:24px;align-items:end;justify-content:space-between;margin-top:34px}.project-search{font-size:11px;color:var(--muted);display:block;width:min(440px,100%)}.project-search input{display:block;width:100%;margin-top:9px;background:#202a32;color:var(--fg);border:1px solid var(--line);border-radius:5px;padding:14px 16px;font:inherit;font-size:14px}.project-search input:focus{outline:2px solid #c6d0d7;outline-offset:2px}#catalog-count{font-size:12px;color:var(--muted);white-space:nowrap}.project h3{min-height:2.5em;line-height:1.25}.project p{min-height:2.8em;line-height:1.4}.project .image{display:grid;place-items:center}.project-placeholder{font-family:Space Grotesk,Arial,sans-serif;font-size:70px;letter-spacing:-6px;color:#b2bbc1}.project img{position:absolute;inset:0}.project img[hidden]{display:none}.project .arrow{z-index:1}.project .project-open{display:block}#video-slot video{width:100%;max-height:72vh;background:#000;display:block}#video-dialog h2{font-size:24px;margin:0 0 18px;letter-spacing:-.6px}#video-error{color:#e6c7ab;line-height:1.6}#catalog-empty{color:var(--muted);padding:25px 0}.filters{margin-top:22px}@media(max-width:700px){.catalog-toolbar{display:block}.catalog-toolbar #catalog-count{margin-top:16px}.project h3{font-size:16px;min-height:3.75em}.project p{min-height:4.2em}.project-placeholder{font-size:45px}}

/* Three desktop columns, two tablet columns, one mobile column. */
@media(max-width:1000px){.grid .project{width:50%}}
@media(max-width:560px){.grid .project{width:100%}.project h3{min-height:0}.project p{min-height:0}}

/* Integrated demo carousel, using the original portfolio's four Vimeo reels. */
.demo-carousel{padding-top:12px}.demo-topline{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:20px;color:var(--muted)}#demo-count{font-size:12px;letter-spacing:2px;white-space:nowrap;font-variant-numeric:tabular-nums}.demo-stage{position:relative;padding:0 64px}.demo-player{aspect-ratio:16/9;background:#0a1014;border:1px solid var(--line);overflow:hidden}.demo-player iframe{width:100%;height:100%;display:block;border:0;animation:demo-enter .3s ease-out}.demo-arrow{position:absolute;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:46px;height:46px;border:1px solid #64717b;border-radius:50%;background:#202a32;color:var(--fg);z-index:1;transition:background .2s,border-color .2s}.demo-arrow:hover{background:#464e54;border-color:#c6d0d7}.demo-arrow span{font-size:34px;line-height:1;margin-top:-3px}.demo-prev{left:0}.demo-next{right:0}.demo-footer{padding:24px 64px 36px;display:flex;justify-content:space-between;align-items:start;gap:32px}.demo-copy{max-width:670px;min-height:118px}.demo-copy h2{font-size:clamp(24px,3vw,38px);letter-spacing:-.035em;margin:0 0 12px;line-height:1.15}.demo-copy p{color:var(--muted);font-size:14px;line-height:1.7}.demo-dots{display:flex;gap:5px;flex-shrink:0;margin-top:2px}.demo-dots button{display:grid;place-items:center;width:30px;height:38px;padding:0;background:transparent;border:0}.demo-dots button:after{content:"";width:7px;height:7px;border-radius:50%;background:#65717a;transition:background .2s,width .2s}.demo-dots button[aria-pressed=true]:after{background:#f5f6f7;width:23px;border-radius:8px}@keyframes demo-enter{from{opacity:.25;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:700px){.demo-topline .eyebrow{font-size:9px;letter-spacing:1px}.demo-stage{padding:0 38px}.demo-arrow{width:32px;height:44px;border-radius:8px}.demo-arrow span{font-size:29px}.demo-footer{padding:20px 0 28px;display:block}.demo-copy{min-height:140px}.demo-copy h2{font-size:25px}.demo-copy p{font-size:13px}.demo-dots{justify-content:center;margin-top:8px}.demo-player{border:0}}
@media(prefers-reduced-motion:reduce){.demo-player iframe{animation:none}}

/* Scroll entrances run once and never transform Isotope's positioning nodes. */
.scroll-waiting{opacity:0;translate:0 32px}.scroll-entering{animation:scroll-place .65s cubic-bezier(.2,.7,.25,1) both;animation-delay:var(--reveal-delay,0ms)}
.scroll-waiting:focus-within{opacity:1;translate:none}.scroll-entering:focus-within{animation:none}
@keyframes scroll-place{from{opacity:0;translate:0 32px}to{opacity:1;translate:0 0}}
@media(prefers-reduced-motion:reduce){.scroll-waiting,.scroll-entering{opacity:1;translate:none;animation:none!important}}
@media print{.scroll-waiting,.scroll-entering{opacity:1;translate:none;animation:none!important}}

[data-copy]{white-space:pre-line}.hero h1>span[data-copy]{color:inherit}

/* Self-hosted demos: native player, silent autoplay only while visible. */
.demo-player{position:relative}.demo-player video{display:block;width:100%;height:100%;object-fit:contain;background:#080c0f;animation:demo-enter .3s ease-out}.demo-player #demo-error{position:absolute;inset:20% 12%;background:#141b20ed;padding:20px;color:#f5f6f7;font-size:14px;line-height:1.6}.demo-player #demo-error[hidden]{display:none}@media(prefers-reduced-motion:reduce){.demo-player video{animation:none}}

#catalog-count{white-space:normal;text-align:right;line-height:1.6;max-width:360px}@media(max-width:700px){#catalog-count{text-align:left}}

.seo-intro{max-width:850px;margin:22px 0 0;color:var(--muted);font-size:15px;line-height:1.75}

/* fCRESPO brand mark, white transparent logo on the charcoal palette. */
header .logo{display:flex;align-items:center;min-width:0}.logo-img{display:block;width:min(154px,32vw);height:auto;object-fit:contain}.footer-logo-img{width:min(140px,30vw)}
.video-with-brand{position:relative;width:100%;background:#080c0f}.video-with-brand video{width:100%;max-height:72vh;background:#000;display:block}.video-with-brand iframe{display:block;width:100%;aspect-ratio:16/9;border:0}
@media(max-width:700px){.logo-img{width:min(126px,31vw)}.footer-logo-img{width:min(118px,30vw)}}

/* Logo and close control share one line above each project video. */
#video-dialog .dialog-bar{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:44px;margin-bottom:14px}#video-dialog .dialog-brand{display:block;width:min(126px,36vw);height:auto}#video-dialog .close{margin:0;padding:8px 0;flex:none}