@keyframes hero-gradient-animation{0%{--x-0: 57%;--y-0: 69%;--c-0: hsla(220, 77%, 32%, 1);--s-start-0: 8%;--s-end-0: 83%;--s-start-1: 1%;--s-end-1: 80%;--c-1: hsla(261, 70%, 22%, 1);--x-1: 98%;--y-1: 39%;--c-2: rgb(15, 203, 137);--y-2: 56%;--x-2: 35%;--s-start-2: 12%;--s-end-2: 83%;--x-3: 70%;--c-3: hsla(214, 92%, 27%, 1);--y-3: 82%;--s-start-3: 18%;--s-end-3: 71%;--y-4: 84%;--x-4: 40%;--c-4: rgb(72, 218, 24);--s-start-4: 6%;--s-end-4: 72%}to{--x-0: 69%;--y-0: 95%;--c-0: hsla(241, 70%, 39%, 1);--s-start-0: 14%;--s-end-0: 54%;--s-start-1: 7%;--s-end-1: 51%;--c-1: hsla(154, 84%, 11%, 1);--x-1: 70%;--y-1: 42%;--c-2: hsla(181, 83%, 12%, 1);--y-2: 1%;--x-2: 59%;--s-start-2: 13%;--s-end-2: 74%;--x-3: 10%;--c-3: hsla(261, 68%, 12%, 1);--y-3: 100%;--s-start-3: 15%;--s-end-3: 60%;--y-4: 76%;--x-4: 16%;--c-4: hsla(263, 53%, 47%, 1);--s-start-4: 9%;--s-end-4: 72%}}@property --x-0{syntax: "<percentage>"; inherits: false; initial-value: 57%}@property --y-0{syntax: "<percentage>"; inherits: false; initial-value: 69%}@property --c-0{syntax: "<color>"; inherits: false; initial-value: hsla(220,77%,32%,1)}@property --s-start-0{syntax: "<percentage>"; inherits: false; initial-value: 8%}@property --s-end-0{syntax: "<percentage>"; inherits: false; initial-value: 83%}@property --s-start-1{syntax: "<percentage>"; inherits: false; initial-value: 1%}@property --s-end-1{syntax: "<percentage>"; inherits: false; initial-value: 80%}@property --c-1{syntax: "<color>"; inherits: false; initial-value: hsla(261,70%,22%,1)}@property --x-1{syntax: "<percentage>"; inherits: false; initial-value: 98%}@property --y-1{syntax: "<percentage>"; inherits: false; initial-value: 39%}@property --c-2{syntax: "<color>"; inherits: false; initial-value: hsla(170,85%,27%,1);}@property --y-2{syntax: "<percentage>"; inherits: false; initial-value: 56%}@property --x-2{syntax: "<percentage>"; inherits: false; initial-value: 35%}@property --s-start-2{syntax: "<percentage>"; inherits: false; initial-value: 12%}@property --s-end-2{syntax: "<percentage>"; inherits: false; initial-value: 83%}@property --x-3{syntax: "<percentage>"; inherits: false; initial-value: 70%}@property --c-3{syntax: "<color>"; inherits: false; initial-value: hsla(214,92%,27%,1)}@property --y-3{syntax: "<percentage>"; inherits: false; initial-value: 82%}@property --s-start-3{syntax: "<percentage>"; inherits: false; initial-value: 18%}@property --s-end-3{syntax: "<percentage>"; inherits: false; initial-value: 71%}@property --y-4{syntax: "<percentage>"; inherits: false; initial-value: 84%}@property --x-4{syntax: "<percentage>"; inherits: false; initial-value: 40%}@property --c-4{syntax: "<color>"; inherits: false; initial-value: hsla(169,64%,44%,1)}@property --s-start-4{syntax: "<percentage>"; inherits: false; initial-value: 6%}@property --s-end-4{syntax: "<percentage>"; inherits: false; initial-value: 72%}.bg-gradiante-blue{--x-0: 57%;--y-0: 69%;--c-0: hsla(220, 77%, 32%, 1);--c-1: hsla(261, 70%, 22%, 1);--x-1: 98%;--y-1: 39%;--c-2: hsla(170, 85%, 27%, 1);--y-2: 56%;--x-2: 35%;--x-3: 70%;--c-3: hsla(214, 92%, 27%, 1);--y-3: 82%;--y-4: 84%;--x-4: 40%;--c-4: hsla(169, 64%, 44%, 1);background-color:#06010e;background-image:radial-gradient(circle at var(--x-0) var(--y-0),var(--c-0) var(--s-start-0),transparent var(--s-end-0)),radial-gradient(circle at var(--x-1) var(--y-1),var(--c-1) var(--s-start-1),transparent var(--s-end-1)),radial-gradient(circle at var(--x-2) var(--y-2),var(--c-2) var(--s-start-2),transparent var(--s-end-2)),radial-gradient(circle at var(--x-3) var(--y-3),var(--c-3) var(--s-start-3),transparent var(--s-end-3)),radial-gradient(circle at var(--x-4) var(--y-4),var(--c-4) var(--s-start-4),transparent var(--s-end-4));animation:hero-gradient-animation 4s linear infinite alternate;background-blend-mode:normal,normal,normal,normal,normal;mask:linear-gradient(to bottom,rgb(255,255,255,1) 60.9%,rgb(255,255,255,0) 100%,rgba(255,255,255,0) 90%);-webkit-mask:linear-gradient(to bottom,rgb(255,255,255,1) 60.9%,rgb(255,255,255,0) 100%,rgba(255,255,255,0) 90%);mask-size:cover;-webkit-mask-size:cover;mask-position:center;-webkit-mask-position:center}:root{--font-family-base: "Red Hat Display", sans-serif}*{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth;background:#fff;overflow-x:hidden}body{font-family:var(--font-family-base);margin:0;padding:0;overflow-x:hidden;scroll-snap-type:y mandatory;width:100%;max-width:100vw;position:relative}.margin-container{max-width:clamp(320px,90%,1400px);margin-inline:auto;width:100%;overflow-x:hidden}.padding-container{padding-inline:clamp(1rem,4vw,2.5rem);width:100%;max-width:100%;overflow-x:hidden}.gradient-effect-bottom{-webkit-mask-image:linear-gradient(to bottom,black 90%,transparent);mask-image:linear-gradient(to bottom,black 90%,transparent)}.gradient-effect-top{-webkit-mask-image:linear-gradient(to top,black 98%,transparent);mask-image:linear-gradient(to top,black 98%,transparent)}.background-patron-grillas{background-image:url(/grilla-fondo.png);background-size:cover;background-position:center;background-repeat:no-repeat;background-attachment:fixed;width:100vw;height:100vh;overflow:hidden}@media (max-width: 640px){.background-patron-grillas{background-attachment:scroll;background-size:cover}}@keyframes fadeInOut{0%{opacity:0;transform:scale(1.5);filter:blur(40px)}to{opacity:1;transform:scale(1);filter:blur(0)}}@keyframes fadeInTransition{0%{opacity:0;transform:scale(1.1);filter:blur(40px)}to{opacity:1;transform:scale(1);filter:blur(0)}}.fade-hero{animation:fadeInOut .8s ease-in-out forwards;overflow:hidden;width:100%;max-width:100%;transform-origin:center}.fade-transition{animation:fadeInTransition .5s ease-in-out forwards;overflow:hidden;width:100%;max-width:100%;transform-origin:center}@media (prefers-reduced-motion: reduce){.fade-hero,.fade-transition{animation:none;opacity:1;transform:none;filter:none}}