/* =========================================================
   mNw Elementor Boilerplate (Normalized)
   Prefix: mNw-
   Sections:
     1) Base reset
     2) Tokens
     3) Utilities
     4) Components (Header/Nav/Reveal/InvRadius)
     5) Legacy aliases (optional)
   ========================================================= */

/* ---------------------------------------------------------
   1) Base reset (safe + minimal)
   --------------------------------------------------------- */
:where(*, *::before, *::after){ box-sizing: border-box; }
:where(html){ -webkit-text-size-adjust: 100%; }
:where(body){ margin: 0; text-rendering: optimizeLegibility; }
:where(img, svg, video){ max-inline-size: 100%; block-size: auto; }
:where(a){ color: inherit; }

/* ---------------------------------------------------------
   2) Tokens (design system)
   --------------------------------------------------------- */
:root{
  /* =========================================================
     LAYER 1 — BRAND PRIMITIVES (DS single source of truth)
     Mirror these names 1:1 in Elementor → Site Settings →
     Variables. Source: NacionSushi Design System (standalone)
     + PRD §8. Each later consumer uses var(--x, fallback) so a
     missing/unregistered token can never break the layout.
     ========================================================= */

  /* Color (DS palette) */
  --ink:      #141414;
  --ink-2:    #1d1d1d;
  --paper:    #f4f1ea;
  --white:    #ffffff;
  --pink:     #ee3b7b;
  --pink-d:   #d42a68;
  --orange:   #ff7300;
  --orange-d: #f26500;
  --lime:     #cddc28;

  /* Type families (project custom fonts) */
  --disp:   "Champ", system-ui, sans-serif;                          /* display / wordmark / big prices */
  --sans:   "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; /* body / UI */
  --serif:  "Panama", Georgia, "Times New Roman", serif;             /* italic dish descriptions */
  --mono:   "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; /* kickers / labels */
  --script: "Palmer Script", "Palmer Lake Script", "Brush Script MT", cursive; /* pink eyebrows */

  /* Layout primitives (DS) */
  --pad:     1rem;      /* 16px gutter */
  --maxw:    90rem;     /* 1440px container */
  --r-panel: 1.875rem;  /* 30px heros/sections */
  --r-card:  1.375rem;  /* 22px cards */
  --r-pill:  6.25rem;   /* 100px pills/buttons */
  --r-chip:  0.5625rem; /* 9px small chips */
  --r-btn:   0.5rem;    /* 8px buttons — the 2026 comp's rectangular CTA */

  /* =========================================================
     LAYER 2 — SEMANTIC TOKENS (--mNw-*)
     Map the boilerplate's component system onto the brand
     primitives. Change a brand value in Layer 1 once and every
     component below follows. Names kept stable so existing
     component CSS keeps working.
     ========================================================= */

  /* ---------- Brand + action (mapped to DS, with hard fallbacks) ---------- */
  --mNw-brand:          var(--pink, #ee3b7b);
  --mNw-brand-strong:   var(--pink-d, #d42a68);
  --mNw-brand-contrast: var(--white, #ffffff);
  --mNw-accent:         var(--orange, #ff7300);
  --mNw-accent-strong:  var(--orange-d, #f26500);
  --mNw-accent-2:       var(--lime, #cddc28);

  /* Neutrals mapped to DS ink scale */
  --mNw-neutral-950: var(--ink, #141414);
  --mNw-neutral-900: var(--ink-2, #1d1d1d);
  --mNw-neutral-700: #4a4a4a;
  --mNw-neutral-0:   var(--white, #ffffff);

  /* Fonts */
  --mNw-font-display: var(--disp);
  --mNw-font-sans:    var(--sans);
  --mNw-font-serif:   var(--serif);
  --mNw-font-mono:    var(--mono);
  --mNw-font-script:  var(--script);

  /* Fluid type scale.

     Since kit v0.7.0 these eight steps are real Elementor Variables, so the
     editor's Font Size field can finally offer a token for TYPE — every one of
     the 14 original size variables was a radius, a spacing step or a max-width.

     They are `global-custom-size-variable`, NOT `global-size-variable`. That
     distinction is the whole trick: an ordinary size variable runs its value
     through parse_size_value()'s `^(-?\d*\.?\d+)([a-z%]+)$` regex, which a
     clamp() cannot match, so it degrades to the DEFAULT_UNIT and renders the
     literal `px`. The custom type stores {size: <raw>, unit: 'custom'} and
     Size_Transformer returns it verbatim. In the editor this is the panel's
     "fx CSS function" field.

     The kit value wins; the clamp is the fallback for a site the kit has not
     landed on (network root pre-provisioning, a fresh country site). Keep the
     pair IDENTICAL — the fallback exists so nothing renders unstyled, not as a
     second place to change the scale. verify-kit.sh AC8(0) compares the landed
     variables against the authored source, so drift shows up there. */
  --mNw-text-xs: var(--text-xs, clamp(0.75rem, 0.72rem + 0.20vw, 0.875rem));
  --mNw-text-s:  var(--text-s,  clamp(0.875rem, 0.84rem + 0.25vw, 1rem));
  --mNw-text-m:  var(--text-m,  clamp(1rem, 0.96rem + 0.30vw, 1.125rem));
  --mNw-text-l:  var(--text-l,  clamp(1.125rem, 1.06rem + 0.45vw, 1.375rem));
  --mNw-h-s:     var(--h-s,     clamp(1.375rem, 1.20rem + 0.90vw, 1.875rem));
  --mNw-h-m:     var(--h-m,     clamp(1.75rem, 1.45rem + 1.40vw, 2.50rem));
  --mNw-h-l:     var(--h-l,     clamp(2.25rem, 1.75rem + 2.30vw, 3.50rem));
  --mNw-h-xl:    var(--h-xl,    clamp(2.75rem, 2.00rem + 3.20vw, 4.50rem));

  /* Line heights */
  --mNw-lh-tight: 1.1;
  --mNw-lh-ui:    1.3;
  --mNw-lh-body:  1.6;

  /* Spacing */
  --mNw-space-1: 0.25rem;
  --mNw-space-2: 0.5rem;
  --mNw-space-3: 0.75rem;
  --mNw-space-4: 1rem;
  --mNw-space-5: 1.5rem;
  --mNw-space-6: 2rem;
  --mNw-space-7: 3rem;
  --mNw-space-8: 4rem;

  /* Radius — mapped to DS radii */
  --mNw-radius-s:    var(--r-chip, 0.5625rem);
  --mNw-radius-m:    var(--r-card, 1.375rem);
  --mNw-radius-l:    var(--r-panel, 1.875rem);
  --mNw-radius-pill: var(--r-pill, 6.25rem);

  /* Shadows */
  --mNw-shadow-s: 0 6px 18px rgba(0,0,0,.08);
  --mNw-shadow-m: 0 12px 30px rgba(0,0,0,.10);

  /* Motion */
  --mNw-dur-fast: 180ms;
  --mNw-dur-med:  420ms;
  --mNw-dur-slow: 900ms;
  --mNw-ease-out: cubic-bezier(.2,.8,.2,1);
  --mNw-ease-io:  cubic-bezier(.65,0,.35,1);

  /* Surfaces — DS light editorial brand (paper/ink) */
  --mNw-surface-1:   var(--paper, #f4f1ea);  /* page background */
  --mNw-surface-2:   var(--white, #ffffff);  /* raised cards/panels */
  --mNw-surface-ink: var(--ink, #141414);    /* dark bands */
  --mNw-text-1:      var(--ink, #141414);
  --mNw-text-2:      rgba(20,20,20,.72);
  --mNw-text-on-ink: var(--paper, #f4f1ea);

  /* Glass */
  --mNw-glass-bg: rgba(244,241,234,.80);   /* paper-tinted */
  --mNw-glass-border: rgba(0,0,0,.08);
  --mNw-glass-shadow: var(--mNw-shadow-m);
  --mNw-glass-blur: blur(12px);

  /* Header */
  --mNw-header-z: 99999;
  --mNw-header-hide-y: -110%;
  --mNw-header-dur: var(--mNw-dur-med);
  --mNw-header-ease: var(--mNw-ease-out);
  --mNw-logo-h-normal: 120px;
  --mNw-logo-h-sticky: 70px;

  /* Reveal */
  --mNw-reveal-dur: var(--mNw-dur-slow);
  --mNw-reveal-delay: 0ms;
  --mNw-reveal-ease: var(--mNw-ease-out);
  --mNw-reveal-y: 1.1em;
  --mNw-reveal-blurFrom: 12px;
  --mNw-reveal-wipe: currentColor;
  --mNw-reveal-highlight: rgba(255,255,0,.45);

  /* Inverted radius */
  --mNw-inv-r: 1rem;
  /* The cutout fill. It must match the ground the notch is punched OUT of, and
     that ground is --mNw-surface-1 (paper, #f4f1ea) — not white. The three
     .mNw-invMask box-shadows hardcoded #FFF/white and ignored this token
     entirely, so every cutout painted pure white on an off-white page. Wired
     2026-09-12; no element currently carries .mNw-invMask on any rendered page,
     so this corrects the rule rather than the pixels. */
  --mNw-inv-fill: var(--mNw-surface-1);
  
  /* ---------- Buttons ---------- */
  /* RECTANGULAR, not a pill, and in `rem` rather than a px literal.
     MEASURED before changing: every one of the 31 buttons rendering on /pa/
     carried `mNw-btn--rect`, whose override resolved to 0.5rem, and NO element
     anywhere carried a bare `.mNw-btn` without it — so 8px was already the
     applied design and `--r-pill` here was reaching nothing. The pill is
     retired from the button rather than left as a value no button uses.
     `rem` and not `px` so the corner scales with the reader's root font size,
     and to match every other radius primitive in Layer 1; a clamp() would tie
     the corner to VIEWPORT width, which is not what a button corner tracks. */
  --mNw-btn-radius: var(--r-btn, 0.5rem);
  --mNw-btn-pad-y: 0.85em;
  --mNw-btn-pad-x: 1.20em;
  --mNw-btn-gap: 0.55em;

  --mNw-btn-lh: var(--mNw-lh-ui);
  --mNw-btn-weight: 600;

  --mNw-btn-dur: var(--mNw-dur-med);
  --mNw-btn-ease: var(--mNw-ease-out);

    /* Secondary / outlines */
  --mNw-border: rgba(0,0,0,.12);

  /* Focus ring */
  --mNw-focus: rgba(0,0,0,.45);

  /* ---------- Section spacing ---------- */
  /* baseline section padding (fluid) */
  --mNw-sec-y: clamp(3rem, 2.2rem + 2.6vw, 6rem);
  --mNw-sec-y-tight: clamp(2rem, 1.5rem + 1.8vw, 4rem);
  --mNw-sec-y-loose: clamp(4rem, 3rem + 3.5vw, 8rem);

  /* horizontal padding for boxed layouts */
  --mNw-sec-x: clamp(1rem, 0.6rem + 1.2vw, 2rem);

  /* max width for “container” feel */
  --mNw-container: var(--maxw, 90rem);
}

/* Global baseline (optional) */
:where(body){
  font-family: var(--mNw-font-sans);
  font-size: var(--mNw-text-m);
  line-height: var(--mNw-lh-body);
  color: var(--mNw-text-1);
  background: var(--mNw-surface-1);
}

/* ---------------------------------------------------------
   3) Utilities
   --------------------------------------------------------- */

.mNw-surface-1{ background: var(--mNw-surface-1); }
.mNw-surface-2{ background: var(--mNw-surface-2); }
.mNw-surface-ink{ background: var(--mNw-surface-ink); }
.mNw-shadow-s{ box-shadow: var(--mNw-shadow-s); }
.mNw-shadow-m{ box-shadow: var(--mNw-shadow-m); }
.mNw-radius-s{ border-radius: var(--mNw-radius-s); }
.mNw-radius-m{ border-radius: var(--mNw-radius-m); }
.mNw-radius-l{ border-radius: var(--mNw-radius-l); }
.mNw-radius-pill{ border-radius: var(--mNw-radius-pill); }

/* Font family — the ONLY route to a family on a v3 (non-atomic) widget.
   Typography -> Family is a font PICKER, so unlike the size controls it cannot
   take a var() through the `custom` unit; the family has to arrive as a class
   on Advanced -> CSS Classes instead. Bare (0,1,0) is deliberate and enough:
   the kit font reaches a widget by INHERITANCE from .elementor-kit-N on body,
   and any direct declaration beats an inherited one regardless of source order,
   so no atomic bridge is needed (.e-*-base sets padding/display, never
   font-family). The one condition is that the widget's own Style -> Typography
   -> Family stays `Default` — set it there and Elementor emits
   `.elementor-<pid> .elementor-element-<eid> ...`, which outranks these.
   display + script are absent on purpose: .mNw-display and .mNw-script already
   carry those families plus their DS treatment. */
.mNw-sans { font-family: var(--mNw-font-sans); }
.mNw-mono { font-family: var(--mNw-font-mono); }
.mNw-serif{ font-family: var(--mNw-font-serif); }

/* Line height — same picker problem, worse: the popover offers px/em/rem/lh/rlh
   and no UNITLESS option, so a ratio is unreachable from the panel. A rem
   leading on a clamp() font-size is a fixed value fighting a fluid one. */
.mNw-lh-tight{ line-height: var(--mNw-lh-tight); }
.mNw-lh-ui   { line-height: var(--mNw-lh-ui); }
.mNw-lh-body { line-height: var(--mNw-lh-body); }

/* Text colour — the color control is a picker too and will not hold a var().
   The kit also ships v3 Global Colors EMPTY (site-settings.json
   `custom_colors: []`), so there is no picker-side route either. */
.mNw-ink   { color: var(--mNw-text-1); }
.mNw-muted { color: var(--mNw-text-2); }
.mNw-on-ink{ color: var(--mNw-text-on-ink); }

/* Regular corners: progressive enhancement */
.mNw-cornerShape{ border-radius: var(--mNw-radius-m); }
@supports (corner-shape: squircle){
  .mNw-cornerShape{ corner-shape: squircle; }
}

/* ---------------------------------------------------------
   4) Components
   --------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
    text-wrap: balance;
}

p {
    text-wrap: pretty;
}

/* 4.1 Header system */
.mNw-header{
  z-index: var(--mNw-header-z);
  will-change: transform;
  /* JS sets this variable; default visible */
  --mNw-header-y: 0px;
  transform: translateY(var(--mNw-header-y));
  transition: transform var(--mNw-header-dur) var(--mNw-header-ease);
  --mNw-header-pad-y: var(--mNw-space-5);
  --mNw-header-pad-x: var(--mNw-space-5);
  /* padding: var(--mNw-header-pad-y) var(--mNw-header-pad-x);*/
}

/* Optional class API (if you still want class toggles somewhere) */
.mNw-header.is-hidden{ --mNw-header-y: var(--mNw-header-hide-y); }
.mNw-header.is-visible{ --mNw-header-y: 0px; }

/* Reveal after threshold */
.mNw-header--reveal{
  position: fixed;
  top: 0; left: 0; right: 0;
  transform: translateY(var(--mNw-header-hide-y));
  opacity: 0;
  pointer-events: none;
  transition:
    transform var(--mNw-header-dur) var(--mNw-header-ease),
    opacity var(--mNw-header-dur) var(--mNw-header-ease);
  will-change: transform, opacity;
}
.mNw-header--reveal.is-visible{
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

/* Shrink on sticky (Elementor adds elementor-sticky--effects to the sticky element) */
.mNw-header.mNw-header--shrink{
  transition:
    transform var(--mNw-header-dur) var(--mNw-header-ease),
    background-color var(--mNw-header-dur) var(--mNw-header-ease),
    box-shadow var(--mNw-header-dur) var(--mNw-header-ease),
    padding var(--mNw-header-dur) var(--mNw-header-ease);
}

/* Sticky background: force solid surface on sticky state */
.mNw-header.elementor-sticky--effects{
  background: white !important;
  --mNw-header-pad-y: 0px;
  --mNw-header-pad-x: 0px;
}

/* Elementor containers vary; cover common cases */
.mNw-header.elementor-sticky--effects > .e-con-inner,
.mNw-header.elementor-sticky--effects > .elementor-container,
.mNw-header.elementor-sticky--effects > .elementor-element,
.mNw-header.elementor-sticky--effects .e-con-inner{
  background: inherit !important;
}

/* Hide pseudo inverted shapes while sticky is active */
.mNw-header.elementor-sticky--effects .mNw-invMask{
  /* turn off mask-based cutouts */
  -webkit-mask: none !important;
          mask: none !important;
}

/* and also disable fallback pseudos if running */
.mNw-header.elementor-sticky--effects .mNw-invMask::before,
.mNw-header.elementor-sticky--effects .mNw-invMask::after{
  content: none !important;
}

/* Logo sizing */
.mNw-header__logo img{
  height: var(--mNw-logo-h-normal);
  width: auto;
  transition: height var(--mNw-header-dur) var(--mNw-header-ease);
}

.mNw-header.mNw-header--shrink.elementor-sticky--effects .mNw-header__logo img{
  height: var(--mNw-logo-h-sticky);
}

/* Glass inner container */
.mNw-header__glass{
  background: var(--mNw-glass-bg);
  border: 1px solid var(--mNw-glass-border);
  box-shadow: var(--mNw-glass-shadow);
  backdrop-filter: var(--mNw-glass-blur);
  -webkit-backdrop-filter: var(--mNw-glass-blur);
}

/* Underline links (correct layers, modern + simple) */
.mNw-underline a{
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 2px;
  transition: background-size 300ms var(--mNw-ease-out);
}
.mNw-underline a:hover{
  background-size: 100% 2px;
}

/* 4.3 Master reveal system */
.mNw-reveal :is(.elementor-heading-title,.elementor-widget-container){
  display: inline-block;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .mNw-reveal :is(.elementor-heading-title,.elementor-widget-container){
    animation: none !important;
    transform: none !important;
    filter: none !important;
    opacity: 1 !important;
  }
  .mNw-reveal :is(.elementor-heading-title,.elementor-widget-container)::before{
    content: none !important;
  }
  .mNw-header,
  .mNw-header--reveal,
  .mNw-header__logo img{
    transition: none !important;
  }
}

/* =========================================================
   Dark mode — DISABLED by design.
   NaciónSushi is a LIGHT editorial brand (paper background, ink
   text). Auto-inverting on the visitor's OS preference would
   break the palette (pink CTA → off-white, etc.) and fight the
   design system. Dark is therefore OPT-IN per zone via the
   .mNw-theme--dark class (defined further below) — apply it to
   any section/container you want dark (e.g. the menu band, the
   country grid on ink). Do NOT re-enable the OS media query
   unless the whole brand goes dark.

   If you ever DO want OS-driven dark, uncomment and map brand
   tokens to the DS dark surfaces — never to a neutral that
   discards the pink brand.
   --------------------------------------------------------- */
/*
@media (prefers-color-scheme: dark){
  :root{
    --mNw-surface-1: var(--ink, #141414);
    --mNw-surface-2: var(--ink-2, #1d1d1d);
    --mNw-text-1: var(--paper, #f4f1ea);
    --mNw-text-2: rgba(244,241,234,.72);
    --mNw-border: rgba(255,255,255,.14);
    --mNw-focus: rgba(255,255,255,.50);
    --mNw-glass-bg: rgba(20,20,20,.70);
    --mNw-glass-border: rgba(255,255,255,.12);
  }
}
*/

/* Keyframes */
@keyframes mNw_fadeUp{ to { opacity: 1; transform: translateY(0); } }
@keyframes mNw_blurReveal{ to { opacity: 1; transform: translateY(0); filter: blur(0px); } }
@keyframes mNw_wipeX{
  0% { transform: translateX(-101%); }
  45% { transform: translateX(0%); }
  100% { transform: translateX(101%); }
}
@keyframes mNw_skewWipe{
  0% { transform: translateX(-120%) skewX(-18deg); }
  45% { transform: translateX(0%) skewX(-18deg); }
  100% { transform: translateX(120%) skewX(-18deg); }
}
@keyframes mNw_highlight{ to { background-size: 100% 0.9em; } }

/* Modifiers */
.mNw-reveal--wipe :is(.elementor-heading-title,.elementor-widget-container){
  position: relative; overflow: hidden; vertical-align: bottom;
}
.mNw-reveal--wipe :is(.elementor-heading-title,.elementor-widget-container)::before{
  content:""; position:absolute; inset:0;
  background: var(--mNw-reveal-wipe);
  transform: translateX(-101%);
  animation: mNw_wipeX var(--mNw-reveal-dur) var(--mNw-reveal-ease) var(--mNw-reveal-delay) forwards;
}

.mNw-reveal--skew :is(.elementor-heading-title,.elementor-widget-container){
  position: relative; overflow: hidden; vertical-align: bottom;
}
.mNw-reveal--skew :is(.elementor-heading-title,.elementor-widget-container)::before{
  content:""; position:absolute; inset:-30% -10%;
  background: var(--mNw-reveal-wipe);
  transform: translateX(-120%) skewX(-18deg);
  animation: mNw_skewWipe var(--mNw-reveal-dur) var(--mNw-reveal-ease) var(--mNw-reveal-delay) forwards;
}

.mNw-reveal--blur :is(.elementor-heading-title,.elementor-widget-container){
  opacity: 0;
  filter: blur(var(--mNw-reveal-blurFrom));
  transform: translateY(var(--mNw-reveal-y));
  will-change: transform, opacity, filter;
  animation: mNw_blurReveal var(--mNw-reveal-dur) var(--mNw-reveal-ease) var(--mNw-reveal-delay) forwards;
}

.mNw-reveal--fade :is(.elementor-heading-title,.elementor-widget-container){
  opacity: 0;
  transform: translateY(calc(var(--mNw-reveal-y) * .45));
  will-change: transform, opacity;
  animation: mNw_fadeUp var(--mNw-reveal-dur) var(--mNw-reveal-ease) var(--mNw-reveal-delay) forwards;
}

.mNw-reveal--highlight :is(.elementor-heading-title,.elementor-widget-container){
  display: inline;
  background-image: linear-gradient(to right, var(--mNw-reveal-highlight), var(--mNw-reveal-highlight));
  background-repeat: no-repeat;
  background-size: 0% 0.9em;
  background-position: 0 85%;
  animation: mNw_highlight var(--mNw-reveal-dur) var(--mNw-reveal-ease) var(--mNw-reveal-delay) forwards;
}

/* Scroll blur (progressive enhancement) */
.mNw-reveal--scroll-blur :is(.elementor-heading-title,.elementor-widget-container){
  opacity: 0;
  filter: blur(var(--mNw-reveal-blurFrom));
  transform: translateY(var(--mNw-reveal-y));
  will-change: transform, opacity, filter;
}
@supports (animation-timeline: view()){
  .mNw-reveal--scroll-blur :is(.elementor-heading-title,.elementor-widget-container){
    animation: mNw_blurReveal linear both;
    animation-timeline: view();
    animation-range: entry 10% cover 35%;
  }
}
@supports not (animation-timeline: view()){
  .mNw-reveal--scroll-blur :is(.elementor-heading-title,.elementor-widget-container){
    animation: mNw_blurReveal var(--mNw-reveal-dur) var(--mNw-reveal-ease) var(--mNw-reveal-delay) forwards;
  }
}

/* =========================================================
   4.3b Scroll Reveal Suite (Append)
   Uses view() timelines when available, fallback otherwise.
   Classes to add in Elementor:
     - mNw-reveal--scroll-fade
     - mNw-reveal--scroll-up
     - mNw-reveal--scroll-scale
     - mNw-reveal--scroll-wipe
   (You already have: mNw-reveal--scroll-blur)
   ========================================================= */

/* Shared base: keep targeting consistent with your boilerplate */
.mNw-reveal--scroll-fade :is(.elementor-heading-title,.elementor-widget-container),
.mNw-reveal--scroll-up :is(.elementor-heading-title,.elementor-widget-container),
.mNw-reveal--scroll-scale :is(.elementor-heading-title,.elementor-widget-container),
.mNw-reveal--scroll-wipe :is(.elementor-heading-title,.elementor-widget-container){
  will-change: transform, opacity, filter;
}

/* Keyframes (new ones only) */
@keyframes mNw_fadeIn { to { opacity: 1; } }
@keyframes mNw_scaleIn { to { opacity: 1; transform: scale(1); } }

/* -----------------------------------------
   Scroll Fade (opacity only)
   ----------------------------------------- */
.mNw-reveal--scroll-fade :is(.elementor-heading-title,.elementor-widget-container){
  opacity: 0;
}

@supports (animation-timeline: view()){
  .mNw-reveal--scroll-fade :is(.elementor-heading-title,.elementor-widget-container){
    animation: mNw_fadeIn linear both;
    animation-timeline: view();
    animation-range: entry 15% cover 35%;
  }
}
@supports not (animation-timeline: view()){
  .mNw-reveal--scroll-fade :is(.elementor-heading-title,.elementor-widget-container){
    animation: mNw_fadeIn var(--mNw-reveal-dur) var(--mNw-reveal-ease) var(--mNw-reveal-delay) forwards;
  }
}

/* -----------------------------------------
   Scroll Up (fade + translateY) using your mNw_fadeUp
   ----------------------------------------- */
.mNw-reveal--scroll-up :is(.elementor-heading-title,.elementor-widget-container){
  opacity: 0;
  transform: translateY(var(--mNw-reveal-y));
}

@supports (animation-timeline: view()){
  .mNw-reveal--scroll-up :is(.elementor-heading-title,.elementor-widget-container){
    animation: mNw_fadeUp linear both;
    animation-timeline: view();
    animation-range: entry 10% cover 35%;
  }
}
@supports not (animation-timeline: view()){
  .mNw-reveal--scroll-up :is(.elementor-heading-title,.elementor-widget-container){
    animation: mNw_fadeUp var(--mNw-reveal-dur) var(--mNw-reveal-ease) var(--mNw-reveal-delay) forwards;
  }
}

/* -----------------------------------------
   Scroll Scale (fade + subtle scale)
   ----------------------------------------- */
.mNw-reveal--scroll-scale :is(.elementor-heading-title,.elementor-widget-container){
  opacity: 0;
  transform: scale(.96);
}

@supports (animation-timeline: view()){
  .mNw-reveal--scroll-scale :is(.elementor-heading-title,.elementor-widget-container){
    animation: mNw_scaleIn linear both;
    animation-timeline: view();
    animation-range: entry 12% cover 35%;
  }
}
@supports not (animation-timeline: view()){
  .mNw-reveal--scroll-scale :is(.elementor-heading-title,.elementor-widget-container){
    animation: mNw_scaleIn var(--mNw-reveal-dur) var(--mNw-reveal-ease) var(--mNw-reveal-delay) forwards;
  }
}

/* -----------------------------------------
   Scroll Wipe (cover wipe) using your mNw_wipeX
   Notes:
     - This animates the ::before overlay only.
     - Keeps your existing non-scroll mNw-reveal--wipe intact.
   ----------------------------------------- */
.mNw-reveal--scroll-wipe :is(.elementor-heading-title,.elementor-widget-container){
  position: relative;
  overflow: hidden;
  display: inline-block;
  vertical-align: bottom;
}

.mNw-reveal--scroll-wipe :is(.elementor-heading-title,.elementor-widget-container)::before{
  content:"";
  position:absolute;
  inset:0;
  background: var(--mNw-reveal-wipe);
  transform: translateX(-101%);
}

@supports (animation-timeline: view()){
  .mNw-reveal--scroll-wipe :is(.elementor-heading-title,.elementor-widget-container)::before{
    animation: mNw_wipeX linear both;
    animation-timeline: view();
    animation-range: entry 15% cover 30%;
  }
}
@supports not (animation-timeline: view()){
  .mNw-reveal--scroll-wipe :is(.elementor-heading-title,.elementor-widget-container)::before{
    animation: mNw_wipeX var(--mNw-reveal-dur) var(--mNw-reveal-ease) var(--mNw-reveal-delay) forwards;
  }
}

/* -----------------------------------------
   Reduced motion safety (covers ALL scroll reveals)
   ----------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .mNw-reveal--scroll-fade :is(.elementor-heading-title,.elementor-widget-container),
  .mNw-reveal--scroll-up :is(.elementor-heading-title,.elementor-widget-container),
  .mNw-reveal--scroll-scale :is(.elementor-heading-title,.elementor-widget-container),
  .mNw-reveal--scroll-wipe :is(.elementor-heading-title,.elementor-widget-container),
  .mNw-reveal--scroll-blur :is(.elementor-heading-title,.elementor-widget-container){
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }

  .mNw-reveal--scroll-wipe :is(.elementor-heading-title,.elementor-widget-container)::before{
    content: none !important;
  }
}


/* Presets */
.mNw-inv-sm{ --mNw-inv-r: 12px; }
.mNw-inv-md{ --mNw-inv-r: 20px; }
.mNw-inv-lg{ --mNw-inv-r: 32px; }

/* Inverted Border */
.mNw-invMask::before,
.mNw-invMask::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: calc(var(--mNw-inv-r) * 2); 
  height: calc(var(--mNw-inv-r) * 2);
  background-color: transparent;
}

/*  ELEMENT TOP LEFT  */
.mNw-invMask--tl::before,
.mNw-invMask--tl::after,
.mNw-invMask-heading--tl::before,
.mNw-invMask-heading--tl::after
{
  border-top-left-radius: var(--mNw-inv-r);
  box-shadow: 0 calc(var(--mNw-inv-r) * -1) 0 0 var(--mNw-inv-fill);
}

.mNw-invMask--tl::before {
  top: 100%;
  left: 0;
}

.mNw-invMask--tl::after {
  top: 0;
  left: 100%;
}

.mNw-invMask-heading--tl::before {
  top: 100%;
  left: 1rem;
}

.mNw-invMask-heading--tl::after {
  top: 1rem;
  left: 100%;
}

/*  ELEMENT CENETER RIGHT  */
.mNw-invMask--cr::before {
  border-bottom-right-radius: var(--mNw-inv-r);
  box-shadow: var(--mNw-inv-r) var(--mNw-inv-r) 0 0 var(--mNw-inv-fill);
}

.mNw-invMask--cr::after {
  border-top-right-radius: var(--mNw-inv-r);
  box-shadow: 0 calc(var(--mNw-inv-r) * -1) 0 0 var(--mNw-inv-fill);
}

.mNw-invMask--cr::before {
  top: calc(calc(2 * var(--mNw-inv-r)) * -1);
  left: calc(100% - (2 * var(--mNw-inv-r)));
}

.mNw-invMask--cr::after {
  top: 100%;
  right: 0;
}


/* =========================================================
   mNw Section Spacing System
   Apply to Elementor section/container:
     mNw-sec (default)
     mNw-sec mNw-sec--tight
     mNw-sec mNw-sec--loose
   Optional:
     mNw-boxed -> keep inner content max width centered
   ========================================================= */

.mNw-sec{
  padding-block: var(--mNw-sec-y);
  padding-inline: var(--mNw-sec-x);
}

.mNw-sec--tight{ padding-block: var(--mNw-sec-y-tight); }
.mNw-sec--loose{ padding-block: var(--mNw-sec-y-loose); }

/* Boxed inner layout helper:
   Put mNw-boxed on the SAME container that wraps content,
   or on an inner container if you use nested containers.
*/
.mNw-boxed{
  max-width: var(--mNw-container);
  margin-inline: auto;
}

/* Optional: section separators */
.mNw-sec--borderTop{ border-top: 1px solid var(--mNw-border); }
.mNw-sec--borderBottom{ border-bottom: 1px solid var(--mNw-border); }


/* Force a light theme zone (DS paper/ink) */
.mNw-theme--light{
  --mNw-surface-1: var(--paper, #f4f1ea);
  --mNw-surface-2: var(--white, #ffffff);
  --mNw-text-1: var(--ink, #141414);
  --mNw-text-2: rgba(20,20,20,.72);
  --mNw-border: rgba(0,0,0,.12);
  --mNw-focus: rgba(0,0,0,.45);
  --mNw-glass-bg: rgba(244,241,234,.80);
  --mNw-glass-border: rgba(0,0,0,.08);
}

/* Force a dark theme zone (DS ink band — for menu/country grid on ink) */
.mNw-theme--dark{
  --mNw-surface-1: var(--ink, #141414);
  --mNw-surface-2: var(--ink-2, #1d1d1d);
  --mNw-text-1: var(--paper, #f4f1ea);
  --mNw-text-2: rgba(244,241,234,.72);
  --mNw-border: rgba(255,255,255,.14);
  --mNw-focus: rgba(255,255,255,.50);
  --mNw-glass-bg: rgba(20,20,20,.70);
  --mNw-glass-border: rgba(255,255,255,.12);
}

/* =========================================================
   mNw Button System (Elementor-safe)
   Apply to Elementor Button widget:
     Advanced → CSS Classes: mNw-btn mNw-btn--primary
   Variants:
     --primary, --secondary, --ghost
   Sizes:
     --sm, --md (default), --lg
   ========================================================= */

/* Target ONLY the Elementor button element to avoid styling random wrappers */
.mNw-btn .elementor-button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--mNw-btn-gap);

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

  line-height: var(--mNw-btn-lh);
  text-decoration: none;

  cursor: pointer;
  user-select: none;

  transition:
    transform var(--mNw-btn-dur) var(--mNw-btn-ease),
    background-color var(--mNw-btn-dur) var(--mNw-btn-ease),
    color var(--mNw-btn-dur) var(--mNw-btn-ease),
    border-color var(--mNw-btn-dur) var(--mNw-btn-ease),
    box-shadow var(--mNw-btn-dur) var(--mNw-btn-ease);
}

/* Focus ring (applies when keyboard focusing the actual <a> / <button>) */
.mNw-btn .elementor-button:focus-visible{
  outline: 2px solid var(--mNw-focus);
  outline-offset: 3px;
}

/* PRIMARY */
.mNw-btn--primary .elementor-button{
  background: var(--mNw-brand);
  color: var(--mNw-brand-contrast);
  border: 1px solid transparent;
  box-shadow: var(--mNw-shadow-s);
}
.mNw-btn--primary .elementor-button:hover{
  box-shadow: var(--mNw-shadow-m);
}

/* SECONDARY */
.mNw-btn--secondary .elementor-button{
  background: var(--mNw-surface-1);
  color: var(--mNw-text-1);
  border: 1px solid var(--mNw-border);
  box-shadow: none;
}
.mNw-btn--secondary .elementor-button:hover{
  background: var(--mNw-surface-2);
}

/* GHOST */
.mNw-btn--ghost .elementor-button{
  background: transparent;
  color: var(--mNw-text-1);
  border: 1px solid transparent;
  box-shadow: none;
}
.mNw-btn--ghost .elementor-button:hover{
  background: color-mix(in srgb, var(--mNw-text-1) 8%, transparent);
  border-color: color-mix(in srgb, var(--mNw-text-1) 14%, transparent);
}

/* Sizes */
.mNw-btn--sm .elementor-button{
  --mNw-btn-pad-y: 0.65em;
  --mNw-btn-pad-x: 0.95em;
}
.mNw-btn--lg .elementor-button{
  --mNw-btn-pad-y: 1.05em;
  --mNw-btn-pad-x: 1.45em;
}

/* Icon sizing inside Elementor button */
.mNw-btn .elementor-button-icon svg{
  width: 1em;
  height: 1em;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .mNw-btn .elementor-button{
    transition: none !important;
    transform: none !important;
  }
}

.mNw-smooth-slider .swiper-wrapper {
  -webkit-transition-timing-function: linear !important;
  transition-timing-function: linear !important;
}

/* =========================================================
   DS Bridge utilities (menu/editorial primitives)
   Mirror the Design System component classes so Elementor
   widgets can reuse the same vocabulary. Driven by brand
   tokens — all with hard fallbacks.
   Apply via Advanced → CSS Classes.
   ========================================================= */

/* Dietary / menu pills — DS: .tag + .tag-lime/.tag-orange/.tag-ink
   Use on menu-card dietary_tag terms (PRD §3.2). */
/* .mNw-tag and its four modifiers were defined TWICE, ~300 lines apart, with
   conflicting values — font-size, font-weight, letter-spacing, padding and
   --ink's colour all differed, and the second block's own comment claimed to
   "extend the existing .mNw-tag--* if present" when it actually overrode them
   per property. The surviving render was a BLEND neither block described.
   Merged into the single definition below (search: DIETARY PILLS), which keeps
   the later block's cascade slot and carries forward the three declarations
   only the first one made: gap, color and the lime-tinted default background. */

/* Kicker — DS: .kicker (mono, wide tracking, leading rule) */
.mNw-kicker{
  display: inline-flex;
  align-items: center;
  gap: .6em;
  font-family: var(--mNw-font-mono);
  font-size: var(--mNw-text-xs);
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--mNw-text-2);
}
.mNw-kicker::before{
  content: "";
  inline-size: 2.5em;
  block-size: 2px;
  background: currentColor;
  opacity: .6;
}

/* Eyebrow — DS: .eyebrow (script, glass badge) */
.mNw-eyebrow{
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-family: var(--mNw-font-script);
  line-height: 1;
}

/* Display headline helper — DS: --disp (Champ) */
.mNw-display{
  font-family: var(--mNw-font-display);
  line-height: var(--mNw-lh-tight);
  text-wrap: balance;
}

/* =========================================================
   FIX: Mobile portrait header top padding (non-sticky only)
   Reason: prevents inv-radius cutouts from appearing above header
   ========================================================= */

@media (max-width: 767px) and (orientation: portrait){

  /* When NOT sticky */
  .mNw-header:not(.elementor-sticky--effects){
    padding-top: 0 !important;

    /* Optional: keep notch safe-area if you prefer (uncomment)
    padding-top: env(safe-area-inset-top) !important;
    */
  }

}

/* =========================================================
   Menu templates (FEAT-MENU-TEMPLATES-001)
   Consumed by the Elementor Theme Builder archive + single
   templates for /{cc}/menu/ and /{cc}/menu/{slug}/.
   All values use var(--token, fallback) — renders correctly
   even before Elementor v4 Variables are registered.
   ========================================================= */

/* ---------------------------------------------------------
   Lenis required styles (injected by ns-motion.js at runtime,
   repeated here for completeness — the JS version wins)
   --------------------------------------------------------- */
html.lenis,
html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }
html.mNw-ready .mNw-fade,
html.mNw-ready .mNw-scroll { opacity: 0; will-change: transform, opacity; }

/* ---------------------------------------------------------
   Scroll-spy nav — sticky chip bar
   --------------------------------------------------------- */
.mNw-menu-spy {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.625rem var(--pad, 1rem);
  background: var(--paper, #f4f1ea);
  border-bottom: 1px solid rgba(0,0,0,.08);
}

/* Active chip */
.mNw-menu-spy a {
  display: inline-block;
  padding: 0.3125rem 0.875rem;
  border-radius: var(--r-pill, 6.25rem);
  font-family: var(--mNw-font-mono, var(--mono, monospace));
  font-size: var(--mNw-text-xs, 0.75rem);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink, #141414);
  text-decoration: none;
  background: transparent;
  border: 1px solid transparent;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  white-space: nowrap;
}

.mNw-menu-spy a.is-active,
.mNw-menu-spy a:hover {
  background: var(--pink, #ee3b7b);
  color: var(--white, #ffffff);
  border-color: var(--pink, #ee3b7b);
}

/* Mobile — horizontal scroll, no wrap */
@media (max-width: 767px) {
  .mNw-menu-spy {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .mNw-menu-spy::-webkit-scrollbar { display: none; }
}

/* ---------------------------------------------------------
   Category section scroll-margin (accounts for sticky nav
   ~4rem + a little breathing room)
   --------------------------------------------------------- */
[id^="cat-"] {
  scroll-margin-top: 5rem;
}

/* ---------------------------------------------------------
   Menu card — pink surface, 4:3 photo, no-CLS intrinsic ratio
   --------------------------------------------------------- */
.mNw-menu-card {
  background: var(--pink, #ee3b7b);
  border-radius: var(--r-card, 1.375rem);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  color: var(--white, #ffffff);
}

/* 4:3 intrinsic-ratio media box — reserves space before image loads → no CLS */
.mNw-menu-card__media {
  position: relative;
  width: 100%;
  padding-top: 75%; /* 4:3 */
  overflow: hidden;
  background: var(--pink-d, #d42a68);
}

.mNw-menu-card__media img,
.mNw-menu-card__media .e-loop-item-template {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Dietary badge rail — the circular MENU HIGHLIGHTS marks over the photo.
   Absolutely positioned inside the 4:3 media box (which is already
   position:relative) and laid out as a flex row so MULTIPLE badges sit side by
   side: a dish can carry picante + contiene-maní + opción gluten friendly at
   once. Each badge is one Image widget gated by an "In Dietary Tags" display
   condition, and a hidden condition emits NO markup at all
   (should_render → false), so the remaining badges close ranks instead of
   leaving a gap — which is why this is a flex row and not absolute per badge.

   pointer-events:none because the whole card is a link; the rail must not eat
   the click. The container has no background or border of its own, so a dish
   with no badge-bearing tag renders an empty box that is invisible. */
.mNw-menu-card__badges {
  position: absolute;
  z-index: 2;
  inset-block-start: 0.625rem;
  inset-inline-start: 0.625rem;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.375rem;
  inline-size: calc(100% - 1.25rem);
  pointer-events: none;
}

/* The class lands on the <img> ITSELF, not on a wrapper — a v4 Image widget
   renders as a bare <img class="e-image-base ...">, with no container of its
   own. Writing this as `.mNw-menu-card__badge img` matches nothing.

   Badges are MULTICOLOUR artwork, not monochrome icons: they carry their own
   fills and must never be routed through the Icon widget, whose recolouring
   writes `fill:` onto the root (see the currentColor normalisation in 6a8ebc1). */
.mNw-menu-card__badge {
  flex: 0 0 auto;
  inline-size: 9%;
  max-inline-size: 4.5rem;
  block-size: auto;
}

/* ROLL HIGHLIGHT kickers — the typographic marks, top RIGHT, opposite the
   circular dietary badges. Driven by ns_menu_badge rather than a taxonomy (see
   docs/nacionsushi-menu-import/README.md), so the show/hide runs off the
   In Menu Badges condition instead of In Dietary Tags.

   Sized by HEIGHT, not width, and this is the whole reason they are a separate
   rail rather than more children of the badge one. The artwork is stacked
   wordmarks with wildly different proportions — FA/VO/RI/TO is 114x328 while
   BRU/TAL is 167x155 — so a shared width would render one as a stripe and the
   other as a block. A shared cap height is what makes them read as one set.

   They are `fill="white"` with no plate behind them, so they rely on the photo
   for contrast. A pale image will swallow them; that is a photography
   constraint, not something CSS can fix here without inventing a scrim the
   comp does not have. */
.mNw-menu-card__highlights {
  position: absolute;
  z-index: 2;
  inset-block-start: 0.625rem;
  inset-inline-end: 0.625rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 0.5rem;
  max-inline-size: calc(100% - 1.25rem);
  pointer-events: none;
}

/* Like the badge, the class lands on the <img> itself — a v4 Image widget has
   no wrapper element. */
.mNw-menu-card__highlight {
  flex: 0 0 auto;
  block-size: 4.75rem;
  inline-size: auto;
}

.mNw-menu-card__body {
  padding: 0.875rem 1rem 1rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* ---------------------------------------------------------
   Dotted price leader — name ···· $price
   --------------------------------------------------------- */
.mNw-price-leader {
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
  min-width: 0;
}

.mNw-price-leader__name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 600;
}

.mNw-price-leader__dots {
  flex: 1;
  border-bottom: 2px dotted rgba(255,255,255,0.5);
  margin-bottom: 0.2em;
  min-width: 1rem;
}

.mNw-price-leader__price {
  white-space: nowrap;
  font-weight: 700;
}

/* ---------------------------------------------------------
   Dietary pills — lime / orange / ink / pink variants
   (extends existing .mNw-tag--* if present; self-contained fallback)
   --------------------------------------------------------- */
.mNw-tag {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  padding: 0.1875rem 0.625rem;
  border-radius: var(--r-pill, 6.25rem);
  font-family: var(--mNw-font-mono, var(--mono, monospace));
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--ink, #141414);
  background: color-mix(in srgb, var(--mNw-accent-2, #cddc28) 22%, transparent);
}

.mNw-tag--lime  { background: var(--lime, #cddc28);   color: var(--ink, #141414); }
.mNw-tag--orange{ background: var(--orange, #ff7300);  color: var(--white, #ffffff); }
.mNw-tag--ink   { background: var(--ink, #141414);    color: var(--white, #ffffff); }
.mNw-tag--pink  { background: var(--pink, #ee3b7b);   color: var(--white, #ffffff); }

/* ---------------------------------------------------------
   Available-at locations list
   --------------------------------------------------------- */
.mNw-avail {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.mNw-avail a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.mNw-avail a:hover {
  opacity: 0.75;
}

/* ---------------------------------------------------------
   Unavailable card / single — muted, no price
   --------------------------------------------------------- */
.mNw-card--unavailable {
  opacity: 0.55;
  filter: grayscale(0.4);
}

/* ---------------------------------------------------------
   Empty-section / chip auto-hide (toggled by ns-motion.js — D1/AC7).
   A dedicated class with display:none!important: the bare [hidden]
   attribute only hides at UA specificity, which Elementor's
   display:flex on .e-con/section out-specifies — so an empty
   category section (and its nav chip) would stay visible. This
   class wins. Applied to both the section and its matching chip.
   --------------------------------------------------------- */
.mNw-hidden { display: none !important; }

/* ---------------------------------------------------------
   Menu card grid — responsive multi-column → single column.
   Failsafe default (AC11/AC12); operators may instead use the
   Loop Grid's native per-breakpoint column controls (runbook).
   --------------------------------------------------------- */
.mNw-menu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: var(--gap, 1.25rem);
}

@media (max-width: 767px) {
  .mNw-menu-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   Location templates (FEAT-LOCATION-TEMPLATES-001)
   Consumed by the Elementor Theme Builder templates for:
     /{cc}/sucursales/                 (archive; /us/locations/)
     /{cc}/sucursales/ciudad/{slug}/   (city page; /us/locations/city/{slug}/)
     /{cc}/sucursales/{slug}/          (single; /us/locations/{slug}/)
   All values use var(--token, fallback) so they render
   correctly even before Elementor Variables are registered.
   ========================================================= */

/* ---------------------------------------------------------
   Location card — 2026 comp: pink surface, fixed-height photo,
   pin badge + delivery pill + Reserva/Pedir footer.
   Apply mNw-loc-card on the Loop Grid item / single card.
   Card content (title, blurb, delivery badge, footer buttons) is
   rendered by [ns_location_heading] / [ns_location_delivery] /
   [ns_location_actions] as plain markup, so only .mNw-loc-card__media
   (which wraps a real e-image widget) needs the atomic bridge below.
   --------------------------------------------------------- */
.mNw-loc-card {
  background: var(--pink, #ee3b7b);
  border-radius: var(--r-card, 1.375rem);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 50px rgba(0,0,0,.4);
}

.mNw-loc-card__media {
  position: relative;
  width: 100%;
  height: 230px;
  overflow: hidden;
  background: color-mix(in srgb, var(--ink, #141414) 15%, var(--pink, #ee3b7b));
}

.mNw-loc-card__media img,
.mNw-loc-card__media .e-loop-item-template {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s var(--mNw-ease-out, cubic-bezier(.2,.8,.2,1));
}

.mNw-loc-card:hover .mNw-loc-card__media img {
  transform: scale(1.04);
}

.mNw-loc-card__body {
  padding: 1.375rem 1.5rem 1.625rem; /* 22px 24px 26px */
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.875rem; /* 14px */
}

.mNw-loc-card__title {
  font-family: var(--mNw-font-display, var(--disp));
  font-size: 2.375rem; /* 38px */
  line-height: .9;
  letter-spacing: -.02em;
  color: var(--white, #ffffff);
  text-transform: capitalize;
  margin: 0;
  text-wrap: balance;
}

.mNw-loc-card__blurb {
  font-family: var(--mNw-font-mono, var(--mono, monospace));
  font-size: 0.8125rem; /* 13px */
  line-height: 1.5;
  color: rgba(255,255,255,.92);
  margin: 0;
}

.mNw-loc-card__footer {
  margin-block-start: auto;
  display: flex;
  gap: 0.625rem; /* 10px */
}

/* Reserva/Pedir fill the row equally. Safe as a descendant rule — the
   footer and its two <a class="mNw-btn …"> children are both rendered by
   [ns_location_actions] as plain markup, never through Elementor's atomic
   widget path, so this isn't fighting `.e-button-base` and needs no bridge. */
.mNw-loc-card__footer > .mNw-btn {
  flex: 1;
}

/* ---------------------------------------------------------
   Status badge — BEM modifier per status value
   --------------------------------------------------------- */
.mNw-loc-status {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-family: var(--mNw-font-mono, var(--mono, monospace));
  font-size: var(--mNw-text-xs, 0.75rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.25rem 0.625rem;
  border-radius: var(--r-pill, 6.25rem);
  line-height: 1;
}

.mNw-loc-status--open {
  background: #d4edda;
  color: #155724;
}

.mNw-loc-status--coming-soon {
  background: #fff3cd;
  color: #856404;
}

.mNw-loc-status--closed {
  background: #f8d7da;
  color: #721c24;
}

/* ---------------------------------------------------------
   Opening hours — definition list
   --------------------------------------------------------- */
.mNw-loc-hours {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 1.25rem;
  row-gap: 0.25rem;
  font-family: var(--mNw-font-sans, var(--sans, system-ui));
  font-size: var(--mNw-text-s, 0.875rem);
  margin: 0;
}

.mNw-loc-hours dt {
  font-weight: 600;
  color: var(--mNw-text-1, var(--ink, #141414));
}

.mNw-loc-hours dd {
  margin: 0;
  color: var(--mNw-text-2, rgba(20,20,20,.72));
}

/* ---------------------------------------------------------
   City nav — pill links to taxonomy archive pages
   --------------------------------------------------------- */
.mNw-loc-cities {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.mNw-loc-cities a {
  display: inline-block;
  padding: 0.375rem 0.875rem;
  border: 1px solid rgba(0,0,0,.16);
  border-radius: var(--r-pill, 6.25rem);
  font-family: var(--mNw-font-mono, var(--mono, monospace));
  font-size: var(--mNw-text-xs, 0.75rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.mNw-loc-cities a:hover,
.mNw-loc-cities a[aria-current] {
  background: var(--ink, #141414);
  color: var(--white, #ffffff);
  border-color: var(--ink, #141414);
}

/* ---------------------------------------------------------
   Leaflet map container — full-width, fixed height, touch-ready
   --------------------------------------------------------- */
.mNw-locmap {
  width: 100%;
  height: 480px;
  border-radius: var(--r-card, 1.375rem);
  overflow: hidden;
  position: relative;
  background: color-mix(in srgb, var(--paper, #f4f1ea) 80%, transparent);
}

@media (max-width: 767px) {
  .mNw-locmap {
    height: 300px;
    border-radius: 0;
  }
}

/* Atomic bridge — REQUIRED, not cosmetic. Elementor v4 lays its containers out
   as `display:flex; flex-direction:column; align-items:center`, and align-items
   sizes children shrink-to-fit on the cross axis instead of stretching them.
   Sibling widgets survive that because their content has intrinsic width; the
   shortcode widget's only child is [ns_locations_map]'s <script> payload, which
   has none — so the wrapper collapses to width:0 and .mNw-locmap's `width:100%`
   resolves against a zero-width containing block. Leaflet then initialises
   correctly into a 0x480 box and the map is present but invisible.

   Scoped with :has() to wrappers that actually carry a map: stretching every
   .elementor-widget-shortcode would re-lay-out [ns_menu_nav], [ns_available_at]
   and friends. (CHORE-LOCATIONS-MAP-ENQUEUE-001.) */
.elementor .elementor-widget:has(> .elementor-shortcode > .mNw-locmap),
.elementor .elementor-shortcode:has(> .mNw-locmap) {
  width: 100%;
  align-self: stretch;
}

/* Map pins — CSS divIcon via Leaflet L.divIcon */
.mNw-loc-pin {
  background: var(--pink, #ee3b7b);
  /* The logo star — path 1 of assets/img/icons/LOGO-VERT-NEGRO.svg, inlined as
     a MASK rather than a background image so colour stays token-driven: the
     same shape serves --pink (open) and the muted grey below by swapping only
     background. A url() to the .svg would read better, but global.css carries
     zero external asset references and an unreferenced file can be dropped by
     a worktree deploy, so the stylesheet stays self-contained.
     Shape carries its own hole (the sushi-roll counter), so the map shows
     through it — that is the logo, not a rendering fault.
     box-shadow is WRONG here: it paints the element box, not the masked shape.
     drop-shadow follows the alpha, hence the filter. (CHORE-MAP-STAR-PIN-001.) */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%2222.3230%20-1.9477%2086.9610%2086.9610%22%3E%3Cpath%20d=%22M109.284%2031.132H76.2221L65.7751%200L55.3846%2031.132H22.323L48.5579%2051.1534L38.1674%2083.0656L65.7657%2063.5893L91.9066%2083.0656L82.5504%2051.4636L109.274%2031.132H109.284ZM65.9256%2056.9155C59.8511%2056.9155%2054.8016%2052.554%2053.7297%2046.8014C52.7047%2047.8729%2051.5105%2049.4145%2050.4479%2050.2041C48.2194%2051.8396%2052.0465%2047.2714%2052.0183%2043.6712C51.9995%2040.0711%2048.1348%2035.4747%2050.3633%2037.1666C51.5387%2038.0596%2052.9304%2039.9019%2054.04%2040.9453C55.5727%2035.8319%2060.3213%2032.1096%2065.9256%2032.1096C72.7805%2032.1096%2078.3284%2037.6648%2078.3284%2044.5078C78.3284%2051.3508%2072.7711%2056.9155%2065.9256%2056.9155Z%22%20fill=%22%23000%22/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%2222.3230%20-1.9477%2086.9610%2086.9610%22%3E%3Cpath%20d=%22M109.284%2031.132H76.2221L65.7751%200L55.3846%2031.132H22.323L48.5579%2051.1534L38.1674%2083.0656L65.7657%2063.5893L91.9066%2083.0656L82.5504%2051.4636L109.274%2031.132H109.284ZM65.9256%2056.9155C59.8511%2056.9155%2054.8016%2052.554%2053.7297%2046.8014C52.7047%2047.8729%2051.5105%2049.4145%2050.4479%2050.2041C48.2194%2051.8396%2052.0465%2047.2714%2052.0183%2043.6712C51.9995%2040.0711%2048.1348%2035.4747%2050.3633%2037.1666C51.5387%2038.0596%2052.9304%2039.9019%2054.04%2040.9453C55.5727%2035.8319%2060.3213%2032.1096%2065.9256%2032.1096C72.7805%2032.1096%2078.3284%2037.6648%2078.3284%2044.5078C78.3284%2051.3508%2072.7711%2056.9155%2065.9256%2056.9155Z%22%20fill=%22%23000%22/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  filter: drop-shadow(0 0 1px rgba(255,255,255,.95))
          drop-shadow(0 2px 3px rgba(0,0,0,.35));
}

.mNw-loc-pin--muted {
  background: #9ca3af;
  filter: drop-shadow(0 0 1px rgba(255,255,255,.9))
          drop-shadow(0 1px 2px rgba(0,0,0,.22));
}

/* ---------------------------------------------------------
   CTA button row — wraps on mobile without overflow
   The buttons themselves use .mNw-btn (existing DS).
   This class handles the row-level layout only.
   --------------------------------------------------------- */
.mNw-loc-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

@media (max-width: 640px) {
  .mNw-loc-cta-row {
    flex-direction: column;
    align-items: stretch;
  }
}

/* =========================================================
   Country home (FEAT-COUNTRY-HOME-001)
   Consumed by the Elementor Page for /{cc}/ (country home).
   ========================================================= */

/* ---------------------------------------------------------
   Menu-category teaser nav — [ns_menu_categories] output.
   nav.mNw-menu-cats > a.mNw-menu-cats__item >
     span.mNw-menu-cats__name + span.mNw-menu-cats__count
   Wraps on narrower screens; collapses to one column at ≤480px
   (AC11); keyboard-focusable with visible focus ring (AC12).
   --------------------------------------------------------- */
.mNw-menu-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
}

.mNw-menu-cats__item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1rem;
  border-radius: var(--r-card, 1.375rem);
  background: var(--white, #ffffff);
  border: 1px solid rgba(0,0,0,.10);
  box-shadow: var(--mNw-shadow-s, 0 6px 18px rgba(0,0,0,.08));
  color: var(--ink, #141414);
  text-decoration: none;
  font-family: var(--mNw-font-sans, var(--sans, system-ui));
  font-weight: 600;
  transition:
    background var(--mNw-dur-fast, 180ms) var(--mNw-ease-out, cubic-bezier(.2,.8,.2,1)),
    box-shadow 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));
}

.mNw-menu-cats__item:hover {
  background: var(--pink, #ee3b7b);
  color: var(--white, #ffffff);
  box-shadow: var(--mNw-shadow-m, 0 12px 30px rgba(0,0,0,.10));
  border-color: transparent;
}

.mNw-menu-cats__item:focus-visible {
  outline: 2px solid var(--mNw-focus, rgba(0,0,0,.45));
  outline-offset: 3px;
}

.mNw-menu-cats__name {
  font-size: var(--mNw-text-s, 0.875rem);
  line-height: var(--mNw-lh-ui, 1.3);
}

.mNw-menu-cats__count {
  font-family: var(--mNw-font-mono, var(--mono, monospace));
  font-size: var(--mNw-text-xs, 0.75rem);
  font-weight: 700;
  padding: 0.125rem 0.5rem;
  border-radius: var(--r-pill, 6.25rem);
  background: color-mix(in srgb, var(--pink, #ee3b7b) 12%, transparent);
  color: var(--mNw-brand, var(--pink, #ee3b7b));
  line-height: 1;
  transition:
    background var(--mNw-dur-fast, 180ms),
    color var(--mNw-dur-fast, 180ms);
}

.mNw-menu-cats__item:hover .mNw-menu-cats__count {
  background: rgba(255,255,255,.25);
  color: var(--white, #ffffff);
}

/* Mobile ≤480px: collapse to single column (AC11) */
@media (max-width: 480px) {
  .mNw-menu-cats {
    flex-direction: column;
  }
  .mNw-menu-cats__item {
    width: 100%;
    justify-content: space-between;
  }
}

/* Reduced-motion safety (AC12) */
@media (prefers-reduced-motion: reduce) {
  .mNw-menu-cats__item,
  .mNw-menu-cats__count {
    transition: none !important;
  }
}
/* =========================================================
   DS HOME BANDS — Design System §06 "Secciones de página"
   Source: docs/NacionSushi Design System (standalone).html

   The DS defines six home bands:
     1 Hero               — foto + scrim oscuro
     2 Nación en el mundo — ink + tabs + marquee
     3 Franquicias        — lime + copy/stats/foto 4:5
     4 Menú · hero        — ink + script eyebrow + título gigante
     5 Category nav       — glass sticky chips  → SHIPPED (.mNw-menu-cats)
     6 Footer             — ink + 4 columnas + social

   Band 4 composes existing atoms (.mNw-eyebrow + .mNw-display on
   .mNw-theme--dark) and needs no new CSS. This block adds the four
   that had none: 1, 2, 3 and 6.

   CONTAINER NOTE: DS `.shell` (max-width 1440, centred) is ALREADY
   served by .mNw-boxed (max-width var(--mNw-container) =
   var(--maxw, 90rem)). Do NOT author a second .mNw-shell.

   PATH NOTE: everything here is styled on the element itself, so it
   renders on BOTH the v3 widget path and the v4 atomic path. The two
   button variants at the end are the exception — like the rest of the
   mNw-btn family they target `.elementor-button`, which only exists on
   the v3 path, so they also carry kit variants (see kit-build.sh G5).

   Every value uses var(--token, fallback), so an unregistered
   Elementor variable can never break the layout.
   ========================================================= */

/* ---------------------------------------------------------
   Button row — DS: .hero-actions / .nav-cta (Flexbox)
   "Grupos de botones — gap, nunca márgenes."
   --------------------------------------------------------- */
.mNw-actions{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mNw-space-3, 0.75rem);
}

@media (max-width: 640px){
  .mNw-actions{
    flex-direction: column;
    align-items: stretch;
  }
}

/* ---------------------------------------------------------
   Band grounds — DS §06: "Cada una tiene un color de fondo de la
   Nación y su propio radio de panel." Put one of these on the
   section container alongside .mNw-sec.
   --------------------------------------------------------- */
.mNw-band--ink{
  background: var(--ink, #141414);
  color: var(--paper, #f4f1ea);

  /* Self-theming, for the same reason .mNw-footer is: this class paints
     its own dark ground, so descendants must not resolve :root's LIGHT
     --mNw-text-*. Equivalent to also adding .mNw-theme--dark. */
  --mNw-surface-1: var(--ink, #141414);
  --mNw-surface-2: var(--ink-2, #1d1d1d);
  --mNw-text-1: var(--paper, #f4f1ea);
  --mNw-text-2: rgba(244,241,234,.72);
  --mNw-border: rgba(255,255,255,.14);
  --mNw-focus: rgba(255,255,255,.50);
}

.mNw-band--lime{
  background: var(--lime, #cddc28);
  color: var(--ink, #141414);
}

.mNw-band--paper{
  background: var(--paper, #f4f1ea);
  color: var(--ink, #141414);
}

/* ---------------------------------------------------------
   BAND 1 — Hero panel — DS: .hero-panel
   Stacked layers: media · scrim · content. Radius 30 (--r-panel).
     div.mNw-hero-panel
       > div.mNw-hero-panel__media    (Image, cover)
       > div.mNw-hero-panel__scrim
       > div.mNw-hero-panel__content  (eyebrow · H1 · lead · .mNw-actions)
   --------------------------------------------------------- */
.mNw-hero-panel{
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  align-items: end;
  border-radius: var(--mNw-radius-l, 1.875rem);
  min-block-size: min(88vh, 50rem);
  /* Base layer under the photo — keeps the scrim reading as intended before
     an image is set on __media. */
  background: var(--ink, #141414);
}

.mNw-hero-panel__media{
  position: absolute;
  inset: 0;
  z-index: 0;
}

.mNw-hero-panel__media img{
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/* Scrim — keeps the DS paper-on-photo headline legible over any image. */
.mNw-hero-panel__scrim{
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to top,
    color-mix(in srgb, var(--ink, #141414) 86%, transparent) 0%,
    color-mix(in srgb, var(--ink, #141414) 40%, transparent) 48%,
    transparent 100%
  );
}

.mNw-hero-panel__content{
  position: relative;
  z-index: 2;
  padding: clamp(1.25rem, 3.5vw, 3.5rem);
  color: var(--paper, #f4f1ea);
}

/* Full-bleed on mobile — the panel radius drops <768px, matching
   .mNw-locmap's behaviour. */
@media (max-width: 767px){
  .mNw-hero-panel{
    border-radius: 0;
    min-block-size: min(80vh, 34rem);
  }
}

/* ---------------------------------------------------------
   BAND 2 — Nación en el mundo — DS: .country-tab / .marquee
   Ink band. These classes do NOT paint a background — they inherit the
   band's theme, so the section container MUST carry .mNw-theme--dark.
   REQUIRED, not cosmetic: --mNw-text-* are defined at :root with the
   LIGHT values, so without the theme class the tabs render dark-on-ink.
   The var() fallbacks below therefore mirror :root (they only fire if the
   token block is missing entirely); the theme class does the real work.
   --------------------------------------------------------- */

/* Country tabs — DS: .country-tab · .active sobre dark */
.mNw-country-tabs{
  display: flex;
  flex-wrap: wrap;
  gap: var(--mNw-space-2, 0.5rem);
}

.mNw-country-tab,
.mNw-tab{
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.55em 1.1em;
  border-radius: var(--mNw-radius-pill, 6.25rem);
  border: 1px solid var(--mNw-border, rgba(0,0,0,.12));
  background: transparent;
  color: var(--mNw-text-2, rgba(20,20,20,.72));
  font-family: var(--mNw-font-mono, var(--mono, monospace));
  font-size: var(--mNw-text-xs, 0.75rem);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition:
    background var(--mNw-dur-fast, 180ms) var(--mNw-ease-out, cubic-bezier(.2,.8,.2,1)),
    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));
}

.mNw-country-tab:hover,
.mNw-tab:hover{
  color: var(--mNw-text-1, var(--ink, #141414));
  border-color: var(--pink, #ee3b7b);
}

.mNw-country-tab:focus-visible,
.mNw-tab:focus-visible{
  outline: 2px solid var(--mNw-focus, rgba(0,0,0,.45));
  outline-offset: 3px;
}

/* Active tab — DS: .country-tab.active. `aria-current` is the accessible
   source of truth; .is-active is the class hook for Elementor-driven
   markup that cannot set an ARIA attribute. */
.mNw-country-tab.is-active,
.mNw-country-tab[aria-current],
.mNw-tab.is-active,
.mNw-tab[aria-current]{
  background: var(--pink, #ee3b7b);
  border-color: transparent;
  color: var(--white, #ffffff);
}

/* Marquee — DS: .marquee · animación scroll-x · pausa en hover.
   Two markup shapes are supported, and the difference matters:

     A. the track's children ARE the items (spacing belongs to them)
        div.mNw-marquee > div.mNw-marquee__track > span.mNw-marquee__item ×2n
     B. the track's children are icon-list COPIES (spacing belongs to the li)
        div.mNw-marquee > div.mNw-marquee__track > .elementor-widget-icon-list ×2

   THE LOOP INVARIANT — the track holds N identical copies of one sequence and
   translates by exactly -100%/N. Three things break that, and all three were
   live on /pa/ when this was written:

     1. `gap` on the TRACK. Flex gap sits BETWEEN children only, so N children
        measure N·w + (N-1)·g while one repeat is N/2·w + N/2·g. Half the track
        is g/2 SHORT of a repeat, and the loop jumps by g/2 every cycle.
     2. `padding` on the TRACK. Same arithmetic — it inflates 100% while
        belonging to no repeat. Elementor containers default to 10px.
     3. Spacing that SKIPS the last item — `:not(:last-child)`, or Elementor's
        own `.elementor-inline-items` negative list margin. Every pair gets the
        gap except the seam pair, so two items collide once per copy.

   Measured before the fix: a 32px track gap plus 10px track padding produced a
   6px jump per cycle. Spacing therefore lives on the ITEMS, uniformly, last one
   included; the track carries neither gap nor padding.
   `scripts/verify-marquee.sh` asserts (track width / copies) == one repeat. */
.mNw-marquee{
  --mNw-marquee-copies: 2;
  --mNw-marquee-dur: 28s;
  --mNw-marquee-gap: var(--mNw-space-6, 2rem);
  overflow: hidden;
  inline-size: 100%;
  /* Fade the cut edges instead of hard-clipping mid-glyph. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.mNw-marquee__track{
  display: flex;
  flex-wrap: nowrap;
  inline-size: max-content;
  align-items: center;
  gap: 0;                        /* invariant 1 — spacing is on the items */
  padding: 0;                    /* invariant 2 — no padding inside the loop */
  animation: mNw-marquee-x var(--mNw-marquee-dur, 28s) linear infinite;
  will-change: transform;
}

/* Shape A: every direct child is one item and carries its own trailing space —
   the last one too, which is what makes the seam pair match every other pair. */
.mNw-marquee__track > *{
  flex: 0 0 auto;
  max-inline-size: none;
  margin-inline-end: var(--mNw-marquee-gap, 2rem);
}

/* Shape B: the child is a whole COPY, not an item. Its own trailing margin
   would land only at the seam, so it is dropped — the li spacing inside the
   list (uniform per item) is the gap in this shape. */
.mNw-marquee__track > .elementor-widget-icon-list{
  margin-inline-end: 0;
}

.mNw-marquee:hover .mNw-marquee__track,
.mNw-marquee:focus-within .mNw-marquee__track{
  animation-play-state: paused;
}

.mNw-marquee__item{
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  flex: 0 0 auto;
  white-space: nowrap;
  font-family: var(--mNw-font-display, var(--disp, system-ui));
  font-size: var(--mNw-h-m, clamp(1.75rem, 1.45rem + 1.40vw, 2.50rem));
  line-height: var(--mNw-lh-tight, 1.1);
  text-transform: uppercase;
  color: var(--mNw-text-1, var(--ink, #141414));
}

@keyframes mNw-marquee-x{
  from{ transform: translate3d(0, 0, 0); }
  to  { transform: translate3d(calc(-100% / var(--mNw-marquee-copies, 2)), 0, 0); }
}

/* ---------------------------------------------------------
   BAND 3 — Franquicias — DS: .franq (grid 1.1fr / .9fr)
   Lime band. Texto + imagen 4:5; colapsa a 1 columna <1000px.
   --------------------------------------------------------- */
.mNw-franq{
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--mNw-space-7, 3rem);
  align-items: center;
}

@media (max-width: 999px){
  .mNw-franq{
    grid-template-columns: 1fr;
    gap: var(--mNw-space-6, 2rem);
  }
}

/* Image slot — DS: "SLOT — 4:5 ROUNDED" (radius 24 · franquicias / equipo).
   aspect-ratio reserves the box before the image loads (no CLS). */
.mNw-slot--4x5{
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--mNw-radius-m, 1.375rem);
}

.mNw-slot--4x5 img{
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/* Stats — DS: .stat / .num */
.mNw-stats{
  display: flex;
  flex-wrap: wrap;
  gap: var(--mNw-space-6, 2rem);
}

.mNw-stat{
  display: flex;
  flex-direction: column;
  gap: 0.15em;
}

.mNw-stat__num{
  font-family: var(--mNw-font-display, var(--disp, system-ui));
  font-size: var(--mNw-h-l, clamp(2.25rem, 1.75rem + 2.30vw, 3.50rem));
  line-height: var(--mNw-lh-tight, 1.1);
  color: var(--mNw-text-1, var(--ink, #141414));
}

.mNw-stat__label{
  font-family: var(--mNw-font-mono, var(--mono, monospace));
  font-size: var(--mNw-text-xs, 0.75rem);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--mNw-text-2, rgba(20,20,20,.72));
}

/* ---------------------------------------------------------
   BAND 6 — Footer — DS: .footer / .foot-grid / .foot-col
   Ink band, 4 columnas → 2 → 1.

   SELF-THEMING: .mNw-footer paints its own ink background, so it also
   redeclares the dark token block. Without this the descendants below
   would resolve :root's LIGHT --mNw-text-2 (rgba(20,20,20,.72)) and
   render dark-on-ink — a `var(--mNw-text-2, <dark fallback>)` cannot
   save them, because the token IS defined at :root and the fallback
   never fires. Adding .mNw-theme--dark as well is harmless (same values).
   --------------------------------------------------------- */
.mNw-footer{
  background: var(--ink, #141414);
  color: var(--paper, #f4f1ea);

  --mNw-surface-1: var(--ink, #141414);
  --mNw-surface-2: var(--ink-2, #1d1d1d);
  --mNw-text-1: var(--paper, #f4f1ea);
  --mNw-text-2: rgba(244,241,234,.72);
  --mNw-border: rgba(255,255,255,.14);
  --mNw-focus: rgba(255,255,255,.50);
}

.mNw-footer__grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--mNw-space-6, 2rem);
}

@media (max-width: 999px){
  .mNw-footer__grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 599px){
  .mNw-footer__grid{ grid-template-columns: 1fr; }
}

.mNw-footer__col{
  display: flex;
  flex-direction: column;
  gap: var(--mNw-space-3, 0.75rem);
}

.mNw-footer__col a{
  color: var(--mNw-text-2, rgba(244,241,234,.72));
  text-decoration: none;
  transition: color var(--mNw-dur-fast, 180ms) var(--mNw-ease-out, cubic-bezier(.2,.8,.2,1));
}

.mNw-footer__col a:hover{
  color: var(--paper, #f4f1ea);
}

.mNw-footer__col a:focus-visible{
  outline: 2px solid var(--mNw-focus, rgba(255,255,255,.50));
  outline-offset: 3px;
}

/* Brand lockup — DS: .foot-brand */
.mNw-footer__brand{
  font-family: var(--mNw-font-display, var(--disp, system-ui));
  font-size: var(--mNw-h-s, clamp(1.375rem, 1.20rem + 0.90vw, 1.875rem));
  line-height: var(--mNw-lh-tight, 1.1);
  text-transform: uppercase;
}

/* Social row — DS: .social */
.mNw-footer__social{
  display: flex;
  flex-wrap: wrap;
  gap: var(--mNw-space-3, 0.75rem);
}

/* Bottom bar — DS: .foot-bottom */
.mNw-footer__bottom{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--mNw-space-3, 0.75rem);
  margin-block-start: var(--mNw-space-6, 2rem);
  padding-block-start: var(--mNw-space-4, 1rem);
  border-top: 1px solid rgba(255,255,255,.14);
  font-family: var(--mNw-font-mono, var(--mono, monospace));
  font-size: var(--mNw-text-xs, 0.75rem);
  color: var(--mNw-text-2, rgba(244,241,234,.72));
}

/* ---------------------------------------------------------
   Button variants completing the DS set.
   Shipped already: --primary (DS .btn-pink), --secondary
   (DS .btn-ink), --ghost (DS .btn-ghost-pink).
   Added here:      --white (DS .btn-white), --outline (DS .btn-outline).
   --------------------------------------------------------- */

/* WHITE — DS: .btn-white, sobre pink/ink. Hover = DS "Fill swap". */
.mNw-btn--white .elementor-button{
  background: var(--white, #ffffff);
  color: var(--ink, #141414);
  border: 1px solid transparent;
  box-shadow: var(--mNw-shadow-s, 0 6px 18px rgba(0,0,0,.08));
}

.mNw-btn--white .elementor-button:hover{
  background: var(--pink, #ee3b7b);
  color: var(--white, #ffffff);
  box-shadow: var(--mNw-shadow-m, 0 12px 30px rgba(0,0,0,.10));
}

/* OUTLINE — DS: .btn-outline, secundaria. Hover = DS "Border reveal". */
.mNw-btn--outline .elementor-button{
  background: transparent;
  color: var(--mNw-text-1, var(--ink, #141414));
  border: 1px solid color-mix(in srgb, var(--mNw-text-1, #141414) 45%, transparent);
  box-shadow: none;
}

.mNw-btn--outline .elementor-button:hover{
  border-color: var(--mNw-text-1, var(--ink, #141414));
  background: color-mix(in srgb, var(--mNw-text-1, #141414) 8%, transparent);
}

/* Reduced motion — the DS entrance/loop motion is decorative.
   The marquee must STOP, not merely skip a transition. */
@media (prefers-reduced-motion: reduce){
  .mNw-marquee__track{
    animation: none !important;
    transform: none !important;
  }
  .mNw-country-tab,
  .mNw-footer__col a,
  .mNw-btn--white .elementor-button,
  .mNw-btn--outline .elementor-button{
    transition: none !important;
  }
}

/* =========================================================
   ATOMIC PATH (Elementor v4) — SPECIFICITY BRIDGE
   =========================================================
   WHY THIS BLOCK EXISTS. Everything above is written as bare
   `.mNw-x` (0,1,0), which is correct for the v3 widget path and for
   shortcode-rendered markup. It is NOT enough on the v4 ATOMIC path:

     1. Elementor's atomic base sheet declares `.elementor .e-div-block-base`
        and `.elementor .e-button-base` at (0,2,0) — strictly higher than
        (0,1,0) — hard-setting display, position, border-radius, min-height
        and the button's background/radius (that Elementor blue).
     2. global.css is enqueued EARLY (before frontend.min.css and
        base-desktop.css), so even at equal specificity it would lose on
        source order. Raising specificity is therefore the only fix that
        does not depend on enqueue order.
     3. An atomic button renders `<a class="… e-button-base">` — there is no
        `.elementor-button` descendant, so the `.mNw-btn--*` rules above
        cannot match it at all.

   The doubled class (`.mNw-x.mNw-x`) buys (0,3,0), which beats Elementor's
   base regardless of load order. Only the properties Elementor actually
   overrides are restated here — this is a bridge, not a second design system.
   Verified against Elementor 4.2.3 / base-desktop.css.
   ========================================================= */

/* ---------- Layout primitives Elementor's base flattens to `display:block` ---------- */
.elementor .mNw-actions.mNw-actions,
.elementor .mNw-country-tabs.mNw-country-tabs,
.elementor .mNw-stats.mNw-stats,
.elementor .mNw-footer__social.mNw-footer__social{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.elementor .mNw-stat.mNw-stat,
.elementor .mNw-footer__col.mNw-footer__col{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.elementor .mNw-marquee__track.mNw-marquee__track{
  display: flex;
  flex-wrap: nowrap;
  inline-size: max-content;
  align-items: center;
  /* Both of these are loop correctness, not cosmetics — an Elementor container
     ships 10px of padding and a 20px gap by default, and either one desyncs the
     -100%/N translate from the repeat width. See the invariant up top. */
  gap: 0;
  padding: 0;
}

.elementor .mNw-franq.mNw-franq{
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
}

.elementor .mNw-footer__grid.mNw-footer__grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 999px){
  .elementor .mNw-franq.mNw-franq{ grid-template-columns: 1fr; }
  .elementor .mNw-footer__grid.mNw-footer__grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 599px){
  .elementor .mNw-footer__grid.mNw-footer__grid{ grid-template-columns: 1fr; }
}

@media (max-width: 640px){
  .elementor .mNw-actions.mNw-actions{
    flex-direction: column;
    align-items: stretch;
  }
}

/* ---------- Hero panel: stacking context + the layers Elementor re-positions ---------- */
.elementor .mNw-hero-panel.mNw-hero-panel{
  display: grid;
  align-items: end;
  position: relative;
  overflow: hidden;
  border-radius: var(--mNw-radius-l, 1.875rem);
  min-block-size: min(88vh, 50rem);
  background: var(--ink, #141414);
  padding: 0;
}

.elementor .mNw-hero-panel__media.mNw-hero-panel__media,
.elementor .mNw-hero-panel__scrim.mNw-hero-panel__scrim{
  position: absolute;
  inset: 0;
  padding: 0;
  min-block-size: 0;
}

.elementor .mNw-hero-panel__media.mNw-hero-panel__media{ z-index: 0; }
.elementor .mNw-hero-panel__scrim.mNw-hero-panel__scrim{ z-index: 1; }

.elementor .mNw-hero-panel__content.mNw-hero-panel__content{
  position: relative;
  z-index: 2;
  align-self: end;
}

@media (max-width: 767px){
  .elementor .mNw-hero-panel.mNw-hero-panel{
    border-radius: 0;
    min-block-size: min(80vh, 34rem);
  }
}

/* ---------- Marquee + slot: overflow/radius Elementor's base resets ---------- */
.elementor .mNw-marquee.mNw-marquee{
  overflow: hidden;
  padding: 0;
}

/* Marquee, icon-list copy path (shape B). Elementor's widget-icon-list sheet
   pairs `.elementor-inline-items{margin-inline:-Gpx}` with `margin-inline:G/2`
   on every item: the negative list margin cancels EXACTLY the trailing space of
   the last item, so the seam pair touches while every other pair is spaced.
   Zeroing the list margin restores a uniform gap and leaves the value where the
   operator can still reach it — the widget's own Space Between control.

   Specificity: the icon-list sheet declares at (0,3,0) and the container base's
   `max-width:100%` at (0,4,0), and global.css is enqueued BEFORE both, so equal
   specificity would lose on source order. The doubled viewport class buys the
   (0,5,0) these need. No !important — see the block header. */
.elementor .mNw-marquee .elementor-icon-list-items.elementor-inline-items{
  flex-wrap: nowrap;
  margin-inline: 0;
}

.elementor .mNw-marquee.mNw-marquee .mNw-marquee__track > .elementor-widget-icon-list,
.elementor .mNw-marquee.mNw-marquee .mNw-marquee__track > .elementor-widget-icon-list > .elementor-widget-container{
  inline-size: max-content;
  max-inline-size: none;
}

.elementor .mNw-marquee .elementor-icon-list-item{
  white-space: nowrap;
}

/* The per-item trailing space, restated for the atomic path. `.mNw-marquee__track
   > *` is (0,1,0) and loses to `.elementor .e-paragraph-base`'s margin reset at
   (0,2,0) — measured: the four atomic <p> items took 0px while the four v3 icon
   widgets took 32px. The loop still closed (the pattern repeated evenly), which
   is exactly how this hides: the seam assertion passes while the rhythm is
   visibly wrong every other element. */
.elementor .mNw-marquee.mNw-marquee .mNw-marquee__track > *{
  margin-inline-end: var(--mNw-marquee-gap, 2rem);
}

.elementor .mNw-marquee.mNw-marquee .mNw-marquee__track > .elementor-widget-icon-list{
  margin-inline-end: 0;
}

/* Shape C — nav-menu COPIES (Elementor Pro widget-nav-menu).
     div.mNw-marquee > div.mNw-marquee__track > .elementor-widget-nav-menu ×N

   Three things differ from the icon-list shape, and all three were live on /
   when this was written. Measured at a 1709px viewport, before → after:
   track 1709 → 3324.31 (it was clamped, never max-content), copies 822.5 →
   1662.16, link gaps -710.02…402.33 → 43.19…43.19.

     1. `ul.elementor-nav-menu` ships `flex-wrap: wrap` (widget-nav-menu.css).
        A wrapping list has a SMALL min-content width, so `min-width:auto` stops
        protecting the chain and every ancestor flex item is free to shrink —
        the track collapsed to the viewport and each copy rendered on two lines.
        Fixing the wrap ALONE is not enough: retested in isolation, the track
        stayed at 1709 and the copies overlapped by 764px. The max-content rules
        below are load-bearing, not belt-and-braces.
     2. `.elementor-element{flex-shrink:var(--flex-shrink)}` (frontend.min.css)
        is (0,1,0) — the SAME specificity as `.mNw-marquee__track > *{flex:0 0
        auto}` — and frontend.min.css is enqueued AFTER global.css, so the shrink
        guard lost on source order. This is the archived v4 rule ("v4 atomic
        containers SIZE children — flex-shrink resolves to 1",
        CHORE-LOCATIONS-MAP-ENQUEUE-001) reaching the marquee. The bridge must
        re-assert it on the TRACK as well as its children: the v4 wrapper is an
        e-flexbox, so the track is itself a flex item and shrank too.
     3. Elementor spaces horizontal items with `:not(:first-child)` /
        `:not(:last-child)` margins, so the pair straddling the copy boundary
        carries NO margin at all — invariant 3 in its purest form. Giving every
        item BOTH margins makes the seam pair identical to every other pair AND
        keeps the gap coupled to the widget's own "Space Between" control
        (Elementor halves it into --e-nav-menu-horizontal-menu-item-margin), so
        an operator retuning spacing in the panel cannot desync the seam. A
        fixed --mNw-marquee-gap here would have been a magic number that matches
        only until someone edits the widget. */
.elementor .mNw-marquee.mNw-marquee .mNw-marquee__track,
.elementor .mNw-marquee.mNw-marquee .mNw-marquee__track > *{
  flex: 0 0 auto;
}

.elementor .mNw-marquee.mNw-marquee .mNw-marquee__track > .elementor-widget-nav-menu,
.elementor .mNw-marquee.mNw-marquee .mNw-marquee__track > .elementor-widget-nav-menu > .elementor-widget-container,
.elementor .mNw-marquee .elementor-nav-menu--main.elementor-nav-menu__container{
  inline-size: max-content;
  max-inline-size: none;
}

.elementor .mNw-marquee .elementor-nav-menu--layout-horizontal .elementor-nav-menu{
  flex-wrap: nowrap;
}

/* The copy's own trailing margin would land only at the seam — dropped, exactly
   as for the icon-list shape. The ITEM margin, uniform and last-one-included,
   is the gap in this shape. */
.elementor .mNw-marquee.mNw-marquee .mNw-marquee__track > .elementor-widget-nav-menu{
  margin-inline-end: 0;
}

.elementor .mNw-marquee .elementor-nav-menu--layout-horizontal .elementor-nav-menu > li > a{
  margin-inline: var(--e-nav-menu-horizontal-menu-item-margin);
}

.elementor .mNw-slot--4x5.mNw-slot--4x5{
  overflow: hidden;
  border-radius: var(--mNw-radius-m, 1.375rem);
  padding: 0;
}

/* ---------- Buttons on the atomic path ----------
   `.e-button-base` paints Elementor blue at (0,2,0) and there is no
   `.elementor-button` descendant to hook, so each DS variant is restated
   on the element itself. Mirrors the v3 rules above value-for-value. */
.elementor .mNw-btn.mNw-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--mNw-btn-gap);
  border-radius: var(--mNw-btn-radius);
  padding: var(--mNw-btn-pad-y) var(--mNw-btn-pad-x);
  line-height: var(--mNw-btn-lh);
  font-weight: var(--mNw-btn-weight);
  text-decoration: none;
  cursor: pointer;
}

.elementor .mNw-btn--primary.mNw-btn--primary{
  background-color: var(--pink, #ee3b7b);
  color: var(--white, #ffffff);
  border: 1px solid transparent;
}

.elementor .mNw-btn--secondary.mNw-btn--secondary{
  background-color: var(--mNw-surface-1);
  color: var(--mNw-text-1);
  border: 1px solid var(--mNw-border);
}

.elementor .mNw-btn--ghost.mNw-btn--ghost{
  background-color: transparent;
  color: var(--mNw-text-1);
  border: 1px solid transparent;
}

.elementor .mNw-btn--white.mNw-btn--white{
  background-color: var(--white, #ffffff);
  color: var(--pink, #ee3b7b);
  border: 1px solid transparent;
}

.elementor .mNw-btn--white.mNw-btn--white:hover{
  box-shadow: 0 8px 22px rgba(0,0,0,.18);
}

.elementor .mNw-btn--ink.mNw-btn--ink{
  background-color: var(--ink, #141414);
  color: var(--white, #ffffff);
  border: 1px solid transparent;
}

.elementor .mNw-btn--ink.mNw-btn--ink:hover{
  background-color: #000;
  box-shadow: 0 8px 22px rgba(0,0,0,.25);
}

.elementor .mNw-btn--outline.mNw-btn--outline{
  background-color: transparent;
  color: var(--mNw-text-1, var(--ink, #141414));
  border: 1px solid color-mix(in srgb, var(--mNw-text-1, #141414) 45%, transparent);
}

.elementor .mNw-btn--outline.mNw-btn--outline:hover{
  border-color: var(--mNw-text-1, var(--ink, #141414));
  background-color: color-mix(in srgb, var(--mNw-text-1, #141414) 8%, transparent);
}

.elementor .mNw-btn--sm.mNw-btn--sm{
  --mNw-btn-pad-y: 0.65em;
  --mNw-btn-pad-x: 0.95em;
}

.elementor .mNw-btn--lg.mNw-btn--lg{
  --mNw-btn-pad-y: 1.05em;
  --mNw-btn-pad-x: 1.45em;
}

/* ---------- Country tabs are atomic buttons too ---------- */
.elementor .mNw-country-tab.mNw-country-tab,
.elementor .mNw-tab.mNw-tab{
  display: inline-flex;
  align-items: center;
  background-color: transparent;
  color: var(--mNw-text-2, rgba(20,20,20,.72));
  border: 1px solid var(--mNw-border, rgba(0,0,0,.12));
  border-radius: var(--mNw-radius-pill, 6.25rem);
  padding: 0.55em 1.1em;
  text-decoration: none;
}

.elementor .mNw-country-tab.mNw-country-tab:hover,
.elementor .mNw-tab.mNw-tab:hover{
  color: var(--mNw-text-1, var(--ink, #141414));
  border-color: var(--pink, #ee3b7b);
}

.elementor .mNw-country-tab.is-active,
.elementor .mNw-country-tab[aria-current],
.elementor .mNw-tab.is-active,
.elementor .mNw-tab[aria-current]{
  background-color: var(--pink, #ee3b7b);
  border-color: transparent;
  color: var(--white, #ffffff);
}

/* =========================================================
   FIGMA LANDING — NS-2026 node 171:1170 "LANDING"
   Source: figma.com/design/vyyyDGgcVVOc2i2p7O8CPI · 1440×1024 comp.

   This is the polished 2026 rebrand hero and it SUPERSEDES the DS-doc
   hero above (.mNw-hero-panel) for the country landing page. Both are
   kept: .mNw-hero-panel stays the generic DS panel, .mNw-landing is the
   comp-accurate landing.

   Comp values are quoted against the 1440 frame and made fluid with
   clamp() where they would otherwise break below ~1200px.

   LEADING: the comp's lead carries Figma's leading-[0.905]. At 18px that is a
   16px line box, so a 2-line wrap sits very tight. Shipped comp-exact by
   operator decision (2026-08-29); raise to ~1.3 if it ever needs to hold more
   than two lines.
   ========================================================= */

.mNw-landing{
  background: var(--orange, #ff7300);
  padding: var(--mNw-landing-pad, 1rem);   /* comp: 16px gutter around the panel */
}

.mNw-landing__panel{
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  align-items: end;
  border-radius: var(--r-panel, 1.875rem); /* comp: 30px */
  min-block-size: min(92vh, 63rem);
  background: var(--ink, #141414);
}

.mNw-landing__media{
  position: absolute;
  inset: 0;
  z-index: 0;
}

.mNw-landing__media img{
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/* Comp has a 976×596 ellipse, black @75%, 90px gaussian blur, centred at
   50% / 92% of the frame. A radial-gradient reproduces it without shipping
   an SVG + filter, and scales with the panel. */
.mNw-landing__vignette{
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(
    ellipse 34% 29% at 50% 92%,
    rgba(0,0,0,.75) 0%,
    rgba(0,0,0,.55) 45%,
    rgba(0,0,0,0)   78%
  );
}

.mNw-landing__content{
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--mNw-space-4, 1rem);
  text-align: center;
  padding: clamp(1.5rem, 4vw, 3.5rem);
  padding-block-end: clamp(2.5rem, 8vh, 6rem);
}

/* Champ Black, comp 56px, leading .905, uppercase, drop shadow. */
.mNw-landing__title{
  margin: 0;
  font-family: var(--mNw-font-display, var(--disp, system-ui));
  font-weight: 900;
  font-size: clamp(2rem, 1.15rem + 3.9vw, 3.5rem);
  line-height: .905;
  text-transform: uppercase;
  color: var(--white, #ffffff);
  text-shadow: 0 4px 4px rgba(0,0,0,.5);
  text-wrap: balance;
}

/* Comp splits the headline: "SABORES " white, "DE UNA NACIÓN" pink. */
.mNw-landing__title .mNw-accent,
.mNw-landing__title-accent{
  color: var(--pink, #ee3b7b);
}

.mNw-landing__lead{
  margin: 0;
  max-inline-size: 31.5625rem;   /* comp: 505px */
  font-family: var(--mNw-font-serif, var(--serif, Georgia, serif));
  font-weight: 700;
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  line-height: .905;             /* comp-exact — operator chose fidelity over the 1.3 legibility default */
  color: var(--white, #ffffff);
}

@media (max-width: 767px){
  .mNw-landing{ padding: 0; }
  .mNw-landing__panel{
    border-radius: 0;
    min-block-size: min(88vh, 40rem);
  }
}

/* ---------------------------------------------------------
   Comp button variants — rectangular, unlike the DS pills.
   The 2026 comp uses 8px (hero) / 5px (nav) radii and a
   pink-on-white / white-on-pink pair. Kept as explicit
   variants so the DS pill buttons above are untouched.
   --------------------------------------------------------- */
/* `--mNw-btn--rect` no longer needs to override the radius: the BASE button is
   rectangular at --r-btn (0.5rem), which is the value this modifier was setting.
   Two names for one corner is exactly the duplication this pass removes. The
   class itself stays — it is applied on 31 live elements and carries a kit
   font-size variant — it simply no longer restates the radius. */

.mNw-btn--paper .elementor-button{
  background: var(--white, #ffffff);
  color: var(--pink, #ee3b7b);
  border: 2px solid var(--pink, #ee3b7b);
}

.mNw-btn--paper .elementor-button:hover{
  background: var(--pink, #ee3b7b);
  color: var(--white, #ffffff);
}

.mNw-btn--brand .elementor-button{
  background: var(--pink, #ee3b7b);
  color: var(--white, #ffffff);
  border: 1px solid var(--white, #ffffff);
}

.mNw-btn--brand .elementor-button:hover{
  background: var(--pink-d, #d42a68);
}

/* =========================================================
   FIGMA NAVBAR — node 171:1209 "NAVBAR"
   Built as an Elementor Theme Builder HEADER template so all ten
   country sites inherit it. Comp: a 1342×100 pink pill inset 49px
   from a 1440 frame, 25px radius, 0 4px 4px rgba(0,0,0,.25).
   ========================================================= */

/* `.mNw-nav` was defined twice — here with the 100px comp's 39px top padding,
   and again ~470 lines below with the 76px pill's sticky + 16px. The later one
   wins on `padding`; only `background: transparent` survived from this copy, so
   it is carried down there and this definition is retired.

   SEMANTIC NOTE, because the name is doing two jobs. `.mNw-nav` no longer marks
   a page-level navbar WRAPPER: `mNw-nav__bar`, `__logo`, `__cta*`, `__wordmark`,
   `__toggle` and `__actions` render ZERO times on /pa/, /pa/menu/ and the root.
   What actually carries `mNw-nav` today is the WP nav-menu widget inside the
   header, via `_css_classes = "mNw-nav mNw-nav__links mono"` — two occurrences
   per page. The rules below therefore land on a menu, not on a navbar. They are
   left as-is because that is the approved render; changing them is a design
   decision, not a cleanup. */

.mNw-nav__bar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mNw-space-5, 1.5rem);
  inline-size: 100%;
  max-inline-size: 83.875rem;                    /* comp: 1342px */
  margin-inline: auto;
  min-block-size: 6.25rem;                       /* comp: 100px */
  padding-inline: clamp(1rem, 2.6vw, 2.3125rem); /* comp: 37px */
  border-radius: 1.5625rem;                      /* comp: 25px */
  background: var(--pink, #ee3b7b);
  box-shadow: 0 4px 4px rgba(0,0,0,.25);
}

.mNw-nav__logo{
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}

.mNw-nav__logo img,
.mNw-nav__logo svg{
  display: block;
  block-size: clamp(2.25rem, 1.6rem + 2.9vw, 4.1181rem);  /* comp: 65.89px */
  inline-size: auto;
}

.mNw-nav__links{
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 2rem);
  flex-wrap: wrap;
  justify-content: flex-end;
}

.mNw-nav__link{
  font-family: var(--mNw-font-mono, var(--mono, monospace));
  font-weight: 700;
  font-size: 0.9375rem;          /* comp: 15px */
  letter-spacing: -0.05em;       /* comp: -0.75px */
  color: var(--white, #ffffff);
  text-decoration: none;
  white-space: nowrap;
  transition: opacity var(--mNw-dur-fast, 180ms) var(--mNw-ease-out, cubic-bezier(.2,.8,.2,1));
}

.mNw-nav__link:hover{ opacity: .72; }

.mNw-nav__link:focus-visible{
  outline: 2px solid var(--white, #ffffff);
  outline-offset: 3px;
}

/* Nav CTAs — comp radius 5px, 14px Roboto Mono Bold. */
.mNw-nav__cta{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.4rem 0.9rem;
  border-radius: 0.3125rem;      /* comp: 5px */
  font-family: var(--mNw-font-mono, var(--mono, monospace));
  font-weight: 700;
  font-size: 0.875rem;           /* comp: 14px */
  text-decoration: none;
  white-space: nowrap;
  transition:
    background var(--mNw-dur-fast, 180ms) var(--mNw-ease-out, cubic-bezier(.2,.8,.2,1)),
    color var(--mNw-dur-fast, 180ms) var(--mNw-ease-out, cubic-bezier(.2,.8,.2,1));
}

.mNw-nav__cta--reserva{
  background: var(--white, #ffffff);
  color: var(--pink, #ee3b7b);
  border: 2px solid var(--ink, #141414);   /* comp: 2px black */
}

.mNw-nav__cta--reserva:hover{
  background: var(--ink, #141414);
  color: var(--white, #ffffff);
}

.mNw-nav__cta--pedidos{
  background: var(--pink, #ee3b7b);
  color: var(--white, #ffffff);
  border: 1px solid var(--white, #ffffff);
}

.mNw-nav__cta--pedidos:hover{
  background: var(--pink-d, #d42a68);
}

.mNw-nav__cta:focus-visible,
.mNw-nav__link:focus-visible{
  outline: 2px solid var(--white, #ffffff);
  outline-offset: 3px;
}

@media (max-width: 900px){
  .mNw-nav{ padding-top: 1rem; }
  .mNw-nav__bar{
    flex-wrap: wrap;
    justify-content: center;
    min-block-size: 0;
    padding-block: 1rem;
    border-radius: var(--r-card, 1.375rem);
  }
  .mNw-nav__links{ justify-content: center; }
}

@media (prefers-reduced-motion: reduce){
  .mNw-nav__link,
  .mNw-nav__cta{ transition: none !important; }
}

/* ---------------------------------------------------------
   ATOMIC BRIDGE — Figma landing + navbar
   Same rationale as the bridge block above: Elementor's
   `.elementor .e-div-block-base` / `.e-button-base` (0,2,0) beat a bare
   class, and global.css loads first. Doubled class = (0,3,0).
   --------------------------------------------------------- */
.elementor .mNw-landing.mNw-landing{
  background: var(--orange, #ff7300);
  padding: var(--mNw-landing-pad, 1rem);
}

.elementor .mNw-landing__panel.mNw-landing__panel{
  display: grid;
  align-items: end;
  position: relative;
  overflow: hidden;
  border-radius: var(--r-panel, 1.875rem);
  min-block-size: min(92vh, 63rem);
  background: var(--ink, #141414);
  padding: 0;
}

.elementor .mNw-landing__media.mNw-landing__media,
.elementor .mNw-landing__vignette.mNw-landing__vignette{
  position: absolute;
  inset: 0;
  padding: 0;
  min-block-size: 0;
}

.elementor .mNw-landing__media.mNw-landing__media{ z-index: 0; }
.elementor .mNw-landing__vignette.mNw-landing__vignette{ z-index: 1; }

.elementor .mNw-landing__content.mNw-landing__content{
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 2;
  align-self: end;
}

@media (max-width: 767px){
  .elementor .mNw-landing.mNw-landing{ padding: 0; }
  .elementor .mNw-landing__panel.mNw-landing__panel{
    border-radius: 0;
    min-block-size: min(88vh, 40rem);
  }
}

.elementor .mNw-nav__bar.mNw-nav__bar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-block-size: 6.25rem;
  border-radius: 1.5625rem;
  background: var(--pink, #ee3b7b);
}

.elementor .mNw-nav__links.mNw-nav__links{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.elementor .mNw-nav__logo.mNw-nav__logo{
  display: inline-flex;
  align-items: center;
  padding: 0;
}

/* Comp buttons on the atomic path (no `.elementor-button` descendant). */

.elementor .mNw-btn--paper.mNw-btn--paper{
  background-color: var(--white, #ffffff);
  color: var(--pink, #ee3b7b);
  border: 2px solid var(--pink, #ee3b7b);
}

.elementor .mNw-btn--paper.mNw-btn--paper:hover{
  background-color: var(--pink, #ee3b7b);
  color: var(--white, #ffffff);
}

.elementor .mNw-btn--brand.mNw-btn--brand{
  background-color: var(--pink, #ee3b7b);
  color: var(--white, #ffffff);
  border: 1px solid var(--white, #ffffff);
}

.elementor .mNw-btn--brand.mNw-btn--brand:hover{
  background-color: var(--pink-d, #d42a68);
}

.elementor .mNw-nav__cta.mNw-nav__cta{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.3125rem;
  padding: 0.4rem 0.9rem;
  text-decoration: none;
}

.elementor .mNw-nav__cta--reserva.mNw-nav__cta--reserva{
  background-color: var(--white, #ffffff);
  color: var(--pink, #ee3b7b);
  border: 2px solid var(--ink, #141414);
}

.elementor .mNw-nav__cta--pedidos.mNw-nav__cta--pedidos{
  background-color: var(--pink, #ee3b7b);
  color: var(--white, #ffffff);
  border: 1px solid var(--white, #ffffff);
}

/* =========================================================
   HOME MATRIZ SECTIONS — Figma node 14:257
   The frame is a greyscale WIREFRAME (lorem ipsum, #5e5e5e text), so it
   supplies STRUCTURE only. Visual treatment comes from the DS tokens and
   the classes above — that is a deliberate reading of the wireframe, not
   a colour match to it.

   Carousels: the wireframe shows dot-paged carousels. These are built as
   scroll-snap rails — no JS, keyboard/touch native, and they degrade to a
   plain row. Swap for a real slider later if paging dots are required.
   ========================================================= */

/* Horizontal card rail — replaces the wireframe's carousels. */
.mNw-rail{
  display: flex;
  gap: var(--mNw-space-5, 1.5rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-block-end: var(--mNw-space-3, 0.75rem);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.mNw-rail > *{
  flex: 0 0 auto;
  scroll-snap-align: start;
  inline-size: min(20rem, 78vw);
}

/* Generic pill tab. `.mNw-country-tab` is the same control with a
   domain-specific name — both are served by the country-tab rules above. */
.mNw-tabs{
  display: flex;
  flex-wrap: wrap;
  gap: var(--mNw-space-2, 0.5rem);
}

/* Testimonials — wireframe "newsletter" frame (14:305). */
.mNw-quotes{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--mNw-space-6, 2rem);
}

@media (max-width: 899px){
  .mNw-quotes{ grid-template-columns: 1fr; }
}

.mNw-quote{
  display: flex;
  flex-direction: column;
  gap: var(--mNw-space-2, 0.5rem);
}

.mNw-quote__author{
  font-family: var(--mNw-font-sans, var(--sans, system-ui));
  font-weight: 700;
  font-size: var(--mNw-text-s, 0.875rem);
  color: var(--mNw-text-1, var(--ink, #141414));
}

.mNw-quote__text{
  font-family: var(--mNw-font-serif, var(--serif, Georgia, serif));
  font-style: italic;
  font-size: var(--mNw-text-s, 0.875rem);
  line-height: var(--mNw-lh-body, 1.6);
  color: var(--mNw-text-2, rgba(20,20,20,.72));
}

.mNw-quote__stars{
  font-size: var(--mNw-text-m, 1rem);
  letter-spacing: .1em;
  color: var(--orange, #ff7300);
}

/* ---------- Atomic bridge for the section primitives ---------- */
.elementor .mNw-rail.mNw-rail{
  display: flex;
  overflow-x: auto;
  padding-block-end: var(--mNw-space-3, 0.75rem);
}

/* Rail items must NOT shrink, or the rail can never overflow and the carousel
   silently degrades to a squashed row. `.elementor-element` declares
   flex-shrink: var(--flex-shrink) in frontend.min.css — same (0,1,0) specificity
   as `.mNw-rail > *` but loaded later, and the unset variable resolves to the
   initial 1. Bridged at (0,3,0). */
.elementor .mNw-rail.mNw-rail > *{
  flex: 0 0 auto;
  inline-size: min(20rem, 78vw);
  scroll-snap-align: start;
}

.elementor .mNw-tabs.mNw-tabs{
  display: flex;
  flex-wrap: wrap;
}

.elementor .mNw-quotes.mNw-quotes{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 899px){
  .elementor .mNw-quotes.mNw-quotes{ grid-template-columns: 1fr; }
}

.elementor .mNw-quote.mNw-quote{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Nav box-model corrections on the atomic path.
   `.e-div-block-base` applies 10px padding to every Div Block and
   `.e-button-base` applies 12px/24px to every Button — together they pushed
   the comp's 100px bar to 153px. Reset explicitly at (0,3,0). */
/* This bridge still asserted the RETIRED 100px comp's 39px top padding, at
   (0,3,0), against a bare rule that had been superseded to 16px 470 lines
   later — so on the atomic path the supersede did not supersede. It is inert in
   practice (the live element computes padding-top: 0px, Elementor's own widget
   CSS winning over both), but an inert rule asserting a dead value is exactly
   what makes the next reader trust the wrong number. Aligned with the surviving
   bare rule. `--mNw-nav-pad-y` / `--mNw-nav-pad-x` were never declared anywhere
   in the repo, so they only ever resolved to their fallbacks. */
.elementor .mNw-nav.mNw-nav{
  padding: var(--pad, 1rem) var(--pad, 1rem) 0;
  background: transparent;
}

.elementor .mNw-nav__bar.mNw-nav__bar{
  padding-block: var(--mNw-nav-bar-pad-y, 0.875rem);  /* 14px: keeps the lockup off the pill edges */
  padding-inline: clamp(1rem, 2.6vw, 2.3125rem);
  gap: var(--mNw-space-5, 1.5rem);
}

.elementor .mNw-nav__links.mNw-nav__links{
  padding: 0;
  gap: clamp(0.75rem, 2vw, 2rem);
  flex-wrap: nowrap;
}

.elementor .mNw-nav__link.mNw-nav__link{
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--white, #ffffff);
  font-family: var(--mNw-font-mono, var(--mono, monospace));
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: -0.05em;
  line-height: 1;
  white-space: nowrap;
}

@media (max-width: 900px){
  .elementor .mNw-nav.mNw-nav{ padding-top: 1rem; }
  .elementor .mNw-nav__bar.mNw-nav__bar{
    flex-wrap: wrap;
    justify-content: center;
    min-block-size: 0;
    padding-block: 1rem;
    border-radius: var(--r-card, 1.375rem);
  }
  .elementor .mNw-nav__links.mNw-nav__links{
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* ---------------------------------------------------------
   Rail pagination — the wireframe's dot-paged carousels.
   Dots are injected by ns-motion.js; the rail itself stays a native
   scroll-snap container, so it keeps working with JS disabled and the
   dots are progressive enhancement rather than the mechanism.
   --------------------------------------------------------- */
.mNw-rail-dots{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--mNw-space-2, 0.5rem);
  margin-block-start: var(--mNw-space-4, 1rem);
  padding: 0;
}

.mNw-rail-dots__dot{
  inline-size: 0.5rem;
  block-size: 0.5rem;
  padding: 0;
  border: 0;
  border-radius: var(--mNw-radius-pill, 6.25rem);
  background: color-mix(in srgb, var(--mNw-text-1, #141414) 28%, transparent);
  cursor: pointer;
  transition: background 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));
}

.mNw-rail-dots__dot:hover{
  background: color-mix(in srgb, var(--mNw-text-1, #141414) 52%, transparent);
}

.mNw-rail-dots__dot[aria-current="true"]{
  background: var(--pink, #ee3b7b);
  transform: scale(1.35);
}

.mNw-rail-dots__dot:focus-visible{
  outline: 2px solid var(--mNw-focus, rgba(0,0,0,.45));
  outline-offset: 3px;
}

.elementor .mNw-rail-dots.mNw-rail-dots{
  display: flex;
  justify-content: center;
  align-items: center;
}

@media (prefers-reduced-motion: reduce){
  .mNw-rail-dots__dot{ transition: none !important; }
}

/* =========================================================
   KIT v0.6.0 — Menu + Landing redesign
   Source of truth: Claude Design project a5f924ac,
   "NacionSushi Menu.html" / "NacionSushi Landing.html" / ns-styles.css.

   The comp moved off the old Figma navbar frame (1342x100 inset 49px)
   onto a 1440 shell with a 76px sticky pill inset 16px. Rules below that
   RESTATE an existing selector are deliberate overrides of that older
   comp and are ordered after it on purpose.

   Every layout-critical rule is mirrored in the ATOMIC BRIDGE block at the
   end: `.elementor .e-div-block-base` (0,2,0) beats a bare class (0,1,0),
   and global.css loads first, so a single class silently loses on v4.
   ========================================================= */

/* ---------------------------------------------------------
   Navbar — 76px sticky pill (supersedes the 100px comp above)
   --------------------------------------------------------- */
.mNw-nav{
  position: sticky;
  top: var(--pad, 1rem);
  z-index: 60;
  padding: var(--pad, 1rem) var(--pad, 1rem) 0;
  background: transparent;   /* merged from the retired duplicate above */
}

.mNw-nav__bar{
  gap: 1.125rem;                                 /* comp: 18px */
  max-inline-size: var(--maxw, 90rem);           /* comp: 1440px shell */
  margin-inline: auto;                           /* centre the pill in the shell */
  min-block-size: 4.75rem;                       /* comp: 76px */
  padding-inline: 1.625rem 1.125rem;             /* comp: 26px / 18px */
  /* padding-block lives on the atomic bridge only — declaring it here would
     land AFTER the <=900px block above and clobber its 1rem. */
  box-shadow: 0 6px 20px rgba(0,0,0,.18);
}

/* The 76px pill inherited the 100px comp's logo cap (65.89px), which left
   the lockup 5px of air top and bottom — it reads as clipped by the pill.
   48px + the bar's 14px padding-block sums to exactly the 76px pill. */
.mNw-nav__logo img,
.mNw-nav__logo svg{
  block-size: clamp(2.25rem, 1.55rem + 2vw, 3rem);   /* comp: 48px in a 76px pill */
}

.mNw-nav__links{
  margin-left: auto;
  gap: 1.875rem;                                 /* comp: 30px */
  flex-wrap: nowrap;
}

/* Underline-on-hover replaces the old opacity fade. */
.mNw-nav__link{
  font-weight: 500;
  letter-spacing: .01em;
  position: relative;
  padding-block: 0.25rem;
}
.mNw-nav__link::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  block-size: 2px;
  inline-size: 0;
  background: var(--white, #ffffff);
  transition: inline-size .2s ease;
}
.mNw-nav__link:hover{ opacity: 1; }
.mNw-nav__link:hover::after{ inline-size: 100%; }

.mNw-nav__actions{
  display: flex;
  align-items: center;
  gap: 0.625rem;                                 /* comp: 10px */
  margin-left: 0.375rem;
}

.mNw-nav__wordmark{
  font-family: var(--disp, "Archivo Black", sans-serif);
  font-size: 1.5625rem;                          /* comp: 25px */
  letter-spacing: -.03em;
  line-height: 1;
  color: var(--white, #ffffff);
}

.mNw-nav__toggle{ display: none; }

/* Pedidos Online moved pink -> ink in the new comp. */
.mNw-nav__cta--pedidos{
  background: var(--ink, #141414);
  color: var(--white, #ffffff);
  border: none;
}
.mNw-nav__cta--pedidos:hover{ background: #000; }

.mNw-nav__cta--reserva{ border: none; }

/* ---------------------------------------------------------
   Hero — floating badge row
   --------------------------------------------------------- */
.mNw-hero-panel__badges{
  position: absolute;
  top: 6.875rem;                                 /* comp: 110px */
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 0.625rem;
  flex-wrap: wrap;
  z-index: 2;
  padding-inline: 1.5rem;
}

/* ---------------------------------------------------------
   Nación en el mundo — dark panel with neon streak
   --------------------------------------------------------- */
.mNw-world{
  position: relative;
  overflow: hidden;
  background: var(--ink, #141414);
  color: var(--white, #ffffff);
  margin: var(--pad, 1rem);
  margin-top: 0;
  border-radius: var(--r-panel, 1.875rem);
  padding: 4rem 0 0;
}

.mNw-world::before{
  content: "";
  position: absolute;
  left: -10%;
  right: -10%;
  top: 46%;
  block-size: 3px;
  background: var(--pink, #ee3b7b);
  box-shadow: 0 0 60px 12px rgba(238,59,123,.7), 0 0 140px 40px rgba(238,59,123,.35);
  transform: rotate(-.6deg);
  opacity: .9;
  z-index: 1;
}

.mNw-world__head{
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1.5rem;
  flex-wrap: wrap;
  position: relative;
  z-index: 3;
}

/* Giant outlined country name behind the carousel. */
.mNw-ghost-stage{
  position: relative;
  margin-top: 1.625rem;
  z-index: 2;
}

.mNw-ghost-name{
  position: absolute;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%);
  font-family: var(--disp, "Archivo Black", sans-serif);
  font-size: clamp(7.5rem, 23vw, 22.5rem);
  line-height: .8;
  text-transform: uppercase;
  letter-spacing: -.03em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,.12);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  transition: opacity .25s ease;
}

/* ---------------------------------------------------------
   Carousel arrows (the comp uses arrows, not mNw-rail-dots)
   --------------------------------------------------------- */
.mNw-car-nav{
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
  margin-top: 0.25rem;
  padding-right: clamp(1.5rem, 6vw, 5rem);
  position: relative;
  z-index: 4;
}

.mNw-car-btn{
  inline-size: 3.25rem;
  block-size: 3.25rem;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  border: 1.5px solid rgba(255,255,255,.25);
  color: var(--white, #ffffff);
  display: grid;
  place-items: center;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}

.mNw-car-btn:hover{
  background: var(--pink, #ee3b7b);
  border-color: var(--pink, #ee3b7b);
  transform: scale(1.06);
}

.mNw-car-btn:focus-visible{
  outline: 2px solid var(--white, #ffffff);
  outline-offset: 3px;
}

/* ---------------------------------------------------------
   Location card — map pin + delivery-app cluster
   --------------------------------------------------------- */
.mNw-loc-card__pin{
  position: absolute;
  top: 0.875rem;
  right: 0.875rem;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  background: rgba(20,20,20,.55);
  backdrop-filter: blur(4px);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--white, #ffffff);
}

.mNw-delivery{
  display: flex;
  align-items: center;
  background: var(--white, #ffffff);
  border-radius: var(--r-pill, 6.25rem);
  padding: 0.375rem;
  inline-size: max-content;
}

.mNw-delivery__app{
  inline-size: 2.375rem;
  block-size: 2.375rem;
  border-radius: 50%;
  background: var(--pink, #ee3b7b);
  color: var(--white, #ffffff);
  display: grid;
  place-items: center;
  font-family: var(--mNw-font-mono, var(--mono, monospace));
  font-weight: 700;
  font-size: 0.6875rem;
  margin-left: -0.5rem;
  border: 2px solid var(--white, #ffffff);
}

.mNw-delivery__app:first-child{ margin-left: 0; }

/* ---------------------------------------------------------
   Franquicias — lime split panel
   --------------------------------------------------------- */
.mNw-franq__copy{ min-inline-size: 0; }

.mNw-franq__media{
  position: relative;
  border-radius: 1.5rem;
  background-color: #c2d126;
}

.mNw-franq__tag{
  position: absolute;
  bottom: -0.875rem;
  left: -0.875rem;
  background: var(--pink, #ee3b7b);
  color: var(--white, #ffffff);
  font-family: var(--mNw-font-mono, var(--mono, monospace));
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 0.75rem 1.125rem;
  border-radius: 0.75rem;
  box-shadow: 0 10px 24px rgba(0,0,0,.2);
}

/* ---------------------------------------------------------
   Footer — country strip, newsletter, brand lockup
   --------------------------------------------------------- */
.mNw-footer__countries{
  font-family: var(--mNw-font-mono, var(--mono, monospace));
  font-size: 0.9375rem;
  letter-spacing: .02em;
  color: rgba(255,255,255,.85);
  border-bottom: 1px solid rgba(255,255,255,.14);
  padding-bottom: 1.875rem;
  margin-bottom: 2.5rem;
}

.mNw-footer__countries span{
  color: var(--pink, #ee3b7b);
  margin-inline: 0.375rem;
}

.mNw-footer__news h4{ margin-bottom: 0.875rem; }

.mNw-footer__newsform{
  display: flex;
  gap: 0.625rem;
  max-inline-size: 26.25rem;
}

.mNw-footer__newsform input{
  flex: 1;
  font-family: var(--mNw-font-mono, var(--mono, monospace));
  font-size: 0.875rem;
  padding: 0.8125rem 1.125rem;
  border-radius: 0.625rem;
  border: none;
  background: #eeeeee;
  color: #222;
}

.mNw-footer__newsform input::placeholder{ color: #9a9a9a; }

.mNw-footer__lockup{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.375rem;
}

.mNw-footer__meta{
  font-family: var(--mNw-font-mono, var(--mono, monospace));
  font-size: 0.75rem;
  line-height: 1.7;
  color: rgba(255,255,255,.7);
}

.mNw-footer__meta strong{ color: var(--white, #ffffff); }

.mNw-footer__links{
  display: flex;
  gap: 2.125rem;
}

.mNw-footer__links a{
  font-family: var(--disp, "Archivo Black", sans-serif);
  font-size: 1.125rem;
}

/* =========================================================
   MENU PAGE
   ========================================================= */

.mNw-menu-glow{
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(70% 50% at 50% -8%, rgba(238,59,123,.55), transparent 60%),
    radial-gradient(50% 40% at 92% 30%, rgba(238,59,123,.22), transparent 60%),
    radial-gradient(55% 45% at 4% 60%, rgba(255,115,0,.14), transparent 60%);
}

.mNw-menu-hero{
  text-align: center;
  padding: 3.75rem 0 1.625rem;
  position: relative;
}

.mNw-menu-hero h1{
  font-family: var(--disp, "Archivo Black", sans-serif);
  font-size: clamp(4.5rem, 13vw, 12.5rem);
  line-height: .82;
  letter-spacing: -.03em;
  text-transform: uppercase;
  margin-top: -.12em;
  text-shadow: 0 10px 40px rgba(0,0,0,.5);
}

.mNw-menu-hero p{
  font-family: var(--mNw-font-mono, var(--mono, monospace));
  font-size: 0.875rem;
  color: rgba(255,255,255,.66);
  max-inline-size: 28.75rem;
  margin: 1.125rem auto 0;
  line-height: 1.6;
  letter-spacing: .02em;
}

/* Handwritten accent — used by the menu title, the chips and each
   section head. Colour comes from a --pink/--lime/--orange modifier. */
.mNw-script{
  font-family: var(--script, "Caveat", cursive);
  line-height: .8;
  transform: rotate(-4deg);
  display: inline-block;
}

.mNw-script--pink  { color: var(--pink, #ee3b7b); }
.mNw-script--lime  { color: var(--lime, #cddc28); }
.mNw-script--orange{ color: var(--orange, #ff7300); }

.mNw-menu-hero .mNw-script{ font-size: clamp(2.125rem, 4vw, 3.625rem); }

/* ---------------------------------------------------------
   Category nav — dark glass chip bar (supersedes mNw-menu-spy
   for the redesign; mNw-menu-spy stays for the shortcode path)
   --------------------------------------------------------- */
.mNw-cat-nav{
}

.mNw-cat-nav__inner{
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  padding: 0.875rem;
}

.mNw-cat-chip{
  position: relative;
  flex: 0 0 auto;
  padding: 0.75rem 1.25rem 0.625rem;
  border-radius: var(--r-pill, 6.25rem);
  border: 1.5px solid transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  white-space: nowrap;
  transition: border-color .18s ease, background .18s ease;
}

.mNw-cat-chip .mNw-script{
  font-size: 1.1875rem;
  margin-bottom: 2px;
  transform: rotate(-5deg);
}

.mNw-cat-chip__name{
  font-family: var(--disp, "Archivo Black", sans-serif);
  font-size: 0.9375rem;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: var(--white, #ffffff);
}

.mNw-cat-chip:hover{ background: rgba(255,255,255,.06); }

.mNw-cat-chip.is-active{
  border-color: var(--pink, #ee3b7b);
  background: var(--pink-d, #141414);
}

/* Hover image + overlay (FEAT-DESIGN-ADJUSTMENTS-VALERIA-001). Stacking only:
   the image, its size/position and the overlay colour come from the Dish
   Categories widget's Chip → Hover controls, and only when an image is set —
   the widget emits `content:""` for the overlay, so with no image the
   pseudo-element never exists and the chip's hover look is unchanged.
   isolation keeps the overlay's z-index inside the chip, above its own
   background (colour or image) and below the name. */
.mNw-cat-chip{ isolation: isolate; }

.mNw-cat-chip::before{
  content: none;
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
}

.mNw-cat-chip__name{
  position: relative;
  z-index: 1;
}

/* =========================================
   HORIZONTAL SCROLLBAR
   ========================================= */

/* Firefox */
.mNw-cat-nav {
    scrollbar-width: thin;
    scrollbar-color: #fff transparent;
}

/* Chrome, Edge, Safari */
.mNw-cat-nav::-webkit-scrollbar {
    height: 8px;
}

/* Scrollbar track */
.mNw-cat-nav::-webkit-scrollbar-track {
    background: transparent;
}

/* White draggable pill */
.mNw-cat-nav::-webkit-scrollbar-thumb {
    background: #fff;
    border-radius: 999px;
}

/* Optional hover */
.mNw-cat-nav::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.8);
}

/* ---------------------------------------------------------
   Menu section + masonry grid
   --------------------------------------------------------- */
.mNw-menu-section{
  padding: 3.5rem 0 0.5rem;
  scroll-margin-top: 12.5rem;
}

.mNw-section-head{
  display: flex;
  align-items: flex-end;
  gap: 1.125rem;
  margin-bottom: 1.875rem;
  flex-wrap: wrap;
}

.mNw-section-head h2{
  font-family: var(--disp, "Archivo Black", sans-serif);
  font-size: clamp(2.5rem, 6vw, 5.375rem);
  line-height: .82;
  letter-spacing: -.025em;
  text-transform: uppercase;
  margin-top: -.08em;
}

.mNw-section-head .mNw-script{
  font-size: clamp(1.75rem, 3.4vw, 2.875rem);
  margin-left: 0.5rem;
}

/* Stacks the script adjective over the H2 inside the flex row.
   Emitted by [ns_section_head]; plain markup, so no atomic bridge needed. */
.mNw-section-head__titles{
  position: relative;
}

.mNw-section-head__count{
  font-family: var(--mNw-font-mono, var(--mono, monospace));
  font-size: 0.75rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
  padding-bottom: 0.875rem;
  margin-left: auto;
}

/* The 2026 card lets a long dish name WRAP onto a second line; the pre-v0.6.0
   rule ellipsised it on one line. That was not merely a style difference —
   `overflow:hidden` zeroes a flex item's automatic minimum size, so the name
   collapsed against the `flex:1` dot leader and every card read "Edama…".
   Restated at (0,2,0) rather than edited above, per this block's override rule. */
.mNw-menu-card .mNw-price-leader__name{
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  font-family: var(--disp, system-ui, sans-serif);
  font-size: 1.6875rem;                          /* comp: 27px */
  font-weight: 400;
  line-height: .95;
  letter-spacing: -.01em;
  text-transform: capitalize;
}

/* Serif description + italic topping line on the card. */
.mNw-menu-card__desc{
  font-family: var(--serif, Georgia, "Times New Roman", serif);
  font-size: 0.875rem;
  line-height: 1.4;
  color: rgba(255,255,255,.95);
  text-transform: uppercase;
  letter-spacing: .02em;
}

.mNw-menu-card__topping{
  font-family: var(--serif, Georgia, "Times New Roman", serif);
  font-style: italic;
  font-size: 0.8125rem;
  margin-top: 0.25rem;
  color: rgba(255,255,255,.85);
}

/* Pill row emitted by [ns_dietary_tags]. Plain markup inside a shortcode widget,
   NOT an e-con — so it needs no atomic bridge. */
.mNw-menu-card__tags{
  display: flex;
  flex-wrap: wrap;
  gap: 0.4375rem;
}

/* ---------------------------------------------------------
   ATOMIC BRIDGE (v4) — layout-critical rules only.
   `.elementor .e-div-block-base` (0,2,0) beats `.mNw-x` (0,1,0);
   the doubled class is (0,3,0) and wins.
   --------------------------------------------------------- */
.elementor .mNw-nav__actions.mNw-nav__actions,
.elementor .mNw-hero-panel__badges.mNw-hero-panel__badges,
.elementor .mNw-world__head.mNw-world__head,
.elementor .mNw-car-nav.mNw-car-nav,
.elementor .mNw-delivery.mNw-delivery,
.elementor .mNw-footer__newsform.mNw-footer__newsform,
.elementor .mNw-footer__links.mNw-footer__links,
.elementor .mNw-cat-nav__inner.mNw-cat-nav__inner,
.elementor .mNw-section-head.mNw-section-head{
  display: flex;
}

.elementor .mNw-nav__actions.mNw-nav__actions{
  align-items: center;
  gap: 0.625rem;
  margin-left: 0.375rem;
}

/* `margin-inline: auto` on the bare class loses to Elementor's own
   `.e-con{margin-inline-start:var(--margin-inline-start)}` — same (0,1,0),
   and frontend.min.css loads AFTER global.css — so the capped pill sat flush
   left instead of centred. Restate the centring at (0,3,0). */
.elementor .mNw-nav__bar.mNw-nav__bar{
  min-block-size: 4.75rem;
  max-inline-size: var(--maxw, 90rem);
  margin-inline: auto;
  box-shadow: 0 6px 20px rgba(0,0,0,.18);
}

/* Same trap on the lockup: `.elementor img{height:auto}` (0,1,1, later file)
   beats `.mNw-nav__logo img` (0,1,1), so every clamp authored on the bare
   selector was dead and the SVG rendered at its natural 65.89px. */
.elementor .mNw-nav__logo.mNw-nav__logo img,
.elementor .mNw-nav__logo.mNw-nav__logo svg{
  block-size: clamp(2.25rem, 1.55rem + 2vw, 3rem);   /* comp: 48px in a 76px pill */
  inline-size: auto;
}

.elementor .mNw-nav__links.mNw-nav__links{
  margin-left: auto;
  gap: 1.875rem;
  flex-wrap: nowrap;
}

.elementor .mNw-world.mNw-world{
  position: relative;
  overflow: hidden;
  background: var(--ink, #141414);
  border-radius: var(--r-panel, 1.875rem);
  margin: var(--pad, 1rem);
  margin-top: 0;
  padding: 4rem 0 0;
}

.elementor .mNw-ghost-stage.mNw-ghost-stage{ position: relative; }

/* .mNw-loc-card / __media / __body sit on real e-div-block elements
   (`.e-con.e-atomic-element.e-div-block-base`), so they fight TWO base
   sheets, not one:
     - `.e-div-block-base` (0,2,0): min-width:30px; padding:10px; display:block.
     - `.e-con` (0,1,0), loaded AFTER global.css in frontend.min.css: sets
       border-radius/height/overflow/position/width/z-index from --custom-props
       that default to 0/auto/visible/relative/100%/revert. Tied specificity
       with a bare `.mNw-x` rule (0,1,0) is broken by SOURCE ORDER, and `.e-con`
       loads later — so overflow:hidden / height:230px / border-radius silently
       lose without this bridge. (Verified live: __media computed height was
       0px — `.e-con`'s `--height:auto` on an empty flow, since the photo
       inside is position:absolute and contributes no intrinsic height.)
   `.elementor-element` (0,1,0) also feeds flex-grow/shrink/basis from
   --flex-* custom props (default `initial`), which is why __body's `flex: 1`
   needs restating too. */
.elementor .mNw-loc-card.mNw-loc-card{
  display: flex;
  padding: 0;
  border-radius: var(--r-card, 1.375rem);
  overflow: hidden;
}

.elementor .mNw-loc-card__media.mNw-loc-card__media{
  padding: 0;
  height: 230px;
  overflow: hidden;
}

.elementor .mNw-loc-card__media.mNw-loc-card__media img,
.elementor .mNw-loc-card__media.mNw-loc-card__media .e-image-link-base{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.elementor .mNw-loc-card__body.mNw-loc-card__body{
  display: flex;
  padding: 1.375rem 1.5rem 1.625rem; /* 22px 24px 26px */
  flex-grow: 1;
}

.elementor .mNw-car-btn.mNw-car-btn,
.elementor .mNw-delivery__app.mNw-delivery__app,
.elementor .mNw-loc-card__pin.mNw-loc-card__pin{
  display: grid;
  place-items: center;
}

/* CHORE-LOC-PIN-CENTER-001 — the pin is an e-svg widget (tall 295x407 viewBox, inline
   `height:100%`). An auto grid row sizes to the SVG's intrinsic ratio (32x44 inside a
   32x32 content box), so the glyph overflowed the circle by 12px and sat low. Pin the
   track to the content box; the SVG's default xMidYMid meet then centres the glyph. */
.elementor .mNw-loc-card__pin.mNw-loc-card__pin{
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
}

.elementor .mNw-cat-chip.mNw-cat-chip{
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* CHORE-MENU-TEMPLATE-2026-BUILD-001 — D6. Elementor's CSS-Classes control lands
   on `.elementor-element`, two levels above the box that must fragment. Reach
   DOWN rather than relocate the class: ns-motion.js's auto-hide contract reads
   `.elementor-loop-container` and its direct `.e-loop-item` children, so the
   class must stay OFF the loop container itself. The rule must out-specify
   `.elementor-grid{display:grid}` (0,1,0) from frontend.min.css, which loads
   AFTER global.css — hence the doubled class, per this block's bridge rule.
   Computed (0,4,0).
   The wrapper-only form is NOT equivalent and is why this exists: it leaves the
   loop container a CSS Grid, so the 3 columns come from `elementor-grid-3` and
   the rows stay ALIGNED. Multicol is what makes them ragged. */
.elementor .mNw-section-grid.mNw-section-grid{
  display: block;                                /* columns, not flex/grid */
}

.elementor .mNw-section-grid.mNw-section-grid .elementor-loop-container{
  display: block;                                /* columns, not grid */
  columns: 3 18.75rem;
  column-gap: 1.375rem;
}

/* The card sits INSIDE `.e-loop-item`, and multicol fragments the DIRECT
   children of the multicol box — so `break-inside` belongs on `.e-loop-item`,
   not on the card it wraps. */
.elementor .mNw-section-grid.mNw-section-grid .elementor-loop-container > .e-loop-item{
  break-inside: avoid;
  margin-bottom: 1.375rem;
}

/* The card and its media box are both `e-con`, and `.e-con` restates
   `overflow: var(--overflow)` (visible), `border-radius: var(--border-radius)` (0)
   and `display: var(--display)` at (0,1,0) in frontend.css — which loads AFTER
   global.css, so it beats the tie on every same-specificity `.mNw-menu-card` rule.
   The card rendered square-cornered and stopped clipping. Restate at (0,3,0). */
.elementor .mNw-menu-card.mNw-menu-card{
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--r-card, 1.375rem);
}

/* The body is an unstyled `e-div-block`, so `.e-div-block-base{display:block;
   padding:10px;min-width:30px}` from the per-site generated base-desktop.css
   wins the (0,1,0) tie on LOAD ORDER and every declaration at the `.mNw-menu-
   card__body` block computes inert — measured `display:block`, `flexGrow:0`,
   `padding:10px`. Invisible while the body held ONE child; this feature adds
   three (description, dietary pills, availability), which would otherwise butt
   together with zero separation inside a 10px box. */
.elementor .mNw-menu-card__body.mNw-menu-card__body{
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex-grow: 1;
  padding: 0.875rem 1rem 1rem;
}

/* All four sides, not just padding-top: `.e-con` seeds
   `--padding-bottom: var(--container-default-padding-bottom, 10px)`, and those
   10px land under the ratio box — the media measured 1.292:1 instead of 1.333:1. */
.elementor .mNw-menu-card__media.mNw-menu-card__media{
  overflow: hidden;
  padding: 75% 0 0;                              /* 4:3 intrinsic-ratio box */
}

/* `.elementor img{height:auto;border-radius:0}` is (0,1,1) in that same later file
   and TIES with `.mNw-menu-card__media img` — so the absolutely-positioned photo
   fell back to its intrinsic height, ignored `object-fit`, and spilled over the
   card body. This is the nav-logo trap from CLAUDE.md, one level deeper. (0,2,1). */
/* The dot leader is an e-div-block, so it inherits `.e-con{width:var(--width)}`
   = 100%. As a flex item that resolves its basis to the FULL row width, so the
   leader demanded everything and squeezed the name down to its longest word —
   "Edamames Thai" set as three stacked lines. `width:auto` is the load-bearing
   half here; `flex` alone does not undo it. */
.elementor .mNw-price-leader__dots.mNw-price-leader__dots{
  flex: 1 1 0;
  width: auto;
  min-width: 1rem;
}

.elementor .mNw-menu-card__media.mNw-menu-card__media img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}

/* The badges live INSIDE the media box, so the photo rule above claims them:
   `.elementor .mNw-menu-card__media.mNw-menu-card__media img` is (0,3,1) and a
   badge inherits `position:absolute; inset:0; width:100%; height:100%;
   object-fit:cover` from it. Measured before this rule existed: 30px wide and
   **0px tall** — height:100% resolved against a rail that had no height, because
   every child had been taken out of flow. Invisible, with correct markup.

   Doubling the rail class and naming the badge reaches (0,4,0), which beats
   (0,3,1) on class count — no !important, and the photo rule is left alone.
   `position: static` is the load-bearing half: it is what puts the badges back
   in flow so the rail has a height at all. */
.elementor .mNw-menu-card__badges.mNw-menu-card__badges .mNw-menu-card__badge{
  position: static;
  inset: auto;
  width: 9%;
  max-width: 4.5rem;
  height: auto;
  object-fit: contain;
  border-radius: 0;
}

/* The rail itself is an e-div-block, so `.e-con{width:var(--width)}` (100%) and
   the container's default padding both apply — the same trap the dot leader hit.
   Restated at (0,3,0) so the inset-based width survives.

   The width is spelled out rather than left `auto`. An absolutely-positioned
   flex container with `width:auto` shrink-wraps its children, and the badges
   size themselves as a PERCENTAGE of it — so the two definitions chase each
   other and settle wherever shrink-to-fit lands. Measured with `auto`: 33px
   instead of the intended ~72px, correct in every other respect. */
.elementor .mNw-menu-card__badges.mNw-menu-card__badges{
  padding: 0;
  width: calc(100% - 1.25rem);
  display: flex;
  flex-wrap: wrap;
  pointer-events: none;
}

/* Same two fixes as the badge rail, for the same two reasons: the photo rule
   claims any <img> inside the media box at (0,3,1), and an absolutely
   positioned `width:auto` flex container shrink-wraps. Here shrink-to-fit is
   what we actually want — the rail hugs its lockups so they stay flush right —
   so the width is capped rather than set, and `max-width` cannot start a
   circular sizing loop the way `width` did, because the lockups size off
   HEIGHT. */
.elementor .mNw-menu-card__highlights.mNw-menu-card__highlights{
  position: absolute;
  z-index: 2;
  padding: 0;
  width: auto;
  max-width: calc(100% - 1.25rem);
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  pointer-events: none;
}

.elementor .mNw-menu-card__highlights.mNw-menu-card__highlights .mNw-menu-card__highlight{
  position: static;
  inset: auto;
  width: auto;
  height: 4.75rem;
  object-fit: contain;
  border-radius: 0;
}

/* Same load-order tie as the card body: `.e-div-block-base{padding:10px}` beats
   the (0,1,0) padding on `.mNw-menu-section` / `.mNw-menu-hero`, both of which
   compute `padding:10px` today. Swept as a CLASS with the body above, not
   spot-fixed one element at a time. */
.elementor .mNw-menu-section.mNw-menu-section{ padding: 3.5rem 0 0.5rem; }

.elementor .mNw-menu-hero.mNw-menu-hero{ padding: 3.75rem 0 1.625rem; }

/* The hero eyebrow is a <p>, so `.mNw-menu-hero p` (0,1,1) — the subline rule,
   in THIS file — outspecifies a bare `.mNw-script--x` (0,1,0) and paints the
   eyebrow in the subline's muted ink. Measured: computed
   `rgba(255,255,255,.66)` instead of the resolved `--lime`.
   Note this is NOT the atomic-base load-order tie the other bridges answer; it
   is ordinary specificity inside one stylesheet, so it needs a scoped selector
   rather than a doubled class. Swept across all three accents rather than
   fixing only the one the hero happens to use today. */
.mNw-menu-hero .mNw-script--pink  { color: var(--pink, #ee3b7b); }
.mNw-menu-hero .mNw-script--lime  { color: var(--lime, #cddc28); }
.mNw-menu-hero .mNw-script--orange{ color: var(--orange, #ff7300); }

/* `z-index` is restated because `.e-con{z-index:var(--z-index)}` clobbers the
   `-1`, so the glow computes `z-index:auto`. That is not broken TODAY only
   because the archive tree emits the glow BEFORE the 28 sections and paint
   order falls back to DOM order — a latent ordering fragility. Both ends are
   fixed: this rule, and an element-order assertion in verify-menu-template.sh.
   `pointer-events:none` is deliberately NOT restated — `.e-con` does not
   clobber it, and it already survives. */
.elementor .mNw-menu-glow.mNw-menu-glow{ position: fixed; z-index: -1; }

.elementor .mNw-footer__lockup.mNw-footer__lockup{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

/* ---------------------------------------------------------
   Responsive
   --------------------------------------------------------- */
@media (max-width: 1000px){
  .elementor .mNw-section-grid.mNw-section-grid .elementor-loop-container{ columns: 2 17.5rem; }
}

@media (max-width: 720px){
  .mNw-nav__links{ display: none; }
  .mNw-nav__links.is-open{
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: absolute;
    top: 5.5rem;
    right: var(--pad, 1rem);
    background: var(--pink, #ee3b7b);
    padding: 1.375rem 1.625rem;
    border-radius: 1.25rem;
    box-shadow: 0 12px 30px rgba(0,0,0,.3);
  }
  .mNw-nav__actions .mNw-nav__cta--reserva{ display: none; }
  .mNw-nav__toggle{
    display: grid;
    place-items: center;
    margin-left: auto;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    color: var(--white, #ffffff);
  }
  .mNw-world__head{ flex-direction: column; align-items: flex-start; }
  .mNw-footer__links{ flex-direction: column; gap: 0.75rem; }
}

@media (max-width: 640px){
  .elementor .mNw-section-grid.mNw-section-grid .elementor-loop-container{ columns: 1; }
  .mNw-cat-nav{ top: 6rem; }
}

@media (prefers-reduced-motion: reduce){
  .mNw-car-btn,
  .mNw-ghost-name,
  .mNw-nav__link::after{ transition: none !important; }
}

/* =========================================================
   ns-locmap — the v4 ATOMIC locations map widget
   FEAT-LOCATIONS-MAP-V4-001 Stage 3.

   Scoped to .ns-locmap, which ONLY the atomic twig emits. The shortcode's
   .mNw-locmap block above is untouched, and so is its :has() bridge — that
   rule's occurrence count is asserted by the harness, and the atomic path has
   no wrapper for it to match anyway: Atomic_Widget_Base's before/after_render
   are empty and has_widget_inner_wrapper() is false, so the twig root IS the
   element and a direct child of its container.
   ========================================================= */

/* FOREGROUNDS USE --mNw-text-*, NOT --mNw-neutral-*. The neutral scale is
   defined once at :root and is never re-themed; the text scale is re-themed by
   .mNw-theme--dark, .mNw-band--ink and .mNw-footer — the same three zones that
   flip --mNw-surface-1/2 to ink. Pairing a themable BACKGROUND with a fixed
   FOREGROUND is what produces #141414 text on a #1d1d1d panel (~1.1:1,
   invisible) the moment an operator drops this widget into a dark band, which
   this sheet's own comment instructs them to do. The spec's browser matrix
   declared theme {light} only on the belief that the network ships no dark
   theme; three dark zones ship today. (grill R1 P5.) */

/* HOVER/FOCUS STATES ARE PINNED EXPLICITLY, and that is not belt-and-braces.
   hello-elementor's reset.css carries
   `[type="button"]:focus, [type="button"]:hover, button:focus, button:hover
   { background-color:#c36; color:#fff }`. `[type="button"]:focus` is an
   attribute plus a pseudo-class — specificity (0,0,2,0) — which TIES the
   doubled class used throughout this block, and on a tie the later sheet wins.
   Measured: clicking a list item left its label at #ffffff over a 12% brand
   tint, a ratio of 1.0 — invisible while focused. Declaring the state colours
   here at (0,0,3,0) settles it in the one direction that is legible.
   The IDLE pairs below are measured by the --contrast browser row; the HOVER and
   FOCUS pairs are measured by its state stage. Stated precisely because the
   first version of this line claimed the whole block was measured when the row
   sampled no state at all — a comment asserting coverage that does not exist is
   worse than no comment, because it stops the next reader looking. */
/* STATE BACKGROUNDS MUST DIFFER FROM THE PANEL IN BOTH THEMES, and the first
   attempt at this block did not. It used fixed --ink for hover while the panel
   is --mNw-surface-2, which re-themes to --ink-2: in the three dark zones the
   close control's hover background became identical to its idle background
   (#141414 on #141414) and the reset pill sat at 1.1:1 against the panel. The
   CONTRAST row measures TEXT against background, so a control that had visually
   vanished still scored a clean pass — the fix optimised exactly the metric its
   own gate could see. Everything below either flips with the theme
   (color-mix over a themed token) or adds a ring that does not depend on fill
   at all. (grill R3 P3.) */
.ns-locmap__reset.ns-locmap__reset:hover,
.ns-locmap__reset.ns-locmap__reset:focus,
.ns-locmap__reset.ns-locmap__reset:focus-visible,
.ns-locmap__close.ns-locmap__close:hover,
.ns-locmap__close.ns-locmap__close:focus,
.ns-locmap__close.ns-locmap__close:focus-visible {
  background: var(--mNw-text-1, #141414);
  color: var(--mNw-surface-2, #ffffff);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mNw-brand, #ee3b7b) 55%, transparent);
}

.ns-locmap__group-btn.ns-locmap__group-btn:hover,
.ns-locmap__group-btn.ns-locmap__group-btn:focus,
.ns-locmap__group-btn.ns-locmap__group-btn:focus-visible,
.ns-locmap__item-btn.ns-locmap__item-btn:hover,
.ns-locmap__item-btn.ns-locmap__item-btn:focus,
.ns-locmap__item-btn.ns-locmap__item-btn:focus-visible,
.ns-locmap__item.is-selected .ns-locmap__item-btn.ns-locmap__item-btn {
  background: color-mix(in srgb, var(--mNw-brand, #ee3b7b) 12%, transparent);
  color: var(--mNw-text-1, #141414);
}

/* THE COLLAPSE GUARD (AC9). Doubled class for specificity, deliberately: an
   Elementor atomic base selector is (0,2,0) and a bare .ns-locmap is (0,1,0),
   so the base wins a tie and this rule silently loses. Do not "simplify" the
   repetition away.

   width:100% is the load-bearing half. The archived failure needs a FLEX
   parent, and in a row-direction flexbox the collapse is on the MAIN axis
   (flex-basis:auto resolves to content width) — align-self:stretch is
   cross-axis and does nothing there. stretch is kept for the column/v3 case.
   Measured with getComputedStyle, never read off the sheet. */
.elementor .ns-locmap.ns-locmap {
  width: 100%;
  align-self: stretch;
}

.ns-locmap {
  position: relative;
  display: flex;
  gap: 1rem;
  border-radius: var(--r-card, 1.375rem);
  overflow: hidden;
  background: color-mix(in srgb, var(--mNw-surface-1, #f4f1ea) 80%, transparent);
}

.ns-locmap__canvas {
  flex: 1 1 auto;
  min-width: 0;          /* a flex item's min-width:auto would refuse to shrink */
  border-radius: inherit;
}

/* The panel overlays the canvas rather than sitting beside it, so the map keeps
   its full width. It is a contrast surface over map tiles, not a flat one —
   hence an opaque fill rather than a translucent one. */
.ns-locmap__panel {
  position: absolute;
  z-index: 500;          /* above Leaflet panes (400) but below its controls (800) */
  top: 1rem;
  left: 1rem;
  width: min(22rem, calc(100% - 2rem));
  /* HEIGHT, NOT MAX-HEIGHT, and that is a bug fix rather than a tidy-up. The
     detail pane is `position:absolute; inset:0` over this box, so the card's
     height IS the panel's height. With max-height the panel is content-sized:
     a search narrowing the list to one hit shrank it to ~4rem, and opening
     that hit rendered the whole card — thumb, title, badge, address, phone,
     three actions — inside a 4rem scroller, which reads as a truncated card.
     Pinning the panel to the widget also stops the box resizing under the
     pointer on every keystroke. */
  height: calc(100% - 2rem);
  display: flex;
  flex-direction: column;
  gap: .625rem;
  padding: .875rem;
  border-radius: var(--r-chip, .5625rem);
  background: var(--mNw-surface-2, #fff);
  box-shadow: var(--mNw-shadow-m, 0 12px 30px rgba(0,0,0,.10));
  font-family: var(--sans, system-ui, sans-serif);
  overflow: hidden;
}

.ns-locmap__search-row { display: flex; gap: .5rem; align-items: center; }
.ns-locmap__search-label {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden;      /* visually hidden, still announced */
}
.ns-locmap__search {
  flex: 1 1 auto;
  min-width: 0;
  padding: .5rem .75rem;
  border: 1px solid var(--mNw-border, rgba(0,0,0,.12));
  border-radius: var(--r-pill, 6.25rem);
  font: inherit;
  background: var(--mNw-surface-1, #f4f1ea);
  color: var(--mNw-text-1, #141414);
}
.ns-locmap__search:focus-visible {
  outline: 2px solid var(--mNw-brand, #ee3b7b);
  outline-offset: 1px;
}

/* EVERY rule below that targets a <button> uses a DOUBLED class, and that is
   load-bearing rather than stylistic. hello-elementor's reset.css carries
   `[type="button"], [type="submit"], button { padding:.5rem 1rem; border:1px
   solid #c36; ... }`. `[type="button"]` is an ATTRIBUTE selector — specificity
   (0,1,0) — which TIES a single class, and on a tie the later sheet wins;
   reset.css loads after global.css. Measured: the close control resolved to
   43x44 with the reset's padding and border instead of the declared 44x44.
   Doubling to (0,2,0) wins regardless of source order. Every one of these also
   states padding and border explicitly, because inheriting either from the
   reset is what broke the sizing in the first place.
   Verified with getComputedStyle, never by reading this file. */

.ns-locmap__reset.ns-locmap__reset {
  flex: 0 0 auto;
  padding: .5rem .75rem;
  border: 0;
  border-radius: var(--r-pill, 6.25rem);
  /* An INVERSE pair, not a fixed one. Fixed --ink/--white was 18.4:1 for its
     own text but sat at ~1.1:1 against a dark-zone panel, so the pill itself
     was invisible even though the gate read it as clean. Inverting against the
     themed tokens keeps both the text ratio AND the control's edge in every
     theme. (grill R2 P3, corrected R3 P3.) */
  background: var(--mNw-text-1, #141414);
  color: var(--mNw-surface-2, #ffffff);
  font: inherit;
  cursor: pointer;
  white-space: nowrap;
}

.ns-locmap__summary {
  margin: 0;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--mNw-text-2, #4a4a4a);
}

.ns-locmap__list {
  margin: 0; padding: 0; list-style: none;
  /* The list takes whatever the fixed-height panel has left over — grow so a
     short result set does not leave the scroller stranded at content height,
     min-height:0 so a long one can shrink below it. overflow-y already zeroes
     the automatic minimum size; 0 is spelled out because the two declarations
     are read together. */
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: .125rem;
}

/* The list must SAY it scrolls. macOS overlay scrollbars stay hidden until the
   user scrolls, so with the UA default a Mac visitor saw a fixed box whose last
   row ended at its edge and read it as the whole list. Styling
   ::-webkit-scrollbar makes Safari and Chrome draw a classic, always-visible bar.
   The standard scrollbar-width/-color pair is FIREFOX-ONLY on purpose: since
   Chrome 121 either one disables the ::-webkit-scrollbar rules, which would
   put Chrome on Mac straight back to the hidden overlay. */
.ns-locmap__list { --ns-locmap-sb: 8px; }
.ns-locmap__list::-webkit-scrollbar { width: var(--ns-locmap-sb); }
.ns-locmap__list::-webkit-scrollbar-track { background: transparent; }
.ns-locmap__list::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--mNw-text-1, #141414) 35%, transparent);
  border-radius: var(--r-pill, 6.25rem);
}
.ns-locmap__list::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--mNw-text-1, #141414) 55%, transparent);
}
@supports not selector(::-webkit-scrollbar) {
  .ns-locmap__list {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--mNw-text-1, #141414) 35%, transparent) transparent;
  }
}

/* Second signal, independent of any scrollbar: the bottom rows fade out while
   more remain below. Scroll-driven, so it needs no JS. The fade shrinks to 0 at
   the end of the list, and a list that does not overflow has an inactive
   timeline, so the animation doesn't apply and the fade stays at its 0px
   initial value. The first mask layer is an opaque strip over the scrollbar
   gutter so the bar itself never fades. Browsers without scroll timelines
   (Firefox today) skip the block and keep the plain list. */
@property --ns-locmap-fade {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}
@keyframes ns-locmap-fade {
  0%, 85% { --ns-locmap-fade: 2.5rem; }
  100%    { --ns-locmap-fade: 0px; }
}
@supports (animation-timeline: scroll()) {
  .ns-locmap__list {
    animation: ns-locmap-fade linear both;
    animation-timeline: scroll(self);   /* after the shorthand, which resets it */
    mask-image:
      linear-gradient(#000 0 0),
      linear-gradient(to bottom, #000 calc(100% - var(--ns-locmap-fade)), transparent);
    mask-size: var(--ns-locmap-sb) 100%, 100% 100%;
    mask-position: right top, left top;
    mask-repeat: no-repeat;
  }
}
.ns-locmap__item-btn.ns-locmap__item-btn {
  width: 100%;
  /* A row with no city has no subtitle and measured 40px without this. */
  min-height: 44px;
  display: flex; flex-direction: column; gap: .125rem;
  padding: .5rem .625rem;
  border: 0; border-radius: var(--r-btn, .5rem);
  white-space: normal;
  background: transparent;
  font: inherit; text-align: left; cursor: pointer;
  color: var(--mNw-text-1, #141414);
}
.ns-locmap__item-name { font-weight: 600; }

/* The Country → City → Location tree (FEAT-LOCMAP-ACCORDION-001). A header is
   a full-width row — label, match count, chevron — with a 44px floor, the same
   pointer-target rule as the close control. Doubled classes for the same
   reason as every control in this block: reset.css loads later and ties a
   single class. */
.ns-locmap__group-btn.ns-locmap__group-btn {
  width: 100%;
  min-height: 44px;
  display: flex; align-items: center; gap: .5rem;
  padding: .5rem .625rem;
  border: 0; border-radius: var(--r-btn, .5rem);
  white-space: normal;
  background: transparent;
  font: inherit; font-weight: 600; text-align: left; cursor: pointer;
  color: var(--mNw-text-1, #141414);
}
.ns-locmap__group-label { flex: 1 1 auto; min-width: 0; }
.ns-locmap__group-count {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: .75rem; font-weight: 400;
  color: var(--mNw-text-2, #4a4a4a);
}
.ns-locmap__group-chevron {
  flex: 0 0 auto;
  width: .5rem; height: .5rem;
  margin-inline-end: .25rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform .15s ease;
}
.ns-locmap__group-btn[aria-expanded="true"] .ns-locmap__group-chevron { transform: rotate(45deg); }

/* NO display rule on the nested lists. .ns-locmap__list is a flex column; a
   nested list carrying that class's display would stay laid out while
   [hidden], because an author display beats the UA's [hidden]. The explicit
   [hidden] rule below settles it whatever reset.css does. */
.ns-locmap__children { margin: 0; padding: 0; list-style: none; }
.ns-locmap__children[hidden] { display: none; }

/* Indentation is padding INSIDE the button, so the hit area stays full width. */
.ns-locmap__children .ns-locmap__group-btn.ns-locmap__group-btn,
.ns-locmap__children .ns-locmap__item-btn.ns-locmap__item-btn { padding-inline-start: 1.375rem; }
.ns-locmap__children .ns-locmap__children .ns-locmap__item-btn.ns-locmap__item-btn { padding-inline-start: 2.125rem; }

/* Only non-open rows are marked (operator decision D2). The badge reuses the
   detail pane's closed palette, already measured by the badgeMuted subject. */
.ns-locmap__item.is-muted .ns-locmap__item-name { color: var(--mNw-text-2, #4a4a4a); font-weight: 500; }
.ns-locmap__item-badge {
  align-self: flex-start;
  padding: .0625rem .5rem;
  border-radius: var(--r-pill, 6.25rem);
  font-family: var(--mono, ui-monospace, monospace);
  font-size: .6875rem; text-transform: uppercase; letter-spacing: .04em;
  background: var(--mNw-text-2, #4a4a4a);
  color: var(--mNw-surface-2, #fff);
}
.ns-locmap__item-city,
.ns-locmap__empty,
.ns-locmap__error {
  font-size: .8125rem;
  color: var(--mNw-text-2, #4a4a4a);
}
.ns-locmap__empty, .ns-locmap__error { padding: .5rem .625rem; }

/* The detail pane covers the panel rather than pushing it, so opening it never
   reflows the list underneath. */
.ns-locmap__detail { display: none; }
.ns-locmap__detail.is-open {
  display: flex; flex-direction: column; gap: .5rem;
  position: absolute;
  inset: 0;
  padding: .875rem;
  border-radius: inherit;
  background: var(--mNw-surface-2, #fff);
  overflow-y: auto;
}

/* >=44px in BOTH axes — a pointer target, measured, not eyeballed. */
.ns-locmap__close.ns-locmap__close {
  position: absolute; top: .5rem; right: .5rem;
  width: 44px; height: 44px;
  min-width: 44px; min-height: 44px;
  padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--r-pill, 6.25rem);
  background: var(--mNw-text-1, #141414);
  color: var(--mNw-surface-2, #ffffff);
  font-size: 1.5rem; line-height: 1; cursor: pointer;
}

.ns-locmap__thumb {
  width: 100%; height: 7.5rem;
  object-fit: cover;
  border-radius: var(--r-btn, .5rem);
}
.ns-locmap__detail-title {
  margin: 0;
  font-family: var(--disp, system-ui, sans-serif);
  font-size: 1.25rem;
  color: var(--mNw-text-1, #141414);
}
.ns-locmap__badge {
  align-self: flex-start;
  padding: .125rem .5rem;
  border-radius: var(--r-pill, 6.25rem);
  font-family: var(--mono, ui-monospace, monospace);
  font-size: .6875rem; text-transform: uppercase; letter-spacing: .04em;
  /* BOTH sides fixed. --mNw-accent-2 is brand lime, defined once at :root and
     never re-themed, so pairing it with a THEMABLE foreground fails exactly as
     a themable background with a fixed foreground does — measured 12.16:1 in
     light and 1.34:1 in the three dark zones, on the status indicator. A fixed
     ink on a fixed lime is correct in every theme. (grill R2 P1.) */
  background: var(--mNw-accent-2, #cddc28);
  color: var(--ink, #141414);
}
.ns-locmap__badge--closed,
.ns-locmap__badge--coming-soon {
  background: var(--mNw-text-2, #4a4a4a);
  color: var(--mNw-surface-2, #fff);
}

.ns-locmap__address,
.ns-locmap__hours {
  margin: 0;
  font-size: .875rem;
  color: var(--mNw-text-2, #4a4a4a);
}

.ns-locmap__action,
.ns-locmap__more,
.ns-locmap__phone {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px;
  padding: .5rem .875rem;
  border-radius: var(--r-btn, .5rem);
  text-decoration: none;
  font-weight: 600; font-size: .875rem;
}
.ns-locmap__action--reserve {
  background: var(--mNw-brand, #ee3b7b);
  color: var(--mNw-brand-contrast, #fff);
}
.ns-locmap__action--order {
  background: var(--mNw-accent, #ff7300);
  color: var(--mNw-brand-contrast, #fff);
}
.ns-locmap__action--directions,
.ns-locmap__more,
.ns-locmap__phone {
  background: var(--mNw-surface-1, #f4f1ea);
  color: var(--mNw-text-1, #141414);
}

/* Cluster bubbles on brand, overriding MarkerCluster.Default.css. That sheet is
   a separate style handle and loads BEFORE this one, so a single class is
   enough here — no doubling needed against a vendor sheet. */
.marker-cluster-small div,
.marker-cluster-medium div,
.marker-cluster-large div {
  background: var(--mNw-brand, #ee3b7b);
  color: var(--mNw-brand-contrast, #fff);
  font-family: var(--mono, ui-monospace, monospace);
  font-weight: 700;
}
.marker-cluster-small,
.marker-cluster-medium,
.marker-cluster-large {
  background: color-mix(in srgb, var(--mNw-brand, #ee3b7b) 35%, transparent);
}

/* Phone: the panel stops overlaying and stacks above the map, because a 22rem
   overlay on a 375px viewport leaves no map visible at all. */
@media (max-width: 767px) {
  .ns-locmap { flex-direction: column; border-radius: 0; }
  .ns-locmap__panel {
    position: static;
    width: 100%;
    /* Stacked above the map, the panel is no longer a box over the canvas and
       has no percentage height to take: the desktop pin must be released here
       or it resolves against the root's auto height. The detail pane goes
       position:fixed below, so nothing depends on the panel's height either. */
    height: auto;
    max-height: none;
    border-radius: 0;
    box-shadow: none;
  }
  .ns-locmap__list { max-height: 14rem; }
  .ns-locmap__detail.is-open { position: fixed; z-index: 1000; }
}

@media (prefers-reduced-motion: reduce) {
  .ns-locmap * { transition: none !important; animation: none !important; }
}