.main-nav {
    align-items: center;
    display: flex;
    font-size: .875rem;
    gap: 2rem;
}

.main-nav a {
    color: var(--chrome-text);
    transition: color .2s ease;
}

.text-link:hover,
.text-link:focus-visible {
    color: var(--blue);
}

.main-nav a:hover,
.main-nav a:focus-visible {
    color: var(--chrome-link);
}

.nav-cta {
    color: var(--chrome-link) !important;
    font-weight: 700;
}

.menu-toggle {
    background: none;
    border: 0;
    cursor: pointer;
    display: none;
    padding: .5rem;
}

.theme-toggle {
    align-items: center;
    background: none;
    border: 0;
    color: var(--text);
    cursor: pointer;
    display: inline-flex;
    font-family: "DM Sans", sans-serif;
    font-size: .875rem;
    gap: .5rem;
    padding: .4rem;
    transition: color .2s ease;
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
    color: var(--blue);
}

.theme-toggle-icon {
    font-size: 1rem;
    line-height: 1;
}

.lang-switch {
    align-items: center;
    display: flex;
    gap: .35rem;
}

.lang-flag {
    align-items: center;
    border-radius: 50%;
    display: inline-flex;
    filter: grayscale(55%);
    height: 1.9rem;
    justify-content: center;
    opacity: .65;
    transition: filter .2s ease, opacity .2s ease, transform .2s ease;
    width: 1.9rem;
}

.lang-flag svg {
    border-radius: .15rem;
    display: block;
    height: .85rem;
    width: 1.2rem;
}

.lang-flag:hover,
.lang-flag:focus-visible {
    filter: grayscale(0%);
    opacity: .85;
    transform: translateY(-.1rem);
}

.lang-flag.is-active {
    filter: grayscale(0%);
    opacity: 1;
}

.menu-toggle span {
    background: var(--text);
    display: block;
    height: .12rem;
    margin: .3rem 0;
    width: 1.4rem;
}


/* Submenú "Planes" */
.nav-dropdown {
    position: relative;
}

.nav-dropdown-toggle {
    background: none;
    border: 0;
    color: var(--chrome-text);
    cursor: pointer;
    font: inherit;
    padding: 0;
    transition: color .2s ease;
}

.nav-dropdown-toggle:hover,
.nav-dropdown-toggle:focus-visible,
.nav-dropdown.is-open .nav-dropdown-toggle {
    color: var(--chrome-link);
}

.nav-dropdown-arrow {
    display: inline-block;
    font-size: .7em;
    transition: transform .2s ease;
}

.nav-submenu {
    background: var(--surface);
    border: .08rem solid var(--line);
    border-radius: .75rem;
    box-shadow: 0 1rem 2rem rgba(11, 31, 75, .14);
    display: flex;
    flex-direction: column;
    left: 50%;
    min-width: 13rem;
    opacity: 0;
    padding: .4rem;
    pointer-events: none;
    position: absolute;
    top: calc(100% + .9rem);
    transform: translate(-50%, .3rem);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
    visibility: hidden;
    z-index: 20;
}

/* Puente invisible para que el submenú no se cierre al bajar el mouse */
.nav-submenu::before {
    content: "";
    height: .9rem;
    left: 0;
    position: absolute;
    right: 0;
    top: -.9rem;
}

.nav-dropdown:hover > .nav-submenu,
.nav-dropdown:focus-within > .nav-submenu,
.nav-dropdown.is-open > .nav-submenu {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, 0);
    visibility: visible;
}

.nav-dropdown:hover .nav-dropdown-arrow,
.nav-dropdown.is-open .nav-dropdown-arrow {
    transform: rotate(180deg);
}

.nav-submenu a {
    border-radius: .5rem;
    color: var(--text);
    padding: .6rem .8rem;
    white-space: nowrap;
}

.nav-submenu a:hover,
.nav-submenu a:focus-visible {
    background: var(--sky);
    color: var(--chrome-link);
}

/* Subrayado que crece desde el centro, solo al pasar el mouse (escritorio) */
@media (hover: hover) and (min-width: 64rem) {
    .main-nav > a,
    .nav-dropdown-toggle,
    .nav-submenu a {
        position: relative;
    }

    .main-nav > a::after,
    .nav-dropdown-toggle::after,
    .nav-submenu a::after {
        background: currentColor;
        border-radius: 1rem;
        bottom: -.35rem;
        content: "";
        height: .12rem;
        left: 50%;
        position: absolute;
        transition: left .25s ease, width .25s ease;
        width: 0;
    }

    .nav-submenu a::after {
        bottom: .35rem;
    }

    .nav-submenu .nav-submenu-child::after {
        left: calc(50% + .4rem);
    }

    .main-nav > a:hover::after,
    .nav-dropdown-toggle:hover::after,
    .nav-submenu a:hover::after {
        left: 0;
        width: 100%;
    }

    .nav-submenu a:hover::after {
        left: .8rem;
        width: calc(100% - 1.6rem);
    }

    .nav-submenu .nav-submenu-child:hover::after {
        left: 1.6rem;
        width: calc(100% - 2.4rem);
    }
}

/* Menú principal desplegable: grupo "Planes" con sus dos opciones */
.nav-menu .nav-submenu {
    min-width: 15rem;
}

.nav-submenu-label {
    color: var(--muted);
    font-family: "Manrope", sans-serif;
    font-size: .8125rem;
    font-weight: 800;
    letter-spacing: .1em;
    padding: .7rem .8rem .25rem;
    text-transform: uppercase;
}

.nav-submenu .nav-submenu-child {
    padding-left: 1.6rem;
}

.nav-submenu .nav-submenu-child::before {
    color: var(--muted);
    content: "–";
    left: .8rem;
    position: absolute;
}

.nav-submenu a {
    position: relative;
}

/* Cada opción del menú ocupa solo el ancho de su texto, así el subrayado queda debajo de la palabra */
@media (min-width: 64rem) {
    .nav-submenu a,
    .nav-submenu-label {
        align-self: flex-start;
    }

    .nav-submenu a:hover,
    .nav-submenu a:focus-visible {
        background: none;
    }
}


/* Segundo nivel: "Planes" abre un panel al costado (hacia la izquierda) */
.nav-subgroup {
    align-self: stretch;
    position: relative;
}

.nav-subgroup-toggle {
    background: none;
    border: 0;
    border-radius: .5rem;
    color: var(--text);
    cursor: pointer;
    font: inherit;
    padding: .6rem .8rem;
    position: relative;
    text-align: left;
}

.nav-subgroup-toggle:hover,
.nav-subgroup-toggle:focus-visible,
.nav-subgroup.is-open .nav-subgroup-toggle,
.nav-subgroup:hover .nav-subgroup-toggle {
    color: var(--chrome-link);
}

.nav-subgroup-arrow {
    color: var(--muted);
    display: inline-block;
    margin-right: .2rem;
}

.nav-submenu-nested {
    left: auto;
    right: calc(100% + .9rem);
    top: -.45rem;
    transform: translateX(.3rem);
}

/* Puente invisible horizontal para pasar el mouse al panel lateral */
.nav-submenu-nested::before {
    height: auto;
    left: auto;
    right: -.9rem;
    top: 0;
    bottom: 0;
    width: .9rem;
}

.nav-subgroup:hover > .nav-submenu-nested,
.nav-subgroup:focus-within > .nav-submenu-nested,
.nav-subgroup.is-open > .nav-submenu-nested {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
    visibility: visible;
}

/* Subrayado desde el centro también en "Planes" */
@media (hover: hover) and (min-width: 64rem) {
    .nav-subgroup-toggle::after {
        background: currentColor;
        border-radius: 1rem;
        bottom: .35rem;
        content: "";
        height: .12rem;
        left: 50%;
        position: absolute;
        transition: left .25s ease, width .25s ease;
        width: 0;
    }

    .nav-subgroup-toggle:hover::after {
        left: .8rem;
        width: calc(100% - 1.6rem);
    }
}

/* Íconos del menú desplegable (escritorio) */
.nav-submenu a,
.nav-subgroup-toggle {
    align-items: center;
    display: inline-flex;
    gap: .6rem;
}

.nav-icon {
    color: var(--blue);
    flex-shrink: 0;
    height: 1.05rem;
    width: 1.05rem;
}

.nav-label {
    position: relative;
}

/* El subrayado ahora va en el texto (no incluye el ícono) y crece desde el centro de la palabra */
@media (hover: hover) and (min-width: 64rem) {
    .nav-submenu a::after,
    .nav-subgroup-toggle::after {
        content: none;
    }

    .nav-label::after {
        background: currentColor;
        border-radius: 1rem;
        bottom: -.3rem;
        content: "";
        height: .12rem;
        left: 50%;
        position: absolute;
        transition: left .25s ease, width .25s ease;
        width: 0;
    }

    .nav-submenu a:hover .nav-label::after,
    .nav-subgroup-toggle:hover .nav-label::after {
        left: 0;
        width: 100%;
    }
}

/* Escritorio: área de clic más grande para "Menú" y "Hablemos" (el texto no cambia de tamaño ni de lugar) */
@media (min-width: 64rem) {
    .nav-dropdown-toggle,
    .main-nav > .nav-cta {
        position: relative;
    }

    .nav-dropdown-toggle::before,
    .main-nav > .nav-cta::before {
        content: "";
        inset: -.8rem -.4rem;
        position: absolute;
    }
}

/* ============================================================
   Menú a la vista (desde 1024 px): los cinco enlaces se muestran en la barra,
   sin tener que abrir "Menú". "Planes" sigue desplegando su submenú, ahora hacia abajo,
   y "Hablemos" pasa a ser un botón. Por debajo de ese ancho no cambia nada.
   ============================================================ */
@media (min-width: 64rem) {
    .main-nav {
        gap: 1.5rem;
    }

    .nav-menu > .nav-dropdown-toggle {
        display: none;
    }

    /* La lista principal deja de ser un panel flotante y pasa a ser una fila */
    .main-nav .nav-menu > .nav-submenu,
    .main-nav .nav-menu:hover > .nav-submenu,
    .main-nav .nav-menu:focus-within > .nav-submenu,
    .main-nav .nav-menu.is-open > .nav-submenu {
        align-items: center;
        background: none;
        border: 0;
        box-shadow: none;
        flex-direction: row;
        gap: 1.5rem;
        min-width: 0;
        opacity: 1;
        padding: 0;
        pointer-events: auto;
        position: static;
        transform: none;
        transition: none;
        visibility: visible;
    }

    .main-nav .nav-menu > .nav-submenu::before {
        content: none;
    }

    .nav-menu > .nav-submenu > a,
    .nav-menu > .nav-submenu > .nav-subgroup > .nav-subgroup-toggle {
        align-self: center;
        color: var(--chrome-text);
        padding: 0;
    }

    .nav-menu > .nav-submenu > a:hover,
    .nav-menu > .nav-submenu > a:focus-visible,
    .nav-menu > .nav-submenu > .nav-subgroup:hover > .nav-subgroup-toggle,
    .nav-menu > .nav-submenu > .nav-subgroup.is-open > .nav-subgroup-toggle,
    .nav-menu > .nav-submenu > .nav-subgroup > .nav-subgroup-toggle:focus-visible {
        color: var(--chrome-link);
    }

    /* En la barra van solo las palabras; los íconos quedan para el submenú de Planes */
    .nav-menu > .nav-submenu > a > .nav-icon,
    .nav-menu > .nav-submenu > .nav-subgroup > .nav-subgroup-toggle > .nav-icon,
    .nav-menu > .nav-submenu > .nav-subgroup > .nav-subgroup-toggle > .nav-subgroup-arrow {
        display: none;
    }

    .nav-menu > .nav-submenu > .nav-subgroup {
        align-self: center;
    }

    /* Flechita que indica que "Planes" se despliega */
    .nav-menu > .nav-submenu > .nav-subgroup > .nav-subgroup-toggle {
        gap: .35rem;
    }

    .nav-menu > .nav-submenu > .nav-subgroup > .nav-subgroup-toggle::before {
        content: "▾";
        font-size: .7em;
        order: 2;
        transition: transform .2s ease;
    }

    .nav-menu > .nav-submenu > .nav-subgroup:hover > .nav-subgroup-toggle::before,
    .nav-menu > .nav-submenu > .nav-subgroup.is-open > .nav-subgroup-toggle::before {
        transform: rotate(180deg);
    }

    /* El submenú de Planes se abre hacia abajo, centrado bajo la palabra */
    .nav-menu .nav-submenu-nested {
        left: 50%;
        right: auto;
        top: calc(100% + .9rem);
        transform: translate(-50%, .3rem);
    }

    .nav-menu .nav-subgroup:hover > .nav-submenu-nested,
    .nav-menu .nav-subgroup:focus-within > .nav-submenu-nested,
    .nav-menu .nav-subgroup.is-open > .nav-submenu-nested {
        transform: translate(-50%, 0);
    }

    /* Puente invisible para bajar el mouse hasta el submenú sin que se cierre */
    .nav-menu .nav-submenu-nested::before {
        bottom: auto;
        height: .9rem;
        left: 0;
        right: 0;
        top: -.9rem;
        width: auto;
    }

    /* "Hablemos" como botón, diferenciado del resto */
    .main-nav > .nav-cta {
        background: var(--blue);
        border-radius: 999rem;
        color: var(--white) !important;
        padding: .55rem 1.05rem;
        transition: background .2s ease, transform .2s ease;
        white-space: nowrap;
    }

    .main-nav > .nav-cta:hover,
    .main-nav > .nav-cta:focus-visible {
        background: var(--blue-dark);
        transform: translateY(-.1rem);
    }

    :root[data-theme="dark"] .main-nav > .nav-cta {
        color: #0b1f4b !important;
    }

    :root[data-theme="dark"] .main-nav > .nav-cta:hover,
    :root[data-theme="dark"] .main-nav > .nav-cta:focus-visible {
        color: var(--white) !important;
    }

    .main-nav > .nav-cta::after {
        content: none;
    }
}

/* Entre 1024 y 1200 px el lugar es justo: se compacta la barra y el botón de tema queda solo con el ícono */
@media (min-width: 64rem) and (max-width: 75rem) {
    .main-nav,
    .main-nav .nav-menu > .nav-submenu {
        font-size: .8125rem;
        gap: .7rem;
    }

    .main-nav a,
    .brand {
        white-space: nowrap;
    }

    .nav-group,
    .header-actions {
        gap: .6rem;
    }

    .theme-toggle-label {
        display: none;
    }

    .lang-switch {
        gap: .15rem;
    }
}

/* Fondo oscurecido detrás del menú hamburguesa abierto (lo crea menu.js); al tocarlo, el menú se cierra */
.nav-backdrop {
    background: rgba(4, 10, 26, .55);
    inset: 0;
    opacity: 0;
    pointer-events: none;
    position: fixed;
    transition: opacity .2s ease;
    z-index: 25;
}

/* Menú hamburguesa abierto: la página de fondo queda quieta (menu.js agrega menu-open) */
html.menu-open {
    overflow: hidden;
}

.nav-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
}

/* Escritorio: los enlaces de la barra tienen unos 40 px de alto para hacer clic (el texto no se mueve) */
@media (min-width: 64rem) {
    .nav-menu > .nav-submenu > a,
    .nav-menu > .nav-submenu > .nav-subgroup > .nav-subgroup-toggle {
        margin: -.65rem -.25rem;
        padding: .65rem .25rem;
    }
}

/* Botón de modo claro / oscuro: solo el ícono en todos los tamaños (el nombre queda en aria-label) */
.theme-toggle-label {
    display: none;
}