:root{--paper:#f8f5ee;--ink:#2c211b;--olive:#565d36;--olive-dark:#3e4427;--gold:#b89055;--line:#d9cfbd;--muted:#74695d;--serif:'Libre Caslon Display',Georgia,serif;--sans:'DM Sans',Arial,sans-serif;--ease:cubic-bezier(.22,1,.36,1)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0;color:var(--ink);background:var(--paper);font-family:var(--sans);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid var(--olive);outline-offset:6px}h1,h2,h3,p{margin:0}h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.02}h2{font-size:clamp(40px,4.4vw,68px);letter-spacing:-.04em}h3{font-size:29px;letter-spacing:-.025em}svg.icon{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.icon-library{position:absolute;width:0;height:0;overflow:hidden}.skip-link{position:fixed;top:-80px;left:20px;z-index:100;background:var(--paper);padding:12px}.skip-link:focus{top:10px}.header{position:relative;z-index:20;display:flex;align-items:center;gap:32px;height:96px;padding:0 4.4%;background:var(--paper);border-bottom:1px solid #d9cfbd66}.brand{display:flex;gap:13px;align-items:center;flex-shrink:0}.brand-emblem{width:55px;height:59px;background-image:url('assets/referencia.webp');background-size:768px 1152px;background-position:-29px -3px;border-radius:50%;mix-blend-mode:multiply}.brand-copy{display:flex;flex-direction:column}.brand-name{font-family:var(--serif);font-size:37px;letter-spacing:.015em;line-height:1}.brand-tag{font-size:9px;letter-spacing:.19em;margin-top:5px}.desktop-nav{display:flex;gap:34px;margin-left:auto;margin-right:18px}.desktop-nav a{font-size:14px;position:relative;padding:6px 0}.desktop-nav a:after{content:'';position:absolute;bottom:0;left:0;width:100%;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease)}.button{display:inline-flex;align-items:center;justify-content:center;gap:18px;min-height:54px;padding:14px 25px;border:1px solid transparent;border-radius:40px;background:var(--olive);color:#fffdf6;font-size:14px;font-weight:500;line-height:1.4;transition:background .2s,transform .16s}.button-small{min-height:43px;font-size:13px;padding:10px 19px;gap:9px}.button:active{transform:scale(.97)}.menu-toggle{display:none;border:0;background:none;padding:10px}.mobile-nav[hidden]{display:none}.mobile-nav{display:flex;flex-direction:column;position:absolute;top:100%;left:0;right:0;padding:22px 6%;gap:18px;background:var(--paper);border-bottom:1px solid var(--line)}
.hero{position:relative;height:min(780px,calc(100svh - 96px));min-height:620px;isolation:isolate;overflow:hidden;background:#f1e9da}.portrait-stage{position:absolute;inset:0;overflow:hidden}.portrait-image,#portrait-canvas{display:block;position:absolute;width:100%;height:100%;object-fit:cover;object-position:center 45%}#portrait-canvas{opacity:0;transition:opacity .3s}#portrait-canvas.ready{opacity:1}.hero-wash{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,var(--paper) 0%,#f8f5eef5 21%,#f8f5eea6 34%,transparent 49%),linear-gradient(0deg,#f8f5ee 0%,transparent 10%);z-index:1}.hero-copy{position:relative;z-index:2;padding:8% 0 0 5.5%;max-width:55%;pointer-events:none}.hero-copy a{pointer-events:auto}.eyebrow{font-size:11px;font-weight:550;letter-spacing:.19em;line-height:1.6}.eyebrow span{margin:0 8px}.hero h1{font-size:clamp(68px,6.8vw,104px);letter-spacing:-.045em;line-height:.99;margin-top:27px}.title-line{display:block;overflow:hidden;padding-bottom:9px;margin-bottom:-9px}.title-line>span{display:block}.gold-line{display:block;width:42px;height:2px;background:var(--gold);margin:29px 0}.hero-detail p{font-size:22px;line-height:1.45;margin-bottom:28px;font-weight:400}.text-link{display:block;width:max-content;font-size:13px;margin-top:17px;padding-bottom:3px;border-bottom:1px solid #b8905580}.portrait-note{position:absolute;z-index:3;right:4.3%;top:24%;display:flex;flex-direction:column;font-size:10px;line-height:1.6;letter-spacing:.03em;background:#f8f5eeaa;padding:15px 17px;border-left:1px solid #b8905588;backdrop-filter:blur(6px)}.portrait-note strong{font:26px var(--serif);margin:5px 0}.portrait-note>span:last-child{color:var(--muted)}.scroll-cue{position:absolute;z-index:3;bottom:18px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:18px;font-size:10px;letter-spacing:.16em;white-space:nowrap}.scroll-cue svg{width:17px;transform:rotate(90deg)}.motion-toggle{position:absolute;bottom:21px;right:4.4%;z-index:3;display:flex;align-items:center;gap:7px;background:#f8f5eec7;border:1px solid #d9cfbd8a;border-radius:20px;color:var(--muted);font-size:11px;padding:5px 10px;min-height:32px}.motion-indicator{font-size:13px;line-height:1}
.values{display:grid;grid-template-columns:repeat(3,1fr);padding:22px 7%;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.values>div{display:flex;align-items:center;justify-content:center;gap:25px;font-family:var(--serif);font-size:25px}.values>div+div{border-left:1px solid var(--line)}.values svg{width:37px;height:37px;fill:none;stroke:#786a4c;stroke-width:1;stroke-linecap:round;stroke-linejoin:round}.section-pad{padding:95px 5.5%}.section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:35px;margin-bottom:38px}.section-heading .eyebrow{color:var(--muted);margin-bottom:17px}.section-aside{text-transform:uppercase;font-size:11px;letter-spacing:.2em;padding-left:65px;position:relative;line-height:1.9;margin-bottom:5px}.section-aside:before{content:'';position:absolute;width:38px;height:1px;background:var(--gold);left:0;top:10px}.work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:25px}.work-photo{position:relative;aspect-ratio:.76;overflow:hidden;background:#e9e0ce}.gallery-image{position:absolute;inset:0;display:block;background-image:url('assets/proyectos.webp');background-size:300% auto;background-repeat:no-repeat;transition:transform .65s var(--ease)}.door{background-position:0 50%}.furniture{background-position:50% 50%}.commercial{background-position:100% 50%}.card-cta{position:absolute;inset:auto 17px 17px;display:flex;justify-content:space-between;align-items:center;border-radius:3px;background:#f8f5eef2;padding:12px 15px;font-size:12px;opacity:0;transform:translateY(12px);transition:opacity .25s,transform .3s var(--ease)}.card-title{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:18px}.card-title .icon{width:20px}.work-card>p{font-size:13px;color:var(--muted);margin-top:9px}.gallery-caption{font-size:12px;color:var(--muted);margin-top:28px}.heritage{display:grid;grid-template-columns:1fr 1.1fr;background:#efe9dc}.heritage-photo{background-image:url('assets/porfirio.webp');background-size:280%;background-position:68% 96%;min-height:600px}.heritage-copy{padding:74px 11%;position:relative;overflow:hidden}.heritage-copy .eyebrow{color:var(--muted);margin-bottom:26px}.heritage-copy h2{font-size:clamp(38px,3.65vw,59px);position:relative;z-index:1}.year{display:block;position:absolute;right:5%;top:0;font:150px var(--serif);color:#ded3bf;letter-spacing:-.06em;line-height:1;opacity:.55;pointer-events:none}.heritage-copy p:not(.eyebrow){font-size:15px;color:#655a4d;line-height:1.8;max-width:480px;margin-bottom:16px}.signature{display:block;font:italic 28px var(--serif);margin:26px 0 5px}.signature-label{font-size:9px;letter-spacing:.16em}.materials-intro{max-width:285px;font-size:14px;color:var(--muted);line-height:1.8}.material-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:25px}.material-swatch{display:block;height:145px;background-image:url('assets/porfirio.webp');background-size:420%;background-position:30% 91%;transition:transform .4s var(--ease)}.caoba{background-position:44% 99%;filter:sepia(.28) saturate(1.2) brightness(.8)}.puy{background-position:6% 85%;filter:saturate(.7)}.material-row{display:flex;align-items:center;margin-top:17px;gap:15px}.material-number{font-size:11px;color:var(--muted)}.material-row svg{margin-left:auto;width:20px}.contact{display:flex;align-items:center;justify-content:space-between;gap:50px;background:var(--olive);color:#f7f1e3;padding-top:70px;padding-bottom:70px}.contact h2{font-size:clamp(48px,5vw,75px)}.contact .eyebrow{color:#d3d5bb;margin-bottom:22px}.contact-action{border-left:1px solid #e2e1c94a;padding-left:6%;min-width:38%}.contact-action p{font-size:15px;color:#e1e0ce;margin-bottom:23px}.button-cream{background:#f1e6cd;color:var(--ink);gap:13px}.phone{display:block;font-size:13px;margin-top:18px;color:#e2e1cf;letter-spacing:.08em}footer{padding:38px 5.5%;display:flex;align-items:center;justify-content:space-between;gap:24px;font-size:12px}footer a{display:flex;gap:9px;align-items:center}footer .icon{width:19px}.footer-brand{font-family:var(--serif);font-size:21px}.copyright{color:var(--muted);font-size:11px}
@media(hover:hover) and (pointer:fine){.desktop-nav a:hover:after{transform:scaleX(1)}.button:hover{background:var(--olive-dark)}.button-cream:hover{background:#fff7e6}.text-link:hover{border-color:var(--ink)}.work-card:hover .gallery-image{transform:scale(1.04)}.work-card:hover .card-cta,.work-card:focus-visible .card-cta{opacity:1;transform:translateY(0)}.work-card:hover .card-title svg{transform:translateX(3px)}footer a:hover{color:var(--olive)}}
@media(min-width:1600px){.hero-copy{padding-top:90px}.hero{height:800px}.portrait-image,#portrait-canvas{object-position:center 40%}}
@media(max-width:1050px){.header{padding:0 4%;gap:20px;height:83px}.brand-name{font-size:31px}.brand-emblem{display:none}.desktop-nav{gap:24px;margin-right:0}.hero{height:650px;min-height:0}.hero-copy{padding:90px 0 0 5%;max-width:60%}.hero h1{font-size:74px}.hero-detail p{font-size:20px}.portrait-note{top:auto;bottom:110px;right:4%}.work-grid{gap:18px}.section-pad{padding:75px 5%}.card-title h3{font-size:25px}.heritage-copy{padding:58px 8%}.heritage-photo{min-height:550px}.contact-action{padding-left:5%}.copyright{display:none}}
@media(max-width:760px){html{scroll-padding-top:24px}.header{height:78px;padding:0 5%;gap:15px}.brand-name{font-size:29px}.brand-tag{font-size:8px}.desktop-nav,.header-contact{display:none}.menu-toggle{margin-left:auto;display:flex;flex-direction:column;gap:6px;width:40px;height:40px;justify-content:center}.menu-toggle span{display:block;height:1px;width:22px;background:var(--ink);transition:transform .2s}.menu-toggle[aria-expanded=true] span:first-child{transform:translateY(3.5px) rotate(45deg)}.menu-toggle[aria-expanded=true] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}.hero{height:900px;max-height:none;min-height:0;background:var(--paper)}.portrait-stage{top:310px;height:560px}.portrait-image,#portrait-canvas{object-position:61% center}.hero-wash{background:linear-gradient(180deg,var(--paper) 0%,var(--paper) 30%,transparent 46%,transparent 88%,var(--paper) 97%)}.hero-copy{padding:40px 6% 0;max-width:100%}.eyebrow{font-size:10px;letter-spacing:.14em}.eyebrow span{margin:0 5px}.hero h1{font-size:clamp(57px,10.4vw,79px);margin-top:19px;line-height:1}.hero-detail .gold-line{margin:20px 0}.hero-detail p{font-size:18px;margin-bottom:19px}.hero-detail .button{font-size:12px;min-height:46px;padding:12px 20px}.hero-detail .text-link{display:inline-block;margin-left:13px;font-size:11px;margin-top:0}.hero-detail p br{display:none}.hero-detail p{max-width:270px}.portrait-note{right:5%;bottom:90px;top:auto;padding:9px 12px;font-size:9px}.portrait-note strong{font-size:23px}.scroll-cue{bottom:23px;font-size:9px}.motion-toggle{bottom:67px;right:auto;left:5%;font-size:10px;min-height:32px}.values{padding:19px 3%}.values>div{flex-direction:column;gap:7px;font-size:19px}.values svg{width:27px;height:27px}.section-pad{padding:58px 6%}.section-heading{display:block;margin-bottom:26px}.section-aside{display:none}h2{font-size:43px;line-height:1.08;letter-spacing:-.04em}.work-grid{grid-template-columns:1fr;gap:32px}.work-photo{aspect-ratio:1.12}.gallery-image{background-size:300% auto;background-position-y:50%}.card-title{padding-top:15px}.card-title h3{font-size:31px}.work-card>p{font-size:14px;margin-top:7px}.gallery-caption{margin-top:26px;font-size:11px}.heritage{grid-template-columns:1fr}.heritage-photo{min-height:0;height:290px;background-size:220%;background-position:72% 96%}.heritage-copy{padding:48px 6%}.heritage-copy h2{font-size:44px}.heritage-copy p:not(.eyebrow){font-size:15px}.year{font-size:140px;right:5%}.materials-intro{max-width:100%;margin-top:23px}.material-grid{gap:15px}.material-swatch{height:100px}.material-row{gap:7px;flex-wrap:wrap}.material-row h3{font-size:27px}.material-row .icon{display:none}.material-number{font-size:9px}.contact{display:block}.contact h2{font-size:51px}.contact-action{border-left:0;border-top:1px solid #e2e1c94a;padding:27px 0 0;margin-top:30px}.contact-action p{font-size:15px}.contact .button{min-height:54px}footer{display:grid;grid-template-columns:1fr;padding:30px 6%;gap:17px;font-size:12px}.footer-brand{font-size:23px}}
@media(max-width:380px){.hero-detail .text-link{display:none}.hero h1{font-size:46px}.hero{height:880px}.portrait-stage{top:300px}.material-grid{gap:10px}.material-row h3{font-size:25px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.motion-toggle{display:none}.reveal{opacity:1!important;transform:none!important}}
/* Entrance choreography: artwork first, then the words and the invitation. */
.gaze-hint{position:absolute;z-index:3;top:28px;right:5%;color:#5a523f;font-size:12px;letter-spacing:.03em;opacity:.85;pointer-events:none;transition:opacity .5s}
.gaze-hint.has-interacted{opacity:0}
@media(min-width:761px) and (max-width:1000px){.hero h1{font-size:58px}.hero-copy{max-width:50%}.hero-wash{background:linear-gradient(90deg,var(--paper),#f8f5eef0 22%,#f8f5ee85 34%,transparent 48%),linear-gradient(0deg,var(--paper),transparent 10%)}}
@media(max-width:760px),(prefers-reduced-motion:reduce){.gaze-hint{display:none}}
.animate-entrance .portrait-stage{animation:portrait-enter 1.5s var(--ease) both}
.animate-entrance .title-line>span{animation:title-enter 1.05s var(--ease) .15s both}
.animate-entrance .title-line:nth-child(2)>span{animation-delay:.27s}
.animate-entrance .hero-enter{animation:copy-enter .85s var(--ease) .38s both}
.animate-entrance .hero-detail{animation-delay:.53s}
.animate-entrance .portrait-note{animation:copy-enter 1s var(--ease) .7s both}
.reveal-prepared{opacity:0;transform:translateY(26px);transition:opacity .75s var(--ease),transform .75s var(--ease)}
.reveal-prepared.is-visible{opacity:1;transform:none}
.motion-toggle[hidden]{display:none}
@keyframes portrait-enter{from{opacity:0;transform:scale(1.045)}to{opacity:1;transform:scale(1)}}
@keyframes title-enter{from{transform:translateY(105%)}to{transform:translateY(0)}}
@keyframes copy-enter{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}
