@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{color-scheme:dark;--ink:#0b0b0b;--paper:#f4f0e9;--muted:#a9a49e;--line:#35312d;--orange:#ff5b20;font-family:Manrope,Arial,sans-serif;scroll-behavior:smooth}
*{box-sizing:border-box}
.ui-icon{display:inline-block;width:1em;height:1em;vertical-align:-.12em;flex:0 0 auto}html{scroll-padding-top:90px}body{margin:0;background:var(--ink);color:var(--paper);overflow-x:hidden}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}h1,h2,h3,p{margin-top:0}h1,h2,h3{letter-spacing:-.055em}img{max-width:100%}::selection{background:var(--orange);color:white}.shell{width:min(1440px,calc(100% - 96px));margin-inline:auto}.section{padding-block:125px}.skip{position:absolute;left:16px;top:-100px;background:white;color:#111;padding:12px;z-index:100}.skip:focus{top:16px}a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:2px solid #ffb794;outline-offset:4px}
.header{height:82px;background:#0b0b0b;position:relative;z-index:50}.header-inner{height:100%;display:flex;align-items:center;gap:54px}.wordmark{font-size:22px;font-weight:800;letter-spacing:-.09em;line-height:.8;white-space:nowrap}.wordmark-star{color:var(--orange);margin-left:2px;font-size:23px}.wordmark small{display:block;font-size:9px;letter-spacing:.36em;margin-top:8px}.nav{display:flex;align-items:center;gap:34px;margin-left:auto}.nav a{font-size:12px;color:#cfcbc6;font-weight:700;transition:color .2s}.nav a:hover{color:var(--orange)}.nav-cta{background:var(--paper);color:#111;padding:13px 19px;border-radius:28px;font-size:12px;font-weight:800;white-space:nowrap}.nav-cta span{margin-left:14px;color:var(--orange);font-size:18px}.menu-button{display:none}
.hero{height:min(780px,calc(100svh - 110px));min-height:650px;border-radius:5px 5px 58px 58px;position:relative;overflow:hidden;background:#6c1a0d;isolation:isolate}.hero-picture{position:absolute;inset:0;z-index:-2;background-image:linear-gradient(90deg,rgba(45,9,5,.2),rgba(10,5,6,.02) 55%,rgba(10,5,8,.5)),url('assets/hero-franco.webp');background-position:center,center 46%;background-size:cover}.hero:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(15,5,4,.6),transparent 30%);z-index:-1;pointer-events:none}.hero-top,.hero-bottom{position:absolute;left:36px;right:36px;display:flex;justify-content:space-between;gap:20px;font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.hero-top{top:33px}.hero-bottom{bottom:35px}.hero-main{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:90px 5% 90px}.eyebrow{font-size:11px;letter-spacing:.16em;font-weight:800;text-transform:uppercase}.hero-eyebrow{display:flex;align-items:center;gap:10px;margin-bottom:22px}.live-dot{width:7px;height:7px;background:white;border-radius:50%}.hero h1{font-size:clamp(70px,9.1vw,152px);line-height:.91;margin:0;max-width:1050px;font-weight:800;letter-spacing:-.085em}.hero h1 em,h2 em{font-style:normal;color:var(--orange)}.hero h1 em{color:#f9e7d9}.period{color:var(--orange)}.hero-aside{position:absolute;right:5%;top:46%;width:205px}.hero-aside p{font-size:15px;font-weight:700;line-height:1.5}.round-link{font-size:12px;font-weight:800;display:flex;align-items:center;gap:14px}.round-link span{width:30px;height:30px;border-radius:50%;background:var(--orange);display:grid;place-items:center;font-size:19px}
.tools-band{border-radius:0 0 58px 58px;background:#151515;min-height:126px;display:flex;align-items:center;padding:26px 35px;gap:60px;overflow:hidden}.tools-band p{font-size:11px;min-width:155px;max-width:160px;color:#b3ada7;line-height:1.5;margin:0}.tools-band p strong{color:white}.tools-window{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);flex:1}.tools-track{display:flex;width:max-content;align-items:center;gap:62px;animation:marquee 35s linear infinite}.tools-window:hover .tools-track{animation-play-state:paused}.tools-track span{font-size:20px;white-space:nowrap;font-weight:800;letter-spacing:-.06em;color:#eee5df}@keyframes marquee{to{transform:translateX(-50%)}}
.orange{color:var(--orange)}.intro,.section-heading{display:flex;justify-content:space-between;gap:50px;align-items:end}.intro h2,.section-heading h2,.process h2{font-size:clamp(47px,6vw,88px);line-height:1.03;font-weight:700;margin:18px 0 0}.intro-right{max-width:390px;padding-bottom:6px}.intro-right p,.heading-side p,.heading-copy{font-size:17px;line-height:1.65;color:#b9b5b0}.text-link{font-size:13px;font-weight:800;border-bottom:1px solid var(--orange);padding-bottom:8px;display:inline-block}.text-link span{color:var(--orange)}.service-list{border-top:1px solid var(--line);margin-bottom:40px}.service-row{display:flex;align-items:center;gap:50px;border-bottom:1px solid var(--line);padding:35px 10px;transition:padding .25s,background .25s}.service-row:hover{padding-left:25px;background:#15110f}.service-no{color:var(--orange);font-size:13px;font-weight:800}.service-row>div{flex:1;display:flex;align-items:baseline;justify-content:space-between;gap:25px}.service-row h3{font-size:clamp(26px,3.2vw,46px);margin:0}.service-row p{max-width:315px;margin:0;color:var(--muted);font-size:13px;line-height:1.5}.service-arrow{font-size:30px;color:var(--orange)}
.showcase{overflow:hidden;background:#11100f}.section-heading{margin-bottom:55px}.heading-side{max-width:325px}.heading-side p{font-size:14px}.carousel-controls{display:flex;gap:9px;margin-top:28px}.carousel-controls button{width:42px;height:42px;background:transparent;color:white;border:1px solid #5f5550;border-radius:50%;font-size:20px;transition:background .2s}.carousel-controls button:hover{background:var(--orange);border-color:var(--orange)}.project-viewport{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;outline-offset:-4px}.project-viewport::-webkit-scrollbar{display:none}.project-track{display:flex;gap:23px;padding:12px max(48px,calc((100vw - 1440px)/2)) 22px}.project-card{flex:0 0 min(425px,75vw);scroll-snap-align:center;min-width:0}.browser{height:360px;background:#222;border:7px solid #23201e;border-radius:12px;overflow:hidden;box-shadow:0 24px 50px #0009;transform:perspective(900px) rotateY(-7deg) rotateX(3deg) scale(.94);transition:transform .4s,box-shadow .4s;transform-origin:center}.project-card:hover .browser{transform:perspective(900px) rotateY(0) rotateX(0) scale(1);box-shadow:0 30px 65px #000b}.browser-bar{height:23px;display:flex;align-items:center;gap:4px;padding:0 9px;background:#ece8e2;color:#67615a}.browser-bar i{width:5px;height:5px;border-radius:50%;background:#c4bdb5}.browser-bar span{margin:auto;font-size:7px;letter-spacing:.04em}.browser-content{height:calc(100% - 23px);padding:28px;position:relative;overflow:hidden}.browser-content small,.browser-content b{position:relative;z-index:2;font-size:9px;letter-spacing:.12em}.browser-content strong{position:absolute;z-index:2;left:28px;top:37%;font-size:45px;letter-spacing:-.07em;line-height:.95}.browser-content b{position:absolute;bottom:28px;left:28px}.architecture{background:linear-gradient(95deg,#181b18,#61605a)}.building{position:absolute;right:-10px;bottom:0;top:38px;width:55%;transform:skewY(-10deg);display:flex;align-items:end;gap:6px;opacity:.84}.building span{width:34%;height:72%;background:repeating-linear-gradient(0deg,#9d9c93 0 17px,#363a39 18px 23px);border-left:10px solid #7c7b72}.building span:nth-child(2){height:92%}.building span:nth-child(3){height:60%}.craft{background:linear-gradient(135deg,#4f1616,#101014 60%);color:#fff3e2}.food-art{position:absolute;right:-45px;top:35px;width:240px;height:240px;border:32px solid #d6c4a9;border-radius:50%;background:radial-gradient(circle at 40% 50%,#df922a 0 16%,#6b2415 17% 27%,#bd5427 28% 40%,#68461e 41% 51%,#d99c5d 52% 67%,#39231c 68%);box-shadow:0 5px 40px #0009}.hotel{background:linear-gradient(145deg,#a0ad93,#173b4a 70%);color:white}.mountains{position:absolute;inset:80px 0 0;background:linear-gradient(145deg,transparent 45%,#384f4a 45% 60%,transparent 60%),linear-gradient(25deg,transparent 40%,#748774 41% 60%,transparent 61%),linear-gradient(160deg,transparent 45%,#14343d 46%);opacity:.75}.clinic{background:linear-gradient(135deg,#e5ede6,#a7c5c3);color:#173732}.clinic-orbit{position:absolute;width:350px;height:350px;border:65px solid #d8aaa2;border-radius:50%;right:-150px;top:35px;box-shadow:0 0 0 25px #e8d6c144}.shop{background:linear-gradient(135deg,#c6b49b,#50443b)}.shop-tiles{position:absolute;right:-8%;top:30px;display:flex;gap:6px;transform:rotate(-17deg)}.shop-tiles span{width:60px;height:290px;background:linear-gradient(130deg,#e1d5c5,#5b4338);border-radius:60px}.shop-tiles span:nth-child(2){background:linear-gradient(#373c34,#998d76)}.shop-tiles span:nth-child(3){background:linear-gradient(#ead3b1,#706250)}.project-meta{display:flex;justify-content:space-between;gap:18px;margin-top:12px;padding:0 12px}.tag{color:var(--orange);font-size:9px;font-weight:800;letter-spacing:.13em}.project-meta h3{font-size:24px;margin:8px 0 5px}.project-meta p{font-size:12px;color:#aaa19b;line-height:1.6;max-width:290px}.project-meta>a{display:grid;place-items:center;background:var(--orange);border-radius:50%;width:42px;height:42px;flex:none;font-size:20px;margin-top:15px}.showcase-foot{display:flex;justify-content:space-between;align-items:center;margin-top:16px}.showcase-foot>span{font-size:10px;letter-spacing:.13em;color:#888}
.automation-layout{display:grid;grid-template-columns:.9fr 1.15fr;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.automation-select{border-right:1px solid var(--line);padding:35px 50px 35px 0}.micro-heading,.detail-label{font-size:10px;font-weight:800;letter-spacing:.14em;color:var(--orange)}.industry-tabs{margin-top:28px;display:grid}.industry-tabs button{color:#aaa;background:none;border:0;border-bottom:1px solid var(--line);padding:17px 10px 17px 0;display:flex;justify-content:space-between;text-align:left;font-size:clamp(23px,3vw,38px);font-weight:700;letter-spacing:-.05em}.industry-tabs button[aria-selected=true],.industry-tabs button:hover{color:white}.industry-tabs button[aria-selected=true] span{color:var(--orange)}.industry-tabs button span{font-size:20px}.automation-detail{padding:42px 5% 40px 8%}.automation-detail h3{font-size:clamp(30px,3.4vw,50px);margin:26px 0 12px}.automation-detail>p{line-height:1.65;font-size:15px;color:#bcb5af;max-width:540px}.flow{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:36px 0}.flow span{background:#27221f;border:1px solid #4f4036;border-radius:40px;padding:10px 16px;font-size:11px;font-weight:700}.flow i{font-style:normal;color:var(--orange)}.detail-outcome{border-left:2px solid var(--orange);padding-left:20px;margin-bottom:31px}.detail-outcome span{font-size:9px;font-weight:800;color:#9d928b}.detail-outcome strong{display:block;font-size:17px;margin-top:6px}.time-note{display:flex;justify-content:space-between;align-items:center;gap:40px;padding:50px 0 0}.time-note>div{max-width:650px}.tiny-star{color:var(--orange);font-size:30px;margin-right:10px;vertical-align:middle}.time-note strong{font-size:19px}.time-note p{font-size:13px;color:#aaa29d;line-height:1.6;margin:12px 0 0}.time-note>a{border:1px solid #665b53;border-radius:30px;padding:13px 20px;font-size:12px;white-space:nowrap}.time-note>a span{color:var(--orange)}
.systems{background:#ee5a24;color:#1b1210;overflow:hidden}.systems-grid{display:grid;grid-template-columns:1fr 1fr;gap:75px;align-items:center}.systems .eyebrow{color:#fff8ed}.systems h2{font-size:clamp(46px,6vw,86px);line-height:1.02;margin:24px 0}.systems h2 span{color:white}.systems-text>p:not(.eyebrow){font-size:16px;line-height:1.7;max-width:500px}.button-light{display:inline-block;background:#15110f;color:white;padding:16px 22px;border-radius:30px;font-size:12px;font-weight:800;margin-top:18px}.dashboard{height:430px;display:flex;background:#eeeae4;border:8px solid #201816;border-radius:20px;box-shadow:25px 28px 0 #1e1515aa;transform:perspective(1000px) rotateY(-10deg) rotateX(5deg);overflow:hidden;color:#1f201d}.dash-sidebar{width:65px;background:#222421;padding:21px 20px;display:grid;align-content:start;gap:25px}.dash-sidebar strong{color:white;font-size:24px}.dash-sidebar strong span{color:#ec683e}.dash-sidebar i{width:24px;height:5px;border-radius:5px;background:#777d73}.dash-main{padding:30px;flex:1;min-width:0}.dash-label{font-size:8px;letter-spacing:.13em;color:#777}.dash-top{display:flex;justify-content:space-between;align-items:end;margin:25px 0}.dash-top strong{font-size:24px;letter-spacing:-.05em}.dash-top span{font-size:9px}.dash-stat-row{display:flex;gap:12px}.dash-stat-row>div{background:white;border-radius:10px;padding:16px;flex:1}.dash-stat-row small,.dash-stat-row span{display:block;font-size:9px}.dash-stat-row b{display:block;font-size:34px;letter-spacing:-.08em}.dash-stat-row span{color:#aa5b43}.dash-table{background:white;border-radius:10px;margin-top:13px;overflow:hidden}.dash-table>div{display:grid;grid-template-columns:1fr .8fr 1.1fr;border-bottom:1px solid #eee;padding:11px 14px;align-items:center;font-size:9px;gap:5px}.dash-table>div:first-child{color:#888;font-size:8px}.dash-table em{color:#a55030;font-style:normal}
.templates .section-heading{margin-bottom:45px}.template-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.template-grid>a>span{font-size:10px;font-weight:800;letter-spacing:.12em;color:#a99d94}.template-art{height:280px;margin:15px 0 20px;padding:20px;overflow:hidden;position:relative;transition:transform .3s}.template-grid a:hover .template-art{transform:translateY(-8px)}.template-art b,.template-art i{display:block;position:relative;z-index:2;font-size:9px;letter-spacing:.12em;font-style:normal}.template-art strong{position:relative;z-index:2;display:block;font-size:37px;line-height:1;letter-spacing:-.06em;margin-top:60px}.template-art i{margin-top:21px}.template-art.rest{background:radial-gradient(circle at 80% 70%,#ac6a36 0 10%,#2a1713 11% 27%,transparent 28%),linear-gradient(120deg,#73271b,#19100f);color:#f1dbba}.template-art.estate{background:linear-gradient(110deg,#493f36bb,#8d897f22),repeating-linear-gradient(90deg,#a29e90 0 22%,#373b35 23% 26%,#b0afa4 27% 37%);color:white}.template-art.person{background:radial-gradient(circle at 90% 35%,#cca285 0 10%,transparent 11%),linear-gradient(135deg,#8c6e62,#313333);color:white}.template-grid h3{font-size:23px;margin:0 0 3px}.template-grid h3 small{float:right;color:var(--orange)}.template-grid p{color:#9b948d;font-size:12px}.more-demos{border-top:1px solid var(--line);margin-top:35px;padding-top:24px;display:flex;flex-wrap:wrap;gap:20px;font-size:12px;color:#aaa}.more-demos a{color:#fff;border-bottom:1px solid var(--orange)}.process{display:grid;grid-template-columns:1fr 1fr;gap:70px;border-top:1px solid var(--line)}.process-steps>div{display:grid;grid-template-columns:55px 1fr;column-gap:20px;border-bottom:1px solid var(--line);padding:27px 0}.process-steps span{color:var(--orange);font-size:12px;font-weight:800;grid-row:span 2}.process-steps h3{font-size:22px;margin:0 0 6px}.process-steps p{color:#aaa;line-height:1.5;font-size:13px;margin:0}
.footer{background:#f1ede6;color:#141313;padding:105px 0 35px}.footer .eyebrow{color:#c64820}.footer h2{font-size:clamp(76px,12vw,180px);line-height:.87;margin:32px 0 47px;letter-spacing:-.085em}.footer h2 em{color:#ec5724}.footer-cta{background:#161312;color:white;border-radius:50px;padding:18px 20px 18px 26px;display:inline-flex;align-items:center;gap:75px;font-size:15px;font-weight:800}.footer-cta span{background:#ef5a22;border-radius:50%;width:37px;height:37px;display:grid;place-items:center;font-size:22px}.footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:25px;border-top:1px solid #c9c4bc;margin-top:135px;padding-top:26px;font-size:10px;color:#585651}.footer-bottom .footer-social{display:flex;align-items:center;gap:18px}.footer-social a{display:inline-flex;align-items:center;gap:3px;min-height:32px;white-space:nowrap;transition:color .22s ease}.footer-social a:hover,.footer-social a:focus-visible{color:#141313}.footer-social a .ui-icon{transition:transform .22s ease}.footer-social a:hover .ui-icon,.footer-social a:focus-visible .ui-icon{transform:translate(2px,-2px)}.footer-brand{font-size:17px;color:#141313;font-weight:800;letter-spacing:-.07em}.footer-brand .ui-star{color:var(--orange)}
@media(max-width:1000px){.shell{width:min(100% - 52px,1440px)}.nav{gap:18px}.nav a{font-size:11px}.header-inner{gap:20px}.hero-aside{top:auto;bottom:100px;right:5%}.hero h1{font-size:clamp(65px,9vw,115px)}.intro h2,.section-heading h2{font-size:clamp(48px,6vw,72px)}.service-row>div{display:block}.service-row p{margin-top:6px}.systems-grid{gap:35px}.dashboard{transform:scale(.9);transform-origin:left center}}
@media(max-width:700px){html{scroll-padding-top:68px}.shell{width:calc(100% - 28px)}.section{padding-block:75px}.header{height:65px}.wordmark{font-size:19px}.nav-cta{margin-left:auto;padding:8px 12px}.nav-cta span{margin-left:3px}.menu-button{display:grid;gap:5px;border:0;background:none;padding:10px}.menu-button span{width:20px;height:2px;background:#fff;display:block}.nav{display:none;position:absolute;top:65px;left:0;right:0;background:#171413;padding:20px 28px 26px;box-shadow:0 20px 30px #000a}.nav.is-open{display:grid}.nav a{font-size:16px;padding:7px 0}.hero{height:700px;min-height:0;border-radius:3px 3px 36px 36px}.hero-picture{background-position:center,27% center}.hero-top,.hero-bottom{left:20px;right:20px;font-size:8px}.hero-top span:last-child,.hero-bottom span:last-child{display:none}.hero-main{justify-content:flex-start;padding:190px 19px 0}.hero h1{font-size:clamp(57px,14.4vw,95px);line-height:.93}.hero-eyebrow{font-size:9px}.hero-aside{top:auto;left:20px;right:20px;bottom:78px;width:auto;max-width:290px}.hero-aside p{font-size:14px}.hero-bottom{bottom:24px}.tools-band{border-radius:0 0 35px 35px;padding:20px;min-height:115px;gap:20px}.tools-band p{font-size:9px;min-width:94px;max-width:94px}.tools-track{gap:26px}.tools-track span{font-size:16px}.intro,.section-heading{display:block}.intro h2,.section-heading h2,.process h2{font-size:clamp(45px,11vw,72px)}.intro-right{margin-top:24px}.intro-right p,.heading-copy{font-size:15px}.service-row{gap:18px;padding:24px 4px}.service-row h3{font-size:26px}.service-row p{font-size:12px}.service-arrow{font-size:24px}.heading-side{max-width:none;margin-top:22px;display:flex;align-items:end;gap:15px}.heading-side p{max-width:280px}.carousel-controls{margin-left:auto;flex:none}.project-track{padding-left:14px;padding-right:14px;gap:8px}.project-card{flex-basis:min(86vw,425px)}.browser{height:315px;transform:perspective(900px) rotateY(-3deg) scale(.96)}.browser-content strong{font-size:39px}.showcase-foot>span{display:none}.automation-layout{display:block}.automation-select{padding:25px 0;border-right:0;border-bottom:1px solid var(--line)}.industry-tabs{grid-template-columns:1fr 1fr;gap:8px}.industry-tabs button{font-size:20px;padding:10px 5px}.automation-detail{padding:35px 0}.automation-detail h3{font-size:37px}.time-note{display:block}.time-note>a{display:inline-block;margin-top:22px}.systems-grid{grid-template-columns:1fr}.systems h2{font-size:55px}.dashboard{width:100%;height:340px;transform:none;box-shadow:12px 12px 0 #1e1515aa}.dash-main{padding:18px}.dash-top strong{font-size:18px}.dash-stat-row>div{padding:10px}.dash-table>div{font-size:7px}.template-grid{grid-template-columns:1fr;gap:35px}.template-art{height:250px}.process{display:block}.process-steps{margin-top:35px}.footer{padding:75px 0 30px}.footer h2{font-size:clamp(70px,18vw,110px)}.footer-bottom{margin-top:85px;display:grid;grid-template-columns:1fr 1fr;gap:20px}.footer-bottom .footer-social{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,max-content);column-gap:clamp(24px,9vw,48px);row-gap:2px}.footer-social a{min-height:44px}}
@media(max-width:390px){.hero h1{font-size:54px}.hero-main{padding-top:185px}.hero-top{font-size:7px}.heading-side{display:block}.carousel-controls{margin-top:14px}.flow{gap:6px}.flow span{padding:8px 10px;font-size:9px}.dash-sidebar{width:40px;padding:14px 9px}.dash-sidebar strong{font-size:17px}.dash-sidebar i{width:16px}.footer-cta{gap:20px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.tools-track{animation:none}.browser,.template-art,.service-row{transition:none}}

/* Proyecto integrado: las demos locales aparecen dentro de sus marcos. */
.browser-content{isolation:isolate}.site-preview{position:absolute;top:0;left:0;z-index:5;width:1024px;height:1000px;border:0;transform:scale(var(--preview-scale,.4));transform-origin:top left;pointer-events:none;background:transparent;visibility:hidden}.site-preview.is-fitted{visibility:visible}.project-card{scroll-snap-align:start}.project-visual-link{display:block}.craft-preview-image{position:absolute;inset:0;z-index:5;display:block;width:100%;height:100%;object-fit:cover;object-position:center top}.anchor-alias{position:absolute;scroll-margin-top:90px}.templates{position:relative}
.template-art.rest{background-image:linear-gradient(100deg,#140c0bd9,#140c0b32),url('assets/photos/restaurante/restaurante-hero.jpg');background-position:center;background-size:cover}
.template-art.estate{background-image:linear-gradient(100deg,#161c18c9,#161c1818),url('assets/photos/inmobiliaria/inmobiliaria-hero.jpg');background-position:center;background-size:cover}
.template-art.person{background-image:linear-gradient(100deg,#151616d9,#15161626),url('assets/photos/profesional/profesional-hero.jpg');background-position:center;background-size:cover}

/* Movimiento discreto, con alternativa estática si el usuario lo prefiere. */
@media(min-width:701px) and (prefers-reduced-motion:no-preference){.hero-picture{animation:hero-breathe 22s ease-in-out infinite alternate}}
@media(prefers-reduced-motion:no-preference){
  @keyframes hero-breathe{from{transform:scale(1)}to{transform:scale(1.065)}}
  .motion-ready [data-enter]{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
  .motion-ready [data-enter].in-view{opacity:1;transform:translateY(0)}
  .motion-ready .service-row[data-enter]{transition:opacity .7s ease,transform .7s ease,padding .25s,background .25s}
  .template-art{background-size:cover;transition:transform .4s,background-size .5s,filter .4s}
  .template-grid a:hover .template-art{filter:brightness(1.13);transform:translateY(-8px) scale(1.015)}
}

/* 21st.dev como referencia visual: marquesinas continuas y controles editoriales. */
.tools-window{mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.tools-track{gap:0;animation:brand-flow 34s linear infinite;will-change:transform}
.tools-set,.footer-tools-set{display:flex;align-items:center;flex:none;gap:clamp(40px,5vw,72px);padding-right:clamp(40px,5vw,72px)}
.tools-set span{position:relative;font-size:clamp(17px,1.65vw,23px);font-weight:800;letter-spacing:-.055em;color:#f5f3ee;opacity:1}

.tools-set span::after{content:'';position:absolute;right:-29px;top:50%;transform:translateY(-50%);width:9px;height:9px;background:var(--orange);opacity:.78;mask:url('assets/img/leon-star.svg') center/contain no-repeat;-webkit-mask:url('assets/img/leon-star.svg') center/contain no-repeat}
@keyframes brand-flow{to{transform:translateX(-50%)}}
.tools-window:hover .tools-track,.footer-tools-window:hover .footer-tools-track{animation-play-state:running}
.footer-tools{margin-top:clamp(85px,10vw,140px);padding:26px 0 30px;border-top:1px solid #c9c4bc;border-bottom:1px solid #c9c4bc;overflow:hidden}
.footer-tools p{margin:0 0 24px;font-size:10px;letter-spacing:.13em;font-weight:800;color:#767069}
.footer-tools p strong{color:#25201c}
.footer-tools-window{overflow:hidden;background:#1b1816;border-radius:12px;padding:16px 0;mask-image:none;-webkit-mask-image:none}
.footer-tools-track{display:flex;width:max-content;animation:brand-flow 27s linear infinite reverse;will-change:transform}
.footer-tools-set{gap:clamp(40px,6vw,90px);padding-right:clamp(40px,6vw,90px)}
.footer-tools-set span{position:relative;font-size:clamp(20px,2.4vw,36px);font-weight:800;letter-spacing:-.075em;white-space:nowrap;color:#f5f3ee;opacity:1}.footer-tools-set span::after{content:"";position:absolute;right:-30px;top:50%;transform:translateY(-50%);width:10px;height:10px;background:var(--orange);mask:url("assets/img/leon-star.svg") center/contain no-repeat;-webkit-mask:url("assets/img/leon-star.svg") center/contain no-repeat}

.footer-bottom{margin-top:0;border-top:0}
.project-track{gap:clamp(12px,2vw,25px);padding:15px max(48px,calc((100vw - 1440px)/2)) 38px;padding-right:max(48px,calc(100vw - clamp(330px,33vw,460px) - 48px))}
.project-card{flex-basis:clamp(330px,33vw,460px)}
.browser{height:395px;border-radius:17px;transform:none;transition:transform .65s cubic-bezier(.2,.7,.2,1),box-shadow .65s}
.project-card.is-active .browser{transform:none;box-shadow:0 28px 70px #000c}
.project-card.is-active:hover .browser{transform:translateY(-3px)}
.project-viewport{cursor:grab;overscroll-behavior-x:contain;touch-action:pan-x pan-y}
.project-viewport.is-dragging{cursor:grabbing;scroll-snap-type:none;user-select:none}
.carousel-controls{align-items:center}
.carousel-count{margin-right:12px;font-size:12px;font-weight:800;letter-spacing:.1em;color:var(--paper);font-variant-numeric:tabular-nums;white-space:nowrap}
.carousel-count i{font-style:normal;color:#8c837a;margin:0 6px}
.carousel-controls button:disabled{opacity:.3;cursor:default}
.carousel-controls button:disabled:hover{background:transparent;border-color:#5f5550}

/* Navegación permanente y transparente sobre el contenido. */
body{overflow-x:clip}
.header{position:sticky;top:0;background:rgba(12,11,11,.72);backdrop-filter:blur(18px) saturate(145%);-webkit-backdrop-filter:blur(18px) saturate(145%);border-bottom:1px solid rgba(255,255,255,.08);transition:background .35s,box-shadow .35s}
.header.is-scrolled{background:rgba(12,11,11,.88);box-shadow:0 14px 40px rgba(0,0,0,.23)}
.nav{gap:clamp(15px,1.8vw,32px)}.nav a[aria-current="location"]{color:var(--orange)}
.nav-cta{transition:background .25s,transform .25s}.nav-cta:hover{background:#ffded0;transform:translateY(-2px)}
@media(max-width:1250px){.nav{display:none;position:absolute;top:100%;left:0;right:0;background:rgba(18,16,15,.96);backdrop-filter:blur(20px);padding:20px max(26px,4vw) 27px;box-shadow:0 22px 35px #0008;border-bottom:1px solid #55473f}.nav.is-open{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px 25px}.nav a{font-size:15px;padding:12px 0;border-bottom:1px solid #443b36}.nav-cta{margin-left:auto}.menu-button{display:grid;gap:5px;border:0;background:none;padding:12px}.menu-button span{width:21px;height:2px;background:#fff;display:block;transition:transform .25s}.menu-button[aria-expanded="true"] span:first-child{transform:translateY(3.5px) rotate(45deg)}.menu-button[aria-expanded="true"] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}}
@media(max-width:700px){.nav.is-open{grid-template-columns:1fr}.nav a{font-size:15px;padding:8px 0}.header{height:65px}.header-inner{gap:7px}}

/* Nuevas demos de rubro: imágenes originales y navegación uniforme. */
.template-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:34px 17px}
.template-card{min-width:0}.template-art{height:250px;background-image:linear-gradient(100deg,rgba(15,12,10,.76),rgba(15,12,10,.13)),var(--tile-image);background-size:cover;background-position:center;color:white;transition:transform .4s,filter .4s}
.template-art strong{font-size:clamp(27px,2.5vw,38px);margin-top:52px}.template-art b,.template-art i{font-size:8px}
.template-card:nth-child(2n) .template-art{background-image:linear-gradient(100deg,rgba(7,13,13,.77),rgba(7,13,13,.12)),var(--tile-image)}
.template-card:nth-child(4n) .template-art{background-image:linear-gradient(100deg,rgba(31,13,10,.78),rgba(31,13,10,.1)),var(--tile-image)}
.template-card:hover .template-art{transform:translateY(-7px);filter:brightness(1.12)}
@media(max-width:1000px){.template-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.template-art{height:265px}.template-art strong{font-size:clamp(30px,4vw,40px)}}
@media(max-width:550px){.template-grid{grid-template-columns:1fr;gap:31px}.template-art{height:275px}.template-art strong{font-size:40px}}

/* Una presentación personal y respuestas breves, sin repetir la oferta. */
.about{background:#1a1715;position:relative;overflow:hidden}.about:before{content:'';position:absolute;right:-50px;top:-150px;width:600px;height:600px;background:#ffffff07;mask:url('assets/img/leon-star.svg') center/contain no-repeat;-webkit-mask:url('assets/img/leon-star.svg') center/contain no-repeat;pointer-events:none}
.about-layout{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(55px,8vw,140px);position:relative}.about h2,.faq h2{font-size:clamp(50px,6vw,88px);line-height:1.02;margin:18px 0 40px}.about-signature{font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--orange);font-weight:800}.about-content{align-self:end}.about-content p{font-size:16px;color:#bbb5ae;line-height:1.8;max-width:540px}.about-content .about-lead{font-size:clamp(20px,2.2vw,28px);color:#f7f3ee;line-height:1.45;font-weight:600;letter-spacing:-.035em}.about-content .text-link{margin-top:20px}
.faq{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(55px,8vw,140px)}.faq-heading>p:last-child{font-size:15px;color:#aaa29d;line-height:1.6;max-width:330px}.faq-list{border-top:1px solid var(--line)}.faq-list details{border-bottom:1px solid var(--line);padding:21px 0}.faq-list summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:clamp(16px,1.7vw,21px);font-weight:700;letter-spacing:-.04em}.faq-list summary::-webkit-details-marker{display:none}.faq-list summary span{flex:none;width:30px;height:30px;border:1px solid #685249;border-radius:50%;display:grid;place-items:center;color:var(--orange);transition:transform .25s,background .25s}.faq-list details[open] summary span{transform:rotate(45deg);background:#281a15}.faq-list details>p{font-size:14px;line-height:1.7;color:#bbb3ad;max-width:580px;margin:17px 48px 7px 0}
@media(max-width:800px){.about-layout,.faq{grid-template-columns:1fr;gap:35px}.about h2,.faq h2{margin-bottom:25px}.about-content p{font-size:15px}.about-content .about-lead{font-size:22px}}
@media(prefers-reduced-motion:reduce){.header,.nav-cta,.menu-button span,.template-art,.faq-list summary span{transition:none}.hero-picture{animation:none}}

/* Ritmo editorial: entrada del hero, recorrido y detalles interactivos. */
.hero-picture{background-image:linear-gradient(90deg,rgba(45,9,5,.25),rgba(10,5,6,.03) 55%,rgba(10,5,8,.38)),url('assets/hero-franco.webp')}
.scroll-progress{position:absolute;bottom:-1px;left:0;height:2px;width:var(--scroll-progress,0%);background:var(--orange);pointer-events:none}
.footer-brand{line-height:1}.footer-brand small{display:block;margin-top:9px;color:#6c655e;font-size:9px;font-weight:800;letter-spacing:.15em;text-transform:uppercase}
.round-link span,.project-meta>a,.footer-cta span{transition:transform .3s cubic-bezier(.2,.7,.2,1),background .3s}
.round-link:hover span,.project-meta>a:hover,.footer-cta:hover span{transform:translate(3px,-3px)}
@media(prefers-reduced-motion:no-preference){
  .motion-ready [data-enter]{transition-delay:var(--enter-delay,0ms)}
  .motion-ready .template-card[data-enter] .template-art{transform:scale(1.045);filter:brightness(.8);transition:transform .85s cubic-bezier(.2,.7,.2,1),filter .85s}
  .motion-ready .template-card[data-enter].in-view .template-art{transform:scale(1);filter:brightness(1)}
  .motion-ready .template-card[data-enter].in-view:hover .template-art{transform:translateY(-7px);filter:brightness(1.12)}
}
.footer-cta:hover .cta-label{transform:none}

/* Ritmo visible del marquee y avance por logos del footer. */
.tools-window{mask-image:none;-webkit-mask-image:none}
.tools-track{animation:brand-flow 20s linear infinite}
.footer-tools-track{animation:brand-flow 24s linear infinite reverse;will-change:transform}
.project-viewport{scroll-snap-type:x proximity;scroll-padding-inline-start:max(48px,calc((100vw - 1440px)/2))}
.project-viewport.is-animating{scroll-snap-type:none;scroll-behavior:auto}
@media(max-width:700px){.project-viewport{scroll-padding-inline-start:14px}}
/* Animación continua, desde la carga, con dos conjuntos idénticos. */
html .tools-track{animation:brand-flow 20s linear infinite;will-change:transform}
html .footer-tools-track{animation:brand-flow 24s linear infinite reverse;will-change:transform}
.tools-window:hover .tools-track,.footer-tools-window:hover .footer-tools-track{animation-play-state:running}
.tools-set span,.footer-tools-set span{white-space:nowrap}
@media(max-width:700px){.tools-band{gap:14px}.tools-band p{flex:none}}

/* Halo en todas las áreas oscuras: siempre detrás del contenido. */
body{background-image:radial-gradient(circle 135px at var(--page-spot-x,-200px) var(--page-spot-y,-200px),rgba(255,103,48,.13),transparent 100%);background-attachment:fixed}
.spotlight-surface{position:relative;isolation:isolate}
.spotlight-surface::after{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(circle 135px at var(--spot-x,-200px) var(--spot-y,-200px),rgba(255,103,48,.18),transparent 100%);opacity:0;transition:opacity .25s ease}
.spotlight-surface.is-lit::after{opacity:1}
.spotlight-surface > *{position:relative;z-index:1}
@media(hover:none){.spotlight-surface::after{display:none}}

/* Interacción fiel a la referencia: texto original sale, nuevo texto entra,
   punto naranja crece detrás. Enlaces conservan navegación y accesibilidad. */
a.cta-hover{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:12px;white-space:nowrap;transition:box-shadow .3s ease,transform .3s ease,color .3s ease}
a.cta-hover::before{content:'';display:block;position:absolute;z-index:0;left:20%;top:40%;width:8px;height:8px;border-radius:50%;background:#ee5a24;opacity:0;transform:scale(1);transform-origin:center;transition:opacity .2s,left .38s cubic-bezier(.22,1,.36,1),top .38s cubic-bezier(.22,1,.36,1),width .38s cubic-bezier(.22,1,.36,1),height .38s cubic-bezier(.22,1,.36,1),border-radius .38s;pointer-events:none}
a.cta-hover:hover::before,a.cta-hover:focus-visible::before{left:-10%;top:-35%;width:120%;height:170%;border-radius:999px;opacity:1}
a.cta-hover .cta-label,a.cta-hover .cta-arrow{position:relative;z-index:1;opacity:1;transition:opacity .28s ease,transform .33s cubic-bezier(.22,1,.36,1),color .3s ease,background .3s ease}
a.cta-hover:hover .cta-label,a.cta-hover:focus-visible .cta-label,a.cta-hover:hover .cta-arrow,a.cta-hover:focus-visible .cta-arrow{opacity:0;transform:translateX(35px)}
a.cta-hover .cta-reveal{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;gap:9px;color:white;font-size:inherit;font-weight:inherit;white-space:nowrap;pointer-events:none;opacity:0;transform:translateX(35px);transition:opacity .28s ease,transform .33s cubic-bezier(.22,1,.36,1)}
a.nav-cta .cta-reveal,a.footer-cta .cta-reveal,a.button-light .cta-reveal,.time-note > a.cta-hover .cta-reveal{margin:0;width:100%;height:100%;padding:0;border:0;border-radius:0;background:none;color:white;font-size:inherit}
a.cta-hover:hover .cta-reveal,a.cta-hover:focus-visible .cta-reveal{opacity:1;transform:translateX(0)}
a.cta-hover:hover,a.cta-hover:focus-visible{box-shadow:0 12px 30px #0003}
a.cta-hover .cta-reveal span{margin:0;padding:0;width:auto;height:auto;display:inline;background:none;border:0;border-radius:0;color:inherit;font-size:inherit;line-height:1.2;transform:none;opacity:1}
a.nav-cta .cta-reveal span,.time-note > a.cta-hover .cta-reveal span{color:white;font-size:inherit;margin:0}
a.cta-hover .cta-reveal .reveal-arrow{font-size:1.25em;line-height:1}
a.nav-cta .cta-label{margin:0;color:inherit;font-size:inherit}
a.nav-cta .cta-arrow{margin:0 0 0 5px;color:#ee5a24;font-size:18px}
a.button-light .cta-arrow{color:#f88758}
a.button-light::before{background:#f4f0e9}
a.button-light .cta-reveal{color:#171310}
a.button-light .cta-reveal span{color:#171310}
a.footer-cta .cta-label{display:inline;width:auto;height:auto;background:none;color:inherit;font-size:inherit}
a.footer-cta .cta-arrow{color:white}
a.footer-cta:hover .cta-label{transform:translateX(35px)}
.footer-tools p strong{display:inline-block}
.footer-tools.has-entered p strong{animation:footer-title-roll .85s cubic-bezier(.2,.7,.2,1) both}
@keyframes footer-title-roll{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}

/* Entrada breve en la carga y revelado del título del hero, sin depender de JS. */
body::before{content:'';position:fixed;inset:0;z-index:1000;pointer-events:none;background:#10100f;animation:page-curtain .85s cubic-bezier(.2,.7,.2,1) both}
@keyframes page-curtain{0%,32%{opacity:1}100%{opacity:0;visibility:hidden}}
@keyframes hero-rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
.hero-top{animation:hero-rise .75s .34s both}
.hero-eyebrow{animation:hero-rise .85s .46s both}
.hero h1{animation:hero-rise 1s .55s both}
.hero-aside{animation:hero-rise .85s .82s both}
.hero-bottom{animation:hero-rise .8s .96s both}

/* El espacio final permite llegar a la última tarjeta con las flechas. */
.project-track{width:max-content;padding-right:max(48px,calc(100vw - clamp(330px,33vw,460px) - 48px))}
@media(max-width:700px){.project-track{padding-right:max(14px,calc(100vw - min(83vw,430px) - 14px))}}
@media(max-width:420px){.hero h1{font-size:clamp(48px,13.6vw,60px)}.hero-main{padding-top:clamp(155px,27vh,190px)}.hero-aside{bottom:76px}.nav-cta{gap:3px}}
/* También si Windows solicita reducir movimiento: el portfolio se anima al abrirlo. */
.motion-ready [data-enter]{opacity:0;transform:translateY(22px);transition:opacity .72s ease,transform .72s cubic-bezier(.2,.7,.2,1);transition-delay:var(--enter-delay,0ms)}
.motion-ready [data-enter].in-view{opacity:1;transform:translateY(0)}

/* Las flechas recorren una tarjeta entera; el gesto manual mantiene su propio arrastre. */
.project-viewport,.project-viewport.is-animating,.project-viewport.is-dragging{scroll-snap-type:none;scroll-behavior:auto}
@media(hover:none){.project-viewport{scroll-snap-type:x proximity}.project-viewport.is-animating{scroll-snap-type:none}}
.postino-preview{background:linear-gradient(180deg,#38201cba,#20100de6),url('demos/il-postino/assets/salon-concepto.webp') center/cover;color:#fff8ec}.postino-preview strong{font-family:Georgia,serif;font-weight:400;letter-spacing:-.055em}.browser-postino{border-color:#321b1c}