/* ==========================================================================
   01-TOKENS.CSS — M2 GROUP DESIGN SYSTEM (WEBSITE-V3)
   Tokens semánticos, paleta de colores Dark/Light, tipografía y elevaciones.
   Lead Systems Architect Specification — Zero Magic Numbers.
   ========================================================================== */

:root {
  /* ==================== TIPOGRAFÍA ==================== */
  --font-display: 'Clash Display', 'Space Grotesk', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-serif: Georgia, 'Times New Roman', serif;
  --font-body: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  /* System monospace: no extra web-font download (W-V2). */
  --font-mono: ui-monospace, 'SFMono-Regular', 'Cascadia Mono', 'Segoe UI Mono', Consolas, 'Liberation Mono', monospace;

  /* Escala Modular Fluida (clamp) */
  --fs-2xs: clamp(0.6875rem, 0.65rem + 0.2vw, 0.75rem);   /* 11px - 12px */
  --fs-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.8125rem);    /* 12px - 13px */
  --fs-sm: clamp(0.8125rem, 0.78rem + 0.3vw, 0.875rem);   /* 13px - 14px */
  --fs-base: clamp(0.9375rem, 0.9rem + 0.25vw, 1.0625rem); /* 15px - 17px */
  --fs-md: clamp(1.0625rem, 1rem + 0.35vw, 1.1875rem);    /* 17px - 19px */
  --fs-lg: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);       /* 20px - 24px */
  --fs-xl: clamp(1.5rem, 1.35rem + 0.75vw, 1.875rem);     /* 24px - 30px */
  --fs-2xl: clamp(1.875rem, 1.65rem + 1.1vw, 2.375rem);   /* 30px - 38px */
  --fs-3xl: clamp(2.25rem, 1.95rem + 1.5vw, 3.125rem);    /* 36px - 50px */
  --fs-4xl: clamp(2.75rem, 2.35rem + 2vw, 4.25rem);       /* 44px - 68px */
  --fs-display: clamp(3.25rem, 2.75rem + 3vw, 5.75rem);   /* 52px - 92px */

  /* Pesos de Fuente */
  --fw-light: 300;
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  /* Espaciado Sistemático */
  --space-3xs: 2px;
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;
  --space-section: clamp(64px, 8vw, 140px);

  /* Radios de Borde */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-full: 9999px;

  /* Curvas Bézier y Tiempos */
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-smooth: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-instant: 150ms;
  --duration-fast: 250ms;
  --duration-normal: 400ms;
  --duration-slow: 700ms;
  --duration-epic: 1200ms;

  /* Z-Index Hierarchy */
  --z-negative: -1;
  --z-base: 1;
  --z-elevated: 10;
  --z-sticky: 50;
  --z-header: 100;
  --z-overlay: 200;
  --z-modal: 500;
  --z-cursor: 9999;
}

/* ==========================================================================
   MODO OSCURO (DEFAULT — FinTech Abisal & Lujo Minimalista)
   Inspiración: mercury.com, ario.law
   ========================================================================== */
[data-theme="dark"] {
  /* Fondos y Canvas */
  --bg-canvas: #050811;
  --bg-surface: #0A0F1D;
  --bg-surface-elevated: #111827;
  --bg-surface-glass: rgba(10, 15, 29, 0.65);
  --bg-surface-hover: rgba(255, 255, 255, 0.04);
  --bg-subtle: rgba(255, 255, 255, 0.02);
  --bg-overlay: rgba(5, 8, 17, 0.88);

  /* Textos y Contraste */
  --text-main: #F8FAFC;
  --text-secondary: #94A3B8;
  --text-muted: #7C8BA3;
  --text-faint: #334155;
  --text-inverse: #0F172A;

  /* División M2 Advisory (Azul Financiero, Cyan y Oro Institucional) */
  --advisory-blue: #2563EB;
  --advisory-blue-glow: rgba(37, 99, 235, 0.35);
  --advisory-cyan: #38BDF8;
  --advisory-gold: #F59E0B;
  --advisory-gold-glow: rgba(245, 158, 11, 0.3);

  /* División Mitabela (Rosa Carmesí Andina, Oro y Esmeralda) */
  --mitabela-crimson: #E11D48;
  --mitabela-rose: #FB7185;
  --mitabela-rose-glow: rgba(251, 113, 133, 0.35);
  --mitabela-gold: #EAB308;
  --mitabela-emerald: #10B981;

  /* Bordes de Cristal y Efectos */
  --glass-border: rgba(255, 255, 255, 0.09);
  --glass-border-hover: rgba(255, 255, 255, 0.22);
  --glass-border-active: rgba(255, 255, 255, 0.4);
  --glass-highlight: rgba(255, 255, 255, 0.04);
  --glass-blur-sm: 8px;
  --glass-blur-md: 16px;
  --glass-blur-lg: 24px;
  --glass-shadow: 0 16px 40px -10px rgba(0, 0, 0, 0.5);

  /* Íconos Minimalistas */
  --icon-stroke: rgba(248, 250, 252, 0.8);
  --icon-stroke-hover: #FFFFFF;
  --icon-capsule-bg: rgba(255, 255, 255, 0.04);
  --icon-capsule-border: rgba(255, 255, 255, 0.1);

  /* Spotlights Reactivos al Cursor */
  --spotlight-advisory: radial-gradient(700px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(37, 99, 235, 0.16), transparent 45%);
  --spotlight-mitabela: radial-gradient(700px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(225, 29, 72, 0.16), transparent 45%);
}

/* ==========================================================================
   MODO CLARO (Elegancia Editorial & Transparencias Nítidas)
   Inspiración: vetter-consulting-en.webflow.io, valdanitrading.com
   ========================================================================== */
[data-theme="light"] {
  /* Fondos y Canvas */
  --bg-canvas: #F8FAFC;
  --bg-surface: #FFFFFF;
  --bg-surface-elevated: #F1F5F9;
  --bg-surface-glass: rgba(255, 255, 255, 0.78);
  --bg-surface-hover: rgba(15, 23, 42, 0.03);
  --bg-subtle: rgba(15, 23, 42, 0.02);
  --bg-overlay: rgba(248, 250, 252, 0.88);

  /* Textos y Contraste */
  --text-main: #0F172A;
  --text-secondary: #475569;
  --text-muted: #5B6B82;
  --text-faint: #CBD5E1;
  --text-inverse: #F8FAFC;

  /* División M2 Advisory */
  --advisory-blue: #1D4ED8;
  --advisory-blue-glow: rgba(29, 78, 216, 0.18);
  --advisory-cyan: #0284C7;
  --advisory-gold: #D97706;
  --advisory-gold-glow: rgba(217, 119, 6, 0.15);

  /* División Mitabela */
  --mitabela-crimson: #BE123C;
  --mitabela-rose: #E11D48;
  --mitabela-rose-glow: rgba(225, 29, 72, 0.18);
  --mitabela-gold: #B45309;
  --mitabela-emerald: #059669;

  /* Bordes de Cristal y Efectos */
  --glass-border: rgba(15, 23, 42, 0.08);
  --glass-border-hover: rgba(15, 23, 42, 0.2);
  --glass-border-active: rgba(15, 23, 42, 0.35);
  --glass-highlight: rgba(255, 255, 255, 0.85);
  --glass-blur-sm: 8px;
  --glass-blur-md: 16px;
  --glass-blur-lg: 24px;
  --glass-shadow: 0 16px 36px -10px rgba(15, 23, 42, 0.08);

  /* Íconos Minimalistas */
  --icon-stroke: rgba(15, 23, 42, 0.85);
  --icon-stroke-hover: #0F172A;
  --icon-capsule-bg: rgba(15, 23, 42, 0.03);
  --icon-capsule-border: rgba(15, 23, 42, 0.09);

  /* Spotlights Reactivos al Cursor */
  --spotlight-advisory: radial-gradient(700px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(29, 78, 216, 0.07), transparent 45%);
  --spotlight-mitabela: radial-gradient(700px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(190, 18, 60, 0.07), transparent 45%);
}

/* ==========================================================================
   02-RESET.CSS — MODERN CSS RESET & GLOBAL RESILIENCE
   Lead Systems Architect Specification
   ========================================================================== */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
  color-scheme: dark light;
}

body {
  min-height: 100vh;
  background-color: var(--bg-canvas);
  color: var(--text-main);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  overflow-x: hidden;
  transition: background-color var(--duration-normal) var(--ease-smooth),
              color var(--duration-normal) var(--ease-smooth);
}

/* Selección de texto elegante */
::selection {
  background: var(--advisory-blue);
  color: #FFFFFF;
}

[data-section="mitabela"] ::selection {
  background: var(--mitabela-crimson);
  color: #FFFFFF;
}

/* Scrollbar personalizado de alta gama */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bg-canvas);
}

::-webkit-scrollbar-thumb {
  background: var(--glass-border-hover);
  border-radius: var(--radius-full);
  border: 2px solid var(--bg-canvas);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

/* Imágenes y multimedia resilientes */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Tipografía base */
input, button, textarea, select {
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  outline: none;
}

button {
  cursor: pointer;
  user-select: none;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-expo);
}

ul, ol {
  list-style: none;
}

/* Accesibilidad y soporte para movimiento reducido */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   03-GLASSMORPHISM.CSS — MULTI-TIER FROSTED GLASS ENGINE
   Lead Systems Architect Specification — Zero Magic Numbers.
   ========================================================================== */

/* Nivel 1: Superficie Base Translúcida (Secciones y Paneles de Fondo) */
.glass-level-1 {
  background: var(--bg-surface-glass);
  backdrop-filter: blur(var(--glass-blur-sm));
  -webkit-backdrop-filter: blur(var(--glass-blur-sm));
  border: 1px solid var(--glass-border);
}

/* Nivel 2: Tarjetas Interactivas y Barras Flotantes */
.glass-level-2,
.glass-card {
  position: relative;
  background: var(--bg-surface-glass);
  backdrop-filter: blur(var(--glass-blur-md));
  -webkit-backdrop-filter: blur(var(--glass-blur-md));
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--duration-normal) var(--ease-expo),
              transform var(--duration-normal) var(--ease-expo),
              box-shadow var(--duration-normal) var(--ease-expo);
}

.glass-card:hover {
  border-color: var(--glass-border-hover);
  transform: translateY(-4px);
  box-shadow: 0 20px 48px -12px rgba(0, 0, 0, 0.4);
}

/* Nivel 3: Modales, Drawers y Menús Superiores Flotantes */
.glass-level-3,
.glass-modal {
  background: var(--bg-overlay);
  backdrop-filter: blur(var(--glass-blur-lg));
  -webkit-backdrop-filter: blur(var(--glass-blur-lg));
  border: 1px solid var(--glass-border-hover);
  box-shadow: 0 24px 64px -12px rgba(0, 0, 0, 0.6);
  border-radius: var(--radius-xl);
}

/* Cápsula de Ícono Minimalista de Lujo */
.icon-capsule {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--icon-capsule-bg);
  border: 1px solid var(--icon-capsule-border);
  color: var(--icon-stroke);
  transition: all var(--duration-normal) var(--ease-expo);
}

.glass-card:hover .icon-capsule,
.icon-capsule:hover {
  color: var(--icon-stroke-hover);
  border-color: var(--glass-border-hover);
  transform: translateY(-2px) scale(1.05);
}

.icon-capsule.advisory {
  color: var(--advisory-cyan);
}
.icon-capsule.mitabela {
  color: var(--mitabela-rose);
}

/* Efecto Spotlight: Resplandor Guiado por Cursor (Inspiración Mercury.com) */
.spotlight-card {
  position: relative;
  isolation: isolate;
}

.spotlight-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: radial-gradient(
    400px circle at var(--mouse-x, 0) var(--mouse-y, 0),
    var(--glass-border-active),
    transparent 60%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--duration-normal) var(--ease-expo);
  z-index: 2;
}

.spotlight-card:hover::before {
  opacity: 1;
}

.spotlight-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    500px circle at var(--mouse-x, 0) var(--mouse-y, 0),
    rgba(255, 255, 255, 0.03),
    transparent 50%
  );
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--duration-normal) var(--ease-expo);
  z-index: 1;
}

.spotlight-card:hover::after {
  opacity: 1;
}

/* ==========================================================================
   04-LAYOUT.CSS — SYSTEM LAYOUT & MACRO STRUCTURE
   Lead Systems Architect Specification — Zero Magic Numbers.
   ========================================================================== */

.site-wrapper {
  position: relative;
  width: 100%;
  overflow-x: hidden;
}

/* Contenedor centralizado */
.container {
  width: 100%;
  max-width: 1320px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-lg);
  padding-right: var(--space-lg);
}

.container-narrow {
  max-width: 980px;
}

/* Secciones globales */
.section {
  position: relative;
  padding-top: var(--space-section);
  padding-bottom: var(--space-section);
}

.section-header {
  margin-bottom: var(--space-3xl);
  text-align: left;
}

.section-header.centered {
  text-align: center;
  max-width: 780px;
  margin-left: auto;
  margin-right: auto;
}

/* Insignias de sección (Badges minimalistas) */
.section-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 6px 14px;
  border-radius: var(--radius-full);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--bg-subtle);
  border: 1px solid var(--glass-border);
  color: var(--text-secondary);
  margin-bottom: var(--space-md);
  backdrop-filter: blur(8px);
}

.section-badge.advisory {
  color: var(--advisory-cyan);
  border-color: rgba(56, 189, 248, 0.25);
  background: rgba(37, 99, 235, 0.06);
}

.section-badge.mitabela {
  color: var(--mitabela-rose);
  border-color: rgba(251, 113, 133, 0.25);
  background: rgba(225, 29, 72, 0.06);
}

/* Tipografía de títulos */
.section-title {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-bold);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--text-main);
  margin-bottom: var(--space-md);
}

.section-subtitle {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  color: var(--text-secondary);
  line-height: 1.6;
  max-width: 720px;
}

/* Botones universales de alta gama */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: 12px 26px;
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.02em;
  transition: all var(--duration-normal) var(--ease-expo);
  position: relative;
  overflow: hidden;
  border: 1px solid transparent;
}

.btn-primary-advisory {
  background: var(--advisory-blue);
  color: #FFFFFF;
  box-shadow: 0 4px 20px var(--advisory-blue-glow);
}

.btn-primary-advisory:hover {
  background: #1D4ED8;
  transform: translateY(-2px);
  box-shadow: 0 8px 28px var(--advisory-blue-glow);
}

.btn-primary-mitabela {
  background: var(--mitabela-crimson);
  color: #FFFFFF;
  box-shadow: 0 4px 20px var(--mitabela-rose-glow);
}

.btn-primary-mitabela:hover {
  background: #BE123C;
  transform: translateY(-2px);
  box-shadow: 0 8px 28px var(--mitabela-rose-glow);
}

.btn-secondary {
  background: var(--bg-surface-glass);
  border-color: var(--glass-border);
  color: var(--text-main);
  backdrop-filter: blur(var(--glass-blur-sm));
}

.btn-secondary:hover {
  border-color: var(--glass-border-hover);
  background: var(--bg-surface-hover);
  transform: translateY(-2px);
}

/* Separadores orgánicos sutiles */
.divider {
  width: 100%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--glass-border) 20%,
    var(--glass-border) 80%,
    transparent
  );
  margin: var(--space-2xl) 0;
}

/* ==========================================================================
   HOMEPAGE DUAL GATEWAY CARDS (LIGHT/DARK ADAPTIVE)
   ========================================================================== */
.gateway-card-advisory {
  padding: var(--space-2xl);
  display: flex;
  flex-direction: column;
  background: linear-gradient(135deg, rgba(6, 9, 19, 0.92), rgba(11, 17, 32, 0.85)),
              url('../assets/images/advisory-board-1376.webp') center/cover no-repeat;
  border: 1px solid var(--advisory-blue-glow);
  border-radius: var(--radius-2xl);
  box-shadow: var(--glass-shadow);
  transition: all var(--duration-normal) var(--ease-expo);
}

.gateway-card-mitabela {
  padding: var(--space-2xl);
  display: flex;
  flex-direction: column;
  background: linear-gradient(225deg, rgba(20, 8, 18, 0.88), rgba(10, 5, 12, 0.82)),
              url('../assets/images/coldchain-logistics-1376.webp') center/cover no-repeat;
  border: 1px solid var(--mitabela-rose-glow);
  border-radius: var(--radius-2xl);
  box-shadow: var(--glass-shadow);
  transition: all var(--duration-normal) var(--ease-expo);
}

[data-theme="light"] .gateway-card-advisory {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(239, 246, 255, 0.90)),
              url('../assets/images/advisory-board-1376.webp') center/cover no-repeat !important;
  border: 1px solid rgba(37, 99, 235, 0.2) !important;
  box-shadow: 0 20px 48px -10px rgba(37, 99, 235, 0.12) !important;
}

[data-theme="light"] .gateway-card-mitabela {
  background: linear-gradient(225deg, rgba(255, 255, 255, 0.96), rgba(255, 241, 242, 0.90)),
              url('../assets/images/coldchain-logistics-1376.webp') center/cover no-repeat !important;
  border: 1px solid rgba(225, 29, 72, 0.2) !important;
  box-shadow: 0 20px 48px -10px rgba(225, 29, 72, 0.12) !important;
}

/* ==========================================================================
   HOMEPAGE FOUNDERS EXECUTIVE CARDS (PREVENTS SVG BLOWOUT)
   ========================================================================== */
.founders-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-xl);
  margin-top: var(--space-2xl);
}

.founder-card {
  padding: var(--space-2xl);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: var(--bg-surface-glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-2xl);
  backdrop-filter: blur(var(--glass-blur-md));
  box-shadow: var(--glass-shadow);
  transition: all var(--duration-normal) var(--ease-expo);
  position: relative;
  overflow: hidden;
}

.founder-card:hover {
  transform: translateY(-4px);
  border-color: var(--advisory-cyan);
}

[data-theme="light"] .founder-card {
  background: var(--bg-surface);
  border: 1px solid var(--glass-border);
  box-shadow: 0 16px 36px -10px rgba(15, 23, 42, 0.08);
}

.founder-photo-wrapper {
  width: 130px;
  height: 130px;
  border-radius: var(--radius-full);
  overflow: hidden;
  margin-bottom: var(--space-lg);
  border: 3px solid var(--advisory-blue);
  box-shadow: 0 0 20px var(--advisory-blue-glow);
  flex-shrink: 0;
  background: var(--bg-surface-elevated);
}

.founder-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.founder-name {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--text-main);
  margin-bottom: 4px;
}

.founder-role {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--advisory-cyan);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-lg);
}

[data-theme="light"] .founder-role {
  color: var(--advisory-blue);
}

.founder-contacts-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  margin-bottom: var(--space-xl);
  width: 100%;
}

.founder-contact-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  line-height: 1.4;
}

/* Guard against SVG expansion blowout */
.founder-contact-item svg {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  max-width: 16px !important;
  max-height: 16px !important;
  color: var(--advisory-cyan);
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
}

[data-theme="light"] .founder-contact-item svg {
  color: var(--advisory-blue);
}

.founder-contact-item a {
  color: var(--text-secondary);
  text-decoration: none;
  transition: color var(--duration-fast);
}

.founder-contact-item a:hover {
  color: var(--text-main);
  text-decoration: underline;
}

.founder-linkedin-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 8px 18px;
  border-radius: var(--radius-full);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  background: var(--bg-surface-elevated);
  border: 1px solid var(--glass-border);
  color: var(--text-main);
  transition: all var(--duration-fast) var(--ease-expo);
  text-decoration: none;
}

.founder-linkedin-btn svg {
  width: 14px !important;
  height: 14px !important;
  min-width: 14px !important;
  min-height: 14px !important;
  max-width: 14px !important;
  max-height: 14px !important;
  flex-shrink: 0;
  display: inline-block;
}

.founder-linkedin-btn:hover {
  border-color: var(--advisory-blue);
  color: var(--advisory-blue);
  transform: translateY(-2px);
}

/* ==========================================================================
   GLOBAL STATS GRID & STAT CARDS (UNIVERSALLY AVAILABLE)
   ========================================================================== */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-lg);
  margin-bottom: var(--space-4xl);
}

.stat-card {
  padding: var(--space-xl) !important;
  text-align: left;
  border-radius: var(--radius-xl);
  background: var(--bg-surface-glass);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(var(--glass-blur-md));
  box-shadow: var(--glass-shadow);
  transition: transform var(--duration-fast) var(--ease-expo), border-color var(--duration-fast);
}

.stat-card:hover {
  transform: translateY(-2px);
  border-color: var(--advisory-cyan);
}

[data-theme="light"] .stat-card {
  background: var(--bg-surface);
  border: 1px solid var(--glass-border);
  box-shadow: 0 12px 30px -8px rgba(15, 23, 42, 0.06);
}

.stat-number-wrapper {
  display: flex;
  align-items: baseline;
  gap: 2px;
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: var(--fw-extrabold);
  color: var(--advisory-cyan);
  line-height: 1;
  margin-bottom: var(--space-xs);
}

[data-theme="light"] .stat-number-wrapper {
  color: var(--advisory-blue);
}

.stat-label {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  font-weight: var(--fw-medium);
  letter-spacing: 0.02em;
}

/* ==========================================================================
   STATEMENT CARDS (ADVISORY & MITABELA UNIVERSAL)
   ========================================================================== */
.advisory-statement-card {
  padding: var(--space-3xl) var(--space-2xl);
  border-radius: var(--radius-2xl);
  background: linear-gradient(135deg, rgba(6, 9, 19, 0.92), rgba(11, 17, 32, 0.88)),
              url('../assets/images/advisory-board-1376.webp') center/cover no-repeat;
  border: 1px solid var(--advisory-blue-glow);
  margin-bottom: var(--space-3xl);
  backdrop-filter: blur(var(--glass-blur-md));
  box-shadow: var(--glass-shadow);
  transition: all var(--duration-normal) var(--ease-smooth);
}

[data-theme="light"] .advisory-statement-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(241, 245, 249, 0.92)),
              url('../assets/images/advisory-board-1376.webp') center/cover no-repeat !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: 0 20px 48px -10px rgba(15, 23, 42, 0.08) !important;
}

.statement-quote {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-semibold);
  line-height: 1.35;
  color: var(--text-main);
  margin-bottom: var(--space-lg);
  letter-spacing: -0.01em;
}

.statement-lead {
  font-size: var(--fs-md);
  color: var(--text-secondary);
  line-height: 1.7;
  max-width: 860px;
}

/* ==========================================================================
   UNIVERSAL KINETIC TITLES WITH PARTICLE CONVERGENCE & SHIMMER
   ========================================================================== */
.kinetic-title-wrapper {
  position: relative;
  display: inline-block;
  margin-bottom: var(--space-md);
}

.kinetic-title {
  position: relative;
  z-index: 2;
  background: linear-gradient(135deg, #FFFFFF 0%, #E2E8F0 40%, #38BDF8 85%, #60A5FA 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% auto;
  animation: kineticShimmer 8s linear infinite;
  display: inline-block;
  text-shadow: 0 0 40px rgba(56, 189, 248, 0.2);
}

[data-theme="light"] .kinetic-title {
  background: linear-gradient(135deg, #0F172A 0%, #1E293B 40%, #1D4ED8 80%, #0284C7 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% auto;
  animation: kineticShimmer 8s linear infinite;
  text-shadow: none;
}

.kinetic-title.mitabela-tint {
  background: linear-gradient(135deg, #FFFFFF 0%, #FFE4E6 40%, #FB7185 80%, #E11D48 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: kineticShimmer 8s linear infinite;
  text-shadow: 0 0 40px rgba(251, 113, 133, 0.25);
}

[data-theme="light"] .kinetic-title.mitabela-tint {
  background: linear-gradient(135deg, #0F172A 0%, #881337 45%, #BE123C 80%, #E11D48 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
}

@keyframes kineticShimmer {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Floating micro-particle canvas behind kinetic titles */
.title-particle-canvas {
  position: absolute;
  top: -30px;
  left: -30px;
  width: calc(100% + 60px);
  height: calc(100% + 60px);
  pointer-events: none;
  z-index: 1;
}




/* ==========================================================================
   05-NAVIGATION.CSS — MASTER FLOATING NAVIGATION HEADER
   Lead Systems Architect Specification — Zero Magic Numbers.
   ========================================================================== */

.master-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-header);
  padding: var(--space-md) var(--space-lg);
  transition: all var(--duration-normal) var(--ease-expo);
}

.master-header.scrolled {
  padding: var(--space-xs) var(--space-lg);
}

.nav-container {
  max-width: 1320px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-sm) var(--space-xl);
  border-radius: var(--radius-full);
  background: var(--bg-surface-glass);
  backdrop-filter: blur(var(--glass-blur-md));
  -webkit-backdrop-filter: blur(var(--glass-blur-md));
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  transition: all var(--duration-normal) var(--ease-expo);
}

.master-header.scrolled .nav-container {
  background: var(--bg-overlay);
  border-color: var(--glass-border-hover);
  box-shadow: 0 12px 32px -4px rgba(0, 0, 0, 0.4);
}

/* Brand Logo */
.nav-brand {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  letter-spacing: -0.01em;
  color: var(--text-main);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}

.nav-brand .brand-badge {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--advisory-cyan);
  box-shadow: 0 0 10px var(--advisory-cyan);
  transition: background var(--duration-normal) var(--ease-expo);
}

[data-section="mitabela"] .nav-brand .brand-badge {
  background: var(--mitabela-rose);
  box-shadow: 0 0 10px var(--mitabela-rose);
}

/* Division Switcher (Dual World Pills) */
.nav-divisions {
  display: flex;
  align-items: center;
  gap: 2px;
  background: var(--bg-subtle);
  padding: 3px;
  border-radius: var(--radius-full);
  border: 1px solid var(--glass-border);
  flex-shrink: 0;
}

.division-pill {
  padding: 5px 12px;
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
  transition: all var(--duration-fast) var(--ease-expo);
  cursor: pointer;
  border: none;
  white-space: nowrap;
  text-decoration: none;
}

.division-pill:hover {
  color: var(--text-main);
}

.division-pill.active[data-division="advisory"] {
  background: var(--advisory-blue);
  color: #FFFFFF;
  box-shadow: 0 2px 10px var(--advisory-blue-glow);
}

.division-pill.active[data-division="mitabela"] {
  background: var(--mitabela-crimson);
  color: #FFFFFF;
  box-shadow: 0 2px 10px var(--mitabela-rose-glow);
}

.division-pill.active[data-division="dual"] {
  background: var(--text-main);
  color: var(--bg-canvas);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

/* Enlaces de Navegación */
.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.2vw, 20px);
  margin: 0;
  padding: 0;
  list-style: none;
  flex-wrap: nowrap;
}

.nav-link {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
  position: relative;
  padding: 4px 0;
  white-space: nowrap !important;
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-expo);
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 2px;
  background: var(--text-main);
  transition: width var(--duration-normal) var(--ease-expo);
}

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

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

/* Controles de Utilidad (Theme, Lang, CTA) */
.nav-controls {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  flex-shrink: 0;
}

.control-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-full);
  background: var(--icon-capsule-bg);
  border: 1px solid var(--icon-capsule-border);
  color: var(--icon-stroke);
  transition: all var(--duration-fast) var(--ease-expo);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
}

.control-btn:hover {
  border-color: var(--glass-border-hover);
  color: var(--icon-stroke-hover);
  transform: translateY(-1px);
}

.control-btn svg {
  width: 18px;
  height: 18px;
  stroke-width: 1.5;
  stroke: currentColor;
  fill: none;
}

/* Botón Hamburguesa Móvil (Oculto en desktop) */
.mobile-toggle {
  display: none;
  background: transparent;
  border: none;
  color: var(--text-main);
  padding: var(--space-xs);
  cursor: pointer;
}

.mobile-toggle svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  stroke-width: 1.5;
}

/* Menú Móvil Desplegable (Estrictamente oculto en desktop) */
.mobile-nav-drawer {
  display: none;
}

/* ==========================================================================
   09-MODALS.CSS — ACCESSIBLE GLASS MODALS & LEAD CAPTURE
   Lead Systems Architect Specification — Zero Magic Numbers.
   ========================================================================== */

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(var(--glass-blur-md));
  -webkit-backdrop-filter: blur(var(--glass-blur-md));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
  opacity: 0;
  visibility: hidden;
  transition: all var(--duration-normal) var(--ease-expo);
}

.modal-backdrop:not(.active) {
  display: none !important;
}

.modal-backdrop.active {
  display: flex !important;
  opacity: 1;
  visibility: visible;
}

.modal-container {
  width: 100%;
  max-width: 740px;
  max-height: 90vh;
  overflow-y: auto;
  padding: var(--space-2xl);
  border-radius: var(--radius-2xl);
  background: var(--bg-surface);
  border: 1px solid var(--glass-border-hover);
  box-shadow: 0 24px 64px -12px rgba(0, 0, 0, 0.6);
  transform: translateY(20px) scale(0.98);
  transition: transform var(--duration-normal) var(--ease-expo);
  position: relative;
}

.modal-backdrop.active .modal-container {
  transform: translateY(0) scale(1);
}

.modal-close-btn {
  position: absolute;
  top: var(--space-lg);
  right: var(--space-lg);
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-subtle);
  border: 1px solid var(--glass-border);
  color: var(--text-secondary);
  transition: all var(--duration-fast) var(--ease-expo);
}

.modal-close-btn:hover {
  background: var(--bg-surface-hover);
  color: var(--text-main);
  transform: rotate(90deg);
}

/* Contenido Interno del Modal de Rosas */
.modal-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--space-xl);
  align-items: start;
}

.modal-image-wrapper {
  border-radius: var(--radius-lg);
  overflow: hidden;
  height: 340px;
}

.modal-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.modal-details {
  display: flex;
  flex-direction: column;
}

.modal-header-tag {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  color: var(--mitabela-rose);
  margin-bottom: var(--space-2xs);
}

.modal-rose-title {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  color: var(--text-main);
  margin-bottom: var(--space-sm);
}

.modal-rose-desc {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: var(--space-lg);
}

.modal-specs-table {
  width: 100%;
  margin-bottom: var(--space-xl);
  font-size: var(--fs-sm);
}

.modal-specs-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--glass-border);
}

.modal-specs-row span:first-child {
  color: var(--text-muted);
}

.modal-specs-row span:last-child {
  color: var(--text-main);
  font-weight: var(--fw-semibold);
}

/* ==================== FORMULARIO DE CONTACTO / LEADS ==================== */
.lead-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  background: var(--bg-surface-glass);
  padding: var(--space-2xl);
  border-radius: var(--radius-2xl);
  border: 1px solid var(--glass-border);
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.form-input,
.form-textarea,
.form-select {
  width: 100%;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  background: var(--bg-surface-elevated);
  border: 1px solid var(--glass-border);
  color: var(--text-main);
  font-size: var(--fs-base);
  transition: all var(--duration-fast) var(--ease-expo);
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  border-color: var(--advisory-blue);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.form-textarea {
  min-height: 120px;
  resize: vertical;
}

.form-status {
  padding: var(--space-md);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  display: none;
}

.form-status.success {
  display: block;
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid var(--mitabela-emerald);
  color: var(--mitabela-emerald);
}

.form-status.error {
  display: block;
  background: rgba(225, 29, 72, 0.1);
  border: 1px solid var(--mitabela-crimson);
  color: var(--mitabela-rose);
}

/* ==========================================================================
   ROSE VARIETY IMAGE LIGHTBOX MODAL (HIGH-RES PREVIEW)
   ========================================================================== */
.lightbox-backdrop {
  background: rgba(0, 0, 0, 0.88) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}

.lightbox-modal-container {
  max-width: 880px !important;
  padding: var(--space-xl) !important;
  background: var(--bg-surface-glass) !important;
  border: 1px solid var(--glass-border-hover) !important;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.8) !important;
  border-radius: var(--radius-2xl) !important;
  overflow-y: auto !important;
}

.lightbox-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.lightbox-img-frame {
  width: 100%;
  height: 480px;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--glass-border);
}

.lightbox-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}


.lightbox-caption-box {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.lightbox-badge-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.lightbox-tone-chip {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  padding: 4px 10px;
  border-radius: var(--radius-full);
  background: var(--bg-surface-elevated);
  border: 1px solid var(--glass-border);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.lightbox-title {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  color: var(--text-main);
  margin: 0;
}

.lightbox-specs-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-lg) var(--space-xl);
  margin: var(--space-sm) 0;
  padding: var(--space-lg) 0;
  border-block: 1px solid var(--glass-border);
}

.lightbox-specs-summary > div { min-width: 0; }
.lightbox-specs-summary > div:nth-child(3),
.lightbox-specs-summary > div:last-child { grid-column: 1 / -1; }
.lightbox-specs-summary dt {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  color: var(--text-secondary);
  text-transform: uppercase;
  margin-bottom: var(--space-2xs);
}
.lightbox-specs-summary dd {
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-main);
  overflow-wrap: anywhere;
}
.lightbox-specs-summary > div:first-child dd { color: var(--advisory-gold); }
.lightbox-photo-note {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--fs-xs);
  line-height: var(--lh-relaxed);
}
.lightbox-badge-row { flex-wrap: wrap; }
.lightbox-badge-row .rose-badge-tag { position: static; }
.lightbox-caption-box { gap: var(--space-md); }

.lightbox-desc-text {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  line-height: var(--lh-relaxed);
  margin: 0;
}

.lightbox-btn-row {
  display: flex;
  gap: var(--space-md);
  margin-top: var(--space-sm);
  flex-wrap: wrap;
}

@media (max-width: 768px) {
  .lightbox-img-frame {
    height: 300px;
  }
  .lightbox-modal-container {
    padding: var(--space-lg) !important;
    max-width: 95% !important;
  }
}

/* ==========================================================================
   10-FOOTER.CSS — INSTITUTIONAL MASTER FOOTER
   Lead Systems Architect Specification — Zero Magic Numbers.
   ========================================================================== */

.master-footer {
  background: var(--bg-surface);
  border-top: 1px solid var(--glass-border);
  padding: var(--space-4xl) 0 var(--space-xl);
  position: relative;
  overflow: hidden;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--space-3xl);
  margin-bottom: var(--space-3xl);
}

.footer-brand-col {
  display: flex;
  flex-direction: column;
}

.footer-brand {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--text-main);
  margin-bottom: var(--space-sm);
}

.footer-tagline {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  line-height: 1.6;
  max-width: 320px;
  margin-bottom: var(--space-lg);
}

.footer-col-title {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: var(--space-md);
  font-weight: var(--fw-bold);
}

.footer-nav-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.footer-nav-link {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  transition: color var(--duration-fast) var(--ease-expo);
}

.footer-nav-link:hover {
  color: var(--text-main);
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-xl);
  border-top: 1px solid var(--glass-border);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  color: var(--text-muted);
}

.footer-legal-links {
  display: flex;
  gap: var(--space-lg);
}

/* ==========================================================================
   11-RESPONSIVE.CSS — MULTI-DEVICE RESPONSIVE ADAPTATION
   Lead Systems Architect Specification — Zero Broken Layouts.
   ========================================================================== */

/* Tablet & Pantallas Medianas (< 1024px) */
@media (max-width: 1024px) {
  .hero-split-section {
    flex-direction: column;
    min-height: auto;
  }

  .split-panel {
    flex: 1 1 auto;
    padding: var(--space-3xl) var(--space-lg);
  }

  .hero-center-badge {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    margin: var(--space-md) auto;
  }

  .bento-gallery {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
  }
}

/* Teléfonos y Dispositivos Móviles (< 768px) */
@media (max-width: 768px) {
  .nav-links,
  .nav-divisions {
    display: none;
  }

  .mobile-toggle {
    display: flex;
  }

  .mobile-nav-drawer {
    position: fixed;
    top: 70px;
    left: var(--space-md);
    right: var(--space-md);
    background: var(--bg-surface);
    border: 1px solid var(--glass-border-hover);
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.6);
    z-index: var(--z-modal);
    transform: translateY(-20px);
    opacity: 0;
    pointer-events: none;
    transition: all var(--duration-normal) var(--ease-expo);
  }

  .mobile-nav-drawer.active {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  .services-grid,
  .insights-grid,
  .roses-grid {
    grid-template-columns: 1fr;
  }

  .modal-grid {
    grid-template-columns: 1fr;
  }

  .bento-gallery {
    grid-template-columns: 1fr;
    grid-auto-rows: 200px;
  }

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

  /* Contact Page Grid & Form Adaptation */
  .contact-main-grid {
    grid-template-columns: 1fr !important;
    gap: var(--space-2xl) !important;
  }

  .form-row-2col {
    grid-template-columns: 1fr !important;
    gap: var(--space-md) !important;
  }

  .lead-form {
    padding: var(--space-xl) var(--space-md) !important;
  }

  .char-counter-wrap {
    display: flex;
    justify-content: flex-end;
    font-family: var(--font-mono);
    font-size: var(--fs-2xs);
    color: var(--text-muted);
    margin-top: 4px;
  }

  .char-counter-wrap.valid {
    color: var(--mitabela-emerald);
  }

  .required-badge {
    font-family: var(--font-mono);
    font-size: var(--fs-2xs);
    color: var(--mitabela-rose);
    margin-left: 4px;
    font-weight: normal;
  }

  /* Mobile Fullscreen 50/50 Split */
  .hero-split-section {
    flex-direction: column !important;
    min-height: calc(100svh - 60px) !important;
    height: auto !important;
    padding-top: 60px !important;
  }

  .split-panel {
    flex: 1 1 50% !important;
    min-height: 44svh !important;
    padding: var(--space-xl) var(--space-md) !important;
  }

  /* Mobile Cookie Banner Adaptation */
  .cookie-banner {
    left: var(--space-sm) !important;
    right: var(--space-sm) !important;
    bottom: var(--space-sm) !important;
    padding: var(--space-md) var(--space-lg) !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: var(--space-md) !important;
    z-index: 1000 !important;
  }

  .cookie-actions {
    display: flex !important;
    width: 100% !important;
    gap: var(--space-xs) !important;
  }

  .cookie-actions .btn {
    flex: 1 !important;
    text-align: center !important;
    padding: 10px 8px !important;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }

  .footer-bottom {
    flex-direction: column;
    gap: var(--space-md);
    text-align: center;
  }
}


/* ==========================================================================
   12-COOKIES.CSS — US PRIVACY & COOKIE CONSENT STYLES
   Lead Systems Architect Specification
   ========================================================================== */

.cookie-banner {
  position: fixed;
  bottom: var(--space-md);
  left: var(--space-md);
  right: var(--space-md);
  max-width: 720px;
  margin: 0 auto;
  z-index: 1000 !important;
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-lg);
  background: var(--bg-surface-glass);
  backdrop-filter: blur(var(--glass-blur-lg));
  -webkit-backdrop-filter: blur(var(--glass-blur-lg));
  border: 1px solid var(--glass-border-hover);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  transform: translateY(120%);
  opacity: 0;
  transition: all var(--duration-normal) var(--ease-expo);
}

.cookie-banner.active {
  transform: translateY(0);
  opacity: 1;
}

.cookie-text {
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  line-height: 1.6;
}

.cookie-text strong {
  color: var(--text-main);
  font-family: var(--font-display);
}

.cookie-text a {
  color: var(--advisory-cyan);
  text-decoration: underline;
}

.cookie-actions {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  flex-shrink: 0;
}

.cookie-actions .btn {
  padding: 8px 16px;
  font-size: var(--fs-xs);
}

/* Modal de Preferencias de Cookies & Backdrop Safety */
#cookie-modal-backdrop:not(.active),
.modal-backdrop:not(.active) {
  display: none !important;
}

#cookie-modal-backdrop.active,
.modal-backdrop.active {
  display: flex !important;
}

.cookie-preference-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--glass-border);
}

.cookie-pref-info {
  display: flex;
  flex-direction: column;
}

.cookie-pref-title {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--text-main);
}

.cookie-pref-desc {
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background-color: var(--bg-surface-elevated);
  border: 1px solid var(--glass-border);
  transition: var(--duration-fast);
  border-radius: 24px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 3px;
  bottom: 3px;
  background-color: var(--text-muted);
  transition: var(--duration-fast);
  border-radius: 50%;
}

input:checked + .slider {
  background-color: var(--advisory-blue);
  border-color: var(--advisory-blue);
}

input:checked + .slider:before {
  transform: translateX(20px);
  background-color: #FFFFFF;
}

input:disabled + .slider {
  opacity: 0.5;
  cursor: not-allowed;
}

@media (max-width: 768px) {
  .cookie-banner {
    flex-direction: column;
    align-items: stretch;
    bottom: var(--space-xs);
    left: var(--space-xs);
    right: var(--space-xs);
    padding: var(--space-sm) var(--space-md);
    gap: var(--space-sm);
  }

  .cookie-text {
    font-size: var(--fs-2xs);
    line-height: 1.45;
  }

  .cookie-actions {
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
  }

  .cookie-actions .btn {
    flex: 1 1 auto;
    padding: 8px 12px;
  }
}

/* W-V4 (2026-10-20): on desktop the notice is a slim bottom bar so it never covers the hero calls to action. */
@media (min-width: 769px) {
  .cookie-banner {
    left: 0;
    right: 0;
    bottom: 0;
    max-width: none;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    padding: 10px max(24px, calc((100vw - 1200px) / 2));
  }

  .cookie-text {
    line-height: 1.45;
  }
}

/* Contextual public navigation; loaded after the legacy visual system. */
body[data-page="catalog"] .catalog-hero { padding-top: 120px; padding-bottom: 24px; }
body[data-page="catalog"] .catalog-hero .kinetic-title { font-size: clamp(28px, 4vw, 48px) !important; line-height: 1.2; }
body[data-page="catalog"] .catalog-hero .section-subtitle { font-size: 15px !important; line-height: 1.6; margin-bottom: 20px !important; }
body[data-page="catalog"] .catalog-metrics-grid { gap: 8px; padding: 10px; margin-top: 16px; box-shadow: none; border-radius: 8px; }
body[data-page="catalog"] .catalog-metric-cell { padding: 4px; }
body[data-page="catalog"] .catalog-filter-panel { padding: 16px !important; margin-bottom: 20px !important; }
body[data-page="catalog"] .catalog-filters { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; gap: 6px; }
body[data-page="catalog"] .filter-tab { min-height: 44px; padding: 8px 10px; font-size: 11px; }
body[data-page="catalog"] .catalog-search-wrap { flex-basis: 100% !important; width: 100%; }
body[data-page="catalog"] .catalog-filter-panel .color-chip { min-height: 36px; font-size: 11px !important; padding: 6px 9px !important; }
body[data-page="catalog"] .catalog-metric-val { font-size: 24px; }
body[data-page="catalog"] .catalog-metric-label { font-size: 10px; }
body[data-page="catalog"] .catalog-hero .kinetic-title-wrapper { margin-bottom: 10px; }
body[data-page="catalog"] .catalog-hero + .section { padding-top: 24px !important; }
@media (max-width: 768px) {
  body[data-page="catalog"] .catalog-hero { padding-top: 104px; padding-bottom: 12px; }
  body[data-page="catalog"] .catalog-hero .section-subtitle { font-size: 13px !important; }
  body[data-page="catalog"] .catalog-metric-cell { display: flex; align-items: center; gap: 8px; justify-content: center; }
  body[data-page="catalog"] .catalog-metric-val { font-size: 16px; margin-bottom: 0; }
  body[data-page="catalog"] .catalog-metric-label { text-align: left; font-size: 10px; letter-spacing: 0; }
}

[hidden] { display: none !important; }
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--advisory-cyan);
  outline-offset: 4px;
}
.skip-link {
  position: fixed; top: 8px; left: 16px; z-index: 3000;
  padding: 12px 18px; border-radius: 6px; background: var(--bg-surface); color: var(--text-main);
  transform: translateY(-150%); border: 1px solid var(--glass-border-hover);
}
.skip-link:focus { transform: translateY(0); }
[data-m2-navigation] { padding: 16px 24px; }
.m2-nav-shell {
  max-width: 1320px; margin-inline: auto; min-height: 64px; padding: 8px 16px 8px 22px;
  display: flex; align-items: center; gap: 24px; border: 1px solid var(--glass-border);
  border-radius: 14px; background: var(--bg-surface); box-shadow: 0 6px 20px rgb(0 0 0 / 8%);
  transition:background-color 220ms ease,box-shadow 220ms ease,border-color 220ms ease;
}
/* A restrained glass surface lets passing content show through the fixed menu. */
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  [data-m2-navigation].scrolled .m2-nav-shell {
    background:rgba(255,255,255,.82);
    border-color:rgba(255,255,255,.66);
    backdrop-filter:blur(14px) saturate(125%);
    -webkit-backdrop-filter:blur(14px) saturate(125%);
    box-shadow:0 8px 24px rgba(18,25,38,.1);
  }
  [data-theme="dark"] [data-m2-navigation].scrolled .m2-nav-shell {
    background:rgba(18,23,36,.84);
    border-color:rgba(255,255,255,.16);
    box-shadow:0 8px 24px rgba(0,0,0,.22);
  }
}
.m2-nav-brand { flex-shrink: 0; font-family: var(--font-display); font-size: 16px; font-weight: 700; letter-spacing: -0.03em; white-space: nowrap; }
.m2-nav-links { display: flex; gap: 24px; margin-inline: auto; align-items: center; }
.m2-nav-link { color: var(--text-secondary); font-size: 14px; min-height: 44px; display: inline-flex; align-items: center; text-align: left; }
.m2-nav-link:hover, .m2-nav-link[aria-current] { color: var(--text-main); }
.m2-nav-link[aria-current] { font-weight: 700; }
.m2-nav-actions { display: flex; align-items: center; gap: 12px; margin-left: auto; flex-shrink: 0; }
.m2-nav-cta, .m2-menu-toggle { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 10px 16px; font-size: 13px; font-weight: 600; border-radius: 7px; white-space: nowrap; }
.m2-nav-cta { background: var(--advisory-blue); color: #fff; }
[data-division="mitabela"] .m2-nav-cta { background: var(--mitabela-crimson); }
[data-division="group"] .m2-nav-cta { background: var(--bg-surface-elevated); color: var(--text-main); border: 1px solid var(--glass-border); }
.m2-menu-toggle { background: transparent; color: var(--text-secondary); border: 1px solid var(--glass-border); }
.m2-menu-toggle[aria-expanded="true"] { color: var(--text-main); border-color: var(--glass-border-hover); }
.m2-navigation-drawer {
  position: fixed; top: 96px; right: max(24px, calc((100vw - 1320px) / 2)); z-index: 1800;
  width: 340px; max-width: calc(100vw - 32px); max-height: calc(100dvh - 112px); overflow-y: auto;
  padding: 24px; background: var(--bg-surface); border: 1px solid var(--glass-border-hover); border-radius: 12px; box-shadow: 0 14px 60px rgb(0 0 0 / 25%);
}
.m2-drawer-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.m2-drawer-top h2 { font-size: 18px; font-weight: 600; }
.m2-drawer-close { min-height: 44px; padding: 8px 10px; color: var(--text-secondary); font-size: 12px; border-radius: 6px; border: 1px solid var(--glass-border); }
.m2-drawer-section { display: flex; flex-direction: column; padding-top: 16px; margin-top: 16px; border-top: 1px solid var(--glass-border); }
.m2-drawer-section h3 { color: var(--text-muted); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 8px; }
.m2-utility-row { display: flex; justify-content: space-between; align-items: center; min-height: 48px; font-size: 14px; color: var(--text-secondary); }
.m2-utility-row .control-btn { min-width: 44px; min-height: 44px; border-radius: 6px; }
.m2-drawer-section .m2-nav-link { width: 100%; border-radius: 5px; padding-inline: 8px; margin-inline: -8px; }
.m2-drawer-section .m2-nav-link:hover { background: var(--bg-surface-hover); }
.m2-primary-drawer-links { display: none; }
.m2-primary-drawer-links:empty { display: none; }
.m2-nav-cta:disabled { opacity: 0.55; cursor: not-allowed; }
.switch input { width: 44px; height: 24px; position: absolute; inset: 0; }
.switch input:focus-visible + .slider { outline: 2px solid var(--advisory-cyan); outline-offset: 4px; }
body[data-page="home"] .hero-split-section {
  display: grid; grid-template-columns: 1fr 1fr; min-height: 0; padding-top: 112px; padding-inline: 24px; gap: 16px;
  max-width: 1440px; margin-inline: auto; background: transparent;
}
body[data-page="home"] .split-panel { min-height: 470px; padding: 48px 40px; border: 1px solid var(--glass-border); border-radius: 16px; flex: none; filter: none; box-shadow: none; transition: border-color 160ms; }
body[data-page="home"] .split-panel:hover { filter: none; flex: none; border-color: var(--glass-border-hover); }
body[data-page="home"] .split-panel::before { display: none; }
body[data-page="home"] .panel-title { font-size: clamp(28px, 3.5vw, 48px); }
body[data-page="home"] .panel-content { max-width: 480px; }
body[data-page="home"] .panel-desc { color: var(--text-secondary); font-size: 16px; }
body[data-page="home"] .hero-center-badge, body[data-page="home"] .hero-ticker, body[data-page="home"] .hero-scroll-indicator { display: none; }
body[data-page="home"] .kinetic-title { background: none; -webkit-text-fill-color: currentColor; color: var(--text-main); animation: none; text-shadow: none; }
body[data-page="home"] .section-header .section-title { font-size: clamp(26px, 3vw, 40px); }
.contact-main-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.form-row-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.char-counter-wrap { display: flex; justify-content: flex-end; font-size: 12px; color: var(--text-muted); margin-top: 6px; }
.cookie-banner { pointer-events: none; }
.cookie-banner.active { pointer-events: auto; }
@media (max-width: 1100px) {
  .m2-nav-links { display: none; }
  .m2-primary-drawer-links:not(:empty) { display: flex; }
}
@media (max-width: 768px) {
  [data-m2-navigation] { padding: 12px 16px; }
  .m2-nav-shell { min-height: 60px; border-radius: 10px; gap: 8px; padding: 6px 10px 6px 14px; }
  .m2-nav-brand { font-size: 14px; }
  .m2-nav-actions { gap: 8px; }
  .m2-nav-cta, .m2-menu-toggle { padding: 8px 11px; font-size: 12px; }
  .m2-navigation-drawer { top: 88px; right: 16px; width: 360px; max-height: calc(100dvh - 104px); }
  body[data-page="home"] .hero-split-section { grid-template-columns: 1fr; padding: 96px 16px 0 !important; min-height: 0 !important; height: auto !important; gap: 12px; }
  body[data-page="home"] .split-panel { min-height: 235px !important; padding: 24px !important; border-radius: 12px; }
  body[data-page="home"] .panel-title { font-size: 28px; margin-bottom: 10px; }
  body[data-page="home"] .panel-desc { font-size: 13px; margin-bottom: 16px; line-height: 1.6; }
  body[data-page="home"] .section-badge { margin-bottom: 12px; font-size: 10px; }
  body[data-page="home"] .split-panel .btn { min-height: 44px; padding: 10px 16px; font-size: 12px; }
  .contact-main-grid { grid-template-columns: 1fr; }
  .form-row-2col { grid-template-columns: 1fr; }
  .cookie-banner { padding: 14px 16px !important; gap: 10px !important; }
  .cookie-text { font-size: 11px; line-height: 1.4; }
  .cookie-actions { flex-direction: row; flex-wrap: wrap; gap: 6px !important; }
  .cookie-actions .btn { width: auto; min-height: 44px; font-size: 10px; padding: 8px 6px !important; }
}
@media (max-width: 359px) {
  .m2-nav-brand { font-size: 13px; }
  .m2-nav-cta { display: none; }
  body[data-page="home"] .panel-title { font-size: 25px; }
}
@media (prefers-reduced-motion: reduce) {
  .m2-nav-shell, .m2-navigation-drawer { transition: none; }
}

/* Navigation carries the approved blue/gold identity. */
.m2-nav-shell,.m2-navigation-drawer{--menu-blue:#82b5ff;--menu-gold:#e9bd67;--menu-tint:#102c52;}
[data-theme="light"] :is(.m2-nav-shell,.m2-navigation-drawer){--menu-blue:#245bbb;--menu-gold:#875a16;--menu-tint:#e9f0fb;}
.m2-nav-brand{color:var(--menu-gold);}
.m2-menu-toggle{color:var(--menu-blue);border-color:var(--menu-blue);background:var(--menu-tint);}
.m2-menu-toggle[aria-expanded="true"]{color:var(--menu-gold);border-color:var(--menu-gold);}
.m2-navigation-drawer{border-top:3px solid var(--menu-gold);padding:24px 28px;}
.m2-drawer-top h2{font-size:26px;letter-spacing:-.025em;color:var(--text-main);}
.m2-drawer-section h3{color:var(--menu-gold);}
.m2-drawer-section .m2-nav-link{justify-content:space-between;gap:16px;font-size:15px;padding:10px 12px;min-height:48px;}
.m2-drawer-section .m2-nav-link::after{content:"";width:7px;height:7px;border-top:1.5px solid var(--menu-blue);border-right:1.5px solid var(--menu-blue);transform:rotate(45deg);flex-shrink:0;}
.m2-drawer-section .m2-nav-link:is(:hover,:focus-visible,[aria-current]){background:var(--menu-tint);color:var(--menu-blue);}

/* Decorative title movement is a bounded introduction, not an idle loop. */
.site-wrapper .kinetic-title { animation-duration:2s !important; animation-iteration-count:1 !important; }
@media(prefers-reduced-motion:reduce) { .site-wrapper .kinetic-title { animation:none !important; } }

/* Mitabella shares one original logo between the hero and navigation. */
body[data-section="mitabela"] .m2-nav-brand{display:inline-flex;align-items:center;gap:9px;min-width:0;white-space:nowrap}
.m2-nav-logo{display:block;width:56px;height:36px;object-fit:contain;flex-shrink:0}
.m2-drawer-logo{display:block;width:96px;height:61px;object-fit:contain}
[data-theme="dark"] body[data-section="mitabela"] :is(.mitabela-original-logo,.m2-nav-logo,.m2-drawer-logo){filter:brightness(0) invert(1)}
@media(max-width:600px){body[data-section="mitabela"] .m2-nav-brand{gap:6px;font-size:11px}.m2-nav-logo{width:34px;height:28px}}

/* Shared operational controls retain the established blue and yellow palette. */
:root{--m34-close-bg:#f2ca50;--m34-close-fg:#10294c}
button:is(.close-modal-btn,.modal-close-btn,.m34-close,.modal-close,.close-menu,[data-close],[data-close-announcement-editor],[aria-label^="Close"],[aria-label^="close"]),
.btn:is([data-close],[data-close-announcement-editor]),
button[id*="close"],button[class*="close-btn"]{
  background:var(--m34-close-bg)!important;color:var(--m34-close-fg)!important;border-color:var(--m34-close-bg)!important
}
button:is(.m34-close,[data-close],[aria-label^="Close"],[aria-label^="close"]):hover,
button[id*="close"]:hover{background:#ffdc75!important;color:#10294c!important}
button:is(.m34-close,[data-close],[aria-label^="Close"],[aria-label^="close"]):focus-visible,
button[id*="close"]:focus-visible{outline:3px solid #244f9a;outline-offset:3px}
.m34-variety-picker{display:grid;gap:5px;min-width:0;width:100%}
.m34-variety-picker .form-input{width:100%;min-width:0}
.m34-variety-search{font-size:12px}
.m34-picker-feedback{font-size:11px;color:var(--text-secondary,#506079);min-height:0}
.m34-picker-feedback:empty{display:none}
.m34-multiselect{min-width:0}
.m34-multiselect>summary{cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:8px;list-style:disclosure-closed}
.m34-multiselect[open]>summary{margin-bottom:10px;list-style:disclosure-open}
.m34-multiselect .m31-options{max-height:240px;overflow:auto;margin-top:8px}
.m34-sample-editor{border:1px solid var(--ops-border,var(--glass-border,#cbd5e1));padding:16px;border-radius:12px;margin:16px 0;min-width:0}
.m34-check{display:flex;align-items:center;gap:9px;font-weight:600;font-size:13px}
.m34-check input[type=checkbox]{width:17px;height:17px;accent-color:var(--ops-accent,#2858aa)}
.m34-help{font-size:12px;line-height:1.55;color:var(--ops-muted,var(--text-secondary,#506079));margin:7px 0}
.m34-sample-rows{display:grid;gap:14px;margin-top:14px}
.m34-sample-rows[hidden]{display:none}
.m34-sample-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(95px,150px);gap:12px;align-items:start}
.m34-sample-row>label{display:grid;gap:6px;min-width:0;font-size:12px}
.m34-workflow-panel{padding:16px;margin-bottom:20px;border:1px solid var(--ops-border,#cbd5e1);border-radius:12px;min-width:0}
.m34-workflow-panel h3{font-size:16px;margin:0 0 12px}
.m34-workflow-panel h4{font-size:13px;margin:15px 0 8px}
.m34-workflow-panel .m34-form-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.m34-workflow-panel .m34-form-row .form-input{flex:1;min-width:min(100%,180px)}
.m34-status{font-size:12px;line-height:1.5;margin:8px 0;color:var(--ops-muted,var(--text-secondary,#506079))}
.m34-status[data-error=true]{color:var(--ops-danger,#b91c1c)}
.m34-order-activity{font-size:10px;line-height:1.5;white-space:normal;overflow-wrap:anywhere;margin:7px 0;color:var(--ops-muted,var(--text-secondary,#506079))}
.m34-audit-list{padding:0;list-style:none;display:grid;gap:10px;max-height:380px;overflow:auto}
.m34-audit-list>li{padding-bottom:10px;border-bottom:1px solid var(--ops-border,#cbd5e1);font-size:12px;overflow-wrap:anywhere}
.m34-audit-list time{display:block;font-size:11px;color:var(--ops-muted,var(--text-secondary,#506079));margin-top:4px}
.m34-orders-scope{display:flex;gap:7px;flex-wrap:wrap;margin:12px 0}
.m34-orders-scope button[aria-current=page]{background:var(--ops-accent,#244f9a);color:#fff}
.m34-order-filters{display:flex;gap:12px;flex-wrap:wrap;min-width:0}
.m34-order-filters>label{display:grid;gap:5px;min-width:145px;flex:1;font-size:12px}
.m34-order-filters>label:first-child{min-width:200px}
.m34-pagination{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 0}
.m34-attachment-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:7px}
@media(max-width:600px){.m34-sample-row{grid-template-columns:minmax(0,1fr)}.m34-sample-row>label:last-child{max-width:150px}.m34-workflow-panel{padding:12px}.m34-order-filters>label{min-width:0;flex-basis:100%}.m34-orders-scope button{flex:1;font-size:12px}}

.mitabela-announcement { position:fixed; inset:0; margin:auto; height:fit-content; box-sizing:border-box; width:min(920px,calc(100% - 48px)); max-width:none; max-height:calc(100dvh - 48px); padding:0; border:0; border-radius:16px; background:#fffdfa; color:#101c30; overflow:hidden; box-shadow:0 24px 80px rgba(10,20,30,.28); }
.mitabela-announcement::backdrop { background:rgba(9,18,27,.68); }
.mitabela-announcement[open] { animation:mitabela-announcement-enter .22s ease-out; }
.mitabela-announcement-layout { max-height:calc(100dvh - 48px); overflow:auto; overscroll-behavior:contain; }
.mitabela-announcement-layout.has-image { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); }
.mitabela-announcement figure { margin:0; min-height:360px; }
.mitabela-announcement figure img { display:block; width:100%; height:100%; object-fit:cover; }
.mitabela-announcement-content { min-width:0; padding:52px 40px 32px; }
.mitabela-announcement h2 { color:#101c30; margin:0 0 20px; font-family:var(--font-heading,inherit); font-size:clamp(28px,3.1vw,42px); line-height:1.14; letter-spacing:-.025em; overflow-wrap:anywhere; }
.mitabela-announcement-claim { color:#b90045; font-size:20px; font-weight:600; line-height:1.4; margin:0 0 16px; }
.mitabela-announcement-body { color:#34465b; font-size:16px; line-height:1.65; margin:0; white-space:pre-line; }
.mitabela-announcement :is(.mitabela-announcement-body,.mitabela-announcement-claim,.mitabela-announcement-terms) { overflow-wrap:anywhere; }
.mitabela-announcement-close { position:absolute; z-index:2; right:12px; top:12px; display:grid; place-items:center; width:44px; height:44px; border:1px solid #cbd1d8; border-radius:50%; background:#fffdfa; color:#101c30; cursor:pointer; }
.mitabela-announcement-close:hover { background:#f5e5eb; }
.mitabela-announcement-actions { display:flex; flex-wrap:wrap; gap:12px; margin:28px 0 20px; }
.mitabela-announcement-actions a { display:inline-flex; align-items:center; justify-content:center; min-height:46px; box-sizing:border-box; padding:12px 20px; border-radius:8px; font-size:15px; font-weight:600; line-height:1.4; text-align:center; text-decoration:none; }
.mitabela-announcement-primary { background:#c00048; color:#ffffff; }
.mitabela-announcement-primary:hover { background:#9c003b; color:#ffffff; }
.mitabela-announcement-secondary { background:transparent; color:#18334a; border:1px solid #aeb9c3; }
.mitabela-announcement-terms { color:#4c5e6f; font-size:13px; line-height:1.6; white-space:pre-line; margin:16px 0; }
.mitabela-announcement-signature { color:#4c5e6f; font-size:13px; margin:24px 0 0; }
.mitabela-announcement-varieties { display:flex; flex-wrap:wrap; gap:8px; list-style:none; padding:0; margin:20px 0 0; }
.mitabela-announcement-varieties li { padding:5px 10px; background:#f3e7ec; color:#72213e; font-size:13px; border-radius:6px; }
.mitabela-announcement :is(button,a):focus-visible { outline:3px solid #b90045; outline-offset:4px; }
@keyframes mitabela-announcement-enter { from { opacity:.65; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
@media(max-width:650px) { .mitabela-announcement { width:calc(100% - 24px); max-height:calc(100dvh - 24px); }.mitabela-announcement-layout { max-height:calc(100dvh - 24px); }.mitabela-announcement-layout.has-image { grid-template-columns:minmax(0,1fr); }.mitabela-announcement figure { min-height:0; height:210px; }.mitabela-announcement-content { padding:28px 24px 24px; }.mitabela-announcement-actions { flex-direction:column; }.mitabela-announcement h2 { font-size:30px; } }
@media(prefers-reduced-motion:reduce) { .mitabela-announcement[open] { animation:none; } }

.m34-campaign-badge { display:inline-block; padding:7px 12px; margin:0 0 20px; border-radius:6px; background:#f5cf52; color:#173b69; font-size:14px; font-weight:700; letter-spacing:.015em; }
.m34-campaign-carousel { position:relative; overflow:hidden; background:#f6f2e9; }
.mitabela-announcement-content > .m34-campaign-carousel { min-height:0; height:auto; margin:24px 0; border-radius:12px; }
.mitabela-announcement-content > .m34-campaign-carousel img { aspect-ratio:1; height:auto; }
.m34-carousel-controls { position:absolute; bottom:12px; left:12px; right:12px; display:flex; justify-content:space-between; align-items:center; gap:8px; color:#173b69; }
.m34-carousel-controls > span { padding:8px 12px; border-radius:6px; background:#fffdfa; font-size:14px; font-weight:600; }
.m34-carousel-button { min-width:72px; min-height:44px; padding:10px 12px; border:0; border-radius:6px; background:#f5cf52; color:#173b69; cursor:pointer; font:600 14px/1.4 var(--font-body,inherit); }
.m34-carousel-button:hover { background:#e9bf3d; }
.m34-carousel-button:focus-visible { outline:3px solid #173b69; outline-offset:3px; }
.mitabela-announcement .mitabela-announcement-close { background:#f5cf52; color:#173b69; border:0; }
.mitabela-announcement .mitabela-announcement-close:hover { background:#e9bf3d; }

/* Mitabella 3.6 — photographic commerce, editorial detail, contextual evidence. */
.mb-site { --mb-wine:#7f173d; --mb-action:#b70b43; --mb-paper:#fffdfa; --mb-line:#dedbd5; --mb-muted:var(--text-secondary); color:var(--text-main); }
.mb-site h1,.mb-site h2,.mb-site h3 { text-wrap:balance; }
.mb-site em { font-family:Georgia,'Times New Roman',serif; font-weight:400; color:var(--mb-wine); }
.mb-hero { display:grid; grid-template-columns:1fr 1fr; min-height:770px; padding:140px max(28px,calc((100vw - 1280px)/2)) 70px; gap:60px; align-items:center; background:var(--bg-canvas); }
.mb-hero-copy { position:relative; z-index:1; padding:32px 0; }
.mb-hero h1 { font:600 clamp(44px,5.3vw,76px)/1.04 var(--font-display); letter-spacing:-.035em; margin:0 0 28px; max-width:11ch; }
.mb-hero-copy>p { max-width:44ch; font-size:17px; line-height:1.85; color:var(--text-secondary); }
.mb-actions { display:flex; align-items:center; flex-wrap:wrap; gap:20px 26px; margin-top:30px; }
.mb-actions .btn,.mb-closing .btn { min-height:50px; }
.mb-text-link { display:inline-flex; align-items:center; gap:18px; padding:8px 0; font-size:15px; font-weight:600; color:var(--text-main); text-decoration:underline; text-decoration-color:var(--mitabela-rose); text-underline-offset:7px; }
.mb-hero-details { display:flex; flex-wrap:wrap; gap:10px 18px; padding-top:32px; margin-top:32px; border-top:1px solid var(--mb-line); color:var(--text-secondary); font-size:12px; }
.mb-hero-visual { position:relative; height:600px; min-width:0; }
.mb-hero-visual img { object-fit:cover; display:block; }
.mb-hero-main { position:absolute; right:0; top:0; width:78%; height:85%; border-radius:160px 160px 12px 12px; object-position:50% 40%; animation:mb-photo-unfold 900ms cubic-bezier(.16,1,.3,1) both; }
.mb-hero-second { position:absolute; left:0; bottom:10px; width:46%; height:52%; border:8px solid var(--bg-canvas); border-radius:110px 110px 10px 10px; object-position:50% 48%; animation:mb-photo-unfold 1100ms 100ms cubic-bezier(.16,1,.3,1) both; }
.mb-hero-caption { position:absolute; right:0; bottom:0; width:50%; padding:20px 0 0 20px; }
.mb-hero-caption span { display:block; font-size:12px; margin-bottom:9px; color:var(--text-secondary); }
.mb-hero-caption strong { display:block; font:600 23px/1.2 var(--font-display); max-width:15ch; }
.mb-hero-caption a { display:block; margin-top:12px; font-size:12px; text-decoration:underline; text-underline-offset:4px; }
@keyframes mb-photo-unfold { from { clip-path:inset(8% 0 8% 0); opacity:.4; transform:translateY(22px); } to { clip-path:inset(0); opacity:1; transform:translateY(0); } }
.mb-ribbon { position:relative; display:flex; align-items:center; background:var(--mb-wine); color:#fff; padding:20px 0; overflow:hidden; }
.mb-ribbon-window { min-width:0; flex:1; overflow:hidden; }
.mb-ribbon-track { display:flex; width:max-content; animation:mb-ribbon-travel 38s linear infinite; animation-play-state:paused; }
.mb-ribbon.is-running .mb-ribbon-track { animation-play-state:running; }
.mb-ribbon:hover .mb-ribbon-track,.mb-ribbon:focus-within .mb-ribbon-track { animation-play-state:paused; }
.mb-ribbon-track>div { display:flex; flex-shrink:0; align-items:center; }
.mb-ribbon-track span { display:flex; align-items:center; gap:32px; padding:0 16px; white-space:nowrap; font:500 clamp(18px,2vw,26px)/1.3 var(--font-display); }
.mb-ribbon-track i { width:5px; height:5px; display:block; border-radius:50%; background:#f5b6ca; }
.mb-ribbon>button { z-index:1; flex-shrink:0; margin:0 20px; min-height:42px; padding:0 14px; border:1px solid #dba2b7; border-radius:4px; background:var(--mb-wine); color:#fff; font-size:12px; cursor:pointer; }
@keyframes mb-ribbon-travel { to { transform:translateX(-50%); } }
.mb-block { max-width:1280px; margin:100px auto; padding:0 28px; }
.mb-section-heading { display:flex; justify-content:space-between; gap:32px; align-items:end; margin-bottom:36px; }
.mb-site h2 { font:600 clamp(30px,3.5vw,48px)/1.1 var(--font-display); letter-spacing:-.03em; margin:0; }
.mb-section-heading>p { max-width:42ch; color:var(--text-secondary); font-size:16px; line-height:1.8; }
.mb-collection-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; }
.mb-collection-grid>a { display:block; min-width:0; color:var(--text-main); text-decoration:none; }
.mb-collection-grid img { display:block; width:100%; height:360px; object-fit:cover; border-radius:12px; object-position:center; }
.mb-collection-grid>a:nth-child(2) { margin-top:0; }
.mb-collection-grid>a { display:flex; flex-direction:column; }
.mb-collection-grid img { height:auto; aspect-ratio:1.08; transition:filter 220ms ease; }
.mb-collection-grid>a:hover img { filter:saturate(1.08); }
.mb-collection-grid h3 { display:flex; align-items:center; justify-content:space-between; padding-bottom:14px; border-bottom:1px solid var(--mb-line); }
.mb-collection-grid>a:hover h3 { color:var(--mb-wine); }
.mb-collection-grid span { gap:14px; line-height:1.6; }
.mb-collection-grid>a:nth-child(3) img { object-position:50% 35%; }
.mb-collection-grid h3 { font:600 24px/1.25 var(--font-display); margin:20px 0 10px; }
.mb-collection-grid span { display:flex; justify-content:space-between; font-size:14px; color:var(--text-secondary); }
.mb-origin-teaser { display:grid; grid-template-columns:1.15fr 1fr; align-items:center; gap:64px; }
.mb-origin-teaser>img { width:100%; height:420px; object-fit:cover; border-radius:12px; }
.mb-origin-teaser p,.mb-inspiration-teaser p { margin:24px 0; color:var(--text-secondary); font-size:16px; line-height:1.8; max-width:44ch; }
.mb-inspiration-teaser { display:grid; grid-template-columns:1.2fr .8fr .8fr; gap:28px; align-items:center; }
.mb-inspiration-teaser figure { margin:0; }
.mb-inspiration-teaser figure:nth-of-type(2) { margin-top:80px; }
.mb-inspiration-teaser img { width:100%; height:380px; object-fit:cover; border-radius:12px; }
.mb-inspiration-teaser figcaption { padding-top:14px; }
.mb-inspiration-teaser figcaption h3 { font-size:14px; font-weight:500; line-height:1.6; }
.mb-process-teaser { padding-top:44px; border-top:1px solid var(--mb-line); }
.mb-process-teaser ol { list-style:none; padding:0; margin:38px 0 26px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:48px; }
.mb-process-teaser li>span { display:block; font-size:14px; color:var(--mb-action); margin-bottom:14px; }
.mb-process-teaser h3 { font-size:20px; margin-bottom:14px; }
.mb-process-teaser p { font-size:15px; color:var(--text-secondary); line-height:1.8; max-width:32ch; }
.mb-closing { max-width:1224px; margin:100px auto; padding:48px; background:var(--bg-surface-elevated); border-radius:14px; display:flex; align-items:center; justify-content:space-between; gap:40px; }
.mb-closing p { margin:20px 0 0; max-width:60ch; font-size:15px; color:var(--text-secondary); line-height:1.8; }
.mb-closing .btn { white-space:nowrap; }
.mb-page-intro { max-width:1280px; margin:0 auto; padding:160px 28px 0; display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:70px; }
.mb-page-intro h1 { font:600 clamp(40px,4.5vw,64px)/1.06 var(--font-display); letter-spacing:-.035em; margin-bottom:28px; }
.mb-page-intro p { max-width:49ch; font-size:17px; color:var(--text-secondary); line-height:1.8; margin-bottom:22px; }
.mb-page-intro>img,.mb-page-intro>figure img { display:block; width:100%; height:440px; object-fit:cover; border-radius:12px; }
.mb-page-intro>figure { margin:0; }.mb-page-intro>figure figcaption { display:none; }
.mb-topic-tabs,.mb-question-tabs { display:flex; flex-wrap:wrap; gap:10px; padding:16px 0 26px; scroll-margin-top:120px; }
.mb-topic-tabs button,.mb-question-tabs button { min-height:46px; padding:10px 17px; border:1px solid var(--mb-line); border-radius:4px; background:var(--bg-canvas); color:var(--text-main); font:500 14px/1.4 var(--font-body); cursor:pointer; }
.mb-topic-tabs [aria-selected=true],.mb-question-tabs [aria-selected=true] { background:var(--mb-wine); color:white; border-color:var(--mb-wine); }
.mb-topic-tabs button { border-radius:999px; transition:background-color 180ms ease,border-color 180ms ease,box-shadow 180ms ease,transform 180ms ease; }
.mb-topic-tabs button[aria-selected=true] { background:#b20b3e; border-color:#b20b3e; color:#fff; box-shadow:0 5px 18px rgba(178,11,62,.25),0 0 12px rgba(178,11,62,.12); }
.mb-topic-tabs button:focus-visible { outline:3px solid var(--mitabela-crimson); outline-offset:4px; }
@media(hover:hover) and (pointer:fine) {
  .mb-topic-tabs button:hover { border-color:#b20b3e; background:rgba(178,11,62,.06); transform:translateY(-2px); }
  .mb-topic-tabs button[aria-selected=true]:hover { background:#9c0835; box-shadow:0 7px 20px rgba(178,11,62,.3),0 0 14px rgba(178,11,62,.15); }
}
@media(prefers-reduced-motion:reduce) { .mb-topic-tabs button { transition:none; }.mb-topic-tabs button:hover { transform:none; } }
.mb-knowledge-panel { display:grid; grid-template-columns:1fr 1.05fr; gap:64px; scroll-margin-top:120px; }
.mb-knowledge-photo { position:relative; min-width:0; align-self:stretch; }
.mb-knowledge-photo img { display:block; width:100%; height:100%; min-height:540px; max-height:850px; object-fit:cover; border-radius:12px; }
.mb-knowledge-photo>span { position:absolute; left:24px; bottom:24px; padding:10px 16px; background:var(--bg-canvas); color:var(--text-main); font-size:14px; border-radius:4px; }
.mb-knowledge-copy { padding:12px 0; }
.mb-chapter-count { font:500 13px/1.4 var(--font-mono); color:var(--text-secondary); margin-bottom:20px; }
.mb-site .mb-knowledge-copy h2 { font-size:clamp(28px,2.8vw,38px); }
.mb-technical-fact { margin:20px 0; font-size:17px; font-weight:600; color:var(--mb-action); }
.mb-knowledge-copy>p:not(.mb-technical-fact):not(.mb-chapter-count) { font-size:15px; line-height:1.85; margin:16px 0; color:var(--text-secondary); }
.mb-knowledge-copy .origin-benefit { font-weight:600; }
.mb-context-answer { margin-top:22px; padding-top:20px; border-top:1px solid var(--mb-line); }
.mb-context-answer h3 { font-size:16px; line-height:1.6; margin-bottom:12px; }
.mb-context-answer p,.mb-scope-note { font-size:13px; color:var(--text-secondary); line-height:1.8; }
.mb-scope-note { max-width:85ch; margin-top:28px; }
.mb-source-button { display:inline-flex; align-items:center; gap:18px; min-height:44px; border:0; border-bottom:1px solid var(--mb-action); padding:6px 0; background:transparent; color:var(--text-main); cursor:pointer; font-size:14px; }
.mb-reader-controls { display:flex; justify-content:space-between; gap:20px; margin-top:28px; padding-top:20px; border-top:1px solid var(--mb-line); }
.mb-reader-controls button { min-height:44px; padding:6px 0; border:0; background:transparent; color:var(--text-main); cursor:pointer; font-size:13px; }
.mb-editorial-gallery { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:50px 28px; align-items:start; }
.mb-editorial-gallery figure { margin:0; min-width:0; }
.mb-editorial-gallery figure:nth-child(3n+2) { margin-top:70px; }
.mb-editorial-gallery img { display:block; width:100%; height:450px; object-fit:cover; border-radius:12px; }
.mb-editorial-gallery figure:nth-child(5n+1) img { height:520px; }
.mb-editorial-gallery figcaption { padding-top:16px; }.mb-editorial-gallery h3 { font-size:16px; line-height:1.6; margin:0; }
.mb-inspiration-intro>figure figcaption { display:block; padding-top:16px; }
.mb-inspiration-intro figcaption h3 { font-size:16px; line-height:1.6; margin:0; font-weight:600; }
.mb-editorial-gallery figcaption p,.mb-inspiration-intro figcaption p { margin:5px 0 0; font-size:14px; line-height:1.7; color:var(--text-secondary); max-width:none; }
.mb-commercial-details { display:grid; grid-template-columns:1fr 1fr; gap:64px; }
.mb-commercial-details article+article { border-top:1px solid var(--mb-line); padding-top:24px; margin-top:24px; }
.mb-commercial-details h3 { font-size:20px; margin-bottom:14px; }.mb-commercial-details p { font-size:15px; line-height:1.8; color:var(--text-secondary); }
.mb-work-detail-photo { display:block; width:100%; height:280px; margin-top:30px; border-radius:12px; object-fit:cover; }
.mb-footer-brand { display:inline-flex; align-items:center; gap:14px; text-decoration:none; }
.mb-footer-name { font:700 22px/1.2 var(--font-display); color:#8d5b17; letter-spacing:-.02em; }
.mb-footer-brand img { display:block; width:96px; height:auto; padding:0; }
/* Inspiration photos turn as a photographic panel; they never open a zoom. */
.mb-tilt-photo { perspective:1000px; }
.mb-photo-motion { position:relative; border-radius:12px; transform:rotateX(var(--photo-rx,0deg)) rotateY(var(--photo-ry,0deg)); transform-style:preserve-3d; transition:transform 480ms cubic-bezier(.16,1,.3,1),box-shadow 350ms ease; }
.mb-photo-motion img { border-radius:12px; }
.mb-photo-motion::after { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0; background:radial-gradient(circle at var(--photo-light-x,50%) var(--photo-light-y,50%),rgba(255,255,255,.28),transparent 65%); transition:opacity 260ms ease; }
.mb-photo-motion.is-tilting { transform:translateY(-6px) rotateX(var(--photo-rx,0deg)) rotateY(var(--photo-ry,0deg)); box-shadow:0 22px 42px rgba(20,16,25,.18); transition:transform 100ms linear,box-shadow 350ms ease; will-change:transform; }
.mb-photo-motion.is-tilting::after { opacity:1; }
@media(prefers-reduced-motion:reduce),(hover:none),(pointer:coarse){.mb-photo-motion,.mb-photo-motion.is-tilting{transform:none;transition:none;box-shadow:none;will-change:auto}.mb-photo-motion::after{display:none}}
body[data-section=mitabela] .catalog-hero { padding:156px 28px 40px; background:var(--bg-canvas); }
body[data-section=mitabela] .catalog-hero>.container { max-width:1224px!important; text-align:left!important; }
.mb-catalog-title { font:600 clamp(40px,4.5vw,64px)/1.06 var(--font-display); letter-spacing:-.035em; margin:0 0 26px; color:var(--text-main); }
.mb-catalog-title em { font-family:Georgia,'Times New Roman',serif; font-weight:400; color:#7f173d; }
.mb-contact-intro>.container { max-width:1224px!important; text-align:left!important; }
.mb-contact-intro h1 { max-width:19ch; font:600 clamp(40px,4.5vw,64px)/1.06 var(--font-display)!important; letter-spacing:-.035em; margin-bottom:26px; }
.mb-contact-intro .section-subtitle { max-width:58ch; margin:0!important; font-size:17px!important; line-height:1.8; }
body[data-section=mitabela] .catalog-hero .section-subtitle { max-width:60ch!important; margin:0 0 30px!important; font-size:17px!important; line-height:1.8; }
body[data-section=mitabela] .catalog-metrics-grid { margin-top:30px; }
[data-theme=dark] .mb-catalog-title em { color:#f0a5bf; }
@media(max-width:760px){body[data-section=mitabela] .catalog-hero{padding:126px 24px 28px}.mb-work-detail-photo{height:250px}.mb-photo-dialog{padding:12px;width:calc(100vw - 20px)}.mb-photo-dialog figure img{height:65dvh}.mb-photo-dialog button{font-size:12px}.mb-collection-grid img{height:auto!important}}
.mb-site .journey-section { margin-top:0; border-top:0; padding-top:0; }.mb-site .journey-intro { margin:22px 0; }
.mb-question-panels { max-width:900px; padding:32px 0; border-top:1px solid var(--mb-line); }
.mb-question-panels h3 { font-size:26px; line-height:1.4; margin-bottom:18px; }.mb-question-panels p { max-width:74ch; color:var(--text-secondary); font-size:16px; line-height:1.9; }
.mb-reference-dialog { margin:auto; width:min(720px,calc(100vw - 32px)); max-height:85dvh; overflow-y:auto; padding:32px; border:1px solid var(--glass-border); border-radius:12px; background:var(--bg-canvas); color:var(--text-main); }
.mb-reference-dialog::backdrop { background:rgba(15,18,26,.55); }
.mb-reference-heading { display:flex; justify-content:space-between; align-items:start; gap:24px; margin-bottom:22px; }.mb-reference-heading h2 { font:600 25px/1.3 var(--font-display); }.mb-reference-heading button { flex-shrink:0; padding:8px 12px; min-height:44px; border:1px solid var(--glass-border); border-radius:4px; color:var(--text-main); background:var(--bg-canvas); cursor:pointer; }
.mb-reference-dialog>p { color:var(--text-secondary); font-size:14px; line-height:1.8; }.mb-reference-dialog ul { list-style:none; margin:20px 0 0; padding:0; }.mb-reference-dialog li { padding:20px 0; border-top:1px solid var(--glass-border); }.mb-reference-dialog a { font-weight:600; line-height:1.6; text-decoration:underline; text-underline-offset:4px; }.mb-reference-dialog small { display:block; margin-top:8px; color:var(--text-secondary); }
body[data-division=mitabela] .m2-nav-links { gap:20px; }.mb-site :is(a,button):focus-visible,.mb-reference-dialog :is(a,button):focus-visible { outline:3px solid var(--mitabela-crimson); outline-offset:5px; }
[data-theme=dark] .mb-site em { color:#f0a5bf; }[data-theme=dark] .mb-site { --mb-line:#343541; --mb-action:#f2a4be; }[data-theme=dark] .mb-topic-tabs [aria-selected=true],[data-theme=dark] .mb-question-tabs [aria-selected=true] { color:white; }
@media(max-width:1100px){.mb-hero{gap:30px;min-height:700px}.mb-hero-visual{height:530px}.mb-hero h1{font-size:60px}.mb-closing{margin-left:28px;margin-right:28px}.mb-knowledge-panel{gap:36px}.mb-section-heading>p{max-width:34ch}}
@media(max-width:760px){.mb-hero{grid-template-columns:1fr;padding:126px 24px 42px;gap:20px;min-height:0}.mb-hero-copy{padding:0}.mb-hero h1{font-size:clamp(44px,11vw,64px);max-width:12ch;margin-bottom:22px}.mb-hero-copy>p{font-size:15px;line-height:1.8}.mb-actions{gap:18px;margin-top:24px}.mb-hero-details{font-size:11px;gap:8px 14px;padding-top:20px;margin-top:24px}.mb-hero-visual{height:440px;max-width:520px;width:100%;margin:8px auto 0}.mb-hero-caption strong{font-size:20px}.mb-hero-caption{padding-left:12px}.mb-hero-caption span,.mb-hero-caption a{font-size:11px}.mb-ribbon{padding:14px 0}.mb-ribbon>button{margin:0 12px}.mb-block{margin:64px auto;padding:0 24px}.mb-section-heading{display:block;margin-bottom:26px}.mb-section-heading>p{max-width:none;margin-top:20px;font-size:15px}.mb-site h2{font-size:34px}.mb-collection-grid{grid-template-columns:1fr;gap:32px}.mb-collection-grid>a:nth-child(2){margin-top:0}.mb-collection-grid img{height:360px}.mb-origin-teaser{grid-template-columns:1fr;gap:28px}.mb-origin-teaser>img{height:auto;aspect-ratio:1.65;object-fit:cover}.mb-inspiration-teaser{grid-template-columns:1fr 1fr;gap:20px}.mb-inspiration-teaser>div{grid-column:1/-1}.mb-inspiration-teaser img{height:260px}.mb-inspiration-teaser figure:nth-of-type(2){margin-top:44px}.mb-process-teaser ol{grid-template-columns:1fr;gap:28px;margin-top:30px}.mb-process-teaser li{border-top:1px solid var(--mb-line);padding-top:20px}.mb-process-teaser p{max-width:none}.mb-closing{display:block;margin:64px 24px;padding:30px 24px}.mb-closing .btn{margin-top:26px;white-space:normal}.mb-page-intro{padding:130px 24px 0;grid-template-columns:1fr;gap:28px}.mb-page-intro h1{font-size:44px}.mb-page-intro p{font-size:16px}.mb-page-intro>img,.mb-page-intro>figure img{height:300px}.mb-topic-tabs,.mb-question-tabs{gap:8px}.mb-topic-tabs button,.mb-question-tabs button{font-size:12px;padding:10px 12px}.mb-knowledge-panel{grid-template-columns:1fr;gap:28px}.mb-knowledge-photo img{min-height:0;height:300px;max-height:none}.mb-knowledge-copy{padding:0}.mb-knowledge-photo>span{left:18px;bottom:18px}.mb-editorial-gallery{grid-template-columns:1fr 1fr;gap:30px 18px}.mb-editorial-gallery figure:nth-child(3n+2){margin-top:0}.mb-editorial-gallery figure:nth-child(even){margin-top:50px}.mb-editorial-gallery img,.mb-editorial-gallery figure:nth-child(5n+1) img{height:280px}.mb-editorial-gallery h3{font-size:13px}.mb-commercial-details{grid-template-columns:1fr;gap:30px}.mb-question-panels h3{font-size:24px}.mb-reference-dialog{padding:22px}.mb-reference-heading h2{font-size:22px}}
@media(max-width:359px){.mb-hero h1{font-size:42px}.mb-hero-visual{height:380px}.mb-hero-caption strong{font-size:18px}.mb-editorial-gallery{grid-template-columns:1fr}.mb-editorial-gallery figure:nth-child(even){margin-top:0}.mb-hero-details{gap:8px}.mb-actions .btn{width:100%;justify-content:center}}
@media(prefers-reduced-motion:reduce){.mb-hero-visual img{animation:none}.mb-ribbon-track{animation:none}.mb-ribbon-track>div[aria-hidden=true]{display:none}.mb-ribbon-track,.mb-ribbon-track>div{width:auto;flex-wrap:wrap;gap:14px}.mb-ribbon-track span{font-size:16px;padding:4px 8px;gap:16px}.mb-ribbon-window{overflow:visible}}

.mb-hero-caption { background:var(--bg-canvas); border-radius:10px 0 0; }
.mb-collection-grid>a:nth-child(3) img { object-fit:contain; background:#fff; padding:24px; }

/* The supplied panorama remains complete; normal crop photography stays editorial. */
.mb-ecuador-intro { grid-template-columns:1fr; gap:34px; }
.mb-ecuador-intro>div { display:grid; grid-template-columns:1fr 1fr; column-gap:70px; align-items:start; }
.mb-ecuador-intro h1 { grid-column:1; grid-row:1/3; margin:0; }
.mb-ecuador-intro>div>p,.mb-ecuador-intro>div>a { grid-column:2; }
.mb-ecuador-intro>img { width:100%; height:auto; aspect-ratio:1920/623; object-fit:contain; }
.mb-reference-dialog .mb-source-context { margin-top:12px; color:var(--text-secondary); font-size:14px; line-height:1.8; }
@media(max-width:760px) { .mb-ecuador-intro>div { display:block; } .mb-ecuador-intro h1 { margin-bottom:24px; } .mb-ecuador-intro>img { height:auto; } }

/* The entire buyer guide is one warm Mitabella surface. */
.mb-site .mb-buyer-guide { scroll-margin-top:110px; }
.mb-site .mb-buyer-guide { width:calc(100% - 56px); max-width:1224px; box-sizing:border-box; padding:48px; border-radius:16px; background:linear-gradient(120deg,#701333 0%,#83183f 58%,#942148 100%); color:#fff; --text-main:#fff; --text-secondary:#fae8ef; --mb-line:rgba(255,255,255,.28); --mb-action:#fff; }
.mb-buyer-guide .mb-section-heading { align-items:end; }
.mb-buyer-guide :is(h2,h3) { color:#fff; }
.mb-buyer-guide .mb-section-heading>p,.mb-buyer-guide .mb-question-panels p { color:#fae8ef; }
.mb-buyer-guide .mb-question-tabs { gap:10px; }
.mb-buyer-guide .mb-question-tabs button { color:#fff; border-color:rgba(255,255,255,.48); background:transparent; }
.mb-buyer-guide .mb-question-tabs button:hover { background:rgba(255,255,255,.12); }
.mb-buyer-guide .mb-question-tabs button[aria-selected=true] { color:#701333; background:#fff; border-color:#fff; }
.mb-buyer-guide .mb-question-tabs button:focus-visible { outline:3px solid #f6ce6b; outline-offset:4px; }
.mb-buyer-guide .mb-question-panels { max-width:none; padding-bottom:0; border-top-color:rgba(255,255,255,.28); }
@media(max-width:760px){.mb-site .mb-buyer-guide{width:calc(100% - 48px);padding:30px 24px}.mb-buyer-guide .mb-section-heading>p{margin-top:18px}.mb-buyer-guide .mb-question-tabs{gap:8px}.mb-buyer-guide .mb-question-tabs button{font-size:12px;padding:10px}.mb-buyer-guide .mb-question-panels h3{font-size:23px}}

/* 3.6.8: frame supplied photographs to conceal embedded white source edges. */
.mb-photo-frame { display:block; overflow:hidden; border-radius:12px; height:100%; min-width:0; }
.mb-photo-frame>img { display:block; width:100%; height:100%; object-fit:cover; border-radius:0; transform:scale(1.04); }
.mb-hero-visual>.mb-photo-frame { display:contents; }
.mb-hero-visual>.mb-photo-frame>img { transform:none; }
.mb-collection-grid .mb-photo-frame { height:360px; }
.mb-inspiration-intro .mb-photo-frame { height:430px; }
.mb-inspiration-teaser .mb-photo-frame { height:380px; }
.mb-editorial-gallery { grid-template-columns:repeat(12,minmax(0,1fr)); }
.mb-editorial-gallery>figure { grid-column:span 4; }
.mb-editorial-gallery .mb-photo-frame { height:450px; }
.mb-editorial-gallery figure:first-child .mb-photo-frame { height:520px; }
.mb-editorial-gallery>figure:nth-child(n+7) { grid-column:span 3; margin-top:0; }
.mb-editorial-gallery>figure:nth-child(n+7) img,.mb-editorial-gallery>figure:nth-child(n+7) .mb-photo-frame { height:360px; }
.mb-editorial-gallery .mb-photo-frame>img { height:100%; }
@media(max-width:760px) {
 .mb-inspiration-intro .mb-photo-frame { height:300px; }
 .mb-inspiration-teaser .mb-photo-frame { height:260px; }
 .mb-editorial-gallery { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .mb-editorial-gallery>figure,.mb-editorial-gallery>figure:nth-child(n+7) { grid-column:auto; margin-top:0; }
 .mb-editorial-gallery img,.mb-editorial-gallery figure:first-child .mb-photo-frame,.mb-editorial-gallery>figure:nth-child(n+7) img,.mb-editorial-gallery .mb-photo-frame,.mb-editorial-gallery>figure:nth-child(n+7) .mb-photo-frame { height:280px; }
 .mb-editorial-gallery .mb-photo-frame>img { height:100%; }
}
@media(max-width:359px) { .mb-editorial-gallery { grid-template-columns:1fr; } }