/* ==============================
       DESIGN TOKENS
       ============================== */
    :root {
      /* Typography */
      --font-headline: 'Manrope', sans-serif;
      --font-body: 'Inter', sans-serif;
      --font-label: 'Inter', sans-serif;

      /* Colors */
      --text-primary: #121212;
      --text-secondary: #424242;
      --text-tertiary: #757575;
      --text-muted: #5a5a5a;
      --text-accent: #0993A5;

      --accent-primary: #0993A5;
      --accent-secondary: #424242;
      --accent-gradient: #0993A5;
    }

    /* Suporte a Display P3 (Telas Apple/High-End) para renderizar o ciano com a vibração original do Keynote */
    @supports (color: color(display-p3 1 1 1)) {
      @media (color-gamut: p3) {
        :root {
          --text-accent: color(display-p3 0.035 0.576 0.647);
          --accent-primary: color(display-p3 0.035 0.576 0.647);
          --accent-gradient: color(display-p3 0.035 0.576 0.647);
        }
      }
    }

    :root {

      /* Background & Neutral */
      --bg-primary: #fafafa;
      --bg-secondary: #f0f0f0;
      --bg-tertiary: #e8eaef;
      --bg-card: #ffffff;

      /* Clusters Canônicos - Accent Colors (para fundos escuros/destaques) */
      --nouen-cluster-arte:     #7c3aed;
      --nouen-cluster-consumo:  #b56576;
      --nouen-cluster-imoveis:  #2d4a7a;
      --nouen-cluster-veiculos: #a1a1aa;
      --nouen-cluster-maquinas: #16a34a;
      --nouen-cluster-relogios: #ca8a04;
      --nouen-cluster-vinhos:   #9f1239;

      /* Clusters Canônicos - Hero/Dark Colors (para fundos claros/cards) */
      --nouen-cluster-arte-dark:     #20142eff;
      --nouen-cluster-consumo-dark:  #42262eff;
      --nouen-cluster-imoveis-dark:  #0c1a2e;
      --nouen-cluster-veiculos-dark: #28282cff;
      --nouen-cluster-maquinas-dark: #0d1f0d;
      --nouen-cluster-relogios-dark: #2f2302ff;
      --nouen-cluster-vinhos-dark:   #280819ff;
      --bg-card-hover: #fcfcfc;
      /* Dark sections (footer, banners, overlays) */
      --bg-dark: #141414;
      --border-dark: #222222;
      --text-on-dark: #ffffff;
      --text-on-dark-muted: #999999;
      --text-on-dark-subtle: #666666;

      --border-subtle: #ebe7e7;
      --border-active: rgba(18, 18, 18, 0.20);

      --status-live: #16a364;
      --status-upcoming: #d97706;
      --status-available: #2563eb;
      --status-urgent: #dc2626;

      --info: #3b82f6;
      --success: #10b981;
      --accent-red: #ef4444;
      --warning: #f59e0b;
      --success-text: #16a34a;
      --success-bg: #dcfce7;
      --error-bg: #fff0f0;

      /* Shapes */
      --radius-sm: 4px;
      --radius-md: 4px;
      --radius-lg: 4px;
      --radius-xl: 4px;

      --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(0, 0, 0, 0.04);
      --shadow-hover: 0 4px 20px rgba(10, 173, 191, 0.15);

      --transition-fast: 0.15s ease;
      --transition-normal: 0.25s ease;
      --transition-slow: 0.4s ease;

      --max-width: 1440px;
      --container-padding: 56px;
      --header-height: 64px;
    }

    /* ==============================
       RESET & BASE
       ============================== */
    *,
    *::before,
    *::after {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    body {
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
      background: var(--bg-primary);
      color: var(--text-primary);
      line-height: 1.6;
      overflow-x: hidden;
    }

    /* ==============================
       UTILITY CLASSES (VISIBILITY)
       Reusáveis globais — usa em qualquer componente com estratégia dual-DOM
       ============================== */
    .nouen-mobile-only  { display: none  !important; } /* oculto no desktop (padrão) */
    @media (max-width: 767px) {
      .nouen-mobile-only  { display: block !important; } /* visível no mobile */
      .nouen-desktop-only { display: none  !important; } /* oculto no mobile */
    }

    /* ==============================
       LEGAL PAGES
       Estilos para páginas de documentos legais
       ============================== */

    /* Índice lateral — oculto em mobile */
    .nouen-legal-toc {
      display: block;
    }
    @media (max-width: 900px) {
      .nouen-legal-toc {
        display: none !important;
      }
    }

    /* Tipografia do conteúdo legal */
    .nouen-legal-content h2 {
      font-family: var(--font-headline);
      font-size: 1.25rem;
      font-weight: 700;
      color: var(--text-primary);
      margin: 48px 0 16px 0;
      padding-top: 8px;
      border-top: 1px solid var(--border-subtle);
    }
    .nouen-legal-content h2:first-child {
      margin-top: 0;
      border-top: none;
    }
    .nouen-legal-content h3 {
      font-family: var(--font-headline);
      font-size: 1rem;
      font-weight: 700;
      color: var(--text-primary);
      margin: 28px 0 10px 0;
    }
    .nouen-legal-content p {
      font-family: var(--font-body);
      font-size: 0.9rem;
      line-height: 1.75;
      color: var(--text-secondary);
      margin: 0 0 16px 0;
    }
    .nouen-legal-content ul,
    .nouen-legal-content ol {
      font-family: var(--font-body);
      font-size: 0.9rem;
      line-height: 1.75;
      color: var(--text-secondary);
      margin: 0 0 16px 0;
      padding-left: 24px;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .nouen-legal-content strong {
      color: var(--text-primary);
      font-weight: 600;
    }

    /* Banner LGPD */
    .nouen-lgpd-banner {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 400;
      background: color-mix(in srgb, var(--bg-dark, #121212) 95%, transparent);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-top: 1px solid rgba(255,255,255,0.08);
      padding: 16px 24px;
      display: flex;
      align-items: center;
      gap: 16px;
      flex-wrap: wrap;
    }
    .nouen-lgpd-banner__text {
      font-family: var(--font-body);
      font-size: 13px;
      color: rgba(255,255,255,0.75);
      flex: 1;
      min-width: 240px;
      line-height: 1.5;
    }
    .nouen-lgpd-banner__text a {
      color: var(--accent-primary);
      text-decoration: underline;
    }
    .nouen-lgpd-banner__cta {
      font-family: var(--font-body);
      font-size: 13px;
      font-weight: 600;
      padding: 8px 20px;
      border-radius: var(--border-radius, 4px);
      background: var(--accent-primary);
      color: #fff;
      border: none;
      cursor: pointer;
      white-space: nowrap;
      transition: opacity 0.15s;
      flex-shrink: 0;
    }
    .nouen-lgpd-banner__cta:hover { opacity: 0.88; }

    @media (max-width: 767px) {
      .nouen-lgpd-banner {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 16px;
      }
      .nouen-lgpd-banner__cta {
        width: 100%;
        text-align: center;
      }
    }

    /* Páginas Legais — V8.2 — layout base (desktop) */
    .nouen-legal-header-inner {
      padding: 0 var(--container-padding, 56px);
    }
    .nouen-legal-back-bar {
      padding: 12px var(--container-padding, 56px);
    }

    /* Modal — Regulamento Geral de Negociações */
    .nouen-neg-modal-overlay {
      position: fixed;
      inset: 0;
      z-index: 800;
      background: rgba(0,0,0,0.6);
      backdrop-filter: blur(4px);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 16px;
    }
    .nouen-neg-modal {
      background: var(--bg-card);
      border-radius: 16px;
      max-width: 520px;
      width: 100%;
      padding: 32px;
      box-shadow: 0 24px 64px rgba(0,0,0,0.18);
      display: flex;
      flex-direction: column;
      gap: 20px;
      max-height: 90vh;
      overflow-y: auto;
    }
    .nouen-neg-modal__title {
      font-family: var(--font-headline);
      font-size: 1.15rem;
      font-weight: 800;
      color: var(--text-primary);
      margin: 0;
    }
    .nouen-neg-modal__body {
      font-family: var(--font-body);
      font-size: 0.875rem;
      line-height: 1.7;
      color: var(--text-secondary);
      margin: 0;
    }
    .nouen-neg-modal__body p {
      margin: 0 0 8px;
    }
    .nouen-neg-modal__body p:last-child {
      margin-bottom: 0;
    }
    .nouen-neg-modal__body ul {
      padding-left: 20px;
      margin: 10px 0;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .nouen-neg-modal__body a {
      color: var(--accent-primary);
      text-decoration: underline;
    }
    .nouen-neg-modal__btn {
      font-family: var(--font-body);
      font-size: 14px;
      font-weight: 700;
      padding: 14px 24px;
      border-radius: 10px;
      background: var(--accent-primary);
      color: #fff;
      border: none;
      cursor: pointer;
      width: 100%;
      transition: opacity 0.15s;
    }
    .nouen-neg-modal__btn:hover { opacity: 0.88; }
    .nouen-neg-modal__btn:disabled { opacity: 0.5; cursor: not-allowed; }

    /* ==============================
       AMBIENT BORDER GLOW
       ============================== */
    .ambient-glow {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      pointer-events: none;
      z-index: 9999;
      animation: ambientEdge 24s ease-in-out infinite;
    }

    @keyframes ambientEdge {

      0%,
      100% {
        box-shadow: inset 0 0 60px rgba(30, 58, 138, 0.08);
        /* Deep Blue */
      } /* M-xx */

      33% {
        box-shadow: inset 0 0 60px rgba(88, 28, 135, 0.08);
        /* Soft Violet */
      } /* M-xx */

      66% {
        box-shadow: inset 0 0 60px rgba(15, 118, 110, 0.08);
        /* Subtle Teal */
      } /* M-xx */
    }

    a {
      color: var(--text-accent);
      text-decoration: none;
      transition: color var(--transition-fast);
    }

    a:hover {
      color: var(--accent-secondary);
    }

    img {
      display: block;
      max-width: 100%;
    }

    /* ==============================
       UTILITIES
       ============================== */
    .container {
      max-width: var(--max-width);
      margin: 0 auto;
      padding: 0 var(--container-padding);
    }

    .nouen-container {
      max-width: var(--max-width);
      margin: 0 auto;
      padding: 0 var(--container-padding);
    }

    .section {
      padding-top: 80px;
      padding-bottom: 80px;
    }

    .section-header {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      margin-bottom: 32px;
    }

    .section-title {
      font-size: 1.5rem;
      font-weight: 600;
      letter-spacing: -0.02em;
      color: var(--text-primary);
    }

    .section-link {
      font-size: 0.85rem;
      font-weight: 500;
      color: var(--text-secondary);
      display: flex;
      align-items: center;
      gap: 6px;
      transition: color var(--transition-fast);
    }

    .section-link:hover {
      color: var(--text-accent);
    }

    .section-link::after {
      content: '→';
    }

    .grid-2 {
      display: grid; /* M-xx */
      grid-template-columns: repeat(2, 1fr);
      gap: 20px;
    }

    .grid-3 {
      display: grid; /* M-xx */
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }

    .grid-4 {
      display: grid; /* M-xx */
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
    }

    .grid-6 {
      display: grid; /* M-xx */
      grid-template-columns: repeat(6, 1fr);
      gap: 16px;
    }

    /* ==============================
       HEADER
       ============================== */
    .header {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      height: var(--header-height);
      background: rgba(248, 249, 251, 0.92);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border-bottom: 1px solid var(--border-subtle);
      z-index: 100;
      transition: background var(--transition-normal);
    }

    .header::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: linear-gradient(135deg, #6e8efb, #a777e3);
      z-index: 101;
    }

    .header-inner {
      max-width: var(--max-width);
      margin: 0 auto;
      padding: 0 24px;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .header-left {
      display: flex;
      align-items: center;
      gap: 40px;
    }

    .logo {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 1.1rem;
      font-weight: 700;
      color: var(--text-primary);
      letter-spacing: -0.03em;
    }

    .logo-icon {
      width: 28px;
      height: 28px;
      background: var(--accent-gradient);
      border-radius: 7px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .logo-icon svg {
      width: 16px;
      height: 16px;
      fill: white;
    }

    .nav {
      display: flex;
      gap: 6px;
    }

    .nav-link {
      padding: 6px 14px;
      font-size: 0.85rem;
      font-weight: 500;
      color: var(--text-secondary);
      border-radius: var(--radius-sm);
      transition: all var(--transition-fast);
    }

    .nav-link:hover {
      color: var(--text-primary);
      background: rgba(0, 0, 0, 0.04);
    }

    .nav-link.active {
      color: var(--text-primary);
      background: rgba(0, 0, 0, 0.06);
    }

    .header-right {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .header-search {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 7px 14px;
      background: rgba(0, 0, 0, 0.04);
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-sm);
      color: var(--text-tertiary);
      font-size: 0.82rem;
      cursor: pointer;
      transition: all var(--transition-fast);
      width: 280px;
      justify-content: space-between;
    }

    .header-search span {
      flex: 1;
      text-align: left;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .header-search:hover {
      border-color: var(--border-active);
      color: var(--text-secondary);
    }

    .header-search svg {
      width: 14px;
      height: 14px;
      stroke: currentColor;
      fill: none;
    }

    .header-search kbd {
      padding: 1px 5px;
      background: rgba(0, 0, 0, 0.06);
      border-radius: 3px;
      font-size: 0.72rem;
      font-family: inherit;
      color: var(--text-tertiary);
      margin-left: 12px;
    }

    .avatar-btn {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: var(--accent-gradient);
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.78rem;
      font-weight: 600;
      color: white;
      transition: opacity var(--transition-fast);
    }

    .avatar-btn:hover {
      opacity: 0.85;
    }

    /* ==============================
       ASSET CARD
       ============================== */
    .asset-card {
      background: var(--bg-card);
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-lg);
      overflow: hidden;
      transition: all var(--transition-normal);
      cursor: pointer;
    }

    .asset-card:hover {
      border-color: var(--border-active);
      box-shadow: var(--shadow-hover);
      transform: translateY(-2px);
    }

    .asset-card-image {
      width: 100%;
      aspect-ratio: 4 / 3;
      object-fit: cover;
      transition: transform var(--transition-slow);
    }

    .asset-card:hover .asset-card-image {
      transform: scale(1.03);
    }

    .asset-card-image-wrap {
      overflow: hidden;
      position: relative;
    }

    .asset-card-status {
      position: absolute;
      top: 12px;
      left: 12px;
      padding: 3px 10px;
      font-size: 0.7rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      border-radius: var(--radius-sm);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
    }

    /* Dynamic Sales Mechanism Badge styling */
    .asset-card-mechanism {
      position: absolute;
      top: 12px;
      left: 12px;
      padding: 4px 10px;
      font-size: 0.65rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      border-radius: var(--radius-md);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      z-index: 2;
    }

    .asset-card-mechanism.light-badge {
      background: rgba(0, 0, 0, 0.35);
      color: #fff;
      border: 1px solid rgba(255, 255, 255, 0.2);
    }

    .asset-card-mechanism.dark-badge {
      background: rgba(255, 255, 255, 0.1);
      color: #fff;
      border: 1px solid rgba(255, 255, 255, 0.2);
    }

    .asset-card-extra {
      position: absolute;
      bottom: 12px;
      left: 12px;
      padding: 3px 8px;
      font-size: 0.7rem;
      font-weight: 500;
      color: #fff;
      background: rgba(0, 0, 0, 0.6);
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
      border-radius: var(--radius-sm);
      border: 1px solid rgba(255, 255, 255, 0.2);
    }

    .asset-card-body {
      padding: 16px;
    }

    .asset-card-category {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 0.72rem;
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--text-accent);
      margin-bottom: 8px;
    }

    .asset-card-price-inline {
      font-size: 0.72rem;
      font-weight: 600;
      color: var(--text-primary);
      text-transform: none;
      letter-spacing: 0;
    }

    .asset-card-title {
      font-size: 0.95rem;
      font-weight: 600;
      color: var(--text-primary);
      margin-bottom: 12px;
      letter-spacing: -0.01em;
      line-height: 1.35;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      min-height: 2.7em;
    }

    .asset-card-meta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-top: 12px;
      border-top: 1px solid var(--border-subtle);
    }

    .asset-card-meta-left {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 0.78rem;
      color: var(--text-secondary);
    }

    .operator-dot {
      width: 18px;
      height: 18px;
      border-radius: 4px;
      background: var(--bg-tertiary);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.6rem;
      font-weight: 700;
      color: var(--text-accent);
    }

    .asset-card-time {
      font-size: 0.75rem;
      color: var(--text-tertiary);
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .asset-card-time svg {
      width: 12px;
      height: 12px;
      stroke: currentColor;
      fill: none;
    }

    /* ==============================
       CLOSING SOON
       ============================== */
    .closing-soon {
      background: var(--bg-secondary);
      border-top: 1px solid var(--border-subtle);
      border-bottom: 1px solid var(--border-subtle);
    }

    .closing-card {
      background: var(--bg-card);
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-md);
      padding: 16px;
      display: flex;
      gap: 14px;
      align-items: center;
      transition: all var(--transition-normal);
      cursor: pointer;
    }

    .closing-card:hover {
      border-color: rgba(248, 113, 113, 0.25);
      box-shadow: 0 2px 12px rgba(248, 113, 113, 0.06);
    }

    .closing-card-thumb {
      width: 140px;
      aspect-ratio: 4 / 3;
      border-radius: var(--radius-sm);
      object-fit: cover;
      flex-shrink: 0;
    }

    .closing-card-info {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .closing-card-title {
      font-size: 1rem;
      font-weight: 600;
      color: var(--text-primary);
      margin-bottom: 6px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .closing-card-operator {
      font-size: 0.75rem;
      color: var(--text-secondary);
      margin-bottom: 8px;
    }

    .closing-card-countdown {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 3px 8px;
      background: rgba(220, 38, 38, 0.06);
      border: 1px solid rgba(220, 38, 38, 0.12);
      border-radius: var(--radius-sm);
      font-size: 0.72rem;
      font-weight: 600;
      color: var(--status-urgent);
    }

    .closing-card-countdown .blink {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: var(--status-urgent);
      animation: pulse 1.2s ease-in-out infinite;
    }

    /* ==============================
       FEATURED MARKETS
       ============================== */
    .market-card {
      background: var(--bg-card);
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-lg);
      padding: 24px;
      overflow: hidden;
      transition: all var(--transition-normal);
      cursor: pointer;
    }

    .market-card-banner {
      height: 6px;
      border-radius: var(--radius-lg) var(--radius-lg) 0 0;
      margin: -24px -24px 18px -24px;
    }

    .market-card:hover {
      border-color: var(--border-active);
      box-shadow: var(--shadow-hover);
      transform: translateY(-2px);
    }

    .market-card-header {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-bottom: 18px;
    }

    .market-logo {
      width: 44px;
      height: 44px;
      border-radius: var(--radius-md);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.1rem;
      font-weight: 700;
      color: white;
      flex-shrink: 0;
    }

    .market-name {
      font-size: 1rem;
      font-weight: 600;
      color: var(--text-primary);
      line-height: 1.3;
    }

    .market-subtitle {
      font-size: 0.78rem;
      color: var(--text-secondary);
    }

    .market-categories {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-bottom: 18px;
    }

    .market-category-tag {
      padding: 3px 10px;
      font-size: 0.72rem;
      font-weight: 500;
      color: var(--text-secondary);
      background: rgba(0, 0, 0, 0.04);
      border-radius: var(--radius-sm);
    }

    .market-stats {
      display: flex;
      gap: 20px;
      padding-top: 16px;
      border-top: 1px solid var(--border-subtle);
    }

    .market-stat {
      font-size: 0.75rem;
      color: var(--text-tertiary);
    }

    .market-stat strong {
      color: var(--text-primary);
      font-weight: 600;
      margin-right: 3px;
    }

    /* ==============================
       FOOTER
       ============================== */
    .footer {
      padding: 64px 0 40px;
      border-top: 1px solid var(--border-subtle);
    }

    .footer-grid {
      display: grid; /* M-xx */
      grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
      gap: 48px;
      margin-bottom: 48px;
    }

    .footer-brand {
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    .footer-brand p {
      font-size: 0.85rem;
      color: var(--text-tertiary);
      max-width: 280px;
      line-height: 1.6;
    }

    .footer-heading {
      font-size: 0.78rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--text-secondary);
      margin-bottom: 16px;
    }

    .footer-links {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .footer-links a {
      font-size: 0.85rem;
      color: var(--text-tertiary);
      transition: color var(--transition-fast);
    }

    .footer-links a:hover {
      color: var(--text-primary);
    }

    .footer-bottom {
      padding-top: 24px;
      border-top: 1px solid var(--border-subtle);
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .footer-bottom p {
      font-size: 0.78rem;
      color: var(--text-tertiary);
    }

    /* ==============================
       NOUEN HEADER
       ============================== */
    /* ── Nouen Breadcrumb Bar ── */
    .nouen-breadcrumb-bar {
      width: 100%;
      background: var(--accent-primary);
      position: fixed;
      top: 0;
      left: 0;
      z-index: 1002; /* acima do header (1000) */
      /* global-intencional: env(safe-area-inset-top) = 0 no desktop.
         Protege o conteúdo do link da safe area do iOS (DT-V7.7-02). */
      padding-top: env(safe-area-inset-top);
    }

    .nouen-breadcrumb-bar__inner {
      max-width: var(--max-width);
      margin: 0 auto;
      padding: 0 var(--container-padding);
      height: 26px;
      display: flex;
      align-items: center;
    }

    .nouen-breadcrumb-bar__link {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-family: var(--font-body);
      font-size: 0.62rem;
      font-weight: 600;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, 0.9);
      text-decoration: none;
      transition: color 0.2s ease;
    }

    .nouen-breadcrumb-bar__link:hover {
      color: #fff;
    }

    .nouen-breadcrumb-bar__link .material-symbols-outlined {
      font-size: 0.75rem;
      line-height: 1;
    }

    /* Quando a barra está visível, empurra o header para baixo e o conteúdo da página */
    body.with-breadcrumb {
      /* global-intencional: env(safe-area-inset-top) = 0 no desktop.
         Compensa a altura extra da breadcrumb bar após safe area padding (DT-V7.7-02). */
      padding-top: calc(26px + env(safe-area-inset-top));
    }

    body.with-breadcrumb .nouen-header {
      top: 26px;
    }

    /* Oculta a faixa de acento do header quando a breadcrumb bar está visível —
       a barra teal já cumpre o papel de elemento de topo */
    body.with-breadcrumb .nouen-header::before {
      display: none;
    }

    .nouen-header {

      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 64px;
      background: rgba(255, 255, 255, 0.98);
      backdrop-filter: blur(10px);
      z-index: 1000;
      border-bottom: none;
    }

    /* Faixa de acento superior do header */
    .nouen-header::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 3px;
      background: #B56576;
      z-index: 1001;
    }

    /* Variante de mercado: usa a cor de acento do operador */
    .nouen-header--market::before {
      background: var(--market-accent, var(--accent-primary));
    }

    .nouen-header-inner {
      max-width: var(--max-width);
      margin: 0 auto;
      padding: 0 var(--container-padding);
      height: 100%;
      display: grid;
      grid-template-columns: auto auto 1fr;
      align-items: center;
      gap: 24px;
    }

    .nouen-header-logo {
      display: flex;
      justify-content: flex-start;
      text-decoration: none;
    }

    .nouen-header-logo-img {
      height: 24px;
      width: auto;
      display: block;
    }

    .nouen-header-nav {
      display: flex;
      gap: 24px;
      justify-content: flex-start;
      align-items: center;
      margin-left: 32px;
    }

    .nouen-nav-link {
      color: var(--text-muted);
      text-decoration: none;
      font-family: var(--font-body);
      font-size: 0.70rem;
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 0.02em;
      position: relative;
      padding: 4px 0;
      transition: color 0.2s ease;
    }

    .nouen-nav-link:hover {
      color: var(--text-primary);
    }

    /* Underline Hover Effect */
    .nouen-nav-link::after {
      content: '';
      position: absolute;
      bottom: 0px;
      left: 50%;
      transform: translateX(-50%);
      width: 0;
      height: 2px;
      background-color: var(--text-primary);
      transition: width 0.3s ease;
    }

    .nouen-nav-link:hover::after,
    .nouen-nav-link.active::after {
      width: 100%;
    }

    .nouen-nav-link.active {
      color: var(--text-primary);
      font-weight: 700;
    }

    .nouen-header-actions {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      gap: 16px;
    }

    /* ── Seletor de Idioma PT | EN ── V8.17 */
    .nouen-home-lang-selector {
      display: flex;
      align-items: center;
      gap: 4px;
      flex-shrink: 0;
    }

    .nouen-home-lang-selector__btn {
      background: none;
      border: none;
      cursor: pointer;
      font-family: var(--font-body);
      font-size: 0.70rem;
      font-weight: 500;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--text-secondary);
      padding: 4px 6px;
      border-radius: 3px;
      transition: color 0.2s ease, background 0.2s ease;
      line-height: 1;
    }

    .nouen-home-lang-selector__btn:hover {
      color: var(--text-primary);
      background: rgba(9, 147, 165, 0.06);
    }

    .nouen-home-lang-selector__btn--active {
      color: var(--accent-primary);
      font-weight: 700;
    }

    .nouen-home-lang-selector__divider {
      color: var(--border-subtle, rgba(0,0,0,0.15));
      font-size: 0.65rem;
      line-height: 1;
      user-select: none;
    }

    /* Mobile drawer — centralizado com separador visual */
    .nouen-home-lang-selector--mobile {
      display: flex;
      justify-content: center;
      padding: 16px 0 8px;
      border-top: 1px solid var(--border-subtle, rgba(0,0,0,0.08));
      margin-top: 8px;
    }

    .nouen-home-lang-selector--mobile .nouen-home-lang-selector__btn {
      font-size: 0.80rem;
      padding: 8px 16px;
    }

    /* ── Sticky Search Wrapper no Header ── */
    .nouen-home-header__search-wrapper {
      width: 0;
      opacity: 0;
      pointer-events: none;
      transform: translateX(10px);
      transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
      overflow: hidden;
      display: flex;
      align-items: center;
    }

    .nouen-home-header--scrolled .nouen-home-header__search-wrapper {
      width: 280px; /* Igual ao max-width do market-header-search */
      opacity: 1;
      pointer-events: all;
      transform: translateX(0);
      overflow: visible;
    }

    .nouen-connect-btn {
      background: var(--text-primary);
      color: #ffffff;
      font-family: var(--font-body);
      font-size: 0.70rem;
      font-weight: 500;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      padding: 8px 16px;
      border-radius: var(--radius-sm);
      text-decoration: none;
      border: 1px solid var(--text-primary);
      transition: all 0.3s ease;
    }

    .nouen-connect-btn:hover {
      background: var(--accent-primary);
      border-color: var(--accent-primary);
      color: #ffffff;
    }

    .nouen-dropdown-item {
      transition: background 0.15s ease, color 0.15s ease;
    }

    .nouen-dropdown-item:hover {
      background: var(--bg-secondary);
    }

    /* Market variant: hover usa a cor do Operador */
    .market-connect-btn:hover {
      background: var(--color-accent, var(--accent-primary));
      border-color: var(--color-accent, var(--accent-primary));
      color: #ffffff;
    }

    /* Network variant: ghost button por padrão */
    .login-network-header-btn {
      background: transparent !important;
      border-color: var(--accent-primary) !important;
      color: var(--accent-primary) !important;
    }
    .login-network-header-btn:hover {
      background: var(--accent-primary) !important;
      border-color: var(--accent-primary) !important;
      color: #ffffff !important;
      box-shadow: 0 0 12px color-mix(in srgb, var(--accent-primary) 30%, transparent) !important;
    }

    /* ── Header — Mobile (≤ 767px) ──────────────────────────────── */
    @media (max-width: 767px) {
      /* Safe area — notch / Dynamic Island / barra de status iOS */
      .nouen-header {
        padding-top: env(safe-area-inset-top);
        height: calc(54px + env(safe-area-inset-top)); /* V7.5: 64→54px — redução assimétrica (0px acima, 10px abaixo dos ícones) */
        background: #ffffff; /* Opacidade 100% — rgba(0.98) do desktop causava mismatch de cor na safe area */
      } /* M-xx */

      /* Layout mobile: flex com logo à esquerda, hamburguer à direita */
      .nouen-header-inner {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        height: 100%; /* garante que align-items:center centraliza em relação à altura total do header (54px), não à altura do conteúdo */
        padding: 0 16px;
        position: relative;
      } /* M-xx */

      /* Logo: flex para garantir alinhamento vertical correto dentro do header flex */
      .nouen-header-logo {
        display: flex;
        align-items: center;
      } /* M-xx */

      /* Ajuste óptico: o ícone do hamburguer tem peso visual ligeiramente mais baixo
         que o logotipo — 3px compensa a diferença perceptual sem alterar o layout */
      .nouen-header-logo-img {
        margin-top: 4px;
      } /* M-xx */

      /* Touch target do botão "Início" — 36px (exceção: header 64px é a zona de toque efetiva) */
      .nouen-connect-btn {
        min-height: 36px;
        display: inline-flex;
        align-items: center; /* M-xx */
      } /* M-xx */

      /* Na rota /adesao o botão "Aderir" é redundante — oculto só em mobile */
      .nouen-aderir-btn--adesao {
        display: none !important;
      } /* M-xx */

      /* Nome do mercado: truncar com ellipsis — evita quebra em 3 linhas */
      .nouen-header-logo {
        min-width: 0; /* permite que a célula do grid restrinja o filho */
      } /* M-xx */
      .nouen-header-logo > span {
        overflow: hidden; /* M-xx */
        text-overflow: ellipsis; /* M-xx */
        white-space: nowrap;
      } /* M-xx */
    }

    /* ==============================
       RESPONSIVE
       ============================== */

    /* — Tablet (≤ 1024px) — */
    @media (max-width: 1024px) {
      .grid-4 {
        grid-template-columns: repeat(2, 1fr);
      } /* M-xx */

      .grid-3 {
        grid-template-columns: repeat(2, 1fr);
      } /* M-xx */

      .grid-6 {
        grid-template-columns: repeat(3, 1fr);
      } /* M-xx */

      .footer-grid {
        grid-template-columns: 1fr 1fr; /* M-xx */
        gap: 32px;
      } /* M-xx */

      .header-search {
        width: 220px;
      } /* M-xx */

      .closing-card-thumb {
        width: 110px;
        height: 80px;
      } /* M-xx */

      /* Event Page: 2-col → stack */
      .event-layout {
        grid-template-columns: 1fr !important;
      } /* M-xx */

      /* CU Page: 2-col → stack */
      .cu-grid {
        grid-template-columns: 1fr !important;
      } /* M-xx */

      .negotiation-wrapper {
        position: static !important;
      } /* M-xx */
    }

    /* — Mobile (≤ 768px) — */
    @media (max-width: 768px) {

      .container {
        padding: 0 16px;
      } /* M-xx */

      .section {
        padding: 48px 0;
      } /* M-xx */

      /* Header */
      .nav {
        display: none;
      } /* M-xx */

      .header-search {
        width: auto;
        min-width: 0;
      } /* M-xx */

      .header-search span {
        display: none;
      } /* M-xx */

      .header-search kbd {
        display: none;
      } /* M-xx */

      .header-left {
        gap: 16px;
      } /* M-xx */

      /* Hero */
      .hero h1 {
        font-size: 1.8rem;
      } /* M-xx */

      .hero-subtitle {
        font-size: 0.95rem !important;
      } /* M-xx */

      .hero-tags {
        flex-wrap: wrap;
        gap: 8px; /* M-xx */
        justify-content: center !important;
      } /* M-xx */

      .hero-search {
        flex-direction: column; /* M-xx */
      } /* M-xx */

      /* Hero label pill */
      .hero-label {
        font-size: 0.72rem !important;
        padding: 4px 10px !important;
        max-width: 100%;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
      } /* M-xx */

      .hero-label::-webkit-scrollbar {
        display: none;
      } /* M-xx */

      /* Grids */
      .grid-4,
      .grid-3,
      .grid-2 {
        grid-template-columns: 1fr;
      } /* M-xx */

      .grid-6 {
        grid-template-columns: repeat(2, 1fr);
      } /* M-xx */

      /* Closing Cards */
      .closing-card {
        flex-direction: column; /* M-xx */
        align-items: flex-start;
      } /* M-xx */

      .closing-card-thumb {
        width: 100%; /* M-xx */
        height: 160px;
        border-radius: var(--radius-sm);
      } /* M-xx */

      /* Footer */
      .footer-grid {
        grid-template-columns: 1fr;
      } /* M-xx */

      .footer-bottom {
        flex-direction: column; /* M-xx */
        gap: 8px; /* M-xx */
        text-align: center;
      } /* M-xx */

      /* Explore / Filter Layout */
      .explore-layout {
        grid-template-columns: 1fr !important;
      } /* M-xx */

      .filter-sidebar {
        position: static;
      } /* M-xx */

      .results-header {
        flex-direction: column; /* M-xx */
        align-items: flex-start;
        gap: 12px;
      } /* M-xx */

      /* Search bar */
      .search-bar {
        height: 48px;
      } /* M-xx */

      /* Section header */
      .section-header {
        flex-direction: column; /* M-xx */
        gap: 8px; /* M-xx */
        align-items: flex-start;
      } /* M-xx */

      /* Event Page specifics (inline styles override) */
      .event-layout {
        grid-template-columns: 1fr !important;
      } /* M-xx */

      .event-list-item {
        grid-template-columns: 80px 1fr !important;
        gap: 12px !important;
      } /* M-xx */

      .event-list-item>*:nth-child(n+3) {
        display: none;
      } /* M-xx */

      .event-sidebar {
        position: static !important;
      } /* M-xx */

      /* CU Page specifics */
      .cu-grid {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
      } /* M-xx */

      .cu-title {
        font-size: 1.5rem !important;
      } /* M-xx */

      .negotiation-wrapper {
        position: static !important;
      } /* M-xx */

      .gallery-thumbs {
        gap: 6px;
        padding: 8px; /* M-xx */
      } /* M-xx */

      .gallery-thumb {
        width: 56px !important;
        height: 42px !important;
      } /* M-xx */

      /* Demo controls */
      .demo-controls {
        bottom: 10px !important;
        right: 10px !important;
        left: 10px !important;
        font-size: 11px !important;
      } /* M-xx */
    }

    /* — Small phone (≤ 480px) — */
    @media (max-width: 480px) {
      .hero h1 {
        font-size: 1.4rem;
      } /* M-xx */

      .grid-6 {
        grid-template-columns: 1fr;
      } /* M-xx */

      .market-stats {
        flex-wrap: wrap;
        gap: 12px;
      } /* M-xx */

      .asset-card-body {
        padding: 12px;
      } /* M-xx */

      .asset-card-title {
        font-size: 0.88rem;
      } /* M-xx */

      .header-right {
        gap: 8px; /* M-xx */
      } /* M-xx */
    }

    /* ==============================
       ANIMATIONS
       ============================== */
    .fade-in {
      opacity: 0;
      transform: translateY(16px);
      transition: opacity 0.5s ease, transform 0.5s ease;
    }

    .fade-in.visible {
      opacity: 1;
      transform: translateY(0);
    }

    /* ==============================
   EMPTY STATES
   ============================== */
    .empty-state {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 48px 24px;
      border: 1px dashed var(--border-subtle);
      border-radius: var(--radius-lg);
      background: rgba(0, 0, 0, 0.02);
      height: 100%;
      width: 100%;
      min-height: 200px;
    }

    .empty-state svg {
      width: 48px;
      height: 48px;
      color: var(--text-tertiary);
      margin-bottom: 16px;
      stroke-width: 1.5;
    }

    .empty-state h4 {
      font-size: 1.1rem;
      font-weight: 600;
      color: var(--text-primary);
      margin-bottom: 8px;
    }

    .empty-state p {
      font-size: 0.9rem;
      color: var(--text-secondary);
      max-width: 320px;
      line-height: 1.5;
      margin: 0 auto;
    }

    /* ==============================
   EXPLORE PAGE & SEARCH
   ============================== */
    .search-bar {
      display: flex;
      align-items: center;
      background: var(--bg-card);
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-lg);
      padding: 0 16px;
      height: 52px;
      box-shadow: var(--shadow-card);
      transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
      margin-bottom: 24px;
    }

    .search-bar:focus-within {
      border-color: var(--accent-primary);
      box-shadow: 0 0 0 3px rgba(74, 108, 247, 0.1);
    }

    .search-bar input {
      flex: 1;
      border: none;
      background: transparent;
      font-size: 1rem;
      color: var(--text-primary);
      outline: none;
      margin-left: 12px;
    }

    .search-bar input::placeholder {
      color: var(--text-tertiary);
    }

    .explore-layout {
      display: grid; /* M-xx */
      grid-template-columns: 280px 1fr;
      gap: 32px;
      align-items: start;
    }

    @media (max-width: 900px) {
      .explore-layout {
        grid-template-columns: 1fr;
      } /* M-xx */
    }

    .filter-sidebar {
      background: var(--bg-card);
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-lg);
      padding: 24px;
      position: sticky;
      top: 100px;
    }

    .filter-group {
      margin-bottom: 24px;
      padding-bottom: 24px;
      border-bottom: 1px solid var(--border-subtle);
    }

    .filter-group:last-child {
      margin-bottom: 0;
      padding-bottom: 0;
      border-bottom: none;
    }

    .filter-group-title {
      font-size: 0.95rem;
      font-weight: 600;
      color: var(--text-primary);
      margin-bottom: 16px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .filter-group-title .badge {
      background: var(--bg-secondary);
      color: var(--text-secondary);
      font-size: 0.75rem;
      padding: 2px 6px;
      border-radius: 4px;
      font-weight: 500;
    }

    .filter-checkbox {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 12px;
      cursor: pointer;
      font-size: 0.9rem;
      color: var(--text-secondary);
    }

    .filter-checkbox:last-child {
      margin-bottom: 0;
    }

    .filter-checkbox input[type="checkbox"] {
      width: 16px;
      height: 16px;
      border-radius: 4px;
      border: 1px solid var(--border-active);
      accent-color: var(--accent-primary);
      cursor: pointer;
    }

    .results-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 24px;
    }

    .results-count {
      font-size: 1.1rem;
      font-weight: 600;
      color: var(--text-primary);
    }

    .results-sort {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 0.9rem;
      color: var(--text-secondary);
    }

    .results-sort select {
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      padding: 8px 32px 8px 12px;
      border-radius: var(--radius-sm);
      border: 1px solid var(--border-active);
      background: var(--bg-card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 10px center;
      background-size: 14px;
      color: var(--text-primary);
      font-size: 0.9rem;
      outline: none;
      cursor: pointer;
    }

    /* Local Search (Market Page) */
    .local-search-bar {
      display: flex;
      gap: 16px;
      align-items: center;
      margin-bottom: 32px;
      background: var(--bg-card);
      padding: 16px;
      border-radius: var(--radius-lg);
      border: 1px solid var(--border-subtle);
      box-shadow: var(--shadow-card);
    }

    .local-search-input {
      flex: 1;
      display: flex;
      align-items: center;
      background: var(--bg-primary);
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-md);
      padding: 0 16px;
      height: 44px;
    }

    .local-search-input input {
      flex: 1;
      border: none;
      background: transparent;
      font-size: 0.95rem;
      color: var(--text-primary);
      outline: none;
      margin-left: 10px;
    }

    .filter-chips {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }

    .filter-chip {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 6px 12px;
      background: var(--bg-primary);
      border: 1px solid var(--border-subtle);
      border-radius: 20px;
      font-size: 0.85rem;
      color: var(--text-secondary);
      cursor: pointer;
      transition: all var(--transition-fast);
    }

    .filter-chip:hover {
      background: var(--bg-secondary);
      border-color: var(--border-active);
    }

    .filter-chip.active {
      background: rgba(74, 108, 247, 0.1);
      color: var(--accent-primary);
      border-color: var(--accent-primary);
    }

    /* ==============================
   NOUEN MAPA DA REDE / BENTO GRID
   ============================== */
    .nouen-bento-grid {
      display: grid; /* M-xx */
      grid-template-columns: repeat(1, 1fr);
      gap: 32px;
      margin-bottom: 80px;
    }

    @media (min-width: 992px) {
      .nouen-bento-grid {
        grid-template-columns: repeat(3, 1fr);
      } /* M-xx */
    }

    .nouen-bento-span-2 {
      grid-column: span 1;
    }

    @media (min-width: 992px) {
      .nouen-bento-span-2 {
        grid-column: span 2;
      } /* M-xx */
    }

    /* ==============================
   NOUEN ASSET CARD SYSTEM
   ============================== */
    .nouen-asset-card {
      background: var(--bg-card);
      border: none;
      /* Removed the subtle border that made them look boxed */
      border-radius: var(--radius-lg);
      color: var(--text-primary);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      position: relative;
      box-shadow: var(--shadow-card);
      transition: all var(--transition-normal);
      /* Essential fix for Safari hover subpixel boundary bleeding */
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
      transform: translateZ(0);
    }

    .nouen-asset-card:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-hover);
    }

    .nouen-card-image-wrap {
      position: relative;
      overflow: hidden;
      background: transparent;
    }

    .nouen-card-image-wrap.standard-ratio {
      aspect-ratio: 1/1;
    }

    @media (min-width: 768px) {
      .nouen-card-image-wrap.standard-ratio {
        aspect-ratio: 4/3; /* M-xx */
      } /* M-xx */
    }

    .nouen-card-image-wrap.hero-ratio {
      aspect-ratio: 16/7;
    }

    .nouen-card-image {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform var(--transition-slow);
    }

    .nouen-asset-card:hover .nouen-card-image {
      transform: scale(1.03);
    }

    .nouen-glass-badge {
      position: absolute;
      top: 16px;
      right: 16px;
      left: auto;
      z-index: 2;
      background: rgba(255, 255, 255, 0.85);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid rgba(0, 0, 0, 0.05);
      padding: 6px 12px;
      border-radius: 40px;
      display: flex;
      align-items: center;
      gap: 8px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    }

    .nouen-glass-badge.hero-badge {
      top: 20px;
      right: 20px;
    }

    .nouen-glass-badge .badge-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
    }

    .nouen-glass-badge .badge-text {
      font-size: 0.65rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--text-primary);
    }

    .nouen-card-body {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 24px;
    }

    .nouen-card-body.hero-padding {
      padding: 32px;
    }

    /* Meta Data row inside top block */
    .nouen-meta-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16px;
    }

    .nouen-meta-row.hero-meta {
      margin-bottom: 20px;
    }

    .nouen-meta-left {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .nouen-meta-right {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .nouen-meta-ref {
      font-size: 0.65rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--text-tertiary);
    }

    .nouen-meta-cat {
      font-size: 0.65rem;
      font-weight: 800;
      text-transform: uppercase;
      color: var(--text-accent);
    }

    .nouen-card-title {
      font-family: var(--font-headline);
      font-size: 1.3rem;
      font-weight: 800;
      letter-spacing: -0.01em;
      color: var(--text-primary);
      margin-bottom: 12px;
      line-height: 1.2;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .nouen-card-title.hero-title {
      font-size: 2rem;
      line-height: 1.1;
      letter-spacing: -0.02em;
      -webkit-line-clamp: 2;
      line-clamp: 2;
    }

    .nouen-card-desc {
      font-size: 0.8rem;
      color: var(--text-secondary);
      line-height: 1.6;
      margin-bottom: 24px;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .nouen-card-desc.hero-desc {
      font-size: 0.9rem;
      margin-bottom: 32px;
    }

    /* Operator Info */
    .nouen-operator-block {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .nouen-operator-block.small {
      gap: 6px;
      margin-top: 4px;
    }

    .nouen-operator-shield {
      width: 28px;
      height: 28px;
      border-radius: var(--radius-sm);
      background: var(--bg-secondary);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .nouen-operator-block.small .nouen-operator-shield {
      width: auto;
      height: auto;
      background: transparent;
    }

    .nouen-operator-shield span {
      font-size: 16px;
      color: var(--text-secondary);
    }

    .nouen-operator-block.small .nouen-operator-shield span {
      font-size: 14px;
    }

    .nouen-operator-label {
      font-size: 0.75rem;
      color: var(--text-secondary);
      font-family: var(--font-label);
    }

    .nouen-operator-label strong {
      color: var(--text-primary);
      font-weight: 700;
    }

    /* Hero Inner Grid */
    .nouen-hero-grid-body {
      display: grid; /* M-xx */
      grid-template-columns: 1.15fr 0.85fr;
      /* Shifted from 1fr 1fr to give the title more breathing room laterally */
      gap: 32px;
      align-items: stretch;
    }

    .nouen-hero-col {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .nouen-hero-col.right-col {
      align-items: flex-end;
    }

    /* Footers */
    .nouen-card-footer {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      padding-top: 20px;
      border-top: 1px solid var(--border-subtle);
      margin-top: auto;
    }

    .nouen-price-block {
      margin-bottom: 0;
    }

    .nouen-price-block.hero-price {
      text-align: right;
      margin-bottom: 32px;
    }

    .nouen-price-block.left-aligned {
      text-align: left;
    }

    .nouen-price-label {
      font-size: 0.65rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--text-tertiary);
      display: block;
      margin-bottom: 4px;
    }

    .nouen-price-block.hero-price .nouen-price-label {
      font-size: 0.75rem;
    }

    .nouen-price-value {
      font-family: var(--font-headline);
      font-size: 1.25rem;
      font-weight: 800;
      color: var(--text-primary);
      line-height: 1;
    }

    .nouen-price-block.hero-price .nouen-price-value {
      font-size: 2.8rem;
    }

    /* Actions */
    .nouen-btn-action {
      background: var(--text-primary);
      color: #fff;
      font-size: 0.85rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      border: none;
      border-radius: var(--radius-md);
      cursor: pointer;
      transition: all var(--transition-fast);
      padding: 16px 32px;
    }

    .nouen-btn-action.full-width {
      width: 100%;
    }

    .nouen-btn-action:hover {
      background: var(--accent-primary);
      /* Uses main platform color */
      box-shadow: 0 4px 12px rgba(9, 147, 165, 0.2);
      color: #fff; /* prevent browser from resetting inherited text color */
    }

    .nouen-btn-detalhes {
      background: var(--bg-secondary);
      color: var(--text-primary);
      border: none;
      border-radius: var(--radius-sm);
      font-size: 0.65rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      padding: 12px 16px;
      cursor: pointer;
      transition: background var(--transition-fast);
    }

    .nouen-btn-detalhes:hover {
      background: var(--bg-tertiary);
    }

    .nouen-icon-btn {
      background: none;
      border: none;
      cursor: pointer;
      color: var(--text-tertiary);
      transition: color var(--transition-fast);
    }

    .nouen-icon-btn:hover {
      color: var(--text-primary);
    }

    .nouen-icon-btn .material-symbols-outlined {
      font-size: 20px;
    }

    /* ==============================
   NOUEN HEADER & FILTERS
   ============================== */
    .nouen-header-search {
      position: relative;
      max-width: 320px;
      width: 100%;
    }

    .nouen-header-search input {
      width: 100%;
      padding: 8px 16px 8px 36px;
      background: var(--bg-primary);
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-md);
      color: var(--text-primary);
      font-family: var(--font-body);
      font-size: 0.85rem;
      outline: none;
      transition: all var(--transition-fast);
    }

    .nouen-header-search input:focus {
      border-color: var(--accent-primary);
      box-shadow: 0 0 0 3px rgba(74, 108, 247, 0.1);
    }

    .nouen-header-search .material-symbols-outlined {
      position: absolute;
      left: 10px;
      top: 50%;
      transform: translateY(-50%);
      color: var(--text-tertiary);
      font-size: 18px;
      pointer-events: none;
    }

    .action-icon-btn {
      background: transparent;
      border: none;
      color: var(--text-secondary);
      cursor: pointer;
      padding: 6px;
      border-radius: var(--radius-sm);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all var(--transition-fast);
    }

    .action-icon-btn:hover {
      background-color: rgba(0, 0, 0, 0.05);
      color: var(--text-primary);
    }

    .filter-toggle-group {
      display: flex;
      background: var(--bg-secondary);
      padding: 4px;
      border-radius: var(--radius-lg);
      border: 1px solid var(--border-subtle);
      flex-wrap: wrap;
      gap: 4px;
    }

    .filter-toggle-btn {
      padding: 8px 24px;
      font-size: 0.85rem;
      font-weight: 600;
      font-family: var(--font-body);
      border: none;
      border-radius: var(--radius-md);
      cursor: pointer;
      transition: all var(--transition-fast);
      color: var(--text-secondary);
      background: transparent;
    }

    .filter-toggle-btn.active {
      background: var(--bg-card);
      color: var(--text-accent);
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
    }

    .filter-toggle-btn:hover:not(.active) {
      background: rgba(0, 0, 0, 0.03);
      color: var(--text-primary);
    }

    /* Horizontal Card Extension */
    .nouen-asset-card.nouen-card-horizontal {
      flex-direction: column;
      height: 100%;
    }

    @media (min-width: 768px) {
      .nouen-asset-card.nouen-card-horizontal {
        flex-direction: row;
      } /* M-xx */

      .nouen-asset-card.nouen-card-horizontal .nouen-card-image-wrap,
      .nouen-asset-card.nouen-card-horizontal .nouen-card-body {
        flex: 1;
        width: 50%;
      } /* M-xx */
    }

    /* ── Network Footer ── */
    .nouen-footer {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 24px;
      gap: 8px;
      border-top: 1px solid var(--border-subtle);
    }

    .nouen-footer__brand {
      font-size: 0.85rem;
      font-weight: 700;
      color: var(--text-secondary);
    }

    .nouen-footer__tagline {
      font-size: 0.78rem;
      color: var(--text-muted);
    }

    /* ── Market Header ── */
    .nouen-market-header {
      display: flex;
      align-items: center;
      padding: 16px 24px;
      background: var(--bg-card);
      border-bottom: 1px solid var(--border-subtle);
    }

    .nouen-market-header__name {
      font-size: 1.1rem;
      font-weight: 700;
      color: var(--text-primary);
    }

    /* ── Market Footer ── */
    .nouen-market-footer {
      display: flex;
      justify-content: center;
      padding: 24px;
      border-top: 1px solid var(--border-subtle);
    }

    .nouen-market-footer__powered-by {
      font-size: 0.78rem;
      color: var(--text-muted);
    }

    /* ── Operator Dashboard ── */
    .nouen-dashboard {
      display: flex;
      min-height: 100vh;
    }

    .nouen-dashboard__sidebar {
      width: 240px;
      background: var(--bg-secondary);
      border-right: 1px solid var(--border-subtle);
      padding: 24px 0;
      flex-shrink: 0;
    }

    .nouen-dashboard__nav {
      display: flex;
      flex-direction: column;
      gap: 8px;
      padding: 0 16px;
    }

    .nouen-dashboard__nav-link {
      display: block;
      padding: 12px 16px;
      color: var(--text-secondary);
      text-decoration: none;
      font-size: 0.85rem;
      border-radius: var(--radius-sm);
    }

    .nouen-dashboard__nav-link:hover {
      background: var(--bg-card-hover);
      color: var(--text-primary);
    }

    .nouen-dashboard__content {
      flex: 1;
      padding: 24px;
    }

    /* ── Select padrão do Dashboard (garante seta nativa + respiro) ── */
    .nouen-select {
      appearance: auto !important;
      -webkit-appearance: auto !important;
      padding-right: 32px !important;
      cursor: pointer;
    }

    /* ── Event Phase 4 ── */
    .nouen-event-container {
      display: flex;
      flex-direction: column;
      min-height: 100vh;
      background-color: var(--bg-primary);
    }

    .nouen-event-layout {
      display: grid; /* M-xx */
      grid-template-columns: minmax(0, 2fr) 400px;
      gap: 12px;
      max-width: 1200px;
      margin: 0 auto;
      align-items: start;
      padding: 24px;
      width: 100%;
    }

    @media (max-width: 992px) {
      .nouen-event-layout {
        grid-template-columns: 1fr;
      } /* M-xx */
    }

    .nouen-event-col-left {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .nouen-event-col-right {
      display: flex;
      flex-direction: column;
      gap: 12px;
      position: sticky;
      top: 80px;
    }

    /* Event Awareness Bar */
    .nouen-event-awareness {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12px 24px;
      background-color: var(--bg-secondary);
      border-bottom: 1px solid var(--border-subtle);
    }

    .nouen-event-awareness__left {
      display: flex;
      align-items: center;
      gap: 16px;
    }

    .nouen-event-awareness__meta {
      display: flex;
      flex-direction: column;
    }

    .nouen-event-awareness__label {
      font-size: 0.7rem;
      color: var(--text-tertiary);
      text-transform: uppercase;
      font-weight: 700;
    }

    .nouen-event-awareness__title {
      font-size: 1rem;
      font-weight: 700;
      color: var(--text-primary);
      margin: 0;
    }

    .nouen-event-awareness__divider {
      width: 1px;
      height: 24px;
      background-color: var(--border-subtle);
    }

    .nouen-event-awareness__progress {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .nouen-event-awareness__progress-indicator {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .nouen-event-awareness__progress-text {
      font-size: 0.7rem;
      font-weight: 700;
      color: var(--text-primary);
    }

    .nouen-event-awareness__progress-bar {
      width: 60px;
      height: 4px;
      background-color: var(--border-subtle);
      border-radius: 2px;
      overflow: hidden;
    }

    .nouen-event-awareness__progress-fill {
      height: 100%;
      background-color: var(--text-primary);
    }

    .nouen-event-awareness__right {
      display: flex;
      align-items: center;
      gap: 16px;
    }

    .nouen-event-awareness__status-box {
      display: flex;
      align-items: center;
      gap: 8px;
      background-color: var(--bg-card);
      padding: 6px 12px;
      border-radius: var(--radius-sm);
      border: 1px solid var(--border-subtle);
    }

    .nouen-event-awareness__status-inline {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 0.8rem;
      font-weight: 700;
      color: var(--text-primary);
      text-transform: uppercase;
    }

    .nouen-event-awareness__status-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background-color: #ef4444;
      box-shadow: 0 0 4px #ef4444;
    }

    .nouen-event-awareness__time {
      font-size: 0.9rem;
      font-family: monospace;
      font-weight: 700;
      color: var(--text-primary);
    }

    .nouen-event-awareness__exit-btn {
      background: transparent;
      border: 1px solid var(--border-subtle);
      color: var(--text-primary);
      padding: 6px 16px;
      border-radius: var(--radius-sm);
      font-size: 0.7rem;
      font-weight: 700;
      cursor: pointer;
    }

    /* Event List Container */
    .nouen-event-list-container {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .nouen-event-list__header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .nouen-event-list__title {
      font-size: 1.05rem;
      font-weight: 700;
      color: var(--text-primary);
      margin: 0;
    }

    .nouen-event-list__filters {
      display: flex;
      gap: 6px;
      background-color: var(--bg-card);
      padding: 4px;
      border-radius: var(--radius-md);
      border: 1px solid var(--border-subtle);
    }

    .nouen-event-list__filter-btn {
      background: transparent;
      border: none;
      border-radius: var(--radius-sm);
      padding: 4px 12px;
      font-size: 0.75rem;
      font-weight: 600;
      color: var(--text-secondary);
      cursor: pointer;
    }

    .nouen-event-list__filter-btn.active {
      background-color: var(--bg-secondary);
      color: var(--text-primary);
    }

    /* Event List Item */
    .nouen-event-item {
      display: flex;
      flex-direction: column;
      background-color: var(--bg-card);
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-md);
      padding: 12px;
      gap: 8px;
      margin-bottom: 8px;
      transition: all var(--transition-fast);
    }

    .nouen-event-item.selected {
      border-color: var(--text-primary);
      background-color: var(--bg-secondary);
    }

    .nouen-event-item__header {
      display: flex;
      justify-content: space-between;
    }

    .nouen-event-item__badges {
      display: flex;
      gap: 8px;
      align-items: center;
    }

    .nouen-event-item__status-text {
      font-size: 0.7rem;
      font-weight: 700;
      text-transform: uppercase;
    }

    .nouen-event-item__status-text.text-primary {
      color: var(--text-primary);
    }

    .nouen-event-item__status-text.text-secondary {
      color: var(--text-secondary);
    }

    .nouen-event-item__mechanism {
      font-size: 0.65rem;
      font-weight: 700;
      padding: 2px 6px;
      border-radius: 4px;
      text-transform: uppercase;
    }

    .nouen-event-item__mechanism.bg-primary-light {
      background-color: rgba(0, 0, 0, 0.05);
    }

    .nouen-event-item__body {
      display: grid; /* M-xx */
      grid-template-columns: 80px 1fr auto;
      gap: 16px;
      align-items: center;
    }

    .nouen-event-item__media {
      width: 80px;
      height: 60px;
      border-radius: var(--radius-sm);
      overflow: hidden;
      background-color: var(--bg-secondary);
    }

    .nouen-event-item__media img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .nouen-event-item__details {
      display: flex;
      flex-direction: column;
    }

    .nouen-event-item__title {
      font-size: 0.85rem;
      font-weight: 600;
      color: var(--text-primary);
      margin: 0;
    }

    .nouen-event-item__meta {
      font-size: 0.75rem;
      color: var(--text-tertiary);
      margin: 0;
    }

    .nouen-event-item__financials {
      text-align: right;
    }

    .nouen-event-item__value {
      font-size: 1rem;
      font-weight: 700;
      color: var(--text-primary);
    }

    .nouen-event-item__label {
      font-size: 0.7rem;
      color: var(--text-secondary);
      text-transform: uppercase;
    }

    .nouen-event-item__label.text-error {
      color: #ef4444;
    }



    /* Operator Video Feed */
    .nouen-video-feed {
      background-color: #000;
      border-radius: var(--radius-lg);
      overflow: hidden;
      border: 1px solid var(--border-subtle);
    }

    .nouen-video-feed__header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 8px 12px;
      background-color: rgba(30, 30, 30, 0.9);
      cursor: pointer;
    }

    .nouen-video-feed__title {
      color: #fff;
      font-size: 0.7rem;
      font-weight: 700;
      text-transform: uppercase;
    }

    .nouen-video-feed__collapse-btn {
      background: transparent;
      border: none;
      color: rgba(255, 255, 255, 0.6);
      font-size: 0.65rem;
      cursor: pointer;
    }

    .nouen-video-feed__content {
      height: 200px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .nouen-video-feed__placeholder {
      color: rgba(255, 255, 255, 0.4);
      font-size: 0.8rem;
    }

    /* Event Feedback List */
    .nouen-event-notifications {
      background-color: var(--bg-card);
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-lg);
      display: flex;
      flex-direction: column;
    }

    .nouen-event-notifications__header {
      padding: 12px 16px;
      border-bottom: 1px solid var(--border-subtle);
      font-weight: 700;
      font-size: 0.7rem;
      text-transform: uppercase;
      color: var(--text-secondary);
    }

    .nouen-event-notifications__item {
      padding: 12px 16px;
      border-bottom: 1px solid var(--border-subtle);
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .nouen-event-notifications__time {
      font-size: 0.65rem;
      color: var(--text-tertiary);
    }

    .nouen-event-notifications__msg {
      font-size: 0.8rem;
      color: var(--text-primary);
    }

    .nouen-event-notifications__item.info {
      border-left: 2px solid #3b82f6;
    }

    .nouen-event-notifications__item.alert {
      border-left: 2px solid #10b981;
    }

    /* ── CU Phase 5 ── */
    .nouen-cu-container {
      min-height: 100vh;
      background-color: var(--bg-surface);
      color: var(--text-primary);
      font-family: var(--font-body);
    }

    .nouen-cu-layout {
      display: flex;
      flex-direction: column;
      gap: 48px;
    }

    @media (min-width: 900px) {
      .nouen-cu-layout {
        flex-direction: row;
      } /* M-xx */
    }

    .nouen-cu-col-main {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 48px;
    }

    .nouen-cu-col-aside {
      width: 100%;
    }

    @media (min-width: 900px) {
      .nouen-cu-col-aside {
        width: 420px;
      } /* M-xx */
    }

    /* Overview */
    .nouen-cu-header {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .nouen-cu-breadcrumb {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 0.65rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--text-tertiary);
    }

    .nouen-cu-breadcrumb a {
      color: var(--text-secondary);
      text-decoration: none;
    }

    .nouen-cu-breadcrumb a:hover {
      color: var(--text-primary);
    }

    .nouen-cu-breadcrumb .separator {
      font-size: 0.65rem;
    }

    .nouen-cu-title-wrapper {
      display: flex;
      align-items: baseline;
      gap: 16px;
    }

    .nouen-cu-title {
      font-size: 2.5rem;
      font-weight: 800;
      letter-spacing: -0.05em;
      color: var(--text-primary);
      margin: 0;
      font-family: var(--font-headline);
    }

    .nouen-cu-mechanism-badge {
      background-color: var(--bg-card);
      color: var(--text-tertiary);
      padding: 2px 8px;
      font-size: 0.55rem;
      font-weight: 900;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      border-radius: 2px;
      border: 1px solid var(--border-subtle);
    }

    /* Sections */
    .nouen-cu-section {
      padding-top: 32px;
      border-top: 1px solid var(--border-subtle);
      display: flex;
      flex-direction: column;
      gap: 24px;
    }

    .nouen-cu-section-title {
      font-size: 1.25rem;
      font-weight: 700;
      color: var(--text-primary);
      font-family: var(--font-headline);
      margin: 0;
    }

    .nouen-cu-description {
      font-size: 0.85rem;
      color: var(--text-secondary);
      line-height: 1.7;
    }

    /* Gallery */
    .nouen-cu-gallery-container {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .nouen-cu-gallery-main {
      width: 100%;
      overflow: hidden;
      background-color: var(--bg-tertiary);
      border: 1px solid var(--border-subtle);
    }

    .nouen-cu-gallery-main img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: all 0.7s ease;
    }

    .nouen-cu-gallery-thumbs {
      display: grid; /* M-xx */
      grid-template-columns: repeat(6, 1fr);
      gap: 12px;
    }

    .nouen-cu-gallery-thumb {
      aspect-ratio: 1/1;
      border: 1px solid var(--border-subtle);
      overflow: hidden;
      cursor: pointer;
      transition: border-color 0.2s;
    }

    .nouen-cu-gallery-thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      filter: grayscale(100%);
      transition: filter 0.2s;
    }

    .nouen-cu-gallery-thumb:hover img,
    .nouen-cu-gallery-thumb.active img {
      filter: grayscale(0%);
    }

    .nouen-cu-gallery-thumb.active {
      border: 2px solid var(--text-primary);
    }

    /* Specs */
    .nouen-cu-specs-grid {
      display: grid; /* M-xx */
      grid-template-columns: 1fr;
      border-top: 1px solid var(--border-subtle);
      border-bottom: 1px solid var(--border-subtle);
    }

    .nouen-cu-spec-row {
      display: grid; /* M-xx */
      grid-template-columns: 1fr 1fr; /* M-xx */
      padding: 16px 0;
      border-bottom: 1px solid var(--border-subtle);
    }

    .nouen-cu-spec-row:last-child {
      border-bottom: none;
    }

    .nouen-cu-spec-label {
      font-size: 0.85rem;
      font-weight: 500;
      color: var(--text-secondary);
    }

    .nouen-cu-spec-value {
      font-size: 0.85rem;
      font-weight: 700;
      color: var(--text-primary);
    }

    /* Docs */
    .nouen-cu-docs-list {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .nouen-cu-doc-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px;
      background-color: var(--bg-card);
      border: 1px solid var(--border-subtle);
      border-radius: 2px;
      cursor: pointer;
      transition: all 0.2s;
    }

    .nouen-cu-doc-item:hover {
      transform: translateY(-2px);
      border-color: var(--cu-accent-color, var(--accent-primary));
      box-shadow: 0 4px 12px color-mix(in srgb, var(--cu-accent-color, var(--accent-primary)) 10%, transparent);
    }

    .nouen-cu-doc-left {
      display: flex;
      align-items: center;
      gap: 16px;
    }

    .nouen-cu-doc-title {
      font-size: 0.85rem;
      font-weight: 700;
      color: var(--text-primary);
    }

    /* Action Card */
    .nouen-cu-action-card {
      position: sticky;
      top: 96px;
      background-color: var(--bg-card);
      border: 1px solid var(--border-subtle);
      border-radius: 2px;
      overflow: hidden;
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.04);
    }

    .nouen-cu-action-tabs {
      display: flex;
      border-bottom: 1px solid var(--border-subtle);
    }

    .nouen-cu-action-tab {
      flex: 1;
      padding: 16px 0;
      font-size: 0.65rem;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      background: transparent;
      border: none;
      cursor: pointer;
    }

    .nouen-cu-action-tab.active {
      color: var(--text-primary);
      border-bottom: 2px solid var(--text-primary);
    }

    .nouen-cu-action-body {
      padding: 32px;
      display: flex;
      flex-direction: column;
      gap: 32px;
    }

    .nouen-cu-action-values {
      display: flex;
      flex-direction: column;
      gap: 24px;
    }

    .nouen-cu-action-current .label,
    .nouen-cu-action-next .label {
      font-size: 0.65rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--text-tertiary);
      display: block;
      margin-bottom: 4px;
    }

    .nouen-cu-action-current .value {
      font-size: 2.25rem;
      font-weight: 900;
      font-family: var(--font-headline);
      letter-spacing: -0.05em;
      color: var(--text-primary);
    }

    .nouen-cu-action-next .value {
      font-size: 1.125rem;
      font-weight: 700;
      font-family: var(--font-headline);
    }

    .nouen-cu-action-next .increment {
      font-size: 0.65rem;
      margin-top: 4px;
    }

    .nouen-cu-action-timer {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 16px;
      border-radius: 2px;
    }

    .nouen-cu-action-timer.bg-error-light {
      background-color: rgba(239, 68, 68, 0.05);
      border: 1px solid rgba(239, 68, 68, 0.1);
    }

    .nouen-cu-action-timer .text {
      font-size: 0.75rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.1em;
    }

    .nouen-cu-action-buttons {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .nouen-cu-action-buttons .btn-primary {
      width: 100%;
      padding: 20px 0;
      background-color: #1b3022;
      color: #fff;
      font-size: 0.75rem;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: 0.2em;
      border: none;
      cursor: pointer;
    }

    .nouen-cu-action-buttons .btn-primary:hover {
      background-color: #0d1f15;
      color: #fff;
    }

    .nouen-cu-action-buttons .btn-primary:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    .nouen-cu-action-stats {
      display: flex;
      justify-content: space-between;
      font-size: 0.65rem;
      font-weight: 700;
      text-transform: uppercase;
      color: var(--text-tertiary);
      padding: 0 8px;
    }

    .nouen-cu-action-event-link {
      display: flex;
      align-items: flex-start;
      gap: 16px;
      padding: 12px;
      background-color: rgba(0, 0, 0, 0.02);
      border: 1px solid var(--border-subtle);
      border-radius: 2px;
    }

    .nouen-cu-action-event-link .icon-date {
      padding: 8px;
      background-color: var(--bg-card);
      border: 1px solid var(--border-subtle);
      font-size: 0.65rem;
      font-weight: 900;
    }

    .nouen-cu-action-event-link .info {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .nouen-cu-action-event-link .label {
      font-size: 0.55rem;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: 0.1em;
    }

    .nouen-cu-action-event-link .title {
      font-size: 0.7rem;
    }

    .nouen-cu-action-history .title {
      font-size: 0.65rem;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      margin-bottom: 16px;
    }

    .nouen-cu-action-history .list {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .nouen-cu-action-history .item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-bottom: 8px;
      border-bottom: 1px solid var(--border-subtle);
    }

    .nouen-cu-action-history .item.opacity-variant {
      opacity: 0.6;
    }

    .nouen-cu-action-history .user {
      font-size: 0.75rem;
      font-weight: 700;
    }

    .nouen-cu-action-history .val {
      font-size: 0.75rem;
    }

    .nouen-cu-action-card.closed {
      opacity: 0.7;
    }

    /* ── Fase 7 — Tempo Real ── */

    /* AuctionTimer */
    /* ── AuctionTimer: base neutra ──────────────────────────────────────── */
    .nouen-auction-timer {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 12px 16px;
      background-color: var(--bg-secondary);
      border: 1px solid var(--border-subtle);
      border-radius: 2px;
    }

    .nouen-auction-timer__icon {
      font-size: 1rem;
      color: var(--text-secondary);
    }

    .nouen-auction-timer__time {
      font-size: 0.75rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--text-primary);
    }

    /* ── Estado warning: âmbar — ativado por warningSeconds ──────────────── */
    .nouen-auction-timer--warning {
      background-color: rgba(245, 158, 11, 0.08);
      border-color: rgba(245, 158, 11, 0.3);
    }

    .nouen-auction-timer--warning .nouen-auction-timer__icon,
    .nouen-auction-timer--warning .nouen-auction-timer__time {
      color: #d97706;
    }

    /* ── Estado urgent: vermelho total — ≤30s ──────────────────────────── */
    .nouen-auction-timer--urgent {
      background-color: rgba(239, 68, 68, 0.08);
      border-color: rgba(239, 68, 68, 0.3);
    }

    .nouen-auction-timer--urgent .nouen-auction-timer__icon,
    .nouen-auction-timer--urgent .nouen-auction-timer__time {
      color: #ef4444;
    }

    /* ── Ponto piscante (shared entre urgent e minimal--urgent) ─────────── */
    .nouen-auction-timer__dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background-color: #ef4444;
      box-shadow: 0 0 5px #ef4444;
      animation: nouen-blink 1s step-start infinite;
      flex-shrink: 0;
    }

    @keyframes nouen-blink {

      0%,
      100% {
        opacity: 1;
      } /* M-xx */

      50% {
        opacity: 0;
      } /* M-xx */
    }

    /* ── Estado encerrado ────────────────────────────────────────────────── */
    .nouen-auction-timer--ended {
      background-color: var(--bg-card);
      border-color: var(--border-subtle);
    }

    .nouen-auction-timer--ended .nouen-auction-timer__icon,
    .nouen-auction-timer--ended .nouen-auction-timer__time {
      color: var(--text-secondary);
    }

    /* ── Variantes minimal (usadas no header do CUActionCard) ───────────── */
    .nouen-timer-minimal--normal {
      color: var(--text-primary);
    }

    .nouen-timer-minimal--warning {
      color: #d97706;
    }

    .nouen-timer-minimal--urgent {
      color: #ef4444;
    }

    .nouen-timer-minimal--ended {
      color: var(--text-secondary);
    }

    /* EventFeed */
    .nouen-event-feed {
      background-color: var(--bg-card);
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-lg);
      overflow: hidden;
    }

    .nouen-event-feed--empty {
      padding: 24px;
      text-align: center;
    }

    .nouen-event-feed__empty-msg {
      font-size: 0.75rem;
      color: var(--text-tertiary);
    }

    .nouen-event-feed__header {
      padding: 8px 16px;
      font-size: 0.57rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--text-secondary);
      border-bottom: 1px solid var(--border-subtle);
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .nouen-event-feed__dot {
      content: '';
      display: inline-block;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background-color: var(--feed-header-dot-color, var(--info, #3b82f6));
      animation: nouen-dot-pulse 2s infinite;
      transition: background-color 0.4s ease;
    }

    .nouen-event-feed__list {
      list-style: none;
      margin: 0;
      padding: 0;
      flex: 1;
      overflow-y: auto;
    }

    .nouen-event-feed__item {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      padding: 10px 16px;
      border-bottom: 1px solid var(--border-subtle);
    }

    .nouen-event-feed__item--latest {
      opacity: 1;
      background-color: rgba(16, 185, 129, 0.03);
    }

    .nouen-event-feed__icon {
      font-size: 0.85rem;
      color: var(--text-tertiary);
      flex-shrink: 0;
      margin-top: 2px;
    }

    .nouen-event-feed__content {
      display: flex;
      flex-direction: column;
      gap: 2px;
      flex: 1;
    }

    .nouen-event-feed__msg {
      font-size: 0.75rem;
      color: var(--text-primary);
      line-height: 1.4;
    }

    .nouen-event-feed__time {
      font-size: 0.6rem;
      color: var(--text-tertiary);
    }

    /* ─── Feed de notificações — tipos visuais ─── */
    .nouen-event-feed__item {
      border-left: 2px solid transparent;
      transition: all 0.3s ease;
    }

    .nouen-event-feed__item--info {
      border-left-color: var(--info, #3b82f6);
      background-color: rgba(59, 130, 246, 0.05);
    }

    .nouen-event-feed__item--success {
      border-left-color: var(--success, #10b981);
      background-color: rgba(16, 185, 129, 0.05);
    }

    .nouen-event-feed__item--neutral {
      border-left-color: var(--border-subtle);
      background-color: transparent;
    }

    .nouen-event-feed__item--urgent {
      border-left-color: var(--accent-red, #ef4444);
      background-color: rgba(239, 68, 68, 0.05);
    }

    .nouen-event-feed__item--warning {
      border-left-color: var(--warning, #f59e0b);
      background-color: rgba(245, 158, 11, 0.05);
    }

    /* ─── Dot animado no header (Esquerda) via ::before ─── */
    .nouen-event-feed__header--info {
      --feed-header-dot-color: var(--info, #3b82f6);
    }

    .nouen-event-feed__header--success {
      --feed-header-dot-color: var(--success, #10b981);
    }

    .nouen-event-feed__header--neutral {
      --feed-header-dot-color: var(--border-subtle);
    }

    .nouen-event-feed__header--urgent {
      --feed-header-dot-color: var(--accent-red, #ef4444);
    }

    .nouen-event-feed__header--warning {
      --feed-header-dot-color: var(--warning, #f59e0b);
    }

    @keyframes nouen-dot-pulse {
      0% {
        transform: scale(0.7);
        box-shadow: 0 0 0px var(--feed-header-dot-color, var(--info, #3b82f6));
      } /* M-xx */

      50% {
        transform: scale(1);
        opacity: 0.8;
        box-shadow: 0 0 6px var(--feed-header-dot-color, var(--info, #3b82f6));
      } /* M-xx */

      100% {
        transform: scale(0.7);
        box-shadow: 0 0 0px var(--feed-header-dot-color, var(--info, #3b82f6));
      } /* M-xx */
    }

    /* ─── Animação de entrada ─── */
    .nouen-event-feed__item--new {
      animation: nouen-nf-entrance 0.5s ease-out forwards;
    }

    @keyframes nouen-nf-entrance {
      from {
        opacity: 0;
        transform: translateY(-8px);
      } /* M-xx */

      to {
        opacity: 1;
        transform: translateY(0);
      } /* M-xx */
    }

    /* ─── Badge de estado ─── */
    .nouen-event-feed__status {
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }

    .nouen-event-feed__status--live {
      color: var(--status-live, #16a364);
    }

    .nouen-event-feed__status--live::before {
      content: '';
      display: inline-block;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background-color: currentColor;
      animation: nouen-pulse 1.5s infinite;
    }

    .blink {
      animation: nouen-pulse 1.5s infinite;
    }

    .nouen-event-feed__status--connecting {
      color: var(--text-muted);
    }

    .nouen-event-feed__status--connecting::before {
      content: '';
      display: inline-block;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background-color: currentColor;
    }

    .nouen-event-feed__status--reconnecting {
      color: var(--warning, #f59e0b);
    }

    @keyframes nouen-pulse {

      0%,
      100% {
        opacity: 1;
      } /* M-xx */

      50% {
        opacity: 0.4;
      } /* M-xx */
    }

    /* ================================================
   NOUEN LOGIN & IDENTIDADE
   Componentes de autenticação e seleção de modo
   ================================================ */

    /* ── Auth Page Wrapper — página completa standalone ── */
    .login-page-wrapper {
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      background: var(--bg-primary);
      position: relative;
      overflow-x: hidden;
    }


    /* ── Footer mínimo da tela de Auth ── */
    .login-footer {
      position: relative;
      z-index: 1;
      padding: 20px 56px;
      border-top: 1px solid var(--border-subtle);
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 16px;
    }

    .login-footer-copy {
      font-family: var(--font-label);
      font-size: 0.8rem;
      color: #666666;
      opacity: 1;
    }

    .login-footer-links {
      display: flex;
      gap: 28px;
    }

    .login-footer-links a {
      font-family: var(--font-headline);
      font-size: 0.6rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.15em;
      color: var(--text-tertiary);
      text-decoration: none;
      transition: color var(--transition-fast);
    }

    .login-footer-links a:hover {
      color: var(--text-primary);
    }

    .login-grid-bg,
    .modo-grid-bg {
      position: fixed;
      inset: 0;
      background-color: #fafafa;
      background-image: linear-gradient(rgba(0, 0, 0, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, 0.03) 1px, transparent 1px);
      background-size: 60px 60px;
      pointer-events: none;
      z-index: 0;
    }

    .login-main,
    .modo-main {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: relative;
      z-index: 1;
      padding: 16px 24px;
    }

    .modo-main {
      padding: 24px 48px 28px;
    }

    .login-container {
      width: 100%;
      max-width: 480px;
    }

    .login-title-block,
    .modo-title-block {
      text-align: center;
      margin-bottom: 24px;
    }

    .modo-title-block {
      max-width: 720px;
      margin-bottom: 32px;
    }

    .login-title-block h1 {
      font-family: var(--font-headline);
      font-size: 2.4rem;
      font-weight: 800;
      letter-spacing: -0.04em;
      color: var(--text-primary);
      margin: 0 0 12px;
      line-height: 1;
    }

    .login-subtitle {
      font-family: var(--font-body);
      font-size: 1rem;
      color: var(--text-secondary);
      line-height: 1.7;
      margin: 0;
      font-weight: 300;
    }

    .login-card {
      background: var(--bg-card);
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-lg);
      padding: 40px;
      box-shadow: 0 4px 32px rgba(0, 0, 0, 0.04), 0 1px 4px rgba(0, 0, 0, 0.03);
    }

    .google-btn {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      padding: 14px 24px;
      background: var(--bg-primary);
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-md);
      cursor: pointer;
      transition: all var(--transition-fast);
      margin-bottom: 32px;
    }

    .google-btn:hover {
      border-color: var(--color-accent, var(--accent-primary));
      background: color-mix(in srgb, var(--color-accent, var(--accent-primary)) 5%, transparent);
      box-shadow: 0 4px 12px color-mix(in srgb, var(--color-accent, var(--accent-primary)) 20%, transparent);
    }

    .google-btn:disabled {
      opacity: 0.6;
      cursor: not-allowed;
    }

    .google-btn:focus-visible {
      outline: 2px solid var(--color-accent, var(--accent-primary));
      outline-offset: 2px;
    }

    .google-btn-label {
      font-family: var(--font-headline);
      font-size: 0.65rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.15em;
      color: var(--text-primary);
    }

    .login-divider {
      display: flex;
      align-items: center;
      gap: 20px;
      margin-bottom: 24px;
    }

    .login-divider-line {
      flex: 1;
      height: 1px;
      background: var(--border-subtle);
    }

    .login-divider-text {
      font-family: var(--font-label);
      font-size: 0.58rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.25em;
      color: var(--text-tertiary);
      white-space: nowrap;
    }

    .login-form {
      display: flex;
      flex-direction: column;
      gap: 24px;
    }

    .login-submit-btn {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 18px 32px;
      background: var(--text-primary);
      color: #ffffff;
      border: none;
      border-radius: var(--radius-md);
      font-family: var(--font-headline);
      font-size: 0.72rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.22em;
      cursor: pointer;
      transition: all var(--transition-fast);
      margin-top: 8px;
    }

    .login-submit-btn:hover {
      background: var(--color-accent, var(--accent-primary));
    }

    .login-submit-btn--network {
      background: var(--accent-primary) !important;
      color: #ffffff !important;
    }
    .login-submit-btn--network:hover {
      filter: brightness(1.15) !important;
      transform: translateY(-2px) !important;
      box-shadow: 0 0 12px color-mix(in srgb, var(--accent-primary) 50%, transparent) !important;
      color: #ffffff !important;
    }

    .login-submit-btn:disabled {
      cursor: not-allowed;
    }

    .login-submit-btn:focus-visible {
      outline: 2px solid var(--color-accent, var(--accent-primary));
      outline-offset: 2px;
    }

    .login-submit-btn .material-symbols-outlined {
      font-size: 16px;
      transition: transform var(--transition-fast);
    }

    .login-submit-btn:hover .material-symbols-outlined {
      transform: translateX(3px);
    }

    .login-card-footer {
      display: flex;
      justify-content: center;
      align-items: center;
      padding-top: 28px;
      margin-top: 32px;
      border-top: 1px solid var(--border-subtle);
    }

    .login-link-btn {
      background: none;
      border: none;
      cursor: pointer;
      font-family: var(--font-headline);
      font-size: 0.62rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.15em;
      color: var(--text-tertiary);
      transition: color var(--transition-fast);
      padding: 0;
    }

    .login-link-btn:hover {
      color: var(--text-primary);
    }

    /* ── Login — Mobile (≤ 767px) ─────────────────────────────── */
    @media (max-width: 767px) {
      .login-card {
        padding: 28px 20px;
      } /* M-xx */

      /* Reduz espaçamento vertical do bloco de título */
      .login-title-block {
        margin-bottom: 16px;
      } /* M-xx */

      .login-title-block h1 {
        font-size: 1.75rem;
        margin-bottom: 8px;
      } /* M-xx */

      /* Reduz letter-spacing para evitar quebra do CTA em 2 linhas */
      .login-submit-btn {
        min-height: 44px;
        letter-spacing: 0.1em; /* M-xx */
        padding-left: 16px;
        padding-right: 16px;
      } /* M-xx */

      /* Footer: layout empilhado (link acima do copy) e centralizado */
      .login-footer {
        padding: 24px;
        flex-direction: column-reverse;
        justify-content: center;
        text-align: center;
        gap: 16px;
      } /* M-xx */

      .login-footer img {
        height: 28px; /* era 36px inline — override via CSS */
      } /* M-xx */

      .google-btn {
        min-height: 44px;
      } /* M-xx */

      /* Evita zoom automático no iOS ao focar o campo de e-mail */
      .arch-input input,
      .arch-input input[type="email"],
      .arch-input input[type="text"] {
        font-size: 16px;
      } /* M-xx */

      /* Feedback de toque — hover não pode ser o único sinal de interação (Skill 15 §B) */
      .login-submit-btn:active,
      .google-btn:active {
        opacity: 0.85;
        transform: scale(0.98);
      } /* M-xx */
    }

    .modo-label {
      display: inline-block;
      font-family: var(--font-label);
      font-size: 0.75rem;
      text-transform: uppercase;
      letter-spacing: 0.075em;
      font-weight: 700;
      color: var(--text-accent);
      margin-bottom: 20px;
    }

    .modo-title-block h1 {
      font-family: var(--font-headline);
      font-size: clamp(2.05rem, 4vw, 3.2rem);
      font-weight: 800;
      letter-spacing: -0.04em;
      color: var(--text-primary);
      line-height: 1.05;
      margin: 0 0 18px;
    }

    .modo-title-block p {
      font-family: var(--font-body);
      font-size: 1rem;
      color: var(--text-secondary);
      line-height: 1.5;
      margin: 0;
      font-weight: 300;
    }

    .modo-roles-grid {
      display: grid; /* M-xx */
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
      width: 100%;
      max-width: 1160px;
    }

    .modo-role-card {
      background: var(--bg-card);
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-lg);
      padding: 36px 32px 32px;
      display: flex;
      flex-direction: column;
      min-height: 0;
      transition: all var(--transition-normal);
      transform: translateZ(0);
    }

    .modo-role-card:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-hover);
      border-color: transparent;
    }

    .modo-card-icon {
      margin-bottom: 20px;
      flex-shrink: 0;
    }

    .modo-card-icon svg {
      display: block;
    }

    .modo-card-funcao {
      font-family: var(--font-label);
      font-size: 0.65rem;
      text-transform: uppercase;
      letter-spacing: 0.25em;
      font-weight: 700;
      color: var(--text-accent);
      margin-bottom: 12px;
    }

    .modo-card-title {
      font-family: var(--font-headline);
      font-size: 1.4rem;
      font-weight: 800;
      letter-spacing: -0.025em;
      color: var(--text-primary);
      margin: 0 0 16px;
      line-height: 1.15;
    }

    .modo-card-desc {
      font-family: var(--font-body);
      font-size: 0.9rem;
      color: var(--text-secondary);
      line-height: 1.65;
      margin: 0 0 auto;
      padding-bottom: 24px;
      font-weight: 300;
    }

    .modo-card-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: 100%;
      padding: 18px 24px;
      background: var(--text-primary);
      color: #ffffff;
      border: none;
      border-radius: var(--radius-md);
      font-family: var(--font-headline);
      font-size: 0.65rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.2em;
      text-decoration: none;
      cursor: pointer;
      transition: all var(--transition-fast);
    }

    .modo-card-btn:hover {
      background: var(--color-accent, var(--accent-primary));
      color: #ffffff;
      box-shadow: 0 4px 16px color-mix(in srgb, var(--color-accent, var(--accent-primary)) 30%, transparent);
    }

    .modo-card-btn .material-symbols-outlined {
      font-size: 14px;
      transition: transform var(--transition-fast);
    }

    .modo-card-btn:hover .material-symbols-outlined {
      transform: translateX(3px);
    }

    /* ── Material Symbols font rendering ── */
    .material-symbols-outlined {
      font-family: 'Material Symbols Outlined';
      font-weight: normal;
      font-style: normal;
      font-size: 24px;
      line-height: 1;
      letter-spacing: normal;
      text-transform: none;
      display: inline-block;
      white-space: nowrap;
      word-wrap: normal;
      direction: ltr;
      -webkit-font-feature-settings: 'liga';
      font-feature-settings: 'liga';
      -webkit-font-smoothing: antialiased;
    }

    /* ── Form Field Components (Login / Registration) ── */
    .field-group {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .field-label {
      font-family: var(--font-headline);
      font-size: 0.62rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.18em;
      color: var(--text-tertiary);
    }

    /* Wrapper de input arquitetônico — borda aparece no foco */
    .arch-input {
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-md);
      background: var(--bg-secondary);
      overflow: hidden;
      transition: border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1),
        background 0.2s ease;
    }

    .arch-input:focus-within {
      border-color: var(--color-accent, var(--text-accent));
      box-shadow: 0 0 0 1px var(--color-accent, var(--text-accent));
      background: var(--bg-card);
    }

    .arch-input input,
    .arch-input select {
      width: 100%;
      padding: 16px 20px;
      background: transparent;
      border: none;
      outline: none;
      font-family: var(--font-body);
      font-size: 0.9rem;
      font-weight: 500;
      color: var(--text-primary);
    }

    .arch-input input::placeholder {
      color: var(--text-tertiary);
      opacity: 0.45;
    }

    /* ── Fix: webkit autofill — sobrescreve o azul nativo do browser ── */
    .arch-input input:-webkit-autofill,
    .arch-input input:-webkit-autofill:hover,
    .arch-input input:-webkit-autofill:focus,
    .arch-input select:-webkit-autofill,
    .arch-input textarea:-webkit-autofill {
      -webkit-box-shadow: 0 0 0px 1000px var(--bg-secondary, #f6f3f2) inset;
      -webkit-text-fill-color: var(--text-primary, #121212);
      transition: background-color 5000s ease-in-out 0s;
    }

    /* ── Link de voltar ao login ── */
    .modo-back-link {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      margin-top: 24px;
      font-family: var(--font-headline);
      font-size: 0.62rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.15em;
      color: var(--text-tertiary);
      text-decoration: none;
      transition: color var(--transition-fast);
    }

    .modo-back-link:hover {
      color: var(--text-primary);
    }

    /* ── Footer mínimo ── */
    .modo-footer {
      position: relative;
      z-index: 1;
      padding: 20px 56px;
      border-top: 1px solid var(--border-subtle);
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 16px;
    }
    @media (max-width: 767px) {
      .modo-footer {
        padding: 24px;
        flex-direction: column-reverse;
        justify-content: center;
        text-align: center;
        gap: 16px;
      }
    }

    .modo-footer-copy {
      font-family: var(--font-label);
      font-size: 0.8rem;
      color: #666666;
      opacity: 1;
    }

    .modo-footer-links {
      display: flex;
      gap: 28px;
    }

    .modo-footer-links a {
      font-family: var(--font-headline);
      font-size: 0.6rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.15em;
      color: var(--text-tertiary);
      text-decoration: none;
      transition: color var(--transition-fast);
    }

    .modo-footer-links a:hover {
      color: var(--text-primary);
    }

    /* ==============================
   CU PAGE REDESIGN (V2.6)
   ============================== */

    .cu-page-theme {
      --font-display: var(--font-headline);
      --font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
      --border-subtle: #e5e2e1;
      --bg-primary: #fcf9f8;
      --bg-card: #ffffff;
      --bg-secondary: #f0edec;
    }

    /* Layout Principal */
    .nouen-cu-layout {
      display: flex;
      flex-direction: column;
      gap: 32px;
      padding: 0;
      margin: 0;
    }

    @media (min-width: 1024px) {
      .nouen-cu-layout {
        flex-direction: row;
        align-items: flex-start;
        flex-wrap: wrap;
      } /* M-xx */
    }

    .nouen-cu-layout__main {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 32px;
    }

    @media (min-width: 1024px) {
      .nouen-cu-layout__main {
        width: 65%;
        order: 2; /* galeria(1) → main(2) → aside(3 via CSS) no DOM flex */
      } /* M-xx */
    }

    .nouen-cu-layout__aside {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    @media (min-width: 1024px) {
      .nouen-cu-layout__aside {
        width: 35%;
        position: sticky;
        top: calc(var(--header-height) + 24px);
        order: 3;
      } /* M-xx */
    }

    /* Breadcrumb / Context */
    .nouen-cu-breadcrumb {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 11px;
      font-family: var(--font-headline);
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: #757575;
      margin-bottom: 24px;
    }

    .nouen-cu-breadcrumb span.active {
      color: var(--text-primary);
      font-weight: 700;
    }

    /* 1. Gallery (4:3 Vertical Thumbnails) */
    .nouen-cu-gallery {
      display: flex;
      flex-direction: row-reverse;
      gap: 12px;
    }

    @media (max-width: 768px) {
      .nouen-cu-gallery {
        flex-direction: column; /* M-xx */
      } /* M-xx */
    }

    .nouen-cu-gallery__main {
      position: relative;
      flex: 1;
      aspect-ratio: 4 / 3;
      background: var(--bg-tertiary);
      border-radius: var(--radius-lg);
      overflow: hidden;
    }

    .nouen-cu-gallery__image {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .nouen-cu-gallery__badges {
      position: absolute;
      top: 16px;
      left: 16px;
      display: flex;
      gap: 8px;
    }

    .nouen-cu-gallery__badge-live {
      background: var(--status-live);
      color: white;
      padding: 4px 12px;
      border-radius: var(--radius-sm);
      font-family: var(--font-label);
      font-size: 0.75rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      display: flex;
      align-items: center;
      gap: 6px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    .nouen-cu-gallery__badge-live .dot {
      width: 8px;
      height: 8px;
      background: white;
      border-radius: 50%;
      animation: pulse 1.5s infinite;
    }

    .nouen-cu-gallery__counter {
      position: absolute;
      bottom: 16px;
      right: 16px;
      background: rgba(0, 0, 0, 0.6);
      backdrop-filter: blur(4px);
      color: white;
      padding: 6px 12px;
      border-radius: var(--radius-sm);
      font-family: var(--font-label);
      font-size: 0.85rem;
      letter-spacing: 0.05em;
      border: 1px solid rgba(255, 255, 255, 0.1);
    }

    /* M-32 — Actions overlay: ♥ Favoritar + ⇧ Compartilhar (bottom-right, mobile only) */
    .nouen-cu-gallery__actions {
      position: absolute;
      bottom: 12px;
      right: 12px;
      display: flex;
      gap: 6px;
    }
    .nouen-cu-gallery__action-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: rgba(0, 0, 0, 0.45);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      border: none;
      color: #fff;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      transition: background 0.15s;
      position: relative; /* necessário para o ::after de touch target */
    }
    /* Touch target invisível de 44×44px (iOS HIG) — visual permanece 32×32px */
    .nouen-cu-gallery__action-btn::after {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 44px;
      height: 44px;
    }
    .nouen-cu-gallery__action-btn .material-symbols-outlined {
      font-size: 16px;
    }
    .nouen-cu-gallery__action-btn--active {
      background: rgba(239, 68, 68, 0.65); /* vermelho quando favoritado */
    }
    .nouen-cu-gallery__action-btn:active {
      background: rgba(0, 0, 0, 0.65);
    }

    /* M-24b — Mechanism badge: topo direito, accent color (consistente com CUCard) */
    .nouen-cu-gallery__mechanism-badge {
      position: absolute;
      top: 16px;
      right: 16px;
      background-color: var(--cu-accent-color, var(--text-primary));
      color: #ffffff;
      font-size: 0.625rem;
      padding: 4px 12px;
      font-weight: 700;
      font-family: var(--font-label);
      text-transform: uppercase;
      letter-spacing: 0.1em;
      border-radius: var(--radius-sm);
      z-index: 6;
      pointer-events: none;
    }

    /* M-24b — Timer overlay: idêntico ao nouen-cu-card__timer-overlay */
    .nouen-cu-gallery__timer-overlay {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      padding: 6px 12px;
      background: rgba(0, 0, 0, 0.5);
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
      color: #ffffff;
      font-family: var(--font-body);
      font-size: 0.6875rem;
      font-weight: 600;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      gap: 6px;
      letter-spacing: 0.05em;
      z-index: 6;
      pointer-events: none;
      transition: background-color 0.3s ease;
    }

    .nouen-cu-gallery__timer-overlay--urgent {
      background: color-mix(in srgb, var(--status-urgent) 75%, transparent);
    }

    .nouen-cu-gallery__nav {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background: rgba(0, 0, 0, 0.4);
      color: white;
      border: none;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all var(--transition-fast);
      opacity: 0;
    }

    .nouen-cu-gallery__main:hover .nouen-cu-gallery__nav {
      opacity: 1;
    }

    .nouen-cu-gallery__nav:hover {
      background: rgba(0, 0, 0, 0.7);
    }

    .nouen-cu-gallery__nav--prev {
      left: 16px;
    }

    .nouen-cu-gallery__nav--next {
      right: 16px;
    }

    .nouen-cu-gallery__sidebar {
      width: 96px;
      position: relative;
    }

    .nouen-cu-gallery__thumbnails {
      display: flex;
      flex-direction: column;
      gap: 8px;
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      overflow-y: auto;
      overflow-x: hidden;
      padding-right: 4px;
    }

    @media (max-width: 768px) {
      .nouen-cu-gallery__sidebar {
        width: 100%; /* M-xx */
        height: auto;
      } /* M-xx */

      .nouen-cu-gallery__thumbnails {
        position: static;
        flex-direction: row;
        width: 100%; /* M-xx */
        overflow-x: auto;
        overflow-y: hidden;
        padding-right: 0;
        padding-bottom: 4px;
      } /* M-xx */
    }

    .nouen-cu-gallery__thumbnails::-webkit-scrollbar {
      width: 4px;
      height: 4px;
    }

    .nouen-cu-gallery__thumbnails::-webkit-scrollbar-thumb {
      background: var(--border-subtle);
      border-radius: 4px;
    }

    .nouen-cu-gallery__thumb {
      width: 100%;
      aspect-ratio: 4 / 3;
      border-radius: var(--radius-sm);
      background: var(--bg-tertiary);
      flex-shrink: 0;
      cursor: pointer;
      border: 2px solid transparent;
      transition: all var(--transition-fast);
      overflow: hidden;
      opacity: 0.6;
    }

    .nouen-cu-gallery__thumb:hover {
      opacity: 1;
      border-color: var(--border-subtle);
    }

    .nouen-cu-gallery__thumb.active {
      opacity: 1;
      border-color: var(--cu-accent-color, var(--accent-primary));
    }

    /* 2. Overview */
    .nouen-cu-overview {
      display: flex;
      flex-direction: column;
      gap: 16px;
      padding-bottom: 32px;
      border-bottom: 1px solid var(--border-subtle);
    }

    .nouen-cu-overview__title {
      font-size: 2.7rem;
      font-family: var(--font-display);
      font-weight: 700;
      color: var(--text-primary);
      line-height: 1.1;
      letter-spacing: -0.02em;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    @media (max-width: 768px) {
      .nouen-cu-overview__title {
        font-size: 2.25rem;
      } /* M-xx */
    }

    .nouen-cu-overview__title-lot {
      font-weight: 400;
      color: var(--text-tertiary);
    }

    .nouen-cu-overview__meta {
      display: flex;
      flex-wrap: wrap;
      gap: 24px;
      font-size: 0.85rem;
      font-family: var(--font-label);
      color: var(--text-secondary);
    }

    .nouen-cu-overview__meta-item {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .nouen-cu-overview__tags {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 8px;
    }

    .nouen-cu-overview__tag {
      background: var(--bg-secondary);
      color: var(--text-secondary);
      padding: 4px 12px;
      border-radius: var(--radius-sm);
      font-size: 0.75rem;
      font-family: var(--font-label);
      text-transform: uppercase;
      letter-spacing: 0.05em;
      border: 1px solid var(--border-subtle);
    }

    /* 3. Event Box */
    .nouen-cu-event-box {
      background: var(--bg-card);
      border: 1px solid var(--border-subtle);
      border-left: 4px solid var(--cu-accent-color, var(--accent-primary));
      border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
      padding: 24px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .nouen-cu-event-box__label {
      font-size: 0.75rem;
      font-family: var(--font-label);
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--text-secondary);
    }

    .nouen-cu-event-box__title {
      font-size: 1.15rem;
      font-weight: 600;
      color: var(--text-primary);
    }

    .nouen-cu-event-box__operator {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-top: 8px;
      padding-top: 16px;
      border-top: 1px solid var(--border-subtle);
      font-size: 0.85rem;
      color: var(--text-secondary);
    }

    /* 4. Specs Grid */
    .nouen-cu-specs {
      display: flex;
      flex-direction: column;
      gap: 24px;
    }

    .nouen-cu-specs__header {
      font-size: 0.85rem;
      font-family: var(--font-label);
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--cu-accent-color, var(--accent-primary));
    }

    .nouen-cu-specs__grid {
      display: grid; /* M-xx */
      grid-template-columns: 1fr;
      gap: 1px;
      background: var(--border-subtle);
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-lg);
      overflow: hidden;
    }

    @media (min-width: 768px) {
      .nouen-cu-specs__grid {
        grid-template-columns: repeat(2, 1fr);
      } /* M-xx */
    }

    .nouen-cu-specs__item {
      background: var(--bg-card);
      padding: 16px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .nouen-cu-specs__label {
      font-size: 0.85rem;
      color: var(--text-secondary);
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .nouen-cu-specs__value {
      font-weight: 500;
      color: var(--text-primary);
      font-size: 0.84rem;
    }

    .nouen-cu-specs__value--mono {
      font-family: var(--font-body);
      font-size: 0.85rem;
      background: var(--bg-secondary);
      padding: 2px 8px;
      border-radius: var(--radius-sm);
      border: 1px solid var(--border-subtle);
    }

    /* 5. Description */
    .nouen-cu-desc {
      display: flex;
      flex-direction: column;
      gap: 16px;
      color: var(--text-secondary);
      line-height: 1.7;
      font-size: 0.95rem;
    }

    .nouen-cu-desc__header {
      font-size: 0.85rem;
      font-family: var(--font-label);
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--cu-accent-color, var(--accent-primary));
      margin-bottom: 8px;
    }

    /* Documentação — wrapper criado em M-35; gap idêntico ao nouen-cu-specs para consistência visual */
    .nouen-cu-docs {
      display: flex;
      flex-direction: column;
      gap: 24px;
    }

    /* 6. Action Card */
    .nouen-action-card {
      background: var(--bg-card);
      border: none;
      border-top: 2px solid var(--cu-accent-color, var(--accent-primary));
      border-radius: var(--radius-sm);
      overflow: hidden;
      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
      display: flex;
      flex-direction: column;
    }

    .nouen-action-card__header {
      padding: 16px 16px 24px 16px;
      border-bottom: 1px solid var(--border-subtle);
      background: var(--bg-card);
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .nouen-action-card__header-top {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: flex-start;
      min-height: 32px;
    }

    .nouen-action-card__badge {
      background: var(--cu-accent-color, var(--accent-primary));
      color: #ffffff;
      padding: 4px 12px;
      border-radius: var(--radius-sm);
      font-size: 0.75rem;
      font-family: var(--font-label);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      border: none;
    }

    .nouen-action-card__timer-box {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
    }

    .nouen-action-card__timer-label {
      font-size: 0.75rem;
      font-family: var(--font-label);
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--text-secondary);
      margin-bottom: 4px;
      font-weight: 400;
      transition: color 0.3s ease, font-weight 0.3s ease;
    }

    /* "Disputa final" — urgente */
    .nouen-action-card__timer-label--urgent {
      color: #ef4444;
      font-weight: 700;
    }

    .nouen-action-card__timer-value {
      font-size: 1.875rem;
      font-family: var(--font-headline);
      font-weight: 700;
      color: var(--text-primary);
      letter-spacing: -0.05em;
      line-height: 1;
    }

    /* "Verificando…" — grace period de 3s após o encerramento */
    .nouen-action-card__timer-value--homologating {
      color: #f59e0b;
      animation: homologatingPulse 1s ease-in-out infinite;
    }

    @keyframes homologatingPulse {

      0%,
      100% {
        opacity: 1;
      } /* M-xx */

      50% {
        opacity: 0.35;
      } /* M-xx */
    }

    /* ── Flip animation do preço ─────────────────────────────────────────── */
    .nouen-price-flip {
      overflow: hidden;
      display: block;
    }

    .nouen-price-flip__value {
      display: block;
      font-size: 1.875rem;
      font-family: var(--font-display);
      font-weight: 700;
      color: var(--text-primary);
      letter-spacing: -0.02em;
      line-height: 1;
      white-space: nowrap;
      animation: priceFlipIn 420ms cubic-bezier(0.34, 1.4, 0.64, 1) both;
    }

    @keyframes priceFlipIn {
      from {
        transform: translateY(70%);
        opacity: 0;
      } /* M-xx */

      to {
        transform: translateY(0);
        opacity: 1;
      } /* M-xx */
    }

    .nouen-action-card__body {
      padding: 16px;
      background: var(--bg-card);
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .nouen-action-card__price-box {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .nouen-action-card__price-label {
      font-size: 0.85rem;
      color: var(--text-secondary);
      white-space: nowrap;
    }

    .nouen-action-card__price-row {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
    }

    .nouen-action-card__price-value {
      font-size: 1.875rem;
      font-family: var(--font-display);
      font-weight: 700;
      color: var(--text-primary);
      letter-spacing: -0.02em;
      line-height: 1;
    }

    .nouen-action-card__price-ref {
      font-size: 0.75rem;
      font-family: var(--font-body);
      color: var(--text-secondary);
      background: var(--bg-secondary);
      padding: 4px 8px;
      border-radius: var(--radius-sm);
      border: 1px solid var(--border-subtle);
    }

    /* Indicador contextual — substitui price-ref */
    .nouen-action-card__price-indicator {
      font-size: 0.72rem;
      font-family: var(--font-label);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      padding: 4px 8px;
      border-radius: var(--radius-sm);
      border: 1px solid;
      white-space: nowrap;
    }

    .nouen-action-card__price-indicator--deal {
      color: #059669;
      background: rgba(5, 150, 105, 0.08);
      border-color: rgba(5, 150, 105, 0.25);
    }

    .nouen-action-card__price-indicator--winning {
      color: #059669;
      background: transparent;
      border-color: transparent;
      padding: 0;
      font-size: 0.75rem;
      text-transform: none;
      font-weight: 600;
      letter-spacing: normal;
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .nouen-action-card__price-indicator--outbid {
      color: #dc2626;
      background: transparent;
      border-color: transparent;
      padding: 0;
      font-size: 0.75rem;
      text-transform: none;
      font-weight: 600;
      letter-spacing: normal;
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .nouen-action-card__price-indicator--bids {
      color: var(--text-secondary);
      background: var(--bg-secondary);
      border-color: var(--border-subtle);
    }

    .nouen-bid-form {
      display: flex;
      flex-direction: column;
      gap: 16px;
      margin-top: 8px;
    }

    .nouen-bid-form__input-wrapper {
      position: relative;
    }

    /* Overlay de placeholder customizado */
    .nouen-bid-form__placeholder-overlay {
      position: absolute;
      left: 48px;
      right: 12px;
      top: 50%;
      transform: translateY(-50%);
      display: flex;
      align-items: baseline;
      gap: 6px;
      pointer-events: none;
    }

    .nouen-bid-form__placeholder-value {
      font-family: var(--font-headline);
      font-size: 1.25rem;
      color: var(--text-secondary);
      opacity: 0.45;
    }

    .nouen-bid-form__placeholder-hint {
      font-family: var(--font-label);
      font-size: 0.85rem;
      color: var(--text-secondary);
      opacity: 0.45;
      flex-shrink: 0;
    }

    .nouen-bid-form__currency {
      position: absolute;
      left: 16px;
      top: 50%;
      transform: translateY(-50%);
      color: var(--text-secondary);
      font-family: var(--font-headline);
      font-size: 1.15rem;
    }

    .nouen-bid-form__input {
      width: 100%;
      background: var(--bg-card);
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-lg);
      padding: 16px 96px 16px 48px;
      font-family: var(--font-headline);
      font-size: 1.25rem;
      color: var(--text-primary);
      transition: all var(--transition-fast);
    }

    .nouen-bid-form__input:focus {
      border-color: var(--cu-accent-color, var(--accent-primary));
      outline: none;
      box-shadow: inset 0 0 0 1px var(--cu-accent-color, var(--accent-primary));
    }

    .nouen-bid-form__submit {
      width: 100%;
      background: var(--cu-accent-color, var(--accent-primary));
      color: white;
      border: none;
      border-radius: var(--radius-lg);
      padding: 16px;
      font-family: var(--font-headline);
      font-weight: 800;
      font-size: 1rem;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      cursor: pointer;
      transition: all var(--transition-fast);
    }

    .nouen-bid-form__submit:hover:not(:disabled) {
      filter: brightness(1.12);
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22);
      color: #fff;
    }

    .nouen-bid-form__submit:disabled {
      background: var(--bg-secondary);
      color: var(--text-tertiary);
      cursor: not-allowed;
    }

    .nouen-bid-form__submit:active {
      transform: scale(0.98);
    }

    .nouen-action-card__disclaimer {
      font-size: 0.75rem;
      color: var(--text-secondary);
      text-align: center;
      margin-top: 8px; /* desktop: equivalente ao inline style removido do JSX */
    }

    .nouen-action-card__disclaimer a {
      text-decoration: underline;
    }

    /* Botão Completar — texto puro, sem caixa */
    .nouen-bid-form__completar {
      position: absolute;
      right: 4px; /* Recuou 8px para compensar o padding horizontal */
      top: 50%;
      transform: translateY(-50%);
      background: none;
      border: none;
      /* Touch target iOS: min 44px de altura e area de toque confortavel */
      padding: 14px 8px;
      min-height: 44px;
      display: flex;
      align-items: center;
      font-size: 0.72rem;
      font-family: var(--font-label);
      font-weight: 700;
      color: var(--cu-accent-color, var(--accent-primary));
      cursor: pointer;
      pointer-events: all;
      transition: opacity var(--transition-fast);
      white-space: nowrap;
      -webkit-tap-highlight-color: transparent;
    }

    .nouen-bid-form__completar:hover:not(:disabled) {
      opacity: 0.7;
    }

    .nouen-bid-form__completar:disabled {
      opacity: 0.4;
      cursor: default;
    }

    /* Hints: linha de incremento */
    .nouen-bid-form__hints {
      display: flex;
      flex-direction: column;
      gap: 6px;
      margin-top: -8px;
    }

    .nouen-bid-form__increment {
      font-size: 0.75rem;
      color: var(--text-secondary);
      font-family: var(--font-label);
    }

    .nouen-action-card__footer {
      margin: 0;
      padding: 10px 16px;
      background: var(--bg-secondary);
      border-top: 1px solid var(--border-subtle);
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 0.75rem;
      color: var(--text-secondary);
    }

    .nouen-action-card__footer-left {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .nouen-action-card__footer-item {
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .nouen-action-card__footer-divider {
      color: var(--border-subtle);
      user-select: none;
    }

    .nouen-action-card__footer-actions {
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .nouen-action-card__footer-icon-btn {
      background: none;
      border: none;
      cursor: pointer;
      color: var(--text-tertiary);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      transition: color var(--transition-fast);
    }

    .nouen-action-card__footer-icon-btn:hover {
      color: var(--text-primary);
    }

    /* M-29 — Lot Nav Bottom Bar: oculto no desktop. Ativado exclusivamente no mobile. */ /* global-intencional */
    .nouen-lot-nav-bar { display: none; }

    /* M-29 — nouen-cu-nav-center: bloco de navegação do mini-card de evento (desktop).
       O inline style foi removido do JSX — propriedades movidas para cá.
       No mobile: display:none via @media (ver bloco M-29 abaixo). */
    .nouen-cu-nav-center {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    /* Responsivo */
    @media (max-width: 960px) {
      .modo-roles-grid {
        grid-template-columns: 1fr;
        max-width: 480px;
      } /* M-xx */

      .modo-main {
        padding: 48px 24px 64px;
      } /* M-xx */
    }

    /* ==============================
       NOUEN TOAST
    ============================== */
    .nouen-toast {
      position: fixed;
      bottom: 24px;
      right: 24px;
      z-index: 9999;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 12px 16px;
      border-radius: var(--radius-sm);
      font-family: var(--font-label);
      font-size: 0.82rem;
      font-weight: 600;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
      animation: toast-in 0.25s ease;
      white-space: nowrap;
    }

    @keyframes toast-in {
      from {
        opacity: 0;
        transform: translateY(12px);
      } /* M-xx */

      to {
        opacity: 1;
        transform: translateY(0);
      } /* M-xx */
    }

    .nouen-toast--success {
      background: #059669;
      color: #ffffff;
    }

    .nouen-toast--error {
      background: #dc2626;
      color: #ffffff;
    }

    .nouen-toast__close {
      background: none;
      border: none;
      cursor: pointer;
      color: inherit;
      opacity: 0.6;
      padding: 0;
      display: flex;
      align-items: center;
      margin-left: 4px;
      transition: opacity var(--transition-fast);
    }

    .nouen-toast__close:hover {
      opacity: 1;
    }

    /* ==============================
   NOUEN MARKET HEADER
   ============================== */
    .nouen-market-header {
      background: var(--bg-card);
      border-bottom: 1px solid var(--border-subtle);
      position: sticky;
      top: 0;
      z-index: 50;
      font-family: var(--font-headline);
    }

    .nouen-market-header__inner {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 16px 24px;
      max-width: var(--max-width);
      margin: 0 auto;
    }

    .nouen-market-header__brand {
      display: flex;
      align-items: center;
      gap: 32px;
    }

    .nouen-market-header__name {
      font-size: 1.5rem;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: -0.05em;
      color: var(--text-primary);
    }

    .nouen-market-header__nav {
      display: none;
      gap: 24px;
    }

    @media (min-width: 768px) {
      .nouen-market-header__nav {
        display: flex; /* M-xx */
      } /* M-xx */
    }

    .nouen-market-header__link {
      font-size: 0.95rem;
      font-weight: 600;
      color: var(--text-tertiary);
      text-decoration: none;
      padding-bottom: 4px;
      border-bottom: 2px solid transparent;
      transition: all var(--transition-fast);
    }

    .nouen-market-header__link:hover {
      color: var(--text-primary);
    }

    .nouen-market-header__link.active {
      color: var(--text-primary);
      border-bottom-color: var(--accent-primary);
    }

    .nouen-market-header__actions {
      display: flex;
      align-items: center;
      gap: 16px;
    }

    .nouen-market-header__action-btn {
      background: transparent;
      border: none;
      color: var(--text-tertiary);
      cursor: pointer;
      padding: 8px;
      border-radius: var(--radius-sm);
      transition: all var(--transition-fast);
    }

    .nouen-market-header__action-btn:hover {
      background: var(--bg-secondary);
      color: var(--text-primary);
    }

    .nouen-market-header__profile {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: var(--accent-primary);
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.8rem;
      font-weight: 700;
      font-family: var(--font-body);
      margin-left: 8px;
    }

    /* ==============================
   MARKET HERO
   ============================== */
    .nouen-market-hero {
      width: 100%;
      position: relative;
      min-height: 100vh;
      display: flex;
      align-items: center;
      overflow: hidden;
      background-size: cover;
      background-position: center;
      padding-top: calc(var(--header-height, 80px) + 120px);
      padding-bottom: 140px;
    }

    /* Modificador para altura reduzida apenas na versão minimalista */
    .nouen-market-hero--minimalist {
      min-height: 80vh;
      padding-top: calc(var(--header-height, 80px) + 140px);
      padding-bottom: 80px;
    }

    .nouen-market-hero__container {
      width: 100%;
      position: relative;
      z-index: 10;
    }

    .nouen-market-hero__content {
      max-width: 48rem;
    }

    .nouen-market-hero__content>*+* {
      margin-top: 32px;
    }

    .nouen-market-hero__tag {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 4px 12px;
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(12px);
      border-radius: var(--radius-sm);
      border: 1px solid rgba(255, 255, 255, 0.2);
    }

    .nouen-market-hero__tag-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #ffffff;
    }

    .nouen-market-hero__tag-text {
      font-family: var(--font-label);
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 0.2em;
      color: #ffffff;
    }

    .nouen-market-hero-minimalist__glow {
      position: absolute;
      top: -20%;
      right: -15%;
      width: 800px;
      height: 800px;
      background: radial-gradient(circle, var(--glow-color, rgba(26, 86, 219, 0.12)) 0%, transparent 60%);
      border-radius: 50%;
      pointer-events: none;
      animation: minimalist-hero-glow 18s infinite alternate cubic-bezier(0.4, 0, 0.2, 1);
    }

    @keyframes minimalist-hero-glow {
      0%   { transform: translate(0, 0)        scale(1);    }
      33%  { transform: translate(-28px, 18px) scale(1.05); }
      66%  { transform: translate(18px, -24px) scale(0.96); }
      100% { transform: translate(-12px, 28px) scale(1.03); }
    }

    .nouen-market-hero__headline {
      font-family: var(--font-headline);
      font-size: 4.0rem;
      font-weight: 800;
      color: #ffffff;
      line-height: 1;
      letter-spacing: -0.04em;
      max-width: 580px;
      margin: 0 0 24px 0;
    }

    .nouen-market-hero__tagline {
      font-family: var(--font-body);
      color: rgba(255, 255, 255, 0.85);
      font-size: 1.28rem;
      line-height: 1.5;
      max-width: 600px;
      font-weight: 400;
      letter-spacing: -0.01em;
      margin: 0 0 48px 0;
    }

    @media (min-width: 768px) {
      .nouen-market-hero__tagline {
        font-size: 1.28rem;
      } /* M-xx */
    }

    .nouen-market-hero__actions {
      display: flex;
      flex-direction: column;
      gap: 16px;
      padding-top: 16px;
    }

    @media (min-width: 640px) {
      .nouen-market-hero__actions {
        flex-direction: row;
      } /* M-xx */
    }

    .nouen-market-hero__btn {
      padding: 16px 28px;
      font-size: 0.75rem;
      font-weight: 800;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      border-radius: var(--radius-sm);
      font-family: var(--font-headline);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      cursor: pointer;
      transition: all var(--transition-fast);
      border: 1px solid transparent;
    }

    .nouen-market-hero__btn--primary {
      background: var(--btn-bg, #ffffff);
      border-color: var(--btn-bg, transparent);
      color: #ffffff;
    }

    .nouen-market-hero__btn--primary:hover {
      filter: brightness(1.15);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
      color: #ffffff;
    }

    .nouen-market-hero__btn--outline {
      background: transparent;
      color: #ffffff;
      border: 1px solid #ffffff;
    }

    .nouen-market-hero__btn--outline:hover {
      background: rgba(255, 255, 255, 0.15);
      color: #ffffff;
    }

    .nouen-market-hero__btn .material-symbols-outlined {
      font-size: 1em;
    }

    /* ==============================
   MARKET SECTION HEADER
   ============================== */
    .nouen-market-section-header {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: flex-start;
      margin-bottom: 0;
      /* Let the container manage spacing */
    }

    .nouen-market-section-label {
      font-family: var(--font-label);
      font-size: 0.75rem;
      font-weight: 700;
      letter-spacing: 0.075em;
      text-transform: uppercase;
      margin-bottom: 8px;
      display: block;
    }

    .nouen-market-section-title {
      font-family: var(--font-headline);
      font-size: 2rem;
      font-weight: 800;
      letter-spacing: -0.04em;
      color: var(--text-primary);
      margin-bottom: 0;
      line-height: 1.1;
    }

    /* ==============================
   MARKET RECENT OPPORTUNITIES
   ============================== */
    .nouen-market-recent {
      padding-top: 96px;
      padding-bottom: 96px;
      background-color: var(--bg-primary);
    }

    .nouen-market-recent__header {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      margin-bottom: 32px;
      border-bottom: 1px solid var(--border-subtle);
      padding-bottom: 32px;
    }

    .nouen-market-recent__title {
      font-family: var(--font-headline);
      font-size: 2.25rem;
      font-weight: 800;
      letter-spacing: -0.025em;
      text-transform: uppercase;
      margin-bottom: 8px;
      color: var(--text-primary);
    }

    .nouen-market-recent__subtitle {
      font-family: var(--font-body);
      text-transform: uppercase;
      font-size: 0.6875rem;
      letter-spacing: 0.1em;
      color: var(--text-secondary);
    }

    .nouen-market-recent__link {
      font-family: var(--font-body);
      font-size: 0.6875rem;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      font-weight: 700;
      text-decoration: underline;
      text-underline-offset: 8px;
      color: var(--text-primary);
      transition: opacity var(--transition-fast);
    }

    .nouen-market-recent__link:hover {
      color: var(--link-hover-accent, var(--text-primary));
    }

    .nouen-market-recent__button-outline {
      font-family: var(--font-headline);
      font-size: 0.75rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      text-decoration: none;
      padding: 12px 24px;
      border-radius: var(--radius-sm);
      transition: all var(--transition-fast) ease-in-out;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      cursor: pointer;
      background-color: transparent;
      border: 1px solid var(--button-accent);
    }

    .nouen-market-recent__button-outline .material-symbols-outlined {
      font-size: 1.2em;
    }

    .nouen-market-recent__button-outline:hover {
      background-color: var(--button-accent);
      color: #FFFFFF !important;
    }

    .nouen-market-recent__grid {
      display: grid; /* M-xx */
      grid-template-columns: repeat(1, 1fr);
      gap: 20px;
    }

    .nouen-market-closing__grid {
      display: grid; /* M-xx */
      grid-template-columns: repeat(1, 1fr);
      gap: 20px;
    }

    @media (min-width: 640px) {

      .nouen-market-recent__grid,
      .nouen-market-closing__grid {
        grid-template-columns: repeat(2, 1fr);
      } /* M-xx */
    }

    @media (min-width: 1024px) {
      .nouen-market-recent__grid {
        grid-template-columns: repeat(3, 1fr);
      } /* M-xx */

      .nouen-market-closing {
        padding: 96px 0;
        background-color: var(--surface-container-low, #f6f3f2);
      } /* M-xx */

      .nouen-market-closing__layout {
        display: grid; /* M-xx */
        grid-template-columns: 1fr;
        gap: 48px;
        align-items: center; /* M-xx */
      } /* M-xx */

      .nouen-market-closing__left {
        display: flex; /* M-xx */
        flex-direction: column; /* M-xx */
        gap: 32px;
        align-self: flex-start;
      } /* M-xx */

      .nouen-market-closing__right {
        display: grid; /* M-xx */
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
      } /* M-xx */

      .nouen-market-closing__col-1,
      .nouen-market-closing__col-2 {
        display: flex; /* M-xx */
        flex-direction: column; /* M-xx */
        gap: 24px;
      } /* M-xx */

      @media (min-width: 1024px) {
        .nouen-market-closing__layout {
          grid-template-columns: 1fr 1fr; /* M-xx */
          gap: 64px;
        }

        .nouen-market-closing__right {
          grid-template-columns: 1fr 1fr; /* M-xx */
          justify-content: center; /* M-xx */
          gap: 32px;
        }

        .nouen-market-closing__col-2 {
          padding-top: 64px;
          /* Staggered effect */
        }
      } /* M-xx */

      @media (min-width: 768px) {
        .nouen-market-recent__grid {
          grid-template-columns: repeat(3, 1fr);
        }

        .nouen-market-recent__grid--4cols {
          grid-template-columns: repeat(4, 1fr);
        }
      } /* M-xx */

    } /* fecha @media (min-width: 1024px) aberto na linha 5248 */

      /* ==============================
   MARKET ABOUT SECTION
   ============================== */
      .nouen-market-about {
        padding: 96px 0;
        background-color: var(--bg-secondary);
        width: 100%; /* M-xx */
        position: relative; /* M-xx */
      } /* M-xx */

      .nouen-market-about__grid {
        display: flex; /* M-xx */
        flex-direction: column; /* M-xx */
        gap: 64px;
      } /* M-xx */

      .nouen-market-about__content {
        display: flex; /* M-xx */
        flex-direction: column; /* M-xx */
        justify-content: center; /* M-xx */
      } /* M-xx */

      .nouen-market-about__text {
        display: flex; /* M-xx */
        flex-direction: column; /* M-xx */
        gap: 24px;
        color: var(--text-secondary); /* M-xx */
        font-family: var(--font-body); /* M-xx */
        line-height: 1.6;
      } /* M-xx */

      .nouen-market-about__indicators {
        display: grid; /* M-xx */
        grid-template-columns: 1fr;
        gap: 1px;
        background-color: var(--border-color);
        border-radius: var(--radius-sm);
        overflow: hidden; /* M-xx */
      } /* M-xx */

      .nouen-market-about__card {
        background-color: var(--bg-primary);
        padding: 40px;
        display: flex; /* M-xx */
        flex-direction: column; /* M-xx */
        justify-content: space-between; /* M-xx */
        min-height: 256px;
      } /* M-xx */

      .nouen-market-about__card-header {
        display: flex; /* M-xx */
        align-items: center; /* M-xx */
        justify-content: space-between; /* M-xx */
        margin-bottom: 16px;
      } /* M-xx */

      .nouen-market-about__card-label {
        font-family: var(--font-label); /* M-xx */
        font-weight: 500;
        font-size: 0.6875rem;
        text-transform: uppercase; /* M-xx */
        letter-spacing: 0.1em; /* M-xx */
        color: var(--text-tertiary); /* M-xx */
      } /* M-xx */

      .nouen-market-about__card-icon {
        color: var(--text-tertiary); /* M-xx */
      } /* M-xx */

      .nouen-market-about__card-value {
        font-family: var(--font-headline); /* M-xx */
        font-size: 2.05rem;
        font-weight: 900;
        color: var(--text-primary); /* M-xx */
        letter-spacing: -0.05em;
        line-height: 1;
      } /* M-xx */

      .nouen-market-about__card-unit {
        font-size: 1.5rem;
        color: var(--text-secondary); /* M-xx */
      } /* M-xx */

      .nouen-market-about__card-desc {
        font-family: var(--font-body); /* M-xx */
        font-size: 0.875rem; /* M-xx */
        color: var(--text-secondary); /* M-xx */
        margin-top: 8px;
      } /* M-xx */

      .nouen-market-about__card--inverted {
        background-color: var(--text-primary);
        color: var(--bg-primary);
      } /* M-xx */

      .nouen-market-about__card--inverted .nouen-market-about__card-label,
      .nouen-market-about__card--inverted .nouen-market-about__card-icon,
      .nouen-market-about__card--inverted .nouen-market-about__card-unit {
        color: rgba(255, 255, 255, 0.6);
      } /* M-xx */

      .nouen-market-about__card--inverted .nouen-market-about__card-value {
        color: var(--bg-primary);
      } /* M-xx */

      .nouen-market-about__card--inverted .nouen-market-about__card-desc {
        color: rgba(255, 255, 255, 0.8);
      } /* M-xx */

      @media (min-width: 1024px) {
        .nouen-market-about__grid {
          flex-direction: row;
          align-items: center; /* M-xx */
        }

        .nouen-market-about__content {
          flex: 5;
          padding-right: 24px;
        }

        .nouen-market-about__indicators {
          flex: 7;
          grid-template-columns: 1fr 1fr; /* M-xx */
        }
      } /* M-xx */

      /* ==============================
   CU CARD
   ============================== */
      .nouen-cu-card {
        display: block;
        text-decoration: none;
        color: inherit;
        cursor: pointer; /* M-xx */
        container-type: inline-size;
      } /* M-xx */

      /* REF Overlay defaults */
      .nouen-cu-card__ref-mobile {
        display: none;
      } /* M-xx */
      .nouen-cu-card__ref-desktop {
        display: block;
      } /* M-xx */

      /* Mobile Actions defaults */
      .nouen-cu-card__actions-mobile {
        display: none;
      } /* M-xx */

      @media (min-width: 768px) {
        .nouen-cu-card--horizontal {
          display: flex; /* M-xx */
          flex-direction: row;
          gap: 24px;
          align-items: center; /* M-xx */
        }

        .nouen-cu-card--horizontal .nouen-cu-card__image-container {
          flex: 0 0 66.666%;
          margin-bottom: 0;
          aspect-ratio: 4 / 3;
          height: auto;
          min-height: unset;
        }

        .nouen-cu-card--horizontal .nouen-cu-card__content {
          flex: 1;
          /* consumes the remaining 33.333% */
          display: flex; /* M-xx */
          flex-direction: column; /* M-xx */
          justify-content: center; /* M-xx */
          padding-left: 24px;
          padding-right: 16px;
        }
      } /* M-xx */

      .nouen-cu-card__image-container {
        aspect-ratio: 4 / 3;
        background-color: var(--bg-secondary);
        overflow: hidden; /* M-xx */
        position: relative; /* M-xx */
        margin-bottom: 24px;
        border-radius: var(--radius-sm);
      } /* M-xx */

      .nouen-cu-card__image {
        width: 100%; /* M-xx */
        height: 100%; /* M-xx */
        object-fit: cover; /* M-xx */
        transition: transform 0.7s ease;
      } /* M-xx */

      .nouen-cu-card:hover .nouen-cu-card__image {
        transform: scale(1.03);
      } /* M-xx */

      .nouen-cu-card__badge {
        position: absolute; /* M-xx */
        top: 16px;
        right: 16px;
        background-color: var(--text-primary);
        color: #ffffff;
        font-size: 0.625rem; /* M-xx */
        padding: 4px 12px;
        font-weight: 700; /* M-xx */
        text-transform: uppercase; /* M-xx */
        letter-spacing: 0.1em; /* M-xx */
        border-radius: var(--radius-sm);
        transition: background-color var(--transition-fast) ease-in-out;
      } /* M-xx */

      .nouen-cu-card:hover .nouen-cu-card__badge {
        background-color: var(--cu-accent-color, var(--text-primary));
      } /* M-xx */

      .nouen-cu-card__timer-overlay {
        position: absolute; /* M-xx */
        bottom: 0;
        left: 0;
        width: 100%; /* M-xx */
        padding: 6px 12px;
        background: rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(4px); /* M-xx */
        -webkit-backdrop-filter: blur(4px); /* M-xx */
        color: #ffffff;
        font-family: var(--font-body); /* M-xx */
        font-size: 0.6875rem;
        font-weight: 600;
        display: flex; /* M-xx */
        justify-content: flex-end;
        align-items: center; /* M-xx */
        gap: 6px;
        letter-spacing: 0.05em;
        z-index: 2;
        transition: background-color 0.3s ease;
      } /* M-xx */

      @keyframes timer-overlay-pulse {
        0% {
          padding-top: 6px;
          padding-bottom: 6px;
          font-size: 0.6875rem;
        }

        15% {
          padding-top: 12px;
          padding-bottom: 12px;
          font-size: 0.8125rem;
        }

        85% {
          padding-top: 12px;
          padding-bottom: 12px;
          font-size: 0.8125rem;
        }

        100% {
          padding-top: 6px;
          padding-bottom: 6px;
          font-size: 0.6875rem;
        }
      } /* M-xx */

      .nouen-cu-card:hover .nouen-cu-card__timer-overlay {
        animation: timer-overlay-pulse 2.5s ease-in-out;
      } /* M-xx */

      .nouen-cu-card__timer-overlay--urgent {
        background: color-mix(in srgb, var(--status-urgent) 75%, transparent);
      } /* M-xx */

      .nouen-cu-card__content {
        display: flex; /* M-xx */
        flex-direction: column; /* M-xx */
        gap: 16px;
      } /* M-xx */

      .nouen-cu-card__header {
        display: flex; /* M-xx */
        justify-content: space-between; /* M-xx */
        align-items: flex-start;
      } /* M-xx */

      .nouen-cu-card__title {
        font-family: var(--font-headline); /* M-xx */
        font-size: 1.25rem;
        font-weight: 800; /* M-xx */
        line-height: 1.2; /* M-xx */
        color: var(--text-primary); /* M-xx */
        flex: 1;
        padding-right: 16px;
        display: -webkit-box; /* M-xx */
        -webkit-line-clamp: 2; /* M-xx */
        -webkit-box-orient: vertical; /* M-xx */
        overflow: hidden; /* M-xx */
        text-overflow: ellipsis; /* M-xx */
        min-height: 2.4em; /* M-xx */
      } /* M-xx */

      .nouen-cu-card__actions {
        display: flex; /* M-xx */
        gap: 8px; /* M-xx */
        align-items: center; /* M-xx */
        flex-shrink: 0;
      } /* M-xx */

      .nouen-cu-card__action-btn {
        background: transparent;
        border: none; /* M-xx */
        cursor: pointer; /* M-xx */
        color: var(--text-tertiary); /* M-xx */
        display: flex; /* M-xx */
        align-items: center; /* M-xx */
        justify-content: center; /* M-xx */
        transition: color var(--transition-fast); /* M-xx */
        padding: 0;
      } /* M-xx */

      .nouen-cu-card__action-btn:hover {
        color: var(--text-primary); /* M-xx */
      } /* M-xx */

      .nouen-cu-card__action-btn .material-symbols-outlined {
        font-size: 20px;
      } /* M-xx */

      .nouen-cu-card__footer {
        display: grid; /* M-xx */
        grid-template-columns: 1fr 1fr; /* M-xx */
        gap: 16px;
        border-top: 1px solid var(--border-subtle);
        padding-top: 16px;
      } /* M-xx */

      .nouen-cu-card__footer-left {
        position: relative; /* M-xx */
        overflow: hidden; /* M-xx */
        display: flex; /* M-xx */
        align-items: center; /* M-xx */
      } /* M-xx */

      .nouen-cu-card__location-block {
        display: flex; /* M-xx */
        flex-direction: column; /* M-xx */
        gap: 4px; /* M-xx */
        width: 100%; /* M-xx */
        overflow: hidden; /* M-xx */
        transition: transform 0.3s ease, opacity 0.3s ease;
        transform: translateY(0);
        opacity: 1;
      } /* M-xx */

      .nouen-cu-card__cta-block {
        position: absolute; /* M-xx */
        top: 0;
        left: 0;
        height: 100%; /* M-xx */
        width: 100%; /* M-xx */
        display: flex; /* M-xx */
        align-items: center; /* M-xx */
        justify-content: center; /* M-xx */
        padding: 0 16px;
        border-radius: var(--radius-sm);
        background-color: var(--text-primary);
        color: #ffffff;
        gap: 6px;
        font-family: var(--font-headline); /* M-xx */
        font-weight: 800; /* M-xx */
        font-size: 0.75rem; /* M-xx */
        text-transform: uppercase; /* M-xx */
        letter-spacing: 0.1em; /* M-xx */
        white-space: nowrap;
        transform: translateY(100%);
        opacity: 0;
        transition: transform 0.3s ease, opacity 0.3s ease;
      } /* M-xx */

      .nouen-cu-card:hover .nouen-cu-card__location-block {
        transform: translateY(-100%);
        opacity: 0;
      } /* M-xx */

      .nouen-cu-card:hover .nouen-cu-card__cta-block {
        transform: translateY(0);
        opacity: 1;
      } /* M-xx */

      .nouen-cu-card__price-block {
        display: flex; /* M-xx */
        flex-direction: column; /* M-xx */
        gap: 4px; /* M-xx */
        align-items: flex-end; /* M-xx */
        text-align: right;
      } /* M-xx */

      .nouen-cu-card__price-label,
      .nouen-cu-card__location-label {
        font-family: var(--font-body); /* M-xx */
        font-size: 0.6875rem;
        text-transform: uppercase; /* M-xx */
        letter-spacing: 0.05em;
        color: var(--text-secondary); /* M-xx */
        opacity: 0.6;
      } /* M-xx */

      .nouen-cu-card__location-value {
        font-family: var(--font-body); /* M-xx */
        font-weight: 700; /* M-xx */
        color: var(--text-primary); /* M-xx */
        font-size: 1rem; /* M-xx */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      } /* M-xx */

      .nouen-cu-card__price-value {
        font-family: var(--font-body); /* M-xx */
        font-weight: 700; /* M-xx */
        color: var(--text-primary); /* M-xx */
        font-size: 1.0625rem;
      } /* M-xx */


      .nouen-cu-card__lot {
        font-weight: 500;
        opacity: 0.85;
        color: var(--text-primary); /* M-xx */
        margin-right: 4px;
      } /* M-xx */

      .nouen-cu-card__separator {
        font-weight: 500;
        opacity: 0.85;
        color: var(--text-primary); /* M-xx */
        margin-right: 4px;
      } /* M-xx */

      .nouen-cu-card__price-value--highlight {
        color: var(--text-primary); /* M-xx */
      } /* M-xx */

      @container (max-width: 320px) {
        .nouen-cu-card__title {
          font-size: 1rem; /* M-xx */
        }

        .nouen-cu-card__location-value {
          font-size: 0.875rem; /* M-xx */
        }

        .nouen-cu-card__price-value {
          font-size: 0.9375rem;
        }

        .nouen-cu-card__price-label,
        .nouen-cu-card__location-label {
          font-size: 0.625rem; /* M-xx */
        }

        .nouen-cu-card__footer {
          gap: 8px; /* M-xx */
          padding-top: 12px;
        }

        .nouen-cu-card__content {
          gap: 12px;
        }

        .nouen-cu-card__cta-block {
          font-size: 0.6875rem;
          letter-spacing: 0.05em;
          padding: 0 4px;
          gap: 4px; /* M-xx */
        }

        .nouen-cu-card__cta-block .material-symbols-outlined {
          font-size: 12px !important;
        }

        .nouen-cu-card__timer-overlay {
          font-size: 0.5625rem;
          padding: 4px 8px;
        }

        .nouen-cu-card__timer-overlay .material-symbols-outlined {
          font-size: 10px !important;
        }
      } /* M-xx */

      /* ==============================
   MARKET EVENTS & ABOUT
   ============================== */
      .nouen-market-events-about {
        padding-top: 96px;
        padding-bottom: 96px;
        background-color: var(--bg-secondary);
      } /* M-xx */

      .nouen-market-events-about__container {
        display: flex; /* M-xx */
        flex-direction: column; /* M-xx */
        gap: 48px;
      } /* M-xx */

      @media (min-width: 768px) {
        .nouen-market-events-about__container {
          display: grid; /* M-xx */
          grid-template-columns: 1.6fr 1fr;
          grid-template-rows: auto 1fr;
          column-gap: 32px;
          row-gap: 0;
        }
      } /* M-xx */

      .nouen-market-events-section {
        display: contents;
      } /* M-xx */

      .nouen-market-events-section__title {
        font-family: var(--font-headline); /* M-xx */
        font-size: 2.25rem;
        font-weight: 800; /* M-xx */
        letter-spacing: -0.05em;
        text-transform: uppercase; /* M-xx */
        margin-bottom: 32px;
        color: var(--text-primary); /* M-xx */
        grid-column: 1 / 2;
        grid-row: 1;
      } /* M-xx */

      .nouen-market-events-list-wrapper {
        grid-column: 1 / 2;
        grid-row: 2;
        display: flex; /* M-xx */
        flex-direction: column; /* M-xx */
      } /* M-xx */

      .nouen-market-events-list {
        grid-column: 1 / 2;
        grid-row: 2;
        display: flex; /* M-xx */
        flex-direction: column; /* M-xx */
        gap: 16px;
        max-height: 624px;
        /* Limita a altura para comportar ~5 cards */
        overflow-y: auto;
        padding-right: 8px;
        /* Espaço para o scrollbar */
        padding-top: 4px;
        /* Respiro para não cortar a sombra/borda no hover do 1º item */
        padding-bottom: 4px;
        /* Respiro para o último item */
      } /* M-xx */

      /* Custom Scrollbar for Events List */
      .nouen-market-events-list::-webkit-scrollbar {
        width: 6px;
      } /* M-xx */

      .nouen-market-events-list::-webkit-scrollbar-track {
        background: var(--surface-container-low, #f6f3f2);
        border-radius: 4px;
      } /* M-xx */

      .nouen-market-events-list::-webkit-scrollbar-thumb {
        background: var(--text-tertiary, #cccccc);
        border-radius: 4px;
      } /* M-xx */

      .nouen-market-events-list::-webkit-scrollbar-thumb:hover {
        background: var(--text-secondary, #999999);
      } /* M-xx */

      .nouen-market-events-section__link {
        grid-column: 1 / 2;
        grid-row: 3;
        font-family: var(--font-body); /* M-xx */
        font-size: 0.6875rem;
        text-transform: uppercase; /* M-xx */
        letter-spacing: 0.1em; /* M-xx */
        font-weight: 700; /* M-xx */
        text-decoration: underline;
        text-underline-offset: 8px;
        color: var(--text-primary); /* M-xx */
        transition: opacity var(--transition-fast);
        display: inline-block;
        margin-top: 24px;
      } /* M-xx */

      .nouen-market-events-section__link:hover {
        opacity: 0.7;
      } /* M-xx */

      .nouen-market-event-card {
        display: flex; /* M-xx */
        align-items: center; /* M-xx */
        gap: 24px;
        background-color: var(--bg-primary);
        padding: 16px;
        border-radius: var(--radius-sm);
        transition: transform var(--transition-fast);
      } /* M-xx */

      /* Oculto no desktop — só aparece na versão mobile via @media (max-width: 767px) */
      .nouen-market-event-card__poster-mobile {
        display: none;
      } /* M-xx */

      /* Rodapé de ação rápida no desktop */
      .nouen-market-event-card__strip-footer {
        display: flex; /* M-xx */
        align-items: center; /* M-xx */
        justify-content: space-between; /* M-xx */
        border-top: 1px solid var(--border-subtle);
        padding-top: 12px;
        margin-top: 10px;
      } /* M-xx */

      /* Links do rodapé no desktop */
      .nouen-market-event-card__strip-footer-link {
        font-size: 0.625rem; /* M-xx */ /* 10px */
        font-weight: 700; /* M-xx */
        text-transform: uppercase; /* M-xx */
        letter-spacing: 0.05em;
        color: var(--card-accent, var(--accent-primary));
        display: inline-flex;
        align-items: center; /* M-xx */
        gap: 2px;
        white-space: nowrap;
      } /* M-xx */

      .nouen-market-event-card:hover {
        transform: translateY(-2px);
      } /* M-xx */

      .nouen-market-event-card__date {
        width: 64px;
        height: 64px;
        display: flex; /* M-xx */
        flex-direction: column; /* M-xx */
        align-items: center; /* M-xx */
        justify-content: center; /* M-xx */
        font-family: var(--font-body); /* M-xx */
        font-weight: 800; /* M-xx */
        background-color: var(--text-primary);
        color: #ffffff;
        flex-shrink: 0;
        border-radius: var(--radius-sm);
      } /* M-xx */

      .nouen-market-event-card__day {
        font-size: 1.25rem;
        line-height: 1;
      } /* M-xx */

      .nouen-market-event-card__month {
        font-size: 0.625rem; /* M-xx */
        text-transform: uppercase; /* M-xx */
      } /* M-xx */

      .nouen-market-event-card__info {
        flex: 1;
      } /* M-xx */

      .nouen-market-event-card__title {
        font-family: var(--font-headline); /* M-xx */
        font-weight: 700; /* M-xx */
        font-size: 1.125rem;
        color: var(--text-primary); /* M-xx */
        margin-bottom: 4px; /* M-xx */
      } /* M-xx */

      .nouen-market-event-card__location {
        font-family: var(--font-body); /* M-xx */
        font-size: 0.875rem; /* M-xx */
        color: var(--text-secondary); /* M-xx */
      } /* M-xx */

      .nouen-market-event-card__action {
        color: var(--text-primary); /* M-xx */
        border: none; /* M-xx */
        background: transparent;
        cursor: pointer; /* M-xx */
        transition: transform var(--transition-fast);
      } /* M-xx */

      .nouen-market-event-card:hover .nouen-market-event-card__action {
        transform: translateX(4px);
      } /* M-xx */

      .nouen-market-about-section {
        grid-column: 2 / 3;
        grid-row: 2;
        background-color: var(--bg-primary);
        padding: 48px;
        display: flex; /* M-xx */
        flex-direction: column; /* M-xx */
        justify-content: center; /* M-xx */
        border-top: 2px solid var(--text-primary);
        border-radius: var(--radius-sm);
      } /* M-xx */

      .nouen-market-about-section__title {
        font-family: var(--font-headline); /* M-xx */
        font-size: 1.5rem;
        font-weight: 800; /* M-xx */
        text-transform: uppercase; /* M-xx */
        letter-spacing: -0.025em;
        margin-bottom: 16px;
        color: var(--text-primary); /* M-xx */
      } /* M-xx */

      .nouen-market-about-section__text {
        font-family: var(--font-body); /* M-xx */
        font-weight: 300;
        line-height: 1.6;
        color: var(--text-secondary); /* M-xx */
        margin-bottom: 32px;
      } /* M-xx */

      .nouen-market-about-section__link {
        display: inline-flex;
        align-items: center; /* M-xx */
        gap: 8px; /* M-xx */
        font-family: var(--font-body); /* M-xx */
        font-weight: 700; /* M-xx */
        color: var(--text-primary); /* M-xx */
        text-transform: uppercase; /* M-xx */
        font-size: 0.875rem; /* M-xx */
        letter-spacing: 0.05em;
        text-decoration: none;
      } /* M-xx */

      .nouen-market-about-section__link:hover .material-symbols-outlined {
        transform: translateX(4px);
      } /* M-xx */

      /* ============================== */
      /* NOUEN CHECKOUT */
      /* ============================== */

      /* global-intencional: container base grid para checkout (M-11) */
      .nouen-checkout__grid { /* M-11 */
        display: grid; /* M-xx */ /* M-11 */
        grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); /* M-11 */
      } /* M-11 */

      /* ==============================
   NOUEN VITRINE
   ============================== */

      .nouen-vitrine {
        min-height: calc(100vh - var(--header-height));
        background: var(--bg-primary);
        padding-top: 80px;
      } /* M-xx */

      /* ── Header ── */

      .nouen-vitrine__header {
        background: var(--bg-primary);
      } /* M-xx */

      .nouen-vitrine__header-inner {
        max-width: var(--max-width);
        margin: 0 auto;
        padding: 0 var(--container-padding) 0;
        position: relative; /* M-xx */
      } /* M-xx */

      .nouen-vitrine__filter-wrapper {
        background: var(--bg-primary);
        position: sticky;
        top: 64px;
        /* Exact height of MarketHeader (border-box) */
        z-index: 40;
      } /* M-xx */

      .nouen-vitrine__filter-wrapper .nouen-vitrine__header-inner {
        padding-bottom: 4px;
        /* 16px (filter-bar padding) + 4px = 20px total to gray line */
      } /* M-xx */

      .nouen-vitrine__filter-wrapper .nouen-vitrine__header-inner::after {
        content: '';
        position: absolute; /* M-xx */
        bottom: 0;
        left: var(--container-padding);
        right: var(--container-padding);
        height: 1px;
        background: var(--border-subtle);
      } /* M-xx */

      /* Breadcrumb is using nouen-cu-breadcrumb now */

      .nouen-vitrine__title-row {
        display: flex; /* M-xx */
        align-items: center; /* M-xx */
        justify-content: flex-start;
        gap: 24px;
        margin-bottom: 4px; /* M-xx */
        /* 4px + 16px (filter-bar padding) = 20px total from title to filters */
      } /* M-xx */

      .nouen-vitrine__title {
        font-family: var(--font-headline); /* M-xx */
        font-size: 2rem;
        font-weight: 800; /* M-xx */
        letter-spacing: -0.03em;
        color: var(--text-primary); /* M-xx */
        line-height: 1.1;
      } /* M-xx */

      /* ── Title-left: h1 + subtitle ── */

      .nouen-vitrine__title-left {
        display: flex; /* M-xx */
        flex-direction: column; /* M-xx */
        align-items: flex-start;
        gap: 4px; /* M-xx */
        flex-shrink: 0;
        min-width: 332px;
      } /* M-xx */

      /* ── Active Event Chip (shown in title row when event filter is on) ── */

      .nouen-vitrine__event-chip {
        display: inline-flex;
        align-items: center; /* M-xx */
        gap: 6px;
        padding: 4px 10px 4px 10px;
        border-radius: var(--radius-md);
        background: var(--vitrine-accent, var(--accent-primary));
        color: #ffffff;
        font-family: var(--font-body); /* M-xx */
        font-size: 0.75rem; /* M-xx */
        font-weight: 600;
        white-space: nowrap;
        max-width: 240px;
        overflow: hidden; /* M-xx */
        text-overflow: ellipsis; /* M-xx */
      } /* M-xx */

      .nouen-vitrine-events-section {
        margin-bottom: 24px;
        /* Space between Events and CUs (plus 8px padding on grid = 32px) */
        position: relative; /* M-xx */
      } /* M-xx */

      .nouen-vitrine-events-nav-btn {
        position: absolute; /* M-xx */
        top: 50%;
        transform: translateY(-50%);
        display: inline-flex;
        align-items: center; /* M-xx */
        justify-content: center; /* M-xx */
        background: transparent;
        border: none; /* M-xx */
        color: var(--text-primary); /* M-xx */
        cursor: pointer; /* M-xx */
        z-index: 10; /* M-xx */
        transition: opacity var(--transition-fast);
      } /* M-xx */

      .nouen-vitrine-events-nav-btn:hover {
        opacity: 0.7;
      } /* M-xx */

      .nouen-vitrine-events-nav-btn .material-symbols-outlined {
        font-size: 40px;
      } /* M-xx */

      .nouen-vitrine-events-nav-btn--left {
        left: -40px;
      } /* M-xx */

      .nouen-vitrine-events-nav-btn--right {
        right: -40px;
      } /* M-xx */

      @media (max-width: 767px) {
        .nouen-vitrine-events-nav-btn {
          display: none;
        }
      } /* M-xx */

      .nouen-vitrine-events-grid {
        display: flex; /* M-xx */
        gap: 20px;
        overflow-x: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding-bottom: 8px;
      } /* M-xx */

      .nouen-vitrine-events-grid::-webkit-scrollbar {
        display: none;
      } /* M-xx */

      /* Base card width for mobile */
      .nouen-vitrine-event-strip__card {
        width: calc(100% - 32px);
        flex-shrink: 0;
      } /* M-xx */

      @media (min-width: 768px) {
        .nouen-vitrine-events-grid {
          gap: 20px;
        }

        .nouen-vitrine-event-strip__card {
          width: calc((100% - 20px) / 2);
        }
      } /* M-xx */

      @media (min-width: 1024px) {
        .nouen-vitrine-events-grid {
          gap: 20px;
        }

        .nouen-vitrine-event-strip__card {
          width: calc((100% - 40px) / 3);
        }
      } /* M-xx */

      .nouen-vitrine__event-chip-close {
        font-size: 14px !important;
        color: #ffffff;
        opacity: 0.7;
        cursor: pointer; /* M-xx */
        text-decoration: none;
        line-height: 1;
        transition: opacity var(--transition-fast);
        flex-shrink: 0;
      } /* M-xx */

      .nouen-vitrine__event-chip-close:hover {
        opacity: 1;
        color: #ffffff;
      } /* M-xx */

      .nouen-vitrine__result-count {
        font-family: var(--font-body); /* M-xx */
        font-size: 0.8125rem;
        color: var(--text-tertiary); /* M-xx */
        white-space: nowrap;
        padding-bottom: 4px;
        flex-shrink: 0;
      } /* M-xx */

      .nouen-vitrine__result-count strong {
        font-weight: 700; /* M-xx */
        color: var(--text-secondary); /* M-xx */
      } /* M-xx */


      .nouen-vitrine-event-strip__card {
        display: flex; /* M-xx */
        flex-direction: column; /* M-xx */
        border: 1px solid var(--border-subtle);
        border-radius: var(--radius-md);
        background: var(--bg-card);
        cursor: pointer; /* M-xx */
        white-space: nowrap;
        flex-shrink: 0;
        font-family: var(--font-body); /* M-xx */
        transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.7s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.15s ease;
        position: relative; /* M-xx */
        z-index: 1;
        overflow: hidden; /* M-xx */
      } /* M-xx */

      /* Layout base do rodapé do EventStrip card — styles de cor/tipografia permanecem inline */
      .nouen-vitrine-event-strip__card-footer {
        display: flex; /* M-xx */
        align-items: center; /* M-xx */
        justify-content: space-between; /* M-xx */
        padding: 8px 12px;
      } /* M-xx */

      .nouen-vitrine-event-strip__card:hover {
        box-shadow: 0 16px 40px color-mix(in srgb, var(--strip-accent, var(--accent-primary)) 28%, rgba(0, 0, 0, 0.10));
        z-index: 10; /* M-xx */
      } /* M-xx */

      /* Apenas na Home, aplica o scale além do translateY */
      .nouen-home-events-grid .nouen-vitrine-event-strip__card:hover {
        transform: scale(1.08) translateY(-4px);
      } /* M-xx */

      /* Vizinhos recuam quando qualquer card está em hover */
      .nouen-home-events-grid:hover .nouen-vitrine-event-strip__card:not(:hover) {
        opacity: 0.65;
      } /* M-xx */

      .nouen-vitrine-event-strip__card--active {
        background-color: var(--text-primary);
        box-shadow: none;
      } /* M-xx */

      .nouen-vitrine-event-strip__card--active .nouen-vitrine-event-strip__card-title {
        color: #FFFFFF;
      } /* M-xx */

      .nouen-vitrine-event-strip__card--active .nouen-vitrine-event-strip__card-meta {
        color: rgba(255, 255, 255, 0.7);
      } /* M-xx */

      .nouen-vitrine-event-strip__card--active .nouen-vitrine-event-strip__badge {
        color: rgba(255, 255, 255, 0.8);
      } /* M-xx */

      .nouen-vitrine-event-strip__card--active .nouen-vitrine-event-strip__badge--live {
        background-color: rgba(255, 255, 255, 0.2);
        color: #FFFFFF;
      } /* M-xx */

      .nouen-vitrine-event-strip__card-date {
        width: 50px;
        height: 50px;
        display: flex; /* M-xx */
        flex-direction: column; /* M-xx */
        align-items: center; /* M-xx */
        justify-content: center; /* M-xx */
        font-family: var(--font-body); /* M-xx */
        background-color: var(--strip-accent, var(--accent-primary));
        color: #ffffff;
        border-radius: var(--radius-sm);
        flex-shrink: 0;
        transition: all var(--transition-fast);
      } /* M-xx */

      .nouen-vitrine-event-strip__card-day {
        font-size: 1.125rem;
        font-weight: 800; /* M-xx */
        line-height: 1;
      } /* M-xx */

      .nouen-vitrine-event-strip__card-month {
        font-size: 0.625rem; /* M-xx */
        font-weight: 700; /* M-xx */
        text-transform: uppercase; /* M-xx */
        letter-spacing: 0.05em;
        margin-top: 2px;
        line-height: 1;
      } /* M-xx */

      .nouen-vitrine-event-strip__card-body {
        display: flex; /* M-xx */
        flex-direction: column; /* M-xx */
        justify-content: center; /* M-xx */
        align-self: center;
        gap: 0;
        min-width: 0;
      } /* M-xx */

      .nouen-vitrine-event-strip__badge {
        display: inline-flex;
        align-items: center; /* M-xx */
        gap: 4px; /* M-xx */
        font-size: 0.625rem; /* M-xx */
        font-weight: 700; /* M-xx */
        text-transform: uppercase; /* M-xx */
        letter-spacing: 0.06em;
        color: var(--text-tertiary); /* M-xx */
        padding: 2px 6px;
        border-radius: 4px;
      } /* M-xx */

      .nouen-vitrine-event-strip__badge--live {
        color: #16a34a;
        background-color: rgba(22, 163, 100, 0.1);
      } /* M-xx */

      .nouen-vitrine-event-strip__badge--open {
        color: #d97706;
        background-color: rgba(217, 119, 6, 0.1);
      } /* M-xx */

      .nouen-vitrine-event-strip__badge-dot {
        width: 5px;
        height: 5px;
        border-radius: 50%; /* M-xx */
        background: currentColor;
        animation: pulse 1.5s infinite;
      } /* M-xx */

      @keyframes pulse {

        0%,
        100% {
          opacity: 1;
        }

        50% {
          opacity: 0.4;
        }
      } /* M-xx */

      .nouen-vitrine-event-strip__card-title {
        font-size: 0.9375rem;
        font-weight: 700; /* M-xx */
        color: var(--text-primary); /* M-xx */
        max-width: 200px;
        overflow: hidden; /* M-xx */
        text-overflow: ellipsis; /* M-xx */
      } /* M-xx */

      .nouen-vitrine-event-strip__card-meta {
        display: flex; /* M-xx */
        align-items: center; /* M-xx */
        gap: 3px;
        font-size: 0.6875rem;
        color: var(--text-tertiary); /* M-xx */
      } /* M-xx */

      .nouen-vitrine-event-strip__card-action {
        display: flex; /* M-xx */
        align-items: center; /* M-xx */
        justify-content: center; /* M-xx */
        padding: 0 10px 0 2px;
        font-size: 14px !important;
        color: var(--text-tertiary); /* M-xx */
        transition: color var(--transition-fast); /* M-xx */
        margin-bottom: 2px;
      } /* M-xx */

      .nouen-vitrine-event-strip__card--active .nouen-vitrine-event-strip__card-action {
        color: rgba(255, 255, 255, 0.7);
      } /* M-xx */

      .nouen-vitrine-event-strip__card--active:hover .nouen-vitrine-event-strip__card-action {
        color: #FFFFFF;
      } /* M-xx */

      .nouen-vitrine-event-strip__card:hover:not(.nouen-vitrine-event-strip__card--active) .nouen-vitrine-event-strip__card-action {
        color: var(--strip-accent, var(--accent-primary));
      } /* M-xx */

      /* ── Card Poster (thumbnail do pôster do evento) ── */

      .nouen-vitrine-event-strip__card-poster {
        width: 43px;
        height: 54px;
        flex-shrink: 0;
        border-radius: var(--radius-sm);
        overflow: hidden; /* M-xx */
        margin-left: auto;
      } /* M-xx */

      .nouen-vitrine-event-strip__card-poster img {
        width: 100%; /* M-xx */
        height: 100%; /* M-xx */
        object-fit: cover; /* M-xx */
        display: block;
        transition: transform var(--transition-slow);
      } /* M-xx */

      .nouen-vitrine-event-strip__card:hover .nouen-vitrine-event-strip__card-poster img {
        transform: scale(1.06);
      } /* M-xx */

      /* Fallback: sem imagem */
      .nouen-vitrine-event-strip__card-poster--fallback {
        background: var(--bg-secondary);
        border: 1px solid var(--border-subtle);
        display: flex; /* M-xx */
        align-items: center; /* M-xx */
        justify-content: center; /* M-xx */
        color: var(--text-tertiary); /* M-xx */
        font-size: 20px;
        transition: border-color var(--transition-fast);
      } /* M-xx */

      /* Fallback hover: a elevação do card já comunica a interação */

      /* ── Filter Bar ── */
      
      .nouen-vitrine__mobile-view-toggle { display: none !important; } /* global-intencional: R5 — ocultamento padrão do toggle mobile */

      .nouen-vitrine__filter-bar {
        padding: 16px 0;
        display: flex; /* M-xx */
        align-items: center; /* M-xx */
        gap: 12px;
        flex-wrap: wrap;
      } /* M-xx */

      /* chips-row: no desktop é transparente para o flex do filter-bar (display:contents).
         No mobile, override para display:flex com scroll horizontal. */
      .nouen-vitrine__chips-row {
        display: contents;
      } /* M-xx */

      .nouen-vitrine__filter-group {
        display: flex; /* M-xx */
        align-items: center; /* M-xx */
        gap: 6px;
      } /* M-xx */

      .nouen-vitrine__filter-label {
        font-family: var(--font-label); /* M-xx */
        font-size: 0.6875rem;
        font-weight: 700; /* M-xx */
        text-transform: uppercase; /* M-xx */
        letter-spacing: 0.1em; /* M-xx */
        color: var(--text-tertiary); /* M-xx */
        white-space: nowrap;
        margin-right: 2px;
      } /* M-xx */

      .nouen-vitrine__filter-chip {
        display: inline-flex;
        align-items: center; /* M-xx */
        gap: 5px;
        padding: 5px 14px;
        border: 1px solid var(--border-subtle);
        border-radius: var(--radius-md);
        background: var(--bg-card);
        font-family: var(--font-body); /* M-xx */
        font-size: 0.8125rem;
        font-weight: 500;
        color: var(--text-secondary); /* M-xx */
        cursor: pointer; /* M-xx */
        transition: all var(--transition-fast);
        white-space: nowrap;
        text-decoration: none;
      } /* M-xx */

      .nouen-vitrine__filter-chip:hover {
        border-color: var(--border-active);
        color: var(--text-primary); /* M-xx */
        background: var(--bg-secondary);
      } /* M-xx */

      .nouen-vitrine__filter-chip--active {
        background: var(--vitrine-accent, var(--text-primary));
        border-color: var(--vitrine-accent, var(--text-primary));
        color: #ffffff;
        font-weight: 600;
      } /* M-xx */

      .nouen-vitrine__filter-chip--active:hover {
        background: var(--vitrine-accent, var(--text-primary));
        color: #ffffff;
        opacity: 0.9;
      } /* M-xx */

      .nouen-vitrine__filter-divider {
        width: 1px;
        height: 28px;
        background: var(--border-subtle);
        flex-shrink: 0;
        margin: 0 4px;
      } /* M-xx */

      .nouen-vitrine__sort-select {
        padding: 5px 32px 5px 14px;
        border: 1px solid var(--border-subtle);
        border-radius: var(--radius-md);
        background: var(--bg-card);
        font-family: var(--font-body); /* M-xx */
        font-size: 0.8125rem;
        font-weight: 500;
        color: var(--text-secondary); /* M-xx */
        cursor: pointer; /* M-xx */
        transition: all var(--transition-fast);
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23757575' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 12px center;
      } /* M-xx */

      .nouen-vitrine__sort-select:hover,
      .nouen-vitrine__sort-select:focus {
        border-color: var(--border-active);
        color: var(--text-primary); /* M-xx */
        outline: none;
      } /* M-xx */

      /* ── Search ── */

      .nouen-vitrine__search-wrapper {
        position: relative; /* M-xx */
        flex: 1;
        min-width: 200px;
        max-width: 360px;
        margin-left: auto;
      } /* M-xx */

      .nouen-vitrine__search-icon {
        position: absolute; /* M-xx */
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 18px; /* M-xx */
        color: var(--text-tertiary); /* M-xx */
        pointer-events: none;
      } /* M-xx */

      .nouen-vitrine__search-input {
        width: 100%; /* M-xx */
        padding: 6px 36px 6px 38px;
        border: 1px solid var(--border-subtle);
        border-radius: var(--radius-md);
        background: var(--bg-card);
        font-family: var(--font-body); /* M-xx */
        font-size: 0.8125rem;
        color: var(--text-primary); /* M-xx */
        transition: all var(--transition-fast);
      } /* M-xx */

      .nouen-vitrine__search-input::placeholder {
        color: var(--text-tertiary); /* M-xx */
      } /* M-xx */

      .nouen-vitrine__search-input:focus {
        outline: none;
        border-color: var(--vitrine-accent, var(--accent-primary));
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--vitrine-accent, var(--accent-primary)) 12%, transparent);
      } /* M-xx */

      .nouen-vitrine__search-clear {
        position: absolute; /* M-xx */
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 16px;
        color: var(--text-tertiary); /* M-xx */
        cursor: pointer; /* M-xx */
        background: none;
        border: none; /* M-xx */
        padding: 2px;
        line-height: 1;
        transition: color var(--transition-fast); /* M-xx */
      } /* M-xx */

      .nouen-vitrine__search-clear:hover {
        color: var(--text-primary); /* M-xx */
      } /* M-xx */

      /* ── Body (filter bar + grid layout) ── */

      .nouen-vitrine__body {
        max-width: var(--max-width);
        margin: 0 auto;
        padding: 20px var(--container-padding) 80px;
      } /* M-xx */

      /* ── Grid ── */

      .nouen-vitrine__grid {
        display: grid; /* M-xx */
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
      } /* M-xx */

      .nouen-vitrine__grid--4-cols {
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
      } /* M-xx */

      /* ── Empty State ── */

      .nouen-vitrine__empty {
        grid-column: 1 / -1;
        display: flex; /* M-xx */
        flex-direction: column; /* M-xx */
        align-items: center; /* M-xx */
        justify-content: center; /* M-xx */
        padding: 80px 24px;
        text-align: center;
        gap: 16px;
      } /* M-xx */

      .nouen-vitrine__empty-icon {
        font-size: 48px;
        color: var(--text-tertiary); /* M-xx */
        opacity: 0.4;
      } /* M-xx */

      .nouen-vitrine__empty-title {
        font-family: var(--font-headline); /* M-xx */
        font-size: 1.25rem;
        font-weight: 700; /* M-xx */
        color: var(--text-primary); /* M-xx */
        letter-spacing: -0.02em;
      } /* M-xx */

      .nouen-vitrine__empty-desc {
        font-family: var(--font-body); /* M-xx */
        font-size: 0.9375rem;
        color: var(--text-secondary); /* M-xx */
        max-width: 360px;
        line-height: 1.6;
      } /* M-xx */

      .nouen-vitrine__empty-cta {
        display: inline-flex;
        align-items: center; /* M-xx */
        gap: 8px; /* M-xx */
        padding: 10px 24px;
        border: 1.5px solid var(--text-primary);
        border-radius: 100px;
        font-family: var(--font-body); /* M-xx */
        font-size: 0.875rem; /* M-xx */
        font-weight: 600;
        color: var(--text-primary); /* M-xx */
        text-decoration: none;
        transition: all var(--transition-fast);
        margin-top: 8px;
      } /* M-xx */

      .nouen-vitrine__empty-cta:hover {
        background: var(--text-primary);
        color: #ffffff;
      } /* M-xx */

      /* ── Pagination ── */

      .nouen-vitrine__pagination {
        display: flex; /* M-xx */
        align-items: center; /* M-xx */
        justify-content: center; /* M-xx */
        gap: 8px; /* M-xx */
        padding-top: 48px;
      } /* M-xx */

      .nouen-vitrine__pagination-btn {
        display: inline-flex;
        align-items: center; /* M-xx */
        gap: 6px;
        padding: 8px 20px;
        border: 1px solid var(--border-subtle);
        border-radius: 100px;
        background: var(--bg-card);
        font-family: var(--font-body); /* M-xx */
        font-size: 0.875rem; /* M-xx */
        font-weight: 600;
        color: var(--text-secondary); /* M-xx */
        text-decoration: none;
        transition: all var(--transition-fast);
      } /* M-xx */

      .nouen-vitrine__pagination-btn:hover {
        border-color: var(--border-active);
        color: var(--text-primary); /* M-xx */
      } /* M-xx */

      .nouen-vitrine__pagination-btn--disabled {
        opacity: 0.35;
        pointer-events: none;
        cursor: not-allowed;
      } /* M-xx */

      .nouen-vitrine__pagination-info {
        font-family: var(--font-body); /* M-xx */
        font-size: 0.8125rem;
        color: var(--text-tertiary); /* M-xx */
        padding: 0 8px;
        white-space: nowrap;
      } /* M-xx */

      .nouen-vitrine__pagination-info strong {
        font-weight: 700; /* M-xx */
        color: var(--text-secondary); /* M-xx */
      } /* M-xx */

      /* ==============================
   EVENT PANEL (SALA DE DISPUTA)
   ============================== */
      .nouen-event-panel {
        display: flex; /* M-xx */
        flex-direction: column; /* M-xx */
        height: 100vh;
        padding-top: 0; /* M-xx */
        overflow: hidden; /* M-xx */
        background-color: var(--bg-primary);
      } /* M-xx */

      /* ── Breadcrumb Bar (acima da barra arquitetônica) ── */
      .nouen-event-panel__breadcrumb-bar {
        flex-shrink: 0;
        width: 100%; /* M-xx */
        padding: 16px var(--container-padding) 0;
        max-width: var(--max-width);
        margin: 0 auto;
      } /* M-xx */

      /* ── Barra Arquitetônica do Evento (dark full-width) ── */
      .nouen-event-panel__arch-bar {
        flex-shrink: 0;
        width: 100%; /* M-xx */
        background-color: #000000;
        color: #ffffff;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
      } /* M-xx */

      .nouen-event-panel__arch-bar-inner {
        display: flex; /* M-xx */
        align-items: center; /* M-xx */
        justify-content: space-between; /* M-xx */
        gap: 24px;
        width: 100%; /* M-xx */
        max-width: var(--max-width);
        margin: 0 auto;
        padding: 10px var(--container-padding);
        min-height: 64px;
      } /* M-xx */

      /* Esquerda */
      .nouen-event-panel__arch-left {
        display: flex; /* M-xx */
        flex-direction: column; /* M-xx */
        gap: 6px;
        min-width: 0;
      } /* M-xx */

      .nouen-event-panel__arch-title {
        display: flex; /* M-xx */
        align-items: center; /* M-xx */
        font-family: var(--font-headline); /* M-xx */
        font-size: 1.05rem;
        font-weight: 800; /* M-xx */
        letter-spacing: -0.03em;
        color: #ffffff;
        margin: 0;
        line-height: 1.3;
        max-width: 800px;
      } /* M-xx */

      .nouen-event-panel__arch-title-text {
        white-space: nowrap;
        overflow: visible;
        text-overflow: clip;
        min-width: 0;
      } /* M-xx */

      .nouen-event-panel__arch-title-prefix {
        font-weight: 500;
        opacity: 0.75;
        margin-right: 2px;
      } /* M-xx */

      .nouen-event-panel__arch-title-icon {
        font-size: 40px;
        opacity: 0.75;
        margin-right: 8px;
        flex-shrink: 0;
        font-variation-settings: 'FILL' 0, 'wght' 100, 'GRAD' 0, 'opsz' 40;
      } /* M-xx */

      /* Direita */
      .nouen-event-panel__arch-right {
        display: flex; /* M-xx */
        align-items: center; /* M-xx */
        gap: 24px;
        flex-shrink: 0;
      } /* M-xx */

      .nouen-event-panel__arch-clock-block,
      .nouen-event-panel__arch-timer-block {
        display: flex; /* M-xx */
        flex-direction: column; /* M-xx */
        align-items: flex-end; /* M-xx */
        gap: 2px;
      } /* M-xx */

      .nouen-event-panel__arch-clock-label {
        font-family: var(--font-label); /* M-xx */
        font-size: 0.5625rem;
        font-weight: 700; /* M-xx */
        letter-spacing: 0.2em;
        text-transform: uppercase; /* M-xx */
        color: rgba(255, 255, 255, 0.45);
        white-space: nowrap;
        line-height: 1;
      } /* M-xx */

      .nouen-event-panel__arch-clock-value {
        font-family: var(--font-body); /* M-xx */
        font-size: 1.0rem;
        font-weight: 300;
        font-variant-numeric: tabular-nums;
        color: rgba(255, 255, 255, 0.9);
        white-space: nowrap;
        letter-spacing: 0.02em;
      } /* M-xx */

      .nouen-event-panel__arch-countdown {
        font-family: var(--font-body); /* M-xx */
        font-size: 1.0rem;
        font-weight: 700; /* M-xx */
        letter-spacing: 0.02em;
        font-variant-numeric: tabular-nums;
        color: rgba(255, 255, 255, 0.9);
      } /* M-xx */

      .nouen-event-panel__arch-close-btn {
        display: flex; /* M-xx */
        align-items: center; /* M-xx */
        gap: 6px;
        background: transparent;
        border: 1px solid rgba(255, 255, 255, 0.4);
        color: #ffffff;
        padding: 8px 16px;
        border-radius: var(--radius-sm);
        font-family: var(--font-body); /* M-xx */
        font-size: 0.70rem;
        font-weight: 600;
        text-transform: uppercase; /* M-xx */
        letter-spacing: 0.05em;
        cursor: pointer; /* M-xx */
        transition: all 0.3s ease;
      } /* M-xx */

      .nouen-event-panel__arch-close-btn:hover {
        background: #ffffff;
        color: #000000;
        border-color: #ffffff;
      } /* M-xx */

      /* Modal interno do painel */
      .nouen-event-panel__modal-overlay {
        position: fixed;
        inset: 0;
        z-index: 9999;
        display: flex; /* M-xx */
        align-items: center; /* M-xx */
        justify-content: center; /* M-xx */
        background: rgba(0, 0, 0, 0.6);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
      } /* M-xx */

      .nouen-event-panel__modal-card {
        background: var(--bg-card);
        padding: 40px;
        border-radius: var(--radius-md);
        border: 1px solid var(--border-subtle);
        width: 100%; /* M-xx */
        max-width: 440px;
        text-align: center;
        box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4);
      } /* M-xx */

      /* Ações do CUFocoCard — aparecem em hover, sem afetar o layout do título */
      .nouen-event-panel__cu-actions {
        position: absolute; /* M-xx */
        top: 0;
        right: 0;
        display: flex; /* M-xx */
        gap: 8px; /* M-xx */
        align-items: center; /* M-xx */
        opacity: 0;
        transition: opacity 0.2s ease;
      } /* M-xx */

      .nouen-cu-card:hover .nouen-event-panel__cu-actions {
        opacity: 1;
      } /* M-xx */

      .nouen-event-panel__arch-divider {
        width: 1px;
        height: 32px; /* M-xx */
        background: rgba(255, 255, 255, 0.15);
        flex-shrink: 0;
      } /* M-xx */

      /* M-42: Badge de Status Dinâmico (Desktop) — substitui o badge fixo "AO VIVO" */
      .nouen-event-panel__arch-status-badge--desktop {
        display: inline-flex;
        align-items: center; /* M-xx */
        align-self: center;
        gap: 8px; /* M-xx */
        padding: 6px 12px;
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.15);
        border-radius: 4px;
        transition: background 0.3s ease, border-color 0.3s ease;
      } /* M-xx */

      .nouen-event-panel__arch-status-badge--desktop .arch-status-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%; /* M-xx */
        flex-shrink: 0;
        position: relative; /* M-xx */
      } /* M-xx */

      /* Ping/Radar para ponto pulsante — velocidade controlada por data-pulse-speed */
      .nouen-event-panel__arch-status-badge--desktop .arch-status-dot[data-pulse="true"]::after {
        content: '';
        position: absolute; /* M-xx */
        top: 0; left: 0; right: 0; bottom: 0;
        border-radius: 50%; /* M-xx */
        background-color: inherit;
        animation: arch-badge-ping var(--badge-ping-duration, 1.5s) cubic-bezier(0, 0, 0.2, 1) infinite;
      } /* M-xx */

      .nouen-event-panel__arch-status-badge--desktop .arch-status-dot[data-pulse-speed="1.5s"]::after {
        animation-duration: 1.5s;
      } /* M-xx */

      .nouen-event-panel__arch-status-badge--desktop .arch-status-dot[data-pulse-speed="3s"]::after {
        animation-duration: 3s;
      } /* M-xx */

      @keyframes arch-badge-ping {
        0%   { transform: scale(1); opacity: 0.8; }
        75%, 100% { transform: scale(2.5); opacity: 0; }
      } /* M-xx */

      .nouen-event-panel__arch-status-badge--desktop .arch-status-label {
        font-family: var(--font-label); /* M-xx */
        font-size: 0.625rem; /* M-xx */
        font-weight: 800; /* M-xx */
        letter-spacing: 0.1em; /* M-xx */
        text-transform: uppercase; /* M-xx */
        transition: color 0.3s ease;
      } /* M-xx */

      /* M-42: Banner persistente de conexão — Desktop-Only (Estratégia B).
         Visível apenas quando connStatus ≠ connected. No mobile a bolinha do
         header resolve essa comunicação sem precisar de espaço extra. */
      .nouen-event-panel__conn-banner--desktop {
        display: flex; /* M-xx */
        align-items: center; /* M-xx */
        justify-content: center; /* M-xx */
        gap: 8px; /* M-xx */
        background: rgba(239, 68, 68, 0.12);
        font-family: var(--font-body); /* M-xx */
        font-size: 0.75rem; /* M-xx */
        color: rgba(255, 255, 255, 0.85);
        
        /* Smooth Entrance/Exit */
        max-height: 0;
        opacity: 0;
        padding: 0 16px;
        border-bottom: 1px solid transparent;
        overflow: hidden; /* M-xx */
        transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
                    opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
                    padding 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                    border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      } /* M-xx */

      .nouen-event-panel__conn-banner--desktop--visible {
        max-height: 60px; /* Suficiente para o texto expandir */
        opacity: 1;
        padding: 7px 16px;
        border-bottom: 1px solid rgba(239, 68, 68, 0.3);
      } /* M-xx */

      .nouen-event-panel__conn-banner--desktop .conn-banner-dot {
        width: 7px;
        height: 7px;
        border-radius: 50%; /* M-xx */
        flex-shrink: 0;
      } /* M-xx */

      .nouen-event-panel__header {
        padding: 16px 0 0 0;
        background-color: transparent;
        display: flex; /* M-xx */
        align-items: center; /* M-xx */
        justify-content: center; /* M-xx */
        /* Center to allow inner container */
        flex-shrink: 0;
        width: 100%; /* M-xx */
      } /* M-xx */

      .nouen-event-panel__header-inner {
        display: flex; /* M-xx */
        align-items: center; /* M-xx */
        justify-content: space-between; /* M-xx */
        width: 100%; /* M-xx */
        max-width: var(--max-width);
        padding: 0 var(--container-padding);
      } /* M-xx */

      .nouen-event-panel__header-left {
        display: flex; /* M-xx */
        align-items: center; /* M-xx */
        gap: 16px;
      } /* M-xx */

      .nouen-event-panel__title {
        font-family: var(--font-headline); /* M-xx */
        font-weight: 700; /* M-xx */
        font-size: 1.125rem;
        letter-spacing: -0.02em;
        color: var(--text-primary); /* M-xx */
      } /* M-xx */

      .nouen-event-panel__live-badge {
        display: inline-flex;
        align-items: center; /* M-xx */
        gap: 6px;
        background: var(--error-bg);
        border: 1px solid rgba(239, 68, 68, 0.3);
        color: var(--accent-red);
        padding: 4px 10px;
        border-radius: var(--radius-sm);
        font-size: 0.75rem; /* M-xx */
        font-weight: 800; /* M-xx */
        text-transform: uppercase; /* M-xx */
        letter-spacing: 0.05em;
      } /* M-xx */

      .nouen-event-panel__live-dot {
        width: 6px;
        height: 6px;
        background-color: var(--accent-red);
        border-radius: 50%; /* M-xx */
        box-shadow: 0 0 6px var(--accent-red);
        animation: pulse-danger-nouen 1.5s infinite;
      } /* M-xx */

      @keyframes pulse-danger-nouen {
        0% {
          opacity: 1;
          transform: scale(1);
        }

        50% {
          opacity: 0.5;
          transform: scale(1.2);
        }

        100% {
          opacity: 1;
          transform: scale(1);
        }
      } /* M-xx */

      .nouen-event-panel__time {
        font-weight: 600;
        color: var(--text-secondary); /* M-xx */
        font-size: 0.875rem; /* M-xx */
        font-variant-numeric: tabular-nums;
      } /* M-xx */

      .nouen-event-panel__header-right {
        display: flex; /* M-xx */
        align-items: center; /* M-xx */
        gap: 16px;
      } /* M-xx */

      .nouen-event-panel__conn-indicator {
        display: flex; /* M-xx */
        align-items: center; /* M-xx */
        gap: 6px;
        font-size: 0.75rem; /* M-xx */
        color: var(--success-text);
        font-weight: 700; /* M-xx */
        text-transform: uppercase; /* M-xx */
        letter-spacing: 0.05em;
      } /* M-xx */

      .nouen-event-panel__conn-dot {
        width: 6px;
        height: 6px;
        background-color: var(--success-text);
        border-radius: 50%; /* M-xx */
        animation: pulse-danger-nouen 2s infinite;
      } /* M-xx */

      /* Grid Layout */
      .nouen-event-panel__grid-wrapper {
        display: flex; /* M-xx */
        justify-content: center; /* M-xx */
        width: 100%; /* M-xx */
        flex: 1;
        overflow: hidden; /* M-xx */
      } /* M-xx */

      .nouen-event-panel__grid {
        display: grid; /* M-xx */
        grid-template-columns: 4fr 6fr;
        gap: 18px;
        width: 100%; /* M-xx */
        max-width: var(--max-width);
        padding: 24px var(--container-padding);
        flex: 1;
        overflow: hidden; /* M-xx */
      } /* M-xx */

      .nouen-event-panel__action-zone {
        display: grid; /* M-xx */
        grid-template-columns: 1fr 1fr; /* M-xx */
        gap: 8px; /* M-xx */
        overflow: hidden; /* M-xx */
      } /* M-xx */

      .nouen-event-panel__column {
        background-color: var(--bg-card);
        border: 1px solid var(--border-subtle);
        border-radius: var(--radius-md);
        display: flex; /* M-xx */
        flex-direction: column; /* M-xx */
        overflow: hidden; /* M-xx */
      } /* M-xx */

      .nouen-event-panel__column--transparent {
        background-color: transparent;
        border: none; /* M-xx */
        gap: 20px;
      } /* M-xx */

      /* Agenda Panel */
      .nouen-event-panel__agenda-header {
        font-family: var(--font-headline); /* M-xx */
        font-weight: 700; /* M-xx */
        font-size: 1rem; /* M-xx */
        display: flex; /* M-xx */
        justify-content: space-between; /* M-xx */
        align-items: center; /* M-xx */
      } /* M-xx */

      .nouen-event-panel__agenda-filters {
        display: flex; /* M-xx */
        gap: 8px; /* M-xx */
      } /* M-xx */

      .nouen-event-panel__agenda-filter {
        font-size: 0.75rem; /* M-xx */
        padding: 4px 8px;
        border-radius: 4px;
        background: var(--bg-secondary);
        color: var(--text-secondary); /* M-xx */
        font-weight: 600;
        cursor: pointer; /* M-xx */
        border: 1px solid transparent;
        transition: all var(--transition-fast);
      } /* M-xx */

      .nouen-event-panel__agenda-filter--active {
        background: var(--text-primary);
        color: var(--bg-card);
      } /* M-xx */

      .nouen-event-panel__agenda-list {
        flex: 1;
        overflow-y: auto;
        display: flex; /* M-xx */
        flex-direction: column; /* M-xx */
        padding: 4px;
        margin: -4px;
        gap: 12px;
      } /* M-xx */

      .nouen-event-panel__agenda-thumb {
        width: 80px;
        aspect-ratio: 4 / 3;
        object-fit: cover; /* M-xx */
        border-radius: var(--radius-sm);
        background-color: var(--bg-tertiary);
        flex-shrink: 0;
      } /* M-xx */

      .nouen-event-panel__agenda-item {
        display: flex; /* M-xx */
        padding: 12px;
        gap: 16px;
        align-items: center; /* M-xx */
        cursor: pointer; /* M-xx */
        background: var(--bg-card);
        border: 1px solid transparent;
        border-radius: var(--radius-sm);
        transition: all var(--transition-fast);
      } /* M-xx */

      .nouen-event-panel__agenda-item:hover {
        transform: translateY(-2px);
      } /* M-xx */

      .nouen-event-panel__agenda-item--active {
        background-color: var(--bg-card);
        border-color: var(--accent-primary);
        box-shadow: 0 4px 12px color-mix(in srgb, var(--accent-primary) 10%, transparent);
      } /* M-xx */

      .nouen-event-panel__agenda-thumb {
        height: 60px;
        border-radius: var(--radius-sm);
        background-color: var(--bg-tertiary);
        object-fit: cover; /* M-xx */
        border: 1px solid var(--border-subtle);
      } /* M-xx */

      .nouen-event-panel__agenda-info {
        flex: 1;
        display: flex; /* M-xx */
        flex-direction: column; /* M-xx */
        gap: 6px;
      } /* M-xx */

      .nouen-event-panel__agenda-top {
        display: flex; /* M-xx */
        justify-content: space-between; /* M-xx */
        align-items: flex-start;
      } /* M-xx */

      .nouen-event-panel__agenda-lot {
        font-size: 0.75rem; /* M-xx */
        color: var(--text-secondary); /* M-xx */
        font-weight: 800; /* M-xx */
        text-transform: uppercase; /* M-xx */
        letter-spacing: 0.05em;
      } /* M-xx */

      .nouen-event-panel__agenda-title {
        font-size: 0.85rem;
        font-weight: 700; /* M-xx */
        color: var(--text-primary); /* M-xx */
        line-height: 1.3;
        margin-top: 2px;
      } /* M-xx */

      .nouen-event-panel__agenda-status {
        font-size: 0.65rem;
        font-weight: 800; /* M-xx */
        display: inline-flex;
        padding: 2px 6px;
        border-radius: 4px;
        background: var(--bg-secondary);
        color: var(--text-secondary); /* M-xx */
        text-transform: uppercase; /* M-xx */
        letter-spacing: 0.05em;
        border: 1px solid var(--border-subtle);
      } /* M-xx */

      .nouen-event-panel__agenda-status--live {
        background: var(--error-bg);
        color: var(--accent-red);
        border-color: rgba(239, 68, 68, 0.3);
      } /* M-xx */

      .nouen-event-panel__agenda-bottom {
        display: flex; /* M-xx */
        justify-content: space-between; /* M-xx */
        align-items: flex-end; /* M-xx */
        margin-top: 4px;
      } /* M-xx */

      .nouen-event-panel__agenda-price-label {
        font-size: 0.65rem;
        color: var(--text-tertiary); /* M-xx */
        text-transform: uppercase; /* M-xx */
        font-weight: 700; /* M-xx */
      } /* M-xx */

      .nouen-event-panel__agenda-price {
        font-weight: 800; /* M-xx */
        font-size: 0.95rem;
        font-variant-numeric: tabular-nums;
      } /* M-xx */

      /* Center Column: Showcase */
      .nouen-event-panel__showcase {
        background-color: var(--bg-card);
        border: 1px solid var(--border-subtle);
        border-radius: var(--radius-md);
        overflow: hidden; /* M-xx */
        flex: 1;
        display: flex; /* M-xx */
        flex-direction: column; /* M-xx */
      } /* M-xx */

      .nouen-event-panel__showcase-hero {
        position: relative; /* M-xx */
        width: 100%; /* M-xx */
        aspect-ratio: 4 / 3;
        background: var(--bg-tertiary);
        overflow: hidden; /* M-xx */
      } /* M-xx */

      .nouen-event-panel__showcase-img {
        position: absolute; /* M-xx */
        inset: 0;
        width: 100%; /* M-xx */
        height: 100%; /* M-xx */
        object-fit: cover; /* M-xx */
      } /* M-xx */

      .nouen-event-panel__showcase-mech {
        position: absolute; /* M-xx */
        top: 16px;
        left: 16px;
        background: rgba(255, 255, 255, 0.9);
        border: 1px solid var(--border-subtle);
        padding: 6px 12px;
        border-radius: var(--radius-sm);
        font-size: 0.8rem;
        font-weight: 800; /* M-xx */
        text-transform: uppercase; /* M-xx */
        letter-spacing: 0.05em;
        color: var(--text-primary); /* M-xx */
        backdrop-filter: blur(4px); /* M-xx */
      } /* M-xx */

      .nouen-event-panel__showcase-details {
        padding: 24px;
        display: flex; /* M-xx */
        flex-direction: column; /* M-xx */
        gap: 16px;
        flex: 1;
        overflow-y: auto;
      } /* M-xx */

      .nouen-event-panel__showcase-lot {
        color: var(--accent-primary);
        font-weight: 800; /* M-xx */
        font-size: 0.85rem;
        text-transform: uppercase; /* M-xx */
        letter-spacing: 0.05em;
      } /* M-xx */

      .nouen-event-panel__showcase-title {
        font-family: var(--font-headline); /* M-xx */
        font-size: 1.5rem;
        font-weight: 800; /* M-xx */
        line-height: 1.2; /* M-xx */
        letter-spacing: -0.02em;
      } /* M-xx */

      .nouen-event-panel__showcase-meta {
        display: flex; /* M-xx */
        gap: 16px;
        font-size: 0.9rem;
        color: var(--text-secondary); /* M-xx */
        font-weight: 600;
        padding-bottom: 16px;
        border-bottom: 1px solid var(--border-subtle);
      } /* M-xx */

      .nouen-event-panel__showcase-desc {
        font-size: 0.9rem;
        color: var(--text-secondary); /* M-xx */
        line-height: 1.6;
      } /* M-xx */

      /* Center Column: Video */
      .nouen-event-panel__video {
        background-color: var(--bg-card);
        border: 1px solid var(--border-subtle);
        border-radius: var(--radius-md);
        overflow: hidden; /* M-xx */
        position: relative; /* M-xx */
        flex-shrink: 0;
      } /* M-xx */

      .nouen-event-panel__video-header {
        padding: 12px 16px;
        background: var(--bg-secondary);
        border-bottom: 1px solid var(--border-subtle);
        font-size: 0.75rem; /* M-xx */
        font-weight: 800; /* M-xx */
        text-transform: uppercase; /* M-xx */
        letter-spacing: 0.05em;
        color: var(--text-secondary); /* M-xx */
        display: flex; /* M-xx */
        align-items: center; /* M-xx */
        gap: 8px; /* M-xx */
      } /* M-xx */

      .nouen-event-panel__video-dot {
        width: 6px;
        height: 6px;
        background-color: var(--accent-red);
        border-radius: 50%; /* M-xx */
      } /* M-xx */

      .nouen-event-panel__video-wrapper {
        position: relative; /* M-xx */
        width: 100%; /* M-xx */
        height: 200px;
        background: #000;
      } /* M-xx */

      .nouen-event-panel__video-wrapper img {
        width: 100%; /* M-xx */
        height: 100%; /* M-xx */
        object-fit: cover; /* M-xx */
        opacity: 0.8;
      } /* M-xx */

      .nouen-event-panel__video-overlay {
        position: absolute; /* M-xx */
        top: 0;
        left: 0;
        width: 100%; /* M-xx */
        height: 100%; /* M-xx */
        display: flex; /* M-xx */
        align-items: center; /* M-xx */
        justify-content: center; /* M-xx */
      } /* M-xx */

      .nouen-event-panel__play-btn {
        width: 48px;
        height: 48px;
        background: rgba(255, 255, 255, 0.2);
        border: 1px solid rgba(255, 255, 255, 0.4);
        border-radius: 50%; /* M-xx */
        display: flex; /* M-xx */
        align-items: center; /* M-xx */
        justify-content: center; /* M-xx */
        cursor: pointer; /* M-xx */
        backdrop-filter: blur(4px); /* M-xx */
        transition: transform var(--transition-fast);
      } /* M-xx */

      .nouen-event-panel__play-btn:hover {
        transform: scale(1.1);
        background: rgba(255, 255, 255, 0.3);
      } /* M-xx */

      /* Feed */
      .nouen-event-panel__feed {
        background-color: var(--bg-card);
        border: 1px solid var(--border-subtle);
        border-radius: var(--radius-md);
        display: flex; /* M-xx */
        flex-direction: column; /* M-xx */
        flex: 1;
      } /* M-xx */

      .nouen-event-panel__feed-header {
        padding: 16px 20px;
        border-bottom: 1px solid var(--border-subtle);
        font-family: var(--font-headline); /* M-xx */
        font-size: 0.9rem;
        font-weight: 800; /* M-xx */
        text-transform: uppercase; /* M-xx */
        letter-spacing: 0.05em;
      } /* M-xx */

      .nouen-event-panel__feed-list {
        flex: 1;
        overflow-y: auto;
        padding: 12px;
        display: flex; /* M-xx */
        flex-direction: column; /* M-xx */
        gap: 8px; /* M-xx */
      } /* M-xx */

      .nouen-event-panel__feed-item {
        padding: 12px 16px;
        border-radius: var(--radius-sm);
        font-size: 0.85rem;
        display: flex; /* M-xx */
        flex-direction: column; /* M-xx */
        gap: 4px; /* M-xx */
        border: 1px solid transparent;
      } /* M-xx */

      .nouen-event-panel__feed-item:nth-child(odd) {
        background: var(--bg-secondary);
      } /* M-xx */

      .nouen-event-panel__feed-item--urgent {
        border: 1px solid rgba(239, 68, 68, 0.3);
        background: var(--error-bg) !important;
      } /* M-xx */

      .nouen-event-panel__feed-top {
        display: flex; /* M-xx */
        justify-content: space-between; /* M-xx */
        align-items: center; /* M-xx */
      } /* M-xx */

      .nouen-event-panel__feed-user {
        font-weight: 700; /* M-xx */
        color: var(--text-secondary); /* M-xx */
        font-size: 0.8rem;
      } /* M-xx */

      .nouen-event-panel__feed-time {
        color: var(--text-tertiary); /* M-xx */
        font-variant-numeric: tabular-nums;
        font-weight: 600;
        font-size: 0.75rem; /* M-xx */
      } /* M-xx */

      .nouen-event-panel__feed-val {
        font-size: 1.1rem;
        font-weight: 800; /* M-xx */
        color: var(--text-primary); /* M-xx */
      } /* M-xx */

      .nouen-event-panel__feed-item--urgent .nouen-event-panel__feed-user,
      .nouen-event-panel__feed-item--urgent .nouen-event-panel__feed-val {
        color: var(--accent-red);
      } /* M-xx */

      /* ==============================
   VIDEO AND NOTIFICATIONS (FROM EVENT-PAGE.HTML)
   ============================== */
      .video-preview {
        width: 100%; /* M-xx */
        height: auto;
        border-radius: var(--radius-lg);
        background: #000;
        position: relative; /* M-xx */
        overflow: hidden; /* M-xx */
        transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        display: flex; /* M-xx */
        flex-direction: column; /* M-xx */
      } /* M-xx */

      .video-header {
        height: 32px;
        min-height: 32px;
        display: flex; /* M-xx */
        align-items: center; /* M-xx */
        justify-content: space-between; /* M-xx */
        padding: 0 12px;
        background: linear-gradient(180deg, rgba(25, 25, 25, 1) 0%, rgba(50, 50, 50, 1) 100%);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
        cursor: pointer; /* M-xx */
        z-index: 10; /* M-xx */
        border-bottom: none;
      } /* M-xx */

      .video-title {
        color: rgba(255, 255, 255, 0.8);
        font-size: 0.57rem;
        font-weight: 600; /* M-xx */
        text-transform: uppercase; /* M-xx */
        letter-spacing: 0.05em;
        display: flex; /* M-xx */
        align-items: center; /* M-xx */
        gap: 8px; /* M-xx */
      } /* M-xx */

      .video-header-controls {
        display: flex; /* M-xx */
        align-items: center; /* M-xx */
        gap: 12px;
      } /* M-xx */

      .video-mini-play-btn {
        color: rgba(255, 255, 255, 0.6);
        transition: all 0.2s ease;
  } /* M-xx */
  .nouen-event-panel__lot-card:first-child {
    margin-left: 16px;
  } /* M-xx */
  .nouen-event-panel__lot-card:last-child {
    margin-right: 16px;
        display: none;
        align-items: center; /* M-xx */
        justify-content: center; /* M-xx */
        width: 24px;
        height: 24px;
        transform: translateY(1px);
      } /* M-xx */

      .video-preview.collapsed .video-mini-play-btn {
        display: flex; /* M-xx */
      } /* M-xx */

      .video-collapse-btn {
        color: rgba(255, 255, 255, 0.4);
        transition: all 0.2s ease;
  } /* M-xx */
  .nouen-event-panel__lot-card:first-child {
    margin-left: 16px;
  } /* M-xx */
  .nouen-event-panel__lot-card:last-child {
    margin-right: 16px;
        display: flex; /* M-xx */
        align-items: center; /* M-xx */
      } /* M-xx */

      .video-mini-play-btn:hover,
      .video-collapse-btn:hover {
        color: #fff;
      } /* M-xx */

      .video-preview .pause-icon {
        display: none;
      } /* M-xx */

      .video-preview.playing .play-icon {
        display: none;
      } /* M-xx */

      .video-preview.playing .pause-icon {
        display: block;
      } /* M-xx */

      .video-preview.collapsed {
        height: 36px;
        aspect-ratio: auto;
      } /* M-xx */

      .video-preview.collapsed .video-header {
        border-bottom-left-radius: var(--radius-lg);
        border-bottom-right-radius: var(--radius-lg);
      } /* M-xx */

      .video-preview.collapsed .video-collapse-btn {
        transform: rotate(180deg);
      } /* M-xx */

      .video-content {
        position: relative; /* M-xx */
        width: 100%;
        aspect-ratio: 16 / 9;
        flex: 1;
        transition: opacity 0.2s ease;
        overflow: hidden; /* M-xx */
        display: flex; /* M-xx */
        align-items: center; /* M-xx */
        justify-content: center; /* M-xx */
      } /* M-xx */

      .video-preview.collapsed .video-content {
        opacity: 0;
        pointer-events: none;
      } /* M-xx */

      .video-preview-img {
        position: absolute; /* M-xx */
        inset: 0;
        width: 100%; /* M-xx */
        height: 100%; /* M-xx */
        object-fit: cover; /* M-xx */
        opacity: 0.85;
        display: block;
      } /* M-xx */

      /* V8.7 — iframe YouTube preenche o container video-content */
      .video-iframe {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        border: none;
        display: block;
      }

      .video-overlay {
        position: absolute; /* M-xx */
        inset: 0;
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4) 0%, transparent 40%, rgba(0, 0, 0, 0.2) 100%);
        pointer-events: none;
        display: flex; /* M-xx */
        align-items: center; /* M-xx */
        justify-content: center; /* M-xx */
      } /* M-xx */

      .video-dot {
        width: 6px;
        height: 6px;
        background: #ef4444;
        border-radius: 50%; /* M-xx */
        box-shadow: 0 0 8px #ef4444;
        animation: pulse-dot 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
        transition: background 0.3s ease, box-shadow 0.3s ease;
      } /* M-xx */

      .video-preview.playing .video-dot {
        background: #22c55e;
        box-shadow: 0 0 8px #22c55e;
      } /* M-xx */

      @keyframes pulse-dot {

        0%,
        100% {
          opacity: 1;
        }

        50% {
          opacity: 0.4;
        }
      } /* M-xx */

      .video-play-btn {
        width: 48px;
        height: 48px;
        background: rgba(255, 255, 255, 0.2);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        border-radius: 50%; /* M-xx */
        display: flex; /* M-xx */
        align-items: center; /* M-xx */
        justify-content: center; /* M-xx */
        color: #fff;
        border: 1px solid rgba(255, 255, 255, 0.3);
        cursor: pointer; /* M-xx */
        pointer-events: auto;
        transition: all 0.2s ease;
        margin-top: -16px; /* Ajuste para o Centro Ótico (compensa os 32px do header) */
      } /* M-xx */
  .nouen-event-panel__lot-card:first-child {
    margin-left: 16px;
  } /* M-xx */
  .nouen-event-panel__lot-card:last-child {
    margin-right: 16px;
      } /* M-xx */

      .video-play-btn:hover {
        background: rgba(255, 255, 255, 0.35);
        transform: scale(1.1);
      } /* M-xx */

      .notifications-card {
        background: var(--bg-card);
        border: 1px solid var(--border-subtle);
        border-radius: var(--radius-lg);
        display: flex; /* M-xx */
        flex-direction: column; /* M-xx */
        flex: 1;
        overflow: hidden; /* M-xx */
      } /* M-xx */

      .nf-item {
        padding: 12px 14px;
        border-bottom: 1px solid var(--border-subtle);
        font-size: 0.8rem;
        color: var(--text-secondary); /* M-xx */
        line-height: 1.4;
        display: flex; /* M-xx */
        gap: 12px;
        position: relative; /* M-xx */
        border-left: 2px solid transparent;
        transition: all 0.3s ease;
      } /* M-xx */

      .nf-item.notif-info {
        border-left-color: #3b82f6;
        background-color: rgba(59, 130, 246, 0.05);
      } /* M-xx */

      .nf-item.notif-alert {
        border-left-color: #f59e0b;
        background-color: rgba(245, 158, 11, 0.05);
      } /* M-xx */

      .nf-item.notif-success {
        border-left-color: #10b981;
        background-color: rgba(16, 185, 129, 0.05);
      } /* M-xx */

      .nf-item.notif-urgent {
        border-left-color: #ef4444;
        background-color: rgba(239, 68, 68, 0.05);
      } /* M-xx */

      .nf-item.notif-neutral {
        border-left-color: #94a3b8;
        background-color: rgba(148, 163, 184, 0.05);
      } /* M-xx */

      .nf-header {
        padding: 10px 12px;
        border-bottom: 1px solid var(--border-subtle);
        font-weight: 700; /* M-xx */
        font-size: 0.65rem;
        color: var(--text-primary); /* M-xx */
        background: var(--bg-secondary);
        text-transform: uppercase; /* M-xx */
        letter-spacing: 0.05em;
        display: flex; /* M-xx */
        justify-content: space-between; /* M-xx */
        align-items: center; /* M-xx */
      } /* M-xx */

      .nf-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%; /* M-xx */
        background-color: #3b82f6;
        box-shadow: 0 0 8px rgba(59, 130, 246, 0.6);
        opacity: 0;
        transform: scale(0.5);
        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      } /* M-xx */

      .nf-dot.active {
        opacity: 1;
        transform: scale(1);
        animation: nf-dot-pulse 2s infinite;
      } /* M-xx */

      @keyframes nf-dot-pulse {
        0% {
          transform: scale(1);
          opacity: 1;
        }

        50% {
          transform: scale(1.2);
          opacity: 0.7;
        }

        100% {
          transform: scale(1);
          opacity: 1;
        }
      } /* M-xx */

      .nf-time {
        font-variant-numeric: tabular-nums;
        font-weight: 600;
        font-size: 0.75rem; /* M-xx */
        color: var(--text-tertiary); /* M-xx */
      } /* M-xx */

      .nf-msg {
        flex: 1;
      } /* M-xx */

      /* ══════════════════════════════════════════════════════════════════
   EVENT PAGE — V3.3
   BEM: .nouen-event-page__[elemento]--[modificador]
   INV-CSS-01: zero hexadecimais hardcoded — apenas tokens
   ══════════════════════════════════════════════════════════════════ */

      /* ── Wrapper principal ──────────────────────────────────────────── */
      .nouen-event-page {
        min-height: 100vh;
        background: var(--bg-primary);
        color: var(--text-primary); /* M-xx */
      } /* M-xx */

      /* ── Breadcrumb ─────────────────────────────────────────────────── */
      .nouen-event-page__breadcrumb-wrap {
        position: absolute; /* M-xx */
        top: calc(var(--header-height, 64px) + 16px);
        left: 0;
        right: 0;
        z-index: 30;
        max-width: var(--max-width);
        margin: 0 auto;
        padding: 0 var(--container-padding);
      } /* M-xx */

      /* ── Hero ───────────────────────────────────────────────────────── */
      .nouen-event-page__hero {
        position: relative; /* M-xx */
        width: 100%; /* M-xx */
        height: calc(100vh - 56px);
        min-height: 600px;
        max-height: 820px;
        display: flex; /* M-xx */
        align-items: flex-end; /* M-xx */
        overflow: hidden; /* M-xx */
        background-color: #111111;
        /* Fallback em caso de lentidão ou quebra de imagem */
      } /* M-xx */

      .nouen-event-page__hero-img {
        position: absolute; /* M-xx */
        inset: 0;
        width: 100%; /* M-xx */
        height: 100%; /* M-xx */
        object-fit: cover; /* M-xx */
        filter: grayscale(1) brightness(0.35);
        z-index: 0;
      } /* M-xx */

      .nouen-event-page__hero-placeholder {
        position: absolute; /* M-xx */
        inset: 0;
        background-color: #0f0f11;
        background-image:
          radial-gradient(ellipse 80% 80% at top right, color-mix(in srgb, var(--cu-accent-color) 16%, transparent), transparent),
          linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
          linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
        background-size: 100% 100%, 60px 60px, 60px 60px;
        background-position: 0 0, -1px -1px, -1px -1px;
        z-index: 0;
      } /* M-xx */

      /* Data Layer — topo do hero */
      .nouen-event-page__data-layer {
        position: absolute; /* M-xx */
        top: calc(var(--header-height, 64px) + 32px);
        left: 0;
        right: 0;
        z-index: 20;
        max-width: var(--max-width);
        margin: 0 auto;
        padding: 0 var(--container-padding);
        display: flex; /* M-xx */
        justify-content: space-between; /* M-xx */
        align-items: flex-start;
      } /* M-xx */

      .nouen-event-page__data-layer-left,
      .nouen-event-page__data-layer-right {
        display: flex; /* M-xx */
        gap: 64px;
      } /* M-xx */

      .nouen-event-page__data-item {
        display: flex; /* M-xx */
        flex-direction: column; /* M-xx */
        gap: 4px; /* M-xx */
      } /* M-xx */

      .nouen-event-page__data-label {
        font-family: var(--font-label); /* M-xx */
        font-size: 0.625rem; /* M-xx */
        font-weight: 700; /* M-xx */
        text-transform: uppercase; /* M-xx */
        letter-spacing: 0.2em;
        color: rgba(255, 255, 255, 0.4);
      } /* M-xx */

      .nouen-event-page__data-value {
        font-family: var(--font-headline); /* M-xx */
        font-size: 0.75rem; /* M-xx */
        font-weight: 700; /* M-xx */
        text-transform: uppercase; /* M-xx */
        letter-spacing: 0.1em; /* M-xx */
        color: var(--text-on-dark, #ffffff);
      } /* M-xx */

      /* Conteúdo do Hero — base */
      .nouen-event-page__hero-content {
        position: relative; /* M-xx */
        z-index: 10; /* M-xx */
        width: 100%; /* M-xx */
        max-width: var(--max-width);
        margin: 0 auto;
        padding: 0 var(--container-padding) 96px;
        display: flex; /* M-xx */
        align-items: flex-end; /* M-xx */
      } /* M-xx */

      .nouen-event-page__hero-main {
        flex: 1;
        max-width: 66%;
      } /* M-xx */

      .nouen-event-page__hero-content--fallback .nouen-event-page__hero-main {
        width: 60%;
        max-width: 60%;
        padding-right: 24px;
        /* Respiro ligeiramente menor para alongar o título */
      } /* M-xx */

      .nouen-event-page__hero-poster-col {
        width: 40%;
        display: flex; /* M-xx */
        justify-content: center; /* M-xx */
      } /* M-xx */

      .nouen-event-page__hero-poster-wrap {
        flex-shrink: 0;
        width: 100%; /* M-xx */
        max-width: 380px;
        aspect-ratio: 4/5;
        border-radius: 4px;
        overflow: hidden; /* M-xx */
        box-shadow: 0 32px 64px rgba(0, 0, 0, 0.4), 0 0 30px color-mix(in srgb, var(--cu-accent-color) 15%, transparent);
        transform: translateY(16px);
        transition: transform var(--transition-slow), box-shadow var(--transition-slow);
      } /* M-xx */

      .nouen-event-page__hero-poster-wrap:hover {
        transform: translateY(16px) scale(1.02);
        box-shadow: 0 40px 80px rgba(0, 0, 0, 0.6), 0 0 60px color-mix(in srgb, var(--cu-accent-color) 25%, transparent);
      } /* M-xx */

      .nouen-event-page__hero-poster-img {
        width: 100%; /* M-xx */
        height: 100%; /* M-xx */
        object-fit: cover; /* M-xx */
      } /* M-xx */

      .nouen-event-page__hero-badge-row {
        display: flex; /* M-xx */
        align-items: center; /* M-xx */
        gap: 16px;
        margin-bottom: 24px;
      } /* M-xx */

      .nouen-event-page__hero-market-badge {
        background: var(--accent-primary);
        color: #ffffff;
        padding: 4px 12px;
        font-family: var(--font-label); /* M-xx */
        font-size: 0.625rem; /* M-xx */
        font-weight: 700; /* M-xx */
        text-transform: uppercase; /* M-xx */
        letter-spacing: 0.15em;
        border-radius: 4px;
      } /* M-xx */

      .nouen-event-page__hero-title {
        font-family: var(--font-headline); /* M-xx */
        font-size: clamp(3rem, 6vw, 4.5rem);
        font-weight: 800; /* M-xx */
        color: #ffffff;
        line-height: 0.95;
        letter-spacing: -0.03em;
        margin: 0 0 32px;
      } /* M-xx */

      .nouen-event-page__hero-desc {
        font-family: var(--font-body); /* M-xx */
        font-size: 0.9375rem;
        color: rgba(255, 255, 255, 0.65);
        line-height: 1.6;
        max-width: 480px;
        margin: 0 0 40px;
        font-weight: 300;
      } /* M-xx */

      .nouen-event-page__hero-actions {
        display: flex; /* M-xx */
        gap: 16px;
        align-items: center; /* M-xx */
      } /* M-xx */

      /* global-intencional: leiloeiro mobile-only — invisível no desktop; display:block no @media abaixo (exceção R1 documentada no plano V7.6 §3 DA-V7.6-02) */
      .nouen-event-page__hero-leiloeiro-mobile {
        display: none; /* global-intencional: mesmo bloco acima */
      } /* M-xx */

      /* global-intencional: status mobile-only no hero fallback — invisível no desktop; display:flex no @media abaixo (exceção R1 documentada no plano V7.6 §3 DA-V7.6-02) */
      .nouen-event-page__hero-status-mobile {
        display: none; /* global-intencional: mesmo bloco acima */
      } /* M-xx */
      .nouen-event-page__hero-status-dot {
        display: none; /* global-intencional: parte do hero-status-mobile acima */
      } /* M-xx */

      /* ── CTAs ───────────────────────────────────────────────────────── */
      .nouen-event-page__cta {
        display: inline-flex;
        align-items: center; /* M-xx */
        gap: 8px; /* M-xx */
        padding: 16px 28px;
        font-family: var(--font-headline); /* M-xx */
        font-size: 0.75rem; /* M-xx */
        font-weight: 800; /* M-xx */
        text-transform: uppercase; /* M-xx */
        letter-spacing: 0.1em; /* M-xx */
        border: none; /* M-xx */
        cursor: pointer; /* M-xx */
        transition: all var(--transition-base);
        text-decoration: none;
        border-radius: 4px;
      } /* M-xx */

      .nouen-event-page__cta--primary {
        background: var(--cu-accent-color);
        color: #ffffff;
        box-shadow: 0 0 30px color-mix(in srgb, var(--cu-accent-color) 40%, transparent);
      } /* M-xx */

      .nouen-event-page__cta--primary:hover {
        filter: brightness(1.15);
        transform: translateY(-2px);
        box-shadow: 0 0 40px color-mix(in srgb, var(--cu-accent-color) 50%, transparent);
        color: #ffffff;
      } /* M-xx */

      .nouen-event-page__cta--secondary {
        background: var(--cu-accent-color);
        color: #ffffff;
        box-shadow: 0 0 30px color-mix(in srgb, var(--cu-accent-color) 40%, transparent);
      } /* M-xx */

      .nouen-event-page__cta--secondary:hover {
        filter: brightness(1.15);
        transform: translateY(-2px);
        box-shadow: 0 0 40px color-mix(in srgb, var(--cu-accent-color) 50%, transparent);
        color: #ffffff;
      } /* M-xx */

      .nouen-event-page__cta--outline {
        background: transparent;
        color: #ffffff;
        border: 1px solid rgba(255, 255, 255, 0.4);
      } /* M-xx */

      .nouen-event-page__cta--outline:hover {
        background: rgba(255, 255, 255, 0.1);
        border-color: rgba(255, 255, 255, 0.6);
        color: #ffffff;
        transform: translateY(-2px);
      } /* M-xx */

      .nouen-event-page__cta--outline-inverse {
        background: transparent;
        color: var(--text-primary); /* M-xx */
        border: 1px solid #d1d5db;
      } /* M-xx */

      .nouen-event-page__cta--outline-inverse:hover {
        background: var(--bg-secondary);
        border-color: #9ca3af;
        color: var(--text-primary); /* M-xx */
        transform: translateY(-2px);
      } /* M-xx */

      .nouen-event-page__cta-group {
        display: flex; /* M-xx */
        align-items: center; /* M-xx */
        justify-content: center; /* M-xx */
        gap: 16px;
        flex-wrap: wrap;
        padding: 80px 24px;
        background: transparent;
      } /* M-xx */

      /* Reduz o efeito de glow para os CTAs primários quando usados em fundos claros */
      .nouen-event-page__cta-group--light .nouen-event-page__cta--primary,
      .nouen-event-page__cta-group--light .nouen-event-page__cta--secondary {
        box-shadow: 0 0 15px color-mix(in srgb, var(--cu-accent-color) 15%, transparent);
      } /* M-xx */
      .nouen-event-page__cta-group--light .nouen-event-page__cta--primary:hover,
      .nouen-event-page__cta-group--light .nouen-event-page__cta--secondary:hover {
        box-shadow: 0 0 20px color-mix(in srgb, var(--cu-accent-color) 25%, transparent);
      } /* M-xx */

      .nouen-event-page__cta--muted {
        background: transparent;
        color: rgba(255, 255, 255, 0.4);
        border: 1px solid rgba(255, 255, 255, 0.1);
        cursor: default;
        pointer-events: none;
      } /* M-xx */

      /* ── Readiness Strip ────────────────────────────────────────────── */
      .nouen-event-page__strip {
        background: var(--bg-secondary);
        border-top: 1px solid var(--border-subtle);
        height: 56px;
      } /* M-xx */

      .nouen-event-page__strip-inner {
        max-width: var(--max-width);
        margin: 0 auto;
        padding: 0 var(--container-padding);
        height: 100%; /* M-xx */
        display: flex; /* M-xx */
        align-items: center; /* M-xx */
        gap: 48px;
      } /* M-xx */

      .nouen-event-page__strip-item {
        display: flex; /* M-xx */
        align-items: center; /* M-xx */
        gap: 8px; /* M-xx */
        font-family: var(--font-label); /* M-xx */
        font-size: 0.6875rem;
        font-weight: 600;
        text-transform: uppercase; /* M-xx */
        letter-spacing: 0.1em; /* M-xx */
        color: var(--text-secondary); /* M-xx */
      } /* M-xx */

      /* ── Editorial Section ──────────────────────────────────────────── */
      .nouen-event-page__editorial {
        background: var(--bg-primary);
      } /* M-xx */

      .nouen-event-page__editorial-inner {
        max-width: var(--max-width);
        margin: 0 auto;
        padding: 96px var(--container-padding);
        display: grid; /* M-xx */
        grid-template-columns: 7fr 5fr;
        gap: 96px;
        align-items: start;
      } /* M-xx */

      .nouen-event-page__editorial-eyebrow {
        font-family: var(--font-label); /* M-xx */
        font-size: 0.75rem; /* M-xx */
        font-weight: 700; /* M-xx */
        text-transform: uppercase; /* M-xx */
        letter-spacing: 0.075em;
        color: var(--cu-accent-color, var(--text-accent));
        margin: 0 0 12px;
      } /* M-xx */

      .nouen-event-page__editorial-headline {
        font-family: var(--font-headline); /* M-xx */
        font-size: 2rem;
        font-weight: 800; /* M-xx */
        letter-spacing: -0.02em;
        color: var(--text-primary); /* M-xx */
        margin: 0 0 24px;
        line-height: 1.2; /* M-xx */
      } /* M-xx */

      .nouen-event-page__editorial-body {
        font-family: var(--font-body); /* M-xx */
        font-size: 1.0625rem;
        color: var(--text-secondary); /* M-xx */
        line-height: 1.7;
        margin: 0;
      } /* M-xx */

      .nouen-event-page__pullquote {
        margin: 48px 0 0;
        padding: 24px 32px;
        background: var(--bg-secondary);
        border-left: 2px solid var(--accent-primary);
      } /* M-xx */

      .nouen-event-page__pullquote p {
        font-family: var(--font-headline); /* M-xx */
        font-style: italic;
        font-size: 1rem; /* M-xx */
        color: var(--text-secondary); /* M-xx */
        line-height: 1.6;
        margin: 0;
      } /* M-xx */

      /* Operator Card */
      .nouen-event-page__operator-card {
        position: sticky;
        top: 96px;
      } /* M-xx */

      .nouen-event-page__operator-card-inner {
        background: var(--bg-card);
        border: 1px solid var(--border-subtle);
        padding: 32px;
        display: flex; /* M-xx */
        flex-direction: column; /* M-xx */
        gap: 24px;
        margin-top: 32px;
        border-radius: 4px;
      } /* M-xx */

      .nouen-event-page__operator-header {
        display: flex; /* M-xx */
        align-items: center; /* M-xx */
        gap: 20px;
      } /* M-xx */

      .nouen-event-page__operator-about {
        border-top: 1px solid var(--border-subtle);
        padding-top: 24px;
      } /* M-xx */

      .nouen-event-page__operator-about-text {
        font-family: var(--font-body); /* M-xx */
        font-size: 0.9375rem;
        line-height: 1.6;
        color: var(--text-secondary); /* M-xx */
        margin: 0 0 48px;
        white-space: pre-wrap;
        display: -webkit-box; /* M-xx */
        -webkit-line-clamp: 8;
        -webkit-box-orient: vertical; /* M-xx */
        overflow: hidden; /* M-xx */
        text-overflow: ellipsis; /* M-xx */
      } /* M-xx */

      .nouen-event-page__operator-about-link {
        font-family: var(--font-body); /* M-xx */
        font-size: 0.875rem; /* M-xx */
        font-weight: 600;
        color: var(--cu-accent-color);
        text-decoration: none;
        display: inline-flex;
        align-items: center; /* M-xx */
        gap: 8px; /* M-xx */
        transition: all var(--transition-base);
        padding: 4px 0 0 0;
      } /* M-xx */

      .nouen-event-page__operator-about-link:hover {
        /* Efeito removido para ficar apenas com a seta animada */
      } /* M-xx */

      .nouen-event-page__operator-about-link .material-symbols-outlined {
        font-size: 16px;
        transition: transform var(--transition-base);
      } /* M-xx */

      .nouen-event-page__operator-about-link:hover .material-symbols-outlined {
        transform: translateX(4px);
      } /* M-xx */

      .nouen-event-page__operator-avatar {
        width: 56px;
        height: 56px;
        background: var(--accent-primary);
        color: #ffffff;
        display: flex; /* M-xx */
        align-items: center; /* M-xx */
        justify-content: center; /* M-xx */
        font-family: var(--font-headline); /* M-xx */
        font-weight: 800; /* M-xx */
        font-size: 1.125rem;
        border-radius: var(--radius-sm);
        flex-shrink: 0;
        overflow: hidden; /* M-xx */ /* garante que a img não vaze do border-radius */
      } /* M-xx */

      .nouen-event-page__operator-avatar-img {
        width: 100%; /* M-xx */
        height: 100%; /* M-xx */
        object-fit: contain; /* contain = logo completo, sem corte */
        background: #ffffff; /* fundo branco para logos com transparência */
      } /* M-xx */

      .nouen-event-page__operator-name {
        font-family: var(--font-headline); /* M-xx */
        font-size: 1.125rem;
        font-weight: 700; /* M-xx */
        color: var(--text-primary); /* M-xx */
        margin: 0 0 4px;
      } /* M-xx */

      .nouen-event-page__operator-market {
        font-family: var(--font-label); /* M-xx */
        font-size: 0.6875rem;
        font-weight: 600;
        text-transform: uppercase; /* M-xx */
        letter-spacing: 0.1em; /* M-xx */
        color: var(--text-tertiary); /* M-xx */
        margin: 0;
      } /* M-xx */

      /* ── Bento Grid Section ─────────────────────────────────────────── */
      .nouen-event-page__bento-section {
        background: var(--bg-secondary);
        padding: 96px 0 0 0;
      } /* M-xx */

      .nouen-event-page__bento-section-inner {
        max-width: var(--max-width);
        margin: 0 auto;
        padding: 0 var(--container-padding);
      } /* M-xx */

      .nouen-event-page__bento-header {
        display: flex; /* M-xx */
        justify-content: space-between; /* M-xx */
        align-items: flex-end; /* M-xx */
        margin-bottom: 48px;
      } /* M-xx */

      .nouen-event-page__bento-title {
        font-family: var(--font-headline); /* M-xx */
        font-size: 2rem;
        font-weight: 800; /* M-xx */
        letter-spacing: -0.02em;
        color: var(--text-primary); /* M-xx */
        margin: 0;
      } /* M-xx */

      .nouen-event-page__bento-see-all {
        font-family: var(--font-headline); /* M-xx */
        font-size: 0.6875rem;
        font-weight: 700; /* M-xx */
        text-transform: uppercase; /* M-xx */
        letter-spacing: 0.2em;
        color: var(--text-primary); /* M-xx */
        text-decoration: none;
        border-bottom: 2px solid var(--accent-primary);
        padding-bottom: 4px;
        transition: opacity var(--transition-fast);
      } /* M-xx */

      .nouen-event-page__bento-see-all:hover {
        opacity: 0.6;
      } /* M-xx */

      .nouen-event-page__bento-grid {
        display: grid; /* M-xx */
        grid-template-columns: 1fr 1fr; /* M-xx */
        gap: 24px;
      } /* M-xx */

      /* Featured card */
      .nouen-event-page__bento-featured {
        position: relative; /* M-xx */
        background: var(--bg-card);
        overflow: hidden; /* M-xx */
        display: flex; /* M-xx */
        flex-direction: column; /* M-xx */
        text-decoration: none;
        transition: transform var(--transition-base);
        border-radius: 4px;
        aspect-ratio: 4 / 3;
      } /* M-xx */

      .nouen-event-page__bento-featured:hover {
        transform: translateY(-2px);
      } /* M-xx */

      .nouen-event-page__bento-featured-img {
        position: absolute; /* M-xx */
        inset: 0;
        width: 100%; /* M-xx */
        height: 100%; /* M-xx */
        object-fit: cover; /* M-xx */
        transition: transform 0.7s ease;
      } /* M-xx */

      .nouen-event-page__bento-featured:hover .nouen-event-page__bento-featured-img {
        transform: scale(1.04);
      } /* M-xx */

      .nouen-event-page__bento-featured-placeholder {
        position: absolute; /* M-xx */
        inset: 0;
        background: var(--bg-tertiary);
      } /* M-xx */

      .nouen-event-page__bento-featured-overlay {
        position: absolute; /* M-xx */
        inset: 0;
        background: linear-gradient(to bottom,
            rgba(0, 0, 0, 0.5) 0%,
            transparent 40%,
            rgba(0, 0, 0, 0.7) 100%);
      } /* M-xx */

      .nouen-event-page__bento-featured-top {
        position: relative; /* M-xx */
        z-index: 10; /* M-xx */
        padding: 32px;
      } /* M-xx */

      .nouen-event-page__bento-featured-bottom {
        position: relative; /* M-xx */
        z-index: 10; /* M-xx */
        margin-top: auto;
        padding: 32px;
        display: flex; /* M-xx */
        justify-content: space-between; /* M-xx */
        align-items: flex-end; /* M-xx */
      } /* M-xx */

      .nouen-event-page__bento-badge {
        background: var(--accent-primary);
        color: #ffffff;
        padding: 4px 12px;
        border-radius: 4px; /* global-intencional: correção de design — badge deve ter raio em todos os viewports */
        font-family: var(--font-body); /* M-xx */
        font-size: 0.625rem; /* M-xx */
        font-weight: 700; /* M-xx */
        text-transform: uppercase; /* M-xx */
        letter-spacing: 0.1em; /* M-xx */
        display: inline-block;
        margin-bottom: 16px;
      } /* M-xx */

      .nouen-event-page__bento-featured-title {
        font-family: var(--font-headline); /* M-xx */
        font-size: 1.75rem;
        font-weight: 700; /* M-xx */
        color: #ffffff;
        margin: 0;
        line-height: 1.2; /* M-xx */
      } /* M-xx */

      .nouen-event-page__bento-price-label {
        font-family: var(--font-body); /* M-xx */
        font-size: 0.6875rem;
        font-weight: 700; /* M-xx */
        text-transform: uppercase; /* M-xx */
        letter-spacing: 0.05em;
        color: rgba(255, 255, 255, 0.5);
        display: block;
        margin-bottom: 4px; /* M-xx */
      } /* M-xx */

      .nouen-event-page__bento-price {
        font-family: var(--font-headline); /* M-xx */
        font-size: 1.5rem;
        font-weight: 700; /* M-xx */
        color: #ffffff;
        margin: 0;
      } /* M-xx */

      .nouen-event-page__bento-cta-pill {
        background: var(--accent-primary);
        color: #ffffff;
        padding: 10px 20px;
        font-size: 0.75rem; /* M-xx */
        font-weight: 800; /* M-xx */
        text-transform: uppercase; /* M-xx */
        letter-spacing: 0.08em;
        transition: all var(--transition-fast);
        border-radius: 4px;
      } /* M-xx */

      .nouen-event-page__bento-featured:hover .nouen-event-page__bento-cta-pill {
        filter: brightness(1.15);
        box-shadow: 0 4px 12px color-mix(in srgb, var(--accent-primary) 30%, transparent);
      } /* M-xx */

      /* Side cards */
      .nouen-event-page__bento-sides {
        display: grid; /* M-xx */
        grid-template-rows: 1fr 1fr;
        gap: 24px;
      } /* M-xx */

      .nouen-event-page__bento-side {
        background: var(--bg-card);
        display: flex; /* M-xx */
        gap: 0;
        overflow: hidden; /* M-xx */
        text-decoration: none;
        transition: transform var(--transition-base);
        border-radius: 4px;
      } /* M-xx */

      .nouen-event-page__bento-side:hover {
        transform: translateY(-2px);
      } /* M-xx */

      .nouen-event-page__bento-side--empty {
        display: flex; /* M-xx */
        flex-direction: column; /* M-xx */
        align-items: center; /* M-xx */
        justify-content: center; /* M-xx */
        gap: 12px;
        border: 1px dashed var(--border-subtle);
        cursor: default;
      } /* M-xx */

      .nouen-event-page__bento-side-img-wrap {
        width: 46.7%;
        flex-shrink: 0;
        overflow: hidden; /* M-xx */
        background: var(--bg-tertiary);
      } /* M-xx */

      .nouen-event-page__bento-side-img {
        width: 100%; /* M-xx */
        height: 100%; /* M-xx */
        object-fit: cover; /* M-xx */
        filter: grayscale(0.5);
        transition: filter 0.4s ease, transform 0.4s ease;
      } /* M-xx */

      .nouen-event-page__bento-side:hover .nouen-event-page__bento-side-img {
        filter: grayscale(0);
        transform: scale(1.04);
      } /* M-xx */

      .nouen-event-page__bento-side-placeholder {
        width: 100%; /* M-xx */
        height: 100%; /* M-xx */
        background: var(--bg-tertiary);
      } /* M-xx */

      .nouen-event-page__bento-side-content {
        flex: 1;
        padding: 24px;
        display: flex; /* M-xx */
        flex-direction: column; /* M-xx */
      } /* M-xx */

      .nouen-event-page__bento-side-mech {
        font-family: var(--font-body); /* M-xx */
        font-size: 0.6875rem;
        font-weight: 700; /* M-xx */
        text-transform: uppercase; /* M-xx */
        letter-spacing: 0.05em;
        color: var(--cu-accent-color, var(--text-tertiary));
        margin-bottom: 8px;
      } /* M-xx */

      .nouen-event-page__bento-side-title {
        font-family: var(--font-headline); /* M-xx */
        font-size: 1.0625rem;
        font-weight: 700; /* M-xx */
        color: var(--text-primary); /* M-xx */
        margin: 0;
        line-height: 1.3;
        flex: 1;
      } /* M-xx */

      .nouen-event-page__bento-side-footer {
        display: flex; /* M-xx */
        justify-content: space-between; /* M-xx */
        align-items: center; /* M-xx */
        margin-top: 16px;
      } /* M-xx */

      .nouen-event-page__bento-side-price {
        font-family: var(--font-headline); /* M-xx */
        font-size: 1.0625rem;
        font-weight: 700; /* M-xx */
        color: var(--text-primary); /* M-xx */
      } /* M-xx */

      /* ── Timeline Section ───────────────────────────────────────────── */
      .nouen-event-page__timeline-section {
        background: var(--bg-primary);
        padding: 96px 0;
      } /* M-xx */

      .nouen-event-page__timeline-section-inner {
        max-width: var(--max-width);
        margin: 0 auto;
        padding: 0 var(--container-padding);
        display: grid; /* M-xx */
        grid-template-columns: 5fr 7fr;
        gap: 96px;
        align-items: start;
      } /* M-xx */

      /* Timeline */
      .nouen-event-page__timeline {
        display: flex; /* M-xx */
        flex-direction: column; /* M-xx */
      } /* M-xx */

      .nouen-event-page__timeline-track {
        border-left: 1px solid var(--border-subtle);
        display: flex; /* M-xx */
        flex-direction: column; /* M-xx */
        margin-top: 24px;
      } /* M-xx */

      .nouen-event-page__timeline-item {
        position: relative; /* M-xx */
        padding-left: 40px;
        padding-bottom: 48px;
        display: flex; /* M-xx */
        flex-direction: column; /* M-xx */
        gap: 4px; /* M-xx */
      } /* M-xx */

      .nouen-event-page__timeline-item:last-child {
        padding-bottom: 0;
      } /* M-xx */

      .nouen-event-page__timeline-item--past {
        opacity: 0.45;
      } /* M-xx */

      .nouen-event-page__timeline-item--active .nouen-event-page__timeline-dot {
        background: var(--accent-primary);
        box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-primary) 20%, transparent);
      } /* M-xx */

      .nouen-event-page__timeline-dot {
        position: absolute; /* M-xx */
        left: -4px;
        top: 4px;
        width: 8px;
        height: 8px;
        background: var(--border-muted, #555);
        border-radius: 0;
      } /* M-xx */

      .nouen-event-page__timeline-time {
        font-family: var(--font-headline); /* M-xx */
        font-size: 0.75rem; /* M-xx */
        font-weight: 800; /* M-xx */
        letter-spacing: -0.01em;
        color: var(--text-tertiary); /* M-xx */
      } /* M-xx */

      .nouen-event-page__timeline-label {
        font-family: var(--font-headline); /* M-xx */
        font-size: 1rem; /* M-xx */
        font-weight: 700; /* M-xx */
        color: var(--text-primary); /* M-xx */
        margin: 2px 0 0;
      } /* M-xx */

      .nouen-event-page__timeline-item--active .nouen-event-page__timeline-label {
        color: var(--accent-primary);
      } /* M-xx */

      /* Mechanism Explainer */
      .nouen-event-page__mechanism {
        background: #000000;
        border: 1px solid rgba(255, 255, 255, 0.05);
        padding: 48px;
        display: flex; /* M-xx */
        flex-direction: column; /* M-xx */
        justify-content: center; /* M-xx */
        border-radius: 4px;
      } /* M-xx */

      .nouen-event-page__mechanism-eyebrow {
        font-family: var(--font-label); /* M-xx */
        font-size: 0.75rem; /* M-xx */
        font-weight: 700; /* M-xx */
        text-transform: uppercase; /* M-xx */
        letter-spacing: 0.075em;
        color: rgba(255, 255, 255, 0.5);
        margin: 0 0 12px;
      } /* M-xx */

      .nouen-event-page__mechanism-title {
        font-family: var(--font-headline); /* M-xx */
        font-size: 1.75rem;
        font-weight: 700; /* M-xx */
        letter-spacing: -0.02em;
        color: #ffffff;
        margin: 0 0 40px;
        line-height: 1.2; /* M-xx */
      } /* M-xx */

      .nouen-event-page__mechanism-grid {
        display: grid; /* M-xx */
        grid-template-columns: 1fr 1fr; /* M-xx */
        gap: 40px;
      } /* M-xx */

      .nouen-event-page__mechanism-item-header {
        display: flex; /* M-xx */
        align-items: center; /* M-xx */
        gap: 12px;
        margin-bottom: 12px;
        color: #ffffff;
      } /* M-xx */

      .nouen-event-page__mechanism-item-header h5 {
        font-family: var(--font-headline); /* M-xx */
        font-size: 1rem; /* M-xx */
        font-weight: 700; /* M-xx */
        margin: 0;
      } /* M-xx */

      .nouen-event-page__mechanism-item p {
        font-family: var(--font-body); /* M-xx */
        font-size: 0.875rem; /* M-xx */
        color: rgba(255, 255, 255, 0.6);
        line-height: 1.6;
        margin: 0;
      } /* M-xx */

      /* ── Keyframe: pulse para status live ───────────────────────────── */
      @keyframes pulse {

        0%,
        100% {
          opacity: 1;
        }

        50% {
          opacity: 0.4;
        }
      } /* M-xx */

      /* ==============================
   NOUEN HOME PAGE (.nouen-home)
   ============================== */
      .nouen-home {
        background-color: var(--bg-primary);
        color: var(--text-primary); /* M-xx */
        min-height: 100vh;
        display: flex; /* M-xx */
        flex-direction: column; /* M-xx */
      } /* M-xx */

      /* ── Header ── */
      .nouen-home-header {
        position: sticky;
        top: 0;
        z-index: 50;
        background-color: rgba(250, 250, 250, 0.9);
        backdrop-filter: blur(8px);
        border-bottom: 1px solid var(--border-subtle);
        padding: 16px 24px;
        display: flex; /* M-xx */
        align-items: center; /* M-xx */
        justify-content: space-between; /* M-xx */
      } /* M-xx */

      .nouen-home-header__brand {
        display: flex; /* M-xx */
        align-items: center; /* M-xx */
        gap: 48px;
      } /* M-xx */

      .nouen-home-header__logo {
        font-family: var(--font-headline); /* M-xx */
        font-size: 1.5rem;
        font-weight: 800; /* M-xx */
        letter-spacing: -0.03em;
        color: var(--text-primary); /* M-xx */
        text-decoration: none;
      } /* M-xx */

      .nouen-home-header__nav {
        display: none;
      } /* M-xx */

      @media (min-width: 1024px) {
        .nouen-home-header__nav {
          display: flex; /* M-xx */
          align-items: center; /* M-xx */
          gap: 32px;
        }
      } /* M-xx */

      .nouen-home-header__nav-link {
        font-family: var(--font-label); /* M-xx */
        font-size: 0.875rem; /* M-xx */
        font-weight: 550;
        color: var(--text-secondary); /* M-xx */
        text-decoration: none;
        transition: color var(--transition-fast); /* M-xx */
      } /* M-xx */

      .nouen-home-header__nav-link:hover {
        color: var(--text-primary); /* M-xx */
      } /* M-xx */

      .nouen-home-header__actions {
        display: flex; /* M-xx */
        align-items: center; /* M-xx */
        gap: 16px;
      } /* M-xx */

      .nouen-home-header__login-btn {
        background-color: #ffffff !important;
        border-color: var(--accent-primary) !important;
        color: var(--accent-primary) !important;
      } /* M-xx */

      .nouen-home-header__login-btn:hover {
        background-color: var(--accent-primary) !important;
        border-color: var(--accent-primary) !important;
        color: #ffffff !important;
        box-shadow: 0 0 12px rgba(0, 229, 255, 0.3) !important;
      } /* M-xx */


      /* ── Hero Section ── */
      .nouen-home-hero {
        position: relative; /* M-xx */
        width: 100%; /* M-xx */
        margin-top: var(--header-height);
        padding: 0 var(--container-padding);
        background-color: #ffffff;
        /* Sincroniza com a cor base do header */
      } /* M-xx */

      .nouen-home-hero__inner {
        position: relative; /* M-xx */
        width: 100%; /* M-xx */
        max-width: calc(var(--max-width) - (var(--container-padding) * 2));
        margin: 0 auto;
        height: 72vh;
        min-height: 480px;
        max-height: 720px;
        display: flex; /* M-xx */
        align-items: center; /* M-xx */
        justify-content: center; /* M-xx */
        overflow: hidden; /* M-xx */
        border-radius: var(--radius-lg);
        background-color: #111111;
      } /* M-xx */

      .nouen-home-hero__bg-video {
        position: absolute; /* M-xx */
        inset: 0;
        width: 100%; /* M-xx */
        height: 100%; /* M-xx */
        object-fit: cover; /* M-xx */
        filter: brightness(0.65);
        z-index: 0;
      } /* M-xx */

      .nouen-home-hero__overlay {
        position: absolute; /* M-xx */
        inset: 0;
        background: linear-gradient(180deg,
            rgba(10, 10, 10, 0.15) 0%,
            rgba(10, 10, 10, 0.35) 60%,
            rgba(10, 10, 10, 0.85) 100%);
        z-index: 1;
      } /* M-xx */

      /* Conteúdo: texto (esq) + marquee (dir) */
      .nouen-home-hero__content {
        position: relative; /* M-xx */
        z-index: 10; /* M-xx */
        width: 100%; /* M-xx */
        height: 100%; /* M-xx */
        max-width: var(--max-width);
        margin: 0 auto;
        padding: 0 var(--container-padding);
        display: flex; /* M-xx */
        flex-direction: row;
        align-items: center; /* M-xx */
      } /* M-xx */

      .nouen-home-hero__main {
        flex: 0 0 auto;
        width: calc(50% - 28px);
        /* Deixa espaço exato para metade do gap de 56px */
        /* max-width removido para permitir controle individual nos filhos */
        text-align: left;
        display: flex; /* M-xx */
        flex-direction: column; /* M-xx */
        align-items: flex-start;
        padding-left: 48px;
        /* Recuo extra para afastar da borda esquerda */
      } /* M-xx */

      .nouen-home-hero__subtitle {
        display: block;
        font-family: var(--font-label); /* M-xx */
        font-size: 0.625rem; /* M-xx */
        font-weight: 700; /* M-xx */
        text-transform: uppercase; /* M-xx */
        letter-spacing: 0.2em;
        color: var(--accent-primary);
        margin-bottom: 16px;
      } /* M-xx */

      .nouen-home-hero__title {
        font-family: var(--font-headline); /* M-xx */
        font-size: 3.2rem;
        font-weight: 800; /* M-xx */
        line-height: 1.05;
        letter-spacing: -0.04em;
        color: #ffffff;
        margin: 0 0 20px;
        max-width: 591px;
        /* Largura trazida do pai para controle isolado */
      } /* M-xx */

      .nouen-home-hero__description {
        font-family: var(--font-body); /* M-xx */
        font-size: 1rem; /* M-xx */
        color: rgba(255, 255, 255, 0.65);
        margin: 0 0 32px;
        max-width: 540px;
        line-height: 1.6;
      } /* M-xx */

      .nouen-home-hero__actions {
        display: flex; /* M-xx */
        justify-content: flex-start;
        gap: 12px;
        align-items: center; /* M-xx */
      } /* M-xx */

      /* ── Hero Marquee ── */
      .nouen-home-hero__marquee {
        flex: 0 0 auto;
        width: calc(50% - 28px);
        /* Deixa espaço exato para a outra metade do gap de 56px */
        height: 100%; /* M-xx */
        position: absolute; /* M-xx */
        right: 0;
        top: 0;
        display: flex; /* M-xx */
        flex-direction: row;
        gap: 24px;
        /* Padding esquerdo de 48px espreme as colunas; padding direito recua da borda de forma simétrica ao texto */
        padding: 0 calc(var(--container-padding) + 48px) 0 48px;
        overflow: hidden; /* M-xx */
        /* Fade top e bottom para simular o infinito */
        -webkit-mask-image: linear-gradient(to bottom,
            transparent 0%,
            black 15%,
            black 85%,
            transparent 100%);
        mask-image: linear-gradient(to bottom,
            transparent 0%,
            black 15%,
            black 85%,
            transparent 100%);
      } /* M-xx */

      .nouen-home-hero__marquee-col {
        flex: 1;
        display: flex; /* M-xx */
        flex-direction: column; /* M-xx */
        gap: 12px;
        overflow: hidden; /* M-xx */
      } /* M-xx */

      /* Pausa toda a coluna ao hover */
      .nouen-home-hero__marquee-col:hover .nouen-home-hero__marquee-track {
        animation-play-state: paused;
      } /* M-xx */

      .nouen-home-hero__marquee-track {
        display: flex; /* M-xx */
        flex-direction: column; /* M-xx */
        gap: 12px;
        will-change: transform;
      } /* M-xx */

      .nouen-home-hero__marquee-col--up .nouen-home-hero__marquee-track {
        animation: hero-marquee-up 22s linear infinite;
      } /* M-xx */

      .nouen-home-hero__marquee-col--down .nouen-home-hero__marquee-track {
        animation: hero-marquee-down 28s linear infinite;
      } /* M-xx */

      .nouen-home-hero__marquee-card {
        position: relative; /* M-xx */
        width: 100%; /* M-xx */
        aspect-ratio: 3 / 4;
        border-radius: var(--radius-md);
        overflow: hidden; /* M-xx */
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.10);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        flex-shrink: 0;
      } /* M-xx */

      .nouen-home-hero__marquee-img {
        object-fit: cover; /* M-xx */
        transition: transform 0.6s ease;
      } /* M-xx */

      .nouen-home-hero__marquee-card:hover .nouen-home-hero__marquee-img {
        transform: scale(1.05);
      } /* M-xx */

      @keyframes hero-marquee-up {
        from {
          transform: translateY(0);
        }

        to {
          transform: translateY(-50%);
        }
      } /* M-xx */

      @keyframes hero-marquee-down {
        from {
          transform: translateY(-50%);
        }

        to {
          transform: translateY(0);
        }
      } /* M-xx */

      /* Ocultar marquee em telas pequenas */
      @media (max-width: 900px) {
        .nouen-home-hero__marquee {
          display: none;
        }

        .nouen-home-hero__main {
          width: 100%; /* M-xx */
        }
      } /* M-xx */

      .nouen-home-hero__cta {
        padding: 16px 28px;
        font-size: 0.70rem;
        font-weight: 800; /* M-xx */
        letter-spacing: 0.1em; /* M-xx */
        text-transform: uppercase; /* M-xx */
        border-radius: var(--radius-sm);
        font-family: var(--font-headline); /* M-xx */
        display: inline-flex;
        align-items: center; /* M-xx */
        justify-content: center; /* M-xx */
        gap: 8px; /* M-xx */
        cursor: pointer; /* M-xx */
        transition: all var(--transition-fast);
        background: transparent;
        border: 1px solid #ffffff;
        color: #ffffff;
        text-decoration: none;
      } /* M-xx */

      .nouen-home-hero__cta:hover {
        background: var(--accent-primary);
        border-color: var(--accent-primary);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
        color: #ffffff;
      } /* M-xx */

      /* ── Search Bar — posicionada absolutamente na base ── */
      .nouen-home-hero__search-wrapper {
        position: absolute; /* M-xx */
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 20;
        max-width: var(--max-width);
        margin: 0 auto;
        padding: 0 var(--container-padding);
        transform: translateY(50%);
      } /* M-xx */

      .nouen-home-hero__search-container {
        position: relative; /* M-xx */
        width: 100%; /* M-xx */
        max-width: 900px;
        /* Alargado para acomodar o Mega Button */
        margin: 0 auto;
        display: flex; /* M-xx */
        align-items: center; /* M-xx */
        border-radius: var(--radius-md);
        overflow: hidden; /* M-xx */
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2), 0 1px 3px rgba(0, 0, 0, 0.08);
      } /* M-xx */

      .nouen-home-hero__search-input {
        width: 100%; /* M-xx */
        height: 64px;
        /* Padding direito gigante para o mega botão; padding esquerdo para a lupa */
        padding: 16px 260px 16px 64px;
        font-family: var(--font-body); /* M-xx */
        font-size: 0.95rem;
        background-color: #ffffff;
        border: none; /* M-xx */
        border-radius: var(--radius-md);
        color: var(--text-primary); /* M-xx */
        transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
      } /* M-xx */

      .nouen-home-hero__search-input:focus {
        outline: none;
        border-color: var(--accent-primary);
        box-shadow: 0 0 0 1px var(--accent-primary);
      } /* M-xx */

      .nouen-home-hero__search-icon {
        position: absolute; /* M-xx */
        left: 24px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--accent-primary);
        pointer-events: none;
        font-size: 26px;
        font-weight: 600;
        z-index: 10; /* M-xx */
      } /* M-xx */

      .nouen-home-hero__search-btn {
        position: absolute; /* M-xx */
        right: 8px; /* M-xx */
        top: 50%;
        transform: translateY(-50%);
        height: 48px;
        padding: 0 32px;
        border-radius: var(--radius-sm);
        background-color: var(--accent-primary);
        border: none; /* M-xx */
        color: #ffffff;
        font-family: var(--font-headline); /* M-xx */
        font-size: 0.70rem;
        font-weight: 800; /* M-xx */
        letter-spacing: 0.1em; /* M-xx */
        text-transform: uppercase; /* M-xx */
        display: flex; /* M-xx */
        align-items: center; /* M-xx */
        justify-content: center; /* M-xx */
        gap: 8px; /* M-xx */
        cursor: pointer; /* M-xx */
        transition: all var(--transition-fast);
      } /* M-xx */

      .nouen-home-hero__search-btn:hover {
        filter: brightness(1.15);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
      } /* M-xx */

      /* ── Ticker de Liquidez ── */
      .nouen-home-ticker {
        background-color: var(--bg-card);
        border-top: 1px solid var(--border-subtle);
        border-bottom: 1px solid var(--border-subtle);
        display: flex; /* M-xx */
        align-items: center; /* M-xx */
        height: 48px;
        font-size: 0.75rem; /* M-xx */
        overflow: hidden; /* M-xx */
      } /* M-xx */

      .nouen-home-ticker__label {
        padding: 0 24px;
        background-color: var(--bg-card);
        border-right: 1px solid var(--border-subtle);
        font-family: var(--font-label); /* M-xx */
        font-weight: 700; /* M-xx */
        z-index: 10; /* M-xx */
        flex-shrink: 0;
        text-transform: uppercase; /* M-xx */
        letter-spacing: 0.1em; /* M-xx */
        height: 100%; /* M-xx */
        display: flex; /* M-xx */
        align-items: center; /* M-xx */
      } /* M-xx */

      .nouen-home-ticker__scroll-container {
        display: flex; /* M-xx */
        flex: 1;
        overflow: hidden; /* M-xx */
        position: relative; /* M-xx */
      } /* M-xx */

      .nouen-home-ticker__scroll {
        display: flex; /* M-xx */
        align-items: center; /* M-xx */
        white-space: nowrap;
        animation: ticker-scroll 30s linear infinite;
      } /* M-xx */

      .nouen-home-ticker__item {
        font-family: var(--font-body); /* M-xx */
        padding: 0 24px;
        color: var(--text-primary); /* M-xx */
      } /* M-xx */

      .nouen-home-ticker__item strong {
        font-weight: 600;
      } /* M-xx */

      .nouen-home-ticker__divider {
        color: var(--border-subtle);
      } /* M-xx */

      @keyframes ticker-scroll {
        0% {
          transform: translateX(0);
        }

        100% {
          transform: translateX(-50%);
        }
      } /* M-xx */

      /* ── Layout & Containers ── */
      .nouen-home-main {
        max-width: var(--max-width);
        margin: 0 auto;
        padding: 48px var(--container-padding);
        display: flex; /* M-xx */
        flex-direction: column; /* M-xx */
        gap: 120px;
      } /* M-xx */

      .nouen-home-section {
        display: flex; /* M-xx */
        flex-direction: column; /* M-xx */
        scroll-margin-top: calc(var(--header-height) + 40px);
      } /* M-xx */

      .nouen-home-section__header {
        display: flex; /* M-xx */
        justify-content: space-between; /* M-xx */
        align-items: flex-end; /* M-xx */
        border-bottom: 1px solid var(--border-subtle);
        padding-bottom: 16px;
        margin-bottom: 32px;
      } /* M-xx */

      .nouen-home-section__title {
        font-family: var(--font-headline); /* M-xx */
        font-size: 1.5rem;
        font-weight: 700; /* M-xx */
        letter-spacing: -0.02em;
        color: var(--text-primary); /* M-xx */
        margin: 0;
      } /* M-xx */

      .nouen-home-section__module {
        font-family: var(--font-label); /* M-xx */
        font-size: 0.75rem; /* M-xx */
        color: var(--text-tertiary); /* M-xx */
        text-transform: uppercase; /* M-xx */
        letter-spacing: 0.1em; /* M-xx */
      } /* M-xx */

      /* ── Bento de Clusters ── */

      /* Seção wrapper */
      .nouen-home-clusters {
        display: flex; /* M-xx */
        flex-direction: column; /* M-xx */
      } /* M-xx */

      /* Cabeçalho da seção */
      .nouen-home-clusters__header {
        display: flex; /* M-xx */
        justify-content: space-between; /* M-xx */
        align-items: flex-end; /* M-xx */
        border-bottom: 1px solid var(--border-subtle);
        padding-bottom: 16px;
        margin-bottom: 32px;
      } /* M-xx */

      /* Bento grid 2 colunas */
      .nouen-home-clusters__grid {
        display: grid; /* M-xx */
        grid-template-columns: 1fr;
        gap: 16px;
      } /* M-xx */

      @media (min-width: 768px) {
        .nouen-home-clusters__grid {
          grid-template-columns: 1fr 1fr; /* M-xx */
        }
      } /* M-xx */

      /* Card base */
      .nouen-home-clusters__card {
        background-color: var(--bg-card);
        border: 1px solid var(--border-subtle);
        border-radius: var(--radius-md);
        overflow: hidden; /* M-xx */
        display: flex; /* M-xx */
        flex-direction: column; /* M-xx */
        transition: box-shadow var(--transition-normal), transform var(--transition-normal);
        text-decoration: none;
      } /* M-xx */

      .nouen-home-clusters__card:hover {
        box-shadow: var(--shadow-hover);
        transform: translateY(-2px);
      } /* M-xx */

      /* Card destaque — ocupa 2 linhas no grid */
      .nouen-home-clusters__card--featured {
        grid-row: span 2;
      } /* M-xx */

      /* Card padrão — lateral */
      .nouen-home-clusters__card--standard {
        /* herda tudo do card base */
      } /* M-xx */

      /* Card compacto — horizontal (row menor) */
      .nouen-home-clusters__card--compact {
        flex-direction: row;
        align-items: center; /* M-xx */
        padding: 16px;
        gap: 16px;
      } /* M-xx */

      /* Imagem */
      .nouen-home-clusters__card-image {
        position: relative; /* M-xx */
        width: 100%; /* M-xx */
        overflow: hidden; /* M-xx */
        flex: 1;
      } /* M-xx */

      .nouen-home-clusters__card--featured .nouen-home-clusters__card-image {
        height: 256px;
      } /* M-xx */

      .nouen-home-clusters__card--standard .nouen-home-clusters__card-image {
        height: 192px;
      } /* M-xx */

      .nouen-home-clusters__card--compact .nouen-home-clusters__card-image {
        width: 120px;
        height: 96px;
        flex: none;
        border-radius: var(--radius-sm);
        overflow: hidden; /* M-xx */
      } /* M-xx */

      .nouen-home-clusters__card-img {
        width: 100%; /* M-xx */
        height: 100%; /* M-xx */
        object-fit: cover; /* M-xx */
        transition: transform var(--transition-slow);
      } /* M-xx */

      .nouen-home-clusters__card:hover .nouen-home-clusters__card-img {
        transform: scale(1.03);
      } /* M-xx */

      /* Conteúdo textual */
      .nouen-home-clusters__card-content {
        padding: 24px;
        position: relative; /* M-xx */
        padding-bottom: 64px;
      } /* M-xx */

      .nouen-home-clusters__card--compact .nouen-home-clusters__card-content {
        padding: 0;
        flex: 1;
      } /* M-xx */

      /* Label do cluster (ex: "IMÓVEIS") */
      .nouen-home-clusters__card-label {
        font-family: var(--font-headline); /* M-xx */
        font-size: 1.25rem;
        font-weight: 700; /* M-xx */
        text-transform: uppercase; /* M-xx */
        letter-spacing: 0.05em;
        color: var(--text-primary); /* M-xx */
        margin-bottom: 8px;
      } /* M-xx */

      .nouen-home-clusters__card--compact .nouen-home-clusters__card-label {
        font-size: 0.875rem; /* M-xx */
        margin-bottom: 4px; /* M-xx */
      } /* M-xx */

      /* Descrição */
      .nouen-home-clusters__card-desc {
        font-family: var(--font-body); /* M-xx */
        font-size: 0.875rem; /* M-xx */
        color: var(--text-secondary); /* M-xx */
        line-height: 1.5;
      } /* M-xx */

      .nouen-home-clusters__card--compact .nouen-home-clusters__card-desc {
        font-size: 0.75rem; /* M-xx */
      } /* M-xx */

      .nouen-home-clusters__card-desc a {
        color: var(--accent-primary);
        text-decoration: none;
        font-weight: 500;
      } /* M-xx */

      .nouen-home-clusters__card-desc a:hover {
        text-decoration: underline;
      } /* M-xx */

      /* Footer interno do card */
      .nouen-home-clusters__card-footer {
        position: absolute; /* M-xx */
        bottom: 16px;
        left: 24px;
        right: 24px;
        display: flex; /* M-xx */
        justify-content: space-between; /* M-xx */
        align-items: center; /* M-xx */
        padding-top: 16px;
        border-top: 1px solid var(--border-subtle);
        font-family: var(--font-label); /* M-xx */
        font-size: 0.75rem; /* M-xx */
        color: var(--text-tertiary); /* M-xx */
      } /* M-xx */

      .nouen-home-clusters__card-footer-tag {
        display: flex; /* M-xx */
        align-items: center; /* M-xx */
        gap: 8px; /* M-xx */
        text-transform: uppercase; /* M-xx */
        letter-spacing: 0.05em;
      } /* M-xx */

      .nouen-home-clusters__card-footer-icon {
        font-size: 16px !important;
      } /* M-xx */

      /* Linha full-width dentro do grid (span 2 colunas) */
      .nouen-home-clusters__row {
        grid-column: span 1;
      } /* M-xx */

      @media (min-width: 768px) {
        .nouen-home-clusters__row {
          grid-column: span 2;
        }
      } /* M-xx */

      /* Grid interno da linha de cards compactos */
      .nouen-home-clusters__row-grid {
        display: grid; /* M-xx */
        grid-template-columns: 1fr;
        gap: 16px;
      } /* M-xx */

      @media (min-width: 768px) {
        .nouen-home-clusters__row-grid {
          grid-template-columns: 1fr 1fr; /* M-xx */
        }
      } /* M-xx */

      @media (min-width: 1024px) {
        .nouen-home-clusters__row-grid {
          grid-template-columns: repeat(3, 1fr);
        }
      } /* M-xx */

      /* ── Menu de navegação por cluster ── */
      .nouen-home-clusters__menu {
        display: flex; /* M-xx */
        justify-content: center; /* M-xx */
        gap: 24px;
        border-bottom: none;
        padding-bottom: 0;
        margin-bottom: 32px;
        overflow-x: auto;
        scrollbar-width: none;
      } /* M-xx */

      .nouen-home-clusters__menu::-webkit-scrollbar {
        display: none;
      } /* M-xx */

      .nouen-home-clusters__menu-item {
        font-family: var(--font-body); /* M-xx */
        font-size: 0.70rem;
        font-weight: 500;
        letter-spacing: 0.02em;
        text-transform: uppercase; /* M-xx */
        color: var(--text-muted);
        padding: 4px 0;
        border: none; /* M-xx */
        background: transparent;
        cursor: pointer; /* M-xx */
        position: relative; /* M-xx */
        white-space: nowrap;
        transition: color 0.2s ease;
        text-decoration: none;
        display: block;
      } /* M-xx */

      .nouen-home-clusters__menu-item::after {
        content: '';
        position: absolute; /* M-xx */
        bottom: 0px;
        left: 50%;
        transform: translateX(-50%);
        width: 0;
        height: 2px;
        background-color: var(--text-primary);
        transition: width 0.3s ease;
      } /* M-xx */

      .nouen-home-clusters__menu-item:hover,
      .nouen-home-clusters__menu-item--active {
        color: var(--text-primary); /* M-xx */
      } /* M-xx */

      .nouen-home-clusters__menu-item--active {
        font-weight: 700; /* M-xx */
      } /* M-xx */

      .nouen-home-clusters__menu-item:hover::after,
      .nouen-home-clusters__menu-item--active::after {
        width: 100%; /* M-xx */
      } /* M-xx */

      /* ── Cluster Error Boundary ── */
      .nouen-home-clusters__error {
        display: flex; /* M-xx */
        flex-direction: column; /* M-xx */
        align-items: center; /* M-xx */
        justify-content: center; /* M-xx */
        gap: 16px;
        padding: 64px 24px;
        text-align: center;
      } /* M-xx */

      .nouen-home-clusters__error-msg {
        font-family: var(--font-body); /* M-xx */
        font-size: 0.9rem;
        color: var(--text-secondary); /* M-xx */
        margin: 0;
      } /* M-xx */

      .nouen-home-clusters__error-retry {
        font-family: var(--font-headline); /* M-xx */
        font-size: 0.75rem; /* M-xx */
        font-weight: 700; /* M-xx */
        letter-spacing: 0.08em;
        text-transform: uppercase; /* M-xx */
        padding: 10px 24px;
        background: transparent;
        border: 1px solid var(--border-subtle);
        border-radius: var(--radius-sm);
        color: var(--text-primary); /* M-xx */
        cursor: pointer; /* M-xx */
        transition: all var(--transition-fast);
      } /* M-xx */

      .nouen-home-clusters__error-retry:hover {
        background: var(--bg-secondary);
      } /* M-xx */

      /* ── Bento Grid 3×2 ── */
      .nouen-home-clusters__bento {
        display: grid; /* M-xx */
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        gap: 20px;
      } /* M-xx */

      @media (min-width: 768px) {
        .nouen-home-clusters__bento {
          grid-template-columns: 1fr 1fr; /* M-xx */
          grid-template-rows: auto auto;
        }
      } /* M-xx */

      @media (min-width: 1024px) {
        .nouen-home-clusters__bento {
          display: grid; /* M-xx */
          height: calc(100vh - 200px);
          min-height: 600px;
          max-height: 900px;
          grid-template-columns: repeat(4, 1fr);
          grid-template-rows: repeat(6, 1fr);
          gap: 20px;
        }
      } /* M-xx */

      /* Célula base */
      .nouen-home-clusters__cell {
        background: var(--bg-card);
        border: none; /* M-xx */
        border-radius: var(--radius-md);
        overflow: hidden; /* M-xx */
        position: relative; /* M-xx */
        /* min-height removido — a altura é ditada pelo grid ancorado na viewport */
      } /* M-xx */

      /* Posicionamento no grid (desktop) - 4×6 com coordenadas explícitas (para permitir divisões de 50%) */
      @media (min-width: 1024px) {

        /* Card 1: Pôster Evento — Col 1, Linhas 1-4 (66%) */
        .nouen-home-clusters__cell--event {
          grid-column: 1 / 2;
          grid-row: 1 / 5;
        }

        /* Card 2: CU Foto — Col 1, Linhas 5-6 (33%) */
        .nouen-home-clusters__cell--cu-photo {
          grid-column: 1 / 2;
          grid-row: 5 / 7;
        }

        /* Card 3: Placeholder — Col 2, Linhas 1-2 (33%) */
        .nouen-home-clusters__cell--placeholder-1 {
          grid-column: 2 / 3;
          grid-row: 1 / 3;
        }

        /* Card 4: CU — Col 3, Linhas 1-2 (33%) */
        .nouen-home-clusters__cell--cu-secondary {
          grid-column: 3 / 4;
          grid-row: 1 / 3;
        }

        /* Card 5: CU Destaque — Cols 2-3, Linhas 3-6 (66%) */
        .nouen-home-clusters__cell--cu-featured {
          grid-column: 2 / 4;
          grid-row: 3 / 7;
        }

        /* Card 6: Market — Col 4, Linhas 1-3 (50%) */
        .nouen-home-clusters__cell--market {
          grid-column: 4 / 5;
          grid-row: 1 / 4;
        }

        /* Card 7: NOUEN Institucional — Col 4, Linhas 4-6 (50%) */
        .nouen-home-clusters__cell--nouen {
          grid-column: 4 / 5;
          grid-row: 4 / 7;
        }
      } /* M-xx */

      /* ── Cell: Evento — sem aspect-ratio fixo (altura ditada pelo grid) ── */
      .nouen-home-clusters__cell--event {
        min-height: unset;
      } /* M-xx */

      /* ── Cell: NOUEN (dark) ── */
      .nouen-home-clusters__cell--nouen {
        background: #141414;
        border-color: rgba(255, 255, 255, 0.06);
        display: flex; /* M-xx */
        flex-direction: column; /* M-xx */
        justify-content: center; /* M-xx */
        padding: 32px;
      } /* M-xx */

      .nouen-home-clusters__nouen-label {
        font-family: var(--font-label); /* M-xx */
        font-size: 0.625rem; /* M-xx */
        font-weight: 700; /* M-xx */
        letter-spacing: 0.1em; /* M-xx */
        text-transform: uppercase; /* M-xx */
        color: var(--accent-primary);
        margin-bottom: 16px;
      } /* M-xx */

      .nouen-home-clusters__nouen-title {
        font-family: var(--font-headline); /* M-xx */
        font-size: 1.375rem;
        font-weight: 800; /* M-xx */
        letter-spacing: -0.03em;
        line-height: 1.1;
        color: #ffffff;
        margin-bottom: 16px;
      } /* M-xx */

      .nouen-home-clusters__nouen-tagline {
        font-family: var(--font-body); /* M-xx */
        font-size: 0.8125rem;
        color: rgba(255, 255, 255, 0.55);
        line-height: 1.55;
        flex: 1;
      } /* M-xx */

      .nouen-home-clusters__nouen-cta {
        display: inline-flex;
        align-items: center; /* M-xx */
        gap: 8px; /* M-xx */
        margin-top: 32px;
        font-family: var(--font-label); /* M-xx */
        font-size: 0.6875rem;
        font-weight: 700; /* M-xx */
        letter-spacing: 0.08em;
        text-transform: uppercase; /* M-xx */
        color: #ffffff;
        text-decoration: none;
        border: 1px solid rgba(255, 255, 255, 0.2);
        padding: 10px 16px;
        border-radius: var(--radius-sm);
        transition: border-color var(--transition-fast), background var(--transition-fast);
        align-self: flex-start;
      } /* M-xx */

      /* Acende o botão quando qualquer parte do card receber hover */
      .nouen-home-clusters__cell--nouen:hover .nouen-home-clusters__nouen-cta,
      .nouen-home-clusters__nouen-cta:hover {
        background: var(--accent-primary);
        border-color: var(--accent-primary);
        color: #ffffff;
        box-shadow: 0 0 16px var(--accent-primary);
      } /* M-xx */

      /* ── Cell: Panorama ── */
      @keyframes nouenFadeIn {
        from {
          opacity: 0;
        }

        to {
          opacity: 1;
        }
      } /* M-xx */

      .nouen-home-clusters__cell--panorama {
        display: flex; /* M-xx */
        flex-direction: column; /* M-xx */
        justify-content: center; /* M-xx */
        padding: 24px;
        gap: 16px;
      } /* M-xx */

      .nouen-home-clusters__panorama-label {
        font-family: var(--font-label); /* M-xx */
        font-size: 0.625rem; /* M-xx */
        font-weight: 700; /* M-xx */
        letter-spacing: 0.1em; /* M-xx */
        text-transform: uppercase; /* M-xx */
        color: var(--text-tertiary); /* M-xx */
      } /* M-xx */

      .nouen-home-clusters__panorama-stat {
        display: flex; /* M-xx */
        flex-direction: column; /* M-xx */
        gap: 4px; /* M-xx */
      } /* M-xx */

      .nouen-home-clusters__panorama-number {
        font-family: var(--font-headline); /* M-xx */
        font-size: 2rem;
        font-weight: 800; /* M-xx */
        letter-spacing: -0.04em;
        color: var(--text-primary); /* M-xx */
        line-height: 1;
      } /* M-xx */

      /* ── Cell: Cluster Portal (Opção 2 - Editorial) ── */
      .nouen-home-clusters__cell--placeholder-1.group:hover .nouen-portal-bg-text {
        transform: scale(1.05) translateX(-20px);
        opacity: 0.18 !important;
        /* Brilha um pouco mais no hover */
      } /* M-xx */

      .nouen-home-clusters__cell--placeholder-1.group:hover .nouen-portal-cta {
        transform: translateY(-2px);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
      } /* M-xx */

      .nouen-home-clusters__cell--placeholder-1.group:hover .nouen-portal-cta .material-symbols-outlined {
        transform: translateX(4px);
      } /* M-xx */

      /* ── Market Card (posição 6) ── */
      .nouen-market-card {
        background: #ffffff;
        position: relative; /* M-xx */
        display: flex; /* M-xx */
        flex-direction: column; /* M-xx */
        justify-content: space-between; /* M-xx */
        padding: 28px 24px;
        border-radius: var(--radius-sm);
        overflow: hidden; /* M-xx */
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        border: none !important;
        outline: none;
      } /* M-xx */

      .nouen-market-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.04);
      } /* M-xx */

      .nouen-home-clusters__panorama-desc {
        font-family: var(--font-body); /* M-xx */
        font-size: 0.75rem; /* M-xx */
        color: var(--text-tertiary); /* M-xx */
        text-transform: uppercase; /* M-xx */
        letter-spacing: 0.05em;
      } /* M-xx */

      .nouen-home-clusters__panorama-divider {
        height: 1px;
        background: var(--border-subtle);
      } /* M-xx */

      /* ── Stories Bar ── */
      .nouen-home-clusters__stories-bar {
        position: absolute; /* M-xx */
        top: 12px;
        left: 12px;
        right: 12px;
        display: flex; /* M-xx */
        gap: 4px; /* M-xx */
        z-index: 10; /* M-xx */
      } /* M-xx */

      .nouen-home-clusters__stories-segment {
        flex: 1;
        height: 2px;
        background: rgba(255, 255, 255, 0.3);
        border-radius: 1px;
        overflow: hidden; /* M-xx */
      } /* M-xx */

      .nouen-home-clusters__stories-fill {
        height: 100%; /* M-xx */
        width: 0%;
        background: #ffffff;
        border-radius: 1px;
      } /* M-xx */

      .nouen-home-clusters__stories-fill--done {
        width: 100%; /* M-xx */
      } /* M-xx */

      .nouen-home-clusters__stories-fill--active {
        animation: storiesFill var(--stories-duration, 4000ms) linear forwards;
      } /* M-xx */

      @keyframes storiesFill {
        from {
          width: 0%;
        }

        to {
          width: 100%; /* M-xx */
        }
      } /* M-xx */

      /* ── CU Carousel ── */
      .nouen-home-clusters__cu-carousel {
        position: relative; /* M-xx */
        width: 100%; /* M-xx */
        height: 100%; /* M-xx */
        display: flex; /* M-xx */
        flex-direction: column; /* M-xx */
      } /* M-xx */

      .nouen-home-clusters__cu-image {
        position: relative; /* M-xx */
        flex: 1;
        overflow: hidden; /* M-xx */
        min-height: 180px;
      } /* M-xx */

      .nouen-home-clusters__cu-img {
        width: 100%; /* M-xx */
        height: 100%; /* M-xx */
        object-fit: cover; /* M-xx */
        transition: transform var(--transition-slow);
      } /* M-xx */

      .nouen-home-clusters__cu-carousel:hover .nouen-home-clusters__cu-img {
        transform: scale(1.03);
      } /* M-xx */

      /* Badge de mecanismo — padrão canônico CUCard, hover teal NOUEN */
      .nouen-home-clusters__badge {
        position: absolute; /* M-xx */
        top: 16px;
        right: 16px;
        background-color: var(--text-primary);
        color: #ffffff;
        font-size: 0.625rem; /* M-xx */
        padding: 4px 12px;
        font-weight: 700; /* M-xx */
        text-transform: uppercase; /* M-xx */
        letter-spacing: 0.1em; /* M-xx */
        border-radius: var(--radius-sm);
        transition: background-color var(--transition-fast) ease-in-out;
        z-index: 10; /* M-xx */
        pointer-events: none;
      } /* M-xx */

      .nouen-home-clusters__cu-carousel:hover .nouen-home-clusters__badge {
        background-color: var(--accent-primary);
      } /* M-xx */

      /* ── Hover reveal panel (vidro fosco, sobe do fundo) ── */
      .nouen-home-clusters__cu-hover-panel {
        position: absolute; /* M-xx */
        inset: 0;
        display: flex; /* M-xx */
        flex-direction: column; /* M-xx */
        justify-content: space-between; /* M-xx */
        padding: 20px;
        background: rgba(250, 250, 250, 0.93);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        transform: translateY(100%);
        transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 15;
      } /* M-xx */

      .nouen-home-clusters__cu-carousel:hover .nouen-home-clusters__cu-hover-panel {
        transform: translateY(0);
      } /* M-xx */

      /* Rodapé interno do hover panel */
      .nouen-home-clusters__cu-hover-footer {
        display: flex; /* M-xx */
        align-items: flex-end; /* M-xx */
        justify-content: space-between; /* M-xx */
        gap: 8px; /* M-xx */
        margin-top: auto;
      } /* M-xx */

      .nouen-home-clusters__cu-hover-cta {
        display: inline-flex;
        align-items: center; /* M-xx */
        gap: 6px;
        background: var(--accent-primary);
        color: #fff;
        font-size: 0.625rem; /* M-xx */
        font-weight: 700; /* M-xx */
        letter-spacing: 0.08em;
        text-transform: uppercase; /* M-xx */
        padding: 8px 14px;
        border-radius: var(--radius-sm);
        text-decoration: none;
        white-space: nowrap;
        flex-shrink: 0;
      } /* M-xx */

      .nouen-home-clusters__cu-hover-price {
        text-align: right;
      } /* M-xx */

      .nouen-home-clusters__cu-hover-price-label {
        display: block;
        font-size: 0.5625rem;
        font-weight: 600;
        color: var(--text-tertiary); /* M-xx */
        letter-spacing: 0.08em;
        text-transform: uppercase; /* M-xx */
        margin-bottom: 2px;
      } /* M-xx */

      .nouen-home-clusters__cu-hover-price-value {
        display: block;
        font-size: 1rem; /* M-xx */
        font-weight: 800; /* M-xx */
        color: var(--text-primary); /* M-xx */
        font-family: var(--font-headline); /* M-xx */
      } /* M-xx */

      .nouen-home-clusters__cu-content {
        padding: 20px;
        background: var(--bg-card);
      } /* M-xx */

      .nouen-home-clusters__cu-market {
        font-family: var(--font-label); /* M-xx */
        font-size: 0.625rem; /* M-xx */
        font-weight: 700; /* M-xx */
        letter-spacing: 0.08em;
        text-transform: uppercase; /* M-xx */
        color: var(--text-tertiary); /* M-xx */
        margin-bottom: 6px;
      } /* M-xx */

      .nouen-home-clusters__cu-title {
        font-family: var(--font-headline); /* M-xx */
        font-size: 0.9375rem;
        font-weight: 700; /* M-xx */
        color: var(--text-primary); /* M-xx */
        letter-spacing: -0.02em;
        line-height: 1.2; /* M-xx */
        margin-bottom: 12px;
        display: -webkit-box; /* M-xx */
        -webkit-line-clamp: 2; /* M-xx */
        -webkit-box-orient: vertical; /* M-xx */
        overflow: hidden; /* M-xx */
      } /* M-xx */

      .nouen-home-clusters__cu-footer {
        display: flex; /* M-xx */
        justify-content: space-between; /* M-xx */
        align-items: center; /* M-xx */
        padding-top: 12px;
        border-top: 1px solid var(--border-subtle);
      } /* M-xx */

      .nouen-home-clusters__cu-value {
        font-family: var(--font-headline); /* M-xx */
        font-size: 1rem; /* M-xx */
        font-weight: 700; /* M-xx */
        color: var(--text-primary); /* M-xx */
      } /* M-xx */

      .nouen-home-clusters__cu-mechanism {
        font-family: var(--font-label); /* M-xx */
        font-size: 0.625rem; /* M-xx */
        font-weight: 700; /* M-xx */
        letter-spacing: 0.06em;
        text-transform: uppercase; /* M-xx */
        color: var(--text-tertiary); /* M-xx */
      } /* M-xx */

      /* Dots de carrossel */
      .nouen-home-clusters__carousel-dots {
        display: flex; /* M-xx */
        gap: 6px;
        justify-content: center; /* M-xx */
        padding: 12px 0 4px;
      } /* M-xx */

      .nouen-home-clusters__carousel-dot {
        width: 5px;
        height: 5px;
        border-radius: 50%; /* M-xx */
        background: var(--border-subtle);
        border: none; /* M-xx */
        cursor: pointer; /* M-xx */
        padding: 0;
        transition: background var(--transition-fast);
      } /* M-xx */

      .nouen-home-clusters__carousel-dot--active {
        background: var(--text-primary);
      } /* M-xx */

      /* ── Market Carousel ── */
      .nouen-home-clusters__market-carousel {
        position: relative; /* M-xx */
        width: 100%; /* M-xx */
        height: 100%; /* M-xx */
        display: flex; /* M-xx */
        flex-direction: column; /* M-xx */
        justify-content: space-between; /* M-xx */
        padding: 28px 24px;
      } /* M-xx */

      .nouen-home-clusters__market-accent {
        position: absolute; /* M-xx */
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
      } /* M-xx */

      .nouen-home-clusters__market-id {
        font-family: var(--font-label); /* M-xx */
        font-size: 0.6875rem;
        color: var(--text-tertiary); /* M-xx */
        opacity: 0.8;
        margin-bottom: 16px;
      } /* M-xx */

      .nouen-home-clusters__market-name {
        font-family: var(--font-headline); /* M-xx */
        font-size: 1.15rem;
        font-weight: 700; /* M-xx */
        letter-spacing: -0.04em;
        color: var(--text-primary); /* M-xx */
        margin-bottom: 4px; /* M-xx */
      } /* M-xx */

      .nouen-home-clusters__market-category {
        font-size: 0.7rem;
        font-weight: 500;
        letter-spacing: 0.02em;
        text-transform: uppercase; /* M-xx */
        color: var(--text-secondary); /* M-xx */
      } /* M-xx */

      /* ── Empty state ── */
      .nouen-home-clusters__empty {
        display: flex; /* M-xx */
        flex-direction: column; /* M-xx */
        align-items: center; /* M-xx */
        justify-content: center; /* M-xx */
        height: 100%; /* M-xx */
        padding: 32px;
        color: var(--text-tertiary); /* M-xx */
        font-family: var(--font-label); /* M-xx */
        font-size: 0.75rem; /* M-xx */
        text-transform: uppercase; /* M-xx */
        letter-spacing: 0.05em;
        gap: 8px; /* M-xx */
      } /* M-xx */

      .nouen-home-clusters__empty-icon {
        font-size: 24px;
        opacity: 0.3;
      } /* M-xx */


      .nouen-home-showcase-section {
        background-color: var(--bg-secondary);
        border: 1px solid var(--border-subtle);
        border-radius: var(--radius-md);
        padding: 48px 32px;
      } /* M-xx */

      .nouen-home-showcase-grid {
        display: grid; /* M-xx */
        grid-template-columns: 1fr;
        gap: 32px;
        align-items: center; /* M-xx */
      } /* M-xx */

      @media (min-width: 768px) {
        .nouen-home-showcase-grid {
          grid-template-columns: repeat(2, 1fr);
        }
      } /* M-xx */

      @media (min-width: 1200px) {
        .nouen-home-showcase-grid {
          grid-template-columns: repeat(4, 1fr);
        }
      } /* M-xx */

      .nouen-home-showcase-card {
        display: flex; /* M-xx */
        flex-direction: column; /* M-xx */
        align-items: center; /* M-xx */
        gap: 12px;
        text-align: center;
      } /* M-xx */

      .nouen-home-showcase-card__logo {
        font-family: var(--font-headline); /* M-xx */
        font-size: 1.35rem;
        font-weight: 700; /* M-xx */
        letter-spacing: -0.02em;
        color: var(--text-primary); /* M-xx */
      } /* M-xx */

      .nouen-home-showcase-card__logo svg {
        display: inline-block;
        vertical-align: middle;
      } /* M-xx */

      .nouen-home-showcase-card__tag {
        font-family: var(--font-label); /* M-xx */
        font-size: 0.65rem;
        font-weight: 600;
        text-transform: uppercase; /* M-xx */
        letter-spacing: 0.05em;
        color: var(--text-secondary); /* M-xx */
        border: 1px solid var(--border-subtle);
        padding: 4px 8px;
        border-radius: var(--radius-sm);
        background-color: var(--bg-card);
      } /* M-xx */

      /* ── Showcase de Mercados (BEM) ── */
      .nouen-home-showcase {
        background-color: var(--bg-secondary);
      } /* M-xx */

      .nouen-home-showcase__inner {
        max-width: var(--max-width);
        margin: 0 auto;
        padding: 80px var(--container-padding);
      } /* M-xx */

      .nouen-home-showcase__header {
        display: flex; /* M-xx */
        flex-direction: row;
        align-items: flex-end; /* M-xx */
        justify-content: space-between; /* M-xx */
        margin-bottom: 48px;
      } /* M-xx */

      .nouen-home-showcase__counter {
        font-family: var(--font-label); /* M-xx */
        font-size: 0.75rem; /* M-xx */
        font-weight: 700; /* M-xx */
        letter-spacing: 0.05em;
        color: var(--text-tertiary); /* M-xx */
        text-transform: uppercase; /* M-xx */
        padding-bottom: 12px;
        /* alinha à baseline do h2 */
        white-space: nowrap;
      } /* M-xx */

      .nouen-home-showcase__grid {
        display: grid; /* M-xx */
        grid-template-columns: 1fr;
        gap: 20px;
      } /* M-xx */

      @media (min-width: 640px) {
        .nouen-home-showcase__grid {
          grid-template-columns: repeat(2, 1fr);
        }
      } /* M-xx */

      @media (min-width: 1024px) {
        .nouen-home-showcase__grid {
          grid-template-columns: repeat(4, 1fr);
        }
      } /* M-xx */

      /* Card do Showcase — herda .nouen-market-card, adiciona overrides de Link */
      .nouen-home-showcase__card {
        text-decoration: none;
        color: inherit;
        aspect-ratio: 1 / 1;
      } /* M-xx */

      /* ── Operator Section ── */
      /* ── Painel do Operador — wrapper ── */
      .nouen-home-operator {
        max-width: var(--max-width);
        margin: 0 auto;
        padding: 96px var(--container-padding);
      } /* M-xx */

      .nouen-home-operator-grid {
        display: grid; /* M-xx */
        grid-template-columns: 1fr;
        gap: 64px;
        align-items: center; /* M-xx */
      } /* M-xx */

      @media (min-width: 1024px) {
        .nouen-home-operator-grid {
          grid-template-columns: 1fr 1fr; /* M-xx */
        }
      } /* M-xx */

      .nouen-home-operator-content {
        display: flex; /* M-xx */
        flex-direction: column; /* M-xx */
      } /* M-xx */

      .nouen-home-operator-title {
        font-family: var(--font-headline); /* M-xx */
        font-size: 2.25rem;
        font-weight: 800; /* M-xx */
        line-height: 1.2; /* M-xx */
        letter-spacing: -0.02em;
        color: var(--text-primary); /* M-xx */
        margin-bottom: 28px;
      } /* M-xx */

      .nouen-home-operator-list {
        list-style: none;
        padding: 0;
        margin: 0 0 48px 0;
        display: flex; /* M-xx */
        flex-direction: column; /* M-xx */
        gap: 32px;
      } /* M-xx */

      .nouen-home-operator-item {
        display: flex; /* M-xx */
        gap: 16px;
      } /* M-xx */

      .nouen-home-operator-item__icon {
        background-color: var(--text-primary);
        padding: 8px; /* M-xx */
        border-radius: var(--radius-sm);
        color: #ffffff;
        display: flex; /* M-xx */
        align-items: center; /* M-xx */
        justify-content: center; /* M-xx */
        width: 40px;
        height: 40px;
        flex-shrink: 0;
      } /* M-xx */

      .nouen-home-operator-item__title {
        font-family: var(--font-headline); /* M-xx */
        font-size: 1rem; /* M-xx */
        font-weight: 700; /* M-xx */
        color: var(--text-primary); /* M-xx */
        margin: 0 0 4px 0;
      } /* M-xx */

      .nouen-home-operator-item__description {
        font-family: var(--font-body); /* M-xx */
        font-size: 0.875rem; /* M-xx */
        color: var(--text-secondary); /* M-xx */
        line-height: 1.5;
        margin: 0;
      } /* M-xx */

      .nouen-home-operator-cta {
        align-self: flex-start;
        display: inline-flex;
        align-items: center; /* M-xx */
        gap: 8px; /* M-xx */
        font-family: var(--font-headline); /* M-xx */
        font-size: 0.70rem;
        font-weight: 800; /* M-xx */
        letter-spacing: 0.1em; /* M-xx */
        text-transform: uppercase; /* M-xx */
        padding: 16px 28px;
        background-color: var(--accent-primary);
        color: #ffffff;
        border: none; /* M-xx */
        border-radius: var(--radius-sm);
        cursor: pointer; /* M-xx */
        transition: background-color var(--transition-fast);
        text-decoration: none;
      } /* M-xx */

      .nouen-home-operator-cta:hover {
        filter: brightness(1.15);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
        color: #ffffff;
      } /* M-xx */

      /* ── Dashboard Wireframe Mockup ── */
      .nouen-home-dashboard-mockup {
        position: relative; /* M-xx */
        background-color: var(--bg-card);
        border: 1px solid var(--border-subtle);
        border-radius: var(--radius-md);
        padding: 16px;
        box-shadow: var(--shadow-card);
      } /* M-xx */

      .nouen-home-dashboard-mockup__window {
        display: flex; /* M-xx */
        gap: 8px; /* M-xx */
        border-bottom: 1px solid var(--bg-secondary);
        padding-bottom: 12px;
        margin-bottom: 16px;
      } /* M-xx */

      .nouen-home-dashboard-mockup__dot {
        width: 10px;
        height: 10px;
        border-radius: 50%; /* M-xx */
        background-color: var(--bg-tertiary);
      } /* M-xx */

      .nouen-home-dashboard-mockup__body {
        display: flex; /* M-xx */
        gap: 16px;
      } /* M-xx */

      .nouen-home-dashboard-mockup__sidebar {
        width: 25%;
        border-right: 1px solid var(--bg-secondary);
        padding-right: 16px;
        display: flex; /* M-xx */
        flex-direction: column; /* M-xx */
        gap: 12px;
      } /* M-xx */

      .nouen-home-dashboard-mockup__line {
        height: 14px;
        background-color: var(--bg-secondary);
        border-radius: var(--radius-sm);
      } /* M-xx */

      .nouen-home-dashboard-mockup__main {
        flex: 1;
        display: flex; /* M-xx */
        flex-direction: column; /* M-xx */
        gap: 16px;
      } /* M-xx */

      .nouen-home-dashboard-mockup__title {
        height: 28px;
        width: 40%;
        background-color: var(--bg-secondary);
        border-radius: var(--radius-sm);
        margin-bottom: 8px;
      } /* M-xx */

      .nouen-home-dashboard-mockup__grid {
        display: grid; /* M-xx */
        grid-template-columns: 1fr 1fr; /* M-xx */
        gap: 12px;
      } /* M-xx */

      .nouen-home-dashboard-mockup__card {
        height: 96px;
        background-color: var(--bg-secondary);
        border: 1px solid var(--border-subtle);
        border-radius: var(--radius-sm);
      } /* M-xx */

      .nouen-home-dashboard-mockup__chart {
        height: 128px;
        background-color: var(--bg-secondary);
        border: 1px solid var(--border-subtle);
        border-radius: var(--radius-sm);
      } /* M-xx */

      .nouen-home-dashboard-mockup__suggestion {
        position: absolute; /* M-xx */
        top: 30%;
        left: -24px;
        background-color: var(--bg-card);
        border: 1px solid var(--border-subtle);
        border-radius: var(--radius-sm);
        padding: 12px;
        font-family: var(--font-body); /* M-xx */
        font-size: 0.8rem;
        font-weight: 550;
        box-shadow: var(--shadow-card);
        z-index: 10; /* M-xx */
        animation: bounce-slow 4s ease-in-out infinite;
      } /* M-xx */

      @keyframes bounce-slow {

        0%,
        100% {
          transform: translateY(0);
        }

        50% {
          transform: translateY(-6px);
        }
      } /* M-xx */

      .nouen-home-dashboard-mockup__heatmap {
        position: absolute; /* M-xx */
        bottom: 20%;
        right: -16px;
        background-color: var(--bg-card);
        border: 1px solid var(--border-subtle);
        border-radius: var(--radius-sm);
        padding: 12px;
        width: 180px;
        box-shadow: var(--shadow-card);
        z-index: 10; /* M-xx */
      } /* M-xx */

      .nouen-home-dashboard-mockup__heatmap-title {
        font-family: var(--font-label); /* M-xx */
        font-size: 0.7rem;
        font-weight: 700; /* M-xx */
        text-transform: uppercase; /* M-xx */
        margin-bottom: 8px;
      } /* M-xx */

      .nouen-home-dashboard-mockup__heatmap-grid {
        display: grid; /* M-xx */
        grid-template-columns: repeat(5, 1fr);
        gap: 4px; /* M-xx */
      } /* M-xx */

      .nouen-home-dashboard-mockup__heatmap-cell {
        aspect-ratio: 1;
        background-color: var(--bg-secondary);
        border-radius: 2px;
      } /* M-xx */

      .nouen-home-dashboard-mockup__heatmap-cell--active-1 {
        background-color: var(--bg-tertiary);
      } /* M-xx */

      .nouen-home-dashboard-mockup__heatmap-cell--active-2 {
        background-color: var(--border-subtle);
      } /* M-xx */

      .nouen-home-dashboard-mockup__heatmap-cell--active-3 {
        background-color: var(--text-secondary);
      } /* M-xx */

      .nouen-home-dashboard-mockup__heatmap-cell--active-max {
        background-color: var(--text-primary);
      } /* M-xx */

      /* ── Trust / Blindagens Section ── */
      .nouen-home-trust-grid {
        display: grid; /* M-xx */
        grid-template-columns: 1fr;
        gap: 32px;
      } /* M-xx */

      @media (min-width: 768px) {
        .nouen-home-trust-grid {
          grid-template-columns: 1fr 1fr; /* M-xx */
        }
      } /* M-xx */

      @media (min-width: 1200px) {
        .nouen-home-trust-grid {
          grid-template-columns: repeat(4, 1fr);
        }
      } /* M-xx */

      .nouen-home-trust-card {
        display: flex; /* M-xx */
        flex-direction: column; /* M-xx */
        gap: 16px;
      } /* M-xx */

      .nouen-home-trust-card__icon {
        color: var(--text-primary); /* M-xx */
      } /* M-xx */

      .nouen-home-trust-card__title {
        font-family: var(--font-headline); /* M-xx */
        font-size: 1.125rem;
        font-weight: 700; /* M-xx */
        color: var(--text-primary); /* M-xx */
        margin: 0;
      } /* M-xx */

      .nouen-home-trust-card__description {
        font-family: var(--font-body); /* M-xx */
        font-size: 0.875rem; /* M-xx */
        color: var(--text-secondary); /* M-xx */
        line-height: 1.5;
        margin: 0;
      } /* M-xx */

      /* ── Pre-Footer Action Banner ── */
      .nouen-home-banner {
        background-color: var(--bg-dark);
        color: var(--text-on-dark);
        padding: 48px var(--container-padding);
      } /* M-xx */

      .nouen-home-banner__grid {
        max-width: var(--max-width);
        margin: 0 auto;
        display: grid; /* M-xx */
        grid-template-columns: 1fr;
        gap: 32px;
      } /* M-xx */

      @media (min-width: 768px) {
        .nouen-home-banner__grid {
          grid-template-columns: 1fr 1fr; /* M-xx */
        }
      } /* M-xx */

      .nouen-home-banner__column {
        display: flex; /* M-xx */
        flex-direction: column; /* M-xx */
        gap: 8px; /* M-xx */
      } /* M-xx */

      .nouen-home-banner__title {
        font-family: var(--font-body); /* M-xx */
        font-size: 0.875rem; /* M-xx */
        color: var(--text-on-dark-muted);
        margin: 0;
      } /* M-xx */

      .nouen-home-banner__link {
        font-family: var(--font-label); /* M-xx */
        font-size: 0.875rem; /* M-xx */
        font-weight: 700; /* M-xx */
        color: var(--accent-primary);
        text-decoration: none;
        transition: color var(--transition-fast); /* M-xx */
      } /* M-xx */

      .nouen-home-banner__link:hover {
        color: #ffffff;
      } /* M-xx */

      /* ── Footer ── */
      .nouen-home-footer {
        background-color: var(--bg-dark);
        color: var(--text-on-dark);
        border-top: 1px solid var(--border-dark);
        padding: 48px var(--container-padding);
        font-size: 0.875rem; /* M-xx */
      } /* M-xx */

      .nouen-home-footer__container {
        max-width: var(--max-width);
        margin: 0 auto;
        display: flex; /* M-xx */
        flex-direction: column; /* M-xx */
        align-items: center; /* M-xx */
        justify-content: space-between; /* M-xx */
        gap: 24px;
      } /* M-xx */

      @media (min-width: 768px) {
        .nouen-home-footer__container {
          flex-direction: row;
        }
      } /* M-xx */

      .nouen-home-footer__copyright {
        font-family: var(--font-label); /* M-xx */
        font-size: 0.75rem; /* M-xx */
        color: var(--text-on-dark-subtle);
      } /* M-xx */

      .nouen-home-footer__links {
        display: flex; /* M-xx */
        gap: 24px;
      } /* M-xx */

      .nouen-home-footer__link {
        font-family: var(--font-label); /* M-xx */
        font-size: 0.75rem; /* M-xx */
        color: var(--text-on-dark-subtle);
        text-decoration: none;
        transition: color var(--transition-fast); /* M-xx */
      } /* M-xx */

      .nouen-home-footer__link:hover {
        color: #ffffff;
      } /* M-xx */

      .nouen-table-row {
        transition: background-color 0.2s ease;
      } /* M-xx */
      .nouen-table-row:hover {
        background-color: rgba(0,0,0,0.02);
      } /* M-xx */


/* ══════════════════════════════════════════════════════════════════
   V7.2 — MARKET PAGE MOBILE (≤ 767px)
   Convenção: overrides mobile ao final do arquivo (DA-V7.1-01)
   Todos os blocos abaixo usam max-width: 767px (breakpoint canônico)
   NUNCA modificar os blocos @media (min-width: *) acima

   ▶ DA-V7.5-04 — ZONA MOBILE — FRONTEIRA INVIOLÁVEL ◀
   TODO CSS adicionado abaixo desta linha DEVE estar dentro de @media.
   Exceção: propriedades globais com nota "global-intencional: [razão]".
   Auditoria antes de cada commit: ./scripts/check-mobile-css.sh
   ══════════════════════════════════════════════════════════════════ */

/* global-intencional: botão de busca é elemento mobile; precisa de hide explícito em desktop.
   Usando @media (min-width: 768px) para garantir compatibilidade com Safari/WebKit. */
@media (min-width: 768px) {
  .nouen-header-mobile-search-btn-trigger {
    display: none !important;
  } /* M-xx */
}

/* Tab strip do Painel do Buyer: oculto em desktop; ativado via @media (max-width: 767px) abaixo */
.nouen-buyer-tab-strip { display: none; }

/* Branding mobile do Header do Buyer: oculto em desktop; ativado via @media (max-width: 767px) abaixo */
.nouen-buyer-header__market-branding { display: none; }
.nouen-buyer-header__nouen-logo-center { display: none; }

/* ── V8.2: Páginas Legais — override mobile (DA-V7.5-04) ── */
@media (max-width: 767px) {
  .nouen-legal-header-inner {
    padding: 0 16px; /* substitui --container-padding 56px no mobile */
  }
  .nouen-legal-back-bar {
    padding: 10px 16px; /* substitui --container-padding 56px no mobile */
  }
  /* V8.2: Footer mobile — centraliza links legais e corrige gap entre linhas.
     flex-direction:column no bottom-left dá controle explícito do espaçamento;
     align-content:flex-start no legal-group evita que align-content:normal
     distribua espaço extra entre as linhas quebradas do flex-wrap. */
  .market-footer__bottom-left {
    flex-direction: column;
    align-items: center;
    width: 100%;
  }
  .market-footer__legal-group {
    justify-content: center;
    align-content: flex-start;
  }
} /* M-xx */

/* ── M-04 — Heroes mobile (Standard, Split, Minimalist) ── */
/* ── M-24: proporções V7.4 restauradas via calc() ──
   V7.4 usava nowrap + gap:32px com main(65%) e aside(35%):
   main encolhia 20.8px, aside encolhia 11.2px (flex-shrink proporcional).
   Reproduzimos isso com: calc(65%-21px) + 32px + calc(35%-11px) = 100% exato.
   Assim gallery e aside têm as mesmas larguras que tinham no V7.4. */
@media (min-width: 1024px) {
  /* M-24 — Grid layout: galeria e main empilhados na coluna esquerda, aside à direita.
     Motivo: flex-wrap com order criava um gap entre galeria e conteúdo principal quando
     o aside era mais alto que a galeria (o aside esticava a linha flex e a galeria ficava
     com espaço vazio abaixo). Grid elimina o problema ao posicionar cada elemento
     explicitamente — galeria(col1,row1), main(col1,row2), aside(col2,rows1-2). */
  .nouen-cu-layout {
    display: grid; /* M-xx */
    grid-template-columns: calc(65% - 16px) calc(35% - 16px);
    /* calc: col1 + gap(32px) + col2 = (65%-16) + 32 + (35%-16) = 100% */
    grid-template-rows: auto auto;
    column-gap: 32px;
    row-gap: 32px;
  } /* M-xx */
  .nouen-cu-layout > .nouen-cu-gallery {
    grid-column: 1;
    grid-row: 1;
    width: auto; /* grid controla a largura */
    order: unset;
  } /* M-xx */
  .nouen-cu-layout__aside {
    grid-column: 2;
    grid-row: 1 / span 2; /* ocupa as duas linhas da coluna direita */
    width: auto;
    order: unset;
    padding-left: 0;
    align-self: start; /* necessário para position: sticky funcionar em grid */
  } /* M-xx */
  .nouen-cu-layout__main {
    grid-column: 1;
    grid-row: 2;
    width: auto;
    order: unset;
    padding-right: 21px; /* mantém recuo V7.4 */
  } /* M-xx */
  /* M-24b: badge de mecanismo na galeria é necessário em mobile (ActionCard abaixo da galeria).
     No desktop, o ActionCard já exibe o badge — esconder o da galeria para evitar duplicata. */
  .cu-page-theme .nouen-cu-gallery__mechanism-badge {
    display: none;
  } /* M-xx */
  /* M-24b: timer overlay removido de todos os contextos (info duplicada com o timer do ActionCard). */
  .cu-page-theme .nouen-cu-gallery__timer-overlay {
    display: none;
  } /* M-xx */
  /* M-32: ações da galeria (♥ + ⇑) são mobile-only — ocultar no desktop. */
  .cu-page-theme .nouen-cu-gallery__actions {
    display: none;
  } /* M-xx */
  /* M-33: botão de toggle do histórico no footer é mobile-only */
  .nouen-action-card__footer-history-btn { display: none; }
}

/* M-26 — BidHistory accordion: base (desktop) — escopo restrito à CUPage para não afetar EventPanel (V7.7) */
.cu-page-theme .nouen-bid-history__toggle { display: none; }
.cu-page-theme .nouen-bid-history__content { display: block; }

/* CUMobileTitle — oculto em desktop, visível em mobile via @media abaixo */
.nouen-cu-mobile-title { display: none; }

@media (max-width: 767px) {

  /* ── Proteção global contra scroll horizontal em mobile ── */
  /* Solução iOS Safari sticky:
     - html: clip → corta overflow-x no nível do viewport, sem criar scroll context
     - body: visible → anula o overflow-x:hidden global (linha 90) que criava um
       scroll context no body, quebrando position:sticky nos descendentes no iOS */
  /* Safe area iOS: o iOS usa o background do html para preencher o canvas da viewport
     (incluindo a zona safe-area-inset-top). --bg-primary = #fafafa causava mismatch
     de cor com o header (#ffffff). Declarar #ffffff no html alinha as duas cores. */
  html { overflow-x: clip; background-color: #ffffff; }
  body { overflow-x: visible; }

  /* V7.5: header mobile reduzido para 54px — override da variável global (64px) */
  :root { --header-height: 54px; }

  /* Modal Negociação: em mobile o overlay deve começar abaixo do header (z-index 800 < header 1000),
     caso contrário o conteúdo do modal "vaza" por baixo do header visível */
  .nouen-neg-modal-overlay { /* M-xx */
    align-items: flex-start;
    padding-top: calc(var(--header-height) + env(safe-area-inset-top, 0px) + 12px);
  }
  .nouen-neg-modal { /* M-xx */
    max-height: calc(100dvh - var(--header-height) - env(safe-area-inset-top, 0px) - 40px);
    padding: 24px 20px;
  }

  /* Faixa de acento do header: oculta em mobile.
     Em iOS, a área acima do header (safe-area-inset-top) é preenchida com a cor
     do sistema — a faixa colorida fica "solta" no topo do header, quebrando o visual. */
  .nouen-header::before { display: none; }

  .nouen-vitrine__filter-wrapper {
    position: fixed;
    left: 0;
    right: 0;
    /* z-index 500: acima de qualquer conteúdo (máx 50 no CSS), abaixo do header (1000) */
    z-index: 500;
    /* -10px: sobreposição agressiva para fechar gap de renderização em retina */
    top: calc(54px + env(safe-area-inset-top) - 10px); /* V7.5: 64→54px */
    background: var(--bg-primary);
    /* sem box-shadow — separação feita pelo ::after (linha 1px) */
  } /* M-xx */

  /* Breadcrumb: oculto em mobile — posicionamento inadequado (abaixo da barra fixa)
     e a navegação já é coberta pelo botão voltar e menu hamburguer */
  .nouen-vitrine .nouen-cu-breadcrumb {
    display: none;
  } /* M-xx */

  /* Restaurar a linha separadora (::after) do desktop no mobile */
  .nouen-vitrine__filter-wrapper .nouen-vitrine__header-inner::after {
    display: block;
  } /* M-xx */

  /* Compensação do filter-bar fixo no nouen-vitrine (container pai): */
  /* O padding-top total = 54px (NOUEN header, V7.5) + env(safe-area-inset-top) (notch) */
  /* + ~64px (filter-bar reduzido M-11) + 8px (breathing room) = calc(126px + safe-area). */
  /* Isso empurra o título/breadcrumb para baixo da barra fixa. */
  .nouen-vitrine {
    padding-top: calc(126px + env(safe-area-inset-top)); /* M-11: 182→126px (-56px da busca) */
  } /* M-xx */

  /* nouen-vitrine__body: padding-top 4px — somado ao padding-bottom:4px do
     result-count dá 8px de gap entre "X oportunidades" e o EventStrip */
  .nouen-vitrine__body {
    padding-top: 4px;
  } /* M-xx */

  .nouen-market-hero {
    min-height: 80vh;
    padding-top: calc(var(--header-height, 64px) + 48px);
    padding-bottom: 48px;
    align-items: flex-end; /* UX Mobile: Abordagem Bottom-Heavy */
  } /* M-xx */

  /* Sobrepõe o padding-left: 110px inline do MarketHeroStandard */
  .nouen-market-hero-standard__container {
    padding-left: 16px !important;
    padding-right: 16px;
  } /* M-xx */

  .nouen-market-hero__headline {
    font-size: 2.25rem !important; /* Força sobreposição aos inline styles 4.0rem */
    max-width: 100%;
    margin-bottom: 16px;
  } /* M-xx */

  .nouen-market-hero__tagline {
    font-size: 1rem !important; /* Força sobreposição aos inline styles 1.28rem */
    margin-bottom: 32px;
  } /* M-xx */

  .nouen-market-hero__actions {
    flex-direction: column !important;
    flex-wrap: nowrap !important; /* Impede column-wrap com inline flexWrap:wrap do HeroSplit */
    gap: 12px;
    padding-top: 8px;
  } /* M-xx */

  .nouen-market-hero__btn {
    min-height: 44px;    /* Touch target (Skill 15 §B) */
    width: 100%;
    justify-content: center;
  } /* M-xx */

  /* Feedback :active — hover não funciona em touch (Skill 15 §B) */
  .nouen-market-hero__btn:active {
    opacity: 0.85;
    transform: scale(0.98);
  } /* M-xx */

  /* Hero Full — mobile: gradiente vertical (topo claro → base escura) em vez da diagonal do desktop */
  .nouen-market-hero--full {
    background-image: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.85)), var(--hero-bg) !important;
  } /* M-xx */

  /* --- Hero Split: stack vertical (DA-V7.2-02 Opção C aprovada)
         Conteúdo editorial ACIMA, imagem ABAIXO com proporção original --- */
  .nouen-market-hero-split {
    flex-direction: column;
    min-height: 80vh;
    overflow-x: hidden;
    box-sizing: border-box;
    padding-bottom: 32px; /* Respiro inferior mobile */
  } /* M-xx */

  .nouen-market-hero-split__content {
    padding: calc(var(--header-height, 64px) + 88px) 16px 32px !important;
    flex: none;
    max-width: 100%;
    box-sizing: border-box; /* Garante que padding não extrapola o width */
  } /* M-xx */

  .nouen-market-hero-split__poster {
    width: auto !important;
    max-width: none !important;
    margin: 0 16px 32px 16px !important; /* Cria o respiro lateral e empurra do rodapé */
    align-self: stretch; /* Estica preenchendo a tela, mas subtraindo o margin (100% à prova de scroll) */
    flex: none;
    aspect-ratio: 4 / 5 !important; /* Proporção 4:5 solicitada */
    border-radius: var(--radius-md); /* Suaviza as pontas já que não toca na borda da tela */
  } /* M-xx */

  /* Oculta o fade lateral (blend) no mobile, pois o texto fica em cima da imagem, não ao lado */
  .nouen-market-hero-split__fade {
    display: none !important;
  } /* M-xx */

  /* --- Hero Minimalist: sobrepõe padding: 60px 200px inline --- */
  .nouen-market-hero-minimalist__content {
    padding: calc(var(--header-height, 64px) + 32px) 16px 40px !important;
    align-self: center;    /* Sobrescreve align-items: flex-end herdado do .nouen-market-hero */
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  } /* M-xx */

  /* --- Hero Minimalist: Glow --- */
  .nouen-market-hero-minimalist__glow {
    width: 400px;
    height: 400px;
    top: -10%;
    right: -30%;
    animation: none; /* desativa no mobile — transforms escapam do clip no iOS Safari */
  } /* M-xx */

  /* ── M-05 — Seção Agenda / EventStrip mobile ── */

  /* Pôster lateral oculto em mobile (usa !important para sobrescrever inline style do TSX) */
  .nouen-market-events-about__poster {
    display: none !important;
  } /* M-xx */

  /* Força padding e gap mobile no container da seção (remove o herdado 56px e gap: 48px do desktop) */
  .nouen-market-events-about__container {
    padding-left: 16px !important;
    padding-right: 16px !important;
    gap: 0 !important; /* Remove o gap: 48px do flex column desktop que estava criando o espaço enorme */
  } /* M-xx */

  /* Lista de eventos: carrossel horizontal nativo */
  .nouen-market-section-header {
    margin-bottom: 16px !important; /* Boa prática: 16px = 2 unidades na escala de 8-pontos */
  } /* M-xx */

  /* Ajuste responsivo de tipografia para a seção (H2) */
  .nouen-market-section-title {
    font-size: 1.75rem !important; /* Reduzido de 2.25rem para melhorar o respiro no mobile */
  } /* M-xx */

  .nouen-market-events-list {
    max-height: none;
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 16px;
    scroll-padding: 0 16px;
    padding: 16px 16px 48px 16px !important; /* Bottom padding para respiro antes da próxima seção */
    gap: 16px;
    margin: 0 -16px !important; /* Breakout exato dos 16px do container para tocar a borda da tela */
    scrollbar-width: none; /* Oculta scrollbar no Firefox */
  } /* M-xx */

  .nouen-market-events-list::-webkit-scrollbar {
    display: none; /* Oculta scrollbar no Chrome/Safari */
  } /* M-xx */

  /* Card do Evento: wrapper flex-col transparente — poster e strip são blocos independentes */
  .nouen-market-event-card {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px;
    padding: 0 !important;
    width: 320px; /* 320px — peek de ~23px no iPhone 375, ~38px no iPhone 390 */
    flex-shrink: 0;
    scroll-snap-align: start;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    overflow: visible !important;
  } /* M-xx */

  /* Poster mobile com overlays — substitui o ::before pseudo-elemento */
  .nouen-market-event-card__poster-mobile {
    display: block;
    position: relative;
    width: 100%;
    aspect-ratio: 4/5;
    /* Duas camadas: imagem na frente, gradiente atrás.
       Se a imagem falha (imageUrl vazio), o gradiente aparece — mesmo visual do desktop. */
    background-image:
      var(--event-bg, none),
      radial-gradient(ellipse 80% 80% at top right,
        color-mix(in srgb, var(--card-accent, #121212) 25%, transparent),
        transparent);
    background-size: cover, cover;
    background-position: center, center;
    background-color: var(--bg-secondary);
    border-radius: var(--radius-md); /* 4px canônico */
    overflow: hidden;
  } /* M-xx */

  /* Badge de status: canto superior DIREITO do poster */
  .nouen-market-event-card__poster-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 4px 8px;
    border-radius: 4px;
    background: var(--card-accent, var(--accent-primary)); /* Usa a accent color do market */
    color: #fff;
  } /* M-xx */

  /* Variante Aberto: usa a cor de status upcoming */
  .nouen-market-event-card__poster-badge--open {
    background: var(--status-upcoming, #d97706);
  } /* M-xx */

  /* Badge de data: canto inferior ESQUERDO do poster, 44×44px */
  .nouen-market-event-card__poster-date {
    position: absolute;
    bottom: 16px;
    left: 16px;
    width: 44px;
    height: 44px;
    background: var(--card-accent, var(--text-primary)); /* Usa a accent color do market */
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm); /* 4px canônico */
    flex-shrink: 0;
  } /* M-xx */

  .nouen-market-event-card__poster-day {
    font-size: 1.125rem;
    font-weight: 800;
    line-height: 1;
  } /* M-xx */

  .nouen-market-event-card__poster-month {
    font-size: 0.55rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 2px;
    line-height: 1;
  } /* M-xx */

  /* Strip mobile: flex-col com padding e gap gerenciados pelos filhos (strip-row e strip-footer) */
  .nouen-market-event-card__strip {
    gap: 0 !important;
    padding: 0 !important;
    background: var(--bg-primary);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-light);
  } /* M-xx */

  /* Oculta no mobile: data e status estão no poster; exibidos normalmente no desktop */
  .nouen-market-event-card__strip-date,
  .nouen-market-event-card__strip-status {
    display: none !important;
  } /* M-xx */

  /* Strip-row: gap compacto no mobile (desktop usa 24px via inline style) */
  .nouen-market-event-card__strip-row {
    gap: 8px !important;
    padding: 12px 14px;
  } /* M-xx */

  /* Rodapé de ação rápida no mobile */
  .nouen-market-event-card__strip-footer {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid var(--border-subtle);
    padding: 8px 14px;
    margin-top: 0 !important; /* Cancela o margin-top: 10px da regra desktop não-scoped */
  } /* M-xx */

  /* Links do rodapé no mobile */
  .nouen-market-event-card__strip-footer-link {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--card-accent, var(--accent-primary));
    display: inline-flex;
    align-items: center;
    gap: 2px;
    white-space: nowrap;
  } /* M-xx */

  /* Badge de data no minicard */
  .nouen-market-event-card__date {
    width: 44px !important;
    height: 44px !important;
    flex-shrink: 0;
    /* grid-column / grid-row não se aplicam mais — strip é flex */
  } /* M-xx */
  .nouen-market-event-card__date .nouen-market-event-card__day {
    font-size: 1rem !important;
  } /* M-xx */
  .nouen-market-event-card__date .nouen-market-event-card__month {
    font-size: 0.55rem !important;
  } /* M-xx */

  /* Info no minicard: empilha título e badge verticalmente */
  .nouen-market-event-card__info {
    flex: 1;
    min-width: 0;
    padding-right: 0 !important; /* Cancela o paddingRight: 16px do inline style TSX */
  } /* M-xx */

  /* Título do evento no minicard */
  .nouen-market-event-card__title {
    font-size: 0.875rem !important; /* 14px — líder de hierarquia */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 4px !important;
  } /* M-xx */

  /* Container de título + badge: empilha verticalmente (sem overflow horizontal) */
  .nouen-market-event-card__info > div:first-child {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
    margin-bottom: 2px !important;
  } /* M-xx */

  /* Meta/categorias: override mobile para 11px (desktop usa 14px) */
  .nouen-market-event-card__location {
    font-size: 0.75rem !important; /* 12px — subordinado ao título */
  } /* M-xx */

  /* Seta de ação no minicard */
  .nouen-market-event-card__action {
    flex-shrink: 0;
    /* grid-column / grid-row não se aplicam mais */
  } /* M-xx */

  /* Feedback :active no card inteiro (Skill 15 §B) */
  .nouen-market-event-card:active {
    opacity: 0.85;
    transform: scale(0.99);
  } /* M-xx */

  /* ── M-06 — Grids de CUs mobile (Destaques, Novidades, Encerrando) ── */

  /* Item 1: Padding vertical das seções — de 96px para 32px em mobile (padrão Google/Apple) */
  .nouen-market-recent,
  .nouen-market-closing,
  .nouen-market-about,
  .nouen-market-events-about {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
    scroll-margin-top: var(--header-height, 64px);
  } /* M-xx */

  /* Item 2: Padding lateral 16px — mesmo padrão da seção Agenda (events-about__container) */
  .nouen-market-recent .nouen-container,
  .nouen-market-closing .nouen-container,
  .nouen-market-about .nouen-container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  } /* M-xx */

  /* 1 coluna em mobile para Destaques e Encerrando */
  .nouen-market-recent__grid,
  .nouen-market-closing__grid {
    grid-template-columns: 1fr;
    gap: 16px;
  } /* M-xx */

  /* Novidades: 2 colunas em mobile com card compacto (V7.7) */
  .nouen-market-recent__grid--4cols {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  } /* M-xx */

  /* Respiro entre o bloco "Atividade do Mercado" e os CUCards em mobile */
  .nouen-market-closing__right {
    margin-top: 24px;
  } /* M-xx */

  /* Limitar a 6 cards em mobile (Novidades fetcha 12 no servidor; desktop mostra todos) */
  .nouen-market-recent__grid > *:nth-child(n+7),
  .nouen-market-recent__grid--4cols > *:nth-child(n+7) {
    display: none;
  } /* M-xx */

  /* Header das seções (label + link "Ver todos") em coluna no mobile */
  .nouen-market-recent__header {
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
    padding-bottom: 16px !important;
    margin-bottom: 16px !important;
  } /* M-xx */

  /* Link "ver todos" no header — oculto em mobile (aparece antes dos cards, sem contexto).
     O botão ao final da seção (button-outline) cumpre essa função no momento certo. */
  .nouen-market-recent__link {
    display: none;
  } /* M-xx */

  /* Botão "Ver todas as novidades" — full-width + touch target */
  .nouen-market-recent__button-outline {
    min-height: 44px;
    width: 100%;
    justify-content: center;
  } /* M-xx */

  /* Feedback :active no botão (Skill 15 §B) */
  .nouen-market-recent__button-outline:active {
    opacity: 0.85;
    transform: scale(0.98);
  } /* M-xx */

  /* ── M-07 — MarketFooter mobile ── */

  /* Grid principal: coluna única em mobile */
  .market-footer__grid {
    grid-template-columns: 1fr !important;
    gap: 40px;
  } /* M-xx */

  /* Colunas de nav e contato: alinhamento à esquerda em mobile */
  .market-footer__col-nav,
  .market-footer__col-contact {
    align-items: flex-start !important;
    text-align: left !important;
    padding-right: 0 !important;
  } /* M-xx */

  /* Bottom bar: stack em mobile */
  .market-footer__bottom {
    flex-direction: column !important;
    gap: 12px;
    text-align: center;
  } /* M-xx */

  /* Touch targets para links do footer (Skill 15 §B) */
  .market-footer__nav-link,
  .market-footer__contact-link {
    min-height: 44px;
    display: flex;
    align-items: center;
  } /* M-xx */

  /* ── M-08A — MarketHeader mobile (hamburguer dropdown) ── */

  /* Ajuste de safe area / padding lateral generoso reduzido para mobile */
  .nouen-header-inner {
    padding: 0 16px !important;
    position: relative; /* Âncora para o search overlay (position: absolute; inset: 0) */
  } /* M-xx */

  .nouen-header-logo-img {
    height: 22px !important;
  } /* M-xx */

  /* Ocultar nav central e busca bar padrão em mobile — vão para o painel / overlay */
  .nouen-header-nav,
  .nouen-header-search:not(.nouen-mobile-search-form) {
    display: none !important;
  } /* M-xx */

  /* Ocultar CTAs e seletor de idioma do HomeHeader na barra em mobile — vivem no drawer */
  .nouen-home-header__login-btn,
  .nouen-home-header__cta-contact,
  .nouen-home-lang-selector:not(.nouen-home-lang-selector--mobile) {
    display: none !important;
  } /* M-xx */

  /* Mostrar botão hamburguer em mobile como último elemento à direita (padrão UX mobile) */
  .nouen-header-hamburger {
    order: 10;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--text-primary);
    min-width: 44px;
    min-height: 44px;
    border-radius: var(--radius-sm);
    padding: 0;
    margin-right: -10px; /* Compensa os 10px invisíveis do touch target — ícone alinha visualmente com os 16px do logo */
  } /* M-xx */

  /* Botão de busca (lupa) visível no header bar apenas em mobile */
  .nouen-header-mobile-search-btn-trigger {
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--text-primary);
    min-width: 44px;
    min-height: 44px;
    border-radius: var(--radius-sm);
    padding: 0;
  } /* M-xx */

  /* Overlay de busca expandida */
  .nouen-mobile-search-form {
    display: block !important;
    flex: 1;
    max-width: none;
    margin: 0;
  } /* M-xx */
  
  .nouen-mobile-search-form input {
    height: 44px; /* Touch target (Skill 15) */
    padding-left: 40px; /* Espaço para o ícone interno */
  } /* M-xx */
  .nouen-header-mobile-search-btn-trigger:active {
    opacity: 0.7;
  } /* M-xx */

  /* Garantir touch target de 44px para os ícones de ação do usuário no mobile (Carrinho, Avatar) */
  .nouen-header-user-actions > button {
    min-width: 44px;
    min-height: 44px;
  } /* M-xx */

  /* Ocultar Market Name no mobile — apenas monograma/logo visível */
  .nouen-header-logo-name {
    display: none !important;
  } /* M-xx */

  /* Ocultar elementos parciais de texto no mobile */
  .nouen-hide-on-mobile {
    display: none !important;
  } /* M-xx */

  .nouen-header-hamburger:active {
    opacity: 0.7;
  } /* M-xx */

  .nouen-header-hamburger .material-symbols-outlined {
    font-size: 24px;
  } /* M-xx */

  /* Painel dropdown mobile */
  .nouen-header-mobile-menu {
    position: fixed;
    top: var(--header-height, 64px);
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border-subtle);
    z-index: 900;
    padding: 24px 16px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    overflow-y: auto;
  } /* M-xx */

  /* Campo de busca no painel mobile */
  .nouen-header-mobile-search {
    max-width: 100% !important;
    width: 100% !important;
  } /* M-xx */

  /* Links de navegação no painel mobile */
  .nouen-header-mobile-nav {
    display: flex;
    flex-direction: column;
    gap: 0;
    flex: 1; /* Ocupa todo o espaço disponível, empurrando os CTAs para o fundo */
  } /* M-xx */

  .nouen-header-mobile-link {
    display: flex;
    align-items: center;
    min-height: 52px;       /* Touch target generoso (Skill 15 §B) */
    padding: 0 4px;
    color: var(--text-primary);
    text-decoration: none;
    font-family: var(--font-headline);
    font-size: 1.0625rem;
    font-weight: 500;
    border-bottom: 1px solid var(--border-subtle);
    text-transform: none;
    letter-spacing: normal;
  } /* M-xx */

  .nouen-header-mobile-link:last-child {
    border-bottom: none;
  } /* M-xx */

  .nouen-header-mobile-link.active {
    color: var(--accent-primary);
  } /* M-xx */

  .nouen-header-mobile-link:active {
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
  } /* M-xx */

  /* ── M-08B — CU Card mobile ── */

  /* Suprimir flash azul padrão do iOS no link-wrapper do CUCard e EventCard.
     Ambos têm feedback :active customizado — o tap highlight padrão conflita com ele. */
  .nouen-cu-card,
  .nouen-market-event-card {
    -webkit-tap-highlight-color: transparent;
  } /* M-xx */

  /* Suprimir estilo nativo de <button> em iOS/Safari nos botões de ação.
     O card inteiro já é um <a> clicável — esses botões são ação secundária,
     portanto a exceção de 44px horizontal é aceitável (V7.2 exceção aprovada). */
  .nouen-cu-card__action-btn {
    -webkit-appearance: none;
    appearance: none;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    min-height: 44px; /* touch target vertical mantido */
    /* min-width removido: ícones ficam no tamanho natural (~20px) como em produção */
  } /* M-xx */
  .nouen-cu-card__action-btn .material-symbols-outlined {
    font-size: 22px; /* Aumentado de 20px no desktop para balancear o min-height de 44px */
  } /* M-xx */

  /* :active feedback no card completo — substitui o hover que não existe em touch */
  .nouen-cu-card:active {
    opacity: 0.88;
  } /* M-xx */

  /* Badge de mecanismo: sempre com accent color do market em mobile (no desktop só aparece no hover) */
  .nouen-cu-card__badge {
    background-color: var(--cu-accent-color, var(--text-primary)) !important;
  } /* M-xx */

  /* "Ver detalhes": visível brevemente no :active como feedback de toque */
  .nouen-cu-card:active .nouen-cu-card__cta-block {
    transform: translateY(0);
    opacity: 1;
  } /* M-xx */
  .nouen-cu-card:active .nouen-cu-card__location-block {
    transform: translateY(-100%);
    opacity: 0;
  } /* M-xx */

  /* ── M-07 — Footer mobile ── */

  /* Padding lateral do container (mesmo padrão das outras seções — 56px → 16px) */
  .market-footer .nouen-container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  } /* M-xx */

  /* Padding superior da section (80px → 32px) */
  .market-footer {
    padding-top: 32px !important;
  } /* M-xx */

  /* Grid principal: gap (60px → 24px) e margem inferior (80px → 40px) */
  .market-footer__grid {
    gap: 24px !important;
    margin-bottom: 40px !important;
  } /* M-xx */

  /* Colunas Nav e Contato: alinhamento esquerda em mobile (direita só faz sentido em layout multi-coluna) */
  .market-footer__col-nav,
  .market-footer__col-contact {
    align-items: flex-start !important;
    text-align: left !important;
    padding-right: 0 !important;
  } /* M-xx */

  /* Listas internas: alinhamento esquerda */
  .market-footer__col-nav ul,
  .market-footer__col-contact ul {
    align-items: flex-start !important;
  } /* M-xx */

  /* Nav links: grid 2 colunas em mobile (lista vertical → layout compacto e scannable) */
  .market-footer__col-nav ul {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0 24px !important; /* sem row-gap — o touch target já dá o espaço vertical */
  } /* M-xx */

  /* Touch target mínimo 44px nos links de nav e contato */
  .market-footer__nav-link,
  .market-footer__contact-link {
    display: flex !important;
    align-items: center !important;
    min-height: 44px !important;
  } /* M-xx */

  /* Labels de nav: curtos em mobile (longos ocultos) */
  .market-footer__nav-label-long { display: none !important; }
  .market-footer__nav-label-short { display: inline !important; }

  /* Bottom bar: coluna centralizada + mais padding em mobile */
  .market-footer__bottom {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    justify-content: center !important;
    gap: 4px !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  } /* M-xx */

  /* Linha 1: copyright em coluna; linha 2: legal-group agrupado */
  .market-footer__bottom-left {
    flex-direction: column !important;
    align-items: center !important;
    gap: 2px !important;
  } /* M-xx */

  /* ── Checkout: 1 coluna no mobile ── */
  .nouen-checkout__grid { /* M-11 */
    grid-template-columns: 1fr; /* M-11 */
  } /* M-11 */

  /* ── Vitrine: título e busca em mobile ── */
  /* Título "Vitrine": 2rem do desktop → 1.375rem canônico mobile */
  .nouen-vitrine__title { font-size: 1.375rem; }

  /* Placeholder "Busca livre...": 16px obrigatório (iOS anti-zoom) mas visualmente
     desproporcional — ocultamos o placeholder, o ícone de lupa já orienta o usuário */
  .nouen-vitrine__search-input::placeholder { color: transparent; }

  /* ── M-09 — Grid de CUs em 1 coluna ── */
  .nouen-vitrine__grid,
  .nouen-vitrine__grid--4-cols {
    grid-template-columns: 1fr;
    gap: 16px; /* Padrão mobile canônico */
  } /* M-xx */

  /* ── M-10 — Filter bar: scroll horizontal + grid toggle oculto ── */
  /* Padding lateral da header-inner e body */
  .nouen-vitrine__header-inner,
  .nouen-vitrine__body { padding-left: 16px; padding-right: 16px; }

  /* Filter bar: coluna em mobile; gap preservado para reversão da busca (M-11) */
  .nouen-vitrine__filter-bar {
    flex-direction: column;
    gap: 8px; /* M-11: mantido mesmo com busca oculta — restaura espaçamento ao reativar */
    padding-bottom: 4px; /* M-11: reduz o buraco deixado pela remoção da busca */
  } /* M-xx */

  /* Row de chips: scroll horizontal */
  .nouen-vitrine__chips-row {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;  /* impede scroll vertical acidental no carrossel de chips */
    flex-wrap: nowrap;
    gap: 12px;
    scrollbar-width: none;
    padding-bottom: 4px;
    max-width: 100%;  /* contém o overflow dentro do filter-bar */
    min-width: 0;     /* permite o flex-child encolher */
  } /* M-xx */
  .nouen-vitrine__chips-row::-webkit-scrollbar { display: none; }

  /* Grupos de filtro: não encolher */
  .nouen-vitrine__chips-row .nouen-vitrine__filter-group { flex-shrink: 0; }
  .nouen-vitrine__chips-row .nouen-vitrine__filter-divider { flex-shrink: 0; }

  /* Grid toggle: oculto em mobile */
  .nouen-vitrine__filter-group--grid { display: none; }
  
  /* Toggle Mobile: visível apenas no mobile */
  .nouen-vitrine__mobile-view-toggle { display: flex !important; } /* M-xx */
  
  /* Grid 2x2 para mobile */
  .nouen-vitrine__grid--2-mobile { /* global-intencional: Mobile reusável */
    display: grid; /* M-xx */
    grid-template-columns: 1fr 1fr; /* M-xx */
    gap: 10px; /* M-xx */
  } /* M-xx */

  /* ── Variante Compacta ── */
  .nouen-cu-card--compact { /* global-intencional: Variante compacta reusável */
    display: flex; /* M-xx */
    flex-direction: column; /* M-xx */
  } /* M-xx */
  .nouen-cu-card--compact .nouen-cu-card__image-container { /* global-intencional: Variante compacta reusável */
    aspect-ratio: 4/3; /* M-xx */
    position: relative; /* M-xx */
    overflow: hidden; /* M-xx */
    margin-bottom: 0; /* M-xx */ /* Anula o 24px do card base */
  } /* M-xx */
  .nouen-cu-card--compact .nouen-cu-card__image { /* global-intencional: Variante compacta reusável */
    width: 100%; /* M-xx */
    height: 100%; /* M-xx */
    object-fit: cover; /* M-xx */
  } /* M-xx */
  .nouen-cu-card--compact .nouen-cu-card__compact-fav { /* global-intencional: Variante compacta reusável */
    position: absolute; /* M-xx */
    top: 8px; /* M-xx */
    right: 8px; /* M-xx */
    background: rgba(0, 0, 0, 0.45); /* M-xx */ /* Padrão CUPage */
    backdrop-filter: blur(6px); /* M-xx */
    -webkit-backdrop-filter: blur(6px); /* M-xx */
    border: none; /* M-xx */
    border-radius: 50%; /* M-xx */
    width: 32px; /* M-xx */
    height: 32px; /* M-xx */
    display: flex; /* M-xx */
    align-items: center; /* M-xx */
    justify-content: center; /* M-xx */
    cursor: pointer; /* M-xx */
    z-index: 10; /* M-xx */
    color: #fff; /* M-xx */ /* Padrão CUPage */
    transition: background 0.15s; /* M-xx */
  } /* M-xx */
  .nouen-cu-card--compact .nouen-cu-card__compact-fav .material-symbols-outlined { /* global-intencional: Variante compacta reusável */
    font-size: 16px; /* M-xx */ /* Padrão CUPage */
  } /* M-xx */
  .nouen-cu-card--compact .nouen-cu-card__content { /* global-intencional: Variante compacta reusável */
    padding: 8px; /* M-xx */
    gap: 4px; /* M-xx */
  } /* M-xx */
  .nouen-cu-card--compact .nouen-cu-card__compact-badge { /* global-intencional: Variante compacta reusável */
    font-family: var(--font-body); /* M-xx */
    font-size: 0.5625rem; /* M-xx */ /* 9px */
    font-weight: 700; /* M-xx */
    text-transform: uppercase; /* M-xx */
    letter-spacing: 0.05em; /* M-xx */
    color: var(--cu-accent-color, var(--text-tertiary)); /* M-xx */
  } /* M-xx */
  .nouen-cu-card--compact .nouen-cu-card__title { /* global-intencional: Variante compacta reusável */
    font-family: var(--font-headline); /* M-xx */
    font-size: 0.8125rem; /* M-xx */ /* 13px */
    font-weight: 800; /* M-xx */
    line-height: 1.2; /* M-xx */
    color: var(--text-primary); /* M-xx */
    display: -webkit-box; /* M-xx */
    -webkit-line-clamp: 2; /* M-xx */
    -webkit-box-orient: vertical; /* M-xx */
    overflow: hidden; /* M-xx */
    text-overflow: ellipsis; /* M-xx */
    min-height: 2.4em; /* M-xx */
    margin-bottom: 4px; /* M-xx */
  } /* M-xx */
  .nouen-cu-card--compact .nouen-cu-card__footer { /* global-intencional: Variante compacta reusável */
    display: flex; /* M-xx */
    justify-content: space-between; /* M-xx */
    align-items: flex-end; /* M-xx */
    border-top: none; /* M-xx */
    padding-top: 0; /* M-xx */
    gap: 8px; /* M-xx */
  } /* M-xx */
  .nouen-cu-card--compact .nouen-cu-card__compact-uf { /* global-intencional: Variante compacta reusável */
    font-family: var(--font-body); /* M-xx */
    font-size: 0.75rem; /* M-xx */
    font-weight: 700; /* M-xx */
    color: var(--text-secondary); /* M-xx */
  } /* M-xx */
  .nouen-cu-card--compact .nouen-cu-card__price-value { /* global-intencional: Variante compacta reusável */
    font-size: 0.8125rem; /* M-xx */ /* 13px */
  } /* M-xx */
  /* Timer overlay: sem efeito de scale no hover do card compacto — imagem pequena demais */
  .nouen-cu-card--compact:hover .nouen-cu-card__timer-overlay { /* global-intencional: Variante compacta reusável */
    animation: none;
  } /* M-xx */

  /* Chips: touch target mínimo */
  .nouen-vitrine__filter-chip { min-height: 36px; align-items: center; display: inline-flex; }

  /* ── M-11 — Busca: oculto no mobile (usamos MarketHeader) + iOS anti-zoom no select ── */
  .nouen-vitrine__search-wrapper { display: none; } /* mobile */
  .nouen-vitrine__sort-select { font-size: 16px; } /* iOS anti-zoom no select */

  /* ── M-13 — EventStrip: ocultar mini poster em mobile ── */
  /* Poster muito pequeno para ter impacto visual em 375px;
     card-body ganha o espaço e o título respira sem truncamento */
  .nouen-vitrine-event-strip__card-poster { display: none; }

  /* M-13 — VitrineEventStrip: setas ocultas + cards responsivos */
  /* Ocultar setas de navegação — swipe + snap é o padrão mobile */
  .nouen-vitrine-events-nav-btn { display: none !important; }

  /* Cards: largura responsiva com peek — calc(100vw - 56px) deixa ~20px do próximo card
     visível à direita, sinalizando que há scroll horizontal */
  .nouen-vitrine-event-strip__card {
    width: calc(100vw - 56px) !important;
    flex-shrink: 0;
    scroll-snap-align: start;
  } /* M-xx */

  /* Scroll-snap no grid do EventStrip da Vitrine */
  .nouen-vitrine-events-grid {
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 16px;
    -webkit-overflow-scrolling: touch;
    gap: 12px; /* Reduzido de 20px — peek do próximo card aumenta de ~20px para ~28px */
  } /* M-xx */

  /* Reduzir badge de data de 50px para 44px em mobile para melhor proporção */
  .nouen-vitrine-event-strip__card-date {
    width: 44px;
    height: 44px;
  } /* M-xx */
  .nouen-vitrine-event-strip__card-day { font-size: 1rem; }
  .nouen-vitrine-event-strip__card-month { font-size: 0.5625rem; }

  /* Seção de eventos: padding lateral */
  .nouen-vitrine-events-section { margin-left: -16px; margin-right: -16px; padding: 0 16px; }

  /* Rodapé do card: touch targets nos links */
  .nouen-vitrine-event-strip__card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px; /* Reduzido de 8px para 0px porque os links já tem 44px min-height */
  } /* M-xx */

  .nouen-vitrine-event-strip__card-link--event,
  .nouen-vitrine-event-strip__card-link--room {
    min-height: 44px;
    display: flex;
    align-items: center;
  } /* M-xx */

  /* :active feedback nos cards (substitui hover) */
  .nouen-vitrine-event-strip__card-main {
    -webkit-tap-highlight-color: transparent;
  } /* M-xx */
  .nouen-vitrine-event-strip__card-main:active { opacity: 0.88; }

  /* ── M-14 — Paginação + auditoria ── */
  /* Paginação: touch targets e wrap */
  .nouen-vitrine__pagination {
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    padding: 0 16px;
  } /* M-xx */
  .nouen-vitrine__pagination-btn { min-height: 44px; min-width: 44px; }
  .nouen-vitrine__pagination-info { width: 100%; text-align: center; order: -1; }

  /* ── M-15 — Tab navigation: sidebar oculta + tab strip horizontal ── */
  /* Ocultar sidebar desktop em mobile */
  .nouen-buyer-sidebar { display: none !important; }

  /* Content wrapper: sem margem/offset da sidebar */
  .operator-content-wrapper {
    margin-left: 0 !important;
    width: 100% !important;
  } /* M-xx */

  /* Tab strip: scroll horizontal fixo abaixo do header */
  .nouen-buyer-tab-strip {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    scrollbar-width: none;
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border-subtle);
    padding: 0 16px;
    position: sticky;
    top: 64px; /* abaixo do BuyerHeader */
    z-index: 40;
  } /* M-xx */
  .nouen-buyer-tab-strip::-webkit-scrollbar { display: none; }

  /* Links do tab strip */
  .nouen-buyer-tab-link {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 12px;
    white-space: nowrap;
    flex-shrink: 0;
    font-family: var(--font-headline);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-decoration: none;
    color: var(--text-tertiary);
    border-bottom: 2px solid transparent;
    transition: color 0.15s ease, border-color 0.15s ease;
  } /* M-xx */
  .nouen-buyer-tab-link--active {
    color: var(--text-primary);
    border-bottom-color: currentColor;
  } /* M-xx */
  .nouen-buyer-tab-link:active { opacity: 0.7; }

  /* ── M-16 — Header mobile: padding e command palette ── */
  /* Reduz padding lateral do header */
  .nouen-buyer-header { padding: 0 16px !important; }

  /* Oculta command palette em mobile */
  .nouen-buyer-header__command-palette { display: none !important; }

  /* Ajuste barra do Operador (mobile) */
  .nouen-buyer-operator-banner { padding: 6px 16px !important; }
  .nouen-buyer-operator-banner__prefix { display: none !important; }

  /* Oculta informações de texto do usuário em mobile (deixa só avatar e sino) */
  .nouen-buyer-header__user-info { display: none !important; }

  /* Reorganiza Branding no Header Mobile */
  .nouen-buyer-header__nouen-logo { display: none !important; }
  .nouen-buyer-header__market-branding { display: flex !important; }
  .nouen-buyer-header__nouen-logo-center { display: flex !important; }

  /* ── M-17 — Layout geral: padding da main e espaçamento ── */
  .nouen-buyer-main { padding: 16px !important; }

  /* ── M-18 a M-21 — Subrotas: overrides de padding duplo ── */
  .nouen-buyer-subroute-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 0 !important;
    /* padding-bottom é preservado inline — algumas rotas usam 96px para action bars */
  } /* M-xx */

  .nouen-buyer-stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  } /* M-xx */

  /* ── Review V7.4: Perfil — corrige overflow do badge de nível no card Identidade ── */
  .nouen-profile-identity-row {
    flex-wrap: wrap !important;
    gap: 12px !important;
  } /* M-xx */
  .nouen-profile-level-badge {
    margin-left: 0 !important;
    flex-shrink: 1 !important;
    min-width: 0;
  } /* M-xx */

  /* ── Review V7.4: Favoritos — oculta ícones dos filter chips em mobile ── */
  .nouen-vitrine__filter-chip .nouen-filter-chip__icon {
    display: none !important;
  } /* M-xx */

  /* ── Review V7.4: Disputas — Opção A: card compacto mobile ── */
  /* Reduz foto de 96px para 64px */
  .nouen-dispute-card__img-wrap {
    width: 64px !important;
  } /* M-xx */
  /* Oculta linha do evento */
  .nouen-dispute-card__event-row {
    display: none !important;
  } /* M-xx */
  /* Oculta metadados secundários (mecanismo, lance atual, status do evento e separadores) */
  .nouen-dispute-meta__secondary {
    display: none !important;
  } /* M-xx */
  /* Oculta botão "Ver oportunidade" (o card inteiro já é clicável via Link no título) */
  .nouen-dispute-card__action-btn {
    display: none !important;
  } /* M-xx */

  /* ── M-22 — Auditoria: safe areas e touch targets ── */
  /* Safe area: garante que o conteúdo não fique atrás da home bar do iPhone */
  .nouen-buyer-main {
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
  } /* M-xx */

  /* Touch targets mínimos (44px): notificações e avatar */
  .nouen-buyer-header__notifications-btn {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
  } /* M-xx */
  .nouen-buyer-header__avatar-wrapper {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  } /* M-xx */

  /* ══════════════════════════════════════════════════════════════
     V7.5 — CUPage Mobile (M-23 a M-28)
     ══════════════════════════════════════════════════════════════ */

  /* M-23 — CUGallery */
  /* Ocultar thumbnails em mobile (DA-V7.5-03) */
  .nouen-cu-gallery__sidebar { display: none !important; }

  /* Setas: touch target ≥ 44px + forçar visibilidade (hover não existe em touch) */
  .nouen-cu-gallery__nav {
    min-width: 44px;
    min-height: 44px;
    opacity: 1 !important; /* sobrescreve opacity: 0 + hover-only do desktop */
  } /* M-xx */
  /* :active feedback nas setas (substitui :hover em touch) */
  .nouen-cu-gallery__nav:active { background: rgba(0, 0, 0, 0.7) !important; }

  /* touch-action: permite swipe horizontal sem conflito com scroll vertical da página (iOS) */
  .nouen-cu-gallery__main { touch-action: pan-y; }

  /* M-24 — Reordenamento layout (DA-V7.5-01 Opção B) */
  /* gap 0 para colar galeria no header e no ActionCard */
  /* Ordem: galeria=1, CUMobileTitle=2, aside(ActionCard)=3, main(Overview+Specs)=4 */
  .nouen-cu-layout { display: flex; flex-direction: column; gap: 0; }
  .nouen-cu-layout > .nouen-cu-gallery { order: 1; width: 100%; padding: 0 16px; }
  .nouen-cu-layout__aside { order: 3; width: 100%; }
  /* Compensa a remoção do gap para manter espaço entre ActionCard e conteúdo principal */
  .nouen-cu-layout__main { order: 4; width: 100%; margin-top: 16px; }

  /* M-24b — Breadcrumb: oculto em mobile (mesmo padrão da Vitrine, V7.3) */
  .nouen-cu-breadcrumb { display: none !important; }

  /* M-24b — CUPage: padding-top da main sem extra para colar galeria no header.
     Em mobile o MarketHeader tem height: calc(64px + env(safe-area-inset-top)). */
  .cu-page-theme .nouen-container {
    padding-top: calc(var(--header-height) + env(safe-area-inset-top, 0px));
  } /* M-xx */

  /* CUMobileTitle — título + prefixo inline, visível no topo do aside em mobile */
  .nouen-cu-mobile-title {
    display: block;
    order: 2; /* galeria=1 → título=2 → ActionCard=3 → main=4 */
    padding: 14px 16px 8px;
  } /* M-xx */
  .nouen-cu-mobile-title__title {
    font-family: var(--font-headline);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.3;
    margin: 0;
  } /* M-xx */
  /* Prefixo inline (ex: "Lote 42 — ") — mesma opacidade/peso do CUOverview desktop */
  .nouen-cu-mobile-title__prefix {
    font-weight: 500;
    opacity: 0.85;
  } /* M-xx */

  /* M-25 — BidForm */
  .nouen-bid-form__input { 
    padding: 14px 80px 14px 40px; 
  } /* M-xx */
  /* Reposiciona o placeholder overlay para alinhar com o novo padding-left mobile (40px) */
  .nouen-bid-form__placeholder-overlay {
    left: 40px;
  } /* M-xx */
  .nouen-bid-form__submit { 
    min-height: 52px; 
  } /* M-xx */

  /* M-33: toggle interno do BidHistory ocultado no mobile (CUPage) — agora no footer */
  .cu-page-theme .nouen-bid-history__toggle { display: none; }
  .cu-page-theme .nouen-bid-history__content { display: none; }
  .cu-page-theme .nouen-bid-history--expanded .nouen-bid-history__content {
    display: block;
    max-height: 240px;
    overflow-y: auto;
  } /* M-xx */
  /* M-33 — Botão toggle do histórico no footer-right (substitui barra separada do BidHistory) */
  .nouen-action-card__footer-history-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-tertiary);
    font-family: var(--font-label, 'Inter', sans-serif);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 4px 8px;
    border-radius: 4px;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.15s;
  } /* M-xx */
  .nouen-action-card__footer-history-btn:active {
    background: var(--bg-secondary);
  } /* M-xx */

  /* M-34 — CUOverview mobile: padding lateral + título oculto (duplicado pelo nouen-cu-mobile-title) + meta em coluna */
  .nouen-cu-overview { padding: 0 16px 24px; }
  .nouen-cu-overview__title { display: none; }
  .nouen-cu-overview__meta { flex-direction: column; gap: 8px; }

  /* M-35 — Padding lateral 16px nos blocos restantes do main content */
  .nouen-cu-desc   { padding: 0 16px; }
  .nouen-cu-specs  { padding: 0 16px; }
  .nouen-cu-docs   { padding: 0 16px; }

  /* M-36 — Padding lateral 16px em Oportunidades Relacionadas */
  .nouen-cu-related { padding-left: 16px; padding-right: 16px; }

  /* M-37 — Card de Oportunidades Relacionadas: largura responsiva no mobile */
  .nouen-cu-related__card {
    flex: 0 0 calc(85% - 16px) !important;
    min-width: unset !important;
  } /* M-xx */

  /* M-27 — Nav prev/next lotes */
  .nouen-cu-nav-row {
    flex-wrap: wrap;
    row-gap: 12px;
    column-gap: 0;
  } /* M-xx */
  .nouen-cu-nav-row > div:nth-child(1) {
    order: 2;
    flex: 1 !important;
    display: flex !important;
    justify-content: flex-start !important;
  } /* M-xx */
  .nouen-cu-nav-row > div:nth-child(2) {
    order: 1;
    width: 100% !important;
    justify-content: center !important;
  } /* M-xx */
  .nouen-cu-nav-row > div:nth-child(3) {
    order: 3;
    flex: 1 !important;
    display: flex !important;
    justify-content: flex-end !important;
  } /* M-xx */
  /* Legibilidade: "Lote N" e links de navegação */
  .nouen-cu-nav-label {
    font-size: 13px !important;
  } /* M-xx */
  .nouen-cu-nav-btn {
    width: 44px !important;
    height: 44px !important;
    background: var(--bg-secondary) !important;
  } /* M-xx */
  .nouen-cu-nav-btn:active {
    background: var(--border-subtle) !important;
  } /* M-xx */

  /* ══════════════════════════════════════════════════════════════
     M-28 — Auditoria CUPage Mobile
     ══════════════════════════════════════════════════════════════ */

  /* Safe area bottom — garante que o conteúdo da CUPage não fique
     atrás da home bar do iPhone (igual ao padrão M-22 do Buyer) */
  .cu-page-theme main {
    padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px));
  } /* M-xx */

  /* Teclado virtual — quando o input do BidForm recebe foco, o iOS
     encolhe o viewport. O nouen-action-card__body não tem altura
     mínima definida, o que pode esconder o botão de submit.
     scroll-margin-bottom garante que o elemento seja scrollado
     para dentro do viewport reduzido quando for focado. */
  .nouen-bid-form__input {
    scroll-margin-bottom: 80px;
  } /* M-xx */

  /* DirectSalePanel — botão de CTA (comprar) usa .nouen-bid-form__submit
     que já tem min-height:52px (M-25). Nenhum override adicional necessário.
     Garantir que o body do action card não tenha overflow hidden que bloqueie scroll. */
  .nouen-action-card {
    overflow: visible;
    border-top: none; /* Faixa de acento removida em mobile — quebra fluidez visual na página */
  } /* M-xx */
  /* Badge de mecanismo oculto em mobile — já exibido no canto da galeria de imagens */
  .nouen-action-card__badge { display: none; }

  /* M-26 — Header colapsado em mobile: badge e timer saem do header */
  .nouen-action-card__header {
    padding: 0 !important;
    border-bottom: none !important;
    background: transparent !important;
    overflow: visible; /* permite timer-box escapar do container colapsado */
    position: relative; /* âncora para o timer-box em position:absolute */
  } /* M-xx */
  .nouen-action-card__header-top {
    min-height: 0; /* reset do min-height:32px do desktop */
  } /* M-xx */

  /* M-26 — Timer flutua para alinhar com a linha do price-label (body padding-top = 16px) */
  .nouen-action-card__timer-box {
    position: absolute;
    top: 16px;    /* = padding-top do .nouen-action-card__body */
    right: 16px;  /* = padding-right do .nouen-action-card__body */
  } /* M-xx */
  /* Reduz font-size do countdown em mobile — substituído pelas regras definitivas no bloco M-39 (25px) */

  /* M-26 — Price-box: grid para posicionar o indicator inline com o label.
     price-row usa display:contents para que seus filhos participem do grid. */
  .nouen-action-card__price-box {
    display: grid; /* M-xx */
    grid-template-areas:
      "label indicator ."
      "price  price    price";
    grid-template-columns: auto auto 1fr; /* label + indicator colados, 1fr absorve o espaço até o timer */
    align-items: center;
    row-gap: 4px;
    column-gap: 6px;
    padding-right: 100px; /* reserva espaço para o timer flutuante */
  } /* M-xx */
  .nouen-action-card__price-label { grid-area: label; }
  .nouen-action-card__price-row   { display: contents; } /* transparente ao grid */
  .nouen-price-flip,
  .nouen-action-card__price-value { grid-area: price; }  /* Leilão (nouen-price-flip) + DirectSale (price-value direto) */

  /* M-26 — PriceIndicator: ícone SVG mantido, apenas texto oculto (font-size:0).
     SVGs já têm 14×14px e são familiares ao usuário desde o desktop. */
  .nouen-action-card__price-indicator--winning,
  .nouen-action-card__price-indicator--outbid {
    grid-area: indicator; /* coluna direita, linha do label */
    font-size: 0;    /* oculta texto; SVG com width/height absolutos permanece visível */
    padding: 0;
    gap: 0;
    align-self: center;
    flex-shrink: 0;
  } /* M-xx */
  /* Deal indicator: não é info pessoal/urgente — oculto em mobile */
  .nouen-action-card__price-indicator--deal { display: none; }

  /* M-28 — Disclaimer como subtext do botão CTA (mobile).
     Desktop mantém 0.75rem + link clicável. No mobile:
     - fonte reduzida → não quebra em 2 linhas
     - margin-top: -12px → contracena com gap:16px do body flex, resultando em ~4px visual
     - link vira texto simples (cor herdada, sem sublinhado, sem pointer) */
  .nouen-action-card__disclaimer {
    font-size: 0.65rem;
    margin-top: -12px; /* gap(16px) + (-12px) = 4px de espaço visual abaixo do botão */
    color: var(--text-tertiary);
  } /* M-xx */
  .nouen-action-card__disclaimer a {
    color: inherit !important;
    text-decoration: none !important;
    pointer-events: none;
    cursor: default;
  } /* M-xx */

  /* nouen-action-card__aside (wrapper do ActionCard) — garantir
     que não haja altura mínima forçada em mobile que bloqueie o scroll. */
  .nouen-cu-layout__aside {
    min-height: unset !important;
  } /* M-xx */
}


/* Labels de nav do footer: curto oculto por padrão (desktop usa label longo) */
.market-footer__nav-label-short { display: none; }
.nouen-header-hamburger {
  display: none;
}

/* Safe area — EventPanel (Sala de Disputas): arch-bar substitui o .nouen-header (oculto na rota /panel).
   Com viewport-fit=cover, o conteúdo sobe até atrás do notch. O background #121212 da arch-bar
   preenche a safe area visualmente; o padding-top garante que o conteúdo fique abaixo do notch. */
@media (max-width: 767px) {
  .nouen-event-panel__arch-bar {
    padding-top: env(safe-area-inset-top);
  } /* M-xx */
}

/* M-27 — Hide-on-scroll: header some ao rolar pra baixo, volta ao rolar pra cima.
   Scoped em mobile — desktop não tem transition nem a classe .nouen-header--hidden aplicada. */
@media (max-width: 767px) {
  .nouen-header {
    transition: transform 0.25s ease;
    will-change: transform; /* GPU layer para animação suave */
  } /* M-xx */
  .nouen-header.nouen-header--hidden {
    transform: translateY(-100%);
  } /* M-xx */

  /* M-28 — Vitrine filter wrapper: sincroniza top com o hide-on-scroll do header.
     Quando o header some (.nouen-header--hidden), o filter wrapper sobe de 64px → 0
     com a mesma transição de 0.25s para evitar o "buraco" entre o topo e a barra de filtros. */
  .nouen-vitrine__filter-wrapper {
    transition: top 0.25s ease;
  } /* M-xx */
  body:has(.nouen-header--hidden) .nouen-vitrine__filter-wrapper {
    top: 0;
  } /* M-xx */
}

/* M-29 — Lot Nav Bottom Bar: barra fixa de navegação entre lotes (mobile / evento apenas).
   Desktop: display:none definido no bloco base (linha ~4853). */
@media (max-width: 767px) {
  /* M-32: counter — bottom-left (libera bottom-right para as ações da galeria) */
  .nouen-cu-gallery__counter {
    left: 12px !important;
    right: auto !important;
    bottom: 12px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 12px !important;
    box-sizing: border-box !important;
  } /* M-xx */
  /* M-32: timer overlay removido do mobile (timer já está no body do ActionCard) */
  .cu-page-theme .nouen-cu-gallery__timer-overlay { display: none; }
  /* M-32: footer-actions (♥ + ⇑) relocados para a galeria no mobile — ocultar do footer */
  .cu-page-theme .nouen-action-card__footer-actions { display: none; }

  /* Barra principal */
  .nouen-lot-nav-bar {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: calc(56px + env(safe-area-inset-bottom, 0px));
    padding: 0 8px env(safe-area-inset-bottom, 0px);
    background: var(--bg-card);
    border-top: 1px solid var(--border-subtle);
    align-items: center;
    justify-content: space-between;
    z-index: 400; /* abaixo do header (1000) e modais (9999) */
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08);
  } /* M-xx */

  /* Botões de navegação (← Anterior / Próximo →) */
  .nouen-lot-nav-bar__btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 12px;
    /* Tipografia da nav bar de lotes */
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-family: var(--font-label, 'Inter', sans-serif);
    text-decoration: none;
    /* Reset de <button>: garante que Ir/Cancelar tenham o mesmo visual que Anterior/Próximo */
    background: none;
    border: none;
    cursor: pointer;
    border-radius: 8px;
    min-width: 44px;
    min-height: 44px;
    justify-content: center;
    transition: background 0.15s;
    -webkit-tap-highlight-color: transparent;
  } /* M-xx */
  /* Ícone: 16px */
  .nouen-lot-nav-bar__btn .material-symbols-outlined {
    font-size: 16px;
  } /* M-xx */
  .nouen-lot-nav-bar__btn:active {
    background: var(--bg-secondary);
  } /* M-xx */
  .nouen-lot-nav-bar__btn--disabled {
    color: var(--text-tertiary) !important;
    pointer-events: none;
    opacity: 0.4;
  } /* M-xx */
  /* CTA primário "Buscar": preenchido com accent color */
  .nouen-lot-nav-bar__btn--confirm {
    border-radius: 4px;
    padding: 5px 12px;
    min-height: 32px;
    letter-spacing: 0.04em;
  } /* M-xx */
  .nouen-lot-nav-bar__btn--confirm:active {
    filter: brightness(0.88);
    background: inherit; /* mantém a cor do inline style ao fazer active */
  } /* M-xx */

  /* Ícone de lupa no label normal: indica interatividade */
  .nouen-lot-nav-bar__search-icon {
    font-size: 14px;
  } /* M-xx */

  /* Label central: "Lote X / Y" — elemento interativo (M-31: toque abre input de salto). */
  .nouen-lot-nav-bar__label {
    display: flex;         /* alinha ícone + texto na mesma linha */
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
    white-space: nowrap;
    /* Reset button */
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    font-family: var(--font-label, 'Inter', sans-serif);
    -webkit-tap-highlight-color: transparent;
  } /* M-xx */
  .nouen-lot-nav-bar__label:active {
    background: var(--bg-secondary);
  } /* M-xx */
  .nouen-lot-nav-bar__total {
    font-weight: 400;
    color: var(--text-tertiary);
  } /* M-xx */

  /* M-31 — Jump mode: input numérico de salto rápido */
  .nouen-lot-nav-bar__jump {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
  } /* M-xx */
  .nouen-lot-nav-bar__jump-prefix,
  .nouen-lot-nav-bar__jump-total {
    white-space: nowrap;
  } /* M-xx */
  .nouen-lot-nav-bar__jump-total {
    font-weight: 400;
    color: var(--text-tertiary);
  } /* M-xx */
  .nouen-lot-nav-bar__jump-input {
    width: 52px;
    height: 32px;
    font-size: 16px; /* ≥16px previne zoom automático do iOS ao focar o input */
    font-weight: 700;
    font-family: var(--font-label, 'Inter', sans-serif);
    text-align: center;
    border: 1.5px solid #121212; /* fallback; cor real vem do inline style (accent do mercado) */
    border-radius: 4px;
    background: var(--bg-card);
    color: var(--text-primary);
    padding: 0 4px;
    /* Remove setas nativas do input number */
    -moz-appearance: textfield;
  } /* M-xx */
  .nouen-lot-nav-bar__jump-input::-webkit-outer-spin-button,
  .nouen-lot-nav-bar__jump-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  } /* M-xx */
  .nouen-lot-nav-bar__jump-input:focus {
    outline: none;
    /* border-color herdada do inline style — não sobrescrever aqui */
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.12);
  } /* M-xx */
  /* .nouen-lot-nav-bar__jump-cancel removido: cancelar agora é o botão esquerdo da barra */

  /* Ocultar o bloco central (setas) dentro do card "Parte do Evento"
     — a barra fixa (M-29) assume essa função no mobile */
  .nouen-cu-nav-center {
    display: none;
  } /* M-xx */

  /* Compensação de altura: último elemento não fica escondido atrás da barra */
  body:has(.nouen-lot-nav-bar) {
    padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
  } /* M-xx */

  /* Badge "Reconectando ao feed" — empurrado acima da lot-nav bar no mobile.
     O inline style tem bottom: 1.25rem; usamos !important para sobrescrever. */
  body:has(.nouen-lot-nav-bar) .nouen-cu-stream-badge {
    bottom: calc(56px + env(safe-area-inset-bottom, 0px) + 1.25rem) !important;
  } /* M-xx */
}

/* M-30 — Toast no topo central do mobile.
   Desktop: bottom-right (mantido no bloco base).
   Mobile: topo central, abaixo do safe area do notch — padrão de banner iOS.
   A animação slide-down inclui translateX(-50%) nos dois keyframes para não
   perder o centramento horizontal durante a transição. */
@media (max-width: 767px) {
  .nouen-toast {
    bottom: unset;
    right: unset;
    top: calc(env(safe-area-inset-top, 0px) + 8px);
    left: 50%;
    transform: translateX(-50%);
    animation: toast-in-top 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  } /* M-xx */

  @keyframes toast-in-top {
    from {
      opacity: 0;
      transform: translateX(-50%) translateY(-16px);
    }
    to {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
    }
  } /* M-xx */
}

/* ==========================================================================
   FASE V7.6 — EventPage (Mobile)
   ========================================================================== */

@media (max-width: 767px) {
  /* M-29 — Hero EventPage: height adaptado (DA-V7.6-03 Opção C) */
  .nouen-event-page__hero {
    height: auto;
    min-height: 80vh; /* ajuste pós-revisão visual: 70vh era curto demais */
    max-height: none;
    align-items: flex-end; /* bottom-heavy — padrão V7 */
  } /* M-xx */

  /* M-29 — Data layer: compactação (DA-V7.6-02 Opção B + exceção leiloeiro) */
  .nouen-event-page__data-layer {
    padding: 0 16px;
    top: calc(var(--header-height, 54px) + env(safe-area-inset-top, 0px) + 16px);
  } /* M-xx */
  .nouen-event-page__data-layer-left {
    gap: 16px; /* reduz de 64px para caber em 375px */
  } /* M-xx */
  /* exceção R1: leiloeiro só aparece no data-layer — sem alternativa CSS pura.
     O grupo direito é ocultado; o leiloeiro aparece via elemento TSX mobile-only abaixo. */
  .nouen-event-page__data-layer-right {
    display: none;
  } /* M-xx */
  /* Leiloeiro: elemento mobile-only adicionado no EventPageHero (exceção R1 documentada) */
  .nouen-event-page__hero-leiloeiro-mobile {
    display: block;
    font-family: var(--font-label);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.55);
    margin: 0 0 12px;
  } /* M-xx */

  /* M-29 — Hero content: padding lateral + coluna única (com e sem cover) */
  .nouen-event-page__hero-content {
    padding: 0 16px 24px; /* 24px bottom — unificado com fallback */
    flex-direction: column;
    align-items: flex-start;
  } /* M-xx */
  .nouen-event-page__hero-main {
    max-width: 100%;
  } /* M-xx */

  /* M-29 — Poster fallback: thumbnail absoluto no canto superior direito (Opção B)
     Hero sem cover: min-height removido (80vh seria espaço preto desnecessário);
     conteúdo alinha ao topo. Pôster position:absolute top-right; título recua 96px. */
  /* M-29 — Hero fallback (sem cover): stretch preenche o hero; conteúdo vai ao fundo.
     Pôster alinhado com o data-layer no topo-direito.
     Status oculto no data-layer; aparece via hero-status-mobile acima do título. */
  /* M-29 — Hero fallback (sem cover): height via min-height; hero-content cobre
     o hero via position:absolute inset:0 para garantir fill definitivo. */
  /* M-29 v3 — Hero fallback: height:80vh no hero-content resolve o fill
     sem position:absolute. margin-top:auto no hero-main garante conteúdo no fundo. */
  .nouen-event-page__hero:not(:has(.nouen-event-page__hero-img)) {
    min-height: 80vh; /* hero se expande para caber o hero-content de 80vh */
  } /* M-xx */
  /* Ocultar item Status do data-layer em TODOS os heroes mobile (aparece acima do título) */
  .nouen-event-page__hero .nouen-event-page__data-layer-left .nouen-event-page__data-item:first-child {
    display: none;
  } /* M-xx */
  .nouen-event-page__hero-content--fallback {
    position: relative; /* reset do position:absolute de versões anteriores */
    inset: auto;        /* reset do inset:0 de versões anteriores */
    flex-direction: column;
    height: 80vh;       /* altura definitiva — margin-top:auto funciona com altura explícita */
    padding: 0 16px 24px; /* 24px bottom — respiro abaixo do "ver catálogo" */
  } /* M-xx */
  /* Pôster: primeiro na ordem (topo), alinhado à direita via align-self:flex-end */
  .nouen-event-page__hero-content--fallback .nouen-event-page__hero-poster-col {
    order: 1;
    position: static;
    width: 100px; /* aumentado de 90px */
    align-self: flex-end;
    flex-shrink: 0;
    /* 16px abaixo do header — alinha pôster com a data do evento */
    margin-top: calc(var(--header-height, 54px) + env(safe-area-inset-top, 0px) + 16px);
  } /* M-xx */
  .nouen-event-page__hero-content--fallback .nouen-event-page__hero-main {
    order: 2;
    flex: none;         /* cancela flex:1 do desktop — item não cresce; margin-top:auto funciona */
    margin-top: auto;   /* absorve espaço livre e empurra para o fundo */
    width: 100%;
    max-width: 100%;
    padding-right: 0;
    box-sizing: border-box;
  } /* M-xx */
  /* Status mobile-only: visível em TODOS os heroes mobile (com e sem cover) */
  .nouen-event-page__hero-content .nouen-event-page__hero-status-mobile {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-label);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 10px;
  } /* M-xx */
  .nouen-event-page__hero-content .nouen-event-page__hero-status-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--status-live);
    flex-shrink: 0;
    animation: pulse 2s infinite;
  } /* M-xx */
  /* T\u00edtulo: line-clamp 4 no fallback */
  .nouen-event-page__hero-content--fallback .nouen-event-page__hero-title {
    line-height: 1.1;        /* override 0.95 do desktop — evita corte nos descenders */
    padding-bottom: 0.35em;  /* empurra overflow:hidden abaixo dos descenders (g, p, j) */
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
  } /* M-xx */
  /* Descri\u00e7\u00e3o oculta no fallback mobile \u2014 dispon\u00edvel na se\u00e7\u00e3o editorial abaixo */
  .nouen-event-page__hero-content--fallback .nouen-event-page__hero-desc {
    display: none;
  } /* M-xx */

  .nouen-event-page__hero-poster-wrap {
    aspect-ratio: 4 / 5;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    transform: none; /* remove translateY(16px) do desktop */
  } /* M-xx */

  /* M-29 — Tipografia do hero (aplica a todos: com e sem cover) */
  .nouen-event-page__hero-title {
    font-size: clamp(2rem, 7vw, 3rem);
    line-height: 1.1;   /* override 0.95 do desktop — descenders visíveis */
    margin-bottom: 24px;
  } /* M-xx */
  /* Descrição: oculta no mobile em ambos os casos (cover e fallback) */
  .nouen-event-page__hero-desc {
    display: none;
  } /* M-xx */

  /* M-29 — CTAs hero: coluna + full-width (confirmado pelo Fundador) */
  .nouen-event-page__hero-actions {
    flex-direction: column;
    gap: 12px;
    width: 100%;
  } /* M-xx */
  .nouen-event-page__hero-actions .nouen-event-page__cta {
    width: 100%;
    justify-content: center;
    min-height: 52px; /* touch target generoso */
  } /* M-xx */
}

/* M-29 strip mobile — reduzir fonte e gap para textos em uma linha */
@media (max-width: 767px) {
  /* seletor .strip .strip-inner = especificidade (0,2,0)
     supera o possível nesting do desktop (.event-page .strip-inner) */
  .nouen-event-page__strip .nouen-event-page__strip-inner {
    gap: 16px;
    justify-content: flex-start; /* alinhado à esquerda */
    padding: 0 16px;             /* 16px de padding lateral */
    max-width: 100%;             /* ocupa a largura total */
  } /* M-xx */
  .nouen-event-page__strip .nouen-event-page__strip-item {
    font-size: 0.5625rem; /* 9px — cabe em uma linha */
    white-space: nowrap;
  } /* M-xx */
}

@media (max-width: 767px) {
  /* M-30 — Bento section: padding compactado */
  .nouen-event-page__bento-section {
    padding-top: 48px;
  } /* M-xx */
  .nouen-event-page__bento-section-inner {
    padding: 0 16px;
  } /* M-xx */
  .nouen-event-page__bento-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 36px; /* padding-bottom do titulo para o card */
  } /* M-xx */
  .nouen-event-page__bento-header .nouen-event-page__editorial-eyebrow {
    margin-bottom: 8px; /* override de 12px para bater com MarketPage */
  } /* M-xx */
  .nouen-event-page__bento-title {
    font-size: 1.375rem; /* 22px — título de seção mobile */
    line-height: 1.1;
  } /* M-xx */
  .nouen-event-page__bento-see-all {
    display: none;
  } /* M-xx */

  /* M-30 — Grid principal: featured ocupa coluna inteira */
  .nouen-event-page__bento-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  } /* M-xx */
  .nouen-event-page__bento-rows {
    gap: 12px !important; /* Override do style inline de 24px apenas no mobile */
  } /* M-xx */
  /* M-30 — Featured card: padding reduzido */
  .nouen-event-page__bento-featured-top {
    padding: 16px;
  } /* M-xx */
  .nouen-event-page__bento-featured-bottom {
    padding: 16px;
  } /* M-xx */
  .nouen-event-page__bento-badge {
    margin-bottom: 8px;
    border-radius: 4px; /* M-30: scoped mobile — corrigido de global para @media */
  } /* M-xx */
  .nouen-event-page__bento-featured-title {
    font-size: 1.125rem; /* 18px */
    line-height: 1;
  } /* M-xx */
  .nouen-event-page__bento-price-label {
    margin-bottom: 4px;
  } /* M-xx */
  .nouen-event-page__bento-price {
    font-size: 1.125rem; /* 18px */
    line-height: 1;
  } /* M-xx */
  /* :active feedback + tap highlight */
  .nouen-event-page__bento-featured:active { opacity: 0.92; }
  .nouen-event-page__bento-featured,
  .nouen-event-page__bento-side {
    -webkit-tap-highlight-color: transparent;
  } /* M-xx */

  /* M-31 — Sides: 2 colunas (Opção C de DA-V7.6-01) */
  .nouen-event-page__bento-sides {
    grid-template-rows: unset;
    grid-template-columns: 1fr 1fr; /* M-xx */
    gap: 12px;
  } /* M-xx */

  /* M-31 — Side card: stack vertical */
  .nouen-event-page__bento-side {
    flex-direction: column;
  } /* M-xx */
  /* Imagem: proporção 4:3 original */
  .nouen-event-page__bento-side-img-wrap {
    aspect-ratio: 4 / 3;
    width: 100%;
    flex-shrink: 0;
  } /* M-xx */
  /* Conteúdo: padding compacto */
  .nouen-event-page__bento-side-content {
    padding: 10px 12px 12px;
  } /* M-xx */
  /* Label de mecanismo: compacto */
  .nouen-event-page__bento-side-mech {
    font-size: 0.5625rem; /* 9px */
    margin-bottom: 4px;
  } /* M-xx */
  /* Título: truncado em 2 linhas */
  .nouen-event-page__bento-side-title {
    font-size: 0.875rem; /* 14px — ideal para colunas estreitas */
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  } /* M-xx */
  /* Rodapé do side card */
  .nouen-event-page__bento-side-footer {
    padding-top: 8px;
    margin-top: 8px;
  } /* M-xx */
  .nouen-event-page__bento-side-price {
    font-size: 0.875rem;
  } /* M-xx */
  /* :active feedback */
  .nouen-event-page__bento-side:active { opacity: 0.88; }

  /* M-32 — CTA group: coluna única, full-width (confirmado pelo Fundador) */
  .nouen-event-page__cta-group {
    flex-direction: column;
    gap: 12px;
    padding: 40px 16px; /* 16px garantem a margem no final da página */
    align-items: stretch;
  } /* M-xx */
  .nouen-event-page__bento-section-inner .nouen-event-page__cta-group {
    padding: 40px 0; /* zera padding lateral apenas dentro do bento (cujo container já tem 16px) */
  } /* M-xx */
  .nouen-event-page__cta-group .nouen-event-page__cta {
    width: 100%;
    justify-content: center;
    min-height: 52px;
  } /* M-xx */
  /* :active nos CTAs (substitui hover) */
  .nouen-event-page__cta--primary:active,
  .nouen-event-page__cta--secondary:active {
    filter: brightness(0.9);
    transform: scale(0.98);
  } /* M-xx */

  /* M-32 — Editorial: scroll horizontal (DA-V7.6-04 = Opção D ✅) */
  .nouen-event-page__editorial-inner {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 16px;
    scrollbar-width: none;
    gap: 16px;
    padding: 32px 0; /* Zera padding para evitar o bug do WebKit que devora margins/paddings */
    scroll-padding-left: 16px; /* Garante que o snap alinhe com a margem correta */
    /* Remove o grid do desktop: grid-template-columns não se aplica em flex */
  } /* M-xx */
  .nouen-event-page__editorial-inner::-webkit-scrollbar { display: none; }
  
  /* Hack WebKit definitivo: itens fantasmas nas pontas. Somados ao gap (16px), geram 17px de respiro incortável */
  .nouen-event-page__editorial-inner::before,
  .nouen-event-page__editorial-inner::after {
    content: "";
    flex: 0 0 1px;
  } /* M-xx */
  
  /* Painel 1: texto editorial */
  .nouen-event-page__editorial-text {
    width: 85vw; /* 85vw garante um peek effect do card seguinte */
    flex-shrink: 0;
    scroll-snap-align: start;
  } /* M-xx */
  .nouen-event-page__editorial-headline {
    font-size: 1.375rem; /* 22px — título de seção mobile */
    margin-bottom: 12px;
  } /* M-xx */
  .nouen-event-page__editorial-body,
  .nouen-event-page__pullquote p {
    font-size: 0.9375rem; /* 15px (igual about-text do operador) */
  } /* M-xx */
  
  /* Painel 2: Operator Card (scroll para ver) */
  .nouen-event-page__operator-card {
    width: 85vw;
    margin-right: 0;
    flex-shrink: 0;
    scroll-snap-align: start;
    position: static; /* cancela sticky do desktop */
    top: unset;
  } /* M-xx */

  /* M-32 — Timeline + Mechanism: coluna única */
  .nouen-event-page__timeline-section {
    padding: 48px 0; /* override do 96px do desktop */
  } /* M-xx */
  .nouen-event-page__timeline-section-inner {
    grid-template-columns: 1fr;
    padding: 0 16px;
    gap: 40px;
  } /* M-xx */
  .nouen-event-page__timeline-track {
    margin-left: 8px; /* empurra track para a direita para o dot (-4px) não invadir os 16px da margem da tela */
  } /* M-xx */
  .nouen-event-page__timeline-item {
    padding-left: 24px; /* reduz distância horizontal do texto para o marcador (desktop era 40px) */
  } /* M-xx */
  .nouen-event-page__timeline-dot {
    top: 14px; /* desce o marcador para o centro óptico do bloco de texto (data + label) */
  } /* M-xx */

  /* M-32 — Mechanism: coluna única */
  .nouen-event-page__mechanism-title {
    font-size: 1.375rem; /* 22px — título de seção mobile (igual Bento e Editorial) */
  } /* M-xx */
  .nouen-event-page__mechanism-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  } /* M-xx */
}

/* ═══════════════════════════════════════════════════════════════════════════
   ▶ V7.7 — EventPanel / Sala de Disputas (Mobile)
   DA-V7.5-04 — R2: todo CSS novo dentro de @media (max-width: 767px)
   Auditoria de inline styles (M-34): zero risco de overflow identificado.
   Elementos com width fixo: avatar 34px (arch-bar, inofensivo) e thumbnail
   70px (AgendaItem — oculto em mobile junto com a coluna esquerda).
   ─────────────────────────────────────────────────────────────────────────── */

/* global-intencional: toggle de filtros só existe no mobile */
.nouen-event-panel__filter-toggle-wrapper {
  display: none;
}

/* M-34 — Layout base: stack completo + correção de overflow
   Transforma o grid de 3 colunas em coluna única.
   Remove overflow:hidden que cortaria conteúdo em mobile.
   Oculta coluna esquerda (agenda), coluna direita (Video+Feed) e breadcrumb.
   Adiciona padding-bottom para não sobrepor a bottom bar fixa (M-39). */
@media (max-width: 767px) {


  /* 1.b Filtros colapsáveis (Gaveta) */
  .nouen-event-panel__filter-wrapper {
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease, margin 0.3s ease, padding 0.3s ease;
    max-height: 500px;
    opacity: 1;
    overflow: hidden;
  } /* M-xx */
  .nouen-event-panel__filter-wrapper--collapsed {
    max-height: 0 !important;
    opacity: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none;
  } /* M-xx */
  
  .nouen-event-panel__filter-toggle-wrapper {
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Impede que o botão seja esmagado para height 0 pelo stretch padrão do flex */
    position: relative;
    z-index: 20;
    height: 0;
    margin-top: 0;
    margin-bottom: 0;
    transform: translateY(2px);
    pointer-events: none;
    overflow: visible;
  } /* M-xx */

  .nouen-event-panel__filter-toggle {
    pointer-events: auto;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    padding: 2px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-tertiary);
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    transition: background-color 0.2s, color 0.2s;
  } /* M-xx */
  .nouen-event-panel__filter-toggle:active {
    background: var(--bg-secondary);
  } /* M-xx */
  /* 1. Grid-wrapper: remove overflow:hidden que cortaria conteúdo */
  .nouen-event-panel__grid-wrapper {
    overflow: visible;
  } /* M-xx */

  /* 2. Grid principal: de "4fr 6fr" → coluna única */
  .nouen-event-panel__grid {
    grid-template-columns: 1fr;
    padding: 12px 16px 16px 16px; /* O espaçamento visual entre a barra de busca e o card é 100% ditado por esse padding superior (12px + 4px da barra = 16px total) */
    gap: 0;
    overflow: visible;
  } /* M-xx */

  /* 3. Action zone: de "1fr 1fr" → coluna única */
  .nouen-event-panel__action-zone {
    grid-template-columns: 1fr;
    gap: 0;
  } /* M-xx */

  /* 4. Colunas: remove overflow:hidden individual */
  /* Zera o gap de 20px da --transparent (desktop) para que o 16px do grid seja a única fonte de espaçamento acima da imagem */
  .nouen-event-panel__column {
    overflow: visible;
    gap: 0 !important;
  } /* M-xx */

  /* 5. Agenda list: remove scroll interno
        (navegação entre lotes migra para a bottom bar do M-39) */
  .nouen-event-panel__agenda-list {
    overflow-y: visible;
    max-height: none;
  } /* M-xx */

  /* 6. Coluna esquerda (agenda de lotes): ocultar em mobile
        Substituída pela bottom bar de mini-cards (M-39).
        Seletor usa :first-child pois é a primeira section dentro do grid. */
  .nouen-event-panel__grid > section:first-child {
    display: none;
  } /* M-xx */

  /* 7. Coluna direita da action-zone (VideoPlayer + EventFeed): ocultar
        VideoPlayer: placeholder sem stream real — sem valor em mobile.
        EventFeed: decisão adiada para o final da V7.7 (pós M-40). */
  .nouen-event-panel__action-zone > section:last-child {
    display: none !important;
  } /* M-xx */

  /* 8. VideoPlayer: garantia extra de ocultamento independente de posição */
  .video-preview {
    display: none !important;
  } /* M-xx */

  /* 9. Breadcrumb: ocultar — arch-bar já identifica o contexto da sala */
  .nouen-cu-breadcrumb {
    display: none;
  } /* M-xx */

  /* 10. Padding inferior: impede bottom bar fixa (M-39) de sobrepor conteúdo.
         Ajustado para 108px pois os mini-cards ocupam 76px e o ticker mobile ocupa 32px. */
  .nouen-event-panel {
    height: auto;
    overflow: visible;
    padding-bottom: calc(108px + env(safe-area-inset-bottom, 0px));
  } /* M-xx */

}
/* fim M-34 */

/* M-35 — CUFocoCard mobile: imagem 4:3 compacta
   Título 2 linhas; ações (favoritar, etc) visíveis sempre (sem hover em touch). */
@media (max-width: 767px) {

  /* Cancela o paddingRight: '16px' inline da coluna central (EventPanel.tsx), pois o grid pai já aplica padding nas laterais */
  .nouen-event-panel__column {
    padding-right: 0 !important;
  } /* M-xx */

  /* A imagem antes tinha max-height: 180px, mas foi removido para ela ocupar toda a largura (full-width - 16px) e crescer proporcionalmente com aspect-ratio 4:3 */
  .nouen-event-panel .nouen-cu-card__image-container {
    /* max-height: 180px; Removido */
  } /* M-xx */

  /* REF overlay: em mobile o REF padrão é oculto, e a versão sobre a imagem aparece com estilo "frosted glass" para garantir leitura */
  .nouen-cu-card__ref-desktop {
    display: none !important;
  } /* M-xx */
  .nouen-cu-card__ref-mobile {
    display: flex !important;
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 10;
    font-family: var(--font-body);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #ffffff;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(4px);
    padding: 4px 8px;
    border-radius: var(--radius-sm);
  } /* M-xx */

  /* Move o ícone de expandir imagem para o canto inferior esquerdo no mobile e unifica formato */
  .nouen-cu-card__expand-btn {
    left: 12px !important;
    right: auto !important;
    bottom: 12px !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    padding: 0 !important;
  } /* M-xx */
  .nouen-cu-card__expand-btn .material-symbols-outlined {
    font-size: 16px !important;
  } /* M-xx */

  /* Título: 2 linhas máximo */
  .nouen-event-panel .nouen-cu-card__title {
    font-size: clamp(1rem, 4.5vw, 1.25rem);
    -webkit-line-clamp: 2;
  } /* M-xx */

  /* Padrão CUPage Mobile para botões de ação sobre a imagem */
  .nouen-cu-card__actions-mobile {
    display: flex !important;
    position: absolute;
    bottom: 12px;
    right: 12px;
    gap: 6px;
    z-index: 11;
  } /* M-xx */
  .nouen-cu-card__action-btn-mobile {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: none;
    color: #fff;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s;
    text-decoration: none;
  } /* M-xx */
  .nouen-cu-card__action-btn-mobile .material-symbols-outlined {
    font-size: 16px;
  } /* M-xx */
  .nouen-cu-card__action-btn-mobile--active {
    background: rgba(239, 68, 68, 0.65); /* vermelho quando favoritado */
  } /* M-xx */

  /* Oculta as ações originais em lista que ficavam abaixo da imagem no desktop */
  .nouen-event-panel__cu-actions {
    display: none !important;
  } /* M-xx */

}
/* fim M-35 */

/* M-36 — BidForm mobile: input 16px, botão ≥ 52px */
@media (max-width: 767px) {
  /* Anti-zoom iOS: inputs ≥ 16px */
  .nouen-bid-form input[type="number"],
  .nouen-bid-form input[type="text"] {
    font-size: 16px;
    min-height: 48px;
  } /* M-xx */

  /* Botão de lance: largura total, touch target generoso */
  .nouen-bid-form__submit {
    min-height: 52px;
    width: 100%;
    font-size: 0.875rem;
    -webkit-appearance: none;
    appearance: none;
  } /* M-xx */

  /* Feedback :active em mobile (substituição de hover) */
  .nouen-bid-form__submit:active {
    opacity: 0.85;
    transform: scale(0.98);
    -webkit-tap-highlight-color: transparent;
  } /* M-xx */
}
/* fim M-36 */

/* M-37 — Timer mobile: fonte legível, cores preservadas */
@media (max-width: 767px) {
  /* Timer-box: empilhado verticalmente.
     position: static !important reseta o position:absolute do M-26 (V7.5 CUPage):
     no contexto do EventPanel, o timer-box está no fluxo normal do CUFocoCard,
     não é flutuante como na CUPage. Sem este reset, o timer-box vaza para o topo
     da viewport sobrepondo o arch-bar. */
  .nouen-event-panel .nouen-action-card__timer-box {
    position: static !important;
    top: auto !important;
    right: auto !important;
    text-align: right;
    flex-shrink: 0;
  } /* M-xx */

  /* Valor e label do timer: regras definitivas movidas para o bloco M-39 (Ajustes Tipograficos Action Card) */
}
/* fim M-37 */

/* M-38 — BidHistory colapsável (accordion)
   global-intencional: toggle externo (nouen-event-panel__bid-history-toggle) e
   toggle interno do BidHistory (nouen-bid-history__toggle) são ocultos por padrão
   no contexto do EventPanel — mobile os re-exibe via @media abaixo.
   O toggle interno fica permanentemente oculto no EventPanel (substituído pelo externo). */

/* global-intencional: oculta toggle interno do BidHistory no EventPanel —
   no EventPanel o toggle é controlado pelo externo (M-38); interno é redundante */
.nouen-event-panel .nouen-bid-history__toggle {
  display: none;
}


@media (max-width: 767px) {

  /* Estado colapsado: histórico oculto */
  .nouen-event-panel__bid-history-body {
    display: none;
  } /* M-xx */

  /* Estado expandido: body visível em coluna */
  .nouen-event-panel__bid-history-body--open {
    display: flex;
    flex-direction: column;
    gap: 6px;
  } /* M-xx */
}
/* fim M-38 */

/* M-39 — Bottom bar fixa com mini-cards de lotes
   Altura canônica: 56px (mesmo padrão da CUPage — nouen-lot-nav-bar). */

/* global-intencional: bottom bar oculta em desktop — div seria display:block por padrão
   e quebraria o layout do EventPanel; mobile a re-exibe com display:flex via @media abaixo */
.nouen-event-panel__bottom-bar,
.nouen-event-panel__mobile-ticker {
  display: none;
}

@media (max-width: 767px) {
  /* Bottom bar: fixada acima do Ticker (que tem 24px + safe area) */
  .nouen-event-panel__bottom-bar {
    position: fixed;
    bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    left: 0;
    right: 0;
    z-index: 50;
    background: var(--bg-card);
    border-top: 1px solid var(--border-subtle);
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08);
    height: 76px;
    padding: 0;
    display: flex;
    align-items: center;
  } /* M-xx */

  /* Trilha de mini-cards: scroll horizontal */
  .nouen-event-panel__bottom-bar__track {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 4px;
    padding: 4px 0;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 16px;
    width: 100%;
    align-items: flex-start;
    /* Esmaecimento (fade-out) na borda direita para indicar scroll */
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 24px), transparent 100%);
    mask-image: linear-gradient(to right, black calc(100% - 24px), transparent 100%);
  } /* M-xx */
  .nouen-event-panel__bottom-bar__track::-webkit-scrollbar {
    display: none;
  } /* M-xx */
  
  /* Injeta espaçadores invisíveis nas extremidades para forçar o padding lateral ignorando o bug do Safari */
  .nouen-event-panel__bottom-bar__track::before,
  .nouen-event-panel__bottom-bar__track::after {
    content: "";
    flex: 0 0 16px;
    height: 1px;
  } /* M-xx */

  /* Mini-card de lote */
  .nouen-event-panel__lot-card {
    flex-shrink: 0;
    width: 68px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    cursor: pointer;
    scroll-snap-align: start;
    -webkit-tap-highlight-color: transparent;
    min-height: 44px;
    padding: 4px 4px 2px 4px; /* Compensação visual: imagem no topo (s/ line-height) vs texto embaixo */
    border-radius: var(--radius-sm);
    border: 1.5px solid transparent;
    transition: border-color 0.15s;
    background: none;
    /* reset <button> */
    font-family: inherit;
    text-align: left;
  } /* M-xx */

  /* Mini-card selecionado */
  .nouen-event-panel__lot-card--active {
    border-color: var(--accent-primary);
    background: color-mix(in srgb, var(--accent-primary) 6%, transparent);
  } /* M-xx */

  /* Thumbnail do mini-card: 4:3 canônico */
  .nouen-event-panel__lot-card__thumb {
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 2px;
    object-fit: cover;
    background: var(--bg-tertiary);
    display: block;
  } /* M-xx */

  /* Número do lote */
  .nouen-event-panel__lot-card__label {
    font-size: 0.5rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  } /* M-xx */

  /* Ticker Mobile: no extremo inferior, preenche safe area */
  .nouen-event-panel__mobile-ticker {
    display: block;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 50;
    height: calc(24px + env(safe-area-inset-bottom, 0px));
  } /* M-xx */

  .nouen-event-panel__mobile-ticker__inner {
    width: 100%;
    height: 100%;
    border-left: 3px solid transparent; /* Cor injetada via inline-style */
    display: flex;
    align-items: flex-start;
    padding: 0 16px;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    overflow: hidden;
  } /* M-xx */

  .nouen-event-panel__mobile-ticker__scroll {
    white-space: nowrap;
    display: flex;
    align-items: center;
    height: 32px;
    animation: marquee 15s linear infinite;
  } /* M-xx */

  .nouen-event-panel__mobile-ticker__scroll span {
    font-family: var(--font-body);
    font-size: 0.82rem;
  } /* M-xx */

  @keyframes marquee {
    0% { transform: translateX(100vw); }
    100% { transform: translateX(-100%); }
  } /* M-xx */

  /* Ajustes Tipograficos Action Card (Mobile) */
  .nouen-event-panel .nouen-action-card__price-box {
    padding-right: 0 !important; /* Remove reserva de espaço do timer absoluto, pois no EventPanel ele é estático e segue o fluxo flex */
  } /* M-xx */

  .nouen-action-card__price-value {
    font-size: 25px;
  } /* M-xx */
  
  .nouen-action-card__timer-label {
    font-size: 0.85rem;
    font-weight: 400;
    font-family: inherit;
    color: var(--text-secondary);
    text-transform: none;
    letter-spacing: normal;
  } /* M-xx */
  
  .nouen-action-card__timer-label--urgent {
    font-size: 0.85rem;
    font-weight: 700;
    font-family: inherit;
    color: #ef4444;
    text-transform: none;
    letter-spacing: normal;
  } /* M-xx */
  
  .nouen-action-card__timer-value,
  .nouen-action-card__timer-value--homologating {
    font-size: 25px !important;
    font-weight: 700;
    font-family: var(--font-display);
    color: var(--text-primary);
    letter-spacing: -0.02em;
    line-height: 1;
  } /* M-xx */
  
  .nouen-action-card__timer-value--homologating {
    color: #f59e0b;
    animation: homologatingPulse 1s ease-in-out infinite;
  } /* M-xx */

  /* Estado pré-evento "Abertura": data/hora longa — tamanho compacto para não colidir com o preço */
  .nouen-action-card__timer-value--date {
    font-size: 1rem !important;
    font-family: var(--font-body) !important;
    letter-spacing: normal !important;
    white-space: nowrap;
  } /* M-xx */
}
/* fim M-39 */

/* M-40 — Arch-bar mobile: safe area + compactação */

/* global-intencional: span mobile-only do botão "Sair" oculto em desktop (R5).
   span seria display:inline por padrão e exibiria "Sair" ao lado de "Sair da Sala" no desktop.
   R1-exceção aprovada M-40: visibilidade complementar via CSS. */
.nouen-event-panel__arch-close-label--mobile {
  display: none;
}

/* global-intencional: span mobile-only da data do evento no header (R5).
   Criado por R1-exceção aprovada (plano V7.7): eventDate não é acessível
   via CSS puro dentro do arch-left — vive em arch-right (galho diferente do DOM). */
.nouen-event-panel__arch-date-mobile {
  display: none;
}

/* global-intencional: M-41 novos elementos mobile-only do header (R5)
   Componentes interativos (menus e modals) injetados para UX nativa sem
   afetar a renderização e o DOM ativo do desktop. */
.nouen-event-panel__arch-badge--mobile,
.title-caret--mobile,
.nouen-event-panel__arch-kebab--mobile,
.nouen-event-panel__mobile-info-overlay {
  display: none;
}

/* global-intencional: M-41 classes filhas de elementos mobile-only (R5 cascata).
   São filhas de elementos com display:none global acima — no Desktop nunca
   renderizam. Documentadas aqui para conformidade formal com R5. */
.nouen-event-panel__mobile-info-sheet,
.title-text-node {
  /* Herdado do pai com display:none — sem regra adicional necessária. */
}

/* global-intencional: reset neutro do <button> que envolve o título no Desktop (R2).
   O elemento existe em AMBOS os viewports; no Desktop precisa ser invisível como botão
   (cursor padrão, sem borda/padding) para não alterar o layout legado. As propriedades
   abaixo são resets, não adições de layout — display:inline devolve o comportamento
   natural de <button> envolto em texto. */
.nouen-event-panel__arch-title-btn {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  display: inline;
  cursor: default;
  outline: none;
}

/* global-intencional: arch-title-inner é <span> estrutural presente em AMBOS os viewports
   (não é elemento mobile-only, logo R5 não exige display:none). No Desktop é display:inline
   por padrão do navegador — sem impacto visual. No Mobile recebe display:block via @media.
   Documentado aqui para evidenciar que a ausência de display:none é intencional. */
.nouen-event-panel__arch-title-inner {
  display: inline; /* Neutro no Desktop — @media override para mobile abaixo */
}

@media (max-width: 767px) {
  /* Safe area no topo (viewport-fit=cover ativo desde V7.3) */
  .nouen-event-panel__arch-bar {
    padding-top: env(safe-area-inset-top);
  } /* M-xx */

  /* Inner: compactar em linha única para abrigar Sair + Avatar na mesma altura */
  .nouen-event-panel__arch-bar-inner {
    padding: 6px 16px;
    gap: 14px;
    flex-wrap: nowrap;
  } /* M-xx */

  /* Bloco do título e ícone: usar o espaço restante e truncar (Opção 1) */
  .nouen-event-panel__arch-left {
    flex: 1;
    min-width: 0;
  } /* M-xx */
  .nouen-event-panel__arch-title {
    font-size: 15px;
    font-weight: 700;
    min-width: 0;
  } /* M-xx */
  
  /* Ocultar ícone decorativo para ganhar espaço para o título. 
     O contexto já foi recuperado pelo prefixo empilhado. */
  .nouen-event-panel__arch-title-icon {
    display: none;
  } /* M-xx */

  /* Prefixo: transformar em label empilhado para manter o contexto 
     sem gastar espaço horizontal (M-40). O display: block força a quebra
     de linha do text-node seguinte (o nome do evento). */
  .nouen-event-panel__arch-title-prefix {
    display: block;
    font-size: 0.625rem;
    font-family: var(--font-label);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1;
    margin-bottom: 3px;
    padding-top: 6px;
  } /* M-xx */

  /* Data do evento: ocultada do título pois foi movida para o Modal de Detalhes (M-41) */
  .nouen-event-panel__arch-date-mobile {
    display: none;
  } /* M-xx */

  /* Data do evento, status e divider: ocultar em mobile.
     !important necessário — regra desktop resiste a overrides de especificidade;
     padrão aceito em mobile (DT-V7.5-01).
     Seletores duplos: bloco pai e span filho direto — garante ocultamento
     independente de qual camada do CSS está sobrescrevendo. */
  .nouen-event-panel__arch-bar .nouen-event-panel__arch-clock-block,
  .nouen-event-panel__arch-bar .nouen-event-panel__arch-timer-block,
  .nouen-event-panel__arch-bar .nouen-event-panel__arch-live-badge,
  .nouen-event-panel__arch-bar .nouen-event-panel__arch-divider,
  /* M-42: oculta badge de status desktop no mobile (mobile usa ponto no header) */
  .nouen-event-panel__arch-status-badge--desktop {
    display: none !important;
  } /* M-xx */
  /* M-42: Banner de conexão: visível em AMBOS os viewports (Estratégia B universal).
     No mobile adapta o texto para caber melhor na largura menor. */
  .nouen-event-panel__conn-banner--desktop {
    font-size: 0.7rem;
    padding: 0 12px;
    text-align: center;
    flex-wrap: wrap;
  } /* M-xx */

  .nouen-event-panel__conn-banner--desktop--visible {
    padding: 6px 12px;
  } /* M-xx */

  /* Fallback: oculta o span "STATUS"/"DATA DO EVENTO" diretamente,
     caso o pai não seja suprimido por alguma regra de especificidade não mapeada */
  .nouen-event-panel__arch-right .nouen-event-panel__arch-clock-label {
    display: none !important;
  } /* M-xx */

  /* Botão "Sair da Sala" → "Sair": visibilidade complementar dos spans */
  .nouen-event-panel__arch-close-label--desktop {
    display: none;
  } /* M-xx */
  .nouen-event-panel__arch-close-label--mobile {
    display: none; /* M-41: Oculto no mobile, movido para o Kebab */
  } /* M-xx */

  /* Botão "Sair": oculto no mobile em favor do Kebab (M-41) */
  .nouen-event-panel__arch-close-btn {
    display: none;
  } /* M-xx */

  /* M-41: Badge Universal Mobile-Only (Apenas o ponto) */
  .nouen-event-panel__arch-badge--mobile {
    display: inline-block;
    vertical-align: middle;
    transform: translateY(-0.5px);
  } /* M-xx */
  .nouen-event-panel__arch-badge--mobile .badge-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    position: relative;
  } /* M-xx */
  .nouen-event-panel__arch-badge--mobile .badge-dot[data-pulse="true"]::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border-radius: 50%;
    background-color: inherit;
    animation: badge-ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
  } /* M-xx */
  /* M-42: velocidade variável — Ao Vivo rápido (1.5s), Aberto lento (3s) */
  .nouen-event-panel__arch-badge--mobile .badge-dot[data-pulse-speed="3s"]::after {
    animation-duration: 3s;
  } /* M-xx */
  @keyframes badge-ping {
    0% { transform: scale(1); opacity: 0.8; }
    75%, 100% { transform: scale(2.5); opacity: 0; }
  } /* M-xx */

  /* M-41: Título como botão expansível */
  .nouen-event-panel__arch-title-btn {
    display: flex;
    flex-direction: column;
    width: 100%;
    cursor: pointer;
    overflow: visible;
  } /* M-xx */
  .nouen-event-panel__arch-title-inner {
    display: flex;
    align-items: center;
    width: 100%;
  } /* M-xx */
  .title-text-node {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 1;
  } /* M-xx */
  .title-caret--mobile {
    display: block;
    flex-shrink: 0;
    font-size: 16px;
    opacity: 0.7;
    margin-left: 4px;
  } /* M-xx */

  /* M-41: Menu Kebab Mobile-Only */
  .nouen-event-panel__arch-kebab--mobile {
    display: flex;
    align-items: center;
    position: relative;
  } /* M-xx */
  .nouen-event-panel__arch-kebab--mobile .kebab-btn {
    background: none;
    border: none;
    color: inherit;
    padding: 4px;
    margin: -4px;
    cursor: pointer;
  } /* M-xx */
  .nouen-event-panel__arch-kebab--mobile .kebab-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    background: #1e1e1e;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
    border: 1px solid rgba(255,255,255,0.1);
    z-index: 100;
    min-width: 140px;
    overflow: hidden;
  } /* M-xx */
  .nouen-event-panel__arch-kebab--mobile .kebab-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 12px 16px;
    background: none;
    border: none;
    color: #ffffff;
    font-size: 0.85rem;
    font-family: var(--font-body);
    text-align: left;
    cursor: pointer;
  } /* M-xx */
  .nouen-event-panel__arch-kebab--mobile .kebab-item.danger {
    color: #ef4444;
  } /* M-xx */

  /* M-41: Modal Bottom Sheet (Informações) */
  .nouen-event-panel__mobile-info-overlay {
    display: block;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.6);
    z-index: 999;
    animation: fade-in 0.2s ease-out;
  } /* M-xx */
  .nouen-event-panel__mobile-info-sheet {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    background: #1e1e1e;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    padding: 24px;
    animation: slide-up 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  } /* M-xx */
  .nouen-event-panel__mobile-info-sheet .sheet-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
  } /* M-xx */
  .nouen-event-panel__mobile-info-sheet .sheet-header h2 {
    font-size: 0.85rem;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.05em;
    font-family: var(--font-display);
    margin: 0;
    color: #ffffff;
  } /* M-xx */
  .nouen-event-panel__mobile-info-sheet .close-btn {
    background: none;
    border: none;
    color: rgba(255,255,255,0.7);
    padding: 4px;
    margin: -4px;
    cursor: pointer;
  } /* M-xx */
  .nouen-event-panel__mobile-info-sheet .sheet-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255,255,255,0.1);
  } /* M-xx */
  .nouen-event-panel__mobile-info-sheet .sheet-row:last-child {
    border-bottom: none;
  } /* M-xx */
  .nouen-event-panel__mobile-info-sheet .label {
    color: rgba(255,255,255,0.7);
    font-size: 0.75rem;
    text-transform: uppercase;
    font-family: var(--font-label);
  } /* M-xx */
  .nouen-event-panel__mobile-info-sheet .value {
    color: #ffffff;
    font-size: 0.75rem;
    text-transform: uppercase;
    font-weight: 700;
    text-align: right;
    max-width: 60%;
  } /* M-xx */

  @keyframes slide-up {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
  } /* M-xx */
  @keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
  } /* M-xx */



  /* M-42: Modal "Sair da Sala" — padding lateral 16px.
     Centralização dos botões: via justifyContent no JSX (botões são inline-flex,
     text-align não tem efeito em flex containers). */
  .nouen-event-panel__modal-overlay {
    padding: 0 16px;
  } /* M-xx */

  /* M-45: Ajustes do EventFilterBar mobile (full-width bleeding, colar no header, search-box com padding 16px) */
  .nouen-event-panel__breadcrumb-wrapper {
    display: none !important;
  } /* M-xx */
  
  /* Remove o limite do container pai para garantir que o fundo/barra ocupe a tela toda (full-width) */
  .nouen-event-panel__filter-wrapper {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important; /* Remove o padding-bottom de 4px que vinha do inline style do TSX */
  } /* M-xx */

  /* Limita fisicamente a área do carrossel para 16px das bordas, forçando o corte (crop) antes da margem da tela */
  .nouen-event-panel .nouen-vitrine__chips-row {
    width: calc(100% - 32px) !important;
    margin: 0 auto !important;
    padding-left: 0 !important;
    /* Esmaecimento (fade-out) na borda direita para indicar scroll */
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 24px), transparent 100%);
    mask-image: linear-gradient(to right, black calc(100% - 24px), transparent 100%);
  } /* M-xx */
  .nouen-event-panel .nouen-vitrine__chips-row > :last-child {
    /* Espaço extra no fim do scroll para que o último chip saia da zona de esmaecimento */
    margin-right: 24px !important;
  } /* M-xx */
  
  /* Cola a busca nos chips removendo o gap padrão da Vitrine (8px) */
  .nouen-event-panel .nouen-vitrine__filter-bar {
    gap: 0 !important;
    padding-bottom: 0 !important; /* Zera o padding-bottom: 16px do base — o grid padding-top já controla o espaço abaixo */
  } /* M-xx */
  
  /* Mantém o mesmo comportamento para a busca (corte exato nos 16px) */
  .nouen-event-panel .nouen-vitrine__search-wrapper {
    width: calc(100% - 32px) !important;
    margin: 8px auto 0 auto !important; /* Zera a margem inferior para não somar com o padding do grid */
    padding: 0 !important;
  } /* M-xx */

  /* M-43: Ocultar Leiloeiro na EventPanel mobile */
  .nouen-event-panel__auctioneer-info {
    display: none !important;
  } /* M-xx */

} /* fim M-40 */

/* V8.4 — AttachmentManager */
.nouen-attachment-manager {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.nouen-attachment-manager__drop {
  border: 2px dashed var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 32px 24px;
  text-align: center;
  background-color: var(--bg-card);
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.nouen-attachment-manager__drop:hover {
  background-color: var(--bg-secondary);
  border-color: var(--border-active);
}

.nouen-attachment-manager__drop--active {
  background-color: rgba(9, 147, 165, 0.05);
  border-color: var(--accent-primary);
}

.nouen-attachment-manager__drop--disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.nouen-attachment-manager__drop-content p {
  font-family: var(--font-headline);
  font-size: 16px;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.nouen-attachment-manager__drop-content small {
  font-size: 13px;
  color: var(--text-secondary);
}

.nouen-attachment-manager__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.nouen-attachment-manager__empty {
  font-size: 14px;
  color: var(--text-tertiary);
  font-style: italic;
  padding: 16px;
  text-align: center;
  border: 1px dashed var(--border-subtle);
  border-radius: var(--radius-md);
}

.nouen-attachment-manager__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background-color: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: 0 1px 3px rgba(0,0,0,0.02);
  transition: border-color 0.2s ease;
}

.nouen-attachment-manager__item:hover {
  border-color: var(--border-active);
}

.nouen-attachment-manager__meta {
  display: flex;
  align-items: center;
  gap: 16px;
}

.nouen-attachment-manager__meta-name {
  font-weight: 600;
  font-size: 15px;
  color: var(--text-primary);
  display: block;
  margin-bottom: 4px;
}

.nouen-attachment-manager__meta-details {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-secondary);
}

.nouen-attachment-manager__btn {
  background: none;
  border: none;
  color: var(--text-accent);
  cursor: pointer;
  padding: 8px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.7;
  transition: all 0.2s ease;
}

.nouen-attachment-manager__btn:hover {
  opacity: 1;
  background-color: rgba(239, 68, 68, 0.1);
}

@media (max-width: 767px) {
  .nouen-attachment-manager__item {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  
  .nouen-attachment-manager__btn {
    align-self: flex-end;
  }
}

/* V8.4 — EventDocsSection (EventPage pública) */
.nouen-event-page__docs-section {
  padding: 64px 0;
  background: var(--bg-primary);
}

.nouen-event-page__docs-section-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

.nouen-event-page__docs-list {
  margin-top: 16px;
}

.nouen-event-page__docs-download-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  padding: 8px;
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast), background-color var(--transition-fast);
  text-decoration: none;
}

.nouen-event-page__docs-download-btn:hover {
  color: var(--accent-primary);
  background-color: rgba(9, 147, 165, 0.08);
}

/* V8.4 — Ícone de documento (compartilhado CUDocs + EventDocsSection) */
.nouen-cu-doc-icon {
  color: var(--text-tertiary);
  font-size: 20px;
  flex-shrink: 0;
}

@media (max-width: 767px) {
  .nouen-event-page__docs-section {
    padding: 40px 0;
  }
  .nouen-event-page__docs-section-inner {
    padding: 0 16px; /* M-xx — substitui --container-padding (56px) no mobile */
  }
}



/* ── Wizard: Domain Card — novos domínios V8.5 ── */
.nouen-wizard-domain-card {
  position: relative; overflow: hidden;
  background: #f6f3f2; border: 1px solid #ebe7e7;
  border-left: 1px solid #ebe7e7; border-radius: 4px;
  padding: 32px; display: flex; flex-direction: column;
  align-items: flex-start; gap: 32px; text-align: left;
  cursor: pointer; min-height: 320px; width: 100%;
  transition: all 0.25s ease; box-shadow: none;
}
.nouen-wizard-domain-card:hover {
  background: #ffffff;
  border-left: 3px solid var(--accent-primary);
  padding-left: 30px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.06);
}
.nouen-wizard-domain-card__arc {
  position: absolute; top: -32px; right: -32px;
  width: 128px; height: 128px;
  background: rgba(18,18,18,0.04);
  border-radius: 0 0 0 9999px;
  transition: transform 0.3s ease;
}
.nouen-wizard-domain-card:hover .nouen-wizard-domain-card__arc {
  transform: scale(1.1);
}
.nouen-wizard-domain-card__icon-box {
  width: 64px; height: 64px; border-radius: 4px;
  background: #ebe7e7;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.25s ease; flex-shrink: 0; color: #121212;
}
.nouen-wizard-domain-card:hover .nouen-wizard-domain-card__icon-box {
  background: #121212; color: #ffffff;
}
.nouen-wizard-domain-card__text {
  display: flex; flex-direction: column; gap: 12px;
  margin-top: auto; position: relative; z-index: 1;
}
.nouen-wizard-domain-card__arrow {
  position: absolute; bottom: 24px; right: 24px;
  opacity: 0; transition: opacity 0.2s ease; color: #121212;
}
.nouen-wizard-domain-card:hover .nouen-wizard-domain-card__arrow { opacity: 1; }

/* ==============================
   INSTITUTIONAL HOME — V8.6
   Seção: SectionHero
   ============================== */

.nouen-inst-hero {
  position: relative;
  width: 100%;
  min-height: 80svh; /* Abordagem UX mobile: deixa vazar o início da próxima seção */
  overflow: hidden;
  background: #ffffff;
  display: flex;
  flex-direction: column;
}
@media (min-width: 1024px) {
  .nouen-inst-hero {
    min-height: 100vh;
  }
}

.nouen-inst-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: #fdfdfd;
  overflow: hidden;
}

@media (max-width: 767px) {
  .nouen-inst-hero__bg {
    background: linear-gradient(135deg,
      rgba(37, 37, 109, 0.08) 0%,
      rgba(181, 101, 118, 0.06) 100%
    );
  }
}

/* Máscara em degradê para mesclar a base do Hero com o fundo cinza claro da Seção 2 (#f7f9fc) */
.nouen-inst-hero__bg::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 250px;
  background: linear-gradient(to bottom, rgba(247, 249, 252, 0) 0%, #f7f9fc 100%);
  pointer-events: none;
  z-index: 10;
}

/* Máscara em degradê para dissolver a malha no topo (abaixo do header) */
.nouen-inst-hero__bg::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 200px;
  background: linear-gradient(to top, rgba(253, 253, 253, 0) 0%, #fdfdfd 100%);
  pointer-events: none;
  z-index: 10;
}


.nouen-inst-hero__noise {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0.25;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

.nouen-inst-hero__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.15;
  z-index: 0;
  animation: inst-hero-blob 20s infinite alternate cubic-bezier(0.4, 0, 0.2, 1);
}
/* blob--1 não está em uso — canto sup. esq. mantido limpo para legibilidade do texto */
.nouen-inst-hero__blob--1 {
  top: -10%; left: -10%; width: 500px; height: 500px;
  background: rgba(37, 37, 109, 1);
  animation-delay: 0s;
}
.nouen-inst-hero__blob--2 {
  top: 40%; right: -20%; width: 600px; height: 600px;
  /* background: rgba(225, 49, 122, 1); Magenta NOUEN preservado */
  background: #B56576; /* Rosa Velho em teste */
  animation-delay: -5s;
}
.nouen-inst-hero__blob--3 {
  bottom: -20%; left: 20%; width: 700px; height: 700px;
  background: rgba(37, 37, 109, 1);
  animation-delay: -10s;
}
.nouen-inst-hero__blob--4 {
  bottom: 10%; right: 20%; width: 400px; height: 400px;
  /* background: rgba(225, 49, 122, 1); Magenta NOUEN preservado */
  background: #B56576; /* Rosa Velho em teste */
  animation-delay: -15s;
}


@keyframes inst-hero-blob {
  0% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(60px, -80px) scale(1.15); }
  66% { transform: translate(-50px, 50px) scale(0.85); }
  100% { transform: translate(80px, 90px) scale(1.1); }
}

/* Mobile: blobs em vw para não vazar nem causar scroll horizontal */
@media (max-width: 767px) {
  .nouen-inst-hero__blob {
    filter: blur(60px);
    opacity: 0.18;
    animation: none; /* desativa animação no mobile — transforms escapam do clip no iOS Safari */
  }
  .nouen-inst-hero__blob--2 {
    top: 45%; right: 0; /* Desceu de 20% para 45% */
    width: 65vw; height: 65vw;
    bottom: auto; left: auto;
  }
  .nouen-inst-hero__blob--3 {
    bottom: -10%; left: 0; /* Desceu de 0 para -10% para vazar um pouco pela base */
    width: 75vw; height: 75vw;
    top: auto; right: auto;
  }
  .nouen-inst-hero__blob--4 {
    bottom: 5%; right: 0; /* Desceu de 25% para 5% */
    width: 45vw; height: 45vw;
    top: auto; left: auto;
  }
}

.nouen-inst-hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  /* Espaçamento do bloco no Mobile (Ajuste o "100px" se quiser descer ou subir mais) */
  padding: calc(var(--header-height) + 72px) 16px 64px;
}
@media (min-width: 1024px) {
  .nouen-inst-hero__inner {
    /* Espaçamento do bloco no Desktop (Ajuste o "120px" se quiser descer ou subir mais) */
    padding: calc(var(--header-height) + 160px) var(--container-padding) 96px;
  }
}

.nouen-inst-hero__notification {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 40px;
  padding: 10px 16px;
  height: 40px;
}
@media (min-width: 1024px) {
  .nouen-inst-hero__notification {
    margin-bottom: 56px;
    height: 48px;
    padding-left: 80px;
  }
}

.nouen-inst-hero__notification-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #E1317A; /* Rosa NOUEN */
  flex-shrink: 0;
  box-shadow: 0 0 8px #E1317A;
  animation: inst-notification-pulse 2s infinite ease-in-out;
}
@keyframes inst-notification-pulse {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(225, 49, 122, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(225, 49, 122, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(225, 49, 122, 0); }
}

.nouen-inst-hero__notification-text {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.nouen-inst-hero__notification-text--in {
  opacity: 1;
  transform: translateY(0);
}

.nouen-inst-hero__notification-text--out {
  opacity: 0;
  transform: translateY(-8px);
}

.nouen-inst-hero__content {
  width: 100%;
  padding-left: 16px; /* <--- ESPAÇAMENTO À ESQUERDA NO MOBILE */
}
@media (max-width: 767px) {
  .nouen-inst-hero__content {
    padding-left: 0;
  }
}
@media (min-width: 1024px) {
  .nouen-inst-hero__content {
    max-width: 1300px;
    padding-left: 80px; /* <--- ESPAÇAMENTO À ESQUERDA NO DESKTOP */
  }
}

.nouen-inst-hero__typewriter-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-label, monospace);
  font-size: 0.8025rem; /* Um pouco maior já que não tem a caixa do pill */
  letter-spacing: 0.025em;
  /* Mantenha o margin-bottom em 24px para manter o Título no lugar exato que ele estava */
  margin-bottom: 24px;
  /* O transform move APENAS a linha de cima, descolando ela do resto */
  transform: translateY(-48px);
  text-transform: uppercase;
}
@media (max-width: 767px) {
  .nouen-inst-hero__typewriter-badge {
    transform: translateY(56px); /* Subida menor no mobile para não esmagar o Header */
    margin-bottom: 96px; /* Ajusta o respiro inferior */
    font-size: 0.75rem; /* Igual ao eyebrow do Clusters */
    flex-wrap: wrap;
    gap: 0 6px; /* Reduzido o espaço vertical (row-gap) para 0 */
    line-height: 1.3; /* Tira o respiro embutido da fonte para aproximar as linhas */
  }
  .nouen-inst-hero__typewriter-prefix {
    width: 100%;
  }
}

.nouen-inst-hero__typewriter-prefix {
  color: var(--text-secondary, rgba(0, 0, 0, 0.6)); /* Escuro sutil para contrastar com o fundo claro */
  font-weight: 600;
}

.nouen-inst-hero__typewriter-text {
  color: #B56576; /* Rosa Velho/Consumo */
  font-weight: 600;
}

.nouen-inst-hero__typewriter-cursor {
  color: #B56576;
  font-weight: 700;
  animation: nouen-blink 1s step-end infinite;
}

/* Suporte a Display P3 (Telas Apple/High-End) para renderizar a vibração correta da cor */
@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .nouen-inst-hero__typewriter-text,
    .nouen-inst-hero__typewriter-cursor {
      color: color(display-p3 0.710 0.396 0.463);
    }
  }
}

@keyframes nouen-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.nouen-inst-hero__title {
  font-family: var(--font-headline);
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.04em;
  color: var(--text-primary);
  margin: 0 0 32px;
}
@media (max-width: 767px) {
  .nouen-inst-hero__title {
    font-size: 1.95rem; /* Igual ao MarketHero no mobile */
    margin: 0 0 16px;
    max-width: 320px; /* <--- Ajuste este valor para controlar a quebra de linha no mobile */
  }
}
@media (min-width: 768px) {
  .nouen-inst-hero__title {
    font-size: 2.7rem;
  }
}
@media (min-width: 1024px) {
  .nouen-inst-hero__title {
    margin: 0 0 24px;
  }
}

.nouen-inst-hero__subtitle {
  font-family: var(--font-headline);
  font-size: 1.125rem;
  line-height: 1.25;
  letter-spacing: -0.02em;
  font-weight: 400;
  color: var(--text-secondary);
  margin: 0 0 32px;
  max-width: 600px; /* <--- LARGURA DO SUBTÍTULO NO MOBILE */
}
@media (max-width: 767px) {
  .nouen-inst-hero__subtitle--desktop { display: none; }  /* Oculta o longo no mobile */
  .nouen-inst-hero__subtitle--mobile  { display: block; max-width: 100%; font-size: 0.97rem; font-family: var(--font-body); letter-spacing: -0.01em; } /* Mostra o curto no mobile — estilo consistente com Dilemma */
}
@media (min-width: 768px) {
  .nouen-inst-hero__subtitle--desktop { display: block; } /* Mostra o longo no desktop */
  .nouen-inst-hero__subtitle--mobile  { display: none; }  /* Oculta o curto no desktop */
}
@media (min-width: 1024px) {
  .nouen-inst-hero__subtitle {
    font-size: 1.85rem;
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 0 0 44px;
    max-width: 980px; /* <--- LARGURA DO SUBTÍTULO NO DESKTOP */
  }
}

.nouen-inst-hero__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 8px;
  align-items: flex-start;
}
@media (min-width: 768px) {
  .nouen-inst-hero__actions {
    flex-direction: row;
    align-items: center;
    gap: 32px; /* Increased gap */
    padding-top: 0;
  }
}

.nouen-inst-hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-headline);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-radius: 4px;
  text-decoration: none;
  cursor: pointer;
  transition: all var(--transition-fast);
  width: 100%;
  justify-content: center;
  padding: 18px 24px;
  font-size: 0.8125rem;
  min-height: 44px;
}
@media (max-width: 767px) {
  .nouen-inst-hero__cta {
    font-size: 0.75rem;
  }
  .nouen-inst-hero__cta:active {
    opacity: 0.85;
    transform: scale(0.98);
  }
}
/* Fix para centralizar verticalmente a setinha (material icons costumam ter respiro interno) */
.nouen-inst-hero__cta .material-symbols-outlined {
  line-height: 1;
  display: flex;
  align-items: center;
  transform: translateY(1.5px); /* Ajuste manual (suporta frações por conta do sub-pixel rendering de telas modernas) */
}
@media (min-width: 768px) {
  .nouen-inst-hero__cta {
    width: auto;
    padding: 16px 28px;
    font-size: 0.75rem;
  }
}

.nouen-inst-hero__cta--primary {
  background: var(--accent-primary);
  color: #ffffff;
  border: none;
  /* box-shadow: 0 0 20px color-mix(in srgb, var(--accent-primary) 25%, transparent); */
}
.nouen-inst-hero__cta--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 8px color-mix(in srgb, var(--accent-primary) 40%, transparent);
  color: #ffffff;
}
.nouen-inst-hero__cta--primary:active {
  transform: translateY(0);
}

.nouen-inst-hero__cta--secondary {
  background: transparent;
  color: var(--text-primary);
  border: none;
  padding-left: 0;
  padding-right: 0;
  box-shadow: none;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  font-size: 1rem; /* Explicitly increased for better readability */
}
.nouen-inst-hero__cta--secondary:hover {
  color: #475569; /* Tom sutil de cinza escuro para manter a sobriedade */
  transform: none;
  gap: 12px;
}
@media (max-width: 767px) {
  .nouen-inst-hero__cta--secondary {
    border: 1px solid currentColor; /* Usa exatamente a mesma cor do texto */
    padding-left: 24px;
    padding-right: 24px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.75rem;
  }
  .nouen-inst-hero__cta--secondary .material-symbols-outlined {
    display: none !important; /* Remove a setinha no mobile */
  }
}

/* Utility: quebra de linha visível apenas no mobile */
.nouen-mobile-break { display: none; }
@media (max-width: 767px) {
  .nouen-mobile-break { display: block; }
}

/* ══════════════════════════════════════════════════════════════
   Seção: SectionDilemma
   ============================== */

.nouen-inst-dilemma {
  background: #f7f9fc;
  padding: 80px 0;
  position: relative;
  z-index: 2;
  /* Compensa a margem (-100px) descontando o padding da seção (80px) = 20px de overflow visual + cabeçalho fixo */
  scroll-margin-top: calc(var(--header-height, 80px) + 20px);
}
@media (max-width: 767px) {
  .nouen-inst-dilemma {
    padding-top: 120px; /* Aumenta a distância (gap) em relação à seção anterior no mobile */
  }
}
@media (min-width: 1024px) {
  .nouen-inst-dilemma {
    padding: 120px 0;
    /* Compensa a margem (-180px) descontando o padding (120px) = 60px de overflow visual + cabeçalho fixo */
    scroll-margin-top: calc(var(--header-height, 80px) + 105px);
  }
}

.nouen-inst-dilemma__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 16px;
}
@media (min-width: 1024px) {
  .nouen-inst-dilemma__inner {
    padding: 0 var(--container-padding);
  }
}

.nouen-inst-dilemma__header {
  position: relative;
  z-index: 20;
  text-align: left;
  max-width: 960px; /* Increased from 800px to prevent wrapping in two lines on most displays */
  margin: -100px auto 56px; /* Pulls the header up into the hero section */
}
@media (min-width: 768px) {
  .nouen-inst-dilemma__header {
    text-align: center;
  }
}
@media (min-width: 1024px) {
  .nouen-inst-dilemma__header {
    margin: -180px auto 80px; /* Stronger overlap on desktop */
  }
}

.nouen-inst-dilemma__eyebrow {
  display: block;
  font-family: var(--font-label);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.075em;
  color: var(--accent-primary);
  margin-bottom: 16px;
}
@media (max-width: 767px) {
  .nouen-inst-dilemma__eyebrow { font-size: 0.7rem; }
}

.nouen-inst-dilemma__title {
  font-family: var(--font-headline);
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--text-primary);
  margin: 0 0 12px; /* Reduzido de 24px para 12px no mobile */
}
@media (min-width: 768px) {
  .nouen-inst-dilemma__title {
    font-size: 2.65rem;
    margin: 0 0 24px; /* Restaura no desktop */
  }
}

.nouen-inst-dilemma__subtitle {
  font-family: var(--font-body); /* Estilo MarketHero tagline no mobile */
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.4;
  color: var(--text-secondary); /* Mantemos cinza escuro por causa do fundo claro */
  margin: 0;
  max-width: 100%; /* Largura no mobile (teste diminuir se quiser mais linhas) */
  text-wrap: balance; /* Tenta equilibrar as linhas automaticamente nos browsers modernos */
}
@media (min-width: 768px) {
  .nouen-inst-dilemma__subtitle {
    font-family: var(--font-headline); /* Restaura no desktop */
    font-size: 1.225rem;
    letter-spacing: normal;
    margin: 0 auto;
    max-width: 840px; /* Mantém a largura original intocada no Desktop */
  }
}

.nouen-inst-dilemma__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (min-width: 768px) {
  .nouen-inst-dilemma__grid {
    gap: 24px;
  }
}
@media (min-width: 1024px) {
  .nouen-inst-dilemma__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
  }
}

.nouen-inst-dilemma__card {
  background: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 24px; /* 24px em todos os lados no mobile */
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
}
@media (min-width: 768px) {
  .nouen-inst-dilemma__card {
    padding: 48px;
  }
}

/* Card highlight (NOUEN) ocupa as 2 colunas no mobile */
@media (max-width: 767px) {
  .nouen-inst-dilemma__card--highlight {
    grid-column: span 2;
    padding: 36px 24px;
  }
  .nouen-inst-dilemma__card--highlight .nouen-inst-dilemma__card-desc {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: -0.01em;
    line-height: 1.4;
  }
  .nouen-inst-dilemma__card--highlight .nouen-inst-dilemma__card-desc strong {
    margin-bottom: 16px;
  }
}

/* Controle de visibilidade: desc completo vs versão compacta */
@media (max-width: 767px) {
  .nouen-inst-dilemma__card--problem .nouen-inst-dilemma__card-desc {
    display: none;
  }
  .nouen-inst-dilemma__card-compact {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: auto;
    padding-top: 12px;
  }
}
@media (min-width: 768px) {
  .nouen-inst-dilemma__card-compact {
    display: none;
  }
}

.nouen-inst-dilemma__card-title {
  font-family: var(--font-headline);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 10px;
  position: relative;
  padding-top: 24px;
  line-height: 1.2;
}
@media (min-width: 768px) {
  .nouen-inst-dilemma__card-title {
    font-size: 1.25rem;
    margin: 0 0 16px;
    padding-top: 48px;
  }
}

.nouen-inst-dilemma__card-title::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 48px; /* Wider line */
  height: 4px; /* Thicker line */
  background: var(--border-strong, #a0aab4);
}

.nouen-inst-dilemma__card-desc {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0;
}

.nouen-inst-dilemma__card-desc strong {
  color: var(--text-primary);
  font-weight: 600;
  display: block;
  margin-bottom: 8px;
}

.nouen-inst-dilemma__card-impact {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.3;
  flex: 1;
  /* white-space: nowrap removido — causava overflow horizontal em mobile */
  overflow-wrap: break-word;
}

/* Botão "+" para abrir modal */
.nouen-inst-dilemma__card-expand {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1.5px solid var(--border-color);
  background: transparent;
  color: var(--text-secondary);
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.nouen-inst-dilemma__card-expand:hover {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  color: #ffffff;
}

/* Card 3 (NOUEN Highlight) */
.nouen-inst-dilemma__card--highlight {
  background: #0f172a;
  border-color: #0f172a;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.4), 0 24px 80px rgba(181, 101, 118, 0.25);
}

.nouen-inst-dilemma__card--highlight .nouen-inst-dilemma__card-title {
  color: #ffffff;
}

.nouen-inst-dilemma__card--highlight .nouen-inst-dilemma__card-title::before {
  background: var(--accent-primary, #00A3C4);
}

.nouen-inst-dilemma__card--highlight .nouen-inst-dilemma__card-desc {
  color: rgba(255, 255, 255, 0.85);
}

.nouen-inst-dilemma__card--highlight .nouen-inst-dilemma__card-desc strong {
  color: #ffffff;
}

/* ── Modal Dilemma ─────────────────────────────── */
.nouen-dilemma-modal__overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: nouen-dilemma-fade 0.2s ease;
}
@keyframes nouen-dilemma-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.nouen-dilemma-modal__box {
  background: #ffffff;
  border-radius: 4px;
  padding: 32px 24px 28px;
  max-width: 400px;
  width: 100%;
  position: relative;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.18);
  animation: nouen-dilemma-slide 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes nouen-dilemma-slide {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.nouen-dilemma-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: #f1f5f9;
  color: #475569;
  font-size: 1.4rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: background 0.15s ease;
}
.nouen-dilemma-modal__close:hover { background: #e2e8f0; }

.nouen-dilemma-modal__eyebrow {
  display: block;
  font-family: var(--font-label);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.075em;
  color: var(--accent-primary);
  margin-bottom: 12px;
}

.nouen-dilemma-modal__title {
  font-family: var(--font-headline);
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--text-primary, #0f172a);
  margin: 0 0 16px;
  letter-spacing: -0.02em;
  line-height: 1.2;
  padding-right: 32px;
}

.nouen-dilemma-modal__impact {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary, #0f172a);
  margin: 0 0 10px;
}

.nouen-dilemma-modal__desc {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1.65;
  color: var(--text-secondary, #475569);
  margin: 0;
}


/* ══════════════════════════════════════════════════════════════
   Seção: SectionSolution (Bento Grid)
   ============================== */
.nouen-inst-solution {
  background: #0f172a;
  padding: 80px 0;
  position: relative;
  z-index: 10;
  scroll-margin-top: var(--header-height, 80px);
  overflow: hidden; /* Garante que o brilho radial não vaze da seção */
}

/* Novo brilho radial (idêntico ao SectionFinalCTA, mas no topo esquerdo) */
.nouen-inst-solution__glow {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-50%, -50%);
  width: 100vw;
  height: 100vw;
  max-width: 1200px;
  max-height: 1200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(9, 147, 165, 0.2) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}
@media (min-width: 1024px) {
  .nouen-inst-solution {
    padding: 100px 0;
    scroll-margin-top: calc(var(--header-height, 80px) - 50px);
  }
}

.nouen-inst-solution__inner {
  position: relative;
  z-index: 1; /* Fica acima do glow */
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 16px;
}
@media (min-width: 1024px) {
  .nouen-inst-solution__inner {
    padding: 0 var(--container-padding);
  }
}

.nouen-inst-solution__header {
  text-align: left;
  max-width: 800px;
  margin-bottom: 64px;
}
@media (min-width: 1024px) {
  .nouen-inst-solution__header {
    margin-bottom: 96px;
  }
}

.nouen-inst-solution__eyebrow {
  display: block;
  font-family: var(--font-label);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.075em;
  color: var(--accent-primary);
  margin-bottom: 16px;
}
@media (max-width: 767px) {
  .nouen-inst-solution__eyebrow { font-size: 0.7rem; }
}

.nouen-inst-solution__title {
  font-family: var(--font-headline);
  font-size: 1.4rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 12px; /* Reduzido de 24px para 12px no mobile */
  line-height: 1.1;
  letter-spacing: -0.02em;
}
@media (min-width: 768px) {
  .nouen-inst-solution__title {
    font-size: 2.65rem;
    margin: 0 0 24px; /* Restaura no desktop */
  }
}

.nouen-inst-solution__subtitle {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
  max-width: 680px;
}
/* Controle de visibilidade por breakpoint */
.nouen-inst-solution__subtitle--desktop { display: none; }
.nouen-inst-solution__subtitle--mobile  { display: block; }
@media (min-width: 768px) {
  .nouen-inst-solution__subtitle--desktop { display: block; }
  .nouen-inst-solution__subtitle--mobile  { display: none; }
  .nouen-inst-solution__subtitle {
    font-family: var(--font-headline);
    font-size: 1.225rem;
    letter-spacing: normal;
    margin: 0;
  }
}

.nouen-inst-solution__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 768px) {
  .nouen-inst-solution__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .nouen-inst-solution__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
  }
  .nouen-inst-solution__card--span-2 {
    grid-column: span 2;
  }
  .nouen-inst-solution__card--span-1 {
    grid-column: span 1;
  }
  .nouen-inst-solution__card--span-1 .nouen-inst-solution__card-mockup {
    /* flex: 1 movido para classe base */
  }
}

.nouen-inst-solution__card {
  background: rgba(255, 255, 255, 0.03); /* Ligeiramente mais opaco para compensar a falta de borda */
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  height: 100%; /* Infallible fix: Força o card a assumir 100% da altura da grid row */
  min-height: 100%;
  overflow: hidden;
  position: relative; /* Necessário para a borda gradiente em ::before */
  transition: transform var(--transition-normal), background var(--transition-normal);
  transform: translateZ(0); /* Força anti-aliasing no border-radius e resolve falhas/serrilhados nos cantos */
}

/* Efeito Stripe: Borda gradiente dinâmica (Mouse-tracking) */
.nouen-inst-solution__card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: radial-gradient(
    600px circle at var(--mouse-x, 0px) var(--mouse-y, 0px),
    rgba(0, 163, 196, 0.8), /* Ciano */
    rgba(92, 92, 255, 0.8), /* Roxo/Azul */
    transparent 40%
  );
  -webkit-mask: 
     linear-gradient(#fff 0 0) content-box, 
     linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
  z-index: 10;
}

/* Efeito Stripe: Brilho de fundo sutil (Mouse-tracking) */
.nouen-inst-solution__card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    800px circle at var(--mouse-x, 0px) var(--mouse-y, 0px),
    rgba(255, 255, 255, 0.04),
    transparent 40%
  );
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
  z-index: 1; /* Fica atrás do conteúdo posicionado */
}

.nouen-inst-solution__card:hover {
  background: rgba(255, 255, 255, 0.06);
  transform: translateY(-4px) translateZ(0);
}

/* Acende a moldura e o fundo de todos os cards próximos quando o mouse está no Grid */
.nouen-inst-solution__grid:hover .nouen-inst-solution__card::before,
.nouen-inst-solution__grid:hover .nouen-inst-solution__card::after {
  opacity: 1;
}

.nouen-inst-solution__card-mockup {
  flex: 1 1 100%; /* Força a caixa a tentar ocupar 100% do espaço restante */
  height: 100%; /* Garante expansão total */
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  min-height: 240px; /* Garante uma altura mínima razoável */
}

/* Imagem do Mockup (Alternativa 1/2) */
.nouen-inst-solution__card-mockup--image {
  padding: 0; /* Remove padding if any to allow edge-to-edge or let the image handle its margins */
}

/* ====================================================
   AI CATALOG MOCKUP — Estilo Mirakl (canvas unificado)
   ==================================================== */

.nouen-inst-ai-mockup-wrapper {
  padding: 0 !important;
  overflow: hidden;
}

/* Canvas principal: gradiente suave azul-lavanda-rosado */
.nouen-ai-mockup {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 320px;
  background: linear-gradient(145deg, #a5cefd 0%, #cfc0fd 50%, #fabfdc 100%);
  position: relative;
  overflow: hidden;
}

/* Stage: posicionamento relativo para cards flutuantes */
.nouen-ai-mockup__stage {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateX(-65px); /* desloca toda a composição para a esquerda */
}

/* Produto centralizado — portrait card flutuante */
.nouen-ai-mockup__product-wrap {
  position: relative;
  width: 45%;
  max-width: 240px;
  aspect-ratio: 3 / 4;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
  /* sem border ring */
  background: #ffffff;
  z-index: 2;
  flex-shrink: 0;
}

/* Imagens dentro do product wrap */
.nouen-ai-mockup__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  user-select: none;
  pointer-events: none;
}

.nouen-ai-mockup__img--raw {
  z-index: 1;
  transition: opacity 1.2s ease;
}

.nouen-ai-mockup__img--raw.nouen-ai-mockup__img--exit {
  opacity: 0;
}

.nouen-ai-mockup__img--clean {
  z-index: 2;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 2s ease;
}

.nouen-ai-mockup__img--clean.nouen-ai-mockup__img--revealed {
  clip-path: inset(0 0 0% 0);
}

/* Laser */
.nouen-ai-mockup__laser {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 10;
  top: -2px;
  background: linear-gradient(90deg, transparent 0%, #0993A5 20%, #7ff0ff 50%, #0993A5 80%, transparent 100%);
  box-shadow: 0 0 8px 3px rgba(9, 147, 165, 0.6), 0 0 24px 6px rgba(9, 147, 165, 0.25);
  animation: nouen-ai-laser-sweep 2s ease-in-out forwards;
}


.nouen-ai-mockup__laser--remove {
  background: linear-gradient(90deg, transparent 0%, #e1317a 20%, #ffa0c8 50%, #e1317a 80%, transparent 100%);
  box-shadow: 0 0 8px 3px rgba(225, 49, 122, 0.55), 0 0 24px 6px rgba(225, 49, 122, 0.2);
}

@keyframes nouen-ai-laser-sweep {
  0%   { top: 0%; opacity: 1; }
  95%  { top: 100%; opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

/* ---- Floating Cards ---- */
.nouen-ai-float-card {
  position: absolute;
  background: #ffffff;
  border-radius: 4px;
  padding: 10px 13px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.09), 0 0 0 1px rgba(0,0,0,0.04);
  opacity: 0;
  transform: translateY(8px) scale(0.97);
  transition: opacity 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
              transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 5;
  max-width: 29%;
  min-width: 120px;
}

.nouen-ai-float-card--in {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Posições dos 4 cards — ancoradas no centro, adjacentes ao produto */
.nouen-ai-float-card--tl { top: 60px;    left: auto; right: calc(50% + 82px); }
.nouen-ai-float-card--bl { bottom: 60px; left: auto; right: calc(50% + 102px); }
.nouen-ai-float-card--tr { top: 90px;    right: auto; left: calc(50% + 92px); }
.nouen-ai-float-card--br { bottom: 50px; right: auto; left: calc(50% + 174px); }

/* Rótulo cinza de cada card */
.nouen-ai-float-card__label {
  font-size: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #424242;
  margin: 0 0 7px;
  font-family: var(--font-label, monospace);
}

/* Grid de atributos: chave / valor */
.nouen-ai-float-card__attrs {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3px 10px;
}

.nouen-ai-float-card__attr-key {
  font-size: 0.62rem;
  color: #64748b;
  font-weight: 500;
  white-space: nowrap;
}

.nouen-ai-float-card__attr-val {
  font-size: 0.62rem;
  color: #0f172a;
  font-weight: 600;
}

/* Valor grande */
.nouen-ai-float-card__big-value {
  font-size: 0.95rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 2px;
  line-height: 1.2;
}

.nouen-ai-float-card__sub {
  font-size: 0.58rem;
  color: #94a3b8;
  margin: 0;
}

/* Checks de imagem */
.nouen-ai-float-card__checks {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nouen-ai-float-card__checks span {
  font-size: 0.62rem;
  color: #16a34a;
  font-weight: 500;
}

/* Conteúdo gerado */
.nouen-ai-float-card__title-text {
  font-size: 0.68rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 5px;
  line-height: 1.3;
}

.nouen-ai-float-card__body-text {
  font-size: 0.6rem;
  color: #475569;
  line-height: 1.5;
  margin: 0 0 5px;
}

.nouen-ai-float-card__tags-text {
  font-size: 0.58rem;
  color: #7c3aed;
  margin: 0;
  font-family: var(--font-label, monospace);
}

/* Card largo para o Conteúdo Gerado */
.nouen-ai-float-card--wide {
  min-width: 190px;
  max-width: 34%;
}

/* Score do anúncio */
.nouen-ai-desc-score {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nouen-ai-desc-score__label {
  font-size: 0.55rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #94a3b8;
  font-family: var(--font-label, monospace);
}

.nouen-ai-desc-score__row {
  display: flex;
  align-items: center;
  gap: 7px;
}

.nouen-ai-desc-score__bar {
  flex: 1;
  height: 4px;
  background: #e2e8f0;
  border-radius: 99px;
  overflow: hidden;
}

.nouen-ai-desc-score__fill {
  height: 100%;
  width: 94%;
  background: linear-gradient(90deg, #0993A5, #22c55e);
  border-radius: 99px;
  animation: nouen-ai-score-fill 1.2s cubic-bezier(0.34, 1.1, 0.64, 1) forwards;
}

@keyframes nouen-ai-score-fill {
  from { width: 0%; }
  to   { width: 94%; }
}

.nouen-ai-desc-score__value {
  font-size: 0.65rem;
  font-weight: 700;
  color: #15803d;
  white-space: nowrap;
}

/* Mecanismo recomendado */
.nouen-ai-desc-mech {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.nouen-ai-desc-mech__label {
  font-size: 0.55rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #94a3b8;
  font-family: var(--font-label, monospace);
}

.nouen-ai-desc-mech__value {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.68rem;
  font-weight: 600;
  color: #0f172a;
}

.nouen-ai-desc-mech__value .material-symbols-outlined {
  font-size: 0.85rem;
  color: var(--accent-primary);
}

/* Entidades semânticas */
.nouen-ai-desc-entities {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.nouen-ai-desc-entities__label {
  font-size: 0.55rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #94a3b8;
  font-family: var(--font-label, monospace);
}

.nouen-ai-desc-entities__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.nouen-ai-desc-entities__chips span {
  font-size: 0.58rem;
  color: #6d28d9;
  background: rgba(109, 40, 217, 0.07);
  border: 1px solid rgba(109, 40, 217, 0.18);
  padding: 2px 7px;
  border-radius: 4px;
  font-family: var(--font-label, monospace);
  letter-spacing: 0.02em;
}

/* Badges finais */
.nouen-ai-mockup__badge-row {
  position: absolute;
  right: calc(50% + 162px);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0px;
  z-index: 10;
  animation: nouen-ai-fade-in-left 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.nouen-ai-mockup__badge {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  color: #16a34a;
  letter-spacing: -0.01em;
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.72);
  padding: 2px 6px;
  border-radius: 4px;
}

@keyframes nouen-ai-fade-in-left {
  from { opacity: 0; transform: translateY(-50%) translateX(8px); }
  to   { opacity: 1; transform: translateY(-50%) translateX(0); }
}

/* Mobile: corrige composição do AiCatalogMockup */
@media (max-width: 767px) {
  /* 0. Padroniza altura de todos os mockup containers em 400px */
  .nouen-inst-solution__card-mockup {
    flex: 0 0 400px;
    height: 400px;
    min-height: 400px;
    max-height: 400px;
    overflow: hidden;
  }
  /* 0b. Card 5 (--light): anula min-height e flex do desktop */
  .nouen-inst-solution__card--light {
    min-height: unset !important;
  }
  .nouen-inst-solution__card--light .nouen-inst-solution__card-content {
    margin-top: 0;
  }
  .nouen-inst-solution__card--light .nouen-inst-solution__card-mockup {
    flex: 0 0 400px !important;
    height: 400px !important;
    min-height: 400px !important;
    max-height: 400px !important;
    align-items: stretch !important;
  }
  .nouen-inst-finance-mockup {
    height: 400px;
    min-height: 400px;
    align-self: stretch;
  }

  /* 1. Remove o translateX(-65px) do stage — era otimizado para desktop */
  .nouen-ai-mockup__stage {
    transform: none;
  }

  /* 2. Oculta todos os float cards por padrão */
  .nouen-ai-float-card {
    display: none;
  }

  /* 3. Reexibe e reposiciona apenas os cards que cabem no mobile */
  .nouen-ai-float-card--tl {
    display: block;
    top: 10px;
    left: 8px;
    right: auto;
    max-width: 200px;
    min-width: unset;
  }
  .nouen-ai-float-card--bl {
    display: block;
    bottom: 40px;
    left: 32px;
    right: auto;
    max-width: 130px;
    min-width: unset;
  }
  .nouen-ai-float-card--tr {
    display: block;
    top: 20px;
    right: 16px;
    left: auto;
    max-width: 140px;
    min-width: unset;
  }

  /* 4. --br (Conteúdo Gerado): card centralizado no stage no mobile */
  .nouen-ai-float-card--br {
    display: block;
    position: absolute;
    top: 16px;
    left: 50%;
    transform: translate(-50%, 8px) scale(0.97);
    max-width: 85%;
    min-width: unset;
    width: 85%;
    border-radius: 8px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    z-index: 20;
    /* Substitui o spring da base por ease simples */
    transition: opacity 0.5s ease, transform 0.5s ease;
  }
  .nouen-ai-float-card--br.nouen-ai-float-card--in {
    transform: translate(-50%, 0);
  }

  /* Fadeout: quando --br aparece, os outros cards e o produto somem */
  .nouen-ai-mockup__stage:has(.nouen-ai-float-card--br.nouen-ai-float-card--in) .nouen-ai-float-card--tl,
  .nouen-ai-mockup__stage:has(.nouen-ai-float-card--br.nouen-ai-float-card--in) .nouen-ai-float-card--bl,
  .nouen-ai-mockup__stage:has(.nouen-ai-float-card--br.nouen-ai-float-card--in) .nouen-ai-float-card--tr {
    opacity: 0;
  }
  .nouen-ai-mockup__stage:has(.nouen-ai-float-card--br.nouen-ai-float-card--in) .nouen-ai-mockup__product-wrap {
    opacity: 0;
    transition: opacity 0.5s ease;
  }

  /* 5. Badge row: base do overlay, animação própria para mobile */
  .nouen-ai-mockup__badge-row {
    top: auto;
    bottom: 16px;
    right: auto;
    left: 0;
    width: 100%;
    transform: none;
    flex-direction: row;
    justify-content: center;
    gap: 8px;
    z-index: 25; /* Acima do overlay */
    animation: nouen-ai-badge-mobile-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  }

  /* 6. Ancora a altura do container do card 1 no mobile */
  .nouen-inst-solution__card--span-2 .nouen-inst-solution__card-mockup {
    min-height: 400px;
    height: 400px;
  }
  .nouen-ai-mockup,
  .nouen-ai-mockup__stage {
    min-height: 400px;
    height: 400px;
  }

  /* 7. Card 1: versão mobile da descrição */
  .nouen-inst-solution__card-desc--desktop { display: none; }
  .nouen-inst-solution__card-desc--mobile  { display: block; }
}

/* Animação dos badges no mobile: fade-in simples (sem o translateY(-50%) do desktop) */
@keyframes nouen-ai-badge-mobile-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Sombra/Vignette no canto inferior direito para destacar o NOUEN AI */
.nouen-inst-solution__card-mockup--image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at bottom right, rgba(0, 0, 0, 0.65) 0%, transparent 60%);
  z-index: 1; /* Acima da imagem, abaixo do texto (z-index 2) */
  pointer-events: none;
}

.nouen-inst-solution__card-image-bg {
  position: absolute;
  inset: 0;
  background-size: cover; /* Faz o preenchimento por background, evitando bugs de proporção de <img> */
  background-position: center;
  background-repeat: no-repeat;
  transition: transform var(--transition-slow);
}

/* Texto sobreposto NOUEN AI */
.nouen-inst-solution__ai-badge {
  position: absolute;
  bottom: 24px;
  right: 36px;
  z-index: 2;
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: 1.55rem; /* Um pouco maior e imponente */
  letter-spacing: 0.045em;
  text-transform: uppercase;
  /* Gradiente reverso: apagado no começo (NOUEN) e aceso no final (AI) */
  background: linear-gradient(to right, rgba(255, 255, 255, 0.654) 0%, #ffffff 80%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.8)); /* Sombra para garantir leitura contra a imagem */
  pointer-events: none; /* Para não bloquear o hover na imagem */
  transition: transform var(--transition-slow);
}

.nouen-inst-solution__card:hover .nouen-inst-solution__ai-badge {
  transform: translateY(-4px) scale(1.05); /* Pequeno efeito de flutuação junto com a imagem */
}

.nouen-inst-solution__card:hover .nouen-inst-solution__card-image-bg {
  transform: translateY(-8px) scale(1.02);
}

/* ── Mockup Card 4: Network Graph ── */
.nouen-inst-network-mockup {
  position: relative;
  width: 100%;
  height: 100%;
  /* Fundo Rosa/Roxo sutil da NOUEN (10% a 5% de opacidade sobre base escura) */
  background: linear-gradient(135deg, rgba(255, 0, 128, 0.08) 0%, rgba(121, 40, 202, 0.04) 100%), #0a0a0a;
  overflow: hidden;
}

.nouen-inst-network-bg {
  position: absolute;
  inset: 0; 
  width: 100%;
  height: 100%;
  background-image: radial-gradient(rgba(255, 255, 255, 0.15) 1px, transparent 1px);
  background-size: 10px 10px; /* Espaço reduzido entre os pontos */
  background-position: center;
  /* Máscara radial bem mais "apertada" para o fade out nas bordas ficar óbvio */
  mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, black 0%, transparent 90%);
  -webkit-mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, black 0%, transparent 90%);
  pointer-events: none;
}

.nouen-inst-network-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.nouen-inst-network-beam {
  opacity: 0.8;
  filter: drop-shadow(0 0 4px var(--accent-primary));
}

.nouen-inst-network-spotlight {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 170px;
  height: 170px;
  background: radial-gradient(circle, rgba(9, 147, 165, 0.6) 0%, rgba(9, 147, 165, 0) 60%);
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: screen; /* Faz a cor brilhar muito mais sobre o fundo escuro */
  animation: nouen-spotlight-pulse 4s ease-in-out infinite;
}

@keyframes nouen-spotlight-pulse {
  0% { opacity: 0.6; transform: translate(-50%, -50%) scale(0.95); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.3); }
  100% { opacity: 0.6; transform: translate(-50%, -50%) scale(0.95); }
}

.nouen-inst-network-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  background: transparent;
  padding: 18px 24px;
  border-radius: 8px;
  z-index: 2;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.4s ease;
}

.nouen-inst-solution__card:hover .nouen-inst-network-center {
  transform: translate(-50%, -50%) scale(1.05);
}

.nouen-inst-network-center .material-symbols-outlined {
  color: var(--accent-primary, #0993A5);
  font-size: 28px;
}

@keyframes nouen-pulse-icon {
  0% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(1); opacity: 0.8; }
}

.nouen-inst-network-center__label {
  font-family: var(--font-headline);
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  color: #ffffff;
  font-weight: 800;
  margin-bottom: -10px; /* Puxa o valor financeiro mais para perto sem afetar o ícone em cima */
}

.nouen-inst-network-multiplier {
  position: absolute;
  bottom: 24px;
  right: 24px;
  background: rgba(10, 10, 10, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.06);
  padding: 16px;
  border-radius: 6px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 16px;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.4s ease;
}

.nouen-inst-solution__card:hover .nouen-inst-network-multiplier {
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, 0.15);
}

.nouen-inst-network-multiplier__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(9, 147, 165, 0.1);
  color: var(--accent-primary);
}

.nouen-inst-network-multiplier__icon .material-symbols-outlined {
  font-size: 20px;
}

.nouen-inst-network-multiplier__content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nouen-inst-network-multiplier__label {
  font-family: var(--font-mono, monospace);
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.nouen-inst-network-multiplier__value {
  font-family: var(--font-headline);
  font-size: 1.5rem;
  font-weight: 700;
  color: #ffffff;
  line-height: 1;
}
@media (min-width: 1024px) {
  .nouen-inst-solution__card--span-2 .nouen-inst-solution__card-mockup {
    height: 440px; /* Maior altura para exibir o formulário inteiro */
  }
  .nouen-inst-solution__card--span-1 .nouen-inst-solution__card-mockup {
    /* flex: 1 está agora global na classe base */
  }
}

.nouen-inst-solution__mockup-icon {
  font-size: 64px;
  color: rgba(255, 255, 255, 0.08);
  transition: color var(--transition-normal), transform var(--transition-normal);
}
.nouen-inst-solution__card:hover .nouen-inst-solution__mockup-icon {
  color: rgba(255, 255, 255, 0.15);
  transform: scale(1.05);
}

.nouen-inst-solution__card-content {
  padding: 24px;
  display: flex;
  flex-direction: column;
  margin-top: auto; /* Garante que o texto fique sempre no fundo */
}
@media (min-width: 1024px) {
  .nouen-inst-solution__card-content {
    padding: 40px;
  }
}

.nouen-inst-solution__card-title {
  font-family: var(--font-headline);
  font-size: 1.15rem;
  font-weight: 500; /* Peso reduzido para mais elegância */
  color: #ffffff;
  margin: 0 0 16px;
  line-height: 1.3;
}
@media (min-width: 1024px) {
  .nouen-inst-solution__card-title {
    font-size: 1.25rem; /* 20px */
  }
}

.nouen-inst-solution__card-desc {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
}
/* Visibilidade padrão: mobile oculto no desktop, desktop oculto no mobile */
@media (min-width: 768px) {
  .nouen-inst-solution__card-desc--mobile  { display: none; }
  .nouen-inst-solution__card-desc--desktop { display: block; }
}
/* Card 1: Dashboard Window Mockup (Aceternity Style) */
.nouen-inst-solution__card-mockup--bleed {
  align-items: center;
  position: relative; /* Necessário para os ícones com position absolute funcionarem */
}

.nouen-inst-dashboard-window {
  width: 85%;
  max-width: 580px;
  background: #ffffff;
  border-radius: 8px 8px 0 0;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  transition: transform var(--transition-normal);
  margin: 0 auto;
  transform: none;
  z-index: 2;
}

/* bleed: margin-top removido (efeito desativado) */
@media (min-width: 1024px) {
  .nouen-inst-dashboard-window {
    transform: scale(0.88);
  }
}
@media (max-width: 767px) {
  .nouen-inst-dashboard-window {
    zoom: 0.75;
  }
  .nouen-inst-solution__card:hover .nouen-inst-dashboard-window,
  .nouen-inst-solution__card:active .nouen-inst-dashboard-window {
    zoom: 0.75;
    transform: none;
  }
}

.nouen-inst-solution__card:hover .nouen-inst-dashboard-window {
  transform: translateY(-4px) scale(0.88);
}
@media (max-width: 767px) {
  .nouen-inst-solution__card:hover .nouen-inst-dashboard-window,
  .nouen-inst-solution__card:active .nouen-inst-dashboard-window {
    zoom: 0.75;
    transform: none;
  }
}

.nouen-inst-dashboard-window__topbar {
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  border-radius: 8px 8px 0 0;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.nouen-inst-dashboard-window__dots {
  display: flex;
  gap: 6px;
}
.nouen-inst-dashboard-window__dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #cbd5e1;
}
.nouen-inst-dashboard-window__dots span:nth-child(1) { background: #ef4444; }
.nouen-inst-dashboard-window__dots span:nth-child(2) { background: #f59e0b; }
.nouen-inst-dashboard-window__dots span:nth-child(3) { background: #22c55e; }

.nouen-inst-dashboard-window__breadcrumb {
  font-family: var(--font-label);
  font-size: 0.6rem;
  font-weight: 500; /* Peso reduzido */
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #94a3b8;
}

.nouen-inst-dashboard-window__content {
  padding: 24px;
  background: #ffffff;
}

.nouen-inst-dashboard-window__title {
  font-family: var(--font-headline);
  font-size: 1.125rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 24px;
}

.nouen-inst-dashboard-form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.nouen-inst-dashboard-field label {
  display: block;
  font-family: var(--font-label);
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #64748b;
  margin-bottom: 8px;
}

.nouen-inst-dashboard-input {
  background: #f1f5f9;
  border-radius: 4px;
  padding: 10px 12px;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  color: #475569;
}

.nouen-inst-dashboard-radios {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.nouen-inst-dashboard-radio {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  color: #334155;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  padding: 10px 12px; /* Ligeiramente mais alto para dar respiro */
  border-radius: 4px;
}

.nouen-inst-dashboard-radio .radio-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid #cbd5e1;
}

/* Animação interativa do rádio botão no hover do card */
.nouen-inst-solution__card:not(:hover) .nouen-inst-dashboard-radio:nth-child(1),
.nouen-inst-solution__card:hover .nouen-inst-dashboard-radio:nth-child(5) {
  background: rgba(37, 37, 109, 0.04);
  border-color: #25256D;
  color: #25256D;
  font-weight: 600;
}
.nouen-inst-solution__card:not(:hover) .nouen-inst-dashboard-radio:nth-child(1) .radio-dot,
.nouen-inst-solution__card:hover .nouen-inst-dashboard-radio:nth-child(5) .radio-dot {
  border-color: #25256D;
  position: relative;
}
.nouen-inst-solution__card:not(:hover) .nouen-inst-dashboard-radio:nth-child(1) .radio-dot::after,
.nouen-inst-solution__card:hover .nouen-inst-dashboard-radio:nth-child(5) .radio-dot::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 6px;
  height: 6px;
  background: #25256D;
  border-radius: 50%;
}

.nouen-inst-dashboard-radio, .radio-dot, .radio-dot::after {
  transition: all 0.3s ease;
}

/* Vertical Icon Stack (Asymmetry) */
.nouen-inst-dashboard-icon-stack {
  position: absolute;
  right: 5%;
  top: calc(50% + 10px); /* Compensa os 40px de padding-top do container para alinhar perfeito com a janela */
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 3;
}
@media (min-width: 1024px) {
  .nouen-inst-dashboard-icon-stack {
    right: 10%;
    gap: 16px;
  }
}

.nouen-inst-icon-item {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.25);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
@media (min-width: 1024px) {
  .nouen-inst-icon-item {
    width: 54px;
    height: 54px;
  }
}

.nouen-inst-icon-item .material-symbols-outlined {
  font-size: 28px; 
  transition: all 0.4s ease;
  font-variation-settings: 'wght' 200; /* Linhas mais finas e elegantes */
}
@media (min-width: 1024px) {
  .nouen-inst-icon-item .material-symbols-outlined { font-size: 36px; }
}

/* Animação dos ícones acompanhando os rádios no hover */
.nouen-inst-solution__card:not(:hover) .nouen-inst-icon-item:nth-child(1),
.nouen-inst-solution__card:hover .nouen-inst-icon-item:nth-child(5) {
  color: var(--accent-primary, #00A3C4);
  transform: translateX(-12px) scale(1.3);
  text-shadow: 0 4px 16px rgba(0, 163, 196, 0.5); /* Efeito de brilho em vez de caixa */
}

/* ─────────────────────────────────────────────────────────────
   Card 3 — Setup Progress Mockup
   Dois estados em loop: lista de progresso → success state
   ───────────────────────────────────────────────────────────── */

/* Keyframes: entrada do checkmark */
@keyframes nouen-check-pop {
  0%   { transform: scale(0) rotate(-10deg); opacity: 0; }
  60%  { transform: scale(1.2) rotate(4deg);  opacity: 1; }
  100% { transform: scale(1) rotate(0deg);    opacity: 1; }
}

/* Keyframes: entrada do step (slide + fade) */
@keyframes nouen-step-enter {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Keyframes: saída do step (fade) */
@keyframes nouen-step-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Keyframes: pulso do dot verde */
@keyframes nouen-dot-pulse {
  0%, 100% { transform: scale(1); opacity: 0.4; }
  50%       { transform: scale(1.8); opacity: 0; }
}

/* Keyframes: entrada do success state */
@keyframes nouen-success-enter {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Container do mockup ── */
.nouen-inst-setup-mockup {
  align-items: stretch;
  justify-content: stretch;
  padding: 0;
  overflow: hidden;
  background-color: #0a0a0a;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}

/* Dots desativados a pedido para teste de visualização limpa
.nouen-inst-setup-mockup::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.18) 1px, transparent 1px);
  background-size: 12px 12px;
  mask-image: radial-gradient(ellipse 58% 58% at 50% 50%, black 0%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 58% 58% at 50% 50%, black 0%, transparent 100%);
  pointer-events: none;
}
*/

/* ── Estado 1: Progress list ── */
.nouen-inst-setup-progress {
  position: absolute;
  inset: 0;
  z-index: 1; /* acima dos dots no ::before */
  overflow: hidden;
  opacity: 1;
  transition: opacity 0.95s ease; /* Fade-out mais lento (era 0.45s) */
}

.nouen-inst-setup-progress--exit {
  opacity: 0;
  pointer-events: none;
}

/* Track com posicionamento absoluto para centralização perfeita */
.nouen-inst-setup-track {
  position: absolute;
  top: 50%;
  left: 24px;
  right: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px; /* Espaçamento entre os steps */
  transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Fades de topo e base para criar a "janela" */
.nouen-inst-setup-fade {
  position: absolute;
  left: 0;
  right: 0;
  height: 64px; /* Aumentado para um fade mais longo e suave */
  pointer-events: none;
  z-index: 2;
}
.nouen-inst-setup-fade--top {
  top: 0;
  height: 96px; /* Altura exclusiva pro topo para apagar o item bem antes da borda */
  background: linear-gradient(to bottom, rgba(10, 10, 10, 1) 15%, rgba(10, 10, 10, 0) 100%);
}
.nouen-inst-setup-fade--bottom {
  bottom: 0;
  background: linear-gradient(to top, rgba(10, 10, 10, 1) 0%, rgba(10, 10, 10, 0) 100%);
}

/* ── Step row ── */
.nouen-inst-setup-step {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 40px;
  padding: 0 12px;
  border-radius: 4px;
  transition: opacity 0.55s ease, border-color 0.55s ease, background-color 0.55s ease, transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);

  /* Estado Padrão (Future / Pending) */
  opacity: 0.25;
  transform: scale(0.85);
  border: 1px solid rgba(255, 255, 255, 0.05);
  background-color: transparent;
}

/* Modificadores de Posição (Escala e Opacidade amarrados ao scroll) */
.nouen-inst-setup-step--centered {
  opacity: 1;
  transform: scale(1.04);
}
.nouen-inst-setup-step--past {
  opacity: 0.45;
  transform: scale(0.95);
}

/* Modificadores de Estado (Cores amarradas ao check) */
.nouen-inst-setup-step--completed {
  border-color: rgba(34, 197, 94, 0.2);
}
.nouen-inst-setup-step--centered.nouen-inst-setup-step--uncompleted {
  border-color: rgba(9, 147, 165, 0.4);
  background-color: rgba(9, 147, 165, 0.04);
}

/* ── Indicador Numérico (ex: 1/8) ── */
.nouen-inst-setup-step__number {
  font-family: var(--font-mono, monospace);
  font-size: 0.70rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.3);
  width: 22px;
  flex-shrink: 0;
  text-align: right;
  transition: color 0.35s ease;
}

.nouen-inst-setup-step--centered .nouen-inst-setup-step__number,
.nouen-inst-setup-step--completed .nouen-inst-setup-step__number {
  color: rgba(9, 147, 165, 0.8); /* Destaque teal no step atual e nos concluídos */
}

/* ── Label do step ── */
.nouen-inst-setup-step__label {
  flex: 1; /* Ocupa o espaço vazio empurrando o check pra direita */
  font-family: var(--font-heading); /* Manrope */
  font-size: 0.85rem;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.9);
  letter-spacing: -0.01em;
}
.nouen-inst-setup-step--uncompleted:not(.nouen-inst-setup-step--centered) .nouen-inst-setup-step__label {
  color: rgba(255, 255, 255, 0.45); /* Cor pálida para steps futuros/pendentes */
}

/* ── Ícone (Check na direita) ── */
.nouen-inst-setup-step__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0; /* Oculto até completar */
  transform: scale(0.5);
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.nouen-inst-setup-step--completed .nouen-inst-setup-step__icon {
  opacity: 1;
  transform: scale(1);
}

.nouen-inst-setup-step__check {
  font-size: 16px !important;
  font-variation-settings: 'wght' 600;
  color: #22c55e;
}

.nouen-inst-setup-step--active .nouen-inst-setup-step__dot {
  background: rgba(255, 255, 255, 0.75);
  box-shadow: 0 0 6px 2px rgba(255, 255, 255, 0.15);
}

/* ── Label do step ── */
.nouen-inst-setup-step__label {
  font-family: var(--font-body);
  font-size: 0.85rem; /* Aumentado de 0.75rem */
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.9);
  letter-spacing: -0.01em;
}
.nouen-inst-setup-step--pending .nouen-inst-setup-step__label {
  color: rgba(255, 255, 255, 0.45);
}

/* ── Estado 2: Success state ── */
.nouen-inst-setup-success {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 28px 32px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.9s ease 0.3s; /* Fade-in mais lento e um pouco atrasado (era 0.5s) */
}

.nouen-inst-setup-success--visible {
  opacity: 1;
  pointer-events: auto;
}

/* Dot verde pulsante */
.nouen-inst-setup-success__dot {
  position: relative;
  width: 10px;
  height: 10px;
  margin-bottom: 20px;
  flex-shrink: 0; /* Evita que o flexbox esmague o dot tornando-o oval */
}

.nouen-inst-setup-success__dot::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #22c55e;
}

.nouen-inst-setup-success__pulse {
  display: block;
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid #22c55e;
  opacity: 0;
}

.nouen-inst-setup-success--visible .nouen-inst-setup-success__pulse {
  animation: nouen-dot-pulse 1.8s ease-out infinite;
}

/* Heading */
.nouen-inst-setup-success__heading {
  font-family: var(--font-headline);
  font-size: 1.375rem;
  font-weight: 600;
  color: #ffffff;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 0 0 14px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s ease 0.2s, transform 0.4s ease 0.2s;
}

.nouen-inst-setup-success--visible .nouen-inst-setup-success__heading {
  opacity: 1;
  transform: translateY(0);
}

/* Body text */
.nouen-inst-setup-success__body {
  font-family: var(--font-body);
  font-size: 0.9325rem;
  font-weight: 300;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.55);
  margin: 0 0 20px;
  max-width: 240px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s ease 0.35s, transform 0.4s ease 0.35s;
}

.nouen-inst-setup-success--visible .nouen-inst-setup-success__body {
  opacity: 1;
  transform: translateY(0);
}

/* Closing line — isolada, acento teal */
.nouen-inst-setup-success__closing {
  font-family: var(--font-body);
  font-size: 0.9125rem;
  font-weight: 500;
  color: var(--accent-primary, #0993A5);
  letter-spacing: 0.01em;
  margin: 0;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s ease 0.5s, transform 0.4s ease 0.5s;
}

.nouen-inst-setup-success--visible .nouen-inst-setup-success__closing {
  opacity: 1;
  transform: translateY(0);
}

/* ── Mobile overrides para o mockup do Card 3 ── */
/* global-intencional: override mobile do setup mockup — Card 3 span-1 */
@media (max-width: 767px) {
  .nouen-inst-setup-track {
    left: 16px;
    right: 16px;
  }
  .nouen-inst-setup-step__label {
    font-size: 0.8125rem;
  }
  .nouen-inst-setup-success__heading {
    font-size: 1.375rem;
  }
  .nouen-inst-setup-success__body {
    font-size: 0.75rem;
    max-width: 210px;
  }
}

/* ── Mockup Card 5: Finance & Auto-Split (Light Mode) ── */
.nouen-inst-solution__card--light {
  min-height: 640px;
}

.nouen-inst-solution__card--light .nouen-inst-solution__card-mockup {
  background: #ffffff !important;
  flex: 1;
  min-height: 0;
  padding-top: 0;
}

.nouen-inst-finance-mockup {
  position: relative;
  width: 100%;
  height: 100%;
  background: #ffffff;
  overflow: hidden;
}

.nouen-inst-finance-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at top left, rgba(121, 40, 202, 0.18) 0%, transparent 55%),
    radial-gradient(circle at bottom right, rgba(9, 147, 165, 0.18) 0%, transparent 55%);
  pointer-events: none;
  z-index: 0;
}

/* Dashboard: ocupa quase tudo, ancorado à direita */
.nouen-inst-finance-dashboard {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 65%;
  height: auto;
  background: #ffffff;
  border-radius: 12px 0 0 12px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-right: none;
  box-shadow: -8px 8px 40px rgba(0, 0, 0, 0.07);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  z-index: 1;
}

.nouen-inst-finance-dash-topbar {
  background: #f4f4f5;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid #e4e4e7;
  flex-shrink: 0;
}

.nouen-inst-finance-dash-dots {
  display: flex;
  gap: 5px;
}

.nouen-inst-finance-dash-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #d4d4d8;
}

.nouen-inst-finance-dash-url {
  flex: 1;
  text-align: center;
  font-family: var(--font-sans);
  font-size: 0.6rem;
  color: #71717a;
  background: #ffffff;
  padding: 3px 10px;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}

.nouen-inst-finance-dash-expand {
  display: flex;
  align-items: center;
}

/* Linha abaixo do topbar: sidebar + conteúdo */
.nouen-inst-finance-dash-inner {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* Sidebar de ícones */
.nouen-inst-finance-sidebar {
  width: 48px;
  flex-shrink: 0;
  background: #f9f9f9;
  border-right: 1px solid #e4e4e7;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 0;
  gap: 8px;
}

.nouen-inst-finance-sidebar-symbol {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.nouen-inst-finance-sidebar-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin-bottom: 12px;
}

.nouen-inst-finance-sidebar-logo span {
  font-size: 0.4rem;
  font-weight: 700;
  color: var(--accent-primary);
  font-family: var(--font-headline);
  letter-spacing: 0.05em;
}

.nouen-inst-finance-sidebar-avatar {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--accent-primary);
  color: white;
  font-size: 0.65rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-headline);
}

.nouen-inst-finance-sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nouen-inst-finance-sidebar-item {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #a1a1aa;
  cursor: pointer;
  transition: background 0.2s;
}

.nouen-inst-finance-sidebar-item .material-symbols-outlined {
  font-size: 16px;
}

.nouen-inst-finance-sidebar-item.active {
  background: rgba(9, 147, 165, 0.1);
  color: var(--accent-primary);
}

/* Área da tabela */
.nouen-inst-finance-dash-body {
  flex: 1;
  padding: 20px 24px;
  overflow: hidden;
}

.nouen-inst-finance-dash-body h3 {
  font-family: var(--font-headline);
  font-size: 0.95rem;
  color: #1a1a1a;
  margin: 0 0 14px 0;
}

.nouen-inst-finance-table {
  width: 100%;
  border-collapse: collapse;
}

.nouen-inst-finance-table th {
  text-align: left;
  font-family: var(--font-sans);
  font-size: 0.6rem;
  color: #71717a;
  font-weight: 500;
  padding-bottom: 10px;
  border-bottom: 1px solid #e4e4e7;
  white-space: nowrap;
}

.nouen-inst-finance-table td {
  padding: 9px 0;
  font-family: var(--font-sans);
  font-size: 0.7rem;
  color: #3f3f46;
  border-bottom: 1px solid #f4f4f5;
  white-space: nowrap;
}

.nouen-inst-finance-table tr:last-child td {
  border-bottom: none;
}

.nouen-inst-finance-table td:first-child {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #1a1a1a;
  font-weight: 500;
}

.fm-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.55rem;
  font-weight: 700;
  flex-shrink: 0;
}

.fm-avatar--1 { background: #d97706; }
.fm-avatar--2 { background: #059669; }
.fm-avatar--3 { background: var(--accent-primary); }
.fm-avatar--4 { background: #7c3aed; }
.fm-avatar--5 { background: #dc2626; }

.fm-row--highlight td {
  background: rgba(9, 147, 165, 0.04);
}

.fm-val--target {
  color: #10b981 !important;
  font-weight: 600;
}

/* Linhas SVG de conexão */
.nouen-inst-finance-lines {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
}

.nouen-inst-finance-path-base {
  fill: none;
  stroke: rgba(9, 147, 165, 0.2);
  stroke-width: 2;
  stroke-dasharray: 4 4;
}

.nouen-inst-finance-flow-animated {
  fill: none;
  stroke: var(--accent-primary);
  stroke-width: 2.5;
  stroke-linecap: round;
  filter: drop-shadow(0 0 4px rgba(9, 147, 165, 0.5));
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  animation: finance-light-flow 5s infinite;
}

@keyframes finance-light-flow {
  0%   { stroke-dashoffset: 300; opacity: 0; }
  15%  { opacity: 1; }
  75%  { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}

/* Recibo: flutua sobre o dashboard, no canto esquerdo */
.nouen-inst-finance-receipt {
  position: absolute;
  top: 50%;
  left: 3%;
  transform: translateY(-50%);
  background: #ffffff;
  border-radius: 12px;
  padding: 16px;
  width: 260px;
  z-index: 4;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(0, 0, 0, 0.05);
}

/* Card de confirmação: ligeiramente mais alto */
.fm-receipt--confirmation {
  top: 42%;
}

.nouen-inst-finance-receipt-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.nouen-inst-finance-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent-primary);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-family: var(--font-headline);
  font-size: 0.8rem;
  flex-shrink: 0;
}

.nouen-inst-finance-market-name {
  font-family: var(--font-headline);
  font-weight: 700;
  color: #1a1a1a;
  font-size: 0.8rem;
}

.nouen-inst-finance-receipt-msg {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  color: #52525b;
  margin-bottom: 16px;
  line-height: 1.4;
}

.nouen-inst-finance-receipt-row {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-sans);
  font-size: 0.68rem;
  color: #71717a;
  padding: 6px 0;
  border-bottom: 1px solid #f4f4f5;
}

.nouen-inst-finance-receipt-row .bold {
  color: #1a1a1a;
  font-weight: 500;
}

.nouen-inst-finance-receipt-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
  font-family: var(--font-headline);
  font-weight: 700;
  color: #1a1a1a;
  font-size: 0.85rem;
}

.nouen-inst-finance-total-val {
  color: #10b981;
}

/* Linha do comprador ativa na fase de confirmação */
.fm-row--active td {
  background: rgba(9, 147, 165, 0.07);
  transition: background 0.4s ease;
}



/* Fade animation entre os dois estados do card */
.fm-visible {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.fm-hidden {
  opacity: 0;
  transform: translateY(-50%) translateX(-8px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

/* Subtítulo do mercado no header do recibo */
.fm-market-sub {
  font-family: var(--font-sans);
  font-size: 0.6rem;
  color: #71717a;
  margin-top: 1px;
}

/* Seção label */
.fm-section-label {
  font-family: var(--font-headline);
  font-size: 0.58rem;
  font-weight: 700;
  color: #1a1a1a;
  margin: 12px 0 8px 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Métodos de pagamento */
.fm-payment-methods {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.fm-payment-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1.5px solid #e4e4e7;
  font-family: var(--font-sans);
  font-size: 0.7rem;
  color: #52525b;
  cursor: pointer;
}

.fm-payment-option--selected {
  border-color: var(--accent-primary);
  background: rgba(9, 147, 165, 0.04);
}

.fm-radio {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1.5px solid #d4d4d8;
  flex-shrink: 0;
}

.fm-radio--selected {
  border-color: var(--accent-primary);
  background: radial-gradient(circle, var(--accent-primary) 45%, transparent 45%);
}

.fm-payment-label {
  flex: 1;
}

.fm-payment-badge--pix {
  font-size: 0.55rem;
  font-weight: 700;
  background: #10b981;
  color: white;
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.05em;
  font-family: var(--font-headline);
}

/* Botão de pagamento */
.fm-pay-button {
  margin-top: 14px;
  width: 100%;
  padding: 10px;
  background: var(--accent-primary);
  color: #ffffff;
  border: none;
  border-radius: 8px;
  font-family: var(--font-headline);
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s ease;
}

.fm-pay-button:hover {
  background: #077a8a;
}

/* Badge de sucesso */
.fm-success-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-size: 0.7rem;
  color: #10b981;
  font-weight: 600;
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.2);
  border-radius: 6px;
  padding: 6px 10px;
  margin: 10px 0 12px 0;
}

.fm-success-badge .material-symbols-outlined {
  font-size: 14px;
}

/* ═══════════════════════════════════════════════════════════════
   Card 6 — KYC Shield Mockup
   Layout: anel SVG orbital + escudo central + 3 badges sequenciais
   + overlay "KYC Concluído" — tudo CSS puro, ciclo de 9s
   ═══════════════════════════════════════════════════════════════ */

/* ── Container do mockup ── */
.nouen-inst-kyc-mockup {
  position: relative;
  align-items: center;
  justify-content: center;
  background: #080808;
  overflow: hidden;
  min-height: 260px;
  /* Dot grid de fundo sutil */
}

.nouen-inst-kyc-mockup::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(9, 147, 165, 0.12) 1px, transparent 1px);
  background-size: 18px 18px;
  mask-image: radial-gradient(ellipse 65% 65% at 50% 50%, black 0%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 65% 65% at 50% 50%, black 0%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}

/* ── Anel SVG orbital ── */
.nouen-inst-kyc-ring {
  position: absolute;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 200px;
  z-index: 1;
  pointer-events: none;
  animation: nouen-kyc-ring-spin 9s linear infinite;
}

@keyframes nouen-kyc-ring-spin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Arc animado: inicia pequeno (dash quase zero), cresce até dar a volta completa */
.nouen-inst-kyc-ring__arc {
  stroke-dashoffset: 390;
  animation: nouen-kyc-arc-fill 9s ease-in-out infinite;
  filter: drop-shadow(0 0 5px rgba(9, 147, 165, 0.7));
  transform-origin: center;
}

@keyframes nouen-kyc-arc-fill {
  0%   { stroke-dashoffset: 390; opacity: 0.4; }
  5%   { opacity: 1; }
  55%  { stroke-dashoffset: 0;   opacity: 1; }
  72%  { stroke-dashoffset: 0;   opacity: 1; }
  80%  { stroke-dashoffset: 0;   opacity: 0; }
  100% { stroke-dashoffset: 390; opacity: 0; }
}

/* ── Escudo central ── */
.nouen-inst-kyc-shield {
  position: absolute;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nouen-inst-kyc-shield__icon {
  font-size: 56px;
  color: var(--accent-primary, #0993A5);
  font-variation-settings: 'FILL' 0, 'wght' 200;
  filter: drop-shadow(0 0 16px rgba(9, 147, 165, 0.45));
  animation: nouen-kyc-shield-pulse 9s ease-in-out infinite;
  transition: transform 0.4s ease;
}

.nouen-inst-solution__card:hover .nouen-inst-kyc-shield__icon {
  transform: scale(1.08);
}

@keyframes nouen-kyc-shield-pulse {
  0%   { opacity: 0.6; filter: drop-shadow(0 0 8px rgba(9, 147, 165, 0.3)); }
  30%  { opacity: 1;   filter: drop-shadow(0 0 20px rgba(9, 147, 165, 0.7)); }
  70%  { opacity: 1;   filter: drop-shadow(0 0 20px rgba(34, 197, 94, 0.7)); color: #22c55e; }
  78%  { opacity: 0; }
  85%  { opacity: 0; }
  100% { opacity: 0.6; filter: drop-shadow(0 0 8px rgba(9, 147, 165, 0.3)); color: var(--accent-primary); }
}

/* ── Pulse ring de aprovação (verde, emana do escudo) ── */
.nouen-inst-kyc-pulse {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 2px solid #22c55e;
  pointer-events: none;
  animation: nouen-kyc-pulse-ring 9s ease-out infinite;
}

@keyframes nouen-kyc-pulse-ring {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(1); }
  68%  { opacity: 0; transform: translate(-50%, -50%) scale(1); }
  72%  { opacity: 0.9; transform: translate(-50%, -50%) scale(1); }
  82%  { opacity: 0; transform: translate(-50%, -50%) scale(2.2); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1); }
}

/* ── Container dos badges ── */
.nouen-inst-kyc-badges {
  position: absolute;
  bottom: 24px;
  left: 16px;
  right: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 3;
  pointer-events: none;
}

/* ── Badge base ── */
.nouen-inst-kyc-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(10, 10, 10, 0.75);
  border: 1px solid rgba(9, 147, 165, 0.2);
  border-radius: 6px;
  padding: 8px 10px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  /* Estado inicial: invisível e deslocado */
  opacity: 0;
  transform: translateX(-10px);
}

.nouen-inst-kyc-badge__icon {
  font-size: 15px;
  color: rgba(9, 147, 165, 0.8);
  flex-shrink: 0;
  font-variation-settings: 'wght' 300;
}

.nouen-inst-kyc-badge__label {
  flex: 1;
  font-family: var(--font-mono, monospace);
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.75);
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.nouen-inst-kyc-badge__check {
  font-size: 14px;
  color: #22c55e;
  flex-shrink: 0;
  font-variation-settings: 'FILL' 1, 'wght' 400;
}

/* ── Animações de entrada/saída dos badges (ciclo 9s) ──
   Badge 1: entra em ~20% (1.8s), sai em ~80% (7.2s)
   Badge 2: entra em ~35% (3.15s), sai em ~80%
   Badge 3: entra em ~50% (4.5s), sai em ~80%
   ── */

@keyframes nouen-kyc-badge-1 {
  0%    { opacity: 0; transform: translateX(-10px); }
  20%   { opacity: 0; transform: translateX(-10px); }
  28%   { opacity: 1; transform: translateX(0); }
  72%   { opacity: 1; transform: translateX(0); }
  80%   { opacity: 0; transform: translateX(8px); }
  100%  { opacity: 0; transform: translateX(-10px); }
}

@keyframes nouen-kyc-badge-2 {
  0%    { opacity: 0; transform: translateX(-10px); }
  35%   { opacity: 0; transform: translateX(-10px); }
  43%   { opacity: 1; transform: translateX(0); }
  72%   { opacity: 1; transform: translateX(0); }
  80%   { opacity: 0; transform: translateX(8px); }
  100%  { opacity: 0; transform: translateX(-10px); }
}

@keyframes nouen-kyc-badge-3 {
  0%    { opacity: 0; transform: translateX(-10px); }
  50%   { opacity: 0; transform: translateX(-10px); }
  58%   { opacity: 1; transform: translateX(0); }
  72%   { opacity: 1; transform: translateX(0); }
  80%   { opacity: 0; transform: translateX(8px); }
  100%  { opacity: 0; transform: translateX(-10px); }
}

.nouen-inst-kyc-badge--1 { animation: nouen-kyc-badge-1 9s ease-in-out infinite; }
.nouen-inst-kyc-badge--2 { animation: nouen-kyc-badge-2 9s ease-in-out infinite; }
.nouen-inst-kyc-badge--3 { animation: nouen-kyc-badge-3 9s ease-in-out infinite; }

/* ── Overlay "KYC Concluído" ── */
.nouen-inst-kyc-approved {
  position: absolute;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: max-content;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  animation: nouen-kyc-approved-flash 9s ease-in-out infinite;
}

.nouen-inst-kyc-approved .material-symbols-outlined {
  font-size: 40px;
  color: #22c55e;
  font-variation-settings: 'FILL' 1, 'wght' 400;
  filter: drop-shadow(0 0 16px rgba(34, 197, 94, 0.6));
}

.nouen-inst-kyc-approved__label {
  font-family: var(--font-headline);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #22c55e;
}

@keyframes nouen-kyc-approved-flash {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.85); }
  70%  { opacity: 0; transform: translate(-50%, -50%) scale(0.85); }
  76%  { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
  82%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  90%  { opacity: 0; transform: translate(-50%, -50%) scale(0.95); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0.85); }
}

/* Hover: leve elevação nos badges */
.nouen-inst-solution__card:hover .nouen-inst-kyc-badge {
  border-color: rgba(9, 147, 165, 0.35);
}

/* ═══════════════════════════════════════════════════════════════
   Seção: SectionEcosystem — O Efeito de Rede
   ═══════════════════════════════════════════════════════════════ */

/* ── Wrapper da seção ── */
.nouen-inst-ecosystem {
  background: #f8fafc;
  padding: 64px 0 80px;
  position: relative;
  overflow: hidden;
}
@media (min-width: 1024px) {
  .nouen-inst-ecosystem {
    padding: 80px 0 100px;
  }
}

.nouen-inst-ecosystem::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(to right, transparent 0%, rgba(9, 147, 165, 0.18) 50%, transparent 100%);
}

.nouen-inst-ecosystem__inner {
  max-width: var(--max-width, 1280px);
  margin: 0 auto;
  padding: 0 16px;
}
@media (min-width: 1024px) {
  .nouen-inst-ecosystem__inner {
    padding: 0 var(--container-padding, 48px);
  }
}

/* ── Header ── */
.nouen-inst-ecosystem__header {
  max-width: 960px;
  margin: 0 auto 56px;
  text-align: center;
}
.nouen-inst-ecosystem__eyebrow {
  display: inline-block;
  font-family: var(--font-label, monospace);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.075em;
  text-transform: uppercase;
  color: var(--accent-primary, #0993A5);
  margin-bottom: 16px;
}
@media (max-width: 767px) {
  .nouen-inst-ecosystem__eyebrow { font-size: 0.7rem; }
}
.nouen-inst-ecosystem__title {
  font-family: var(--font-headline);
  font-size: 1.4rem;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 0 auto 12px; /* Igual à section Solution no mobile */
  max-width: 650px;
}
@media (min-width: 768px) {
  .nouen-inst-ecosystem__title {
    font-size: 2.65rem;
    margin: 0 auto 24px; /* Igual à section Solution no desktop */
  }
}
.nouen-inst-ecosystem__subtitle {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.5;
  color: #475569;
  margin: 0;
  max-width: 840px;
  text-wrap: balance;
}
@media (min-width: 768px) {
  .nouen-inst-ecosystem__subtitle {
    font-family: var(--font-headline);
    font-size: 1.225rem;
    letter-spacing: normal;
    margin: 0 auto;
  }
}

/* ── Diagrama Losango (SVG e CSS) ── */
/* Wrapper neutro no desktop */
.nouen-inst-eco-diagram-scroll__hint {
  display: none;
}
/* SVG mobile-only L1: oculto no desktop */
.nouen-inst-eco-l1-mobile-svg {
  display: none;
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  overflow: visible;
}
.nouen-inst-eco-diagram {
  margin-bottom: 24px;
}

/* Subtitle mobile/desktop: padrão desktop = longo visível, curto oculto */
.nouen-inst-ecosystem__subtitle--mobile { display: none; }
.nouen-inst-ecosystem__subtitle--desktop { display: inline; }

/* ── Mobile: Scroll horizontal do diagrama ── */
@media (max-width: 767px) {
  /* Wrapper scrollável */
  .nouen-inst-eco-diagram-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -20px;
    padding: 0 20px 8px;
    isolation: isolate;
    z-index: 10;
    position: relative;
  }
  /* Dica de scroll — visível apenas no mobile */
  .nouen-inst-eco-diagram-scroll__hint {
    display: block;
    text-align: center;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.35);
    letter-spacing: 0.08em;
    margin-bottom: 12px;
  }
  /* Subtitle: no mobile mostrar versão curta, ocultar longa */
  .nouen-inst-ecosystem__subtitle--mobile {
    display: inline;
  }
  .nouen-inst-ecosystem__subtitle--desktop {
    display: none;
  }
  .nouen-inst-eco-diagram {
    min-width: 680px;
  }
  /* L1: ocultar SVG connectors originais mas manter defs no DOM (gradientes acessíveis) */
  .nouen-inst-eco-diagram__row--inputs-hub .nouen-inst-eco-svg-wrap {
    visibility: hidden;
    flex: 0 0 0px !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  /* L1: row com position relative para o SVG absoluto funcionar */
  .nouen-inst-eco-diagram__row--inputs-hub {
    position: relative;
  }
  /* L1: SVG mobile-only visível */
  .nouen-inst-eco-l1-mobile-svg {
    display: block;
  }
  /* Nós: padding reduzido */
  .nouen-inst-eco-node {
    padding: 16px 10px !important;
  }
  /* Ícone: container menor */
  .nouen-inst-eco-node__icon-wrap {
    width: 44px !important;
    height: 44px !important;
    margin-bottom: 4px !important;
  }
  /* Ícone: fonte menor */
  .nouen-inst-eco-node__icon-wrap .material-symbols-outlined {
    font-size: 28px !important;
  }
  /* Conector vertical Hub→UCs */
  .nouen-inst-eco-svg-wrap--vertical {
    height: 10px !important;
  }
  /* Bus bars inline: reduzir com !important */
  .nouen-inst-eco-anim--6 .nouen-inst-eco-svg-wrap,
  .nouen-inst-eco-anim--7 .nouen-inst-eco-svg-wrap {
    height: 32px !important;
  }
  /* Paths SVG: mais visíveis no mobile */
  .eco-path-base {
    stroke: rgba(9, 147, 165, 0.45);
    stroke-width: 1.5px;
  }
  .eco-path-pulse {
    stroke-width: 3px;
  }
  /* L3b: reposicionar satélites Mecanismos e Condutores */
  .nouen-inst-eco-node--satellite {
    top: -12px !important;
  }
  /* Mecanismos: 4º filho do trio grid — reduzir left */
  .nouen-inst-eco-diagram__row--trio > :nth-child(4) {
    left: 50px !important;
  }
  /* Condutores: 6º filho do trio grid — reduzir right */
  .nouen-inst-eco-diagram__row--trio > :nth-child(6) {
    right: 50px !important;
  }
  /* L4 bus bar: reposicionar entradas Mecanismos e Condutores no mobile */
  .eco-bus-entry-left {
    d: path('M 10 0 L 10 50');
  }
  .eco-bus-entry-right {
    d: path('M 90 0 L 90 50');
  }
  /* L7 Rede Ampliada: ocultar pills no mobile */
  .nouen-inst-eco-network-pills {
    display: none !important;
  }
  /* L7 Rede Ampliada: centralizar conteúdo sem os pills */
  .nouen-inst-eco-node--network {
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
  }
  /* L1: tooltips abrem para BAIXO (scroll container clipa overflow vertical) */
  /* Elevar stacking context apenas quando tooltip está ativa (hover/tap) */
  .nouen-inst-eco-node--input:hover,
  .nouen-inst-eco-node--hub:hover {
    z-index: 20;
  }
  /* Caixa do tooltip: posição abaixo do nó */
  .nouen-inst-eco-node--input[data-tooltip]::after,
  .nouen-inst-eco-node--hub[data-tooltip]::after {
    bottom: unset !important;
    top: calc(100% + 12px) !important;
    transform: translateX(-50%) translateY(-10px) !important;
    z-index: 9999 !important;
  }
  /* Seta: ▲ apontando PARA CIMA (de volta ao nó, acima da caixa) */
  .nouen-inst-eco-node--input[data-tooltip]::before,
  .nouen-inst-eco-node--hub[data-tooltip]::before {
    bottom: unset !important;
    top: calc(100% + 4px) !important;
    border-width: 0 8px 8px !important;
    border-color: transparent transparent #0f172a transparent !important;
    transform: translateX(-50%) translateY(-10px) !important;
    z-index: 9999 !important;
  }
  /* Hover: animação entra de baixo para cima */
  .nouen-inst-eco-node--input[data-tooltip]:hover::after,
  .nouen-inst-eco-node--input[data-tooltip]:hover::before,
  .nouen-inst-eco-node--hub[data-tooltip]:hover::after,
  .nouen-inst-eco-node--hub[data-tooltip]:hover::before {
    transform: translateX(-50%) translateY(0) !important;
  }
}

.nouen-inst-eco-anim {
  opacity: 0;
  animation: eco-diagram-reveal 0.6s ease forwards;
}
.nouen-inst-eco-anim--1 { animation-delay: 0.1s; }
.nouen-inst-eco-anim--2 { animation-delay: 0.25s; }
.nouen-inst-eco-anim--3 { animation-delay: 0.4s; }
.nouen-inst-eco-anim--4 { animation-delay: 0.55s; }
.nouen-inst-eco-anim--5 { animation-delay: 0.7s; }
.nouen-inst-eco-anim--6 { animation-delay: 0.85s; }
.nouen-inst-eco-anim--7 { animation-delay: 1.0s; }

@keyframes eco-diagram-reveal {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Linhas de fluxo (SVG Pulses) ── */
.nouen-inst-eco-svg-wrap {
  position: relative;
  overflow: visible;
}
.nouen-inst-eco-svg-wrap svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.eco-path-base {
  fill: none;
  stroke: rgba(9, 147, 165, 0.2);
  stroke-width: 1px;
}
.eco-path-pulse {
  fill: none;
  stroke-width: 2px;
  stroke-dasharray: 120 300;
  stroke-dashoffset: 0;
  animation: eco-dash-travel 2.5s linear infinite;
  animation-play-state: paused;
  will-change: stroke-dashoffset;
}
.is-in-view .eco-path-pulse {
  animation-play-state: running;
}

@keyframes eco-dash-travel {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -420; }
}


@keyframes eco-bus-glow-pulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.8; }
}
.eco-path-glow-pulse {
  animation: eco-bus-glow-pulse 2.5s ease-in-out infinite;
}

/* ── Aura Atmosférica (Mesh Gradient) ── */
.nouen-inst-eco-aura-bg {
  position: absolute;
  top: 40%;
  bottom: -48px;
  left: 0;
  right: 0;
  z-index: 0;
  pointer-events: none;
  overflow: visible;
}
.nouen-inst-eco-aura__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.15;
  animation: eco-aura-breathe 8s infinite alternate ease-in-out;
}
.nouen-inst-eco-aura__blob--cyan {
  top: 20%; left: 5%; width: 200px; height: 200px;
  background: var(--accent-primary);
  animation-delay: 0s;
}
.nouen-inst-eco-aura__blob--purple {
  top: 40%; left: 40%; width: 300px; height: 200px;
  background: #634eda;
  animation-delay: -3s;
}
.nouen-inst-eco-aura__blob--pink {
  top: 30%; right: 5%; width: 250px; height: 200px;
  background: #ec4899;
  animation-delay: -6s;
}

@keyframes eco-aura-breathe {
  0% { transform: scale(1) translate(0, 0); opacity: 0.12; }
  100% { transform: scale(1.3) translate(20px, -20px); opacity: 0.25; }
}

/* Row 1: Inputs & Hub */
.nouen-inst-eco-diagram__row--inputs-hub {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  gap: 8px;
}


.nouen-inst-eco-diagram__row--inputs-hub .nouen-inst-eco-node--input {
  margin-top: 24px;
}
.nouen-inst-eco-diagram__row--inputs-hub .nouen-inst-eco-node--hub {
  margin-top: 0;
}
.nouen-inst-eco-diagram__row--inputs-hub .nouen-inst-eco-svg-wrap {
  flex: 1;
  height: 96px;
}

/* Outras Rows e SVGs */
.nouen-inst-eco-diagram__row {
  display: flex;
  justify-content: center;
}
.nouen-inst-eco-diagram__row--center {
  justify-content: center;
}
.nouen-inst-eco-diagram__row--trio {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  width: 100%;
}
.nouen-inst-eco-diagram__row--network {
  width: 100%;
}

.nouen-inst-eco-svg-wrap--vertical {
  height: 16px;
  width: 100%; 
}
.nouen-inst-eco-svg-wrap--trio,
.nouen-inst-eco-svg-wrap--trio-parallel {
  height: 16px;
  width: 66.666%;
  margin: 0 auto;
}

/* ── Nodes (Células) ── */
.nouen-inst-eco-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: transparent;          /* sem caixa */
  border: 1px solid transparent;    /* mantém layout, sem borda visível */
  border-radius: 12px;
  padding: 24px 16px;
  gap: 6px;
  transition: transform 0.3s ease;
  position: relative;
}
.nouen-inst-eco-node:hover {
  transform: translateY(-2px);
}

.nouen-inst-eco-node__icon-wrap {
  width: 56px;
  height: 56px;
  border-radius: 10px;
  background: rgba(9, 147, 165, 0.07);
  border: 1px solid rgba(9, 147, 165, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  transition: background 0.3s ease;
}
.nouen-inst-eco-node:hover .nouen-inst-eco-node__icon-wrap {
  background: rgba(9, 147, 165, 0.12);
}
.nouen-inst-eco-node__icon-wrap .material-symbols-outlined {
  font-size: 40px;
  color: var(--accent-primary);
  font-variation-settings: 'wght' 300;
}

.nouen-inst-eco-node__label {
  font-family: var(--font-headline);
  font-size: 1rem;
  font-weight: 600;
  color: #0f172a;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

/* Custom Tooltip System */
.nouen-inst-eco-node[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: #0f172a;
  color: #ffffff;
  padding: 8px 12px;
  border-radius: 6px;
  font-family: var(--font-label);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
  width: max-content;
  max-width: 220px;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  z-index: 100;
}

/* Header da seção — two-column */
.nouen-clusters-strip__header {
  margin-bottom: 40px;
}

.nouen-clusters-strip__header-cols {
  display: flex;
  align-items: flex-start;
  gap: 48px;
}

.nouen-clusters-strip__header-left {
  flex: 0 0 auto;
  max-width: 560px;
}

.nouen-clusters-strip__header-right {
  flex: 1;
  text-align: right;
}

@media (max-width: 1024px) {
  .nouen-clusters-strip__header {
    margin-bottom: 28px;
  }
  .nouen-clusters-strip__header-cols {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px; /* Reduzido de 16px para ter exatamente 12px de distância, já que a margin do title foi zerada */
  }
  .nouen-clusters-strip__header-right {
    text-align: left;
  }
}

.nouen-inst-eco-node[data-tooltip]::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  border-width: 8px 8px 0;
  border-style: solid;
  border-color: #0f172a transparent transparent transparent;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 100;
}
.nouen-inst-eco-node[data-tooltip]:hover::after,
.nouen-inst-eco-node[data-tooltip]:hover::before {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.nouen-inst-eco-node__sub {
  font-family: var(--font-label);
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: #94a3b8;
  text-transform: lowercase;
}

/* Input Nodes */
.nouen-inst-eco-node--input {
  width: 240px;
  flex-shrink: 0;
}

/* Hub */
.nouen-inst-eco-node--hub {
  width: 320px;
  min-height: 185px;            /* garante ser o elemento mais alto da row */
  justify-content: center;      /* centraliza conteúdo verticalmente */
  background: #0f172a;
  border-color: rgba(9, 147, 165, 0.3);
  box-shadow: 0 0 0 1px rgba(9, 147, 165, 0.1), 0 16px 48px rgba(9, 147, 165, 0.12);
  overflow: visible; /* to allow glow */
  padding-bottom: 24px; /* restaura padding simétrico */
}
.nouen-inst-eco-node--hub:hover {
  border-color: rgba(9, 147, 165, 0.5);
  box-shadow: 0 0 0 1px rgba(9, 147, 165, 0.25), 0 20px 56px rgba(9, 147, 165, 0.2);
  transform: translateY(-2px);
}
.nouen-inst-eco-node__label--hub {
  color: #ffffff;
  font-size: 1.05rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.nouen-inst-eco-node__icon-wrap--hub {
  background: #0f172a;
  border: 2px solid var(--accent-primary);
  width: 72px;
  height: 72px;
  border-radius: 50%;
  margin-bottom: 12px;
}
.nouen-inst-eco-node__icon-wrap--hub .material-symbols-outlined {
  font-size: 32px;
}
.nouen-inst-eco-node__hub-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(9, 147, 165, 0.35) 0%, transparent 70%);
  pointer-events: none;
  animation: eco-hub-glow 3s ease-in-out infinite;
  animation-play-state: paused;
  z-index: -1;
}
.is-in-view .nouen-inst-eco-node__hub-glow {
  animation-play-state: running;
}
@keyframes eco-hub-glow {
  0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }
  50%       { opacity: 1; transform: translate(-50%, -50%) scale(1.15); }
}

/* UCs */
.nouen-inst-eco-node--ucs {
  width: 280px;
}

/* AI */
.nouen-inst-eco-node--ai {
}
.nouen-inst-eco-node--ai .nouen-inst-eco-node__icon-wrap {
  background: rgba(99, 78, 218, 0.08);
  border-color: rgba(99, 78, 218, 0.2);
}
.nouen-inst-eco-node--ai .nouen-inst-eco-node__icon-wrap .material-symbols-outlined {
  color: #634eda;
}

/* Mercado Local (Destaque Principal) */
.nouen-inst-eco-node--market {
  transform: scale(1.35);
  z-index: 2;
  position: relative;
}
.nouen-inst-eco-node--market .nouen-inst-eco-node__icon-wrap {
  background: linear-gradient(135deg, #0993A5, #634eda);
  border: none;
  box-shadow: 0 8px 24px rgba(99, 78, 218, 0.25);
  transform: scale(1.1);
}
.nouen-inst-eco-node--market:hover .nouen-inst-eco-node__icon-wrap {
  background: linear-gradient(135deg, #0aa8bd, #745df5);
  box-shadow: 0 12px 32px rgba(99, 78, 218, 0.4);
}
.nouen-inst-eco-node--market .nouen-inst-eco-node__icon-wrap .material-symbols-outlined {
  color: #ffffff;
}
.nouen-inst-eco-node--market .nouen-inst-eco-node__label {
  font-weight: 700;
  margin-top: 4px;
}

/* Network */
.nouen-inst-eco-node--network {
  width: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 32px;
  background: #0f172a;
  border: none;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  text-align: center;
  position: relative;
}
/* Inset gradient border ring — positioned inside the dark card */
.nouen-inst-eco-node__network-inset-border {
  position: absolute;
  inset: 8px;
  border-radius: 10px;
  padding: 1px;
  background: linear-gradient(90deg, #0993A5 0%, #634eda 50%, #ec4899 100%);
  -webkit-mask: 
     linear-gradient(#fff 0 0) content-box, 
     linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
}

.nouen-inst-eco-node--network:hover {
  transform: none;
}
.nouen-inst-eco-node--network .nouen-inst-eco-node__label {
  color: #ffffff;
  font-size: 1.1rem;
}
.nouen-inst-eco-node--network .nouen-inst-eco-node__sub {
  color: rgba(255,255,255,0.4);
}
.nouen-inst-eco-node__icon-wrap--network {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  flex-shrink: 0;
}


/* ══════════════════════════════════════════════
   REDE AMPLIADA — Layout 3 colunas (pills | center | pills)
══════════════════════════════════════════════ */
.nouen-inst-eco-node--network {
  flex-direction: row !important;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 28px 32px;
  min-height: 160px;
}

/* Grupo de pílulas (esquerda ou direita) */
.nouen-inst-eco-network-pills {
  display: flex;
  flex-direction: row;
  gap: 8px;
  flex: 1;
  align-items: center;
  justify-content: center;  /* centraliza os blocos nos seus espaços */
  flex-wrap: nowrap;
}

/* Pílula (Estilo Dot + Text Aura) */
.nouen-inst-eco-network-pill {
  position: relative;
  background: transparent;
  border: none;
  padding: 4px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  font-size: 0.68rem;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255,255,255,0.4);
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
  font-family: inherit;
  line-height: 1;
}

/* O "Dot" (ponto) */
.nouen-inst-eco-network-pill::before {
  content: '';
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--cluster-color, #fff);
  opacity: 0;
  transition: opacity 0.3s ease, box-shadow 0.3s ease;
}

.nouen-inst-eco-network-pill:hover {
  color: rgba(255,255,255,0.7);
}

.nouen-inst-eco-network-pill--active {
  color: var(--cluster-color, #fff);
  font-weight: 500;
  text-shadow: 0 0 12px color-mix(in srgb, var(--cluster-color, #fff) 60%, transparent);
}

.nouen-inst-eco-network-pill--active::before {
  opacity: 1;
  box-shadow: 0 0 8px var(--cluster-color, #fff);
}

/* "Traga o seu" — não-interativo, estilo diferente */
.nouen-inst-eco-network-pill--open {
  cursor: default;
  color: rgba(255,255,255,0.3);
  font-style: italic;
  padding-top: 18px; /* para alinhar visualmente sem o dot */
}

.nouen-inst-eco-network-pill--open:hover {
  color: rgba(255,255,255,0.3);
}

.nouen-inst-eco-network-pill--open::before {
  display: none;
}

/* Centro identidade */
.nouen-inst-eco-network-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  flex-shrink: 0;
}

.nouen-inst-eco-node--network .nouen-inst-eco-node__label {
  font-size: 0.95rem;
  margin: 0;
}

/* ══════════════════════════════════════════════
   CLUSTER SECTION
══════════════════════════════════════════════ */
/* ================================================
   CLUSTERS STRIP — Nova seção independente
   ================================================ */

.nouen-clusters-strip {
  padding: 80px 0 0;
}


.nouen-clusters-strip__eyebrow {
  display: inline-block;
  font-family: var(--font-label, monospace);
  font-size: 0.75rem;
  letter-spacing: 0.075em;
  color: var(--accent-primary, #0993A5);
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 16px;
}
@media (max-width: 767px) {
  .nouen-clusters-strip__eyebrow { font-size: 0.7rem; }
}

.nouen-clusters-strip__title {
  font-family: var(--font-headline);
  font-size: 1.4rem;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 0; /* Zerado para não somar com o gap flexível da coluna */
}
@media (min-width: 768px) {
  .nouen-clusters-strip__title {
    font-size: 2.25rem;
  }
}

.nouen-clusters-strip__subtitle {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.4;
  color: #475569;
  margin: 0 0 0 auto;
  max-width: 640px;
  text-wrap: balance;
}
/* Subtitle mobile/desktop: padrão desktop = longo visível, curto oculto */
.nouen-clusters-strip__subtitle--mobile { display: none; }
.nouen-clusters-strip__subtitle--desktop { display: inline; }

@media (max-width: 767px) {
  .nouen-clusters-strip__subtitle--mobile { display: inline; }
  .nouen-clusters-strip__subtitle--desktop { display: none; }
}
@media (min-width: 768px) {
  .nouen-clusters-strip__subtitle {
    font-family: var(--font-headline);
    font-size: 1.125rem;
    letter-spacing: normal;
  }
}

/* Scroll container */
.nouen-clusters-strip__scroll-wrap {
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 24px;
}
.nouen-clusters-strip__scroll-wrap::-webkit-scrollbar {
  display: none;
}
@media (max-width: 767px) {
  .nouen-clusters-strip__scroll-wrap {
    padding-bottom: 20px;
  }
}

/* Track (fila de items) */
.nouen-clusters-strip__track {
  display: flex;
  gap: 16px;
  width: max-content;
}

/* Item = card + meta abaixo */
.nouen-clusters-strip__item {
  width: 300px;
  flex-shrink: 0;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
@media (max-width: 767px) {
  .nouen-clusters-strip__item {
    width: 92vw;
    max-width: 300px;
  }
}

/* Card (imagem, 3:4) */
.nouen-clusters-strip__card {
  aspect-ratio: 3 / 4;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: flex-end;
  padding: 16px;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.nouen-clusters-strip__card:hover {
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
  transform: translateY(-3px);
}

.nouen-clusters-strip__card:hover .nouen-clusters-strip__card-img {
  transform: scale(1.05);
}

.nouen-clusters-strip__card-img {
  object-fit: cover;
  z-index: 0;
  transition: transform 0.7s ease;
}

/* Card CTA — Traga o Seu */
.nouen-clusters-strip__card--cta {
  background: transparent !important;
  border: 1.5px dashed var(--border-subtle, #e2e8f0);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
  cursor: pointer;
}

.nouen-clusters-strip__card--cta:hover {
  border-color: var(--accent-primary, #0993A5);
  box-shadow: 0 12px 40px rgba(9, 147, 165, 0.1);
  transform: translateY(-3px);
}

.nouen-clusters-strip__cta-icon {
  font-size: 2rem;
  color: var(--accent-primary, #0993A5);
  line-height: 1;
}

.nouen-clusters-strip__cta-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-secondary, #64748b);
  text-align: center;
  line-height: 1.3;
}

/* Meta abaixo do card (nome + tagline) */
.nouen-clusters-strip__item-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nouen-clusters-strip__item-name {
  font-family: var(--font-headline);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary, #0f172a);
  letter-spacing: -0.01em;
}

.nouen-clusters-strip__item-tagline {
  font-size: 0.78rem;
  color: var(--text-tertiary, #94a3b8);
  line-height: 1.4;
}

.nouen-clusters-strip__item-accent {
  width: 64px;
  height: 2px;
  border-radius: 2px;
  margin-top: 12px;
  opacity: 0.8;
}

/* Setas de navegação — gutter externo */
.nouen-clusters-strip__scroll-zone {
  position: relative;
}

.nouen-clusters-strip__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 200px; /* metade do card: 300px × 4/3 = 400px ÷ 2 */
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  color: #475569;
  cursor: pointer;
  transition: color 0.2s ease, transform 0.2s ease;
  z-index: 10;
  padding: 0;
}

.nouen-clusters-strip__nav:hover {
  color: #0f172a;
  transform: translateY(-50%) scale(1.15);
}

.nouen-clusters-strip__nav--prev {
  left: -48px;
}

.nouen-clusters-strip__nav--next {
  right: -48px;
}

@media (max-width: 1024px) {
  .nouen-clusters-strip__nav {
    display: none;
  }
}

/* ═══════════════════════════════════════════════
   SECTION SHOWCASE — Mercados construídos na NOUEN
   ═══════════════════════════════════════════════ */

.nouen-inst-showcase {
  padding: 96px 0 80px;
  background: #f8fafc;
}
@media (max-width: 767px) {
  .nouen-inst-showcase {
    padding-top: 64px;
  }
}

.nouen-inst-showcase__inner {
  max-width: var(--max-width, 1280px);
  margin: 0 auto;
  padding: 0 56px;
}

/* Header */
.nouen-inst-showcase__header {
  margin-bottom: 64px;
  text-align: left;
}

.nouen-inst-showcase__eyebrow {
  display: inline-block;
  font-family: var(--font-label, monospace);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.075em;
  text-transform: uppercase;
  color: var(--accent-primary, #0993A5);
  margin-bottom: 16px;
}
@media (max-width: 767px) {
  .nouen-inst-showcase__eyebrow { font-size: 0.7rem; }
}

.nouen-inst-showcase__title {
  font-family: var(--font-headline);
  font-size: 1.4rem;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 0 0 12px;
}
@media (min-width: 768px) {
  .nouen-inst-showcase__title {
    font-size: 2.35rem;
    margin-bottom: 24px;
  }
}

.nouen-inst-showcase__subtitle {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.5;
  color: #475569;
  max-width: 940px;
  text-wrap: balance;
  margin: 0;
}
@media (min-width: 768px) {
  .nouen-inst-showcase__subtitle {
    font-family: var(--font-headline);
    font-size: 1.225rem;
    letter-spacing: normal;
    margin: 0;
  }
}

/* Blocos */
.nouen-inst-showcase__blocks {
  display: flex;
  flex-direction: column;
  gap: 80px;
}

.nouen-inst-showcase__block {
  width: 100%;
}

.nouen-inst-showcase__block-grid {
  display: grid;
  /* minmax(0, fr) impede que conteúdo expanda além do fr alocado */
  grid-template-columns: minmax(0, 27fr) minmax(0, 50fr) minmax(0, 23fr);
  gap: 40px;
  align-items: start;
}

/* COL 1 — Info do Mercado */
.nouen-inst-showcase__col-info {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.nouen-inst-showcase__market-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.nouen-inst-showcase__market-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.nouen-inst-showcase__market-avatar {
  width: 52px;
  height: 52px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-headline);
  font-size: 0.875rem;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
}

/* Sem logo: fundo accent + borda */
.nouen-inst-showcase__market-avatar--initials {
  background: var(--avatar-accent, #0993A5);
  border: 1px solid rgba(0,0,0,0.08);
}

/* Com logo: fundo branco sem borda */
.nouen-inst-showcase__market-avatar--logo {
  background: #fff;
  border: none;
}

.nouen-inst-showcase__market-avatar-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 4px;
  background: #fff;
}

.nouen-inst-showcase__market-name {
  font-family: var(--font-headline);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 2px;
}

.nouen-inst-showcase__market-tag {
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: var(--text-tertiary);
  margin: 0;
}

.nouen-inst-showcase__market-about {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.nouen-inst-showcase__market-about-text {
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0;
}

.nouen-inst-showcase__market-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-primary);
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.nouen-inst-showcase__market-link:hover {
  opacity: 0.7;
}

.nouen-inst-showcase__market-link .material-symbols-outlined {
  font-size: 16px;
}

/* COL 2 — Janela de Browser */
.nouen-inst-showcase__col-preview {
  display: flex;
  flex-direction: column;
  min-width: 0;
  width: 100%;
}

.nouen-inst-showcase__preview-accent {
  width: 120px;
  height: 2px;
  border-radius: 2px;
  margin-top: 100px;
  opacity: 0.8;
}

.nouen-inst-showcase__browser {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--border-subtle, #e2e8f0);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.08);
  width: 100%;
}

/* Barra do browser — cinza claro sólido, fina */
.nouen-inst-showcase__browser-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  background: #edf0f4;
  border-bottom: 1px solid rgba(0,0,0,0.07);
}

.nouen-inst-showcase__browser-dots {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.nouen-inst-showcase__browser-dots span {
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #b0b8c4;
}

.nouen-inst-showcase__browser-dots span:nth-child(1),
.nouen-inst-showcase__browser-dots span:nth-child(2),
.nouen-inst-showcase__browser-dots span:nth-child(3) { background: #b0b8c4; }

/* URL pill — centrado, cápsula sutil */
.nouen-inst-showcase__browser-url {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  max-width: 240px;
  margin: 0 auto;
  padding: 2px 9px;
  border-radius: 100px;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.1);
  font-family: var(--font-body);
  font-size: 0.62rem;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.01em;
}

.nouen-inst-showcase__browser-url .material-symbols-outlined {
  font-size: 10px;
  color: #94a3b8;
  flex-shrink: 0;
}

/* Janela do iframe — padding-bottom garante proporção exata sem gap */
.nouen-inst-showcase__browser-window {
  position: relative;
  width: 100%;
  /* Proporção = 900/1440 = 62.5% */
  padding-bottom: 62.5%;
  height: 0;
  overflow: hidden;
  background: #000;
}

.nouen-inst-showcase__iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 1440px;
  height: 900px;
  border: none;
  /* scale é definido dinamicamente via inline style pelo BrowserPreview */
  transform-origin: top left;
  pointer-events: none;
}

/* COL 3 — Card de evento: regras idênticas ao @media ≤767px, escopadas aqui */
.nouen-inst-showcase__col-poster {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  width: 100%;
}

/* Eyebrow da Col 3 */
.nouen-inst-showcase__col3-eyebrow {
  font-family: var(--font-label, monospace);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.075em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.nouen-inst-showcase__col-poster .nouen-market-event-card {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  overflow: visible !important;
  width: 100%;
}

.nouen-inst-showcase__col-poster .nouen-market-event-card__poster-mobile {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  background-image:
    var(--event-bg, none),
    radial-gradient(ellipse 80% 80% at top right,
      color-mix(in srgb, var(--card-accent, #121212) 25%, transparent),
      transparent);
  background-size: cover, cover;
  background-position: center, center;
  background-color: var(--bg-secondary);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.nouen-inst-showcase__col-poster .nouen-market-event-card__poster-badge {
  position: absolute;
  top: 16px;
  right: 16px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 8px;
  border-radius: 4px;
  background: var(--card-accent, var(--accent-primary));
  color: #fff;
}

.nouen-inst-showcase__col-poster .nouen-market-event-card__poster-badge--open {
  background: var(--status-upcoming, #d97706);
}

.nouen-inst-showcase__col-poster .nouen-market-event-card__poster-date {
  position: absolute;
  bottom: 16px;
  left: 16px;
  width: 44px;
  height: 44px;
  background: var(--card-accent, var(--text-primary));
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.nouen-inst-showcase__col-poster .nouen-market-event-card__poster-day {
  font-size: 1.125rem;
  font-weight: 800;
  line-height: 1;
}

.nouen-inst-showcase__col-poster .nouen-market-event-card__poster-month {
  font-size: 0.55rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 2px;
  line-height: 1;
}

.nouen-inst-showcase__col-poster .nouen-market-event-card__strip {
  gap: 0 !important;
  padding: 0 !important;
  background: var(--bg-primary);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-light);
}

.nouen-inst-showcase__col-poster .nouen-market-event-card__strip-date,
.nouen-inst-showcase__col-poster .nouen-market-event-card__strip-status {
  display: none !important;
}

.nouen-inst-showcase__col-poster .nouen-market-event-card__strip-row {
  gap: 8px !important;
  padding: 12px 14px;
}

.nouen-inst-showcase__col-poster .nouen-market-event-card__strip-footer {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--border-subtle);
  padding: 8px 14px;
  margin-top: 0 !important;
}

.nouen-inst-showcase__col-poster .nouen-market-event-card__strip-footer-link {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--card-accent, var(--accent-primary));
  display: inline-flex;
  align-items: center;
  gap: 2px;
  white-space: nowrap;
}

.nouen-inst-showcase__col-poster .nouen-market-event-card__title {
  font-size: 0.825rem !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 4px !important;
}

.nouen-inst-showcase__col-poster .nouen-market-event-card__location {
  font-size: 0.75rem !important;
}



.nouen-inst-showcase__poster {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 3;
  border-radius: 8px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.nouen-inst-showcase__poster-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.1) 50%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}

.nouen-inst-showcase__poster-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 100px;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  z-index: 1;
}

.nouen-inst-showcase__poster-badge--live {
  background: rgba(239, 68, 68, 0.9);
  color: #fff;
}

.nouen-inst-showcase__poster-badge--open {
  background: rgba(34, 197, 94, 0.9);
  color: #fff;
}

.nouen-inst-showcase__poster-dot {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.nouen-inst-showcase__poster-date {
  position: absolute;
  bottom: 80px;
  left: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(8px);
  border-radius: 6px;
  padding: 6px 8px;
  z-index: 1;
}

.nouen-inst-showcase__poster-day {
  font-family: var(--font-headline);
  font-size: 1.25rem;
  font-weight: 800;
  color: #fff;
  line-height: 1;
}

.nouen-inst-showcase__poster-month {
  font-family: var(--font-body);
  font-size: 0.65rem;
  font-weight: 600;
  color: rgba(255,255,255,0.8);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.nouen-inst-showcase__poster-footer {
  position: relative;
  z-index: 1;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.nouen-inst-showcase__poster-title {
  font-family: var(--font-headline);
  font-size: 0.9375rem;
  font-weight: 700;
  color: #fff;
  margin: 0;
  line-height: 1.3;
}

.nouen-inst-showcase__poster-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  opacity: 0.85;
  transition: opacity 0.2s ease;
}

.nouen-inst-showcase__poster-cta:hover {
  opacity: 1;
}

.nouen-inst-showcase__poster-cta .material-symbols-outlined {
  font-size: 14px;
}

/* ── Mobile ── */
@media (max-width: 1024px) {
  .nouen-inst-showcase__inner {
    padding: 0 24px;
  }

  .nouen-inst-showcase__block-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  /* Oculta o iframe em mobile para preservar performance */
  .nouen-inst-showcase__col-preview {
    display: none;
  }

  .nouen-inst-showcase__poster {
    aspect-ratio: 4 / 3;
  }
}

/* ═══════════════════════════════════════════════
   SECTION FINAL CTA
   ═══════════════════════════════════════════════ */

.nouen-inst-final-cta {
  position: relative;
  padding: 120px 24px;
  min-height: 80vh;
  background: #0f172a;
  overflow: hidden;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.nouen-inst-final-cta__glow {
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100vw;
  height: 100vw;
  max-width: 1200px;
  max-height: 1200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(9, 147, 165, 0.2) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

.nouen-inst-final-cta__inner {
  position: relative;
  z-index: 1;
  max-width: 960px;
  margin: 0 auto;
  margin-bottom: 160px; /* empurra o bloco para cima do centro */
  display: flex;
  flex-direction: column;
  align-items: center;
}

.nouen-inst-final-cta__symbol {
  width: 64px;
  height: 64px;
  background: linear-gradient(to bottom, var(--accent-primary, #0993A5) 42%, #ffffff 42%);
  -webkit-mask-image: url('/images/nouen-symbol-dark.png');
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-image: url('/images/nouen-symbol-dark.png');
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  margin-bottom: 6px;
}

.nouen-inst-final-cta__eyebrow {
  display: inline-block;
  font-family: var(--font-label, monospace);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.075em;
  text-transform: uppercase;
  color: var(--accent-primary, #0993A5);
  margin-bottom: 16px;
}

.nouen-inst-final-cta__title {
  font-family: var(--font-headline);
  font-size: 2.25rem;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.04em;
  line-height: 1.08;
  /* Largura máxima para forçar a quebra de linha onde você achar mais bonito. 
     Ajuste este valor (ex: 600px, 800px) para controlar a quebra. */
  max-width: 700px;
  margin: 0 auto 20px; /* 'auto' nas laterais garante que o bloco continue centralizado */
}
@media (max-width: 767px) {
  .nouen-inst-final-cta__title {
    font-size: 2.05rem;
    line-height: 1.05;
  }
}
@media (min-width: 768px) {
  .nouen-inst-final-cta__title {
    font-size: 2.95rem;
  }
}
@media (min-width: 1024px) {
  .nouen-inst-final-cta__title {
    margin: 0 0 24px;
  }
}

.nouen-inst-final-cta__subtitle {
  font-family: var(--font-headline);
  font-size: 1.125rem;
  line-height: 1.25;
  letter-spacing: -0.02em;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.7);
  margin: 0 auto;
  max-width: 600px;
}
@media (max-width: 767px) {
  .nouen-inst-final-cta__subtitle {
    font-family: var(--font-body);
    font-size: 1.025rem;
    letter-spacing: -0.01em;
    max-width: 280px;
  }
}
@media (min-width: 1024px) {
  .nouen-inst-final-cta__subtitle {
    font-size: 1.225rem;
    line-height: 1.45;
    max-width: 480px;
  }
}

.nouen-inst-final-cta__actions {
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  align-items: center;
}

.nouen-inst-final-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #ffffff;
  color: #0f172a;
  font-family: var(--font-headline);
  font-weight: 800;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 18px 24px;
  border-radius: 4px;
  text-decoration: none;
  box-shadow: 0 8px 32px rgba(255, 255, 255, 0.2);
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.nouen-inst-final-cta__btn .material-symbols-outlined {
  line-height: 1;
  display: flex;
  align-items: center;
  transform: translateY(1.5px);
}

@media (max-width: 767px) {
  .nouen-inst-final-cta__btn {
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    width: 100%;
  }
}
@media (min-width: 768px) {
  .nouen-inst-final-cta__btn {
    padding: 16px 40px;
    font-size: 0.75rem;
  }
}

.nouen-inst-final-cta__btn:hover {
  background: #f8fafc;
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(255, 255, 255, 0.3);
}

.nouen-inst-final-cta__btn--ghost {
  background: transparent;
  color: #ffffff;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  box-shadow: none;
}
.nouen-inst-final-cta__btn--ghost:hover {
  background: rgba(255, 255, 255, 0.07);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.6);
  transform: translateY(-2px);
  box-shadow: none;
}

.nouen-inst-final-cta__copyright {
  position: absolute;
  bottom: 24px;
  left: 0;
  width: 100%;
  text-align: center;
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.5);
  z-index: 1;
}
@media (max-width: 768px) {
  .nouen-inst-final-cta {
    padding: 80px 24px;
  }
}

/* ==============================
   MANIFESTO NOUEN
   ============================== */

.nouen-manifesto-page {
  background: #0f172a;
  color: #ffffff;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

.nouen-manifesto-main {
  position: relative;
  z-index: 1;
  padding-top: 120px;
}
@media (max-width: 767px) {
  .nouen-manifesto-main {
    padding-top: 80px;
  }
}

.nouen-manifesto__glow {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -15%);
  width: 100vw;
  height: 100vw;
  max-width: 1200px;
  max-height: 1200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(9, 147, 165, 0.2) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

.nouen-manifesto__container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
  z-index: 2;
}

.nouen-manifesto__hero {
  text-align: center;
  padding: 16px 0 100px;
}
@media (max-width: 767px) {
  .nouen-manifesto__hero {
    padding: 16px 0 56px;
  }
}

.nouen-manifesto__symbol {
  width: 72px;
  height: 72px;
  background: linear-gradient(to bottom, var(--accent-primary, #0993A5) 42%, #ffffff 42%);
  -webkit-mask-image: url('/images/nouen-symbol-dark.png');
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-image: url('/images/nouen-symbol-dark.png');
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  margin: 0 auto 24px;
}

.nouen-manifesto__eyebrow {
  display: block;
  font-family: var(--font-label, monospace);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-primary, #0993A5);
  margin-bottom: 24px;
}

.nouen-manifesto__title {
  font-family: var(--font-headline);
  font-size: 2.65rem;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.1;
  color: #ffffff;
  max-width: 700px;
  width: 100%;
  box-sizing: border-box;
  margin: 0 auto 32px;
}
@media (max-width: 767px) {
  .nouen-manifesto__title {
    font-size: 2.05rem;
  }
}
@media (min-width: 768px) {
  .nouen-manifesto__title {
    font-size: 3.05rem;
  }
}

.nouen-manifesto__vision {
  font-family: var(--font-headline);
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.5;
  color: #e2e8f0;
  margin: 0 auto 60px;
  max-width: 680px;
}
@media (max-width: 767px) {
  .nouen-manifesto__vision {
    font-size: 1rem;
    margin-bottom: 40px;
  }
}
@media (min-width: 768px) {
  .nouen-manifesto__vision {
    font-size: 1.25rem;
  }
}

.nouen-manifesto__intro {
  font-family: var(--font-body);
  font-size: 1.10rem;
  line-height: 1.7;
  color: #94a3b8;
  max-width: 640px;
  width: 100%;
  box-sizing: border-box;
  margin: 0 auto;
  text-align: left;
  border-left: 2px solid #B56576;
  padding-left: 16px;
}
@media (max-width: 767px) {
  .nouen-manifesto__intro {
    font-size: 0.97rem;
  }
}
@media (min-width: 768px) {
  .nouen-manifesto__intro {
    padding-left: 32px;
  }
}
.nouen-manifesto__intro p {
  margin-bottom: 16px;
}

/* -- Principles -- */
.nouen-manifesto__principles {
  padding: 40px 0;
}

.nouen-manifesto__principles-title {
  font-family: var(--font-headline);
  font-size: 2.45rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: #ffffff;
  margin-bottom: 100px;
  text-align: center;
}
@media (max-width: 767px) {
  .nouen-manifesto__principles-title {
    font-size: 1.6rem;
    margin-bottom: 56px;
  }
}

.nouen-manifesto__principles-list {
  display: flex;
  flex-direction: column;
  gap: 80px;
  max-width: 800px;
  margin: 0 auto;
}
@media (max-width: 767px) {
  .nouen-manifesto__principles-list {
    gap: 48px;
  }
}

.nouen-manifesto__principle {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
}
@media (min-width: 768px) {
  .nouen-manifesto__principle {
    flex-direction: row;
    gap: 40px;
  }
}

.nouen-manifesto__principle-num {
  font-family: var(--font-headline);
  font-size: 3rem;
  letter-spacing: -0.05em;
  font-weight: 800;
  color: rgba(9, 147, 165, 0.4);
  line-height: 1;
  flex-shrink: 0;
  width: 80px;
}
@media (min-width: 768px) {
  .nouen-manifesto__principle-num {
    font-size: 4.25rem;
  }
}

.nouen-manifesto__principle-content h3 {
  font-family: var(--font-headline);
  font-size: 1.35rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 16px;
  letter-spacing: -0.02em;
}

.nouen-manifesto__principle-content p {
  font-family: var(--font-body);
  font-size: 1.10rem;
  font-weight: 350;
  line-height: 1.7;
  color: #94a3b8;
}
@media (max-width: 767px) {
  .nouen-manifesto__principle-content p {
    font-size: 0.97rem;
  }
}

/* -- Footer interno -- */
.nouen-manifesto__footer {
  text-align: center;
  padding: 100px 0;
  border-top: 1px solid rgba(255,255,255,0.1);
  margin-top: 60px;
}
@media (max-width: 767px) {
  .nouen-manifesto__footer {
    padding: 60px 0;
    margin-top: 40px;
  }
}

.nouen-manifesto__mission-title {
  font-family: var(--font-label, monospace);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-primary, #0993A5);
  margin-bottom: 36px;
}

.nouen-manifesto__mission {
  font-family: var(--font-headline);
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 1.5;
  color: #ffffff;
  margin: 0 auto 80px;
  max-width: 700px;
}
@media (max-width: 767px) {
  .nouen-manifesto__mission {
    font-size: 1.1rem;
    margin-bottom: 48px;
  }
}

.nouen-manifesto__actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}
@media (max-width: 767px) {
  .nouen-manifesto__actions {
    flex-direction: column;
    align-items: stretch;
  }
  .nouen-manifesto__btn-primary,
  .nouen-manifesto__btn-secondary {
    width: 100%;
    justify-content: center;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
  }
}

.nouen-manifesto__btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--accent-primary, #0993A5);
  color: #ffffff;
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 14px 24px;
  border-radius: 4px;
  text-decoration: none;
  transition: all 0.2s ease;
}
.nouen-manifesto__btn-primary:hover {
  background: #0aadc2;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(9, 147, 165, 0.4);
}

.nouen-manifesto__btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: transparent;
  color: #ffffff;
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 14px 24px;
  border-radius: 4px;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,0.2);
  transition: all 0.2s ease;
}
.nouen-manifesto__btn-secondary:hover {
  background: #ffffff;
  color: #0f172a;
  border-color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(255, 255, 255, 0.2);
}

/* Footer links (Home CTA e Manifesto) */
.nouen-cta-footer-link {
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  transition: color 0.2s ease;
}
.nouen-cta-footer-link:hover {
  color: #ffffff;
}

/* HomeHeader Tema Escuro (para o Manifesto e outras páginas noturnas) */
.nouen-header--theme-dark .nouen-nav-link {
  color: rgba(255, 255, 255, 0.7);
}
.nouen-header--theme-dark .nouen-nav-link:hover,
.nouen-header--theme-dark .nouen-nav-link.active {
  color: #ffffff;
}
.nouen-header--theme-dark .nouen-nav-link::after {
  background-color: #ffffff;
}
.nouen-header--theme-dark .nouen-header-hamburger {
  color: #ffffff;
}

/* No tema escuro, o botão ENTRAR reverte para transparente com borda branca */
.nouen-header--theme-dark .nouen-home-header__login-btn {
  background-color: transparent !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
  color: #ffffff !important;
}
.nouen-header--theme-dark .nouen-home-header__login-btn:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.7) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}


/* ==========================================================================
   V8.9: CAROUSEL ENCERRANDO EM BREVE (.nouen-market-closing)
   ========================================================================== */

.nouen-market-closing__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 32px;
}

.nouen-market-closing__scroll-zone {
  position: relative;
}

.nouen-market-closing__scroll-wrap {
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 8px;
}

.nouen-market-closing__scroll-wrap::-webkit-scrollbar {
  display: none;
}

.nouen-market-closing__track {
  display: flex;
  gap: 16px;
  width: max-content;
}

.nouen-market-closing__item {
  width: 300px;
  flex-shrink: 0;
  scroll-snap-align: start;
}

.nouen-market-closing__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50%; /* Center vertically with respect to the track */
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  color: #475569;
  cursor: pointer;
  transition: color 0.2s ease, transform 0.2s ease;
  z-index: 10;
  padding: 0;
}

.nouen-market-closing__nav:hover {
  color: #0f172a;
  transform: translateY(-50%) scale(1.15);
}

.nouen-market-closing__nav--prev {
  left: -48px;
}

.nouen-market-closing__nav--next {
  right: -48px;
}

@media (max-width: 1024px) {
  .nouen-market-closing__nav {
    display: none;
  }
}

@media (max-width: 767px) {
  .nouen-market-closing__item {
    width: 92vw;
    max-width: 300px;
  }
}