/* Shared by /, /hacienda-zorita/, /perfil-acero/ and /mostraro/. Page-specific CSS stays inline in each page.
   When you edit this file, bump ?v= in the <link> tags (the four pages and 404.html). */
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:400 500;font-display:swap;src:url(/fonts/bricolage.woff2) format('woff2')}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 600;font-display:swap;src:url(/fonts/instrument-sans.woff2) format('woff2')}
:root{--bg:#0B0A09;--surface:#141210;--fg:#ECE6DC;--soft:#CFC7BB;--muted:#9C9387;--accent:#C49A55;--line:rgba(236,230,220,.11);
--display:'Bricolage Grotesque','Helvetica Neue',Arial,sans-serif;--body:'Instrument Sans','Helvetica Neue',Arial,sans-serif;color-scheme:dark}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:72px}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--body);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:1240px;margin:0 auto;padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px))}
p{text-wrap:pretty}
h1,h2,h3{font-family:var(--display);font-weight:400;letter-spacing:-.025em;text-wrap:balance;margin:0}
.label{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);font-weight:500;margin:0}
.label.gold{color:var(--accent)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
::selection{background:var(--accent);color:var(--bg)}
/* pressed: every link and button dims while held; zero specificity so a control's own :active wins */
:where(a,button):active{opacity:.72}

/* nav */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:31;background:var(--bg)}
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;background:rgba(11,10,9,.86);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-block:18px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;padding-block:12.5px;margin-block:-12.5px}
.brand svg{flex:none}
.back{font-size:14px;color:var(--soft);text-decoration:none;transition:color .3s;display:inline-flex;gap:8px;align-items:center;padding-block:12px;margin-block:-12px}
.case-nav{display:flex;align-items:center;gap:26px}
.sm-only{display:none}
@media(max-width:480px){.lg-only{display:none}.sm-only{display:inline}}
.back:hover{color:var(--fg)}
.back svg{width:13px;height:13px}

/* logo, same behaviour as capturesluk.com */
.brand .logo{display:block;overflow:visible;width:116px;height:19px}
.logo rect,.logo path{transform-box:fill-box}
.logo .lv,.logo .lh{transition:translate .5s cubic-bezier(.22,1,.36,1)}
.logo .pt{transform-origin:50% 50%;transition:scale .5s cubic-bezier(.22,1,.36,1),fill .4s cubic-bezier(.22,1,.36,1)}
@media (hover:hover) and (pointer:fine){
 .brand:hover .logo .lv:not(.lr),.brand:hover .logo .lh:not(.lr){translate:-3px 1.5px}
 .brand:hover .logo .lr{translate:3px -1.5px}
 .brand:hover .logo .pt{scale:1.5;fill:#F4CD96}}
.brand:focus-visible .logo .lv:not(.lr),.brand:focus-visible .logo .lh:not(.lr){translate:-3px 1.5px}
.brand:focus-visible .logo .lr{translate:3px -1.5px}
.brand:focus-visible .logo .pt{scale:1.5;fill:#F4CD96}
.logo .lv{transform-origin:50% 100%;animation:drawv .45s cubic-bezier(.22,1,.36,1) .1s backwards}
.logo .lv.lr{transform-origin:50% 0}
.logo .lh{transform-origin:0 50%;animation:drawh .4s cubic-bezier(.22,1,.36,1) .2s backwards}
.logo .lh.lr{transform-origin:100% 50%}
.logo .lg{animation:printg .4s cubic-bezier(.22,1,.36,1) calc(var(--i) * 40ms + .35s) backwards}
.logo .pt{animation:popin .35s cubic-bezier(.22,1,.36,1) .85s backwards}
@keyframes drawv{from{scale:1 0}}
@keyframes drawh{from{scale:0 1}}
@keyframes printg{from{opacity:0;translate:0 4px}}
@keyframes popin{from{scale:0}}

/* the one primary action, same button everywhere */
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 22px;background:var(--fg);color:var(--bg);text-decoration:none;font-weight:600;font-size:15px;transition:background .3s}
.btn:hover{background:var(--accent)}
.btn:active{background:#A88345;opacity:1}
.btn svg{width:18px;height:18px;flex:none}

/* case pages: closing invitation, next project, footer */
.end-cta{padding-block:clamp(64px,9vw,120px) clamp(48px,6vw,72px);display:flex;flex-direction:column;align-items:flex-start;gap:26px}
.end-cta h2{font-size:clamp(2rem,4.4vw,3.6rem);line-height:1.02;max-width:18ch}
.next-case{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;padding-block:clamp(48px,7vw,88px);border-top:1px solid var(--line);text-decoration:none}
.next-case h2{font-size:clamp(2rem,5vw,4rem);line-height:1;margin-top:12px;transition:color .3s}
.next-case:is(:hover,:focus-visible) h2{color:var(--accent)}
.next-case svg{width:28px;height:28px;flex:none}
@media(max-width:640px){.next-case{align-items:center}.next-case svg{width:22px;height:22px}}
.foot{padding-block:16px 28px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:4px 12px;flex-wrap:wrap;font-size:13.5px;color:var(--muted)}
.foot a{text-decoration:none;display:inline-block;padding-block:12px;transition:color .3s}
.foot a:hover{color:var(--fg)}
.foot-l{display:flex;flex-wrap:wrap;gap:0 22px}

/* one case header on all three case pages: a neutral label, the title, an optional line, then a ruled row of facts (one equal column per fact, so 3 or 4 fill the row) */
.case-top{padding-block:clamp(56px,8vw,112px) clamp(36px,5vw,56px)}
.case-top h1{font-size:clamp(2.8rem,7vw,6rem);line-height:.96;margin:20px 0 22px}
.case-top .sub{font-size:clamp(17px,1.7vw,20px);color:var(--soft);max-width:52ch;margin:0}
.facts{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);margin:clamp(36px,5vw,56px) 0 0;border-top:1px solid var(--line)}
.case-top h1 + .facts{margin-top:clamp(28px,4vw,40px)}
.facts div{padding:18px 18px 0 0;display:flex;flex-direction:column;gap:6px;min-width:0}
.facts div+div{padding-left:18px;border-left:1px solid var(--line)}
.facts dd{margin:0;font-size:15.5px}
@media(max-width:760px){.facts{grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr))}.facts div:nth-child(3){border-left:0;padding-left:0}.facts div:nth-child(n+3){border-top:1px solid var(--line);padding-top:18px;margin-top:18px}.facts div:nth-child(3):last-child{grid-column:1 / -1}}
@media(max-width:340px){.case-nav{gap:16px}}
/* case decks (perfil-acero, mostraro): brand slabs under the case header */
.deck{max-width:1440px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));display:flex;flex-direction:column;gap:14px}
/* overflow:clip, not hidden: hidden would make each slab a scroll container and the view() reveals inside it would never move */
.s{position:relative;overflow:hidden;overflow:clip;min-height:clamp(520px,82svh,900px);display:flex;align-items:center;border-radius:4px;isolation:isolate}
.s .in{width:100%;max-width:1240px;margin:0 auto;padding:clamp(64px,9vw,120px) max(24px,env(safe-area-inset-right,0px)) clamp(64px,9vw,120px) max(24px,env(safe-area-inset-left,0px))}
.s .center{text-align:center;display:flex;flex-direction:column;align-items:center}
/* radius rule: the client deck (slabs, its button) uses the client's 4px; Lucas's own chrome (nav, .btn, tiles, chips) stays square; device frames imitate real objects and may round.
   The lift uses `translate`, not `transform`, because the scroll entrance animates transform and would override it. */
.btn-o{display:inline-flex;align-items:center;gap:10px;padding:15px 24px;text-decoration:none;font-weight:600;font-size:15px;border-radius:4px;transition:translate .3s,background .3s,color .3s}
.btn-o svg{width:13px;height:13px}
.btn-o:hover{translate:0 -2px}
.btn-o:active{translate:0;filter:brightness(.88)}
@supports (animation-timeline: view()){@media (prefers-reduced-motion: no-preference){
 .js .up{animation:up linear both;animation-timeline:view();animation-range:entry 0% entry 110px}
 .js .up2{animation:up linear both;animation-timeline:view();animation-range:entry 20px entry 130px}
 .js .up3{animation:up linear both;animation-timeline:view();animation-range:entry 40px entry 150px}}}

/* entrances: CSS only, and only with JS on, so the page is complete without it. Ranges are px of scroll, so a one-line heading travels as far as a tall photo. */
/* scroll entrances start fully transparent (nothing below the fold is "half there"); the load-time rise keeps .01 so the hero text stays an LCP candidate */
@keyframes up{from{transform:translateY(18px);opacity:0}to{transform:none;opacity:1}}
@keyframes rise-up{from{transform:translateY(18px);opacity:.01}to{transform:none;opacity:1}}
.js .rise{animation:rise-up .9s cubic-bezier(.2,.7,.2,1) var(--d,0s) both}
@supports (animation-timeline: view()){@media (prefers-reduced-motion: no-preference){
.js .reveal{animation:up linear both;animation-timeline:view();animation-range:entry 0% entry 110px}}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;scroll-behavior:auto!important;animation:none!important}}