/* =========================================================
   mNw CHROME — header · glass · nav · button surface
   =========================================================
   PROMOTED VERBATIM from Site Settings -> Custom CSS on
   2026-09-12 (FEAT-CHROME-CONSOLIDATION-001). It was 29,250
   bytes, BYTE-IDENTICAL on the network root and /pa/, and
   absent on the other ten sites — which between them render no
   Elementor markup, so this file covers 100% of the network's
   actual UI.

   WHY A SECOND STYLESHEET AND NOT THE BOTTOM OF global.css.
   Cascade POSITION is load-bearing here, not just specificity.
   global.css is enqueued EARLY — measured on dev /pa/ in
   document.styleSheets it is index 4 of 42, ahead of
   Elementor's frontend.min.css (10) and base-desktop.css (23)
   — so it loses every same-specificity tie on source order,
   which is why it carries an explicit `.elementor .mNw-x.mNw-x`
   (0,3,0) bridge block. The rules below are written at (0,1,0)
   and (0,1,1) and they currently WIN because Custom CSS is
   appended to the kit's generated stylesheet, i.e. it is the
   LAST CSS the browser parses. Pasting them into global.css
   would move them from last to third and Elementor's own
   `.e-con { position: var(--position) }` would start winning —
   the header would stop being positioned at all. So this file
   is enqueued LATE.

   WHERE IT ACTUALLY LANDS — measured in the browser, on dev
   /pa/, reading document.styleSheets (which is what the phrase
   "stylesheet index" names):

       42 sheets total
       kit sheet (elementor-post-3)   index 12
       chrome.css                     index 35
       7 sheets still follow it       36..42

   Those seven are Elementor's e-con lazyload block, a cookie
   banner, Lenis and #mNw-top (both injected by our OWN
   ns-motion.js), an accessibility widget, the per-document
   `loop-1622` block, and nacionsushi-leaflet. None collides
   today — the loop rules are (0,3,0), the lazyload block is
   !important, #mNw-top is (1,0,0), leaflet is .leaflet-scoped.

   Two earlier versions of this note were wrong, in opposite
   directions: the first claimed the Custom CSS position was
   reproduced exactly; the second corrected that but reported
   "index 8 / 30 of 31", which are verify-chrome-cascade.sh's
   <link>-only positions quoted in document.styleSheets units,
   and asserted "after EVERY Elementor sheet", which is false —
   loop-1622 is one. What is TRUE and sufficient: chrome prints
   after every Elementor <link> sheet, which is what the
   (0,1,0)/(0,1,1) rules below need.

   scripts/verify-chrome-cascade.sh asserts that ordering. It
   scrapes <link id='…-css'> out of the served HTML, so inline
   <style> blocks and runtime-injected sheets are outside what
   it can observe — see its header.

   Folding it into global.css is a legitimate future step, but
   it requires raising every rule here to the bridge form first.
   Do not "simplify" the two files into one without doing that.

   Class VOCABULARY is registered in the kit, not here — see
   docs/kits/src/global-classes/g-*.json. A class that exists
   only in this file cannot be applied in the editor.
   ========================================================= */

/* ==========================================================
   mNw DESIGN UTILITIES
   Elementor v4 / Atomic compatible

   Includes:
   1. Change Header on Scroll
   2. Glassmorphism Utility System

   HEADER CLASSES
   ----------------------------------------------------------
   mNw-header
   mNw-header__inner
   mNw-logo-switch
   mNw-logo--default
   mNw-logo--scrolled
   mNw-nav
   mNw-btn

   GLASS CLASSES
   ----------------------------------------------------------
   mNw-glass

   Optional modifiers:
   mNw-glass--soft
   mNw-glass--strong
   mNw-glass--pill
   mNw-glass--clip
   mNw-glass--interactive
   ========================================================== */


/* ==========================================================
   GLOBAL VARIABLES
   ========================================================== */

:root {

    /* ======================================================
       SHARED
       ====================================================== */

    --mNw-ease:
        cubic-bezier(.4, 0, .2, 1);

    --mNw-admin-offset: 0px;


    /* ======================================================
       HEADER — CORE
       ====================================================== */

    --mNw-header-z-index: 9999;


    /* ======================================================
       HEADER — SHRINK MODE
       ====================================================== */

    --mNw-shrink-bg:
        rgba(255, 255, 255, 0.88);

    --mNw-shrink-blur:
        16px;

    --mNw-shrink-shadow:
        0 8px 30px rgba(0, 0, 0, 0.10);

    --mNw-shrink-pad-y:
        0.65rem;


    /* ======================================================
       HEADER — PILL MODE
       ====================================================== */

    --mNw-pill-top-space:
        1rem;

    --mNw-pill-max-width:
        72rem;

    --mNw-pill-pad-y:
        0.65rem;

    --mNw-pill-pad-x:
        1rem;

    --mNw-pill-radius:
        1rem;

    --mNw-pill-bg:
        rgba(238, 59, 123, 0.36);

    --mNw-pill-blur:
        45px;

    --mNw-pill-shadow:
        var(--mNw-glass-shadow),

        inset 0 1px 0
        rgba(
            255,
            255,
            255,
            var(--mNw-glass-highlight-opacity)
        ),

        inset 0 -1px 0
        rgba(
            var(--mNw-glass-rgb),
            var(--mNw-glass-bottom-opacity)
        ),

        inset 0 0 54px 27px
        rgba(
            var(--mNw-glass-rgb),
            var(--mNw-glass-inner-opacity)
        );
        /* 0 10px 35px rgba(0, 0, 0, 0.12); */

    --mNw-pill-border:
        1px solid rgba(255, 255, 255, 0.30);


    /* ======================================================
       HEADER — SCROLLED MENU
       ====================================================== */

    --mNw-menu-color:
        #FFFFFF;

    --mNw-menu-hover-color:
        #FFFFFF;

    --mNw-menu-font-size:
        var(--text-s);

    --mNw-menu-font-weight:
        bold;

    --mNw-menu-letter-spacing:
        0em;


    /* ======================================================
       BUTTONS
       ====================================================== */

    --mNw-btn-bg:
        #111111;

    --mNw-btn-bg-hover:
        #ee3b7b;

    --mNw-btn-color:
        #ffffff;

    --mNw-btn-color-hover:
        #ffffff;

    --mNw-btn-font-size:
        var(--text-s, 0.9375rem);

    --mNw-btn-font-weight:
        700;

    --mNw-btn-pad-y:
        0.9rem;

    --mNw-btn-pad-x:
        1.4rem;

    /* --mNw-btn-radius is NOT declared here any more.
       It was `10px`, and because Custom CSS is the last sheet the browser
       parses it silently overrode global.css's :root for EVERY .mNw-btn on
       both render paths — the one token in this file that steered the design
       system rather than the header. The radius now has a single owner:
       `--r-btn` in global.css Layer 1, also published as the kit variable
       `e-gv-ns-r-btn` so the editor can offer it. */

    --mNw-btn-border:
        1px solid #111111;

    /* ======================================================
       GLASSMORPHISM
       #ee3b7b = rgb(238, 59, 123)
       ====================================================== */

    --mNw-glass-rgb:
        238, 59, 123;

    --mNw-glass-opacity:
        0.36;

    --mNw-glass-blur:
        45px;

    --mNw-glass-saturation:
        135%;

    --mNw-glass-radius:
        20px;

    --mNw-glass-border-opacity:
        0.30;

    --mNw-glass-inner-opacity:
        0.27;

    --mNw-glass-highlight-opacity:
        0.55;

    --mNw-glass-bottom-opacity:
        0.14;

    --mNw-glass-shadow:
        0 8px 32px rgba(0, 0, 0, 0.10);

    --mNw-glass-transition:
        250ms;
}


/* ==========================================================
   WORDPRESS ADMIN BAR OFFSET
   ========================================================== */

body.admin-bar {
    --mNw-admin-offset: 32px;
}

@media (max-width: 782px) {

    body.admin-bar {
        --mNw-admin-offset: 46px;
    }
}


/* ==========================================================
   HEADER
   ========================================================== */


/* ----------------------------------------------------------
   BASE HEADER
   ---------------------------------------------------------- */

.mNw-header {

    /*
     * Can be overwritten by JS using:
     * data-mnw-anim-ms
     */
    --mNw-anim-ms: 220ms;

    /*
     * Logo HEIGHT, top of page and scrolled pill
     * (FEAT-DESIGN-ADJUSTMENTS-VALERIA-001). Width follows the
     * wordmark's own ratio. Breakpoint values below.
     */
    --mNw-logo-h: 112px;
    --mNw-logo-h-scrolled: 44px;

    position: relative;

    width: 100%;

    z-index:
        var(--mNw-header-z-index);
}


/* ----------------------------------------------------------
   OPTIONAL HERO OVERLAY
   ---------------------------------------------------------- */

.mNw-header[data-mnw-overlay="true"]:not(.mNw-is-sticky) {

    position: absolute;

    top: 0;
    left: 0;
    right: 0;

    width: 100%;

    z-index:
        var(--mNw-header-z-index);
}


/* ----------------------------------------------------------
   HERO CLEARANCE UNDER AN OVERLAID HEADER
   (FEAT-DESIGN-ADJUSTMENTS-VALERIA-001, absorbs
   CHORE-HEADER-HERO-OVERLAP-001)

   ns-header.js writes the header's measured top-state height
   to --mNw-header-h on <html>; the :root values are the no-JS
   fallback (dev, measured). The hero's CONTENT child is padded,
   not the hero: that child is a fixed-height (100vh) flex-end
   column, so padding the hero pushed the whole block down by
   the header height and out of the hero (measured on /pa/ at
   1440: content bottom 1126 vs hero bottom 910), while padding
   the child only moves content that would reach the header.
   Scoped to .mNw-video-hero by class — header and page are
   separate Elementor documents, so no sibling combinator can
   reach "the first section" — and .mNw-menu-hero keeps its own
   pinned padding.
   ---------------------------------------------------------- */

:root {
    --mNw-header-h: 216px;
}

@media (max-width: 1024px) {

    :root {
        --mNw-header-h: 160px;
    }
}

/* The phone header is 89–116px tall (fluid logo); the fallback takes the
   tallest so no-JS never under-clears — JS writes the exact value. */
@media (max-width: 767px) {

    :root {
        --mNw-header-h: 116px;
    }
}

html:is(
    .mNw-has-overlay-header,
    :has(.mNw-header[data-mnw-overlay="true"])
)
.mNw-video-hero > :not(.mNw-video-hero__media) {
    padding-top: var(--mNw-header-h);
}


/* ----------------------------------------------------------
   HEADER SPACER
   Generated automatically by JS
   ---------------------------------------------------------- */

.mNw-header-spacer {

    width: 100%;
    height: 0;

    pointer-events: none;
    visibility: hidden;
}


/* ----------------------------------------------------------
   FIXED / HIDDEN STATE
   ---------------------------------------------------------- */

.mNw-header.mNw-is-sticky {

    position: fixed !important;

    top:
        var(--mNw-admin-offset) !important;

    left: 0 !important;
    right: 0 !important;

    width: 100% !important;

    z-index:
        var(--mNw-header-z-index) !important;

    transform:
        translate3d(0, -115%, 0);

    transition:
        transform
        var(--mNw-anim-ms)
        var(--mNw-ease);

    will-change: transform;

    backface-visibility: hidden;
}


/* ----------------------------------------------------------
   FIXED / VISIBLE STATE
   ---------------------------------------------------------- */

.mNw-header.mNw-is-sticky.mNw-show {

    transform:
        translate3d(0, 0, 0);
}


/* ----------------------------------------------------------
   TEMPORARILY DISABLE HEADER TRANSITION
   ---------------------------------------------------------- */

.mNw-header.mNw-no-trans {

    transition: none !important;
}


/* ----------------------------------------------------------
   INNER HEADER
   ---------------------------------------------------------- */

.mNw-header__inner {

    width: 100%;

    transition:
        padding
            var(--mNw-anim-ms)
            var(--mNw-ease),

        width
            var(--mNw-anim-ms)
            var(--mNw-ease),

        max-width
            var(--mNw-anim-ms)
            var(--mNw-ease),

        margin
            var(--mNw-anim-ms)
            var(--mNw-ease),

        border-radius
            var(--mNw-anim-ms)
            var(--mNw-ease),

        background-color
            var(--mNw-anim-ms)
            var(--mNw-ease),

        border-color
            var(--mNw-anim-ms)
            var(--mNw-ease),

        box-shadow
            var(--mNw-anim-ms)
            var(--mNw-ease);
}


/* ==========================================================
   HEADER — SHRINK MODE
   ========================================================== */

:is(
    .mNw-header.mNw-is-scrolled:not([data-mnw-mode]),
    .mNw-header.mNw-is-scrolled[data-mnw-mode="shrink"]
) {

    background-color:
        var(--mNw-shrink-bg) !important;

    -webkit-backdrop-filter:
        blur(var(--mNw-shrink-blur));

    backdrop-filter:
        blur(var(--mNw-shrink-blur));

    box-shadow:
        var(--mNw-shrink-shadow) !important;
}


:is(
    .mNw-header.mNw-is-scrolled:not([data-mnw-mode]),
    .mNw-header.mNw-is-scrolled[data-mnw-mode="shrink"]
)
.mNw-header__inner {

    padding-block:
        var(--mNw-shrink-pad-y) !important;
}


/* ==========================================================
   HEADER — PILL MODE
   ========================================================== */

.mNw-header.mNw-is-scrolled[data-mnw-mode="pill"] {

    background: transparent !important;

    box-shadow: none !important;

    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}


.mNw-header.mNw-is-scrolled[data-mnw-mode="pill"]
.mNw-header__inner {

    width:
        min(
            calc(100% - 2rem),
            var(--mNw-pill-max-width)
        ) !important;

    margin:
        var(--mNw-pill-top-space)
        auto
        0 !important;

    padding:
        var(--mNw-pill-pad-y)
        var(--mNw-pill-pad-x) !important;

    background-color:
        var(--mNw-pill-bg) !important;

    -webkit-backdrop-filter:
        blur(var(--mNw-pill-blur));

    backdrop-filter:
        blur(var(--mNw-pill-blur));

    border:
        var(--mNw-pill-border) !important;

    border-radius:
        var(--mNw-pill-radius) !important;

    box-shadow:
        var(--mNw-pill-shadow) !important;
}


/* ==========================================================
   HEADER — LOGO SWITCH
   Default logo establishes layout dimensions.
   Scrolled logo overlays it without occupying space.
   ========================================================== */

.mNw-logo-switch {
    position: relative;

    display: inline-flex !important;
    align-items: center;

    /* Prevent the wrapper from stretching unnecessarily */
    width: fit-content;
    flex: 0 0 auto;
}


/* ----------------------------------------------------------
   BOTH LOGOS
   ---------------------------------------------------------- */

.mNw-logo-switch
:is(
    .mNw-logo--default,
    .mNw-logo--scrolled
) {
    transition:
        opacity
            var(--mNw-anim-ms, 220ms)
            var(--mNw-ease, cubic-bezier(.4, 0, .2, 1)),

        visibility
            var(--mNw-anim-ms, 220ms)
            var(--mNw-ease, cubic-bezier(.4, 0, .2, 1));

    backface-visibility: hidden;
}


/* ----------------------------------------------------------
   DEFAULT LOGO
   This logo establishes the wrapper's dimensions.
   ---------------------------------------------------------- */

.mNw-logo--default {
    position: relative;

    opacity: 1;
    visibility: visible;

    z-index: 2;
}


/* ----------------------------------------------------------
   SCROLLED LOGO
   Does NOT occupy layout space.
   ---------------------------------------------------------- */

.mNw-logo--scrolled {
    position: absolute !important;

    inset: 0;

    width: 100%;
    height: 100%;

    opacity: 0;
    visibility: hidden;

    pointer-events: none;

    z-index: 1;
}


/*
 * Make Elementor's image/widget content fill the same
 * footprint as the default logo.
 */

.mNw-logo--scrolled img,
.mNw-logo--default img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;
    object-position: left center;
}


/* ----------------------------------------------------------
   LOGO SIZE
   The two logo classes sit on the <img> ITSELF (Elementor v4
   e-image), so the `img` descendant rule above matches nothing
   and Elementor's `.elementor img { height:auto; max-width:100% }`
   (0,1,1) has been sizing both logos from the SVG's intrinsic
   width. These rules are (0,2,0) so they win that tie.

   The default logo still establishes the switch's box; when
   scrolled it shrinks to the pill height and the pill follows.
   The scrolled logo gets its height directly and is centred
   over the default (inset:0 + margin:auto) — following the
   switch's box instead would add the switch's 10px padding.

   The switch must not shrink: the kit's global-class sheet
   sets `.elementor .mNw-logo-switch { flex: 0 1 auto }`
   (0,2,0), which beats `flex: 0 0 auto` above, and the nav
   group beside it takes the rest of the row — so the switch
   was being squeezed narrower than its logo (the 178px SVG
   rendered at 153px before this change).
   ---------------------------------------------------------- */

.mNw-header .mNw-header__inner .mNw-logo-switch {
    flex-shrink: 0;
}

.mNw-logo-switch .mNw-logo--default {
    width: auto;
    max-width: none;
    height: var(--mNw-logo-h);

    transition:
        opacity
            var(--mNw-anim-ms, 220ms)
            var(--mNw-ease, cubic-bezier(.4, 0, .2, 1)),

        visibility
            var(--mNw-anim-ms, 220ms)
            var(--mNw-ease, cubic-bezier(.4, 0, .2, 1)),

        height
            var(--mNw-anim-ms, 220ms)
            var(--mNw-ease, cubic-bezier(.4, 0, .2, 1));
}

.mNw-logo-switch .mNw-logo--scrolled {
    width: auto;
    max-width: none;
    height: var(--mNw-logo-h-scrolled);

    margin: auto;
}

.mNw-header.mNw-is-scrolled
.mNw-logo-switch .mNw-logo--default {
    height: var(--mNw-logo-h-scrolled);
}

@media (max-width: 1024px) {

    .mNw-header {
        --mNw-logo-h: 96px;
    }
}

/*
 * Phones: as tall as the row allows, capped at 72px. A fixed 72px
 * does not fit beside the CTA and the menu toggle below ~434px — the
 * toggle is the item that gives, and it was squeezed from 35px to 13px
 * at 390 (measured). 240px is the row's measured non-logo width on
 * dev (paddings, the 36px logo→CTA gap, the "Reserva" CTA at 103.4px,
 * the 35px toggle); 0.37 ≈ 1 / the wordmark's 2.7 ratio. The scrolled
 * pill is 2rem narrower and pads its own sides, hence 268px there
 * (44px fits from ~387px, measured). Re-measure if the CTA label
 * changes — verify-design-adjustments.sh asserts the toggle keeps its
 * width at 360 and 390, top and scrolled.
 */
@media (max-width: 767px) {

    .mNw-header {
        --mNw-logo-h: clamp(40px, calc((100vw - 240px) * 0.37), 72px);
        --mNw-logo-h-scrolled: clamp(30px, calc((100vw - 268px) * 0.37), 44px);
    }
}


/* ----------------------------------------------------------
   SCROLLED STATE
   ---------------------------------------------------------- */

.mNw-header.mNw-is-scrolled
.mNw-logo--default {
    opacity: 0;
    visibility: hidden;

    pointer-events: none;
}


.mNw-header.mNw-is-scrolled
.mNw-logo--scrolled {
    opacity: 1;
    visibility: visible;

    pointer-events: auto;

    z-index: 3;
}


/* ==========================================================
   HEADER — NAVIGATION
   ========================================================== */

.mNw-header.mNw-is-scrolled
.mNw-nav a {

    color:
        var(--mNw-menu-color) !important;

    font-size:
        var(--mNw-menu-font-size) !important;

    font-weight:
        var(--mNw-menu-font-weight) !important;

    letter-spacing:
        var(--mNw-menu-letter-spacing) !important;

    transition:
        color
            var(--mNw-anim-ms)
            var(--mNw-ease),

        font-size
            var(--mNw-anim-ms)
            var(--mNw-ease);
}


.mNw-header.mNw-is-scrolled
.mNw-nav a:hover {

    color:
        var(--mNw-menu-hover-color) !important;
}


/* ==========================================================
   HEADER — CTA
   Header controls typography only. The button modifiers below
   control color, padding, border and shape in every state.
   ========================================================== */

.mNw-header.mNw-is-scrolled
:is(a, button).mNw-btn,

.mNw-header.mNw-is-scrolled
.mNw-btn :is(a, button) {

    font-size:
        var(--mNw-btn-font-size) !important;

    font-weight:
        var(--mNw-btn-font-weight) !important;
}


/* ==========================================================
   GLASSMORPHISM SYSTEM
   ========================================================== */


/*
 * Shared glass surface selector.
 *
 * Supports:
 *
 * 1. Elementor v4 / Atomic elements:
 *    <div class="mNw-glass">
 *
 * 2. Atomic buttons:
 *    <button class="mNw-glass">
 *
 * 3. Legacy Elementor Button widget:
 *
 *    .mNw-glass.elementor-widget-button
 *        .elementor-button
 */

:is(
    .mNw-glass:not(.elementor-widget-button),
    .mNw-glass.elementor-widget-button .elementor-button
) {

    position: relative;

    box-sizing: border-box;

    -webkit-backdrop-filter:
        blur(var(--mNw-glass-blur))
        saturate(var(--mNw-glass-saturation));

    backdrop-filter:
        blur(var(--mNw-glass-blur))
        saturate(var(--mNw-glass-saturation));

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            var(--mNw-glass-border-opacity)
        );

    border-radius:
        var(--mNw-glass-radius);

    box-shadow:

        var(--mNw-glass-shadow),

        inset 0 1px 0
        rgba(
            255,
            255,
            255,
            var(--mNw-glass-highlight-opacity)
        ),

        inset 0 -1px 0
        rgba(
            var(--mNw-glass-rgb),
            var(--mNw-glass-bottom-opacity)
        ),

        inset 0 0 54px 27px
        rgba(
            var(--mNw-glass-rgb),
            var(--mNw-glass-inner-opacity)
        );

    transition:
        background-color
            var(--mNw-glass-transition)
            var(--mNw-ease),

        border-color
            var(--mNw-glass-transition)
            var(--mNw-ease),

        box-shadow
            var(--mNw-glass-transition)
            var(--mNw-ease),

        transform
            var(--mNw-glass-transition)
            var(--mNw-ease);
}


/* ==========================================================
   GLASS — TOP SPECULAR HIGHLIGHT
   ========================================================== */

:is(
    .mNw-glass:not(.elementor-widget-button),
    .mNw-glass.elementor-widget-button .elementor-button
)::before {

    content: '';

    position: absolute;

    top: 0;
    left: 0;
    right: 0;

    height: 1px;

    border-radius:
        var(--mNw-glass-radius)
        var(--mNw-glass-radius)
        0
        0;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.75),
            transparent
        );

    pointer-events: none;
}


/* ==========================================================
   GLASS — LEFT SPECULAR HIGHLIGHT
   ========================================================== */

:is(
    .mNw-glass:not(.elementor-widget-button),
    .mNw-glass.elementor-widget-button .elementor-button
)::after {

    content: '';

    position: absolute;

    top: 0;
    bottom: 0;
    left: 0;

    width: 1px;

    border-radius:
        var(--mNw-glass-radius)
        0
        0
        var(--mNw-glass-radius);

    pointer-events: none;
}


/* ==========================================================
   GLASS MODIFIER — SOFT
   ========================================================== */

.mNw-glass--soft {

    --mNw-glass-opacity:
        0.22;

    --mNw-glass-blur:
        30px;

    --mNw-glass-inner-opacity:
        0.14;

    --mNw-glass-border-opacity:
        0.22;
}


/* ==========================================================
   GLASS MODIFIER — STRONG
   ========================================================== */

.mNw-glass--strong {

    --mNw-glass-opacity:
        0.48;

    --mNw-glass-blur:
        55px;

    --mNw-glass-inner-opacity:
        0.32;

    --mNw-glass-border-opacity:
        0.38;
}


/* ==========================================================
   GLASS MODIFIER — PILL
   ========================================================== */

.mNw-glass--pill {

    --mNw-glass-radius:
        999px;
}


/* ==========================================================
   GLASS MODIFIER — CLIP
   ========================================================== */

:is(
    .mNw-glass.mNw-glass--clip:not(.elementor-widget-button),
    .mNw-glass.mNw-glass--clip.elementor-widget-button
        .elementor-button
) {

    overflow: hidden;
}


/* ==========================================================
   GLASS MODIFIER — INTERACTIVE
   ========================================================== */

@media (hover: hover) and (pointer: fine) {

    :is(
        .mNw-glass.mNw-glass--interactive:not(.elementor-widget-button),
        .mNw-glass.mNw-glass--interactive.elementor-widget-button
            .elementor-button
    ):hover {

        --mNw-glass-opacity:
            0.44;

        --mNw-glass-border-opacity:
            0.42;

        --mNw-glass-highlight-opacity:
            0.65;

        --mNw-glass-bottom-opacity:
            0.16;

        --mNw-glass-shadow:
            0 14px 40px rgba(0, 0, 0, 0.14);

        transform:
            translateY(-2px);
    }
}


/* ==========================================================
   GLASS FALLBACK
   Browsers without backdrop-filter
   ========================================================== */

@supports not (
    (backdrop-filter: blur(1px))
    or
    (-webkit-backdrop-filter: blur(1px))
) {

    :is(
        .mNw-glass:not(.elementor-widget-button),
        .mNw-glass.elementor-widget-button .elementor-button
    ) {

        background-color:
            rgba(
                var(--mNw-glass-rgb),
                0.82
            );
    }
}


/* ==========================================================
   ACCESSIBILITY — REDUCED MOTION
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

    .mNw-header,
    .mNw-header * {

        transition-duration:
            0.01ms !important;

        animation-duration:
            0.01ms !important;
    }


    :is(
        .mNw-glass:not(.elementor-widget-button),
        .mNw-glass.elementor-widget-button .elementor-button
    ) {

        transition-duration:
            0.01ms !important;
    }


    :is(
        .mNw-glass.mNw-glass--interactive:not(.elementor-widget-button),
        .mNw-glass.mNw-glass--interactive.elementor-widget-button
            .elementor-button
    ):hover {

        transform: none;
    }
}

/* ==========================================================
   mNw BUTTON SYSTEM
   ========================================================== */


/* ----------------------------------------------------------
   BASE
   Supports Atomic <a>/<button> and wrapper-based buttons.
   ---------------------------------------------------------- */

:is(a, button).mNw-btn,
.mNw-btn :is(a, button) {

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 0.5rem;

    text-decoration: none;
    white-space: nowrap;

    cursor: pointer;

    box-sizing: border-box;

    transition:
        color
            var(--mNw-dur-fast, 180ms)
            var(--mNw-ease-out, cubic-bezier(.2,.8,.2,1)),

        background-color
            var(--mNw-dur-fast, 180ms)
            var(--mNw-ease-out, cubic-bezier(.2,.8,.2,1)),

        border-color
            var(--mNw-dur-fast, 180ms)
            var(--mNw-ease-out, cubic-bezier(.2,.8,.2,1)),

        transform
            var(--mNw-dur-fast, 180ms)
            var(--mNw-ease-out, cubic-bezier(.2,.8,.2,1));
}


/* ----------------------------------------------------------
   BRAND
   ---------------------------------------------------------- */

:is(a, button).mNw-btn--brand,
.mNw-btn--brand :is(a, button) {

    background-color:
        var(--mNw-btn-bg);

    color:
        var(--mNw-btn-color);

    border:
        var(--mNw-btn-border);
}


:is(a, button).mNw-btn--brand:hover,
.mNw-btn--brand :is(a, button):hover {

    background-color:
        var(--mNw-btn-bg-hover);

    border-color:
        var(--mNw-btn-bg-hover);

    color:
        var(--mNw-btn-color-hover);
}


/* ----------------------------------------------------------
   RECTANGULAR
   ---------------------------------------------------------- */

:is(a, button).mNw-btn--rect,
.mNw-btn--rect :is(a, button) {

    padding:
        var(--mNw-btn-pad-y)
        var(--mNw-btn-pad-x);

    border-radius:
        var(--mNw-btn-radius);
}

/* ==========================================================
   mNw NAVIGATION SYSTEM
   Elementor v4 Atomic + WordPress Nav Menu

   Class assignment:
   - WP Nav Menu widget: mNw-nav mNw-nav__links
   - Individual Atomic link/button: mNw-nav__link
   ========================================================== */


/* ----------------------------------------------------------
   CONFIGURATION
   ---------------------------------------------------------- */

.mNw-nav__links {

    --mNw-nav-gap:
        clamp(0.75rem, 2vw, 2rem);

    --mNw-nav-color:
        var(--mNw-menu-color, #ffffff);

    --mNw-nav-color-hover:
        var(--mNw-menu-hover-color, #ee3b7b);

    --mNw-nav-underline-color:
        currentColor;

    --mNw-nav-underline-height:
        2px;

    --mNw-nav-duration:
        280ms;

    --mNw-nav-ease:
        cubic-bezier(.2, .8, .2, 1);
}


/* ==========================================================
   WORDPRESS / ELEMENTOR NAV MENU
   ========================================================== */


/* ----------------------------------------------------------
   MENU LAYOUT
   ---------------------------------------------------------- */

.mNw-nav__links
.elementor-nav-menu--main
.elementor-nav-menu {

    display: flex;

    align-items: center;

    gap:
        var(--mNw-nav-gap);
}


.mNw-nav__links
.elementor-nav-menu--main
.elementor-nav-menu > li {

    margin: 0;
}


/* ----------------------------------------------------------
   DISABLE ELEMENTOR'S BUILT-IN POINTER PSEUDO-ELEMENTS
   ---------------------------------------------------------- */

.mNw-nav__links
.elementor-nav-menu--main
.elementor-item::before,

.mNw-nav__links
.elementor-nav-menu--main
.elementor-item::after {

    content: none !important;

    display: none !important;

    opacity: 0 !important;

    transform: none !important;
}


/* ----------------------------------------------------------
   WP NAV LINKS
   The underline is a background layer on the anchor itself,
   so it cannot collide with Elementor's pointer animation.
   ---------------------------------------------------------- */

.mNw-nav__links
.elementor-nav-menu--main
.elementor-item {

    position: relative;

    color:
        var(--mNw-nav-color) !important;

    text-decoration:
        none !important;

    white-space: nowrap;

    background-color:
        transparent;

    background-image:
        linear-gradient(
            var(--mNw-nav-underline-color),
            var(--mNw-nav-underline-color)
        ) !important;

    background-repeat:
        no-repeat !important;

    /* Idle: collapsed at the right edge. */
    background-position:
        right bottom !important;

    background-size:
        0
        var(--mNw-nav-underline-height) !important;

    transition:
        color
            var(--mNw-nav-duration)
            var(--mNw-nav-ease),

        opacity
            var(--mNw-nav-duration)
            var(--mNw-nav-ease),

        background-size
            var(--mNw-nav-duration)
            var(--mNw-nav-ease) !important;
}


.mNw-nav__links
.elementor-nav-menu--main
.elementor-item:hover {
    color: var(--mNw-nav-color-hover) !important;
    opacity: 0.82;
    /* Hover: grow from the left edge. */
    background-position: left bottom !important;
    background-size: 100% var(--mNw-nav-underline-height) !important;
    line-height: var(--mNw-btn-lh);
}


/* Current page: keep its underline visible. */

.mNw-nav__links
.elementor-nav-menu--main
.elementor-item:is(
    .elementor-item-active,
    [aria-current="page"]
),

.mNw-nav__links
.elementor-nav-menu--main
.current-menu-item > .elementor-item,

.mNw-nav__links
.elementor-nav-menu--main
.current-menu-ancestor > .elementor-item {

    color:
        var(--mNw-nav-color-hover) !important;

    background-position:
        left bottom !important;

    background-size:
        100%
        var(--mNw-nav-underline-height) !important;
}


/* ==========================================================
   ELEMENTOR v4 / ATOMIC NAV LINK
   ========================================================== */

.mNw-nav__link {

    --mNw-nav-color:
        var(--mNw-menu-color, #ffffff);

    --mNw-nav-color-hover:
        var(--mNw-menu-hover-color, #ee3b7b);

    --mNw-nav-underline-height:
        2px;

    --mNw-nav-duration:
        280ms;

    --mNw-nav-ease:
        cubic-bezier(.2, .8, .2, 1);

    position: relative;

    overflow:
        visible !important;

    color:
        var(--mNw-nav-color) !important;

    text-decoration:
        none !important;

    background-image:
        linear-gradient(
            currentColor,
            currentColor
        ) !important;

    background-repeat:
        no-repeat !important;

    /* Bottom edge prevents the old strike-through effect. */
    background-position:
        right bottom !important;

    background-size:
        0
        var(--mNw-nav-underline-height) !important;

    transition:
        color
            var(--mNw-nav-duration)
            var(--mNw-nav-ease),

        opacity
            var(--mNw-nav-duration)
            var(--mNw-nav-ease),

        background-size
            var(--mNw-nav-duration)
            var(--mNw-nav-ease) !important;
}


.mNw-nav__link:hover {

    color:
        var(--mNw-nav-color-hover) !important;

    opacity:
        0.82;

    background-position:
        left bottom !important;

    background-size:
        100%
        var(--mNw-nav-underline-height) !important;
}


/* ==========================================================
   KEYBOARD ACCESSIBILITY
   ========================================================== */

.mNw-nav__link:focus-visible,

.mNw-nav__links
.elementor-nav-menu--main
.elementor-item:focus-visible {

    outline:
        2px solid currentColor;

    outline-offset:
        4px;
}


/* ==========================================================
   REDUCED MOTION
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

    .mNw-nav__link,

    .mNw-nav__links
    .elementor-nav-menu--main
    .elementor-item {

        transition-duration:
            0.01ms !important;
    }
}

/* =========================================================
   ES | EN language switcher — [ns_lang_switcher] (FEAT-I18N-EN-ES-001, D10 / AC-SW)
   Kit tokens only (the nav's own colour, underline and motion tokens); every link is a
   ≥44×44 CSS px target at every width. The host shortcode widget carries
   _element_width:initial so the v4 bar does not shrink it to 0.
   ========================================================= */
.ns-lang-switcher {
	display: inline-flex;
	align-items: center;
	font: inherit;
	white-space: nowrap;
}
.ns-lang-switcher__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 0.25em;
	color: var(--mNw-nav-color, currentColor);
	text-decoration: none;
	letter-spacing: 0.08em;
	transition: color var(--mNw-dur-fast) var(--mNw-ease);
}
.ns-lang-switcher__link:hover,
.ns-lang-switcher__link:focus-visible {
	color: var(--mNw-nav-color-hover, currentColor);
}
.ns-lang-switcher__link.is-current {
	text-decoration: underline;
	text-decoration-color: var(--mNw-nav-underline-color, currentColor);
	text-decoration-thickness: var(--mNw-nav-underline-height, 2px);
	text-underline-offset: 0.35em;
}
.ns-lang-switcher__sep {
	opacity: 0.5;
}
/* The host shortcode widget never shrinks (it measured 0px wide in /pa/'s v4 bar), and on a
   phone it is ordered FIRST in the bar (the row is row-reverse, so the highest order lands
   next to the logo): /pa/'s 375px bar already overflows by ~175px before the switcher exists
   (CHORE-PA-HEADER-MOBILE-OVERFLOW-001), and the language choice must stay on screen. */
.elementor-widget.ns-lang-switcher-host {
	flex: 0 0 auto;
	width: auto;
}
@media (max-width: 767px) {
	.elementor-widget.ns-lang-switcher-host {
		order: 99;
	}
}