/* ==========================================================================
   Navbar Corevia — trasladado a Nuevo Alisos
   --------------------------------------------------------------------------
   Fuente: _REFERENCIAS_COREVIA/corevia-original.zip
     · Corevia-main/src/styles/webflow.css
     · Corevia-main/src/styles/components.css

   Las reglas de las secciones 2 y 3 son las de Corevia sin reinterpretar:
   mismos tamanos, radios, espaciados, transiciones, easing, duraciones,
   escalas y breakpoints. Lo unico propio de Nuevo Alisos es el mapeo de
   tokens de marca (seccion 1) y la ubicacion dentro del wrapper (seccion 4).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1 · Tokens
   Nombres de Webflow preservados para que las reglas copiadas resuelvan.
   Los valores de marca salen de DESIGN.md y de la referencia aprobada de
   Nuevo Alisos; el resto son los de Corevia tal cual.
   -------------------------------------------------------------------------- */
:root {
  /* Escala de tamanos — Corevia */
  --_sizes---fixed--0-25rem: .25rem;
  --_sizes---fixed--0-5rem: .5rem;
  --_sizes---fixed--0-75rem: .75rem;
  --_sizes---fixed--1rem: 1rem;
  --_sizes---fixed--1-75rem: 1.75rem;
  --_sizes---fixed--2rem: 2rem;
  --_sizes---fixed--2-5rem: 2.5rem;
  --_sizes---fixed--3rem: 3rem;
  --_sizes---fixed--15rem: 15rem;

  /* Tipografia — Corevia */
  /* Figtree para todo: cuerpo y titulares comparten familia. El sans del
     sistema queda como respaldo si falla la carga remota. */
  --_typography---font-family--body: var(--font-sans);
  --_typography---font-family--headers: var(--font-sans);
  --_typography---font-weight--regular: 400;
  --_typography---font-weight--medium: 500;
  --_typography---button--font-family: var(--_typography---font-family--body);
  --_typography---button--font-size: var(--_sizes---fixed--1rem);
  --_typography---button--line-height: 1.5;
  --_typography---button--font-weight: var(--_typography---font-weight--medium);
  /* El valor original -.08em venia calibrado para otra familia: con Figtree
     aprieta las letras y el CTA se lee condensado al lado de los links del
     menu, que van con tracking natural. Los botones comparten ahora ese mismo
     ritmo; la jerarquia la siguen dando peso y tamano. */
  --_typography---button--letter-spacing: normal;
  --_typography---base--font-size: var(--_sizes---fixed--1rem);
  --_typography---base--line-height: 1.5;
  --_typography---sm--font-size: .875rem;

  /* Marca Nuevo Alisos — sustituye la paleta de Corevia
     bg-primary : superficie oscura del proyecto (navbar y panel movil)
     bg-subtle  : pildora deslizante del track
     bg-default : fondo del CTA (naranja principal)
     text-base  : tinta sobre pildora y sobre CTA (8.0:1 sobre el naranja) */
  --base--white: #FFFFFF;
  --bg-color--bg-primary: #0D0D0D;
  --bg-color--bg-subtle: #FFFFFF;
  --bg-color--bg-default: #F58327;
  --text-color--text-base: #151515;
  --text-color--text-on-primary: #FFFFFF;
  --text-color--text-subtle: #B6B6B6;
  --text-color--text-secondary: #939393;
  --main--primary: var(--bg-color--bg-primary);
  --grey--white-10: #ffffff0a;
  /* Acento del item activo/hover dentro del panel movil (verde en Corevia) */
  --base--green-200: #F58327;
}

/* --------------------------------------------------------------------------
   2 · webflow.css — reglas del navbar y del button_component (verbatim)
   -------------------------------------------------------------------------- */
.w-inline-block {
  max-width: 100%;
  display: inline-block;
}

.w-nav {
  position: relative;
  background: #dddddd;
  z-index: 1000;
}

.w-nav:before,
.w-nav:after {
  content: " ";
  display: table;
  grid-column-start: 1;
  grid-row-start: 1;
  grid-column-end: 2;
  grid-row-end: 2;
}

.w-nav:after {
  clear: both;
}

.w-nav-brand {
  position: relative;
  float: left;
  text-decoration: none;
  color: #333333;
}

.w-nav-link {
  position: relative;
  display: inline-block;
  vertical-align: top;
  text-decoration: none;
  color: #222222;
  padding: 20px;
  text-align: left;
  margin-left: auto;
  margin-right: auto;
}

.w-nav-link.w--current {
  color: #0082f3;
}

.w-nav-menu {
  position: relative;
  float: right;
}

.w-nav-button {
  position: relative;
  float: right;
  padding: 18px;
  font-size: 24px;
  display: none;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  tap-highlight-color: rgba(0, 0, 0, 0);
  user-select: none;
}

.w-nav-button:focus {
  outline: 0;
}

.w-nav-button.w--open {
  background-color: #C8C8C8;
  color: white;
}

.w-nav[data-collapse='all'] .w-nav-menu {
  display: none;
}

.w-nav[data-collapse='all'] .w-nav-button {
  display: block;
}

@media screen and (max-width: 1179px) {
  .w-nav[data-collapse='medium'] .w-nav-menu {
    display: none;
  }
  .w-nav[data-collapse='medium'] .w-nav-button {
    display: block;
  }
}

@media screen and (max-width: 767px) {
  .w-nav[data-collapse='small'] .w-nav-menu {
    display: none;
  }
  .w-nav[data-collapse='small'] .w-nav-button {
    display: block;
  }
  .w-nav-brand {
    padding-left: 10px;
  }
}

@media screen and (max-width: 479px) {
  .w-nav[data-collapse='tiny'] .w-nav-menu {
    display: none;
  }
  .w-nav[data-collapse='tiny'] .w-nav-button {
    display: block;
  }
}

.padding-global {
  padding-right: var(--_sizes---fixed--2-5rem);
  padding-left: var(--_sizes---fixed--2-5rem);
  margin-left: auto;
  margin-right: auto;
}

.padding-global.is-navbar {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.container-medium {
  width: 100%;
  max-width: 73.5rem;
  margin-left: auto;
  margin-right: auto;
}

.bg-subtle {
  background-color: var(--bg-color--bg-subtle);
}

.navbar_content {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.navbar_logo-link {
  justify-content: center;
  align-items: center;
  position: relative;
}

.nav_wrap {
  padding: var(--_sizes---fixed--0-25rem);
  grid-column-gap: 3rem;
  grid-row-gap: 3rem;
  color: var(--text-color--text-subtle);
  border-radius: 3rem;
  justify-content: center;
  align-items: center;
  display: flex;
}

.nav_mobile {
  justify-content: center;
  align-items: center;
  display: flex;
}

.nav_buttons-wrap {
  grid-column-gap: 1.25rem;
  grid-row-gap: 1.25rem;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.login-wrap {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  justify-content: center;
  align-items: center;
  display: flex;
}

.nav-button_component {
  grid-row-gap: .5rem;
  background-color: #8f00ff;
  border-radius: 4px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 4rem;
  height: 4rem;
  padding-left: 1rem;
  padding-right: 1rem;
  display: flex;
}

.nav-button_component:hover {
  opacity: 1;
}

.nav-button_line {
  background-color: #292d32;
  border-radius: 2px;
  height: 5%;
}

.nav-button_line.is-first {
  transform-origin: 50%;
  transform: translate(0);
}

.nav-button_line.is-third {
  transform-origin: 50%;
}

.navbar {
  background-color: var(--bg-color--bg-primary);
  position: relative;
  top: 0;
}

.navbar_list {
  justify-content: center;
  align-items: center;
  display: flex;
}

.nav_links {
  padding: var(--_sizes---fixed--0-5rem) var(--_sizes---fixed--1rem);
  grid-column-gap: var(--_sizes---fixed--0-5rem);
  grid-row-gap: var(--_sizes---fixed--0-5rem);
  border-radius: var(--_sizes---fixed--3rem);
  color: var(--base--white);
  justify-content: center;
  align-items: center;
  margin-left: 0;
  transition: opacity .2s;
  display: flex;
}

.nav_links:hover {
  opacity: .8;
}

.nav_links.w--current {
  background-color: var(--bg-color--bg-subtle);
  opacity: 1;
  color: var(--text-color--text-base);
  font-weight: var(--_typography---font-weight--medium);
}

.bg-default {
  background-color: var(--bg-color--bg-default);
}

.text-tag {
  letter-spacing: .12em;
  text-transform: uppercase;
}

.button_component {
  padding: var(--_sizes---fixed--0-75rem) var(--_sizes---fixed--1-75rem);
  border-radius: var(--_sizes---fixed--15rem);
  background-color: var(--bg-color--bg-primary);
  font-family: var(--_typography---button--font-family);
  color: var(--text-color--text-on-primary);
  font-size: var(--_typography---button--font-size);
  line-height: var(--_typography---button--line-height);
  font-weight: var(--_typography---button--font-weight);
  letter-spacing: var(--_typography---button--letter-spacing);
  white-space: nowrap;
  justify-content: center;
  align-items: center;
  transition: background-color .2s;
  display: flex;
  position: relative;
}

.button_component:where(.w-variant-4054ea76-d9bc-6095-58ab-2d153e0e0fc3) {
  background-color: var(--bg-color--bg-default);
  color: var(--text-color--text-base);
}

.bg-transparent {
  background-color: var(--grey--white-10);
}

.button-content {
  flex-flow: row;
  justify-content: center;
  align-items: center;
  padding: 0 2px 0 0;
  display: flex;
  position: relative;
  overflow: clip;
}

.button-text.is-two, .button-text.is-bottom {
  position: absolute;
  inset: 0% 0% auto;
}

.button-text.is-bottom:where(.w-variant-4054ea76-d9bc-6095-58ab-2d153e0e0fc3) {
  transform: translate(0, 100%);
}

@media screen and (max-width: 1179px) {
  .padding-global {
    padding-right: var(--_sizes---fixed--2rem);
    padding-left: var(--_sizes---fixed--2rem);
  }
  .padding-global.is-navbar {
    padding-bottom: 1rem;
  }
  .container-medium {
    overflow: visible;
  }
  .navbar_content {
    justify-content: space-between;
    align-items: center;
  }
  .navbar_logo-link {
    justify-content: flex-start;
    align-items: center;
  }
  .nav_wrap {
    flex: 1;
    justify-content: flex-end;
    align-items: center;
    padding-right: 1rem;
  }
  .nav_wrap.bg-transparent, .nav_wrap.bg-subtle {
    background-color: #0000;
  }
  .nav_mobile {
    text-align: left;
    background-color: #0000;
    flex-flow: row;
    justify-content: flex-end;
    align-items: stretch;
    display: flex;
    position: absolute;
    inset: 110% 1rem auto;
  }
  .nav_buttons-wrap {
    grid-column-gap: 0rem;
    grid-row-gap: 0rem;
  }
  .menu-button {
    padding: 0 0 0 1rem;
  }
  .menu-button.w--open {
    color: #000;
    background-color: #0000;
  }
  .nav-button_component {
    grid-row-gap: .25rem;
    background-color: #fff;
    border-radius: .38rem;
    width: 2.5rem;
    height: 2.5rem;
    padding-left: .5rem;
    padding-right: .5rem;
    display: block;
    position: relative;
  }
  .nav-button_line {
    height: 5.5%;
    margin: auto;
    position: absolute;
    inset: 0% 15%;
  }
  .nav-button_line.is-first {
    transform: translate(0, -350%);
  }
  .nav-button_line.is-third {
    transform: translate(0, 350%);
  }
  .navbar_list {
    grid-column-gap: .75rem;
    grid-row-gap: .75rem;
    background-color: var(--bg-color--bg-primary);
    text-align: left;
    border: 1px solid #ebe9e5;
    border-radius: .75rem;
    flex-flow: column;
    justify-content: flex-start;
    align-items: flex-start;
    height: auto;
    padding: 1.5rem 2rem;
    position: relative;
  }
  .nav_links {
    padding: var(--_sizes---fixed--0-75rem) var(--_sizes---fixed--1rem);
  }
}

@media screen and (max-width: 767px) {
  .hide-mobile-landscape {
    display: none;
  }
  .padding-global {
    padding-right: var(--_sizes---fixed--1rem);
    padding-left: var(--_sizes---fixed--1rem);
  }
  .padding-global.is-navbar {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
  .nav_buttons-wrap {
    justify-content: space-between;
    align-items: center;
  }
  .nav-button_component {
    width: 2.25rem;
    height: 2.25rem;
  }
  .navbar_list {
    grid-column-gap: .5rem;
    grid-row-gap: .5rem;
    padding-bottom: 1rem;
    padding-left: .75rem;
    padding-right: 1.5rem;
  }
  .nav_links {
    padding: var(--_sizes---fixed--0-5rem) var(--_sizes---fixed--0-75rem);
  }
}

@media screen and (max-width: 479px) {
  .navbar_content {
    padding-left: 0;
  }
  .navbar_logo-link {
    padding-left: 0;
    padding-right: 0;
  }
  .nav-button_line.is-first, .nav-button_line.is-second, .nav-button_line.is-third {
    flex: none;
  }
  .navbar_list {
    grid-column-gap: 1rem;
    grid-row-gap: .5rem;
  }
}

/* --------------------------------------------------------------------------
   3 · components.css — pill, panel movil, hamburguesa y motion del CTA
   (verbatim)
   -------------------------------------------------------------------------- */
.menu-button.w-nav-button {
  appearance: none;
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
}

@media screen and (min-width: 1180px) {
  .navbar_list {
    position: relative;
  }
  .nav_pill {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
    width: var(--pill-w, 0);
    border-radius: var(--_sizes---fixed--3rem);
    background-color: var(--bg-color--bg-subtle);
    opacity: var(--pill-o, 0);
    transform: translateX(var(--pill-x, 0));
    pointer-events: none;
  }
  .nav_pill.is-ready {
    transition:
      transform 0.45s cubic-bezier(0.165, 0.84, 0.44, 1),
      width 0.45s cubic-bezier(0.165, 0.84, 0.44, 1),
      background-color 0.25s cubic-bezier(0.165, 0.84, 0.44, 1),
      opacity 0.25s;
  }
  .navbar.bg-default .nav_pill {
    background-color: var(--bg-color--bg-default);
  }
  .nav_links {
    position: relative;
    z-index: 1;
  }
  .nav_links.w--current {
    background-color: transparent;
  }
  .nav_links:hover {
    opacity: 1;
  }
  .nav_links:hover,
  .nav_links.w--current {
    color: var(--text-color--text-base);
    font-weight: var(--_typography---font-weight--medium);
  }
  .navbar_list:has(.nav_links:hover) .nav_links.w--current:not(:hover) {
    color: var(--base--white);
    font-weight: var(--_typography---font-weight--regular);
  }
}

.nav-panel {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: flex;
  flex-direction: column;
  justify-content: safe center;
  overflow-y: auto;
  padding-block: 6rem 2.5rem;
  background-color: var(--bg-color--bg-primary);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-1rem);
  transition:
    opacity 0.45s cubic-bezier(0.165, 0.84, 0.44, 1),
    transform 0.45s cubic-bezier(0.165, 0.84, 0.44, 1),
    visibility 0s 0.45s;
}

.navbar[data-nav-open='true'] + .nav-panel {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

@media screen and (min-width: 1180px) {
  .nav-panel {
    display: none;
  }
}

.nav-panel > .padding-global {
  width: 100%;
}

.nav-panel_list {
  display: block;
}

.navbar[data-nav-open='true'] {
  background-color: transparent;
}

.nav-panel_link {
  display: block;
  padding-block: 0.75rem 1.25rem;
  border-top: 1px solid #ffffff26;
  color: var(--text-color--text-on-primary);
  opacity: 0;
  transform: translateY(1.5rem);
  filter: blur(6px);
  transition:
    opacity 0.5s cubic-bezier(0.165, 0.84, 0.44, 1),
    transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1),
    filter 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* Entrada de herramienta, no seccion del proyecto: sin numero, tipografia
   menor y una separacion mas marcada que la de los items. Mantiene el mismo
   alto tocable y la misma animacion de entrada que el resto. */
.nav-panel_link--meta {
  margin-top: 1.5rem;
  border-top-color: #ffffff59;
}

.nav-panel_link--meta .nav-panel_label {
  font-size: 1.125rem;
  letter-spacing: -0.01em;
  color: var(--text-color--text-subtle);
}

.nav-panel_link--meta:hover .nav-panel_label,
.nav-panel_link--meta:focus-visible .nav-panel_label {
  color: var(--text-color--text-on-primary);
}

.nav-panel_cta {
  padding-top: 2.5rem;
  display: flex;
  opacity: 0;
  transform: translateY(1.5rem);
  filter: blur(6px);
  transition:
    opacity 0.5s cubic-bezier(0.165, 0.84, 0.44, 1),
    transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1),
    filter 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.navbar[data-nav-open='true'] + .nav-panel .nav-panel_link,
.navbar[data-nav-open='true'] + .nav-panel .nav-panel_cta {
  opacity: 1;
  transform: none;
  filter: blur(0);
  transition-delay: calc(0.12s + var(--row, 0) * 0.06s);
}

.nav-panel_cta .button_component {
  flex: 1;
  padding-block: 1rem;
}

.nav-panel_index {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--text-color--text-subtle);
  font-size: 0.75rem;
  transition: color 0.25s;
}

.nav-panel_label {
  display: block;
  font-family: var(--_typography---font-family--headers);
  font-size: 2.25rem;
  line-height: 1.1;
  letter-spacing: -0.04em;
  transition: transform 0.35s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.nav-panel_link.is-current .nav-panel_label,
.nav-panel_link.is-current .nav-panel_index {
  color: var(--base--green-200);
}

.nav-panel_link:hover .nav-panel_label,
.nav-panel_link:focus-visible .nav-panel_label {
  transform: translateX(0.75rem);
}

.nav-panel_link:hover .nav-panel_index,
.nav-panel_link:focus-visible .nav-panel_index {
  color: var(--base--green-200);
}

@media screen and (max-width: 479px) {
  .nav-panel {
    padding-block: 5.5rem 2rem;
  }
  .nav-panel_label {
    font-size: 1.875rem;
  }
  .nav-panel_link {
    padding-block: 0.625rem 1rem;
  }
}

.navbar .nav-button_line {
  transform: none;
  transition:
    rotate 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    translate 0.25s 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.navbar .nav-button_line.is-first {
  translate: 0 -350%;
  rotate: 0deg;
}

.navbar .nav-button_line.is-third {
  translate: 0 350%;
  rotate: 0deg;
}

.navbar .nav-button_line.is-second {
  scale: 1 1;
  transition: scale 0s 0.25s;
}

.navbar[data-nav-open='true'] .nav-button_line.is-first,
.navbar[data-nav-open='true'] .nav-button_line.is-third {
  translate: 0 0;
  transition:
    translate 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    rotate 0.25s 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.navbar[data-nav-open='true'] .nav-button_line.is-first {
  rotate: -45deg;
}

.navbar[data-nav-open='true'] .nav-button_line.is-third {
  rotate: 45deg;
}

.navbar[data-nav-open='true'] .nav-button_line.is-second {
  scale: 0 1;
}

.button_component .button-content {
  overflow: clip;
}

.button_component .button-text.is-bottom {
  transform: translateY(120%);
}

.button_component .button-text,
.button_component .button-text.is-bottom {
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.button_component {
  transition:
    background-color 0.2s,
    transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.button_component:hover .button-text:not(.is-bottom),
.button_component:focus-visible .button-text:not(.is-bottom) {
  transform: translateY(-120%);
}

.button_component:hover .button-text.is-bottom,
.button_component:focus-visible .button-text.is-bottom {
  transform: translateY(0);
}

.button_component:hover,
.button_component:focus-visible {
  transform: scale(0.9);
}

@media (prefers-reduced-motion: reduce) {
  .nav-panel,
  .nav-panel_link,
  .nav-panel_cta,
  .nav_pill.is-ready {
    transition: none !important;
  }
  .nav-panel_link,
  .nav-panel_cta {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

/* --------------------------------------------------------------------------
   4 · Puente al wrapper MP360
   Unico bloque propio. Solo ubica el navbar sobre el tour y repone la base
   tipografica y el reset de enlaces que en Corevia venian del <body> y de
   webflow.css. No cambia tamanos, radios, espaciados, motion ni breakpoints.
   -------------------------------------------------------------------------- */
.navbar {
  /* Corevia lo apoya en el flujo de la pagina; aca flota sobre el panorama. */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  /* Sin barra de fondo: el panorama es el fondo. */
  background-color: transparent;
  /* Base tipografica que en Corevia aporta `body`. */
  font-family: var(--_typography---font-family--body);
  font-size: var(--_typography---base--font-size);
  line-height: var(--_typography---base--line-height);
  color: var(--main--primary);
}

/* Sin la barra, la pista de links necesita su propia superficie para que el
   texto blanco siga legible sobre cualquier panorama. Mismas medidas, radio y
   padding de Corevia: solo cambia el relleno.

   Va acotada a escritorio a proposito. Sin media query ganaba por orden de
   fuente al reset `background-color: #0000` que Corevia aplica en <=1179
   (linea 404), y como ahi el menu es `display:none` el contenedor quedaba
   vacio: una pildora negra de 8px -solo su padding- estirada entre el logo y
   las acciones. La pista solo tiene contenido a partir de 1180. */
@media screen and (min-width: 1180px) {
  .nav_wrap.bg-transparent {
    background-color: var(--bg-color--bg-primary);
  }
}

/* --- Tablet y mobile: reticula explicita, sin la pista vacia --------------
   Debajo de 1180 el menu de escritorio no se muestra, asi que su contenedor
   se retira del layout en vez de quedar como caja elastica. Las tres zonas
   pasan a una grilla `auto 1fr auto`: el aire del medio es una columna, no un
   elemento con fondo propio. `.navbar_list` vive dentro de `.nav_wrap`, asi
   que su fondo oscuro y su borde crema tampoco pueden reaparecer. */
@media screen and (max-width: 1179px) {
  .navbar_content {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    column-gap: 1rem;
  }

  .nav_wrap { display: none; }

  /* Tercera columna explicita: sin la pista, la colocacion automatica habria
     puesto las acciones en el hueco del medio. */
  .nav_buttons-wrap {
    grid-column: 3;
    justify-self: end;
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
  }

  /* La separacion con el CTA la da el `column-gap`, no un padding que
     agrandaria la caja del boton sin agrandar su area util. */
  .menu-button { padding: 0; }
}

/* --- Hamburguesa · icono del sistema --------------------------------------
   Los tres `div` de Corevia pasan al simbolo `menu` de Nucleo, la familia que
   ya usa el resto de la interfaz. El boton mide 44x44 reales -el icono 18- y
   menu y cruz viven apilados en la misma celda del grid: el cambio de estado
   cruza opacidad y giro sin mover nada de sitio ni reflowear la barra. */
.navbar .nav-button_component {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: var(--radius-control, 12px);
  background-color: var(--na-paper, #fefefe);
  color: var(--na-ink, #151515);
  box-shadow: 0 1px 2px rgba(13, 13, 13, 0.12);
}

.navbar .nav-button_icon {
  grid-area: 1 / 1;
  width: 18px;
  height: 18px;
  --nucleo-stroke-width: 1.5;
  transition:
    opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1),
    rotate 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.navbar .nav-button_icon--close { opacity: 0; rotate: -90deg; }
.navbar[data-nav-open='true'] .nav-button_icon--menu { opacity: 0; rotate: 90deg; }
.navbar[data-nav-open='true'] .nav-button_icon--close { opacity: 1; rotate: 0deg; }

/* --- Mobile landscape: barra mas baja, targets intactos ------------------- */
@media screen and (max-height: 480px) and (orientation: landscape) {
  .padding-global.is-navbar {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
  /* `.navbar_logo` se redefine mas abajo para <=767, que tambien matchea en
     landscape. Se califica con el ancestro para no depender del orden. */
  .navbar .navbar_logo { width: 88px; }
}

@media (prefers-reduced-motion: reduce) {
  .navbar .nav-button_icon { transition: none; rotate: none; }
}

/* Misma razon para la marca, que ahora se apoya directo sobre la foto.
   El asset casi no tiene aire transparente -ocupa el 99% de su ancho-, asi que
   la medida del CSS es la medida optica: a 87px el nombre se leia, pero
   `Etapa 3` no. */
.navbar_logo {
  width: 114px;
  height: auto;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.45));
}

/* `.navbar img { max-width: 100% }` gana por especificidad al ancho del logo:
   cuando la columna del grid se quedaba corta, la marca se aplastaba hasta
   desaparecer. Con el tope liberado, el ancho declarado pasa a ser el minimo
   de la pista y la columna se abre lo necesario. */
.navbar img.navbar_logo {
  max-width: none;
}

@media screen and (max-width: 767px) {
  .navbar_logo { width: 103px; }
}

.nav-panel {
  font-family: var(--_typography---font-family--body);
  font-size: var(--_typography---base--font-size);
  line-height: var(--_typography---base--line-height);
}

/* `a { text-decoration: none }` de webflow.css, acotado al navbar. */
.navbar a,
.nav-panel a {
  text-decoration: none;
}

.navbar img,
.nav-panel img {
  max-width: 100%;
  vertical-align: middle;
  display: inline-block;
}

/* CTA principal: naranja de Nuevo Alisos con texto blanco en las dos capas de
   la animacion. Solo se sustituye el token de color del propio componente; la
   estructura, la duracion, el easing y el motion de Corevia quedan intactos.
   Nota: blanco sobre `--na-orange` mide 2.4:1, por debajo de WCAG AA. Es una
   decision de marca pedida explicitamente. */
.button_component:where(.w-variant-4054ea76-d9bc-6095-58ab-2d153e0e0fc3) {
  color: var(--white);
}

/* Item de navegacion todavia sin destino: presente y anunciado como no
   accionable, sin fingir un enlace ni prometer "proximamente". */
/* Item de navegacion todavia sin destino: se lee igual que el resto (mismo
   blanco, misma jerarquia) y solo cambia la affordance del cursor. El estado
   no accionable queda anunciado por `aria-disabled` para tecnologia asistiva
   y por el handler, que no dispara ninguna accion. */
.nav_links[aria-disabled="true"],
.nav-panel_link[aria-disabled="true"] {
  cursor: default;
}


/* --------------------------------------------------------------------------
   Composicion de la barra desktop
   `space-between` centraba el menu respecto al hueco que quedaba entre logo y
   CTA, no respecto al viewport, y con siete items todo se leia como una sola
   masa. Un grid de tres columnas con laterales del mismo peso deja el menu
   centrado de verdad y abre aire a los dos lados.
   -------------------------------------------------------------------------- */
@media screen and (min-width: 1180px) {
  /* Siete items, logo y CTA no entran con aire dentro del contenedor medio.
     La barra usa el ancho de la ventana con un margen lateral fluido: es la
     unica forma de que las tres zonas respiren y el menu quede centrado. */
  .navbar .container-medium {
    max-width: none;
  }
  .padding-global.is-navbar {
    padding-left: clamp(1.5rem, 3vw, 3rem);
    padding-right: clamp(1.5rem, 3vw, 3rem);
  }
  .navbar_content {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    column-gap: clamp(1.25rem, 3vw, 3.5rem);
  }
  .navbar_logo-link {
    justify-self: start;
  }
  /* Como item de grid el logo se comprimia a cero cuando no sobraba espacio. */
  .navbar_logo {
    flex: none;
    width: 124px;
    height: auto;
    max-width: none;
  }
  .nav_wrap {
    flex: none;
    justify-content: center;
    padding: var(--_sizes---fixed--0-25rem);
  }
  .nav_buttons-wrap {
    justify-self: end;
    justify-content: flex-end;
  }
  .navbar_list {
    grid-column-gap: var(--_sizes---fixed--0-25rem);
  }
  /* Un label partido en dos lineas rompe la lectura de la barra. */
  .nav_links {
    white-space: nowrap;
    /* El padding de Corevia dejaba los seis links en 40px de alto. Suben a 44
       sin mover el texto: el alto lo pone `min-height` y el centrado el flex,
       asi que la pista y la pastilla conservan su geometria. */
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* Estado activo permanente de "Proyecta tu cuota". Es el mismo pill del hover
   de Corevia -misma forma, misma transicion, mismo motion-, en reposo sobre el
   item destacado.

   El color depende de donde este parada la pastilla: verde secundario cuando
   descansa en el item destacado, naranja cuando el hover la lleva a cualquier
   otro. `data-current` lo escribe `corevia-navbar.js` en cada movimiento.
   Blanco mide 5.05:1 sobre el verde y 2.4:1 sobre el naranja, la misma
   relacion de marca ya aceptada para el CTA. */
@media screen and (min-width: 1180px) {
  .nav_pill {
    background-color: var(--na-orange);
  }
  .nav_pill[data-current="true"] {
    background-color: var(--background-secondary);
  }
  .nav_links:hover,
  .nav_links.w--current {
    color: var(--base--white);
    font-weight: var(--_typography---font-weight--medium);
  }
  .navbar_list:has(.nav_links:hover) .nav_links.w--current:not(:hover) {
    color: var(--base--white);
    font-weight: var(--_typography---font-weight--regular);
  }
}