@charset "UTF-8";
/* header.sticky {
    .header {
        .header-wrapper {
            background-color: transparent;
            transition: all 0.2s linear !important;
        }
    }

    // Header when scrolling
    &.scrolling {
        .header-wrapper {
            background-color: rgba(255, 255, 255, 0.5);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            padding: var(--space-xs) var(--space-s);
        }

        .main-nav__link-wrapper {
            background-color: transparent;
            padding: 0px;
            backdrop-filter: none;
            transition: all 0.001s linear !important;

            .main-nav__cta { margin: 0;}
        }

        #logo lottie-player { width: 120px; }
    }
} */
.main-nav li.menu-item:hover .main-nav__link, .main-nav li.menu-item:hover div.brx-submenu-toggle {
  color: var(--action);
}
.main-nav li.menu-item:hover .main-nav__link:after, .main-nav li.menu-item:hover div.brx-submenu-toggle:after {
  transform: translateX(-50%) scale(1);
}
.main-nav li.menu-item .main-nav__link, .main-nav li.menu-item div.brx-submenu-toggle {
  position: relative;
  height: 100%;
}
@media (max-width: 768px) {
  .main-nav li.menu-item .main-nav__link, .main-nav li.menu-item div.brx-submenu-toggle {
    height: auto;
  }
}
.main-nav li.menu-item .main-nav__link:after, .main-nav li.menu-item div.brx-submenu-toggle:after {
  content: "";
  background: var(--action);
  height: 0.4rem;
  width: 0.8rem;
  border-radius: 0.4rem 0.4rem 0 0;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) scale(0);
  transition: transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.main-nav li.menu-item .main-nav__link[aria-current="page"], .main-nav li.menu-item div.brx-submenu-toggle[aria-current="page"] {
  color: var(--action);
}
.main-nav li.menu-item .main-nav__link[aria-current="page"]:after, .main-nav li.menu-item div.brx-submenu-toggle[aria-current="page"]:after {
  transform: translateX(-50%) scale(1);
}
@media (min-width: 769px) {
  .main-nav li.menu-item:last-child {
    margin-left: calc(var(--space-s) * -1.2);
    align-self: center;
    margin-right: var(--space-xs);
  }
}
.main-nav__link-wrapper[data-bg-color="base"], .main-nav__link-wrapper {
  background-color: hsl(var(--base-h) var(--base-s) calc(var(--base-l) * 0.95)/40%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--base-dark-trans-60);
}
.main-nav__link-wrapper[data-bg-color="base"] li.menu-item a.main-nav__link, .main-nav__link-wrapper[data-bg-color="base"] li.menu-item .brx-submenu-toggle, .main-nav__link-wrapper li.menu-item a.main-nav__link, .main-nav__link-wrapper li.menu-item .brx-submenu-toggle {
  color: var(--primary);
}
.main-nav__link-wrapper[data-bg-color="base"] li.menu-item a.main-nav__link:hover, .main-nav__link-wrapper[data-bg-color="base"] li.menu-item .brx-submenu-toggle:hover, .main-nav__link-wrapper li.menu-item a.main-nav__link:hover, .main-nav__link-wrapper li.menu-item .brx-submenu-toggle:hover {
  color: var(--action);
}
@media (min-width: 769px) {
  .main-nav .main-nav__link-wrapper[data-bg-color="action"] {
    background-color: hsl(var(--action-h) var(--action-s) calc(var(--action-l) * 0.85)/40%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--action-dark-trans-60);
  }
  .main-nav .main-nav__link-wrapper[data-bg-color="action"] .menu-item .main-nav__link, .main-nav .main-nav__link-wrapper[data-bg-color="action"] .menu-item div.brx-submenu-toggle {
    color: white;
  }
  .main-nav .main-nav__link-wrapper[data-bg-color="action"] .menu-item .main-nav__link:hover, .main-nav .main-nav__link-wrapper[data-bg-color="action"] .menu-item div.brx-submenu-toggle:hover {
    color: var(--accent);
  }
  .main-nav .main-nav__link-wrapper[data-bg-color="action"] .menu-item .main-nav__link:after, .main-nav .main-nav__link-wrapper[data-bg-color="action"] .menu-item div.brx-submenu-toggle:after {
    background-color: var(--accent);
  }
  .main-nav .main-nav__link-wrapper[data-bg-color="action"] .main-nav__cta {
    background-color: var(--action-hover);
  }
}
.main-nav__link-wrapper[data-bg-color="primary"] {
  background-color: hsl(var(--primary-h) var(--primary-s) calc(var(--primary-l) * 0.45)/40%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--primary-light-trans-20);
}
.main-nav__link-wrapper[data-bg-color="primary"] .menu-item .main-nav__link, .main-nav__link-wrapper[data-bg-color="primary"] .menu-item div.brx-submenu-toggle {
  color: white;
}
.main-nav__link-wrapper[data-bg-color="primary"] .menu-item .main-nav__link:hover, .main-nav__link-wrapper[data-bg-color="primary"] .menu-item div.brx-submenu-toggle:hover {
  color: var(--accent);
}
.main-nav__link-wrapper[data-bg-color="primary"] .menu-item .main-nav__link:after, .main-nav__link-wrapper[data-bg-color="primary"] .menu-item div.brx-submenu-toggle:after {
  background-color: var(--accent);
}
.main-nav.brx-open {
  /* Canviar el color del toggle un cop el menú està obert a blau */
}
.main-nav.brx-open button.main-nav__mobile-toggle.is-active svg {
  fill: var(--action) !important;
}
.main-nav.brx-open .main-nav__link-wrapper {
  background: hsl(var(--base-h), var(--base-s), var(--base-l), 100%);
  backdrop-filter: blur(10px);
  border-radius: 0px;
  padding: calc(var(--header-height) + var(--space-s)) var(--space-s) var(--space-s);
}
.main-nav.brx-open li.menu-item:last-child {
  margin-top: auto;
  display: flex;
  width: 100%;
}
.main-nav.brx-open li.menu-item:last-child a {
  margin-left: 0;
}
.main-nav.brx-open li.menu-item .main-nav__link, .main-nav.brx-open li.menu-item div.brx-submenu-toggle {
  background-color: var(--base-ultra-light);
  padding: var(--space-s) var(--space-m);
  border-radius: var(--radius-m);
  justify-content: flex-start;
  border: 1px solid var(--base-medium);
}
.main-nav.brx-open li.menu-item .main-nav__link:after, .main-nav.brx-open li.menu-item div.brx-submenu-toggle:after {
  display: none;
}
/* =======================
    LANGUAGE SWITCHER
========================== */
ul[data-bg-color="action"] .lang-switch__icon svg, ul[data-bg-color="primary"] .lang-switch__icon svg {
  color: white;
  fill: white;
}
ul[data-bg-color="base"] .lang-switch__icon svg {
  color: var(--primary-ultra-dark);
  fill: var(--primary-ultra-dark);
}
@media (max-width: 768px) {
  .lang-switch .lang-switch__icon svg {
    color: var(--primary-ultra-dark);
    fill: var(--primary-ultra-dark);
  }
}
.lang-switch {
  position: relative;
  line-height: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.lang-switch .lang-switch__icon {
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5rem;
  height: 5rem;
  border-radius: 100vw;
  transition: all 0.2s;
  aspect-ratio: 1;
  cursor: pointer;
}
@media (max-width: 1023px) {
  .lang-switch .lang-switch__icon {
    background: transparent;
    border: 0;
  }
}
.lang-switch .lang-switch__icon svg {
  width: 2.5rem;
  height: 2.5rem;
  transition: all 0.2s;
}
.lang-switch .lang-switch__dropdown {
  visibility: hidden;
  opacity: 0;
  transform: translateY(1rem);
  position: absolute;
  top: 100%;
  right: 0;
  background: var(--base-ultra-light);
  list-style: none;
  padding: 0;
  margin: 0;
  background: var(--white);
  border: 1px solid var(--base-dark-trans-60);
  border-radius: 1rem;
  overflow: hidden;
  transition: all 0.3s;
}
.lang-switch .lang-switch__dropdown li.lang-switch__item a {
  display: block;
  color: var(--primary);
  padding: 1rem 1.5rem;
}
.lang-switch .lang-switch__dropdown li.lang-switch__item a:hover {
  color: var(--action);
}
.lang-switch .lang-switch__dropdown li.lang-switch__item--active {
  background: var(--primary-ultra-light);
}
.lang-switch .lang-switch__dropdown li.lang-switch__item--active a {
  color: var(--action);
  font-weight: bold;
}
.lang-switch:hover .lang-switch__icon, .lang-switch:focus-within .lang-switch__icon {
  background: var(--action);
}
.lang-switch:hover svg, .lang-switch:focus-within svg {
  fill: var(--white);
}
.lang-switch:hover .lang-switch__dropdown, .lang-switch:focus-within .lang-switch__dropdown {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}
.menu-item:has(.main-nav__cta) {
  display: contents;
}
.main-nav__cta {
  background: var(--btn-background);
  color: var(--btn-text-color);
  padding-block: var(--btn-padding-block);
  padding-inline: var(--btn-padding-inline);
  min-inline-size: var(--btn-min-width);
  line-height: var(--btn-line-height);
  font-size: var(--btn-font-size, var(--text-m));
  font-weight: var(--btn-font-weight);
  font-style: var(--btn-font-style);
  text-transform: var(--btn-text-transform);
  letter-spacing: var(--btn-letter-spacing);
  text-decoration: var(--btn-text-decoration);
  border-width: var(--btn-border-width);
  border-style: var(--btn-border-style);
  border-radius: var(--btn-radius);
  border-color: var(--btn-border-color);
  transition: var(--btn-transition, var(--transition));
  justify-content: var(--btn-justify-content, center);
  text-align: var(--btn-text-align, center);
  border-width: 0;
  background-color: var(--action);
  pointer-events: auto;
  cursor: pointer;
  position: relative;
  color: white;
  padding: var(--btn-pad-y) calc(var(--btn-pad-x) * 1);
  transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1) 0s;
}
@media (hover: hover) and (pointer: fine) {
  .main-nav__cta:hover {
    background: var(--btn-background-hover);
    color: var(--btn-text-color-hover);
    border-color: var(--btn-border-color-hover);
    text-decoration: var(--btn-text-decoration-hover);
  }
}
.main-nav__cta:focus {
  outline-style: solid;
  outline-color: var(--focus-color);
  outline-width: var(--focus-width);
  outline-offset: var(--focus-offset);
}
.main-nav__cta:hover {
  background-color: var(--action);
  padding: var(--btn-pad-y) calc(var(--btn-pad-x) * 1.8);
}
.main-nav__cta:hover > span {
  opacity: 0;
}
.main-nav__cta:hover .marquee__inner {
  animation-play-state: running;
  opacity: 1;
  transition-duration: 0.4s;
}
.main-nav__cta .marquee {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  pointer-events: none;
}
.main-nav__cta .marquee__inner {
  width: fit-content;
  max-width: fit-content;
  display: flex;
  position: relative;
  --offset: 1rem;
  --move-initial: calc(-25% + var(--offset));
  --move-final: calc(-50% + var(--offset));
  transform: translate3d(var(--move-initial), 0, 0);
  animation: marquee 1.5s linear infinite;
  animation-play-state: paused;
  opacity: 0;
}
.main-nav__cta .marquee__inner > span {
  width: fit-content !important;
  max-width: fit-content;
  text-align: center;
  white-space: nowrap;
  font-style: italic;
  font-weight: bold;
  color: white;
  text-transform: uppercase;
  padding: var(--btn-pad-y) 0.6rem;
}
@keyframes marquee {
  0% {
    transform: translate3d(var(--move-initial), 0, 0);
  }
  100% {
    transform: translate3d(var(--move-final), 0, 0);
  }
}
.my-form {
  --form-shadow: 0 0 64px 0 var(--action-trans-50);
  animation: formGlow 3s ease-in-out infinite alternate;
}
@keyframes formGlow {
  0% {
    box-shadow: 0 0 80px 0 var(--action-trans-10);
  }
  100% {
    box-shadow: 0 0 150px 0 var(--action-trans-40);
  }
}
.my-form label {
  font-family: "Aeonik", sans-serif;
  font-size: var(--text-xl);
  color: var(--white);
  text-transform: none;
  margin-top: calc(var(--space-xs) / 2);
  margin-bottom: var(--space-xs);
  line-height: 1.2;
}
.my-form label.choose-files {
  border: 1px dashed var(--primary-medium);
  border-radius: var(--radius-s);
  padding: var(--space-xs);
  font-size: var(--text-m);
  background: var(--primary);
  font-weight: 400;
  font-family: "Plus Jakarta Sans";
}
.my-form input, .my-form textarea {
  border-radius: var(--radius-xs);
  padding: 1rem 2rem;
  border-width: 1px;
  font-size: calc(var(--text-m) * 1.2);
}
.my-form input:focus, .my-form input:focus-within, .my-form input:focus-visible, .my-form textarea:focus, .my-form textarea:focus-within, .my-form textarea:focus-visible {
  box-shadow: var(--form-shadow);
  border: 2px solid var(--action) !important;
  outline-style: none;
  background: var(--black);
}
.my-form input[type="file"], .my-form textarea[type="file"] {
  padding: 0;
}
.my-form textarea {
  border-radius: var(--radius-xs);
}
.my-form.form--dark input, .my-form.form--dark textarea {
  border-color: var(--primary-ultra-dark);
  background: var(--primary-hover);
  color: var(--white);
}
.my-form.form--dark input::placeholder, .my-form.form--dark textarea::placeholder {
  color: var(--primary-ultra-dark);
}
.my-form .btn--form {
  background: var(--btn-background);
  color: var(--btn-text-color);
  padding-block: var(--btn-padding-block);
  padding-inline: var(--btn-padding-inline);
  min-inline-size: var(--btn-min-width);
  line-height: var(--btn-line-height);
  font-size: var(--btn-font-size, var(--text-m));
  font-weight: var(--btn-font-weight);
  font-style: var(--btn-font-style);
  text-transform: var(--btn-text-transform);
  letter-spacing: var(--btn-letter-spacing);
  text-decoration: var(--btn-text-decoration);
  border-width: var(--btn-border-width);
  border-style: var(--btn-border-style);
  border-radius: var(--btn-radius);
  border-color: var(--btn-border-color);
  transition: var(--btn-transition, var(--transition));
  justify-content: var(--btn-justify-content, center);
  text-align: var(--btn-text-align, center);
}
@media (hover: hover) and (pointer: fine) {
  .my-form .btn--form:hover {
    background: var(--btn-background-hover);
    color: var(--btn-text-color-hover);
    border-color: var(--btn-border-color-hover);
    text-decoration: var(--btn-text-decoration-hover);
  }
}
.my-form .btn--form:focus {
  outline-style: solid;
  outline-color: var(--focus-color);
  outline-width: var(--focus-width);
  outline-offset: var(--focus-offset);
}
.my-form .btn--form.step-progress {
  background-color: var(--action);
  color: white;
}
.my-form .btn--form.step-progress:hover {
  background-color: var(--action-hover);
}
.my-form .contact-form__btn button[disabled="disabled"] {
  opacity: 0.5;
  pointer-events: none;
}
.my-form .checkbox-cards-wrapper label, .my-form .radio-cards-wrapper label {
  margin-bottom: var(--space-m);
}
.my-form .checkbox-cards-wrapper ul.options-wrapper, .my-form .radio-cards-wrapper ul.options-wrapper {
  gap: 1.5rem;
  display: flex;
  flex-direction: column;
}
.my-form .checkbox-cards-wrapper .checkbox-card label, .my-form .checkbox-cards-wrapper .radio-card label, .my-form .radio-cards-wrapper .checkbox-card label, .my-form .radio-cards-wrapper .radio-card label {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1.6rem;
  margin-block: 0;
}
.my-form .checkbox-cards-wrapper .checkbox-card label:hover, .my-form .checkbox-cards-wrapper .radio-card label:hover, .my-form .radio-cards-wrapper .checkbox-card label:hover, .my-form .radio-cards-wrapper .radio-card label:hover {
  border-color: var(--action);
  box-shadow: var(--form-shadow);
}
.my-form .checkbox-cards-wrapper .radio-card label, .my-form .radio-cards-wrapper .radio-card label {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
}
.my-form .simple-checkbox {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
}
.my-form .simple-checkbox label {
  margin: 0;
  color: var(--white);
}
.my-form .simple-checkbox label a {
  color: var(--action-medium);
  text-decoration: underline;
  text-underline-offset: 0.3em;
  transition: all 0.2s ease-in-out;
}
.my-form .simple-checkbox label a:hover {
  color: var(--white);
  text-underline-offset: 0.4em;
}
.my-form .simple-checkbox input {
  border-width: 2px;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0px;
  cursor: pointer;
}
.my-form .simple-checkbox input:checked {
  background: #7FFFD4;
  border-color: #7FFFD4;
}
.my-form .contact-form__slider {
  margin-block-start: var(--space-xl);
}
.my-form .contact-form__slider label {
  display: none;
}
.my-form .contact-form__slider .noUi-target {
  box-shadow: none;
  border: 0px;
  background: transparent;
}
.my-form .contact-form__slider .noUi-target .noUi-connects {
  border: 1px solid var(--primary-ultra-dark);
  border-radius: 0.75rem;
}
.my-form .contact-form__slider .noUi-target .noUi-handle {
  width: 2rem;
  height: 4rem;
}
.my-form .contact-form__slider .noUi-tooltip {
  background: var(--primary-hover);
  border: 1px solid var(--primary-ultra-dark);
  color: var(--white);
  box-shadow: 0 0 40px 0 var(--action-trans-50);
  padding-inline: 1rem;
  border-radius: 0.75rem;
}
@-webkit-keyframes animated-wave {
  from {
    background-position: 0px 1px;
  }
  to {
    background-position: 0px 500px;
  }
}
@keyframes animated-wave {
  from {
    background-position: 0px 1px;
  }
  to {
    background-position: 0px 500px;
  }
}
body.home, body.home main {
  overflow-x: hidden;
}
/* ==============================
HOME PAGE
============================== */
.pill {
  transition: all 0.3s ease-in-out;
}
.pill .pill__image {
  transition: all 0.3s ease-in-out;
}
.pill:hover .pill__image--maneki {
  transform: rotateZ(0deg);
  top: 0px;
}
.pill:hover .pill__image--rocket {
  transform: rotateZ(0deg) translateX(0px);
  top: -20px;
}
/* ==============================
BACKGROUND
============================== */
.bg-dotted {
  position: relative;
  isolation: isolate;
}
.bg-dotted:after {
  content: "";
  inset: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  background-repeat: repeat;
  background-size: 450px;
  z-index: -1;
}
.bg-dotted.bg-dotted--accent:after {
  background-image: url(https://knut.cat/wp-content/uploads/bg-dotted-accent.png);
  opacity: 0.15;
}
.bg-dotted.bg-dotted--base:after {
  background-image: url(https://knut.cat/wp-content/uploads/bg-dotted-base.png);
  opacity: 0.5;
}
body.post-type-archive-projectes {
  overflow-x: hidden;
}
.project-media .project-media__image {
  border-radius: var(--radius-m);
  overflow: hidden;
  aspect-ratio: 1.7777777778;
}
.project-media.grid--auto-2 .project-media__image, .project-media.grid--auto-3-2 .project-media__image, .project-media.grid--auto-2-3 .project-media__image, .project-media.grid--auto-3 .project-media__image {
  aspect-ratio: 1;
}
@media (max-width: 992px) {
  .project-media .project-media__image, .project-media .project-media__video {
    aspect-ratio: 1 !important;
    border-radius: var(--radius-xs);
  }
}
.project-media .project-media__video + .project-media__video {
  aspect-ratio: 1;
}
.project-media + .project-media.grid--auto-2, .project-media + .project-media.grid--auto-3-2, .project-media + .project-media.grid--auto-2-3, .project-media + .project-media.grid--auto-3 {
  margin-top: calc(var(--space-xl) * -1 + var(--space-s));
}
.project-media + .project-media {
  margin-top: calc(var(--space-xl) * -1 + var(--space-s));
}
.project-media.grid--auto-2 + .project-media, .project-media.grid--auto-3-2 + .project-media, .project-media.grid--auto-2-3 + .project-media, .project-media.grid--auto-3 + .project-media {
  margin-top: calc(var(--space-xl) * -1 + var(--space-s));
}
.project-card {
  transition: all 0.3s ease-in-out;
}
.project-card__image, .project-card__image::before {
  transition: all 0.3s ease-in-out;
}
.project-card__image::before {
  opacity: 0.4;
}
.project-card:hover .project-card__image {
  transform: scale(1.1);
}
.project-card:hover .project-card__image::before {
  opacity: 0.8;
}
.blog-post-content__content h2 {
  font-size: calc(var(--h3) * 0.9);
  max-width: 24ch;
}
.blog-post-content__content h3 {
  font-size: calc(var(--h4) * 1.1);
  color: var(--action);
  max-width: 32ch;
}
.blog-post-content__content h4 {
  font-size: calc(var(--h5) * 1.2);
}
.blog-post-content__content p, .blog-post-content__content ul, .blog-post-content__content ol {
  font-size: calc(var(--text-l) * 0.95);
  line-height: 1.6;
  color: var(--primary-ultra-dark);
  max-width: 56ch;
}
.blog-post-content__content blockquote {
  margin-block: 2em;
  font-family: "Aeonik", sans-serif;
  border-left-color: var(--action);
}
.blog-post-content__content blockquote p {
  font-size: var(--text-xl);
  color: var(--primary);
  max-width: 40ch;
  line-height: 1.3;
}
.blog-post-content__content figure {
  margin-block: 4rem;
}
.blog-post-content__content figure img {
  width: 100%;
  border-radius: var(--radius-s);
}
.blog-post-content__content a.btn--action {
  margin-top: var(--space-m);
}
.blog-post-content__content .intro {
  font-size: var(--text-xl);
  font-family: "Aeonik", sans-serif;
  line-height: 1.3;
  color: var(--primary);
}
.blog-post-content__content .tldr {
  padding: var(--space-m);
  border-radius: var(--radius-xs);
  background: white;
  margin-block: var(--space-l) var(--space-m);
}
.blog-post-content__content .tldr p {
  font-size: calc(var(--text-m) * 1.2);
  max-width: 100%;
}
.blog-post-content__content .tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 2px dotted var(--primary-dark);
  color: var(--primary-ultra-dark);
  font-size: var(--text-l);
}
.blog-post-content__content .tooltip .tooltip__text {
  visibility: hidden;
  font-size: var(--text-s);
  width: max-content;
  min-width: 200px;
  background-color: var(--primary-ultra-dark);
  color: var(--white);
  text-align: left;
  border-radius: 0.4rem;
  padding: 0.8rem;
  position: absolute;
  top: 0;
  left: 110%;
  z-index: 1;
}
.blog-post-content__content .tooltip:hover .tooltip__text {
  visibility: visible;
}