/* Base: variables (tokens), reset, tipografía y estilos globales.
   Orden de carga: base → layout → components → sections/home → identity → work → case-study → visual → pages.
   Dentro de cada archivo el orden respeta la cascada original: si se agrega una regla que compite con otra
   (mismo elemento, misma propiedad, misma especificidad), la que va después gana. */

:root{
  --bg-soft:#1c1220;
  --panel:#241627;
  --ink:#f6f1ee;
  --muted:#a996a6;
  --coral:#ff6a55;
  --violet:#8d6bff;
  --line:rgba(246,241,238,.14);
  --line-strong:rgba(246,241,238,.28);
  --nav-h:72px;
  --r-sm:8px;
  --r-md:16px;
  --r-pill:100px;
  --ease:cubic-bezier(.2,.7,.3,1);
  --ease-io:cubic-bezier(.76,0,.24,1);
  color-scheme:dark;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  --bg:#09080c;
  --tile:#141019;
  --tile-line:rgba(246,241,238,.07);
  --lav-ink:#1c1433;
  --r-tile:28px;
  --gap:14px;
  --spring:cubic-bezier(.34,1.56,.64,1);
  --ease-out:cubic-bezier(.22,1,.36,1);
}
*,
*::before,
*::after{
  box-sizing:inherit;
}
html{scroll-behavior:smooth; scroll-padding-top:calc(env(safe-area-inset-top,0px) + var(--nav-h));}
html.loading{overflow:hidden;}
body{
  margin:0;
  color:var(--ink);
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
h1,
h2,
h3,
h4{
  font-family:"Bricolage Grotesque","Inter",system-ui,sans-serif;
  margin:0;
  line-height:1.15;
}
p{margin:0;}
a{color:inherit;}
img{max-width:100%; height:auto; display:block;}
figure{margin:0;}
[tabindex="-1"]:focus{outline:none;}
button{font:inherit; color:inherit;}
:focus-visible{outline:2px solid var(--coral); outline-offset:3px; border-radius:4px;}
.brand{font-family:"Bricolage Grotesque",sans-serif; font-weight:700; font-size:1.1rem; text-decoration:none; margin-right:auto; white-space:nowrap;}
.thumb{
  display:block;
  aspect-ratio:16/10;
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  overflow:hidden;
  background:var(--panel);
  transition:border-color .3s, transform .5s var(--ease);
}
.thumb img{transition:transform .7s var(--ease); width:100%; height:100%; object-fit:cover;}
.bgallery .col-title{margin-bottom:18px;}
.col-title{font-family:"Inter",sans-serif; font-size:.92rem; color:var(--coral); font-weight:600; margin-bottom:8px;}
.col-block + .col-block{margin-top:48px;}
.dev{
  margin-top:72px;
  padding:clamp(28px,4vw,48px);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:linear-gradient(135deg,rgba(255,106,85,.06),rgba(141,107,255,.08));
}
.shot img{width:100%; border-radius:var(--r-sm); border:1px solid var(--line); background:#fff;}
html,
body{
  background:var(--bg);
}
html.reduced .motion-btn{display:none !important;}
html.motion-off *,
html.motion-off *::before,
html.motion-off *::after{
  animation-play-state:paused !important;
}
.gb1{animation:g1 11s ease-in-out infinite;}
.gb2{animation:g2 9s ease-in-out infinite;}
.gb3{animation:g3 13s ease-in-out infinite;}
.gb4{animation:g4 10s ease-in-out infinite;}
.gb5{animation:g5 12s ease-in-out infinite;}
@keyframes g1{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(-40px,30px) scale(1.12);}}
@keyframes g2{0%,100%{transform:translate(0,0);}50%{transform:translate(55px,-25px);}}
@keyframes g3{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(-30px,-50px) scale(.85);}}
@keyframes g4{0%,100%{transform:translate(0,0);}50%{transform:translate(35px,45px);}}
@keyframes g5{0%,100%{transform:translate(0,0) scale(.9);}50%{transform:translate(-55px,10px) scale(1.1);}}
.g-hint{color:var(--muted); font-size:.9rem; margin:-2px 0 18px;}
.bgallery{margin-top:var(--gap);}
@property --sec{syntax:"<color>"; inherits:true; initial-value:#ff6a55;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,
  *::before,
  *::after{
    animation:none !important;
    transition:none !important;
  }
}
@supports (transition-timing-function: linear(0, 1)){
  :root{
    --spring:linear(0, .009, .035 2.1%, .141 4.4%, .723 12.9%, .938 16.7%, 1.017 19.4%, 1.067, 1.099 24.3%, 1.108 26%, 1.1, 1.078 30.1%, 1.049 32.5%, .994 37.3%, .981 40.2%, .979 43.4%, .992 50.1%, 1.001 57.2%, 1.003 64.4%, 1);
  }
}
@media (max-width:700px){
  :root{--r-tile:22px;}
}
@media (max-width:440px){
  .brand{font-size:1rem;}
}
@media (max-width:1100px){
  :root{--rail-w:340px;}
}
:root{--rail-w:clamp(380px,27vw,520px); --edge:clamp(24px,3.2vw,64px);}
@media (max-width:1280px){
  :root{--rail-w:clamp(330px,34vw,420px);}
}
@media (max-width:960px){
  :root{--rail-w:100%;}
}