/* ASYMETRIX / atmospheric fixed canvas — 2026-10-12 */
html{background:#101417}
body{background:transparent;isolation:isolate}
body::before{
 content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
 background:
 radial-gradient(ellipse 70% 48% at 85% 16%,rgba(83,103,112,.21),transparent 75%),
 radial-gradient(ellipse 55% 65% at 8% 84%,rgba(139,104,64,.115),transparent 78%),
 linear-gradient(137deg,#101315 0%,#1b2225 48%,#111517 100%);
}
body::after{
 content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.43;
 background-image:
 repeating-linear-gradient(90deg,transparent 0,transparent calc(10vw - 1px),rgba(217,179,122,.075) calc(10vw - 1px),rgba(217,179,122,.075) 10vw),
 repeating-linear-gradient(0deg,transparent 0,transparent calc(10vw - 1px),rgba(217,179,122,.045) calc(10vw - 1px),rgba(217,179,122,.045) 10vw);
 mask-image:linear-gradient(180deg,transparent 0%,#000 22%,#000 88%,transparent 100%);
}
.portfolio{background:rgba(22,27,30,.83);backdrop-filter:blur(4px)}
.nav{position:relative;z-index:9}
.section{padding-block:clamp(92px,9vw,145px)}
.intro{align-items:start}
.intro p{margin-top:16px}
.section-heading{margin-bottom:clamp(35px,5vw,65px)}
.services{padding-top:24px}
#metodo{border-top:1px solid var(--line)}
.contact{padding-bottom:clamp(90px,9vw,145px)}
@media(max-width:850px){
 .section{padding-block:88px}
 .services{padding-top:10px}
 .section-heading{gap:20px}
}
@media(max-width:600px){
 body::before{background:radial-gradient(ellipse 90% 55% at 88% 15%,rgba(81,105,113,.19),transparent 78%),radial-gradient(ellipse 85% 45% at 0% 84%,rgba(157,114,70,.11),transparent 80%),linear-gradient(145deg,#111517,#1b2225 48%,#101416)}
 body::after{opacity:.30;background-size:64px 64px;background-image:linear-gradient(to right,rgba(217,179,122,.09) 1px,transparent 1px),linear-gradient(to bottom,rgba(217,179,122,.06) 1px,transparent 1px)}
 .section{padding-block:82px}
 .intro{gap:14px}
 .intro p{margin-top:12px}
 .services{padding-top:22px}
 .section-heading{margin-bottom:36px}
 .section-heading .eyebrow{margin-bottom:14px}
 .section-heading h2{line-height:1.24}
 .portfolio{background:rgba(21,26,29,.84)}
 .projects{gap:52px}
 .project-description{margin-top:15px}
 .method-grid{margin-top:42px;gap:32px}
 .contact{padding-bottom:88px}
 .contact-grid{gap:38px}
 .hero-foot{bottom:30px}
}
@media(prefers-reduced-motion:reduce){body::before,body::after{animation:none!important}}