/* V9 — refinamiento visual y navegación consistente */
:root { --ui-blue:#3267f4; --ui-easing:cubic-bezier(.22,1,.36,1); }
body{font-family:Outfit,system-ui,-apple-system,Arial,sans-serif;font-weight:400;letter-spacing:-.012em;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
h1,h2,h3{letter-spacing:-.045em;text-wrap:balance}p{line-height:1.65}a,button{-webkit-tap-highlight-color:transparent}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid #79a7ff;outline-offset:4px}
/* Misma geometría en toda la web. Sin fondo blanco repentino al bajar. */
.header,.inner-page .header{position:fixed!important;top:12px!important;left:50%!important;transform:translateX(-50%)!important;margin:0!important;width:min(1100px,calc(100% - 30px))!important;min-height:64px;height:auto!important;padding:9px 18px!important;z-index:900!important;isolation:isolate;border:1px solid rgba(255,255,255,.09);border-radius:19px!important;background:rgba(22,23,27,.93)!important;box-shadow:0 12px 45px rgba(0,0,0,.28)!important;color:#eef0f5!important;backdrop-filter:blur(22px) saturate(135%);-webkit-backdrop-filter:blur(22px) saturate(135%);transition:background .3s,box-shadow .3s,border-color .3s,padding .3s,top .3s}
.header.is-scrolled,.inner-page .header.is-scrolled{top:7px!important;background:rgba(17,18,21,.975)!important;box-shadow:0 14px 44px #0008!important;border-color:#ffffff1b}
.header>a:first-child{display:flex!important;align-items:center!important;gap:12px;white-space:nowrap;min-width:max-content}.header>a:first-child strong{display:block;color:#5c8bff!important;font-size:17px;line-height:1.15}.header>a:first-child small,.inner-page .header .brand small{display:block;color:#b8bac5!important;font-size:9px;letter-spacing:.035em}.ms{font-size:30px!important;line-height:1}
.header nav,.inner-page .header nav{background:#2a2b31!important;display:flex;align-items:center;gap:3px;border-radius:15px!important;padding:4px!important}
.header nav a,.inner-page .header nav a{font-size:13px!important;color:#c7c9d3!important;border-radius:11px!important;padding:9px 13px!important;line-height:1.2!important;transition:background .24s,color .24s,transform .24s}
.header nav a:hover,.inner-page .header nav a:hover{background:#ffffff18!important;color:#fff!important}
.header nav a.active,.inner-page .header nav a.active{background:#386cf3!important;color:white!important;font-size:13px!important;padding:9px 13px!important;box-shadow:0 2px 10px #2c5ce555}
.headright,.inner-page .headright{color:#e0e1e6!important;gap:12px!important}.headright a,.headright button{transition:color .2s,transform .25s}.headright a:hover,.headright button:hover{color:#79a7ff;transform:translateY(-2px)}
.inner-page main{padding-top:95px}.inner-page .inner-hero{margin-top:45px}
.hero .header{position:fixed!important}.hero-inner{z-index:2}
/* Mejor microinteracción y consistencia */
.btn,.submit,.full-service-card,.project-card,.service-card,.process-grid>div,.preview,.round-next,.circle-arrow{transition:transform .42s var(--ui-easing),box-shadow .42s var(--ui-easing),border-color .35s,background .35s}
.btn:hover,.submit:hover{transform:translateY(-3px);box-shadow:0 14px 30px #0006}.full-service-card:hover,.project-card:hover{transform:translateY(-4px);box-shadow:0 18px 60px #0004}.service-card:hover{transform:translateY(-3px)}
.process-grid>div:hover{transform:translateY(-5px);box-shadow:0 14px 38px #0003}.round-next:hover,.circle-arrow:hover{transform:rotate(-35deg);background:#2f65ed}
.reveal,.reveal-page{will-change:auto}.reveal.in-view,.reveal-page.visible{will-change:auto}
/* barra fina de progreso que no afecta al layout */
#scroll-progress{position:fixed;top:0;left:0;width:100%;height:3px;background:linear-gradient(90deg,#2d60eb,#70d9ff);z-index:1100;transform:scaleX(0);transform-origin:left;pointer-events:none;box-shadow:0 0 12px #3a85ff80}
/* Modo claro controlado sin transiciones a blanco por scroll. */
body.light:not(.inner-page){background:#f1f3f8;color:#19212c}body.light:not(.inner-page) .section:not(.contact),body.light:not(.inner-page) .projects{color:#19212c}
/* Scroll y accesibilidad */
html{scroll-padding-top:110px}.header a,.header button{touch-action:manipulation}
@media(max-width:900px){.header,.inner-page .header{width:calc(100% - 24px)!important;padding:9px 13px!important;gap:8px}.header nav a,.inner-page .header nav a{padding:9px 9px!important}.header nav a.active,.inner-page .header nav a.active{padding:9px 9px!important}.header>a:first-child strong{font-size:15px}}
@media(max-width:760px){
 .header,.inner-page .header{min-height:60px;top:8px!important}
 .header nav,.inner-page .header nav{display:none!important;position:absolute!important;left:0;right:0;top:calc(100% + 9px);padding:10px!important;background:rgba(23,24,30,.985)!important;border:1px solid #ffffff24;border-radius:16px!important;box-shadow:0 16px 35px #0009;flex-direction:column;align-items:stretch;gap:4px}
 .header nav.open,.inner-page .header nav.open{display:flex!important}
 .header nav a,.inner-page .header nav a,.header nav a.active,.inner-page .header nav a.active{display:block;padding:13px 16px!important;font-size:14px!important}
 .mobile-menu{display:inline-flex!important;align-items:center;justify-content:center;font-size:22px!important;min-width:38px;min-height:38px}
 .headright{gap:8px!important}.header>a:first-child small{font-size:8px}
 .inner-page main{padding-top:88px}.inner-page .inner-hero{margin-top:35px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.reveal,.reveal-page{opacity:1!important;transform:none!important;filter:none!important}}

.polish-reveal{opacity:0;transform:translateY(22px);transition:opacity .8s ease,transform .85s cubic-bezier(.22,1,.36,1)}.polish-reveal.polish-visible{opacity:1;transform:none}@media(prefers-reduced-motion:reduce){.polish-reveal{opacity:1;transform:none}}