/* Ensure all elements inherit the color from its parent */
            a,
            .w-input,
            .w-select,
            .w-tab-link,
            .w-nav-link,
            .w-nav-brand,
            .w-dropdown-btn,
            .w-dropdown-toggle,
            .w-slider-arrow-left,
            .w-slider-arrow-right,
            .w-dropdown-link {
              color: inherit;
              text-decoration: none;
              font-size: inherit;
            }

            /* Focus state style for keyboard navigation for the focusable elements */
            *[tabindex]:focus-visible,
            input[type="file"]:focus-visible {
             /* outline: 0.125rem solid #4d65ff;
              outline-offset: 0.125rem; */
            }

            /* Get rid of top margin on first element in any rich text element */
            .w-richtext> :not(div):first-child,
            .w-richtext>div:first-child> :first-child {
              margin-top: 0 !important;
            }

            /* Get rid of bottom margin on last element in any rich text element */
            .w-richtext>:last-child,
            .w-richtext ol li:last-child,
            .w-richtext ul li:last-child {
              margin-bottom: 0 !important;
            }

            /* Prevent all click and hover interaction with an element */
            .pointer-events-off {
              pointer-events: none;
            }

            /* Enables all click and hover interaction with an element */
            .pointer-events-on {
              pointer-events: auto;
            }

            /* Create a class of .div-square which maintains a 1:1 dimension of a div */
            .div-square::after {
              content: "";
              display: block;
              padding-bottom: 100%;
            }

            /* Make sure containers never lose their center alignment */
            .container-medium,
            .container-small,
            .container-large {
              margin-right: auto !important;
              margin-left: auto !important;
            }

            /* Apply "..." after 3 lines of text */
            .text-style-3lines {
              display: -webkit-box;
              overflow: hidden;
              -webkit-line-clamp: 3;
              -webkit-box-orient: vertical;
            }

            /* Apply "..." after 2 lines of text */
            .text-style-2lines {
              display: -webkit-box;
              overflow: hidden;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
            }

            /* Adds inline flex display */
            .display-inlineflex {
              display: inline-flex;
            }

            /* These classes are never overwritten */
            .hide {
              display: none !important;
            }

            /* Remove default Webflow chevron from form select */
            select {
              -webkit-appearance: none;
            }

            @media screen and (max-width: 991px) {

              .hide,
              .hide-tablet {
                display: none !important;
              }
            }

            @media screen and (max-width: 767px) {
              .hide-mobile-landscape {
                display: none !important;
              }
            }

            @media screen and (max-width: 479px) {
              .hide-mobile {
                display: none !important;
              }
            }

            .margin-0 {
              margin: 0rem !important;
            }

            .padding-0 {
              padding: 0rem !important;
            }

            .spacing-clean {
              padding: 0rem !important;
              margin: 0rem !important;
            }

            .margin-top {
              margin-right: 0rem !important;
              margin-bottom: 0rem !important;
              margin-left: 0rem !important;
            }

            .padding-top {
              padding-right: 0rem !important;
              padding-bottom: 0rem !important;
              padding-left: 0rem !important;
            }

            .margin-right {
              margin-top: 0rem !important;
              margin-bottom: 0rem !important;
              margin-left: 0rem !important;
            }

            .padding-right {
              padding-top: 0rem !important;
              padding-bottom: 0rem !important;
              padding-left: 0rem !important;
            }

            .margin-bottom {
              margin-top: 0rem !important;
              margin-right: 0rem !important;
              margin-left: 0rem !important;
            }

            .padding-bottom {
              padding-top: 0rem !important;
              padding-right: 0rem !important;
              padding-left: 0rem !important;
            }

            .margin-left {
              margin-top: 0rem !important;
              margin-right: 0rem !important;
              margin-bottom: 0rem !important;
            }

            .padding-left {
              padding-top: 0rem !important;
              padding-right: 0rem !important;
              padding-bottom: 0rem !important;
            }

            .margin-horizontal {
              margin-top: 0rem !important;
              margin-bottom: 0rem !important;
            }

            .padding-horizontal {
              padding-top: 0rem !important;
              padding-bottom: 0rem !important;
            }

            .margin-vertical {
              margin-right: 0rem !important;
              margin-left: 0rem !important;
            }

            .padding-vertical {
              padding-right: 0rem !important;
              padding-left: 0rem !important;
            }

            /* Apply "..." at 100% width */
            .truncate-width {
              width: 100%;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }

            /* Removes native scrollbar */
            .no-scrollbar {
              -ms-overflow-style: none;
              overflow: -moz-scrollbars-none;
            }

            .no-scrollbar::-webkit-scrollbar {
              display: none;
            }
          </style>
        </div>
        <div class="color-schemes w-embed">
          <style>
            /* Color Schemes Controls*/
            <meta name="relume-color-schemes" content="false" />.color-scheme-1 {
              /*All sections should point to Color Scheme 1*/
            }

            .color-scheme-2 {
              --color-scheme-1--text: var(--color-scheme-2--text);
              --color-scheme-1--background: var(--color-scheme-2--background);
              --color-scheme-1--foreground: var(--color-scheme-2--foreground);
              --color-scheme-1--border: var(--color-scheme-2--border);
              --color-scheme-1--accent: var(--color-scheme-2--accent);
            }

            .color-scheme-3 {
              --color-scheme-1--text: var(--color-scheme-3--text);
              --color-scheme-1--background: var(--color-scheme-3--background);
              --color-scheme-1--foreground: var(--color-scheme-3--foreground);
              --color-scheme-1--border: var(--color-scheme-3--border);
              --color-scheme-1--accent: var(--color-scheme-3--accent);
            }

            .color-scheme-4 {
              --color-scheme-1--text: var(--color-scheme-4--text);
              --color-scheme-1--background: var(--color-scheme-4--background);
              --color-scheme-1--foreground: var(--color-scheme-4--foreground);
              --color-scheme-1--border: var(--color-scheme-4--border);
              --color-scheme-1--accent: var(--color-scheme-4--accent);
            }

            .color-scheme-5 {
              --color-scheme-1--text: var(--color-scheme-5--text);
              --color-scheme-1--background: var(--color-scheme-5--background);
              --color-scheme-1--foreground: var(--color-scheme-5--foreground);
              --color-scheme-1--border: var(--color-scheme-5--border);
              --color-scheme-1--accent: var(--color-scheme-5--accent);
            }

            .color-scheme-6 {
              --color-scheme-1--text: var(--color-scheme-6--text);
              --color-scheme-1--background: var(--color-scheme-6--background);
              --color-scheme-1--foreground: var(--color-scheme-6--foreground);
              --color-scheme-1--border: var(--color-scheme-6--border);
              --color-scheme-1--accent: var(--color-scheme-6--accent);
            }

            .color-scheme-7 {
              --color-scheme-1--text: var(--color-scheme-7--text);
              --color-scheme-1--background: var(--color-scheme-7--background);
              --color-scheme-1--foreground: var(--color-scheme-7--foreground);
              --color-scheme-1--border: var(--color-scheme-7--border);
              --color-scheme-1--accent: var(--color-scheme-7--accent);
            }

            .color-scheme-8 {
              --color-scheme-1--text: var(--color-scheme-8--text);
              --color-scheme-1--background: var(--color-scheme-8--background);
              --color-scheme-1--foreground: var(--color-scheme-8--foreground);
              --color-scheme-1--border: var(--color-scheme-8--border);
              --color-scheme-1--accent: var(--color-scheme-8--accent);
            }

            .color-scheme-9 {
              --color-scheme-1--text: var(--color-scheme-9--text);
              --color-scheme-1--background: var(--color-scheme-9--background);
              --color-scheme-1--foreground: var(--color-scheme-9--foreground);
              --color-scheme-1--border: var(--color-scheme-9--border);
              --color-scheme-1--accent: var(--color-scheme-9--accent);
            }

            .color-scheme-10 {
              --color-scheme-1--text: var(--color-scheme-10--text);
              --color-scheme-1--background: var(--color-scheme-10--background);
              --color-scheme-1--foreground: var(--color-scheme-10--foreground);
              --color-scheme-1--border: var(--color-scheme-10--border);
              --color-scheme-1--accent: var(--color-scheme-10--accent);
            }

            /* Inherit slider dot colors */
            .w-slider-dot {
              background-color: var(--color-scheme-1--text);
              opacity: 0.20;
            }

            .w-slider-dot.w-active {
              background-color: var(--color-scheme-1--text);
              opacity: 1;
            }

            /* Override .w-slider-nav-invert styles */
            .w-slider-nav-invert .w-slider-dot {
              background-color: var(--color-scheme-1--text) !important;
              opacity: 0.20 !important;
            }

            .w-slider-nav-invert .w-slider-dot.w-active {
              background-color: var(--color-scheme-1--text) !important;
              opacity: 1 !important;
            }
          </style>
        </div>
      </div>
      <div class="custom-css w-embed">
        <style>
          :root {
            --nav-bg-height: calc(20em + calc(2em + 3em + 2.5em + 3em));
            --cubic-default: cubic-bezier(0.525, 0, 0, 1);
            --duration-fast: 0.2s;
            --duration-normal: 0.450s;
            --color-dark: #000000;
          }

          a {
            color: inherit;
            text-decoration: none !important;
          }

          a:focus-visible,
          button:focus-visible {
           /* outline: 1px solid var(--color-dark); */
          }

          .nav-bg {
            transition: height var(--duration-normal) var(--cubic-default);
          }

          .page-bg {
            transition: opacity var(--duration-fast) var(--cubic-default);
          }

          .nav {
            transition: color var(--duration-fast) var(--cubic-default);
          }

          .nav-button {
            transition: all var(--duration-fast) var(--cubic-default);
          }

          /* ———— SHOW DROPDOWN ———— */
          .nav-dropdown {
            transition: all var(--duration-fast) ease, transform var(--duration-normal) var(--cubic-default);
          }

          [data-dropdown-toggle]:not([data-dropdown-toggle="closed"]):hover+.nav-dropdown,
          [data-dropdown-toggle]:not([data-dropdown-toggle="closed"]):focus-visible+.nav-dropdown,
          [data-dropdown-toggle]:not([data-dropdown-toggle="closed"])+.nav-dropdown:hover,
          [data-dropdown-toggle]:not([data-dropdown-toggle="closed"])+.nav-dropdown:focus-within,
          .wf-design-mode [data-dropdown-toggle="open"]+.nav-dropdown {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
          }

          /*———— STYLING WHEN DROPDOWN IS OPEN ———— */
          :is(body:has([data-dropdown-toggle]:not([data-dropdown-toggle="closed"]):hover),
            body:has([data-dropdown-toggle]:not([data-dropdown-toggle="closed"]):focus-visible),
            body:has([data-dropdown-toggle]:not([data-dropdown-toggle="closed"]):focus-within),
            body:has([data-dropdown-toggle]:not([data-dropdown-toggle="closed"])+.nav-dropdown:hover),
            body:has([data-dropdown-toggle]:not([data-dropdown-toggle="closed"])+.nav-dropdown:focus-within)),
          .wf-design-mode body:has([data-dropdown-toggle="open"]) {
            .nav-bg {
              height: var(--nav-bg-height);
            }

            .page-bg {
              opacity: 1;
            }

            .nav {
              /* color: var(--color-dark); */

            }

            .nav-button {
              border-color: var(--color-dark);
              background-color: var(--_primitives---colors--white);
              color: var(--_primitives---colors--neutral-darkest);
            }

            .nav-button.is--primary {
             
              background-color: var(--_primitives---colors--red);
              border-color: var(--_primitives---colors--red);
              color: #FFF; 
            }
          }

          /*———— DROPDOWN TOGGLE ———— */
          .nav-link__dropdown-icon {
            transition: transform var(--duration-normal) var(--cubic-default);
          }

          [data-dropdown-toggle] {
            transition: background-color var(--duration-fast) var(--cubic-default);
          }

          /*———— DESKTOP HOVER AND FOCUS ———— */
          @media screen and (min-width: 768px) {

            [data-dropdown-toggle]:not([data-dropdown-toggle="closed"]):hover .nav-link__dropdown-icon,
            [data-dropdown-toggle]:not([data-dropdown-toggle="closed"]):focus .nav-link__dropdown-icon,
            [data-dropdown-toggle]:not([data-dropdown-toggle="closed"]):focus-within .nav-link__dropdown-icon,
            [data-dropdown-toggle]:not([data-dropdown-toggle="closed"]):has(+ .nav-dropdown:hover) .nav-link__dropdown-icon,
            [data-dropdown-toggle]:not([data-dropdown-toggle="closed"]):has(+ .nav-dropdown:focus-within) .nav-link__dropdown-icon {
              transform: rotate(180deg);
            }

            [data-dropdown-toggle]:not([data-dropdown-toggle="closed"]):hover,
            [data-dropdown-toggle]:not([data-dropdown-toggle="closed"]):focus,
            [data-dropdown-toggle]:not([data-dropdown-toggle="closed"]):focus-within,
            [data-dropdown-toggle]:not([data-dropdown-toggle="closed"]):has(+ .nav-dropdown:hover),
            [data-dropdown-toggle]:not([data-dropdown-toggle="closed"]):has(+ .nav-dropdown:focus-within),
            .wf-design-mode body:has([data-dropdown-toggle="open"])+.nav-dropdown {
              background-color: var(--_primitives---colors--red);
            }
          }

          /*————  DROPDOWN CONTENT LIST ITEMS ———— */
          .nav-dropdown__content-li {
            transition: all var(--duration-normal) var(--cubic-default);
            transition-delay: 0.18s;
            opacity: 0;
            transform: translate(4em, 0px);
          }

          .nav-dropdown__content-li:nth-child(2) {
            transition-delay: 0.24s;
          }

          .nav-dropdown__content-li:nth-child(3) {
            transition-delay: 0.3s;
          }

          .nav-dropdown__content-li:nth-child(4) {
            transition-delay: 0.36s;
          }

          .nav-dropdown__content-li:nth-child(5) {
            transition-delay: 0.44s;
          }

          body:has([data-dropdown-toggle]:not([data-dropdown-toggle="closed"]):hover) [data-dropdown-toggle]:not([data-dropdown-toggle="closed"]):hover+.nav-dropdown .nav-dropdown__content-li,
          body:has([data-dropdown-toggle]:not([data-dropdown-toggle="closed"]):focus-visible) .nav-dropdown__content-li,
          body:has([data-dropdown-toggle]:not([data-dropdown-toggle="closed"]):focus-within) .nav-dropdown__content-li,
          body:has([data-dropdown-toggle]:not([data-dropdown-toggle="closed"])+.nav-dropdown:hover) .nav-dropdown__content-li,
          body:has([data-dropdown-toggle]:not([data-dropdown-toggle="closed"])+.nav-dropdown:focus-within) .nav-dropdown__content-li,
          .wf-design-mode [data-dropdown-toggle="open"]+.nav-dropdown .nav-dropdown__content-li {
            opacity: 1;
            transform: translate(0em, 0px);
          }

          /*————  DROPDOWN LINKS + IMAGES ———— */
          .nav-dropdown__link:hover .nav-dropdown__img-overlay,
          .nav-dropdown__link:focus-visible .nav-dropdown__img-overlay {
            opacity: 0;
          }

          .nav-dropdown__link:hover .nav-dropdown__img,
          .nav-dropdown__link:focus-visible .nav-dropdown__img {
            transform: scale(1.1);
          }

          /*———— DROPDOWN LINKS ———— */
          .nav-dropdown__link.is--static:hover,
          .nav-dropdown__link.is--static:focus-visible {
            background: #D7D1CD;
          }

          /* ———— NAV LINKS ———— */
          a.nav-link .nav-link__label::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: -1px;
            width: 100%;
            height: 1px;
            background: currentColor;
            transition: transform var(--duration-normal) var(--cubic-default);
            transform: scale(0, 1);
            transform-origin: right center;
            text-decoration: none;
          }

          a.nav-link:hover .nav-link__label::after,
          a.nav-link:focus-visible .nav-link__label::after {
            transform: scale(1, 1);
            transform-origin: left center;
          }

          /* ———— MOBILE STATE WITH BURGER MENU ———— */
          @media screen and (max-width: 767px) {
            :root {
              --nav-bg-height: 100dvh;
            }

            .nav-dropdown__overflow {
              transition: grid-template-rows var(--duration-normal) var(--cubic-default);
            }

            .nav-center {
              transition: all var(--duration-normal) var(--cubic-default), opacity var(--duration-fast) var(--cubic-default);
            }

            .menu-button__line {
              transition: all var(--duration-normal) var(--cubic-default);
            }

            /* ———— STYLES WHEN MENU IS OPEN ———— */
            :is([data-menu-status="open"]) {
              color: var(--color-dark);
              color: #fff;

              .menu-button__line:nth-of-type(1) {
                transform: translate(0px, 0.125em) rotate(135deg);
               /* background-color: #FFF; */
              }

              .menu-button__line:nth-of-type(2) {
                transform: translate(0px, -0.175em) rotate(-135deg);
                background-color: #FFF;
              }

              .nav-bg {
                height: var(--nav-bg-height);
              }

              .page-bg {
                opacity: 1;
              }

              /* .nav-button.is--primary {
                background-color: var(--color-dark);
                border-color: var(--color-dark);
                color: #FFF;
              } */

              .nav-center {
                opacity: 1;
                visibility: visible;
                transform: translate(0px, 0em);
                transition-delay: 0.1s;
              }
            }

            [data-dropdown-toggle="open"]+.nav-dropdown .nav-dropdown__overflow {
              grid-template-rows: 1fr;
            }

            [data-dropdown-toggle="open"]+.nav-dropdown .nav-dropdown__content-li {
              opacity: 1;
              transform: translate(0em, 0px);
            }

            [data-dropdown-toggle="open"] .nav-link__dropdown-icon {
              transform: rotate(180deg);
            }
          }

          /* LOGO POR DEFECTO (visible siempre que el menú esté cerrado) */
          .nav-logo__img { 
           
          } 

          /* LOGO CUANDO EL MENÚ ESTÁ ABIERTO (TODAS LAS RESOLUCIONES) */
          [data-menu-status="open"] .nav-logo__img,
          :is(body:has([data-dropdown-toggle]:not([data-dropdown-toggle="closed"]):hover),
            body:has([data-dropdown-toggle]:not([data-dropdown-toggle="closed"]):focus-visible),
            body:has([data-dropdown-toggle]:not([data-dropdown-toggle="closed"]):focus-within),
            body:has([data-dropdown-toggle]:not([data-dropdown-toggle="closed"])+.nav-dropdown:hover),
            body:has([data-dropdown-toggle]:not([data-dropdown-toggle="closed"])+.nav-dropdown:focus-within)) .nav-logo__img,
          .wf-design-mode body:has([data-dropdown-toggle="open"]) .nav-logo__img {
            background-image: url("https://cdn.prod.website-files.com/694ba1758a4649b7c577f314/694ba1778a4649b7c577f3bf_28720272a293a25991c9b4becd0d4097_Logo.png");
          
          }
          
          /* 1. Aseguramos que el nav tenga una transición para que el cambio sea suave */
nav.nav {
  transition: background-image 0.4s ease, background-color 0.4s ease;
}

/* 2. Cuando se hace scroll, aplicamos el gradiente solo al nav */
nav.nav.is-scrolled {
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.3) 100%);
  backdrop-filter: blur(5px);
  /* Opcional: un color sólido si el gradiente no fuera suficiente */
  background-color: transparent; 
}

/* 3. Nos aseguramos de NO afectar al page-bg con el scroll */
nav.nav.is-scrolled .page-bg {
  /* Dejamos que el JS del dropdown controle este elemento */
  background-image: none;
}

/* 1. Definimos la transición en los estados base para que sea fluida */
.nav-logo__img {
  transition: height 0.4s ease-in-out, width 0.4s ease-in-out;
}

.nav-container {
  transition: padding 0.4s ease-in-out, min-height 0.4s ease-in-out;
}

/* 2. Cuando se hace scroll, reducimos el logo al 70% */
.nav.is-scrolled .nav-logo__img {
  height: 70px; /* 70% de los 100px originales */
  /* width: auto;  */ /* Mantiene la proporción */
}

/* 3. Reducimos también el espacio del contenedor para que el menú sea menos alto */
.nav.is-scrolled .nav-container {
  padding-top: 10px;    /* Ajusta estos valores según prefieras */
  padding-bottom: 10px;
  min-height: auto;     /* Permite que colapse un poco */
}