@font-face{font-family:'Lustra';src:url('../fonts/LustraLight.otf') format('opentype');font-weight:300;font-display:swap}
@font-face{font-family:'Lustra';src:url('../fonts/LustraBook.otf') format('opentype');font-weight:400;font-display:swap}
@font-face{font-family:'Lustra';src:url('../fonts/LustraMedium.otf') format('opentype');font-weight:500;font-display:swap}
@font-face{font-family:'Lustra';src:url('../fonts/LustraBold.otf') format('opentype');font-weight:700;font-display:swap}
@font-face{font-family:'Lustra';src:url('../fonts/LustraBlack.otf') format('opentype');font-weight:900;font-display:swap}
@font-face{font-family:'Kern';src:url('../fonts/KernRegular.otf') format('opentype');font-weight:400;font-display:swap}
@font-face{font-family:'Kern';src:url('../fonts/KernMedium.otf') format('opentype');font-weight:500;font-display:swap}
@font-face{font-family:'Kern';src:url('../fonts/KernBold.otf') format('opentype');font-weight:700;font-display:swap}

:root{--bg:#F7F7F5;--fg:#050505;--mute:#DEDEDC;--dim:#6B6B66;--acc:#00D663;color-scheme:light}
:root[data-theme="dark"]{--bg:#050505;--fg:#F7F7F5;--mute:#2B2B29;--dim:#8E8E8A;color-scheme:dark}


html,body{margin:0;padding:0;background:var(--bg);overflow-x:hidden;scrollbar-width:none}
body::-webkit-scrollbar{display:none}
*{box-sizing:border-box}
button,input,select,textarea{font-family:inherit}
a{color:inherit;text-decoration:none}
a:hover{color:#00D663}
*:focus{outline:none}
*:focus-visible{outline:2px solid #00D663;outline-offset:4px}

/* Page-enter curtain wipe + page-leave flash (JS triggers the "in" keyframe before navigating) */
@keyframes curtainOut{from{clip-path:inset(0 0 0 0)}to{clip-path:inset(0 0 100% 0)}}
@keyframes curtainIn{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}
.rs-curtain{position:fixed;inset:0;z-index:80;background:#00D663;pointer-events:none;animation:curtainOut 700ms cubic-bezier(0.16,1,0.3,1) 120ms both}
.rs-leave{position:fixed;inset:0;z-index:92;background:#00D663;pointer-events:none;clip-path:inset(100% 0 0 0)}

/* Base text (Kern) for the shared page shell — every inner page (Estudio, Proyectos,
   Proyecto, Contacto) wraps its content in .rs-page and relies on this inheriting down,
   the same way front-page.php sets it directly on .rs-home. */
.rs-page{font-family:'Kern',ui-sans-serif,system-ui,sans-serif;color:var(--fg)}

.rs-backdrop{position:fixed;inset:0;background:#050505;z-index:0}


/* Custom cursor */
.rs-cursor{position:fixed;top:0;left:0;width:10px;height:10px;background:#00D663;z-index:96;pointer-events:none;opacity:0;transition:width 160ms cubic-bezier(0.16,1,0.3,1),height 160ms cubic-bezier(0.16,1,0.3,1),opacity 200ms linear}
@media (pointer: coarse){.rs-cursor{display:none}}

/* Overlay menu (shared skeleton — pages may re-declare [data-canvas="1"] transform to taste) */


@media (max-width: 860px){
}

/* Theme switch (light/dark) */
.rs-theme-bar{position:fixed;top:50%;right:clamp(18px,3vw,44px);transform:translateY(-50%);z-index:30;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.rs-theme-bar button{display:flex;align-items:center;gap:9px;background:none;border:none;padding:2px 0;cursor:pointer;font-family:'Kern',sans-serif;font-weight:500;font-size:11px;letter-spacing:0.18em;text-transform:uppercase}
[data-dot]{width:7px;height:7px;display:block;background:transparent}
button[aria-pressed="true"] [data-dot]{background:#00D663}

/* Tone-tracking header + theme bar (ReasonSite.installTone): data-over=1 means the bar sits
   over a dark section, so its text goes light; data-over=0 sits over the page's own bg/fg. */
.rs-header{position:fixed;top:0;left:0;right:0;z-index:30;display:flex;align-items:center;justify-content:space-between;padding:clamp(16px,2.6vh,30px) clamp(18px,3vw,44px)}
.rs-header[data-over="1"] button{color:#F7F7F5}
.rs-header[data-over="1"] button[aria-pressed="false"]{color:#B9B9B4}
.rs-header[data-over="0"] button{color:#050505}
.rs-header[data-over="0"] button[aria-pressed="false"]{color:#6B6B66}
:root[data-theme="dark"] .rs-header[data-over="0"] button{color:#F7F7F5}
:root[data-theme="dark"] .rs-header[data-over="0"] button[aria-pressed="false"]{color:#8E8E8A}
.rs-header button[aria-pressed="true"] [data-dot]{background:#00D663}

.rs-theme-bar[data-over="1"] button{color:#F7F7F5}
.rs-theme-bar[data-over="1"] button[aria-pressed="false"]{color:#B9B9B4}
.rs-theme-bar[data-over="0"] button{color:#050505}
.rs-theme-bar[data-over="0"] button[aria-pressed="false"]{color:#6B6B66}
:root[data-theme="dark"] .rs-theme-bar[data-over="0"] button{color:#F7F7F5}
:root[data-theme="dark"] .rs-theme-bar[data-over="0"] button[aria-pressed="false"]{color:#8E8E8A}

@media (max-width: 860px){
	/* The floating vertically-centered theme switcher collides with scrolling content on
	   narrow viewports — pin it under the header instead of leaving it mid-screen. */
	.rs-theme-bar{top:calc(env(safe-area-inset-top) + 64px);transform:none}
}

/* Canvas skew when the overlay menu is open */
.rs-canvas{position:relative;z-index:10;background:var(--bg);transform-origin:20% 50%;transition:transform 900ms cubic-bezier(0.16,1,0.3,1)}
.rs-canvas[data-canvas="1"]{transform:translateX(-42%) rotate(-9deg) scale(0.9)}
@media (prefers-reduced-motion: reduce){.rs-canvas[data-canvas="1"]{transform:translateX(-30%)}}
@media (max-width: 860px){
	.rs-canvas[data-canvas="1"]{transform:translateX(-104%) scale(0.94)}
}

/* Reveal-on-scroll (progressive: real if animation-timeline: view() is supported, static fallback otherwise) */
[data-reveal]{opacity:1;transform:none;clip-path:inset(0 0 0 0)}
[data-line]{clip-path:inset(0 0 0 0);animation:lineIn 900ms cubic-bezier(0.16,1,0.3,1) both}
[data-line]:nth-child(2){animation-delay:120ms}
[data-line]:nth-child(3){animation-delay:240ms}
@keyframes lineIn{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes revealIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@supports (animation-timeline: view()){
	[data-reveal]{animation:revealIn 1ms linear both;animation-timeline:view();animation-range:entry 0% cover 22%}
}
@media (prefers-reduced-motion: reduce){
	[data-line],[data-reveal]{animation:none!important}
}