/* =========================================================
   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 */

  /* =========================================================
     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 */
  --mNw-text-xs: clamp(0.75rem, 0.72rem + 0.20vw, 0.875rem);
  --mNw-text-s:  clamp(0.875rem, 0.84rem + 0.25vw, 1rem);
  --mNw-text-m:  clamp(1rem, 0.96rem + 0.30vw, 1.125rem);
  --mNw-text-l:  clamp(1.125rem, 1.06rem + 0.45vw, 1.375rem);
  --mNw-h-s:     clamp(1.375rem, 1.20rem + 0.90vw, 1.875rem);
  --mNw-h-m:     clamp(1.75rem, 1.45rem + 1.40vw, 2.50rem);
  --mNw-h-l:     clamp(2.25rem, 1.75rem + 2.30vw, 3.50rem);
  --mNw-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;
  --mNw-inv-fill: var(--mNw-surface-1);
  
  /* ---------- Buttons ---------- */
  --mNw-btn-radius: var(--r-pill, 6.25rem);
  --mNw-btn-pad-y: 0.85em;
  --mNw-btn-pad-x: 1.20em;
  --mNw-btn-gap: 0.55em;

  --mNw-btn-font: var(--mNw-text-s);
  --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-text-xs{ font-size: var(--mNw-text-xs); }
.mNw-text-s { font-size: var(--mNw-text-s); }
.mNw-text-m { font-size: var(--mNw-text-m); }
.mNw-text-l { font-size: var(--mNw-text-l); }
.mNw-h-s{ font-size: var(--mNw-h-s); line-height: var(--mNw-lh-ui); }
.mNw-h-m{ font-size: var(--mNw-h-m); line-height: var(--mNw-lh-tight); }
.mNw-h-l{ font-size: var(--mNw-h-l); line-height: var(--mNw-lh-tight); }
.mNw-h-xl{ font-size: var(--mNw-h-xl); line-height: var(--mNw-lh-tight); }

.mNw-surface-1{ background: var(--mNw-surface-1); }
.mNw-surface-2{ background: var(--mNw-surface-2); }
.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); }

/* 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 #FFF;
}

.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 white;
}

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

.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);

  font-size: var(--mNw-btn-font);
  line-height: var(--mNw-btn-lh);
  font-weight: var(--mNw-btn-weight);
  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-font: var(--mNw-text-xs);
}
.mNw-btn--lg .elementor-button{
  --mNw-btn-pad-y: 1.05em;
  --mNw-btn-pad-x: 1.45em;
  --mNw-btn-font: var(--mNw-text-m);
}

/* 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{
  display: inline-flex;
  align-items: center;
  gap: .4em;
  font-family: var(--mNw-font-mono);
  font-size: var(--mNw-text-xs);
  font-weight: 600;
  line-height: 1;
  letter-spacing: .02em;
  padding: .45em .75em;
  border-radius: var(--mNw-radius-pill);
  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, #fff); }
.mNw-tag--ink   { background: var(--ink, #141414);    color: var(--paper, #f4f1ea); }
.mNw-tag--pink  { background: var(--pink, #ee3b7b);   color: var(--white, #fff); }

/* 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);
  font-size: var(--mNw-text-l);
  line-height: 1;
  color: var(--pink, #ee3b7b);
  padding: .35em .8em;
  border-radius: var(--mNw-radius-pill);
  background: var(--mNw-glass-bg);
  border: 1px solid var(--mNw-glass-border);
  backdrop-filter: var(--mNw-glass-blur);
  -webkit-backdrop-filter: var(--mNw-glass-blur);
}

/* 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;
}

.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;
  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;
}

.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);
}

.mNw-unavailable-note {
  font-style: italic;
  opacity: 0.7;
  font-size: 0.875rem;
}

/* ---------------------------------------------------------
   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}/locations/            (archive)
     /{cc}/locations/city/{slug}/ (city archive)
     /{cc}/locations/{slug}/     (single)
   All values use var(--token, fallback) so they render
   correctly even before Elementor Variables are registered.
   ========================================================= */

/* ---------------------------------------------------------
   Location card — paper surface, 16:9 thumb, status + CTA
   Apply mNw-loc-card on the Loop Grid item / single card.
   --------------------------------------------------------- */
.mNw-loc-card {
  background: var(--white, #ffffff);
  border-radius: var(--r-card, 1.375rem);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--mNw-shadow-s, 0 6px 18px rgba(0,0,0,.08));
}

/* 16:9 intrinsic-ratio thumb — no CLS */
.mNw-loc-card__media {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 */
  overflow: hidden;
  background: color-mix(in srgb, var(--pink, #ee3b7b) 15%, var(--paper, #f4f1ea));
}

.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: 1rem 1.125rem 1.25rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.mNw-loc-card__title {
  font-family: var(--mNw-font-display, var(--disp));
  font-size: var(--mNw-h-s, 1.375rem);
  line-height: var(--mNw-lh-ui, 1.3);
  margin: 0;
  text-wrap: balance;
}

.mNw-loc-card__city {
  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(--mNw-text-2, rgba(20,20,20,.72));
}

.mNw-loc-card__footer {
  margin-block-start: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* ---------------------------------------------------------
   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;
  }
}

/* Map pins — CSS divIcon via Leaflet L.divIcon */
.mNw-loc-pin {
  background: var(--pink, #ee3b7b);
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  border: 2px solid rgba(255,255,255,.85);
  box-shadow: 0 2px 8px rgba(0,0,0,.28);
}

.mNw-loc-pin--muted {
  background: #9ca3af;
  box-shadow: 0 2px 6px rgba(0,0,0,.18);
}

/* ---------------------------------------------------------
   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 28s · pausa en hover.
   The __track's children MUST be duplicated once in the markup so the
   -50% translate loops seamlessly:
     div.mNw-marquee > div.mNw-marquee__track > span.mNw-marquee__item ×2n */
.mNw-marquee{
  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;
  inline-size: max-content;
  align-items: center;
  gap: var(--mNw-space-6, 2rem);
  animation: mNw-marquee-x 28s linear infinite;
  will-change: transform;
}

.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(-50%, 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;
  inline-size: max-content;
  align-items: center;
}

.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;
}

.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);
  font-size: var(--mNw-btn-font);
  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(--ink, #141414);
  border: 1px solid transparent;
}

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

.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;
  --mNw-btn-font: var(--mNw-text-xs);
}

.elementor .mNw-btn--lg.mNw-btn--lg{
  --mNw-btn-pad-y: 1.05em;
  --mNw-btn-pad-x: 1.45em;
  --mNw-btn-font: var(--mNw-text-m);
}

/* ---------- 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 .elementor-button,
.mNw-btn--rect{
  --mNw-btn-radius: 0.5rem;      /* comp: 8px */
}

.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{
  padding: var(--mNw-nav-pad-y, 2.4375rem) var(--mNw-nav-pad-x, 1rem) 0;  /* comp: top 39px */
  background: transparent;
}

.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--rect.mNw-btn--rect{ border-radius: 0.5rem; }

.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). */
.elementor .mNw-nav.mNw-nav{
  padding: var(--mNw-nav-pad-y, 2.4375rem) var(--mNw-nav-pad-x, 1rem) 0;
  background: transparent;
}

.elementor .mNw-nav__bar.mNw-nav__bar{
  padding-block: 0;
  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; }
}